@apliteni/apliteni-ui 0.2.4

package/src/components/topbar.js

@@ -0,0 +1,133 @@
+// Topbar factory + client behaviours. Composes the canonical strategy topbar
+// (brand, Deck/Text, theme toggle, version switcher, account menu).
+import { brand } from '../assets/brand.js';
+import { icon, sun, moon } from '../assets/icons.js';
+
+const THEME_KEY = 'apliteni-strategy-theme';
+
+export function themeToggle() {
+  return `<button class="toggle" data-theme-toggle aria-label="Toggle theme"><span class="ic" data-theme-icon></span><span data-theme-label>Light</span></button>`;
+}
+
+export function deckTextSwitch(active = 'deck') {
+  return `<div class="dtsw on" role="group" aria-label="View">` +
+    `<a${active === 'deck' ? ' class="cur" aria-current="page"' : ''} href="#deck">Deck</a>` +
+    `<a${active === 'text' ? ' class="cur" aria-current="page"' : ''} href="#text">Text</a></div>`;
+}
+
+export function versionSwitcher(versions = [], activeIdx = 0) {
+  const cur = versions[activeIdx]?.label || '';
+  const opts = versions.map((v, i) =>
+    `<div class="vopt" role="option" data-active="${i === activeIdx ? '1' : '0'}">` +
+    `<span><div class="vname">${v.label}</div><div class="vmeta">${v.meta || ''}</div></span>` +
+    `<span class="vbadge ${v.badge === 'live' ? 'live' : 'arch'}">${v.badge || 'archive'}</span></div>`).join('');
+  return `<div class="vsw" data-vsw><button class="vsw__btn" aria-haspopup="listbox" aria-expanded="false">` +
+    `<span class="lbl">version:</span><span class="cur">${cur}</span><span class="car"></span></button>` +
+    `<div class="vsw__menu" role="listbox">${opts}</div></div>`;
+}
+
+// `nav` ([id, icon, label, href?, target?][]) mirrors the account sidebar so the
+// dropdown and the sidebar stay in sync; falls back to the default two items.
+export function accountMenu({ name = 'Ada Lovelace', email = 'ada@apliteni.com', active = 'prefs', nav } = {}) {
+  const ini = (email.split('@')[0].split(/[._-]+/).filter(Boolean).map((w) => w[0]).slice(0, 2).join('') || '?').toUpperCase();
+  const items = nav && nav.length ? nav : [['prefs', 'gear', 'Preferences'], ['access', 'key', 'Access &amp; agents']];
+  const it = ([id, ic, label, href, target]) =>
+    `<a href="${href || '#' + id}"${target ? ` target="${target}"` : ''}${active === id ? ' class="cur"' : ''} role="menuitem">${icon(ic)}${label}</a>`;
+  // `on` so the menu is visible in Storybook / standalone use (no /auth/me gate).
+  return `<div class="acct on" data-acct>` +
+    `<button class="avatar" data-acct-btn aria-haspopup="menu" aria-expanded="false" aria-label="Account">${ini}</button>` +
+    `<div class="amenu" role="menu">` +
+    `<div class="ahead"><span class="avatar">${ini}</span><span class="aw"><span class="anm">${name}</span><span class="aem" title="${email}">${email}</span></span></div>` +
+    items.map(it).join('') +
+    `<div class="asep"></div><a class="aout" href="#logout" role="menuitem">${icon('logout')}Sign out</a>` +
+    `</div></div>`;
+}
+
+// Full topbar. Pass which pieces to include.
+export function topbar({
+  word = 'Strategy', view = 'deck', versions, versionIdx = 0,
+  account, theme = true, showSwitch = true,
+} = {}) {
+  return `<header class="topbar"><div class="topbar__in">` +
+    brand({ word }) +
+    (showSwitch ? deckTextSwitch(view) : '') +
+    `<span class="spacer"></span>` +
+    (versions ? versionSwitcher(versions, versionIdx) : '') +
+    (theme ? themeToggle() : '') +
+    (account ? accountMenu(account) : '') +
+    `</div></header>`;
+}
+
+// ---- Behaviours (call once after markup mounts) --------------------------
+export function applyTheme(t, root = document.documentElement) {
+  root.setAttribute('data-theme', t);
+  root.querySelectorAll('[data-theme-toggle]').forEach((btn) => {
+    const ic = btn.querySelector('[data-theme-icon]');
+    const lbl = btn.querySelector('[data-theme-label]');
+    if (ic) ic.innerHTML = t === 'dark' ? sun : moon;
+    if (lbl) lbl.textContent = t === 'dark' ? 'Light' : 'Dark';
+  });
+  try { localStorage.setItem(THEME_KEY, t); } catch (e) { /* no-op */ }
+}
+
+const ACCENT_KEY = 'apliteni-strategy-accent';
+export const ACCENTS = ['default', 'phoenix', 'ocean', 'emerald'];
+
+export function applyAccent(name, root = document.documentElement) {
+  if (!name || name === 'default') root.removeAttribute('data-accent');
+  else root.setAttribute('data-accent', name);
+  try { localStorage.setItem(ACCENT_KEY, name || 'default'); } catch (e) { /* no-op */ }
+}
+
+export function wireTopbar(root = document) {
+  // Theme toggle
+  root.querySelectorAll('[data-theme-toggle]').forEach((btn) => {
+    const html = document.documentElement;
+    const cur = html.getAttribute('data-theme') || 'dark';
+    applyTheme(cur, html);
+    btn.addEventListener('click', () => applyTheme(html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark', html));
+  });
+  // Deck/Text view switch (.dtsw) — switch the active pill on click
+  root.querySelectorAll('.dtsw').forEach((sw) => {
+    sw.addEventListener('click', (e) => {
+      const a = e.target.closest('a');
+      if (!a || !sw.contains(a)) return;
+      e.preventDefault();
+      sw.querySelectorAll('a').forEach((x) => { x.classList.remove('cur'); x.removeAttribute('aria-current'); });
+      a.classList.add('cur');
+      a.setAttribute('aria-current', 'page');
+    });
+  });
+  // Segmented controls (.ui-seg) — visual toggle
+  root.querySelectorAll('.ui-seg').forEach((seg) => {
+    seg.addEventListener('click', (e) => {
+      const b = e.target.closest('button');
+      if (!b || !seg.contains(b)) return;
+      seg.querySelectorAll('button').forEach((x) => { x.classList.remove('is-active'); x.setAttribute('aria-selected', 'false'); });
+      b.classList.add('is-active');
+      b.setAttribute('aria-selected', 'true');
+    });
+  });
+  // Version switcher + account menu (open/close)
+  const toggleOpen = (el, btn) => (e) => { e.stopPropagation(); const o = el.classList.toggle('open'); btn?.setAttribute('aria-expanded', o ? 'true' : 'false'); };
+  root.querySelectorAll('[data-vsw]').forEach((vsw) => { const b = vsw.querySelector('.vsw__btn'); b?.addEventListener('click', toggleOpen(vsw, b)); });
+  root.querySelectorAll('[data-acct]').forEach((ac) => { const b = ac.querySelector('[data-acct-btn]'); b?.addEventListener('click', toggleOpen(ac, b)); });
+  document.addEventListener('click', () => {
+    root.querySelectorAll('[data-vsw].open,[data-acct].open').forEach((el) => el.classList.remove('open'));
+  });
+  // Accent pickers
+  root.querySelectorAll('[data-accent-pick]').forEach((chip) => {
+    chip.addEventListener('click', () => {
+      applyAccent(chip.getAttribute('data-accent-pick'), document.documentElement);
+      const group = chip.closest('[data-accent-group]') || root;
+      group.querySelectorAll('[data-accent-pick]').forEach((c) => c.classList.toggle('is-active', c === chip));
+    });
+  });
+  // Copy buttons
+  root.querySelectorAll('.ui-snippet__copy').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      const pre = btn.closest('.ui-snippet')?.querySelector('pre');
+      if (pre) { navigator.clipboard?.writeText(pre.innerText); btn.innerHTML = '✓ Copied'; setTimeout(() => { btn.innerHTML = btn.dataset.orig || 'Copy'; }, 1400); }
+    });
+  });
+}

