@devfellowship/components 3.3.0 → 3.5.0

package/dist/index.cjs

@@ -244,6 +244,7 @@ __export(src_exports, {
   ResizableHandle: () => ResizableHandle,
   ResizablePanel: () => ResizablePanel,
   ResizablePanelGroup: () => ResizablePanelGroup,
+  Roadmap: () => Roadmap,
   ScrollArea: () => ScrollArea,
   ScrollBar: () => ScrollBar,
   Select: () => Select,
@@ -9103,18 +9104,287 @@ 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/hooks/use-iframe-auth.ts
+// src/components/organisms/roadmap/Roadmap.tsx
+var import_react8 = require("react");
+
+// src/components/organisms/roadmap/RoadmapNode.tsx
+var import_class_variance_authority14 = require("class-variance-authority");
+
+// src/components/organisms/roadmap/RoadmapLegend.tsx
+var import_lucide_react22 = require("lucide-react");
+
+// src/components/organisms/roadmap/appearance.ts
+function toneStyle(tone) {
+  return {
+    "--c-roadmap-node-bg": `var(--c-roadmap-${tone}-bg)`,
+    "--c-roadmap-node-fg": `var(--c-roadmap-${tone}-fg)`
+  };
+}
+var focusClass = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--c-roadmap-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--c-roadmap-surface)]";
+
+// src/components/organisms/roadmap/RoadmapLegend.tsx
+var import_jsx_runtime65 = require("react/jsx-runtime");
+var glyphs = { check: import_lucide_react22.Check, globe: import_lucide_react22.Globe, lock: import_lucide_react22.Lock, star: import_lucide_react22.Star, "book-open": import_lucide_react22.BookOpen, play: import_lucide_react22.Play, circle: import_lucide_react22.Circle, clock: import_lucide_react22.Clock, link: import_lucide_react22.Link, "external-link": import_lucide_react22.ExternalLink };
+function RoadmapBadge({ name = "check", tone = "neutral", label, className = "" }) {
+  const Glyph = glyphs[name] ?? import_lucide_react22.CircleHelp;
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { "aria-label": label, "aria-hidden": label ? void 0 : true, style: toneStyle(tone), className: `inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 border-[var(--c-roadmap-border)] bg-[var(--c-roadmap-node-bg)] text-[var(--c-roadmap-node-fg)] ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Glyph, { size: 12, "aria-hidden": "true" }) });
+}
+function RoadmapLegendView({ legend, testIdPrefix = "roadmap" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("aside", { "data-testid": `${testIdPrefix}-legend`, "aria-label": "Legend", className: "min-w-0 rounded-[var(--radius)] border-2 border-[var(--c-roadmap-border)] bg-[var(--c-roadmap-neutral-bg)] p-3 text-[var(--c-roadmap-neutral-fg)]", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("ul", { className: "m-0 flex list-none flex-wrap gap-3 p-0", children: legend.entries.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("li", { className: "flex min-w-0 items-center gap-2 text-xs leading-normal", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(RoadmapBadge, { name: entry.icon, tone: entry.tone }),
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "[overflow-wrap:anywhere]", children: entry.label })
+  ] }, entry.id)) }) });
+}
+
+// src/components/organisms/roadmap/RoadmapNode.tsx
+var import_jsx_runtime66 = require("react/jsx-runtime");
+var nodeVariants = (0, import_class_variance_authority14.cva)("relative flex min-w-0 flex-col justify-center rounded-[var(--radius)] border-2 px-2 py-3 text-center text-xs leading-normal md:px-4 md:text-base text-[var(--c-roadmap-node-fg)]", {
+  variants: {
+    kind: { topic: "min-h-[49px] border-[var(--c-roadmap-border)] bg-[var(--c-roadmap-node-bg)]", subtopic: "min-h-[49px] border-[var(--c-roadmap-border)] bg-[var(--c-roadmap-node-bg)]", button: "min-h-[49px] border-[var(--c-roadmap-border)] bg-[var(--c-roadmap-node-bg)]", label: "border-transparent bg-transparent", title: "border-transparent bg-transparent font-semibold md:text-[28px]", paragraph: "text-left border-[var(--c-roadmap-border)] bg-[var(--c-roadmap-node-bg)]", legend: "border-[var(--c-roadmap-border)] bg-[var(--c-roadmap-node-bg)]" },
+    state: { todo: "", done: "[--c-roadmap-node-bg:var(--c-roadmap-done-bg)] [--c-roadmap-node-fg:var(--c-roadmap-done-fg)]", learning: "[--c-roadmap-node-bg:var(--c-roadmap-learning-bg)] [--c-roadmap-node-fg:var(--c-roadmap-learning-fg)]", skipped: "[--c-roadmap-node-bg:var(--c-roadmap-skipped-bg)] [--c-roadmap-node-fg:var(--c-roadmap-skipped-fg)]", locked: "opacity-60" }
+  }
+});
+function RoadmapNodeView({ node, state, badge, testIdPrefix, onNodeClick, onAction }) {
+  const locked = state === "locked";
+  const nodeTone = resolveNodeTone(node);
+  const label = /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { "data-testid": `${testIdPrefix}-node-label`, className: `[overflow-wrap:anywhere] ${state === "done" ? "line-through" : state === "learning" ? "underline" : ""}`, children: node.label });
+  const interactiveClass = `block w-full min-w-0 text-inherit ${focusClass}`;
+  const wholeBox = !locked && !node.action && !node.links?.length;
+  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, { 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 }),
+    node.links && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("ul", { className: "mt-2 list-none space-y-2 p-0", children: node.links.map((link, index) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("li", { children: locked ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { children: link.label }) : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("a", { href: link.href, className: `underline [overflow-wrap:anywhere] ${focusClass}`, onClick: (e) => e.stopPropagation(), children: link.label }) }, index)) }),
+    node.action && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { style: toneStyle(node.action.tone ?? "primary"), className: "mt-3 min-w-0", children: node.action.href && !locked ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("a", { href: node.action.href, className: `inline-block rounded px-2 py-2 bg-[var(--c-roadmap-node-bg)] text-[var(--c-roadmap-node-fg)] [overflow-wrap:anywhere] ${focusClass}`, children: node.action.label }) : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("button", { type: "button", disabled: locked, className: `max-w-full rounded px-2 py-2 bg-[var(--c-roadmap-node-bg)] text-[var(--c-roadmap-node-fg)] [overflow-wrap:anywhere] ${focusClass}`, onClick: (e) => {
+      e.stopPropagation();
+      if (node.action?.actionId) onAction?.(node.action.actionId, node);
+    }, children: node.action.label }) })
+  ] }) });
+}
+
+// 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: { 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", { 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 })
+      ]
+    },
+    run.start
+  )) });
+}
+
+// src/components/organisms/roadmap/RoadmapEdgeLayer.tsx
 var import_react7 = require("react");
+var import_jsx_runtime68 = require("react/jsx-runtime");
+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_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_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-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_runtime69.jsx)("div", { className: "mt-6", children: legend })
+  ] });
+}
+
+// src/hooks/use-iframe-auth.ts
+var import_react9 = require("react");
 function useIframeAuth() {
-  const ctx = (0, import_react7.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_react8 = require("react");
+var import_react10 = require("react");
 function useIframeNavigate() {
-  return (0, import_react8.useCallback)((path) => {
+  return (0, import_react10.useCallback)((path) => {
     if (!window.parent || window.parent === window) return;
     window.parent.postMessage(
       { type: "DFL_NAVIGATE", path },
@@ -9124,9 +9394,9 @@ function useIframeNavigate() {
 }
 
 // src/providers/feature-flag-provider.tsx
-var import_react9 = require("react");
-var import_jsx_runtime65 = require("react/jsx-runtime");
-var FeatureFlagContext = (0, import_react9.createContext)({
+var import_react11 = require("react");
+var import_jsx_runtime70 = require("react/jsx-runtime");
+var FeatureFlagContext = (0, import_react11.createContext)({
   flags: {},
   isEnabled: () => false
 });
@@ -9134,21 +9404,21 @@ var FeatureFlagProvider = ({
   children,
   flags
 }) => {
-  const value = (0, import_react9.useMemo)(
+  const value = (0, import_react11.useMemo)(
     () => ({
       flags,
       isEnabled: (flag) => Boolean(flags[flag])
     }),
     [flags]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(FeatureFlagContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(FeatureFlagContext.Provider, { value, children });
 };
 var useFeatureFlag = (flag) => {
-  const { isEnabled } = (0, import_react9.useContext)(FeatureFlagContext);
+  const { isEnabled } = (0, import_react11.useContext)(FeatureFlagContext);
   return isEnabled(flag);
 };
 var useFeatureFlags = () => {
-  const { flags } = (0, import_react9.useContext)(FeatureFlagContext);
+  const { flags } = (0, import_react11.useContext)(FeatureFlagContext);
   return flags;
 };
 // Annotate the CommonJS export names for ESM import in node:
@@ -9367,6 +9637,7 @@ var useFeatureFlags = () => {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
+  Roadmap,
   ScrollArea,
   ScrollBar,
   Select,

package/dist/index.d.cts

@@ -2219,7 +2219,7 @@ declare function PublishDrawer({ open, onOpenChange, supabase, videoUrl, transcr
  *
  * Colour is a TOKEN, never a hex (plan ADR-6). `tone` is one of eight names and
  * the schema REJECTS any other string, `"#fdff00"` included. That closed
- * vocabulary is what keeps the dark design system, the editorial surface and a
+ * vocabulary is what keeps the dark design system and a
  * downstream `--s-*` rebrand all working from one document.
  *
  * The live progress state does NOT live in the document (plan ADR-8). A document
@@ -3262,4 +3262,18 @@ declare function placeNodes(doc: Pick<RoadmapDocument, "nodes">): {
  */
 declare function firstFreeRow(taken: ReadonlySet<string>, columns: readonly RoadmapColumn[], from: number): number;
 
-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, 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 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 };
+interface RoadmapProps {
+    document: RoadmapDocument;
+    state?: RoadmapStateOverlay;
+    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, 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

@@ -2219,7 +2219,7 @@ declare function PublishDrawer({ open, onOpenChange, supabase, videoUrl, transcr
  *
  * Colour is a TOKEN, never a hex (plan ADR-6). `tone` is one of eight names and
  * the schema REJECTS any other string, `"#fdff00"` included. That closed
- * vocabulary is what keeps the dark design system, the editorial surface and a
+ * vocabulary is what keeps the dark design system and a
  * downstream `--s-*` rebrand all working from one document.
  *
  * The live progress state does NOT live in the document (plan ADR-8). A document
@@ -3262,4 +3262,18 @@ declare function placeNodes(doc: Pick<RoadmapDocument, "nodes">): {
  */
 declare function firstFreeRow(taken: ReadonlySet<string>, columns: readonly RoadmapColumn[], from: number): number;
 
-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, 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 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 };
+interface RoadmapProps {
+    document: RoadmapDocument;
+    state?: RoadmapStateOverlay;
+    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, 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,6 +8715,275 @@ 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, useRef as useRef6 } from "react";
+
+// src/components/organisms/roadmap/RoadmapNode.tsx
+import { cva as cva14 } from "class-variance-authority";
+
+// src/components/organisms/roadmap/RoadmapLegend.tsx
+import { Check as Check4, Globe, Lock, Star, BookOpen, Play, Circle as Circle2, CircleHelp, Clock, Link as Link2, ExternalLink } from "lucide-react";
+
+// src/components/organisms/roadmap/appearance.ts
+function toneStyle(tone) {
+  return {
+    "--c-roadmap-node-bg": `var(--c-roadmap-${tone}-bg)`,
+    "--c-roadmap-node-fg": `var(--c-roadmap-${tone}-fg)`
+  };
+}
+var focusClass = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--c-roadmap-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--c-roadmap-surface)]";
+
+// src/components/organisms/roadmap/RoadmapLegend.tsx
+import { jsx as jsx65, jsxs as jsxs40 } from "react/jsx-runtime";
+var glyphs = { check: Check4, globe: Globe, lock: Lock, star: Star, "book-open": BookOpen, play: Play, circle: Circle2, clock: Clock, link: Link2, "external-link": ExternalLink };
+function RoadmapBadge({ name = "check", tone = "neutral", label, className = "" }) {
+  const Glyph = glyphs[name] ?? CircleHelp;
+  return /* @__PURE__ */ jsx65("span", { "aria-label": label, "aria-hidden": label ? void 0 : true, style: toneStyle(tone), className: `inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 border-[var(--c-roadmap-border)] bg-[var(--c-roadmap-node-bg)] text-[var(--c-roadmap-node-fg)] ${className}`, children: /* @__PURE__ */ jsx65(Glyph, { size: 12, "aria-hidden": "true" }) });
+}
+function RoadmapLegendView({ legend, testIdPrefix = "roadmap" }) {
+  return /* @__PURE__ */ jsx65("aside", { "data-testid": `${testIdPrefix}-legend`, "aria-label": "Legend", className: "min-w-0 rounded-[var(--radius)] border-2 border-[var(--c-roadmap-border)] bg-[var(--c-roadmap-neutral-bg)] p-3 text-[var(--c-roadmap-neutral-fg)]", children: /* @__PURE__ */ jsx65("ul", { className: "m-0 flex list-none flex-wrap gap-3 p-0", children: legend.entries.map((entry) => /* @__PURE__ */ jsxs40("li", { className: "flex min-w-0 items-center gap-2 text-xs leading-normal", children: [
+    /* @__PURE__ */ jsx65(RoadmapBadge, { name: entry.icon, tone: entry.tone }),
+    /* @__PURE__ */ jsx65("span", { className: "[overflow-wrap:anywhere]", children: entry.label })
+  ] }, entry.id)) }) });
+}
+
+// src/components/organisms/roadmap/RoadmapNode.tsx
+import { jsx as jsx66, jsxs as jsxs41 } from "react/jsx-runtime";
+var nodeVariants = cva14("relative flex min-w-0 flex-col justify-center rounded-[var(--radius)] border-2 px-2 py-3 text-center text-xs leading-normal md:px-4 md:text-base text-[var(--c-roadmap-node-fg)]", {
+  variants: {
+    kind: { topic: "min-h-[49px] border-[var(--c-roadmap-border)] bg-[var(--c-roadmap-node-bg)]", subtopic: "min-h-[49px] border-[var(--c-roadmap-border)] bg-[var(--c-roadmap-node-bg)]", button: "min-h-[49px] border-[var(--c-roadmap-border)] bg-[var(--c-roadmap-node-bg)]", label: "border-transparent bg-transparent", title: "border-transparent bg-transparent font-semibold md:text-[28px]", paragraph: "text-left border-[var(--c-roadmap-border)] bg-[var(--c-roadmap-node-bg)]", legend: "border-[var(--c-roadmap-border)] bg-[var(--c-roadmap-node-bg)]" },
+    state: { todo: "", done: "[--c-roadmap-node-bg:var(--c-roadmap-done-bg)] [--c-roadmap-node-fg:var(--c-roadmap-done-fg)]", learning: "[--c-roadmap-node-bg:var(--c-roadmap-learning-bg)] [--c-roadmap-node-fg:var(--c-roadmap-learning-fg)]", skipped: "[--c-roadmap-node-bg:var(--c-roadmap-skipped-bg)] [--c-roadmap-node-fg:var(--c-roadmap-skipped-fg)]", locked: "opacity-60" }
+  }
+});
+function RoadmapNodeView({ node, state, badge, testIdPrefix, onNodeClick, onAction }) {
+  const locked = state === "locked";
+  const nodeTone = resolveNodeTone(node);
+  const label = /* @__PURE__ */ jsx66("span", { "data-testid": `${testIdPrefix}-node-label`, className: `[overflow-wrap:anywhere] ${state === "done" ? "line-through" : state === "learning" ? "underline" : ""}`, children: node.label });
+  const interactiveClass = `block w-full min-w-0 text-inherit ${focusClass}`;
+  const wholeBox = !locked && !node.action && !node.links?.length;
+  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, { 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 }),
+    node.links && /* @__PURE__ */ jsx66("ul", { className: "mt-2 list-none space-y-2 p-0", children: node.links.map((link, index) => /* @__PURE__ */ jsx66("li", { children: locked ? /* @__PURE__ */ jsx66("span", { children: link.label }) : /* @__PURE__ */ jsx66("a", { href: link.href, className: `underline [overflow-wrap:anywhere] ${focusClass}`, onClick: (e) => e.stopPropagation(), children: link.label }) }, index)) }),
+    node.action && /* @__PURE__ */ jsx66("div", { style: toneStyle(node.action.tone ?? "primary"), className: "mt-3 min-w-0", children: node.action.href && !locked ? /* @__PURE__ */ jsx66("a", { href: node.action.href, className: `inline-block rounded px-2 py-2 bg-[var(--c-roadmap-node-bg)] text-[var(--c-roadmap-node-fg)] [overflow-wrap:anywhere] ${focusClass}`, children: node.action.label }) : /* @__PURE__ */ jsx66("button", { type: "button", disabled: locked, className: `max-w-full rounded px-2 py-2 bg-[var(--c-roadmap-node-bg)] text-[var(--c-roadmap-node-fg)] [overflow-wrap:anywhere] ${focusClass}`, onClick: (e) => {
+      e.stopPropagation();
+      if (node.action?.actionId) onAction?.(node.action.actionId, node);
+    }, children: node.action.label }) })
+  ] }) });
+}
+
+// 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: { 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", { 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 })
+      ]
+    },
+    run.start
+  )) });
+}
+
+// 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 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__ */ 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__ */ 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-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__ */ jsx69("div", { className: "mt-6", children: legend })
+  ] });
+}
 
 // src/hooks/use-iframe-auth.ts
 import { useContext as useContext9 } from "react";
@@ -8739,9 +9008,9 @@ function useIframeNavigate() {
 import {
   createContext as createContext10,
   useContext as useContext10,
-  useMemo as useMemo5
+  useMemo as useMemo6
 } from "react";
-import { jsx as jsx65 } from "react/jsx-runtime";
+import { jsx as jsx70 } from "react/jsx-runtime";
 var FeatureFlagContext = createContext10({
   flags: {},
   isEnabled: () => false
@@ -8750,14 +9019,14 @@ var FeatureFlagProvider = ({
   children,
   flags
 }) => {
-  const value = useMemo5(
+  const value = useMemo6(
     () => ({
       flags,
       isEnabled: (flag) => Boolean(flags[flag])
     }),
     [flags]
   );
-  return /* @__PURE__ */ jsx65(FeatureFlagContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx70(FeatureFlagContext.Provider, { value, children });
 };
 var useFeatureFlag = (flag) => {
   const { isEnabled } = useContext10(FeatureFlagContext);
@@ -8982,6 +9251,7 @@ export {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
+  Roadmap,
   ScrollArea,
   ScrollBar,
   Select,

package/dist/styles/theme-mappings.css

@@ -19,6 +19,33 @@
  */
 
 @theme inline {
+  /* Origin: agent — Roadmap token mappings. */
+  --color-c-roadmap-surface: var(--c-roadmap-surface);
+  --color-c-roadmap-border: var(--c-roadmap-border);
+  --color-c-roadmap-focus: var(--c-roadmap-focus);
+  --color-c-roadmap-done-bg: var(--c-roadmap-done-bg);
+  --color-c-roadmap-done-fg: var(--c-roadmap-done-fg);
+  --color-c-roadmap-learning-bg: var(--c-roadmap-learning-bg);
+  --color-c-roadmap-learning-fg: var(--c-roadmap-learning-fg);
+  --color-c-roadmap-skipped-bg: var(--c-roadmap-skipped-bg);
+  --color-c-roadmap-skipped-fg: var(--c-roadmap-skipped-fg);
+  --color-c-roadmap-primary-bg: var(--c-roadmap-primary-bg);
+  --color-c-roadmap-primary-fg: var(--c-roadmap-primary-fg);
+  --color-c-roadmap-secondary-bg: var(--c-roadmap-secondary-bg);
+  --color-c-roadmap-secondary-fg: var(--c-roadmap-secondary-fg);
+  --color-c-roadmap-accent-bg: var(--c-roadmap-accent-bg);
+  --color-c-roadmap-accent-fg: var(--c-roadmap-accent-fg);
+  --color-c-roadmap-muted-bg: var(--c-roadmap-muted-bg);
+  --color-c-roadmap-muted-fg: var(--c-roadmap-muted-fg);
+  --color-c-roadmap-neutral-bg: var(--c-roadmap-neutral-bg);
+  --color-c-roadmap-neutral-fg: var(--c-roadmap-neutral-fg);
+  --color-c-roadmap-success-bg: var(--c-roadmap-success-bg);
+  --color-c-roadmap-success-fg: var(--c-roadmap-success-fg);
+  --color-c-roadmap-info-bg: var(--c-roadmap-info-bg);
+  --color-c-roadmap-info-fg: var(--c-roadmap-info-fg);
+  --color-c-roadmap-danger-bg: var(--c-roadmap-danger-bg);
+  --color-c-roadmap-danger-fg: var(--c-roadmap-danger-fg);
+
   /* ─── Colours ──────────────────────────────────────────────────────────── */
   --color-background: var(--background);
   --color-foreground: var(--foreground);

package/dist/styles/tokens.css

@@ -1706,3 +1706,45 @@
   box-shadow: var(--c-appshell-focus-ring);
   transition: none;
 }
+
+/* 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);
+  --c-roadmap-done-bg: var(--s-surface-raised);
+  --c-roadmap-done-fg: var(--s-ink-secondary);
+  --c-roadmap-learning-bg: var(--s-info-subtle);
+  --c-roadmap-learning-fg: var(--s-info-fg);
+  --c-roadmap-skipped-bg: var(--s-surface-elevated);
+  --c-roadmap-skipped-fg: var(--s-ink-muted);
+  --c-roadmap-primary-bg: var(--s-brand-solid);
+  --c-roadmap-primary-fg: var(--s-ink-inverse);
+  --c-roadmap-secondary-bg: var(--s-brand-subtle);
+  --c-roadmap-secondary-fg: var(--s-ink-primary);
+  --c-roadmap-accent-bg: var(--s-ink-primary);
+  --c-roadmap-accent-fg: var(--s-ink-inverse);
+  --c-roadmap-muted-bg: var(--s-surface-raised);
+  --c-roadmap-muted-fg: var(--s-ink-muted);
+  --c-roadmap-neutral-bg: var(--s-surface-panel);
+  --c-roadmap-neutral-fg: var(--s-ink-primary);
+  --c-roadmap-success-bg: var(--s-success-subtle);
+  --c-roadmap-success-fg: var(--s-success-fg);
+  --c-roadmap-info-bg: var(--s-info-subtle);
+  --c-roadmap-info-fg: var(--s-info-fg);
+  --c-roadmap-danger-bg: var(--s-danger-subtle);
+  --c-roadmap-danger-fg: var(--s-danger-fg);
+}

package/package.json

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