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-pro/components-command-palette.html ADDED Viewed

@@ -0,0 +1,90 @@
+<!--
+SPECIMEN: audience-pro-command-palette
+DEMONSTRATES: Cmd+K palette UI, fuzzy-matched results with highlighted substring, grouped sections, recent / pinned, keyboard hints
+COMPOSITION: full palette mock with search bar + 6 results across 2 groups + footer with kbd hints
+COPY VOICE: action-verb commands ("Open roster", "Create canvas", "Toggle dark mode")
+WHEN SCAFFOLDED: audience-pro
+NOTES: Match highlighting uses --accent at low alpha (oklch alpha). Group headers are small caps + fg-2. ⌘K is the universal trigger — never bind to a custom combo unless docs explicitly call it out.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Audience — pro command palette</title>
+  <link rel="stylesheet" href="../core/colors_and_type.css" />
+  <link rel="stylesheet" href="../core/preview/_layout.css" />
+  <style>
+    .palette { background: var(--bg-1); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); max-width: 520px; overflow: hidden; }
+    .palette-input { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); }
+    .palette-input input { background: transparent; border: 0; outline: 0; color: var(--fg-0); font: inherit; font-size: var(--type-md); flex: 1; }
+    .palette-group { padding: 4px 0; }
+    .palette-group .head { padding: 6px 14px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-2); }
+    .palette-item { display: flex; align-items: center; gap: 10px; padding: 8px 14px; cursor: pointer; }
+    .palette-item:hover, .palette-item.is-active { background: var(--bg-3); }
+    .palette-item .label { flex: 1; }
+    .palette-item .shortcut { color: var(--fg-2); font-family: var(--font-mono); font-size: var(--type-xs); }
+    .palette-item .icon { width: 16px; height: 16px; color: var(--fg-1); }
+    .match { background: oklch(from var(--accent) l c h / 0.4); border-radius: 2px; padding: 0 1px; }
+    .palette-footer { display: flex; justify-content: space-between; padding: 8px 14px; border-top: 1px solid var(--border-subtle); background: var(--bg-2); font-size: var(--type-xs); color: var(--fg-2); }
+    kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; 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; color: var(--fg-0); }
+  </style>
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Command palette</h1>
+    <p class="lede">The <kbd>⌘</kbd>+<kbd>K</kbd> palette is the keyboard-first entry point to everything. Fuzzy match highlights the matched substring; results group into Pinned, Recent, and All actions.</p>
+    <div class="palette">
+      <div class="palette-input">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" style="color: var(--fg-2);"><circle cx="11" cy="11" r="7"/><path d="m20 20-3-3"/></svg>
+        <input type="text" value="rost" placeholder="Search commands…" />
+        <kbd>⎋</kbd>
+      </div>
+      <div class="palette-group">
+        <div class="head">Pinned</div>
+        <div class="palette-item is-active">
+          <span class="icon">☰</span>
+          <span class="label">Open <span class="match">rost</span>er</span>
+          <span class="shortcut">⌘R</span>
+        </div>
+      </div>
+      <div class="palette-group">
+        <div class="head">Recent</div>
+        <div class="palette-item">
+          <span class="icon">+</span>
+          <span class="label">Create new <span class="match">rost</span>er</span>
+          <span class="shortcut">⌘⇧N</span>
+        </div>
+        <div class="palette-item">
+          <span class="icon">⏏</span>
+          <span class="label">Export <span class="match">rost</span>er CSV</span>
+        </div>
+      </div>
+      <div class="palette-group">
+        <div class="head">All actions</div>
+        <div class="palette-item">
+          <span class="icon">⟳</span>
+          <span class="label">Sync <span class="match">rost</span>er with league</span>
+        </div>
+        <div class="palette-item">
+          <span class="icon">🔍</span>
+          <span class="label">Find player in <span class="match">rost</span>er</span>
+          <span class="shortcut">/</span>
+        </div>
+        <div class="palette-item">
+          <span class="icon">⚙</span>
+          <span class="label"><span class="match">Rost</span>er settings</span>
+        </div>
+      </div>
+      <div class="palette-footer">
+        <span><kbd>↑</kbd><kbd>↓</kbd> navigate · <kbd>⏎</kbd> run · <kbd>⎋</kbd> close</span>
+        <span>6 results</span>
+      </div>
+    </div>
+  </main>
+</body>
+</html>

