npm - @1agh/maude - Versions diffs - 0.15.0 - Mend

@1agh/maude 0.15.0

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 (211) hide show

package/plugins/design/templates/design-system-inspiration/audience-consumer/components-testimonial.html ADDED Viewed

@@ -0,0 +1,80 @@
+<!--
+SPECIMEN: audience-consumer-testimonial
+DEMONSTRATES: quote typography, attribution shape (name + role + photo placeholder), pull-quote vs in-flow variants
+COMPOSITION: pull-quote (large) + grid of 3 in-flow testimonials + featured testimonial with rating
+COPY VOICE: specific, in-the-user's-words (no marketing-paraphrased praise)
+WHEN SCAFFOLDED: audience-consumer
+NOTES: Real testimonial copy beats invented ones — placeholder text here is a sentence the actual user said. Use --type-lg for pull-quote, --type-base for in-flow, --type-md for featured.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Audience — consumer testimonial</title>
+  <link rel="stylesheet" href="../core/colors_and_type.css" />
+  <link rel="stylesheet" href="../core/preview/_layout.css" />
+  <style>
+    .tcard { background: var(--bg-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 20px; display: grid; gap: 12px; }
+    .tcard .quote { color: var(--fg-0); margin: 0; }
+    .attr { display: flex; align-items: center; gap: 10px; }
+    .attr .avatar { width: 36px; height: 36px; background: var(--bg-3); border-radius: 50%; }
+    .attr .meta { font-size: var(--type-sm); }
+    .attr .name { color: var(--fg-0); font-weight: 500; }
+    .attr .role { color: var(--fg-2); font-size: var(--type-xs); }
+    .stars { color: var(--status-warn); letter-spacing: 2px; font-size: var(--type-sm); }
+  </style>
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Testimonials</h1>
+    <p class="lede">Use real quotes from real users. Specific outcomes ("cut my prep time by half on match days") beat generic praise ("amazing app!"). Three densities for three placements: pull-quote, in-flow grid, featured.</p>
+    <h2>Pull-quote</h2>
+    <figure style="border-left: 3px solid var(--accent); padding: 8px 20px; margin: 0;">
+      <blockquote class="quote" style="font-family: var(--font-display); font-size: var(--type-2xl); line-height: var(--lh-2xl); margin: 0;">"It's the first sideline tool that doesn't make me look at my phone during the match."</blockquote>
+      <figcaption class="attr" style="margin-top: 12px;">
+        <div class="avatar"></div>
+        <div class="meta">
+          <div class="name">Sam Park</div>
+          <div class="role">Coach, FC Riverside U17</div>
+        </div>
+      </figcaption>
+    </figure>
+    <h2>In-flow grid</h2>
+    <div class="grid" style="grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));">
+      <div class="tcard">
+        <p class="quote" style="font-size: var(--type-base);">"Cut my match prep time by half. Captain gets the brief on the way to the bus."</p>
+        <div class="attr">
+          <div class="avatar"></div>
+          <div class="meta"><div class="name">Marta Silva</div><div class="role">Assistant coach</div></div>
+        </div>
+      </div>
+      <div class="tcard">
+        <p class="quote" style="font-size: var(--type-base);">"The roster sync killed a Monday morning admin loop I'd been doing for three years."</p>
+        <div class="attr">
+          <div class="avatar"></div>
+          <div class="meta"><div class="name">Jonas Weber</div><div class="role">Club secretary</div></div>
+        </div>
+      </div>
+      <div class="tcard">
+        <p class="quote" style="font-size: var(--type-base);">"Match recap export goes straight into the club WhatsApp. Parents stopped asking 'what happened?'"</p>
+        <div class="attr">
+          <div class="avatar"></div>
+          <div class="meta"><div class="name">Liam Chen</div><div class="role">Team manager</div></div>
+        </div>
+      </div>
+    </div>
+    <h2>Featured (with rating)</h2>
+    <div class="tcard" style="max-width: 480px; border-color: var(--border-default);">
+      <div class="stars">★★★★★</div>
+      <p class="quote" style="font-size: var(--type-md); line-height: var(--lh-md);">"I've tried four club apps. This is the first one that the parents and the players actually open. The match recap with the shareable card is the killer feature."</p>
+      <div class="attr">
+        <div class="avatar"></div>
+        <div class="meta"><div class="name">Sara Novak</div><div class="role">Club president, Sparta U15</div></div>
+      </div>
+    </div>
+  </main>
+</body>
+</html>

package/plugins/design/templates/design-system-inspiration/audience-developer/components-code-block.html ADDED Viewed

@@ -0,0 +1,71 @@
+<!--
+SPECIMEN: audience-developer-code-block
+DEMONSTRATES: code block with syntax-color stub (using token palette), language label, copy button, line numbers (optional)
+COMPOSITION: 3 code blocks — bash (no syntax), js (with token-colored keywords), JSON (key/value coloring); each with header + copy
+COPY VOICE: real code, real package names, real file paths
+WHEN SCAFFOLDED: audience-developer
+NOTES: Syntax highlighting uses the token palette — --status-info (blue) for keywords, --accent (project color) for strings, --status-success (green) for numbers, --fg-2 (muted) for comments. Don't pull in a separate syntax-color palette — reuse what the system has.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Audience — developer code block</title>
+  <link rel="stylesheet" href="../core/colors_and_type.css" />
+  <link rel="stylesheet" href="../core/preview/_layout.css" />
+  <style>
+    .code-block { background: var(--bg-0); border: 1px solid var(--border-default); border-radius: var(--radius-md); margin: 0 0 16px; max-width: 720px; overflow: hidden; }
+    .code-header { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; background: var(--bg-2); border-bottom: 1px solid var(--border-default); font-family: var(--font-mono); font-size: var(--type-xs); color: var(--fg-2); }
+    .code-header button { background: transparent; border: 0; color: var(--fg-1); font: inherit; font-size: var(--type-xs); padding: 2px 8px; border-radius: var(--radius-xs); cursor: pointer; }
+    .code-header button:hover { background: var(--bg-3); color: var(--fg-0); }
+    pre { margin: 0; padding: 12px 14px; font-family: var(--font-mono); font-size: 12px; line-height: 1.6; color: var(--fg-0); overflow-x: auto; }
+    .kw  { color: var(--status-info); }
+    .str { color: var(--accent); }
+    .num { color: var(--status-success); }
+    .cmt { color: var(--fg-2); }
+    .fn  { color: var(--status-warn); }
+  </style>
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Code blocks</h1>
+    <p class="lede">Code blocks reuse the status palette for syntax tokens — blue for keywords, accent for strings, green for numbers, muted for comments. No separate theme.</p>
+    <div class="code-block">
+      <div class="code-header"><span>bash</span><button>copy</button></div>
+      <pre><span class="cmt"># Install + scaffold</span>
+npm i -g @1agh/maude
+maude design init --no-discovery --name acme
+cd acme &amp;&amp; claude
+<span class="cmt"># Inside Claude Code:</span>
+<span class="cmt">#   /design:setup-ds project "team scouting tool"</span></pre>
+    </div>
+    <div class="code-block">
+      <div class="code-header"><span>typescript</span><button>copy</button></div>
+      <pre><span class="kw">import</span> { copyTree } <span class="kw">from</span> <span class="str">'../lib/copy-tree.mjs'</span>;
+<span class="kw">async function</span> <span class="fn">runInit</span>({ args, pkgRoot }) {
+  <span class="kw">const</span> { flags } = <span class="fn">parseArgs</span>(args, {
+    booleans: [<span class="str">'force'</span>, <span class="str">'dry-run'</span>, <span class="str">'no-discovery'</span>],
+  });
+  <span class="kw">if</span> (!flags[<span class="str">'no-discovery'</span>]) <span class="kw">return</span> <span class="fn">refuseInteractive</span>();
+  <span class="kw">return</span> <span class="fn">scaffoldCore</span>({ designDir, dsName, payload });
+}</pre>
+    </div>
+    <div class="code-block">
+      <div class="code-header"><span>json</span><button>copy</button></div>
+      <pre>{
+  <span class="str">"name"</span>: <span class="str">"acme"</span>,
+  <span class="str">"version"</span>: <span class="str">"0.8.0"</span>,
+  <span class="str">"completenessProfile"</span>: <span class="str">"standard"</span>,
+  <span class="str">"activeFamilies"</span>: [<span class="str">"accent"</span>, <span class="str">"status"</span>],
+  <span class="str">"designSystems"</span>: [
+    { <span class="str">"name"</span>: <span class="str">"project"</span>, <span class="str">"path"</span>: <span class="str">"system/project"</span> }
+  ]
+}</pre>
+    </div>
+  </main>
+</body>
+</html>

package/plugins/design/templates/design-system-inspiration/audience-developer/components-diff-view.html ADDED Viewed

@@ -0,0 +1,65 @@
+<!--
+SPECIMEN: audience-developer-diff-view
+DEMONSTRATES: side-by-side + unified diff, +/- gutter, line numbers, syntax-tinted lines
+COMPOSITION: unified diff showing 6 lines of context + 2 removed + 3 added, plus a side-by-side variant header
+COPY VOICE: real code diff (JS/TS), real file paths
+WHEN SCAFFOLDED: audience-developer
+NOTES: Use opacity-modulated --status-success (added) and --status-error (removed) — never fully saturated. Tabular nums on line numbers. Don't word-wrap; horizontal scroll if needed.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Audience — developer diff view</title>
+  <link rel="stylesheet" href="../core/colors_and_type.css" />
+  <link rel="stylesheet" href="../core/preview/_layout.css" />
+  <style>
+    .diff { background: var(--bg-0); border: 1px solid var(--border-default); border-radius: var(--radius-md); font-family: var(--font-mono); font-size: 12px; line-height: 1.6; max-width: 760px; overflow-x: auto; }
+    .diff-header { padding: 8px 12px; border-bottom: 1px solid var(--border-default); background: var(--bg-2); display: flex; justify-content: space-between; }
+    .diff-header strong { color: var(--fg-0); }
+    .diff-line { display: grid; grid-template-columns: 36px 36px 14px 1fr; gap: 0; padding: 0 12px; align-items: center; }
+    .diff-line .ln { color: var(--fg-3); font-variant-numeric: tabular-nums; text-align: right; padding-right: 6px; }
+    .diff-line .sign { width: 14px; text-align: center; }
+    .diff-line code { color: inherit; }
+    .diff-line.is-add { background: oklch(from var(--status-success) l c h / 0.10); }
+    .diff-line.is-add .sign { color: var(--status-success); }
+    .diff-line.is-rem { background: oklch(from var(--status-error) l c h / 0.10); }
+    .diff-line.is-rem .sign { color: var(--status-error); }
+  </style>
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Diff view</h1>
+    <p class="lede">Unified view by default — denser, easier to read in PR contexts. Side-by-side is reserved for paired comparison (theme variants, before / after of a rename).</p>
+    <h2>Unified</h2>
+    <div class="diff">
+      <div class="diff-header">
+        <strong>cli/commands/design.mjs</strong>
+        <span style="color: var(--fg-2);">+3 −2</span>
+      </div>
+      <div class="diff-line"><span class="ln">42</span><span class="ln">42</span><span class="sign"> </span><code>  if (sub === 'serve') {</code></div>
+      <div class="diff-line"><span class="ln">43</span><span class="ln">43</span><span class="sign"> </span><code>    return runServe({ args, pkgRoot });</code></div>
+      <div class="diff-line"><span class="ln">44</span><span class="ln">44</span><span class="sign"> </span><code>  }</code></div>
+      <div class="diff-line is-rem"><span class="ln">45</span><span class="ln"></span><span class="sign">-</span><code>  // TODO: init subcommand</code></div>
+      <div class="diff-line is-rem"><span class="ln">46</span><span class="ln"></span><span class="sign">-</span><code>  return null;</code></div>
+      <div class="diff-line is-add"><span class="ln"></span><span class="ln">45</span><span class="sign">+</span><code>  if (sub === 'init') {</code></div>
+      <div class="diff-line is-add"><span class="ln"></span><span class="ln">46</span><span class="sign">+</span><code>    return runInit({ args, pkgRoot });</code></div>
+      <div class="diff-line is-add"><span class="ln"></span><span class="ln">47</span><span class="sign">+</span><code>  }</code></div>
+      <div class="diff-line"><span class="ln">47</span><span class="ln">48</span><span class="sign"> </span><code>}</code></div>
+    </div>
+    <h2>Side-by-side header (paired)</h2>
+    <div class="diff" style="display: grid; grid-template-columns: 1fr 1fr;">
+      <div class="diff-header" style="border-right: 1px solid var(--border-default);">
+        <strong>system/project/colors_and_type.css <span style="color: var(--fg-2);">(before)</span></strong>
+      </div>
+      <div class="diff-header">
+        <strong>system/marketing/colors_and_type.css <span style="color: var(--fg-2);">(after)</span></strong>
+      </div>
+      <div class="diff-line is-rem" style="border-right: 1px solid var(--border-default);"><span class="ln">12</span><span class="ln"></span><span class="sign">-</span><code>--accent: oklch(64% 0.18 264);</code></div>
+      <div class="diff-line is-add"><span class="ln"></span><span class="ln">12</span><span class="sign">+</span><code>--accent: oklch(68% 0.22 25);</code></div>
+    </div>
+  </main>
+</body>
+</html>

