@stephen-netu/design-system 0.1.0

package/README.md

@@ -0,0 +1,66 @@
+# @kos/design-system
+
+KOS LEAP Design System — Legendary UI components with brass/copper aesthetic.
+
+## Installation
+
+```bash
+npm install @kos/design-system
+```
+
+## Usage
+
+```typescript
+// Import all components
+import { Button, Card, Badge } from '@kos/design-system';
+
+// Import specific layers
+import { Button, Card } from '@kos/design-system/u0-primitives';
+import { KanbanViewLayout } from '@kos/design-system/l0-layout';
+
+// Import CSS tokens
+import '@kos/design-system/base.css';
+import '@kos/design-system/tokens.css';
+import '@kos/design-system/tokens/control-room.css';
+```
+
+## Design Tokens
+
+All values are CSS custom properties:
+
+```css
+/* Colors */
+--color-bg-app: #141414;
+--color-bg-canvas: #1a1a1a;
+--color-text-primary: #f2efe9;
+--color-accent: #b87333;  /* brass/copper */
+
+/* Typography */
+--font-sans: 'Outfit', system-ui, sans-serif;
+--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+
+/* Spacing */
+--space-1: 0.25rem;
+--space-2: 0.5rem;
+--space-3: 0.75rem;
+--space-4: 1rem;
+```
+
+## Architecture
+
+- **p0-primitives**: Types, tokens, utilities
+- **u0-primitives**: Atoms (Button, Input, Card, Badge, Avatar, Toggle, etc.)
+- **l0-layout**: Molecules/Organisms (KanbanViewLayout, GroveCard, etc.)
+- **f0-forms**: Form components (FormField, Select, TextArea)
+- **s0-state**: Svelte 5 rune wrappers
+- **t0-transport**: Tauri IPC utilities
+- **d0-data-viz**: Data visualization (BarChart, MetricCard)
+- **n0-node-graph**: Node graph components (NodeCanvas, GraphEditor)
+- **n1-flow-canvas**: Canvas 2D flow editor
+- **n2-manifold-disk**: Poincare disk projection
+- **n3-force-graph**: Force-directed graph layout
+- **n4-adaptive-manifold**: Adaptive manifold visualization
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,130 @@
+{
+  "name": "@stephen-netu/design-system",
+  "version": "0.1.0",
+  "description": "KOS LEAP Design System — Legendary UI components with brass/copper aesthetic",
+  "type": "module",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "files": [
+    "src/**/*",
+    "package.json",
+    "README.md"
+  ],
+  "exports": {
+    ".": "./src/index.ts",
+    "./b0-app-shell": "./src/b0-app-shell/index.ts",
+    "./p0-primitives": "./src/p0-primitives/index.ts",
+    "./u0-primitives": "./src/u0-primitives/index.ts",
+    "./l0-layout": "./src/l0-layout/index.ts",
+    "./l0-layout/block-writer": "./src/l0-layout/block-writer/index.ts",
+    "./l0-layout/grove": "./src/l0-layout/grove/index.ts",
+    "./spatial": "./src/spatial/index.ts",
+    "./spatial/ZoneTiler.svelte": "./src/spatial/ZoneTiler.svelte",
+    "./spatial/ForceCanvas.svelte": "./src/spatial/ForceCanvas.svelte",
+    "./spatial/LodRenderer.svelte": "./src/spatial/LodRenderer.svelte",
+    "./spatial/SnapZoomCamera.svelte": "./src/spatial/SnapZoomCamera.svelte",
+    "./spatial/BspTilingCanvas.svelte": "./src/spatial/BspTilingCanvas.svelte",
+    "./s0-state": "./src/s0-state/index.ts",
+    "./t0-transport": "./src/t0-transport/index.ts",
+    "./f0-forms": "./src/f0-forms/index.ts",
+    "./d0-data-viz": "./src/d0-data-viz/index.ts",
+    "./n0-node-graph": "./src/n0-node-graph/index.ts",
+    "./n1-flow-canvas": "./src/n1-flow-canvas/index.ts",
+    "./n2-manifold-disk": "./src/n2-manifold-disk/index.ts",
+    "./n3-force-graph": "./src/n3-force-graph/index.ts",
+    "./n4-adaptive-manifold": "./src/n4-adaptive-manifold/index.ts",
+    "./n4-tokens.css": "./src/n4-adaptive-manifold/n4-tokens.css",
+    "./v0-diagrams": "./src/v0-diagrams/index.ts",
+    "./entity-graph-view": "./src/entity-graph-view/index.ts",
+    "./tokens.css": "./src/p0-primitives/tokens/tokens.css",
+    "./tokens/control-room.css": "./src/p0-primitives/tokens/control-room.css",
+    "./d0-tokens.css": "./src/d0-data-viz/d0-tokens.css",
+    "./n0-tokens.css": "./src/n0-node-graph/n0-tokens.css",
+    "./base.css": "./src/base.css",
+    "./tokens.json": "./src/p0-primitives/tokens/tokens.json",
+    "./map": "./src/g0-geo/index.ts",
+    "./g0-geo": "./src/g0-geo/index.ts",
+    "./x0-enchanted-blocks": "./src/x0-enchanted-blocks/index.ts",
+    "./editor": "./src/editor/index.ts",
+    "./editor/MarkdownEditor.svelte": "./src/editor/MarkdownEditor.svelte",
+    "./demos": "./src/demos/index.ts",
+    "./demos/BspZoneDemo.svelte": "./src/demos/BspZoneDemo.svelte",
+    "./demos/NodepadBlocksShowcase.svelte": "./src/demos/NodepadBlocksShowcase.svelte",
+    "./demos/BspSizingInfographic.svelte": "./src/demos/BspSizingInfographic.svelte",
+    "./demos/ControlRoomDemo.svelte": "./src/demos/ControlRoomDemo.svelte",
+    "./fabric": "./src/fabric/index.ts",
+    "./fabric/layout": "./src/fabric/layout/index.ts",
+    "./fabric/layout/GlassBox.svelte": "./src/fabric/layout/GlassBox.svelte",
+    "./fabric/layout/KanbanBoard.svelte": "./src/fabric/layout/KanbanBoard.svelte",
+    "./fabric/layout/KanbanColumn.svelte": "./src/fabric/layout/KanbanColumn.svelte",
+    "./fabric/layout/KanbanCard.svelte": "./src/fabric/layout/KanbanCard.svelte",
+    "./fabric/navigation": "./src/fabric/navigation/index.ts",
+    "./fabric/navigation/ActivityRail.svelte": "./src/fabric/navigation/ActivityRail.svelte",
+    "./fabric/data": "./src/fabric/data/index.ts",
+    "./fabric/data/FileTree.svelte": "./src/fabric/data/FileTree.svelte",
+    "./fabric/input": "./src/fabric/input/index.ts",
+    "./fabric/input/CommandBar.svelte": "./src/fabric/input/CommandBar.svelte",
+    "./fabric/input/KeyboardShortcuts.svelte": "./src/fabric/input/KeyboardShortcuts.svelte",
+    "./fabric/feedback": "./src/fabric/feedback/index.ts",
+    "./fabric/feedback/ToastContainer.svelte": "./src/fabric/feedback/ToastContainer.svelte",
+    "./fabric/feedback/StatusBar.svelte": "./src/fabric/feedback/StatusBar.svelte",
+    "./fabric/ai": "./src/fabric/ai/index.ts",
+    "./fabric/ai/ChatPanel.svelte": "./src/fabric/ai/ChatPanel.svelte"
+  },
+  "peerDependencies": {
+    "@tauri-apps/api": "^2",
+    "svelte": "^5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@tauri-apps/api": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@chenglou/pretext": "^0.0.5",
+    "@codemirror/commands": "^6.10.0",
+    "@codemirror/lang-markdown": "^6.2.0",
+    "@codemirror/language": "^6.10.0",
+    "@codemirror/language-data": "^6.5.2",
+    "@codemirror/search": "^6.6.0",
+    "@codemirror/state": "6.6.0",
+    "@codemirror/view": "6.40.0",
+    "codemirror": "^6.0.1",
+    "d3-force": "^3.0.0",
+    "elkjs": "^0.9.3",
+    "force-graph": "^1.51.2",
+    "graphology": "^0.25.4",
+    "graphology-types": "^0.24.7",
+    "leaflet": "^1.9.4",
+    "perfect-arrows": "^0.3.7",
+    "svelte-canvas": "^2.1.0"
+  },
+  "devDependencies": {
+    "@types/d3-force": "^3.0.10",
+    "@types/leaflet": "^1.9.21",
+    "@lucide/svelte": "^0.575.0",
+    "markmap-lib": "^0.18.0",
+    "markmap-view": "^0.18.0",
+    "mermaid": "^11.0.0",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.4.6",
+    "typescript": "^5.0.0",
+    "vitest": "^1.6.1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/stephen-netu/design-system.git"
+  },
+  "keywords": [
+    "design-system",
+    "svelte",
+    "ui-components",
+    "brass",
+    "copper",
+    "dark-theme"
+  ],
+  "author": "Stephen Netu",
+  "license": "MIT"
+}

