@stephen-netu/design-system 0.1.0 → 0.2.1

package/dist/s0-lifecycle/RenderContext.d.ts

@@ -0,0 +1,48 @@
+import type { Rect, Point, Size } from '../p0-primitives/types/geometry';
+export interface TextStyle {
+    fontFamily?: string;
+    fontSize?: number;
+    fontWeight?: number;
+    color?: string;
+    lineHeight?: number;
+    letterSpacing?: number;
+}
+export interface ClipRegion {
+    /** Bounding rectangle for clipping */
+    bounds: Rect;
+    /** Clip mode */
+    mode: 'intersect' | 'replace' | 'none';
+}
+export interface DrawCommand {
+    type: 'rect' | 'text' | 'image' | 'clip' | 'transform' | 'custom';
+    zindex?: number;
+    clip?: ClipRegion;
+    [key: string]: unknown;
+}
+/**
+ * RenderContext is provided during the paint phase.
+ * Components issue draw commands to the scene graph.
+ */
+export interface RenderContext {
+    /** Draw a filled rectangle */
+    drawRect(rect: Rect, color: string): void;
+    /** Draw text at a position with a style */
+    drawText(position: Point, text: string, style: TextStyle): void;
+    /** Draw an image within bounds */
+    drawImage(src: string, bounds: Rect): void;
+    /** Push a clip region for subsequent draws */
+    pushClip(clip: ClipRegion): void;
+    /** Pop the most recent clip region */
+    popClip(): void;
+    /** Push a 2D transform matrix for subsequent draws */
+    pushTransform?(matrix: DOMMatrix | number[]): void;
+    /** Pop the most recent transform */
+    popTransform?(): void;
+    /** Current viewport size */
+    readonly viewportSize: Size;
+    /** Current scale factor */
+    readonly scale: number;
+    /** Maximum texture dimension (for GPU-bound contexts) */
+    readonly maxTextureDimension: number | null;
+}
+//# sourceMappingURL=RenderContext.d.ts.map

package/dist/s0-lifecycle/RenderContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RenderContext.d.ts","sourceRoot":"","sources":["../../src/s0-lifecycle/RenderContext.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iCAAiC,CAAC;AAEzE,MAAM,WAAW,SAAS;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,UAAU;IACzB,sCAAsC;IACtC,MAAM,EAAE,IAAI,CAAC;IACb,gBAAgB;IAChB,IAAI,EAAE,WAAW,GAAG,SAAS,GAAG,MAAM,CAAC;CACxC;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAC;IAClE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED;;;GAGG;AACH,MAAM,WAAW,aAAa;IAC5B,8BAA8B;IAC9B,QAAQ,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAE1C,2CAA2C;IAC3C,QAAQ,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,GAAG,IAAI,CAAC;IAEhE,kCAAkC;IAClC,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,GAAG,IAAI,CAAC;IAE3C,8CAA8C;IAC9C,QAAQ,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,CAAC;IAEjC,sCAAsC;IACtC,OAAO,IAAI,IAAI,CAAC;IAEhB,sDAAsD;IACtD,aAAa,CAAC,CAAC,MAAM,EAAE,SAAS,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC;IAEnD,oCAAoC;IACpC,YAAY,CAAC,IAAI,IAAI,CAAC;IAEtB,4BAA4B;IAC5B,QAAQ,CAAC,YAAY,EAAE,IAAI,CAAC;IAE5B,2BAA2B;IAC3B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IAEvB,yDAAyD;IACzD,QAAQ,CAAC,mBAAmB,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7C"}

package/dist/s0-lifecycle/RenderContext.js

@@ -0,0 +1,3 @@
+// S0 Lifecycle — Render Context
+// Provides drawing primitives during the render phase.
+export {};

package/dist/s0-lifecycle/Scene.d.ts

