@stephen-netu/design-system 0.2.2 → 0.5.1

package/dist/p0-primitives/canvas-theme.js

@@ -1,46 +1,101 @@
-// Canvas Theme Helper — reads CSS custom properties at runtime for canvas rendering
+// Canvas Theme Helper — reads CSS custom properties at runtime for canvas rendering.
 // Allows canvas components (FlowCanvas, ForceGraph, etc.) to respect runtime theming
 // without hardcoded hex values.
 //
 // Usage:
 //   const theme = getCanvasTheme();
 //   context.fillStyle = theme.node;
+//   context.strokeStyle = theme.accentRamp.solid;    // e.g. "rgb(184 115 51)"
+//   context.fillStyle   = theme.accentRamp.alpha(0.3); // e.g. "rgba(184,115,51,0.3)"
 //
-// The helper reads from the document root's computed styles, so it picks up
-// whatever theme the user has active (default dark, light, control-room, etc.).
+// The helper reads from the document root's computed styles (or a provided element),
+// so it picks up whatever theme and user accent the consumer has active.
 /**
- * Resolve a CSS custom property to its computed value.
- * Falls back to the provided default if the property is undefined.
+ * Resolve a CSS custom property to its computed value from a target element.
+ * Falls back to the provided default if the property is undefined or SSR.
  */
-function resolveCssVar(name, fallback) {
+function resolveCssVar(name, fallback, el = document.documentElement) {
     if (typeof document === 'undefined')
         return fallback;
-    const computed = getComputedStyle(document.documentElement).getPropertyValue(name);
-    return computed.trim() || fallback;
+    return getComputedStyle(el).getPropertyValue(name).trim() || fallback;
+}
+// --- Accent ramp derivation -------------------------------------------------
+// Canvas 2D cannot use CSS color-mix(). We derive the ramp in JS by parsing
+// the accent seed and adjusting lightness. This mirrors what tokens.css does
+// via color-mix, keeping canvas rendering in sync with CSS theming.
+/** Parse a hex color string to [r, g, b] (0–255). Falls back to brass. */
+function hexToRgb(hex) {
+    const h = hex.trim().replace('#', '');
+    if (h.length === 3) {
+        return [
+            parseInt(h[0] + h[0], 16),
+            parseInt(h[1] + h[1], 16),
+            parseInt(h[2] + h[2], 16),
+        ];
+    }
+    if (h.length === 6) {
+        return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];
+    }
+    return [184, 115, 51]; // brass fallback
+}
+/** Linear-interpolate a channel toward white (positive t) or black (negative t). */
+function tint(c, t) {
+    return Math.round(t > 0 ? c + (255 - c) * t : c + c * t);
+}
+/**
+ * Build an AccentRamp from an RGB triplet.
+ * hi  ≈ color-mix(in oklab, seed, #fff 16%)
+ * lo  ≈ color-mix(in oklab, seed, #000 22%)
+ */
+function buildRamp(r, g, b) {
+    const hiR = tint(r, 0.16), hiG = tint(g, 0.16), hiB = tint(b, 0.16);
+    const loR = tint(r, -0.22), loG = tint(g, -0.22), loB = tint(b, -0.22);
+    return {
+        solid: `rgb(${r} ${g} ${b})`,
+        hi: `rgb(${hiR} ${hiG} ${hiB})`,
+        lo: `rgb(${loR} ${loG} ${loB})`,
+        alpha: (a) => `rgba(${r},${g},${b},${a})`,
+    };
+}
+/**
+ * Resolve the accent seed and return a canvas-ready AccentRamp.
+ * Reads --accent-primary from the target element's computed styles.
+ * Call once per frame (or on theme change) and cache the result.
+ */
+export function resolveAccentRamp(el = document.documentElement) {
+    if (typeof document === 'undefined')
+        return buildRamp(184, 115, 51);
+    const seed = getComputedStyle(el).getPropertyValue('--accent-primary').trim() || '#b87333';
+    const [r, g, b] = hexToRgb(seed);
+    return buildRamp(r, g, b);
 }
 /**
  * Get the current canvas theme by reading CSS custom properties.
  * This enables runtime theming for all canvas-based components.
+ * Pass a container element to resolve tokens scoped to a ThemeProvider.
  */
