zero-query 0.7.5 → 0.8.7

package/cli/commands/dev/overlay.js

@@ -360,6 +360,383 @@ const OVERLAY_SCRIPT = `<script>
   }
 
   connect();
+
+  // =====================================================================
+  // Fetch / $.http Interceptor — pretty console logging
+  // =====================================================================
+  var __zqChannel;
+  try { __zqChannel = new BroadcastChannel('__zq_devtools'); } catch(e) {}
+
+  var __zqRequests = [];
+  var __zqMorphEvents = [];
+  var __zqMorphCount = 0;
+  var __zqRenderCount = 0;
+  var __zqReqId = 0;
+  var _origFetch = window.fetch;
+
+  window.fetch = function(input, init) {
+    var url = typeof input === 'string' ? input : (input && input.url ? input.url : String(input));
+    var method = ((init && init.method) || (input && input.method) || 'GET').toUpperCase();
+    var id = ++__zqReqId;
+    var start = performance.now();
+
+    // Skip internal dev-server requests
+    if (url.indexOf('__zq_') !== -1 || url.indexOf('/_devtools') !== -1) {
+      return _origFetch.apply(this, arguments);
+    }
+
+    return _origFetch.apply(this, arguments).then(function(response) {
+      var elapsed = Math.round(performance.now() - start);
+      var status = response.status;
+      var cloned = response.clone();
+
+      cloned.text().then(function(bodyText) {
+        var entry = {
+          id: id, method: method, url: url, status: status,
+          elapsed: elapsed, bodyPreview: bodyText.slice(0, 5000),
+          timestamp: Date.now()
+        };
+        __zqRequests.push(entry);
+        if (__zqRequests.length > 500) __zqRequests.shift();
+        updateDevBar();
+
+        // Pretty console log
+        var isOk = status >= 200 && status < 300;
+        var color = isOk ? '#2ecc71' : status < 400 ? '#f39c12' : '#e74c3c';
+
+        console.groupCollapsed(
+          '%c ' + method + ' %c' + status + '%c ' + url + '  %c' + elapsed + 'ms',
+          'background:' + color + ';color:#fff;padding:2px 6px;border-radius:3px;font-weight:700;font-size:11px',
+          'color:' + color + ';font-weight:700;margin-left:8px',
+          'color:inherit;margin-left:4px',
+          'color:#888;margin-left:8px;font-size:11px'
+        );
+
+        // Response body
+        try {
+          var parsed = JSON.parse(bodyText);
+          console.log('%c Response  ', 'background:#1e1e2e;color:#8be9fd;padding:2px 6px;border-radius:2px;font-weight:600', parsed);
+        } catch(pe) {
+          if (bodyText.length > 0) {
+            console.log('%c Response  ', 'background:#1e1e2e;color:#8be9fd;padding:2px 6px;border-radius:2px;font-weight:600',
+              bodyText.length > 500 ? bodyText.slice(0, 500) + '... (' + bodyText.length + ' chars)' : bodyText);
+          }
+        }
+
+        // Headers
+        try {
+          console.log('%c Headers   ', 'background:#1e1e2e;color:#bd93f9;padding:2px 6px;border-radius:2px;font-weight:600',
+            Object.fromEntries(response.headers.entries()));
+        } catch(he) {}
+
+        // Request body (if sent)
+        if (init && init.body) {
+          try {
+            console.log('%c Request   ', 'background:#1e1e2e;color:#f1fa8c;padding:2px 6px;border-radius:2px;font-weight:600',
+              JSON.parse(init.body));
+          } catch(re) {
+            console.log('%c Request   ', 'background:#1e1e2e;color:#f1fa8c;padding:2px 6px;border-radius:2px;font-weight:600',
+              String(init.body).slice(0, 500));
+          }
+        }
+
+        console.groupEnd();
+
+        // Broadcast to devtools
+        if (__zqChannel) {
+          try { __zqChannel.postMessage({ type: 'http', data: entry }); } catch(ce) {}
+        }
+      }).catch(function() {});
+
+      return response;
+    }, function(err) {
+      var elapsed = Math.round(performance.now() - start);
+      console.groupCollapsed(
+        '%c ' + method + ' %cERR%c ' + url + '  %c' + elapsed + 'ms',
+        'background:#e74c3c;color:#fff;padding:2px 6px;border-radius:3px;font-weight:700;font-size:11px',
+        'color:#e74c3c;font-weight:700;margin-left:8px',
+        'color:inherit;margin-left:4px',
+        'color:#888;margin-left:8px;font-size:11px'
+      );
+      console.error(err);
+      console.groupEnd();
+
+      var entry = { id: id, method: method, url: url, status: 0, elapsed: elapsed, bodyPreview: err.message, timestamp: Date.now() };
+      __zqRequests.push(entry);
+      updateDevBar();
+      if (__zqChannel) {
+        try { __zqChannel.postMessage({ type: 'http', data: entry }); } catch(ce) {}
+      }
+
+      throw err;
+    });
+  };
+
+  // =====================================================================
+  // Morph instrumentation — hook via window.__zqMorphHook (set by diff.js)
+  // =====================================================================
+  window.__zqMorphHook = function(el, elapsed) {
+    __zqMorphCount++;
+    updateDevBar();
+
+    var evt = { target: el.id || el.tagName.toLowerCase(), elapsed: elapsed, kind: 'morph', timestamp: Date.now() };
+    __zqMorphEvents.push(evt);
+    if (__zqMorphEvents.length > 200) __zqMorphEvents.shift();
+
+    // Console timing for slow morphs (> 4ms)
+    if (elapsed > 4) {
+      console.log(
+        '%c morph %c' + elapsed.toFixed(2) + 'ms%c ' + (el.id || el.tagName.toLowerCase()),
+        'background:#9b59b6;color:#fff;padding:2px 6px;border-radius:3px;font-weight:700;font-size:11px',
+        'color:' + (elapsed > 16 ? '#e74c3c' : '#f39c12') + ';font-weight:700;margin-left:8px',
+        'color:#888;margin-left:4px'
+      );
+    }
+
+    // Broadcast to devtools
+    if (__zqChannel) {
+      try {
+        __zqChannel.postMessage({
+          type: 'morph-detail',
+          data: evt
+        });
+      } catch(ce) {}
+    }
+  };
+
+  // =====================================================================
+  // Render instrumentation — hook for first-renders & route swaps
+  // =====================================================================
+  window.__zqRenderHook = function(el, elapsed, kind, name) {
+    __zqRenderCount++;
+    __zqMorphCount++; // count renders in the morph total for the toolbar
+    updateDevBar();
+
+    var evt = { target: name || el.id || el.tagName.toLowerCase(), elapsed: elapsed, kind: kind, timestamp: Date.now() };
+    __zqMorphEvents.push(evt);
+    if (__zqMorphEvents.length > 200) __zqMorphEvents.shift();
+
+    // Console log for route/mount renders
+    var label = kind === 'route' ? ' route ' : ' mount ';
+    var bg = kind === 'route' ? '#d29922' : '#3fb950';
+    console.log(
+      '%c' + label + '%c' + elapsed.toFixed(2) + 'ms%c ' + (name || el.id || el.tagName.toLowerCase()),
+      'background:' + bg + ';color:#fff;padding:2px 6px;border-radius:3px;font-weight:700;font-size:11px',
+      'color:' + (elapsed > 16 ? '#e74c3c' : '#888') + ';font-weight:700;margin-left:8px',
+      'color:#888;margin-left:4px'
+    );
+
+    // Broadcast to devtools
+    if (__zqChannel) {
+      try {
+        __zqChannel.postMessage({
+          type: 'render-detail',
+          data: evt
+        });
+      } catch(ce) {}
+    }
+  };
+
+  // =====================================================================
+  // Router instrumentation — history state tracking for devtools
+  // =====================================================================
+  var __zqRouterEvents = [];
+
+  var _origPushState = history.pushState;
+  history.pushState = function(state, title, url) {
+    _origPushState.apply(this, arguments);
+    var isSubstate = state && state.__zq === 'substate';
+    var evt = {
+      action: isSubstate ? 'substate' : 'navigate',
+      url: String(url || location.href).replace(location.origin, ''),
+      key: isSubstate ? state.key : null,
+      data: isSubstate ? state.data : null,
+      timestamp: Date.now()
+    };
+    __zqRouterEvents.push(evt);
+    if (__zqRouterEvents.length > 200) __zqRouterEvents.shift();
+    if (__zqChannel) {
+      try { __zqChannel.postMessage({ type: 'router', data: evt }); } catch(e) {}
+    }
+  };
+
+  var _origReplaceState = history.replaceState;
+  history.replaceState = function(state, title, url) {
+    _origReplaceState.apply(this, arguments);
+    var isSubstate = state && state.__zq === 'substate';
+    var evt = {
+      action: 'replace',
+      url: String(url || location.href).replace(location.origin, ''),
+      key: isSubstate ? state.key : null,
+      data: isSubstate ? state.data : null,
+      timestamp: Date.now()
+    };
+    __zqRouterEvents.push(evt);
+    if (__zqRouterEvents.length > 200) __zqRouterEvents.shift();
+    if (__zqChannel) {
+      try { __zqChannel.postMessage({ type: 'router', data: evt }); } catch(e) {}
+    }
+  };
+
+  window.addEventListener('popstate', function(e) {
+    var state = e.state;
+    var isSubstate = state && state.__zq === 'substate';
+    var evt = {
+      action: isSubstate ? 'pop-substate' : 'pop',
+      url: location.pathname + location.hash,
+      key: isSubstate ? state.key : null,
+      data: isSubstate ? state.data : null,
+      timestamp: Date.now()
+    };
+    __zqRouterEvents.push(evt);
+    if (__zqRouterEvents.length > 200) __zqRouterEvents.shift();
+    if (__zqChannel) {
+      try { __zqChannel.postMessage({ type: 'router', data: evt }); } catch(e) {}
+    }
+  });
+
+  window.addEventListener('hashchange', function() {
+    var evt = {
+      action: 'hashchange',
+      url: location.hash,
+      timestamp: Date.now()
+    };
+    __zqRouterEvents.push(evt);
+    if (__zqRouterEvents.length > 200) __zqRouterEvents.shift();
+    if (__zqChannel) {
+      try { __zqChannel.postMessage({ type: 'router', data: evt }); } catch(e) {}
+    }
+  });
+
+  // =====================================================================
+  // Dev Toolbar — floating bar with DOM viewer button & request counter
+  // =====================================================================
+  var devBar;
+
+  function createDevBar() {
+    devBar = document.createElement('div');
+    devBar.id = '__zq_devbar';
+    devBar.setAttribute('style',
+      'position:fixed;bottom:12px;right:12px;z-index:2147483646;' +
+      'display:flex;align-items:center;gap:6px;' +
+      'background:rgba(22,27,34,0.92);border:1px solid rgba(48,54,61,0.8);' +
+      'border-radius:8px;padding:4px 6px;backdrop-filter:blur(8px);' +
+      'font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;' +
+      'font-size:11px;color:#8b949e;user-select:none;cursor:default;' +
+      'box-shadow:0 4px 12px rgba(0,0,0,0.4);'
+    );
+    devBar.innerHTML =
+      '<span style="color:#58a6ff;font-weight:700;padding:0 4px;font-size:10px;letter-spacing:.5px">zQ</span>' +
+      '<span id="__zq_bar_reqs" title="Network requests" style="padding:2px 6px;border-radius:4px;' +
+        'background:rgba(88,166,255,0.1);color:#58a6ff;cursor:pointer;font-size:10px;font-weight:600;">0 req</span>' +
+      '<span id="__zq_bar_morphs" title="Render operations" style="padding:2px 6px;border-radius:4px;' +
+        'background:rgba(188,140,255,0.1);color:#bc8cff;cursor:pointer;font-size:10px;font-weight:600;">0 render</span>' +
+      '<button id="__zq_bar_dom" title="Open DevTools (/_devtools)" style="' +
+        'padding:3px 8px;border-radius:4px;font-size:10px;font-weight:700;' +
+        'background:rgba(63,185,80,0.15);color:#3fb950;border:1px solid rgba(63,185,80,0.3);' +
+        'cursor:pointer;font-family:inherit;transition:all .15s;' +
+      '">DOM</button>' +
+      '<button id="__zq_bar_close" title="Close toolbar" style="' +
+        'padding:0 4px;color:#484f58;cursor:pointer;font-size:14px;border:none;' +
+        'background:none;font-family:inherit;line-height:1;' +
+      '">&times;</button>';
+
+    document.body.appendChild(devBar);
+    updateDevBar();
+
+    // Check if we're inside a devtools split-view iframe
+    function isInSplitFrame() {
+      try { return window.parent !== window && window.parent.document.getElementById('app-frame'); }
+      catch(e) { return false; }
+    }
+
+    // Switch tab in devtools (works for both split iframe and popup)
+    function switchDevTab(tab) {
+      if (__zqChannel) {
+        __zqChannel.postMessage({ type: 'switch-tab', tab: tab });
+      }
+    }
+
+    // Req counter → Network tab
+    document.getElementById('__zq_bar_reqs').addEventListener('click', function() {
+      if (isInSplitFrame()) {
+        switchDevTab('network');
+      } else {
+        openDevToolsPopup('network');
+      }
+    });
+
+    // Render counter → Performance tab
+    document.getElementById('__zq_bar_morphs').addEventListener('click', function() {
+      if (isInSplitFrame()) {
+        switchDevTab('perf');
+      } else {
+        openDevToolsPopup('perf');
+      }
+    });
+
+    // DOM button → Elements tab (in split) or open popup
+    var __zqPopup = null;
+    function openDevToolsPopup(tab) {
+      // If popup is already open, just switch the tab via BroadcastChannel
+      if (__zqPopup && !__zqPopup.closed) {
+        switchDevTab(tab);
+        __zqPopup.focus();
+        return;
+      }
+      var w = 1080, h = 800;
+      var left = window.screenX + window.outerWidth - w - 20;
+      var top = window.screenY + 60;
+      var url = '/_devtools' + (tab ? '#' + tab : '');
+      __zqPopup = window.open(url, '__zq_devtools',
+        'width=' + w + ',height=' + h + ',left=' + left + ',top=' + top +
+        ',resizable=yes,scrollbars=yes');
+    }
+
+    document.getElementById('__zq_bar_dom').addEventListener('click', function() {
+      if (isInSplitFrame()) {
+        switchDevTab('dom');
+      } else {
+        openDevToolsPopup('dom');
+      }
+    });
+
+    // Close button
+    document.getElementById('__zq_bar_close').addEventListener('click', function() {
+      devBar.style.display = 'none';
+    });
+
+    // Hover effects
+    document.getElementById('__zq_bar_dom').addEventListener('mouseover', function() {
+      this.style.background = 'rgba(63,185,80,0.3)';
+    });
+    document.getElementById('__zq_bar_dom').addEventListener('mouseout', function() {
+      this.style.background = 'rgba(63,185,80,0.15)';
+    });
+  }
+
+  function updateDevBar() {
+    if (!devBar) return;
+    var reqEl = document.getElementById('__zq_bar_reqs');
+    var morphEl = document.getElementById('__zq_bar_morphs');
+    if (reqEl) reqEl.textContent = __zqRequests.length + ' req';
+    if (morphEl) morphEl.textContent = __zqMorphCount + ' render';
+  }
+
+  // Expose for devtools popup
+  window.__zqDevTools = {
+    get requests() { return __zqRequests; },
+    get morphEvents() { return __zqMorphEvents; },
+    get morphCount() { return __zqMorphCount; },
+    get renderCount() { return __zqRenderCount; },
+    get routerEvents() { return __zqRouterEvents; }
+  };
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', createDevBar);
+  } else {
+    createDevBar();
+  }
 })();
 </script>`;
 

