@stephen-netu/design-system 0.1.0 → 0.2.0

package/dist/n4-adaptive-manifold/types.d.ts

@@ -0,0 +1,233 @@
+import type { NodeLayout, LayoutResult } from '../n1-flow-canvas/types.js';
+/** The active layout algorithm. Gravitational is the only registered provider. */
+export type LayoutAlgorithm = 'gravitational' | 'manifold';
+/** Visual treatment for nodes — maps to --n4-node-* design tokens. */
+export type NodeStatus = 'active' | 'idle' | 'blocked' | 'completed' | 'critical';
+/** A node in the adaptive manifold. Domain-agnostic — the canvas never inspects metadata. */
+export interface ManifoldNode {
+    /** Stable ID across snapshots. Same entity = same ID across domains. */
+    id: string;
+    /** Domain-defined type: 'task', 'agent', 'signal', 'capability', 'intent', etc. */
+    kind: string;
+    /** Display name. */
+    label: string;
+    /** Visual treatment — maps to design tokens. */
+    status: NodeStatus;
+    /** 0–1, influences node size and gravity. */
+    weight: number;
+    /** User has fixed this node's position. */
+    pinned: boolean;
+    /** Domain-specific, opaque to canvas. Exposed in click handlers. */
+    metadata: Record<string, unknown>;
+    /** Optional spatial hints — domain adapters can suggest, canvas can ignore. */
+    hint?: {
+        x?: number;
+        y?: number;
+        cluster?: string;
+        rotation_axis?: string | null;
+    };
+}
+/** An edge in the adaptive manifold. */
+export interface ManifoldEdge {
+    id: string;
+    /** Source node ID. */
+    source: string;
+    /** Target node ID. */
+    target: string;
+    /** Domain-defined relationship: 'depends_on', 'delegates_to', 'emits', etc. */
+    relation: string;
+    /** Whether the edge has direction (arrow). */
+    directed: boolean;
+    /** 0–1, influences edge visual weight and spring tension. */
+    strength: number;
+    /** If true, edge fades after animation (for signal pulses). */
+    transient: boolean;
+    /** Domain-specific, opaque to canvas. */
+    metadata: Record<string, unknown>;
+}
+/** Immutable snapshot of manifold data — the input to all layout providers. */
+export interface ManifoldSnapshot {
+    /** SOVEREIGN deterministic sequence — not wall clock. S-02 compliant. */
+    readonly sequence: number;
+    readonly nodes: ReadonlyArray<ManifoldNode>;
+    readonly edges: ReadonlyArray<ManifoldEdge>;
+    /** 'initial' = full graph, 'incremental' = delta (new nodes/edges only). */
+    readonly epoch: 'initial' | 'incremental';
+}
+/** Maps node `kind` strings to visual treatment. Registered by consuming apps, not the canvas. */
+export interface NodeStyleEntry {
+    /** Icon identifier (e.g. lucide icon name). */
+    icon: string;
+    /** Node shape for rendering. */
+    shape: 'rounded-rect' | 'hexagon' | 'diamond' | 'pill' | 'rect' | 'circle';
+    /** CSS custom property name for accent color (e.g. '--n4-kind-task'). */
+    accentVar: string;
+}
+export type NodeStyleRegistry = Record<string, NodeStyleEntry>;
+/** User/adaptive preferences that influence topology selection and rendering. */
+export interface LayoutPreferences {
+    /** Lock to a specific algorithm, bypassing the classifier. null = auto. */
+    lockedAlgorithm: LayoutAlgorithm | null;
+    /** Animate transitions between layouts. Default true. */
+    animate: boolean;
+    /** Morph transition duration in ms. Default 600. */
+    morphDurationMs: number;
+    /** Easing curve identifier. Default 'easeInOutCubic'. */
+    easing: EasingCurve;
+}
+export type EasingCurve = 'linear' | 'easeInOutCubic' | 'easeOutExpo' | 'spring';
+/** Default layout preferences — auto-classify, animate, 600ms easeInOutCubic. */
+export declare const DEFAULT_LAYOUT_PREFERENCES: LayoutPreferences;
+/**
+ * Each layout algorithm has an AlgorithmProvider that computes node positions.
+ * Providers are stateless — all context comes from arguments.
+ * Implementations must be deterministic given the same snapshot + dimensions.
+ */
+export interface AlgorithmProvider {
+    /** The layout algorithm this provider implements. */
+    readonly algorithm: LayoutAlgorithm;
+    /**
+     * Compute a layout for the given snapshot within the given canvas bounds.
+     * Returns a LayoutResult with positions and BFS order.
+     * May be async (e.g. ELK runs a web worker).
+     */
+    layout(snapshot: ManifoldSnapshot, canvasWidth: number, canvasHeight: number): Promise<LayoutResult>;
+}
+/** Topology metrics computed once per classification. */
+export interface TopologyMetrics {
+    nodeCount: number;
+    edgeCount: number;
+    edgeDensity: number;
+    maxDepth: number;
+    rootCount: number;
+    cycleCount: number;
+    componentCount: number;
+    maxClusterSize: number;
+}
+/** Result of topology classification — recommended algorithm with reasoning. */
+export interface ClassificationResult {
+    /** Recommended layout algorithm. */
+    recommended: LayoutAlgorithm;
+    /** Confidence 0–1 of the recommendation. */
+    confidence: number;
+    /** Human-readable reason. */
+    reason: string;
+    /** All algorithms ranked by fitness, descending. */
+    ranked: Array<{
+        algorithm: LayoutAlgorithm;
+        fitness: number;
+    }>;
+    /** Computed topology metrics. */
+    metrics: TopologyMetrics;
+}
+/** Named animation moment types from the ADR. */
+export type AnimationMomentKind = 'settle' | 'morph' | 'pulse' | 'arrive' | 'depart' | 'focus';
+/** A single frame in a layout transition animation. */
+export interface AnimationFrame {
+    /** Interpolated positions at this frame. */
+    positions: Map<string, NodeLayout>;
+    /** Progress 0→1 through the transition. */
+    progress: number;
+    /** Elapsed ms since transition start. */
+    elapsedMs: number;
+}
+/** Easing function: takes t (0→1), returns eased t (0→1). */
+export type EasingFn = (t: number) => number;
+/** A layout suggestion to show the user when the classifier disagrees with current view. */
+export interface LayoutSuggestion {
+    /** Suggested algorithm to switch to. */
+    algorithm: LayoutAlgorithm;
+    /** Confidence 0–1 of the suggestion. */
+    confidence: number;
+    /** Human-readable reason. */
+    reason: string;
+    /** Whether the user has dismissed this suggestion. */
+    dismissed: boolean;
+    /** Whether the user has pinned their current layout. */
+    pinned: boolean;
+}
+/** Colors resolved from --n4-* CSS tokens at mount time via getComputedStyle. */
+export interface ResolvedThemeColors {
+    canvasBg: string;
+    nodeActive: string;
+    nodeIdle: string;
+    nodeBlocked: string;
+    nodeCompleted: string;
+    nodeCritical: string;
+    nodeBg: string;
+    nodeBorder: string;
+    nodeText: string;
+    edgeColor: string;
+    edgeActive: string;
+    pulseColor: string;
+    pulseCritical: string;
+}
+/** Inferred phase in the perceive-think-act-sync loop */
+export type LoopPhase = 'perceive' | 'think' | 'act' | 'sync' | 'idle';
+/**
+ * Canonical event shape consumed by the Pinnacle canvas.
+ *
+ * Note: the ADR also specified `entry: SigchainEntry`, but that type lives in
+ * SOVEREIGN — the design-system cannot take that dependency. `sequence` provides
+ * the same S-04 auditability anchor. Consumers needing the raw sigchain entry
+ * should carry it separately alongside the PinnacleEvent.
+ */
+export interface PinnacleEvent {
+    /** Which agent this event concerns */
+    agentId: string;
+    /** Task/capability being interacted with, if any */
+    targetId: string | null;
+    /** Inferred loop phase */
+    loopPhase: LoopPhase;
+    /** Sigchain sequence number (deterministic ordering, not wall clock) */
+    sequence: number;
+}
+/** Visual parameters for a single FLOW phase */
+export interface PhaseVisualParams {
+    /** Canvas background tint */
+    background: string;
+    /** 0-1 multiplier on indicator layer brightness */
+    brightness: number;
+    /** 0-1 multiplier on indicator opacity */
+    indicatorIntensity: number;
+    /** Seconds per ambient pulse cycle */
+    ambientPulseSpeed: number;
+    /** 0-1 desaturation factor (0 = full desaturation for freeze) */
+    saturation: number;
+}
+/** Maps FLOW phases to visual parameters — the theming contract */
+export interface PhaseTheme {
+    seed: PhaseVisualParams;
+    sprout: PhaseVisualParams;
+    go: PhaseVisualParams;
+    consult: PhaseVisualParams;
+    weed: PhaseVisualParams;
+    freeze: PhaseVisualParams;
+    compost: PhaseVisualParams;
+    prune: PhaseVisualParams;
+}
+/** Configuration for the gravitational force simulation */
+export interface GravitationalConfig {
+    /** 0-1: how strongly role pulls toward zone */
+    roleGravityStrength: number;
+    /** 0-1: how strongly current work pulls agent toward target */
+    interactionPullStrength: number;
+    /** Velocity decay per tick (0-1, higher = more damping) */
+    damping: number;
+    /** Minimum node separation in pixels */
+    collisionRadius: number;
+    /** Subtle random motion amplitude when idle */
+    ambientDrift: number;
+}
+export declare const DEFAULT_GRAVITATIONAL_CONFIG: GravitationalConfig;
+/** Per-node indicator state for the compositing layer */
+export interface NodeIndicatorState {
+    /** Current loop phase (drives animation) */
+    loopPhase: LoopPhase;
+    /** Milliseconds in current phase (for pulse timing) */
+    phaseElapsedMs: number;
+    /** Target node ID if perceive/act trace is active */
+    traceTargetId: string | null;
+}
+export type { NodeLayout, LayoutResult } from '../n1-flow-canvas/types.js';
+//# sourceMappingURL=types.d.ts.map

