@devfellowship/components 3.2.4 → 3.4.0

package/dist/index.js

@@ -8305,6 +8305,529 @@ function PublishDrawer({
   ) });
 }
 
+// src/components/organisms/roadmap/contract.ts
+import { z } from "zod";
+var ROADMAP_COLUMNS = ["left", "center", "right"];
+var ROADMAP_TONES = [
+  "primary",
+  "secondary",
+  "accent",
+  "muted",
+  "success",
+  "info",
+  "danger",
+  "neutral"
+];
+var ROADMAP_NODE_KINDS = [
+  "topic",
+  "subtopic",
+  "label",
+  "title",
+  "paragraph",
+  "button",
+  "legend"
+];
+var ROADMAP_NODE_STATES = ["todo", "done", "learning", "skipped", "locked"];
+var ROADMAP_EDGE_STYLES = ["solid", "dashed", "dotted"];
+var ROADMAP_EDGE_ROUTES = ["auto", "straight", "elbow", "curve"];
+var ROADMAP_ARROWS = ["none", "end", "both"];
+var ROADMAP_LEGEND_PLACEMENTS = ["top", "bottom", "inline"];
+var DEFAULT_NODE_SPAN = 1;
+var DEFAULT_EDGE_STYLE = "dashed";
+var DEFAULT_EDGE_ROUTE = "auto";
+var DEFAULT_EDGE_ARROW = "none";
+var DEFAULT_GROUP_TONE = "neutral";
+var DEFAULT_LEGEND_PLACEMENT = "top";
+var DEFAULT_NODE_STATE = "todo";
+var NODE_KIND_DEFAULT_TONE = {
+  topic: "primary",
+  subtopic: "secondary",
+  button: "primary",
+  label: "neutral",
+  title: "neutral",
+  paragraph: "neutral",
+  legend: "neutral"
+};
+var resolveNodeSpan = (node) => node.span ?? DEFAULT_NODE_SPAN;
+var resolveNodeTone = (node) => node.tone ?? NODE_KIND_DEFAULT_TONE[node.kind];
+var resolveEdgeStyle = (edge) => edge.style ?? DEFAULT_EDGE_STYLE;
+var resolveEdgeRoute = (edge) => edge.route ?? DEFAULT_EDGE_ROUTE;
+var resolveEdgeArrow = (edge) => edge.arrow ?? DEFAULT_EDGE_ARROW;
+var resolveGroupTone = (group) => group.tone ?? DEFAULT_GROUP_TONE;
+var resolveGroupColumns = (group) => group.columns && group.columns.length > 0 ? group.columns : [...ROADMAP_COLUMNS];
+var resolveLegendPlacement = (legend) => legend.placement ?? DEFAULT_LEGEND_PLACEMENT;
+var resolveNodeState = (node, overlay) => overlay?.nodes[node.id] ?? node.state ?? DEFAULT_NODE_STATE;
+var ROADMAP_NODE_ID_PATTERN = /^[A-Za-z0-9_-]{1,64}$/;
+var ROADMAP_EDGE_LABEL_MAX = 40;
+var ROADMAP_LABEL_MAX = 200;
+var columnSchema = z.enum(ROADMAP_COLUMNS);
+var toneSchema = z.enum(ROADMAP_TONES);
+var idSchema = z.string().regex(ROADMAP_NODE_ID_PATTERN, "must match /^[A-Za-z0-9_-]{1,64}$/");
+var metaSchema = z.record(z.unknown());
+var roadmapIconSchema = z.object({
+  name: z.string().min(1).max(64),
+  side: z.enum(["left", "right"]),
+  tone: toneSchema.optional()
+}).strict();
+var roadmapActionSchema = z.object({
+  label: z.string().min(1).max(80),
+  href: z.string().min(1).optional(),
+  actionId: z.string().min(1).optional(),
+  tone: toneSchema.optional()
+}).strict().superRefine((action, ctx) => {
+  const given = [action.href, action.actionId].filter((v) => v !== void 0).length;
+  if (given !== 1) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      path: ["href"],
+      message: "an action needs exactly one of `href` or `actionId`"
+    });
+  }
+});
+var roadmapLinkSchema = z.object({ label: z.string().min(1).max(120), href: z.string().min(1) }).strict();
+var roadmapNodeStateSchema = z.enum(ROADMAP_NODE_STATES);
+var roadmapNodeSchema = z.object({
+  id: idSchema,
+  column: columnSchema,
+  order: z.number().int().min(0),
+  span: z.union([z.literal(1), z.literal(2), z.literal(3)]).optional(),
+  kind: z.enum(ROADMAP_NODE_KINDS),
+  label: z.string().min(1).max(ROADMAP_LABEL_MAX),
+  description: z.string().max(2e3).optional(),
+  tone: toneSchema.optional(),
+  icon: roadmapIconSchema.optional(),
+  badge: z.string().min(1).optional(),
+  state: roadmapNodeStateSchema.optional(),
+  action: roadmapActionSchema.optional(),
+  href: z.string().min(1).optional(),
+  links: z.array(roadmapLinkSchema).optional(),
+  meta: metaSchema.optional()
+}).strict();
+var roadmapEdgeSchema = z.object({
+  id: idSchema,
+  source: z.string().min(1),
+  target: z.string().min(1),
+  style: z.enum(ROADMAP_EDGE_STYLES).optional(),
+  label: z.string().min(1).max(ROADMAP_EDGE_LABEL_MAX).optional(),
+  route: z.enum(ROADMAP_EDGE_ROUTES).optional(),
+  arrow: z.enum(ROADMAP_ARROWS).optional(),
+  tone: toneSchema.optional()
+}).strict();
+var roadmapGroupSchema = z.object({
+  id: idSchema,
+  title: z.string().min(1).max(ROADMAP_LABEL_MAX).optional(),
+  tone: toneSchema.optional(),
+  from: z.number().int().min(0),
+  to: z.number().int().min(0),
+  columns: z.array(columnSchema).min(1).max(3).optional(),
+  description: z.string().max(2e3).optional()
+}).strict();
+var roadmapLegendEntrySchema = z.object({
+  id: idSchema,
+  label: z.string().min(1).max(ROADMAP_LABEL_MAX),
+  tone: toneSchema,
+  icon: z.string().min(1).max(64).optional()
+}).strict();
+var roadmapLegendSchema = z.object({
+  entries: z.array(roadmapLegendEntrySchema).min(1),
+  placement: z.enum(ROADMAP_LEGEND_PLACEMENTS).optional()
+}).strict();
+function columnsCovered(node) {
+  const span = node.span ?? DEFAULT_NODE_SPAN;
+  if (span === 3) return [...ROADMAP_COLUMNS];
+  const start = ROADMAP_COLUMNS.indexOf(node.column);
+  return ROADMAP_COLUMNS.slice(start, start + span);
+}
+var roadmapDocumentBaseSchema = z.object({
+  version: z.literal("roadmap/v1"),
+  title: z.string().min(1).max(ROADMAP_LABEL_MAX).optional(),
+  direction: z.literal("down"),
+  columns: z.literal(3),
+  nodes: z.array(roadmapNodeSchema),
+  edges: z.array(roadmapEdgeSchema),
+  groups: z.array(roadmapGroupSchema),
+  legend: roadmapLegendSchema.optional(),
+  meta: metaSchema.optional()
+}).strict();
+var roadmapDocumentSchema = roadmapDocumentBaseSchema.superRefine((doc, ctx) => {
+  const nodeIndexById = /* @__PURE__ */ new Map();
+  doc.nodes.forEach((node, i) => {
+    if (nodeIndexById.has(node.id)) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["nodes", i, "id"],
+        message: `duplicate node id "${node.id}" (first seen at nodes[${nodeIndexById.get(node.id)}])`
+      });
+      return;
+    }
+    nodeIndexById.set(node.id, i);
+  });
+  const cellOwner = /* @__PURE__ */ new Map();
+  doc.nodes.forEach((node, i) => {
+    const span = node.span ?? DEFAULT_NODE_SPAN;
+    if (span === 2 && node.column === "right") {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["nodes", i, "span"],
+        message: 'a `span: 2` node at column "right" runs past the last track'
+      });
+      return;
+    }
+    for (const column of columnsCovered(node)) {
+      const key = `${column}:${node.order}`;
+      const owner = cellOwner.get(key);
+      if (owner !== void 0) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ["nodes", i, "order"],
+          message: `cell (${column}, ${node.order}) is already taken by nodes[${owner}] ("${doc.nodes[owner].id}")`
+        });
+        continue;
+      }
+      cellOwner.set(key, i);
+    }
+  });
+  const edgeIds = /* @__PURE__ */ new Set();
+  doc.edges.forEach((edge, i) => {
+    if (edgeIds.has(edge.id)) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["edges", i, "id"],
+        message: `duplicate edge id "${edge.id}"`
+      });
+    }
+    edgeIds.add(edge.id);
+    if (!nodeIndexById.has(edge.source)) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["edges", i, "source"],
+        message: `edge source "${edge.source}" is not a node in this document`
+      });
+    }
+    if (!nodeIndexById.has(edge.target)) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["edges", i, "target"],
+        message: `edge target "${edge.target}" is not a node in this document`
+      });
+    }
+    if (edge.source === edge.target) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["edges", i, "target"],
+        message: `edge "${edge.id}" is a self-loop`
+      });
+    }
+  });
+  const groupIds = /* @__PURE__ */ new Set();
+  doc.groups.forEach((group, i) => {
+    if (groupIds.has(group.id)) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["groups", i, "id"],
+        message: `duplicate group id "${group.id}"`
+      });
+    }
+    groupIds.add(group.id);
+    if (group.from > group.to) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["groups", i, "to"],
+        message: `group "${group.id}" has from (${group.from}) greater than to (${group.to})`
+      });
+    }
+  });
+  for (let i = 0; i < doc.groups.length; i += 1) {
+    const a = doc.groups[i];
+    if (a.from > a.to) continue;
+    const aColumns = new Set(resolveGroupColumns(a));
+    for (let j = i + 1; j < doc.groups.length; j += 1) {
+      const b = doc.groups[j];
+      if (b.from > b.to) continue;
+      const rowsOverlap = a.from <= b.to && b.from <= a.to;
+      if (!rowsOverlap) continue;
+      const shared = resolveGroupColumns(b).filter((c) => aColumns.has(c));
+      if (shared.length === 0) continue;
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["groups", j, "from"],
+        message: `group "${b.id}" overlaps rows ${a.from}..${a.to} of group "${a.id}" on column(s) ${shared.join(", ")}`
+      });
+    }
+  }
+  const legendIds = /* @__PURE__ */ new Set();
+  doc.legend?.entries.forEach((entry, i) => {
+    if (legendIds.has(entry.id)) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["legend", "entries", i, "id"],
+        message: `duplicate legend entry id "${entry.id}"`
+      });
+    }
+    legendIds.add(entry.id);
+  });
+  doc.nodes.forEach((node, i) => {
+    if (node.badge === void 0) return;
+    if (!legendIds.has(node.badge)) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["nodes", i, "badge"],
+        message: `badge "${node.badge}" is not a legend entry of this document`
+      });
+    }
+  });
+});
+var roadmapStateOverlaySchema = z.object({
+  version: z.literal("roadmap-state/v1"),
+  nodes: z.record(roadmapNodeStateSchema)
+}).strict();
+var roadmapStateSchema = roadmapStateOverlaySchema;
+function parseRoadmapDocument(input) {
+  return roadmapDocumentSchema.parse(input);
+}
+function safeParseRoadmapDocument(input) {
+  return roadmapDocumentSchema.safeParse(input);
+}
+function parseRoadmapStateOverlay(input) {
+  return roadmapStateOverlaySchema.parse(input);
+}
+function safeParseRoadmapStateOverlay(input) {
+  return roadmapStateOverlaySchema.safeParse(input);
+}
+
+// src/components/organisms/roadmap/layout.ts
+function columnIndex(column) {
+  return ROADMAP_COLUMNS.indexOf(column);
+}
+function gridColumnFor(node) {
+  const span = resolveNodeSpan(node);
+  if (span === 3) return { start: 1, span: 3 };
+  return { start: columnIndex(node.column) + 1, span };
+}
+function rowsOf(doc) {
+  const rows = /* @__PURE__ */ new Set();
+  for (const node of doc.nodes) rows.add(node.order);
+  return [...rows].sort((a, b) => a - b);
+}
+function maxRowOf(doc) {
+  return doc.nodes.reduce((max, node) => Math.max(max, node.order), -1);
+}
+function nodesByRow(doc) {
+  const byRow = /* @__PURE__ */ new Map();
+  for (const node of doc.nodes) {
+    const bucket = byRow.get(node.order);
+    if (bucket) bucket.push(node);
+    else byRow.set(node.order, [node]);
+  }
+  for (const bucket of byRow.values()) {
+    bucket.sort((a, b) => {
+      const byColumn = columnIndex(a.column) - columnIndex(b.column);
+      return byColumn !== 0 ? byColumn : a.id.localeCompare(b.id);
+    });
+  }
+  return byRow;
+}
+function columnsUsed(doc) {
+  const used = /* @__PURE__ */ new Set();
+  for (const node of doc.nodes) for (const column of columnsCovered(node)) used.add(column);
+  return ROADMAP_COLUMNS.filter((column) => used.has(column));
+}
+function groupRanges(doc) {
+  return doc.groups.map((group) => {
+    const columns = resolveGroupColumns(group);
+    const indices = columns.map(columnIndex).sort((a, b) => a - b);
+    const start = indices[0];
+    const end = indices[indices.length - 1];
+    return {
+      id: group.id,
+      from: group.from,
+      to: group.to,
+      columns: ROADMAP_COLUMNS.filter((c) => columns.includes(c)),
+      row: { start: group.from + 1, span: group.to - group.from + 1 },
+      column: { start: start + 1, span: end - start + 1 },
+      fragmented: end - start + 1 !== indices.length
+    };
+  });
+}
+function groupColumnRuns(group) {
+  const indices = resolveGroupColumns(group).map(columnIndex).sort((a, b) => a - b);
+  const runs = [];
+  for (const index of indices) {
+    const last = runs[runs.length - 1];
+    if (last && last.start + last.span === index + 1) last.span += 1;
+    else runs.push({ start: index + 1, span: 1 });
+  }
+  return runs;
+}
+function validateNoOverlap(doc) {
+  const overlaps = [];
+  const nodeCell = /* @__PURE__ */ new Map();
+  for (const node of doc.nodes) {
+    for (const column of columnsCovered(node)) {
+      const key = `${column}:${node.order}`;
+      const owner = nodeCell.get(key);
+      if (owner !== void 0) {
+        overlaps.push({ kind: "node", column, row: node.order, ids: [owner, node.id] });
+        continue;
+      }
+      nodeCell.set(key, node.id);
+    }
+  }
+  const groupCell = /* @__PURE__ */ new Map();
+  for (const group of doc.groups) {
+    if (group.from > group.to) continue;
+    for (const column of resolveGroupColumns(group)) {
+      for (let row = group.from; row <= group.to; row += 1) {
+        const key = `${column}:${row}`;
+        const owner = groupCell.get(key);
+        if (owner !== void 0) {
+          if (owner !== group.id) {
+            overlaps.push({ kind: "group", column, row, ids: [owner, group.id] });
+          }
+          continue;
+        }
+        groupCell.set(key, group.id);
+      }
+    }
+  }
+  return overlaps;
+}
+function placeNodes(doc) {
+  const byRow = nodesByRow(doc);
+  const rows = rowsOf(doc);
+  const placements = [];
+  for (const row of rows) {
+    for (const node of byRow.get(row) ?? []) {
+      placements.push({
+        node,
+        row: { start: node.order + 1, span: 1 },
+        column: gridColumnFor(node)
+      });
+    }
+  }
+  return { placements, rows, rowCount: maxRowOf(doc) + 1 };
+}
+function firstFreeRow(taken, columns, from) {
+  let row = from;
+  for (let guard = 0; guard < 1e5; guard += 1) {
+    if (columns.every((column) => !taken.has(`${column}:${row}`))) return row;
+    row += 1;
+  }
+  return row;
+}
+
+// src/components/organisms/roadmap/Roadmap.tsx
+import { useMemo as useMemo5 } 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, { "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 }) {
+  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}` },
+      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.description && /* @__PURE__ */ jsx67("span", { className: "sr-only", children: group.description })
+      ]
+    },
+    run.start
+  )) });
+}
+
+// src/components/organisms/roadmap/Roadmap.tsx
+import { jsx as jsx68, jsxs as jsxs43 } from "react/jsx-runtime";
+function Roadmap({ document: document2, state, renderNode, onNodeClick, onAction, testIdPrefix = "roadmap", className = "", ariaLabel }) {
+  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)),
+      placements.map(({ node, row, column }) => {
+        const resolvedState = resolveNodeState(node, state);
+        return /* @__PURE__ */ jsx68(
+          "div",
+          {
+            role: "listitem",
+            "data-testid": `${testIdPrefix}-node`,
+            "data-node-id": 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 })
+          },
+          node.id
+        );
+      })
+    ] }),
+    legendPlacement === "bottom" && /* @__PURE__ */ jsx68("div", { className: "mt-6", children: legend })
+  ] });
+}
+
 // src/hooks/use-iframe-auth.ts
 import { useContext as useContext9 } from "react";
 function useIframeAuth() {
@@ -8328,9 +8851,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 jsx69 } from "react/jsx-runtime";
 var FeatureFlagContext = createContext10({
   flags: {},
   isEnabled: () => false
@@ -8339,14 +8862,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__ */ jsx69(FeatureFlagContext.Provider, { value, children });
 };
 var useFeatureFlag = (flag) => {
   const { isEnabled } = useContext10(FeatureFlagContext);
@@ -8445,7 +8968,14 @@ export {
   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,
   DflRemote,
   Dialog,
   DialogClose,
@@ -8523,6 +9053,7 @@ export {
   MenubarSubContent,
   MenubarSubTrigger,
   MenubarTrigger,
+  NODE_KIND_DEFAULT_TONE,
   NavigationMenu,
   NavigationMenuContent,
   NavigationMenuIndicator,
@@ -8546,12 +9077,24 @@ export {
   Progress,
   ProtectedRoute,
   PublishDrawer,
+  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,
   RadioGroup4 as RadioGroup,
   RadioGroupItem,
   RadioGroupRow,
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
+  Roadmap,
   ScrollArea,
   ScrollBar,
   Select,
@@ -8639,19 +9182,55 @@ export {
   buttonVariants,
   clampPct,
   cn,
+  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,
   toast,
   toggleVariants,
@@ -8665,5 +9244,6 @@ export {
   useSession,
   useSidebar,
   useToast,
+  validateNoOverlap,
   validatePublishForm
 };