zero-query 1.0.9 → 1.2.0

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

@@ -1,116 +1,116 @@
-/* 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;
-                     letter-spacing: .06em; color: var(--text-muted);
-                     margin: 2rem 0 .75rem; }
-.pg-section::after { content: ''; flex: 1; height: 1px; background: var(--border); }
-
-.pg-dropdown       { position: relative; display: inline-block; }
-.pg-dropdown-menu  { position: absolute; top: calc(100% + 6px); left: 0;
-                     min-width: 200px; background: var(--bg-surface);
-                     border: 1px solid var(--border);
-                     border-radius: var(--radius-lg);
-                     box-shadow: 0 12px 40px rgba(0,0,0,.4);
-                     z-index: 50; overflow: hidden; }
-.pg-dropdown-item  { display: flex; align-items: center; gap: .6rem;
-                     padding: .6rem .9rem; cursor: pointer;
-                     color: var(--text); font-size: .9rem; transition: background .12s; }
-.pg-dropdown-item:hover { background: var(--accent-soft); color: var(--accent); }
-
-.pg-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.6);
-                     display: flex; align-items: center; justify-content: center;
-                     z-index: 1000; backdrop-filter: blur(4px); }
-.pg-modal          { background: var(--bg-surface);
-                     border: 1px solid var(--border);
-                     border-radius: var(--radius-lg); padding: 1.75rem 2rem;
-                     max-width: 460px; width: 90%;
-                     box-shadow: 0 24px 80px rgba(0,0,0,.5); outline: none; }
-.pg-modal h3       { margin: 0 0 .5rem; font-size: 1.15rem; }
-.pg-modal-footer   { display: flex; justify-content: flex-end; gap: .5rem;
-                     margin-top: 1.25rem; }
-
-.pg-accordion      { border: 1px solid var(--border);
-                     border-radius: var(--radius-lg); overflow: hidden;
-                     position: relative; z-index: 1; }
-.pg-accordion-item + .pg-accordion-item { border-top: 1px solid var(--border); }
-.pg-accordion-hdr  { width: 100%; padding: .85rem 1.15rem; background: none;
-                     border: none; color: var(--text); font-family: inherit;
-                     font-size: .95rem; cursor: pointer;
-                     display: flex; justify-content: space-between;
-                     align-items: center; text-align: left;
-                     transition: background .12s; }
-.pg-accordion-hdr:hover { background: rgba(88,166,255,.04); }
-.pg-accordion-icon { transition: transform .25s ease; font-size: .75rem;
-                     color: var(--text-muted); }
-.pg-accordion-icon.open { transform: rotate(90deg); }
-.pg-accordion-body { padding: 0 1.15rem 1rem; color: var(--text-muted);
-                     font-size: .9rem; line-height: 1.6; }
-
-.pg-style-preview  { padding: 1.5rem; border-radius: var(--radius-lg);
-                     text-align: center; font-weight: 600;
-                     transition: all .25s ease;
-                     border: 2px solid var(--border);
-                     background: var(--bg-hover); }
-.pg-style-ctrls    { display: flex; gap: 1.25rem; margin-top: .85rem;
-                     flex-wrap: wrap; align-items: center; }
-.pg-style-ctrls label { display: flex; align-items: center; gap: .4rem;
-                        font-size: .85rem; color: var(--text-muted); }
-.pg-style-ctrls input[type="range"] { width: 90px; max-width: 100%; accent-color: var(--accent); }
-.pg-style-ctrls input[type="color"] { width: 28px; height: 28px; border: none;
-                                      cursor: pointer; border-radius: 4px; }
-
-.pg-rich-preview   { padding: .85rem 1rem; border-radius: var(--radius);
-                     background: rgba(88,166,255,.03);
-                     border: 1px solid var(--border);
-                     font-size: .9rem; line-height: 1.6; }
-
-.pg-shortcut-log   { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }
-.pg-badge          { display: inline-flex; align-items: center; padding: .25rem .6rem;
-                     border-radius: 6px; background: var(--accent-soft);
-                     color: var(--accent); font-size: .8rem; font-weight: 500;
-                     border: 1px solid rgba(88,166,255,.15); }
-
-.pg-plugin-target  { padding: 1.5rem; border-radius: var(--radius-lg);
-                     background: var(--bg-hover); border: 2px dashed var(--border);
-                     text-align: center; font-weight: 600; font-size: 1rem;
-                     transition: box-shadow .3s ease, transform .06s ease; }
-.pg-plugin-btns    { display: flex; gap: .5rem; margin-top: .75rem; flex-wrap: wrap; }
-.pg-code           { font-size: .8rem; line-height: 1.5; padding: .85rem 1rem;
-                     border-radius: var(--radius); background: rgba(0,0,0,.25);
-                     overflow-x: auto; margin-top: .75rem;
-                     border: 1px solid var(--border); color: var(--text-muted);
-                     max-width: 100%; word-break: break-all; }
-
-.pg-variant-row    { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; }
-.pg-variant-box    { padding: .85rem 1.5rem; border-radius: var(--radius-lg);
-                     font-weight: 600; font-size: .95rem;
-                     border: 2px solid var(--border); text-align: center;
-                     transition: all .3s var(--ease-out); min-width: 160px; }
-.pg-variant-box.info    { background: rgba(88,166,255,.12); color: var(--accent);
-                          border-color: var(--accent); box-shadow: 0 0 16px rgba(88,166,255,.12); }
-.pg-variant-box.success { background: rgba(63,185,80,.12); color: var(--success);
-                          border-color: var(--success); box-shadow: 0 0 16px rgba(63,185,80,.12); }
-.pg-variant-box.warning { background: rgba(210,153,34,.12); color: var(--warning);
-                          border-color: var(--warning); box-shadow: 0 0 16px rgba(210,153,34,.12); }
-.pg-variant-box.danger  { background: rgba(248,81,73,.12); color: var(--danger);
-                          border-color: var(--danger); box-shadow: 0 0 16px rgba(248,81,73,.12); }
-.pg-variant-pills  { display: flex; gap: .4rem; flex-wrap: wrap; }
-.pg-vpill          { padding: .3rem .75rem; border-radius: 999px; font-size: .82rem;
-                     font-weight: 500; border: 1px solid var(--border); background: transparent;
-                     color: var(--text-muted); cursor: pointer; transition: all .15s; }
-.pg-vpill:hover    { border-color: var(--accent); color: var(--text); }
-.pg-vpill.on       { background: var(--accent); color: #fff; border-color: var(--accent); }
-
-/* ── Responsive ── */
-@media (max-width: 768px) {
-  .pg-variant-box    { min-width: 0; flex: 1 1 100%; }
-  .pg-variant-row    { flex-direction: column; }
-  .pg-style-ctrls    { gap: .75rem; }
-  .pg-style-ctrls input[type="range"] { width: 100%; min-width: 60px; flex: 1; }
-  .pg-modal          { padding: 1.25rem; }
-  .pg-dropdown-menu  { min-width: 160px; }
-}
-@media (max-width: 480px) {
-  .pg-style-ctrls    { flex-direction: column; align-items: stretch; }
+/* 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;
+                     letter-spacing: .06em; color: var(--text-muted);
+                     margin: 2rem 0 .75rem; }
+.pg-section::after { content: ''; flex: 1; height: 1px; background: var(--border); }
+
+.pg-dropdown       { position: relative; display: inline-block; }
+.pg-dropdown-menu  { position: absolute; top: calc(100% + 6px); left: 0;
+                     min-width: 200px; background: var(--bg-surface);
+                     border: 1px solid var(--border);
+                     border-radius: var(--radius-lg);
+                     box-shadow: 0 12px 40px rgba(0,0,0,.4);
+                     z-index: 50; overflow: hidden; }
+.pg-dropdown-item  { display: flex; align-items: center; gap: .6rem;
+                     padding: .6rem .9rem; cursor: pointer;
+                     color: var(--text); font-size: .9rem; transition: background .12s; }
+.pg-dropdown-item:hover { background: var(--accent-soft); color: var(--accent); }
+
+.pg-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.6);
+                     display: flex; align-items: center; justify-content: center;
+                     z-index: 1000; backdrop-filter: blur(4px); }
+.pg-modal          { background: var(--bg-surface);
+                     border: 1px solid var(--border);
+                     border-radius: var(--radius-lg); padding: 1.75rem 2rem;
+                     max-width: 460px; width: 90%;
+                     box-shadow: 0 24px 80px rgba(0,0,0,.5); outline: none; }
+.pg-modal h3       { margin: 0 0 .5rem; font-size: 1.15rem; }
+.pg-modal-footer   { display: flex; justify-content: flex-end; gap: .5rem;
+                     margin-top: 1.25rem; }
+
+.pg-accordion      { border: 1px solid var(--border);
+                     border-radius: var(--radius-lg); overflow: hidden;
+                     position: relative; z-index: 1; }
+.pg-accordion-item + .pg-accordion-item { border-top: 1px solid var(--border); }
+.pg-accordion-hdr  { width: 100%; padding: .85rem 1.15rem; background: none;
+                     border: none; color: var(--text); font-family: inherit;
+                     font-size: .95rem; cursor: pointer;
+                     display: flex; justify-content: space-between;
+                     align-items: center; text-align: left;
+                     transition: background .12s; }
+.pg-accordion-hdr:hover { background: rgba(88,166,255,.04); }
+.pg-accordion-icon { transition: transform .25s ease; font-size: .75rem;
+                     color: var(--text-muted); }
+.pg-accordion-icon.open { transform: rotate(90deg); }
+.pg-accordion-body { padding: 0 1.15rem 1rem; color: var(--text-muted);
+                     font-size: .9rem; line-height: 1.6; }
+
+.pg-style-preview  { padding: 1.5rem; border-radius: var(--radius-lg);
+                     text-align: center; font-weight: 600;
+                     transition: all .25s ease;
+                     border: 2px solid var(--border);
+                     background: var(--bg-hover); }
+.pg-style-ctrls    { display: flex; gap: 1.25rem; margin-top: .85rem;
+                     flex-wrap: wrap; align-items: center; }
+.pg-style-ctrls label { display: flex; align-items: center; gap: .4rem;
+                        font-size: .85rem; color: var(--text-muted); }
+.pg-style-ctrls input[type="range"] { width: 90px; max-width: 100%; accent-color: var(--accent); }
+.pg-style-ctrls input[type="color"] { width: 28px; height: 28px; border: none;
+                                      cursor: pointer; border-radius: 4px; }
+
+.pg-rich-preview   { padding: .85rem 1rem; border-radius: var(--radius);
+                     background: rgba(88,166,255,.03);
+                     border: 1px solid var(--border);
+                     font-size: .9rem; line-height: 1.6; }
+
+.pg-shortcut-log   { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }
+.pg-badge          { display: inline-flex; align-items: center; padding: .25rem .6rem;
+                     border-radius: 6px; background: var(--accent-soft);
+                     color: var(--accent); font-size: .8rem; font-weight: 500;
+                     border: 1px solid rgba(88,166,255,.15); }
+
+.pg-plugin-target  { padding: 1.5rem; border-radius: var(--radius-lg);
+                     background: var(--bg-hover); border: 2px dashed var(--border);
+                     text-align: center; font-weight: 600; font-size: 1rem;
+                     transition: box-shadow .3s ease, transform .06s ease; }
+.pg-plugin-btns    { display: flex; gap: .5rem; margin-top: .75rem; flex-wrap: wrap; }
+.pg-code           { font-size: .8rem; line-height: 1.5; padding: .85rem 1rem;
+                     border-radius: var(--radius); background: rgba(0,0,0,.25);
+                     overflow-x: auto; margin-top: .75rem;
+                     border: 1px solid var(--border); color: var(--text-muted);
+                     max-width: 100%; word-break: break-all; }
+
+.pg-variant-row    { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; }
+.pg-variant-box    { padding: .85rem 1.5rem; border-radius: var(--radius-lg);
+                     font-weight: 600; font-size: .95rem;
+                     border: 2px solid var(--border); text-align: center;
+                     transition: all .3s var(--ease-out); min-width: 160px; }
+.pg-variant-box.info    { background: rgba(88,166,255,.12); color: var(--accent);
+                          border-color: var(--accent); box-shadow: 0 0 16px rgba(88,166,255,.12); }
+.pg-variant-box.success { background: rgba(63,185,80,.12); color: var(--success);
+                          border-color: var(--success); box-shadow: 0 0 16px rgba(63,185,80,.12); }
+.pg-variant-box.warning { background: rgba(210,153,34,.12); color: var(--warning);
+                          border-color: var(--warning); box-shadow: 0 0 16px rgba(210,153,34,.12); }
+.pg-variant-box.danger  { background: rgba(248,81,73,.12); color: var(--danger);
+                          border-color: var(--danger); box-shadow: 0 0 16px rgba(248,81,73,.12); }
+.pg-variant-pills  { display: flex; gap: .4rem; flex-wrap: wrap; }
+.pg-vpill          { padding: .3rem .75rem; border-radius: 999px; font-size: .82rem;
+                     font-weight: 500; border: 1px solid var(--border); background: transparent;
+                     color: var(--text-muted); cursor: pointer; transition: all .15s; }
+.pg-vpill:hover    { border-color: var(--accent); color: var(--text); }
+.pg-vpill.on       { background: var(--accent); color: #fff; border-color: var(--accent); }
+
+/* -- Responsive -- */
+@media (max-width: 768px) {
+  .pg-variant-box    { min-width: 0; flex: 1 1 100%; }
+  .pg-variant-row    { flex-direction: column; }
+  .pg-style-ctrls    { gap: .75rem; }
+  .pg-style-ctrls input[type="range"] { width: 100%; min-width: 60px; flex: 1; }
+  .pg-modal          { padding: 1.25rem; }
+  .pg-dropdown-menu  { min-width: 160px; }
+}
+@media (max-width: 480px) {
+  .pg-style-ctrls    { flex-direction: column; align-items: stretch; }
 }

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

@@ -1,162 +1,162 @@
-<!--
-  playground.html - external template for playground-page component
-
-  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>
-</div>
-
-<!-- ── Interaction Patterns ──────────────────────────── -->
-<div class="pg-section">Interaction Patterns</div>
-
-<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>
-  <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">
-        <span z-if="dropdownSelected" z-text="dropdownSelected"></span><span z-else>Choose action…</span> ▾
-      </button>
-      <div class="pg-dropdown-menu" z-show="dropdownOpen">
-        <a class="pg-dropdown-item" @click="selectItem('Edit Profile')">✏️ Edit Profile</a>
-        <a class="pg-dropdown-item" @click="selectItem('Export Data')">📦 Export Data</a>
-        <a class="pg-dropdown-item" @click="selectItem('Delete Account')">🗑️ Delete Account</a>
-      </div>
-    </div>
-    <button z-if="!onceClicked" class="btn btn-outline" @click.once="onceAction">@click.once</button>
-    <button z-else class="btn btn-ghost" disabled>✓ Once fired</button>
-  </div>
-
-  <!-- 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>
-      <p style="color:var(--text-muted);">This modal was triggered by the dropdown selection. Try pressing <kbd style="padding:.1rem .35rem;background:var(--bg-hover);border-radius:4px;font-size:.82rem;">Esc</kbd> or clicking the backdrop to cancel.</p>
-      <p style="font-size:.85rem;color:var(--text-muted);margin-top:.5rem;"><code>@click.self</code> on backdrop • <code>@keydown.escape</code> on dialog • <code>fadeIn/fadeOut</code> transition</p>
-      <div class="pg-modal-footer">
-        <button class="btn btn-ghost" @click="closeModal">Cancel</button>
-        <button class="btn btn-primary" @click="confirmModal">Confirm</button>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- ── Animations ──────────────────────────────────── -->
-<div class="pg-section">Animations</div>
-
-<div class="card">
-  <h3>Accordion</h3>
-  <p>Smooth height animation with <code>slideToggle()</code>. Uses <code>z-skip</code> to opt the subtree out of morph diffing.</p>
-  <div class="pg-accordion" z-skip>
-    <div class="pg-accordion-item">
-      <button class="pg-accordion-hdr" @click="toggleAccordion('a')">
-        <span>What is zQuery?</span>
-        <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>
-    </div>
-    <div class="pg-accordion-item">
-      <button class="pg-accordion-hdr" @click="toggleAccordion('b')">
-        <span>Do I need a build step?</span>
-        <span id="pg-acc-icon-b" class="pg-accordion-icon">▸</span>
-      </button>
-      <div id="pg-acc-b" style="display:none">
-        <div class="pg-accordion-body">Nope. Drop the script tag and go. <code>npx zquery bundle</code> minifies for production, but it's entirely optional.</div>
-      </div>
-    </div>
-    <div class="pg-accordion-item">
-      <button class="pg-accordion-hdr" @click="toggleAccordion('c')">
-        <span>How does the morph engine work?</span>
-        <span id="pg-acc-icon-c" class="pg-accordion-icon">▸</span>
-      </button>
-      <div id="pg-acc-c" style="display:none">
-        <div class="pg-accordion-body">Re-renders diff new HTML against the live DOM, patching only changed nodes. Keyed lists (<code>z-key</code>) enable O(n) reconciliation.</div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- ── Reactive Bindings ───────────────────────────── -->
-<div class="pg-section">Reactive Bindings</div>
-
-<div class="card-grid">
-  <div class="card">
-    <h3>Dynamic Styles</h3>
-    <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>
-    <div class="pg-style-ctrls">
-      <label>Color <input type="color" z-model="previewColor" /></label>
-      <label>Size <input type="range" z-model="previewSize" z-number min="12" max="32" /></label>
-      <label>Radius <input type="range" z-model="previewRadius" z-number min="0" max="24" /></label>
-    </div>
-  </div>
-
-  <div class="card">
-    <h3>Rich Content</h3>
-    <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>
-    <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
-      </div>
-    </div>
-    <div class="pg-variant-pills">
-      <button class="pg-vpill {{variant === 'info' ? 'on' : ''}}" @click="setVariant('info')">Info</button>
-      <button class="pg-vpill {{variant === 'success' ? 'on' : ''}}" @click="setVariant('success')">Success</button>
-      <button class="pg-vpill {{variant === 'warning' ? 'on' : ''}}" @click="setVariant('warning')">Warning</button>
-      <button class="pg-vpill {{variant === 'danger' ? 'on' : ''}}" @click="setVariant('danger')">Danger</button>
-    </div>
-    <pre class="pg-code" style="margin-top:.65rem;"><code>z-class="{'info': variant === 'info', 'warning': variant === 'warning'}"</code></pre>
-  </div>
-</div>
-
-<!-- ── Keyboard ──────────────────────────────────── -->
-<div class="pg-section">Keyboard</div>
-
-<div class="card">
-  <h3>Key &amp; System Modifiers</h3>
-  <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>
-    <button class="btn btn-sm btn-outline" @click.shift="logShortcut('Shift+Click')">Shift+Click</button>
-    <button class="btn btn-sm btn-outline" @click.meta="logShortcut('⌘/⊞+Click')">⌘+Click</button>
-  </div>
-  <div class="pg-shortcut-log" z-if="shortcutLog.length > 0">
-    <span z-for="e in shortcutLog" z-key="{{e.id}}" class="pg-badge">{{e.name}}</span>
-  </div>
-</div>
-
-<!-- ── Plugin System ───────────────────────────────── -->
-<div class="pg-section">Plugin System</div>
-
-<div class="card">
-  <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">
-    <button class="btn btn-sm btn-primary" @click="highlightDemo">highlight()</button>
-    <button class="btn btn-sm btn-outline" @click="shakeDemo">shake()</button>
-    <button class="btn btn-sm btn-outline" @click="glowDemo">glow()</button>
-  </div>
-  <pre class="pg-code"><code>$.fn.highlight = function(color) {
-  this.css({ boxShadow: '0 0 0 3px ' + color });
-  setTimeout(() =&gt; this.css({ boxShadow: '' }), 1500);
-  return this;   // chainable
-};
-
-$('#el').highlight().shake().glow();  // chain them!</code></pre>
+<!--
+  playground.html - external template for playground-page component
+
+  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>
+</div>
+
+<!-- -- Interaction Patterns ---------------------------- -->
+<div class="pg-section">Interaction Patterns</div>
+
+<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>
+  <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">
+        <span z-if="dropdownSelected" z-text="dropdownSelected"></span><span z-else>Choose action…</span> ▾
+      </button>
+      <div class="pg-dropdown-menu" z-show="dropdownOpen">
+        <a class="pg-dropdown-item" @click="selectItem('Edit Profile')">✏️ Edit Profile</a>
+        <a class="pg-dropdown-item" @click="selectItem('Export Data')">📦 Export Data</a>
+        <a class="pg-dropdown-item" @click="selectItem('Delete Account')">🗑️ Delete Account</a>
+      </div>
+    </div>
+    <button z-if="!onceClicked" class="btn btn-outline" @click.once="onceAction">@click.once</button>
+    <button z-else class="btn btn-ghost" disabled>✓ Once fired</button>
+  </div>
+
+  <!-- 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>
+      <p style="color:var(--text-muted);">This modal was triggered by the dropdown selection. Try pressing <kbd style="padding:.1rem .35rem;background:var(--bg-hover);border-radius:4px;font-size:.82rem;">Esc</kbd> or clicking the backdrop to cancel.</p>
+      <p style="font-size:.85rem;color:var(--text-muted);margin-top:.5rem;"><code>@click.self</code> on backdrop • <code>@keydown.escape</code> on dialog • <code>fadeIn/fadeOut</code> transition</p>
+      <div class="pg-modal-footer">
+        <button class="btn btn-ghost" @click="closeModal">Cancel</button>
+        <button class="btn btn-primary" @click="confirmModal">Confirm</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- -- Animations ------------------------------------ -->
+<div class="pg-section">Animations</div>
+
+<div class="card">
+  <h3>Accordion</h3>
+  <p>Smooth height animation with <code>slideToggle()</code>. Uses <code>z-skip</code> to opt the subtree out of morph diffing.</p>
+  <div class="pg-accordion" z-skip>
+    <div class="pg-accordion-item">
+      <button class="pg-accordion-hdr" @click="toggleAccordion('a')">
+        <span>What is zQuery?</span>
+        <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>
+    </div>
+    <div class="pg-accordion-item">
+      <button class="pg-accordion-hdr" @click="toggleAccordion('b')">
+        <span>Do I need a build step?</span>
+        <span id="pg-acc-icon-b" class="pg-accordion-icon">▸</span>
+      </button>
+      <div id="pg-acc-b" style="display:none">
+        <div class="pg-accordion-body">Nope. Drop the script tag and go. <code>npx zquery bundle</code> minifies for production, but it's entirely optional.</div>
+      </div>
+    </div>
+    <div class="pg-accordion-item">
+      <button class="pg-accordion-hdr" @click="toggleAccordion('c')">
+        <span>How does the morph engine work?</span>
+        <span id="pg-acc-icon-c" class="pg-accordion-icon">▸</span>
+      </button>
+      <div id="pg-acc-c" style="display:none">
+        <div class="pg-accordion-body">Re-renders diff new HTML against the live DOM, patching only changed nodes. Keyed lists (<code>z-key</code>) enable O(n) reconciliation.</div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- -- Reactive Bindings ----------------------------- -->
+<div class="pg-section">Reactive Bindings</div>
+
+<div class="card-grid">
+  <div class="card">
+    <h3>Dynamic Styles</h3>
+    <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>
+    <div class="pg-style-ctrls">
+      <label>Color <input type="color" z-model="previewColor" /></label>
+      <label>Size <input type="range" z-model="previewSize" z-number min="12" max="32" /></label>
+      <label>Radius <input type="range" z-model="previewRadius" z-number min="0" max="24" /></label>
+    </div>
+  </div>
+
+  <div class="card">
+    <h3>Rich Content</h3>
+    <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>
+    <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
+      </div>
+    </div>
+    <div class="pg-variant-pills">
+      <button class="pg-vpill {{variant === 'info' ? 'on' : ''}}" @click="setVariant('info')">Info</button>
+      <button class="pg-vpill {{variant === 'success' ? 'on' : ''}}" @click="setVariant('success')">Success</button>
+      <button class="pg-vpill {{variant === 'warning' ? 'on' : ''}}" @click="setVariant('warning')">Warning</button>
+      <button class="pg-vpill {{variant === 'danger' ? 'on' : ''}}" @click="setVariant('danger')">Danger</button>
+    </div>
+    <pre class="pg-code" style="margin-top:.65rem;"><code>z-class="{'info': variant === 'info', 'warning': variant === 'warning'}"</code></pre>
+  </div>
+</div>
+
+<!-- -- Keyboard ------------------------------------ -->
+<div class="pg-section">Keyboard</div>
+
+<div class="card">
+  <h3>Key &amp; System Modifiers</h3>
+  <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>
+    <button class="btn btn-sm btn-outline" @click.shift="logShortcut('Shift+Click')">Shift+Click</button>
+    <button class="btn btn-sm btn-outline" @click.meta="logShortcut('⌘/⊞+Click')">⌘+Click</button>
+  </div>
+  <div class="pg-shortcut-log" z-if="shortcutLog.length > 0">
+    <span z-for="e in shortcutLog" z-key="{{e.id}}" class="pg-badge">{{e.name}}</span>
+  </div>
+</div>
+
+<!-- -- Plugin System --------------------------------- -->
+<div class="pg-section">Plugin System</div>
+
+<div class="card">
+  <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">
+    <button class="btn btn-sm btn-primary" @click="highlightDemo">highlight()</button>
+    <button class="btn btn-sm btn-outline" @click="shakeDemo">shake()</button>
+    <button class="btn btn-sm btn-outline" @click="glowDemo">glow()</button>
+  </div>
+  <pre class="pg-code"><code>$.fn.highlight = function(color) {
+  this.css({ boxShadow: '0 0 0 3px ' + color });
+  setTimeout(() =&gt; this.css({ boxShadow: '' }), 1500);
+  return this;   // chainable
+};
+
+$('#el').highlight().shake().glow();  // chain them!</code></pre>
 </div>