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/status/components-status.html ADDED Viewed

@@ -0,0 +1,63 @@
+<!--
+SPECIMEN: status-components
+DEMONSTRATES: status badges (dot + label, pill, square chip), status row indicators (left-edge bar)
+COMPOSITION: 4 status badges × 2 styles (pill, outline) + status row indicators in a list
+COPY VOICE: status-named real strings ("Recording", "Synced 2m ago", "Couldn't reach server")
+WHEN SCAFFOLDED: status family (almost always)
+NOTES: Pill badges have implicit ARIA — set role="status" on dynamic elements that update. Static badges are decorative — let the surrounding text carry the meaning to screen readers.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Status — components</title>
+  <link rel="stylesheet" href="../core/colors_and_type.css" />
+  <link rel="stylesheet" href="../core/preview/_layout.css" />
+  <style>
+    .badge-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--radius-pill); font-size: var(--type-xs); }
+    .badge-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+    .badge-pill.solid::before { background: var(--accent-fg); }
+    .row-status { display: grid; grid-template-columns: 4px 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; background: var(--bg-1); border-radius: var(--radius-md); margin-bottom: 6px; }
+    .row-status .bar { height: 100%; border-radius: 2px; }
+  </style>
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Status components</h1>
+    <p class="lede">Badges for "what's happening now" and row indicators for "what state is this thing in". Both use the status palette — never reuse accent for these.</p>
+    <h2>Pill badges (solid)</h2>
+    <div class="row" style="gap: 8px;">
+      <span class="badge-pill solid" style="background: var(--status-success); color: var(--accent-fg);">Recording</span>
+      <span class="badge-pill solid" style="background: var(--status-warn); color: var(--accent-fg);">Pending review</span>
+      <span class="badge-pill solid" style="background: var(--status-error); color: var(--accent-fg);">Sync failed</span>
+      <span class="badge-pill solid" style="background: var(--status-info); color: var(--accent-fg);">New</span>
+    </div>
+    <h2>Pill badges (outline — low-density)</h2>
+    <div class="row" style="gap: 8px;">
+      <span class="badge-pill" style="border: 1px solid var(--status-success); color: var(--status-success);">Passed</span>
+      <span class="badge-pill" style="border: 1px solid var(--status-warn); color: var(--status-warn);">Stalled</span>
+      <span class="badge-pill" style="border: 1px solid var(--status-error); color: var(--status-error);">Blocked</span>
+      <span class="badge-pill" style="border: 1px solid var(--status-info); color: var(--status-info);">Draft</span>
+    </div>
+    <h2>Row indicators</h2>
+    <div class="row-status">
+      <div class="bar" style="background: var(--status-success);"></div>
+      <div><strong>Match recap</strong><div style="color: var(--fg-1); font-size: var(--type-sm);">Synced 2m ago to the team channel.</div></div>
+      <span class="badge-pill solid" style="background: var(--status-success); color: var(--accent-fg);">Live</span>
+    </div>
+    <div class="row-status">
+      <div class="bar" style="background: var(--status-warn);"></div>
+      <div><strong>Player profile update</strong><div style="color: var(--fg-1); font-size: var(--type-sm);">Awaiting captain approval (filed 1h ago).</div></div>
+      <span class="badge-pill solid" style="background: var(--status-warn); color: var(--accent-fg);">Pending</span>
+    </div>
+    <div class="row-status">
+      <div class="bar" style="background: var(--status-error);"></div>
+      <div><strong>Roster export</strong><div style="color: var(--fg-1); font-size: var(--type-sm);">Couldn't reach the league API. Will retry in 30s.</div></div>
+      <span class="badge-pill solid" style="background: var(--status-error); color: var(--accent-fg);">Failed</span>
+    </div>
+  </main>
+</body>
+</html>

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

