zero-query 0.9.6 → 0.9.8

package/cli/scaffold/app/components/contacts/contacts.js

@@ -1,153 +0,0 @@
-// scripts/components/contacts/contacts.js — contact book
-//
-// Demonstrates: external templateUrl + styleUrl, z-if/z-else, z-for,
-//               z-show, z-bind/:attr, z-class, z-style, z-text, z-html,
-//               z-model, z-ref, z-cloak, @click, @submit.prevent,
-//               @input.debounce, event modifiers, and template {{expressions}}
-//
-// This component uses external files for its template and styles,
-// resolved automatically relative to this JS file's location.
-// Contacts are persisted in the global $.store('main') so they
-// survive navigation between routes.
-
-$.component('contacts-page', {
-  templateUrl: 'contacts.html',
-  styleUrl:    'contacts.css',
-
-  state: () => ({
-    contacts: [],
-    showForm: false,
-    newName: '',
-    newEmail: '',
-    newRole: 'Developer',
-    nameError: '',
-    emailError: '',
-    selectedId: null,
-    selectedName: '',
-    selectedEmail: '',
-    selectedStatus: '',
-    confirmDeleteId: null,
-    totalAdded: 0,
-    favoriteCount: 0,
-  }),
-
-  mounted() {
-    const store = $.getStore('main');
-    this._syncFromStore(store);
-    this._unsub = store.subscribe(() => this._syncFromStore(store));
-  },
-
-  destroyed() {
-    if (this._unsub) this._unsub();
-  },
-
-  _syncFromStore(store) {
-    this.state.contacts      = store.state.contacts;
-    this.state.totalAdded    = store.state.contactsAdded;
-    this.state.favoriteCount = store.getters.favoriteCount;
-    this._syncSelected();
-  },
-
-  // -- Actions --
-
-  toggleForm() {
-    this.state.showForm = !this.state.showForm;
-    if (!this.state.showForm) this._clearForm();
-  },
-
-  _validateName(name) {
-    if (!name) return 'Name is required.';
-    if (name.length < 2) return 'Name must be at least 2 characters.';
-    return '';
-  },
-
-  _validateEmail(email) {
-    if (!email) return 'Email is required.';
-    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) return 'Enter a valid email address.';
-    const store = $.getStore('main');
-    if (store.state.contacts.some(c => c.email.toLowerCase() === email.toLowerCase())) {
-      return 'A contact with this email already exists.';
-    }
-    return '';
-  },
-
-  validateName() {
-    this.state.nameError = this._validateName(this.state.newName.trim());
-  },
-
-  validateEmail() {
-    this.state.emailError = this._validateEmail(this.state.newEmail.trim());
-  },
-
-  addContact() {
-    const name  = this.state.newName.trim();
-    const email = this.state.newEmail.trim();
-
-    const nameError  = this._validateName(name);
-    const emailError = this._validateEmail(email);
-    this.state.nameError  = nameError;
-    this.state.emailError = emailError;
-    if (nameError || emailError) return;
-
-    $.getStore('main').dispatch('addContact', {
-      name,
-      email,
-      role: this.state.newRole,
-    });
-
-    this._clearForm();
-    this.state.showForm = false;
-    $.bus.emit('toast', { message: `${name} added!`, type: 'success' });
-  },
-
-  toggleFavorite(id) {
-    $.getStore('main').dispatch('toggleFavorite', Number(id));
-  },
-
-  selectContact(id) {
-    const numId = Number(id);
-    this.state.selectedId = this.state.selectedId === numId ? null : numId;
-    this.state.confirmDeleteId = null;
-    this._syncSelected();
-  },
-
-  confirmDelete(id) {
-    this.state.confirmDeleteId = Number(id);
-  },
-
-  cancelDelete() {
-    this.state.confirmDeleteId = null;
-  },
-
-  deleteContact(id) {
-    const numId = Number(id);
-    const store = $.getStore('main');
-    const c = store.state.contacts.find(c => c.id === numId);
-    store.dispatch('deleteContact', numId);
-    this.state.selectedId = null;
-    this.state.confirmDeleteId = null;
-    $.bus.emit('toast', { message: `${c ? c.name : 'Contact'} removed`, type: 'error' });
-  },
-
-  cycleStatus(id) {
-    $.getStore('main').dispatch('cycleContactStatus', Number(id));
-    this._syncSelected();
-  },
-
-  _syncSelected() {
-    const c = this.state.selectedId != null
-      ? this.state.contacts.find(c => c.id === this.state.selectedId)
-      : null;
-    this.state.selectedName   = c ? c.name : '';
-    this.state.selectedEmail  = c ? c.email : '';
-    this.state.selectedStatus = c ? c.status : '';
-  },
-
-  _clearForm() {
-    this.state.newName   = '';
-    this.state.newEmail  = '';
-    this.state.newRole   = 'Developer';
-    this.state.nameError = '';
-    this.state.emailError = '';
-  },
-});

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