package/plugins/design/templates/design-system-inspiration/audience-developer/components-log-stream.html ADDED Viewed

@@ -0,0 +1,62 @@
+<!--
+SPECIMEN: audience-developer-log-stream
+DEMONSTRATES: dense log rows with timestamp + level pill + payload, filter UI, sticky bottom (live tail)
+COMPOSITION: log viewer with 8 rows mixing levels (DEBUG / INFO / WARN / ERROR), filter chips, auto-scroll indicator
+COPY VOICE: real log messages with structured fields ([http] GET /api/x 200 12ms), no Lorem
+WHEN SCAFFOLDED: audience-developer
+NOTES: Timestamps in --font-mono with tabular nums for alignment. Levels are tiny pills (not full badges). Payload uses copyable inline code styling.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Audience — developer log stream</title>
+  <link rel="stylesheet" href="../core/colors_and_type.css" />
+  <link rel="stylesheet" href="../core/preview/_layout.css" />
+  <style>
+    .logs { background: var(--bg-0); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 12px; font-family: var(--font-mono); font-size: 12px; line-height: 1.6; max-width: 760px; max-height: 320px; overflow-y: auto; }
+    .log-row { display: grid; grid-template-columns: 92px 64px 1fr; gap: 12px; align-items: center; }
+    .log-row.is-hl { background: oklch(from var(--accent) l c h / 0.08); }
+    .ts { color: var(--fg-2); font-variant-numeric: tabular-nums; }
+    .lvl { display: inline-block; padding: 0 6px; border-radius: var(--radius-xs); font-size: 10px; text-align: center; line-height: 14px; }
+    .lvl.debug { background: var(--bg-3); color: var(--fg-2); }
+    .lvl.info  { background: oklch(from var(--status-info) l c h / 0.2); color: var(--status-info); }
+    .lvl.warn  { background: oklch(from var(--status-warn) l c h / 0.2); color: var(--status-warn); }
+    .lvl.error { background: oklch(from var(--status-error) l c h / 0.2); color: var(--status-error); }
+    .filter-row { display: flex; gap: 6px; margin: 0 0 12px; flex-wrap: wrap; }
+    .chip { background: var(--bg-3); border: 1px solid var(--border-default); padding: 3px 10px; border-radius: var(--radius-pill); font-size: var(--type-xs); cursor: pointer; }
+    .chip.is-active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
+  </style>
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Log stream</h1>
+    <p class="lede">Dense, monospaced, color-coded by level. Tail-mode auto-scrolls to the bottom; clicking a row pauses auto-scroll. Filters narrow by level / service / search.</p>
+    <h2>Filters</h2>
+    <div class="filter-row">
+      <span class="chip is-active">All</span>
+      <span class="chip">debug</span>
+      <span class="chip is-active">info</span>
+      <span class="chip is-active">warn</span>
+      <span class="chip is-active">error</span>
+      <span class="chip">[http]</span>
+      <span class="chip">[sync]</span>
+    </div>
+    <h2>Stream (live tail)</h2>
+    <div class="logs">
+      <div class="log-row"><span class="ts">12:14:02.103</span><span class="lvl info">INFO</span><span>[http] GET /api/roster 200 12ms</span></div>
+      <div class="log-row"><span class="ts">12:14:02.241</span><span class="lvl info">INFO</span><span>[sync] pulled 24 players for season 2026</span></div>
+      <div class="log-row"><span class="ts">12:14:02.388</span><span class="lvl debug">DBUG</span><span>[cache] hit ratio 0.82 (last 1m)</span></div>
+      <div class="log-row"><span class="ts">12:14:03.022</span><span class="lvl warn">WARN</span><span>[sync] retry attempt 2 for league_api.fetch_fixtures()</span></div>
+      <div class="log-row is-hl"><span class="ts">12:14:03.512</span><span class="lvl error">ERR</span><span>[sync] league_api timeout after 30000ms (will retry in 30s)</span></div>
+      <div class="log-row"><span class="ts">12:14:04.107</span><span class="lvl info">INFO</span><span>[http] POST /api/match 201 47ms (match_id=8421)</span></div>
+      <div class="log-row"><span class="ts">12:14:04.215</span><span class="lvl info">INFO</span><span>[ws] client subscribed: roster.8421</span></div>
+      <div class="log-row"><span class="ts">12:14:04.832</span><span class="lvl debug">DBUG</span><span>[render] canvas frame 14 (16.4ms)</span></div>
+    </div>
+    <p style="color: var(--fg-2); font-size: var(--type-xs); margin-top: 8px;">Live · 8 visible · paused on hover</p>
+  </main>
+</body>
+</html>

