@elabs-ai/components-flow 4.2.0 → 5.0.0

package/dist/chunk-K5RPSVO6.js

@@ -0,0 +1,167 @@
+"use client";
+import {
+  backEdgeDetour
+} from "./chunk-ZXZTLQIX.js";
+import {
+  EdgeLabelPill
+} from "./chunk-I53W3CFN.js";
+import {
+  DEFAULT_EDGE_WIDTH_RANGE,
+  computeEdgeWeightScale
+} from "./chunk-3BTU2VWZ.js";
+import {
+  FlowEdgeTokens
+} from "./chunk-ROJEIIA4.js";
+import {
+  FlowEdgePath
+} from "./chunk-SXXJV6YJ.js";
+
+// src/flow-weighted-edge/flow-weighted-edge.tsx
+import { useCallback, useMemo } from "react";
+import {
+  Position,
+  getBezierPath,
+  getSmoothStepPath,
+  useEdges,
+  useStore
+} from "@xyflow/react";
+import { resolveTokenColor } from "@elabs-ai/components-tokens";
+import { Fragment, jsx, jsxs } 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 = useMemo(
+    () => computeEdgeWeightScale(edges),
+    [edges]
+  );
+  const variant = data?.variant ?? "forward";
+  const isBack = variant === "back";
+  const nodes = useStore(
+    useCallback((s) => isBack ? s.nodes : NO_NODES, [isBack])
+  );
+  const pathType = data?.path ?? "bezier";
+  const axis = targetPosition === Position.Top || targetPosition === Position.Bottom ? "vertical" : "horizontal";
+  const rects = useMemo(() => {
+    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 }) : getBezierPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition });
+  const scaledWidth = widthByEdgeId.get(id) ?? DEFAULT_EDGE_WIDTH_RANGE[0];
+  const valueColor = useMemo(
+    () => 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__ */ jsx(
+    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__ */ jsxs(Fragment, { 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__ */ jsx("g", { role: "img", "aria-label": data?.variantLabel ?? DEFAULT_BACK_EDGE_LABEL, children: edge })
+    ) : edge,
+    data?.tokens?.length ? /* @__PURE__ */ jsx(FlowEdgeTokens, { path: edgePath, tokens: data.tokens }) : null,
+    /* @__PURE__ */ jsx(
+      EdgeLabelPill,
+      {
+        label: data?.label,
+        secondaryLabel: data?.secondaryLabel,
+        x: labelX,
+        y: labelY,
+        selected,
+        ...data?.labelProps
+      }
+    )
+  ] });
+}
+
+export {
+  FlowWeightedEdge
+};
+//# sourceMappingURL=chunk-K5RPSVO6.js.map

