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/patterns/patterns-onboarding.html ADDED Viewed

@@ -0,0 +1,71 @@
+<!--
+SPECIMEN: pattern-onboarding
+DEMONSTRATES: welcome screen, 3-step tour, dismissible coachmarks
+COMPOSITION: welcome card + 3-step horizontal flow + tooltip-style coachmark on an inline element
+COPY VOICE: friendly imperative ("Connect your league account") — never "Welcome to the future of…"
+WHEN SCAFFOLDED: patterns (universal — most consumer apps have onboarding)
+NOTES: Onboarding ≤ 3 steps. More than that = product complexity to fix, not UI to add. Skip button always present in top-right. Progress dots show position; don't number 1/3 unless steps are non-linear.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Pattern — onboarding</title>
+  <link rel="stylesheet" href="../core/colors_and_type.css" />
+  <link rel="stylesheet" href="../core/preview/_layout.css" />
+  <style>
+    .ob-card { background: var(--bg-1); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 32px; max-width: 480px; position: relative; box-shadow: var(--shadow-md); margin: 0 0 24px; }
+    .ob-card .skip { position: absolute; top: 16px; right: 16px; background: transparent; border: 0; color: var(--fg-2); font: inherit; font-size: var(--type-sm); cursor: pointer; }
+    .ob-card h2 { margin: 0 0 8px; font-family: var(--font-display); font-size: var(--type-xl); font-weight: 600; }
+    .ob-card p { color: var(--fg-1); margin: 0 0 20px; }
+    .ob-card .actions { display: flex; justify-content: space-between; align-items: center; }
+    .dots { display: flex; gap: 6px; }
+    .dots .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-3); }
+    .dots .dot.is-active { background: var(--accent); }
+    .coachmark-frame { position: relative; background: var(--bg-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 32px; min-height: 200px; }
+    .coachmark-target { background: var(--bg-3); border: 1px solid var(--border-default); padding: 8px 12px; border-radius: var(--radius-sm); display: inline-block; outline: 2px solid var(--accent); outline-offset: 4px; }
+    .coachmark { position: absolute; background: var(--bg-1); border: 1px solid var(--border-default); box-shadow: var(--shadow-md); padding: 12px 14px; border-radius: var(--radius-md); width: 220px; }
+  </style>
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Onboarding</h1>
+    <p class="lede">Three forms — welcome screen, multi-step tour, inline coachmark. Cap onboarding at 3 steps; more than that signals product complexity to simplify, not a longer flow to design.</p>
+    <h2>Welcome screen</h2>
+    <div class="ob-card">
+      <button class="skip">Skip</button>
+      <h2>Welcome to Sideline</h2>
+      <p>Three quick steps to get your squad set up. Should take about a minute.</p>
+      <div class="actions">
+        <div class="dots"><span class="dot is-active"></span><span class="dot"></span><span class="dot"></span></div>
+        <button style="background: var(--accent); color: var(--accent-fg); border: 0; padding: 8px 16px; border-radius: var(--radius-sm); font: inherit;">Let's go</button>
+      </div>
+    </div>
+    <h2>Step 2 of 3</h2>
+    <div class="ob-card">
+      <button class="skip">Skip</button>
+      <h2>Connect your league account</h2>
+      <p>We'll pull your fixtures and rosters automatically. You can do this later from Settings.</p>
+      <div class="actions">
+        <div class="dots"><span class="dot"></span><span class="dot is-active"></span><span class="dot"></span></div>
+        <div style="display: flex; gap: 8px;">
+          <button style="background: transparent; color: var(--fg-1); border: 0; padding: 8px 16px; font: inherit;">Do it later</button>
+          <button style="background: var(--accent); color: var(--accent-fg); border: 0; padding: 8px 16px; border-radius: var(--radius-sm); font: inherit;">Connect</button>
+        </div>
+      </div>
+    </div>
+    <h2>Inline coachmark</h2>
+    <div class="coachmark-frame">
+      <p style="margin: 0 0 12px; color: var(--fg-1);">After you create a canvas, the inspector lives here →</p>
+      <span class="coachmark-target">Inspector</span>
+      <div class="coachmark" style="top: 90px; left: 180px;">
+        <strong>Cmd+click to scope edits</strong>
+        <p style="color: var(--fg-1); font-size: var(--type-sm); margin: 4px 0 0;">Click any element to focus your next edit on just that piece.</p>
+      </div>
+    </div>
+  </main>
+</body>
+</html>

package/plugins/design/templates/design-system-inspiration/patterns/patterns-pricing.html ADDED Viewed

@@ -0,0 +1,83 @@
+<!--
+SPECIMEN: pattern-pricing
+DEMONSTRATES: 3-tier pricing table with feature list, highlighted "popular" tier, monthly/annual toggle
+COMPOSITION: monthly/annual segmented control + 3 pricing cards (Free / Club / Federation) + comparison row
+COPY VOICE: outcome-named features ("Unlimited rosters", "Match recap exports") — never feature dumps
+WHEN SCAFFOLDED: patterns (consumer + marketing flavored)
+NOTES: 3 tiers is the sweet spot (decision paralysis past 4). Middle tier is usually "popular" — pre-selected. Feature list = positive checks (no "Limited to 3 squads" — phrase as "Up to 3 squads"). Match the accent on the popular card border.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Pattern — pricing</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; margin: 0 0 24px; }
+    .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; }
+    .seg button.is-active { background: var(--bg-1); color: var(--fg-0); box-shadow: var(--shadow-sm); font-weight: 500; }
+    .tier { background: var(--bg-1); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 24px; display: grid; gap: 16px; }
+    .tier.popular { border-color: var(--accent); position: relative; }
+    .tier.popular::before { content: 'Most popular'; position: absolute; top: -10px; left: 24px; background: var(--accent); color: var(--accent-fg); padding: 2px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 500; }
+    .tier .name { font-family: var(--font-display); font-size: var(--type-lg); font-weight: 600; }
+    .tier .price { display: flex; align-items: baseline; gap: 4px; }
+    .tier .price .num { font-family: var(--font-display); font-size: var(--type-3xl); font-weight: 600; }
+    .tier .price .per { color: var(--fg-2); }
+    .tier ul { margin: 0; padding-left: 0; list-style: none; color: var(--fg-1); font-size: var(--type-sm); display: grid; gap: 6px; }
+    .tier li::before { content: '✓'; color: var(--status-success); margin-right: 8px; }
+    .tier .cta { background: var(--accent); color: var(--accent-fg); border: 0; padding: 10px 14px; border-radius: var(--radius-sm); font: inherit; font-weight: 500; cursor: pointer; }
+    .tier:not(.popular) .cta { background: var(--bg-3); color: var(--fg-0); border: 1px solid var(--border-default); }
+  </style>
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Pricing</h1>
+    <p class="lede">Three tiers — Free, Club, Federation. Middle tier pre-marked as "Most popular". Toggle for monthly vs annual.</p>
+    <div class="seg">
+      <button>Monthly</button>
+      <button class="is-active">Annual <span style="color: var(--accent);">−20%</span></button>
+    </div>
+    <div class="grid" style="grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px;">
+      <div class="tier">
+        <div class="name">Free</div>
+        <div class="price"><span class="num">$0</span><span class="per">/month</span></div>
+        <ul>
+          <li>1 squad</li>
+          <li>5 match recaps / month</li>
+          <li>Roster sync (manual)</li>
+        </ul>
+        <button class="cta">Get started</button>
+      </div>
+      <div class="tier popular">
+        <div class="name">Club</div>
+        <div class="price"><span class="num">$19</span><span class="per">/month</span></div>
+        <ul>
+          <li>Up to 5 squads</li>
+          <li>Unlimited match recaps</li>
+          <li>League sync (automatic)</li>
+          <li>Match recap exports</li>
+          <li>Email + chat support</li>
+        </ul>
+        <button class="cta">Start 14-day trial</button>
+      </div>
+      <div class="tier">
+        <div class="name">Federation</div>
+        <div class="price"><span class="num">Custom</span></div>
+        <ul>
+          <li>Everything in Club</li>
+          <li>Unlimited squads</li>
+          <li>Custom league integrations</li>
+          <li>SSO + audit log</li>
+          <li>Dedicated support</li>
+        </ul>
+        <button class="cta">Talk to sales</button>
+      </div>
+    </div>
+  </main>
+</body>
+</html>

