@stephen-netu/design-system 0.1.0

package/src/fabric/navigation/ActivityRail.svelte

@@ -0,0 +1,271 @@
+<script lang="ts">
+  /**
+   * ActivityRail - Fabric Component
+   * 
+   * Vertical navigation rail for app switching and view selection.
+   * Decoupled from shell stores - uses props/callbacks for all state.
+   * 
+   * @package @kos/design-system/fabric/navigation
+   * @adr 2026-04-12-leap-substrate-refactor-001
+   */
+  // Lucide icons are Svelte 4 class components - use permissive typing
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  type IconComponent = any;
+  import {
+    LayoutGrid, FileText, Network, Columns2, Globe,
+    FolderTree, MessageSquare, HelpCircle, Layers, Gauge, Wifi, Folder,
+    Compass, Cpu, MessageCircle, Inbox,
+  } from '@lucide/svelte';
+
+  export type RailItemType = 'app' | 'view' | 'panel';
+
+  export interface RailItem {
+    id: string;
+    type: RailItemType;
+    label: string;
+    iconName: string;
+    active?: boolean;
+    disabled?: boolean;
+    title?: string;
+  }
+
+  interface Props {
+    /** App-level items (top section) */
+    appItems: RailItem[];
+    /** View-level items (middle section) */
+    viewItems: RailItem[];
+    /** Panel toggle items (bottom section) */
+    panelItems: RailItem[];
+    /** Currently active app ID */
+    activeAppId?: string;
+    /** Callback when item is clicked */
+    onitemclick: (item: RailItem) => void;
+    /** Callback for help button */
+    onopenhelp?: () => void;
+    /** Enable drag-drop for stream cards (app items only) */
+    ondropstreamcard?: (item: RailItem, data: { content: string; contentType: string; source: string }) => void;
+  }
+
+  const props: Props = $props();
+
+  const ICON_MAP: Record<string, IconComponent> = {
+    'layout-grid': LayoutGrid,
+    'file-text': FileText,
+    'network': Network,
+    'columns': Columns2,
+    'globe': Globe,
+    'wifi': Wifi,
+    'folder-tree': FolderTree,
+    'message-square': MessageSquare,
+    'folder': Folder,
+    'compass': Compass,
+    'cpu': Cpu,
+    'message-circle': MessageCircle,
+    'inbox': Inbox,
+    'layers': Layers,
+    'gauge': Gauge,
+    'help-circle': HelpCircle,
+  };
+
+  function getIcon(name: string): IconComponent {
+    return ICON_MAP[name.toLowerCase()] ?? FileText;
+  }
+
+  // Drop target state
+  let dropTargetId = $state<string | null>(null);
+
+  function isStreamCardDrag(e: DragEvent): boolean {
+    return e.dataTransfer?.types.includes('application/json') ?? false;
+  }
+
+  function handleDragOver(item: RailItem, e: DragEvent) {
+    if (!isStreamCardDrag(e) || item.type !== 'app') return;
+    e.preventDefault();
+    if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy';
+    dropTargetId = item.id;
+  }
+
+  function handleDragLeave(e: DragEvent) {
+    if (e.currentTarget instanceof HTMLElement && !e.currentTarget.contains(e.relatedTarget as Node)) {
+      dropTargetId = null;
+    }
+  }
+
+  function handleDrop(item: RailItem, e: DragEvent) {
+    e.preventDefault();
+    dropTargetId = null;
+    if (!props.ondropstreamcard || item.type !== 'app') return;
+
+    try {
+      const data = e.dataTransfer?.getData('application/json');
+      if (!data) return;
+      const payload = JSON.parse(data);
+      if (payload.type !== 'stream-card') return;
+
+      props.ondropstreamcard(
+        item,
+        { content: payload.content, contentType: payload.contentType, source: payload.source }
+      );
+    } catch {
+      // Not a valid stream card payload
+    }
+  }
+</script>
+
+<nav class="activity-rail" aria-label="Activity navigation">
+  <div class="rail-brand">⬡</div>
+
+  <!-- App buttons -->
+  <div class="rail-section rail-apps">
+    {#each props.appItems as item (item.id)}
+      {@const Icon = getIcon(item.iconName)}
+      <button
+        class="rail-btn"
+        class:active={item.active}
+        class:drag-over={dropTargetId === item.id}
+        class:disabled={item.disabled}
+        title={item.title ?? item.label}
+        aria-label={item.label}
+        onclick={() => props.onitemclick(item)}
+        ondragover={(e) => handleDragOver(item, e)}
+        ondragleave={handleDragLeave}
+        ondrop={(e) => handleDrop(item, e)}
+      >
+        <Icon size={18} />
+      </button>
+    {/each}
+  </div>
+
+  <div class="rail-divider"></div>
+
+  <!-- View buttons -->
+  <div class="rail-section">
+    {#each props.viewItems as item (item.id)}
+      {@const Icon = getIcon(item.iconName)}
+      <button
+        class="rail-btn"
+        class:active={item.active}
+        class:disabled={item.disabled}
+        title={item.label}
+        aria-label={item.label}
+        onclick={() => props.onitemclick(item)}
+      >
+        <Icon size={18} />
+      </button>
+    {/each}
+  </div>
+
+  <!-- Panel toggles -->
+  <div class="rail-section rail-panels">
+    {#each props.panelItems as item (item.id)}
+      {@const Icon = getIcon(item.iconName)}
+      <button
+        class="rail-btn"
+        class:active={item.active}
+        class:disabled={item.disabled}
+        title={item.label}
+        aria-label={item.label}
+        onclick={() => props.onitemclick(item)}
+      >
+        <Icon size={18} />
+      </button>
+    {/each}
+  </div>
+
+  <div class="rail-spacer"></div>
+
+  <button
+    class="rail-btn"
+    title="Keyboard shortcuts (?)"
+    aria-label="Keyboard shortcuts"
+    onclick={() => props.onopenhelp?.()}
+  >
+    <HelpCircle size={18} />
+  </button>
+</nav>
+
+<style>
+  .activity-rail {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 48px;
+    height: 100%;
+    background: var(--color-bg-canvas, #1a1a1a);
+    border-right: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
+    padding: 4px 0;
+    gap: 2px;
+  }
+
+  .rail-brand {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 36px;
+    color: var(--color-accent, #b87333);
+    font-size: 16px;
+    flex-shrink: 0;
+    margin-bottom: 4px;
+  }
+
+  .rail-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2px;
+    width: 100%;
+  }
+
+  .rail-divider {
+    width: 24px;
+    height: 1px;
+    background: var(--border-subtle, rgba(255,255,255,0.08));
+    margin: 4px 0;
+  }
+
+  .rail-panels {
+    border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
+    padding-top: 4px;
+    margin-top: 4px;
+  }
+
+  .rail-spacer {
+    flex: 1;
+  }
+
+  .rail-btn {
+    width: 36px;
+    height: 36px;
+    background: transparent;
+    border: none;
+    color: var(--color-text-tertiary, #706858);
+    cursor: pointer;
+    border-radius: var(--radius-lg, 0.5rem);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 120ms, color 120ms, box-shadow 120ms;
+    flex-shrink: 0;
+  }
+
+  .rail-btn:hover {
+    background: rgba(255,255,255,0.05);
+    color: var(--color-text-secondary, #a09880);
+  }
+
+  .rail-btn.active {
+    background: var(--color-accent-subtle, rgba(184, 115, 51, 0.15));
+    color: var(--color-accent, #b87333);
+  }
+
+  .rail-btn.drag-over {
+    background: rgba(184, 115, 51, 0.25);
+    box-shadow: 0 0 8px rgba(184, 115, 51, 0.4);
+    color: var(--color-accent, #b87333);
+  }
+
+  .rail-btn.disabled {
+    opacity: 0.3;
+    pointer-events: none;
+  }
+</style>

package/src/fabric/navigation/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Fabric Navigation Components
+ * 
+ * Navigation patterns for app switching and view selection.
+ * 
+ * @package @kos/design-system/fabric/navigation
+ * @adr 2026-04-12-leap-substrate-refactor-001
+ */
+
+export { default as ActivityRail } from './ActivityRail.svelte';
+export type { RailItem, RailItemType } from './ActivityRail.svelte';

package/src/g0-geo/SovereignMap.svelte

@@ -0,0 +1,149 @@
+<script lang="ts">
+  // SovereignMap — KOS-themed Leaflet map primitive.
+  //
+  // Design decisions (ADR: 2026-04-05-mir-civic-commons-adr.md):
+  // - Leaflet (BSD-2, 42KB gzipped) with CartoDB dark_all tiles — no API key required.
+  // - `visibility: hidden` persistence semantics: map is never destroyed when
+  //   backgrounded (consistent with CodeMirror and canvas components in LEAP).
+  // - Long-term: regional PMTiles extract for offline sovereign operation.
+
+  import { onMount, onDestroy } from 'svelte';
+  import 'leaflet/dist/leaflet.css';
+
+  interface GeoPoint {
+    lat: number;
+    lon: number;
+  }
+
+  interface MapMarker {
+    id: string;
+    lat: number;
+    lon: number;
+    label: string;
+    selected?: boolean;
+  }
+
+  interface Props {
+    center: GeoPoint;
+    zoom?: number;
+    markers?: MapMarker[];
+    onMarkerSelect?: (id: string) => void;
+  }
+
+  let { center, zoom = 12, markers = [], onMarkerSelect }: Props = $props();
+
+  let mapEl: HTMLDivElement;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let map: any = null;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let markerLayer: any = null;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let L: any = null;
+
+  onMount(async () => {
+    // Dynamic import keeps Leaflet out of the critical bundle path.
+    // CSS is statically imported at top of file — resolved from node_modules at build time (ADR: 2026-04-05-sovereign-map-css-delivery-adr.md).
+    const leafletModule = await import('leaflet');
+    L = leafletModule.default;
+
+    map = L.map(mapEl).setView([center.lat, center.lon], zoom);
+
+    L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
+      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
+      subdomains: 'abcd',
+      maxZoom: 19,
+    }).addTo(map);
+
+    markerLayer = L.layerGroup().addTo(map);
+    syncMarkers();
+  });
+
+  onDestroy(() => {
+    map?.remove();
+    map = null;
+  });
+
+  // Reactively sync markers when prop changes.
+  $effect(() => {
+    if (map) syncMarkers();
+  });
+
+  // Reactively re-centre when center prop changes.
+  $effect(() => {
+    map?.setView([center.lat, center.lon], zoom);
+  });
+
+  function syncMarkers() {
+    if (!markerLayer || !L) return;
+    markerLayer.clearLayers();
+
+    for (const m of markers) {
+      const icon = L.divIcon({
+        className: '',
+        html: `<div class="sov-marker${m.selected ? ' sov-marker--selected' : ''}"></div>`,
+        iconSize: [12, 12],
+        iconAnchor: [6, 6],
+      });
+
+      const leafletMarker = L.marker([m.lat, m.lon], { icon }).addTo(markerLayer);
+      leafletMarker.bindTooltip(m.label, { permanent: false, direction: 'top' });
+
+      if (onMarkerSelect) {
+        const id = m.id;
+        leafletMarker.on('click', () => onMarkerSelect(id));
+      }
+    }
+  }
+</script>
+
+<div bind:this={mapEl} class="sovereign-map"></div>
+
+<style>
+  .sovereign-map {
+    width: 100%;
+    height: 100%;
+    background: #1a1a1a;
+  }
+
+  /* Leaflet override: match KOS dark theme for controls */
+  :global(.leaflet-control-zoom a) {
+    background: #222;
+    border-color: #444;
+    color: #e8e0d0;
+  }
+
+  :global(.leaflet-control-zoom a:hover) {
+    background: #2a2a2a;
+  }
+
+  :global(.leaflet-control-attribution) {
+    background: rgba(26, 26, 26, 0.8);
+    color: #a09880;
+    font-size: 10px;
+  }
+
+  :global(.sov-marker) {
+    background: #b87333;
+    border: 2px solid #e8e0d0;
+    border-radius: 50%;
+    width: 10px;
+    height: 10px;
+    cursor: pointer;
+    transition: transform 0.1s;
+  }
+
+  :global(.sov-marker--selected) {
+    background: #e8e0d0;
+    border-color: #b87333;
+    transform: scale(1.4);
+  }
+
+  :global(.leaflet-tooltip) {
+    background: #222;
+    border: 1px solid #444;
+    color: #e8e0d0;
+    font-family: system-ui, sans-serif;
+    font-size: 12px;
+    padding: 4px 8px;
+  }
+</style>

package/src/g0-geo/index.ts

@@ -0,0 +1,2 @@
+// G0 Geo — Geospatial map primitives
+export { default as SovereignMap } from './SovereignMap.svelte';

package/src/index.ts

@@ -0,0 +1,68 @@
+// 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/BlockConnectionLines.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+  import type { BlockConnection } from './block-writer-types.js';
+  import type { ZoneRect } from '../../spatial/zone-tiler-types.js';
+
+  interface Props {
+    connections: BlockConnection[];
+    zones: ZoneRect[];
+    focusedBlockId?: string;
+  }
+
+  let { connections, zones, focusedBlockId = '' }: Props = $props();
+
+  interface LineSegment {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    isActive: boolean;
+    label?: string;
+  }
+
+  const lines = $derived.by((): LineSegment[] => {
+    const zoneMap = new Map(zones.map(z => [z.id, z]));
+    const result: LineSegment[] = [];
+
+    for (const conn of connections) {
+      const from = zoneMap.get(conn.fromId);
+      const to = zoneMap.get(conn.toId);
+      if (!from || !to) continue;
+
+      result.push({
+        x1: from.x + from.width / 2,
+        y1: from.y + from.height,
+        x2: to.x + to.width / 2,
+        y2: to.y,
+        isActive: conn.fromId === focusedBlockId || conn.toId === focusedBlockId,
+        label: conn.label,
+      });
+    }
+
+    return result;
+  });
+</script>
+
+{#if lines.length > 0}
+  <svg class="ds-block-connections" xmlns="http://www.w3.org/2000/svg">
+    {#each lines as line (`${line.x1},${line.y1}-${line.x2},${line.y2}`)}
+      <line
+        x1={line.x1}
+        y1={line.y1}
+        x2={line.x2}
+        y2={line.y2}
+        class:ds-block-conn-active={line.isActive}
+        class="ds-block-conn-line"
+      />
+      {#if line.label}
+        <text
+          x={(line.x1 + line.x2) / 2}
+          y={(line.y1 + line.y2) / 2 - 4}
+          class="ds-block-conn-label"
+        >{line.label}</text>
+      {/if}
+    {/each}
+  </svg>
+{/if}
+
+<style>
+  .ds-block-connections {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 5;
+  }
+
+  .ds-block-conn-line {
+    stroke: var(--color-accent, #b87333);
+    stroke-opacity: 0.35;
+    stroke-width: 1.5;
+    stroke-dasharray: 4 3;
+    transition: stroke-opacity 0.15s ease, stroke-width 0.15s ease;
+  }
+
+  .ds-block-conn-active {
+    stroke-opacity: 0.7;
+    stroke-width: 2;
+  }
+
+  .ds-block-conn-label {
+    fill: var(--color-text-muted, #a09880);
+    font-size: 10px;
+    font-family: var(--font-mono, monospace);
+    text-anchor: middle;
+    pointer-events: none;
+  }
+</style>