zero-query 1.0.9 → 1.2.0

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

@@ -1,225 +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>
-    `;
-  }
-});
+// 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

@@ -1,97 +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; }
-}
+/* 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; }
+}