package/plugins/design/templates/design-system-inspiration/platform-desktop/components-resize-panels.html ADDED Viewed

@@ -0,0 +1,63 @@
+<!--
+SPECIMEN: platform-desktop-resize-panels
+DEMONSTRATES: split-pane resizer, hover state on the drag handle, snap-to-default, min-width constraints
+COMPOSITION: 3-pane layout (sidebar | main | inspector) with visible drag handles
+COPY VOICE: terse pane labels
+WHEN SCAFFOLDED: platform-desktop
+NOTES: Drag handle is a 4px-wide invisible hit area centered on a 1px visible border. Cursor: col-resize. On double-click, snap to default width. Min width prevents collapse-to-zero (better UX than allowing zero).
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Platform desktop — resize panels</title>
+  <link rel="stylesheet" href="../core/colors_and_type.css" />
+  <link rel="stylesheet" href="../core/preview/_layout.css" />
+  <style>
+    .layout { display: grid; grid-template-columns: 220px 4px 1fr 4px 280px; height: 360px; background: var(--bg-1); border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; }
+    .pane { padding: 12px 16px; overflow: auto; }
+    .pane.sidebar { background: var(--bg-1); border-right: 1px solid var(--border-subtle); }
+    .pane.main { background: var(--bg-0); }
+    .pane.inspector { background: var(--bg-1); border-left: 1px solid var(--border-subtle); }
+    .resizer { background: var(--border-subtle); cursor: col-resize; transition: background var(--dur-flip) var(--ease-out); }
+    .resizer:hover { background: var(--accent); }
+    .pane h4 { font-size: var(--type-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-2); margin: 0 0 8px; }
+    .pane ul { margin: 0; padding-left: 16px; color: var(--fg-1); font-size: var(--type-sm); }
+  </style>
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Resizable panels</h1>
+    <p class="lede">3-pane desktop layout with drag-resize handles. Each handle is a 1px visible border with a 4px hit area; cursor changes to <code>col-resize</code> on hover. Double-click snaps to default width.</p>
+    <div class="layout">
+      <aside class="pane sidebar">
+        <h4>Squad</h4>
+        <ul>
+          <li>Roster</li>
+          <li>Bench</li>
+          <li>Reserves</li>
+        </ul>
+      </aside>
+      <div class="resizer" title="Drag to resize · double-click to reset"></div>
+      <main class="pane main">
+        <h4>Match recap · vs. Sparta U17</h4>
+        <p style="color: var(--fg-1); margin: 4px 0 0;">Final 3-1 · captain hat-trick · auto-saved 19:42</p>
+      </main>
+      <div class="resizer" title="Drag to resize · double-click to reset"></div>
+      <aside class="pane inspector">
+        <h4>Inspector</h4>
+        <p style="color: var(--fg-1); font-size: var(--type-sm); margin: 0;">Selected: Kim Park · #9</p>
+        <ul>
+          <li>24 matches</li>
+          <li>14 goals · 5 assists</li>
+        </ul>
+      </aside>
+    </div>
+    <footer class="legend">
+      <p>Min widths: sidebar 180px, inspector 240px, main flex (no max). Persisting widths to localStorage is the user's friend — restoring last layout on reload removes a constant tax.</p>
+    </footer>
+  </main>
+</body>
+</html>

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

