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/platform-mobile/components-bottom-sheet.html ADDED Viewed

@@ -0,0 +1,63 @@
+<!--
+SPECIMEN: platform-mobile-bottom-sheet
+DEMONSTRATES: bottom-anchored sheet with drag handle, snap points (peek / half / full), safe-area padding
+COMPOSITION: mobile chrome frame (375x812) with a half-snapped bottom sheet + peek state hint
+COPY VOICE: action-verb titles, terse body
+WHEN SCAFFOLDED: platform-mobile
+NOTES: Drag handle is a 36x4px pill, --fg-3 color, centered. Sheet has rounded top corners (--radius-lg) only — bottom is flush. Backdrop is partially transparent so user knows there's content beneath.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Platform mobile — bottom sheet</title>
+  <link rel="stylesheet" href="../core/colors_and_type.css" />
+  <link rel="stylesheet" href="../core/preview/_layout.css" />
+  <style>
+    .mobile-frame { width: 375px; height: 600px; background: var(--bg-0); border: 1px solid var(--border-strong); border-radius: 32px; margin: 16px 0; position: relative; overflow: hidden; }
+    .status-bar { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; color: var(--fg-1); font-size: var(--type-xs); }
+    .content { padding: 16px 20px; }
+    .sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--bg-1); border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-top: 1px solid var(--border-default); box-shadow: var(--shadow-lg); padding: 8px 20px 24px; }
+    .handle { width: 36px; height: 4px; background: var(--fg-3); border-radius: var(--radius-pill); margin: 0 auto 12px; }
+    .veil { position: absolute; inset: 0; background: oklch(0 0 0 / 0.4); }
+  </style>
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Bottom sheet</h1>
+    <p class="lede">Mobile bottom-anchored sheet with snap points — peek, half, full. Drag handle is the universal "I can be dragged" signal. Three snap states keep the sheet predictable.</p>
+    <div class="row" style="gap: 24px; align-items: flex-start;">
+      <div class="mobile-frame">
+        <div class="status-bar"><span>9:41</span><span>●</span></div>
+        <div class="content">
+          <h3 style="margin: 0 0 8px;">Roster</h3>
+          <p style="color: var(--fg-1); margin: 0;">24 players · last synced 2m ago</p>
+        </div>
+        <div class="veil"></div>
+        <div class="sheet" style="height: 50%;">
+          <div class="handle"></div>
+          <strong style="display: block; margin-bottom: 4px;">Edit player</strong>
+          <div style="color: var(--fg-1); font-size: var(--type-sm); margin-bottom: 16px;">Kim Park · #9 · captain</div>
+          <button style="background: var(--accent); color: var(--accent-fg); border: 0; padding: 10px 16px; border-radius: var(--radius-md); font: inherit; width: 100%;">Save changes</button>
+          <button style="background: transparent; color: var(--fg-1); border: 0; padding: 10px 16px; font: inherit; width: 100%; margin-top: 4px;">Cancel</button>
+        </div>
+      </div>
+      <div class="mobile-frame">
+        <div class="status-bar"><span>9:41</span><span>●</span></div>
+        <div class="content">
+          <h3 style="margin: 0 0 8px;">Match recap</h3>
+          <p style="color: var(--fg-1); margin: 0;">vs. Sparta U17 · final 3-1</p>
+        </div>
+        <div class="sheet" style="height: 96px;">
+          <div class="handle"></div>
+          <strong>Pull up for details</strong>
+          <div style="color: var(--fg-2); font-size: var(--type-xs); margin-top: 2px;">Stats · highlights · player ratings</div>
+        </div>
+      </div>
+    </div>
+    <footer class="legend"><p>Snap points: peek (96px, hint), half (50%, primary), full (90%, immersive). Don't expose more than 3 — sheets aren't pages.</p></footer>
+  </main>
+</body>
+</html>

package/plugins/design/templates/design-system-inspiration/platform-mobile/components-pull-to-refresh.html ADDED Viewed

