@ultrst-armada/floks 0.0.0-stage → 1.0.1

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

@@ -0,0 +1,718 @@
+import {
+  Node2DBase,
+  getSocketScreenPosition
+} from "./chunk-U2SC3RMJ.js";
+
+// src/graph-2d/types.ts
+var COORD_SCALE = 40;
+var BIOME_CONFIGS = {
+  zenith: { bg: "#030712", gridColor: "rgba(56, 189, 248, 0.08)", aoeColor: "rgba(56, 189, 248, 0.05)" },
+  nadir: { bg: "#0a0503", gridColor: "rgba(251, 146, 60, 0.08)", aoeColor: "rgba(251, 146, 60, 0.05)" },
+  abyss: { bg: "#020617", gridColor: "rgba(99, 102, 241, 0.08)", aoeColor: "rgba(99, 102, 241, 0.05)" },
+  default: { bg: "#050508", gridColor: "rgba(255, 255, 255, 0.06)", aoeColor: "rgba(255, 255, 255, 0.04)" }
+};
+
+// src/graph-2d/useCanvas2DCoordinates.ts
+import { useState, useRef, useEffect, useCallback } from "react";
+function useCanvas2DCoordinates() {
+  const [camera, setCamera] = useState({ x: 0, y: 0, zoom: 1 });
+  const [containerSize, setContainerSize] = useState({ width: 800, height: 600 });
+  const containerRef = useRef(null);
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setContainerSize({
+          width: entry.contentRect.width,
+          height: entry.contentRect.height
+        });
+      }
+    });
+    observer.observe(containerRef.current);
+    return () => observer.disconnect();
+  }, []);
+  const worldToScreen = useCallback(
+    (wx, wz) => {
+      const cx = containerSize.width / 2;
+      const cy = containerSize.height / 2;
+      return {
+        x: cx + (wx - camera.x) * COORD_SCALE * camera.zoom,
+        y: cy + (wz - camera.y) * COORD_SCALE * camera.zoom
+      };
+    },
+    [camera, containerSize]
+  );
+  const screenToWorld = useCallback(
+    (sx, sy) => {
+      const rect = containerRef.current?.getBoundingClientRect() || { left: 0, top: 0 };
+      const localX = sx - rect.left;
+      const localY = sy - rect.top;
+      const cx = containerSize.width / 2;
+      const cy = containerSize.height / 2;
+      const wx = (localX - cx) / (camera.zoom * COORD_SCALE) + camera.x;
+      const wz = (localY - cy) / (camera.zoom * COORD_SCALE) + camera.y;
+      return [wx, 0, wz];
+    },
+    [camera, containerSize]
+  );
+  const setCameraPosition = useCallback((x, y, zoom) => {
+    setCamera((prev) => ({
+      x,
+      y,
+      zoom: zoom !== void 0 ? zoom : prev.zoom
+    }));
+  }, []);
+  return {
+    camera,
+    setCamera,
+    setCameraPosition,
+    containerSize,
+    containerRef,
+    worldToScreen,
+    screenToWorld
+  };
+}
+
+// src/graph-2d/useCanvas2DMagnetic.ts
+import { useState as useState2, useMemo, useEffect as useEffect2, useCallback as useCallback2, useRef as useRef2 } from "react";
+import { MagneticGraphManager } from "@ultrst-armada/kloks/state-graph";
+function useCanvas2DMagnetic({
+  nodes,
+  connections,
+  camera,
+  setCameraPosition,
+  onMoveNode,
+  onConnectRequest
+}) {
+  const manager = useMemo(() => new MagneticGraphManager(320), []);
+  const [magneticEnabled, setMagneticEnabled] = useState2(true);
+  const [autoSolidifyEnabled, setAutoSolidifyEnabled] = useState2(false);
+  const [activeTraces, setActiveTraces] = useState2([]);
+  const [landmarks, setLandmarks] = useState2([]);
+  const onConnectRequestRef = useRef2(onConnectRequest);
+  onConnectRequestRef.current = onConnectRequest;
+  useEffect2(() => {
+    if (!magneticEnabled) {
+      setActiveTraces((prev) => prev.length === 0 ? prev : []);
+      return;
+    }
+    const traces = manager.computeTraces(nodes);
+    setActiveTraces((prev) => {
+      if (prev.length === 0 && traces.length === 0) return prev;
+      if (prev.length === traces.length && prev.every(
+        (t, i) => t.sourceNodeId === traces[i].sourceNodeId && t.targetNodeId === traces[i].targetNodeId && t.sourceHandleId === traces[i].sourceHandleId && t.targetHandleId === traces[i].targetHandleId
+      )) {
+        return prev;
+      }
+      return traces;
+    });
+    if (autoSolidifyEnabled && traces.length > 0) {
+      const resolved = manager.resolveAutoSolidification(nodes, traces, connections);
+      for (const res of resolved) {
+        const alreadyExists = connections.some(
+          (c) => c.fromNodeId === res.sourceNodeId && c.toNodeId === res.targetNodeId && (c.fromSocketId === res.sourceHandleId || c.fromPort === res.sourceHandleId) && (c.toSocketId === res.targetHandleId || c.toPort === res.targetHandleId)
+        );
+        if (!alreadyExists) {
+          onConnectRequestRef.current(res.sourceNodeId, res.targetNodeId, res.sourceHandleId, res.targetHandleId);
+        }
+      }
+    }
+  }, [nodes, connections, magneticEnabled, autoSolidifyEnabled, manager]);
+  const solidifyTrace = useCallback2(
+    (trace) => {
+      onConnectRequestRef.current(trace.sourceNodeId, trace.targetNodeId, trace.sourceHandleId, trace.targetHandleId);
+    },
+    []
+  );
+  const saveLandmark = useCallback2(
+    (name) => {
+      const lm = manager.saveLandmark(name, camera);
+      setLandmarks(manager.getLandmarks());
+      return lm;
+    },
+    [manager, camera]
+  );
+  const jumpToLandmark = useCallback2(
+    (landmark) => {
+      setCameraPosition(landmark.camera.x, landmark.camera.y, landmark.camera.zoom);
+    },
+    [setCameraPosition]
+  );
+  return {
+    manager,
+    magneticEnabled,
+    setMagneticEnabled,
+    autoSolidifyEnabled,
+    setAutoSolidifyEnabled,
+    activeTraces,
+    solidifyTrace,
+    landmarks,
+    saveLandmark,
+    jumpToLandmark
+  };
+}
+
+// src/graph-2d/NodeRenderer2D.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var TriggerNode2D = (props) => {
+  const trigNode = props.node;
+  const interval = trigNode.intervalBeats || 1;
+  return /* @__PURE__ */ jsx(
+    Node2DBase,
+    {
+      ...props,
+      extraHeaderBadge: /* @__PURE__ */ jsxs("span", { className: "text-[8px] bg-amber-950 border border-amber-500/50 text-amber-300 px-1 py-0.2 rounded font-mono font-bold", children: [
+        interval,
+        " BEATS"
+      ] })
+    }
+  );
+};
+var ContainerNode2D = (props) => {
+  const containerNode = props.node;
+  const cType = containerNode.containerType || "midi";
+  let badge = `${cType.toUpperCase()}`;
+  if (cType === "audio") {
+    badge = containerNode.audioFormat === "stereo" ? "STEREO" : "MONO";
+  }
+  return /* @__PURE__ */ jsx(
+    Node2DBase,
+    {
+      ...props,
+      extraHeaderBadge: /* @__PURE__ */ jsx("span", { className: "text-[8px] bg-sky-950 border border-sky-500/50 text-sky-300 px-1 py-0.2 rounded font-mono font-bold", children: badge })
+    }
+  );
+};
+var ModuleNode2D = (props) => {
+  const modNode = props.node;
+  return /* @__PURE__ */ jsx(
+    Node2DBase,
+    {
+      ...props,
+      extraHeaderBadge: /* @__PURE__ */ jsxs("span", { className: "text-[8px] bg-purple-950 border border-purple-600/60 text-purple-300 px-1 py-0.2 rounded font-bold", children: [
+        modNode.innerNodes?.length || 0,
+        " NODES"
+      ] })
+    }
+  );
+};
+var EffectNode2D = (props) => {
+  const effectNode = props.node;
+  let badgeText = `R: ${effectNode.radius || 6}m`;
+  let badgeColor = "bg-emerald-950 border-emerald-500/50 text-emerald-300";
+  if (effectNode.effectType === "compressor") {
+    const sc = effectNode.compressorConfig?.sidechainEnabled ? " \u2022 SC" : "";
+    badgeText = `${effectNode.compressorConfig?.ratio ?? 4}:1${sc}`;
+    badgeColor = "bg-indigo-950 border-indigo-500/50 text-indigo-300";
+  } else if (effectNode.effectType === "multiband_compressor") {
+    const sc = effectNode.multibandCompressorConfig?.sidechainEnabled ? " \u2022 SC" : "";
+    badgeText = `3-BAND${sc}`;
+    badgeColor = "bg-violet-950 border-violet-500/50 text-violet-300";
+  } else if (effectNode.effectType === "eq") {
+    badgeText = "4-BAND EQ";
+    badgeColor = "bg-teal-950 border-teal-500/50 text-teal-300";
+  } else if (effectNode.effectType === "limiter") {
+    badgeText = `CEIL: ${effectNode.limiterConfig?.ceiling ?? -0.1}dB`;
+    badgeColor = "bg-amber-950 border-amber-500/50 text-amber-300";
+  } else if (effectNode.effectType === "reverb") {
+    badgeText = `${effectNode.reverbConfig?.decayTime ?? 2.5}s`;
+    badgeColor = "bg-purple-950 border-purple-500/50 text-purple-300";
+  } else if (effectNode.effectType === "delay") {
+    badgeText = `${effectNode.delayConfig?.delayBeats ?? 0.5} B`;
+    badgeColor = "bg-blue-950 border-blue-500/50 text-blue-300";
+  } else if (effectNode.effectType === "saturation") {
+    badgeText = (effectNode.saturationConfig?.saturationType || "tape").toUpperCase();
+    badgeColor = "bg-rose-950 border-rose-500/50 text-rose-300";
+  }
+  return /* @__PURE__ */ jsx(
+    Node2DBase,
+    {
+      ...props,
+      extraHeaderBadge: /* @__PURE__ */ jsx("span", { className: `text-[8px] ${badgeColor} border px-1 py-0.2 rounded font-mono font-bold uppercase`, children: badgeText })
+    }
+  );
+};
+var NodeRenderer2D = (props) => {
+  switch (props.node.type) {
+    case "trigger":
+      return /* @__PURE__ */ jsx(TriggerNode2D, { ...props });
+    case "container":
+      return /* @__PURE__ */ jsx(ContainerNode2D, { ...props });
+    case "module":
+      return /* @__PURE__ */ jsx(ModuleNode2D, { ...props });
+    case "effect":
+      return /* @__PURE__ */ jsx(EffectNode2D, { ...props });
+    default:
+      return /* @__PURE__ */ jsx(Node2DBase, { ...props });
+  }
+};
+
+// src/graph-2d/Wire2D.tsx
+import { SIGNAL_TYPES } from "@ultrst-armada/kloks/state-graph";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var Wire2D = ({
+  wire,
+  p1,
+  p2,
+  isSelected = false,
+  isEnveloped = false,
+  isPlaying = false,
+  bpm = 120,
+  pulseAnimTick = 0,
+  zoom = 1,
+  onSelect
+}) => {
+  const { pathD, cp1, cp2 } = wire.calculateCubicBezier2D(p1, p2);
+  const sigDef = SIGNAL_TYPES[wire.signalType] || SIGNAL_TYPES.trigger;
+  const wireColor = isSelected ? "#38bdf8" : sigDef.colorStr;
+  const speed = bpm / 60 * 0.4 * wire.flowSpeedMultiplier;
+  const pulseT = pulseAnimTick * 1e-3 * speed % 1;
+  const pulsePoint = wire.calculatePulsePoint2D(pulseT, p1, p2, cp1, cp2);
+  return /* @__PURE__ */ jsxs2(
+    "g",
+    {
+      id: `wire-2d-${wire.id}`,
+      className: "cursor-pointer group select-none",
+      onClick: (e) => {
+        e.stopPropagation();
+        onSelect?.(wire.id);
+      },
+      children: [
+        isEnveloped && /* @__PURE__ */ jsx2(
+          "path",
+          {
+            d: pathD,
+            fill: "none",
+            stroke: "#fbbf24",
+            strokeWidth: 6 * zoom,
+            strokeOpacity: "0.4",
+            strokeLinecap: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "path",
+          {
+            d: pathD,
+            fill: "none",
+            stroke: "transparent",
+            strokeWidth: 16 * zoom
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "path",
+          {
+            d: pathD,
+            fill: "none",
+            stroke: wireColor,
+            strokeWidth: (isSelected ? 3.5 : 2) * zoom,
+            strokeLinecap: "round",
+            strokeDasharray: isSelected ? "6,3" : void 0,
+            className: "transition-all duration-150 group-hover:stroke-sky-300"
+          }
+        ),
+        isPlaying && /* @__PURE__ */ jsx2(
+          "circle",
+          {
+            cx: pulsePoint.x,
+            cy: pulsePoint.y,
+            r: 3.5 * zoom,
+            fill: wireColor,
+            filter: "drop-shadow(0 0 6px white)"
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/graph-2d/CanvasBackground2D.tsx
+import { useMemo as useMemo2 } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var CanvasBackground2D = ({
+  currentBiome = "default",
+  camera,
+  containerSize,
+  nodes,
+  worldToScreen
+}) => {
+  const biome = BIOME_CONFIGS[currentBiome] || BIOME_CONFIGS.default;
+  const gridLines = useMemo2(() => {
+    const lines = [];
+    const gridSize = 100 * camera.zoom;
+    if (gridSize < 15) return "";
+    const cx = containerSize.width / 2;
+    const cy = containerSize.height / 2;
+    const offsetX = (cx - camera.x * COORD_SCALE * camera.zoom) % gridSize;
+    const offsetY = (cy - camera.y * COORD_SCALE * camera.zoom) % gridSize;
+    for (let x = offsetX - gridSize; x < containerSize.width + gridSize; x += gridSize) {
+      lines.push(`M ${x} 0 V ${containerSize.height}`);
+    }
+    for (let y = offsetY - gridSize; y < containerSize.height + gridSize; y += gridSize) {
+      lines.push(`M 0 ${y} H ${containerSize.width}`);
+    }
+    return lines.join(" ");
+  }, [camera, containerSize]);
+  const uniqueNodes = useMemo2(() => {
+    const seen = /* @__PURE__ */ new Set();
+    return nodes.filter((node) => {
+      if (!node.id) return false;
+      if (seen.has(node.id)) return false;
+      seen.add(node.id);
+      return true;
+    });
+  }, [nodes]);
+  return /* @__PURE__ */ jsxs3(
+    "svg",
+    {
+      className: "absolute inset-0 w-full h-full pointer-events-none",
+      style: { backgroundColor: biome.bg },
+      children: [
+        /* @__PURE__ */ jsx3("path", { d: gridLines, stroke: biome.gridColor, strokeWidth: 1, fill: "none" }),
+        uniqueNodes.map((node) => {
+          const screenPos = worldToScreen(node.position[0], node.position[2]);
+          const nodeRadius = node.aoeRadius || node.radius;
+          const radius = (nodeRadius !== void 0 ? nodeRadius * COORD_SCALE : 120) * camera.zoom;
+          if (radius <= 5) return null;
+          return /* @__PURE__ */ jsx3("g", { opacity: 0.6, children: /* @__PURE__ */ jsx3(
+            "circle",
+            {
+              cx: screenPos.x,
+              cy: screenPos.y,
+              r: radius,
+              fill: biome.aoeColor,
+              stroke: biome.gridColor,
+              strokeWidth: 1,
+              strokeDasharray: "4,4"
+            }
+          ) }, `aoe-${node.id}`);
+        })
+      ]
+    }
+  );
+};
+
+// src/graph-2d/CanvasErrorBoundary.tsx
+import { Component } from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var CanvasErrorBoundary = class extends Component {
+  props;
+  state = { hasError: false, errorMessage: "" };
+  constructor(props) {
+    super(props);
+    this.props = props;
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, errorMessage: error?.message || "Unknown render error" };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error("2D Node Graph Viewer encountered an error:", error, errorInfo);
+  }
+  render() {
+    if (this.state.hasError) {
+      return /* @__PURE__ */ jsx4("div", { className: "w-full h-full flex flex-col items-center justify-center bg-slate-950 p-6 text-center text-slate-300", children: /* @__PURE__ */ jsxs4("div", { className: "max-w-md p-5 rounded-xl border border-red-500/30 bg-red-950/20 backdrop-blur-md", children: [
+        /* @__PURE__ */ jsx4("h3", { className: "text-sm font-semibold text-red-400 mb-2", children: "2D Graph View Recovered" }),
+        /* @__PURE__ */ jsx4("p", { className: "text-xs text-slate-400 mb-4 font-mono", children: this.state.errorMessage }),
+        /* @__PURE__ */ jsx4(
+          "button",
+          {
+            onClick: () => this.setState({ hasError: false, errorMessage: "" }),
+            className: "px-4 py-1.5 text-xs rounded bg-slate-800 hover:bg-slate-700 text-slate-100 border border-slate-600 transition-colors",
+            children: "Reload 2D View"
+          }
+        )
+      ] }) });
+    }
+    return this.props.children;
+  }
+};
+
+// src/graph-2d/MagneticTraces2D.tsx
+import { Link2 } from "lucide-react";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var TRACE_COLORS = {
+  AUDIO_STEREO: "#00ffff",
+  AUDIO_MONO: "#38bdf8",
+  AUDIO_PACKET: "#818cf8",
+  TRIGGER: "#eab308",
+  MIDI_STREAM: "#ec4899",
+  MIDI_PACKET: "#f43f5e",
+  CURVE_STREAM: "#10b981",
+  CURVE_PACKET: "#34d399",
+  COMPONENT: "#a855f7",
+  DEFAULT: "#60a5fa"
+};
+var MagneticTraces2D = ({
+  nodes,
+  connections = [],
+  traces,
+  worldToScreen,
+  camera,
+  onSolidify
+}) => {
+  const nodeMap = new Map(nodes.map((n) => [n.id, n]));
+  const connectedPairSet = /* @__PURE__ */ new Set();
+  connections.forEach((c) => {
+    const fromSock = c.fromSocketId || c.fromPort || "";
+    const toSock = c.toSocketId || c.toPort || "";
+    connectedPairSet.add(`${c.fromNodeId}:${fromSock}->${c.toNodeId}:${toSock}`);
+    connectedPairSet.add(`${c.fromNodeId}->${c.toNodeId}`);
+  });
+  const seenKeys = /* @__PURE__ */ new Set();
+  const visibleTraces = traces.filter((t) => {
+    const keyWithSockets = `${t.sourceNodeId}:${t.sourceHandleId}->${t.targetNodeId}:${t.targetHandleId}`;
+    const keyNodeOnly = `${t.sourceNodeId}->${t.targetNodeId}`;
+    if (connectedPairSet.has(keyWithSockets) || connectedPairSet.has(keyNodeOnly)) {
+      return false;
+    }
+    const traceUniqueId = t.id || keyWithSockets;
+    if (seenKeys.has(traceUniqueId)) {
+      return false;
+    }
+    seenKeys.add(traceUniqueId);
+    return true;
+  });
+  if (visibleTraces.length === 0) return null;
+  return /* @__PURE__ */ jsxs5("div", { className: "absolute inset-0 pointer-events-none", children: [
+    /* @__PURE__ */ jsx5("svg", { className: "w-full h-full", children: visibleTraces.map((trace) => {
+      const source = nodeMap.get(trace.sourceNodeId);
+      const target = nodeMap.get(trace.targetNodeId);
+      if (!source || !target) return null;
+      const p1 = getSocketScreenPosition(source, trace.sourceHandleId, true, worldToScreen, camera);
+      const p2 = getSocketScreenPosition(target, trace.targetHandleId, false, worldToScreen, camera);
+      const color = TRACE_COLORS[trace.wireType] || TRACE_COLORS.DEFAULT;
+      const proximityOpacity = Math.max(0.35, Math.min(0.9, 1 - trace.spatialScore / 360));
+      return /* @__PURE__ */ jsx5("g", { children: /* @__PURE__ */ jsx5(
+        "line",
+        {
+          x1: p1.x,
+          y1: p1.y,
+          x2: p2.x,
+          y2: p2.y,
+          stroke: color,
+          strokeWidth: 1.5,
+          opacity: proximityOpacity
+        }
+      ) }, trace.id);
+    }) }),
+    visibleTraces.map((trace) => {
+      const source = nodeMap.get(trace.sourceNodeId);
+      const target = nodeMap.get(trace.targetNodeId);
+      if (!source || !target) return null;
+      const p1 = getSocketScreenPosition(source, trace.sourceHandleId, true, worldToScreen, camera);
+      const p2 = getSocketScreenPosition(target, trace.targetHandleId, false, worldToScreen, camera);
+      const midX = (p1.x + p2.x) / 2;
+      const midY = (p1.y + p2.y) / 2;
+      return /* @__PURE__ */ jsx5(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            left: `${midX}px`,
+            top: `${midY}px`,
+            transform: "translate(-50%, -50%)"
+          },
+          className: "pointer-events-auto z-20 group",
+          children: /* @__PURE__ */ jsx5(
+            "button",
+            {
+              onMouseDown: (e) => {
+                e.stopPropagation();
+                e.preventDefault();
+              },
+              onPointerDown: (e) => {
+                e.stopPropagation();
+              },
+              onClick: (e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                onSolidify(trace);
+              },
+              className: "w-7 h-7 rounded-full bg-slate-950 border-2 border-cyan-400/80 text-cyan-300 hover:text-white hover:bg-cyan-950 hover:border-cyan-200 hover:scale-125 shadow-[0_0_12px_rgba(6,182,212,0.6)] flex items-center justify-center transition-all cursor-pointer group/btn",
+              title: `Solidify magnetic connection: ${trace.sourceHandleId} -> ${trace.targetHandleId}`,
+              children: /* @__PURE__ */ jsx5(Link2, { className: "w-3.5 h-3.5 text-cyan-400 group-hover/btn:scale-110" })
+            }
+          )
+        },
+        `widget-${trace.id}`
+      );
+    })
+  ] });
+};
+
+// src/graph-2d/RotaryKnob.tsx
+import { useRef as useRef3, useCallback as useCallback3, useState as useState3 } from "react";
+import { describeSvgArc } from "@ultrst-armada/kloks/state-graph";
+import { usePalette } from "@ultrst-armada/floks/ui";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function RotaryKnob({
+  value,
+  min = 0,
+  max = 1,
+  step,
+  defaultValue,
+  onChange,
+  size = 38,
+  color,
+  trackColor,
+  label,
+  unit = "",
+  formatValue,
+  title,
+  disabled = false,
+  className = ""
+}) {
+  const palette = usePalette();
+  const effectiveColor = color || palette.accentPrimary;
+  const effectiveTrackColor = trackColor || palette.borderSubtle;
+  const knobRef = useRef3(null);
+  const isDraggingRef = useRef3(false);
+  const startYRef = useRef3(0);
+  const startValRef = useRef3(value);
+  const [isHovered, setIsHovered] = useState3(false);
+  const [isEngaged, setIsEngaged] = useState3(false);
+  const clampedVal = Math.min(max, Math.max(min, value));
+  const range = max - min || 1;
+  const normalized = (clampedVal - min) / range;
+  const minAngle = -135;
+  const maxAngle = 135;
+  const currentAngle = minAngle + normalized * (maxAngle - minAngle);
+  const strokeWidth = Math.max(2.5, size * 0.08);
+  const radius = (size - strokeWidth * 2) / 2;
+  const cx = size / 2;
+  const cy = size / 2;
+  const bgArc = describeSvgArc(cx, cy, radius, minAngle, maxAngle);
+  const valArc = normalized > 5e-3 ? describeSvgArc(cx, cy, radius, minAngle, currentAngle) : "";
+  const snapValue = useCallback3((raw) => {
+    let v = Math.min(max, Math.max(min, raw));
+    if (step && step > 0) v = Math.round((v - min) / step) * step + min;
+    return parseFloat(v.toFixed(4));
+  }, [min, max, step]);
+  const handlePointerDown = (e) => {
+    if (disabled) return;
+    e.preventDefault();
+    e.stopPropagation();
+    isDraggingRef.current = true;
+    startYRef.current = e.clientY;
+    startValRef.current = clampedVal;
+    setIsEngaged(true);
+    knobRef.current?.setPointerCapture(e.pointerId);
+  };
+  const handlePointerMove = (e) => {
+    if (!isDraggingRef.current || disabled) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const sensitivity = e.shiftKey ? 400 : 150;
+    const deltaVal = (startYRef.current - e.clientY) / sensitivity * range;
+    const newVal = snapValue(startValRef.current + deltaVal);
+    if (newVal !== clampedVal) onChange(newVal);
+  };
+  const handlePointerUp = (e) => {
+    if (isDraggingRef.current) {
+      isDraggingRef.current = false;
+      setIsEngaged(false);
+      try {
+        knobRef.current?.releasePointerCapture(e.pointerId);
+      } catch {
+      }
+    }
+  };
+  const handleWheel = (e) => {
+    if (disabled) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const newVal = snapValue(clampedVal - Math.sign(e.deltaY) * (step || range * 0.02));
+    if (newVal !== clampedVal) onChange(newVal);
+  };
+  const formattedDisplay = formatValue ? formatValue(clampedVal) : unit === "%" ? `${Math.round(clampedVal * 100)}%` : unit ? `${clampedVal.toFixed(step && step < 0.1 ? 2 : 1)}${unit}` : typeof clampedVal === "number" && Number.isInteger(clampedVal) ? `${clampedVal}` : `${clampedVal.toFixed(2)}`;
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: `inline-flex flex-col items-center select-none font-mono ${disabled ? "opacity-40 cursor-not-allowed" : "cursor-ns-resize"} ${className}`,
+      title: title || (label ? `${label}: ${formattedDisplay}` : formattedDisplay),
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      children: [
+        label && /* @__PURE__ */ jsx6("span", { style: { color: palette.textMuted }, className: "text-[9px] uppercase font-bold tracking-wider mb-1 text-center truncate max-w-[80px]", children: label }),
+        /* @__PURE__ */ jsxs6(
+          "div",
+          {
+            ref: knobRef,
+            onPointerDown: handlePointerDown,
+            onPointerMove: handlePointerMove,
+            onPointerUp: handlePointerUp,
+            onPointerCancel: handlePointerUp,
+            onWheel: handleWheel,
+            onDoubleClick: (e) => {
+              if (!disabled && defaultValue !== void 0) {
+                e.stopPropagation();
+                onChange(defaultValue);
+              }
+            },
+            style: { width: size, height: size },
+            className: "relative flex items-center justify-center touch-none group",
+            children: [
+              /* @__PURE__ */ jsxs6("svg", { width: size, height: size, className: "overflow-visible", children: [
+                /* @__PURE__ */ jsx6("path", { d: bgArc, fill: "none", stroke: effectiveTrackColor, strokeWidth, strokeLinecap: "round" }),
+                normalized > 5e-3 && /* @__PURE__ */ jsx6(
+                  "path",
+                  {
+                    d: valArc,
+                    fill: "none",
+                    stroke: effectiveColor,
+                    strokeWidth,
+                    strokeLinecap: "round",
+                    className: "transition-all duration-75",
+                    style: { filter: isEngaged || isHovered ? `drop-shadow(0 0 4px ${effectiveColor})` : void 0 }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx6(
+                "div",
+                {
+                  style: {
+                    width: size - strokeWidth * 3.2,
+                    height: size - strokeWidth * 3.2,
+                    transform: `rotate(${currentAngle}deg)`,
+                    borderColor: isEngaged ? effectiveColor : isHovered ? palette.borderBold : palette.borderMedium,
+                    backgroundColor: palette.bgSurface
+                  },
+                  className: "absolute rounded-full border flex items-start justify-center transition-colors duration-150",
+                  children: /* @__PURE__ */ jsx6(
+                    "div",
+                    {
+                      style: {
+                        backgroundColor: effectiveColor,
+                        width: Math.max(2, size * 0.06),
+                        height: size * 0.24,
+                        boxShadow: `0 0 5px ${effectiveColor}`
+                      },
+                      className: "mt-0.5 rounded-full"
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx6("span", { style: { color: isEngaged ? effectiveColor : palette.textSecondary }, className: "text-[10px] font-bold mt-1 text-center transition-colors", children: formattedDisplay })
+      ]
+    }
+  );
+}
+
+export {
+  COORD_SCALE,
+  BIOME_CONFIGS,
+  useCanvas2DCoordinates,
+  useCanvas2DMagnetic,
+  TriggerNode2D,
+  ContainerNode2D,
+  ModuleNode2D,
+  EffectNode2D,
+  NodeRenderer2D,
+  Wire2D,
+  CanvasBackground2D,
+  CanvasErrorBoundary,
+  MagneticTraces2D,
+  RotaryKnob
+};