package/plugins/design/templates/design-system-inspiration/audience-developer/components-monospace-table.html ADDED Viewed

@@ -0,0 +1,57 @@
+<!--
+SPECIMEN: audience-developer-monospace-table
+DEMONSTRATES: tabular-nums alignment, monospace mixed with proportional, status pills inline with data
+COMPOSITION: process table (PID / cmd / mem / cpu) — 8 rows, monospaced numbers, color-coded by status
+COPY VOICE: real process names, real numbers
+WHEN SCAFFOLDED: audience-developer
+NOTES: Use --font-mono ONLY for numeric / id / hash columns. Text columns stay --font-body for readability. font-variant-numeric: tabular-nums is mandatory on numeric columns.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Audience — developer monospace table</title>
+  <link rel="stylesheet" href="../core/colors_and_type.css" />
+  <link rel="stylesheet" href="../core/preview/_layout.css" />
+  <style>
+    .ptable { width: 100%; max-width: 720px; background: var(--bg-1); border: 1px solid var(--border-default); border-radius: var(--radius-md); border-collapse: collapse; overflow: hidden; font-size: var(--type-sm); }
+    .ptable th, .ptable td { padding: 6px 12px; border-bottom: 1px solid var(--border-subtle); text-align: left; }
+    .ptable th { background: var(--bg-2); color: var(--fg-1); font-weight: 500; font-size: var(--type-xs); text-transform: uppercase; letter-spacing: 0.04em; }
+    .ptable tr:last-child td { border-bottom: 0; }
+    .ptable tr:hover td { background: var(--bg-3); }
+    .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+    .num  { text-align: right; }
+    .ok   { color: var(--status-success); }
+    .high { color: var(--status-warn); }
+  </style>
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Monospace data table</h1>
+    <p class="lede">Numeric columns use <code>--font-mono</code> + <code>font-variant-numeric: tabular-nums</code> for column alignment. Text columns stay in the body font for legibility — never make a whole table monospace.</p>
+    <table class="ptable">
+      <thead>
+        <tr>
+          <th class="mono num">PID</th>
+          <th>Command</th>
+          <th class="mono num">RSS</th>
+          <th class="mono num">CPU%</th>
+          <th>Status</th>
+          <th>Uptime</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr><td class="mono num">12382</td><td>node server.mjs</td><td class="mono num">142.0M</td><td class="mono num ok">2.4</td><td><span class="ok">running</span></td><td class="mono">2h 14m</td></tr>
+        <tr><td class="mono num">12390</td><td>postgres</td><td class="mono num">512.8M</td><td class="mono num ok">0.8</td><td><span class="ok">running</span></td><td class="mono">14d</td></tr>
+        <tr><td class="mono num">12421</td><td>redis-server</td><td class="mono num">28.4M</td><td class="mono num ok">0.1</td><td><span class="ok">running</span></td><td class="mono">14d</td></tr>
+        <tr><td class="mono num">12502</td><td>nginx worker</td><td class="mono num">16.2M</td><td class="mono num ok">0.0</td><td><span class="ok">running</span></td><td class="mono">7d</td></tr>
+        <tr><td class="mono num">14224</td><td>scenario-runner</td><td class="mono num">1.4G</td><td class="mono num high">68.2</td><td><span class="high">busy</span></td><td class="mono">3m 12s</td></tr>
+        <tr><td class="mono num">14502</td><td>esbuild watch</td><td class="mono num">82.0M</td><td class="mono num ok">0.4</td><td><span class="ok">idle</span></td><td class="mono">42m</td></tr>
+        <tr><td class="mono num">14820</td><td>agent-browser</td><td class="mono num">256.2M</td><td class="mono num ok">1.2</td><td><span class="ok">running</span></td><td class="mono">8m</td></tr>
+        <tr><td class="mono num">15014</td><td>fumadocs-mdx</td><td class="mono num">48.8M</td><td class="mono num ok">0.0</td><td><span class="ok">idle</span></td><td class="mono">12s</td></tr>
+      </tbody>
+    </table>
+  </main>
+</body>
+</html>

