@stephen-netu/design-system 0.1.0 → 0.2.0

package/dist/d0-data-viz/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/d0-data-viz/index.ts"],"names":[],"mappings":"AAGA,YAAY,EACV,SAAS,EACT,UAAU,EACV,UAAU,EACV,eAAe,EACf,aAAa,EACb,aAAa,GACd,MAAM,SAAS,CAAC;AAGjB,YAAY,EACV,UAAU,EACV,uBAAuB,EACvB,gBAAgB,EAChB,kBAAkB,EAClB,YAAY,EACZ,oBAAoB,EACpB,cAAc,EACd,kBAAkB,EAClB,oBAAoB,EACpB,uBAAuB,EACvB,wBAAwB,GACzB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EACL,iBAAiB,EACjB,yBAAyB,EACzB,2BAA2B,EAC3B,mBAAmB,EACnB,qBAAqB,EACrB,oBAAoB,EACpB,2BAA2B,EAC3B,kBAAkB,GACnB,MAAM,oBAAoB,CAAC;AAG5B,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,WAAW,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChH,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAG/E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAGpE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAIxE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,YAAY,EACV,aAAa,EACb,kBAAkB,EAClB,cAAc,EACd,YAAY,EACZ,SAAS,EACT,gBAAgB,GACjB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EACL,mBAAmB,EACnB,uBAAuB,EACvB,yBAAyB,EACzB,2BAA2B,EAC3B,iBAAiB,GAClB,MAAM,qBAAqB,CAAC"}

package/dist/d0-data-viz/index.js

@@ -0,0 +1,18 @@
+// D0 Data Viz — Barrel Export
+export { CHECKPOINT_COLORS, CHECKPOINT_STATUS_SYMBOLS, CHECKPOINT_KEYBOARD_ACTIONS, VISIBLE_CHECKPOINTS, CHECKPOINT_BAR_HEIGHT, CHECKPOINT_NODE_SIZE, CHECKPOINT_NODE_ACTIVE_SIZE, getCheckpointColor, } from './checkpoint-types';
+export { computeTreemap, formatBytes, TIER_COLORS } from './storage-map-types';
+// Components
+export { default as BarChart } from './BarChart.svelte';
+export { default as SparkLine } from './SparkLine.svelte';
+export { default as MetricCard } from './MetricCard.svelte';
+export { default as Timeline } from './Timeline.svelte';
+export { default as StorageMap } from './StorageMap.svelte';
+export { default as CheckpointBar } from './CheckpointBar.svelte';
+export { default as CheckpointPill } from './CheckpointPill.svelte';
+// New from NNJAS port
+export { default as ConnectionHealth } from './ConnectionHealth.svelte';
+// Types (QualityMetrics, QualitySample, QualityLevel) exported from t0-transport
+// World Line Timeline
+export { default as WorldLineTimeline } from './WorldLineTimeline.svelte';
+// Theme Integration
+export { CHECKPOINT_CSS_VARS, CHECKPOINT_COLOR_LABELS, CHECKPOINT_DEFAULT_COLORS, getEffectiveCheckpointColor, THEME_INTEGRATION, } from './theme-integration';

package/dist/d0-data-viz/storage-map-types.d.ts

