@stephen-netu/design-system 0.1.0 → 0.2.0

package/src/spatial/zone-tiler-types.ts

@@ -1,177 +0,0 @@
-// ZoneTiler — BSP tree zone layout types
-// S-02: No HashMap/HashSet — use sorted arrays for zone lookup.
-// Pure TypeScript — no Svelte, no DOM.
-
-/** Privacy state matching Rust SealState enum */
-export type PrivacyState = 'ouvert' | 'scelle';
-
-/** Leaf node — a visible zone */
-export interface ZoneLeaf {
-  kind: 'leaf';
-  id: string;
-  label: string;
-  /** Optional tint for zone background. Ouvert zones derive color from content; Scelle uses fixed hazard treatment. */
-  colorTint?: string;
-  privacyState: PrivacyState;
-}
-
-/** Split direction */
-export type SplitDirection = 'horizontal' | 'vertical';
-
-/** Internal split node — divides space into two children */
-export interface ZoneSplit {
-  kind: 'split';
-  direction: SplitDirection;
-  /** Divider position as fraction (0–1) of parent dimension */
-  ratio: number;
-  first: BspNode;
-  second: BspNode;
-}
-
-/** A BSP tree node: either a leaf zone or a split */
-export type BspNode = ZoneLeaf | ZoneSplit;
-
-/** Computed zone rectangle (absolute pixel coords within container) */
-export interface ZoneRect {
-  id: string;
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  zone: ZoneLeaf;
-}
-
-/** Computed divider rectangle for hit-testing and rendering */
-export interface DividerRect {
-  /** Path from root to this split (for identity) */
-  path: string;
-  direction: SplitDirection;
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  /** Reference to parent split for ratio mutation */
-  splitRef: ZoneSplit;
-}
-
-/** ZoneTiler configuration */
-export interface ZoneTilerConfig {
-  /** Minimum zone dimension in px. Default 120. */
-  minZoneSize?: number;
-  /** Divider thickness in px. Default 6. */
-  dividerThickness?: number;
-  /** Divider hit-area expansion in px (each side). Default 4. */
-  dividerHitExpand?: number;
-}
-
-// ── BSP utilities ──────────────────────────────────────────────────────────
-
-/** Flatten a BSP tree into leaf zones with computed rectangles */
-export function flattenBsp(
-  node: BspNode,
-  x: number,
-  y: number,
-  w: number,
-  h: number,
-  dividerThickness: number
-): { zones: ZoneRect[]; dividers: DividerRect[] } {
-  if (node.kind === 'leaf') {
-    return {
-      zones: [{ id: node.id, x, y, width: w, height: h, zone: node }],
-      dividers: [],
-    };
-  }
-
-  const dt = dividerThickness;
-  const { direction, ratio, first, second } = node;
-
-  let firstRect: { x: number; y: number; w: number; h: number };
-  let secondRect: { x: number; y: number; w: number; h: number };
-  let divider: DividerRect;
-
-  if (direction === 'horizontal') {
-    // Split left/right
-    const splitX = x + (w - dt) * ratio;
-    firstRect = { x, y, w: splitX - x, h };
-    secondRect = { x: splitX + dt, y, w: x + w - splitX - dt, h };
-    divider = {
-      path: `${x},${y}:h:${ratio.toFixed(4)}`,
-      direction,
-      x: splitX,
-      y,
-      width: dt,
-      height: h,
-      splitRef: node,
-    };
-  } else {
-    // Split top/bottom
-    const splitY = y + (h - dt) * ratio;
-    firstRect = { x, y, w, h: splitY - y };
-    secondRect = { x, y: splitY + dt, w, h: y + h - splitY - dt };
-    divider = {
-      path: `${x},${y}:v:${ratio.toFixed(4)}`,
-      direction,
-      x,
-      y: splitY,
-      width: w,
-      height: dt,
-      splitRef: node,
-    };
-  }
-
-  const a = flattenBsp(first, firstRect.x, firstRect.y, firstRect.w, firstRect.h, dt);
-  const b = flattenBsp(second, secondRect.x, secondRect.y, secondRect.w, secondRect.h, dt);
-
-  return {
-    zones: [...a.zones, ...b.zones],
-    dividers: [divider, ...a.dividers, ...b.dividers],
-  };
-}
-
-/** Find a zone leaf by id in the BSP tree */
-export function findZone(node: BspNode, id: string): ZoneLeaf | null {
-  if (node.kind === 'leaf') return node.id === id ? node : null;
-  return findZone(node.first, id) ?? findZone(node.second, id);
-}
-
-/** Create a default single-zone BSP tree */
-export function createDefaultBsp(id = 'main', label = 'Main'): ZoneLeaf {
-  return { kind: 'leaf', id, label, privacyState: 'ouvert' };
-}
-
-/** Split a leaf zone into two zones. Returns a new BSP tree (immutable). */
-export function splitZone(
-  root: BspNode,
-  targetId: string,
-  direction: SplitDirection,
-  newZone: ZoneLeaf,
-  ratio = 0.5
-): BspNode {
-  if (root.kind === 'leaf') {
-    if (root.id === targetId) {
-      return {
-        kind: 'split',
-        direction,
-        ratio,
-        first: root,
-        second: newZone,
-      };
-    }
-    return root;
-  }
-  return {
-    ...root,
-    first: splitZone(root.first, targetId, direction, newZone, ratio),
-    second: splitZone(root.second, targetId, direction, newZone, ratio),
-  };
-}
-
-/** Serialize BSP tree to JSON (for desk persistence) */
-export function serializeBsp(node: BspNode): string {
-  return JSON.stringify(node);
-}
-
-/** Deserialize BSP tree from JSON */
-export function deserializeBsp(json: string): BspNode {
-  return JSON.parse(json) as BspNode;
-}

