@bian-womp/spark-workbench 0.3.71 → 0.3.73

package/lib/cjs/index.cjs

@@ -196,13 +196,11 @@ class InMemoryWorkbench extends AbstractWorkbench {
         // Clean up extData for removed nodes/edges
         if (this.customData.nodes) {
             const filteredExtNodes = Object.fromEntries(Object.entries(this.customData.nodes).filter(([id]) => defNodeIds.has(id)));
-            this.customData.nodes =
-                Object.keys(filteredExtNodes).length > 0 ? filteredExtNodes : undefined;
+            this.customData.nodes = Object.keys(filteredExtNodes).length > 0 ? filteredExtNodes : undefined;
         }
         if (this.customData.edges) {
             const filteredExtEdges = Object.fromEntries(Object.entries(this.customData.edges).filter(([id]) => defEdgeIds.has(id)));
-            this.customData.edges =
-                Object.keys(filteredExtEdges).length > 0 ? filteredExtEdges : undefined;
+            this.customData.edges = Object.keys(filteredExtEdges).length > 0 ? filteredExtEdges : undefined;
         }
         this.positions = filteredPositions;
         this.sizes = filteredSizes;
@@ -255,8 +253,7 @@ class InMemoryWorkbench extends AbstractWorkbench {
         this.refreshValidation();
     }
     addNode(node, options) {
-        const id = node.nodeId ??
-            this.genId("n", new Set(this._def.nodes.map((n) => n.nodeId)));
+        const id = node.nodeId ?? this.genId("n", new Set(this._def.nodes.map((n) => n.nodeId)));
         this._def.nodes.push({
             nodeId: id,
             typeId: node.typeId,
@@ -443,9 +440,7 @@ class InMemoryWorkbench extends AbstractWorkbench {
         const filteredNodeNames = Object.fromEntries(Object.entries(this.nodeNames).filter(([id]) => defNodeIds.has(id)));
         const filteredSizes = Object.fromEntries(Object.entries(this.sizes).filter(([id]) => defNodeIds.has(id)));
         return {
-            positions: Object.keys(filteredPositions).length > 0
-                ? filteredPositions
-                : undefined,
+            positions: Object.keys(filteredPositions).length > 0 ? filteredPositions : undefined,
             selection: filteredNodes.length > 0 || filteredEdges.length > 0
                 ? {
                     nodes: filteredNodes,
@@ -453,9 +448,7 @@ class InMemoryWorkbench extends AbstractWorkbench {
                 }
                 : undefined,
             viewport: this.viewport ? { ...this.viewport } : undefined,
-            nodeNames: Object.keys(filteredNodeNames).length > 0
-                ? filteredNodeNames
-                : undefined,
+            nodeNames: Object.keys(filteredNodeNames).length > 0 ? filteredNodeNames : undefined,
             sizes: Object.keys(filteredSizes).length > 0 ? filteredSizes : undefined,
         };
     }
@@ -600,17 +593,14 @@ class InMemoryWorkbench extends AbstractWorkbench {
                     : undefined,
                 size,
                 inputs: inputsToCopy,
-                customData: customNodeData !== undefined
-                    ? lod.cloneDeep(customNodeData)
-                    : undefined,
+                customData: customNodeData !== undefined ? lod.cloneDeep(customNodeData) : undefined,
                 originalNodeId: node.nodeId,
             };
         });
         // Collect edges between copied nodes
         const copiedEdges = this.def.edges
             .filter((edge) => {
-            return (selectedNodeSet.has(edge.source.nodeId) &&
-                selectedNodeSet.has(edge.target.nodeId));
+            return selectedNodeSet.has(edge.source.nodeId) && selectedNodeSet.has(edge.target.nodeId);
         })
             .map((edge) => ({
             sourceNodeId: edge.source.nodeId,
@@ -1326,13 +1316,9 @@ class LocalGraphRunner extends AbstractGraphRunner {
         const out = {};
         for (const n of def.nodes) {
             const staged = this.stagedInputs[n.nodeId] ?? {};
-            const runtimeInputs = this.runtime
-                ? this.runtime.getNodeData?.(n.nodeId)?.inputs ?? {}
-                : {};
+            const runtimeInputs = this.runtime ? (this.runtime.getNodeData?.(n.nodeId)?.inputs ?? {}) : {};
             // Build inbound handle set for this node from current def
-            const inbound = new Set(def.edges
-                .filter((e) => e.target.nodeId === n.nodeId)
-                .map((e) => e.target.handle));
+            const inbound = new Set(def.edges.filter((e) => e.target.nodeId === n.nodeId).map((e) => e.target.handle));
             // Merge staged only for non-inbound handles so UI reflects runtime values for wired inputs
             const merged = { ...runtimeInputs };
             for (const [h, v] of Object.entries(staged)) {
@@ -1388,9 +1374,7 @@ class LocalGraphRunner extends AbstractGraphRunner {
         this.extData = { ...this.extData, ...data };
     }
     async updateExtData(updates) {
-        if (!this.extData ||
-            typeof this.extData !== "object" ||
-            Array.isArray(this.extData)) {
+        if (!this.extData || typeof this.extData !== "object" || Array.isArray(this.extData)) {
             this.extData = {};
         }
         let hasCustomUpdate = false;
@@ -1717,10 +1701,7 @@ class RemoteGraphRunner extends AbstractGraphRunner {
             // Wrap custom event handler to intercept viewport events and emit viewport event
             const wrappedOnCustomEvent = (event) => {
                 const msg = event?.message;
-                if (msg &&
-                    typeof msg === "object" &&
-                    "type" in msg &&
-                    msg.type === "viewport") {
+                if (msg && typeof msg === "object" && "type" in msg && msg.type === "viewport") {
                     const viewport = msg.payload?.viewport;
                     if (isValidViewport(viewport)) {
                         this.emit("viewport", { viewport });
@@ -2163,9 +2144,7 @@ class RemoteGraphRunner extends AbstractGraphRunner {
             const handles = Object.keys(resolved ?? desc?.inputs ?? {});
             const cur = {};
             // Build inbound handle set for this node to honor wiring precedence
-            const inbound = new Set(def.edges
-                .filter((e) => e.target.nodeId === n.nodeId)
-                .map((e) => e.target.handle));
+            const inbound = new Set(def.edges.filter((e) => e.target.nodeId === n.nodeId).map((e) => e.target.handle));
             for (const h of handles) {
                 const rec = cache.get(this.getCacheKey(n.nodeId, h, "input"));
                 if (rec)
@@ -2338,9 +2317,7 @@ function summarizeDeep(value) {
         const out = {};
         for (const [k, v] of Object.entries(obj)) {
             // Special-case any 'url' field
-            if (typeof v === "string" &&
-                k.toLowerCase() === "url" &&
-                v.startsWith("data:")) {
+            if (typeof v === "string" && k.toLowerCase() === "url" && v.startsWith("data:")) {
                 out[k] = formatDataUrlAsLabel(v);
                 continue;
             }
@@ -2415,19 +2392,14 @@ function estimateNodeSize(args) {
  * Used for positioning handles in React Flow.
  */
 function getHandleLayoutY(rowIndex) {
-    return (NODE_HEADER_HEIGHT_PX +
-        rowIndex * NODE_ROW_HEIGHT_PX +
-        NODE_ROW_HEIGHT_PX / 2);
+    return NODE_HEADER_HEIGHT_PX + rowIndex * NODE_ROW_HEIGHT_PX + NODE_ROW_HEIGHT_PX / 2;
 }
 /**
  * Calculate the Y position for handle bounds (top + centering offset).
  * Used for hit-testing and edge routing.
  */
 function getHandleBoundsY(rowIndex) {
-    return (NODE_HEADER_HEIGHT_PX +
-        rowIndex * NODE_ROW_HEIGHT_PX +
-        (NODE_ROW_HEIGHT_PX - HANDLE_SIZE_PX) / 2 +
-        1);
+    return NODE_HEADER_HEIGHT_PX + rowIndex * NODE_ROW_HEIGHT_PX + (NODE_ROW_HEIGHT_PX - HANDLE_SIZE_PX) / 2 + 1;
 }
 /**
  * Calculate the X position for handle bounds based on position and node width.
@@ -2466,7 +2438,7 @@ function createHandleLayout(args) {
     };
 }
 function layoutNode(args, overrides) {
-    const { node, registry, showValues, overrides: sizeOverrides, missingInputs = [], missingOutputs = [], } = args;
+    const { node, registry, showValues, overrides: sizeOverrides, missingInputs = [], missingOutputs = [] } = args;
     const { inputs, outputs } = computeEffectiveHandles(node, registry);
     const inputOrder = Object.keys(inputs).filter((k) => !sparkGraph.isInputPrivate(inputs, k));
     const outputOrder = Object.keys(outputs);
@@ -2579,14 +2551,11 @@ function useWorkbenchBridge(wb, handlesMap) {
         // Check if target input handle is a non-array type (typeId doesn't end with [])
         // If so, remove any existing connections to that handle before connecting
         const targetHandles = handlesMap?.[params.target];
-        const targetTypeId = targetHandles
-            ? sparkGraph.getInputTypeId(targetHandles.inputs, params.targetHandle)
-            : undefined;
+        const targetTypeId = targetHandles ? sparkGraph.getInputTypeId(targetHandles.inputs, params.targetHandle) : undefined;
         const isArrayInput = targetTypeId?.endsWith("[]") ?? false;
         if (!isArrayInput) {
             // Find existing edges to this input handle
-            const existingEdges = wb.def.edges.filter((e) => e.target.nodeId === params.target &&
-                e.target.handle === params.targetHandle);
+            const existingEdges = wb.def.edges.filter((e) => e.target.nodeId === params.target && e.target.handle === params.targetHandle);
             // Remove existing edges (without committing yet)
             for (const edge of existingEdges) {
                 wb.disconnect(edge.id, { commit: false });
@@ -2749,9 +2718,7 @@ function useThrottledValue(value, intervalMs) {
     const lastSetAtRef = React.useRef(0);
     const timeoutRef = React.useRef(null);
     React.useEffect(() => {
-        const now = typeof performance !== "undefined" && performance.now
-            ? performance.now()
-            : Date.now();
+        const now = typeof performance !== "undefined" && performance.now ? performance.now() : Date.now();
         const elapsed = now - lastSetAtRef.current;
         if (elapsed >= intervalMs) {
             lastSetAtRef.current = now;
@@ -2762,10 +2729,7 @@ function useThrottledValue(value, intervalMs) {
                 window.clearTimeout(timeoutRef.current);
             }
             timeoutRef.current = window.setTimeout(() => {
-                lastSetAtRef.current =
-                    typeof performance !== "undefined" && performance.now
-                        ? performance.now()
-                        : Date.now();
+                lastSetAtRef.current = typeof performance !== "undefined" && performance.now ? performance.now() : Date.now();
                 setThrottled(value);
                 timeoutRef.current = null;
             }, Math.max(0, intervalMs - elapsed));
@@ -2927,9 +2891,7 @@ function toReactFlow(def, positions, sizes, registry, opts) {
         const geom = computeLayout(n, sizeOverrides, extraInputs, extraOutputs);
         const renderWidth = customSize?.width ?? geom.width;
         const renderHeight = customSize?.height ?? geom.height;
-        const initialGeom = customSize
-            ? computeLayout(n, overrideSize, extraInputs, extraOutputs)
-            : geom;
+        const initialGeom = customSize ? computeLayout(n, overrideSize, extraInputs, extraOutputs) : geom;
         const inputHandles = geom.inputOrder.map((id) => ({
             id,
             typeId: sparkGraph.getInputTypeId(inputSource, id) ?? "unknown",
@@ -2950,10 +2912,7 @@ function toReactFlow(def, positions, sizes, registry, opts) {
             inputHandles,
             outputHandles,
             handles: opts.handles[n.nodeId],
-            inputConnected: Object.fromEntries(inputHandles.map((h) => [
-                h.id,
-                !!connectedInputs[n.nodeId]?.has(h.id),
-            ])),
+            inputConnected: Object.fromEntries(inputHandles.map((h) => [h.id, !!connectedInputs[n.nodeId]?.has(h.id)])),
             handleLayout,
             showValues: opts.showValues,
             renderWidth,
@@ -2977,17 +2936,13 @@ function toReactFlow(def, positions, sizes, registry, opts) {
             toElement: opts.toElement,
         };
         const customNodeData = opts.customData?.nodes;
-        const mergedData = customNodeData?.[n.nodeId]
-            ? { ...baseData, custom: customNodeData[n.nodeId] }
-            : baseData;
+        const mergedData = customNodeData?.[n.nodeId] ? { ...baseData, custom: customNodeData[n.nodeId] } : baseData;
         return {
             id: n.nodeId,
             data: mergedData,
             position: positions[n.nodeId] ?? { x: 0, y: 0 },
             type: opts.resolveNodeType?.(n.typeId) ?? "spark-default",
-            selected: opts.selectedNodeIds
-                ? opts.selectedNodeIds.has(n.nodeId)
-                : undefined,
+            selected: opts.selectedNodeIds ? opts.selectedNodeIds.has(n.nodeId) : undefined,
             measured: {
                 width: renderWidth,
                 height: renderHeight,
@@ -3019,11 +2974,10 @@ function toReactFlow(def, positions, sizes, registry, opts) {
         const sourceNode = def.nodes.find((n) => n.nodeId === e.source.nodeId);
         const targetNode = def.nodes.find((n) => n.nodeId === e.target.nodeId);
         const sourceHandleTypeId = sourceHandles?.outputs[e.source.handle]
-            ? formatDeclaredTypeSignature(sourceHandles.outputs[e.source.handle]) ??
-                "unknown"
+            ? (formatDeclaredTypeSignature(sourceHandles.outputs[e.source.handle]) ?? "unknown")
             : "unknown";
         const targetHandleTypeId = targetHandles?.inputs[e.target.handle]
-            ? sparkGraph.getInputTypeId(targetHandles.inputs, e.target.handle) ?? "unknown"
+            ? (sparkGraph.getInputTypeId(targetHandles.inputs, e.target.handle) ?? "unknown")
             : "unknown";
         const baseEdgeData = {
             sourceNodeId: e.source.nodeId,
@@ -3041,18 +2995,14 @@ function toReactFlow(def, positions, sizes, registry, opts) {
             isMissing,
         };
         const customEdgeData = opts.customData?.edges;
-        const mergedEdgeData = customEdgeData?.[e.id]
-            ? { ...baseEdgeData, custom: customEdgeData[e.id] }
-            : baseEdgeData;
+        const mergedEdgeData = customEdgeData?.[e.id] ? { ...baseEdgeData, custom: customEdgeData[e.id] } : baseEdgeData;
         return {
             id: e.id,
             source: e.source.nodeId,
             target: e.target.nodeId,
             sourceHandle: e.source.handle,
             targetHandle: e.target.handle,
-            selected: opts.selectedEdgeIds
-                ? opts.selectedEdgeIds.has(e.id)
-                : undefined,
+            selected: opts.selectedEdgeIds ? opts.selectedEdgeIds.has(e.id) : undefined,
             animated: isRunning && !isMissing,
             style,
             label: edgeTypeId,
@@ -3075,13 +3025,7 @@ function getNodeBorderClassNames(args) {
     // Keep border width constant to avoid layout reflow on selection toggles
     const borderWidth = "border";
     const borderStyle = isInvalid ? "border-dashed" : "border-solid";
-    const severity = hasError || hasValidationError
-        ? "red"
-        : hasValidationWarning
-            ? "amber"
-            : isRunning
-                ? "blue"
-                : "gray";
+    const severity = hasError || hasValidationError ? "red" : hasValidationWarning ? "amber" : isRunning ? "blue" : "gray";
     const borderBySeverity = {
         red: "border-red-500",
         amber: "border-amber-500",
@@ -3150,10 +3094,7 @@ function downloadJSON(payload, filename) {
 function isSnapshotPayload(parsed) {
     return (parsed !== null &&
         typeof parsed === "object" &&
-        ("def" in parsed ||
-            "inputs" in parsed ||
-            "outputs" in parsed ||
-            "environment" in parsed));
+        ("def" in parsed || "inputs" in parsed || "outputs" in parsed || "environment" in parsed));
 }
 async function download(wb, runner) {
     try {
@@ -3259,18 +3200,13 @@ function mergeUIState(targetUI, sourceUI, nodeIdMap, anchorPos, sourceDef) {
             // Simple remapping without offset
             result.positions = {
                 ...(targetUI?.positions || {}),
-                ...Object.fromEntries(Object.entries(sourceUI.positions).map(([oldId, pos]) => [
-                    nodeIdMap[oldId] || oldId,
-                    pos,
-                ])),
+                ...Object.fromEntries(Object.entries(sourceUI.positions).map(([oldId, pos]) => [nodeIdMap[oldId] || oldId, pos])),
             };
         }
     }
     // Merge selection: remap node IDs and edge IDs
     if (sourceUI.selection) {
-        const remappedNodes = (sourceUI.selection.nodes || [])
-            .map((id) => nodeIdMap[id] || id)
-            .filter((id) => id); // Filter out invalid mappings
+        const remappedNodes = (sourceUI.selection.nodes || []).map((id) => nodeIdMap[id] || id).filter((id) => id); // Filter out invalid mappings
         const remappedEdges = sourceUI.selection.edges || []; // Edge IDs don't need remapping typically
         result.selection = {
             nodes: [...(targetUI?.selection?.nodes || []), ...remappedNodes],
@@ -3281,19 +3217,13 @@ function mergeUIState(targetUI, sourceUI, nodeIdMap, anchorPos, sourceDef) {
     if (sourceUI.nodeNames) {
         result.nodeNames = {
             ...(targetUI?.nodeNames || {}),
-            ...Object.fromEntries(Object.entries(sourceUI.nodeNames).map(([oldId, name]) => [
-                nodeIdMap[oldId] || oldId,
-                name,
-            ])),
+            ...Object.fromEntries(Object.entries(sourceUI.nodeNames).map(([oldId, name]) => [nodeIdMap[oldId] || oldId, name])),
         };
     }
     if (sourceUI.sizes) {
         result.sizes = {
             ...(targetUI?.sizes || {}),
-            ...Object.fromEntries(Object.entries(sourceUI.sizes).map(([oldId, size]) => [
-                nodeIdMap[oldId] || oldId,
-                size,
-            ])),
+            ...Object.fromEntries(Object.entries(sourceUI.sizes).map(([oldId, size]) => [nodeIdMap[oldId] || oldId, size])),
         };
     }
     return result;
@@ -3328,9 +3258,7 @@ function parseViewportTransform(transform) {
         if (!translateMatch) {
             const matrixMatch = transform.match(/matrix\(([^)]+)\)/);
             if (matrixMatch) {
-                const values = matrixMatch[1]
-                    .split(",")
-                    .map((v) => parseFloat(v.trim()));
+                const values = matrixMatch[1].split(",").map((v) => parseFloat(v.trim()));
                 if (values.length >= 6) {
                     scale = Math.sqrt(values[0] * values[0] + values[1] * values[1]);
                     translateX = values[4];
@@ -3387,9 +3315,7 @@ function parseBorderRadius(borderRadiusStr) {
  */
 function extractStrokeColor(element) {
     if (element instanceof SVGPathElement) {
-        return (element.getAttribute("stroke") ||
-            window.getComputedStyle(element).stroke ||
-            "#b1b1b7");
+        return element.getAttribute("stroke") || window.getComputedStyle(element).stroke || "#b1b1b7";
     }
     const style = window.getComputedStyle(element);
     return (style.borderColor || style.borderTopColor || "#6b7280" // gray-500 default
@@ -3412,10 +3338,7 @@ function extractStrokeWidth(element, minWidth = 1) {
  * Checks if a rectangle intersects with visible bounds
  */
 function isRectVisible(x, y, width, height, bounds) {
-    return (x + width >= bounds.minX &&
-        x <= bounds.maxX &&
-        y + height >= bounds.minY &&
-        y <= bounds.maxY);
+    return x + width >= bounds.minX && x <= bounds.maxX && y + height >= bounds.minY && y <= bounds.maxY;
 }
 /**
  * Parses path data to get bounding box
@@ -3531,8 +3454,7 @@ function extractNodeStyles(nodeContent, nodeBackgroundColor) {
  * Determines if a handle is a source (output) or target (input)
  */
 function isHandleSource(handleEl) {
-    return (handleEl.classList.contains("react-flow__handle-right") ||
-        handleEl.classList.contains("react-flow__handle-source"));
+    return (handleEl.classList.contains("react-flow__handle-right") || handleEl.classList.contains("react-flow__handle-source"));
 }
 /**
  * Extracts handle position and calculates absolute coordinates
@@ -3627,7 +3549,7 @@ function extractNodeTitle(nodeEl, nodeX, nodeY) {
  * Extracts visible nodes from React Flow viewport
  */
 function extractNodes(viewport, visibleBounds, options = {}) {
-    const { exportHandles = true, exportNodeTitle = true, nodeBackgroundColor, } = options;
+    const { exportHandles = true, exportNodeTitle = true, nodeBackgroundColor } = options;
     const nodes = [];
     let minX = Infinity;
     let minY = Infinity;
@@ -3642,15 +3564,10 @@ function extractNodes(viewport, visibleBounds, options = {}) {
         if (!nodeContent)
             return;
         const styles = extractNodeStyles(nodeContent, nodeBackgroundColor);
-        const handles = exportHandles
-            ? extractNodeHandles(nodeEl, position.x, position.y, dimensions.width)
-            : [];
-        const title = exportNodeTitle
-            ? extractNodeTitle(nodeEl, position.x, position.y)
-            : undefined;
+        const handles = exportHandles ? extractNodeHandles(nodeEl, position.x, position.y, dimensions.width) : [];
+        const title = exportNodeTitle ? extractNodeTitle(nodeEl, position.x, position.y) : undefined;
         // Only include node if it's within visible viewport (or if ignoring viewport)
-        if (!visibleBounds ||
-            isRectVisible(position.x, position.y, dimensions.width, dimensions.height, visibleBounds)) {
+        if (!visibleBounds || isRectVisible(position.x, position.y, dimensions.width, dimensions.height, visibleBounds)) {
             nodes.push({
                 x: position.x,
                 y: position.y,
@@ -3683,7 +3600,7 @@ function extractNodes(viewport, visibleBounds, options = {}) {
  * Creates SVG element with dot pattern background (matching React Flow)
  */
 function createSVGElement(width, height, options = {}) {
-    const { exportBackgroundPattern = true, backgroundPatternColor = "#f1f1f1", backgroundColor = "#ffffff", } = options;
+    const { exportBackgroundPattern = true, backgroundPatternColor = "#f1f1f1", backgroundColor = "#ffffff" } = options;
     const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
     svg.setAttribute("width", String(width));
     svg.setAttribute("height", String(height));
@@ -3833,9 +3750,7 @@ async function captureCanvasThumbnail(containerElement, options = {}) {
         const transform = parseViewportTransform(viewportTransform);
         // Calculate visible bounds (null if ignoring viewport)
         const viewportRect = reactFlowViewport.getBoundingClientRect();
-        const visibleBounds = ignoreViewport
-            ? null
-            : calculateVisibleBounds(viewportRect, transform);
+        const visibleBounds = ignoreViewport ? null : calculateVisibleBounds(viewportRect, transform);
         // Extract edges and nodes (pass null bounds if ignoring viewport to get all)
         const { edges, bounds: edgeBounds } = extractEdgePaths(reactFlowViewport, visibleBounds);
         const { nodes, bounds: nodeBounds } = extractNodes(reactFlowViewport, visibleBounds, {
@@ -4215,13 +4130,9 @@ function WorkbenchProvider({ wb, runner, overrides, uiVersion, children, }) {
     // Subscribe to runner/workbench events
     React.useEffect(() => {
         const add = (source, type) => (payload) => setEvents((prev) => {
-            if (source === "workbench" &&
-                (type === "graphChanged" || type === "graphUiChanged")) {
-                const changeType = payload
-                    .change?.type;
-                if (changeType === "moveNode" ||
-                    changeType === "moveNodes" ||
-                    changeType === "resizeNodes")
+            if (source === "workbench" && (type === "graphChanged" || type === "graphUiChanged")) {
+                const changeType = payload.change?.type;
+                if (changeType === "moveNode" || changeType === "moveNodes" || changeType === "resizeNodes")
                     return prev;
             }
             const nextNo = prev.length > 0 ? (prev[0]?.no ?? 0) + 1 : 1;
@@ -4358,8 +4269,7 @@ function WorkbenchProvider({ wb, runner, overrides, uiVersion, children, }) {
                 // Track custom errors for UI display
                 setSystemErrors((prev) => {
                     // Avoid duplicates by checking message and code
-                    if (prev.some((err) => err.message === systemError.message &&
-                        err.code === systemError.code)) {
+                    if (prev.some((err) => err.message === systemError.message && err.code === systemError.code)) {
                         return prev;
                     }
                     return [...prev, systemError];
@@ -4389,7 +4299,10 @@ function WorkbenchProvider({ wb, runner, overrides, uiVersion, children, }) {
                 // Validate runId is a non-empty string
                 const isValidRunId = runId && typeof runId === "string" && runId.length > 0;
                 if (!isValidRunId) {
-                    console.warn(`[WorkbenchContext] node-start event missing or invalid runId for node ${id}`, { runId, event: s });
+                    console.warn(`[WorkbenchContext] node-start event missing or invalid runId for node ${id}`, {
+                        runId,
+                        event: s,
+                    });
                 }
                 setNodeStatus((prev) => {
                     const current = prev[id]?.activeRuns ?? 0;
@@ -4399,9 +4312,7 @@ function WorkbenchProvider({ wb, runner, overrides, uiVersion, children, }) {
                         [id]: {
                             ...prev[id],
                             activeRuns: current + 1,
-                            activeRunIds: isValidRunId
-                                ? [...currentRunIds, runId]
-                                : currentRunIds,
+                            activeRunIds: isValidRunId ? [...currentRunIds, runId] : currentRunIds,
                             progress: 0,
                         },
                     };
@@ -4445,13 +4356,14 @@ function WorkbenchProvider({ wb, runner, overrides, uiVersion, children, }) {
                     const current = prev[id]?.activeRuns ?? 0;
                     const currentRunIds = prev[id]?.activeRunIds ?? [];
                     if (isValidRunId && !currentRunIds.includes(runId)) {
-                        console.warn(`[WorkbenchContext] node-done event for unknown runId: node=${id} runId=${runId}`, { event: s, currentRunIds });
+                        console.warn(`[WorkbenchContext] node-done event for unknown runId: node=${id} runId=${runId}`, {
+                            event: s,
+                            currentRunIds,
+                        });
                         return prev; // Ignore stale event
                     }
                     const nextActive = Math.max(0, current - 1); // Prevent negative values
-                    const nextRunIds = isValidRunId
-                        ? currentRunIds.filter((rid) => rid !== runId)
-                        : currentRunIds;
+                    const nextRunIds = isValidRunId ? currentRunIds.filter((rid) => rid !== runId) : currentRunIds;
                     const keepProgress = hadError || nextActive > 0;
                     // Clear error flag for this runId
                     if (isValidRunId && errorRunsRef.current[id]?.[runId]) {
@@ -4577,15 +4489,12 @@ function WorkbenchProvider({ wb, runner, overrides, uiVersion, children, }) {
                         }
                     }
                 }
-                else if (event.change?.type !== "setInputs" &&
-                    event.change?.type !== "updateResolvedHandles") {
+                else if (event.change?.type !== "setInputs" && event.change?.type !== "updateResolvedHandles") {
                     await runner.update(event.def, { dry: event.dry });
                 }
                 if (event.commit) {
                     await saveUiRuntimeMetadata(wb, runner);
-                    const history = await runner
-                        .commit(event.reason ?? reason)
-                        .catch((err) => {
+                    const history = await runner.commit(event.reason ?? reason).catch((err) => {
                         console.error("[WorkbenchContext] Error committing after update:", err);
                         return undefined;
                     });
@@ -4604,9 +4513,7 @@ function WorkbenchProvider({ wb, runner, overrides, uiVersion, children, }) {
             setSelectedEdgeId(sel.edges?.[0]);
             if (sel.commit) {
                 await saveUiRuntimeMetadata(wb, runner);
-                const history = await runner
-                    .commit(sel.reason ?? "selection")
-                    .catch((err) => {
+                const history = await runner.commit(sel.reason ?? "selection").catch((err) => {
                     console.error("[WorkbenchContext] Error committing selection change:", err);
                     return undefined;
                 });
@@ -4658,9 +4565,7 @@ function WorkbenchProvider({ wb, runner, overrides, uiVersion, children, }) {
                     }
                 }
                 await saveUiRuntimeMetadata(wb, runner);
-                const history = await runner
-                    .commit(event.reason ?? reason)
-                    .catch((err) => {
+                const history = await runner.commit(event.reason ?? reason).catch((err) => {
                     console.error("[WorkbenchContext] Error committing UI changes:", err);
                     return undefined;
                 });
@@ -4721,9 +4626,7 @@ function WorkbenchProvider({ wb, runner, overrides, uiVersion, children, }) {
                 const metadata = workbenchRuntimeState;
                 let changed = false;
                 // If nodeId is specified, only update that node; otherwise update all nodes
-                const nodesToUpdate = event.nodeId
-                    ? wb.def.nodes.filter((n) => n.nodeId === event.nodeId)
-                    : wb.def.nodes;
+                const nodesToUpdate = event.nodeId ? wb.def.nodes.filter((n) => n.nodeId === event.nodeId) : wb.def.nodes;
                 for (const n of nodesToUpdate) {
                     const cur = next[n.nodeId];
                     if (!cur)
@@ -4934,12 +4837,12 @@ function WorkbenchProvider({ wb, runner, overrides, uiVersion, children, }) {
         getNodeDisplayName,
         setNodeName,
     ]);
-    return (jsxRuntime.jsx(WorkbenchContext.Provider, { value: value, children: children }));
+    return jsxRuntime.jsx(WorkbenchContext.Provider, { value: value, children: children });
 }
 
 function IssueBadge({ level, title, size = 12, className, }) {
     const colorClass = level === "error" ? "text-red-600" : "text-amber-600";
-    return (jsxRuntime.jsx("button", { type: "button", className: `inline-flex items-center justify-center shrink-0 ${colorClass} ${className ?? ""}`, title: title, style: { width: size, height: size }, children: level === "error" ? (jsxRuntime.jsx(react$1.XCircleIcon, { size: size, weight: "fill" })) : (jsxRuntime.jsx(react$1.WarningCircleIcon, { size: size, weight: "fill" })) }));
+    return (jsxRuntime.jsx("button", { type: "button", className: `inline-flex items-center justify-center shrink-0 ${colorClass} ${className ?? ""}`, title: title, style: { width: size, height: size }, children: level === "error" ? jsxRuntime.jsx(react$1.XCircleIcon, { size: size, weight: "fill" }) : jsxRuntime.jsx(react$1.WarningCircleIcon, { size: size, weight: "fill" }) }));
 }
 
 function DefaultNodeHeader({ id, typeId, validation, right, showId, }) {
@@ -4974,9 +4877,7 @@ function DefaultNodeHeader({ id, typeId, validation, right, showId, }) {
         const trimmed = editValue.trim();
         const defaultDisplayName = getDefaultDisplayName();
         // If the trimmed value matches the default display name or typeId, clear the custom name
-        ctx.setNodeName(id, trimmed === defaultDisplayName || trimmed === effectiveTypeId
-            ? undefined
-            : trimmed);
+        ctx.setNodeName(id, trimmed === defaultDisplayName || trimmed === effectiveTypeId ? undefined : trimmed);
         setIsEditing(false);
     }, [ctx, id, editValue, getDefaultDisplayName, effectiveTypeId, typeId]);
     const handleCancel = React.useCallback(() => {
@@ -5013,19 +4914,13 @@ function DefaultNodeHeader({ id, typeId, validation, right, showId, }) {
                                 }, className: "w-4 h-4 flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 rounded text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors", title: "Run from here", children: jsxRuntime.jsx(react$1.FastForwardIcon, { size: 10, weight: "fill" }) }), jsxRuntime.jsx("button", { onClick: (e) => {
                                     e.stopPropagation();
                                     ctx.abortNode(id);
-                                }, className: "w-4 h-4 flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 rounded text-gray-600 dark:text-gray-400 hover:text-red-600 dark:hover:text-red-400 transition-colors", title: "Abort node", children: jsxRuntime.jsx(react$1.StopIcon, { size: 10, weight: "fill" }) })] })), right, validation.issues && validation.issues.length > 0 && (jsxRuntime.jsx(IssueBadge, { level: validation.issues.some((i) => i.level === "error")
-                            ? "error"
-                            : "warning", size: 12, className: "w-3 h-3", title: validation.issues
-                            .map((v) => `${v.code}: ${v.message}`)
-                            .join("; ") })), showId && jsxRuntime.jsxs("span", { className: "text-[10px] opacity-70", children: ["(", id, ")"] })] })] }));
+                                }, className: "w-4 h-4 flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 rounded text-gray-600 dark:text-gray-400 hover:text-red-600 dark:hover:text-red-400 transition-colors", title: "Abort node", children: jsxRuntime.jsx(react$1.StopIcon, { size: 10, weight: "fill" }) })] })), right, validation.issues && validation.issues.length > 0 && (jsxRuntime.jsx(IssueBadge, { level: validation.issues.some((i) => i.level === "error") ? "error" : "warning", size: 12, className: "w-3 h-3", title: validation.issues.map((v) => `${v.code}: ${v.message}`).join("; ") })), showId && jsxRuntime.jsxs("span", { className: "text-[10px] opacity-70", children: ["(", id, ")"] })] })] }));
 }
 
 function NodeHandleItem({ kind, id, type, position, y, isConnectable, className, labelClassName, renderLabel, }) {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Handle, { id: id, type: type, position: position, isConnectable: isConnectable, className: className, style: y !== undefined ? { top: y } : undefined }), renderLabel && (jsxRuntime.jsx("div", { className: `${labelClassName} ${kind === "input" ? " left-2" : " right-2"}`, style: {
                     top: (y ?? 0) - 8,
-                    ...(kind === "input"
-                        ? { right: "50%" }
-                        : { left: "50%", textAlign: "right" }),
+                    ...(kind === "input" ? { right: "50%" } : { left: "50%", textAlign: "right" }),
                     whiteSpace: "nowrap",
                     overflow: "hidden",
                     textOverflow: "ellipsis",
@@ -5085,7 +4980,7 @@ function NodeHandles({ data, isConnectable, getClassName, renderLabel, labelClas
             })] }));
 }
 
-function DefaultNodeContent({ data, isConnectable, }) {
+function DefaultNodeContent({ data, isConnectable }) {
     const { showValues, inputValues, inputDefaults, outputValues, toString } = data;
     const inputEntries = data.inputHandles ?? [];
     const outputEntries = data.outputHandles ?? [];
@@ -5110,9 +5005,7 @@ function DefaultNodeContent({ data, isConnectable, }) {
                     const vIssues = (kind === "input" ? validation.inputs : validation.outputs).filter((v) => v.handle === handleId);
                     const hasAny = vIssues.length > 0;
                     const hasErr = vIssues.some((v) => v.level === "error");
-                    const title = vIssues
-                        .map((v) => `${v.code}: ${v.message}`)
-                        .join("; ");
+                    const title = vIssues.map((v) => `${v.code}: ${v.message}`).join("; ");
                     const valueText = (() => {
                         if (!showValues)
                             return undefined;
@@ -5120,8 +5013,7 @@ function DefaultNodeContent({ data, isConnectable, }) {
                             const value = inputValues?.[entry.id];
                             const isDefault = value !== undefined &&
                                 inputDefaults?.[entry.id] !== undefined &&
-                                JSON.stringify(value) ===
-                                    JSON.stringify(inputDefaults[entry.id]);
+                                JSON.stringify(value) === JSON.stringify(inputDefaults[entry.id]);
                             const txt = toString(entry.typeId, value);
                             const str = typeof txt === "string" ? txt : String(txt);
                             return { text: str, isDefault };
@@ -5137,7 +5029,7 @@ function DefaultNodeContent({ data, isConnectable, }) {
                 } })] }));
 }
 
-const DefaultNode = React.memo(function DefaultNode({ id, data, selected, isConnectable, }) {
+const DefaultNode = React.memo(function DefaultNode({ id, data, selected, isConnectable }) {
     const nodeRef = React.useRef(null);
     const { typeId } = data;
     const status = data.status ?? { activeRuns: 0 };
@@ -5164,7 +5056,7 @@ const DefaultEdge = React.memo(function DefaultEdge({ id, sourceX, sourceY, targ
         targetY,
         targetPosition,
     });
-    return (jsxRuntime.jsx(react.BaseEdge, { id: id, path: edgePath, style: style, markerEnd: markerEnd }));
+    return jsxRuntime.jsx(react.BaseEdge, { id: id, path: edgePath, style: style, markerEnd: markerEnd });
 });
 
 function createNodeContextMenuHandlers(nodeId, wb, runner, registry, outputsMap, outputTypesMap, onClose, getDefaultNodeSize, onCopyResult, runNode, runFromHere) {
@@ -5228,9 +5120,7 @@ function createNodeContextMenuHandlers(nodeId, wb, runner, registry, outputsMap,
  */
 function createCopyHandler(wb, runner, getDefaultNodeSize, onCopyResult) {
     return () => {
-        const getNodeSize = getDefaultNodeSize
-            ? (nodeId, typeId) => getDefaultNodeSize(typeId)
-            : undefined;
+        const getNodeSize = getDefaultNodeSize ? (nodeId, typeId) => getDefaultNodeSize(typeId) : undefined;
         const data = wb.copySelection(runner, getNodeSize);
         if (onCopyResult) {
             onCopyResult(data);
@@ -5245,9 +5135,7 @@ function createNodeCopyHandler(wb, runner, nodeId, getDefaultNodeSize, onCopyRes
         // Select the node first, then copy
         const currentSelection = wb.getSelection();
         wb.setSelection({ nodes: [nodeId], edges: [] });
-        const getNodeSize = getDefaultNodeSize
-            ? (nodeId, typeId) => getDefaultNodeSize(typeId)
-            : undefined;
+        const getNodeSize = getDefaultNodeSize ? (nodeId, typeId) => getDefaultNodeSize(typeId) : undefined;
         const data = wb.copySelection(runner, getNodeSize);
         // Restore original selection
         wb.setSelection(currentSelection);
@@ -5336,8 +5224,7 @@ function getBakeableOutputs(nodeId, wb, registry, outputTypesMap) {
                 const tElem = registry.types.get(base);
                 const arrT = tArr?.bakeTarget;
                 const elemT = tElem?.bakeTarget;
-                if ((arrT && registry.nodes.has(arrT.nodeTypeId)) ||
-                    (elemT && registry.nodes.has(elemT.nodeTypeId)))
+                if ((arrT && registry.nodes.has(arrT.nodeTypeId)) || (elemT && registry.nodes.has(elemT.nodeTypeId)))
                     out.push(h);
             }
             else {
@@ -5359,9 +5246,7 @@ function DebugEvents({ autoScroll, onAutoScrollChange, hideWorkbench, onHideWork
     const scrollRef = React.useRef(null);
     const [copied, setCopied] = React.useState(false);
     const rows = React.useMemo(() => {
-        const filtered = hideWorkbench
-            ? events.filter((e) => e.source !== "workbench")
-            : events;
+        const filtered = hideWorkbench ? events.filter((e) => e.source !== "workbench") : events;
         return filtered.slice().reverse();
     }, [events, hideWorkbench]);
     React.useEffect(() => {
@@ -5430,17 +5315,17 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
     const selectedEdge = wb.def.edges.find((e) => e.id === selectedEdgeId);
     // Use precomputed handles map from context
     const effectiveHandles = selectedNode
-        ? handlesMap[selectedNode.nodeId] ?? {
+        ? (handlesMap[selectedNode.nodeId] ?? {
             inputs: {},
             outputs: {},
             inputDefaults: {},
-        }
+        })
         : { inputs: {}, outputs: {}, inputDefaults: {} };
     const inputHandles = Object.entries(effectiveHandles.inputs)
         .filter(([k]) => !sparkGraph.isInputPrivate(effectiveHandles.inputs, k))
         .map(([k]) => k);
     const outputHandles = Object.keys(effectiveHandles.outputs);
-    const nodeInputsRaw = selectedNodeId ? inputsMap[selectedNodeId] ?? {} : {};
+    const nodeInputsRaw = selectedNodeId ? (inputsMap[selectedNodeId] ?? {}) : {};
     const nodeInputsDefaults = selectedNodeId
         ? {
             ...effectiveHandles.inputDefaults,
@@ -5449,7 +5334,7 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
         : {};
     // Keep defaults separate for placeholder use (don't merge into nodeInputs)
     const nodeInputs = nodeInputsRaw;
-    const nodeOutputs = selectedNodeId ? outputsMap[selectedNodeId] ?? {} : {};
+    const nodeOutputs = selectedNodeId ? (outputsMap[selectedNodeId] ?? {}) : {};
     // Helper to truncate long values
     const truncateValue = (str, maxLen = 50) => {
         if (str.length <= maxLen)
@@ -5470,15 +5355,9 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
             document.body.removeChild(textarea);
         });
     };
-    const selectedNodeStatus = selectedNodeId
-        ? nodeStatus?.[selectedNodeId]
-        : undefined;
-    const selectedNodeValidation = selectedNodeId
-        ? nodeValidationIssues?.[selectedNodeId] ?? []
-        : [];
-    const selectedEdgeValidation = selectedEdge
-        ? edgeValidationIssues?.[selectedEdge.id] ?? []
-        : [];
+    const selectedNodeStatus = selectedNodeId ? nodeStatus?.[selectedNodeId] : undefined;
+    const selectedNodeValidation = selectedNodeId ? (nodeValidationIssues?.[selectedNodeId] ?? []) : [];
+    const selectedEdgeValidation = selectedEdge ? (edgeValidationIssues?.[selectedEdge.id] ?? []) : [];
     const selectedNodeHandleValidation = selectedNodeId
         ? {
             inputs: nodeValidationHandles?.inputs?.[selectedNodeId] ?? [],
@@ -5508,10 +5387,8 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
         if (outIssues.length === 0)
             return null;
         const outErr = outIssues.some((m) => m.level === "error");
-        const outTitle = outIssues
-            .map((v) => `${v.code}: ${v.message}`)
-            .join("; ");
-        return (jsxRuntime.jsx(IssueBadge, { level: outErr ? "error" : "warning", size: 24, className: "ml-1 w-6 h-6", title: outTitle }));
+        const outTitle = outIssues.map((v) => `${v.code}: ${v.message}`).join("; ");
+        return jsxRuntime.jsx(IssueBadge, { level: outErr ? "error" : "warning", size: 24, className: "ml-1 w-6 h-6", title: outTitle });
     }, [selectedNodeHandleValidation]);
     // Render output display value
     const renderOutputDisplay = React.useCallback((outputValue, effectiveHandle) => {
@@ -5553,9 +5430,7 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
             const { typeId: displayTypeId, value: displayValue } = unwrapForDisplay(typeId, current);
             const display = safeToString(displayTypeId, displayValue);
             const wasOriginal = originals[h];
-            const isDirty = drafts[h] !== undefined &&
-                wasOriginal !== undefined &&
-                drafts[h] !== wasOriginal;
+            const isDirty = drafts[h] !== undefined && wasOriginal !== undefined && drafts[h] !== wasOriginal;
             if (!isDirty) {
                 nextDrafts[h] = display;
                 nextOriginals[h] = display;
@@ -5578,7 +5453,7 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
     return (jsxRuntime.jsxs("div", { className: `${widthClass} border-l border-gray-300 p-3 flex flex-col h-full min-h-0 overflow-auto select-none`, children: [jsxRuntime.jsxs("div", { className: "flex-1 overflow-auto", children: [contextPanel && jsxRuntime.jsx("div", { className: "mb-2", children: contextPanel }), inputValidationErrors.length > 0 && (jsxRuntime.jsxs("div", { className: "mb-2 space-y-1", children: [inputValidationErrors.map((err, i) => (jsxRuntime.jsxs("div", { className: "text-xs text-red-700 bg-red-50 border border-red-200 rounded px-2 py-1 flex items-start justify-between gap-2", children: [jsxRuntime.jsxs("div", { className: "flex-1", children: [jsxRuntime.jsx("div", { className: "font-semibold", children: "Input Validation Error" }), jsxRuntime.jsx("div", { className: "break-words", children: err.message }), jsxRuntime.jsxs("div", { className: "text-[10px] text-red-600 mt-1", children: [err.nodeId, ".", err.handle, " (type: ", err.typeId, ")"] })] }), jsxRuntime.jsx("button", { className: "text-red-500 hover:text-red-700 text-[10px] px-1", onClick: () => removeInputValidationError(i), title: "Dismiss", children: jsxRuntime.jsx(react$1.XIcon, { size: 10 }) })] }, i))), inputValidationErrors.length > 1 && (jsxRuntime.jsx("button", { className: "text-xs text-red-600 hover:text-red-800 underline", onClick: clearInputValidationErrors, children: "Clear all" }))] })), systemErrors.length > 0 && (jsxRuntime.jsxs("div", { className: "mb-2 space-y-1", children: [systemErrors.map((err, i) => (jsxRuntime.jsxs("div", { className: "text-xs text-red-700 bg-red-50 border border-red-200 rounded px-2 py-1 flex items-start justify-between gap-2", children: [jsxRuntime.jsxs("div", { className: "flex-1", children: [jsxRuntime.jsx("div", { className: "font-semibold", children: err.code ? `Error ${err.code}` : "Error" }), jsxRuntime.jsx("div", { className: "break-words", children: err.message })] }), jsxRuntime.jsx("button", { className: "text-red-500 hover:text-red-700 text-[10px] px-1", onClick: () => removeSystemError(i), title: "Dismiss", children: jsxRuntime.jsx(react$1.XIcon, { size: 10 }) })] }, i))), systemErrors.length > 1 && (jsxRuntime.jsx("button", { className: "text-xs text-red-600 hover:text-red-800 underline", onClick: clearSystemErrors, children: "Clear all" }))] })), registryErrors.length > 0 && (jsxRuntime.jsxs("div", { className: "mb-2 space-y-1", children: [registryErrors.map((err, i) => (jsxRuntime.jsxs("div", { className: "text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded px-2 py-1 flex items-start justify-between gap-2", children: [jsxRuntime.jsxs("div", { className: "flex-1", children: [jsxRuntime.jsx("div", { className: "font-semibold", children: "Registry Error" }), jsxRuntime.jsx("div", { className: "break-words", children: err.message }), err.attempt && err.maxAttempts && (jsxRuntime.jsxs("div", { className: "text-[10px] text-amber-600 mt-1", children: ["Attempt ", err.attempt, " of ", err.maxAttempts] }))] }), jsxRuntime.jsx("button", { className: "text-amber-500 hover:text-amber-700 text-[10px] px-1", onClick: () => removeRegistryError(i), title: "Dismiss", children: jsxRuntime.jsx(react$1.XIcon, { size: 10 }) })] }, i))), registryErrors.length > 1 && (jsxRuntime.jsx("button", { className: "text-xs text-amber-600 hover:text-amber-800 underline", onClick: clearRegistryErrors, children: "Clear all" }))] })), jsxRuntime.jsx("div", { className: "font-semibold mb-2", children: "Inspector" }), jsxRuntime.jsxs("div", { className: "text-xs text-gray-500 mb-2", children: ["valuesTick: ", valuesTick] }), jsxRuntime.jsx("div", { className: "flex-1", children: !selectedNode && !selectedEdge ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: "text-gray-500", children: "Select a node or edge." }), globalValidationIssues && globalValidationIssues.length > 0 && (jsxRuntime.jsxs("div", { className: "mt-2 text-xs bg-red-50 border border-red-200 rounded px-2 py-1", children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Validation" }), jsxRuntime.jsx("ul", { className: "list-disc ml-4", children: globalValidationIssues.map((m, i) => (jsxRuntime.jsxs("li", { className: "flex items-center gap-1", children: [jsxRuntime.jsx(IssueBadge, { level: m.level, size: 24, className: "w-6 h-6" }), jsxRuntime.jsx("span", { children: `${m.code}: ${m.message}` }), !!m.data?.edgeId && (jsxRuntime.jsx("button", { className: "ml-2 text-[10px] px-1 py-[2px] border border-red-300 rounded text-red-700 hover:bg-red-50", onClick: (e) => {
                                                             e.stopPropagation();
                                                             deleteEdgeById(m.data?.edgeId);
-                                                        }, title: "Delete referenced edge", children: "Delete edge" }))] }, i))) })] }))] })) : selectedEdge ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: "mb-2", children: [jsxRuntime.jsxs("div", { children: ["Edge: ", selectedEdge.id] }), jsxRuntime.jsxs("div", { children: [selectedEdge.source.nodeId, ".", selectedEdge.source.handle, " \u2192", " ", selectedEdge.target.nodeId, ".", selectedEdge.target.handle] }), renderEdgeStatus(), jsxRuntime.jsx("div", { className: "mt-1", children: jsxRuntime.jsx("button", { className: "text-xs px-2 py-1 border border-red-300 rounded text-red-700 hover:bg-red-50", onClick: (e) => {
+                                                        }, title: "Delete referenced edge", children: "Delete edge" }))] }, i))) })] }))] })) : selectedEdge ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: "mb-2", children: [jsxRuntime.jsxs("div", { children: ["Edge: ", selectedEdge.id] }), jsxRuntime.jsxs("div", { children: [selectedEdge.source.nodeId, ".", selectedEdge.source.handle, " \u2192 ", selectedEdge.target.nodeId, ".", selectedEdge.target.handle] }), renderEdgeStatus(), jsxRuntime.jsx("div", { className: "mt-1", children: jsxRuntime.jsx("button", { className: "text-xs px-2 py-1 border border-red-300 rounded text-red-700 hover:bg-red-50", onClick: (e) => {
                                                     e.stopPropagation();
                                                     deleteEdgeById(selectedEdge.id);
                                                 }, title: "Delete this edge", children: "Delete edge" }) }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mt-1", children: [jsxRuntime.jsxs("label", { className: "w-20 flex flex-col", children: [jsxRuntime.jsx("span", { children: "Type" }), jsxRuntime.jsx("span", { className: "text-gray-500 text-[11px]", children: "DataTypeId" })] }), jsxRuntime.jsxs("select", { className: "border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full", value: selectedEdge.typeId ?? "", onChange: (e) => {
@@ -5588,26 +5463,17 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
                                                     }, children: [jsxRuntime.jsx("option", { value: "", children: "(infer from source)" }), Array.from(wb.registry.types.keys()).map((tid) => (jsxRuntime.jsx("option", { value: tid, children: tid }, tid)))] })] })] }), selectedEdgeValidation.length > 0 && (jsxRuntime.jsxs("div", { className: "mt-2 text-xs bg-red-50 border border-red-200 rounded px-2 py-1", children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Validation" }), jsxRuntime.jsx("ul", { className: "list-disc ml-4", children: selectedEdgeValidation.map((m, i) => (jsxRuntime.jsxs("li", { className: "flex items-center gap-1", children: [jsxRuntime.jsx(IssueBadge, { level: m.level, size: 24, className: "w-6 h-6" }), jsxRuntime.jsx("span", { children: `${m.code}: ${m.message}` }), jsxRuntime.jsx("button", { className: "ml-2 text-[10px] px-1 py-[2px] border border-red-300 rounded text-red-700 hover:bg-red-50", onClick: (e) => {
                                                             e.stopPropagation();
                                                             deleteEdgeById(selectedEdge.id);
-                                                        }, title: "Delete this edge", children: "Delete edge" })] }, i))) })] }))] })) : (jsxRuntime.jsxs("div", { children: [selectedNode && (jsxRuntime.jsxs("div", { className: "mb-2", children: [jsxRuntime.jsxs("div", { children: ["Node: ", selectedNode.nodeId] }), jsxRuntime.jsxs("div", { children: ["Type: ", selectedNode.typeId] }), !!selectedNodeStatus?.activeRuns &&
-                                            selectedNodeStatus.activeRuns > 0 && (jsxRuntime.jsxs("div", { className: "mt-1 text-xs text-blue-700 bg-blue-50 border border-blue-200 rounded px-2 py-1", children: [jsxRuntime.jsxs("div", { className: "font-semibold", children: ["Running (", selectedNodeStatus.activeRuns, ")"] }), selectedNodeStatus.activeRunIds &&
-                                                    selectedNodeStatus.activeRunIds.length > 0 ? (jsxRuntime.jsxs("div", { className: "mt-1", children: [jsxRuntime.jsx("div", { className: "text-[10px] text-blue-600", children: "RunIds:" }), jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 mt-1", children: selectedNodeStatus.activeRunIds.map((runId, idx) => (jsxRuntime.jsx("span", { className: "text-[10px] px-1.5 py-0.5 bg-blue-100 border border-blue-300 rounded font-mono", children: runId }, idx))) })] })) : (jsxRuntime.jsx("div", { className: "text-[10px] text-blue-600 mt-1", children: "RunIds not available (some runs may have started without runId)" }))] })), !!selectedNodeStatus?.lastError && (jsxRuntime.jsx("div", { className: "mt-2 text-sm text-red-700 bg-red-50 border border-red-200 rounded px-2 py-1 break-words", children: String(selectedNodeStatus.lastError?.message ??
-                                                selectedNodeStatus.lastError) }))] })), jsxRuntime.jsxs("div", { className: "mb-2", children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Inputs" }), inputHandles.length === 0 ? (jsxRuntime.jsx("div", { className: "text-gray-500", children: "No inputs" })) : (inputHandles.map((h) => {
+                                                        }, title: "Delete this edge", children: "Delete edge" })] }, i))) })] }))] })) : (jsxRuntime.jsxs("div", { children: [selectedNode && (jsxRuntime.jsxs("div", { className: "mb-2", children: [jsxRuntime.jsxs("div", { children: ["Node: ", selectedNode.nodeId] }), jsxRuntime.jsxs("div", { children: ["Type: ", selectedNode.typeId] }), !!selectedNodeStatus?.activeRuns && selectedNodeStatus.activeRuns > 0 && (jsxRuntime.jsxs("div", { className: "mt-1 text-xs text-blue-700 bg-blue-50 border border-blue-200 rounded px-2 py-1", children: [jsxRuntime.jsxs("div", { className: "font-semibold", children: ["Running (", selectedNodeStatus.activeRuns, ")"] }), selectedNodeStatus.activeRunIds && selectedNodeStatus.activeRunIds.length > 0 ? (jsxRuntime.jsxs("div", { className: "mt-1", children: [jsxRuntime.jsx("div", { className: "text-[10px] text-blue-600", children: "RunIds:" }), jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 mt-1", children: selectedNodeStatus.activeRunIds.map((runId, idx) => (jsxRuntime.jsx("span", { className: "text-[10px] px-1.5 py-0.5 bg-blue-100 border border-blue-300 rounded font-mono", children: runId }, idx))) })] })) : (jsxRuntime.jsx("div", { className: "text-[10px] text-blue-600 mt-1", children: "RunIds not available (some runs may have started without runId)" }))] })), !!selectedNodeStatus?.lastError && (jsxRuntime.jsx("div", { className: "mt-2 text-sm text-red-700 bg-red-50 border border-red-200 rounded px-2 py-1 break-words", children: String(selectedNodeStatus.lastError?.message ?? selectedNodeStatus.lastError) }))] })), jsxRuntime.jsxs("div", { className: "mb-2", children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Inputs" }), inputHandles.length === 0 ? (jsxRuntime.jsx("div", { className: "text-gray-500", children: "No inputs" })) : (inputHandles.map((h) => {
                                             const typeId = sparkGraph.getInputTypeId(effectiveHandles.inputs, h);
                                             const declaredTypes = sparkGraph.getInputDeclaredTypes(effectiveHandles.inputs, h);
-                                            const typeLabel = Array.isArray(declaredTypes)
-                                                ? declaredTypes.join(" | ")
-                                                : typeId ?? "";
-                                            const isLinked = wb.def.edges.some((e) => e.target.nodeId === selectedNodeId &&
-                                                e.target.handle === h);
+                                            const typeLabel = Array.isArray(declaredTypes) ? declaredTypes.join(" | ") : (typeId ?? "");
+                                            const isLinked = wb.def.edges.some((e) => e.target.nodeId === selectedNodeId && e.target.handle === h);
                                             const inbound = new Set(wb.def.edges
-                                                .filter((e) => e.target.nodeId === selectedNodeId &&
-                                                e.target.handle === h)
+                                                .filter((e) => e.target.nodeId === selectedNodeId && e.target.handle === h)
                                                 .map((e) => e.target.handle));
                                             const { typeId: defaultTypeId, value: defaultValue } = unwrapForDisplay(typeId, nodeInputsDefaults[h]);
                                             const hasDefault = !inbound.has(h) && nodeInputsDefaults[h] !== undefined;
-                                            const defaultStr = hasDefault
-                                                ? safeToString(defaultTypeId, defaultValue)
-                                                : undefined;
+                                            const defaultStr = hasDefault ? safeToString(defaultTypeId, defaultValue) : undefined;
                                             const commonProps = {
                                                 style: { flex: 1 },
                                                 disabled: isLinked,
@@ -5645,12 +5511,8 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
                                             const inIssues = selectedNodeHandleValidation.inputs.filter((m) => m.handle === h);
                                             const hasValidation = inIssues.length > 0;
                                             const hasErr = inIssues.some((m) => m.level === "error");
-                                            const title = inIssues
-                                                .map((v) => `${v.code}: ${v.message}`)
-                                                .join("; ");
-                                            return (jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [jsxRuntime.jsxs("label", { className: "w-32 flex flex-col", children: [jsxRuntime.jsx("span", { children: prettyHandle(h) }), jsxRuntime.jsx("span", { className: "text-gray-500 text-[11px]", children: typeLabel })] }), hasValidation && (jsxRuntime.jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 24, className: "ml-1 w-6 h-6", title: title })), isEnum ? (jsxRuntime.jsxs("div", { className: "flex items-center gap-1 flex-1", children: [jsxRuntime.jsxs("select", { className: "border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500 flex-1 select-text", value: current !== undefined && current !== null
-                                                                    ? String(current)
-                                                                    : "", onChange: (e) => {
+                                            const title = inIssues.map((v) => `${v.code}: ${v.message}`).join("; ");
+                                            return (jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [jsxRuntime.jsxs("label", { className: "w-32 flex flex-col", children: [jsxRuntime.jsx("span", { children: prettyHandle(h) }), jsxRuntime.jsx("span", { className: "text-gray-500 text-[11px]", children: typeLabel })] }), hasValidation && (jsxRuntime.jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 24, className: "ml-1 w-6 h-6", title: title })), isEnum ? (jsxRuntime.jsxs("div", { className: "flex items-center gap-1 flex-1", children: [jsxRuntime.jsxs("select", { className: "border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500 flex-1 select-text", value: current !== undefined && current !== null ? String(current) : "", onChange: (e) => {
                                                                     const val = e.target.value;
                                                                     const raw = val === "" ? undefined : Number(val);
                                                                     setInput(h, raw);
@@ -5658,13 +5520,7 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
                                                                     const display = safeToString(typeId, raw);
                                                                     setDrafts((d) => ({ ...d, [h]: display }));
                                                                     setOriginals((o) => ({ ...o, [h]: display }));
-                                                                }, ...commonProps, children: [jsxRuntime.jsx("option", { value: "", children: placeholder
-                                                                            ? `Default: ${placeholder}`
-                                                                            : "(select)" }), wb.registry.enums
-                                                                        .get(typeId)
-                                                                        ?.options.map((opt) => (jsxRuntime.jsx("option", { value: String(opt.value), children: opt.label }, opt.value)))] }), hasValue && !isLinked && (jsxRuntime.jsx("button", { className: "flex-shrink-0 p-1 hover:bg-gray-100 rounded text-gray-500 hover:text-gray-700", onClick: clearInput, title: "Clear input value", children: jsxRuntime.jsx(react$1.XCircleIcon, { size: 16 }) }))] })) : isLinked ? (jsxRuntime.jsx("div", { className: "flex items-center gap-1 flex-1", children: jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: renderLinkedInputDisplay(displayTypeId, displayValue) }) })) : (jsxRuntime.jsxs("div", { className: "flex items-center gap-1 flex-1", children: [jsxRuntime.jsx("input", { className: "border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500 flex-1 select-text", placeholder: placeholder
-                                                                    ? `Default: ${placeholder}`
-                                                                    : undefined, value: value, onChange: (e) => onChangeText(e.target.value), onBlur: commit, onKeyDown: (e) => {
+                                                                }, ...commonProps, children: [jsxRuntime.jsx("option", { value: "", children: placeholder ? `Default: ${placeholder}` : "(select)" }), wb.registry.enums.get(typeId)?.options.map((opt) => (jsxRuntime.jsx("option", { value: String(opt.value), children: opt.label }, opt.value)))] }), hasValue && !isLinked && (jsxRuntime.jsx("button", { className: "flex-shrink-0 p-1 hover:bg-gray-100 rounded text-gray-500 hover:text-gray-700", onClick: clearInput, title: "Clear input value", children: jsxRuntime.jsx(react$1.XCircleIcon, { size: 16 }) }))] })) : isLinked ? (jsxRuntime.jsx("div", { className: "flex items-center gap-1 flex-1", children: jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: renderLinkedInputDisplay(displayTypeId, displayValue) }) })) : (jsxRuntime.jsxs("div", { className: "flex items-center gap-1 flex-1", children: [jsxRuntime.jsx("input", { className: "border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500 flex-1 select-text", placeholder: placeholder ? `Default: ${placeholder}` : undefined, value: value, onChange: (e) => onChangeText(e.target.value), onBlur: commit, onKeyDown: (e) => {
                                                                     if (e.key === "Enter")
                                                                         commit();
                                                                     if (e.key === "Escape")
@@ -5678,12 +5534,11 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
 
 // Helper to format shortcut for current platform
 function formatShortcut(shortcut) {
-    const isMac = typeof navigator !== "undefined" &&
-        navigator.userAgent.toLowerCase().includes("mac");
+    const isMac = typeof navigator !== "undefined" && navigator.userAgent.toLowerCase().includes("mac");
     return shortcut.replace(/⌘\/Ctrl/g, isMac ? "⌘" : "Ctrl");
 }
-function ContextMenuButton({ label, onClick, disabled = false, shortcut, }) {
-    return (jsxRuntime.jsxs("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-between", onClick: onClick, disabled: disabled, children: [jsxRuntime.jsx("span", { children: label }), shortcut && (jsxRuntime.jsx("span", { className: "text-gray-400 text-xs ml-4", children: formatShortcut(shortcut) }))] }));
+function ContextMenuButton({ label, onClick, disabled = false, shortcut }) {
+    return (jsxRuntime.jsxs("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-between", onClick: onClick, disabled: disabled, children: [jsxRuntime.jsx("span", { children: label }), shortcut && jsxRuntime.jsx("span", { className: "text-gray-400 text-xs ml-4", children: formatShortcut(shortcut) })] }));
 }
 
 function DefaultContextMenu({ open, clientPos, handlers, registry, nodeIds, keyboardShortcuts = {
@@ -5696,9 +5551,7 @@ function DefaultContextMenu({ open, clientPos, handlers, registry, nodeIds, keyb
     const [query, setQuery] = React.useState("");
     const [hasPasteData, setHasPasteData] = React.useState(false);
     const q = query.trim().toLowerCase();
-    const filteredIds = q
-        ? nodeIds.filter((id) => id.toLowerCase().includes(q))
-        : nodeIds;
+    const filteredIds = q ? nodeIds.filter((id) => id.toLowerCase().includes(q)) : nodeIds;
     const canUndo = handlers.canUndo ?? false;
     const canRedo = handlers.canRedo ?? false;
     React.useEffect(() => {
@@ -5760,8 +5613,7 @@ function DefaultContextMenu({ open, clientPos, handlers, registry, nodeIds, keyb
     // Clamp menu position to viewport
     const MENU_MIN_WIDTH = 180;
     const PADDING = 16; // rough padding/shadow
-    const x = Math.min(clientPos.x, (typeof window !== "undefined" ? window.innerWidth : 0) -
-        (MENU_MIN_WIDTH + PADDING));
+    const x = Math.min(clientPos.x, (typeof window !== "undefined" ? window.innerWidth : 0) - (MENU_MIN_WIDTH + PADDING));
     const y = Math.min(clientPos.y, (typeof window !== "undefined" ? window.innerHeight : 0) - 240);
     const handleClick = (typeId) => {
         // project() is deprecated; use screenToFlowPosition for screen coordinates
@@ -5793,10 +5645,7 @@ function DefaultContextMenu({ open, clientPos, handlers, registry, nodeIds, keyb
     return (jsxRuntime.jsxs("div", { ref: ref, tabIndex: -1, className: "fixed z-[1000] bg-white border border-gray-300 rounded-lg shadow-lg p-1 min-w-[180px] text-sm text-gray-700 select-none", style: { left: x, top: y }, onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), onWheel: (e) => e.stopPropagation(), onContextMenu: (e) => {
             e.preventDefault();
             e.stopPropagation();
-        }, children: [hasPasteData && handlers.onPaste && (jsxRuntime.jsx(ContextMenuButton, { label: "Paste", onClick: handlePaste, shortcut: keyboardShortcuts.paste })), (handlers.onUndo || handlers.onRedo || handlers.onSelectAll) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasPasteData && handlers.onPaste && (jsxRuntime.jsx("div", { className: "h-px bg-gray-200 my-1" })), handlers.onSelectAll && (jsxRuntime.jsx(ContextMenuButton, { label: "Select All", onClick: handlers.onSelectAll, shortcut: keyboardShortcuts.selectAll })), handlers.onSelectAll && (handlers.onUndo || handlers.onRedo) && (jsxRuntime.jsx("div", { className: "h-px bg-gray-200 my-1" })), handlers.onUndo && (jsxRuntime.jsx(ContextMenuButton, { label: "Undo", onClick: handlers.onUndo, disabled: !canUndo, shortcut: keyboardShortcuts.undo })), handlers.onRedo && (jsxRuntime.jsx(ContextMenuButton, { label: "Redo", onClick: handlers.onRedo, disabled: !canRedo, shortcut: keyboardShortcuts.redo })), (handlers.onUndo || handlers.onRedo) && (jsxRuntime.jsx("div", { className: "h-px bg-gray-200 my-1" }))] })), hasPasteData &&
-                handlers.onPaste &&
-                !handlers.onUndo &&
-                !handlers.onRedo && jsxRuntime.jsx("div", { className: "h-px bg-gray-200 my-1" }), jsxRuntime.jsxs("div", { className: "px-2 py-1 font-semibold text-gray-700", children: ["Add Node", " ", jsxRuntime.jsxs("span", { className: "text-gray-500 font-normal", children: ["(", totalCount, ")"] })] }), jsxRuntime.jsx("div", { className: "px-2 pb-1", children: jsxRuntime.jsx("input", { ref: inputRef, type: "text", value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Filter nodes...", className: "w-full border border-gray-300 rounded px-2 py-1 text-sm outline-none focus:border-gray-400 select-text", onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), onWheel: (e) => e.stopPropagation() }) }), jsxRuntime.jsx("div", { className: "max-h-60 overflow-auto", children: totalCount > 0 ? (renderTree(root)) : (jsxRuntime.jsx("div", { className: "px-3 py-2 text-gray-400", children: "No matches" })) })] }));
+        }, children: [hasPasteData && handlers.onPaste && (jsxRuntime.jsx(ContextMenuButton, { label: "Paste", onClick: handlePaste, shortcut: keyboardShortcuts.paste })), (handlers.onUndo || handlers.onRedo || handlers.onSelectAll) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasPasteData && handlers.onPaste && jsxRuntime.jsx("div", { className: "h-px bg-gray-200 my-1" }), handlers.onSelectAll && (jsxRuntime.jsx(ContextMenuButton, { label: "Select All", onClick: handlers.onSelectAll, shortcut: keyboardShortcuts.selectAll })), handlers.onSelectAll && (handlers.onUndo || handlers.onRedo) && jsxRuntime.jsx("div", { className: "h-px bg-gray-200 my-1" }), handlers.onUndo && (jsxRuntime.jsx(ContextMenuButton, { label: "Undo", onClick: handlers.onUndo, disabled: !canUndo, shortcut: keyboardShortcuts.undo })), handlers.onRedo && (jsxRuntime.jsx(ContextMenuButton, { label: "Redo", onClick: handlers.onRedo, disabled: !canRedo, shortcut: keyboardShortcuts.redo })), (handlers.onUndo || handlers.onRedo) && jsxRuntime.jsx("div", { className: "h-px bg-gray-200 my-1" })] })), hasPasteData && handlers.onPaste && !handlers.onUndo && !handlers.onRedo && (jsxRuntime.jsx("div", { className: "h-px bg-gray-200 my-1" })), jsxRuntime.jsxs("div", { className: "px-2 py-1 font-semibold text-gray-700", children: ["Add Node ", jsxRuntime.jsxs("span", { className: "text-gray-500 font-normal", children: ["(", totalCount, ")"] })] }), jsxRuntime.jsx("div", { className: "px-2 pb-1", children: jsxRuntime.jsx("input", { ref: inputRef, type: "text", value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Filter nodes...", className: "w-full border border-gray-300 rounded px-2 py-1 text-sm outline-none focus:border-gray-400 select-text", onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), onWheel: (e) => e.stopPropagation() }) }), jsxRuntime.jsx("div", { className: "max-h-60 overflow-auto", children: totalCount > 0 ? renderTree(root) : jsxRuntime.jsx("div", { className: "px-3 py-2 text-gray-400", children: "No matches" }) })] }));
 }
 
 function NodeContextMenu({ open, clientPos, nodeId, handlers, bakeableOutputs, runMode, wb, keyboardShortcuts = {
@@ -5833,18 +5682,13 @@ function NodeContextMenu({ open, clientPos, nodeId, handlers, bakeableOutputs, r
     if (!open || !clientPos || !nodeId)
         return null;
     // Determine if this is a start node (no inbound edges)
-    const isStartNode = wb
-        ? !wb.def.edges.some((e) => e.target.nodeId === nodeId)
-        : false;
+    const isStartNode = wb ? !wb.def.edges.some((e) => e.target.nodeId === nodeId) : false;
     // Check if node has outbound edges (required for "Run workflow" / "Run from here")
-    const hasOutboundEdges = wb
-        ? wb.def.edges.some((e) => e.source.nodeId === nodeId)
-        : false;
+    const hasOutboundEdges = wb ? wb.def.edges.some((e) => e.source.nodeId === nodeId) : false;
     // clamp
     const MENU_MIN_WIDTH = 180;
     const PADDING = 16;
-    const x = Math.min(clientPos.x, (typeof window !== "undefined" ? window.innerWidth : 0) -
-        (MENU_MIN_WIDTH + PADDING));
+    const x = Math.min(clientPos.x, (typeof window !== "undefined" ? window.innerWidth : 0) - (MENU_MIN_WIDTH + PADDING));
     const y = Math.min(clientPos.y, (typeof window !== "undefined" ? window.innerHeight : 0) - 240);
     return (jsxRuntime.jsxs("div", { ref: ref, tabIndex: -1, className: "fixed z-[1000] bg-white border border-gray-300 rounded-lg shadow-lg p-1 min-w-[180px] text-sm text-gray-700 select-none", style: { left: x, top: y }, onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), onWheel: (e) => e.stopPropagation(), onContextMenu: (e) => {
             e.preventDefault();
@@ -5888,8 +5732,7 @@ function SelectionContextMenu({ open, clientPos, handlers, keyboardShortcuts = {
     // Clamp menu position to viewport
     const MENU_MIN_WIDTH = 180;
     const PADDING = 16;
-    const x = Math.min(clientPos.x, (typeof window !== "undefined" ? window.innerWidth : 0) -
-        (MENU_MIN_WIDTH + PADDING));
+    const x = Math.min(clientPos.x, (typeof window !== "undefined" ? window.innerWidth : 0) - (MENU_MIN_WIDTH + PADDING));
     const y = Math.min(clientPos.y, (typeof window !== "undefined" ? window.innerHeight : 0) - 100);
     return (jsxRuntime.jsxs("div", { ref: ref, tabIndex: -1, className: "fixed z-[1000] bg-white border border-gray-300 rounded-lg shadow-lg p-1 min-w-[180px] text-sm text-gray-700 select-none", style: { left: x, top: y }, onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), onWheel: (e) => e.stopPropagation(), onContextMenu: (e) => {
             e.preventDefault();
@@ -5897,7 +5740,7 @@ function SelectionContextMenu({ open, clientPos, handlers, keyboardShortcuts = {
         }, children: [jsxRuntime.jsx("div", { className: "px-2 py-1 font-semibold text-gray-700", children: "Selection" }), jsxRuntime.jsx(ContextMenuButton, { label: "Copy", onClick: handlers.onCopy, shortcut: keyboardShortcuts.copy }), handlers.onDuplicate && (jsxRuntime.jsx(ContextMenuButton, { label: "Duplicate", onClick: handlers.onDuplicate, shortcut: keyboardShortcuts.duplicate })), jsxRuntime.jsx(ContextMenuButton, { label: "Delete", onClick: handlers.onDelete, shortcut: keyboardShortcuts.delete })] }));
 }
 
-function KeyboardShortcutToast({ message, duration = 1000, onClose, }) {
+function KeyboardShortcutToast({ message, duration = 1000, onClose }) {
     const [isVisible, setIsVisible] = React.useState(true);
     const onCloseRef = React.useRef(onClose);
     const fadeOutTimerRef = React.useRef(null);
@@ -5954,7 +5797,7 @@ const SelectionActiveSync = ({ selection }) => {
 };
 
 const WorkbenchCanvasComponent = React.forwardRef((props, ref) => {
-    const { showValues, toString, toElement, getDefaultNodeSize, reactFlowProps, children, } = props;
+    const { showValues, toString, toElement, getDefaultNodeSize, reactFlowProps, children } = props;
     const { wb, handlesMap, inputsMap, inputDefaultsMap, outputsMap, outputTypesMap, valuesTick, nodeStatus, edgeStatus, validationByNode, validationByEdge, uiVersion, registryVersion, runner, overrides, runNode, runFromHere, runMode, } = useWorkbenchContext();
     const nodeValidation = validationByNode;
     const edgeValidation = validationByEdge.errors;
@@ -6038,7 +5881,7 @@ const WorkbenchCanvasComponent = React.forwardRef((props, ref) => {
             }
         },
     }), []);
-    const { onConnect, onNodesChange, onEdgesChange, onEdgesDelete, onNodesDelete, } = useWorkbenchBridge(wb, handlesMap);
+    const { onConnect, onNodesChange, onEdgesChange, onEdgesDelete, onNodesDelete } = useWorkbenchBridge(wb, handlesMap);
     const ui = React.useMemo(() => wb.getUI(), [wb, uiVersion]);
     const { nodeTypes, resolveNodeType } = React.useMemo(() => {
         // Build nodeTypes map using UI extension registry
@@ -6054,7 +5897,7 @@ const WorkbenchCanvasComponent = React.forwardRef((props, ref) => {
         for (const [typeId, comp] of custom.entries()) {
             types[`spark-${typeId}`] = comp;
         }
-        const resolver = (nodeTypeId) => custom.has(nodeTypeId) ? `spark-${nodeTypeId}` : "spark-default";
+        const resolver = (nodeTypeId) => (custom.has(nodeTypeId) ? `spark-${nodeTypeId}` : "spark-default");
         return { nodeTypes: types, resolveNodeType: resolver };
         // Include uiVersion to recompute when custom renderers are registered
         // Include registryVersion to recompute when registry enums/types change
@@ -6099,12 +5942,8 @@ const WorkbenchCanvasComponent = React.forwardRef((props, ref) => {
         try {
             const prevNodeIds = new Set(prevNodesRef.current.map((n) => n.id));
             const nextNodeIds = new Set(out.nodes.map((n) => n.id));
-            const addedNodeIds = out.nodes
-                .filter((n) => !prevNodeIds.has(n.id))
-                .map((n) => n.id);
-            const removedNodeIds = prevNodesRef.current
-                .filter((n) => !nextNodeIds.has(n.id))
-                .map((n) => n.id);
+            const addedNodeIds = out.nodes.filter((n) => !prevNodeIds.has(n.id)).map((n) => n.id);
+            const removedNodeIds = prevNodesRef.current.filter((n) => !nextNodeIds.has(n.id)).map((n) => n.id);
             const prevNodeMap = new Map(prevNodesRef.current.map((n) => [n.id, n]));
             const changedNodeIds = out.nodes
                 .filter((n) => {
@@ -6114,9 +5953,7 @@ const WorkbenchCanvasComponent = React.forwardRef((props, ref) => {
                 .map((n) => n.id);
             // Detect handle updates (ids/length changes) for targeted debug
             const toIds = (arr) => Array.isArray(arr)
-                ? arr
-                    .map((h) => h && typeof h === "object" && "id" in h ? String(h.id) : "")
-                    .filter(Boolean)
+                ? arr.map((h) => (h && typeof h === "object" && "id" in h ? String(h.id) : "")).filter(Boolean)
                 : [];
             const handlesEqual = (a, b) => {
                 const aIds = toIds(a);
@@ -6141,12 +5978,8 @@ const WorkbenchCanvasComponent = React.forwardRef((props, ref) => {
                 .map((n) => n.id);
             const prevEdgeIds = new Set(prevEdgesRef.current.map((e) => e.id));
             const nextEdgeIds = new Set(out.edges.map((e) => e.id));
-            const addedEdgeIds = out.edges
-                .filter((e) => !prevEdgeIds.has(e.id))
-                .map((e) => e.id);
-            const removedEdgeIds = prevEdgesRef.current
-                .filter((e) => !nextEdgeIds.has(e.id))
-                .map((e) => e.id);
+            const addedEdgeIds = out.edges.filter((e) => !prevEdgeIds.has(e.id)).map((e) => e.id);
+            const removedEdgeIds = prevEdgesRef.current.filter((e) => !nextEdgeIds.has(e.id)).map((e) => e.id);
             const prevEdgeMap = new Map(prevEdgesRef.current.map((e) => [e.id, e]));
             const changedEdgeIds = out.edges
                 .filter((e) => {
@@ -6154,10 +5987,7 @@ const WorkbenchCanvasComponent = React.forwardRef((props, ref) => {
                 return p ? !isSameEdge(p, e) : false;
             })
                 .map((e) => e.id);
-            if (addedNodeIds.length ||
-                removedNodeIds.length ||
-                changedNodeIds.length ||
-                handleChanged.length) {
+            if (addedNodeIds.length || removedNodeIds.length || changedNodeIds.length || handleChanged.length) {
                 // eslint-disable-next-line no-console
                 console.debug("[WorkbenchCanvas] node updates", {
                     added: addedNodeIds,
@@ -6166,9 +5996,7 @@ const WorkbenchCanvasComponent = React.forwardRef((props, ref) => {
                     handleChanged,
                 });
             }
-            if (addedEdgeIds.length ||
-                removedEdgeIds.length ||
-                changedEdgeIds.length) {
+            if (addedEdgeIds.length || removedEdgeIds.length || changedEdgeIds.length) {
                 // eslint-disable-next-line no-console
                 console.debug("[WorkbenchCanvas] edge updates", {
                     added: addedEdgeIds,
@@ -6292,10 +6120,7 @@ const WorkbenchCanvasComponent = React.forwardRef((props, ref) => {
         const selectionBounds = getSelectionScreenBounds();
         if (selectionBounds && hasMultipleNodesSelected) {
             const { left, top, right, bottom } = selectionBounds;
-            if (e.clientX >= left &&
-                e.clientX <= right &&
-                e.clientY >= top &&
-                e.clientY <= bottom) {
+            if (e.clientX >= left && e.clientX <= right && e.clientY >= top && e.clientY <= bottom) {
                 // If only one node is selected (even with edges), show node menu for empty space clicks
                 if (isSingleNodeSelected) {
                     const nodeId = selection.nodes[0];
@@ -6369,7 +6194,9 @@ const WorkbenchCanvasComponent = React.forwardRef((props, ref) => {
         }, runner);
         if (overrides?.getSelectionContextMenuHandlers) {
             const selection = wb.getSelection();
-            return overrides.getSelectionContextMenuHandlers(wb, selection, baseHandlers, { getDefaultNodeSize: overrides.getDefaultNodeSize });
+            return overrides.getSelectionContextMenuHandlers(wb, selection, baseHandlers, {
+                getDefaultNodeSize: overrides.getDefaultNodeSize,
+            });
         }
         return baseHandlers;
     }, [wb, runner, overrides, onCloseSelectionMenu]);
@@ -6439,20 +6266,15 @@ const WorkbenchCanvasComponent = React.forwardRef((props, ref) => {
         const handleKeyDown = async (e) => {
             // Check if target is inside WorkbenchCanvas container
             const target = e.target;
-            if (!containerRef.current ||
-                !(containerRef.current.contains(target) ||
-                    containerRef.current == target)) {
+            if (!containerRef.current || !(containerRef.current.contains(target) || containerRef.current == target)) {
                 return;
             }
             // Ignore if typing in input/textarea
-            if (target.tagName === "INPUT" ||
-                target.tagName === "TEXTAREA" ||
-                target.isContentEditable) {
+            if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable) {
                 return;
             }
             // Detect Mac platform using userAgent (navigator.platform is deprecated)
-            const isMac = typeof navigator !== "undefined" &&
-                navigator.userAgent.toLowerCase().includes("mac");
+            const isMac = typeof navigator !== "undefined" && navigator.userAgent.toLowerCase().includes("mac");
             const modKey = isMac ? e.metaKey : e.ctrlKey;
             const key = e.key.toLowerCase();
             // Undo: Cmd/Ctrl + Z
@@ -6513,16 +6335,14 @@ const WorkbenchCanvasComponent = React.forwardRef((props, ref) => {
                 if (!isShortcutEnabled("duplicate"))
                     return;
                 const selection = wb.getSelection();
-                if (selection.nodes.length === 1 &&
-                    nodeContextMenuHandlers?.onDuplicate) {
+                if (selection.nodes.length === 1 && nodeContextMenuHandlers?.onDuplicate) {
                     // Single node selected - use node context menu handler
                     e.preventDefault();
                     const modKeyLabel = isMac ? "⌘" : "Ctrl";
                     showToast(`Duplicate (${modKeyLabel} + E)`);
                     nodeContextMenuHandlers.onDuplicate();
                 }
-                else if (selection.nodes.length > 1 &&
-                    selectionContextMenuHandlers.onDuplicate) {
+                else if (selection.nodes.length > 1 && selectionContextMenuHandlers.onDuplicate) {
                     // Multiple nodes selected - use selection context menu handler
                     e.preventDefault();
                     const modKeyLabel = isMac ? "⌘" : "Ctrl";
@@ -6603,9 +6423,7 @@ const WorkbenchCanvasComponent = React.forwardRef((props, ref) => {
     // Sync viewport when workbench fires graphUiChanged with viewport event
     React.useEffect(() => {
         const off = wb.on("graphUiChanged", (event) => {
-            if (event.change?.type === "viewport" &&
-                rfInstanceRef.current &&
-                event.init) {
+            if (event.change?.type === "viewport" && rfInstanceRef.current && event.init) {
                 const viewport = wb.getViewport();
                 if (viewport) {
                     rfInstanceRef.current.setViewport(lod.clone(viewport));
@@ -6628,36 +6446,33 @@ const WorkbenchCanvasComponent = React.forwardRef((props, ref) => {
                                 (DefaultContextMenuRenderer ? (jsxRuntime.jsx(DefaultContextMenuRenderer, { open: true, clientPos: menuState.menuPos, handlers: defaultContextMenuHandlers, registry: wb.registry, nodeIds: nodeIds, keyboardShortcuts: keyboardShortcuts })) : (jsxRuntime.jsx(DefaultContextMenu, { open: true, clientPos: menuState.menuPos, handlers: defaultContextMenuHandlers, registry: wb.registry, nodeIds: nodeIds, keyboardShortcuts: keyboardShortcuts }))), menuState?.type === "node" &&
                                 nodeContextMenuHandlers &&
                                 (NodeContextMenuRenderer ? (jsxRuntime.jsx(NodeContextMenuRenderer, { open: true, clientPos: menuState.menuPos, nodeId: menuState.nodeId, handlers: nodeContextMenuHandlers, bakeableOutputs: bakeableOutputs, runMode: runMode, wb: wb, keyboardShortcuts: keyboardShortcuts })) : (jsxRuntime.jsx(NodeContextMenu, { open: true, clientPos: menuState.menuPos, nodeId: menuState.nodeId, handlers: nodeContextMenuHandlers, bakeableOutputs: bakeableOutputs, runMode: runMode }))), menuState?.type === "selection" &&
-                                (SelectionContextMenuRenderer ? (jsxRuntime.jsx(SelectionContextMenuRenderer, { open: true, clientPos: menuState.menuPos, handlers: selectionContextMenuHandlers, keyboardShortcuts: keyboardShortcuts })) : (jsxRuntime.jsx(SelectionContextMenu, { open: true, clientPos: menuState.menuPos, handlers: selectionContextMenuHandlers, keyboardShortcuts: keyboardShortcuts })))] }), jsxRuntime.jsx(SelectionActiveSync, { selection: selection })] }), toast && (jsxRuntime.jsx(KeyboardShortcutToast, { message: toast.message, onClose: hideToast }, toast.id))] }));
+                                (SelectionContextMenuRenderer ? (jsxRuntime.jsx(SelectionContextMenuRenderer, { open: true, clientPos: menuState.menuPos, handlers: selectionContextMenuHandlers, keyboardShortcuts: keyboardShortcuts })) : (jsxRuntime.jsx(SelectionContextMenu, { open: true, clientPos: menuState.menuPos, handlers: selectionContextMenuHandlers, keyboardShortcuts: keyboardShortcuts })))] }), jsxRuntime.jsx(SelectionActiveSync, { selection: selection })] }), toast && jsxRuntime.jsx(KeyboardShortcutToast, { message: toast.message, onClose: hideToast }, toast.id)] }));
 });
 const WorkbenchCanvas = WorkbenchCanvasComponent;
 
 function WorkbenchStudioCanvas({ autoScroll, onAutoScrollChange, example, onExampleChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, overrides, onInit, onChange, }) {
-    const { wb, registryVersion, runner, selectedNodeId, handlesMap, runAutoLayout, runMode, setRunMode, isRunning, } = useWorkbenchContext();
+    const { wb, registryVersion, runner, selectedNodeId, handlesMap, runAutoLayout, runMode, setRunMode, isRunning } = useWorkbenchContext();
     const [transportStatus, setTransportStatus] = React.useState({
         state: "local",
     });
     const selectedNode = wb.def.nodes.find((n) => n.nodeId === selectedNodeId);
     const effectiveHandles = selectedNode
-        ? handlesMap[selectedNode.nodeId] ?? {
+        ? (handlesMap[selectedNode.nodeId] ?? {
             inputs: {},
             outputs: {},
             inputDefaults: {},
-        }
+        })
         : { inputs: {}, outputs: {}, inputDefaults: {} };
     const [exampleState, setExampleState] = React.useState(example ?? "");
     const isGraphRunning = isRunning();
     // Render Start/Stop button based on transport and runner state
     const renderStartStopButton = React.useCallback(() => {
         // Check if transport is connecting/retrying
-        const isConnecting = transportStatus.state === "connecting" ||
-            transportStatus.state === "retrying";
+        const isConnecting = transportStatus.state === "connecting" || transportStatus.state === "retrying";
         // Only allow Start/Stop when transport is connected or local
         // For local backend, always allow control (transport state is "local")
         // For remote backends, require connection
-        const canControl = transportStatus.state === "connected" ||
-            transportStatus.state === "local" ||
-            backendKind === "local"; // Always allow control for local backend
+        const canControl = transportStatus.state === "connected" || transportStatus.state === "local" || backendKind === "local"; // Always allow control for local backend
         if (isConnecting) {
             return (jsxRuntime.jsxs("button", { className: "border rounded px-2 py-1.5 text-gray-500 border-gray-400 flex items-center gap-1 disabled:opacity-50", disabled: true, title: "Connecting to backend...", children: [jsxRuntime.jsx(react$1.ClockClockwiseIcon, { size: 16, className: "animate-spin" }), jsxRuntime.jsx("span", { className: "font-medium ml-1", children: "Connecting..." })] }));
         }
@@ -6677,9 +6492,7 @@ function WorkbenchStudioCanvas({ autoScroll, onAutoScrollChange, example, onExam
                     const message = err instanceof Error ? err.message : String(err);
                     alert(message);
                 }
-            }, disabled: !canControl, title: !canControl
-                ? "Waiting for connection"
-                : `Start ${runMode === "manual" ? "manual" : "auto"} mode`, children: [jsxRuntime.jsx(react$1.RocketIcon, { size: 16, weight: "fill" }), jsxRuntime.jsx("span", { className: "font-medium ml-1", children: "Start" })] }));
+            }, disabled: !canControl, title: !canControl ? "Waiting for connection" : `Start ${runMode === "manual" ? "manual" : "auto"} mode`, children: [jsxRuntime.jsx(react$1.RocketIcon, { size: 16, weight: "fill" }), jsxRuntime.jsx("span", { className: "font-medium ml-1", children: "Start" })] }));
     }, [transportStatus, isGraphRunning, runner, runMode, wb, backendKind]);
     const defaultExamples = React.useMemo(() => [
         {
@@ -6919,11 +6732,7 @@ function WorkbenchStudioCanvas({ autoScroll, onAutoScrollChange, example, onExam
                 try {
                     const parsed = JSON.parse(String(raw));
                     if (Array.isArray(parsed)) {
-                        value = parsed.map((v) => [
-                            Number(v?.[0] ?? 0),
-                            Number(v?.[1] ?? 0),
-                            Number(v?.[2] ?? 0),
-                        ]);
+                        value = parsed.map((v) => [Number(v?.[0] ?? 0), Number(v?.[1] ?? 0), Number(v?.[2] ?? 0)]);
                         break;
                     }
                 }
@@ -6953,14 +6762,7 @@ function WorkbenchStudioCanvas({ autoScroll, onAutoScrollChange, example, onExam
             });
         }
         return baseSetInput;
-    }, [
-        overrides,
-        baseSetInput,
-        runner,
-        selectedNodeId,
-        wb.registry,
-        registryVersion,
-    ]);
+    }, [overrides, baseSetInput, runner, selectedNodeId, wb.registry, registryVersion]);
     const baseToString = React.useCallback((typeId, value) => {
         if (value === undefined || value === null)
             return "";
@@ -6971,13 +6773,8 @@ function WorkbenchStudioCanvas({ autoScroll, onAutoScrollChange, example, onExam
         const pre = preformatValueForDisplay(typeId, value, wb.registry);
         if (pre !== undefined)
             return pre;
-        if (typeof value === "object" &&
-            value !== null &&
-            "url" in value &&
-            typeof value.url === "string") {
-            const title = "title" in value && typeof value.title === "string"
-                ? value.title
-                : "";
+        if (typeof value === "object" && value !== null && "url" in value && typeof value.url === "string") {
+            const title = "title" in value && typeof value.title === "string" ? value.title : "";
             const url = String(value.url || "");
             // value.ts handles data URL formatting
             return title || url.slice(0, 32) + (url.length > 32 ? "…" : "");
@@ -6990,23 +6787,17 @@ function WorkbenchStudioCanvas({ autoScroll, onAutoScrollChange, example, onExam
         const round4 = (n) => Math.round(Number(n) * 10000) / 10000;
         if (typeId === "base.vec3" && Array.isArray(value)) {
             const a = value;
-            return [
-                round4(Number(a[0] ?? 0)),
-                round4(Number(a[1] ?? 0)),
-                round4(Number(a[2] ?? 0)),
-            ].join(",");
+            return [round4(Number(a[0] ?? 0)), round4(Number(a[1] ?? 0)), round4(Number(a[2] ?? 0))].join(",");
         }
         const stringifyRounded = (v) => {
             try {
-                return JSON.stringify(v, (_k, val) => typeof val === "number" ? round4(val) : val);
+                return JSON.stringify(v, (_k, val) => (typeof val === "number" ? round4(val) : val));
             }
             catch {
                 return String(v);
             }
         };
-        if (typeId?.endsWith("[]") ||
-            Array.isArray(value) ||
-            (typeof value === "object" && value !== null)) {
+        if (typeId?.endsWith("[]") || Array.isArray(value) || (typeof value === "object" && value !== null)) {
             return stringifyRounded(value);
         }
         if (typeof value === "number") {
@@ -7016,7 +6807,7 @@ function WorkbenchStudioCanvas({ autoScroll, onAutoScrollChange, example, onExam
         return String(value);
     }, [wb.registry, registryVersion]);
     const baseToElement = React.useCallback((typeId, value) => {
-        return (jsxRuntime.jsx("span", { className: "ml-1 opacity-60", children: baseToString(typeId, value) }));
+        return jsxRuntime.jsx("span", { className: "ml-1 opacity-60", children: baseToString(typeId, value) });
     }, [baseToString]);
     const toString = React.useMemo(() => {
         if (overrides?.toString)
@@ -7030,7 +6821,7 @@ function WorkbenchStudioCanvas({ autoScroll, onAutoScrollChange, example, onExam
             return overrides.toElement(baseToElement, { registry: wb.registry });
         return baseToElement;
     }, [overrides, baseToElement, wb.registry, registryVersion]);
-    return (jsxRuntime.jsxs("div", { className: "w-full h-screen flex flex-col", children: [jsxRuntime.jsxs("div", { className: "p-2 border-b border-gray-300 flex gap-2 items-center", children: [isGraphRunning ? (jsxRuntime.jsxs("span", { className: "ml-2 text-sm text-green-700", children: ["Running: ", runMode === "manual" ? "Manual" : "Auto"] })) : (jsxRuntime.jsx("span", { className: "ml-2 text-sm text-gray-500", children: "Stopped" })), jsxRuntime.jsxs("span", { className: "ml-2 flex items-center gap-1 text-xs", title: transportStatus.kind || undefined, children: [transportStatus.state === "local" && (jsxRuntime.jsx(react$1.PlugsConnectedIcon, { size: 14, className: "text-gray-500" })), transportStatus.state === "connecting" && (jsxRuntime.jsx(react$1.ClockClockwiseIcon, { size: 14, className: "text-amber-600 animate-pulse" })), transportStatus.state === "connected" && (jsxRuntime.jsx(react$1.WifiHighIcon, { size: 14, className: "text-green-600" })), transportStatus.state === "disconnected" && (jsxRuntime.jsx(react$1.WifiSlashIcon, { size: 14, className: "text-red-600" })), transportStatus.state === "retrying" && (jsxRuntime.jsx(react$1.ClockClockwiseIcon, { size: 14, className: "text-amber-700 animate-pulse" }))] }), jsxRuntime.jsxs("select", { className: "border border-gray-300 rounded px-2 py-1", value: exampleState, onChange: (e) => applyExample(e.target.value), disabled: isGraphRunning, title: isGraphRunning ? "Stop engine before switching example" : undefined, children: [jsxRuntime.jsx("option", { value: "", children: "Select Example\u2026" }), examples.map((ex) => (jsxRuntime.jsx("option", { value: ex.id, children: ex.label }, ex.id)))] }), jsxRuntime.jsxs("select", { className: "border border-gray-300 rounded px-2 py-1", value: backendKind, onChange: (e) => onBackendKindChange(e.target.value), disabled: isGraphRunning, title: isGraphRunning ? "Stop engine before switching backend" : undefined, children: [jsxRuntime.jsx("option", { value: "local", children: "Local" }), jsxRuntime.jsx("option", { value: "remote-http", children: "Remote (HTTP)" }), jsxRuntime.jsx("option", { value: "remote-ws", children: "Remote (WebSocket)" })] }), backendKind === "remote-http" && !!onHttpBaseUrlChange && (jsxRuntime.jsx("input", { className: "border border-gray-300 rounded px-2 py-1 w-72", placeholder: "http://127.0.0.1:18080", value: httpBaseUrl, onChange: (e) => onHttpBaseUrlChange(e.target.value) })), backendKind === "remote-ws" && !!onWsUrlChange && (jsxRuntime.jsx("input", { className: "border border-gray-300 rounded px-2 py-1 w-72", placeholder: "ws://127.0.0.1:18081", value: wsUrl, onChange: (e) => onWsUrlChange(e.target.value) })), jsxRuntime.jsxs("select", { className: "border border-gray-300 rounded px-2 py-1", value: runMode, onChange: async (e) => {
+    return (jsxRuntime.jsxs("div", { className: "w-full h-screen flex flex-col", children: [jsxRuntime.jsxs("div", { className: "p-2 border-b border-gray-300 flex gap-2 items-center", children: [isGraphRunning ? (jsxRuntime.jsxs("span", { className: "ml-2 text-sm text-green-700", children: ["Running: ", runMode === "manual" ? "Manual" : "Auto"] })) : (jsxRuntime.jsx("span", { className: "ml-2 text-sm text-gray-500", children: "Stopped" })), jsxRuntime.jsxs("span", { className: "ml-2 flex items-center gap-1 text-xs", title: transportStatus.kind || undefined, children: [transportStatus.state === "local" && jsxRuntime.jsx(react$1.PlugsConnectedIcon, { size: 14, className: "text-gray-500" }), transportStatus.state === "connecting" && (jsxRuntime.jsx(react$1.ClockClockwiseIcon, { size: 14, className: "text-amber-600 animate-pulse" })), transportStatus.state === "connected" && jsxRuntime.jsx(react$1.WifiHighIcon, { size: 14, className: "text-green-600" }), transportStatus.state === "disconnected" && jsxRuntime.jsx(react$1.WifiSlashIcon, { size: 14, className: "text-red-600" }), transportStatus.state === "retrying" && (jsxRuntime.jsx(react$1.ClockClockwiseIcon, { size: 14, className: "text-amber-700 animate-pulse" }))] }), jsxRuntime.jsxs("select", { className: "border border-gray-300 rounded px-2 py-1", value: exampleState, onChange: (e) => applyExample(e.target.value), disabled: isGraphRunning, title: isGraphRunning ? "Stop engine before switching example" : undefined, children: [jsxRuntime.jsx("option", { value: "", children: "Select Example\u2026" }), examples.map((ex) => (jsxRuntime.jsx("option", { value: ex.id, children: ex.label }, ex.id)))] }), jsxRuntime.jsxs("select", { className: "border border-gray-300 rounded px-2 py-1", value: backendKind, onChange: (e) => onBackendKindChange(e.target.value), disabled: isGraphRunning, title: isGraphRunning ? "Stop engine before switching backend" : undefined, children: [jsxRuntime.jsx("option", { value: "local", children: "Local" }), jsxRuntime.jsx("option", { value: "remote-http", children: "Remote (HTTP)" }), jsxRuntime.jsx("option", { value: "remote-ws", children: "Remote (WebSocket)" })] }), backendKind === "remote-http" && !!onHttpBaseUrlChange && (jsxRuntime.jsx("input", { className: "border border-gray-300 rounded px-2 py-1 w-72", placeholder: "http://127.0.0.1:18080", value: httpBaseUrl, onChange: (e) => onHttpBaseUrlChange(e.target.value) })), backendKind === "remote-ws" && !!onWsUrlChange && (jsxRuntime.jsx("input", { className: "border border-gray-300 rounded px-2 py-1 w-72", placeholder: "ws://127.0.0.1:18081", value: wsUrl, onChange: (e) => onWsUrlChange(e.target.value) })), jsxRuntime.jsxs("select", { className: "border border-gray-300 rounded px-2 py-1", value: runMode, onChange: async (e) => {
                             const mode = e.target.value;
                             if (mode !== runMode) {
                                 await setRunMode(mode);