@stephen-netu/design-system 0.1.0 → 0.2.0

package/src/d0-data-viz/checkpoint-types.ts

@@ -1,162 +0,0 @@
-// D0 Data Viz — Checkpoint Timeline Types
-// Pure TypeScript — no Svelte, no DOM dependencies
-// ADR: ui-timeline-checkpoint-bar-001
-
-// === Checkpoint Types ===
-
-/** Component types for color coding per ADR spec */
-export type CheckpointComponentType =
-  | 'rust-crate'
-  | 'ui-bundle'
-  | 'config'
-  | 'faculty-state'
-  | 'substrate-binary'
-  | 'system-snapshot';
-
-/** Checkpoint status visual encoding */
-export type CheckpointStatus = 'committed' | 'system' | 'proposed' | 'partial';
-
-/** A single checkpoint entry on the timeline */
-export interface Checkpoint {
-  /** Unique sequence number (seqno per sigchain) */
-  seqno: number;
-  /** Human-readable identifier */
-  id: string;
-  /** Component name (e.g., "ryu-hamiltonian-panel") */
-  component: string;
-  /** Component type for color coding */
-  componentType: CheckpointComponentType;
-  /** Checkpoint status for visual encoding */
-  status: CheckpointStatus;
-  /** Version transition (optional) */
-  version?: {
-    from: string;
-    to: string;
-  };
-  /** Author identifier */
-  author?: string;
-  /** Associated task ID */
-  taskId?: string;
-  /** Human description */
-  description: string;
-  /** Timestamp as sequence number reference */
-  timestamp: number;
-}
-
-/** Color mapping — references CSS custom properties set by themeStore */
-export const CHECKPOINT_COLORS: Record<CheckpointComponentType, string> = {
-  'rust-crate': 'var(--d0-checkpoint-rust)',
-  'ui-bundle': 'var(--d0-checkpoint-ui)',
-  'config': 'var(--d0-checkpoint-config)',
-  'faculty-state': 'var(--d0-checkpoint-faculty)',
-  'substrate-binary': 'var(--d0-checkpoint-substrate)',
-  'system-snapshot': 'var(--d0-checkpoint-aggregate)',
-};
-
-/** Get checkpoint color with fallback for when CSS vars aren't set */
-export function getCheckpointColor(type: CheckpointComponentType, isDark = true): string {
-  const fallbacks: Record<CheckpointComponentType, { light: string; dark: string }> = {
-    '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' },
-  };
-  return fallbacks[type][isDark ? 'dark' : 'light'];
-}
-
-/** Visual encoding for checkpoint status */
-export const CHECKPOINT_STATUS_SYMBOLS: Record<CheckpointStatus, string> = {
-  'committed': '◉',    // Filled circle
-  'system': '◎',       // Double-ring circle
-  'proposed': '○',     // Hollow circle
-  'partial': '◐',      // Half-filled
-};
-
-// === Checkpoint Bar Props ===
-
-export interface CheckpointBarProps {
-  checkpoints: Checkpoint[];
-  currentSeqno: number;
-  previewSeqno?: number | null;
-  onCheckpointClick?: (checkpoint: Checkpoint) => void;
-  onCheckpointDoubleClick?: (checkpoint: Checkpoint) => void;
-  /** Callback when "Now" handle is dragged (seqno target) */
-  onNowHandleDrag?: (seqno: number) => void;
-  /** Callback when exiting preview mode */
-  onExitPreview?: () => void;
-  'aria-label'?: string;
-}
-
-// === Preview Mode ===
-
-export interface PreviewState {
-  seqno: number;
-  checkpoint: Checkpoint;
-  isReadOnly: boolean;
-}
-
-export interface RollbackConfirmation {
-  targetSeqno: number;
-  targetCheckpoint: Checkpoint;
-  currentSeqno: number;
-  affectedComponents: string[];
-  archivedConversations: number;
-}
-
-// === Keyboard Navigation ===
-
-export interface KeyboardNavigationState {
-  focusedIndex: number;
-  isPreviewMode: boolean;
-}
-
-/** Keyboard action mapping per ADR accessibility spec */
-export const CHECKPOINT_KEYBOARD_ACTIONS = {
-  ArrowLeft: 'navigate-prev',
-  ArrowRight: 'navigate-next',
-  Enter: 'preview',
-  'Shift+Enter': 'rollback',
-  Escape: 'exit-preview',
-  Home: 'jump-genesis',
-  End: 'jump-now',
-} as const;
-
-export type CheckpointKeyboardAction =
-  typeof CHECKPOINT_KEYBOARD_ACTIONS[keyof typeof CHECKPOINT_KEYBOARD_ACTIONS];
-
-// === Store Interface (Framework Agnostic) ===
-
-export interface TimelineStoreState {
-  checkpoints: Checkpoint[];
-  currentSeqno: number;
-  previewSeqno: number | null;
-  isScrubbing: boolean;
-  visibleRange: { start: number; end: number };
-}
-
-export interface TimelineStoreActions {
-  scrubTo(seqno: number): Promise<void>;
-  exitPreview(): void;
-  rollbackTo(seqno: number): Promise<RollbackResult>;
-  navigateToCheckpoint(index: number): void;
-}
-
-export interface RollbackResult {
-  success: boolean;
-  newSeqno?: number;
-  error?: string;
-}
-
-// === Lazy Loading Constants ===
-
-/** Number of checkpoints to keep in memory (per ADR performance spec) */
-export const VISIBLE_CHECKPOINTS = 50;
-
-/** Checkpoint bar height in pixels (ADR spec: 48px) */
-export const CHECKPOINT_BAR_HEIGHT = 48;
-
-/** Node sizes for visual encoding */
-export const CHECKPOINT_NODE_SIZE = 12;
-export const CHECKPOINT_NODE_ACTIVE_SIZE = 16;

