@quantumwake/kgraph 0.1.2 → 0.2.1

package/dist/ism/index.d.ts

@@ -0,0 +1,60 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { N as NodeComponentProps, E as EdgeComponentProps, a as KGraphNode, b as KGraphEdge } from '../types-C9DQLToO.js';
+import { CSSProperties } from 'react';
+
+declare const NODE_WIDTH = 208;
+declare const NODE_HEIGHT = 120;
+declare const NODE_COLLAPSED = 44;
+type StudioNodeKind = 'state' | 'processor' | 'transform' | 'function' | 'connector';
+interface StudioNodeData {
+    kind?: StudioNodeKind;
+    typeLabel?: string;
+    title?: string;
+    subtitle?: string;
+    collapsed?: boolean;
+    onToggleCollapse?: () => void;
+    [key: string]: unknown;
+}
+declare function kindForNodeType(nodeType: string): StudioNodeKind;
+declare function displayType(nodeType: string): string;
+/**
+ * StudioNode — read-only kgraph node card in the Alethic ISM studio aesthetic
+ * (gradient tinted by type, neon accent header, glowing border when selected).
+ * Display fields come from node.data (StudioNodeData).
+ */
+declare function StudioNode({ data, selected }: NodeComponentProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * CleanEdge — read-only kgraph edge for the dark studio (kgraph's default edge
+ * is hardcoded purple). Dashed bezier that reads on a dark canvas, with an
+ * arrowhead; brighter on hover/selection.
+ */
+declare function CleanEdge({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, selected }: EdgeComponentProps): react_jsx_runtime.JSX.Element;
+
+interface StudioGraphProps {
+    /** Pre-mapped kgraph nodes; node.data should carry StudioNodeData fields. */
+    nodes: KGraphNode[];
+    /** Pre-mapped kgraph edges. */
+    edges: KGraphEdge[];
+    /** Fired when a node is clicked. */
+    onNodeClick?: (node: KGraphNode) => void;
+    /** Allow per-node collapse (default true). */
+    collapsible?: boolean;
+    /**
+     * Id of the node to render as selected (glowing accent border). Selection is
+     * host-controlled — clicking a node reports via onNodeClick; the host decides
+     * what is selected and passes it back here.
+     */
+    selectedNodeId?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * StudioGraph — a read-only kgraph canvas with the Alethic ISM studio look:
+ * every node renders as StudioNode, every edge as CleanEdge, non-interactive
+ * (no drag/connect), fit-to-view. Manages per-node collapse: collapsed nodes
+ * shrink to an icon and their kgraph dimensions/edge anchors shrink with them.
+ */
+declare function StudioGraph({ nodes, edges, onNodeClick, collapsible, selectedNodeId, className, style }: StudioGraphProps): react_jsx_runtime.JSX.Element;
+
+export { CleanEdge, NODE_COLLAPSED, NODE_HEIGHT, NODE_WIDTH, StudioGraph, type StudioGraphProps, StudioNode, type StudioNodeData, type StudioNodeKind, displayType, kindForNodeType };

package/dist/ism/index.js

@@ -0,0 +1,197 @@
+import { Handle_default, getBezierPath, KGraphCanvas_default } from '../chunk-374K6PXA.js';
+import { Plug, FunctionSquare, Shuffle, Cpu, Database, Plus, Minus } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+
+var NODE_WIDTH = 208;
+var NODE_HEIGHT = 120;
+var NODE_COLLAPSED = 44;
+var KIND = {
+  state: { accent: "#34d399", glow: "rgba(16,185,129,0.18)", icon: Database },
+  // emerald
+  processor: { accent: "#fbbf24", glow: "rgba(245,158,11,0.18)", icon: Cpu },
+  // amber
+  transform: { accent: "#a78bfa", glow: "rgba(139,92,246,0.18)", icon: Shuffle },
+  // violet
+  function: { accent: "#38bdf8", glow: "rgba(14,165,233,0.18)", icon: FunctionSquare },
+  // sky
+  connector: { accent: "#94a3b8", glow: "rgba(100,116,139,0.18)", icon: Plug }
+  // slate
+};
+function kindForNodeType(nodeType) {
+  if (nodeType === "state") return "state";
+  if (nodeType.includes("coalescer") || nodeType.includes("composite")) return "transform";
+  if (nodeType.startsWith("function")) return "function";
+  if (nodeType.startsWith("connector")) return "connector";
+  return "processor";
+}
+var PROCESSOR_LABELS = {
+  processor_openai: "OpenAI",
+  processor_visual_openai: "Vision",
+  processor_anthropic: "Anthropic",
+  processor_google_ai: "Google AI",
+  processor_llama: "Llama",
+  processor_mistral: "Mistral",
+  processor_python: "Python",
+  processor_provider: "Provider",
+  processor_state_coalescer: "Coalescer",
+  processor_state_composite: "Composite",
+  function_datasource_sql: "SQL Source",
+  connector_source: "Source",
+  connector_sink: "Sink",
+  trainer: "Trainer",
+  processor: "Processor"
+};
+function displayType(nodeType) {
+  if (PROCESSOR_LABELS[nodeType]) return PROCESSOR_LABELS[nodeType];
+  const cleaned = nodeType.replace(/^processor_/, "").replace(/_/g, " ");
+  return cleaned.charAt(0).toUpperCase() + cleaned.slice(1);
+}
+var HANDLES = [
+  { id: "target-1", type: "target", position: "top" },
+  { id: "target-2", type: "target", position: "left" },
+  { id: "target-3", type: "target", position: "right" },
+  { id: "target-4", type: "target", position: "bottom" },
+  { id: "source-1", type: "source", position: "top" },
+  { id: "source-2", type: "source", position: "left" },
+  { id: "source-3", type: "source", position: "right" },
+  { id: "source-4", type: "source", position: "bottom" }
+];
+var hiddenHandle = { opacity: 0, width: 8, height: 8, pointerEvents: "none" };
+function StudioNode({ data, selected }) {
+  const d = data;
+  const kind = d.kind && d.kind in KIND ? d.kind : "processor";
+  const cfg = KIND[kind];
+  const Icon = cfg.icon;
+  const title = d.title || d.typeLabel || kind;
+  const shellStyle = {
+    backgroundImage: `linear-gradient(135deg, ${cfg.glow} 0%, #1e1e22 55%, #161618 100%)`,
+    border: `1.5px solid ${selected ? cfg.accent : "#33333a"}`,
+    boxShadow: selected ? `0 0 0 1px ${cfg.accent}, 0 0 18px ${cfg.glow}` : "0 1px 3px rgba(0,0,0,0.4)"
+  };
+  const toggle = (e) => {
+    e.stopPropagation();
+    d.onToggleCollapse?.();
+  };
+  if (d.collapsed) {
+    return /* @__PURE__ */ jsxs("div", { className: "group relative flex items-center justify-center rounded-lg", style: { width: NODE_COLLAPSED, height: NODE_COLLAPSED, ...shellStyle }, title: `${d.typeLabel ?? ""} \xB7 ${title}`, children: [
+      HANDLES.map((h) => /* @__PURE__ */ jsx(Handle_default, { id: h.id, type: h.type, position: h.position, style: hiddenHandle }, `${h.type}-${h.position}`)),
+      /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5", style: { color: cfg.accent } }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: toggle,
+          title: "Expand",
+          className: "absolute right-0.5 top-0.5 hidden rounded p-0.5 text-slate-400 hover:bg-white/10 hover:text-slate-100 group-hover:block",
+          children: /* @__PURE__ */ jsx(Plus, { className: "h-3 w-3" })
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "group relative overflow-hidden rounded-lg", style: { width: NODE_WIDTH, height: NODE_HEIGHT, ...shellStyle }, children: [
+    HANDLES.map((h) => /* @__PURE__ */ jsx(Handle_default, { id: h.id, type: h.type, position: h.position, style: hiddenHandle }, `${h.type}-${h.position}`)),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2", style: { borderBottom: "1px solid rgba(255,255,255,0.06)" }, children: [
+      /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 flex-shrink-0", style: { color: cfg.accent } }),
+      /* @__PURE__ */ jsx("span", { className: "truncate text-[11px] font-semibold uppercase tracking-wide", style: { color: cfg.accent }, children: d.typeLabel }),
+      d.onToggleCollapse ? /* @__PURE__ */ jsx("button", { onClick: toggle, title: "Collapse", className: "ml-auto rounded p-0.5 text-slate-500 hover:bg-white/10 hover:text-slate-200", children: /* @__PURE__ */ jsx(Minus, { className: "h-3.5 w-3.5" }) }) : null
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "px-3 py-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium", style: { color: "#f1f5f9" }, title, children: title }),
+      d.subtitle ? /* @__PURE__ */ jsx("div", { className: "mt-0.5 truncate text-xs", style: { color: "#94a3b8" }, children: d.subtitle }) : null
+    ] })
+  ] });
+}
+function CleanEdge({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, selected }) {
+  const [d] = getBezierPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition });
+  const stroke = selected ? "#c4b5fd" : "#7c8499";
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("marker", { id: "kgraph-ism-arrow", markerWidth: "10", markerHeight: "10", refX: "7", refY: "3", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L6,3 L0,6 Z", fill: stroke }) }) }),
+    /* @__PURE__ */ jsx("path", { d, fill: "none", stroke: "transparent", strokeWidth: 18 }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d,
+        fill: "none",
+        stroke,
+        strokeWidth: selected ? 2 : 1.5,
+        strokeDasharray: "6 3",
+        markerEnd: "url(#kgraph-ism-arrow)"
+      }
+    )
+  ] });
+}
+function seedCollapsed(nodes) {
+  return new Set(nodes.filter((n) => n.data?.collapsed).map((n) => n.id));
+}
+function StudioGraph({ nodes, edges, onNodeClick, collapsible = true, selectedNodeId, className, style }) {
+  const [collapsed, setCollapsed] = useState(() => seedCollapsed(nodes));
+  const seedKey = useRef("");
+  useEffect(() => {
+    const key = nodes.map((n) => n.id).sort().join("\0");
+    if (key !== seedKey.current) {
+      seedKey.current = key;
+      setCollapsed(seedCollapsed(nodes));
+    }
+  }, [nodes]);
+  const toggleCollapse = useCallback((id) => {
+    setCollapsed((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }, []);
+  const renderNodes = useMemo(
+    () => nodes.map((n) => {
+      const isCollapsed = collapsed.has(n.id);
+      return {
+        ...n,
+        width: isCollapsed ? NODE_COLLAPSED : NODE_WIDTH,
+        height: isCollapsed ? NODE_COLLAPSED : NODE_HEIGHT,
+        selected: selectedNodeId != null && n.id === selectedNodeId,
+        data: {
+          ...n.data,
+          collapsed: isCollapsed,
+          onToggleCollapse: collapsible ? () => toggleCollapse(n.id) : void 0
+        }
+      };
+    }),
+    [nodes, collapsed, collapsible, toggleCollapse, selectedNodeId]
+  );
+  const nodeTypes = useMemo(() => {
+    const m = { state: StudioNode, processor: StudioNode };
+    renderNodes.forEach((n) => {
+      m[n.type] = StudioNode;
+    });
+    return m;
+  }, [renderNodes]);
+  const edgeTypes = useMemo(() => {
+    const m = { default: CleanEdge };
+    edges.forEach((e) => {
+      if (e.type) m[e.type] = CleanEdge;
+    });
+    return m;
+  }, [edges]);
+  return /* @__PURE__ */ jsx(
+    KGraphCanvas_default,
+    {
+      nodes: renderNodes,
+      edges,
+      nodeTypes,
+      edgeTypes,
+      nodesDraggable: false,
+      nodesConnectable: false,
+      elementsSelectable: true,
+      fitView: true,
+      showMiniMap: false,
+      showBackground: true,
+      className,
+      style: { width: "100%", height: "100%", background: "#0e0e10", ...style },
+      onNodeClick: onNodeClick ? (_evt, node) => onNodeClick(node) : void 0
+    }
+  );
+}
+
+export { CleanEdge, NODE_COLLAPSED, NODE_HEIGHT, NODE_WIDTH, StudioGraph, StudioNode, displayType, kindForNodeType };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/ism/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ism/nodes.tsx","../../src/ism/edges.tsx","../../src/ism/StudioGraph.tsx"],"names":["jsxs","jsx"],"mappings":"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","file":"index.js","sourcesContent":["import type { MouseEvent } from 'react';\nimport { Handle } from '../index';\nimport type { NodeComponentProps, HandleType, HandlePosition } from '../types';\nimport { Database, Cpu, Shuffle, FunctionSquare, Plug, Minus, Plus, type LucideIcon } from 'lucide-react';\n\n// Footprint matches the Alethic ISM studio so published/exported layouts align.\nexport const NODE_WIDTH = 208;\nexport const NODE_HEIGHT = 120;\nexport const NODE_COLLAPSED = 44;\n\nexport type StudioNodeKind = 'state' | 'processor' | 'transform' | 'function' | 'connector';\n\n// Display fields precomputed by the host and placed on node.data.\nexport interface StudioNodeData {\n    kind?: StudioNodeKind;\n    typeLabel?: string;\n    title?: string;\n    subtitle?: string;\n    // Injected by StudioGraph for collapse support.\n    collapsed?: boolean;\n    onToggleCollapse?: () => void;\n    [key: string]: unknown;\n}\n\n// Dark studio palette (self-contained — no consumer Tailwind tokens needed).\nconst KIND: Record<StudioNodeKind, { accent: string; glow: string; icon: LucideIcon }> = {\n    state: { accent: '#34d399', glow: 'rgba(16,185,129,0.18)', icon: Database }, // emerald\n    processor: { accent: '#fbbf24', glow: 'rgba(245,158,11,0.18)', icon: Cpu }, // amber\n    transform: { accent: '#a78bfa', glow: 'rgba(139,92,246,0.18)', icon: Shuffle }, // violet\n    function: { accent: '#38bdf8', glow: 'rgba(14,165,233,0.18)', icon: FunctionSquare }, // sky\n    connector: { accent: '#94a3b8', glow: 'rgba(100,116,139,0.18)', icon: Plug }, // slate\n};\n\nexport function kindForNodeType(nodeType: string): StudioNodeKind {\n    if (nodeType === 'state') return 'state';\n    if (nodeType.includes('coalescer') || nodeType.includes('composite')) return 'transform';\n    if (nodeType.startsWith('function')) return 'function';\n    if (nodeType.startsWith('connector')) return 'connector';\n    return 'processor';\n}\n\nconst PROCESSOR_LABELS: Record<string, string> = {\n    processor_openai: 'OpenAI',\n    processor_visual_openai: 'Vision',\n    processor_anthropic: 'Anthropic',\n    processor_google_ai: 'Google AI',\n    processor_llama: 'Llama',\n    processor_mistral: 'Mistral',\n    processor_python: 'Python',\n    processor_provider: 'Provider',\n    processor_state_coalescer: 'Coalescer',\n    processor_state_composite: 'Composite',\n    function_datasource_sql: 'SQL Source',\n    connector_source: 'Source',\n    connector_sink: 'Sink',\n    trainer: 'Trainer',\n    processor: 'Processor',\n};\n\nexport function displayType(nodeType: string): string {\n    if (PROCESSOR_LABELS[nodeType]) return PROCESSOR_LABELS[nodeType];\n    const cleaned = nodeType.replace(/^processor_/, '').replace(/_/g, ' ');\n    return cleaned.charAt(0).toUpperCase() + cleaned.slice(1);\n}\n\nconst HANDLES: { id: string; type: HandleType; position: HandlePosition }[] = [\n    { id: 'target-1', type: 'target', position: 'top' },\n    { id: 'target-2', type: 'target', position: 'left' },\n    { id: 'target-3', type: 'target', position: 'right' },\n    { id: 'target-4', type: 'target', position: 'bottom' },\n    { id: 'source-1', type: 'source', position: 'top' },\n    { id: 'source-2', type: 'source', position: 'left' },\n    { id: 'source-3', type: 'source', position: 'right' },\n    { id: 'source-4', type: 'source', position: 'bottom' },\n];\nconst hiddenHandle = { opacity: 0, width: 8, height: 8, pointerEvents: 'none' as const };\n\n/**\n * StudioNode — read-only kgraph node card in the Alethic ISM studio aesthetic\n * (gradient tinted by type, neon accent header, glowing border when selected).\n * Display fields come from node.data (StudioNodeData).\n */\nexport function StudioNode({ data, selected }: NodeComponentProps) {\n    const d = data as StudioNodeData;\n    const kind: StudioNodeKind = d.kind && d.kind in KIND ? d.kind : 'processor';\n    const cfg = KIND[kind];\n    const Icon = cfg.icon;\n    const title = d.title || d.typeLabel || kind;\n\n    const shellStyle = {\n        backgroundImage: `linear-gradient(135deg, ${cfg.glow} 0%, #1e1e22 55%, #161618 100%)`,\n        border: `1.5px solid ${selected ? cfg.accent : '#33333a'}`,\n        boxShadow: selected ? `0 0 0 1px ${cfg.accent}, 0 0 18px ${cfg.glow}` : '0 1px 3px rgba(0,0,0,0.4)',\n    };\n\n    const toggle = (e: MouseEvent) => {\n        e.stopPropagation();\n        d.onToggleCollapse?.();\n    };\n\n    if (d.collapsed) {\n        return (\n            <div className=\"group relative flex items-center justify-center rounded-lg\" style={{ width: NODE_COLLAPSED, height: NODE_COLLAPSED, ...shellStyle }} title={`${d.typeLabel ?? ''} · ${title}`}>\n                {HANDLES.map((h) => (\n                    <Handle key={`${h.type}-${h.position}`} id={h.id} type={h.type} position={h.position} style={hiddenHandle} />\n                ))}\n                <Icon className=\"h-5 w-5\" style={{ color: cfg.accent }} />\n                <button\n                    onClick={toggle}\n                    title=\"Expand\"\n                    className=\"absolute right-0.5 top-0.5 hidden rounded p-0.5 text-slate-400 hover:bg-white/10 hover:text-slate-100 group-hover:block\"\n                >\n                    <Plus className=\"h-3 w-3\" />\n                </button>\n            </div>\n        );\n    }\n\n    return (\n        <div className=\"group relative overflow-hidden rounded-lg\" style={{ width: NODE_WIDTH, height: NODE_HEIGHT, ...shellStyle }}>\n            {HANDLES.map((h) => (\n                <Handle key={`${h.type}-${h.position}`} id={h.id} type={h.type} position={h.position} style={hiddenHandle} />\n            ))}\n\n            <div className=\"flex items-center gap-2 px-3 py-2\" style={{ borderBottom: '1px solid rgba(255,255,255,0.06)' }}>\n                <Icon className=\"h-4 w-4 flex-shrink-0\" style={{ color: cfg.accent }} />\n                <span className=\"truncate text-[11px] font-semibold uppercase tracking-wide\" style={{ color: cfg.accent }}>\n                    {d.typeLabel}\n                </span>\n                {d.onToggleCollapse ? (\n                    <button onClick={toggle} title=\"Collapse\" className=\"ml-auto rounded p-0.5 text-slate-500 hover:bg-white/10 hover:text-slate-200\">\n                        <Minus className=\"h-3.5 w-3.5\" />\n                    </button>\n                ) : null}\n            </div>\n\n            <div className=\"px-3 py-2\">\n                <div className=\"truncate text-sm font-medium\" style={{ color: '#f1f5f9' }} title={title}>\n                    {title}\n                </div>\n                {d.subtitle ? (\n                    <div className=\"mt-0.5 truncate text-xs\" style={{ color: '#94a3b8' }}>\n                        {d.subtitle}\n                    </div>\n                ) : null}\n            </div>\n        </div>\n    );\n}\n","import { getBezierPath } from '../index';\nimport type { EdgeComponentProps } from '../types';\n\n/**\n * CleanEdge — read-only kgraph edge for the dark studio (kgraph's default edge\n * is hardcoded purple). Dashed bezier that reads on a dark canvas, with an\n * arrowhead; brighter on hover/selection.\n */\nexport function CleanEdge({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, selected }: EdgeComponentProps) {\n    const [d] = getBezierPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition });\n    const stroke = selected ? '#c4b5fd' : '#7c8499'; // violet-300 / slate\n    return (\n        <g>\n            <defs>\n                <marker id=\"kgraph-ism-arrow\" markerWidth=\"10\" markerHeight=\"10\" refX=\"7\" refY=\"3\" orient=\"auto\" markerUnits=\"strokeWidth\">\n                    <path d=\"M0,0 L6,3 L0,6 Z\" fill={stroke} />\n                </marker>\n            </defs>\n            <path d={d} fill=\"none\" stroke=\"transparent\" strokeWidth={18} />\n            <path\n                d={d}\n                fill=\"none\"\n                stroke={stroke}\n                strokeWidth={selected ? 2 : 1.5}\n                strokeDasharray=\"6 3\"\n                markerEnd=\"url(#kgraph-ism-arrow)\"\n            />\n        </g>\n    );\n}\n","import { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { CSSProperties } from 'react';\nimport { KGraphCanvas } from '../index';\nimport type { KGraphNode, KGraphEdge } from '../types';\nimport { StudioNode, NODE_WIDTH, NODE_HEIGHT, NODE_COLLAPSED } from './nodes';\nimport { CleanEdge } from './edges';\n\nexport interface StudioGraphProps {\n    /** Pre-mapped kgraph nodes; node.data should carry StudioNodeData fields. */\n    nodes: KGraphNode[];\n    /** Pre-mapped kgraph edges. */\n    edges: KGraphEdge[];\n    /** Fired when a node is clicked. */\n    onNodeClick?: (node: KGraphNode) => void;\n    /** Allow per-node collapse (default true). */\n    collapsible?: boolean;\n    /**\n     * Id of the node to render as selected (glowing accent border). Selection is\n     * host-controlled — clicking a node reports via onNodeClick; the host decides\n     * what is selected and passes it back here.\n     */\n    selectedNodeId?: string;\n    className?: string;\n    style?: CSSProperties;\n}\n\n/** Node ids whose data carries a truthy `collapsed` flag (seeded from the host). */\nfunction seedCollapsed(nodes: KGraphNode[]): Set<string> {\n    return new Set(nodes.filter((n) => (n.data as { collapsed?: boolean })?.collapsed).map((n) => n.id));\n}\n\n/**\n * StudioGraph — a read-only kgraph canvas with the Alethic ISM studio look:\n * every node renders as StudioNode, every edge as CleanEdge, non-interactive\n * (no drag/connect), fit-to-view. Manages per-node collapse: collapsed nodes\n * shrink to an icon and their kgraph dimensions/edge anchors shrink with them.\n */\nexport function StudioGraph({ nodes, edges, onNodeClick, collapsible = true, selectedNodeId, className, style }: StudioGraphProps) {\n    // Seed collapse from each node's data.collapsed (carried from the manifest);\n    // the user can then toggle. Re-seed only when the node id set changes (a new\n    // graph is loaded) so selection re-renders don't discard user toggles.\n    const [collapsed, setCollapsed] = useState<Set<string>>(() => seedCollapsed(nodes));\n    const seedKey = useRef<string>('');\n    useEffect(() => {\n        const key = nodes.map((n) => n.id).sort().join('\u0000');\n        if (key !== seedKey.current) {\n            seedKey.current = key;\n            setCollapsed(seedCollapsed(nodes));\n        }\n    }, [nodes]);\n\n    const toggleCollapse = useCallback((id: string) => {\n        setCollapsed((prev) => {\n            const next = new Set(prev);\n            if (next.has(id)) next.delete(id);\n            else next.add(id);\n            return next;\n        });\n    }, []);\n\n    const renderNodes = useMemo<KGraphNode[]>(\n        () =>\n            nodes.map((n) => {\n                const isCollapsed = collapsed.has(n.id);\n                return {\n                    ...n,\n                    width: isCollapsed ? NODE_COLLAPSED : NODE_WIDTH,\n                    height: isCollapsed ? NODE_COLLAPSED : NODE_HEIGHT,\n                    selected: selectedNodeId != null && n.id === selectedNodeId,\n                    data: {\n                        ...n.data,\n                        collapsed: isCollapsed,\n                        onToggleCollapse: collapsible ? () => toggleCollapse(n.id) : undefined,\n                    },\n                };\n            }),\n        [nodes, collapsed, collapsible, toggleCollapse, selectedNodeId],\n    );\n\n    const nodeTypes = useMemo(() => {\n        const m: Record<string, typeof StudioNode> = { state: StudioNode, processor: StudioNode };\n        renderNodes.forEach((n) => {\n            m[n.type] = StudioNode;\n        });\n        return m;\n    }, [renderNodes]);\n\n    const edgeTypes = useMemo(() => {\n        const m: Record<string, typeof CleanEdge> = { default: CleanEdge };\n        edges.forEach((e) => {\n            if (e.type) m[e.type] = CleanEdge;\n        });\n        return m;\n    }, [edges]);\n\n    return (\n        <KGraphCanvas\n            nodes={renderNodes}\n            edges={edges}\n            nodeTypes={nodeTypes}\n            edgeTypes={edgeTypes}\n            nodesDraggable={false}\n            nodesConnectable={false}\n            elementsSelectable\n            fitView\n            showMiniMap={false}\n            showBackground\n            className={className}\n            style={{ width: '100%', height: '100%', background: '#0e0e10', ...style }}\n            onNodeClick={onNodeClick ? (_evt, node) => onNodeClick(node) : undefined}\n        />\n    );\n}\n"]}

package/dist/types-C9DQLToO.d.cts

@@ -0,0 +1,172 @@
+import React__default from 'react';
+
+interface KGraphNode {
+    id: string;
+    type: string;
+    position: {
+        x: number;
+        y: number;
+    };
+    data: Record<string, any>;
+    selected?: boolean;
+    dragging?: boolean;
+    hidden?: boolean;
+    width?: number;
+    height?: number;
+    group?: string;
+}
+interface KGraphEdge {
+    id: string;
+    source: string;
+    target: string;
+    sourceHandle?: string;
+    targetHandle?: string;
+    type?: string;
+    data?: Record<string, any>;
+    selected?: boolean;
+    animated?: boolean;
+}
+interface KGraphConnection {
+    source: string;
+    target: string;
+    sourceHandle?: string;
+    targetHandle?: string;
+}
+type HandlePosition = 'top' | 'right' | 'bottom' | 'left';
+type HandleType = 'source' | 'target';
+interface HandleInfo {
+    nodeId: string;
+    handleId: string;
+    type: HandleType;
+    position: HandlePosition;
+    x: number;
+    y: number;
+}
+type NodeChange = {
+    type: 'position';
+    id: string;
+    position?: {
+        x: number;
+        y: number;
+    };
+    dragging: boolean;
+} | {
+    type: 'select';
+    id: string;
+    selected: boolean;
+} | {
+    type: 'remove';
+    id: string;
+} | {
+    type: 'add';
+    item: KGraphNode;
+} | {
+    type: 'dimensions';
+    id: string;
+    dimensions: {
+        width: number;
+        height: number;
+    };
+};
+type EdgeChange = {
+    type: 'select';
+    id: string;
+    selected: boolean;
+} | {
+    type: 'remove';
+    id: string;
+} | {
+    type: 'add';
+    item: KGraphEdge;
+};
+interface KGraphViewport {
+    x: number;
+    y: number;
+    zoom: number;
+}
+interface NodeComponentProps {
+    id: string;
+    data: Record<string, any>;
+    selected: boolean;
+    type: string;
+}
+interface EdgeComponentProps {
+    id: string;
+    sourceX: number;
+    sourceY: number;
+    targetX: number;
+    targetY: number;
+    sourcePosition: HandlePosition;
+    targetPosition: HandlePosition;
+    selected: boolean;
+    data?: Record<string, any>;
+    animated?: boolean;
+    style?: React__default.CSSProperties;
+}
+interface HandleProps {
+    id: string;
+    type: HandleType;
+    position: HandlePosition;
+    style?: React__default.CSSProperties;
+    className?: string;
+}
+interface KGraphCanvasProps {
+    nodes: KGraphNode[];
+    edges: KGraphEdge[];
+    onNodesChange?: (changes: NodeChange[]) => void;
+    onEdgesChange?: (changes: EdgeChange[]) => void;
+    onConnect?: (connection: KGraphConnection) => void;
+    onNodeClick?: (event: React__default.MouseEvent, node: KGraphNode) => void;
+    onEdgeClick?: (event: React__default.MouseEvent, edge: KGraphEdge) => void;
+    onPaneClick?: (event: React__default.MouseEvent) => void;
+    onDrop?: (event: React__default.DragEvent, position: {
+        x: number;
+        y: number;
+    }) => void;
+    onDragOver?: (event: React__default.DragEvent) => void;
+    nodeTypes?: Record<string, React__default.ComponentType<NodeComponentProps>>;
+    edgeTypes?: Record<string, React__default.ComponentType<EdgeComponentProps>>;
+    snapToGrid?: boolean;
+    snapGrid?: [number, number];
+    panOnDrag?: boolean;
+    zoomOnScroll?: boolean;
+    nodesDraggable?: boolean;
+    nodesConnectable?: boolean;
+    elementsSelectable?: boolean;
+    fitView?: boolean;
+    showMiniMap?: boolean;
+    showBackground?: boolean;
+    backgroundGap?: number;
+    minZoom?: number;
+    maxZoom?: number;
+    className?: string;
+    style?: React__default.CSSProperties;
+    children?: React__default.ReactNode;
+}
+interface KGraphContextValue {
+    viewport: KGraphViewport;
+    setViewport: React__default.Dispatch<React__default.SetStateAction<KGraphViewport>>;
+    screenToCanvasPosition: (screenX: number, screenY: number) => {
+        x: number;
+        y: number;
+    };
+    canvasToScreenPosition: (canvasX: number, canvasY: number) => {
+        x: number;
+        y: number;
+    };
+    fitView: (options?: {
+        padding?: number;
+    }) => void;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    zoomTo: (level: number) => void;
+    registerHandle: (info: HandleInfo) => void;
+    unregisterHandle: (nodeId: string, handleId: string) => void;
+    getHandlePosition: (nodeId: string, handleId: string) => HandleInfo | undefined;
+    getAllHandles: () => Map<string, HandleInfo>;
+    containerRef: React__default.RefObject<HTMLDivElement | null>;
+    nodes: KGraphNode[];
+    edges: KGraphEdge[];
+}
+
+export type { EdgeComponentProps as E, HandleProps as H, KGraphCanvasProps as K, NodeComponentProps as N, KGraphNode as a, KGraphEdge as b, KGraphViewport as c, KGraphContextValue as d, NodeChange as e, HandlePosition as f, EdgeChange as g, HandleInfo as h, HandleType as i, KGraphConnection as j };

package/dist/types-C9DQLToO.d.ts

@@ -0,0 +1,172 @@
+import React__default from 'react';
+
+interface KGraphNode {
+    id: string;
+    type: string;
+    position: {
+        x: number;
+        y: number;
+    };
+    data: Record<string, any>;
+    selected?: boolean;
+    dragging?: boolean;
+    hidden?: boolean;
+    width?: number;
+    height?: number;
+    group?: string;
+}
+interface KGraphEdge {
+    id: string;
+    source: string;
+    target: string;
+    sourceHandle?: string;
+    targetHandle?: string;
+    type?: string;
+    data?: Record<string, any>;
+    selected?: boolean;
+    animated?: boolean;
+}
+interface KGraphConnection {
+    source: string;
+    target: string;
+    sourceHandle?: string;
+    targetHandle?: string;
+}
+type HandlePosition = 'top' | 'right' | 'bottom' | 'left';
+type HandleType = 'source' | 'target';
+interface HandleInfo {
+    nodeId: string;
+    handleId: string;
+    type: HandleType;
+    position: HandlePosition;
+    x: number;
+    y: number;
+}
+type NodeChange = {
+    type: 'position';
+    id: string;
+    position?: {
+        x: number;
+        y: number;
+    };
+    dragging: boolean;
+} | {
+    type: 'select';
+    id: string;
+    selected: boolean;
+} | {
+    type: 'remove';
+    id: string;
+} | {
+    type: 'add';
+    item: KGraphNode;
+} | {
+    type: 'dimensions';
+    id: string;
+    dimensions: {
+        width: number;
+        height: number;
+    };
+};
+type EdgeChange = {
+    type: 'select';
+    id: string;
+    selected: boolean;
+} | {
+    type: 'remove';
+    id: string;
+} | {
+    type: 'add';
+    item: KGraphEdge;
+};
+interface KGraphViewport {
+    x: number;
+    y: number;
+    zoom: number;
+}
+interface NodeComponentProps {
+    id: string;
+    data: Record<string, any>;
+    selected: boolean;
+    type: string;
+}
+interface EdgeComponentProps {
+    id: string;
+    sourceX: number;
+    sourceY: number;
+    targetX: number;
+    targetY: number;
+    sourcePosition: HandlePosition;
+    targetPosition: HandlePosition;
+    selected: boolean;
+    data?: Record<string, any>;
+    animated?: boolean;
+    style?: React__default.CSSProperties;
+}
+interface HandleProps {
+    id: string;
+    type: HandleType;
+    position: HandlePosition;
+    style?: React__default.CSSProperties;
+    className?: string;
+}
+interface KGraphCanvasProps {
+    nodes: KGraphNode[];
+    edges: KGraphEdge[];
+    onNodesChange?: (changes: NodeChange[]) => void;
+    onEdgesChange?: (changes: EdgeChange[]) => void;
+    onConnect?: (connection: KGraphConnection) => void;
+    onNodeClick?: (event: React__default.MouseEvent, node: KGraphNode) => void;
+    onEdgeClick?: (event: React__default.MouseEvent, edge: KGraphEdge) => void;
+    onPaneClick?: (event: React__default.MouseEvent) => void;
+    onDrop?: (event: React__default.DragEvent, position: {
+        x: number;
+        y: number;
+    }) => void;
+    onDragOver?: (event: React__default.DragEvent) => void;
+    nodeTypes?: Record<string, React__default.ComponentType<NodeComponentProps>>;
+    edgeTypes?: Record<string, React__default.ComponentType<EdgeComponentProps>>;
+    snapToGrid?: boolean;
+    snapGrid?: [number, number];
+    panOnDrag?: boolean;
+    zoomOnScroll?: boolean;
+    nodesDraggable?: boolean;
+    nodesConnectable?: boolean;
+    elementsSelectable?: boolean;
+    fitView?: boolean;
+    showMiniMap?: boolean;
+    showBackground?: boolean;
+    backgroundGap?: number;
+    minZoom?: number;
+    maxZoom?: number;
+    className?: string;
+    style?: React__default.CSSProperties;
+    children?: React__default.ReactNode;
+}
+interface KGraphContextValue {
+    viewport: KGraphViewport;
+    setViewport: React__default.Dispatch<React__default.SetStateAction<KGraphViewport>>;
+    screenToCanvasPosition: (screenX: number, screenY: number) => {
+        x: number;
+        y: number;
+    };
+    canvasToScreenPosition: (canvasX: number, canvasY: number) => {
+        x: number;
+        y: number;
+    };
+    fitView: (options?: {
+        padding?: number;
+    }) => void;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    zoomTo: (level: number) => void;
+    registerHandle: (info: HandleInfo) => void;
+    unregisterHandle: (nodeId: string, handleId: string) => void;
+    getHandlePosition: (nodeId: string, handleId: string) => HandleInfo | undefined;
+    getAllHandles: () => Map<string, HandleInfo>;
+    containerRef: React__default.RefObject<HTMLDivElement | null>;
+    nodes: KGraphNode[];
+    edges: KGraphEdge[];
+}
+
+export type { EdgeComponentProps as E, HandleProps as H, KGraphCanvasProps as K, NodeComponentProps as N, KGraphNode as a, KGraphEdge as b, KGraphViewport as c, KGraphContextValue as d, NodeChange as e, HandlePosition as f, EdgeChange as g, HandleInfo as h, HandleType as i, KGraphConnection as j };