1.1.5

UI/sigpro-ui.js

@@ -63,66 +63,6 @@ export const UI = ($, defaultLang = "es") => {
   const iconRRight =
     "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABmSURBVDiN3dGxCoAgEMbxfz1dL1BTREJzmUv08trgDYcg6VCD3/YD7zvkoLmMgFEegLmmwAAecOJVvNeUWCAAt7IHjt9LThkyiRf9qC8oCom70u0BuDL+bngj/tNm/JqJePucW8wDvGYdzT0nMUkAAAAASUVORK5CYII=";
 
-  // --- UTILITY FUNCTIONS ---
-
-  /** IF */
-  ui.If = (condition, thenValue, otherwiseValue = null) => {
-    return () => {
-      const isTrue = val(condition);
-      const result = isTrue ? thenValue : otherwiseValue;
-      if (typeof result === "function" && !(result instanceof HTMLElement)) {
-        return result();
-      }
-      return result;
-    };
-  };
-
-  /** FOR */
-  ui.For = (source, render, keyFn) => {
-    if (typeof keyFn !== "function") throw new Error("SigPro UI: For requires a keyFn.");
-
-    const marker = document.createTextNode("");
-    const container = $.html("div", { style: "display:contents" }, [marker]);
-    const cache = new Map();
-
-    $.effect(() => {
-      const items = val(source) || [];
-      const newKeys = new Set();
-
-      items.forEach((item, index) => {
-        const key = keyFn(item, index);
-        newKeys.add(key);
-
-        let runtime = cache.get(key);
-        if (!runtime) {
-          runtime = $.view(() => render(item, index));
-          cache.set(key, runtime);
-        }
-        container.insertBefore(runtime.container, marker);
-      });
-
-      cache.forEach((runtime, key) => {
-        if (!newKeys.has(key)) {
-          runtime.destroy();
-          cache.delete(key);
-        }
-      });
-    });
-
-    return container;
-  };
-
-  /** JSON */
-  ui.Json = (data, space = 2) => {
-    return Span({ class: "font-mono whitespace-pre-wrap" }, () => {
-      try {
-        return JSON.stringify(val(data), null, space);
-      } catch (e) {
-        return "[Error: Circular or Invalid JSON]";
-      }
-    });
-  };
-
   /** REQ */
   ui.Request = (url, payload = null, options = {}) => {
     const data = $(null),
@@ -176,14 +116,14 @@ export const UI = ($, defaultLang = "es") => {
   /** RESPONSE */
   ui.Response = (reqObj, renderFn) =>
     $.html("div", { class: "res-container" }, [
-      ui.If(reqObj.loading, $.html("div", { class: "flex justify-center p-4" }, $.html("span", { class: "loading loading-dots text-primary" }))),
+      $.if(reqObj.loading, $.html("div", { class: "flex justify-center p-4" }, $.html("span", { class: "loading loading-dots text-primary" }))),
-      ui.If(reqObj.error, () =>
+      $.if(reqObj.error, () =>
         $.html("div", { role: "alert", class: "alert alert-error" }, [
           $.html("span", {}, reqObj.error()),
           ui.Button({ class: "btn-xs btn-ghost border-current", onclick: () => reqObj.reload() }, "Retry"),
         ]),
       ),
-      ui.If(reqObj.success, () => {
+      $.if(reqObj.success, () => {
         const current = reqObj.data();
         return current !== null ? renderFn(current) : null;
       }),
@@ -300,7 +240,7 @@ export const UI = ($, defaultLang = "es") => {
         $value: $value,
         onchange: (e) => $value?.(e.target.value),
       },
-      ui.For(
+      $.for(
         () => val(options) || [],
         (opt) =>
           $.html(
@@ -387,7 +327,7 @@ export const UI = ($, defaultLang = "es") => {
           style: () => (isOpen() && list().length ? "display:block" : "display:none"),
         },
         [
-          ui.For(
+          $.for(
             list,
             (opt, i) =>
               $.html("li", {}, [
@@ -481,7 +421,7 @@ export const UI = ($, defaultLang = "es") => {
         ...rest,
       }),
 
-      ui.If(isOpen, () =>
+      $.if(isOpen, () =>
         $.html(
           "div",
           {
@@ -579,7 +519,7 @@ export const UI = ($, defaultLang = "es") => {
         ),
       ),
 
-      ui.If(isOpen, () => $.html("div", { class: "fixed inset-0 z-[90]", onclick: () => isOpen(false) })),
+      $.if(isOpen, () => $.html("div", { class: "fixed inset-0 z-[90]", onclick: () => isOpen(false) })),
     ]);
   };
 
@@ -622,7 +562,7 @@ export const UI = ($, defaultLang = "es") => {
         ],
       ),
 
-      ui.If(isOpen, () =>
+      $.if(isOpen, () =>
         $.html(
           "div",
           {
@@ -653,7 +593,7 @@ export const UI = ($, defaultLang = "es") => {
         ),
       ),
 
-      ui.If(isOpen, () =>
+      $.if(isOpen, () =>
         $.html("div", {
           class: "fixed inset-0 z-[100]",
           onclick: () => isOpen(false),
@@ -729,7 +669,7 @@ export const UI = ($, defaultLang = "es") => {
     const { title, buttons, $open, ...rest } = props;
     const close = () => $open(false);
 
-    return ui.If($open, () =>
+    return $.if($open, () =>
       $.html("dialog", { ...rest, class: "modal modal-open" }, [
         $.html("div", { class: "modal-box" }, [
           title ? $.html("h3", { class: "text-lg font-bold mb-4" }, title) : null,
@@ -773,7 +713,7 @@ export const UI = ($, defaultLang = "es") => {
 
     container._cleanups.add(() => observer.disconnect());
 
-    const stopGrid = $.effect(() => {
+    const stopGrid = $.watch(() => {
       const dark = isDark();
       const agTheme = getTheme(dark);
       const rowData = val(data) || [];
@@ -790,7 +730,7 @@ export const UI = ($, defaultLang = "es") => {
     });
     container._cleanups.add(stopGrid);
 
-    const stopData = $.effect(() => {
+    const stopData = $.watch(() => {
       const rowData = val(data);
       if (gridApi && Array.isArray(rowData)) {
         gridApi.setGridOption("rowData", rowData);
@@ -875,7 +815,7 @@ export const UI = ($, defaultLang = "es") => {
           role: "tablist",
           class: joinClass("tabs tabs-box", props.$class || props.class),
         },
-        ui.For(
+        $.for(
           itemsSignal,
           (it) =>
             $.html(
@@ -914,7 +854,7 @@ export const UI = ($, defaultLang = "es") => {
   /** MENU */
   ui.Menu = (props) => {
     const renderItems = (items) =>
-      ui.For(
+      $.for(
         () => items || [],
         (it) =>
           $.html("li", {}, [
@@ -977,8 +917,8 @@ export const UI = ($, defaultLang = "es") => {
         class: joinClass("list bg-base-100 rounded-box shadow-md", className),
       },
       [
-        ui.If(header, () => $.html("li", { class: "p-4 pb-2 text-xs opacity-60 tracking-wide" }, [val(header)])),
+        $.if(header, () => $.html("li", { class: "p-4 pb-2 text-xs opacity-60 tracking-wide" }, [val(header)])),
-        ui.For(items, (item, index) => $.html("li", { class: "list-row" }, [render(item, index)]), keyFn),
+        $.for(items, (item, index) => $.html("li", { class: "list-row" }, [render(item, index)]), keyFn),
       ],
     );
   };
@@ -1103,7 +1043,7 @@ export const UI = ($, defaultLang = "es") => {
           `timeline ${val(vertical) ? "timeline-vertical" : "timeline-horizontal"} ${val(compact) ? "timeline-compact" : ""} ${props.class || ""}`,
       },
       [
-        ui.For(
+        $.for(
           items,
           (item, i) => {
             const isFirst = i === 0;
@@ -1179,51 +1119,59 @@ export const UI = ($, defaultLang = "es") => {
     if (!container) {
       container = $.html("div", {
         id: "sigpro-toast-container",
-        class: "fixed top-0 right-0 z-[9999] p-4 flex flex-col gap-2",
+        class: "fixed top-0 right-0 z-[9999] p-4 flex flex-col gap-2 pointer-events-none",
       });
       document.body.appendChild(container);
     }
 
-    const runtime = $.view(() => {
+    const toastHost = $.html("div", { style: "display: contents" });
+    container.appendChild(toastHost);
+
+    let timeoutId;
+    const close = () => {
+      clearTimeout(timeoutId);
+      const el = toastHost.firstElementChild;
+      if (el && !el.classList.contains("opacity-0")) {
+        el.classList.add("translate-x-full", "opacity-0");
+        setTimeout(() => {
+          instance.destroy();
+          toastHost.remove();
+          if (!container.hasChildNodes()) container.remove();
+        }, 300);
+      } else {
+        instance.destroy();
+        toastHost.remove();
+      }
+    };
+
+    const ToastComponent = () => {
       const el = $.html(
         "div",
         {
-          class: `alert alert-soft ${type} shadow-lg transition-all duration-300 translate-x-10 opacity-0`,
+          class: `alert alert-soft ${type} shadow-lg transition-all duration-300 translate-x-10 opacity-0 pointer-events-auto`,
         },
         [
-          $.html("span", typeof message === "function" ? message() : message),
+          $.html("span", typeof message === "function" ? message : () => message),
-          ui.Button(
+          ui.Button({ class: "btn-xs btn-circle btn-ghost", onclick: close }, "✕"),
-            {
-              class: "btn-xs btn-circle btn-ghost",
-              onclick: () => remove(),
-            },
-            "✕",
-          ),
         ],
       );
 
-      const remove = () => {
+      requestAnimationFrame(() => el.classList.remove("translate-x-10", "opacity-0"));
-        el.classList.add("translate-x-full", "opacity-0");
-        setTimeout(() => {
-          runtime.destroy();
-          if (!container.hasChildNodes()) container.remove();
-        }, 300);
-      };
-
-      setTimeout(remove, duration);
       return el;
-    });
+    };
 
-    container.appendChild(runtime.container);
+    const instance = $.mount(ToastComponent, toastHost);
-    requestAnimationFrame(() => {
+
-      const el = runtime.container.firstElementChild;
+    if (duration > 0) {
-      if (el) el.classList.remove("translate-x-10", "opacity-0");
+      timeoutId = setTimeout(close, duration);
-    });
+    }
+
+    return close;
   };
 
   /** LOADING */
   ui.Loading = (props) => {
-    return ui.If(props.$show, () =>
+    return $.if(props.$show, () =>
       $.html("div", { class: "fixed inset-0 z-[100] flex items-center justify-center backdrop-blur-sm bg-base-100/30" }, [
         $.html("span", { class: "loading loading-spinner loading-lg text-primary" }),
       ]),

docs/404.html

@@ -17,7 +17,7 @@
   </head>
   <body>
     <div id="app"></div>
-    <script>window.__VP_HASH_MAP__=JSON.parse("{\"api_effect.md\":\"jV8KzXq5\",\"api_html.md\":\"COPskx0H\",\"api_ignore.md\":\"CxKek-H-\",\"api_mount.md\":\"CRwLyxt8\",\"api_quick.md\":\"4axUqmd3\",\"api_router.md\":\"Cn98LjXO\",\"api_signal.md\":\"BmorvARW\",\"api_tags.md\":\"VliNqepa\",\"api_view.md\":\"Bv8Rlx9s\",\"examples.md\":\"Cy97nBRw\",\"index.md\":\"By6smViD\",\"install.md\":\"DmlvO98W\",\"ui_quick.md\":\"Bzj-nQ2u\",\"vite_plugin.md\":\"CTs8LDIL\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"SigPro\",\"description\":\"Minimalist Reactive Library\",\"base\":\"/sigpro/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Install\",\"link\":\"/install\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"Installation\",\"link\":\"/install\"},{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/signal\"},{\"text\":\"$.effect\",\"link\":\"/api/effect\"},{\"text\":\"$.ignore\",\"link\":\"/api/ignore\"},{\"text\":\"$.view\",\"link\":\"/api/view\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.router\",\"link\":\"/api/router\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"UI Components\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/ui/quick\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"api_html.md\":\"BPbZMZR1\",\"api_mount.md\":\"BiKjH18I\",\"api_quick.md\":\"4axUqmd3\",\"api_router.md\":\"Cn98LjXO\",\"api_signal.md\":\"BmorvARW\",\"api_tags.md\":\"CW_zjfl9\",\"api_watch.md\":\"D7sOEzCX\",\"examples.md\":\"Cy97nBRw\",\"index.md\":\"By6smViD\",\"install.md\":\"C0utklUK\",\"ui_quick.md\":\"CsppjR8J\",\"vite_plugin.md\":\"CTs8LDIL\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"SigPro\",\"description\":\"Minimalist Reactive Library\",\"base\":\"/sigpro/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Install\",\"link\":\"/install\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"Installation\",\"link\":\"/install\"},{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/signal\"},{\"text\":\"$.watch\",\"link\":\"/api/watch\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.router\",\"link\":\"/api/router\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"UI Components\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/ui/quick\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
     
   </body>
 </html>

docs/assets/api_effect.md.jV8KzXq5.js

@@ -1,33 +0,0 @@
-import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const E=JSON.parse('{"title":"⚡ Side Effects: $.effect( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/effect.md","filePath":"api/effect.md"}'),e={name:"api/effect.md"};function h(l,s,p,k,r,d){return a(),t("div",null,[...s[0]||(s[0]=[n(`<h1 id="⚡-side-effects-effect" tabindex="-1">⚡ Side Effects: <code>$.effect( )</code> <a class="header-anchor" href="#⚡-side-effects-effect" aria-label="Permalink to &quot;⚡ Side Effects: \`$.effect( )\`&quot;">​</a></h1><p>The <code>$.effect</code> function allows you to run a piece of code whenever the signals it depends on are updated. It automatically tracks any signal called within its body.</p><h2 id="🛠-function-signature" tabindex="-1">🛠 Function Signature <a class="header-anchor" href="#🛠-function-signature" aria-label="Permalink to &quot;🛠 Function Signature&quot;">​</a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">effect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(callback: Function): StopFunction</span></span></code></pre></div><table tabindex="0"><thead><tr><th style="text-align:left;">Parameter</th><th style="text-align:left;">Type</th><th style="text-align:left;">Required</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><strong><code>callback</code></strong></td><td style="text-align:left;"><code>Function</code></td><td style="text-align:left;">Yes</td><td style="text-align:left;">The code to run. It will execute immediately and then re-run on dependency changes.</td></tr></tbody></table><p><strong>Returns:</strong> A <code>StopFunction</code> that, when called, cancels the effect and prevents further executions.</p><hr><h2 id="📖-usage-patterns" tabindex="-1">📖 Usage Patterns <a class="header-anchor" href="#📖-usage-patterns" aria-label="Permalink to &quot;📖 Usage Patterns&quot;">​</a></h2><h3 id="_1-basic-tracking" tabindex="-1">1. Basic Tracking <a class="header-anchor" href="#_1-basic-tracking" aria-label="Permalink to &quot;1. Basic Tracking&quot;">​</a></h3><p>Any signal you &quot;touch&quot; inside the effect becomes a dependency.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> count</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
-<span class="line"></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">effect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
-<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // This runs every time &#39;count&#39; changes</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">\`The count is now: \${</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">count</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">()</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}\`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
-<span class="line"></span>
-<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">count</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Console: &quot;The count is now: 1&quot;</span></span></code></pre></div><h3 id="_2-manual-cleanup" tabindex="-1">2. Manual Cleanup <a class="header-anchor" href="#_2-manual-cleanup" aria-label="Permalink to &quot;2. Manual Cleanup&quot;">​</a></h3><p>If your effect creates something that needs to be destroyed (like a timer or a global event listener), you can return a cleanup function.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">effect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
-<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> timer</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setInterval</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Tick&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">), </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
-<span class="line"></span>
-<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // SigPro will run this BEFORE the next effect execution </span></span>
-<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // or when the effect is stopped.</span></span>
-<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> clearInterval</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(timer);</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h3 id="_3-nesting-automatic-cleanup" tabindex="-1">3. Nesting &amp; Automatic Cleanup <a class="header-anchor" href="#_3-nesting-automatic-cleanup" aria-label="Permalink to &quot;3. Nesting &amp; Automatic Cleanup&quot;">​</a></h3><p>If you create a signal or another effect inside an effect, SigPro tracks them as &quot;children&quot;. When the parent effect re-runs or stops, all children are automatically cleaned up to prevent memory leaks.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">effect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
-<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isLoggedIn</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()) {</span></span>
-<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    // This sub-effect is only active while &#39;isLoggedIn&#39; is true</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    $.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">effect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Fetching user data...&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    });</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><hr><h2 id="🛑-stopping-an-effect" tabindex="-1">🛑 Stopping an Effect <a class="header-anchor" href="#🛑-stopping-an-effect" aria-label="Permalink to &quot;🛑 Stopping an Effect&quot;">​</a></h2><p>You can stop an effect manually by calling the function it returns. This is useful for one-time operations or complex logic.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> stop</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">effect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">count</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">());</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
-<span class="line"></span>
-<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Later...</span></span>
-<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">stop</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// The effect is destroyed and will never run again.</span></span></code></pre></div><hr><h2 id="💡-pro-tip-batching" tabindex="-1">💡 Pro Tip: Batching <a class="header-anchor" href="#💡-pro-tip-batching" aria-label="Permalink to &quot;💡 Pro Tip: Batching&quot;">​</a></h2><p>SigPro uses a <strong>Microtask Queue</strong> to handle updates. If you update multiple signals at once, the effect will only run <strong>once</strong> at the end of the current task.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> a</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
-<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> b</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
-<span class="line"></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">effect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(), </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">b</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()));</span></span>
-<span class="line"></span>
-<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// This triggers only ONE re-run, not two.</span></span>
-<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
-<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">b</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div>`,25)])])}const o=i(e,[["render",h]]);export{E as __pageData,o as default};

docs/assets/api_effect.md.jV8KzXq5.lean.js

@@ -1 +0,0 @@
-import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const E=JSON.parse('{"title":"⚡ Side Effects: $.effect( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/effect.md","filePath":"api/effect.md"}'),e={name:"api/effect.md"};function h(l,s,p,k,r,d){return a(),t("div",null,[...s[0]||(s[0]=[n("",25)])])}const o=i(e,[["render",h]]);export{E as __pageData,o as default};

docs/assets/api_html.md.BPbZMZR1.js

@@ -1,4 +1,4 @@
-import{_ as i,o as t,c as a,ae as e}from"./chunks/framework.C8AWLET_.js";const c=JSON.parse('{"title":"🏗️ The DOM Factory: $.html( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/html.md","filePath":"api/html.md"}'),n={name:"api/html.md"};function l(h,s,p,r,k,o){return t(),a("div",null,[...s[0]||(s[0]=[e(`<h1 id="🏗️-the-dom-factory-html" tabindex="-1">🏗️ The DOM Factory: <code>$.html( )</code> <a class="header-anchor" href="#🏗️-the-dom-factory-html" aria-label="Permalink to &quot;🏗️ The DOM Factory: \`$.html( )\`&quot;">​</a></h1><p><code>$.html</code> is the internal engine that creates, attributes, and attaches reactivity to DOM elements. It is the foundation for all Tag Constructors in SigPro.</p><h2 id="🛠-function-signature" tabindex="-1">🛠 Function Signature <a class="header-anchor" href="#🛠-function-signature" aria-label="Permalink to &quot;🛠 Function Signature&quot;">​</a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(tagName: string, props</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Object, children</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> any[] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> any): HTMLElement</span></span></code></pre></div><table tabindex="0"><thead><tr><th style="text-align:left;">Parameter</th><th style="text-align:left;">Type</th><th style="text-align:left;">Required</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><strong><code>tagName</code></strong></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">Yes</td><td style="text-align:left;">Valid HTML tag name (e.g., <code>&quot;div&quot;</code>, <code>&quot;button&quot;</code>).</td></tr><tr><td style="text-align:left;"><strong><code>props</code></strong></td><td style="text-align:left;"><code>Object</code></td><td style="text-align:left;">No</td><td style="text-align:left;">HTML attributes, event listeners, and reactive bindings.</td></tr><tr><td style="text-align:left;"><strong><code>children</code></strong></td><td style="text-align:left;"><code>any</code></td><td style="text-align:left;">No</td><td style="text-align:left;">Nested elements, text strings, or reactive functions.</td></tr></tbody></table><hr><h2 id="📖-key-features" tabindex="-1">📖 Key Features <a class="header-anchor" href="#📖-key-features" aria-label="Permalink to &quot;📖 Key Features&quot;">​</a></h2><h3 id="_1-attribute-handling" tabindex="-1">1. Attribute Handling <a class="header-anchor" href="#_1-attribute-handling" aria-label="Permalink to &quot;1. Attribute Handling&quot;">​</a></h3><p>SigPro intelligently decides how to apply each property:</p><ul><li><strong>Standard Props</strong>: Applied via <code>setAttribute</code> or direct property assignment.</li><li><strong>Boolean Props</strong>: Uses <code>toggleAttribute</code> (e.g., <code>checked</code>, <code>disabled</code>, <code>hidden</code>).</li><li><strong>Class Names</strong>: Supports <code>class</code> or <code>className</code> interchangeably.</li></ul><h3 id="_2-event-listeners-modifiers" tabindex="-1">2. Event Listeners &amp; Modifiers <a class="header-anchor" href="#_2-event-listeners-modifiers" aria-label="Permalink to &quot;2. Event Listeners &amp; Modifiers&quot;">​</a></h3><p>Events are defined by the <code>on</code> prefix. SigPro supports <strong>Dot Notation</strong> for common event operations:</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;button&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {</span></span>
+import{_ as i,o as t,c as a,ae as e}from"./chunks/framework.C8AWLET_.js";const c=JSON.parse('{"title":"🏗️ The DOM Factory: $.html( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/html.md","filePath":"api/html.md"}'),n={name:"api/html.md"};function l(h,s,p,r,o,k){return t(),a("div",null,[...s[0]||(s[0]=[e(`<h1 id="🏗️-the-dom-factory-html" tabindex="-1">🏗️ The DOM Factory: <code>$.html( )</code> <a class="header-anchor" href="#🏗️-the-dom-factory-html" aria-label="Permalink to &quot;🏗️ The DOM Factory: \`$.html( )\`&quot;">​</a></h1><p><code>$.html</code> is the internal engine that creates, attributes, and attaches reactivity to DOM elements. In V2, it uses <code>$.watch</code> to maintain a live, high-performance link between your Signals and the Document Object Model.</p><h2 id="🛠-function-signature" tabindex="-1">🛠 Function Signature <a class="header-anchor" href="#🛠-function-signature" aria-label="Permalink to &quot;🛠 Function Signature&quot;">​</a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(tagName: string, props</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Object, children</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> any[] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> any): HTMLElement</span></span></code></pre></div><table tabindex="0"><thead><tr><th style="text-align:left;">Parameter</th><th style="text-align:left;">Type</th><th style="text-align:left;">Required</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><strong><code>tagName</code></strong></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">Yes</td><td style="text-align:left;">Valid HTML tag name (e.g., <code>&quot;div&quot;</code>, <code>&quot;button&quot;</code>).</td></tr><tr><td style="text-align:left;"><strong><code>props</code></strong></td><td style="text-align:left;"><code>Object</code></td><td style="text-align:left;">No</td><td style="text-align:left;">HTML attributes, event listeners, and reactive bindings.</td></tr><tr><td style="text-align:left;"><strong><code>children</code></strong></td><td style="text-align:left;"><code>any</code></td><td style="text-align:left;">No</td><td style="text-align:left;">Nested elements, text strings, or reactive functions.</td></tr></tbody></table><hr><h2 id="📖-key-features" tabindex="-1">📖 Key Features <a class="header-anchor" href="#📖-key-features" aria-label="Permalink to &quot;📖 Key Features&quot;">​</a></h2><h3 id="_1-attribute-handling" tabindex="-1">1. Attribute Handling <a class="header-anchor" href="#_1-attribute-handling" aria-label="Permalink to &quot;1. Attribute Handling&quot;">​</a></h3><p>SigPro intelligently decides how to apply each property:</p><ul><li><strong>Standard Props</strong>: Applied via <code>setAttribute</code> or direct property assignment.</li><li><strong>Boolean Props</strong>: Uses <code>toggleAttribute</code> (e.g., <code>checked</code>, <code>disabled</code>, <code>hidden</code>).</li><li><strong>Class Names</strong>: Supports <code>class</code> or <code>className</code> interchangeably.</li></ul><h3 id="_2-event-listeners-modifiers" tabindex="-1">2. Event Listeners &amp; Modifiers <a class="header-anchor" href="#_2-event-listeners-modifiers" aria-label="Permalink to &quot;2. Event Listeners &amp; Modifiers&quot;">​</a></h3><p>Events are defined by the <code>on</code> prefix. SigPro supports <strong>Dot Notation</strong> for common event operations:</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;button&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {</span></span>
 <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // e.preventDefault() is called automatically</span></span>
 <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">  &quot;onsubmit.prevent&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">e</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> save</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(e), </span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  </span></span>
@@ -7,18 +7,18 @@ import{_ as i,o as t,c as a,ae as e}from"./chunks/framework.C8AWLET_.js";const c
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  </span></span>
 <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // { once: true } listener option</span></span>
 <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">  &quot;onclick.once&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Runs only once&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Click Me&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><h3 id="_3-reactive-attributes" tabindex="-1">3. Reactive Attributes <a class="header-anchor" href="#_3-reactive-attributes" aria-label="Permalink to &quot;3. Reactive Attributes&quot;">​</a></h3><p>If an attribute value is a <strong>function</strong> (like a Signal), <code>$.html</code> creates an internal <code>$.effect</code> to keep the DOM in sync with the state.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;div&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Click Me&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><h3 id="_3-reactive-attributes" tabindex="-1">3. Reactive Attributes <a class="header-anchor" href="#_3-reactive-attributes" aria-label="Permalink to &quot;3. Reactive Attributes&quot;">​</a></h3><p>If an attribute value is a <strong>function</strong> (like a Signal), <code>$.html</code> creates an internal <strong><code>$.watch</code></strong> to keep the DOM in sync with the state.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;div&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {</span></span>
 <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // Updates the class whenever &#39;theme()&#39; changes</span></span>
 <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;dark&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;bg-black&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;bg-white&quot;</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h3 id="_4-reactive-children" tabindex="-1">4. Reactive Children <a class="header-anchor" href="#_4-reactive-children" aria-label="Permalink to &quot;4. Reactive Children&quot;">​</a></h3><p>Children can be static or dynamic. When a child is a function, SigPro creates a reactive boundary for that specific part of the DOM.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;div&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {}, [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h3 id="_4-reactive-children" tabindex="-1">4. Reactive Children <a class="header-anchor" href="#_4-reactive-children" aria-label="Permalink to &quot;4. Reactive Children&quot;">​</a></h3><p>Children can be static or dynamic. When a child is a function, SigPro creates a reactive boundary using <code>$.watch</code> for that specific part of the DOM.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;div&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {}, [</span></span>
 <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  H1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Static Title&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
 <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // Only this text node re-renders when &#39;count&#39; changes</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> \`Current count: \${</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">count</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">()</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}\`</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span></code></pre></div><hr><h2 id="🔄-two-way-binding-operator" tabindex="-1">🔄 Two-Way Binding Operator (<code>$</code>) <a class="header-anchor" href="#🔄-two-way-binding-operator" aria-label="Permalink to &quot;🔄 Two-Way Binding Operator (\`$\`)&quot;">​</a></h2><p>When a property starts with <code>$</code>, <code>$.html</code> enables bidirectional synchronization. This is primarily used for form inputs.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;input&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  $value: username </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Syncs input value &lt;-&gt; signal</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h2 id="🧹-automatic-cleanup" tabindex="-1">🧹 Automatic Cleanup <a class="header-anchor" href="#🧹-automatic-cleanup" aria-label="Permalink to &quot;🧹 Automatic Cleanup&quot;">​</a></h2><p>Every element created with <code>$.html</code> gets a hidden <code>._cleanups</code> property (a <code>Set</code>).</p><ul><li>When SigPro removes an element via <code>$.view</code> or <code>$.router</code>, it automatically executes all functions stored in this Set (stopping effects, removing listeners, etc.).</li></ul><hr><h2 id="💡-tag-constructors-the-shortcuts" tabindex="-1">💡 Tag Constructors (The Shortcuts) <a class="header-anchor" href="#💡-tag-constructors-the-shortcuts" aria-label="Permalink to &quot;💡 Tag Constructors (The Shortcuts)&quot;">​</a></h2><p>Instead of writing <code>$.html(&quot;div&quot;, ...)</code> every time, SigPro provides PascalCase global functions:</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// This:</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h2 id="🧹-memory-management-internal" tabindex="-1">🧹 Memory Management (Internal) <a class="header-anchor" href="#🧹-memory-management-internal" aria-label="Permalink to &quot;🧹 Memory Management (Internal)&quot;">​</a></h2><p>Every element created with <code>$.html</code> is &quot;self-aware&quot; regarding its reactive dependencies.</p><ul><li><strong><code>._cleanups</code></strong>: A hidden <code>Set</code> attached to the element that stores all <code>stop()</code> functions from its internal <code>$.watch</code> calls and event listeners.</li><li><strong>Lifecycle</strong>: When an element is removed by a Controller (<code>$.If</code>, <code>$.For</code>, or <code>$.router</code>), SigPro performs a recursive &quot;sweep&quot; to execute these cleanups, ensuring <strong>zero memory leaks</strong>.</li></ul><hr><h2 id="💡-tag-constructors-the-shortcuts" tabindex="-1">💡 Tag Constructors (The Shortcuts) <a class="header-anchor" href="#💡-tag-constructors-the-shortcuts" aria-label="Permalink to &quot;💡 Tag Constructors (The Shortcuts)&quot;">​</a></h2><p>Instead of writing <code>$.html(&quot;div&quot;, ...)</code> every time, SigPro provides PascalCase global functions:</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// This:</span></span>
 <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;wrapper&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Hello&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) ])</span></span>
 <span class="line"></span>
 <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Is exactly equivalent to:</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;div&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, { class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;wrapper&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [ $.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;span&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {}, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Hello&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) ])</span></span></code></pre></div>`,30)])])}const E=i(n,[["render",l]]);export{c as __pageData,E as default};
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;div&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, { class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;wrapper&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [ $.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;span&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {}, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Hello&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) ])</span></span></code></pre></div>`,30)])])}const g=i(n,[["render",l]]);export{c as __pageData,g as default};

docs/assets/api_html.md.BPbZMZR1.lean.js

@@ -1 +1 @@
-import{_ as i,o as t,c as a,ae as e}from"./chunks/framework.C8AWLET_.js";const c=JSON.parse('{"title":"🏗️ The DOM Factory: $.html( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/html.md","filePath":"api/html.md"}'),n={name:"api/html.md"};function l(h,s,p,r,k,o){return t(),a("div",null,[...s[0]||(s[0]=[e("",30)])])}const E=i(n,[["render",l]]);export{c as __pageData,E as default};
+import{_ as i,o as t,c as a,ae as e}from"./chunks/framework.C8AWLET_.js";const c=JSON.parse('{"title":"🏗️ The DOM Factory: $.html( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/html.md","filePath":"api/html.md"}'),n={name:"api/html.md"};function l(h,s,p,r,o,k){return t(),a("div",null,[...s[0]||(s[0]=[e("",30)])])}const g=i(n,[["render",l]]);export{c as __pageData,g as default};

docs/assets/api_ignore.md.CxKek-H-.js

@@ -1,27 +0,0 @@
-import{_ as i,o as a,c as n,ae as t}from"./chunks/framework.C8AWLET_.js";const o=JSON.parse('{"title":"🛑 Untracking: $.ignore( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/ignore.md","filePath":"api/ignore.md"}'),e={name:"api/ignore.md"};function l(h,s,p,k,r,g){return a(),n("div",null,[...s[0]||(s[0]=[t(`<h1 id="🛑-untracking-ignore" tabindex="-1">🛑 Untracking: <code>$.ignore( )</code> <a class="header-anchor" href="#🛑-untracking-ignore" aria-label="Permalink to &quot;🛑 Untracking: \`$.ignore( )\`&quot;">​</a></h1><p>The <code>$.ignore</code> function allows you to read a signal&#39;s value inside an effect or a computed signal <strong>without</strong> creating a dependency.</p><h2 id="🛠-function-signature" tabindex="-1">🛠 Function Signature <a class="header-anchor" href="#🛠-function-signature" aria-label="Permalink to &quot;🛠 Function Signature&quot;">​</a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">ignore</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(callback: Function): any</span></span></code></pre></div><table tabindex="0"><thead><tr><th style="text-align:left;">Parameter</th><th style="text-align:left;">Type</th><th style="text-align:left;">Required</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><strong><code>callback</code></strong></td><td style="text-align:left;"><code>Function</code></td><td style="text-align:left;">Yes</td><td style="text-align:left;">A function where signals can be read &quot;silently&quot;.</td></tr></tbody></table><p><strong>Returns:</strong> Whatever the callback function returns.</p><hr><h2 id="📖-usage-patterns" tabindex="-1">📖 Usage Patterns <a class="header-anchor" href="#📖-usage-patterns" aria-label="Permalink to &quot;📖 Usage Patterns&quot;">​</a></h2><h3 id="_1-preventing-dependency-tracking" tabindex="-1">1. Preventing Dependency Tracking <a class="header-anchor" href="#_1-preventing-dependency-tracking" aria-label="Permalink to &quot;1. Preventing Dependency Tracking&quot;">​</a></h3><p>Normally, reading a signal inside <code>$.effect</code> makes the effect re-run when that signal changes. <code>$.ignore</code> breaks this link.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> count</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
-<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> logLabel</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;System Log&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
-<span class="line"></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">effect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
-<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // This effect tracks &#39;count&#39;...</span></span>
-<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> currentCount</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> count</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  </span></span>
-<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // ...but NOT &#39;logLabel&#39;. </span></span>
-<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // Changing &#39;logLabel&#39; will NOT re-run this effect.</span></span>
-<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> label</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">ignore</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> logLabel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">());</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  </span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">\`\${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">label</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}: \${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">currentCount</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}\`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
-<span class="line"></span>
-<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">count</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);     </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Console: &quot;System Log: 1&quot; (Triggers re-run)</span></span>
-<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">logLabel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;UI&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Nothing happens in console (Ignored)</span></span></code></pre></div><h3 id="_2-reading-state-in-event-handlers" tabindex="-1">2. Reading State in Event Handlers <a class="header-anchor" href="#_2-reading-state-in-event-handlers" aria-label="Permalink to &quot;2. Reading State in Event Handlers&quot;">​</a></h3><p>Inside complex UI logic, you might want to take a &quot;snapshot&quot; of a signal without triggering a reactive chain.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> handleClick</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
-<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // Accessing state without letting the caller know we touched it</span></span>
-<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> data</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">ignore</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> mySignal</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">());</span></span>
-<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  process</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(data);</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span></code></pre></div><h3 id="_3-avoiding-infinite-loops" tabindex="-1">3. Avoiding Infinite Loops <a class="header-anchor" href="#_3-avoiding-infinite-loops" aria-label="Permalink to &quot;3. Avoiding Infinite Loops&quot;">​</a></h3><p>If you need to <strong>write</strong> to a signal based on its own value inside an effect (and you aren&#39;t using the functional updater), <code>$.ignore</code> prevents the effect from triggering itself.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">effect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
-<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> someSignal</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  </span></span>
-<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 100</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
-<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    // We update the signal, but we ignore the read to avoid a loop</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    $.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">ignore</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> someSignal</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">));</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><hr><h2 id="💡-why-use-it" tabindex="-1">💡 Why use it? <a class="header-anchor" href="#💡-why-use-it" aria-label="Permalink to &quot;💡 Why use it?&quot;">​</a></h2><ul><li><strong>Performance:</strong> Prevents expensive effects from running when non-essential data changes.</li><li><strong>Logic Control:</strong> Allows &quot;sampling&quot; a signal at a specific point in time.</li><li><strong>Safety:</strong> Essential for complex state orchestrations where circular dependencies might occur.</li></ul>`,20)])])}const c=i(e,[["render",l]]);export{o as __pageData,c as default};

docs/assets/api_ignore.md.CxKek-H-.lean.js

@@ -1 +0,0 @@
-import{_ as i,o as a,c as n,ae as t}from"./chunks/framework.C8AWLET_.js";const o=JSON.parse('{"title":"🛑 Untracking: $.ignore( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/ignore.md","filePath":"api/ignore.md"}'),e={name:"api/ignore.md"};function l(h,s,p,k,r,g){return a(),n("div",null,[...s[0]||(s[0]=[t("",20)])])}const c=i(e,[["render",l]]);export{o as __pageData,c as default};

docs/assets/api_mount.md.BiKjH18I.js

@@ -0,0 +1,16 @@
+import{_ as s,o as i,c as a,ae as e}from"./chunks/framework.C8AWLET_.js";const k=JSON.parse('{"title":"🔌 Application Mounter: $.mount( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/mount.md","filePath":"api/mount.md"}'),n={name:"api/mount.md"};function l(o,t,h,r,p,d){return i(),a("div",null,[...t[0]||(t[0]=[e(`<h1 id="🔌-application-mounter-mount" tabindex="-1">🔌 Application Mounter: <code>$.mount( )</code> <a class="header-anchor" href="#🔌-application-mounter-mount" aria-label="Permalink to &quot;🔌 Application Mounter: \`$.mount( )\`&quot;">​</a></h1><p>The <code>$.mount</code> function is the entry point of your reactive world. It bridges the gap between your SigPro logic and the browser&#39;s Real DOM by injecting a component into the document and initializing its reactive lifecycle.</p><h2 id="🛠️-function-signature" tabindex="-1">🛠️ Function Signature <a class="header-anchor" href="#🛠️-function-signature" aria-label="Permalink to &quot;🛠️ Function Signature&quot;">​</a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(node: Function </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> HTMLElement, target</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> string </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> HTMLElement): RuntimeObject</span></span></code></pre></div><table tabindex="0"><thead><tr><th style="text-align:left;">Parameter</th><th style="text-align:left;">Type</th><th style="text-align:left;">Default</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><strong><code>node</code></strong></td><td style="text-align:left;"><code>Function</code> or <code>Node</code></td><td style="text-align:left;"><strong>Required</strong></td><td style="text-align:left;">The component function or DOM element to render.</td></tr><tr><td style="text-align:left;"><strong><code>target</code></strong></td><td style="text-align:left;"><code>string</code> or <code>Node</code></td><td style="text-align:left;"><code>document.body</code></td><td style="text-align:left;">CSS selector or DOM element where the app will live.</td></tr></tbody></table><p><strong>Returns:</strong> A <code>Runtime</code> object containing the <code>container</code> and a <code>destroy()</code> method to wipe all reactivity and DOM nodes.</p><hr><h2 id="📖-common-usage-scenarios" tabindex="-1">📖 Common Usage Scenarios <a class="header-anchor" href="#📖-common-usage-scenarios" aria-label="Permalink to &quot;📖 Common Usage Scenarios&quot;">​</a></h2><h3 id="_1-the-spa-entry-point" tabindex="-1">1. The SPA Entry Point <a class="header-anchor" href="#_1-the-spa-entry-point" aria-label="Permalink to &quot;1. The SPA Entry Point&quot;">​</a></h3><p>In a Single Page Application, you typically mount your main component to the body or a root div. SigPro manages the entire view from that point.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { $ } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./sigpro.js&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> App </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./App.js&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Mounts your main App component</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(App, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#app-root&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><h3 id="_2-reactive-islands" tabindex="-1">2. Reactive &quot;Islands&quot; <a class="header-anchor" href="#_2-reactive-islands" aria-label="Permalink to &quot;2. Reactive &quot;Islands&quot;&quot;">​</a></h3><p>SigPro is perfect for adding reactivity to static pages. You can mount small widgets into specific parts of an existing HTML layout.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Counter</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> count</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  return</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onclick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> count</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">c</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> c </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) }, [</span></span>
+<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">    &quot;Clicks: &quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, count</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  ]);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Mount only the counter into a specific sidebar div</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(Counter, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#sidebar-widget&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><hr><h2 id="🔄-how-it-works-lifecycle-saneamiento" tabindex="-1">🔄 How it Works (Lifecycle &amp; Saneamiento) <a class="header-anchor" href="#🔄-how-it-works-lifecycle-saneamiento" aria-label="Permalink to &quot;🔄 How it Works (Lifecycle &amp; Saneamiento)&quot;">​</a></h2><p>When <code>$.mount</code> is executed, it performs these critical steps to ensure a leak-free environment:</p><ol><li><strong>Duplicate Detection</strong>: If you call <code>$.mount</code> on a target that already has a SigPro instance, it automatically calls <code>.destroy()</code> on the previous instance. This prevents &quot;Zombie Effects&quot; from stacking in memory.</li><li><strong>Internal Scoping</strong>: It executes the component function inside an internal <strong>Reactive Owner</strong>. This captures every <code>$.watch</code> and event listener created during the render.</li><li><strong>Target Injection</strong>: It clears the target using <code>replaceChildren()</code> and appends the new component.</li><li><strong>Runtime Creation</strong>: It returns a control object: <ul><li><code>container</code>: The actual DOM element created.</li><li><code>destroy()</code>: The &quot;kill switch&quot; that runs all cleanups, stops all watchers, and removes the element from the DOM.</li></ul></li></ol><hr><h2 id="🛑-manual-unmounting" tabindex="-1">🛑 Manual Unmounting <a class="header-anchor" href="#🛑-manual-unmounting" aria-label="Permalink to &quot;🛑 Manual Unmounting&quot;">​</a></h2><p>While SigPro handles most cleanups automatically (via <code>$.If</code>, <code>$.For</code>, and <code>$.router</code>), you can manually destroy any mounted instance. This is vital for imperatively managed UI like <strong>Toasts</strong> or <strong>Modals</strong>.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> instance</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(MyToast, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#toast-container&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Later, to remove the toast and kill its reactivity:</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">instance.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">destroy</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span></code></pre></div><hr><h2 id="💡-summary-cheat-sheet" tabindex="-1">💡 Summary Cheat Sheet <a class="header-anchor" href="#💡-summary-cheat-sheet" aria-label="Permalink to &quot;💡 Summary Cheat Sheet&quot;">​</a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">Goal</th><th style="text-align:left;">Code Pattern</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>Mount to body</strong></td><td style="text-align:left;"><code>$.mount(App)</code></td></tr><tr><td style="text-align:left;"><strong>Mount to CSS Selector</strong></td><td style="text-align:left;"><code>$.mount(App, &#39;#root&#39;)</code></td></tr><tr><td style="text-align:left;"><strong>Mount to DOM Node</strong></td><td style="text-align:left;"><code>$.mount(App, myElement)</code></td></tr><tr><td style="text-align:left;"><strong>Clean &amp; Re-mount</strong></td><td style="text-align:left;">Calling <code>$.mount</code> again on the same target</td></tr><tr><td style="text-align:left;"><strong>Total Saneamiento</strong></td><td style="text-align:left;"><code>const app = $.mount(App); app.destroy();</code></td></tr></tbody></table>`,25)])])}const g=s(n,[["render",l]]);export{k as __pageData,g as default};

docs/assets/api_mount.md.BiKjH18I.lean.js

@@ -0,0 +1 @@
+import{_ as s,o as i,c as a,ae as e}from"./chunks/framework.C8AWLET_.js";const k=JSON.parse('{"title":"🔌 Application Mounter: $.mount( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/mount.md","filePath":"api/mount.md"}'),n={name:"api/mount.md"};function l(o,t,h,r,p,d){return i(),a("div",null,[...t[0]||(t[0]=[e("",25)])])}const g=s(n,[["render",l]]);export{k as __pageData,g as default};

docs/assets/api_mount.md.CRwLyxt8.js

@@ -1,27 +0,0 @@
-import{_ as i,o as a,c as t,ae as e}from"./chunks/framework.C8AWLET_.js";const c=JSON.parse('{"title":"🔌 Application Mounter: $.mount( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/mount.md","filePath":"api/mount.md"}'),n={name:"api/mount.md"};function l(h,s,p,o,r,k){return a(),t("div",null,[...s[0]||(s[0]=[e(`<h1 id="🔌-application-mounter-mount" tabindex="-1">🔌 Application Mounter: <code>$.mount( )</code> <a class="header-anchor" href="#🔌-application-mounter-mount" aria-label="Permalink to &quot;🔌 Application Mounter: \`$.mount( )\`&quot;">​</a></h1><p>The <code>$.mount</code> function is the entry point of your reactive world. It bridges the gap between your SigPro logic and the browser&#39;s Real DOM by injecting a component into the document.</p><h2 id="_1-function-signature" tabindex="-1">1. Function Signature <a class="header-anchor" href="#_1-function-signature" aria-label="Permalink to &quot;1. Function Signature&quot;">​</a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(node: Function </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> HTMLElement, target</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> string </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> HTMLElement): RuntimeObject</span></span></code></pre></div><table tabindex="0"><thead><tr><th style="text-align:left;">Parameter</th><th style="text-align:left;">Type</th><th style="text-align:left;">Default</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><strong><code>node</code></strong></td><td style="text-align:left;"><code>Function</code> or <code>Node</code></td><td style="text-align:left;"><strong>Required</strong></td><td style="text-align:left;">The component function or DOM element to render.</td></tr><tr><td style="text-align:left;"><strong><code>target</code></strong></td><td style="text-align:left;"><code>string</code> or <code>Node</code></td><td style="text-align:left;"><code>document.body</code></td><td style="text-align:left;">CSS selector or DOM element where the app will live.</td></tr></tbody></table><p><strong>Returns:</strong> A <code>Runtime</code> object containing the <code>container</code> and a <code>destroy()</code> method.</p><hr><h2 id="_2-common-usage-scenarios" tabindex="-1">2. Common Usage Scenarios <a class="header-anchor" href="#_2-common-usage-scenarios" aria-label="Permalink to &quot;2. Common Usage Scenarios&quot;">​</a></h2><h3 id="a-the-clean-slate-spa-entry" tabindex="-1">A. The &quot;Clean Slate&quot; (SPA Entry) <a class="header-anchor" href="#a-the-clean-slate-spa-entry" aria-label="Permalink to &quot;A. The &quot;Clean Slate&quot; (SPA Entry)&quot;">​</a></h3><p>In a modern Single Page Application, you typically want SigPro to manage the entire view. By default, if no target is provided, it mounts to <code>document.body</code>.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { $ } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./sigpro.js&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
-<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> App </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./App.js&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
-<span class="line"></span>
-<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Mounts your main App component directly to the body</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(App);</span></span></code></pre></div><h3 id="b-targeting-a-specific-container" tabindex="-1">B. Targeting a Specific Container <a class="header-anchor" href="#b-targeting-a-specific-container" aria-label="Permalink to &quot;B. Targeting a Specific Container&quot;">​</a></h3><p>If your HTML has a predefined structure, you can tell SigPro exactly where to render by passing a CSS selector or a direct reference.</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;sidebar&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">main</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;app-root&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Mount using a CSS selector</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(MyComponent, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#app-root&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
-<span class="line"></span>
-<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Mount using a direct DOM reference</span></span>
-<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> sidebar</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">querySelector</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#sidebar&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(SidebarComponent, sidebar);</span></span></code></pre></div><h3 id="c-creating-reactive-islands" tabindex="-1">C. Creating &quot;Reactive Islands&quot; <a class="header-anchor" href="#c-creating-reactive-islands" aria-label="Permalink to &quot;C. Creating &quot;Reactive Islands&quot;&quot;">​</a></h3><p>SigPro is excellent for &quot;sprinkling&quot; reactivity onto legacy or static pages. You can inject small reactive widgets into any part of an existing HTML layout.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// A small reactive widget</span></span>
-<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> CounterWidget</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
-<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> count</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
-<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  return</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onclick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> count</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">c</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> c </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) }, [</span></span>
-<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">    &quot;Clicks: &quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, count</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  ]);</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span>
-<span class="line"></span>
-<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Mount it into a specific div in your static HTML</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(CounterWidget, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#counter-container&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><hr><h2 id="_3-how-it-works-lifecycle" tabindex="-1">3. How it Works (Lifecycle) <a class="header-anchor" href="#_3-how-it-works-lifecycle" aria-label="Permalink to &quot;3. How it Works (Lifecycle)&quot;">​</a></h2><p>When <code>$.mount</code> is executed, it performs these critical steps:</p><ol><li><strong>Resolution &amp; Wrapping</strong>: If you pass a <strong>Function</strong>, SigPro wraps it in a <code>$.view()</code>. This starts tracking all internal signals and effects.</li><li><strong>Target Clearance</strong>: It uses <code>target.replaceChildren()</code>. This efficiently wipes any existing HTML or &quot;zombie&quot; nodes inside the target before mounting.</li><li><strong>Injection</strong>: The component&#39;s container is appended to the target.</li><li><strong>Memory Management</strong>: It stores the <code>Runtime</code> instance associated with that DOM element. If you call <code>$.mount</code> again on the same target, SigPro automatically <strong>destroys the previous app</strong> to prevent memory leaks.</li></ol><hr><h2 id="_4-global-vs-local-scope" tabindex="-1">4. Global vs. Local Scope <a class="header-anchor" href="#_4-global-vs-local-scope" aria-label="Permalink to &quot;4. Global vs. Local Scope&quot;">​</a></h2><h3 id="the-framework-way-global" tabindex="-1">The &quot;Framework&quot; Way (Global) <a class="header-anchor" href="#the-framework-way-global" aria-label="Permalink to &quot;The &quot;Framework&quot; Way (Global)&quot;">​</a></h3><p>By importing your core in your entry file, SigPro automatically initializes global Tag Constructors (<code>Div</code>, <code>Span</code>, <code>H1</code>, etc.). This allows for a clean, declarative DX across your entire project.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// main.js</span></span>
-<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./sigpro.js&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span></span>
-<span class="line"></span>
-<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Now any file can simply do:</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> H1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Global SigPro App&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">));</span></span></code></pre></div><h3 id="the-library-way-local" tabindex="-1">The &quot;Library&quot; Way (Local) <a class="header-anchor" href="#the-library-way-local" aria-label="Permalink to &quot;The &quot;Library&quot; Way (Local)&quot;">​</a></h3><p>If you prefer to avoid global variables, you can use the low-level <code>$.html</code> factory to create elements locally.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { $ } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./sigpro.js&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
-<span class="line"></span>
-<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> myNode</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;div&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, { class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;widget&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Local Instance&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(myNode, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#widget-target&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><hr><h2 id="_5-summary-cheat-sheet" tabindex="-1">5. Summary Cheat Sheet <a class="header-anchor" href="#_5-summary-cheat-sheet" aria-label="Permalink to &quot;5. Summary Cheat Sheet&quot;">​</a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">Goal</th><th style="text-align:left;">Code Pattern</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>Mount to body</strong></td><td style="text-align:left;"><code>$.mount(App)</code></td></tr><tr><td style="text-align:left;"><strong>Mount to ID</strong></td><td style="text-align:left;"><code>$.mount(App, &#39;#root&#39;)</code></td></tr><tr><td style="text-align:left;"><strong>Mount to Element</strong></td><td style="text-align:left;"><code>$.mount(App, myElement)</code></td></tr><tr><td style="text-align:left;"><strong>Mount raw Node</strong></td><td style="text-align:left;"><code>$.mount(Div(&quot;Hello&quot;), &#39;#id&#39;)</code></td></tr><tr><td style="text-align:left;"><strong>Unmount/Destroy</strong></td><td style="text-align:left;"><code>const app = $.mount(App); app.destroy();</code></td></tr></tbody></table>`,33)])])}const g=i(n,[["render",l]]);export{c as __pageData,g as default};

docs/assets/api_mount.md.CRwLyxt8.lean.js

@@ -1 +0,0 @@
-import{_ as i,o as a,c as t,ae as e}from"./chunks/framework.C8AWLET_.js";const c=JSON.parse('{"title":"🔌 Application Mounter: $.mount( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/mount.md","filePath":"api/mount.md"}'),n={name:"api/mount.md"};function l(h,s,p,o,r,k){return a(),t("div",null,[...s[0]||(s[0]=[e("",33)])])}const g=i(n,[["render",l]]);export{c as __pageData,g as default};

docs/assets/api_view.md.Bv8Rlx9s.js

@@ -1,26 +0,0 @@
-import{_ as i,o as a,c as n,ae as t}from"./chunks/framework.C8AWLET_.js";const c=JSON.parse('{"title":"🖼️ Component Lifecycle: $.view( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/view.md","filePath":"api/view.md"}'),e={name:"api/view.md"};function l(h,s,p,k,r,o){return a(),n("div",null,[...s[0]||(s[0]=[t(`<h1 id="🖼️-component-lifecycle-view" tabindex="-1">🖼️ Component Lifecycle: <code>$.view( )</code> <a class="header-anchor" href="#🖼️-component-lifecycle-view" aria-label="Permalink to &quot;🖼️ Component Lifecycle: \`$.view( )\`&quot;">​</a></h1><p>The <code>$.view</code> function is a specialized wrapper used to manage the lifecycle of a UI component. It tracks all signals, effects, and DOM elements created within it, providing a single point of destruction to prevent memory leaks.</p><h2 id="🛠-function-signature" tabindex="-1">🛠 Function Signature <a class="header-anchor" href="#🛠-function-signature" aria-label="Permalink to &quot;🛠 Function Signature&quot;">​</a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">view</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(renderFn: Function): RuntimeObject</span></span></code></pre></div><table tabindex="0"><thead><tr><th style="text-align:left;">Parameter</th><th style="text-align:left;">Type</th><th style="text-align:left;">Required</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><strong><code>renderFn</code></strong></td><td style="text-align:left;"><code>Function</code></td><td style="text-align:left;">Yes</td><td style="text-align:left;">A function that returns a DOM Node or an array of Nodes.</td></tr></tbody></table><p><strong>Returns:</strong> A <code>Runtime</code> object containing:</p><ul><li><code>container</code>: A <code>div</code> (with <code>display: contents</code>) holding the rendered content.</li><li><code>destroy()</code>: A function that unmounts the view and cleans up all internal effects/listeners.</li></ul><hr><h2 id="📖-usage-patterns" tabindex="-1">📖 Usage Patterns <a class="header-anchor" href="#📖-usage-patterns" aria-label="Permalink to &quot;📖 Usage Patterns&quot;">​</a></h2><h3 id="_1-basic-component-wrapper" tabindex="-1">1. Basic Component Wrapper <a class="header-anchor" href="#_1-basic-component-wrapper" aria-label="Permalink to &quot;1. Basic Component Wrapper&quot;">​</a></h3><p>When you wrap logic in <code>$.view</code>, SigPro creates a &quot;boundary&quot;.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> myView</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">view</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
-<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> count</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  </span></span>
-<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // This effect is &quot;owned&quot; by this view</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  $.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">effect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">count</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()));</span></span>
-<span class="line"></span>
-<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  return</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span></span>
-<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    H1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Internal View&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
-<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    Button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onclick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> count</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">c</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> c </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Add&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  ]);</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
-<span class="line"></span>
-<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// To show it:</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">document.body.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">appendChild</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(myView.container);</span></span>
-<span class="line"></span>
-<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// To kill it (removes from DOM and stops all internal effects):</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">myView.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">destroy</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span></code></pre></div><h3 id="_2-manual-cleanups-with-oncleanup" tabindex="-1">2. Manual Cleanups with <code>onCleanup</code> <a class="header-anchor" href="#_2-manual-cleanups-with-oncleanup" aria-label="Permalink to &quot;2. Manual Cleanups with \`onCleanup\`&quot;">​</a></h3><p>The <code>renderFn</code> receives a helper object that allows you to register custom cleanup logic (like closing a WebSocket or a third-party library instance).</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ChartComponent</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">view</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(({ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">onCleanup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
-<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> socket</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> WebSocket</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ws://...&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
-<span class="line"></span>
-<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  onCleanup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    socket.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">close</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Cleanup: WebSocket closed&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  });</span></span>
-<span class="line"></span>
-<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  return</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;chart-container&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> });</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><hr><h2 id="🏗️-internal-architecture" tabindex="-1">🏗️ Internal Architecture <a class="header-anchor" href="#🏗️-internal-architecture" aria-label="Permalink to &quot;🏗️ Internal Architecture&quot;">​</a></h2><p>When <code>$.view</code> is called, it performs the following:</p><ol><li><strong>Isolation</strong>: It creates a new <code>Set</code> of cleanups.</li><li><strong>Execution</strong>: It runs your function and captures any <code>$.effect</code> or child <code>$.view</code> created during execution.</li><li><strong>Container</strong>: It wraps the result in a <code>display: contents</code> element (which doesn&#39;t affect your CSS layout).</li><li><strong>Disposal</strong>: When <code>destroy()</code> is called, it recursively calls all cleanup functions and removes the container from the DOM.</li></ol><hr><h2 id="💡-why-use-view" tabindex="-1">💡 Why use <code>$.view</code>? <a class="header-anchor" href="#💡-why-use-view" aria-label="Permalink to &quot;💡 Why use \`$.view\`?&quot;">​</a></h2><ul><li><strong>Automatic Cleanup</strong>: You don&#39;t have to manually stop every effect when a user navigates away.</li><li><strong>Router Integration</strong>: The SigPro Router (<code>$.router</code>) uses <code>$.view</code> internally to swap pages and clean up the previous one automatically.</li><li><strong>Performance</strong>: It ensures that background processes (like intervals or observers) stop as soon as the element is no longer visible.</li></ul>`,22)])])}const E=i(e,[["render",l]]);export{c as __pageData,E as default};

docs/assets/api_view.md.Bv8Rlx9s.lean.js

@@ -1 +0,0 @@
-import{_ as i,o as a,c as n,ae as t}from"./chunks/framework.C8AWLET_.js";const c=JSON.parse('{"title":"🖼️ Component Lifecycle: $.view( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/view.md","filePath":"api/view.md"}'),e={name:"api/view.md"};function l(h,s,p,k,r,o){return a(),n("div",null,[...s[0]||(s[0]=[t("",22)])])}const E=i(e,[["render",l]]);export{c as __pageData,E as default};

docs/assets/api_watch.md.D7sOEzCX.js

@@ -0,0 +1,33 @@
+import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const o=JSON.parse('{"title":"⚡ Reactivity Control: $.watch( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/watch.md","filePath":"api/watch.md"}'),e={name:"api/watch.md"};function h(l,s,p,k,r,d){return a(),t("div",null,[...s[0]||(s[0]=[n(`<h1 id="⚡-reactivity-control-watch" tabindex="-1">⚡ Reactivity Control: <code>$.watch( )</code> <a class="header-anchor" href="#⚡-reactivity-control-watch" aria-label="Permalink to &quot;⚡ Reactivity Control: \`$.watch( )\`&quot;">​</a></h1><p>The <code>$.watch</code> function is the reactive engine of SigPro. It allows you to execute code automatically when signals change. In V2, <code>$.watch</code> is <strong>polymorphic</strong>: it can track dependencies automatically or follow an explicit list.</p><h2 id="🛠-function-signature" tabindex="-1">🛠 Function Signature <a class="header-anchor" href="#🛠-function-signature" aria-label="Permalink to &quot;🛠 Function Signature&quot;">​</a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Automatic Mode (Magic Tracking)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">watch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(callback: Function): StopFunction</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Explicit Mode (Isolated Dependencies)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">watch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(deps: Signal[], callback: Function): StopFunction</span></span></code></pre></div><table tabindex="0"><thead><tr><th style="text-align:left;">Parameter</th><th style="text-align:left;">Type</th><th style="text-align:left;">Required</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><strong><code>target / deps</code></strong></td><td style="text-align:left;"><code>Function</code></td><td style="text-align:left;"><code>Array</code></td><td style="text-align:left;">Yes</td></tr><tr><td style="text-align:left;"><strong><code>callback</code></strong></td><td style="text-align:left;"><code>Function</code></td><td style="text-align:left;">Only in Explicit</td><td style="text-align:left;">The code that will run when the <code>deps</code> change.</td></tr></tbody></table><p><strong>Returns:</strong> A <code>StopFunction</code> that, when called, destroys the watcher and releases memory.</p><hr><h2 id="📖-usage-patterns" tabindex="-1">📖 Usage Patterns <a class="header-anchor" href="#📖-usage-patterns" aria-label="Permalink to &quot;📖 Usage Patterns&quot;">​</a></h2><h3 id="_1-automatic-mode-default" tabindex="-1">1. Automatic Mode (Default) <a class="header-anchor" href="#_1-automatic-mode-default" aria-label="Permalink to &quot;1. Automatic Mode (Default)&quot;">​</a></h3><p>Any signal you &quot;touch&quot; inside the callback becomes a dependency. SigPro tracks them behind the scenes.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> count</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">watch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // Re-runs every time &#39;count&#39; changes</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">\`Count is: \${</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">count</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">()</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}\`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h3 id="_2-explicit-mode-advanced-saneamiento-🚀" tabindex="-1">2. Explicit Mode (Advanced Saneamiento) 🚀 <a class="header-anchor" href="#_2-explicit-mode-advanced-saneamiento-🚀" aria-label="Permalink to &quot;2. Explicit Mode (Advanced Saneamiento) 🚀&quot;">​</a></h3><p>This mode <strong>isolates</strong> execution. The callback only triggers when the signals in the array change. Any other signal accessed <em>inside</em> the callback will NOT trigger a re-run. This is the &quot;gold standard&quot; for Routers and heavy components.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> sPath</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/home&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> user</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Admin&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">watch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([sPath], () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // Only triggers when &#39;sPath&#39; changes.</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // Changes to &#39;user&#39; will NOT trigger this, preventing accidental re-renders.</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">\`Navigating to \${</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">sPath</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">()</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">} as \${</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">user</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">()</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}\`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h3 id="_3-automatic-cleanup" tabindex="-1">3. Automatic Cleanup <a class="header-anchor" href="#_3-automatic-cleanup" aria-label="Permalink to &quot;3. Automatic Cleanup&quot;">​</a></h3><p>If your logic creates timers, event listeners, or other reactive effects, SigPro tracks them as &quot;children&quot; of the current watch. When the watcher re-runs or stops, it kills everything inside automatically.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">watch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> timer</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setInterval</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Tick&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">), </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  </span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // Register a manual cleanup if needed</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // Or simply rely on SigPro to kill nested $.watch() calls</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> clearInterval</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(timer);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><hr><h2 id="🛑-stopping-a-watcher" tabindex="-1">🛑 Stopping a Watcher <a class="header-anchor" href="#🛑-stopping-a-watcher" aria-label="Permalink to &quot;🛑 Stopping a Watcher&quot;">​</a></h2><p>Call the returned function to manually kill the watcher. This is essential for manual DOM injections (like Toasts) or long-lived background processes.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> stop</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">watch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">count</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()));</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Later...</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">stop</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// The link between the signal and this code is physically severed.</span></span></code></pre></div><hr><h2 id="💡-pro-tip-the-microtask-queue" tabindex="-1">💡 Pro Tip: The Microtask Queue <a class="header-anchor" href="#💡-pro-tip-the-microtask-queue" aria-label="Permalink to &quot;💡 Pro Tip: The Microtask Queue&quot;">​</a></h2><p>SigPro batches updates. If you update multiple signals in the same execution block, the watcher will only fire <strong>once</strong> at the end of the task.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> a</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> b</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">watch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(), </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">b</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()));</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// This triggers only ONE re-run.</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">b</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div>`,25)])])}const g=i(e,[["render",h]]);export{o as __pageData,g as default};

docs/assets/api_watch.md.D7sOEzCX.lean.js

@@ -0,0 +1 @@
+import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const o=JSON.parse('{"title":"⚡ Reactivity Control: $.watch( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/watch.md","filePath":"api/watch.md"}'),e={name:"api/watch.md"};function h(l,s,p,k,r,d){return a(),t("div",null,[...s[0]||(s[0]=[n("",25)])])}const g=i(e,[["render",h]]);export{o as __pageData,g as default};

docs/assets/install.md.C0utklUK.js

@@ -1,11 +1,11 @@
-import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"Installation & Setup","description":"","frontmatter":{},"headers":[],"relativePath":"install.md","filePath":"install.md"}'),l={name:"install.md"};function e(h,s,p,k,r,d){return a(),t("div",null,[...s[0]||(s[0]=[n(`<h1 id="installation-setup" tabindex="-1">Installation &amp; Setup <a class="header-anchor" href="#installation-setup" aria-label="Permalink to &quot;Installation &amp; Setup&quot;">​</a></h1><p>SigPro is designed to be drop-in ready. Whether you are building a complex application with a bundler or a simple reactive widget in a single HTML file, SigPro scales with your needs.</p><h2 id="_1-installation" tabindex="-1">1. Installation <a class="header-anchor" href="#_1-installation" aria-label="Permalink to &quot;1. Installation&quot;">​</a></h2><p>Choose the method that best fits your workflow:</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-5kvrd" id="tab-r11zK2-" checked><label data-title="npm" for="tab-r11zK2-">npm</label><input type="radio" name="group-5kvrd" id="tab-RsRuHmB"><label data-title="pnpm" for="tab-RsRuHmB">pnpm</label><input type="radio" name="group-5kvrd" id="tab-pgHuGcu"><label data-title="yarn" for="tab-pgHuGcu">yarn</label><input type="radio" name="group-5kvrd" id="tab-1gDlH4R"><label data-title="bun" for="tab-1gDlH4R">bun</label><input type="radio" name="group-5kvrd" id="tab-ReeGTQY"><label data-title="CDN (ESM)" for="tab-ReeGTQY">CDN (ESM)</label></div><div class="blocks"><div class="language-bash vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">bun</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;module&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"Installation & Setup","description":"","frontmatter":{},"headers":[],"relativePath":"install.md","filePath":"install.md"}'),l={name:"install.md"};function e(h,s,p,k,r,d){return a(),t("div",null,[...s[0]||(s[0]=[n(`<h1 id="installation-setup" tabindex="-1">Installation &amp; Setup <a class="header-anchor" href="#installation-setup" aria-label="Permalink to &quot;Installation &amp; Setup&quot;">​</a></h1><p>SigPro is designed to be drop-in ready. Whether you are building a complex application with a bundler or a simple reactive widget in a single HTML file, SigPro scales with your needs.</p><h2 id="_1-installation" tabindex="-1">1. Installation <a class="header-anchor" href="#_1-installation" aria-label="Permalink to &quot;1. Installation&quot;">​</a></h2><p>Choose the method that best fits your workflow:</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-rjoRp" id="tab-Bv7ZohN" checked><label data-title="npm" for="tab-Bv7ZohN">npm</label><input type="radio" name="group-rjoRp" id="tab-x3eVtcx"><label data-title="pnpm" for="tab-x3eVtcx">pnpm</label><input type="radio" name="group-rjoRp" id="tab--Uj8i8-"><label data-title="yarn" for="tab--Uj8i8-">yarn</label><input type="radio" name="group-rjoRp" id="tab-3TcO2BR"><label data-title="bun" for="tab-3TcO2BR">bun</label><input type="radio" name="group-rjoRp" id="tab-bK77GMA"><label data-title="CDN (ESM)" for="tab-bK77GMA">CDN (ESM)</label></div><div class="blocks"><div class="language-bash vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">bun</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sigpro</span></span></code></pre></div><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;module&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // Import the core and UI components</span></span>
 <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { $ } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;https://cdn.jsdelivr.net/npm/sigpro@latest/+esm&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
 <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { UI } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;https://cdn.jsdelivr.net/npm/sigpro@latest/ui/+esm&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  </span></span>
 <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // Initialize UI components globally</span></span>
 <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  UI</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">($);</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div></div></div><hr><h2 id="_2-quick-start-examples" tabindex="-1">2. Quick Start Examples <a class="header-anchor" href="#_2-quick-start-examples" aria-label="Permalink to &quot;2. Quick Start Examples&quot;">​</a></h2><p>SigPro uses <strong>PascalCase</strong> for Tag Helpers (e.g., <code>Div</code>, <code>Button</code>) to provide a clean, component-like syntax without needing JSX.</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-ososx" id="tab-8FUJ6d_" checked><label data-title="Mainstream (Bundlers)" for="tab-8FUJ6d_">Mainstream (Bundlers)</label><input type="radio" name="group-ososx" id="tab-qUArQUk"><label data-title="Classic (Direct CDN)" for="tab-qUArQUk">Classic (Direct CDN)</label></div><div class="blocks"><div class="language-javascript vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// File: App.js</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div></div></div><hr><h2 id="_2-quick-start-examples" tabindex="-1">2. Quick Start Examples <a class="header-anchor" href="#_2-quick-start-examples" aria-label="Permalink to &quot;2. Quick Start Examples&quot;">​</a></h2><p>SigPro uses <strong>PascalCase</strong> for Tag Helpers (e.g., <code>Div</code>, <code>Button</code>) to provide a clean, component-like syntax without needing JSX.</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-XUScV" id="tab-CF8-JRl" checked><label data-title="Mainstream (Bundlers)" for="tab-CF8-JRl">Mainstream (Bundlers)</label><input type="radio" name="group-XUScV" id="tab-TeUyjzG"><label data-title="Classic (Direct CDN)" for="tab-TeUyjzG">Classic (Direct CDN)</label></div><div class="blocks"><div class="language-javascript vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// File: App.js</span></span>
 <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { $ } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;sigpro&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span></span>
 <span class="line"></span>
 <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> App</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>

docs/assets/ui_quick.md.CsppjR8J.js

@@ -1,4 +1,4 @@
-import{_ as i,o as a,c as t,ae as e}from"./chunks/framework.C8AWLET_.js";const c=JSON.parse('{"title":"🧩 UI Components (WIP)","description":"","frontmatter":{},"headers":[],"relativePath":"ui/quick.md","filePath":"ui/quick.md"}'),n={name:"ui/quick.md"};function l(h,s,p,o,k,r){return a(),t("div",null,[...s[0]||(s[0]=[e(`<h1 id="🧩-ui-components-wip" tabindex="-1">🧩 UI Components <code>(WIP)</code> <a class="header-anchor" href="#🧩-ui-components-wip" aria-label="Permalink to &quot;🧩 UI Components \`(WIP)\`&quot;">​</a></h1><blockquote><p><strong>Status: Work In Progress.</strong> &gt; These are high-level, complex visual components designed to speed up development. They often replace native HTML elements with &quot;superpowered&quot; versions that handle their own internal logic, reactivity, and accessibility.</p></blockquote><h2 id="_1-what-are-ui-components" tabindex="-1">1. What are UI Components? <a class="header-anchor" href="#_1-what-are-ui-components" aria-label="Permalink to &quot;1. What are UI Components?&quot;">​</a></h2><p>Unlike <strong>Tag Helpers</strong> (which are just functional mirrors of HTML tags), SigPro UI Components are smart abstractions.</p><ul><li><strong>Stateful</strong>: They manage complex internal states (like date ranges, search filtering, or API lifecycles).</li><li><strong>Reactive</strong>: Attributes prefixed with <code>$</code> are automatically tracked.</li><li><strong>Self-Cleaning</strong>: They automatically use <code>_cleanups</code> to destroy observers or event listeners when removed from the DOM.</li><li><strong>Themed</strong>: Fully compatible with Tailwind CSS and DaisyUI themes.</li></ul><hr><h2 id="_2-the-ui-registry-available-now" tabindex="-1">2. The UI Registry (Available Now) <a class="header-anchor" href="#_2-the-ui-registry-available-now" aria-label="Permalink to &quot;2. The UI Registry (Available Now)&quot;">​</a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">Category</th><th style="text-align:left;">Components</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>Logic &amp; Flow</strong></td><td style="text-align:left;"><code>If</code>, <code>For</code>, <code>Json</code></td></tr><tr><td style="text-align:left;"><strong>Forms &amp; Inputs</strong></td><td style="text-align:left;"><code>Button</code>, <code>Input</code>, <code>Select</code>, <code>Autocomplete</code>, <code>Datepicker</code>, <code>Colorpicker</code>, <code>CheckBox</code>, <code>Radio</code>, <code>Range</code>, <code>Rating</code>, <code>Swap</code></td></tr><tr><td style="text-align:left;"><strong>Feedback</strong></td><td style="text-align:left;"><code>Alert</code>, <code>Toast</code>, <code>Modal</code>, <code>Loading</code>, <code>Badge</code>, <code>Tooltip</code>, <code>Indicator</code></td></tr><tr><td style="text-align:left;"><strong>Navigation</strong></td><td style="text-align:left;"><code>Navbar</code>, <code>Menu</code>, <code>Drawer</code>, <code>Tabs</code>, <code>Accordion</code>, <code>Dropdown</code></td></tr><tr><td style="text-align:left;"><strong>Data &amp; Layout</strong></td><td style="text-align:left;"><code>Request</code>, <code>Response</code>, <code>Grid</code> (AG-Grid), <code>List</code>, <code>Stack</code>, <code>Timeline</code>, <code>Stat</code>, <code>Fieldset</code>, <code>Fab</code></td></tr></tbody></table><hr><h2 id="_3-examples-with-superpowers" tabindex="-1">3. Examples with &quot;Superpowers&quot; <a class="header-anchor" href="#_3-examples-with-superpowers" aria-label="Permalink to &quot;3. Examples with &quot;Superpowers&quot;&quot;">​</a></h2><h3 id="a-the-declarative-api-flow-request-response" tabindex="-1">A. The Declarative API Flow (<code>Request</code> &amp; <code>Response</code>) <a class="header-anchor" href="#a-the-declarative-api-flow-request-response" aria-label="Permalink to &quot;A. The Declarative API Flow (\`Request\` &amp; \`Response\`)&quot;">​</a></h3><p>Instead of manually managing <code>loading</code> and <code>error</code> flags, use these two together to handle data fetching elegantly.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 1. Define the request (it tracks dependencies automatically)</span></span>
+import{_ as i,o as a,c as e,ae as t}from"./chunks/framework.C8AWLET_.js";const c=JSON.parse('{"title":"🧩 UI Components (WIP)","description":"","frontmatter":{},"headers":[],"relativePath":"ui/quick.md","filePath":"ui/quick.md"}'),n={name:"ui/quick.md"};function l(h,s,p,o,r,k){return a(),e("div",null,[...s[0]||(s[0]=[t(`<h1 id="🧩-ui-components-wip" tabindex="-1">🧩 UI Components <code>(WIP)</code> <a class="header-anchor" href="#🧩-ui-components-wip" aria-label="Permalink to &quot;🧩 UI Components \`(WIP)\`&quot;">​</a></h1><blockquote><p><strong>Status: Work In Progress.</strong> &gt; These are high-level, complex visual components designed to speed up development. They replace native HTML elements with &quot;superpowered&quot; versions that handle their own internal logic, reactivity, and professional styling.</p></blockquote><h2 id="⚠️-prerequisites" tabindex="-1">⚠️ Prerequisites <a class="header-anchor" href="#⚠️-prerequisites" aria-label="Permalink to &quot;⚠️ Prerequisites&quot;">​</a></h2><p>To ensure all components render correctly with their reactive themes and states, your project <strong>must</strong> have the following versions installed:</p><ul><li><strong>Tailwind CSS v4+</strong>: For the new engine performance and modern CSS variables.</li><li><strong>DaisyUI v5+</strong>: Required for the updated theme-selectors and improved component classes used in the SigPro UI library.</li></ul><hr><h2 id="_1-what-are-ui-components" tabindex="-1">1. What are UI Components? <a class="header-anchor" href="#_1-what-are-ui-components" aria-label="Permalink to &quot;1. What are UI Components?&quot;">​</a></h2><p>Unlike <strong>Tag Helpers</strong> (which are just functional mirrors of HTML tags), SigPro UI Components are smart abstractions:</p><ul><li><strong>Stateful</strong>: They manage complex internal states (like date ranges, search filtering, or API lifecycles).</li><li><strong>Reactive</strong>: Attributes prefixed with <code>$</code> are automatically tracked via <code>$.watch</code>.</li><li><strong>Self-Sane</strong>: They automatically use <code>._cleanups</code> to destroy observers or event listeners when removed from the DOM.</li><li><strong>Themed</strong>: Fully compatible with the DaisyUI v5 theme system and Tailwind v4 utility classes.</li></ul><hr><h2 id="_2-the-ui-registry-available-now" tabindex="-1">2. The UI Registry (Available Now) <a class="header-anchor" href="#_2-the-ui-registry-available-now" aria-label="Permalink to &quot;2. The UI Registry (Available Now)&quot;">​</a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">Category</th><th style="text-align:left;">Components</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>Forms &amp; Inputs</strong></td><td style="text-align:left;"><code>Button</code>, <code>Input</code>, <code>Select</code>, <code>Autocomplete</code>, <code>Datepicker</code>, <code>Colorpicker</code>, <code>CheckBox</code>, <code>Radio</code>, <code>Range</code>, <code>Rating</code>, <code>Swap</code></td></tr><tr><td style="text-align:left;"><strong>Feedback</strong></td><td style="text-align:left;"><code>Alert</code>, <code>Toast</code>, <code>Modal</code>, <code>Loading</code>, <code>Badge</code>, <code>Tooltip</code>, <code>Indicator</code></td></tr><tr><td style="text-align:left;"><strong>Navigation</strong></td><td style="text-align:left;"><code>Navbar</code>, <code>Menu</code>, <code>Drawer</code>, <code>Tabs</code>, <code>Accordion</code>, <code>Dropdown</code></td></tr><tr><td style="text-align:left;"><strong>Data &amp; Layout</strong></td><td style="text-align:left;"><code>Request</code>, <code>Response</code>, <code>Grid</code> (AG-Grid), <code>List</code>, <code>Stack</code>, <code>Timeline</code>, <code>Stat</code>, <code>Fieldset</code>, <code>Fab</code></td></tr></tbody></table><hr><h2 id="_3-examples-with-superpowers" tabindex="-1">3. Examples with &quot;Superpowers&quot; <a class="header-anchor" href="#_3-examples-with-superpowers" aria-label="Permalink to &quot;3. Examples with &quot;Superpowers&quot;&quot;">​</a></h2><h3 id="a-the-declarative-api-flow-request-response" tabindex="-1">A. The Declarative API Flow (<code>Request</code> &amp; <code>Response</code>) <a class="header-anchor" href="#a-the-declarative-api-flow-request-response" aria-label="Permalink to &quot;A. The Declarative API Flow (\`Request\` &amp; \`Response\`)&quot;">​</a></h3><p>Instead of manually managing <code>loading</code> and <code>error</code> flags, use these together to handle data fetching elegantly.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 1. Define the request (it tracks dependencies automatically)</span></span>
 <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> userProfile</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Request</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> \`https://api.example.com/user/\${</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">userId</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">()</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}\`</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
@@ -11,7 +11,7 @@ import{_ as i,o as a,c as t,ae as e}from"./chunks/framework.C8AWLET_.js";const c
 <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">      P</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(data.email)</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    ])</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  )</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span></code></pre></div><h3 id="b-smart-inputs-autocomplete" tabindex="-1">B. Smart Inputs &amp; Autocomplete <a class="header-anchor" href="#b-smart-inputs-autocomplete" aria-label="Permalink to &quot;B. Smart Inputs &amp; Autocomplete&quot;">​</a></h3><p>Native inputs are boring. SigPro UI inputs handle labels, icons, password toggles, and validation states out of the box.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> searchQuery</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span></code></pre></div><h3 id="b-smart-inputs-autocomplete" tabindex="-1">B. Smart Inputs &amp; Autocomplete <a class="header-anchor" href="#b-smart-inputs-autocomplete" aria-label="Permalink to &quot;B. Smart Inputs &amp; Autocomplete&quot;">​</a></h3><p>SigPro UI inputs handle labels, icons, password toggles, and validation states out of the box using DaisyUI v5 classes.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> searchQuery</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
 <span class="line"></span>
 <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Autocomplete</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Find a Country&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
@@ -19,13 +19,13 @@ import{_ as i,o as a,c as t,ae as e}from"./chunks/framework.C8AWLET_.js";const c
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  options: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Spain&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;France&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Germany&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Italy&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Portugal&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  $value: searchQuery,</span></span>
 <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  onSelect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">val</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Selected:&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, val)</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h3 id="c-the-reactive-datepicker" tabindex="-1">C. The Reactive Datepicker <a class="header-anchor" href="#c-the-reactive-datepicker" aria-label="Permalink to &quot;C. The Reactive Datepicker&quot;">​</a></h3><p>Handles single dates or ranges with a clean, reactive interface.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> myDate</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// or { start: &quot;&quot;, end: &quot;&quot; } for range</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h3 id="c-the-reactive-datepicker" tabindex="-1">C. The Reactive Datepicker <a class="header-anchor" href="#c-the-reactive-datepicker" aria-label="Permalink to &quot;C. The Reactive Datepicker&quot;">​</a></h3><p>Handles single dates or ranges with a clean, reactive interface that automatically syncs with your signals.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> myDate</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// or { start: &quot;&quot;, end: &quot;&quot; } for range</span></span>
 <span class="line"></span>
 <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Datepicker</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Select Expiry Date&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  $value: myDate,</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  range: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Set to true for range selection</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  range: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h3 id="d-imperative-toasts-modals" tabindex="-1">D. Imperative Toasts &amp; Modals <a class="header-anchor" href="#d-imperative-toasts-modals" aria-label="Permalink to &quot;D. Imperative Toasts &amp; Modals&quot;">​</a></h3><p>Sometimes you just need to trigger a message without cluttering your template.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Show a notification from anywhere in your logic</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h3 id="d-imperative-toasts-modals" tabindex="-1">D. Imperative Toasts &amp; Modals <a class="header-anchor" href="#d-imperative-toasts-modals" aria-label="Permalink to &quot;D. Imperative Toasts &amp; Modals&quot;">​</a></h3><p>Trigger complex UI elements from your logic. These components use <code>$.mount</code> internally to ensure they are properly cleaned up from memory after they close.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Show a notification (Self-destroying after 3s)</span></span>
 <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Toast</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Settings saved successfully!&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;alert-success&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
 <span class="line"></span>
 <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Control a modal with a simple signal</span></span>
@@ -40,5 +40,5 @@ import{_ as i,o as a,c as t,ae as e}from"./chunks/framework.C8AWLET_.js";const c
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;This action cannot be undone.&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><hr><h2 id="_4-internationalization-i18n" tabindex="-1">4. Internationalization (i18n) <a class="header-anchor" href="#_4-internationalization-i18n" aria-label="Permalink to &quot;4. Internationalization (i18n)&quot;">​</a></h2><p>The UI library comes with a built-in locale system. It currently supports <code>es</code> and <code>en</code>.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Set the global UI language</span></span>
 <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">SetLocale</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;en&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
 <span class="line"></span>
-<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Access translated strings in your own components</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Access translated strings (Returns a signal that tracks the current locale)</span></span>
-<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> t</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> tt</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;confirm&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Returns a signal that tracks the current locale</span></span></code></pre></div><hr><h2 id="_5-best-practices" tabindex="-1">5. Best Practices <a class="header-anchor" href="#_5-best-practices" aria-label="Permalink to &quot;5. Best Practices&quot;">​</a></h2><ul><li><strong>Use <code>$</code> for Reactivity</strong>: If a property starts with <code>$</code>, it expects a Signal (e.g., <code>$value: mySignal</code>).</li><li><strong>Key your Lists</strong>: When using <code>For</code>, always provide a <code>keyFn</code> to ensure high-performance DOM reconciliation.</li><li><strong>Cleanups</strong>: If you build custom components that use <code>setInterval</code> or <code>observers</code>, add them to the element&#39;s <code>_cleanups</code> Set.</li></ul>`,29)])])}const E=i(n,[["render",l]]);export{c as __pageData,E as default};
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> t</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> tt</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;confirm&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><hr><h2 id="_5-best-practices" tabindex="-1">5. Best Practices <a class="header-anchor" href="#_5-best-practices" aria-label="Permalink to &quot;5. Best Practices&quot;">​</a></h2><ul><li><strong>Use <code>$</code> for Reactivity</strong>: If a property starts with <code>$</code>, the component expects a Signal (e.g., <code>$value: mySignal</code>).</li><li><strong>Automatic Cleaning</strong>: You don&#39;t need to manually destroy these components if they are inside a <code>$.If</code> or <code>$.For</code>. SigPro&#39;s core will &quot;sweep&quot; their internal watchers automatically.</li><li><strong>Manual Cleanups</strong>: If you build custom components using <code>setInterval</code> or third-party observers, always add the stop functions to the element&#39;s <code>._cleanups</code> Set.</li></ul>`,33)])])}const E=i(n,[["render",l]]);export{c as __pageData,E as default};

docs/assets/ui_quick.md.CsppjR8J.lean.js

@@ -1 +1 @@
-import{_ as i,o as a,c as t,ae as e}from"./chunks/framework.C8AWLET_.js";const c=JSON.parse('{"title":"🧩 UI Components (WIP)","description":"","frontmatter":{},"headers":[],"relativePath":"ui/quick.md","filePath":"ui/quick.md"}'),n={name:"ui/quick.md"};function l(h,s,p,o,k,r){return a(),t("div",null,[...s[0]||(s[0]=[e("",29)])])}const E=i(n,[["render",l]]);export{c as __pageData,E as default};
+import{_ as i,o as a,c as e,ae as t}from"./chunks/framework.C8AWLET_.js";const c=JSON.parse('{"title":"🧩 UI Components (WIP)","description":"","frontmatter":{},"headers":[],"relativePath":"ui/quick.md","filePath":"ui/quick.md"}'),n={name:"ui/quick.md"};function l(h,s,p,o,r,k){return a(),e("div",null,[...s[0]||(s[0]=[t("",33)])])}const E=i(n,[["render",l]]);export{c as __pageData,E as default};

docs/hashmap.json

@@ -1 +1 @@
-{"api_effect.md":"jV8KzXq5","api_html.md":"COPskx0H","api_ignore.md":"CxKek-H-","api_mount.md":"CRwLyxt8","api_quick.md":"4axUqmd3","api_router.md":"Cn98LjXO","api_signal.md":"BmorvARW","api_tags.md":"VliNqepa","api_view.md":"Bv8Rlx9s","examples.md":"Cy97nBRw","index.md":"By6smViD","install.md":"DmlvO98W","ui_quick.md":"Bzj-nQ2u","vite_plugin.md":"CTs8LDIL"}
+{"api_html.md":"BPbZMZR1","api_mount.md":"BiKjH18I","api_quick.md":"4axUqmd3","api_router.md":"Cn98LjXO","api_signal.md":"BmorvARW","api_tags.md":"CW_zjfl9","api_watch.md":"D7sOEzCX","examples.md":"Cy97nBRw","index.md":"By6smViD","install.md":"C0utklUK","ui_quick.md":"CsppjR8J","vite_plugin.md":"CTs8LDIL"}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sigpro",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "type": "module",
   "license": "MIT",
   "exports": {

sigpro/sigpro.js

@@ -1,5 +1,5 @@
 /**
- * SigPro Core
+ * SigPro Core 
  */
 (() => {
   let activeEffect = null;
@@ -42,14 +42,11 @@
   const $ = (initial, key = null) => {
     if (typeof initial === "function") {
       const subs = new Set();
-      let cached;
+      let cached, dirty = true;
-      let dirty = true;
-
       const effect = () => {
         if (effect._deleted) return;
         effect._deps.forEach((s) => s.delete(effect));
         effect._deps.clear();
-
         const prev = activeEffect;
         activeEffect = effect;
         try {
@@ -59,57 +56,34 @@
             dirty = false;
             trigger(subs);
           }
-        } finally {
+        } finally { activeEffect = prev; }
-          activeEffect = prev;
-        }
       };
-
       effect._deps = new Set();
       effect._isComputed = true;
       effect._subs = subs;
       effect._deleted = false;
       effect.markDirty = () => (dirty = true);
-
       effect.stop = () => {
         effect._deleted = true;
         effect._deps.forEach((s) => s.delete(effect));
-        effect._deps.clear();
         subs.clear();
       };
-
       if (currentOwner) currentOwner.cleanups.add(effect.stop);
-
+      return () => { if (dirty) effect(); track(subs); return cached; };
-      return () => {
-        if (dirty) effect();
-        track(subs);
-        return cached;
-      };
     }
 
     let value = initial;
-
     if (key) {
       const saved = localStorage.getItem(key);
-      if (saved !== null) {
+      if (saved !== null) try { value = JSON.parse(saved); } catch { value = saved; }
-        try {
-          value = JSON.parse(saved);
-        } catch {
-          value = saved;
-        }
-      }
     }
-
     const subs = new Set();
-
     return (...args) => {
       if (args.length) {
         const next = typeof args[0] === "function" ? args[0](value) : args[0];
         if (!Object.is(value, next)) {
           value = next;
-          if (key) {
+          if (key) localStorage.setItem(key, JSON.stringify(value));
-            localStorage.setItem(key, JSON.stringify(value));
-          }
-
           trigger(subs);
         }
       }
@@ -118,52 +92,57 @@
     };
   };
 
-  $.effect = (fn) => {
+  $.watch = (target, fn) => {
-    const owner = currentOwner;
+    const isExplicit = Array.isArray(target);
+    const callback = isExplicit ? fn : target;
+    const depsInput = isExplicit ? target : null;
 
-    const effect = () => {
+    if (typeof callback !== "function") return () => {};
-      if (effect._deleted) return;
+
-      effect._deps.forEach((s) => s.delete(effect));
+    const owner = currentOwner;
-      effect._deps.clear();
+    const runner = () => {
-      effect._cleanups.forEach((c) => c());
+      if (runner._deleted) return;
-      effect._cleanups.clear();
+      runner._deps.forEach((s) => s.delete(runner));
+      runner._deps.clear();
+      runner._cleanups.forEach((c) => c());
+      runner._cleanups.clear();
 
       const prevEffect = activeEffect;
       const prevOwner = currentOwner;
-      activeEffect = effect;
+      activeEffect = runner;
-      currentOwner = { cleanups: effect._cleanups };
+      currentOwner = { cleanups: runner._cleanups };
-      effect.depth = prevEffect ? prevEffect.depth + 1 : 0;
+      runner.depth = prevEffect ? prevEffect.depth + 1 : 0;
 
       try {
-        fn();
+        if (isExplicit) {
+          activeEffect = null;
+          callback();
+          activeEffect = runner;
+          depsInput.forEach(d => typeof d === "function" && d());
+        } else {
+          callback();
+        }
       } finally {
         activeEffect = prevEffect;
         currentOwner = prevOwner;
       }
     };
 
-    effect._deps = new Set();
+    runner._deps = new Set();
-    effect._cleanups = new Set();
+    runner._cleanups = new Set();
-    effect._deleted = false;
+    runner._deleted = false;
-
+    runner.stop = () => {
-    effect.stop = () => {
+      if (runner._deleted) return;
-      if (effect._deleted) return;
+      runner._deleted = true;
-      effect._deleted = true;
+      effectQueue.delete(runner);
-      effectQueue.delete(effect);
+      runner._deps.forEach((s) => s.delete(runner));
-      effect._deps.forEach((s) => s.delete(effect));
+      runner._cleanups.forEach((c) => c());
-      effect._deps.clear();
+      if (owner) owner.cleanups.delete(runner.stop);
-      effect._cleanups.forEach((c) => c());
-      effect._cleanups.clear();
-
-      if (owner) {
-        owner.cleanups.delete(effect.stop);
-      }
     };
 
-    if (owner) owner.cleanups.add(effect.stop);
+    if (owner) owner.cleanups.add(runner.stop);
-
+    runner();
-    effect();
+    return runner.stop;
-    return effect.stop;
   };
 
   const sweep = (node) => {
@@ -174,7 +153,7 @@
     node.childNodes?.forEach(sweep);
   };
 
-  $.view = (fn) => {
+  const _view = (fn) => {
     const cleanups = new Set();
     const prev = currentOwner;
     const container = document.createElement("div");
@@ -191,9 +170,7 @@
         else container.appendChild(n instanceof Node ? n : document.createTextNode(String(n)));
       };
       process(res);
-    } finally {
+    } finally { currentOwner = prev; }
-      currentOwner = prev;
-    }
     return {
       _isRuntime: true,
       container,
@@ -207,8 +184,7 @@
 
   $.html = (tag, props = {}, content = []) => {
     if (props instanceof Node || Array.isArray(props) || typeof props !== "object") {
-      content = props;
+      content = props; props = {};
-      props = {};
     }
     const el = document.createElement(tag);
     el._cleanups = new Set();
@@ -216,43 +192,27 @@
     for (let [k, v] of Object.entries(props)) {
       if (k.startsWith("on")) {
         const name = k.slice(2).toLowerCase().split(".")[0];
-        const mods = k.slice(2).toLowerCase().split(".").slice(1);
+        const handler = (e) => v(e);
-        const handler = (e) => {
+        el.addEventListener(name, handler);
-          if (mods.includes("prevent")) e.preventDefault();
-          if (mods.includes("stop")) e.stopPropagation();
-          v(e);
-        };
-        el.addEventListener(name, handler, { once: mods.includes("once") });
         el._cleanups.add(() => el.removeEventListener(name, handler));
       } else if (k.startsWith("$")) {
         const attr = k.slice(1);
-        const stopAttr = $.effect(() => {
+        el._cleanups.add($.watch(() => {
           const val = typeof v === "function" ? v() : v;
-          if (el[attr] === val) return;
+          if (el[attr] !== val) el[attr] = val;
-          if (attr === "value" || attr === "checked") el[attr] = val;
+        }));
-          else if (typeof val === "boolean") el.toggleAttribute(attr, val);
-          else val == null ? el.removeAttribute(attr) : el.setAttribute(attr, val);
-        });
-        el._cleanups.add(stopAttr);
-
         if (typeof v === "function") {
           const evt = attr === "checked" ? "change" : "input";
-          const handler = (e) => v(e.target[attr]);
+          el.addEventListener(evt, (e) => v(e.target[attr]));
-          el.addEventListener(evt, handler);
-          el._cleanups.add(() => el.removeEventListener(evt, handler));
         }
       } else if (typeof v === "function") {
-        const stopAttr = $.effect(() => {
+        el._cleanups.add($.watch(() => {
           const val = v();
-          if (k === "class" || k === "className") el.className = val || "";
+          if (k === "class") el.className = val || "";
-          else if (typeof val === "boolean") el.toggleAttribute(k, val);
           else val == null ? el.removeAttribute(k) : el.setAttribute(k, val);
-        });
+        }));
-        el._cleanups.add(stopAttr);
       } else {
-        if (k === "class" || k === "className") el.className = v || "";
+        el.setAttribute(k, v);
-        else if (typeof v === "boolean") el.toggleAttribute(k, v);
-        else v == null ? el.removeAttribute(k) : el.setAttribute(k, v);
       }
     }
 
@@ -262,74 +222,91 @@
         const marker = document.createTextNode("");
         el.appendChild(marker);
         let nodes = [];
-        const stopList = $.effect(() => {
+        el._cleanups.add($.watch(() => {
           const res = c();
           const next = (Array.isArray(res) ? res : [res]).map((i) =>
-            i?._isRuntime ? i.container : i instanceof Node ? i : document.createTextNode(i ?? ""),
+            i?._isRuntime ? i.container : i instanceof Node ? i : document.createTextNode(i ?? "")
           );
-          nodes.forEach((n) => {
+          nodes.forEach((n) => { sweep(n); n.remove(); });
-            sweep(n);
-            n.remove();
-          });
           next.forEach((n) => marker.parentNode?.insertBefore(n, marker));
           nodes = next;
-        });
+        }));
-        el._cleanups.add(stopList);
       } else el.appendChild(c instanceof Node ? c : document.createTextNode(c ?? ""));
     };
     append(content);
     return el;
   };
 
-  $.ignore = (fn) => {
+  $.if = (condition, thenVal, otherwiseVal = null) => {
-    const prev = activeEffect;
+    const marker = document.createTextNode("");
-    activeEffect = null;
+    const container = $.html("div", { style: "display:contents" }, [marker]);
-    try {
+    let current = null, last = null;
-      return fn();
+    $.watch(() => {
-    } finally {
+      const state = !!(typeof condition === "function" ? condition() : condition);
-      activeEffect = prev;
+      if (state !== last) {
-    }
+        last = state;
+        if (current) current.destroy();
+        const branch = state ? thenVal : otherwiseVal;
+        if (branch) {
+          current = _view(() => typeof branch === "function" ? branch() : branch);
+          container.insertBefore(current.container, marker);
+        }
+      }
+    });
+    return container;
+  };
+
+  $.for = (source, render, keyFn) => {
+    const marker = document.createTextNode("");
+    const container = $.html("div", { style: "display:contents" }, [marker]);
+    const cache = new Map();
+    $.watch(() => {
+      const items = (typeof source === "function" ? source() : source) || [];
+      const newKeys = new Set();
+      items.forEach((item, index) => {
+        const key = keyFn(item, index);
+        newKeys.add(key);
+        let run = cache.get(key);
+        if (!run) {
+          run = _view(() => render(item, index));
+          cache.set(key, run);
+        }
+        container.insertBefore(run.container, marker);
+      });
+      cache.forEach((run, key) => {
+        if (!newKeys.has(key)) { run.destroy(); cache.delete(key); }
+      });
+    });
+    return container;
   };
 
   $.router = (routes) => {
     const sPath = $(window.location.hash.replace(/^#/, "") || "/");
     window.addEventListener("hashchange", () => sPath(window.location.hash.replace(/^#/, "") || "/"));
-
     const outlet = Div({ class: "router-outlet" });
     let current = null;
 
-    $.effect(() => {
+    $.watch([sPath], () => {
-      const path = sPath();
       if (current) current.destroy();
-      outlet.innerHTML = "";
+      const path = sPath();
-
+      const route = routes.find(r => {
-      const parts = path.split("/").filter(Boolean);
+        const rp = r.path.split("/").filter(Boolean);
-      const route =
+        const pp = path.split("/").filter(Boolean);
-        routes.find((r) => {
+        return rp.length === pp.length && rp.every((p, i) => p.startsWith(":") || p === pp[i]);
-          const rp = r.path.split("/").filter(Boolean);
+      }) || routes.find(r => r.path === "*");
-          return rp.length === parts.length && rp.every((p, i) => p.startsWith(":") || p === parts[i]);
-        }) || routes.find((r) => r.path === "*");
 
       if (route) {
         const params = {};
-        route.path
+        route.path.split("/").filter(Boolean).forEach((p, i) => {
-          .split("/")
+          if (p.startsWith(":")) params[p.slice(1)] = path.split("/").filter(Boolean)[i];
-          .filter(Boolean)
+        });
-          .forEach((p, i) => {
+        current = _view(() => {
-            if (p.startsWith(":")) params[p.slice(1)] = parts[i];
+          const res = route.component(params);
-          });
+          return typeof res === "function" ? res() : res;
-
+        });
-        current = $.ignore(() =>
-          $.view(() => {
-            const res = route.component(params);
-            return typeof res === "function" ? res() : res;
-          }),
-        );
-
         outlet.appendChild(current.container);
       }
     });
-
     return outlet;
   };
 
@@ -339,21 +316,17 @@
     const el = typeof target === "string" ? document.querySelector(target) : target;
     if (!el) return;
     if (MOUNTED_NODES.has(el)) MOUNTED_NODES.get(el).destroy();
-    const instance = $.view(typeof component === "function" ? component : () => component);
+    const instance = _view(typeof component === "function" ? component : () => component);
     el.replaceChildren(instance.container);
     MOUNTED_NODES.set(el, instance);
     return instance;
   };
 
-  const tags =
+  const tags = `div span p h1 h2 h3 h4 h5 h6 br hr section article aside nav main header footer address ul ol li dl dt dd a em strong small i b u mark time sub sup pre code blockquote details summary dialog form label input textarea select button option fieldset legend table thead tbody tfoot tr th td caption img video audio canvas svg iframe picture source progress meter`.split(/\s+/);
-    `div span p h1 h2 h3 h4 h5 h6 br hr section article aside nav main header footer address ul ol li dl dt dd a em strong small i b u mark time sub sup pre code blockquote details summary dialog form label input textarea select button option fieldset legend table thead tbody tfoot tr th td caption img video audio canvas svg iframe picture source progress meter`.split(
-      /\s+/,
-    );
-
   tags.forEach((t) => {
     window[t.charAt(0).toUpperCase() + t.slice(1)] = (p, c) => $.html(t, p, c);
   });
 
   window.$ = $;
 })();
-export const { $ } = window;
+export const { $ } = window;

src/docs/.vitepress/config.js

@@ -41,9 +41,7 @@ export default defineConfig({
         items: [
           { text: 'Quick Start', link: '/api/quick' },
           { text: '$', link: '/api/signal' },
-          { text: '$.effect', link: '/api/effect' },
+          { text: '$.watch', link: '/api/watch' },
-          { text: '$.ignore', link: '/api/ignore' },
-          { text: '$.view', link: '/api/view' },
           { text: '$.html', link: '/api/html' },
           { text: '$.router', link: '/api/router' },
           { text: '$.mount', link: '/api/mount' },

src/docs/api/effect.md

@@ -1,90 +0,0 @@
-# ⚡ Side Effects: `$.effect( )`
-
-The `$.effect` function allows you to run a piece of code whenever the signals it depends on are updated. It automatically tracks any signal called within its body.
-
-## 🛠 Function Signature
-
-```typescript
-$.effect(callback: Function): StopFunction
-```
-
-| Parameter | Type | Required | Description |
-| :--- | :--- | :--- | :--- |
-| **`callback`** | `Function` | Yes | The code to run. It will execute immediately and then re-run on dependency changes. |
-
-**Returns:** A `StopFunction` that, when called, cancels the effect and prevents further executions.
-
----
-
-## 📖 Usage Patterns
-
-### 1. Basic Tracking
-Any signal you "touch" inside the effect becomes a dependency.
-
-```javascript
-const count = $(0);
-
-$.effect(() => {
-  // This runs every time 'count' changes
-  console.log(`The count is now: ${count()}`);
-});
-
-count(1); // Console: "The count is now: 1"
-```
-
-### 2. Manual Cleanup
-If your effect creates something that needs to be destroyed (like a timer or a global event listener), you can return a cleanup function.
-
-```javascript
-$.effect(() => {
-  const timer = setInterval(() => console.log("Tick"), 1000);
-
-  // SigPro will run this BEFORE the next effect execution 
-  // or when the effect is stopped.
-  return () => clearInterval(timer);
-});
-```
-
-### 3. Nesting & Automatic Cleanup
-If you create a signal or another effect inside an effect, SigPro tracks them as "children". When the parent effect re-runs or stops, all children are automatically cleaned up to prevent memory leaks.
-
-```javascript
-$.effect(() => {
-  if (isLoggedIn()) {
-    // This sub-effect is only active while 'isLoggedIn' is true
-    $.effect(() => {
-      console.log("Fetching user data...");
-    });
-  }
-});
-```
-
----
-
-## 🛑 Stopping an Effect
-You can stop an effect manually by calling the function it returns. This is useful for one-time operations or complex logic.
-
-```javascript
-const stop = $.effect(() => {
-  console.log(count());
-});
-
-// Later...
-stop(); // The effect is destroyed and will never run again.
-```
-
----
-
-## 💡 Pro Tip: Batching
-SigPro uses a **Microtask Queue** to handle updates. If you update multiple signals at once, the effect will only run **once** at the end of the current task.
-
-```javascript
-const a = $(0);
-const b = $(0);
-
-$.effect(() => console.log(a(), b()));
-
-// This triggers only ONE re-run, not two.
-a(1);
-b(2);
-```

src/docs/api/html.md

@@ -1,6 +1,6 @@
 # 🏗️ The DOM Factory: `$.html( )`
 
-`$.html` is the internal engine that creates, attributes, and attaches reactivity to DOM elements. It is the foundation for all Tag Constructors in SigPro.
+`$.html` is the internal engine that creates, attributes, and attaches reactivity to DOM elements. In V2, it uses `$.watch` to maintain a live, high-performance link between your Signals and the Document Object Model.
 
 ## 🛠 Function Signature
 
@@ -41,7 +41,7 @@ $.html("button", {
 ```
 
 ### 3. Reactive Attributes
-If an attribute value is a **function** (like a Signal), `$.html` creates an internal `$.effect` to keep the DOM in sync with the state.
+If an attribute value is a **function** (like a Signal), `$.html` creates an internal **`$.watch`** to keep the DOM in sync with the state.
 
 ```javascript
 $.html("div", {
@@ -51,7 +51,7 @@ $.html("div", {
 ```
 
 ### 4. Reactive Children
-Children can be static or dynamic. When a child is a function, SigPro creates a reactive boundary for that specific part of the DOM.
+Children can be static or dynamic. When a child is a function, SigPro creates a reactive boundary using `$.watch` for that specific part of the DOM.
 
 ```javascript
 $.html("div", {}, [
@@ -74,9 +74,10 @@ $.html("input", {
 });
 ```
 
-## 🧹 Automatic Cleanup
+## 🧹 Memory Management (Internal)
-Every element created with `$.html` gets a hidden `._cleanups` property (a `Set`). 
+Every element created with `$.html` is "self-aware" regarding its reactive dependencies.
-* When SigPro removes an element via `$.view` or `$.router`, it automatically executes all functions stored in this Set (stopping effects, removing listeners, etc.).
+* **`._cleanups`**: A hidden `Set` attached to the element that stores all `stop()` functions from its internal `$.watch` calls and event listeners.
+* **Lifecycle**: When an element is removed by a Controller (`$.If`, `$.For`, or `$.router`), SigPro performs a recursive "sweep" to execute these cleanups, ensuring **zero memory leaks**.
 
 ---
 

src/docs/api/ignore.md

@@ -1,75 +0,0 @@
-# 🛑 Untracking: `$.ignore( )`
-
-The `$.ignore` function allows you to read a signal's value inside an effect or a computed signal **without** creating a dependency. 
-
-## 🛠 Function Signature
-
-```typescript
-$.ignore(callback: Function): any
-```
-
-| Parameter | Type | Required | Description |
-| :--- | :--- | :--- | :--- |
-| **`callback`** | `Function` | Yes | A function where signals can be read "silently". |
-
-**Returns:** Whatever the callback function returns.
-
----
-
-## 📖 Usage Patterns
-
-### 1. Preventing Dependency Tracking
-Normally, reading a signal inside `$.effect` makes the effect re-run when that signal changes. `$.ignore` breaks this link.
-
-```javascript
-const count = $(0);
-const logLabel = $("System Log");
-
-$.effect(() => {
-  // This effect tracks 'count'...
-  const currentCount = count();
-  
-  // ...but NOT 'logLabel'. 
-  // Changing 'logLabel' will NOT re-run this effect.
-  const label = $.ignore(() => logLabel());
-  
-  console.log(`${label}: ${currentCount}`);
-});
-
-count(1);     // Console: "System Log: 1" (Triggers re-run)
-logLabel("UI"); // Nothing happens in console (Ignored)
-```
-
-### 2. Reading State in Event Handlers
-Inside complex UI logic, you might want to take a "snapshot" of a signal without triggering a reactive chain.
-
-```javascript
-const handleClick = () => {
-  // Accessing state without letting the caller know we touched it
-  const data = $.ignore(() => mySignal());
-  process(data);
-};
-```
-
-### 3. Avoiding Infinite Loops
-If you need to **write** to a signal based on its own value inside an effect (and you aren't using the functional updater), `$.ignore` prevents the effect from triggering itself.
-
-```javascript
-$.effect(() => {
-  const value = someSignal();
-  
-  if (value > 100) {
-    // We update the signal, but we ignore the read to avoid a loop
-    $.ignore(() => someSignal(0));
-  }
-});
-```
-
----
-
-## 💡 Why use it?
-
-* **Performance:** Prevents expensive effects from running when non-essential data changes.
-* **Logic Control:** Allows "sampling" a signal at a specific point in time.
-* **Safety:** Essential for complex state orchestrations where circular dependencies might occur.
-

src/docs/api/mount.md

@@ -1,8 +1,8 @@
 # 🔌 Application Mounter: `$.mount( )`
 
-The `$.mount` function is the entry point of your reactive world. It bridges the gap between your SigPro logic and the browser's Real DOM by injecting a component into the document.
+The `$.mount` function is the entry point of your reactive world. It bridges the gap between your SigPro logic and the browser's Real DOM by injecting a component into the document and initializing its reactive lifecycle.
 
-## 1. Function Signature
+## 🛠️ Function Signature
 
 ```typescript
 $.mount(node: Function | HTMLElement, target?: string | HTMLElement): RuntimeObject
@@ -13,100 +13,73 @@ $.mount(node: Function | HTMLElement, target?: string | HTMLElement): RuntimeObj
 | **`node`** | `Function` or `Node` | **Required** | The component function or DOM element to render. |
 | **`target`** | `string` or `Node` | `document.body` | CSS selector or DOM element where the app will live. |
 
-**Returns:** A `Runtime` object containing the `container` and a `destroy()` method.
+**Returns:** A `Runtime` object containing the `container` and a `destroy()` method to wipe all reactivity and DOM nodes.
 
 ---
 
-## 2. Common Usage Scenarios
+## 📖 Common Usage Scenarios
 
-### A. The "Clean Slate" (SPA Entry)
+### 1. The SPA Entry Point
-In a modern Single Page Application, you typically want SigPro to manage the entire view. By default, if no target is provided, it mounts to `document.body`.
+In a Single Page Application, you typically mount your main component to the body or a root div. SigPro manages the entire view from that point.
 
 ```javascript
 import { $ } from './sigpro.js';
 import App from './App.js';
 
-// Mounts your main App component directly to the body
+// Mounts your main App component
-$.mount(App); 
+$.mount(App, '#app-root'); 
 ```
 
-### B. Targeting a Specific Container
+### 2. Reactive "Islands"
-If your HTML has a predefined structure, you can tell SigPro exactly where to render by passing a CSS selector or a direct reference.
+SigPro is perfect for adding reactivity to static pages. You can mount small widgets into specific parts of an existing HTML layout.
-
-```html
-<div id="sidebar"></div>
-<main id="app-root"></main>
-```
 
 ```javascript
-// Mount using a CSS selector
+const Counter = () => {
-$.mount(MyComponent, '#app-root');
-
-// Mount using a direct DOM reference
-const sidebar = document.querySelector('#sidebar');
-$.mount(SidebarComponent, sidebar);
-```
-
-### C. Creating "Reactive Islands"
-SigPro is excellent for "sprinkling" reactivity onto legacy or static pages. You can inject small reactive widgets into any part of an existing HTML layout.
-
-```javascript
-// A small reactive widget
-const CounterWidget = () => {
   const count = $(0);
   return Button({ onclick: () => count(c => c + 1) }, [
     "Clicks: ", count
   ]);
 };
 
-// Mount it into a specific div in your static HTML
+// Mount only the counter into a specific sidebar div
-$.mount(CounterWidget, '#counter-container');
+$.mount(Counter, '#sidebar-widget');
 ```
 
 ---
 
-## 3. How it Works (Lifecycle)
+## 🔄 How it Works (Lifecycle & Saneamiento)
 
-When `$.mount` is executed, it performs these critical steps:
+When `$.mount` is executed, it performs these critical steps to ensure a leak-free environment:
 
-1.  **Resolution & Wrapping**: If you pass a **Function**, SigPro wraps it in a `$.view()`. This starts tracking all internal signals and effects.
+1.  **Duplicate Detection**: If you call `$.mount` on a target that already has a SigPro instance, it automatically calls `.destroy()` on the previous instance. This prevents "Zombie Effects" from stacking in memory.
-2.  **Target Clearance**: It uses `target.replaceChildren()`. This efficiently wipes any existing HTML or "zombie" nodes inside the target before mounting.
+2.  **Internal Scoping**: It executes the component function inside an internal **Reactive Owner**. This captures every `$.watch` and event listener created during the render.
-3.  **Injection**: The component's container is appended to the target.
+3.  **Target Injection**: It clears the target using `replaceChildren()` and appends the new component.
-4.  **Memory Management**: It stores the `Runtime` instance associated with that DOM element. If you call `$.mount` again on the same target, SigPro automatically **destroys the previous app** to prevent memory leaks.
+4.  **Runtime Creation**: It returns a control object:
+    * `container`: The actual DOM element created.
+    * `destroy()`: The "kill switch" that runs all cleanups, stops all watchers, and removes the element from the DOM.
 
 ---
 
-## 4. Global vs. Local Scope
+## 🛑 Manual Unmounting
 
-### The "Framework" Way (Global)
+While SigPro handles most cleanups automatically (via `$.If`, `$.For`, and `$.router`), you can manually destroy any mounted instance. This is vital for imperatively managed UI like **Toasts** or **Modals**.
-By importing your core in your entry file, SigPro automatically initializes global Tag Constructors (`Div`, `Span`, `H1`, etc.). This allows for a clean, declarative DX across your entire project.
 
 ```javascript
-// main.js
+const instance = $.mount(MyToast, '#toast-container');
-import './sigpro.js'; 
 
-// Now any file can simply do:
+// Later, to remove the toast and kill its reactivity:
-$.mount(() => H1("Global SigPro App"));
+instance.destroy();
-```
-
-### The "Library" Way (Local)
-If you prefer to avoid global variables, you can use the low-level `$.html` factory to create elements locally.
-
-```javascript
-import { $ } from './sigpro.js';
-
-const myNode = $.html('div', { class: 'widget' }, 'Local Instance');
-$.mount(myNode, '#widget-target');
 ```
 
 ---
 
-## 5. Summary Cheat Sheet
+## 💡 Summary Cheat Sheet
 
 | Goal | Code Pattern |
 | :--- | :--- |
 | **Mount to body** | `$.mount(App)` |
-| **Mount to ID** | `$.mount(App, '#root')` |
+| **Mount to CSS Selector** | `$.mount(App, '#root')` |
-| **Mount to Element** | `$.mount(App, myElement)` |
+| **Mount to DOM Node** | `$.mount(App, myElement)` |
-| **Mount raw Node** | `$.mount(Div("Hello"), '#id')` |
+| **Clean & Re-mount** | Calling `$.mount` again on the same target |
-| **Unmount/Destroy** | `const app = $.mount(App); app.destroy();` |
+| **Total Saneamiento** | `const app = $.mount(App); app.destroy();` |
+

src/docs/api/tags.md

@@ -1,6 +1,6 @@
 # 🎨 Global Tag Helpers
 
-In **SigPro**, you don't need to manually type `$.html('div', ...)` for every element. To keep your code declarative and readable, the engine automatically generates **Global Helper Functions** for all standard HTML5 tags upon initialization.
+In **SigPro V2**, you don't need to manually type `$.html('div', ...)` for every element. To keep your code declarative and readable, the engine automatically generates **Global Helper Functions** for all standard HTML5 tags upon initialization.
 
 ## 1. How it Works
 
@@ -59,23 +59,23 @@ Span(42);
 
 ---
 
-## 4. Reactive Power Examples
+## 4. Reactive Power V2
 
-These helpers are natively wired into SigPro's reactivity. No manual `useEffect` or `watch` calls are needed.
+These helpers are natively wired into SigPro's **`$.watch`** engine. No manual effect management is needed; the lifecycle is tied to the DOM node.
 
 ### Reactive Attributes
-Simply pass a Signal (function) to any attribute. SigPro handles the rest.
+Simply pass a Signal (function) to any attribute. SigPro creates an internal `$.watch` to keep the DOM in sync.
 ```javascript
 const theme = $("light");
 
 Div({ 
-  // Updates 'class' automatically when theme() changes
+  // Updates 'class' automatically via internal $.watch
   class: () => `app-box ${theme()}` 
 }, "Themeable Box");
 ```
 
 ### The Binding Operator (`$`)
-Use the `$` prefix for **Two-Way Binding** on inputs.
+Use the `$` prefix for **Two-Way Binding** on inputs. This bridges the Signal and the Input element bi-directionally.
 ```javascript
 const search = $("");
 
@@ -86,13 +86,13 @@ Input({
 });
 ```
 
-### Dynamic Lists
+### Dynamic Flow & Saneamiento
-Combine tags with `ui.For` for high-performance list rendering.
+Combine tags with Core controllers for high-performance rendering. SigPro automatically cleans up the `$.watch` instances when nodes are removed.
 ```javascript
 const items = $(["Apple", "Banana", "Cherry"]);
 
 Ul({ class: "list-disc" }, [
-  ui.For(items, (item) => Li(item), (item) => item)
+  $.For(items, (item) => Li(item))
 ]);
 ```
 
@@ -103,13 +103,13 @@ Ul({ class: "list-disc" }, [
 Since SigPro injects these helpers into the global `window` object, follow these rules to avoid bugs:
 
 1.  **Avoid Shadowing**: Don't name your local variables like the tags (e.g., `const Div = ...`). This will "hide" the SigPro helper.
-2.  **Custom Components**: Always use **PascalCase**, **UPPERCASE**, or **Underscore** prefixes for your own component functions (e.g., `UserCard`, `INPUT`, or `_Input`) to distinguish them from the built-in Tag Helpers and avoid naming collisions.
+2.  **Custom Components**: Always use **PascalCase** for your own component functions (e.g., `UserCard`, `NavMenu`) to distinguish them from the built-in Tag Helpers and maintain architectural clarity.
 :::
 ---
 
-## 6. Logic to UI Comparison
+## 5. Logic to UI Comparison
 
-Here is how a dynamic **User Status** component translates from SigPro logic to the final DOM structure.
+Here is how a dynamic **User Status** component translates from SigPro logic to the final DOM structure, handled by the V2 "Saneamiento" engine.
 
 ```javascript
 // SigPro Component
@@ -121,16 +121,14 @@ const UserStatus = (name, $online) => (
       class: 'w-3 h-3 bg-green-500 rounded-full' 
     }),
     P({ 
-      // Reactive text content
+      // Reactive text content via automatic $.watch
       class: () => $online() ? "text-bold" : "text-gray-400" 
     }, name)
   ])
 );
 ```
 
-| State (`$online`) | Rendered HTML |
+| State (`$online`) | Rendered HTML | Memory Management |
-| :--- | :--- |
+| :--- | :--- | :--- |
-| **`true`** | `<div class="flex..."><span class="w-3..."></span><p class="text-bold">John</p></div>` |
+| **`true`** | `<div class="flex..."><span class="w-3..."></span><p class="text-bold">John</p></div>` | Watcher active |
-| **`false`** | `<div class="flex..."><span hidden class="w-3..."></span><p class="text-gray-400">John</p></div>` |
+| **`false`** | `<div class="flex..."><span hidden class="w-3..."></span><p class="text-gray-400">John</p></div>` | Attribute synced |
-
-

src/docs/api/view.md

@@ -1,78 +0,0 @@
-# 🖼️ Component Lifecycle: `$.view( )`
-
-The `$.view` function is a specialized wrapper used to manage the lifecycle of a UI component. It tracks all signals, effects, and DOM elements created within it, providing a single point of destruction to prevent memory leaks.
-
-## 🛠 Function Signature
-
-```typescript
-$.view(renderFn: Function): RuntimeObject
-```
-
-| Parameter | Type | Required | Description |
-| :--- | :--- | :--- | :--- |
-| **`renderFn`** | `Function` | Yes | A function that returns a DOM Node or an array of Nodes. |
-
-**Returns:** A `Runtime` object containing:
-* `container`: A `div` (with `display: contents`) holding the rendered content.
-* `destroy()`: A function that unmounts the view and cleans up all internal effects/listeners.
-
----
-
-## 📖 Usage Patterns
-
-### 1. Basic Component Wrapper
-When you wrap logic in `$.view`, SigPro creates a "boundary".
-
-```javascript
-const myView = $.view(() => {
-  const count = $(0);
-  
-  // This effect is "owned" by this view
-  $.effect(() => console.log(count()));
-
-  return Div([
-    H1("Internal View"),
-    Button({ onclick: () => count(c => c + 1) }, "Add")
-  ]);
-});
-
-// To show it:
-document.body.appendChild(myView.container);
-
-// To kill it (removes from DOM and stops all internal effects):
-myView.destroy();
-```
-
-### 2. Manual Cleanups with `onCleanup`
-The `renderFn` receives a helper object that allows you to register custom cleanup logic (like closing a WebSocket or a third-party library instance).
-
-```javascript
-const ChartComponent = () => $.view(({ onCleanup }) => {
-  const socket = new WebSocket("ws://...");
-
-  onCleanup(() => {
-    socket.close();
-    console.log("Cleanup: WebSocket closed");
-  });
-
-  return Div({ class: "chart-container" });
-});
-```
-
----
-
-## 🏗️ Internal Architecture
-
-When `$.view` is called, it performs the following:
-1. **Isolation**: It creates a new `Set` of cleanups.
-2. **Execution**: It runs your function and captures any `$.effect` or child `$.view` created during execution.
-3. **Container**: It wraps the result in a `display: contents` element (which doesn't affect your CSS layout).
-4. **Disposal**: When `destroy()` is called, it recursively calls all cleanup functions and removes the container from the DOM.
-
----
-
-## 💡 Why use `$.view`?
-
-* **Automatic Cleanup**: You don't have to manually stop every effect when a user navigates away.
-* **Router Integration**: The SigPro Router (`$.router`) uses `$.view` internally to swap pages and clean up the previous one automatically.
-* **Performance**: It ensures that background processes (like intervals or observers) stop as soon as the element is no longer visible.

src/docs/api/watch.md

@@ -0,0 +1,91 @@
+# ⚡ Reactivity Control: `$.watch( )`
+
+The `$.watch` function is the reactive engine of SigPro. It allows you to execute code automatically when signals change. In V2, `$.watch` is **polymorphic**: it can track dependencies automatically or follow an explicit list.
+
+## 🛠 Function Signature
+
+```typescript
+// Automatic Mode (Magic Tracking)
+$.watch(callback: Function): StopFunction
+
+// Explicit Mode (Isolated Dependencies)
+$.watch(deps: Signal[], callback: Function): StopFunction
+```
+
+| Parameter | Type | Required | Description |
+| :--- | :--- | :--- | :--- |
+| **`target / deps`** | `Function` | `Array` | Yes | Either the code to run (Auto) or an array of signals to watch (Explicit). |
+| **`callback`** | `Function` | Only in Explicit | The code that will run when the `deps` change. |
+
+**Returns:** A `StopFunction` that, when called, destroys the watcher and releases memory.
+
+---
+
+## 📖 Usage Patterns
+
+### 1. Automatic Mode (Default)
+Any signal you "touch" inside the callback becomes a dependency. SigPro tracks them behind the scenes.
+
+```javascript
+const count = $(0);
+
+$.watch(() => {
+  // Re-runs every time 'count' changes
+  console.log(`Count is: ${count()}`);
+});
+```
+
+### 2. Explicit Mode (Advanced Saneamiento) 🚀
+This mode **isolates** execution. The callback only triggers when the signals in the array change. Any other signal accessed *inside* the callback will NOT trigger a re-run. This is the "gold standard" for Routers and heavy components.
+
+```javascript
+const sPath = $("/home");
+const user = $("Admin");
+
+$.watch([sPath], () => {
+  // Only triggers when 'sPath' changes.
+  // Changes to 'user' will NOT trigger this, preventing accidental re-renders.
+  console.log(`Navigating to ${sPath()} as ${user()}`);
+});
+```
+
+### 3. Automatic Cleanup
+If your logic creates timers, event listeners, or other reactive effects, SigPro tracks them as "children" of the current watch. When the watcher re-runs or stops, it kills everything inside automatically.
+
+```javascript
+$.watch(() => {
+  const timer = setInterval(() => console.log("Tick"), 1000);
+  
+  // Register a manual cleanup if needed
+  // Or simply rely on SigPro to kill nested $.watch() calls
+  return () => clearInterval(timer);
+});
+```
+
+---
+
+## 🛑 Stopping a Watcher
+Call the returned function to manually kill the watcher. This is essential for manual DOM injections (like Toasts) or long-lived background processes.
+
+```javascript
+const stop = $.watch(() => console.log(count()));
+
+// Later...
+stop(); // The link between the signal and this code is physically severed.
+```
+
+---
+
+## 💡 Pro Tip: The Microtask Queue
+SigPro batches updates. If you update multiple signals in the same execution block, the watcher will only fire **once** at the end of the task.
+
+```javascript
+const a = $(0);
+const b = $(0);
+
+$.watch(() => console.log(a(), b()));
+
+// This triggers only ONE re-run.
+a(1);
+b(2);
+```

src/docs/ui/quick.md

@@ -1,15 +1,25 @@
+
 # 🧩 UI Components `(WIP)`
 
-> **Status: Work In Progress.** > These are high-level, complex visual components designed to speed up development. They often replace native HTML elements with "superpowered" versions that handle their own internal logic, reactivity, and accessibility.
+> **Status: Work In Progress.** > These are high-level, complex visual components designed to speed up development. They replace native HTML elements with "superpowered" versions that handle their own internal logic, reactivity, and professional styling.
+
+## ⚠️ Prerequisites
+
+To ensure all components render correctly with their reactive themes and states, your project **must** have the following versions installed:
+
+* **Tailwind CSS v4+**: For the new engine performance and modern CSS variables.
+* **DaisyUI v5+**: Required for the updated theme-selectors and improved component classes used in the SigPro UI library.
+
+---
 
 ## 1. What are UI Components?
 
-Unlike **Tag Helpers** (which are just functional mirrors of HTML tags), SigPro UI Components are smart abstractions. 
+Unlike **Tag Helpers** (which are just functional mirrors of HTML tags), SigPro UI Components are smart abstractions:
 
 * **Stateful**: They manage complex internal states (like date ranges, search filtering, or API lifecycles).
-* **Reactive**: Attributes prefixed with `$` are automatically tracked.
+* **Reactive**: Attributes prefixed with `$` are automatically tracked via `$.watch`.
-* **Self-Cleaning**: They automatically use `_cleanups` to destroy observers or event listeners when removed from the DOM.
+* **Self-Sane**: They automatically use `._cleanups` to destroy observers or event listeners when removed from the DOM.
-* **Themed**: Fully compatible with Tailwind CSS and DaisyUI themes.
+* **Themed**: Fully compatible with the DaisyUI v5 theme system and Tailwind v4 utility classes.
 
 ---
 
@@ -17,7 +27,6 @@ Unlike **Tag Helpers** (which are just functional mirrors of HTML tags), SigPro
 
 | Category | Components |
 | :--- | :--- |
-| **Logic & Flow** | `If`, `For`, `Json` |
 | **Forms & Inputs** | `Button`, `Input`, `Select`, `Autocomplete`, `Datepicker`, `Colorpicker`, `CheckBox`, `Radio`, `Range`, `Rating`, `Swap` |
 | **Feedback** | `Alert`, `Toast`, `Modal`, `Loading`, `Badge`, `Tooltip`, `Indicator` |
 | **Navigation** | `Navbar`, `Menu`, `Drawer`, `Tabs`, `Accordion`, `Dropdown` |
@@ -28,7 +37,7 @@ Unlike **Tag Helpers** (which are just functional mirrors of HTML tags), SigPro
 ## 3. Examples with "Superpowers"
 
 ### A. The Declarative API Flow (`Request` & `Response`)
-Instead of manually managing `loading` and `error` flags, use these two together to handle data fetching elegantly.
+Instead of manually managing `loading` and `error` flags, use these together to handle data fetching elegantly.
 
 ```javascript
 // 1. Define the request (it tracks dependencies automatically)
@@ -48,7 +57,7 @@ Div({ class: "p-4" }, [
 ```
 
 ### B. Smart Inputs & Autocomplete
-Native inputs are boring. SigPro UI inputs handle labels, icons, password toggles, and validation states out of the box.
+SigPro UI inputs handle labels, icons, password toggles, and validation states out of the box using DaisyUI v5 classes.
 
 ```javascript
 const searchQuery = $("");
@@ -63,7 +72,7 @@ Autocomplete({
 ```
 
 ### C. The Reactive Datepicker
-Handles single dates or ranges with a clean, reactive interface.
+Handles single dates or ranges with a clean, reactive interface that automatically syncs with your signals.
 
 ```javascript
 const myDate = $(""); // or { start: "", end: "" } for range
@@ -71,15 +80,15 @@ const myDate = $(""); // or { start: "", end: "" } for range
 Datepicker({
   label: "Select Expiry Date",
   $value: myDate,
-  range: false // Set to true for range selection
+  range: false
 });
 ```
 
 ### D. Imperative Toasts & Modals
-Sometimes you just need to trigger a message without cluttering your template.
+Trigger complex UI elements from your logic. These components use `$.mount` internally to ensure they are properly cleaned up from memory after they close.
 
 ```javascript
-// Show a notification from anywhere in your logic
+// Show a notification (Self-destroying after 3s)
 Toast("Settings saved successfully!", "alert-success", 3000);
 
 // Control a modal with a simple signal
@@ -104,15 +113,15 @@ The UI library comes with a built-in locale system. It currently supports `es` a
 // Set the global UI language
 SetLocale("en");
 
-// Access translated strings in your own components
+// Access translated strings (Returns a signal that tracks the current locale)
-const t = tt("confirm"); // Returns a signal that tracks the current locale
+const t = tt("confirm"); 
 ```
 
 ---
 
 ## 5. Best Practices
 
-* **Use `$` for Reactivity**: If a property starts with `$`, it expects a Signal (e.g., `$value: mySignal`).
+* **Use `$` for Reactivity**: If a property starts with `$`, the component expects a Signal (e.g., `$value: mySignal`).
-* **Key your Lists**: When using `For`, always provide a `keyFn` to ensure high-performance DOM reconciliation.
+* **Automatic Cleaning**: You don't need to manually destroy these components if they are inside a `$.If` or `$.For`. SigPro's core will "sweep" their internal watchers automatically.
-* **Cleanups**: If you build custom components that use `setInterval` or `observers`, add them to the element's `_cleanups` Set.
+* **Manual Cleanups**: If you build custom components using `setInterval` or third-party observers, always add the stop functions to the element's `._cleanups` Set.