@invisibleloop/pulse 0.20.10 → 0.20.19

package/docs/src/pages/templates.js

@@ -1,534 +0,0 @@
-/**
- * Pulse Docs — Templates
- *
- * Showcase of ready-made Pulse templates.
- */
-
-import { renderLayout, h1, lead, section } from '../lib/layout.js'
-import { prevNext }                        from '../lib/nav.js'
-import { badge }                           from '../../../src/ui/index.js'
-
-function esc(s) {
-  return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;')
-}
-
-function statPill(label, value) {
-  return `<span style="display:inline-flex;align-items:center;gap:0.3rem;padding:0.2rem 0.6rem;border-radius:999px;font-size:0.72rem;font-weight:500;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.14);color:rgba(255,255,255,0.7)">
-    <span style="color:#a78bfa">●</span> ${esc(label)}: <strong style="color:#fff;font-weight:600">${esc(String(value))}</strong>
-  </span>`
-}
-
-function templateCard({ name, route, description, tags = [], stats = {}, preview = '' }) {
-  const tagHtml = tags.map(t =>
-    `<span style="display:inline-block;padding:0.2rem 0.6rem;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.16);border-radius:4px;font-size:0.72rem;font-weight:500;color:rgba(255,255,255,0.7)">${esc(t)}</span>`
-  ).join('')
-
-  const statHtml = Object.entries(stats).map(([k, v]) => statPill(k, v)).join('')
-
-  // This card is a deliberately dark, self-contained surface (macOS-style
-  // preview window + dark body) regardless of the page's own theme — it
-  // mirrors the code-window pattern elsewhere. Uses a real dark background
-  // (not a translucent white tint over the page background), so it reads
-  // correctly on both the light and dark docs themes and keeps the
-  // white-tinted text/borders it was designed with at proper contrast.
-  return `
-    <div style="border:1px solid rgba(255,255,255,0.1);border-radius:0.875rem;overflow:hidden;display:flex;flex-direction:column;background:#171512">
-
-      <a href="${esc(route)}" aria-label="Open ${esc(name)} template" style="display:block;background:#0d0d12;border-bottom:1px solid rgba(255,255,255,0.08);text-decoration:none;overflow:hidden">
-        <div style="padding:0.5rem 0.75rem;background:#16161e;display:flex;align-items:center;gap:0.375rem;border-bottom:1px solid rgba(255,255,255,0.06)">
-          <span style="width:8px;height:8px;border-radius:50%;background:#ff5f57;display:inline-block"></span>
-          <span style="width:8px;height:8px;border-radius:50%;background:#febc2e;display:inline-block"></span>
-          <span style="width:8px;height:8px;border-radius:50%;background:#28c840;display:inline-block"></span>
-          <span style="flex:1;height:14px;background:rgba(255,255,255,0.06);border-radius:3px;margin-left:0.5rem"></span>
-        </div>
-        <div style="padding:1rem 1.25rem 1.25rem;min-height:180px">
-          ${preview}
-        </div>
-      </a>
-
-      <div style="padding:1.25rem 1.25rem 1rem;flex:1;display:flex;flex-direction:column;gap:0.875rem;color:#fff">
-        <div>
-          <div style="display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;margin-bottom:0.5rem">
-            <h2 style="margin:0;font-size:1rem;font-weight:700;line-height:1.3;color:#fff">${esc(name)}</h2>
-            ${tagHtml}
-          </div>
-          <p style="margin:0;font-size:0.85rem;line-height:1.6;color:rgba(255,255,255,0.7)">${esc(description)}</p>
-        </div>
-        <div style="display:flex;flex-wrap:wrap;gap:0.3rem;padding-top:0.625rem;border-top:1px solid rgba(255,255,255,0.08)">${statHtml}</div>
-      </div>
-
-      <div style="padding:0.875rem 1.25rem;border-top:1px solid rgba(255,255,255,0.08)">
-        <a href="${esc(route)}" style="display:inline-flex;align-items:center;gap:0.375rem;padding:0.5rem 1.1rem;background:#7c3aed;border-radius:0.4rem;font-size:0.85rem;font-weight:600;text-decoration:none !important;color:#fff !important">
-          View template
-          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
-        </a>
-      </div>
-    </div>`
-}
-
-// Mini CSS page-layout previews ────────────────────────────────────────────────
-
-const bar  = (w, h, bg = 'rgba(255,255,255,0.12)', r = 3) =>
-  `<div style="width:${w};height:${h}px;background:${bg};border-radius:${r}px;flex-shrink:0"></div>`
-
-const mobileAppPreview = `
-  <div style="display:flex;flex-direction:column;gap:6px;font-size:0">
-
-    <!-- nav -->
-    <div style="display:flex;align-items:center;gap:6px">
-      ${bar('28px', 6, 'var(--color-accent)')}
-      ${bar('40px', 4)}  ${bar('30px', 4)}  ${bar('30px', 4)}
-      <div style="flex:1"></div>
-      ${bar('48px', 18, 'var(--color-accent)', 4)}
-    </div>
-
-    <!-- hero -->
-    <div style="display:flex;gap:10px;margin-top:4px;align-items:center">
-      <div style="flex:1;display:flex;flex-direction:column;gap:5px">
-        ${bar('50px', 3, 'var(--color-accent)')}
-        ${bar('100%', 10, 'rgba(255,255,255,0.18)', 2)}
-        ${bar('85%',  10, 'rgba(255,255,255,0.18)', 2)}
-        ${bar('70%',   6, 'rgba(255,255,255,0.08)', 2)}
-        <div style="display:flex;gap:5px;margin-top:4px">
-          ${bar('52px', 16, 'rgba(255,255,255,0.15)', 4)}
-          ${bar('52px', 16, 'rgba(255,255,255,0.15)', 4)}
-        </div>
-      </div>
-      <div style="width:52px;height:90px;background:rgba(255,255,255,0.08);border-radius:8px;border:1px solid rgba(255,255,255,0.12);flex-shrink:0;display:flex;flex-direction:column;gap:4px;padding:6px">
-        ${bar('100%', 20, 'var(--color-accent)', 4)}
-        ${bar('100%', 12, 'rgba(255,255,255,0.1)', 3)}
-        ${bar('100%', 12, 'rgba(255,255,255,0.1)', 3)}
-      </div>
-    </div>
-
-    <!-- stats row -->
-    <div style="display:flex;gap:5px;margin-top:2px">
-      ${[1,2,3,4].map(() => `<div style="flex:1;height:22px;background:rgba(255,255,255,0.06);border-radius:3px"></div>`).join('')}
-    </div>
-
-    <!-- features grid -->
-    <div style="display:flex;gap:5px">
-      ${[1,2,3].map(() => `<div style="flex:1;height:36px;background:rgba(255,255,255,0.05);border-radius:3px;padding:5px;display:flex;flex-direction:column;gap:3px">${bar('40%',4,'var(--color-accent)')}${bar('80%',3)}${bar('90%',3)}</div>`).join('')}
-    </div>
-
-    <!-- pricing row -->
-    <div style="display:flex;gap:5px">
-      ${[1,2,3].map((i) => `<div style="flex:1;height:42px;background:${i===2?'rgba(139,92,246,0.2)':'rgba(255,255,255,0.05)'};border-radius:3px;border:${i===2?'1px solid rgba(139,92,246,0.5)':'1px solid transparent'};padding:5px;display:flex;flex-direction:column;gap:3px">${bar('60%',4,i===2?'var(--color-accent)':'rgba(255,255,255,0.15)')}${bar('40%',6,i===2?'rgba(255,255,255,0.6)':'rgba(255,255,255,0.2)')}${bar('80%',3)}</div>`).join('')}
-    </div>
-  </div>`
-
-const blogPostPreview = `
-  <div style="display:flex;flex-direction:column;gap:6px;font-size:0;background:#0a2239;border-radius:4px;padding:8px">
-
-    <!-- nav -->
-    <div style="display:flex;align-items:center;gap:6px">
-      ${bar('20px', 6, '#53a2be')}
-      ${bar('36px', 4, '#53a2be', 2)}
-      <div style="flex:1"></div>
-      ${bar('28px', 4)}  ${bar('28px', 4)}  ${bar('28px', 4)}
-    </div>
-
-    <!-- hero -->
-    <div style="display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 0 6px;background:linear-gradient(160deg,#0a2239 0%,#132e32 100%);border-radius:3px;margin-top:2px">
-      ${bar('40px', 3, '#53a2be')}
-      ${bar('90%', 8, 'rgba(255,255,255,0.7)', 2)}
-      ${bar('75%', 8, 'rgba(255,255,255,0.7)', 2)}
-      ${bar('65%', 4, 'rgba(83,162,190,0.6)', 2)}
-      ${bar('50%', 3, 'rgba(83,162,190,0.4)', 2)}
-    </div>
-
-    <!-- article + aside -->
-    <div style="display:flex;gap:6px;margin-top:2px">
-      <div style="flex:1;display:flex;flex-direction:column;gap:4px">
-        ${bar('100%', 48, 'rgba(83,162,190,0.15)', 3)}
-        ${bar('100%', 4, 'rgba(255,255,255,0.5)', 1)}
-        ${bar('90%',  4, 'rgba(255,255,255,0.5)', 1)}
-        ${bar('95%',  4, 'rgba(255,255,255,0.5)', 1)}
-        ${bar('60%',  4, 'rgba(255,255,255,0.5)', 1)}
-        ${bar('55%',  6, 'rgba(255,255,255,0.7)', 1)}
-        ${bar('100%', 3, 'rgba(255,255,255,0.4)', 1)}
-        ${bar('85%',  3, 'rgba(255,255,255,0.4)', 1)}
-      </div>
-      <div style="width:38px;display:flex;flex-direction:column;gap:3px">
-        ${bar('100%', 4, 'rgba(255,255,255,0.5)', 1)}
-        ${bar('100%', 3, 'rgba(83,162,190,0.6)', 1)}
-        ${bar('100%', 3, 'rgba(83,162,190,0.6)', 1)}
-        ${bar('100%', 3, 'rgba(83,162,190,0.6)', 1)}
-        <div style="margin-top:3px;background:#132e32;border-radius:3px;padding:3px;display:flex;flex-direction:column;gap:2px">
-          ${bar('60%', 3, '#53a2be')}
-          ${bar('100%', 5, 'rgba(255,255,255,0.6)', 1)}
-          ${bar('100%', 5, 'rgba(255,255,255,0.6)', 1)}
-          ${bar('100%', 10, 'rgba(83,162,190,0.5)', 2)}
-        </div>
-      </div>
-    </div>
-  </div>`
-
-const TEMPLATES = [
-  {
-    name:        'Mobile App Landing Page',
-    route:       '/templates/mobile-app',
-    description: 'A complete marketing site for a mobile app — nav, hero with phone mockup, feature grid, social proof stats, testimonials, pricing cards, FAQ accordion, download CTA, and footer.',
-    tags:        ['Landing Page', 'Marketing', 'SaaS'],
-    preview:     mobileAppPreview,
-    stats: {
-      'Accessibility': '100',
-      'Best Practices': '100',
-      'SEO':           '100',
-      'CLS':           '0.00',
-      'JS':            '~4.2 kB',
-    },
-  },
-  {
-    name:        'Blog Post',
-    route:       '/templates/blog-post',
-    description: 'A full editorial article page — sticky nav, article hero, prose with image, two-column layout with table-of-contents sidebar, newsletter signup, and footer. Dark astronomy theme.',
-    tags:        ['Blog', 'Editorial'],
-    preview:     blogPostPreview,
-    stats: {
-      'Accessibility': '100',
-      'Best Practices': '100',
-      'SEO':           '100',
-      'CLS':           '0.00',
-      'JS':            '~4.2 kB',
-    },
-  },
-  {
-    name:        'Sparkys — Local Trades',
-    route:       '/templates/sparkys',
-    description: 'A sharp, trustworthy landing page for a local electrical contractor. Navy + amber palette with a split hero, stats panel, services grid, why-us section, testimonial, and contact strip.',
-    tags:        ['Local Business', 'Trades', 'Light Theme'],
-    preview:     `<div style="background:#f7f9fc;padding:1.5rem;border-radius:8px;font-family:system-ui,sans-serif">
-      <div style="height:8px;background:#062247;border-radius:3px;width:100%;margin-bottom:0.75rem"></div>
-      <div style="display:grid;grid-template-columns:1.2fr 1fr;gap:0.75rem;min-height:80px">
-        <div style="display:flex;flex-direction:column;gap:5px;justify-content:center">
-          <div style="height:5px;background:#0a3160;border-radius:3px;width:50%"></div>
-          <div style="height:10px;background:rgba(15,23,42,0.8);border-radius:3px;width:90%"></div>
-          <div style="height:10px;background:rgba(15,23,42,0.8);border-radius:3px;width:75%"></div>
-          <div style="height:6px;background:rgba(15,23,42,0.3);border-radius:3px;width:80%;margin-bottom:4px"></div>
-          <div style="display:flex;gap:5px">
-            <div style="height:18px;background:#0a3160;border-radius:4px;width:60px"></div>
-            <div style="height:18px;background:rgba(10,49,96,0.15);border:1px solid rgba(10,49,96,0.3);border-radius:4px;width:50px"></div>
-          </div>
-        </div>
-        <div style="background:linear-gradient(160deg,#0a3160,#062247);border-radius:6px;padding:0.6rem;display:grid;grid-template-columns:1fr 1fr;gap:5px">
-          ${[1,2,3,4].map(() => `<div style="display:flex;flex-direction:column;gap:2px">
-            <div style="height:9px;background:rgba(255,255,255,0.7);border-radius:2px;width:70%"></div>
-            <div style="height:5px;background:rgba(244,167,33,0.5);border-radius:2px;width:90%"></div>
-          </div>`).join('')}
-        </div>
-      </div>
-      <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:0.75rem">
-        ${[1,2,3].map(() => `<div style="background:#fff;border:1px solid #d6deea;border-radius:5px;padding:0.4rem;display:flex;flex-direction:column;gap:3px">
-          <div style="width:18px;height:18px;background:#e3ecf7;border-radius:3px"></div>
-          <div style="height:5px;background:rgba(15,23,42,0.6);border-radius:2px;width:80%"></div>
-          <div style="height:4px;background:rgba(15,23,42,0.25);border-radius:2px;width:100%"></div>
-          <div style="height:4px;background:rgba(15,23,42,0.2);border-radius:2px;width:70%"></div>
-        </div>`).join('')}
-      </div>
-    </div>`,
-    stats: {
-      'Accessibility': '100',
-      'Best Practices': '100',
-      'SEO':           '100',
-      'CLS':           '0.00',
-      'Theme':         'light',
-    },
-  },
-  {
-    name:        'Local Business',
-    route:       '/templates/local-business',
-    description: 'A warm, photo-forward landing page for a local service business — dog groomer, bakery, physio, tradesperson. Services grid, about section, testimonials, hours, and booking contact form.',
-    tags:        ['Local Business', 'Services', 'Light Theme'],
-    preview:     `<div style="background:linear-gradient(135deg,#fdf6ee,#fdebd0);padding:1.5rem;border-radius:8px;font-family:system-ui,sans-serif">
-      <div style="height:10px;background:#e8956d;border-radius:6px;width:60%;margin-bottom:0.75rem"></div>
-      <div style="height:22px;background:rgba(61,43,30,0.85);border-radius:4px;width:85%;margin-bottom:0.5rem"></div>
-      <div style="height:10px;background:rgba(61,43,30,0.35);border-radius:4px;width:75%;margin-bottom:1rem"></div>
-      <div style="display:flex;gap:0.5rem;margin-bottom:1.25rem">
-        <div style="height:30px;background:#c4632a;border-radius:14px;width:100px;flex-shrink:0"></div>
-        <div style="height:30px;background:rgba(61,43,30,0.15);border:1px solid rgba(61,43,30,0.2);border-radius:14px;width:90px;flex-shrink:0"></div>
-      </div>
-      <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.5rem">
-        ${[1,2,3].map(() => `<div style="background:#fff;border-radius:10px;padding:0.5rem">
-          <div style="height:8px;background:#e8956d;border-radius:4px;width:70%;margin-bottom:0.35rem"></div>
-          <div style="height:6px;background:rgba(0,0,0,0.12);border-radius:3px;width:90%"></div>
-          <div style="height:6px;background:rgba(0,0,0,0.08);border-radius:3px;width:70%;margin-top:0.25rem"></div>
-        </div>`).join('')}
-      </div>
-    </div>`,
-    stats: {
-      'Vibe':  'warm',
-      'Theme': 'light',
-      'CLS':   '0.00',
-    },
-  },
-  {
-    name:        'Portfolio',
-    route:       '/templates/portfolio',
-    description: 'A minimal dark portfolio for a creative professional — designer, developer, photographer, or architect. Work grid, about section with skill badges, and a clean contact panel.',
-    tags:        ['Portfolio', 'Personal', 'Minimal'],
-    preview:     `<div style="background:#0d0d10;padding:1.5rem;border-radius:8px;font-family:system-ui,sans-serif">
-      <div style="height:12px;background:rgba(255,255,255,0.7);border-radius:3px;width:55%;margin-bottom:0.75rem;font-size:0;"></div>
-      <div style="height:20px;background:rgba(255,255,255,0.85);border-radius:3px;width:80%;margin-bottom:0.5rem"></div>
-      <div style="height:8px;background:rgba(255,255,255,0.25);border-radius:3px;width:65%;margin-bottom:1.25rem"></div>
-      <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.5rem">
-        ${[1,2,3].map(i => `<div style="background:rgba(255,255,255,0.05);border-radius:6px;overflow:hidden">
-          <div style="height:48px;background:rgba(255,255,255,0.08);"></div>
-          <div style="padding:0.4rem">
-            <div style="height:7px;background:rgba(255,255,255,0.4);border-radius:3px;width:80%;margin-bottom:0.3rem"></div>
-            <div style="height:6px;background:rgba(255,255,255,0.2);border-radius:3px;width:60%"></div>
-          </div>
-        </div>`).join('')}
-      </div>
-    </div>`,
-    stats: {
-      'Vibe':  'minimal',
-      'Theme': 'dark',
-      'CLS':   '0.00',
-    },
-  },
-  {
-    name:        'Event / Conference',
-    route:       '/templates/event',
-    description: 'A high-energy landing page for a conference, festival, or summit — speaker grid, day-by-day schedule accordion, venue section, sponsor logo marquee, and ticket CTA.',
-    tags:        ['Event', 'Conference', 'Bold'],
-    preview:     `<div style="background:linear-gradient(180deg,#05050a,#0d0829);padding:1.5rem;border-radius:8px;font-family:system-ui,sans-serif">
-      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem">
-        <div style="height:10px;background:rgba(255,255,255,0.8);border-radius:3px;width:60px"></div>
-        <div style="height:24px;background:#6366f1;border-radius:6px;width:80px"></div>
-      </div>
-      <div style="height:8px;background:rgba(99,102,241,0.6);border-radius:4px;width:50%;margin-bottom:0.5rem"></div>
-      <div style="height:20px;background:rgba(255,255,255,0.9);border-radius:4px;width:85%;margin-bottom:0.75rem"></div>
-      <div style="height:8px;background:rgba(255,255,255,0.3);border-radius:4px;width:70%;margin-bottom:1.25rem"></div>
-      <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:0.4rem">
-        ${[1,2,3,4].map(() => `<div style="background:rgba(255,255,255,0.06);border-radius:6px;padding:0.4rem;text-align:center">
-          <div style="height:14px;background:rgba(99,102,241,0.8);border-radius:3px;width:70%;margin:0 auto 0.25rem"></div>
-          <div style="height:6px;background:rgba(255,255,255,0.2);border-radius:3px;width:80%;margin:0 auto"></div>
-        </div>`).join('')}
-      </div>
-    </div>`,
-    stats: {
-      'Vibe':  'bold',
-      'Theme': 'dark',
-      'CLS':   '0.00',
-    },
-  },
-  {
-    name:        'Editorial / Magazine',
-    route:       '/templates/editorial',
-    description: 'A publication homepage — featured article hero, pullquote, article grid with category badges, newsletter signup, and footer. Serif typography throughout via the editorial vibe.',
-    tags:        ['Editorial', 'Publication', 'Blog'],
-    preview:     `<div style="background:#0a0a0c;padding:1.5rem;border-radius:8px;font-family:Georgia,serif">
-      <div style="height:8px;background:rgba(180,100,60,0.7);border-radius:2px;width:40%;margin-bottom:0.75rem"></div>
-      <div style="height:20px;background:rgba(255,255,255,0.9);border-radius:2px;width:90%;margin-bottom:0.35rem"></div>
-      <div style="height:20px;background:rgba(255,255,255,0.75);border-radius:2px;width:70%;margin-bottom:0.75rem"></div>
-      <div style="height:8px;background:rgba(255,255,255,0.3);border-radius:2px;width:80%;margin-bottom:1.25rem"></div>
-      <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.5rem">
-        ${[1,2,3].map(() => `<div style="background:rgba(255,255,255,0.04);border-radius:2px;overflow:hidden">
-          <div style="height:44px;background:rgba(255,255,255,0.08);"></div>
-          <div style="padding:0.4rem">
-            <div style="height:6px;background:rgba(180,100,60,0.6);border-radius:2px;width:40%;margin-bottom:0.3rem"></div>
-            <div style="height:8px;background:rgba(255,255,255,0.5);border-radius:2px;width:90%;margin-bottom:0.25rem"></div>
-            <div style="height:8px;background:rgba(255,255,255,0.3);border-radius:2px;width:70%"></div>
-          </div>
-        </div>`).join('')}
-      </div>
-    </div>`,
-    stats: {
-      'Vibe':  'editorial',
-      'Theme': 'dark',
-      'CLS':   '0.00',
-    },
-  },
-  {
-    name:        'Swish — Fashion Ecommerce',
-    route:       '/templates/swish',
-    description: 'An editorial light-theme fashion brand — full-bleed hero with gradient overlay, lookbook grid, product strip, journal cards, and newsletter. Composites nav, section, grid, pullquote, and input.',
-    tags:        ['Ecommerce', 'Fashion', 'Editorial', 'Light Theme'],
-    preview:     `<div style="background:#faf9f7;padding:1.5rem;border-radius:8px;font-family:system-ui,sans-serif">
-      <div style="height:80px;background:linear-gradient(160deg,#2a2118,#5c4a3a);border-radius:6px;margin-bottom:0.75rem;display:flex;align-items:flex-end;padding:0.5rem">
-        <div>
-          <div style="height:6px;background:rgba(255,255,255,0.5);border-radius:2px;width:60px;margin-bottom:4px"></div>
-          <div style="height:12px;background:#fff;border-radius:2px;width:120px;margin-bottom:6px"></div>
-          <div style="height:20px;background:rgba(255,255,255,0.9);border-radius:14px;width:80px"></div>
-        </div>
-      </div>
-      <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.4rem">
-        ${[1,2,3].map(() => `<div style="background:#ede9e3;border-radius:4px;overflow:hidden">
-          <div style="height:44px;background:rgba(90,70,50,0.15);"></div>
-          <div style="padding:0.3rem">
-            <div style="height:6px;background:rgba(0,0,0,0.4);border-radius:2px;width:80%;margin-bottom:3px"></div>
-            <div style="height:5px;background:rgba(0,0,0,0.2);border-radius:2px;width:50%"></div>
-          </div>
-        </div>`).join('')}
-      </div>
-    </div>`,
-    stats: {
-      'Vibe':  'editorial',
-      'Theme': 'light',
-      'CLS':   '0.00',
-    },
-  },
-  {
-    name:        'BookWorms — Independent Bookshop',
-    route:       '/templates/bookworms',
-    description: 'A warm editorial site for an independent bookshop — staff picks grid, press pullquote, two-column features, event list, and a centred CTA. Fraunces serif headings, light cream palette.',
-    tags:        ['Local Business', 'Retail', 'Editorial', 'Light Theme'],
-    preview:     `<div style="background:#fdf8f2;padding:1.5rem;border-radius:8px;font-family:Georgia,serif">
-      <div style="height:8px;background:#8b4513;border-radius:2px;width:30%;margin-bottom:0.75rem"></div>
-      <div style="height:18px;background:rgba(60,30,10,0.85);border-radius:2px;width:85%;margin-bottom:0.5rem"></div>
-      <div style="height:8px;background:rgba(60,30,10,0.3);border-radius:2px;width:70%;margin-bottom:1rem"></div>
-      <div style="display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:0.4rem">
-        ${[1,2,3,4].map(() => `<div style="background:#f0e8da;border-radius:3px;overflow:hidden">
-          <div style="height:50px;background:rgba(139,69,19,0.2);"></div>
-          <div style="padding:0.3rem">
-            <div style="height:5px;background:rgba(60,30,10,0.5);border-radius:2px;width:90%;margin-bottom:3px"></div>
-            <div style="height:4px;background:rgba(60,30,10,0.2);border-radius:2px;width:70%"></div>
-          </div>
-        </div>`).join('')}
-      </div>
-    </div>`,
-    stats: {
-      'Vibe':  'paper',
-      'Theme': 'light',
-      'CLS':   '0.00',
-    },
-  },
-  {
-    name:        'Retro Wheels Co. — Classic Cars',
-    route:       '/templates/retrowheels',
-    description: 'A vintage 1970s enamel-sign aesthetic for a classic car dealer. Stat strip, testimonials, async booking enquiry form with form state, and Rockwell system fonts. Zero extra HTTP requests.',
-    tags:        ['Retro', 'Automotive', 'Form', 'Light Theme'],
-    preview:     `<div style="background:#f5f0e8;padding:1.5rem;border-radius:8px;font-family:'Courier New',monospace">
-      <div style="height:70px;background:linear-gradient(160deg,#1a1a2e,#2d2d4e);border-radius:4px;margin-bottom:0.75rem;display:flex;align-items:center;justify-content:center">
-        <div style="height:14px;background:rgba(205,160,60,0.9);border-radius:2px;width:100px"></div>
-      </div>
-      <div style="background:#1a1a2e;border-radius:4px;padding:0.5rem;display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.4rem;margin-bottom:0.75rem">
-        ${[1,2,3].map(() => `<div style="text-align:center">
-          <div style="height:10px;background:rgba(205,160,60,0.8);border-radius:2px;width:60%;margin:0 auto 3px"></div>
-          <div style="height:6px;background:rgba(255,255,255,0.3);border-radius:2px;width:80%;margin:0 auto"></div>
-        </div>`).join('')}
-      </div>
-      <div style="display:grid;grid-template-columns:1fr 1fr;gap:0.4rem">
-        ${[1,2].map(() => `<div style="background:#fff;border:2px solid #1a1a2e;border-radius:3px;padding:0.4rem">
-          <div style="height:7px;background:rgba(26,26,46,0.7);border-radius:2px;width:90%;margin-bottom:4px"></div>
-          <div style="height:5px;background:rgba(26,26,46,0.3);border-radius:2px;width:70%"></div>
-        </div>`).join('')}
-      </div>
-    </div>`,
-    stats: {
-      'Vibe':  'retro',
-      'Theme': 'light',
-      'CLS':   '0.00',
-    },
-  },
-  {
-    name:        'Susuki Bento — Artist Portfolio',
-    route:       '/templates/suzukibento',
-    description: 'A dark brutalist gallery for a fine-art painter. Zero border-radius, asymmetric 12-column works grid, exhibition table, and press list. Pure HTML — no Pulse UI components. Mode B creative override.',
-    tags:        ['Portfolio', 'Art', 'Brutalist', 'Dark Theme'],
-    preview:     `<div style="background:#0e0e0e;padding:1.5rem;border-radius:0;font-family:system-ui,sans-serif;border:1px solid #222">
-      <div style="height:10px;background:#f2efe8;width:80%;margin-bottom:0.75rem"></div>
-      <div style="height:6px;background:#cc3300;width:40%;margin-bottom:1rem"></div>
-      <div style="display:grid;grid-template-columns:1.5fr 1fr 1fr;grid-template-rows:60px 40px;gap:3px">
-        <div style="background:rgba(242,239,232,0.1);grid-row:1/3"></div>
-        <div style="background:rgba(242,239,232,0.08)"></div>
-        <div style="background:rgba(204,51,0,0.15)"></div>
-        <div style="background:rgba(242,239,232,0.06);grid-column:2/4"></div>
-      </div>
-      <div style="margin-top:0.75rem;display:flex;gap:0.4rem">
-        ${[1,2,3].map(() => `<div style="height:4px;background:rgba(242,239,232,0.2);border-radius:0;flex:1"></div>`).join('')}
-      </div>
-    </div>`,
-    stats: {
-      'Vibe':  'brutalist',
-      'Theme': 'dark',
-      'CLS':   '0.00',
-      'Mode':  'B — raw HTML',
-    },
-  },
-  {
-    name:        'Andy Pixel — Dev Blog',
-    route:       '/templates/andypixel',
-    description: 'An editorial blog article page — prose-width reading column, badge, avatar, custom code block, blockquote, author bio, and async newsletter subscribe. Orange accent on light cream.',
-    tags:        ['Blog', 'Editorial', 'Article', 'Light Theme'],
-    preview:     `<div style="background:#fdfaf6;padding:1.5rem;border-radius:8px;font-family:Georgia,serif">
-      <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem">
-        <div style="width:24px;height:24px;background:#e65c00;border-radius:50%;flex-shrink:0"></div>
-        <div style="height:6px;background:rgba(0,0,0,0.3);border-radius:3px;width:80px"></div>
-        <div style="height:14px;background:#e65c00;border-radius:10px;width:40px;margin-left:auto"></div>
-      </div>
-      <div style="height:18px;background:rgba(0,0,0,0.8);border-radius:2px;width:90%;margin-bottom:0.5rem"></div>
-      <div style="height:18px;background:rgba(0,0,0,0.6);border-radius:2px;width:70%;margin-bottom:0.75rem"></div>
-      <div style="background:#1a1a1a;border-radius:6px;padding:0.5rem;margin-bottom:0.75rem">
-        <div style="height:5px;background:rgba(230,92,0,0.5);border-radius:2px;width:50%;margin-bottom:5px"></div>
-        ${[1,2,3].map(() => `<div style="height:4px;background:rgba(255,255,255,0.3);border-radius:2px;width:${70+Math.random()*20|0}%;margin-bottom:3px"></div>`).join('')}
-      </div>
-      <div style="height:6px;background:rgba(0,0,0,0.2);border-radius:2px;width:85%"></div>
-    </div>`,
-    stats: {
-      'Vibe':  'editorial',
-      'Theme': 'light',
-      'CLS':   '0.00',
-    },
-  },
-  {
-    name:        'Journey — App Landing Page',
-    route:       '/templates/journey',
-    description: 'A dark split-screen app landing page — sticky hero left, scrollable timeline right, frosted glass nav, gold accent, App Store badge. Pure HTML throughout. Mode B creative override.',
-    tags:        ['Landing Page', 'App', 'Dark Theme', 'Split-screen'],
-    preview:     `<div style="background:#0a0a0f;padding:0;border-radius:8px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;min-height:130px">
-      <div style="padding:1rem;display:flex;flex-direction:column;justify-content:center;gap:0.4rem;border-right:1px solid rgba(201,169,110,0.2)">
-        <div style="height:5px;background:rgba(201,169,110,0.5);border-radius:2px;width:50%;margin-bottom:2px"></div>
-        <div style="height:14px;background:rgba(240,237,232,0.9);border-radius:2px;width:90%"></div>
-        <div style="height:14px;background:rgba(240,237,232,0.6);border-radius:2px;width:70%"></div>
-        <div style="height:8px;background:rgba(240,237,232,0.25);border-radius:2px;width:80%;margin-top:2px"></div>
-        <div style="height:20px;background:rgba(201,169,110,0.8);border-radius:4px;width:80px;margin-top:4px"></div>
-      </div>
-      <div style="padding:0.75rem;display:flex;flex-direction:column;gap:0.4rem">
-        ${[1,2,3].map(() => `<div style="background:rgba(255,255,255,0.04);border-radius:4px;padding:0.35rem;border-left:2px solid rgba(201,169,110,0.4)">
-          <div style="height:5px;background:rgba(201,169,110,0.5);border-radius:2px;width:40%;margin-bottom:3px"></div>
-          <div style="height:4px;background:rgba(240,237,232,0.2);border-radius:2px;width:85%"></div>
-        </div>`).join('')}
-      </div>
-    </div>`,
-    stats: {
-      'Vibe':  'bold',
-      'Theme': 'dark',
-      'CLS':   '0.00',
-      'Mode':  'B — raw HTML',
-    },
-  },
-]
-
-const content = `
-  ${h1('Templates')}
-  ${lead('Production-ready Pulse templates — from local business to editorial to app landing pages. Every template ships with 100/100/100 Lighthouse scores and zero CLS.')}
-
-  <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem;margin-top:2rem">
-    ${TEMPLATES.map(templateCard).join('')}
-  </div>
-
-  ${section('design-directions', 'Design directions')}
-  <p>Templates give you the structure. The <a href="/meta#vibe">meta.vibe</a> system gives you the personality. Combine a template with a vibe to get a page that feels right for the product — not just correct.</p>
-  <p style="margin-top:0.75rem">When building a new site, ask: <em>what kind of business is this?</em> A dog groomer and a SaaS dashboard have the same sections but completely different aesthetics. Use the design directions guide (<code>pulse://guide/design-references</code>) to make that decision consciously.</p>
-
-  ${section('adding', 'Suggesting a template')}
-  <p>Have an idea for a template? <a href="https://github.com/invisibleloop/pulse-framework/issues" target="_blank" rel="noopener noreferrer">Open an issue on GitHub</a> with the layout you have in mind and we'll consider adding it to the library.</p>
-`
-
-export default {
-  route: '/templates',
-
-  meta: {
-    title:       'Templates — Pulse',
-    description: 'Production-ready Pulse templates. Every template uses only Pulse UI components and ships with 100/100/100 Lighthouse scores.',
-    theme:       'light',
-    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
-  },
-
-  view: () => {
-    const { prev, next } = prevNext('/templates')
-    return renderLayout({ currentHref: '/templates', content, prev, next })
-  },
-}