@ultrst-armada/floks 0.0.0-stage → 1.0.0

package/packages/canvas-ui/dist/chunk-SA3JADUG.js

@@ -0,0 +1,160 @@
+// src/tile-menu/Tile.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Tile({ tile, onClick, onContextMenu, dragHandleProps, isDragging }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        backgroundColor: "rgba(30, 30, 30, 0.7)",
+        backdropFilter: "blur(12px)",
+        border: "1px solid rgba(255, 255, 255, 0.1)",
+        borderRadius: "12px",
+        padding: "16px",
+        display: "flex",
+        flexDirection: "column",
+        gap: "8px",
+        cursor: "pointer",
+        opacity: isDragging ? 0.5 : 1,
+        boxShadow: isDragging ? "0 8px 16px rgba(0,0,0,0.5)" : "0 2px 4px rgba(0,0,0,0.2)",
+        transition: "transform 0.2s, box-shadow 0.2s"
+      },
+      onClick: () => onClick?.(tile.id),
+      onContextMenu: (e) => onContextMenu?.(e, tile.id),
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+            tile.icon && /* @__PURE__ */ jsx("span", { style: { fontSize: "24px" }, children: tile.icon }),
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [
+              /* @__PURE__ */ jsx("span", { style: { color: "#fff", fontWeight: 600, fontSize: "14px" }, children: tile.title }),
+              tile.subtitle && /* @__PURE__ */ jsx("span", { style: { color: "#aaa", fontSize: "12px" }, children: tile.subtitle })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { ...dragHandleProps, style: { cursor: "grab", padding: "4px", color: "#666" }, children: "\u283F" })
+        ] }),
+        tile.badges && tile.badges.length > 0 && /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "4px", flexWrap: "wrap", marginTop: "8px" }, children: tile.badges.map((badge) => /* @__PURE__ */ jsx("span", { style: {
+          fontSize: "10px",
+          backgroundColor: "rgba(255,255,255,0.1)",
+          padding: "2px 6px",
+          borderRadius: "12px",
+          color: "#ccc"
+        }, children: badge }, badge)) })
+      ]
+    }
+  );
+}
+
+// src/tile-menu/TileGrid.tsx
+import { useState, useRef, useEffect } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function TileGrid({
+  tiles,
+  onReorder: _onReorder,
+  onTileClick
+}) {
+  const containerRef = useRef(null);
+  const [columns, setColumns] = useState(3);
+  const [tileMinHeight, setTileMinHeight] = useState(110);
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { width, height } = entry.contentRect;
+        if (width <= 0) return;
+        let cols = 1;
+        if (width >= 1200) cols = 4;
+        else if (width >= 860) cols = 3;
+        else if (width >= 540) cols = 2;
+        else cols = 1;
+        const estimatedRows = Math.ceil(tiles.length / cols);
+        let dynamicHeight = 110;
+        if (height > 0 && estimatedRows > 0) {
+          const availableRowHeight = (height - (estimatedRows + 1) * 16) / estimatedRows;
+          dynamicHeight = Math.max(90, Math.min(180, Math.floor(availableRowHeight)));
+        }
+        setColumns(cols);
+        setTileMinHeight(dynamicHeight);
+      }
+    });
+    observer.observe(containerRef.current);
+    return () => observer.disconnect();
+  }, [tiles.length]);
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ref: containerRef,
+      className: "skipo-tile-grid-container",
+      style: {
+        display: "grid",
+        gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+        gridAutoRows: `minmax(${tileMinHeight}px, auto)`,
+        gap: "14px",
+        padding: "14px",
+        width: "100%",
+        height: "100%",
+        boxSizing: "border-box",
+        overflowY: "auto"
+      },
+      children: tiles.map((tile) => /* @__PURE__ */ jsx2(Tile, { tile, onClick: onTileClick }, tile.id))
+    }
+  );
+}
+
+// src/tile-menu/TileCreateButton.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function TileCreateButton({ onClick }) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      onClick,
+      style: {
+        border: "2px dashed rgba(255, 255, 255, 0.2)",
+        borderRadius: "12px",
+        padding: "16px",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        cursor: "pointer",
+        minHeight: "100px",
+        color: "rgba(255, 255, 255, 0.5)",
+        transition: "all 0.2s"
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.borderColor = "rgba(255, 255, 255, 0.5)";
+        e.currentTarget.style.color = "#fff";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.borderColor = "rgba(255, 255, 255, 0.2)";
+        e.currentTarget.style.color = "rgba(255, 255, 255, 0.5)";
+      },
+      children: /* @__PURE__ */ jsx3("span", { style: { fontSize: "32px" }, children: "+" })
+    }
+  );
+}
+
+// src/tile-menu/useTileMenu.ts
+import { useState as useState2, useCallback } from "react";
+function useTileMenu(initialTiles = []) {
+  const [tiles, setTiles] = useState2(initialTiles);
+  const addTile = useCallback((tile) => {
+    setTiles((prev) => [...prev, tile]);
+  }, []);
+  const removeTile = useCallback((id) => {
+    setTiles((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  const reorderTiles = useCallback((newOrder) => {
+    setTiles(newOrder);
+  }, []);
+  return {
+    tiles,
+    addTile,
+    removeTile,
+    reorderTiles
+  };
+}
+
+export {
+  Tile,
+  TileGrid,
+  TileCreateButton,
+  useTileMenu
+};

package/packages/canvas-ui/dist/chunk-UEIMM6PV.js

@@ -0,0 +1,508 @@
+import {
+  getSocketLocalOffset,
+  getSocketScreenPosition,
+  renderSpriteIcon
+} from "./chunk-2GLR35UM.js";
+
+// src/predictive/PredictiveGhostNodeCard/PredictiveGhostNodeCard.tsx
+import { Zap } from "lucide-react";
+import { getNodeSockets } from "@ultrst-armada/kloks/state-graph";
+import { NodeAssetRegistry } from "@ultrst-armada/kloks/state-graph";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PredictiveGhostNodeCard = ({
+  ghost,
+  screenPos,
+  zoom,
+  onSolidify,
+  isHovered = false,
+  onHoverChange
+}) => {
+  const node = ghost.prototypeNode;
+  const { inputs, outputs } = getNodeSockets(node);
+  const sprite = NodeAssetRegistry.get2DSpriteSetting(node);
+  const isRetroRecorder = node.type === "recorder" && node.recordingMode === "retrospective";
+  const isStandardRecorder = node.type === "recorder" && !isRetroRecorder;
+  const isContainer = node.type === "container";
+  const isButton = node.type === "button";
+  const isTrigger = node.type === "trigger";
+  const isTriggerFractions = isTrigger && node.triggerType === "beat_fractions";
+  const isStringNode = node.type === "primitive_string";
+  const isNumberNode = node.type === "primitive_number";
+  const isBooleanNode = node.type === "primitive_boolean";
+  const isObjectNode = node.type === "primitive_object";
+  const isFolderPathNode = node.type === "folder_path";
+  const triggerWidth = isTriggerFractions ? "w-[260px]" : "w-[170px]";
+  const cardWidthClass = isTrigger ? triggerWidth : isRetroRecorder ? "w-[200px]" : isStandardRecorder ? "w-[165px]" : isContainer ? "w-[190px]" : isFolderPathNode || isObjectNode ? "w-[180px]" : isStringNode ? "w-[165px]" : isNumberNode ? "w-[145px]" : isBooleanNode ? "w-[130px]" : isButton ? "w-[100px] h-[100px]" : "w-[130px]";
+  const maxSockets = Math.max(inputs.length, outputs.length);
+  const dynamicMinHeight = isButton ? "100px" : maxSockets > 1 ? `${Math.max(64, maxSockets * 32 + 10)}px` : "64px";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: `${screenPos.x}px`,
+        top: `${screenPos.y}px`,
+        transform: `translate(-50%, -50%) scale(${Math.max(0.65, Math.min(1.15, zoom))})`,
+        transformOrigin: "center center"
+      },
+      className: "pointer-events-auto z-30 select-none transition-transform",
+      onMouseEnter: () => onHoverChange?.(true),
+      onMouseLeave: () => onHoverChange?.(false),
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `relative ${cardWidthClass} rounded-lg bg-slate-950/65 backdrop-blur-md border-2 border-dashed border-cyan-400/70 p-2 flex flex-col items-center justify-center transition-all duration-200 ${isHovered ? "border-cyan-300 bg-slate-950/80 shadow-[0_0_30px_rgba(56,189,248,0.5)] scale-105" : "shadow-[0_0_18px_rgba(56,189,248,0.25)]"}`,
+          style: { minHeight: dynamicMinHeight },
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "w-full flex items-center justify-between pb-1 border-b border-cyan-500/20 text-[8px] font-mono tracking-wider text-cyan-300/80", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-cyan-400 animate-ping" }),
+                /* @__PURE__ */ jsx("span", { className: "font-extrabold uppercase truncate max-w-[90px]", children: node.name || ghost.label })
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: "text-cyan-400/60 font-bold", children: [
+                "[",
+                ghost.candidateIndex + 1,
+                "/",
+                ghost.totalCandidates,
+                "]"
+              ] })
+            ] }),
+            isContainer ? /* @__PURE__ */ jsxs("div", { className: "w-full py-1.5 flex flex-col items-center gap-1", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+                renderSpriteIcon(sprite.iconName, "#38bdf8", "w-4 h-4"),
+                /* @__PURE__ */ jsxs("span", { className: "text-[10px] font-mono font-bold text-cyan-200", children: [
+                  node.containerType?.toUpperCase(),
+                  " CONTAINER"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "w-full h-4 rounded bg-cyan-950/40 border border-cyan-500/20 flex items-center justify-around px-1", children: [...Array(6)].map((_, i) => /* @__PURE__ */ jsx("div", { className: "w-1.5 rounded-sm bg-cyan-400/40", style: { height: `${30 + i % 3 * 30}%` } }, i)) })
+            ] }) : isStandardRecorder || isRetroRecorder ? /* @__PURE__ */ jsxs("div", { className: "w-full py-1.5 flex flex-col items-center gap-1", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+                renderSpriteIcon(sprite.iconName, "#f43f5e", "w-4 h-4"),
+                /* @__PURE__ */ jsx("span", { className: "text-[9px] font-mono font-bold text-rose-300", children: isRetroRecorder ? "RETRO RECORDER" : "LIVE RECORDER" })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "w-full h-3 rounded bg-rose-950/30 border border-rose-500/20 flex items-center px-1", children: /* @__PURE__ */ jsx("div", { className: "w-2/3 h-1.5 rounded-sm bg-rose-500/50 animate-pulse" }) })
+            ] }) : isTrigger ? /* @__PURE__ */ jsxs("div", { className: "w-full py-1 flex flex-col items-center gap-1", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                renderSpriteIcon(sprite.iconName, "#eab308", "w-3.5 h-3.5"),
+                /* @__PURE__ */ jsx("span", { className: "text-[9px] font-mono font-bold text-amber-300", children: "STEP SEQUENCER" })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: [...Array(8)].map((_, i) => /* @__PURE__ */ jsx("div", { className: `w-2 h-2 rounded-sm border ${i % 2 === 0 ? "bg-amber-400/60 border-amber-300" : "bg-slate-900 border-amber-500/30"}` }, i)) })
+            ] }) : isButton ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center my-auto", children: /* @__PURE__ */ jsx("div", { className: "w-8 h-8 rounded-full border border-emerald-400/60 bg-emerald-950/30 flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "w-3 h-3 rounded-full bg-emerald-400/80 animate-pulse" }) }) }) : isStringNode || isNumberNode || isBooleanNode || isObjectNode || isFolderPathNode ? /* @__PURE__ */ jsxs("div", { className: "w-full py-1 flex flex-col items-center gap-0.5 text-center", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] font-mono font-bold text-cyan-200 truncate", children: ghost.label }),
+              /* @__PURE__ */ jsx("span", { className: "text-[8px] font-mono text-cyan-400/60", children: ghost.badge })
+            ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-1.5 text-center", children: [
+              renderSpriteIcon(sprite.iconName, sprite.accentColor || "#38bdf8", "w-6 h-6"),
+              /* @__PURE__ */ jsx("span", { className: "text-[9px] font-mono font-bold text-cyan-200 mt-1 truncate max-w-[110px]", children: node.name || ghost.label })
+            ] }),
+            inputs.map((socket, idx) => {
+              const localPos = getSocketLocalOffset(node, socket.socketId, false, idx, inputs.length);
+              const isTargetMatching = ghost.matchingSocketId === socket.socketId;
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    left: `calc(50% + ${localPos.x}px)`,
+                    top: `calc(50% + ${localPos.y}px)`,
+                    transform: "translate(-50%, -50%)"
+                  },
+                  className: `w-2.5 h-2.5 rounded-full border ${isTargetMatching ? "bg-cyan-400 border-white shadow-[0_0_10px_#38bdf8] scale-125" : "bg-cyan-950 border-cyan-500/60"}`,
+                  title: `Input: ${socket.label}`
+                },
+                socket.socketId
+              );
+            }),
+            outputs.map((socket, idx) => {
+              const localPos = getSocketLocalOffset(node, socket.socketId, true, idx, outputs.length);
+              const isTargetMatching = ghost.matchingSocketId === socket.socketId;
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    left: `calc(50% + ${localPos.x}px)`,
+                    top: `calc(50% + ${localPos.y}px)`,
+                    transform: "translate(-50%, -50%)"
+                  },
+                  className: `w-2.5 h-2.5 rounded-full border ${isTargetMatching ? "bg-cyan-400 border-white shadow-[0_0_10px_#38bdf8] scale-125" : "bg-cyan-950 border-cyan-500/60"}`,
+                  title: `Output: ${socket.label}`
+                },
+                socket.socketId
+              );
+            }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onMouseDown: (e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                },
+                onPointerDown: (e) => {
+                  e.stopPropagation();
+                },
+                onClick: (e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                  onSolidify(ghost);
+                },
+                className: "absolute -top-3 -right-3 z-40 w-7 h-7 rounded-full bg-slate-950/95 border-2 border-cyan-400 text-cyan-300 hover:bg-cyan-900 hover:text-white hover:border-cyan-200 hover:scale-125 shadow-[0_0_15px_rgba(6,182,212,0.8)] flex items-center justify-center transition-all cursor-pointer group/btn",
+                title: `Solidify ${node.name || ghost.label} & wire connection`,
+                children: /* @__PURE__ */ jsx(Zap, { className: "w-3.5 h-3.5 text-cyan-300 group-hover/btn:scale-110" })
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/predictive/PredictiveHudToolbar.tsx
+import { ChevronLeft, ChevronRight, Zap as Zap2, X, Sparkles } from "lucide-react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var PredictiveHudToolbar = ({
+  isActive,
+  scenarioIndex,
+  totalGhosts,
+  selectedCount,
+  onToggleActive,
+  onNextScenario,
+  onPrevScenario,
+  onSolidifyAll,
+  onClose
+}) => {
+  if (selectedCount === 0) return null;
+  if (!isActive) {
+    return /* @__PURE__ */ jsx2("div", { className: "absolute top-4 left-1/2 -translate-x-1/2 z-40 pointer-events-auto", children: /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        onClick: onToggleActive,
+        className: "flex items-center gap-2 px-3 py-1.5 rounded-full bg-slate-900/90 hover:bg-cyan-950 border border-cyan-500/40 hover:border-cyan-400 text-cyan-300 hover:text-white text-xs font-mono tracking-wide shadow-lg backdrop-blur-md transition-all hover:scale-105 group",
+        title: "Press Ctrl+Tab or Cmd+Tab to view prospective ghost nodes",
+        children: [
+          /* @__PURE__ */ jsx2(Sparkles, { className: "w-3.5 h-3.5 text-cyan-400 group-hover:rotate-45 transition-transform animate-pulse" }),
+          /* @__PURE__ */ jsx2("span", { children: "Predictive Nodes" }),
+          /* @__PURE__ */ jsx2("span", { className: "px-1.5 py-0.5 rounded bg-cyan-950/80 border border-cyan-500/30 text-[10px] text-cyan-200", children: "\u2318/Ctrl+Tab" })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs2("div", { className: "absolute top-4 left-1/2 -translate-x-1/2 z-40 pointer-events-auto flex flex-col items-center gap-1.5", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 px-3 py-1.5 rounded-full bg-slate-950/95 border border-cyan-400/80 shadow-[0_0_25px_rgba(6,182,212,0.4)] backdrop-blur-md", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-cyan-950/80 border border-cyan-500/40 text-cyan-300 text-[10px] font-mono font-bold tracking-widest uppercase", children: [
+        /* @__PURE__ */ jsx2("span", { className: "w-2 h-2 rounded-full bg-cyan-400 animate-ping" }),
+        /* @__PURE__ */ jsx2("span", { children: "PREDICTIVE ACTIVE" })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1 bg-slate-900/80 rounded-full px-1 border border-slate-700", children: [
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            onClick: onPrevScenario,
+            className: "p-1 rounded-full text-slate-300 hover:text-white hover:bg-slate-800 transition-colors",
+            title: "Previous Scenario (Shift+Tab)",
+            children: /* @__PURE__ */ jsx2(ChevronLeft, { className: "w-3.5 h-3.5" })
+          }
+        ),
+        /* @__PURE__ */ jsxs2("span", { className: "px-1.5 text-[11px] font-mono font-semibold text-cyan-200", children: [
+          "Scenario #",
+          scenarioIndex + 1
+        ] }),
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            onClick: onNextScenario,
+            className: "p-1 rounded-full text-slate-300 hover:text-white hover:bg-slate-800 transition-colors",
+            title: "Next Scenario (Tab)",
+            children: /* @__PURE__ */ jsx2(ChevronRight, { className: "w-3.5 h-3.5" })
+          }
+        )
+      ] }),
+      totalGhosts > 0 && /* @__PURE__ */ jsxs2(
+        "button",
+        {
+          onMouseDown: (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+          },
+          onPointerDown: (e) => {
+            e.stopPropagation();
+          },
+          onClick: (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            onSolidifyAll();
+          },
+          className: "relative p-1.5 rounded-full bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-400 hover:to-blue-500 text-slate-950 transition-transform hover:scale-110 shadow-[0_0_15px_rgba(6,182,212,0.6)] flex items-center justify-center cursor-pointer group",
+          title: `Solidify all (${totalGhosts}) predicted nodes & wires`,
+          children: [
+            /* @__PURE__ */ jsx2(Zap2, { className: "w-3.5 h-3.5 text-slate-950 group-hover:rotate-12 transition-transform animate-pulse" }),
+            /* @__PURE__ */ jsx2("span", { className: "absolute -top-1 -right-1 px-1 min-w-[14px] h-3.5 rounded-full bg-slate-950 text-cyan-300 border border-cyan-400 font-black text-[8px] flex items-center justify-center font-mono shadow-sm", children: totalGhosts })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          onClick: onClose,
+          className: "p-1 rounded-full text-slate-400 hover:text-slate-100 hover:bg-white/10 transition-colors ml-1",
+          title: "Exit Predictive Mode (Esc / \u2318+Tab)",
+          children: /* @__PURE__ */ jsx2(X, { className: "w-3.5 h-3.5" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: "text-[9px] font-mono text-cyan-300/80 bg-slate-950/80 px-2.5 py-0.5 rounded-full border border-cyan-500/20 backdrop-blur-sm", children: "Tab: next scenario \u2022 Shift+Tab: prev \u2022 Click Solidify on node or ghost" })
+  ] });
+};
+
+// src/predictive/PredictiveLayer2D.tsx
+import { useState } from "react";
+import { Zap as Zap3 } from "lucide-react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var PredictiveLayer2D = ({
+  nodes,
+  ghostNodes,
+  traces,
+  selectedNodesWithGhosts,
+  worldToScreen,
+  camera,
+  onSolidifyGhost,
+  onSolidifyAllForNode,
+  isActive = false,
+  targetNodes = [],
+  onToggleActive
+}) => {
+  const [hoveredGhostId, setHoveredGhostId] = useState(null);
+  const nodeMap = new Map(nodes.map((n) => [n.id, n]));
+  const ghostMap = new Map(ghostNodes.map((g) => [g.id, g]));
+  if (!isActive) {
+    return null;
+  }
+  if (ghostNodes.length === 0) return null;
+  return /* @__PURE__ */ jsxs3("div", { className: "absolute inset-0 pointer-events-none z-20", children: [
+    /* @__PURE__ */ jsxs3("svg", { className: "w-full h-full absolute inset-0", children: [
+      /* @__PURE__ */ jsx3("defs", { children: /* @__PURE__ */ jsxs3("filter", { id: "ghost-trace-glow", x: "-20%", y: "-20%", width: "140%", height: "140%", children: [
+        /* @__PURE__ */ jsx3("feGaussianBlur", { stdDeviation: "3", result: "blur" }),
+        /* @__PURE__ */ jsxs3("feMerge", { children: [
+          /* @__PURE__ */ jsx3("feMergeNode", { in: "blur" }),
+          /* @__PURE__ */ jsx3("feMergeNode", { in: "SourceGraphic" })
+        ] })
+      ] }) }),
+      traces.map((trace) => {
+        const ghost = ghostMap.get(trace.ghostNodeId);
+        if (!ghost) return null;
+        let p1;
+        let p2;
+        if (trace.isFromGhostToParent) {
+          const parent = nodeMap.get(trace.targetNodeId);
+          if (!parent) return null;
+          p1 = getSocketScreenPosition(ghost.prototypeNode, trace.sourceHandleId, true, worldToScreen, camera);
+          p2 = getSocketScreenPosition(parent, trace.targetHandleId, false, worldToScreen, camera);
+        } else {
+          const parent = nodeMap.get(trace.sourceNodeId);
+          if (!parent) return null;
+          p1 = getSocketScreenPosition(parent, trace.sourceHandleId, true, worldToScreen, camera);
+          p2 = getSocketScreenPosition(ghost.prototypeNode, trace.targetHandleId, false, worldToScreen, camera);
+        }
+        const isHovered = hoveredGhostId === ghost.id;
+        const strokeColor = trace.color || "#38bdf8";
+        const dx = Math.abs(p2.x - p1.x) * 0.45;
+        const path = `M ${p1.x} ${p1.y} C ${p1.x + dx} ${p1.y}, ${p2.x - dx} ${p2.y}, ${p2.x} ${p2.y}`;
+        return /* @__PURE__ */ jsx3("g", { children: /* @__PURE__ */ jsx3(
+          "path",
+          {
+            d: path,
+            fill: "none",
+            stroke: strokeColor,
+            strokeWidth: isHovered ? 2.5 : 1.5,
+            opacity: isHovered ? 0.9 : 0.6
+          }
+        ) }, trace.id);
+      })
+    ] }),
+    ghostNodes.map((ghost) => {
+      const screenPos = worldToScreen(ghost.worldPosition[0], ghost.worldPosition[2]);
+      return /* @__PURE__ */ jsx3(
+        PredictiveGhostNodeCard,
+        {
+          ghost,
+          screenPos,
+          zoom: camera.zoom,
+          onSolidify: onSolidifyGhost,
+          isHovered: hoveredGhostId === ghost.id,
+          onHoverChange: (hovered) => setHoveredGhostId(hovered ? ghost.id : null)
+        },
+        ghost.id
+      );
+    }),
+    Array.from(selectedNodesWithGhosts.entries()).map(([parentNodeId, ghosts]) => {
+      const parent = nodeMap.get(parentNodeId);
+      if (!parent || ghosts.length === 0) return null;
+      const screenPos = worldToScreen(parent.position[0], parent.position[2]);
+      const yOffset = -54 * Math.max(0.7, Math.min(1.2, camera.zoom));
+      return /* @__PURE__ */ jsx3(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            left: `${screenPos.x}px`,
+            top: `${screenPos.y + yOffset}px`,
+            transform: "translate(-50%, -100%)"
+          },
+          className: "pointer-events-auto z-40",
+          children: /* @__PURE__ */ jsxs3(
+            "button",
+            {
+              onMouseDown: (e) => {
+                e.stopPropagation();
+                e.preventDefault();
+              },
+              onPointerDown: (e) => {
+                e.stopPropagation();
+              },
+              onClick: (e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                onSolidifyAllForNode(parentNodeId);
+              },
+              className: "relative w-8 h-8 rounded-full bg-slate-950/95 border-2 border-cyan-400 text-cyan-300 hover:text-white hover:bg-cyan-900 hover:border-cyan-200 hover:scale-125 shadow-[0_0_20px_rgba(6,182,212,0.8)] flex items-center justify-center transition-all cursor-pointer group",
+              title: `Solidify all (${ghosts.length}) predicted nodes for ${parent.name}`,
+              children: [
+                /* @__PURE__ */ jsx3(Zap3, { className: "w-4 h-4 text-cyan-300 group-hover:rotate-12 transition-transform" }),
+                ghosts.length > 1 && /* @__PURE__ */ jsx3("span", { className: "absolute -top-1.5 -right-1.5 px-1 min-w-[15px] h-3.5 rounded-full bg-cyan-500 text-slate-950 font-black text-[8px] flex items-center justify-center font-mono shadow-sm", children: ghosts.length })
+              ]
+            }
+          )
+        },
+        `solidify-all-${parentNodeId}`
+      );
+    })
+  ] });
+};
+
+// src/predictive/usePredictiveGraph2D.ts
+import { useState as useState2, useEffect, useMemo, useCallback } from "react";
+import { computePredictiveGraph } from "@ultrst-armada/kloks/state-graph";
+function usePredictiveGraph2D({
+  nodes,
+  connections,
+  selectedNodeId,
+  selectedNodeIds = [],
+  onSolidifyPredictiveNodes
+}) {
+  const [isActive, setIsActive] = useState2(false);
+  const [scenarioIndex, setScenarioIndex] = useState2(0);
+  const targetNodes = useMemo(() => {
+    const idSet = new Set(selectedNodeIds || []);
+    if (selectedNodeId) idSet.add(selectedNodeId);
+    return nodes.filter((n) => idSet.has(n.id));
+  }, [nodes, selectedNodeId, selectedNodeIds]);
+  useEffect(() => {
+    if (targetNodes.length === 0 && isActive) {
+      setIsActive(false);
+      setScenarioIndex(0);
+    }
+  }, [targetNodes.length, isActive]);
+  const { ghostNodes, traces, selectedNodesWithGhosts } = useMemo(() => {
+    if (!isActive || targetNodes.length === 0) {
+      return {
+        ghostNodes: [],
+        traces: [],
+        selectedNodesWithGhosts: /* @__PURE__ */ new Map()
+      };
+    }
+    return computePredictiveGraph(targetNodes, connections, scenarioIndex);
+  }, [isActive, targetNodes, connections, scenarioIndex]);
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      const activeEl = document.activeElement;
+      if (activeEl && ["INPUT", "TEXTAREA", "SELECT"].includes(activeEl.tagName)) {
+        return;
+      }
+      const isExplicitToggleKey = (e.ctrlKey || e.metaKey || e.altKey) && ["Tab", "p", "P", "g", "G"].includes(e.key) || ["p", "P", "g", "G", "`", "~"].includes(e.key);
+      if (!isActive && targetNodes.length > 0 && (e.key === "Tab" || isExplicitToggleKey)) {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsActive(true);
+        return;
+      }
+      if (isActive && isExplicitToggleKey) {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsActive((prev) => !prev);
+        return;
+      }
+      if (isActive && e.key === "Tab") {
+        e.preventDefault();
+        e.stopPropagation();
+        if (e.shiftKey) {
+          setScenarioIndex((i) => i <= 0 ? 12 : i - 1);
+        } else {
+          setScenarioIndex((i) => i + 1);
+        }
+        return;
+      }
+      if (isActive && e.key === "Escape") {
+        e.preventDefault();
+        setIsActive(false);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown, { capture: true });
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown, { capture: true });
+    };
+  }, [isActive, targetNodes.length]);
+  const toggleActive = useCallback(() => {
+    if (targetNodes.length > 0) {
+      setIsActive((prev) => !prev);
+    }
+  }, [targetNodes.length]);
+  const nextScenario = useCallback(() => {
+    setScenarioIndex((i) => i + 1);
+  }, []);
+  const prevScenario = useCallback(() => {
+    setScenarioIndex((i) => i <= 0 ? 12 : i - 1);
+  }, []);
+  const solidifyGhost = useCallback(
+    (ghost) => {
+      onSolidifyPredictiveNodes?.([ghost]);
+    },
+    [onSolidifyPredictiveNodes]
+  );
+  const solidifyAllForNode = useCallback(
+    (parentNodeId) => {
+      const ghosts = selectedNodesWithGhosts.get(parentNodeId);
+      if (ghosts && ghosts.length > 0) {
+        onSolidifyPredictiveNodes?.(ghosts);
+      }
+    },
+    [selectedNodesWithGhosts, onSolidifyPredictiveNodes]
+  );
+  const solidifyAll = useCallback(() => {
+    if (ghostNodes.length > 0) {
+      onSolidifyPredictiveNodes?.(ghostNodes);
+    }
+  }, [ghostNodes, onSolidifyPredictiveNodes]);
+  return {
+    isActive,
+    scenarioIndex,
+    targetNodes,
+    ghostNodes,
+    traces,
+    selectedNodesWithGhosts,
+    toggleActive,
+    nextScenario,
+    prevScenario,
+    solidifyGhost,
+    solidifyAllForNode,
+    solidifyAll,
+    close: () => setIsActive(false)
+  };
+}
+
+export {
+  PredictiveGhostNodeCard,
+  PredictiveHudToolbar,
+  PredictiveLayer2D,
+  usePredictiveGraph2D
+};