@stephen-netu/design-system 0.1.0

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

@@ -0,0 +1,269 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { NodeInstance, NodeDefinition, PortDefinition } from './types';
+  import type { PortDragDetail, PortDropDetail } from './node-port-types';
+  import NodePort from './NodePort.svelte';
+
+  const HEADER_HEIGHT = 32;
+  const PORT_SPACING = 24;
+  const PORT_PADDING = 12;
+
+  interface NodeProps {
+    node: NodeInstance;
+    definition: NodeDefinition;
+    selected?: boolean;
+    children?: Snippet;
+    onmove?: (id: string, position: { x: number; y: number }) => void;
+    onselect?: (id: string) => void;
+    onportdragstart?: (detail: PortDragDetail) => void;
+    onportdrop?: (detail: PortDropDetail) => void;
+  }
+
+  let {
+    node,
+    definition,
+    selected = false,
+    children,
+    onmove,
+    onselect,
+    onportdragstart,
+    onportdrop,
+  }: NodeProps = $props();
+
+  // svelte-ignore state_referenced_locally -- intentional: local copy of initial collapsed state
+  let collapsed = $state(node.collapsed);
+  let dragging = $state(false);
+  let dragStart = $state<{ x: number; y: number; nodeX: number; nodeY: number } | null>(null);
+
+  let inputPorts = $derived(
+    definition.ports.filter((p: PortDefinition) => p.direction === 'input')
+  );
+
+  let outputPorts = $derived(
+    definition.ports.filter((p: PortDefinition) => p.direction === 'output')
+  );
+
+  let bodyHeight = $derived(
+    collapsed ? 0 : node.size.height - HEADER_HEIGHT
+  );
+
+  let displayHeight = $derived(
+    collapsed ? HEADER_HEIGHT : node.size.height
+  );
+
+  function portYPosition(index: number, totalPorts: number): number {
+    if (totalPorts === 1) {
+      return HEADER_HEIGHT + PORT_PADDING + PORT_SPACING / 2;
+    }
+    return HEADER_HEIGHT + PORT_PADDING + index * PORT_SPACING;
+  }
+
+  function handleHeaderPointerDown(e: PointerEvent) {
+    if ((e.target as Element)?.closest('.n0-collapse-btn')) return;
+    e.stopPropagation();
+    dragging = true;
+    dragStart = {
+      x: e.clientX,
+      y: e.clientY,
+      nodeX: node.position.x,
+      nodeY: node.position.y,
+    };
+    (e.currentTarget as Element)?.setPointerCapture?.(e.pointerId);
+  }
+
+  function handlePointerMove(e: PointerEvent) {
+    if (!dragging || !dragStart) return;
+    e.stopPropagation();
+    const dx = e.clientX - dragStart.x;
+    const dy = e.clientY - dragStart.y;
+    onmove?.(node.id, {
+      x: dragStart.nodeX + dx,
+      y: dragStart.nodeY + dy,
+    });
+  }
+
+  function handlePointerUp(e: PointerEvent) {
+    if (dragging) {
+      dragging = false;
+      dragStart = null;
+      (e.currentTarget as Element)?.releasePointerCapture?.(e.pointerId);
+    }
+  }
+
+  function handleClick(e: MouseEvent) {
+    if (dragging) return;
+    onselect?.(node.id);
+  }
+
+  function toggleCollapse(e: MouseEvent) {
+    e.stopPropagation();
+    collapsed = !collapsed;
+  }
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<g
+  class="n0-node"
+  class:selected
+  class:dragging
+  transform="translate({node.position.x}, {node.position.y})"
+  onclick={handleClick}
+>
+  <!-- Node background -->
+  <rect
+    class="n0-node-bg"
+    width={node.size.width}
+    height={displayHeight}
+    rx={8}
+    ry={8}
+  />
+
+  <!-- Header bar -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <rect
+    class="n0-node-header"
+    width={node.size.width}
+    height={HEADER_HEIGHT}
+    rx={8}
+    ry={8}
+    onpointerdown={handleHeaderPointerDown}
+    onpointermove={handlePointerMove}
+    onpointerup={handlePointerUp}
+  />
+  <!-- Square off header bottom corners when not collapsed -->
+  {#if !collapsed}
+    <rect
+      class="n0-node-header"
+      x={0}
+      y={HEADER_HEIGHT - 8}
+      width={node.size.width}
+      height={8}
+    />
+  {/if}
+
+  <!-- Header label -->
+  <text
+    class="n0-node-label"
+    x={28}
+    y={HEADER_HEIGHT / 2 + 1}
+    dominant-baseline="central"
+    onpointerdown={handleHeaderPointerDown}
+    onpointermove={handlePointerMove}
+    onpointerup={handlePointerUp}
+  >
+    {definition.label}
+  </text>
+
+  <!-- Collapse toggle -->
+  <g
+    class="n0-collapse-btn"
+    transform="translate(10, {HEADER_HEIGHT / 2})"
+    onclick={toggleCollapse}
+    role="button"
+    tabindex="0"
+  >
+    <text
+      class="n0-collapse-icon"
+      text-anchor="middle"
+      dominant-baseline="central"
+      font-size="10"
+    >
+      {collapsed ? '\u25B6' : '\u25BC'}
+    </text>
+  </g>
+
+  <!-- Input ports -->
+  {#each inputPorts as port, i (port.id)}
+    <NodePort
+      nodeId={node.id}
+      {port}
+      position={{ x: 0, y: portYPosition(i, inputPorts.length) }}
+      connected={false}
+      {onportdragstart}
+      {onportdrop}
+    />
+  {/each}
+
+  <!-- Output ports -->
+  {#each outputPorts as port, i (port.id)}
+    <NodePort
+      nodeId={node.id}
+      {port}
+      position={{ x: node.size.width, y: portYPosition(i, outputPorts.length) }}
+      connected={false}
+      {onportdragstart}
+      {onportdrop}
+    />
+  {/each}
+
+  <!-- Body content via foreignObject -->
+  {#if !collapsed && children}
+    <foreignObject
+      x={0}
+      y={HEADER_HEIGHT}
+      width={node.size.width}
+      height={bodyHeight}
+    >
+      <div class="n0-node-body" xmlns="http://www.w3.org/1999/xhtml">
+        {@render children()}
+      </div>
+    </foreignObject>
+  {/if}
+</g>
+
+<style>
+  .n0-node {
+    cursor: default;
+  }
+
+  .n0-node.dragging {
+    cursor: grabbing;
+  }
+
+  .n0-node-bg {
+    fill: var(--n0-node-bg, #222);
+    stroke: var(--n0-node-border, rgba(184, 115, 51, 0.2));
+    stroke-width: 1.5;
+    transition: stroke 150ms ease;
+  }
+
+  .n0-node.selected .n0-node-bg {
+    stroke: var(--n0-node-border-selected, #b87333);
+    stroke-width: 2;
+  }
+
+  .n0-node-header {
+    fill: var(--n0-node-header-bg, rgba(184, 115, 51, 0.1));
+    cursor: grab;
+  }
+
+  .n0-node.dragging .n0-node-header {
+    cursor: grabbing;
+  }
+
+  .n0-node-label {
+    fill: var(--color-text, #e8e0d0);
+    font-family: system-ui, sans-serif;
+    font-size: 13px;
+    font-weight: 500;
+    pointer-events: none;
+    user-select: none;
+  }
+
+  .n0-collapse-btn {
+    cursor: pointer;
+  }
+
+  .n0-collapse-icon {
+    fill: var(--color-text-muted, #a09880);
+  }
+
+  .n0-node-body {
+    overflow: hidden;
+    padding: 8px;
+    color: var(--color-text, #e8e0d0);
+    font-family: system-ui, sans-serif;
+    font-size: 13px;
+  }
+</style>

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

@@ -0,0 +1,187 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { Transform } from './types';
+
+  interface NodeCanvasProps {
+    transform?: Transform;
+    ontransform?: (t: Transform) => void;
+    gridVisible?: boolean;
+    children: Snippet;
+  }
+
+  const MIN_ZOOM = 0.1;
+  const MAX_ZOOM = 3.0;
+  const ZOOM_SENSITIVITY = 0.001;
+
+  let {
+    transform: initialTransform,
+    ontransform,
+    gridVisible = true,
+    children,
+  }: NodeCanvasProps = $props();
+
+  // svelte-ignore state_referenced_locally -- intentional: transform is initialized from prop then managed locally
+  let transform: Transform = $state(
+    initialTransform ?? { x: 0, y: 0, scale: 1 }
+  );
+
+  let isPanning = $state(false);
+  let panOrigin = $state({ x: 0, y: 0 });
+  let transformAtPanStart = $state({ x: 0, y: 0 });
+
+  let svgEl: SVGSVGElement | undefined = $state(undefined);
+
+  // Grid size from token (matches --n0-canvas-grid-size default)
+  const GRID_SIZE = 20;
+  let scaledGridSize = $derived(GRID_SIZE * transform.scale);
+
+  function notifyTransform() {
+    ontransform?.(transform);
+  }
+
+  function onPointerDown(e: PointerEvent) {
+    // Only pan on primary button, only when clicking the SVG background
+    if (e.button !== 0) return;
+    const target = e.target as Element;
+    if (target !== svgEl && target.id !== 'n0-canvas-bg') return;
+
+    isPanning = true;
+    panOrigin = { x: e.clientX, y: e.clientY };
+    transformAtPanStart = { x: transform.x, y: transform.y };
+    (e.currentTarget as Element).setPointerCapture(e.pointerId);
+    e.preventDefault();
+  }
+
+  function onPointerMove(e: PointerEvent) {
+    if (!isPanning) return;
+    const dx = e.clientX - panOrigin.x;
+    const dy = e.clientY - panOrigin.y;
+    transform = {
+      ...transform,
+      x: transformAtPanStart.x + dx,
+      y: transformAtPanStart.y + dy,
+    };
+    notifyTransform();
+  }
+
+  function onPointerUp(e: PointerEvent) {
+    if (!isPanning) return;
+    isPanning = false;
+    (e.currentTarget as Element).releasePointerCapture(e.pointerId);
+  }
+
+  function onWheel(e: WheelEvent) {
+    e.preventDefault();
+    if (!svgEl) return;
+
+    const rect = svgEl.getBoundingClientRect();
+    // Cursor position relative to the SVG element
+    const cursorX = e.clientX - rect.left;
+    const cursorY = e.clientY - rect.top;
+
+    const delta = -e.deltaY * ZOOM_SENSITIVITY;
+    const newScale = Math.min(
+      MAX_ZOOM,
+      Math.max(MIN_ZOOM, transform.scale * (1 + delta))
+    );
+    const scaleRatio = newScale / transform.scale;
+
+    // Zoom centered on cursor: adjust translation so the point under the
+    // cursor stays fixed after scaling.
+    const newX = cursorX - scaleRatio * (cursorX - transform.x);
+    const newY = cursorY - scaleRatio * (cursorY - transform.y);
+
+    transform = { x: newX, y: newY, scale: newScale };
+    notifyTransform();
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<svg
+  bind:this={svgEl}
+  class="n0-canvas"
+  class:is-panning={isPanning}
+  role="application"
+  aria-label="Graph canvas"
+  onpointerdown={onPointerDown}
+  onpointermove={onPointerMove}
+  onpointerup={onPointerUp}
+  onpointercancel={onPointerUp}
+  onwheel={onWheel}
+>
+  <defs>
+    {#if gridVisible}
+      <pattern
+        id="n0-grid-pattern"
+        width={scaledGridSize}
+        height={scaledGridSize}
+        patternUnits="userSpaceOnUse"
+        x={transform.x % scaledGridSize}
+        y={transform.y % scaledGridSize}
+      >
+        <line
+          x1={scaledGridSize}
+          y1="0"
+          x2={scaledGridSize}
+          y2={scaledGridSize}
+          class="n0-grid-line"
+        />
+        <line
+          x1="0"
+          y1={scaledGridSize}
+          x2={scaledGridSize}
+          y2={scaledGridSize}
+          class="n0-grid-line"
+        />
+      </pattern>
+    {/if}
+  </defs>
+
+  <!-- Background fill -->
+  <rect
+    id="n0-canvas-bg"
+    width="100%"
+    height="100%"
+    class="n0-canvas-background"
+  />
+
+  <!-- Grid overlay -->
+  {#if gridVisible}
+    <rect
+      width="100%"
+      height="100%"
+      fill="url(#n0-grid-pattern)"
+      pointer-events="none"
+    />
+  {/if}
+
+  <!-- Transformed content layer -->
+  <g transform="translate({transform.x},{transform.y}) scale({transform.scale})">
+    {@render children()}
+  </g>
+</svg>
+
+<style>
+  .n0-canvas {
+    width: 100%;
+    height: 100%;
+    display: block;
+    cursor: grab;
+    touch-action: none;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  .n0-canvas.is-panning {
+    cursor: grabbing;
+  }
+
+  .n0-canvas-background {
+    fill: var(--n0-canvas-bg);
+  }
+
+  .n0-grid-line {
+    stroke: var(--n0-canvas-grid);
+    stroke-width: 1;
+  }
+</style>

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

@@ -0,0 +1,152 @@
+<script lang="ts">
+  import type { EdgeDefinition } from './types';
+
+  interface NodeEdgeProps {
+    edge?: EdgeDefinition;
+    sourcePosition: { x: number; y: number };
+    targetPosition: { x: number; y: number };
+    selected?: boolean;
+    creating?: boolean;
+    onselect?: (edgeId: string) => void;
+    ondelete?: (edgeId: string) => void;
+  }
+
+  let {
+    edge,
+    sourcePosition,
+    targetPosition,
+    selected = false,
+    creating = false,
+    onselect,
+    ondelete,
+  }: NodeEdgeProps = $props();
+
+  let hovered = $state(false);
+
+  let d = $derived.by(() => {
+    const dx = Math.abs(targetPosition.x - sourcePosition.x);
+    const offset = Math.min(dx * 0.5, 150);
+    return `M ${sourcePosition.x} ${sourcePosition.y} C ${sourcePosition.x + offset} ${sourcePosition.y}, ${targetPosition.x - offset} ${targetPosition.y}, ${targetPosition.x} ${targetPosition.y}`;
+  });
+
+  let midpoint = $derived({
+    x: (sourcePosition.x + targetPosition.x) / 2,
+    y: (sourcePosition.y + targetPosition.y) / 2,
+  });
+
+  let showDelete = $derived(hovered && !creating && edge !== undefined);
+
+  function handlePathClick(e: MouseEvent) {
+    e.stopPropagation();
+    if (edge && onselect) {
+      onselect(edge.id);
+    }
+  }
+
+  function handleDelete(e: MouseEvent) {
+    e.stopPropagation();
+    if (edge && ondelete) {
+      ondelete(edge.id);
+    }
+  }
+</script>
+
+<g
+  class="n0-edge"
+  class:is-selected={selected}
+  class:is-creating={creating}
+  class:is-hovered={hovered}
+  role="graphics-symbol"
+>
+  <!-- Invisible wide hit-area path for hover/click detection -->
+  <path
+    d={d}
+    class="n0-edge-hitarea"
+    onpointerenter={() => hovered = true}
+    onpointerleave={() => hovered = false}
+    onclick={handlePathClick}
+    onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') handlePathClick(e as unknown as MouseEvent); }}
+    role="button"
+    tabindex="-1"
+    aria-label="Select edge"
+  />
+
+  <!-- Visible bezier path -->
+  <path
+    d={d}
+    class="n0-edge-line"
+    pointer-events="none"
+  />
+
+  <!-- Delete button at midpoint (shown on hover) -->
+  {#if showDelete}
+    <g
+      class="n0-edge-delete"
+      transform="translate({midpoint.x},{midpoint.y})"
+      onclick={handleDelete}
+      onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') handleDelete(e as unknown as MouseEvent); }}
+      role="button"
+      tabindex="-1"
+    >
+      <circle r="8" class="n0-edge-delete-bg" />
+      <line x1="-3.5" y1="-3.5" x2="3.5" y2="3.5" class="n0-edge-delete-x" />
+      <line x1="3.5" y1="-3.5" x2="-3.5" y2="3.5" class="n0-edge-delete-x" />
+    </g>
+  {/if}
+</g>
+
+<style>
+  .n0-edge-hitarea {
+    fill: none;
+    stroke: transparent;
+    stroke-width: 12px;
+    cursor: pointer;
+  }
+
+  .n0-edge-line {
+    fill: none;
+    stroke: var(--n0-edge-color);
+    stroke-width: var(--n0-edge-width, 2px);
+    transition: stroke 0.15s ease, stroke-width 0.15s ease;
+  }
+
+  .n0-edge.is-hovered .n0-edge-line {
+    stroke: var(--n0-edge-color-hover);
+    stroke-width: 3px;
+  }
+
+  .n0-edge.is-selected .n0-edge-line {
+    stroke: var(--n0-edge-color-hover);
+    stroke-width: 3px;
+  }
+
+  .n0-edge.is-creating .n0-edge-line {
+    stroke: var(--n0-edge-color-creating);
+    stroke-dasharray: 8 4;
+  }
+
+  .n0-edge-delete {
+    cursor: pointer;
+  }
+
+  .n0-edge-delete-bg {
+    fill: var(--n0-node-bg, #222);
+    stroke: var(--n0-edge-color-hover);
+    stroke-width: 1.5px;
+  }
+
+  .n0-edge-delete-x {
+    stroke: var(--n0-edge-color-hover);
+    stroke-width: 1.5px;
+    stroke-linecap: round;
+  }
+
+  .n0-edge-delete:hover .n0-edge-delete-bg {
+    fill: #c0392b;
+    stroke: #c0392b;
+  }
+
+  .n0-edge-delete:hover .n0-edge-delete-x {
+    stroke: #fff;
+  }
+</style>