zero-query 0.9.6 → 0.9.8

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

@@ -0,0 +1,201 @@
+// about.js — About page with theme switcher
+//
+// Features used:
+//   $.storage        — localStorage wrapper (get / set)
+//   $.version        — library version string
+//   $.unitTests      — build-time test results object
+//   $.bus.emit       — toast notifications
+//   data-theme attr  — dark / light theming
+
+$.component('about-page', {
+  styles: `
+    /* -- Hero -- */
+    .about-hero       { text-align: center; padding: 2.5rem 1rem 1.5rem; }
+    .about-hero h1    { font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 0.35rem; }
+    .about-hero .ver  { display: inline-block; padding: 0.2rem 0.65rem; border-radius: 999px;
+                        font-size: 0.78rem; font-weight: 600; color: var(--accent);
+                        background: var(--accent-soft); border: 1px solid rgba(88,166,255,.15);
+                        margin-bottom: 0.75rem; }
+    .about-hero p     { color: var(--text-muted); font-size: 0.95rem; max-width: 520px; margin: 0 auto; }
+
+    /* -- Stats bar -- */
+    .about-stats      { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap;
+                        padding: 1.25rem 0; border-top: 1px solid var(--border);
+                        border-bottom: 1px solid var(--border); margin: 1.25rem 0; }
+    .about-stat       { text-align: center; }
+    .about-stat-val   { font-size: 1.35rem; font-weight: 700; color: var(--accent);
+                        font-variant-numeric: tabular-nums; }
+    .about-stat-lbl   { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase;
+                        letter-spacing: 0.04em; }
+
+    /* -- Theme switcher -- */
+    .theme-switch     { display: inline-flex; border-radius: var(--radius); overflow: hidden;
+                        border: 1px solid var(--border); background: var(--bg); }
+    .theme-btn        { padding: 0.45rem 1rem; font-size: 0.82rem; font-weight: 500;
+                        background: transparent; border: none; color: var(--text-muted);
+                        cursor: pointer; transition: all .15s ease; font-family: inherit;
+                        display: inline-flex; align-items: center; gap: 0.35rem; }
+    .theme-btn:hover  { color: var(--text); background: var(--bg-hover); }
+    .theme-btn.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
+    .theme-btn + .theme-btn { border-left: 1px solid var(--border); }
+
+    /* -- Feature categories -- */
+    .feat-section     { margin-bottom: 0.5rem; }
+    .feat-label       { font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
+                        letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 0.4rem;
+                        padding-left: 0.1rem; }
+
+    /* -- Test badge -- */
+    .test-badge       { display: inline-flex; align-items: center; gap: 0.3rem;
+                        padding: 0.2rem 0.55rem; border-radius: 999px;
+                        font-size: 0.7rem; font-weight: 600; line-height: 1;
+                        margin-top: 0.35rem; }
+    .test-badge.pass  { background: rgba(63,185,80,.12); color: var(--success);
+                        border: 1px solid rgba(63,185,80,.25); }
+    .test-badge.fail  { background: rgba(248,81,73,.12); color: var(--danger);
+                        border: 1px solid rgba(248,81,73,.25); }
+    .test-badge svg   { width: 11px; height: 11px; }
+
+    @media (max-width: 768px) {
+      .about-hero       { padding: 1.5rem 0.5rem 1rem; }
+      .about-hero h1    { font-size: 1.5rem; }
+      .about-stats      { gap: 1rem; }
+      .about-stat-val   { font-size: 1.1rem; }
+      .theme-btn        { padding: 0.4rem 0.65rem; font-size: 0.78rem; }
+    }
+    @media (max-width: 480px) {
+      .about-hero h1    { font-size: 1.3rem; }
+      .about-stats      { gap: 0.6rem 1rem; }
+      .about-stat-val   { font-size: 1rem; }
+    }
+  `,
+
+  state: () => ({
+    theme: 'system',
+  }),
+
+  mounted() {
+    this.state.theme = $.storage.get('theme') || 'system';
+  },
+
+  setTheme(mode) {
+    this.state.theme = mode;
+    $.storage.set('theme', mode);
+    window.__applyTheme(mode);
+    const label = mode === 'system' ? 'system (auto)' : mode;
+    $.bus.emit('toast', { message: `Theme: ${label}`, type: 'info' });
+  },
+
+  render() {
+    const t = this.state.theme;
+    const feats = {
+      'Core & Components': [
+        ['$.component()', 'Reactive components with state, lifecycle, and template rendering'],
+        ['computed / watch', 'Derived state and reactive watchers on the counter page'],
+        ['DOM Diffing', 'Efficient morph() engine patches only changed DOM nodes'],
+        ['z-key', 'Keyed list reconciliation in z-for loops'],
+        ['z-model / z-ref', 'Two-way data binding and DOM element references'],
+        ['CSP-safe expressions', 'Template expressions without eval() or new Function()'],
+      ],
+      'Directives': [
+        ['z-if / z-for / z-show', 'Structural directives for conditional & list rendering'],
+        ['z-bind / z-class / z-style', 'Dynamic attributes, classes, and inline styles'],
+        ['z-debounce', 'Debounced model updates — z-model z-debounce="300"'],
+        ['z-lowercase / z-uppercase', 'Auto-transform text input on contacts email'],
+        ['z-html', 'Trusted HTML injection in the playground'],
+        ['templateUrl / styleUrl', 'External templates and CSS with auto-scoping'],
+      ],
+      'Events': [
+        ['@click.stop / .prevent', 'Event modifiers for fine-grained control'],
+        ['@click.self / .once', 'Self-only and one-shot handlers in modals'],
+        ['@click.outside', 'Outside-click detection for dropdowns'],
+        ['@keydown.escape', 'Key modifiers — Escape to close forms'],
+      ],
+      'Reactive Primitives': [
+        ['$.signal() / $.computed()', 'Fine-grained reactive primitives for derived state'],
+        ['$.effect()', 'Side-effects that auto-track signal dependencies'],
+      ],
+      'State & Routing': [
+        ['$.router()', 'SPA routing with history mode and fallback pages'],
+        ['$.store()', 'Centralized state with actions, getters, subscriptions'],
+        ['store.use / store.snapshot', 'Action middleware, deep-cloning, and history'],
+        ['$.bus', 'Event bus for cross-component communication'],
+        ['$.storage', 'localStorage wrapper for persisting preferences'],
+      ],
+      'HTTP & Utilities': [
+        ['$.get() / $.http', 'HTTP client, CRUD, interceptors, and abort signals'],
+        ['$.pipe / $.memoize / $.retry', 'Function composition, LRU caching, resilient async'],
+        ['$.escapeHtml()', 'Safe rendering of user-generated content'],
+        ['$.fn', 'Custom chainable collection methods via plugins'],
+        ['fadeIn / fadeOut / slideToggle', 'Promise-based animations with chaining'],
+        ['$.on()', 'Global delegated event listeners'],
+      ],
+    };
+
+    return `
+      <div class="about-hero">
+        <span class="ver">v${$.version}</span>
+        <h1>zQuery</h1>
+        <p>A zero-dependency frontend micro-library — reactive components, routing, state management, and more in <strong>${$.libSize}</strong> minified.</p>
+      </div>
+
+      <div class="about-stats">
+        <div class="about-stat"><div class="about-stat-val">${$.libSize}</div><div class="about-stat-lbl">Minified</div></div>
+        <div class="about-stat"><div class="about-stat-val">0</div><div class="about-stat-lbl">Dependencies</div></div>
+        <div class="about-stat">
+          <div class="about-stat-val">${$.unitTests.total}</div>
+          <div class="about-stat-lbl">Tests</div>
+          <span class="test-badge ${$.unitTests.ok ? 'pass' : 'fail'}">${$.unitTests.ok
+            ? '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg> passing'
+            : '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg> ' + $.unitTests.failed + ' failing'}</span>
+        </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="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>Choose your preferred appearance. <strong>System</strong> follows your OS setting automatically.</p>
+        <div class="theme-switch">
+          <button class="theme-btn ${t === 'system' ? 'active' : ''}" @click="setTheme('system')">
+            <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;"><path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25A2.25 2.25 0 0 1 5.25 3h13.5A2.25 2.25 0 0 1 21 5.25Z"/></svg>
+            System
+          </button>
+          <button class="theme-btn ${t === 'dark' ? 'active' : ''}" @click="setTheme('dark')">
+            <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;"><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
+          </button>
+          <button class="theme-btn ${t === 'light' ? 'active' : ''}" @click="setTheme('light')">
+            <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;"><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
+          </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>
+        ${Object.entries(feats).map(([cat, items]) => `
+          <div class="feat-section">
+            <div class="feat-label">${cat}</div>
+            <div class="feature-grid">
+              ${items.map(([name, desc]) => `
+                <div class="feature-item">
+                  <strong>${name}</strong>
+                  <span>${desc}</span>
+                </div>
+              `).join('')}
+            </div>
+          </div>
+        `).join('')}
+      </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/default/app/components/api-demo.js

@@ -0,0 +1,143 @@
+// api-demo.js — HTTP client demo
+//
+// Features used:
+//   $.get()                — fetch JSON from an API
+//   z-if / z-else / z-show — conditional rendering
+//   z-for / z-text         — list rendering & text binding
+//   $.escapeHtml()         — sanitize user-provided content
+//   async methods          — loading & error state patterns
+
+$.component('api-demo', {
+  styles: `
+    .api-users     { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+                     gap: .75rem; }
+    .api-user      { display: flex; flex-direction: column; gap: .2rem; padding: 1rem;
+                     border-radius: var(--radius); border: 1px solid var(--border);
+                     background: var(--bg-hover); cursor: pointer;
+                     transition: border-color .15s, box-shadow .15s, transform .12s; text-align: left; }
+    .api-user:hover { border-color: var(--accent); transform: translateY(-2px);
+                      box-shadow: 0 4px 12px rgba(88,166,255,.12); }
+    .api-user strong { color: var(--text); font-size: .95rem; }
+    .api-user small  { color: var(--text-muted); font-size: .82rem; }
+    .api-user .handle { color: var(--accent); font-weight: 500; }
+
+    .api-detail    { display: flex; align-items: flex-start; justify-content: space-between;
+                     gap: 1rem; flex-wrap: wrap; }
+    .api-meta      { font-size: .88rem; color: var(--text-muted); margin-top: .15rem; }
+    .api-meta span { margin-right: .75rem; }
+    .api-meta .accent { color: var(--accent); }
+
+    .api-posts     { display: flex; flex-direction: column; gap: .5rem; }
+    .api-post      { padding: .85rem 1rem; border-radius: var(--radius);
+                     border-left: 3px solid var(--accent); background: var(--bg-hover);
+                     transition: border-color .15s; }
+    .api-post:hover { border-left-color: #7ee787; }
+    .api-post h4   { font-size: .92rem; margin: 0 0 .3rem; color: var(--text); }
+    .api-post p    { font-size: .84rem; color: var(--text-muted); margin: 0; line-height: 1.5; }
+
+    @media (max-width: 768px) {
+      .api-users     { grid-template-columns: 1fr 1fr; }
+      .api-detail    { flex-direction: column; }
+    }
+    @media (max-width: 480px) {
+      .api-users     { grid-template-columns: 1fr; }
+    }
+  `,
+
+  state: () => ({
+    users: [],
+    selectedUser: null,
+    posts: [],
+    loading: false,
+    error: '',
+  }),
+
+  mounted() {
+    this.fetchUsers();
+  },
+
+  async fetchUsers() {
+    this.state.loading = true;
+    this.state.error = '';
+    try {
+      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" style="margin-bottom:.75rem;">Click a user card to fetch their recent posts via <code>$.get()</code>.</p>
+          <div class="api-users" z-if="users.length > 0">
+            <button z-for="u in users" class="api-user" @click="selectUser({{u.id}})">
+              <strong>{{u.name}}</strong>
+              <small class="handle">@{{u.username}}</small>
+              <small>{{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="api-detail">
+            <div>
+              <h3 style="margin:0;">${selectedUser ? $.escapeHtml(selectedUser.name) : ''}</h3>
+              <div class="api-meta">
+                <span class="accent">@${selectedUser ? $.escapeHtml(selectedUser.username) : ''}</span>
+                <span>${selectedUser ? $.escapeHtml(selectedUser.email) : ''}</span>
+              </div>
+            </div>
+            <button class="btn btn-outline btn-sm" @click="clearSelection">← Back to users</button>
+          </div>
+        </div>
+
+        <div class="card">
+          <h3>Recent Posts</h3>
+          <div class="api-posts" z-if="posts.length > 0">
+            <article z-for="p in posts" class="api-post">
+              <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/default/app/components/contact-card.js

@@ -0,0 +1,231 @@
+// contact-card.js — Global contact detail popup
+//
+// Always-mounted overlay that listens for $.bus 'openContact' events.
+// Works from any page without navigation.
+//
+// Features used:
+//   $.bus.on / $.bus.emit   — event-driven communication
+//   $.getStore              — read contact data from store
+//   @click.self             — dismiss on backdrop click
+
+$.component('contact-card', {
+  styles: `
+    /* Overlay */
+    .cc-overlay {
+      position: fixed; inset: 0; z-index: 300;
+      background: rgba(0,0,0,0.55);
+      backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
+      display: flex; align-items: center; justify-content: center;
+      animation: cc-fade 0.15s ease;
+    }
+    @keyframes cc-fade { from { opacity: 0 } to { opacity: 1 } }
+
+    /* Card */
+    .cc-card {
+      position: relative; width: 400px;
+      max-width: calc(100vw - 2rem); max-height: calc(100vh - 4rem);
+      overflow-y: auto;
+      background: var(--bg-surface); border: 1px solid var(--border);
+      border-radius: var(--radius-lg);
+      box-shadow: 0 24px 64px rgba(0,0,0,0.35);
+      animation: cc-pop 0.2s var(--ease-out);
+    }
+    @keyframes cc-pop {
+      from { opacity: 0; transform: scale(0.95) translateY(10px); }
+      to   { opacity: 1; transform: scale(1) translateY(0); }
+    }
+
+    /* Strip */
+    .cc-strip { height: 4px; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+                transition: background 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease; }
+    .cc-strip-online  { background: var(--success); box-shadow: 0 0 12px rgba(63,185,80,0.3); }
+    .cc-strip-away    { background: var(--warning); }
+    .cc-strip-offline { background: var(--text-muted); opacity: 0.3; }
+
+    /* Close */
+    .cc-close {
+      position: absolute; top: 0.75rem; right: 0.75rem;
+      width: 28px; height: 28px; border-radius: 50%; border: none;
+      background: var(--bg-hover); color: var(--text-muted);
+      font-size: 0.85rem; cursor: pointer;
+      display: flex; align-items: center; justify-content: center;
+      transition: all 0.12s ease; z-index: 1;
+    }
+    .cc-close:hover { background: var(--danger); color: #fff; }
+
+    /* Profile */
+    .cc-profile {
+      display: flex; flex-direction: column; align-items: center;
+      padding: 1.75rem 1.5rem 1rem; position: relative;
+    }
+    .cc-avatar {
+      width: 72px; height: 72px; border-radius: 50%;
+      display: flex; align-items: center; justify-content: center;
+      font-weight: 700; font-size: 1.6rem; color: #fff;
+      text-transform: uppercase;
+      box-shadow: 0 4px 16px rgba(0,0,0,0.25);
+      margin-bottom: 0.75rem;
+    }
+    .cc-dot {
+      width: 14px; height: 14px; border-radius: 50%;
+      border: 3px solid var(--bg-surface);
+      position: absolute; top: calc(1.75rem + 56px); left: calc(50% + 22px);
+      transition: background 0.3s ease, box-shadow 0.3s ease;
+    }
+    .cc-dot-online  { background: var(--success); box-shadow: 0 0 8px rgba(63,185,80,0.5); }
+    .cc-dot-away    { background: var(--warning); }
+    .cc-dot-offline { background: var(--text-muted); }
+
+    .cc-profile h2 { font-size: 1.2rem; font-weight: 700; margin: 0 0 0.25rem; }
+    .cc-role {
+      font-size: 0.72rem; font-weight: 600; padding: 0.2rem 0.6rem;
+      border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em;
+    }
+    .cc-role-developer { background: rgba(96,165,250,0.12); color: #60a5fa; }
+    .cc-role-designer  { background: rgba(168,85,247,0.12); color: #a855f7; }
+    .cc-role-manager   { background: rgba(52,211,153,0.12); color: #34d399; }
+    .cc-role-qa        { background: rgba(251,191,36,0.12); color: #fbbf24; }
+
+    /* Details grid */
+    .cc-details {
+      display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem;
+      padding: 0 1.5rem; margin-top: 0.5rem;
+    }
+    .cc-field  { display: flex; flex-direction: column; gap: 0.15rem; }
+    .cc-label  { font-size: 0.68rem; font-weight: 600; text-transform: uppercase;
+                 letter-spacing: 0.04em; color: var(--text-muted); }
+    .cc-value  { font-size: 0.85rem; color: var(--text); word-break: break-word; }
+    .cc-status { text-transform: capitalize; transition: color 0.3s ease; }
+
+    /* Bio */
+    .cc-bio    { padding: 0.75rem 1.5rem 0; }
+    .cc-bio p  { font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; margin-top: 0.2rem; }
+
+    /* Actions */
+    .cc-actions { display: flex; gap: 0.4rem; padding: 1rem 1.5rem 1.25rem; flex-wrap: wrap; }
+
+    /* Shared button styles (self-contained) */
+    .cc-btn {
+      padding: 0.4rem 0.85rem; font-size: 0.78rem; font-weight: 600;
+      border-radius: var(--radius); border: 1px solid var(--border);
+      background: transparent; color: var(--text-muted); cursor: pointer;
+      font-family: inherit; transition: all 0.12s ease;
+    }
+    .cc-btn:hover { background: var(--bg-hover); color: var(--text); }
+    .cc-btn-accent { border-color: var(--accent); color: var(--accent); }
+    .cc-btn-accent:hover { background: var(--accent); color: #fff; }
+
+    /* "View in Contacts" link */
+    .cc-goto { font-size: 0.72rem; color: var(--text-muted); margin-left: auto;
+               text-decoration: none; transition: color 0.15s ease; cursor: pointer; }
+    .cc-goto:hover { color: var(--accent); }
+
+    @media (max-width: 480px) {
+      .cc-details { grid-template-columns: 1fr; }
+      .cc-actions { justify-content: center; }
+    }
+  `,
+
+  state: () => ({
+    contact: null,
+  }),
+
+  mounted() {
+    this._onOpen = (id) => {
+      const store = $.getStore('main');
+      if (!store) return;
+      const c = store.state.contacts.find(c => c.id === Number(id));
+      if (c) this.state.contact = { ...c };
+    };
+    $.bus.on('openContact', this._onOpen);
+
+    this._onEsc = (e) => {
+      if (e.key === 'Escape' && this.state.contact) {
+        this.state.contact = null;
+        e.stopPropagation();
+      }
+    };
+    document.addEventListener('keydown', this._onEsc);
+
+    // Keep card in sync when store changes (e.g. status cycle, favorite toggle)
+    const store = $.getStore('main');
+    if (store) {
+      this._unsub = store.subscribe(() => {
+        if (!this.state.contact) return;
+        const c = store.state.contacts.find(c => c.id === this.state.contact.id);
+        if (c) this.state.contact = { ...c };
+        else this.state.contact = null; // deleted
+      });
+    }
+  },
+
+  destroyed() {
+    if (this._onOpen) $.bus.off('openContact', this._onOpen);
+    if (this._onEsc) document.removeEventListener('keydown', this._onEsc);
+    if (this._unsub) this._unsub();
+  },
+
+  close() { this.state.contact = null; },
+
+  toggleFav() {
+    if (!this.state.contact) return;
+    $.getStore('main').dispatch('toggleFavorite', this.state.contact.id);
+  },
+
+  cycleStatus() {
+    if (!this.state.contact) return;
+    $.getStore('main').dispatch('cycleContactStatus', this.state.contact.id);
+  },
+
+  goToContacts() {
+    this.state.contact = null;
+    $.getRouter().navigate('/contacts');
+  },
+
+  render() {
+    const c = this.state.contact;
+    if (!c) return '';
+
+    const hue = (c.name.charCodeAt(0) * 7) % 360;
+
+    return `
+      <div class="cc-overlay" @click.self="close">
+        <div class="cc-card">
+          <div class="cc-strip cc-strip-${c.status}"></div>
+          <button class="cc-close" @click="close">✕</button>
+
+          <div class="cc-profile">
+            <div class="cc-avatar" style="background:hsl(${hue},55%,42%)">
+              ${c.name.charAt(0).toUpperCase()}
+            </div>
+            <div class="cc-dot cc-dot-${c.status}"></div>
+            <h2>${$.escapeHtml(c.name)}</h2>
+            <span class="cc-role cc-role-${c.role.toLowerCase()}">${$.escapeHtml(c.role)}</span>
+          </div>
+
+          <div class="cc-details">
+            <div class="cc-field">
+              <span class="cc-label">Email</span>
+              <span class="cc-value">${$.escapeHtml(c.email)}</span>
+            </div>
+            ${c.phone ? `<div class="cc-field"><span class="cc-label">Phone</span><span class="cc-value">${$.escapeHtml(c.phone)}</span></div>` : ''}
+            ${c.location ? `<div class="cc-field"><span class="cc-label">Location</span><span class="cc-value">${$.escapeHtml(c.location)}</span></div>` : ''}
+            ${c.joined ? `<div class="cc-field"><span class="cc-label">Joined</span><span class="cc-value">${$.escapeHtml(c.joined)}</span></div>` : ''}
+            <div class="cc-field">
+              <span class="cc-label">Status</span>
+              <span class="cc-value cc-status">${c.status}</span>
+            </div>
+          </div>
+
+          ${c.bio ? `<div class="cc-bio"><span class="cc-label">Bio</span><p>${$.escapeHtml(c.bio)}</p></div>` : ''}
+
+          <div class="cc-actions">
+            <button class="cc-btn" @click="toggleFav">${c.favorite ? '★ Favorited' : '☆ Favorite'}</button>
+            <button class="cc-btn" @click="cycleStatus">Cycle Status</button>
+            <a class="cc-goto" @click="goToContacts">View in Contacts →</a>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+});