Independent sigpro vs sigpro-ui

docs/README.md

@@ -6,12 +6,12 @@
           <path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-5.25v9" />
         </svg>
       </div>
-      <h1 class="text-7xl md:text-9xl font-black tracking-tighter mb-4 bg-clip-text text-transparent bg-linear-to-r from-secondary via-accent to-primary !text-center w-full">SigPro UI beta (W.I.P.)</h1>
+      <h1 class="text-7xl md:text-9xl font-black tracking-tighter mb-4 bg-clip-text text-transparent bg-linear-to-r from-secondary via-accent to-primary !text-center w-full">SigPro UI (W.I.P.)</h1>
       <div class="text-2xl md:text-3xl font-bold text-base-content/90 mb-4 !text-center w-full">Reactive Design System for SigPro</div>
       <div class="text-xl text-base-content/60 max-w-3xl mx-auto mb-10 leading-relaxed italic text-balance font-light !text-center w-full">"Atomic components for high-performance interfaces. Zero-boilerplate, pure reactivity."</div>
       <div class="flex flex-wrap justify-center gap-4 w-full">
         <a href="#/install" class="btn btn-secondary btn-lg shadow-xl shadow-secondary/20 group px-10 border-none text-secondary-content">View Components <span class="group-hover:translate-x-1 transition-transform inline-block">→</span></a>
-        <button onclick="window.open('https://git.natxocc.com/natxocc/sigpro-ui')" class="btn btn-outline btn-lg border-base-300 hover:bg-base-300 hover:text-base-content">Gitea</button>
+        <button onclick="window.open('https://github.com/natxocc/sigpro-ui')" class="btn btn-outline btn-lg border-base-300 hover:bg-base-300 hover:text-base-content">Github</button>
       </div>
     </div>
     <div class="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full -z-0 opacity-10 pointer-events-none">

docs/demo.md

@@ -632,9 +632,9 @@ mount(
 ```js
 mount(
   div({ class: "flex gap-4 text-xl" }, [
-    Icon("icon-[lucide--home]"),
-    Icon("icon-[lucide--settings]"),
-    Icon("❤️"), // emoji fallback
+    Icon({},"icon-[lucide--home]"),
+    Icon({},"icon-[lucide--settings]"),
+    "❤️", // emoji fallback
   ]),
   "#demo-icon",
 );
@@ -649,7 +649,7 @@ mount(
 ```js
 mount(
   Indicator({ value: "3" }, [
-    Button({ class: "btn-circle" }, Icon("icon-[lucide--bell]")),
+    Button({ class: "btn-circle" }, Icon({},"icon-[lucide--bell]")),
   ]),
   "#demo-indicator",
 );
@@ -671,14 +671,14 @@ mount(
       label: "Username",
       float: true,
       value: username,
-      left: Icon("icon-[lucide--user]"),
+      left: Icon({},"icon-[lucide--user]"),
     }),
     Input({
       type: "password",
       label: "Password",
       float: true,
       value: password,
-      left: Icon("icon-[lucide--lock]"),
+      left: Icon({},"icon-[lucide--lock]"),
     }),
   ]),
   "#demo-input",
@@ -813,7 +813,7 @@ mount(
     div({ class: "flex-1" }, a({ class: "btn btn-ghost text-xl" }, "SigPro")),
     div(
       { class: "flex-none" },
-      Button({ class: "btn-square btn-ghost" }, Icon("icon-[lucide--menu]")),
+      Button({ class: "btn-square btn-ghost" }, Icon({},"icon-[lucide--menu]")),
     ),
   ]),
   "#demo-navbar",

docs/index.html

@@ -67,6 +67,7 @@
     <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
     <script src="//cdn.jsdelivr.net/npm/docsify@4.13.0/lib/docsify.min.js"></script>
     <script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/sigpro@latest/dist/sigpro.min.js"></script>
     <script src="./sigpro-ui.min.js"></script>
   </body>
 </html>

