zero-query 0.9.7 → 0.9.8

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

@@ -0,0 +1,117 @@
+// 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
+
+// ── $.fn Plugins ─────────────────────────────────────────────────
+$.fn.highlight = function (color = 'var(--accent)') {
+  this.css({ boxShadow: `0 0 0 3px ${color}`, transition: 'box-shadow .3s ease' });
+  const self = this;
+  setTimeout(() => self.css({ boxShadow: '' }), 1500);
+  return this;
+};
+
+$.fn.shake = function () {
+  const el = this[0];
+  if (!el) return this;
+  el.style.transition = 'transform .06s ease-in-out';
+  const frames = ['-6px', '5px', '-4px', '3px', '-1px', '0'];
+  let i = 0;
+  const run = () => {
+    if (i >= frames.length) { el.style.transform = ''; return; }
+    el.style.transform = `translateX(${frames[i]})`;
+    i++;
+    requestAnimationFrame(() => setTimeout(run, 50));
+  };
+  run();
+  return this;
+};
+
+$.fn.glow = function (color = 'var(--accent)') {
+  this.css({ boxShadow: `0 0 20px ${color}, 0 0 40px ${color}`, transition: 'box-shadow .4s ease' });
+  const self = this;
+  setTimeout(() => self.css({ boxShadow: '' }), 2000);
+  return this;
+};
+
+$.component('playground-page', {
+  templateUrl: 'playground.html',
+  styleUrl:    'playground.css',
+
+  state: () => ({
+    dropdownOpen: false,
+    dropdownSelected: null,
+    modalOpen: false,
+    previewColor: '#58a6ff',
+    previewSize: 18,
+    previewRadius: 8,
+    richContent: '<strong>Bold</strong>, <em>italic</em>, and <a href="#">links</a> rendered via <code>z-html</code>.',
+    variant: 'info',
+    onceClicked: false,
+    shortcutLog: [],
+  }),
+
+  /* Dropdown → opens modal for the selected action */
+  toggleDropdown() { this.state.dropdownOpen = !this.state.dropdownOpen; },
+  closeDropdown()  { this.state.dropdownOpen = false; },
+  selectItem(item) {
+    this.state.dropdownSelected = item;
+    this.state.dropdownOpen = false;
+    this.openModal();
+  },
+
+  /* Modal with fadeIn / fadeOut */
+  async openModal() {
+    this.state.modalOpen = true;
+    await $.sleep(20);
+    const $bg = $(this._el).find('.pg-modal-backdrop');
+    if ($bg.length) {
+      await $bg.fadeIn(200);
+      $bg.find('.pg-modal')[0]?.focus();
+    }
+  },
+  async closeModal() {
+    const $bg = $(this._el).find('.pg-modal-backdrop');
+    if ($bg.length) await $bg.fadeOut(200);
+    this.state.modalOpen = false;
+  },
+  confirmModal() {
+    const item = this.state.dropdownSelected;
+    this.closeModal();
+    $.bus.emit('toast', { message: `${item} confirmed!`, type: 'success' });
+  },
+
+  /* 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');
+  },
+
+  /* Key shortcut log */
+  logShortcut(name) {
+    const raw = this.state.shortcutLog.__raw || this.state.shortcutLog;
+    this.state.shortcutLog = [...raw, { id: Date.now(), name }].slice(-8);
+  },
+
+  /* $.fn plugin demos */
+  highlightDemo() { $(this._el).find('#pg-plugin-box').highlight(); },
+  shakeDemo()     { $(this._el).find('#pg-plugin-box').shake(); },
+  glowDemo()      { $(this._el).find('#pg-plugin-box').glow(); },
+
+  setVariant(v) {
+    this.state.variant = v;
+  },
+
+  /* @click.once */
+  onceAction() {
+    this.state.onceClicked = true;
+    $.bus.emit('toast', { message: 'Fired once — handler auto-removed!', type: 'info' });
+  },
+});

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

