zero-query 0.9.7 → 0.9.8

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

@@ -1,246 +0,0 @@
-/* contacts.css — scoped styles for contacts-page component
- *
- * Loaded via styleUrl — these styles are automatically scoped
- * to the contacts-page component by zQuery.
- */
-
-/* -- Toolbar -- */
-.contacts-toolbar-row {
-  display: flex;
-  gap: 0.75rem;
-  align-items: center;
-  justify-content: space-between;
-}
-
-/* -- Add Form -- */
-.contacts-form {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 0.75rem;
-  margin-top: 1rem;
-  padding-top: 1rem;
-  border-top: 1px solid var(--border);
-}
-
-.form-field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.form-field-full {
-  grid-column: 1 / -1;
-}
-
-.form-field .input {
-  width: 100%;
-}
-
-.field-error {
-  color: var(--danger);
-  font-size: 0.78rem;
-  min-height: 0;
-}
-
-.contacts-form .btn {
-  grid-column: 1 / -1;
-  justify-self: start;
-}
-
-/* -- Count -- */
-.contacts-count {
-  font-size: 0.85rem;
-  color: var(--text-muted);
-}
-
-/* -- List -- */
-.contacts-list {
-  list-style: none;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.contacts-item {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.7rem 0.85rem;
-  border-radius: var(--radius);
-  cursor: pointer;
-  transition: all 0.15s ease;
-  border: 1px solid transparent;
-}
-
-.contacts-item:hover {
-  background: var(--bg-hover);
-}
-
-.contacts-item.selected {
-  background: var(--accent-soft);
-  border-color: var(--accent);
-}
-
-.contacts-item.is-favorite {
-  border-left: 3px solid var(--accent);
-}
-
-/* -- Status dot -- */
-.status-dot {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  flex-shrink: 0;
-  background: var(--text-muted);
-}
-
-.status-online  { background: var(--success); }
-.status-away    { background: var(--info); }
-.status-offline { background: var(--text-muted); }
-
-/* -- Contact info -- */
-.contacts-info {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-}
-
-.contacts-info strong {
-  font-size: 0.9rem;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.contacts-info small {
-  font-size: 0.8rem;
-  color: var(--text-muted);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* -- Role badge -- */
-.role-badge {
-  font-size: 0.75rem;
-  font-weight: 600;
-  padding: 0.2rem 0.55rem;
-  border-radius: 99px;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-  white-space: nowrap;
-}
-
-.role-developer {
-  background: rgba(96, 165, 250, 0.15);
-  color: #60a5fa;
-}
-
-.role-designer {
-  background: rgba(168, 85, 247, 0.15);
-  color: #a855f7;
-}
-
-.role-manager {
-  background: rgba(52, 211, 153, 0.15);
-  color: #34d399;
-}
-
-.role-qa {
-  background: rgba(251, 191, 36, 0.15);
-  color: #fbbf24;
-}
-
-/* -- Favorite button -- */
-.fav-btn {
-  background: none;
-  border: none;
-  font-size: 1.2rem;
-  cursor: pointer;
-  color: var(--text-muted);
-  padding: 0.2rem;
-  transition: all 0.15s ease;
-  line-height: 1;
-}
-
-.fav-btn:hover {
-  transform: scale(1.2);
-}
-
-.fav-btn.is-fav {
-  color: var(--accent);
-}
-
-/* -- Detail panel -- */
-.contact-detail {
-  border-left: 3px solid var(--accent);
-  animation: slide-in 0.2s ease;
-}
-
-.detail-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 1rem;
-  flex-wrap: wrap;
-}
-
-.detail-header h3 {
-  font-size: 1.1rem;
-  margin-bottom: 0.15rem;
-}
-
-.detail-header .muted {
-  font-size: 0.85rem;
-  color: var(--text-muted);
-}
-
-.detail-actions {
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-/* -- Confirm group -- */
-.confirm-group {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.35rem;
-}
-
-.confirm-text {
-  font-size: 0.82rem;
-  color: var(--danger);
-  font-weight: 500;
-}
-
-@keyframes slide-in {
-  from { opacity: 0; transform: translateY(-6px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-
-/* -- Responsive -- */
-@media (max-width: 768px) {
-  .contacts-toolbar-row {
-    flex-direction: column;
-  }
-
-  .contacts-form {
-    grid-template-columns: 1fr;
-  }
-
-  .contacts-item {
-    flex-wrap: wrap;
-  }
-
-  .role-badge {
-    order: 10;
-    margin-left: calc(10px + 0.75rem);
-  }
-
-  .detail-header {
-    flex-direction: column;
-  }
-}

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

@@ -1,140 +0,0 @@
-<!--
-  contacts.html — external template for contacts-page component
-
-  This template is fetched via templateUrl and uses {{expression}} syntax
-  for data binding. All zQuery directives work here: z-if, z-else,
-  z-for, z-show, z-bind, z-class, z-style, z-text, z-model, z-ref,
-  z-cloak, @click, @submit.prevent, etc.
-
-  Expressions have access to `state` and `props` automatically.
-  Inside z-for loops, use {{item.prop}} for per-item values.
--->
-<div class="page-header" z-cloak>
-  <h1>Contacts</h1>
-  <p class="subtitle">
-    External template &amp; styles via <code>templateUrl</code> / <code>styleUrl</code>.
-    Directives: <code>z-if</code>, <code>z-for</code> + <code>z-key</code>, <code>z-show</code>,
-    <code>z-bind</code>, <code>z-class</code>, <code>z-model</code>, and more.
-  </p>
-</div>
-
-<!-- Toolbar: add button -->
-<div class="card contacts-toolbar">
-  <div class="contacts-toolbar-row">
-    <span class="contacts-count" z-if="contacts.length > 0">
-      <strong z-text="contacts.length"></strong> contacts
-      · <strong z-text="favoriteCount"></strong> ★ favorited
-      <span z-show="totalAdded > 0"> · <span z-text="totalAdded"></span> added this session</span>
-    </span>
-    <span class="contacts-count" z-else>No contacts yet</span>
-    <button class="btn btn-primary" @click="toggleForm">
-      <span z-if="showForm">✕ Cancel</span>
-      <span z-else>+ Add Contact</span>
-    </button>
-  </div>
-
-  <!-- Add contact form — toggled via z-show -->
-  <form class="contacts-form" z-show="showForm" @submit.prevent="addContact">
-    <div class="form-field form-field-full">
-      <input
-        type="text"
-        z-model="newName"
-        z-trim
-        placeholder="Full name"
-        class="input"
-        @blur="validateName"
-      />
-      <small class="field-error" z-show="nameError" z-text="nameError"></small>
-    </div>
-    <div class="form-field">
-      <input
-        type="email"
-        z-model="newEmail"
-        z-trim
-        placeholder="Email address"
-        class="input"
-        @blur="validateEmail"
-      />
-      <small class="field-error" z-show="emailError" z-text="emailError"></small>
-    </div>
-    <select z-model="newRole" class="input">
-      <option value="Developer">Developer</option>
-      <option value="Designer">Designer</option>
-      <option value="Manager">Manager</option>
-      <option value="QA">QA</option>
-    </select>
-    <button type="submit" class="btn btn-primary">Save Contact</button>
-  </form>
-</div>
-
-<!-- Contact count -->
-<div class="card" z-if="contacts.length > 0" z-key="contacts-list">
-  <!-- Contacts list — z-for renders each item -->
-  <ul class="contacts-list">
-    <li
-      z-for="contact in contacts"
-      z-key="{{contact.id}}"
-      class="contacts-item {{contact.id === selectedId ? 'selected' : ''}} {{contact.favorite ? 'is-favorite' : ''}}"
-      @click="selectContact({{contact.id}})"
-    >
-      <!-- Status indicator — class set per status -->
-      <span
-        class="status-dot status-{{contact.status}}"
-        title="{{contact.status}}"
-      ></span>
-
-      <!-- Contact info -->
-      <div class="contacts-info">
-        <strong>{{contact.name}}</strong>
-        <small>{{contact.email}}</small>
-      </div>
-
-      <!-- Role badge -->
-      <span class="role-badge role-{{contact.role.toLowerCase()}}">{{contact.role}}</span>
-
-      <!-- Favorite toggle — .stop modifier prevents row click -->
-      <button
-        class="fav-btn {{contact.favorite ? 'is-fav' : ''}}"
-        @click.stop="toggleFavorite({{contact.id}})"
-      >{{contact.favorite ? '★' : '☆'}}</button>
-    </li>
-  </ul>
-</div>
-
-<!-- Empty state -->
-<div class="card" z-else z-key="contacts-empty">
-  <div class="empty-state">
-    <p>No contacts yet — add one above!</p>
-  </div>
-</div>
-
-<!-- Selected contact detail panel — z-if conditional rendering -->
-<div class="card contact-detail" z-if="selectedId !== null" z-key="contact-detail">
-  <div class="detail-header">
-    <div>
-      <h3 z-text="selectedName"></h3>
-      <p class="muted" z-text="selectedEmail"></p>
-    </div>
-    <div class="detail-actions">
-      <button
-        class="btn btn-outline btn-sm"
-        @click="cycleStatus({{selectedId}})"
-      >
-        Status: <span z-text="selectedStatus"></span>
-      </button>
-
-      <!-- Confirm delete pattern using z-if / z-else -->
-      <button
-        class="btn btn-danger btn-sm"
-        z-if="confirmDeleteId !== selectedId"
-        @click.stop="confirmDelete({{selectedId}})"
-      >Delete</button>
-
-      <span z-else class="confirm-group">
-        <span class="confirm-text">Sure?</span>
-        <button class="btn btn-danger btn-sm" @click.stop="deleteContact({{selectedId}})">Yes</button>
-        <button class="btn btn-ghost btn-sm" @click.stop="cancelDelete">No</button>
-      </span>
-    </div>
-  </div>
-</div>

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>
-    `;
-  }
-});