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/meta/accessibility.html ADDED Viewed

@@ -0,0 +1,62 @@
+<!--
+SPECIMEN: meta-accessibility
+DEMONSTRATES: focus order example, semantic HTML samples, ARIA role example, screen-reader-only text, skip-link
+COMPOSITION: 5 sections showing one a11y pattern each with HTML excerpts
+COPY VOICE: technical but plain
+WHEN SCAFFOLDED: meta (universal)
+NOTES: This is the project's a11y reference page. Don't list WCAG criteria — those are universal. List PROJECT-specific patterns (skip-link target, focus-trap conventions, sr-only utility class).
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Meta — accessibility</title>
+  <link rel="stylesheet" href="../core/colors_and_type.css" />
+  <link rel="stylesheet" href="../core/preview/_layout.css" />
+  <style>
+    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
+    .skip-link { position: absolute; top: -100px; left: 8px; padding: 8px 12px; background: var(--accent); color: var(--accent-fg); border-radius: var(--radius-sm); transition: top var(--dur-flip); z-index: 999; }
+    .skip-link:focus { top: 8px; }
+    pre { background: var(--bg-0); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 12px 14px; font-family: var(--font-mono); font-size: 12px; line-height: 1.6; color: var(--fg-0); overflow-x: auto; }
+  </style>
+</head>
+<body class="app" data-theme="dark">
+  <a href="#main" class="skip-link">Skip to main content</a>
+  <main id="main" class="specimen">
+    <h1>Accessibility</h1>
+    <p class="lede">Project-specific a11y patterns. WCAG criteria are universal — this page covers <em>how this project applies them</em>: skip-link target, focus-trap convention, screen-reader-only utility, semantic landmarks.</p>
+    <h2>Skip link</h2>
+    <p>The first focusable element on every page jumps to <code>#main</code>. Tab once on any page to reveal it.</p>
+    <pre>&lt;a href="#main" class="skip-link"&gt;Skip to main content&lt;/a&gt;
+&lt;main id="main"&gt; … &lt;/main&gt;</pre>
+    <h2>Screen-reader-only text</h2>
+    <p>Use the <code>.sr-only</code> utility for content that screen readers should hear but sighted users don't need to see.</p>
+    <pre>&lt;button&gt;
+  &lt;svg aria-hidden="true"&gt;…&lt;/svg&gt;
+  &lt;span class="sr-only"&gt;Open menu&lt;/span&gt;
+&lt;/button&gt;</pre>
+    <h2>Semantic landmarks</h2>
+    <p>Every page MUST have one <code>&lt;main&gt;</code>, one <code>&lt;h1&gt;</code>. Nav inside <code>&lt;nav aria-label="…"&gt;</code>, complementary content inside <code>&lt;aside&gt;</code>.</p>
+    <pre>&lt;header&gt;…&lt;/header&gt;
+&lt;nav aria-label="Primary"&gt;…&lt;/nav&gt;
+&lt;main id="main"&gt;
+  &lt;h1&gt;Page title&lt;/h1&gt;
+  …
+&lt;/main&gt;
+&lt;aside&gt;…&lt;/aside&gt;
+&lt;footer&gt;…&lt;/footer&gt;</pre>
+    <h2>Focus trap (modals)</h2>
+    <p>Modal dialogs use <code>role="dialog" aria-modal="true"</code> and trap Tab focus inside. Esc closes. After close, focus returns to the trigger.</p>
+    <h2>ARIA live regions</h2>
+    <p>Use <code>aria-live="polite"</code> on status updates (notifications, count badges that change). Use <code>aria-live="assertive"</code> only for true emergencies (form errors blocking submit).</p>
+    <h2>Focus indicators</h2>
+    <p>Every focusable element has a visible focus indicator via <code>:focus-visible</code> — see <a href="../foundations/focus.html">foundations/focus</a>. Never <code>outline: none</code> without a replacement.</p>
+  </main>
+</body>
+</html>

package/plugins/design/templates/design-system-inspiration/meta/i18n.html ADDED Viewed

