zero-query 0.9.6 → 0.9.8

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

@@ -1,131 +0,0 @@
-// scripts/components/about.js — about page with theme switcher
-//
-// Demonstrates: $.storage (localStorage wrapper), $.bus for notifications,
-//               $.version, component methods, data-theme attribute toggling
-
-$.component('about-page', {
-  state: () => ({
-    theme: 'dark',
-  }),
-
-  mounted() {
-    // Read persisted theme via $.storage
-    this.state.theme = $.storage.get('theme') || 'dark';
-  },
-
-  toggleTheme() {
-    const next = this.state.theme === 'dark' ? 'light' : 'dark';
-    this.state.theme = next;
-    // Apply theme via data attribute
-    document.documentElement.setAttribute('data-theme', next);
-    // Persist via $.storage (wraps localStorage)
-    $.storage.set('theme', next);
-    $.bus.emit('toast', { message: `Switched to ${next} theme`, type: 'info' });
-  },
-
-  render() {
-    return `
-      <div class="page-header">
-        <h1>About</h1>
-        <p class="subtitle">Built with zQuery v${$.version} — a zero-dependency frontend library.</p>
-      </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.53 16.122a3 3 0 0 0-5.78 1.128 2.25 2.25 0 0 1-2.4 2.245 4.5 4.5 0 0 0 8.4-2.245c0-.399-.078-.78-.22-1.128Zm0 0a15.998 15.998 0 0 0 3.388-1.62m-5.043-.025a15.994 15.994 0 0 1 1.622-3.395m3.42 3.42a15.995 15.995 0 0 0 4.764-4.648l3.876-5.814a1.151 1.151 0 0 0-1.597-1.597L14.146 6.32a15.996 15.996 0 0 0-4.649 4.763m3.42 3.42a6.776 6.776 0 0 0-3.42-3.42"/></svg> Theme</h3>
-        <p>Toggle between dark and light mode. Persisted to <code>localStorage</code> via <code>$.storage</code>.</p>
-        <div class="theme-toggle">
-          <span>Current: <strong>${this.state.theme}</strong></span>
-          <button class="btn btn-outline" @click="toggleTheme">${this.state.theme === 'dark' ? '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width:16px;height:16px;vertical-align:-3px;margin-right:0.15rem;"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"/></svg> Light Mode' : '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width:16px;height:16px;vertical-align:-3px;margin-right:0.15rem;"><path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z"/></svg> Dark Mode'}</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="M21.75 6.75a4.5 4.5 0 0 1-4.884 4.484c-1.076-.091-2.264.071-2.95.904l-7.152 8.684a2.548 2.548 0 1 1-3.586-3.586l8.684-7.152c.833-.686.995-1.874.904-2.95a4.5 4.5 0 0 1 6.336-4.486l-3.276 3.276a3.004 3.004 0 0 0 2.25 2.25l3.276-3.276c.256.565.398 1.192.398 1.852Z"/></svg> Features Used in This App</h3>
-        <div class="feature-grid">
-          <div class="feature-item">
-            <strong>$.component()</strong>
-            <span>Reactive components with state, lifecycle hooks, and template rendering</span>
-          </div>
-          <div class="feature-item">
-            <strong>computed / watch</strong>
-            <span>Derived state properties and reactive watchers on the counter page</span>
-          </div>
-          <div class="feature-item">
-            <strong>DOM Diffing</strong>
-            <span>Efficient <code>morph()</code> engine patches only changed DOM nodes on re-render</span>
-          </div>
-          <div class="feature-item">
-            <strong>z-key</strong>
-            <span>Keyed list reconciliation in z-for loops (todos, counter history, contacts)</span>
-          </div>
-          <div class="feature-item">
-            <strong>$.router()</strong>
-            <span>SPA routing with history mode, z-link navigation, and fallback pages</span>
-          </div>
-          <div class="feature-item">
-            <strong>$.store()</strong>
-            <span>Centralized state management with actions, getters, and subscriptions</span>
-          </div>
-          <div class="feature-item">
-            <strong>$.get()</strong>
-            <span>HTTP client for fetching JSON APIs with async/await</span>
-          </div>
-          <div class="feature-item">
-            <strong>$.signal() / $.computed()</strong>
-            <span>Fine-grained reactive primitives for derived state</span>
-          </div>
-          <div class="feature-item">
-            <strong>$.bus</strong>
-            <span>Event bus for cross-component communication (toast notifications)</span>
-          </div>
-          <div class="feature-item">
-            <strong>$.storage</strong>
-            <span>localStorage wrapper for persisting user preferences</span>
-          </div>
-          <div class="feature-item">
-            <strong>$.debounce()</strong>
-            <span>Debounced search input in the todos filter</span>
-          </div>
-          <div class="feature-item">
-            <strong>$.escapeHtml()</strong>
-            <span>Safe rendering of user-generated and API content</span>
-          </div>
-          <div class="feature-item">
-            <strong>CSP-safe expressions</strong>
-            <span>Template expressions evaluated without <code>eval()</code> or <code>new Function()</code></span>
-          </div>
-          <div class="feature-item">
-            <strong>z-model / z-ref</strong>
-            <span>Two-way data binding and DOM element references</span>
-          </div>
-          <div class="feature-item">
-            <strong>templateUrl / styleUrl</strong>
-            <span>External HTML templates and CSS with auto-scoping (contacts page)</span>
-          </div>
-          <div class="feature-item">
-            <strong>z-if / z-for / z-show</strong>
-            <span>Structural directives for conditional &amp; list rendering</span>
-          </div>
-          <div class="feature-item">
-            <strong>z-bind / z-class / z-style</strong>
-            <span>Dynamic attributes, classes, and inline styles</span>
-          </div>
-          <div class="feature-item">
-            <strong>$.on()</strong>
-            <span>Global delegated event listeners for the hamburger menu</span>
-          </div>
-        </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="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25"/></svg> Next Steps</h3>
-        <ul class="next-steps">
-          <li>Read the <a href="https://z-query.com/docs" target="_blank" rel="noopener">full documentation</a></li>
-          <li>Explore the <a href="https://github.com/tonywied17/zero-query" target="_blank" rel="noopener">source on GitHub</a></li>
-          <li>Run <code>npx zquery bundle</code> to build for production</li>
-          <li>Run <code>npx zquery dev</code> for live-reload development</li>
-        </ul>
-      </div>
-    `;
-  }
-});