@@ -0,0 +1,74 @@
+<!--
+SPECIMEN: platform-mobile-pull-to-refresh
+DEMONSTRATES: 3 states of pull-to-refresh — idle, pulling (threshold), refreshing
+COMPOSITION: mobile-frame mock × 3 states with chevron / spinner indicator
+COPY VOICE: silent or 1-word ("Refreshing")
+WHEN SCAFFOLDED: platform-mobile
+NOTES: Threshold is ~80px pull. Indicator (chevron) rotates 180° when crossed. After release, spinner replaces chevron until data loads. Don't auto-fire — user gesture only.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Platform mobile — pull to refresh</title>
+  <link rel="stylesheet" href="../core/colors_and_type.css" />
+  <link rel="stylesheet" href="../core/preview/_layout.css" />
+  <style>
+    .mobile-frame { width: 280px; height: 480px; background: var(--bg-0); border: 1px solid var(--border-strong); border-radius: 32px; position: relative; overflow: hidden; }
+    .status-bar { height: 44px; display: flex; align-items: center; padding: 0 20px; color: var(--fg-1); font-size: var(--type-xs); justify-content: space-between; }
+    .ptr-indicator { display: flex; justify-content: center; align-items: center; height: 60px; color: var(--fg-2); font-size: var(--type-xs); flex-direction: column; gap: 4px; }
+    .ptr-indicator svg { transition: transform var(--dur-flip) var(--ease-out); }
+    .ptr-indicator.is-pull svg { transform: rotate(180deg); color: var(--accent); }
+    .ptr-content { padding: 12px 20px; }
+    .ptr-content .item { padding: 12px 0; border-bottom: 1px solid var(--border-subtle); }
+    .ptr-content .item:last-child { border-bottom: 0; }
+    .spinner { width: 18px; height: 18px; border: 2px solid var(--bg-3); border-top-color: var(--accent); border-radius: 50%; animation: spin var(--dur-route) linear infinite; }
+    @keyframes spin { to { transform: rotate(360deg); } }
+    @media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
+  </style>
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Pull to refresh</h1>
+    <p class="lede">Three states: idle (no indicator), pulling past threshold (chevron rotated, accent color, "Release to refresh"), refreshing (spinner replaces chevron until done).</p>
+    <div class="row" style="gap: 16px; align-items: flex-start;">
+      <div class="mobile-frame">
+        <div class="status-bar"><span>9:41</span><span>●</span></div>
+        <div class="ptr-content">
+          <div class="item">Match recap · 19:42</div>
+          <div class="item">Roster updated · 18:15</div>
+          <div class="item">Captain assigned · 17:30</div>
+        </div>
+        <div style="position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; color: var(--fg-2); font-size: var(--type-xs);">idle</div>
+      </div>
+      <div class="mobile-frame">
+        <div class="status-bar"><span>9:41</span><span>●</span></div>
+        <div class="ptr-indicator is-pull">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M6 9l6 6 6-6"/></svg>
+          <span style="color: var(--accent);">Release to refresh</span>
+        </div>
+        <div class="ptr-content" style="margin-top: 12px;">
+          <div class="item">Match recap · 19:42</div>
+          <div class="item">Roster updated · 18:15</div>
+        </div>
+        <div style="position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; color: var(--fg-2); font-size: var(--type-xs);">pulling past threshold</div>
+      </div>
+      <div class="mobile-frame">
+        <div class="status-bar"><span>9:41</span><span>●</span></div>
+        <div class="ptr-indicator">
+          <div class="spinner"></div>
+          <span>Refreshing</span>
+        </div>
+        <div class="ptr-content" style="margin-top: 12px;">
+          <div class="item">Match recap · 19:42</div>
+          <div class="item">Roster updated · 18:15</div>
+        </div>
+        <div style="position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; color: var(--fg-2); font-size: var(--type-xs);">refreshing</div>
+      </div>
+    </div>
+  </main>
+</body>
+</html>

package/plugins/design/templates/design-system-inspiration/platform-mobile/components-segmented-control.html ADDED Viewed

