@devfellowship/components 3.4.0 → 3.5.0

package/dist/index.cjs

@@ -9104,9 +9104,49 @@ function firstFreeRow(taken, columns, from) {
   }
   return row;
 }
+var pointText = (p) => `${p.x} ${p.y}`;
+var center = (r) => ({ x: (r.left + r.right) / 2, y: (r.top + r.bottom) / 2 });
+function segmentHits(a, b, r) {
+  return a.x === b.x ? a.x > r.left && a.x < r.right && Math.max(a.y, b.y) > r.top && Math.min(a.y, b.y) < r.bottom : a.y > r.top && a.y < r.bottom && Math.max(a.x, b.x) > r.left && Math.min(a.x, b.x) < r.right;
+}
+function routeEdge(source, target, edge, obstacles = []) {
+  const a = center(source), b = center(target);
+  const sameColumn = Math.abs(a.x - b.x) < 1;
+  const vertical = sameColumn || source.left < target.right && target.left < source.right;
+  const down = b.y >= a.y, right = b.x >= a.x;
+  const start = vertical ? { x: a.x, y: down ? source.bottom : source.top } : { x: right ? source.right : source.left, y: a.y };
+  const end = vertical ? { x: b.x, y: down ? target.top : target.bottom } : { x: right ? target.left : target.right, y: b.y };
+  const route = edge.route ?? "auto";
+  if (route === "straight" || route === "auto" && sameColumn) return { start, end, d: `M ${pointText(start)} L ${pointText(end)}` };
+  if (route !== "elbow") {
+    const mid = vertical ? (start.y + end.y) / 2 : (start.x + end.x) / 2;
+    const c1 = vertical ? { x: start.x, y: mid } : { x: mid, y: start.y };
+    const c2 = vertical ? { x: end.x, y: mid } : { x: mid, y: end.y };
+    return { start, end, d: `M ${pointText(start)} C ${pointText(c1)} ${pointText(c2)} ${pointText(end)}` };
+  }
+  const boxes = [.../* @__PURE__ */ new Set([source, target, ...obstacles])];
+  const clearance = 4;
+  const ys = [...new Set(boxes.flatMap((r) => [r.top - clearance, r.bottom + clearance]))];
+  let best, bestLength = Infinity;
+  for (const sx of [source.left, source.right]) for (const tx of [target.left, target.right]) {
+    const s = { x: sx, y: a.y }, t = { x: tx, y: b.y };
+    const gx = sx + (sx === source.left ? -clearance : clearance);
+    const hx = tx + (tx === target.left ? -clearance : clearance);
+    for (const y of [a.y, b.y, ...ys]) {
+      const points2 = [s, { x: gx, y: a.y }, { x: gx, y }, { x: hx, y }, { x: hx, y: b.y }, t];
+      const length = points2.slice(1).reduce((sum, p, i) => sum + Math.abs(p.x - points2[i].x) + Math.abs(p.y - points2[i].y), 0);
+      if (length >= bestLength || points2.slice(1).some((p, i) => boxes.some((r) => segmentHits(points2[i], p, r)))) continue;
+      best = points2;
+      bestLength = length;
+    }
+  }
+  if (!best) return { start, end, d: "" };
+  const points = best.filter((p, i) => i === 0 || p.x !== best[i - 1].x || p.y !== best[i - 1].y);
+  return { start: points[0], end: points[points.length - 1], points, d: points.map((p, i) => `${i ? "L" : "M"} ${pointText(p)}`).join(" ") };
+}
 
 // src/components/organisms/roadmap/Roadmap.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/components/organisms/roadmap/RoadmapNode.tsx
 var import_class_variance_authority14 = require("class-variance-authority");
@@ -9154,7 +9194,7 @@ function RoadmapNodeView({ node, state, badge, testIdPrefix, onNodeClick, onActi
   const Box = wholeBox && node.href ? "a" : wholeBox && onNodeClick ? "button" : "div";
   const primary = Box !== "div" ? label : node.href && !locked ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("a", { href: node.href, className: interactiveClass, onClick: () => onNodeClick?.(node), children: label }) : onNodeClick && !locked ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("button", { type: "button", className: interactiveClass, onClick: () => onNodeClick(node), children: label }) : label;
   const icon = node.icon ?? (badge ? { name: badge.icon ?? "check", side: "right", tone: badge.tone } : void 0);
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { style: toneStyle(nodeTone), className: "min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(Box, { "data-roadmap-node-box": node.id, href: Box === "a" ? node.href : void 0, type: Box === "button" ? "button" : void 0, onClick: Box !== "div" ? () => onNodeClick?.(node) : void 0, className: `${nodeVariants({ kind: node.kind, state })} w-full ${Box !== "div" ? focusClass : ""}`, "aria-disabled": locked || void 0, title: node.kind === "topic" || node.kind === "subtopic" ? node.description : void 0, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { style: toneStyle(nodeTone), className: "min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(Box, { style: { borderColor: node.kind === "title" || node.kind === "label" ? "transparent" : "var(--c-roadmap-border)" }, "data-roadmap-node-box": node.id, href: Box === "a" ? node.href : void 0, type: Box === "button" ? "button" : void 0, onClick: Box !== "div" ? () => onNodeClick?.(node) : void 0, className: `${nodeVariants({ kind: node.kind, state })} w-full ${Box !== "div" ? focusClass : ""}`, "aria-disabled": locked || void 0, title: node.kind === "topic" || node.kind === "subtopic" ? node.description : void 0, children: [
     icon && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(RoadmapBadge, { name: icon.name, tone: icon.tone ?? nodeTone, label: badge?.label ?? icon.name, className: `absolute top-1/2 -translate-y-1/2 ${icon.side === "left" ? "left-0 -translate-x-1/2" : "right-0 translate-x-1/2"}` }),
     primary,
     node.description && node.kind === "paragraph" && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: "mt-2 [overflow-wrap:anywhere]", children: node.description }),
@@ -9169,15 +9209,17 @@ function RoadmapNodeView({ node, state, badge, testIdPrefix, onNodeClick, onActi
 // src/components/organisms/roadmap/RoadmapGroup.tsx
 var import_jsx_runtime67 = require("react/jsx-runtime");
 function RoadmapGroupView({ group, testIdPrefix }) {
+  const tone = resolveGroupTone(group);
+  const appearance = tone === "accent" ? { "--c-roadmap-node-bg": "var(--c-roadmap-group-accent-bg)", "--c-roadmap-node-fg": "var(--c-roadmap-group-accent-fg)" } : toneStyle(tone);
   return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_jsx_runtime67.Fragment, { children: groupColumnRuns(group).map((run, index) => /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
     "div",
     {
       "data-testid": `${testIdPrefix}-group`,
       "data-group-id": group.id,
-      style: { ...toneStyle(resolveGroupTone(group)), gridColumn: `${run.start} / span ${run.span}`, gridRow: `${group.from + 1} / span ${group.to - group.from + 1}` },
+      style: { borderColor: "var(--c-roadmap-border)", ...appearance, gridColumn: `${run.start} / span ${run.span}`, gridRow: `${group.from + 1} / span ${group.to - group.from + 1}` },
       className: "pointer-events-none relative z-0 min-w-0 self-stretch rounded-[var(--radius)] border-2 border-[var(--c-roadmap-border)] bg-[var(--c-roadmap-node-bg)] text-[var(--c-roadmap-node-fg)]",
       children: [
-        index === 0 && group.title && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "absolute left-2 right-2 top-0 -translate-y-1/2 text-xs leading-normal", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "bg-[var(--c-roadmap-surface)] px-1 [overflow-wrap:anywhere]", children: group.title }) }),
+        index === 0 && group.title && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { title: group.title, className: "absolute left-2 right-2 top-0 -translate-y-1/2 text-xs leading-normal", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "inline-block max-w-full overflow-hidden text-ellipsis whitespace-nowrap bg-[var(--c-roadmap-surface)] px-1 align-top text-[var(--c-roadmap-neutral-fg)]", children: group.title }) }),
         index === 0 && group.description && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "sr-only", children: group.description })
       ]
     },