@@ -0,0 +1,55 @@
+<!--
+SPECIMEN: platform-desktop-ui-kits-index
+DEMONSTRATES: cover page for desktop UI kit — lists all desktop-specific specimens with thumbnails
+COMPOSITION: index page with desktop specimens (resize-panels) + cross-references to universal (tables, dialogs, etc.)
+COPY VOICE: terse — this is an index, not a tutorial
+WHEN SCAFFOLDED: platform-desktop
+NOTES: Desktop kit is smaller than mobile because most desktop UX lives in /universal/ (tables, dialogs, tooltips work on desktop natively). Only desktop-only patterns (resizable panels, command-palette, keyboard shortcuts) get their own specimens.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>UI kits — desktop</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-family: var(--font-mono); 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>Desktop UI kit</h1>
+    <p class="lede">Desktop-specific patterns. Most desktop UX uses the <code>universal/</code> specimens (tables, dialogs, tooltips, tabs); this kit covers only what's truly desktop-only — resizable layouts and the keyboard-first density patterns.</p>
+    <div class="grid" style="grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));">
+      <a href="./components-resize-panels.html" class="kit-card">
+        <div class="thumb">▤ │ ▤ │ ▤</div>
+        <span class="title">Resizable panels</span>
+        <p class="body">3-pane split with drag handles and snap-to-default.</p>
+      </a>
+      <a href="../audience-pro/components-command-palette.html" class="kit-card">
+        <div class="thumb">⌘K</div>
+        <span class="title">Command palette</span>
+        <p class="body">Keyboard-first action launcher (shared with pro tool kit).</p>
+      </a>
+      <a href="../audience-pro/components-shortcuts-overlay.html" class="kit-card">
+        <div class="thumb">?</div>
+        <span class="title">Shortcuts overlay</span>
+        <p class="body">Press ? to surface; grouped table of bindings.</p>
+      </a>
+      <a href="../universal/components-tables.html" class="kit-card">
+        <div class="thumb">≡≡≡</div>
+        <span class="title">Tables</span>
+        <p class="body">Dense data table (shared with universal).</p>
+      </a>
+    </div>
+    <footer class="legend"><p>Add to this kit only if the pattern doesn't make sense on mobile (drag-resize, multi-window, hover-only). Otherwise it belongs in <code>universal/</code>.</p></footer>
+  </main>
+</body>
+</html>

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