@@ -0,0 +1,51 @@
+<!--
+SPECIMEN: platform-mobile-segmented-control
+DEMONSTRATES: iOS-style segmented control (pill background, active segment with bg + shadow), 2/3/4-segment variants
+COMPOSITION: 3 segmented controls (2-segment toggle, 3-segment date range, 4-segment filter) on mobile chrome
+COPY VOICE: 1-word labels ("Today", "Week", "Month", "All time")
+WHEN SCAFFOLDED: platform-mobile (and desktop where Apple-aesthetic matters)
+NOTES: Background of the unselected track is --bg-3; active segment is --bg-1 (lifts forward via small shadow). Border between segments is implicit (track padding does the work). Animate transform on the active indicator, not background.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Platform mobile — segmented control</title>
+  <link rel="stylesheet" href="../core/colors_and_type.css" />
+  <link rel="stylesheet" href="../core/preview/_layout.css" />
+  <style>
+    .seg { display: inline-flex; background: var(--bg-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 3px; gap: 2px; }
+    .seg button { background: transparent; border: 0; color: var(--fg-1); font: inherit; font-size: var(--type-sm); padding: 5px 14px; border-radius: calc(var(--radius-md) - 3px); cursor: pointer; transition: background var(--dur-flip) var(--ease-out); }
+    .seg button.is-active { background: var(--bg-1); color: var(--fg-0); box-shadow: var(--shadow-sm); font-weight: 500; }
+  </style>
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Segmented control</h1>
+    <p class="lede">Pill-tracked, active segment lifts forward with a soft shadow. Use for view-mode switches (List / Grid), date ranges (Today / Week / Month), and filter sets — never for primary actions.</p>
+    <h2>2-segment toggle</h2>
+    <div class="seg">
+      <button class="is-active">List</button>
+      <button>Grid</button>
+    </div>
+    <h2>3-segment date range</h2>
+    <div class="seg">
+      <button>Today</button>
+      <button class="is-active">Week</button>
+      <button>Month</button>
+    </div>
+    <h2>4-segment filter</h2>
+    <div class="seg">
+      <button class="is-active">All</button>
+      <button>Live</button>
+      <button>Upcoming</button>
+      <button>Past</button>
+    </div>
+    <footer class="legend"><p>If you have 5+ segments, switch to <code>components-tabs</code> — segmented controls degrade in usability past 4. Tabs scroll; segmented controls don't.</p></footer>
+  </main>
+</body>
+</html>

package/plugins/design/templates/design-system-inspiration/platform-mobile/components-tab-bar.html ADDED Viewed

@@ -0,0 +1,57 @@
+<!--
+SPECIMEN: platform-mobile-tab-bar
+DEMONSTRATES: bottom tab bar with 4-5 tabs, icon + label, active state via accent color (not background fill), safe-area padding for home indicator
+COMPOSITION: mobile frame with 5-tab bar, one tab active; second frame shows 4-tab variant (more common for simpler apps)
+COPY VOICE: 1-word tab labels ("Roster", "Stats", "Profile") — never 2-3 word labels
+WHEN SCAFFOLDED: platform-mobile
+NOTES: Tab labels stay always-visible (Material 3 / iOS HIG agree on this). Active state uses --accent for icon + label color, not for the background. Bottom safe-area = 34px on iPhone (home indicator).
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Platform mobile — tab bar</title>
+  <link rel="stylesheet" href="../core/colors_and_type.css" />
+  <link rel="stylesheet" href="../core/preview/_layout.css" />
+  <style>
+    .mobile-frame { width: 320px; height: 520px; background: var(--bg-0); border: 1px solid var(--border-strong); border-radius: 32px; position: relative; overflow: hidden; }
+    .status-bar { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; color: var(--fg-1); font-size: var(--type-xs); }
+    .body { height: calc(100% - 44px - 84px); padding: 16px 20px; }
+    .tab-bar { position: absolute; bottom: 0; left: 0; right: 0; display: flex; background: var(--bg-1); border-top: 1px solid var(--border-default); padding: 8px 0 34px; }
+    .tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px; color: var(--fg-2); font-size: var(--type-xs); cursor: pointer; }
+    .tab.is-active { color: var(--accent); }
+    .tab svg { color: currentColor; }
+  </style>
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Tab bar</h1>
+    <p class="lede">Bottom tabs on mobile. Labels stay always visible — never hide them, no matter how small the screen. Active state colors icon + label with the accent; never fills the background.</p>
+    <div class="row" style="gap: 24px; align-items: flex-start;">
+      <div class="mobile-frame">
+        <div class="status-bar"><span>9:41</span><span>●</span></div>
+        <div class="body"><h3 style="margin: 0;">Roster</h3><p style="color: var(--fg-1); margin: 4px 0 0;">24 players · 12 available</p></div>
+        <nav class="tab-bar">
+          <div class="tab is-active"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 6h18M3 12h18M3 18h18"/></svg><span>Roster</span></div>
+          <div class="tab"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 18V8M9 18V4M15 18v-7M21 18V12"/></svg><span>Stats</span></div>
+          <div class="tab"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path d="M12 8v8M8 12h8"/></svg><span>Match</span></div>
+          <div class="tab"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg><span>Inbox</span></div>
+          <div class="tab"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7"/></svg><span>Profile</span></div>
+        </nav>
+      </div>
+      <div class="mobile-frame">
+        <div class="status-bar"><span>9:41</span><span>●</span></div>
+        <div class="body"><h3 style="margin: 0;">Match</h3></div>
+        <nav class="tab-bar">
+          <div class="tab"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 12l9-8 9 8M5 10v10h14V10"/></svg><span>Home</span></div>
+          <div class="tab"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="11" cy="11" r="7"/><path d="m20 20-3-3"/></svg><span>Search</span></div>
+          <div class="tab is-active"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg><span>Match</span></div>
+          <div class="tab"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7"/></svg><span>Me</span></div>
+        </nav>
+      </div>
+    </div>
+  </main>
+</body>
+</html>

