@stephen-netu/design-system 0.1.0

package/src/p0-primitives/tokens/tokens.css

@@ -0,0 +1,140 @@
+/* @kos/design-system — canonical design tokens
+   Source of truth for all CSS custom properties.
+   All LEAP apps consume these via `import '@kos/design-system'`.
+   Palette: brass/copper dark theme. NEVER blue as primary. */
+
+:root {
+  /* --- Backgrounds --- */
+  --color-bg-app: #141414;
+  --color-bg-canvas: #1a1a1a;
+  --color-bg-panel: #222222;
+  --color-bg-panel-elevated: #2a2a2a;
+  --color-card-bg: #252525;
+  --color-card-bg-warm: #2a2520;
+  --color-card-bg-cool: #202528;
+
+  /* --- Text --- */
+  --color-text-primary: #f2efe9;
+  --color-text-secondary: #a09880;
+  --color-text-tertiary: #706858;
+  --color-text-muted: #5a5245;
+  --color-text-inverse: #141414;
+  --color-card-text-primary: #e8e0d0;
+  --color-card-text-secondary: #a09880;
+  --color-card-text-tertiary: #706858;
+
+  /* --- Accent (brass/copper) --- */
+  --color-accent: #b87333;
+  --color-accent-hover: #d4956a;
+  --color-accent-active: #8a5626;
+  --color-accent-glow: rgba(184, 115, 51, 0.3);
+  --color-accent-muted: rgba(184, 115, 51, 0.2);
+  --color-accent-subtle: rgba(184, 115, 51, 0.15);
+  --color-accent-faint: rgba(184, 115, 51, 0.08);
+  --color-accent-amber: #d4956a;
+  --color-accent-copper: #b87333;
+  --color-accent-rust: #8a5626;
+  --color-accent-sage: #6b8a6b;
+
+  /* --- Status --- */
+  --color-success: #27ae60;
+  --color-warning: #f39c12;
+  --color-error: #c0392b;
+  --color-info: #2980b9;
+
+  /* --- Semantic (presence) --- */
+  --color-online: #4ade80;
+  --color-offline: #6b7280;
+  --color-away: #fbbf24;
+  --color-busy: #ef4444;
+  --color-typing: #fbbf24;
+
+  /* --- Epistemic (ASSAY clearance states) --- */
+  --epistemic-cleared: #27ae60;            /* green — matches --color-success */
+  --epistemic-cleared-glow: rgba(39, 174, 96, 0.2);
+  --epistemic-blocked: #c0392b;            /* red — matches --color-error */
+  --epistemic-blocked-glow: rgba(192, 57, 43, 0.2);
+  --epistemic-pending: #f39c12;            /* amber — matches --color-warning */
+  --epistemic-pending-glow: rgba(243, 156, 18, 0.2);
+  --epistemic-degraded: #6b7280;           /* grey */
+  --epistemic-degraded-glow: rgba(107, 114, 128, 0.15);
+
+  /* --- Allay stages (0=grey → 5=gold) --- */
+  --epistemic-stage-0: #4a4a4a;            /* Propose — dark grey */
+  --epistemic-stage-1: #6b7280;            /* Parse — muted grey */
+  --epistemic-stage-2: #d4956a;            /* Authorize — amber (--color-accent-amber) */
+  --epistemic-stage-3: #b87333;            /* Execute — copper (--color-accent-copper) */
+  --epistemic-stage-4: #c9973a;            /* Trace — brass */
+  --epistemic-stage-5: #d4a843;            /* Replicate — gold */
+  --epistemic-stage-5-glow: rgba(212, 168, 67, 0.25);
+
+  /* --- Expert identity colors --- */
+  --expert-atelier: #b87333;               /* copper — knowledge surfaces */
+  --expert-agora: #6b8a6b;                 /* sage — communication (--color-accent-sage) */
+  --expert-ryu: #d4956a;                   /* amber — task execution (--color-accent-amber) */
+  --expert-sovereign: #c9973a;             /* brass — kernel */
+  --expert-agent: #2980b9;                 /* info — agent (--color-info) */
+
+  /* --- Borders --- */
+  --border-subtle: rgba(255, 255, 255, 0.06);
+  --border-default: #333333;
+  --border-hover: #444444;
+  --border-focus: #b87333;
+  --divider-color: #2a2a2a;
+
+  /* --- Grid (canvas patterns) --- */
+  --grid-line: rgba(184, 115, 51, 0.06);
+  --grid-dot: rgba(184, 115, 51, 0.12);
+
+  /* --- Typography --- */
+  --font-sans: 'Outfit', system-ui, -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
+  --font-serif: 'Crimson Pro', Georgia, serif;
+
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --text-3xl: 1.875rem;
+  --text-4xl: 2.25rem;
+
+  /* --- Spacing --- */
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
+  --space-16: 4rem;
+
+  /* --- Border radius --- */
+  --radius-xs: 0.125rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-full: 9999px;
+
+  /* --- Shadows --- */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
+  --shadow-glow: 0 0 15px rgba(184, 115, 51, 0.15);
+  --shadow-glow-lg: 0 0 30px rgba(184, 115, 51, 0.25);
+  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);
+  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3);
+  --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.4);
+
+  /* --- Transitions --- */
+  --transition-fast: 120ms ease;
+  --transition-normal: 200ms ease;
+  --transition-slow: 350ms ease;
+  --transition-bounce: 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
+}

