zero-query 0.9.7 → 0.9.8

package/src/component.js

@@ -502,11 +502,14 @@ class Component {
     this._bindRefs();
     this._bindModels();
 
-    // Restore focus if the morph replaced the focused element
+    // Restore focus if the morph replaced the focused element.
+    // Always restore selectionRange — even when the element is still
+    // the activeElement — because _bindModels or morph attribute syncing
+    // can alter the value and move the cursor.
     if (_focusInfo) {
       const el = this._el.querySelector(_focusInfo.selector);
-      if (el && el !== document.activeElement) {
-        el.focus();
+      if (el) {
+        if (el !== document.activeElement) el.focus();
         try {
           if (_focusInfo.start !== null && _focusInfo.start !== undefined) {
             el.setSelectionRange(_focusInfo.start, _focusInfo.end, _focusInfo.dir);

package/src/diff.js

@@ -89,6 +89,11 @@ export function morphElement(oldEl, newHTML) {
   return clone;
 }
 
+// Aliases for the concat build — core.js imports these as _morph / _morphElement,
+// but the build strips `import … as` lines, so the aliases must exist at runtime.
+const _morph = morph;
+const _morphElement = morphElement;
+
 /**
  * Reconcile children of `oldParent` to match `newParent`.
  *
@@ -434,6 +439,13 @@ function _morphAttributes(oldEl, newEl) {
 
 /**
  * Sync input element value, checked, disabled states.
+ *
+ * Only updates the value when the new HTML explicitly carries a `value`
+ * attribute.  Templates that use z-model manage values through reactive
+ * state + _bindModels — the morph engine should not interfere by wiping
+ * a live input's content to '' just because the template has no `value`
+ * attr.  This prevents the wipe-then-restore cycle that resets cursor
+ * position on every keystroke.
  */
 function _syncInputValue(oldEl, newEl) {
   const type = (oldEl.type || '').toLowerCase();
@@ -441,8 +453,9 @@ function _syncInputValue(oldEl, newEl) {
   if (type === 'checkbox' || type === 'radio') {
     if (oldEl.checked !== newEl.checked) oldEl.checked = newEl.checked;
   } else {
-    if (oldEl.value !== (newEl.getAttribute('value') || '')) {
-      oldEl.value = newEl.getAttribute('value') || '';
+    const newVal = newEl.getAttribute('value');
+    if (newVal !== null && oldEl.value !== newVal) {
+      oldEl.value = newVal;
     }
   }
 

package/tests/cli.test.js

@@ -454,3 +454,307 @@ describe('CLI — flag/option extra', () => {
     expect(flag('watch', 'w')).toBe(true);
   });
 });
+
+
+// ===========================================================================
+// createProject — scaffold command
+// ===========================================================================
+
+describe('CLI — createProject', () => {
+  const fs = require('fs');
+  const path = require('path');
+  const os = require('os');
+
+  let createProject;
+
+  beforeEach(async () => {
+    vi.resetModules();
+    const mod = await import('../cli/commands/create.js');
+    createProject = mod.default || mod;
+  });
+
+  function tmpDir() {
+    const dir = path.join(os.tmpdir(), 'zq-create-' + Date.now() + '-' + Math.random().toString(36).slice(2, 8));
+    fs.mkdirSync(dir, { recursive: true });
+    return dir;
+  }
+
+  function cleanup(dir) {
+    if (fs.existsSync(dir)) fs.rmSync(dir, { recursive: true, force: true });
+  }
+
+  // -- scaffold variant directories exist --
+
+  it('default scaffold directory exists', () => {
+    const dir = path.resolve(__dirname, '..', 'cli', 'scaffold', 'default');
+    expect(fs.existsSync(dir)).toBe(true);
+  });
+
+  it('minimal scaffold directory exists', () => {
+    const dir = path.resolve(__dirname, '..', 'cli', 'scaffold', 'minimal');
+    expect(fs.existsSync(dir)).toBe(true);
+  });
+
+  // -- default scaffold contains expected files --
+
+  it('default scaffold has index.html', () => {
+    const f = path.resolve(__dirname, '..', 'cli', 'scaffold', 'default', 'index.html');
+    expect(fs.existsSync(f)).toBe(true);
+  });
+
+  it('default scaffold has app/app.js', () => {
+    const f = path.resolve(__dirname, '..', 'cli', 'scaffold', 'default', 'app', 'app.js');
+    expect(fs.existsSync(f)).toBe(true);
+  });
+
+  it('default scaffold has app/routes.js', () => {
+    const f = path.resolve(__dirname, '..', 'cli', 'scaffold', 'default', 'app', 'routes.js');
+    expect(fs.existsSync(f)).toBe(true);
+  });
+
+  it('default scaffold has app/store.js', () => {
+    const f = path.resolve(__dirname, '..', 'cli', 'scaffold', 'default', 'app', 'store.js');
+    expect(fs.existsSync(f)).toBe(true);
+  });
+
+  // -- minimal scaffold contains expected files --
+
+  it('minimal scaffold has index.html', () => {
+    const f = path.resolve(__dirname, '..', 'cli', 'scaffold', 'minimal', 'index.html');
+    expect(fs.existsSync(f)).toBe(true);
+  });
+
+  it('minimal scaffold has app/app.js', () => {
+    const f = path.resolve(__dirname, '..', 'cli', 'scaffold', 'minimal', 'app', 'app.js');
+    expect(fs.existsSync(f)).toBe(true);
+  });
+
+  it('minimal scaffold has 4 components', () => {
+    const dir = path.resolve(__dirname, '..', 'cli', 'scaffold', 'minimal', 'app', 'components');
+    const files = fs.readdirSync(dir).sort();
+    expect(files).toEqual(['about.js', 'counter.js', 'home.js', 'not-found.js']);
+  });
+
+  // -- minimal scaffold is a subset of default --
+
+  it('minimal scaffold has fewer files than default', () => {
+    function countFiles(dir) {
+      let count = 0;
+      for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+        if (entry.isDirectory()) count += countFiles(path.join(dir, entry.name));
+        else count++;
+      }
+      return count;
+    }
+    const defDir = path.resolve(__dirname, '..', 'cli', 'scaffold', 'default');
+    const minDir = path.resolve(__dirname, '..', 'cli', 'scaffold', 'minimal');
+    expect(countFiles(minDir)).toBeLessThan(countFiles(defDir));
+  });
+
+  // -- {{NAME}} replacement --
+
+  it('scaffold templates contain {{NAME}} placeholder', () => {
+    const html = fs.readFileSync(
+      path.resolve(__dirname, '..', 'cli', 'scaffold', 'default', 'index.html'), 'utf-8'
+    );
+    expect(html).toContain('{{NAME}}');
+  });
+
+  it('minimal scaffold templates contain {{NAME}} placeholder', () => {
+    const html = fs.readFileSync(
+      path.resolve(__dirname, '..', 'cli', 'scaffold', 'minimal', 'index.html'), 'utf-8'
+    );
+    expect(html).toContain('{{NAME}}');
+  });
+
+  // -- walkDir functionality (tested via module internals) --
+
+  it('scaffolds default project into a target directory', () => {
+    const target = tmpDir();
+    const projDir = path.join(target, 'test-app');
+
+    // Simulate: process.argv for default (no --minimal)
+    process.argv = ['node', 'zquery', 'create', 'test-app'];
+    vi.resetModules();
+
+    // We can't easily call createProject because it uses process.exit.
+    // Instead, test the walkDir + copy logic directly.
+    const scaffoldDir = path.resolve(__dirname, '..', 'cli', 'scaffold', 'default');
+
+    function walkDir(dir, prefix = '') {
+      const entries = [];
+      for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+        const rel = prefix ? `${prefix}/${entry.name}` : entry.name;
+        if (entry.isDirectory()) entries.push(...walkDir(path.join(dir, entry.name), rel));
+        else entries.push(rel);
+      }
+      return entries;
+    }
+
+    const files = walkDir(scaffoldDir);
+    expect(files.length).toBeGreaterThan(5);
+    expect(files).toContain('index.html');
+    expect(files).toContain('global.css');
+    expect(files).toContain('app/app.js');
+    expect(files).toContain('app/routes.js');
+    expect(files).toContain('app/store.js');
+
+    cleanup(target);
+  });
+
+  it('walkDir lists minimal scaffold files correctly', () => {
+    const scaffoldDir = path.resolve(__dirname, '..', 'cli', 'scaffold', 'minimal');
+
+    function walkDir(dir, prefix = '') {
+      const entries = [];
+      for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+        const rel = prefix ? `${prefix}/${entry.name}` : entry.name;
+        if (entry.isDirectory()) entries.push(...walkDir(path.join(dir, entry.name), rel));
+        else entries.push(rel);
+      }
+      return entries;
+    }
+
+    const files = walkDir(scaffoldDir);
+    expect(files).toContain('index.html');
+    expect(files).toContain('global.css');
+    expect(files).toContain('app/app.js');
+    expect(files).toContain('app/routes.js');
+    expect(files).toContain('app/store.js');
+    expect(files).toContain('app/components/home.js');
+    expect(files).toContain('app/components/counter.js');
+    expect(files).toContain('app/components/about.js');
+    expect(files).toContain('app/components/not-found.js');
+    expect(files).toContain('assets/.gitkeep');
+  });
+
+  // -- {{NAME}} replacement in copied files --
+
+  it('replaces {{NAME}} in copied scaffold files', () => {
+    const target = tmpDir();
+    const scaffoldDir = path.resolve(__dirname, '..', 'cli', 'scaffold', 'minimal');
+    const projectName = 'my-cool-app';
+
+    function walkDir(dir, prefix = '') {
+      const entries = [];
+      for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+        const rel = prefix ? `${prefix}/${entry.name}` : entry.name;
+        if (entry.isDirectory()) entries.push(...walkDir(path.join(dir, entry.name), rel));
+        else entries.push(rel);
+      }
+      return entries;
+    }
+
+    const files = walkDir(scaffoldDir);
+
+    for (const rel of files) {
+      let content = fs.readFileSync(path.join(scaffoldDir, rel), 'utf-8');
+      content = content.replace(/\{\{NAME\}\}/g, projectName);
+      const dest = path.join(target, rel);
+      fs.mkdirSync(path.dirname(dest), { recursive: true });
+      fs.writeFileSync(dest, content, 'utf-8');
+    }
+
+    const html = fs.readFileSync(path.join(target, 'index.html'), 'utf-8');
+    expect(html).toContain(projectName);
+    expect(html).not.toContain('{{NAME}}');
+
+    const appJs = fs.readFileSync(path.join(target, 'app', 'app.js'), 'utf-8');
+    expect(appJs).toContain(projectName);
+    expect(appJs).not.toContain('{{NAME}}');
+
+    cleanup(target);
+  });
+
+  // -- conflict detection --
+
+  it('conflicts array detects existing files', () => {
+    const target = tmpDir();
+    fs.writeFileSync(path.join(target, 'index.html'), 'existing');
+    fs.mkdirSync(path.join(target, 'app'), { recursive: true });
+
+    const conflicts = ['index.html', 'global.css', 'app', 'assets'].filter(f =>
+      fs.existsSync(path.join(target, f))
+    );
+
+    expect(conflicts).toContain('index.html');
+    expect(conflicts).toContain('app');
+    expect(conflicts).not.toContain('global.css');
+    expect(conflicts).not.toContain('assets');
+
+    cleanup(target);
+  });
+
+  it('no conflicts in empty directory', () => {
+    const target = tmpDir();
+
+    const conflicts = ['index.html', 'global.css', 'app', 'assets'].filter(f =>
+      fs.existsSync(path.join(target, f))
+    );
+
+    expect(conflicts).toHaveLength(0);
+
+    cleanup(target);
+  });
+
+  // -- flag parsing for --minimal --
+
+  it('--minimal flag resolves to minimal variant', async () => {
+    process.argv = ['node', 'zquery', 'create', '--minimal', 'my-app'];
+    vi.resetModules();
+    const { flag } = await import('../cli/args.js');
+    expect(flag('minimal', 'm')).toBe(true);
+  });
+
+  it('-m short flag resolves to minimal variant', async () => {
+    process.argv = ['node', 'zquery', 'create', '-m', 'my-app'];
+    vi.resetModules();
+    const { flag } = await import('../cli/args.js');
+    expect(flag('minimal', 'm')).toBe(true);
+  });
+
+  it('no flag defaults to default variant', async () => {
+    process.argv = ['node', 'zquery', 'create', 'my-app'];
+    vi.resetModules();
+    const { flag } = await import('../cli/args.js');
+    expect(flag('minimal', 'm')).toBe(false);
+  });
+
+  // -- dirArg parsing skips flags --
+
+  it('dirArg parsing skips flag args', () => {
+    const args = ['create', '--minimal', 'my-app'];
+    const dirArg = args.slice(1).find(a => !a.startsWith('-'));
+    expect(dirArg).toBe('my-app');
+  });
+
+  it('dirArg parsing returns first positional', () => {
+    const args = ['create', 'my-app'];
+    const dirArg = args.slice(1).find(a => !a.startsWith('-'));
+    expect(dirArg).toBe('my-app');
+  });
+
+  it('dirArg is undefined when no positional given', () => {
+    const args = ['create', '--minimal'];
+    const dirArg = args.slice(1).find(a => !a.startsWith('-'));
+    expect(dirArg).toBeUndefined();
+  });
+
+  it('dirArg with flag after dir name', () => {
+    const args = ['create', 'my-app', '--minimal'];
+    const dirArg = args.slice(1).find(a => !a.startsWith('-'));
+    expect(dirArg).toBe('my-app');
+  });
+
+  // -- help text mentions --minimal --
+
+  it('help text includes --minimal flag', async () => {
+    vi.resetModules();
+    const spy = vi.spyOn(console, 'log').mockImplementation(() => {});
+    const showHelp = (await import('../cli/help.js')).default;
+    showHelp();
+    const text = spy.mock.calls.map(c => c.join(' ')).join('\n');
+    expect(text).toContain('--minimal');
+    spy.mockRestore();
+  });
+});

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