package/src/index.css

@@ -0,0 +1,19 @@
+/* ============================================================================
+ * apliteni-ui — full stylesheet.
+ * Import once (`import 'apliteni-ui/css'`) or cherry-pick from src/styles/*.
+ * Requires the Poppins font (loaded by the host page or Storybook preview).
+ * ========================================================================== */
+@import "./tokens/tokens.css";
+@import "./tokens/accents.css";
+@import "./styles/base.css";
+@import "./styles/button.css";
+@import "./styles/card.css";
+@import "./styles/badge.css";
+@import "./styles/segmented.css";
+@import "./styles/input.css";
+@import "./styles/table.css";
+@import "./styles/callout.css";
+@import "./styles/code.css";
+@import "./styles/topbar.css";
+@import "./styles/layout.css";
+@import "./styles/feedback.css";

package/src/index.js

@@ -0,0 +1,8 @@
+// apliteni-ui — public entry.
+// Styles ship separately: `import 'apliteni-ui/css'`.
+export * from './components/index.js';
+export * from './components/topbar.js';
+export * from './components/shell.js';
+export * from './components/feedback.js';
+export * from './assets/icons.js';
+export * from './assets/brand.js';

package/src/inline.js

@@ -0,0 +1,55 @@
+// Inline CSS for server-render consumers (e.g. the strategy portal, which
+// inlines stylesheets into the HTML it serves rather than linking them).
+//
+// Node reads the package's own .css files and returns them as strings. Import
+// only what a page needs:
+//
+//   import { tokensCss, topbarCss, cssText } from '@apliteni/apliteni-ui/inline'
+//
+// Browser/bundler builds should import the .css directly ('@apliteni/apliteni-ui/css').
+import { readFileSync } from 'node:fs';
+
+const read = (rel) => readFileSync(new URL(`./${rel}`, import.meta.url), 'utf8');
+
+// Tokens = base scale + dark/light + accent sub-themes. The single source for
+// every `:root{ --… }` definition. Replaces hand-inlined token blocks.
+export const tokensCss = read('tokens/tokens.css') + '\n' + read('tokens/accents.css');
+
+// Base reset, ambient glow, focus ring, default icon sizing.
+export const baseCss = read('styles/base.css');
+
+// Canonical topbar (same class names the portal already uses).
+export const topbarCss = read('styles/topbar.css');
+
+// Individual component stylesheets, addressable by name.
+export const styles = {
+  base: baseCss,
+  button: read('styles/button.css'),
+  card: read('styles/card.css'),
+  badge: read('styles/badge.css'),
+  segmented: read('styles/segmented.css'),
+  input: read('styles/input.css'),
+  table: read('styles/table.css'),
+  callout: read('styles/callout.css'),
+  code: read('styles/code.css'),
+  topbar: topbarCss,
+  layout: read('styles/layout.css'),
+  feedback: read('styles/feedback.css'),
+};
+
+// Everything, in the same order as index.css. `tokensCss` first so cascade is right.
+export const cssText = [
+  tokensCss,
+  styles.base,
+  styles.button,
+  styles.card,
+  styles.badge,
+  styles.segmented,
+  styles.input,
+  styles.table,
+  styles.callout,
+  styles.code,
+  styles.topbar,
+  styles.layout,
+  styles.feedback,
+].join('\n');

