@ultrst-armada/floks 0.0.0-stage → 1.0.0

package/README.md

@@ -1,3 +1,2 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+# Floks
+This will be the counterpart Kloks but for the frontend components. This will store the canonical frontend elements that we will use in our Skipo projects. 

package/index.d.ts

@@ -0,0 +1,2 @@
+export * from './packages/ui/dist/index.d.ts';
+export * from './packages/canvas-ui/dist/index.d.ts';

package/index.js

@@ -0,0 +1,2 @@
+export * from './packages/ui/dist/index.js';
+export * from './packages/canvas-ui/dist/index.js';

package/package.json

@@ -1,6 +1,69 @@
 {
   "name": "@ultrst-armada/floks",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.0",
+  "private": false,
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "description": "Floks — Public Frontend, 2D Graph & UI Package Library (@floks/*)",
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "files": [
+    "index.js",
+    "index.d.ts",
+    "packages/*/dist/**",
+    "packages/*/src/theme/tokens.css",
+    "packages/*/src/styles/**",
+    "packages/*/package.json",
+    "packages/*/floks.manifest.json"
+  ],
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "default": "./index.js"
+    },
+    "./ui": {
+      "types": "./packages/ui/dist/index.d.ts",
+      "import": "./packages/ui/dist/index.js",
+      "default": "./packages/ui/dist/index.js"
+    },
+    "./ui/theme/tokens.css": "./packages/ui/src/theme/tokens.css",
+    "./ui/styles/*": "./packages/ui/src/styles/*",
+    "./canvas-ui": {
+      "types": "./packages/canvas-ui/dist/index.d.ts",
+      "import": "./packages/canvas-ui/dist/index.js",
+      "default": "./packages/canvas-ui/dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "pnpm -r run build",
+    "postbuild": "node -e \"import('fs').then(fs => { for (const pkg of fs.readdirSync('packages')) { const d = 'packages/' + pkg + '/dist'; if (!fs.existsSync(d)) continue; for (const f of fs.readdirSync(d, { recursive: true })) { const p = d + '/' + f; if (fs.statSync(p).isFile() && (p.endsWith('.js') || p.endsWith('.d.ts'))) { const c = fs.readFileSync(p, 'utf8'); const n = c.replaceAll('@kloks/', '@ultrst-armada/kloks/').replaceAll('@floks/', '@ultrst-armada/floks/').replaceAll('@ultrst/kloks/', '@ultrst-armada/kloks/').replaceAll('@ultrst/floks/', '@ultrst-armada/floks/').replaceAll('\\\"kloks/', '\\\"@ultrst-armada/kloks/').replaceAll('\\'kloks/', '\\'@ultrst-armada/kloks/').replaceAll('\\\"floks/', '\\\"@ultrst-armada/floks/').replaceAll('\\'floks/', '\\'@ultrst-armada/floks/'); if (c !== n) fs.writeFileSync(p, n); } } } })\"",
+    "test": "vitest run",
+    "typecheck": "pnpm -r run typecheck",
+    "clean": "pnpm -r run clean"
+  },
+  "dependencies": {
+    "zod": "^3.24.1"
+  },
+  "peerDependencies": {
+    "lucide-react": ">=0.300.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "lucide-react": "^1.55.0",
+    "react": "^19.0.1",
+    "react-dom": "^19.0.1",
+    "tsup": "^8.4.0",
+    "typescript": "^5.7.3",
+    "vitest": "^3.1.0"
+  },
+  "packageManager": "pnpm@9.15.0"
+}

package/packages/canvas-ui/dist/canvas/index.d.ts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import React__default from 'react';
+
+interface Transform {
+    x: number;
+    y: number;
+    scale: number;
+}
+interface CanvasItem {
+    id: string;
+    x: number;
+    y: number;
+    width?: number;
+    height?: number;
+    content: React.ReactNode;
+}
+
+interface CanvasViewportProps {
+    children: React__default.ReactNode;
+    transform: Transform;
+    onChange: (t: Transform) => void;
+    minZoom?: number;
+    maxZoom?: number;
+}
+declare function CanvasViewport({ children, transform, onChange, minZoom, maxZoom }: CanvasViewportProps): React__default.JSX.Element;
+
+interface InfiniteCanvasProps {
+    items: CanvasItem[];
+    transform: Transform;
+    onTransformChange: (t: Transform) => void;
+    showGrid?: boolean;
+    showMiniMap?: boolean;
+    gridSize?: number;
+}
+declare function InfiniteCanvas({ items, transform, onTransformChange, showGrid, showMiniMap, gridSize }: InfiniteCanvasProps): React.JSX.Element;
+
+interface MiniMapProps {
+    items: CanvasItem[];
+    transform: Transform;
+    width?: number;
+    height?: number;
+}
+declare function MiniMap({ items, transform, width, height }: MiniMapProps): React.JSX.Element;
+
+declare function useCanvas(initialTransform?: Transform): {
+    transform: Transform;
+    setTransform: React.Dispatch<React.SetStateAction<Transform>>;
+    items: CanvasItem[];
+    setItems: React.Dispatch<React.SetStateAction<CanvasItem[]>>;
+    addItem: (item: CanvasItem) => void;
+    updateItemPosition: (id: string, x: number, y: number) => void;
+};
+
+export { type CanvasItem, CanvasViewport, InfiniteCanvas, MiniMap, type Transform, useCanvas };

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

@@ -0,0 +1,12 @@
+import {
+  CanvasViewport,
+  InfiniteCanvas,
+  MiniMap,
+  useCanvas
+} from "../chunk-34YRDZPJ.js";
+export {
+  CanvasViewport,
+  InfiniteCanvas,
+  MiniMap,
+  useCanvas
+};

package/packages/canvas-ui/dist/chunk-2GLR35UM.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: `qwnsr-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
+};