package/plugins/design/templates/design-system-inspiration/platform-mobile/ui_kits-mobile-index.html ADDED Viewed

@@ -0,0 +1,58 @@
+<!--
+SPECIMEN: platform-mobile-ui-kits-index
+DEMONSTRATES: cover page for mobile UI kit — lists all mobile-specific specimens with thumbnails + links
+COMPOSITION: index page with 5 mobile specimens (bottom-sheet, pull-to-refresh, tab-bar, segmented-control, …) each as a thumbnail card
+COPY VOICE: terse — this is an index, not a tutorial
+WHEN SCAFFOLDED: platform-mobile (only when project actually has mobile)
+NOTES: This is the "ui_kits/mobile/index.html" entry point that the dev server links to. Each card links to a sub-specimen.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>UI kits — mobile</title>
+  <link rel="stylesheet" href="../core/colors_and_type.css" />
+  <link rel="stylesheet" href="../core/preview/_layout.css" />
+  <style>
+    .kit-card { background: var(--bg-1); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 16px; text-decoration: none; color: inherit; display: grid; gap: 8px; transition: background var(--dur-flip) var(--ease-out), border-color var(--dur-flip) var(--ease-out); }
+    .kit-card:hover { background: var(--bg-2); border-color: var(--border-strong); }
+    .kit-card .thumb { height: 96px; background: var(--bg-3); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--fg-2); font-size: var(--type-xs); }
+    .kit-card .title { font-weight: 500; }
+    .kit-card .body { color: var(--fg-1); font-size: var(--type-sm); margin: 0; }
+  </style>
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Mobile UI kit</h1>
+    <p class="lede">Mobile-specific patterns — gestures, native chrome, safe areas. Browse + open each specimen below in the dev server.</p>
+    <div class="grid" style="grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));">
+      <a href="./components-bottom-sheet.html" class="kit-card">
+        <div class="thumb">▭▭▭</div>
+        <span class="title">Bottom sheet</span>
+        <p class="body">Drag handle, snap points, safe-area padding.</p>
+      </a>
+      <a href="./components-pull-to-refresh.html" class="kit-card">
+        <div class="thumb">↓ ↻</div>
+        <span class="title">Pull to refresh</span>
+        <p class="body">Idle / pulling / refreshing states.</p>
+      </a>
+      <a href="./components-tab-bar.html" class="kit-card">
+        <div class="thumb">▢▢▣▢▢</div>
+        <span class="title">Tab bar</span>
+        <p class="body">4–5 bottom tabs with always-visible labels.</p>
+      </a>
+      <a href="./components-segmented-control.html" class="kit-card">
+        <div class="thumb">▢▣▢</div>
+        <span class="title">Segmented control</span>
+        <p class="body">2–4 mutually exclusive options.</p>
+      </a>
+      <a href="../universal/components-dialogs.html" class="kit-card">
+        <div class="thumb">⬚</div>
+        <span class="title">Dialogs</span>
+        <p class="body">Modal, sheet, alert (shared with universal).</p>
+      </a>
+    </div>
+  </main>
+</body>
+</html>