@@ -9185,49 +9227,164 @@ function RoadmapGroupView({ group, testIdPrefix }) {
   )) });
 }
 
-// src/components/organisms/roadmap/Roadmap.tsx
+// src/components/organisms/roadmap/RoadmapEdgeLayer.tsx
+var import_react7 = require("react");
 var import_jsx_runtime68 = require("react/jsx-runtime");
-function Roadmap({ document: document2, state, renderNode, onNodeClick, onAction, testIdPrefix = "roadmap", className = "", ariaLabel }) {
-  const { placements } = (0, import_react7.useMemo)(() => placeNodes(document2), [document2]);
-  const badges = (0, import_react7.useMemo)(() => new Map(document2.legend?.entries.map((entry) => [entry.id, entry])), [document2.legend]);
+function Edge({ edge, path, instance, prefix }) {
+  const pathRef = (0, import_react7.useRef)(null);
+  const [midpoint, setMidpoint] = (0, import_react7.useState)();
+  (0, import_react7.useLayoutEffect)(() => {
+    const element = pathRef.current;
+    if (edge.label && element?.getTotalLength && path.d) {
+      const p = element.getPointAtLength(element.getTotalLength() / 2);
+      setMidpoint({ x: p.x, y: p.y });
+    } else setMidpoint(void 0);
+  }, [path.d, edge.label]);
+  const arrow = resolveEdgeArrow(edge), style = resolveEdgeStyle(edge);
+  const marker = `${instance}-${edge.id}`;
+  const color = edge.tone ? `var(--c-roadmap-${edge.tone}-edge)` : "var(--c-roadmap-edge)";
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("g", { style: { color }, "data-roadmap-edge": edge.id, children: [
+    arrow !== "none" && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("marker", { id: marker, viewBox: "0 0 8 8", refX: "8", refY: "4", markerWidth: "8", markerHeight: "8", markerUnits: "userSpaceOnUse", orient: "auto-start-reverse", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("path", { d: "M 0 0 L 8 4 L 0 8 Z", fill: "currentColor" }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+      "path",
+      {
+        ref: pathRef,
+        "data-testid": `${prefix}-edge`,
+        "data-edge-id": edge.id,
+        "data-source": edge.source,
+        "data-target": edge.target,
+        d: path.d,
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeDasharray: style === "solid" ? void 0 : style === "dotted" ? "0.8 4" : "0.8 8",
+        className: "[stroke-width:2px] md:[stroke-width:3px]",
+        markerStart: arrow === "both" ? `url(#${marker})` : void 0,
+        markerEnd: arrow !== "none" ? `url(#${marker})` : void 0
+      }
+    ),
+    edge.label && midpoint && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("foreignObject", { "data-testid": `${prefix}-edge-label`, "data-edge-id": edge.id, x: midpoint.x, y: midpoint.y, width: "1", height: "1", overflow: "visible", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+      "div",
+      {
+        className: "w-max max-w-[160px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-[var(--c-roadmap-edge-label-bg)] px-2 py-0.5 text-center text-xs leading-normal text-[var(--c-roadmap-edge-label-fg)] [overflow-wrap:anywhere]",
+        style: { boxShadow: "0 0 0 2px var(--c-roadmap-surface)" },
+        children: edge.label
+      }
+    ) })
+  ] });
+}
+function RoadmapEdgeLayer({ containerRef, document: documentModel, testIdPrefix, debugPerf }) {
+  const instance = `roadmap-${(0, import_react7.useId)().replace(/:/g, "")}`;
+  const [measured, setMeasured] = (0, import_react7.useState)([]);
+  (0, import_react7.useEffect)(() => {
+    const container = containerRef.current;
+    if (!container || !documentModel.edges.length) {
+      setMeasured([]);
+      return;
+    }
+    let disposed = false, frame = 0;
+    const observed = /* @__PURE__ */ new Set();
+    const measure = () => {
+      frame = 0;
+      if (disposed) return;
+      const started = performance.now();
+      const root = container.getBoundingClientRect();
+      const boxes = /* @__PURE__ */ new Map();
+      for (const wrapper of container.querySelectorAll("[data-roadmap-node]")) {
+        if (wrapper.closest("[data-roadmap-grid]") !== container) continue;
+        const id = wrapper.dataset.roadmapNode;
+        const border = Array.from(wrapper.querySelectorAll("[data-roadmap-node-box]")).find((el) => el.dataset.roadmapNodeBox === id);
+        const element = border ?? wrapper.firstElementChild ?? wrapper;
+        for (const target of [wrapper, element]) if (!observed.has(target)) {
+          observer?.observe(target);
+          observed.add(target);
+        }
+        const rect = element.getBoundingClientRect();
+        boxes.set(id, { left: rect.left - root.left, right: rect.right - root.left, top: rect.top - root.top, bottom: rect.bottom - root.top });
+      }
+      for (const element of observed) if (!container.contains(element)) {
+        observer?.unobserve(element);
+        observed.delete(element);
+      }
+      const obstacles = [...boxes.values()];
+      const next = documentModel.edges.flatMap((edge) => {
+        const source = boxes.get(edge.source), target = boxes.get(edge.target);
+        return source && target ? [{ edge, path: routeEdge(source, target, edge, obstacles) }] : [];
+      });
+      setMeasured(next);
+      if (debugPerf) performance.measure("roadmap:edges", { start: started, end: performance.now() });
+    };
+    const schedule = () => {
+      if (!disposed && !frame) frame = requestAnimationFrame(measure);
+    };
+    const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(schedule);
+    observer?.observe(container);
+    const mutations = new MutationObserver((records) => {
+      if (records.some((record) => (record.target instanceof Element ? record.target : record.target.parentElement)?.closest("[data-roadmap-node]"))) schedule();
+    });
+    mutations.observe(container, { childList: true, subtree: true, characterData: true, attributes: true });
+    const fonts = container.ownerDocument.fonts;
+    fonts?.ready.then(schedule);
+    fonts?.addEventListener("loadingdone", schedule);
+    schedule();
+    return () => {
+      disposed = true;
+      cancelAnimationFrame(frame);
+      observer?.disconnect();
+      mutations.disconnect();
+      fonts?.removeEventListener("loadingdone", schedule);
+    };
+  }, [containerRef, documentModel, debugPerf]);
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("svg", { "data-testid": `${testIdPrefix}-edges`, "aria-hidden": "true", className: "pointer-events-none absolute inset-0 z-[1] h-full w-full overflow-visible", children: measured.map((item) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Edge, { ...item, instance, prefix: testIdPrefix }, item.edge.id)) });
+}
+
+// src/components/organisms/roadmap/Roadmap.tsx
+var import_jsx_runtime69 = require("react/jsx-runtime");
+function Roadmap({ document: document2, state, renderNode, onNodeClick, onAction, testIdPrefix = "roadmap", className = "", ariaLabel, debugPerf }) {
+  const gridRef = (0, import_react8.useRef)(null);
+  const { placements } = (0, import_react8.useMemo)(() => placeNodes(document2), [document2]);
+  const badges = (0, import_react8.useMemo)(() => new Map(document2.legend?.entries.map((entry) => [entry.id, entry])), [document2.legend]);
   const legendPlacement = document2.legend ? resolveLegendPlacement(document2.legend) : void 0;
-  const legend = document2.legend && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(RoadmapLegendView, { legend: document2.legend, testIdPrefix });
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("section", { "data-testid": testIdPrefix, "aria-label": ariaLabel ?? document2.title ?? "Roadmap", className: `min-w-0 bg-[var(--c-roadmap-surface)] p-3 text-[var(--c-roadmap-neutral-fg)] ${className}`, children: [
-    legendPlacement === "top" && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "mb-6", children: legend }),
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { "data-testid": `${testIdPrefix}-grid`, role: "list", "aria-label": "Roadmap nodes", className: "relative isolate grid min-w-0 grid-cols-3 items-center gap-x-3 gap-y-8 md:gap-x-8", children: [
-      document2.groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(RoadmapGroupView, { group, testIdPrefix }, group.id)),
+  const legend = document2.legend && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(RoadmapLegendView, { legend: document2.legend, testIdPrefix });
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("section", { "data-testid": testIdPrefix, "aria-label": ariaLabel ?? document2.title ?? "Roadmap", className: `min-w-0 bg-[var(--c-roadmap-surface)] p-3 text-[var(--c-roadmap-neutral-fg)] ${className}`, children: [
+    legendPlacement === "top" && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "mb-6", children: legend }),
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { ref: gridRef, "data-roadmap-grid": "", "data-testid": `${testIdPrefix}-grid`, role: "list", "aria-label": "Roadmap nodes", className: "relative isolate grid min-w-0 grid-cols-3 items-center gap-x-3 gap-y-2 md:gap-x-8", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(RoadmapEdgeLayer, { containerRef: gridRef, document: document2, testIdPrefix, debugPerf }),
+      document2.groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(RoadmapGroupView, { group, testIdPrefix }, group.id)),
       placements.map(({ node, row, column }) => {
         const resolvedState = resolveNodeState(node, state);
-        return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
           "div",
           {
             role: "listitem",
             "data-testid": `${testIdPrefix}-node`,
             "data-node-id": node.id,
+            "data-roadmap-node": node.id,
             "data-state": resolvedState,
             style: { gridColumn: `${column.start} / span ${column.span}`, gridRow: `${row.start} / span 1` },
-            className: "relative z-10 min-w-0 px-2 py-4",
-            children: node.kind === "legend" ? legendPlacement === "inline" ? legend : null : renderNode ? renderNode(node, resolvedState) : /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(RoadmapNodeView, { node, state: resolvedState, badge: node.badge ? badges.get(node.badge) : void 0, onNodeClick, onAction, testIdPrefix })
+            className: "relative z-10 min-w-0 px-2 py-2",
+            children: node.kind === "legend" ? legendPlacement === "inline" ? legend : null : renderNode ? renderNode(node, resolvedState) : /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(RoadmapNodeView, { node, state: resolvedState, badge: node.badge ? badges.get(node.badge) : void 0, onNodeClick, onAction, testIdPrefix })
           },
           node.id
         );
       })
     ] }),
-    legendPlacement === "bottom" && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "mt-6", children: legend })
+    legendPlacement === "bottom" && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "mt-6", children: legend })
   ] });
 }
 
 // src/hooks/use-iframe-auth.ts