package/src/p0-primitives/tokens/tokens.json

@@ -0,0 +1,132 @@
+{
+  "colors": {
+    "core": {
+      "bgApp": "var(--color-bg-app)",
+      "bgCanvas": "var(--color-bg-canvas)",
+      "bgPanel": "var(--color-bg-panel)",
+      "bgPanelElevated": "var(--color-bg-panel-elevated)",
+      "cardBg": "var(--color-card-bg)",
+      "cardBgWarm": "var(--color-card-bg-warm)",
+      "cardBgCool": "var(--color-card-bg-cool)"
+    },
+    "text": {
+      "primary": "var(--color-text-primary)",
+      "secondary": "var(--color-text-secondary)",
+      "tertiary": "var(--color-text-tertiary)",
+      "muted": "var(--color-text-muted)",
+      "inverse": "var(--color-text-inverse)",
+      "cardPrimary": "var(--color-card-text-primary)",
+      "cardSecondary": "var(--color-card-text-secondary)",
+      "cardTertiary": "var(--color-card-text-tertiary)"
+    },
+    "accent": {
+      "primary": "var(--color-accent)",
+      "hover": "var(--color-accent-hover)",
+      "active": "var(--color-accent-active)",
+      "glow": "var(--color-accent-glow)",
+      "subtle": "var(--color-accent-subtle)",
+      "amber": "var(--color-accent-amber)",
+      "copper": "var(--color-accent-copper)",
+      "rust": "var(--color-accent-rust)",
+      "sage": "var(--color-accent-sage)"
+    },
+    "status": {
+      "success": "var(--color-success)",
+      "warning": "var(--color-warning)",
+      "error": "var(--color-error)",
+      "info": "var(--color-info)"
+    },
+    "semantic": {
+      "online": "var(--color-online)",
+      "offline": "var(--color-offline)",
+      "away": "var(--color-away)",
+      "busy": "var(--color-busy)",
+      "typing": "var(--color-typing)"
+    },
+    "border": {
+      "subtle": "var(--border-subtle)",
+      "default": "var(--border-default)",
+      "hover": "var(--border-hover)",
+      "focus": "var(--border-focus)",
+      "divider": "var(--divider-color)"
+    }
+  },
+  "typography": {
+    "fonts": {
+      "sans": "var(--font-sans)",
+      "mono": "var(--font-mono)",
+      "serif": "var(--font-serif)"
+    },
+    "scale": {
+      "xs": "var(--text-xs)",
+      "sm": "var(--text-sm)",
+      "base": "var(--text-base)",
+      "lg": "var(--text-lg)",
+      "xl": "var(--text-xl)",
+      "2xl": "var(--text-2xl)",
+      "3xl": "var(--text-3xl)",
+      "4xl": "var(--text-4xl)"
+    }
+  },
+  "spacing": {
+    "1": "var(--space-1)",
+    "2": "var(--space-2)",
+    "3": "var(--space-3)",
+    "4": "var(--space-4)",
+    "5": "var(--space-5)",
+    "6": "var(--space-6)",
+    "8": "var(--space-8)",
+    "10": "var(--space-10)",
+    "12": "var(--space-12)",
+    "16": "var(--space-16)"
+  },
+  "radius": {
+    "sm": "var(--radius-sm)",
+    "md": "var(--radius-md)",
+    "lg": "var(--radius-lg)",
+    "xl": "var(--radius-xl)",
+    "full": "var(--radius-full)"
+  },
+  "shadows": {
+    "sm": "var(--shadow-sm)",
+    "md": "var(--shadow-md)",
+    "lg": "var(--shadow-lg)",
+    "xl": "var(--shadow-xl)",
+    "glow": "var(--shadow-glow)",
+    "glowLg": "var(--shadow-glow-lg)",
+    "inner": "var(--shadow-inner)",
+    "card": "var(--shadow-card)",
+    "cardHover": "var(--shadow-card-hover)"
+  },
+  "animations": {
+    "fast": "var(--transition-fast)",
+    "normal": "var(--transition-normal)",
+    "slow": "var(--transition-slow)",
+    "bounce": "var(--transition-bounce)",
+    "spring": "var(--transition-spring)"
+  },
+  "epistemic": {
+    "cleared": "var(--epistemic-cleared)",
+    "clearedGlow": "var(--epistemic-cleared-glow)",
+    "blocked": "var(--epistemic-blocked)",
+    "blockedGlow": "var(--epistemic-blocked-glow)",
+    "pending": "var(--epistemic-pending)",
+    "pendingGlow": "var(--epistemic-pending-glow)",
+    "degraded": "var(--epistemic-degraded)",
+    "degradedGlow": "var(--epistemic-degraded-glow)",
+    "stage0": "var(--epistemic-stage-0)",
+    "stage1": "var(--epistemic-stage-1)",
+    "stage2": "var(--epistemic-stage-2)",
+    "stage3": "var(--epistemic-stage-3)",
+    "stage4": "var(--epistemic-stage-4)",
+    "stage5": "var(--epistemic-stage-5)",
+    "stage5Glow": "var(--epistemic-stage-5-glow)"
+  },
+  "expert": {
+    "atelier": "var(--expert-atelier)",
+    "agora": "var(--expert-agora)",
+    "ryu": "var(--expert-ryu)",
+    "sovereign": "var(--expert-sovereign)",
+    "agent": "var(--expert-agent)"
+  }
+}

