@ultrst-armada/floks 0.0.0-stage → 1.0.0

package/packages/canvas-ui/dist/index.js

@@ -0,0 +1,1171 @@
+import {
+  CanvasViewport,
+  InfiniteCanvas,
+  MiniMap,
+  useCanvas
+} from "./chunk-34YRDZPJ.js";
+import {
+  DockBar,
+  DockItem,
+  useDock
+} from "./chunk-6VB74RCH.js";
+import {
+  MonacoEditor,
+  skipoDarkTheme,
+  useMonaco
+} from "./chunk-QTTWWBNN.js";
+import {
+  BIOME_CONFIGS,
+  COORD_SCALE,
+  CanvasBackground2D,
+  CanvasErrorBoundary,
+  ContainerNode2D,
+  EffectNode2D,
+  MagneticTraces2D,
+  ModuleNode2D,
+  NodeRenderer2D,
+  RotaryKnob,
+  TriggerNode2D,
+  Wire2D,
+  useCanvas2DCoordinates,
+  useCanvas2DMagnetic
+} from "./chunk-QWQ4PCXQ.js";
+import {
+  PredictiveGhostNodeCard,
+  PredictiveHudToolbar,
+  PredictiveLayer2D,
+  usePredictiveGraph2D
+} from "./chunk-UEIMM6PV.js";
+import {
+  NODE_CARD_WIDTH,
+  Node2DBase,
+  RecorderWaveformDisplay,
+  SOCKET_ROW_HEIGHT,
+  Socket2D,
+  getSocketLocalOffset,
+  getSocketScreenPosition,
+  renderSpriteIcon
+} from "./chunk-2GLR35UM.js";
+import {
+  Tile,
+  TileCreateButton,
+  TileGrid,
+  useTileMenu
+} from "./chunk-SA3JADUG.js";
+
+// src/node-graph-ui/widgets/MidpointWidgets.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function MidpointWidgets({ x, y, locked, onDelete, onInspect, onToggleLock }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: x,
+        top: y,
+        transform: "translate(-50%, -50%)",
+        display: "flex",
+        alignItems: "center",
+        gap: "4px",
+        backgroundColor: "var(--skipo-surface, #1e1e1e)",
+        border: "1px solid var(--skipo-border, #333)",
+        borderRadius: "12px",
+        padding: "2px 6px",
+        boxShadow: "0 2px 8px rgba(0,0,0,0.5)",
+        zIndex: 7,
+        // Below node bodies (z-index 10) per Skipo invariant
+        pointerEvents: "auto"
+      },
+      onClick: (e) => e.stopPropagation(),
+      children: [
+        onToggleLock && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            title: locked ? "Unlock Connection" : "Lock Connection",
+            style: {
+              background: "none",
+              border: "none",
+              cursor: "pointer",
+              padding: "2px",
+              color: locked ? "var(--skipo-accent, #d4af37)" : "var(--skipo-text-muted, #888)",
+              display: "flex",
+              alignItems: "center"
+            },
+            onClick: onToggleLock,
+            children: /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: locked ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }),
+              /* @__PURE__ */ jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }),
+              /* @__PURE__ */ jsx("path", { d: "M7 11V7a5 5 0 0 1 9.9-1" })
+            ] }) })
+          }
+        ),
+        onInspect && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            title: "Inspect Signal",
+            style: {
+              background: "none",
+              border: "none",
+              cursor: "pointer",
+              padding: "2px",
+              color: "var(--skipo-text-muted, #888)",
+              display: "flex",
+              alignItems: "center"
+            },
+            onClick: onInspect,
+            children: /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+              /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+              /* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+              /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
+            ] })
+          }
+        ),
+        onDelete && !locked && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            title: "Delete Connection",
+            style: {
+              background: "none",
+              border: "none",
+              cursor: "pointer",
+              padding: "2px",
+              color: "#e06c75",
+              display: "flex",
+              alignItems: "center"
+            },
+            onClick: onDelete,
+            children: /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+              /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+              /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/node-graph-ui/widgets/SolidifyWidget.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function SolidifyWidget({ x, y, onSolidify }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: x,
+        top: y,
+        transform: "translate(-50%, -50%)",
+        zIndex: 7,
+        pointerEvents: "auto"
+      },
+      onClick: (e) => e.stopPropagation(),
+      children: /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          title: "Solidify Connection",
+          "aria-label": "Solidify Connection",
+          style: {
+            backgroundColor: "var(--skipo-accent, #61afef)",
+            border: "1px solid var(--skipo-border, #61afef)",
+            borderRadius: "50%",
+            width: "22px",
+            height: "22px",
+            color: "var(--skipo-text, #ffffff)",
+            cursor: "pointer",
+            padding: 0,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            boxShadow: "0 2px 6px rgba(0, 0, 0, 0.4)",
+            transition: "transform 0.1s ease"
+          },
+          onClick: onSolidify,
+          children: /* @__PURE__ */ jsx2("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx2("polyline", { points: "20 6 9 17 4 12" }) })
+        }
+      )
+    }
+  );
+}
+
+// src/node-graph-ui/widgets/CompatibleNodePicker.tsx
+import { useState, useMemo } from "react";
+import { ConnectionRuleStore } from "@ultrst-armada/kloks/state-graph";
+import { useSearchKeyboardNavigation, BaseButton, BaseInput } from "@ultrst-armada/floks/ui";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function CompatibleNodePicker({
+  x,
+  y,
+  sourceHandle,
+  availableNodeTypes,
+  onSelect,
+  onClose
+}) {
+  const [selectedTypes, setSelectedTypes] = useState(/* @__PURE__ */ new Set());
+  const [searchTerm, setSearchTerm] = useState("");
+  const compatibleNodes = useMemo(() => {
+    const isOut = sourceHandle.direction === "output";
+    return ConnectionRuleStore.getCompatibleNodeTypes(
+      { dataType: sourceHandle.dataType || "ANY", direction: isOut ? "OUTPUT" : "INPUT", handleCategory: "DATA" },
+      availableNodeTypes
+    );
+  }, [sourceHandle, availableNodeTypes]);
+  const filteredNodes = useMemo(() => {
+    if (!searchTerm.trim()) return compatibleNodes;
+    const term = searchTerm.toLowerCase();
+    return compatibleNodes.filter((n) => n.type.toLowerCase().includes(term) || n.label.toLowerCase().includes(term));
+  }, [compatibleNodes, searchTerm]);
+  const handleQuickSelect = (type) => onSelect([type]);
+  const { highlightedIndex, setHighlightedIndex, handleKeyDown, listContainerRef } = useSearchKeyboardNavigation({
+    items: filteredNodes,
+    onSelect: (node) => handleQuickSelect(node.type),
+    onClose
+  });
+  const toggleSelect = (type) => {
+    setSelectedTypes((prev) => {
+      const next = new Set(prev);
+      if (next.has(type)) next.delete(type);
+      else next.add(type);
+      return next;
+    });
+  };
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: x,
+        top: y,
+        transform: "translate(-50%, 0)",
+        width: "270px",
+        maxHeight: "360px",
+        backgroundColor: "var(--skipo-surface)",
+        border: "var(--skipo-border)",
+        borderRadius: "var(--skipo-radius)",
+        boxShadow: "var(--skipo-shadow)",
+        color: "var(--skipo-text)",
+        zIndex: 50,
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+        fontFamily: "var(--skipo-font)"
+      },
+      onClick: (e) => e.stopPropagation(),
+      onMouseDown: (e) => e.stopPropagation(),
+      children: [
+        /* @__PURE__ */ jsxs2("div", { style: { padding: "8px 12px", borderBottom: "var(--skipo-border)", display: "flex", alignItems: "center", justifyContent: "space-between", backgroundColor: "var(--skipo-matte-bg)" }, children: [
+          /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column" }, children: [
+            /* @__PURE__ */ jsx3("span", { style: { fontSize: "11px", fontWeight: 600, color: "var(--skipo-accent)" }, children: "Compatible Nodes" }),
+            /* @__PURE__ */ jsxs2("span", { style: { fontSize: "9px", color: "var(--skipo-text-muted)" }, children: [
+              "For ",
+              sourceHandle.dataType || "ANY",
+              " (",
+              sourceHandle.direction,
+              ")"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx3(BaseButton, { variant: "ghost", size: "sm", onClick: onClose, "aria-label": "Close picker", style: { padding: "2px 6px" }, children: "\u2715" })
+        ] }),
+        /* @__PURE__ */ jsx3("div", { style: { padding: "6px 8px", borderBottom: "var(--skipo-border)" }, children: /* @__PURE__ */ jsx3(BaseInput, { autoFocus: true, placeholder: "Filter nodes... (\u2191\u2193 navigate, \u21B5 spawn)", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), onKeyDown: handleKeyDown }) }),
+        /* @__PURE__ */ jsx3("div", { ref: listContainerRef, style: { flex: 1, overflowY: "auto", maxHeight: "180px", padding: "4px" }, children: filteredNodes.length === 0 ? /* @__PURE__ */ jsx3("div", { style: { padding: "16px", textAlign: "center", fontSize: "11px", color: "var(--skipo-text-muted)" }, children: "No compatible nodes found" }) : filteredNodes.map((node, idx) => {
+          const isSelected = selectedTypes.has(node.type);
+          const isHighlighted = idx === highlightedIndex;
+          return /* @__PURE__ */ jsxs2(
+            "div",
+            {
+              onMouseEnter: () => setHighlightedIndex(idx),
+              onClick: () => toggleSelect(node.type),
+              onDoubleClick: () => handleQuickSelect(node.type),
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "8px",
+                padding: "6px 8px",
+                borderRadius: "var(--skipo-radius-sm)",
+                cursor: "pointer",
+                backgroundColor: isHighlighted ? "var(--skipo-surface-hover)" : isSelected ? "var(--skipo-matte-bg)" : "transparent",
+                border: isHighlighted ? "var(--skipo-border)" : "1px solid transparent",
+                marginBottom: "2px",
+                transition: "background-color 0.1s ease"
+              },
+              children: [
+                /* @__PURE__ */ jsx3("input", { type: "checkbox", checked: isSelected, onChange: () => toggleSelect(node.type), onClick: (e) => e.stopPropagation(), style: { cursor: "pointer" } }),
+                /* @__PURE__ */ jsxs2("div", { style: { flex: 1, minWidth: 0 }, children: [
+                  /* @__PURE__ */ jsx3("div", { style: { fontSize: "11px", fontWeight: isHighlighted ? 600 : 500, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: isHighlighted ? "var(--skipo-accent)" : "inherit" }, children: node.label || node.type }),
+                  node.description && /* @__PURE__ */ jsx3("div", { style: { fontSize: "9px", color: "var(--skipo-text-muted)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: node.description })
+                ] }),
+                isHighlighted && /* @__PURE__ */ jsx3("span", { style: { fontSize: "8px", fontWeight: 600, color: "var(--skipo-accent)", padding: "1px 4px", borderRadius: "var(--skipo-radius-sm)", backgroundColor: "var(--skipo-matte-bg)", border: "var(--skipo-border)", whiteSpace: "nowrap" }, children: "\u21B5 Enter" })
+              ]
+            },
+            node.type
+          );
+        }) }),
+        /* @__PURE__ */ jsxs2("div", { style: { padding: "6px 8px", borderTop: "var(--skipo-border)", display: "flex", justifyContent: "space-between", alignItems: "center", backgroundColor: "var(--skipo-matte-bg)" }, children: [
+          /* @__PURE__ */ jsx3("span", { style: { fontSize: "10px", color: "var(--skipo-text-muted)" }, children: selectedTypes.size > 0 ? `${selectedTypes.size} selected` : "\u21B5 Spawn top match" }),
+          /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: "6px" }, children: [
+            /* @__PURE__ */ jsx3(BaseButton, { variant: "secondary", size: "sm", onClick: onClose, style: { padding: "2px 8px", fontSize: "10px" }, children: "Cancel" }),
+            /* @__PURE__ */ jsx3(
+              BaseButton,
+              {
+                variant: "accent",
+                size: "sm",
+                disabled: selectedTypes.size === 0 && filteredNodes.length === 0,
+                onClick: () => {
+                  if (selectedTypes.size > 0) onSelect(Array.from(selectedTypes));
+                  else if (filteredNodes.length > 0) handleQuickSelect(filteredNodes[highlightedIndex >= 0 ? highlightedIndex : 0].type);
+                },
+                style: { padding: "2px 10px", fontSize: "10px" },
+                children: "Spawn & Solidify"
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/node-graph-ui/widgets/NodeSearchPalette.tsx
+import { useState as useState2, useMemo as useMemo2 } from "react";
+import { useSearchKeyboardNavigation as useSearchKeyboardNavigation2, BaseButton as BaseButton2, BaseInput as BaseInput2 } from "@ultrst-armada/floks/ui";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function NodeSearchPalette({
+  x,
+  y,
+  availableNodeTypes = [],
+  onSpawnNode,
+  onClose
+}) {
+  const [query, setQuery] = useState2("");
+  const filteredNodes = useMemo2(() => {
+    if (!availableNodeTypes || availableNodeTypes.length === 0) {
+      return [{ type: "default", label: "Default Node", description: "Standard dual-port node" }];
+    }
+    if (!query.trim()) return availableNodeTypes;
+    const q = query.toLowerCase();
+    return availableNodeTypes.filter(
+      (n) => n.type.toLowerCase().includes(q) || n.label.toLowerCase().includes(q) || n.description?.toLowerCase().includes(q)
+    );
+  }, [availableNodeTypes, query]);
+  const {
+    highlightedIndex,
+    setHighlightedIndex,
+    handleKeyDown,
+    listContainerRef
+  } = useSearchKeyboardNavigation2({
+    items: filteredNodes,
+    onSelect: (node) => {
+      onSpawnNode(node.type);
+      onClose();
+    },
+    onClose
+  });
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: x,
+        top: y,
+        transform: "translate(-50%, 0)",
+        width: "290px",
+        maxHeight: "380px",
+        backgroundColor: "var(--skipo-surface)",
+        border: "var(--skipo-border)",
+        borderRadius: "var(--skipo-radius)",
+        boxShadow: "var(--skipo-shadow)",
+        color: "var(--skipo-text)",
+        zIndex: 70,
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+        fontFamily: "var(--skipo-font)"
+      },
+      onClick: (e) => e.stopPropagation(),
+      onMouseDown: (e) => e.stopPropagation(),
+      children: [
+        /* @__PURE__ */ jsxs3("div", { style: {
+          padding: "10px 12px",
+          borderBottom: "var(--skipo-border)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          backgroundColor: "var(--skipo-matte-bg)"
+        }, children: [
+          /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+            /* @__PURE__ */ jsx4("span", { style: { fontSize: "11px", fontWeight: 600, color: "var(--skipo-accent)" }, children: "Spawn Node" }),
+            /* @__PURE__ */ jsx4("span", { style: { fontSize: "9px", color: "var(--skipo-text-muted)", fontFamily: "var(--skipo-font-mono)", backgroundColor: "var(--skipo-surface)", padding: "1px 4px", borderRadius: "var(--skipo-radius-sm)" }, children: "hotkey [N]" })
+          ] }),
+          /* @__PURE__ */ jsx4(
+            BaseButton2,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: onClose,
+              "aria-label": "Close search",
+              style: { padding: "2px 6px", fontSize: "12px" },
+              children: "\u2715"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx4("div", { style: { padding: "8px", borderBottom: "var(--skipo-border)" }, children: /* @__PURE__ */ jsx4(
+          BaseInput2,
+          {
+            autoFocus: true,
+            placeholder: "Search nodes... (\u2191\u2193 navigate, \u21B5 spawn)",
+            value: query,
+            onChange: (e) => setQuery(e.target.value),
+            onKeyDown: handleKeyDown
+          }
+        ) }),
+        /* @__PURE__ */ jsx4("div", { ref: listContainerRef, style: { flex: 1, overflowY: "auto", maxHeight: "220px", padding: "4px 6px" }, children: filteredNodes.length === 0 ? /* @__PURE__ */ jsx4("div", { style: { padding: "20px", textAlign: "center", fontSize: "11px", color: "var(--skipo-text-muted)" }, children: "No matching nodes" }) : filteredNodes.map((node, idx) => {
+          const isHighlighted = idx === highlightedIndex;
+          return /* @__PURE__ */ jsxs3(
+            "div",
+            {
+              onMouseEnter: () => setHighlightedIndex(idx),
+              onClick: () => {
+                onSpawnNode(node.type);
+                onClose();
+              },
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                padding: "7px 10px",
+                borderRadius: "var(--skipo-radius-sm)",
+                cursor: "pointer",
+                backgroundColor: isHighlighted ? "var(--skipo-surface-hover)" : "transparent",
+                border: isHighlighted ? "var(--skipo-border)" : "1px solid transparent",
+                marginBottom: "2px",
+                transition: "background-color 0.1s ease"
+              },
+              children: [
+                /* @__PURE__ */ jsxs3("div", { style: { minWidth: 0, flex: 1 }, children: [
+                  /* @__PURE__ */ jsx4("div", { style: { fontSize: "11px", fontWeight: isHighlighted ? 600 : 500, color: isHighlighted ? "var(--skipo-accent)" : "inherit" }, children: node.label || node.type }),
+                  node.description && /* @__PURE__ */ jsx4("div", { style: { fontSize: "9px", color: "var(--skipo-text-muted)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: node.description })
+                ] }),
+                isHighlighted && /* @__PURE__ */ jsx4("span", { style: { fontSize: "9px", fontWeight: 600, color: "var(--skipo-accent)", padding: "2px 5px", borderRadius: "var(--skipo-radius-sm)", backgroundColor: "var(--skipo-matte-bg)", border: "var(--skipo-border)", whiteSpace: "nowrap", marginLeft: "6px" }, children: "\u21B5 Spawn" })
+              ]
+            },
+            node.type
+          );
+        }) }),
+        /* @__PURE__ */ jsxs3("div", { style: {
+          padding: "6px 10px",
+          borderTop: "var(--skipo-border)",
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          backgroundColor: "var(--skipo-matte-bg)",
+          fontSize: "9px",
+          color: "var(--skipo-text-muted)"
+        }, children: [
+          /* @__PURE__ */ jsxs3("span", { children: [
+            filteredNodes.length,
+            " nodes available"
+          ] }),
+          /* @__PURE__ */ jsxs3("span", { children: [
+            "Press ",
+            /* @__PURE__ */ jsx4("strong", { children: "Enter \u21B5" }),
+            " to spawn"
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/node-graph-ui/widgets/CanvasContextMenu.tsx
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function CanvasContextMenu({
+  x,
+  y,
+  availableNodeTypes,
+  hasSelection,
+  onSpawnNode,
+  onOpenSpawnMenu,
+  onSelectAll,
+  onDeleteSelected,
+  onClearSelection,
+  onClose
+}) {
+  const itemStyle = {
+    padding: "6px 12px",
+    fontSize: "11px",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "12px",
+    color: "var(--skipo-text, #fff)",
+    borderRadius: "4px",
+    userSelect: "none"
+  };
+  const shortcutStyle = {
+    fontSize: "9px",
+    color: "var(--skipo-text-muted, #888)",
+    fontFamily: "monospace"
+  };
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: x,
+        top: y,
+        minWidth: "180px",
+        backgroundColor: "var(--skipo-surface, #1e1e1e)",
+        border: "1px solid var(--skipo-border, #333)",
+        borderRadius: "6px",
+        boxShadow: "0 6px 20px rgba(0, 0, 0, 0.6)",
+        padding: "4px",
+        zIndex: 60,
+        fontFamily: "Inter, system-ui, sans-serif"
+      },
+      onClick: (e) => e.stopPropagation(),
+      onMouseDown: (e) => e.stopPropagation(),
+      children: [
+        onOpenSpawnMenu && /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            style: {
+              ...itemStyle,
+              fontWeight: 600,
+              color: "var(--skipo-accent, #61afef)",
+              backgroundColor: "rgba(97, 175, 239, 0.08)"
+            },
+            onMouseEnter: (e) => e.currentTarget.style.backgroundColor = "rgba(97, 175, 239, 0.16)",
+            onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "rgba(97, 175, 239, 0.08)",
+            onClick: () => {
+              onOpenSpawnMenu();
+              onClose();
+            },
+            children: [
+              /* @__PURE__ */ jsx5("span", { children: "Spawn Node Menu..." }),
+              /* @__PURE__ */ jsx5("span", { style: shortcutStyle, children: "N" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx5("div", { style: { padding: "4px 8px", fontSize: "9px", textTransform: "uppercase", color: "var(--skipo-text-muted, #888)", fontWeight: 600 }, children: "Quick Spawn" }),
+        /* @__PURE__ */ jsx5("div", { style: { maxHeight: "140px", overflowY: "auto" }, children: !availableNodeTypes || availableNodeTypes.length === 0 ? /* @__PURE__ */ jsx5(
+          "div",
+          {
+            style: itemStyle,
+            onClick: () => {
+              onSpawnNode("default");
+              onClose();
+            },
+            children: /* @__PURE__ */ jsx5("span", { children: "Default Node" })
+          }
+        ) : availableNodeTypes.map((def) => /* @__PURE__ */ jsx5(
+          "div",
+          {
+            style: itemStyle,
+            onMouseEnter: (e) => e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.08)",
+            onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "transparent",
+            onClick: () => {
+              onSpawnNode(def.type);
+              onClose();
+            },
+            children: /* @__PURE__ */ jsx5("span", { children: def.label || def.type })
+          },
+          def.type
+        )) }),
+        /* @__PURE__ */ jsx5("div", { style: { height: "1px", backgroundColor: "var(--skipo-border, #333)", margin: "4px 0" } }),
+        /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            style: itemStyle,
+            onMouseEnter: (e) => e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.08)",
+            onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "transparent",
+            onClick: () => {
+              onSelectAll();
+              onClose();
+            },
+            children: [
+              /* @__PURE__ */ jsx5("span", { children: "Select All" }),
+              /* @__PURE__ */ jsx5("span", { style: shortcutStyle, children: "\u2318A" })
+            ]
+          }
+        ),
+        hasSelection && /* @__PURE__ */ jsxs4(Fragment2, { children: [
+          /* @__PURE__ */ jsxs4(
+            "div",
+            {
+              style: { ...itemStyle, color: "#e06c75" },
+              onMouseEnter: (e) => e.currentTarget.style.backgroundColor = "rgba(224, 108, 117, 0.15)",
+              onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "transparent",
+              onClick: () => {
+                onDeleteSelected();
+                onClose();
+              },
+              children: [
+                /* @__PURE__ */ jsx5("span", { children: "Delete Selected" }),
+                /* @__PURE__ */ jsx5("span", { style: shortcutStyle, children: "Del" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx5(
+            "div",
+            {
+              style: itemStyle,
+              onMouseEnter: (e) => e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.08)",
+              onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "transparent",
+              onClick: () => {
+                onClearSelection();
+                onClose();
+              },
+              children: /* @__PURE__ */ jsx5("span", { children: "Clear Selection" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/node-graph-ui/toolbar/GraphToolbar.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function GraphToolbar({
+  settings,
+  onUpdateSettings,
+  onRefreshTraces,
+  onLockAllConnections,
+  onSaveView,
+  onLoadView,
+  className = ""
+}) {
+  const btnStyle = (active) => ({
+    background: active ? "var(--skipo-accent, #d4af37)" : "transparent",
+    color: active ? "#000000" : "var(--skipo-text, #ffffff)",
+    border: "1px solid var(--skipo-border, #444)",
+    borderRadius: "4px",
+    padding: "4px 8px",
+    fontSize: "11px",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    gap: "4px"
+  });
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "6px",
+        padding: "6px 12px",
+        backgroundColor: "var(--skipo-surface, #1e1e1e)",
+        border: "1px solid var(--skipo-border, #333)",
+        borderRadius: "6px",
+        boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
+        zIndex: 25
+      },
+      children: [
+        /* @__PURE__ */ jsxs5(
+          "button",
+          {
+            type: "button",
+            style: btnStyle(settings.tracingEnabled),
+            onClick: () => onUpdateSettings({ tracingEnabled: !settings.tracingEnabled }),
+            children: [
+              "Tracing: ",
+              settings.tracingEnabled ? "ON" : "OFF"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs5(
+          "button",
+          {
+            type: "button",
+            style: btnStyle(settings.autoSolidify),
+            onClick: () => onUpdateSettings({ autoSolidify: !settings.autoSolidify }),
+            children: [
+              "Solidify: ",
+              settings.autoSolidify ? "AUTO" : "MANUAL"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          "button",
+          {
+            type: "button",
+            style: btnStyle(false),
+            onClick: onRefreshTraces,
+            children: "Refresh Traces"
+          }
+        ),
+        /* @__PURE__ */ jsxs5(
+          "button",
+          {
+            type: "button",
+            style: btnStyle(settings.attractionEnabled),
+            onClick: () => onUpdateSettings({ attractionEnabled: !settings.attractionEnabled }),
+            children: [
+              "Attraction: ",
+              settings.attractionEnabled ? "ON" : "OFF"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          "button",
+          {
+            type: "button",
+            style: btnStyle(false),
+            onClick: onLockAllConnections,
+            children: "Lock All"
+          }
+        ),
+        onSaveView && /* @__PURE__ */ jsx6("button", { type: "button", style: btnStyle(false), onClick: onSaveView, children: "Save View" }),
+        onLoadView && /* @__PURE__ */ jsx6("button", { type: "button", style: btnStyle(false), onClick: onLoadView, children: "Load View" })
+      ]
+    }
+  );
+}
+
+// src/node-graph-ui/react-flow/ReactFlowAdapter.ts
+var ReactFlowAdapter = class {
+  static toReactFlowNodes(nodes) {
+    return nodes.map((node) => ({
+      id: node.id,
+      type: "magneticNode",
+      position: { x: node.position.x, y: node.position.y },
+      data: {
+        nodeId: node.id,
+        label: node.label,
+        type: node.type,
+        handles: node.handles.map((h) => ({
+          id: h.id,
+          direction: h.direction,
+          category: h.handleCategory,
+          dataType: h.dataType,
+          offset: { ...h.offset }
+        })),
+        positionLocked: node.positionLocked,
+        customData: node.state
+      }
+    }));
+  }
+  static toReactFlowEdges(connections, traces = [], viewLinks = []) {
+    const edges = [];
+    for (const conn of connections) {
+      edges.push({
+        id: conn.id,
+        source: conn.sourceNodeId,
+        sourceHandle: conn.sourceHandleId,
+        target: conn.targetNodeId,
+        targetHandle: conn.targetHandleId,
+        type: "magneticSolidEdge",
+        data: {
+          connectionId: conn.id,
+          sourceNodeId: conn.sourceNodeId,
+          sourceHandleId: conn.sourceHandleId,
+          targetNodeId: conn.targetNodeId,
+          targetHandleId: conn.targetHandleId,
+          wireType: conn.wireType,
+          locked: conn.locked,
+          isTrace: false
+        }
+      });
+    }
+    for (const trace of traces) {
+      edges.push({
+        id: trace.id,
+        source: trace.sourceNodeId,
+        sourceHandle: trace.sourceHandleId,
+        target: trace.targetNodeId,
+        targetHandle: trace.targetHandleId,
+        type: "magneticTraceEdge",
+        animated: true,
+        data: {
+          connectionId: trace.id,
+          sourceNodeId: trace.sourceNodeId,
+          sourceHandleId: trace.sourceHandleId,
+          targetNodeId: trace.targetNodeId,
+          targetHandleId: trace.targetHandleId,
+          wireType: trace.wireType,
+          locked: false,
+          isTrace: true
+        }
+      });
+    }
+    for (const link of viewLinks) {
+      edges.push({
+        id: link.id,
+        source: link.sourceNodeId,
+        sourceHandle: link.sourceViewHandleId,
+        target: link.targetViewWindowId,
+        targetHandle: "window-in",
+        type: "viewLinkEdge",
+        data: {
+          connectionId: link.id,
+          sourceNodeId: link.sourceNodeId,
+          sourceHandleId: link.sourceViewHandleId,
+          targetNodeId: link.targetViewWindowId,
+          targetHandleId: "window-in",
+          wireType: "VIEW",
+          locked: true,
+          isViewLink: true
+        }
+      });
+    }
+    return edges;
+  }
+  static toReactFlowViewWindows(windows) {
+    return windows.map((w) => ({
+      id: w.id,
+      type: "viewWindowWidget",
+      position: { x: w.position.x, y: w.position.y },
+      data: {
+        windowId: w.id,
+        viewType: w.viewType,
+        sourceNodeId: w.sourceNodeId,
+        dynamicState: w.dynamicState,
+        pinnedLive: w.pinnedLive,
+        size: { ...w.size }
+      }
+    }));
+  }
+};
+
+// src/Viewer2DNodes.tsx
+import { useState as useState3, useRef } from "react";
+import { getBeamPoints, calculateSocketCoordinates } from "@ultrst-armada/kloks/state-graph";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function Viewer2DNodes({
+  node,
+  selected,
+  onMouseDown,
+  onDoubleClick,
+  onSocketMouseDown,
+  onSocketNudgeChange
+}) {
+  const cardWidth = node.width ?? 180;
+  const headerHeight = 36;
+  const socketSpacing = 36;
+  const centerX = cardWidth / 2;
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: node.position.x,
+        top: node.position.y,
+        width: cardWidth,
+        backgroundColor: "rgba(20, 24, 30, 0.9)",
+        backdropFilter: "blur(12px)",
+        border: `2px solid ${selected ? "#d4af37" : "rgba(255, 255, 255, 0.12)"}`,
+        borderRadius: "10px",
+        color: "#f5ede4",
+        fontFamily: "Inter, system-ui, sans-serif",
+        userSelect: "none",
+        boxShadow: selected ? "0 0 20px rgba(212, 175, 55, 0.45)" : "0 8px 16px rgba(0, 0, 0, 0.4)",
+        zIndex: selected ? 25 : 15
+      },
+      onMouseDown: (e) => onMouseDown?.(e, node.id),
+      onDoubleClick: () => onDoubleClick?.(node.id),
+      children: [
+        /* @__PURE__ */ jsxs6(
+          "div",
+          {
+            style: {
+              height: `${headerHeight}px`,
+              padding: "0 12px",
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              borderBottom: "1px solid rgba(255, 255, 255, 0.08)",
+              backgroundColor: "rgba(0, 0, 0, 0.25)",
+              borderTopLeftRadius: "8px",
+              borderTopRightRadius: "8px"
+            },
+            children: [
+              /* @__PURE__ */ jsx7("span", { style: { fontSize: "12px", fontWeight: 600, letterSpacing: "0.02em" }, children: node.label }),
+              /* @__PURE__ */ jsx7(
+                "span",
+                {
+                  style: {
+                    fontSize: "9px",
+                    textTransform: "uppercase",
+                    letterSpacing: "0.05em",
+                    padding: "2px 6px",
+                    borderRadius: "4px",
+                    backgroundColor: "rgba(255, 255, 255, 0.08)",
+                    color: "#a0aec0"
+                  },
+                  children: node.type
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx7("div", { style: { position: "relative", minHeight: "60px", padding: "12px 16px" }, children: node.data && /* @__PURE__ */ jsxs6("div", { style: { fontSize: "11px", color: "#94a3b8" }, children: [
+          Object.keys(node.data).length,
+          " properties"
+        ] }) }),
+        /* @__PURE__ */ jsxs6("div", { style: { position: "absolute", top: headerHeight + 10, left: centerX, width: 0, height: 0 }, children: [
+          node.inputs?.map((socket, idx) => /* @__PURE__ */ jsx7(
+            MovableSocketHandle,
+            {
+              socket,
+              nodeId: node.id,
+              cardWidth,
+              isOutput: false,
+              baseY: idx * socketSpacing,
+              onSocketMouseDown,
+              onSocketNudgeChange
+            },
+            socket.id
+          )),
+          node.outputs?.map((socket, idx) => /* @__PURE__ */ jsx7(
+            MovableSocketHandle,
+            {
+              socket,
+              nodeId: node.id,
+              cardWidth,
+              isOutput: true,
+              baseY: idx * socketSpacing,
+              onSocketMouseDown,
+              onSocketNudgeChange
+            },
+            socket.id
+          ))
+        ] })
+      ]
+    }
+  );
+}
+function MovableSocketHandle({
+  socket,
+  nodeId,
+  cardWidth,
+  isOutput,
+  baseY,
+  onSocketMouseDown,
+  onSocketNudgeChange
+}) {
+  const [isHovered, setIsHovered] = useState3(false);
+  const [localNudge, setLocalNudge] = useState3(
+    socket.offset ?? { x: 0, y: 0 }
+  );
+  const isDraggingGizmoRef = useRef(false);
+  const dragStartPosRef = useRef({
+    clientX: 0,
+    clientY: 0,
+    origX: 0,
+    origY: 0
+  });
+  const nudge = socket.offset ?? localNudge;
+  const isDisplaced = nudge.x !== 0 || nudge.y !== 0;
+  const coords = calculateSocketCoordinates(baseY, {
+    cardWidth,
+    isOutput,
+    clearance: 12,
+    nudge
+  });
+  const handleGizmoMouseDown = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    isDraggingGizmoRef.current = true;
+    dragStartPosRef.current = {
+      clientX: e.clientX,
+      clientY: e.clientY,
+      origX: nudge.x,
+      origY: nudge.y
+    };
+    const handleWindowMouseMove = (moveEvt) => {
+      if (!isDraggingGizmoRef.current) return;
+      const dx = moveEvt.clientX - dragStartPosRef.current.clientX;
+      const dy = moveEvt.clientY - dragStartPosRef.current.clientY;
+      const updated = {
+        x: Math.round(dragStartPosRef.current.origX + dx),
+        y: Math.round(dragStartPosRef.current.origY + dy)
+      };
+      setLocalNudge(updated);
+      onSocketNudgeChange?.(nodeId, socket.id, updated);
+    };
+    const handleWindowMouseUp = () => {
+      isDraggingGizmoRef.current = false;
+      window.removeEventListener("mousemove", handleWindowMouseMove);
+      window.removeEventListener("mouseup", handleWindowMouseUp);
+    };
+    window.addEventListener("mousemove", handleWindowMouseMove);
+    window.addEventListener("mouseup", handleWindowMouseUp);
+  };
+  const beamCorePoints = getBeamPoints(nudge, 5, 1.2);
+  const beamShroudPoints = getBeamPoints(nudge, 8, 2.5);
+  const socketThemeColor = isOutput ? "#61afef" : "#98c379";
+  const gizmoOffsetX = isOutput ? 18 : -18;
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: 0,
+        top: 0
+      },
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      children: [
+        isDisplaced && /* @__PURE__ */ jsxs6(
+          "svg",
+          {
+            style: {
+              position: "absolute",
+              left: coords.effectiveX,
+              top: coords.effectiveY,
+              overflow: "visible",
+              pointerEvents: "none",
+              zIndex: 1
+            },
+            children: [
+              /* @__PURE__ */ jsx7(
+                "polygon",
+                {
+                  points: beamShroudPoints,
+                  fill: socketThemeColor,
+                  opacity: 0.35
+                }
+              ),
+              /* @__PURE__ */ jsx7(
+                "polygon",
+                {
+                  points: beamCorePoints,
+                  fill: "#ffffff",
+                  opacity: 0.9
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: coords.effectiveX - 14,
+              top: coords.effectiveY - 14,
+              width: "28px",
+              height: "28px",
+              borderRadius: "50%",
+              backgroundColor: "#181a1f",
+              border: `2px solid ${socketThemeColor}`,
+              boxShadow: isHovered ? `0 0 12px ${socketThemeColor}, inset 0 0 6px ${socketThemeColor}` : "0 2px 6px rgba(0,0,0,0.6)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              cursor: "crosshair",
+              zIndex: 4
+            },
+            onMouseDown: (e) => {
+              e.stopPropagation();
+              onSocketMouseDown?.(e, nodeId, socket.id, isOutput ? "output" : "input");
+            },
+            children: /* @__PURE__ */ jsx7(
+              "div",
+              {
+                style: {
+                  width: "10px",
+                  height: "10px",
+                  borderRadius: "50%",
+                  backgroundColor: socketThemeColor,
+                  boxShadow: `0 0 4px ${socketThemeColor}`
+                }
+              }
+            )
+          }
+        ),
+        (isHovered || isDraggingGizmoRef.current) && /* @__PURE__ */ jsx7(
+          "div",
+          {
+            title: "Drag to displace socket handle",
+            style: {
+              position: "absolute",
+              left: coords.effectiveX + gizmoOffsetX - 8,
+              top: coords.effectiveY - 8,
+              width: "16px",
+              height: "16px",
+              borderRadius: "4px",
+              backgroundColor: "rgba(30, 34, 42, 0.95)",
+              border: "1px solid rgba(255, 255, 255, 0.3)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              cursor: "grab",
+              zIndex: 6,
+              boxShadow: "0 2px 4px rgba(0,0,0,0.5)"
+            },
+            onMouseDown: handleGizmoMouseDown,
+            children: /* @__PURE__ */ jsxs6("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "#d4af37", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsx7("polyline", { points: "5 9 2 12 5 15" }),
+              /* @__PURE__ */ jsx7("polyline", { points: "9 5 12 2 15 5" }),
+              /* @__PURE__ */ jsx7("polyline", { points: "15 19 12 22 9 19" }),
+              /* @__PURE__ */ jsx7("polyline", { points: "19 9 22 12 19 15" }),
+              /* @__PURE__ */ jsx7("line", { x1: "2", y1: "12", x2: "22", y2: "12" }),
+              /* @__PURE__ */ jsx7("line", { x1: "12", y1: "2", x2: "12", y2: "22" })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  BIOME_CONFIGS,
+  COORD_SCALE,
+  CanvasBackground2D,
+  CanvasContextMenu,
+  CanvasErrorBoundary,
+  CanvasViewport,
+  CompatibleNodePicker,
+  ContainerNode2D,
+  DockBar,
+  DockItem,
+  EffectNode2D,
+  GraphToolbar,
+  InfiniteCanvas,
+  MagneticTraces2D,
+  MidpointWidgets,
+  MiniMap,
+  ModuleNode2D,
+  MonacoEditor,
+  MovableSocketHandle,
+  NODE_CARD_WIDTH,
+  Node2DBase,
+  NodeRenderer2D,
+  NodeSearchPalette,
+  PredictiveGhostNodeCard,
+  PredictiveHudToolbar,
+  PredictiveLayer2D,
+  ReactFlowAdapter,
+  RecorderWaveformDisplay,
+  RotaryKnob,
+  SOCKET_ROW_HEIGHT,
+  Socket2D,
+  SolidifyWidget,
+  Tile,
+  TileCreateButton,
+  TileGrid,
+  TriggerNode2D,
+  Viewer2DNodes,
+  Wire2D,
+  getSocketLocalOffset,
+  getSocketScreenPosition,
+  renderSpriteIcon,
+  skipoDarkTheme,
+  useCanvas,
+  useCanvas2DCoordinates,
+  useCanvas2DMagnetic,
+  useDock,
+  useMonaco,
+  usePredictiveGraph2D,
+  useTileMenu
+};