@openmarketsai/order-sheet 0.1.0

package/dist/ui/styles.css

@@ -0,0 +1,284 @@
+/* @openmarketsai/order-sheet/ui — the styled sheet.
+ *
+ * Contract with the host page:
+ *   - every rule is scoped under .oms-root; no :root, html, body, or * rules
+ *   - every variable is --oms-*, every class is oms-*
+ *   - everything lives in @layer oms, so a host's own layers order above it and
+ *     an unlayered host rule always wins
+ *   - the default tokens are the OpenMarkets brand; system colour scheme by
+ *     default, dark under prefers-color-scheme (guarded so data-oms-theme="light"
+ *     wins) and again under data-oms-theme="dark"; the two dark blocks are
+ *     byte-identical on purpose
+ *   - the layout answers to the sheet's OWN width (container queries), not the viewport
+ *   - no @font-face: the token names a stack with system fallbacks
+ */
+@layer oms {
+  .oms-root {
+    color-scheme: light;
+    --oms-bg: #fafafc;
+    --oms-surface: #ffffff;
+    --oms-fg: #09090b;
+    --oms-muted: #52525b;
+    --oms-border: #e4e4e7;
+    --oms-accent: #4f46e5;
+    --oms-accent-soft: #e0e7ff;
+    --oms-live: #047857;
+    --oms-live-soft: #d1fae5;
+    --oms-soon: #155e75;
+    --oms-soon-soft: #cffafe;
+    --oms-warn: #b45309;
+    --oms-warn-soft: #fef3c7;
+    --oms-danger: #be123c;
+    --oms-danger-soft: #ffe4e6;
+    --oms-font: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+    --oms-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
+    --oms-radius: 4px;
+    --oms-density: 1;
+
+    /* derived */
+    --oms-radius-chip: calc(var(--oms-radius) * 0.75);
+    --oms-space: calc(8px * var(--oms-density));
+    --oms-text: calc(14px * var(--oms-density));
+    --oms-text-sm: calc(12px * var(--oms-density));
+    --oms-text-lg: calc(18px * var(--oms-density));
+    --oms-line: 1.45;
+
+    container-type: inline-size;
+    container-name: oms;
+    color: var(--oms-fg);
+    font-family: var(--oms-font);
+    font-size: var(--oms-text);
+    line-height: var(--oms-line);
+    -webkit-font-smoothing: antialiased;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .oms-root:not([data-oms-theme='light']) {
+      color-scheme: dark;
+      --oms-bg: #09090b;
+      --oms-surface: #18181b;
+      --oms-fg: #f4f4f5;
+      --oms-muted: #a1a1aa;
+      --oms-border: #2a2a30;
+      --oms-accent: #818cf8;
+      --oms-accent-soft: #1e1b4b;
+      --oms-live: #34d399;
+      --oms-live-soft: #052e21;
+      --oms-soon: #22d3ee;
+      --oms-soon-soft: #083344;
+      --oms-warn: #fbbf24;
+      --oms-warn-soft: #3a2a0a;
+      --oms-danger: #fb7185;
+      --oms-danger-soft: #4c0519;
+    }
+  }
+
+  .oms-root[data-oms-theme='dark'] {
+    color-scheme: dark;
+    --oms-bg: #09090b;
+    --oms-surface: #18181b;
+    --oms-fg: #f4f4f5;
+    --oms-muted: #a1a1aa;
+    --oms-border: #2a2a30;
+    --oms-accent: #818cf8;
+    --oms-accent-soft: #1e1b4b;
+    --oms-live: #34d399;
+    --oms-live-soft: #052e21;
+    --oms-soon: #22d3ee;
+    --oms-soon-soft: #083344;
+    --oms-warn: #fbbf24;
+    --oms-warn-soft: #3a2a0a;
+    --oms-danger: #fb7185;
+    --oms-danger-soft: #4c0519;
+  }
+
+  /* ── the card ── */
+  .oms-sheet {
+    background: var(--oms-surface);
+    border: 1px solid var(--oms-border);
+    border-radius: var(--oms-radius);
+    padding: calc(var(--oms-space) * 2);
+    display: grid;
+    gap: calc(var(--oms-space) * 1.5);
+    box-sizing: border-box;
+    max-width: 100%;
+  }
+  .oms-sheet *,
+  .oms-sheet *::before,
+  .oms-sheet *::after { box-sizing: border-box; }
+  .oms-sheet button,
+  .oms-sheet input { font: inherit; color: inherit; }
+
+  .oms-sheet :is(button, input, [role='radio']):focus-visible {
+    outline: 2px solid var(--oms-accent);
+    outline-offset: 2px;
+  }
+
+  .oms-header { display: grid; gap: calc(var(--oms-space) * 0.25); }
+  .oms-title { font-size: var(--oms-text-lg); font-weight: 700; letter-spacing: -0.01em; margin: 0; }
+  .oms-subtitle { color: var(--oms-muted); font-size: var(--oms-text-sm); margin: 0; }
+
+  .oms-label {
+    display: block;
+    color: var(--oms-muted);
+    font-family: var(--oms-font-mono);
+    font-size: calc(var(--oms-text-sm) * 0.92);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    margin-bottom: calc(var(--oms-space) * 0.5);
+  }
+
+  /* ── venues ── */
+  .oms-venues { display: grid; gap: calc(var(--oms-space) * 0.5); margin: 0; padding: 0; }
+  .oms-venue {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    gap: var(--oms-space);
+    padding: var(--oms-space) calc(var(--oms-space) * 1.25);
+    border: 1px solid var(--oms-border);
+    border-radius: var(--oms-radius);
+    background: var(--oms-surface);
+    cursor: pointer;
+    text-align: left;
+    width: 100%;
+  }
+  .oms-venue[aria-checked='true'] { border-color: var(--oms-accent); background: var(--oms-accent-soft); }
+  .oms-venue[data-state='blocked'] { cursor: not-allowed; }
+  .oms-venue[data-state='blocked'] .oms-venue-name,
+  .oms-venue[data-state='blocked'] .oms-venue-price { opacity: 0.55; }
+  .oms-venue-logo { width: calc(20px * var(--oms-density)); height: calc(20px * var(--oms-density)); border-radius: 50%; object-fit: cover; background: var(--oms-border); }
+  .oms-venue-logo:empty, .oms-venue-logo--placeholder { display: inline-block; }
+  .oms-venue-main { display: grid; gap: 2px; min-width: 0; }
+  .oms-venue-name { font-weight: 600; display: flex; align-items: center; gap: calc(var(--oms-space) * 0.5); flex-wrap: wrap; }
+  .oms-venue-reason { color: var(--oms-muted); font-size: var(--oms-text-sm); }
+  .oms-venue[data-state='blocked'] .oms-venue-reason { color: var(--oms-danger); }
+  .oms-venue-price { font-family: var(--oms-font-mono); font-variant-numeric: tabular-nums; font-size: var(--oms-text-lg); font-weight: 600; }
+  .oms-venue-meta { color: var(--oms-muted); font-size: var(--oms-text-sm); font-family: var(--oms-font-mono); font-variant-numeric: tabular-nums; text-align: right; }
+
+  /* ── chips ── */
+  .oms-chip {
+    display: inline-block;
+    padding: 1px calc(var(--oms-space) * 0.75);
+    border-radius: var(--oms-radius-chip);
+    font-family: var(--oms-font-mono);
+    font-size: calc(var(--oms-text-sm) * 0.9);
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    line-height: 1.6;
+  }
+  .oms-chip--best { background: var(--oms-live-soft); color: var(--oms-live); }
+  .oms-chip--connected { background: var(--oms-live-soft); color: var(--oms-live); }
+  .oms-chip--off { background: var(--oms-warn-soft); color: var(--oms-warn); }
+  .oms-chip--test { background: var(--oms-warn-soft); color: var(--oms-warn); }
+  .oms-chip--soon { background: var(--oms-soon-soft); color: var(--oms-soon); }
+  .oms-chip--danger { background: var(--oms-danger-soft); color: var(--oms-danger); }
+
+  /* ── segmented controls ── */
+  .oms-segmented { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--oms-border); border-radius: var(--oms-radius); overflow: hidden; width: 100%; }
+  .oms-segment {
+    padding: calc(var(--oms-space) * 0.75) var(--oms-space);
+    background: var(--oms-surface);
+    border: 0;
+    border-right: 1px solid var(--oms-border);
+    cursor: pointer;
+    font-weight: 500;
+  }
+  .oms-segment:last-child { border-right: 0; }
+  .oms-segment[aria-pressed='true'] { background: var(--oms-accent); color: var(--oms-bg); }
+  .oms-segment[data-mode='real'][aria-pressed='true'] { background: var(--oms-danger); }
+  .oms-segment:not([data-available]) { color: var(--oms-muted); }
+  .oms-segment:disabled { cursor: not-allowed; opacity: 0.6; }
+
+  /* ── fields ── */
+  .oms-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--oms-space); }
+  .oms-field { display: grid; gap: calc(var(--oms-space) * 0.5); min-width: 0; }
+  .oms-input-row { display: flex; align-items: stretch; border: 1px solid var(--oms-border); border-radius: var(--oms-radius); background: var(--oms-surface); overflow: hidden; }
+  .oms-input-row:focus-within { border-color: var(--oms-accent); }
+  .oms-input {
+    flex: 1 1 auto;
+    min-width: 0;
+    padding: calc(var(--oms-space) * 0.75) var(--oms-space);
+    border: 0;
+    background: transparent;
+    font-family: var(--oms-font-mono);
+    font-variant-numeric: tabular-nums;
+    font-size: var(--oms-text-lg);
+  }
+  .oms-input:focus-visible { outline: none; }
+  .oms-input[aria-invalid='true'] { color: var(--oms-danger); }
+  .oms-input-unit { display: flex; }
+  .oms-input-unit .oms-segment { border-right: 0; border-left: 1px solid var(--oms-border); font-family: var(--oms-font-mono); font-size: var(--oms-text-sm); }
+  .oms-input-hint { color: var(--oms-muted); font-size: var(--oms-text-sm); font-family: var(--oms-font-mono); }
+  .oms-link { background: none; border: 0; padding: 0; color: var(--oms-accent); cursor: pointer; text-decoration: underline; font-size: var(--oms-text-sm); }
+
+  /* ── quote ── */
+  .oms-quote { display: grid; gap: calc(var(--oms-space) * 0.5); padding: var(--oms-space) calc(var(--oms-space) * 1.25); border: 1px solid var(--oms-border); border-radius: var(--oms-radius); background: var(--oms-bg); }
+  .oms-quote[data-freshness='stale'] { border-style: dashed; }
+  .oms-quote-row { display: flex; justify-content: space-between; gap: var(--oms-space); margin: 0; }
+  .oms-quote-row dt { color: var(--oms-muted); }
+  .oms-quote-row dd { margin: 0; font-family: var(--oms-font-mono); font-variant-numeric: tabular-nums; }
+  .oms-quote-row--total dd, .oms-quote-row--total dt { font-weight: 700; }
+  .oms-quote-row--profit dd { color: var(--oms-live); }
+  .oms-quote-note { color: var(--oms-muted); font-size: var(--oms-text-sm); margin: 0; }
+
+  /* ── issues ── */
+  .oms-issues { display: grid; gap: calc(var(--oms-space) * 0.5); }
+  .oms-issues:empty { display: none; }
+  .oms-issue {
+    display: flex;
+    align-items: flex-start;
+    gap: calc(var(--oms-space) * 0.75);
+    padding: calc(var(--oms-space) * 0.75) var(--oms-space);
+    border-radius: var(--oms-radius);
+    font-size: var(--oms-text-sm);
+  }
+  .oms-issue[data-severity='block'] { background: var(--oms-danger-soft); color: var(--oms-danger); }
+  .oms-issue[data-severity='warn'] { background: var(--oms-warn-soft); color: var(--oms-warn); }
+  .oms-issue[data-severity='info'] { background: var(--oms-soon-soft); color: var(--oms-soon); }
+  .oms-issue-fix { margin-left: auto; white-space: nowrap; background: none; border: 1px solid currentColor; border-radius: var(--oms-radius-chip); color: inherit; padding: 0 calc(var(--oms-space) * 0.75); cursor: pointer; font-size: inherit; }
+
+  .oms-hint { display: flex; align-items: center; gap: var(--oms-space); color: var(--oms-muted); font-size: var(--oms-text-sm); }
+
+  /* ── submit ── */
+  .oms-submit {
+    width: 100%;
+    padding: calc(var(--oms-space) * 1.25) var(--oms-space);
+    border: 0;
+    border-radius: var(--oms-radius);
+    background: var(--oms-accent);
+    color: var(--oms-bg);
+    font-weight: 700;
+    font-size: var(--oms-text);
+    cursor: pointer;
+  }
+  .oms-submit[data-mode='real'] { background: var(--oms-danger); }
+  .oms-submit[data-phase='confirming'] { outline: 2px solid var(--oms-danger); outline-offset: 2px; }
+  .oms-submit:disabled { opacity: 0.5; cursor: not-allowed; }
+  .oms-submit-row { display: grid; gap: calc(var(--oms-space) * 0.5); }
+  .oms-submit-secondary { background: none; border: 0; color: var(--oms-muted); cursor: pointer; text-decoration: underline; font-size: var(--oms-text-sm); justify-self: center; }
+
+  /* ── outcome ── */
+  .oms-outcome { display: grid; gap: calc(var(--oms-space) * 0.5); padding: var(--oms-space) calc(var(--oms-space) * 1.25); border-radius: var(--oms-radius); border: 1px solid var(--oms-border); }
+  .oms-outcome[data-summary='filled'], .oms-outcome[data-phase='filled'], .oms-outcome[data-phase='settled'] { border-color: var(--oms-live); background: var(--oms-live-soft); color: var(--oms-live); }
+  .oms-outcome[data-phase='resting'], .oms-outcome[data-phase='pending'], .oms-outcome[data-phase='partial'] { border-color: var(--oms-soon); background: var(--oms-soon-soft); color: var(--oms-soon); }
+  .oms-outcome[data-phase='failed'], .oms-outcome[data-phase='cancelled'] { border-color: var(--oms-danger); background: var(--oms-danger-soft); color: var(--oms-danger); }
+  .oms-outcome-title { font-weight: 700; margin: 0; }
+  .oms-outcome-detail { margin: 0; font-size: var(--oms-text-sm); }
+  .oms-outcome-ids { font-family: var(--oms-font-mono); font-size: var(--oms-text-sm); opacity: 0.8; word-break: break-all; }
+  .oms-outcome-actions { display: flex; gap: var(--oms-space); flex-wrap: wrap; }
+  .oms-button { padding: calc(var(--oms-space) * 0.6) var(--oms-space); border: 1px solid currentColor; border-radius: var(--oms-radius); background: transparent; color: inherit; cursor: pointer; font-weight: 600; font-size: var(--oms-text-sm); }
+
+  .oms-footer { color: var(--oms-muted); font-size: var(--oms-text-sm); display: flex; justify-content: space-between; gap: var(--oms-space); flex-wrap: wrap; }
+  .oms-skeleton { color: var(--oms-muted); }
+  .oms-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+
+  /* ── narrow sheets: stack the fields, tighten the venue rows ── */
+  @container oms (max-width: 420px) {
+    .oms-fields { grid-template-columns: 1fr; }
+    .oms-venue { grid-template-columns: 1fr auto; }
+    .oms-venue-logo { display: none; }
+    .oms-venue-price { font-size: var(--oms-text); }
+  }
+}