docs/install.md

@@ -5,7 +5,7 @@ Follow these steps to integrate **SigPro-UI** into your project.
 ---
 
 !> **📘 Core Concepts**  
-SigProUI is built on top of the `SigPro` reactive core. To learn how to create signals, manage reactivity, and structure your application logic, check out the [SigPro documentation](https://sigpro.natxocc.com/#/).
+SigProUI is based on the `SigPro` reactive core. To learn how to create signals, manage reactivity, and structure your application logic, check out the [SigPro documentation](https://sigpro.natxocc.com/#/).
 
 ---
 
@@ -13,10 +13,10 @@ SigProUI is built on top of the `SigPro` reactive core. To learn how to create s
 
 ```bash
 # ESM / Bundler (tree-shaking)
-npm install sigpro-ui
+npm install sigpro sigpro-ui
 
 # Or with bun
-bun add sigpro-ui
+bun add sigpro sigpro-ui
 ```
 
 ## 2. Import and use in your app
@@ -24,7 +24,8 @@ bun add sigpro-ui
 ### ESM / Module usage
 
 ```javascript
-import { $, Input, Button, Alert } from "sigpro-ui";
+import { $ } from "sigpro"; // Core functions
+import { Input, Button, Alert } from "sigpro-ui"; // Components
 import "sigpro-ui/css";
 
 const App = () => {
@@ -61,6 +62,7 @@ mount(App, "#app");
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>SigProUI Demo</title>
+  <!-- Load CSS -->
   <link href="https://unpkg.com/sigpro-ui@latest/dist/sigpro-ui.min.css" rel="stylesheet">
   <style>
     body { padding: 2rem; }
@@ -68,7 +70,8 @@ mount(App, "#app");
 </head>
 <body>
   <div id="app"></div>
-
+  <!-- Load sigpro and sigpro-ui -->
+  <script src="https://unpkg.com/sigpro-ui@latest/dist/sigpro.min.js"></script>
   <script src="https://unpkg.com/sigpro-ui@latest/dist/sigpro-ui.min.js"></script>
   <script>
     const App = () => {
@@ -133,10 +136,10 @@ mount(App, "#app");
 SigProUI includes built-in i18n with Spanish and English:
 
 ```javascript
-import { t, Locale } from 'sigpro-ui';
+import { t, setLocale } from 'sigpro-ui';
 
 // Change locale (default is 'es')
-Locale('en');
+setLocale('en');
 
 // Use translations
 Button({}, t('close'));
@@ -158,6 +161,6 @@ import type { ButtonProps, InputProps } from 'sigpro-ui';
 | :--- | :--- |
 | Components don't look styled | Make sure you're loading the CSS (`sigpro-ui.min.css`) |
 | CDN functions not working | All core functions (`$`, `h`, `watch`, etc.) are available globally |
-| Locale not working | Set locale with `Locale('en')` before using translations |
+| setLocale not working | Set locale with `setLocale('en')` before using translations |
 
 **Happy coding!** 🎉

docs/quick.md

@@ -326,6 +326,9 @@ Typically contains `DropdownButton` and `DropdownContent`.
 
 ## Editor (Rich Text)
 `Editor(props)`
+> In ESM tree shaking, editor must be loaded `import { Editor } from "sigpro\editor"`
+
+> In IIFE / UMD, Editor is included.
 
 | Prop       | Type              | Default | Description                                                |
 |------------|-------------------|---------|------------------------------------------------------------|
@@ -789,6 +792,6 @@ Displays an 8×8 grid of preset colours.
 
 ## Utility Functions
 
-- **`Locale(lang)`** – Signal to read/set the current language (`"en"` or `"es"`).
+- **`setLocale(lang)`** – Signal to read/set the current language (`"en"`, `"es"` ...).
 - **`t(key)`** – Returns a reactive translation string from the built‑in dictionary based on current locale.
 ```