package/plugins/design/templates/design-system-inspiration/audience-pro/components-keyboard.html ADDED Viewed

@@ -0,0 +1,51 @@
+<!--
+SPECIMEN: audience-pro-keyboard
+DEMONSTRATES: <kbd> styling, key combos with `+` separators, OS-aware modifier symbols (⌘ vs Ctrl)
+COMPOSITION: kbd primitives at 3 sizes + common combo recipes + inline-in-paragraph usage
+COPY VOICE: literal key names, no spelling-out ("Cmd+K" not "Command-K")
+WHEN SCAFFOLDED: audience-pro
+NOTES: Use Mac symbols (⌘ ⇧ ⌥ ⌃ ⌫ ⏎ ⎋) on macOS, spell out on Windows/Linux. JS detects platform; the visual style is identical. Single keys use single <kbd>; combos chain with `+` (visible separator, not part of the kbd).
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Audience — pro keyboard</title>
+  <link rel="stylesheet" href="../core/colors_and_type.css" />
+  <link rel="stylesheet" href="../core/preview/_layout.css" />
+  <style>
+    kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; padding: 0 5px; height: 20px; background: var(--bg-3); border: 1px solid var(--border-default); border-bottom-width: 2px; border-radius: var(--radius-xs); font-family: var(--font-mono); font-size: 11px; color: var(--fg-0); }
+    kbd.lg { min-width: 24px; height: 26px; font-size: 13px; padding: 0 8px; }
+    kbd.sm { min-width: 14px; height: 16px; font-size: 9px; padding: 0 4px; }
+    .combo { display: inline-flex; align-items: center; gap: 2px; }
+    .combo .plus { color: var(--fg-2); font-size: var(--type-xs); padding: 0 1px; }
+  </style>
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Keyboard primitives</h1>
+    <p class="lede">The <code>&lt;kbd&gt;</code> element with project-specific styling. Use Mac symbols (⌘ ⇧ ⌥ ⌃) on macOS and spell out on other platforms — the visual style is identical. Combos chain individual <code>&lt;kbd&gt;</code>s with a "+" separator.</p>
+    <h2>Sizes</h2>
+    <div class="row" style="gap: 16px; align-items: end;">
+      <kbd class="lg">⌘</kbd>
+      <kbd>K</kbd>
+      <kbd class="sm">⌫</kbd>
+    </div>
+    <h2>Common combos</h2>
+    <table style="width: 100%; max-width: 480px; border-collapse: collapse;">
+      <tr><td style="padding: 8px 0; color: var(--fg-1);">Command palette</td><td style="padding: 8px 0;"><span class="combo"><kbd>⌘</kbd><span class="plus">+</span><kbd>K</kbd></span></td></tr>
+      <tr><td style="padding: 8px 0; color: var(--fg-1);">Quick search</td><td style="padding: 8px 0;"><span class="combo"><kbd>/</kbd></span></td></tr>
+      <tr><td style="padding: 8px 0; color: var(--fg-1);">New canvas</td><td style="padding: 8px 0;"><span class="combo"><kbd>⌘</kbd><span class="plus">+</span><kbd>⇧</kbd><span class="plus">+</span><kbd>N</kbd></span></td></tr>
+      <tr><td style="padding: 8px 0; color: var(--fg-1);">Toggle sidebar</td><td style="padding: 8px 0;"><span class="combo"><kbd>⌘</kbd><span class="plus">+</span><kbd>B</kbd></span></td></tr>
+      <tr><td style="padding: 8px 0; color: var(--fg-1);">Save</td><td style="padding: 8px 0;"><span class="combo"><kbd>⌘</kbd><span class="plus">+</span><kbd>S</kbd></span></td></tr>
+      <tr><td style="padding: 8px 0; color: var(--fg-1);">Close tab</td><td style="padding: 8px 0;"><span class="combo"><kbd>⌘</kbd><span class="plus">+</span><kbd>W</kbd></span></td></tr>
+      <tr><td style="padding: 8px 0; color: var(--fg-1);">Cancel</td><td style="padding: 8px 0;"><span class="combo"><kbd>⎋</kbd></span></td></tr>
+    </table>
+    <h2>In flowing copy</h2>
+    <p style="max-width: 60ch;">Press <span class="combo"><kbd>⌘</kbd><span class="plus">+</span><kbd>K</kbd></span> from anywhere in the app to open the command palette. Use <kbd>J</kbd> and <kbd>K</kbd> to navigate the results, <kbd>⏎</kbd> to run the selected action, or <kbd>⎋</kbd> to dismiss without choosing.</p>
+  </main>
+</body>
+</html>