package/dist/chunk-K5RPSVO6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/flow-weighted-edge/flow-weighted-edge.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport {\n  Position,\n  getBezierPath,\n  getSmoothStepPath,\n  useEdges,\n  useStore,\n  type Edge,\n  type EdgeProps,\n  type ReactFlowState,\n} from \"@xyflow/react\";\nimport { resolveTokenColor } from \"@elabs-ai/components-tokens\";\nimport { FlowEdgePath } from \"../flow-edge-path\";\nimport { FlowEdgeTokens, type FlowEdgeToken } from \"../flow-edge-tokens\";\nimport { EdgeLabelPill, type EdgeLabelPillProps } from \"./edge-label-pill\";\nimport { backEdgeDetour, type BackEdgeNodeRect } from \"./back-edge-geometry\";\nimport {\n  computeEdgeWeightScale,\n  DEFAULT_EDGE_WIDTH_RANGE,\n  type WeightedEdgeLike,\n} from \"./weight-scale\";\n\n/** Stable empty array for the forward branch of the node subscription below. */\nconst NO_NODES: ReactFlowState[\"nodes\"] = [];\n\nexport interface FlowWeightedEdgeData extends Record<string, unknown> {\n  /** Frequency/volume this edge carries. Scaled into stroke width — see `computeEdgeWeightScale`. */\n  weight?: number;\n  /** Edges sharing a `scaleGroup` share one min-max width domain. @default all edges in the flow */\n  scaleGroup?: string;\n  /** A second, continuous measure (e.g. average duration). Colours the stroke — needs `valueDomain` too. */\n  value?: number;\n  /** `[min, max]` domain `value` is interpolated across, from `--flow-edge-weak` to `--flow-edge-strong`. */\n  valueDomain?: [number, number];\n  /** Primary edge-label-pill text, e.g. a frequency count. */\n  label?: string;\n  /** Secondary edge-label-pill text, e.g. a duration. */\n  secondaryLabel?: string;\n  /** Path geometry. Ignored when `variant` is `\"back\"`, which always routes smoothstep. @default \"bezier\" */\n  path?: \"bezier\" | \"smoothstep\";\n  /**\n   * Whether this edge advances the process (`\"forward\"`) or runs against the\n   * layout direction (`\"back\"` — a rework/retry edge, as reported by\n   * `layoutFlow`'s `backEdges`).\n   *\n   * `\"back\"` is distinguished by SHAPE, not colour: a dashed stroke, and a\n   * smoothstep route pushed clear of the forward edge between the same pair of\n   * nodes so the two never overlap. It also carries a real accessible name, so\n   * the direction reaches assistive technology as text rather than only as a\n   * `data-variant` attribute.\n   *\n   * @default \"forward\"\n   */\n  variant?: \"forward\" | \"back\";\n  /**\n   * Overrides the accessible name given to a `\"back\"` edge's graphic. Defaults\n   * to \"Back edge — runs against the process direction\".\n   */\n  variantLabel?: string;\n  /**\n   * Passed straight through to the rendered `EdgeLabelPill`'s `className`/`...props`\n   * (see `EdgeLabelPillProps`) — the seam a composing package (e.g.\n   * `@elabs-ai/components-process`'s `ProcessTransitionEdge`) uses to reach the pill's\n   * own root button from outside this component, without a new semantic prop here.\n   */\n  labelProps?: Omit<EdgeLabelPillProps, \"label\" | \"secondaryLabel\" | \"x\" | \"y\" | \"selected\">;\n  /**\n   * Markers travelling along this edge's computed path (see `FlowEdgeTokens`). The parent\n   * drives each token's `progress`; omitted or empty renders exactly the edge without them.\n   */\n  tokens?: readonly FlowEdgeToken[];\n}\n\nexport type BrandFlowWeightedEdge = Edge<FlowWeightedEdgeData, \"weighted\">;\n\n// Approximate hex fallbacks for `--flow-edge-weak`/`--flow-edge-strong`, used\n// only when the CSS custom property can't be read (SSR, or the tokens\n// stylesheet isn't loaded yet) — resolveTokenColor() reads the live theme\n// value whenever a `document` is available.\nconst FALLBACK_WEAK = \"#6085a1\";\nconst FALLBACK_STRONG = \"#496d89\";\n\n/**\n * Shape channel for `variant=\"back\"`: a dash pattern plus a reduced stroke\n * opacity on the same `--flow-edge` token. Dashes are readable in greyscale\n * and under any theme, so the back edge never depends on hue (WCAG 1.4.1).\n */\nconst BACK_EDGE_DASHARRAY = \"6 4\";\nconst BACK_EDGE_OPACITY = 0.7;\n/**\n * Clearance, in px, between a back edge and everything it must stay clear OF.\n *\n * Two uses. As `getSmoothStepPath`'s `offset` it is how far the path runs straight out of\n * a handle before it turns, which is what keeps it off the forward edge joining the same\n * two nodes. As the gap in {@link backEdgeDetour} it is how far past the outermost card\n * the return leg sits — see that function for why a card-relative placement, rather than\n * a nudge off the midpoint, is the only one that stays visible.\n */\nconst BACK_EDGE_CLEARANCE = 40;\n\nconst DEFAULT_BACK_EDGE_LABEL = \"Back edge — runs against the process direction\";\n\nfunction clamp01(t: number): number {\n  return Math.min(1, Math.max(0, t));\n}\n\nfunction hexToRgb(hex: string): [number, number, number] {\n  const m = /^#?([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})/i.exec(hex);\n  if (!m) return [0, 0, 0];\n  return [parseInt(m[1]!, 16), parseInt(m[2]!, 16), parseInt(m[3]!, 16)];\n}\n\nfunction toHexByte(n: number): string {\n  return Math.round(Math.min(255, Math.max(0, n)))\n    .toString(16)\n    .padStart(2, \"0\");\n}\n\n/** Linear RGB interpolation between two hex colors — pure, no DOM. */\nfunction mixHex(a: string, b: string, t: number): string {\n  const [ar, ag, ab] = hexToRgb(a);\n  const [br, bg, bb] = hexToRgb(b);\n  const r = ar + (br - ar) * t;\n  const g = ag + (bg - ag) * t;\n  const bl = ab + (bb - ab) * t;\n  return `#${toHexByte(r)}${toHexByte(g)}${toHexByte(bl)}`;\n}\n\n/**\n * Resolve `data.value`/`data.valueDomain` into a stroke color interpolated\n * between the `--flow-edge-weak`/`--flow-edge-strong` tokens. Returns\n * `undefined` when either input is missing, so the caller can fall back to\n * the plain `--flow-edge` token (unweighted-looking) edge color.\n */\nfunction resolveValueStrokeColor(\n  value: number | undefined,\n  domain: [number, number] | undefined,\n): string | undefined {\n  if (value === undefined || !domain) return undefined;\n  const [lo, hi] = domain;\n  const t = hi === lo ? 1 : clamp01((value - lo) / (hi - lo));\n  const weak = resolveTokenColor(\"--flow-edge-weak\", { fallback: FALLBACK_WEAK });\n  const strong = resolveTokenColor(\"--flow-edge-strong\", { fallback: FALLBACK_STRONG });\n  return mixHex(weak, strong, t);\n}\n\n/**\n * Branded weighted edge: `data.weight` scales stroke width (min-maxed per\n * `data.scaleGroup` across every edge in the flow — see `computeEdgeWeightScale`,\n * exported so a sibling like a continuous `Legend` renders the same ramp);\n * `data.value` + `data.valueDomain` interpolate stroke colour between\n * `--flow-edge-weak` and `--flow-edge-strong`; `data.label`/`data.secondaryLabel`\n * render as an `EdgeLabelPill`. An edge with none of this data renders exactly\n * like `FlowEdge` (fixed 1.5px, `--flow-edge` token) — fully backward-compatible.\n * Register it in `edgeTypes={{ weighted: FlowWeightedEdge }}` and create edges\n * with `type: \"weighted\"` and `data: FlowWeightedEdgeData`.\n *\n * `weight`/`value` are VISUAL ONLY — stroke width and colour reach no screen\n * reader. This component cannot set its own accessible name: React Flow's\n * `EdgeWrapper` sources it from `edge.ariaLabel` on the edge OBJECT, one level\n * above the component it renders as a child (issue #285). Run your `edges`\n * through `withWeightedEdgeAria` (from `./edge-aria`, or set `edge.ariaLabel`\n * yourself) before handing them to `<CanvasShell>`/`<ReactFlow>` — otherwise\n * the measure this component exists to show reaches no assistive technology,\n * and the edge announces only React Flow's generic \"Edge from n1 to n2\".\n * `withWeightedEdgeAria` returns a new array each call — memoize it\n * (`useMemo(() => withWeightedEdgeAria(edges), [edges])`) if you call it\n * inline in render.\n *\n * `data-weight`/`data-value` are also stamped onto the rendered `<path>` (raw\n * `data.weight`/`data.value`, not the scaled stroke width) — a stable\n * selector for tests/consumers, independent of the naming seam above.\n *\n * `data.variant: \"back\"` marks an edge that runs against the process direction\n * (dagre's reversed edges — see `layoutFlow`'s `backEdges`). It is dashed and\n * routed clear of the forward edge between the same two nodes, and carries a\n * real accessible name; the default `\"forward\"` renders exactly as before.\n *\n * Selected state uses `--ring` (matching the `ring-ring` treatment `FlowNode`/\n * `FlowGroupNode` use), overriding weight/value-derived width and colour so a\n * selected edge always reads clearly. No stroke-dasharray animation — reduced\n * motion is respected because there is no motion to reduce.\n *\n * KEYBOARD FOCUS is a separate state, drawn by `FlowEdgePath` (#286): selection\n * needs a consumer's `onEdgesChange` to ever become true, so it can never be the\n * indicator a tab stop owes its user.\n */\nexport function FlowWeightedEdge({\n  id,\n  sourceX,\n  sourceY,\n  targetX,\n  targetY,\n  sourcePosition,\n  targetPosition,\n  markerEnd,\n  style,\n  selected,\n  data,\n}: EdgeProps<BrandFlowWeightedEdge>) {\n  const edges = useEdges();\n  const widthByEdgeId = useMemo(\n    () => computeEdgeWeightScale(edges as unknown as WeightedEdgeLike[]),\n    [edges],\n  );\n\n  const variant = data?.variant ?? \"forward\";\n  const isBack = variant === \"back\";\n  // Only a BACK edge needs the node rects (to route its return leg around the cards it\n  // crosses). `useNodes()` would subscribe every edge to the whole nodes array, which the\n  // store replaces on each drag frame, selection and resize — so every forward edge on\n  // the canvas re-rendered on any node change anywhere. The forward branch hands back one\n  // frozen constant, which `useStore`'s default `Object.is` compares equal every time.\n  const nodes = useStore(\n    useCallback((s: ReactFlowState) => (isBack ? s.nodes : NO_NODES), [isBack]),\n  );\n  const pathType = data?.path ?? \"bezier\";\n\n  // Ranks advance vertically when the handles are on the top/bottom faces. Read from the\n  // TARGET side: `sourcePosition` on a self-connecting or hand-placed edge can disagree,\n  // and it is the incoming face that decides which way the last leg must approach from.\n  const axis =\n    targetPosition === Position.Top || targetPosition === Position.Bottom\n      ? \"vertical\"\n      : \"horizontal\";\n  const rects = useMemo<BackEdgeNodeRect[]>(() => {\n    if (!isBack) return [];\n    const out: BackEdgeNodeRect[] = [];\n    for (const node of nodes) {\n      // A child node's `position` is parent-relative, so it is not comparable with the\n      // absolute handle coordinates this edge is placed against. Skipping one only costs\n      // a little clearance; mixing coordinate spaces would move the leg somewhere wrong.\n      if (node.parentId) continue;\n      const width = node.measured?.width ?? node.width;\n      const height = node.measured?.height ?? node.height;\n      if (!width || !height) continue;\n      out.push({ x: node.position.x, y: node.position.y, width, height });\n    }\n    return out;\n  }, [isBack, nodes]);\n  const detour = isBack\n    ? backEdgeDetour(\n        rects,\n        axis,\n        axis === \"vertical\" ? [sourceY, targetY] : [sourceX, targetX],\n        BACK_EDGE_CLEARANCE,\n      )\n    : null;\n\n  const [edgePath, labelX, labelY] = isBack\n    ? getSmoothStepPath({\n        sourceX,\n        sourceY,\n        sourcePosition,\n        targetX,\n        targetY,\n        targetPosition,\n        offset: BACK_EDGE_CLEARANCE,\n        ...(detour === null ? {} : axis === \"vertical\" ? { centerX: detour } : { centerY: detour }),\n      })\n    : pathType === \"smoothstep\"\n      ? getSmoothStepPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition })\n      : getBezierPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition });\n\n  const scaledWidth = widthByEdgeId.get(id) ?? DEFAULT_EDGE_WIDTH_RANGE[0];\n  const valueColor = useMemo(\n    () => resolveValueStrokeColor(data?.value, data?.valueDomain),\n    [data?.value, data?.valueDomain],\n  );\n\n  const stroke = selected ? \"var(--ring)\" : (valueColor ?? \"var(--flow-edge)\");\n  const strokeWidth = selected ? scaledWidth + 1.5 : scaledWidth;\n\n  const edge = (\n    <FlowEdgePath\n      id={id}\n      path={edgePath}\n      markerEnd={markerEnd}\n      data-slot=\"flow-weighted-edge\"\n      data-variant={variant}\n      data-weight={data?.weight}\n      data-value={data?.value}\n      stroke={stroke}\n      strokeWidth={strokeWidth}\n      strokeDasharray={isBack ? BACK_EDGE_DASHARRAY : undefined}\n      strokeOpacity={isBack ? BACK_EDGE_OPACITY : undefined}\n      style={style}\n    />\n  );\n\n  return (\n    <>\n      {isBack ? (\n        // A `data-variant` is invisible to assistive technology, so the back\n        // edge's meaning is also published as a named graphic. Only the back\n        // variant is wrapped — a forward edge's DOM is unchanged from before\n        // this prop existed.\n        <g role=\"img\" aria-label={data?.variantLabel ?? DEFAULT_BACK_EDGE_LABEL}>\n          {edge}\n        </g>\n      ) : (\n        edge\n      )}\n      {data?.tokens?.length ? <FlowEdgeTokens path={edgePath} tokens={data.tokens} /> : null}\n      <EdgeLabelPill\n        label={data?.label}\n        secondaryLabel={data?.secondaryLabel}\n        x={labelX}\n        y={labelY}\n        selected={selected}\n        {...data?.labelProps}\n      />\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-K6U27YJ6.js

