zero-query 0.9.8 → 1.0.0

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

@@ -1,11 +1,11 @@
-// home.js — Landing page / dashboard
+// home.js - Landing page / dashboard
 //
 // Features used:
-//   $.component   — define a component with state + render
-//   $.signal      — reactive value container
-//   $.computed    — derived reactive value
-//   $.effect      — side-effect that auto-tracks signals
-//   $.getStore    — access the global store
+//   $.component   - define a component with state + render
+//   $.signal      - reactive value container
+//   $.computed    - derived reactive value
+//   $.effect      - side-effect that auto-tracks signals
+//   $.getStore    - access the global store
 
 $.component('home-page', {
   styles: `
@@ -136,7 +136,7 @@ $.component('home-page', {
   render() {
     const store = $.getStore('main');
     const s = this.state;
-    const opLabels = { add: '+', subtract: '−', multiply: '×', divide: '÷', power: '^', modulo: '%' };
+    const opLabels = { add: '+', subtract: '-', multiply: '×', divide: '÷', power: '^', modulo: '%' };
     const maxH = Math.max(1, ...s.sigHistory.map(v => Math.sqrt(Math.abs(v) + 1)));
     return `
       <div class="page-header">
@@ -146,13 +146,13 @@ $.component('home-page', {
 
       <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 Lab</h3>
-        <p style="margin-bottom:.65rem;">Signals are <strong>reactive primitives</strong> — values that automatically notify dependents when they change.
+        <p style="margin-bottom:.65rem;">Signals are <strong>reactive primitives</strong> - values that automatically notify dependents when they change.
           Adjust <strong>A</strong> and <strong>B</strong> below and watch the computed result update instantly, with no manual DOM wiring.</p>
 
         <div class="sig-lab">
           <div class="sig-row">
             <div class="sig-op">
-              <button class="btn btn-sm btn-ghost" @click="bumpA(-1)">−</button>
+              <button class="btn btn-sm btn-ghost" @click="bumpA(-1)">-</button>
               <div class="sig-val"><small>A</small> <span>${s.sigA}</span></div>
               <button class="btn btn-sm btn-ghost" @click="bumpA(1)">+</button>
             </div>
@@ -170,7 +170,7 @@ $.component('home-page', {
               </div>
             </div>
             <div class="sig-op">
-              <button class="btn btn-sm btn-ghost" @click="bumpB(-1)">−</button>
+              <button class="btn btn-sm btn-ghost" @click="bumpB(-1)">-</button>
               <div class="sig-val"><small>B</small> <span>${s.sigB}</span></div>
               <button class="btn btn-sm btn-ghost" @click="bumpB(1)">+</button>
             </div>
@@ -186,7 +186,7 @@ $.component('home-page', {
             <div class="sig-graph">
               ${s.sigHistory.map(v => `<div class="sig-bar" style="height:${Math.max(6, (Math.sqrt(Math.abs(v) + 1) / maxH) * 56)}px;"></div>`).join('')}
             </div>
-            <div style="font-size:.75rem;color:var(--text-muted);margin-top:.35rem;">Result history — ${s.sigHistory.length} values tracked by <code>effect()</code></div>
+            <div style="font-size:.75rem;color:var(--text-muted);margin-top:.35rem;">Result history - ${s.sigHistory.length} values tracked by <code>effect()</code></div>
           ` : ''}
         </div>
 
@@ -197,11 +197,11 @@ $.component('home-page', {
           </div>
           <div class="sig-concept">
             <h4>Computed</h4>
-            <p>A derived value that re-evaluates when its dependencies change. <code>$.computed(() => A + B)</code> recalculates whenever A or B updates — no manual calls.</p>
+            <p>A derived value that re-evaluates when its dependencies change. <code>$.computed(() => A + B)</code> recalculates whenever A or B updates - no manual calls.</p>
           </div>
           <div class="sig-concept">
             <h4>Effect</h4>
-            <p>A side-effect that runs automatically when tracked signals change. The bar chart above is powered by <code>$.effect()</code> — it records every new result.</p>
+            <p>A side-effect that runs automatically when tracked signals change. The bar chart above is powered by <code>$.effect()</code> - it records every new result.</p>
           </div>
         </div>
       </div>

package/cli/scaffold/default/app/components/not-found.js

@@ -1,4 +1,4 @@
-// not-found.js — 404 fallback page
+// not-found.js - 404 fallback page
 //
 // Uses $.getRouter() to display the unmatched path.
 

package/cli/scaffold/default/app/components/playground/playground.css

@@ -1,4 +1,4 @@
-/* playground.css — scoped styles for the playground page component */
+/* playground.css - scoped styles for the playground page component */
 
 .pg-section        { display: flex; align-items: center; gap: .5rem;
                      font-size: .72rem; font-weight: 600; text-transform: uppercase;

package/cli/scaffold/default/app/components/playground/playground.html

@@ -1,12 +1,12 @@
 <!--
-  playground.html — external template for playground-page component
+  playground.html - external template for playground-page component
 
-  Interactive UI patterns — event modifiers, animations, reactive bindings,
+  Interactive UI patterns - event modifiers, animations, reactive bindings,
   and plugins. Uses {{expression}} syntax for data binding.
 -->
 <div class="page-header" z-cloak>
   <h1>Playground</h1>
-  <p class="subtitle">Interactive UI patterns — event modifiers, animations, reactive bindings, and plugins.</p>
+  <p class="subtitle">Interactive UI patterns - event modifiers, animations, reactive bindings, and plugins.</p>
 </div>
 
 <!-- ── Interaction Patterns ──────────────────────────── -->
@@ -14,7 +14,7 @@
 
 <div class="card" style="position:relative;z-index:2;">
   <h3>Dropdown → Modal Flow</h3>
-  <p>Select an action from the <code>@click.outside</code> dropdown — it opens a confirmation modal. Dismiss via overlay (<code>@click.self</code>) or <kbd style="padding:.1rem .35rem;background:var(--bg-hover);border-radius:4px;font-size:.82rem;">Esc</kbd>.</p>
+  <p>Select an action from the <code>@click.outside</code> dropdown - it opens a confirmation modal. Dismiss via overlay (<code>@click.self</code>) or <kbd style="padding:.1rem .35rem;background:var(--bg-hover);border-radius:4px;font-size:.82rem;">Esc</kbd>.</p>
   <div style="display:flex;align-items:center;gap:1rem;flex-wrap:wrap;">
     <div class="pg-dropdown" @click.outside="closeDropdown">
       <button class="btn btn-primary" @click="toggleDropdown">
@@ -30,7 +30,7 @@
     <button z-else class="btn btn-ghost" disabled>✓ Once fired</button>
   </div>
 
-  <!-- Modal — faded in via JS, dismissed via overlay @click.self or Escape -->
+  <!-- Modal - faded in via JS, dismissed via overlay @click.self or Escape -->
   <div class="pg-modal-backdrop" z-if="modalOpen" style="display:none" @click.self="closeModal">
     <div class="pg-modal" @keydown.escape="closeModal" tabindex="-1">
       <h3>Confirm: <span z-text="dropdownSelected || 'Action'"></span></h3>
@@ -57,7 +57,7 @@
         <span id="pg-acc-icon-a" class="pg-accordion-icon">▸</span>
       </button>
       <div id="pg-acc-a" style="display:none">
-        <div class="pg-accordion-body">A zero-dependency frontend library for reactive SPAs — components, routing, stores, HTTP, and 200+ utilities in one ~28 KB file.</div>
+        <div class="pg-accordion-body">A zero-dependency frontend library for reactive SPAs - components, routing, stores, HTTP, and 200+ utilities in one ~28 KB file.</div>
       </div>
     </div>
     <div class="pg-accordion-item">
@@ -87,7 +87,7 @@
 <div class="card-grid">
   <div class="card">
     <h3>Dynamic Styles</h3>
-    <p>Object binding via <code>z-style</code> — inline styles update reactively.</p>
+    <p>Object binding via <code>z-style</code> - inline styles update reactively.</p>
     <div class="pg-style-preview" z-style="{ color: previewColor, fontSize: previewSize + 'px', borderRadius: previewRadius + 'px', borderColor: previewColor }">
       Live Preview
     </div>
@@ -100,14 +100,14 @@
 
   <div class="card">
     <h3>Rich Content</h3>
-    <p>Render trusted HTML with <code>z-html</code> — only use with sanitized content.</p>
+    <p>Render trusted HTML with <code>z-html</code> - only use with sanitized content.</p>
     <textarea z-model="richContent" class="input" rows="2" style="resize:vertical;"></textarea>
     <div class="pg-rich-preview" style="margin-top:.5rem;" z-html="richContent"></div>
   </div>
 
   <div class="card">
     <h3>Conditional Classes</h3>
-    <p>Switch a single class from a set using <code>z-class</code> — the object syntax applies only the matching key.</p>
+    <p>Switch a single class from a set using <code>z-class</code> - the object syntax applies only the matching key.</p>
     <div class="pg-variant-row">
       <div class="pg-variant-box" z-class="{'info': variant === 'info', 'success': variant === 'success', 'warning': variant === 'warning', 'danger': variant === 'danger'}">
         {{variant.charAt(0).toUpperCase() + variant.slice(1)}} Variant
@@ -128,7 +128,7 @@
 
 <div class="card">
   <h3>Key &amp; System Modifiers</h3>
-  <p>Template-level keyboard filtering — no manual <code>e.key</code> checks needed.</p>
+  <p>Template-level keyboard filtering - no manual <code>e.key</code> checks needed.</p>
   <div style="display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;">
     <input type="text" class="input input-sm" placeholder="Press Enter…" @keyup.enter="logShortcut('Enter ↵')" style="flex:1;min-width:140px;" />
     <button class="btn btn-sm btn-outline" @click.ctrl="logShortcut('Ctrl+Click')">Ctrl+Click</button>
@@ -144,7 +144,7 @@
 <div class="pg-section">Plugin System</div>
 
 <div class="card">
-  <h3><code>$.fn</code> — Extend the Collection</h3>
+  <h3><code>$.fn</code> - Extend the Collection</h3>
   <p>Register custom chainable methods on every <code>$(...)</code> selection. Click the buttons to trigger each plugin.</p>
   <div id="pg-plugin-box" class="pg-plugin-target">✦ Target Element</div>
   <div class="pg-plugin-btns">

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

@@ -1,14 +1,14 @@
-// playground.js — Interactive UI patterns
+// playground.js - Interactive UI patterns
 //
 // Features used:
-//   @click.outside / .self / .once  — event modifiers
-//   @keydown.escape / @keyup.enter  — keyboard modifiers
-//   fadeIn / fadeOut / slideToggle   — DOM animations
-//   z-style                         — reactive inline styles
-//   z-html                          — trusted HTML rendering
-//   $.fn                            — collection plugin system
-//   z-skip                          — morph opt-out
-//   templateUrl / styleUrl          — external files
+//   @click.outside / .self / .once  - event modifiers
+//   @keydown.escape / @keyup.enter  - keyboard modifiers
+//   fadeIn / fadeOut / slideToggle   - DOM animations
+//   z-style                         - reactive inline styles
+//   z-html                          - trusted HTML rendering
+//   $.fn                            - collection plugin system
+//   z-skip                          - morph opt-out
+//   templateUrl / styleUrl          - external files
 
 // ── $.fn Plugins ─────────────────────────────────────────────────
 $.fn.highlight = function (color = 'var(--accent)') {
@@ -88,7 +88,7 @@ $.component('playground-page', {
     $.bus.emit('toast', { message: `${item} confirmed!`, type: 'success' });
   },
 
-  /* Accordion — pure DOM, z-skip prevents morph interference */
+  /* Accordion - pure DOM, z-skip prevents morph interference */
   toggleAccordion(id) {
     $(this._el).find(`#pg-acc-${id}`).slideToggle(250);
     $(this._el).find(`#pg-acc-icon-${id}`).toggleClass('open');
@@ -112,6 +112,6 @@ $.component('playground-page', {
   /* @click.once */
   onceAction() {
     this.state.onceClicked = true;
-    $.bus.emit('toast', { message: 'Fired once — handler auto-removed!', type: 'info' });
+    $.bus.emit('toast', { message: 'Fired once - handler auto-removed!', type: 'info' });
   },
 });

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

@@ -1,12 +1,12 @@
-// todos.js — Todo list with global store
+// todos.js - Todo list with global store
 //
 // Features used:
-//   $.getStore / dispatch / subscribe  — centralized state management
-//   z-model / z-ref                    — form bindings
-//   z-for + z-key                      — keyed list rendering with diffing
-//   z-class / z-if / z-show            — conditional rendering
-//   @submit.prevent / @keydown.escape  — event modifiers
-//   mounted / destroyed lifecycle      — setup & teardown
+//   $.getStore / dispatch / subscribe  - centralized state management
+//   z-model / z-ref                    - form bindings
+//   z-for + z-key                      - keyed list rendering with diffing
+//   z-class / z-if / z-show            - conditional rendering
+//   @submit.prevent / @keydown.escape  - event modifiers
+//   mounted / destroyed lifecycle      - setup & teardown
 
 $.component('todos-page', {
   styles: `
@@ -204,7 +204,7 @@ $.component('todos-page', {
 
         <div z-if="filtered.length === 0" class="td-empty">
           <div class="td-empty-icon">${this.state.total === 0 ? '📝' : '🔍'}</div>
-          <p>${this.state.total === 0 ? 'No todos yet — type something above and hit Add!' : 'No matching todos for this filter.'}</p>
+          <p>${this.state.total === 0 ? 'No todos yet - type something above and hit Add!' : 'No matching todos for this filter.'}</p>
         </div>
 
         <ul z-else class="td-list">

package/cli/scaffold/default/app/components/toolkit/toolkit.css

@@ -1,4 +1,4 @@
-/* toolkit.css — scoped styles for the toolkit page component */
+/* toolkit.css - scoped styles for the toolkit page component */
 
 .tk-tabs       { display: flex; padding: .35rem;
                  background: var(--bg-surface);

package/cli/scaffold/default/app/components/toolkit/toolkit.html

@@ -1,5 +1,5 @@
 <!--
-  toolkit.html — external template for toolkit-page component
+  toolkit.html - external template for toolkit-page component
 
   HTTP client with interceptors, 30+ utility functions, and advanced
   store patterns. Uses {{expression}} syntax and z-if / z-for / z-show.
@@ -65,7 +65,7 @@
 <div z-else-if="activeTab === 'utils'">
   <div class="card">
     <h3>Utility Belt</h3>
-    <p>30+ built-in helpers — select a category to run a live demo.</p>
+    <p>30+ built-in helpers - select a category to run a live demo.</p>
 
     <div class="tk-util-grid">
       <div class="tk-util-card {{activeUtil === 'pipe' ? 'selected' : ''}}" @click="runUtil('pipe')">
@@ -102,7 +102,7 @@
 <div z-else>
   <div class="card" style="margin-bottom:.75rem;">
     <h3>Store Inspector</h3>
-    <p>Live view into the reactive store — middleware, snapshots, and action history.</p>
+    <p>Live view into the reactive store - middleware, snapshots, and action history.</p>
 
     <div style="display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem;">
       <div class="tk-stat">
@@ -134,7 +134,7 @@
 
   <div class="card card-muted" z-show="storeLog.length > 0">
     <h3>Middleware Log</h3>
-    <p style="color:var(--text-muted);font-size:.85rem;margin-bottom:.5rem;">Real-time log from <code>store.use()</code> — interact with other pages to generate entries.</p>
+    <p style="color:var(--text-muted);font-size:.85rem;margin-bottom:.5rem;">Real-time log from <code>store.use()</code> - interact with other pages to generate entries.</p>
     <div class="tk-log">
       <div z-for="entry in storeLog" z-key="{{entry.id}}" class="tk-log-entry">
         <span style="color:var(--text-muted);font-size:.78rem;min-width:65px;">{{entry.time}}</span>

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

@@ -1,11 +1,11 @@
-// toolkit.js — HTTP, utilities, and advanced store features
+// toolkit.js - HTTP, utilities, and advanced store features
 //
 // Features used:
-//   $.http / $.post / $.put / $.delete  — HTTP client + interceptors
-//   $.pipe / $.memoize / $.retry        — functional utilities
-//   $.groupBy / $.chunk / $.unique      — collection helpers
-//   store.use / snapshot / history      — middleware & time-travel
-//   templateUrl / styleUrl              — external template & styles
+//   $.http / $.post / $.put / $.delete  - HTTP client + interceptors
+//   $.pipe / $.memoize / $.retry        - functional utilities
+//   $.groupBy / $.chunk / $.unique      - collection helpers
+//   store.use / snapshot / history      - middleware & time-travel
+//   templateUrl / styleUrl              - external template & styles
 
 $.component('toolkit-page', {
   templateUrl: 'toolkit.html',
@@ -32,7 +32,7 @@ $.component('toolkit-page', {
     actionCount: 0,
   }),
 
-  // init() lifecycle — runs before the first render
+  // init() lifecycle - runs before the first render
   init() {
     this._prevBaseURL = $.http.getConfig().baseURL || '';
     $.http.configure({ baseURL: 'https://jsonplaceholder.typicode.com' });

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

@@ -1,4 +1,4 @@
-// routes.js — Route definitions
+// routes.js - Route definitions
 //
 // Maps URL paths to component tag names.
 // Also supports :params, wildcards, and lazy loading via `load`.

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

@@ -1,4 +1,4 @@
-// store.js — Global state management
+// store.js - Global state management
 //
 // Defines a centralized store with state, actions, and getters.
 // Any component can access it via $.getStore('main').

package/cli/scaffold/default/global.css

@@ -1,4 +1,4 @@
-/* global.css — responsive scaffold styles
+/* global.css - responsive scaffold styles
  *
  * Uses CSS custom properties for easy theming. Feel free to modify.
  * Dark theme by default, light theme via [data-theme="light"].
@@ -504,7 +504,7 @@ code { background: var(--bg-hover); padding: 2px 6px; border-radius: 4px; font-s
 @keyframes toast-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-10px) scale(0.95); } }
 
 /* -- Route Transition -- */
-#app { animation: fade-in 0.25s var(--ease-out); }
+z-outlet { animation: fade-in 0.25s var(--ease-out); }
 @keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
 
 /* -- Responsive: Mobile -- */

package/cli/scaffold/default/index.html

@@ -86,8 +86,8 @@
   <div class="overlay" id="overlay"></div>
 
   <!-- @ Router Outlet  @ -->
-  <main class="content" id="app"></main>
-  <!-- @  Mount point is set in app/app.js  @ -->
+  <z-outlet class="content"></z-outlet>
+  <!-- @  Auto-detected by $.router()  @ -->
 
   <!-- Toast container for notifications -->
   <div class="toast-container" id="toasts"></div>

package/cli/scaffold/minimal/app/app.js

@@ -1,13 +1,13 @@
-// app.js — Application entry point
+// app.js - Application entry point
 //
 // Bootstraps the app: imports components, sets up routing,
 // and wires the responsive sidebar.
 //
 // Key APIs used:
-//   $.router  — SPA navigation (history mode)
-//   $.ready   — run after DOM is loaded
-//   $.on      — global delegated event listeners
-//   $.storage — localStorage wrapper
+//   $.router  - SPA navigation (history mode)
+//   $.ready   - run after DOM is loaded
+//   $.on      - global delegated event listeners
+//   $.storage - localStorage wrapper
 
 import './store.js';
 import './components/home.js';
@@ -20,7 +20,6 @@ import { routes } from './routes.js';
 // Router
 // ---------------------------------------------------------------------------
 const router = $.router({
-  el: '#app',
   routes,
   fallback: 'not-found',
   mode: 'history'
@@ -75,7 +74,7 @@ $.ready(() => {
   const current = window.location.pathname;
   $.all(`.nav-link[z-link="${current}"]`).addClass('active');
 
-  console.log('⚡ {{NAME}} — powered by zQuery v' + $.version);
+  console.log('⚡ {{NAME}} - powered by zQuery v' + $.version);
 });
 
 // ---------------------------------------------------------------------------

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

@@ -1,9 +1,9 @@
-// about.js — About page with theme switcher
+// about.js - About page with theme switcher
 //
 // Features used:
-//   $.storage   — localStorage wrapper (get / set)
-//   $.version   — library version string
-//   data-theme  — dark / light theming
+//   $.storage   - localStorage wrapper (get / set)
+//   $.version   - library version string
+//   data-theme  - dark / light theming
 
 $.component('about-page', {
   styles: `
@@ -40,7 +40,7 @@ $.component('about-page', {
     return `
       <div class="page-header">
         <h1>About</h1>
-        <p class="subtitle">zQuery v${$.version} — zero-dependency frontend micro-library.</p>
+        <p class="subtitle">zQuery v${$.version} - zero-dependency frontend micro-library.</p>
       </div>
 
       <div class="card">

package/cli/scaffold/minimal/app/components/counter.js

@@ -1,9 +1,9 @@
-// counter.js — Interactive counter
+// counter.js - Interactive counter
 //
 // Features used:
-//   $.getStore / store.subscribe — shared state + live re-render
-//   @click / z-model + z-number  — events + two-way binding
-//   z-if / z-for / z-key         — conditional & keyed list rendering
+//   $.getStore / store.subscribe - shared state + live re-render
+//   @click / z-model + z-number  - events + two-way binding
+//   z-if / z-for / z-key         - conditional & keyed list rendering
 
 $.component('counter-page', {
   styles: `
@@ -62,7 +62,7 @@ $.component('counter-page', {
   decrement() {
     const store = $.getStore('main');
     store.dispatch('decrement');
-    this._pushHistory('−', store.state.step, store.state.count);
+    this._pushHistory('-', store.state.step, store.state.count);
   },
 
   setStep(e) {
@@ -96,7 +96,7 @@ $.component('counter-page', {
         </div>
 
         <div class="ctr-actions">
-          <button class="btn btn-outline" @click="decrement">− Subtract</button>
+          <button class="btn btn-outline" @click="decrement">- Subtract</button>
           <button class="btn btn-primary" @click="increment">+ Add</button>
         </div>
 

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

@@ -1,10 +1,10 @@
-// home.js — Landing page
+// home.js - Landing page
 //
 // Features used:
-//   $.component      — define a component
-//   $.getStore       — read/dispatch global store
-//   store.subscribe  — re-render on store changes
-//   @click / z-model — event binding + two-way input
+//   $.component      - define a component
+//   $.getStore       - read/dispatch global store
+//   store.subscribe  - re-render on store changes
+//   @click / z-model - event binding + two-way input
 
 $.component('home-page', {
   state: () => ({
@@ -41,7 +41,7 @@ $.component('home-page', {
       <div class="card">
         <h3>Getting Started</h3>
         <p>
-          This is the <strong>minimal</strong> scaffold — three pages, a global store,
+          This is the <strong>minimal</strong> scaffold - three pages, a global store,
           and the router. Edit the files in <code>app/</code> to start building.
         </p>
         <p>
@@ -52,9 +52,9 @@ $.component('home-page', {
 
       <div class="card">
         <h3>Global Store</h3>
-        <p>The counter from <a z-link="/counter">Counter</a> is backed by <code>$.store</code> — its value persists across pages:</p>
+        <p>The counter from <a z-link="/counter">Counter</a> is backed by <code>$.store</code> - its value persists across pages:</p>
         <div style="display:flex;align-items:center;gap:.75rem;margin-top:.75rem;">
-          <button class="btn btn-outline btn-sm" @click="decrement">−</button>
+          <button class="btn btn-outline btn-sm" @click="decrement">-</button>
           <span style="font-size:1.25rem;font-weight:700;color:var(--accent);min-width:2rem;text-align:center;">${count}</span>
           <button class="btn btn-primary btn-sm" @click="increment">+</button>
           <button class="btn btn-outline btn-sm" @click="reset" style="margin-left:.5rem;">Reset</button>

package/cli/scaffold/minimal/app/components/not-found.js

@@ -1,4 +1,4 @@
-// not-found.js — 404 fallback page
+// not-found.js - 404 fallback page
 //
 // Uses $.getRouter() to display the unmatched path.
 

package/cli/scaffold/minimal/app/routes.js

@@ -1,4 +1,4 @@
-// routes.js — Route definitions
+// routes.js - Route definitions
 //
 // Maps URL paths to component tag names.
 

package/cli/scaffold/minimal/app/store.js

@@ -1,4 +1,4 @@
-// store.js — Global state management
+// store.js - Global state management
 //
 // A simple centralized store. Any component can access it
 // via $.getStore('main') and dispatch actions to update state.

package/cli/scaffold/minimal/global.css

@@ -1,4 +1,4 @@
-/* global.css — minimal scaffold styles
+/* global.css - minimal scaffold styles
  *
  * Dark theme by default, light theme via [data-theme="light"].
  * Modify the CSS variables below to customise the look and feel.
@@ -259,7 +259,7 @@ code { background: var(--bg-hover); padding: 2px 6px; border-radius: 4px; font-s
 .muted { color: var(--text-muted); }
 
 /* -- Route Transition -- */
-#app { animation: fade-in 0.25s var(--ease-out); }
+z-outlet { animation: fade-in 0.25s var(--ease-out); }
 @keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
 
 /* -- Responsive: Mobile -- */

package/cli/scaffold/minimal/index.html

@@ -38,7 +38,7 @@
   <div class="overlay" id="overlay"></div>
 
   <!-- Router Outlet -->
-  <main class="content" id="app"></main>
+  <z-outlet class="content"></z-outlet>
 
 </body>
 </html>

package/cli/scaffold/ssr/app/app.js

@@ -0,0 +1,29 @@
+// app.js - Client entry point
+//
+// Imports shared component definitions and registers them with zQuery.
+// The SSR server imports the same definitions via createSSRApp().
+
+import { homePage }  from './components/home.js';
+import { aboutPage } from './components/about.js';
+import { notFound }  from './components/not-found.js';
+import { routes }    from './routes.js';
+
+// Register shared component definitions on the client
+$.component('home-page',  homePage);
+$.component('about-page', aboutPage);
+$.component('not-found',  notFound);
+
+// Client-side router
+const router = $.router({
+  routes,
+  fallback: 'not-found',
+  mode: 'history'
+});
+
+// Active nav highlighting
+router.onChange((to) => {
+  $.qsa('.nav-link').forEach(link => {
+    const href = link.getAttribute('z-link') || link.getAttribute('href');
+    link.classList.toggle('active', href === to.path);
+  });
+});

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

@@ -0,0 +1,28 @@
+// about.js - About page component
+
+export const aboutPage = {
+  state: () => ({
+    features: [
+      'createSSRApp() - isolated component registry for Node.js',
+      'renderToString() - render a component to an HTML string',
+      'renderPage() - full HTML document with meta tags',
+      'renderBatch() - render multiple components in one call',
+      'Hydration markers (data-zq-ssr) for client takeover',
+      'SEO: description, canonical URL, Open Graph tags',
+    ]
+  }),
+
+  render() {
+    const list = this.state.features.map(f => `<li>${f}</li>`).join('');
+    return `
+      <div class="page-header">
+        <h1>About</h1>
+        <p class="subtitle">SSR capabilities in this scaffold.</p>
+      </div>
+      <div class="card">
+        <h3>SSR API</h3>
+        <ul style="padding-left:1.2rem; line-height:2;">${list}</ul>
+      </div>
+    `;
+  }
+};

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

@@ -0,0 +1,37 @@
+// home.js - Home page component
+//
+// Exports a plain definition object that works on both client and server.
+// The client registers it with $.component(), the server with app.component().
+
+export const homePage = {
+  state: () => ({
+    greeting: 'Hello',
+    timestamp: new Date().toLocaleTimeString(),
+  }),
+
+  // init() runs on both client and server - no DOM required
+  init() {
+    const hour = new Date().getHours();
+    this.state.greeting =
+      hour < 12 ? 'Good morning' :
+      hour < 18 ? 'Good afternoon' : 'Good evening';
+  },
+
+  render() {
+    return `
+      <div class="page-header">
+        <h1>${this.state.greeting} 👋</h1>
+        <p class="subtitle">Rendered with zQuery SSR</p>
+      </div>
+      <div class="card">
+        <h3>Server-Side Rendering</h3>
+        <p>
+          This page was rendered to HTML on the server and served as a complete
+          document. The same component definition powers both the SSR server and
+          the client-side SPA.
+        </p>
+        <p>Rendered at <strong>${this.state.timestamp}</strong></p>
+      </div>
+    `;
+  }
+};