@@ -1,85 +0,0 @@
-// scripts/components/counter.js — interactive counter
-//
-// Demonstrates: component state, computed properties, watch callbacks,
-//               @click event binding, z-model two-way binding with
-//               z-number modifier, z-class, z-if, z-for with z-key,
-//               $.bus toast notifications
-
-$.component('counter-page', {
-  state: () => ({
-    count: 0,
-    step: 1,
-    history: [],
-  }),
-
-  // Computed properties — derived values that update automatically
-  computed: {
-    isNegative: (state) => state.count < 0,
-    historyCount: (state) => state.history.length,
-    lastAction: (state) => state.history.length ? state.history[state.history.length - 1] : null,
-  },
-
-  // Watch — react to specific state changes
-  watch: {
-    count(val) {
-      if (val === 100) $.bus.emit('toast', { message: 'Century! 🎉', type: 'success' });
-      if (val === -100) $.bus.emit('toast', { message: 'Negative century!', type: 'error' });
-    },
-  },
-
-  increment() {
-    this.state.count += this.state.step;
-    this._pushHistory('+', this.state.step, this.state.count);
-  },
-
-  decrement() {
-    this.state.count -= this.state.step;
-    this._pushHistory('−', this.state.step, this.state.count);
-  },
-
-  _pushHistory(action, value, result) {
-    const raw = this.state.history.__raw || this.state.history;
-    const next = [...raw, { id: Date.now(), action, value, result }];
-    this.state.history = next.length > 8 ? next.slice(-8) : next;
-  },
-
-  reset() {
-    this.state.count = 0;
-    this.state.history = [];
-    $.bus.emit('toast', { message: 'Counter reset!', type: 'info' });
-  },
-
-  render() {
-    return `
-      <div class="page-header">
-        <h1>Counter</h1>
-        <p class="subtitle"><code>computed</code>, <code>watch</code>, <code>@click</code>, <code>z-model</code>, <code>z-class</code>, and <code>z-for</code> with <code>z-key</code>.</p>
-      </div>
-
-      <div class="card counter-card">
-        <div class="counter-display">
-          <span class="counter-value" z-class="{'negative': count < 0}">${this.state.count}</span>
-        </div>
-
-        <div class="counter-controls">
-          <button class="btn btn-danger" @click="decrement">− Subtract</button>
-          <button class="btn btn-primary" @click="increment">+ Add</button>
-        </div>
-
-        <div class="counter-step">
-          <label>Step size:
-            <input type="number" z-model="step" z-number min="1" max="100" class="input input-sm" />
-          </label>
-          <button class="btn btn-ghost btn-sm" @click="reset">Reset</button>
-        </div>
-      </div>
-
-      <div class="card card-muted" z-if="history.length > 0">
-        <h3>History <small style="color:var(--text-muted);font-weight:400;">(${this.computed.historyCount} entries)</small></h3>
-        <div class="history-list">
-          <span z-for="e in history" z-key="{{e.id}}" class="history-item">{{e.action}}{{e.value}} → <strong>{{e.result}}</strong></span>
-        </div>
-      </div>
-    `;
-  }
-});

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

