@devfellowship/components 3.2.4 → 3.4.0

package/dist/index.cjs

@@ -118,7 +118,14 @@ __export(src_exports, {
   ContextMenuSubContent: () => ContextMenuSubContent,
   ContextMenuSubTrigger: () => ContextMenuSubTrigger,
   ContextMenuTrigger: () => ContextMenuTrigger,
+  DEFAULT_EDGE_ARROW: () => DEFAULT_EDGE_ARROW,
+  DEFAULT_EDGE_ROUTE: () => DEFAULT_EDGE_ROUTE,
+  DEFAULT_EDGE_STYLE: () => DEFAULT_EDGE_STYLE,
+  DEFAULT_GROUP_TONE: () => DEFAULT_GROUP_TONE,
+  DEFAULT_LEGEND_PLACEMENT: () => DEFAULT_LEGEND_PLACEMENT,
   DEFAULT_NAME_COL_WIDTH: () => DEFAULT_NAME_COL_WIDTH,
+  DEFAULT_NODE_SPAN: () => DEFAULT_NODE_SPAN,
+  DEFAULT_NODE_STATE: () => DEFAULT_NODE_STATE,
   DflRemote: () => DflRemote,
   Dialog: () => Dialog,
   DialogClose: () => DialogClose,
@@ -196,6 +203,7 @@ __export(src_exports, {
   MenubarSubContent: () => MenubarSubContent,
   MenubarSubTrigger: () => MenubarSubTrigger,
   MenubarTrigger: () => MenubarTrigger,
+  NODE_KIND_DEFAULT_TONE: () => NODE_KIND_DEFAULT_TONE,
   NavigationMenu: () => NavigationMenu,
   NavigationMenuContent: () => NavigationMenuContent,
   NavigationMenuIndicator: () => NavigationMenuIndicator,
@@ -219,12 +227,24 @@ __export(src_exports, {
   Progress: () => Progress,
   ProtectedRoute: () => ProtectedRoute,
   PublishDrawer: () => PublishDrawer,
+  ROADMAP_ARROWS: () => ROADMAP_ARROWS,
+  ROADMAP_COLUMNS: () => ROADMAP_COLUMNS,
+  ROADMAP_EDGE_LABEL_MAX: () => ROADMAP_EDGE_LABEL_MAX,
+  ROADMAP_EDGE_ROUTES: () => ROADMAP_EDGE_ROUTES,
+  ROADMAP_EDGE_STYLES: () => ROADMAP_EDGE_STYLES,
+  ROADMAP_LABEL_MAX: () => ROADMAP_LABEL_MAX,
+  ROADMAP_LEGEND_PLACEMENTS: () => ROADMAP_LEGEND_PLACEMENTS,
+  ROADMAP_NODE_ID_PATTERN: () => ROADMAP_NODE_ID_PATTERN,
+  ROADMAP_NODE_KINDS: () => ROADMAP_NODE_KINDS,
+  ROADMAP_NODE_STATES: () => ROADMAP_NODE_STATES,
+  ROADMAP_TONES: () => ROADMAP_TONES,
   RadioGroup: () => RadioGroup4,
   RadioGroupItem: () => RadioGroupItem,
   RadioGroupRow: () => RadioGroupRow,
   ResizableHandle: () => ResizableHandle,
   ResizablePanel: () => ResizablePanel,
   ResizablePanelGroup: () => ResizablePanelGroup,
+  Roadmap: () => Roadmap,
   ScrollArea: () => ScrollArea,
   ScrollBar: () => ScrollBar,
   Select: () => Select,
@@ -312,19 +332,55 @@ __export(src_exports, {
   buttonVariants: () => buttonVariants,
   clampPct: () => clampPct,
   cn: () => cn,
+  columnIndex: () => columnIndex,
+  columnsCovered: () => columnsCovered,
+  columnsUsed: () => columnsUsed,
   filterPublishableAccounts: () => filterPublishableAccounts,
+  firstFreeRow: () => firstFreeRow,
   getInitials: () => getInitials,
+  gridColumnFor: () => gridColumnFor,
+  groupColumnRuns: () => groupColumnRuns,
+  groupRanges: () => groupRanges,
   iconButtonVariants: () => iconButtonVariants,
   isAllowedOrigin: () => isAllowedOrigin,
   kbdVariants: () => kbdVariants,
   labelVariants: () => labelVariants,
+  maxRowOf: () => maxRowOf,
   memberHueIndex: () => memberHueIndex,
   memberHueVar: () => memberHueVar,
   navigationMenuTriggerStyle: () => navigationMenuTriggerStyle,
+  nodesByRow: () => nodesByRow,
+  parseRoadmapDocument: () => parseRoadmapDocument,
+  parseRoadmapStateOverlay: () => parseRoadmapStateOverlay,
   parseTags: () => parseTags,
+  placeNodes: () => placeNodes,
+  resolveEdgeArrow: () => resolveEdgeArrow,
+  resolveEdgeRoute: () => resolveEdgeRoute,
+  resolveEdgeStyle: () => resolveEdgeStyle,
+  resolveGroupColumns: () => resolveGroupColumns,
+  resolveGroupTone: () => resolveGroupTone,
+  resolveLegendPlacement: () => resolveLegendPlacement,
   resolveNameColWidth: () => resolveNameColWidth,
+  resolveNodeSpan: () => resolveNodeSpan,
+  resolveNodeState: () => resolveNodeState,
+  resolveNodeTone: () => resolveNodeTone,
   resolveWeekCount: () => resolveWeekCount,
   resolveWeekLabels: () => resolveWeekLabels,
+  roadmapActionSchema: () => roadmapActionSchema,
+  roadmapDocumentSchema: () => roadmapDocumentSchema,
+  roadmapEdgeSchema: () => roadmapEdgeSchema,
+  roadmapGroupSchema: () => roadmapGroupSchema,
+  roadmapIconSchema: () => roadmapIconSchema,
+  roadmapLegendEntrySchema: () => roadmapLegendEntrySchema,
+  roadmapLegendSchema: () => roadmapLegendSchema,
+  roadmapLinkSchema: () => roadmapLinkSchema,
+  roadmapNodeSchema: () => roadmapNodeSchema,
+  roadmapNodeStateSchema: () => roadmapNodeStateSchema,
+  roadmapStateOverlaySchema: () => roadmapStateOverlaySchema,
+  roadmapStateSchema: () => roadmapStateSchema,
+  rowsOf: () => rowsOf,
+  safeParseRoadmapDocument: () => safeParseRoadmapDocument,
+  safeParseRoadmapStateOverlay: () => safeParseRoadmapStateOverlay,
   stageProgress: () => stageProgress,
   toast: () => toast,
   toggleVariants: () => toggleVariants,
@@ -338,6 +394,7 @@ __export(src_exports, {
   useSession: () => useSession,
   useSidebar: () => useSidebar,
   useToast: () => useToast,
+  validateNoOverlap: () => validateNoOverlap,
   validatePublishForm: () => validatePublishForm
 });
 module.exports = __toCommonJS(src_exports);
@@ -8637,17 +8694,540 @@ function PublishDrawer({
   ) });
 }
 
-// src/hooks/use-iframe-auth.ts
+// src/components/organisms/roadmap/contract.ts
+var import_zod = require("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 = import_zod.z.enum(ROADMAP_COLUMNS);
+var toneSchema = import_zod.z.enum(ROADMAP_TONES);
+var idSchema = import_zod.z.string().regex(ROADMAP_NODE_ID_PATTERN, "must match /^[A-Za-z0-9_-]{1,64}$/");
+var metaSchema = import_zod.z.record(import_zod.z.unknown());
+var roadmapIconSchema = import_zod.z.object({
+  name: import_zod.z.string().min(1).max(64),
+  side: import_zod.z.enum(["left", "right"]),
+  tone: toneSchema.optional()
+}).strict();
+var roadmapActionSchema = import_zod.z.object({
+  label: import_zod.z.string().min(1).max(80),
+  href: import_zod.z.string().min(1).optional(),
+  actionId: import_zod.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: import_zod.z.ZodIssueCode.custom,
+      path: ["href"],
+      message: "an action needs exactly one of `href` or `actionId`"
+    });
+  }
+});
+var roadmapLinkSchema = import_zod.z.object({ label: import_zod.z.string().min(1).max(120), href: import_zod.z.string().min(1) }).strict();
+var roadmapNodeStateSchema = import_zod.z.enum(ROADMAP_NODE_STATES);
+var roadmapNodeSchema = import_zod.z.object({
+  id: idSchema,
+  column: columnSchema,
+  order: import_zod.z.number().int().min(0),
+  span: import_zod.z.union([import_zod.z.literal(1), import_zod.z.literal(2), import_zod.z.literal(3)]).optional(),
+  kind: import_zod.z.enum(ROADMAP_NODE_KINDS),
+  label: import_zod.z.string().min(1).max(ROADMAP_LABEL_MAX),
+  description: import_zod.z.string().max(2e3).optional(),
+  tone: toneSchema.optional(),
+  icon: roadmapIconSchema.optional(),
+  badge: import_zod.z.string().min(1).optional(),
+  state: roadmapNodeStateSchema.optional(),
+  action: roadmapActionSchema.optional(),
+  href: import_zod.z.string().min(1).optional(),
+  links: import_zod.z.array(roadmapLinkSchema).optional(),
+  meta: metaSchema.optional()
+}).strict();
+var roadmapEdgeSchema = import_zod.z.object({
+  id: idSchema,
+  source: import_zod.z.string().min(1),
+  target: import_zod.z.string().min(1),
+  style: import_zod.z.enum(ROADMAP_EDGE_STYLES).optional(),
+  label: import_zod.z.string().min(1).max(ROADMAP_EDGE_LABEL_MAX).optional(),
+  route: import_zod.z.enum(ROADMAP_EDGE_ROUTES).optional(),
+  arrow: import_zod.z.enum(ROADMAP_ARROWS).optional(),
+  tone: toneSchema.optional()
+}).strict();
+var roadmapGroupSchema = import_zod.z.object({
+  id: idSchema,
+  title: import_zod.z.string().min(1).max(ROADMAP_LABEL_MAX).optional(),
+  tone: toneSchema.optional(),
+  from: import_zod.z.number().int().min(0),
+  to: import_zod.z.number().int().min(0),
+  columns: import_zod.z.array(columnSchema).min(1).max(3).optional(),
+  description: import_zod.z.string().max(2e3).optional()
+}).strict();
+var roadmapLegendEntrySchema = import_zod.z.object({
+  id: idSchema,
+  label: import_zod.z.string().min(1).max(ROADMAP_LABEL_MAX),
+  tone: toneSchema,
+  icon: import_zod.z.string().min(1).max(64).optional()
+}).strict();
+var roadmapLegendSchema = import_zod.z.object({
+  entries: import_zod.z.array(roadmapLegendEntrySchema).min(1),
+  placement: import_zod.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 = import_zod.z.object({
+  version: import_zod.z.literal("roadmap/v1"),
+  title: import_zod.z.string().min(1).max(ROADMAP_LABEL_MAX).optional(),
+  direction: import_zod.z.literal("down"),
+  columns: import_zod.z.literal(3),
+  nodes: import_zod.z.array(roadmapNodeSchema),
+  edges: import_zod.z.array(roadmapEdgeSchema),
+  groups: import_zod.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: import_zod.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: import_zod.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: import_zod.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: import_zod.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: import_zod.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: import_zod.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: import_zod.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: import_zod.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: import_zod.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: import_zod.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: import_zod.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: import_zod.z.ZodIssueCode.custom,
+        path: ["nodes", i, "badge"],
+        message: `badge "${node.badge}" is not a legend entry of this document`
+      });
+    }
+  });
+});
+var roadmapStateOverlaySchema = import_zod.z.object({
+  version: import_zod.z.literal("roadmap-state/v1"),
+  nodes: import_zod.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
 var import_react7 = 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, { "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 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_jsx_runtime67.Fragment, { children: groupColumnRuns(group).map((run, index) => /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+    "div",
+    {
+      "data-testid": `${testIdPrefix}-group`,
+      "data-group-id": group.id,
+      style: { ...toneStyle(resolveGroupTone(group)), gridColumn: `${run.start} / span ${run.span}`, gridRow: `${group.from + 1} / span ${group.to - group.from + 1}` },
+      className: "pointer-events-none relative z-0 min-w-0 self-stretch rounded-[var(--radius)] border-2 border-[var(--c-roadmap-border)] bg-[var(--c-roadmap-node-bg)] text-[var(--c-roadmap-node-fg)]",
+      children: [
+        index === 0 && group.title && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "absolute left-2 right-2 top-0 -translate-y-1/2 text-xs leading-normal", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "bg-[var(--c-roadmap-surface)] px-1 [overflow-wrap:anywhere]", children: group.title }) }),
+        index === 0 && group.description && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "sr-only", children: group.description })
+      ]
+    },
+    run.start
+  )) });
+}
+
+// src/components/organisms/roadmap/Roadmap.tsx
+var import_jsx_runtime68 = require("react/jsx-runtime");
+function Roadmap({ document: document2, state, renderNode, onNodeClick, onAction, testIdPrefix = "roadmap", className = "", ariaLabel }) {
+  const { placements } = (0, import_react7.useMemo)(() => placeNodes(document2), [document2]);
+  const badges = (0, import_react7.useMemo)(() => new Map(document2.legend?.entries.map((entry) => [entry.id, entry])), [document2.legend]);
+  const legendPlacement = document2.legend ? resolveLegendPlacement(document2.legend) : void 0;
+  const legend = document2.legend && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(RoadmapLegendView, { legend: document2.legend, testIdPrefix });
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("section", { "data-testid": testIdPrefix, "aria-label": ariaLabel ?? document2.title ?? "Roadmap", className: `min-w-0 bg-[var(--c-roadmap-surface)] p-3 text-[var(--c-roadmap-neutral-fg)] ${className}`, children: [
+    legendPlacement === "top" && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "mb-6", children: legend }),
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { "data-testid": `${testIdPrefix}-grid`, role: "list", "aria-label": "Roadmap nodes", className: "relative isolate grid min-w-0 grid-cols-3 items-center gap-x-3 gap-y-8 md:gap-x-8", children: [
+      document2.groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(RoadmapGroupView, { group, testIdPrefix }, group.id)),
+      placements.map(({ node, row, column }) => {
+        const resolvedState = resolveNodeState(node, state);
+        return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+          "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__ */ (0, import_jsx_runtime68.jsx)(RoadmapNodeView, { node, state: resolvedState, badge: node.badge ? badges.get(node.badge) : void 0, onNodeClick, onAction, testIdPrefix })
+          },
+          node.id
+        );
+      })
+    ] }),
+    legendPlacement === "bottom" && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "mt-6", children: legend })
+  ] });
+}
+
+// src/hooks/use-iframe-auth.ts
+var import_react8 = require("react");
 function useIframeAuth() {
-  const ctx = (0, import_react7.useContext)(IframeContext);
+  const ctx = (0, import_react8.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_react9 = require("react");
 function useIframeNavigate() {
-  return (0, import_react8.useCallback)((path) => {
+  return (0, import_react9.useCallback)((path) => {
     if (!window.parent || window.parent === window) return;
     window.parent.postMessage(
       { type: "DFL_NAVIGATE", path },
@@ -8657,9 +9237,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_react10 = require("react");
+var import_jsx_runtime69 = require("react/jsx-runtime");
+var FeatureFlagContext = (0, import_react10.createContext)({
   flags: {},
   isEnabled: () => false
 });
@@ -8667,21 +9247,21 @@ var FeatureFlagProvider = ({
   children,
   flags
 }) => {
-  const value = (0, import_react9.useMemo)(
+  const value = (0, import_react10.useMemo)(
     () => ({
       flags,
       isEnabled: (flag) => Boolean(flags[flag])
     }),
     [flags]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(FeatureFlagContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(FeatureFlagContext.Provider, { value, children });
 };
 var useFeatureFlag = (flag) => {
-  const { isEnabled } = (0, import_react9.useContext)(FeatureFlagContext);
+  const { isEnabled } = (0, import_react10.useContext)(FeatureFlagContext);
   return isEnabled(flag);
 };
 var useFeatureFlags = () => {
-  const { flags } = (0, import_react9.useContext)(FeatureFlagContext);
+  const { flags } = (0, import_react10.useContext)(FeatureFlagContext);
   return flags;
 };
 // Annotate the CommonJS export names for ESM import in node:
@@ -8774,7 +9354,14 @@ var useFeatureFlags = () => {
   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,
@@ -8852,6 +9439,7 @@ var useFeatureFlags = () => {
   MenubarSubContent,
   MenubarSubTrigger,
   MenubarTrigger,
+  NODE_KIND_DEFAULT_TONE,
   NavigationMenu,
   NavigationMenuContent,
   NavigationMenuIndicator,
@@ -8875,12 +9463,24 @@ var useFeatureFlags = () => {
   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,
   RadioGroup,
   RadioGroupItem,
   RadioGroupRow,
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
+  Roadmap,
   ScrollArea,
   ScrollBar,
   Select,
@@ -8968,19 +9568,55 @@ var useFeatureFlags = () => {
   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,
@@ -8994,5 +9630,6 @@ var useFeatureFlags = () => {
   useSession,
   useSidebar,
   useToast,
+  validateNoOverlap,
   validatePublishForm
 });