package/plugins/design/templates/design-system-inspiration/audience-developer/components-terminal-pane.html ADDED Viewed

@@ -0,0 +1,67 @@
+<!--
+SPECIMEN: audience-developer-terminal-pane
+DEMONSTRATES: monospace stack, ANSI-style color tokens, prompt char ($/>), output line types
+COMPOSITION: terminal pane with bash prompt + command + multi-line output + cursor + scrollback
+COPY VOICE: real shell commands, real output (no fake $ ls Desktop)
+WHEN SCAFFOLDED: audience-developer
+NOTES: Uses --font-mono throughout. Foreground colors map to status semantics (--status-success for ✓, --status-error for ✗). Cursor blinks via opacity (respect prefers-reduced-motion).
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Audience — developer terminal pane</title>
+  <link rel="stylesheet" href="../core/colors_and_type.css" />
+  <link rel="stylesheet" href="../core/preview/_layout.css" />
+  <style>
+    .terminal { background: var(--bg-0); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 16px; font-family: var(--font-mono); font-size: 13px; line-height: 1.5; color: var(--fg-0); max-width: 720px; overflow-x: auto; }
+    .terminal .prompt { color: var(--accent); }
+    .terminal .path   { color: var(--status-info); }
+    .terminal .ok     { color: var(--status-success); }
+    .terminal .err    { color: var(--status-error); }
+    .terminal .meta   { color: var(--fg-2); }
+    .terminal .cursor { display: inline-block; width: 7px; height: 14px; background: var(--fg-0); vertical-align: text-bottom; animation: blink 1s steps(2, end) infinite; }
+    @keyframes blink { 50% { opacity: 0; } }
+    @media (prefers-reduced-motion: reduce) { .terminal .cursor { animation: none; } }
+  </style>
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Terminal pane</h1>
+    <p class="lede">Monospace stack, ANSI-mapped status colors, blinking cursor (motion-respect). Foreground roles use the status palette so terminals stay readable across themes.</p>
+    <div class="terminal">
+      <div><span class="path">~/code/maude</span> <span class="prompt">$</span> maude design init --no-discovery --name acme</div>
+      <div>  project name: acme</div>
+      <div>  ds name:      project</div>
+      <div>  scaffold target: /private/tmp/acme/.design</div>
+      <div>  mode: --no-discovery (Recommended defaults, Core only)</div>
+      <div>&nbsp;</div>
+      <div>  <span class="ok">✓</span> 16 created</div>
+      <div>&nbsp;</div>
+      <div><span class="meta">Next steps:</span></div>
+      <div>  This is the Core-only scaffold (~10 files) using Recommended defaults.</div>
+      <div>  For audience-specific specimens, use Claude Code:</div>
+      <div>    cd /private/tmp/acme &amp;&amp; claude</div>
+      <div>    /design:setup-ds project "&lt;one-line product brief&gt;"</div>
+      <div>&nbsp;</div>
+      <div><span class="path">~/code/maude</span> <span class="prompt">$</span> ls .design/system/project/preview/ | wc -l</div>
+      <div>      10</div>
+      <div><span class="path">~/code/maude</span> <span class="prompt">$</span> <span class="cursor"></span></div>
+    </div>
+    <h2>Error state</h2>
+    <div class="terminal">
+      <div><span class="path">~/code/maude</span> <span class="prompt">$</span> maude design init</div>
+      <div class="err">maude design init: interactive bootstrap requires Claude Code.</div>
+      <div>&nbsp;</div>
+      <div>  Inside Claude Code:</div>
+      <div>    /design:setup-ds &lt;name&gt;           — full discovery + scaffold (recommended)</div>
+      <div>    /design:init                      — just prepare the env (no DS yet)</div>
+      <div>&nbsp;</div>
+      <div><span class="path">~/code/maude</span> <span class="prompt">$</span> echo $?</div>
+      <div>2</div>
+    </div>
+  </main>
+</body>
+</html>