@@ -1,137 +0,0 @@
-// scripts/components/home.js — dashboard / landing page
-//
-// Demonstrates: $.component, state, render, mounted lifecycle,
-//               signal + computed + effect (reactive primitives),
-//               $.store integration, $.bus, template rendering
-
-$.component('home-page', {
-  state: () => ({
-    greeting: '',
-    signalDemo: 0,
-  }),
-
-  mounted() {
-    // $.signal() — fine-grained reactive primitive
-    const count = $.signal(0);
-
-    // $.computed() — derived reactive value that auto-updates
-    const doubled = $.computed(() => count.value * 2);
-
-    // $.effect() — runs whenever its dependencies change
-    $.effect(() => {
-      this.state.signalDemo = doubled.value;
-    });
-
-    // Store the signal setter so the button can use it
-    this._signalCount = count;
-
-    // Greet based on time of day
-    const hour = new Date().getHours();
-    this.state.greeting = hour < 12 ? 'Good morning'
-                        : hour < 18 ? 'Good afternoon'
-                        : 'Good evening';
-
-    // Track page visit via the global store
-    const store = $.getStore('main');
-    store.dispatch('incrementVisits');
-  },
-
-  incrementSignal() {
-    if (this._signalCount) {
-      this._signalCount.value++;
-    }
-  },
-
-  render() {
-    const store = $.getStore('main');
-    return `
-      <div class="page-header">
-        <h1>${this.state.greeting}</h1>
-        <p class="subtitle">Welcome to your new <strong>zQuery</strong> app. Explore the pages to see different features in action.</p>
-      </div>
-
-      <div class="card-grid">
-        <div class="card card-accent">
-          <h3><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="var(--accent)" style="width:20px;height:20px;vertical-align:-4px;margin-right:0.25rem;"><path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"/></svg> Reactive Signals</h3>
-          <p>Fine-grained reactivity with <code>signal()</code>, <code>computed()</code>, and <code>effect()</code>.</p>
-          <div class="signal-demo">
-            <span class="signal-value">Doubled: ${this.state.signalDemo}</span>
-            <button class="btn btn-sm" @click="incrementSignal">Increment Signal</button>
-          </div>
-        </div>
-
-        <div class="card">
-          <h3><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="var(--accent)" style="width:20px;height:20px;vertical-align:-4px;margin-right:0.25rem;"><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5"/></svg> Counter</h3>
-          <p><code>computed</code> properties, <code>watch</code> callbacks, and <code>z-for</code> with <code>z-key</code> diffing.</p>
-          <a z-link="/counter" class="btn btn-outline">Try It →</a>
-        </div>
-
-        <div class="card">
-          <h3><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="var(--accent)" style="width:20px;height:20px;vertical-align:-4px;margin-right:0.25rem;"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg> Todos</h3>
-          <p>Global store, <code>z-key</code> keyed lists, DOM diffing. <strong>${store.getters.todoCount}</strong> items, <strong>${store.getters.doneCount}</strong> done.</p>
-          <a z-link="/todos" class="btn btn-outline">Try It →</a>
-        </div>
-
-        <div class="card">
-          <h3><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="var(--accent)" style="width:20px;height:20px;vertical-align:-4px;margin-right:0.25rem;"><path stroke-linecap="round" stroke-linejoin="round" d="M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Zm6-10.125a1.875 1.875 0 1 1-3.75 0 1.875 1.875 0 0 1 3.75 0Zm1.294 6.336a6.721 6.721 0 0 1-3.17.789 6.721 6.721 0 0 1-3.168-.789 3.376 3.376 0 0 1 6.338 0Z"/></svg> Contacts</h3>
-          <p>External templates, scoped styles, and <code>z-key</code> keyed lists. <strong>${store.getters.contactCount}</strong> contacts, <strong>${store.getters.favoriteCount}</strong> ★ favorited.</p>
-          <a z-link="/contacts" class="btn btn-outline">Try It →</a>
-        </div>
-
-        <div class="card">
-          <h3><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="var(--accent)" style="width:20px;height:20px;vertical-align:-4px;margin-right:0.25rem;"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418"/></svg> API Demo</h3>
-          <p>Fetch data with <code>$.get()</code>, loading states, and <code>$.escapeHtml()</code>.</p>
-          <a z-link="/api" class="btn btn-outline">Try It →</a>
-        </div>
-      </div>
-
-      <div class="card card-muted">
-        <h3><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="var(--accent)" style="width:20px;height:20px;vertical-align:-4px;margin-right:0.25rem;"><path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z"/></svg> App Stats</h3>
-        <div class="stats-grid">
-          <div class="stat-group">
-            <span class="stat-group-title"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width:14px;height:14px;vertical-align:-2px;margin-right:0.2rem;"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955a1.126 1.126 0 0 1 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/></svg> General</span>
-            <div class="stat-group-values">
-              <div class="stat">
-                <span class="stat-value">${store.state.visits}</span>
-                <span class="stat-label">Page Views</span>
-              </div>
-            </div>
-          </div>
-
-          <div class="stat-group">
-            <span class="stat-group-title"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width:14px;height:14px;vertical-align:-2px;margin-right:0.2rem;"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg> Todos</span>
-            <div class="stat-group-values">
-              <div class="stat">
-                <span class="stat-value">${store.getters.todoCount}</span>
-                <span class="stat-label">Total</span>
-              </div>
-              <div class="stat">
-                <span class="stat-value">${store.getters.pendingCount}</span>
-                <span class="stat-label">Pending</span>
-              </div>
-              <div class="stat">
-                <span class="stat-value">${store.getters.doneCount}</span>
-                <span class="stat-label">Done</span>
-              </div>
-            </div>
-          </div>
-
-          <div class="stat-group">
-            <span class="stat-group-title"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width:14px;height:14px;vertical-align:-2px;margin-right:0.2rem;"><path stroke-linecap="round" stroke-linejoin="round" d="M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Zm6-10.125a1.875 1.875 0 1 1-3.75 0 1.875 1.875 0 0 1 3.75 0Zm1.294 6.336a6.721 6.721 0 0 1-3.17.789 6.721 6.721 0 0 1-3.168-.789 3.376 3.376 0 0 1 6.338 0Z"/></svg> Contacts</span>
-            <div class="stat-group-values">
-              <div class="stat">
-                <span class="stat-value">${store.getters.contactCount}</span>
-                <span class="stat-label">Total</span>
-              </div>
-              <div class="stat">
-                <span class="stat-value">${store.getters.favoriteCount}</span>
-                <span class="stat-label">★ Favorited</span>
-              </div>
-            </div>
-          </div>
-        </div>
-        <small class="muted">Stats powered by <code>$.store()</code> getters — visit count tracked globally.</small>
-      </div>
-    `;
-  }
-});

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