package/src/styles/badge.css

@@ -0,0 +1,64 @@
+/* ============================================================================
+ * Badge / Pill / Tag
+ *   .ui-badge        — uppercase status chip (live / soon / archive / neutral)
+ *   .ui-tag          — soft solid label
+ *   .ui-dot          — leading status dot (pulses when .is-live)
+ * ========================================================================== */
+
+.ui-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 10px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  font-weight: var(--weight-bold);
+  padding: 3px 9px;
+  border-radius: var(--radius-pill);
+  color: var(--muted);
+  background: var(--surface-2);
+  white-space: nowrap;
+}
+.ui-badge--live { color: var(--green); background: var(--glow-green); }
+.ui-badge--soon { color: var(--purple-mid); background: var(--glow-purple); }
+.ui-badge--info { color: var(--cyan); background: var(--glow-cyan); }
+.ui-badge--warn { color: var(--amber); background: color-mix(in srgb, var(--amber) 15%, transparent); }
+.ui-badge--danger { color: var(--pink); background: var(--glow-pink); }
+.ui-badge--archive { color: var(--muted); background: var(--surface); }
+
+/* Pill: same shape, sentence case, a touch larger — a metadata chip */
+.ui-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  font-size: var(--text-xs);
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--muted);
+  background: var(--surface-2);
+  border-radius: var(--radius-pill);
+  padding: 4px 11px;
+  font-weight: var(--weight-semibold);
+}
+.ui-pill--live { color: var(--green); background: var(--glow-green); }
+.ui-pill--soon { color: var(--purple-mid); background: var(--glow-purple); }
+
+/* Status dot */
+.ui-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--muted);
+  flex: none;
+  display: inline-block;
+}
+.ui-dot.is-live {
+  background: var(--green);
+  box-shadow: 0 0 0 0 var(--glow-green);
+  animation: ui-pulse 2s var(--ease) infinite;
+}
+@keyframes ui-pulse {
+  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent); }
+  70% { box-shadow: 0 0 0 7px transparent; }
+  100% { box-shadow: 0 0 0 0 transparent; }
+}

