npm - @w3kits-com/plugin-opendesign - Versions diffs - 0.1.8 → 0.1.10 - Mend

@w3kits-com/plugin-opendesign 0.1.8 → 0.1.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1712) hide show

package/dist/__w3kits/assets/design-templates/dashboard/SKILL.md ADDED Viewed

@@ -0,0 +1,76 @@
+---
+name: dashboard
+description: |
+  Admin / analytics dashboard in a single HTML file. Fixed left sidebar,
+  top bar with user/search, main grid of KPI cards and one or two charts.
+  Use when the brief asks for a "dashboard", "admin", "analytics", or
+  "control panel" screen.
+triggers:
+  - "dashboard"
+  - "admin panel"
+  - "analytics"
+  - "control panel"
+  - "后台"
+  - "管理后台"
+od:
+  mode: prototype
+  platform: desktop
+  scenario: operations
+  preview:
+    type: html
+    entry: index.html
+  design_system:
+    requires: true
+    sections: [color, typography, layout, components]
+  craft:
+    requires: [state-coverage, accessibility-baseline, laws-of-ux]
+---
+# Dashboard Skill
+Produce a single-screen admin / analytics dashboard.
+## Workflow
+1. **Read the active DESIGN.md** (injected above). Colors, typography, spacing,
+   component styling all come from it. Do not invent new tokens.
+2. **Classify** what the dashboard monitors (sales, traffic, usage, incidents,
+   ops, etc.) from the brief. Generate specific, plausible metric names and
+   values — no "Metric A / Metric B" placeholders.
+3. **Lay out** the required regions:
+   - **Left sidebar** (220–260px): brand mark at top, 6–8 nav links with
+     icons, active state uses the DS accent.
+   - **Top bar**: page title on the left, search input + user avatar / status
+     on the right.
+   - **Main**:
+     - Row 1: 3–4 KPI cards (label + big number + delta vs. prior period).
+     - Row 2: one primary chart (full width or 2/3) — render as an inline SVG
+       line / bar / area chart drawn from real-looking numbers.
+     - Row 3: one secondary chart or table (recent events, top items, etc.).
+4. **Write** one self-contained HTML document:
+   - `<!doctype html>` through `</html>`, CSS in one inline `<style>` block.
+   - CSS Grid for the overall layout; Flexbox inside cards.
+   - Semantic HTML: `<aside>`, `<header>`, `<main>`, `<section>`.
+   - Tag each logical region with `data-od-id="slug"` for comment mode.
+5. **Charts**: inline SVG only, no JS libraries. A line chart is ~10 lines of
+   `<polyline>` with a subtle area fill. A bar chart is N `<rect>`s with
+   DS-accent fill. Label axes lightly (muted text, smaller scale).
+6. **Self-check**:
+   - Every color comes from DESIGN.md tokens.
+   - Accent used at most twice (sidebar active + one chart highlight).
+   - Sidebar + top bar are sticky; main scrolls independently.
+   - Density matches the DS mood — airy DSes get more padding, dense DSes
+     (trading, crypto) tighten rows.
+## Output contract
+Emit between `<artifact>` tags:
+```
+<artifact identifier="dashboard-slug" type="text/html" title="Dashboard Title">
+<!doctype html>
+<html>...</html>
+</artifact>
+```
+One sentence before the artifact, nothing after.

package/dist/__w3kits/assets/design-templates/dashboard/example.html ADDED Viewed