@@ -0,0 +1,225 @@
+// 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
+
+$.component('todos-page', {
+  styles: `
+    .td-header     { display: flex; align-items: center; justify-content: space-between;
+                     gap: 1rem; flex-wrap: wrap; }
+    .td-stats      { display: flex; gap: 1.5rem; }
+    .td-stat       { display: flex; flex-direction: column; align-items: center; }
+    .td-stat-num   { font-size: 1.5rem; font-weight: 700; color: var(--accent);
+                     font-variant-numeric: tabular-nums; line-height: 1.2; }
+    .td-stat-label { font-size: .72rem; color: var(--text-muted); text-transform: uppercase;
+                     letter-spacing: .04em; font-weight: 500; }
+
+    .td-progress      { height: 4px; background: var(--bg-hover); border-radius: 4px;
+                        overflow: hidden; margin-bottom: 1.25rem; }
+    .td-progress-fill { height: 100%; background: var(--accent); border-radius: 4px;
+                        transition: width .3s var(--ease-out); }
+
+    .td-form       { display: flex; gap: .5rem; }
+    .td-form .input { flex: 1; }
+
+    .td-bar        { display: flex; align-items: center; justify-content: space-between;
+                     gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; }
+    .td-pills      { display: flex; gap: .35rem; }
+    .td-pill       { 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; }
+    .td-pill:hover { border-color: var(--accent); color: var(--text); }
+    .td-pill.on    { background: var(--accent); color: #fff; border-color: var(--accent); }
+    .td-search     { width: 160px; }
+
+    .td-list       { list-style: none; padding: 0; margin: 0; }
+    .td-item       { display: flex; align-items: center; gap: .75rem; padding: .7rem .65rem;
+                     border-radius: var(--radius); margin-bottom: 2px;
+                     transition: background .12s; }
+    .td-item:hover { background: var(--bg-hover); }
+    .td-item.done .td-text { text-decoration: line-through; opacity: .45; }
+    .td-chk        { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border);
+                     background: transparent; cursor: pointer; flex-shrink: 0;
+                     transition: all .15s; display: flex; align-items: center; justify-content: center;
+                     font-size: 11px; color: transparent; }
+    .td-chk:hover  { border-color: var(--accent); box-shadow: 0 0 8px rgba(88,166,255,.15); }
+    .td-item.done .td-chk { background: var(--accent); border-color: var(--accent); color: #fff; }
+    .td-text       { flex: 1; font-size: .92rem; }
+    .td-rm         { background: none; border: none; color: var(--text-muted); cursor: pointer;
+                     font-size: .85rem; opacity: 0; transition: opacity .12s, color .12s; padding: .25rem; }
+    .td-item:hover .td-rm { opacity: 1; }
+    .td-rm:hover   { color: var(--danger); }
+
+    .td-footer     { display: flex; align-items: center; justify-content: space-between;
+                     padding-top: .75rem; border-top: 1px solid var(--border); margin-top: .5rem; }
+    .td-footer-msg { font-size: .82rem; color: var(--text-muted); }
+    .td-footer-msg b { color: var(--accent); }
+
+    .td-empty      { text-align: center; padding: 2.5rem 1rem; }
+    .td-empty-icon { font-size: 2.5rem; margin-bottom: .5rem; opacity: .4; }
+    .td-empty p    { color: var(--text-muted); font-size: .9rem; }
+
+    @media (max-width: 768px) {
+      .td-header     { flex-direction: column; align-items: stretch; }
+      .td-stats      { justify-content: center; gap: 1rem; }
+      .td-bar        { flex-direction: column; align-items: stretch; }
+      .td-search     { width: 100%; }
+      .td-pills      { justify-content: center; }
+      .td-footer     { flex-direction: column; gap: .5rem; text-align: center; }
+    }
+    @media (max-width: 480px) {
+      .td-stats      { gap: .75rem; }
+      .td-stat-num   { font-size: 1.2rem; }
+    }
+  `,
+
+  state: () => ({
+    newTodo: '',
+    filter: 'all',
+    search: '',
+    filtered: [],
+    total: 0,
+    done: 0,
+    pending: 0,
+  }),
+
+  mounted() {
+    const store = $.getStore('main');
+    this._unsub = store.subscribe(() => this.setState({}));
+  },
+
+  destroyed() {
+    if (this._unsub) this._unsub();
+  },
+
+  addTodo() {
+    const text = this.state.newTodo.trim();
+    if (!text) return;
+    $.getStore('main').dispatch('addTodo', text);
+    this.state.newTodo = '';
+    this.state.search = '';
+    this.state.filter = 'all';
+    $.bus.emit('toast', { message: 'Todo added!', type: 'success' });
+  },
+
+  toggleTodo(id) {
+    $.getStore('main').dispatch('toggleTodo', id);
+  },
+
+  removeTodo(id) {
+    $.getStore('main').dispatch('removeTodo', id);
+    $.bus.emit('toast', { message: 'Todo removed', type: 'error' });
+  },
+
+  clearCompleted() {
+    $.getStore('main').dispatch('clearCompleted');
+    $.bus.emit('toast', { message: 'Completed todos cleared', type: 'info' });
+  },
+
+  setFilter(f) {
+    this.state.filter = f;
+  },
+
+  clearSearch() {
+    this.state.search = '';
+  },
+
+  clearNewTodo() {
+    this.state.newTodo = '';
+  },
+
+  render() {
+    const store = $.getStore('main');
+    const todos = store.state.todos;
+    const { filter, search } = this.state;
+
+    let list = todos;
+    if (filter === 'active') list = todos.filter(t => !t.done);
+    if (filter === 'done')   list = todos.filter(t => t.done);
+    if (search) {
+      const q = search.toLowerCase();
+      list = list.filter(t => t.text.toLowerCase().includes(q));
+    }
+    this.state.filtered = list;
+    this.state.total    = store.getters.todoCount;
+    this.state.done     = store.getters.doneCount;
+    this.state.pending  = store.getters.pendingCount;
+
+    const pct = this.state.total > 0 ? Math.round((this.state.done / this.state.total) * 100) : 0;
+
+    return `
+      <div class="page-header">
+        <h1>Todos</h1>
+        <p class="subtitle">Global store with <code>$.store()</code>, <code>z-for</code> + <code>z-key</code>, <code>z-class</code>, <code>z-if</code>, <code>z-debounce</code>, and <code>@keydown.escape</code>.</p>
+      </div>
+
+      <div class="card">
+        <div class="td-header">
+          <form class="td-form" style="flex:1;" @submit.prevent="addTodo">
+            <input
+              type="text"
+              z-model="newTodo" z-trim
+              placeholder="What needs to be done?"
+              class="input"
+              z-ref="todoInput"
+              @keydown.escape="clearNewTodo"
+            />
+            <button type="submit" class="btn btn-primary">Add</button>
+          </form>
+          <div class="td-stats">
+            <div class="td-stat">
+              <span class="td-stat-num">${this.state.total}</span>
+              <span class="td-stat-label">Total</span>
+            </div>
+            <div class="td-stat">
+              <span class="td-stat-num">${this.state.done}</span>
+              <span class="td-stat-label">Done</span>
+            </div>
+            <div class="td-stat">
+              <span class="td-stat-num">${pct}%</span>
+              <span class="td-stat-label">Complete</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="card">
+        ${this.state.total > 0 ? `
+          <div class="td-progress"><div class="td-progress-fill" style="width:${pct}%;"></div></div>
+        ` : ''}
+
+        <div class="td-bar">
+          <div class="td-pills">
+            <button class="td-pill" z-class="{'on': filter === 'all'}" @click="setFilter('all')">All ${this.state.total}</button>
+            <button class="td-pill" z-class="{'on': filter === 'active'}" @click="setFilter('active')">Active ${this.state.pending}</button>
+            <button class="td-pill" z-class="{'on': filter === 'done'}" @click="setFilter('done')">Done ${this.state.done}</button>
+          </div>
+          <input type="text" placeholder="Search…" class="input input-sm td-search" z-model="search" z-debounce="300" z-trim @keydown.escape="clearSearch" />
+        </div>
+
+        <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>
+        </div>
+
+        <ul z-else class="td-list">
+          <li z-for="t in filtered" z-key="{{t.id}}" class="td-item {{t.done ? 'done' : ''}}">
+            <button class="td-chk" @click="toggleTodo('{{t.id}}')">✓</button>
+            <span class="td-text">{{$.escapeHtml(t.text)}}</span>
+            <button class="td-rm" @click="removeTodo('{{t.id}}')">✕</button>
+          </li>
+        </ul>
+
+        <div class="td-footer" z-show="done > 0">
+          <span class="td-footer-msg"><b>${this.state.done}</b> completed · <b>${this.state.pending}</b> remaining</span>
+          <button class="btn btn-ghost btn-sm" @click="clearCompleted">Clear done</button>
+        </div>
+      </div>
+    `;
+  }
+});

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

