@elabs-ai/components-flow 4.0.0

package/dist/index.js

@@ -0,0 +1,1577 @@
+"use client";
+
+// src/canvas-shell/canvas-shell.tsx
+import "react";
+import {
+  Background,
+  ReactFlow,
+  ReactFlowProvider
+} 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/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,
+  ...props
+}) {
+  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 },
+      ...props,
+      children: [
+        background ? /* @__PURE__ */ jsx2(Background, { gap: 20, size: 1, color: "var(--canvas-grid)" }) : null,
+        children
+      ]
+    }
+  ) });
+}
+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-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";
+function FlowNode({
+  data,
+  selected,
+  sourcePosition,
+  targetPosition
+}) {
+  const tone = data.tone ?? "default";
+  const ToneIcon = toneIcon[tone];
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      "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"
+      ),
+      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
+        ] }),
+        toneLabel[tone] ? /* @__PURE__ */ jsx3("span", { className: "sr-only", children: toneLabel[tone] }) : null
+      ]
+    }
+  );
+}
+
+// src/flow-edge/flow-edge.tsx
+import { BaseEdge, getBezierPath } from "@xyflow/react";
+import { jsx as jsx4 } 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__ */ jsx4(
+    BaseEdge,
+    {
+      id,
+      path: edgePath,
+      markerEnd,
+      style: { stroke: "var(--flow-edge)", strokeWidth: 1.5, ...style }
+    }
+  );
+}
+
+// src/flow-smart-edge/flow-smart-edge.tsx
+import {
+  BaseEdge as BaseEdge2,
+  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
+};
+function rectCenter(rect) {
+  return { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 };
+}
+function slideAnchor(rect, side, toward, inset = 12) {
+  const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
+  const ix = Math.min(inset, rect.width / 2);
+  const iy = Math.min(inset, rect.height / 2);
+  switch (side) {
+    case "top":
+      return { x: clamp(toward.x, rect.x + ix, rect.x + rect.width - ix), y: rect.y };
+    case "bottom":
+      return { x: clamp(toward.x, rect.x + ix, rect.x + rect.width - ix), y: rect.y + rect.height };
+    case "left":
+      return { x: rect.x, y: clamp(toward.y, rect.y + iy, rect.y + rect.height - iy) };
+    case "right":
+      return { x: rect.x + rect.width, y: clamp(toward.y, rect.y + iy, rect.y + rect.height - iy) };
+  }
+}
+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 jsx5 } 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 FlowSmartEdge({ id, source, target, markerEnd, style }) {
+  const sourceNode = useInternalNode(source);
+  const targetNode = useInternalNode(target);
+  if (!sourceNode || !targetNode) return null;
+  const sourceData = sourceNode.internals.userNode.data;
+  const targetData = targetNode.internals.userNode.data;
+  const sourceRect = toRect(sourceNode);
+  const targetRect = toRect(targetNode);
+  const { sourceSide, targetSide } = pickClosestHandles(
+    sourceRect,
+    sourceData?.handles?.source ?? [],
+    targetRect,
+    targetData?.handles?.target ?? []
+  );
+  const sourceAnchor = slideAnchor(sourceRect, sourceSide, rectCenter(targetRect));
+  const targetAnchor = slideAnchor(targetRect, targetSide, rectCenter(sourceRect));
+  const [edgePath] = getBezierPath2({
+    sourceX: sourceAnchor.x,
+    sourceY: sourceAnchor.y,
+    sourcePosition: sideToPosition[sourceSide],
+    targetX: targetAnchor.x,
+    targetY: targetAnchor.y,
+    targetPosition: sideToPosition[targetSide]
+  });
+  return /* @__PURE__ */ jsx5(
+    BaseEdge2,
+    {
+      id,
+      path: edgePath,
+      markerEnd,
+      style: { stroke: "var(--flow-edge)", strokeWidth: 1.5, ...style }
+    }
+  );
+}
+
+// src/flow-floating-edge/flow-floating-edge.tsx
+import { BaseEdge as BaseEdge3, 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 Fragment2, jsx as jsx6, jsxs as jsxs4 } 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__ */ jsxs4(Fragment2, { children: [
+    /* @__PURE__ */ jsx6(
+      BaseEdge3,
+      {
+        id,
+        path: edgePath,
+        markerEnd,
+        style: { stroke: "var(--flow-edge)", strokeWidth: 1.5, ...style }
+      }
+    ),
+    showAnchors ? /* @__PURE__ */ jsxs4(
+      "g",
+      {
+        className: "brand-floating-edge__anchors",
+        fill: "var(--flow-node)",
+        stroke: "var(--flow-edge)",
+        children: [
+          /* @__PURE__ */ jsx6(
+            "circle",
+            {
+              cx: sx,
+              cy: sy,
+              r: ANCHOR_RADIUS,
+              strokeWidth: 2,
+              style: { pointerEvents: "none" },
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            "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 cn4 } from "@elabs-ai/components-ui/lib/cn";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function FlowPlaceholderNode({ data }) {
+  const label = data.label ?? "Add node";
+  return /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx7(
+      Handle2,
+      {
+        type: "target",
+        position: Position4.Top,
+        className: "!size-2 !border-2 !border-flow-edge !bg-flow-node"
+      }
+    ),
+    /* @__PURE__ */ jsxs5(
+      "button",
+      {
+        type: "button",
+        "aria-label": label,
+        onClick: () => data.onActivate?.(),
+        className: cn4(
+          "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-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        ),
+        children: [
+          /* @__PURE__ */ jsx7(Plus, { className: "size-4", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx7("span", { className: "text-body", children: label })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/flow-button-edge/flow-button-edge.tsx
+import {
+  BaseEdge as BaseEdge4,
+  EdgeLabelRenderer,
+  getBezierPath as getBezierPath4
+} from "@xyflow/react";
+import { Plus as Plus2 } from "lucide-react";
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs6 } 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__ */ jsxs6(Fragment3, { children: [
+    /* @__PURE__ */ jsx8(
+      BaseEdge4,
+      {
+        id,
+        path: edgePath,
+        markerEnd,
+        style: { stroke: "var(--flow-edge)", strokeWidth: 1.5, ...style }
+      }
+    ),
+    /* @__PURE__ */ jsx8(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx8(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`
+        },
+        className: "nodrag nopan pointer-events-auto",
+        children: /* @__PURE__ */ jsx8(
+          "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-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            children: /* @__PURE__ */ jsx8(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 });
+  }
+  for (const edge of edges) {
+    graph.setEdge(edge.source, edge.target);
+  }
+  dagre.layout(graph);
+  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 };
+}
+
+// src/flow-layout/use-flow-layout.ts
+import { useCallback as useCallback2, useRef, useState as useState2 } from "react";
+import { useNodesInitialized, useReactFlow as useReactFlow2 } from "@xyflow/react";
+function useFlowLayout() {
+  const { getNodes, getEdges, setNodes, fitView } = useReactFlow2();
+  const nodesInitialized = useNodesInitialized();
+  const [layouting, setLayouting] = useState2(false);
+  const runningRef = useRef(false);
+  const layout = useCallback2(
+    (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
+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 layoutLayeredLr(nodes, edges, options);
+    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 layoutLayeredLr(nodes, edges, options) {
+  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 { nodes: laidOut } = layoutFlow(sizedNodes, edges, {
+    direction: "LR",
+    // For an LR flow, ranks progress horizontally (x) and nodes within a rank
+    // stack vertically (y) — map spacing accordingly onto dagre's rank/node sep.
+    nodeSpacing: spacing?.y,
+    rankSpacing: spacing?.x
+  });
+  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 } from "react";
+function useAutoLayout(nodes, edges, options) {
+  return useMemo(
+    () => layoutGraph(nodes, edges, options),
+    [nodes, edges, options]
+  );
+}
+
+// src/flow-mini-map/flow-mini-map.tsx
+import { MiniMap } from "@xyflow/react";
+import { cn as cn5 } from "@elabs-ai/components-ui/lib/cn";
+import { jsx as jsx9 } 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__ */ jsx9(
+    MiniMap,
+    {
+      className: cn5("!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 cn6 } from "@elabs-ai/components-ui/lib/cn";
+import { jsx as jsx10, jsxs as jsxs7 } 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__ */ jsxs7(
+    "div",
+    {
+      className: cn6("group relative h-full overflow-hidden", className),
+      style: { "--inspector-panel-width": width },
+      inert: panel.open ? void 0 : true,
+      ...panel.attrs,
+      children: [
+        /* @__PURE__ */ jsx10("div", { "data-slot": "inspector-panel-gap", className: panel.spacerClassName }),
+        /* @__PURE__ */ jsx10(
+          "div",
+          {
+            "data-slot": "inspector-panel-container",
+            className: cn6(panel.containerClassName, "absolute inset-y-0 flex h-full border-s"),
+            children: /* @__PURE__ */ jsxs7("div", { className: "flex h-full w-full flex-col bg-card", children: [
+              /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between border-b px-4 py-3", children: [
+                /* @__PURE__ */ jsx10("h3", { className: "text-body font-semibold text-foreground", children: title }),
+                onClose ? /* @__PURE__ */ jsx10(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": "Close inspector",
+                    onClick: onClose,
+                    className: "rounded-sm p-1 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                    children: /* @__PURE__ */ jsx10(
+                      "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__ */ jsx10("path", { d: "M18 6 6 18M6 6l12 12" })
+                      }
+                    )
+                  }
+                ) : null
+              ] }),
+              hasSelection ? /* @__PURE__ */ jsx10(
+                Reveal,
+                {
+                  appear: "fade",
+                  speed: "fast",
+                  className: "flex-1 overflow-y-auto p-4 text-body",
+                  children
+                },
+                selectionKey
+              ) : /* @__PURE__ */ jsx10("div", { className: "flex-1 overflow-y-auto p-4 text-body", children: /* @__PURE__ */ jsx10("p", { className: "text-muted-foreground", children: emptyMessage }) })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/legend/legend.tsx
+import { cn as cn7 } from "@elabs-ai/components-ui/lib/cn";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+function Legend({ items, title, className }) {
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      className: cn7(
+        "rounded-lg bg-surface-elevated/90 p-3 text-xs shadow-ring-sm backdrop-blur",
+        className
+      ),
+      children: [
+        title ? /* @__PURE__ */ jsx11("div", { className: "mb-1.5 font-medium text-foreground", children: title }) : null,
+        /* @__PURE__ */ jsx11("ul", { className: "space-y-1", children: items.map((item) => /* @__PURE__ */ jsxs8("li", { className: "flex items-center gap-2 text-muted-foreground", children: [
+          /* @__PURE__ */ jsx11(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "size-2.5 shrink-0 rounded-full",
+              style: { backgroundColor: item.color }
+            }
+          ),
+          item.label
+        ] }, item.label)) })
+      ]
+    }
+  );
+}
+
+// src/zoom-controls/zoom-controls.tsx
+import { Panel, useReactFlow as useReactFlow3 } from "@xyflow/react";
+import { cn as cn8 } from "@elabs-ai/components-ui/lib/cn";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+function ControlButton({
+  label,
+  onClick,
+  children
+}) {
+  return /* @__PURE__ */ jsx12(
+    "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-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&_svg]:size-4",
+      children
+    }
+  );
+}
+function ZoomControls({ position = "bottom-right", className }) {
+  const { zoomIn, zoomOut, fitView } = useReactFlow3();
+  return /* @__PURE__ */ jsx12(Panel, { position, children: /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      className: cn8(
+        "flex divide-x overflow-hidden rounded-lg bg-surface-elevated shadow-ring-sm",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx12(ControlButton, { label: "Zoom in", onClick: () => zoomIn(), children: /* @__PURE__ */ jsx12(
+          "svg",
+          {
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            children: /* @__PURE__ */ jsx12("path", { d: "M12 5v14M5 12h14" })
+          }
+        ) }),
+        /* @__PURE__ */ jsx12(ControlButton, { label: "Zoom out", onClick: () => zoomOut(), children: /* @__PURE__ */ jsx12(
+          "svg",
+          {
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            children: /* @__PURE__ */ jsx12("path", { d: "M5 12h14" })
+          }
+        ) }),
+        /* @__PURE__ */ jsx12(ControlButton, { label: "Fit view", onClick: () => fitView(), children: /* @__PURE__ */ jsx12(
+          "svg",
+          {
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /* @__PURE__ */ jsx12("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 cn9 } from "@elabs-ai/components-ui/lib/cn";
+
+// src/use-flow-groups/use-flow-groups.ts
+import { useCallback as useCallback3 } from "react";
+import { useReactFlow as useReactFlow4 } 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 } = useReactFlow4();
+  const apply = useCallback3(
+    (result) => {
+      setNodes(result.nodes);
+      setEdges(result.edges);
+    },
+    [setNodes, setEdges]
+  );
+  const groupNodes2 = useCallback3(
+    (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 = useCallback3(
+    (options) => {
+      const selectedIds = getNodes().filter((n) => n.selected && !n.parentId).map((n) => n.id);
+      return groupNodes2(selectedIds, options);
+    },
+    [getNodes, groupNodes2]
+  );
+  const ungroup2 = useCallback3(
+    (groupId) => apply(ungroup(getNodes(), getEdges(), groupId)),
+    [getNodes, getEdges, apply]
+  );
+  const collapseGroup2 = useCallback3(
+    (groupId) => apply(collapseGroup(getNodes(), getEdges(), groupId)),
+    [getNodes, getEdges, apply]
+  );
+  const expandGroup2 = useCallback3(
+    (groupId) => apply(expandGroup(getNodes(), getEdges(), groupId)),
+    [getNodes, getEdges, apply]
+  );
+  const toggleCollapse = useCallback3(
+    (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 jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+var toneAccent = {
+  default: "text-muted-foreground",
+  // #399 — the group LABEL is text on the canvas, so it takes the on-surface
+  // `-text` rung. (The status rows below stay on their fill rungs; those are a
+  // separate, still-open question, not part of #399's enumerated call sites.)
+  accent: "text-primary-text",
+  success: "text-success",
+  warning: "text-warning",
+  destructive: "text-destructive"
+};
+var handleClassName2 = "!size-2 !border-2 !border-flow-group-border !bg-flow-group";
+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__ */ jsxs10(
+    "div",
+    {
+      className: cn9(
+        "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__ */ jsx13(
+          NodeResizer,
+          {
+            minWidth: 160,
+            minHeight: 96,
+            lineClassName: "!border-flow-group-border",
+            handleClassName: handleClassName2
+          }
+        ) : null,
+        /* @__PURE__ */ jsx13(Handle3, { type: "target", position: Position6.Top, className: handleClassName2 }),
+        /* @__PURE__ */ jsx13(Handle3, { type: "source", position: Position6.Bottom, className: handleClassName2 }),
+        /* @__PURE__ */ jsxs10(
+          "div",
+          {
+            className: cn9(
+              "flex items-center gap-2 px-3 py-2",
+              !collapsed && "border-b border-flow-group-border"
+            ),
+            children: [
+              /* @__PURE__ */ jsx13(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => toggleCollapse(id),
+                  "aria-label": collapsed ? `Expand group ${data.title}` : `Collapse group ${data.title}`,
+                  "aria-expanded": !collapsed,
+                  className: cn9(
+                    "-ml-1 grid size-5 shrink-0 place-items-center rounded",
+                    "text-muted-foreground hover:bg-muted hover:text-foreground",
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                  ),
+                  children: collapsed ? /* @__PURE__ */ jsx13(ChevronRight, { "aria-hidden": "true", className: "size-4" }) : /* @__PURE__ */ jsx13(ChevronDown, { "aria-hidden": "true", className: "size-4" })
+                }
+              ),
+              data.icon ? /* @__PURE__ */ jsx13("span", { className: cn9("[&_svg]:size-4", toneAccent[tone]), children: data.icon }) : null,
+              /* @__PURE__ */ jsx13("span", { className: "min-w-0 flex-1 truncate text-body font-medium", children: data.title }),
+              /* @__PURE__ */ jsx13(
+                "span",
+                {
+                  className: cn9(
+                    "shrink-0 rounded-full bg-muted px-1.5 py-0.5 text-meta font-medium tabular-nums",
+                    toneAccent[tone]
+                  ),
+                  "aria-label": `${childCount} ${childCount === 1 ? "node" : "nodes"}`,
+                  children: childCount
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/index.ts
+import {
+  Background as Background2,
+  Controls,
+  MiniMap as MiniMap2,
+  Panel as Panel2,
+  Position as Position7,
+  ReactFlow as ReactFlow2,
+  ReactFlowProvider as ReactFlowProvider2,
+  useReactFlow as useReactFlow5,
+  useNodesState,
+  useEdgesState,
+  addEdge
+} from "@xyflow/react";
+export {
+  Background2 as Background,
+  CanvasShell,
+  Controls,
+  FLOW_ALL_SIDE_HANDLES,
+  FLOW_GROUP_NODE_TYPE,
+  FlowButtonEdge,
+  FlowEdge,
+  FlowFloatingEdge,
+  FlowGroupNode,
+  FlowMiniMap,
+  FlowNode,
+  FlowPlaceholderNode,
+  FlowSmartEdge,
+  HANDLE_SIDES,
+  HelperLines,
+  InspectorPanel,
+  Legend,
+  MiniMap2 as MiniMap,
+  Panel2 as Panel,
+  Position7 as Position,
+  ReactFlow2 as ReactFlow,
+  ReactFlowProvider2 as ReactFlowProvider,
+  ZoomControls,
+  addEdge,
+  collapseGroup,
+  expandGroup,
+  getEdgeParams,
+  getHelperLines,
+  groupNodes,
+  handlePoint,
+  isFlowGroupProxyEdge,
+  layoutFlow,
+  layoutGraph,
+  pickClosestHandles,
+  sideToPosition,
+  toggleGroupCollapsed,
+  ungroup,
+  useAutoLayout,
+  useEdgesState,
+  useFlowGroups,
+  useFlowLayout,
+  useHelperLines,
+  useNodesState,
+  useReactFlow5 as useReactFlow
+};
+//# sourceMappingURL=index.js.map