package/plugins/design/templates/design-system-inspiration/audience-pro/components-list.html ADDED Viewed

@@ -0,0 +1,89 @@
+<!--
+SPECIMEN: audience-pro-components-list
+DEMONSTRATES: dense list rows, selection state, hover preview, J/K keyboard hints, multi-select
+COMPOSITION: vertical list with avatar + primary + meta + actions, in idle / hover / selected states + sticky header
+COPY VOICE: terse, dense — pro tools assume reading speed
+WHEN SCAFFOLDED: audience-pro (only when Q2 = pro tool)
+NOTES: Row height stays tight (~36-44px). J/K hints surface only on focus, not on hover. Avoid bg gradients — pro users read fast and high-contrast surfaces beat decorative ones.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Audience — pro list</title>
+  <link rel="stylesheet" href="../core/colors_and_type.css" />
+  <link rel="stylesheet" href="../core/preview/_layout.css" />
+  <style>
+    .list { background: var(--bg-1); border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; max-width: 640px; }
+    .list-header { display: grid; grid-template-columns: 24px 1fr 80px 64px 80px; gap: 12px; align-items: center; padding: 6px 12px; background: var(--bg-2); border-bottom: 1px solid var(--border-default); font-size: var(--type-xs); color: var(--fg-1); text-transform: uppercase; letter-spacing: 0.04em; position: sticky; top: 0; }
+    .row { display: grid; grid-template-columns: 24px 1fr 80px 64px 80px; gap: 12px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border-subtle); font-size: var(--type-sm); cursor: pointer; }
+    .row:hover { background: var(--bg-3); }
+    .row.is-selected { background: var(--bg-4); }
+    .row .avatar { width: 24px; height: 24px; background: var(--bg-3); border-radius: 50%; }
+    .row .name { color: var(--fg-0); }
+    .row .meta { color: var(--fg-2); font-size: var(--type-xs); }
+    .row .num { color: var(--fg-1); font-variant-numeric: tabular-nums; text-align: right; }
+    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; color: var(--fg-1); }
+  </style>
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>List (pro tool)</h1>
+    <p class="lede">Dense rows with predictable column slots. Pro users navigate by keyboard — surface <kbd>J</kbd>/<kbd>K</kbd> hints in the footer, not the rows themselves. Selection uses <code>--bg-4</code>; never the accent (rows aren't navigation).</p>
+    <h2>Roster — 5 players</h2>
+    <div class="list">
+      <div class="list-header">
+        <span></span>
+        <span>Player</span>
+        <span style="text-align: right;">Pos</span>
+        <span style="text-align: right;">Mat</span>
+        <span style="text-align: right;">Goals</span>
+      </div>
+      <div class="row is-selected">
+        <div class="avatar"></div>
+        <div><span class="name">Kim Park</span> <span class="meta">#9 · captain</span></div>
+        <span class="num">FWD</span>
+        <span class="num">24</span>
+        <span class="num">14</span>
+      </div>
+      <div class="row">
+        <div class="avatar"></div>
+        <div><span class="name">Jonas Weber</span> <span class="meta">#14</span></div>
+        <span class="num">MID</span>
+        <span class="num">22</span>
+        <span class="num">3</span>
+      </div>
+      <div class="row">
+        <div class="avatar"></div>
+        <div><span class="name">Marta Silva</span> <span class="meta">#4</span></div>
+        <span class="num">DEF</span>
+        <span class="num">23</span>
+        <span class="num">1</span>
+      </div>
+      <div class="row">
+        <div class="avatar"></div>
+        <div><span class="name">Liam Chen</span> <span class="meta">#1</span></div>
+        <span class="num">GK</span>
+        <span class="num">19</span>
+        <span class="num">0</span>
+      </div>
+      <div class="row">
+        <div class="avatar"></div>
+        <div><span class="name">Sara Novak</span> <span class="meta">#11</span></div>
+        <span class="num">FWD</span>
+        <span class="num">20</span>
+        <span class="num">8</span>
+      </div>
+    </div>
+    <h2>Keyboard footer</h2>
+    <div class="row" style="display: flex; gap: 16px; color: var(--fg-2); font-size: var(--type-xs); padding: 8px 12px;">
+      <span><kbd>J</kbd><kbd>K</kbd> navigate</span>
+      <span><kbd>X</kbd> select</span>
+      <span><kbd>⏎</kbd> open</span>
+      <span><kbd>⌘K</kbd> palette</span>
+    </div>
+  </main>
+</body>
+</html>

package/plugins/design/templates/design-system-inspiration/audience-pro/components-shortcuts-overlay.html ADDED Viewed

@@ -0,0 +1,85 @@
+<!--
+SPECIMEN: audience-pro-shortcuts-overlay
+DEMONSTRATES: ? key cheat-sheet overlay, grouped sections, kbd primitives in dense table
+COMPOSITION: 4-column overlay with sections (Navigation / Editing / View / Other) and ~16 shortcuts total
+COPY VOICE: terse action-verb descriptions, never repeating the key in the label
+WHEN SCAFFOLDED: audience-pro
+NOTES: The ? key is the discovery trigger. Overlay is full-screen with a dark veil. Layout adapts to short / tall screens — sections wrap.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Audience — pro shortcuts overlay</title>
+  <link rel="stylesheet" href="../core/colors_and_type.css" />
+  <link rel="stylesheet" href="../core/preview/_layout.css" />
+  <style>
+    .overlay-frame { position: relative; background: var(--bg-0); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 32px; overflow: hidden; }
+    .veil { position: absolute; inset: 0; background: oklch(0 0 0 / 0.5); }
+    .overlay { position: relative; background: var(--bg-1); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 24px; max-width: 720px; margin: 0 auto; }
+    .overlay h2 { margin: 0 0 16px; font-size: var(--type-lg); }
+    .sections { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
+    .section h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-2); margin: 0 0 8px; }
+    .section dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0; font-size: var(--type-sm); }
+    .section dt { color: var(--fg-1); }
+    .section dd { margin: 0; }
+    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; color: var(--fg-0); margin-left: 2px; }
+    .overlay-footer { display: flex; justify-content: space-between; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-subtle); color: var(--fg-2); font-size: var(--type-xs); }
+  </style>
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Shortcuts overlay</h1>
+    <p class="lede">Press <kbd>?</kbd> from anywhere to surface this. Pro users want this on demand, not pinned in a sidebar — discovery without permanent UI weight.</p>
+    <div class="overlay-frame">
+      <div class="veil"></div>
+      <div class="overlay">
+        <h2>Keyboard shortcuts</h2>
+        <div class="sections">
+          <div class="section">
+            <h3>Navigation</h3>
+            <dl>
+              <dt>Command palette</dt><dd><kbd>⌘</kbd><kbd>K</kbd></dd>
+              <dt>Quick search</dt><dd><kbd>/</kbd></dd>
+              <dt>Toggle sidebar</dt><dd><kbd>⌘</kbd><kbd>B</kbd></dd>
+              <dt>Next / prev tab</dt><dd><kbd>⌥</kbd><kbd>→</kbd></dd>
+            </dl>
+          </div>
+          <div class="section">
+            <h3>Editing</h3>
+            <dl>
+              <dt>Save</dt><dd><kbd>⌘</kbd><kbd>S</kbd></dd>
+              <dt>Undo / redo</dt><dd><kbd>⌘</kbd><kbd>Z</kbd></dd>
+              <dt>Duplicate</dt><dd><kbd>⌘</kbd><kbd>D</kbd></dd>
+              <dt>Delete</dt><dd><kbd>⌫</kbd></dd>
+            </dl>
+          </div>
+          <div class="section">
+            <h3>View</h3>
+            <dl>
+              <dt>Zoom in / out</dt><dd><kbd>⌘</kbd><kbd>+</kbd></dd>
+              <dt>Reset zoom</dt><dd><kbd>⌘</kbd><kbd>0</kbd></dd>
+              <dt>Toggle theme</dt><dd><kbd>⌘</kbd><kbd>⇧</kbd><kbd>T</kbd></dd>
+              <dt>Full screen</dt><dd><kbd>⌃</kbd><kbd>⌘</kbd><kbd>F</kbd></dd>
+            </dl>
+          </div>
+          <div class="section">
+            <h3>Other</h3>
+            <dl>
+              <dt>Show shortcuts</dt><dd><kbd>?</kbd></dd>
+              <dt>Open settings</dt><dd><kbd>⌘</kbd><kbd>,</kbd></dd>
+              <dt>Sign out</dt><dd><kbd>⌘</kbd><kbd>⇧</kbd><kbd>Q</kbd></dd>
+              <dt>Dismiss this</dt><dd><kbd>⎋</kbd></dd>
+            </dl>
+          </div>
+        </div>
+        <div class="overlay-footer">
+          <span>Press <kbd>⎋</kbd> to close</span>
+          <span>16 shortcuts</span>
+        </div>
+      </div>
+    </div>
+  </main>
+</body>
+</html>