package/cli/scaffold/app/components/api-demo.js

@@ -1,103 +0,0 @@
-// scripts/components/api-demo.js — HTTP client demonstration
-//
-// Demonstrates: $.get() for fetching JSON, z-if/z-else conditional
-//               rendering, z-show visibility, z-for list rendering,
-//               z-text content binding, @click event handling,
-//               loading/error states, $.escapeHtml(), async patterns
-
-$.component('api-demo', {
-  state: () => ({
-    users: [],
-    selectedUser: null,
-    posts: [],
-    loading: false,
-    error: '',
-  }),
-
-  mounted() {
-    this.fetchUsers();
-  },
-
-  async fetchUsers() {
-    this.state.loading = true;
-    this.state.error = '';
-    try {
-      // $.get() — zero-config JSON fetching
-      const res = await $.get('https://jsonplaceholder.typicode.com/users');
-      this.state.users = res.data.slice(0, 6);
-    } catch (err) {
-      this.state.error = 'Failed to load users. Check your connection.';
-    }
-    this.state.loading = false;
-  },
-
-  async selectUser(id) {
-    this.state.selectedUser = this.state.users.find(u => u.id === Number(id));
-    this.state.loading = true;
-    try {
-      const res = await $.get(`https://jsonplaceholder.typicode.com/posts?userId=${id}`);
-      this.state.posts = res.data.slice(0, 4);
-    } catch (err) {
-      this.state.error = 'Failed to load posts.';
-    }
-    this.state.loading = false;
-    $.bus.emit('toast', { message: `Loaded posts for ${this.state.selectedUser.name}`, type: 'success' });
-  },
-
-  clearSelection() {
-    this.state.selectedUser = null;
-    this.state.posts = [];
-  },
-
-  render() {
-    const { selectedUser } = this.state;
-
-    return `
-      <div class="page-header">
-        <h1>API Demo</h1>
-        <p class="subtitle">Fetching data with <code>$.get()</code>. Directives: <code>z-if</code>, <code>z-show</code>, <code>z-for</code>, <code>z-text</code>.</p>
-      </div>
-
-      <div class="card card-error" z-show="error"><p><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width:16px;height:16px;vertical-align:-3px;margin-right:0.15rem;"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"/></svg> <span z-text="error"></span></p></div>
-      <div class="loading-bar" z-show="loading"></div>
-
-      <div z-if="!selectedUser">
-        <div class="card">
-          <h3>Users</h3>
-          <p class="muted">Click a user to fetch their posts.</p>
-          <div class="user-grid" z-if="users.length > 0">
-            <button z-for="u in users" class="user-card" @click="selectUser({{u.id}})">
-              <strong>{{u.name}}</strong>
-              <small>@{{u.username}}</small>
-              <small class="muted">{{u.company.name}}</small>
-            </button>
-          </div>
-          <p z-else z-show="!loading">No users loaded.</p>
-        </div>
-      </div>
-
-      <div z-else>
-        <div class="card">
-          <div class="user-detail-header">
-            <div>
-              <h3>${selectedUser ? $.escapeHtml(selectedUser.name) : ''}</h3>
-              <p class="muted">${selectedUser ? `@${$.escapeHtml(selectedUser.username)} · ${$.escapeHtml(selectedUser.email)}` : ''}</p>
-            </div>
-            <button class="btn btn-ghost btn-sm" @click="clearSelection">← Back</button>
-          </div>
-        </div>
-
-        <div class="card">
-          <h3>Recent Posts</h3>
-          <div class="posts-list" z-if="posts.length > 0">
-            <article z-for="p in posts" class="post-item">
-              <h4>{{p.title}}</h4>
-              <p>{{p.body.substring(0, 120)}}…</p>
-            </article>
-          </div>
-          <p z-else class="muted" z-show="!loading">No posts found.</p>
-        </div>
-      </div>
-    `;
-  }
-});

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>