@stephen-netu/design-system 0.1.0

package/src/fabric/feedback/StatusBar.svelte

@@ -0,0 +1,274 @@
+<script lang="ts">
+  /**
+   * StatusBar - Fabric Component
+   * 
+   * App status bar with mode indicator, vault info, and connection status.
+   * Decoupled from shell stores - uses props/callbacks for all state.
+   * 
+   * @package @kos/design-system/fabric/feedback
+   * @adr 2026-04-12-leap-repo-restructure-003
+   */
+  import { LayoutGrid, FileText, Network, Columns2, Globe, Cpu, Wifi, Layers, Sparkles } from '@lucide/svelte';
+  // Lucide icons are Svelte 4 class components - use permissive typing
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  type IconComponent = any;
+
+  export type ViewMode = 'spatial' | 'file' | 'graph' | 'kanban' | 'browser' | 'sovereign' | 'agora' | 'atelier' | 'loge' | 'mir';
+  export type ConnectionState = 'connected' | 'connecting' | 'failed' | 'reconnecting';
+
+  interface Props {
+    // Mode/App display
+    mode?: ViewMode;
+    appName?: string;
+    modeLabel?: string;
+    
+    // Vault info
+    vaultName?: string | null;
+    vaultPath?: string | null;
+    
+    // Content stats
+    cardCount?: number;
+    
+    // Connection status
+    connectionState?: ConnectionState;
+    connectionLabel?: string;
+    connectionVisible?: boolean;
+    connectionFailedReason?: string | null;
+    
+    // Callbacks
+    onConnectionRetry?: () => void;
+    onModeClick?: () => void;
+    onVaultClick?: () => void;
+    
+    // Custom icons (optional)
+    modeIcon?: IconComponent;
+    appIcon?: IconComponent;
+  }
+
+  const props: Props = $props();
+
+  // Default icons
+  const modeIcons: Record<ViewMode, IconComponent> = {
+    spatial: LayoutGrid,
+    file: FileText,
+    graph: Network,
+    kanban: Columns2,
+    browser: Globe,
+    sovereign: Cpu,
+    agora: Wifi,
+    atelier: LayoutGrid,
+    loge: Layers,
+    mir: Sparkles,
+  };
+
+  const modeLabels: Record<ViewMode, string> = {
+    spatial: 'Spatial',
+    file: 'Editor',
+    graph: 'Graph',
+    kanban: 'Kanban',
+    browser: 'Browser',
+    sovereign: 'Sovereign',
+    agora: 'Agora',
+    atelier: 'Atelier',
+    loge: 'Loge',
+    mir: 'Mir',
+  };
+
+  const ModeIcon = $derived(props.modeIcon || (props.mode ? modeIcons[props.mode] : LayoutGrid));
+  const displayModeLabel = $derived(props.modeLabel || (props.mode ? modeLabels[props.mode] : 'Spatial'));
+  const displayAppName = $derived(props.appName || 'LEAP');
+</script>
+
+<footer class="status-bar">
+  <div class="status-left">
+    <button 
+      class="status-segment status-mode"
+      onclick={props.onModeClick}
+      disabled={!props.onModeClick}
+    >
+      <ModeIcon size={11} strokeWidth={1.5} />
+      <span>{displayModeLabel}</span>
+    </button>
+
+    {#if props.vaultName}
+      <span class="status-divider"></span>
+      <button 
+        class="status-segment status-vault"
+        title={props.vaultPath || ''}
+        onclick={props.onVaultClick}
+        disabled={!props.onVaultClick}
+      >
+        {props.vaultName}
+      </button>
+    {/if}
+  </div>
+
+  <div class="status-center">
+    <span class="status-brand">{displayAppName}</span>
+  </div>
+
+  <div class="status-right">
+    {#if props.cardCount && props.cardCount > 0}
+      <span class="status-segment">
+        <Layers size={11} strokeWidth={1.5} />
+        <span>{props.cardCount} card{props.cardCount !== 1 ? 's' : ''}</span>
+      </span>
+      <span class="status-divider"></span>
+    {/if}
+
+    <span class="status-segment status-connection" class:failed={props.connectionState === 'failed'}>
+      <Wifi size={11} strokeWidth={1.5} />
+      <span>{props.connectionLabel || 'LLM'}</span>
+    </span>
+
+    {#if props.connectionVisible}
+      <span class="status-divider"></span>
+      <button
+        class="status-substrate-dot"
+        class:pulsing={props.connectionState === 'connecting' || props.connectionState === 'reconnecting'}
+        class:failed={props.connectionState === 'failed'}
+        title={props.connectionFailedReason
+          ? `Connection failed: ${props.connectionFailedReason}`
+          : props.connectionState === 'connected'
+            ? 'Connected'
+            : 'Reconnecting…'}
+        onclick={props.onConnectionRetry}
+        disabled={!props.onConnectionRetry}
+      ></button>
+    {/if}
+  </div>
+</footer>
+
+<style>
+  .status-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 24px;
+    padding: 0 12px;
+    background: var(--rail-bg, #161616);
+    border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
+    font-size: 11px;
+    color: var(--text-tertiary, #6b6b6b);
+    flex-shrink: 0;
+    z-index: 40;
+    user-select: none;
+  }
+
+  .status-left,
+  .status-right {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .status-center {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .status-brand {
+    font-family: 'Crimson Pro', 'Georgia', serif;
+    font-size: 11px;
+    font-weight: 400;
+    font-style: italic;
+    color: var(--text-tertiary, #6b6b6b);
+    opacity: 0.4;
+    letter-spacing: 0.08em;
+  }
+
+  .status-segment {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    white-space: nowrap;
+    line-height: 1;
+  }
+
+  .status-mode {
+    color: var(--accent-primary, #b87333);
+    font-weight: 500;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    font-size: inherit;
+  }
+
+  .status-mode:hover:not(:disabled) {
+    opacity: 0.8;
+  }
+
+  .status-mode:disabled {
+    cursor: default;
+  }
+
+  .status-vault {
+    max-width: 120px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    font-size: inherit;
+    color: inherit;
+  }
+
+  .status-vault:hover:not(:disabled) {
+    color: var(--text-secondary, #a0a0a0);
+  }
+
+  .status-vault:disabled {
+    cursor: default;
+  }
+
+  .status-connection {
+    color: var(--color-success, #5a8a6e);
+  }
+
+  .status-connection.failed {
+    color: var(--color-error, #ef4444);
+  }
+
+  .status-divider {
+    width: 1px;
+    height: 10px;
+    background: var(--border-subtle, rgba(255, 255, 255, 0.06));
+  }
+
+  /* Connection indicator — brass dot, visible only when not connected. */
+  .status-substrate-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: #b87333;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    flex-shrink: 0;
+  }
+
+  .status-substrate-dot:hover:not(:disabled) {
+    transform: scale(1.2);
+  }
+
+  .status-substrate-dot:disabled {
+    cursor: default;
+  }
+
+  .status-substrate-dot.pulsing {
+    animation: substrate-pulse 1.4s ease-in-out infinite;
+  }
+
+  .status-substrate-dot.failed {
+    background: #c0392b;
+    animation: none;
+  }
+
+  @keyframes substrate-pulse {
+    0%, 100% { opacity: 1; }
+    50%       { opacity: 0.3; }
+  }
+</style>

package/src/fabric/feedback/ToastContainer.svelte

@@ -0,0 +1,122 @@
+<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/feedback/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Fabric Feedback Components
+ * 
+ * Toast notifications and status indicators.
+ * 
+ * @package @kos/design-system/fabric/feedback
+ * @adr 2026-04-12-leap-substrate-refactor-001
+ */
+
+export { default as ToastContainer } from './ToastContainer.svelte';
+export type { ToastType } from './ToastContainer.svelte';
+
+export { default as StatusBar } from './StatusBar.svelte';
+export type { ViewMode, ConnectionState } from './StatusBar.svelte';

package/src/fabric/index.ts

@@ -0,0 +1,37 @@
+/**
+ * KOS Design System - Fabric Layer
+ * 
+ * Composable UI components for LEAP apps.
+ * Following ADR-2026-04-12-leap-substrate-refactor-001
+ * 
+ * Import from specific subpaths for tree-shaking:
+ *   import { Button } from '@kos/design-system/fabric/u0-primitives';
+ *   import { GlassBox } from '@kos/design-system/fabric/layout';
+ * 
+ * Or use the barrel import for convenience:
+ *   import { GlassBox, ActivityRail, FileTree, KanbanBoard, KanbanColumn, KanbanCard, CommandBar, KeyboardShortcuts, ChatPanel, ToastContainer, StatusBar } from '@kos/design-system/fabric';
+ */
+
+// Layout
+export { GlassBox, KanbanBoard, KanbanColumn, KanbanCard } from './layout';
+export type { CardData, ColumnData } from './layout';
+
+// Navigation
+export { ActivityRail } from './navigation';
+export type { RailItem, RailItemType } from './navigation';
+
+// Data
+export { FileTree } from './data';
+export type { FileEntry } from './data';
+
+// Input
+export { CommandBar, KeyboardShortcuts } from './input';
+export type { ShortcutBinding, ShortcutGroup } from './input';
+
+// AI
+export { ChatPanel } from './ai';
+export type { Message, Citation, ContextCard } from './ai';
+
+// Feedback
+export { ToastContainer, StatusBar } from './feedback';
+export type { ToastType, ViewMode, ConnectionState } from './feedback';

package/src/fabric/input/CommandBar.svelte

@@ -0,0 +1,79 @@
+<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>