@@ -0,0 +1,50 @@
+/** Ownership tier for a storage node */
+export type OwnerTier = 'kos' | 'external' | 'unknown';
+/** A single storage node in the treemap */
+export interface StorageNode {
+    path: string;
+    bytes: number;
+    ownerTier: OwnerTier;
+    label?: string;
+    children?: StorageNode[];
+}
+/** A flattened treemap cell ready for rendering */
+export interface TreemapCell {
+    path: string;
+    label: string;
+    bytes: number;
+    ownerTier: OwnerTier;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/** Layout result from the squarified treemap algorithm */
+export interface TreemapLayout {
+    cells: TreemapCell[];
+    totalBytes: number;
+}
+/** StorageMap component configuration */
+export interface StorageMapConfig {
+    /** Minimum cell dimension in px. Default 32. */
+    minCellSize?: number;
+    /** Gap between cells in px. Default 2. */
+    gap?: number;
+    /** Show path labels inside cells. Default true. */
+    showLabels?: boolean;
+}
+/** Color palette per owner tier */
+export declare const TIER_COLORS: Record<OwnerTier, {
+    fill: string;
+    stroke: string;
+    text: string;
+}>;
+/**
+ * Compute a squarified treemap layout for flat node lists.
+ * S-02: deterministic — sorted by bytes descending, no randomness.
+ * S-05: bounded — iterates finite node array.
+ */
+export declare function computeTreemap(nodes: StorageNode[], width: number, height: number, config?: StorageMapConfig): TreemapLayout;
+/** Format bytes to human-readable string */
+export declare function formatBytes(bytes: number): string;
+//# sourceMappingURL=storage-map-types.d.ts.map

package/dist/d0-data-viz/storage-map-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"storage-map-types.d.ts","sourceRoot":"","sources":["../../src/d0-data-viz/storage-map-types.ts"],"names":[],"mappings":"AAIA,wCAAwC;AACxC,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,UAAU,GAAG,SAAS,CAAC;AAEvD,2CAA2C;AAC3C,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;CAC1B;AAED,mDAAmD;AACnD,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,SAAS,CAAC;IACrB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,0DAA0D;AAC1D,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,yCAAyC;AACzC,MAAM,WAAW,gBAAgB;IAC/B,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,mCAAmC;AACnC,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,SAAS,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAgBzF,CAAC;AAIF;;;;GAIG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,WAAW,EAAE,EACpB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,MAAM,GAAE,gBAAqB,GAC5B,aAAa,CAwDf;AAED,4CAA4C;AAC5C,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAOjD"}

package/dist/d0-data-viz/storage-map-types.js

@@ -0,0 +1,81 @@
+// StorageMap — BSP treemap types (wt:sovra-1115)
+// S-02: No HashMap/HashSet — use sorted arrays for lookups.
+// Pure TypeScript — no Svelte, no DOM.
+/** Color palette per owner tier */
+export const TIER_COLORS = {
+    kos: {
+        fill: 'rgba(184, 115, 51, 0.25)',
+        stroke: 'rgba(184, 115, 51, 0.6)',
+        text: '#d4a06a',
+    },
+    external: {
+        fill: 'rgba(160, 152, 128, 0.15)',
+        stroke: 'rgba(160, 152, 128, 0.4)',
+        text: '#a09880',
+    },
+    unknown: {
+        fill: 'rgba(90, 82, 69, 0.15)',
+        stroke: 'rgba(90, 82, 69, 0.3)',
+        text: '#706858',
+    },
+};
+// ── Squarified treemap layout ──────────────────────────────────────────────
+/**
+ * Compute a squarified treemap layout for flat node lists.
+ * S-02: deterministic — sorted by bytes descending, no randomness.
+ * S-05: bounded — iterates finite node array.
+ */
+export function computeTreemap(nodes, width, height, config = {}) {
+    const gap = config.gap ?? 2;
+    const minCell = config.minCellSize ?? 32;
+    // Sort descending by size (deterministic, S-02)
+    const sorted = [...nodes].sort((a, b) => b.bytes - a.bytes);
+    const totalBytes = sorted.reduce((sum, n) => sum + n.bytes, 0);
+    if (totalBytes === 0 || sorted.length === 0) {
+        return { cells: [], totalBytes: 0 };
+    }
+    const cells = [];
+    const aspectRatio = width / height;
+    // Simple slice-and-dice treemap (row-based for readability)
+    const usableWidth = width - gap * 2;
+    const usableHeight = height - gap * 2;
+    let x = gap;
+    let y = gap;
+    let rowHeight = usableHeight;
+    // Group into rows based on aspect ratio
+    const rowTarget = Math.max(1, Math.round(Math.sqrt(sorted.length / aspectRatio)));
+    for (let i = 0; i < sorted.length; i += rowTarget) {
+        const row = sorted.slice(i, i + rowTarget);
+        const rowBytes = row.reduce((sum, n) => sum + n.bytes, 0);
+        // Row height proportional to row's share of total
+        const actualRowHeight = Math.max(minCell, (rowBytes / totalBytes) * usableHeight);
+        let cellX = x;
+        for (const node of row) {
+            const cellWidth = Math.max(minCell, (node.bytes / rowBytes) * usableWidth);
+            const label = node.label ?? node.path.split('/').pop() ?? node.path;
+            cells.push({
+                path: node.path,
+                label,
+                bytes: node.bytes,
+                ownerTier: node.ownerTier,
+                x: cellX,
+                y,
+                width: cellWidth - gap,
+                height: actualRowHeight - gap,
+            });
+            cellX += cellWidth;
+        }
+        y += actualRowHeight;
+    }
+    return { cells, totalBytes };
+}
+/** Format bytes to human-readable string */
+export function formatBytes(bytes) {
+    if (bytes === 0)
+        return '0 B';
+    const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log2(bytes) / 10);
+    const clamped = Math.min(i, units.length - 1);
+    const value = bytes / Math.pow(1024, clamped);
+    return `${value.toFixed(clamped === 0 ? 0 : 1)} ${units[clamped]}`;
+}

