tina4js 1.0.1 → 1.0.2

package/TINA4.md

@@ -156,6 +156,20 @@ tina4 build --target python
 - `formToken` injected into POST/PUT/PATCH/DELETE body
 - Token auto-rotated via `FreshToken` response header
 
+## Debug Overlay
+
+```ts
+// Always-on
+import 'tina4js/debug';
+
+// Dev-only (recommended — stripped from production builds)
+if (import.meta.env.DEV) import('tina4js/debug');
+```
+
+- Toggle with **Ctrl+Shift+D**
+- Shows: live signal values + subscriber counts, mounted components, route navigation history with timing, API request/response log
+- Zero cost in production when using the `import.meta.env.DEV` guard (tree-shaken by Vite/Rollup)
+
 ## Framework Size
 
 | Module | Gzipped |

package/dist/component.cjs.js

@@ -1 +1 @@
-"use strict";let u=null,a=null,d=null;function m(o,t){a=o,d=t}let c=0;const p=new Set;function b(o,t){let e=o;const s=new Set,r={_t4:!0,get value(){return u&&s.add(u),e},set value(n){if(Object.is(n,e))return;const C=e;if(e=n,r._debugInfo&&r._debugInfo.updateCount++,d&&d(r,C,n),c>0)for(const l of s)p.add(l);else for(const l of[...s])l()},_subscribe(n){return s.add(n),()=>{s.delete(n)}},peek(){return e}};return a&&(r._debugInfo={label:t,createdAt:Date.now(),updateCount:0,subs:s},a(r,t)),r}function w(o){const t=b(void 0);return g(()=>{t.value=o()}),{_t4:!0,get value(){return t.value},set value(e){throw new Error("[tina4] computed signals are read-only")},_subscribe(e){return t._subscribe(e)},peek(){return t.peek()}}}function g(o){let t=!1;const e=()=>{if(t)return;const s=u;u=e;try{o()}finally{u=s}};return e(),()=>{t=!0}}function y(o){c++;try{o()}finally{if(c--,c===0){const t=[...p];p.clear();for(const e of t)e()}}}function k(o){return o!==null&&typeof o=="object"&&o._t4===!0}let h=null,f=null;function S(o,t){h=o,f=t}const i=class i extends HTMLElement{constructor(){super(),this._props={},this._rendered=!1;const t=this.constructor;this._root=t.shadow?this.attachShadow({mode:"open"}):this;for(const[e,s]of Object.entries(t.props))this._props[e]=b(this._coerce(this.getAttribute(e),s))}static get observedAttributes(){return Object.keys(this.props)}connectedCallback(){if(this._rendered)return;this._rendered=!0;const t=this.constructor;if(t.styles&&t.shadow&&this._root instanceof ShadowRoot){const s=document.createElement("style");s.textContent=t.styles,this._root.appendChild(s)}const e=this.render();e&&this._root.appendChild(e),this.onMount(),h&&h(this)}disconnectedCallback(){this.onUnmount(),f&&f(this)}attributeChangedCallback(t,e,s){const n=this.constructor.props[t];n&&this._props[t]&&(this._props[t].value=this._coerce(s,n))}prop(t){if(!this._props[t])throw new Error(`[tina4] Prop '${t}' not declared in static props of <${this.tagName.toLowerCase()}>`);return this._props[t]}emit(t,e){this.dispatchEvent(new CustomEvent(t,{bubbles:!0,composed:!0,...e}))}onMount(){}onUnmount(){}_coerce(t,e){return e===Boolean?t!==null:e===Number?t!==null?Number(t):0:t??""}};i.props={},i.styles="",i.shadow=!0;let _=i;exports.Tina4Element=_;exports.__setDebugComponentHooks=S;exports.__setDebugSignalHooks=m;exports.batch=y;exports.computed=w;exports.effect=g;exports.isSignal=k;exports.signal=b;
+"use strict";const p=require("./signal.cjs.js");let r=null,n=null;function u(h,t){r=h,n=t}const e=class e extends HTMLElement{constructor(){super(),this._props={},this._rendered=!1;const t=this.constructor;this._root=t.shadow?this.attachShadow({mode:"open"}):this;for(const[o,s]of Object.entries(t.props))this._props[o]=p.signal(this._coerce(this.getAttribute(o),s))}static get observedAttributes(){return Object.keys(this.props)}connectedCallback(){if(this._rendered)return;this._rendered=!0;const t=this.constructor;if(t.styles&&t.shadow&&this._root instanceof ShadowRoot){const s=document.createElement("style");s.textContent=t.styles,this._root.appendChild(s)}const o=this.render();o&&this._root.appendChild(o),this.onMount(),r&&r(this)}disconnectedCallback(){this.onUnmount(),n&&n(this)}attributeChangedCallback(t,o,s){const c=this.constructor.props[t];c&&this._props[t]&&(this._props[t].value=this._coerce(s,c))}prop(t){if(!this._props[t])throw new Error(`[tina4] Prop '${t}' not declared in static props of <${this.tagName.toLowerCase()}>`);return this._props[t]}emit(t,o){this.dispatchEvent(new CustomEvent(t,{bubbles:!0,composed:!0,...o}))}onMount(){}onUnmount(){}_coerce(t,o){return o===Boolean?t!==null:o===Number?t!==null?Number(t):0:t??""}};e.props={},e.styles="",e.shadow=!0;let i=e;exports.Tina4Element=i;exports.__setDebugComponentHooks=u;