package/dist/n4-adaptive-manifold/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/n4-adaptive-manifold/types.ts"],"names":[],"mappings":"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"}

package/dist/n4-adaptive-manifold/types.js

@@ -0,0 +1,17 @@
+// N4 Adaptive Manifold — Core Types
+// Pure TypeScript — no Svelte, no DOM dependencies
+// S-02: deterministic ordering, no HashMap/Set iteration
+/** Default layout preferences — auto-classify, animate, 600ms easeInOutCubic. */
+export const DEFAULT_LAYOUT_PREFERENCES = {
+    lockedAlgorithm: null,
+    animate: true,
+    morphDurationMs: 600,
+    easing: 'easeInOutCubic',
+};
+export const DEFAULT_GRAVITATIONAL_CONFIG = {
+    roleGravityStrength: 0.3,
+    interactionPullStrength: 0.6,
+    damping: 0.85,
+    collisionRadius: 45,
+    ambientDrift: 0.5,
+};

package/dist/p0-primitives/ThemeProvider.svelte

@@ -0,0 +1,183 @@
+<script lang="ts">
+  /**
+   * ThemeProvider
+   *
+   * Runtime theme management for KOS Design System.
+   * Provides light/dark/auto modes and custom theme overrides.
+   * Wraps the singleton ThemeStore for component-level integration.
+   *
+   * @package @kos/design-system/p0-primitives
+   */
+  import type { Snippet } from 'svelte';
+  import { onMount } from 'svelte';
+  import { themeStore, initThemeStore, type ThemeName } from '../s0-state/ThemeStore.svelte';
+
+  export type ThemeMode = 'light' | 'dark' | 'auto';
+
+  export interface ThemeConfig {
+    colorBgPrimary?: string;
+    colorBgSecondary?: string;
+    colorBgTertiary?: string;
+    colorBgInset?: string;
+    colorBgCanvas?: string;
+    colorBgPanel?: string;
+    colorBgPanelElevated?: string;
+
+    colorCardBg?: string;
+    colorCardBgAlt?: string;
+    colorCardBorder?: string;
+
+    colorFgPrimary?: string;
+    colorFgSecondary?: string;
+    colorFgMuted?: string;
+    colorFgInverse?: string;
+    colorFgTertiary?: string;
+
+    colorAccent?: string;
+    colorAccentHover?: string;
+    colorAccentActive?: string;
+    colorAccentSubtle?: string;
+    colorAccentGlow?: string;
+    colorAccentMuted?: string;
+    colorAccentFaint?: string;
+    colorAccentAmber?: string;
+    colorAccentCopper?: string;
+    colorAccentRust?: string;
+    colorAccentSage?: string;
+
+    colorAccentGold?: string;
+    colorAccentGoldHover?: string;
+    colorAccentGoldActive?: string;
+    colorAccentGoldSubtle?: string;
+    colorAccentGoldGlow?: string;
+
+    colorSuccess?: string;
+    colorWarning?: string;
+    colorError?: string;
+    colorInfo?: string;
+
+    colorCyan?: string;
+    colorAmber?: string;
+    colorCrimson?: string;
+
+    spaceScale?: number;
+    radiusScale?: number;
+
+    fontSans?: string;
+    fontMono?: string;
+    fontData?: string;
+    fontSerif?: string;
+
+    durationFast?: string;
+    durationNormal?: string;
+    durationSlow?: string;
+  }
+
+  interface Props {
+    mode?: ThemeMode;
+    theme?: ThemeConfig;
+    children: Snippet;
+  }
+
+  let { mode, theme, children }: Props = $props();
+
+  initThemeStore();
+
+  const THEME_MAP: Record<Exclude<ThemeMode, 'auto'>, ThemeName> = {
+    dark: 'dark',
+    light: 'light',
+  };
+
+  function resolveMode(): ThemeName {
+    if (mode === 'auto') {
+      if (typeof window === 'undefined') return 'dark';
+      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+    return THEME_MAP[mode ?? 'dark'] ?? 'dark';
+  }
+
+  $effect(() => {
+    themeStore.setTheme(resolveMode());
+  });
+
+  function generateCSSVariables(t: ThemeConfig | undefined): string {
+    if (!t) return '';
+    const vars: string[] = [];
+
+    if (t.colorBgPrimary) vars.push(`--color-bg-primary: ${t.colorBgPrimary};`);
+    if (t.colorBgSecondary) vars.push(`--color-bg-secondary: ${t.colorBgSecondary};`);
+    if (t.colorBgTertiary) vars.push(`--color-bg-tertiary: ${t.colorBgTertiary};`);
+    if (t.colorBgInset) vars.push(`--color-bg-inset: ${t.colorBgInset};`);
+    if (t.colorBgCanvas) vars.push(`--color-bg-canvas: ${t.colorBgCanvas};`);
+    if (t.colorBgPanel) vars.push(`--color-bg-panel: ${t.colorBgPanel};`);
+    if (t.colorBgPanelElevated) vars.push(`--color-bg-panel-elevated: ${t.colorBgPanelElevated};`);
+
+    if (t.colorCardBg) vars.push(`--color-card-bg: ${t.colorCardBg};`);
+    if (t.colorCardBgAlt) vars.push(`--color-card-bg-alt: ${t.colorCardBgAlt};`);
+    if (t.colorCardBorder) vars.push(`--color-card-border: ${t.colorCardBorder};`);
+
+    if (t.colorFgPrimary) vars.push(`--color-fg-primary: ${t.colorFgPrimary};`);
+    if (t.colorFgSecondary) vars.push(`--color-fg-secondary: ${t.colorFgSecondary};`);
+    if (t.colorFgMuted) vars.push(`--color-fg-muted: ${t.colorFgMuted};`);
+    if (t.colorFgInverse) vars.push(`--color-fg-inverse: ${t.colorFgInverse};`);
+    if (t.colorFgTertiary) vars.push(`--color-fg-tertiary: ${t.colorFgTertiary};`);
+
+    if (t.colorAccent) vars.push(`--color-accent: ${t.colorAccent};`);
+    if (t.colorAccentHover) vars.push(`--color-accent-hover: ${t.colorAccentHover};`);
+    if (t.colorAccentActive) vars.push(`--color-accent-active: ${t.colorAccentActive};`);
+    if (t.colorAccentSubtle) vars.push(`--color-accent-subtle: ${t.colorAccentSubtle};`);
+    if (t.colorAccentGlow) vars.push(`--color-accent-glow: ${t.colorAccentGlow};`);
+    if (t.colorAccentMuted) vars.push(`--color-accent-muted: ${t.colorAccentMuted};`);
+    if (t.colorAccentFaint) vars.push(`--color-accent-faint: ${t.colorAccentFaint};`);
+    if (t.colorAccentAmber) vars.push(`--color-accent-amber: ${t.colorAccentAmber};`);
+    if (t.colorAccentCopper) vars.push(`--color-accent-copper: ${t.colorAccentCopper};`);
+    if (t.colorAccentRust) vars.push(`--color-accent-rust: ${t.colorAccentRust};`);
+    if (t.colorAccentSage) vars.push(`--color-accent-sage: ${t.colorAccentSage};`);
+
+    if (t.colorAccentGold) vars.push(`--color-accent-gold: ${t.colorAccentGold};`);
+    if (t.colorAccentGoldHover) vars.push(`--color-accent-gold-hover: ${t.colorAccentGoldHover};`);
+    if (t.colorAccentGoldActive) vars.push(`--color-accent-gold-active: ${t.colorAccentGoldActive};`);
+    if (t.colorAccentGoldSubtle) vars.push(`--color-accent-gold-subtle: ${t.colorAccentGoldSubtle};`);
+    if (t.colorAccentGoldGlow) vars.push(`--color-accent-gold-glow: ${t.colorAccentGoldGlow};`);
+
+    if (t.colorSuccess) vars.push(`--color-success: ${t.colorSuccess};`);
+    if (t.colorWarning) vars.push(`--color-warning: ${t.colorWarning};`);
+    if (t.colorError) vars.push(`--color-error: ${t.colorError};`);
+    if (t.colorInfo) vars.push(`--color-info: ${t.colorInfo};`);
+    if (t.colorCyan) vars.push(`--color-cyan: ${t.colorCyan};`);
+    if (t.colorAmber) vars.push(`--color-amber: ${t.colorAmber};`);
+    if (t.colorCrimson) vars.push(`--color-crimson: ${t.colorCrimson};`);
+
+    if (t.fontSans) vars.push(`--font-sans: ${t.fontSans};`);
+    if (t.fontMono) vars.push(`--font-mono: ${t.fontMono};`);
+    if (t.fontData) vars.push(`--font-data: ${t.fontData};`);
+    if (t.fontSerif) vars.push(`--font-serif: ${t.fontSerif};`);
+
+    if (t.durationFast) vars.push(`--duration-fast: ${t.durationFast};`);
+    if (t.durationNormal) vars.push(`--duration-normal: ${t.durationNormal};`);
+    if (t.durationSlow) vars.push(`--duration-slow: ${t.durationSlow};`);
+
+    return vars.join('\n');
+  }
+
+  const customStyles = $derived(generateCSSVariables(theme));
+</script>
+
+<div
+  class="theme-provider"
+  class:mode-dark={themeStore.theme === 'dark'}
+  class:mode-light={themeStore.theme === 'light'}
+  data-theme={themeStore.theme}
+  data-theme-mode={themeStore.theme}
+  style={customStyles}
+>
+  {@render children()}
+</div>
+
+<style>
+  .theme-provider {
+    color: var(--color-text-primary, #e8e0d0);
+    background: var(--color-bg-primary, #0b0d0f);
+    font-family: var(--font-sans, 'Outfit', system-ui, sans-serif);
+  }
+</style>

package/dist/p0-primitives/ThemeProvider.svelte.d.ts

@@ -0,0 +1,69 @@
+/**
+   * ThemeProvider
+   *
+   * Runtime theme management for KOS Design System.
+   * Provides light/dark/auto modes and custom theme overrides.
+   * Wraps the singleton ThemeStore for component-level integration.
+   *
+   * @package @kos/design-system/p0-primitives
+   */
+import type { Snippet } from 'svelte';
+export type ThemeMode = 'light' | 'dark' | 'auto';
+export interface ThemeConfig {
+    colorBgPrimary?: string;
+    colorBgSecondary?: string;
+    colorBgTertiary?: string;
+    colorBgInset?: string;
+    colorBgCanvas?: string;
+    colorBgPanel?: string;
+    colorBgPanelElevated?: string;
+    colorCardBg?: string;
+    colorCardBgAlt?: string;
+    colorCardBorder?: string;
+    colorFgPrimary?: string;
+    colorFgSecondary?: string;
+    colorFgMuted?: string;
+    colorFgInverse?: string;
+    colorFgTertiary?: string;
+    colorAccent?: string;
+    colorAccentHover?: string;
+    colorAccentActive?: string;
+    colorAccentSubtle?: string;
+    colorAccentGlow?: string;
+    colorAccentMuted?: string;
+    colorAccentFaint?: string;
+    colorAccentAmber?: string;
+    colorAccentCopper?: string;
+    colorAccentRust?: string;
+    colorAccentSage?: string;
+    colorAccentGold?: string;
+    colorAccentGoldHover?: string;
+    colorAccentGoldActive?: string;
+    colorAccentGoldSubtle?: string;
+    colorAccentGoldGlow?: string;
+    colorSuccess?: string;
+    colorWarning?: string;
+    colorError?: string;
+    colorInfo?: string;
+    colorCyan?: string;
+    colorAmber?: string;
+    colorCrimson?: string;
+    spaceScale?: number;
+    radiusScale?: number;
+    fontSans?: string;
+    fontMono?: string;
+    fontData?: string;
+    fontSerif?: string;
+    durationFast?: string;
+    durationNormal?: string;
+    durationSlow?: string;
+}
+interface Props {
+    mode?: ThemeMode;
+    theme?: ThemeConfig;
+    children: Snippet;
+}
+declare const ThemeProvider: import("svelte").Component<Props, {}, "">;
+type ThemeProvider = ReturnType<typeof ThemeProvider>;
+export default ThemeProvider;
+//# sourceMappingURL=ThemeProvider.svelte.d.ts.map

package/dist/p0-primitives/ThemeProvider.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.svelte.d.ts","sourceRoot":"","sources":["../../src/p0-primitives/ThemeProvider.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;;KAQK;AACL,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKpC,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAElD,MAAM,WAAW,WAAW;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAsGH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

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

@@ -0,0 +1,17 @@
+interface CanvasTheme {
+    bg: string;
+    node: string;
+    nodeBorder: string;
+    nodeHover: string;
+    nodeText: string;
+    edgeLine: string;
+    edgeFade: string;
+    focus: string;
+}
+/**
+ * Get the current canvas theme by reading CSS custom properties.
+ * This enables runtime theming for all canvas-based components.
+ */
+export declare function getCanvasTheme(): CanvasTheme;
+export type { CanvasTheme };
+//# sourceMappingURL=canvas-theme.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-theme.d.ts","sourceRoot":"","sources":["../../src/p0-primitives/canvas-theme.ts"],"names":[],"mappings":"AAWA,UAAU,WAAW;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf;AAYD;;;GAGG;AACH,wBAAgB,cAAc,IAAI,WAAW,CAW5C;AAED,YAAY,EAAE,WAAW,EAAE,CAAC"}

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

@@ -0,0 +1,36 @@
+// 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;
+//
+// 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.).
+/**
+ * Resolve a CSS custom property to its computed value.
+ * Falls back to the provided default if the property is undefined.
+ */
+function resolveCssVar(name, fallback) {
+    if (typeof document === 'undefined')
+        return fallback;
+    const computed = getComputedStyle(document.documentElement).getPropertyValue(name);
+    return computed.trim() || fallback;
+}
+/**
+ * Get the current canvas theme by reading CSS custom properties.
+ * This enables runtime theming for all canvas-based components.
+ */
+export function getCanvasTheme() {
+    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'),
+    };
+}

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

@@ -0,0 +1,8 @@
+export * from './types/index';
+export * from './utils/index';
+export { getCanvasTheme } from './canvas-theme';
+export { default as ThemeProvider } from './ThemeProvider.svelte';
+export type { ThemeMode, ThemeConfig } from './ThemeProvider.svelte';
+export { createTheme, defaultLightTheme, defaultDarkTheme, brassAccentTheme } from './theme';
+export type { ThemeName } from '../s0-state/ThemeStore.svelte';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/p0-primitives/index.ts"],"names":[],"mappings":"AAIA,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAGhD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAG7F,YAAY,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC"}

package/{src/p0-primitives/index.ts → dist/p0-primitives/index.js}

@@ -1,6 +1,9 @@
 // P0 Primitives — Shared types, utilities, and design tokens
 // This is the foundation layer that all other domains depend on
 // CSS tokens are imported via base.css or '@kos/design-system/tokens.css'
-
 export * from './types/index';
 export * from './utils/index';
+export { getCanvasTheme } from './canvas-theme';
+// Theme system
+export { default as ThemeProvider } from './ThemeProvider.svelte';
+export { createTheme, defaultLightTheme, defaultDarkTheme, brassAccentTheme } from './theme';

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

@@ -0,0 +1,38 @@
+/**
+ * Theme Utilities
+ *
+ * Factory functions for creating and composing themes.
+ *
+ * ADR: 2026-05-04-openui-generative-ui-integration
+ */
+import type { ThemeConfig } from './ThemeProvider.svelte';
+/**
+ * Create a theme by merging overrides with a base theme
+ */
+export declare function createTheme(base: ThemeConfig, overrides: Partial<ThemeConfig>): ThemeConfig;
+/**
+ * Default dark theme — Neo-brutalist industrial
+ * Charcoal surfaces, brass accent, telemetry palette
+ */
+export declare const defaultDarkTheme: ThemeConfig;
+/**
+ * Default light theme — warm desk surface
+ */
+export declare const defaultLightTheme: ThemeConfig;
+/**
+ * Control Room theme — terminal green / CRT aesthetic (opt-in alternate)
+ */
+export declare const controlRoomTheme: ThemeConfig;
+/**
+ * Brass accent theme variant — warm metallic (preserved for compatibility)
+ */
+export declare const brassAccentTheme: ThemeConfig;
+/**
+ * Copper accent theme variant — reddish metallic (preserved for compatibility)
+ */
+export declare const copperAccentTheme: ThemeConfig;
+/**
+ * High contrast accessibility theme
+ */
+export declare const highContrastTheme: ThemeConfig;
+//# sourceMappingURL=theme.d.ts.map

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

@@ -0,0 +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"}