package/src/p0-primitives/types/index.ts

@@ -0,0 +1,123 @@
+// Shared type definitions for the design system
+// These types mirror the actual Props interfaces in each component.
+// Keep in sync with component $props() definitions.
+
+export * from './plugin-types';
+
+import type { Snippet } from 'svelte';
+
+export interface ButtonProps {
+  variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+  size?: 'sm' | 'md' | 'lg';
+  type?: 'button' | 'submit' | 'reset';
+  disabled?: boolean;
+  loading?: boolean;
+  class?: string;
+  onclick?: (e: MouseEvent) => void;
+  children?: Snippet;
+  iconLeading?: Snippet;
+  iconTrailing?: Snippet;
+}
+
+export interface InputProps {
+  value?: string;
+  type?: 'text' | 'search' | 'password' | 'email' | 'url';
+  placeholder?: string;
+  disabled?: boolean;
+  error?: boolean;
+  class?: string;
+  id?: string;
+  name?: string;
+  iconLeading?: Snippet;
+  iconTrailing?: Snippet;
+}
+
+export interface CardProps {
+  variant?: 'elevated' | 'flat' | 'interactive' | 'glass';
+  selected?: boolean;
+  class?: string;
+  onclick?: (e: MouseEvent) => void;
+  onkeydown?: (e: KeyboardEvent) => void;
+  children?: Snippet;
+  header?: Snippet;
+  footer?: Snippet;
+}
+
+export interface BadgeProps {
+  variant?: 'status' | 'count' | 'dot' | 'outline';
+  color?: 'accent' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
+  size?: 'sm' | 'md' | 'lg';
+  class?: string;
+  children?: Snippet;
+}
+
+export interface ToggleProps {
+  checked?: boolean;
+  disabled?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  class?: string;
+  onchange?: (checked: boolean) => void;
+  label?: Snippet;
+}
+
+export interface SpinnerProps {
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  color?: 'accent' | 'muted' | 'white';
+  class?: string;
+}
+
+export interface TabsProps {
+  tabs: Array<{ id: string; label: string | Snippet; disabled?: boolean; icon?: Snippet }>;
+  activeId?: string;
+  class?: string;
+  fullWidth?: boolean;
+  onchange?: (id: string) => void;
+}
+
+export interface ModalProps {
+  isOpen?: boolean;
+  title?: string;
+  class?: string;
+  onClose?: () => void;
+  showCloseButton?: boolean;
+  closeOnOverlayClick?: boolean;
+  closeOnEscape?: boolean;
+  zIndex?: number;
+  children?: Snippet;
+  headerActions?: Snippet;
+  footer?: Snippet;
+}
+
+export interface TooltipProps {
+  content: string | Snippet;
+  position?: 'top' | 'right' | 'bottom' | 'left';
+  delayMs?: number;
+  class?: string;
+  trigger: Snippet;
+}
+
+export interface DropdownItem {
+  id: string;
+  label: string;
+  icon?: Snippet;
+  shortcut?: string;
+  disabled?: boolean;
+  danger?: boolean;
+}
+
+export interface DropdownProps {
+  items: DropdownItem[];
+  trigger: Snippet;
+  align?: 'left' | 'right' | 'center';
+  width?: string;
+  class?: string;
+  onselect?: (item: DropdownItem) => void;
+}
+
+export interface AvatarProps {
+  src?: string;
+  name?: string;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  status?: 'online' | 'offline' | 'away' | 'busy' | 'typing' | null;
+  class?: string;
+}