package/plugins/design/templates/design-system-inspiration/audience-pro/components-toast-menu.html ADDED Viewed

@@ -0,0 +1,80 @@
+<!--
+SPECIMEN: audience-pro-toast-menu
+DEMONSTRATES: bottom-anchored toast notifications, contextual menu (right-click / button-triggered), action chain on toast
+COMPOSITION: 3 toast variants (success / pending / error w/ retry) + a right-click context menu with keyboard shortcut hints
+COPY VOICE: terse, actionable ("Saved", "Retry", "Undo") — never "Successful!"
+WHEN SCAFFOLDED: audience-pro
+NOTES: Toast is auto-dismissed for success (4s), persistent for error (until user acts). Context menus include keyboard shortcuts in the right column — power users learn through repetition.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Audience — pro toast + menu</title>
+  <link rel="stylesheet" href="../core/colors_and_type.css" />
+  <link rel="stylesheet" href="../core/preview/_layout.css" />
+  <style>
+    .toast { background: var(--bg-1); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 10px 14px; display: flex; align-items: center; gap: 12px; max-width: 360px; font-size: var(--type-sm); }
+    .toast .icon { width: 18px; height: 18px; flex-shrink: 0; }
+    .toast .body { flex: 1; }
+    .toast .actions { display: flex; gap: 8px; }
+    .toast button { background: transparent; border: 0; color: var(--accent); font: inherit; font-size: var(--type-sm); padding: 2px 6px; border-radius: var(--radius-xs); cursor: pointer; }
+    .toast button:hover { background: var(--bg-3); }
+    .menu { background: var(--bg-1); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 4px; width: 220px; }
+    .menu-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--type-sm); }
+    .menu-item:hover { background: var(--bg-3); }
+    .menu-item.is-destructive:hover { background: var(--status-error); color: var(--accent-fg); }
+    .menu .shortcut { color: var(--fg-2); font-family: var(--font-mono); font-size: var(--type-xs); }
+    .menu-sep { height: 1px; background: var(--border-subtle); margin: 4px -4px; }
+  </style>
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Toast + context menu</h1>
+    <p class="lede">Toasts auto-dismiss for success (4s) but stay sticky for errors until the user acts. Context menus show keyboard shortcuts on the right so power users learn the binding while they use the mouse.</p>
+    <h2>Toasts</h2>
+    <div style="display: grid; gap: 12px; margin: 16px 0;">
+      <div class="toast" style="border-color: var(--status-success);">
+        <span class="icon" style="color: var(--status-success);">✓</span>
+        <div class="body">
+          <strong>Match recap saved.</strong>
+          <div style="color: var(--fg-1); font-size: var(--type-xs);">Shared with the captain.</div>
+        </div>
+        <div class="actions">
+          <button>Undo</button>
+        </div>
+      </div>
+      <div class="toast">
+        <span class="icon" style="color: var(--status-warn);">⟳</span>
+        <div class="body">
+          <strong>Syncing roster…</strong>
+          <div style="color: var(--fg-1); font-size: var(--type-xs);">3 of 24 done.</div>
+        </div>
+      </div>
+      <div class="toast" style="border-color: var(--status-error);">
+        <span class="icon" style="color: var(--status-error);">×</span>
+        <div class="body">
+          <strong>Couldn't reach the league API.</strong>
+          <div style="color: var(--fg-1); font-size: var(--type-xs);">We'll retry in 30s.</div>
+        </div>
+        <div class="actions">
+          <button>Retry now</button>
+        </div>
+      </div>
+    </div>
+    <h2>Context menu (right-click / button)</h2>
+    <div class="menu">
+      <div class="menu-item">Open player <span class="shortcut">⏎</span></div>
+      <div class="menu-item">Edit profile <span class="shortcut">E</span></div>
+      <div class="menu-item">Toggle availability <span class="shortcut">A</span></div>
+      <div class="menu-sep"></div>
+      <div class="menu-item">Copy ID <span class="shortcut">⌘C</span></div>
+      <div class="menu-item">Duplicate <span class="shortcut">⌘D</span></div>
+      <div class="menu-sep"></div>
+      <div class="menu-item is-destructive">Remove from roster <span class="shortcut">⌫</span></div>
+    </div>
+  </main>
+</body>
+</html>