@@ -1,131 +0,0 @@
-// scripts/components/todos.js — todo list with global store
-//
-// Demonstrates: $.getStore, store.dispatch, store.subscribe,
-//               store getters, computed properties, z-model, z-ref,
-//               z-class, z-for with z-key, z-if, z-show, @click
-//               with args, @submit.prevent, mounted/destroyed
-//               lifecycle, $.bus toast, $.debounce
-
-$.component('todos-page', {
-  state: () => ({
-    newTodo: '',
-    filter: 'all',      // 'all' | 'active' | 'done'
-    search: '',
-    filtered: [],        // computed in render() for z-for access
-    total: 0,
-    done: 0,
-    pending: 0,
-  }),
-
-  mounted() {
-    const store = $.getStore('main');
-    this._unsub = store.subscribe(() => this.setState({}));
-
-    // $.debounce — debounced search filter (300ms)
-    this._debouncedSearch = $.debounce((val) => {
-      this.state.search = val;
-    }, 300);
-  },
-
-  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;
-  },
-
-  onSearch(e) {
-    this._debouncedSearch(e.target.value);
-  },
-
-  render() {
-    const store = $.getStore('main');
-    const todos = store.state.todos;
-    const { filter, search } = this.state;
-
-    // Compute filtered list and store stats into state for directive access
-    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;
-
-    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>, and <code>z-show</code>.</p>
-      </div>
-
-      <div class="card">
-        <form class="todo-form" @submit.prevent="addTodo">
-          <input
-            type="text"
-            z-model="newTodo" z-trim
-            placeholder="What needs to be done?"
-            class="input"
-            z-ref="todoInput"
-          />
-          <button type="submit" class="btn btn-primary">Add</button>
-        </form>
-      </div>
-
-      <div class="card">
-        <div class="todo-toolbar">
-          <div class="todo-filters">
-            <button class="btn btn-sm" z-class="{'btn-primary': filter === 'all', 'btn-ghost': filter !== 'all'}" @click="setFilter('all')">All (${this.state.total})</button>
-            <button class="btn btn-sm" z-class="{'btn-primary': filter === 'active', 'btn-ghost': filter !== 'active'}" @click="setFilter('active')">Active (${this.state.pending})</button>
-            <button class="btn btn-sm" z-class="{'btn-primary': filter === 'done', 'btn-ghost': filter !== 'done'}" @click="setFilter('done')">Done (${this.state.done})</button>
-          </div>
-          <input type="text" placeholder="Search…" class="input input-sm" @input="onSearch" value="${$.escapeHtml(this.state.search)}" />
-        </div>
-
-        <div z-if="filtered.length === 0" class="empty-state">
-          <p>${this.state.total === 0 ? 'No todos yet — add one above!' : 'No matching todos.'}</p>
-        </div>
-
-        <ul z-else class="todo-list">
-          <li z-for="t in filtered" z-key="{{t.id}}" class="todo-item {{t.done ? 'done' : ''}}">
-            <button class="todo-check" @click="toggleTodo('{{t.id}}')"></button>
-            <span class="todo-text">{{$.escapeHtml(t.text)}}</span>
-            <button class="todo-remove" @click="removeTodo('{{t.id}}')">✕</button>
-          </li>
-        </ul>
-
-        <div class="todo-footer" z-show="done > 0">
-          <button class="btn btn-ghost btn-sm" @click="clearCompleted">Clear completed (${this.state.done})</button>
-        </div>
-      </div>
-    `;
-  }
-});

package/cli/scaffold/app/routes.js

@@ -1,13 +0,0 @@
-// app/routes.js — route definitions
-//
-// Each route maps a URL path to a component tag name.
-// Supports: static paths, :params, wildcards, and lazy loading via `load`.
-
-export const routes = [
-  { path: '/',         component: 'home-page'     },
-  { path: '/counter',  component: 'counter-page'  },
-  { path: '/todos',    component: 'todos-page'    },
-  { path: '/contacts', component: 'contacts-page' },
-  { path: '/api',      component: 'api-demo'      },
-  { path: '/about',    component: 'about-page'    },
-];