package/src/t0-transport/connection.ts

@@ -1,34 +0,0 @@
-// Connection status tracking
-
-export type ConnectionState = 'connecting' | 'connected' | 'disconnected' | 'error';
-
-export interface ConnectionTracker {
-  readonly state: ConnectionState;
-  subscribe(fn: (state: ConnectionState) => void): () => void;
-  setState(state: ConnectionState): void;
-}
-
-/**
- * Track connection status to Tauri backend
- */
-export function createConnectionTracker(): ConnectionTracker {
-  let state = $state<ConnectionState>('disconnected');
-  const subscribers = new Set<(state: ConnectionState) => void>();
-
-  function setState(newState: ConnectionState) {
-    state = newState;
-    subscribers.forEach(fn => fn(state));
-  }
-
-  function subscribe(fn: (state: ConnectionState) => void) {
-    subscribers.add(fn);
-    fn(state);
-    return () => subscribers.delete(fn);
-  }
-
-  return {
-    get state() { return state; },
-    setState,
-    subscribe,
-  };
-}

package/src/t0-transport/error.ts

@@ -1,37 +0,0 @@
-// Transport error types
-
-export enum TransportErrorCode {
-  InvokeFailed = 'INVOKE_FAILED',
-  ConnectionLost = 'CONNECTION_LOST',
-  Timeout = 'TIMEOUT',
-  NotAvailable = 'NOT_AVAILABLE',
-}
-
-export class TransportError extends Error {
-  constructor(
-    public code: TransportErrorCode,
-    message: string,
-    public original?: unknown
-  ) {
-    super(message);
-    this.name = 'TransportError';
-  }
-}
-
-export function toTransportError(error: unknown): TransportError {
-  if (error instanceof TransportError) {
-    return error;
-  }
-
-  const message = error instanceof Error ? error.message : String(error);
-
-  if (message.includes('timeout') || message.includes('Timeout')) {
-    return new TransportError(TransportErrorCode.Timeout, message, error);
-  }
-
-  if (message.includes('connection') || message.includes('Connection')) {
-    return new TransportError(TransportErrorCode.ConnectionLost, message, error);
-  }
-
-  return new TransportError(TransportErrorCode.InvokeFailed, message, error);
-}

package/src/t0-transport/events.ts