-var import_react8 = require("react");
+var import_react9 = require("react");
 function useIframeAuth() {
-  const ctx = (0, import_react8.useContext)(IframeContext);
+  const ctx = (0, import_react9.useContext)(IframeContext);
   return { token: ctx.token, userId: ctx.userId, ready: ctx.ready };
 }
 
 // src/hooks/use-iframe-navigate.ts
-var import_react9 = require("react");
+var import_react10 = require("react");
 function useIframeNavigate() {
-  return (0, import_react9.useCallback)((path) => {
+  return (0, import_react10.useCallback)((path) => {
     if (!window.parent || window.parent === window) return;
     window.parent.postMessage(
       { type: "DFL_NAVIGATE", path },
@@ -9237,9 +9394,9 @@ function useIframeNavigate() {
 }
 
 // src/providers/feature-flag-provider.tsx
-var import_react10 = require("react");
-var import_jsx_runtime69 = require("react/jsx-runtime");
-var FeatureFlagContext = (0, import_react10.createContext)({
+var import_react11 = require("react");
+var import_jsx_runtime70 = require("react/jsx-runtime");
+var FeatureFlagContext = (0, import_react11.createContext)({
   flags: {},
   isEnabled: () => false
 });
@@ -9247,21 +9404,21 @@ var FeatureFlagProvider = ({
   children,
   flags
 }) => {
-  const value = (0, import_react10.useMemo)(
+  const value = (0, import_react11.useMemo)(
     () => ({
       flags,
       isEnabled: (flag) => Boolean(flags[flag])
     }),
     [flags]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(FeatureFlagContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(FeatureFlagContext.Provider, { value, children });
 };
 var useFeatureFlag = (flag) => {
-  const { isEnabled } = (0, import_react10.useContext)(FeatureFlagContext);
+  const { isEnabled } = (0, import_react11.useContext)(FeatureFlagContext);
   return isEnabled(flag);
 };
 var useFeatureFlags = () => {
-  const { flags } = (0, import_react10.useContext)(FeatureFlagContext);
+  const { flags } = (0, import_react11.useContext)(FeatureFlagContext);
   return flags;
 };
 // Annotate the CommonJS export names for ESM import in node:

package/dist/index.d.cts

@@ -3268,11 +3268,12 @@ interface RoadmapProps {
     renderNode?: (node: RoadmapNode, state: RoadmapNodeState) => ReactNode;
     onNodeClick?: (node: RoadmapNode) => void;
     onAction?: (actionId: string, node: RoadmapNode) => void;
+    debugPerf?: boolean;
     testIdPrefix?: string;
     className?: string;
     ariaLabel?: string;
 }
 /** Dark-only, ordinary document scroll. The JSON owns placement; CSS owns the pixels. */
-declare function Roadmap({ document, state, renderNode, onNodeClick, onAction, testIdPrefix, className, ariaLabel }: RoadmapProps): React__default.JSX.Element;
+declare function Roadmap({ document, state, renderNode, onNodeClick, onAction, testIdPrefix, className, ariaLabel, debugPerf }: RoadmapProps): React__default.JSX.Element;
 
 export { ALLOWED_ORIGINS, AVATAR_MEMBER_PALETTE_SIZE, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppNavbar, type AppNavbarProps, AppSidebar, type AppSidebarProps, AspectRatio, Avatar, AvatarFallback, AvatarGroup, AvatarImage, type AvatarSize, AvatarStatus, type AvatarStatusValue, type AvatarTone, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEntry, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselDots, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleHeader, CollapsibleItem, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ConfirmDialog, type ConfirmDialogProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DEFAULT_EDGE_ARROW, DEFAULT_EDGE_ROUTE, DEFAULT_EDGE_STYLE, DEFAULT_GROUP_TONE, DEFAULT_LEGEND_PLACEMENT, DEFAULT_NAME_COL_WIDTH, DEFAULT_NODE_SPAN, DEFAULT_NODE_STATE, type DflIframeMessage, type DflNavigateMessage, type DflReadyMessage, DflRemote, type DflRemoteProps, type DflResizeMessage, type DflSetTokenMessage, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Gantt, type GanttDependency, type GanttMilestone, type GanttProps, type GanttStage, HoverCard, HoverCardContent, HoverCardTrigger, IconButton, type IconButtonProps, IframeAware, type IframeAwareProps, IframeContext, type IframeContextValue, type IframeMessageType, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Kbd, type KbdProps, Label, LoginPage, type LoginPageProps, LoginScreen, type LoginScreenProps, MEMBER_PALETTE_SIZE, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NODE_KIND_DEFAULT_TONE, type NavGroup, type NavItem, type NavbarUserInfo, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, type OTPStatus, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PasswordInput, type PasswordInputProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, type ProgressProps, ProtectedRoute, type ProtectedRouteProps, PublishDrawer, type PublishDrawerProps, type PublishDrawerSupabase, type PublishResult, type PublishStatus, type PublisherAccount, ROADMAP_ARROWS, ROADMAP_COLUMNS, ROADMAP_EDGE_LABEL_MAX, ROADMAP_EDGE_ROUTES, ROADMAP_EDGE_STYLES, ROADMAP_LABEL_MAX, ROADMAP_LEGEND_PLACEMENTS, ROADMAP_NODE_ID_PATTERN, ROADMAP_NODE_KINDS, ROADMAP_NODE_STATES, ROADMAP_TONES, RadioGroup, RadioGroupItem, RadioGroupRow, ResizableHandle, ResizablePanel, ResizablePanelGroup, Roadmap, type RoadmapAction, type RoadmapArrow, type RoadmapColumn, type RoadmapDocument, type RoadmapEdge, type RoadmapEdgeRoute, type RoadmapEdgeStyle, type RoadmapGroup, type RoadmapGroupRange, type RoadmapIcon, type RoadmapLegend, type RoadmapLegendEntry, type RoadmapLegendPlacement, type RoadmapLink, type RoadmapNode, type RoadmapNodeKind, type RoadmapNodeState, type RoadmapOverlap, type RoadmapPlacement, type RoadmapProps, type RoadmapStateOverlay, type RoadmapTone, ScrollArea, type ScrollAreaScrollbars, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SeparatorWithLabel, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, SonnerToaster, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, Toast, ToastAction, type ToastActionElement, ToastClose, type ToastComponentProps, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UserAvatar, type UserAvatarProps, type UserInfo, UserMenu, type UserMenuItem, type UserMenuProps, avatarMemberColor, badgeVariants, barGridColumn, buttonVariants, clampPct, columnIndex, columnsCovered, columnsUsed, filterPublishableAccounts, firstFreeRow, getInitials, gridColumnFor, groupColumnRuns, groupRanges, iconButtonVariants, isAllowedOrigin, kbdVariants, labelVariants, maxRowOf, memberHueIndex, memberHueVar, navigationMenuTriggerStyle, nodesByRow, parseRoadmapDocument, parseRoadmapStateOverlay, parseTags, placeNodes, resolveEdgeArrow, resolveEdgeRoute, resolveEdgeStyle, resolveGroupColumns, resolveGroupTone, resolveLegendPlacement, resolveNameColWidth, resolveNodeSpan, resolveNodeState, resolveNodeTone, resolveWeekCount, resolveWeekLabels, roadmapActionSchema, roadmapDocumentSchema, roadmapEdgeSchema, roadmapGroupSchema, roadmapIconSchema, roadmapLegendEntrySchema, roadmapLegendSchema, roadmapLinkSchema, roadmapNodeSchema, roadmapNodeStateSchema, roadmapStateOverlaySchema, roadmapStateSchema, rowsOf, safeParseRoadmapDocument, safeParseRoadmapStateOverlay, stageProgress, toggleVariants, useFormField, useSidebar, validateNoOverlap, validatePublishForm };

package/dist/index.d.ts

@@ -3268,11 +3268,12 @@ interface RoadmapProps {
     renderNode?: (node: RoadmapNode, state: RoadmapNodeState) => ReactNode;
     onNodeClick?: (node: RoadmapNode) => void;
     onAction?: (actionId: string, node: RoadmapNode) => void;
+    debugPerf?: boolean;
     testIdPrefix?: string;
     className?: string;
     ariaLabel?: string;
 }
 /** Dark-only, ordinary document scroll. The JSON owns placement; CSS owns the pixels. */
-declare function Roadmap({ document, state, renderNode, onNodeClick, onAction, testIdPrefix, className, ariaLabel }: RoadmapProps): React__default.JSX.Element;
+declare function Roadmap({ document, state, renderNode, onNodeClick, onAction, testIdPrefix, className, ariaLabel, debugPerf }: RoadmapProps): React__default.JSX.Element;
 
 export { ALLOWED_ORIGINS, AVATAR_MEMBER_PALETTE_SIZE, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppNavbar, type AppNavbarProps, AppSidebar, type AppSidebarProps, AspectRatio, Avatar, AvatarFallback, AvatarGroup, AvatarImage, type AvatarSize, AvatarStatus, type AvatarStatusValue, type AvatarTone, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEntry, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselDots, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleHeader, CollapsibleItem, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ConfirmDialog, type ConfirmDialogProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DEFAULT_EDGE_ARROW, DEFAULT_EDGE_ROUTE, DEFAULT_EDGE_STYLE, DEFAULT_GROUP_TONE, DEFAULT_LEGEND_PLACEMENT, DEFAULT_NAME_COL_WIDTH, DEFAULT_NODE_SPAN, DEFAULT_NODE_STATE, type DflIframeMessage, type DflNavigateMessage, type DflReadyMessage, DflRemote, type DflRemoteProps, type DflResizeMessage, type DflSetTokenMessage, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Gantt, type GanttDependency, type GanttMilestone, type GanttProps, type GanttStage, HoverCard, HoverCardContent, HoverCardTrigger, IconButton, type IconButtonProps, IframeAware, type IframeAwareProps, IframeContext, type IframeContextValue, type IframeMessageType, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Kbd, type KbdProps, Label, LoginPage, type LoginPageProps, LoginScreen, type LoginScreenProps, MEMBER_PALETTE_SIZE, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NODE_KIND_DEFAULT_TONE, type NavGroup, type NavItem, type NavbarUserInfo, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, type OTPStatus, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PasswordInput, type PasswordInputProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, type ProgressProps, ProtectedRoute, type ProtectedRouteProps, PublishDrawer, type PublishDrawerProps, type PublishDrawerSupabase, type PublishResult, type PublishStatus, type PublisherAccount, ROADMAP_ARROWS, ROADMAP_COLUMNS, ROADMAP_EDGE_LABEL_MAX, ROADMAP_EDGE_ROUTES, ROADMAP_EDGE_STYLES, ROADMAP_LABEL_MAX, ROADMAP_LEGEND_PLACEMENTS, ROADMAP_NODE_ID_PATTERN, ROADMAP_NODE_KINDS, ROADMAP_NODE_STATES, ROADMAP_TONES, RadioGroup, RadioGroupItem, RadioGroupRow, ResizableHandle, ResizablePanel, ResizablePanelGroup, Roadmap, type RoadmapAction, type RoadmapArrow, type RoadmapColumn, type RoadmapDocument, type RoadmapEdge, type RoadmapEdgeRoute, type RoadmapEdgeStyle, type RoadmapGroup, type RoadmapGroupRange, type RoadmapIcon, type RoadmapLegend, type RoadmapLegendEntry, type RoadmapLegendPlacement, type RoadmapLink, type RoadmapNode, type RoadmapNodeKind, type RoadmapNodeState, type RoadmapOverlap, type RoadmapPlacement, type RoadmapProps, type RoadmapStateOverlay, type RoadmapTone, ScrollArea, type ScrollAreaScrollbars, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SeparatorWithLabel, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, SonnerToaster, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, Toast, ToastAction, type ToastActionElement, ToastClose, type ToastComponentProps, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UserAvatar, type UserAvatarProps, type UserInfo, UserMenu, type UserMenuItem, type UserMenuProps, avatarMemberColor, badgeVariants, barGridColumn, buttonVariants, clampPct, columnIndex, columnsCovered, columnsUsed, filterPublishableAccounts, firstFreeRow, getInitials, gridColumnFor, groupColumnRuns, groupRanges, iconButtonVariants, isAllowedOrigin, kbdVariants, labelVariants, maxRowOf, memberHueIndex, memberHueVar, navigationMenuTriggerStyle, nodesByRow, parseRoadmapDocument, parseRoadmapStateOverlay, parseTags, placeNodes, resolveEdgeArrow, resolveEdgeRoute, resolveEdgeStyle, resolveGroupColumns, resolveGroupTone, resolveLegendPlacement, resolveNameColWidth, resolveNodeSpan, resolveNodeState, resolveNodeTone, resolveWeekCount, resolveWeekLabels, roadmapActionSchema, roadmapDocumentSchema, roadmapEdgeSchema, roadmapGroupSchema, roadmapIconSchema, roadmapLegendEntrySchema, roadmapLegendSchema, roadmapLinkSchema, roadmapNodeSchema, roadmapNodeStateSchema, roadmapStateOverlaySchema, roadmapStateSchema, rowsOf, safeParseRoadmapDocument, safeParseRoadmapStateOverlay, stageProgress, toggleVariants, useFormField, useSidebar, validateNoOverlap, validatePublishForm };

package/dist/index.js

@@ -8715,9 +8715,49 @@ function firstFreeRow(taken, columns, from) {
   }
   return row;
 }
+var pointText = (p) => `${p.x} ${p.y}`;
+var center = (r) => ({ x: (r.left + r.right) / 2, y: (r.top + r.bottom) / 2 });
+function segmentHits(a, b, r) {
+  return a.x === b.x ? a.x > r.left && a.x < r.right && Math.max(a.y, b.y) > r.top && Math.min(a.y, b.y) < r.bottom : a.y > r.top && a.y < r.bottom && Math.max(a.x, b.x) > r.left && Math.min(a.x, b.x) < r.right;
+}
+function routeEdge(source, target, edge, obstacles = []) {
+  const a = center(source), b = center(target);
+  const sameColumn = Math.abs(a.x - b.x) < 1;
+  const vertical = sameColumn || source.left < target.right && target.left < source.right;
+  const down = b.y >= a.y, right = b.x >= a.x;
+  const start = vertical ? { x: a.x, y: down ? source.bottom : source.top } : { x: right ? source.right : source.left, y: a.y };
+  const end = vertical ? { x: b.x, y: down ? target.top : target.bottom } : { x: right ? target.left : target.right, y: b.y };
+  const route = edge.route ?? "auto";
+  if (route === "straight" || route === "auto" && sameColumn) return { start, end, d: `M ${pointText(start)} L ${pointText(end)}` };
+  if (route !== "elbow") {
+    const mid = vertical ? (start.y + end.y) / 2 : (start.x + end.x) / 2;
+    const c1 = vertical ? { x: start.x, y: mid } : { x: mid, y: start.y };
+    const c2 = vertical ? { x: end.x, y: mid } : { x: mid, y: end.y };
+    return { start, end, d: `M ${pointText(start)} C ${pointText(c1)} ${pointText(c2)} ${pointText(end)}` };
+  }
+  const boxes = [.../* @__PURE__ */ new Set([source, target, ...obstacles])];
+  const clearance = 4;
+  const ys = [...new Set(boxes.flatMap((r) => [r.top - clearance, r.bottom + clearance]))];
+  let best, bestLength = Infinity;
+  for (const sx of [source.left, source.right]) for (const tx of [target.left, target.right]) {
+    const s = { x: sx, y: a.y }, t = { x: tx, y: b.y };
+    const gx = sx + (sx === source.left ? -clearance : clearance);
+    const hx = tx + (tx === target.left ? -clearance : clearance);
+    for (const y of [a.y, b.y, ...ys]) {
+      const points2 = [s, { x: gx, y: a.y }, { x: gx, y }, { x: hx, y }, { x: hx, y: b.y }, t];
+      const length = points2.slice(1).reduce((sum, p, i) => sum + Math.abs(p.x - points2[i].x) + Math.abs(p.y - points2[i].y), 0);
+      if (length >= bestLength || points2.slice(1).some((p, i) => boxes.some((r) => segmentHits(points2[i], p, r)))) continue;
+      best = points2;
+      bestLength = length;
+    }
+  }
+  if (!best) return { start, end, d: "" };
+  const points = best.filter((p, i) => i === 0 || p.x !== best[i - 1].x || p.y !== best[i - 1].y);
+  return { start: points[0], end: points[points.length - 1], points, d: points.map((p, i) => `${i ? "L" : "M"} ${pointText(p)}`).join(" ") };
+}
 
 // src/components/organisms/roadmap/Roadmap.tsx
-import { useMemo as useMemo5 } from "react";
+import { useMemo as useMemo5, useRef as useRef6 } from "react";
 
 // src/components/organisms/roadmap/RoadmapNode.tsx
 import { cva as cva14 } from "class-variance-authority";
@@ -8765,7 +8805,7 @@ function RoadmapNodeView({ node, state, badge, testIdPrefix, onNodeClick, onActi
   const Box = wholeBox && node.href ? "a" : wholeBox && onNodeClick ? "button" : "div";
   const primary = Box !== "div" ? label : node.href && !locked ? /* @__PURE__ */ jsx66("a", { href: node.href, className: interactiveClass, onClick: () => onNodeClick?.(node), children: label }) : onNodeClick && !locked ? /* @__PURE__ */ jsx66("button", { type: "button", className: interactiveClass, onClick: () => onNodeClick(node), children: label }) : label;
   const icon = node.icon ?? (badge ? { name: badge.icon ?? "check", side: "right", tone: badge.tone } : void 0);
-  return /* @__PURE__ */ jsx66("div", { style: toneStyle(nodeTone), className: "min-w-0", children: /* @__PURE__ */ jsxs41(Box, { "data-roadmap-node-box": node.id, href: Box === "a" ? node.href : void 0, type: Box === "button" ? "button" : void 0, onClick: Box !== "div" ? () => onNodeClick?.(node) : void 0, className: `${nodeVariants({ kind: node.kind, state })} w-full ${Box !== "div" ? focusClass : ""}`, "aria-disabled": locked || void 0, title: node.kind === "topic" || node.kind === "subtopic" ? node.description : void 0, children: [
+  return /* @__PURE__ */ jsx66("div", { style: toneStyle(nodeTone), className: "min-w-0", children: /* @__PURE__ */ jsxs41(Box, { style: { borderColor: node.kind === "title" || node.kind === "label" ? "transparent" : "var(--c-roadmap-border)" }, "data-roadmap-node-box": node.id, href: Box === "a" ? node.href : void 0, type: Box === "button" ? "button" : void 0, onClick: Box !== "div" ? () => onNodeClick?.(node) : void 0, className: `${nodeVariants({ kind: node.kind, state })} w-full ${Box !== "div" ? focusClass : ""}`, "aria-disabled": locked || void 0, title: node.kind === "topic" || node.kind === "subtopic" ? node.description : void 0, children: [
     icon && /* @__PURE__ */ jsx66(RoadmapBadge, { name: icon.name, tone: icon.tone ?? nodeTone, label: badge?.label ?? icon.name, className: `absolute top-1/2 -translate-y-1/2 ${icon.side === "left" ? "left-0 -translate-x-1/2" : "right-0 translate-x-1/2"}` }),
     primary,
     node.description && node.kind === "paragraph" && /* @__PURE__ */ jsx66("p", { className: "mt-2 [overflow-wrap:anywhere]", children: node.description }),
@@ -8780,15 +8820,17 @@ function RoadmapNodeView({ node, state, badge, testIdPrefix, onNodeClick, onActi
 // src/components/organisms/roadmap/RoadmapGroup.tsx
 import { Fragment as Fragment10, jsx as jsx67, jsxs as jsxs42 } from "react/jsx-runtime";
 function RoadmapGroupView({ group, testIdPrefix }) {
+  const tone = resolveGroupTone(group);
+  const appearance = tone === "accent" ? { "--c-roadmap-node-bg": "var(--c-roadmap-group-accent-bg)", "--c-roadmap-node-fg": "var(--c-roadmap-group-accent-fg)" } : toneStyle(tone);
   return /* @__PURE__ */ jsx67(Fragment10, { children: groupColumnRuns(group).map((run, index) => /* @__PURE__ */ jsxs42(
     "div",
     {
       "data-testid": `${testIdPrefix}-group`,
       "data-group-id": group.id,
-      style: { ...toneStyle(resolveGroupTone(group)), gridColumn: `${run.start} / span ${run.span}`, gridRow: `${group.from + 1} / span ${group.to - group.from + 1}` },
+      style: { borderColor: "var(--c-roadmap-border)", ...appearance, gridColumn: `${run.start} / span ${run.span}`, gridRow: `${group.from + 1} / span ${group.to - group.from + 1}` },
       className: "pointer-events-none relative z-0 min-w-0 self-stretch rounded-[var(--radius)] border-2 border-[var(--c-roadmap-border)] bg-[var(--c-roadmap-node-bg)] text-[var(--c-roadmap-node-fg)]",
       children: [
-        index === 0 && group.title && /* @__PURE__ */ jsx67("span", { className: "absolute left-2 right-2 top-0 -translate-y-1/2 text-xs leading-normal", children: /* @__PURE__ */ jsx67("span", { className: "bg-[var(--c-roadmap-surface)] px-1 [overflow-wrap:anywhere]", children: group.title }) }),
+        index === 0 && group.title && /* @__PURE__ */ jsx67("span", { title: group.title, className: "absolute left-2 right-2 top-0 -translate-y-1/2 text-xs leading-normal", children: /* @__PURE__ */ jsx67("span", { className: "inline-block max-w-full overflow-hidden text-ellipsis whitespace-nowrap bg-[var(--c-roadmap-surface)] px-1 align-top text-[var(--c-roadmap-neutral-fg)]", children: group.title }) }),
         index === 0 && group.description && /* @__PURE__ */ jsx67("span", { className: "sr-only", children: group.description })
       ]
     },
@@ -8796,35 +8838,150 @@ function RoadmapGroupView({ group, testIdPrefix }) {
   )) });
 }
 
-// src/components/organisms/roadmap/Roadmap.tsx
+// src/components/organisms/roadmap/RoadmapEdgeLayer.tsx
+import { useId as useId4, useEffect as useEffect10, useLayoutEffect as useLayoutEffect2, useRef as useRef5, useState as useState13 } from "react";
 import { jsx as jsx68, jsxs as jsxs43 } from "react/jsx-runtime";
-function Roadmap({ document: document2, state, renderNode, onNodeClick, onAction, testIdPrefix = "roadmap", className = "", ariaLabel }) {
+function Edge({ edge, path, instance, prefix }) {
+  const pathRef = useRef5(null);
+  const [midpoint, setMidpoint] = useState13();
+  useLayoutEffect2(() => {
+    const element = pathRef.current;
+    if (edge.label && element?.getTotalLength && path.d) {
+      const p = element.getPointAtLength(element.getTotalLength() / 2);
+      setMidpoint({ x: p.x, y: p.y });
+    } else setMidpoint(void 0);
+  }, [path.d, edge.label]);
+  const arrow = resolveEdgeArrow(edge), style = resolveEdgeStyle(edge);
+  const marker = `${instance}-${edge.id}`;
+  const color = edge.tone ? `var(--c-roadmap-${edge.tone}-edge)` : "var(--c-roadmap-edge)";
+  return /* @__PURE__ */ jsxs43("g", { style: { color }, "data-roadmap-edge": edge.id, children: [
+    arrow !== "none" && /* @__PURE__ */ jsx68("defs", { children: /* @__PURE__ */ jsx68("marker", { id: marker, viewBox: "0 0 8 8", refX: "8", refY: "4", markerWidth: "8", markerHeight: "8", markerUnits: "userSpaceOnUse", orient: "auto-start-reverse", children: /* @__PURE__ */ jsx68("path", { d: "M 0 0 L 8 4 L 0 8 Z", fill: "currentColor" }) }) }),
+    /* @__PURE__ */ jsx68(
+      "path",
+      {
+        ref: pathRef,
+        "data-testid": `${prefix}-edge`,
+        "data-edge-id": edge.id,
+        "data-source": edge.source,
+        "data-target": edge.target,
+        d: path.d,
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeDasharray: style === "solid" ? void 0 : style === "dotted" ? "0.8 4" : "0.8 8",
+        className: "[stroke-width:2px] md:[stroke-width:3px]",
+        markerStart: arrow === "both" ? `url(#${marker})` : void 0,
+        markerEnd: arrow !== "none" ? `url(#${marker})` : void 0
+      }
+    ),
+    edge.label && midpoint && /* @__PURE__ */ jsx68("foreignObject", { "data-testid": `${prefix}-edge-label`, "data-edge-id": edge.id, x: midpoint.x, y: midpoint.y, width: "1", height: "1", overflow: "visible", children: /* @__PURE__ */ jsx68(
+      "div",
+      {
+        className: "w-max max-w-[160px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-[var(--c-roadmap-edge-label-bg)] px-2 py-0.5 text-center text-xs leading-normal text-[var(--c-roadmap-edge-label-fg)] [overflow-wrap:anywhere]",
+        style: { boxShadow: "0 0 0 2px var(--c-roadmap-surface)" },
+        children: edge.label
+      }
+    ) })
+  ] });
+}
+function RoadmapEdgeLayer({ containerRef, document: documentModel, testIdPrefix, debugPerf }) {
+  const instance = `roadmap-${useId4().replace(/:/g, "")}`;
+  const [measured, setMeasured] = useState13([]);
+  useEffect10(() => {
+    const container = containerRef.current;
+    if (!container || !documentModel.edges.length) {
+      setMeasured([]);
+      return;
+    }
+    let disposed = false, frame = 0;
+    const observed = /* @__PURE__ */ new Set();
+    const measure = () => {
+      frame = 0;
+      if (disposed) return;
+      const started = performance.now();
+      const root = container.getBoundingClientRect();
+      const boxes = /* @__PURE__ */ new Map();
+      for (const wrapper of container.querySelectorAll("[data-roadmap-node]")) {
+        if (wrapper.closest("[data-roadmap-grid]") !== container) continue;
+        const id = wrapper.dataset.roadmapNode;
+        const border = Array.from(wrapper.querySelectorAll("[data-roadmap-node-box]")).find((el) => el.dataset.roadmapNodeBox === id);
+        const element = border ?? wrapper.firstElementChild ?? wrapper;
+        for (const target of [wrapper, element]) if (!observed.has(target)) {
+          observer?.observe(target);
+          observed.add(target);
+        }
+        const rect = element.getBoundingClientRect();
+        boxes.set(id, { left: rect.left - root.left, right: rect.right - root.left, top: rect.top - root.top, bottom: rect.bottom - root.top });
+      }
+      for (const element of observed) if (!container.contains(element)) {
+        observer?.unobserve(element);
+        observed.delete(element);
+      }
+      const obstacles = [...boxes.values()];
+      const next = documentModel.edges.flatMap((edge) => {
+        const source = boxes.get(edge.source), target = boxes.get(edge.target);
+        return source && target ? [{ edge, path: routeEdge(source, target, edge, obstacles) }] : [];
+      });
+      setMeasured(next);
+      if (debugPerf) performance.measure("roadmap:edges", { start: started, end: performance.now() });
+    };
+    const schedule = () => {
+      if (!disposed && !frame) frame = requestAnimationFrame(measure);
+    };
+    const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(schedule);
+    observer?.observe(container);
+    const mutations = new MutationObserver((records) => {
+      if (records.some((record) => (record.target instanceof Element ? record.target : record.target.parentElement)?.closest("[data-roadmap-node]"))) schedule();
+    });
+    mutations.observe(container, { childList: true, subtree: true, characterData: true, attributes: true });
+    const fonts = container.ownerDocument.fonts;
+    fonts?.ready.then(schedule);
+    fonts?.addEventListener("loadingdone", schedule);
+    schedule();
+    return () => {
+      disposed = true;
+      cancelAnimationFrame(frame);
+      observer?.disconnect();
+      mutations.disconnect();
+      fonts?.removeEventListener("loadingdone", schedule);
+    };
+  }, [containerRef, documentModel, debugPerf]);
+  return /* @__PURE__ */ jsx68("svg", { "data-testid": `${testIdPrefix}-edges`, "aria-hidden": "true", className: "pointer-events-none absolute inset-0 z-[1] h-full w-full overflow-visible", children: measured.map((item) => /* @__PURE__ */ jsx68(Edge, { ...item, instance, prefix: testIdPrefix }, item.edge.id)) });
+}
+
+// src/components/organisms/roadmap/Roadmap.tsx
+import { jsx as jsx69, jsxs as jsxs44 } from "react/jsx-runtime";
+function Roadmap({ document: document2, state, renderNode, onNodeClick, onAction, testIdPrefix = "roadmap", className = "", ariaLabel, debugPerf }) {
+  const gridRef = useRef6(null);
   const { placements } = useMemo5(() => placeNodes(document2), [document2]);
   const badges = useMemo5(() => new Map(document2.legend?.entries.map((entry) => [entry.id, entry])), [document2.legend]);
   const legendPlacement = document2.legend ? resolveLegendPlacement(document2.legend) : void 0;
-  const legend = document2.legend && /* @__PURE__ */ jsx68(RoadmapLegendView, { legend: document2.legend, testIdPrefix });
-  return /* @__PURE__ */ jsxs43("section", { "data-testid": testIdPrefix, "aria-label": ariaLabel ?? document2.title ?? "Roadmap", className: `min-w-0 bg-[var(--c-roadmap-surface)] p-3 text-[var(--c-roadmap-neutral-fg)] ${className}`, children: [
-    legendPlacement === "top" && /* @__PURE__ */ jsx68("div", { className: "mb-6", children: legend }),
-    /* @__PURE__ */ jsxs43("div", { "data-testid": `${testIdPrefix}-grid`, role: "list", "aria-label": "Roadmap nodes", className: "relative isolate grid min-w-0 grid-cols-3 items-center gap-x-3 gap-y-8 md:gap-x-8", children: [
-      document2.groups.map((group) => /* @__PURE__ */ jsx68(RoadmapGroupView, { group, testIdPrefix }, group.id)),
+  const legend = document2.legend && /* @__PURE__ */ jsx69(RoadmapLegendView, { legend: document2.legend, testIdPrefix });
+  return /* @__PURE__ */ jsxs44("section", { "data-testid": testIdPrefix, "aria-label": ariaLabel ?? document2.title ?? "Roadmap", className: `min-w-0 bg-[var(--c-roadmap-surface)] p-3 text-[var(--c-roadmap-neutral-fg)] ${className}`, children: [
+    legendPlacement === "top" && /* @__PURE__ */ jsx69("div", { className: "mb-6", children: legend }),
+    /* @__PURE__ */ jsxs44("div", { ref: gridRef, "data-roadmap-grid": "", "data-testid": `${testIdPrefix}-grid`, role: "list", "aria-label": "Roadmap nodes", className: "relative isolate grid min-w-0 grid-cols-3 items-center gap-x-3 gap-y-2 md:gap-x-8", children: [
+      /* @__PURE__ */ jsx69(RoadmapEdgeLayer, { containerRef: gridRef, document: document2, testIdPrefix, debugPerf }),
+      document2.groups.map((group) => /* @__PURE__ */ jsx69(RoadmapGroupView, { group, testIdPrefix }, group.id)),
       placements.map(({ node, row, column }) => {
         const resolvedState = resolveNodeState(node, state);
-        return /* @__PURE__ */ jsx68(
+        return /* @__PURE__ */ jsx69(
           "div",
           {
             role: "listitem",
             "data-testid": `${testIdPrefix}-node`,
             "data-node-id": node.id,
+            "data-roadmap-node": node.id,
             "data-state": resolvedState,
             style: { gridColumn: `${column.start} / span ${column.span}`, gridRow: `${row.start} / span 1` },
-            className: "relative z-10 min-w-0 px-2 py-4",
-            children: node.kind === "legend" ? legendPlacement === "inline" ? legend : null : renderNode ? renderNode(node, resolvedState) : /* @__PURE__ */ jsx68(RoadmapNodeView, { node, state: resolvedState, badge: node.badge ? badges.get(node.badge) : void 0, onNodeClick, onAction, testIdPrefix })
+            className: "relative z-10 min-w-0 px-2 py-2",
+            children: node.kind === "legend" ? legendPlacement === "inline" ? legend : null : renderNode ? renderNode(node, resolvedState) : /* @__PURE__ */ jsx69(RoadmapNodeView, { node, state: resolvedState, badge: node.badge ? badges.get(node.badge) : void 0, onNodeClick, onAction, testIdPrefix })
           },
           node.id
         );
       })
     ] }),
-    legendPlacement === "bottom" && /* @__PURE__ */ jsx68("div", { className: "mt-6", children: legend })
+    legendPlacement === "bottom" && /* @__PURE__ */ jsx69("div", { className: "mt-6", children: legend })
   ] });
 }
 
@@ -8853,7 +9010,7 @@ import {
   useContext as useContext10,
   useMemo as useMemo6
 } from "react";
-import { jsx as jsx69 } from "react/jsx-runtime";
+import { jsx as jsx70 } from "react/jsx-runtime";
 var FeatureFlagContext = createContext10({
   flags: {},
   isEnabled: () => false
@@ -8869,7 +9026,7 @@ var FeatureFlagProvider = ({
     }),
     [flags]
   );
-  return /* @__PURE__ */ jsx69(FeatureFlagContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx70(FeatureFlagContext.Provider, { value, children });
 };
 var useFeatureFlag = (flag) => {
   const { isEnabled } = useContext10(FeatureFlagContext);

package/dist/styles/tokens.css

@@ -1709,6 +1709,19 @@
 
 /* Origin: agent — Roadmap. Q1: dark default and dark only. */
 :root {
+  --c-roadmap-group-accent-bg: var(--s-surface-elevated);
+  --c-roadmap-group-accent-fg: var(--s-ink-primary);
+  --c-roadmap-edge: var(--s-ink-muted);
+  --c-roadmap-edge-label-bg: var(--s-surface-elevated);
+  --c-roadmap-edge-label-fg: var(--s-ink-secondary);
+  --c-roadmap-primary-edge: var(--s-brand-solid);
+  --c-roadmap-secondary-edge: var(--s-ink-secondary);
+  --c-roadmap-accent-edge: var(--s-ink-primary);
+  --c-roadmap-muted-edge: var(--s-ink-muted);
+  --c-roadmap-neutral-edge: var(--s-ink-secondary);
+  --c-roadmap-success-edge: var(--s-success-fg);
+  --c-roadmap-info-edge: var(--s-info-fg);
+  --c-roadmap-danger-edge: var(--s-danger-fg);
   --c-roadmap-surface: var(--s-surface-page);
   --c-roadmap-border: var(--s-border-strong);
   --c-roadmap-focus: var(--s-border-focus);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devfellowship/components",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "description": "DFL Design System — UI components, hooks, utils and providers",
   "type": "module",
   "sideEffects": [