package/plugins/design/templates/design-system-inspiration/core/INDEX.md.tpl ADDED Viewed

@@ -0,0 +1,25 @@
+# Canvas index — {{project_label}}
+_Auto-maintained by `/design:setup-docs`. Last updated {{iso_timestamp}}._
+## All canvases
+_No canvases yet. Run `/design:new "<Name>" "<brief>"` to scaffold the first one._
+<!--
+After the first canvas exists, this section is auto-regenerated as:
+| File | Title | Platform | Sections | Artboards | Iter | Last modified |
+|---|---|---|---|---|---|---|
+| <Canvas>.html | <meta.title> | <meta.platform> | <count> | <sum> | <count> | <ts> |
+-->
+## Statistics
+- Canvases: 0
+- Total artboards: 0
+- Tokens defined: see `system/{{ds_dirname}}/colors_and_type.css`
+- Components: 0
+- Last canvas modified: —
+<!-- AUTO-MAINTAINED by /design:setup-docs — do not edit by hand. Add notes to system/{{ds_dirname}}/README.md or sections of INDEX.md that aren't auto-generated. -->

package/plugins/design/templates/design-system-inspiration/core/README.orchestration.md.tpl ADDED Viewed

@@ -0,0 +1,71 @@
+# {{project_label}} — Design root
+> **CODING AGENTS: READ THIS FIRST.**
+>
+> This folder is the project's living design source. It's NOT a snapshot — it's continuously maintained as the team iterates on UI in this repo. When in doubt, trust the contents of this folder over any older PDF / Figma / mockup snapshot.
+## What's here
+```
+.design/
+├── README.md                # this file (auto-maintained by /design:setup-docs)
+├── INDEX.md                 # canvas catalog (auto-maintained)
+├── config.json              # per-repo plugin config
+├── system/                  # design system: tokens, assets, ui kits, README
+│   └── {{ds_dirname}}/
+│       ├── README.md
+│       ├── SKILL.md
+│       ├── colors_and_type.css    # ← authoritative tokens
+│       ├── assets/                # logos, brand glyphs
+│       ├── preview/               # browsable specimens (colors, type, components, motion)
+│       └── ui_kits/               # reference UI compositions
+└── ui/                      # canvas projects (multi-artboard DesignCanvas files)
+    ├── <Canvas-1>.html
+    ├── <Canvas-1>.meta.json
+    ├── <Canvas-2>.html
+    └── ...
+```
+## What you should do — IMPORTANT
+**Read `INDEX.md` first.** It lists every canvas with title, brief, sections, artboards, and which production routes they map to. Pick the canvas matching the work scope.
+**Read its iteration transcript next.** Each canvas with iteration history has a chat at `_history/<slug>/chat.md`. The chat shows the back-and-forth between the user and the design assistant — it tells you **what the user actually wants** and **where they landed**. The HTML file is the output, but the chat is where the intent lives.
+**Find the canvas's primary HTML and read it top to bottom.** Each canvas project is a multi-artboard `DesignCanvas` HTML file. Then **follow its imports**: open every component file under `ui/components/`, the tokens at `system/{{ds_dirname}}/colors_and_type.css`, and the canvas's `.meta.json` sidecar.
+**If anything is ambiguous, ask the user to confirm before you start implementing.** It's much cheaper to clarify scope up front than to build the wrong thing.
+## About the design files
+The design medium is **HTML/CSS/JS** — these are prototypes, not production code. Your job is to **recreate them pixel-perfectly** in whatever technology the production codebase uses (React, Vue, native, whatever fits). Match the visual output; don't copy the prototype's internal structure unless it happens to fit.
+Each canvas is a **multi-artboard `DesignCanvas`** with one or more `DCSection` blocks containing `DCArtboard` instances. Each artboard is a separate screen — you implement them as separate routes / components in production.
+## Hard rules (from {{project_label}}'s design system)
+{{hard_rules_from_system_readme}}
+## How tokens work
+The authoritative token file is `system/{{ds_dirname}}/colors_and_type.css`. Every canvas links to it. Production code should consume the same tokens (compiled to TS/JS or kept as CSS vars). **Never invent tokens — extend the source CSS instead.**
+## Plugin commands quick reference
+| Command | Purpose |
+|---|---|
+| `/design:edit "<feedback>"` | Edit active canvas in place (auto-critic loop runs after) |
+| `/design:edit "<…>" --perfect` | Same, with up to 8 polish iterations |
+| `/design:new "<Name>" "<brief>"` | Scaffold a new canvas project |
+| `/design:critic` | Run review panel (orchestrator-routed) |
+| `/design:rollback` | Undo last edit |
+| `/design:screenshot` | Capture canvas / selected element |
+| `/design:setup-docs` | Refresh this README + INDEX (auto-runs after `/design:edit` and `/design:new`) |
+| `/design:setup-ds <name>` | Create another design system |
+| `/design:handoff` | Migrate active canvas to a handoff target |
+| `/design:browse` | Boot the local dev server |
+| `/design:help` | Grouped command index |
+## Last updated
+{{iso_timestamp}}