@@ -0,0 +1,73 @@
+<!--
+SPECIMEN: meta-i18n
+DEMONSTRATES: RTL support, long-text overflow handling, pluralization patterns, lang attribute
+COMPOSITION: 4 sections — RTL flip (Hebrew/Arabic sample), text overflow (ellipsis vs wrap), pluralization (1 / N / 0), lang attribute usage
+COPY VOICE: real translation candidates from CMS
+WHEN SCAFFOLDED: meta (when project supports i18n)
+NOTES: RTL is `dir="rtl"` on the parent — the layout flips automatically with logical properties (margin-inline-start, etc.). Long-text overflow needs a strategy per surface — ellipsis for chips, wrap for body. Pluralization always covers 0 case (often the most distinct copy).
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Meta — i18n</title>
+  <link rel="stylesheet" href="../core/colors_and_type.css" />
+  <link rel="stylesheet" href="../core/preview/_layout.css" />
+  <style>
+    .demo-card { background: var(--bg-1); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 16px; margin: 0 0 16px; max-width: 480px; }
+    .demo-card .lbl { font-size: var(--type-xs); color: var(--fg-2); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.04em; }
+    .chip { background: var(--bg-3); border: 1px solid var(--border-default); padding: 4px 12px; border-radius: var(--radius-pill); display: inline-block; max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
+    .rtl { direction: rtl; }
+  </style>
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Internationalization</h1>
+    <p class="lede">Four project-specific i18n patterns — RTL flip, text overflow strategy, pluralization, and the <code>lang</code> attribute.</p>
+    <h2>RTL — layout flips automatically</h2>
+    <div class="demo-card">
+      <div class="lbl">English (ltr)</div>
+      <div style="display: flex; align-items: center; gap: 12px;">
+        <span style="width: 32px; height: 32px; background: var(--bg-3); border-radius: 50%;"></span>
+        <div><strong>Kim Park</strong><div style="color: var(--fg-1); font-size: var(--type-sm);">#9 · captain</div></div>
+      </div>
+    </div>
+    <div class="demo-card rtl" lang="ar">
+      <div class="lbl">Arabic (rtl)</div>
+      <div style="display: flex; align-items: center; gap: 12px;">
+        <span style="width: 32px; height: 32px; background: var(--bg-3); border-radius: 50%;"></span>
+        <div><strong>كيم بارك</strong><div style="color: var(--fg-1); font-size: var(--type-sm);">‏#9 · القائد</div></div>
+      </div>
+    </div>
+    <h2>Long-text overflow</h2>
+    <div class="demo-card">
+      <div class="lbl">Chips — ellipsis at 160px</div>
+      <span class="chip">Forward</span>
+      <span class="chip">Defender</span>
+      <span class="chip">Mittelfeldspieler</span>
+      <span class="chip">Aanvallende middenvelder</span>
+    </div>
+    <div class="demo-card">
+      <div class="lbl">Body — wraps freely</div>
+      <p style="margin: 0; color: var(--fg-1); line-height: 1.5;">Speeleranzahl ist begrenzt auf maximal 24 Spieler pro Kader; Ersatzspieler werden separat geführt.</p>
+    </div>
+    <h2>Pluralization (0 / 1 / N)</h2>
+    <div class="demo-card">
+      <p style="margin: 0 0 8px;"><strong>Empty:</strong> No players in this squad — invite some.</p>
+      <p style="margin: 0 0 8px;"><strong>One:</strong> 1 player on the bench.</p>
+      <p style="margin: 0;"><strong>Many:</strong> 7 players on the bench.</p>
+    </div>
+    <h2><code>lang</code> attribute</h2>
+    <p>Set on <code>&lt;html&gt;</code> globally; override per section when content language differs. Browsers + screen readers use this for hyphenation, quotation marks, and pronunciation.</p>
+    <pre style="background: var(--bg-0); padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid var(--border-default); font-family: var(--font-mono); font-size: 12px;">&lt;html lang="en"&gt;
+  &lt;blockquote lang="fr"&gt;
+    Le football est un jeu simple.
+  &lt;/blockquote&gt;
+&lt;/html&gt;</pre>
+  </main>
+</body>
+</html>

package/plugins/design/templates/design-system-inspiration/meta/presence-multiplayer.html ADDED Viewed

@@ -0,0 +1,71 @@
+<!--
+SPECIMEN: meta-presence-multiplayer
+DEMONSTRATES: forward-pointer to v1.x multiplayer features — live cursors with labels, awareness pills, conflict-free type indicators
+COMPOSITION: full mockup of a shared canvas with 3 cursors + awareness rail + typing indicator
+COPY VOICE: real names, real "X is editing" strings
+WHEN SCAFFOLDED: meta + presence family (typically v1.1+ projects with Yjs)
+NOTES: This is a forward-pointer specimen showing what the multiplayer UX looks like once Phase 8 (Yjs LAN) lands. The cursor color is per-user (hashed from user ID into an OKLCH band). Don't blink cursors — too noisy.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Meta — presence multiplayer</title>
+  <link rel="stylesheet" href="../core/colors_and_type.css" />
+  <link rel="stylesheet" href="../core/preview/_layout.css" />
+  <style>
+    .canvas-frame { position: relative; background: var(--bg-1); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 32px; min-height: 320px; overflow: hidden; }
+    .cursor { position: absolute; display: flex; align-items: flex-start; gap: 2px; pointer-events: none; }
+    .cursor-label { background: currentColor; color: var(--accent-fg); font-size: 11px; padding: 1px 6px; border-radius: var(--radius-pill); margin-top: 12px; margin-left: 4px; white-space: nowrap; }
+    .awareness-rail { position: absolute; top: 12px; right: 12px; display: flex; align-items: center; gap: 4px; }
+    .av-chip { display: flex; align-items: center; gap: 4px; background: var(--bg-2); border: 1px solid var(--border-default); padding: 3px 8px; border-radius: var(--radius-pill); font-size: var(--type-xs); }
+    .av-chip .dot { width: 6px; height: 6px; border-radius: 50%; }
+    .typing { position: absolute; bottom: 12px; left: 12px; background: var(--bg-2); border: 1px solid var(--border-default); padding: 4px 10px; border-radius: var(--radius-pill); font-size: var(--type-xs); color: var(--fg-1); display: flex; align-items: center; gap: 6px; }
+    .typing .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--status-success); animation: pulse 1s ease-in-out infinite; }
+    @keyframes pulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }
+    @media (prefers-reduced-motion: reduce) { .typing .pulse { animation: none; } }
+  </style>
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Presence — multiplayer</h1>
+    <p class="lede">Forward-pointer to what multiplayer looks like when Yjs lands (v1.1+). Three concepts compose: live cursors with labels, an awareness rail listing who's connected, and a typing indicator when someone's editing a field.</p>
+    <div class="canvas-frame">
+      <div class="awareness-rail">
+        <div class="av-chip"><span class="dot" style="background: oklch(64% 0.20 264);"></span>Kim</div>
+        <div class="av-chip"><span class="dot" style="background: oklch(68% 0.18 145);"></span>Marta</div>
+        <div class="av-chip"><span class="dot" style="background: oklch(72% 0.15 50);"></span>Jonas</div>
+      </div>
+      <h3 style="margin: 0 0 8px;">Match recap · vs. Sparta U17</h3>
+      <p style="color: var(--fg-1); margin: 0 0 16px;">Three editors live — every change syncs in milliseconds via Yjs CRDT.</p>
+      <div style="background: var(--bg-3); padding: 8px 12px; border-radius: var(--radius-sm); margin-bottom: 8px;">Final score: <strong>3 - 1</strong></div>
+      <div style="background: var(--bg-3); padding: 8px 12px; border-radius: var(--radius-sm); margin-bottom: 8px;">Captain Kim — hat-trick (12', 38', 67')</div>
+      <div style="background: var(--bg-3); padding: 8px 12px; border-radius: var(--radius-sm); margin-bottom: 8px; outline: 2px solid oklch(68% 0.18 145); outline-offset: -1px;">Squad rating: <strong>B+</strong> <em style="color: var(--fg-2);">(Marta is editing)</em></div>
+      <div class="cursor" style="top: 70px; left: 40%; color: oklch(64% 0.20 264);">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M3 3 L21 12 L13 14 L11 22 Z"/></svg>
+        <span class="cursor-label">Kim</span>
+      </div>
+      <div class="cursor" style="top: 180px; left: 70%; color: oklch(68% 0.18 145);">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M3 3 L21 12 L13 14 L11 22 Z"/></svg>
+        <span class="cursor-label">Marta · typing</span>
+      </div>
+      <div class="cursor" style="top: 220px; left: 15%; color: oklch(72% 0.15 50);">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M3 3 L21 12 L13 14 L11 22 Z"/></svg>
+        <span class="cursor-label">Jonas</span>
+      </div>
+      <div class="typing">
+        <span class="pulse"></span>Marta is editing the squad rating
+      </div>
+    </div>
+    <footer class="legend">
+      <p>Per-user color is hashed from the user ID into a stable OKLCH band — same user, same color across sessions. Don't store the color; derive it.</p>
+    </footer>
+  </main>
+</body>
+</html>

package/plugins/design/templates/design-system-inspiration/meta/tokens-index.html ADDED Viewed

@@ -0,0 +1,80 @@
+<!--
+SPECIMEN: meta-tokens-index
+DEMONSTRATES: full visual TOC of every token family in colors_and_type.css — colors, type, spacing, motion, radii
+COMPOSITION: 5 sections, each a grid of swatches/samples for one token family, with the var() name visible
+COPY VOICE: literal token names + their semantic role
+WHEN SCAFFOLDED: meta (universal — every project benefits from a single overview page)
+NOTES: This is the dev-server's landing page if no canvas is selected. Acts as a token catalog the design-system-completeness-critic can grep for known tokens. Don't hardcode any non-token values here.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Meta — tokens index</title>
+  <link rel="stylesheet" href="../core/colors_and_type.css" />
+  <link rel="stylesheet" href="../core/preview/_layout.css" />
+  <style>
+    .token-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 0 0 32px; }
+    .tok { display: grid; gap: 4px; padding: 8px; background: var(--bg-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); font-size: var(--type-xs); }
+    .tok .sample { height: 24px; border-radius: var(--radius-xs); }
+    .tok code { color: var(--fg-1); font-size: 10px; }
+    .tok .role { color: var(--fg-2); font-size: 10px; }
+  </style>
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Tokens index</h1>
+    <p class="lede">Visual catalog of every token in <code>colors_and_type.css</code>. Useful as a landing page in the dev server, and as a check that nothing's been added inline without being promoted to a token.</p>
+    <h2>Surfaces</h2>
+    <div class="token-grid">
+      <div class="tok"><div class="sample" style="background: var(--bg-0);"></div><code>--bg-0</code><span class="role">page</span></div>
+      <div class="tok"><div class="sample" style="background: var(--bg-1);"></div><code>--bg-1</code><span class="role">card</span></div>
+      <div class="tok"><div class="sample" style="background: var(--bg-2);"></div><code>--bg-2</code><span class="role">nested</span></div>
+      <div class="tok"><div class="sample" style="background: var(--bg-3);"></div><code>--bg-3</code><span class="role">input</span></div>
+      <div class="tok"><div class="sample" style="background: var(--bg-4);"></div><code>--bg-4</code><span class="role">pressed</span></div>
+    </div>
+    <h2>Text</h2>
+    <div class="token-grid">
+      <div class="tok"><div class="sample" style="background: var(--fg-0);"></div><code>--fg-0</code><span class="role">primary</span></div>
+      <div class="tok"><div class="sample" style="background: var(--fg-1);"></div><code>--fg-1</code><span class="role">secondary</span></div>
+      <div class="tok"><div class="sample" style="background: var(--fg-2);"></div><code>--fg-2</code><span class="role">muted</span></div>
+      <div class="tok"><div class="sample" style="background: var(--fg-3);"></div><code>--fg-3</code><span class="role">disabled</span></div>
+    </div>
+    <h2>Accent + status</h2>
+    <div class="token-grid">
+      <div class="tok"><div class="sample" style="background: var(--accent);"></div><code>--accent</code><span class="role">primary</span></div>
+      <div class="tok"><div class="sample" style="background: var(--accent-hover);"></div><code>--accent-hover</code></div>
+      <div class="tok"><div class="sample" style="background: var(--accent-active);"></div><code>--accent-active</code></div>
+      <div class="tok"><div class="sample" style="background: var(--status-success);"></div><code>--status-success</code></div>
+      <div class="tok"><div class="sample" style="background: var(--status-warn);"></div><code>--status-warn</code></div>
+      <div class="tok"><div class="sample" style="background: var(--status-error);"></div><code>--status-error</code></div>
+      <div class="tok"><div class="sample" style="background: var(--status-info);"></div><code>--status-info</code></div>
+    </div>
+    <h2>Radii</h2>
+    <div class="token-grid">
+      <div class="tok"><div class="sample" style="background: var(--accent); border-radius: var(--radius-xs);"></div><code>--radius-xs</code></div>
+      <div class="tok"><div class="sample" style="background: var(--accent); border-radius: var(--radius-sm);"></div><code>--radius-sm</code></div>
+      <div class="tok"><div class="sample" style="background: var(--accent); border-radius: var(--radius-md);"></div><code>--radius-md</code></div>
+      <div class="tok"><div class="sample" style="background: var(--accent); border-radius: var(--radius-lg);"></div><code>--radius-lg</code></div>
+      <div class="tok"><div class="sample" style="background: var(--accent); border-radius: var(--radius-xl);"></div><code>--radius-xl</code></div>
+    </div>
+    <h2>Type scale</h2>
+    <div style="display: grid; gap: 6px; margin: 0 0 32px;">
+      <div style="font-size: var(--type-xs); line-height: var(--lh-xs);">--type-xs · The quick brown fox</div>
+      <div style="font-size: var(--type-sm); line-height: var(--lh-sm);">--type-sm · The quick brown fox</div>
+      <div style="font-size: var(--type-base); line-height: var(--lh-base);">--type-base · The quick brown fox</div>
+      <div style="font-size: var(--type-md); line-height: var(--lh-md);">--type-md · The quick brown fox</div>
+      <div style="font-size: var(--type-lg); line-height: var(--lh-lg);">--type-lg · The quick brown fox</div>
+      <div style="font-size: var(--type-xl); line-height: var(--lh-xl);">--type-xl · The quick brown fox</div>
+    </div>
+    <h2>Motion</h2>
+    <p style="color: var(--fg-1);"><code>--dur-flip</code> · <code>--dur-panel</code> · <code>--dur-route</code> · <code>--dur-soft</code> · <code>--ease-out</code> · <code>--ease-in-out</code> — see <a href="../core/preview/motion.html">motion specimen</a> for live demos.</p>
+  </main>
+</body>
+</html>

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

