From b2899e6feb242e0b4302605bf2ded402e3835369 Mon Sep 17 00:00:00 2001
From: natxocc <natxocc@gmail.com>
Date: Mon, 27 Apr 2026 20:51:24 +0200
Subject: [PATCH] Update Readme

---
 Readme.md | 100 ++++++++++++++++++++++--------------------------------
 1 file changed, 41 insertions(+), 59 deletions(-)

diff --git a/Readme.md b/Readme.md
index 06b7755..1aae81c 100644
--- a/Readme.md
+++ b/Readme.md
@@ -2,7 +2,7 @@
 
 **SigPro UI** is a lightweight, ultra-fast, and reactive component library built for the **SigPro** reactivity core. It provides a set of high-quality, accessible, and themeable UI components with **zero external dependencies** - everything is included.
 
-**SigPro UI** is a complete, self-contained UI library + reactive core in under **45KB gzip** (<15KB JS + <30KB CSS). 🎉
+**SigPro UI** is a complete, full self-contained UI library + reactive core in under **35KB gzip** (< 13KB JS + < 22KB CSS). 🎉
 
 Unlike heavy frameworks, SigPro UI focuses on a **"Zero-Build"** philosophy, allowing you to build complex reactive interfaces with a functional, declarative syntax that runs natively in the browser.
 
@@ -13,48 +13,46 @@ Unlike heavy frameworks, SigPro UI focuses on a **"Zero-Build"** philosophy, all
 - **Signals-Based Reactivity**: Powered by SigPro for granular DOM updates
 - **Self-Contained Styling**: Full CSS included - no external frameworks needed
 - **Built on daisyUI v5**: Modern, utility-first styling out of the box
-- **Tree Shaking Ready**: Import only what you need
-- **Zero-Import Option**: Inject all components into the global scope with one command
+- **Tree Shaking Ready**: ESM imports with `sigpro` as external dependency
+- **IIFE All-in-One**: Single script tag for browser usage
 - **Lightweight**: Minimal footprint with everything bundled
 
 ---
 
 ## Installation
 
-### Via NPM
+### ESM / Bundler
 
 ```bash
-npm install sigpro-ui
+npm install sigpro sigpro-ui
+# or
+bun add sigpro sigpro-ui
 ```
 
-### Via CDN (Browser)
+### CDN (Browser - All-in-One)
 
 ```html
-<!-- SigPro UI with styles included -->
-<script src="https://unpkg.com/sigpro-ui"></script>
-<link href="https://unpkg.com/sigpro-ui/css" rel="stylesheet">
+<script src="https://unpkg.com/sigpro-ui@latest/dist/sigpro-ui.min.js"></script>
+<link href="https://unpkg.com/sigpro-ui@latest/dist/sigpro-ui.min.css" rel="stylesheet">
 ```
 
-**That's it!** No additional CSS files, no configuration, no build step. SigPro core is included internally.
+**That's it!** The CDN version includes SigPro core internally - no additional scripts needed.
 
 ---
 
 ## Usage
 
-You can use SigPro UI in two ways: **Modular** (Recommended) or **Global** (Fastest for prototyping).
-
-### 1. Modular Approach (Tree Shaking)
-
-Import only the components you need:
+### ESM / Modular (Tree Shaking)
 
 ```javascript
-import { $, mount, Button, Modal, Input, Alert } from "sigpro-ui";
+import { $, mount, watch, h } from "sigpro";
+import { Button, Modal, Input, Alert } from "sigpro-ui";
 import "sigpro-ui/css";
 
 const App = () => {
   const show = $(false);
   
-  return button(
+  return Button(
     { 
       class: "btn-primary", 
       onclick: () => show(true) 
@@ -66,61 +64,44 @@ const App = () => {
 mount(App, "#app");
 ```
 
-### 2. Global Approach (Zero-Import)
+### CDN / Global (All-in-One)
 
-Inject all components into the `window` object:
+```html
+<script src="https://unpkg.com/sigpro-ui@latest/dist/sigpro-ui.min.js"></script>
+<script>
+  const App = () => {
+    const count = $(0);
 
-```javascript
-import "sigpro-ui";
-import "sigpro-ui/css";
+    return h('div', { class: 'p-10 flex flex-col gap-4' }, [
+      h('h1', { class: 'text-2xl font-bold' }, 'Welcome to SigPro UI'),
+      
+      Button({ 
+        class: 'btn-primary', 
+        onclick: () => {
+          count(count() + 1);
+          Toast(`Count is now ${count()}`, 'alert-success');
+        }
+      }, () => `Clicks: ${count()}`)
+    ]);
+  };
 
-// All components (Button, Table, Input, Alert, etc.) are now globally available.
-// No need to import anything else!
-
-const myApp = () => table({ items: [], columns: [] });
-```
-
----
-
-## Basic Example
-
-```javascript
-import { $, mount, Button, Toast, Div, H1 } from "sigpro-ui";
-import "sigpro-ui/css";
-
-const App = () => {
-  const count = $(0);
-
-  return div({ class: "p-10 flex flex-col gap-4" }, [
-    H1({ class: "text-2xl font-bold" }, "Welcome to SigPro UI"),
-    
-    button({ 
-      class: "btn-primary", 
-      onclick: () => {
-        count(c => c + 1);
-        Toast(`Count is now ${count()}`, "alert-success");
-      }
-    }, () => `Clicks: ${count()}`)
-  ]);
-};
-
-mount(App, "#app");
+  mount(App, '#app');
+</script>
 ```
 
 ---
 
 ## What's Included?
 
-### Core Functions (from SigPro)
+### Core Functions (SigPro)
 - `$()` - Reactive signals
-- `watch()` - watch reactive dependencies
+- `watch()` - Watch reactive dependencies
 - `h()` - Create HTML elements with reactivity
 - `when()` - Conditional rendering
 - `each()` - List rendering
-- `router()` - Hash-based routing
-- `mount()` - mount components to DOM
+- `mount()` - Mount components to DOM
 
-Explore [SigPro Core Docs](https://natxocc.github.io/sigpro/#/) for more information.
+> [SigPro Core Docs](https://sigpro.natxocc.com/#/)
 
 ### UI Components
 - `Button`, `Input`, `Select`, `Checkbox`, `Radio`
@@ -148,7 +129,8 @@ import { tt, Locale } from "sigpro-ui";
 Locale('en');
 
 // Use translations
-const closeButton = button({}, tt('close')());
+Button({}, tt('close'));
+Input({ placeholder: tt('search') });
 ```
 
 ---