tina4js 1.2.2 → 1.2.7

package/TINA4.md

@@ -16,6 +16,7 @@
 | API | `await api.get('/path')`, `.post`, `.put`, `.patch`, `.delete` |
 | PWA | `pwa.register({ name, themeColor, cacheStrategy })` |
 | WebSocket | `ws.connect('wss://...', { reconnect: true })` — signals for status/messages |
+| Storage | `persist(signal('light'), { key: 'theme' })` from `tina4js/storage` — survives a refresh |
 | Debug | `import 'tina4js/debug'` — toggle with Ctrl+Shift+D |
 
 ## File Conventions
@@ -40,6 +41,8 @@
 10. Use `static shadow = false` for light DOM components
 11. `route(pattern, handler)` — pattern is ALWAYS the first argument, handler/config is second
 12. `api.configure()` must be called before any API calls if you need auth or a base URL
+13. `persist()` is for user preferences only — never tokens, passwords, personal data, or any
+    credentials. localStorage is XSS-readable. See `STORAGE.md` for the full dangers list.
 
 ## Signal Patterns
 

package/bin/tina4.js

@@ -163,7 +163,9 @@ export default defineConfig({
   let mainTs = `import { signal, computed, html, route, router, navigate, api } from 'tina4js';
 import './routes/index';
 
-// Debug overlay in dev mode (Ctrl+Shift+D to toggle, tree-shaken from production builds)
+// Debug overlay in dev mode (Ctrl+Shift+D to toggle, tree-shaken from
+// production builds). Signals created before this dynamic import resolves —
+// including module-level store signals — are buffered and still tracked.
 if (import.meta.env.DEV) import('tina4js/debug');
 `;
 

package/dist/core/signal.d.ts

@@ -14,7 +14,7 @@ export declare function _getEffectCollector(): (() => void)[] | null;
 export declare let __debugSignalCreate: ((s: Signal<unknown>, label?: string) => void) | null;
 /** @internal Called when a signal value changes. */
 export declare let __debugSignalUpdate: ((s: Signal<unknown>, oldVal: unknown, newVal: unknown) => void) | null;
-/** @internal Set the debug hooks. */
+/** @internal Set the debug hooks, then replay signals created before now. */
 export declare function __setDebugSignalHooks(onCreate: typeof __debugSignalCreate, onUpdate: typeof __debugSignalUpdate): void;
 export interface Signal<T> {
     value: T;

package/dist/core/signal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"signal.d.ts","sourceRoot":"","sources":["../../src/core/signal.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAWH,oEAAoE;AACpE,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,CAAC,MAAM,IAAI,CAAC,EAAE,GAAG,IAAI,GAAG,IAAI,CAE1E;AAED,2EAA2E;AAC3E,wBAAgB,mBAAmB,IAAI,CAAC,MAAM,IAAI,CAAC,EAAE,GAAG,IAAI,CAE3D;AAID,iDAAiD;AACjD,eAAO,IAAI,mBAAmB,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,IAAW,CAAC;AAC7F,oDAAoD;AACpD,eAAO,IAAI,mBAAmB,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,IAAW,CAAC;AAC/G,qCAAqC;AACrC,wBAAgB,qBAAqB,CACnC,QAAQ,EAAE,OAAO,mBAAmB,EACpC,QAAQ,EAAE,OAAO,mBAAmB,QAIrC;AAUD,MAAM,WAAW,MAAM,CAAC,CAAC;IACvB,KAAK,EAAE,CAAC,CAAC;IACT,gBAAgB;IAChB,QAAQ,CAAC,GAAG,EAAE,IAAI,CAAC;IACnB,2DAA2D;IAC3D,UAAU,CAAC,EAAE,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC;IACvC,sCAAsC;IACtC,IAAI,IAAI,CAAC,CAAC;CACX;AAED,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAC;IAClB,gBAAgB;IAChB,QAAQ,CAAC,GAAG,EAAE,IAAI,CAAC;IACnB,gBAAgB;IAChB,UAAU,CAAC,EAAE,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC;IACvC,IAAI,IAAI,CAAC,CAAC;CACX;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,MAAM,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAoD/D;AAID;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CA2B1D;AAID;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAgCjD;AAID;;;;;;;;;;;;;GAaG;AACH,wBAAgB,KAAK,CAAC,EAAE,EAAE,MAAM,IAAI,GAAG,IAAI,CAgB1C;AAID,0CAA0C;AAC1C,wBAAgB,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,MAAM,CAAC,OAAO,CAAC,CAEjE"}
+{"version":3,"file":"signal.d.ts","sourceRoot":"","sources":["../../src/core/signal.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAWH,oEAAoE;AACpE,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,CAAC,MAAM,IAAI,CAAC,EAAE,GAAG,IAAI,GAAG,IAAI,CAE1E;AAED,2EAA2E;AAC3E,wBAAgB,mBAAmB,IAAI,CAAC,MAAM,IAAI,CAAC,EAAE,GAAG,IAAI,CAE3D;AAID,iDAAiD;AACjD,eAAO,IAAI,mBAAmB,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,IAAW,CAAC;AAC7F,oDAAoD;AACpD,eAAO,IAAI,mBAAmB,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,IAAW,CAAC;AAqB/G,6EAA6E;AAC7E,wBAAgB,qBAAqB,CACnC,QAAQ,EAAE,OAAO,mBAAmB,EACpC,QAAQ,EAAE,OAAO,mBAAmB,QAqBrC;AAUD,MAAM,WAAW,MAAM,CAAC,CAAC;IACvB,KAAK,EAAE,CAAC,CAAC;IACT,gBAAgB;IAChB,QAAQ,CAAC,GAAG,EAAE,IAAI,CAAC;IACnB,2DAA2D;IAC3D,UAAU,CAAC,EAAE,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC;IACvC,sCAAsC;IACtC,IAAI,IAAI,CAAC,CAAC;CACX;AAED,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAC;IAClB,gBAAgB;IAChB,QAAQ,CAAC,GAAG,EAAE,IAAI,CAAC;IACnB,gBAAgB;IAChB,UAAU,CAAC,EAAE,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC;IACvC,IAAI,IAAI,CAAC,CAAC;CACX;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,MAAM,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CA6D/D;AAID;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CA2B1D;AAID;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAgCjD;AAID;;;;;;;;;;;;;GAaG;AACH,wBAAgB,KAAK,CAAC,EAAE,EAAE,MAAM,IAAI,GAAG,IAAI,CAgB1C;AAID,0CAA0C;AAC1C,wBAAgB,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,MAAM,CAAC,OAAO,CAAC,CAEjE"}

package/dist/debug.cjs.js

@@ -1,4 +1,4 @@
-"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,j=100,g={onRequest(t){var n;const o=t._requestId??++M,e={id:o,method:t.method??"GET",url:t._url??"",hasAuth:!!((n=t.headers)!=null&&n.Authorization),timestamp:Date.now(),pending:!0};m.set(o,e),c.unshift(e),c.length>j&&c.pop()},onResponse(t){const o=t._requestId,e=o!=null?m.get(o):void 0;e&&(e.status=t.status,e.durationMs=Date.now()-e.timestamp,e.pending=!1,t.ok||(e.error=`HTTP ${t.status}`),m.delete(o))},getLog(){return c},get count(){return c.length}},w=`
+"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"),d=[],b={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=[],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}},l=[],D=50;let f=null;const p={setGetRoutes(t){f=t},getRegisteredRoutes(){return f?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 M=0;const c=[],m=new Map,j=100,g={onRequest(t){var n;const o=t._requestId??++M,e={id:o,method:t.method??"GET",url:t._url??"",hasAuth:!!((n=t.headers)!=null&&n.Authorization),timestamp:Date.now(),pending:!0};m.set(o,e),c.unshift(e),c.length>j&&c.pop()},onResponse(t){const o=t._requestId,e=o!=null?m.get(o):void 0;e&&(e.status=t.status,e.durationMs=Date.now()-e.timestamp,e.pending=!1,t.ok||(e.error=`HTTP ${t.status}`),m.delete(o))},getLog(){return c},get count(){return c.length}},v=`
 :host {
   all: initial;
   position: fixed;
@@ -204,7 +204,7 @@ 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=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}=E(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=b.getAll();if(t.length===0)return'<div class="t4-empty">No signals tracked yet.<br>Create a signal — it appears here, even ones made before the overlay loaded.</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}">${H(r)}</span></td>
       <td>${n.subscriberCount}</td>
@@ -213,12 +213,12 @@ tr:hover td { background: rgba(255,255,255,0.02); }
     <thead><tr><th>Label</th><th>Value</th><th>Subs</th><th>Updates</th></tr></thead>
     <tbody>${o}</tbody>
   </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>
+      <td>&lt;${w(e.tagName)}&gt;</td>
+      <td>${w(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 v(t){return t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function q(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 I(t){return new Date(t).toLocaleTimeString("en-US",{hour12:!1,hour:"2-digit",minute:"2-digit",second:"2-digit"})}function P(){const t=p.getRegisteredRoutes(),o=p.getHistory();let e="";if(t.length>0){let n="";for(const r of t)n+=`<tr>
+  </table>`}function w(t){return t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function q(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 I(t){return new Date(t).toLocaleTimeString("en-US",{hour12:!1,hour:"2-digit",minute:"2-digit",second:"2-digit"})}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">${_(r.pattern)}</span></td>
         <td>${r.hasGuard?"Yes":"—"}</td>
       </tr>`;e+=`<table>
@@ -243,7 +243,7 @@ tr:hover td { background: rgba(255,255,255,0.02); }
     <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 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 L();case"components":return z();case"routes":return P();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>
+        <style>${v}</style>
         <div class="t4-mini" id="t4-mini">
           <span class="t4-mini-dot"></span>
           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>${w}</style>
+      <style>${v}</style>
       <div class="t4-debug">
         <div class="t4-header">
           <div>

package/dist/debug.es.js

@@ -2,7 +2,7 @@ import { d 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 = {
+const d = [], h = {
   add(t, o) {
     const e = t._debugInfo;
     d.push({
@@ -43,7 +43,7 @@ const d = [], b = {
   get count() {
     return d.length;
   }
-}, a = [], h = {
+}, a = [], b = {
   onMount(t) {
     a.push({
       ref: new WeakRef(t),
@@ -351,9 +351,9 @@ function L(t) {
   return { text: String(t), cls: "val-object" };
 }
 function j() {
-  const t = b.getAll();
+  const t = h.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>';
+    return '<div class="t4-empty">No signals tracked yet.<br>Create a signal — it appears here, even ones made before the overlay loaded.</div>';
   let o = "";
   for (let e = 0; e < t.length; e++) {
     const n = t[e], { text: r, cls: s } = L(n.value);
@@ -373,15 +373,15 @@ function H(t) {
   return t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
 function z() {
-  const t = h.getAll();
+  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>
+      <td>&lt;${v(e.tagName)}&gt;</td>
+      <td>${v(n.length > 60 ? n.slice(0, 60) + "..." : n)}</td>
     </tr>`;
   }
   return `<table>
@@ -389,7 +389,7 @@ function z() {
     <tbody>${o}</tbody>
   </table>`;
 }
-function w(t) {
+function v(t) {
   return t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
 function I(t) {
@@ -406,7 +406,7 @@ function P() {
     let n = "";
     for (const r of t)
       n += `<tr>
-        <td><span class="route-pattern">${_(r.pattern)}</span></td>
+        <td><span class="route-pattern">${w(r.pattern)}</span></td>
         <td>${r.hasGuard ? "Yes" : "—"}</td>
       </tr>`;
     e += `<table>
@@ -421,7 +421,7 @@ function P() {
       const { text: s, cls: i } = I(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>${_(r.path)}</td>
+        <td>${w(r.path)}</td>
         <td>${$ || "—"}</td>
         <td><span class="${i}">${s}</span></td>
       </tr>`;
@@ -433,7 +433,7 @@ function P() {
   } else t.length === 0 && (e = '<div class="t4-empty">No routes registered yet.</div>');
   return e;
 }
-function _(t) {
+function w(t) {
   return t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
 function O(t) {
@@ -519,8 +519,8 @@ class F extends HTMLElement {
   }
   _updateTabCounts() {
     const o = {
-      signals: b.count,
-      components: h.count,
+      signals: h.count,
+      components: b.count,
       routes: p.count,
       api: g.count
     };
@@ -578,14 +578,14 @@ class F extends HTMLElement {
 function V() {
   typeof customElements < "u" && !customElements.get("tina4-debug") && customElements.define("tina4-debug", F);
 }
-let u = null, v = !1;
+let u = null, _ = !1;
 function W() {
-  v || (v = !0, C(
-    (t, o) => b.add(t, o),
-    (t) => b.onUpdate(t)
+  _ || (_ = !0, C(
+    (t, o) => h.add(t, o),
+    (t) => h.onUpdate(t)
   ), S(
-    (t) => h.onMount(t),
-    (t) => h.onUnmount(t)
+    (t) => b.onMount(t),
+    (t) => b.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) => {

package/dist/index.d.ts

@@ -18,4 +18,6 @@ export { ws } from './ws/ws';
 export type { SocketStatus, SocketOptions, ManagedSocket } from './ws/ws';
 export { sse } from './sse/sse';
 export type { StreamStatus, StreamOptions, ManagedStream } from './sse/sse';
+export { persist, clearPersistedKeys } from './storage/persist';
+export type { PersistOptions, PersistSerializer, PersistedSignal } from './storage/persist';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC1E,YAAY,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,YAAY,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGjD,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAC1D,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG1F,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAClC,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG1E,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAChC,YAAY,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAG3C,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAC7B,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAG1E,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAChC,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC1E,YAAY,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,YAAY,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGjD,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAC1D,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG1F,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAClC,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG1E,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAChC,YAAY,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAG3C,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAC7B,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAG1E,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAChC,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAG5E,OAAO,EAAE,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAChE,YAAY,EAAE,cAAc,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/signal.cjs.js

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

package/dist/signal.es.js

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

package/dist/storage/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * tina4js/storage — Persistent signals.
+ *
+ * Read STORAGE.md before using this module. localStorage is XSS-readable;
+ * never put credentials, tokens, personal data, or secrets here.
+ */
+export { persist, clearPersistedKeys } from './persist';
+export type { PersistOptions, PersistSerializer, PersistedSignal } from './persist';
+//# sourceMappingURL=index.d.ts.map

package/dist/storage/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/storage/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,OAAO,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AACxD,YAAY,EAAE,cAAc,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC"}

package/dist/storage/persist.d.ts

@@ -0,0 +1,75 @@
+/**
+ * tina4-js/storage — Persistent signals.
+ *
+ * Wrap a signal with persist() to read its initial value from localStorage
+ * (or sessionStorage) and write every change back. The value survives a
+ * page refresh. Opt-in per signal. Zero dependencies.
+ *
+ * SAFE FOR: theme, language, sidebar state, last-used filters, onboarding
+ *           flags, draft text the user expects back, guest cart contents.
+ *
+ * NEVER STORE: auth tokens, JWTs, session IDs, API keys, passwords, personal
+ *              data, payment details, permission flags, secrets, OTP seeds,
+ *              or any server-of-record state. localStorage is XSS-readable.
+ *              See STORAGE.md for the full dangers list.
+ */
+import { type Signal } from '../core/signal';
+export interface PersistSerializer<T> {
+    /** Parse a stored string back into a value. */
+    read(raw: string): T;
+    /** Serialize a value into a string that storage can hold. */
+    write(value: T): string;
+}
+export interface PersistOptions<T> {
+    /** Storage key. Required. */
+    key: string;
+    /** 'local' (default) survives a refresh; 'session' lives until the tab closes. */
+    storage?: 'local' | 'session';
+    /** JSON by default. Provide for Date, Map, Set, or any non-JSON shape. */
+    serializer?: PersistSerializer<T>;
+    /** Stored-shape version. Defaults to 1. */
+    version?: number;
+    /** Convert an older stored value into the current shape. */
+    migrate?: (oldValue: unknown, oldVersion: number | undefined) => T;
+    /** Subscribe to the storage event so other tabs see writes. Opt-in. */
+    syncTabs?: boolean;
+    /**
+     * Silence the credential-shape warning. Use only when you are certain
+     * the key or value is a coincidence (e.g. tokenColor for a UI palette).
+     */
+    silenceCredentialWarning?: boolean;
+}
+export interface PersistedSignal<T> extends Signal<T> {
+    /** Remove the key from storage. The signal keeps its current in-memory value. */
+    clear(): void;
+    /** Stop watching storage events and stop the write effect. */
+    dispose(): void;
+}
+/** @internal Reset the warning cache. Tests only. */
+export declare function _resetWarnedKeys(): void;
+/**
+ * Wrap a signal so its value is read from storage on creation and written
+ * back on every change. Survives a page refresh.
+ *
+ * @param source  - The signal to persist. Its initial value is overwritten
+ *                  by whatever is in storage, if anything.
+ * @param options - Persistence options. `key` is required.
+ *
+ * @example
+ *   const theme = persist(signal('light'), { key: 'theme' });
+ *   theme.value = 'dark';   // survives a refresh
+ */
+export declare function persist<T>(source: Signal<T>, options: PersistOptions<T>): PersistedSignal<T>;
+/**
+ * Remove a list of persisted keys at once. Wire this to your logout handler
+ * so persisted state does not leak to the next user on the device.
+ *
+ * @example
+ *   function logout() {
+ *     api.post('/auth/logout');
+ *     clearPersistedKeys(['cart', 'lastFilter', 'draftReply']);
+ *     window.location.reload();
+ *   }
+ */
+export declare function clearPersistedKeys(keys: string[], kind?: 'local' | 'session'): void;
+//# sourceMappingURL=persist.d.ts.map

package/dist/storage/persist.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"persist.d.ts","sourceRoot":"","sources":["../../src/storage/persist.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAAU,KAAK,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAErD,MAAM,WAAW,iBAAiB,CAAC,CAAC;IAClC,+CAA+C;IAC/C,IAAI,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,CAAC;IACrB,6DAA6D;IAC7D,KAAK,CAAC,KAAK,EAAE,CAAC,GAAG,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,6BAA6B;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,kFAAkF;IAClF,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,0EAA0E;IAC1E,UAAU,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAClC,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,GAAG,SAAS,KAAK,CAAC,CAAC;IACnE,uEAAuE;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,CAAE,SAAQ,MAAM,CAAC,CAAC,CAAC;IACnD,iFAAiF;IACjF,KAAK,IAAI,IAAI,CAAC;IACd,8DAA8D;IAC9D,OAAO,IAAI,IAAI,CAAC;CACjB;AAyDD,qDAAqD;AACrD,wBAAgB,gBAAgB,IAAI,IAAI,CAEvC;AAqBD;;;;;;;;;;;GAWG;AACH,wBAAgB,OAAO,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CA+I5F;AAYD;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,IAAI,GAAE,OAAO,GAAG,SAAmB,GAAG,IAAI,CAW5F"}

package/dist/storage.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const O=require("./signal.cjs.js"),p={read:t=>JSON.parse(t),write:t=>JSON.stringify(t)},w=/(token|password|passwd|secret|api[_-]?key|apikey|auth(?!or)|credential|jwt|bearer|otp|seed|private[_-]?key|session[_-]?id)/i,T=/^[A-Za-z0-9_-]{20,}\.[A-Za-z0-9_-]{20,}\.[A-Za-z0-9_-]{20,}$/,N=/^[A-Za-z0-9+/_=-]{40,}$/,h=new Set;function S(t,r){if(w.test(t))return`key name "${t}" looks like a credential`;if(typeof r=="string"){if(T.test(r))return"value looks like a JWT";if(r.length>=40&&N.test(r))return"value looks like a long base64 / token"}if(r&&typeof r=="object"&&!Array.isArray(r)){for(const e of Object.keys(r))if(w.test(e))return`object contains a credential-shape field "${e}"`}return null}function b(t,r){h.has(r)||(h.add(r),console.warn(`[tina4 persist] ${t} (key: ${JSON.stringify(r)}). localStorage is XSS-readable and never appropriate for credentials, tokens, passwords, personal data, or secrets. See STORAGE.md.`))}function E(t){if(typeof globalThis>"u")return null;try{const r=t==="local"?globalThis.localStorage:globalThis.sessionStorage;return!r||typeof r.getItem!="function"?null:r}catch{return null}}function J(t,r){var k;const{key:e,storage:y="local",serializer:a=p,version:l=1,migrate:u,syncTabs:$=!1,silenceCredentialWarning:v=!1}=r;if(!e||typeof e!="string")throw new Error("[tina4 persist] options.key is required and must be a string");const f=E(y);if(!f)return m(t,()=>{},()=>{});try{const s=f.getItem(e);if(s!==null){let i,o;try{const n=JSON.parse(s);n&&typeof n=="object"&&"value"in n?(i=n.v,o=n.value):o=n}catch{o=a===p?s:a.read(s)}if(i===l||i===void 0){const n=a===p?o:a.read(typeof o=="string"?o:JSON.stringify(o));t.value=n}else if(u)try{t.value=u(o,i)}catch(n){console.warn(`[tina4 persist] migrate() threw for key "${e}":`,n)}else console.warn(`[tina4 persist] stored version ${i} does not match current ${l} for key "${e}", and no migrate() was provided. Discarding the stored value.`)}}catch(s){console.warn(`[tina4 persist] failed to read key "${e}":`,s)}if(!v){const s=S(e,t.peek());s&&b(s,e)}const A=O.effect(()=>{const s=t.value;if(!v){const i=S(e,s);i&&b(i,e)}try{const o=JSON.stringify(a===p?{v:l,value:s}:{v:l,value:a.write(s)});f.setItem(e,o)}catch(i){console.warn(`[tina4 persist] failed to write key "${e}":`,i)}});let g=null;if($&&typeof globalThis<"u"&&"addEventListener"in globalThis){const s=i=>{const o=i;if(o.storageArea===f&&o.key===e&&o.newValue!==null)try{const n=JSON.parse(o.newValue),c=n&&typeof n=="object"&&"v"in n?n.v:void 0,d=c!==void 0?n.value:n;c!==void 0&&c!==l&&u?t.value=u(d,c):(c===l||c===void 0)&&(t.value=a===p?d:a.read(typeof d=="string"?d:JSON.stringify(d)))}catch(n){console.warn(`[tina4 persist] failed to parse storage event for key "${e}":`,n)}};(k=globalThis.addEventListener)==null||k.call(globalThis,"storage",s),g=()=>{var i;(i=globalThis.removeEventListener)==null||i.call(globalThis,"storage",s)}}return m(t,()=>{try{f.removeItem(e)}catch(s){console.warn(`[tina4 persist] failed to clear key "${e}":`,s)}},()=>{A(),g&&g()})}function m(t,r,e){return Object.assign(t,{clear:r,dispose:e})}function _(t,r="local"){const e=E(r);if(e)for(const y of t)try{e.removeItem(y)}catch(a){console.warn(`[tina4 persist] failed to clear key "${y}":`,a)}}exports.clearPersistedKeys=_;exports.persist=J;

package/dist/storage.es.js

@@ -0,0 +1,144 @@
+import { e as O } from "./signal.es.js";
+const p = {
+  read: (t) => JSON.parse(t),
+  write: (t) => JSON.stringify(t)
+}, w = /(token|password|passwd|secret|api[_-]?key|apikey|auth(?!or)|credential|jwt|bearer|otp|seed|private[_-]?key|session[_-]?id)/i, T = /^[A-Za-z0-9_-]{20,}\.[A-Za-z0-9_-]{20,}\.[A-Za-z0-9_-]{20,}$/, N = /^[A-Za-z0-9+/_=-]{40,}$/, h = /* @__PURE__ */ new Set();
+function S(t, r) {
+  if (w.test(t))
+    return `key name "${t}" looks like a credential`;
+  if (typeof r == "string") {
+    if (T.test(r)) return "value looks like a JWT";
+    if (r.length >= 40 && N.test(r))
+      return "value looks like a long base64 / token";
+  }
+  if (r && typeof r == "object" && !Array.isArray(r)) {
+    for (const e of Object.keys(r))
+      if (w.test(e))
+        return `object contains a credential-shape field "${e}"`;
+  }
+  return null;
+}
+function b(t, r) {
+  h.has(r) || (h.add(r), console.warn(
+    `[tina4 persist] ${t} (key: ${JSON.stringify(r)}). localStorage is XSS-readable and never appropriate for credentials, tokens, passwords, personal data, or secrets. See STORAGE.md.`
+  ));
+}
+function E(t) {
+  if (typeof globalThis > "u") return null;
+  try {
+    const r = t === "local" ? globalThis.localStorage : globalThis.sessionStorage;
+    return !r || typeof r.getItem != "function" ? null : r;
+  } catch {
+    return null;
+  }
+}
+function _(t, r) {
+  var k;
+  const {
+    key: e,
+    storage: y = "local",
+    serializer: a = p,
+    version: l = 1,
+    migrate: g,
+    syncTabs: $ = !1,
+    silenceCredentialWarning: v = !1
+  } = r;
+  if (!e || typeof e != "string")
+    throw new Error("[tina4 persist] options.key is required and must be a string");
+  const f = E(y);
+  if (!f)
+    return m(t, () => {
+    }, () => {
+    });
+  try {
+    const s = f.getItem(e);
+    if (s !== null) {
+      let o, i;
+      try {
+        const n = JSON.parse(s);
+        n && typeof n == "object" && "value" in n ? (o = n.v, i = n.value) : i = n;
+      } catch {
+        i = a === p ? s : a.read(s);
+      }
+      if (o === l || o === void 0) {
+        const n = a === p ? i : a.read(typeof i == "string" ? i : JSON.stringify(i));
+        t.value = n;
+      } else if (g)
+        try {
+          t.value = g(i, o);
+        } catch (n) {
+          console.warn(`[tina4 persist] migrate() threw for key "${e}":`, n);
+        }
+      else
+        console.warn(
+          `[tina4 persist] stored version ${o} does not match current ${l} for key "${e}", and no migrate() was provided. Discarding the stored value.`
+        );
+    }
+  } catch (s) {
+    console.warn(`[tina4 persist] failed to read key "${e}":`, s);
+  }
+  if (!v) {
+    const s = S(e, t.peek());
+    s && b(s, e);
+  }
+  const A = O(() => {
+    const s = t.value;
+    if (!v) {
+      const o = S(e, s);
+      o && b(o, e);
+    }
+    try {
+      const i = JSON.stringify(a === p ? { v: l, value: s } : { v: l, value: a.write(s) });
+      f.setItem(e, i);
+    } catch (o) {
+      console.warn(`[tina4 persist] failed to write key "${e}":`, o);
+    }
+  });
+  let u = null;
+  if ($ && typeof globalThis < "u" && "addEventListener" in globalThis) {
+    const s = (o) => {
+      const i = o;
+      if (i.storageArea === f && i.key === e && i.newValue !== null)
+        try {
+          const n = JSON.parse(i.newValue), c = n && typeof n == "object" && "v" in n ? n.v : void 0, d = c !== void 0 ? n.value : n;
+          c !== void 0 && c !== l && g ? t.value = g(d, c) : (c === l || c === void 0) && (t.value = a === p ? d : a.read(typeof d == "string" ? d : JSON.stringify(d)));
+        } catch (n) {
+          console.warn(`[tina4 persist] failed to parse storage event for key "${e}":`, n);
+        }
+    };
+    (k = globalThis.addEventListener) == null || k.call(globalThis, "storage", s), u = () => {
+      var o;
+      (o = globalThis.removeEventListener) == null || o.call(globalThis, "storage", s);
+    };
+  }
+  return m(
+    t,
+    () => {
+      try {
+        f.removeItem(e);
+      } catch (s) {
+        console.warn(`[tina4 persist] failed to clear key "${e}":`, s);
+      }
+    },
+    () => {
+      A(), u && u();
+    }
+  );
+}
+function m(t, r, e) {
+  return Object.assign(t, { clear: r, dispose: e });
+}
+function L(t, r = "local") {
+  const e = E(r);
+  if (e)
+    for (const y of t)
+      try {
+        e.removeItem(y);
+      } catch (a) {
+        console.warn(`[tina4 persist] failed to clear key "${y}":`, a);
+      }
+}
+export {
+  L as clearPersistedKeys,
+  _ as persist
+};

package/dist/tina4.cjs.js

@@ -1 +1 @@
-"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"),s=require("./api.cjs.js"),n=require("./pwa.cjs.js"),o=require("./ws.cjs.js"),a=require("./sse.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=s.api;exports.pwa=n.pwa;exports.ws=o.ws;exports.sse=a.sse;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./signal.cjs.js"),s=require("./core.cjs.js"),i=require("./component.cjs.js"),r=require("./index.cjs.js"),a=require("./api.cjs.js"),n=require("./pwa.cjs.js"),o=require("./ws.cjs.js"),c=require("./sse.cjs.js"),t=require("./storage.cjs.js");exports.batch=e.batch;exports.computed=e.computed;exports.effect=e.effect;exports.isSignal=e.isSignal;exports.signal=e.signal;exports.html=s.html;exports.Tina4Element=i.Tina4Element;exports.navigate=r.navigate;exports.route=r.route;exports.router=r.router;exports.api=a.api;exports.pwa=n.pwa;exports.ws=o.ws;exports.sse=c.sse;exports.clearPersistedKeys=t.clearPersistedKeys;exports.persist=t.persist;

package/dist/tina4.es.js

@@ -1,24 +1,27 @@
-import { b as a, c as e, e as t, i as s, s as m } from "./signal.es.js";
+import { b as o, c as s, e as a, i as t, s as p } from "./signal.es.js";
 import { html as f } from "./core.es.js";
-import { T as i } from "./component.es.js";
+import { T as x } 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 w } from "./pwa.es.js";
-import { ws as d } from "./ws.es.js";
-import { sse as E } from "./sse.es.js";
+import { pwa as h } from "./pwa.es.js";
+import { ws as T } from "./ws.es.js";
+import { sse as y } from "./sse.es.js";
+import { clearPersistedKeys as K, persist as P } from "./storage.es.js";
 export {
-  i as Tina4Element,
+  x as Tina4Element,
   b as api,
-  a as batch,
-  e as computed,
-  t as effect,
+  o as batch,
+  K as clearPersistedKeys,
+  s as computed,
+  a as effect,
   f as html,
-  s as isSignal,
+  t as isSignal,
   c as navigate,
-  w as pwa,
+  P as persist,
+  h as pwa,
   l as route,
   g as router,
-  m as signal,
-  E as sse,
-  d as ws
+  p as signal,
+  y as sse,
+  T as ws
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tina4js",
-  "version": "1.2.2",
+  "version": "1.2.7",
   "description": "1.5KB core gzipped, reactive framework — signals, web components, routing, PWA",
   "type": "module",
   "main": "dist/tina4.cjs.js",
@@ -39,6 +39,10 @@
     "./sse": {
       "import": "./dist/sse.es.js",
       "types": "./dist/sse/index.d.ts"
+    },
+    "./storage": {
+      "import": "./dist/storage.es.js",
+      "types": "./dist/storage/index.d.ts"
     }
   },
   "sideEffects": false,

package/readme.md

@@ -11,7 +11,7 @@
 
 <p align="center">
   <a href="https://www.npmjs.com/package/tina4js"><img src="https://img.shields.io/npm/v/tina4js?color=7b1fa2&label=npm" alt="npm"></a>
-  <img src="https://img.shields.io/badge/tests-265%20passing-brightgreen" alt="Tests">
+  <img src="https://img.shields.io/badge/tests-303%20passing-brightgreen" alt="Tests">
   <img src="https://img.shields.io/badge/core-1.5KB%20gzipped-blue" alt="Core size">
   <img src="https://img.shields.io/badge/dependencies-0-brightgreen" alt="Zero Deps">
   <a href="https://tina4.com/js"><img src="https://img.shields.io/badge/docs-tina4.com%2Fjs-7b1fa2" alt="Docs"></a>
@@ -58,9 +58,11 @@ Every module is built from scratch -- no node_modules bloat, no third-party runt
 | **API** | 1.49 KB | Fetch client with auth (Bearer + formToken + FreshToken rotation), interceptors, per-request headers/params |
 | **WebSocket** | 0.91 KB | Signal-driven status, auto-reconnect with exponential backoff, pipe() to signal, JSON auto-parse |
 | **PWA** | 1.16 KB | Service worker + manifest generation, cache strategies (network-first, cache-first, stale-while-revalidate) |
+| **SSE** | 1.33 KB | Server-Sent Events and NDJSON streaming, dual-mode (EventSource + fetch), reactive status signal |
+| **Storage** | 1.67 KB | `persist()` wrapper for signals — survives a page refresh, opt-in per signal, SSR-safe, with loud warnings on credential-shaped keys |
 | **Debug** | 5.11 KB | Dev overlay (Ctrl+Shift+D) -- signals, components, routes, API panels |
 
-**238 tests across 10 test files. Zero dependencies. Under 3KB for the full core.**
+**303 tests across 14 test files. Zero dependencies. Under 3KB for the full core.**
 
 For full documentation visit **[tina4.com/javascript](https://tina4.com/js)**.