package/src/p0-primitives/types/plugin-types.ts

@@ -0,0 +1,74 @@
+// Plugin manifest types — capability-first app integration contract
+// Apps declare capabilities via typed manifest; shell aggregates at build time.
+//
+// Synchronized with: SOVEREIGN/effectors/e0-plugin-primitives/src/lib.rs
+// Canonical Rust types: PluginManifest, TauriSubstrateExtension, ShellExtension
+// See ADR: .gears/_realm/adr/2026-04-18-plugin-contract-unification.md
+
+import type { Component } from 'svelte';
+
+/**
+ * Plugin capability — domain:action format.
+ * Known domains are typed; unknown capabilities fall through to string (Named escape hatch).
+ */
+export type KnownCapability =
+  | 'view:spatial'
+  | 'view:agora'
+  | 'view:sovereign'
+  | 'view:terminal'
+  | 'storage:read'
+  | 'storage:write'
+  | 'net:access'
+  | 'fs:access'
+  | 'agent:interact'
+  | 'p2p.connect'
+  | 'p2p.messaging'
+  | 'persistence.local'
+  | 'persistence.sovereign'
+  | 'knowledge.search'
+  | 'knowledge.ingest'
+  | 'llm.chat'
+  | 'llm.embeddings'
+  | 'identity.read'
+  | 'identity.manage';
+
+/** Any capability string — unknown domains map to PluginCapability::Named(_) in Rust. */
+export type PluginCapability = KnownCapability | (string & {});
+
+/** Lazy component factory — returns a dynamic import promise */
+export type ViewFactory = () => Promise<{ default: Component }>;
+
+/** Plugin view declarations */
+export interface PluginViews {
+  /** Primary app view rendered in the shell viewport */
+  main: ViewFactory;
+  /** Optional settings panel */
+  settings?: ViewFactory;
+}
+
+/**
+ * Plugin manifest — the canonical frontend contract.
+ *
+ * Build-time generated from leap-plugin.toml via generate-plugin-registry.ts.
+ * Synchronized with Rust: e0-plugin-primitives::PluginManifest
+ */
+export interface PluginManifest {
+  /** Unique plugin identifier (e.g., 'agora', 'atelier', 'ryu') */
+  id: string;
+  /** Human-readable display name */
+  name: string;
+  /** Short description shown in plugin store / tooltips */
+  description: string;
+  /** Icon name from the design system icon set (e.g., 'MessageCircle') */
+  icon: string;
+  /** Optional keyboard shortcut (e.g., 'Ctrl+Shift+A') */
+  shortcut?: string;
+  /** Integration tier (0=external, 1=built-in, 2=core, 3=sovereign) */
+  tier?: number;
+  /** Capabilities this plugin provides to the capability graph */
+  provides: PluginCapability[];
+  /** Capabilities this plugin requires from the shell/runtime */
+  requires: PluginCapability[];
+  /** View factories for lazy-loading components */
+  views: PluginViews;
+}