package/src/b0-app-shell/clarification-overlay/ClarificationOverlay.svelte

@@ -0,0 +1,221 @@
+<script lang="ts">
+  /** Mirrors ClarificationSession from @kos/agent — kept local to avoid a design-system→agent dep. */
+  interface ClarificationSession {
+    sessionId: string;
+    question: string;
+    contextHints: string[];
+    step: number;
+    totalSteps: number;
+    scaffoldKind: string;
+  }
+
+  interface Props {
+    session: ClarificationSession;
+    onSubmit: (reply: string) => void;
+    onDismiss: () => void;
+    submitting?: boolean;
+  }
+
+  const { session, onSubmit, onDismiss, submitting = false }: Props = $props();
+
+  let reply = $state('');
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter' && !e.shiftKey && reply.trim()) {
+      e.preventDefault();
+      submit();
+    }
+    if (e.key === 'Escape') {
+      onDismiss();
+    }
+  }
+
+  function submit() {
+    if (!reply.trim() || submitting) return;
+    onSubmit(reply.trim());
+    reply = '';
+  }
+</script>
+
+<div class="clarification-overlay" role="dialog" aria-modal="true" aria-labelledby="clarification-heading">
+  <div class="clarification-panel">
+    <header class="clarification-header">
+      <div class="scaffold-badge">{session.scaffoldKind}</div>
+      {#if session.totalSteps > 1}
+        <span class="step-indicator">Step {session.step} of {session.totalSteps}</span>
+      {/if}
+      <button class="dismiss-btn" onclick={onDismiss} aria-label="Dismiss clarification">✕</button>
+    </header>
+
+    <div class="clarification-body">
+      <p id="clarification-heading" class="question">{session.question}</p>
+
+      {#if session.contextHints.length > 0}
+        <div class="context-hints">
+          {#each session.contextHints as hint}
+            <span class="hint-chip">{hint}</span>
+          {/each}
+        </div>
+      {/if}
+
+      <div class="reply-area">
+        <textarea
+          class="reply-input"
+          bind:value={reply}
+          onkeydown={handleKeydown}
+          placeholder="Your answer…"
+          rows={3}
+          disabled={submitting}
+          autofocus
+        ></textarea>
+        <button
+          class="submit-btn"
+          onclick={submit}
+          disabled={!reply.trim() || submitting}
+        >
+          {submitting ? '…' : 'Continue →'}
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .clarification-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.6);
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    z-index: 200;
+    padding-bottom: 80px; /* Above CommandBar */
+  }
+
+  .clarification-panel {
+    background: #2a2a2a;
+    border: 1px solid #3a3a3a;
+    border-radius: 8px;
+    width: min(640px, calc(100vw - 32px));
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+  }
+
+  .clarification-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 14px;
+    border-bottom: 1px solid #3a3a3a;
+  }
+
+  .scaffold-badge {
+    font-size: 10px;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: #b87333;
+    background: rgba(184, 115, 51, 0.15);
+    border: 1px solid rgba(184, 115, 51, 0.3);
+    border-radius: 3px;
+    padding: 2px 6px;
+  }
+
+  .step-indicator {
+    font-size: 11px;
+    color: #a09880;
+    margin-right: auto;
+  }
+
+  .dismiss-btn {
+    background: none;
+    border: none;
+    color: #a09880;
+    cursor: pointer;
+    font-size: 14px;
+    padding: 2px 4px;
+    margin-left: auto;
+    line-height: 1;
+  }
+
+  .dismiss-btn:hover {
+    color: #e8e0d0;
+  }
+
+  .clarification-body {
+    padding: 14px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .question {
+    font-size: 14px;
+    color: #e8e0d0;
+    line-height: 1.5;
+    margin: 0;
+  }
+
+  .context-hints {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+
+  .hint-chip {
+    font-size: 11px;
+    color: #a09880;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid #3a3a3a;
+    border-radius: 3px;
+    padding: 2px 6px;
+  }
+
+  .reply-area {
+    display: flex;
+    gap: 8px;
+    align-items: flex-end;
+  }
+
+  .reply-input {
+    flex: 1;
+    background: #1a1a1a;
+    border: 1px solid #3a3a3a;
+    border-radius: 4px;
+    color: #e8e0d0;
+    font-family: var(--font-mono, monospace);
+    font-size: 13px;
+    padding: 8px 10px;
+    resize: none;
+    line-height: 1.5;
+  }
+
+  .reply-input:focus {
+    outline: none;
+    border-color: #b87333;
+  }
+
+  .reply-input:disabled {
+    opacity: 0.5;
+  }
+
+  .submit-btn {
+    background: #b87333;
+    border: none;
+    border-radius: 4px;
+    color: #1a1a1a;
+    cursor: pointer;
+    font-size: 13px;
+    font-weight: 600;
+    padding: 8px 14px;
+    white-space: nowrap;
+  }
+
+  .submit-btn:hover:not(:disabled) {
+    background: #c98340;
+  }
+
+  .submit-btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+</style>

package/src/b0-app-shell/clarification-overlay/index.ts

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