package/dist/d0-data-viz/theme-integration.d.ts

@@ -0,0 +1,106 @@
+/**
+ * Theme Integration for D0 Data Viz
+ *
+ * This module provides integration with the LEAP theme system for
+ * checkpoint visualization components. Colors are customizable via
+ * the themeStore settings panel.
+ *
+ * @module d0-data-viz/theme
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { CheckpointBar } from '@sov/design-system';
+ *   import { themeStore } from '../lib/stores/themeStore.svelte';
+ *
+ *   // Colors automatically applied from themeStore
+ *   // Users customize via Settings > Appearance > Checkpoint Colors
+ * </script>
+ *
+ * <CheckpointBar {checkpoints} {currentSeqno} />
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Programmatic color customization
+ * import { themeStore } from '../lib/stores/themeStore.svelte';
+ *
+ * themeStore.setCustomToken('d0-checkpoint-rust', '#ff6b35');     // Orange rust
+ * themeStore.setCustomToken('d0-checkpoint-ui', '#00d4aa');       // Teal UI
+ * themeStore.setCustomToken('d0-checkpoint-substrate', '#ff3366'); // Pink substrate
+ * ```
+ */
+import { getCheckpointColor } from './checkpoint-types';
+import type { CheckpointComponentType } from './checkpoint-types';
+/**
+ * CSS variable names for checkpoint colors.
+ * These are set by themeStore and consumed by CheckpointBar.
+ */
+export declare const CHECKPOINT_CSS_VARS: Record<CheckpointComponentType, string>;
+/**
+ * Human-readable labels for checkpoint color settings.
+ * Use these in settings panel UI.
+ */
+export declare const CHECKPOINT_COLOR_LABELS: Record<CheckpointComponentType, string>;
+/**
+ * Default colors for light and dark themes.
+ * Used when themeStore hasn't applied custom values.
+ */
+export declare const CHECKPOINT_DEFAULT_COLORS: Record<CheckpointComponentType, {
+    light: string;
+    dark: string;
+}>;
+/**
+ * Get the effective checkpoint color for a component type.
+ * Returns the themeStore CSS variable reference for runtime,
+ * or a fallback color for SSR/initial render.
+ *
+ * @param type - The checkpoint component type
+ * @param isDark - Whether to use dark theme fallback
+ * @returns CSS color value (variable reference or hex)
+ */
+export declare function getEffectiveCheckpointColor(type: CheckpointComponentType, isDark?: boolean): string;
+/**
+ * Re-export for convenience.
+ * @deprecated Use getEffectiveCheckpointColor for theme-aware colors
+ */
+export { getCheckpointColor };
+/**
+ * Integration with themeStore CUSTOMIZABLE_TOKENS.
+ *
+ * These tokens are registered in themeStore and appear in the
+ * settings panel under "Checkpoint" category.
+ */
+export declare const THEME_INTEGRATION: {
+    /** Category name in settings panel */
+    readonly category: "Checkpoint";
+    /** Token prefix for checkpoint colors */
+    readonly tokenPrefix: "d0-checkpoint-";
+    /** All customizable checkpoint tokens */
+    readonly tokens: readonly [{
+        readonly name: "d0-checkpoint-rust";
+        readonly label: "Rust Crate";
+        readonly component: "rust-crate";
+    }, {
+        readonly name: "d0-checkpoint-ui";
+        readonly label: "UI Bundle";
+        readonly component: "ui-bundle";
+    }, {
+        readonly name: "d0-checkpoint-config";
+        readonly label: "Config";
+        readonly component: "config";
+    }, {
+        readonly name: "d0-checkpoint-faculty";
+        readonly label: "Faculty";
+        readonly component: "faculty-state";
+    }, {
+        readonly name: "d0-checkpoint-substrate";
+        readonly label: "Substrate Binary";
+        readonly component: "substrate-binary";
+    }, {
+        readonly name: "d0-checkpoint-aggregate";
+        readonly label: "Aggregate";
+        readonly component: "system-snapshot";
+    }];
+};
+//# sourceMappingURL=theme-integration.d.ts.map