package/plugins/design/templates/design-system-inspiration/audience-developer/type-mono.html ADDED Viewed

@@ -0,0 +1,57 @@
+<!--
+SPECIMEN: audience-developer-type-mono
+DEMONSTRATES: --font-mono usage roles — code blocks, IDs, hashes, timestamps, kbd, inline code
+COMPOSITION: 6 mono-typography roles each with a real-world example
+COPY VOICE: real strings (hashes, timestamps, IDs)
+WHEN SCAFFOLDED: audience-developer (mono family — promoted from foundations when developer-flavored). Also when "mono" ∈ activeFamilies (Q7 chose mono pairing).
+NOTES: Mono should NEVER carry body copy — it's role-typed for things that look like data. Use --font-mono at smaller sizes (12-13px) than --font-body (14px) because monospace reads denser.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Type — mono</title>
+  <link rel="stylesheet" href="../core/colors_and_type.css" />
+  <link rel="stylesheet" href="../core/preview/_layout.css" />
+  <style>
+    .mono { font-family: var(--font-mono); }
+    kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; background: var(--bg-3); border: 1px solid var(--border-default); border-radius: var(--radius-xs); font-family: var(--font-mono); font-size: 10px; }
+    code { background: var(--bg-3); padding: 1px 5px; border-radius: var(--radius-xs); font-family: var(--font-mono); font-size: 12px; color: var(--fg-0); }
+    .role { display: grid; grid-template-columns: 140px 1fr; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border-subtle); }
+    .role:last-child { border-bottom: 0; }
+    .role .label { color: var(--fg-2); font-size: var(--type-xs); text-transform: uppercase; letter-spacing: 0.04em; }
+    .role .demo { font-size: var(--type-sm); color: var(--fg-0); }
+  </style>
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Monospace typography</h1>
+    <p class="lede">Mono is role-typed. Use it for code, IDs, hashes, timestamps, keyboard shortcuts, and command names. Never for body copy — it reads denser and slower.</p>
+    <div class="role">
+      <span class="label">Inline code</span>
+      <span class="demo">Run <code>maude design init --no-discovery</code> in your repo root.</span>
+    </div>
+    <div class="role">
+      <span class="label">Hashes / IDs</span>
+      <span class="demo mono">commit e7d7773 · 0x4f8a2c · uuid 7a3e-9f1c-…</span>
+    </div>
+    <div class="role">
+      <span class="label">Timestamps</span>
+      <span class="demo mono">2026-05-13 12:14:02.103Z</span>
+    </div>
+    <div class="role">
+      <span class="label">Keyboard</span>
+      <span class="demo"><kbd>⌘</kbd> + <kbd>K</kbd> opens the command palette.</span>
+    </div>
+    <div class="role">
+      <span class="label">File paths</span>
+      <span class="demo mono">~/code/maude/.design/system/project/colors_and_type.css</span>
+    </div>
+    <div class="role">
+      <span class="label">Numeric tables</span>
+      <span class="demo mono" style="font-variant-numeric: tabular-nums;">142.0M · 28.4M · 1.4G · 16.2M</span>
+    </div>
+  </main>
+</body>
+</html>

