zero-query 0.9.7 → 0.9.8

package/README.md

@@ -53,7 +53,7 @@ npx zquery dev my-app
 
 > **Tip:** Stay in the project root (where `node_modules` lives) instead of `cd`-ing into `my-app`. This keeps `index.d.ts` accessible to your IDE for full type/intellisense support.
 
-The `create` command generates a ready-to-run project with a sidebar layout, router, multiple components (including a folder component with external template and styles), and responsive styles. The dev server watches for file changes, hot-swaps CSS in-place, full-reloads on other changes, and handles SPA fallback routing.
+The `create` command generates a ready-to-run project with a sidebar layout, router, multiple components (including folder components with external templates and styles), and responsive styles. Use `--minimal` (or `-m`) to scaffold a lightweight 3-page starter instead. The dev server watches for file changes, hot-swaps CSS in-place, full-reloads on other changes, and handles SPA fallback routing.
 
 #### Error Overlay
 
@@ -136,7 +136,7 @@ That's it — a fully working SPA with the dev server's live-reload.
 ## Recommended Project Structure
 
 ```
-my-app/
+my-app/                          ← default scaffold (npx zquery create my-app)
   index.html
   global.css
   app/
@@ -150,15 +150,42 @@ my-app/
       api-demo.js
       about.js
       not-found.js
+      contact-card.js
       contacts/           ← folder component (templateUrl + styleUrl)
         contacts.js
         contacts.html
         contacts.css
+      playground/          ← folder component
+        playground.js
+        playground.html
+        playground.css
+      toolkit/             ← folder component
+        toolkit.js
+        toolkit.html
+        toolkit.css
   assets/
     scripts/              ← third-party JS (e.g. zquery.min.js for manual setup)
     styles/               ← additional stylesheets, fonts, etc.
 ```
 
+Use `--minimal` for a lighter starting point (3 pages + 404 fallback):
+
+```
+my-app/                          ← minimal scaffold (npx zquery create my-app --minimal)
+  index.html
+  global.css
+  app/
+    app.js
+    routes.js
+    store.js
+    components/
+      home.js
+      counter.js
+      about.js
+      not-found.js               ← 404 fallback
+  assets/
+```
+
 - One component per file inside `components/`.
 - Names **must contain a hyphen** (Web Component convention): `home-page`, `app-counter`, etc.
 - Components with external templates or styles can use a subfolder (e.g. `contacts/contacts.js` + `contacts.html` + `contacts.css`).