@@ -0,0 +1,78 @@
+"use client";
+import {
+  getEdgeParams
+} from "./chunk-A7AFM3LI.js";
+import {
+  FlowEdgePath
+} from "./chunk-SXXJV6YJ.js";
+
+// src/flow-floating-edge/flow-floating-edge.tsx
+import { getBezierPath, useInternalNode } from "@xyflow/react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ANCHOR_RADIUS = 4;
+function FlowFloatingEdge({ id, source, target, markerEnd, style, data }) {
+  const sourceNode = useInternalNode(source);
+  const targetNode = useInternalNode(target);
+  if (!sourceNode || !targetNode) return null;
+  const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(sourceNode, targetNode);
+  const [edgePath] = getBezierPath({
+    sourceX: sx,
+    sourceY: sy,
+    sourcePosition: sourcePos,
+    targetX: tx,
+    targetY: ty,
+    targetPosition: targetPos
+  });
+  const showAnchors = data?.anchors !== false;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      FlowEdgePath,
+      {
+        id,
+        path: edgePath,
+        markerEnd,
+        "data-slot": "flow-floating-edge",
+        stroke: "var(--flow-edge)",
+        strokeWidth: 1.5,
+        style
+      }
+    ),
+    showAnchors ? /* @__PURE__ */ jsxs(
+      "g",
+      {
+        className: "brand-floating-edge__anchors",
+        fill: "var(--flow-node)",
+        stroke: "var(--flow-edge)",
+        children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: sx,
+              cy: sy,
+              r: ANCHOR_RADIUS,
+              strokeWidth: 2,
+              style: { pointerEvents: "none" },
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: tx,
+              cy: ty,
+              r: ANCHOR_RADIUS,
+              strokeWidth: 2,
+              style: { pointerEvents: "none" },
+              "aria-hidden": "true"
+            }
+          )
+        ]
+      }
+    ) : null
+  ] });
+}
+
+export {
+  FlowFloatingEdge
+};
+//# sourceMappingURL=chunk-K6U27YJ6.js.map