@@ -0,0 +1,74 @@
+<!--
+SPECIMEN: status-skeletons
+DEMONSTRATES: pulse animation on placeholder shapes, skeleton vs spinner choice, respects prefers-reduced-motion
+COMPOSITION: skeleton for list row, card, paragraph + side-by-side comparison with spinner
+COPY VOICE: N/A (no copy — these are loading placeholders)
+WHEN SCAFFOLDED: status family (almost always — every async UI loads something)
+NOTES: Skeleton wins over spinner for content where the shape is predictable (lists, cards, articles). Spinner is only acceptable when you literally don't know the dimensions yet (file upload, indeterminate work). Pulse uses opacity, not background-color — compositor-only.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Status — skeletons</title>
+  <link rel="stylesheet" href="../core/colors_and_type.css" />
+  <link rel="stylesheet" href="../core/preview/_layout.css" />
+  <style>
+    .skel { background: var(--bg-3); border-radius: var(--radius-sm); animation: pulse var(--dur-soft) ease-in-out infinite alternate; }
+    @keyframes pulse { from { opacity: 0.5; } to { opacity: 1; } }
+    @media (prefers-reduced-motion: reduce) { .skel { animation: none; opacity: 0.7; } }
+    .spinner { width: 24px; height: 24px; 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>Skeletons</h1>
+    <p class="lede">Use a skeleton when the rendered shape is predictable — list rows, cards, paragraphs. Use a spinner only when dimensions are unknown (file uploads, indeterminate work). Both respect <code>prefers-reduced-motion: reduce</code>.</p>
+    <h2>List skeleton</h2>
+    <div style="background: var(--bg-1); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 12px; max-width: 480px;">
+      <div style="display: flex; gap: 12px; align-items: center; padding: 8px 0;">
+        <div class="skel" style="width: 32px; height: 32px; border-radius: 50%;"></div>
+        <div style="flex: 1; display: grid; gap: 6px;">
+          <div class="skel" style="height: 12px; width: 60%;"></div>
+          <div class="skel" style="height: 10px; width: 40%;"></div>
+        </div>
+      </div>
+      <div style="display: flex; gap: 12px; align-items: center; padding: 8px 0;">
+        <div class="skel" style="width: 32px; height: 32px; border-radius: 50%;"></div>
+        <div style="flex: 1; display: grid; gap: 6px;">
+          <div class="skel" style="height: 12px; width: 50%;"></div>
+          <div class="skel" style="height: 10px; width: 30%;"></div>
+        </div>
+      </div>
+      <div style="display: flex; gap: 12px; align-items: center; padding: 8px 0;">
+        <div class="skel" style="width: 32px; height: 32px; border-radius: 50%;"></div>
+        <div style="flex: 1; display: grid; gap: 6px;">
+          <div class="skel" style="height: 12px; width: 70%;"></div>
+          <div class="skel" style="height: 10px; width: 35%;"></div>
+        </div>
+      </div>
+    </div>
+    <h2>Card skeleton</h2>
+    <div style="background: var(--bg-1); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 16px; max-width: 320px; display: grid; gap: 12px;">
+      <div class="skel" style="height: 18px; width: 60%;"></div>
+      <div class="skel" style="height: 12px; width: 100%;"></div>
+      <div class="skel" style="height: 12px; width: 85%;"></div>
+      <div class="skel" style="height: 32px; width: 96px; border-radius: var(--radius-sm);"></div>
+    </div>
+    <h2>Spinner — when dimensions are unknown</h2>
+    <div style="background: var(--bg-1); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 32px; display: flex; align-items: center; gap: 12px; max-width: 320px;">
+      <div class="spinner"></div>
+      <span style="color: var(--fg-1);">Uploading match video…</span>
+    </div>
+    <footer class="legend">
+      <p>Don't animate background-color on the skel — animation: opacity (or transform) is compositor-only and respects reduced-motion cleanly.</p>
+    </footer>
+  </main>
+</body>
+</html>

package/plugins/design/templates/design-system-inspiration/theme-both/colors-themes-side-by-side.html ADDED Viewed

@@ -0,0 +1,59 @@
+<!--
+SPECIMEN: theme-both-side-by-side
+DEMONSTRATES: dark + light themes rendered side-by-side, same UI in both, theme-switch token contract
+COMPOSITION: 2-column side-by-side of a card showing buttons + text + tokens; left = dark, right = light
+COPY VOICE: identical strings in both panes (only theme differs)
+WHEN SCAFFOLDED: theme-both (only when Q4 = both equal)
+NOTES: Both themes use the SAME tokens (--bg-0..4 etc.); only their OKLCH values differ. The HTML structure is shared — only the data-theme attribute switches. Test this specimen by toggling data-theme on the body and verifying nothing else changes.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Theme — both equal</title>
+  <link rel="stylesheet" href="../core/colors_and_type.css" />
+  <link rel="stylesheet" href="../core/preview/_layout.css" />
+  <style>
+    .pane { padding: 24px; border-radius: var(--radius-md); border: 1px solid var(--border-default); }
+    .card { background: var(--bg-1); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 16px; display: grid; gap: 12px; }
+    .card h3 { margin: 0; }
+    .card .meta { color: var(--fg-2); font-size: var(--type-sm); }
+    .btn-primary { background: var(--accent); color: var(--accent-fg); border: 0; padding: 8px 14px; border-radius: var(--radius-sm); font: inherit; }
+    .btn-secondary { background: var(--bg-3); color: var(--fg-0); border: 1px solid var(--border-default); padding: 8px 14px; border-radius: var(--radius-sm); font: inherit; }
+  </style>
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Themes — side by side</h1>
+    <p class="lede">The exact same UI rendered in both themes. Tokens carry the difference; the HTML structure is identical. If a component renders differently across themes (beyond color), that's a token-resolution bug, not a per-theme design.</p>
+    <div class="grid" style="grid-template-columns: 1fr 1fr; gap: 16px;">
+      <div class="pane app" data-theme="dark" style="background: oklch(16% 0.012 245); color: oklch(96% 0.008 245);">
+        <h2 style="margin: 0 0 16px;">Dark</h2>
+        <div class="card">
+          <h3>Match recap</h3>
+          <p class="meta">vs. Sparta U17 · 3-1</p>
+          <div class="row" style="gap: 8px;">
+            <button class="btn-primary">View</button>
+            <button class="btn-secondary">Share</button>
+          </div>
+        </div>
+      </div>
+      <div class="pane app" data-theme="light" style="background: oklch(98% 0.005 245); color: oklch(20% 0.012 245);">
+        <h2 style="margin: 0 0 16px;">Light</h2>
+        <div class="card" style="background: oklch(95% 0.005 245); border-color: oklch(82% 0.010 245);">
+          <h3>Match recap</h3>
+          <p class="meta" style="color: oklch(48% 0.012 245);">vs. Sparta U17 · 3-1</p>
+          <div class="row" style="gap: 8px;">
+            <button class="btn-primary">View</button>
+            <button class="btn-secondary" style="background: oklch(91% 0.005 245); color: oklch(20% 0.012 245); border-color: oklch(78% 0.010 245);">Share</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <footer class="legend"><p>Inline OKLCH values here are just for the specimen; real projects swap them via <code>[data-theme="light"]</code> selectors in <code>colors_and_type.css</code>. The cascade carries every component without per-component theme overrides.</p></footer>
+  </main>
+</body>
+</html>

package/plugins/design/templates/design-system-inspiration/universal/components-callout.html ADDED Viewed

@@ -0,0 +1,74 @@
+<!--
+SPECIMEN: components-callout
+DEMONSTRATES: --bg-1, --bg-2, --border-subtle, --status-info, --status-warn, --status-error, --status-success, --fg-0..1
+COMPOSITION: 4 variants (note / tip / warning / error) — each with icon + title + body inline
+COPY VOICE: title is the takeaway ("Heads up:", "Tip:", "Action required:", "Couldn't save"). Body explains in one short sentence.
+WHEN SCAFFOLDED: universal (default-on)
+NOTES: Callout is INLINE content — not a toast (transient) and not an alert (modal). Used for in-flow context. Border-left in the status color; bg stays neutral so callouts stack without competing.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Components — callout</title>
+  <link rel="stylesheet" href="../core/colors_and_type.css" />
+  <link rel="stylesheet" href="../core/preview/_layout.css" />
+  <style>
+    .callout { background: var(--bg-1); border: 1px solid var(--border-subtle); border-left-width: 3px; border-radius: var(--radius-md); padding: 12px 16px; margin: 0 0 12px; display: flex; gap: 12px; align-items: flex-start; }
+    .callout .icon { font-size: 16px; line-height: 1; padding-top: 1px; }
+    .callout .body { flex: 1; }
+    .callout .head { font-weight: 600; margin: 0 0 2px; color: var(--fg-0); }
+    .callout .text { margin: 0; color: var(--fg-1); font-size: var(--type-sm); }
+    .callout--note    { border-left-color: var(--status-info); }
+    .callout--tip     { border-left-color: var(--status-success); }
+    .callout--warning { border-left-color: var(--status-warn); }
+    .callout--error   { border-left-color: var(--status-error); }
+    .callout--note    .icon { color: var(--status-info); }
+    .callout--tip     .icon { color: var(--status-success); }
+    .callout--warning .icon { color: var(--status-warn); }
+    .callout--error   .icon { color: var(--status-error); }
+  </style>
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Callouts</h1>
+    <p class="lede">Inline notes, tips, warnings, and errors. Use callouts to surface context that's relevant where the user is looking — neither a transient toast nor a blocking modal.</p>
+    <div class="callout callout--note">
+      <span class="icon" aria-hidden="true">i</span>
+      <div class="body">
+        <p class="head">Heads up</p>
+        <p class="text">Match results sync to the club channel once the captain confirms.</p>
+      </div>
+    </div>
+    <div class="callout callout--tip">
+      <span class="icon" aria-hidden="true">★</span>
+      <div class="body">
+        <p class="head">Tip</p>
+        <p class="text">Drag a player from the bench onto a roster row to swap them in.</p>
+      </div>
+    </div>
+    <div class="callout callout--warning">
+      <span class="icon" aria-hidden="true">!</span>
+      <div class="body">
+        <p class="head">Action required</p>
+        <p class="text">Two players have expired medical clearances. Update before the next match.</p>
+      </div>
+    </div>
+    <div class="callout callout--error">
+      <span class="icon" aria-hidden="true">×</span>
+      <div class="body">
+        <p class="head">Couldn't save</p>
+        <p class="text">Connection dropped. We'll retry in 30s, or you can save manually.</p>
+      </div>
+    </div>
+    <footer class="legend">
+      <p>Title leads with the takeaway ("Action required") so a skimming reader doesn't need the body. Use the body for the one-sentence explanation, not for elaborating the warning.</p>
+    </footer>
+  </main>
+</body>
+</html>

package/plugins/design/templates/design-system-inspiration/universal/components-dialogs.html ADDED Viewed

@@ -0,0 +1,81 @@
+<!--
+SPECIMEN: components-dialogs
+DEMONSTRATES: --bg-1, --bg-2, --border-default, --shadow-lg, --radius-lg, --space-4/5, --dur-route
+COMPOSITION: modal / sheet / alert — each with title, body, primary + secondary actions
+COPY VOICE: terse and unambiguous in titles ("Remove player?"), neutral body ("This will...", not "Are you sure..."), action-verb confirm ("Remove", not "OK")
+WHEN SCAFFOLDED: universal (default-on)
+NOTES: Modal blocks the page; sheet slides from edge; alert is for irreversible destructive actions. Always pair primary action with a clear cancel.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Components — dialogs</title>
+  <link rel="stylesheet" href="../core/colors_and_type.css" />
+  <link rel="stylesheet" href="../core/preview/_layout.css" />
+  <style>
+    .dialog-frame { background: var(--bg-0); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: 24px; position: relative; overflow: hidden; min-height: 220px; }
+    .dialog-frame .veil { position: absolute; inset: 0; background: rgba(0,0,0,0.4); }
+    .dialog { background: var(--bg-1); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-5); width: 360px; position: relative; }
+    .dialog .title { font-family: var(--font-display); font-size: var(--type-lg); font-weight: 600; line-height: var(--lh-lg); margin: 0 0 8px; }
+    .dialog .body  { color: var(--fg-1); margin: 0 0 var(--space-4); }
+    .dialog .actions { display: flex; justify-content: flex-end; gap: 8px; }
+    .dialog-modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
+    .dialog-sheet { position: absolute; right: var(--space-3); top: var(--space-3); bottom: var(--space-3); width: 320px; border-radius: var(--radius-md); }
+    .btn { padding: 6px 12px; border-radius: var(--radius-sm); border: 1px solid transparent; font: inherit; cursor: pointer; }
+    .btn--primary { background: var(--accent); color: var(--accent-fg); }
+    .btn--secondary { background: transparent; color: var(--fg-1); }
+    .btn--destructive { background: var(--status-error); color: var(--accent-fg); }
+  </style>
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Dialogs</h1>
+    <p class="lede">Modals interrupt the flow for confirmation or input. Sheets slide from an edge for related details that don't need full attention. Alerts are reserved for destructive, irreversible actions.</p>
+    <h2>Modal</h2>
+    <div class="dialog-frame">
+      <div class="veil"></div>
+      <div class="dialog dialog-modal" role="dialog" aria-modal="true" aria-labelledby="modal-t">
+        <p class="title" id="modal-t">Save match recap</p>
+        <p class="body">The current draft will be saved to your team archive and shared with the captain.</p>
+        <div class="actions">
+          <button class="btn btn--secondary">Cancel</button>
+          <button class="btn btn--primary">Save recap</button>
+        </div>
+      </div>
+    </div>
+    <h2>Sheet</h2>
+    <div class="dialog-frame">
+      <div class="veil" style="background: rgba(0,0,0,0.25);"></div>
+      <aside class="dialog dialog-sheet" role="dialog" aria-labelledby="sheet-t">
+        <p class="title" id="sheet-t">Player details</p>
+        <p class="body">#9 · Forward · Captain</p>
+        <p style="color: var(--fg-2); font-size: var(--type-sm); margin: 0 0 12px;">21 matches · 14 goals · 3 assists</p>
+        <div class="actions">
+          <button class="btn btn--secondary">Close</button>
+          <button class="btn btn--primary">Edit profile</button>
+        </div>
+      </aside>
+    </div>
+    <h2>Alert (destructive)</h2>
+    <div class="dialog-frame">
+      <div class="veil"></div>
+      <div class="dialog dialog-modal" role="alertdialog" aria-labelledby="alert-t" aria-describedby="alert-b">
+        <p class="title" id="alert-t">Remove "Scout Radar Mobile"?</p>
+        <p class="body" id="alert-b">This deletes the canvas and its iteration history. Cannot be undone.</p>
+        <div class="actions">
+          <button class="btn btn--secondary">Cancel</button>
+          <button class="btn btn--destructive">Remove canvas</button>
+        </div>
+      </div>
+    </div>
+    <footer class="legend">
+      <p>Title phrasing: ask the consequential question ("Remove player?"), don't restate the action ("Confirm removal"). Body explains the outcome, not the question. Confirm uses the verb ("Remove"), not "OK / Yes".</p>
+    </footer>
+  </main>
+</body>
+</html>