@@ -1,50 +0,0 @@
-// Event bus utilities for Tauri event streams
-
-import { listen, emit as tauriEmit, type UnlistenFn } from '@tauri-apps/api/event';
-
-export interface EventBusOptions {
-  debug?: boolean;
-}
-
-export interface EventBus {
-  on<T>(event: string, handler: (payload: T) => void): Promise<() => void>;
-  once<T>(event: string, handler: (payload: T) => void): Promise<() => void>;
-  emit<T>(event: string, payload?: T): Promise<void>;
-}
-
-/**
- * Create an event bus for Tauri events
- */
-export function createEventBus(options?: EventBusOptions): EventBus {
-  const debug = options?.debug ?? false;
-
-  async function on<T>(
-    event: string,
-    handler: (payload: T) => void
-  ): Promise<() => void> {
-    const unlisten = await listen<T>(event, (e) => {
-      if (debug) console.log(`[event] ${event}:`, e.payload);
-      handler(e.payload);
-    });
-    return unlisten;
-  }
-
-  async function once<T>(
-    event: string,
-    handler: (payload: T) => void
-  ): Promise<() => void> {
-    const unlisten = await listen<T>(event, (e) => {
-      if (debug) console.log(`[event] ${event} (once):`, e.payload);
-      handler(e.payload);
-      unlisten();
-    });
-    return unlisten;
-  }
-
-  async function emit<T>(event: string, payload?: T): Promise<void> {
-    if (debug) console.log('[event] emit %s:', event, payload);
-    await tauriEmit(event, payload);
-  }
-
-  return { on, once, emit };
-}

package/src/t0-transport/index.ts

@@ -1,6 +0,0 @@
-// T0 Transport — Tauri IPC primitives
-
-export { invoke } from './invoke';
-export { createEventBus, type EventBus } from './events';
-export { TransportError, TransportErrorCode } from './error';
-export { createConnectionTracker, type ConnectionState } from './connection';

package/src/t0-transport/invoke.ts

@@ -1,30 +0,0 @@
-// Type-safe invoke wrapper for Tauri commands
-
-import { invoke as tauriInvoke } from '@tauri-apps/api/core';
-
-export interface CommandDefinition<T = unknown, R = unknown> {
-  name: string;
-  payload?: T;
-  response?: R;
-}
-
-/**
- * Invoke a Tauri command with type safety
- */
-export async function invoke<R, T extends Record<string, unknown> = Record<string, unknown>>(
-  command: string,
-  payload?: T
-): Promise<R> {
-  try {
-    return await tauriInvoke<R>(command, payload ? { ...payload } : undefined);
-  } catch (error) {
-    throw new Error(`Invoke failed: ${command} — ${error}`);
-  }
-}
-
-/**
- * Check if running in Tauri environment
- */
-export function isTauri(): boolean {
-  return typeof window !== 'undefined' && '__TAURI__' in window;
-}

package/src/u0-primitives/allay-gauge/AllayGauge.svelte

