zero-query 1.1.1 → 1.2.0

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

@@ -1,201 +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>
-    `;
-  }
-});
+// 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>
+    `;
+  }
+});