@@ -272,12 +299,13 @@ location / {
 | `$.param` `$.parseQuery` | URL utils |
 | `$.storage` `$.session` | Storage wrappers |
 | `$.EventBus` `$.bus` | Event bus || `$.onError` `$.ZQueryError` `$.ErrorCode` `$.guardCallback` `$.validate` | Error handling || `$.version` | Library version |\n| `$.libSize` | Minified bundle size string (e.g. `\"~100 KB\"`) |
+| `$.unitTests` | Build-time test results `{ passed, failed, total, suites, duration, ok }` |
 | `$.meta` | Build metadata (populated by CLI bundler) |
 | `$.noConflict` | Release `$` global |
 
 | CLI Command | Description |
 | --- | --- |
-| `zquery create [dir]` | Scaffold a new project (index.html, components, store, styles) |
+| `zquery create [dir]` | Scaffold a new project. Default: full-featured app. `--minimal` / `-m`: lightweight 3-page starter with 404 fallback. |
 | `zquery dev [root]` | Dev server with live-reload, CSS hot-swap, error overlay, expandable floating toolbar & five-tab inspector panel (port 3100). Visit `/_devtools` for the standalone panel. `--index` for custom HTML, `--bundle` for bundled mode, `--no-intercept` to skip CDN intercept. |
 | `zquery bundle [dir\|file]` | Bundle app into a single IIFE file. Accepts dir or direct entry file. |
 | `zquery build` | Build the zQuery library (`dist/zquery.min.js`) |

package/cli/commands/build.js

@@ -10,6 +10,7 @@
 const fs   = require('fs');
 const path = require('path');
 const zlib = require('zlib');
+const { execSync } = require('child_process');
 const { minify, sizeKB } = require('../utils');
 
 function buildLibrary() {
@@ -18,7 +19,7 @@ function buildLibrary() {
 
   const modules = [
     'src/errors.js',
-    'src/reactive.js', 'src/core.js', 'src/expression.js', 'src/diff.js',
+    'src/reactive.js', 'src/diff.js', 'src/core.js', 'src/expression.js',
     'src/component.js', 'src/router.js', 'src/store.js', 'src/http.js',
     'src/utils.js',
   ];
@@ -30,6 +31,49 @@ function buildLibrary() {
   const start = Date.now();
   if (!fs.existsSync(DIST)) fs.mkdirSync(DIST, { recursive: true });
 
+  // -----------------------------------------------------------------------
+  // Run unit tests and capture results for $.unitTests
+  // -----------------------------------------------------------------------
+  let testResults = { passed: 0, failed: 0, total: 0, suites: 0, duration: 0, ok: false };
+  try {
+    const json = execSync('npx vitest run --reporter=json', {
+      cwd: process.cwd(),
+      encoding: 'utf-8',
+      stdio: ['pipe', 'pipe', 'pipe'],
+      timeout: 120000,
+    });
+    // vitest --reporter=json outputs JSON to stdout; may include non-JSON lines
+    const jsonStart = json.indexOf('{');
+    if (jsonStart !== -1) {
+      const parsed = JSON.parse(json.slice(jsonStart));
+      const passed  = parsed.numPassedTests  || 0;
+      const failed  = parsed.numFailedTests  || 0;
+      const total   = parsed.numTotalTests   || 0;
+      const suites  = parsed.numTotalTestSuites || 0;
+      const dur     = Math.round((parsed.testResults || []).reduce((s, r) => s + (r.endTime - r.startTime), 0));
+      testResults = { passed, failed, total, suites, duration: dur, ok: parsed.success !== false };
+    }
+    console.log(`  ✓ Tests: ${testResults.passed}/${testResults.total} passed (${testResults.suites} suites)\n`);
+  } catch (err) {
+    // Tests may fail but we still want to capture the numbers
+    const out = (err.stdout || '') + (err.stderr || '');
+    const jsonStart = out.indexOf('{');
+    if (jsonStart !== -1) {
+      try {
+        const parsed = JSON.parse(out.slice(jsonStart));
+        testResults = {
+          passed:   parsed.numPassedTests  || 0,
+          failed:   parsed.numFailedTests  || 0,
+          total:    parsed.numTotalTests   || 0,
+          suites:   parsed.numTotalTestSuites || 0,
+          duration: Math.round((parsed.testResults || []).reduce((s, r) => s + (r.endTime - r.startTime), 0)),
+          ok:       false,
+        };
+      } catch (_) { /* keep defaults */ }
+    }
+    console.log(`  ⚠ Tests: ${testResults.passed}/${testResults.total} passed, ${testResults.failed} failed\n`);
+  }
+
   const parts = modules.map(file => {
     let code = fs.readFileSync(path.join(process.cwd(), file), 'utf-8');
     code = code.replace(/^import\s+[\s\S]*?from\s+['"].*?['"];?\s*$/gm, '');
@@ -54,8 +98,11 @@ function buildLibrary() {
   // Inject actual minified library size into both outputs
   const libSizeKB = Math.round(Buffer.from(minified).length / 1024);
   const libSizeStr = `~${libSizeKB} KB`;
-  const outContent = fs.readFileSync(OUT_FILE, 'utf-8').replace("'__LIB_SIZE__'", `'${libSizeStr}'`);
-  const minContent = minified.replace("'__LIB_SIZE__'", `'${libSizeStr}'`);
+  const testObj = JSON.stringify(testResults);
+  let outContent = fs.readFileSync(OUT_FILE, 'utf-8').replace("'__LIB_SIZE__'", `'${libSizeStr}'`);
+  let minContent = minified.replace("'__LIB_SIZE__'", `'${libSizeStr}'`);
+  outContent = outContent.replace("'__UNIT_TESTS__'", testObj);
+  minContent = minContent.replace("'__UNIT_TESTS__'", testObj);
   fs.writeFileSync(OUT_FILE, outContent, 'utf-8');
   fs.writeFileSync(MIN_FILE, minContent, 'utf-8');
 

package/cli/commands/create.js

@@ -1,9 +1,12 @@
 // cli/commands/create.js — scaffold a new zQuery project
-// Reads template files from cli/scaffold/, replaces {{NAME}} with the project
-// name, and writes them into the target directory.
+//
+// Templates live in cli/scaffold/<variant>/ (default or minimal).
+// Reads template files, replaces {{NAME}} with the project name,
+// and writes them into the target directory.
 
 const fs   = require('fs');
 const path = require('path');
+const { flag } = require('../args');
 
 /**
  * Recursively collect every file under `dir`, returning paths relative to `dir`.
@@ -22,24 +25,34 @@ function walkDir(dir, prefix = '') {
 }
 
 function createProject(args) {
-  const target = args[1] ? path.resolve(args[1]) : process.cwd();
+  // First positional arg after "create" is the target dir (skip flags)
+  const dirArg = args.slice(1).find(a => !a.startsWith('-'));
+  const target = dirArg ? path.resolve(dirArg) : process.cwd();
   const name   = path.basename(target);
 
+  // Determine scaffold variant: --minimal / -m  or  default
+  const variant = flag('minimal', 'm') ? 'minimal' : 'default';
+
   // Guard: refuse to overwrite existing files
   const conflicts = ['index.html', 'global.css', 'app', 'assets'].filter(f =>
     fs.existsSync(path.join(target, f))
   );
   if (conflicts.length) {
-    console.error(`\n  \u2717 Directory already contains: ${conflicts.join(', ')}`);
+    console.error(`\n  ✗ Directory already contains: ${conflicts.join(', ')}`);
     console.error(`  Aborting to avoid overwriting existing files.\n`);
     process.exit(1);
   }
 
-  console.log(`\n  zQuery \u2014 Create Project\n`);
+  console.log(`\n  zQuery — Create Project (${variant})\n`);
   console.log(`  Scaffolding into ${target}\n`);
 
-  // Resolve the scaffold template directory
-  const scaffoldDir = path.resolve(__dirname, '..', 'scaffold');
+  // Resolve the scaffold template directory for the chosen variant
+  const scaffoldDir = path.resolve(__dirname, '..', 'scaffold', variant);
+
+  if (!fs.existsSync(scaffoldDir)) {
+    console.error(`\n  ✗ Scaffold variant "${variant}" not found.\n`);
+    process.exit(1);
+  }
 
   // Walk the scaffold directory and copy each file
   const templateFiles = walkDir(scaffoldDir);
@@ -54,13 +67,13 @@ function createProject(args) {
     const dest = path.join(target, rel);
     fs.mkdirSync(path.dirname(dest), { recursive: true });
     fs.writeFileSync(dest, content, 'utf-8');
-    console.log(`  \u2713 ${rel}`);
+    console.log(`  ✓ ${rel}`);
   }
 
   console.log(`
   Done! Next steps:
 
-    npx zquery dev${target !== process.cwd() ? ` ${args[1]}` : ''}
+    npx zquery dev${target !== process.cwd() ? ` ${dirArg}` : ''}
 `);
 }
 

package/cli/help.js

@@ -9,6 +9,8 @@ function showHelp() {
     create [dir]               Scaffold a new zQuery project
                                Creates index.html, global.css, app/, assets/ in the target directory
                                (defaults to the current directory)
+      --minimal, -m            Use the minimal template (home, counter, about)
+                               instead of the full-featured default scaffold
 
     dev [root]                 Start a dev server with live-reload
       --port, -p <number>     Port number (default: 3100)

package/cli/scaffold/default/app/app.js

@@ -0,0 +1,211 @@
+// app.js — Application entry point
+//
+// Bootstraps the app: imports components, sets up routing,
+// wires the responsive sidebar, and connects the store.
+//
+// Key APIs used:
+//   $.router     — SPA navigation (history mode)
+//   $.ready      — run after DOM is loaded
+//   $.bus        — event bus (toast notifications, contact card)
+//   $.on         — global delegated event listeners
+//   $.storage    — localStorage wrapper
+//   $.create     — create DOM elements
+
+import './store.js';
+import './components/home.js';
+import './components/counter.js';
+import './components/todos.js';
+import './components/api-demo.js';
+import './components/playground/playground.js';
+import './components/toolkit/toolkit.js';
+import './components/about.js';
+import './components/contact-card.js';
+import './components/contacts/contacts.js';
+import './components/not-found.js';
+import { routes } from './routes.js';
+
+// ---------------------------------------------------------------------------
+// Router — SPA navigation with history mode
+// ---------------------------------------------------------------------------
+const router = $.router({
+  el: '#app',   //@ Mount point (Set in index.html)
+  routes,
+  fallback: 'not-found',
+  mode: 'history'
+});
+
+// Post-navigation hook — track page views on every navigation
+router.afterEach((to) => {
+  const store = $.getStore('main');
+  if (store) store.dispatch('incrementVisits');
+  console.log('📊 Navigated to:', to.path);
+});
+
+// Highlight the active nav link on every route change
+router.onChange((to) => {
+  $.all('.nav-link').removeClass('active');
+  $(`.nav-link[z-link="${to.path}"]`).addClass('active');
+
+  // Close mobile menu on navigate
+  closeMobileMenu();
+});
+
+// ---------------------------------------------------------------------------
+// Responsive sidebar toggle
+// ---------------------------------------------------------------------------
+const $sidebar = $('#sidebar');
+const $overlay = $('#overlay');
+const $toggle  = $('#menu-toggle');
+
+function toggleMobileMenu(open) {
+  $sidebar.toggleClass('open', open);
+  $overlay.toggleClass('visible', open);
+  $toggle.toggleClass('active', open);
+}
+
+function closeMobileMenu() { toggleMobileMenu(false); }
+
+// $.on — global delegated event listeners
+$.on('click', '#menu-toggle', () => toggleMobileMenu(!$sidebar.hasClass('open')));
+$.on('click', '#overlay', closeMobileMenu);
+
+// Close sidebar on Escape key — using $.on direct (no selector needed)
+$.on('keydown', (e) => {
+  if (e.key === 'Escape') closeMobileMenu();
+});
+
+// ---------------------------------------------------------------------------
+// Sidebar stats panel — collapsible, live-updating from $.store
+// Starts expanded by default. Open/closed state saved via $.storage.
+// ---------------------------------------------------------------------------
+$.on('click', '#stats-toggle', () => {
+  const $body  = $('#stats-body');
+  const $arrow = $('#stats-arrow');
+  if (!$body.length) return;
+  const open = $body.css('display') !== 'none';
+  open ? $body.hide() : $body.show();
+  $arrow.toggleClass('open', !open);
+  $.storage.set('statsOpen', !open);
+});
+
+function updateSidebarStats() {
+  const store = $.getStore('main');
+  if (!store) return;
+  $('#ss-visits').text(store.state.visits);
+  $('#ss-todos').text(store.getters.todoCount);
+  $('#ss-pending').text(store.getters.pendingCount);
+  $('#ss-done').text(store.getters.doneCount);
+  $('#ss-contacts').text(store.getters.contactCount);
+  $('#ss-favorites').text(store.getters.favoriteCount);
+}
+
+// ---------------------------------------------------------------------------
+// Sidebar contacts — live status indicators from $.store
+// ---------------------------------------------------------------------------
+function updateSidebarContacts() {
+  const store = $.getStore('main');
+  if (!store) return;
+  const $list = $('#sc-list');
+  if (!$list.length) return;
+
+  const sorted = [...store.state.contacts].sort((a, b) => {
+    const order = { online: 0, away: 1, offline: 2 };
+    return (order[a.status] ?? 3) - (order[b.status] ?? 3);
+  });
+
+  const html = sorted.map(c => {
+    const hue = (c.name.charCodeAt(0) * 7) % 360;
+    const initial = $.escapeHtml(c.name.charAt(0).toUpperCase());
+    const name = $.escapeHtml(c.name);
+    return `<div class="sc-item" data-contact-id="${c.id}">
+      <span class="sc-avatar" style="background:hsl(${hue},55%,42%)">${initial}</span>
+      <span class="sc-dot sc-dot-${c.status}"></span>
+      <span class="sc-name">${name}</span>
+    </div>`;
+  }).join('');
+
+  $list.html(html);
+}
+
+// ---------------------------------------------------------------------------
+// Toast notification system via $.bus (event bus)
+// ---------------------------------------------------------------------------
+// Any component can emit: $.bus.emit('toast', { message, type })
+// Types: 'success', 'error', 'info'
+$.bus.on('toast', ({ message, type = 'info' }) => {
+  const toast = $.create('div')
+    .addClass('toast', `toast-${type}`)
+    .text(message)
+    .appendTo('#toasts');
+  // Auto-remove after 3 seconds
+  setTimeout(() => {
+    toast.addClass('toast-exit');
+    setTimeout(() => toast.remove(), 300);
+  }, 3000);
+});
+
+// ---------------------------------------------------------------------------
+// On DOM ready — final setup
+// ---------------------------------------------------------------------------
+$.ready(() => {
+  // Display version in the sidebar footer
+  $('#nav-version').text('v' + $.version);
+
+  // Theme: restore saved preference or auto-detect from system
+  const saved = $.storage.get('theme'); // 'dark' | 'light' | 'system' | null
+  const preference = saved || 'system';
+  applyTheme(preference);
+
+  // Listen for OS color-scheme changes (only applies when preference is 'system')
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    const current = $.storage.get('theme') || 'system';
+    if (current === 'system') applyTheme('system');
+  });
+
+  // Set active link on initial load
+  const current = window.location.pathname;
+  $.all(`.nav-link[z-link="${current}"]`).addClass('active');
+
+  // Stats panel: restore open/closed from $.storage (defaults to open)
+  const statsOpen = $.storage.get('statsOpen');
+  if (statsOpen === false) {
+    $('#stats-body').hide();
+    $('#stats-arrow').removeClass('open');
+  }
+
+  // Sidebar contact click — open the global contact card overlay
+  $('#sc-list').on('click', '.sc-item', (e) => {
+    const item = e.target.closest('.sc-item');
+    if (!item) return;
+    const id = Number(item.dataset.contactId);
+    if (id) $.bus.emit('openContact', id);
+  });
+
+  // Initial sidebar stats + contacts + live subscription
+  updateSidebarStats();
+  updateSidebarContacts();
+  const store = $.getStore('main');
+  if (store) {
+    store.subscribe(updateSidebarStats);
+    store.subscribe(updateSidebarContacts);
+  }
+
+  // Mount any components outside the router outlet (e.g. <contact-card>)
+  $.mountAll();
+
+  console.log('⚡ {{NAME}} — powered by zQuery v' + $.version);
+});
+
+// ---------------------------------------------------------------------------
+// Theme helper — resolves 'system' to actual dark/light and applies it
+// ---------------------------------------------------------------------------
+function applyTheme(preference) {
+  let resolved = preference;
+  if (preference === 'system') {
+    resolved = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+  $('html').attr('data-theme', resolved);
+}
+
+// Expose globally so components can call it
+window.__applyTheme = applyTheme;

package/cli/scaffold/default/app/components/about.js

@@ -0,0 +1,201 @@
+// about.js — About page with theme switcher
+//
+// Features used:
+//   $.storage        — localStorage wrapper (get / set)
+//   $.version        — library version string
+//   $.unitTests      — build-time test results object
+//   $.bus.emit       — toast notifications
+//   data-theme attr  — dark / light theming
+
+$.component('about-page', {
+  styles: `
+    /* -- Hero -- */
+    .about-hero       { text-align: center; padding: 2.5rem 1rem 1.5rem; }
+    .about-hero h1    { font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 0.35rem; }
+    .about-hero .ver  { display: inline-block; padding: 0.2rem 0.65rem; border-radius: 999px;
+                        font-size: 0.78rem; font-weight: 600; color: var(--accent);
+                        background: var(--accent-soft); border: 1px solid rgba(88,166,255,.15);
+                        margin-bottom: 0.75rem; }
+    .about-hero p     { color: var(--text-muted); font-size: 0.95rem; max-width: 520px; margin: 0 auto; }
+
+    /* -- Stats bar -- */
+    .about-stats      { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap;
+                        padding: 1.25rem 0; border-top: 1px solid var(--border);
+                        border-bottom: 1px solid var(--border); margin: 1.25rem 0; }
+    .about-stat       { text-align: center; }
+    .about-stat-val   { font-size: 1.35rem; font-weight: 700; color: var(--accent);
+                        font-variant-numeric: tabular-nums; }
+    .about-stat-lbl   { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase;
+                        letter-spacing: 0.04em; }
+
+    /* -- Theme switcher -- */
+    .theme-switch     { display: inline-flex; border-radius: var(--radius); overflow: hidden;
+                        border: 1px solid var(--border); background: var(--bg); }
+    .theme-btn        { padding: 0.45rem 1rem; font-size: 0.82rem; font-weight: 500;
+                        background: transparent; border: none; color: var(--text-muted);
+                        cursor: pointer; transition: all .15s ease; font-family: inherit;
+                        display: inline-flex; align-items: center; gap: 0.35rem; }
+    .theme-btn:hover  { color: var(--text); background: var(--bg-hover); }
+    .theme-btn.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
+    .theme-btn + .theme-btn { border-left: 1px solid var(--border); }
+
+    /* -- Feature categories -- */
+    .feat-section     { margin-bottom: 0.5rem; }
+    .feat-label       { font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
+                        letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 0.4rem;
+                        padding-left: 0.1rem; }
+
+    /* -- Test badge -- */
+    .test-badge       { display: inline-flex; align-items: center; gap: 0.3rem;
+                        padding: 0.2rem 0.55rem; border-radius: 999px;
+                        font-size: 0.7rem; font-weight: 600; line-height: 1;
+                        margin-top: 0.35rem; }
+    .test-badge.pass  { background: rgba(63,185,80,.12); color: var(--success);
+                        border: 1px solid rgba(63,185,80,.25); }
+    .test-badge.fail  { background: rgba(248,81,73,.12); color: var(--danger);
+                        border: 1px solid rgba(248,81,73,.25); }
+    .test-badge svg   { width: 11px; height: 11px; }
+
+    @media (max-width: 768px) {
+      .about-hero       { padding: 1.5rem 0.5rem 1rem; }
+      .about-hero h1    { font-size: 1.5rem; }
+      .about-stats      { gap: 1rem; }
+      .about-stat-val   { font-size: 1.1rem; }
+      .theme-btn        { padding: 0.4rem 0.65rem; font-size: 0.78rem; }
+    }
+    @media (max-width: 480px) {
+      .about-hero h1    { font-size: 1.3rem; }
+      .about-stats      { gap: 0.6rem 1rem; }
+      .about-stat-val   { font-size: 1rem; }
+    }
+  `,
+
+  state: () => ({
+    theme: 'system',
+  }),
+
+  mounted() {
+    this.state.theme = $.storage.get('theme') || 'system';
+  },
+
+  setTheme(mode) {
+    this.state.theme = mode;
+    $.storage.set('theme', mode);
+    window.__applyTheme(mode);
+    const label = mode === 'system' ? 'system (auto)' : mode;
+    $.bus.emit('toast', { message: `Theme: ${label}`, type: 'info' });
+  },
+
+  render() {
+    const t = this.state.theme;
+    const feats = {
+      'Core & Components': [
+        ['$.component()', 'Reactive components with state, lifecycle, and template rendering'],
+        ['computed / watch', 'Derived state and reactive watchers on the counter page'],
+        ['DOM Diffing', 'Efficient morph() engine patches only changed DOM nodes'],
+        ['z-key', 'Keyed list reconciliation in z-for loops'],
+        ['z-model / z-ref', 'Two-way data binding and DOM element references'],
+        ['CSP-safe expressions', 'Template expressions without eval() or new Function()'],
+      ],
+      'Directives': [
+        ['z-if / z-for / z-show', 'Structural directives for conditional & list rendering'],
+        ['z-bind / z-class / z-style', 'Dynamic attributes, classes, and inline styles'],
+        ['z-debounce', 'Debounced model updates — z-model z-debounce="300"'],
+        ['z-lowercase / z-uppercase', 'Auto-transform text input on contacts email'],
+        ['z-html', 'Trusted HTML injection in the playground'],
+        ['templateUrl / styleUrl', 'External templates and CSS with auto-scoping'],
+      ],
+      'Events': [
+        ['@click.stop / .prevent', 'Event modifiers for fine-grained control'],
+        ['@click.self / .once', 'Self-only and one-shot handlers in modals'],
+        ['@click.outside', 'Outside-click detection for dropdowns'],
+        ['@keydown.escape', 'Key modifiers — Escape to close forms'],
+      ],
+      'Reactive Primitives': [
+        ['$.signal() / $.computed()', 'Fine-grained reactive primitives for derived state'],
+        ['$.effect()', 'Side-effects that auto-track signal dependencies'],
+      ],
+      'State & Routing': [
+        ['$.router()', 'SPA routing with history mode and fallback pages'],
+        ['$.store()', 'Centralized state with actions, getters, subscriptions'],
+        ['store.use / store.snapshot', 'Action middleware, deep-cloning, and history'],
+        ['$.bus', 'Event bus for cross-component communication'],
+        ['$.storage', 'localStorage wrapper for persisting preferences'],
+      ],
+      'HTTP & Utilities': [
+        ['$.get() / $.http', 'HTTP client, CRUD, interceptors, and abort signals'],
+        ['$.pipe / $.memoize / $.retry', 'Function composition, LRU caching, resilient async'],
+        ['$.escapeHtml()', 'Safe rendering of user-generated content'],
+        ['$.fn', 'Custom chainable collection methods via plugins'],
+        ['fadeIn / fadeOut / slideToggle', 'Promise-based animations with chaining'],
+        ['$.on()', 'Global delegated event listeners'],
+      ],
+    };
+
+    return `
+      <div class="about-hero">
+        <span class="ver">v${$.version}</span>
+        <h1>zQuery</h1>
+        <p>A zero-dependency frontend micro-library — reactive components, routing, state management, and more in <strong>${$.libSize}</strong> minified.</p>
+      </div>
+
+      <div class="about-stats">
+        <div class="about-stat"><div class="about-stat-val">${$.libSize}</div><div class="about-stat-lbl">Minified</div></div>
+        <div class="about-stat"><div class="about-stat-val">0</div><div class="about-stat-lbl">Dependencies</div></div>
+        <div class="about-stat">
+          <div class="about-stat-val">${$.unitTests.total}</div>
+          <div class="about-stat-lbl">Tests</div>
+          <span class="test-badge ${$.unitTests.ok ? 'pass' : 'fail'}">${$.unitTests.ok
+            ? '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg> passing'
+            : '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg> ' + $.unitTests.failed + ' failing'}</span>
+        </div>
+      </div>
+
+      <div class="card">
+        <h3><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="var(--accent)" style="width:20px;height:20px;vertical-align:-4px;margin-right:0.25rem;"><path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 0 0-5.78 1.128 2.25 2.25 0 0 1-2.4 2.245 4.5 4.5 0 0 0 8.4-2.245c0-.399-.078-.78-.22-1.128Zm0 0a15.998 15.998 0 0 0 3.388-1.62m-5.043-.025a15.994 15.994 0 0 1 1.622-3.395m3.42 3.42a15.995 15.995 0 0 0 4.764-4.648l3.876-5.814a1.151 1.151 0 0 0-1.597-1.597L14.146 6.32a15.996 15.996 0 0 0-4.649 4.763m3.42 3.42a6.776 6.776 0 0 0-3.42-3.42"/></svg> Theme</h3>
+        <p>Choose your preferred appearance. <strong>System</strong> follows your OS setting automatically.</p>
+        <div class="theme-switch">
+          <button class="theme-btn ${t === 'system' ? 'active' : ''}" @click="setTheme('system')">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width:14px;height:14px;"><path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25A2.25 2.25 0 0 1 5.25 3h13.5A2.25 2.25 0 0 1 21 5.25Z"/></svg>
+            System
+          </button>
+          <button class="theme-btn ${t === 'dark' ? 'active' : ''}" @click="setTheme('dark')">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width:14px;height:14px;"><path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z"/></svg>
+            Dark
+          </button>
+          <button class="theme-btn ${t === 'light' ? 'active' : ''}" @click="setTheme('light')">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width:14px;height:14px;"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"/></svg>
+            Light
+          </button>
+        </div>
+      </div>
+
+      <div class="card">
+        <h3><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="var(--accent)" style="width:20px;height:20px;vertical-align:-4px;margin-right:0.25rem;"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75a4.5 4.5 0 0 1-4.884 4.484c-1.076-.091-2.264.071-2.95.904l-7.152 8.684a2.548 2.548 0 1 1-3.586-3.586l8.684-7.152c.833-.686.995-1.874.904-2.95a4.5 4.5 0 0 1 6.336-4.486l-3.276 3.276a3.004 3.004 0 0 0 2.25 2.25l3.276-3.276c.256.565.398 1.192.398 1.852Z"/></svg> Features Used in This App</h3>
+        ${Object.entries(feats).map(([cat, items]) => `
+          <div class="feat-section">
+            <div class="feat-label">${cat}</div>
+            <div class="feature-grid">
+              ${items.map(([name, desc]) => `
+                <div class="feature-item">
+                  <strong>${name}</strong>
+                  <span>${desc}</span>
+                </div>
+              `).join('')}
+            </div>
+          </div>
+        `).join('')}
+      </div>
+
+      <div class="card card-muted">
+        <h3><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="var(--accent)" style="width:20px;height:20px;vertical-align:-4px;margin-right:0.25rem;"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25"/></svg> Next Steps</h3>
+        <ul class="next-steps">
+          <li>Read the <a href="https://z-query.com/docs" target="_blank" rel="noopener">full documentation</a></li>
+          <li>Explore the <a href="https://github.com/tonywied17/zero-query" target="_blank" rel="noopener">source on GitHub</a></li>
+          <li>Run <code>npx zquery bundle</code> to build for production</li>
+          <li>Run <code>npx zquery dev</code> for live-reload development</li>
+        </ul>
+      </div>
+    `;
+  }
+});