zero-query 0.7.5 → 0.8.7

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"].
@@ -117,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,36 +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">
+  <link rel="stylesheet" href="global.css">
   <link rel="icon" type="image/png" href="favicon.ico">
-  <script src="scripts/vendor/zquery.min.js"></script>
-  <script type="module" src="scripts/app.js"></script>
+  <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">
@@ -47,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 -->