package/dist/d0-data-viz/theme-integration.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-integration.d.ts","sourceRoot":"","sources":["../../src/d0-data-viz/theme-integration.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAElE;;;GAGG;AACH,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,uBAAuB,EAAE,MAAM,CAO9D,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,uBAAuB,EAAE,MAAM,CAOlE,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAC5C,uBAAuB,EACvB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAQvB,CAAC;AAEX;;;;;;;;GAQG;AACH,wBAAgB,2BAA2B,CACzC,IAAI,EAAE,uBAAuB,EAC7B,MAAM,UAAO,GACZ,MAAM,CAaR;AAED;;;GAGG;AACH,OAAO,EAAE,kBAAkB,EAAE,CAAC;AAE9B;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB;IAC5B,sCAAsC;;IAGtC,yCAAyC;;IAGzC,yCAAyC;;;;;;;;;;;;;;;;;;;;;;;;;;CASjC,CAAC"}

package/dist/d0-data-viz/theme-integration.js

@@ -0,0 +1,116 @@
+/**
+ * Theme Integration for D0 Data Viz
+ *
+ * This module provides integration with the LEAP theme system for
+ * checkpoint visualization components. Colors are customizable via
+ * the themeStore settings panel.
+ *
+ * @module d0-data-viz/theme
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { CheckpointBar } from '@sov/design-system';
+ *   import { themeStore } from '../lib/stores/themeStore.svelte';
+ *
+ *   // Colors automatically applied from themeStore
+ *   // Users customize via Settings > Appearance > Checkpoint Colors
+ * </script>
+ *
+ * <CheckpointBar {checkpoints} {currentSeqno} />
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Programmatic color customization
+ * import { themeStore } from '../lib/stores/themeStore.svelte';
+ *
+ * themeStore.setCustomToken('d0-checkpoint-rust', '#ff6b35');     // Orange rust
+ * themeStore.setCustomToken('d0-checkpoint-ui', '#00d4aa');       // Teal UI
+ * themeStore.setCustomToken('d0-checkpoint-substrate', '#ff3366'); // Pink substrate
+ * ```
+ */
+import { getCheckpointColor } from './checkpoint-types';
+/**
+ * CSS variable names for checkpoint colors.
+ * These are set by themeStore and consumed by CheckpointBar.
+ */
+export const CHECKPOINT_CSS_VARS = {
+    'rust-crate': '--d0-checkpoint-rust',
+    'ui-bundle': '--d0-checkpoint-ui',
+    'config': '--d0-checkpoint-config',
+    'faculty-state': '--d0-checkpoint-faculty',
+    'substrate-binary': '--d0-checkpoint-substrate',
+    'system-snapshot': '--d0-checkpoint-aggregate',
+};
+/**
+ * Human-readable labels for checkpoint color settings.
+ * Use these in settings panel UI.
+ */
+export const CHECKPOINT_COLOR_LABELS = {
+    'rust-crate': 'Rust Crate',
+    'ui-bundle': 'UI Bundle',
+    'config': 'Config File',
+    'faculty-state': 'Faculty State',
+    'substrate-binary': 'Substrate Binary',
+    'system-snapshot': 'Aggregate Snapshot',
+};
+/**
+ * Default colors for light and dark themes.
+ * Used when themeStore hasn't applied custom values.
+ */
+export const CHECKPOINT_DEFAULT_COLORS = {
+    'rust-crate': { light: '#8a5a28', dark: '#b87333' },
+    'ui-bundle': { light: '#2d6b6e', dark: '#5f9ea0' },
+    'config': { light: '#7c6fae', dark: '#a99fd6' },
+    'faculty-state': { light: '#d4a03d', dark: '#e6c470' },
+    'substrate-binary': { light: '#c75a5a', dark: '#d98a8a' },
+    'system-snapshot': { light: '#6b7280', dark: '#9ca3af' },
+};
+/**
+ * Get the effective checkpoint color for a component type.
+ * Returns the themeStore CSS variable reference for runtime,
+ * or a fallback color for SSR/initial render.
+ *
+ * @param type - The checkpoint component type
+ * @param isDark - Whether to use dark theme fallback
+ * @returns CSS color value (variable reference or hex)
+ */
+export function getEffectiveCheckpointColor(type, isDark = true) {
+    // Return CSS variable reference for runtime
+    // Browser will resolve from themeStore-set values
+    const cssVar = CHECKPOINT_CSS_VARS[type];
+    const fallback = getCheckpointColor(type, isDark);
+    // For SSR safety, return fallback directly
+    // For client-side, return CSS var with fallback
+    if (typeof window === 'undefined') {
+        return fallback;
+    }
+    return `var(${cssVar}, ${fallback})`;
+}
+/**
+ * Re-export for convenience.
+ * @deprecated Use getEffectiveCheckpointColor for theme-aware colors
+ */
+export { getCheckpointColor };
+/**
+ * Integration with themeStore CUSTOMIZABLE_TOKENS.
+ *
+ * These tokens are registered in themeStore and appear in the
+ * settings panel under "Checkpoint" category.
+ */
+export const THEME_INTEGRATION = {
+    /** Category name in settings panel */
+    category: 'Checkpoint',
+    /** Token prefix for checkpoint colors */
+    tokenPrefix: 'd0-checkpoint-',
+    /** All customizable checkpoint tokens */
+    tokens: [
+        { name: 'd0-checkpoint-rust', label: 'Rust Crate', component: 'rust-crate' },
+        { name: 'd0-checkpoint-ui', label: 'UI Bundle', component: 'ui-bundle' },
+        { name: 'd0-checkpoint-config', label: 'Config', component: 'config' },
+        { name: 'd0-checkpoint-faculty', label: 'Faculty', component: 'faculty-state' },
+        { name: 'd0-checkpoint-substrate', label: 'Substrate Binary', component: 'substrate-binary' },
+        { name: 'd0-checkpoint-aggregate', label: 'Aggregate', component: 'system-snapshot' },
+    ],
+};

