@ruckc/truss-graph 0.0.0-stage → 1.1.1

package/dist/Graph.svelte

@@ -0,0 +1,458 @@
+<script lang="ts">
+	import { onMount, type Snippet } from 'svelte';
+	import { Button } from '@ruckc/truss-ui';
+	import { autoLayout } from './layout.js';
+	import { defaultPorts, opposite, portAnchor, routeEdge, type Anchor, type Rect } from './routing.js';
+	import { NODE_H, NODE_W, type EdgeType, type GraphEdge, type GraphNode, type GraphPort, type NodeCtx, type NodeRenderer } from './types.js';
+
+	let {
+		nodes = $bindable([]),
+		edges = $bindable([]),
+		selected = $bindable([]),
+		selectedEdge = $bindable(),
+		height = 480,
+		edgeType = 'bezier',
+		direction = 'LR',
+		connectable = true,
+		editable = true,
+		fitOnMount = true,
+		minimap = false,
+		minimapPosition = 'bottom-right',
+		nodeTypes,
+		node,
+		body,
+		edgeLabel,
+		isValidConnection,
+		onconnect,
+		onchange
+	}: {
+		nodes?: GraphNode[];
+		edges?: GraphEdge[];
+		/** Selected node ids. */
+		selected?: string[];
+		selectedEdge?: string;
+		height?: number | string;
+		/** Default routing for every edge (an edge's own `type` wins): bezier, straight, step, smoothstep, or avoid (steers around nodes). */
+		edgeType?: EdgeType;
+		/** Which sides the default ports use, and the direction of auto layout. */
+		direction?: 'LR' | 'TB';
+		/** Drag from an output port to an input port to create edges. */
+		connectable?: boolean;
+		/** Allow moving and deleting. */
+		editable?: boolean;
+		fitOnMount?: boolean;
+		/** Overview panel showing every node and the current viewport; click or drag it to pan. */
+		minimap?: boolean;
+		minimapPosition?: 'bottom-right' | 'bottom-left';
+		/** Custom node components by `node.type`. Each is a snippet receiving `{ node, selected, dragging, update }` and draws the whole node. */
+		nodeTypes?: Record<string, NodeRenderer>;
+		/** Custom component for every node that has no matching `nodeTypes` entry. */
+		node?: NodeRenderer;
+		/** Content inside the default card, under the title. */
+		body?: Snippet<[node: GraphNode]>;
+		/** Custom component rendered at the middle of each edge (replaces `edge.label`). */
+		edgeLabel?: Snippet<[edge: GraphEdge]>;
+		/** Return false to reject a connection. */
+		isValidConnection?: (from: { node: string; port: string }, to: { node: string; port: string }) => boolean;
+		onconnect?: (edge: GraphEdge) => void;
+		onchange?: () => void;
+	} = $props();
+
+	let root: HTMLDivElement;
+	let tx = $state(0), ty = $state(0), k = $state(1);
+	let drag = $state<{ ids: string[]; dx: number; dy: number } | null>(null);
+	let link = $state<{ from: string; port: string; x: number; y: number; over?: { node: string; port: string } } | null>(null);
+	let panning = $state(false);
+	let rw = $state(0), rh = $state(0);
+
+	// ---- minimap geometry: world bounds = nodes ∪ viewport (so the viewport box is always visible)
+	const MW = 184, MH = 124;
+	const mm = $derived.by(() => {
+		if (!minimap || !rw) return null;
+		const vx = -tx / k, vy = -ty / k, vw = rw / k, vh = rh / k;
+		let x0 = vx, y0 = vy, x1 = vx + vw, y1 = vy + vh;
+		for (const n of nodes) { x0 = Math.min(x0, n.x); y0 = Math.min(y0, n.y); x1 = Math.max(x1, n.x + W(n)); y1 = Math.max(y1, n.y + H(n)); }
+		const pad = 24; x0 -= pad; y0 -= pad; x1 += pad; y1 += pad;
+		const sc = Math.min(MW / (x1 - x0), MH / (y1 - y0));
+		return { x0, y0, sc, w: (x1 - x0) * sc, h: (y1 - y0) * sc, view: { x: (vx - x0) * sc, y: (vy - y0) * sc, w: vw * sc, h: vh * sc } };
+	});
+	function mmPan(e: PointerEvent) {
+		if (!mm) return;
+		const svg = e.currentTarget as SVGSVGElement;
+		svg.setPointerCapture(e.pointerId);
+		const to = (ev: PointerEvent) => {
+			const r = svg.getBoundingClientRect();
+			const gx = mm.x0 + (ev.clientX - r.left) / mm.sc, gy = mm.y0 + (ev.clientY - r.top) / mm.sc;
+			tx = rw / 2 - gx * k;
+			ty = rh / 2 - gy * k;
+		};
+		to(e);
+		const up = () => { svg.removeEventListener('pointermove', to); svg.removeEventListener('pointerup', up); };
+		svg.addEventListener('pointermove', to);
+		svg.addEventListener('pointerup', up);
+	}
+
+	const W = (n: GraphNode) => n.width ?? NODE_W;
+	const H = (n: GraphNode) => n.height ?? NODE_H;
+	const portsOf = (n: GraphNode): GraphPort[] => n.ports ?? defaultPorts(n, direction);
+	const shown = $derived(nodes.map((n) => (drag?.ids.includes(n.id) ? { ...n, x: n.x + drag.dx, y: n.y + drag.dy } : n)));
+	const byId = $derived(new Map(shown.map((n) => [n.id, n])));
+	const rects = $derived<Rect[]>(shown.map((n) => ({ id: n.id, x: n.x, y: n.y, w: W(n), h: H(n) })));
+	const needsObstacles = $derived(edgeType === 'avoid' || edges.some((e) => e.type === 'avoid'));
+
+	const findPort = (n: GraphNode, id: string | undefined, kind: 'in' | 'out') => {
+		const ps = portsOf(n);
+		return ps.find((p) => p.kind === kind && (id == null || p.id === id)) ?? ps.find((p) => p.kind === kind);
+	};
+	const geo = $derived(
+		edges.flatMap((e) => {
+			const a = byId.get(e.from), b = byId.get(e.to);
+			if (!a || !b) return [];
+			const pa = findPort(a, e.fromPort, 'out'), pb = findPort(b, e.toPort, 'in');
+			if (!pa || !pb) return [];
+			const r = routeEdge(e.type ?? edgeType, portAnchor(a, pa, portsOf(a)), portAnchor(b, pb, portsOf(b)), needsObstacles ? rects : []);
+			return [{ e, d: r.d, m: r.mid }];
+		})
+	);
+	const toGraph = (cx: number, cy: number) => {
+		const r = root.getBoundingClientRect();
+		return { x: (cx - r.left - tx) / k, y: (cy - r.top - ty) / k };
+	};
+
+	export function fit(padding = 48) {
+		if (!nodes.length || !root) return;
+		const x0 = Math.min(...nodes.map((n) => n.x)), y0 = Math.min(...nodes.map((n) => n.y));
+		const x1 = Math.max(...nodes.map((n) => n.x + W(n))), y1 = Math.max(...nodes.map((n) => n.y + H(n)));
+		const { width, height: hh } = root.getBoundingClientRect();
+		k = Math.min(1.5, Math.max(0.2, Math.min((width - padding * 2) / (x1 - x0), (hh - padding * 2) / (y1 - y0))));
+		tx = (width - (x1 - x0) * k) / 2 - x0 * k;
+		ty = (hh - (y1 - y0) * k) / 2 - y0 * k;
+	}
+	export function layout() {
+		nodes = autoLayout(nodes, edges, { direction });
+		onchange?.();
+		requestAnimationFrame(() => fit());
+	}
+	function zoomAt(factor: number, cx: number, cy: number) {
+		const nk = Math.min(2.5, Math.max(0.2, k * factor));
+		tx = cx - (cx - tx) * (nk / k);
+		ty = cy - (cy - ty) * (nk / k);
+		k = nk;
+	}
+	const zoomCenter = (f: number) => zoomAt(f, root.clientWidth / 2, root.clientHeight / 2);
+
+	onMount(() => {
+		const wheel = (e: WheelEvent) => {
+			// let scrollable content inside custom nodes scroll normally
+			if ((e.target as HTMLElement).closest('.nowheel')) return;
+			e.preventDefault();
+			const r = root.getBoundingClientRect();
+			zoomAt(Math.exp(-e.deltaY * (e.ctrlKey ? 0.01 : 0.0015)), e.clientX - r.left, e.clientY - r.top);
+		};
+		root.addEventListener('wheel', wheel, { passive: false });
+		if (fitOnMount) fit();
+		return () => root.removeEventListener('wheel', wheel);
+	});
+
+	// ---- background: pan + clear selection
+	function bgDown(e: PointerEvent) {
+		if ((e.target as HTMLElement).closest('.node, .controls, .edge-hit, .elabel, .minimap')) return;
+		selected = []; selectedEdge = undefined;
+		root.focus();
+		const sx = e.clientX, sy = e.clientY, tx0 = tx, ty0 = ty;
+		panning = true;
+		const move = (ev: PointerEvent) => { tx = tx0 + ev.clientX - sx; ty = ty0 + ev.clientY - sy; };
+		const up = () => { panning = false; window.removeEventListener('pointermove', move); window.removeEventListener('pointerup', up); };
+		window.addEventListener('pointermove', move);
+		window.addEventListener('pointerup', up);
+	}
+
+	// ---- nodes: select + drag. Controls inside custom nodes opt out of dragging.
+	const INTERACTIVE = 'input, textarea, select, button, a, label, [contenteditable="true"], [role="slider"], .nodrag';
+	function nodeDown(e: PointerEvent, n: GraphNode) {
+		const t = e.target as HTMLElement;
+		if (t.closest('.port')) return;
+		e.stopPropagation();
+		selectedEdge = undefined;
+		if (e.shiftKey || e.ctrlKey || e.metaKey) selected = selected.includes(n.id) ? selected.filter((i) => i !== n.id) : [...selected, n.id];
+		else if (!selected.includes(n.id)) selected = [n.id];
+		if (!editable || t.closest(INTERACTIVE)) return;
+		const ids = [...selected], sx = e.clientX, sy = e.clientY;
+		let moved = false;
+		const move = (ev: PointerEvent) => {
+			const dx = (ev.clientX - sx) / k, dy = (ev.clientY - sy) / k;
+			if (!moved && Math.hypot(dx, dy) * k < 3) return;
+			moved = true;
+			drag = { ids, dx, dy };
+		};
+		const up = () => {
+			window.removeEventListener('pointermove', move);
+			window.removeEventListener('pointerup', up);
+			if (drag) {
+				const d = drag;
+				nodes = nodes.map((m) => (d.ids.includes(m.id) ? { ...m, x: Math.round(m.x + d.dx), y: Math.round(m.y + d.dy) } : m));
+				drag = null;
+				onchange?.();
+			}
+		};
+		window.addEventListener('pointermove', move);
+		window.addEventListener('pointerup', up);
+	}
+	function updateNode(id: string, patch: Partial<GraphNode>) {
+		nodes = nodes.map((n) => (n.id === id ? { ...n, ...patch } : n));
+		onchange?.();
+	}
+	const ctxOf = (n: GraphNode): NodeCtx => ({
+		node: n,
+		selected: selected.includes(n.id),
+		dragging: !!drag?.ids.includes(n.id),
+		update: (patch) => updateNode(n.id, patch)
+	});
+	const rendererOf = (n: GraphNode) => (n.type ? nodeTypes?.[n.type] : undefined) ?? node;
+
+	// ---- connecting
+	const valid = (from: { node: string; port: string }, to: { node: string; port: string }) =>
+		from.node !== to.node && (isValidConnection?.(from, to) ?? true);
+	function portDown(e: PointerEvent, n: GraphNode, p: GraphPort) {
+		if (!connectable || !editable) return;
+		e.stopPropagation();
+		e.preventDefault();
+		const g0 = toGraph(e.clientX, e.clientY);
+		link = { from: n.id, port: p.id, x: g0.x, y: g0.y };
+		const move = (ev: PointerEvent) => {
+			const g = toGraph(ev.clientX, ev.clientY);
+			const el = document.elementFromPoint(ev.clientX, ev.clientY)?.closest<HTMLElement>('[data-port-in]');
+			const over = el ? { node: el.dataset.portIn!, port: el.dataset.portId! } : undefined;
+			link = { from: n.id, port: p.id, x: g.x, y: g.y, over: over && valid({ node: n.id, port: p.id }, over) ? over : undefined };
+		};
+		const up = () => {
+			window.removeEventListener('pointermove', move);
+			window.removeEventListener('pointerup', up);
+			const to = link?.over;
+			if (to && !edges.some((x) => x.from === n.id && x.to === to.node && (x.fromPort ?? p.id) === p.id && (x.toPort ?? to.port) === to.port)) {
+				const edge: GraphEdge = { id: `${n.id}.${p.id}->${to.node}.${to.port}`, from: n.id, to: to.node, fromPort: p.id, toPort: to.port };
+				edges = [...edges, edge];
+				onconnect?.(edge);
+				onchange?.();
+			}
+			link = null;
+		};
+		window.addEventListener('pointermove', move);
+		window.addEventListener('pointerup', up);
+	}
+	const linkRoute = $derived.by(() => {
+		if (!link) return null;
+		const a = byId.get(link.from);
+		const pa = a && portsOf(a).find((p) => p.id === link!.port);
+		if (!a || !pa) return null;
+		const from = portAnchor(a, pa, portsOf(a));
+		const to: Anchor = { x: link.x, y: link.y, side: opposite(from.side) };
+		const t = edgeType === 'avoid' ? 'smoothstep' : edgeType;
+		return routeEdge(t, from, to).d;
+	});
+
+	function remove() {
+		if (!editable) return;
+		if (selectedEdge) edges = edges.filter((e) => e.id !== selectedEdge);
+		if (selected.length) {
+			edges = edges.filter((e) => !selected.includes(e.from) && !selected.includes(e.to));
+			nodes = nodes.filter((n) => !selected.includes(n.id));
+		}
+		selected = []; selectedEdge = undefined;
+		onchange?.();
+	}
+	function onKey(e: KeyboardEvent) {
+		if ((e.target as HTMLElement).closest('input, textarea, select, [contenteditable="true"]')) return; // typing inside a node
+		const step = e.shiftKey ? 32 : 8;
+		const mv = { ArrowLeft: [-step, 0], ArrowRight: [step, 0], ArrowUp: [0, -step], ArrowDown: [0, step] }[e.key];
+		if (mv && selected.length && editable) {
+			nodes = nodes.map((n) => (selected.includes(n.id) ? { ...n, x: n.x + mv[0], y: n.y + mv[1] } : n));
+		} else if (e.key === 'Delete' || e.key === 'Backspace') remove();
+		else if (e.key === '+' || e.key === '=') zoomCenter(1.2);
+		else if (e.key === '-') zoomCenter(1 / 1.2);
+		else if (e.key === '0') fit();
+		else if (e.key === 'Escape') { selected = []; selectedEdge = undefined; }
+		else return;
+		e.preventDefault();
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
+<div
+	class="trg" bind:this={root} bind:clientWidth={rw} bind:clientHeight={rh} role="application" tabindex="0" data-panning={panning}
+	aria-label="Graph editor. Arrow keys move selected nodes, Delete removes, plus and minus zoom, 0 fits to view."
+	style:height={typeof height === 'number' ? `${height}px` : height}
+	style:--tx="{tx}px" style:--ty="{ty}px" style:--k={k}
+	onpointerdown={bgDown} onkeydown={onKey}
+>
+	<div class="viewport" style:transform="translate({tx}px, {ty}px) scale({k})">
+		<svg class="edges" width="1" height="1">
+			<defs>
+				<marker id="trg-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
+					<path d="M1,1 L9,5 L1,9 z" fill="currentColor" />
+				</marker>
+			</defs>
+			{#each geo as g (g.e.id)}
+				<g class="edge" data-kind={g.e.kind ?? 'neutral'} data-selected={selectedEdge === g.e.id} data-animated={g.e.animated}>
+					<path class="line" d={g.d} marker-end="url(#trg-arrow)" />
+					<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_noninteractive_element_interactions -->
+					<path class="edge-hit" d={g.d} role="img" aria-label="Edge {g.e.from} to {g.e.to}" onclick={(ev) => { ev.stopPropagation(); selected = []; selectedEdge = g.e.id; root.focus(); }} />
+					{#if edgeLabel}
+						<foreignObject x={g.m.x - 90} y={g.m.y - 16} width="180" height="32" class="elabel">
+							<div class="elabel-in">{@render edgeLabel(g.e)}</div>
+						</foreignObject>
+					{:else if g.e.label}
+						<g transform="translate({g.m.x},{g.m.y})">
+							<rect class="lbl-bg" x={-(g.e.label.length * 3.4 + 8)} y="-10" width={g.e.label.length * 6.8 + 16} height="20" rx="10" />
+							<text class="lbl" text-anchor="middle" dominant-baseline="central">{g.e.label}</text>
+						</g>
+					{/if}
+				</g>
+			{/each}
+			{#if linkRoute}<path class="line temp" d={linkRoute} />{/if}
+		</svg>
+
+		{#each shown as n (n.id)}
+			{@const render = rendererOf(n)}
+			{@const bare = !!render && n.chrome !== true}
+			{@const ports = portsOf(n)}
+			<div
+				class="node" role="group" tabindex="0" aria-label="{n.label}{n.subtitle ? `, ${n.subtitle}` : ''}"
+				data-kind={n.kind ?? 'neutral'} data-bare={bare} data-selected={selected.includes(n.id)} data-dragging={!!drag?.ids.includes(n.id)}
+				style:left="{n.x}px" style:top="{n.y}px" style:width="{W(n)}px" style:height="{H(n)}px"
+				onpointerdown={(e) => nodeDown(e, n)}
+			>
+				{#if render}
+					<div class="custom" class:fill={bare}>{@render render(ctxOf(n))}</div>
+				{:else}
+					<div class="content">
+						<div class="label">{n.label}</div>
+						{#if n.subtitle}<div class="subtitle">{n.subtitle}</div>{/if}
+						{#if body}{@render body(n)}{/if}
+					</div>
+				{/if}
+
+				{#each ports as p (p.id)}
+					{@const a = portAnchor(n, p, ports)}
+					{#if p.kind === 'in'}
+						<span class="port" data-side={p.side} data-port-in={n.id} data-port-id={p.id} data-hot={link?.over?.node === n.id && link.over.port === p.id}
+							style:left="{a.x - n.x}px" style:top="{a.y - n.y}px"></span>
+					{:else}
+						<span class="port" role="presentation" data-side={p.side} data-connectable={connectable && editable} onpointerdown={(e) => portDown(e, n, p)}
+							style:left="{a.x - n.x}px" style:top="{a.y - n.y}px"></span>
+					{/if}
+					{#if p.label}<span class="plabel" data-side={p.side} style:left="{a.x - n.x}px" style:top="{a.y - n.y}px">{p.label}</span>{/if}
+				{/each}
+			</div>
+		{/each}
+	</div>
+
+	{#if mm}
+		<div class="minimap" data-pos={minimapPosition} style:width="{MW}px" style:height="{MH}px">
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<svg width={mm.w} height={mm.h} role="img" aria-label="Minimap: drag to pan the view" onpointerdown={mmPan}>
+				{#each geo as g (g.e.id)}
+					{@const a = byId.get(g.e.from)}{@const bn = byId.get(g.e.to)}
+					{#if a && bn}<line class="mme" x1={(a.x + W(a) / 2 - mm.x0) * mm.sc} y1={(a.y + H(a) / 2 - mm.y0) * mm.sc} x2={(bn.x + W(bn) / 2 - mm.x0) * mm.sc} y2={(bn.y + H(bn) / 2 - mm.y0) * mm.sc} />{/if}
+				{/each}
+				{#each shown as n (n.id)}
+					<rect class="mmn" data-kind={n.kind ?? 'neutral'} data-selected={selected.includes(n.id)} x={(n.x - mm.x0) * mm.sc} y={(n.y - mm.y0) * mm.sc} width={Math.max(2, W(n) * mm.sc)} height={Math.max(2, H(n) * mm.sc)} rx="1.5" />
+				{/each}
+				<rect class="mmv" x={mm.view.x} y={mm.view.y} width={mm.view.w} height={mm.view.h} />
+			</svg>
+		</div>
+	{/if}
+
+	<div class="controls" role="toolbar" aria-label="Graph controls">
+		<Button variant="minimal" intent="neutral" size="sm" icon="plus" aria-label="Zoom in" onclick={() => zoomCenter(1.2)} />
+		<Button variant="minimal" intent="neutral" size="sm" icon="minus" aria-label="Zoom out" onclick={() => zoomCenter(1 / 1.2)} />
+		<Button variant="minimal" intent="neutral" size="sm" icon="expand" aria-label="Fit to view" onclick={() => fit()} />
+		{#if editable}<Button variant="minimal" intent="neutral" size="sm" icon="refresh" aria-label="Auto layout" onclick={layout} />{/if}
+	</div>
+</div>
+
+<style>
+	.trg {
+		--grid: 24px;
+		position: relative; overflow: hidden; outline: none; cursor: grab; user-select: none; touch-action: none;
+		background-color: var(--tr-surface);
+		background-image: radial-gradient(circle, var(--tr-outline-variant) 1px, transparent 1.4px);
+		background-size: calc(var(--grid) * var(--k)) calc(var(--grid) * var(--k));
+		background-position: var(--tx) var(--ty);
+		border: 1px solid var(--tr-outline-variant); border-radius: var(--tr-radius-md);
+	}
+	.trg[data-panning='true'] { cursor: grabbing; }
+	.trg:focus-visible { box-shadow: var(--tr-focus-ring); border-color: var(--tr-primary); }
+	.viewport { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
+	.edges { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
+
+	.edge { --c: var(--tr-outline); color: var(--c); }
+	.edge[data-kind='primary'] { --c: var(--tr-primary); }
+	.edge[data-kind='success'] { --c: var(--tr-success); }
+	.edge[data-kind='warning'] { --c: var(--tr-warning); }
+	.edge[data-kind='danger'] { --c: var(--tr-danger); }
+	.line { fill: none; stroke: var(--c); stroke-width: 1.75; stroke-linejoin: round; }
+	.line.temp { stroke: var(--tr-primary); stroke-dasharray: 5 4; color: var(--tr-primary); }
+	.edge[data-animated='true'] .line { stroke-dasharray: 6 5; animation: flow 0.9s linear infinite; }
+	@keyframes flow { to { stroke-dashoffset: -11; } }
+	@media (prefers-reduced-motion: reduce) { .edge[data-animated='true'] .line { animation: none; } }
+	.edge[data-selected='true'] .line { stroke-width: 3; }
+	.edge-hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; }
+	.edge:hover .line { stroke-width: 2.75; }
+	.lbl-bg { fill: var(--tr-surface-container-highest); stroke: var(--tr-outline-variant); }
+	.lbl { fill: var(--tr-on-surface); font-size: 11px; font-weight: 600; pointer-events: none; }
+	.elabel { overflow: visible; pointer-events: none; }
+	.elabel-in { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; pointer-events: auto; color: var(--tr-on-surface); font: 600 11px var(--tr-font-sans); }
+
+	.node {
+		--c: var(--tr-outline);
+		position: absolute; display: flex; align-items: center; box-sizing: border-box; cursor: default;
+		background: var(--tr-surface-container-low); border: 1px solid var(--tr-outline-variant); border-radius: var(--tr-radius-md);
+		box-shadow: var(--tr-elevation-1); outline: none;
+		transition: box-shadow var(--tr-dur) var(--tr-ease), border-color var(--tr-dur) var(--tr-ease);
+	}
+	.node::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: var(--tr-radius-md) 0 0 var(--tr-radius-md); background: var(--c); }
+	.node[data-kind='primary'] { --c: var(--tr-primary); }
+	.node[data-kind='success'] { --c: var(--tr-success); }
+	.node[data-kind='warning'] { --c: var(--tr-warning); }
+	.node[data-kind='danger'] { --c: var(--tr-danger); }
+	.node:hover { border-color: var(--tr-outline); }
+	.node[data-selected='true'] { border-color: var(--tr-primary); box-shadow: var(--tr-focus-ring), var(--tr-elevation-2); background: color-mix(in srgb, var(--tr-primary-container) 40%, var(--tr-surface-container-low)); }
+	.node:focus-visible { box-shadow: var(--tr-focus-ring); }
+	.node[data-dragging='true'] { box-shadow: var(--tr-elevation-3); z-index: 2; cursor: grabbing; }
+	/* Bare nodes: a custom component draws everything; we only add a selection outline */
+	.node[data-bare='true'] { background: none; border: 0; box-shadow: none; border-radius: 0; }
+	.node[data-bare='true']::before { display: none; }
+	.node[data-bare='true'][data-selected='true'] { background: none; outline: 2px solid var(--tr-primary); outline-offset: 3px; border-radius: var(--tr-radius-sm); box-shadow: none; }
+	.node[data-bare='true']:focus-visible { outline: 2px solid var(--tr-primary); outline-offset: 3px; box-shadow: none; }
+	.custom { width: 100%; min-width: 0; }
+	.custom.fill { height: 100%; }
+	.content { flex: 1; min-width: 0; padding: 0 12px 0 16px; line-height: 1.25; }
+	.label { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tr-on-surface); }
+	.subtitle { font-size: var(--tr-text-sm); color: var(--tr-on-surface-variant); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+	.port { position: absolute; z-index: 3; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--tr-surface-container-highest); border: 2px solid var(--tr-outline); box-sizing: border-box; transition: transform var(--tr-dur-fast) var(--tr-ease); }
+	.port[data-connectable='true'] { cursor: crosshair; }
+	.port[data-connectable='true']:hover, .port[data-hot='true'] { background: var(--tr-primary); border-color: var(--tr-primary); transform: scale(1.35); }
+	/* larger invisible hit area for ports */
+	.port::after { content: ''; position: absolute; inset: -6px; }
+	.plabel { position: absolute; z-index: 3; pointer-events: none; font: 600 10px var(--tr-font-sans); color: var(--tr-on-surface-variant); white-space: nowrap; }
+	.plabel[data-side='right'] { transform: translate(-100%, -50%); margin-left: -12px; }
+	.plabel[data-side='left'] { transform: translate(0, -50%); margin-left: 12px; }
+	.plabel[data-side='top'] { transform: translate(-50%, 0); margin-top: 8px; }
+	.plabel[data-side='bottom'] { transform: translate(-50%, -100%); margin-top: -8px; }
+
+	.minimap { position: absolute; bottom: 8px; z-index: 4; display: grid; place-items: center; background: var(--tr-surface-container-highest); border: 1px solid var(--tr-outline-variant); border-radius: var(--tr-radius-md); box-shadow: var(--tr-elevation-2); overflow: hidden; cursor: default; }
+	.minimap[data-pos='bottom-right'] { right: 8px; }
+	.minimap[data-pos='bottom-left'] { left: 8px; }
+	.minimap svg { display: block; cursor: grab; touch-action: none; }
+	.mme { stroke: var(--tr-outline); stroke-width: 1; stroke-opacity: 0.6; }
+	.mmn { fill: var(--tr-outline); }
+	.mmn[data-kind='primary'] { fill: var(--tr-primary); }
+	.mmn[data-kind='success'] { fill: var(--tr-success); }
+	.mmn[data-kind='warning'] { fill: var(--tr-warning); }
+	.mmn[data-kind='danger'] { fill: var(--tr-danger); }
+	.mmn[data-selected='true'] { stroke: var(--tr-on-surface); stroke-width: 1.5; }
+	.mmv { fill: var(--tr-primary); fill-opacity: 0.12; stroke: var(--tr-primary); stroke-width: 1.5; pointer-events: none; }
+	.controls { position: absolute; right: 8px; top: 8px; display: flex; gap: 2px; padding: 2px; background: var(--tr-surface-container-highest); border: 1px solid var(--tr-outline-variant); border-radius: var(--tr-radius-pill); box-shadow: var(--tr-elevation-2); cursor: default; }
+</style>

package/dist/Graph.svelte.d.ts

@@ -0,0 +1,46 @@
+import { type Snippet } from 'svelte';
+import { type EdgeType, type GraphEdge, type GraphNode, type NodeRenderer } from './types.js';
+type $$ComponentProps = {
+    nodes?: GraphNode[];
+    edges?: GraphEdge[];
+    /** Selected node ids. */
+    selected?: string[];
+    selectedEdge?: string;
+    height?: number | string;
+    /** Default routing for every edge (an edge's own `type` wins): bezier, straight, step, smoothstep, or avoid (steers around nodes). */
+    edgeType?: EdgeType;
+    /** Which sides the default ports use, and the direction of auto layout. */
+    direction?: 'LR' | 'TB';
+    /** Drag from an output port to an input port to create edges. */
+    connectable?: boolean;
+    /** Allow moving and deleting. */
+    editable?: boolean;
+    fitOnMount?: boolean;
+    /** Overview panel showing every node and the current viewport; click or drag it to pan. */
+    minimap?: boolean;
+    minimapPosition?: 'bottom-right' | 'bottom-left';
+    /** Custom node components by `node.type`. Each is a snippet receiving `{ node, selected, dragging, update }` and draws the whole node. */
+    nodeTypes?: Record<string, NodeRenderer>;
+    /** Custom component for every node that has no matching `nodeTypes` entry. */
+    node?: NodeRenderer;
+    /** Content inside the default card, under the title. */
+    body?: Snippet<[node: GraphNode]>;
+    /** Custom component rendered at the middle of each edge (replaces `edge.label`). */
+    edgeLabel?: Snippet<[edge: GraphEdge]>;
+    /** Return false to reject a connection. */
+    isValidConnection?: (from: {
+        node: string;
+        port: string;
+    }, to: {
+        node: string;
+        port: string;
+    }) => boolean;
+    onconnect?: (edge: GraphEdge) => void;
+    onchange?: () => void;
+};
+declare const Graph: import("svelte").Component<$$ComponentProps, {
+    fit: (padding?: number) => void;
+    layout: () => void;
+}, "selected" | "nodes" | "edges" | "selectedEdge">;
+type Graph = ReturnType<typeof Graph>;
+export default Graph;

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Graph } from './Graph.svelte';
+export { autoLayout } from './layout.js';
+export { routeEdge, portAnchor, defaultPorts } from './routing.js';
+export type { GraphNode, GraphEdge, GraphPort, NodeKind, NodeCtx, NodeRenderer, EdgeType, Side } from './types.js';

package/dist/index.js

@@ -0,0 +1,3 @@
+export { default as Graph } from './Graph.svelte';
+export { autoLayout } from './layout.js';
+export { routeEdge, portAnchor, defaultPorts } from './routing.js';

package/dist/layout.d.ts

@@ -0,0 +1,10 @@
+import { type GraphEdge, type GraphNode } from './types.js';
+/**
+ * Layered (Sugiyama-lite) auto layout: longest-path layering, one barycenter sweep to
+ * reduce crossings, columns centred vertically. Cycle-safe. Returns new node objects.
+ */
+export declare function autoLayout(nodes: GraphNode[], edges: GraphEdge[], opts?: {
+    gapX?: number;
+    gapY?: number;
+    direction?: 'LR' | 'TB';
+}): GraphNode[];

package/dist/layout.js

@@ -0,0 +1,59 @@
+import { NODE_H, NODE_W } from './types.js';
+/**
+ * Layered (Sugiyama-lite) auto layout: longest-path layering, one barycenter sweep to
+ * reduce crossings, columns centred vertically. Cycle-safe. Returns new node objects.
+ */
+export function autoLayout(nodes, edges, opts = {}) {
+    const { gapX = 90, gapY = 28, direction = 'LR' } = opts;
+    const ids = new Set(nodes.map((n) => n.id));
+    const preds = new Map(nodes.map((n) => [n.id, []]));
+    for (const e of edges)
+        if (ids.has(e.from) && ids.has(e.to) && e.from !== e.to)
+            preds.get(e.to).push(e.from);
+    const layer = new Map();
+    const visiting = new Set();
+    const depth = (id) => {
+        if (layer.has(id))
+            return layer.get(id);
+        if (visiting.has(id))
+            return 0; // break cycles
+        visiting.add(id);
+        const d = preds.get(id).reduce((m, p) => Math.max(m, depth(p) + 1), 0);
+        visiting.delete(id);
+        layer.set(id, d);
+        return d;
+    };
+    nodes.forEach((n) => depth(n.id));
+    const cols = [];
+    for (const n of nodes)
+        (cols[layer.get(n.id)] ??= []).push(n);
+    const order = new Map();
+    cols.forEach((col, ci) => {
+        if (ci > 0) {
+            const bary = (n) => {
+                const ps = preds.get(n.id).map((p) => order.get(p)).filter((v) => v != null);
+                return ps.length ? ps.reduce((a, b) => a + b, 0) / ps.length : Infinity;
+            };
+            col.sort((a, b) => bary(a) - bary(b));
+        }
+        col.forEach((n, i) => order.set(n.id, i));
+    });
+    const w = (n) => n.width ?? NODE_W;
+    const h = (n) => n.height ?? NODE_H;
+    const pos = new Map();
+    const span = (col) => col.reduce((a, n) => a + (direction === 'LR' ? h(n) : w(n)) + gapY, -gapY);
+    const tallest = Math.max(0, ...cols.filter(Boolean).map(span));
+    let offset = 0;
+    cols.forEach((col) => {
+        if (!col)
+            return;
+        const colSize = col.reduce((m, n) => Math.max(m, direction === 'LR' ? w(n) : h(n)), 0);
+        let cursor = (tallest - span(col)) / 2;
+        for (const n of col) {
+            pos.set(n.id, direction === 'LR' ? { x: offset, y: cursor } : { x: cursor, y: offset });
+            cursor += (direction === 'LR' ? h(n) : w(n)) + gapY;
+        }
+        offset += colSize + gapX;
+    });
+    return nodes.map((n) => ({ ...n, ...pos.get(n.id) }));
+}

package/dist/routing.d.ts

@@ -0,0 +1,25 @@
+import type { EdgeType, GraphNode, GraphPort, Side } from './types.js';
+export type Pt = {
+    x: number;
+    y: number;
+};
+export type Anchor = Pt & {
+    side: Side;
+};
+export type Rect = {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    id?: string;
+};
+export type Routed = {
+    d: string;
+    mid: Pt;
+};
+export declare const opposite: (s: Side) => Side;
+export declare function defaultPorts(n: GraphNode, direction?: 'LR' | 'TB'): GraphPort[];
+/** Where a port sits on its node; several ports on one side are spread evenly. */
+export declare function portAnchor(n: GraphNode, port: GraphPort, ports: GraphPort[]): Anchor;
+/** Route an edge between two anchors with the chosen method. `obstacles` is only used by `avoid`. */
+export declare function routeEdge(type: EdgeType, a: Anchor, b: Anchor, obstacles?: Rect[]): Routed;

package/dist/routing.js

@@ -0,0 +1,242 @@
+import { NODE_H, NODE_W } from './types.js';
+const DIR = { left: { x: -1, y: 0 }, right: { x: 1, y: 0 }, top: { x: 0, y: -1 }, bottom: { x: 0, y: 1 } };
+export const opposite = (s) => ({ left: 'right', right: 'left', top: 'bottom', bottom: 'top' }[s]);
+const horiz = (s) => s === 'left' || s === 'right';
+const dist = (a, b) => Math.hypot(a.x - b.x, a.y - b.y);
+// ---------- ports
+export function defaultPorts(n, direction = 'LR') {
+    const ps = [];
+    if (n.input !== false)
+        ps.push({ id: 'in', side: direction === 'TB' ? 'top' : 'left', kind: 'in' });
+    if (n.output !== false)
+        ps.push({ id: 'out', side: direction === 'TB' ? 'bottom' : 'right', kind: 'out' });
+    return ps;
+}
+/** Where a port sits on its node; several ports on one side are spread evenly. */
+export function portAnchor(n, port, ports) {
+    const w = n.width ?? NODE_W, h = n.height ?? NODE_H;
+    const peers = ports.filter((p) => p.side === port.side);
+    const t = (peers.indexOf(port) + 1) / (peers.length + 1);
+    switch (port.side) {
+        case 'left': return { x: n.x, y: n.y + h * t, side: 'left' };
+        case 'right': return { x: n.x + w, y: n.y + h * t, side: 'right' };
+        case 'top': return { x: n.x + w * t, y: n.y, side: 'top' };
+        default: return { x: n.x + w * t, y: n.y + h, side: 'bottom' };
+    }
+}
+// ---------- geometry helpers
+function simplify(pts) {
+    const out = [];
+    for (const p of pts) {
+        const last = out.at(-1);
+        if (last && Math.abs(last.x - p.x) < 0.01 && Math.abs(last.y - p.y) < 0.01)
+            continue;
+        out.push(p);
+    }
+    // drop collinear middle points
+    return out.filter((p, i) => {
+        if (i === 0 || i === out.length - 1)
+            return true;
+        const a = out[i - 1], b = out[i + 1];
+        return !((a.x === p.x && p.x === b.x) || (a.y === p.y && p.y === b.y));
+    });
+}
+function pathOf(pts, r) {
+    if (pts.length < 3 || r <= 0)
+        return 'M' + pts.map((p) => `${p.x},${p.y}`).join(' L');
+    let d = `M${pts[0].x},${pts[0].y}`;
+    for (let i = 1; i < pts.length - 1; i++) {
+        const prev = pts[i - 1], cur = pts[i], next = pts[i + 1];
+        const l1 = dist(prev, cur), l2 = dist(cur, next);
+        const rr = Math.min(r, l1 / 2, l2 / 2);
+        const a = { x: cur.x + ((prev.x - cur.x) / l1) * rr, y: cur.y + ((prev.y - cur.y) / l1) * rr };
+        const b = { x: cur.x + ((next.x - cur.x) / l2) * rr, y: cur.y + ((next.y - cur.y) / l2) * rr };
+        d += ` L${a.x},${a.y} Q${cur.x},${cur.y} ${b.x},${b.y}`;
+    }
+    const last = pts.at(-1);
+    return d + ` L${last.x},${last.y}`;
+}
+function midOf(pts) {
+    const total = pts.slice(1).reduce((s, p, i) => s + dist(pts[i], p), 0);
+    let walk = total / 2;
+    for (let i = 1; i < pts.length; i++) {
+        const l = dist(pts[i - 1], pts[i]);
+        if (walk <= l) {
+            const t = l ? walk / l : 0;
+            return { x: pts[i - 1].x + (pts[i].x - pts[i - 1].x) * t, y: pts[i - 1].y + (pts[i].y - pts[i - 1].y) * t };
+        }
+        walk -= l;
+    }
+    return pts.at(-1);
+}
+const stubOf = (a, s) => ({ x: a.x + DIR[a.side].x * s, y: a.y + DIR[a.side].y * s });
+// ---------- routers
+function bezier(a, b) {
+    const o = Math.max(40, dist(a, b) / 2.2);
+    const c1 = { x: a.x + DIR[a.side].x * o, y: a.y + DIR[a.side].y * o };
+    const c2 = { x: b.x + DIR[b.side].x * o, y: b.y + DIR[b.side].y * o };
+    return {
+        d: `M${a.x},${a.y} C${c1.x},${c1.y} ${c2.x},${c2.y} ${b.x},${b.y}`,
+        mid: { x: (a.x + 3 * c1.x + 3 * c2.x + b.x) / 8, y: (a.y + 3 * c1.y + 3 * c2.y + b.y) / 8 }
+    };
+}
+/** Orthogonal route with short stubs leaving/entering perpendicular to each node side. */
+function orthogonalPoints(a, b, stub = 24) {
+    const p1 = stubOf(a, stub), q1 = stubOf(b, stub);
+    const mid = [];
+    if (horiz(a.side) && horiz(b.side)) {
+        if (a.side === b.side) {
+            const x = a.side === 'right' ? Math.max(p1.x, q1.x) : Math.min(p1.x, q1.x);
+            mid.push({ x, y: p1.y }, { x, y: q1.y });
+        }
+        else if ((a.side === 'right' && q1.x >= p1.x) || (a.side === 'left' && q1.x <= p1.x)) {
+            const x = (p1.x + q1.x) / 2;
+            mid.push({ x, y: p1.y }, { x, y: q1.y });
+        }
+        else {
+            const y = Math.abs(a.y - b.y) < 20 ? a.y - 70 : (a.y + b.y) / 2;
+            mid.push({ x: p1.x, y }, { x: q1.x, y });
+        }
+    }
+    else if (!horiz(a.side) && !horiz(b.side)) {
+        if (a.side === b.side) {
+            const y = a.side === 'bottom' ? Math.max(p1.y, q1.y) : Math.min(p1.y, q1.y);
+            mid.push({ x: p1.x, y }, { x: q1.x, y });
+        }
+        else if ((a.side === 'bottom' && q1.y >= p1.y) || (a.side === 'top' && q1.y <= p1.y)) {
+            const y = (p1.y + q1.y) / 2;
+            mid.push({ x: p1.x, y }, { x: q1.x, y });
+        }
+        else {
+            const x = Math.abs(a.x - b.x) < 20 ? a.x + 90 : (a.x + b.x) / 2;
+            mid.push({ x, y: p1.y }, { x, y: q1.y });
+        }
+    }
+    else if (horiz(a.side))
+        mid.push({ x: q1.x, y: p1.y });
+    else
+        mid.push({ x: p1.x, y: q1.y });
+    return simplify([a, p1, ...mid, q1, b]);
+}
+/**
+ * Obstacle-avoiding orthogonal routing: A* over the "Hanan" grid formed by the obstacle edges (inflated by `margin`)
+ * and the two stub points, with a penalty per bend so routes stay tidy. Returns null when no clear route exists.
+ */
+function avoidPoints(a, b, obstacles, margin = 14, stub = 26) {
+    const p1 = stubOf(a, stub), q1 = stubOf(b, stub);
+    const rs = obstacles.map((o) => ({ l: o.x - margin, t: o.y - margin, r: o.x + o.w + margin, b: o.y + o.h + margin }));
+    const inside = (x, y) => rs.some((r) => x > r.l && x < r.r && y > r.t && y < r.b);
+    if (inside(p1.x, p1.y) || inside(q1.x, q1.y))
+        return null;
+    const uniq = (v) => [...new Set(v.map((n) => Math.round(n * 100) / 100))].sort((m, n) => m - n);
+    const withChannels = (v) => {
+        const out = [...v];
+        for (let i = 1; i < v.length; i++)
+            if (v[i] - v[i - 1] > 3 * margin)
+                out.push((v[i] + v[i - 1]) / 2);
+        return uniq(out);
+    };
+    const xs = withChannels(uniq([p1.x, q1.x, ...rs.flatMap((r) => [r.l, r.r])]));
+    const ys = withChannels(uniq([p1.y, q1.y, ...rs.flatMap((r) => [r.t, r.b])]));
+    const nx = xs.length, ny = ys.length;
+    const xi = (x) => xs.indexOf(Math.round(x * 100) / 100);
+    const yi = (y) => ys.indexOf(Math.round(y * 100) / 100);
+    const s = { x: xi(p1.x), y: yi(p1.y) }, g = { x: xi(q1.x), y: yi(q1.y) };
+    if (s.x < 0 || s.y < 0 || g.x < 0 || g.y < 0)
+        return null;
+    const DX = [1, -1, 0, 0], DY = [0, 0, 1, -1];
+    const key = (x, y, d) => (x * ny + y) * 5 + d;
+    const best = new Map();
+    const prev = new Map();
+    const heap = []; // f, g, x, y, dir
+    const push = (e) => {
+        heap.push(e);
+        let i = heap.length - 1;
+        while (i > 0) {
+            const p = (i - 1) >> 1;
+            if (heap[p][0] <= heap[i][0])
+                break;
+            [heap[p], heap[i]] = [heap[i], heap[p]];
+            i = p;
+        }
+    };
+    const pop = () => {
+        const top = heap[0], last = heap.pop();
+        if (heap.length) {
+            heap[0] = last;
+            let i = 0;
+            for (;;) {
+                const l = 2 * i + 1, r = l + 1;
+                let m = i;
+                if (l < heap.length && heap[l][0] < heap[m][0])
+                    m = l;
+                if (r < heap.length && heap[r][0] < heap[m][0])
+                    m = r;
+                if (m === i)
+                    break;
+                [heap[m], heap[i]] = [heap[i], heap[m]];
+                i = m;
+            }
+        }
+        return top;
+    };
+    const h = (x, y) => Math.abs(xs[x] - xs[g.x]) + Math.abs(ys[y] - ys[g.y]);
+    const BEND = 40;
+    best.set(key(s.x, s.y, 4), 0);
+    push([h(s.x, s.y), 0, s.x, s.y, 4]);
+    let goalKey = -1;
+    while (heap.length) {
+        const [, gc, x, y, d] = pop();
+        const k = key(x, y, d);
+        if (gc > (best.get(k) ?? Infinity))
+            continue;
+        if (x === g.x && y === g.y) {
+            goalKey = k;
+            break;
+        }
+        for (let nd = 0; nd < 4; nd++) {
+            const px = x + DX[nd], py = y + DY[nd];
+            if (px < 0 || py < 0 || px >= nx || py >= ny)
+                continue;
+            // segment between adjacent grid lines is wholly inside or outside an obstacle: test its midpoint
+            if (inside((xs[x] + xs[px]) / 2, (ys[y] + ys[py]) / 2))
+                continue;
+            const cost = gc + Math.abs(xs[px] - xs[x]) + Math.abs(ys[py] - ys[y]) + (d !== 4 && d !== nd ? BEND : 0);
+            const nk = key(px, py, nd);
+            if (cost < (best.get(nk) ?? Infinity)) {
+                best.set(nk, cost);
+                prev.set(nk, k);
+                push([cost + h(px, py), cost, px, py, nd]);
+            }
+        }
+    }
+    if (goalKey < 0)
+        return null;
+    const path = [];
+    for (let k = goalKey; k !== undefined; k = prev.get(k)) {
+        const cell = Math.floor(k / 5);
+        path.push({ x: xs[Math.floor(cell / ny)], y: ys[cell % ny] });
+    }
+    return simplify([a, ...path.reverse(), b]);
+}
+/** Route an edge between two anchors with the chosen method. `obstacles` is only used by `avoid`. */
+export function routeEdge(type, a, b, obstacles = []) {
+    switch (type) {
+        case 'straight':
+            return { d: `M${a.x},${a.y} L${b.x},${b.y}`, mid: { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 } };
+        case 'step': {
+            const p = orthogonalPoints(a, b);
+            return { d: pathOf(p, 0), mid: midOf(p) };
+        }
+        case 'smoothstep': {
+            const p = orthogonalPoints(a, b);
+            return { d: pathOf(p, 12), mid: midOf(p) };
+        }
+        case 'avoid': {
+            const p = avoidPoints(a, b, obstacles) ?? orthogonalPoints(a, b);
+            return { d: pathOf(p, 10), mid: midOf(p) };
+        }
+        default:
+            return bezier(a, b);
+    }
+}

package/dist/types.d.ts

@@ -0,0 +1,58 @@
+import type { Snippet } from 'svelte';
+export type NodeKind = 'neutral' | 'primary' | 'success' | 'warning' | 'danger';
+export type Side = 'left' | 'right' | 'top' | 'bottom';
+export type EdgeType = 'bezier' | 'straight' | 'step' | 'smoothstep' | 'avoid';
+export type GraphPort = {
+    id: string;
+    side: Side;
+    /** `out` ports start connections, `in` ports receive them. */
+    kind: 'in' | 'out';
+    label?: string;
+};
+export type GraphNode = {
+    id: string;
+    x: number;
+    y: number;
+    label: string;
+    subtitle?: string;
+    kind?: NodeKind;
+    /** Picks a renderer from the `nodeTypes` registry on <Graph>. */
+    type?: string;
+    /** Fixed size in graph units (edge math relies on it). Defaults 180×56. */
+    width?: number;
+    height?: number;
+    /** Shorthand: set false to hide the default input / output port. Ignored when `ports` is set. */
+    input?: boolean;
+    output?: boolean;
+    /** Explicit ports on any side; several per side are spread evenly. */
+    ports?: GraphPort[];
+    /** Draw the default card around a custom renderer too. By default custom renderers are bare (they draw everything). */
+    chrome?: boolean;
+    /** Free-form payload for custom node components. */
+    data?: Record<string, any>;
+};
+export type GraphEdge = {
+    id: string;
+    from: string;
+    to: string;
+    /** Port ids; default to the first `out` port of `from` and first `in` port of `to`. */
+    fromPort?: string;
+    toPort?: string;
+    label?: string;
+    kind?: NodeKind;
+    /** Overrides the graph-wide `edgeType` for this edge. */
+    type?: EdgeType;
+    /** Flowing dashes, e.g. for live data. */
+    animated?: boolean;
+};
+/** What a custom node component receives. */
+export type NodeCtx = {
+    node: GraphNode;
+    selected: boolean;
+    dragging: boolean;
+    /** Patch this node (e.g. `update({ data: { ...node.data, value: 3 } })`). */
+    update: (patch: Partial<GraphNode>) => void;
+};
+export type NodeRenderer = Snippet<[ctx: NodeCtx]>;
+export declare const NODE_W = 180;
+export declare const NODE_H = 56;

package/dist/types.js

@@ -0,0 +1,2 @@
+export const NODE_W = 180;
+export const NODE_H = 56;

package/package.json

@@ -1,6 +1,46 @@
 {
-  "name": "@ruckc/truss-graph",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+	"name": "@ruckc/truss-graph",
+	"version": "1.1.1",
+	"description": "Zero-dependency node/edge graph editor for Truss UI",
+	"type": "module",
+	"license": "MIT",
+	"scripts": {
+		"package": "svelte-package -i src/lib -o dist"
+	},
+	"files": [
+		"dist"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"peerDependencies": {
+		"svelte": "^5.20.0",
+		"@ruckc/truss-ui": "^1.0.0"
+	},
+	"author": "Curtis Ruck",
+	"homepage": "https://truss.ruck.io",
+	"bugs": {
+		"url": "https://github.com/ruckc/truss-ui/issues"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/ruckc/truss-ui.git",
+		"directory": "packages/graph"
+	},
+	"keywords": [
+		"svelte",
+		"sveltekit",
+		"truss",
+		"graph",
+		"node-editor",
+		"diagram"
+	]
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.