@@ -0,0 +1,97 @@
+/* toolkit.css — scoped styles for the toolkit page component */
+
+.tk-tabs       { display: flex; padding: .35rem;
+                 background: var(--bg-surface);
+                 border-radius: var(--radius-lg);
+                 border: 1px solid var(--border); gap: .25rem; }
+.tk-tab        { flex: 1; padding: .55rem .9rem; font-size: .85rem; font-weight: 500;
+                 border-radius: var(--radius); cursor: pointer; border: none;
+                 color: var(--text-muted); background: transparent;
+                 transition: all .15s; text-align: center; font-family: inherit; }
+.tk-tab:hover  { color: var(--text); background: var(--bg-hover); }
+.tk-tab.active { color: #fff; background: var(--accent);
+                 box-shadow: 0 2px 8px rgba(88,166,255,.25); }
+
+.tk-method     { display: inline-flex; align-items: center; padding: .2rem .5rem;
+                 border-radius: 4px; font-size: .75rem; font-weight: 700;
+                 font-family: monospace; letter-spacing: .03em; }
+.tk-method-get { background: rgba(52,211,153,.15); color: var(--success); }
+.tk-method-post{ background: rgba(96,165,250,.15); color: var(--info); }
+.tk-method-put { background: rgba(88,166,255,.15); color: var(--accent); }
+.tk-method-del { background: rgba(248,113,113,.15); color: var(--danger); }
+
+.tk-endpoint   { font-family: monospace; font-size: .85rem; color: var(--text-muted); }
+
+.tk-status     { display: inline-flex; align-items: center; padding: .15rem .45rem;
+                 border-radius: 4px; font-size: .75rem; font-weight: 600;
+                 margin-left: auto; }
+.tk-status-ok  { background: rgba(52,211,153,.12); color: var(--success); }
+.tk-status-err { background: rgba(248,113,113,.12); color: var(--danger); }
+
+.tk-response   { margin-top: .75rem; border-radius: var(--radius);
+                 border: 1px solid var(--border); overflow: hidden; }
+.tk-response-hdr { display: flex; align-items: center; gap: .5rem;
+                   padding: .5rem .75rem; background: var(--bg-surface);
+                   border-bottom: 1px solid var(--border); font-size: .85rem; }
+.tk-response-body { padding: .75rem 1rem; font-size: .8rem; line-height: 1.5;
+                    overflow-x: auto; white-space: pre-wrap; word-break: break-word;
+                    max-height: 260px; overflow-y: auto; color: var(--text-muted);
+                    background: rgba(0,0,0,.15); }
+
+.tk-results    { list-style: none; padding: 0; margin: .5rem 0 0; }
+.tk-results li { display: flex; align-items: center; gap: .6rem;
+                 padding: .5rem 0; border-bottom: 1px solid var(--border); }
+.tk-results li:last-child { border-bottom: none; }
+
+.tk-log        { font-size: .8rem; line-height: 1.7; max-height: 200px; overflow-y: auto; }
+.tk-log-entry  { display: flex; align-items: center; gap: .5rem; padding: .3rem 0;
+                 border-bottom: 1px solid rgba(255,255,255,.04); }
+.tk-btns       { display: flex; gap: .5rem; flex-wrap: wrap; }
+
+.tk-util-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem;
+                 margin-bottom: 1rem; }
+@media (max-width: 640px) { .tk-util-grid { grid-template-columns: 1fr; } }
+.tk-util-card  { padding: .85rem 1rem; border-radius: var(--radius);
+                 background: var(--bg-hover); border: 1px solid var(--border);
+                 cursor: pointer; transition: all .15s; }
+.tk-util-card:hover { border-color: var(--accent); background: rgba(88,166,255,.04); }
+.tk-util-card.selected { border-color: var(--accent);
+                 background: rgba(88,166,255,.06);
+                 box-shadow: 0 0 0 1px var(--accent); }
+.tk-util-card h4 { margin: 0 0 .25rem; font-size: .9rem; }
+.tk-util-card p  { margin: 0; font-size: .8rem; color: var(--text-muted); }
+
+.tk-util-result { padding: .75rem 1rem; border-radius: var(--radius);
+                  background: rgba(0,0,0,.2); border: 1px solid var(--border);
+                  font-size: .82rem; line-height: 1.6; color: var(--text-muted);
+                  overflow-x: auto; white-space: pre-wrap;
+                  max-height: 250px; overflow-y: auto; font-family: monospace; }
+
+.tk-store-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
+@media (max-width: 640px) { .tk-store-grid { grid-template-columns: 1fr; } }
+.tk-store-card { padding: 1rem 1.15rem; border-radius: var(--radius-lg);
+                 background: var(--bg-hover); border: 1px solid var(--border);
+                 transition: border-color .15s; }
+.tk-store-card:hover { border-color: rgba(88,166,255,.2); }
+.tk-store-card h4 { margin: 0 0 .4rem; font-size: .95rem;
+                    display: flex; align-items: center; gap: .4rem; }
+.tk-store-card p  { margin: 0 0 .65rem; font-size: .82rem; color: var(--text-muted); }
+.tk-store-pre  { padding: .65rem .85rem; border-radius: var(--radius);
+                 background: rgba(0,0,0,.2); border: 1px solid var(--border);
+                 font-size: .78rem; line-height: 1.5; color: var(--text-muted);
+                 overflow-x: auto; white-space: pre-wrap;
+                 max-height: 200px; overflow-y: auto; }
+.tk-stat       { display: flex; align-items: center; gap: .5rem;
+                 padding: .4rem .65rem; border-radius: var(--radius);
+                 background: rgba(88,166,255,.06); font-size: .82rem;
+                 border: 1px solid rgba(88,166,255,.1); }
+.tk-stat-val   { font-weight: 700; color: var(--accent); }
+
+/* ── Responsive: tabs ── */
+@media (max-width: 768px) {
+  .tk-tabs       { flex-wrap: wrap; }
+  .tk-tab        { flex: 1 1 auto; min-width: 0; padding: .5rem .6rem; font-size: .8rem; }
+}
+@media (max-width: 480px) {
+  .tk-tab        { font-size: .75rem; padding: .45rem .5rem; }
+}

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

