tina4js 1.0.11 → 1.0.13

package/TINA4.md

@@ -311,13 +311,13 @@ if (import.meta.env.DEV) import('tina4js/debug');
 
 | Module | Gzipped |
 |--------|---------|
-| Core (signals + html + component) | ~1.5 KB |
+| Core (signals + html + component) | ~1.51 KB |
 | Router | ~0.12 KB |
-| API | ~0.97 KB |
+| API | ~1.49 KB |
 | WebSocket | ~0.91 KB |
 | PWA | ~1.16 KB |
-| Debug overlay | ~5.1 KB |
-| **Total (core modules)** | **~4.66 KB** |
+| Debug overlay | ~5.11 KB |
+| **Total (core modules)** | **~5.19 KB** |
 
 ## Architecture
 

package/bin/tina4.js

@@ -162,6 +162,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)
+if (import.meta.env.DEV) import('tina4js/debug');
 `;
 
   if (withPwa) {

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,E=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>E&&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"),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=`
 :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 L(t){if(t==null)return{text:String(t),cls:"val-null"};if(typeof t=="string")return{text:`"${t.length>30?t.slice(0,30)+"...":t}"`,cls:"val-string"};if(typeof t=="number")return{text:String(t),cls:"val-number"};if(typeof t=="boolean")return{text:String(t),cls:"val-boolean"};if(Array.isArray(t))return{text:`Array(${t.length})`,cls:"val-object"};if(typeof t=="object")try{return{text:JSON.stringify(t).slice(0,40),cls:"val-object"}}catch{}return{text:String(t),cls:"val-object"}}function j(){const t=b.getAll();if(t.length===0)return'<div class="t4-empty">No signals tracked yet.<br>Signals created after debug is enabled will appear here.</div>';let o="";for(let e=0;e<t.length;e++){const n=t[e],{text:r,cls:s}=L(n.value);o+=`<tr>
+`;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>
       <td>${n.label||`signal_${e}`}</td>
       <td><span class="${s}">${H(r)}</span></td>
       <td>${n.subscriberCount}</td>
@@ -218,21 +218,21 @@ tr:hover td { background: rgba(255,255,255,0.02); }
     </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 I(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 q(t){return new Date(t).toLocaleTimeString("en-US",{hour12:!1,hour:"2-digit",minute:"2-digit",second:"2-digit"})}function N(){const t=p.getRegisteredRoutes(),o=p.getHistory();let e="";if(t.length>0){let n="";for(const r of t)n+=`<tr>
+  </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>
         <td><span class="route-pattern">${_(r.pattern)}</span></td>
         <td>${r.hasGuard?"Yes":"—"}</td>
       </tr>`;e+=`<table>
       <thead><tr><th>Pattern</th><th>Guard</th></tr></thead>
       <tbody>${n}</tbody>
-    </table>`}if(o.length>0){e+='<div style="margin-top:8px;padding-top:8px;border-top:1px solid #333;">';let n="";for(const r of o){const{text:s,cls:i}=I(r.durationMs),T=Object.keys(r.params).length>0?Object.entries(r.params).map(([C,S])=>`<span class="route-param">${C}=${S}</span>`).join(" "):"";n+=`<tr>
-        <td>${q(r.timestamp)}</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}=q(r.durationMs),T=Object.keys(r.params).length>0?Object.entries(r.params).map(([C,S])=>`<span class="route-param">${C}=${S}</span>`).join(" "):"";n+=`<tr>
+        <td>${I(r.timestamp)}</td>
         <td>${_(r.path)}</td>
         <td>${T||"—"}</td>
         <td><span class="${i}">${s}</span></td>
       </tr>`}e+=`<table>
       <thead><tr><th>Time</th><th>Path</th><th>Params</th><th>Duration</th></tr></thead>
       <tbody>${n}</tbody>
-    </table></div>`}else t.length===0&&(e='<div class="t4-empty">No routes registered yet.</div>');return e}function _(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 O(t,o){return o?{text:"pending",cls:"status-pending"}:t?t>=200&&t<300?{text:String(t),cls:"status-ok"}:{text:String(t),cls:"status-err"}:{text:"—",cls:""}}function U(t){return new Date(t).toLocaleTimeString("en-US",{hour12:!1,hour:"2-digit",minute:"2-digit",second:"2-digit"})}function G(){const t=g.getLog();if(t.length===0)return'<div class="t4-empty">No API calls yet.<br>Requests made via api.get/post/put/patch/delete will appear here.</div>';let o="";for(const e of t){const{text:n,cls:r}=O(e.status,e.pending),{text:s,cls:i}=P(e.durationMs);o+=`<tr>
+    </table></div>`}else t.length===0&&(e='<div class="t4-empty">No routes registered yet.</div>');return e}function _(t){return t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function N(t){if(t===void 0)return{text:"...",cls:"status-pending"};const o=t<1?"<1ms":`${Math.round(t)}ms`,e=t<100?"duration fast":t<500?"duration":t<2e3?"duration slow":"duration very-slow";return{text:o,cls:e}}function O(t,o){return o?{text:"pending",cls:"status-pending"}:t?t>=200&&t<300?{text:String(t),cls:"status-ok"}:{text:String(t),cls:"status-err"}:{text:"—",cls:""}}function U(t){return new Date(t).toLocaleTimeString("en-US",{hour12:!1,hour:"2-digit",minute:"2-digit",second:"2-digit"})}function G(){const t=g.getLog();if(t.length===0)return'<div class="t4-empty">No API calls yet.<br>Requests made via api.get/post/put/patch/delete will appear here.</div>';let o="";for(const e of t){const{text:n,cls:r}=O(e.status,e.pending),{text:s,cls:i}=N(e.durationMs);o+=`<tr>
       <td>${U(e.timestamp)}</td>
       <td><strong>${e.method}</strong></td>
       <td>${B(e.url||"(url)")}</td>
@@ -242,11 +242,11 @@ tr:hover td { background: rgba(255,255,255,0.02); }
     </tr>`}return`<table>
     <thead><tr><th>Time</th><th>Method</th><th>URL</th><th>Status</th><th>Duration</th><th>Auth</th></tr></thead>
     <tbody>${o}</tbody>
-  </table>`}function B(t){return t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}class F extends HTMLElement{constructor(){super(),this._visible=!0,this._activeTab="signals",this._refreshTimer=null,this._shadow=this.attachShadow({mode:"open"})}connectedCallback(){this._render(),this._startAutoRefresh()}disconnectedCallback(){this._stopAutoRefresh()}toggle(){this._visible=!this._visible,this._render()}show(){this._visible=!0,this._render()}hide(){this._visible=!1,this._render()}_startAutoRefresh(){this._refreshTimer=window.setInterval(()=>{this._visible&&this._renderBody()},1e3)}_stopAutoRefresh(){this._refreshTimer!==null&&(clearInterval(this._refreshTimer),this._refreshTimer=null)}_switchTab(o){this._activeTab=o,this._render()}_getTabContent(){switch(this._activeTab){case"signals":return j();case"components":return z();case"routes":return N();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=`
+  </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>
         <div class="t4-mini" id="t4-mini">
           <span class="t4-mini-dot"></span>
-          T4 Debug
+          Debug
         </div>
       `,(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>
@@ -255,8 +255,8 @@ tr:hover td { background: rgba(255,255,255,0.02); }
       <div class="t4-debug">
         <div class="t4-header">
           <div>
-            <span class="t4-logo">TINA4</span>
-            <span class="t4-badge">DEBUG</span>
+            <span class="t4-logo">Tina4js</span>
+            <span class="t4-badge">Debug</span>
           </div>
           <div class="t4-header-right">
             <button class="t4-close" id="t4-close" title="Close (Ctrl+Shift+D)">×</button>

package/dist/debug.es.js

@@ -103,11 +103,11 @@ const p = {
     return l.length;
   }
 };
-let E = 0;
-const c = [], m = /* @__PURE__ */ new Map(), M = 100, g = {
+let M = 0;
+const c = [], m = /* @__PURE__ */ new Map(), E = 100, g = {
   onRequest(t) {
     var n;
-    const o = t._requestId ?? ++E, e = {
+    const o = t._requestId ?? ++M, e = {
       id: o,
       method: t.method ?? "GET",
       url: t._url ?? "",
@@ -115,7 +115,7 @@ const c = [], m = /* @__PURE__ */ new Map(), M = 100, g = {
       timestamp: Date.now(),
       pending: !0
     };
-    m.set(o, e), c.unshift(e), c.length > M && c.pop();
+    m.set(o, e), c.unshift(e), c.length > E && c.pop();
   },
   onResponse(t) {
     const o = t._requestId, e = o != null ? m.get(o) : void 0;
@@ -350,7 +350,7 @@ function L(t) {
     }
   return { text: String(t), cls: "val-object" };
 }
-function H() {
+function j() {
   const t = b.getAll();
   if (t.length === 0)
     return '<div class="t4-empty">No signals tracked yet.<br>Signals created after debug is enabled will appear here.</div>';
@@ -359,7 +359,7 @@ function H() {
     const n = t[e], { text: r, cls: s } = L(n.value);
     o += `<tr>
       <td>${n.label || `signal_${e}`}</td>
-      <td><span class="${s}">${j(r)}</span></td>
+      <td><span class="${s}">${H(r)}</span></td>
       <td>${n.subscriberCount}</td>
       <td>${n.updateCount}</td>
     </tr>`;
@@ -369,7 +369,7 @@ function H() {
     <tbody>${o}</tbody>
   </table>`;
 }
-function j(t) {
+function H(t) {
   return t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
 function z() {
@@ -504,7 +504,7 @@ class F extends HTMLElement {
   _getTabContent() {
     switch (this._activeTab) {
       case "signals":
-        return H();
+        return j();
       case "components":
         return z();
       case "routes":
@@ -542,7 +542,7 @@ class F extends HTMLElement {
         <style>${y}</style>
         <div class="t4-mini" id="t4-mini">
           <span class="t4-mini-dot"></span>
-          T4 Debug
+          Debug
         </div>
       `, (n = this._shadow.getElementById("t4-mini")) == null || n.addEventListener("click", () => this.show());
       return;
@@ -557,8 +557,8 @@ class F extends HTMLElement {
       <div class="t4-debug">
         <div class="t4-header">
           <div>
-            <span class="t4-logo">TINA4</span>
-            <span class="t4-badge">DEBUG</span>
+            <span class="t4-logo">Tina4js</span>
+            <span class="t4-badge">Debug</span>
           </div>
           <div class="t4-header-right">
             <button class="t4-close" id="t4-close" title="Close (Ctrl+Shift+D)">×</button>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tina4js",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "description": "Sub-3KB reactive framework — signals, web components, routing, PWA",
   "type": "module",
   "main": "dist/tina4.cjs.js",
@@ -53,6 +53,7 @@
     "test": "vitest run",
     "test:watch": "vitest",
     "test:size": "vitest run tests/size.test.ts",
+    "build:gallery": "vite build --config examples/gallery/vite.gallery.config.ts",
     "preview": "vite preview"
   },
   "devDependencies": {

package/readme.md

@@ -1,26 +1,70 @@
-# Tina4-JS
+<p align="center">
+  <img src="https://tina4.com/logo.svg" alt="Tina4" width="200">
+</p>
+
+<h1 align="center">tina4-js</h1>
+<h3 align="center">This is not a framework</h3>
+
+<p align="center">
+  Sub-3KB reactive frontend. Signals. Web Components. Zero dependencies.
+</p>
+
+<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-238%20passing-brightgreen" alt="Tests">
+  <img src="https://img.shields.io/badge/size-%3C3KB-blue" alt="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>
+</p>
+
+<p align="center">
+  <a href="https://tina4.com/js">Documentation</a> &bull;
+  <a href="#quick-start">Quick Start</a> &bull;
+  <a href="#whats-included">What's Included</a> &bull;
+  <a href="https://tina4stack.github.io/tina4-js/examples/gallery/">Live Gallery</a> &bull;
+  <a href="https://tina4.com">tina4.com</a>
+</p>
 
-Sub-3KB reactive framework — signals, web components, routing, PWA, WebSocket, and API client.
+---
 
-Works standalone or embedded inside [tina4-php](https://github.com/tina4stack/tina4-php) / [tina4-python](https://github.com/tina4stack/tina4-python).
+## Quick Start
 
-**[Live Gallery — 9 real-world examples](https://tina4stack.github.io/tina4-js/examples/gallery/)** · dashboards, CRUD, chat, auth, cart, forms, PWA, data tables, and live search — all self-contained, no build step.
+```bash
+# Create a project
+npx tina4js create my-app
 
-## Why?
+# With optional CSS framework
+npx tina4js create my-app --css
 
-| Feature               | React  | Preact | Vue    | **tina4-js** |
-|-----------------------|--------|--------|--------|--------------|
-| Size (gzip)           | 42KB   | 3KB    | 33KB   | **~2KB**     |
-| Virtual DOM           | Yes    | Yes    | Yes    | **No**       |
-| Components            | Custom | Custom | Custom | **Native Web Components** |
-| Reactivity            | Hooks  | Hooks  | Proxy  | **Signals**  |
-| Router included       | No     | No     | No     | **Yes**      |
-| HTTP client included  | No     | No     | No     | **Yes**      |
-| PWA support           | No     | No     | No     | **Yes**      |
-| Backend integration   | None   | None   | None   | **tina4-php/python** |
-| Works without build   | No     | No     | No     | **Yes** (ESM) |
+# With PWA support
+npx tina4js create my-app --css --pwa
 
-No virtual DOM. Signals track exactly which DOM nodes need updating — O(1) updates.
+# Run it
+cd my-app && npm install && npm run dev
+```
+
+Open http://localhost:3000 -- your app is running.
+
+---
+
+## What's Included
+
+Every module is built from scratch -- no node_modules bloat, no third-party runtime dependencies.
+
+| Module | Gzipped | What it does |
+|--------|---------|-------------|
+| **Core** | 1.51 KB | Signals, computed, effect, batch, html tagged templates, Tina4Element web components |
+| **Router** | 0.12 KB | Client-side SPA routing, path params (`{id}`), guards, history/hash mode |
+| **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) |
+| **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.**
+
+For full documentation visit **[tina4.com/javascript](https://tina4.com/js)**.
+
+---
 
 ## Install
 
@@ -32,84 +76,75 @@ Or use via CDN with zero build tools:
 
 ```html
 <script type="module">
-  import { signal, html } from 'https://cdn.jsdelivr.net/npm/tina4js/dist/tina4.esm.js';
+  import { signal, html } from 'https://cdn.jsdelivr.net/npm/tina4js/dist/tina4.es.js';
 </script>
 ```
 
-## Quick Start
+---
+
+## Getting Started
+
+### 1. Create a project
 
 ```bash
-npm run dev    # dev server with HMR
-npm run build  # production build
-npm test       # run tests
+npx tina4js create my-app --css
+cd my-app && npm install
 ```
 
----
+This creates:
 
-## API Reference
+```
+my-app/
+  index.html              # Entry point
+  package.json            # Dependencies: tina4js, vite, typescript
+  src/
+    main.ts               # App entry -- imports routes, starts router
+    routes/
+      index.ts            # Route definitions
+    pages/
+      home.ts             # Home page handler
+    components/
+      app-header.ts       # Example web component
+    public/
+      css/
+        default.css       # Default styles
+```
 
-### Signals — Reactive State
+### 2. Create a signal
 
 ```ts
-import { signal, computed, effect, batch } from 'tina4js';
+import { signal, computed, html } from 'tina4js';
 
-// Create a reactive value
 const count = signal(0);
-count.value;       // read: 0
-count.value = 5;   // write: triggers subscribers
-
-// Derived value (auto-tracks dependencies)
 const doubled = computed(() => count.value * 2);
-doubled.value;     // 10 (read-only)
 
-// Side effect (auto-tracks dependencies)
-const dispose = effect(() => {
-  console.log(`Count is ${count.value}`);
-});
-// Runs immediately, then re-runs when count changes.
-// Call dispose() to stop.
-
-// Batch multiple updates (one notification)
-batch(() => {
-  a.value = 1;
-  b.value = 2;
-}); // subscribers notified once
+const view = html`
+  <button @click=${() => count.value--}>-</button>
+  <span>${count}</span>
+  <button @click=${() => count.value++}>+</button>
+  <p>Doubled: ${doubled}</p>
+`;
+
+document.body.append(view);
 ```
 
-### html`` — Tagged Template Renderer
+### 3. Create a route
 
 ```ts
-import { html, signal } from 'tina4js';
-
-const name = signal('World');
+import { route, router, html } from 'tina4js';
 
-// Creates real DOM nodes (not strings)
-const el = html`<h1>Hello ${name}!</h1>`;
-document.body.append(el);
-
-name.value = 'Tina4'; // DOM updates surgically — no diffing
-
-// Event handlers
-html`<button @click=${() => alert('clicked')}>Go</button>`;
-
-// Conditional rendering
-const show = signal(true);
-html`<div>${() => show.value ? html`<p>Visible</p>` : null}</div>`;
-
-// List rendering
-const items = signal(['a', 'b', 'c']);
-html`<ul>${() => items.value.map(i => html`<li>${i}</li>`)}</ul>`;
-
-// Reactive attributes
-const cls = signal('active');
-html`<div class=${cls}>Styled</div>`;
+route('/', () => html`<h1>Home</h1>`);
+route('/user/{id}', ({ id }) => html`<h1>User ${id}</h1>`);
+route('/admin', {
+  guard: () => isLoggedIn() || '/login',
+  handler: () => html`<h1>Admin</h1>`,
+});
+route('*', () => html`<h1>404</h1>`);
 
-// Boolean attributes
-const disabled = signal(false);
-html`<button ?disabled=${disabled}>Submit</button>`;
+router.start({ target: '#root', mode: 'history' });
 ```
 
-### Tina4Element — Web Components
+### 4. Create a component
 
 ```ts
 import { Tina4Element, html, signal } from 'tina4js';
@@ -135,52 +170,55 @@ customElements.define('my-counter', MyCounter);
 <my-counter label="Clicks"></my-counter>
 ```
 
-### Router — Client-Side Routing
-
-```ts
-import { route, router, navigate, html } from 'tina4js';
-
-route('/', () => html`<h1>Home</h1>`);
-route('/user/{id}', ({ id }) => html`<h1>User ${id}</h1>`);
-route('/admin', {
-  guard: () => isLoggedIn() || '/login',
-  handler: () => html`<h1>Admin</h1>`,
-});
-route('*', () => html`<h1>404</h1>`);
-
-router.start({ target: '#root', mode: 'history' });
-
-// Programmatic navigation
-navigate('/user/42');
-```
-
-### API — Fetch Client
+### 5. Talk to your backend
 
 ```ts
 import { api } from 'tina4js';
 
 api.configure({
   baseUrl: '/api',
-  auth: true,  // auto Bearer + formToken (tina4-php/python compatible)
+  auth: true,  // Bearer + formToken (tina4-php/python compatible)
 });
 
 const users = await api.get('/users');
-const user  = await api.get('/users/{id}', { id: 42 });
+const user  = await api.get('/users/42');
 const result = await api.post('/users', { name: 'Andre' });
 
-// Interceptors
-api.intercept('request', (config) => {
-  config.headers['X-Custom'] = 'value';
-  return config;
+// Query params
+const admins = await api.get('/users', {
+  params: { role: 'admin', active: true },
 });
 
+// Per-request headers
+const data = await api.get('/data', {
+  headers: { 'X-API-Version': '2' },
+});
+
+// Interceptors
 api.intercept('response', (res) => {
   if (res.status === 401) navigate('/login');
   return res;
 });
 ```
 
-### PWA — Progressive Web App
+### 6. Real-time with WebSocket
+
+```ts
+import { ws, signal } from 'tina4js';
+
+const socket = ws.connect('wss://api.example.com/ws');
+const messages = signal([]);
+
+socket.pipe(messages, (msg, current) => [...current, msg]);
+
+// Reactive signals
+socket.status.value;     // 'connecting' | 'open' | 'closed' | 'reconnecting'
+socket.connected.value;  // boolean
+socket.send({ type: 'ping' }); // auto-JSON
+socket.close(); // intentional -- no reconnect
+```
+
+### 7. Make it a PWA
 
 ```ts
 import { pwa } from 'tina4js';
@@ -191,55 +229,17 @@ pwa.register({
   themeColor: '#1a1a2e',
   cacheStrategy: 'network-first',
   precache: ['/', '/css/default.css'],
-  offlineRoute: '/offline',
 });
 ```
 
-### WebSocket — Signal-driven real-time
+### 8. Debug everything
 
 ```ts
-import { ws } from 'tina4js/ws';
-
-const socket = ws.connect('wss://api.example.com/ws');
-
-// Reactive signals — use in html templates
-socket.status.value;     // 'connecting' | 'open' | 'closed' | 'reconnecting'
-socket.connected.value;  // boolean — true when status is 'open'
-socket.lastMessage.value; // last received message (JSON auto-parsed)
-
-// Pipe messages into a signal
-const messages = signal([]);
-socket.pipe(messages, (msg, current) => [...current, msg]);
-
-// Send
-socket.send({ type: 'ping' }); // objects auto-JSON serialised
-
-// Auto-reconnects with exponential backoff by default
-socket.close(); // intentional close — no reconnect
-```
-
-### 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
+// Dev-only — 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 |
+Toggle with **Ctrl+Shift+D**. Shows live signal values, mounted components, route history, and API calls.
 
 ---
 
@@ -248,60 +248,67 @@ The overlay shows four tabs:
 | Mode | Description |
 |------|-------------|
 | **Standalone** | `npm run build` → deploy `dist/` to any static host |
-| **tina4-php** | `npm run build` → JS bundle into `src/public/js/`, uses `TINA4_APP_DOCUMENT_ROOT` |
-| **tina4-python** | `npm run build` → JS bundle into `src/public/js/`, with catch-all route |
+| **tina4-php** | `npm run build` → JS bundle into `src/public/js/` |
+| **tina4-python** | `npm run build` → JS bundle into `src/public/js/` |
 | **Islands** | No SPA — hydrate individual web components in server-rendered pages |
 
 ---
 
+## Live Gallery
+
+**[9 real-world examples](https://tina4stack.github.io/tina4-js/examples/gallery/)** you can learn from, copy, and build on:
+
+1. Admin Dashboard -- reactive KPIs, polling, notification feed
+2. Contact Manager -- full CRUD with search/filter
+3. Real-time Chat -- WebSocket with typing indicators
+4. Auth Flow -- JWT login, protected routes, token refresh
+5. Shopping Cart -- shared signals, computed totals, localStorage
+6. Dynamic Form Builder -- drag fields, live preview, JSON export
+7. PWA Notes -- offline-capable, installable
+8. Data Table -- sort, search, pagination
+9. Live Search -- debounced API calls
+
+---
+
 ## Development
 
 ```bash
-npm test          # run all tests
+npm test          # run all tests (238 passing)
 npm run test:watch # watch mode
 npm run build     # production build
-npm run dev       # dev server
+npm run build:types # TypeScript declarations
+npm run dev       # dev server with HMR
 ```
 
+---
+
 ## Changelog
 
+### 1.0.12
+- Added comprehensive boolean attribute tests (opposing pairs, inside reactive blocks, computed, multi-signal)
+
+### 1.0.11
+- **Fix:** `?attr=${() => expr}` now calls the function reactively instead of treating it as truthy
+
 ### 1.0.9
-- **Fix:** All `@event` handlers are now automatically wrapped in `batch()` — multiple signal writes inside a single handler produce exactly one re-render after the event finishes, preventing mid-event DOM rebuilds and duplicate handler calls on re-rendered elements
+- **Fix:** All `@event` handlers auto-wrapped in `batch()` -- one re-render per handler, no mid-event DOM rebuilds
 
 ### 1.0.8
-- Added `--css` flag to `tina4 create` — scaffolds with [tina4-css](https://www.npmjs.com/package/tina4-css) included
-- Added gallery of 9 real-world examples: [live demo](https://tina4stack.github.io/tina4-js/examples/gallery/)
+- Added `--css` flag to `tina4 create` for optional tina4-css integration
+- Added gallery of 9 real-world examples
 
 ### 1.0.7
-- Added WebSocket module (`tina4js/ws`) with signal-driven status, auto-reconnect with exponential backoff, `pipe()` for streaming messages into signals, and JSON auto-parse/serialise
-- Fixed effect error isolation — a throwing effect no longer blocks sibling effects
-- Fixed API request/response correlation for concurrent requests
-- Fixed API tracker always showing empty URL in debug overlay
-- Added per-request `headers` and `params` to all API methods
+- Added WebSocket module with signal-driven auto-reconnect and `pipe()`
+- Fixed effect error isolation, API tracker bugs, added per-request headers/params
 - 231 tests across 10 test files
 
 ### 1.0.5
-- **Fix:** Effects now properly unsubscribe from signals on dispose — prevents stale subscriptions accumulating in signal subscriber sets across navigations
-- **Fix:** Function bindings in `html` templates now dispose inner effects when re-evaluated — fixes duplicate DOM nodes from nested reactive lists and conditionals
-- Added 9 new tests covering effect subscription cleanup, inner effect disposal, and multi-navigation accumulation (116 total)
-
-### 1.0.4
-- Added router reactive effect cleanup tests (navigate away/back, stale effects, async handlers, stale async discard)
-- Added debug overlay documentation to README and TINA4.md
-
-### 1.0.3
-- **Fix:** `renderContent` now uses `replaceChildren` instead of `appendChild`, preventing duplicate content when async route handlers resolve.
+- Fixed effect subscription cleanup and inner effect disposal on re-evaluation
 
-### 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
+
+*tina4-js — This is not a framework. [tina4.com](https://tina4.com)*