@@ -0,0 +1,302 @@
+<!--
+SPECIMEN: ui_kits/desktop/index
+DEMONSTRATES: every Core token composed into a realistic desktop product surface — nav + sidebar + multi-view content + status bar + theme/accent parameterization
+COMPOSITION: full-bleed desktop shell (1400px+) with:
+  - top nav (56px): brand wordmark · view-mode segmented · search · theme toggle · accent picker · user avatar
+  - left sidebar (240px): section heading + collapsible nav tree, active item highlighted by --accent
+  - main content (fluid): switchable between 3 screens — "Roster", "Activity", "Settings"
+  - status bar (28px): mono indicators (port, version, sync state)
+  - vanilla JS view switcher + theme switcher + [data-team="cyan|indigo|emerald|rose"] accent parameterization
+COPY VOICE: real product strings — team-sports flavored for portability across scaffolds; substitute for project context during scaffold
+WHEN SCAFFOLDED: always-on (Universal). Adapt every "Roster" / "Activity" / "Squadron" string and every screen's content to project context. KEEP the chrome shape — nav + sidebar + 3 switchable screens + status bar is the canonical "DS in use" composition.
+NOTES:
+  - The EDITMODE-BEGIN/END markers around DEFAULTS let Claude Code edit defaults in-place without parsing JS (dugmate convention — adopted here for ui_kits).
+  - Theme toggle flips data-theme on <html>; accent picker flips data-team. The token CSS must define [data-team="..."] selectors to back this. If your tokens don't, the picker is decorative.
+  - This is THE single highest-leverage file in the bootstrap output. A reader who only opens one specimen should be able to understand the DS by reading this.
+-->
+<!doctype html>
+<html lang="en" data-theme="dark" data-team="default">
+<head>
+  <meta charset="utf-8" />
+  <title>UI kit · desktop · 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; }
+    .specimen { max-width: none; margin: 0; padding: 0; }
+    .app-shell {
+      display: grid;
+      grid-template-rows: 56px 1fr 28px;
+      grid-template-columns: 240px 1fr;
+      grid-template-areas:
+        "topnav  topnav"
+        "sidebar main"
+        "status  status";
+      min-height: 100vh;
+    }
+    /* ─── Top nav ─── */
+    .topnav { grid-area: topnav; display: flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-4); background: var(--bg-1); border-bottom: 1px solid var(--border-subtle); }
+    .brand { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: 600; font-size: var(--type-md); letter-spacing: var(--tracking-display, -0.022em); color: var(--fg-0); }
+    .brand .mark { width: 20px; height: 20px; background: var(--accent); border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--accent-fg); font-family: var(--font-mono); font-weight: 700; font-size: 11px; }
+    .segmented { display: inline-flex; background: var(--bg-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 2px; gap: 2px; margin-left: var(--space-3); }
+    .segmented > button { background: transparent; border: 0; color: var(--fg-1); padding: 5px 12px; border-radius: calc(var(--radius-md) - 2px); cursor: pointer; font: inherit; font-size: var(--type-sm); font-family: var(--font-mono); transition: background var(--dur-flip) var(--ease-out), color var(--dur-flip) var(--ease-out); }
+    .segmented > button.is-on { background: var(--accent); color: var(--accent-fg); font-weight: 500; }
+    .topnav .spacer { flex: 1; }
+    .search { background: var(--bg-3); border: 1px solid var(--border-default); color: var(--fg-1); padding: 6px 10px; border-radius: var(--radius-sm); font: inherit; font-size: var(--type-sm); width: 220px; font-family: var(--font-mono); }
+    .icon-btn { width: 32px; height: 32px; display: grid; place-items: center; background: transparent; border: 1px solid var(--border-subtle); 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: 14px; }
+    .icon-btn:hover { background: var(--bg-2); color: var(--fg-0); }
+    .accent-picker { display: flex; gap: 4px; padding: 0 var(--space-2); border-left: 1px solid var(--border-subtle); border-right: 1px solid var(--border-subtle); margin: 0 var(--space-2); height: 32px; align-items: center; }
+    .accent-swatch { width: 16px; height: 16px; border-radius: var(--radius-pill); border: 2px solid transparent; cursor: pointer; transition: transform var(--dur-flip) var(--ease-out); padding: 0; }
+    .accent-swatch:hover { transform: scale(1.15); }
+    .accent-swatch.is-on { border-color: var(--fg-0); }
+    .avatar { width: 28px; height: 28px; border-radius: var(--radius-pill); background: var(--accent); border: 1px solid var(--border-default); display: grid; place-items: center; color: var(--accent-fg); font-size: var(--type-xs); font-weight: 600; font-family: var(--font-mono); }
+    /* ─── Sidebar ─── */
+    .sidebar { grid-area: sidebar; background: var(--bg-1); border-right: 1px solid var(--border-subtle); padding: var(--space-4) var(--space-2); overflow-y: auto; }
+    .sidebar h3 { font-family: var(--font-mono); font-size: var(--type-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-2); margin: 0 0 var(--space-2); padding: 0 var(--space-2); }
+    .sidebar ul { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
+    .sidebar li a { display: flex; align-items: center; gap: var(--space-2); padding: 6px 10px; color: var(--fg-1); text-decoration: none; border-radius: var(--radius-sm); font-size: var(--type-sm); cursor: pointer; transition: background var(--dur-flip) var(--ease-out), color var(--dur-flip) var(--ease-out); }
+    .sidebar li a:hover { background: var(--bg-2); color: var(--fg-0); }
+    .sidebar li a.is-active { background: var(--accent); color: var(--accent-fg); font-weight: 500; }
+    .sidebar li a .count { margin-left: auto; font-family: var(--font-mono); font-size: var(--type-xs); color: var(--fg-2); }
+    .sidebar li a.is-active .count { color: var(--accent-fg); opacity: 0.75; }
+    /* ─── Main + screens ─── */
+    .main { grid-area: main; background: var(--bg-0); padding: var(--space-6) var(--space-6); overflow-y: auto; }
+    .screen { display: none; }
+    .screen.is-on { display: block; }
+    .hero { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-5); margin: 0 0 var(--space-6); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-subtle); }
+    .hero h1 { font-family: var(--font-display); font-size: var(--type-3xl); line-height: var(--lh-3xl); letter-spacing: var(--tracking-display, -0.022em); font-weight: 600; margin: 0 0 var(--space-2); color: var(--fg-0); }
+    .hero .lede { color: var(--fg-1); font-size: var(--type-md); line-height: var(--lh-md); margin: 0; max-width: 60ch; }
+    .hero .actions { display: flex; gap: var(--space-2); flex-shrink: 0; }
+    .btn { font: inherit; font-weight: 500; padding: 7px 14px; border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; transition: background var(--dur-flip) var(--ease-out); }
+    .btn--primary { background: var(--accent); color: var(--accent-fg); }
+    .btn--primary:hover { background: var(--accent-hover); }
+    .btn--secondary { background: var(--bg-2); color: var(--fg-0); border-color: var(--border-default); }
+    .btn--secondary:hover { background: var(--bg-3); }
+    /* Roster cards */
+    .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-3); }
+    .card { background: var(--bg-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-4); display: grid; gap: var(--space-2); transition: border-color var(--dur-flip) var(--ease-out), transform var(--dur-flip) var(--ease-out); }
+    .card:hover { border-color: var(--border-default); transform: translateY(-1px); }
+    .card .head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
+    .card .title { font-family: var(--font-display); font-weight: 600; font-size: var(--type-md); line-height: var(--lh-md); color: var(--fg-0); }
+    .card .meta { color: var(--fg-2); font-size: var(--type-xs); font-family: var(--font-mono); }
+    .card .body { color: var(--fg-1); font-size: var(--type-sm); margin: 0; line-height: var(--lh-sm); }
+    .pill { background: var(--accent); color: var(--accent-fg); padding: 1px 7px; border-radius: var(--radius-pill); font-size: var(--type-xs); font-family: var(--font-mono); font-weight: 500; }
+    .pill--ghost { background: transparent; color: var(--fg-1); border: 1px solid var(--border-default); }
+    /* Activity table */
+    .activity { background: var(--bg-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; }
+    .activity-row { display: grid; grid-template-columns: 32px 1fr auto; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); align-items: center; transition: background var(--dur-flip) var(--ease-out); }
+    .activity-row:last-child { border-bottom: 0; }
+    .activity-row:hover { background: var(--bg-2); }
+    .activity-row .dot { width: 8px; height: 8px; border-radius: 50%; }
+    .activity-row .dot.success { background: var(--status-success); }
+    .activity-row .dot.info    { background: var(--status-info); }
+    .activity-row .dot.warn    { background: var(--status-warn); }
+    .activity-row .text { color: var(--fg-0); font-size: var(--type-sm); }
+    .activity-row .text .who { color: var(--fg-1); }
+    .activity-row .when { color: var(--fg-2); font-family: var(--font-mono); font-size: var(--type-xs); }
+    /* Settings */
+    .settings { display: grid; gap: var(--space-4); max-width: 640px; }
+    .setting-row { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-4); background: var(--bg-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
+    .setting-row .title { font-weight: 500; color: var(--fg-0); font-size: var(--type-sm); }
+    .setting-row .sub { color: var(--fg-2); font-size: var(--type-xs); margin-top: 2px; font-family: var(--font-mono); }
+    /* Switch (settings) */
+    .switch { position: relative; width: 36px; height: 20px; background: var(--bg-4); border-radius: var(--radius-pill); transition: background var(--dur-flip) var(--ease-out); cursor: pointer; border: 1px solid var(--border-default); }
+    .switch::after { content: ''; position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; background: var(--fg-0); border-radius: 50%; transition: transform var(--dur-flip) var(--ease-out); }
+    .switch.is-on { background: var(--accent); border-color: var(--accent); }
+    .switch.is-on::after { transform: translateX(16px); background: var(--accent-fg); }
+    /* ─── Status bar ─── */
+    .status { grid-area: status; display: flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-4); background: var(--bg-1); border-top: 1px solid var(--border-subtle); font-family: var(--font-mono); font-size: var(--type-xs); color: var(--fg-2); }
+    .status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--status-success); }
+    .status .accent-text { color: var(--accent); }
+    .status .spacer { flex: 1; }
+  </style>
+</head>
+<body class="app">
+  <main class="specimen">
+    <div class="app-shell">
+      <!-- TOP NAV -->
+      <header class="topnav">
+        <a class="brand"><span class="mark">S</span>Squadron</a>
+        <div class="segmented" role="group" aria-label="View density">
+          <button class="is-on" data-density="cozy">cozy</button>
+          <button data-density="compact">compact</button>
+        </div>
+        <div class="spacer"></div>
+        <input class="search" type="search" placeholder="search… (⌘ K)" />
+        <div class="accent-picker" role="group" aria-label="Accent">
+          <button class="accent-swatch is-on" data-team="default" style="background: var(--accent);" aria-label="default"></button>
+          <button class="accent-swatch" data-team="cyan" style="background: oklch(72% 0.16 220);" aria-label="cyan"></button>
+          <button class="accent-swatch" data-team="emerald" style="background: oklch(70% 0.16 150);" aria-label="emerald"></button>
+          <button class="accent-swatch" data-team="violet" style="background: oklch(64% 0.20 300);" aria-label="violet"></button>
+        </div>
+        <button class="icon-btn" id="theme-toggle" title="Toggle theme">☾</button>
+        <div class="avatar" aria-label="Kim Park">KP</div>
+      </header>
+      <!-- SIDEBAR -->
+      <aside class="sidebar">
+        <h3>Workspace</h3>
+        <ul>
+          <li><a class="is-active" data-screen="roster">Roster<span class="count">11</span></a></li>
+          <li><a data-screen="activity">Activity<span class="count">23</span></a></li>
+          <li><a data-screen="settings">Settings<span class="count">—</span></a></li>
+        </ul>
+        <h3>Saved views</h3>
+        <ul>
+          <li><a>Forwards U21<span class="count">5</span></a></li>
+          <li><a>Last 5 matches<span class="count">5</span></a></li>
+          <li><a>Free agents<span class="count">23</span></a></li>
+        </ul>
+      </aside>
+      <!-- MAIN -->
+      <section class="main">
+        <!-- Screen 1: Roster -->
+        <div class="screen is-on" data-screen="roster">
+          <div class="hero">
+            <div>
+              <h1>Roster</h1>
+              <p class="lede">Eleven players selected for this weekend's match against the Greens. Two open slots remain — drag from Reserves to fill.</p>
+            </div>
+            <div class="actions">
+              <button class="btn btn--secondary">Share</button>
+              <button class="btn btn--primary">Publish lineup</button>
+            </div>
+          </div>
+          <div class="card-grid">
+            <article class="card"><div class="head"><span class="title">Kim Park</span><span class="pill">captain</span></div><p class="meta">#9 · Forward · age 27</p><p class="body">24 matches · 14 goals · 3 assists. Top scorer this season.</p></article>
+            <article class="card"><div class="head"><span class="title">Jonas Weber</span><span class="pill pill--ghost">starter</span></div><p class="meta">#8 · Midfield · age 24</p><p class="body">22 matches · 3 goals · 9 assists. Tempo setter.</p></article>
+            <article class="card"><div class="head"><span class="title">Marta Silva</span><span class="pill pill--ghost">starter</span></div><p class="meta">#4 · Defender · age 29</p><p class="body">23 matches · 1 goal · clean sheets in 11.</p></article>
+            <article class="card"><div class="head"><span class="title">Liam Chen</span><span class="pill pill--ghost">starter</span></div><p class="meta">#1 · Goalkeeper · age 31</p><p class="body">19 matches · 0.84 goals conceded per match.</p></article>
+            <article class="card"><div class="head"><span class="title">Amara Okafor</span><span class="pill pill--ghost">starter</span></div><p class="meta">#10 · Winger · age 22</p><p class="body">18 matches · 6 goals · 11 assists. Fastest player on roster.</p></article>
+            <article class="card"><div class="head"><span class="title">Open slot</span><span class="pill pill--ghost">draft</span></div><p class="meta">— · — · —</p><p class="body">Drag a player from Reserves to fill this position.</p></article>
+          </div>
+        </div>
+        <!-- Screen 2: Activity -->
+        <div class="screen" data-screen="activity">
+          <div class="hero">
+            <div>
+              <h1>Activity</h1>
+              <p class="lede">Every roster change, sync event, and squad note across the team. Filter by author, action, or date.</p>
+            </div>
+            <div class="actions">
+              <button class="btn btn--secondary">Export CSV</button>
+            </div>
+          </div>
+          <div class="activity">
+            <div class="activity-row"><span class="dot success"></span><span class="text"><strong>Kim Park</strong> <span class="who">confirmed match availability</span></span><span class="when">2m ago</span></div>
+            <div class="activity-row"><span class="dot info"></span><span class="text"><strong>Coach Reyes</strong> <span class="who">moved Marta Silva to starter</span></span><span class="when">12m ago</span></div>
+            <div class="activity-row"><span class="dot warn"></span><span class="text"><strong>Jonas Weber</strong> <span class="who">flagged a fitness concern</span></span><span class="when">1h ago</span></div>
+            <div class="activity-row"><span class="dot success"></span><span class="text"><strong>System</strong> <span class="who">auto-saved roster draft</span></span><span class="when">2h ago</span></div>
+            <div class="activity-row"><span class="dot info"></span><span class="text"><strong>Amara Okafor</strong> <span class="who">updated medical clearance</span></span><span class="when">3h ago</span></div>
+            <div class="activity-row"><span class="dot success"></span><span class="text"><strong>Coach Reyes</strong> <span class="who">published lineup for Sun 14:00 match</span></span><span class="when">yesterday</span></div>
+          </div>
+        </div>
+        <!-- Screen 3: Settings -->
+        <div class="screen" data-screen="settings">
+          <div class="hero">
+            <div>
+              <h1>Settings</h1>
+              <p class="lede">Workspace preferences for the active roster. Changes apply immediately and sync across devices.</p>
+            </div>
+          </div>
+          <div class="settings">
+            <div class="setting-row">
+              <div><div class="title">Auto-snapshot on edit</div><div class="sub">enables /rollback</div></div>
+              <span class="switch is-on" role="switch" aria-checked="true"></span>
+            </div>
+            <div class="setting-row">
+              <div><div class="title">Send anonymized usage data</div><div class="sub">helps improve the design tools</div></div>
+              <span class="switch" role="switch" aria-checked="false"></span>
+            </div>
+            <div class="setting-row">
+              <div><div class="title">Run a11y critic on save</div><div class="sub">slows save by ~200ms</div></div>
+              <span class="switch is-on" role="switch" aria-checked="true"></span>
+            </div>
+            <div class="setting-row">
+              <div><div class="title">Beta features</div><div class="sub">org admin only</div></div>
+              <span class="switch" role="switch" aria-checked="false"></span>
+            </div>
+          </div>
+        </div>
+      </section>
+      <!-- STATUS BAR -->
+      <footer class="status">
+        <span class="dot" aria-hidden="true"></span>
+        <span>synced · 19:42:08</span>
+        <span class="spacer"></span>
+        <span>v0.12.3</span>
+        <span class="accent-text">match-day mode</span>
+        <span>11 / 11 confirmed</span>
+      </footer>
+    </div>
+  </main>
+  <script>
+    /* EDITMODE-BEGIN — agents may edit these defaults in-place */
+    const DEFAULTS = {
+      screen: 'roster',
+      density: 'cozy',
+      team: 'default',
+      theme: 'dark'
+    };
+    /* EDITMODE-END */
+    const root = document.documentElement;
+    // Theme toggle
+    root.setAttribute('data-theme', DEFAULTS.theme);
+    root.setAttribute('data-team',  DEFAULTS.team);
+    document.getElementById('theme-toggle').addEventListener('click', () => {
+      const next = root.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
+      root.setAttribute('data-theme', next);
+    });
+    // Accent picker
+    document.querySelectorAll('.accent-swatch').forEach(btn => {
+      btn.addEventListener('click', () => {
+        document.querySelectorAll('.accent-swatch').forEach(b => b.classList.remove('is-on'));
+        btn.classList.add('is-on');
+        root.setAttribute('data-team', btn.dataset.team);
+      });
+    });
+    // View switcher
+    document.querySelectorAll('.sidebar a[data-screen]').forEach(link => {
+      link.addEventListener('click', e => {
+        e.preventDefault();
+        const target = link.dataset.screen;
+        document.querySelectorAll('.sidebar a[data-screen]').forEach(a => a.classList.toggle('is-active', a === link));
+        document.querySelectorAll('.screen').forEach(s => s.classList.toggle('is-on', s.dataset.screen === target));
+      });
+    });
+    // Density toggle (segmented)
+    document.querySelectorAll('.segmented > button').forEach(btn => {
+      btn.addEventListener('click', () => {
+        btn.parentElement.querySelectorAll('button').forEach(b => b.classList.toggle('is-on', b === btn));
+      });
+    });
+    // Settings switches
+    document.querySelectorAll('.switch').forEach(sw => {
+      sw.addEventListener('click', () => {
+        sw.classList.toggle('is-on');
+        sw.setAttribute('aria-checked', sw.classList.contains('is-on'));
+      });
+    });
+  </script>
+</body>
+</html>