zero-query 0.6.3 → 0.8.6

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
@@ -27,7 +27,7 @@ const router = $.router({
 // Highlight the active nav link on every route change
 router.onChange((to) => {
   $.all('.nav-link').removeClass('active');
-  $.all(`.nav-link[z-link="${to.path}"]`).addClass('active');
+  $(`.nav-link[z-link="${to.path}"]`).addClass('active');
 
   // Close mobile menu on navigate
   closeMobileMenu();
@@ -36,26 +36,20 @@ router.onChange((to) => {
 // ---------------------------------------------------------------------------
 // Responsive sidebar toggle
 // ---------------------------------------------------------------------------
-const sidebar = $.id('sidebar');
-const overlay = $.id('overlay');
-const toggle  = $.id('menu-toggle');
+const $sidebar = $('#sidebar');
+const $overlay = $('#overlay');
+const $toggle  = $('#menu-toggle');
 
-function openMobileMenu() {
-  sidebar.classList.add('open');
-  overlay.classList.add('visible');
-  toggle.classList.add('active');
+function toggleMobileMenu(open) {
+  $sidebar.toggleClass('open', open);
+  $overlay.toggleClass('visible', open);
+  $toggle.toggleClass('active', open);
 }
 
-function closeMobileMenu() {
-  sidebar.classList.remove('open');
-  overlay.classList.remove('visible');
-  toggle.classList.remove('active');
-}
+function closeMobileMenu() { toggleMobileMenu(false); }
 
 // $.on — global delegated event listeners
-$.on('click', '#menu-toggle', () => {
-  sidebar.classList.contains('open') ? closeMobileMenu() : openMobileMenu();
-});
+$.on('click', '#menu-toggle', () => toggleMobileMenu(!$sidebar.hasClass('open')));
 $.on('click', '#overlay', closeMobileMenu);
 
 // Close sidebar on Escape key — using $.on direct (no selector needed)
@@ -69,14 +63,13 @@ $.on('keydown', (e) => {
 // Any component can emit: $.bus.emit('toast', { message, type })
 // Types: 'success', 'error', 'info'
 $.bus.on('toast', ({ message, type = 'info' }) => {
-  const container = $.id('toasts');
-  const toast = $.create('div');
-  toast.className = `toast toast-${type}`;
-  toast.textContent = message;
-  container.appendChild(toast);
+  const toast = $.create('div')
+    .addClass('toast', `toast-${type}`)
+    .text(message)
+    .appendTo('#toasts');
   // Auto-remove after 3 seconds
   setTimeout(() => {
-    toast.classList.add('toast-exit');
+    toast.addClass('toast-exit');
     setTimeout(() => toast.remove(), 300);
   }, 3000);
 });

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">

package/cli/scaffold/{scripts → app}/components/contacts/contacts.css

@@ -216,13 +216,6 @@
   font-weight: 500;
 }
 
-@keyframes slide-in {
-  from { opacity: 0; transform: translateY(-6px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-}
-
-/* -- Animation -- */
 @keyframes slide-in {
   from { opacity: 0; transform: translateY(-6px); }
   to   { opacity: 1; transform: translateY(0); }

package/cli/scaffold/{scripts → app}/components/contacts/contacts.html

@@ -68,7 +68,7 @@
 </div>
 
 <!-- Contact count -->
-<div class="card" z-if="contacts.length > 0">
+<div class="card" z-if="contacts.length > 0" z-key="contacts-list">
   <!-- Contacts list — z-for renders each item -->
   <ul class="contacts-list">
     <li
@@ -102,14 +102,14 @@
 </div>
 
 <!-- Empty state -->
-<div class="card" z-else>
+<div class="card" z-else z-key="contacts-empty">
   <div class="empty-state">
     <p>No contacts yet — add one above!</p>
   </div>
 </div>
 
 <!-- Selected contact detail panel — z-if conditional rendering -->
-<div class="card contact-detail" z-if="selectedId !== null">
+<div class="card contact-detail" z-if="selectedId !== null" z-key="contact-detail">
   <div class="detail-header">
     <div>
       <h3 z-text="selectedName"></h3>

package/cli/scaffold/app/components/home.js

@@ -0,0 +1,137 @@
+// scripts/components/home.js — dashboard / landing page
+//
+// Demonstrates: $.component, state, render, mounted lifecycle,
+//               signal + computed + effect (reactive primitives),
+//               $.store integration, $.bus, template rendering
+
+$.component('home-page', {
+  state: () => ({
+    greeting: '',
+    signalDemo: 0,
+  }),
+
+  mounted() {
+    // $.signal() — fine-grained reactive primitive
+    const count = $.signal(0);
+
+    // $.computed() — derived reactive value that auto-updates
+    const doubled = $.computed(() => count.value * 2);
+
+    // $.effect() — runs whenever its dependencies change
+    $.effect(() => {
+      this.state.signalDemo = doubled.value;
+    });
+
+    // Store the signal setter so the button can use it
+    this._signalCount = count;
+
+    // Greet based on time of day
+    const hour = new Date().getHours();
+    this.state.greeting = hour < 12 ? 'Good morning'
+                        : hour < 18 ? 'Good afternoon'
+                        : 'Good evening';
+
+    // Track page visit via the global store
+    const store = $.getStore('main');
+    store.dispatch('incrementVisits');
+  },
+
+  incrementSignal() {
+    if (this._signalCount) {
+      this._signalCount.value++;
+    }
+  },
+
+  render() {
+    const store = $.getStore('main');
+    return `
+      <div class="page-header">
+        <h1>${this.state.greeting}</h1>
+        <p class="subtitle">Welcome to your new <strong>zQuery</strong> app. Explore the pages to see different features in action.</p>
+      </div>
+
+      <div class="card-grid">
+        <div class="card card-accent">
+          <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="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"/></svg> Reactive Signals</h3>
+          <p>Fine-grained reactivity with <code>signal()</code>, <code>computed()</code>, and <code>effect()</code>.</p>
+          <div class="signal-demo">
+            <span class="signal-value">Doubled: ${this.state.signalDemo}</span>
+            <button class="btn btn-sm" @click="incrementSignal">Increment Signal</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="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5"/></svg> Counter</h3>
+          <p><code>computed</code> properties, <code>watch</code> callbacks, and <code>z-for</code> with <code>z-key</code> diffing.</p>
+          <a z-link="/counter" class="btn btn-outline">Try It →</a>
+        </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 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg> Todos</h3>
+          <p>Global store, <code>z-key</code> keyed lists, DOM diffing. <strong>${store.getters.todoCount}</strong> items, <strong>${store.getters.doneCount}</strong> done.</p>
+          <a z-link="/todos" class="btn btn-outline">Try It →</a>
+        </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="M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Zm6-10.125a1.875 1.875 0 1 1-3.75 0 1.875 1.875 0 0 1 3.75 0Zm1.294 6.336a6.721 6.721 0 0 1-3.17.789 6.721 6.721 0 0 1-3.168-.789 3.376 3.376 0 0 1 6.338 0Z"/></svg> Contacts</h3>
+          <p>External templates, scoped styles, and <code>z-key</code> keyed lists. <strong>${store.getters.contactCount}</strong> contacts, <strong>${store.getters.favoriteCount}</strong> ★ favorited.</p>
+          <a z-link="/contacts" class="btn btn-outline">Try It →</a>
+        </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="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418"/></svg> API Demo</h3>
+          <p>Fetch data with <code>$.get()</code>, loading states, and <code>$.escapeHtml()</code>.</p>
+          <a z-link="/api" class="btn btn-outline">Try It →</a>
+        </div>
+      </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="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z"/></svg> App Stats</h3>
+        <div class="stats-grid">
+          <div class="stat-group">
+            <span class="stat-group-title"><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;vertical-align:-2px;margin-right:0.2rem;"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955a1.126 1.126 0 0 1 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/></svg> General</span>
+            <div class="stat-group-values">
+              <div class="stat">
+                <span class="stat-value">${store.state.visits}</span>
+                <span class="stat-label">Page Views</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="stat-group">
+            <span class="stat-group-title"><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;vertical-align:-2px;margin-right:0.2rem;"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg> Todos</span>
+            <div class="stat-group-values">
+              <div class="stat">
+                <span class="stat-value">${store.getters.todoCount}</span>
+                <span class="stat-label">Total</span>
+              </div>
+              <div class="stat">
+                <span class="stat-value">${store.getters.pendingCount}</span>
+                <span class="stat-label">Pending</span>
+              </div>
+              <div class="stat">
+                <span class="stat-value">${store.getters.doneCount}</span>
+                <span class="stat-label">Done</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="stat-group">
+            <span class="stat-group-title"><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;vertical-align:-2px;margin-right:0.2rem;"><path stroke-linecap="round" stroke-linejoin="round" d="M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Zm6-10.125a1.875 1.875 0 1 1-3.75 0 1.875 1.875 0 0 1 3.75 0Zm1.294 6.336a6.721 6.721 0 0 1-3.17.789 6.721 6.721 0 0 1-3.168-.789 3.376 3.376 0 0 1 6.338 0Z"/></svg> Contacts</span>
+            <div class="stat-group-values">
+              <div class="stat">
+                <span class="stat-value">${store.getters.contactCount}</span>
+                <span class="stat-label">Total</span>
+              </div>
+              <div class="stat">
+                <span class="stat-value">${store.getters.favoriteCount}</span>
+                <span class="stat-label">★ Favorited</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <small class="muted">Stats powered by <code>$.store()</code> getters — visit count tracked globally.</small>
+      </div>
+    `;
+  }
+});

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

@@ -1,4 +1,4 @@
-// scripts/routes.js — route definitions
+// app/routes.js — route definitions
 //
 // Each route maps a URL path to a component tag name.
 // Supports: static paths, :params, wildcards, and lazy loading via `load`.

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

@@ -1,4 +1,4 @@
-// scripts/store.js — global state management
+// app/store.js — global state management
 //
 // $.store() creates a centralized store with state, actions, and getters.
 // Components can dispatch actions and subscribe to changes.
@@ -11,11 +11,11 @@ export const store = $.store('main', {
 
     // Contacts
     contacts: [
-      { id: 1, name: 'Alice Johnson',  email: 'alice@example.com',  role: 'Designer',  status: 'online',  favorite: true  },
-      { id: 2, name: 'Bob Martinez',   email: 'bob@example.com',    role: 'Developer', status: 'offline', favorite: false },
-      { id: 3, name: 'Carol White',    email: 'carol@example.com',  role: 'Manager',   status: 'online',  favorite: true  },
-      { id: 4, name: 'Dave Kim',       email: 'dave@example.com',   role: 'Designer',  status: 'away',    favorite: false },
-      { id: 5, name: 'Eve Torres',     email: 'eve@example.com',    role: 'Developer', status: 'online',  favorite: false },
+      { id: 1, name: 'Tony Wiedman',     email: 'tony@z-query.com',     role: 'Developer', status: 'online',  favorite: true  },
+      { id: 2, name: 'Robert Baratheon', email: 'robert@stormlands.io', role: 'Manager',   status: 'offline', favorite: false },
+      { id: 3, name: 'Terry A. Davis',   email: 'terry@templeos.net',   role: 'Developer', status: 'online',  favorite: true  },
+      { id: 4, name: 'Trevor Moore',     email: 'trevor@wkuk.tv',       role: 'Designer',  status: 'away',    favorite: false },
+      { id: 5, name: 'Carlo Acutis',     email: 'carlo@vatican.va',     role: 'Developer', status: 'online',  favorite: false },
     ],
     contactsAdded: 0,
   },

package/cli/scaffold/{styles/styles.css → global.css}

@@ -1,4 +1,4 @@
-/* styles/styles.css — responsive scaffold styles
+/* global.css — responsive scaffold styles
  *
  * Uses CSS custom properties for easy theming.
  * Dark theme by default, light theme via [data-theme="light"].
@@ -103,6 +103,7 @@ code { background: var(--bg-hover); padding: 2px 6px; border-radius: 4px; font-s
   transition: all 0.15s ease;
   border-left: 3px solid transparent;
   cursor: pointer;
+  user-select: none;
 }
 
 .nav-link:hover {
@@ -116,7 +117,8 @@ code { background: var(--bg-hover); padding: 2px 6px; border-radius: 4px; font-s
   border-left-color: var(--accent);
 }
 
-.nav-icon { font-size: 1.05rem; width: 1.4rem; text-align: center; }
+.nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; }
+.nav-icon svg { width: 18px; height: 18px; flex-shrink: 0; }
 
 .sidebar-footer {
   padding: 0.75rem 1.25rem;

package/cli/scaffold/index.html

@@ -5,35 +5,36 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>{{NAME}}</title>
   <base href="/">
-  <link rel="stylesheet" href="styles/styles.css">
-  <script src="scripts/vendor/zquery.min.js"></script>
-  <script type="module" src="scripts/app.js"></script>
+  <link rel="stylesheet" href="global.css">
+  <link rel="icon" type="image/png" href="favicon.ico">
+  <script src="zquery.min.js"></script>
+  <script type="module" src="app/app.js"></script>
 </head>
 <body>
 
   <!-- Sidebar Navigation -->
   <aside class="sidebar" id="sidebar">
     <div class="sidebar-header">
-      <span class="brand">⚡ {{NAME}}</span>
+      <span class="brand"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="var(--accent)" style="width:18px;height:18px;vertical-align:-3px;margin-right:0.2rem;"><path fill-rule="evenodd" d="M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z" clip-rule="evenodd"/></svg> {{NAME}}</span>
     </div>
     <nav class="sidebar-nav">
       <a z-link="/" class="nav-link">
-        <span class="nav-icon">🏠</span> Home
+        <span class="nav-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955a1.126 1.126 0 0 1 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/></svg></span> Home
       </a>
       <a z-link="/counter" class="nav-link">
-        <span class="nav-icon">🔢</span> Counter
+        <span class="nav-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5"/></svg></span> Counter
       </a>
       <a z-link="/todos" class="nav-link">
-        <span class="nav-icon">✅</span> Todos
+        <span class="nav-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg></span> Todos
       </a>
       <a z-link="/contacts" class="nav-link">
-        <span class="nav-icon">📇</span> Contacts
+        <span class="nav-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Zm6-10.125a1.875 1.875 0 1 1-3.75 0 1.875 1.875 0 0 1 3.75 0Zm1.294 6.336a6.721 6.721 0 0 1-3.17.789 6.721 6.721 0 0 1-3.168-.789 3.376 3.376 0 0 1 6.338 0Z"/></svg></span> Contacts
       </a>
       <a z-link="/api" class="nav-link">
-        <span class="nav-icon">🌐</span> API Demo
+        <span class="nav-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418"/></svg></span> API Demo
       </a>
       <a z-link="/about" class="nav-link">
-        <span class="nav-icon">💡</span> About
+        <span class="nav-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18"/></svg></span> About
       </a>
     </nav>
     <div class="sidebar-footer">
@@ -46,7 +47,7 @@
     <button class="hamburger" id="menu-toggle" aria-label="Toggle menu">
       <span></span><span></span><span></span>
     </button>
-    <span class="topbar-brand">⚡ {{NAME}}</span>
+    <span class="topbar-brand"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="var(--accent)" style="width:16px;height:16px;vertical-align:-2px;margin-right:0.15rem;"><path fill-rule="evenodd" d="M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z" clip-rule="evenodd"/></svg> {{NAME}}</span>
   </header>
 
   <!-- Overlay for mobile menu -->

package/cli/utils.js

@@ -83,15 +83,120 @@ function stripComments(code) {
 }
 
 // ---------------------------------------------------------------------------
-// minify — quick minification (strips comments + collapses whitespace)
+// minify — single-pass minification
+//   Strips comments, collapses whitespace to the minimum required,
+//   and preserves string / template-literal / regex content verbatim.
 // ---------------------------------------------------------------------------
 
 function minify(code, banner) {
-  const body = stripComments(code.replace(banner, ''))
-    .replace(/^\s*\n/gm, '')
-    .replace(/\n\s+/g, '\n')
-    .replace(/\s{2,}/g, ' ');
-  return banner + '\n' + body;
+  return banner + '\n' + _minifyBody(code.replace(banner, ''));
+}
+
+/**
+ * Single-pass minifier: walks character-by-character, skips strings/regex,
+ * strips comments, and emits a space only when both neighbours are
+ * identifier-like characters (or when collapsing would create ++, --, // or /*).
+ */
+function _minifyBody(code) {
+  let out = '';
+  let i = 0;
+
+  while (i < code.length) {
+    const ch = code[i];
+    const nx = code[i + 1];
+
+    // ── String / template literal: copy verbatim ────────────────
+    if (ch === '"' || ch === "'" || ch === '`') {
+      const q = ch;
+      out += ch; i++;
+      while (i < code.length) {
+        if (code[i] === '\\') { out += code[i] + (code[i + 1] || ''); i += 2; continue; }
+        out += code[i];
+        if (code[i] === q) { i++; break; }
+        i++;
+      }
+      continue;
+    }
+
+    // ── Block comment: skip ─────────────────────────────────────
+    if (ch === '/' && nx === '*') {
+      i += 2;
+      while (i < code.length && !(code[i] === '*' && code[i + 1] === '/')) i++;
+      i += 2;
+      continue;
+    }
+
+    // ── Line comment: skip ──────────────────────────────────────
+    if (ch === '/' && nx === '/') {
+      i += 2;
+      while (i < code.length && code[i] !== '\n') i++;
+      continue;
+    }
+
+    // ── Regex literal: copy verbatim ────────────────────────────
+    if (ch === '/') {
+      if (_isRegexCtx(out)) {
+        out += ch; i++;
+        let inCC = false;
+        while (i < code.length) {
+          const rc = code[i];
+          if (rc === '\\') { out += rc + (code[i + 1] || ''); i += 2; continue; }
+          if (rc === '[') inCC = true;
+          if (rc === ']') inCC = false;
+          out += rc; i++;
+          if (rc === '/' && !inCC) {
+            while (i < code.length && /[gimsuy]/.test(code[i])) { out += code[i]; i++; }
+            break;
+          }
+        }
+        continue;
+      }
+    }
+
+    // ── Whitespace: collapse ────────────────────────────────────
+    if (ch === ' ' || ch === '\t' || ch === '\n' || ch === '\r') {
+      while (i < code.length && (code[i] === ' ' || code[i] === '\t' || code[i] === '\n' || code[i] === '\r')) i++;
+      const before = out[out.length - 1];
+      const after  = code[i];
+      if (_needsSpace(before, after)) out += ' ';
+      continue;
+    }
+
+    out += ch;
+    i++;
+  }
+
+  return out;
+}
+
+/** True when removing the space between a and b would change semantics. */
+function _needsSpace(a, b) {
+  if (!a || !b) return false;
+  const idA = (a >= 'a' && a <= 'z') || (a >= 'A' && a <= 'Z') || (a >= '0' && a <= '9') || a === '_' || a === '$';
+  const idB = (b >= 'a' && b <= 'z') || (b >= 'A' && b <= 'Z') || (b >= '0' && b <= '9') || b === '_' || b === '$';
+  if (idA && idB) return true;   // e.g. const x, return value
+  if (a === '+' && b === '+') return true; // prevent ++
+  if (a === '-' && b === '-') return true; // prevent --
+  if (a === '/' && (b === '/' || b === '*')) return true; // prevent // or /*
+  return false;
+}
+
+/** Heuristic: is the next '/' a regex start (vs division)? */
+function _isRegexCtx(out) {
+  let end = out.length - 1;
+  while (end >= 0 && out[end] === ' ') end--;
+  if (end < 0) return true;
+  const last = out[end];
+  if ('=({[,;:!&|?~+-*/%^>'.includes(last)) return true;
+  const tail = out.substring(Math.max(0, end - 7), end + 1);
+  const kws = ['return', 'typeof', 'case', 'in', 'delete', 'void', 'throw', 'new'];
+  for (const kw of kws) {
+    if (tail.endsWith(kw)) {
+      const pos = end - kw.length;
+      if (pos < 0 || !((out[pos] >= 'a' && out[pos] <= 'z') || (out[pos] >= 'A' && out[pos] <= 'Z') || (out[pos] >= '0' && out[pos] <= '9') || out[pos] === '_' || out[pos] === '$')) return true;
+    }
+  }
+  return false;
 }
 
 // ---------------------------------------------------------------------------