package/dist/chunk-K6U27YJ6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/flow-floating-edge/flow-floating-edge.tsx"],"sourcesContent":["import { getBezierPath, useInternalNode, type EdgeProps } from \"@xyflow/react\";\nimport { FlowEdgePath } from \"../flow-edge-path\";\nimport { getEdgeParams } from \"./floating-edge-geometry\";\n\n/** Optional per-edge `data` for {@link FlowFloatingEdge}. */\nexport interface FloatingEdgeData {\n  /**\n   * Show a small anchor dot at each border connection point. On by default so the\n   * edge visibly terminates on the node's closest side (rather than a bare line\n   * touching the border with no anchor). Set `false` to hide.\n   */\n  anchors?: boolean;\n  [key: string]: unknown;\n}\n\n/** Radius of the connection anchor dot (matches the `FlowNode` handle size). */\nconst ANCHOR_RADIUS = 4;\n\n/**\n * Branded floating edge: it attaches to the node **border** at the point facing\n * the other node (no fixed handle), recomputed as nodes drag. Register it in\n * `edgeTypes={{ floating: FlowFloatingEdge }}`; the connected nodes need no\n * handle config. Uses the `--flow-edge` token, matching `FlowEdge`.\n *\n * A small **anchor dot** is drawn at each connection point (on by default) so the\n * line clearly terminates on the node's closest border side — not at a bare,\n * unanchored spot. Toggle per edge with `data.anchors: false`.\n */\nexport function FlowFloatingEdge({ id, source, target, markerEnd, style, data }: EdgeProps) {\n  const sourceNode = useInternalNode(source);\n  const targetNode = useInternalNode(target);\n  if (!sourceNode || !targetNode) return null;\n\n  const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(sourceNode, targetNode);\n\n  const [edgePath] = getBezierPath({\n    sourceX: sx,\n    sourceY: sy,\n    sourcePosition: sourcePos,\n    targetX: tx,\n    targetY: ty,\n    targetPosition: targetPos,\n  });\n\n  const showAnchors = (data as FloatingEdgeData | undefined)?.anchors !== false;\n\n  return (\n    <>\n      <FlowEdgePath\n        id={id}\n        path={edgePath}\n        markerEnd={markerEnd}\n        data-slot=\"flow-floating-edge\"\n        stroke=\"var(--flow-edge)\"\n        strokeWidth={1.5}\n        style={style}\n      />\n      {showAnchors ? (\n        <g\n          className=\"brand-floating-edge__anchors\"\n          fill=\"var(--flow-node)\"\n          stroke=\"var(--flow-edge)\"\n        >\n          {/* Decorative rings matching the FlowNode handle look; never intercept\n              pointer events so nodes stay draggable through them. */}\n          <circle\n            cx={sx}\n            cy={sy}\n            r={ANCHOR_RADIUS}\n            strokeWidth={2}\n            style={{ pointerEvents: \"none\" }}\n            aria-hidden=\"true\"\n          />\n          <circle\n            cx={tx}\n            cy={ty}\n            r={ANCHOR_RADIUS}\n            strokeWidth={2}\n            style={{ pointerEvents: \"none\" }}\n            aria-hidden=\"true\"\n          />\n        </g>\n      ) : null}\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;AAAA,SAAS,eAAe,uBAAuC;AA+C3D,mBACE,KAUE,YAXJ;AA/BJ,IAAM,gBAAgB;AAYf,SAAS,iBAAiB,EAAE,IAAI,QAAQ,QAAQ,WAAW,OAAO,KAAK,GAAc;AAC1F,QAAM,aAAa,gBAAgB,MAAM;AACzC,QAAM,aAAa,gBAAgB,MAAM;AACzC,MAAI,CAAC,cAAc,CAAC,WAAY,QAAO;AAEvC,QAAM,EAAE,IAAI,IAAI,IAAI,IAAI,WAAW,UAAU,IAAI,cAAc,YAAY,UAAU;AAErF,QAAM,CAAC,QAAQ,IAAI,cAAc;AAAA,IAC/B,SAAS;AAAA,IACT,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,SAAS;AAAA,IACT,SAAS;AAAA,IACT,gBAAgB;AAAA,EAClB,CAAC;AAED,QAAM,cAAe,MAAuC,YAAY;AAExE,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAM;AAAA,QACN;AAAA,QACA,aAAU;AAAA,QACV,QAAO;AAAA,QACP,aAAa;AAAA,QACb;AAAA;AAAA,IACF;AAAA,IACC,cACC;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,MAAK;AAAA,QACL,QAAO;AAAA,QAIP;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,IAAI;AAAA,cACJ,GAAG;AAAA,cACH,aAAa;AAAA,cACb,OAAO,EAAE,eAAe,OAAO;AAAA,cAC/B,eAAY;AAAA;AAAA,UACd;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,IAAI;AAAA,cACJ,GAAG;AAAA,cACH,aAAa;AAAA,cACb,OAAO,EAAE,eAAe,OAAO;AAAA,cAC/B,eAAY;AAAA;AAAA,UACd;AAAA;AAAA;AAAA,IACF,IACE;AAAA,KACN;AAEJ;","names":[]}

