@ultrst-armada/floks 0.0.0-stage → 1.0.1

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-U2SC3RMJ.js

@@ -0,0 +1,391 @@
+// src/graph-2d/socketCoordinates.ts
+import { getNodeSockets } from "@ultrst-armada/kloks/state-graph";
+import { GraphNodeParent } from "@ultrst-armada/kloks/state-graph";
+function getSocketLocalOffset(node, socketId, isOutput, index, totalSockets) {
+  const isCustomBox = node.type === "arrangement" || node.type === "code";
+  const clearance = isCustomBox ? 16 : 14;
+  return GraphNodeParent.calculateConstrainedSocketOffset(
+    node,
+    socketId,
+    isOutput,
+    index,
+    totalSockets,
+    clearance
+  );
+}
+function getSocketScreenPosition(node, socketId, isOutput, worldToScreen, camera) {
+  const center = worldToScreen(node.position[0], node.position[2]);
+  const { inputs, outputs } = getNodeSockets(node);
+  const sockets = isOutput ? outputs : inputs;
+  if (sockets.length === 0) {
+    return center;
+  }
+  let idx = -1;
+  if (socketId) {
+    idx = sockets.findIndex((s) => s.socketId === socketId);
+  }
+  const validIdx = idx >= 0 ? idx : 0;
+  const targetSocket = sockets[validIdx];
+  const localOffset = getSocketLocalOffset(
+    node,
+    targetSocket.socketId,
+    isOutput,
+    validIdx,
+    sockets.length
+  );
+  return {
+    x: center.x + localOffset.x * camera.zoom,
+    y: center.y + localOffset.y * camera.zoom
+  };
+}
+
+// src/graph-2d/Socket2D.tsx
+import { SIGNAL_TYPES } from "@ultrst-armada/kloks/state-graph";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Socket2D = ({
+  nodeId,
+  socket,
+  direction,
+  isConnected = false,
+  onSocketHover,
+  onSocketMouseDown,
+  onSocketMouseUp,
+  onHover,
+  onMouseDown,
+  onMouseUp
+}) => {
+  const sigDef = SIGNAL_TYPES[socket.signalType] || SIGNAL_TYPES.trigger;
+  const colorStr = sigDef.colorStr;
+  const resolvedDirection = direction || (socket.polarity === "input" ? "in" : "out");
+  const isInput = resolvedDirection === "in";
+  const portKey = socket.portId || socket.socketId;
+  const hoverCb = onSocketHover || onHover;
+  const downCb = onSocketMouseDown || onMouseDown;
+  const upCb = onSocketMouseUp || onMouseUp;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id: `socket-2d-${nodeId}-${resolvedDirection}-${portKey}`,
+      className: `flex items-center gap-1.5 cursor-pointer group/sock select-none ${isInput ? "justify-start" : "justify-end ml-auto"}`,
+      onMouseEnter: (e) => {
+        const rect = e.currentTarget.getBoundingClientRect();
+        hoverCb?.({
+          nodeId,
+          socket,
+          screenX: isInput ? rect.left : rect.right,
+          screenY: rect.top
+        });
+      },
+      onMouseLeave: () => hoverCb?.(null),
+      onMouseDown: (e) => {
+        e.stopPropagation();
+        downCb?.(nodeId, socket, e);
+      },
+      onMouseUp: (e) => {
+        e.stopPropagation();
+        upCb?.(nodeId, socket, e);
+      },
+      children: [
+        isInput && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: { backgroundColor: colorStr },
+            className: `w-2.5 h-2.5 rounded-full border border-black group-hover/sock:scale-130 transition-transform ${isConnected ? "ring-1 ring-white/60" : "opacity-85"}`
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "font-mono font-bold text-[9px] text-neutral-300 group-hover/sock:text-amber-300 tracking-tight", children: socket.label }),
+        !isInput && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: { backgroundColor: colorStr },
+            className: `w-2.5 h-2.5 rotate-45 border border-black group-hover/sock:scale-130 transition-transform ${isConnected ? "ring-1 ring-white/60" : "opacity-85"}`
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/graph-2d/RecorderWaveformDisplay.tsx
+import { useState, useEffect, useRef } from "react";
+import { retrospectiveBufferEngine } from "@ultrst-armada/kloks/audio-midi";
+import { sequencerEngine } from "@ultrst-armada/kloks/audio-midi";
+import { synthEngine } from "@ultrst-armada/kloks/audio-midi";
+import * as GraphConcepts from "@ultrst-armada/kloks/state-graph";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function buildWaveformPath(peaks, width, height) {
+  if (!peaks || peaks.length === 0) return `M 0 ${height / 2} L ${width} ${height / 2}`;
+  const step = width / Math.max(1, peaks.length - 1);
+  const midY = height / 2;
+  let topPoints = "";
+  let bottomPoints = "";
+  for (let i = 0; i < peaks.length; i++) {
+    const x = Math.round(i * step * 10) / 10;
+    const amp = Math.max(0.08, Math.min(1, peaks[i] || 0.08)) * (midY - 2);
+    topPoints += `${i === 0 ? "M" : "L"} ${x} ${midY - amp} `;
+    bottomPoints = `L ${x} ${midY + amp} ` + bottomPoints;
+  }
+  return `${topPoints} ${bottomPoints} Z`;
+}
+var RecorderWaveformDisplay = ({
+  node,
+  connections = [],
+  allNodes = [],
+  width = 150
+}) => {
+  const [currentBeat, setCurrentBeat] = useState(0);
+  const [capturedFlash, setCapturedFlash] = useState(false);
+  const [livePeaksL, setLivePeaksL] = useState([]);
+  const [livePeaksR, setLivePeaksR] = useState([]);
+  const lastBeatRef = useRef(0);
+  const isArmed = !!node.isArmed;
+  const isRetrospective = node.recordingMode === "retrospective";
+  const isRecording = !isRetrospective && !!node.isRecording;
+  const isStereo = node.recorderType !== "audio_mono";
+  useEffect(() => {
+    return retrospectiveBufferEngine.onSnapshotCaptured((recId) => {
+      if (recId === node.id) {
+        setCapturedFlash(true);
+        setTimeout(() => setCapturedFlash(false), 1200);
+      }
+    });
+  }, [node.id]);
+  useEffect(() => {
+    if (!isArmed) return;
+    let animId;
+    let lastSampleTime = 0;
+    const sourceNode = GraphConcepts.findSourceNode?.(node.id, "stream_in", connections, allNodes);
+    const incomingWire = connections.find(
+      (c) => c.toNodeId === node.id && (c.toPort === "stream_in" || c.toSocketIndex === 0 || !c.toPort)
+    );
+    const tick = (time) => {
+      const beat = sequencerEngine.currentBeat;
+      setCurrentBeat(beat);
+      if (time - lastSampleTime >= 40) {
+        lastSampleTime = time;
+        const gainVal = node.gain ?? 1;
+        const levels = sourceNode ? synthEngine.getWireSignalLevel(sourceNode, incomingWire?.fromPort) : { left: 0, right: 0 };
+        const pL = Math.min(1, levels.left * gainVal);
+        const pR = Math.min(1, levels.right * gainVal);
+        if (isRecording) {
+          setLivePeaksL((prev) => [...prev.slice(-63), pL]);
+          setLivePeaksR((prev) => [...prev.slice(-63), pR]);
+        } else if (isRetrospective) {
+          setLivePeaksL((prev) => [...prev.slice(-39), pL]);
+          setLivePeaksR((prev) => [...prev.slice(-39), pR]);
+        }
+      }
+      animId = requestAnimationFrame(tick);
+    };
+    const currentBeatVal = sequencerEngine.currentBeat;
+    if (isRecording && Math.abs(currentBeatVal - lastBeatRef.current) > 0.5) {
+      setLivePeaksL([]);
+      setLivePeaksR([]);
+    }
+    lastBeatRef.current = currentBeatVal;
+    animId = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(animId);
+  }, [isArmed, isRecording, isRetrospective, node.id, node.gain, connections, allNodes]);
+  if (!isArmed) return null;
+  const elapsedBeats = isRecording ? Math.max(0, currentBeat - (node.recordingStartBeat || 0)) : 0;
+  const bars = Math.floor(elapsedBeats / 4);
+  const beatsInBar = (elapsedBeats % 4).toFixed(1);
+  const timeText = isRecording ? `${bars} BAR${bars === 1 ? "" : "S"} ${beatsInBar} BEATS` : isRetrospective ? `${node.bufferLengthBars ?? 4} BARS BUFFER` : "1 BAR PREVIEW";
+  const isRedState = isRecording || isRetrospective && capturedFlash;
+  const colorStroke = isRedState ? "#f43f5e" : "#94a3b8";
+  const colorFill = isRedState ? "rgba(244, 63, 94, 0.25)" : "rgba(148, 163, 184, 0.15)";
+  const glowShadow = isRedState ? "0 0 8px rgba(244, 63, 94, 0.6)" : "none";
+  const renderPeaksL = isRecording || isRetrospective ? livePeaksL.length > 0 ? livePeaksL : [0.15, 0.3, 0.2, 0.4, 0.2, 0.15] : [0.15, 0.3, 0.25, 0.5, 0.3, 0.4, 0.2, 0.15];
+  const renderPeaksR = isRecording || isRetrospective ? livePeaksR.length > 0 ? livePeaksR : [0.12, 0.28, 0.18, 0.38, 0.22, 0.14] : [0.12, 0.28, 0.22, 0.45, 0.28, 0.35, 0.18, 0.12];
+  const trackHeight = isStereo ? 18 : 36;
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: "flex flex-col items-center justify-center w-full px-1 py-1 rounded bg-black/60 border border-slate-800 select-none overflow-hidden",
+      style: { boxShadow: glowShadow },
+      children: [
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between w-full px-1 mb-0.5 text-[8px] font-mono font-bold tracking-tight", children: [
+          /* @__PURE__ */ jsx2("span", { className: isRedState ? "text-rose-400 animate-pulse" : "text-slate-400", children: isRedState ? "\u25CF REC" : isRetrospective ? "\u25CF BUFFER" : "ARMED" }),
+          /* @__PURE__ */ jsx2("span", { className: isRedState ? "text-rose-300 font-extrabold" : "text-slate-400", children: timeText })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-0.5 w-full", children: [
+          /* @__PURE__ */ jsxs2("div", { className: `relative w-full ${isStereo ? "h-[18px]" : "h-[36px]"} bg-slate-950/80 rounded border border-slate-800/80 overflow-hidden`, children: [
+            isStereo && /* @__PURE__ */ jsx2("span", { className: "absolute top-0.5 left-1 text-[7px] font-mono font-bold text-slate-500 z-10", children: "L" }),
+            /* @__PURE__ */ jsx2("svg", { className: "w-full h-full", viewBox: `0 0 ${width} ${trackHeight}`, preserveAspectRatio: "none", children: /* @__PURE__ */ jsx2("path", { d: buildWaveformPath(renderPeaksL, width, trackHeight), fill: colorFill, stroke: colorStroke, strokeWidth: "1.2" }) })
+          ] }),
+          isStereo && /* @__PURE__ */ jsxs2("div", { className: "relative w-full h-[18px] bg-slate-950/80 rounded border border-slate-800/80 overflow-hidden", children: [
+            /* @__PURE__ */ jsx2("span", { className: "absolute top-0.5 left-1 text-[7px] font-mono font-bold text-slate-500 z-10", children: "R" }),
+            /* @__PURE__ */ jsx2("svg", { className: "w-full h-full", viewBox: `0 0 ${width} ${trackHeight}`, preserveAspectRatio: "none", children: /* @__PURE__ */ jsx2("path", { d: buildWaveformPath(renderPeaksR, width, trackHeight), fill: colorFill, stroke: colorStroke, strokeWidth: "1.2" }) })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/graph-2d/Node2DBase.tsx
+import {
+  Castle,
+  Sparkles,
+  Flame,
+  FileAudio,
+  Activity,
+  Layers,
+  Music,
+  Clock,
+  RotateCw,
+  Volume2,
+  Zap,
+  Radio,
+  LogIn,
+  LogOut,
+  GitMerge,
+  Split,
+  Cpu,
+  Repeat,
+  Type,
+  Hash,
+  ToggleLeft,
+  Braces,
+  Folder,
+  FileText
+} from "lucide-react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var NODE_CARD_WIDTH = 210;
+var SOCKET_ROW_HEIGHT = 24;
+var renderSpriteIcon = (iconName, color, className = "w-4 h-4 shrink-0") => {
+  const props = { className, style: { color } };
+  switch (iconName) {
+    case "Castle":
+      return /* @__PURE__ */ jsx3(Castle, { ...props });
+    case "Sparkles":
+      return /* @__PURE__ */ jsx3(Sparkles, { ...props });
+    case "Flame":
+      return /* @__PURE__ */ jsx3(Flame, { ...props });
+    case "FileAudio":
+      return /* @__PURE__ */ jsx3(FileAudio, { ...props });
+    case "Activity":
+      return /* @__PURE__ */ jsx3(Activity, { ...props });
+    case "Layers":
+      return /* @__PURE__ */ jsx3(Layers, { ...props });
+    case "Music":
+      return /* @__PURE__ */ jsx3(Music, { ...props });
+    case "Clock":
+      return /* @__PURE__ */ jsx3(Clock, { ...props });
+    case "RotateCw":
+      return /* @__PURE__ */ jsx3(RotateCw, { ...props });
+    case "Volume2":
+      return /* @__PURE__ */ jsx3(Volume2, { ...props });
+    case "Zap":
+      return /* @__PURE__ */ jsx3(Zap, { ...props });
+    case "Radio":
+      return /* @__PURE__ */ jsx3(Radio, { ...props });
+    case "LogIn":
+      return /* @__PURE__ */ jsx3(LogIn, { ...props });
+    case "LogOut":
+      return /* @__PURE__ */ jsx3(LogOut, { ...props });
+    case "GitMerge":
+      return /* @__PURE__ */ jsx3(GitMerge, { ...props });
+    case "Split":
+      return /* @__PURE__ */ jsx3(Split, { ...props });
+    case "Cpu":
+      return /* @__PURE__ */ jsx3(Cpu, { ...props });
+    case "Repeat":
+      return /* @__PURE__ */ jsx3(Repeat, { ...props });
+    case "Type":
+      return /* @__PURE__ */ jsx3(Type, { ...props });
+    case "Hash":
+      return /* @__PURE__ */ jsx3(Hash, { ...props });
+    case "ToggleLeft":
+      return /* @__PURE__ */ jsx3(ToggleLeft, { ...props });
+    case "Braces":
+      return /* @__PURE__ */ jsx3(Braces, { ...props });
+    case "Folder":
+      return /* @__PURE__ */ jsx3(Folder, { ...props });
+    case "FileText":
+      return /* @__PURE__ */ jsx3(FileText, { ...props });
+    default:
+      return /* @__PURE__ */ jsx3(Castle, { ...props });
+  }
+};
+var Node2DBase = ({
+  node,
+  sprite,
+  sockets,
+  screenPos,
+  zoom,
+  isSelected,
+  isHovered,
+  children,
+  onNodeMouseDown,
+  onNodeDoubleClick,
+  onNodeMouseEnter,
+  onNodeMouseLeave,
+  onSocketHover,
+  onSocketMouseDown,
+  onSocketMouseUp
+}) => {
+  const totalRows = Math.max(sockets.inputs.length, sockets.outputs.length, 1);
+  const cardHeight = Math.max(70, 36 + totalRows * SOCKET_ROW_HEIGHT);
+  const nodeInspectionText = `NODE: ${node.name || sprite.spriteName || node.type} (${(node.type || "NODE").toUpperCase()})`;
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      id: `floks-node-2d-${node.id}`,
+      "data-skipo-tip": nodeInspectionText,
+      title: nodeInspectionText,
+      onMouseEnter: onNodeMouseEnter,
+      onMouseLeave: onNodeMouseLeave,
+      onMouseDown: onNodeMouseDown,
+      onDoubleClick: onNodeDoubleClick,
+      style: {
+        transform: `translate(${screenPos.x}px, ${screenPos.y}px) translate(-50%, -50%) scale(${zoom})`,
+        width: NODE_CARD_WIDTH,
+        minHeight: cardHeight,
+        boxShadow: isSelected ? `0 0 0 2px #38bdf8, 4px 4px 0px #000000, 0 0 16px ${sprite.glowColor}` : `4px 4px 0px #000000, 0 0 10px ${isHovered ? sprite.glowColor : "rgba(0,0,0,0.5)"}`
+      },
+      className: `absolute flex flex-col bg-[#0b0e17]/95 border-2 rounded-none transition-transform select-none cursor-move z-20 ${isSelected ? "border-sky-400 bg-[#0f172a]" : isHovered ? "border-amber-400" : "border-[#334155]"}`,
+      children: [
+        node.type === "recorder" && node.isArmed ? /* @__PURE__ */ jsx3("div", { className: "w-full px-2 py-1 my-auto", children: /* @__PURE__ */ jsx3(RecorderWaveformDisplay, { node, width: 180 }) }) : /* @__PURE__ */ jsx3("div", { className: "flex items-center justify-center p-3 flex-1 my-auto", children: renderSpriteIcon(sprite.iconName, sprite.accentColor, "w-7 h-7 shrink-0") }),
+        children,
+        /* @__PURE__ */ jsx3("div", { className: "flex flex-col gap-1 px-1.5 py-1.5 mt-auto border-t border-[#1e293b] bg-black/40", children: Array.from({ length: totalRows }).map((_, rowIdx) => {
+          const inSock = sockets.inputs[rowIdx];
+          const outSock = sockets.outputs[rowIdx];
+          return /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between gap-1 text-[9px] h-5", children: [
+            inSock ? /* @__PURE__ */ jsx3(
+              Socket2D,
+              {
+                nodeId: node.id,
+                socket: inSock,
+                onHover: (info) => onSocketHover?.(info),
+                onMouseDown: (nodeId, sock, e) => onSocketMouseDown?.(nodeId, sock, e),
+                onMouseUp: (nodeId, sock, e) => onSocketMouseUp?.(nodeId, sock, e)
+              }
+            ) : /* @__PURE__ */ jsx3("div", {}),
+            outSock ? /* @__PURE__ */ jsx3(
+              Socket2D,
+              {
+                nodeId: node.id,
+                socket: outSock,
+                onHover: (info) => onSocketHover?.(info),
+                onMouseDown: (nodeId, sock, e) => onSocketMouseDown?.(nodeId, sock, e),
+                onMouseUp: (nodeId, sock, e) => onSocketMouseUp?.(nodeId, sock, e)
+              }
+            ) : /* @__PURE__ */ jsx3("div", {})
+          ] }, `socket-row-${rowIdx}`);
+        }) })
+      ]
+    }
+  );
+};
+
+export {
+  getSocketLocalOffset,
+  getSocketScreenPosition,
+  Socket2D,
+  RecorderWaveformDisplay,
+  NODE_CARD_WIDTH,
+  SOCKET_ROW_HEIGHT,
+  renderSpriteIcon,
+  Node2DBase
+};