package/src/styles/base.css

@@ -0,0 +1,127 @@
+/* ============================================================================
+ * base — reset, document defaults, ambient glow, typography primitives
+ * ========================================================================== */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  background: var(--bg);
+  color: var(--ink);
+  font-family: var(--font-sans);
+  font-weight: var(--weight-normal);
+  font-size: var(--text-base);
+  line-height: var(--leading-normal);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+::selection {
+  background: color-mix(in srgb, var(--accent) 30%, transparent);
+  color: var(--strong);
+}
+
+a {
+  color: var(--accent);
+  text-decoration: none;
+}
+
+/* Ambient blurred glow — the deck's signature background depth.
+   Place <span class="ui-glow ui-glow--purple"> absolutely inside a positioned
+   parent. Two colour variants ship; scale/position with inline styles. */
+.ui-glow {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(100px);
+  opacity: 0.5;
+  pointer-events: none;
+  z-index: 0;
+  width: 420px;
+  height: 420px;
+}
+.ui-glow--purple { background: radial-gradient(circle, var(--purple-light), transparent 70%); }
+.ui-glow--green  { background: radial-gradient(circle, var(--green), transparent 70%); opacity: 0.28; }
+.ui-glow--cyan   { background: radial-gradient(circle, var(--cyan), transparent 70%); opacity: 0.3; }
+
+/* ----------------------------------------------------------------------------
+ * Background treatments — drop-in page/section backdrops. Each is a ::before
+ * layer, so add the class to a positioned wrapper and give the real content a
+ * higher stacking context (position:relative;z-index:1). All read the accent /
+ * glow tokens, so they re-theme with the sub-theme and work in dark + light.
+ * -------------------------------------------------------------------------- */
+[class*="ui-bg-"] { position: relative; }
+[class*="ui-bg-"] > * { position: relative; z-index: 1; }
+[class*="ui-bg-"]::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
+
+/* Spotlight — a soft radial from the top-centre (auth cards, focused heroes). */
+.ui-bg-spotlight::before {
+  background: radial-gradient(620px 340px at 50% -12%, var(--glow-purple), transparent 70%);
+}
+/* Aurora — layered accent + cyan glows for a rich hero backdrop. */
+.ui-bg-aurora::before {
+  background:
+    radial-gradient(520px 400px at 10% -12%, var(--glow-purple), transparent 60%),
+    radial-gradient(460px 360px at 94% 6%, var(--glow-cyan), transparent 62%);
+}
+/* Grid — a faint token-coloured grid, masked to fade at the edges. */
+.ui-bg-grid::before {
+  background-image:
+    linear-gradient(to right, var(--border) 1px, transparent 1px),
+    linear-gradient(to bottom, var(--border) 1px, transparent 1px);
+  background-size: 34px 34px;
+  -webkit-mask-image: radial-gradient(circle at 50% 35%, #000, transparent 78%);
+  mask-image: radial-gradient(circle at 50% 35%, #000, transparent 78%);
+}
+/* Dots — a subtle dot field for dashboards / technical surfaces. */
+.ui-bg-dots::before {
+  background-image: radial-gradient(var(--border) 1.4px, transparent 1.4px);
+  background-size: 22px 22px;
+  -webkit-mask-image: radial-gradient(circle at 50% 35%, #000, transparent 80%);
+  mask-image: radial-gradient(circle at 50% 35%, #000, transparent 80%);
+}
+/* Accent wash — a gentle top-down tint in the current accent. */
+.ui-bg-wash::before {
+  background: linear-gradient(180deg, var(--glow-purple), transparent 45%);
+}
+
+/* Layout helpers used by the example apps */
+.ui-container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 clamp(14px, 2.4vw, 26px); }
+.ui-stack > * + * { margin-top: var(--space-4); }
+
+/* Section eyebrow — uppercase caption used across cards and headers */
+.ui-eyebrow {
+  font-size: var(--text-xs);
+  letter-spacing: var(--tracking-caps);
+  text-transform: uppercase;
+  color: var(--muted);
+  font-weight: var(--weight-semibold);
+}
+
+/* Sensible default size for inline icons that a parent rule doesn't size.
+   Component rules (.ui-btn svg, .ui-card__icon svg…) come later and win the
+   tie, so they always override this — it only catches bare icon() calls. */
+svg:not([width]):not([height]) {
+  width: 1.1em;
+  height: 1.1em;
+  flex: none;
+  vertical-align: -0.15em;
+}
+
+/* Focus-visible ring, shared by all interactive controls */
+.ui-focusable:focus-visible,
+.ui-btn:focus-visible,
+.ui-input:focus-visible,
+.ui-seg button:focus-visible,
+.ui-switch:focus-visible {
+  outline: none;
+  box-shadow: var(--ring);
+}

package/src/styles/button.css

@@ -0,0 +1,118 @@
+/* ============================================================================
+ * Button — .ui-btn  (variants: primary / secondary / ghost / danger)
+ *                   (sizes: sm / md / lg, [icon], [disabled], [aria-busy])
+ * ========================================================================== */
+
+.ui-btn {
+  --btn-pad-y: 9px;
+  --btn-pad-x: 17px;
+  --btn-font: var(--text-sm);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  font-family: var(--font-sans);
+  font-size: var(--btn-font);
+  font-weight: var(--weight-medium);
+  line-height: 1;
+  border-radius: var(--radius-sm);
+  padding: var(--btn-pad-y) var(--btn-pad-x);
+  cursor: pointer;
+  border: 1px solid var(--border);
+  background: var(--surface-2);
+  color: var(--text);
+  white-space: nowrap;
+  transition: background var(--dur-fast) var(--ease),
+    border-color var(--dur-fast) var(--ease),
+    color var(--dur-fast) var(--ease),
+    transform var(--dur-fast) var(--ease),
+    filter var(--dur-fast) var(--ease);
+}
+
+.ui-btn:hover {
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
+  color: var(--strong);
+}
+.ui-btn:active { transform: translateY(1px); }
+
+.ui-btn svg { width: 16px; height: 16px; flex: none; }
+
+/* -- Variants ----------------------------------------------------------- */
+.ui-btn--primary {
+  background: var(--accent-strong);
+  color: var(--accent-contrast);
+  border-color: var(--accent-strong);
+  font-weight: var(--weight-semibold);
+}
+.ui-btn--primary:hover {
+  filter: brightness(1.1);
+  color: var(--accent-contrast);
+  background: var(--accent-strong);
+  border-color: var(--accent-strong);
+}
+
+.ui-btn--ghost {
+  background: transparent;
+  border-color: transparent;
+  color: var(--dim);
+}
+.ui-btn--ghost:hover {
+  background: var(--surface-2);
+  border-color: transparent;
+  color: var(--strong);
+}
+
+.ui-btn--danger { color: var(--muted); }
+.ui-btn--danger:hover {
+  color: var(--pink);
+  border-color: var(--pink);
+  background: color-mix(in srgb, var(--pink) 10%, transparent);
+}
+
+/* -- Sizes -------------------------------------------------------------- */
+.ui-btn--sm { --btn-pad-y: 6px; --btn-pad-x: 12px; --btn-font: 12.5px; }
+.ui-btn--lg { --btn-pad-y: 13px; --btn-pad-x: 24px; --btn-font: var(--text-md); border-radius: var(--radius-md); }
+
+/* Icon-only */
+.ui-btn--icon { padding: 9px; border-radius: var(--radius-sm); }
+.ui-btn--icon.ui-btn--sm { padding: 6px; }
+
+.ui-btn--block { width: 100%; }
+
+/* -- States ------------------------------------------------------------- */
+.ui-btn:disabled,
+.ui-btn[aria-disabled="true"] {
+  opacity: 0.45;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Busy: keep the label, run a gradient-bar loader along the base, and the
+   button is disabled (not clickable). Pass busy + the .ui-btn__bars markup. */
+.ui-btn[aria-busy="true"] {
+  pointer-events: none;
+  position: relative;
+  overflow: hidden;
+}
+.ui-btn__bars {
+  position: absolute;
+  left: 0; right: 0; bottom: 0;
+  height: 3px;
+  background: color-mix(in srgb, currentColor 20%, transparent);
+  overflow: hidden;
+}
+.ui-btn__bars i {
+  position: absolute;
+  height: 100%;
+  border-radius: 3px;
+  background: linear-gradient(90deg, var(--purple-light), var(--cyan));
+}
+.ui-btn__bars i:nth-child(1) { width: 35%; animation: ui-bars1 2s cubic-bezier(0.65, 0.05, 0.35, 1) infinite; }
+.ui-btn__bars i:nth-child(2) { width: 20%; animation: ui-bars2 2s cubic-bezier(0.65, 0.05, 0.35, 1) 0.8s infinite; }
+@keyframes ui-bars1 { 0% { left: -40%; } 100% { left: 110%; } }
+@keyframes ui-bars2 { 0% { left: -25%; } 100% { left: 120%; } }
+@media (prefers-reduced-motion: reduce) { .ui-btn__bars i { animation: none; } .ui-btn__bars i:nth-child(1) { left: 0; } }
+
+@keyframes ui-spin { to { transform: rotate(360deg); } }

package/src/styles/callout.css

@@ -0,0 +1,69 @@
+/* ============================================================================
+ * Callout / Note / Toast — inline messages & transient notifications
+ * ========================================================================== */
+
+.ui-callout {
+  display: flex;
+  gap: 12px;
+  padding: 15px 17px;
+  border-radius: var(--radius-md);
+  background: var(--surface-2);
+  font-size: 13.5px;
+  line-height: 1.55;
+  color: var(--dim);
+}
+.ui-callout__icon { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--muted); }
+.ui-callout__icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.8; }
+.ui-callout b { color: var(--text); font-weight: var(--weight-semibold); }
+.ui-callout code { font-family: var(--font-mono); font-size: 0.92em; color: var(--text); }
+
+.ui-callout--info { background: var(--glow-cyan); }
+.ui-callout--info .ui-callout__icon { color: var(--cyan); }
+.ui-callout--success { background: var(--glow-green); }
+.ui-callout--success .ui-callout__icon { color: var(--green); }
+.ui-callout--warn { background: color-mix(in srgb, var(--amber) 13%, transparent); }
+.ui-callout--warn .ui-callout__icon { color: var(--amber); }
+.ui-callout--danger { background: var(--glow-pink); }
+.ui-callout--danger .ui-callout__icon { color: var(--pink); }
+
+/* Toast — a floating, dismissible notification */
+.ui-toast {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 13px 16px;
+  border-radius: var(--radius-md);
+  background: var(--bg-elevated);
+  box-shadow: var(--shadow-lg);
+  color: var(--text);
+  font-size: var(--text-base);
+  max-width: 380px;
+}
+.ui-toast__icon { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 50%; }
+.ui-toast__icon svg { width: 13px; height: 13px; }
+.ui-toast--success .ui-toast__icon { background: var(--green); color: #0c0c0c; }
+.ui-toast--danger .ui-toast__icon { background: var(--pink); color: #fff; }
+.ui-toast__body { flex: 1; }
+.ui-toast__title { font-weight: var(--weight-medium); color: var(--strong); }
+.ui-toast__close { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 2px; display: grid; place-items: center; }
+.ui-toast__close:hover { color: var(--text); }
+
+/* Success panel — centered confirmation, used after form submit */
+.ui-success {
+  border-radius: var(--radius-lg);
+  padding: 30px;
+  text-align: center;
+  background: var(--glow-green);
+}
+.ui-success__check {
+  width: 48px; height: 48px;
+  border-radius: 50%;
+  background: var(--green);
+  color: #0c0c0c;
+  display: grid;
+  place-items: center;
+  margin: 0 auto 14px;
+}
+.ui-success__check svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2.4; }
+.ui-success__title { color: var(--strong); font-size: var(--text-lg); font-weight: var(--weight-semibold); margin-bottom: 5px; }
+.ui-success__sub { color: var(--dim); font-size: var(--text-base); }

package/src/styles/card.css

@@ -0,0 +1,79 @@
+/* ============================================================================
+ * Card — .ui-card  (filled surface, no borders — the deck groups with
+ *                   surface + radius, never outlines)
+ * Rows: .ui-card__row  /  headers: .ui-card__title / .ui-card__sub
+ * ========================================================================== */
+
+.ui-card {
+  background: var(--surface);
+  border-radius: var(--radius-xl);
+  padding: var(--space-6) 26px;
+  position: relative;
+}
+
+/* Vertical stacks space cards with the container's gap — see .ui-card-stack.
+   (No `.ui-card + .ui-card` margin: it leaks into grid/flex rows and misaligns.) */
+.ui-card-stack { display: flex; flex-direction: column; gap: var(--space-5); }
+
+.ui-card--pad-sm { padding: var(--space-5); }
+.ui-card--pad-lg { padding: var(--space-8) var(--space-10); }
+
+/* An accent-tinted card, e.g. a highlighted plan / success surface */
+.ui-card--accent {
+  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
+}
+.ui-card--live {
+  background: color-mix(in srgb, var(--green) 10%, var(--surface));
+}
+
+/* Interactive card (link / button semantics) */
+.ui-card--interactive {
+  cursor: pointer;
+  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-med) var(--ease);
+}
+.ui-card--interactive:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+}
+
+.ui-card__title {
+  color: var(--strong);
+  font-size: var(--text-lg);
+  font-weight: var(--weight-semibold);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 0 0 5px;
+}
+.ui-card__sub {
+  color: var(--dim);
+  font-size: var(--text-base);
+  line-height: var(--leading-snug);
+  margin-bottom: var(--space-5);
+}
+
+/* Setting rows: label + control, divided by a hairline */
+.ui-card__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-5);
+  padding: var(--space-4) 2px;
+}
+.ui-card__row + .ui-card__row { border-top: 1px solid var(--border); }
+.ui-card__row .lab { color: var(--strong); font-size: var(--text-md); font-weight: var(--weight-medium); }
+.ui-card__row .hint { color: var(--dim); font-size: 13.5px; margin-top: 3px; }
+
+/* Icon chip that leads a card header */
+.ui-card__icon {
+  width: 38px;
+  height: 38px;
+  border-radius: var(--radius-md);
+  display: grid;
+  place-items: center;
+  background: var(--glow-purple);
+  color: var(--accent);
+  flex: none;
+}
+.ui-card__icon svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.7; }