-export function getCanvasTheme() {
+export function getCanvasTheme(el = document.documentElement) {
+    const ramp = resolveAccentRamp(el);
+    const rv = (name, fb) => resolveCssVar(name, fb, el);
     return {
-        bg: resolveCssVar('--color-bg-canvas', '#1a1a1a'),
-        node: resolveCssVar('--color-bg-panel', '#2a2a2a'),
-        nodeBorder: resolveCssVar('--color-accent', '#b87333'),
-        nodeHover: resolveCssVar('--color-bg-panel-elevated', '#3a3a3a'),
-        nodeText: resolveCssVar('--color-text-primary', '#e8e0d0'),
-        edgeLine: resolveCssVar('--color-accent', '#b87333'),
-        edgeFade: resolveCssVar('--color-accent-muted', '#5a4a30'),
-        focus: resolveCssVar('--color-warning', '#d4943a'),
+        bg: rv('--color-bg-canvas', '#121518'),
+        node: rv('--color-bg-panel', '#181c20'),
+        nodeBorder: ramp.solid,
+        nodeHover: rv('--color-bg-panel-elevated', '#20252a'),
+        nodeText: rv('--color-text-primary', '#e7e9eb'),
+        edgeLine: ramp.solid,
+        edgeFade: ramp.alpha(0.3),
+        focus: rv('--color-warning', '#d8a23c'),
         severity: {
-            critical: resolveCssVar('--color-status-error', '#c14a4a'),
-            major: resolveCssVar('--color-warning', '#d4a04c'),
-            minor: resolveCssVar('--color-text-tertiary', '#6b6558'),
+            critical: rv('--color-error', '#cf4e4e'),
+            major: rv('--color-warning', '#d8a23c'),
+            minor: rv('--color-text-tertiary', '#646b72'),
         },
         quaternion: {
-            i: resolveCssVar('--accent-hover', '#d4892f'),
-            j: resolveCssVar('--color-success', '#4fa8a2'),
-            k: resolveCssVar('--color-warning', '#d4a04c'),
+            i: ramp.hi,
+            j: rv('--color-success', '#3fae9f'),
+            k: rv('--color-warning', '#d8a23c'),
         },
+        accentRamp: ramp,
     };
 }

package/dist/p0-primitives/debug.d.ts

@@ -0,0 +1,6 @@
+export declare const debug: {
+    log: (...args: unknown[]) => void;
+    warn: (...args: unknown[]) => void;
+    error: (...args: unknown[]) => void;
+};
+//# sourceMappingURL=debug.d.ts.map

package/dist/p0-primitives/debug.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"debug.d.ts","sourceRoot":"","sources":["../../src/p0-primitives/debug.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,KAAK;mBACD,OAAO,EAAE;oBACR,OAAO,EAAE;qBACR,OAAO,EAAE;CAC3B,CAAC"}

package/dist/p0-primitives/debug.js

@@ -0,0 +1,21 @@
+const DEBUG = (() => {
+    try {
+        if (typeof localStorage !== 'undefined' && localStorage.getItem('ds-debug') === 'true')
+            return true;
+        const g = globalThis;
+        if (typeof g.process === 'object' && g.process?.env?.DS_DEBUG === 'true')
+            return true;
+        return false;
+    }
+    catch {
+        return false;
+    }
+})();
+export const debug = {
+    log: (...args) => { if (DEBUG)
+        console.log('[ds]', ...args); },
+    warn: (...args) => { if (DEBUG)
+        console.warn('[ds]', ...args); },
+    error: (...args) => { if (DEBUG)
+        console.error('[ds]', ...args); },
+};

package/dist/p0-primitives/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/p0-primitives/theme.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAE1D;;GAEG;AACH,wBAAgB,WAAW,CACzB,IAAI,EAAE,WAAW,EACjB,SAAS,EAAE,OAAO,CAAC,WAAW,CAAC,GAC9B,WAAW,CAKb;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,WAqC9B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,WAqC/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,WA+B9B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,WAK7B,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,WAK9B,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,WAS9B,CAAC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/p0-primitives/theme.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAE1D;;GAEG;AACH,wBAAgB,WAAW,CACzB,IAAI,EAAE,WAAW,EACjB,SAAS,EAAE,OAAO,CAAC,WAAW,CAAC,GAC9B,WAAW,CAKb;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,WAiC9B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,WA+B/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,WA0B9B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,WAE7B,CAAC;AAEH;;GAEG;AAIH,eAAO,MAAM,iBAAiB,EAAE,WAE9B,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,WAO9B,CAAC"}

package/dist/p0-primitives/theme.js

@@ -30,14 +30,10 @@ export const defaultDarkTheme = {
     colorFgSecondary: '#a8a08c',
     colorFgTertiary: '#6b6558',
     colorFgMuted: '#3a3630',
-    // Accent (brass — energized signal, use sparingly)
+    // Accent — SEED ONLY. tokens.css derives hover/active/subtle/glow/muted/faint
+    // from --accent-primary via color-mix; emitting derived values here would
+    // override and de-sync the single-seed engine (re-introducing the brass leak).
     colorAccent: '#b87333',
-    colorAccentHover: '#d4892f',
-    colorAccentActive: '#8a5526',
-    colorAccentSubtle: 'rgba(184, 115, 51, 0.08)',
-    colorAccentGlow: 'rgba(184, 115, 51, 0.28)',
-    colorAccentMuted: 'rgba(184, 115, 51, 0.16)',
-    colorAccentFaint: 'rgba(184, 115, 51, 0.04)',
     // Telemetry
     colorSuccess: '#4fa8a2',
     colorWarning: '#d4a04c',
@@ -66,14 +62,8 @@ export const defaultLightTheme = {
     colorFgSecondary: '#5a5a5a',
     colorFgTertiary: '#8a8a8a',
     colorFgMuted: '#a0a0a0',
-    // Accent (brass — same in both modes)
+    // Accent — SEED ONLY (CSS engine derives the ramp).
     colorAccent: '#b87333',
-    colorAccentHover: '#c9894f',
-    colorAccentActive: '#9a5f2a',
-    colorAccentSubtle: 'rgba(184, 115, 51, 0.12)',
-    colorAccentGlow: 'rgba(184, 115, 51, 0.2)',
-    colorAccentMuted: 'rgba(184, 115, 51, 0.15)',
-    colorAccentFaint: 'rgba(184, 115, 51, 0.06)',
     // Feedback
     colorSuccess: '#5a8a6e',
     colorWarning: '#b8956b',
@@ -100,13 +90,8 @@ export const controlRoomTheme = {
     colorFgSecondary: '#888888',
     colorFgTertiary: '#555555',
     colorFgMuted: '#333333',
+    // Accent — SEED ONLY (CSS engine derives the ramp).
     colorAccent: '#00ff41',
-    colorAccentHover: '#33ff66',
-    colorAccentActive: '#00cc33',
-    colorAccentSubtle: 'rgba(0, 255, 65, 0.1)',
-    colorAccentGlow: 'rgba(0, 255, 65, 0.3)',
-    colorAccentMuted: 'rgba(0, 255, 65, 0.2)',
-    colorAccentFaint: 'rgba(0, 255, 65, 0.05)',
     colorSuccess: '#00ff41',
     colorWarning: '#ff8c00',
     colorError: '#ff3131',
@@ -121,19 +106,16 @@ export const controlRoomTheme = {
  * Brass accent theme variant — warm metallic (preserved for compatibility)
  */
 export const brassAccentTheme = createTheme(defaultDarkTheme, {
-    colorAccent: '#b87333',
-    colorAccentHover: '#d4892f',
-    colorAccentActive: '#8a5526',
-    colorAccentSubtle: 'rgba(184, 115, 51, 0.08)',
+    colorAccent: '#b87333', // seed only — ramp derived by the CSS engine
 });
 /**
  * Copper accent theme variant — reddish metallic (preserved for compatibility)
  */
+// Copper = reddish metallic, distinct from brass (#b87333 is yellow-gold).
+// The CSS engine derives the ramp from this seed, so hover/active/glow
+// all shift toward the red-copper character automatically.
 export const copperAccentTheme = createTheme(defaultDarkTheme, {
-    colorAccent: '#b87333',
-    colorAccentHover: '#c98444',
-    colorAccentActive: '#a05f2a',
-    colorAccentSubtle: 'rgba(184, 115, 51, 0.08)',
+    colorAccent: '#b85533', // seed only — reddish copper
 });
 /**
  * High contrast accessibility theme
@@ -144,7 +126,5 @@ export const highContrastTheme = createTheme(defaultDarkTheme, {
     colorFgPrimary: '#ffffff',
     colorFgSecondary: '#eeeeee',
     colorFgMuted: '#aaaaaa',
-    colorAccent: '#ffcc00',
-    colorAccentHover: '#ffdd33',
-    colorAccentActive: '#e6b800',
+    colorAccent: '#ffcc00', // seed only — ramp derived by the CSS engine
 });

package/dist/p0-primitives/tokens/ambient.css

@@ -0,0 +1,76 @@
+/* @kos/design-system — Ambient Layer
+   Opt-in decorative tokens for marketing/docs/onboarding surfaces —
+   NOT auto-imported (see src/index.ts). Import explicitly:
+     import '@stephen-netu/design-system/tokens/ambient.css';
+
+   Everything here derives from the existing single-seed accent engine
+   (--accent-primary → color-mix()) already defined in tokens.css. No
+   hardcoded hues are introduced — swapping --accent-primary re-themes
+   every gradient/glow defined here for free. Do not add hardcoded
+   parallel palettes; that reintroduces the "brass leak" anti-pattern
+   tokens.css's own comments warn against. */
+
+:root {
+  /* --- Gradient --- */
+  --gradient-accent: linear-gradient(135deg, var(--accent-primary) 0%, var(--color-accent-secondary) 100%);
+
+  /* --- Ambient glow layers — low-opacity radial fields for hero/empty-state backgrounds --- */
+  --glow-ambient-1: color-mix(in srgb, var(--accent-primary) 7%, transparent);
+  --glow-ambient-2: color-mix(in srgb, var(--color-accent-secondary) 5%, transparent);
+  --glow-ambient-3: color-mix(in srgb, var(--accent-primary) 3%, transparent);
+}
+
+/* --- Gradient text --- */
+.text-gradient-accent {
+  background: var(--gradient-accent);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+/* --- Ambient background glow ---
+   Apply to a positioned container; renders a fixed-feel radial glow trio
+   behind its content. Marketing/docs surfaces only — do not use on
+   console/product chrome. */
+.bg-ambient-glow {
+  position: relative;
+}
+.bg-ambient-glow::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(900px 600px at 10% -10%, var(--glow-ambient-1), transparent 65%),
+    radial-gradient(700px 500px at 92% 8%, var(--glow-ambient-2), transparent 60%),
+    radial-gradient(1000px 800px at 50% 140%, var(--glow-ambient-3), transparent 70%);
+}
+.bg-ambient-glow > * {
+  position: relative;
+  z-index: 1;
+}
+
+/* --- Scroll reveal (see p0-primitives/utils/reveal.ts) ---
+   Marketing/docs surfaces only — never wire into console/product chrome. */
+@keyframes ds-reveal-fade-up {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.ds-reveal {
+  opacity: 0;
+}
+
+.ds-reveal.ds-reveal-in {
+  animation: ds-reveal-fade-up 0.7s cubic-bezier(0.16, 0.8, 0.3, 1) both;
+  animation-delay: var(--ds-reveal-delay, 0ms);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-reveal,
+  .ds-reveal.ds-reveal-in {
+    opacity: 1;
+    animation: none;
+  }
+}

package/dist/p0-primitives/tokens/tokens.css

@@ -28,14 +28,25 @@
   --color-card-text-secondary: #a8a08c;
   --color-card-text-tertiary: #6b6558;
 
-   /* --- Accent (default: brass, user-controllable via --accent-*) --- */
+   /* --- Accent — SINGLE-SEED ENGINE ----------------------------------------
+      A consumer sets ONE value, --accent-primary (the in-app accent dropdown),
+      and the whole accent system recomputes via color-mix. No value below is
+      pinned to a hue, so any user color stays coherent across light/dark.
+      (Was: 7 hand-picked brass values + brass rgba ramps that ignored the
+      user's choice — the "brass leak".) --accent-* remain consumer override
+      hooks (token-audit ACCENT_HOOKS); components consume --color-accent* only.
+
+      Browser support: color-mix() requires Chrome 111+, Safari 16.2+, Firefox
+      113+. Fallbacks below use var(--accent-primary) directly (no hue shift),
+      which is acceptable on legacy browsers — the seed itself is still
+      controllable. */
    --accent-primary: #b87333;
-   --accent-hover: #d4892f;
-   --accent-active: #8a5526;
-   --accent-glow: rgba(184, 115, 51, 0.28);
-   --accent-muted: rgba(184, 115, 51, 0.16);
-   --accent-subtle: rgba(184, 115, 51, 0.08);
-   --accent-faint: rgba(184, 115, 51, 0.04);
+   --accent-hover: var(--accent-primary);
+   --accent-active: var(--accent-primary);
+   --accent-glow: var(--accent-primary);
+   --accent-muted: var(--accent-primary);
+   --accent-subtle: var(--accent-primary);
+   --accent-faint: var(--accent-primary);
    --color-accent: var(--accent-primary);
    --color-accent-hover: var(--accent-hover);
    --color-accent-active: var(--accent-active);
@@ -43,9 +54,43 @@
    --color-accent-muted: var(--accent-muted);
    --color-accent-subtle: var(--accent-subtle);
    --color-accent-faint: var(--accent-faint);
-   --color-accent-secondary: #d4a574;  /* Companion warm tone (n4 kind colors) */
+   --color-accent-secondary: var(--accent-primary);
+}
+
+@supports (color-mix(in srgb, red, transparent)) {
+  :root {
+   --accent-hover: color-mix(in oklab, var(--accent-primary), #fff 16%);
+   --accent-active: color-mix(in oklab, var(--accent-primary), #000 22%);
+   --accent-glow: color-mix(in srgb, var(--accent-primary) 28%, transparent);
+   --accent-muted: color-mix(in srgb, var(--accent-primary) 16%, transparent);
+   --accent-subtle: color-mix(in srgb, var(--accent-primary) 8%, transparent);
+   --accent-faint: color-mix(in srgb, var(--accent-primary) 4%, transparent);
+   --color-accent-hover: var(--accent-hover);
+   --color-accent-active: var(--accent-active);
+   --color-accent-glow: var(--accent-glow);
+   --color-accent-muted: var(--accent-muted);
+   --color-accent-subtle: var(--accent-subtle);
+   --color-accent-faint: var(--accent-faint);
+   --color-accent-secondary: color-mix(in oklab, var(--accent-primary), #fff 26%);
+   --overlay-accent-06: color-mix(in srgb, var(--accent-primary) 6%, transparent);
+   --overlay-accent-08: color-mix(in srgb, var(--accent-primary) 8%, transparent);
+   --overlay-accent-12: color-mix(in srgb, var(--accent-primary) 12%, transparent);
+   --overlay-accent-18: color-mix(in srgb, var(--accent-primary) 18%, transparent);
+   --overlay-accent-30: color-mix(in srgb, var(--accent-primary) 30%, transparent);
+   --overlay-accent-45: color-mix(in srgb, var(--accent-primary) 45%, transparent);
+   --overlay-accent-50: color-mix(in srgb, var(--accent-primary) 50%, transparent);
+   --overlay-accent-55: color-mix(in srgb, var(--accent-primary) 55%, transparent);
+   --grid-line: color-mix(in srgb, var(--accent-primary) 3%, transparent);
+   --grid-dot: color-mix(in srgb, var(--accent-primary) 6%, transparent);
+   --grid-major: color-mix(in srgb, var(--accent-primary) 10%, transparent);
+   --shadow-glow: 0 0 12px color-mix(in srgb, var(--accent-primary) 15%, transparent);
+   --shadow-glow-lg: 0 0 24px color-mix(in srgb, var(--accent-primary) 25%, transparent);
+   --shadow-accent-glow: 0 0 16px color-mix(in srgb, var(--accent-primary) 15%, transparent), 0 0 32px color-mix(in srgb, var(--accent-primary) 5%, transparent);
+  }
+}
 
-   /* Overlay levels — white opacity ramps for borders, backgrounds, hover states */
+:root {
+   /* --- Overlay levels — white opacity ramps for borders, backgrounds, hover states */
    --overlay-white-02: rgba(255, 255, 255, 0.02);
    --overlay-white-03: rgba(255, 255, 255, 0.03);
    --overlay-white-04: rgba(255, 255, 255, 0.04);
@@ -57,15 +102,16 @@
    --overlay-white-22: rgba(255, 255, 255, 0.22);
    --overlay-white-25: rgba(255, 255, 255, 0.25);
 
-   /* Overlay levels — accent color opacity ramps */
-   --overlay-accent-06: rgba(184, 115, 51, 0.06);
-   --overlay-accent-08: rgba(184, 115, 51, 0.08);
-   --overlay-accent-12: rgba(184, 115, 51, 0.12);
-   --overlay-accent-18: rgba(184, 115, 51, 0.18);
-   --overlay-accent-30: rgba(184, 115, 51, 0.30);
-   --overlay-accent-45: rgba(184, 115, 51, 0.45);
-   --overlay-accent-50: rgba(184, 115, 51, 0.50);
-   --overlay-accent-55: rgba(184, 115, 51, 0.55);
+   /* Overlay levels — accent color opacity ramps
+      (fallback: transparent for browsers without color-mix) */
+   --overlay-accent-06: transparent;
+   --overlay-accent-08: transparent;
+   --overlay-accent-12: transparent;
+   --overlay-accent-18: transparent;
+   --overlay-accent-30: transparent;
+   --overlay-accent-45: transparent;
+   --overlay-accent-50: transparent;
+   --overlay-accent-55: transparent;
 
     /* Overlay levels — status color opacity ramps */
     --overlay-success-06: rgba(79, 168, 162, 0.06);
@@ -128,7 +174,7 @@
   --border-subtle: rgba(255, 255, 255, 0.06);
   --border-default: #3a3630;
   --border-hover: #6b6558;
-  --border-focus: #b87333;
+  --border-focus: var(--accent-primary);
   --border-alert: #c14a4a;
   --border-warning: #d4a04c;
   --divider-color: #181c20;
@@ -138,10 +184,10 @@
   --color-border-subtle: var(--border-subtle);
   --color-border-default: var(--border-default);
 
-  /* --- Grid (canvas patterns) --- */
-  --grid-line: rgba(184, 115, 51, 0.03);
-  --grid-dot: rgba(184, 115, 51, 0.06);
-  --grid-major: rgba(184, 115, 51, 0.1);
+   /* --- Grid (canvas patterns) --- */
+   --grid-line: transparent;
+   --grid-dot: transparent;
+   --grid-major: transparent;
 
   /* --- Typography --- */
   --font-sans: 'Outfit', system-ui, -apple-system, sans-serif;
@@ -158,6 +204,17 @@
   --text-3xl: 1.875rem;
   --text-4xl: 2.25rem;
 
+  /* --- Font weight (fixes phantom --font-weight-* referenced by g0 Text.svelte) --- */
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* --- Line height (fixes phantom --line-height-* referenced by g0 Text.svelte) --- */
+  --line-height-tight: 1.2;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.7;
+
   /* --- Spacing --- */
   --space-05: 0.125rem;
   --space-1: 0.25rem;
@@ -194,12 +251,12 @@
   --shadow-md: none;
   --shadow-lg: none;
   --shadow-xl: none;
-  --shadow-glow: 0 0 12px rgba(184, 115, 51, 0.15);
-  --shadow-glow-lg: 0 0 24px rgba(184, 115, 51, 0.25);
-  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.4);
-  --shadow-card: none;
-  --shadow-card-hover: none;
-  --shadow-accent-glow: 0 0 16px rgba(184, 115, 51, 0.15), 0 0 32px rgba(184, 115, 51, 0.05);
+   --shadow-glow: 0 0 12px rgba(0, 0, 0, 0.4);
+   --shadow-glow-lg: 0 0 24px rgba(0, 0, 0, 0.4);
+   --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.4);
+   --shadow-card: none;
+   --shadow-card-hover: none;
+   --shadow-accent-glow: 0 0 16px rgba(0, 0, 0, 0.4), 0 0 32px rgba(0, 0, 0, 0.4);
 
   /* --- Transitions --- */
   --transition-fast: 120ms ease;
@@ -255,4 +312,42 @@
   --z-tooltip: 1070;
   --z-toast: 1080;
   --z-glass-box: 9000;
+
+  /* --- Density (system default = COMPACT) ----------------------------------
+     A first-class density tier. Surfaces opt into a calibration with
+     [data-density]: comfortable (reading/writing — editor, prose, forms),
+     compact (default, general UI), cockpit (monitoring/data-dense — dashboards,
+     logs, registries, manifold panels). Same components, three calibrations.
+     Components consume these --ui-* tokens for sizing/type instead of raw px.
+     Cockpit sits at the legibility floors: data 10px, label 9px, row/target
+     20px, pad 3px, leading 1.22 (note: 20px trips WCAG 2.5.8's 24px pref, so
+     cockpit is opt-in, never the global default). */
+  --ui-control-h: 24px;  /* button / input / select height */
+  --ui-row-h: 24px;      /* table / list row height (pointer target) */
+  --ui-pad-x: 8px;
+  --ui-pad-y: 5px;
+  --ui-gap: 1px;         /* hairline grid gap — the ruled spine */
+  --ui-font: 13px;       /* body / control text */
+  --ui-font-sm: 12px;
+  --ui-data: 11px;       /* monospace data / table cells */
+  --ui-label: 10px;      /* uppercase micro-labels */
+  --ui-leading: 1.35;
+  --ui-icon: 14px;
+}
+
+/* Density calibrations — set [data-density] on any container or surface. */
+[data-density="comfortable"] {
+  --ui-control-h: 30px; --ui-row-h: 30px; --ui-pad-x: 12px; --ui-pad-y: 8px;
+  --ui-gap: 1px; --ui-font: 14px; --ui-font-sm: 13px; --ui-data: 13px;
+  --ui-label: 11px; --ui-leading: 1.45; --ui-icon: 16px;
+}
+[data-density="compact"] {
+  --ui-control-h: 24px; --ui-row-h: 24px; --ui-pad-x: 8px; --ui-pad-y: 5px;
+  --ui-gap: 1px; --ui-font: 13px; --ui-font-sm: 12px; --ui-data: 11px;
+  --ui-label: 10px; --ui-leading: 1.35; --ui-icon: 14px;
+}
+[data-density="cockpit"] {
+  --ui-control-h: 20px; --ui-row-h: 20px; --ui-pad-x: 6px; --ui-pad-y: 3px;
+  --ui-gap: 1px; --ui-font: 12px; --ui-font-sm: 11px; --ui-data: 10px;
+  --ui-label: 9px; --ui-leading: 1.22; --ui-icon: 13px;
 }

package/dist/p0-primitives/utils/index.d.ts

@@ -1,3 +1,5 @@
+export { reveal } from './reveal';
+export type { RevealOptions } from './reveal';
 /**
  * Class name merger - combines class names, filtering out falsy values
  */

package/dist/p0-primitives/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/p0-primitives/utils/index.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,wBAAgB,EAAE,CAAC,GAAG,OAAO,EAAE,CAAC,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,KAAK,CAAC,EAAE,GAAG,MAAM,CAE5E;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,OAAO,EAChE,EAAE,EAAE,CAAC,EACL,KAAK,EAAE,MAAM,GACZ,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAMlC;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,OAAO,EAChE,EAAE,EAAE,CAAC,EACL,KAAK,EAAE,MAAM,GACZ,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CASlC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/p0-primitives/utils/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE9C;;GAEG;AACH,wBAAgB,EAAE,CAAC,GAAG,OAAO,EAAE,CAAC,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,KAAK,CAAC,EAAE,GAAG,MAAM,CAE5E;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,OAAO,EAChE,EAAE,EAAE,CAAC,EACL,KAAK,EAAE,MAAM,GACZ,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAMlC;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,OAAO,EAChE,EAAE,EAAE,CAAC,EACL,KAAK,EAAE,MAAM,GACZ,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CASlC"}

package/dist/p0-primitives/utils/index.js

@@ -1,4 +1,5 @@
 // Utility functions for the design system
+export { reveal } from './reveal';
 /**
  * Class name merger - combines class names, filtering out falsy values
  */

package/dist/p0-primitives/utils/reveal.d.ts

@@ -0,0 +1,15 @@
+import type { Action } from 'svelte/action';
+/**
+ * Scroll-reveal action for marketing/docs surfaces — never wire into
+ * console/product chrome (see ambient.css usage note). Adds `ds-reveal`
+ * on mount and `ds-reveal-in` once the node crosses `threshold`; pass
+ * `delayMs` to stagger a group of siblings. Respects
+ * prefers-reduced-motion by revealing immediately with no observer.
+ */
+export interface RevealOptions {
+    delayMs?: number;
+    threshold?: number;
+    once?: boolean;
+}
+export declare const reveal: Action<HTMLElement, RevealOptions | undefined>;
+//# sourceMappingURL=reveal.d.ts.map

package/dist/p0-primitives/utils/reveal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reveal.d.ts","sourceRoot":"","sources":["../../../src/p0-primitives/utils/reveal.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE5C;;;;;;GAMG;AACH,MAAM,WAAW,aAAa;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,WAAW,EAAE,aAAa,GAAG,SAAS,CAmCjE,CAAC"}

package/dist/p0-primitives/utils/reveal.js

@@ -0,0 +1,29 @@
+export const reveal = (node, options = {}) => {
+    const { delayMs = 0, threshold = 0.12, once = true } = options;
+    if (delayMs) {
+        node.style.setProperty('--ds-reveal-delay', `${delayMs}ms`);
+    }
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+        node.classList.add('ds-reveal-in');
+        return {};
+    }
+    node.classList.add('ds-reveal');
+    const observer = new IntersectionObserver((entries) => {
+        for (const entry of entries) {
+            if (entry.isIntersecting) {
+                node.classList.add('ds-reveal-in');
+                if (once)
+                    observer.unobserve(entry.target);
+            }
+            else if (!once) {
+                node.classList.remove('ds-reveal-in');
+            }
+        }
+    }, { threshold });
+    observer.observe(node);
+    return {
+        destroy() {
+            observer.disconnect();
+        }
+    };
+};