@diagrammo/dgmo 0.8.22 → 0.8.23

package/dist/index.cjs

@@ -1959,7 +1959,8 @@ var init_parsing = __esm({
       "wireframe",
       "tech-radar",
       "cycle",
-      "journey-map"
+      "journey-map",
+      "pyramid"
     ]);
     COLOR_SUFFIX_RE = /\(([^)]+)\)\s*$/;
     OPTION_NOCOLON_RE = /^([a-z][a-z0-9-]*)\s+(.+)$/i;
@@ -3201,7 +3202,7 @@ function isSequenceSection(el) {
 function isSequenceNote(el) {
   return "kind" in el && el.kind === "note";
 }
-function parseNoteLine(trimmed, participants, lastMsgFrom) {
+function parseNoteLine(trimmed, participants, participantIds, sortedParticipantsCache, lastMsgFrom) {
   const lower = trimmed.toLowerCase();
   if (!lower.startsWith("note")) return null;
   if (trimmed.length > 4 && trimmed[4] !== " ") return null;
@@ -3213,7 +3214,7 @@ function parseNoteLine(trimmed, participants, lastMsgFrom) {
       if (!lastMsgFrom) return { kind: "skip" };
       participantId = lastMsgFrom;
     }
-    if (participants.some((p) => p.id === participantId)) {
+    if (participantIds.has(participantId)) {
       return { kind: "multi-head", position, participantId };
     }
   }
@@ -3232,11 +3233,15 @@ function parseNoteLine(trimmed, participants, lastMsgFrom) {
       }
       if (!afterPos) {
         if (!lastMsgFrom) return { kind: "skip" };
-        if (!participants.some((p) => p.id === lastMsgFrom))
-          return { kind: "skip" };
+        if (!participantIds.has(lastMsgFrom)) return { kind: "skip" };
         return { kind: "multi-head", position, participantId: lastMsgFrom };
       }
-      const resolved = resolveParticipantAndText(afterPos, participants);
+      const resolved = resolveParticipantAndText(
+        afterPos,
+        participants,
+        participantIds,
+        sortedParticipantsCache
+      );
       if (resolved) {
         if (resolved.text) {
           return {
@@ -3255,8 +3260,7 @@ function parseNoteLine(trimmed, participants, lastMsgFrom) {
       }
       if (hadOf) return { kind: "skip" };
       if (!lastMsgFrom) return { kind: "skip" };
-      if (!participants.some((p) => p.id === lastMsgFrom))
-        return { kind: "skip" };
+      if (!participantIds.has(lastMsgFrom)) return { kind: "skip" };
       return {
         kind: "single",
         position,
@@ -3265,8 +3269,7 @@ function parseNoteLine(trimmed, participants, lastMsgFrom) {
       };
     }
     if (!lastMsgFrom) return { kind: "skip" };
-    if (!participants.some((p) => p.id === lastMsgFrom))
-      return { kind: "skip" };
+    if (!participantIds.has(lastMsgFrom)) return { kind: "skip" };
     return {
       kind: "single",
       position: "right",
@@ -3276,20 +3279,20 @@ function parseNoteLine(trimmed, participants, lastMsgFrom) {
   }
   return null;
 }
-function resolveParticipantAndText(input, participants) {
+function resolveParticipantAndText(input, participants, participantIds, sortedParticipantsCache) {
   if (input.startsWith('"') || input.startsWith("'")) {
     const quote = input[0];
     const endQuote = input.indexOf(quote, 1);
     if (endQuote > 0) {
       const name = input.substring(1, endQuote);
-      if (participants.some((p) => p.id === name)) {
+      if (participantIds.has(name)) {
         const text = input.substring(endQuote + 1).trim();
         return { participantId: name, text };
       }
     }
     return null;
   }
-  const sorted = [...participants].sort((a, b) => b.id.length - a.id.length);
+  const sorted = sortedParticipantsCache;
   for (const p of sorted) {
     if (input.startsWith(p.id)) {
       const remaining = input.substring(p.id.length);
@@ -3350,6 +3353,18 @@ function parseSequenceDgmo(content) {
     break;
   }
   let activeGroup = null;
+  const participantIds = /* @__PURE__ */ new Set();
+  let sortedParticipantsCache = [];
+  let sortedCacheDirty = true;
+  const getSortedParticipants = () => {
+    if (sortedCacheDirty) {
+      sortedParticipantsCache = [...result.participants].sort(
+        (a, b) => b.id.length - a.id.length
+      );
+      sortedCacheDirty = false;
+    }
+    return sortedParticipantsCache;
+  };
   const participantGroupMap = /* @__PURE__ */ new Map();
   let currentTagGroup = null;
   const aliasMap = /* @__PURE__ */ new Map();
@@ -3595,7 +3610,9 @@ function parseSequenceDgmo(content) {
       const posMatch = remainder.match(/\bposition\s+(-?\d+)/i);
       const alias = akaMatch ? akaMatch[1].trim() : null;
       const position = posMatch ? parseInt(posMatch[1], 10) : void 0;
-      if (!result.participants.some((p) => p.id === id)) {
+      if (!participantIds.has(id)) {
+        participantIds.add(id);
+        sortedCacheDirty = true;
         result.participants.push({
           id,
           label: alias || id,
@@ -3625,7 +3642,9 @@ function parseSequenceDgmo(content) {
       contentStarted = true;
       const id = posOnlyMatch[1];
       const position = parseInt(posOnlyMatch[2], 10);
-      if (!result.participants.some((p) => p.id === id)) {
+      if (!participantIds.has(id)) {
+        participantIds.add(id);
+        sortedCacheDirty = true;
         result.participants.push({
           id,
           label: id,
@@ -3659,7 +3678,9 @@ function parseSequenceDgmo(content) {
         `'${id}(${color})' syntax is no longer supported \u2014 use 'tag:' groups for coloring`
       );
       contentStarted = true;
-      if (!result.participants.some((p) => p.id === id)) {
+      if (!participantIds.has(id)) {
+        participantIds.add(id);
+        sortedCacheDirty = true;
         result.participants.push({
           id,
           label: id,
@@ -3688,7 +3709,8 @@ function parseSequenceDgmo(content) {
       if (/^\S+$/.test(bareCore) && !ARROW_PATTERN.test(bareCore) && (inGroup || !contentStarted || bareMeta)) {
         contentStarted = true;
         const id = bareCore;
-        if (!result.participants.some((p) => p.id === id)) {
+        if (!participantIds.has(id)) {
+          participantIds.add(id);
           result.participants.push({
             id,
             label: id,
@@ -3750,7 +3772,9 @@ function parseSequenceDgmo(content) {
       };
       result.messages.push(msg);
       currentContainer().push(msg);
-      if (!result.participants.some((p) => p.id === from)) {
+      if (!participantIds.has(from)) {
+        participantIds.add(from);
+        sortedCacheDirty = true;
         result.participants.push({
           id: from,
           label: from,
@@ -3758,7 +3782,9 @@ function parseSequenceDgmo(content) {
           lineNumber
         });
       }
-      if (!result.participants.some((p) => p.id === to)) {
+      if (!participantIds.has(to)) {
+        participantIds.add(to);
+        sortedCacheDirty = true;
         result.participants.push({
           id: to,
           label: to,
@@ -3825,7 +3851,9 @@ function parseSequenceDgmo(content) {
       };
       result.messages.push(msg);
       currentContainer().push(msg);
-      if (!result.participants.some((p) => p.id === from)) {
+      if (!participantIds.has(from)) {
+        participantIds.add(from);
+        sortedCacheDirty = true;
         result.participants.push({
           id: from,
           label: from,
@@ -3833,7 +3861,9 @@ function parseSequenceDgmo(content) {
           lineNumber
         });
       }
-      if (!result.participants.some((p) => p.id === to)) {
+      if (!participantIds.has(to)) {
+        participantIds.add(to);
+        sortedCacheDirty = true;
         result.participants.push({
           id: to,
           label: to,
@@ -3935,6 +3965,8 @@ function parseSequenceDgmo(content) {
       const noteParsed = parseNoteLine(
         trimmed,
         result.participants,
+        participantIds,
+        getSortedParticipants(),
         lastMsgFrom
       );
       if (noteParsed) {
@@ -7301,7 +7333,7 @@ function buildFunnelOption(parsed, textColor, colors, bg, titleConfig) {
     bottom: 20,
     width: "60%",
     sort: "descending",
-    gap: 2,
+    gap: 0,
     minSize: "8%"
   };
   return {
@@ -10013,8 +10045,8 @@ function extractPipeMetadata(rest) {
   const tags = {};
   let clean = rest;
   let match;
-  const re = new RegExp(PIPE_META_RE.source, "g");
-  while ((match = re.exec(rest)) !== null) {
+  PIPE_META_RE.lastIndex = 0;
+  while ((match = PIPE_META_RE.exec(rest)) !== null) {
     tags[match[1].trim()] = match[2].trim();
     clean = clean.replace(match[0], "");
   }
@@ -14142,9 +14174,128 @@ var init_parser15 = __esm({
   }
 });
 
+// src/pyramid/parser.ts
+var parser_exports16 = {};
+__export(parser_exports16, {
+  parsePyramid: () => parsePyramid
+});
+function parsePyramid(content) {
+  const result = {
+    type: "pyramid",
+    title: "",
+    titleLineNumber: 0,
+    layers: [],
+    inverted: false,
+    options: {},
+    diagnostics: [],
+    error: null
+  };
+  const lines = content.split("\n");
+  let headerParsed = false;
+  let currentLayer = null;
+  const fail = (line11, message) => {
+    const diag = makeDgmoError(line11, message);
+    result.diagnostics.push(diag);
+    result.error = formatDgmoError(diag);
+    return result;
+  };
+  const warn = (line11, message, severity = "warning") => {
+    result.diagnostics.push(makeDgmoError(line11, message, severity));
+  };
+  const flushLayer = () => {
+    if (currentLayer) {
+      result.layers.push(currentLayer);
+      currentLayer = null;
+    }
+  };
+  for (let i = 0; i < lines.length; i++) {
+    const lineNum = i + 1;
+    const raw = lines[i];
+    const trimmed = raw.trim();
+    if (!trimmed || trimmed.startsWith("//")) continue;
+    const indent = measureIndent(raw);
+    if (!headerParsed) {
+      const firstLineResult = parseFirstLine(trimmed);
+      if (firstLineResult && firstLineResult.chartType === "pyramid") {
+        result.title = firstLineResult.title ?? "";
+        result.titleLineNumber = lineNum;
+        headerParsed = true;
+        continue;
+      }
+      return fail(lineNum, 'Expected "pyramid [Title]" as the first line.');
+    }
+    if (indent === 0 && trimmed.toLowerCase() === "inverted") {
+      result.inverted = true;
+      continue;
+    }
+    if (indent === 0) {
+      flushLayer();
+      const pipeIdx = trimmed.indexOf("|");
+      let label;
+      const description = [];
+      let color;
+      let restMeta = {};
+      if (pipeIdx < 0) {
+        label = trimmed;
+      } else {
+        label = trimmed.substring(0, pipeIdx).trim();
+        const after = trimmed.substring(pipeIdx + 1).trim();
+        if (!after) {
+        } else if (KEY_VALUE_PREFIX_RE.test(after)) {
+          const metadata = parsePipeMetadata([label, after]);
+          color = metadata["color"];
+          const descFromPipe = metadata["description"];
+          if (descFromPipe) description.push(descFromPipe);
+          restMeta = { ...metadata };
+          delete restMeta["color"];
+          delete restMeta["description"];
+        } else {
+          description.push(after);
+        }
+      }
+      if (!label) {
+        warn(lineNum, "Empty layer label.");
+        continue;
+      }
+      currentLayer = {
+        label,
+        lineNumber: lineNum,
+        color,
+        description,
+        metadata: restMeta
+      };
+      continue;
+    }
+    if (!currentLayer) {
+      warn(lineNum, `Unexpected indented line: "${trimmed}".`);
+      continue;
+    }
+    const descLine = trimmed.startsWith("- ") ? `\u2022 ${trimmed.substring(2)}` : trimmed;
+    currentLayer.description.push(descLine);
+  }
+  flushLayer();
+  if (result.layers.length < 2) {
+    return fail(
+      result.titleLineNumber || 1,
+      "pyramid requires at least 2 layers."
+    );
+  }
+  return result;
+}
+var KEY_VALUE_PREFIX_RE;
+var init_parser16 = __esm({
+  "src/pyramid/parser.ts"() {
+    "use strict";
+    init_diagnostics();
+    init_parsing();
+    KEY_VALUE_PREFIX_RE = /^\s*[A-Za-z][A-Za-z0-9_-]*\s*:/;
+  }
+});
+
 // src/dgmo-router.ts
 var dgmo_router_exports = {};
 __export(dgmo_router_exports, {
+  CHART_TYPE_DESCRIPTIONS: () => CHART_TYPE_DESCRIPTIONS,
   getAllChartTypes: () => getAllChartTypes,
   getRenderCategory: () => getRenderCategory,
   isExtendedChartType: () => isExtendedChartType,
@@ -14214,32 +14365,39 @@ function parseDgmo(content) {
     const colonDiag = detectColonChartType(content);
     if (colonDiag) {
       const fallback = parseVisualization(content).diagnostics;
-      return { diagnostics: [colonDiag, ...fallback] };
+      return { diagnostics: [colonDiag, ...fallback], chartType: null };
     }
-    return { diagnostics: parseVisualization(content).diagnostics };
+    return {
+      diagnostics: parseVisualization(content).diagnostics,
+      chartType: null
+    };
   }
   const directParser = PARSE_DISPATCH.get(chartType);
   if (directParser) {
     const result2 = directParser(content);
     return {
-      diagnostics: [...result2.diagnostics, ...detectEmptyContent(content)]
+      diagnostics: [...result2.diagnostics, ...detectEmptyContent(content)],
+      chartType
     };
   }
   if (STANDARD_CHART_TYPES2.has(chartType)) {
     const result2 = parseChart(content);
     return {
-      diagnostics: [...result2.diagnostics, ...detectEmptyContent(content)]
+      diagnostics: [...result2.diagnostics, ...detectEmptyContent(content)],
+      chartType
     };
   }
   if (ECHART_TYPES.has(chartType)) {
     const result2 = parseExtendedChart(content);
     return {
-      diagnostics: [...result2.diagnostics, ...detectEmptyContent(content)]
+      diagnostics: [...result2.diagnostics, ...detectEmptyContent(content)],
+      chartType
     };
   }
   const result = parseVisualization(content);
   return {
-    diagnostics: [...result.diagnostics, ...detectEmptyContent(content)]
+    diagnostics: [...result.diagnostics, ...detectEmptyContent(content)],
+    chartType
   };
 }
 function detectColonChartType(content) {
@@ -14282,7 +14440,7 @@ function detectEmptyContent(content) {
   }
   return [];
 }
-var GANTT_DURATION_RE, GANTT_DATE_RE, C4_TYPE_RE, DATA_CHART_TYPES, VISUALIZATION_TYPES, DIAGRAM_TYPES, EXTENDED_CHART_TYPES, STANDARD_CHART_TYPES2, ECHART_TYPES, PARSE_DISPATCH, ALL_KNOWN_TYPES;
+var GANTT_DURATION_RE, GANTT_DATE_RE, C4_TYPE_RE, DATA_CHART_TYPES, VISUALIZATION_TYPES, DIAGRAM_TYPES, EXTENDED_CHART_TYPES, STANDARD_CHART_TYPES2, CHART_TYPE_DESCRIPTIONS, ECHART_TYPES, PARSE_DISPATCH, ALL_KNOWN_TYPES;
 var init_dgmo_router = __esm({
   "src/dgmo-router.ts"() {
     "use strict";
@@ -14306,6 +14464,7 @@ var init_dgmo_router = __esm({
     init_parser13();
     init_parser14();
     init_parser15();
+    init_parser16();
     init_parsing();
     init_diagnostics();
     GANTT_DURATION_RE = /^\d+(?:\.\d+)?(?:min|bd|d|w|m|q|y|h)(?:\?)?\s+/;
@@ -14336,7 +14495,8 @@ var init_dgmo_router = __esm({
       "venn",
       "quadrant",
       "tech-radar",
-      "cycle"
+      "cycle",
+      "pyramid"
     ]);
     DIAGRAM_TYPES = /* @__PURE__ */ new Set([
       "sequence",
@@ -14374,6 +14534,47 @@ var init_dgmo_router = __esm({
       "polar-area",
       "bar-stacked"
     ]);
+    CHART_TYPE_DESCRIPTIONS = {
+      bar: "Bar chart \u2014 categorical comparisons",
+      line: "Line chart \u2014 trends over time; supports era bands (era start -> end Label (color)) for annotating named periods",
+      "multi-line": "Multi-line chart \u2014 multiple series trends over time; supports era bands",
+      area: "Area chart \u2014 filled line chart; supports era bands",
+      pie: "Pie chart \u2014 part-to-whole proportions",
+      doughnut: "Doughnut chart \u2014 ring-style pie chart",
+      radar: "Radar chart \u2014 multi-dimensional metrics",
+      "polar-area": "Polar area chart \u2014 radial bar chart",
+      "bar-stacked": "Stacked bar chart \u2014 multi-series categorical",
+      scatter: "Scatter plot \u2014 2D data points or bubble chart",
+      sankey: "Sankey diagram \u2014 flow/allocation visualization",
+      chord: "Chord diagram \u2014 circular flow relationships",
+      function: "Function plot \u2014 mathematical expressions",
+      heatmap: "Heatmap \u2014 matrix intensity visualization",
+      funnel: "Funnel chart \u2014 conversion pipeline",
+      slope: "Slope chart \u2014 change between two periods",
+      wordcloud: "Word cloud \u2014 term frequency visualization",
+      arc: "Arc diagram \u2014 network relationships",
+      timeline: "Timeline \u2014 events, eras, and date ranges",
+      venn: "Venn diagram \u2014 set overlaps",
+      quadrant: "Quadrant chart \u2014 2x2 positioning matrix",
+      "tech-radar": "Tech radar \u2014 technology adoption quadrants (adopt/trial/assess/hold)",
+      cycle: "Cycle diagram \u2014 cyclical process visualization (PDCA, OODA, DevOps loops)",
+      sequence: "Sequence diagram \u2014 message/interaction flows",
+      flowchart: "Flowchart \u2014 decision trees and process flows",
+      class: "Class diagram \u2014 UML class hierarchies",
+      er: "ER diagram \u2014 database schemas and relationships",
+      org: "Org chart \u2014 hierarchical tree structures",
+      kanban: "Kanban board \u2014 task/workflow columns",
+      c4: "C4 diagram \u2014 system architecture (context, container, component, deployment)",
+      state: "State diagram \u2014 state machine / lifecycle transitions",
+      sitemap: "Sitemap \u2014 navigable UI structure with pages, groups, and cross-link arrows",
+      infra: "Infrastructure diagram \u2014 traffic flow with RPS computation, capacity modeling, and latency analysis",
+      gantt: "Gantt chart \u2014 project scheduling with task dependencies and milestones",
+      "boxes-and-lines": "Boxes and lines \u2014 general-purpose node-edge diagrams with nested groups, tags, and shape inference",
+      mindmap: "Mindmap \u2014 radial hierarchy of ideas branching from a central topic",
+      wireframe: "Wireframe \u2014 low-fidelity UI layout with panels, controls, and annotations",
+      "journey-map": "Journey map \u2014 user experience flow with emotion scores, phases, and annotations",
+      pyramid: "Pyramid \u2014 hierarchical layered pyramid (Maslow, DIKW, learning pyramid); inverted for funnel-of-learning style"
+    };
     ECHART_TYPES = /* @__PURE__ */ new Set([
       "scatter",
       "sankey",
@@ -14399,7 +14600,8 @@ var init_dgmo_router = __esm({
       ["wireframe", (c) => parseWireframe(c)],
       ["tech-radar", (c) => parseTechRadar(c)],
       ["cycle", (c) => parseCycle(c)],
-      ["journey-map", (c) => parseJourneyMap(c)]
+      ["journey-map", (c) => parseJourneyMap(c)],
+      ["pyramid", (c) => parsePyramid(c)]
     ]);
     ALL_KNOWN_TYPES = /* @__PURE__ */ new Set([
       ...DATA_CHART_TYPES,
@@ -15208,7 +15410,8 @@ var init_layout = __esm({
 // src/org/collapse.ts
 var collapse_exports = {};
 __export(collapse_exports, {
-  collapseOrgTree: () => collapseOrgTree
+  collapseOrgTree: () => collapseOrgTree,
+  focusOrgTree: () => focusOrgTree
 });
 function cloneNode(node) {
   return {
@@ -15263,6 +15466,49 @@ function collapseOrgTree(original, collapsedIds) {
     hiddenCounts
   };
 }
+function findNodeWithPath(nodes, targetId, path) {
+  for (const node of nodes) {
+    if (node.id === targetId) {
+      return { node, path };
+    }
+    const result = findNodeWithPath(node.children, targetId, [
+      ...path,
+      {
+        id: node.id,
+        label: node.label,
+        lineNumber: node.lineNumber,
+        color: node.color,
+        metadata: { ...node.metadata },
+        isContainer: node.isContainer
+      }
+    ]);
+    if (result) return result;
+  }
+  return null;
+}
+function focusOrgTree(original, focusNodeId) {
+  const found = findNodeWithPath(original.roots, focusNodeId, []);
+  if (!found) return null;
+  const isRoot = original.roots.some((r) => r.id === focusNodeId);
+  if (isRoot) {
+    return {
+      parsed: {
+        ...original,
+        roots: [cloneNode(found.node)]
+      },
+      ancestorPath: []
+    };
+  }
+  const cloned = cloneNode(found.node);
+  cloned.parentId = null;
+  return {
+    parsed: {
+      ...original,
+      roots: [cloned]
+    },
+    ancestorPath: found.path
+  };
+}
 var init_collapse = __esm({
   "src/org/collapse.ts"() {
     "use strict";
@@ -15321,7 +15567,7 @@ function containerFill(palette, isDark, nodeColor2) {
 function containerStroke(palette, nodeColor2) {
   return nodeColor2 ?? palette.textMuted;
 }
-function renderOrg(container, parsed, layout, palette, isDark, onClickItem, exportDims, activeTagGroup, hiddenAttributes) {
+function renderOrg(container, parsed, layout, palette, isDark, onClickItem, exportDims, activeTagGroup, hiddenAttributes, ancestorPath) {
   d3Selection.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const width = exportDims?.width ?? container.clientWidth;
   const height = exportDims?.height ?? container.clientHeight;
@@ -15334,8 +15580,10 @@ function renderOrg(container, parsed, layout, palette, isDark, onClickItem, expo
   const legendReserve = fixedLegend ? LEGEND_HEIGHT + LEGEND_FIXED_GAP : 0;
   const fixedTitle = !exportDims && !!parsed.title;
   const titleReserve = fixedTitle ? TITLE_HEIGHT : 0;
+  const hasAncestorTrail = !exportDims && ancestorPath && ancestorPath.length > 0;
+  const ancestorTrailHeight = hasAncestorTrail ? ancestorPath.length * ANCESTOR_ROW_HEIGHT + ANCESTOR_TRAIL_BOTTOM_GAP : 0;
   const diagramW = layout.width;
-  let diagramH = layout.height + (fixedTitle ? 0 : titleOffset);
+  let diagramH = layout.height + (fixedTitle ? 0 : titleOffset) + ancestorTrailHeight;
   if (fixedLegend) {
     diagramH -= layoutLegendShift;
   }
@@ -15367,11 +15615,13 @@ function renderOrg(container, parsed, layout, palette, isDark, onClickItem, expo
       }
     }
   }
-  const contentG = mainG.append("g").attr("transform", `translate(0, ${fixedTitle ? 0 : titleOffset})`);
+  const contentYShift = (fixedTitle ? 0 : titleOffset) + ancestorTrailHeight;
+  const contentG = mainG.append("g").attr("transform", `translate(0, ${contentYShift})`);
   const displayNames = /* @__PURE__ */ new Map();
   for (const group of parsed.tagGroups) {
     displayNames.set(group.name.toLowerCase(), group.name);
   }
+  const rootNodeIds = new Set(parsed.roots.map((r) => r.id));
   const colorOff = parsed.options?.color === "off";
   for (const c of layout.containers) {
     const cG = contentG.append("g").attr("transform", `translate(${c.x}, ${c.y})`).attr("class", "org-container").attr("data-line-number", String(c.lineNumber));
@@ -15418,6 +15668,18 @@ function renderOrg(container, parsed, layout, palette, isDark, onClickItem, expo
       cG.append("clipPath").attr("id", clipId).append("rect").attr("width", c.width).attr("height", c.height).attr("rx", CONTAINER_RADIUS);
       cG.append("rect").attr("x", COLLAPSE_BAR_INSET).attr("y", c.height - COLLAPSE_BAR_HEIGHT).attr("width", c.width - COLLAPSE_BAR_INSET * 2).attr("height", COLLAPSE_BAR_HEIGHT).attr("fill", containerStroke(palette, colorOff ? void 0 : c.color)).attr("clip-path", `url(#${clipId})`).attr("class", "org-collapse-bar");
     }
+    if (!exportDims && c.hasChildren && !rootNodeIds.has(c.nodeId)) {
+      const iconSize = 14;
+      const iconPad = 5;
+      const iconX = c.width - iconSize - iconPad;
+      const iconY = iconPad;
+      const focusG = cG.append("g").attr("class", "org-focus-icon").attr("data-focus-node", c.nodeId).attr("transform", `translate(${iconX}, ${iconY})`);
+      focusG.append("rect").attr("x", -3).attr("y", -3).attr("width", iconSize + 6).attr("height", iconSize + 6).attr("fill", "transparent");
+      const cx = iconSize / 2;
+      const cy = iconSize / 2;
+      focusG.append("circle").attr("cx", cx).attr("cy", cy).attr("r", iconSize / 2 - 1).attr("fill", "none").attr("stroke", palette.textMuted).attr("stroke-width", 1.5);
+      focusG.append("circle").attr("cx", cx).attr("cy", cy).attr("r", 2).attr("fill", palette.textMuted);
+    }
   }
   for (const edge of layout.edges) {
     if (edge.points.length < 2) continue;
@@ -15476,6 +15738,58 @@ function renderOrg(container, parsed, layout, palette, isDark, onClickItem, expo
       nodeG.append("clipPath").attr("id", clipId).append("rect").attr("width", node.width).attr("height", node.height).attr("rx", CARD_RADIUS);
       nodeG.append("rect").attr("x", COLLAPSE_BAR_INSET).attr("y", node.height - COLLAPSE_BAR_HEIGHT).attr("width", node.width - COLLAPSE_BAR_INSET * 2).attr("height", COLLAPSE_BAR_HEIGHT).attr("fill", nodeStroke(palette, colorOff ? void 0 : node.color)).attr("clip-path", `url(#${clipId})`).attr("class", "org-collapse-bar");
     }
+    if (!exportDims && node.hasChildren && !rootNodeIds.has(node.id)) {
+      const iconSize = 14;
+      const iconPad = 5;
+      const iconX = node.width - iconSize - iconPad;
+      const iconY = iconPad;
+      const focusG = nodeG.append("g").attr("class", "org-focus-icon").attr("data-focus-node", node.id).attr("transform", `translate(${iconX}, ${iconY})`);
+      focusG.append("rect").attr("x", -3).attr("y", -3).attr("width", iconSize + 6).attr("height", iconSize + 6).attr("fill", "transparent");
+      const cx = iconSize / 2;
+      const cy = iconSize / 2;
+      focusG.append("circle").attr("cx", cx).attr("cy", cy).attr("r", iconSize / 2 - 1).attr("fill", "none").attr("stroke", palette.textMuted).attr("stroke-width", 1.5);
+      focusG.append("circle").attr("cx", cx).attr("cy", cy).attr("r", 2).attr("fill", palette.textMuted);
+    }
+  }
+  if (hasAncestorTrail) {
+    const rootNode = layout.nodes.find((n) => rootNodeIds.has(n.id));
+    const rootContainer = !rootNode ? layout.containers.find((c) => rootNodeIds.has(c.nodeId)) : null;
+    const rootCenterX = rootNode ? rootNode.x : rootContainer ? rootContainer.x + rootContainer.width / 2 : null;
+    const rootTopY = rootNode ? rootNode.y : rootContainer ? rootContainer.y : null;
+    if (rootCenterX !== null && rootTopY !== null) {
+      const trailBottomY = rootTopY - ANCESTOR_TRAIL_BOTTOM_GAP;
+      const trailG = contentG.append("g").attr("class", "org-ancestor-trail");
+      const count = ancestorPath.length;
+      const dotPositions = [];
+      for (let i = 0; i < count; i++) {
+        const fromBottom = count - 1 - i;
+        dotPositions.push(trailBottomY - fromBottom * ANCESTOR_ROW_HEIGHT);
+      }
+      const lineTopY = dotPositions[0];
+      trailG.append("line").attr("x1", rootCenterX).attr("y1", lineTopY).attr("x2", rootCenterX).attr("y2", rootTopY).attr("stroke", palette.textMuted).attr("stroke-width", 1.5).attr("stroke-opacity", 0.4);
+      for (let i = 0; i < count; i++) {
+        const ancestor = ancestorPath[i];
+        const dotY = dotPositions[i];
+        const resolvedColor = ancestor.color ?? resolveTagColor(
+          ancestor.metadata,
+          parsed.tagGroups,
+          activeTagGroup ?? null,
+          ancestor.isContainer
+        );
+        const dotColor = resolvedColor ?? palette.textMuted;
+        const rowG = trailG.append("g").attr("class", "org-ancestor-node").attr("data-focus-ancestor", ancestor.id).style("cursor", "pointer").attr("transform", `translate(${rootCenterX}, ${dotY})`);
+        rowG.append("rect").attr("x", -ANCESTOR_DOT_R - 2).attr("y", -ANCESTOR_DOT_R - 2).attr("width", 120).attr("height", ANCESTOR_DOT_R * 2 + 4).attr("fill", "transparent");
+        rowG.append("circle").attr("cx", 0).attr("cy", 0).attr("r", ANCESTOR_DOT_R).attr("fill", dotColor);
+        rowG.append("text").attr("x", ANCESTOR_DOT_R + 6).attr("y", ANCESTOR_LABEL_FONT_SIZE * 0.35).attr("fill", palette.textMuted).attr("font-size", ANCESTOR_LABEL_FONT_SIZE).text(ancestor.label);
+        rowG.on("mouseenter", function() {
+          d3Selection.select(this).select("circle").attr("r", ANCESTOR_DOT_R + 1);
+          d3Selection.select(this).select("text").attr("fill", palette.text);
+        }).on("mouseleave", function() {
+          d3Selection.select(this).select("circle").attr("r", ANCESTOR_DOT_R);
+          d3Selection.select(this).select("text").attr("fill", palette.textMuted);
+        });
+      }
+    }
   }
   if (fixedLegend || legendOnly || exportDims && hasLegend) {
     const groups = layout.legend.map((g) => ({
@@ -15572,7 +15886,7 @@ function renderOrgForExport(content, theme, palette) {
     return extractExportSvg(container, theme);
   });
 }
-var d3Selection, DIAGRAM_PADDING, MAX_SCALE, TITLE_HEIGHT, LABEL_FONT_SIZE, META_FONT_SIZE, META_LINE_HEIGHT2, HEADER_HEIGHT2, SEPARATOR_GAP2, EDGE_STROKE_WIDTH, NODE_STROKE_WIDTH, CARD_RADIUS, CONTAINER_RADIUS, CONTAINER_LABEL_FONT_SIZE, CONTAINER_META_FONT_SIZE, CONTAINER_META_LINE_HEIGHT2, CONTAINER_HEADER_HEIGHT, COLLAPSE_BAR_HEIGHT, COLLAPSE_BAR_INSET, LEGEND_FIXED_GAP;
+var d3Selection, DIAGRAM_PADDING, MAX_SCALE, TITLE_HEIGHT, LABEL_FONT_SIZE, META_FONT_SIZE, META_LINE_HEIGHT2, HEADER_HEIGHT2, SEPARATOR_GAP2, EDGE_STROKE_WIDTH, NODE_STROKE_WIDTH, CARD_RADIUS, CONTAINER_RADIUS, CONTAINER_LABEL_FONT_SIZE, CONTAINER_META_FONT_SIZE, CONTAINER_META_LINE_HEIGHT2, CONTAINER_HEADER_HEIGHT, COLLAPSE_BAR_HEIGHT, COLLAPSE_BAR_INSET, ANCESTOR_DOT_R, ANCESTOR_LABEL_FONT_SIZE, ANCESTOR_ROW_HEIGHT, ANCESTOR_TRAIL_BOTTOM_GAP, LEGEND_FIXED_GAP;
 var init_renderer = __esm({
   "src/org/renderer.ts"() {
     "use strict";
@@ -15580,6 +15894,7 @@ var init_renderer = __esm({
     init_fonts();
     init_export_container();
     init_color_utils();
+    init_tag_groups();
     init_parser4();
     init_layout();
     init_legend_constants();
@@ -15603,6 +15918,10 @@ var init_renderer = __esm({
     CONTAINER_HEADER_HEIGHT = 28;
     COLLAPSE_BAR_HEIGHT = 6;
     COLLAPSE_BAR_INSET = 0;
+    ANCESTOR_DOT_R = 4;
+    ANCESTOR_LABEL_FONT_SIZE = 11;
+    ANCESTOR_ROW_HEIGHT = 22;
+    ANCESTOR_TRAIL_BOTTOM_GAP = 16;
     LEGEND_FIXED_GAP = 8;
   }
 });
@@ -30586,7 +30905,22 @@ function renderQuarterCircle(svg, parsed, quadrant, qColor, palette, isDark, wid
     const innerR = ri * ringBandWidth;
     const outerR = (ri + 1) * ringBandWidth;
     const fillColor = ri % 2 === 0 ? palette.bg : mix(palette.bg, palette.border, 0.15);
+    const ringName = parsed.rings[ri].name;
     svg.append("path").attr("d", arcGen(innerR, outerR)).attr("fill", fillColor).attr("stroke", mutedColor).attr("stroke-width", 0.5);
+    svg.append("path").attr("d", arcGen(innerR, outerR)).attr("fill", "transparent").attr("data-ring-arc", ringName).style("cursor", "pointer").on("mouseenter", () => {
+      d3Selection14.select(rootContainer).selectAll("[data-ring-arc]").each(function() {
+        const el = d3Selection14.select(this);
+        const isMatch = this.getAttribute("data-ring-arc") === ringName;
+        el.attr("fill", isMatch ? qColor : "transparent").attr(
+          "opacity",
+          isMatch ? 0.15 : 1
+        );
+      });
+      dimExceptRing(rootContainer, ringName);
+    }).on("mouseleave", () => {
+      d3Selection14.select(rootContainer).selectAll("[data-ring-arc]").attr("fill", "transparent").attr("opacity", 1);
+      clearDim(rootContainer);
+    });
   }
   const ringOrder = parsed.rings.map((r) => r.name);
   const angularPadding = 0.08;
@@ -30649,10 +30983,21 @@ function dimExcept(root, lineNum) {
     el.style.opacity = el.getAttribute("data-line-number") === lineNum ? "1" : String(DIM_OPACITY);
   });
 }
+function dimExceptRing(root, ringName) {
+  root.querySelectorAll("[data-line-number]").forEach((el) => {
+    el.style.opacity = el.getAttribute("data-ring") === ringName ? "1" : String(DIM_OPACITY);
+  });
+  root.querySelectorAll("[data-ring-group]").forEach((el) => {
+    el.style.opacity = el.getAttribute("data-ring-group") === ringName ? "1" : String(DIM_OPACITY);
+  });
+}
 function clearDim(root) {
   root.querySelectorAll("[data-line-number]").forEach((el) => {
     el.style.opacity = "1";
   });
+  root.querySelectorAll("[data-ring-group]").forEach((el) => {
+    el.style.opacity = "1";
+  });
 }
 function renderHtmlPanel(panel, parsed, quadrant, qColor, palette, isDark, rootContainer, onClickItem) {
   const ringOrder = parsed.rings.map((r) => r.name);
@@ -30664,11 +31009,13 @@ function renderHtmlPanel(panel, parsed, quadrant, qColor, palette, isDark, rootC
       const blips = quadrant.blips.filter((b) => b.ring === ringName);
       if (blips.length === 0) continue;
       const ringGroup = document.createElement("div");
+      ringGroup.setAttribute("data-ring-group", ringName);
       ringGroup.style.cssText = `
         background: ${palette.surface};
         border-radius: 8px;
         padding: 10px;
         margin-bottom: 12px;
+        transition: opacity 0.15s;
       `;
       const header = document.createElement("div");
       header.style.cssText = `
@@ -32021,7 +32368,13 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
   const containerW = exportDims?.width ?? container.clientWidth;
   const containerH = exportDims?.height ?? container.clientHeight;
   const useContainerFit = !exportDims && containerW > 0 && containerH > 0;
-  const svg = d3.select(container).append("svg").attr("xmlns", "http://www.w3.org/2000/svg").attr("width", useContainerFit ? containerW : layout.totalWidth).attr("height", useContainerFit ? containerH : layout.totalHeight).attr("viewBox", `0 0 ${layout.totalWidth} ${layout.totalHeight}`).attr("preserveAspectRatio", "xMidYMin meet").attr("font-family", FONT_FAMILY);
+  const svg = d3.select(container).append("svg").attr("xmlns", "http://www.w3.org/2000/svg").attr(
+    "width",
+    useContainerFit ? containerW : exportDims?.width ?? layout.totalWidth
+  ).attr(
+    "height",
+    useContainerFit ? containerH : exportDims?.height ?? layout.totalHeight
+  ).attr("viewBox", `0 0 ${layout.totalWidth} ${layout.totalHeight}`).attr("preserveAspectRatio", "xMidYMin meet").attr("font-family", FONT_FAMILY);
   svg.append("rect").attr("width", layout.totalWidth).attr("height", layout.totalHeight).attr("fill", palette.bg);
   const defs = svg.append("defs");
   const curveGradient = defs.append("linearGradient").attr("id", "journey-curve-gradient").attr("x1", "0").attr("y1", "0").attr("x2", "0").attr("y2", "1");
@@ -32093,7 +32446,7 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
     const legendY = PADDING2 + (parsed.title ? FONT_SIZE_TITLE + 8 : 0);
     const legendG = svg.append("g").attr("class", "journey-legend").attr("transform", `translate(${legendX},${legendY})`);
     const legendConfig = {
-      groups: allLegendGroups,
+      groups: parsed.tagGroups,
       position: {
         placement: "top-center",
         titleRelation: "inline-with-title"
@@ -32162,7 +32515,7 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
     const y = layout.curveAreaBottom - (score - 1) / 4 * (layout.curveAreaBottom - layout.curveAreaTop - 120) - 10;
     curveG.append("line").attr("x1", PADDING2).attr("x2", layout.totalWidth - PADDING2).attr("y1", y).attr("y2", y).attr("stroke", palette.textMuted).attr("stroke-opacity", GRID_LINE_OPACITY).attr("stroke-dasharray", "4,4");
     const SCORE_LABEL_R = 8;
-    const labelG = curveG.append("g").attr("class", "journey-score-label");
+    const labelG = curveG.append("g").attr("class", "journey-score-label").attr("data-score", String(score));
     renderScoreFace(
       labelG,
       PADDING2 - SCORE_LABEL_R - 2,
@@ -32172,35 +32525,7 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
       SCORE_LABEL_R
     );
     if (!exportDims) {
-      const scoreStr = String(score);
       labelG.style("cursor", "pointer");
-      labelG.on("mouseenter", () => {
-        svg.selectAll(".journey-step").each(function() {
-          const hit = this.getAttribute("data-score") === scoreStr;
-          d3.select(this).style("opacity", hit ? "1" : String(DIM_HOVER));
-        });
-        svg.selectAll(".journey-face").each(function() {
-          const hit = this.getAttribute("data-score") === scoreStr;
-          const sel = d3.select(this);
-          sel.style("opacity", hit ? "1" : String(DIM_HOVER));
-          if (hit) {
-            const fcx = parseFloat(sel.attr("data-cx") ?? "0");
-            const fcy = parseFloat(sel.attr("data-cy") ?? "0");
-            sel.attr(
-              "transform",
-              `translate(${fcx},${fcy}) scale(1.3) translate(${-fcx},${-fcy})`
-            );
-          } else {
-            sel.attr("transform", null);
-          }
-        });
-        svg.selectAll(".journey-thought").style("opacity", String(DIM_HOVER));
-      });
-      labelG.on("mouseleave", () => {
-        svg.selectAll(".journey-step").style("opacity", null);
-        svg.selectAll(".journey-face").style("opacity", null).attr("transform", null);
-        svg.selectAll(".journey-thought").style("opacity", null);
-      });
     }
   }
   if (layout.curvePoints.length >= 2) {
@@ -32386,6 +32711,41 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
   if (!exportDims) {
     const DIM_OPACITY2 = 0.35;
     let lockedLine = null;
+    let lockedScore = null;
+    const applyScoreDimming = (activeScore) => {
+      const scoreStr = String(activeScore);
+      svg.selectAll(".journey-step").each(function() {
+        const hit = this.getAttribute("data-score") === scoreStr;
+        d3.select(this).style("opacity", hit ? "1" : String(DIM_HOVER));
+      });
+      svg.selectAll(".journey-face").each(function() {
+        const hit = this.getAttribute("data-score") === scoreStr;
+        const sel = d3.select(this);
+        sel.style("opacity", hit ? "1" : String(DIM_HOVER));
+        if (hit) {
+          const fcx = parseFloat(sel.attr("data-cx") ?? "0");
+          const fcy = parseFloat(sel.attr("data-cy") ?? "0");
+          sel.attr(
+            "transform",
+            `translate(${fcx},${fcy}) scale(1.3) translate(${-fcx},${-fcy})`
+          );
+        } else {
+          sel.attr("transform", null);
+        }
+      });
+      svg.selectAll(".journey-thought").style("opacity", String(DIM_HOVER));
+      svg.selectAll(".journey-score-label").each(function() {
+        const sel = d3.select(this);
+        const s = sel.attr("data-score");
+        sel.style("opacity", s === scoreStr ? "1" : String(DIM_HOVER));
+      });
+    };
+    const clearScoreDimming = () => {
+      svg.selectAll(".journey-step").style("opacity", null);
+      svg.selectAll(".journey-face").style("opacity", null).attr("transform", null);
+      svg.selectAll(".journey-thought").style("opacity", null);
+      svg.selectAll(".journey-score-label").style("opacity", null);
+    };
     const applyDimming = (activeLine) => {
       svg.selectAll(".journey-step").each(function() {
         const el = d3.select(this);
@@ -32440,7 +32800,7 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
       const lines = wrapText4(thoughtText, THOUGHT_MAX_W, THOUGHT_FONT);
       const textW = Math.min(
         THOUGHT_MAX_W,
-        Math.max(...lines.map((l) => l.length * 4.8))
+        Math.max(...lines.map((l) => l.length * THOUGHT_FONT * 0.6))
       );
       const bw = textW + THOUGHT_PAD_X * 2;
       const bh = lines.length * THOUGHT_LINE_H + THOUGHT_PAD_Y * 2;
@@ -32461,9 +32821,11 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
     };
     svg.on("click", (event) => {
       const target = event.target;
-      if (!target.closest(".journey-face") && !target.closest(".journey-step") && !target.closest(".journey-phase")) {
+      if (!target.closest(".journey-face") && !target.closest(".journey-step") && !target.closest(".journey-phase") && !target.closest(".journey-score-label")) {
         lockedLine = null;
+        lockedScore = null;
         clearDimming();
+        clearScoreDimming();
       }
     });
     const showThoughtForLine = (ln) => {
@@ -32477,17 +32839,22 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
     svg.selectAll(".journey-face").each(function() {
       const el = d3.select(this);
       el.on("mouseenter", () => {
-        if (lockedLine !== null) return;
+        if (lockedLine !== null || lockedScore !== null) return;
         const ln = parseInt(el.attr("data-line-number") ?? "0", 10);
         if (ln) {
           applyDimming(ln);
           showThoughtForLine(ln);
         }
       }).on("mouseleave", () => {
-        if (lockedLine !== null) return;
+        if (lockedLine !== null || lockedScore !== null) return;
         clearDimming();
       }).on("click", (event) => {
         event.stopPropagation();
+        if (lockedScore !== null) {
+          lockedScore = null;
+          clearScoreDimming();
+          return;
+        }
         const ln = parseInt(el.attr("data-line-number") ?? "0", 10);
         if (lockedLine === ln) {
           lockedLine = null;
@@ -32503,17 +32870,22 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
     svg.selectAll(".journey-step").each(function() {
       const el = d3.select(this);
       el.on("mouseenter", () => {
-        if (lockedLine !== null) return;
+        if (lockedLine !== null || lockedScore !== null) return;
         const ln = parseInt(el.attr("data-line-number") ?? "0", 10);
         if (ln) {
           applyDimming(ln);
           showThoughtForLine(ln);
         }
       }).on("mouseleave", () => {
-        if (lockedLine !== null) return;
+        if (lockedLine !== null || lockedScore !== null) return;
         clearDimming();
       }).on("click", (event) => {
         event.stopPropagation();
+        if (lockedScore !== null) {
+          lockedScore = null;
+          clearScoreDimming();
+          return;
+        }
         const ln = parseInt(el.attr("data-line-number") ?? "0", 10);
         if (lockedLine === ln) {
           lockedLine = null;
@@ -32526,6 +32898,30 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
         }
       });
     });
+    svg.selectAll(".journey-score-label").each(function() {
+      const el = d3.select(this);
+      const score = parseInt(el.attr("data-score") ?? "0", 10);
+      el.on("mouseenter", () => {
+        if (lockedLine !== null || lockedScore !== null) return;
+        applyScoreDimming(score);
+      }).on("mouseleave", () => {
+        if (lockedLine !== null || lockedScore !== null) return;
+        clearScoreDimming();
+      }).on("click", (event) => {
+        event.stopPropagation();
+        if (lockedLine !== null) {
+          lockedLine = null;
+          clearDimming();
+        }
+        if (lockedScore === score) {
+          lockedScore = null;
+          clearScoreDimming();
+        } else {
+          lockedScore = score;
+          applyScoreDimming(score);
+        }
+      });
+    });
   }
 }
 function resolveStepColor(step, scoreColor, activeGroup, tagGroups, _palette) {
@@ -32677,8 +33073,8 @@ function renderScoreFace(parent, cx, cy, score, palette, radius) {
   ).attr("fill", "none").attr("stroke", eyeColor).attr("stroke-width", 1.2).attr("stroke-linecap", "round");
   return g;
 }
-function wrapText4(text, maxWidth, _fontSize) {
-  const charWidth = 4.8;
+function wrapText4(text, maxWidth, fontSize) {
+  const charWidth = fontSize * 0.6;
   const maxChars = Math.floor(maxWidth / charWidth);
   if (maxChars <= 0) return [text];
   const words = text.split(/\s+/);
@@ -32697,7 +33093,7 @@ function wrapText4(text, maxWidth, _fontSize) {
   return lines;
 }
 function truncateText(text, maxWidth) {
-  const maxChars = Math.floor(maxWidth / 4.8);
+  const maxChars = Math.floor(maxWidth / 6.6);
   if (text.length <= maxChars) return text;
   return text.substring(0, maxChars - 1) + "\u2026";
 }
@@ -32799,6 +33195,21 @@ var init_renderer13 = __esm({
   }
 });
 
+// src/cycle/types.ts
+function arrowHeadLength(strokeWidth) {
+  return BASE_ARROW_SIZE + ARROW_SCALE * Math.sqrt(strokeWidth);
+}
+var DEFAULT_EDGE_WIDTH, MIN_EDGE_WIDTH, BASE_ARROW_SIZE, ARROW_SCALE;
+var init_types2 = __esm({
+  "src/cycle/types.ts"() {
+    "use strict";
+    DEFAULT_EDGE_WIDTH = 3;
+    MIN_EDGE_WIDTH = 2;
+    BASE_ARROW_SIZE = 8;
+    ARROW_SCALE = 6;
+  }
+});
+
 // src/cycle/layout.ts
 function computeCycleLayout(parsed, options) {
   const width = options?.width ?? 800;
@@ -33133,8 +33544,11 @@ function computeEdgePaths(layoutNodes, parsed, cx, cy, radius, isClockwise) {
   return parsed.edges.map((edge) => {
     const src = layoutNodes[edge.sourceIndex];
     const tgt = layoutNodes[edge.targetIndex];
-    const strokeWidth = edge.width ?? DEFAULT_EDGE_WIDTH;
-    const arrowLen = ARROWHEAD_MARKER_W * strokeWidth;
+    const strokeWidth = Math.max(
+      edge.width ?? DEFAULT_EDGE_WIDTH,
+      MIN_EDGE_WIDTH
+    );
+    const arrowLen = arrowHeadLength(strokeWidth) * 0.9;
     const { path, labelX, labelY, labelAngle } = buildEdgeArc(
       src,
       tgt,
@@ -33156,7 +33570,7 @@ function computeEdgePaths(layoutNodes, parsed, cx, cy, radius, isClockwise) {
   });
 }
 function fitToCanvas(nodes, edges, parsed, cx, cy, radius, width, height, _isClockwise) {
-  const PADDING3 = 10;
+  const PADDING3 = 30;
   let contentMinX = Infinity, contentMaxX = -Infinity;
   let contentMinY = Infinity, contentMaxY = -Infinity;
   for (const n of nodes) {
@@ -33209,17 +33623,7 @@ function fitToCanvas(nodes, edges, parsed, cx, cy, radius, width, height, _isClo
 }
 function buildEdgeArc(src, tgt, cx, cy, radius, isClockwise, arrowLength = 0) {
   const dir = isClockwise ? 1 : -1;
-  const startAngle = src.isCircle ? circleNodeExitAngle(src.width / 2, radius, src.angle, dir) : circleRectExitAngle(
-    src.x,
-    src.y,
-    src.width / 2,
-    src.height / 2,
-    cx,
-    cy,
-    radius,
-    src.angle,
-    dir
-  );
+  const startAngle = src.angle;
   const nodeEndAngle = tgt.isCircle ? circleNodeExitAngle(tgt.width / 2, radius, tgt.angle, -dir) : circleRectExitAngle(
     tgt.x,
     tgt.y,
@@ -33249,10 +33653,11 @@ function buildEdgeArc(src, tgt, cx, cy, radius, isClockwise, arrowLength = 0) {
   const labelY = cy + labelR * Math.sin(midAngle);
   return { path, labelX, labelY, labelAngle: midAngle };
 }
-var MIN_ARC_ANGLE, LABEL_CHAR_W, CIRCLE_LABEL_CHAR_W, DESC_CHAR_W, MIN_NODE_WIDTH3, MAX_NODE_WIDTH2, PLAIN_NODE_HEIGHT, HEADER_HEIGHT5, DESC_LINE_HEIGHT7, DESC_PAD_Y, NODE_PAD_X, MIN_CIRCLE_RADIUS, CIRCLE_PAD, DEFAULT_EDGE_WIDTH, ARROWHEAD_MARKER_W, EDGE_LABEL_CHAR_W;
+var MIN_ARC_ANGLE, LABEL_CHAR_W, CIRCLE_LABEL_CHAR_W, DESC_CHAR_W, MIN_NODE_WIDTH3, MAX_NODE_WIDTH2, PLAIN_NODE_HEIGHT, HEADER_HEIGHT5, DESC_LINE_HEIGHT7, DESC_PAD_Y, NODE_PAD_X, MIN_CIRCLE_RADIUS, CIRCLE_PAD, EDGE_LABEL_CHAR_W;
 var init_layout13 = __esm({
   "src/cycle/layout.ts"() {
     "use strict";
+    init_types2();
     MIN_ARC_ANGLE = 15 * Math.PI / 180;
     LABEL_CHAR_W = 8;
     CIRCLE_LABEL_CHAR_W = 10;
@@ -33266,8 +33671,6 @@ var init_layout13 = __esm({
     NODE_PAD_X = 20;
     MIN_CIRCLE_RADIUS = 35;
     CIRCLE_PAD = 14;
-    DEFAULT_EDGE_WIDTH = 3;
-    ARROWHEAD_MARKER_W = 8;
     EDGE_LABEL_CHAR_W = 7;
   }
 });
@@ -33350,19 +33753,25 @@ function renderCycle(container, parsed, palette, isDark, onClickItem, exportDims
   const g = svg.append("g").attr("transform", `translate(0, ${diagramTop})`);
   const defs = svg.append("defs");
   const defaultNodeColor = palette.primary;
-  const arrowColors = /* @__PURE__ */ new Set();
-  for (let i = 0; i < parsed.edges.length; i++) {
-    const edge = parsed.edges[i];
+  const markerKeys = /* @__PURE__ */ new Set();
+  for (const edge of parsed.edges) {
     const color = resolveEdgeColor(edge, parsed, palette, defaultNodeColor);
-    arrowColors.add(color);
+    const sw = Math.max(edge.width ?? DEFAULT_EDGE_WIDTH, MIN_EDGE_WIDTH);
+    const key = `${color}|${sw}`;
+    if (!markerKeys.has(key)) {
+      markerKeys.add(key);
+      ensureArrowMarker(defs, color, sw);
+    }
   }
-  ensureArrowMarkers2(defs, arrowColors);
   for (let i = 0; i < layout.edges.length; i++) {
     const le = layout.edges[i];
     const edge = parsed.edges[i];
     const color = resolveEdgeColor(edge, parsed, palette, defaultNodeColor);
-    const strokeWidth = edge.width ?? DEFAULT_EDGE_WIDTH2;
-    const markerId = `cycle-arrow-${color.replace("#", "")}`;
+    const strokeWidth = Math.max(
+      edge.width ?? DEFAULT_EDGE_WIDTH,
+      MIN_EDGE_WIDTH
+    );
+    const markerId = arrowMarkerId(color, strokeWidth);
     const edgeG = g.append("g").attr("class", "cycle-edge");
     if (edge.lineNumber) {
       edgeG.attr("data-line-number", edge.lineNumber);
@@ -33508,16 +33917,16 @@ function resolveEdgeColor(edge, parsed, palette, defaultNodeColor) {
   }
   return defaultNodeColor;
 }
-function ensureArrowMarkers2(defs, colors) {
-  for (const color of colors) {
-    const id = `cycle-arrow-${color.replace("#", "")}`;
-    defs.append("marker").attr("id", id).attr("viewBox", `0 0 ${ARROWHEAD_W5 * 2} ${ARROWHEAD_H5 * 2}`).attr("refX", 0).attr("refY", ARROWHEAD_H5).attr("markerWidth", ARROWHEAD_W5).attr("markerHeight", ARROWHEAD_H5).attr("orient", "auto").append("polygon").attr(
-      "points",
-      `0,0 ${ARROWHEAD_W5 * 2},${ARROWHEAD_H5} 0,${ARROWHEAD_H5 * 2}`
-    ).attr("fill", color);
-  }
+function arrowMarkerId(color, strokeWidth) {
+  return `cycle-arrow-${color.replace("#", "")}-w${strokeWidth}`;
 }
-var d3Selection16, DEFAULT_EDGE_WIDTH2, ARROWHEAD_W5, ARROWHEAD_H5, NODE_FONT_SIZE5, DESC_FONT_SIZE5, EDGE_LABEL_FONT_SIZE9, DESC_LINE_HEIGHT8, TITLE_AREA_HEIGHT;
+function ensureArrowMarker(defs, color, strokeWidth) {
+  const id = arrowMarkerId(color, strokeWidth);
+  const mw = arrowHeadLength(strokeWidth) / strokeWidth;
+  const mh = Math.max(1.5, mw * 0.5);
+  defs.append("marker").attr("id", id).attr("viewBox", `0 0 ${mw} ${mh}`).attr("refX", mw * 0.1).attr("refY", mh / 2).attr("markerWidth", mw).attr("markerHeight", mh).attr("orient", "auto").append("polygon").attr("points", `0,0 ${mw},${mh / 2} 0,${mh}`).attr("fill", color);
+}
+var d3Selection16, NODE_FONT_SIZE5, DESC_FONT_SIZE5, EDGE_LABEL_FONT_SIZE9, DESC_LINE_HEIGHT8, TITLE_AREA_HEIGHT;
 var init_renderer14 = __esm({
   "src/cycle/renderer.ts"() {
     "use strict";
@@ -33529,10 +33938,8 @@ var init_renderer14 = __esm({
     init_color_utils();
     init_colors();
     init_inline_markdown();
+    init_types2();
     init_layout13();
-    DEFAULT_EDGE_WIDTH2 = 3;
-    ARROWHEAD_W5 = 8;
-    ARROWHEAD_H5 = 8;
     NODE_FONT_SIZE5 = 13;
     DESC_FONT_SIZE5 = 11;
     EDGE_LABEL_FONT_SIZE9 = 11;
@@ -33541,6 +33948,397 @@ var init_renderer14 = __esm({
   }
 });
 
+// src/pyramid/renderer.ts
+var renderer_exports15 = {};
+__export(renderer_exports15, {
+  renderPyramid: () => renderPyramid,
+  renderPyramidForExport: () => renderPyramidForExport
+});
+function renderPyramid(container, parsed, palette, isDark, onClickItem, exportDims) {
+  if (parsed.layers.length === 0) return;
+  d3Selection17.select(container).selectAll(":not([data-d3-tooltip])").remove();
+  const width = exportDims?.width ?? container.clientWidth;
+  const height = exportDims?.height ?? container.clientHeight;
+  if (width <= 0 || height <= 0) return;
+  const hasAnyDescription = parsed.layers.some((l) => l.description.length > 0);
+  const titleH = parsed.title ? TITLE_AREA_HEIGHT2 : 0;
+  const bodyTop = titleH + V_MARGIN;
+  const bodyBottom = height - V_MARGIN;
+  const bodyHeight = Math.max(60, bodyBottom - bodyTop);
+  const sideMargin = width * H_MARGIN_FRAC;
+  const usableWidth = width - sideMargin * 2;
+  const N = parsed.layers.length;
+  const singleProbe = computeLayout2({
+    width,
+    usableWidth,
+    sideMargin,
+    bodyTop,
+    bodyHeight,
+    layers: parsed.layers,
+    hasDescription: hasAnyDescription,
+    alternate: false
+  });
+  const anyOverflow = singleProbe.wraps.some((w) => w.overflows);
+  const useAlternate = anyOverflow && hasAnyDescription && N >= 2;
+  const layout = useAlternate ? computeLayout2({
+    width,
+    usableWidth,
+    sideMargin,
+    bodyTop,
+    bodyHeight,
+    layers: parsed.layers,
+    hasDescription: true,
+    alternate: true
+  }) : singleProbe;
+  const svg = d3Selection17.select(container).append("svg").attr("width", width).attr("height", height).attr("xmlns", "http://www.w3.org/2000/svg").style("font-family", FONT_FAMILY);
+  svg.append("style").text(
+    ".pyramid-desc-full{display:none}.dgmo-pyramid-layer-highlight.pyramid-desc-short{display:none}.dgmo-pyramid-layer-highlight.pyramid-desc-full{display:inline}.dgmo-pyramid-hidden{display:none}"
+  );
+  svg.append("rect").attr("width", width).attr("height", height).attr("fill", palette.bg);
+  if (parsed.title) {
+    const titleText = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", TITLE_Y).attr("text-anchor", "middle").attr("fill", palette.text).attr("font-family", FONT_FAMILY).attr("font-size", TITLE_FONT_SIZE).attr("font-weight", TITLE_FONT_WEIGHT).attr("data-line-number", parsed.titleLineNumber).text(parsed.title).style("cursor", onClickItem ? "pointer" : "default");
+    if (onClickItem) {
+      titleText.on("click", () => onClickItem(parsed.titleLineNumber));
+    }
+  }
+  const seriesColors2 = getSeriesColors(palette);
+  const layerBase = isDark ? palette.surface : palette.bg;
+  const resolveSolid = (layer, i) => {
+    if (layer.color) {
+      const named = resolveColor(layer.color, palette);
+      if (named) return named;
+    }
+    return seriesColors2[i % seriesColors2.length];
+  };
+  const diagramG = svg.append("g").attr("class", "pyramid-body");
+  for (let i = 0; i < N; i++) {
+    const layer = parsed.layers[i];
+    const topEdgeY = layout.pyramidTop + i * layout.layerH;
+    const botEdgeY = topEdgeY + layout.layerH;
+    const topHalf = halfWidthAt(i, N, layout.baseWidth, parsed.inverted);
+    const botHalf = halfWidthAt(i + 1, N, layout.baseWidth, parsed.inverted);
+    const polyPoints = [
+      [layout.pyramidCx - topHalf, topEdgeY],
+      [layout.pyramidCx + topHalf, topEdgeY],
+      [layout.pyramidCx + botHalf, botEdgeY],
+      [layout.pyramidCx - botHalf, botEdgeY]
+    ].map((p) => `${p[0]},${p[1]}`).join(" ");
+    const solidColor = resolveSolid(layer, i);
+    const fillColor = mix(solidColor, layerBase, 30);
+    const layerG = diagramG.append("g").attr("class", "pyramid-layer").attr("data-line-number", layer.lineNumber);
+    if (onClickItem) {
+      const ln = layer.lineNumber;
+      layerG.style("cursor", "pointer").on("click", () => onClickItem(ln));
+    }
+    layerG.append("polygon").attr("points", polyPoints).attr("fill", fillColor).attr("stroke", solidColor).attr("stroke-width", 2);
+    const midY = (topEdgeY + botEdgeY) / 2;
+    const labelFitsInside = Math.min(topHalf, botHalf) * 2 > layout.labelFont * 4;
+    const textColor = labelFitsInside ? contrastText(fillColor, "#eceff4", "#2e3440") : palette.text;
+    const labelText = layerG.append("text").attr("x", layout.pyramidCx).attr("y", midY).attr("dy", "0.35em").attr("text-anchor", "middle").attr("fill", textColor).attr("font-family", FONT_FAMILY).attr("font-size", layout.labelFont).attr("font-weight", 600);
+    renderInlineText(labelText, layer.label, palette);
+    if (layer.description.length > 0) {
+      const side = useAlternate ? i % 2 === 0 ? "right" : "left" : "right";
+      const wrap = layout.wraps[i];
+      renderLayerDescriptions(
+        diagramG,
+        layer,
+        side,
+        wrap,
+        layout,
+        midY,
+        solidColor,
+        palette,
+        titleH + V_MARGIN,
+        height - V_MARGIN,
+        onClickItem
+      );
+    }
+  }
+}
+function renderPyramidForExport(container, parsed, palette, isDark, exportDims) {
+  renderPyramid(container, parsed, palette, isDark, void 0, exportDims);
+}
+function computeLayout2(input) {
+  const {
+    width,
+    usableWidth,
+    sideMargin,
+    bodyTop,
+    bodyHeight,
+    layers,
+    hasDescription,
+    alternate
+  } = input;
+  const N = layers.length;
+  const pyramidShareFrac = hasDescription ? alternate ? PYRAMID_SHARE_ALTERNATE : PYRAMID_SHARE_WITH_DESC : BASE_WIDTH_FRAC_NO_DESC;
+  const pyramidBandWidth = usableWidth * pyramidShareFrac;
+  const maxBaseByHeight = bodyHeight / PITCH_RATIO;
+  const baseWidth = Math.min(pyramidBandWidth, maxBaseByHeight);
+  const pyramidH = baseWidth * PITCH_RATIO;
+  let pyramidCx;
+  if (!hasDescription) {
+    pyramidCx = width / 2;
+  } else if (alternate) {
+    pyramidCx = width / 2;
+  } else {
+    pyramidCx = sideMargin + pyramidBandWidth / 2;
+  }
+  const pyramidTop = bodyTop + (bodyHeight - pyramidH) / 2;
+  const layerH = pyramidH / N;
+  const labelFont = clamp(
+    Math.round(layerH * 0.38),
+    LABEL_FONT_MIN,
+    LABEL_FONT_MAX
+  );
+  const descFont = clamp(
+    Math.round(layerH * 0.22),
+    DESC_FONT_MIN,
+    DESC_FONT_MAX
+  );
+  const descLineHeight = Math.round(descFont * 1.35);
+  const pyramidRightEdge = pyramidCx + baseWidth / 2;
+  const pyramidLeftEdge = pyramidCx - baseWidth / 2;
+  const rightAccentX = pyramidRightEdge + DESC_GAP;
+  const rightTextX = rightAccentX + DESC_ACCENT_WIDTH + DESC_ACCENT_GAP;
+  const rightTextWidth = Math.max(80, width - sideMargin - rightTextX);
+  const leftAccentX = pyramidLeftEdge - DESC_GAP - DESC_ACCENT_WIDTH;
+  const leftTextWidth = Math.max(
+    80,
+    leftAccentX - DESC_ACCENT_GAP - sideMargin
+  );
+  const leftTextX = sideMargin;
+  const wraps = layers.map((layer, i) => {
+    if (layer.description.length === 0) {
+      return { allLines: [], overflows: false, shortLineCount: 0 };
+    }
+    const side = alternate ? i % 2 === 0 ? "right" : "left" : "right";
+    const colWidth = side === "right" ? rightTextWidth : leftTextWidth;
+    const wrapped = [];
+    for (const line11 of layer.description) {
+      wrapped.push(...wrapText5(line11, colWidth, descFont));
+    }
+    const bandCap = Math.max(1, Math.floor(layerH / descLineHeight) - 0);
+    const overflows = wrapped.length > bandCap;
+    const shortLineCount = overflows ? bandCap : wrapped.length;
+    return { allLines: wrapped, overflows, shortLineCount };
+  });
+  return {
+    alternate,
+    baseWidth,
+    pyramidCx,
+    pyramidTop,
+    pyramidH,
+    layerH,
+    labelFont,
+    descFont,
+    descLineHeight,
+    rightTextX,
+    rightTextWidth,
+    leftTextX,
+    leftTextWidth,
+    rightAccentX,
+    leftAccentX,
+    wraps
+  };
+}
+function halfWidthAt(edgeIdx, n, baseWidth, inverted) {
+  const topNarrow = !inverted;
+  const frac = topNarrow ? edgeIdx / n : (n - edgeIdx) / n;
+  return frac * baseWidth / 2;
+}
+function renderLayerDescriptions(parentG, layer, side, wrap, layout, midY, accentColor, palette, topBound, bottomBound, onClickItem) {
+  const { descFont, descLineHeight } = layout;
+  const accentX = side === "right" ? layout.rightAccentX : layout.leftAccentX;
+  const textX = side === "right" ? layout.rightTextX : layout.leftTextX;
+  const textAnchor = side === "right" ? "start" : "end";
+  const textLineX = side === "right" ? textX : layout.leftAccentX - DESC_ACCENT_GAP;
+  const availableH = bottomBound - topBound;
+  const fullMaxLines = Math.max(1, Math.floor(availableH / descLineHeight));
+  const fullLines = truncateWithEllipsis(wrap.allLines, fullMaxLines);
+  if (!wrap.overflows) {
+    renderDescriptionVariant({
+      parentG,
+      layer,
+      lines: wrap.allLines,
+      className: "pyramid-desc",
+      accentX,
+      accentColor,
+      textX: textLineX,
+      textAnchor,
+      midY,
+      descFont,
+      descLineHeight,
+      palette,
+      topBound,
+      bottomBound,
+      onClickItem,
+      variant: "short"
+    });
+    return;
+  }
+  const shortLines = buildShortLines(wrap);
+  renderDescriptionVariant({
+    parentG,
+    layer,
+    lines: shortLines,
+    className: "pyramid-desc pyramid-desc-short",
+    accentX,
+    accentColor,
+    textX: textLineX,
+    textAnchor,
+    midY,
+    descFont,
+    descLineHeight,
+    palette,
+    topBound,
+    bottomBound,
+    onClickItem,
+    variant: "short"
+  });
+  renderDescriptionVariant({
+    parentG,
+    layer,
+    lines: fullLines,
+    className: "pyramid-desc pyramid-desc-full",
+    accentX,
+    accentColor,
+    textX: textLineX,
+    textAnchor,
+    midY,
+    descFont,
+    descLineHeight,
+    palette,
+    topBound,
+    bottomBound,
+    onClickItem,
+    variant: "full"
+  });
+}
+function truncateWithEllipsis(lines, maxLines) {
+  if (lines.length <= maxLines) return lines.slice();
+  const visible = lines.slice(0, maxLines);
+  if (visible.length === 0) return visible;
+  const last = visible[visible.length - 1];
+  visible[visible.length - 1] = last.endsWith("\u2026") ? last : `${last} \u2026`;
+  return visible;
+}
+function buildShortLines(wrap) {
+  if (!wrap.overflows) return wrap.allLines.slice();
+  const visible = wrap.allLines.slice(0, wrap.shortLineCount);
+  if (visible.length === 0) return [];
+  const last = visible[visible.length - 1];
+  visible[visible.length - 1] = last.endsWith("\u2026") ? last : `${last} \u2026`;
+  return visible;
+}
+function renderDescriptionVariant(args) {
+  const {
+    parentG,
+    layer,
+    lines,
+    className,
+    accentX,
+    accentColor,
+    textX,
+    textAnchor,
+    midY,
+    descFont,
+    descLineHeight,
+    palette,
+    topBound,
+    bottomBound,
+    onClickItem,
+    variant
+  } = args;
+  if (lines.length === 0) return;
+  const totalH = lines.length * descLineHeight;
+  let startY = midY - totalH / 2 + descLineHeight / 2;
+  const accentPad = Math.max(4, Math.round(descFont * 0.3));
+  const blockTop = startY - descLineHeight / 2 - accentPad;
+  const blockBottom = startY + (lines.length - 1) * descLineHeight + descLineHeight / 2 + accentPad;
+  let shift = 0;
+  if (blockTop < topBound) shift = topBound - blockTop;
+  else if (blockBottom > bottomBound) shift = bottomBound - blockBottom;
+  startY += shift;
+  const accentTop = startY - descLineHeight / 2 - accentPad;
+  const accentH = totalH + accentPad * 2;
+  const descG = parentG.append("g").attr("class", className).attr("data-line-number", layer.lineNumber).attr("data-variant", variant);
+  if (onClickItem) {
+    const ln = layer.lineNumber;
+    descG.style("cursor", "pointer").on("click", () => onClickItem(ln));
+  }
+  descG.append("rect").attr("x", accentX).attr("y", accentTop).attr("width", DESC_ACCENT_WIDTH).attr("height", accentH).attr("rx", DESC_ACCENT_WIDTH / 2).attr("fill", accentColor);
+  for (let j = 0; j < lines.length; j++) {
+    const t = descG.append("text").attr("x", textX).attr("y", startY + j * descLineHeight).attr("dy", "0.35em").attr("text-anchor", textAnchor).attr("fill", palette.text).attr("font-family", FONT_FAMILY).attr("font-size", descFont).attr("font-weight", j === 0 ? 500 : 400);
+    renderInlineText(t, lines[j], palette);
+  }
+}
+function wrapText5(line11, maxWidth, fontSize) {
+  if (line11 === "") return [""];
+  const avgCharW = fontSize * CHAR_WIDTH_RATIO4;
+  const maxChars = Math.max(8, Math.floor(maxWidth / avgCharW));
+  const bulletMatch = line11.match(/^(\s*(?:•|-)\s+)(.*)$/);
+  const indent = bulletMatch ? bulletMatch[1] : "";
+  const body = bulletMatch ? bulletMatch[2] : line11;
+  const hangingIndent = " ".repeat(indent.length);
+  const words = body.split(/\s+/);
+  const out = [];
+  let current = indent;
+  for (const word of words) {
+    if (word === "") continue;
+    const tentative = current.length === indent.length ? current + word : `${current} ${word}`;
+    if (tentative.length <= maxChars) {
+      current = tentative;
+    } else {
+      if (current.length > indent.length) out.push(current);
+      if (word.length > maxChars - hangingIndent.length) {
+        let remaining = word;
+        while (remaining.length > maxChars - hangingIndent.length) {
+          const slice = remaining.slice(0, maxChars - hangingIndent.length);
+          out.push(hangingIndent + slice);
+          remaining = remaining.slice(maxChars - hangingIndent.length);
+        }
+        current = remaining.length > 0 ? hangingIndent + remaining : "";
+      } else {
+        current = hangingIndent + word;
+      }
+    }
+  }
+  if (current.length > (out.length === 0 ? 0 : indent.length)) {
+    if (current.trim().length > 0) out.push(current);
+  }
+  return out.length > 0 ? out : [line11];
+}
+function clamp(x, lo, hi) {
+  return Math.max(lo, Math.min(hi, x));
+}
+var d3Selection17, TITLE_AREA_HEIGHT2, H_MARGIN_FRAC, V_MARGIN, BASE_WIDTH_FRAC_NO_DESC, PYRAMID_SHARE_WITH_DESC, PYRAMID_SHARE_ALTERNATE, PITCH_RATIO, DESC_GAP, DESC_ACCENT_WIDTH, DESC_ACCENT_GAP, CHAR_WIDTH_RATIO4, LABEL_FONT_MIN, LABEL_FONT_MAX, DESC_FONT_MIN, DESC_FONT_MAX;
+var init_renderer15 = __esm({
+  "src/pyramid/renderer.ts"() {
+    "use strict";
+    d3Selection17 = __toESM(require("d3-selection"), 1);
+    init_fonts();
+    init_title_constants();
+    init_color_utils();
+    init_colors();
+    init_inline_markdown();
+    TITLE_AREA_HEIGHT2 = 50;
+    H_MARGIN_FRAC = 0.03;
+    V_MARGIN = 16;
+    BASE_WIDTH_FRAC_NO_DESC = 0.78;
+    PYRAMID_SHARE_WITH_DESC = 0.58;
+    PYRAMID_SHARE_ALTERNATE = 0.42;
+    PITCH_RATIO = 0.85;
+    DESC_GAP = 28;
+    DESC_ACCENT_WIDTH = 3;
+    DESC_ACCENT_GAP = 12;
+    CHAR_WIDTH_RATIO4 = 0.55;
+    LABEL_FONT_MIN = 12;
+    LABEL_FONT_MAX = 22;
+    DESC_FONT_MIN = 11;
+    DESC_FONT_MAX = 15;
+  }
+});
+
 // src/sequence/collapse.ts
 function applyCollapseProjection(parsed, collapsedGroups) {
   if (collapsedGroups.size === 0) {
@@ -33733,8 +34531,8 @@ var init_tag_resolution = __esm({
 });
 
 // src/sequence/renderer.ts
-var renderer_exports15 = {};
-__export(renderer_exports15, {
+var renderer_exports16 = {};
+__export(renderer_exports16, {
   applyGroupOrdering: () => applyGroupOrdering,
   applyPositionOverrides: () => applyPositionOverrides,
   buildNoteMessageMap: () => buildNoteMessageMap,
@@ -34101,7 +34899,7 @@ function applyGroupOrdering(participants, groups, messages = []) {
   return result;
 }
 function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateToLine, options) {
-  d3Selection17.select(container).selectAll("*").remove();
+  d3Selection18.select(container).selectAll("*").remove();
   const { title, options: parsedOptions } = parsed;
   const effectiveCollapsedGroups = /* @__PURE__ */ new Set();
   for (const group of parsed.groups) {
@@ -34542,7 +35340,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
   participants.forEach((p, i) => {
     participantX.set(p.id, offsetX + i * PARTICIPANT_GAP);
   });
-  const svg = d3Selection17.select(container).append("svg").attr("width", "100%").attr("height", totalHeight).attr("viewBox", `0 0 ${svgWidth} ${totalHeight}`).attr("preserveAspectRatio", "xMidYMin meet").attr("class", "sequence-diagram").style("font-family", FONT_FAMILY);
+  const svg = d3Selection18.select(container).append("svg").attr("width", "100%").attr("height", totalHeight).attr("viewBox", `0 0 ${svgWidth} ${totalHeight}`).attr("preserveAspectRatio", "xMidYMin meet").attr("class", "sequence-diagram").style("font-family", FONT_FAMILY);
   const defs = svg.append("defs");
   defs.append("marker").attr("id", "seq-arrowhead").attr("viewBox", `0 0 ${ARROWHEAD_SIZE} ${ARROWHEAD_SIZE}`).attr("refX", ARROWHEAD_SIZE).attr("refY", ARROWHEAD_SIZE / 2).attr("markerWidth", ARROWHEAD_SIZE).attr("markerHeight", ARROWHEAD_SIZE).attr("orient", "auto").append("polygon").attr(
     "points",
@@ -34787,7 +35585,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
               firstBranchStep = Math.min(firstBranchStep, first);
           }
           if (firstBranchStep < Infinity) {
-            const dividerY = stepY(firstBranchStep) - stepSpacing / 2;
+            const dividerY = stepY(firstBranchStep) - BLOCK_HEADER_SPACE;
             deferredLines.push({
               x1: frameX,
               y1: dividerY,
@@ -34814,7 +35612,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
             firstElseStep = Math.min(firstElseStep, first);
         }
         if (firstElseStep < Infinity) {
-          const dividerY = stepY(firstElseStep) - stepSpacing / 2;
+          const dividerY = stepY(firstElseStep) - BLOCK_HEADER_SPACE;
           deferredLines.push({
             x1: frameX,
             y1: dividerY,
@@ -35272,11 +36070,11 @@ function renderParticipant(svg, participant, cx, cy, palette, isDark, color, tag
     });
   }
 }
-var d3Selection17, PARTICIPANT_GAP, PARTICIPANT_BOX_WIDTH, PARTICIPANT_BOX_HEIGHT, TOP_MARGIN, TITLE_HEIGHT8, PARTICIPANT_Y_OFFSET, SERVICE_BORDER_RADIUS, MESSAGE_START_OFFSET, LIFELINE_TAIL, ARROWHEAD_SIZE, NOTE_MAX_W, NOTE_FOLD, NOTE_PAD_H, NOTE_PAD_V, NOTE_FONT_SIZE, NOTE_LINE_H, NOTE_GAP, NOTE_CHAR_W, NOTE_CHARS_PER_LINE, COLLAPSED_NOTE_H, COLLAPSED_NOTE_W, ACTIVATION_WIDTH, SELF_CALL_HEIGHT, SELF_CALL_WIDTH, NOTE_LANE_MAX, LABEL_CHAR_WIDTH, LABEL_MAX_CHARS, fill, stroke, SW, W, H;
-var init_renderer15 = __esm({
+var d3Selection18, PARTICIPANT_GAP, PARTICIPANT_BOX_WIDTH, PARTICIPANT_BOX_HEIGHT, TOP_MARGIN, TITLE_HEIGHT8, PARTICIPANT_Y_OFFSET, SERVICE_BORDER_RADIUS, MESSAGE_START_OFFSET, LIFELINE_TAIL, ARROWHEAD_SIZE, NOTE_MAX_W, NOTE_FOLD, NOTE_PAD_H, NOTE_PAD_V, NOTE_FONT_SIZE, NOTE_LINE_H, NOTE_GAP, NOTE_CHAR_W, NOTE_CHARS_PER_LINE, COLLAPSED_NOTE_H, COLLAPSED_NOTE_W, ACTIVATION_WIDTH, SELF_CALL_HEIGHT, SELF_CALL_WIDTH, NOTE_LANE_MAX, LABEL_CHAR_WIDTH, LABEL_MAX_CHARS, fill, stroke, SW, W, H;
+var init_renderer16 = __esm({
   "src/sequence/renderer.ts"() {
     "use strict";
-    d3Selection17 = __toESM(require("d3-selection"), 1);
+    d3Selection18 = __toESM(require("d3-selection"), 1);
     init_color_utils();
     init_inline_markdown();
     init_fonts();
@@ -35334,15 +36132,15 @@ function renderChartTitle(svg, title, titleLineNumber, width, textColor, onClick
     titleEl.attr("data-line-number", titleLineNumber);
     if (onClickItem) {
       titleEl.on("click", () => onClickItem(titleLineNumber)).on("mouseenter", function() {
-        d3Selection18.select(this).attr("opacity", 0.7);
+        d3Selection19.select(this).attr("opacity", 0.7);
       }).on("mouseleave", function() {
-        d3Selection18.select(this).attr("opacity", 1);
+        d3Selection19.select(this).attr("opacity", 1);
       });
     }
   }
 }
 function initD3Chart(container, palette, exportDims) {
-  d3Selection18.select(container).selectAll(":not([data-d3-tooltip])").remove();
+  d3Selection19.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const width = exportDims?.width ?? container.clientWidth;
   const height = exportDims?.height ?? container.clientHeight;
   if (width <= 0 || height <= 0) return null;
@@ -35350,7 +36148,7 @@ function initD3Chart(container, palette, exportDims) {
   const mutedColor = palette.border;
   const bgColor = palette.bg;
   const colors = getSeriesColors(palette);
-  const svg = d3Selection18.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
+  const svg = d3Selection19.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
   return { svg, width, height, textColor, mutedColor, bgColor, colors };
 }
 function parseTimelineDate(s) {
@@ -36693,14 +37491,14 @@ function renderArcDiagram(container, parsed, palette, _isDark, onClickItem, expo
   function handleMouseEnter(hovered) {
     const connected = neighbors.get(hovered);
     g.selectAll(".arc-link").each(function() {
-      const el = d3Selection18.select(this);
+      const el = d3Selection19.select(this);
       const src = el.attr("data-source");
       const tgt = el.attr("data-target");
       const isRelated = src === hovered || tgt === hovered;
       el.attr("stroke-opacity", isRelated ? 0.85 : FADE_OPACITY2);
     });
     g.selectAll(".arc-node").each(function() {
-      const el = d3Selection18.select(this);
+      const el = d3Selection19.select(this);
       const name = el.attr("data-node");
       const isRelated = name === hovered || connected.has(name);
       el.attr("opacity", isRelated ? 1 : FADE_OPACITY2);
@@ -36725,23 +37523,23 @@ function renderArcDiagram(container, parsed, palette, _isDark, onClickItem, expo
     const members = groupNodeSets.get(groupName);
     if (!members) return;
     g.selectAll(".arc-link").each(function() {
-      const el = d3Selection18.select(this);
+      const el = d3Selection19.select(this);
       const isRelated = members.has(el.attr("data-source")) || members.has(el.attr("data-target"));
       el.attr("stroke-opacity", isRelated ? 0.85 : FADE_OPACITY2);
     });
     g.selectAll(".arc-node").each(function() {
-      const el = d3Selection18.select(this);
+      const el = d3Selection19.select(this);
       el.attr("opacity", members.has(el.attr("data-node")) ? 1 : FADE_OPACITY2);
     });
     g.selectAll(".arc-group-band").each(function() {
-      const el = d3Selection18.select(this);
+      const el = d3Selection19.select(this);
       el.attr(
         "fill-opacity",
         el.attr("data-group") === groupName ? 0.18 : 0.03
       );
     });
     g.selectAll(".arc-group-label").each(function() {
-      const el = d3Selection18.select(this);
+      const el = d3Selection19.select(this);
       el.attr("fill-opacity", el.attr("data-group") === groupName ? 1 : 0.2);
     });
   }
@@ -36999,7 +37797,7 @@ function showEventDatesOnScale(g, scale, startDate, endDate, innerHeight, accent
 function hideEventDatesOnScale(g) {
   g.selectAll(".tl-event-date").remove();
   g.selectAll(".tl-scale-tick").each(function() {
-    const el = d3Selection18.select(this);
+    const el = d3Selection19.select(this);
     const isDashed = el.attr("stroke-dasharray");
     el.attr("opacity", isDashed ? 0.15 : 0.4);
   });
@@ -37077,7 +37875,7 @@ function renderTimelineGroupLegend(g, groups, groupColorMap, textColor, palette,
   }
 }
 function renderTimeline(container, parsed, palette, isDark, onClickItem, exportDims, activeTagGroup, swimlaneTagGroup, onTagStateChange, viewMode) {
-  d3Selection18.select(container).selectAll(":not([data-d3-tooltip])").remove();
+  d3Selection19.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const {
     timelineEvents,
     timelineGroups,
@@ -37175,13 +37973,13 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
   const FADE_OPACITY2 = 0.1;
   function fadeToGroup(g, groupName) {
     g.selectAll(".tl-event").each(function() {
-      const el = d3Selection18.select(this);
+      const el = d3Selection19.select(this);
       const evGroup = el.attr("data-group");
       el.attr("opacity", evGroup === groupName ? 1 : FADE_OPACITY2);
     });
     g.selectAll(".tl-legend-item, .tl-lane-header").each(
       function() {
-        const el = d3Selection18.select(this);
+        const el = d3Selection19.select(this);
         const name = el.attr("data-group");
         el.attr("opacity", name === groupName ? 1 : FADE_OPACITY2);
       }
@@ -37193,7 +37991,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
   }
   function fadeToEra(g, eraStart, eraEnd) {
     g.selectAll(".tl-event").each(function() {
-      const el = d3Selection18.select(this);
+      const el = d3Selection19.select(this);
       const date = parseFloat(el.attr("data-date"));
       const endDate = el.attr("data-end-date");
       const evEnd = endDate ? parseFloat(endDate) : date;
@@ -37205,14 +38003,14 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
       FADE_OPACITY2
     );
     g.selectAll(".tl-era").each(function() {
-      const el = d3Selection18.select(this);
+      const el = d3Selection19.select(this);
       const s = parseFloat(el.attr("data-era-start"));
       const e = parseFloat(el.attr("data-era-end"));
       const isSelf = s === eraStart && e === eraEnd;
       el.attr("opacity", isSelf ? 1 : FADE_OPACITY2);
     });
     g.selectAll(".tl-marker").each(function() {
-      const el = d3Selection18.select(this);
+      const el = d3Selection19.select(this);
       const date = parseFloat(el.attr("data-marker-date"));
       const inside = date >= eraStart && date <= eraEnd;
       el.attr("opacity", inside ? 1 : FADE_OPACITY2);
@@ -37227,7 +38025,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
   function fadeToTagValue(g, tagKey, tagValue) {
     const attrName = `data-tag-${tagKey}`;
     g.selectAll(".tl-event").each(function() {
-      const el = d3Selection18.select(this);
+      const el = d3Selection19.select(this);
       const val = el.attr(attrName);
       el.attr("opacity", val === tagValue ? 1 : FADE_OPACITY2);
     });
@@ -37240,7 +38038,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
       FADE_OPACITY2
     );
     g.selectAll(".tl-tag-legend-entry").each(function() {
-      const el = d3Selection18.select(this);
+      const el = d3Selection19.select(this);
       const entryValue = el.attr("data-legend-entry");
       if (entryValue === "__group__") return;
       const entryGroup = el.attr("data-tag-group");
@@ -37292,7 +38090,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
       const innerHeight = height - margin.top - margin.bottom;
       const laneWidth = innerWidth / laneCount;
       const yScale = d3Scale2.scaleLinear().domain([minDate - datePadding, maxDate + datePadding]).range([0, innerHeight]);
-      const svg = d3Selection18.select(container).append("svg").attr("viewBox", `0 0 ${width} ${height}`).attr("width", exportDims ? width : "100%").attr("preserveAspectRatio", "xMidYMin meet").style("background", bgColor);
+      const svg = d3Selection19.select(container).append("svg").attr("viewBox", `0 0 ${width} ${height}`).attr("width", exportDims ? width : "100%").attr("preserveAspectRatio", "xMidYMin meet").style("background", bgColor);
       const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
       renderChartTitle(
         svg,
@@ -37382,7 +38180,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
               const gradientId = `uncertain-vg-${ev.lineNumber}`;
               const strokeGradientId = `uncertain-vg-s-${ev.lineNumber}`;
               const defs = svg.select("defs").node() || svg.append("defs").node();
-              const defsEl = d3Selection18.select(defs);
+              const defsEl = d3Selection19.select(defs);
               defsEl.append("linearGradient").attr("id", gradientId).attr("x1", "0%").attr("y1", "0%").attr("x2", "0%").attr("y2", "100%").selectAll("stop").data([
                 { offset: "0%", opacity: 1 },
                 { offset: "80%", opacity: 1 },
@@ -37418,7 +38216,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
       const axisX = 20;
       const yScale = d3Scale2.scaleLinear().domain([minDate - datePadding, maxDate + datePadding]).range([0, innerHeight]);
       const sorted = timelineEvents.slice().sort((a, b) => parseTimelineDate(a.date) - parseTimelineDate(b.date));
-      const svg = d3Selection18.select(container).append("svg").attr("viewBox", `0 0 ${width} ${height}`).attr("width", exportDims ? width : "100%").attr("preserveAspectRatio", "xMidYMin meet").style("background", bgColor);
+      const svg = d3Selection19.select(container).append("svg").attr("viewBox", `0 0 ${width} ${height}`).attr("width", exportDims ? width : "100%").attr("preserveAspectRatio", "xMidYMin meet").style("background", bgColor);
       const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
       renderChartTitle(
         svg,
@@ -37507,7 +38305,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
             const gradientId = `uncertain-v-${ev.lineNumber}`;
             const strokeGradientId = `uncertain-v-s-${ev.lineNumber}`;
             const defs = svg.select("defs").node() || svg.append("defs").node();
-            const defsEl = d3Selection18.select(defs);
+            const defsEl = d3Selection19.select(defs);
             defsEl.append("linearGradient").attr("id", gradientId).attr("x1", "0%").attr("y1", "0%").attr("x2", "0%").attr("y2", "100%").selectAll("stop").data([
               { offset: "0%", opacity: 1 },
               { offset: "80%", opacity: 1 },
@@ -37575,7 +38373,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
     const totalGaps = (lanes.length - 1) * GROUP_GAP3;
     const rowH = Math.min(28, (innerHeight - totalGaps) / totalEventRows);
     const xScale = d3Scale2.scaleLinear().domain([minDate - datePadding, maxDate + datePadding]).range([0, innerWidth]);
-    const svg = d3Selection18.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
+    const svg = d3Selection19.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
     const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
     renderChartTitle(
       svg,
@@ -37688,7 +38486,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
             const gradientId = `uncertain-${ev.lineNumber}`;
             const strokeGradientId = `uncertain-s-${ev.lineNumber}`;
             const defs = svg.select("defs").node() || svg.append("defs").node();
-            const defsEl = d3Selection18.select(defs);
+            const defsEl = d3Selection19.select(defs);
             defsEl.append("linearGradient").attr("id", gradientId).attr("x1", "0%").attr("y1", "0%").attr("x2", "100%").attr("y2", "0%").selectAll("stop").data([
               { offset: "0%", opacity: 1 },
               { offset: "80%", opacity: 1 },
@@ -37736,7 +38534,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
     const innerHeight = height - margin.top - margin.bottom;
     const rowH = Math.min(28, innerHeight / sorted.length);
     const xScale = d3Scale2.scaleLinear().domain([minDate - datePadding, maxDate + datePadding]).range([0, innerWidth]);
-    const svg = d3Selection18.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
+    const svg = d3Selection19.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
     const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
     renderChartTitle(
       svg,
@@ -37845,7 +38643,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
           const gradientId = `uncertain-ts-${ev.lineNumber}`;
           const strokeGradientId = `uncertain-ts-s-${ev.lineNumber}`;
           const defs = svg.select("defs").node() || svg.append("defs").node();
-          const defsEl = d3Selection18.select(defs);
+          const defsEl = d3Selection19.select(defs);
           defsEl.append("linearGradient").attr("id", gradientId).attr("x1", "0%").attr("y1", "0%").attr("x2", "100%").attr("y2", "0%").selectAll("stop").data([
             { offset: "0%", opacity: 1 },
             { offset: "80%", opacity: 1 },
@@ -37888,7 +38686,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
     const LG_ENTRY_DOT_GAP = LEGEND_ENTRY_DOT_GAP;
     const LG_ENTRY_TRAIL = LEGEND_ENTRY_TRAIL;
     const LG_ICON_W = 20;
-    const mainSvg = d3Selection18.select(container).select("svg");
+    const mainSvg = d3Selection19.select(container).select("svg");
     const mainG = mainSvg.select("g");
     if (!mainSvg.empty() && !mainG.empty()) {
       let drawSwimlaneIcon4 = function(parent, x, y, isSwimActive) {
@@ -37961,7 +38759,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
               const tagVal = entryValue.toLowerCase();
               fadeToTagValue(mainG, tagKey, tagVal);
               mainSvg.selectAll("[data-legend-entry]").each(function() {
-                const el = d3Selection18.select(this);
+                const el = d3Selection19.select(this);
                 const ev = el.attr("data-legend-entry");
                 const eg = el.attr("data-tag-group") ?? el.node()?.closest?.("[data-tag-group]")?.getAttribute("data-tag-group");
                 el.attr(
@@ -38014,7 +38812,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
       }, recolorEvents2 = function() {
         const colorTG = currentActiveGroup ?? swimlaneTagGroup ?? null;
         mainG.selectAll(".tl-event").each(function() {
-          const el = d3Selection18.select(this);
+          const el = d3Selection19.select(this);
           const lineNum = el.attr("data-line-number");
           const ev = lineNum ? eventByLine.get(lineNum) : void 0;
           if (!ev) return;
@@ -38112,7 +38910,7 @@ function renderWordCloud(container, parsed, palette, _isDark, onClickItem, expor
 }
 function renderWordCloudAsync(container, parsed, palette, _isDark, exportDims) {
   return new Promise((resolve) => {
-    d3Selection18.select(container).selectAll(":not([data-d3-tooltip])").remove();
+    d3Selection19.select(container).selectAll(":not([data-d3-tooltip])").remove();
     const { words, title, cloudOptions } = parsed;
     if (words.length === 0) {
       resolve();
@@ -38139,7 +38937,7 @@ function renderWordCloudAsync(container, parsed, palette, _isDark, exportDims) {
       return minSize + Math.sqrt(t) * (maxSize - minSize);
     };
     const rotateFn = getRotateFn(cloudOptions.rotate);
-    const svg = d3Selection18.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
+    const svg = d3Selection19.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
     renderChartTitle(svg, title, parsed.titleLineNumber, width, textColor);
     const g = svg.append("g").attr(
       "transform",
@@ -38641,8 +39439,8 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem, exportD
   const LABEL_MAX_FONT = 48;
   const LABEL_MIN_FONT = 14;
   const LABEL_PAD3 = 40;
-  const CHAR_WIDTH_RATIO4 = 0.6;
-  const estTextWidth = (text, fontSize) => text.length * fontSize * CHAR_WIDTH_RATIO4;
+  const CHAR_WIDTH_RATIO5 = 0.6;
+  const estTextWidth = (text, fontSize) => text.length * fontSize * CHAR_WIDTH_RATIO5;
   const quadrantLabelLayout = (text, qw2, qh2) => {
     const availW = qw2 - LABEL_PAD3;
     const availH = qh2 - LABEL_PAD3;
@@ -38705,7 +39503,7 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem, exportD
     (d) => onClickItem && d.label?.lineNumber ? "pointer" : "default"
   ).each(function(d) {
     const layout = labelLayouts.get(d.label.text);
-    const el = d3Selection18.select(this);
+    const el = d3Selection19.select(this);
     if (layout.lines.length === 1) {
       el.text(layout.lines[0]);
     } else {
@@ -38721,9 +39519,9 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem, exportD
     quadrantLabelTexts.on("click", (_, d) => {
       if (d.label?.lineNumber) onClickItem(d.label.lineNumber);
     }).on("mouseenter", function() {
-      d3Selection18.select(this).attr("opacity", 0.7);
+      d3Selection19.select(this).attr("opacity", 0.7);
     }).on("mouseleave", function() {
-      d3Selection18.select(this).attr("opacity", 1);
+      d3Selection19.select(this).attr("opacity", 1);
     });
   }
   if (quadrantXAxis) {
@@ -38744,9 +39542,9 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem, exportD
     if (onClickItem && quadrantXAxisLineNumber) {
       [xLowLabel, xHighLabel].forEach((label) => {
         label.on("click", () => onClickItem(quadrantXAxisLineNumber)).on("mouseenter", function() {
-          d3Selection18.select(this).attr("opacity", 0.7);
+          d3Selection19.select(this).attr("opacity", 0.7);
         }).on("mouseleave", function() {
-          d3Selection18.select(this).attr("opacity", 1);
+          d3Selection19.select(this).attr("opacity", 1);
         });
       });
     }
@@ -38771,9 +39569,9 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem, exportD
     if (onClickItem && quadrantYAxisLineNumber) {
       [yLowLabel, yHighLabel].forEach((label) => {
         label.on("click", () => onClickItem(quadrantYAxisLineNumber)).on("mouseenter", function() {
-          d3Selection18.select(this).attr("opacity", 0.7);
+          d3Selection19.select(this).attr("opacity", 0.7);
         }).on("mouseleave", function() {
-          d3Selection18.select(this).attr("opacity", 1);
+          d3Selection19.select(this).attr("opacity", 1);
         });
       });
     }
@@ -38790,7 +39588,7 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem, exportD
   const POINT_LABEL_FONT_SIZE = 12;
   const quadrantLabelObstacles = quadrantDefsWithLabel.map((d) => {
     const layout = labelLayouts.get(d.label.text);
-    const totalW = Math.max(...layout.lines.map((l) => l.length)) * layout.fontSize * CHAR_WIDTH_RATIO4;
+    const totalW = Math.max(...layout.lines.map((l) => l.length)) * layout.fontSize * CHAR_WIDTH_RATIO5;
     const totalH = layout.lines.length * layout.fontSize * 1.2;
     return {
       x: d.labelX - totalW / 2,
@@ -38850,7 +39648,7 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem, exportD
     pointsG.selectAll("g.point-group").each(function(_2, i) {
       const pt = quadrantPoints[i];
       const ptQuad = getPointQuadrant(pt.x, pt.y);
-      d3Selection18.select(this).attr("opacity", ptQuad === d.position ? 1 : 0.2);
+      d3Selection19.select(this).attr("opacity", ptQuad === d.position ? 1 : 0.2);
     });
   }).on("mouseleave", () => {
     quadrantRects.attr("opacity", 1);
@@ -39369,6 +40167,22 @@ async function renderForExport(content, theme, palette, viewState, options) {
     );
     return finalizeSvgExport(container2, theme, effectivePalette2);
   }
+  if (detectedType === "pyramid") {
+    const { parsePyramid: parsePyramid2 } = await Promise.resolve().then(() => (init_parser16(), parser_exports16));
+    const { renderPyramidForExport: renderPyramidForExport2 } = await Promise.resolve().then(() => (init_renderer15(), renderer_exports15));
+    const effectivePalette2 = await resolveExportPalette(theme, palette);
+    const pyramidParsed = parsePyramid2(content);
+    if (pyramidParsed.error || pyramidParsed.layers.length === 0) return "";
+    const container2 = createExportContainer(EXPORT_WIDTH, EXPORT_HEIGHT);
+    renderPyramidForExport2(
+      container2,
+      pyramidParsed,
+      effectivePalette2,
+      theme === "dark",
+      { width: EXPORT_WIDTH, height: EXPORT_HEIGHT }
+    );
+    return finalizeSvgExport(container2, theme, effectivePalette2);
+  }
   const parsed = parseVisualization(content, palette);
   if (parsed.error && parsed.type !== "sequence") {
     const looksLikeSequence2 = /->|~>|<-/.test(content);
@@ -39392,7 +40206,7 @@ async function renderForExport(content, theme, palette, viewState, options) {
   };
   if (parsed.type === "sequence") {
     const { parseSequenceDgmo: parseSequenceDgmo2 } = await Promise.resolve().then(() => (init_parser(), parser_exports));
-    const { renderSequenceDiagram: renderSequenceDiagram2 } = await Promise.resolve().then(() => (init_renderer15(), renderer_exports15));
+    const { renderSequenceDiagram: renderSequenceDiagram2 } = await Promise.resolve().then(() => (init_renderer16(), renderer_exports16));
     const seqParsed = parseSequenceDgmo2(content);
     if (seqParsed.error || seqParsed.participants.length === 0) return "";
     renderSequenceDiagram2(
@@ -39461,12 +40275,12 @@ async function renderForExport(content, theme, palette, viewState, options) {
   }
   return finalizeSvgExport(container, theme, effectivePalette);
 }
-var d3Scale2, d3Selection18, d3Shape10, d3Array, import_d3_cloud, DEFAULT_CLOUD_OPTIONS, STOP_WORDS, SLOPE_MARGIN, SLOPE_LABEL_FONT_SIZE, SLOPE_CHAR_WIDTH, ARC_MARGIN, EXPORT_WIDTH, EXPORT_HEIGHT;
+var d3Scale2, d3Selection19, d3Shape10, d3Array, import_d3_cloud, DEFAULT_CLOUD_OPTIONS, STOP_WORDS, SLOPE_MARGIN, SLOPE_LABEL_FONT_SIZE, SLOPE_CHAR_WIDTH, ARC_MARGIN, EXPORT_WIDTH, EXPORT_HEIGHT;
 var init_d3 = __esm({
   "src/d3.ts"() {
     "use strict";
     d3Scale2 = __toESM(require("d3-scale"), 1);
-    d3Selection18 = __toESM(require("d3-selection"), 1);
+    d3Selection19 = __toESM(require("d3-selection"), 1);
     d3Shape10 = __toESM(require("d3-shape"), 1);
     d3Array = __toESM(require("d3-array"), 1);
     import_d3_cloud = __toESM(require("d3-cloud"), 1);
@@ -40071,6 +40885,7 @@ __export(index_exports, {
   ALL_CHART_TYPES: () => ALL_CHART_TYPES,
   ARROW_DIAGNOSTIC_CODES: () => ARROW_DIAGNOSTIC_CODES,
   CHART_TYPES: () => CHART_TYPES,
+  CHART_TYPE_DESCRIPTIONS: () => CHART_TYPE_DESCRIPTIONS,
   COMPLETION_REGISTRY: () => COMPLETION_REGISTRY,
   ENTITY_TYPES: () => ENTITY_TYPES,
   INFRA_BEHAVIOR_KEYS: () => INFRA_BEHAVIOR_KEYS,
@@ -40118,8 +40933,10 @@ __export(index_exports, {
   encodeViewState: () => encodeViewState,
   extractDiagramSymbols: () => extractDiagramSymbols,
   extractTagDeclarations: () => extractTagDeclarations,
+  focusOrgTree: () => focusOrgTree,
   formatDateLabel: () => formatDateLabel,
   formatDgmoError: () => formatDgmoError,
+  getAllChartTypes: () => getAllChartTypes,
   getAvailablePalettes: () => getAvailablePalettes,
   getExtendedChartLegendGroups: () => getExtendedChartLegendGroups,
   getLegendReservedHeight: () => getLegendReservedHeight,
@@ -40190,7 +41007,9 @@ __export(index_exports, {
   parseKanban: () => parseKanban,
   parseMindmap: () => parseMindmap,
   parseOrg: () => parseOrg,
+  parsePyramid: () => parsePyramid,
   parseSequenceDgmo: () => parseSequenceDgmo,
+  parseSequenceDiagram: () => parseSequenceDgmo,
   parseSitemap: () => parseSitemap,
   parseState: () => parseState,
   parseTechRadar: () => parseTechRadar,
@@ -40233,6 +41052,8 @@ __export(index_exports, {
   renderMindmapForExport: () => renderMindmapForExport,
   renderOrg: () => renderOrg,
   renderOrgForExport: () => renderOrgForExport,
+  renderPyramid: () => renderPyramid,
+  renderPyramidForExport: () => renderPyramidForExport,
   renderQuadrant: () => renderQuadrant,
   renderQuadrantFocus: () => renderQuadrantFocus,
   renderQuadrantFocusForExport: () => renderQuadrantFocusForExport,
@@ -40303,8 +41124,7 @@ async function render(content, options) {
   const theme = options?.theme ?? "light";
   const paletteName = options?.palette ?? "nord";
   const paletteColors = getPalette(paletteName)[theme === "dark" ? "dark" : "light"];
-  const { diagnostics } = parseDgmo(content);
-  const chartType = parseDgmoChartType(content);
+  const { diagnostics, chartType } = parseDgmo(content);
   const category = chartType ? getRenderCategory(chartType) : null;
   const viewState = options?.viewState ?? (options?.legendState ? {
     tag: options.legendState.activeGroup ?? void 0,
@@ -40625,6 +41445,8 @@ init_renderer14();
 init_parser15();
 init_layout12();
 init_renderer13();
+init_parser16();
+init_renderer15();
 
 // src/org/resolver.ts
 init_diagnostics();
@@ -40960,7 +41782,7 @@ init_legend_constants();
 init_legend_d3();
 init_legend_layout();
 init_d3();
-init_renderer15();
+init_renderer16();
 init_collapse4();
 init_colors();
 init_palettes();
@@ -41063,6 +41885,7 @@ init_flowchart_parser();
 init_parser8();
 init_parser2();
 init_parsing();
+init_dgmo_router();
 var extractorRegistry = /* @__PURE__ */ new Map();
 function registerExtractor(kind, fn) {
   extractorRegistry.set(kind, fn);
@@ -41378,51 +42201,16 @@ var COMPLETION_REGISTRY = /* @__PURE__ */ new Map([
       "no-legend": { description: "Hide the score legend" },
       persona: { description: "Define the journey persona" }
     })
+  ],
+  [
+    "pyramid",
+    withGlobals({
+      inverted: { description: "Flip apex to the bottom (funnel orientation)" },
+      color: { description: "Override layer color (pipe metadata)" },
+      description: { description: "Layer description (pipe or indented body)" }
+    })
   ]
 ]);
-var CHART_TYPE_DESCRIPTIONS = {
-  // Data charts
-  bar: "Bar chart",
-  line: "Line chart",
-  pie: "Pie chart",
-  doughnut: "Doughnut chart",
-  area: "Area chart",
-  "polar-area": "Polar area chart",
-  radar: "Radar chart",
-  "bar-stacked": "Stacked bar chart",
-  // Extended charts
-  scatter: "Scatter plot",
-  heatmap: "Heatmap",
-  sankey: "Sankey flow diagram",
-  chord: "Chord diagram",
-  funnel: "Funnel chart",
-  function: "Mathematical function plot",
-  // Visualizations
-  slope: "Slope chart",
-  wordcloud: "Word cloud",
-  arc: "Arc diagram",
-  timeline: "Timeline",
-  venn: "Venn diagram",
-  quadrant: "Quadrant chart",
-  // Diagrams
-  sequence: "Sequence diagram",
-  flowchart: "Flowchart",
-  class: "Class diagram",
-  er: "Entity-relationship diagram",
-  org: "Organization chart",
-  kanban: "Kanban board",
-  c4: "C4 architecture diagram",
-  state: "State diagram",
-  sitemap: "Sitemap diagram",
-  infra: "Infrastructure diagram",
-  gantt: "Gantt chart",
-  "boxes-and-lines": "Boxes and lines diagram",
-  mindmap: "Mindmap diagram",
-  wireframe: "UI wireframe diagram",
-  "tech-radar": "Technology adoption radar (ThoughtWorks style)",
-  cycle: "Cycle diagram (circular process flow)",
-  "journey-map": "User journey map with emotion curve"
-};
 var CHART_TYPES = [...ALL_CHART_TYPES].filter((t) => t !== "multi-line").map((name) => ({
   name,
   description: CHART_TYPE_DESCRIPTIONS[name] ?? name
@@ -42014,6 +42802,7 @@ init_parsing();
   ALL_CHART_TYPES,
   ARROW_DIAGNOSTIC_CODES,
   CHART_TYPES,
+  CHART_TYPE_DESCRIPTIONS,
   COMPLETION_REGISTRY,
   ENTITY_TYPES,
   INFRA_BEHAVIOR_KEYS,
@@ -42061,8 +42850,10 @@ init_parsing();
   encodeViewState,
   extractDiagramSymbols,
   extractTagDeclarations,
+  focusOrgTree,
   formatDateLabel,
   formatDgmoError,
+  getAllChartTypes,
   getAvailablePalettes,
   getExtendedChartLegendGroups,
   getLegendReservedHeight,
@@ -42133,7 +42924,9 @@ init_parsing();
   parseKanban,
   parseMindmap,
   parseOrg,
+  parsePyramid,
   parseSequenceDgmo,
+  parseSequenceDiagram,
   parseSitemap,
   parseState,
   parseTechRadar,
@@ -42176,6 +42969,8 @@ init_parsing();
   renderMindmapForExport,
   renderOrg,
   renderOrgForExport,
+  renderPyramid,
+  renderPyramidForExport,
   renderQuadrant,
   renderQuadrantFocus,
   renderQuadrantFocusForExport,