package/dist/ui/theme.d.ts

@@ -0,0 +1,108 @@
+/**
+ * The theme contract for @openmarketsai/order-sheet/ui.
+ *
+ * A Theme is a small set of tokens per scheme (light / dark) plus type, radius
+ * and density. `createTheme` deep-merges partial overrides over a preset and
+ * derives the `*Soft` tints when only the strong colour is given. `themeToCss`
+ * turns a theme into `--oms-*` custom properties scoped to one class:
+ *
+ *   light values on `.oms-theme-x`
+ *   dark values under `@media (prefers-color-scheme: dark)` guarded by
+ *     `:not([data-oms-theme="light"])`, and again under `[data-oms-theme="dark"]`
+ *
+ * so system is the default and the host can force either on any ancestor —
+ * exactly like the OpenMarkets console. Nothing here is global: no `:root`, no
+ * `body`, no resets.
+ */
+export interface ThemeTokens {
+    /** Page / sheet background. Also the text colour ON an accent or danger fill. */
+    bg: string;
+    /** Card and inputs. */
+    surface: string;
+    fg: string;
+    muted: string;
+    border: string;
+    /** Practice CTA, selected venue, focus. */
+    accent: string;
+    accentSoft: string;
+    /** Filled, connected. */
+    live: string;
+    liveSoft: string;
+    /** Resting / pending. */
+    soon: string;
+    soonSoft: string;
+    /** Warnings, test mode. */
+    warn: string;
+    warnSoft: string;
+    /** Real-money CTA, blocks, failed. */
+    danger: string;
+    dangerSoft: string;
+}
+export type ThemeScheme = 'light' | 'dark' | 'system';
+export interface Theme {
+    scheme: ThemeScheme;
+    font: string;
+    fontMono: string;
+    /** One radius for panels; chips are `calc(radius * 0.75)`. */
+    radius: string;
+    /** Scales paddings and line-heights: 0.85 compact, 1 default, 1.15 touch. */
+    density: number;
+    light: ThemeTokens;
+    dark: ThemeTokens;
+}
+type PerScheme<T> = T | {
+    light: T;
+    dark: T;
+};
+/** Partial overrides. A token given as one string applies to both schemes; `{ light, dark }` sets each. */
+export interface ThemeInput {
+    scheme?: ThemeScheme;
+    font?: string;
+    fontMono?: string;
+    radius?: string;
+    density?: number;
+    bg?: PerScheme<string>;
+    surface?: PerScheme<string>;
+    fg?: PerScheme<string>;
+    muted?: PerScheme<string>;
+    border?: PerScheme<string>;
+    accent?: PerScheme<string>;
+    accentSoft?: PerScheme<string>;
+    live?: PerScheme<string>;
+    liveSoft?: PerScheme<string>;
+    soon?: PerScheme<string>;
+    soonSoft?: PerScheme<string>;
+    warn?: PerScheme<string>;
+    warnSoft?: PerScheme<string>;
+    danger?: PerScheme<string>;
+    dangerSoft?: PerScheme<string>;
+    /** Whole-scheme overrides win over the shorthands above. */
+    light?: Partial<ThemeTokens>;
+    dark?: Partial<ThemeTokens>;
+}
+/** The OpenMarkets brand — the console's tokens (apps/app/app/globals.css): zinc neutrals, indigo accent. */
+export declare const openmarkets: Theme;
+/** A second design on the same contract: cool slate, teal accent, rounder, a touch denser. */
+export declare const slate: Theme;
+export declare const presets: {
+    readonly openmarkets: Theme;
+    readonly slate: Theme;
+};
+export declare function createTheme(input?: ThemeInput, base?: Theme): Theme;
+/** Mix a strong colour towards the background: 85% bg in light (a pale tint), 70% bg in dark (a deep tint). */
+export declare function deriveSoft(strong: string, bg: string, scheme: 'light' | 'dark'): string;
+/**
+ * A theme value goes into an injected <style> verbatim, so it must not be able
+ * to close the declaration, the rule or the element: drop `; { } < >` and
+ * comment openers. Developer input, but a value copied from a design tool
+ * should never break out of its custom property.
+ */
+export declare function cssValue(v: string | number): string;
+/**
+ * CSS for one theme, scoped to `selector` (a class on the sheet's root). The two
+ * dark blocks are byte-identical on purpose — keep them that way.
+ */
+export declare function themeToCss(theme: Theme, selector: string): string;
+/** A short stable id for a theme, so the same theme injects one style block. */
+export declare function themeId(theme: Theme): string;
+export {};