@@ -0,0 +1,118 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Pulse — analytics overview</title>
+  <style>
+    :root {
+      --bg: #fafaf9; --fg: #1c1b1a; --muted: #6b6964; --border: #e6e4e0;
+      --accent: #c96442; --surface: #ffffff; --good: #2f7d4a; --bad: #b53a2a;
+    }
+    * { box-sizing: border-box; }
+    body { margin: 0; background: var(--bg); color: var(--fg); font: 14px/1.5 -apple-system, system-ui, sans-serif; display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
+    .sidebar { background: var(--surface); border-right: 1px solid var(--border); padding: 16px; }
+    .brand { font-weight: 600; padding: 8px 10px 18px; }
+    .nav { display: flex; flex-direction: column; gap: 2px; }
+    .nav a { padding: 7px 10px; border-radius: 6px; color: var(--fg); text-decoration: none; }
+    .nav a.active { background: var(--bg); font-weight: 500; }
+    .nav a:hover { background: var(--bg); }
+    .nav .group-label { font-size: 11px; color: var(--muted); padding: 14px 10px 6px; text-transform: uppercase; letter-spacing: 0.06em; }
+    main { padding: 0 28px 56px; }
+    .topbar { padding: 16px 0; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
+    .topbar h1 { font-size: 20px; margin: 0; letter-spacing: -0.01em; }
+    .topbar .right { display: flex; align-items: center; gap: 12px; color: var(--muted); }
+    button { font: inherit; cursor: pointer; padding: 7px 13px; border-radius: 6px; }
+    .btn-primary { background: var(--accent); color: white; border: 1px solid var(--accent); }
+    .btn-secondary { background: transparent; color: var(--fg); border: 1px solid var(--border); }
+    .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; }
+    @media (max-width: 900px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
+    .kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; }
+    .kpi .label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
+    .kpi .value { font-size: 28px; letter-spacing: -0.02em; }
+    .kpi .delta { font-size: 12px; margin-top: 4px; }
+    .kpi .delta.up { color: var(--good); }
+    .kpi .delta.down { color: var(--bad); }
+    .panel { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 20px; margin-bottom: 16px; }
+    .panel h3 { margin: 0 0 16px; font-size: 14px; font-weight: 500; }
+    .chart { height: 240px; background: linear-gradient(180deg, rgba(201,100,66,0.06), transparent); border-bottom: 1px solid var(--border); position: relative; overflow: hidden; }
+    .chart svg { width: 100%; height: 100%; display: block; }
+    .panels-row { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
+    @media (max-width: 900px) { .panels-row { grid-template-columns: 1fr; } }
+    table { width: 100%; border-collapse: collapse; }
+    th, td { text-align: left; padding: 10px 6px; border-top: 1px solid var(--border); }
+    th { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; }
+    .pill { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); }
+    .pill.good { color: var(--good); border-color: rgba(47,125,74,0.3); }
+    .pill.bad { color: var(--bad); border-color: rgba(181,58,42,0.3); }
+  </style>
+</head>
+<body>
+  <aside class="sidebar" data-od-id="sidebar">
+    <div class="brand">◐ Pulse</div>
+    <nav class="nav">
+      <a href="#" class="active">Overview</a>
+      <a href="#">Funnels</a>
+      <a href="#">Cohorts</a>
+      <a href="#">Sessions</a>
+      <span class="group-label">Workspace</span>
+      <a href="#">Sources</a>
+      <a href="#">Members</a>
+      <a href="#">Billing</a>
+      <a href="#">Settings</a>
+    </nav>
+  </aside>
+  <main>
+    <div class="topbar" data-od-id="topbar">
+      <h1>Overview · April 2026</h1>
+      <div class="right">
+        <button class="btn-secondary">Last 30 days ▾</button>
+        <button class="btn-primary">+ New report</button>
+      </div>
+    </div>
+    <div class="kpis" data-od-id="kpis">
+      <div class="kpi"><div class="label">MRR</div><div class="value">$48.2K</div><div class="delta up">+12.4% MoM</div></div>
+      <div class="kpi"><div class="label">Active accounts</div><div class="value">3,184</div><div class="delta up">+204 this month</div></div>
+      <div class="kpi"><div class="label">Churn (30d)</div><div class="value">2.1%</div><div class="delta down">+0.4 pp</div></div>
+      <div class="kpi"><div class="label">P95 latency</div><div class="value">182 ms</div><div class="delta up">-23 ms</div></div>
+    </div>
+    <div class="panels-row">
+      <div class="panel" data-od-id="chart-panel">
+        <h3>Revenue · 30 days</h3>
+        <div class="chart">
+          <svg viewBox="0 0 600 240" preserveAspectRatio="none">
+            <polyline fill="none" stroke="#c96442" stroke-width="2" points="0,180 30,170 60,150 90,160 120,140 150,120 180,130 210,110 240,90 270,100 300,80 330,70 360,80 390,60 420,50 450,60 480,40 510,30 540,40 570,20 600,10" />
+          </svg>
+        </div>
+      </div>
+      <div class="panel" data-od-id="signups-panel">
+        <h3>New accounts</h3>
+        <table>
+          <thead><tr><th>Account</th><th>Plan</th><th>Status</th></tr></thead>
+          <tbody>
+            <tr><td>Linear</td><td>Team</td><td><span class="pill good">active</span></td></tr>
+            <tr><td>Cursor</td><td>Pro</td><td><span class="pill good">active</span></td></tr>
+            <tr><td>Notion</td><td>Team</td><td><span class="pill bad">trial</span></td></tr>
+            <tr><td>Vercel</td><td>Enterprise</td><td><span class="pill good">active</span></td></tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <div class="panel" data-od-id="recent-events">
+      <h3>Recent events</h3>
+      <table>
+        <thead><tr><th>Time</th><th>Account</th><th>Event</th><th>Plan</th></tr></thead>
+        <tbody>
+          <tr><td>2:14 pm</td><td>Acme Co</td><td>Upgraded to Team</td><td>Team</td></tr>
+          <tr><td>1:48 pm</td><td>Northwind</td><td>Connected GitHub</td><td>Pro</td></tr>
+          <tr><td>1:32 pm</td><td>Globex</td><td>Cancelled subscription</td><td>Solo</td></tr>
+          <tr><td>12:51 pm</td><td>Initech</td><td>New seat invited</td><td>Team</td></tr>
+        </tbody>
+      </table>
+    </div>
+  </main>
+</body>
+</html>

package/dist/__w3kits/assets/design-templates/dating-web/SKILL.md ADDED Viewed

@@ -0,0 +1,93 @@
+---
+name: dating-web
+description: |
+  A consumer-feeling dating / matchmaking dashboard — left rail navigation,
+  ticker bar of community signals, headline KPIs, a 30-day mutual-matches
+  bar chart, and a match-rate trend block. Editorial typography, restrained
+  accent. Use when the brief asks for a "dating site", "matchmaking",
+  "community dashboard", "social network dashboard", or any consumer
+  product where the data is the story.
+triggers:
+  - "dating app"
+  - "dating site"
+  - "matchmaking"
+  - "social dashboard"
+  - "community dashboard"
+  - "consumer dashboard"
+  - "约会应用"
+  - "婚恋"
+od:
+  mode: prototype
+  platform: desktop
+  scenario: personal
+  featured: 5
+  preview:
+    type: html
+    entry: index.html
+  design_system:
+    requires: true
+    sections: [color, typography, layout, components]
+  example_prompt: "Design ‘mutuals’ — a dating site for X posters. Daily digest dashboard with stats, mutual-matches bar chart, and a community ticker."
+---
+# Dating Web Skill
+Produce a single-screen consumer dashboard that feels like a Sunday-paper
+dating column rendered as software. Editorial type, single restrained
+accent, lots of negative space, *no* swipe deck or hookup tropes.
+## Workflow
+1. **Read the active DESIGN.md** (injected above). Lean into a serif display
+   token for the metric numerals — these screens live or die on numerals.
+2. **Pick a brand voice** — wry, observational, slightly literary. Generate
+   real, specific copy. Examples: "the people who'd text back within a day",
+   "manageable. two are now friends.", "your single greatest compatibility
+   asset."
+3. **Layout**, in order:
+   - **Top ticker** — single-row horizontal strip across the top in a
+     sans-serif eyebrow style: tagline left, "NEXT TIER AT 2,080 MUTUALS"
+     right, both in mono caps with letter-spacing. Thin rule below.
+   - **Left rail** — 220–260px sidebar. Brand wordmark in serif italic at
+     top. User card (avatar / handle / ratio / tier). Three groups of nav:
+     "TODAY" (specimen, inbox, queue, notifications), "YOU" (your stats,
+     mutuals & communities, blocked, settings), "ARCHIVE" (past issues,
+     expired matches). Active item gets accent text + accent dot.
+   - **Main content**:
+     - **KPI grid** — 3 columns × 3 rows (or 9 cells). Each cell: small
+       caps mono label, an oversized serif numeral (use accent or muted
+       green for positive, muted red for caution), one-line italic
+       footnote. Plausible specifics — "1,842 ↑ 41 this wk · healthy
+       growth.", "14% above median for your cohort.", "4 / exes in your
+       circle · manageable. two are now friends."
+     - **Bar chart panel** — "mutuals — last 30 days". Tall thin black
+       bars, last two days highlighted in accent. Caption above with
+       "↑ TRENDING UP · +3 CLOSE MUTUALS THIS MONTH · TWO VIA THE SAME
+       OFFSITE" in mono.
+     - **Trend panel** — "match rate — last 12 weeks". One line of body
+       copy below ("STEADY CLIMB FROM 8% → 14%. ATTRIBUTABLE TO ONE
+       COMMUNITY JOIN…"). Footer rule.
+4. **Write** a single HTML document:
+   - `<!doctype html>` through `</html>`, CSS inline.
+   - Background creamy off-white, body serif, mono labels everywhere.
+   - Use `font-feature-settings: 'tnum'` on the metric numerals.
+   - SVG bar chart with ~30 bars, varied heights.
+   - `data-od-id` on ticker, sidebar, kpi grid, chart, trend.
+5. **Self-check**:
+   - Reads as restrained, editorial, slightly funny — not horny.
+   - Single accent token used in 3–4 places max (one KPI, two highlight
+     bars, one nav active state).
+   - No swipe deck, no hearts, no fire emoji.
+## Output contract
+Emit between `<artifact>` tags:
+```
+<artifact identifier="dating-slug" type="text/html" title="Dating Dashboard — Title">
+<!doctype html>
+<html>...</html>
+</artifact>
+```
+One sentence before the artifact, nothing after.

package/dist/__w3kits/assets/design-templates/dating-web/example.html ADDED Viewed

@@ -0,0 +1,265 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>mutuals · your dating life, measured by the company you keep</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Serif+Text:ital@0;1&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet" />
+  <style>
+    :root {
+      --paper: #f4ede0;
+      --panel: #f9f3e7;
+      --ink: #1f1c14;
+      --muted: #7a7264;
+      --rule: #d6cdb6;
+      --accent: #c14a2b;
+      --good: #406b3a;
+      --bad: #b6422f;
+      --serif-display: 'DM Serif Display', 'Iowan Old Style', Georgia, serif;
+      --serif-body: 'DM Serif Text', 'Iowan Old Style', Georgia, serif;
+      --mono: 'IBM Plex Mono', ui-monospace, monospace;
+    }
+    * { box-sizing: border-box; }
+    body { margin: 0; background: var(--paper); color: var(--ink); font: 14px/1.55 var(--serif-body); }
+    .ticker {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 14px 28px;
+      border-bottom: 1px solid var(--ink);
+      font: 11px/1 var(--mono);
+      color: var(--muted);
+      letter-spacing: 0.18em;
+      text-transform: uppercase;
+    }
+    .ticker .left { display: flex; align-items: center; gap: 18px; }
+    .ticker b { color: var(--ink); font-weight: 500; }
+    .layout { display: grid; grid-template-columns: 232px 1fr; min-height: calc(100vh - 44px); }
+    aside.rail {
+      border-right: 1px solid var(--ink);
+      padding: 22px 22px 22px 28px;
+      display: flex; flex-direction: column; gap: 22px;
+    }
+    aside .brand { font: italic 800 30px/1 var(--serif-display); letter-spacing: -0.005em; }
+    aside .brand .dot { color: var(--accent); }
+    aside .user { display: flex; align-items: center; gap: 10px; }
+    aside .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font: 700 12px/1 var(--mono); letter-spacing: 0.06em; }
+    aside .user .meta { font: 13px/1.2 var(--mono); }
+    aside .user .meta b { display: block; color: var(--ink); font-weight: 500; }
+    aside .user .meta span { color: var(--muted); font-size: 11px; letter-spacing: 0.06em; }
+    aside h4 { font: 11px/1 var(--mono); color: var(--muted); letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 10px; }
+    aside ul { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 4px; }
+    aside li { display: flex; justify-content: space-between; align-items: center; padding: 5px 8px; border-radius: 4px; font: 15.5px/1.2 var(--serif-body); color: var(--ink); cursor: default; }
+    aside li.active { background: rgba(193,74,43,0.10); color: var(--accent); font-weight: 600; }
+    aside li.active::before { content: '●'; color: var(--accent); margin-right: 6px; font-size: 9px; }
+    aside li .badge { background: var(--accent); color: var(--paper); font: 10px/1 var(--mono); padding: 3px 6px; border-radius: 999px; letter-spacing: 0.06em; }
+    aside li .badge.gray { background: var(--ink); }
+    aside .status {
+      margin-top: auto;
+      padding-top: 18px;
+      border-top: 1px solid var(--rule);
+      font: 11px/1.4 var(--mono);
+      color: var(--muted);
+      letter-spacing: 0.06em;
+    }
+    aside .status .live::before { content: '●'; color: #2f7d4a; margin-right: 6px; }
+    main { padding: 30px 36px 44px; }
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      grid-auto-rows: minmax(120px, auto);
+      gap: 22px 36px;
+      margin-bottom: 36px;
+    }
+    .stat { padding: 4px 0 14px; border-bottom: 1px solid var(--rule); }
+    .stat .label { font: 11px/1.4 var(--mono); color: var(--muted); letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 6px; }
+    .stat .value {
+      font: 800 56px/1.05 var(--serif-display);
+      letter-spacing: -0.01em;
+      font-feature-settings: 'tnum';
+      margin-bottom: 6px;
+    }
+    .stat .value.good { color: var(--good); }
+    .stat .value.bad { color: var(--bad); }
+    .stat .value em { font-style: italic; font-weight: 400; }
+    .stat .note { font: italic 13.5px/1.4 var(--serif-body); color: var(--muted); max-width: 32ch; }
+    .stat .arrow { font-style: normal; color: var(--good); font-size: 14px; }
+    .panel { padding: 18px 0 24px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); margin-bottom: 18px; }
+    .panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 14px; }
+    .panel-head h3 { margin: 0; font: italic 24px/1 var(--serif-display); letter-spacing: -0.005em; }
+    .panel-head .meta { font: 11px/1.4 var(--mono); color: var(--muted); letter-spacing: 0.16em; text-transform: uppercase; max-width: 56ch; text-align: right; }
+    .panel svg { width: 100%; height: 220px; display: block; }
+    .panel .axis { display: flex; justify-content: space-between; font: 10px/1 var(--mono); color: var(--muted); letter-spacing: 0.1em; padding: 8px 4px 0; text-transform: uppercase; }
+    .lower-panel .lede { font: italic 15px/1.55 var(--serif-body); color: var(--muted); margin: 0; max-width: 70ch; }
+    .lower-panel .lede b { color: var(--ink); font-style: normal; font-weight: 600; }
+    @media (max-width: 1100px) {
+      .layout { grid-template-columns: 1fr; }
+      aside.rail { border-right: none; border-bottom: 1px solid var(--ink); }
+      .grid { grid-template-columns: repeat(2, 1fr); gap: 18px 28px; }
+    }
+  </style>
+</head>
+<body>
+  <div class="ticker" data-od-id="ticker">
+    <div class="left">
+      <span>YOUR DATING LIFE, MEASURED BY THE COMPANY YOU KEEP</span>
+      <span style="opacity:0.6;">·</span>
+      <span>REVIEWED WEEKLY</span>
+    </div>
+    <div>NEXT TIER AT <b>2,080 MUTUALS</b></div>
+  </div>
+  <div class="layout">
+    <aside class="rail" data-od-id="rail">
+      <div class="brand">mutuals<span class="dot">.</span></div>
+      <div class="user">
+        <div class="avatar">si</div>
+        <div class="meta"><b>@signals</b><span>RATIO 22.9 · TIER III</span></div>
+      </div>
+      <div>
+        <h4>Today</h4>
+        <ul>
+          <li>specimen <span class="badge">3</span></li>
+          <li>inbox <span class="badge">3</span></li>
+          <li>queue <span style="font:11px/1 var(--mono);color:var(--muted);">6</span></li>
+          <li>notifications <span class="badge gray">12</span></li>
+        </ul>
+      </div>
+      <div>
+        <h4>You</h4>
+        <ul>
+          <li class="active">your stats</li>
+          <li>mutuals &amp; communities</li>
+          <li>blocked <span style="font:11px/1 var(--mono);color:var(--muted);">14</span></li>
+          <li>settings</li>
+        </ul>
+      </div>
+      <div>
+        <h4>Archive</h4>
+        <ul>
+          <li>past issues</li>
+          <li>expired matches <span style="font:11px/1 var(--mono);color:var(--muted);">7</span></li>
+        </ul>
+      </div>
+      <div class="status">
+        <div class="live">online · last match 11m ago</div>
+        <div style="opacity:0.7;margin-top:2px;">mutuals.v0.6.1</div>
+      </div>
+    </aside>
+    <main data-od-id="main">
+      <section class="grid" data-od-id="kpis">
+        <div class="stat">
+          <div class="label">Mutuals on file</div>
+          <div class="value"><em>1,842</em></div>
+          <p class="note"><span class="arrow">↑</span> 41 this wk · healthy growth.</p>
+        </div>
+        <div class="stat">
+          <div class="label">Replies in 24h</div>
+          <div class="value good">47</div>
+          <p class="note">the people who'd text back within a day.</p>
+        </div>
+        <div class="stat">
+          <div class="label">Communities</div>
+          <div class="value"><em>14</em></div>
+          <p class="note">4 active · 7 lurking · 3 inferred.</p>
+        </div>
+        <div class="stat">
+          <div class="label">Match rate</div>
+          <div class="value good">14%</div>
+          <p class="note">above median for your cohort.</p>
+        </div>
+        <div class="stat">
+          <div class="label">2nd dates</div>
+          <div class="value"><em>3</em></div>
+          <p class="note">of 7 first dates this year. you commit.</p>
+        </div>
+        <div class="stat">
+          <div class="label">Exes in your circle</div>
+          <div class="value bad">4</div>
+          <p class="note">manageable. two are now friends.</p>
+        </div>
+        <div class="stat">
+          <div class="label">Shared blocks</div>
+          <div class="value"><em>214</em></div>
+          <p class="note">your single greatest compatibility asset.</p>
+        </div>
+        <div class="stat">
+          <div class="label">Avg response</div>
+          <div class="value"><em>2.1<span style="font-size:32px;">h</span></em></div>
+          <p class="note">too fast. wait 4–6h. they notice.</p>
+        </div>
+        <div class="stat">
+          <div class="label">Logged-off hrs</div>
+          <div class="value bad">4</div>
+          <p class="note">/ 168 this wk. we beg.</p>
+        </div>
+      </section>
+      <section class="panel" data-od-id="bars">
+        <div class="panel-head">
+          <h3>mutuals — <em>last 30 days</em></h3>
+          <div class="meta">↑ TRENDING UP · +3 CLOSE MUTUALS THIS MONTH · TWO VIA THE SAME OFFSITE</div>
+        </div>
+        <svg viewBox="0 0 720 220" preserveAspectRatio="none" aria-hidden="true">
+          <g fill="#1f1c14">
+            <rect x="6"   y="170" width="14" height="50"></rect>
+            <rect x="30"  y="158" width="14" height="62"></rect>
+            <rect x="54"  y="146" width="14" height="74"></rect>
+            <rect x="78"  y="172" width="14" height="48"></rect>
+            <rect x="102" y="162" width="14" height="58"></rect>
+            <rect x="126" y="138" width="14" height="82"></rect>
+            <rect x="150" y="120" width="14" height="100"></rect>
+            <rect x="174" y="148" width="14" height="72"></rect>
+            <rect x="198" y="132" width="14" height="88"></rect>
+            <rect x="222" y="108" width="14" height="112"></rect>
+            <rect x="246" y="118" width="14" height="102"></rect>
+            <rect x="270" y="154" width="14" height="66"></rect>
+            <rect x="294" y="130" width="14" height="90"></rect>
+            <rect x="318" y="100" width="14" height="120"></rect>
+            <rect x="342" y="86"  width="14" height="134"></rect>
+            <rect x="366" y="116" width="14" height="104"></rect>
+            <rect x="390" y="138" width="14" height="82"></rect>
+            <rect x="414" y="92"  width="14" height="128"></rect>
+            <rect x="438" y="74"  width="14" height="146"></rect>
+            <rect x="462" y="106" width="14" height="114"></rect>
+            <rect x="486" y="84"  width="14" height="136"></rect>
+            <rect x="510" y="124" width="14" height="96"></rect>
+            <rect x="534" y="98"  width="14" height="122"></rect>
+            <rect x="558" y="68"  width="14" height="152"></rect>
+            <rect x="582" y="80"  width="14" height="140"></rect>
+            <rect x="606" y="46"  width="14" height="174" fill="#c14a2b"></rect>
+            <rect x="630" y="60"  width="14" height="160" fill="#c14a2b"></rect>
+            <rect x="654" y="92"  width="14" height="128"></rect>
+            <rect x="678" y="76"  width="14" height="144"></rect>
+            <rect x="702" y="90"  width="14" height="130"></rect>
+          </g>
+        </svg>
+        <div class="axis"><span>MAR 18</span><span>MAR 25</span><span>APR 1</span><span>APR 8</span><span>APR 15</span><span>TODAY</span></div>
+      </section>
+      <section class="panel lower-panel" data-od-id="trend">
+        <div class="panel-head">
+          <h3>match rate — <em>last 12 weeks</em></h3>
+          <div class="meta">STEADY CLIMB FROM 8% → 14%. ATTRIBUTABLE TO ONE COMMUNITY JOIN (FOUNDERS WHO POST, WK 4).</div>
+        </div>
+        <p class="lede">A real climb, not a vibe. <b>One community join</b> moved your match rate more than four months of profile edits — keep posting from that circle, ship more, tweet less.</p>
+      </section>
+    </main>
+  </div>
+</body>
+</html>