@@ -1,90 +0,0 @@
-<script lang="ts">
-  import type { AllayStageView } from '../../epistemic/types.js';
-
-  interface Props {
-    stage: 0 | 1 | 2 | 3 | 4 | 5;
-    confidence: number;           // 0.0–1.0, shown as % on hover
-    showLabel?: boolean;
-    size?: 'sm' | 'md' | 'lg';
-    class?: string;
-  }
-
-  let {
-    stage,
-    confidence,
-    showLabel = false,
-    size = 'md',
-    class: className = '',
-  }: Props = $props();
-
-  // Stage metadata
-  const STAGE_NAMES = ['Propose', 'Parse', 'Authorize', 'Execute', 'Trace', 'Replicate'];
-  const STAGE_VARS = [
-    'var(--epistemic-stage-0)',
-    'var(--epistemic-stage-1)',
-    'var(--epistemic-stage-2)',
-    'var(--epistemic-stage-3)',
-    'var(--epistemic-stage-4)',
-    'var(--epistemic-stage-5)',
-  ];
-
-  const stageName = $derived(STAGE_NAMES[stage] ?? 'Unknown');
-  const stageColor = $derived(stage > 0 ? STAGE_VARS[stage] : STAGE_VARS[0]);
-  const confidencePct = $derived(`${Math.round(confidence * 100)}%`);
-  const tooltipText = $derived(`${stageName} (${confidencePct})`);
-
-  // 5 segments, indices 0-4; segment i is filled when stage > i
-  const segments = [0, 1, 2, 3, 4];
-</script>
-
-<div
-  class="ds-allay-gauge size-{size} {className}"
-  title={tooltipText}
-  aria-label="Allay verification: {stageName}, {confidencePct}"
-  role="img"
->
-  <div class="segments">
-    {#each segments as i}
-      <div
-        class="segment"
-        class:filled={stage > i}
-        style={stage > i ? `background-color: ${stageColor};` + (stage === 5 ? ` box-shadow: 0 0 3px var(--epistemic-stage-5-glow);` : '') : ''}
-      ></div>
-    {/each}
-  </div>
-  {#if showLabel}
-    <span class="stage-label">{stageName}</span>
-  {/if}
-</div>
-
-<style>
-  .ds-allay-gauge {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--space-2);
-    cursor: default;
-  }
-
-  .segments {
-    display: flex;
-    gap: 2px;
-  }
-
-  .segment {
-    border-radius: var(--radius-xs, 2px);
-    background-color: var(--color-bg-panel-elevated, #2a2a2a);
-    border: 1px solid var(--border-subtle);
-    transition: background-color 200ms;
-  }
-
-  /* Size variants */
-  .size-sm .segment { width: 6px; height: 10px; }
-  .size-md .segment { width: 8px; height: 14px; }
-  .size-lg .segment { width: 12px; height: 20px; }
-
-  .stage-label {
-    font-family: var(--font-sans);
-    font-size: var(--text-xs);
-    color: var(--color-text-secondary);
-  }
-</style>

package/src/u0-primitives/allay-gauge/index.ts

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

package/src/u0-primitives/animated-icon/index.ts

@@ -1,31 +0,0 @@
-// AnimatedIcon - SMIL-based animated SVG icons
-// Zero JS overhead, GPU-accelerated declarative animations
-
-export { default as AnimatedIcon } from './AnimatedIcon.svelte';
-
-// Type exports for consumers
-export type AnimatedIconName = 
-  | 'power-node' 
-  | 'activity' 
-  | 'connection' 
-  | 'status-ring'
-  | 'power-plant'
-  | 'orbital-ring'
-  | 'steam-tower'
-  | 'energy-pulse';
-  
-export type AnimationType = 
-  | 'pulse' 
-  | 'orbit' 
-  | 'wave' 
-  | 'breathe' 
-  | 'spin'
-  | 'steam'
-  | 'energy-arcs';
-
-// Animation duration presets (ms)
-export const ANIMATION_SPEEDS = {
-  slow: 0.5,      // 2x duration
-  normal: 1,      // base duration
-  fast: 2,        // 0.5x duration
-} as const;

package/src/u0-primitives/assay-badge/AssayBadge.svelte

@@ -1,121 +0,0 @@
-<script lang="ts">
-  import type { AssayClearanceView } from '../../epistemic/types.js';
-
-  interface Props {
-    clearance: AssayClearanceView | null;
-    size?: 'sm' | 'md';
-    interactive?: boolean;
-    onclick?: () => void;
-    class?: string;
-  }
-
-  let {
-    clearance,
-    size = 'md',
-    interactive = false,
-    onclick,
-    class: className = '',
-  }: Props = $props();
-
-  // Derive display state from clearance
-  const state = $derived(
-    clearance === null ? 'pending' :
-    clearance.isDegraded ? 'degraded' :
-    clearance.gate === 'Cleared' ? 'cleared' : 'blocked'
-  );
-
-  const dotColor = $derived(
-    state === 'cleared'  ? 'var(--epistemic-cleared)' :
-    state === 'blocked'  ? 'var(--epistemic-blocked)' :
-    state === 'degraded' ? 'var(--epistemic-degraded)' :
-    /* pending */          'var(--epistemic-pending)'
-  );
-
-  const label = $derived(
-    state === 'cleared'  ? 'Cleared' :
-    state === 'blocked'  ? 'Blocked' :
-    state === 'degraded' ? 'Degraded' :
-    'Pending'
-  );
-
-  const title = $derived(
-    clearance === null ? 'ASSAY: Not yet evaluated' :
-    `ASSAY ${label} at ${clearance.checkpoint} — weighted: ${clearance.weightedSum.toFixed(2)}`
-  );
-
-  function handleClick() {
-    if (interactive && onclick) onclick();
-  }
-</script>
-
-<button
-  class="ds-assay-badge size-{size} state-{state} {className}"
-  class:interactive
-  {title}
-  onclick={handleClick}
-  type="button"
-  aria-label="ASSAY clearance: {label}"
-  tabindex={interactive ? 0 : -1}
->
-  <span class="dot" style="background-color: {dotColor}; box-shadow: 0 0 4px {dotColor};"></span>
-  {#if size === 'md'}
-    <span class="label">{label}</span>
-  {/if}
-</button>
-
-<style>
-  .ds-assay-badge {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--space-1);
-    padding: var(--space-1) var(--space-2);
-    border-radius: var(--radius-full);
-    border: 1px solid var(--border-subtle);
-    background: transparent;
-    cursor: default;
-    font-family: var(--font-sans);
-    font-size: var(--text-xs);
-    font-weight: 500;
-    color: var(--color-text-secondary);
-    white-space: nowrap;
-    transition: background var(--transition-fast, 120ms), border-color var(--transition-fast, 120ms);
-  }
-
-  .ds-assay-badge.interactive {
-    cursor: pointer;
-  }
-
-  .ds-assay-badge.interactive:hover {
-    background: var(--color-bg-panel-elevated);
-    border-color: var(--border-hover);
-  }
-
-  .ds-assay-badge.size-sm {
-    padding: 2px;
-    border: none;
-    background: transparent;
-  }
-
-  .dot {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    flex-shrink: 0;
-  }
-
-  .size-sm .dot {
-    width: 6px;
-    height: 6px;
-  }
-
-  .label {
-    font-size: var(--text-xs);
-    color: var(--color-text-secondary);
-  }
-
-  /* State-specific label colors */
-  .state-cleared .label { color: var(--epistemic-cleared); }
-  .state-blocked .label  { color: var(--epistemic-blocked); }
-  .state-pending .label  { color: var(--epistemic-pending); }
-  .state-degraded .label { color: var(--epistemic-degraded); }
-</style>

package/src/u0-primitives/assay-badge/AssaySignalBar.svelte

@@ -1,83 +0,0 @@
-<script lang="ts">
-  import type { AssaySignalView } from '../../epistemic/types.js';
-
-  interface Props {
-    signal: AssaySignalView;
-    class?: string;
-  }
-
-  let { signal, class: className = '' }: Props = $props();
-
-  const resultColor = $derived(
-    signal.result === 'Pass' ? 'var(--epistemic-cleared)' :
-    signal.result === 'Fail' ? 'var(--epistemic-blocked)' :
-    'var(--epistemic-degraded)'
-  );
-
-  const confidenceStr = $derived(
-    signal.confidence !== null ? `${Math.round(signal.confidence * 100)}%` : '—'
-  );
-</script>
-
-<div class="signal-bar {className}" class:hard-gate={signal.isHardGate}>
-  <span class="signal-indicator" style="color: {resultColor}">
-    {signal.isHardGate ? '■' : '□'}
-  </span>
-  <span class="signal-id">{signal.id}</span>
-  <span class="signal-result" style="color: {resultColor}">
-    {signal.result === 'Unavailable' ? 'unavail' : signal.result}
-  </span>
-  <span class="signal-confidence">{confidenceStr}</span>
-  {#if signal.result === 'Fail' && signal.reason}
-    <span class="signal-reason">{signal.reason}</span>
-  {/if}
-</div>
-
-<style>
-  .signal-bar {
-    display: grid;
-    grid-template-columns: 1.2rem 1fr auto auto;
-    align-items: center;
-    gap: var(--space-2);
-    padding: var(--space-1) 0;
-    font-family: var(--font-mono);
-    font-size: var(--text-xs);
-    color: var(--color-text-secondary);
-  }
-
-  .signal-bar:not(:last-child) {
-    border-bottom: 1px solid var(--border-subtle);
-  }
-
-  .signal-indicator {
-    font-size: var(--text-sm);
-    flex-shrink: 0;
-  }
-
-  .signal-id {
-    color: var(--color-text-primary);
-    font-size: var(--text-xs);
-  }
-
-  .signal-result {
-    font-weight: 600;
-    font-size: var(--text-xs);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-  }
-
-  .signal-confidence {
-    color: var(--color-text-tertiary);
-    font-size: var(--text-xs);
-    min-width: 3rem;
-    text-align: right;
-  }
-
-  .signal-reason {
-    grid-column: 2 / -1;
-    color: var(--epistemic-blocked);
-    font-size: var(--text-xs);
-    font-style: italic;
-    padding-top: var(--space-1);
-  }
-</style>

package/src/u0-primitives/assay-badge/index.ts

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