@@ -0,0 +1,78 @@
+<!--
+SPECIMEN: pattern-auth
+DEMONSTRATES: sign-in, sign-up, forgot-password screens; oauth provider buttons; magic link variant
+COMPOSITION: 3 auth screens side-by-side with consistent shell (logo + title + form + footer link)
+COPY VOICE: terse + literal ("Sign in", "Create account", "Send reset link")
+WHEN SCAFFOLDED: patterns (universal — most products need auth)
+NOTES: Single-column always (don't make people scroll horizontally to log in). OAuth buttons go above the email/password split with an "or continue with email" divider. Forgot link goes below the form, not inline with the password field.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Pattern — auth</title>
+  <link rel="stylesheet" href="../core/colors_and_type.css" />
+  <link rel="stylesheet" href="../core/preview/_layout.css" />
+  <style>
+    .auth { background: var(--bg-1); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 32px; max-width: 360px; margin: 0; box-shadow: var(--shadow-md); }
+    .auth .logo { width: 36px; height: 36px; background: var(--accent); border-radius: var(--radius-sm); margin: 0 0 20px; }
+    .auth h2 { margin: 0 0 6px; font-family: var(--font-display); font-size: var(--type-xl); font-weight: 600; }
+    .auth .sub { color: var(--fg-1); margin: 0 0 20px; font-size: var(--type-sm); }
+    .auth input { background: var(--bg-3); color: var(--fg-0); border: 1px solid var(--border-default); padding: 10px 12px; border-radius: var(--radius-sm); font: inherit; width: 100%; margin: 0 0 10px; box-sizing: border-box; }
+    .auth button.primary { background: var(--accent); color: var(--accent-fg); border: 0; padding: 10px 16px; border-radius: var(--radius-sm); font: inherit; width: 100%; cursor: pointer; }
+    .auth .oauth { display: flex; gap: 8px; margin: 0 0 14px; }
+    .auth .oauth button { flex: 1; background: var(--bg-3); border: 1px solid var(--border-default); color: var(--fg-0); padding: 8px 10px; border-radius: var(--radius-sm); font: inherit; cursor: pointer; }
+    .divider { display: flex; align-items: center; gap: 12px; color: var(--fg-2); font-size: var(--type-xs); margin: 0 0 14px; }
+    .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border-subtle); }
+    .footer { margin-top: 16px; text-align: center; font-size: var(--type-sm); color: var(--fg-2); }
+    .footer a { color: var(--accent); text-decoration: none; }
+  </style>
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Auth screens</h1>
+    <p class="lede">Sign-in, sign-up, forgot-password — single-column, OAuth above email split, footer link below the primary action.</p>
+    <div class="row" style="gap: 16px; align-items: flex-start;">
+      <div class="auth">
+        <div class="logo"></div>
+        <h2>Sign in</h2>
+        <p class="sub">Welcome back — pick up where you left off.</p>
+        <div class="oauth">
+          <button>Continue with Google</button>
+          <button>SSO</button>
+        </div>
+        <div class="divider">or continue with email</div>
+        <input type="email" placeholder="Email" value="kim@fc-riverside.club" />
+        <input type="password" placeholder="Password" value="••••••••" />
+        <button class="primary">Sign in</button>
+        <div class="footer">Forgot password? · <a href="#">Reset it</a></div>
+      </div>
+      <div class="auth">
+        <div class="logo"></div>
+        <h2>Create account</h2>
+        <p class="sub">Two minutes. Then your squad is in.</p>
+        <div class="oauth">
+          <button>Continue with Google</button>
+        </div>
+        <div class="divider">or sign up with email</div>
+        <input type="text" placeholder="Full name" />
+        <input type="email" placeholder="Email" />
+        <input type="password" placeholder="Password (8+ chars)" />
+        <button class="primary">Create account</button>
+        <div class="footer">Already have an account? · <a href="#">Sign in</a></div>
+      </div>
+      <div class="auth">
+        <div class="logo"></div>
+        <h2>Reset password</h2>
+        <p class="sub">We'll email you a one-time link.</p>
+        <input type="email" placeholder="Email" />
+        <button class="primary">Send reset link</button>
+        <div class="footer">Remember it? · <a href="#">Sign in</a></div>
+      </div>
+    </div>
+  </main>
+</body>
+</html>

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