package/dist/ui/theme.js

@@ -0,0 +1,180 @@
+/**
+ * The theme contract for @openmarketsai/order-sheet/ui.
+ *
+ * A Theme is a small set of tokens per scheme (light / dark) plus type, radius
+ * and density. `createTheme` deep-merges partial overrides over a preset and
+ * derives the `*Soft` tints when only the strong colour is given. `themeToCss`
+ * turns a theme into `--oms-*` custom properties scoped to one class:
+ *
+ *   light values on `.oms-theme-x`
+ *   dark values under `@media (prefers-color-scheme: dark)` guarded by
+ *     `:not([data-oms-theme="light"])`, and again under `[data-oms-theme="dark"]`
+ *
+ * so system is the default and the host can force either on any ancestor —
+ * exactly like the OpenMarkets console. Nothing here is global: no `:root`, no
+ * `body`, no resets.
+ */
+// ─── Presets ───────────────────────────────────────────────────────────────────
+/** The OpenMarkets brand — the console's tokens (apps/app/app/globals.css): zinc neutrals, indigo accent. */
+export const openmarkets = {
+    scheme: 'system',
+    font: "'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif",
+    fontMono: "'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace",
+    radius: '4px',
+    density: 1,
+    light: {
+        bg: '#fafafc', surface: '#ffffff', fg: '#09090b', muted: '#52525b', border: '#e4e4e7',
+        accent: '#4f46e5', accentSoft: '#e0e7ff',
+        live: '#047857', liveSoft: '#d1fae5',
+        soon: '#155e75', soonSoft: '#cffafe',
+        warn: '#b45309', warnSoft: '#fef3c7',
+        danger: '#be123c', dangerSoft: '#ffe4e6',
+    },
+    dark: {
+        bg: '#09090b', surface: '#18181b', fg: '#f4f4f5', muted: '#a1a1aa', border: '#2a2a30',
+        accent: '#818cf8', accentSoft: '#1e1b4b',
+        live: '#34d399', liveSoft: '#052e21',
+        soon: '#22d3ee', soonSoft: '#083344',
+        warn: '#fbbf24', warnSoft: '#3a2a0a',
+        danger: '#fb7185', dangerSoft: '#4c0519',
+    },
+};
+/** A second design on the same contract: cool slate, teal accent, rounder, a touch denser. */
+export const slate = {
+    scheme: 'system',
+    font: "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+    fontMono: "ui-monospace, 'SF Mono', Menlo, monospace",
+    radius: '10px',
+    density: 0.95,
+    light: {
+        bg: '#f6f8fa', surface: '#ffffff', fg: '#0f172a', muted: '#475569', border: '#d9e1ea',
+        accent: '#0f766e', accentSoft: '#ccfbf1',
+        live: '#15803d', liveSoft: '#dcfce7',
+        soon: '#1d4ed8', soonSoft: '#dbeafe',
+        warn: '#a16207', warnSoft: '#fef9c3',
+        danger: '#b91c1c', dangerSoft: '#fee2e2',
+    },
+    dark: {
+        bg: '#0b1220', surface: '#111a2b', fg: '#e2e8f0', muted: '#94a3b8', border: '#22304a',
+        accent: '#2dd4bf', accentSoft: '#042f2e',
+        live: '#4ade80', liveSoft: '#052e16',
+        soon: '#60a5fa', soonSoft: '#172554',
+        warn: '#facc15', warnSoft: '#422006',
+        danger: '#f87171', dangerSoft: '#450a0a',
+    },
+};
+export const presets = { openmarkets, slate };
+// ─── createTheme ───────────────────────────────────────────────────────────────
+const STRONG = ['accent', 'live', 'soon', 'warn', 'danger'];
+const SOFT_OF = { accent: 'accentSoft', live: 'liveSoft', soon: 'soonSoft', warn: 'warnSoft', danger: 'dangerSoft' };
+function pick(v, scheme) {
+    if (v == null)
+        return undefined;
+    if (typeof v === 'object' && v !== null && 'light' in v && 'dark' in v)
+        return v[scheme];
+    return v;
+}
+export function createTheme(input = {}, base = openmarkets) {
+    const build = (scheme) => {
+        const out = { ...base[scheme] };
+        const keys = Object.keys(out);
+        for (const k of keys) {
+            const v = pick(input[k], scheme);
+            if (v)
+                out[k] = v;
+        }
+        // A strong colour given without its tint: derive the tint from the scheme's background.
+        for (const k of STRONG) {
+            const soft = SOFT_OF[k];
+            const strongGiven = pick(input[k], scheme) || input[scheme]?.[k];
+            const softGiven = pick(input[soft], scheme) || input[scheme]?.[soft];
+            if (strongGiven && !softGiven)
+                out[soft] = deriveSoft(out[k], out.bg, scheme);
+        }
+        Object.assign(out, input[scheme] ?? {});
+        return out;
+    };
+    return {
+        scheme: input.scheme ?? base.scheme,
+        font: input.font ?? base.font,
+        fontMono: input.fontMono ?? base.fontMono,
+        radius: input.radius ?? base.radius,
+        density: input.density ?? base.density,
+        light: build('light'),
+        dark: build('dark'),
+    };
+}
+/** Mix a strong colour towards the background: 85% bg in light (a pale tint), 70% bg in dark (a deep tint). */
+export function deriveSoft(strong, bg, scheme) {
+    const a = hexToRgb(strong);
+    const b = hexToRgb(bg);
+    if (!a || !b)
+        return strong;
+    const t = scheme === 'light' ? 0.85 : 0.7;
+    const mix = (x, y) => Math.round(x * (1 - t) + y * t);
+    return rgbToHex(mix(a[0], b[0]), mix(a[1], b[1]), mix(a[2], b[2]));
+}
+function hexToRgb(hex) {
+    const m = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
+    if (!m)
+        return null;
+    let h = m[1];
+    if (h.length === 3)
+        h = h.split('').map((c) => c + c).join('');
+    return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];
+}
+function rgbToHex(r, g, b) {
+    return `#${[r, g, b].map((n) => Math.max(0, Math.min(255, n)).toString(16).padStart(2, '0')).join('')}`;
+}
+// ─── CSS emission ──────────────────────────────────────────────────────────────
+const VAR_OF = {
+    bg: '--oms-bg', surface: '--oms-surface', fg: '--oms-fg', muted: '--oms-muted', border: '--oms-border',
+    accent: '--oms-accent', accentSoft: '--oms-accent-soft', live: '--oms-live', liveSoft: '--oms-live-soft',
+    soon: '--oms-soon', soonSoft: '--oms-soon-soft', warn: '--oms-warn', warnSoft: '--oms-warn-soft',
+    danger: '--oms-danger', dangerSoft: '--oms-danger-soft',
+};
+/**
+ * A theme value goes into an injected <style> verbatim, so it must not be able
+ * to close the declaration, the rule or the element: drop `; { } < >` and
+ * comment openers. Developer input, but a value copied from a design tool
+ * should never break out of its custom property.
+ */
+export function cssValue(v) {
+    return String(v).replace(/[;{}<>]|\/\*|\*\//g, '').trim();
+}
+function declarations(tokens, scheme) {
+    const lines = [`color-scheme: ${scheme};`];
+    for (const k of Object.keys(VAR_OF))
+        lines.push(`${VAR_OF[k]}: ${cssValue(tokens[k])};`);
+    return lines.join(' ');
+}
+/**
+ * CSS for one theme, scoped to `selector` (a class on the sheet's root). The two
+ * dark blocks are byte-identical on purpose — keep them that way.
+ */
+export function themeToCss(theme, selector) {
+    const base = [
+        `--oms-font: ${cssValue(theme.font)};`,
+        `--oms-font-mono: ${cssValue(theme.fontMono)};`,
+        `--oms-radius: ${cssValue(theme.radius)};`,
+        `--oms-density: ${cssValue(theme.density)};`,
+        declarations(theme.light, 'light'),
+    ].join(' ');
+    const dark = declarations(theme.dark, 'dark');
+    return [
+        `${selector} { ${base} }`,
+        `@media (prefers-color-scheme: dark) { ${selector}:not([data-oms-theme="light"]) { ${dark} } }`,
+        `${selector}[data-oms-theme="dark"] { ${dark} }`,
+    ].join('\n');
+}
+/** A short stable id for a theme, so the same theme injects one style block. */
+export function themeId(theme) {
+    const s = JSON.stringify(theme);
+    let h = 2166136261;
+    for (let i = 0; i < s.length; i++) {
+        h ^= s.charCodeAt(i);
+        h = Math.imul(h, 16777619);
+    }
+    return (h >>> 0).toString(36);
+}
+//# sourceMappingURL=theme.js.map

package/dist/ui/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/ui/theme.ts"],"names":[],"mappings":"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"}