package/src/p0-primitives/utils/index.ts

@@ -0,0 +1,39 @@
+// Utility functions for the design system
+
+/**
+ * Class name merger - combines class names, filtering out falsy values
+ */
+export function cn(...classes: (string | undefined | null | false)[]): string {
+  return classes.filter(Boolean).join(' ');
+}
+
+/**
+ * Debounce function
+ */
+export function debounce<T extends (...args: any[]) => any>(
+  fn: T,
+  delay: number
+): (...args: Parameters<T>) => void {
+  let timeoutId: ReturnType<typeof setTimeout>;
+  return (...args: Parameters<T>) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => fn(...args), delay);
+  };
+}
+
+/**
+ * Throttle function
+ */
+export function throttle<T extends (...args: any[]) => any>(
+  fn: T,
+  limit: number
+): (...args: Parameters<T>) => void {
+  let inThrottle: boolean;
+  return (...args: Parameters<T>) => {
+    if (!inThrottle) {
+      fn(...args);
+      inThrottle = true;
+      setTimeout(() => (inThrottle = false), limit);
+    }
+  };
+}

package/src/platform/hud-protocol.ts

@@ -0,0 +1,20 @@
+// Platform HUD Protocol — cross-boundary telemetry contract
+//
+// Plugins (Ryu, Agora, etc.) emit hud:contribution Tauri events.
+// LEAP's hudStore collects them; LeapHud renders them generically.
+// See: .gears/_realm/architecture/leap-compositor-protocol-001.md
+
+export type HudIndicator = 'nominal' | 'degraded' | 'offline';
+
+export interface HudContribution {
+  /** Stable ID, e.g. "ryu:spark", "agora:peers" */
+  id: string;
+  /** Short display label */
+  label: string;
+  /** Rendered value — string or number */
+  value: string | number;
+  /** Visual state */
+  indicator: HudIndicator;
+  /** Lower = left-most in HUD bar */
+  priority: number;
+}

package/src/platform/index.ts

@@ -0,0 +1,3 @@
+// Platform — cross-boundary protocols between LEAP shell and plugins
+
+export type { HudIndicator, HudContribution } from './hud-protocol';

package/src/s0-state/create-store.ts

