@stephen-netu/design-system 0.1.0 → 0.2.1

package/src/fabric/feedback/ToastContainer.svelte

@@ -1,122 +0,0 @@
-<script lang="ts">
-  /**
-   * ToastContainer - Fabric Component
-   * 
-   * Toast notification container with S-05 bounded display.
-   * Decoupled from shell stores - parent provides toasts array.
-   * 
-   * @package @kos/design-system/fabric/feedback
-   * @adr 2026-04-12-leap-substrate-refactor-001
-   */
-  import { fly, fade } from 'svelte/transition';
-  import { CheckCircle, XCircle, Info, AlertTriangle, X } from '@lucide/svelte';
-
-  export type ToastType = 'success' | 'error' | 'info' | 'warning';
-
-  interface Toast {
-    id: string;
-    message: string;
-    type: ToastType;
-  }
-
-  interface Props {
-    toasts: Toast[];
-    ondismiss: (id: string) => void;
-    /** S-05: Maximum visible toasts */
-    maxVisible?: number;
-  }
-
-  const props: Props = $props();
-
-  // S-05: Bound toasts to maxVisible (default 5)
-  const MAX_TOASTS = $derived(Math.min(props.toasts.length, props.maxVisible ?? 5));
-  const visibleToasts = $derived(props.toasts.slice(0, MAX_TOASTS));
-
-  const icons = {
-    success: CheckCircle,
-    error: XCircle,
-    info: Info,
-    warning: AlertTriangle,
-  };
-
-  const colors = {
-    success: '#27ae60',
-    error: '#c0392b',
-    info: '#2980b9',
-    warning: '#f39c12',
-  };
-</script>
-
-<div class="toast-container" role="region" aria-label="Notifications">
-  {#each visibleToasts as toast (toast.id)}
-    {@const Icon = icons[toast.type]}
-    <div
-      class="toast toast-{toast.type}"
-      style="--toast-color: {colors[toast.type]}"
-      transition:fly={{ y: 20, duration: 200 }}
-      role="alert"
-    >
-      <Icon size={20} />
-      <span class="message">{toast.message}</span>
-      <button class="dismiss" onclick={() => props.ondismiss(toast.id)} aria-label="Dismiss notification">
-        <X size={16} />
-      </button>
-    </div>
-  {/each}
-</div>
-
-<style>
-  .toast-container {
-    position: fixed;
-    bottom: 24px;
-    right: 24px;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    z-index: 9999;
-    pointer-events: none;
-  }
-
-  .toast {
-    pointer-events: auto;
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 12px 16px;
-    background: var(--color-bg-panel, #222222);
-    border: 1px solid var(--toast-color);
-    border-radius: var(--radius-lg, 0.5rem);
-    box-shadow: var(--shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.3));
-    min-width: 300px;
-    max-width: 500px;
-  }
-
-  .toast :global(svg) {
-    color: var(--toast-color);
-    flex-shrink: 0;
-  }
-
-  .message {
-    flex: 1;
-    color: var(--color-text-primary, #f2efe9);
-    font-size: 14px;
-  }
-
-  .dismiss {
-    background: none;
-    border: none;
-    color: var(--color-text-tertiary, #706858);
-    cursor: pointer;
-    padding: 4px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--radius-sm, 0.25rem);
-    transition: color 0.15s, background 0.15s;
-  }
-
-  .dismiss:hover {
-    color: var(--color-text-primary, #f2efe9);
-    background: rgba(255, 255, 255, 0.1);
-  }
-</style>

package/src/fabric/input/CommandBar.svelte

@@ -1,79 +0,0 @@
-<script lang="ts">
-  /**
-   * CommandBar - Fabric Component
-   * 
-   * Application header with vault selection and shortcuts.
-   * Decoupled from shell stores - uses props/callbacks for all state.
-   * 
-   * @package @kos/design-system/fabric/input
-   * @adr 2026-04-12-leap-substrate-refactor-001
-   */
-  interface Props {
-    /** App name to display */
-    appName: string;
-    /** Current mode/view label */
-    modeLabel?: string;
-    /** Callback when vault selector clicked */
-    onselectvault?: () => void;
-    /** Callback when keybind settings clicked */
-    onopenkeybindsettings?: () => void;
-  }
-
-  const props: Props = $props();
-</script>
-
-<header class="command-bar">
-  <span class="app-name">{props.appName}</span>
-  <div class="spacer"></div>
-  <button class="cmd-btn" onclick={props.onselectvault}>Select Vault</button>
-  <button class="cmd-btn" onclick={props.onopenkeybindsettings}>Shortcuts</button>
-  {#if props.modeLabel}
-    <span class="mode-label">{props.modeLabel}</span>
-  {/if}
-</header>
-
-<style>
-  .command-bar {
-    display: flex;
-    align-items: center;
-    height: 40px;
-    padding: 0 12px;
-    background: var(--color-bg-canvas, #1a1a1a);
-    border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
-    gap: 12px;
-  }
-
-  .app-name {
-    font-weight: 600;
-    color: var(--color-text-primary, #f2efe9);
-    font-size: 14px;
-  }
-
-  .spacer {
-    flex: 1;
-  }
-
-  .cmd-btn {
-    background: none;
-    border: none;
-    color: var(--color-text-secondary, #a09880);
-    cursor: pointer;
-    font-size: 13px;
-    padding: 4px 8px;
-    border-radius: var(--radius-sm, 0.25rem);
-    transition: color 0.15s, background 0.15s;
-  }
-
-  .cmd-btn:hover {
-    color: var(--color-text-primary, #f2efe9);
-    background: rgba(255, 255, 255, 0.05);
-  }
-
-  .mode-label {
-    font-size: 12px;
-    color: var(--color-text-tertiary, #706858);
-    padding: 2px 8px;
-    background: var(--color-bg-panel, #222222);
-    border-radius: var(--radius-sm, 0.25rem);
-  }
-</style>

package/src/fabric/layout/GlassBox.svelte

@@ -1,193 +0,0 @@
-<script lang="ts">
-  /**
-   * GlassBox - Fabric Component
-   * 
-   * A modal overlay for agent handoff scenarios.
-   * Decoupled from shell stores - uses props/callbacks for all state.
-   * 
-   * @package @kos/design-system/fabric/layout
-   * @adr 2026-04-12-leap-substrate-refactor-001
-   */
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    active: boolean;
-    reason: string | null;
-    taskId?: string | null;
-    description?: string;
-    ondone?: () => void;
-    onabandon?: () => void;
-    children?: Snippet;
-  }
-
-  const props : Props = $props();
-
-  function reasonLabel(r: string | null): string {
-    switch (r) {
-      case 'Captcha': return 'A CAPTCHA is blocking the agent.';
-      case 'AuthWall': return 'A login wall is blocking the agent.';
-      case 'PaymentRequired': return 'Payment is required to continue.';
-      case 'ConsentGate': return 'A consent or age gate is blocking the agent.';
-      case 'InteractiveForm': return props.description || 'An interactive form requires your input.';
-      default: return 'The agent needs your help to continue.';
-    }
-  }
-</script>
-
-{#if props.active}
-  <div class="glass-box-overlay" role="dialog" aria-modal="true" aria-label="Agent handoff required">
-    <div class="glass-box-panel">
-      <div class="glass-box-header">
-        <span class="glass-box-icon">⬡</span>
-        <span class="glass-box-title">Agent needs you</span>
-        {#if props.taskId}
-          <span class="glass-box-task-id">{props.taskId}</span>
-        {/if}
-      </div>
-
-      <p class="glass-box-reason">{reasonLabel(props.reason)}</p>
-
-      {#if props.description && props.reason !== 'InteractiveForm'}
-        <p class="glass-box-description">{props.description}</p>
-      {/if}
-
-      <div class="glass-box-viewport">
-        <!-- Browser interaction rendered here by parent -->
-        {@render props.children?.()}
-      </div>
-
-      <div class="glass-box-actions">
-        <button
-          class="glass-box-abandon"
-          onclick={() => props.onabandon?.()}
-        >
-          Abandon research
-        </button>
-        <button
-          class="glass-box-done"
-          onclick={() => props.ondone?.()}
-        >
-          Done — continue →
-        </button>
-      </div>
-    </div>
-  </div>
-{/if}
-
-<style>
-  .glass-box-overlay {
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.72);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 9000;
-    backdrop-filter: blur(4px);
-  }
-
-  .glass-box-panel {
-    width: min(720px, 90vw);
-    max-height: 80vh;
-    background: var(--color-bg-panel, #222222);
-    border: 1px solid var(--color-accent, #b87333);
-    border-radius: var(--radius-xl, 0.75rem);
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    box-shadow: 0 0 40px rgba(184, 115, 51, 0.2);
-  }
-
-  .glass-box-header {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 14px 18px;
-    border-bottom: 1px solid var(--border-default, #333333);
-    background: var(--color-bg-panel-elevated, #2a2a2a);
-  }
-
-  .glass-box-icon {
-    color: var(--color-accent, #b87333);
-    font-size: 16px;
-  }
-
-  .glass-box-title {
-    font-size: 14px;
-    font-weight: 600;
-    color: var(--color-text-primary, #f2efe9);
-    flex: 1;
-  }
-
-  .glass-box-task-id {
-    font-family: var(--font-mono, 'JetBrains Mono', monospace);
-    font-size: 11px;
-    color: var(--color-text-secondary, #a09880);
-    background: var(--color-bg-canvas, #1a1a1a);
-    padding: 2px 8px;
-    border-radius: var(--radius-sm, 0.25rem);
-  }
-
-  .glass-box-reason {
-    margin: 14px 18px 6px;
-    font-size: 13px;
-    color: var(--color-text-primary, #f2efe9);
-    line-height: 1.5;
-  }
-
-  .glass-box-description {
-    margin: 0 18px 14px;
-    font-size: 12px;
-    color: var(--color-text-secondary, #a09880);
-  }
-
-  .glass-box-viewport {
-    flex: 1;
-    overflow: auto;
-    margin: 0 18px;
-    background: var(--color-bg-canvas, #1a1a1a);
-    border: 1px solid var(--border-default, #333333);
-    border-radius: var(--radius-md, 0.375rem);
-    min-height: 200px;
-  }
-
-  .glass-box-actions {
-    display: flex;
-    justify-content: space-between;
-    padding: 14px 18px;
-    border-top: 1px solid var(--border-default, #333333);
-    gap: 10px;
-  }
-
-  .glass-box-abandon {
-    padding: 8px 16px;
-    background: transparent;
-    border: 1px solid var(--border-default, #444);
-    border-radius: var(--radius-md, 0.375rem);
-    color: var(--color-text-secondary, #a09880);
-    font-size: 13px;
-    cursor: pointer;
-    transition: border-color 0.15s, color 0.15s;
-  }
-
-  .glass-box-abandon:hover {
-    border-color: var(--color-error, #c0392b);
-    color: var(--color-error, #c0392b);
-  }
-
-  .glass-box-done {
-    padding: 8px 20px;
-    background: var(--color-accent, #b87333);
-    border: none;
-    border-radius: var(--radius-md, 0.375rem);
-    color: white;
-    font-size: 13px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: background 0.15s;
-  }
-
-  .glass-box-done:hover {
-    background: var(--color-accent-active, #8a5626);
-  }
-</style>

package/src/index.ts

@@ -1,68 +0,0 @@
-// LEAP Design System — HDA-organized frontend primitives
-// @kos/design-system
-
-// CSS imports
-import './base.css';
-import './p0-primitives/tokens/tokens.css';
-import './p0-primitives/tokens/control-room.css';
-import './n0-node-graph/n0-tokens.css';
-import './d0-data-viz/d0-tokens.css';
-import './n4-adaptive-manifold/n4-tokens.css';
-
-// B0 App Shell — Global LEAP chrome (CommandBar, intent dispatch, system state)
-// B = Base shell layer — free in both SOVEREIGN HDA and existing DS prefixes
-export * from './b0-app-shell';
-
-// P0 Primitives — Shared types, utilities, design tokens
-export * from './p0-primitives';
-
-// U0 Primitives — Atomic UI components
-export * from './u0-primitives';
-
-// L0 Layout — Layout compositions
-export * from './l0-layout';
-
-// S0 State — Store primitives (Svelte 5 runes)
-export * from './s0-state';
-
-// T0 Transport — Tauri IPC
-export * from './t0-transport';
-
-// F0 Forms — Form primitives
-export * from './f0-forms';
-
-// D0 Data Viz — Charts, metrics, timelines
-export * from './d0-data-viz';
-
-// N0 Node Graph — Visual composition primitives (SVG DAG, <100 nodes)
-export * from './n0-node-graph';
-
-// N1 Flow Canvas — Canvas 2D + ELK layout + BFS edge reveal (PS2 aesthetic)
-export * from './n1-flow-canvas';
-
-// N2 Manifold Disk — Poincaré disk projection, wraps N1
-export * from './n2-manifold-disk';
-
-// N3 Force Graph — Force-directed graph with health-aware rendering (force-graph)
-export * from './n3-force-graph';
-
-// N4 Adaptive Manifold — Unified topology-aware graph layout with classifier
-export * from './n4-adaptive-manifold';
-
-// Entity Graph View — SOVEREIGN entity graph visualization
-export * from './entity-graph-view';
-
-// Epistemic types
-export * from './epistemic';
-
-// Platform — cross-boundary protocols (HUD, etc.)
-export * from './platform';
-
-// Spatial — BSP zone tiling, force-directed layout, LOD rendering, snap-zoom camera
-export * from './spatial';
-
-// G0 Geo — Geospatial map primitives (SovereignMap)
-export * from './g0-geo';
-
-// X0 Enchanted Blocks — Adaptive spatial content with Pretext measurement
-export * from './x0-enchanted-blocks';

package/src/l0-layout/block-writer/block-writer-types.ts

@@ -1,63 +0,0 @@
-// BlockWriter — data model types
-// Pure TypeScript — no Svelte, no DOM.
-//
-// WritingPhase is intentionally a subset of Ryu FlowColumn.
-// Writing doesn't need WEED, CONSULT, or PRUNE — those are task-management phases.
-
-import type { BspNode } from '../../spatial/zone-tiler-types.js';
-export type { SplitDirection } from '../../spatial/zone-tiler-types.js';
-
-/** Writing lifecycle — subset of Ryu FlowColumn */
-export type WritingPhase = 'seed' | 'sprout' | 'go' | 'freeze' | 'compost';
-
-/** Block origin — local equivalent of CardOrigin (no cross-package import) */
-export type BlockOrigin = 'authored' | 'ingested' | 'sovereign';
-
-/** A single writing block */
-export interface WritingBlock {
-  id: string;
-  title: string;
-  content: string;
-  phase: WritingPhase;
-  tags: string[];
-  links: string[];
-  annotation?: string;
-  file_path?: string;
-  origin: BlockOrigin;
-  created_at: number;
-  last_edited_at: number;
-}
-
-/** Connection between two blocks */
-export interface BlockConnection {
-  fromId: string;
-  toId: string;
-  label?: string;
-}
-
-/** Full schema — controlled state passed to BlockWriter */
-export interface BlockWriterSchema {
-  blocks: WritingBlock[];
-  bspTree: BspNode;
-  connections: BlockConnection[];
-  focusedBlockId: string;
-}
-
-/** BlockWriter configuration */
-export interface BlockWriterConfig {
-  /** Min block height in px. Default 80. */
-  minBlockHeight?: number;
-  /** Divider thickness in px. Default 6. (passed to ZoneTiler) */
-  dividerThickness?: number;
-  /** Allow horizontal splits (side-by-side blocks). Default true. */
-  allowHorizontalSplit?: boolean;
-}
-
-/** Phase display config — maps to Badge color variant */
-export const PHASE_CONFIG: Record<WritingPhase, { label: string; color: 'warning' | 'info' | 'success' | 'accent' | 'neutral' }> = {
-  seed:    { label: 'Seed',    color: 'warning' },
-  sprout:  { label: 'Sprout',  color: 'info' },
-  go:      { label: 'Go',      color: 'success' },
-  freeze:  { label: 'Freeze',  color: 'accent' },
-  compost: { label: 'Compost', color: 'neutral' },
-};

package/src/l0-layout/block-writer/markdown.ts

@@ -1,110 +0,0 @@
-// BlockWriter — shared regex markdown renderer
-// Unified from DeskViewport.svelte (lines 60-92) and Atelier's MarkdownWithProvenance.svelte (lines 15-85).
-// Zero dependencies — pure regex transforms.
-//
-// DeskViewport adds: ~~del~~, [[wikilink]] support, * and _ emphasis
-// Atelier adds: proper <li>/<ul> grouping, <p> wrapping for paragraphs
-// Both: headings, blockquotes, hr, inline code/bold/italic
-
-/** Escape all 5 HTML entities. Atelier's version (full) merged with DeskViewport's (3-char). */
-function escapeHtml(text: string): string {
-  return text
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#039;');
-}
-
-/** Inline markdown — bold, italic, del, code, wikilinks. Input is pre-escaped. */
-function renderInline(text: string): string {
-  return text
-    .replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>')
-    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
-    .replace(/\*([^*<\n]{1,200})\*/g, '<em>$1</em>')
-    .replace(/__(.+?)__/g, '<strong>$1</strong>')
-    .replace(/_([^_<\n]{1,200})_/g, '<em>$1</em>')
-    .replace(/~~(.+?)~~/g, '<del>$1</del>')
-    .replace(/`([^`]{1,200})`/g, '<code class="md-code">$1</code>')
-    .replace(/\[\[([^\]|]{1,100})\|([^\]]{1,100})\]\]/g, '<span class="md-wiki">$2</span>')
-    .replace(/\[\[([^\]]{1,100})\]\]/g, '<span class="md-wiki">$1</span>');
-}
-
-/**
- * Render markdown to HTML string.
- * Handles: headings (h1-h6), unordered lists, ordered lists, blockquotes, hr,
- * inline code/bold/italic/del/wikilinks.
- *
- * Input is treated as untrusted — all HTML entities are escaped before processing.
- * Output is safe for {@html} without additional sanitization.
- */
-export function renderMarkdown(md: string): string {
-  if (!md) return '';
-
-  const lines = md.split('\n');
-  const processed: string[] = [];
-
-  for (const line of lines) {
-    const escaped = escapeHtml(line);
-
-    // Headings
-    const hm = escaped.match(/^(#{1,6}) (.+)$/);
-    if (hm) {
-      processed.push(`<h${hm[1].length} class="md-h md-h${hm[1].length}">${renderInline(hm[2])}</h${hm[1].length}>`);
-      continue;
-    }
-
-    // Unordered list items
-    const ul = escaped.match(/^[-*+] (.+)$/);
-    if (ul) {
-      processed.push(`<li class="md-li">${renderInline(ul[1])}</li>`);
-      continue;
-    }
-
-    // Ordered list items
-    const ol = escaped.match(/^(\d+)\. (.+)$/);
-    if (ol) {
-      processed.push(`<li class="md-li">${renderInline(ol[2])}</li>`);
-      continue;
-    }
-
-    // Blockquotes
-    const bq = escaped.match(/^> (.+)$/);
-    if (bq) {
-      processed.push(`<blockquote class="md-bq">${renderInline(bq[1])}</blockquote>`);
-      continue;
-    }
-
-    // Horizontal rule
-    if (/^[-*]{3,}$/.test(escaped.trim())) {
-      processed.push('<hr class="md-hr">');
-      continue;
-    }
-
-    // Empty line
-    if (escaped.trim() === '') {
-      processed.push('<div class="md-gap"></div>');
-      continue;
-    }
-
-    // Default: paragraph
-    processed.push(`<p class="md-p">${renderInline(escaped)}</p>`);
-  }
-
-  // Group consecutive <li> elements into <ul> (Atelier pattern)
-  let result = processed.join('\n');
-  result = result.replace(/(<li class="md-li">.*?<\/li>\n?)+/g, (match) => {
-    return `<ul class="md-ul">${match}</ul>`;
-  });
-
-  return result;
-}
-
-/**
- * Render inline-only markdown (no block elements).
- * Useful for single-line content like block titles, annotations, tooltips.
- * Input is treated as untrusted.
- */
-export function renderInlineMarkdown(text: string): string {
-  return renderInline(escapeHtml(text));
-}

package/src/l0-layout/grove/grove-types.ts

@@ -1,29 +0,0 @@
-// Grove & Accord domain types for the LEAP design system
-
-export type TrustState = 'provisional' | 'trusted' | 'vouched' | 'banned';
-
-export type GovernanceMode = 'leader' | 'peer' | 'role_based';
-
-export interface MemberInfo {
-  realmId: string;
-  name: string;
-  trustState: TrustState;
-  isCoordinator: boolean;
-}
-
-export interface GroveInfo {
-  groveId: string;
-  governance: GovernanceMode;
-  memberCount: number;
-  coordinatorName?: string;
-  isJoined: boolean;
-  epoch: number;
-}
-
-export interface AccordInfo {
-  accordId: string;
-  domains: string[];
-  participantCount: number;
-  expiresAt: number;
-  groveId?: string;
-}

package/src/n0-node-graph/node-port-types.ts

@@ -1,19 +0,0 @@
-// N0 Node Graph — Port interaction types
-// Extracted from NodePort.svelte so tsc can resolve them without Svelte type declarations.
-
-import type { PortDirection } from './types';
-
-export interface PortDragDetail {
-  nodeId: string;
-  portId: string;
-  direction: PortDirection;
-  type: string;
-  position: { x: number; y: number };
-}
-
-export interface PortDropDetail {
-  nodeId: string;
-  portId: string;
-  direction: PortDirection;
-  type: string;
-}