@@ -0,0 +1,61 @@
+import type { Rect } from '../p0-primitives/types/geometry';
+import type { DrawCommand } from './RenderContext';
+/**
+ * Z-ordering for scene layers.
+ * Higher values render on top of lower values.
+ */
+export type ZIndex = number;
+/**
+ * Clip bounds for a scene layer.
+ * Controls visibility boundary for child content.
+ */
+export type ClipBounds = {
+    type: 'none';
+} | {
+    type: 'active-layer';
+} | {
+    type: 'bounded';
+    bounds: Rect;
+} | {
+    type: 'intersected';
+    bounds: Rect;
+};
+/**
+ * A renderable layer in the scene graph.
+ * Contains draw commands and optional clipping.
+ */
+export interface SceneLayer {
+    /** Z-order for this layer */
+    zindex: ZIndex;
+    /** Clip bounds for this layer */
+    clip: ClipBounds;
+    /** Ordered draw commands within this layer */
+    commands: DrawCommand[];
+    /** Whether pointer events pass through this layer */
+    clickThrough: boolean;
+}
+/**
+ * Scene graph — the accumulated output of a render pass.
+ * Components paint into the scene during the render phase.
+ * The scene is then consumed by the platform renderer.
+ */
+export declare class Scene {
+    private scale;
+    private layers;
+    private overlayLayers;
+    private activeZIndex;
+    constructor(scale?: number);
+    /** Push a new layer with optional clip bounds */
+    pushLayer(clip?: ClipBounds, zindex?: ZIndex): this;
+    /** Pop the current layer */
+    popLayer(): this;
+    /** Add a draw command to the active layer */
+    addCommand(command: DrawCommand): this;
+    /** Push an overlay layer (renders above all content layers) */
+    pushOverlay(clip?: ClipBounds): this;
+    /** Get all layers in z-order */
+    get allLayers(): SceneLayer[];
+    /** Get the current scale factor */
+    get scaleFactor(): number;
+}
+//# sourceMappingURL=Scene.d.ts.map

package/dist/s0-lifecycle/Scene.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scene.d.ts","sourceRoot":"","sources":["../../src/s0-lifecycle/Scene.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,iCAAiC,CAAC;AAC5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD;;;GAGG;AACH,MAAM,MAAM,MAAM,GAAG,MAAM,CAAC;AAE5B;;;GAGG;AACH,MAAM,MAAM,UAAU,GAClB;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAChB;IAAE,IAAI,EAAE,cAAc,CAAA;CAAE,GACxB;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,MAAM,EAAE,IAAI,CAAA;CAAE,GACjC;IAAE,IAAI,EAAE,aAAa,CAAC;IAAC,MAAM,EAAE,IAAI,CAAA;CAAE,CAAC;AAE1C;;;GAGG;AACH,MAAM,WAAW,UAAU;IACzB,6BAA6B;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,IAAI,EAAE,UAAU,CAAC;IACjB,8CAA8C;IAC9C,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,qDAAqD;IACrD,YAAY,EAAE,OAAO,CAAC;CACvB;AAED;;;;GAIG;AACH,qBAAa,KAAK;IAMd,OAAO,CAAC,KAAK;IALf,OAAO,CAAC,MAAM,CAAoB;IAClC,OAAO,CAAC,aAAa,CAAoB;IACzC,OAAO,CAAC,YAAY,CAAa;gBAGvB,KAAK,GAAE,MAAU;IAG3B,iDAAiD;IACjD,SAAS,CAAC,IAAI,GAAE,UAA6B,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI;IAWrE,4BAA4B;IAC5B,QAAQ,IAAI,IAAI;IAKhB,6CAA6C;IAC7C,UAAU,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAQtC,+DAA+D;IAC/D,WAAW,CAAC,IAAI,GAAE,UAA6B,GAAG,IAAI;IAUtD,gCAAgC;IAChC,IAAI,SAAS,IAAI,UAAU,EAAE,CAI5B;IAED,mCAAmC;IACnC,IAAI,WAAW,IAAI,MAAM,CAExB;CACF"}

package/dist/s0-lifecycle/Scene.js