package/plugins/design/templates/design-system-inspiration/universal/components-tables.html ADDED Viewed

@@ -0,0 +1,101 @@
+<!--
+SPECIMEN: components-tables
+DEMONSTRATES: --bg-1, --bg-2, --bg-3, --bg-4, --border-subtle, --border-default, --fg-0..2, --space-2/3, --radius-md
+COMPOSITION: sortable header, sticky first column, row selection, empty / loading / error states
+COPY VOICE: column labels in noun-form ("Player", "Goals", "Synced"); date labels relative when fresh ("2m ago"), absolute when older ("Apr 12")
+WHEN SCAFFOLDED: universal (default-on)
+NOTES: Header is bg-2 with sortable indicator. Row hover is bg-3, selected is bg-4. Sticky header for tall tables; sticky first column only for wide tables.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Components — tables</title>
+  <link rel="stylesheet" href="../core/colors_and_type.css" />
+  <link rel="stylesheet" href="../core/preview/_layout.css" />
+  <style>
+    table { width: 100%; border-collapse: collapse; background: var(--bg-1); border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-default); font-size: var(--type-sm); }
+    th, td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border-subtle); }
+    th { background: var(--bg-2); font-weight: 500; color: var(--fg-1); position: sticky; top: 0; }
+    th[aria-sort] { cursor: pointer; }
+    th[aria-sort="ascending"]::after  { content: ' ↑'; color: var(--accent); }
+    th[aria-sort="descending"]::after { content: ' ↓'; color: var(--accent); }
+    tr:last-child td { border-bottom: 0; }
+    tr:hover td { background: var(--bg-3); }
+    tr.is-selected td { background: var(--bg-4); }
+    .meta { color: var(--fg-2); font-size: var(--type-xs); }
+    .num { font-variant-numeric: tabular-nums; }
+  </style>
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Tables</h1>
+    <p class="lede">Dense rows, sortable headers, row selection. The header uses <code>--bg-2</code> and sticks on tall scrolls. Hover uses <code>--bg-3</code>, selected uses <code>--bg-4</code> — never the accent (rows aren't navigation).</p>
+    <h2>Populated</h2>
+    <div style="max-height: 280px; overflow: auto; border-radius: var(--radius-md);">
+      <table>
+        <thead>
+          <tr>
+            <th></th>
+            <th aria-sort="ascending">Player</th>
+            <th>Position</th>
+            <th class="num">Matches</th>
+            <th class="num">Goals</th>
+            <th>Synced</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr class="is-selected">
+            <td><input type="checkbox" checked /></td>
+            <td>Kim Park</td>
+            <td>Forward</td>
+            <td class="num">24</td>
+            <td class="num">14</td>
+            <td class="meta">2m ago</td>
+          </tr>
+          <tr>
+            <td><input type="checkbox" /></td>
+            <td>Jonas Weber</td>
+            <td>Midfield</td>
+            <td class="num">22</td>
+            <td class="num">3</td>
+            <td class="meta">12m ago</td>
+          </tr>
+          <tr>
+            <td><input type="checkbox" /></td>
+            <td>Marta Silva</td>
+            <td>Defender</td>
+            <td class="num">23</td>
+            <td class="num">1</td>
+            <td class="meta">Apr 12</td>
+          </tr>
+          <tr>
+            <td><input type="checkbox" /></td>
+            <td>Liam Chen</td>
+            <td>Goalkeeper</td>
+            <td class="num">19</td>
+            <td class="num">0</td>
+            <td class="meta">Apr 11</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <h2>Empty</h2>
+    <div style="background: var(--bg-1); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 32px; text-align: center;">
+      <p style="margin: 0 0 4px; color: var(--fg-0);">No matches yet</p>
+      <p style="margin: 0 0 16px; color: var(--fg-2); font-size: var(--type-sm);">When you log your first match, it'll show up here.</p>
+      <button style="background: var(--accent); color: var(--accent-fg); border: 0; padding: 6px 12px; border-radius: var(--radius-sm); font: inherit;">Log a match</button>
+    </div>
+    <h2>Loading</h2>
+    <table>
+      <thead><tr><th>Player</th><th>Position</th><th>Goals</th></tr></thead>
+      <tbody>
+        <tr><td colspan="3" style="text-align: center; color: var(--fg-2); padding: 24px;">Loading roster…</td></tr>
+      </tbody>
+    </table>
+  </main>
+</body>
+</html>

package/plugins/design/templates/design-system-inspiration/universal/components-toggles.html ADDED Viewed

@@ -0,0 +1,74 @@
+<!--
+SPECIMEN: components-toggles
+DEMONSTRATES: --accent, --accent-fg, --bg-3, --bg-4, --border-default, --fg-0..2, --radius-sm, --radius-pill, --dur-flip
+COMPOSITION: checkbox / radio / switch / segmented — each in unchecked, checked, focused, disabled states
+COPY VOICE: real labels — "Notify on goals", "Default theme", "Match visibility" — never "Toggle me"
+WHEN SCAFFOLDED: universal (default-on)
+NOTES: Switch is rounded pill; checkbox is squared; radio is round. Each is a real <input> with custom styling — accessibility tree must remain intact.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Components — toggles</title>
+  <link rel="stylesheet" href="../core/colors_and_type.css" />
+  <link rel="stylesheet" href="../core/preview/_layout.css" />
+  <style>
+    .toggle-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
+    .toggle-row label { color: var(--fg-0); font-size: var(--type-sm); }
+    /* Switch */
+    .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; }
+    .switch::after { content: ''; position: absolute; top: 2px; left: 2px; 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); }
+    .switch.is-on::after { transform: translateX(16px); background: var(--accent-fg); }
+    /* Checkbox */
+    .checkbox { width: 16px; height: 16px; border: 1px solid var(--border-default); background: var(--bg-3); border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
+    .checkbox.is-on { background: var(--accent); border-color: var(--accent); }
+    .checkbox.is-on::after { content: '✓'; color: var(--accent-fg); font-size: 12px; line-height: 1; }
+    /* Radio */
+    .radio { width: 16px; height: 16px; border: 1px solid var(--border-default); background: var(--bg-3); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
+    .radio.is-on { border-color: var(--accent); }
+    .radio.is-on::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
+    /* Segmented */
+    .segmented { display: inline-flex; background: var(--bg-3); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 2px; }
+    .segmented > button { background: transparent; border: 0; color: var(--fg-1); padding: 4px 12px; border-radius: calc(var(--radius-md) - 2px); cursor: pointer; font: inherit; transition: background var(--dur-flip) var(--ease-out); }
+    .segmented > button.is-on { background: var(--accent); color: var(--accent-fg); }
+    .disabled { opacity: 0.5; pointer-events: none; }
+  </style>
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Toggles</h1>
+    <p class="lede">Switches for settings (binary, takes effect immediately). Checkboxes for batch select. Radios for exclusive choice within a small set. Segmented controls for view modes.</p>
+    <h2>Switch</h2>
+    <div class="toggle-row"><span class="switch is-on" role="switch" aria-checked="true"></span><label>Notify on goals</label></div>
+    <div class="toggle-row"><span class="switch" role="switch" aria-checked="false"></span><label>Auto-share to club channel</label></div>
+    <div class="toggle-row disabled"><span class="switch" role="switch" aria-checked="false"></span><label>Beta features (org admin only)</label></div>
+    <h2>Checkbox</h2>
+    <div class="toggle-row"><span class="checkbox is-on" role="checkbox" aria-checked="true"></span><label>Captain</label></div>
+    <div class="toggle-row"><span class="checkbox is-on" role="checkbox" aria-checked="true"></span><label>Available this match</label></div>
+    <div class="toggle-row"><span class="checkbox" role="checkbox" aria-checked="false"></span><label>Override squad cap</label></div>
+    <h2>Radio</h2>
+    <div class="toggle-row"><span class="radio is-on" role="radio" aria-checked="true"></span><label>Win</label></div>
+    <div class="toggle-row"><span class="radio" role="radio" aria-checked="false"></span><label>Draw</label></div>
+    <div class="toggle-row"><span class="radio" role="radio" aria-checked="false"></span><label>Loss</label></div>
+    <h2>Segmented</h2>
+    <div class="row">
+      <div class="segmented">
+        <button class="is-on">Roster</button>
+        <button>Bench</button>
+        <button>Reserves</button>
+      </div>
+    </div>
+  </main>
+</body>
+</html>

package/plugins/design/templates/design-system-inspiration/universal/components-tooltips.html ADDED Viewed

@@ -0,0 +1,74 @@
+<!--
+SPECIMEN: components-tooltips
+DEMONSTRATES: --bg-2, --fg-0, --border-default, --radius-sm, --shadow-md, --dur-soft
+COMPOSITION: 4 placement variants (top / right / bottom / left) + popover (richer content)
+COPY VOICE: tooltip = single short phrase, no period ("Open in editor"). Popover = headline + 1–2 supporting sentences.
+WHEN SCAFFOLDED: universal (default-on)
+NOTES: Tooltips trigger after ~400ms hover. Never required to convey information — they augment, not replace. Popover can be triggered by click and contain interactive content.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Components — tooltips</title>
+  <link rel="stylesheet" href="../core/colors_and_type.css" />
+  <link rel="stylesheet" href="../core/preview/_layout.css" />
+  <style>
+    .tooltip-host { position: relative; display: inline-block; margin: 32px 16px; }
+    .tooltip { position: absolute; background: var(--bg-2); color: var(--fg-0); padding: 6px 10px; border-radius: var(--radius-sm); font-size: var(--type-xs); white-space: nowrap; box-shadow: var(--shadow-md); border: 1px solid var(--border-default); pointer-events: none; }
+    .tooltip--top    { bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); }
+    .tooltip--bottom { top: calc(100% + 6px);    left: 50%; transform: translateX(-50%); }
+    .tooltip--left   { right: calc(100% + 6px);  top: 50%;  transform: translateY(-50%); }
+    .tooltip--right  { left: calc(100% + 6px);   top: 50%;  transform: translateY(-50%); }
+    .anchor { background: var(--bg-3); border: 1px solid var(--border-default); padding: 8px 12px; border-radius: var(--radius-sm); }
+    .popover { background: var(--bg-1); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 14px; width: 240px; }
+    .popover .head { font-weight: 600; margin: 0 0 4px; }
+    .popover .body { color: var(--fg-1); font-size: var(--type-sm); margin: 0 0 10px; }
+  </style>
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Tooltips &amp; popovers</h1>
+    <p class="lede">Tooltips are single-line hints that appear on hover or focus, never required to convey essential info. Popovers carry richer content and can be triggered by click.</p>
+    <h2>Placement</h2>
+    <div class="row" style="gap: 48px;">
+      <div class="tooltip-host">
+        <span class="anchor">top</span>
+        <span class="tooltip tooltip--top">Open in editor</span>
+      </div>
+      <div class="tooltip-host">
+        <span class="anchor">right</span>
+        <span class="tooltip tooltip--right">Duplicate canvas</span>
+      </div>
+      <div class="tooltip-host">
+        <span class="anchor">bottom</span>
+        <span class="tooltip tooltip--bottom">Available offline</span>
+      </div>
+      <div class="tooltip-host">
+        <span class="anchor">left</span>
+        <span class="tooltip tooltip--left">Last synced 2h ago</span>
+      </div>
+    </div>
+    <h2>Popover</h2>
+    <div style="margin-top: 80px;">
+      <div class="tooltip-host">
+        <button class="anchor" style="cursor: pointer;">Match settings</button>
+        <div class="popover tooltip--bottom" style="position: absolute; left: 0; transform: none;">
+          <p class="head">Visibility</p>
+          <p class="body">Who can read this match recap before it's shared with the club.</p>
+          <div class="row" style="gap: 8px;">
+            <button style="background: var(--accent); color: var(--accent-fg); border: 0; padding: 4px 10px; border-radius: var(--radius-sm); font: inherit;">Squad only</button>
+            <button style="background: transparent; color: var(--fg-1); border: 0; padding: 4px 10px; border-radius: var(--radius-sm); font: inherit;">Public</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <footer class="legend" style="margin-top: 120px;">
+      <p>Never put essential information in a tooltip — keyboard users hovering over a trigger should not be required to read it. Tooltips augment labeled controls; they don't replace labels.</p>
+    </footer>
+  </main>
+</body>
+</html>