@stephen-netu/design-system 0.2.1 → 0.5.1

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,16 +28,69 @@
   --color-card-text-secondary: #a8a08c;
   --color-card-text-tertiary: #6b6558;
 
-  /* --- Accent (default: brass, user-controllable via --accent-*) --- */
-  --color-accent: var(--accent-primary, #b87333);
-  --color-accent-hover: var(--accent-hover, #d4892f);
-  --color-accent-active: var(--accent-active, #8a5526);
-   --color-accent-glow: var(--accent-glow, rgba(184, 115, 51, 0.28));
-   --color-accent-muted: var(--accent-muted, rgba(184, 115, 51, 0.16));
-   --color-accent-subtle: var(--accent-subtle, rgba(184, 115, 51, 0.08));
-   --color-accent-faint: var(--accent-faint, rgba(184, 115, 51, 0.04));
-
-   /* Overlay levels — white opacity ramps for borders, backgrounds, hover states */
+   /* --- 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: 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);
+   --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: 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);
+  }
+}
+
+: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);
@@ -49,19 +102,21 @@
    --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 — status color opacity ramps */
-   --overlay-success-06: rgba(79, 168, 162, 0.06);
-   --overlay-error-06: rgba(193, 74, 74, 0.06);
+   /* 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);
+    --overlay-warning-06: rgba(245, 192, 48, 0.06);
+    --overlay-error-06: rgba(193, 74, 74, 0.06);
 
    /* Cell background for band/offer tables */
    --color-bg-cell: #121518;
@@ -78,7 +133,9 @@
   --color-success: #4fa8a2;
   --color-warning: #d4a04c;
   --color-error: #c14a4a;
+  --color-error-bg: rgba(193, 74, 74, 0.10);
   --color-info: #5b8db8;
+  --color-neutral: #6b6558;            /* Inactive / archival (e.g. compost phase) */
 
   /* --- Semantic (presence) --- */
   --color-online: #4fa8a2;
@@ -117,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;
@@ -127,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;
@@ -147,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;
@@ -183,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;
@@ -244,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
  */
@@ -5,9 +7,9 @@ export declare function cn(...classes: (string | undefined | null | false)[]): s
 /**
  * Debounce function
  */
-export declare function debounce<T extends (...args: any[]) => any>(fn: T, delay: number): (...args: Parameters<T>) => void;
+export declare function debounce<T extends (...args: unknown[]) => unknown>(fn: T, delay: number): (...args: Parameters<T>) => void;
 /**
  * Throttle function
  */
-export declare function throttle<T extends (...args: any[]) => any>(fn: T, limit: number): (...args: Parameters<T>) => void;
+export declare function throttle<T extends (...args: unknown[]) => unknown>(fn: T, limit: number): (...args: Parameters<T>) => void;
 //# sourceMappingURL=index.d.ts.map

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,GAAG,EAAE,KAAK,GAAG,EACxD,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,GAAG,EAAE,KAAK,GAAG,EACxD,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();
+        }
+    };
+};

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