package/dist/d0-data-viz/types.d.ts

@@ -0,0 +1,38 @@
+export interface DataPoint {
+    label: string;
+    value: number;
+    color?: string;
+}
+export interface DataSeries {
+    id: string;
+    label: string;
+    data: DataPoint[];
+    color?: string;
+}
+export interface ChartProps {
+    series: DataSeries[];
+    width?: number;
+    height?: number;
+}
+export interface MetricCardProps {
+    label: string;
+    value: string | number;
+    unit?: string;
+    trend?: 'up' | 'down' | 'flat';
+    trendValue?: string;
+    /** 'default' = card block; 'inline' = compact horizontal for toolbars/headers */
+    size?: 'default' | 'inline';
+}
+export interface TimelineEntry {
+    id: string;
+    timestamp: string;
+    label: string;
+    description?: string;
+    color?: string;
+    icon?: string;
+}
+export interface TimelineProps {
+    entries: TimelineEntry[];
+    orientation?: 'horizontal' | 'vertical';
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/d0-data-viz/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/d0-data-viz/types.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAID,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAID,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iFAAiF;IACjF,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;CAC7B;AAID,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC"}

package/dist/d0-data-viz/types.js

@@ -0,0 +1,3 @@
+// D0 Data Viz — Core Types
+// Pure TypeScript — no Svelte, no DOM dependencies
+export {};

package/dist/d0-data-viz/world-line-types.d.ts

@@ -0,0 +1,27 @@
+export type EventType = 'arrival' | 'encounter' | 'conflict' | 'ritual';
+export type ObservationState = 'psi' | 'observed';
+export interface WorldLineCharacter {
+    id: string;
+    label: string;
+    color: string;
+}
+export interface WorldLineEvent {
+    id: string;
+    label: string[];
+    type: EventType;
+    eraIndex: number;
+    description: string;
+    attendance: Record<string, ObservationState>;
+    placeLabel?: string;
+}
+export interface WorldLineEra {
+    label: string;
+    xNorm: [number, number];
+    color: string;
+}
+export interface WorldLineData {
+    characters: WorldLineCharacter[];
+    events: WorldLineEvent[];
+    eras: WorldLineEra[];
+}
+//# sourceMappingURL=world-line-types.d.ts.map

package/dist/d0-data-viz/world-line-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"world-line-types.d.ts","sourceRoot":"","sources":["../../src/d0-data-viz/world-line-types.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,QAAQ,CAAC;AACxE,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,UAAU,CAAC;AAElD,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAa;IAC5B,UAAU,EAAE,kBAAkB,EAAE,CAAC;IACjC,MAAM,EAAE,cAAc,EAAE,CAAC;IACzB,IAAI,EAAE,YAAY,EAAE,CAAC;CACtB"}

package/dist/d0-data-viz/world-line-types.js

@@ -0,0 +1,2 @@
+// D0 Data Viz — World Line Types
+export {};

package/{src → dist}/demos/BspSizingInfographic.svelte

@@ -171,8 +171,8 @@
   .debug {
     margin-top: 16px;
     padding: 12px;
-    background: rgba(184, 115, 51, 0.1);
-    border: 1px solid var(--color-accent, #b87333);
+    background: var(--color-accent-subtle);
+    border: 1px solid var(--color-accent, var(--color-accent));
     border-radius: 6px;
     font-family: monospace;
     font-size: 12px;
@@ -191,7 +191,7 @@
   h2 {
     margin: 0 0 8px 0;
     font-size: 24px;
-    color: var(--color-accent, #b87333);
+    color: var(--color-accent, var(--color-accent));
   }
   
   .subtitle {
@@ -203,7 +203,7 @@
   .scale-container {
     display: flex;
     flex-direction: column;
-    gap: 24px;
+    gap: var(--space-6);
   }
   
   .scale-section {
@@ -233,7 +233,7 @@
   .fits-list {
     display: flex;
     flex-wrap: wrap;
-    gap: 8px;
+    gap: var(--space-2);
     margin-bottom: 16px;
   }
   
@@ -250,7 +250,7 @@
   .examples {
     display: flex;
     flex-wrap: wrap;
-    gap: 12px;
+    gap: var(--space-3);
     padding: 12px;
     background: rgba(0, 0, 0, 0.2);
     border-radius: 6px;
@@ -284,7 +284,7 @@
   .block-indicator {
     width: 100%;
     height: 100%;
-    background: linear-gradient(135deg, #b87333, #8b5a2b);
+    background: linear-gradient(135deg, var(--color-accent), #8b5a2b);
     display: flex;
     align-items: center;
     justify-content: center;

package/dist/demos/BspSizingInfographic.svelte.d.ts

@@ -0,0 +1,19 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const BspSizingInfographic: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type BspSizingInfographic = InstanceType<typeof BspSizingInfographic>;
+export default BspSizingInfographic;
+//# sourceMappingURL=BspSizingInfographic.svelte.d.ts.map

package/dist/demos/BspSizingInfographic.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BspSizingInfographic.svelte.d.ts","sourceRoot":"","sources":["../../src/demos/BspSizingInfographic.svelte.ts"],"names":[],"mappings":"AAgKA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,oBAAoB;;kBAA+E,CAAC;AACxF,KAAK,oBAAoB,GAAG,YAAY,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACxE,eAAe,oBAAoB,CAAC"}

package/{src → dist}/demos/BspZoneDemo.svelte

@@ -200,7 +200,7 @@
   
   .instructions {
     display: flex;
-    gap: 16px;
+    gap: var(--space-4);
     font-size: 12px;
     color: var(--color-text-muted, #706858);
   }
@@ -208,9 +208,9 @@
   .instructions span {
     display: flex;
     align-items: center;
-    gap: 4px;
+    gap: var(--space-1);
   }
-  
+
   kbd {
     background: var(--color-bg-elevated, #333);
     border: 1px solid var(--color-border, #444);
@@ -240,7 +240,7 @@
   }
   
   .zone.focused {
-    box-shadow: inset 0 0 0 2px var(--color-accent, #b87333);
+    box-shadow: inset 0 0 0 2px var(--color-accent, var(--color-accent));
   }
   
   .empty {

package/dist/demos/BspZoneDemo.svelte.d.ts

@@ -0,0 +1,4 @@
+declare const BspZoneDemo: import("svelte").Component<Record<string, never>, {}, "">;
+type BspZoneDemo = ReturnType<typeof BspZoneDemo>;
+export default BspZoneDemo;
+//# sourceMappingURL=BspZoneDemo.svelte.d.ts.map

package/dist/demos/BspZoneDemo.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BspZoneDemo.svelte.d.ts","sourceRoot":"","sources":["../../src/demos/BspZoneDemo.svelte.ts"],"names":[],"mappings":"AAmLA,QAAA,MAAM,WAAW,2DAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/demos/ControlRoomDemo.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    systemId?: string;
+    uptime?: string;
+};
+declare const ControlRoomDemo: import("svelte").Component<$$ComponentProps, {}, "">;
+type ControlRoomDemo = ReturnType<typeof ControlRoomDemo>;
+export default ControlRoomDemo;
+//# sourceMappingURL=ControlRoomDemo.svelte.d.ts.map

package/dist/demos/ControlRoomDemo.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlRoomDemo.svelte.d.ts","sourceRoot":"","sources":["../../src/demos/ControlRoomDemo.svelte.ts"],"names":[],"mappings":"AAqBC,KAAK,gBAAgB,GAAI;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AA2NJ,QAAA,MAAM,eAAe,sDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/{src → dist}/demos/NodepadBlocksShowcase.svelte

@@ -5,7 +5,7 @@
   // - Click-and-type editing (no mode toggle, no cursor reset)
   // - NO collapse button (content flows naturally)
   
-  import { NodepadBlock, type EnchantedBlockData } from '@kos/design-system/x0-enchanted-blocks';
+  import { NodepadBlock, type EnchantedBlockData } from '../x0-enchanted-blocks';
   
   // Mock blocks as EnchantedBlockData (not wrapped in TaskView)
   const mockBlocks: EnchantedBlockData[] = [
@@ -100,8 +100,8 @@ The block should just flow naturally—no collapse buttons needed.`,
       <NodepadBlock
         {block}
         maxWidth={320}
-        onChange={(content) => handleChange(block.id, content)}
-        onTypeChange={(type) => handleTypeChange(block.id, type)}
+        onChange={(content: string) => handleChange(block.id, content)}
+         onTypeChange={(type: string) => handleTypeChange(block.id, type)}
       />
     {/each}
   </main>
@@ -124,7 +124,7 @@ The block should just flow naturally—no collapse buttons needed.`,
     padding: 40px 20px;
     display: flex;
     flex-direction: column;
-    gap: 32px;
+    gap: var(--space-8);
   }
   
   .showcase-header {
@@ -150,9 +150,9 @@ The block should just flow naturally—no collapse buttons needed.`,
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    gap: 12px 24px;
+    gap: var(--space-3) var(--space-6);
     font-size: 13px;
-    color: var(--color-accent, #b87333);
+    color: var(--color-accent, var(--color-accent));
   }
   
   .feature {
@@ -163,7 +163,7 @@ The block should just flow naturally—no collapse buttons needed.`,
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
     align-items: start; /* KEY: Each card sizes to its own content, not row height */
-    gap: 20px;
+    gap: var(--space-5);
     max-width: 1400px;
     margin: 0 auto;
     width: 100%;

package/dist/demos/NodepadBlocksShowcase.svelte.d.ts

@@ -0,0 +1,4 @@
+declare const NodepadBlocksShowcase: import("svelte").Component<Record<string, never>, {}, "">;
+type NodepadBlocksShowcase = ReturnType<typeof NodepadBlocksShowcase>;
+export default NodepadBlocksShowcase;
+//# sourceMappingURL=NodepadBlocksShowcase.svelte.d.ts.map