@elabs-ai/components-flow 4.1.0 → 5.0.0

package/dist/index.js

@@ -1,2318 +1,174 @@
 "use client";
-
-// src/canvas-shell/canvas-shell.tsx
-import { useEffect } from "react";
+import "./chunk-3LK6OOXE.js";
 import {
-  Background,
-  ReactFlow,
-  ReactFlowProvider,
-  useNodesInitialized,
-  useReactFlow as useReactFlow2,
-  useStoreApi
-} from "@xyflow/react";
-import { cn as cn2 } from "@elabs-ai/components-ui/lib/cn";
-
-// src/helper-lines/helper-lines.tsx
-import { forwardRef } from "react";
-import { useViewport } from "@xyflow/react";
-import { cn } from "@elabs-ai/components-ui/lib/cn";
-import { jsx, jsxs } from "react/jsx-runtime";
-var HelperLines = forwardRef(function HelperLines2({ horizontal, vertical, className, ...props }, ref) {
-  const { x, y, zoom } = useViewport();
-  if (horizontal == null && vertical == null) return null;
-  const screenY = horizontal == null ? null : y + horizontal * zoom;
-  const screenX = vertical == null ? null : x + vertical * zoom;
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      ref,
-      "aria-hidden": "true",
-      width: "100%",
-      height: "100%",
-      className: cn("pointer-events-none absolute inset-0 size-full", className),
-      ...props,
-      children: [
-        screenY != null ? /* @__PURE__ */ jsx(
-          "line",
-          {
-            x1: 0,
-            x2: "100%",
-            y1: screenY,
-            y2: screenY,
-            stroke: "var(--flow-helper-line, var(--primary))",
-            strokeWidth: 1
-          }
-        ) : null,
-        screenX != null ? /* @__PURE__ */ jsx(
-          "line",
-          {
-            x1: screenX,
-            x2: screenX,
-            y1: 0,
-            y2: "100%",
-            stroke: "var(--flow-helper-line, var(--primary))",
-            strokeWidth: 1
-          }
-        ) : null
-      ]
-    }
-  );
-});
-
-// src/helper-lines/use-helper-lines.ts
-import { useCallback, useState } from "react";
-import { useReactFlow } from "@xyflow/react";
-
-// src/helper-lines/get-helper-lines.ts
-var ANCHORS = [0, 0.5, 1];
-function getHelperLines(dragged, others, threshold = 5) {
-  const result = {};
-  let bestVerticalDist = threshold;
-  let bestHorizontalDist = threshold;
-  const draggedX = ANCHORS.map((a) => ({ a, pos: dragged.x + dragged.width * a }));
-  const draggedY = ANCHORS.map((a) => ({ a, pos: dragged.y + dragged.height * a }));
-  for (const other of others) {
-    const otherX = ANCHORS.map((a) => other.x + other.width * a);
-    const otherY = ANCHORS.map((a) => other.y + other.height * a);
-    for (const d of draggedX) {
-      for (const oPos of otherX) {
-        const dx = Math.abs(d.pos - oPos);
-        if (dx < bestVerticalDist) {
-          bestVerticalDist = dx;
-          result.vertical = oPos;
-          result.snapX = oPos - dragged.width * d.a;
-        }
-      }
-    }
-    for (const d of draggedY) {
-      for (const oPos of otherY) {
-        const dy = Math.abs(d.pos - oPos);
-        if (dy < bestHorizontalDist) {
-          bestHorizontalDist = dy;
-          result.horizontal = oPos;
-          result.snapY = oPos - dragged.height * d.a;
-        }
-      }
-    }
-  }
-  return result;
-}
-
-// src/helper-lines/use-helper-lines.ts
-function nodeRect(node) {
-  return {
-    x: node.position.x,
-    y: node.position.y,
-    width: node.measured?.width ?? node.width ?? 0,
-    height: node.measured?.height ?? node.height ?? 0
-  };
-}
-function useHelperLines(onNodesChange, options = {}) {
-  const { threshold = 5 } = options;
-  const { getNodes } = useReactFlow();
-  const [helperLineHorizontal, setHelperLineHorizontal] = useState();
-  const [helperLineVertical, setHelperLineVertical] = useState();
-  const handleNodesChange = useCallback(
-    (changes) => {
-      let horizontal;
-      let vertical;
-      const dragChanges = changes.filter(
-        (c) => c.type === "position" && c.dragging === true && c.position != null
-      );
-      if (dragChanges.length === 1) {
-        const change = dragChanges[0];
-        const nodes = getNodes();
-        const dragged = change ? nodes.find((n) => n.id === change.id) : void 0;
-        if (change && change.position && dragged) {
-          const draggedRect = {
-            x: change.position.x,
-            y: change.position.y,
-            width: dragged.measured?.width ?? dragged.width ?? 0,
-            height: dragged.measured?.height ?? dragged.height ?? 0
-          };
-          const others = nodes.filter((n) => n.id !== change.id).map(nodeRect);
-          const {
-            snapX,
-            snapY,
-            vertical: v,
-            horizontal: h
-          } = getHelperLines(draggedRect, others, threshold);
-          if (snapX !== void 0) change.position.x = snapX;
-          if (snapY !== void 0) change.position.y = snapY;
-          vertical = v;
-          horizontal = h;
-        }
-      }
-      setHelperLineHorizontal(horizontal);
-      setHelperLineVertical(vertical);
-      onNodesChange?.(changes);
-    },
-    [getNodes, onNodesChange, threshold]
-  );
-  return { onNodesChange: handleNodesChange, helperLineHorizontal, helperLineVertical };
-}
-
-// src/canvas-shell/use-measured-nodes.ts
-import { useCallback as useCallback2, useMemo, useRef, useState as useState2 } from "react";
-function useMeasuredNodes(nodes, onNodesChange) {
-  const measured = useRef(/* @__PURE__ */ new Map());
-  const [version, setVersion] = useState2(0);
-  const handleNodesChange = useCallback2(
-    (changes) => {
-      let touched = false;
-      for (const change of changes) {
-        if (change.type !== "dimensions" || !change.dimensions) continue;
-        const previous = measured.current.get(change.id);
-        if (previous?.width === change.dimensions.width && previous.height === change.dimensions.height) {
-          continue;
-        }
-        measured.current.set(change.id, { ...change.dimensions });
-        touched = true;
-      }
-      onNodesChange?.(changes);
-      if (touched) setVersion((n) => n + 1);
-    },
-    [onNodesChange]
-  );
-  const mergedNodes = useMemo(() => {
-    if (!nodes) return nodes;
-    void version;
-    let changed = false;
-    const next = nodes.map((node) => {
-      const dimensions = measured.current.get(node.id);
-      if (!dimensions) return node;
-      if (node.measured?.width === dimensions.width && node.measured?.height === dimensions.height) {
-        return node;
-      }
-      changed = true;
-      return { ...node, measured: dimensions };
-    });
-    return changed ? next : nodes;
-  }, [nodes, version]);
-  return {
-    nodes: mergedNodes,
-    // Only take the handler over when there is something to measure INTO. An uncontrolled
-    // canvas is left exactly as it was.
-    onNodesChange: nodes ? handleNodesChange : onNodesChange
-  };
-}
-
-// src/canvas-shell/canvas-shell.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var DEFAULT_ARIA_LABEL_CONFIG = {
-  "node.a11yDescription.default": "Press Enter or Space to select this node. Press Delete to remove it, Escape to cancel.",
-  "node.a11yDescription.keyboardDisabled": "Press Enter or Space to select this node. Then use the arrow keys to move it. Press Delete to remove it, Escape to cancel.",
-  "edge.a11yDescription.default": "Press Enter or Space to select this edge. Press Delete to remove it, Escape to cancel.",
-  "controls.ariaLabel": "Canvas controls",
-  "controls.zoomIn.ariaLabel": "Zoom in",
-  "controls.zoomOut.ariaLabel": "Zoom out",
-  "controls.fitView.ariaLabel": "Fit view",
-  "controls.interactive.ariaLabel": "Toggle interactivity",
-  "minimap.ariaLabel": "Minimap",
-  "handle.ariaLabel": "Connection handle"
-};
-function CanvasShell({
-  helperLines = false,
-  ...props
-}) {
-  if (helperLines) {
-    return /* @__PURE__ */ jsx2(ReactFlowProvider, { children: /* @__PURE__ */ jsx2(CanvasShellWithHelperLines, { ...props }) });
-  }
-  return /* @__PURE__ */ jsx2(CanvasShellBase, { ...props });
-}
-function CanvasShellBase({
-  background = true,
-  children,
-  className,
-  ariaLabelConfig,
-  nodes,
-  onNodesChange,
-  fitViewKey,
-  fitViewKeyOptions,
-  ...props
-}) {
-  const measured = useMeasuredNodes(nodes, onNodesChange);
-  return /* @__PURE__ */ jsx2("div", { className: cn2("h-full w-full bg-canvas", className), children: /* @__PURE__ */ jsxs2(
-    ReactFlow,
-    {
-      fitView: true,
-      proOptions: { hideAttribution: true },
-      ariaLabelConfig: { ...DEFAULT_ARIA_LABEL_CONFIG, ...ariaLabelConfig },
-      nodes: measured.nodes,
-      onNodesChange: measured.onNodesChange,
-      ...props,
-      children: [
-        background ? /* @__PURE__ */ jsx2(Background, { gap: 20, size: 1, color: "var(--canvas-grid)" }) : null,
-        fitViewKey === void 0 ? null : /* @__PURE__ */ jsx2(FitViewOnKey, { fitViewKey, options: fitViewKeyOptions }),
-        children
-      ]
-    }
-  ) });
-}
-function FitViewOnKey({
-  fitViewKey,
-  options
-}) {
-  const { fitView, getNodes, getNodesBounds: getNodesBounds2, setViewport } = useReactFlow2();
-  const store = useStoreApi();
-  const nodesInitialized = useNodesInitialized();
-  useEffect(() => {
-    if (!nodesInitialized) return;
-    void fitView(options).then(
-      () => anchorToStartWhenClamped(store, setViewport, getNodesBounds2, getNodes(), options)
-    );
-  }, [fitViewKey, nodesInitialized, fitView, getNodes, getNodesBounds2, setViewport, store]);
-  return null;
-}
-function anchorToStartWhenClamped(store, setViewport, getNodesBounds2, nodes, options) {
-  if (nodes.length === 0) return;
-  const { width, height, transform, panZoom } = store.getState();
-  const [x, y, zoom] = transform;
-  if (!width || !height || !zoom) return;
-  const bounds = getNodesBounds2(nodes);
-  const padding = typeof options?.padding === "number" ? options.padding : 0.1;
-  const padX = width * padding;
-  const padY = height * padding;
-  const overflowsX = bounds.width * zoom > width - padX * 2 + 1;
-  const overflowsY = bounds.height * zoom > height - padY * 2 + 1;
-  if (!overflowsX && !overflowsY) return;
-  const next = {
-    x: overflowsX ? padX - bounds.x * zoom : x,
-    y: overflowsY ? padY - bounds.y * zoom : y,
-    zoom
-  };
-  if (!panZoom) return;
-  void setViewport(next);
-}
-function CanvasShellWithHelperLines({
-  onNodesChange,
-  children,
-  ...props
-}) {
-  const {
-    onNodesChange: wrappedOnNodesChange,
-    helperLineHorizontal,
-    helperLineVertical
-  } = useHelperLines(onNodesChange);
-  return /* @__PURE__ */ jsxs2(CanvasShellBase, { ...props, onNodesChange: wrappedOnNodesChange, children: [
-    children,
-    /* @__PURE__ */ jsx2(HelperLines, { horizontal: helperLineHorizontal, vertical: helperLineVertical })
-  ] });
-}
-
-// src/flow-handle/flow-handle-anchor.ts
-var FLOW_HANDLE_ANCHOR_CLASS = "transition-none";
-
-// src/flow-node/flow-node.tsx
-import "react";
-import { Handle, Position } from "@xyflow/react";
-import { Star } from "lucide-react";
-import { STATUS_TONE_ICONS } from "@elabs-ai/components-ui";
-import { cn as cn3 } from "@elabs-ai/components-ui/lib/cn";
-import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var FLOW_ALL_SIDE_HANDLES = {
-  source: ["top", "right", "bottom", "left"],
-  target: ["top", "right", "bottom", "left"]
-};
-var toneRing = {
-  default: "border-border",
-  accent: "border-primary",
-  success: "border-success",
-  warning: "border-warning",
-  destructive: "border-destructive"
-};
-var toneIcon = {
-  accent: Star,
-  success: STATUS_TONE_ICONS.success,
-  warning: STATUS_TONE_ICONS.warning,
-  destructive: STATUS_TONE_ICONS.destructive
-};
-var toneIconColor = {
-  accent: "text-primary",
-  success: "text-success-text",
-  warning: "text-warning-text",
-  destructive: "text-destructive-text"
-};
-var toneLabel = {
-  accent: "Highlighted",
-  success: "Success",
-  warning: "Warning",
-  destructive: "Destructive"
-};
-var sidePosition = {
-  top: Position.Top,
-  right: Position.Right,
-  bottom: Position.Bottom,
-  left: Position.Left
-};
-var handleClassName = `!size-2 !border-2 !border-flow-edge !bg-flow-node ${FLOW_HANDLE_ANCHOR_CLASS}`;
-function FlowNode({
-  data,
-  selected,
-  sourcePosition,
-  targetPosition
-}) {
-  const tone = data.tone ?? "default";
-  const ToneIcon = toneIcon[tone];
-  return /* @__PURE__ */ jsxs3(
-    "div",
-    {
-      "data-slot": "flow-node",
-      "data-tone": tone,
-      className: cn3(
-        "min-w-44 rounded-lg border bg-flow-node px-3 py-2 text-flow-node-foreground shadow-sm transition-[box-shadow,border-color] duration-fast ease-standard",
-        toneRing[tone],
-        selected && "ring-2 ring-ring",
-        "[[data-id]:focus-visible_&]:focus-ring-static"
-      ),
-      children: [
-        data.handles ? /* @__PURE__ */ jsxs3(Fragment, { children: [
-          (data.handles.target ?? []).map((side) => /* @__PURE__ */ jsx3(
-            Handle,
-            {
-              id: side,
-              type: "target",
-              position: sidePosition[side],
-              className: handleClassName
-            },
-            `target-${side}`
-          )),
-          (data.handles.source ?? []).map((side) => /* @__PURE__ */ jsx3(
-            Handle,
-            {
-              id: side,
-              type: "source",
-              position: sidePosition[side],
-              className: handleClassName
-            },
-            `source-${side}`
-          ))
-        ] }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
-          /* @__PURE__ */ jsx3(
-            Handle,
-            {
-              type: "target",
-              position: targetPosition ?? Position.Top,
-              className: handleClassName
-            }
-          ),
-          /* @__PURE__ */ jsx3(
-            Handle,
-            {
-              type: "source",
-              position: sourcePosition ?? Position.Bottom,
-              className: handleClassName
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
-          data.icon ? /* @__PURE__ */ jsx3("span", { className: "[&_svg]:size-4 text-muted-foreground", children: data.icon }) : null,
-          /* @__PURE__ */ jsxs3("div", { className: "min-w-0 flex-1", children: [
-            data.kind ? /* @__PURE__ */ jsx3("div", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: data.kind }) : null,
-            /* @__PURE__ */ jsx3("div", { className: "truncate text-sm font-medium", children: data.title }),
-            data.subtitle ? /* @__PURE__ */ jsx3("div", { className: "truncate text-xs text-muted-foreground", children: data.subtitle }) : null
-          ] }),
-          ToneIcon ? /* @__PURE__ */ jsx3(ToneIcon, { "aria-hidden": "true", className: cn3("size-3.5 shrink-0", toneIconColor[tone]) }) : null
-        ] }),
-        data.footer ? /* @__PURE__ */ jsx3("div", { className: "mt-2", children: data.footer }) : null,
-        toneLabel[tone] ? /* @__PURE__ */ jsx3("span", { className: "sr-only", children: toneLabel[tone] }) : null
-      ]
-    }
-  );
-}
-
-// src/flow-edge/flow-edge.tsx
-import { getBezierPath } from "@xyflow/react";
-
-// src/flow-edge-path/flow-edge-path.tsx
-import { BaseEdge } from "@xyflow/react";
-import { cn as cn4 } from "@elabs-ai/components-ui/lib/cn";
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var FLOW_EDGE_FOCUS_RING_WIDTH = 3;
-var FLOW_EDGE_FOCUS_CONTOUR_WIDTH = 6;
-function FlowEdgePath({
-  path,
-  stroke,
-  strokeWidth,
-  strokeDasharray,
-  strokeOpacity,
-  markerEnd,
-  markerStart,
-  interactionWidth,
-  className,
-  style,
-  ...props
-}) {
-  const focusDash = strokeDasharray ?? "none";
-  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-    /* @__PURE__ */ jsx4(
-      "path",
-      {
-        d: path,
-        fill: "none",
-        "aria-hidden": "true",
-        "data-slot": "flow-edge-focus-contour",
-        className: "pointer-events-none stroke-foreground opacity-0 [.react-flow\\_\\_edge:focus-visible_&]:opacity-100",
-        strokeWidth: strokeWidth + FLOW_EDGE_FOCUS_CONTOUR_WIDTH,
-        strokeDasharray: focusDash,
-        strokeLinecap: "round"
-      }
-    ),
-    /* @__PURE__ */ jsx4(
-      "path",
-      {
-        d: path,
-        fill: "none",
-        "aria-hidden": "true",
-        "data-slot": "flow-edge-focus-ring",
-        className: "pointer-events-none stroke-ring opacity-0 [.react-flow\\_\\_edge:focus-visible_&]:opacity-100",
-        strokeWidth: strokeWidth + FLOW_EDGE_FOCUS_RING_WIDTH,
-        strokeDasharray: focusDash,
-        strokeLinecap: "round"
-      }
-    ),
-    /* @__PURE__ */ jsx4(
-      BaseEdge,
-      {
-        ...props,
-        path,
-        markerEnd,
-        markerStart,
-        interactionWidth,
-        className: cn4(
-          "transition-[stroke,stroke-width] duration-fast ease-standard motion-reduce:transition-none",
-          className
-        ),
-        style: {
-          stroke,
-          strokeWidth,
-          ...strokeDasharray ? { strokeDasharray } : null,
-          ...strokeOpacity !== void 0 ? { strokeOpacity } : null,
-          ...style
-        }
-      }
-    )
-  ] });
-}
-
-// src/flow-edge/flow-edge.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-function FlowEdge({
-  id,
-  sourceX,
-  sourceY,
-  targetX,
-  targetY,
-  sourcePosition,
-  targetPosition,
-  markerEnd,
-  style
-}) {
-  const [edgePath] = getBezierPath({
-    sourceX,
-    sourceY,
-    targetX,
-    targetY,
-    sourcePosition,
-    targetPosition
-  });
-  return /* @__PURE__ */ jsx5(
-    FlowEdgePath,
-    {
-      id,
-      path: edgePath,
-      markerEnd,
-      "data-slot": "flow-edge",
-      stroke: "var(--flow-edge)",
-      strokeWidth: 1.5,
-      style
-    }
-  );
-}
-
-// src/flow-smart-edge/flow-smart-edge.tsx
+  ZoomControls
+} from "./chunk-ATO4LXJF.js";
+import "./chunk-GE73WQUK.js";
+import "./chunk-IJVFPUXO.js";
 import {
-  getBezierPath as getBezierPath2,
-  useInternalNode
-} from "@xyflow/react";
-
-// src/flow-smart-edge/smart-edge-geometry.ts
-import { Position as Position2 } from "@xyflow/react";
-var HANDLE_SIDES = ["top", "right", "bottom", "left"];
-var sideToPosition = {
-  top: Position2.Top,
-  right: Position2.Right,
-  bottom: Position2.Bottom,
-  left: Position2.Left
-};
-var positionToSide = {
-  [Position2.Top]: "top",
-  [Position2.Right]: "right",
-  [Position2.Bottom]: "bottom",
-  [Position2.Left]: "left"
-};
-function pickClosestAnchors(sources, targets) {
-  if (!sources.length || !targets.length) return void 0;
-  let best;
-  let bestDist = Infinity;
-  for (const source of sources) {
-    for (const target of targets) {
-      const dx = target.x - source.x;
-      const dy = target.y - source.y;
-      const dist = dx * dx + dy * dy;
-      if (dist < bestDist) {
-        bestDist = dist;
-        best = { source, target };
-      }
-    }
-  }
-  return best;
-}
-function handlePoint(rect, side) {
-  switch (side) {
-    case "top":
-      return { x: rect.x + rect.width / 2, y: rect.y };
-    case "bottom":
-      return { x: rect.x + rect.width / 2, y: rect.y + rect.height };
-    case "left":
-      return { x: rect.x, y: rect.y + rect.height / 2 };
-    case "right":
-      return { x: rect.x + rect.width, y: rect.y + rect.height / 2 };
-  }
-}
-function pickClosestHandles(source, sourceSides, target, targetSides) {
-  const srcSides = sourceSides.length ? sourceSides : HANDLE_SIDES;
-  const tgtSides = targetSides.length ? targetSides : HANDLE_SIDES;
-  let best;
-  let bestDist = Infinity;
-  for (const s of srcSides) {
-    const sp = handlePoint(source, s);
-    for (const t of tgtSides) {
-      const tp = handlePoint(target, t);
-      const dx = tp.x - sp.x;
-      const dy = tp.y - sp.y;
-      const dist = dx * dx + dy * dy;
-      if (dist < bestDist) {
-        bestDist = dist;
-        best = { sourceSide: s, targetSide: t, sx: sp.x, sy: sp.y, tx: tp.x, ty: tp.y };
-      }
-    }
-  }
-  return best;
-}
-
-// src/flow-smart-edge/flow-smart-edge.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
-function toRect(node) {
-  return {
-    x: node.internals.positionAbsolute.x,
-    y: node.internals.positionAbsolute.y,
-    width: node.measured.width ?? 0,
-    height: node.measured.height ?? 0
-  };
-}
-function anchorsOf(node, kind, handleId) {
-  const bounds = node.internals.handleBounds?.[kind] ?? [];
-  const origin = node.internals.positionAbsolute;
-  return bounds.filter((handle) => handleId ? handle.id === handleId : true).map((handle) => ({
-    id: handle.id ?? null,
-    x: origin.x + handle.x + handle.width / 2,
-    y: origin.y + handle.y + handle.height / 2,
-    side: positionToSide[handle.position]
-  }));
-}
-function declaredSides(node, kind) {
-  const userNode = node.internals.userNode;
-  const data = userNode.data;
-  const configured = data?.handles?.[kind];
-  if (configured?.length) return [...configured];
-  const position = kind === "target" ? userNode.targetPosition : userNode.sourcePosition;
-  if (position) return [positionToSide[position]];
-  return [kind === "target" ? "top" : "bottom"];
-}
-function FlowSmartEdge({
-  id,
-  source,
-  target,
-  sourceHandleId,
-  targetHandleId,
-  markerEnd,
-  style
-}) {
-  const sourceNode = useInternalNode(source);
-  const targetNode = useInternalNode(target);
-  if (!sourceNode || !targetNode) return null;
-  const picked = pickClosestAnchors(
-    anchorsOf(sourceNode, "source", sourceHandleId),
-    anchorsOf(targetNode, "target", targetHandleId)
-  );
-  let sx;
-  let sy;
-  let tx;
-  let ty;
-  let sourcePosition;
-  let targetPosition;
-  if (picked) {
-    ({ x: sx, y: sy } = picked.source);
-    ({ x: tx, y: ty } = picked.target);
-    sourcePosition = sideToPosition[picked.source.side];
-    targetPosition = sideToPosition[picked.target.side];
-  } else {
-    const fallback = pickClosestHandles(
-      toRect(sourceNode),
-      declaredSides(sourceNode, "source"),
-      toRect(targetNode),
-      declaredSides(targetNode, "target")
-    );
-    ({ sx, sy, tx, ty } = fallback);
-    sourcePosition = sideToPosition[fallback.sourceSide];
-    targetPosition = sideToPosition[fallback.targetSide];
-  }
-  const [edgePath] = getBezierPath2({
-    sourceX: sx,
-    sourceY: sy,
-    sourcePosition,
-    targetX: tx,
-    targetY: ty,
-    targetPosition
-  });
-  return /* @__PURE__ */ jsx6(
-    FlowEdgePath,
-    {
-      id,
-      path: edgePath,
-      markerEnd,
-      "data-slot": "flow-smart-edge",
-      stroke: "var(--flow-edge)",
-      strokeWidth: 1.5,
-      style
-    }
-  );
-}
-
-// src/flow-floating-edge/flow-floating-edge.tsx
-import { getBezierPath as getBezierPath3, useInternalNode as useInternalNode2 } from "@xyflow/react";
-
-// src/flow-floating-edge/floating-edge-geometry.ts
-import { Position as Position3 } from "@xyflow/react";
-function getNodeIntersection(intersectionNode, targetNode) {
-  const w = (intersectionNode.measured.width ?? 0) / 2;
-  const h = (intersectionNode.measured.height ?? 0) / 2;
-  const pos = intersectionNode.internals.positionAbsolute;
-  const targetPos = targetNode.internals.positionAbsolute;
-  const x2 = pos.x + w;
-  const y2 = pos.y + h;
-  const x1 = targetPos.x + (targetNode.measured.width ?? 0) / 2;
-  const y1 = targetPos.y + (targetNode.measured.height ?? 0) / 2;
-  const safeW = w || 1;
-  const safeH = h || 1;
-  const xx1 = (x1 - x2) / (2 * safeW) - (y1 - y2) / (2 * safeH);
-  const yy1 = (x1 - x2) / (2 * safeW) + (y1 - y2) / (2 * safeH);
-  const a = 1 / (Math.abs(xx1) + Math.abs(yy1) || 1);
-  const xx3 = a * xx1;
-  const yy3 = a * yy1;
-  const x = safeW * (xx3 + yy3) + x2;
-  const y = safeH * (-xx3 + yy3) + y2;
-  return { x, y };
-}
-function clampToBorder(point, node) {
-  const x0 = node.internals.positionAbsolute.x;
-  const y0 = node.internals.positionAbsolute.y;
-  const w = node.measured.width ?? 0;
-  const h = node.measured.height ?? 0;
-  if (w <= 0 || h <= 0) return point;
-  const cx = Math.min(Math.max(point.x, x0), x0 + w);
-  const cy = Math.min(Math.max(point.y, y0), y0 + h);
-  const dLeft = cx - x0;
-  const dRight = x0 + w - cx;
-  const dTop = cy - y0;
-  const dBottom = y0 + h - cy;
-  const nearest = Math.min(dLeft, dRight, dTop, dBottom);
-  if (nearest === dLeft) return { x: x0, y: cy };
-  if (nearest === dRight) return { x: x0 + w, y: cy };
-  if (nearest === dTop) return { x: cx, y: y0 };
-  return { x: cx, y: y0 + h };
-}
-function getEdgeBorderPosition(node, point) {
-  const nx = Math.round(node.internals.positionAbsolute.x);
-  const ny = Math.round(node.internals.positionAbsolute.y);
-  const px = Math.round(point.x);
-  const py = Math.round(point.y);
-  const w = node.measured.width ?? 0;
-  const h = node.measured.height ?? 0;
-  if (px <= nx + 1) return Position3.Left;
-  if (px >= nx + w - 1) return Position3.Right;
-  if (py <= ny + 1) return Position3.Top;
-  if (py >= ny + h - 1) return Position3.Bottom;
-  return Position3.Top;
-}
-function getEdgeParams(source, target) {
-  const sourceIntersection = clampToBorder(getNodeIntersection(source, target), source);
-  const targetIntersection = clampToBorder(getNodeIntersection(target, source), target);
-  return {
-    sx: sourceIntersection.x,
-    sy: sourceIntersection.y,
-    tx: targetIntersection.x,
-    ty: targetIntersection.y,
-    sourcePos: getEdgeBorderPosition(source, sourceIntersection),
-    targetPos: getEdgeBorderPosition(target, targetIntersection)
-  };
-}
-
-// src/flow-floating-edge/flow-floating-edge.tsx
-import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
-var ANCHOR_RADIUS = 4;
-function FlowFloatingEdge({ id, source, target, markerEnd, style, data }) {
-  const sourceNode = useInternalNode2(source);
-  const targetNode = useInternalNode2(target);
-  if (!sourceNode || !targetNode) return null;
-  const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(sourceNode, targetNode);
-  const [edgePath] = getBezierPath3({
-    sourceX: sx,
-    sourceY: sy,
-    sourcePosition: sourcePos,
-    targetX: tx,
-    targetY: ty,
-    targetPosition: targetPos
-  });
-  const showAnchors = data?.anchors !== false;
-  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
-    /* @__PURE__ */ jsx7(
-      FlowEdgePath,
-      {
-        id,
-        path: edgePath,
-        markerEnd,
-        "data-slot": "flow-floating-edge",
-        stroke: "var(--flow-edge)",
-        strokeWidth: 1.5,
-        style
-      }
-    ),
-    showAnchors ? /* @__PURE__ */ jsxs5(
-      "g",
-      {
-        className: "brand-floating-edge__anchors",
-        fill: "var(--flow-node)",
-        stroke: "var(--flow-edge)",
-        children: [
-          /* @__PURE__ */ jsx7(
-            "circle",
-            {
-              cx: sx,
-              cy: sy,
-              r: ANCHOR_RADIUS,
-              strokeWidth: 2,
-              style: { pointerEvents: "none" },
-              "aria-hidden": "true"
-            }
-          ),
-          /* @__PURE__ */ jsx7(
-            "circle",
-            {
-              cx: tx,
-              cy: ty,
-              r: ANCHOR_RADIUS,
-              strokeWidth: 2,
-              style: { pointerEvents: "none" },
-              "aria-hidden": "true"
-            }
-          )
-        ]
-      }
-    ) : null
-  ] });
-}
-
-// src/flow-placeholder-node/flow-placeholder-node.tsx
-import { Handle as Handle2, Position as Position4 } from "@xyflow/react";
-import { Plus } from "lucide-react";
-import { cn as cn5 } from "@elabs-ai/components-ui/lib/cn";
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
-function FlowPlaceholderNode({ data }) {
-  const label = data.label ?? "Add node";
-  return /* @__PURE__ */ jsxs6("div", { className: "relative", children: [
-    /* @__PURE__ */ jsx8(
-      Handle2,
-      {
-        type: "target",
-        position: Position4.Top,
-        className: `!size-2 !border-2 !border-flow-edge !bg-flow-node ${FLOW_HANDLE_ANCHOR_CLASS}`
-      }
-    ),
-    /* @__PURE__ */ jsxs6(
-      "button",
-      {
-        type: "button",
-        "aria-label": label,
-        onClick: () => data.onActivate?.(),
-        className: cn5(
-          "flex min-w-44 items-center justify-center gap-1.5 rounded-lg border border-dashed border-flow-group-border bg-flow-group px-3 py-2 text-muted-foreground",
-          "transition-colors duration-fast ease-standard hover:bg-accent hover:text-accent-foreground",
-          "focus-ring"
-        ),
-        children: [
-          /* @__PURE__ */ jsx8(Plus, { className: "size-4", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx8("span", { className: "text-body", children: label })
-        ]
-      }
-    )
-  ] });
-}
-
-// src/flow-button-edge/flow-button-edge.tsx
-import { EdgeLabelRenderer, getBezierPath as getBezierPath4 } from "@xyflow/react";
-import { Plus as Plus2 } from "lucide-react";
-import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
-function FlowButtonEdge({
-  id,
-  sourceX,
-  sourceY,
-  targetX,
-  targetY,
-  sourcePosition,
-  targetPosition,
-  markerEnd,
-  style,
-  data
-}) {
-  const [edgePath, labelX, labelY] = getBezierPath4({
-    sourceX,
-    sourceY,
-    sourcePosition,
-    targetX,
-    targetY,
-    targetPosition
-  });
-  const label = data?.label ?? "Insert node on edge";
-  return /* @__PURE__ */ jsxs7(Fragment4, { children: [
-    /* @__PURE__ */ jsx9(
-      FlowEdgePath,
-      {
-        id,
-        path: edgePath,
-        markerEnd,
-        "data-slot": "flow-button-edge",
-        stroke: "var(--flow-edge)",
-        strokeWidth: 1.5,
-        style
-      }
-    ),
-    /* @__PURE__ */ jsx9(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx9(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`
-        },
-        className: "nodrag nopan pointer-events-auto",
-        children: /* @__PURE__ */ jsx9(
-          "button",
-          {
-            type: "button",
-            "aria-label": label,
-            onClick: () => data?.onInsert?.(),
-            className: "flex size-5 items-center justify-center rounded-full border border-flow-group-border bg-flow-node text-flow-node-foreground shadow-sm transition-colors duration-fast ease-standard hover:bg-accent hover:text-accent-foreground focus-ring",
-            children: /* @__PURE__ */ jsx9(Plus2, { className: "size-3", "aria-hidden": "true" })
-          }
-        )
-      }
-    ) })
-  ] });
-}
-
-// src/flow-layout/flow-layout.ts
-import dagre from "@dagrejs/dagre";
-import { Position as Position5 } from "@xyflow/react";
-var HANDLE_BY_DIRECTION = {
-  TB: { source: Position5.Bottom, target: Position5.Top },
-  BT: { source: Position5.Top, target: Position5.Bottom },
-  LR: { source: Position5.Right, target: Position5.Left },
-  RL: { source: Position5.Left, target: Position5.Right }
-};
-var DEFAULT_NODE_WIDTH = 172;
-var DEFAULT_NODE_HEIGHT = 40;
-function nodeSize(node) {
-  return {
-    width: node.measured?.width ?? node.width ?? DEFAULT_NODE_WIDTH,
-    height: node.measured?.height ?? node.height ?? DEFAULT_NODE_HEIGHT
-  };
-}
-function layoutFlow(nodes, edges, options = {}) {
-  const { direction = "TB", nodeSpacing = 48, rankSpacing = 72 } = options;
-  const graph = new dagre.graphlib.Graph();
-  graph.setDefaultEdgeLabel(() => ({}));
-  graph.setGraph({ rankdir: direction, nodesep: nodeSpacing, ranksep: rankSpacing });
-  for (const node of nodes) {
-    const { width, height } = nodeSize(node);
-    graph.setNode(node.id, { width, height });
-  }
-  const selfLoops = [];
-  for (const edge of edges) {
-    if (edge.source === edge.target) {
-      selfLoops.push(edge.id);
-      continue;
-    }
-    graph.setEdge(edge.source, edge.target);
-  }
-  dagre.layout(graph);
-  const backEdges = collectBackEdges(graph, edges);
-  const handles = HANDLE_BY_DIRECTION[direction];
-  const layoutedNodes = nodes.map((node) => {
-    const dagreNode = graph.node(node.id);
-    const { width, height } = nodeSize(node);
-    return {
-      ...node,
-      // Move the anchors with the layout direction so `FlowNode` puts its
-      // handles on the sides the edges actually leave/enter.
-      sourcePosition: handles.source,
-      targetPosition: handles.target,
-      position: {
-        x: dagreNode.x - width / 2,
-        y: dagreNode.y - height / 2
-      }
-    };
-  });
-  return { nodes: layoutedNodes, edges, backEdges, selfLoops };
-}
-function collectBackEdges(graph, edges) {
-  const backEdges = [];
-  for (const edge of edges) {
-    if (edge.source === edge.target) continue;
-    const sourceRank = graph.node(edge.source)?.rank;
-    const targetRank = graph.node(edge.target)?.rank;
-    if (typeof sourceRank !== "number" || typeof targetRank !== "number") continue;
-    if (sourceRank >= targetRank) backEdges.push(edge.id);
-  }
-  return backEdges;
-}
-
-// src/flow-layout/use-flow-layout.ts
-import { useCallback as useCallback3, useRef as useRef2, useState as useState3 } from "react";
-import { useNodesInitialized as useNodesInitialized2, useReactFlow as useReactFlow3 } from "@xyflow/react";
-function useFlowLayout() {
-  const { getNodes, getEdges, setNodes, fitView } = useReactFlow3();
-  const nodesInitialized = useNodesInitialized2();
-  const [layouting, setLayouting] = useState3(false);
-  const runningRef = useRef2(false);
-  const layout = useCallback3(
-    (direction, options) => {
-      if (!nodesInitialized || runningRef.current) return;
-      runningRef.current = true;
-      setLayouting(true);
-      try {
-        const { nodes: layoutedNodes } = layoutFlow(getNodes(), getEdges(), {
-          ...options,
-          direction
-        });
-        setNodes(layoutedNodes);
-        requestAnimationFrame(() => fitView());
-      } finally {
-        runningRef.current = false;
-        setLayouting(false);
-      }
-    },
-    [nodesInitialized, getNodes, getEdges, setNodes, fitView]
-  );
-  return { layout, ready: nodesInitialized, layouting };
-}
-
-// src/flow-layout/layout-graph.ts
+  InspectorPanel
+} from "./chunk-NAQWNX2A.js";
+import "./chunk-UPV2MT4O.js";
 import {
-  forceCenter,
-  forceCollide,
-  forceLink,
-  forceManyBody,
-  forceSimulation
-} from "d3-force";
-var DEFAULT_NODE_WIDTH2 = 172;
-var DEFAULT_NODE_HEIGHT2 = 40;
-var DEFAULT_RING_RADIUS = 180;
-var DEFAULT_FORCE_ITERATIONS = 300;
-var DEFAULT_GRID_SPACING = { x: 200, y: 120 };
-var FORCE_CHARGE_STRENGTH = -300;
-var FORCE_LINK_DISTANCE = 150;
-function resolveNodeSize(node, nodeSize2) {
-  if (nodeSize2) return nodeSize2(node.id);
-  return {
-    width: node.measured?.width ?? node.width ?? DEFAULT_NODE_WIDTH2,
-    height: node.measured?.height ?? node.height ?? DEFAULT_NODE_HEIGHT2
-  };
-}
-function layoutGraph(nodes, edges, options) {
-  if (nodes.length === 0) return [];
-  switch (options.algorithm) {
-    case "layered-lr":
-      return layoutLayered(nodes, edges, options, "LR");
-    case "layered-tb":
-      return layoutLayered(nodes, edges, options, "TB");
-    case "concentric":
-      return layoutConcentric(nodes, edges, options);
-    case "force":
-      return layoutForce(nodes, edges, options);
-    case "grid":
-      return layoutGrid(nodes, options);
-    default: {
-      const exhaustiveCheck = options.algorithm;
-      throw new Error(`layoutGraph: unknown algorithm "${String(exhaustiveCheck)}"`);
-    }
-  }
-}
-function layoutLayered(nodes, edges, options, direction) {
-  const { spacing, nodeSize: nodeSize2 } = options;
-  const sizedNodes = nodeSize2 ? nodes.map((node) => {
-    const { width, height } = nodeSize2(node.id);
-    return { ...node, width, height, measured: { width, height } };
-  }) : nodes;
-  const horizontalRanks = direction === "LR" || direction === "RL";
-  const { nodes: laidOut } = layoutFlow(sizedNodes, edges, {
-    direction,
-    nodeSpacing: horizontalRanks ? spacing?.y : spacing?.x,
-    rankSpacing: horizontalRanks ? spacing?.x : spacing?.y
-  });
-  return nodes.map((node, i) => ({
-    ...node,
-    sourcePosition: laidOut[i].sourcePosition,
-    targetPosition: laidOut[i].targetPosition,
-    position: laidOut[i].position
-  }));
-}
-function resolveCenterId(centerId, nodeIds, adjacency) {
-  if (centerId && nodeIds.includes(centerId)) return centerId;
-  let best = nodeIds[0];
-  let bestDegree = -1;
-  for (const id of nodeIds) {
-    const degree = adjacency.get(id)?.size ?? 0;
-    if (degree > bestDegree) {
-      bestDegree = degree;
-      best = id;
-    }
-  }
-  return best;
-}
-function layoutConcentric(nodes, edges, options) {
-  const ringRadius = options.ringRadius ?? DEFAULT_RING_RADIUS;
-  const nodeIds = nodes.map((node) => node.id);
-  const idSet = new Set(nodeIds);
-  const adjacency = /* @__PURE__ */ new Map();
-  for (const id of nodeIds) adjacency.set(id, /* @__PURE__ */ new Set());
-  for (const edge of edges) {
-    if (!idSet.has(edge.source) || !idSet.has(edge.target)) continue;
-    adjacency.get(edge.source).add(edge.target);
-    adjacency.get(edge.target).add(edge.source);
-  }
-  const centerId = resolveCenterId(options.centerId, nodeIds, adjacency);
-  const hopOf = /* @__PURE__ */ new Map();
-  hopOf.set(centerId, 0);
-  const queue = [centerId];
-  let maxHop = 0;
-  while (queue.length > 0) {
-    const current = queue.shift();
-    const currentHop = hopOf.get(current);
-    for (const neighbor of adjacency.get(current) ?? []) {
-      if (hopOf.has(neighbor)) continue;
-      const hop = currentHop + 1;
-      hopOf.set(neighbor, hop);
-      maxHop = Math.max(maxHop, hop);
-      queue.push(neighbor);
-    }
-  }
-  const leftoverHop = maxHop + 1;
-  for (const id of nodeIds) {
-    if (!hopOf.has(id)) hopOf.set(id, leftoverHop);
-  }
-  const rings = /* @__PURE__ */ new Map();
-  for (const id of nodeIds) {
-    const hop = hopOf.get(id);
-    if (hop === 0) continue;
-    if (!rings.has(hop)) rings.set(hop, []);
-    rings.get(hop).push(id);
-  }
-  const positionById = /* @__PURE__ */ new Map();
-  positionById.set(centerId, { x: 0, y: 0 });
-  for (const [hop, ids] of rings) {
-    const count = ids.length;
-    const angleStep = 2 * Math.PI / count;
-    const ringOffset = (hop - 1) * (angleStep / 2);
-    const radius = hop * ringRadius;
-    ids.forEach((id, i) => {
-      const angle = ringOffset + i * angleStep;
-      positionById.set(id, { x: radius * Math.cos(angle), y: radius * Math.sin(angle) });
-    });
-  }
-  return nodes.map((node) => ({
-    ...node,
-    position: positionById.get(node.id) ?? { x: 0, y: 0 }
-  }));
-}
-function layoutForce(nodes, edges, options) {
-  const iterations = options.iterations ?? DEFAULT_FORCE_ITERATIONS;
-  const nodeIds = new Set(nodes.map((node) => node.id));
-  const seedRadius = Math.max(nodes.length * 20, 100);
-  const simNodes = nodes.map((node, i) => {
-    const angle = 2 * Math.PI * i / Math.max(nodes.length, 1);
-    return { id: node.id, x: seedRadius * Math.cos(angle), y: seedRadius * Math.sin(angle) };
-  });
-  const simLinks = edges.filter((edge) => nodeIds.has(edge.source) && nodeIds.has(edge.target)).map((edge) => ({ source: edge.source, target: edge.target }));
-  const collisionById = new Map(
-    nodes.map((node) => {
-      const { width, height } = resolveNodeSize(node, options.nodeSize);
-      return [node.id, Math.max(width, height) / 2];
-    })
-  );
-  const simulation = forceSimulation(simNodes).force("charge", forceManyBody().strength(FORCE_CHARGE_STRENGTH)).force(
-    "link",
-    forceLink(simLinks).id((d) => d.id).distance(FORCE_LINK_DISTANCE)
-  ).force("center", forceCenter(0, 0)).force(
-    "collide",
-    forceCollide((d) => collisionById.get(d.id) ?? DEFAULT_NODE_WIDTH2 / 2)
-  ).stop();
-  for (let i = 0; i < iterations; i++) {
-    simulation.tick();
-  }
-  const positionById = new Map(simNodes.map((n) => [n.id, { x: n.x ?? 0, y: n.y ?? 0 }]));
-  return nodes.map((node) => ({
-    ...node,
-    position: positionById.get(node.id) ?? { x: 0, y: 0 }
-  }));
-}
-function layoutGrid(nodes, options) {
-  const spacing = options.spacing ?? DEFAULT_GRID_SPACING;
-  const cols = Math.max(1, Math.ceil(Math.sqrt(nodes.length)));
-  const handles = HANDLE_BY_DIRECTION.TB;
-  return nodes.map((node, i) => {
-    const row = Math.floor(i / cols);
-    const col = i % cols;
-    return {
-      ...node,
-      sourcePosition: handles.source,
-      targetPosition: handles.target,
-      position: { x: col * spacing.x, y: row * spacing.y }
-    };
-  });
-}
-
-// src/flow-layout/use-auto-layout.ts
-import { useMemo as useMemo2 } from "react";
-function useAutoLayout(nodes, edges, options) {
-  return useMemo2(
-    () => layoutGraph(nodes, edges, options),
-    [nodes, edges, options]
-  );
-}
-
-// src/flow-mini-map/flow-mini-map.tsx
-import { MiniMap } from "@xyflow/react";
-import { cn as cn6 } from "@elabs-ai/components-ui/lib/cn";
-import { jsx as jsx10 } from "react/jsx-runtime";
-function FlowMiniMap({
-  className,
-  nodeColor = "var(--flow-minimap-node)",
-  nodeStrokeColor = "var(--flow-minimap-node)",
-  maskColor = "var(--flow-minimap-mask)",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx10(
-    MiniMap,
-    {
-      className: cn6("!rounded-lg !bg-surface-elevated !shadow-ring-sm", className),
-      nodeColor,
-      nodeStrokeColor,
-      maskColor,
-      ...props
-    }
-  );
-}
-
-// src/inspector-panel/inspector-panel.tsx
-import "react";
-import { Reveal, useCollapsiblePanel } from "@elabs-ai/components-ui";
-import { cn as cn7 } from "@elabs-ai/components-ui/lib/cn";
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
-var INSPECTOR_PANEL_WIDTH = "18rem";
-function InspectorPanel({
-  title = "Inspector",
-  children,
-  onClose,
-  emptyMessage = "Select a node to see its details.",
-  hasSelection = true,
-  selectionKey,
-  open,
-  defaultOpen = true,
-  onOpenChange,
-  side = "right",
-  width = INSPECTOR_PANEL_WIDTH,
-  className
-}) {
-  const panel = useCollapsiblePanel({
-    side,
-    open,
-    defaultOpen,
-    onOpenChange,
-    widthClassName: "w-(--inspector-panel-width)",
-    spacerCollapsedClassName: "group-data-[state=collapsed]:w-0",
-    containerSlideClassNames: {
-      left: "left-0 group-data-[state=collapsed]:left-[calc(var(--inspector-panel-width)*-1)]",
-      right: "right-0 group-data-[state=collapsed]:right-[calc(var(--inspector-panel-width)*-1)]"
-    }
-  });
-  return /* @__PURE__ */ jsxs8(
-    "div",
-    {
-      className: cn7("group relative h-full overflow-hidden", className),
-      style: { "--inspector-panel-width": width },
-      inert: panel.open ? void 0 : true,
-      ...panel.attrs,
-      children: [
-        /* @__PURE__ */ jsx11("div", { "data-slot": "inspector-panel-gap", className: panel.spacerClassName }),
-        /* @__PURE__ */ jsx11(
-          "div",
-          {
-            "data-slot": "inspector-panel-container",
-            className: cn7(panel.containerClassName, "absolute inset-y-0 flex h-full border-s"),
-            children: /* @__PURE__ */ jsxs8("div", { className: "flex h-full w-full flex-col bg-card", children: [
-              /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between border-b px-4 py-3", children: [
-                /* @__PURE__ */ jsx11("h3", { className: "text-body font-semibold text-foreground", children: title }),
-                onClose ? /* @__PURE__ */ jsx11(
-                  "button",
-                  {
-                    type: "button",
-                    "aria-label": "Close inspector",
-                    onClick: onClose,
-                    className: "rounded-sm p-1 text-muted-foreground hover:text-foreground focus-ring",
-                    children: /* @__PURE__ */ jsx11(
-                      "svg",
-                      {
-                        width: "14",
-                        height: "14",
-                        viewBox: "0 0 24 24",
-                        fill: "none",
-                        stroke: "currentColor",
-                        strokeWidth: "2",
-                        strokeLinecap: "round",
-                        strokeLinejoin: "round",
-                        "aria-hidden": "true",
-                        children: /* @__PURE__ */ jsx11("path", { d: "M18 6 6 18M6 6l12 12" })
-                      }
-                    )
-                  }
-                ) : null
-              ] }),
-              hasSelection ? /* @__PURE__ */ jsx11(
-                Reveal,
-                {
-                  appear: "fade",
-                  speed: "fast",
-                  tabIndex: 0,
-                  className: "focus-ring flex-1 overflow-y-auto p-4 text-body",
-                  children
-                },
-                selectionKey
-              ) : /* @__PURE__ */ jsx11("div", { tabIndex: 0, className: "focus-ring flex-1 overflow-y-auto p-4 text-body", children: /* @__PURE__ */ jsx11("p", { className: "text-muted-foreground", children: emptyMessage }) })
-            ] })
-          }
-        )
-      ]
-    }
-  );
-}
-
-// src/legend/legend.tsx
-import { cn as cn8 } from "@elabs-ai/components-ui/lib/cn";
-
-// src/flow-weighted-edge/weight-scale.ts
-var DEFAULT_EDGE_WIDTH_RANGE = [1.5, 8];
-var DEFAULT_SCALE_GROUP = "__default__";
-function computeEdgeWeightScale(edges, opts = {}) {
-  const [minWidth, maxWidth] = opts.widthRange ?? DEFAULT_EDGE_WIDTH_RANGE;
-  const result = /* @__PURE__ */ new Map();
-  const groups = /* @__PURE__ */ new Map();
-  for (const edge of edges) {
-    const weight = edge.data?.weight;
-    if (weight === void 0) {
-      result.set(edge.id, minWidth);
-      continue;
-    }
-    const group = edge.data?.scaleGroup ?? DEFAULT_SCALE_GROUP;
-    if (opts.scaleGroup !== void 0 && group !== opts.scaleGroup) continue;
-    const list = groups.get(group);
-    if (list) list.push({ id: edge.id, weight });
-    else groups.set(group, [{ id: edge.id, weight }]);
-  }
-  for (const list of groups.values()) {
-    let min = Infinity;
-    let max = -Infinity;
-    for (const { weight } of list) {
-      if (weight < min) min = weight;
-      if (weight > max) max = weight;
-    }
-    const span = max - min;
-    for (const { id, weight } of list) {
-      const width = span === 0 ? (minWidth + maxWidth) / 2 : minWidth + (weight - min) / span * (maxWidth - minWidth);
-      result.set(id, width);
-    }
-  }
-  return result;
-}
-
-// src/legend/legend.tsx
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
-var defaultFormat = (value) => value.toLocaleString();
-function Legend(props) {
-  if (props.variant === "scale") {
-    return /* @__PURE__ */ jsx12(LegendScale, { ...props });
-  }
-  return /* @__PURE__ */ jsx12(LegendCategorical, { ...props });
-}
-function LegendCategorical({ items, title, className }) {
-  return /* @__PURE__ */ jsxs9(
-    "div",
-    {
-      className: cn8(
-        "rounded-lg bg-surface-elevated/90 p-3 text-xs shadow-ring-sm backdrop-blur",
-        className
-      ),
-      children: [
-        title ? /* @__PURE__ */ jsx12("div", { className: "mb-1.5 font-medium text-foreground", children: title }) : null,
-        /* @__PURE__ */ jsx12("ul", { className: "space-y-1", children: items.map((item) => /* @__PURE__ */ jsxs9("li", { className: "flex items-center gap-2 text-muted-foreground", children: [
-          /* @__PURE__ */ jsx12(
-            "span",
-            {
-              "aria-hidden": "true",
-              className: "size-2.5 shrink-0 rounded-full",
-              style: { backgroundColor: item.color }
-            }
-          ),
-          item.label
-        ] }, item.label)) })
-      ]
-    }
-  );
-}
-function computeWidthSamples(domain, ticks) {
-  const [min, max] = domain;
-  const values = ticks === "minmedmax" ? [min, (min + max) / 2, max] : [min, max];
-  const likeEdges = values.map((weight, index) => ({
-    id: String(index),
-    data: { weight }
-  }));
-  const widths = computeEdgeWeightScale(likeEdges);
-  return values.map((value, index) => ({ value, width: widths.get(String(index)) ?? 0 }));
-}
-var COLOR_STOP_FRACTIONS = [0, 0.25, 0.5, 0.75, 1];
-function scaleKindLabel(kind) {
-  return kind === "width" ? "width" : "color";
-}
-function LegendScale({
-  kind,
-  domain,
-  format = defaultFormat,
-  ticks = "minmax",
-  title,
-  className
-}) {
-  const [min, max] = domain;
-  const ariaLabel = `Edge ${scaleKindLabel(kind)} scale, ${format(min)} to ${format(max)}, minimum to maximum`;
-  return /* @__PURE__ */ jsxs9(
-    "div",
-    {
-      "aria-label": ariaLabel,
-      className: cn8(
-        "flex flex-col gap-2 rounded-lg bg-surface-elevated/90 p-3 shadow-ring-sm backdrop-blur",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-        className
-      ),
-      role: "group",
-      tabIndex: 0,
-      children: [
-        title ? /* @__PURE__ */ jsx12("div", { className: "text-body font-medium text-foreground", children: title }) : null,
-        kind === "width" ? /* @__PURE__ */ jsx12(LegendScaleWidth, { domain, format, ticks }) : /* @__PURE__ */ jsx12(LegendScaleColor, { domain, format })
-      ]
-    }
-  );
-}
-function LegendScaleWidth({
-  domain,
-  format,
-  ticks
-}) {
-  const samples = computeWidthSamples(domain, ticks);
-  return /* @__PURE__ */ jsx12("div", { className: "flex flex-col gap-2", children: samples.map((sample, index) => (
-    // Index disambiguates a zero-width domain, where every sample shares
-    // the same value (and therefore the same width).
-    /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ jsx12("svg", { "aria-hidden": "true", className: "shrink-0", height: 16, overflow: "visible", width: 40, children: /* @__PURE__ */ jsx12(
-        "line",
-        {
-          stroke: "var(--flow-edge)",
-          strokeLinecap: "round",
-          strokeWidth: sample.width,
-          x1: 2,
-          x2: 38,
-          y1: 8,
-          y2: 8
-        }
-      ) }),
-      /* @__PURE__ */ jsx12("span", { className: "min-w-0 truncate text-meta tabular-nums text-muted-foreground", children: format(sample.value) })
-    ] }, `${index}-${sample.value}`)
-  )) });
-}
-function LegendScaleColor({
-  domain,
-  format
-}) {
-  const [min, max] = domain;
-  const span = max - min;
-  const stops = COLOR_STOP_FRACTIONS.map((fraction) => ({
-    fraction,
-    value: min + fraction * span
-  }));
-  const gradient = `linear-gradient(to right, ${stops.map(({ fraction }) => {
-    const percent = Math.round(fraction * 100);
-    return `color-mix(in oklch, var(--flow-edge-strong) ${percent}%, var(--flow-edge-weak)) ${percent}%`;
-  }).join(", ")})`;
-  return /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-1.5", children: [
-    /* @__PURE__ */ jsx12(
-      "div",
-      {
-        "aria-hidden": "true",
-        className: "h-3 w-full rounded-full",
-        style: { backgroundImage: gradient }
-      }
-    ),
-    /* @__PURE__ */ jsx12("div", { className: "flex justify-between gap-1", children: stops.map((stop, index) => /* @__PURE__ */ jsx12(
-      "span",
-      {
-        className: cn8(
-          "min-w-0 truncate text-meta tabular-nums text-muted-foreground",
-          index === 0 && "text-start",
-          index === stops.length - 1 && "text-end"
-        ),
-        children: format(stop.value)
-      },
-      `${index}-${stop.value}`
-    )) })
-  ] });
-}
-
-// src/zoom-controls/zoom-controls.tsx
-import { Panel, useReactFlow as useReactFlow4 } from "@xyflow/react";
-import { cn as cn9 } from "@elabs-ai/components-ui/lib/cn";
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
-function ControlButton({
-  label,
-  onClick,
-  children
-}) {
-  return /* @__PURE__ */ jsx13(
-    "button",
-    {
-      type: "button",
-      "aria-label": label,
-      onClick,
-      className: "flex size-8 items-center justify-center text-foreground transition-colors duration-fast hover:bg-surface-muted focus-ring [&_svg]:size-4",
-      children
-    }
-  );
-}
-function ZoomControls({ position = "bottom-right", className }) {
-  const { zoomIn, zoomOut, fitView } = useReactFlow4();
-  return /* @__PURE__ */ jsx13(Panel, { position, children: /* @__PURE__ */ jsxs10(
-    "div",
-    {
-      className: cn9(
-        "flex divide-x overflow-hidden rounded-lg bg-surface-elevated shadow-ring-sm",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx13(ControlButton, { label: "Zoom in", onClick: () => zoomIn(), children: /* @__PURE__ */ jsx13(
-          "svg",
-          {
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "2",
-            strokeLinecap: "round",
-            children: /* @__PURE__ */ jsx13("path", { d: "M12 5v14M5 12h14" })
-          }
-        ) }),
-        /* @__PURE__ */ jsx13(ControlButton, { label: "Zoom out", onClick: () => zoomOut(), children: /* @__PURE__ */ jsx13(
-          "svg",
-          {
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "2",
-            strokeLinecap: "round",
-            children: /* @__PURE__ */ jsx13("path", { d: "M5 12h14" })
-          }
-        ) }),
-        /* @__PURE__ */ jsx13(ControlButton, { label: "Fit view", onClick: () => fitView(), children: /* @__PURE__ */ jsx13(
-          "svg",
-          {
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "2",
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            children: /* @__PURE__ */ jsx13("path", { d: "M8 3H5a2 2 0 0 0-2 2v3M21 8V5a2 2 0 0 0-2-2h-3M16 21h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" })
-          }
-        ) })
-      ]
-    }
-  ) });
-}
-
-// src/flow-group-node/flow-group-node.tsx
-import "react";
-import { Handle as Handle3, NodeResizer, Position as Position6, useNodes } from "@xyflow/react";
-import { ChevronDown, ChevronRight } from "lucide-react";
-import { cn as cn10 } from "@elabs-ai/components-ui/lib/cn";
-
-// src/use-flow-groups/use-flow-groups.ts
-import { useCallback as useCallback4 } from "react";
-import { useReactFlow as useReactFlow5 } from "@xyflow/react";
-
-// src/use-flow-groups/group-operations.ts
-import { getNodesBounds } from "@xyflow/react";
-var FLOW_GROUP_NODE_TYPE = "group";
-var DEFAULT_GROUP_PADDING = 28;
-var GROUP_HEADER_OFFSET = 44;
-var OVERVIEW_WIDTH = 220;
-var OVERVIEW_HEIGHT = 48;
-var COLLAPSED_STATE_KEY = "__flowGroupCollapsedState";
-function isFlowGroupProxyEdge(edge) {
-  return Boolean(edge.data?.__flowGroupProxy);
-}
-function proxyEdgeId(groupId, originalEdgeId) {
-  return `flow-group-proxy__${groupId}__${originalEdgeId}`;
-}
-function readCollapsedState(node) {
-  return node.data?.[COLLAPSED_STATE_KEY];
-}
-function collectDescendantIds(nodes, groupId) {
-  const childrenByParent = /* @__PURE__ */ new Map();
-  for (const n of nodes) {
-    if (n.parentId) {
-      const arr = childrenByParent.get(n.parentId);
-      if (arr) arr.push(n);
-      else childrenByParent.set(n.parentId, [n]);
-    }
-  }
-  const out = /* @__PURE__ */ new Set();
-  const stack = [...childrenByParent.get(groupId) ?? []];
-  while (stack.length > 0) {
-    const n = stack.pop();
-    if (out.has(n.id)) continue;
-    out.add(n.id);
-    const kids = childrenByParent.get(n.id);
-    if (kids) stack.push(...kids);
-  }
-  return out;
-}
-function groupNodes(nodes, edges, nodeIds, options) {
-  const idSet = new Set(nodeIds);
-  const children = nodes.filter((n) => idSet.has(n.id));
-  if (children.length === 0) return { nodes, edges };
-  const bounds = getNodesBounds(children);
-  const padding = options.padding ?? DEFAULT_GROUP_PADDING;
-  const originX = bounds.x - padding;
-  const originY = bounds.y - padding - GROUP_HEADER_OFFSET;
-  const data = {
-    title: options.title ?? "Group",
-    childCount: children.length,
-    ...options.tone ? { tone: options.tone } : {}
-  };
-  const groupNode = {
-    id: options.groupId,
-    type: FLOW_GROUP_NODE_TYPE,
-    position: { x: originX, y: originY },
-    width: bounds.width + padding * 2,
-    height: bounds.height + padding * 2 + GROUP_HEADER_OFFSET,
-    data
-  };
-  const reparented = /* @__PURE__ */ new Map();
-  for (const child of children) {
-    reparented.set(child.id, {
-      ...child,
-      parentId: options.groupId,
-      extent: "parent",
-      position: { x: child.position.x - originX, y: child.position.y - originY }
-    });
-  }
-  let earliest = nodes.length;
-  for (let i = 0; i < nodes.length; i++) {
-    if (idSet.has(nodes[i].id)) {
-      earliest = i;
-      break;
-    }
-  }
-  const mapped = nodes.map((n) => reparented.get(n.id) ?? n);
-  const resultNodes = [...mapped.slice(0, earliest), groupNode, ...mapped.slice(earliest)];
-  return { nodes: resultNodes, edges };
-}
-function ungroup(nodes, edges, groupId) {
-  const group = nodes.find((n) => n.id === groupId);
-  if (!group) return { nodes, edges };
-  const base = group.data?.collapsed ? expandGroup(nodes, edges, groupId) : { nodes, edges };
-  const liveGroup = base.nodes.find((n) => n.id === groupId);
-  const gx = liveGroup.position.x;
-  const gy = liveGroup.position.y;
-  const resultNodes = base.nodes.filter((n) => n.id !== groupId).map((n) => {
-    if (n.parentId === groupId) {
-      const {
-        parentId: _parentId,
-        extent: _extent,
-        ...rest
-      } = n;
-      return {
-        ...rest,
-        position: { x: n.position.x + gx, y: n.position.y + gy }
-      };
-    }
-    return n;
-  });
-  return { nodes: resultNodes, edges: base.edges };
-}
-function collapseGroup(nodes, edges, groupId) {
-  const group = nodes.find((n) => n.id === groupId);
-  if (!group) return { nodes, edges };
-  if (group.data?.collapsed) return { nodes, edges };
-  const descendantIds = collectDescendantIds(nodes, groupId);
-  const descendantSnapshots = nodes.filter((n) => descendantIds.has(n.id));
-  const directChildCount = nodes.filter((n) => n.parentId === groupId).length;
-  const isInside = (id) => descendantIds.has(id);
-  const reroutedEdges = [];
-  const proxyEdges = [];
-  for (const edge of edges) {
-    const sourceInside = isInside(edge.source);
-    const targetInside = isInside(edge.target);
-    if (sourceInside === targetInside) continue;
-    reroutedEdges.push(edge);
-    const proxyData = {
-      ...edge.data ?? {},
-      __flowGroupProxy: true,
-      groupId
-    };
-    proxyEdges.push({
-      ...edge,
-      id: proxyEdgeId(groupId, edge.id),
-      source: sourceInside ? groupId : edge.source,
-      target: targetInside ? groupId : edge.target,
-      sourceHandle: void 0,
-      targetHandle: void 0,
-      data: proxyData
-    });
-  }
-  const collapsedState = {
-    groupSnapshot: group,
-    descendantSnapshots,
-    reroutedEdges
-  };
-  const resultNodes = nodes.map((n) => {
-    if (n.id === groupId) {
-      return {
-        ...n,
-        width: OVERVIEW_WIDTH,
-        height: OVERVIEW_HEIGHT,
-        data: {
-          ...n.data,
-          collapsed: true,
-          childCount: directChildCount,
-          [COLLAPSED_STATE_KEY]: collapsedState
-        }
-      };
-    }
-    if (descendantIds.has(n.id)) {
-      return { ...n, hidden: true };
-    }
-    return n;
-  });
-  const reroutedIds = new Set(reroutedEdges.map((e) => e.id));
-  const resultEdges = edges.map(
-    (e) => reroutedIds.has(e.id) ? { ...e, hidden: true } : e
-  );
-  resultEdges.push(...proxyEdges);
-  return { nodes: resultNodes, edges: resultEdges };
-}
-function expandGroup(nodes, edges, groupId) {
-  const group = nodes.find((n) => n.id === groupId);
-  const state = group ? readCollapsedState(group) : void 0;
-  if (!group || !state) return { nodes, edges };
-  const snapshotById = new Map(state.descendantSnapshots.map((n) => [n.id, n]));
-  const reroutedById = new Map(state.reroutedEdges.map((e) => [e.id, e]));
-  const resultNodes = nodes.map((n) => {
-    if (n.id === groupId) return state.groupSnapshot;
-    const snap = snapshotById.get(n.id);
-    return snap ? snap : n;
-  });
-  const resultEdges = edges.filter(
-    (e) => !(isFlowGroupProxyEdge(e) && e.data?.groupId === groupId)
-  ).map((e) => {
-    const original = reroutedById.get(e.id);
-    return original ? original : e;
-  });
-  return { nodes: resultNodes, edges: resultEdges };
-}
-function toggleGroupCollapsed(nodes, edges, groupId) {
-  const group = nodes.find((n) => n.id === groupId);
-  if (!group) return { nodes, edges };
-  return group.data?.collapsed ? expandGroup(nodes, edges, groupId) : collapseGroup(nodes, edges, groupId);
-}
-
-// src/use-flow-groups/use-flow-groups.ts
-function generateGroupId() {
-  return `flow-group-${Math.random().toString(36).slice(2, 9)}`;
-}
-function useFlowGroups() {
-  const { getNodes, getEdges, setNodes, setEdges } = useReactFlow5();
-  const apply = useCallback4(
-    (result) => {
-      setNodes(result.nodes);
-      setEdges(result.edges);
-    },
-    [setNodes, setEdges]
-  );
-  const groupNodes2 = useCallback4(
-    (nodeIds, options) => {
-      if (nodeIds.length === 0) return void 0;
-      const groupId = options?.groupId ?? generateGroupId();
-      const result = groupNodes(getNodes(), getEdges(), nodeIds, {
-        ...options,
-        groupId
-      });
-      apply(result);
-      return groupId;
-    },
-    [getNodes, getEdges, apply]
-  );
-  const groupSelection = useCallback4(
-    (options) => {
-      const selectedIds = getNodes().filter((n) => n.selected && !n.parentId).map((n) => n.id);
-      return groupNodes2(selectedIds, options);
-    },
-    [getNodes, groupNodes2]
-  );
-  const ungroup2 = useCallback4(
-    (groupId) => apply(ungroup(getNodes(), getEdges(), groupId)),
-    [getNodes, getEdges, apply]
-  );
-  const collapseGroup2 = useCallback4(
-    (groupId) => apply(collapseGroup(getNodes(), getEdges(), groupId)),
-    [getNodes, getEdges, apply]
-  );
-  const expandGroup2 = useCallback4(
-    (groupId) => apply(expandGroup(getNodes(), getEdges(), groupId)),
-    [getNodes, getEdges, apply]
-  );
-  const toggleCollapse = useCallback4(
-    (groupId) => apply(toggleGroupCollapsed(getNodes(), getEdges(), groupId)),
-    [getNodes, getEdges, apply]
-  );
-  return {
-    groupNodes: groupNodes2,
-    groupSelection,
-    ungroup: ungroup2,
-    collapseGroup: collapseGroup2,
-    expandGroup: expandGroup2,
-    toggleCollapse
-  };
-}
-
-// src/flow-group-node/flow-group-node.tsx
-import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
-var toneMark = {
-  default: "text-muted-foreground",
-  accent: "text-primary-text",
-  success: "text-success",
-  warning: "text-warning",
-  destructive: "text-destructive"
-};
-var toneInk = {
-  default: "text-muted-foreground",
-  accent: "text-primary-text",
-  success: "text-success-text",
-  warning: "text-warning-text",
-  destructive: "text-destructive-text"
-};
-var handleClassName2 = `!size-2 !border-2 !border-flow-group-border !bg-flow-group ${FLOW_HANDLE_ANCHOR_CLASS}`;
-function FlowGroupNode({ id, data, selected }) {
-  const { toggleCollapse } = useFlowGroups();
-  const nodes = useNodes();
-  const collapsed = data.collapsed ?? false;
-  const tone = data.tone ?? "default";
-  const liveChildCount = nodes.filter((n) => n.parentId === id).length;
-  const childCount = liveChildCount || data.childCount || 0;
-  return /* @__PURE__ */ jsxs11(
-    "div",
-    {
-      className: cn10(
-        "flex h-full w-full flex-col rounded-lg border bg-flow-group/60 text-foreground",
-        "border-flow-group-border transition-[box-shadow,border-color] duration-fast ease-standard motion-reduce:transition-none",
-        collapsed ? "shadow-sm" : "shadow-none",
-        selected && "ring-2 ring-ring"
-      ),
-      children: [
-        !collapsed && selected ? /* @__PURE__ */ jsx14(
-          NodeResizer,
-          {
-            minWidth: 160,
-            minHeight: 96,
-            lineClassName: "!border-flow-group-border",
-            handleClassName: handleClassName2
-          }
-        ) : null,
-        /* @__PURE__ */ jsx14(Handle3, { type: "target", position: Position6.Top, className: handleClassName2 }),
-        /* @__PURE__ */ jsx14(Handle3, { type: "source", position: Position6.Bottom, className: handleClassName2 }),
-        /* @__PURE__ */ jsxs11(
-          "div",
-          {
-            className: cn10(
-              "flex items-center gap-2 px-3 py-2",
-              !collapsed && "border-b border-flow-group-border"
-            ),
-            children: [
-              /* @__PURE__ */ jsx14(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => toggleCollapse(id),
-                  "aria-label": collapsed ? `Expand group ${data.title}` : `Collapse group ${data.title}`,
-                  "aria-expanded": !collapsed,
-                  className: cn10(
-                    "-ml-1 grid size-5 shrink-0 place-items-center rounded",
-                    "text-muted-foreground hover:bg-muted hover:text-foreground",
-                    "focus-ring"
-                  ),
-                  children: collapsed ? /* @__PURE__ */ jsx14(ChevronRight, { "aria-hidden": "true", className: "size-4" }) : /* @__PURE__ */ jsx14(ChevronDown, { "aria-hidden": "true", className: "size-4" })
-                }
-              ),
-              data.icon ? /* @__PURE__ */ jsx14("span", { className: cn10("[&_svg]:size-4", toneMark[tone]), children: data.icon }) : null,
-              /* @__PURE__ */ jsx14("span", { className: "min-w-0 flex-1 truncate text-body font-medium", children: data.title }),
-              /* @__PURE__ */ jsx14(
-                "span",
-                {
-                  className: cn10(
-                    "shrink-0 rounded-full bg-muted px-1.5 py-0.5 text-meta font-medium tabular-nums",
-                    toneInk[tone]
-                  ),
-                  "aria-label": `${childCount} ${childCount === 1 ? "node" : "nodes"}`,
-                  children: childCount
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
+  Legend
+} from "./chunk-NVJVWGUS.js";
+import "./chunk-3Y5TCGC3.js";
+import {
+  FlowPlaceholderNode
+} from "./chunk-5TVVM4GR.js";
+import "./chunk-BWGYV4JZ.js";
+import {
+  FlowSelfLoopEdge
+} from "./chunk-CWNO63LQ.js";
+import "./chunk-W3TQMUGX.js";
+import {
+  buildWeightedEdgeAriaLabel,
+  withWeightedEdgeAria
+} from "./chunk-FAFQ5KLB.js";
+import {
+  FlowWeightedEdge
+} from "./chunk-K5RPSVO6.js";
+import {
+  backEdgeDetour
+} from "./chunk-ZXZTLQIX.js";
+import {
+  EdgeLabelPill
+} from "./chunk-I53W3CFN.js";
+import {
+  DEFAULT_EDGE_WIDTH_RANGE,
+  computeEdgeWeightScale
+} from "./chunk-3BTU2VWZ.js";
+import {
+  DEFAULT_LOOP_RADIUS,
+  selfLoopHandleArc,
+  selfLoopPath
+} from "./chunk-TEZ3OXAY.js";
+import "./chunk-UZJZY4A5.js";
+import {
+  FlowSmartEdge
+} from "./chunk-4VYHZM3S.js";
+import {
+  HANDLE_SIDES,
+  handlePoint,
+  pickClosestAnchors,
+  pickClosestHandles,
+  positionToSide,
+  sideToPosition
+} from "./chunk-DHPUXKCZ.js";
+import {
+  layoutFlowElk
+} from "./chunk-ATXVXTMZ.js";
+import "./chunk-O2F3R3PV.js";
+import {
+  FlowMiniMap
+} from "./chunk-WN46RIOC.js";
+import "./chunk-ADHLQF56.js";
+import {
+  FLOW_ALL_SIDE_HANDLES,
+  FlowNode
+} from "./chunk-FIRO6Y3R.js";
+import "./chunk-A66JBW4X.js";
+import "./chunk-TSB6RE7L.js";
+import {
+  FlowGroupNode
+} from "./chunk-3M3FQAD4.js";
+import "./chunk-ELOADZSX.js";
+import {
+  useFlowGroups
+} from "./chunk-LQOZCOK3.js";
+import {
+  FLOW_GROUP_NODE_TYPE,
+  collapseGroup,
+  expandGroup,
+  groupNodes,
+  isFlowGroupProxyEdge,
+  toggleGroupCollapsed,
+  ungroup
+} from "./chunk-TGWPM2CG.js";
+import "./chunk-5XT73MQQ.js";
+import {
+  FLOW_HANDLE_ANCHOR_CLASS
+} from "./chunk-ROYAQKJA.js";
+import {
+  pinBackbone
+} from "./chunk-6LQD5Y5R.js";
+import "./chunk-PE6JXVOX.js";
+import {
+  useAutoLayout
+} from "./chunk-6SR26QY2.js";
+import {
+  layoutGraph
+} from "./chunk-DNX7G3KA.js";
+import {
+  useFlowLayout
+} from "./chunk-GIARAOU6.js";
+import {
+  layoutFlow
+} from "./chunk-HTLTCCFA.js";
+import "./chunk-YG3KXTZW.js";
+import {
+  DEFAULT_EDGE_TOKEN_RADIUS,
+  FlowEdgeTokens
+} from "./chunk-ROJEIIA4.js";
+import {
+  createEdgePathSampler,
+  flattenEdgePath
+} from "./chunk-T7S7NJFD.js";
+import "./chunk-ELCLRVD4.js";
+import {
+  FlowEdge
+} from "./chunk-SHCZK4DO.js";
+import {
+  FlowFloatingEdge
+} from "./chunk-K6U27YJ6.js";
+import {
+  getEdgeParams
+} from "./chunk-A7AFM3LI.js";
+import "./chunk-OMFQHMA6.js";
+import {
+  CanvasShell
+} from "./chunk-75JJK6BH.js";
+import {
+  useHelperLines
+} from "./chunk-ZATVF42E.js";
+import {
+  getHelperLines
+} from "./chunk-DNZRAJAQ.js";
+import {
+  HelperLines
+} from "./chunk-BJ7UMCD3.js";
+import "./chunk-EUNV2MR5.js";
+import "./chunk-JUPMOISE.js";
+import "./chunk-B6IUPZU7.js";
+import {
+  FlowButtonEdge
+} from "./chunk-XZFE2YYH.js";
+import "./chunk-KDVMGMAK.js";
+import {
+  FLOW_EDGE_FOCUS_CONTOUR_WIDTH,
+  FLOW_EDGE_FOCUS_RING_WIDTH,
+  FlowEdgePath
+} from "./chunk-SXXJV6YJ.js";
 
 // src/index.ts
 import {
-  Background as Background2,
+  Background,
   Controls,
-  MiniMap as MiniMap2,
-  Panel as Panel2,
-  Position as Position8,
-  ReactFlow as ReactFlow2,
-  ReactFlowProvider as ReactFlowProvider2,
-  useReactFlow as useReactFlow6,
+  MiniMap,
+  Panel,
+  Position,
+  ReactFlow,
+  ReactFlowProvider,
+  useReactFlow,
   useNodesState,
   useEdgesState,
   addEdge
 } from "@xyflow/react";
-
-// src/flow-weighted-edge/flow-weighted-edge.tsx
-import { useCallback as useCallback5, useMemo as useMemo3 } from "react";
-import {
-  Position as Position7,
-  getBezierPath as getBezierPath5,
-  getSmoothStepPath,
-  useEdges,
-  useStore
-} from "@xyflow/react";
-import { resolveTokenColor } from "@elabs-ai/components-tokens";
-
-// src/flow-weighted-edge/edge-label-pill.tsx
-import { EdgeLabelRenderer as EdgeLabelRenderer2 } from "@xyflow/react";
-import { cn as cn11 } from "@elabs-ai/components-ui/lib/cn";
-import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
-function EdgeLabelPill({
-  label,
-  secondaryLabel,
-  x,
-  y,
-  selected,
-  className,
-  ...props
-}) {
-  if (!label && !secondaryLabel) return null;
-  const accessibleName = [label, secondaryLabel].filter(Boolean).join(" \xB7 ");
-  return /* @__PURE__ */ jsx15(EdgeLabelRenderer2, { children: /* @__PURE__ */ jsx15(
-    "div",
-    {
-      style: {
-        position: "absolute",
-        transform: `translate(-50%, -50%) translate(${x}px, ${y}px)`,
-        pointerEvents: "none"
-      },
-      className: "nodrag nopan",
-      "data-slot": "edge-label-pill-anchor",
-      children: /* @__PURE__ */ jsxs12(
-        "button",
-        {
-          type: "button",
-          "aria-label": accessibleName,
-          "data-slot": "edge-label-pill",
-          ...props,
-          className: cn11(
-            "pointer-events-auto flex items-center gap-1 rounded-full border bg-flow-node px-2 py-0.5",
-            "text-meta font-medium text-flow-node-foreground shadow-sm",
-            "transition-colors duration-fast ease-standard",
-            "focus-ring",
-            selected ? "border-ring" : "border-flow-group-border",
-            className
-          ),
-          children: [
-            label ? /* @__PURE__ */ jsx15("span", { "aria-hidden": "true", children: label }) : null,
-            secondaryLabel ? /* @__PURE__ */ jsx15("span", { "aria-hidden": "true", className: "text-flow-node-foreground/70 tabular-nums", children: secondaryLabel }) : null
-          ]
-        }
-      )
-    }
-  ) });
-}
-
-// src/flow-weighted-edge/back-edge-geometry.ts
-function backEdgeDetour(rects, axis, span, clearance) {
-  const [lo, hi] = span[0] <= span[1] ? span : [span[1], span[0]];
-  let far = Number.NEGATIVE_INFINITY;
-  for (const rect of rects) {
-    if (!(rect.width > 0) || !(rect.height > 0)) continue;
-    const [near, beyond] = axis === "vertical" ? [rect.y, rect.y + rect.height] : [rect.x, rect.x + rect.width];
-    if (beyond < lo || near > hi) continue;
-    far = Math.max(far, axis === "vertical" ? rect.x + rect.width : rect.y + rect.height);
-  }
-  return Number.isFinite(far) ? far + clearance : null;
-}
-
-// src/flow-weighted-edge/flow-weighted-edge.tsx
-import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
-var NO_NODES = [];
-var FALLBACK_WEAK = "#6085a1";
-var FALLBACK_STRONG = "#496d89";
-var BACK_EDGE_DASHARRAY = "6 4";
-var BACK_EDGE_OPACITY = 0.7;
-var BACK_EDGE_CLEARANCE = 40;
-var DEFAULT_BACK_EDGE_LABEL = "Back edge \u2014 runs against the process direction";
-function clamp01(t) {
-  return Math.min(1, Math.max(0, t));
-}
-function hexToRgb(hex) {
-  const m = /^#?([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})/i.exec(hex);
-  if (!m) return [0, 0, 0];
-  return [parseInt(m[1], 16), parseInt(m[2], 16), parseInt(m[3], 16)];
-}
-function toHexByte(n) {
-  return Math.round(Math.min(255, Math.max(0, n))).toString(16).padStart(2, "0");
-}
-function mixHex(a, b, t) {
-  const [ar, ag, ab] = hexToRgb(a);
-  const [br, bg, bb] = hexToRgb(b);
-  const r = ar + (br - ar) * t;
-  const g = ag + (bg - ag) * t;
-  const bl = ab + (bb - ab) * t;
-  return `#${toHexByte(r)}${toHexByte(g)}${toHexByte(bl)}`;
-}
-function resolveValueStrokeColor(value, domain) {
-  if (value === void 0 || !domain) return void 0;
-  const [lo, hi] = domain;
-  const t = hi === lo ? 1 : clamp01((value - lo) / (hi - lo));
-  const weak = resolveTokenColor("--flow-edge-weak", { fallback: FALLBACK_WEAK });
-  const strong = resolveTokenColor("--flow-edge-strong", { fallback: FALLBACK_STRONG });
-  return mixHex(weak, strong, t);
-}
-function FlowWeightedEdge({
-  id,
-  sourceX,
-  sourceY,
-  targetX,
-  targetY,
-  sourcePosition,
-  targetPosition,
-  markerEnd,
-  style,
-  selected,
-  data
-}) {
-  const edges = useEdges();
-  const widthByEdgeId = useMemo3(
-    () => computeEdgeWeightScale(edges),
-    [edges]
-  );
-  const variant = data?.variant ?? "forward";
-  const isBack = variant === "back";
-  const nodes = useStore(
-    useCallback5((s) => isBack ? s.nodes : NO_NODES, [isBack])
-  );
-  const pathType = data?.path ?? "bezier";
-  const axis = targetPosition === Position7.Top || targetPosition === Position7.Bottom ? "vertical" : "horizontal";
-  const rects = useMemo3(() => {
-    if (!isBack) return [];
-    const out = [];
-    for (const node of nodes) {
-      if (node.parentId) continue;
-      const width = node.measured?.width ?? node.width;
-      const height = node.measured?.height ?? node.height;
-      if (!width || !height) continue;
-      out.push({ x: node.position.x, y: node.position.y, width, height });
-    }
-    return out;
-  }, [isBack, nodes]);
-  const detour = isBack ? backEdgeDetour(
-    rects,
-    axis,
-    axis === "vertical" ? [sourceY, targetY] : [sourceX, targetX],
-    BACK_EDGE_CLEARANCE
-  ) : null;
-  const [edgePath, labelX, labelY] = isBack ? getSmoothStepPath({
-    sourceX,
-    sourceY,
-    sourcePosition,
-    targetX,
-    targetY,
-    targetPosition,
-    offset: BACK_EDGE_CLEARANCE,
-    ...detour === null ? {} : axis === "vertical" ? { centerX: detour } : { centerY: detour }
-  }) : pathType === "smoothstep" ? getSmoothStepPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition }) : getBezierPath5({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition });
-  const scaledWidth = widthByEdgeId.get(id) ?? DEFAULT_EDGE_WIDTH_RANGE[0];
-  const valueColor = useMemo3(
-    () => resolveValueStrokeColor(data?.value, data?.valueDomain),
-    [data?.value, data?.valueDomain]
-  );
-  const stroke = selected ? "var(--ring)" : valueColor ?? "var(--flow-edge)";
-  const strokeWidth = selected ? scaledWidth + 1.5 : scaledWidth;
-  const edge = /* @__PURE__ */ jsx16(
-    FlowEdgePath,
-    {
-      id,
-      path: edgePath,
-      markerEnd,
-      "data-slot": "flow-weighted-edge",
-      "data-variant": variant,
-      "data-weight": data?.weight,
-      "data-value": data?.value,
-      stroke,
-      strokeWidth,
-      strokeDasharray: isBack ? BACK_EDGE_DASHARRAY : void 0,
-      strokeOpacity: isBack ? BACK_EDGE_OPACITY : void 0,
-      style
-    }
-  );
-  return /* @__PURE__ */ jsxs13(Fragment5, { children: [
-    isBack ? (
-      // A `data-variant` is invisible to assistive technology, so the back
-      // edge's meaning is also published as a named graphic. Only the back
-      // variant is wrapped — a forward edge's DOM is unchanged from before
-      // this prop existed.
-      /* @__PURE__ */ jsx16("g", { role: "img", "aria-label": data?.variantLabel ?? DEFAULT_BACK_EDGE_LABEL, children: edge })
-    ) : edge,
-    /* @__PURE__ */ jsx16(
-      EdgeLabelPill,
-      {
-        label: data?.label,
-        secondaryLabel: data?.secondaryLabel,
-        x: labelX,
-        y: labelY,
-        selected,
-        ...data?.labelProps
-      }
-    )
-  ] });
-}
-
-// src/flow-weighted-edge/edge-aria.ts
-var DEFAULT_WEIGHT_LABEL = "weight";
-var DEFAULT_VALUE_LABEL = "value";
-function defaultNameOf(nodeId) {
-  return nodeId;
-}
-function defaultFormatNumber(n) {
-  return String(n);
-}
-function buildWeightedEdgeAriaLabel(edge, opts = {}) {
-  if (edge.ariaLabel) return edge.ariaLabel;
-  const { weight, value, label, secondaryLabel } = edge.data ?? {};
-  if (weight === void 0 && value === void 0 && !label && !secondaryLabel) {
-    return void 0;
-  }
-  const {
-    weightLabel = DEFAULT_WEIGHT_LABEL,
-    valueLabel = DEFAULT_VALUE_LABEL,
-    nameOf = defaultNameOf,
-    formatNumber = defaultFormatNumber
-  } = opts;
-  const parts = [`Edge from ${nameOf(edge.source)} to ${nameOf(edge.target)}`];
-  if (weight !== void 0) parts.push(`${weightLabel} ${formatNumber(weight)}`);
-  if (value !== void 0) parts.push(`${valueLabel} ${formatNumber(value)}`);
-  const pillText = [label, secondaryLabel].filter(Boolean).join(" ");
-  if (pillText) parts.push(pillText);
-  return parts.join(", ");
-}
-function withWeightedEdgeAria(edges, opts) {
-  return edges.map((edge) => {
-    if (edge.ariaLabel) return edge;
-    const ariaLabel = buildWeightedEdgeAriaLabel(edge, opts);
-    return ariaLabel === void 0 ? edge : { ...edge, ariaLabel };
-  });
-}
-
-// src/flow-self-loop-edge/flow-self-loop-edge.tsx
-import { useMemo as useMemo4 } from "react";
-import { useEdges as useEdges2, useInternalNode as useInternalNode3 } from "@xyflow/react";
-
-// src/flow-self-loop-edge/self-loop-geometry.ts
-var DEFAULT_LOOP_RADIUS = 28;
-var CONTROL_REACH_X = 1.2;
-var CONTROL_REACH_Y = 2.4;
-var APEX_FACTOR = 3 / 4 * CONTROL_REACH_Y;
-function selfLoopPath(anchor, loopRadius) {
-  const cx = Number.isFinite(anchor.centerX) ? anchor.centerX : 0;
-  const ay = Number.isFinite(anchor.topY) ? anchor.topY : 0;
-  const r = Number.isFinite(loopRadius) && loopRadius > 0 ? loopRadius : DEFAULT_LOOP_RADIUS;
-  const startX = cx + r;
-  const endX = cx - r;
-  const controlY = ay - r * CONTROL_REACH_Y;
-  return {
-    path: `M ${startX},${ay} C ${startX + r * CONTROL_REACH_X},${controlY} ${endX - r * CONTROL_REACH_X},${controlY} ${endX},${ay}`,
-    labelX: cx,
-    labelY: ay - r * APEX_FACTOR
-  };
-}
-function outward(x, y, centerX, centerY, fallback) {
-  const dx = x - centerX;
-  const dy = y - centerY;
-  const length = Math.hypot(dx, dy);
-  if (!Number.isFinite(length) || length < 1e-6) return fallback;
-  return [dx / length, dy / length];
-}
-function selfLoopHandleArc(anchor, loopRadius) {
-  const num = (value) => Number.isFinite(value) ? value : 0;
-  const sx = num(anchor.sourceX);
-  const sy = num(anchor.sourceY);
-  const tx = num(anchor.targetX);
-  const ty = num(anchor.targetY);
-  const cx = num(anchor.centerX);
-  const cy = num(anchor.centerY);
-  const width = Math.max(0, num(anchor.width));
-  const height = Math.max(0, num(anchor.height));
-  const r = Number.isFinite(loopRadius) && loopRadius > 0 ? loopRadius : DEFAULT_LOOP_RADIUS;
-  const [osx, osy] = outward(sx, sy, cx, cy, [0, 1]);
-  const [otx, oty] = outward(tx, ty, cx, cy, [-osx, -osy]);
-  const lx = osy;
-  const ly = -osx;
-  const clearance = Math.abs(lx) * (width / 2) + Math.abs(ly) * (height / 2) + r;
-  const reach = 4 / 3 * clearance;
-  const c1x = sx + osx * r + lx * reach;
-  const c1y = sy + osy * r + ly * reach;
-  const c2x = tx + otx * r + lx * reach;
-  const c2y = ty + oty * r + ly * reach;
-  return {
-    path: `M ${sx},${sy} C ${c1x},${c1y} ${c2x},${c2y} ${tx},${ty}`,
-    // A cubic's midpoint is (P0 + 3·C1 + 3·C2 + P3) / 8 — the arc's apex, which `reach`
-    // above places `loopRadius` clear of the card, so the label sits off the node.
-    labelX: (sx + 3 * c1x + 3 * c2x + tx) / 8,
-    labelY: (sy + 3 * c1y + 3 * c2y + ty) / 8
-  };
-}
-
-// src/flow-self-loop-edge/flow-self-loop-edge.tsx
-import { Fragment as Fragment6, jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
-function nodeName(data, fallback) {
-  if (data && typeof data === "object" && "title" in data) {
-    const title = data.title;
-    if (typeof title === "string" && title.length > 0) return title;
-  }
-  return fallback;
-}
-function FlowSelfLoopEdge({
-  id,
-  source,
-  sourceX,
-  sourceY,
-  targetX,
-  targetY,
-  markerEnd,
-  style,
-  selected,
-  data
-}) {
-  const edges = useEdges2();
-  const widthByEdgeId = useMemo4(
-    () => computeEdgeWeightScale(edges),
-    [edges]
-  );
-  const node = useInternalNode3(source);
-  const measuredWidth = node?.measured?.width;
-  const measuredHeight = node?.measured?.height;
-  const loopRadius = data?.loopRadius ?? DEFAULT_LOOP_RADIUS;
-  const { path, labelX, labelY } = useMemo4(() => {
-    if (node && measuredWidth && measuredHeight) {
-      return selfLoopHandleArc(
-        {
-          sourceX,
-          sourceY,
-          targetX,
-          targetY,
-          centerX: node.internals.positionAbsolute.x + measuredWidth / 2,
-          centerY: node.internals.positionAbsolute.y + measuredHeight / 2,
-          width: measuredWidth,
-          height: measuredHeight
-        },
-        loopRadius
-      );
-    }
-    return selfLoopPath(
-      { centerX: (sourceX + targetX) / 2, topY: Math.min(sourceY, targetY) },
-      loopRadius
-    );
-  }, [node, measuredWidth, measuredHeight, sourceX, sourceY, targetX, targetY, loopRadius]);
-  const scaledWidth = widthByEdgeId.get(id) ?? DEFAULT_EDGE_WIDTH_RANGE[0];
-  const stroke = selected ? "var(--ring)" : "var(--flow-edge)";
-  const strokeWidth = selected ? scaledWidth + 1.5 : scaledWidth;
-  const accessibleName = data?.loopLabel ?? `Self-loop on ${nodeName(node?.data, source)} \u2014 this step repeats`;
-  return /* @__PURE__ */ jsxs14(Fragment6, { children: [
-    /* @__PURE__ */ jsx17("g", { role: "img", "aria-label": accessibleName, children: /* @__PURE__ */ jsx17(
-      FlowEdgePath,
-      {
-        id,
-        path,
-        markerEnd,
-        "data-slot": "flow-self-loop-edge",
-        stroke,
-        strokeWidth,
-        style: { fill: "none", ...style }
-      }
-    ) }),
-    /* @__PURE__ */ jsx17(
-      EdgeLabelPill,
-      {
-        label: data?.label,
-        secondaryLabel: data?.secondaryLabel,
-        x: labelX,
-        y: labelY,
-        selected,
-        ...data?.labelProps
-      }
-    )
-  ] });
-}
 export {
-  Background2 as Background,
+  Background,
   CanvasShell,
   Controls,
+  DEFAULT_EDGE_TOKEN_RADIUS,
   DEFAULT_EDGE_WIDTH_RANGE,
   DEFAULT_LOOP_RADIUS,
   EdgeLabelPill,
@@ -2324,6 +180,7 @@ export {
   FlowButtonEdge,
   FlowEdge,
   FlowEdgePath,
+  FlowEdgeTokens,
   FlowFloatingEdge,
   FlowGroupNode,
   FlowMiniMap,
@@ -2336,27 +193,31 @@ export {
   HelperLines,
   InspectorPanel,
   Legend,
-  MiniMap2 as MiniMap,
-  Panel2 as Panel,
-  Position8 as Position,
-  ReactFlow2 as ReactFlow,
-  ReactFlowProvider2 as ReactFlowProvider,
+  MiniMap,
+  Panel,
+  Position,
+  ReactFlow,
+  ReactFlowProvider,
   ZoomControls,
   addEdge,
   backEdgeDetour,
   buildWeightedEdgeAriaLabel,
   collapseGroup,
   computeEdgeWeightScale,
+  createEdgePathSampler,
   expandGroup,
+  flattenEdgePath,
   getEdgeParams,
   getHelperLines,
   groupNodes,
   handlePoint,
   isFlowGroupProxyEdge,
   layoutFlow,
+  layoutFlowElk,
   layoutGraph,
   pickClosestAnchors,
   pickClosestHandles,
+  pinBackbone,
   positionToSide,
   selfLoopHandleArc,
   selfLoopPath,
@@ -2369,7 +230,7 @@ export {
   useFlowLayout,
   useHelperLines,
   useNodesState,
-  useReactFlow6 as useReactFlow,
+  useReactFlow,
   withWeightedEdgeAria
 };
 //# sourceMappingURL=index.js.map