package/plugins/design/templates/design-system-inspiration/core/README.philosophy.md.tpl ADDED Viewed

@@ -0,0 +1,77 @@
+# {{project_label}} — Design System
+> **Philosophy layer.** This file documents the *why* and *what* of the design system. The *how* (tokens, specimens) lives in `colors_and_type.css` and the `preview/` directory.
+## Purpose
+{{purpose_one_liner}}
+## Audience profile
+- **Primary user:** {{audience_summary}}
+- **Platforms:** {{platforms_summary}}
+- **Default theme:** {{theme_default}}
+- **Content tone:** {{content_tone}}
+## Mood references
+{{mood_references_block}}
+## Foundations
+### One-accent rule
+Exactly one accent family lives in `colors_and_type.css`: `--accent`, `--accent-hover`, `--accent-active`, `--accent-fg`. **No `--accent2`.** Calls-to-attention compete with each other; one accent forces hierarchy decisions at design time, not runtime.
+### Token contract
+All visuals reference `var(--*)` tokens declared in `colors_and_type.css`. No hardcoded hex / px / rem in canvases or production code. Adding a new visual concept means **extending the tokens CSS first**, never inventing values inline.
+### Active token families
+{{active_families_block}}
+## Hard rules (non-negotiable)
+- **Accessibility:** WCAG 2.1 AA contrast at every theme. Focus-visible always rendered. Touch targets ≥ 44×44. `prefers-reduced-motion: reduce` respected.
+- **No off-token colors / radii / spacings** in canvases. Extend tokens; don't inline.
+- **No placeholder copy.** Real product strings only — no "Lorem Solutions Inc.", no "Click here".
+- **Type ladder:** {{type_scale_summary}}
+- **Motion:** every animation uses a `var(--dur-*)` and `var(--ease-*)` token. No magic numbers.
+{{platform_hard_rules}}
+## Voice & tone
+{{voice_tone_block}}
+## Iconography
+{{iconography_summary}}
+## Hard-stops the completeness-critic enforces
+- Core tokens present (`--accent`, `--bg-0..4`, `--fg-0..3`, `--dur-flip`)
+- Exactly one accent family
+- `system/{{ds_dirname}}/preview/` populated with at least 8 specimens
+- `colors_and_type.css` linked from every specimen
+- `prefers-reduced-motion: reduce` guard present in tokens CSS
+See `plugins/design/agents/design-system-completeness-critic.md` for the full rule set.
+## Where things live
+- **Tokens:** `colors_and_type.css` (this directory)
+- **Specimens:** `preview/` (one HTML file per token family / component class)
+- **UI kits:** `ui_kits/<platform>/` (reference compositions for {{platforms_summary}})
+- **Brand assets:** `assets/logos/`, `assets/glyphs/`
+## How to extend
+1. Identify the missing concept (new component, new state, new platform).
+2. **Extend `colors_and_type.css`** with any new tokens needed.
+3. **Add a specimen** under `preview/` with a SPECIMEN comment header so future agents learn from it.
+4. Run `/design:critic --system-only` to confirm completeness.
+5. Commit.
+Never extend the system by inventing values inline in a canvas — that's how systems decay.