package/dist/chunk-KDVMGMAK.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-KDVMGMAK.js.map

package/dist/chunk-KDVMGMAK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-LQOZCOK3.js

@@ -0,0 +1,74 @@
+"use client";
+import {
+  collapseGroup,
+  expandGroup,
+  groupNodes,
+  toggleGroupCollapsed,
+  ungroup
+} from "./chunk-TGWPM2CG.js";
+
+// src/use-flow-groups/use-flow-groups.ts
+import { useCallback } from "react";
+import { useReactFlow } from "@xyflow/react";
+function generateGroupId() {
+  return `flow-group-${Math.random().toString(36).slice(2, 9)}`;
+}
+function useFlowGroups() {
+  const { getNodes, getEdges, setNodes, setEdges } = useReactFlow();
+  const apply = useCallback(
+    (result) => {
+      setNodes(result.nodes);
+      setEdges(result.edges);
+    },
+    [setNodes, setEdges]
+  );
+  const groupNodes2 = useCallback(
+    (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 = useCallback(
+    (options) => {
+      const selectedIds = getNodes().filter((n) => n.selected && !n.parentId).map((n) => n.id);
+      return groupNodes2(selectedIds, options);
+    },
+    [getNodes, groupNodes2]
+  );
+  const ungroup2 = useCallback(
+    (groupId) => apply(ungroup(getNodes(), getEdges(), groupId)),
+    [getNodes, getEdges, apply]
+  );
+  const collapseGroup2 = useCallback(
+    (groupId) => apply(collapseGroup(getNodes(), getEdges(), groupId)),
+    [getNodes, getEdges, apply]
+  );
+  const expandGroup2 = useCallback(
+    (groupId) => apply(expandGroup(getNodes(), getEdges(), groupId)),
+    [getNodes, getEdges, apply]
+  );
+  const toggleCollapse = useCallback(
+    (groupId) => apply(toggleGroupCollapsed(getNodes(), getEdges(), groupId)),
+    [getNodes, getEdges, apply]
+  );
+  return {
+    groupNodes: groupNodes2,
+    groupSelection,
+    ungroup: ungroup2,
+    collapseGroup: collapseGroup2,
+    expandGroup: expandGroup2,
+    toggleCollapse
+  };
+}
+
+export {
+  useFlowGroups
+};
+//# sourceMappingURL=chunk-LQOZCOK3.js.map

package/dist/chunk-LQOZCOK3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/use-flow-groups/use-flow-groups.ts"],"sourcesContent":["import { useCallback } from \"react\";\nimport { useReactFlow, type Edge, type Node } from \"@xyflow/react\";\nimport {\n  collapseGroup as collapseGroupOp,\n  expandGroup as expandGroupOp,\n  groupNodes as groupNodesOp,\n  toggleGroupCollapsed as toggleGroupCollapsedOp,\n  ungroup as ungroupOp,\n  type GroupNodesOptions,\n} from \"./group-operations\";\n\n/** Options for `groupNodes`/`groupSelection` with an optional generated id. */\nexport type GroupOptions = Partial<Pick<GroupNodesOptions, \"groupId\">> &\n  Omit<GroupNodesOptions, \"groupId\">;\n\nexport interface UseFlowGroupsResult {\n  /**\n   * Wrap the given (top-level) node ids in a new `FlowGroupNode`. Returns the new\n   * group id, or `undefined` if nothing was grouped. Pass `options.groupId` for a\n   * deterministic id; otherwise one is generated.\n   */\n  groupNodes: (nodeIds: string[], options?: GroupOptions) => string | undefined;\n  /** Group the currently-selected nodes. Returns the new group id (or `undefined`). */\n  groupSelection: (options?: GroupOptions) => string | undefined;\n  /** Dissolve a group, restoring its children to absolute positions. */\n  ungroup: (groupId: string) => void;\n  /** Collapse a group to an overview chip (hides subtree, reroutes boundary edges). */\n  collapseGroup: (groupId: string) => void;\n  /** Expand a collapsed group (exact inverse of collapse). */\n  expandGroup: (groupId: string) => void;\n  /** Collapse if expanded, expand if collapsed. */\n  toggleCollapse: (groupId: string) => void;\n}\n\nfunction generateGroupId(): string {\n  return `flow-group-${Math.random().toString(36).slice(2, 9)}`;\n}\n\n/**\n * Thin hook over the pure grouping operations in `group-operations.ts`. Reads and\n * writes the live graph via `useReactFlow()`; all the logic lives in the pure,\n * unit-tested core. Must be called inside a React Flow context (e.g. from a\n * `<Panel>` child of `<CanvasShell>` or from within a custom node).\n */\nexport function useFlowGroups<\n  NodeType extends Node = Node,\n  EdgeType extends Edge = Edge,\n>(): UseFlowGroupsResult {\n  const { getNodes, getEdges, setNodes, setEdges } = useReactFlow<NodeType, EdgeType>();\n\n  const apply = useCallback(\n    (result: { nodes: NodeType[]; edges: EdgeType[] }) => {\n      setNodes(result.nodes);\n      setEdges(result.edges);\n    },\n    [setNodes, setEdges],\n  );\n\n  const groupNodes = useCallback(\n    (nodeIds: string[], options?: GroupOptions): string | undefined => {\n      if (nodeIds.length === 0) return undefined;\n      const groupId = options?.groupId ?? generateGroupId();\n      const result = groupNodesOp<NodeType, EdgeType>(getNodes(), getEdges(), nodeIds, {\n        ...options,\n        groupId,\n      });\n      apply(result);\n      return groupId;\n    },\n    [getNodes, getEdges, apply],\n  );\n\n  const groupSelection = useCallback(\n    (options?: GroupOptions): string | undefined => {\n      const selectedIds = getNodes()\n        .filter((n) => n.selected && !n.parentId)\n        .map((n) => n.id);\n      return groupNodes(selectedIds, options);\n    },\n    [getNodes, groupNodes],\n  );\n\n  const ungroup = useCallback(\n    (groupId: string) => apply(ungroupOp<NodeType, EdgeType>(getNodes(), getEdges(), groupId)),\n    [getNodes, getEdges, apply],\n  );\n\n  const collapseGroup = useCallback(\n    (groupId: string) =>\n      apply(collapseGroupOp<NodeType, EdgeType>(getNodes(), getEdges(), groupId)),\n    [getNodes, getEdges, apply],\n  );\n\n  const expandGroup = useCallback(\n    (groupId: string) => apply(expandGroupOp<NodeType, EdgeType>(getNodes(), getEdges(), groupId)),\n    [getNodes, getEdges, apply],\n  );\n\n  const toggleCollapse = useCallback(\n    (groupId: string) =>\n      apply(toggleGroupCollapsedOp<NodeType, EdgeType>(getNodes(), getEdges(), groupId)),\n    [getNodes, getEdges, apply],\n  );\n\n  return {\n    groupNodes,\n    groupSelection,\n    ungroup,\n    collapseGroup,\n    expandGroup,\n    toggleCollapse,\n  };\n}\n"],"mappings":";;;;;;;;;;AAAA,SAAS,mBAAmB;AAC5B,SAAS,oBAA0C;AAiCnD,SAAS,kBAA0B;AACjC,SAAO,cAAc,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,MAAM,GAAG,CAAC,CAAC;AAC7D;AAQO,SAAS,gBAGS;AACvB,QAAM,EAAE,UAAU,UAAU,UAAU,SAAS,IAAI,aAAiC;AAEpF,QAAM,QAAQ;AAAA,IACZ,CAAC,WAAqD;AACpD,eAAS,OAAO,KAAK;AACrB,eAAS,OAAO,KAAK;AAAA,IACvB;AAAA,IACA,CAAC,UAAU,QAAQ;AAAA,EACrB;AAEA,QAAMA,cAAa;AAAA,IACjB,CAAC,SAAmB,YAA+C;AACjE,UAAI,QAAQ,WAAW,EAAG,QAAO;AACjC,YAAM,UAAU,SAAS,WAAW,gBAAgB;AACpD,YAAM,SAAS,WAAiC,SAAS,GAAG,SAAS,GAAG,SAAS;AAAA,QAC/E,GAAG;AAAA,QACH;AAAA,MACF,CAAC;AACD,YAAM,MAAM;AACZ,aAAO;AAAA,IACT;AAAA,IACA,CAAC,UAAU,UAAU,KAAK;AAAA,EAC5B;AAEA,QAAM,iBAAiB;AAAA,IACrB,CAAC,YAA+C;AAC9C,YAAM,cAAc,SAAS,EAC1B,OAAO,CAAC,MAAM,EAAE,YAAY,CAAC,EAAE,QAAQ,EACvC,IAAI,CAAC,MAAM,EAAE,EAAE;AAClB,aAAOA,YAAW,aAAa,OAAO;AAAA,IACxC;AAAA,IACA,CAAC,UAAUA,WAAU;AAAA,EACvB;AAEA,QAAMC,WAAU;AAAA,IACd,CAAC,YAAoB,MAAM,QAA8B,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAAA,IACzF,CAAC,UAAU,UAAU,KAAK;AAAA,EAC5B;AAEA,QAAMC,iBAAgB;AAAA,IACpB,CAAC,YACC,MAAM,cAAoC,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAAA,IAC5E,CAAC,UAAU,UAAU,KAAK;AAAA,EAC5B;AAEA,QAAMC,eAAc;AAAA,IAClB,CAAC,YAAoB,MAAM,YAAkC,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAAA,IAC7F,CAAC,UAAU,UAAU,KAAK;AAAA,EAC5B;AAEA,QAAM,iBAAiB;AAAA,IACrB,CAAC,YACC,MAAM,qBAA2C,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAAA,IACnF,CAAC,UAAU,UAAU,KAAK;AAAA,EAC5B;AAEA,SAAO;AAAA,IACL,YAAAH;AAAA,IACA;AAAA,IACA,SAAAC;AAAA,IACA,eAAAC;AAAA,IACA,aAAAC;AAAA,IACA;AAAA,EACF;AACF;","names":["groupNodes","ungroup","collapseGroup","expandGroup"]}