package/cli/commands/dev/server.js

@@ -11,6 +11,7 @@
 const fs   = require('fs');
 const path = require('path');
 const OVERLAY_SCRIPT = require('./overlay');
+const DEVTOOLS_HTML  = require('./devtools');
 
 // ---------------------------------------------------------------------------
 // SSE client pool
@@ -102,6 +103,13 @@ async function createServer({ root, htmlEntry, port, noIntercept }) {
     pool.add(sse);
   });
 
+  // ---- DevTools panel ----
+  app.get('/_devtools', (req, res) => {
+    res.set('Content-Type', 'text/html; charset=utf-8');
+    res.set('Cache-Control', 'no-cache');
+    res.send(DEVTOOLS_HTML);
+  });
+
   // ---- Auto-resolve zquery.min.js ----
   const pkgRoot = path.resolve(__dirname, '..', '..', '..');
 

package/cli/commands/dev/watcher.js

@@ -60,12 +60,13 @@ function collectWatchDirs(dir) {
  * @param {SSEPool} opts.pool  — SSE broadcast pool
  * @returns {{ dirs: string[], destroy: Function }}
  */
-function startWatcher({ root, pool }) {
+function startWatcher({ root, pool, bundleMode, serveRoot }) {
   const watchDirs = collectWatchDirs(root);
   const watchers  = [];
 
   let debounceTimer;
   let currentError = null;   // track which file has an active error
+  let bundleTimer = null;    // debounce for bundle rebuilds
 
   // Track file mtimes so we only react to genuine writes.
   // On Windows, fs.watch fires on reads/access too, which causes
@@ -128,6 +129,30 @@ function startWatcher({ root, pool }) {
           }
 
           // ---- Full reload ----
+          if (bundleMode) {
+            // Debounce bundle rebuilds (500ms) so rapid saves don't spam
+            clearTimeout(bundleTimer);
+            bundleTimer = setTimeout(() => {
+              try {
+                const bundleFn = require('../bundle');
+                const { args: cliArgs } = require('../../args');
+                const savedArgs = cliArgs.slice();
+                cliArgs.length = 0;
+                cliArgs.push('bundle');
+                const prevCwd = process.cwd();
+                process.chdir(root);
+                bundleFn();
+                process.chdir(prevCwd);
+                cliArgs.length = 0;
+                savedArgs.forEach(a => cliArgs.push(a));
+                logReload(rel + ' (rebuilt)');
+                pool.broadcast('reload', rel);
+              } catch (err) {
+                console.error('  Bundle rebuild failed:', err.message);
+              }
+            }, 500);
+            return;
+          }
           logReload(rel);
           pool.broadcast('reload', rel);
         }, 100);

package/cli/help.js

@@ -7,7 +7,7 @@ function showHelp() {
   COMMANDS
 
     create [dir]               Scaffold a new zQuery project
-                               Creates index.html, scripts/, styles/ in the target directory
+                               Creates index.html, global.css, app/, assets/ in the target directory
                                (defaults to the current directory)
 
     dev [root]                 Start a dev server with live-reload
@@ -15,6 +15,8 @@ function showHelp() {
       --index, -i <file>        Index HTML file (default: index.html)
       --no-intercept           Disable auto-resolution of zquery.min.js
                                (serve the on-disk vendor copy instead)
+      --bundle, -b             Serve the bundled build (runs bundler first,
+                               serves from dist/server/, auto-rebuilds on save)
 
                                Includes error overlay: syntax errors are
                                caught on save and shown as a full-screen
@@ -24,7 +26,8 @@ function showHelp() {
     bundle [dir|file]          Bundle app ES modules into a single file
       --out, -o <path>         Output directory (default: dist/ next to HTML file)
       --index, -i <file>        Index HTML file (default: auto-detected)
-      --minimal, -m            Only output HTML + bundled JS (skip static assets)
+      --minimal, -m            Only output HTML, bundled JS, and global CSS (skip static assets)
+      --global-css <path>      Override global CSS input (default: first <link> in HTML)
 
     build                      Build the zQuery library \u2192 dist/      --watch, -w              Watch src/ and rebuild on changes                               (must be run from the project root where src/ lives)
 
@@ -35,7 +38,7 @@ function showHelp() {
         1. index.html first, then other .html files
         2. Within HTML: module script pointing to app.js, else first module script
         3. JS scan: $.router( first (entry point), then $.mount( / $.store(
-        4. Convention fallbacks (scripts/app.js, app.js, etc.)
+        4. Convention fallbacks (app/app.js, scripts/app.js, app.js, etc.)
       • Passing a directory auto-detects the entry; passing a file uses it directly
       • zquery.min.js is always embedded (auto-built from source if not found)
       • HTML file is auto-detected (any .html, not just index.html)
@@ -83,12 +86,12 @@ function showHelp() {
     zquery bundle my-app/
 
     # Pass a direct entry file (skip auto-detection)
-    zquery bundle my-app/scripts/main.js
+    zquery bundle my-app/app/main.js
 
     # Custom output directory
     zquery bundle my-app/ -o build/
 
-    # Minimal build (only HTML + bundled JS, no static assets)
+    # Minimal build (HTML + JS + global CSS, no static asset copying)
     zquery bundle my-app/ --minimal
 
     # Dev server with a custom index page

package/cli/scaffold/{scripts → app}/app.js

@@ -1,4 +1,4 @@
-// scripts/app.js — application entry point
+// app/app.js — application entry point
 //
 // This file bootstraps the zQuery app: imports all components,
 // sets up routing, wires the responsive nav, and demonstrates

package/cli/scaffold/{scripts → app}/components/about.js

@@ -31,16 +31,16 @@ $.component('about-page', {
       </div>
 
       <div class="card">
-        <h3>🎨 Theme</h3>
+        <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>Toggle between dark and light mode. Persisted to <code>localStorage</code> via <code>$.storage</code>.</p>
         <div class="theme-toggle">
           <span>Current: <strong>${this.state.theme}</strong></span>
-          <button class="btn btn-outline" @click="toggleTheme">${this.state.theme === 'dark' ? '☀️ Light Mode' : '🌙 Dark Mode'}</button>
+          <button class="btn btn-outline" @click="toggleTheme">${this.state.theme === 'dark' ? '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width:16px;height:16px;vertical-align:-3px;margin-right:0.15rem;"><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 Mode' : '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width:16px;height:16px;vertical-align:-3px;margin-right:0.15rem;"><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 Mode'}</button>
         </div>
       </div>
 
       <div class="card">
-        <h3>🧰 Features Used in This App</h3>
+        <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>
         <div class="feature-grid">
           <div class="feature-item">
             <strong>$.component()</strong>
@@ -118,7 +118,7 @@ $.component('about-page', {
       </div>
 
       <div class="card card-muted">
-        <h3>📚 Next Steps</h3>
+        <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>

package/cli/scaffold/{scripts → app}/components/api-demo.js

@@ -58,7 +58,7 @@ $.component('api-demo', {
         <p class="subtitle">Fetching data with <code>$.get()</code>. Directives: <code>z-if</code>, <code>z-show</code>, <code>z-for</code>, <code>z-text</code>.</p>
       </div>
 
-      <div class="card card-error" z-show="error"><p>⚠ <span z-text="error"></span></p></div>
+      <div class="card card-error" z-show="error"><p><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width:16px;height:16px;vertical-align:-3px;margin-right:0.15rem;"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"/></svg> <span z-text="error"></span></p></div>
       <div class="loading-bar" z-show="loading"></div>
 
       <div z-if="!selectedUser">