@@ -0,0 +1,95 @@
+import { afterEach, beforeEach, describe, it, expect } from 'vitest';
+import { reveal } from './reveal';
+// Scoped to this file only (installed in beforeEach, removed in afterEach) —
+// a global IntersectionObserver polyfill in vitest-setup.ts changes which
+// code path unrelated components (e.g. MarkmapDiagram's d3-zoom setup) take,
+// crashing on jsdom's incomplete SVG support. Keep this local.
+class IntersectionObserverMock {
+    static instances = [];
+    callback;
+    observedTargets = [];
+    constructor(callback) {
+        this.callback = callback;
+        IntersectionObserverMock.instances.push(this);
+    }
+    observe(target) { this.observedTargets.push(target); }
+    unobserve(target) { this.observedTargets = this.observedTargets.filter((t) => t !== target); }
+    disconnect() { this.observedTargets = []; }
+    takeRecords() { return []; }
+}
+function lastObserver() {
+    return IntersectionObserverMock.instances[IntersectionObserverMock.instances.length - 1];
+}
+function makeEntry(target, isIntersecting) {
+    return { target, isIntersecting };
+}
+describe('reveal', () => {
+    let node;
+    let originalIntersectionObserver;
+    beforeEach(() => {
+        originalIntersectionObserver = globalThis.IntersectionObserver;
+        IntersectionObserverMock.instances = [];
+        globalThis.IntersectionObserver = IntersectionObserverMock;
+    });
+    afterEach(() => {
+        node?.remove();
+        globalThis.IntersectionObserver = originalIntersectionObserver;
+    });
+    it('adds the ds-reveal class on mount', () => {
+        node = document.createElement('div');
+        reveal(node);
+        expect(node.classList.contains('ds-reveal')).toBe(true);
+    });
+    it('adds ds-reveal-in once the node intersects', () => {
+        node = document.createElement('div');
+        reveal(node);
+        const observer = lastObserver();
+        observer.callback([makeEntry(node, true)], observer);
+        expect(node.classList.contains('ds-reveal-in')).toBe(true);
+    });
+    it('does not add ds-reveal-in before intersecting', () => {
+        node = document.createElement('div');
+        reveal(node);
+        expect(node.classList.contains('ds-reveal-in')).toBe(false);
+    });
+    it('sets --ds-reveal-delay when delayMs is passed', () => {
+        node = document.createElement('div');
+        reveal(node, { delayMs: 240 });
+        expect(node.style.getPropertyValue('--ds-reveal-delay')).toBe('240ms');
+    });
+    it('removes ds-reveal-in on exit when once is false', () => {
+        node = document.createElement('div');
+        reveal(node, { once: false });
+        const observer = lastObserver();
+        observer.callback([makeEntry(node, true)], observer);
+        expect(node.classList.contains('ds-reveal-in')).toBe(true);
+        observer.callback([makeEntry(node, false)], observer);
+        expect(node.classList.contains('ds-reveal-in')).toBe(false);
+    });
+    it('disconnects the observer on destroy', () => {
+        node = document.createElement('div');
+        const action = reveal(node);
+        const observer = lastObserver();
+        expect(observer.observedTargets).toContain(node);
+        action?.destroy?.();
+        expect(observer.observedTargets).not.toContain(node);
+    });
+    it('reveals immediately with no observer when prefers-reduced-motion is set', () => {
+        const originalMatchMedia = window.matchMedia;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        window.matchMedia = (query) => ({
+            matches: query.includes('reduce'),
+            media: query,
+            addListener: () => { },
+            removeListener: () => { },
+            addEventListener: () => { },
+            removeEventListener: () => { },
+            dispatchEvent: () => false
+        });
+        node = document.createElement('div');
+        reveal(node);
+        expect(node.classList.contains('ds-reveal-in')).toBe(true);
+        expect(node.classList.contains('ds-reveal')).toBe(false);
+        window.matchMedia = originalMatchMedia;
+    });
+});

package/dist/s0-state/SyncStatus.svelte

@@ -68,7 +68,7 @@
       case 'syncing':
         return {
           icon: 'sync',
-          color: 'var(--color-accent, #b87333)',
+          color: 'var(--color-accent, #888)',
           label: 'Syncing...',
           message: pendingCount > 0 ? `${pendingCount} items pending` : 'Synchronizing changes'
         };