package/dist/chunk-NAQWNX2A.js

@@ -0,0 +1,102 @@
+"use client";
+
+// src/inspector-panel/inspector-panel.tsx
+import "react";
+import { Reveal, useCollapsiblePanel, useLocale } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+var INSPECTOR_PANEL_WIDTH = "18rem";
+function InspectorPanel({
+  title,
+  children,
+  onClose,
+  emptyMessage,
+  hasSelection = true,
+  selectionKey,
+  open,
+  defaultOpen = true,
+  onOpenChange,
+  side = "right",
+  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,
+    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__ */ jsxs(
+    "div",
+    {
+      className: cn("group relative h-full overflow-hidden", className),
+      style: { "--inspector-panel-width": width },
+      inert: panel.open ? void 0 : true,
+      ...panel.attrs,
+      children: [
+        /* @__PURE__ */ jsx("div", { "data-slot": "inspector-panel-gap", className: panel.spacerClassName }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "inspector-panel-container",
+            className: cn(panel.containerClassName, "absolute inset-y-0 flex h-full border-s"),
+            children: /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full flex-col bg-card", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b px-4 py-3", children: [
+                /* @__PURE__ */ jsx("h3", { className: "text-body font-semibold text-foreground", children: resolvedTitle }),
+                onClose ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": t("flow.inspectorPanel.close"),
+                    onClick: onClose,
+                    className: "rounded-sm p-1 text-muted-foreground hover:text-foreground focus-ring",
+                    children: /* @__PURE__ */ jsx(
+                      "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__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
+                      }
+                    )
+                  }
+                ) : null
+              ] }),
+              hasSelection ? /* @__PURE__ */ jsx(
+                Reveal,
+                {
+                  appear: "fade",
+                  speed: "fast",
+                  tabIndex: 0,
+                  className: "focus-ring flex-1 overflow-y-auto p-4 text-body",
+                  children
+                },
+                selectionKey
+              ) : /* @__PURE__ */ jsx("div", { tabIndex: 0, className: "focus-ring flex-1 overflow-y-auto p-4 text-body", children: /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: resolvedEmptyMessage }) })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  InspectorPanel
+};
+//# sourceMappingURL=chunk-NAQWNX2A.js.map