package/src/d0-data-viz/index.ts

@@ -1,58 +0,0 @@
-// D0 Data Viz — Barrel Export
-
-// Types
-export type {
-  DataPoint,
-  DataSeries,
-  ChartProps,
-  MetricCardProps,
-  TimelineEntry,
-  TimelineProps,
-} from './types';
-
-// Checkpoint Types (ADR: ui-timeline-checkpoint-bar-001)
-export type {
-  Checkpoint,
-  CheckpointComponentType,
-  CheckpointStatus,
-  CheckpointBarProps,
-  PreviewState,
-  RollbackConfirmation,
-  RollbackResult,
-  TimelineStoreState,
-  TimelineStoreActions,
-  KeyboardNavigationState,
-  CheckpointKeyboardAction,
-} from './checkpoint-types';
-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';
-
-// StorageMap (wt:sovra-1115)
-export type { StorageNode, StorageMapConfig, TreemapCell, TreemapLayout, OwnerTier } from './storage-map-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';
-
-// Theme Integration
-export {
-  CHECKPOINT_CSS_VARS,
-  CHECKPOINT_COLOR_LABELS,
-  CHECKPOINT_DEFAULT_COLORS,
-  getEffectiveCheckpointColor,
-  THEME_INTEGRATION,
-} from './theme-integration';

package/src/d0-data-viz/storage-map-types.ts

@@ -1,142 +0,0 @@
-// StorageMap — BSP treemap types (wt:sovra-1115)
-// S-02: No HashMap/HashSet — use sorted arrays for lookups.
-// Pure TypeScript — no Svelte, no DOM.
-
-/** 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 const TIER_COLORS: Record<OwnerTier, { fill: string; stroke: string; text: string }> = {
-  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: StorageNode[],
-  width: number,
-  height: number,
-  config: StorageMapConfig = {}
-): TreemapLayout {
-  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: TreemapCell[] = [];
-  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: number): string {
-  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/src/d0-data-viz/theme-integration.ts

@@ -1,134 +0,0 @@
-/**
- * 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 const CHECKPOINT_CSS_VARS: Record<CheckpointComponentType, string> = {
-  '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',
-} as const;
-
-/**
- * Human-readable labels for checkpoint color settings.
- * Use these in settings panel UI.
- */
-export const CHECKPOINT_COLOR_LABELS: Record<CheckpointComponentType, string> = {
-  'rust-crate': 'Rust Crate',
-  'ui-bundle': 'UI Bundle',
-  'config': 'Config File',
-  'faculty-state': 'Faculty State',
-  'substrate-binary': 'Substrate Binary',
-  'system-snapshot': 'Aggregate Snapshot',
-} as const;
-
-/**
- * Default colors for light and dark themes.
- * Used when themeStore hasn't applied custom values.
- */
-export const CHECKPOINT_DEFAULT_COLORS: Record<
-  CheckpointComponentType,
-  { light: string; dark: string }
-> = {
-  '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' },
-} as const;
-
-/**
- * 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: CheckpointComponentType,
-  isDark = true
-): string {
-  // 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' },
-  ],
-} as const;

package/src/d0-data-viz/types.ts

@@ -1,53 +0,0 @@
-// D0 Data Viz — Core Types
-// Pure TypeScript — no Svelte, no DOM dependencies
-
-// === Data Primitives ===
-
-export interface DataPoint {
-  label: string;
-  value: number;
-  color?: string;
-}
-
-export interface DataSeries {
-  id: string;
-  label: string;
-  data: DataPoint[];
-  color?: string;
-}
-
-// === Chart ===
-
-export interface ChartProps {
-  series: DataSeries[];
-  width?: number;
-  height?: number;
-}
-
-// === Metric Card ===
-
-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';
-}
-
-// === Timeline ===
-
-export interface TimelineEntry {
-  id: string;
-  timestamp: string;
-  label: string;
-  description?: string;
-  color?: string;
-  icon?: string;
-}
-
-export interface TimelineProps {
-  entries: TimelineEntry[];
-  orientation?: 'horizontal' | 'vertical';
-}

package/src/editor/index.ts

@@ -1,2 +0,0 @@
-export { default as MarkdownEditor } from './MarkdownEditor.svelte';
-export { default as CodeEditor } from './CodeEditor.svelte';