@@ -263,7 +263,7 @@
   }
 
   .action-danger {
-    background: var(--color-error-subtle, rgba(192, 57, 43, 0.15));
+    background: var(--color-error-bg, rgba(193, 74, 74, 0.10));
     color: var(--color-error, #c0392b);
     border-color: var(--color-error, #c0392b);
   }

package/dist/s0-state/ThemeStore.svelte.d.ts

@@ -1,4 +1,5 @@
-export type ThemeName = 'dark' | 'light' | 'control-room';
+import type { ThemeName } from '../p0-primitives/theme-context';
+export type { ThemeName } from '../p0-primitives/theme-context';
 declare class ThemeStore {
     #private;
     get theme(): ThemeName;
@@ -7,6 +8,6 @@ declare class ThemeStore {
     syncFromDOM(): void;
 }
 export declare const themeStore: ThemeStore;
+export declare function provideThemeStoreContext(): void;
 export declare function initThemeStore(): void;
-export {};
 //# sourceMappingURL=ThemeStore.svelte.d.ts.map

package/dist/s0-state/ThemeStore.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeStore.svelte.d.ts","sourceRoot":"","sources":["../../src/s0-state/ThemeStore.svelte.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,cAAc,CAAC;AAyB1D,cAAM,UAAU;;IAGd,IAAI,KAAK,IAAI,SAAS,CAErB;IAED,QAAQ,CAAC,CAAC,EAAE,SAAS,GAAG,IAAI;IAS5B,WAAW,IAAI,IAAI;IAMnB,WAAW,IAAI,IAAI;CAMpB;AAED,eAAO,MAAM,UAAU,YAAmB,CAAC;AAE3C,wBAAgB,cAAc,IAAI,IAAI,CAMrC"}
+{"version":3,"file":"ThemeStore.svelte.d.ts","sourceRoot":"","sources":["../../src/s0-state/ThemeStore.svelte.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAChE,YAAY,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAyBhE,cAAM,UAAU;;IAGd,IAAI,KAAK,IAAI,SAAS,CAErB;IAED,QAAQ,CAAC,CAAC,EAAE,SAAS,GAAG,IAAI;IAS5B,WAAW,IAAI,IAAI;IAMnB,WAAW,IAAI,IAAI;CAMpB;AAED,eAAO,MAAM,UAAU,YAAmB,CAAC;AAE3C,wBAAgB,wBAAwB,IAAI,IAAI,CAE/C;AAED,wBAAgB,cAAc,IAAI,IAAI,CAOrC"}

package/dist/s0-state/ThemeStore.svelte.js

@@ -1,4 +1,19 @@
-import { onMount } from 'svelte';
+/**
+ * ThemeStore — Module-scope singleton for theme state (F-29).
+ *
+ * Instantiated once at module scope. Reads localStorage during import
+ * (safely guarded by hasLocalStorage()). Bundlers keep the instantiation
+ * at import time, so this module is NOT SSR-inert.
+ *
+ * @module s0-state/ThemeStore
+ * @example
+ * ```ts
+ * import { themeStore } from '@kos/design-system/s0-state';
+ * themeStore.setTheme('light');
+ * ```
+ */
+import { setContext, onMount } from 'svelte';
+import { THEME_STORE_KEY } from '../p0-primitives/theme-context';
 const STORAGE_KEY = 'kos-theme';
 function hasLocalStorage() {
     try {
@@ -51,7 +66,11 @@ class ThemeStore {
     }
 }
 export const themeStore = new ThemeStore();
+export function provideThemeStoreContext() {
+    setContext(THEME_STORE_KEY, themeStore);
+}
 export function initThemeStore() {
+    provideThemeStoreContext();
     onMount(() => {
         themeStore.syncFromDOM();
         const stored = getStoredTheme();

package/dist/s0-state/index.d.ts

@@ -5,6 +5,6 @@ export type { DerivedOptions } from './derived';
 export { createVirtualList, createVirtualGrid, createPreloader, calculateGridLayout, type VirtualListConfig, type VirtualItem, type VirtualList, type PreloaderConfig, type PreloaderState, } from './virtual';
 export { default as SyncStatus } from './SyncStatus.svelte';
 export type { SyncStatusState, SyncStatusAction } from './SyncStatus.svelte';
-export type { ModalData } from './modal-stack-store.svelte';
-export type { ThemeName } from './ThemeStore.svelte';
+export { modalStackStore } from './modal-stack-store.svelte';
+export type { ModalData, VisibleModal } from './modal-stack-store.svelte';
 //# sourceMappingURL=index.d.ts.map

package/dist/s0-state/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/s0-state/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC1C,YAAY,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACtE,YAAY,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAGhD,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EACf,mBAAmB,EACnB,KAAK,iBAAiB,EACtB,KAAK,WAAW,EAChB,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,cAAc,GACpB,MAAM,WAAW,CAAC;AAGnB,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAG7E,YAAY,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAG5D,YAAY,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/s0-state/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC1C,YAAY,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACtE,YAAY,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAGhD,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EACf,mBAAmB,EACnB,KAAK,iBAAiB,EACtB,KAAK,WAAW,EAChB,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,cAAc,GACpB,MAAM,WAAW,CAAC;AAGnB,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAG7E,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC"}