@@ -0,0 +1,61 @@
+<!--
+SPECIMEN: pattern-data-density
+DEMONSTRATES: same data rendered at 3 densities — sparse (consumer), default (pro), compact (admin)
+COMPOSITION: same 5-row dataset shown in 3 visual densities, with the same tokens but different padding/typography
+COPY VOICE: identical strings across all three (only density differs)
+WHEN SCAFFOLDED: patterns (cross-audience — useful for any project that has multiple surface densities)
+NOTES: Density is mostly --space-* + --type-* choices. Don't change tokens — change which tokens you reach for. Sparse uses --space-4/5 + --type-md; default uses --space-2/3 + --type-sm; compact uses --space-1/2 + --type-xs.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Pattern — data density</title>
+  <link rel="stylesheet" href="../core/colors_and_type.css" />
+  <link rel="stylesheet" href="../core/preview/_layout.css" />
+  <style>
+    .density-card { background: var(--bg-1); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 16px; max-width: 480px; margin: 0 0 24px; }
+    .density-card h3 { margin: 0 0 12px; font-size: var(--type-sm); color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.04em; }
+    .sparse .row    { padding: 16px 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--type-md); }
+    .default .row   { padding: 8px 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--type-sm); }
+    .compact .row   { padding: 4px 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--type-xs); font-family: var(--font-mono); }
+    .row:last-child { border-bottom: 0; }
+    .row { display: grid; grid-template-columns: 1fr 60px 60px; gap: 12px; align-items: center; }
+    .num { text-align: right; font-variant-numeric: tabular-nums; color: var(--fg-1); }
+  </style>
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Data density</h1>
+    <p class="lede">Same dataset, three densities. Density isn't a token — it's a pattern of which tokens you choose. Sparse for consumer dashboards, default for working surfaces, compact for power-user admin views.</p>
+    <div class="density-card sparse">
+      <h3>Sparse · consumer</h3>
+      <div class="row"><span>Kim Park · #9</span><span class="num">24</span><span class="num">14</span></div>
+      <div class="row"><span>Jonas Weber · #14</span><span class="num">22</span><span class="num">3</span></div>
+      <div class="row"><span>Marta Silva · #4</span><span class="num">23</span><span class="num">1</span></div>
+    </div>
+    <div class="density-card default">
+      <h3>Default · pro</h3>
+      <div class="row"><span>Kim Park · #9</span><span class="num">24</span><span class="num">14</span></div>
+      <div class="row"><span>Jonas Weber · #14</span><span class="num">22</span><span class="num">3</span></div>
+      <div class="row"><span>Marta Silva · #4</span><span class="num">23</span><span class="num">1</span></div>
+      <div class="row"><span>Liam Chen · #1</span><span class="num">19</span><span class="num">0</span></div>
+      <div class="row"><span>Sara Novak · #11</span><span class="num">20</span><span class="num">8</span></div>
+    </div>
+    <div class="density-card compact">
+      <h3>Compact · admin</h3>
+      <div class="row"><span>kpark   #9</span><span class="num">24</span><span class="num">14</span></div>
+      <div class="row"><span>jweber  #14</span><span class="num">22</span><span class="num">3</span></div>
+      <div class="row"><span>msilva  #4</span><span class="num">23</span><span class="num">1</span></div>
+      <div class="row"><span>lchen   #1</span><span class="num">19</span><span class="num">0</span></div>
+      <div class="row"><span>snovak  #11</span><span class="num">20</span><span class="num">8</span></div>
+    </div>
+    <footer class="legend"><p>Compact uses --font-mono for the names — they're identifiers in this density, not display strings. The padding choice is doing the work, not the font.</p></footer>
+  </main>
+</body>
+</html>

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