@@ -0,0 +1,58 @@
+// S0 Lifecycle — Scene Graph Types
+// Hierarchical composition structure for rendered output.
+/**
+ * Scene graph — the accumulated output of a render pass.
+ * Components paint into the scene during the render phase.
+ * The scene is then consumed by the platform renderer.
+ */
+export class Scene {
+    scale;
+    layers = [];
+    overlayLayers = [];
+    activeZIndex = 0;
+    constructor(scale = 1) {
+        this.scale = scale;
+    }
+    /** Push a new layer with optional clip bounds */
+    pushLayer(clip = { type: 'none' }, zindex) {
+        const zi = zindex ?? this.activeZIndex;
+        this.layers.push({
+            zindex: zi,
+            clip,
+            commands: [],
+            clickThrough: false,
+        });
+        return this;
+    }
+    /** Pop the current layer */
+    popLayer() {
+        // Layers are finalized when popped
+        return this;
+    }
+    /** Add a draw command to the active layer */
+    addCommand(command) {
+        const layer = this.layers[this.layers.length - 1];
+        if (layer) {
+            layer.commands.push(command);
+        }
+        return this;
+    }
+    /** Push an overlay layer (renders above all content layers) */
+    pushOverlay(clip = { type: 'none' }) {
+        this.overlayLayers.push({
+            zindex: 9999,
+            clip,
+            commands: [],
+            clickThrough: false,
+        });
+        return this;
+    }
+    /** Get all layers in z-order */
+    get allLayers() {
+        return [...this.layers, ...this.overlayLayers].sort((a, b) => a.zindex - b.zindex);
+    }
+    /** Get the current scale factor */
+    get scaleFactor() {
+        return this.scale;
+    }
+}

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

@@ -0,0 +1,8 @@
+export { type Lifecycle, type LifecyclePhase, LIFECYCLE_PHASES, executeLifecycle } from './Lifecycle';
+export { type ConstraintContext, type SizeConstraint, type SizeConstraints } from './ConstraintContext';
+export { type LayoutContext } from './LayoutContext';
+export { type InteractionContext, type InteractionEvent, type EventOutcome } from './InteractionContext';
+export { type RenderContext, type TextStyle, type ClipRegion, type DrawCommand } from './RenderContext';
+export { Scene, type SceneLayer, type ZIndex, type ClipBounds } from './Scene';
+export { CanvasRenderContext } from './CanvasRenderContext';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/s0-lifecycle/index.ts"],"names":[],"mappings":"AAeA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,cAAc,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAGtG,OAAO,EAAE,KAAK,iBAAiB,EAAE,KAAK,cAAc,EAAE,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACxG,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,KAAK,kBAAkB,EAAE,KAAK,gBAAgB,EAAE,KAAK,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACzG,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,KAAK,UAAU,EAAE,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGxG,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,KAAK,MAAM,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAG/E,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/s0-lifecycle/index.js

@@ -0,0 +1,19 @@
+// S0 Lifecycle — Spatial/canvas rendering pipeline for the LEAP design system
+//
+// SCOPE: This module is for custom-rendered components that bypass the browser
+// layout engine — canvas, WebGL, GPU-composited layers. Do NOT use for CSS/DOM
+// components (buttons, panels, cards) — Svelte 5 runes + CSS are correct there.
+//
+// Target components:
+//   spatial/ForceCanvas   — d3-force sim + canvas cell rendering
+//   spatial/LodRenderer   — LOD-tiered cell rendering
+//   spatial/BspTilingCanvas — BSP zone layout + canvas fills
+//   spatial/SnapZoomCamera  — camera transforms over scene layers
+//
+// Constrain → layout → interact → render pipeline
+// Core lifecycle interface
+export { LIFECYCLE_PHASES, executeLifecycle } from './Lifecycle';
+// Scene graph
+export { Scene } from './Scene';
+// Canvas 2D concrete implementation
+export { CanvasRenderContext } from './CanvasRenderContext';

package/dist/s0-state/SyncStatus.svelte