package/plugins/design/templates/design-system-inspiration/audience-pro/colors-presence.html ADDED Viewed

@@ -0,0 +1,74 @@
+<!--
+SPECIMEN: audience-pro-presence
+DEMONSTRATES: --presence-online, --presence-away, --presence-offline; presence dot on avatar, presence cursor + label
+COMPOSITION: 4 avatars with presence dots (online / away / offline / idle) + a "live cursors" mockup with 3 simultaneous users
+COPY VOICE: real names, real timestamps
+WHEN SCAFFOLDED: presence family (IF "presence" ∈ activeFamilies — typically pro tools with multiplayer)
+NOTES: Presence dot is 8px circle bottom-right of 32-40px avatars (anchor on the visual bottom-right, not on a math grid). Cursor labels are subtle (pill at 11px, low opacity bg). Don't blink presence — too noisy in a busy view.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Presence — colors</title>
+  <link rel="stylesheet" href="../core/colors_and_type.css" />
+  <link rel="stylesheet" href="../core/preview/_layout.css" />
+  <style>
+    .avatar { position: relative; width: 40px; height: 40px; background: var(--bg-3); border: 1px solid var(--border-default); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--fg-1); font-size: var(--type-sm); }
+    .avatar .dot { position: absolute; bottom: -1px; right: -1px; width: 10px; height: 10px; border: 2px solid var(--bg-0); border-radius: 50%; }
+    .avatar-block { display: grid; gap: 6px; justify-items: center; }
+    .avatar-block .label { font-size: var(--type-xs); color: var(--fg-2); }
+    .canvas-frame { position: relative; background: var(--bg-1); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 24px; min-height: 200px; overflow: hidden; }
+    .cursor { position: absolute; display: flex; align-items: flex-start; gap: 2px; pointer-events: none; }
+    .cursor svg { color: inherit; }
+    .cursor-label { background: currentColor; color: var(--accent-fg); font-size: 11px; padding: 1px 6px; border-radius: var(--radius-pill); margin-top: 12px; margin-left: 4px; }
+  </style>
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Presence</h1>
+    <p class="lede">Three presence states — online (green), away (amber), offline (muted). For multiplayer pro tools where "who's looking right now" matters.</p>
+    <h2>Presence dots on avatars</h2>
+    <div class="row" style="gap: 32px;">
+      <div class="avatar-block">
+        <div class="avatar">KP<div class="dot" style="background: var(--presence-online);"></div></div>
+        <div class="label">online</div>
+      </div>
+      <div class="avatar-block">
+        <div class="avatar">JW<div class="dot" style="background: var(--presence-away);"></div></div>
+        <div class="label">away (idle 5m)</div>
+      </div>
+      <div class="avatar-block">
+        <div class="avatar">MS<div class="dot" style="background: var(--presence-offline);"></div></div>
+        <div class="label">offline</div>
+      </div>
+      <div class="avatar-block">
+        <div class="avatar">LC</div>
+        <div class="label">unknown</div>
+      </div>
+    </div>
+    <h2>Live cursors (multiplayer)</h2>
+    <div class="canvas-frame">
+      <div class="cursor" style="top: 20%; left: 30%; color: oklch(64% 0.20 264);">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M3 3 L21 12 L13 14 L11 22 Z"/></svg>
+        <span class="cursor-label">Kim</span>
+      </div>
+      <div class="cursor" style="top: 55%; left: 60%; color: oklch(68% 0.18 145);">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M3 3 L21 12 L13 14 L11 22 Z"/></svg>
+        <span class="cursor-label">Marta</span>
+      </div>
+      <div class="cursor" style="top: 70%; left: 18%; color: oklch(72% 0.15 50);">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M3 3 L21 12 L13 14 L11 22 Z"/></svg>
+        <span class="cursor-label">Jonas</span>
+      </div>
+      <div style="position: absolute; bottom: 12px; left: 12px; color: var(--fg-2); font-size: var(--type-xs);">3 viewers</div>
+    </div>
+    <footer class="legend">
+      <p>Cursor color is per-user, not a token — derived from a stable hash of the user ID into an OKLCH lightness/chroma band. Stays consistent across sessions.</p>
+    </footer>
+  </main>
+</body>
+</html>