tina4js 1.0.4 → 1.0.6

package/dist/core.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./signal.cjs.js"),_=require("./component.cjs.js"),h=new WeakMap,d="t4:";function A(t,...e){let n=h.get(t);if(!n){n=document.createElement("template");let c="";for(let s=0;s<t.length;s++)c+=t[s],s<e.length&&(T(c)?c+=`__t4_${s}__`:c+=`<!--${d}${s}-->`);n.innerHTML=c,h.set(t,n)}const o=n.content.cloneNode(!0),i=N(o);for(const{marker:c,index:s}of i)y(c,e[s]);const f=b(o);for(const c of f)S(c,e);return o}function N(t){const e=[];return u(t,n=>{if(n.nodeType===8){const o=n.data;if(o&&o.startsWith(d)){const i=parseInt(o.slice(d.length),10);e.push({marker:n,index:i})}}}),e}function b(t){const e=[];return u(t,n=>{n.nodeType===1&&e.push(n)}),e}function u(t,e){const n=t.childNodes;for(let o=0;o<n.length;o++){const i=n[o];e(i),u(i,e)}}function y(t,e){const n=t.parentNode;if(n)if(a.isSignal(e)){const o=document.createTextNode("");n.replaceChild(o,t),a.effect(()=>{o.data=String(e.value??"")})}else if(typeof e=="function"){const o=document.createComment("");n.replaceChild(o,t);let i=[];a.effect(()=>{var l;const f=e();for(const r of i)(l=r.parentNode)==null||l.removeChild(r);i=[];const c=m(f),s=o.parentNode;for(const r of c)s.insertBefore(r,o),i.push(r)})}else if(p(e))n.replaceChild(e,t);else if(e instanceof Node)n.replaceChild(e,t);else if(Array.isArray(e)){const o=document.createDocumentFragment();for(const i of e){const f=m(i);for(const c of f)o.appendChild(c)}n.replaceChild(o,t)}else{const o=document.createTextNode(String(e??""));n.replaceChild(o,t)}}function S(t,e){const n=[];for(const o of Array.from(t.attributes)){const i=o.name,f=o.value;if(i.startsWith("@")){const s=i.slice(1),l=f.match(/__t4_(\d+)__/);if(l){const r=e[parseInt(l[1],10)];typeof r=="function"&&t.addEventListener(s,r)}n.push(i);continue}if(i.startsWith("?")){const s=i.slice(1),l=f.match(/__t4_(\d+)__/);if(l){const r=e[parseInt(l[1],10)];if(a.isSignal(r)){const g=r;a.effect(()=>{g.value?t.setAttribute(s,""):t.removeAttribute(s)})}else r&&t.setAttribute(s,"")}n.push(i);continue}if(i.startsWith(".")){const s=i.slice(1),l=f.match(/__t4_(\d+)__/);if(l){const r=e[parseInt(l[1],10)];a.isSignal(r)?a.effect(()=>{t[s]=r.value}):t[s]=r}n.push(i);continue}const c=f.match(/__t4_(\d+)__/);if(c){const s=e[parseInt(c[1],10)];if(a.isSignal(s)){const l=s;a.effect(()=>{t.setAttribute(i,String(l.value??""))})}else typeof s=="function"?a.effect(()=>{t.setAttribute(i,String(s()??""))}):t.setAttribute(i,String(s??""))}}for(const o of n)t.removeAttribute(o)}function m(t){if(t==null||t===!1)return[];if(p(t))return Array.from(t.childNodes);if(t instanceof Node)return[t];if(Array.isArray(t)){const e=[];for(const n of t)e.push(...m(n));return e}return[document.createTextNode(String(t))]}function p(t){return t!=null&&typeof t=="object"&&t.nodeType===11}function T(t){let e=!1,n=!1,o=!1;for(let i=0;i<t.length;i++){const f=t[i];f==="<"&&!e&&!n&&(o=!0),f===">"&&!e&&!n&&(o=!1),o&&(f==='"'&&!e&&(n=!n),f==="'"&&!n&&(e=!e))}return o}exports.batch=a.batch;exports.computed=a.computed;exports.effect=a.effect;exports.isSignal=a.isSignal;exports.signal=a.signal;exports.Tina4Element=_.Tina4Element;exports.html=A;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("./signal.cjs.js"),N=require("./component.cjs.js"),_=new WeakMap,m="t4:";function b(t,...e){let n=_.get(t);if(!n){n=document.createElement("template");let f="";for(let i=0;i<t.length;i++)f+=t[i],i<e.length&&(E(f)?f+=`__t4_${i}__`:f+=`<!--${m}${i}-->`);n.innerHTML=f,_.set(t,n)}const o=n.content.cloneNode(!0),c=C(o);for(const{marker:f,index:i}of c)S(f,e[i]);const r=y(o);for(const f of r)T(f,e);return o}function C(t){const e=[];return p(t,n=>{if(n.nodeType===8){const o=n.data;if(o&&o.startsWith(m)){const c=parseInt(o.slice(m.length),10);e.push({marker:n,index:c})}}}),e}function y(t){const e=[];return p(t,n=>{n.nodeType===1&&e.push(n)}),e}function p(t,e){const n=t.childNodes;for(let o=0;o<n.length;o++){const c=n[o];e(c),p(c,e)}}function S(t,e){const n=t.parentNode;if(n)if(s.isSignal(e)){const o=document.createTextNode("");n.replaceChild(o,t),s.effect(()=>{o.data=String(e.value??"")})}else if(typeof e=="function"){const o=document.createComment("");n.replaceChild(o,t);let c=[],r=[];s.effect(()=>{var g;for(const d of r)d();r=[];const f=[],i=s._getEffectCollector();s._setEffectCollector(f);const l=e();s._setEffectCollector(i),r=f;for(const d of c)(g=d.parentNode)==null||g.removeChild(d);c=[];const a=h(l),u=o.parentNode;if(u)for(const d of a)u.insertBefore(d,o),c.push(d)})}else if(A(e))n.replaceChild(e,t);else if(e instanceof Node)n.replaceChild(e,t);else if(Array.isArray(e)){const o=document.createDocumentFragment();for(const c of e){const r=h(c);for(const f of r)o.appendChild(f)}n.replaceChild(o,t)}else{const o=document.createTextNode(String(e??""));n.replaceChild(o,t)}}function T(t,e){const n=[];for(const o of Array.from(t.attributes)){const c=o.name,r=o.value;if(c.startsWith("@")){const i=c.slice(1),l=r.match(/__t4_(\d+)__/);if(l){const a=e[parseInt(l[1],10)];typeof a=="function"&&t.addEventListener(i,a)}n.push(c);continue}if(c.startsWith("?")){const i=c.slice(1),l=r.match(/__t4_(\d+)__/);if(l){const a=e[parseInt(l[1],10)];if(s.isSignal(a)){const u=a;s.effect(()=>{u.value?t.setAttribute(i,""):t.removeAttribute(i)})}else a&&t.setAttribute(i,"")}n.push(c);continue}if(c.startsWith(".")){const i=c.slice(1),l=r.match(/__t4_(\d+)__/);if(l){const a=e[parseInt(l[1],10)];s.isSignal(a)?s.effect(()=>{t[i]=a.value}):t[i]=a}n.push(c);continue}const f=r.match(/__t4_(\d+)__/);if(f){const i=e[parseInt(f[1],10)];if(s.isSignal(i)){const l=i;s.effect(()=>{t.setAttribute(c,String(l.value??""))})}else typeof i=="function"?s.effect(()=>{t.setAttribute(c,String(i()??""))}):t.setAttribute(c,String(i??""))}}for(const o of n)t.removeAttribute(o)}function h(t){if(t==null||t===!1)return[];if(A(t))return Array.from(t.childNodes);if(t instanceof Node)return[t];if(Array.isArray(t)){const e=[];for(const n of t)e.push(...h(n));return e}return[document.createTextNode(String(t))]}function A(t){return t!=null&&typeof t=="object"&&t.nodeType===11}function E(t){let e=!1,n=!1,o=!1;for(let c=0;c<t.length;c++){const r=t[c];r==="<"&&!e&&!n&&(o=!0),r===">"&&!e&&!n&&(o=!1),o&&(r==='"'&&!e&&(n=!n),r==="'"&&!n&&(e=!e))}return o}exports.batch=s.batch;exports.computed=s.computed;exports.effect=s.effect;exports.isSignal=s.isSignal;exports.signal=s.signal;exports.Tina4Element=N.Tina4Element;exports.html=b;

