zero-query 0.9.9 → 1.0.1

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 { display: block; 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 { display: block; 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

@@ -1,4 +1,4 @@
-// app.js — Client entry point
+// app.js - Client entry point
 //
 // Imports shared component definitions and registers them with zQuery.
 // The SSR server imports the same definitions via createSSRApp().
@@ -15,7 +15,6 @@ $.component('not-found',  notFound);
 
 // Client-side router
 const router = $.router({
-  el: '#app',
   routes,
   fallback: 'not-found',
   mode: 'history'

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

@@ -1,12 +1,12 @@
-// about.js — About page component
+// 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',
+      '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',
     ]

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

@@ -1,4 +1,4 @@
-// home.js — Home page component
+// 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().
@@ -9,7 +9,7 @@ export const homePage = {
     timestamp: new Date().toLocaleTimeString(),
   }),
 
-  // init() runs on both client and server — no DOM required
+  // init() runs on both client and server - no DOM required
   init() {
     const hour = new Date().getHours();
     this.state.greeting =

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

@@ -1,4 +1,4 @@
-// not-found.js — 404 fallback component
+// not-found.js - 404 fallback component
 
 export const notFound = {
   render() {
@@ -7,7 +7,7 @@ export const notFound = {
         <h1>404</h1>
         <p class="subtitle">Page not found.</p>
         <p style="margin-top:1rem;">
-          <a href="/" style="color:var(--accent);">← Home</a>
+          <a z-link="/" style="color:var(--accent);">← Home</a>
         </p>
       </div>
     `;

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

@@ -1,4 +1,4 @@
-// routes.js — Route definitions (shared between client and server)
+// routes.js - Route definitions (shared between client and server)
 
 export const routes = [
   { path: '/',     component: 'home-page'  },

package/cli/scaffold/ssr/global.css

@@ -1,4 +1,4 @@
-/* global.css — SSR Scaffold Styles */
+/* global.css - SSR Scaffold Styles */
 
 *, *::before, *::after {
   box-sizing: border-box;
@@ -56,14 +56,13 @@ body {
 }
 
 /* -- Main content -- */
-#app {
+z-outlet {
+  display: block;
   max-width: 800px;
   margin: 2rem auto;
   padding: 0 1.5rem;
 }
 
-[z-cloak] { display: none !important; }
-
 .page-header {
   margin-bottom: var(--gap);
 }

package/cli/scaffold/ssr/index.html

@@ -20,8 +20,8 @@
     </div>
   </nav>
 
-  <!-- Main content — SSR output is injected here by the server -->
-  <main id="app" z-cloak></main>
+  <!-- Main content - SSR output is injected here by the server -->
+  <z-outlet></z-outlet>
 
   <footer class="footer">
     <small>Built with zQuery · SSR Scaffold</small>