@@ -0,0 +1,84 @@
+// Base store factory using Svelte 5 runes
+// This provides reactive state management without Svelte 4's writable/readable
+
+export interface PersistenceConfig {
+  key: string;
+  storage: 'localStorage' | 'IndexedDB';
+  serialize?: (value: unknown) => string;
+  deserialize?: (value: string) => unknown;
+}
+
+export interface StoreOptions<T> {
+  initial: T;
+  persist?: PersistenceConfig;
+  debug?: boolean;
+}
+
+interface Store<T> {
+  readonly value: T;
+  set(value: T): void;
+  update(fn: (value: T) => T): void;
+  subscribe(fn: (value: T) => void): () => void;
+}
+
+/**
+ * Create a reactive store using Svelte 5 runes
+ */
+export function createStore<T>(options: StoreOptions<T>): Store<T> {
+  let value = $state(options.initial);
+  const subscribers = new Set<(value: T) => void>();
+
+  // Handle persistence
+  if (options.persist) {
+    if (typeof window !== 'undefined' && options.persist.storage === 'localStorage') {
+      const stored = localStorage.getItem(options.persist.key);
+      if (stored) {
+        try {
+          const deserialized = options.persist.deserialize
+            ? options.persist.deserialize(stored)
+            : JSON.parse(stored);
+          value = deserialized as T;
+        } catch (e) {
+          console.warn('[store] Failed to deserialize stored value for key:', options.persist.key, e);
+        }
+      }
+
+      // Set up effect to persist changes.
+      // $effect.root() so this works whether createStore() is called at module
+      // level (outside any component) or inside a component.
+      $effect.root(() => {
+        $effect(() => {
+          const serialized = options.persist!.serialize
+            ? options.persist!.serialize(value)
+            : JSON.stringify(value);
+          localStorage.setItem(options.persist!.key, serialized);
+        });
+      });
+    }
+  }
+
+  function set(newValue: T) {
+    value = newValue;
+    if (options.debug) {
+      console.log(`[store] Set:`, value);
+    }
+    subscribers.forEach(fn => fn(value));
+  }
+
+  function update(fn: (value: T) => T) {
+    set(fn(value));
+  }
+
+  function subscribe(fn: (value: T) => void) {
+    subscribers.add(fn);
+    fn(value); // Immediate call with current value
+    return () => subscribers.delete(fn);
+  }
+
+  return {
+    get value() { return value; },
+    set,
+    update,
+    subscribe,
+  };
+}

package/src/s0-state/derived.ts

@@ -0,0 +1,41 @@
+// Derived store helpers
+// NOTE: $derived runes only work inside Svelte component context (.svelte files).
+// This module is meant to be used from .svelte.ts files or component <script> blocks.
+
+export interface DerivedOptions<T> {
+  debug?: boolean;
+}
+
+export interface Derived<T> {
+  readonly value: T;
+  subscribe(fn: (value: T) => void): () => void;
+}
+
+/**
+ * Create a derived value from source stores.
+ * Must be called during component initialization (where $derived is valid).
+ */
+export function createDerived<T>(
+  fn: () => T,
+  options?: DerivedOptions<T>
+): Derived<T> {
+  const value = $derived(fn());
+  const subscribers = new Set<(value: T) => void>();
+
+  if (options?.debug) {
+    $effect(() => {
+      console.log(`[derived] Value:`, value);
+    });
+  }
+
+  function subscribe(cb: (value: T) => void) {
+    subscribers.add(cb);
+    cb(value);
+    return () => subscribers.delete(cb);
+  }
+
+  return {
+    get value() { return value; },
+    subscribe,
+  };
+}

package/src/s0-state/index.ts

@@ -0,0 +1,6 @@
+// S0 State — Store primitives using Svelte 5 runes
+
+export { createStore } from './create-store';
+export { createDerived } from './derived';
+export type { StoreOptions, PersistenceConfig } from './create-store';
+export type { DerivedOptions } from './derived';