package/dist/chunk-NAQWNX2A.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/inspector-panel/inspector-panel.tsx"],"sourcesContent":["import { type CSSProperties, type ReactNode } from \"react\";\nimport { Reveal, useCollapsiblePanel, useLocale } from \"@elabs-ai/components-ui\";\nimport { cn } from \"@elabs-ai/components-ui/lib/cn\";\n\nconst INSPECTOR_PANEL_WIDTH = \"18rem\";\n\nexport interface InspectorPanelProps {\n  title?: ReactNode;\n  children: ReactNode;\n  onClose?: () => void;\n  /** Empty-state shown when nothing is selected. */\n  emptyMessage?: ReactNode;\n  /** When false, render the empty state instead of children. */\n  hasSelection?: boolean;\n  /**\n   * Stable identity of the current selection (e.g. the selected node's id).\n   * When it changes, the body replays a quick fade so it reads as \"details for\n   * THIS node\". Pass the selected entity's id (or any stable key derived from\n   * the selected data).\n   */\n  selectionKey?: string | number;\n  /**\n   * Collapse (research 09 step 3 — converged on the shared `@elabs-ai/components-ui`\n   * `useCollapsiblePanel` base; the panel stays single-view, drill-in is\n   * ContextPanel-only). Controlled `open` / uncontrolled `defaultOpen`.\n   */\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** Which edge the panel sits on (collapse slide direction). Default `\"right\"`. */\n  side?: \"left\" | \"right\";\n  /** Expanded width (any CSS length). Default `\"18rem\"` (the original `w-72`). */\n  width?: string;\n  className?: string;\n}\n\n/**\n * Properties panel for the selected node/edge. Reusable beside a canvas (e.g.\n * inside a <SplitPanel>) or as a React Flow <Panel>. Always mounted; collapses\n * via the canonical `useCollapsiblePanel` width tween (CSS-gated, reduced-\n * motion safe) when `open`/`defaultOpen` drive it.\n */\nexport function InspectorPanel({\n  title,\n  children,\n  onClose,\n  emptyMessage,\n  hasSelection = true,\n  selectionKey,\n  open,\n  defaultOpen = true,\n  onOpenChange,\n  side = \"right\",\n  width = INSPECTOR_PANEL_WIDTH,\n  className,\n}: InspectorPanelProps) {\n  const { t } = useLocale();\n  const resolvedTitle = title ?? t(\"flow.inspectorPanel.title\");\n  const resolvedEmptyMessage = emptyMessage ?? t(\"flow.inspectorPanel.emptyMessage\");\n  const panel = useCollapsiblePanel({\n    side,\n    open,\n    defaultOpen,\n    onOpenChange,\n    widthClassName: \"w-(--inspector-panel-width)\",\n    spacerCollapsedClassName: \"group-data-[state=collapsed]:w-0\",\n    containerSlideClassNames: {\n      left: \"left-0 group-data-[state=collapsed]:left-[calc(var(--inspector-panel-width)*-1)]\",\n      right: \"right-0 group-data-[state=collapsed]:right-[calc(var(--inspector-panel-width)*-1)]\",\n    },\n  });\n\n  return (\n    <div\n      className={cn(\"group relative h-full overflow-hidden\", className)}\n      style={{ \"--inspector-panel-width\": width } as CSSProperties}\n      inert={panel.open ? undefined : true}\n      {...panel.attrs}\n    >\n      <div data-slot=\"inspector-panel-gap\" className={panel.spacerClassName} />\n      <div\n        data-slot=\"inspector-panel-container\"\n        // Bounded to the host (a SplitPanel / canvas edge), not the viewport:\n        // absolute within the relative group, full height (research 09 §B.2).\n        className={cn(panel.containerClassName, \"absolute inset-y-0 flex h-full border-s\")}\n      >\n        {/* Detail-tier surface: raised `card` — robust across themes (#193). */}\n        <div className=\"flex h-full w-full flex-col bg-card\">\n          <div className=\"flex items-center justify-between border-b px-4 py-3\">\n            <h3 className=\"text-body font-semibold text-foreground\">{resolvedTitle}</h3>\n            {onClose ? (\n              <button\n                type=\"button\"\n                aria-label={t(\"flow.inspectorPanel.close\")}\n                onClick={onClose}\n                className=\"rounded-sm p-1 text-muted-foreground hover:text-foreground focus-ring\"\n              >\n                <svg\n                  width=\"14\"\n                  height=\"14\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"2\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  aria-hidden=\"true\"\n                >\n                  <path d=\"M18 6 6 18M6 6l12 12\" />\n                </svg>\n              </button>\n            ) : null}\n          </div>\n          {/*\n            `tabIndex={0}` on a scroll container, in both branches: a region that scrolls\n            but contains nothing focusable is unreachable by keyboard — a mouse user can\n            read the overflow and a keyboard user cannot (axe\n            `scrollable-region-focusable`). An inspector body is exactly that shape\n            whenever its content is plain text, a definition list or a chart, which is\n            most of the time. It carries `focus-ring` because anything that can take\n            focus has to show it.\n          */}\n          {hasSelection ? (\n            <Reveal\n              key={selectionKey}\n              appear=\"fade\"\n              speed=\"fast\"\n              tabIndex={0}\n              className=\"focus-ring flex-1 overflow-y-auto p-4 text-body\"\n            >\n              {children}\n            </Reveal>\n          ) : (\n            <div tabIndex={0} className=\"focus-ring flex-1 overflow-y-auto p-4 text-body\">\n              <p className=\"text-muted-foreground\">{resolvedEmptyMessage}</p>\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;AAAA,OAAmD;AACnD,SAAS,QAAQ,qBAAqB,iBAAiB;AACvD,SAAS,UAAU;AA6Eb,cASI,YATJ;AA3EN,IAAM,wBAAwB;AAsCvB,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AACF,GAAwB;AACtB,QAAM,EAAE,EAAE,IAAI,UAAU;AACxB,QAAM,gBAAgB,SAAS,EAAE,2BAA2B;AAC5D,QAAM,uBAAuB,gBAAgB,EAAE,kCAAkC;AACjF,QAAM,QAAQ,oBAAoB;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,0BAA0B;AAAA,IAC1B,0BAA0B;AAAA,MACxB,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AAAA,EACF,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,yCAAyC,SAAS;AAAA,MAChE,OAAO,EAAE,2BAA2B,MAAM;AAAA,MAC1C,OAAO,MAAM,OAAO,SAAY;AAAA,MAC/B,GAAG,MAAM;AAAA,MAEV;AAAA,4BAAC,SAAI,aAAU,uBAAsB,WAAW,MAAM,iBAAiB;AAAA,QACvE;AAAA,UAAC;AAAA;AAAA,YACC,aAAU;AAAA,YAGV,WAAW,GAAG,MAAM,oBAAoB,yCAAyC;AAAA,YAGjF,+BAAC,SAAI,WAAU,uCACb;AAAA,mCAAC,SAAI,WAAU,wDACb;AAAA,oCAAC,QAAG,WAAU,2CAA2C,yBAAc;AAAA,gBACtE,UACC;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,cAAY,EAAE,2BAA2B;AAAA,oBACzC,SAAS;AAAA,oBACT,WAAU;AAAA,oBAEV;AAAA,sBAAC;AAAA;AAAA,wBACC,OAAM;AAAA,wBACN,QAAO;AAAA,wBACP,SAAQ;AAAA,wBACR,MAAK;AAAA,wBACL,QAAO;AAAA,wBACP,aAAY;AAAA,wBACZ,eAAc;AAAA,wBACd,gBAAe;AAAA,wBACf,eAAY;AAAA,wBAEZ,8BAAC,UAAK,GAAE,wBAAuB;AAAA;AAAA,oBACjC;AAAA;AAAA,gBACF,IACE;AAAA,iBACN;AAAA,cAUC,eACC;AAAA,gBAAC;AAAA;AAAA,kBAEC,QAAO;AAAA,kBACP,OAAM;AAAA,kBACN,UAAU;AAAA,kBACV,WAAU;AAAA,kBAET;AAAA;AAAA,gBANI;AAAA,cAOP,IAEA,oBAAC,SAAI,UAAU,GAAG,WAAU,mDAC1B,8BAAC,OAAE,WAAU,yBAAyB,gCAAqB,GAC7D;AAAA,eAEJ;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/chunk-NVJVWGUS.js

