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/core/preview/motion.html ADDED Viewed

@@ -0,0 +1,66 @@
+<!--
+SPECIMEN: motion
+DEMONSTRATES: --dur-flip, --dur-panel, --dur-route, --dur-soft, --ease-out, --ease-in-out, prefers-reduced-motion guard
+COMPOSITION: 4 motion role cards with live hover/transition demos
+COPY VOICE: role-named ("flip", "panel slide", "route enter", "soft fade")
+WHEN SCAFFOLDED: always (Core)
+NOTES: Each example must use a compositor-only property (transform, opacity) — never layout-dirty (width/top). The reduced-motion guard must short-circuit all to 1ms.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Motion</title>
+  <link rel="stylesheet" href="../colors_and_type.css" />
+  <link rel="stylesheet" href="./_layout.css" />
+  <style>
+    .motion-card { background: var(--bg-1); padding: 20px; border-radius: var(--radius-md); border: 1px solid var(--border-default); display: flex; flex-direction: column; gap: 12px; }
+    .motion-card .demo { height: 80px; background: var(--bg-2); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
+    .motion-card:hover .flip-target  { transform: translateY(-12px); }
+    .motion-card:hover .panel-target { transform: translateX(0); }
+    .motion-card:hover .route-target { opacity: 1; transform: scale(1); }
+    .motion-card:hover .soft-target  { opacity: 1; }
+    .flip-target  { transition: transform var(--dur-flip) var(--ease-out); background: var(--accent); width: 32px; height: 32px; border-radius: var(--radius-sm); }
+    .panel-target { transition: transform var(--dur-panel) var(--ease-in-out); background: var(--accent); width: 64px; height: 32px; border-radius: var(--radius-sm); transform: translateX(-80px); }
+    .route-target { transition: opacity var(--dur-route) var(--ease-out), transform var(--dur-route) var(--ease-out); background: var(--accent); width: 64px; height: 32px; border-radius: var(--radius-sm); opacity: 0; transform: scale(0.92); }
+    .soft-target  { transition: opacity var(--dur-soft)  var(--ease-out); background: var(--accent); width: 64px; height: 32px; border-radius: var(--radius-sm); opacity: 0; }
+  </style>
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Motion</h1>
+    <p class="lede">Four durations × two eases — every animation in the system maps to one of these tokens. Hover over each card to play the canonical motion for that role.</p>
+    <div class="grid" style="grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));">
+      <div class="motion-card">
+        <strong>Flip</strong>
+        <div class="demo"><div class="flip-target"></div></div>
+        <code style="color: var(--fg-2);">--dur-flip · --ease-out</code>
+        <span style="color: var(--fg-1); font-size: var(--type-sm);">Small, snappy. Press-down, hover lift.</span>
+      </div>
+      <div class="motion-card">
+        <strong>Panel slide</strong>
+        <div class="demo"><div class="panel-target"></div></div>
+        <code style="color: var(--fg-2);">--dur-panel · --ease-in-out</code>
+        <span style="color: var(--fg-1); font-size: var(--type-sm);">Drawer / sidebar entry.</span>
+      </div>
+      <div class="motion-card">
+        <strong>Route enter</strong>
+        <div class="demo"><div class="route-target"></div></div>
+        <code style="color: var(--fg-2);">--dur-route · --ease-out</code>
+        <span style="color: var(--fg-1); font-size: var(--type-sm);">Page transition. Opacity + tiny scale.</span>
+      </div>
+      <div class="motion-card">
+        <strong>Soft fade</strong>
+        <div class="demo"><div class="soft-target"></div></div>
+        <code style="color: var(--fg-2);">--dur-soft · --ease-out</code>
+        <span style="color: var(--fg-1); font-size: var(--type-sm);">Toast, tooltip, soft reveal.</span>
+      </div>
+    </div>
+    <footer class="legend">
+      <p><code>@media (prefers-reduced-motion: reduce)</code> short-circuits every duration to 1ms. Never use <code>!important</code> to override — the cascade carries.</p>
+    </footer>
+  </main>
+</body>
+</html>

package/plugins/design/templates/design-system-inspiration/core/preview/spacing-scale.html ADDED Viewed

@@ -0,0 +1,53 @@
+<!--
+SPECIMEN: spacing-scale
+DEMONSTRATES: --space-0..8 (4px base)
+COPY VOICE: terse role labels ("inline", "stack", "section gutter")
+COMPOSITION: 9 horizontal bars sized to each space token, plus realistic stack/inline examples
+WHEN SCAFFOLDED: always (Core)
+NOTES: Scale is 4-px base, non-linear at top end (24/32/48/64). Use --space-2/3 for inline gaps, --space-4/5 for stack gaps, --space-6+ for section gutters.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Spacing scale</title>
+  <link rel="stylesheet" href="../colors_and_type.css" />
+  <link rel="stylesheet" href="./_layout.css" />
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Spacing</h1>
+    <p class="lede">4-pixel base scale, non-linear at the top end to keep section gutters readable on large screens. Use small steps for inline content; large steps for section separations.</p>
+    <h2>Scale</h2>
+    <div style="display: grid; gap: 8px; margin: 16px 0;">
+      <div style="display: flex; gap: 12px; align-items: center;"><span style="background: var(--accent); height: 8px; width: 0;"></span><code style="color: var(--fg-2); width: 80px;">--space-0</code><span style="color: var(--fg-1);">0px · reset</span></div>
+      <div style="display: flex; gap: 12px; align-items: center;"><span style="background: var(--accent); height: 8px; width: 4px;"></span><code style="color: var(--fg-2); width: 80px;">--space-1</code><span style="color: var(--fg-1);">4px · hairline gap</span></div>
+      <div style="display: flex; gap: 12px; align-items: center;"><span style="background: var(--accent); height: 8px; width: 8px;"></span><code style="color: var(--fg-2); width: 80px;">--space-2</code><span style="color: var(--fg-1);">8px · inline gap</span></div>
+      <div style="display: flex; gap: 12px; align-items: center;"><span style="background: var(--accent); height: 8px; width: 12px;"></span><code style="color: var(--fg-2); width: 80px;">--space-3</code><span style="color: var(--fg-1);">12px · padding default</span></div>
+      <div style="display: flex; gap: 12px; align-items: center;"><span style="background: var(--accent); height: 8px; width: 16px;"></span><code style="color: var(--fg-2); width: 80px;">--space-4</code><span style="color: var(--fg-1);">16px · stack gap</span></div>
+      <div style="display: flex; gap: 12px; align-items: center;"><span style="background: var(--accent); height: 8px; width: 24px;"></span><code style="color: var(--fg-2); width: 80px;">--space-5</code><span style="color: var(--fg-1);">24px · section gap</span></div>
+      <div style="display: flex; gap: 12px; align-items: center;"><span style="background: var(--accent); height: 8px; width: 32px;"></span><code style="color: var(--fg-2); width: 80px;">--space-6</code><span style="color: var(--fg-1);">32px · section gutter</span></div>
+      <div style="display: flex; gap: 12px; align-items: center;"><span style="background: var(--accent); height: 8px; width: 48px;"></span><code style="color: var(--fg-2); width: 80px;">--space-7</code><span style="color: var(--fg-1);">48px · page gutter</span></div>
+      <div style="display: flex; gap: 12px; align-items: center;"><span style="background: var(--accent); height: 8px; width: 64px;"></span><code style="color: var(--fg-2); width: 80px;">--space-8</code><span style="color: var(--fg-1);">64px · hero spacing</span></div>
+    </div>
+    <h2>In use — inline</h2>
+    <div class="row" style="background: var(--bg-1); padding: var(--space-3); border-radius: var(--radius-md); gap: var(--space-2);">
+      <span style="background: var(--accent); color: var(--accent-fg); padding: 2px 8px; border-radius: var(--radius-pill); font-size: var(--type-xs);">live</span>
+      <span style="color: var(--fg-0);">Captain · 92'</span>
+      <span style="color: var(--fg-2);">hat-trick</span>
+    </div>
+    <h2>In use — stack</h2>
+    <div style="background: var(--bg-1); padding: var(--space-4); border-radius: var(--radius-md); display: grid; gap: var(--space-4);">
+      <div><strong>Match summary</strong></div>
+      <div style="color: var(--fg-1);">Auto-saved 19:42 · 3 highlights</div>
+      <div class="row" style="gap: var(--space-2);">
+        <button style="background: var(--accent); color: var(--accent-fg); border: 0; padding: 6px 12px; border-radius: var(--radius-sm);">View</button>
+        <button style="background: var(--bg-3); color: var(--fg-0); border: 1px solid var(--border-default); padding: 6px 12px; border-radius: var(--radius-sm);">Share</button>
+      </div>
+    </div>
+  </main>
+</body>
+</html>

package/plugins/design/templates/design-system-inspiration/core/preview/type-scale.html ADDED Viewed

@@ -0,0 +1,62 @@
+<!--
+SPECIMEN: type-scale
+DEMONSTRATES: --type-xs..3xl, --lh-xs..3xl, --font-display, --font-body
+COMPOSITION: 8-step ladder with size + line-height labels + realistic copy at each step
+COPY VOICE: real product strings at each step — no Lorem
+WHEN SCAFFOLDED: always (Core)
+NOTES: Each step should have a distinct semantic role. Don't use 8 levels in one screen; the ladder is for picking the right one per region.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Type — scale</title>
+  <link rel="stylesheet" href="../colors_and_type.css" />
+  <link rel="stylesheet" href="./_layout.css" />
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Type scale</h1>
+    <p class="lede">Eight steps, modular but irregular — sizes chosen for legible separation, not strict geometric progression. Use display font (<code>--font-display</code>) at <code>--type-xl</code> and above; body font for everything below.</p>
+    <div style="display: grid; gap: 16px; margin: 24px 0;">
+      <div>
+        <span style="display: block; font-family: var(--font-display); font-size: var(--type-3xl); line-height: var(--lh-3xl); font-weight: 600;">Match Recap</span>
+        <code style="color: var(--fg-2);">--type-3xl / --lh-3xl · display</code>
+      </div>
+      <div>
+        <span style="display: block; font-family: var(--font-display); font-size: var(--type-2xl); line-height: var(--lh-2xl); font-weight: 600;">Hat-trick from the captain</span>
+        <code style="color: var(--fg-2);">--type-2xl / --lh-2xl · display</code>
+      </div>
+      <div>
+        <span style="display: block; font-family: var(--font-display); font-size: var(--type-xl); line-height: var(--lh-xl); font-weight: 600;">Section heading</span>
+        <code style="color: var(--fg-2);">--type-xl / --lh-xl · display</code>
+      </div>
+      <div>
+        <span style="display: block; font-size: var(--type-lg); line-height: var(--lh-lg); font-weight: 500;">Sub-section heading</span>
+        <code style="color: var(--fg-2);">--type-lg / --lh-lg · body</code>
+      </div>
+      <div>
+        <span style="display: block; font-size: var(--type-md); line-height: var(--lh-md);">Lead paragraph or callout text that needs slightly more presence than body copy.</span>
+        <code style="color: var(--fg-2);">--type-md / --lh-md · body</code>
+      </div>
+      <div>
+        <span style="display: block; font-size: var(--type-base); line-height: var(--lh-base);">Body copy. Default reading size — every block of text in flowing layout starts here.</span>
+        <code style="color: var(--fg-2);">--type-base / --lh-base · body</code>
+      </div>
+      <div>
+        <span style="display: block; font-size: var(--type-sm); line-height: var(--lh-sm); color: var(--fg-1);">Secondary text. Captions, meta, dense table rows.</span>
+        <code style="color: var(--fg-2);">--type-sm / --lh-sm · body</code>
+      </div>
+      <div>
+        <span style="display: block; font-size: var(--type-xs); line-height: var(--lh-xs); color: var(--fg-2);">Tiny. Pill labels, timestamps, footnotes.</span>
+        <code style="color: var(--fg-2);">--type-xs / --lh-xs · body</code>
+      </div>
+    </div>
+    <footer class="legend">
+      <p>Picking from the ladder: don't use more than 3 sizes in one section. Hierarchy comes from contrast (size jump ≥ 2 steps), not from gradient.</p>
+    </footer>
+  </main>
+</body>
+</html>

package/plugins/design/templates/design-system-inspiration/foundations/borders.html ADDED Viewed

@@ -0,0 +1,39 @@
+<!--
+SPECIMEN: foundations-borders
+DEMONSTRATES: --border-subtle, --border-default, --border-strong, --accent, --status-error
+COMPOSITION: 5 stacked panels demonstrating border weights + colored border states (accent, error)
+COPY VOICE: terse role labels
+WHEN SCAFFOLDED: foundations (universal)
+NOTES: Borders derive from --bg-1 via oklch(from var(--bg-1) calc(l + N) c h) — see colors_and_type.css. Match the visual weight to the role: subtle for ambient, strong for active selection, accent for primary CTA outlines, error for validation.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Foundations — borders</title>
+  <link rel="stylesheet" href="../core/colors_and_type.css" />
+  <link rel="stylesheet" href="../core/preview/_layout.css" />
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Borders</h1>
+    <p class="lede">Three weights for separation hierarchy, plus accent + error states. Borders derive from the surface bg in OKLCH so they stay visually consistent across themes.</p>
+    <div style="display: grid; gap: 12px; margin: 24px 0; max-width: 480px;">
+      <div style="padding: 12px 16px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md);"><strong>Subtle</strong> · ambient separation</div>
+      <div style="padding: 12px 16px; border: 1px solid var(--border-default); border-radius: var(--radius-md);"><strong>Default</strong> · standard card / input outline</div>
+      <div style="padding: 12px 16px; border: 1px solid var(--border-strong); border-radius: var(--radius-md);"><strong>Strong</strong> · hover, selection, focus surrounds</div>
+      <div style="padding: 12px 16px; border: 1px solid var(--accent); border-radius: var(--radius-md);"><strong>Accent</strong> · primary CTA outline / focus ring base</div>
+      <div style="padding: 12px 16px; border: 1px solid var(--status-error); border-radius: var(--radius-md);"><strong>Error</strong> · validation fail / destructive confirm</div>
+    </div>
+    <h2>In context — input states</h2>
+    <div class="row" style="gap: 12px;">
+      <input type="text" value="default" style="background: var(--bg-3); color: var(--fg-0); border: 1px solid var(--border-default); padding: 6px 10px; border-radius: var(--radius-sm); font: inherit;" />
+      <input type="text" value="hover" style="background: var(--bg-3); color: var(--fg-0); border: 1px solid var(--border-strong); padding: 6px 10px; border-radius: var(--radius-sm); font: inherit;" />
+      <input type="text" value="focused" style="background: var(--bg-3); color: var(--fg-0); border: 1px solid var(--border-strong); padding: 6px 10px; border-radius: var(--radius-sm); font: inherit; outline: 2px solid var(--accent); outline-offset: 2px;" />
+      <input type="text" value="error" style="background: var(--bg-3); color: var(--fg-0); border: 1px solid var(--status-error); padding: 6px 10px; border-radius: var(--radius-sm); font: inherit;" />
+    </div>
+  </main>
+</body>
+</html>

package/plugins/design/templates/design-system-inspiration/foundations/elevation.html ADDED Viewed

@@ -0,0 +1,46 @@
+<!--
+SPECIMEN: foundations-elevation
+DEMONSTRATES: --shadow-sm, --shadow-md, --shadow-lg
+COMPOSITION: 3 floating cards + a "no shadow" baseline showing what flat looks like
+COPY VOICE: terse role labels
+WHEN SCAFFOLDED: foundations (almost always)
+NOTES: Shadows are reserved for floating UI (popovers, dropdowns, dialogs). Stationary cards use border + bg step, NOT shadow. Misuse is the #1 visual-noise tell.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Foundations — elevation</title>
+  <link rel="stylesheet" href="../core/colors_and_type.css" />
+  <link rel="stylesheet" href="../core/preview/_layout.css" />
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Elevation</h1>
+    <p class="lede">Three levels of shadow — and one explicit zero. Shadow is reserved for things that <em>float</em> above the page (popovers, dropdowns, dialogs). Stationary cards use border + bg step, not shadow.</p>
+    <div class="grid" style="grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));">
+      <div style="background: var(--bg-1); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 24px; text-align: center;">
+        <strong style="display: block;">flat</strong>
+        <code style="color: var(--fg-2);">border + bg-1</code>
+      </div>
+      <div style="background: var(--bg-1); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 24px; text-align: center; box-shadow: var(--shadow-sm);">
+        <strong style="display: block;">--shadow-sm</strong>
+        <code style="color: var(--fg-2);">hover lift</code>
+      </div>
+      <div style="background: var(--bg-1); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 24px; text-align: center; box-shadow: var(--shadow-md);">
+        <strong style="display: block;">--shadow-md</strong>
+        <code style="color: var(--fg-2);">popover, menu</code>
+      </div>
+      <div style="background: var(--bg-1); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 24px; text-align: center; box-shadow: var(--shadow-lg);">
+        <strong style="display: block;">--shadow-lg</strong>
+        <code style="color: var(--fg-2);">dialog, sheet</code>
+      </div>
+    </div>
+    <footer class="legend">
+      <p>If a card sits on the page surface and doesn't move, no shadow. Shadows imply "floats above" — use them when that's literally true.</p>
+    </footer>
+  </main>
+</body>
+</html>

package/plugins/design/templates/design-system-inspiration/foundations/focus.html ADDED Viewed

@@ -0,0 +1,48 @@
+<!--
+SPECIMEN: foundations-focus
+DEMONSTRATES: --accent (as focus ring), outline + outline-offset pattern, focus-visible vs focus
+COMPOSITION: 4 focusable controls each shown idle + focused, plus a contrast block proving accent vs surface clears WCAG
+COPY VOICE: terse — focus tokens are utility, not branding
+WHEN SCAFFOLDED: foundations (universal — every interactive surface needs this)
+NOTES: Ring is `outline: 2px solid var(--accent); outline-offset: 2px` — NOT inset box-shadow (which masks the border). focus-visible only (not :focus) so mouse clicks don't paint rings.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Foundations — focus</title>
+  <link rel="stylesheet" href="../core/colors_and_type.css" />
+  <link rel="stylesheet" href="../core/preview/_layout.css" />
+  <style>
+    .focusable { padding: 8px 14px; border-radius: var(--radius-sm); background: var(--bg-3); border: 1px solid var(--border-default); color: var(--fg-0); font: inherit; }
+    .focusable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--border-strong); }
+    .ring { outline: 2px solid var(--accent); outline-offset: 2px; }
+  </style>
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Focus</h1>
+    <p class="lede">The focus ring is <code>outline: 2px solid var(--accent)</code> with <code>outline-offset: 2px</code> — applied via <code>:focus-visible</code>, not <code>:focus</code> (so mouse clicks don't paint rings on buttons).</p>
+    <h2>Live (Tab through these)</h2>
+    <div class="row">
+      <button class="focusable">Button</button>
+      <input class="focusable" type="text" placeholder="Input" />
+      <a href="#" class="focusable" style="text-decoration: none;">Link</a>
+      <span class="focusable" tabindex="0">Custom focusable</span>
+    </div>
+    <h2>Idle vs focused (visual)</h2>
+    <div class="row">
+      <button class="focusable">Idle</button>
+      <button class="focusable ring">Focused (ring shown)</button>
+    </div>
+    <h2>Why outline, not box-shadow</h2>
+    <p>Outline lives outside the layout box — it never shifts adjacent content. Inset box-shadow masks the element's border + can be clipped by parent <code>overflow: hidden</code>. The 2px offset prevents the ring from touching the element's border, so contrast stays clean even on edge cases.</p>
+    <h2>Contrast guarantee</h2>
+    <p>The accent token MUST clear <strong>3:1</strong> against every adjacent <code>--bg-*</code> level. Verify on theme switch.</p>
+  </main>
+</body>
+</html>

package/plugins/design/templates/design-system-inspiration/foundations/grid.html ADDED Viewed

@@ -0,0 +1,51 @@
+<!--
+SPECIMEN: foundations-grid
+DEMONSTRATES: --layout-max-w, --layout-gutter, column grid, responsive breakpoints
+COMPOSITION: visible 12-col grid overlay + a real layout (header + main + aside) at the grid + breakpoint table
+COPY VOICE: terse role labels
+WHEN SCAFFOLDED: foundations (default for desktop and tablet projects; mobile uses single-column)
+NOTES: 12-column flexible grid with --layout-gutter spacing. Breakpoints: sm 480, md 768, lg 1024, xl 1280. Mobile-first — desktop layouts opt INTO the grid via min-width media queries.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Foundations — grid</title>
+  <link rel="stylesheet" href="../core/colors_and_type.css" />
+  <link rel="stylesheet" href="../core/preview/_layout.css" />
+  <style>
+    .grid-overlay { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--layout-gutter); max-width: var(--layout-max-w); margin: 16px auto; padding: 8px; background: var(--bg-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
+    .grid-overlay > div { background: var(--accent); opacity: 0.2; height: 40px; border-radius: var(--radius-xs); }
+    .layout { display: grid; grid-template-columns: 1fr 280px; gap: var(--layout-gutter); max-width: var(--layout-max-w); margin: 16px auto; }
+    .layout > * { background: var(--bg-1); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 16px; }
+  </style>
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Grid</h1>
+    <p class="lede">12-column flexible grid scoped by <code>--layout-max-w</code> with <code>--layout-gutter</code> spacing. Mobile-first: layouts start single-column and opt INTO multi-column via min-width queries.</p>
+    <h2>12-column overlay</h2>
+    <div class="grid-overlay">
+      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
+    </div>
+    <h2>Real layout — main + aside</h2>
+    <div class="layout">
+      <div><strong>Main content area</strong><p style="color: var(--fg-1);">Spans flexibly — fills whatever the side panel doesn't claim.</p></div>
+      <div><strong>Side panel</strong><p style="color: var(--fg-1); font-size: var(--type-sm);">Fixed 280px on desktop; stacks below main on mobile.</p></div>
+    </div>
+    <h2>Breakpoints</h2>
+    <table style="width: 100%; max-width: 480px; background: var(--bg-1); border: 1px solid var(--border-default); border-radius: var(--radius-md); border-collapse: collapse; overflow: hidden;">
+      <thead><tr><th style="text-align: left; padding: 8px 12px; background: var(--bg-2); border-bottom: 1px solid var(--border-default);">Token</th><th style="text-align: left; padding: 8px 12px; background: var(--bg-2); border-bottom: 1px solid var(--border-default);">Width</th><th style="text-align: left; padding: 8px 12px; background: var(--bg-2); border-bottom: 1px solid var(--border-default);">Used for</th></tr></thead>
+      <tbody>
+        <tr><td style="padding: 8px 12px; border-bottom: 1px solid var(--border-subtle);"><code>sm</code></td><td style="padding: 8px 12px; border-bottom: 1px solid var(--border-subtle);">≥ 480px</td><td style="padding: 8px 12px; border-bottom: 1px solid var(--border-subtle); color: var(--fg-1);">Large phone, two-up grids</td></tr>
+        <tr><td style="padding: 8px 12px; border-bottom: 1px solid var(--border-subtle);"><code>md</code></td><td style="padding: 8px 12px; border-bottom: 1px solid var(--border-subtle);">≥ 768px</td><td style="padding: 8px 12px; border-bottom: 1px solid var(--border-subtle); color: var(--fg-1);">Tablet, side panels appear</td></tr>
+        <tr><td style="padding: 8px 12px; border-bottom: 1px solid var(--border-subtle);"><code>lg</code></td><td style="padding: 8px 12px; border-bottom: 1px solid var(--border-subtle);">≥ 1024px</td><td style="padding: 8px 12px; border-bottom: 1px solid var(--border-subtle); color: var(--fg-1);">Desktop</td></tr>
+        <tr><td style="padding: 8px 12px;"><code>xl</code></td><td style="padding: 8px 12px;">≥ 1280px</td><td style="padding: 8px 12px; color: var(--fg-1);">Wide desktop, dual-aside layouts</td></tr>
+      </tbody>
+    </table>
+  </main>
+</body>
+</html>

package/plugins/design/templates/design-system-inspiration/foundations/iconography.html ADDED Viewed

@@ -0,0 +1,73 @@
+<!--
+SPECIMEN: foundations-iconography
+DEMONSTRATES: SVG icon family, stroke width consistency, sizing scale (16/20/24), color inheritance via currentColor
+COMPOSITION: 4 sample Lucide-style icons at 3 sizes each, plus icon-in-button context
+COPY VOICE: terse — icon names + roles
+WHEN SCAFFOLDED: foundations (universal — every project picks an icon family)
+NOTES: Use ONE family (Lucide / Phosphor / Heroicons) — never mix. Stroke width is constant (1.5px Lucide default, 1px Lucide thin, etc.). Color via currentColor inherits from parent. Filled vs outline is a per-state choice, not a per-icon choice.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Foundations — iconography</title>
+  <link rel="stylesheet" href="../core/colors_and_type.css" />
+  <link rel="stylesheet" href="../core/preview/_layout.css" />
+  <style>
+    .icon-row { display: flex; gap: 24px; align-items: flex-end; margin: 24px 0; flex-wrap: wrap; }
+    .icon-tile { display: grid; gap: 6px; justify-items: center; }
+    .icon-tile svg { color: var(--fg-0); display: block; }
+    .icon-tile .label { font-size: var(--type-xs); color: var(--fg-1); }
+  </style>
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Iconography</h1>
+    <p class="lede">Lucide outline, 1.5px stroke, three sizes. One family, one stroke weight — mixing icon sets is the fastest way to make a system feel cheap. Color inherits from <code>currentColor</code> so icons follow their parent's foreground.</p>
+    <h2>Sizes (16 / 20 / 24)</h2>
+    <div class="icon-row">
+      <div class="icon-tile">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12l2-2 4 4 8-8 4 4"/></svg>
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12l2-2 4 4 8-8 4 4"/></svg>
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12l2-2 4 4 8-8 4 4"/></svg>
+        <span class="label">trending</span>
+      </div>
+      <div class="icon-tile">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg>
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg>
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg>
+        <span class="label">clock</span>
+      </div>
+      <div class="icon-tile">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3-3"/></svg>
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3-3"/></svg>
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3-3"/></svg>
+        <span class="label">search</span>
+      </div>
+      <div class="icon-tile">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16M7 12h10M10 18h4"/></svg>
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16M7 12h10M10 18h4"/></svg>
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16M7 12h10M10 18h4"/></svg>
+        <span class="label">filter</span>
+      </div>
+    </div>
+    <h2>In button context</h2>
+    <div class="row">
+      <button style="background: var(--accent); color: var(--accent-fg); border: 0; padding: 8px 14px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; gap: 6px; font: inherit;">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3-3"/></svg>
+        Search
+      </button>
+      <button style="background: var(--bg-3); color: var(--fg-0); border: 1px solid var(--border-default); padding: 8px 14px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; gap: 6px; font: inherit;">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16M7 12h10M10 18h4"/></svg>
+        Filter
+      </button>
+    </div>
+    <footer class="legend">
+      <p>Color inherits from text — never hardcode <code>stroke="#000"</code>. Use <code>color: var(--fg-0)</code> on the parent + <code>stroke="currentColor"</code> on the SVG.</p>
+    </footer>
+  </main>
+</body>
+</html>

package/plugins/design/templates/design-system-inspiration/foundations/opacity.html ADDED Viewed

@@ -0,0 +1,45 @@
+<!--
+SPECIMEN: foundations-opacity
+DEMONSTRATES: opacity scale (0.4 / 0.6 / 0.8 / 1.0), disabled state, overlay veil
+COMPOSITION: 4-step opacity ladder + disabled-button + modal-veil sample
+COPY VOICE: terse
+WHEN SCAFFOLDED: foundations (universal)
+NOTES: Disabled = opacity 0.5 + pointer-events: none, NOT a separate token color. Veil = oklch(0 0 0 / 0.4–0.6) over the page. No --opacity-* tokens — opacity is a base value, not a token.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Foundations — opacity</title>
+  <link rel="stylesheet" href="../core/colors_and_type.css" />
+  <link rel="stylesheet" href="../core/preview/_layout.css" />
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Opacity</h1>
+    <p class="lede">A short ladder — light / medium / heavy / disabled. Used for overlays and the disabled state. Opacity isn't a token (it's a value); the ladder exists to keep usage consistent.</p>
+    <div class="grid">
+      <div class="swatch"><div style="height: 64px; background: var(--accent); opacity: 0.4;"></div><div class="meta"><strong>0.4</strong>light overlay</div></div>
+      <div class="swatch"><div style="height: 64px; background: var(--accent); opacity: 0.6;"></div><div class="meta"><strong>0.6</strong>medium veil</div></div>
+      <div class="swatch"><div style="height: 64px; background: var(--accent); opacity: 0.8;"></div><div class="meta"><strong>0.8</strong>heavy veil</div></div>
+      <div class="swatch"><div style="height: 64px; background: var(--accent); opacity: 1.0;"></div><div class="meta"><strong>1.0</strong>opaque</div></div>
+    </div>
+    <h2>Disabled state</h2>
+    <div class="row">
+      <button style="background: var(--accent); color: var(--accent-fg); border: 0; padding: 8px 14px; border-radius: var(--radius-sm);">Save</button>
+      <button style="background: var(--accent); color: var(--accent-fg); border: 0; padding: 8px 14px; border-radius: var(--radius-sm); opacity: 0.5; cursor: not-allowed;">Save (disabled)</button>
+    </div>
+    <h2>Modal veil</h2>
+    <div style="position: relative; background: var(--bg-0); padding: 32px; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); margin: 16px 0; min-height: 160px; overflow: hidden;">
+      <div style="position: absolute; inset: 0; background: oklch(0 0 0 / 0.5);"></div>
+      <div style="position: relative; background: var(--bg-1); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 16px; max-width: 320px; box-shadow: var(--shadow-lg);">
+        <strong>Modal on top of veil</strong>
+        <p style="color: var(--fg-1); margin: 4px 0 0;">Veil = oklch(0 0 0 / 0.5) over page surface.</p>
+      </div>
+    </div>
+  </main>
+</body>
+</html>

package/plugins/design/templates/design-system-inspiration/foundations/radii.html ADDED Viewed

@@ -0,0 +1,40 @@
+<!--
+SPECIMEN: foundations-radii
+DEMONSTRATES: --radius-xs, --radius-sm, --radius-md, --radius-lg, --radius-xl, --radius-pill
+COMPOSITION: 6 swatch tiles showing the radii ladder + applied to a real surface (card, button, pill)
+COPY VOICE: terse role labels
+WHEN SCAFFOLDED: foundations (almost always — every project has radii)
+NOTES: Pair this with components-buttons + components-cards which consume these. Pill must be 999px or `9999px`, never `calc(100%)`.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Foundations — radii</title>
+  <link rel="stylesheet" href="../core/colors_and_type.css" />
+  <link rel="stylesheet" href="../core/preview/_layout.css" />
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Radii</h1>
+    <p class="lede">Six steps from sharp inline pills to soft hero shapes. Stick to the ladder — every off-token corner radius is visual noise.</p>
+    <div class="grid">
+      <div class="swatch"><div style="height: 64px; background: var(--accent); border-radius: var(--radius-xs);"></div><div class="meta"><strong>--radius-xs</strong>inline chip</div></div>
+      <div class="swatch"><div style="height: 64px; background: var(--accent); border-radius: var(--radius-sm);"></div><div class="meta"><strong>--radius-sm</strong>buttons, inputs</div></div>
+      <div class="swatch"><div style="height: 64px; background: var(--accent); border-radius: var(--radius-md);"></div><div class="meta"><strong>--radius-md</strong>cards, panels</div></div>
+      <div class="swatch"><div style="height: 64px; background: var(--accent); border-radius: var(--radius-lg);"></div><div class="meta"><strong>--radius-lg</strong>dialogs</div></div>
+      <div class="swatch"><div style="height: 64px; background: var(--accent); border-radius: var(--radius-xl);"></div><div class="meta"><strong>--radius-xl</strong>hero shapes</div></div>
+      <div class="swatch"><div style="height: 64px; width: 64px; background: var(--accent); border-radius: var(--radius-pill); margin: 0 auto;"></div><div class="meta"><strong>--radius-pill</strong>avatars, pills</div></div>
+    </div>
+    <h2>In context</h2>
+    <div class="row">
+      <button style="background: var(--accent); color: var(--accent-fg); border: 0; padding: 8px 14px; border-radius: var(--radius-sm);">Button (sm)</button>
+      <div style="background: var(--bg-1); border: 1px solid var(--border-default); padding: 14px 18px; border-radius: var(--radius-md);">Card (md)</div>
+      <span style="background: var(--accent); color: var(--accent-fg); padding: 2px 10px; border-radius: var(--radius-pill); font-size: var(--type-xs);">Pill</span>
+      <div style="width: 32px; height: 32px; background: var(--bg-3); border: 1px solid var(--border-default); border-radius: var(--radius-pill);"></div>
+    </div>
+  </main>
+</body>
+</html>

package/plugins/design/templates/design-system-inspiration/foundations/selection.html ADDED Viewed

@@ -0,0 +1,45 @@
+<!--
+SPECIMEN: foundations-selection
+DEMONSTRATES: ::selection pseudo, multi-select row state, range selection
+COMPOSITION: paragraph with explicit text selection sample + multi-select list with shift+click range + checked state
+COPY VOICE: real product strings (player names, match notes)
+WHEN SCAFFOLDED: foundations (universal — every text surface + list has selection)
+NOTES: ::selection bg uses --accent at low opacity (oklch with 0.3 alpha) for readability with foreground. Row selection uses --bg-4 (the pressed-state token). Never use accent for row selection — rows aren't navigation.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Foundations — selection</title>
+  <link rel="stylesheet" href="../core/colors_and_type.css" />
+  <link rel="stylesheet" href="../core/preview/_layout.css" />
+  <style>
+    .demo-text ::selection,
+    .demo-text::selection { background: oklch(from var(--accent) l c h / 0.32); color: var(--fg-0); }
+    .multi-row { display: flex; gap: 12px; padding: 8px 12px; align-items: center; border-radius: var(--radius-sm); cursor: pointer; }
+    .multi-row.is-selected { background: var(--bg-4); }
+    .multi-row.is-range    { background: var(--bg-3); }
+    .multi-row .check { width: 16px; height: 16px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; }
+    .multi-row.is-selected .check, .multi-row.is-range .check { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
+  </style>
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Selection</h1>
+    <p class="lede">Two distinct concepts share the word "selection": text selection in flowing content, and multi-select in lists. They use different visual languages — text gets a tinted accent overlay, rows get the neutral pressed-state surface.</p>
+    <h2>Text selection</h2>
+    <p class="demo-text">Drag-select this paragraph. The highlight is the accent color at low opacity (32%) — readable on top of the body text. Selection works across line breaks and adapts to dark / light theme without manual tuning because OKLCH carries the alpha cleanly.</p>
+    <h2>Multi-select rows</h2>
+    <div style="background: var(--bg-1); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 8px; max-width: 360px;">
+      <div class="multi-row is-selected"><span class="check">✓</span> Kim Park · #9 forward</div>
+      <div class="multi-row is-range"><span class="check">✓</span> Jonas Weber · #14 midfield</div>
+      <div class="multi-row is-range"><span class="check">✓</span> Marta Silva · #4 defender</div>
+      <div class="multi-row is-range"><span class="check">✓</span> Liam Chen · #1 goalkeeper</div>
+      <div class="multi-row"><span class="check"></span> Sara Novak · #11 forward</div>
+    </div>
+    <p style="color: var(--fg-2); font-size: var(--type-xs); margin-top: 8px;">Click selects (--bg-4); Shift+Click extends a range (--bg-3); Esc clears.</p>
+  </main>
+</body>
+</html>