package/plugins/design/templates/design-system-inspiration/core/SKILL.md.tpl ADDED Viewed

@@ -0,0 +1,50 @@
+---
+name: {{ds_skill_name}}
+description: "Loads the {{project_label}} design system context — tokens, philosophy, hard-stops — so any agent iterating on a canvas under this project respects the system. Auto-invoked by /design:edit and /design:new when the active canvas declares this DS via .meta.json.designSystem (or when this is the single DS)."
+user-invocable: false
+---
+# {{ds_skill_name}} — design system context
+Loads the project's design system into the agent's working memory:
+- **Tokens** — `colors_and_type.css` (the source of truth for color, type, spacing, motion, radii)
+- **Philosophy** — `README.md` (the *why* — audience, mood, voice, hard rules)
+- **Hard-stops** — non-negotiable constraints the design-system-completeness-critic enforces
+- **Active token families** — `{{active_families_csv}}`
+## When this skill loads
+This skill is loaded automatically when:
+- The active canvas's `.meta.json` declares `designSystem: "{{ds_dirname}}"`
+- OR the project has a single DS (single-DS layout: `system/project/`) and the active canvas has no explicit DS declaration
+It is **not** auto-invoked by `/design:edit` or `/design:new` on a project with no DS yet — that path triggers skill `design-system` in bootstrap mode instead. See `plugins/design/skills/design-system/SKILL.md` "Mode-detection".
+## What the agent should remember
+- **One accent.** No `--accent2`. Calls-to-attention compete; one accent forces hierarchy decisions.
+- **All visuals reference `var(--*)` tokens.** No hardcoded hex / px / rem in canvases.
+- **Voice:** {{voice_tone_summary}}
+- **Iconography:** {{iconography_summary}}
+- **Theme default:** `{{theme_default}}`. {{theme_extra}}
+- **Platforms:** {{platforms_summary}}
+## Hard rules (verbatim from README.md)
+{{hard_rules_block}}
+## Files of interest
+| Path | Role |
+|---|---|
+| `colors_and_type.css` | Authoritative tokens |
+| `README.md` | Philosophy + hard rules |
+| `preview/` | Specimens — read these to understand what good looks like |
+| `assets/logos/`, `assets/glyphs/` | Brand assets |
+| `ui_kits/{{platforms_first}}/` | Reference UI compositions |
+## How to extend
+If a canvas iteration needs a value not currently in the system, **extend `colors_and_type.css` first**. Adding a new variant of an existing token (e.g. `--accent-tertiary`) is fine; adding a parallel accent family (e.g. `--accent2`) violates the one-accent rule and the completeness-critic will block.