@@ -0,0 +1,146 @@
+<!--
+  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.
+-->
+<div class="page-header" z-cloak>
+  <h1>Toolkit</h1>
+  <p class="subtitle">HTTP client with interceptors, 30+ utility functions, and advanced store patterns.</p>
+</div>
+
+<!-- Tab bar -->
+<div class="tk-tabs" style="margin-bottom:1rem;">
+  <button class="tk-tab {{activeTab === 'http' ? 'active' : ''}}" @click="setTab('http')">⬡ HTTP Client</button>
+  <button class="tk-tab {{activeTab === 'utils' ? 'active' : ''}}" @click="setTab('utils')">⚙ Utilities</button>
+  <button class="tk-tab {{activeTab === 'store' ? 'active' : ''}}" @click="setTab('store')">◈ Store</button>
+</div>
+
+<!-- ── HTTP Tab ───────────────────────────────────── -->
+<div z-if="activeTab === 'http'">
+  <div class="card">
+    <h3>CRUD Operations</h3>
+    <p>Powered by <code>$.http.configure({ baseURL })</code> with request/response interceptors active.</p>
+    <div class="tk-btns">
+      <button class="btn btn-sm" style="background:rgba(52,211,153,.15);color:var(--success);" @click="doGet">GET /posts/1</button>
+      <button class="btn btn-sm" style="background:rgba(96,165,250,.15);color:var(--info);" @click="doPost">POST /posts</button>
+      <button class="btn btn-sm" style="background:rgba(88,166,255,.15);color:var(--accent);" @click="doPut">PUT /posts/1</button>
+      <button class="btn btn-sm" style="background:rgba(248,113,113,.15);color:var(--danger);" @click="doDelete">DEL /posts/1</button>
+    </div>
+    <div class="tk-response" z-if="httpOutput">
+      <div class="tk-response-hdr">
+        <span class="tk-method tk-method-{{methodClass}}" z-text="httpMethod"></span>
+        <span class="tk-endpoint" z-text="httpEndpoint"></span>
+        <span z-if="httpStatusCode" class="tk-status {{statusOk ? 'tk-status-ok' : 'tk-status-err'}}" z-text="httpStatusCode"></span>
+      </div>
+      <div class="tk-response-body" z-text="httpOutput"></div>
+    </div>
+  </div>
+
+  <div class="card">
+    <h3>Abortable Search</h3>
+    <p>Each keystroke aborts the previous in-flight request via <code>$.http.createAbort()</code>. Zero race conditions.</p>
+    <input type="text" class="input" placeholder="Search users…" @input="doSearch" z-bind:value="searchQuery" />
+    <p z-if="searchLoading" style="color:var(--text-muted);margin-top:.5rem;">Loading…</p>
+    <ul class="tk-results" z-if="searchResults.length > 0">
+      <li z-for="(user, i) in searchResults" z-key="{{user.id}}">
+        <small style="background:var(--accent-soft);color:var(--accent);padding:.15rem .45rem;border-radius:4px;font-weight:600;">#{{i + 1}}</small>
+        <div>
+          <strong style="font-size:.9rem;">{{user.name}}</strong><br/>
+          <small style="color:var(--text-muted);font-size:.82rem;">{{user.email}}</small>
+        </div>
+      </li>
+    </ul>
+  </div>
+
+  <div class="card card-muted" z-show="httpLog.length > 0">
+    <h3>Interceptor Log</h3>
+    <div class="tk-log">
+      <div z-for="entry in httpLog" z-key="{{entry.id}}" class="tk-log-entry">{{entry.msg}}</div>
+    </div>
+  </div>
+</div>
+
+<!-- ── Utilities Tab ──────────────────────────────── -->
+<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>
+
+    <div class="tk-util-grid">
+      <div class="tk-util-card {{activeUtil === 'pipe' ? 'selected' : ''}}" @click="runUtil('pipe')">
+        <h4>$.pipe()</h4>
+        <p>Compose left-to-right function pipelines</p>
+      </div>
+      <div class="tk-util-card {{activeUtil === 'memoize' ? 'selected' : ''}}" @click="runUtil('memoize')">
+        <h4>$.memoize()</h4>
+        <p>Cache expensive function results</p>
+      </div>
+      <div class="tk-util-card {{activeUtil === 'retry' ? 'selected' : ''}}" @click="runUtil('retry')">
+        <h4>$.retry()</h4>
+        <p>Retry with exponential backoff</p>
+      </div>
+      <div class="tk-util-card {{activeUtil === 'arrays' ? 'selected' : ''}}" @click="runUtil('arrays')">
+        <h4>Arrays</h4>
+        <p>groupBy, chunk, unique, range</p>
+      </div>
+      <div class="tk-util-card {{activeUtil === 'objects' ? 'selected' : ''}}" @click="runUtil('objects')">
+        <h4>Objects</h4>
+        <p>pick, omit, isEqual, deepMerge</p>
+      </div>
+      <div class="tk-util-card {{activeUtil === 'strings' ? 'selected' : ''}}" @click="runUtil('strings')">
+        <h4>Strings</h4>
+        <p>capitalize, truncate, camelCase, param</p>
+      </div>
+    </div>
+
+    <div class="tk-util-result" z-if="utilOutput" z-text="utilOutput"></div>
+  </div>
+</div>
+
+<!-- ── Store Tab ──────────────────────────────────── -->
+<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>
+
+    <div style="display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem;">
+      <div class="tk-stat">
+        Actions dispatched: <span class="tk-stat-val" z-text="actionCount"></span>
+      </div>
+      <div class="tk-stat">
+        Middleware: <span class="tk-stat-val" style="color:var(--success);">active</span>
+      </div>
+    </div>
+
+    <div class="tk-store-grid">
+      <div class="tk-store-card">
+        <h4>📷 State Snapshot</h4>
+        <p>Deep-clone the current store state via <code>store.snapshot()</code>.</p>
+        <button class="btn btn-sm btn-primary" @click="takeSnapshot" style="margin-bottom:.65rem;">Capture Snapshot</button>
+        <div class="tk-store-pre" z-if="storeSnap" z-text="storeSnap"></div>
+        <div class="tk-store-pre" z-else style="color:var(--text-muted);font-style:italic;">Click capture to inspect current state…</div>
+      </div>
+
+      <div class="tk-store-card">
+        <h4>📋 Action History</h4>
+        <p>Track dispatched actions via <code>store.history</code>.</p>
+        <button class="btn btn-sm btn-outline" @click="viewHistory" style="margin-bottom:.65rem;">Load History</button>
+        <div class="tk-store-pre" z-if="storeHistory" z-text="storeHistory"></div>
+        <div class="tk-store-pre" z-else style="color:var(--text-muted);font-style:italic;">Click load to view recent actions…</div>
+      </div>
+    </div>
+  </div>
+
+  <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>
+    <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>
+        <strong style="color:var(--accent);">{{entry.action}}</strong>
+        <span style="color:var(--text-muted);font-size:.82rem;">{{entry.args}}</span>
+      </div>
+    </div>
+  </div>
+</div>