@@ -0,0 +1,70 @@
+<!--
+SPECIMEN: pattern-error-pages
+DEMONSTRATES: 404, 500, offline, maintenance — full-page error variants
+COMPOSITION: 4 stacked frames each showing one error type with status code + headline + body + CTA
+COPY VOICE: friendly + specific ("Can't find the canvas you're looking for") — never "404 not found"
+WHEN SCAFFOLDED: patterns (universal)
+NOTES: Use status numbers as the eyebrow, not the headline. Headline names what's wrong in plain language. Body explains and sometimes apologizes (not always — only when fault is ours). CTA = "what now": go home, retry, status page.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Pattern — error pages</title>
+  <link rel="stylesheet" href="../core/colors_and_type.css" />
+  <link rel="stylesheet" href="../core/preview/_layout.css" />
+  <style>
+    .err-page { background: var(--bg-1); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 64px 32px; text-align: center; margin: 0 0 16px; max-width: 600px; }
+    .err-page .eyebrow { font-size: var(--type-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-2); font-family: var(--font-mono); margin-bottom: 8px; }
+    .err-page h2 { font-family: var(--font-display); font-size: var(--type-2xl); font-weight: 600; margin: 0 0 12px; }
+    .err-page p { color: var(--fg-1); margin: 0 0 24px; max-width: 40ch; margin-left: auto; margin-right: auto; }
+    .err-page .actions { display: flex; justify-content: center; gap: 12px; }
+    .btn-primary { background: var(--accent); color: var(--accent-fg); border: 0; padding: 8px 16px; border-radius: var(--radius-sm); font: inherit; }
+    .btn-secondary { background: transparent; color: var(--fg-1); border: 1px solid var(--border-default); padding: 8px 16px; border-radius: var(--radius-sm); font: inherit; }
+  </style>
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Error pages</h1>
+    <p class="lede">Four full-page errors. Each names what went wrong in plain language, then offers a concrete next step.</p>
+    <div class="err-page">
+      <div class="eyebrow">404</div>
+      <h2>Can't find that canvas</h2>
+      <p>It might have been renamed, archived, or never existed. Check the canvas index, or start a new one.</p>
+      <div class="actions">
+        <button class="btn-primary">Go to canvases</button>
+        <button class="btn-secondary">New canvas</button>
+      </div>
+    </div>
+    <div class="err-page">
+      <div class="eyebrow">500</div>
+      <h2>Something broke on our end</h2>
+      <p>We've logged it. Try again in a moment — if it persists, check the status page.</p>
+      <div class="actions">
+        <button class="btn-primary">Try again</button>
+        <button class="btn-secondary">Status page</button>
+      </div>
+    </div>
+    <div class="err-page">
+      <div class="eyebrow">offline</div>
+      <h2>You're offline</h2>
+      <p>Recent edits are saved locally — they'll sync when the connection comes back.</p>
+      <div class="actions">
+        <button class="btn-primary">Retry now</button>
+      </div>
+    </div>
+    <div class="err-page">
+      <div class="eyebrow">maintenance</div>
+      <h2>Quick tune-up in progress</h2>
+      <p>We're rolling out faster sync. Should take about 5 minutes — your data is safe.</p>
+      <div class="actions">
+        <button class="btn-secondary">Status page</button>
+      </div>
+    </div>
+  </main>
+</body>
+</html>

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

