@stephen-netu/design-system 0.1.0

package/src/n0-node-graph/NodePalette.svelte

@@ -0,0 +1,318 @@
+<script lang="ts">
+  import type { NodeDefinition } from './types';
+
+  interface NodePaletteProps {
+    definitions: NodeDefinition[];
+    onselect?: (kind: string) => void;
+  }
+
+  let { definitions, onselect }: NodePaletteProps = $props();
+
+  let searchQuery = $state('');
+
+  // Filter definitions by search query
+  let filtered = $derived(
+    searchQuery.trim() === ''
+      ? definitions
+      : definitions.filter(def => {
+          const q = searchQuery.toLowerCase();
+          return (
+            def.kind.toLowerCase().includes(q) ||
+            def.label.toLowerCase().includes(q) ||
+            def.description.toLowerCase().includes(q)
+          );
+        })
+  );
+
+  // Extract scope from a definition: use first port's type prefix (e.g., "app:ryu")
+  // ScopedPortType = `${PortScope}:${string}:${string}` — we take first two segments
+  function getScope(def: NodeDefinition): string {
+    if (def.ports.length === 0) return 'General';
+    const parts = def.ports[0].type.split(':');
+    if (parts.length >= 2) return `${parts[0]}:${parts[1]}`;
+    return 'General';
+  }
+
+  // Group filtered definitions by scope
+  let groups = $derived.by(() => {
+    const map = new Map<string, NodeDefinition[]>();
+    for (const def of filtered) {
+      const scope = getScope(def);
+      const list = map.get(scope);
+      if (list) {
+        list.push(def);
+      } else {
+        map.set(scope, [def]);
+      }
+    }
+    return map;
+  });
+
+  // Track collapsed group state
+  let collapsedGroups = $state<Set<string>>(new Set());
+
+  function toggleGroup(scope: string) {
+    const next = new Set(collapsedGroups);
+    if (next.has(scope)) {
+      next.delete(scope);
+    } else {
+      next.add(scope);
+    }
+    collapsedGroups = next;
+  }
+
+  function handleDragStart(e: DragEvent, def: NodeDefinition) {
+    if (!e.dataTransfer) return;
+    e.dataTransfer.effectAllowed = 'copy';
+    e.dataTransfer.setData(
+      'application/json',
+      JSON.stringify({ kind: def.kind, defaultSize: { width: 180, height: 120 } })
+    );
+  }
+
+  function handleClick(kind: string) {
+    onselect?.(kind);
+  }
+
+  function countPorts(def: NodeDefinition, direction: 'input' | 'output'): number {
+    return def.ports.filter(p => p.direction === direction).length;
+  }
+</script>
+
+<div class="n0-palette" role="complementary" aria-label="Node palette">
+  <div class="n0-palette-search">
+    <input
+      type="text"
+      placeholder="Filter nodes..."
+      bind:value={searchQuery}
+      aria-label="Filter node definitions"
+    />
+  </div>
+
+  <div class="n0-palette-list">
+    {#each [...groups] as [scope, defs] (scope)}
+      <div class="n0-palette-group">
+        <button
+          class="n0-palette-group-header"
+          onclick={() => toggleGroup(scope)}
+          aria-expanded={!collapsedGroups.has(scope)}
+        >
+          <span class="n0-palette-chevron" class:collapsed={collapsedGroups.has(scope)}>
+            &#9662;
+          </span>
+          <span class="n0-palette-group-label">{scope}</span>
+          <span class="n0-palette-group-count">{defs.length}</span>
+        </button>
+
+        {#if !collapsedGroups.has(scope)}
+          <div class="n0-palette-group-items">
+            {#each defs as def (def.kind)}
+              <!-- svelte-ignore a11y_no_static_element_interactions -->
+              <div
+                class="n0-palette-card"
+                draggable="true"
+                ondragstart={(e) => handleDragStart(e, def)}
+                onclick={() => handleClick(def.kind)}
+                role="button"
+                tabindex="0"
+                onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') handleClick(def.kind); }}
+                aria-label="Add {def.label} node"
+              >
+                <div class="n0-palette-card-header">
+                  <span class="n0-palette-card-label">{def.label}</span>
+                  <span class="n0-palette-card-kind">{def.kind}</span>
+                </div>
+                {#if def.description}
+                  <div class="n0-palette-card-desc">{def.description}</div>
+                {/if}
+                <div class="n0-palette-card-ports">
+                  <span class="n0-palette-port-in" title="Inputs">
+                    &#9654; {countPorts(def, 'input')} in
+                  </span>
+                  <span class="n0-palette-port-out" title="Outputs">
+                    {countPorts(def, 'output')} out &#9654;
+                  </span>
+                </div>
+              </div>
+            {/each}
+          </div>
+        {/if}
+      </div>
+    {/each}
+
+    {#if filtered.length === 0}
+      <div class="n0-palette-empty">No matching nodes</div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .n0-palette {
+    display: flex;
+    flex-direction: column;
+    width: 240px;
+    height: 100%;
+    background: var(--n0-node-bg);
+    border-right: 1px solid var(--n0-node-border);
+    overflow: hidden;
+    font-family: var(--font-mono, monospace);
+    color: var(--color-text, #e8e0d0);
+  }
+
+  .n0-palette-search {
+    padding: 8px;
+    border-bottom: 1px solid var(--n0-node-border);
+    flex-shrink: 0;
+  }
+
+  .n0-palette-search input {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 6px 8px;
+    background: var(--n0-canvas-bg);
+    border: 1px solid var(--n0-node-border);
+    border-radius: var(--radius-sm, 4px);
+    color: var(--color-text, #e8e0d0);
+    font-family: inherit;
+    font-size: 0.8rem;
+    outline: none;
+  }
+
+  .n0-palette-search input:focus {
+    border-color: var(--n0-node-border-selected);
+  }
+
+  .n0-palette-search input::placeholder {
+    color: var(--color-text-muted, #a09880);
+  }
+
+  .n0-palette-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 4px 0;
+  }
+
+  .n0-palette-group-header {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    width: 100%;
+    padding: 6px 8px;
+    background: var(--n0-node-header-bg);
+    border: none;
+    border-bottom: 1px solid var(--n0-node-border);
+    color: var(--color-accent, #b87333);
+    font-family: inherit;
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    cursor: pointer;
+    text-align: left;
+  }
+
+  .n0-palette-group-header:hover {
+    background: rgba(184, 115, 51, 0.15);
+  }
+
+  .n0-palette-chevron {
+    display: inline-block;
+    font-size: 0.65rem;
+    transition: transform 150ms ease;
+  }
+
+  .n0-palette-chevron.collapsed {
+    transform: rotate(-90deg);
+  }
+
+  .n0-palette-group-label {
+    flex: 1;
+  }
+
+  .n0-palette-group-count {
+    font-size: 0.65rem;
+    opacity: 0.6;
+  }
+
+  .n0-palette-group-items {
+    padding: 4px 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .n0-palette-card {
+    padding: 8px;
+    background: var(--n0-canvas-bg);
+    border: 1px solid var(--n0-node-border);
+    border-radius: var(--n0-node-radius);
+    cursor: grab;
+    user-select: none;
+    transition: border-color 150ms ease;
+  }
+
+  .n0-palette-card:hover {
+    border-color: var(--n0-node-border-selected);
+  }
+
+  .n0-palette-card:active {
+    cursor: grabbing;
+  }
+
+  .n0-palette-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    gap: 4px;
+    margin-bottom: 2px;
+  }
+
+  .n0-palette-card-label {
+    font-size: 0.8rem;
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .n0-palette-card-kind {
+    font-size: 0.6rem;
+    color: var(--color-text-muted, #a09880);
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  .n0-palette-card-desc {
+    font-size: 0.7rem;
+    color: var(--color-text-muted, #a09880);
+    line-height: 1.3;
+    margin-bottom: 4px;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .n0-palette-card-ports {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.65rem;
+    opacity: 0.7;
+  }
+
+  .n0-palette-port-in {
+    color: var(--n0-port-color-input);
+  }
+
+  .n0-palette-port-out {
+    color: var(--n0-port-color-output);
+  }
+
+  .n0-palette-empty {
+    padding: 16px;
+    text-align: center;
+    font-size: 0.8rem;
+    color: var(--color-text-muted, #a09880);
+  }
+</style>

package/src/n0-node-graph/NodePort.svelte

@@ -0,0 +1,128 @@
+<script lang="ts" module>
+  import type { PortDirection, PortDefinition } from './types';
+  import type { PortDragDetail, PortDropDetail } from './node-port-types';
+
+  // Re-export for backward compatibility
+  export type { PortDragDetail, PortDropDetail } from './node-port-types';
+</script>
+
+<script lang="ts">
+  interface NodePortProps {
+    nodeId: string;
+    port: PortDefinition;
+    position: { x: number; y: number };
+    connected: boolean;
+    onportdragstart?: (detail: PortDragDetail) => void;
+    onportdrop?: (detail: PortDropDetail) => void;
+  }
+
+  let {
+    nodeId,
+    port,
+    position,
+    connected,
+    onportdragstart,
+    onportdrop,
+  }: NodePortProps = $props();
+
+  let hovering = $state(false);
+  let incompatible = $state(false);
+
+  function handlePointerDown(e: PointerEvent) {
+    e.stopPropagation();
+    onportdragstart?.({
+      nodeId,
+      portId: port.id,
+      direction: port.direction,
+      type: port.type,
+      position: { x: position.x, y: position.y },
+    });
+  }
+
+  function handlePointerUp(e: PointerEvent) {
+    e.stopPropagation();
+    onportdrop?.({
+      nodeId,
+      portId: port.id,
+      direction: port.direction,
+      type: port.type,
+    });
+  }
+
+  function handlePointerEnter() {
+    hovering = true;
+  }
+
+  function handlePointerLeave() {
+    hovering = false;
+  }
+
+  let fillColor = $derived(
+    incompatible
+      ? 'var(--n0-port-color-incompatible)'
+      : port.direction === 'input'
+        ? 'var(--n0-port-color-input)'
+        : 'var(--n0-port-color-output)'
+  );
+
+  let stateClass = $derived(
+    incompatible
+      ? 'incompatible'
+      : hovering
+        ? 'hovering'
+        : connected
+          ? 'connected'
+          : 'default'
+  );
+</script>
+
+<circle
+  class="n0-port {stateClass}"
+  cx={position.x}
+  cy={position.y}
+  r={6}
+  fill={fillColor}
+  role="button"
+  tabindex="-1"
+  onpointerdown={handlePointerDown}
+  onpointerup={handlePointerUp}
+  onpointerenter={handlePointerEnter}
+  onpointerleave={handlePointerLeave}
+>
+  <title>{port.label} ({port.type})</title>
+</circle>
+
+<style>
+  .n0-port {
+    cursor: crosshair;
+    stroke: rgba(0, 0, 0, 0.3);
+    stroke-width: 1.5;
+    transition: transform 150ms ease, stroke-width 150ms ease;
+    transform-origin: var(--cx) var(--cy);
+    transform-box: fill-box;
+  }
+
+  .n0-port.hovering {
+    transform: scale(var(--n0-port-hover-scale, 1.3));
+    stroke-width: 2;
+  }
+
+  .n0-port.connected {
+    stroke: rgba(255, 255, 255, 0.3);
+    stroke-width: 2;
+  }
+
+  .n0-port.incompatible {
+    stroke: var(--n0-port-color-incompatible);
+    stroke-width: 2;
+    opacity: 0.7;
+  }
+
+  .n0-port.default {
+    opacity: 0.85;
+  }
+
+  .n0-port.default:hover {
+    opacity: 1;
+  }
+</style>

package/src/n0-node-graph/index.ts

@@ -0,0 +1,33 @@
+// N0 Node Graph — Barrel Export
+
+// Types
+export type {
+  PortScope,
+  ScopedPortType,
+  PortDirection,
+  PortDefinition,
+  NodeDefinition,
+  NodeInstance,
+  EdgeDefinition,
+  GraphSchema,
+  ValidationError,
+  ValidationResult,
+  Point,
+  Transform,
+  Size,
+} from './types';
+
+// Interaction types
+export type { PortDragDetail, PortDropDetail } from './node-port-types';
+
+// Validation
+export { validateGraph } from './validate';
+
+// Components
+export { default as NodeCanvas } from './NodeCanvas.svelte';
+export { default as Node } from './Node.svelte';
+export { default as NodePort } from './NodePort.svelte';
+export { default as NodeEdge } from './NodeEdge.svelte';
+export { default as GraphEditor } from './GraphEditor.svelte';
+export { default as NodePalette } from './NodePalette.svelte';
+export { default as GraphHistory } from './GraphHistory.svelte';

package/src/n0-node-graph/n0-tokens.css

@@ -0,0 +1,29 @@
+/* N0 Node Graph — CSS Design Tokens */
+:root {
+  /* Canvas */
+  --n0-canvas-bg: var(--color-bg-canvas, #1a1a1a);
+  --n0-canvas-grid: rgba(255, 255, 255, 0.03);
+  --n0-canvas-grid-size: 20px;
+
+  /* Nodes */
+  --n0-node-bg: var(--color-bg-panel, #222);
+  --n0-node-border: rgba(184, 115, 51, 0.2);
+  --n0-node-border-selected: var(--color-accent, #b87333);
+  --n0-node-header-bg: rgba(184, 115, 51, 0.1);
+  --n0-node-radius: 8px;
+  --n0-node-min-width: 180px;
+  --n0-node-max-width: 400px;
+
+  /* Ports */
+  --n0-port-radius: 6px;
+  --n0-port-color-input: #7aa2f7;
+  --n0-port-color-output: #9ece6a;
+  --n0-port-color-incompatible: #c0392b;
+  --n0-port-hover-scale: 1.3;
+
+  /* Edges */
+  --n0-edge-width: 2px;
+  --n0-edge-color: rgba(184, 115, 51, 0.4);
+  --n0-edge-color-hover: var(--color-accent, #b87333);
+  --n0-edge-color-creating: rgba(184, 115, 51, 0.6);
+}

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

@@ -0,0 +1,19 @@
+// 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;
+}

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

@@ -0,0 +1,96 @@
+// N0 Node Graph — Schema Layer Types
+// Pure TypeScript — no Svelte, no DOM dependencies
+
+// === Scoped Port Types ===
+
+export type PortScope = 'realm' | 'grove' | 'accord' | 'system' | 'app';
+
+// scope:id:type — globally unique, no ambiguity
+export type ScopedPortType = `${PortScope}:${string}:${string}`;
+
+export type PortDirection = 'input' | 'output';
+
+// === Port ===
+
+export interface PortDefinition {
+  id: string;
+  label: string;
+  type: ScopedPortType;
+  direction: PortDirection;
+  required: boolean;
+  maxConnections: number;
+}
+
+// === Node ===
+
+export interface NodeDefinition {
+  kind: string;
+  label: string;
+  description: string;
+  ports: PortDefinition[];
+  metadata: Record<string, unknown>;
+}
+
+export interface NodeInstance {
+  id: string;
+  kind: string;
+  position: Point;
+  size: Size;
+  data: Record<string, unknown>;
+  collapsed: boolean;
+}
+
+// === Edge ===
+
+export interface EdgeDefinition {
+  id: string;
+  sourceNodeId: string;
+  sourcePortId: string;
+  targetNodeId: string;
+  targetPortId: string;
+  metadata: Record<string, unknown>;
+}
+
+// === Graph Schema ===
+
+export interface GraphSchema {
+  id: string;
+  name: string;
+  version: string;
+  nodeDefinitions: NodeDefinition[];
+  nodes: NodeInstance[];
+  edges: EdgeDefinition[];
+}
+
+// === Validation ===
+
+export interface ValidationError {
+  code: string;
+  message: string;
+  nodeId?: string;
+  edgeId?: string;
+  portId?: string;
+}
+
+export interface ValidationResult {
+  valid: boolean;
+  errors: ValidationError[];
+}
+
+// === Geometry ===
+
+export interface Point {
+  x: number;
+  y: number;
+}
+
+export interface Transform {
+  x: number;
+  y: number;
+  scale: number;
+}
+
+export interface Size {
+  width: number;
+  height: number;
+}