package/plugins/design/templates/design-system-inspiration/platform-mobile/ui_kits-mobile-showcase.html ADDED Viewed

@@ -0,0 +1,237 @@
+<!--
+SPECIMEN: ui_kits/mobile/index
+DEMONSTRATES: Core tokens in a mobile product surface (375 × 812, iPhone-class artboard)
+COMPOSITION: full-bleed mobile screen with top bar (status + nav), main scroll content (header + card list), bottom tab bar
+  - top bar (48px tall):     back chevron + screen title centered + action button right
+  - main content:            section header + scrollable card list with realistic data rows
+  - bottom tab bar (64px):   3–4 tabs with icon + label; active tab uses --accent
+COPY VOICE: real product strings — same family-flavored copy as desktop counterpart; substitute during scaffold
+WHEN SCAFFOLDED: conditional on Q3 platforms ∈ {mobile + desktop, tablet-first}
+NOTES:
+  - Touch targets ≥ 44×44 — the tab bar items and the action button are sized accordingly.
+  - The card list is the primary content pattern on mobile; cards are full-width with 16px gutters.
+  - Bottom tab bar uses --bg-1 with a 1px top border in --border-subtle; the active tab is the only place --accent fills a region.
+  - This is a single-screen artboard, not a multi-screen flow — the bootstrap output shows the DS on one mobile surface to prove tokens compose at this size.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+  <title>UI kit · mobile · index</title>
+  <link rel="stylesheet" href="../core/colors_and_type.css" />
+  <link rel="stylesheet" href="../core/preview/_layout.css" />
+  <style>
+    body { padding: 0; margin: 0; background: oklch(8% 0.005 60); display: grid; place-items: start center; min-height: 100vh; }
+    .specimen { max-width: none; margin: 0; padding: var(--space-5) 0; }
+    .artboard {
+      width: 375px;
+      height: 812px;
+      background: var(--bg-0);
+      border: 1px solid var(--border-default);
+      border-radius: 40px;
+      overflow: hidden;
+      display: grid;
+      grid-template-rows: 48px 1fr 64px;
+      box-shadow: var(--shadow-lg);
+    }
+    .topbar {
+      display: flex;
+      align-items: center;
+      gap: var(--space-2);
+      padding: 0 var(--space-3);
+      background: var(--bg-1);
+      border-bottom: 1px solid var(--border-subtle);
+    }
+    .icon-btn {
+      min-width: 44px;
+      min-height: 44px;
+      display: grid;
+      place-items: center;
+      background: transparent;
+      border: 0;
+      color: var(--fg-1);
+      cursor: pointer;
+      border-radius: var(--radius-sm);
+      transition: background var(--dur-flip) var(--ease-out);
+      font-family: var(--font-mono);
+      font-size: var(--type-md);
+    }
+    .icon-btn:hover { background: var(--bg-2); color: var(--fg-0); }
+    .topbar .title {
+      flex: 1;
+      text-align: center;
+      font-family: var(--font-display);
+      font-size: var(--type-md);
+      font-weight: 600;
+      letter-spacing: var(--tracking-display);
+      color: var(--fg-0);
+    }
+    .main {
+      overflow-y: auto;
+      padding: var(--space-3);
+    }
+    .section-head {
+      display: flex;
+      justify-content: space-between;
+      align-items: baseline;
+      margin: 0 0 var(--space-3);
+      padding: 0 var(--space-2);
+    }
+    .section-head h2 {
+      font-family: var(--font-display);
+      font-size: var(--type-lg);
+      line-height: var(--lh-lg);
+      letter-spacing: var(--tracking-display);
+      font-weight: 600;
+      margin: 0;
+      color: var(--fg-0);
+    }
+    .section-head .meta {
+      font-family: var(--font-mono);
+      font-size: var(--type-xs);
+      color: var(--fg-2);
+    }
+    .row-card {
+      background: var(--bg-1);
+      border: 1px solid var(--border-subtle);
+      border-radius: var(--radius-md);
+      padding: var(--space-3) var(--space-4);
+      margin: 0 0 var(--space-2);
+      display: grid;
+      grid-template-columns: 36px 1fr auto;
+      align-items: center;
+      gap: var(--space-3);
+      transition: background var(--dur-flip) var(--ease-out);
+    }
+    .row-card:hover { background: var(--bg-2); }
+    .row-card .avatar {
+      width: 36px; height: 36px;
+      border-radius: var(--radius-pill);
+      background: var(--bg-3);
+      border: 1px solid var(--border-default);
+      display: grid; place-items: center;
+      color: var(--fg-0);
+      font-size: var(--type-xs);
+      font-weight: 600;
+      font-family: var(--font-mono);
+    }
+    .row-card .name { color: var(--fg-0); font-size: var(--type-sm); font-weight: 500; }
+    .row-card .sub  { color: var(--fg-2); font-size: var(--type-xs); font-family: var(--font-mono); }
+    .row-card .stat { color: var(--accent); font-family: var(--font-mono); font-size: var(--type-sm); font-weight: 500; min-width: 44px; text-align: right; }
+    .tabbar {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      background: var(--bg-1);
+      border-top: 1px solid var(--border-subtle);
+    }
+    .tab {
+      display: grid;
+      justify-items: center;
+      gap: 2px;
+      padding: var(--space-2) 0;
+      background: transparent;
+      border: 0;
+      cursor: pointer;
+      color: var(--fg-2);
+      font: inherit;
+      transition: color var(--dur-flip) var(--ease-out);
+    }
+    .tab .icon { font-family: var(--font-mono); font-size: var(--type-md); }
+    .tab .label { font-size: var(--type-xs); font-family: var(--font-mono); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
+    .tab.is-active { color: var(--accent); }
+  </style>
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <div class="artboard">
+      <header class="topbar">
+        <button class="icon-btn" aria-label="Back">←</button>
+        <div class="title">Squad</div>
+        <button class="icon-btn" aria-label="Filter">⌄</button>
+      </header>
+      <section class="main">
+        <div class="section-head">
+          <h2>Starting XI</h2>
+          <span class="meta">11 / 11</span>
+        </div>
+        <article class="row-card">
+          <div class="avatar">KP</div>
+          <div>
+            <div class="name">Kim Park</div>
+            <div class="sub">#9 · forward · captain</div>
+          </div>
+          <div class="stat">14 g</div>
+        </article>
+        <article class="row-card">
+          <div class="avatar">JW</div>
+          <div>
+            <div class="name">Jonas Weber</div>
+            <div class="sub">#8 · midfield</div>
+          </div>
+          <div class="stat">9 a</div>
+        </article>
+        <article class="row-card">
+          <div class="avatar">MS</div>
+          <div>
+            <div class="name">Marta Silva</div>
+            <div class="sub">#4 · defender</div>
+          </div>
+          <div class="stat">11 cs</div>
+        </article>
+        <article class="row-card">
+          <div class="avatar">LC</div>
+          <div>
+            <div class="name">Liam Chen</div>
+            <div class="sub">#1 · goalkeeper</div>
+          </div>
+          <div class="stat">0.84</div>
+        </article>
+        <article class="row-card">
+          <div class="avatar">AO</div>
+          <div>
+            <div class="name">Amara Okafor</div>
+            <div class="sub">#10 · winger</div>
+          </div>
+          <div class="stat">6 g</div>
+        </article>
+        <div class="section-head" style="margin-top: var(--space-5);">
+          <h2>Bench</h2>
+          <span class="meta">7 ready</span>
+        </div>
+        <article class="row-card">
+          <div class="avatar">RA</div>
+          <div>
+            <div class="name">Rita Alvares</div>
+            <div class="sub">#15 · midfield</div>
+          </div>
+          <div class="stat">2 g</div>
+        </article>
+        <article class="row-card">
+          <div class="avatar">TK</div>
+          <div>
+            <div class="name">Tom Kwon</div>
+            <div class="sub">#16 · defender</div>
+          </div>
+          <div class="stat">0 g</div>
+        </article>
+      </section>
+      <nav class="tabbar">
+        <button class="tab is-active"><span class="icon" aria-hidden="true">⌘</span><span class="label">Squad</span></button>
+        <button class="tab"><span class="icon" aria-hidden="true">▦</span><span class="label">Matches</span></button>
+        <button class="tab"><span class="icon" aria-hidden="true">⟐</span><span class="label">Scout</span></button>
+        <button class="tab"><span class="icon" aria-hidden="true">≡</span><span class="label">More</span></button>
+      </nav>
+    </div>
+  </main>
+</body>
+</html>

package/plugins/design/templates/design-system-inspiration/status/colors-status.html ADDED Viewed

@@ -0,0 +1,49 @@
+<!--
+SPECIMEN: status-colors
+DEMONSTRATES: --status-success, --status-warn, --status-error, --status-info, plus optional --status-offline
+COMPOSITION: 4-state swatch grid + contextual badges + in-flow callouts
+COPY VOICE: status-named ("live", "saved", "deferred", "couldn't sync") — never abstract labels
+WHEN SCAFFOLDED: status family (IF "status" ∈ activeFamilies — almost always; rare opt-out)
+NOTES: Status family is SEPARATE from accent. Don't reuse accent for success — accent is for primary action, success is for "things worked". Greens for success, ambers for warn, reds for error, blues for info.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Status — colors</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>Status colors</h1>
+    <p class="lede">Four status semantics — success, warn, error, info. Separate from the accent family because actions and outcomes need distinct signals: accent says "do this", status says "this happened".</p>
+    <div class="grid">
+      <div class="swatch"><div style="height: 64px; background: var(--status-success);"></div><div class="meta"><strong>--status-success</strong>saved / synced / live</div></div>
+      <div class="swatch"><div style="height: 64px; background: var(--status-warn);"></div><div class="meta"><strong>--status-warn</strong>deferred / due soon</div></div>
+      <div class="swatch"><div style="height: 64px; background: var(--status-error);"></div><div class="meta"><strong>--status-error</strong>failed / blocked</div></div>
+      <div class="swatch"><div style="height: 64px; background: var(--status-info);"></div><div class="meta"><strong>--status-info</strong>note / heads-up</div></div>
+    </div>
+    <h2>In context</h2>
+    <div class="row" style="gap: 8px;">
+      <span style="background: var(--status-success); color: var(--accent-fg); padding: 2px 10px; border-radius: var(--radius-pill); font-size: var(--type-xs);">● live</span>
+      <span style="background: var(--status-warn); color: var(--accent-fg); padding: 2px 10px; border-radius: var(--radius-pill); font-size: var(--type-xs);">due in 2h</span>
+      <span style="background: var(--status-error); color: var(--accent-fg); padding: 2px 10px; border-radius: var(--radius-pill); font-size: var(--type-xs);">sync failed</span>
+      <span style="background: var(--status-info); color: var(--accent-fg); padding: 2px 10px; border-radius: var(--radius-pill); font-size: var(--type-xs);">new feature</span>
+    </div>
+    <h2>Inline tags (low-density)</h2>
+    <div class="row" style="gap: 8px;">
+      <span style="border: 1px solid var(--status-success); color: var(--status-success); padding: 2px 8px; border-radius: var(--radius-sm); font-size: var(--type-xs);">passed</span>
+      <span style="border: 1px solid var(--status-warn); color: var(--status-warn); padding: 2px 8px; border-radius: var(--radius-sm); font-size: var(--type-xs);">pending</span>
+      <span style="border: 1px solid var(--status-error); color: var(--status-error); padding: 2px 8px; border-radius: var(--radius-sm); font-size: var(--type-xs);">failed</span>
+    </div>
+    <footer class="legend">
+      <p>Use the solid-fill form for high-contrast UI elements (badges, callouts). Use the outline form for low-noise inline tags inside dense data tables.</p>
+    </footer>
+  </main>
+</body>
+</html>