domma-cms 1.6.60 → 1.7.1

package/docs/superpowers/specs/plans/2026-04-05-card-builder.md

@@ -0,0 +1,1970 @@
+# Card Builder Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:
+> executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Add an interactive card builder dialog to the page editor and expand the `[card]` shortcode to support 33
+layouts, 6 style variants, and 14 gradient presets.
+
+**Architecture:** A self-contained `card-builder.js` admin lib builds a custom DOM overlay (appended to `document.body`,
+no E.modal), wired into the existing `toolbar.onCard()` hook in `page-editor.js`. Server-side, `processCardBlocks` in
+`markdown.js` is refactored to route via a `LAYOUT_RENDERERS` map - existing shortcodes fall through to the unchanged
+legacy renderer. CSS variant and layout classes are added to `site.css`; collapsible click wiring is added to `site.js`.
+
+**Tech Stack:** Domma SPA (ESM, no bundler), Fastify 5 SSR, vanilla DOM APIs, CSS custom properties. No test framework -
+curl integration tests against the running server on port 4096.
+
+**Spec:** `docs/superpowers/specs/2026-04-05-card-builder-design.md`
+
+---
+
+## File Map
+
+| File                            | Action     | Responsibility                                                            |
+|---------------------------------|------------|---------------------------------------------------------------------------|
+| `public/css/site.css`           | Modify     | 6 variant classes, 14 gradient classes, layout structural CSS             |
+| `public/js/site.js`             | Modify     | Collapsible card click delegation                                         |
+| `server/services/markdown.js`   | Modify     | `processCardBlocks` routing + 33 layout renderers                         |
+| `admin/js/lib/card-builder.js`  | **Create** | Builder dialog - state, fields, preview, icon picker, shortcode generator |
+| `admin/js/views/page-editor.js` | Modify     | Wire `toolbar.onCard()` + `onMediaBrowse` callback                        |
+
+No new routes. No schema changes. No new npm packages.
+
+---
+
+## Task 1: CSS - 6 variant classes + utilities
+
+**Files:**
+
+- Modify: `public/css/site.css`
+
+- [ ] **Step 1: Add the 6 variant base + hover rules after the existing `.page-body .card` block**
+
+```css
+/* ── Card style variants ── */
+.dm-card-clean {
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
+  transition: transform .2s ease, box-shadow .2s ease;
+}
+.dm-card-clean:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 24px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
+}
+
+.dm-card-gradient {
+  background: #fff;
+  border: none;
+  box-shadow: 0 4px 20px rgba(99,102,241,.14);
+  transition: transform .2s ease, box-shadow .2s ease;
+}
+.dm-card-gradient:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 16px 40px rgba(99,102,241,.25);
+}
+.dm-card-gradient .card-header {
+  background: linear-gradient(135deg, var(--dm-card-g-start, #6366f1), var(--dm-card-g-end, #8b5cf6));
+  color: #fff;
+  border-bottom: none;
+}
+
+.dm-card-glass {
+  background: rgba(255,255,255,.18);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  border: 1px solid rgba(255,255,255,.38);
+  box-shadow: 0 4px 24px rgba(0,0,0,.08);
+  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
+}
+.dm-card-glass:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 36px rgba(0,0,0,.14);
+  background: rgba(255,255,255,.26);
+}
+.dm-card-glass .card-header { border-bottom: 1px solid rgba(255,255,255,.25); }
+
+.dm-card-accent {
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-left: 4px solid #6366f1;
+  box-shadow: 0 1px 4px rgba(0,0,0,.05);
+  transition: transform .2s ease, box-shadow .2s ease, border-left-color .2s ease;
+}
+.dm-card-accent:hover {
+  transform: translateY(-3px);
+  border-left-color: #4f46e5;
+  box-shadow: 0 8px 24px rgba(99,102,241,.12);
+}
+.dm-card-accent .card-header { color: #4338ca; border-bottom: none; }
+
+.dm-card-dark {
+  background: linear-gradient(160deg, #1e293b 0%, #0f172a 100%);
+  border: 1px solid rgba(255,255,255,.06);
+  box-shadow: 0 4px 20px rgba(0,0,0,.30);
+  transition: transform .2s ease, box-shadow .2s ease;
+}
+.dm-card-dark:hover {
+  transform: translateY(-4px) scale(1.012);
+  box-shadow: 0 16px 40px rgba(0,0,0,.45);
+}
+.dm-card-dark .card-header { color: #f1f5f9; border-bottom: 1px solid rgba(255,255,255,.08); }
+.dm-card-dark .card-body   { color: #94a3b8; }
+.dm-card-dark .card-footer { color: #475569; border-top: 1px solid rgba(255,255,255,.06); }
+
+.dm-card-glow {
+  background: #fff;
+  border: 1px solid #a5b4fc;
+  box-shadow: 0 0 0 0 rgba(99,102,241,0);
+  transition: transform .2s ease, box-shadow .3s ease, border-color .2s ease;
+}
+.dm-card-glow:hover {
+  transform: translateY(-3px);
+  border-color: #818cf8;
+  box-shadow: 0 0 0 4px rgba(99,102,241,.14), 0 0 28px rgba(99,102,241,.22);
+}
+.dm-card-glow .card-header { color: #4338ca; border-bottom: 1px solid #e0e7ff; }
+.dm-card-glow .card-footer { border-top: 1px solid #e0e7ff; color: #818cf8; }
+
+/* opt-in lift for layouts without a variant */
+.card-hover { transition: transform .2s ease, box-shadow .2s ease; }
+.card-hover:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.10); }
+```
+
+- [ ] **Step 2: Create test page `content/pages/card-variants-test.md`**
+
+```markdown
+---
+title: Card Variant Test
+layout: default
+---
+[card variant="clean" title="Clean" hover]Body.[/card]
+[card variant="gradient" title="Gradient"]Body.[/card]
+[card variant="accent" title="Accent"]Body.[/card]
+[card variant="dark" title="Dark"]Body.[/card]
+[card variant="glow" title="Glow"]Body.[/card]
+```
+
+- [ ] **Step 3: Verify**
+
+```bash
+curl -s http://localhost:4096/card-variants-test | grep -c 'dm-card-'
+```
+
+Expected: `5`
+
+- [ ] **Step 4: Delete test page, commit**
+
+```bash
+rm content/pages/card-variants-test.md
+git add public/css/site.css
+git commit -m "feat(css): add 6 card variant classes with hover effects"
+```
+
+---
+
+## Task 2: CSS - 14 gradient preset classes
+
+**Files:**
+
+- Modify: `public/css/site.css`
+
+- [ ] **Step 1: Add gradient classes after the variant block**
+
+```css
+/* ── Gradient presets ── */
+/* Apply as class on .card-header, .card-badge-band, .card-step-bg, .card-split-left */
+.card-gradient-indigo   { background: linear-gradient(135deg,#6366f1,#8b5cf6); }
+.card-gradient-ocean    { background: linear-gradient(135deg,#0891b2,#2563eb); }
+.card-gradient-sunset   { background: linear-gradient(135deg,#f59e0b,#ef4444,#ec4899); }
+.card-gradient-forest   { background: linear-gradient(135deg,#10b981,#0d9488); }
+.card-gradient-rose     { background: linear-gradient(135deg,#fb7185,#e11d48); }
+.card-gradient-midnight { background: linear-gradient(135deg,#1e1b4b,#4338ca); }
+.card-gradient-aurora   { background: linear-gradient(135deg,#06b6d4,#6366f1,#a855f7); }
+.card-gradient-fire     { background: linear-gradient(135deg,#ef4444,#f97316,#fbbf24); }
+.card-gradient-lagoon   { background: linear-gradient(135deg,#06b6d4,#0e7490); }
+.card-gradient-dusk     { background: linear-gradient(135deg,#7c3aed,#db2777); }
+.card-gradient-lime     { background: linear-gradient(135deg,#84cc16,#10b981); }
+.card-gradient-gold     { background: linear-gradient(135deg,#f59e0b,#b45309); }
+.card-gradient-arctic   { background: linear-gradient(135deg,#bae6fd,#e0f2fe); color: #1e293b; }
+.card-gradient-slate    { background: linear-gradient(135deg,#475569,#1e293b); }
+/* All gradient elements get white text except arctic */
+[class*="card-gradient-"]:not(.card-gradient-arctic) { color: #fff; }
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add public/css/site.css
+git commit -m "feat(css): add 14 gradient preset classes"
+```
+
+---
+
+## Task 3: CSS - Layout structural CSS
+
+**Files:**
+
+- Modify: `public/css/site.css`
+
+- [ ] **Step 1: Add all layout structural rules**
+
+```css
+/* ── Card layout structural CSS ── */
+
+/* Image containers */
+.card-img-top {
+  width:100%; height:180px; background-size:cover; background-position:center;
+  background-color:#e2e8f0; display:flex; align-items:center;
+  justify-content:center; font-size:2.5rem; color:rgba(0,0,0,.15);
+}
+.card-img-left, .card-img-right {
+  width:90px; flex-shrink:0; background-size:cover; background-position:center;
+  background-color:#e2e8f0; display:flex; align-items:center;
+  justify-content:center; font-size:1.75rem; color:rgba(0,0,0,.2);
+}
+.card-img-wide {
+  width:130px; flex-shrink:0; background-size:cover; background-position:center;
+  background-color:#e2e8f0; display:flex; align-items:center;
+  justify-content:center; font-size:2rem; color:rgba(0,0,0,.2);
+}
+
+/* Horizontal shells */
+.card-layout-horizontal,
+.card-layout-thumb-left,
+.card-layout-thumb-right { display:flex; }
+.card-layout-thumb-left .card-body,
+.card-layout-thumb-right .card-body,
+.card-layout-horizontal .card-body { flex:1; min-width:0; }
+
+/* Split */
+.card-layout-split { display:flex; min-height:140px; }
+.card-split-left  { width:50%; display:flex; align-items:center; justify-content:center; font-size:2.25rem; flex-shrink:0; background:linear-gradient(160deg,#6366f1,#8b5cf6); }
+.card-split-right { flex:1; background:#1e293b; display:flex; flex-direction:column; justify-content:center; }
+.card-split-right .card-body  { color:#94a3b8; }
+.card-split-right .card-title { color:#f1f5f9; }
+
+/* Image overlay */
+.card-img-overlay { position:relative; height:180px; overflow:hidden; background-size:cover; background-position:center; background-color:#1e293b; display:flex; align-items:flex-end; }
+.card-overlay-text { width:100%; padding:40px 16px 14px; background:linear-gradient(to top,rgba(0,0,0,.75),transparent); }
+.card-overlay-text .card-title { color:#fff; }
+
+/* Dark variant on image containers */
+.dm-card-dark .card-img-top,
+.dm-card-dark .card-img-left,
+.dm-card-dark .card-img-right,
+.dm-card-dark .card-img-wide { filter:brightness(.7); }
+
+/* Stat */
+.card-stat-value { font-size:2.4rem; font-weight:800; color:#111827; line-height:1.1; }
+.card-stat-delta { font-size:.8rem; font-weight:600; margin-top:2px; }
+.card-stat-delta.positive { color:#10b981; }
+.card-stat-delta.negative { color:#ef4444; }
+.card-stat-bar  { height:5px; background:#f1f5f9; border-radius:3px; margin-top:14px; overflow:hidden; }
+.card-stat-fill { height:100%; border-radius:3px; background:linear-gradient(90deg,#6366f1,#8b5cf6); }
+
+/* Progress */
+.card-progress-bar  { height:8px; background:#f1f5f9; border-radius:4px; overflow:hidden; margin:8px 0; }
+.card-progress-fill { height:100%; border-radius:4px; background:linear-gradient(90deg,#6366f1,#8b5cf6); }
+.card-milestone { display:flex; align-items:center; gap:8px; font-size:.8rem; color:#4b5563; padding:3px 0; }
+.card-milestone-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
+.card-milestone-dot.done    { background:#10b981; }
+.card-milestone-dot.pending { background:#e5e7eb; }
+
+/* Icon stacked header */
+.card-header-icon-stacked { text-align:center; padding:20px 16px 12px; }
+.card-header-icon-stacked [data-icon],
+.card-header-icon-stacked .card-icon { font-size:2rem; display:block; margin-bottom:8px; }
+
+/* Step numbered */
+.card-step-bg { position:relative; overflow:hidden; min-height:60px; display:flex; align-items:center; padding:14px 16px; }
+.card-step-ghost { position:absolute; right:8px; top:-10px; font-size:5rem; font-weight:900; color:rgba(99,102,241,.12); line-height:1; pointer-events:none; }
+.card-step-badge { width:32px; height:32px; border-radius:50%; background:#6366f1; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; z-index:1; flex-shrink:0; }
+
+/* Corner badge */
+.card-corner-badge-wrap { position:relative; }
+.card-corner-badge { position:absolute; top:10px; right:10px; background:#ef4444; color:#fff; font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:2px 8px; border-radius:20px; }
+
+/* Callout */
+.card-callout         { border-left:4px solid #6366f1; }
+.card-callout.warn    { border-left-color:#f59e0b; }
+.card-callout.success { border-left-color:#10b981; }
+.card-callout.error   { border-left-color:#ef4444; }
+.card-callout-inner   { display:flex; gap:12px; align-items:flex-start; }
+.card-callout-icon    { font-size:1.2rem; flex-shrink:0; margin-top:1px; }
+
+/* Quote / testimonial */
+.card-quote-mark { font-size:3.5rem; color:#ede9fe; line-height:.8; padding:14px 16px 0; font-family:Georgia,serif; display:block; }
+.card-quote-text { padding:4px 16px 14px; font-style:italic; color:#374151; line-height:1.7; }
+.card-quote-attr { display:flex; align-items:center; gap:10px; }
+.card-quote-avatar { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#6366f1,#8b5cf6); display:flex; align-items:center; justify-content:center; font-size:.85rem; color:#fff; flex-shrink:0; }
+
+/* Video */
+.card-video-thumb { position:relative; height:160px; background:#1e293b; display:flex; align-items:center; justify-content:center; background-size:cover; background-position:center; }
+.card-play-btn { width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center; font-size:1.2rem; box-shadow:0 4px 16px rgba(0,0,0,.3); }
+.card-video-duration { position:absolute; bottom:8px; right:10px; background:rgba(0,0,0,.7); color:#fff; font-size:.65rem; font-weight:600; padding:2px 7px; border-radius:4px; }
+
+/* Map */
+.card-map-placeholder { height:130px; background:linear-gradient(160deg,#bfdbfe,#dbeafe); position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; }
+.card-map-grid { position:absolute; inset:0; background-image:repeating-linear-gradient(0deg,rgba(59,130,246,.08) 0,rgba(59,130,246,.08) 1px,transparent 1px,transparent 32px),repeating-linear-gradient(90deg,rgba(59,130,246,.08) 0,rgba(59,130,246,.08) 1px,transparent 1px,transparent 32px); }
+.card-map-pin { font-size:2rem; z-index:1; }
+
+/* Avatar */
+.card-avatar { width:64px; height:64px; border-radius:50%; background:linear-gradient(135deg,#6366f1,#8b5cf6); display:flex; align-items:center; justify-content:center; font-size:1.8rem; color:#fff; margin:0 auto 12px; }
+.card-avatar-wrap { text-align:center; padding:24px 16px 16px; }
+.card-tag-pills { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:10px; }
+.card-pill { background:#ede9fe; color:#7c3aed; font-size:.7rem; font-weight:700; padding:3px 9px; border-radius:20px; }
+
+/* Tag cloud */
+.card-tag-cloud { padding:14px 16px; display:flex; flex-wrap:wrap; gap:7px; }
+.card-tag { padding:4px 11px; border-radius:20px; font-size:.78rem; font-weight:600; }
+
+/* File document */
+.card-file-row { display:flex; gap:14px; align-items:center; padding:16px; }
+.card-file-icon { width:48px; height:58px; border-radius:7px; background:linear-gradient(160deg,#6366f1,#8b5cf6); display:flex; align-items:center; justify-content:center; font-size:1.4rem; color:#fff; flex-shrink:0; position:relative; }
+.card-file-ext { position:absolute; bottom:4px; left:0; right:0; text-align:center; font-size:.55rem; font-weight:800; color:rgba(255,255,255,.9); letter-spacing:.05em; }
+.card-file-dl { font-size:.78rem; font-weight:700; color:#6366f1; display:inline-block; margin-top:4px; }
+
+/* Rating */
+.card-stars { color:#f59e0b; letter-spacing:2px; padding:14px 16px 0; display:block; }
+.card-verified { display:inline-block; background:#d1fae5; color:#065f46; font-size:.6rem; font-weight:700; padding:1px 5px; border-radius:3px; margin-left:6px; }
+
+/* Activity feed */
+.card-activity-item { display:flex; gap:10px; align-items:flex-start; padding:8px 14px; border-bottom:1px solid #f8fafc; }
+.card-activity-item:last-child { border-bottom:none; }
+.card-activity-avatar { width:30px; height:30px; border-radius:50%; flex-shrink:0; background:linear-gradient(135deg,#6366f1,#8b5cf6); display:flex; align-items:center; justify-content:center; font-size:.8rem; color:#fff; }
+
+/* Before/After */
+.card-compare-grid { display:grid; grid-template-columns:1fr 1fr; }
+.card-compare-col { padding:12px 14px; }
+.card-compare-col + .card-compare-col { border-left:1px solid #f1f5f9; }
+.card-compare-label { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; margin-bottom:8px; display:block; }
+.card-compare-label.before { color:#ef4444; }
+.card-compare-label.after  { color:#10b981; }
+.card-compare-item { display:flex; gap:7px; align-items:flex-start; font-size:.78rem; color:#4b5563; padding:3px 0; line-height:1.4; }
+.card-compare-x     { color:#ef4444; flex-shrink:0; }
+.card-compare-check { color:#10b981; flex-shrink:0; }
+
+/* Pricing */
+.card-pricing-features { padding:14px 16px; }
+.card-pricing-feature { display:flex; align-items:center; gap:8px; font-size:.82rem; color:#374151; padding:4px 0; }
+.card-pricing-check { color:#10b981; }
+.card-pricing-cta { display:block; text-align:center; background:#6366f1; color:#fff; font-size:.82rem; font-weight:700; padding:9px; border-radius:8px; text-decoration:none; margin:0 16px 14px; }
+
+/* Timeline */
+.card-timeline-row { display:flex; }
+.card-timeline-side { width:44px; flex-shrink:0; display:flex; flex-direction:column; align-items:center; padding-top:14px; }
+.card-timeline-dot { width:12px; height:12px; border-radius:50%; background:#6366f1; flex-shrink:0; }
+.card-timeline-line { width:2px; background:#e5e7eb; flex:1; margin-top:4px; }
+.card-timeline-body { flex:1; padding:12px 14px 12px 0; }
+.card-timeline-date { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#9ca3af; }
+.card-timeline-tag { display:inline-block; background:#d1fae5; color:#065f46; font-size:.65rem; font-weight:700; padding:2px 6px; border-radius:4px; margin-top:6px; }
+
+/* Code snippet */
+.card-code-header { background:#1e293b; display:flex; justify-content:space-between; align-items:center; padding:8px 14px; }
+.card-code-lang { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#6366f1; }
+.card-code-body { background:#0f172a; padding:14px; font-family:'Courier New',monospace; font-size:.78rem; line-height:1.8; color:#94a3b8; overflow-x:auto; }
+
+/* Glass gradient border */
+.card-glass-outer { background:linear-gradient(135deg,#6366f1,#8b5cf6,#ec4899); border-radius:12px; padding:2px; }
+.card-glass-inner { background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-radius:10px; padding:16px; }
+
+/* Badge band */
+.card-badge-band { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; }
+.card-badge-band-label { background:rgba(255,255,255,.2); color:#fff; font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; padding:3px 8px; border-radius:4px; }
+.card-badge-band-icon { font-size:1.4rem; }
+
+/* Full bg */
+.dm-card-full-bg { background:linear-gradient(160deg,#1e293b,#0f172a); }
+.dm-card-full-bg .card-body  { color:#94a3b8; }
+.dm-card-full-bg .card-title { color:#f1f5f9; font-size:1rem; }
+.dm-card-full-bg .card-footer { border-top-color:rgba(255,255,255,.08); color:#475569; }
+
+/* Feature comparison */
+.card-fc-row { display:flex; justify-content:space-between; align-items:center; padding:8px 16px; border-bottom:1px solid #f8fafc; font-size:.82rem; color:#374151; }
+.card-fc-row:last-child { border-bottom:none; }
+.card-fc-yes { color:#10b981; }
+.card-fc-no  { color:#d1d5db; }
+
+/* Responsive: side-image layouts stack at 480px */
+@media (max-width: 480px) {
+  .card-layout-thumb-left,
+  .card-layout-thumb-right,
+  .card-layout-horizontal { flex-direction:column; }
+  .card-img-left, .card-img-right, .card-img-wide { width:100%; height:120px; }
+  .card-layout-split { flex-direction:column; }
+  .card-split-left { width:100%; height:100px; }
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add public/css/site.css
+git commit -m "feat(css): add card layout structural CSS for all 33 layouts"
+```
+
+---
+
+## Task 4: site.js - Collapsible card click handler
+
+**Files:**
+
+- Modify: `public/js/site.js`
+
+- [ ] **Step 1: Check if handler already exists**
+
+```bash
+grep -n 'collapsible\|is-collapsed' public/js/site.js
+```
+
+Skip this task if a working handler is already present.
+
+- [ ] **Step 2: Add click delegation near end of site init**
+
+```js
+// Collapsible card toggle
+document.addEventListener('click', function (e) {
+  const header = e.target.closest('.card-collapsible .card-header');
+  if (!header) return;
+  header.closest('.card-collapsible').classList.toggle('is-collapsed');
+});
+```
+
+- [ ] **Step 3: Verify** - Create a test page with `[card title="Click me" collapsible="true"]Body.[/card]`, open in
+  browser, click header, body toggles. Delete test page.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add public/js/site.js
+git commit -m "feat(site): add collapsible card click delegation"
+```
+
+---
+
+## Task 5: markdown.js - Refactor processCardBlocks (routing infrastructure)
+
+**Files:**
+
+- Modify: `server/services/markdown.js`
+
+- [ ] **Step 1: Locate `processCardBlocks` (around line 837)**
+
+- [ ] **Step 2: Rename the existing callback body to `renderLegacyCard`**
+
+Extract the existing `(_, attrStr, body) => { ... }` callback body into:
+
+```js
+function renderLegacyCard(attrs, body, markedInstance, escAttr) {
+  // paste existing match callback body here verbatim
+  // replace `marked` with `markedInstance`, `escapeAttr` with `escAttr`
+}
+```
+
+- [ ] **Step 3: Add routing infrastructure**
+
+```js
+const LAYOUT_RENDERERS = {};   // populated by Tasks 6-9
+
+function processCardBlocks(markdown) {
+  const {scrubbed, restore} = scrubCodeRegions(markdown);
+  return restore(scrubbed.replace(
+    /\[card([^\]]*)\]([\s\S]*?)\[\/card\]/gi,
+    (_, attrStr, body) => {
+      const attrs  = parseShortcodeAttrs(attrStr);
+      const layout = typeof attrs.layout === 'string' ? attrs.layout.trim() : '';
+      const renderer = LAYOUT_RENDERERS[layout];
+      return renderer
+        ? renderer(attrs, body, marked, escapeAttr)
+        : renderLegacyCard(attrs, body, marked, escapeAttr);
+    }
+  ));
+}
+```
+
+- [ ] **Step 4: Add shared helpers**
+
+```js
+function cardVariantClasses(attrs) {
+  const variant  = typeof attrs.variant === 'string' ? attrs.variant.trim() : '';
+  const gradient = typeof attrs.gradient === 'string' ? attrs.gradient.trim() : 'indigo';
+  const classes  = ['card', 'mb-4'];
+  const valid    = ['clean','gradient','glass','accent','dark','glow'];
+  if (valid.includes(variant)) {
+    classes.push(`dm-card-${variant}`);
+    if (variant === 'gradient') classes.push(`card-gradient-${gradient}`);
+  }
+  if ('hover' in attrs)             classes.push('card-hover');
+  if (attrs.collapsible === 'true') classes.push('card-collapsible');
+  if (typeof attrs.class === 'string') classes.push(attrs.class.trim());
+  return classes;
+}
+
+function cardRoot(attrs, extraClasses = []) {
+  const classes = [...cardVariantClasses(attrs), ...extraClasses];
+  const id   = attrs.id ? ` id="${escapeAttr(attrs.id)}"` : '';
+  const coll = attrs.collapsible === 'true' ? ' data-collapsible="true"' : '';
+  return `<div class="${classes.join(' ')}"${id}${coll}>`;
+}
+
+function cardFooterAttr(attrs) {
+  return attrs.footer ? `<div class="card-footer">${escapeAttr(attrs.footer)}</div>` : '';
+}
+
+function imgStyle(attrs) {
+  const img = typeof attrs.image === 'string' ? attrs.image.trim() : '';
+  return img ? ` style="background-image:url('${escapeAttr(img)}')"` : '';
+}
+
+function parseSubTagList(body, tagName) {
+  const re    = new RegExp(`\\[${tagName}([^\\]]*)\\]([\\s\\S]*?)\\[\\/${tagName}\\]`, 'gi');
+  const items = [];
+  body.replace(re, (_, attrStr, inner) => {
+    items.push({ attrs: parseShortcodeAttrs(attrStr), content: inner.trim() });
+  });
+  return items;
+}
+
+function parseSubTag(body, tagName) {
+  const re = new RegExp(`\\[${tagName}([^\\]]*)\\]([\\s\\S]*?)\\[\\/${tagName}\\]`, 'i');
+  const m  = body.match(re);
+  return m ? m[2].trim() : null;
+}
+
+function tagColorStyle(i) {
+  const p = [
+    'background:#ede9fe;color:#7c3aed',
+    'background:#dbeafe;color:#1d4ed8',
+    'background:#d1fae5;color:#065f46',
+    'background:#fef3c7;color:#92400e',
+    'background:#fce7f3;color:#9d174d',
+  ];
+  return p[i % p.length];
+}
+```
+
+- [ ] **Step 5: Verify server starts and existing cards still render**
+
+```bash
+curl -s http://localhost:4096/ | grep -c 'card' || echo "0 - no cards on homepage, that is fine"
+```
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add server/services/markdown.js
+git commit -m "refactor(markdown): extract card renderer routing infrastructure"
+```
+
+---
+
+## Task 6: markdown.js - Tier 1 basic + icon layouts
+
+**Files:**
+
+- Modify: `server/services/markdown.js`
+
+- [ ] **Step 1: Add basic, header-body, header-body-footer, no-header-footer**
+
+```js
+LAYOUT_RENDERERS['basic'] = (attrs, body) => {
+  const bodyHtml = marked.parse(body.trim());
+  return `${cardRoot(attrs)}<div class="card-body">${bodyHtml}</div>${cardFooterAttr(attrs)}</div>\n`;
+};
+
+LAYOUT_RENDERERS['header-body'] = (attrs, body) => {
+  const title   = typeof attrs.title === 'string' ? attrs.title.trim() : '';
+  const hdr     = title ? `<div class="card-header"><div class="card-title">${escapeAttr(title)}</div></div>` : '';
+  const bodyHtml = marked.parse(processGridBlocks(body.trim()));
+  return `${cardRoot(attrs)}${hdr}<div class="card-body">${bodyHtml}</div>${cardFooterAttr(attrs)}</div>\n`;
+};
+
+LAYOUT_RENDERERS['header-body-footer'] = (attrs, body) => {
+  const title   = typeof attrs.title === 'string' ? attrs.title.trim() : '';
+  const footer  = typeof attrs.footer === 'string' ? attrs.footer.trim() : '';
+  const hdr     = title ? `<div class="card-header"><div class="card-title">${escapeAttr(title)}</div></div>` : '';
+  const bodyHtml = marked.parse(processGridBlocks(body.trim()));
+  const ftr     = footer ? `<div class="card-footer">${escapeAttr(footer)}</div>` : '';
+  return `${cardRoot(attrs)}${hdr}<div class="card-body">${bodyHtml}</div>${ftr}</div>\n`;
+};
+
+LAYOUT_RENDERERS['no-header-footer'] = (attrs, body) => {
+  const footer  = typeof attrs.footer === 'string' ? attrs.footer.trim() : '';
+  const bodyHtml = marked.parse(processGridBlocks(body.trim()));
+  const ftr     = footer ? `<div class="card-footer">${escapeAttr(footer)}</div>` : '';
+  return `${cardRoot(attrs)}<div class="card-body">${bodyHtml}</div>${ftr}</div>\n`;
+};
+```
+
+- [ ] **Step 2: Add icon-top and icon-inline**
+
+```js
+LAYOUT_RENDERERS['icon-top'] = (attrs, body) => {
+  const title    = typeof attrs.title === 'string' ? attrs.title.trim() : '';
+  const subtitle = typeof attrs.subtitle === 'string' ? attrs.subtitle.trim() : '';
+  const icon     = typeof attrs.icon === 'string' ? attrs.icon.trim() : '';
+  const iconHtml = icon ? `<span data-icon="${escapeAttr(icon)}" class="card-icon"></span>` : '';
+  const subHtml  = subtitle ? `<div class="card-subtitle">${escapeAttr(subtitle)}</div>` : '';
+  const bodyHtml = marked.parse(processGridBlocks(body.trim()));
+  return `${cardRoot(attrs)}
+    <div class="card-header card-header-icon-stacked">
+      <div class="card-avatar-wrap">${iconHtml}<div class="card-title">${escapeAttr(title)}</div>${subHtml}</div>
+    </div>
+    <div class="card-body">${bodyHtml}</div>${cardFooterAttr(attrs)}</div>\n`;
+};
+
+LAYOUT_RENDERERS['icon-inline'] = (attrs, body) => {
+  const title    = typeof attrs.title === 'string' ? attrs.title.trim() : '';
+  const subtitle = typeof attrs.subtitle === 'string' ? attrs.subtitle.trim() : '';
+  const icon     = typeof attrs.icon === 'string' ? attrs.icon.trim() : '';
+  const iconHtml = icon ? `<span data-icon="${escapeAttr(icon)}"></span>` : '';
+  const subHtml  = subtitle ? `<div class="card-subtitle">${escapeAttr(subtitle)}</div>` : '';
+  const bodyHtml = marked.parse(processGridBlocks(body.trim()));
+  return `${cardRoot(attrs)}
+    <div class="card-header card-header-icon-inline">
+      ${iconHtml}<div class="card-header-content"><div class="card-title">${escapeAttr(title)}</div>${subHtml}</div>
+    </div>
+    <div class="card-body">${bodyHtml}</div>${cardFooterAttr(attrs)}</div>\n`;
+};
+```
+
+- [ ] **Step 3: Test**
+
+```bash
+# Create content/pages/card-icon-test.md:
+# [card layout="icon-top" title="Feature" icon="star" subtitle="Sub"]Body.[/card]
+# [card layout="icon-inline" title="Feature" icon="check"]Body.[/card]
+curl -s http://localhost:4096/card-icon-test | grep -c 'card-header-icon'
+# Expected: 2
+# Delete test page
+```
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add server/services/markdown.js
+git commit -m "feat(markdown): add Tier 1 basic + icon card layout renderers"
+```
+
+---
+
+## Task 7: markdown.js - Tier 1 image layouts
+
+**Files:**
+
+- Modify: `server/services/markdown.js`
+
+- [ ] **Step 1: Add all 7 image layouts**
+
+```js
+LAYOUT_RENDERERS['image-top'] = (attrs, body) => {
+  const title   = typeof attrs.title === 'string' ? attrs.title.trim() : '';
+  const hdr     = title ? `<div class="card-header"><div class="card-title">${escapeAttr(title)}</div></div>` : '';
+  const bodyHtml = marked.parse(processGridBlocks(body.trim()));
+  return `${cardRoot(attrs)}<div class="card-img-top"${imgStyle(attrs)}></div>${hdr}<div class="card-body">${bodyHtml}</div>${cardFooterAttr(attrs)}</div>\n`;
+};
+
+LAYOUT_RENDERERS['image-overlay'] = (attrs, body) => {
+  const title   = typeof attrs.title === 'string' ? attrs.title.trim() : '';
+  const bodyHtml = marked.parse(processGridBlocks(body.trim()));
+  return `${cardRoot(attrs)}
+    <div class="card-img-overlay"${imgStyle(attrs)}>
+      <div class="card-overlay-text"><div class="card-title">${escapeAttr(title)}</div></div>
+    </div>
+    <div class="card-body">${bodyHtml}</div>${cardFooterAttr(attrs)}</div>\n`;
+};
+
+LAYOUT_RENDERERS['thumb-left'] = (attrs, body) => {
+  const title   = typeof attrs.title === 'string' ? attrs.title.trim() : '';
+  const bodyHtml = marked.parse(processGridBlocks(body.trim()));
+  return `${cardRoot(attrs, ['card-layout-thumb-left'])}<div class="card-img-left"${imgStyle(attrs)}></div>
+    <div class="card-body">${title ? `<div class="card-title">${escapeAttr(title)}</div>` : ''}${bodyHtml}</div>${cardFooterAttr(attrs)}</div>\n`;
+};
+
+LAYOUT_RENDERERS['thumb-right'] = (attrs, body) => {
+  const title   = typeof attrs.title === 'string' ? attrs.title.trim() : '';
+  const bodyHtml = marked.parse(processGridBlocks(body.trim()));
+  return `${cardRoot(attrs, ['card-layout-thumb-right'])}
+    <div class="card-body">${title ? `<div class="card-title">${escapeAttr(title)}</div>` : ''}${bodyHtml}</div>
+    <div class="card-img-right"${imgStyle(attrs)}></div></div>\n`;
+};
+
+LAYOUT_RENDERERS['wide-left-image'] = (attrs, body) => {
+  const title   = typeof attrs.title === 'string' ? attrs.title.trim() : '';
+  const bodyHtml = marked.parse(processGridBlocks(body.trim()));
+  return `${cardRoot(attrs, ['card-layout-horizontal'])}<div class="card-img-wide"${imgStyle(attrs)}></div>
+    <div class="card-body">${title ? `<div class="card-title">${escapeAttr(title)}</div>` : ''}${bodyHtml}${cardFooterAttr(attrs)}</div></div>\n`;
+};
+
+LAYOUT_RENDERERS['full-bg'] = (attrs, body) => {
+  const title   = typeof attrs.title === 'string' ? attrs.title.trim() : '';
+  const bodyHtml = marked.parse(processGridBlocks(body.trim()));
+  return `${cardRoot(attrs, ['dm-card-full-bg'])}<div class="card-img-top"${imgStyle(attrs)}></div>
+    <div class="card-body">${title ? `<div class="card-title">${escapeAttr(title)}</div>` : ''}${bodyHtml}</div>${cardFooterAttr(attrs)}</div>\n`;
+};
+
+LAYOUT_RENDERERS['split-half'] = (attrs, body) => {
+  const title    = typeof attrs.title === 'string' ? attrs.title.trim() : '';
+  const gradient = typeof attrs.gradient === 'string' ? attrs.gradient.trim() : 'indigo';
+  const bodyHtml = marked.parse(processGridBlocks(body.trim()));
+  return `${cardRoot(attrs, ['card-layout-split'])}<div class="card-split-left card-gradient-${escapeAttr(gradient)}"${imgStyle(attrs)}></div>
+    <div class="card-split-right"><div class="card-body">${title ? `<div class="card-title">${escapeAttr(title)}</div>` : ''}${bodyHtml}</div></div></div>\n`;
+};
+```
+
+- [ ] **Step 2: Test**
+
+```bash
+# Create content/pages/card-img-test.md with image-top, thumb-left, split-half shortcodes
+curl -s http://localhost:4096/card-img-test | grep -c 'card-img'
+# Expected: 3+
+# Delete test page
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add server/services/markdown.js
+git commit -m "feat(markdown): add Tier 1 image card layout renderers"
+```
+
+---
+
+## Task 8: markdown.js - Tier 1 people, data, and special layouts
+
+**Files:**
+
+- Modify: `server/services/markdown.js`
+
+- [ ] **Step 1: Add avatar-profile, stat-metric, quote-testimonial, callout**
+
+```js
+LAYOUT_RENDERERS['avatar-profile'] = (attrs, body) => {
+  const title    = escapeAttr(attrs.title || '');
+  const subtitle = escapeAttr(attrs.subtitle || '');
+  const icon     = escapeAttr(attrs.icon || '');
+  const tags     = typeof attrs.tags === 'string' ? attrs.tags.split(',').map(t => t.trim()).filter(Boolean) : [];
+  const tagHtml  = tags.length ? `<div class="card-tag-pills">${tags.map(t => `<span class="card-pill">${escapeAttr(t)}</span>`).join('')}</div>` : '';
+  const iconHtml = icon ? `<span data-icon="${icon}"></span>` : '';
+  const bodyHtml = body.trim() ? `<div class="card-body">${marked.parse(body.trim())}</div>` : '';
+  return `${cardRoot(attrs)}<div class="card-avatar-wrap">
+    <div class="card-avatar">${iconHtml}</div>
+    ${title ? `<div class="card-title">${title}</div>` : ''}
+    ${subtitle ? `<div class="card-subtitle">${subtitle}</div>` : ''}${tagHtml}
+  </div>${bodyHtml}${cardFooterAttr(attrs)}</div>\n`;
+};
+
+LAYOUT_RENDERERS['stat-metric'] = (attrs, _body) => {
+  const title    = escapeAttr(attrs.title || '');
+  const value    = escapeAttr(attrs.value || '-');
+  const delta    = escapeAttr(attrs.delta || '');
+  const progress = Math.min(100, Math.max(0, parseInt(attrs.progress || '0', 10)));
+  const isPos    = delta && !delta.startsWith('-') && !delta.startsWith('↓');
+  const deltaHtml = delta ? `<div class="card-stat-delta ${isPos ? 'positive' : 'negative'}">${delta}</div>` : '';
+  const barHtml   = progress > 0 ? `<div class="card-stat-bar"><div class="card-stat-fill" style="width:${progress}%"></div></div>` : '';
+  return `${cardRoot(attrs)}<div class="card-body">
+    ${title ? `<div class="card-subtitle">${title}</div>` : ''}
+    <div class="card-stat-value">${value}</div>${deltaHtml}${barHtml}
+  </div>${cardFooterAttr(attrs)}</div>\n`;
+};
+
+LAYOUT_RENDERERS['quote-testimonial'] = (attrs, body) => {
+  const author   = escapeAttr(attrs.title || '');
+  const role     = escapeAttr(attrs.subtitle || '');
+  const bodyHtml = body.trim() ? marked.parse(body.trim()) : '';
+  return `${cardRoot(attrs)}<span class="card-quote-mark">\u201c</span>
+    <div class="card-quote-text">${bodyHtml}</div>
+    <div class="card-footer card-quote-attr">
+      <div class="card-quote-avatar"></div>
+      <div>${author ? `<div style="font-weight:700;font-size:.85rem">${author}</div>` : ''}${role ? `<div class="card-subtitle">${role}</div>` : ''}</div>
+    </div></div>\n`;
+};
+
+LAYOUT_RENDERERS['callout'] = (attrs, body) => {
+  const type     = typeof attrs['callout-type'] === 'string' ? attrs['callout-type'].trim() : 'info';
+  const defaults = { info:'💡', warn:'⚠️', success:'✅', error:'❌' };
+  const icon     = escapeAttr(attrs.icon || defaults[type] || '💡');
+  const title    = escapeAttr(attrs.title || '');
+  const bodyHtml = marked.parse(body.trim());
+  return `${cardRoot(attrs, ['card-callout', type])}<div class="card-callout-inner card-body">
+    <div class="card-callout-icon"><span data-icon="${icon}"></span></div>
+    <div>${title ? `<div class="card-title">${title}</div>` : ''}${bodyHtml}</div>
+  </div></div>\n`;
+};
+```
+
+- [ ] **Step 2: Add video-media, location-map, step-numbered, corner-badge, badge-band**
+
+```js
+LAYOUT_RENDERERS['video-media'] = (attrs, body) => {
+  const title    = escapeAttr(attrs.title || '');
+  const duration = escapeAttr(attrs.duration || '');
+  const bodyHtml = body.trim() ? marked.parse(body.trim()) : '';
+  const dur      = duration ? `<div class="card-video-duration">${duration}</div>` : '';
+  return `${cardRoot(attrs)}<div class="card-video-thumb"${imgStyle(attrs)}>
+    <div class="card-play-btn">\u25B6</div>${dur}
+  </div>${title ? `<div class="card-header"><div class="card-title">${title}</div></div>` : ''}
+  <div class="card-body">${bodyHtml}</div>${cardFooterAttr(attrs)}</div>\n`;
+};
+
+LAYOUT_RENDERERS['location-map'] = (attrs, body) => {
+  const address  = escapeAttr(attrs.address || '');
+  const title    = escapeAttr(attrs.title || '');
+  const bodyHtml = body.trim() ? marked.parse(body.trim()) : '';
+  return `${cardRoot(attrs)}<div class="card-map-placeholder">
+    <div class="card-map-grid"></div><div class="card-map-pin">📍</div>
+  </div>${title || address ? `<div class="card-body">${title ? `<div class="card-title">${title}</div>` : ''}${address ? `<div class="card-subtitle">${address}</div>` : ''}${bodyHtml}</div>` : ''}</div>\n`;
+};
+
+LAYOUT_RENDERERS['step-numbered'] = (attrs, body) => {
+  const step     = escapeAttr(String(attrs.step || '1'));
+  const title    = escapeAttr(attrs.title || '');
+  const gradient = escapeAttr(attrs.gradient || 'indigo');
+  const bodyHtml = body.trim() ? marked.parse(body.trim()) : '';
+  return `${cardRoot(attrs)}<div class="card-step-bg card-gradient-${gradient}">
+    <div class="card-step-badge">${step}</div>
+    <div class="card-step-ghost">${step}</div>
+  </div>${title ? `<div class="card-header"><div class="card-title">${title}</div></div>` : ''}
+  <div class="card-body">${bodyHtml}</div>${cardFooterAttr(attrs)}</div>\n`;
+};
+
+LAYOUT_RENDERERS['corner-badge'] = (attrs, body) => {
+  const badge    = escapeAttr(attrs.badge || 'New');
+  const title    = escapeAttr(attrs.title || '');
+  const icon     = escapeAttr(attrs.icon || '');
+  const bodyHtml = body.trim() ? marked.parse(body.trim()) : '';
+  return `${cardRoot(attrs, ['card-corner-badge-wrap'])}<span class="card-corner-badge">${badge}</span>
+    ${icon ? `<div style="display:flex;justify-content:center;padding:18px 16px 4px"><span data-icon="${icon}" style="font-size:2rem"></span></div>` : ''}
+    <div class="card-body" style="text-align:center">${title ? `<div class="card-title">${title}</div>` : ''}${bodyHtml}</div>${cardFooterAttr(attrs)}</div>\n`;
+};
+
+LAYOUT_RENDERERS['badge-band'] = (attrs, body) => {
+  const badge    = escapeAttr(attrs.badge || 'New');
+  const icon     = escapeAttr(attrs.icon || '');
+  const gradient = escapeAttr(attrs.gradient || 'indigo');
+  const title    = escapeAttr(attrs.title || '');
+  const bodyHtml = body.trim() ? marked.parse(body.trim()) : '';
+  return `${cardRoot(attrs)}<div class="card-badge-band card-gradient-${gradient}">
+    <span class="card-badge-band-label">${badge}</span>
+    ${icon ? `<span class="card-badge-band-icon" data-icon="${icon}"></span>` : ''}
+  </div>${title ? `<div class="card-header"><div class="card-title">${title}</div></div>` : ''}
+  <div class="card-body">${bodyHtml}</div>${cardFooterAttr(attrs)}</div>\n`;
+};
+```
+
+- [ ] **Step 3: Add glass-gradient-border, rating-review, tag-cloud, timeline-entry, code-snippet**
+
+```js
+LAYOUT_RENDERERS['glass-gradient-border'] = (attrs, body) => {
+  const title    = escapeAttr(attrs.title || '');
+  const bodyHtml = marked.parse(body.trim());
+  return `<div class="card-glass-outer mb-4">
+    <div class="card-glass-inner">
+      ${title ? `<div class="card-title">${title}</div>` : ''}<div>${bodyHtml}</div>
+    </div></div>\n`;
+};
+
+LAYOUT_RENDERERS['rating-review'] = (attrs, body) => {
+  const rating   = Math.min(5, Math.max(0, parseInt(attrs.rating || '5', 10)));
+  const stars    = '\u2605'.repeat(rating) + '\u2606'.repeat(5 - rating);
+  const author   = escapeAttr(attrs.title || '');
+  const role     = escapeAttr(attrs.subtitle || '');
+  const verified = 'verified' in attrs;
+  const bodyHtml = body.trim() ? marked.parse(body.trim()) : '';
+  return `${cardRoot(attrs)}<span class="card-stars">${stars}</span>
+    <div class="card-quote-text">${bodyHtml}</div>
+    <div class="card-footer card-quote-attr">
+      <div class="card-quote-avatar"></div>
+      <div>${author ? `<div style="font-weight:700;font-size:.82rem">${author}${verified ? '<span class="card-verified">Verified</span>' : ''}</div>` : ''}
+      ${role ? `<div class="card-subtitle">${role}</div>` : ''}</div>
+    </div></div>\n`;
+};
+
+LAYOUT_RENDERERS['tag-cloud'] = (attrs, body) => {
+  const title   = escapeAttr(attrs.title || '');
+  const tagAttr = typeof attrs.tags === 'string' ? attrs.tags.split(',').map(t => t.trim()).filter(Boolean) : [];
+  const tagHtml = tagAttr.map((t, i) => `<span class="card-tag" style="${tagColorStyle(i)}">${escapeAttr(t)}</span>`).join('');
+  const bodyHtml = body.trim() ? marked.parse(body.trim()) : '';
+  return `${cardRoot(attrs)}${title ? `<div class="card-header"><div class="card-title">${title}</div></div>` : ''}
+    <div class="card-tag-cloud">${tagHtml}${bodyHtml}</div></div>\n`;
+};
+
+LAYOUT_RENDERERS['timeline-entry'] = (attrs, body) => {
+  const date     = escapeAttr(attrs.subtitle || '');
+  const title    = escapeAttr(attrs.title || '');
+  const tag      = escapeAttr(attrs.badge || '');
+  const bodyHtml = body.trim() ? marked.parse(body.trim()) : '';
+  return `${cardRoot(attrs)}<div class="card-timeline-row">
+    <div class="card-timeline-side"><div class="card-timeline-dot"></div><div class="card-timeline-line"></div></div>
+    <div class="card-timeline-body">
+      ${date ? `<div class="card-timeline-date">${date}</div>` : ''}
+      ${title ? `<div class="card-title">${title}</div>` : ''}
+      ${bodyHtml}
+      ${tag ? `<span class="card-timeline-tag">${tag}</span>` : ''}
+    </div>
+  </div></div>\n`;
+};
+
+LAYOUT_RENDERERS['code-snippet'] = (attrs, body) => {
+  const lang = escapeAttr(attrs.lang || 'Code');
+  const code = body.trim()
+    .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  return `${cardRoot(attrs)}<div class="card-code-header">
+    <span class="card-code-lang">${lang}</span>
+  </div><div class="card-code-body"><pre><code>${code}</code></pre></div></div>\n`;
+};
+```
+
+- [ ] **Step 4: Test**
+
+```bash
+# Create content/pages/card-special-test.md with callout, stat-metric, timeline-entry, code-snippet
+curl -s http://localhost:4096/card-special-test | grep -c 'card-callout\|card-stat\|card-timeline\|card-code'
+# Expected: 4
+# Delete test page
+```
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add server/services/markdown.js
+git commit -m "feat(markdown): add Tier 1 people/data/special card layout renderers"
+```
+
+---
+
+## Task 9: markdown.js - Tier 2 sub-tag layouts
+
+**Files:**
+
+- Modify: `server/services/markdown.js`
+
+- [ ] **Step 1: Add before-after, pricing, feature-comparison**
+
+```js
+LAYOUT_RENDERERS['before-after'] = (attrs, body) => {
+  const title       = escapeAttr(attrs.title || '');
+  const beforeRaw   = parseSubTag(body, 'before') || '';
+  const afterRaw    = parseSubTag(body, 'after')  || '';
+  const beforeItems = beforeRaw.split(/[·\n]/).map(s => s.trim()).filter(Boolean);
+  const afterItems  = afterRaw.split(/[·\n]/).map(s => s.trim()).filter(Boolean);
+  const colBefore   = beforeItems.map(i => `<div class="card-compare-item"><span class="card-compare-x">\u2717</span>${escapeAttr(i)}</div>`).join('');
+  const colAfter    = afterItems.map(i => `<div class="card-compare-item"><span class="card-compare-check">\u2713</span>${escapeAttr(i)}</div>`).join('');
+  return `${cardRoot(attrs)}${title ? `<div class="card-header"><div class="card-title">${title}</div></div>` : ''}
+    <div class="card-compare-grid">
+      <div class="card-compare-col"><span class="card-compare-label before">Before</span>${colBefore}</div>
+      <div class="card-compare-col"><span class="card-compare-label after">After</span>${colAfter}</div>
+    </div></div>\n`;
+};
+
+LAYOUT_RENDERERS['pricing'] = (attrs, body) => {
+  const title    = escapeAttr(attrs.title || '');
+  const price    = escapeAttr(attrs.price || '');
+  const period   = escapeAttr(attrs.period || '');
+  const gradient = escapeAttr(attrs.gradient || 'indigo');
+  const cta      = escapeAttr(attrs.footer || 'Get started');
+  const features = parseSubTagList(body, 'feature');
+  const featHtml = features.map(f => `<div class="card-pricing-feature"><span class="card-pricing-check">\u2713</span>${escapeAttr(f.content)}</div>`).join('');
+  return `${cardRoot(attrs)}<div class="card-header card-gradient-${gradient}">
+    <div class="card-subtitle">${title}</div>
+    <div class="card-stat-value" style="color:#fff">${price}</div>
+    ${period ? `<div style="opacity:.75;font-size:.8rem">${period}</div>` : ''}
+  </div><div class="card-pricing-features">${featHtml}</div>
+  <a class="card-pricing-cta" href="#">${cta}</a></div>\n`;
+};
+
+LAYOUT_RENDERERS['feature-comparison'] = (attrs, body) => {
+  const title    = escapeAttr(attrs.title || '');
+  const plan     = escapeAttr(attrs.subtitle || '');
+  const gradient = escapeAttr(attrs.gradient || 'indigo');
+  const features = parseSubTagList(body, 'feature');
+  const rows     = features.map(f => {
+    const included = !('excluded' in f.attrs);
+    return `<div class="card-fc-row"><span>${escapeAttr(f.content)}</span><span class="${included ? 'card-fc-yes' : 'card-fc-no'}">${included ? '\u2713' : '\u2717'}</span></div>`;
+  }).join('');
+  return `${cardRoot(attrs)}<div class="card-header card-gradient-${gradient}">
+    ${plan ? `<div class="card-subtitle" style="opacity:.8;font-size:.75rem">${plan}</div>` : ''}
+    <div class="card-title">${title}</div>
+  </div>${rows}</div>\n`;
+};
+```
+
+- [ ] **Step 2: Add activity-feed, progress-goal, file-document**
+
+```js
+LAYOUT_RENDERERS['activity-feed'] = (attrs, body) => {
+  const title      = escapeAttr(attrs.title || 'Activity');
+  const activities = parseSubTagList(body, 'activity');
+  const items      = activities.map(a => {
+    const user   = escapeAttr(a.attrs.user || '');
+    const action = escapeAttr(a.attrs.action || '');
+    const time   = escapeAttr(a.attrs.time || '');
+    return `<div class="card-activity-item">
+      <div class="card-activity-avatar">${user.charAt(0).toUpperCase()}</div>
+      <div><div style="font-size:.82rem"><strong>${user}</strong> ${action}</div>${time ? `<div style="font-size:.7rem;color:#9ca3af;margin-top:2px">${time}</div>` : ''}</div>
+    </div>`;
+  }).join('');
+  return `${cardRoot(attrs)}<div class="card-header"><div class="card-title">${title}</div></div>
+    <div>${items}</div>${cardFooterAttr(attrs)}</div>\n`;
+};
+
+LAYOUT_RENDERERS['progress-goal'] = (attrs, body) => {
+  const title      = escapeAttr(attrs.title || '');
+  const subtitle   = escapeAttr(attrs.subtitle || '');
+  const progress   = Math.min(100, Math.max(0, parseInt(attrs.progress || '0', 10)));
+  const milestones = parseSubTagList(body, 'milestone');
+  const msHtml     = milestones.map(m => {
+    const done = 'done' in m.attrs;
+    return `<div class="card-milestone"><div class="card-milestone-dot ${done ? 'done' : 'pending'}"></div>${escapeAttr(m.content)}</div>`;
+  }).join('');
+  return `${cardRoot(attrs)}<div class="card-body">
+    ${title ? `<div class="card-title">${title}</div>` : ''}
+    <div style="display:flex;justify-content:space-between;font-size:.82rem;margin-top:8px">
+      <span>${subtitle}</span><strong style="color:#6366f1">${progress}%</strong>
+    </div>
+    <div class="card-progress-bar"><div class="card-progress-fill" style="width:${progress}%"></div></div>
+    ${msHtml}
+  </div>${cardFooterAttr(attrs)}</div>\n`;
+};
+
+LAYOUT_RENDERERS['file-document'] = (attrs, _body) => {
+  const filename = escapeAttr(attrs.filename || 'document');
+  const filesize = escapeAttr(attrs.filesize || '');
+  const filetype = escapeAttr((attrs.filetype || '').toUpperCase());
+  const title    = escapeAttr(attrs.title || filename);
+  return `${cardRoot(attrs)}<div class="card-file-row">
+    <div class="card-file-icon">\uD83D\uDCC4<div class="card-file-ext">${filetype}</div></div>
+    <div><div class="card-title" style="font-size:.9rem">${title}</div>
+    ${filesize ? `<div class="card-subtitle">${filesize}</div>` : ''}
+    <a class="card-file-dl" href="#">\u2193 Download</a></div>
+  </div></div>\n`;
+};
+```
+
+- [ ] **Step 3: Test**
+
+```bash
+# Create content/pages/card-tier2-test.md with pricing, before-after, activity-feed shortcodes
+curl -s http://localhost:4096/card-tier2-test | grep -c 'card-pricing\|card-compare\|card-activity'
+# Expected: 3+
+# Delete test page
+```
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add server/services/markdown.js
+git commit -m "feat(markdown): add Tier 2 sub-tag card layout renderers"
+```
+
+---
+
+## Task 10: card-builder.js - Module scaffold, state, shortcode generator
+
+**Files:**
+
+- Create: `admin/js/lib/card-builder.js`
+
+- [ ] **Step 1: Create the file with layout registry, state object, and `CardBuilder.open()`**
+
+```js
+/**
+ * card-builder.js
+ * Self-contained card builder dialog.
+ * API: CardBuilder.open(textarea, { onMediaBrowse })
+ */
+
+const LAYOUTS = [
+  { key:'header-body',           group:'Basic',   label:'Header + Body',             thumb:'▤' },
+  { key:'basic',                 group:'Basic',   label:'Body only',                 thumb:'▭' },
+  { key:'header-body-footer',    group:'Basic',   label:'Header + Body + Footer',    thumb:'☰' },
+  { key:'no-header-footer',      group:'Basic',   label:'Body + Footer (no header)', thumb:'▥' },
+  { key:'icon-top',              group:'Icon',    label:'Icon top (stacked)',         thumb:'⬆★' },
+  { key:'icon-inline',           group:'Icon',    label:'Icon inline',               thumb:'★▶' },
+  { key:'image-top',             group:'Image',   label:'Image top',                 thumb:'🖼' },
+  { key:'image-overlay',         group:'Image',   label:'Image + overlay title',     thumb:'🖼✦' },
+  { key:'thumb-left',            group:'Image',   label:'Thumbnail left',            thumb:'🖼▐' },
+  { key:'thumb-right',           group:'Image',   label:'Thumbnail right',           thumb:'▌🖼' },
+  { key:'wide-left-image',       group:'Image',   label:'Wide image left',           thumb:'🖼▍' },
+  { key:'full-bg',               group:'Image',   label:'Full background',           thumb:'🖼' },
+  { key:'split-half',            group:'Image',   label:'Split half',                thumb:'▒▐' },
+  { key:'avatar-profile',        group:'People',  label:'Avatar / Profile',          thumb:'👤' },
+  { key:'stat-metric',           group:'People',  label:'Stat / Metric',             thumb:'📊' },
+  { key:'quote-testimonial',     group:'People',  label:'Quote / Testimonial',       thumb:'\u201c' },
+  { key:'rating-review',         group:'People',  label:'Rating / Review',           thumb:'★' },
+  { key:'activity-feed',         group:'People',  label:'Activity feed',             thumb:'🔔' },
+  { key:'callout',               group:'Content', label:'Callout',                   thumb:'💡' },
+  { key:'code-snippet',          group:'Content', label:'Code snippet',              thumb:'</>' },
+  { key:'file-document',         group:'Content', label:'File / Document',           thumb:'📄' },
+  { key:'tag-cloud',             group:'Content', label:'Tag cloud',                 thumb:'🏷' },
+  { key:'video-media',           group:'Media',   label:'Video / Media',             thumb:'▶' },
+  { key:'location-map',          group:'Special', label:'Location / Map',            thumb:'📍' },
+  { key:'step-numbered',         group:'Special', label:'Step / Numbered',           thumb:'①' },
+  { key:'corner-badge',          group:'Special', label:'Corner badge',              thumb:'🏷' },
+  { key:'badge-band',            group:'Special', label:'Badge band',                thumb:'⬛' },
+  { key:'glass-gradient-border', group:'Special', label:'Glass gradient border',     thumb:'◈' },
+  { key:'timeline-entry',        group:'Special', label:'Timeline entry',            thumb:'•-' },
+  { key:'before-after',          group:'Compare', label:'Before / After',            thumb:'↔' },
+  { key:'pricing',               group:'Compare', label:'Pricing card',              thumb:'£' },
+  { key:'feature-comparison',    group:'Compare', label:'Feature comparison',        thumb:'☑' },
+  { key:'progress-goal',         group:'Compare', label:'Progress / Goal',           thumb:'▰' },
+];
+
+const VARIANTS  = ['clean','gradient','glass','accent','dark','glow'];
+const GRADIENTS = ['indigo','ocean','sunset','forest','rose','midnight','aurora','fire','lagoon','dusk','lime','gold','arctic','slate'];
+
+const GRAD_COLORS = {
+  indigo:'#6366f1,#8b5cf6', ocean:'#0891b2,#2563eb', sunset:'#f59e0b,#ef4444',
+  forest:'#10b981,#0d9488', rose:'#fb7185,#e11d48',  midnight:'#1e1b4b,#4338ca',
+  aurora:'#06b6d4,#6366f1', fire:'#ef4444,#f97316',  lagoon:'#06b6d4,#0e7490',
+  dusk:'#7c3aed,#db2777',   lime:'#84cc16,#10b981',  gold:'#f59e0b,#b45309',
+  arctic:'#bae6fd,#e0f2fe', slate:'#475569,#1e293b',
+};
+
+// Singleton state
+let _overlay = null;
+let _state   = null;
+let _ta      = null;
+let _opts    = null;
+
+export const CardBuilder = {
+  open(textarea, options = {}) {
+    if (_overlay) return;
+    _ta   = textarea;
+    _opts = options;
+    _state = {
+      layout:'header-body', variant:'clean', gradient:'indigo',
+      title:'', subtitle:'', icon:'', iconLayout:'inline', image:'',
+      body:'', footer:'', hover:false, collapsible:false,
+      value:'', delta:'', progress:'50', price:'', period:'',
+      lang:'JavaScript', filename:'', filesize:'', filetype:'PDF',
+      rating:'5', duration:'', address:'', step:'1', badge:'New',
+      tags:'', calloutType:'info',
+    };
+    _buildDialog();
+  },
+  close() { _closeDialog(); },
+};
+```
+
+- [ ] **Step 2: Add `_buildShortcode()`**
+
+```js
+function _buildShortcode() {
+  const s = _state;
+  const a = [];
+
+  if (s.layout !== 'header-body') a.push(`layout="${s.layout}"`);
+  if (s.title)     a.push(`title="${s.title}"`);
+  if (s.subtitle)  a.push(`subtitle="${s.subtitle}"`);
+  if (s.icon)      a.push(`icon="${s.icon}"`);
+  if (s.icon && s.iconLayout === 'stacked') a.push('icon-layout="stacked"');
+  if (s.image)     a.push(`image="${s.image}"`);
+  if (s.variant !== 'clean') a.push(`variant="${s.variant}"`);
+  if (s.variant === 'gradient' && s.gradient !== 'indigo') a.push(`gradient="${s.gradient}"`);
+  if (s.hover)       a.push('hover');
+  if (s.collapsible) a.push('collapsible="true"');
+  if (s.footer && !['pricing','feature-comparison','activity-feed','before-after','progress-goal'].includes(s.layout)) {
+    a.push(`footer="${s.footer}"`);
+  }
+
+  const lsa = {
+    'stat-metric':       () => { if (s.value) a.push(`value="${s.value}"`); if (s.delta) a.push(`delta="${s.delta}"`); if (s.progress) a.push(`progress="${s.progress}"`); },
+    'pricing':           () => { if (s.price) a.push(`price="${s.price}"`); if (s.period) a.push(`period="${s.period}"`); },
+    'code-snippet':      () => a.push(`lang="${s.lang}"`),
+    'file-document':     () => { a.push(`filename="${s.filename}"`); if (s.filesize) a.push(`filesize="${s.filesize}"`); if (s.filetype) a.push(`filetype="${s.filetype}"`); },
+    'rating-review':     () => a.push(`rating="${s.rating}"`),
+    'video-media':       () => { if (s.duration) a.push(`duration="${s.duration}"`); },
+    'location-map':      () => { if (s.address) a.push(`address="${s.address}"`); },
+    'step-numbered':     () => a.push(`step="${s.step}"`),
+    'corner-badge':      () => { if (s.badge) a.push(`badge="${s.badge}"`); },
+    'badge-band':        () => { if (s.badge) a.push(`badge="${s.badge}"`); },
+    'tag-cloud':         () => { if (s.tags)  a.push(`tags="${s.tags}"`); },
+    'avatar-profile':    () => { if (s.tags)  a.push(`tags="${s.tags}"`); },
+    'callout':           () => { if (s.calloutType) a.push(`callout-type="${s.calloutType}"`); },
+    'split-half':        () => {},
+  };
+  if (lsa[s.layout]) lsa[s.layout]();
+
+  const attrStr = a.length ? ' ' + a.join(' ') : '';
+  const body    = s.body.trim() || 'Content here.';
+
+  const tier2defaults = {
+    'before-after':      `[before]Before item 1 · Before item 2[/before]\n[after]After item 1 · After item 2[/after]`,
+    'pricing':           `[feature]Feature one[/feature]\n[feature]Feature two[/feature]`,
+    'feature-comparison':`[feature]Included feature[/feature]\n[feature excluded]Excluded feature[/feature]`,
+    'activity-feed':     `[activity user="Alice" action="published a page" time="2 min ago"]`,
+    'progress-goal':     `[milestone done]Phase 1[/milestone]\n[milestone]Phase 2[/milestone]`,
+  };
+  const resolvedBody = tier2defaults[s.layout] || body;
+
+  return `[card${attrStr}]\n${resolvedBody}\n[/card]`;
+}
+
+function _closeDialog() {
+  if (_overlay) { _overlay.remove(); _overlay = null; _state = null; }
+}
+
+function _insert() {
+  const snippet = _buildShortcode();
+  const start   = _ta.selectionStart;
+  const end     = _ta.selectionEnd;
+  _ta.value = _ta.value.slice(0, start) + snippet + _ta.value.slice(end);
+  _ta.selectionStart = _ta.selectionEnd = start + snippet.length;
+  _ta.dispatchEvent(new Event('input', { bubbles: true }));
+  _ta.focus();
+  _closeDialog();
+}
+```
+
+- [ ] **Step 3: Verify module syntax**
+
+```bash
+node --input-type=module << 'EOF'
+import { CardBuilder } from '/home/darryl/src/js/domma-cms/admin/js/lib/card-builder.js';
+console.log('OK:', Object.keys(CardBuilder).join(', '));
+EOF
+```
+
+Expected: `OK: open, close`
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add admin/js/lib/card-builder.js
+git commit -m "feat(admin): add card-builder module scaffold + shortcode generator"
+```
+
+---
+
+## Task 11: card-builder.js - Dialog DOM + control panel
+
+**Files:**
+
+- Modify: `admin/js/lib/card-builder.js`
+
+- [ ] **Step 1: Add `_buildDialog()` - overlay, two-panel layout, header, footer**
+
+```js
+function _buildDialog() {
+  _overlay = document.createElement('div');
+  Object.assign(_overlay.style, {
+    position:'fixed', inset:'0', background:'rgba(0,0,0,.6)',
+    display:'flex', alignItems:'center', justifyContent:'center',
+    zIndex:'9999', padding:'24px',
+  });
+
+  const dialog = document.createElement('div');
+  Object.assign(dialog.style, {
+    background:'#1e293b', border:'1px solid #334155', borderRadius:'14px',
+    width:'100%', maxWidth:'860px', maxHeight:'90vh',
+    display:'flex', flexDirection:'column',
+    boxShadow:'0 24px 64px rgba(0,0,0,.6)', overflow:'hidden',
+  });
+
+  const hdr = _el('div', 'display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid #334155;flex-shrink:0');
+  const htitle = _el('span', 'font-weight:700;color:#f1f5f9;font-size:14px');
+  htitle.textContent = 'Insert Card';
+  const closeBtn = _el('button', 'background:#334155;border:none;color:#94a3b8;border-radius:6px;width:26px;height:26px;cursor:pointer;font-size:14px');
+  closeBtn.textContent = '\u2715';
+  closeBtn.addEventListener('click', _closeDialog);
+  hdr.appendChild(htitle);
+  hdr.appendChild(closeBtn);
+
+  const body = _el('div', 'display:grid;grid-template-columns:280px 1fr;flex:1;overflow:hidden');
+  body.appendChild(_buildControlPanel());
+  body.appendChild(_buildPreviewPanel());
+
+  const ftr = _el('div', 'display:flex;justify-content:flex-end;gap:10px;padding:12px 20px;border-top:1px solid #334155;flex-shrink:0');
+  const cancelBtn = _el('button', 'padding:8px 18px;border-radius:8px;border:none;background:#334155;color:#94a3b8;font-size:12px;font-weight:700;cursor:pointer');
+  cancelBtn.textContent = 'Cancel';
+  cancelBtn.addEventListener('click', _closeDialog);
+  const insertBtn = _el('button', 'padding:8px 18px;border-radius:8px;border:none;background:#6366f1;color:#fff;font-size:12px;font-weight:700;cursor:pointer');
+  insertBtn.textContent = 'Insert Card';
+  insertBtn.addEventListener('click', _insert);
+  ftr.appendChild(cancelBtn);
+  ftr.appendChild(insertBtn);
+
+  dialog.appendChild(hdr);
+  dialog.appendChild(body);
+  dialog.appendChild(ftr);
+  _overlay.appendChild(dialog);
+  _overlay.addEventListener('click', e => { if (e.target === _overlay) _closeDialog(); });
+  document.body.appendChild(_overlay);
+  _refreshDynFields();
+  _updatePreview();
+}
+
+// DOM helper
+function _el(tag, css = '') {
+  const el = document.createElement(tag);
+  if (css) el.style.cssText = css;
+  return el;
+}
+```
+
+- [ ] **Step 2: Add `_buildControlPanel()` - layout dropdown, style swatches, gradient picker, options**
+
+```js
+const IS = 'padding:7px 10px;border-radius:7px;border:1px solid #334155;background:#0f172a;color:#e2e8f0;font-size:12px;font-family:inherit;width:100%';
+
+function _buildControlPanel() {
+  const panel = _el('div', 'padding:18px;border-right:1px solid #334155;display:flex;flex-direction:column;gap:14px;overflow-y:auto');
+  panel.appendChild(_field('Layout', _layoutSelect()));
+
+  const dynFields = _el('div', 'display:contents');
+  dynFields.id = 'cb-dyn-fields';
+  panel.appendChild(dynFields);
+
+  panel.appendChild(_divider());
+  panel.appendChild(_field('Style', _styleSwatches()));
+
+  const gradWrap = _el('div');
+  gradWrap.id = 'cb-grad-wrap';
+  gradWrap.style.display = _state.variant === 'gradient' ? '' : 'none';
+  gradWrap.appendChild(_field('Gradient', _gradientPicker()));
+  panel.appendChild(gradWrap);
+
+  panel.appendChild(_field('Options', _optionToggles()));
+  return panel;
+}
+
+function _layoutSelect() {
+  const sel = _el('select', IS + ';cursor:pointer');
+  const groups = {};
+  LAYOUTS.forEach(l => { (groups[l.group] = groups[l.group] || []).push(l); });
+  Object.entries(groups).forEach(([grp, items]) => {
+    const og = document.createElement('optgroup');
+    og.label = grp;
+    items.forEach(l => {
+      const opt = document.createElement('option');
+      opt.value = l.key;
+      opt.textContent = `${l.thumb}  ${l.label}`;
+      if (l.key === _state.layout) opt.selected = true;
+      og.appendChild(opt);
+    });
+    sel.appendChild(og);
+  });
+  sel.addEventListener('change', () => { _state.layout = sel.value; _refreshDynFields(); _updatePreview(); });
+  return sel;
+}
+
+function _styleSwatches() {
+  const wrap = _el('div', 'display:grid;grid-template-columns:repeat(3,1fr);gap:5px');
+  const swStyle = {
+    clean:   'background:#f8fafc;color:#374151;border:2px solid #e2e8f0',
+    gradient:'background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border:2px solid transparent',
+    glass:   'background:rgba(255,255,255,.06);color:#94a3b8;border:2px dashed #334155',
+    accent:  'background:#fff;color:#4338ca;border-left:4px solid #6366f1;border-top:2px solid #e2e8f0;border-right:2px solid #e2e8f0;border-bottom:2px solid #e2e8f0',
+    dark:    'background:#0f172a;color:#818cf8;border:2px solid #334155',
+    glow:    'color:#818cf8;border:2px solid #6366f1;box-shadow:0 0 6px rgba(99,102,241,.4)',
+  };
+  VARIANTS.forEach(v => {
+    const sw = _el('div', `padding:6px 4px;border-radius:7px;font-size:10px;font-weight:700;text-align:center;cursor:pointer;${swStyle[v]}`);
+    sw.textContent = v.charAt(0).toUpperCase() + v.slice(1);
+    sw.dataset.variant = v;
+    if (v === _state.variant) sw.style.outline = '2px solid #6366f1';
+    sw.addEventListener('click', () => {
+      _state.variant = v;
+      wrap.querySelectorAll('[data-variant]').forEach(s => { s.style.outline = ''; });
+      sw.style.outline = '2px solid #6366f1';
+      const gw = document.getElementById('cb-grad-wrap');
+      if (gw) gw.style.display = v === 'gradient' ? '' : 'none';
+      _updatePreview();
+    });
+    wrap.appendChild(sw);
+  });
+  return wrap;
+}
+
+function _gradientPicker() {
+  const wrap = _el('div', 'display:flex;flex-wrap:wrap;gap:7px');
+  GRADIENTS.forEach(g => {
+    const [c1, c2] = (GRAD_COLORS[g] || '#6366f1,#8b5cf6').split(',');
+    const c = _el('div', `width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,${c1},${c2});cursor:pointer;border:2px solid transparent;transition:border-color .15s`);
+    c.title = g;
+    if (g === _state.gradient) c.style.borderColor = '#fff';
+    c.addEventListener('click', () => {
+      _state.gradient = g;
+      wrap.querySelectorAll('div').forEach(d => { d.style.borderColor = 'transparent'; });
+      c.style.borderColor = '#fff';
+      _updatePreview();
+    });
+    wrap.appendChild(c);
+  });
+  return wrap;
+}
+
+function _optionToggles() {
+  const row = _el('div', 'display:flex;gap:6px');
+  ['hover','collapsible'].forEach(key => {
+    const btn = _el('div');
+    const setStyle = (on) => {
+      btn.style.cssText = `flex:1;padding:6px 8px;border-radius:7px;border:1px solid;font-size:11px;font-weight:700;text-align:center;cursor:pointer;${on ? 'border-color:#6366f1;background:#1e1b4b;color:#a5b4fc' : 'border-color:#334155;background:#0f172a;color:#64748b'}`;
+    };
+    setStyle(_state[key]);
+    btn.textContent = key.charAt(0).toUpperCase() + key.slice(1);
+    btn.addEventListener('click', () => { _state[key] = !_state[key]; setStyle(_state[key]); _updatePreview(); });
+    row.appendChild(btn);
+  });
+  return row;
+}
+
+// Field builder helpers
+function _field(label, el) {
+  const wrap = _el('div', 'display:flex;flex-direction:column;gap:5px');
+  const lbl = _el('div', 'font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#475569');
+  lbl.textContent = label;
+  wrap.appendChild(lbl);
+  wrap.appendChild(el);
+  return wrap;
+}
+
+function _divider() {
+  const d = _el('div', 'height:1px;background:#1e293b;margin:2px 0');
+  return d;
+}
+
+function _textInput(stateKey, placeholder) {
+  const input = _el('input', IS);
+  input.type = 'text';
+  if (placeholder) input.placeholder = placeholder;
+  input.value = _state[stateKey] || '';
+  input.addEventListener('input', () => { _state[stateKey] = input.value; _updatePreview(); });
+  return input;
+}
+
+function _selectInput(stateKey, options) {
+  const sel = _el('select', IS + ';cursor:pointer');
+  options.forEach(o => {
+    const opt = document.createElement('option');
+    opt.value = o; opt.textContent = o;
+    if (o === _state[stateKey]) opt.selected = true;
+    sel.appendChild(opt);
+  });
+  sel.addEventListener('change', () => { _state[stateKey] = sel.value; _updatePreview(); });
+  return sel;
+}
+```
+
+- [ ] **Step 3: Add `_refreshDynFields()` - replaces the dynamic fields on layout change**
+
+```js
+const LAYOUT_FIELDS = {
+  'icon-top':          ['subtitle','icon','iconLayout'],
+  'icon-inline':       ['subtitle','icon','iconLayout'],
+  'image-top':         ['image'],
+  'image-overlay':     ['image'],
+  'thumb-left':        ['image'],
+  'thumb-right':       ['image'],
+  'wide-left-image':   ['image'],
+  'full-bg':           ['image'],
+  'split-half':        ['image'],
+  'avatar-profile':    ['subtitle','icon','tags'],
+  'stat-metric':       ['value','delta','progress'],
+  'quote-testimonial': ['subtitle','icon'],
+  'callout':           ['calloutType','icon'],
+  'video-media':       ['image','duration'],
+  'location-map':      ['address'],
+  'step-numbered':     ['step'],
+  'corner-badge':      ['icon','badge'],
+  'badge-band':        ['icon','badge'],
+  'rating-review':     ['rating','subtitle','icon'],
+  'tag-cloud':         ['tags'],
+  'activity-feed':     [],
+  'code-snippet':      ['lang'],
+  'file-document':     ['filename','filesize','filetype'],
+  'before-after':      [],
+  'pricing':           ['price','period'],
+  'feature-comparison':['subtitle'],
+  'progress-goal':     ['progress'],
+  'timeline-entry':    ['subtitle','badge'],
+  'glass-gradient-border':[],
+};
+
+const NO_TITLE = new Set(['basic','no-header-footer','code-snippet','file-document','stat-metric']);
+const NO_BODY  = new Set(['stat-metric','file-document']);
+const NO_FOOTER = new Set(['pricing','feature-comparison','activity-feed','before-after','progress-goal']);
+
+function _refreshDynFields() {
+  const container = document.getElementById('cb-dyn-fields');
+  if (!container) return;
+  while (container.firstChild) container.removeChild(container.firstChild);
+
+  const layout = _state.layout;
+  const fields = LAYOUT_FIELDS[layout] || [];
+
+  if (!NO_TITLE.has(layout)) container.appendChild(_field('Title', _textInput('title', 'Card heading')));
+
+  fields.forEach(f => {
+    const fieldMap = {
+      subtitle:    () => _field('Subtitle', _textInput('subtitle', 'Secondary line')),
+      icon:        () => _field('Icon', _iconRow()),
+      iconLayout:  () => _field('Icon layout', _iconLayoutToggle()),
+      image:       () => _field('Image', _imageRow()),
+      value:       () => _field('Value', _textInput('value', '\u00a324,980')),
+      delta:       () => _field('Delta', _textInput('delta', '\u2191 12.4%')),
+      progress:    () => _field('Progress %', _textInput('progress', '50')),
+      price:       () => _field('Price', _textInput('price', '\u00a329')),
+      period:      () => _field('Period', _textInput('period', 'per month')),
+      lang:        () => _field('Language', _textInput('lang', 'JavaScript')),
+      filename:    () => _field('Filename', _textInput('filename', 'document.pdf')),
+      filesize:    () => _field('File size', _textInput('filesize', '2.4 MB')),
+      filetype:    () => _field('File type', _textInput('filetype', 'PDF')),
+      rating:      () => _field('Rating (1-5)', _textInput('rating', '5')),
+      duration:    () => _field('Duration', _textInput('duration', '4:32')),
+      address:     () => _field('Address', _textInput('address', '12 Main St')),
+      step:        () => _field('Step number', _textInput('step', '1')),
+      badge:       () => _field('Badge label', _textInput('badge', 'New')),
+      tags:        () => _field('Tags (comma-separated)', _textInput('tags', 'Design, CSS')),
+      calloutType: () => _field('Type', _selectInput('calloutType', ['info','warn','success','error'])),
+    };
+    if (fieldMap[f]) container.appendChild(fieldMap[f]());
+  });
+
+  if (!NO_BODY.has(layout))   container.appendChild(_field('Body content', _bodyTextarea()));
+  if (!NO_FOOTER.has(layout)) container.appendChild(_field('Footer', _textInput('footer', '')));
+}
+
+function _bodyTextarea() {
+  const ta = _el('textarea', IS + ';resize:vertical;min-height:60px;line-height:1.5');
+  ta.value = _state.body || '';
+  ta.addEventListener('input', () => { _state.body = ta.value; _updatePreview(); });
+  return ta;
+}
+
+function _iconRow() {
+  const row = _el('div', 'display:flex;gap:6px');
+  const input = _el('input', IS + ';flex:1');
+  input.type = 'text'; input.placeholder = 'icon name';
+  input.value = _state.icon || '';
+  input.addEventListener('input', () => { _state.icon = input.value; _updatePreview(); });
+  const btn = _el('button', 'padding:0 10px;height:34px;background:#334155;border:none;color:#94a3b8;border-radius:7px;font-size:13px;cursor:pointer;flex-shrink:0');
+  btn.title = 'Browse icons';
+  btn.textContent = '\u2605';
+  btn.addEventListener('click', () => _openIconPicker(name => { _state.icon = name; input.value = name; _updatePreview(); }));
+  row.appendChild(input);
+  row.appendChild(btn);
+  return row;
+}
+
+function _iconLayoutToggle() {
+  const row = _el('div', 'display:flex;gap:6px');
+  ['inline','stacked'].forEach(v => {
+    const btn = _el('div');
+    const setS = (on) => {
+      btn.style.cssText = `flex:1;padding:6px;border-radius:7px;border:1px solid;font-size:11px;font-weight:700;text-align:center;cursor:pointer;${on ? 'border-color:#6366f1;background:#1e1b4b;color:#a5b4fc' : 'border-color:#334155;background:#0f172a;color:#64748b'}`;
+    };
+    setS(_state.iconLayout === v);
+    btn.textContent = v.charAt(0).toUpperCase() + v.slice(1);
+    btn.addEventListener('click', () => {
+      _state.iconLayout = v;
+      row.querySelectorAll('div').forEach((b, i) => setS(['inline','stacked'][i] === v));
+      _updatePreview();
+    });
+    row.appendChild(btn);
+  });
+  return row;
+}
+
+function _imageRow() {
+  const row = _el('div', 'display:flex;gap:6px');
+  const input = _el('input', IS + ';flex:1');
+  input.type = 'text'; input.placeholder = '/media/image.jpg';
+  input.value = _state.image || '';
+  input.addEventListener('input', () => { _state.image = input.value; _updatePreview(); });
+  const btn = _el('button', 'padding:0 10px;height:34px;background:#334155;border:none;color:#94a3b8;border-radius:7px;font-size:13px;cursor:pointer;flex-shrink:0');
+  btn.title = 'Browse media';
+  btn.textContent = '\uD83D\uDCC1';
+  btn.addEventListener('click', async () => {
+    if (_opts && typeof _opts.onMediaBrowse === 'function') {
+      const url = await _opts.onMediaBrowse();
+      if (url) { _state.image = url; input.value = url; _updatePreview(); }
+    }
+  });
+  row.appendChild(input);
+  row.appendChild(btn);
+  return row;
+}
+```
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add admin/js/lib/card-builder.js
+git commit -m "feat(admin): add card builder dialog DOM + dynamic control panel"
+```
+
+---
+
+## Task 12: card-builder.js - Preview panel + live preview renderer
+
+**Files:**
+
+- Modify: `admin/js/lib/card-builder.js`
+
+- [ ] **Step 1: Add `_buildPreviewPanel()` - right panel structure**
+
+```js
+function _buildPreviewPanel() {
+  const panel = _el('div', 'padding:20px;background:#f8fafc;display:flex;flex-direction:column;gap:14px;overflow-y:auto');
+
+  const lbl = _el('div', 'font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#94a3b8');
+  lbl.textContent = 'Live Preview';
+
+  const area = _el('div', 'flex:1;display:flex;align-items:flex-start;justify-content:center');
+  area.id = 'cb-preview-area';
+
+  const sLbl = _el('div', 'font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:6px');
+  sLbl.textContent = 'Shortcode';
+
+  const sBox = _el('div', 'background:#1e293b;border:1px solid #334155;border-radius:8px;padding:10px 14px;font-family:monospace;font-size:11px;color:#a5b4fc;line-height:1.8;white-space:pre-wrap;word-break:break-all');
+  sBox.id = 'cb-snippet';
+
+  panel.appendChild(lbl);
+  panel.appendChild(area);
+  panel.appendChild(sLbl);
+  panel.appendChild(sBox);
+  return panel;
+}
+```
+
+- [ ] **Step 2: Add `_updatePreview()` and `_buildPreviewCard()`**
+
+```js
+function _updatePreview() {
+  const area = document.getElementById('cb-preview-area');
+  if (!area) return;
+  while (area.firstChild) area.removeChild(area.firstChild);
+  area.appendChild(_buildPreviewCard());
+  const box = document.getElementById('cb-snippet');
+  if (box) box.textContent = _buildShortcode();
+}
+
+function _buildPreviewCard() {
+  const s    = _state;
+  const card = _el('div');
+  card.style.cssText = 'width:100%;max-width:300px;border-radius:12px;overflow:hidden;font-size:13px;font-family:system-ui,sans-serif';
+  card.className = ['card','mb-4', s.variant !== 'clean' ? `dm-card-${s.variant}` : '', s.variant === 'gradient' ? `card-gradient-${s.gradient}` : ''].filter(Boolean).join(' ');
+
+  // Image area (for image-based layouts)
+  const imgLayouts = new Set(['image-top','image-overlay','thumb-left','thumb-right','wide-left-image','full-bg','split-half','video-media']);
+  if (imgLayouts.has(s.layout)) {
+    const img = _el('div');
+    img.className = 'card-img-top';
+    if (s.image) img.style.backgroundImage = `url('${s.image}')`;
+    img.style.backgroundSize = 'cover';
+    img.style.backgroundPosition = 'center';
+    if (!s.image) img.textContent = '\uD83D\uDDBC';
+    card.appendChild(img);
+  }
+
+  // Header
+  const noHdr = new Set(['basic','no-header-footer','image-overlay','stat-metric','quote-testimonial','activity-feed','before-after','code-snippet','file-document','glass-gradient-border']);
+  if (!noHdr.has(s.layout) && s.title) {
+    const hdr = _el('div', '');
+    hdr.className = s.variant === 'gradient' ? `card-header card-gradient-${s.gradient}` : 'card-header';
+    const t = _el('div', 'font-weight:700');
+    t.textContent = s.title;
+    hdr.appendChild(t);
+    card.appendChild(hdr);
+  }
+
+  // Body
+  const body = _el('div', '');
+  body.className = 'card-body';
+  const tier2 = new Set(['before-after','pricing','feature-comparison','activity-feed','progress-goal']);
+  if (tier2.has(s.layout)) {
+    const note = _el('em', 'font-size:11px;color:#9ca3af');
+    note.textContent = 'Simplified preview - full render on save.';
+    body.appendChild(note);
+  } else if (s.layout === 'stat-metric') {
+    const val = _el('div', 'font-size:2rem;font-weight:800;color:#111827');
+    val.textContent = s.value || '-';
+    const lbl2 = _el('div', 'font-size:.8rem;color:#6b7280');
+    lbl2.textContent = s.title || '';
+    body.appendChild(lbl2);
+    body.appendChild(val);
+    if (s.delta) { const d = _el('div', 'font-size:.78rem;font-weight:600;color:#10b981'); d.textContent = s.delta; body.appendChild(d); }
+  } else {
+    body.textContent = s.body || 'Card body content.';
+  }
+  card.appendChild(body);
+
+  // Footer
+  if (s.footer) {
+    const ftr = _el('div', '');
+    ftr.className = 'card-footer';
+    ftr.textContent = s.footer;
+    card.appendChild(ftr);
+  }
+
+  return card;
+}
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add admin/js/lib/card-builder.js
+git commit -m "feat(admin): add card builder live preview renderer"
+```
+
+---
+
+## Task 13: card-builder.js - Icon picker overlay
+
+**Files:**
+
+- Modify: `admin/js/lib/card-builder.js`
+
+- [ ] **Step 1: Get the icon list from markdown-toolbar.js**
+
+```bash
+grep -A 5 "const allIcons\|ALL_ICONS\|iconNames" /home/darryl/src/js/domma-cms/admin/js/lib/markdown-toolbar.js | head -20
+```
+
+Find the array name and copy its contents. Store as `const ALL_ICONS = [...]` at the top of card-builder.js.
+
+- [ ] **Step 2: Add `_openIconPicker(onSelect)` - overlay with search + grid**
+
+```js
+function _openIconPicker(onSelect) {
+  const overlay = _el('div', 'position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:10000;padding:24px');
+
+  const panel = _el('div', 'background:#1e293b;border:1px solid #475569;border-radius:12px;padding:16px;width:100%;max-width:520px;max-height:70vh;display:flex;flex-direction:column;gap:12px');
+
+  const searchRow = _el('div', 'display:flex;gap:8px');
+  const searchInput = _el('input', 'flex:1;padding:8px 12px;border-radius:8px;border:1px solid #334155;background:#0f172a;color:#e2e8f0;font-size:13px;font-family:inherit');
+  searchInput.type = 'text'; searchInput.placeholder = 'Search icons\u2026';
+  const closeBtn2 = _el('button', 'padding:8px 14px;background:#334155;border:none;border-radius:8px;color:#94a3b8;font-size:12px;cursor:pointer');
+  closeBtn2.textContent = '\u2715 Close';
+  closeBtn2.addEventListener('click', () => overlay.remove());
+  searchRow.appendChild(searchInput);
+  searchRow.appendChild(closeBtn2);
+
+  const grid = _el('div', 'display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px;overflow-y:auto;max-height:400px');
+  let selectedItem = null;
+
+  const confirmBtn = _el('button', 'padding:8px 18px;background:#6366f1;border:none;border-radius:8px;color:#fff;font-size:12px;font-weight:700;cursor:pointer;align-self:flex-end');
+  confirmBtn.textContent = 'Select an icon';
+
+  function renderGrid(filter) {
+    while (grid.firstChild) grid.removeChild(grid.firstChild);
+    const icons = filter
+      ? ALL_ICONS.filter(n => n.includes(filter.toLowerCase()))
+      : ALL_ICONS;
+    icons.slice(0, 120).forEach(name => {
+      const item = _el('div', 'display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-radius:8px;cursor:pointer;border:2px solid transparent;background:#0f172a');
+      const glyph = document.createElement('span');
+      glyph.setAttribute('data-icon', name);
+      glyph.style.fontSize = '20px';
+      const label = _el('div', 'font-size:8px;color:#475569;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%');
+      label.textContent = name;
+      item.appendChild(glyph);
+      item.appendChild(label);
+      item.addEventListener('click', () => {
+        if (selectedItem) selectedItem.style.borderColor = 'transparent';
+        item.style.borderColor = '#6366f1';
+        selectedItem = item;
+        confirmBtn.textContent = `Use: ${name}`;
+      });
+      item.addEventListener('dblclick', () => { onSelect(name); overlay.remove(); });
+      grid.appendChild(item);
+    });
+    if (typeof I !== 'undefined' && I.scan) I.scan(grid);
+  }
+
+  searchInput.addEventListener('input', () => renderGrid(searchInput.value));
+  renderGrid('');
+
+  confirmBtn.addEventListener('click', () => {
+    if (selectedItem) {
+      const name = selectedItem.querySelector('[data-icon]').getAttribute('data-icon');
+      onSelect(name);
+      overlay.remove();
+    }
+  });
+
+  panel.appendChild(searchRow);
+  panel.appendChild(grid);
+  panel.appendChild(confirmBtn);
+  overlay.appendChild(panel);
+  overlay.addEventListener('click', e => { if (e.target === overlay) overlay.remove(); });
+  document.body.appendChild(overlay);
+  searchInput.focus();
+}
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add admin/js/lib/card-builder.js
+git commit -m "feat(admin): add icon picker overlay to card builder"
+```
+
+---
+
+## Task 14: page-editor.js - Wire toolbar.onCard()
+
+**Files:**
+
+- Modify: `admin/js/views/page-editor.js`
+
+- [ ] **Step 1: Find toolbar initialisation and existing onXxx handlers**
+
+```bash
+grep -n 'toolbar\.\|onCard\|onGrid\|onImage\|MarkdownToolbar\|markdown-toolbar' /home/darryl/src/js/domma-cms/admin/js/views/page-editor.js | head -30
+```
+
+Identify:
+
+1. Where the toolbar instance is created
+2. Where other `toolbar.onXxx()` handlers are registered (e.g. `toolbar.onImage`, `toolbar.onGrid`)
+3. How the existing media picker is called (pattern for `onMediaBrowse` callback)
+
+- [ ] **Step 2: Add import at top of page-editor.js**
+
+```js
+import { CardBuilder } from '../lib/card-builder.js';
+```
+
+- [ ] **Step 3: Register onCard handler alongside other toolbar handlers**
+
+```js
+toolbar.onCard((ta) => {
+  CardBuilder.open(ta, {
+    onMediaBrowse: () => new Promise((resolve) => {
+      // Mirror the existing media picker invocation pattern.
+      // Check how toolbar.onImage or toolbar.onLink calls the media modal
+      // and adapt the same call here, resolving with the selected URL.
+      openMediaPicker(resolve); // replace with the actual function name used in page-editor
+    }),
+  });
+});
+```
+
+Look at the existing `toolbar.onImage` or `toolbar.onLink` handler - copy its media modal invocation pattern exactly.
+
+- [ ] **Step 4: Verify in browser**
+
+1. Open `http://localhost:4096/admin/#/pages`
+2. Open any page in the editor
+3. Click **Card** in the toolbar
+4. Confirm dialog opens with 33 layouts in the dropdown
+5. Change layout - fields update, preview updates
+6. Change variant - preview updates
+7. Click Insert - shortcode inserted at cursor
+8. Preview page - card renders correctly
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add admin/js/views/page-editor.js
+git commit -m "feat(admin): wire card builder into page editor toolbar"
+```
+
+---
+
+## Task 15: End-to-end verification
+
+**Files:**
+
+- Temporary: `content/pages/card-e2e-test.md`
+
+- [ ] **Step 1: Create comprehensive test page**
+
+```markdown
+---
+title: Card E2E Test
+layout: default
+---
+
+[card variant="clean" title="Clean" hover]Plain body text.[/card]
+
+[card layout="image-top" title="Image Top" variant="gradient" gradient="aurora" footer="5 min read" hover]Short description.[/card]
+
+[card layout="callout" callout-type="info" icon="bulb" title="Tip"]Body here.[/card]
+
+[card layout="stat-metric" title="Revenue" value="£24,980" delta="↑ 12.4%" progress="68"][/card]
+
+[card layout="pricing" title="Pro" price="£29" period="per month" variant="gradient" gradient="indigo"]
+[feature]Unlimited pages[/feature]
+[feature]All plugins[/feature]
+[/card]
+
+[card layout="before-after" title="Why switch?"]
+[before]Manual updates · Dev dependency[/before]
+[after]Auto deploy · Editor-owned[/after]
+[/card]
+
+[card layout="glass-gradient-border" title="Glass card"]Frosted glass border.[/card]
+
+[card layout="timeline-entry" title="Plugin system" subtitle="Apr 2026" badge="Feature"]Plugins can now inject routes.[/card]
+
+[card layout="code-snippet" lang="JavaScript"]const x = 1 + 2;[/card]
+```
+
+- [ ] **Step 2: Verify all layouts render**
+
+```bash
+curl -s http://localhost:4096/card-e2e-test > /tmp/card-test.html
+grep -c 'dm-card\|card-gradient\|card-callout\|card-stat\|card-pricing\|card-compare\|card-glass\|card-timeline\|card-code' /tmp/card-test.html
+```
+
+Expected: `9` or more
+
+- [ ] **Step 3: Visual verification in browser** - `http://localhost:4096/card-e2e-test`
+
+Confirm:
+
+- Clean card lifts on hover
+- Gradient card (aurora) shows coloured header
+- Callout has left accent stripe
+- Stat shows large value + progress bar
+- Pricing shows feature list
+- Before/After shows two columns
+- Glass has frosted appearance
+- Timeline shows dot + line + tag
+- Code shows dark block with language badge
+
+- [ ] **Step 4: Card builder dialog verification** - `http://localhost:4096/admin/#/pages`
+
+- Click Card in toolbar → dialog opens
+- Select each layout group → fields update correctly
+- Select Gradient variant → gradient circle picker appears
+- Type title → preview card updates
+- Click Browse icons → icon picker opens, search works, double-click selects
+- Click Insert → shortcode inserted, dialog closes
+- Preview the page - card renders correctly
+
+- [ ] **Step 5: Clean up and final commit**
+
+```bash
+rm content/pages/card-e2e-test.md
+git status
+# commit any remaining uncommitted changes
+```
+
+---
+
+## Summary
+
+| Task | Produces                             | Verified by                     |
+|------|--------------------------------------|---------------------------------|
+| 1    | 6 variant CSS classes                | `curl grep dm-card-`            |
+| 2    | 14 gradient CSS classes              | Visual                          |
+| 3    | All layout structural CSS            | Visual with layouts             |
+| 4    | Collapsible click handler            | Browser click test              |
+| 5    | `processCardBlocks` routing          | Server restart + existing cards |
+| 6    | Basic + icon renderers               | `curl grep card-header-icon`    |
+| 7    | Image layout renderers               | `curl grep card-img`            |
+| 8    | People/data/special renderers        | `curl grep card-callout`        |
+| 9    | Tier 2 sub-tag renderers             | `curl grep card-pricing`        |
+| 10   | CardBuilder scaffold + shortcode gen | `node --input-type=module`      |
+| 11   | Control panel + dynamic fields       | Browser dialog                  |
+| 12   | Live preview renderer                | Browser preview                 |
+| 13   | Icon picker                          | Browser icon browse             |
+| 14   | page-editor wiring                   | Full browser flow               |
+| 15   | End-to-end                           | All 33 layouts render + dialog  |