package/dist/component.es.js

@@ -1,97 +1,15 @@
-let u = null, l = null, d = null;
-function w(o, t) {
-  l = o, d = t;
+import { s as p } from "./signal.es.js";
+let r = null, n = null;
+function a(h, t) {
+  r = h, n = t;
 }
-let c = 0;
-const p = /* @__PURE__ */ new Set();
-function _(o, t) {
-  let e = o;
-  const s = /* @__PURE__ */ new Set(), n = {
-    _t4: !0,
-    get value() {
-      return u && s.add(u), e;
-    },
-    set value(r) {
-      if (Object.is(r, e)) return;
-      const g = e;
-      if (e = r, n._debugInfo && n._debugInfo.updateCount++, d && d(n, g, r), c > 0)
-        for (const a of s) p.add(a);
-      else
-        for (const a of [...s]) a();
-    },
-    _subscribe(r) {
-      return s.add(r), () => {
-        s.delete(r);
-      };
-    },
-    peek() {
-      return e;
-    }
-  };
-  return l && (n._debugInfo = { label: t, createdAt: Date.now(), updateCount: 0, subs: s }, l(n, t)), n;
-}
-function y(o) {
-  const t = _(void 0);
-  return C(() => {
-    t.value = o();
-  }), {
-    _t4: !0,
-    get value() {
-      return t.value;
-    },
-    set value(e) {
-      throw new Error("[tina4] computed signals are read-only");
-    },
-    _subscribe(e) {
-      return t._subscribe(e);
-    },
-    peek() {
-      return t.peek();
-    }
-  };
-}
-function C(o) {
-  let t = !1;
-  const e = () => {
-    if (t) return;
-    const s = u;
-    u = e;
-    try {
-      o();
-    } finally {
-      u = s;
-    }
-  };
-  return e(), () => {
-    t = !0;
-  };
-}
-function m(o) {
-  c++;
-  try {
-    o();
-  } finally {
-    if (c--, c === 0) {
-      const t = [...p];
-      p.clear();
-      for (const e of t) e();
-    }
-  }
-}
-function k(o) {
-  return o !== null && typeof o == "object" && o._t4 === !0;
-}
-let h = null, f = null;
-function v(o, t) {
-  h = o, f = t;
-}
-const i = class i extends HTMLElement {
+const e = class e extends HTMLElement {
   constructor() {
     super(), this._props = {}, this._rendered = !1;
     const t = this.constructor;
     this._root = t.shadow ? this.attachShadow({ mode: "open" }) : this;
-    for (const [e, s] of Object.entries(t.props))
-      this._props[e] = _(this._coerce(this.getAttribute(e), s));
+    for (const [o, s] of Object.entries(t.props))
+      this._props[o] = p(this._coerce(this.getAttribute(o), s));
   }
   static get observedAttributes() {
     return Object.keys(this.props);
@@ -104,15 +22,15 @@ const i = class i extends HTMLElement {
       const s = document.createElement("style");
       s.textContent = t.styles, this._root.appendChild(s);
     }
-    const e = this.render();
-    e && this._root.appendChild(e), this.onMount(), h && h(this);
+    const o = this.render();
+    o && this._root.appendChild(o), this.onMount(), r && r(this);
   }
   disconnectedCallback() {
-    this.onUnmount(), f && f(this);
+    this.onUnmount(), n && n(this);
   }
-  attributeChangedCallback(t, e, s) {
-    const r = this.constructor.props[t];
-    r && this._props[t] && (this._props[t].value = this._coerce(s, r));
+  attributeChangedCallback(t, o, s) {
+    const i = this.constructor.props[t];
+    i && this._props[t] && (this._props[t].value = this._coerce(s, i));
   }
   /**
    * Get a reactive signal for a declared prop.
@@ -135,12 +53,12 @@ const i = class i extends HTMLElement {
    * this.emit('activate', { detail: 42 });
    * ```
    */
-  emit(t, e) {
+  emit(t, o) {
     this.dispatchEvent(new CustomEvent(t, {
       bubbles: !0,
       composed: !0,
       // crosses shadow DOM boundary
-      ...e
+      ...o
     }));
   }
   // ── Lifecycle hooks (override in subclass) ──────────────────────
@@ -151,19 +69,13 @@ const i = class i extends HTMLElement {
   onUnmount() {
   }
   // ── Private ─────────────────────────────────────────────────────
-  _coerce(t, e) {
-    return e === Boolean ? t !== null : e === Number ? t !== null ? Number(t) : 0 : t ?? "";
+  _coerce(t, o) {
+    return o === Boolean ? t !== null : o === Number ? t !== null ? Number(t) : 0 : t ?? "";
   }
 };
-i.props = {}, i.styles = "", i.shadow = !0;
-let b = i;
+e.props = {}, e.styles = "", e.shadow = !0;
+let c = e;
 export {
-  b as T,
-  w as _,
-  v as a,
-  m as b,
-  y as c,
-  C as e,
-  k as i,
-  _ as s
+  c as T,
+  a as _
 };

package/dist/core.cjs.js

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

package/dist/core.es.js

@@ -1,5 +1,6 @@
-import { i as l, e as d } from "./component.es.js";
-import { T as I, b as W, c as V, s as w } from "./component.es.js";
+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);
@@ -20,7 +21,7 @@ function x(t, ...e) {
 }
 function A(t) {
   const e = [];
-  return p(t, (n) => {
+  return h(t, (n) => {
     if (n.nodeType === 8) {
       const o = n.data;
       if (o && o.startsWith(m)) {
@@ -32,15 +33,15 @@ function A(t) {
 }
 function N(t) {
   const e = [];
-  return p(t, (n) => {
+  return h(t, (n) => {
     n.nodeType === 1 && e.push(n);
   }), e;
 }
-function p(t, e) {
+function h(t, e) {
   const n = t.childNodes;
   for (let o = 0; o < n.length; o++) {
     const s = n[o];
-    e(s), p(s, e);
+    e(s), h(s, e);
   }
 }
 function b(t, e) {
@@ -60,7 +61,7 @@ function b(t, e) {
         const f = e();
         for (const c of s) (a = c.parentNode) == null || a.removeChild(c);
         s = [];
-        const r = h(f), i = o.parentNode;
+        const r = p(f), i = o.parentNode;
         for (const c of r)
           i.insertBefore(c, o), s.push(c);
       });
@@ -71,7 +72,7 @@ function b(t, e) {
     else if (Array.isArray(e)) {
       const o = document.createDocumentFragment();
       for (const s of e) {
-        const f = h(s);
+        const f = p(s);
         for (const r of f) o.appendChild(r);
       }
       n.replaceChild(o, t);
@@ -134,13 +135,13 @@ function y(t, e) {
   }
   for (const o of n) t.removeAttribute(o);
 }
-function h(t) {
+function p(t) {
   if (t == null || t === !1) return [];
   if (_(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));
+    for (const n of t) e.push(...p(n));
     return e;
   }
   return [document.createTextNode(String(t))];
@@ -157,11 +158,11 @@ function T(t) {
   return o;
 }
 export {
-  I as Tina4Element,
-  W as batch,
-  V as computed,
+  D as Tina4Element,
+  I as batch,
+  W as computed,
   d as effect,
   x as html,
   l as isSignal,
-  w as signal
+  V as signal
 };

package/dist/debug.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("./component.cjs.js"),$=require("./index.cjs.js"),x=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=[],A=50,f={onNavigate(t){l.unshift({path:t.path,pattern:t.pattern,params:t.params,durationMs:t.durationMs,timestamp:Date.now()}),l.length>A&&l.pop()},getHistory(){return l},get count(){return l.length}};let D=0;const c=[],g=new Map,R=100,h={onRequest(t){var r;const o=++D,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>R&&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}},y=`
+"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=`
 :host {
   all: initial;
   position: fixed;
@@ -204,46 +204,46 @@ tr:hover td { background: rgba(255,255,255,0.02); }
   border-radius: 50%;
   background: #66bb6a;
 }
-`;function M(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 E(){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}=M(n.value);o+=`<tr>
+`;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>
       <td>${n.label||`signal_${e}`}</td>
-      <td><span class="${s}">${L(r)}</span></td>
+      <td><span class="${s}">${j(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 L(t){return t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function j(){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;${w(e.tagName)}&gt;</td>
-      <td>${w(n.length>60?n.slice(0,60)+"...":n)}</td>
+  </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>
     </tr>`}return`<table>
     <thead><tr><th>Element</th><th>Props</th></tr></thead>
     <tbody>${o}</tbody>
-  </table>`}function w(t){return t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function H(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 z(t){return new Date(t).toLocaleTimeString("en-US",{hour12:!1,hour:"2-digit",minute:"2-digit",second:"2-digit"})}function N(){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">${v(r.pattern)}</span></td>
+  </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>
         <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}=H(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>${z(r.timestamp)}</td>
-        <td>${v(r.path)}</td>
-        <td>${T||"—"}</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}=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>
         <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 v(t){return t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function P(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 I(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 q(){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}=I(e.status,e.pending),{text:s,cls:i}=P(e.durationMs);o+=`<tr>
+    </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>
       <td><strong>${e.method}</strong></td>
-      <td>${U(e.url||"(url)")}</td>
+      <td>${B(e.url||"(url)")}</td>
       <td><span class="${r}">${n}</span></td>
       <td><span class="${i}">${s}</span></td>
       <td>${e.hasAuth?"Bearer":"—"}</td>
     </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 U(t){return t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}class B 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 E();case"components":return j();case"routes":return N();case"api":return q()}}_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>${y}</style>
+  </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>
         <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>${y}</style>
+      <style>${x}</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 G(){typeof customElements<"u"&&!customElements.get("tina4-debug")&&customElements.define("tina4-debug",B)}let u=null,_=!1;function k(){_||(_=!0,m.__setDebugSignalHooks((t,o)=>p.add(t,o),t=>p.onUpdate(t)),m.__setDebugComponentHooks(t=>b.onMount(t),t=>b.onUnmount(t)),$.router.on("change",t=>{f.onNavigate(t)}),x.api.intercept("request",t=>(h.onRequest(t),t)),x.api.intercept("response",t=>(h.onResponse(t),t)),typeof document<"u"&&(G(),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;
+    `,(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=$;

package/dist/debug.es.js

@@ -1,4 +1,5 @@
-import { _ as T, a as C } from "./component.es.js";
+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 = {

package/dist/index.cjs.js

@@ -1 +1 @@
-"use strict";let f=[],i=null,s="history";const u=[];function m(r,e){const t=[];let o;r==="*"?o=".*":o=r.replace(/\{(\w+)\}/g,(h,n)=>(t.push(n),"([^/]+)"));const a=new RegExp(`^${o}$`);typeof e=="function"?f.push({pattern:r,regex:a,paramNames:t,handler:e}):f.push({pattern:r,regex:a,paramNames:t,handler:e.handler,guard:e.guard})}function d(r,e){if(s==="hash")if(e!=null&&e.replace){const t=new URL(location.href);t.hash="#"+r,history.replaceState(null,"",t.toString()),c()}else location.hash="#"+r;else e!=null&&e.replace?history.replaceState(null,"",r):history.pushState(null,"",r),c()}function c(){if(!i)return;const r=performance.now(),e=s==="hash"?location.hash.slice(1)||"/":location.pathname;for(const t of f){const o=e.match(t.regex);if(!o)continue;const a={};if(t.paramNames.forEach((n,l)=>{a[n]=decodeURIComponent(o[l+1])}),t.guard){const n=t.guard();if(n===!1)return;if(typeof n=="string"){d(n,{replace:!0});return}}const h=t.handler(a);if(i.innerHTML="",h instanceof Promise)h.then(n=>{p(i,n);const l=performance.now()-r;for(const g of u)g({path:e,params:a,pattern:t.pattern,durationMs:l})});else{p(i,h);const n=performance.now()-r;for(const l of u)l({path:e,params:a,pattern:t.pattern,durationMs:n})}return}}function p(r,e){e instanceof DocumentFragment||e instanceof Node?r.appendChild(e):typeof e=="string"?r.innerHTML=e:e!=null&&r.appendChild(document.createTextNode(String(e)))}const y={start(r){if(i=document.querySelector(r.target),!i)throw new Error(`[tina4] Router target '${r.target}' not found in DOM`);s=r.mode??"history",window.addEventListener("popstate",c),s==="hash"&&window.addEventListener("hashchange",c),document.addEventListener("click",e=>{var a;if(e.metaKey||e.ctrlKey||e.shiftKey||e.altKey)return;const t=e.target.closest("a[href]");if(!t||t.origin!==location.origin||t.hasAttribute("target")||t.hasAttribute("download")||(a=t.getAttribute("rel"))!=null&&a.includes("external"))return;e.preventDefault();const o=s==="hash"?t.getAttribute("href"):t.pathname;d(o)}),c()},on(r,e){return u.push(e),()=>{const t=u.indexOf(e);t>=0&&u.splice(t,1)}}};function w(){return f.map(r=>({pattern:r.pattern,hasGuard:!!r.guard}))}function R(){f=[],i=null,s="history",u.length=0}exports._getRoutes=w;exports._resetRouter=R;exports.navigate=d;exports.route=m;exports.router=y;
+"use strict";const y=require("./signal.cjs.js");let p=[],a=null,l="history";const c=[];let u=[],w=0;function R(t,e){const r=[];let n;t==="*"?n=".*":n=t.replace(/\{(\w+)\}/g,(f,i)=>(r.push(i),"([^/]+)"));const s=new RegExp(`^${n}$`);typeof e=="function"?p.push({pattern:t,regex:s,paramNames:r,handler:e}):p.push({pattern:t,regex:s,paramNames:r,handler:e.handler,guard:e.guard})}function v(t,e){if(l==="hash")if(e!=null&&e.replace){const r=new URL(location.href);r.hash="#"+t,history.replaceState(null,"",r.toString()),d()}else location.hash="#"+t;else e!=null&&e.replace?history.replaceState(null,"",t):history.pushState(null,"",t),d()}function d(){if(!a)return;const t=performance.now(),e=++w,r=l==="hash"?location.hash.slice(1)||"/":location.pathname;for(const n of p){const s=r.match(n.regex);if(!s)continue;const f={};if(n.paramNames.forEach((o,h)=>{f[o]=decodeURIComponent(s[h+1])}),n.guard){const o=n.guard();if(o===!1)return;if(typeof o=="string"){v(o,{replace:!0});return}}for(const o of u)o();u=[],a.innerHTML="";const i=[];y._setEffectCollector(i);const g=n.handler(f);if(g instanceof Promise)g.then(o=>{if(y._setEffectCollector(null),e!==w){for(const m of i)m();return}E(a,o),u=i;const h=performance.now()-t;for(const m of c)m({path:r,params:f,pattern:n.pattern,durationMs:h})});else{y._setEffectCollector(null),E(a,g),u=i;const o=performance.now()-t;for(const h of c)h({path:r,params:f,pattern:n.pattern,durationMs:o})}return}}function E(t,e){e instanceof DocumentFragment||e instanceof Node?t.appendChild(e):typeof e=="string"?t.innerHTML=e:e!=null&&t.appendChild(document.createTextNode(String(e)))}const _={start(t){if(a=document.querySelector(t.target),!a)throw new Error(`[tina4] Router target '${t.target}' not found in DOM`);l=t.mode??"history",window.addEventListener("popstate",d),l==="hash"&&window.addEventListener("hashchange",d),document.addEventListener("click",e=>{var s;if(e.metaKey||e.ctrlKey||e.shiftKey||e.altKey)return;const r=e.target.closest("a[href]");if(!r||r.origin!==location.origin||r.hasAttribute("target")||r.hasAttribute("download")||(s=r.getAttribute("rel"))!=null&&s.includes("external"))return;e.preventDefault();const n=l==="hash"?r.getAttribute("href"):r.pathname;v(n)}),d()},on(t,e){return c.push(e),()=>{const r=c.indexOf(e);r>=0&&c.splice(r,1)}}};function x(){return p.map(t=>({pattern:t.pattern,hasGuard:!!t.guard}))}function S(){for(const t of u)t();u=[],w=0,p=[],a=null,l="history",c.length=0}exports._getRoutes=x;exports._resetRouter=S;exports.navigate=v;exports.route=R;exports.router=_;

package/dist/index.es.js

@@ -1,94 +1,105 @@
-let f = [], i = null, s = "history";
-const u = [];
-function g(r, e) {
-  const t = [];
-  let o;
-  r === "*" ? o = ".*" : o = r.replace(/\{(\w+)\}/g, (h, n) => (t.push(n), "([^/]+)"));
-  const a = new RegExp(`^${o}$`);
-  typeof e == "function" ? f.push({ pattern: r, regex: a, paramNames: t, handler: e }) : f.push({
-    pattern: r,
-    regex: a,
-    paramNames: t,
+import { a as y } from "./signal.es.js";
+let p = [], a = null, l = "history";
+const c = [];
+let u = [], w = 0;
+function R(t, e) {
+  const r = [];
+  let n;
+  t === "*" ? n = ".*" : n = t.replace(/\{(\w+)\}/g, (f, i) => (r.push(i), "([^/]+)"));
+  const s = new RegExp(`^${n}$`);
+  typeof e == "function" ? p.push({ pattern: t, regex: s, paramNames: r, handler: e }) : p.push({
+    pattern: t,
+    regex: s,
+    paramNames: r,
     handler: e.handler,
     guard: e.guard
   });
 }
-function p(r, e) {
-  if (s === "hash")
+function x(t, e) {
+  if (l === "hash")
     if (e != null && e.replace) {
-      const t = new URL(location.href);
-      t.hash = "#" + r, history.replaceState(null, "", t.toString()), c();
+      const r = new URL(location.href);
+      r.hash = "#" + t, history.replaceState(null, "", r.toString()), d();
     } else
-      location.hash = "#" + r;
+      location.hash = "#" + t;
   else
-    e != null && e.replace ? history.replaceState(null, "", r) : history.pushState(null, "", r), c();
+    e != null && e.replace ? history.replaceState(null, "", t) : history.pushState(null, "", t), d();
 }
-function c() {
-  if (!i) return;
-  const r = performance.now(), e = s === "hash" ? location.hash.slice(1) || "/" : location.pathname;
-  for (const t of f) {
-    const o = e.match(t.regex);
-    if (!o) continue;
-    const a = {};
-    if (t.paramNames.forEach((n, l) => {
-      a[n] = decodeURIComponent(o[l + 1]);
-    }), t.guard) {
-      const n = t.guard();
-      if (n === !1) return;
-      if (typeof n == "string") {
-        p(n, { replace: !0 });
+function d() {
+  if (!a) return;
+  const t = performance.now(), e = ++w, r = l === "hash" ? location.hash.slice(1) || "/" : location.pathname;
+  for (const n of p) {
+    const s = r.match(n.regex);
+    if (!s) continue;
+    const f = {};
+    if (n.paramNames.forEach((o, h) => {
+      f[o] = decodeURIComponent(s[h + 1]);
+    }), n.guard) {
+      const o = n.guard();
+      if (o === !1) return;
+      if (typeof o == "string") {
+        x(o, { replace: !0 });
         return;
       }
     }
-    const h = t.handler(a);
-    if (i.innerHTML = "", h instanceof Promise)
-      h.then((n) => {
-        d(i, n);
-        const l = performance.now() - r;
-        for (const m of u) m({ path: e, params: a, pattern: t.pattern, durationMs: l });
+    for (const o of u) o();
+    u = [], a.innerHTML = "";
+    const i = [];
+    y(i);
+    const m = n.handler(f);
+    if (m instanceof Promise)
+      m.then((o) => {
+        if (y(null), e !== w) {
+          for (const g of i) g();
+          return;
+        }
+        v(a, o), u = i;
+        const h = performance.now() - t;
+        for (const g of c) g({ path: r, params: f, pattern: n.pattern, durationMs: h });
       });
     else {
-      d(i, h);
-      const n = performance.now() - r;
-      for (const l of u) l({ path: e, params: a, pattern: t.pattern, durationMs: n });
+      y(null), v(a, m), u = i;
+      const o = performance.now() - t;
+      for (const h of c) h({ path: r, params: f, pattern: n.pattern, durationMs: o });
     }
     return;
   }
 }
-function d(r, e) {
-  e instanceof DocumentFragment || e instanceof Node ? r.appendChild(e) : typeof e == "string" ? r.innerHTML = e : e != null && r.appendChild(document.createTextNode(String(e)));
+function v(t, e) {
+  e instanceof DocumentFragment || e instanceof Node ? t.appendChild(e) : typeof e == "string" ? t.innerHTML = e : e != null && t.appendChild(document.createTextNode(String(e)));
 }
-const y = {
-  start(r) {
-    if (i = document.querySelector(r.target), !i)
-      throw new Error(`[tina4] Router target '${r.target}' not found in DOM`);
-    s = r.mode ?? "history", window.addEventListener("popstate", c), s === "hash" && window.addEventListener("hashchange", c), document.addEventListener("click", (e) => {
-      var a;
+const S = {
+  start(t) {
+    if (a = document.querySelector(t.target), !a)
+      throw new Error(`[tina4] Router target '${t.target}' not found in DOM`);
+    l = t.mode ?? "history", window.addEventListener("popstate", d), l === "hash" && window.addEventListener("hashchange", d), document.addEventListener("click", (e) => {
+      var s;
       if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
-      const t = e.target.closest("a[href]");
-      if (!t || t.origin !== location.origin || t.hasAttribute("target") || t.hasAttribute("download") || (a = t.getAttribute("rel")) != null && a.includes("external")) return;
+      const r = e.target.closest("a[href]");
+      if (!r || r.origin !== location.origin || r.hasAttribute("target") || r.hasAttribute("download") || (s = r.getAttribute("rel")) != null && s.includes("external")) return;
       e.preventDefault();
-      const o = s === "hash" ? t.getAttribute("href") : t.pathname;
-      p(o);
-    }), c();
+      const n = l === "hash" ? r.getAttribute("href") : r.pathname;
+      x(n);
+    }), d();
   },
-  on(r, e) {
-    return u.push(e), () => {
-      const t = u.indexOf(e);
-      t >= 0 && u.splice(t, 1);
+  on(t, e) {
+    return c.push(e), () => {
+      const r = c.indexOf(e);
+      r >= 0 && c.splice(r, 1);
     };
   }
 };
-function w() {
-  return f.map((r) => ({ pattern: r.pattern, hasGuard: !!r.guard }));
+function L() {
+  return p.map((t) => ({ pattern: t.pattern, hasGuard: !!t.guard }));
 }
-function x() {
-  f = [], i = null, s = "history", u.length = 0;
+function b() {
+  for (const t of u) t();
+  u = [], w = 0, p = [], a = null, l = "history", c.length = 0;
 }
 export {
-  w as _,
-  y as a,
-  x as b,
-  p as n,
-  g as r
+  L as _,
+  S as a,
+  b,
+  x as n,
+  R as r
 };

package/dist/signal.cjs.js

@@ -0,0 +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;

package/dist/signal.es.js

@@ -0,0 +1,98 @@
+let s = null, a = null;
+function g(e) {
+  a = e;
+}
+let f = null, i = null;
+function v(e, t) {
+  f = e, i = t;
+}
+let c = 0;
+const d = /* @__PURE__ */ new Set();
+function _(e, t) {
+  let n = e;
+  const u = /* @__PURE__ */ new Set(), r = {
+    _t4: !0,
+    get value() {
+      return s && u.add(s), n;
+    },
+    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);
+      else
+        for (const l of [...u]) l();
+    },
+    _subscribe(o) {
+      return u.add(o), () => {
+        u.delete(o);
+      };
+    },
+    peek() {
+      return n;
+    }
+  };
+  return f && (r._debugInfo = { label: t, createdAt: Date.now(), updateCount: 0, subs: u }, f(r, t)), r;
+}
+function h(e) {
+  const t = _(void 0);
+  return p(() => {
+    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 p(e) {
+  let t = !1;
+  const n = () => {
+    if (t) return;
+    const r = s;
+    s = n;
+    try {
+      e();
+    } finally {
+      s = r;
+    }
+  };
+  n();
+  const u = () => {
+    t = !0;
+  };
+  return a && a.push(u), u;
+}
+function y(e) {
+  c++;
+  try {
+    e();
+  } finally {
+    if (c--, c === 0) {
+      const t = [...d];
+      d.clear();
+      for (const n of t) n();
+    }
+  }
+}
+function S(e) {
+  return e !== null && typeof e == "object" && e._t4 === !0;
+}
+export {
+  v as _,
+  g as a,
+  y as b,
+  h as c,
+  p as e,
+  S as i,
+  _ as s
+};

package/dist/tina4.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./component.cjs.js"),r=require("./core.cjs.js"),t=require("./index.cjs.js"),i=require("./api.cjs.js"),a=require("./pwa.cjs.js");exports.Tina4Element=e.Tina4Element;exports.batch=e.batch;exports.computed=e.computed;exports.effect=e.effect;exports.isSignal=e.isSignal;exports.signal=e.signal;exports.html=r.html;exports.navigate=t.navigate;exports.route=t.route;exports.router=t.router;exports.api=i.api;exports.pwa=a.pwa;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./signal.cjs.js"),r=require("./core.cjs.js"),i=require("./component.cjs.js"),t=require("./index.cjs.js"),a=require("./api.cjs.js"),n=require("./pwa.cjs.js");exports.batch=e.batch;exports.computed=e.computed;exports.effect=e.effect;exports.isSignal=e.isSignal;exports.signal=e.signal;exports.html=r.html;exports.Tina4Element=i.Tina4Element;exports.navigate=t.navigate;exports.route=t.route;exports.router=t.router;exports.api=a.api;exports.pwa=n.pwa;

package/dist/tina4.es.js

@@ -1,19 +1,20 @@
-import { T as r, b as o, c as t, e as s, i as m, s as p } from "./component.es.js";
-import { html as i } from "./core.es.js";
-import { n as x, r as c, a as l } from "./index.es.js";
-import { api as u } from "./api.es.js";
-import { pwa as h } from "./pwa.es.js";
+import { b as e, c as o, e as t, i as s, s as m } from "./signal.es.js";
+import { html as f } from "./core.es.js";
+import { T as n } from "./component.es.js";
+import { n as c, r as l, a as g } from "./index.es.js";
+import { api as b } from "./api.es.js";
+import { pwa as T } from "./pwa.es.js";
 export {
-  r as Tina4Element,
-  u as api,
-  o as batch,
-  t as computed,
-  s as effect,
-  i as html,
-  m as isSignal,
-  x as navigate,
-  h as pwa,
-  c as route,
-  l as router,
-  p as signal
+  n as Tina4Element,
+  b as api,
+  e as batch,
+  o as computed,
+  t as effect,
+  f as html,
+  s as isSignal,
+  c as navigate,
+  T as pwa,
+  l as route,
+  g as router,
+  m as signal
 };

package/package.json

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

package/readme.md

@@ -193,6 +193,29 @@ pwa.register({
 });
 ```
 
+### Debug Overlay
+
+A built-in debug overlay that shows live signal values, component tree, route history, and API calls.
+
+```ts
+// Always-on (remove for production)
+import 'tina4js/debug';
+
+// Dev-only (recommended) — tree-shaken out of production builds
+if (import.meta.env.DEV) import('tina4js/debug');
+```
+
+Once enabled, toggle the overlay with **Ctrl+Shift+D**.
+
+The overlay shows four tabs:
+
+| Tab | What it shows |
+|-----|---------------|
+| **Signals** | All signals with current value, subscriber count, and update count |
+| **Components** | Mounted `Tina4Element` web components |
+| **Routes** | Navigation history with timing |
+| **API** | Intercepted `api.*` requests and responses |
+
 ---
 
 ## Deployment Modes
@@ -215,6 +238,18 @@ npm run build     # production build
 npm run dev       # dev server
 ```
 
+## Changelog
+
+### 1.0.2
+- **Fix:** Router now disposes reactive effects when navigating between routes. Previously, signal subscriptions created by `html` templates survived DOM removal via `innerHTML = ''`, causing duplicate renders when revisiting a page.
+- **Fix:** Stale async route handlers are discarded if navigation occurs before they resolve.
+
+### 1.0.1
+- Debug overlay module with signal, component, route, and API inspectors
+- Todo app example and exports map file extension fixes
+- CLI scaffolding tool and TINA4.md AI context file
+- Fetch, PWA, integration, and size tests (102 total)
+
 ## License
 
 MIT