@@ -0,0 +1,152 @@
+"use client";
+import {
+  computeEdgeWeightScale
+} from "./chunk-3BTU2VWZ.js";
+
+// src/legend/legend.tsx
+import { useLocale } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Legend(props) {
+  if (props.variant === "scale") {
+    return /* @__PURE__ */ jsx(LegendScale, { ...props });
+  }
+  return /* @__PURE__ */ jsx(LegendCategorical, { ...props });
+}
+function LegendCategorical({ items, title, className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-lg bg-surface-elevated/90 p-3 text-xs shadow-ring-sm backdrop-blur",
+        className
+      ),
+      children: [
+        title ? /* @__PURE__ */ jsx("div", { className: "mb-1.5 font-medium text-foreground", children: title }) : null,
+        /* @__PURE__ */ jsx("ul", { className: "space-y-1", children: items.map((item) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2 text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "size-2.5 shrink-0 rounded-full",
+              style: { backgroundColor: item.color }
+            }
+          ),
+          item.label
+        ] }, item.label)) })
+      ]
+    }
+  );
+}
+function computeWidthSamples(domain, ticks) {
+  const [min, max] = domain;
+  const values = ticks === "minmedmax" ? [min, (min + max) / 2, max] : [min, max];
+  const likeEdges = values.map((weight, index) => ({
+    id: String(index),
+    data: { weight }
+  }));
+  const widths = computeEdgeWeightScale(likeEdges);
+  return values.map((value, index) => ({ value, width: widths.get(String(index)) ?? 0 }));
+}
+var COLOR_STOP_FRACTIONS = [0, 0.25, 0.5, 0.75, 1];
+function scaleKindLabel(kind) {
+  return kind === "width" ? "width" : "color";
+}
+function LegendScale({
+  kind,
+  domain,
+  format,
+  ticks = "minmax",
+  title,
+  className
+}) {
+  const { formatNumber } = useLocale();
+  const format_ = format ?? formatNumber;
+  const [min, max] = domain;
+  const ariaLabel = `Edge ${scaleKindLabel(kind)} scale, ${format_(min)} to ${format_(max)}, minimum to maximum`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": ariaLabel,
+      className: cn(
+        "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__ */ jsx("div", { className: "text-body font-medium text-foreground", children: title }) : null,
+        kind === "width" ? /* @__PURE__ */ jsx(LegendScaleWidth, { domain, format: format_, ticks }) : /* @__PURE__ */ jsx(LegendScaleColor, { domain, format: format_ })
+      ]
+    }
+  );
+}
+function LegendScaleWidth({
+  domain,
+  format,
+  ticks
+}) {
+  const samples = computeWidthSamples(domain, ticks);
+  return /* @__PURE__ */ jsx("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__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", className: "shrink-0", height: 16, overflow: "visible", width: 40, children: /* @__PURE__ */ jsx(
+        "line",
+        {
+          stroke: "var(--flow-edge)",
+          strokeLinecap: "round",
+          strokeWidth: sample.width,
+          x1: 2,
+          x2: 38,
+          y1: 8,
+          y2: 8
+        }
+      ) }),
+      /* @__PURE__ */ jsx("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__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: "h-3 w-full rounded-full",
+        style: { backgroundImage: gradient }
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex justify-between gap-1", children: stops.map((stop, index) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "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}`
+    )) })
+  ] });
+}
+
+export {
+  Legend
+};
+//# sourceMappingURL=chunk-NVJVWGUS.js.map