package/dist/core.es.js

@@ -1,53 +1,53 @@
-import { i as l, e as d } from "./signal.es.js";
-import { b as I, c as W, s as V } from "./signal.es.js";
-import { T as D } from "./component.es.js";
-const u = /* @__PURE__ */ new WeakMap(), m = "t4:";
-function x(t, ...e) {
-  let n = u.get(t);
+import { i as p, e as d, a as b, d as A } from "./signal.es.js";
+import { b as w, c as M, s as R } from "./signal.es.js";
+import { T as F } from "./component.es.js";
+const N = /* @__PURE__ */ new WeakMap(), u = "t4:";
+function W(t, ...e) {
+  let n = N.get(t);
   if (!n) {
     n = document.createElement("template");
-    let r = "";
-    for (let i = 0; i < t.length; i++)
-      r += t[i], i < e.length && (T(r) ? r += `__t4_${i}__` : r += `<!--${m}${i}-->`);
-    n.innerHTML = r, u.set(t, n);
+    let i = "";
+    for (let r = 0; r < t.length; r++)
+      i += t[r], r < e.length && (S(i) ? i += `__t4_${r}__` : i += `<!--${u}${r}-->`);
+    n.innerHTML = i, N.set(t, n);
   }
-  const o = n.content.cloneNode(!0), s = A(o);
-  for (const { marker: r, index: i } of s)
-    b(r, e[i]);
-  const f = N(o);
-  for (const r of f)
-    y(r, e);
+  const o = n.content.cloneNode(!0), s = y(o);
+  for (const { marker: i, index: r } of s)
+    x(i, e[r]);
+  const c = T(o);
+  for (const i of c)
+    E(i, e);
   return o;
 }
-function A(t) {
+function y(t) {
   const e = [];
-  return h(t, (n) => {
+  return _(t, (n) => {
     if (n.nodeType === 8) {
       const o = n.data;
-      if (o && o.startsWith(m)) {
-        const s = parseInt(o.slice(m.length), 10);
+      if (o && o.startsWith(u)) {
+        const s = parseInt(o.slice(u.length), 10);
         e.push({ marker: n, index: s });
       }
     }
   }), e;
 }
-function N(t) {
+function T(t) {
   const e = [];
-  return h(t, (n) => {
+  return _(t, (n) => {
     n.nodeType === 1 && e.push(n);
   }), e;
 }
-function h(t, e) {
+function _(t, e) {
   const n = t.childNodes;
   for (let o = 0; o < n.length; o++) {
     const s = n[o];
-    e(s), h(s, e);
+    e(s), _(s, e);
   }
 }
-function b(t, e) {
+function x(t, e) {
   const n = t.parentNode;
   if (n)
-    if (l(e)) {
+    if (p(e)) {
       const o = document.createTextNode("");
       n.replaceChild(o, t), d(() => {
         o.data = String(e.value ?? "");
@@ -55,25 +55,31 @@ function b(t, e) {
     } else if (typeof e == "function") {
       const o = document.createComment("");
       n.replaceChild(o, t);
-      let s = [];
+      let s = [], c = [];
       d(() => {
-        var a;
+        var g;
+        for (const l of c) l();
+        c = [];
+        const i = [], r = b();
+        A(i);
         const f = e();
-        for (const c of s) (a = c.parentNode) == null || a.removeChild(c);
+        A(r), c = i;
+        for (const l of s) (g = l.parentNode) == null || g.removeChild(l);
         s = [];
-        const r = p(f), i = o.parentNode;
-        for (const c of r)
-          i.insertBefore(c, o), s.push(c);
+        const a = h(f), m = o.parentNode;
+        if (m)
+          for (const l of a)
+            m.insertBefore(l, o), s.push(l);
       });
-    } else if (_(e))
+    } else if (C(e))
       n.replaceChild(e, t);
     else if (e instanceof Node)
       n.replaceChild(e, t);
     else if (Array.isArray(e)) {
       const o = document.createDocumentFragment();
       for (const s of e) {
-        const f = p(s);
-        for (const r of f) o.appendChild(r);
+        const c = h(s);
+        for (const i of c) o.appendChild(i);
       }
       n.replaceChild(o, t);
     } else {
@@ -81,88 +87,88 @@ function b(t, e) {
       n.replaceChild(o, t);
     }
 }
-function y(t, e) {
+function E(t, e) {
   const n = [];
   for (const o of Array.from(t.attributes)) {
-    const s = o.name, f = o.value;
+    const s = o.name, c = o.value;
     if (s.startsWith("@")) {
-      const i = s.slice(1), a = f.match(/__t4_(\d+)__/);
-      if (a) {
-        const c = e[parseInt(a[1], 10)];
-        typeof c == "function" && t.addEventListener(i, c);
+      const r = s.slice(1), f = c.match(/__t4_(\d+)__/);
+      if (f) {
+        const a = e[parseInt(f[1], 10)];
+        typeof a == "function" && t.addEventListener(r, a);
       }
       n.push(s);
       continue;
     }
     if (s.startsWith("?")) {
-      const i = s.slice(1), a = f.match(/__t4_(\d+)__/);
-      if (a) {
-        const c = e[parseInt(a[1], 10)];
-        if (l(c)) {
-          const g = c;
+      const r = s.slice(1), f = c.match(/__t4_(\d+)__/);
+      if (f) {
+        const a = e[parseInt(f[1], 10)];
+        if (p(a)) {
+          const m = a;
           d(() => {
-            g.value ? t.setAttribute(i, "") : t.removeAttribute(i);
+            m.value ? t.setAttribute(r, "") : t.removeAttribute(r);
           });
         } else
-          c && t.setAttribute(i, "");
+          a && t.setAttribute(r, "");
       }
       n.push(s);
       continue;
     }
     if (s.startsWith(".")) {
-      const i = s.slice(1), a = f.match(/__t4_(\d+)__/);
-      if (a) {
-        const c = e[parseInt(a[1], 10)];
-        l(c) ? d(() => {
-          t[i] = c.value;
-        }) : t[i] = c;
+      const r = s.slice(1), f = c.match(/__t4_(\d+)__/);
+      if (f) {
+        const a = e[parseInt(f[1], 10)];
+        p(a) ? d(() => {
+          t[r] = a.value;
+        }) : t[r] = a;
       }
       n.push(s);
       continue;
     }
-    const r = f.match(/__t4_(\d+)__/);
-    if (r) {
-      const i = e[parseInt(r[1], 10)];
-      if (l(i)) {
-        const a = i;
+    const i = c.match(/__t4_(\d+)__/);
+    if (i) {
+      const r = e[parseInt(i[1], 10)];
+      if (p(r)) {
+        const f = r;
         d(() => {
-          t.setAttribute(s, String(a.value ?? ""));
+          t.setAttribute(s, String(f.value ?? ""));
         });
-      } else typeof i == "function" ? d(() => {
-        t.setAttribute(s, String(i() ?? ""));
-      }) : t.setAttribute(s, String(i ?? ""));
+      } else typeof r == "function" ? d(() => {
+        t.setAttribute(s, String(r() ?? ""));
+      }) : t.setAttribute(s, String(r ?? ""));
     }
   }
   for (const o of n) t.removeAttribute(o);
 }
-function p(t) {
+function h(t) {
   if (t == null || t === !1) return [];
-  if (_(t)) return Array.from(t.childNodes);
+  if (C(t)) return Array.from(t.childNodes);
   if (t instanceof Node) return [t];
   if (Array.isArray(t)) {
     const e = [];
-    for (const n of t) e.push(...p(n));
+    for (const n of t) e.push(...h(n));
     return e;
   }
   return [document.createTextNode(String(t))];
 }
-function _(t) {
+function C(t) {
   return t != null && typeof t == "object" && t.nodeType === 11;
 }
-function T(t) {
+function S(t) {
   let e = !1, n = !1, o = !1;
   for (let s = 0; s < t.length; s++) {
-    const f = t[s];
-    f === "<" && !e && !n && (o = !0), f === ">" && !e && !n && (o = !1), o && (f === '"' && !e && (n = !n), f === "'" && !n && (e = !e));
+    const c = t[s];
+    c === "<" && !e && !n && (o = !0), c === ">" && !e && !n && (o = !1), o && (c === '"' && !e && (n = !n), c === "'" && !n && (e = !e));
   }
   return o;
 }
 export {
-  D as Tina4Element,
-  I as batch,
-  W as computed,
+  F as Tina4Element,
+  w as batch,
+  M as computed,
   d as effect,
-  x as html,
-  l as isSignal,
-  V as signal
+  W as html,
+  p as isSignal,
+  R as signal
 };

package/dist/debug.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const C=require("./signal.cjs.js"),A=require("./component.cjs.js"),_=require("./index.cjs.js"),m=require("./api.cjs.js"),d=[],p={add(t,o){const e=t._debugInfo;d.push({ref:new WeakRef(t),label:o,createdAt:(e==null?void 0:e.createdAt)??Date.now(),updateCount:0,subs:new WeakRef((e==null?void 0:e.subs)??new Set)})},onUpdate(t){for(const o of d)if(o.ref.deref()===t){o.updateCount++;break}},getAll(){var o;const t=[];for(let e=d.length-1;e>=0;e--){const n=d[e],r=n.ref.deref();if(!r){d.splice(e,1);continue}const s=n.subs.deref();t.push({label:n.label,value:r.peek(),subscriberCount:s?s.size:0,updateCount:((o=r._debugInfo)==null?void 0:o.updateCount)??n.updateCount,alive:!0})}return t},get count(){return d.length}},a=[],b={onMount(t){a.push({ref:new WeakRef(t),tagName:t.tagName.toLowerCase(),mountedAt:Date.now()})},onUnmount(t){const o=a.findIndex(e=>e.ref.deref()===t);o>=0&&a.splice(o,1)},getAll(){const t=[];for(let o=a.length-1;o>=0;o--){const e=a[o],n=e.ref.deref();if(!n||!n.isConnected){a.splice(o,1);continue}const r={},s=n.constructor;if(s.props)for(const i of Object.keys(s.props))try{r[i]=n.prop(i).peek()}catch{}t.push({tagName:e.tagName,props:r,alive:!0})}return t},get count(){return a.length}},l=[],D=50,f={onNavigate(t){l.unshift({path:t.path,pattern:t.pattern,params:t.params,durationMs:t.durationMs,timestamp:Date.now()}),l.length>D&&l.pop()},getHistory(){return l},get count(){return l.length}};let R=0;const c=[],g=new Map,M=100,h={onRequest(t){var r;const o=++R,e={id:o,method:t.method??"GET",url:"",hasAuth:!!((r=t.headers)!=null&&r.Authorization),timestamp:Date.now(),pending:!0},n=String(o);g.set(n,e),c.unshift(e),c.length>M&&c.pop()},onResponse(t){for(const[o,e]of g)if(e.pending){e.status=t.status,e.durationMs=Date.now()-e.timestamp,e.pending=!1,t.ok||(e.error=`HTTP ${t.status}`),g.delete(o);break}},getLog(){return c},get count(){return c.length}},x=`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const R=require("./signal.cjs.js"),A=require("./component.cjs.js"),x=require("./index.cjs.js"),y=require("./api.cjs.js"),l=[],b={add(t,o){const e=t._debugInfo;l.push({ref:new WeakRef(t),label:o,createdAt:(e==null?void 0:e.createdAt)??Date.now(),updateCount:0,subs:new WeakRef((e==null?void 0:e.subs)??new Set)})},onUpdate(t){for(const o of l)if(o.ref.deref()===t){o.updateCount++;break}},getAll(){var o;const t=[];for(let e=l.length-1;e>=0;e--){const n=l[e],r=n.ref.deref();if(!r){l.splice(e,1);continue}const s=n.subs.deref();t.push({label:n.label,value:r.peek(),subscriberCount:s?s.size:0,updateCount:((o=r._debugInfo)==null?void 0:o.updateCount)??n.updateCount,alive:!0})}return t},get count(){return l.length}},a=[],h={onMount(t){a.push({ref:new WeakRef(t),tagName:t.tagName.toLowerCase(),mountedAt:Date.now()})},onUnmount(t){const o=a.findIndex(e=>e.ref.deref()===t);o>=0&&a.splice(o,1)},getAll(){const t=[];for(let o=a.length-1;o>=0;o--){const e=a[o],n=e.ref.deref();if(!n||!n.isConnected){a.splice(o,1);continue}const r={},s=n.constructor;if(s.props)for(const i of Object.keys(s.props))try{r[i]=n.prop(i).peek()}catch{}t.push({tagName:e.tagName,props:r,alive:!0})}return t},get count(){return a.length}},d=[],D=50;let f=null;const p={setGetRoutes(t){f=t},getRegisteredRoutes(){return f?f():[]},onNavigate(t){d.unshift({path:t.path,pattern:t.pattern,params:t.params,durationMs:t.durationMs,timestamp:Date.now()}),d.length>D&&d.pop()},getHistory(){return d},get count(){return d.length}};let M=0;const c=[],m=new Map,E=100,g={onRequest(t){var r;const o=++M,e={id:o,method:t.method??"GET",url:"",hasAuth:!!((r=t.headers)!=null&&r.Authorization),timestamp:Date.now(),pending:!0},n=String(o);m.set(n,e),c.unshift(e),c.length>E&&c.pop()},onResponse(t){for(const[o,e]of m)if(e.pending){e.status=t.status,e.durationMs=Date.now()-e.timestamp,e.pending=!1,t.ok||(e.error=`HTTP ${t.status}`),m.delete(o);break}},getLog(){return c},get count(){return c.length}},w=`
 :host {
   all: initial;
   position: fixed;
@@ -204,36 +204,36 @@ tr:hover td { background: rgba(255,255,255,0.02); }
   border-radius: 50%;
   background: #66bb6a;
 }
-`;function E(t){if(t==null)return{text:String(t),cls:"val-null"};if(typeof t=="string")return{text:`"${t.length>30?t.slice(0,30)+"...":t}"`,cls:"val-string"};if(typeof t=="number")return{text:String(t),cls:"val-number"};if(typeof t=="boolean")return{text:String(t),cls:"val-boolean"};if(Array.isArray(t))return{text:`Array(${t.length})`,cls:"val-object"};if(typeof t=="object")try{return{text:JSON.stringify(t).slice(0,40),cls:"val-object"}}catch{}return{text:String(t),cls:"val-object"}}function L(){const t=p.getAll();if(t.length===0)return'<div class="t4-empty">No signals tracked yet.<br>Signals created after debug is enabled will appear here.</div>';let o="";for(let e=0;e<t.length;e++){const n=t[e],{text:r,cls:s}=E(n.value);o+=`<tr>
+`;function L(t){if(t==null)return{text:String(t),cls:"val-null"};if(typeof t=="string")return{text:`"${t.length>30?t.slice(0,30)+"...":t}"`,cls:"val-string"};if(typeof t=="number")return{text:String(t),cls:"val-number"};if(typeof t=="boolean")return{text:String(t),cls:"val-boolean"};if(Array.isArray(t))return{text:`Array(${t.length})`,cls:"val-object"};if(typeof t=="object")try{return{text:JSON.stringify(t).slice(0,40),cls:"val-object"}}catch{}return{text:String(t),cls:"val-object"}}function j(){const t=b.getAll();if(t.length===0)return'<div class="t4-empty">No signals tracked yet.<br>Signals created after debug is enabled will appear here.</div>';let o="";for(let e=0;e<t.length;e++){const n=t[e],{text:r,cls:s}=L(n.value);o+=`<tr>
       <td>${n.label||`signal_${e}`}</td>
-      <td><span class="${s}">${j(r)}</span></td>
+      <td><span class="${s}">${H(r)}</span></td>
       <td>${n.subscriberCount}</td>
       <td>${n.updateCount}</td>
     </tr>`}return`<table>
     <thead><tr><th>Label</th><th>Value</th><th>Subs</th><th>Updates</th></tr></thead>
     <tbody>${o}</tbody>
-  </table>`}function j(t){return t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function H(){const t=b.getAll();if(t.length===0)return'<div class="t4-empty">No Tina4Elements mounted.<br>Custom elements extending Tina4Element will appear here.</div>';let o="";for(const e of t){const n=Object.keys(e.props).length>0?Object.entries(e.props).map(([r,s])=>`${r}=${JSON.stringify(s)??"null"}`).join(", "):"—";o+=`<tr>
-      <td>&lt;${y(e.tagName)}&gt;</td>
-      <td>${y(n.length>60?n.slice(0,60)+"...":n)}</td>
+  </table>`}function H(t){return t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function z(){const t=h.getAll();if(t.length===0)return'<div class="t4-empty">No Tina4Elements mounted.<br>Custom elements extending Tina4Element will appear here.</div>';let o="";for(const e of t){const n=Object.keys(e.props).length>0?Object.entries(e.props).map(([r,s])=>`${r}=${JSON.stringify(s)??"null"}`).join(", "):"—";o+=`<tr>
+      <td>&lt;${v(e.tagName)}&gt;</td>
+      <td>${v(n.length>60?n.slice(0,60)+"...":n)}</td>
     </tr>`}return`<table>
     <thead><tr><th>Element</th><th>Props</th></tr></thead>
     <tbody>${o}</tbody>
-  </table>`}function y(t){return t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function z(t){const o=t<1?"<1ms":`${Math.round(t)}ms`,e=t<5?"duration fast":t<50?"duration":t<200?"duration slow":"duration very-slow";return{text:o,cls:e}}function N(t){return new Date(t).toLocaleTimeString("en-US",{hour12:!1,hour:"2-digit",minute:"2-digit",second:"2-digit"})}function P(){const t=_._getRoutes(),o=f.getHistory();let e="";if(t.length>0){let n="";for(const r of t)n+=`<tr>
-        <td><span class="route-pattern">${w(r.pattern)}</span></td>
+  </table>`}function v(t){return t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function N(t){const o=t<1?"<1ms":`${Math.round(t)}ms`,e=t<5?"duration fast":t<50?"duration":t<200?"duration slow":"duration very-slow";return{text:o,cls:e}}function P(t){return new Date(t).toLocaleTimeString("en-US",{hour12:!1,hour:"2-digit",minute:"2-digit",second:"2-digit"})}function I(){const t=p.getRegisteredRoutes(),o=p.getHistory();let e="";if(t.length>0){let n="";for(const r of t)n+=`<tr>
+        <td><span class="route-pattern">${_(r.pattern)}</span></td>
         <td>${r.hasGuard?"Yes":"—"}</td>
       </tr>`;e+=`<table>
       <thead><tr><th>Pattern</th><th>Guard</th></tr></thead>
       <tbody>${n}</tbody>
-    </table>`}if(o.length>0){e+='<div style="margin-top:8px;padding-top:8px;border-top:1px solid #333;">';let n="";for(const r of o){const{text:s,cls:i}=z(r.durationMs),k=Object.keys(r.params).length>0?Object.entries(r.params).map(([T,S])=>`<span class="route-param">${T}=${S}</span>`).join(" "):"";n+=`<tr>
-        <td>${N(r.timestamp)}</td>
-        <td>${w(r.path)}</td>
-        <td>${k||"—"}</td>
+    </table>`}if(o.length>0){e+='<div style="margin-top:8px;padding-top:8px;border-top:1px solid #333;">';let n="";for(const r of o){const{text:s,cls:i}=N(r.durationMs),T=Object.keys(r.params).length>0?Object.entries(r.params).map(([S,C])=>`<span class="route-param">${S}=${C}</span>`).join(" "):"";n+=`<tr>
+        <td>${P(r.timestamp)}</td>
+        <td>${_(r.path)}</td>
+        <td>${T||"—"}</td>
         <td><span class="${i}">${s}</span></td>
       </tr>`}e+=`<table>
       <thead><tr><th>Time</th><th>Path</th><th>Params</th><th>Duration</th></tr></thead>
       <tbody>${n}</tbody>
-    </table></div>`}else t.length===0&&(e='<div class="t4-empty">No routes registered yet.</div>');return e}function w(t){return t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function I(t){if(t===void 0)return{text:"...",cls:"status-pending"};const o=t<1?"<1ms":`${Math.round(t)}ms`,e=t<100?"duration fast":t<500?"duration":t<2e3?"duration slow":"duration very-slow";return{text:o,cls:e}}function q(t,o){return o?{text:"pending",cls:"status-pending"}:t?t>=200&&t<300?{text:String(t),cls:"status-ok"}:{text:String(t),cls:"status-err"}:{text:"—",cls:""}}function O(t){return new Date(t).toLocaleTimeString("en-US",{hour12:!1,hour:"2-digit",minute:"2-digit",second:"2-digit"})}function U(){const t=h.getLog();if(t.length===0)return'<div class="t4-empty">No API calls yet.<br>Requests made via api.get/post/put/patch/delete will appear here.</div>';let o="";for(const e of t){const{text:n,cls:r}=q(e.status,e.pending),{text:s,cls:i}=I(e.durationMs);o+=`<tr>
-      <td>${O(e.timestamp)}</td>
+    </table></div>`}else t.length===0&&(e='<div class="t4-empty">No routes registered yet.</div>');return e}function _(t){return t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function q(t){if(t===void 0)return{text:"...",cls:"status-pending"};const o=t<1?"<1ms":`${Math.round(t)}ms`,e=t<100?"duration fast":t<500?"duration":t<2e3?"duration slow":"duration very-slow";return{text:o,cls:e}}function O(t,o){return o?{text:"pending",cls:"status-pending"}:t?t>=200&&t<300?{text:String(t),cls:"status-ok"}:{text:String(t),cls:"status-err"}:{text:"—",cls:""}}function U(t){return new Date(t).toLocaleTimeString("en-US",{hour12:!1,hour:"2-digit",minute:"2-digit",second:"2-digit"})}function G(){const t=g.getLog();if(t.length===0)return'<div class="t4-empty">No API calls yet.<br>Requests made via api.get/post/put/patch/delete will appear here.</div>';let o="";for(const e of t){const{text:n,cls:r}=O(e.status,e.pending),{text:s,cls:i}=q(e.durationMs);o+=`<tr>
+      <td>${U(e.timestamp)}</td>
       <td><strong>${e.method}</strong></td>
       <td>${B(e.url||"(url)")}</td>
       <td><span class="${r}">${n}</span></td>
@@ -242,8 +242,8 @@ tr:hover td { background: rgba(255,255,255,0.02); }
     </tr>`}return`<table>
     <thead><tr><th>Time</th><th>Method</th><th>URL</th><th>Status</th><th>Duration</th><th>Auth</th></tr></thead>
     <tbody>${o}</tbody>
-  </table>`}function B(t){return t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}class G extends HTMLElement{constructor(){super(),this._visible=!0,this._activeTab="signals",this._refreshTimer=null,this._shadow=this.attachShadow({mode:"open"})}connectedCallback(){this._render(),this._startAutoRefresh()}disconnectedCallback(){this._stopAutoRefresh()}toggle(){this._visible=!this._visible,this._render()}show(){this._visible=!0,this._render()}hide(){this._visible=!1,this._render()}_startAutoRefresh(){this._refreshTimer=window.setInterval(()=>{this._visible&&this._renderBody()},1e3)}_stopAutoRefresh(){this._refreshTimer!==null&&(clearInterval(this._refreshTimer),this._refreshTimer=null)}_switchTab(o){this._activeTab=o,this._render()}_getTabContent(){switch(this._activeTab){case"signals":return L();case"components":return H();case"routes":return P();case"api":return U()}}_renderBody(){const o=this._shadow.querySelector(".t4-body");o&&(o.innerHTML=this._getTabContent()),this._updateTabCounts()}_updateTabCounts(){const o={signals:p.count,components:b.count,routes:f.count,api:h.count};for(const[e,n]of Object.entries(o)){const r=this._shadow.querySelector(`[data-tab-count="${e}"]`);r&&(r.textContent=n>0?`(${n})`:"")}}_render(){var n,r;const o=[{id:"signals",label:"Signals"},{id:"components",label:"Components"},{id:"routes",label:"Routes"},{id:"api",label:"API"}];if(!this._visible){this._shadow.innerHTML=`
-        <style>${x}</style>
+  </table>`}function B(t){return t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}class F extends HTMLElement{constructor(){super(),this._visible=!0,this._activeTab="signals",this._refreshTimer=null,this._shadow=this.attachShadow({mode:"open"})}connectedCallback(){this._render(),this._startAutoRefresh()}disconnectedCallback(){this._stopAutoRefresh()}toggle(){this._visible=!this._visible,this._render()}show(){this._visible=!0,this._render()}hide(){this._visible=!1,this._render()}_startAutoRefresh(){this._refreshTimer=window.setInterval(()=>{this._visible&&this._renderBody()},1e3)}_stopAutoRefresh(){this._refreshTimer!==null&&(clearInterval(this._refreshTimer),this._refreshTimer=null)}_switchTab(o){this._activeTab=o,this._render()}_getTabContent(){switch(this._activeTab){case"signals":return j();case"components":return z();case"routes":return I();case"api":return G()}}_renderBody(){const o=this._shadow.querySelector(".t4-body");o&&(o.innerHTML=this._getTabContent()),this._updateTabCounts()}_updateTabCounts(){const o={signals:b.count,components:h.count,routes:p.count,api:g.count};for(const[e,n]of Object.entries(o)){const r=this._shadow.querySelector(`[data-tab-count="${e}"]`);r&&(r.textContent=n>0?`(${n})`:"")}}_render(){var n,r;const o=[{id:"signals",label:"Signals"},{id:"components",label:"Components"},{id:"routes",label:"Routes"},{id:"api",label:"API"}];if(!this._visible){this._shadow.innerHTML=`
+        <style>${w}</style>
         <div class="t4-mini" id="t4-mini">
           <span class="t4-mini-dot"></span>
           T4 Debug
@@ -251,7 +251,7 @@ tr:hover td { background: rgba(255,255,255,0.02); }
       `,(n=this._shadow.getElementById("t4-mini"))==null||n.addEventListener("click",()=>this.show());return}const e=o.map(s=>`<button class="t4-tab${this._activeTab===s.id?" active":""}" data-tab="${s.id}">
         ${s.label}<span class="t4-tab-count" data-tab-count="${s.id}"></span>
       </button>`).join("");this._shadow.innerHTML=`
-      <style>${x}</style>
+      <style>${w}</style>
       <div class="t4-debug">
         <div class="t4-header">
           <div>
@@ -265,4 +265,4 @@ tr:hover td { background: rgba(255,255,255,0.02); }
         <div class="t4-tabs">${e}</div>
         <div class="t4-body">${this._getTabContent()}</div>
       </div>
-    `,(r=this._shadow.getElementById("t4-close"))==null||r.addEventListener("click",()=>this.hide());for(const s of this._shadow.querySelectorAll(".t4-tab"))s.addEventListener("click",()=>{this._switchTab(s.dataset.tab)});this._updateTabCounts()}}function V(){typeof customElements<"u"&&!customElements.get("tina4-debug")&&customElements.define("tina4-debug",G)}let u=null,v=!1;function $(){v||(v=!0,C.__setDebugSignalHooks((t,o)=>p.add(t,o),t=>p.onUpdate(t)),A.__setDebugComponentHooks(t=>b.onMount(t),t=>b.onUnmount(t)),_.router.on("change",t=>{f.onNavigate(t)}),m.api.intercept("request",t=>(h.onRequest(t),t)),m.api.intercept("response",t=>(h.onResponse(t),t)),typeof document<"u"&&(V(),u=document.createElement("tina4-debug"),document.body.appendChild(u),document.addEventListener("keydown",t=>{t.ctrlKey&&t.shiftKey&&t.key==="D"&&(t.preventDefault(),u==null||u.toggle())})),console.log("%c[tina4] %cDebug overlay enabled %c(Ctrl+Shift+D to toggle)","color:#00d4ff;font-weight:bold","color:#e0e0e0","color:#888"))}$();exports.enableDebug=$;
+    `,(r=this._shadow.getElementById("t4-close"))==null||r.addEventListener("click",()=>this.hide());for(const s of this._shadow.querySelectorAll(".t4-tab"))s.addEventListener("click",()=>{this._switchTab(s.dataset.tab)});this._updateTabCounts()}}function V(){typeof customElements<"u"&&!customElements.get("tina4-debug")&&customElements.define("tina4-debug",F)}let u=null,$=!1;function k(){$||($=!0,R.__setDebugSignalHooks((t,o)=>b.add(t,o),t=>b.onUpdate(t)),A.__setDebugComponentHooks(t=>h.onMount(t),t=>h.onUnmount(t)),p.setGetRoutes(x._getRoutes),x.router.on("change",t=>{p.onNavigate(t)}),y.api.intercept("request",t=>(g.onRequest(t),t)),y.api.intercept("response",t=>(g.onResponse(t),t)),typeof document<"u"&&(V(),u=document.createElement("tina4-debug"),document.body.appendChild(u),document.addEventListener("keydown",t=>{t.ctrlKey&&t.shiftKey&&t.key==="D"&&(t.preventDefault(),u==null||u.toggle())})),console.log("%c[tina4] %cDebug overlay enabled %c(Ctrl+Shift+D to toggle)","color:#00d4ff;font-weight:bold","color:#e0e0e0","color:#888"))}k();exports.enableDebug=k;

package/dist/debug.es.js

@@ -1,8 +1,8 @@
-import { _ as T } from "./signal.es.js";
-import { _ as C } from "./component.es.js";
-import { _ as S, a as A } from "./index.es.js";
-import { api as m } from "./api.es.js";
-const d = [], p = {
+import { _ as C } from "./signal.es.js";
+import { _ as S } from "./component.es.js";
+import { _ as R, a as A } from "./index.es.js";
+import { api as x } from "./api.es.js";
+const d = [], b = {
   add(t, o) {
     const e = t._debugInfo;
     d.push({
@@ -43,7 +43,7 @@ const d = [], p = {
   get count() {
     return d.length;
   }
-}, a = [], b = {
+}, a = [], h = {
   onMount(t) {
     a.push({
       ref: new WeakRef(t),
@@ -77,7 +77,16 @@ const d = [], p = {
   get count() {
     return a.length;
   }
-}, l = [], D = 50, f = {
+}, l = [], D = 50;
+let f = null;
+const p = {
+  /** Set the function that reads registered routes (avoids direct import from router). */
+  setGetRoutes(t) {
+    f = t;
+  },
+  getRegisteredRoutes() {
+    return f ? f() : [];
+  },
   onNavigate(t) {
     l.unshift({
       path: t.path,
@@ -94,11 +103,11 @@ const d = [], p = {
     return l.length;
   }
 };
-let R = 0;
-const c = [], g = /* @__PURE__ */ new Map(), E = 100, h = {
+let E = 0;
+const c = [], m = /* @__PURE__ */ new Map(), M = 100, g = {
   onRequest(t) {
     var r;
-    const o = ++R, e = {
+    const o = ++E, e = {
       id: o,
       method: t.method ?? "GET",
       url: "",
@@ -107,12 +116,12 @@ const c = [], g = /* @__PURE__ */ new Map(), E = 100, h = {
       timestamp: Date.now(),
       pending: !0
     }, n = String(o);
-    g.set(n, e), c.unshift(e), c.length > E && c.pop();
+    m.set(n, e), c.unshift(e), c.length > M && c.pop();
   },
   onResponse(t) {
-    for (const [o, e] of g)
+    for (const [o, e] of m)
       if (e.pending) {
-        e.status = t.status, e.durationMs = Date.now() - e.timestamp, e.pending = !1, t.ok || (e.error = `HTTP ${t.status}`), g.delete(o);
+        e.status = t.status, e.durationMs = Date.now() - e.timestamp, e.pending = !1, t.ok || (e.error = `HTTP ${t.status}`), m.delete(o);
         break;
       }
   },
@@ -122,7 +131,7 @@ const c = [], g = /* @__PURE__ */ new Map(), E = 100, h = {
   get count() {
     return c.length;
   }
-}, x = (
+}, y = (
   /* css */
   `
 :host {
@@ -332,7 +341,7 @@ tr:hover td { background: rgba(255,255,255,0.02); }
 }
 `
 );
-function M(t) {
+function L(t) {
   if (t == null) return { text: String(t), cls: "val-null" };
   if (typeof t == "string") return { text: `"${t.length > 30 ? t.slice(0, 30) + "..." : t}"`, cls: "val-string" };
   if (typeof t == "number") return { text: String(t), cls: "val-number" };
@@ -345,16 +354,16 @@ function M(t) {
     }
   return { text: String(t), cls: "val-object" };
 }
-function L() {
-  const t = p.getAll();
+function H() {
+  const t = b.getAll();
   if (t.length === 0)
     return '<div class="t4-empty">No signals tracked yet.<br>Signals created after debug is enabled will appear here.</div>';
   let o = "";
   for (let e = 0; e < t.length; e++) {
-    const n = t[e], { text: r, cls: s } = M(n.value);
+    const n = t[e], { text: r, cls: s } = L(n.value);
     o += `<tr>
       <td>${n.label || `signal_${e}`}</td>
-      <td><span class="${s}">${H(r)}</span></td>
+      <td><span class="${s}">${j(r)}</span></td>
       <td>${n.subscriberCount}</td>
       <td>${n.updateCount}</td>
     </tr>`;
@@ -364,19 +373,19 @@ function L() {
     <tbody>${o}</tbody>
   </table>`;
 }
-function H(t) {
+function j(t) {
   return t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
-function j() {
-  const t = b.getAll();
+function z() {
+  const t = h.getAll();
   if (t.length === 0)
     return '<div class="t4-empty">No Tina4Elements mounted.<br>Custom elements extending Tina4Element will appear here.</div>';
   let o = "";
   for (const e of t) {
     const n = Object.keys(e.props).length > 0 ? Object.entries(e.props).map(([r, s]) => `${r}=${JSON.stringify(s) ?? "null"}`).join(", ") : "—";
     o += `<tr>
-      <td>&lt;${y(e.tagName)}&gt;</td>
-      <td>${y(n.length > 60 ? n.slice(0, 60) + "..." : n)}</td>
+      <td>&lt;${w(e.tagName)}&gt;</td>
+      <td>${w(n.length > 60 ? n.slice(0, 60) + "..." : n)}</td>
     </tr>`;
   }
   return `<table>
@@ -384,24 +393,24 @@ function j() {
     <tbody>${o}</tbody>
   </table>`;
 }
-function y(t) {
+function w(t) {
   return t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
-function z(t) {
+function N(t) {
   const o = t < 1 ? "<1ms" : `${Math.round(t)}ms`, e = t < 5 ? "duration fast" : t < 50 ? "duration" : t < 200 ? "duration slow" : "duration very-slow";
   return { text: o, cls: e };
 }
-function N(t) {
+function I(t) {
   return new Date(t).toLocaleTimeString("en-US", { hour12: !1, hour: "2-digit", minute: "2-digit", second: "2-digit" });
 }
-function I() {
-  const t = S(), o = f.getHistory();
+function P() {
+  const t = p.getRegisteredRoutes(), o = p.getHistory();
   let e = "";
   if (t.length > 0) {
     let n = "";
     for (const r of t)
       n += `<tr>
-        <td><span class="route-pattern">${w(r.pattern)}</span></td>
+        <td><span class="route-pattern">${_(r.pattern)}</span></td>
         <td>${r.hasGuard ? "Yes" : "—"}</td>
       </tr>`;
     e += `<table>
@@ -413,11 +422,11 @@ function I() {
     e += '<div style="margin-top:8px;padding-top:8px;border-top:1px solid #333;">';
     let n = "";
     for (const r of o) {
-      const { text: s, cls: i } = z(r.durationMs), _ = Object.keys(r.params).length > 0 ? Object.entries(r.params).map(([$, k]) => `<span class="route-param">${$}=${k}</span>`).join(" ") : "";
+      const { text: s, cls: i } = N(r.durationMs), $ = Object.keys(r.params).length > 0 ? Object.entries(r.params).map(([k, T]) => `<span class="route-param">${k}=${T}</span>`).join(" ") : "";
       n += `<tr>
-        <td>${N(r.timestamp)}</td>
-        <td>${w(r.path)}</td>
-        <td>${_ || "—"}</td>
+        <td>${I(r.timestamp)}</td>
+        <td>${_(r.path)}</td>
+        <td>${$ || "—"}</td>
         <td><span class="${i}">${s}</span></td>
       </tr>`;
     }
@@ -428,29 +437,29 @@ function I() {
   } else t.length === 0 && (e = '<div class="t4-empty">No routes registered yet.</div>');
   return e;
 }
-function w(t) {
+function _(t) {
   return t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
-function P(t) {
+function O(t) {
   if (t === void 0) return { text: "...", cls: "status-pending" };
   const o = t < 1 ? "<1ms" : `${Math.round(t)}ms`, e = t < 100 ? "duration fast" : t < 500 ? "duration" : t < 2e3 ? "duration slow" : "duration very-slow";
   return { text: o, cls: e };
 }
-function O(t, o) {
+function U(t, o) {
   return o ? { text: "pending", cls: "status-pending" } : t ? t >= 200 && t < 300 ? { text: String(t), cls: "status-ok" } : { text: String(t), cls: "status-err" } : { text: "—", cls: "" };
 }
-function U(t) {
+function q(t) {
   return new Date(t).toLocaleTimeString("en-US", { hour12: !1, hour: "2-digit", minute: "2-digit", second: "2-digit" });
 }
-function q() {
-  const t = h.getLog();
+function G() {
+  const t = g.getLog();
   if (t.length === 0)
     return '<div class="t4-empty">No API calls yet.<br>Requests made via api.get/post/put/patch/delete will appear here.</div>';
   let o = "";
   for (const e of t) {
-    const { text: n, cls: r } = O(e.status, e.pending), { text: s, cls: i } = P(e.durationMs);
+    const { text: n, cls: r } = U(e.status, e.pending), { text: s, cls: i } = O(e.durationMs);
     o += `<tr>
-      <td>${U(e.timestamp)}</td>
+      <td>${q(e.timestamp)}</td>
       <td><strong>${e.method}</strong></td>
       <td>${B(e.url || "(url)")}</td>
       <td><span class="${r}">${n}</span></td>
@@ -466,7 +475,7 @@ function q() {
 function B(t) {
   return t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
-class G extends HTMLElement {
+class F extends HTMLElement {
   constructor() {
     super(), this._visible = !0, this._activeTab = "signals", this._refreshTimer = null, this._shadow = this.attachShadow({ mode: "open" });
   }
@@ -499,13 +508,13 @@ class G extends HTMLElement {
   _getTabContent() {
     switch (this._activeTab) {
       case "signals":
-        return L();
+        return H();
       case "components":
-        return j();
+        return z();
       case "routes":
-        return I();
+        return P();
       case "api":
-        return q();
+        return G();
     }
   }
   _renderBody() {
@@ -514,10 +523,10 @@ class G extends HTMLElement {
   }
   _updateTabCounts() {
     const o = {
-      signals: p.count,
-      components: b.count,
-      routes: f.count,
-      api: h.count
+      signals: b.count,
+      components: h.count,
+      routes: p.count,
+      api: g.count
     };
     for (const [e, n] of Object.entries(o)) {
       const r = this._shadow.querySelector(`[data-tab-count="${e}"]`);
@@ -534,7 +543,7 @@ class G extends HTMLElement {
     ];
     if (!this._visible) {
       this._shadow.innerHTML = `
-        <style>${x}</style>
+        <style>${y}</style>
         <div class="t4-mini" id="t4-mini">
           <span class="t4-mini-dot"></span>
           T4 Debug
@@ -548,7 +557,7 @@ class G extends HTMLElement {
       </button>`
     ).join("");
     this._shadow.innerHTML = `
-      <style>${x}</style>
+      <style>${y}</style>
       <div class="t4-debug">
         <div class="t4-header">
           <div>
@@ -571,19 +580,19 @@ class G extends HTMLElement {
   }
 }
 function V() {
-  typeof customElements < "u" && !customElements.get("tina4-debug") && customElements.define("tina4-debug", G);
+  typeof customElements < "u" && !customElements.get("tina4-debug") && customElements.define("tina4-debug", F);
 }
 let u = null, v = !1;
 function W() {
-  v || (v = !0, T(
-    (t, o) => p.add(t, o),
-    (t) => p.onUpdate(t)
-  ), C(
-    (t) => b.onMount(t),
-    (t) => b.onUnmount(t)
-  ), A.on("change", (t) => {
-    f.onNavigate(t);
-  }), m.intercept("request", (t) => (h.onRequest(t), t)), m.intercept("response", (t) => (h.onResponse(t), t)), typeof document < "u" && (V(), u = document.createElement("tina4-debug"), document.body.appendChild(u), document.addEventListener("keydown", (t) => {
+  v || (v = !0, C(
+    (t, o) => b.add(t, o),
+    (t) => b.onUpdate(t)
+  ), S(
+    (t) => h.onMount(t),
+    (t) => h.onUnmount(t)
+  ), p.setGetRoutes(R), A.on("change", (t) => {
+    p.onNavigate(t);
+  }), x.intercept("request", (t) => (g.onRequest(t), t)), x.intercept("response", (t) => (g.onResponse(t), t)), typeof document < "u" && (V(), u = document.createElement("tina4-debug"), document.body.appendChild(u), document.addEventListener("keydown", (t) => {
     t.ctrlKey && t.shiftKey && t.key === "D" && (t.preventDefault(), u == null || u.toggle());
   })), console.log(
     "%c[tina4] %cDebug overlay enabled %c(Ctrl+Shift+D to toggle)",

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { a as y } from "./signal.es.js";
+import { d as y } from "./signal.es.js";
 let p = [], a = null, u = "history";
 const c = [];
 let l = [], w = 0;

package/dist/signal.cjs.js

@@ -1 +1 @@
-"use strict";let s=null,f=null;function p(e){f=e}let i=null,a=null;function S(e,t){i=e,a=t}let c=0;const d=new Set;function b(e,t){let n=e;const u=new Set,o={_t4:!0,get value(){return s&&u.add(s),n},set value(r){if(Object.is(r,n))return;const g=n;if(n=r,o._debugInfo&&o._debugInfo.updateCount++,a&&a(o,g,r),c>0)for(const l of u)d.add(l);else for(const l of[...u])l()},_subscribe(r){return u.add(r),()=>{u.delete(r)}},peek(){return n}};return i&&(o._debugInfo={label:t,createdAt:Date.now(),updateCount:0,subs:u},i(o,t)),o}function h(e){const t=b(void 0);return _(()=>{t.value=e()}),{_t4:!0,get value(){return t.value},set value(n){throw new Error("[tina4] computed signals are read-only")},_subscribe(n){return t._subscribe(n)},peek(){return t.peek()}}}function _(e){let t=!1;const n=()=>{if(t)return;const o=s;s=n;try{e()}finally{s=o}};n();const u=()=>{t=!0};return f&&f.push(u),u}function v(e){c++;try{e()}finally{if(c--,c===0){const t=[...d];d.clear();for(const n of t)n()}}}function y(e){return e!==null&&typeof e=="object"&&e._t4===!0}exports.__setDebugSignalHooks=S;exports._setEffectCollector=p;exports.batch=v;exports.computed=h;exports.effect=_;exports.isSignal=y;exports.signal=b;
+"use strict";let c=null,s=null,i=null;function C(t){i=t}function h(){return i}let d=null,_=null;function v(t,n){d=t,_=n}let f=0;const b=new Set;function g(t,n){let e=t;const o=new Set,r={_t4:!0,get value(){if(c&&(o.add(c),s)){const u=c;s.push(()=>o.delete(u))}return e},set value(u){if(Object.is(u,e))return;const a=e;if(e=u,r._debugInfo&&r._debugInfo.updateCount++,_&&_(r,a,u),f>0)for(const l of o)b.add(l);else for(const l of[...o])l()},_subscribe(u){return o.add(u),()=>{o.delete(u)}},peek(){return e}};return d&&(r._debugInfo={label:n,createdAt:Date.now(),updateCount:0,subs:o},d(r,n)),r}function S(t){const n=g(void 0);return p(()=>{n.value=t()}),{_t4:!0,get value(){return n.value},set value(e){throw new Error("[tina4] computed signals are read-only")},_subscribe(e){return n._subscribe(e)},peek(){return n.peek()}}}function p(t){let n=!1,e=[];const o=()=>{if(n)return;for(const l of e)l();e=[];const u=c,a=s;c=o,s=e;try{t()}finally{c=u,s=a}};o();const r=()=>{n=!0;for(const u of e)u();e=[]};return i&&i.push(r),r}function y(t){f++;try{t()}finally{if(f--,f===0){const n=[...b];b.clear();for(const e of n)e()}}}function E(t){return t!==null&&typeof t=="object"&&t._t4===!0}exports.__setDebugSignalHooks=v;exports._getEffectCollector=h;exports._setEffectCollector=C;exports.batch=y;exports.computed=S;exports.effect=p;exports.isSignal=E;exports.signal=g;

package/dist/signal.es.js

@@ -1,98 +1,110 @@
-let s = null, a = null;
-function g(e) {
-  a = e;
+let s = null, l = null, a = null;
+function v(t) {
+  a = t;
 }
-let f = null, i = null;
-function v(e, t) {
-  f = e, i = t;
+function C() {
+  return a;
 }
-let c = 0;
-const d = /* @__PURE__ */ new Set();
-function _(e, t) {
-  let n = e;
-  const u = /* @__PURE__ */ new Set(), r = {
+let d = null, b = null;
+function h(t, n) {
+  d = t, b = n;
+}
+let f = 0;
+const p = /* @__PURE__ */ new Set();
+function _(t, n) {
+  let e = t;
+  const o = /* @__PURE__ */ new Set(), r = {
     _t4: !0,
     get value() {
-      return s && u.add(s), n;
+      if (s && (o.add(s), l)) {
+        const u = s;
+        l.push(() => o.delete(u));
+      }
+      return e;
     },
-    set value(o) {
-      if (Object.is(o, n)) return;
-      const b = n;
-      if (n = o, r._debugInfo && r._debugInfo.updateCount++, i && i(r, b, o), c > 0)
-        for (const l of u) d.add(l);
+    set value(u) {
+      if (Object.is(u, e)) return;
+      const i = e;
+      if (e = u, r._debugInfo && r._debugInfo.updateCount++, b && b(r, i, u), f > 0)
+        for (const c of o) p.add(c);
       else
-        for (const l of [...u]) l();
+        for (const c of [...o]) c();
     },
-    _subscribe(o) {
-      return u.add(o), () => {
-        u.delete(o);
+    _subscribe(u) {
+      return o.add(u), () => {
+        o.delete(u);
       };
     },
     peek() {
-      return n;
+      return e;
     }
   };
-  return f && (r._debugInfo = { label: t, createdAt: Date.now(), updateCount: 0, subs: u }, f(r, t)), r;
+  return d && (r._debugInfo = { label: n, createdAt: Date.now(), updateCount: 0, subs: o }, d(r, n)), r;
 }
-function h(e) {
-  const t = _(void 0);
-  return p(() => {
-    t.value = e();
+function y(t) {
+  const n = _(void 0);
+  return g(() => {
+    n.value = t();
   }), {
     _t4: !0,
     get value() {
-      return t.value;
+      return n.value;
     },
-    set value(n) {
+    set value(e) {
       throw new Error("[tina4] computed signals are read-only");
     },
-    _subscribe(n) {
-      return t._subscribe(n);
+    _subscribe(e) {
+      return n._subscribe(e);
     },
     peek() {
-      return t.peek();
+      return n.peek();
     }
   };
 }
-function p(e) {
-  let t = !1;
-  const n = () => {
-    if (t) return;
-    const r = s;
-    s = n;
+function g(t) {
+  let n = !1, e = [];
+  const o = () => {
+    if (n) return;
+    for (const c of e) c();
+    e = [];
+    const u = s, i = l;
+    s = o, l = e;
     try {
-      e();
+      t();
     } finally {
-      s = r;
+      s = u, l = i;
     }
   };
-  n();
-  const u = () => {
-    t = !0;
+  o();
+  const r = () => {
+    n = !0;
+    for (const u of e) u();
+    e = [];
   };
-  return a && a.push(u), u;
+  return a && a.push(r), r;
 }
-function y(e) {
-  c++;
+function S(t) {
+  f++;
   try {
-    e();
+    t();
   } finally {
-    if (c--, c === 0) {
-      const t = [...d];
-      d.clear();
-      for (const n of t) n();
+    if (f--, f === 0) {
+      const n = [...p];
+      p.clear();
+      for (const e of n) e();
     }
   }
 }
-function S(e) {
-  return e !== null && typeof e == "object" && e._t4 === !0;
+function w(t) {
+  return t !== null && typeof t == "object" && t._t4 === !0;
 }
 export {
-  v as _,
-  g as a,
-  y as b,
-  h as c,
-  p as e,
-  S as i,
+  h as _,
+  C as a,
+  S as b,
+  y as c,
+  v as d,
+  g as e,
+  w as i,
   _ as s
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tina4js",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "Sub-3KB reactive framework — signals, web components, routing, PWA",
   "type": "module",
   "main": "dist/tina4.cjs.js",

package/readme.md

@@ -240,6 +240,11 @@ npm run dev       # dev server
 
 ## Changelog
 
+### 1.0.5
+- **Fix:** Effects now properly unsubscribe from signals on dispose — prevents stale subscriptions accumulating in signal subscriber sets across navigations
+- **Fix:** Function bindings in `html` templates now dispose inner effects when re-evaluated — fixes duplicate DOM nodes from nested reactive lists and conditionals
+- Added 9 new tests covering effect subscription cleanup, inner effect disposal, and multi-navigation accumulation (116 total)
+
 ### 1.0.4
 - Added router reactive effect cleanup tests (navigate away/back, stale effects, async handlers, stale async discard)
 - Added debug overlay documentation to README and TINA4.md