@@ -0,0 +1,275 @@
+<script lang="ts" module>
+  /**
+   * SyncStatus — Synchronization status with recovery actions
+   * 
+   * A generalized version of NNJAS RecoveryUI for the LEAP design system.
+   * Shows sync state, errors, and provides recovery actions.
+   * 
+   * @example
+   * <SyncStatus 
+   *   status="error"
+   *   error="Connection lost"
+   *   pendingCount={5}
+   *   onRetry={() => reconnect()}
+   *   onExport={() => exportPending()}
+   * />
+   */
+  export type SyncStatusState = 'synced' | 'syncing' | 'pending' | 'error' | 'offline';
+
+  export interface SyncStatusAction {
+    label: string;
+    onClick: () => void;
+    variant?: 'primary' | 'secondary' | 'danger';
+  }
+</script>
+
+<script lang="ts">
+  interface Props {
+    status: SyncStatusState;
+    lastSync?: number | null;
+    pendingCount?: number;
+    error?: string | null;
+    actions?: SyncStatusAction[];
+    class?: string;
+  }
+
+  let {
+    status,
+    lastSync = null,
+    pendingCount = 0,
+    error = null,
+    actions = [],
+    class: className = ''
+  }: Props = $props();
+
+  let lastSyncText = $derived.by(() => {
+    if (!lastSync) return 'Never';
+    const diff = Date.now() - lastSync;
+    const seconds = Math.floor(diff / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    const days = Math.floor(hours / 24);
+    
+    if (days > 0) return `${days}d ago`;
+    if (hours > 0) return `${hours}h ago`;
+    if (minutes > 0) return `${minutes}m ago`;
+    return 'Just now';
+  });
+
+  let statusConfig = $derived.by(() => {
+    switch (status) {
+      case 'synced':
+        return {
+          icon: 'check',
+          color: 'var(--color-success, #27ae60)',
+          label: 'Synced',
+          message: `Last synced ${lastSyncText}`
+        };
+      case 'syncing':
+        return {
+          icon: 'sync',
+          color: 'var(--color-accent, #b87333)',
+          label: 'Syncing...',
+          message: pendingCount > 0 ? `${pendingCount} items pending` : 'Synchronizing changes'
+        };
+      case 'pending':
+        return {
+          icon: 'clock',
+          color: 'var(--color-warning, #f39c12)',
+          label: 'Pending',
+          message: `${pendingCount} item${pendingCount === 1 ? '' : 's'} waiting to sync`
+        };
+      case 'error':
+        return {
+          icon: 'alert',
+          color: 'var(--color-error, #c0392b)',
+          label: 'Sync Error',
+          message: error || 'Synchronization failed'
+        };
+      case 'offline':
+        return {
+          icon: 'offline',
+          color: 'var(--color-text-muted, #666)',
+          label: 'Offline',
+          message: 'Working offline - changes will sync when connected'
+        };
+    }
+  });
+
+  function getIconPath(icon: string): string {
+    switch (icon) {
+      case 'check':
+        return 'M20 6L9 17l-5-5';
+      case 'sync':
+        return 'M23 4v6h-6M1 20v-6h6M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15';
+      case 'clock':
+        return 'M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.2 3.2.8-1.3-4.5-2.7V7z';
+      case 'alert':
+        return 'M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0zM12 17v-2M12 9v4';
+      case 'offline':
+        return 'M1 1l22 22M9 9l3 3m-3 0l3-3m-3-3l-5.3 5.3M16.7 6.7L12 12m-3-3l-5.3-5.3';
+      default:
+        return '';
+    }
+  }
+
+  function getActionClass(variant: string): string {
+    switch (variant) {
+      case 'primary':
+        return 'action-primary';
+      case 'danger':
+        return 'action-danger';
+      default:
+        return 'action-secondary';
+    }
+  }
+</script>
+
+<div class="sync-status sync-status--{status} {className}" role="status" aria-live="polite">
+  <div class="sync-header">
+    <div class="sync-indicator" style="color: {statusConfig.color}">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class:spin={status === 'syncing'}>
+        <path d={getIconPath(statusConfig.icon)} />
+      </svg>
+    </div>
+    
+    <div class="sync-info">
+      <span class="sync-label" style="color: {statusConfig.color}">
+        {statusConfig.label}
+      </span>
+      <span class="sync-message">{statusConfig.message}</span>
+    </div>
+  </div>
+
+  {#if actions.length > 0}
+    <div class="sync-actions">
+      {#each actions as action (action.label)}
+        <button 
+          class="sync-action {getActionClass(action.variant || 'secondary')}"
+          onclick={action.onClick}
+          type="button"
+        >
+          {action.label}
+        </button>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .sync-status {
+    background: var(--color-bg-panel, #222);
+    border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.06));
+    border-radius: var(--radius-md, 4px);
+    overflow: hidden;
+  }
+
+  .sync-status--error {
+    border-color: var(--color-error, #c0392b);
+  }
+
+  .sync-status--syncing {
+    border-color: var(--color-accent, var(--color-accent));
+  }
+
+  .sync-status--offline {
+    border-color: var(--color-text-muted, #666);
+  }
+
+  .sync-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3, 0.75rem);
+    padding: var(--space-3, 0.75rem);
+  }
+
+  .sync-indicator {
+    flex-shrink: 0;
+    width: 24px;
+    height: 24px;
+  }
+
+  .sync-indicator svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .spin {
+    animation: spin 2s linear infinite;
+  }
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .sync-info {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1, 0.25rem);
+    flex: 1;
+    min-width: 0;
+  }
+
+  .sync-label {
+    font-size: var(--text-sm, 0.875rem);
+    font-weight: 600;
+  }
+
+  .sync-message {
+    font-size: var(--text-xs, 0.75rem);
+    color: var(--color-text-secondary, #888);
+  }
+
+  .sync-actions {
+    display: flex;
+    gap: var(--space-2, 0.5rem);
+    padding: 0 var(--space-3, 0.75rem) var(--space-3, 0.75rem);
+    border-top: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.06));
+  }
+
+  .sync-action {
+    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
+    border-radius: var(--radius-md, 4px);
+    font-size: var(--text-sm, 0.875rem);
+    cursor: pointer;
+    transition: all 0.15s ease;
+    border: 1px solid transparent;
+  }
+
+  .action-primary {
+    background: var(--color-accent, var(--color-accent));
+    color: var(--color-bg-app, #141414);
+    border-color: var(--color-accent, var(--color-accent));
+  }
+
+  .action-primary:hover {
+    background: var(--color-accent-hover, #d4956a);
+  }
+
+  .action-secondary {
+    background: transparent;
+    color: var(--color-text-secondary, #888);
+    border-color: var(--color-border-default, #333);
+  }
+
+  .action-secondary:hover {
+    background: var(--color-bg-hover, rgba(255, 255, 255, 0.03));
+    color: var(--color-text-primary, #e8e8e8);
+  }
+
+  .action-danger {
+    background: var(--color-error-subtle, rgba(192, 57, 43, 0.15));
+    color: var(--color-error, #c0392b);
+    border-color: var(--color-error, #c0392b);
+  }
+
+  .action-danger:hover {
+    background: var(--color-error, #c0392b);
+    color: var(--color-bg-app, #141414);
+  }
+</style>

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

@@ -0,0 +1,33 @@
+/**
+ * SyncStatus — Synchronization status with recovery actions
+ *
+ * A generalized version of NNJAS RecoveryUI for the LEAP design system.
+ * Shows sync state, errors, and provides recovery actions.
+ *
+ * @example
+ * <SyncStatus
+ *   status="error"
+ *   error="Connection lost"
+ *   pendingCount={5}
+ *   onRetry={() => reconnect()}
+ *   onExport={() => exportPending()}
+ * />
+ */
+export type SyncStatusState = 'synced' | 'syncing' | 'pending' | 'error' | 'offline';
+export interface SyncStatusAction {
+    label: string;
+    onClick: () => void;
+    variant?: 'primary' | 'secondary' | 'danger';
+}
+interface Props {
+    status: SyncStatusState;
+    lastSync?: number | null;
+    pendingCount?: number;
+    error?: string | null;
+    actions?: SyncStatusAction[];
+    class?: string;
+}
+declare const SyncStatus: import("svelte").Component<Props, {}, "">;
+type SyncStatus = ReturnType<typeof SyncStatus>;
+export default SyncStatus;
+//# sourceMappingURL=SyncStatus.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SyncStatus.svelte.d.ts","sourceRoot":"","sources":["../../src/s0-state/SyncStatus.svelte.ts"],"names":[],"mappings":"AAGE;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAErF,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC;CAC9C;AAED,UAAU,KAAK;IACb,MAAM,EAAE,eAAe,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAiIH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

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

@@ -0,0 +1,12 @@
+export type ThemeName = 'dark' | 'light' | 'control-room';
+declare class ThemeStore {
+    #private;
+    get theme(): ThemeName;
+    setTheme(t: ThemeName): void;
+    toggleTheme(): void;
+    syncFromDOM(): void;
+}
+export declare const themeStore: ThemeStore;
+export declare function initThemeStore(): void;
+export {};
+//# sourceMappingURL=ThemeStore.svelte.d.ts.map

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

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

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

@@ -0,0 +1,61 @@
+import { onMount } from 'svelte';
+const STORAGE_KEY = 'kos-theme';
+function hasLocalStorage() {
+    try {
+        return typeof localStorage !== 'undefined';
+    }
+    catch {
+        return false;
+    }
+}
+function getStoredTheme() {
+    if (!hasLocalStorage())
+        return null;
+    try {
+        const stored = localStorage.getItem(STORAGE_KEY);
+        if (stored === 'dark' || stored === 'light' || stored === 'control-room')
+            return stored;
+    }
+    catch { /* storage access denied */ }
+    return null;
+}
+function getInitialTheme() {
+    return getStoredTheme() ?? 'dark';
+}
+class ThemeStore {
+    #theme = $state(getInitialTheme());
+    get theme() {
+        return this.#theme;
+    }
+    setTheme(t) {
+        this.#theme = t;
+        document.documentElement.setAttribute('data-theme', t);
+        document.documentElement.style.colorScheme = t === 'light' ? 'light' : 'dark';
+        if (hasLocalStorage()) {
+            try {
+                localStorage.setItem(STORAGE_KEY, t);
+            }
+            catch { /* storage access denied */ }
+        }
+    }
+    toggleTheme() {
+        const order = ['dark', 'light', 'control-room'];
+        const idx = order.indexOf(this.#theme);
+        this.setTheme(order[(idx + 1) % order.length]);
+    }
+    syncFromDOM() {
+        const dom = document.documentElement.getAttribute('data-theme');
+        if (dom === 'dark' || dom === 'light' || dom === 'control-room') {
+            this.#theme = dom;
+        }
+    }
+}
+export const themeStore = new ThemeStore();
+export function initThemeStore() {
+    onMount(() => {
+        themeStore.syncFromDOM();
+        const stored = getStoredTheme();
+        if (stored)
+            themeStore.setTheme(stored);
+    });
+}

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

@@ -0,0 +1,68 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { themeStore } from './ThemeStore.svelte';
+function safeStorageClear() {
+    try {
+        localStorage.clear();
+    }
+    catch { /* jsdom may not fully implement storage */ }
+}
+describe('ThemeStore', () => {
+    const originalTheme = document.documentElement.getAttribute('data-theme');
+    beforeEach(() => {
+        document.documentElement.removeAttribute('data-theme');
+        document.documentElement.style.colorScheme = '';
+        safeStorageClear();
+        themeStore.setTheme('dark');
+    });
+    afterEach(() => {
+        if (originalTheme) {
+            document.documentElement.setAttribute('data-theme', originalTheme);
+        }
+        else {
+            document.documentElement.removeAttribute('data-theme');
+        }
+        document.documentElement.style.colorScheme = '';
+        safeStorageClear();
+    });
+    it('defaults to dark theme', () => {
+        expect(themeStore.theme).toBe('dark');
+    });
+    it('setTheme updates theme, data-theme attr, colorScheme, and localStorage', () => {
+        themeStore.setTheme('light');
+        expect(themeStore.theme).toBe('light');
+        expect(document.documentElement.getAttribute('data-theme')).toBe('light');
+        expect(document.documentElement.style.colorScheme).toBe('light');
+        expect(localStorage.getItem('kos-theme')).toBe('light');
+    });
+    it('setTheme("control-room") sets correct attributes', () => {
+        themeStore.setTheme('control-room');
+        expect(themeStore.theme).toBe('control-room');
+        expect(document.documentElement.getAttribute('data-theme')).toBe('control-room');
+        expect(document.documentElement.style.colorScheme).toBe('dark');
+    });
+    it('toggleTheme cycles dark → light → control-room → dark', () => {
+        themeStore.setTheme('dark');
+        themeStore.toggleTheme();
+        expect(themeStore.theme).toBe('light');
+        themeStore.toggleTheme();
+        expect(themeStore.theme).toBe('control-room');
+        themeStore.toggleTheme();
+        expect(themeStore.theme).toBe('dark');
+    });
+    it('syncFromDOM reads data-theme attribute', () => {
+        document.documentElement.setAttribute('data-theme', 'control-room');
+        themeStore.syncFromDOM();
+        expect(themeStore.theme).toBe('control-room');
+    });
+    it('syncFromDOM ignores invalid values', () => {
+        document.documentElement.setAttribute('data-theme', 'invalid');
+        themeStore.syncFromDOM();
+        expect(themeStore.theme).toBe('dark');
+    });
+    it('persists theme across setTheme calls', () => {
+        themeStore.setTheme('light');
+        expect(localStorage.getItem('kos-theme')).toBe('light');
+        themeStore.setTheme('control-room');
+        expect(localStorage.getItem('kos-theme')).toBe('control-room');
+    });
+});