@@ -0,0 +1,70 @@
+<!--
+SPECIMEN: pattern-form-layouts
+DEMONSTRATES: 4 form layout patterns — single column, two column, inline labels, floating labels
+COMPOSITION: 4 mini-forms each demonstrating one layout strategy
+COPY VOICE: real product fields (Email, Squad role, Birth year, …)
+WHEN SCAFFOLDED: patterns (universal — every project has forms)
+NOTES: Single-column is the default — easiest to scan, works on mobile. Two-column only for closely-related pairs (first / last name). Inline labels for compact admin tables. Floating labels for short forms with strong design opinions.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Pattern — form layouts</title>
+  <link rel="stylesheet" href="../core/colors_and_type.css" />
+  <link rel="stylesheet" href="../core/preview/_layout.css" />
+  <style>
+    .form { background: var(--bg-1); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 20px; max-width: 480px; margin: 0 0 24px; }
+    .field { display: grid; gap: 4px; margin: 0 0 14px; }
+    .field label { font-size: var(--type-sm); color: var(--fg-1); }
+    .field input, .field select { background: var(--bg-3); color: var(--fg-0); border: 1px solid var(--border-default); padding: 8px 10px; border-radius: var(--radius-sm); font: inherit; }
+    .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 14px; }
+    .inline-field { display: grid; grid-template-columns: 140px 1fr; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border-subtle); }
+    .inline-field:last-child { border-bottom: 0; }
+    .float-field { position: relative; margin: 0 0 14px; }
+    .float-field input { width: 100%; padding: 18px 10px 6px; box-sizing: border-box; }
+    .float-field label { position: absolute; top: 12px; left: 10px; font-size: var(--type-sm); color: var(--fg-2); transition: all var(--dur-flip) var(--ease-out); pointer-events: none; }
+    .float-field.is-filled label, .float-field input:focus + label { top: 4px; font-size: 10px; color: var(--accent); }
+  </style>
+</head>
+<body class="app" data-theme="dark">
+  <main class="specimen">
+    <h1>Form layouts</h1>
+    <p class="lede">Single-column is the default. The other three (two-column, inline-label, floating-label) exist for specific contexts.</p>
+    <h2>1. Single column (default)</h2>
+    <form class="form">
+      <div class="field"><label>Email</label><input type="email" value="kim@fc-riverside.club" /></div>
+      <div class="field"><label>Squad role</label><input type="text" value="Captain" /></div>
+      <div class="field"><label>Birth year</label><input type="text" value="2005" /></div>
+      <button style="background: var(--accent); color: var(--accent-fg); border: 0; padding: 8px 14px; border-radius: var(--radius-sm); font: inherit; margin-top: 4px;">Save</button>
+    </form>
+    <h2>2. Two column (related pairs)</h2>
+    <form class="form">
+      <div class="two-col">
+        <div class="field"><label>First name</label><input type="text" value="Kim" /></div>
+        <div class="field"><label>Last name</label><input type="text" value="Park" /></div>
+      </div>
+      <div class="two-col">
+        <div class="field"><label>City</label><input type="text" value="Prague" /></div>
+        <div class="field"><label>Postal code</label><input type="text" value="11000" /></div>
+      </div>
+    </form>
+    <h2>3. Inline labels (settings panel)</h2>
+    <form class="form">
+      <div class="inline-field"><label style="font-size: var(--type-sm); color: var(--fg-1);">Notifications</label><div><input type="checkbox" checked /> Match results</div></div>
+      <div class="inline-field"><label style="font-size: var(--type-sm); color: var(--fg-1);">Theme</label><select><option>System</option><option>Dark</option><option>Light</option></select></div>
+      <div class="inline-field"><label style="font-size: var(--type-sm); color: var(--fg-1);">Time zone</label><select><option>Europe/Prague</option></select></div>
+    </form>
+    <h2>4. Floating labels (compact, short forms)</h2>
+    <form class="form">
+      <div class="float-field is-filled"><input type="text" value="kim@fc-riverside.club" id="ff1" /><label for="ff1">Email</label></div>
+      <div class="float-field is-filled"><input type="text" value="••••••••" id="ff2" /><label for="ff2">Password</label></div>
+      <button style="background: var(--accent); color: var(--accent-fg); border: 0; padding: 8px 14px; border-radius: var(--radius-sm); font: inherit; width: 100%;">Sign in</button>
+    </form>
+  </main>
+</body>
+</html>