@elabs-ai/components-flow 4.0.0 → 4.2.0

package/dist/index.js

@@ -1,11 +1,14 @@
 "use client";
 
 // src/canvas-shell/canvas-shell.tsx
-import "react";
+import { useEffect } from "react";
 import {
   Background,
   ReactFlow,
-  ReactFlowProvider
+  ReactFlowProvider,
+  useNodesInitialized,
+  useReactFlow as useReactFlow2,
+  useStoreApi
 } from "@xyflow/react";
 import { cn as cn2 } from "@elabs-ai/components-ui/lib/cn";
 
@@ -149,6 +152,51 @@ function useHelperLines(onNodesChange, options = {}) {
   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 = {
@@ -177,22 +225,65 @@ function CanvasShellBase({
   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,
@@ -209,6 +300,9 @@ function CanvasShellWithHelperLines({
   ] });
 }
 
+// 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";
@@ -251,7 +345,7 @@ var sidePosition = {
   bottom: Position.Bottom,
   left: Position.Left
 };
-var handleClassName = "!size-2 !border-2 !border-flow-edge !bg-flow-node";
+var handleClassName = `!size-2 !border-2 !border-flow-edge !bg-flow-node ${FLOW_HANDLE_ANCHOR_CLASS}`;
 function FlowNode({
   data,
   selected,
@@ -263,11 +357,13 @@ function FlowNode({
   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"
+        selected && "ring-2 ring-ring",
+        "[[data-id]:focus-visible_&]:focus-ring-static"
       ),
       children: [
         data.handles ? /* @__PURE__ */ jsxs3(Fragment, { children: [
@@ -318,6 +414,7 @@ function FlowNode({
           ] }),
           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
       ]
     }
@@ -325,8 +422,81 @@ function FlowNode({
 }
 
 // src/flow-edge/flow-edge.tsx
-import { BaseEdge, getBezierPath } from "@xyflow/react";
-import { jsx as jsx4 } from "react/jsx-runtime";
+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,
@@ -346,20 +516,22 @@ function FlowEdge({
     sourcePosition,
     targetPosition
   });
-  return /* @__PURE__ */ jsx4(
-    BaseEdge,
+  return /* @__PURE__ */ jsx5(
+    FlowEdgePath,
     {
       id,
       path: edgePath,
       markerEnd,
-      style: { stroke: "var(--flow-edge)", strokeWidth: 1.5, ...style }
+      "data-slot": "flow-edge",
+      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";
@@ -373,23 +545,28 @@ var sideToPosition = {
   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) };
+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) {
@@ -425,7 +602,7 @@ function pickClosestHandles(source, sourceSides, target, targetSides) {
 }
 
 // src/flow-smart-edge/flow-smart-edge.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function toRect(node) {
   return {
     x: node.internals.positionAbsolute.x,
@@ -434,43 +611,87 @@ function toRect(node) {
     height: node.measured.height ?? 0
   };
 }
-function FlowSmartEdge({ id, source, target, markerEnd, style }) {
+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 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 picked = pickClosestAnchors(
+    anchorsOf(sourceNode, "source", sourceHandleId),
+    anchorsOf(targetNode, "target", targetHandleId)
   );
-  const sourceAnchor = slideAnchor(sourceRect, sourceSide, rectCenter(targetRect));
-  const targetAnchor = slideAnchor(targetRect, targetSide, rectCenter(sourceRect));
+  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: sourceAnchor.x,
-    sourceY: sourceAnchor.y,
-    sourcePosition: sideToPosition[sourceSide],
-    targetX: targetAnchor.x,
-    targetY: targetAnchor.y,
-    targetPosition: sideToPosition[targetSide]
+    sourceX: sx,
+    sourceY: sy,
+    sourcePosition,
+    targetX: tx,
+    targetY: ty,
+    targetPosition
   });
-  return /* @__PURE__ */ jsx5(
-    BaseEdge2,
+  return /* @__PURE__ */ jsx6(
+    FlowEdgePath,
     {
       id,
       path: edgePath,
       markerEnd,
-      style: { stroke: "var(--flow-edge)", strokeWidth: 1.5, ...style }
+      "data-slot": "flow-smart-edge",
+      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";
+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";
@@ -539,7 +760,7 @@ function getEdgeParams(source, target) {
 }
 
 // src/flow-floating-edge/flow-floating-edge.tsx
-import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+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);
@@ -555,24 +776,27 @@ function FlowFloatingEdge({ id, source, target, markerEnd, style, data }) {
     targetPosition: targetPos
   });
   const showAnchors = data?.anchors !== false;
-  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-    /* @__PURE__ */ jsx6(
-      BaseEdge3,
+  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
+    /* @__PURE__ */ jsx7(
+      FlowEdgePath,
       {
         id,
         path: edgePath,
         markerEnd,
-        style: { stroke: "var(--flow-edge)", strokeWidth: 1.5, ...style }
+        "data-slot": "flow-floating-edge",
+        stroke: "var(--flow-edge)",
+        strokeWidth: 1.5,
+        style
       }
     ),
-    showAnchors ? /* @__PURE__ */ jsxs4(
+    showAnchors ? /* @__PURE__ */ jsxs5(
       "g",
       {
         className: "brand-floating-edge__anchors",
         fill: "var(--flow-node)",
         stroke: "var(--flow-edge)",
         children: [
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx7(
             "circle",
             {
               cx: sx,
@@ -583,7 +807,7 @@ function FlowFloatingEdge({ id, source, target, markerEnd, style, data }) {
               "aria-hidden": "true"
             }
           ),
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx7(
             "circle",
             {
               cx: tx,
@@ -603,33 +827,33 @@ function FlowFloatingEdge({ id, source, target, markerEnd, style, data }) {
 // 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";
+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__ */ jsxs5("div", { className: "relative", children: [
-    /* @__PURE__ */ jsx7(
+  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"
+        className: `!size-2 !border-2 !border-flow-edge !bg-flow-node ${FLOW_HANDLE_ANCHOR_CLASS}`
       }
     ),
-    /* @__PURE__ */ jsxs5(
+    /* @__PURE__ */ jsxs6(
       "button",
       {
         type: "button",
         "aria-label": label,
         onClick: () => data.onActivate?.(),
-        className: cn4(
+        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-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          "focus-ring"
         ),
         children: [
-          /* @__PURE__ */ jsx7(Plus, { className: "size-4", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx7("span", { className: "text-body", children: label })
+          /* @__PURE__ */ jsx8(Plus, { className: "size-4", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx8("span", { className: "text-body", children: label })
         ]
       }
     )
@@ -637,13 +861,9 @@ function FlowPlaceholderNode({ data }) {
 }
 
 // src/flow-button-edge/flow-button-edge.tsx
-import {
-  BaseEdge as BaseEdge4,
-  EdgeLabelRenderer,
-  getBezierPath as getBezierPath4
-} from "@xyflow/react";
+import { 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";
+import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function FlowButtonEdge({
   id,
   sourceX,
@@ -665,17 +885,20 @@ function FlowButtonEdge({
     targetPosition
   });
   const label = data?.label ?? "Insert node on edge";
-  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
-    /* @__PURE__ */ jsx8(
-      BaseEdge4,
+  return /* @__PURE__ */ jsxs7(Fragment4, { children: [
+    /* @__PURE__ */ jsx9(
+      FlowEdgePath,
       {
         id,
         path: edgePath,
         markerEnd,
-        style: { stroke: "var(--flow-edge)", strokeWidth: 1.5, ...style }
+        "data-slot": "flow-button-edge",
+        stroke: "var(--flow-edge)",
+        strokeWidth: 1.5,
+        style
       }
     ),
-    /* @__PURE__ */ jsx8(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx9(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx9(
       "div",
       {
         style: {
@@ -683,14 +906,14 @@ function FlowButtonEdge({
           transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`
         },
         className: "nodrag nopan pointer-events-auto",
-        children: /* @__PURE__ */ jsx8(
+        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-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-            children: /* @__PURE__ */ jsx8(Plus2, { className: "size-3", "aria-hidden": "true" })
+            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" })
           }
         )
       }
@@ -724,10 +947,16 @@ function layoutFlow(nodes, edges, options = {}) {
     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);
@@ -744,18 +973,29 @@ function layoutFlow(nodes, edges, options = {}) {
       }
     };
   });
-  return { nodes: layoutedNodes, edges };
+  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 useCallback2, useRef, useState as useState2 } from "react";
-import { useNodesInitialized, useReactFlow as useReactFlow2 } from "@xyflow/react";
+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 } = useReactFlow2();
-  const nodesInitialized = useNodesInitialized();
-  const [layouting, setLayouting] = useState2(false);
-  const runningRef = useRef(false);
-  const layout = useCallback2(
+  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;
@@ -803,7 +1043,9 @@ function layoutGraph(nodes, edges, options) {
   if (nodes.length === 0) return [];
   switch (options.algorithm) {
     case "layered-lr":
-      return layoutLayeredLr(nodes, edges, options);
+      return layoutLayered(nodes, edges, options, "LR");
+    case "layered-tb":
+      return layoutLayered(nodes, edges, options, "TB");
     case "concentric":
       return layoutConcentric(nodes, edges, options);
     case "force":
@@ -816,18 +1058,17 @@ function layoutGraph(nodes, edges, options) {
     }
   }
 }
-function layoutLayeredLr(nodes, edges, options) {
+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: "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
+    direction,
+    nodeSpacing: horizontalRanks ? spacing?.y : spacing?.x,
+    rankSpacing: horizontalRanks ? spacing?.x : spacing?.y
   });
   return nodes.map((node, i) => ({
     ...node,
@@ -952,9 +1193,9 @@ function layoutGrid(nodes, options) {
 }
 
 // src/flow-layout/use-auto-layout.ts
-import { useMemo } from "react";
+import { useMemo as useMemo2 } from "react";
 function useAutoLayout(nodes, edges, options) {
-  return useMemo(
+  return useMemo2(
     () => layoutGraph(nodes, edges, options),
     [nodes, edges, options]
   );
@@ -962,8 +1203,8 @@ function useAutoLayout(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";
+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)",
@@ -971,10 +1212,10 @@ function FlowMiniMap({
   maskColor = "var(--flow-minimap-mask)",
   ...props
 }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     MiniMap,
     {
-      className: cn5("!rounded-lg !bg-surface-elevated !shadow-ring-sm", className),
+      className: cn6("!rounded-lg !bg-surface-elevated !shadow-ring-sm", className),
       nodeColor,
       nodeStrokeColor,
       maskColor,
@@ -985,15 +1226,15 @@ function FlowMiniMap({
 
 // 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";
+import { Reveal, useCollapsiblePanel, useLocale } 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",
+  title,
   children,
   onClose,
-  emptyMessage = "Select a node to see its details.",
+  emptyMessage,
   hasSelection = true,
   selectionKey,
   open,
@@ -1003,6 +1244,9 @@ function InspectorPanel({
   width = INSPECTOR_PANEL_WIDTH,
   className
 }) {
+  const { t } = useLocale();
+  const resolvedTitle = title ?? t("flow.inspectorPanel.title");
+  const resolvedEmptyMessage = emptyMessage ?? t("flow.inspectorPanel.emptyMessage");
   const panel = useCollapsiblePanel({
     side,
     open,
@@ -1015,31 +1259,31 @@ function InspectorPanel({
       right: "right-0 group-data-[state=collapsed]:right-[calc(var(--inspector-panel-width)*-1)]"
     }
   });
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
-      className: cn6("group relative h-full overflow-hidden", className),
+      className: cn7("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(
+        /* @__PURE__ */ jsx11("div", { "data-slot": "inspector-panel-gap", className: panel.spacerClassName }),
+        /* @__PURE__ */ jsx11(
           "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(
+            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: resolvedTitle }),
+                onClose ? /* @__PURE__ */ jsx11(
                   "button",
                   {
                     type: "button",
-                    "aria-label": "Close inspector",
+                    "aria-label": t("flow.inspectorPanel.close"),
                     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(
+                    className: "rounded-sm p-1 text-muted-foreground hover:text-foreground focus-ring",
+                    children: /* @__PURE__ */ jsx11(
                       "svg",
                       {
                         width: "14",
@@ -1051,22 +1295,23 @@ function InspectorPanel({
                         strokeLinecap: "round",
                         strokeLinejoin: "round",
                         "aria-hidden": "true",
-                        children: /* @__PURE__ */ jsx10("path", { d: "M18 6 6 18M6 6l12 12" })
+                        children: /* @__PURE__ */ jsx11("path", { d: "M18 6 6 18M6 6l12 12" })
                       }
                     )
                   }
                 ) : null
               ] }),
-              hasSelection ? /* @__PURE__ */ jsx10(
+              hasSelection ? /* @__PURE__ */ jsx11(
                 Reveal,
                 {
                   appear: "fade",
                   speed: "fast",
-                  className: "flex-1 overflow-y-auto p-4 text-body",
+                  tabIndex: 0,
+                  className: "focus-ring 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 }) })
+              ) : /* @__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: resolvedEmptyMessage }) })
             ] })
           }
         )
@@ -1076,20 +1321,64 @@ function InspectorPanel({
 }
 
 // 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(
+import { useLocale as useLocale2 } from "@elabs-ai/components-ui";
+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";
+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: cn7(
+      className: cn8(
         "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(
+        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",
@@ -1103,38 +1392,145 @@ function Legend({ items, title, className }) {
     }
   );
 }
+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,
+  ticks = "minmax",
+  title,
+  className
+}) {
+  const { formatNumber } = useLocale2();
+  const format_ = format ?? formatNumber;
+  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: format_, ticks }) : /* @__PURE__ */ jsx12(LegendScaleColor, { domain, format: 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 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";
+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__ */ jsx12(
+  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-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&_svg]:size-4",
+      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 } = useReactFlow3();
-  return /* @__PURE__ */ jsx12(Panel, { position, children: /* @__PURE__ */ jsxs9(
+  const { zoomIn, zoomOut, fitView } = useReactFlow4();
+  return /* @__PURE__ */ jsx13(Panel, { position, children: /* @__PURE__ */ jsxs10(
     "div",
     {
-      className: cn8(
+      className: cn9(
         "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(
+        /* @__PURE__ */ jsx13(ControlButton, { label: "Zoom in", onClick: () => zoomIn(), children: /* @__PURE__ */ jsx13(
           "svg",
           {
             viewBox: "0 0 24 24",
@@ -1142,10 +1538,10 @@ function ZoomControls({ position = "bottom-right", className }) {
             stroke: "currentColor",
             strokeWidth: "2",
             strokeLinecap: "round",
-            children: /* @__PURE__ */ jsx12("path", { d: "M12 5v14M5 12h14" })
+            children: /* @__PURE__ */ jsx13("path", { d: "M12 5v14M5 12h14" })
           }
         ) }),
-        /* @__PURE__ */ jsx12(ControlButton, { label: "Zoom out", onClick: () => zoomOut(), children: /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx13(ControlButton, { label: "Zoom out", onClick: () => zoomOut(), children: /* @__PURE__ */ jsx13(
           "svg",
           {
             viewBox: "0 0 24 24",
@@ -1153,10 +1549,10 @@ function ZoomControls({ position = "bottom-right", className }) {
             stroke: "currentColor",
             strokeWidth: "2",
             strokeLinecap: "round",
-            children: /* @__PURE__ */ jsx12("path", { d: "M5 12h14" })
+            children: /* @__PURE__ */ jsx13("path", { d: "M5 12h14" })
           }
         ) }),
-        /* @__PURE__ */ jsx12(ControlButton, { label: "Fit view", onClick: () => fitView(), children: /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx13(ControlButton, { label: "Fit view", onClick: () => fitView(), children: /* @__PURE__ */ jsx13(
           "svg",
           {
             viewBox: "0 0 24 24",
@@ -1165,7 +1561,7 @@ function ZoomControls({ position = "bottom-right", className }) {
             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" })
+            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" })
           }
         ) })
       ]
@@ -1177,11 +1573,11 @@ function ZoomControls({ position = "bottom-right", className }) {
 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";
+import { cn as cn10 } 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";
+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";
@@ -1375,15 +1771,15 @@ function generateGroupId() {
   return `flow-group-${Math.random().toString(36).slice(2, 9)}`;
 }
 function useFlowGroups() {
-  const { getNodes, getEdges, setNodes, setEdges } = useReactFlow4();
-  const apply = useCallback3(
+  const { getNodes, getEdges, setNodes, setEdges } = useReactFlow5();
+  const apply = useCallback4(
     (result) => {
       setNodes(result.nodes);
       setEdges(result.edges);
     },
     [setNodes, setEdges]
   );
-  const groupNodes2 = useCallback3(
+  const groupNodes2 = useCallback4(
     (nodeIds, options) => {
       if (nodeIds.length === 0) return void 0;
       const groupId = options?.groupId ?? generateGroupId();
@@ -1396,26 +1792,26 @@ function useFlowGroups() {
     },
     [getNodes, getEdges, apply]
   );
-  const groupSelection = useCallback3(
+  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 = useCallback3(
+  const ungroup2 = useCallback4(
     (groupId) => apply(ungroup(getNodes(), getEdges(), groupId)),
     [getNodes, getEdges, apply]
   );
-  const collapseGroup2 = useCallback3(
+  const collapseGroup2 = useCallback4(
     (groupId) => apply(collapseGroup(getNodes(), getEdges(), groupId)),
     [getNodes, getEdges, apply]
   );
-  const expandGroup2 = useCallback3(
+  const expandGroup2 = useCallback4(
     (groupId) => apply(expandGroup(getNodes(), getEdges(), groupId)),
     [getNodes, getEdges, apply]
   );
-  const toggleCollapse = useCallback3(
+  const toggleCollapse = useCallback4(
     (groupId) => apply(toggleGroupCollapsed(getNodes(), getEdges(), groupId)),
     [getNodes, getEdges, apply]
   );
@@ -1430,18 +1826,22 @@ function useFlowGroups() {
 }
 
 // src/flow-group-node/flow-group-node.tsx
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
-var toneAccent = {
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+var toneMark = {
   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";
+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();
@@ -1449,17 +1849,17 @@ function FlowGroupNode({ id, data, selected }) {
   const tone = data.tone ?? "default";
   const liveChildCount = nodes.filter((n) => n.parentId === id).length;
   const childCount = liveChildCount || data.childCount || 0;
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
-      className: cn9(
+      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__ */ jsx13(
+        !collapsed && selected ? /* @__PURE__ */ jsx14(
           NodeResizer,
           {
             minWidth: 160,
@@ -1468,39 +1868,39 @@ function FlowGroupNode({ id, data, selected }) {
             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(
+        /* @__PURE__ */ jsx14(Handle3, { type: "target", position: Position6.Top, className: handleClassName2 }),
+        /* @__PURE__ */ jsx14(Handle3, { type: "source", position: Position6.Bottom, className: handleClassName2 }),
+        /* @__PURE__ */ jsxs11(
           "div",
           {
-            className: cn9(
+            className: cn10(
               "flex items-center gap-2 px-3 py-2",
               !collapsed && "border-b border-flow-group-border"
             ),
             children: [
-              /* @__PURE__ */ jsx13(
+              /* @__PURE__ */ jsx14(
                 "button",
                 {
                   type: "button",
                   onClick: () => toggleCollapse(id),
                   "aria-label": collapsed ? `Expand group ${data.title}` : `Collapse group ${data.title}`,
                   "aria-expanded": !collapsed,
-                  className: cn9(
+                  className: cn10(
                     "-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"
+                    "focus-ring"
                   ),
-                  children: collapsed ? /* @__PURE__ */ jsx13(ChevronRight, { "aria-hidden": "true", className: "size-4" }) : /* @__PURE__ */ jsx13(ChevronDown, { "aria-hidden": "true", className: "size-4" })
+                  children: collapsed ? /* @__PURE__ */ jsx14(ChevronRight, { "aria-hidden": "true", className: "size-4" }) : /* @__PURE__ */ jsx14(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(
+              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: cn9(
+                  className: cn10(
                     "shrink-0 rounded-full bg-muted px-1.5 py-0.5 text-meta font-medium tabular-nums",
-                    toneAccent[tone]
+                    toneInk[tone]
                   ),
                   "aria-label": `${childCount} ${childCount === 1 ? "node" : "nodes"}`,
                   children: childCount
@@ -1520,40 +1920,438 @@ import {
   Controls,
   MiniMap as MiniMap2,
   Panel as Panel2,
-  Position as Position7,
+  Position as Position8,
   ReactFlow as ReactFlow2,
   ReactFlowProvider as ReactFlowProvider2,
-  useReactFlow as useReactFlow5,
+  useReactFlow as useReactFlow6,
   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,
   CanvasShell,
   Controls,
+  DEFAULT_EDGE_WIDTH_RANGE,
+  DEFAULT_LOOP_RADIUS,
+  EdgeLabelPill,
   FLOW_ALL_SIDE_HANDLES,
+  FLOW_EDGE_FOCUS_CONTOUR_WIDTH,
+  FLOW_EDGE_FOCUS_RING_WIDTH,
   FLOW_GROUP_NODE_TYPE,
+  FLOW_HANDLE_ANCHOR_CLASS,
   FlowButtonEdge,
   FlowEdge,
+  FlowEdgePath,
   FlowFloatingEdge,
   FlowGroupNode,
   FlowMiniMap,
   FlowNode,
   FlowPlaceholderNode,
+  FlowSelfLoopEdge,
   FlowSmartEdge,
+  FlowWeightedEdge,
   HANDLE_SIDES,
   HelperLines,
   InspectorPanel,
   Legend,
   MiniMap2 as MiniMap,
   Panel2 as Panel,
-  Position7 as Position,
+  Position8 as Position,
   ReactFlow2 as ReactFlow,
   ReactFlowProvider2 as ReactFlowProvider,
   ZoomControls,
   addEdge,
+  backEdgeDetour,
+  buildWeightedEdgeAriaLabel,
   collapseGroup,
+  computeEdgeWeightScale,
   expandGroup,
   getEdgeParams,
   getHelperLines,
@@ -1562,7 +2360,11 @@ export {
   isFlowGroupProxyEdge,
   layoutFlow,
   layoutGraph,
+  pickClosestAnchors,
   pickClosestHandles,
+  positionToSide,
+  selfLoopHandleArc,
+  selfLoopPath,
   sideToPosition,
   toggleGroupCollapsed,
   ungroup,
@@ -1572,6 +2374,7 @@ export {
   useFlowLayout,
   useHelperLines,
   useNodesState,
-  useReactFlow5 as useReactFlow
+  useReactFlow6 as useReactFlow,
+  withWeightedEdgeAria
 };
 //# sourceMappingURL=index.js.map