@diagrammo/dgmo 0.14.1 → 0.15.1

package/dist/auto.mjs

@@ -1759,6 +1759,7 @@ __export(palettes_exports, {
   monokaiPalette: () => monokaiPalette,
   nordPalette: () => nordPalette,
   oneDarkPalette: () => oneDarkPalette,
+  palettes: () => palettes,
   registerPalette: () => registerPalette,
   rosePinePalette: () => rosePinePalette,
   shade: () => shade,
@@ -1767,6 +1768,7 @@ __export(palettes_exports, {
   tint: () => tint,
   tokyoNightPalette: () => tokyoNightPalette
 });
+var palettes;
 var init_palettes = __esm({
   "src/palettes/index.ts"() {
     "use strict";
@@ -1782,6 +1784,28 @@ var init_palettes = __esm({
     init_tokyo_night();
     init_dracula();
     init_monokai();
+    init_bold();
+    init_catppuccin();
+    init_dracula();
+    init_gruvbox();
+    init_monokai();
+    init_nord();
+    init_one_dark();
+    init_rose_pine();
+    init_solarized();
+    init_tokyo_night();
+    palettes = {
+      nord: nordPalette,
+      catppuccin: catppuccinPalette,
+      solarized: solarizedPalette,
+      gruvbox: gruvboxPalette,
+      tokyoNight: tokyoNightPalette,
+      oneDark: oneDarkPalette,
+      rosePine: rosePinePalette,
+      dracula: draculaPalette,
+      monokai: monokaiPalette,
+      bold: boldPalette
+    };
   }
 });
 
@@ -2212,7 +2236,7 @@ function injectDefaultTagMetadata(entities, tagGroups, skip) {
     }
   }
 }
-function resolveActiveTagGroup(_tagGroups, explicitActiveTag, programmaticOverride) {
+function resolveActiveTagGroup(tagGroups, explicitActiveTag, programmaticOverride) {
   if (programmaticOverride !== void 0) {
     if (!programmaticOverride) return null;
     if (programmaticOverride.toLowerCase() === "none") return null;
@@ -2222,6 +2246,7 @@ function resolveActiveTagGroup(_tagGroups, explicitActiveTag, programmaticOverri
     if (explicitActiveTag.toLowerCase() === "none") return null;
     return explicitActiveTag;
   }
+  if (tagGroups.length > 0) return tagGroups[0].name;
   return null;
 }
 function matchTagBlockHeading(trimmed) {
@@ -5302,12 +5327,6 @@ function parseClassDiagram(content, palette) {
     diagnostics: [],
     error: null
   };
-  const _fail = (line12, message) => {
-    const diag = makeDgmoError(line12, message);
-    result.diagnostics.push(diag);
-    result.error = formatDgmoError(diag);
-    return result;
-  };
   const classMap = /* @__PURE__ */ new Map();
   const nameAliasMap = /* @__PURE__ */ new Map();
   function resolveAliasName(token) {
@@ -5702,12 +5721,6 @@ function parseERDiagram(content, palette) {
     diagnostics: [],
     error: null
   };
-  const _fail = (line12, message) => {
-    const diag = makeDgmoError(line12, message);
-    result.diagnostics.push(diag);
-    result.error = formatDgmoError(diag);
-    return result;
-  };
   const pushError = (line12, message) => {
     const diag = makeDgmoError(line12, message);
     result.diagnostics.push(diag);
@@ -7166,7 +7179,7 @@ function buildSankeyOption(parsed, textColor, colors, bg, titleConfig) {
     ]
   };
 }
-function buildChordOption(parsed, palette, isDark, textColor, colors, bg, titleConfig) {
+function buildChordOption(parsed, palette, isDark, textColor, colors, _bg, titleConfig) {
   const nodeSet = /* @__PURE__ */ new Set();
   if (parsed.links) {
     for (const link of parsed.links) {
@@ -7280,7 +7293,7 @@ function evaluateExpression(expr, x) {
     return NaN;
   }
 }
-function buildFunctionOption(parsed, palette, isDark, textColor, axisLineColor, gridOpacity, colors, titleConfig) {
+function buildFunctionOption(parsed, palette, _isDark, textColor, axisLineColor, gridOpacity, colors, titleConfig) {
   const xRange = parsed.xRange ?? { min: -10, max: 10 };
   const samples = 200;
   const step = (xRange.max - xRange.min) / samples;
@@ -7953,7 +7966,7 @@ function buildHeatmapOption(parsed, palette, isDark, textColor, axisLineColor, t
     ]
   };
 }
-function buildFunnelOption(parsed, palette, isDark, textColor, colors, bg, titleConfig) {
+function buildFunnelOption(parsed, palette, isDark, textColor, colors, _bg, titleConfig) {
   const sorted = [...parsed.data].sort((a, b) => b.value - a.value);
   const data = sorted.map((d) => {
     const stroke2 = d.color ?? colors[parsed.data.indexOf(d) % colors.length];
@@ -8236,7 +8249,7 @@ function wrapLabel(text, maxChars) {
   if (current) lines.push(current);
   return lines.join("\n");
 }
-function buildBarOption(parsed, palette, isDark, textColor, axisLineColor, splitLineColor, gridOpacity, colors, bg, titleConfig, chartWidth) {
+function buildBarOption(parsed, palette, isDark, textColor, axisLineColor, splitLineColor, gridOpacity, colors, _bg, titleConfig, chartWidth) {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
   const isHorizontal = parsed.orientation === "horizontal";
   const labels = parsed.data.map((d) => d.label);
@@ -8563,7 +8576,7 @@ function pieLabelLayout(parsed) {
   if (maxLen > 18) return { outerRadius: 55, fontSize: 13 };
   return { outerRadius: 70, fontSize: 14 };
 }
-function buildPieOption(parsed, palette, isDark, textColor, colors, bg, titleConfig, isDoughnut) {
+function buildPieOption(parsed, palette, isDark, textColor, colors, _bg, titleConfig, isDoughnut) {
   const HIDE_AXES = { xAxis: { show: false }, yAxis: { show: false } };
   const data = parsed.data.map((d, i) => {
     const stroke2 = d.color ?? colors[i % colors.length];
@@ -8662,7 +8675,7 @@ function buildRadarOption(parsed, palette, isDark, textColor, gridOpacity, title
     ]
   };
 }
-function buildPolarAreaOption(parsed, palette, isDark, textColor, colors, bg, titleConfig) {
+function buildPolarAreaOption(parsed, palette, isDark, textColor, colors, _bg, titleConfig) {
   const data = parsed.data.map((d, i) => {
     const stroke2 = d.color ?? colors[i % colors.length];
     return {
@@ -8705,7 +8718,7 @@ function buildPolarAreaOption(parsed, palette, isDark, textColor, colors, bg, ti
     ]
   };
 }
-function buildBarStackedOption(parsed, palette, isDark, textColor, axisLineColor, splitLineColor, gridOpacity, colors, bg, titleConfig, chartWidth) {
+function buildBarStackedOption(parsed, palette, isDark, textColor, axisLineColor, splitLineColor, gridOpacity, colors, _bg, titleConfig, chartWidth) {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
   const isHorizontal = parsed.orientation === "horizontal";
   const seriesNames = parsed.seriesNames ?? [];
@@ -8845,8 +8858,8 @@ async function renderExtendedChartForExport(content, theme, palette) {
       const titleHeight = option.title && option.title.text ? 40 : 0;
       const legendY = 8 + titleHeight;
       const grid = option.grid;
-      const gridLeftPct = grid?.left ? parseFloat(String(grid.left)) : void 0;
-      const gridRightPct = grid?.right ? parseFloat(String(grid.right)) : void 0;
+      const gridLeftPct = grid?.["left"] ? parseFloat(String(grid["left"])) : void 0;
+      const gridRightPct = grid?.["right"] ? parseFloat(String(grid["right"])) : void 0;
       const { svg: legendSvgStr } = renderLegendSvg(legendGroups, {
         palette: effectivePalette,
         isDark,
@@ -9192,7 +9205,7 @@ function parseOrg(content, palette) {
   }
   return result;
 }
-function parseNodeLabel(trimmed, _indent, lineNumber, palette, counter, metaAliasMap = /* @__PURE__ */ new Map(), warnFn, nameAliasMap) {
+function parseNodeLabel(trimmed, _indent, lineNumber, _palette, counter, metaAliasMap = /* @__PURE__ */ new Map(), warnFn, nameAliasMap) {
   const segments = trimmed.split("|").map((s) => s.trim());
   let label = segments[0];
   const asMatch = label.match(/^(.*?)\s+as\s+([A-Za-z][A-Za-z0-9_]{0,11})\s*$/);
@@ -9441,8 +9454,8 @@ function parseKanban(content, palette) {
           columnMetadata,
           parsePipeMetadata(pipeSegments, metaAliasMap)
         );
-        if (columnMetadata.wip) {
-          const wipVal = parseInt(columnMetadata.wip, 10);
+        if (columnMetadata["wip"]) {
+          const wipVal = parseInt(columnMetadata["wip"], 10);
           if (!isNaN(wipVal)) {
             wipLimit = wipVal;
           }
@@ -9821,7 +9834,7 @@ function parseC4(content, palette) {
         );
         const shape = inferC4Shape(
           nodeName,
-          metadata.tech ?? metadata.technology
+          metadata["tech"] ?? metadata["technology"]
         );
         const dNode = {
           name: nodeName,
@@ -9924,11 +9937,11 @@ function parseC4(content, palette) {
           target = targetBody.substring(0, pipeIdx).trim();
           const metaPart = targetBody.substring(pipeIdx + 1).trim();
           const meta = parsePipeMetadata(["", metaPart], metaAliasMap);
-          if (meta.tech) {
-            technology = meta.tech;
+          if (meta["tech"]) {
+            technology = meta["tech"];
           }
-          if (meta.technology) {
-            technology = meta.technology;
+          if (meta["technology"]) {
+            technology = meta["technology"];
           }
         }
         const rel = {
@@ -10062,7 +10075,7 @@ function parseC4(content, palette) {
         metaAliasMap,
         () => pushError(lineNumber, MULTIPLE_PIPE_ERROR)
       );
-      const shape = explicitShape ?? inferC4Shape(namePart, metadata.tech ?? metadata.technology);
+      const shape = explicitShape ?? inferC4Shape(namePart, metadata["tech"] ?? metadata["technology"]);
       let isADescription;
       if ("description" in metadata) {
         const descVal = metadata["description"].trim();
@@ -10122,7 +10135,7 @@ function parseC4(content, palette) {
         metaAliasMap,
         () => pushError(lineNumber, MULTIPLE_PIPE_ERROR)
       );
-      const shape = explicitShape ?? inferC4Shape(namePart, metadata.tech ?? metadata.technology);
+      const shape = explicitShape ?? inferC4Shape(namePart, metadata["tech"] ?? metadata["technology"]);
       let prefixDescription;
       if ("description" in metadata) {
         const descVal = metadata["description"].trim();
@@ -10731,7 +10744,7 @@ function parseSitemap(content, palette) {
   }
   return result;
 }
-function parseNodeLabel2(trimmed, lineNumber, palette, counter, metaAliasMap = /* @__PURE__ */ new Map(), warnFn, _diagnostics, nameAliasMap) {
+function parseNodeLabel2(trimmed, lineNumber, _palette, counter, metaAliasMap = /* @__PURE__ */ new Map(), warnFn, _diagnostics, nameAliasMap) {
   const segments = trimmed.split("|").map((s) => s.trim());
   let label = segments[0];
   const asMatch = label.match(/^(.*?)\s+as\s+([A-Za-z][A-Za-z0-9_]{0,11})\s*$/);
@@ -10908,6 +10921,17 @@ function parseInfra(content) {
     if (!m) return { label: trimmed };
     return { label: m[1].trim(), alias: m[2] };
   }
+  const IS_A_SUFFIX = /^(.*?)\s+is\s+an?\s+[A-Za-z][\w-]*\s*$/i;
+  function peelInfraDecorations(rawName, lineNumber) {
+    const peeled = peelAlias2(rawName);
+    const m = peeled.label.match(IS_A_SUFFIX);
+    if (!m) return peeled;
+    warn2(
+      lineNumber,
+      `Infra nodes don't use 'is a <type>' \u2014 types are inferred from properties (cache-hit, buffer, drain-rate, \u2026). Drop the 'is a' suffix.`
+    );
+    return { label: m[1].trim(), alias: peeled.alias };
+  }
   function resolveTargetId(rawName) {
     const aliasResolved = nameAliasMap.get(rawName.trim());
     if (aliasResolved !== void 0) return aliasResolved;
@@ -11011,11 +11035,11 @@ function parseInfra(content) {
         continue;
       }
       if (trimmed === "animate") {
-        result.options.animate = "on";
+        result.options["animate"] = "on";
         continue;
       }
       if (trimmed === "no-animate") {
-        result.options.animate = "off";
+        result.options["animate"] = "off";
         continue;
       }
       if (tryParseSharedOption(trimmed, result.options)) {
@@ -11062,7 +11086,7 @@ function parseInfra(content) {
         finishCurrentNode();
         finishCurrentTagGroup();
         const rawName = (compMatch[1] ?? compMatch[2] ?? "").trim();
-        const peeled = peelAlias2(rawName);
+        const peeled = peelInfraDecorations(rawName, lineNumber);
         const name = peeled.label;
         const rest = compMatch[3] || "";
         const { tags } = extractPipeMetadata(rest);
@@ -11133,7 +11157,7 @@ function parseInfra(content) {
       if (compMatch) {
         finishCurrentTagGroup();
         const rawName = (compMatch[1] ?? compMatch[2] ?? "").trim();
-        const peeled = peelAlias2(rawName);
+        const peeled = peelInfraDecorations(rawName, lineNumber);
         const name = peeled.label;
         const rest = compMatch[3] || "";
         const { tags: nodeTags } = extractPipeMetadata(rest);
@@ -11169,8 +11193,8 @@ function parseInfra(content) {
         const pipeMeta = extractPipeMetadata(targetRaw);
         const targetName = pipeMeta.clean || targetRaw;
         warnUnparsedPipeMeta(targetName, lineNumber, warn2);
-        const split = pipeMeta.tags.split ? parseFloat(pipeMeta.tags.split) : null;
-        const fanoutRaw = pipeMeta.tags.fanout ? parseInt(pipeMeta.tags.fanout, 10) : null;
+        const split = pipeMeta.tags["split"] ? parseFloat(pipeMeta.tags["split"]) : null;
+        const fanoutRaw = pipeMeta.tags["fanout"] ? parseInt(pipeMeta.tags["fanout"], 10) : null;
         if (fanoutRaw !== null && fanoutRaw < 1) {
           warn2(
             lineNumber,
@@ -11201,8 +11225,8 @@ function parseInfra(content) {
         const pipeMeta = extractPipeMetadata(targetRaw);
         const targetName = pipeMeta.clean || targetRaw;
         warnUnparsedPipeMeta(targetName, lineNumber, warn2);
-        const split = pipeMeta.tags.split ? parseFloat(pipeMeta.tags.split) : null;
-        const fanoutRaw = pipeMeta.tags.fanout ? parseInt(pipeMeta.tags.fanout, 10) : null;
+        const split = pipeMeta.tags["split"] ? parseFloat(pipeMeta.tags["split"]) : null;
+        const fanoutRaw = pipeMeta.tags["fanout"] ? parseInt(pipeMeta.tags["fanout"], 10) : null;
         if (fanoutRaw !== null && fanoutRaw < 1) {
           warn2(
             lineNumber,
@@ -11236,8 +11260,8 @@ function parseInfra(content) {
         const pipeMeta = extractPipeMetadata(targetRaw);
         const targetName = pipeMeta.clean || targetRaw;
         warnUnparsedPipeMeta(targetName, lineNumber, warn2);
-        const split = pipeMeta.tags.split ? parseFloat(pipeMeta.tags.split) : null;
-        const fanoutRaw = pipeMeta.tags.fanout ? parseInt(pipeMeta.tags.fanout, 10) : null;
+        const split = pipeMeta.tags["split"] ? parseFloat(pipeMeta.tags["split"]) : null;
+        const fanoutRaw = pipeMeta.tags["fanout"] ? parseInt(pipeMeta.tags["fanout"], 10) : null;
         if (fanoutRaw !== null && fanoutRaw < 1) {
           warn2(
             lineNumber,
@@ -11268,8 +11292,8 @@ function parseInfra(content) {
         const pipeMeta = extractPipeMetadata(targetRaw);
         const targetName = pipeMeta.clean || targetRaw;
         warnUnparsedPipeMeta(targetName, lineNumber, warn2);
-        const split = pipeMeta.tags.split ? parseFloat(pipeMeta.tags.split) : null;
-        const fanoutRaw = pipeMeta.tags.fanout ? parseInt(pipeMeta.tags.fanout, 10) : null;
+        const split = pipeMeta.tags["split"] ? parseFloat(pipeMeta.tags["split"]) : null;
+        const fanoutRaw = pipeMeta.tags["fanout"] ? parseInt(pipeMeta.tags["fanout"], 10) : null;
         if (fanoutRaw !== null && fanoutRaw < 1) {
           warn2(
             lineNumber,
@@ -11352,7 +11376,7 @@ function parseInfra(content) {
       const compMatch = trimmed.match(COMPONENT_RE);
       if (compMatch) {
         const rawName = (compMatch[1] ?? compMatch[2] ?? "").trim();
-        const peeled = peelAlias2(rawName);
+        const peeled = peelInfraDecorations(rawName, lineNumber);
         const name = peeled.label;
         const rest = compMatch[3] || "";
         const { tags: nodeTags } = extractPipeMetadata(rest);
@@ -11378,10 +11402,13 @@ function parseInfra(content) {
         finishCurrentNode();
         finishCurrentTagGroup();
         currentGroup = null;
-        const name = (compMatch[1] ?? compMatch[2] ?? "").trim();
+        const rawName = (compMatch[1] ?? compMatch[2] ?? "").trim();
+        const peeled = peelInfraDecorations(rawName, lineNumber);
+        const name = peeled.label;
         const rest = compMatch[3] || "";
         const { tags } = extractPipeMetadata(rest);
         const id = nodeId2(name);
+        if (peeled.alias) nameAliasMap.set(peeled.alias, id);
         currentNode = {
           id,
           label: name,
@@ -11431,6 +11458,14 @@ function parseInfra(content) {
   validateTagGroupNames(result.tagGroups, warn2, setError);
   return result;
 }
+function stripNodeDecorations(name) {
+  let s = name.trim();
+  const aliasMatch = s.match(/^(.*?)\s+as\s+[A-Za-z][A-Za-z0-9_]{0,11}\s*$/);
+  if (aliasMatch) s = aliasMatch[1].trim();
+  const isAMatch = s.match(/^(.*?)\s+is\s+an?\s+[A-Za-z][\w-]*\s*$/i);
+  if (isAMatch) s = isAMatch[1].trim();
+  return s;
+}
 function extractSymbols4(docText) {
   const entities = [];
   let inMetadata = true;
@@ -11464,7 +11499,7 @@ function extractSymbols4(docText) {
       if (/^\[/.test(line12)) continue;
       const m = COMPONENT_RE.exec(line12);
       if (m) {
-        const name = (m[1] ?? m[2] ?? "").trim();
+        const name = stripNodeDecorations((m[1] ?? m[2] ?? "").trim());
         if (name && !entities.includes(name)) entities.push(name);
       }
     } else {
@@ -11479,7 +11514,7 @@ function extractSymbols4(docText) {
         continue;
       const m = COMPONENT_RE.exec(line12);
       if (m) {
-        const name = (m[1] ?? m[2] ?? "").trim();
+        const name = stripNodeDecorations((m[1] ?? m[2] ?? "").trim());
         if (name && !entities.includes(name)) entities.push(name);
       }
     }
@@ -11965,15 +12000,15 @@ function parseGantt(content, palette) {
             metaAliasMap,
             () => warn2(lineNumber, MULTIPLE_PIPE_ERROR)
           );
-          if (meta.lag || meta.lead) {
-            const key = meta.lag ? "lag" : "lead";
+          if (meta["lag"] || meta["lead"]) {
+            const key = meta["lag"] ? "lag" : "lead";
             softError(
               lineNumber,
               `"${key}" is no longer supported \u2014 use "offset: ${meta[key]}" instead.${key === "lead" ? ' Negate the value for lead behavior: "offset: -...".' : ""}`
             );
           }
-          if (meta.offset) {
-            const raw = meta.offset;
+          if (meta["offset"]) {
+            const raw = meta["offset"];
             if (raw.trim().startsWith("+")) {
               warn2(
                 lineNumber,
@@ -12360,15 +12395,15 @@ function parseGantt(content, palette) {
           metaAliasMap,
           () => warn2(lineNumber, MULTIPLE_PIPE_ERROR)
         );
-        if (meta.lag || meta.lead) {
-          const key = meta.lag ? "lag" : "lead";
+        if (meta["lag"] || meta["lead"]) {
+          const key = meta["lag"] ? "lag" : "lead";
           softError(
             lineNumber,
             `"${key}" is no longer supported \u2014 use "offset: ${meta[key]}" instead.${key === "lead" ? ' Negate the value for lead behavior: "offset: -...".' : ""}`
           );
         }
-        if (meta.offset) {
-          const raw = meta.offset;
+        if (meta["offset"]) {
+          const raw = meta["offset"];
           if (raw.trim().startsWith("+")) {
             warn2(
               lineNumber,
@@ -12439,9 +12474,9 @@ function parseGantt(content, palette) {
       () => warn2(ln, MULTIPLE_PIPE_ERROR)
     ) : {};
     let progress = null;
-    if (metadata.progress) {
-      progress = parseFloat(metadata.progress);
-      delete metadata.progress;
+    if (metadata["progress"]) {
+      progress = parseFloat(metadata["progress"]);
+      delete metadata["progress"];
     }
     for (const part of segments.slice(1).join(",").split(",")) {
       const seg = part.trim();
@@ -12450,16 +12485,16 @@ function parseGantt(content, palette) {
         progress = parseInt(progressMatch[1], 10);
       }
     }
-    if (metadata.lag || metadata.lead) {
-      const key = metadata.lag ? "lag" : "lead";
+    if (metadata["lag"] || metadata["lead"]) {
+      const key = metadata["lag"] ? "lag" : "lead";
       softError(
         ln,
         `"${key}" is no longer supported \u2014 use "offset: ${metadata[key]}" instead.${key === "lead" ? ' Negate the value for lead behavior: "offset: -...".' : ""}`
       );
     }
     let taskOffset;
-    if (metadata.offset) {
-      const raw = metadata.offset;
+    if (metadata["offset"]) {
+      const raw = metadata["offset"];
       if (raw.trim().startsWith("+")) {
         warn2(
           ln,
@@ -12474,7 +12509,7 @@ function parseGantt(content, palette) {
           );
         }
       }
-      delete metadata.offset;
+      delete metadata["offset"];
     }
     const groupPath = currentGroupPath();
     const inheritedMeta = {};
@@ -12997,7 +13032,7 @@ function parsePert(content, parseOpts = {}) {
         id,
         name,
         activityIds: [],
-        collapsed: meta.collapsed === "true",
+        collapsed: meta["collapsed"] === "true",
         lineNumber,
         ...Object.keys(tags).length > 0 && { tags }
       });
@@ -13259,7 +13294,7 @@ function parsePert(content, parseOpts = {}) {
       name: decl.name,
       ...decl.alias !== void 0 && { alias: decl.alias },
       duration: estimate,
-      ...meta.confidence && { confidence: meta.confidence },
+      ...meta["confidence"] && { confidence: meta["confidence"] },
       ...decl.groupHint !== void 0 && { groupId: decl.groupHint },
       lineNumber: decl.lineNumber,
       isMilestone,
@@ -14590,7 +14625,7 @@ function parseMindmap(content, palette) {
   }
   return result;
 }
-function parseNodeLine2(trimmed, lineNumber, palette, counter, aliasMap, warnFn) {
+function parseNodeLine2(trimmed, lineNumber, _palette, counter, aliasMap, warnFn) {
   const segments = trimmed.split("|").map((s) => s.trim());
   const label = segments[0];
   const metadata = parsePipeMetadata(
@@ -15034,7 +15069,7 @@ function parseWireframe(content) {
     wrapper.isContainer = true;
     wrapper.orientation = "horizontal";
     wrapper.children = children;
-    wrapper.metadata._inlineRow = "true";
+    wrapper.metadata["_inlineRow"] = "true";
     pushElement(wrapper);
   }
   for (let i = 0; i < lines.length; i++) {
@@ -15185,7 +15220,7 @@ function parseWireframe(content) {
             wrapper.isContainer = true;
             wrapper.orientation = "horizontal";
             wrapper.children.push(labelEl, fieldEl);
-            wrapper.metadata._labelField = "true";
+            wrapper.metadata["_labelField"] = "true";
             pushElement(wrapper);
           }
         } else {
@@ -17006,9 +17041,9 @@ function parseRaci(content, palette) {
           let roleColor;
           if (segments.length > 1) {
             const meta = parsePipeMetadata(segments);
-            if (meta.color) {
+            if (meta["color"]) {
               roleColor = resolveColorWithDiagnostic(
-                meta.color,
+                meta["color"],
                 j + 1,
                 result.diagnostics,
                 palette
@@ -17075,9 +17110,9 @@ function parseRaci(content, palette) {
         let phaseColor;
         if (phaseMatch[2]) {
           const meta = parsePipeMetadata(["", phaseMatch[2]]);
-          if (meta.color) {
+          if (meta["color"]) {
             phaseColor = resolveColorWithDiagnostic(
-              meta.color,
+              meta["color"],
               lineNumber,
               result.diagnostics,
               palette
@@ -19087,7 +19122,7 @@ function renderOrg(container, parsed, layout, palette, isDark, onClickItem, expo
     displayNames.set(group.name.toLowerCase(), group.name);
   }
   const rootNodeIds = new Set(parsed.roots.map((r) => r.id));
-  const colorOff = parsed.options?.color === "off";
+  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));
     if (activeTagGroup) {
@@ -22188,7 +22223,7 @@ function renderERDiagram(container, parsed, layout, palette, isDark, onClickItem
   const seriesColors2 = getSeriesColors(palette);
   const semanticRoles = useSemanticColors ? classifyEREntities(parsed.tables, parsed.relationships) : null;
   const semanticActive = semanticRoles !== null && (semanticColorsActive ?? true);
-  const useLabels = parsed.options.notation === "labels";
+  const useLabels = parsed.options["notation"] === "labels";
   for (const edge of layout.edges) {
     if (edge.points.length < 2) continue;
     const edgeG = contentG.append("g").attr("class", "er-edge-group").attr("data-line-number", String(edge.lineNumber));
@@ -22401,495 +22436,6 @@ var init_renderer5 = __esm({
   }
 });
 
-// src/boxes-and-lines/layout.ts
-var layout_exports5 = {};
-__export(layout_exports5, {
-  layoutBoxesAndLines: () => layoutBoxesAndLines
-});
-import dagre4 from "@dagrejs/dagre";
-function clipToRectBorder2(cx, cy, w, h, tx, ty) {
-  const dx = tx - cx;
-  const dy = ty - cy;
-  if (dx === 0 && dy === 0) return { x: cx, y: cy };
-  const hw = w / 2;
-  const hh = h / 2;
-  const sx = dx !== 0 ? hw / Math.abs(dx) : Infinity;
-  const sy = dy !== 0 ? hh / Math.abs(dy) : Infinity;
-  const s = Math.min(sx, sy);
-  return { x: cx + dx * s, y: cy + dy * s };
-}
-function splitCamelCase(word) {
-  const parts = [];
-  let start = 0;
-  for (let i = 1; i < word.length; i++) {
-    const prev = word[i - 1];
-    const curr = word[i];
-    const next = i + 1 < word.length ? word[i + 1] : "";
-    const lowerToUpper = prev >= "a" && prev <= "z" && curr >= "A" && curr <= "Z";
-    const upperRunEnd = prev >= "A" && prev <= "Z" && curr >= "A" && curr <= "Z" && next >= "a" && next <= "z";
-    if (lowerToUpper || upperRunEnd) {
-      parts.push(word.slice(start, i));
-      start = i;
-    }
-  }
-  parts.push(word.slice(start));
-  return parts.length > 1 ? parts : [word];
-}
-function estimateLabelLines(label, nodeWidth2 = NODE_WIDTH) {
-  const rawParts = label.split(/[\s-]+/);
-  const words = [];
-  for (const part of rawParts) {
-    if (!part) continue;
-    words.push(...splitCamelCase(part));
-  }
-  for (let fontSize = 13; fontSize >= 9; fontSize--) {
-    const charWidth = fontSize * 0.6;
-    const maxChars = Math.floor((nodeWidth2 - 24) / charWidth);
-    if (maxChars < 2) continue;
-    let lines = 1;
-    let current = "";
-    for (const word of words) {
-      const test = current ? `${current} ${word}` : word;
-      if (test.length <= maxChars) {
-        current = test;
-      } else {
-        lines++;
-        current = word;
-      }
-    }
-    if (lines <= MAX_LABEL_LINES) return Math.min(lines, MAX_LABEL_LINES);
-  }
-  return MAX_LABEL_LINES;
-}
-function computeNodeSize(node) {
-  if (!node.description || node.description.length === 0) {
-    return { width: NODE_WIDTH, height: NODE_HEIGHT };
-  }
-  const w = DESC_NODE_WIDTH;
-  const labelLines = estimateLabelLines(node.label, w);
-  const labelHeight = labelLines * 13 * LABEL_LINE_HEIGHT + LABEL_PAD;
-  const charsPerLine = Math.floor((w - 24) / (DESC_FONT_SIZE * 0.6));
-  let totalRenderedLines = 0;
-  for (const line12 of node.description) {
-    if (line12.length <= charsPerLine) {
-      totalRenderedLines += 1;
-    } else {
-      const words = line12.split(/\s+/);
-      let current = "";
-      let lineCount = 0;
-      for (const word of words) {
-        const fitted = word.length > charsPerLine ? word.slice(0, charsPerLine) : word;
-        const test = current ? `${current} ${fitted}` : fitted;
-        if (test.length <= charsPerLine) {
-          current = test;
-        } else {
-          if (current) lineCount++;
-          current = fitted;
-        }
-      }
-      if (current) lineCount++;
-      totalRenderedLines += lineCount;
-    }
-  }
-  totalRenderedLines = Math.min(totalRenderedLines, MAX_DESC_LINES);
-  const descriptionHeight = totalRenderedLines * DESC_FONT_SIZE * DESC_LINE_HEIGHT;
-  const totalHeight = labelHeight + SEPARATOR_GAP5 + DESC_PADDING + descriptionHeight + DESC_PADDING;
-  return { width: w, height: Math.max(NODE_HEIGHT, totalHeight) };
-}
-function layoutBoxesAndLines(parsed, collapseInfo, layoutOptions) {
-  const hideDescriptions = layoutOptions?.hideDescriptions ?? false;
-  const g = new dagre4.graphlib.Graph({ compound: true, multigraph: true });
-  g.setGraph({
-    rankdir: parsed.direction,
-    nodesep: NODESEP,
-    ranksep: RANKSEP,
-    marginx: MARGIN3,
-    marginy: MARGIN3
-  });
-  g.setDefaultEdgeLabel(() => ({}));
-  const collapsedGroupLabels = /* @__PURE__ */ new Set();
-  if (collapseInfo) {
-    const missingGroups = /* @__PURE__ */ new Set();
-    for (const og of collapseInfo.originalGroups) {
-      if (!parsed.groups.some((g2) => g2.label === og.label)) {
-        missingGroups.add(og.label);
-      }
-    }
-    for (const label of missingGroups) {
-      const og = collapseInfo.originalGroups.find((g2) => g2.label === label);
-      const parentLabel = og?.parentGroup;
-      if (!parentLabel || !missingGroups.has(parentLabel)) {
-        collapsedGroupLabels.add(label);
-      }
-    }
-  }
-  for (const label of collapsedGroupLabels) {
-    const gid = `__group_${label}`;
-    g.setNode(gid, { label, width: NODE_WIDTH, height: NODE_HEIGHT });
-  }
-  for (const group of parsed.groups) {
-    const gid = `__group_${group.label}`;
-    g.setNode(gid, {
-      label: group.label,
-      paddingLeft: CONTAINER_PAD_X3,
-      paddingRight: CONTAINER_PAD_X3,
-      paddingTop: CONTAINER_PAD_TOP2,
-      paddingBottom: CONTAINER_PAD_BOTTOM3
-    });
-  }
-  const originalGroupByLabel = /* @__PURE__ */ new Map();
-  if (collapseInfo) {
-    for (const og of collapseInfo.originalGroups) {
-      originalGroupByLabel.set(og.label, og);
-    }
-  }
-  for (const label of collapsedGroupLabels) {
-    const og = originalGroupByLabel.get(label);
-    if (og?.parentGroup && !collapsedGroupLabels.has(og.parentGroup)) {
-      const gid = `__group_${label}`;
-      const parentGid = `__group_${og.parentGroup}`;
-      if (g.hasNode(parentGid)) {
-        g.setParent(gid, parentGid);
-      }
-    }
-  }
-  const nodeSizes = /* @__PURE__ */ new Map();
-  let maxDescHeight = 0;
-  for (const node of parsed.nodes) {
-    const size = hideDescriptions ? { width: NODE_WIDTH, height: NODE_HEIGHT } : computeNodeSize(node);
-    nodeSizes.set(node.label, size);
-    if (!hideDescriptions && node.description && node.description.length > 0) {
-      maxDescHeight = Math.max(maxDescHeight, size.height);
-    }
-  }
-  if (maxDescHeight > 0) {
-    for (const node of parsed.nodes) {
-      if (node.description && node.description.length > 0) {
-        const size = nodeSizes.get(node.label);
-        nodeSizes.set(node.label, { width: size.width, height: maxDescHeight });
-      }
-    }
-  }
-  for (const node of parsed.nodes) {
-    const size = nodeSizes.get(node.label);
-    g.setNode(node.label, {
-      label: node.label,
-      width: size.width,
-      height: size.height
-    });
-  }
-  for (const group of parsed.groups) {
-    if (group.parentGroup) {
-      const childGid = `__group_${group.label}`;
-      const parentGid = `__group_${group.parentGroup}`;
-      if (g.hasNode(childGid) && g.hasNode(parentGid)) {
-        g.setParent(childGid, parentGid);
-      }
-    }
-  }
-  const groupLabelSet = new Set(parsed.groups.map((gr) => gr.label));
-  for (const group of parsed.groups) {
-    const gid = `__group_${group.label}`;
-    for (const child of group.children) {
-      if (groupLabelSet.has(child)) continue;
-      if (g.hasNode(child)) {
-        g.setParent(child, gid);
-      }
-    }
-  }
-  const expandedGroupIds = /* @__PURE__ */ new Set();
-  for (const group of parsed.groups) {
-    expandedGroupIds.add(`__group_${group.label}`);
-  }
-  const groupFirstChild = /* @__PURE__ */ new Map();
-  for (const group of parsed.groups) {
-    const gid = `__group_${group.label}`;
-    const firstChild = group.children.find(
-      (c) => !groupLabelSet.has(c) && g.hasNode(c)
-    );
-    if (firstChild) {
-      groupFirstChild.set(gid, firstChild);
-    }
-  }
-  const deferredEdgeIndices = [];
-  let proxyIdx = 0;
-  for (let i = 0; i < parsed.edges.length; i++) {
-    const edge = parsed.edges[i];
-    const src = edge.source;
-    const tgt = edge.target;
-    if (!g.hasNode(src) || !g.hasNode(tgt)) continue;
-    if (expandedGroupIds.has(src) || expandedGroupIds.has(tgt)) {
-      deferredEdgeIndices.push(i);
-      const proxySrc = expandedGroupIds.has(src) ? groupFirstChild.get(src) : src;
-      const proxyTgt = expandedGroupIds.has(tgt) ? groupFirstChild.get(tgt) : tgt;
-      if (proxySrc && proxyTgt && proxySrc !== proxyTgt) {
-        g.setEdge(
-          proxySrc,
-          proxyTgt,
-          { label: "", minlen: 1 },
-          `proxy${proxyIdx++}`
-        );
-      }
-      continue;
-    }
-    g.setEdge(src, tgt, { label: edge.label ?? "", minlen: 1 }, `e${i}`);
-  }
-  dagre4.layout(g);
-  const layoutNodes = [];
-  for (const node of parsed.nodes) {
-    const dagreNode = g.node(node.label);
-    if (!dagreNode) continue;
-    layoutNodes.push({
-      label: node.label,
-      x: dagreNode.x,
-      y: dagreNode.y,
-      width: dagreNode.width,
-      height: dagreNode.height
-    });
-  }
-  const layoutGroups = [];
-  for (const group of parsed.groups) {
-    const gid = `__group_${group.label}`;
-    const dagreNode = g.node(gid);
-    if (!dagreNode) continue;
-    layoutGroups.push({
-      label: group.label,
-      lineNumber: group.lineNumber,
-      x: dagreNode.x,
-      y: dagreNode.y,
-      width: dagreNode.width,
-      height: dagreNode.height,
-      collapsed: false
-    });
-  }
-  for (const label of collapsedGroupLabels) {
-    const gid = `__group_${label}`;
-    const dagreNode = g.node(gid);
-    if (!dagreNode) continue;
-    const og = collapseInfo?.originalGroups.find((g2) => g2.label === label);
-    layoutGroups.push({
-      label,
-      lineNumber: og?.lineNumber ?? 0,
-      x: dagreNode.x,
-      y: dagreNode.y,
-      width: dagreNode.width,
-      height: dagreNode.height,
-      collapsed: true,
-      childCount: collapseInfo?.collapsedChildCounts.get(label) ?? 0
-    });
-  }
-  const groupAlignShifts = /* @__PURE__ */ new Map();
-  {
-    const groupEdges = [];
-    for (const edge of parsed.edges) {
-      if (edge.source.startsWith("__group_") && edge.target.startsWith("__group_")) {
-        groupEdges.push(edge);
-      }
-    }
-    if (groupEdges.length > 0) {
-      const groupParent = /* @__PURE__ */ new Map();
-      const find = (x) => {
-        while (groupParent.has(x) && groupParent.get(x) !== x) {
-          groupParent.set(x, groupParent.get(groupParent.get(x)));
-          x = groupParent.get(x);
-        }
-        return x;
-      };
-      const union = (a, b) => {
-        const ra = find(a), rb = find(b);
-        if (ra !== rb) groupParent.set(ra, rb);
-      };
-      for (const edge of groupEdges) {
-        if (!groupParent.has(edge.source))
-          groupParent.set(edge.source, edge.source);
-        if (!groupParent.has(edge.target))
-          groupParent.set(edge.target, edge.target);
-        union(edge.source, edge.target);
-      }
-      const components = /* @__PURE__ */ new Map();
-      for (const lg of layoutGroups) {
-        const gid = `__group_${lg.label}`;
-        if (!groupParent.has(gid)) continue;
-        const root = find(gid);
-        if (!components.has(root)) components.set(root, []);
-        components.get(root).push(lg);
-      }
-      const axis = parsed.direction === "TB" ? "x" : "y";
-      for (const groups of components.values()) {
-        if (groups.length < 2) continue;
-        const dim = axis === "x" ? "width" : "height";
-        let widest = groups[0];
-        for (const g2 of groups) {
-          if (g2[dim] > widest[dim]) widest = g2;
-        }
-        const targetCenter = widest[axis];
-        for (const grp of groups) {
-          const dx = targetCenter - grp[axis];
-          if (dx === 0) continue;
-          grp[axis] += dx;
-          groupAlignShifts.set(`__group_${grp.label}`, dx);
-          const parsedGroup = parsed.groups.find(
-            (pg) => pg.label === grp.label
-          );
-          if (parsedGroup) {
-            for (const childLabel of parsedGroup.children) {
-              const childNode = layoutNodes.find((n) => n.label === childLabel);
-              if (childNode) childNode[axis] += dx;
-            }
-          }
-        }
-      }
-    }
-  }
-  const edgeYOffsets = new Array(parsed.edges.length).fill(0);
-  const edgeParallelCounts = new Array(parsed.edges.length).fill(1);
-  const parallelGroups = /* @__PURE__ */ new Map();
-  for (let i = 0; i < parsed.edges.length; i++) {
-    const edge = parsed.edges[i];
-    const [a, b] = edge.source < edge.target ? [edge.source, edge.target] : [edge.target, edge.source];
-    const key = `${a}\0${b}`;
-    if (!parallelGroups.has(key)) parallelGroups.set(key, []);
-    parallelGroups.get(key).push(i);
-  }
-  for (const group of parallelGroups.values()) {
-    const capped = group.slice(0, MAX_PARALLEL_EDGES);
-    for (const idx of group.slice(MAX_PARALLEL_EDGES)) {
-      edgeParallelCounts[idx] = 0;
-    }
-    if (capped.length < 2) continue;
-    const effectiveSpacing = PARALLEL_SPACING;
-    for (let j = 0; j < capped.length; j++) {
-      edgeYOffsets[capped[j]] = (j - (capped.length - 1) / 2) * effectiveSpacing;
-      edgeParallelCounts[capped[j]] = capped.length;
-    }
-  }
-  const deferredSet = new Set(deferredEdgeIndices);
-  const layoutEdges = [];
-  for (let i = 0; i < parsed.edges.length; i++) {
-    const edge = parsed.edges[i];
-    if (edgeParallelCounts[i] === 0) continue;
-    let points;
-    if (deferredSet.has(i)) {
-      const srcLayout = layoutGroups.find(
-        (lg) => `__group_${lg.label}` === edge.source
-      );
-      const tgtLayout = layoutGroups.find(
-        (lg) => `__group_${lg.label}` === edge.target
-      );
-      if (!srcLayout || !tgtLayout) {
-        const srcNode = g.node(edge.source);
-        const tgtNode = g.node(edge.target);
-        if (!srcNode || !tgtNode) continue;
-        const srcPt = clipToRectBorder2(
-          srcNode.x,
-          srcNode.y,
-          srcNode.width,
-          srcNode.height,
-          tgtNode.x,
-          tgtNode.y
-        );
-        const tgtPt = clipToRectBorder2(
-          tgtNode.x,
-          tgtNode.y,
-          tgtNode.width,
-          tgtNode.height,
-          srcNode.x,
-          srcNode.y
-        );
-        const midX = (srcPt.x + tgtPt.x) / 2;
-        const midY = (srcPt.y + tgtPt.y) / 2;
-        points = [srcPt, { x: midX, y: midY }, tgtPt];
-      } else if (parsed.direction === "TB") {
-        const cx = (srcLayout.x + tgtLayout.x) / 2;
-        const srcPt = { x: cx, y: srcLayout.y + srcLayout.height / 2 };
-        const tgtPt = { x: cx, y: tgtLayout.y - tgtLayout.height / 2 };
-        const midY = (srcPt.y + tgtPt.y) / 2;
-        points = [srcPt, { x: cx, y: midY }, tgtPt];
-      } else {
-        const cy = (srcLayout.y + tgtLayout.y) / 2;
-        const srcPt = { x: srcLayout.x + srcLayout.width / 2, y: cy };
-        const tgtPt = { x: tgtLayout.x - tgtLayout.width / 2, y: cy };
-        const midX = (srcPt.x + tgtPt.x) / 2;
-        points = [srcPt, { x: midX, y: cy }, tgtPt];
-      }
-    } else {
-      const dagreEdge = g.edge(edge.source, edge.target, `e${i}`);
-      points = dagreEdge?.points ?? [];
-      const srcShift = groupAlignShifts.get(edge.source) ?? 0;
-      const tgtShift = groupAlignShifts.get(edge.target) ?? 0;
-      if (srcShift !== 0 || tgtShift !== 0) {
-        const avgShift = (srcShift + tgtShift) / 2;
-        const prop = parsed.direction === "TB" ? "x" : "y";
-        points = points.map((p) => ({ ...p, [prop]: p[prop] + avgShift }));
-      }
-    }
-    let labelX;
-    let labelY;
-    if (edge.label && points.length >= 2) {
-      const mid = Math.floor(points.length / 2);
-      labelX = points[mid].x;
-      labelY = points[mid].y - 10;
-    }
-    layoutEdges.push({
-      source: edge.source,
-      target: edge.target,
-      label: edge.label,
-      bidirectional: edge.bidirectional,
-      lineNumber: edge.lineNumber,
-      points,
-      labelX,
-      labelY,
-      yOffset: edgeYOffsets[i],
-      parallelCount: edgeParallelCounts[i],
-      metadata: edge.metadata,
-      deferred: deferredSet.has(i) || void 0
-    });
-  }
-  let maxX = 0;
-  let maxY = 0;
-  for (const node of layoutNodes) {
-    maxX = Math.max(maxX, node.x + node.width / 2);
-    maxY = Math.max(maxY, node.y + node.height / 2);
-  }
-  for (const group of layoutGroups) {
-    maxX = Math.max(maxX, group.x + group.width / 2);
-    maxY = Math.max(maxY, group.y + group.height / 2);
-  }
-  return {
-    nodes: layoutNodes,
-    edges: layoutEdges,
-    groups: layoutGroups,
-    width: maxX + MARGIN3,
-    height: maxY + MARGIN3
-  };
-}
-var NODESEP, RANKSEP, MARGIN3, CONTAINER_PAD_X3, CONTAINER_PAD_TOP2, CONTAINER_PAD_BOTTOM3, MAX_PARALLEL_EDGES, PARALLEL_SPACING, PHI, NODE_HEIGHT, NODE_WIDTH, DESC_NODE_WIDTH, DESC_FONT_SIZE, DESC_LINE_HEIGHT, DESC_PADDING, SEPARATOR_GAP5, MAX_DESC_LINES, MAX_LABEL_LINES, LABEL_LINE_HEIGHT, LABEL_PAD;
-var init_layout5 = __esm({
-  "src/boxes-and-lines/layout.ts"() {
-    "use strict";
-    NODESEP = 60;
-    RANKSEP = 100;
-    MARGIN3 = 40;
-    CONTAINER_PAD_X3 = 30;
-    CONTAINER_PAD_TOP2 = 40;
-    CONTAINER_PAD_BOTTOM3 = 24;
-    MAX_PARALLEL_EDGES = 5;
-    PARALLEL_SPACING = 22;
-    PHI = 1.618;
-    NODE_HEIGHT = 60;
-    NODE_WIDTH = Math.round(NODE_HEIGHT * PHI);
-    DESC_NODE_WIDTH = 140;
-    DESC_FONT_SIZE = 10;
-    DESC_LINE_HEIGHT = 1.4;
-    DESC_PADDING = 8;
-    SEPARATOR_GAP5 = 4;
-    MAX_DESC_LINES = 6;
-    MAX_LABEL_LINES = 3;
-    LABEL_LINE_HEIGHT = 1.3;
-    LABEL_PAD = 12;
-  }
-});
-
 // src/utils/wrapped-desc.ts
 function wrapDescriptionLines(lines, charsPerLine, lengthFn = (s) => s.length) {
   const result = [];
@@ -22941,7 +22487,7 @@ __export(renderer_exports6, {
 });
 import * as d3Selection6 from "d3-selection";
 import * as d3Shape4 from "d3-shape";
-function splitCamelCase2(word) {
+function splitCamelCase(word) {
   const parts = [];
   let start = 0;
   for (let i = 1; i < word.length; i++) {
@@ -22964,7 +22510,7 @@ function fitLabelToHeader(label, nodeWidth2, maxLines) {
   const words = [];
   for (const part of rawParts) {
     if (!part || /^\s+$/.test(part) || part === "-") continue;
-    words.push(...splitCamelCase2(part));
+    words.push(...splitCamelCase(part));
   }
   for (let fontSize = NODE_FONT_SIZE; fontSize >= MIN_NODE_FONT_SIZE; fontSize--) {
     const charWidth2 = fontSize * CHAR_WIDTH_RATIO2;
@@ -23340,12 +22886,12 @@ function renderBoxesAndLines(container, parsed, layout, palette, isDark, options
       }
       const sepY = -ln.height / 2 + headerH;
       nodeG.append("line").attr("x1", -ln.width / 2).attr("y1", sepY).attr("x2", ln.width / 2).attr("y2", sepY).attr("stroke", colors.stroke).attr("stroke-opacity", 0.3).attr("stroke-width", 1);
-      const descStartY = sepY + 4 + DESC_FONT_SIZE2;
+      const descStartY = sepY + 4 + DESC_FONT_SIZE;
       const maxTextWidth = ln.width - NODE_TEXT_PADDING * 2;
       const charsPerLine = Math.floor(
-        maxTextWidth / (DESC_FONT_SIZE2 * CHAR_WIDTH_RATIO2)
+        maxTextWidth / (DESC_FONT_SIZE * CHAR_WIDTH_RATIO2)
       );
-      const descLineH = DESC_FONT_SIZE2 * DESC_LINE_HEIGHT2;
+      const descLineH = DESC_FONT_SIZE * DESC_LINE_HEIGHT;
       const displayLen = (text) => text.replace(/\[([^\]]+)\]\([^)]+\)/g, "$1").replace(/\*\*(.+?)\*\*/g, "$1").replace(/\*(.+?)\*/g, "$1").replace(/`(.+?)`/g, "$1").replace(/https?:\/\/\S+/g, (u) => u.slice(0, 20)).length;
       const normalizedLines = [];
       for (const descLine of desc) {
@@ -23361,8 +22907,8 @@ function renderBoxesAndLines(container, parsed, layout, palette, isDark, options
         charsPerLine,
         displayLen
       );
-      const truncated = wrappedLinesShared.length > MAX_DESC_LINES2;
-      const visibleLines = truncated ? wrappedLinesShared.slice(0, MAX_DESC_LINES2) : wrappedLinesShared;
+      const truncated = wrappedLinesShared.length > MAX_DESC_LINES;
+      const visibleLines = truncated ? wrappedLinesShared.slice(0, MAX_DESC_LINES) : wrappedLinesShared;
       const BULLET_GLYPH_X = -ln.width / 2 + 6;
       const BULLET_BODY_X = BULLET_GLYPH_X + 10;
       for (let li = 0; li < visibleLines.length; li++) {
@@ -23373,11 +22919,11 @@ function renderBoxesAndLines(container, parsed, layout, palette, isDark, options
         }
         const y2 = descStartY + li * descLineH;
         if (line12.kind === "bullet-first") {
-          nodeG.append("text").attr("x", BULLET_GLYPH_X).attr("y", y2).attr("text-anchor", "start").attr("dominant-baseline", "central").attr("font-size", DESC_FONT_SIZE2).attr("fill", palette.textMuted).text("\u2022");
+          nodeG.append("text").attr("x", BULLET_GLYPH_X).attr("y", y2).attr("text-anchor", "start").attr("dominant-baseline", "central").attr("font-size", DESC_FONT_SIZE).attr("fill", palette.textMuted).text("\u2022");
         }
         const isBullet = line12.kind === "bullet-first" || line12.kind === "bullet-cont";
-        const textEl = nodeG.append("text").attr("x", isBullet ? BULLET_BODY_X : 0).attr("y", y2).attr("text-anchor", isBullet ? "start" : "middle").attr("dominant-baseline", "central").attr("font-size", DESC_FONT_SIZE2).attr("fill", palette.textMuted);
-        renderInlineText(textEl, lineText, palette, DESC_FONT_SIZE2);
+        const textEl = nodeG.append("text").attr("x", isBullet ? BULLET_BODY_X : 0).attr("y", y2).attr("text-anchor", isBullet ? "start" : "middle").attr("dominant-baseline", "central").attr("font-size", DESC_FONT_SIZE).attr("fill", palette.textMuted);
+        renderInlineText(textEl, lineText, palette, DESC_FONT_SIZE);
       }
       if (truncated) {
         const fullText = desc.join(" ");
@@ -23455,7 +23001,7 @@ function renderBoxesAndLinesForExport(container, parsed, layout, palette, isDark
     hiddenTagValues: options?.hiddenTagValues
   });
 }
-var DIAGRAM_PADDING6, NODE_FONT_SIZE, MIN_NODE_FONT_SIZE, EDGE_LABEL_FONT_SIZE4, EDGE_STROKE_WIDTH5, NODE_STROKE_WIDTH5, NODE_RX, COLLAPSE_BAR_HEIGHT3, ARROWHEAD_W2, ARROWHEAD_H2, DESC_FONT_SIZE2, DESC_LINE_HEIGHT2, MAX_DESC_LINES2, CHAR_WIDTH_RATIO2, NODE_TEXT_PADDING, GROUP_RX, GROUP_LABEL_FONT_SIZE, GROUP_LABEL_ZONE, lineGeneratorLR, lineGeneratorTB;
+var DIAGRAM_PADDING6, NODE_FONT_SIZE, MIN_NODE_FONT_SIZE, EDGE_LABEL_FONT_SIZE4, EDGE_STROKE_WIDTH5, NODE_STROKE_WIDTH5, NODE_RX, COLLAPSE_BAR_HEIGHT3, ARROWHEAD_W2, ARROWHEAD_H2, DESC_FONT_SIZE, DESC_LINE_HEIGHT, MAX_DESC_LINES, CHAR_WIDTH_RATIO2, NODE_TEXT_PADDING, GROUP_RX, GROUP_LABEL_FONT_SIZE, GROUP_LABEL_ZONE, lineGeneratorLR, lineGeneratorTB;
 var init_renderer6 = __esm({
   "src/boxes-and-lines/renderer.ts"() {
     "use strict";
@@ -23477,9 +23023,9 @@ var init_renderer6 = __esm({
     COLLAPSE_BAR_HEIGHT3 = 4;
     ARROWHEAD_W2 = 5;
     ARROWHEAD_H2 = 4;
-    DESC_FONT_SIZE2 = 10;
-    DESC_LINE_HEIGHT2 = 1.4;
-    MAX_DESC_LINES2 = 6;
+    DESC_FONT_SIZE = 10;
+    DESC_LINE_HEIGHT = 1.4;
+    MAX_DESC_LINES = 6;
     CHAR_WIDTH_RATIO2 = 0.6;
     NODE_TEXT_PADDING = 12;
     GROUP_RX = 8;
@@ -23490,6 +23036,523 @@ var init_renderer6 = __esm({
   }
 });
 
+// src/boxes-and-lines/layout.ts
+var layout_exports5 = {};
+__export(layout_exports5, {
+  layoutBoxesAndLines: () => layoutBoxesAndLines
+});
+import ELK from "elkjs/lib/elk.bundled.js";
+function splitCamelCase2(word) {
+  const parts = [];
+  let start = 0;
+  for (let i = 1; i < word.length; i++) {
+    const prev = word[i - 1];
+    const curr = word[i];
+    const next = i + 1 < word.length ? word[i + 1] : "";
+    const lowerToUpper = prev >= "a" && prev <= "z" && curr >= "A" && curr <= "Z";
+    const upperRunEnd = prev >= "A" && prev <= "Z" && curr >= "A" && curr <= "Z" && next >= "a" && next <= "z";
+    if (lowerToUpper || upperRunEnd) {
+      parts.push(word.slice(start, i));
+      start = i;
+    }
+  }
+  parts.push(word.slice(start));
+  return parts.length > 1 ? parts : [word];
+}
+function estimateLabelLines(label, nodeWidth2 = NODE_WIDTH) {
+  const rawParts = label.split(/[\s-]+/);
+  const words = [];
+  for (const part of rawParts) {
+    if (!part) continue;
+    words.push(...splitCamelCase2(part));
+  }
+  for (let fontSize = 13; fontSize >= 9; fontSize--) {
+    const charWidth = fontSize * 0.6;
+    const maxChars = Math.floor((nodeWidth2 - 24) / charWidth);
+    if (maxChars < 2) continue;
+    let lines = 1;
+    let current = "";
+    for (const word of words) {
+      const test = current ? `${current} ${word}` : word;
+      if (test.length <= maxChars) {
+        current = test;
+      } else {
+        lines++;
+        current = word;
+      }
+    }
+    if (lines <= MAX_LABEL_LINES) return Math.min(lines, MAX_LABEL_LINES);
+  }
+  return MAX_LABEL_LINES;
+}
+function computeNodeSize(node) {
+  if (!node.description || node.description.length === 0) {
+    return { width: NODE_WIDTH, height: NODE_HEIGHT };
+  }
+  const w = DESC_NODE_WIDTH;
+  const labelLines = estimateLabelLines(node.label, w);
+  const labelHeight = labelLines * 13 * LABEL_LINE_HEIGHT + LABEL_PAD;
+  const charsPerLine = Math.floor((w - 24) / (DESC_FONT_SIZE2 * 0.6));
+  let totalRenderedLines = 0;
+  for (const line12 of node.description) {
+    if (line12.length <= charsPerLine) {
+      totalRenderedLines += 1;
+    } else {
+      const words = line12.split(/\s+/);
+      let current = "";
+      let lineCount = 0;
+      for (const word of words) {
+        const fitted = word.length > charsPerLine ? word.slice(0, charsPerLine) : word;
+        const test = current ? `${current} ${fitted}` : fitted;
+        if (test.length <= charsPerLine) {
+          current = test;
+        } else {
+          if (current) lineCount++;
+          current = fitted;
+        }
+      }
+      if (current) lineCount++;
+      totalRenderedLines += lineCount;
+    }
+  }
+  totalRenderedLines = Math.min(totalRenderedLines, MAX_DESC_LINES2);
+  const descriptionHeight = totalRenderedLines * DESC_FONT_SIZE2 * DESC_LINE_HEIGHT2;
+  const totalHeight = labelHeight + SEPARATOR_GAP5 + DESC_PADDING + descriptionHeight + DESC_PADDING;
+  return { width: w, height: Math.max(NODE_HEIGHT, totalHeight) };
+}
+function getElk() {
+  if (!elkInstance) elkInstance = new ELK();
+  return elkInstance;
+}
+function baseOptions() {
+  return {
+    "elk.algorithm": "layered",
+    // INCLUDE_CHILDREN lets ELK route edges across container boundaries.
+    "elk.hierarchyHandling": "INCLUDE_CHILDREN",
+    "elk.edgeRouting": "ORTHOGONAL",
+    "elk.layered.unnecessaryBendpoints": "true",
+    // Let edges leave from top/bottom of nodes (not just the flow-direction
+    // sides) when it reduces crossings.
+    "elk.layered.allowNonFlowPortsToSwitchSides": "true"
+  };
+}
+function bkBaseline() {
+  return {
+    ...baseOptions(),
+    "elk.layered.nodePlacement.strategy": "BRANDES_KOEPF",
+    "elk.layered.nodePlacement.bk.fixedAlignment": "BALANCED",
+    "elk.layered.nodePlacement.bk.edgeStraightening": "IMPROVE_STRAIGHTNESS",
+    "elk.layered.compaction.connectedComponents": "true",
+    "elk.layered.spacing.nodeNodeBetweenLayers": "90",
+    "elk.spacing.nodeNode": "55",
+    "elk.spacing.edgeNode": "55",
+    "elk.spacing.edgeEdge": "18"
+  };
+}
+function getVariants() {
+  const bk = bkBaseline();
+  return [
+    {
+      name: "bk-baseline",
+      options: {
+        ...bk,
+        "elk.layered.crossingMinimization.greedySwitch.type": "ONE_SIDED"
+      }
+    },
+    {
+      name: "bk-aggressive",
+      options: {
+        ...bk,
+        "elk.layered.crossingMinimization.greedySwitch.type": "TWO_SIDED",
+        "elk.layered.thoroughness": "50"
+      }
+    },
+    {
+      name: "bk-wide",
+      options: {
+        ...bk,
+        "elk.layered.crossingMinimization.greedySwitch.type": "TWO_SIDED",
+        "elk.layered.thoroughness": "50",
+        "elk.spacing.nodeNode": "70",
+        "elk.spacing.edgeNode": "75",
+        "elk.spacing.edgeEdge": "22",
+        "elk.layered.spacing.nodeNodeBetweenLayers": "120"
+      }
+    },
+    {
+      name: "longest-path",
+      options: {
+        ...bk,
+        "elk.layered.layering.strategy": "LONGEST_PATH",
+        "elk.layered.crossingMinimization.greedySwitch.type": "TWO_SIDED",
+        "elk.layered.thoroughness": "50"
+      }
+    },
+    {
+      name: "bounded-width",
+      options: {
+        ...bk,
+        "elk.layered.layering.strategy": "COFFMAN_GRAHAM",
+        "elk.layered.layering.coffmanGraham.layerBound": "3",
+        "elk.layered.crossingMinimization.greedySwitch.type": "TWO_SIDED",
+        "elk.layered.thoroughness": "50"
+      }
+    }
+  ];
+}
+function countCrossings(edges) {
+  let count = 0;
+  for (let i = 0; i < edges.length; i++) {
+    const a = edges[i].points;
+    if (a.length < 2) continue;
+    for (let j = i + 1; j < edges.length; j++) {
+      const b = edges[j].points;
+      if (b.length < 2) continue;
+      if (edges[i].source === edges[j].source) continue;
+      if (edges[i].source === edges[j].target) continue;
+      if (edges[i].target === edges[j].source) continue;
+      if (edges[i].target === edges[j].target) continue;
+      for (let ai = 0; ai < a.length - 1; ai++) {
+        for (let bi = 0; bi < b.length - 1; bi++) {
+          if (segmentsCross(a[ai], a[ai + 1], b[bi], b[bi + 1])) count++;
+        }
+      }
+    }
+  }
+  return count;
+}
+function segmentsCross(p1, p2, p3, p4) {
+  const d1x = p2.x - p1.x;
+  const d1y = p2.y - p1.y;
+  const d2x = p4.x - p3.x;
+  const d2y = p4.y - p3.y;
+  const denom = d1x * d2y - d1y * d2x;
+  if (Math.abs(denom) < 1e-9) return false;
+  const t = ((p3.x - p1.x) * d2y - (p3.y - p1.y) * d2x) / denom;
+  const s = ((p3.x - p1.x) * d1y - (p3.y - p1.y) * d1x) / denom;
+  const EPS = 1e-3;
+  return t > EPS && t < 1 - EPS && s > EPS && s < 1 - EPS;
+}
+function countTotalBends(edges) {
+  let bends = 0;
+  for (const e of edges) bends += Math.max(0, e.points.length - 2);
+  return bends;
+}
+function scoreLayout(layout) {
+  return {
+    crossings: countCrossings(layout.edges),
+    bends: countTotalBends(layout.edges),
+    area: layout.width * layout.height
+  };
+}
+function cmpScore(a, b) {
+  const aBucket = a.crossings <= CROSSINGS_FORGIVENESS ? 0 : a.crossings;
+  const bBucket = b.crossings <= CROSSINGS_FORGIVENESS ? 0 : b.crossings;
+  if (aBucket !== bBucket) return aBucket - bBucket;
+  if (a.area !== b.area) return a.area - b.area;
+  return a.bends - b.bends;
+}
+async function layoutBoxesAndLines(parsed, collapseInfo, layoutOptions) {
+  const hideDescriptions = layoutOptions?.hideDescriptions ?? false;
+  const direction = parsed.direction === "TB" ? "DOWN" : "RIGHT";
+  const collapsedGroupLabels = /* @__PURE__ */ new Set();
+  if (collapseInfo) {
+    const missingGroups = /* @__PURE__ */ new Set();
+    for (const og of collapseInfo.originalGroups) {
+      if (!parsed.groups.some((g) => g.label === og.label)) {
+        missingGroups.add(og.label);
+      }
+    }
+    for (const label of missingGroups) {
+      const og = collapseInfo.originalGroups.find((g) => g.label === label);
+      const parentLabel = og?.parentGroup;
+      if (!parentLabel || !missingGroups.has(parentLabel)) {
+        collapsedGroupLabels.add(label);
+      }
+    }
+  }
+  const nodeSizes = /* @__PURE__ */ new Map();
+  let maxDescHeight = 0;
+  for (const node of parsed.nodes) {
+    const size = hideDescriptions ? { width: NODE_WIDTH, height: NODE_HEIGHT } : computeNodeSize(node);
+    nodeSizes.set(node.label, size);
+    if (!hideDescriptions && node.description && node.description.length > 0) {
+      maxDescHeight = Math.max(maxDescHeight, size.height);
+    }
+  }
+  if (maxDescHeight > 0) {
+    for (const node of parsed.nodes) {
+      if (node.description && node.description.length > 0) {
+        const size = nodeSizes.get(node.label);
+        nodeSizes.set(node.label, { width: size.width, height: maxDescHeight });
+      }
+    }
+  }
+  const expandedGroupSet = new Set(parsed.groups.map((g) => g.label));
+  const gid = (label) => `__group_${label}`;
+  function buildGraph() {
+    const nodeById = /* @__PURE__ */ new Map();
+    const parentOf = /* @__PURE__ */ new Map();
+    for (const node of parsed.nodes) {
+      const size = nodeSizes.get(node.label);
+      nodeById.set(node.label, {
+        id: node.label,
+        width: size.width,
+        height: size.height,
+        labels: [{ text: node.label }]
+      });
+    }
+    for (const group of parsed.groups) {
+      nodeById.set(gid(group.label), {
+        id: gid(group.label),
+        labels: [{ text: group.label }],
+        layoutOptions: {
+          "elk.padding": `[top=${CONTAINER_PAD_TOP2},left=${CONTAINER_PAD_X3},bottom=${CONTAINER_PAD_BOTTOM3},right=${CONTAINER_PAD_X3}]`,
+          // Suggest square-ish containers — has limited effect with
+          // INCLUDE_CHILDREN but doesn't hurt.
+          "elk.aspectRatio": "1.4"
+        },
+        children: [],
+        edges: []
+      });
+    }
+    for (const label of collapsedGroupLabels) {
+      nodeById.set(gid(label), {
+        id: gid(label),
+        width: NODE_WIDTH,
+        height: NODE_HEIGHT,
+        labels: [{ text: label }]
+      });
+    }
+    for (const group of parsed.groups) {
+      if (group.parentGroup && nodeById.has(gid(group.parentGroup))) {
+        parentOf.set(gid(group.label), gid(group.parentGroup));
+      }
+    }
+    if (collapseInfo) {
+      for (const label of collapsedGroupLabels) {
+        const og = collapseInfo.originalGroups.find((g) => g.label === label);
+        if (og?.parentGroup && !collapsedGroupLabels.has(og.parentGroup) && nodeById.has(gid(og.parentGroup))) {
+          parentOf.set(gid(label), gid(og.parentGroup));
+        }
+      }
+    }
+    for (const group of parsed.groups) {
+      for (const child of group.children) {
+        if (expandedGroupSet.has(child)) continue;
+        if (nodeById.has(child)) {
+          parentOf.set(child, gid(group.label));
+        }
+      }
+    }
+    const roots = [];
+    for (const [id, node] of nodeById) {
+      const parentId = parentOf.get(id);
+      if (parentId) {
+        const parent = nodeById.get(parentId);
+        parent.children = parent.children ?? [];
+        parent.children.push(node);
+      } else {
+        roots.push(node);
+      }
+    }
+    const rootEdges = [];
+    for (let i = 0; i < parsed.edges.length; i++) {
+      const edge = parsed.edges[i];
+      if (!nodeById.has(edge.source) || !nodeById.has(edge.target)) continue;
+      rootEdges.push({
+        id: `e${i}`,
+        sources: [edge.source],
+        targets: [edge.target]
+      });
+    }
+    return { roots, rootEdges };
+  }
+  async function runVariant(variant) {
+    const { roots, rootEdges } = buildGraph();
+    const elkRoot = {
+      id: "root",
+      layoutOptions: {
+        ...variant.options,
+        "elk.direction": direction,
+        "elk.padding": `[top=${MARGIN3},left=${MARGIN3},bottom=${MARGIN3},right=${MARGIN3}]`
+      },
+      children: roots,
+      edges: rootEdges
+    };
+    const result = await getElk().layout(elkRoot);
+    return extractLayout(result);
+  }
+  function extractLayout(result) {
+    const layoutNodes = [];
+    const layoutGroups = [];
+    const allEdges = [];
+    const containerAbs = /* @__PURE__ */ new Map();
+    function walk(n, offsetX, offsetY, isRoot) {
+      const nx = (n.x ?? 0) + offsetX;
+      const ny = (n.y ?? 0) + offsetY;
+      const nw = n.width ?? 0;
+      const nh = n.height ?? 0;
+      if (isRoot) {
+        containerAbs.set("root", { x: nx, y: ny });
+      } else {
+        const isGroup = n.id.startsWith("__group_");
+        if (isGroup) {
+          const label = n.id.slice("__group_".length);
+          const collapsed = collapsedGroupLabels.has(label);
+          const og = collapseInfo?.originalGroups.find(
+            (g) => g.label === label
+          );
+          const pg = parsed.groups.find((g) => g.label === label);
+          layoutGroups.push({
+            label,
+            lineNumber: pg?.lineNumber ?? og?.lineNumber ?? 0,
+            x: nx + nw / 2,
+            y: ny + nh / 2,
+            width: nw,
+            height: nh,
+            collapsed,
+            childCount: collapsed ? collapseInfo?.collapsedChildCounts.get(label) ?? 0 : void 0
+          });
+          if (!collapsed) containerAbs.set(n.id, { x: nx, y: ny });
+        } else {
+          layoutNodes.push({
+            label: n.id,
+            x: nx + nw / 2,
+            y: ny + nh / 2,
+            width: nw,
+            height: nh
+          });
+        }
+      }
+      if (n.edges) for (const e of n.edges) allEdges.push(e);
+      if (n.children) for (const c of n.children) walk(c, nx, ny, false);
+    }
+    walk(result, 0, 0, true);
+    const edgeYOffsets = new Array(parsed.edges.length).fill(0);
+    const edgeParallelCounts = new Array(parsed.edges.length).fill(1);
+    const parallelGroups = /* @__PURE__ */ new Map();
+    for (let i = 0; i < parsed.edges.length; i++) {
+      const edge = parsed.edges[i];
+      const [a, b] = edge.source < edge.target ? [edge.source, edge.target] : [edge.target, edge.source];
+      const key = `${a}\0${b}`;
+      if (!parallelGroups.has(key)) parallelGroups.set(key, []);
+      parallelGroups.get(key).push(i);
+    }
+    for (const group of parallelGroups.values()) {
+      const capped = group.slice(0, MAX_PARALLEL_EDGES);
+      for (const idx of group.slice(MAX_PARALLEL_EDGES)) {
+        edgeParallelCounts[idx] = 0;
+      }
+      if (capped.length < 2) continue;
+      for (let j = 0; j < capped.length; j++) {
+        edgeYOffsets[capped[j]] = (j - (capped.length - 1) / 2) * PARALLEL_SPACING;
+        edgeParallelCounts[capped[j]] = capped.length;
+      }
+    }
+    const edgeById = /* @__PURE__ */ new Map();
+    for (const e of allEdges) edgeById.set(e.id, e);
+    const layoutEdges = [];
+    for (let i = 0; i < parsed.edges.length; i++) {
+      const edge = parsed.edges[i];
+      if (edgeParallelCounts[i] === 0) continue;
+      const elkEdge = edgeById.get(`e${i}`);
+      if (!elkEdge || !elkEdge.sections || elkEdge.sections.length === 0)
+        continue;
+      const container = elkEdge.container ?? "root";
+      const off = containerAbs.get(container) ?? { x: 0, y: 0 };
+      const s = elkEdge.sections[0];
+      const points = [
+        { x: s.startPoint.x + off.x, y: s.startPoint.y + off.y },
+        ...(s.bendPoints ?? []).map((p) => ({
+          x: p.x + off.x,
+          y: p.y + off.y
+        })),
+        { x: s.endPoint.x + off.x, y: s.endPoint.y + off.y }
+      ];
+      let labelX;
+      let labelY;
+      if (edge.label && points.length >= 2) {
+        const mid = Math.floor(points.length / 2);
+        labelX = points[mid].x;
+        labelY = points[mid].y - 10;
+      }
+      layoutEdges.push({
+        source: edge.source,
+        target: edge.target,
+        label: edge.label,
+        bidirectional: edge.bidirectional,
+        lineNumber: edge.lineNumber,
+        points,
+        labelX,
+        labelY,
+        yOffset: edgeYOffsets[i],
+        parallelCount: edgeParallelCounts[i],
+        metadata: edge.metadata,
+        deferred: true
+      });
+    }
+    let maxX = 0;
+    let maxY = 0;
+    for (const node of layoutNodes) {
+      maxX = Math.max(maxX, node.x + node.width / 2);
+      maxY = Math.max(maxY, node.y + node.height / 2);
+    }
+    for (const group of layoutGroups) {
+      maxX = Math.max(maxX, group.x + group.width / 2);
+      maxY = Math.max(maxY, group.y + group.height / 2);
+    }
+    return {
+      nodes: layoutNodes,
+      edges: layoutEdges,
+      groups: layoutGroups,
+      width: maxX + MARGIN3,
+      height: maxY + MARGIN3
+    };
+  }
+  const N = parsed.nodes.length + parsed.groups.length;
+  const E = parsed.edges.length;
+  const trivial = N < 8 && E < 10;
+  const variants = trivial ? [getVariants()[1]] : getVariants();
+  const results = await Promise.all(variants.map((v) => runVariant(v)));
+  let best = results[0];
+  let bestScore = scoreLayout(best);
+  for (let i = 1; i < results.length; i++) {
+    const s = scoreLayout(results[i]);
+    if (cmpScore(s, bestScore) < 0) {
+      best = results[i];
+      bestScore = s;
+    }
+  }
+  return best;
+}
+var MARGIN3, CONTAINER_PAD_X3, CONTAINER_PAD_TOP2, CONTAINER_PAD_BOTTOM3, MAX_PARALLEL_EDGES, PARALLEL_SPACING, PHI, NODE_HEIGHT, NODE_WIDTH, DESC_NODE_WIDTH, DESC_FONT_SIZE2, DESC_LINE_HEIGHT2, DESC_PADDING, SEPARATOR_GAP5, MAX_DESC_LINES2, MAX_LABEL_LINES, LABEL_LINE_HEIGHT, LABEL_PAD, elkInstance, CROSSINGS_FORGIVENESS;
+var init_layout5 = __esm({
+  "src/boxes-and-lines/layout.ts"() {
+    "use strict";
+    MARGIN3 = 40;
+    CONTAINER_PAD_X3 = 30;
+    CONTAINER_PAD_TOP2 = 40;
+    CONTAINER_PAD_BOTTOM3 = 24;
+    MAX_PARALLEL_EDGES = 5;
+    PARALLEL_SPACING = 22;
+    PHI = 1.618;
+    NODE_HEIGHT = 60;
+    NODE_WIDTH = Math.round(NODE_HEIGHT * PHI);
+    DESC_NODE_WIDTH = 140;
+    DESC_FONT_SIZE2 = 10;
+    DESC_LINE_HEIGHT2 = 1.4;
+    DESC_PADDING = 8;
+    SEPARATOR_GAP5 = 4;
+    MAX_DESC_LINES2 = 6;
+    MAX_LABEL_LINES = 3;
+    LABEL_LINE_HEIGHT = 1.3;
+    LABEL_PAD = 12;
+    elkInstance = null;
+    CROSSINGS_FORGIVENESS = 1;
+  }
+});
+
 // src/mindmap/text-wrap.ts
 function tokenize(text) {
   const tokens = [];
@@ -23628,7 +23691,7 @@ var layout_exports6 = {};
 __export(layout_exports6, {
   layoutMindmap: () => layoutMindmap
 });
-function layoutMindmap(parsed, palette, options) {
+function layoutMindmap(parsed, _palette, options) {
   const roots = parsed.roots;
   if (roots.length === 0) {
     return { nodes: [], edges: [], width: 0, height: 0 };
@@ -24524,7 +24587,7 @@ function layoutElement(el, x, y, width) {
     node.height = getElementHeight(el);
     return node;
   }
-  const isInlineRow = el.metadata._inlineRow === "true" || el.metadata._labelField === "true";
+  const isInlineRow = el.metadata["_inlineRow"] === "true" || el.metadata["_labelField"] === "true";
   const padTop = isInlineRow ? 0 : GROUP_PADDING_TOP;
   const padBottom = isInlineRow ? 0 : GROUP_PADDING_BOTTOM;
   const padX = isInlineRow ? 0 : GROUP_PADDING_X;
@@ -24573,7 +24636,7 @@ function allocateEqualWidths(children, totalWidth) {
 }
 function getElementHeight(el) {
   if (el.type === "heading") {
-    return el.headingLevel === 2 ? ELEMENT_HEIGHTS.subheading ?? 36 : ELEMENT_HEIGHTS.heading ?? 48;
+    return el.headingLevel === 2 ? ELEMENT_HEIGHTS["subheading"] ?? 36 : ELEMENT_HEIGHTS["heading"] ?? 48;
   }
   if (el.type === "textInput" && el.fieldVariant === "textarea") {
     return 80;
@@ -24587,16 +24650,16 @@ function getElementHeight(el) {
   if (el.type === "image") {
     if (el.imageHint === "round") return 80;
     if (el.imageHint === "wide") return 80;
-    return ELEMENT_HEIGHTS.image ?? 120;
+    return ELEMENT_HEIGHTS["image"] ?? 120;
   }
-  if (el.metadata._labelField === "true") {
+  if (el.metadata["_labelField"] === "true") {
     return 36;
   }
   return ELEMENT_HEIGHTS[el.type] ?? 24;
 }
 function getSpacingAfter(el) {
   if (el.type === "heading" && el.headingLevel === 2) {
-    return SPACING_AFTER.subheading ?? 12;
+    return SPACING_AFTER["subheading"] ?? 12;
   }
   return SPACING_AFTER[el.type] ?? 8;
 }
@@ -24604,7 +24667,7 @@ function computeFieldAlignX(children) {
   let maxLabelWidth = 0;
   let labelFieldCount = 0;
   for (const child of children) {
-    if (child.metadata._labelField === "true" && child.children.length >= 2) {
+    if (child.metadata["_labelField"] === "true" && child.children.length >= 2) {
       const labelEl = child.children[0];
       const labelWidth = labelEl.label.length * CHAR_WIDTH5;
       maxLabelWidth = Math.max(maxLabelWidth, labelWidth);
@@ -24816,7 +24879,7 @@ function renderNode(parent, node, ctx, depth) {
 function renderGroup(g, node, ctx, depth) {
   const { palette, isTransparent } = ctx;
   const el = node.element;
-  if (el.metadata._inlineRow === "true" || el.metadata._labelField === "true") {
+  if (el.metadata["_inlineRow"] === "true" || el.metadata["_labelField"] === "true") {
     for (const child of node.children) {
       renderNode(g, child, ctx, depth);
     }
@@ -24944,7 +25007,7 @@ function renderDivider(g, node, ctx) {
 function renderText(g, node, ctx) {
   const { palette } = ctx;
   const el = node.element;
-  if (el.metadata._labelField === "true" && el.children.length >= 2) {
+  if (el.metadata["_labelField"] === "true" && el.children.length >= 2) {
     for (const child of node.children) {
       renderNode(g, child, ctx, 0);
     }
@@ -25238,7 +25301,7 @@ __export(layout_exports8, {
   layoutC4Deployment: () => layoutC4Deployment,
   rollUpContextRelationships: () => rollUpContextRelationships
 });
-import dagre5 from "@dagrejs/dagre";
+import dagre4 from "@dagrejs/dagre";
 function computeEdgePenalty(edgeList, nodePositions, degrees, nodeGeometry) {
   let penalty = 0;
   for (const edge of edgeList) {
@@ -25679,7 +25742,7 @@ function layoutC4Context(parsed, activeTagGroup) {
   }
   const contextRels = rollUpContextRelationships(parsed);
   const spacing = computeAdaptiveSpacing(contextRels);
-  const g = new dagre5.graphlib.Graph();
+  const g = new dagre4.graphlib.Graph();
   g.setGraph({
     rankdir: "TB",
     nodesep: spacing.nodesep,
@@ -25700,7 +25763,7 @@ function layoutC4Context(parsed, activeTagGroup) {
       g.setEdge(rel.sourceName, rel.targetName, { label: rel.label ?? "" });
     }
   }
-  dagre5.layout(g);
+  dagre4.layout(g);
   reduceCrossings(
     g,
     validRels.map((r) => ({ source: r.sourceName, target: r.targetName }))
@@ -25872,7 +25935,7 @@ function layoutC4Containers(parsed, systemName, activeTagGroup) {
     }
   }
   const hasGroups = elementToGroup.size > 0;
-  const g = hasGroups ? new dagre5.graphlib.Graph({ compound: true }) : new dagre5.graphlib.Graph();
+  const g = hasGroups ? new dagre4.graphlib.Graph({ compound: true }) : new dagre4.graphlib.Graph();
   g.setDefaultEdgeLabel(() => ({}));
   if (hasGroups) {
     const seenGroups = /* @__PURE__ */ new Set();
@@ -25950,7 +26013,7 @@ function layoutC4Containers(parsed, systemName, activeTagGroup) {
       g.setEdge(rel.sourceName, rel.targetName, { label: rel.label ?? "" });
     }
   }
-  dagre5.layout(g);
+  dagre4.layout(g);
   const nodeGroupMap = hasGroups ? new Map([...elementToGroup.entries()].map(([k, v]) => [k, v.name])) : void 0;
   reduceCrossings(
     g,
@@ -26276,7 +26339,7 @@ function layoutC4Components(parsed, systemName, containerName, activeTagGroup) {
     }
   }
   const hasGroups = elementToGroup.size > 0;
-  const g = hasGroups ? new dagre5.graphlib.Graph({ compound: true }) : new dagre5.graphlib.Graph();
+  const g = hasGroups ? new dagre4.graphlib.Graph({ compound: true }) : new dagre4.graphlib.Graph();
   g.setDefaultEdgeLabel(() => ({}));
   if (hasGroups) {
     const seenGroups = /* @__PURE__ */ new Set();
@@ -26360,7 +26423,7 @@ function layoutC4Components(parsed, systemName, containerName, activeTagGroup) {
       g.setEdge(rel.sourceName, rel.targetName, { label: rel.label ?? "" });
     }
   }
-  dagre5.layout(g);
+  dagre4.layout(g);
   const nodeGroupMap = hasGroups ? new Map([...elementToGroup.entries()].map(([k, v]) => [k, v.name])) : void 0;
   reduceCrossings(
     g,
@@ -26649,7 +26712,7 @@ function layoutC4Deployment(parsed, activeTagGroup) {
   for (const r of refEntries) {
     nameToElement.set(r.element.name, r.element);
   }
-  const g = new dagre5.graphlib.Graph({ compound: true });
+  const g = new dagre4.graphlib.Graph({ compound: true });
   g.setDefaultEdgeLabel(() => ({}));
   for (const [infraId] of infraIds) {
     g.setNode(infraId, {});
@@ -26693,7 +26756,7 @@ function layoutC4Deployment(parsed, activeTagGroup) {
       g.setEdge(rel.sourceName, rel.targetName, { label: rel.label ?? "" });
     }
   }
-  dagre5.layout(g);
+  dagre4.layout(g);
   const nodeInfraMap = /* @__PURE__ */ new Map();
   for (const r of refEntries) nodeInfraMap.set(r.element.name, r.infraId);
   reduceCrossings(
@@ -27925,7 +27988,7 @@ var layout_exports9 = {};
 __export(layout_exports9, {
   layoutGraph: () => layoutGraph
 });
-import dagre6 from "@dagrejs/dagre";
+import dagre5 from "@dagrejs/dagre";
 function computeNodeWidth(label, shape) {
   if (shape === "pseudostate") return 24;
   const base = Math.max(120, label.length * 9 + 40);
@@ -27958,7 +28021,7 @@ function layoutGraph(graph, options) {
   if (allNodes.length === 0) {
     return { nodes: [], edges: [], groups: [], width: 0, height: 0 };
   }
-  const g = new dagre6.graphlib.Graph({ compound: true });
+  const g = new dagre5.graphlib.Graph({ compound: true });
   g.setGraph({
     rankdir: graph.direction,
     nodesep: 50,
@@ -27994,7 +28057,7 @@ function layoutGraph(graph, options) {
       label: edge.label ?? ""
     });
   }
-  dagre6.layout(g);
+  dagre5.layout(g);
   const collapsedGroupIds = collapsedChildCounts ? new Set(collapsedChildCounts.keys()) : /* @__PURE__ */ new Set();
   const layoutNodes = allNodes.map((node) => {
     const pos = g.node(node.id);
@@ -28428,7 +28491,7 @@ function renderFlowchart(container, graph, layout, palette, isDark, onClickItem,
       endTerminalIds.add(node.id);
     }
   }
-  const colorOff = graph.options?.color === "off";
+  const colorOff = graph.options?.["color"] === "off";
   const solid = graph.options?.["solid-fill"] === "on";
   for (const node of layout.nodes) {
     const nodeG = contentG.append("g").attr("transform", `translate(${node.x}, ${node.y})`).attr("class", "fc-node").attr("data-line-number", String(node.lineNumber)).attr("data-node-id", node.id);
@@ -29357,7 +29420,7 @@ __export(layout_exports10, {
   layoutInfra: () => layoutInfra,
   separateGroups: () => separateGroups
 });
-import dagre7 from "@dagrejs/dagre";
+import dagre6 from "@dagrejs/dagre";
 function countDisplayProps(node, expanded, options) {
   if (!expanded) return 0;
   let count = node.properties.filter((p) => DISPLAY_KEYS.has(p.key)).length;
@@ -29660,7 +29723,7 @@ function layoutInfra(computed, expandedNodeIds, collapsedNodes) {
     };
   }
   const isLR = computed.direction !== "TB";
-  const g = new dagre7.graphlib.Graph();
+  const g = new dagre6.graphlib.Graph();
   g.setGraph({
     rankdir: computed.direction === "TB" ? "TB" : "LR",
     nodesep: isLR ? 70 : 60,
@@ -29711,7 +29774,7 @@ function layoutInfra(computed, expandedNodeIds, collapsedNodes) {
       g.setEdge(edge.sourceId, edge.targetId, { label: edge.label });
     }
   }
-  dagre7.layout(g);
+  dagre6.layout(g);
   const layoutNodes = computed.nodes.map((node) => {
     const pos = g.node(node.id);
     return {
@@ -30620,7 +30683,7 @@ function renderGroups(svg, groups, palette, _isDark) {
     }
   }
 }
-function renderEdgePaths(svg, edges, nodes, groups, palette, isDark, animate, direction, speedMultiplier = 1) {
+function renderEdgePaths(svg, edges, nodes, groups, palette, _isDark, animate, direction, speedMultiplier = 1) {
   const nodeMap = new Map(nodes.map((n) => [n.id, n]));
   const maxRps = Math.max(...edges.map((e) => e.computedRps), 1);
   const { srcPts, tgtPts } = computePortPts(edges, nodeMap, direction);
@@ -30661,7 +30724,7 @@ function renderEdgePaths(svg, edges, nodes, groups, palette, isDark, animate, di
     }
   }
 }
-function renderEdgeLabels(svg, edges, nodes, groups, palette, isDark, animate, direction) {
+function renderEdgeLabels(svg, edges, nodes, groups, palette, _isDark, animate, direction) {
   const nodeMap = new Map(nodes.map((n) => [n.id, n]));
   const { srcPts, tgtPts } = computePortPts(edges, nodeMap, direction);
   for (const edge of edges) {
@@ -31400,7 +31463,7 @@ function sampleBetaPert(o, m, p, rng) {
   const beta = 1 + 4 * (p - m) / range;
   return o + sampleBeta(alpha, beta, rng) * range;
 }
-function simulate(resolved, expanded, predecessors, successors, topo, terminals, poisoned, opts) {
+function simulate(resolved, expanded, _predecessors, _successors, topo, terminals, poisoned, opts) {
   const rng = mulberry32(opts.seed);
   const expById = /* @__PURE__ */ new Map();
   for (const e of expanded) expById.set(e.id, e);
@@ -32413,7 +32476,7 @@ __export(layout_exports11, {
   layoutPert: () => layoutPert,
   relayoutPert: () => relayoutPert
 });
-import dagre8 from "@dagrejs/dagre";
+import dagre7 from "@dagrejs/dagre";
 function computeNodeSizing(resolved) {
   const unit = resolved.options.timeUnit;
   const sprintMode = resolved.options.sprintMode;
@@ -32521,7 +32584,7 @@ function relayoutPert(resolved, overrides, collapsedGroupIds = /* @__PURE__ */ n
     }
   }
   const dagreId = (id) => memberToGroup.get(id) ?? id;
-  const g = new dagre8.graphlib.Graph();
+  const g = new dagre7.graphlib.Graph();
   g.setGraph({
     rankdir: resolved.options.direction,
     nodesep: 50,
@@ -32560,7 +32623,7 @@ function relayoutPert(resolved, overrides, collapsedGroupIds = /* @__PURE__ */ n
     seenEdges.add(k);
     g.setEdge(src, tgt, {});
   }
-  dagre8.layout(g);
+  dagre7.layout(g);
   const swimApplied = applySwimLanes(
     g,
     resolved,
@@ -32680,7 +32743,7 @@ function relayoutPert(resolved, overrides, collapsedGroupIds = /* @__PURE__ */ n
     height: totalH + DIAGRAM_PADDING10
   };
 }
-function applySwimLanes(g, resolved, memberToGroup, collapsedGroupIds) {
+function applySwimLanes(g, resolved, _memberToGroup, collapsedGroupIds) {
   const expanded = resolved.groups.filter(
     (rg) => !collapsedGroupIds.has(rg.group.id)
   );
@@ -32906,7 +32969,7 @@ function reduceCrossings2(g, direction) {
     buckets.get(key).push(id);
   }
   const edges = g.edges().map((e) => ({ v: e.v, w: e.w }));
-  const countCrossings = () => {
+  const countCrossings2 = () => {
     let total = 0;
     for (let i = 0; i < edges.length; i++) {
       const a = edges[i];
@@ -32919,13 +32982,13 @@ function reduceCrossings2(g, direction) {
         const b1 = g.node(b.v);
         const b2 = g.node(b.w);
         if (!b1 || !b2) continue;
-        if (segmentsCross(a1, a2, b1, b2)) total++;
+        if (segmentsCross2(a1, a2, b1, b2)) total++;
       }
     }
     return total;
   };
   const MAX_ITER = 8;
-  let baseline = countCrossings();
+  let baseline = countCrossings2();
   if (baseline === 0) return;
   for (let iter = 0; iter < MAX_ITER; iter++) {
     let improved = false;
@@ -32943,7 +33006,7 @@ function reduceCrossings2(g, direction) {
         const bv = bn[slotAxis];
         an[slotAxis] = bv;
         bn[slotAxis] = av;
-        const after = countCrossings();
+        const after = countCrossings2();
         if (after < baseline) {
           baseline = after;
           improved = true;
@@ -32964,7 +33027,7 @@ function reduceCrossings2(g, direction) {
     data.points = smoothEdge(src, tgt, direction);
   }
 }
-function segmentsCross(a1, a2, b1, b2) {
+function segmentsCross2(a1, a2, b1, b2) {
   const ccw = (p, q, r) => (q.x - p.x) * (r.y - p.y) - (q.y - p.y) * (r.x - p.x);
   const d1 = ccw(b1, b2, a1);
   const d2 = ccw(b1, b2, a2);
@@ -34972,12 +35035,6 @@ function calculateSchedule(parsed) {
   const warn2 = (line12, message) => {
     diagnostics.push(makeDgmoError(line12, message, "warning"));
   };
-  const _fail = (line12, message) => {
-    const diag = makeDgmoError(line12, message);
-    diagnostics.push(diag);
-    result.error = formatDgmoError(diag);
-    return result;
-  };
   const holidaySet = buildHolidaySet(parsed.holidays);
   let projectStart;
   if (parsed.options.start) {
@@ -35002,7 +35059,6 @@ function calculateSchedule(parsed) {
   }
   buildImplicitDeps(parsed.nodes, taskMap);
   for (const task of allTasks2) {
-    const _node = taskMap.get(task.id);
     for (const dep of task.dependencies) {
       const resolved = resolveTaskName(dep.targetName, allTasks2);
       if (isResolverError(resolved)) {
@@ -36543,7 +36599,7 @@ function buildControlsToggles(hasCriticalPath, criticalPathActive, hasDependenci
   }
   return toggles;
 }
-function renderTagLegend(svg, chartG, tagGroups, activeGroupName, chartLeftMargin, chartInnerWidth, legendY, palette, isDark, hasCriticalPath, criticalPathActive, optionLineNumbers, onToggle, onToggleControlsExpand, currentSwimlaneGroup, onSwimlaneChange, legendViewMode, resolvedTasks, controlsExpanded = false, hasDependencies = false, dependenciesActive = false, onControlsToggle) {
+function renderTagLegend(svg, chartG, tagGroups, activeGroupName, chartLeftMargin, chartInnerWidth, legendY, palette, isDark, hasCriticalPath, criticalPathActive, _optionLineNumbers, onToggle, onToggleControlsExpand, currentSwimlaneGroup, onSwimlaneChange, legendViewMode, resolvedTasks, controlsExpanded = false, hasDependencies = false, dependenciesActive = false, onControlsToggle) {
   let visibleGroups;
   if (activeGroupName) {
     const activeGroup = tagGroups.filter(
@@ -37506,7 +37562,7 @@ function resolveTaskColor(rt, activeTagGroup, resolved, seriesColors2, palette)
   }
   return palette.accent || seriesColors2[0] || "#4a90d9";
 }
-function renderTimeScaleHorizontal(g, scale, innerWidth, innerHeight, textColor) {
+function renderTimeScaleHorizontal(g, scale, _innerWidth, innerHeight, textColor) {
   const [domainMin, domainMax] = scale.domain();
   const ticks = computeTimeTicks(domainMin, domainMax, scale);
   if (ticks.length < 2) return;
@@ -37753,7 +37809,7 @@ function renderState(container, graph, layout, palette, isDark, onClickItem, exp
   for (const group of layout.groups) {
     if (group.collapsed) collapsedGroupIds.add(group.id);
   }
-  const colorOff = graph.options?.color === "off";
+  const colorOff = graph.options?.["color"] === "off";
   const solid = graph.options?.["solid-fill"] === "on";
   for (const node of layout.nodes) {
     const isCollapsedGroup = collapsedGroupIds.has(node.id);
@@ -38152,7 +38208,7 @@ function renderQuadrantFocus(container, parsed, quadrantPosition, palette, isDar
     }
   }
 }
-function renderQuarterCircle(svg, parsed, quadrant, qColor, palette, isDark, width, height, mutedColor, tooltip, rootContainer, onClickItem) {
+function renderQuarterCircle(svg, parsed, quadrant, qColor, palette, isDark, width, height, mutedColor, _tooltip, rootContainer, onClickItem) {
   const padding = 8;
   const size = Math.min(width - padding, height - padding);
   const maxRadius = size * 0.95;
@@ -39022,7 +39078,7 @@ function estimateListingHeight(parsed) {
   );
   return LISTING_LINE_HEIGHT * (maxBlipsInQuadrant + 1) + LISTING_LINE_HEIGHT + LISTING_TOP_MARGIN;
 }
-function createBlipPopover(container, palette, isDark) {
+function createBlipPopover(container, _palette, isDark) {
   container.style.position = "relative";
   const existing = container.querySelector(
     "[data-blip-popover]"
@@ -40889,7 +40945,7 @@ function computeEdgeLabelPosition(midAngle, radius, cx, cy, lineCount, maxCharLe
     labelAngle: best.labelAngle
   };
 }
-function fitToCanvas(nodes, edges, parsed, cx, cy, radius, width, height, _isClockwise) {
+function fitToCanvas(nodes, edges, parsed, _cx, _cy, radius, width, height, _isClockwise) {
   const PADDING3 = 30;
   let contentMinX = Infinity, contentMaxX = -Infinity;
   let contentMinY = Infinity, contentMaxY = -Infinity;
@@ -42399,7 +42455,7 @@ function renderPhaseBar(svg, phase, x, y, width, palette, collapsed, autoColor,
     });
   }
 }
-function renderTaskRow(svg, task, parsed, x, y, labelW, roleX, roleColW, palette, surfaceBg, solid, taskDiagnostics, hasAnyDiagnostic, rowContent, onClickLine, _onMarkerDragStart) {
+function renderTaskRow(svg, task, parsed, x, y, labelW, roleX, roleColW, palette, surfaceBg, solid, taskDiagnostics, _hasAnyDiagnostic, rowContent, onClickLine, _onMarkerDragStart) {
   const rowG = svg.append("g").attr("class", "raci-task-row").attr("data-task-id", task.id).attr("data-line-number", String(task.lineNumber));
   const labelX = x + 8;
   const labelMaxW = labelW - 16;
@@ -43205,7 +43261,6 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
   const messages = collapsed ? collapsed.messages : parsed.messages;
   const elements = collapsed ? collapsed.elements : parsed.elements;
   const groups = collapsed ? collapsed.groups : parsed.groups;
-  const collapsedGroupIds = collapsed?.collapsedGroupIds ?? /* @__PURE__ */ new Map();
   const collapsedSections = options?.collapsedSections;
   const sourceParticipants = collapsed ? collapsed.participants : parsed.participants;
   const participants = applyPositionOverrides(
@@ -43233,7 +43288,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     return Math.min(NOTE_MAX_W, laneMax);
   };
   const charsForWidth = (maxW) => Math.floor((maxW - NOTE_PAD_H * 2 - NOTE_FOLD) / NOTE_CHAR_W);
-  const activationsOff = parsedOptions.activations?.toLowerCase() === "off";
+  const activationsOff = parsedOptions["activations"]?.toLowerCase() === "off";
   const activeTagGroup = resolveActiveTagGroup(
     parsed.tagGroups,
     parsedOptions["active-tag"],
@@ -46189,7 +46244,7 @@ function renderTimelineGroupLegend(g, groups, groupColorMap, textColor, palette,
     legendX += pillW + GAP;
   }
 }
-function renderTimeline(container, parsed, palette, isDark, onClickItem, exportDims, activeTagGroup, swimlaneTagGroup, onTagStateChange, viewMode) {
+function setupTimeline(container, parsed, palette, isDark, exportDims, activeTagGroup, swimlaneTagGroup) {
   d3Selection22.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const solid = parsed.solidFill === true;
   const {
@@ -46198,19 +46253,17 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
     timelineEras,
     timelineMarkers,
     timelineSort,
-    timelineScale,
-    timelineSwimlanes,
     orientation
   } = parsed;
-  const title = parsed.noTitle ? null : parsed.title;
-  if (timelineEvents.length === 0) return;
-  if (swimlaneTagGroup == null && timelineSort === "tag" && parsed.timelineDefaultSwimlaneTG) {
-    swimlaneTagGroup = parsed.timelineDefaultSwimlaneTG;
+  if (timelineEvents.length === 0) return null;
+  let resolvedSwimlaneTG = swimlaneTagGroup ?? null;
+  if (resolvedSwimlaneTG == null && timelineSort === "tag" && parsed.timelineDefaultSwimlaneTG) {
+    resolvedSwimlaneTG = parsed.timelineDefaultSwimlaneTG;
   }
   const tooltip = createTooltip2(container, palette, isDark);
   const width = exportDims?.width ?? container.clientWidth;
   const height = exportDims?.height ?? container.clientHeight;
-  if (width <= 0 || height <= 0) return;
+  if (width <= 0 || height <= 0) return null;
   const isVertical = orientation === "vertical";
   const textColor = palette.text;
   const mutedColor = palette.border;
@@ -46222,8 +46275,8 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
     groupColorMap.set(grp.name, grp.color ?? colors[i % colors.length]);
   });
   let tagLanes = null;
-  if (swimlaneTagGroup) {
-    const tagKey = swimlaneTagGroup.toLowerCase();
+  if (resolvedSwimlaneTG) {
+    const tagKey = resolvedSwimlaneTG.toLowerCase();
     const tagGroup = parsed.timelineTagGroups.find(
       (g) => g.name.toLowerCase() === tagKey
     );
@@ -46254,7 +46307,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
       }
     }
   }
-  const effectiveColorTG = activeTagGroup ?? swimlaneTagGroup ?? null;
+  const effectiveColorTG = activeTagGroup ?? resolvedSwimlaneTG ?? null;
   function eventColor(ev) {
     if (effectiveColorTG) {
       const tagColor = resolveTagColor(
@@ -46310,6 +46363,30 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
     }
   }
   const datePadding = (maxDate - minDate) * 0.05 || 0.5;
+  const tagLegendReserve = parsed.timelineTagGroups.length > 0 ? 36 : 0;
+  return {
+    width,
+    height,
+    isVertical,
+    tooltip,
+    solid,
+    textColor,
+    mutedColor,
+    bgColor,
+    bg,
+    swimlaneTagGroup: resolvedSwimlaneTG,
+    groupColorMap,
+    tagLanes,
+    eventColor,
+    minDate,
+    maxDate,
+    datePadding,
+    earliestStartDateStr,
+    latestEndDateStr,
+    tagLegendReserve
+  };
+}
+function makeTimelineHoverHelpers() {
   const FADE_OPACITY3 = 0.1;
   function fadeToGroup(g, groupName) {
     g.selectAll(".tl-event").each(function() {
@@ -46409,337 +46486,683 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
       evG.attr(`data-tag-${key}`, value.toLowerCase());
     }
   }
-  const tagLegendReserve = parsed.timelineTagGroups.length > 0 ? 36 : 0;
-  if (isVertical) {
-    const useGroupedVertical = tagLanes != null || timelineSort === "group" && timelineGroups.length > 0;
-    if (useGroupedVertical) {
-      let laneNames;
-      let laneEventsByName;
-      if (tagLanes) {
-        laneNames = tagLanes.map((l) => l.name);
-        laneEventsByName = new Map(tagLanes.map((l) => [l.name, l.events]));
-      } else {
-        const groupNames = timelineGroups.map((gr) => gr.name);
-        const ungroupedEvents = timelineEvents.filter(
-          (ev) => ev.group === null || !groupNames.includes(ev.group)
-        );
-        laneNames = ungroupedEvents.length > 0 ? [...groupNames, "(Other)"] : groupNames;
-        laneEventsByName = new Map(
-          laneNames.map((name) => [
-            name,
-            timelineEvents.filter(
-              (ev) => name === "(Other)" ? ev.group === null || !groupNames.includes(ev.group) : ev.group === name
-            )
-          ])
-        );
+  return {
+    FADE_OPACITY: FADE_OPACITY3,
+    fadeToGroup,
+    fadeToEra,
+    fadeToMarker,
+    fadeReset,
+    fadeToTagValue,
+    setTagAttrs
+  };
+}
+function renderTimelineTagLegendOverlay(container, parsed, palette, isDark, setup, hovers, onClickItem, exportDims, swimlaneTagGroup, activeTagGroup, onTagStateChange, viewMode) {
+  if (parsed.timelineTagGroups.length === 0) return;
+  const { width, textColor, groupColorMap, solid } = setup;
+  const { FADE_OPACITY: FADE_OPACITY3, fadeReset, fadeToTagValue } = hovers;
+  const title = parsed.noTitle ? null : parsed.title;
+  const { timelineEvents } = parsed;
+  const LG_HEIGHT = LEGEND_HEIGHT;
+  const LG_PILL_PAD = LEGEND_PILL_PAD;
+  const LG_PILL_FONT_SIZE = LEGEND_PILL_FONT_SIZE;
+  const LG_CAPSULE_PAD = LEGEND_CAPSULE_PAD;
+  const LG_DOT_R = LEGEND_DOT_R;
+  const LG_ENTRY_FONT_SIZE = LEGEND_ENTRY_FONT_SIZE;
+  const LG_ENTRY_DOT_GAP = LEGEND_ENTRY_DOT_GAP;
+  const LG_ENTRY_TRAIL = LEGEND_ENTRY_TRAIL;
+  const LG_ICON_W = 20;
+  const mainSvg = d3Selection22.select(container).select("svg");
+  const mainG = mainSvg.select("g");
+  if (!mainSvg.empty() && !mainG.empty()) {
+    let drawSwimlaneIcon4 = function(parent, x, y, isSwimActive) {
+      const iconG = parent.append("g").attr("class", "tl-swimlane-icon").attr("transform", `translate(${x}, ${y})`).style("cursor", "pointer");
+      const barColor = isSwimActive ? palette.primary : palette.textMuted;
+      const barOpacity = isSwimActive ? 1 : 0.35;
+      const bars = [
+        { y: 0, w: 8 },
+        { y: 4, w: 12 },
+        { y: 8, w: 6 }
+      ];
+      for (const bar of bars) {
+        iconG.append("rect").attr("x", 0).attr("y", bar.y).attr("width", bar.w).attr("height", 2).attr("rx", 1).attr("fill", barColor).attr("opacity", barOpacity);
       }
-      const laneCount = laneNames.length;
-      const scaleMargin = timelineScale ? 40 : 0;
-      const markerMargin = timelineMarkers.length > 0 ? 30 : 0;
-      const margin = {
-        top: 104 + markerMargin + tagLegendReserve,
-        right: 40 + scaleMargin,
-        bottom: 40,
-        left: 60 + scaleMargin
-      };
-      const innerWidth = width - margin.left - margin.right;
-      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 = d3Selection22.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,
-        title,
-        parsed.titleLineNumber,
-        width,
-        textColor,
-        onClickItem
-      );
-      renderEras(
-        g,
-        timelineEras,
-        yScale,
-        true,
-        innerWidth,
-        innerHeight,
-        (s, e) => fadeToEra(g, s, e),
-        () => fadeReset(g),
-        timelineScale,
-        tooltip,
-        palette
-      );
-      renderMarkers(
-        g,
-        timelineMarkers,
-        yScale,
-        true,
-        innerWidth,
-        innerHeight,
-        (d) => fadeToMarker(g, d),
-        () => fadeReset(g),
-        timelineScale,
-        tooltip,
-        palette
+      return iconG;
+    }, relayout2 = function() {
+      renderTimeline(
+        container,
+        parsed,
+        palette,
+        isDark,
+        onClickItem,
+        exportDims,
+        currentActiveGroup,
+        currentSwimlaneGroup,
+        onTagStateChange,
+        viewMode
       );
-      if (timelineScale) {
-        renderTimeScale(
-          g,
-          yScale,
-          true,
-          innerWidth,
-          innerHeight,
-          textColor,
-          minDate,
-          maxDate,
-          formatBoundaryLabel(earliestStartDateStr, latestEndDateStr),
-          formatBoundaryLabel(latestEndDateStr, earliestStartDateStr)
+    }, drawLegend2 = function() {
+      mainSvg.selectAll(".tl-tag-legend-group").remove();
+      mainSvg.selectAll(".tl-tag-legend-container").remove();
+      const effectiveColorKey = (currentActiveGroup ?? currentSwimlaneGroup)?.toLowerCase() ?? null;
+      const visibleGroups = viewMode ? legendGroups.filter(
+        (lg) => effectiveColorKey != null && lg.group.name.toLowerCase() === effectiveColorKey
+      ) : legendGroups;
+      if (visibleGroups.length === 0) return;
+      const legendContainer = mainSvg.append("g").attr("class", "tl-tag-legend-container");
+      if (currentActiveGroup) {
+        legendContainer.attr(
+          "data-legend-active",
+          currentActiveGroup.toLowerCase()
         );
       }
-      if (timelineSwimlanes || tagLanes) {
-        laneNames.forEach((laneName, laneIdx) => {
-          const laneX = laneIdx * laneWidth;
-          const fillColor = laneIdx % 2 === 0 ? textColor : "transparent";
-          g.append("rect").attr("class", "tl-swimlane").attr("data-group", laneName).attr("x", laneX).attr("y", 0).attr("width", laneWidth).attr("height", innerHeight).attr("fill", fillColor).attr("opacity", 0.06);
-        });
-      }
-      laneNames.forEach((laneName, laneIdx) => {
-        const laneX = laneIdx * laneWidth;
-        const laneColor = groupColorMap.get(laneName) ?? textColor;
-        const laneCenter = laneX + laneWidth / 2;
-        const headerG = g.append("g").attr("class", "tl-lane-header").attr("data-group", laneName).style("cursor", "pointer").on("mouseenter", () => fadeToGroup(g, laneName)).on("mouseleave", () => fadeReset(g));
-        headerG.append("text").attr("x", laneCenter).attr("y", -15).attr("text-anchor", "middle").attr("fill", laneColor).attr("font-size", "12px").attr("font-weight", "600").text(laneName);
-        g.append("line").attr("x1", laneCenter).attr("y1", 0).attr("x2", laneCenter).attr("y2", innerHeight).attr("stroke", mutedColor).attr("stroke-width", 1).attr("stroke-dasharray", "4,4");
-        const laneEvents = laneEventsByName.get(laneName) ?? [];
-        for (const ev of laneEvents) {
-          const y = yScale(parseTimelineDate(ev.date));
-          const evG = g.append("g").attr("class", "tl-event").attr("data-group", laneName).attr("data-line-number", String(ev.lineNumber)).attr("data-date", String(parseTimelineDate(ev.date))).attr(
-            "data-end-date",
-            ev.endDate ? String(parseTimelineDate(ev.endDate)) : null
-          ).style("cursor", "pointer").on("mouseenter", function(event) {
-            fadeToGroup(g, laneName);
-            showTooltip(tooltip, buildEventTooltipHtml(ev), event);
-          }).on("mouseleave", function() {
-            fadeReset(g);
-            hideTooltip(tooltip);
-          }).on("mousemove", function(event) {
-            showTooltip(tooltip, buildEventTooltipHtml(ev), event);
-          }).on("click", () => {
-            if (onClickItem && ev.lineNumber) onClickItem(ev.lineNumber);
-          });
-          setTagAttrs(evG, ev);
-          const evColor = eventColor(ev);
-          if (ev.endDate) {
-            const y2 = yScale(parseTimelineDate(ev.endDate));
-            const rectH = Math.max(y2 - y, 4);
-            let fill2 = shapeFill(palette, evColor, isDark, { solid });
-            let stroke2 = evColor;
-            if (ev.uncertain) {
-              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 = d3Selection22.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 },
-                { offset: "100%", opacity: 0 }
-              ]).enter().append("stop").attr("offset", (d) => d.offset).attr("stop-color", mix(laneColor, bg, 30)).attr("stop-opacity", (d) => d.opacity);
-              defsEl.append("linearGradient").attr("id", strokeGradientId).attr("x1", "0%").attr("y1", "0%").attr("x2", "0%").attr("y2", "100%").selectAll("stop").data([
-                { offset: "0%", opacity: 1 },
-                { offset: "80%", opacity: 1 },
-                { offset: "100%", opacity: 0 }
-              ]).enter().append("stop").attr("offset", (d) => d.offset).attr("stop-color", evColor).attr("stop-opacity", (d) => d.opacity);
-              fill2 = `url(#${gradientId})`;
-              stroke2 = `url(#${strokeGradientId})`;
-            }
-            evG.append("rect").attr("x", laneCenter - 6).attr("y", y).attr("width", 12).attr("height", rectH).attr("rx", 4).attr("fill", fill2).attr("stroke", stroke2).attr("stroke-width", 2);
-            evG.append("text").attr("x", laneCenter + 14).attr("y", y + rectH / 2).attr("dy", "0.35em").attr("fill", textColor).attr("font-size", "10px").text(ev.label);
+      const iconAddon = viewMode ? 0 : LG_ICON_W;
+      const centralGroups = visibleGroups.map((lg) => ({
+        name: lg.group.name,
+        entries: lg.group.entries.map((e) => ({
+          value: e.value,
+          color: e.color
+        }))
+      }));
+      const centralActive = viewMode ? effectiveColorKey : currentActiveGroup;
+      const centralConfig = {
+        groups: centralGroups,
+        position: { placement: "top-center", titleRelation: "below-title" },
+        mode: "fixed",
+        capsulePillAddonWidth: iconAddon
+      };
+      const centralState = { activeGroup: centralActive };
+      const centralCallbacks = viewMode ? {} : {
+        onGroupToggle: (groupName) => {
+          currentActiveGroup = currentActiveGroup === groupName.toLowerCase() ? null : groupName.toLowerCase();
+          drawLegend2();
+          recolorEvents2();
+          onTagStateChange?.(currentActiveGroup, currentSwimlaneGroup);
+        },
+        onEntryHover: (groupName, entryValue) => {
+          const tagKey = groupName.toLowerCase();
+          if (entryValue) {
+            const tagVal = entryValue.toLowerCase();
+            fadeToTagValue(mainG, tagKey, tagVal);
+            mainSvg.selectAll("[data-legend-entry]").each(function() {
+              const el = d3Selection22.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(
+                "opacity",
+                eg === tagKey && ev === tagVal ? 1 : FADE_OPACITY3
+              );
+            });
           } else {
-            evG.append("circle").attr("cx", laneCenter).attr("cy", y).attr("r", 4).attr("fill", shapeFill(palette, evColor, isDark, { solid })).attr("stroke", evColor).attr("stroke-width", 2);
-            evG.append("text").attr("x", laneCenter + 10).attr("y", y).attr("dy", "0.35em").attr("fill", textColor).attr("font-size", "10px").text(ev.label);
+            fadeReset(mainG);
+            mainSvg.selectAll("[data-legend-entry]").attr("opacity", 1);
+          }
+        },
+        onGroupRendered: (groupName, groupEl, isActive) => {
+          const groupKey = groupName.toLowerCase();
+          groupEl.attr("data-tag-group", groupKey);
+          if (isActive && !viewMode) {
+            const isSwimActive = currentSwimlaneGroup != null && currentSwimlaneGroup.toLowerCase() === groupKey;
+            const pillWidth3 = measureLegendText(groupName, LG_PILL_FONT_SIZE) + LG_PILL_PAD;
+            const pillXOff = LG_CAPSULE_PAD;
+            const iconX = pillXOff + pillWidth3 + 5;
+            const iconY = (LG_HEIGHT - 10) / 2;
+            const iconEl = drawSwimlaneIcon4(
+              groupEl,
+              iconX,
+              iconY,
+              isSwimActive
+            );
+            iconEl.attr("data-swimlane-toggle", groupKey).on("click", (event) => {
+              event.stopPropagation();
+              currentSwimlaneGroup = currentSwimlaneGroup === groupKey ? null : groupKey;
+              onTagStateChange?.(
+                currentActiveGroup,
+                currentSwimlaneGroup
+              );
+              relayout2();
+            });
           }
         }
-      });
-    } else {
-      const scaleMargin = timelineScale ? 40 : 0;
-      const markerMargin = timelineMarkers.length > 0 ? 30 : 0;
-      const margin = {
-        top: 104 + markerMargin + tagLegendReserve,
-        right: 200,
-        bottom: 40,
-        left: 60 + scaleMargin
       };
-      const innerWidth = width - margin.left - margin.right;
-      const innerHeight = height - margin.top - margin.bottom;
-      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 = d3Selection22.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,
-        title,
-        parsed.titleLineNumber,
-        width,
-        textColor,
-        onClickItem
-      );
-      renderEras(
-        g,
-        timelineEras,
-        yScale,
-        true,
-        innerWidth,
-        innerHeight,
-        (s, e) => fadeToEra(g, s, e),
-        () => fadeReset(g),
-        timelineScale,
-        tooltip,
-        palette
-      );
-      renderMarkers(
-        g,
-        timelineMarkers,
-        yScale,
-        true,
-        innerWidth,
-        innerHeight,
-        (d) => fadeToMarker(g, d),
-        () => fadeReset(g),
-        timelineScale,
-        tooltip,
-        palette
+      const legendInnerG = legendContainer.append("g").attr("transform", `translate(0, ${legendY})`);
+      renderLegendD3(
+        legendInnerG,
+        centralConfig,
+        centralState,
+        palette,
+        isDark,
+        centralCallbacks,
+        width
       );
+    }, recolorEvents2 = function() {
+      const colorTG = currentActiveGroup ?? swimlaneTagGroup ?? null;
+      mainG.selectAll(".tl-event").each(function() {
+        const el = d3Selection22.select(this);
+        const lineNum = el.attr("data-line-number");
+        const ev = lineNum ? eventByLine.get(lineNum) : void 0;
+        if (!ev) return;
+        let color;
+        if (colorTG) {
+          const tagColor = resolveTagColor(
+            ev.metadata,
+            parsed.timelineTagGroups,
+            colorTG
+          );
+          color = tagColor ?? (ev.group && groupColorMap.has(ev.group) ? groupColorMap.get(ev.group) : textColor);
+        } else {
+          color = ev.group && groupColorMap.has(ev.group) ? groupColorMap.get(ev.group) : textColor;
+        }
+        el.selectAll("rect").attr("fill", shapeFill(palette, color, isDark, { solid })).attr("stroke", color);
+        el.selectAll("circle:not(.tl-event-point-outline)").attr("fill", shapeFill(palette, color, isDark, { solid })).attr("stroke", color);
+      });
+    };
+    var drawSwimlaneIcon3 = drawSwimlaneIcon4, relayout = relayout2, drawLegend = drawLegend2, recolorEvents = recolorEvents2;
+    const legendY = title ? 50 : 10;
+    const legendGroups = parsed.timelineTagGroups.map((g) => {
+      const pillW = measureLegendText(g.name, LG_PILL_FONT_SIZE) + LG_PILL_PAD;
+      const iconSpace = viewMode ? 8 : LG_ICON_W + 4;
+      let entryX = LG_CAPSULE_PAD + pillW + iconSpace;
+      for (const entry of g.entries) {
+        const textX = entryX + LG_DOT_R * 2 + LG_ENTRY_DOT_GAP;
+        entryX = textX + measureLegendText(entry.value, LG_ENTRY_FONT_SIZE) + LG_ENTRY_TRAIL;
+      }
+      return {
+        group: g,
+        minifiedWidth: pillW,
+        expandedWidth: entryX + LG_CAPSULE_PAD
+      };
+    });
+    let currentActiveGroup = activeTagGroup ?? null;
+    let currentSwimlaneGroup = swimlaneTagGroup ?? null;
+    const eventByLine = /* @__PURE__ */ new Map();
+    for (const ev of timelineEvents) {
+      eventByLine.set(String(ev.lineNumber), ev);
+    }
+    drawLegend2();
+  }
+}
+function renderTimelineHorizontalTimeSort(container, parsed, palette, isDark, setup, hovers, onClickItem, _exportDims, _swimlaneTagGroup, _activeTagGroup, _onTagStateChange, _viewMode) {
+  const {
+    width,
+    height,
+    tooltip,
+    solid,
+    textColor,
+    bgColor,
+    bg,
+    groupColorMap,
+    eventColor,
+    minDate,
+    maxDate,
+    datePadding,
+    earliestStartDateStr,
+    latestEndDateStr,
+    tagLegendReserve
+  } = setup;
+  const { fadeToGroup, fadeToEra, fadeToMarker, fadeReset, setTagAttrs } = hovers;
+  const {
+    timelineEvents,
+    timelineGroups,
+    timelineEras,
+    timelineMarkers,
+    timelineScale
+  } = parsed;
+  const title = parsed.noTitle ? null : parsed.title;
+  const BAR_H2 = 22;
+  const sorted = timelineEvents.slice().sort((a, b) => parseTimelineDate(a.date) - parseTimelineDate(b.date));
+  const scaleMargin = timelineScale ? 24 : 0;
+  const ERA_ROW_H = 22;
+  const MARKER_ROW_H = 22;
+  const eraReserve = timelineEras.length > 0 ? ERA_ROW_H : 0;
+  const markerReserve = timelineMarkers.length > 0 ? MARKER_ROW_H : 0;
+  const topScaleH = timelineScale ? 40 : 0;
+  const margin = {
+    top: 104 + topScaleH + eraReserve + markerReserve + tagLegendReserve,
+    right: 40,
+    bottom: 40 + scaleMargin,
+    left: 60
+  };
+  const markerLabelY = markerReserve ? -(topScaleH + MARKER_ROW_H / 2) : 0;
+  const eraLabelY = eraReserve ? -(topScaleH + markerReserve + ERA_ROW_H / 2) : 0;
+  const innerWidth = width - margin.left - margin.right;
+  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 = d3Selection22.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,
+    title,
+    parsed.titleLineNumber,
+    width,
+    textColor,
+    onClickItem
+  );
+  renderEras(
+    g,
+    timelineEras,
+    xScale,
+    false,
+    innerWidth,
+    innerHeight,
+    (s, e) => fadeToEra(g, s, e),
+    () => fadeReset(g),
+    timelineScale,
+    tooltip,
+    palette,
+    eraReserve ? eraLabelY : void 0
+  );
+  renderMarkers(
+    g,
+    timelineMarkers,
+    xScale,
+    false,
+    innerWidth,
+    innerHeight,
+    (d) => fadeToMarker(g, d),
+    () => fadeReset(g),
+    timelineScale,
+    tooltip,
+    palette,
+    markerReserve ? markerLabelY : void 0
+  );
+  if (timelineScale) {
+    renderTimeScale(
+      g,
+      xScale,
+      false,
+      innerWidth,
+      innerHeight,
+      textColor,
+      minDate,
+      maxDate,
+      formatBoundaryLabel(earliestStartDateStr, latestEndDateStr),
+      formatBoundaryLabel(latestEndDateStr, earliestStartDateStr)
+    );
+  }
+  if (timelineGroups.length > 0) {
+    const legendY = timelineScale ? -75 : -55;
+    renderTimelineGroupLegend(
+      g,
+      timelineGroups,
+      groupColorMap,
+      textColor,
+      palette,
+      isDark,
+      legendY,
+      (name) => fadeToGroup(g, name),
+      () => fadeReset(g)
+    );
+  }
+  sorted.forEach((ev, i) => {
+    const y = i * rowH + rowH / 2;
+    const x = xScale(parseTimelineDate(ev.date));
+    const color = eventColor(ev);
+    const evG = g.append("g").attr("class", "tl-event").attr("data-group", ev.group || "").attr("data-line-number", String(ev.lineNumber)).attr("data-date", String(parseTimelineDate(ev.date))).attr(
+      "data-end-date",
+      ev.endDate ? String(parseTimelineDate(ev.endDate)) : null
+    ).style("cursor", "pointer").on("mouseenter", function(event) {
+      if (ev.group && timelineGroups.length > 0) fadeToGroup(g, ev.group);
       if (timelineScale) {
-        renderTimeScale(
+        showEventDatesOnScale(
           g,
-          yScale,
-          true,
-          innerWidth,
+          xScale,
+          ev.date,
+          ev.endDate,
           innerHeight,
-          textColor,
-          minDate,
-          maxDate,
-          formatBoundaryLabel(earliestStartDateStr, latestEndDateStr),
-          formatBoundaryLabel(latestEndDateStr, earliestStartDateStr)
+          color
         );
+      } else {
+        showTooltip(tooltip, buildEventTooltipHtml(ev), event);
       }
-      if (timelineGroups.length > 0) {
-        renderTimelineGroupLegend(
-          g,
-          timelineGroups,
-          groupColorMap,
-          textColor,
-          palette,
-          isDark,
-          -55,
-          (name) => fadeToGroup(g, name),
-          () => fadeReset(g)
-        );
+    }).on("mouseleave", function() {
+      fadeReset(g);
+      if (timelineScale) {
+        hideEventDatesOnScale(g);
+      } else {
+        hideTooltip(tooltip);
       }
-      g.append("line").attr("x1", axisX).attr("y1", 0).attr("x2", axisX).attr("y2", innerHeight).attr("stroke", mutedColor).attr("stroke-width", 1).attr("stroke-dasharray", "4,4");
-      for (const ev of sorted) {
-        const y = yScale(parseTimelineDate(ev.date));
-        const color = eventColor(ev);
-        const evG = g.append("g").attr("class", "tl-event").attr("data-group", ev.group || "").attr("data-line-number", String(ev.lineNumber)).attr("data-date", String(parseTimelineDate(ev.date))).attr(
-          "data-end-date",
-          ev.endDate ? String(parseTimelineDate(ev.endDate)) : null
-        ).style("cursor", "pointer").on("mouseenter", function(event) {
-          if (ev.group && timelineGroups.length > 0) fadeToGroup(g, ev.group);
+    }).on("mousemove", function(event) {
+      if (!timelineScale) {
+        showTooltip(tooltip, buildEventTooltipHtml(ev), event);
+      }
+    }).on("click", () => {
+      if (onClickItem && ev.lineNumber) onClickItem(ev.lineNumber);
+    });
+    setTagAttrs(evG, ev);
+    if (ev.endDate) {
+      const x2 = xScale(parseTimelineDate(ev.endDate));
+      const rectW = Math.max(x2 - x, 4);
+      const estLabelWidth = ev.label.length * 7 + 16;
+      const labelFitsInside = rectW >= estLabelWidth;
+      let fill2 = shapeFill(palette, color, isDark, { solid });
+      let stroke2 = color;
+      if (ev.uncertain) {
+        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 = d3Selection22.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 },
+          { offset: "100%", opacity: 0 }
+        ]).enter().append("stop").attr("offset", (d) => d.offset).attr("stop-color", mix(color, bg, 30)).attr("stop-opacity", (d) => d.opacity);
+        defsEl.append("linearGradient").attr("id", strokeGradientId).attr("x1", "0%").attr("y1", "0%").attr("x2", "100%").attr("y2", "0%").selectAll("stop").data([
+          { offset: "0%", opacity: 1 },
+          { offset: "80%", opacity: 1 },
+          { offset: "100%", opacity: 0 }
+        ]).enter().append("stop").attr("offset", (d) => d.offset).attr("stop-color", color).attr("stop-opacity", (d) => d.opacity);
+        fill2 = `url(#${gradientId})`;
+        stroke2 = `url(#${strokeGradientId})`;
+      }
+      evG.append("rect").attr("x", x).attr("y", y - BAR_H2 / 2).attr("width", rectW).attr("height", BAR_H2).attr("rx", 4).attr("fill", fill2).attr("stroke", stroke2).attr("stroke-width", 2);
+      if (labelFitsInside) {
+        evG.append("text").attr("x", x + 8).attr("y", y).attr("dy", "0.35em").attr("text-anchor", "start").attr("fill", textColor).attr("font-size", "13px").text(ev.label);
+      } else {
+        const wouldFlipLeft = x + rectW > innerWidth * 0.6;
+        const labelFitsLeft = x - 6 - estLabelWidth > 0;
+        const flipLeft = wouldFlipLeft && labelFitsLeft;
+        evG.append("text").attr("x", flipLeft ? x - 6 : x + rectW + 6).attr("y", y).attr("dy", "0.35em").attr("text-anchor", flipLeft ? "end" : "start").attr("fill", textColor).attr("font-size", "13px").text(ev.label);
+      }
+    } else {
+      const estLabelWidth = ev.label.length * 7;
+      const wouldFlipLeft = x > innerWidth * 0.6;
+      const labelFitsLeft = x - 10 - estLabelWidth > 0;
+      const flipLeft = wouldFlipLeft && labelFitsLeft;
+      evG.append("circle").attr("cx", x).attr("cy", y).attr("r", 5).attr("fill", shapeFill(palette, color, isDark, { solid })).attr("stroke", color).attr("stroke-width", 2);
+      evG.append("text").attr("x", flipLeft ? x - 10 : x + 10).attr("y", y).attr("dy", "0.35em").attr("text-anchor", flipLeft ? "end" : "start").attr("fill", textColor).attr("font-size", "12px").text(ev.label);
+    }
+  });
+}
+function renderTimelineHorizontalGrouped(container, parsed, palette, isDark, setup, hovers, onClickItem, _exportDims, _swimlaneTagGroup, _activeTagGroup, _onTagStateChange, _viewMode) {
+  const {
+    width,
+    height,
+    tooltip,
+    solid,
+    textColor,
+    bgColor,
+    bg,
+    groupColorMap,
+    tagLanes,
+    eventColor,
+    minDate,
+    maxDate,
+    datePadding,
+    earliestStartDateStr,
+    latestEndDateStr,
+    tagLegendReserve
+  } = setup;
+  const { fadeToGroup, fadeToEra, fadeToMarker, fadeReset, setTagAttrs } = hovers;
+  const {
+    timelineEvents,
+    timelineGroups,
+    timelineEras,
+    timelineMarkers,
+    timelineScale,
+    timelineSwimlanes
+  } = parsed;
+  const title = parsed.noTitle ? null : parsed.title;
+  const BAR_H2 = 22;
+  const GROUP_GAP3 = 12;
+  let lanes;
+  if (tagLanes) {
+    lanes = tagLanes;
+  } else {
+    const groupNames = timelineGroups.map((gr) => gr.name);
+    const ungroupedEvents = timelineEvents.filter(
+      (ev) => ev.group === null || !groupNames.includes(ev.group)
+    );
+    const laneNames = ungroupedEvents.length > 0 ? [...groupNames, "(Other)"] : groupNames;
+    lanes = laneNames.map((name) => ({
+      name,
+      events: timelineEvents.filter(
+        (ev) => name === "(Other)" ? ev.group === null || !groupNames.includes(ev.group) : ev.group === name
+      )
+    }));
+  }
+  const totalEventRows = lanes.reduce((s, l) => s + l.events.length, 0);
+  const scaleMargin = timelineScale ? 24 : 0;
+  const ERA_ROW_H = 22;
+  const MARKER_ROW_H = 22;
+  const eraReserve = timelineEras.length > 0 ? ERA_ROW_H : 0;
+  const markerReserve = timelineMarkers.length > 0 ? MARKER_ROW_H : 0;
+  const topScaleH = timelineScale ? 40 : 0;
+  const maxGroupNameLen = Math.max(...lanes.map((l) => l.name.length));
+  const dynamicLeftMargin = Math.max(120, maxGroupNameLen * 7 + 30);
+  const baseTopMargin = title ? 50 : 20;
+  const margin = {
+    top: baseTopMargin + topScaleH + eraReserve + markerReserve + tagLegendReserve,
+    right: 40,
+    bottom: 40 + scaleMargin,
+    left: dynamicLeftMargin
+  };
+  const markerLabelY = markerReserve ? -(topScaleH + MARKER_ROW_H / 2) : 0;
+  const eraLabelY = eraReserve ? -(topScaleH + markerReserve + ERA_ROW_H / 2) : 0;
+  const innerWidth = width - margin.left - margin.right;
+  const innerHeight = height - margin.top - margin.bottom;
+  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 = d3Selection22.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,
+    title,
+    parsed.titleLineNumber,
+    width,
+    textColor,
+    onClickItem
+  );
+  renderEras(
+    g,
+    timelineEras,
+    xScale,
+    false,
+    innerWidth,
+    innerHeight,
+    (s, e) => fadeToEra(g, s, e),
+    () => fadeReset(g),
+    timelineScale,
+    tooltip,
+    palette,
+    eraReserve ? eraLabelY : void 0
+  );
+  renderMarkers(
+    g,
+    timelineMarkers,
+    xScale,
+    false,
+    innerWidth,
+    innerHeight,
+    (d) => fadeToMarker(g, d),
+    () => fadeReset(g),
+    timelineScale,
+    tooltip,
+    palette,
+    markerReserve ? markerLabelY : void 0
+  );
+  if (timelineScale) {
+    renderTimeScale(
+      g,
+      xScale,
+      false,
+      innerWidth,
+      innerHeight,
+      textColor,
+      minDate,
+      maxDate,
+      formatBoundaryLabel(earliestStartDateStr, latestEndDateStr),
+      formatBoundaryLabel(latestEndDateStr, earliestStartDateStr)
+    );
+  }
+  let curY = 0;
+  if (timelineSwimlanes || tagLanes) {
+    let swimY = 0;
+    lanes.forEach((lane, idx) => {
+      const laneSpan = lane.events.length * rowH;
+      const fillColor = idx % 2 === 0 ? textColor : "transparent";
+      g.append("rect").attr("class", "tl-swimlane").attr("data-group", lane.name).attr("x", -margin.left).attr("y", swimY).attr("width", innerWidth + margin.left).attr("height", laneSpan + (idx < lanes.length - 1 ? GROUP_GAP3 : 0)).attr("fill", fillColor).attr("opacity", 0.06);
+      swimY += laneSpan + GROUP_GAP3;
+    });
+  }
+  for (const lane of lanes) {
+    const laneColor = groupColorMap.get(lane.name) ?? textColor;
+    const laneSpan = lane.events.length * rowH;
+    const group = timelineGroups.find((grp) => grp.name === lane.name);
+    const headerG = g.append("g").attr("class", "tl-lane-header").attr("data-group", lane.name).style("cursor", "pointer").on("mouseenter", () => fadeToGroup(g, lane.name)).on("mouseleave", () => fadeReset(g)).on("click", () => {
+      if (onClickItem && group?.lineNumber) onClickItem(group.lineNumber);
+    });
+    headerG.append("text").attr("x", -margin.left + 10).attr("y", curY + laneSpan / 2).attr("dy", "0.35em").attr("text-anchor", "start").attr("fill", laneColor).attr("font-size", "12px").attr("font-weight", "600").text(lane.name);
+    lane.events.forEach((ev, i) => {
+      const y = curY + i * rowH + rowH / 2;
+      const x = xScale(parseTimelineDate(ev.date));
+      const evG = g.append("g").attr("class", "tl-event").attr("data-group", lane.name).attr("data-line-number", String(ev.lineNumber)).attr("data-date", String(parseTimelineDate(ev.date))).attr(
+        "data-end-date",
+        ev.endDate ? String(parseTimelineDate(ev.endDate)) : null
+      ).style("cursor", "pointer").on("mouseenter", function(event) {
+        fadeToGroup(g, lane.name);
+        if (timelineScale) {
+          showEventDatesOnScale(
+            g,
+            xScale,
+            ev.date,
+            ev.endDate,
+            innerHeight,
+            laneColor
+          );
+        } else {
           showTooltip(tooltip, buildEventTooltipHtml(ev), event);
-        }).on("mouseleave", function() {
-          fadeReset(g);
+        }
+      }).on("mouseleave", function() {
+        fadeReset(g);
+        if (timelineScale) {
+          hideEventDatesOnScale(g);
+        } else {
           hideTooltip(tooltip);
-        }).on("mousemove", function(event) {
+        }
+      }).on("mousemove", function(event) {
+        if (!timelineScale) {
           showTooltip(tooltip, buildEventTooltipHtml(ev), event);
-        }).on("click", () => {
-          if (onClickItem && ev.lineNumber) onClickItem(ev.lineNumber);
-        });
-        setTagAttrs(evG, ev);
-        if (ev.endDate) {
-          const y2 = yScale(parseTimelineDate(ev.endDate));
-          const rectH = Math.max(y2 - y, 4);
-          let fill2 = shapeFill(palette, color, isDark, { solid });
-          let stroke2 = color;
-          if (ev.uncertain) {
-            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 = d3Selection22.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 },
-              { offset: "100%", opacity: 0 }
-            ]).enter().append("stop").attr("offset", (d) => d.offset).attr("stop-color", mix(color, bg, 30)).attr("stop-opacity", (d) => d.opacity);
-            defsEl.append("linearGradient").attr("id", strokeGradientId).attr("x1", "0%").attr("y1", "0%").attr("x2", "0%").attr("y2", "100%").selectAll("stop").data([
-              { offset: "0%", opacity: 1 },
-              { offset: "80%", opacity: 1 },
-              { offset: "100%", opacity: 0 }
-            ]).enter().append("stop").attr("offset", (d) => d.offset).attr("stop-color", color).attr("stop-opacity", (d) => d.opacity);
-            fill2 = `url(#${gradientId})`;
-            stroke2 = `url(#${strokeGradientId})`;
-          }
-          evG.append("rect").attr("x", axisX - 6).attr("y", y).attr("width", 12).attr("height", rectH).attr("rx", 4).attr("fill", fill2).attr("stroke", stroke2).attr("stroke-width", 2);
-          evG.append("text").attr("x", axisX + 16).attr("y", y + rectH / 2).attr("dy", "0.35em").attr("fill", textColor).attr("font-size", "11px").text(ev.label);
+        }
+      }).on("click", () => {
+        if (onClickItem && ev.lineNumber) onClickItem(ev.lineNumber);
+      });
+      setTagAttrs(evG, ev);
+      const evColor = eventColor(ev);
+      if (ev.endDate) {
+        const x2 = xScale(parseTimelineDate(ev.endDate));
+        const rectW = Math.max(x2 - x, 4);
+        const estLabelWidth = ev.label.length * 7 + 16;
+        const labelFitsInside = rectW >= estLabelWidth;
+        let fill2 = shapeFill(palette, evColor, isDark, { solid });
+        let stroke2 = evColor;
+        if (ev.uncertain) {
+          const gradientId = `uncertain-${ev.lineNumber}`;
+          const strokeGradientId = `uncertain-s-${ev.lineNumber}`;
+          const defs = svg.select("defs").node() || svg.append("defs").node();
+          const defsEl = d3Selection22.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 },
+            { offset: "100%", opacity: 0 }
+          ]).enter().append("stop").attr("offset", (d) => d.offset).attr("stop-color", mix(evColor, bg, 30)).attr("stop-opacity", (d) => d.opacity);
+          defsEl.append("linearGradient").attr("id", strokeGradientId).attr("x1", "0%").attr("y1", "0%").attr("x2", "100%").attr("y2", "0%").selectAll("stop").data([
+            { offset: "0%", opacity: 1 },
+            { offset: "80%", opacity: 1 },
+            { offset: "100%", opacity: 0 }
+          ]).enter().append("stop").attr("offset", (d) => d.offset).attr("stop-color", evColor).attr("stop-opacity", (d) => d.opacity);
+          fill2 = `url(#${gradientId})`;
+          stroke2 = `url(#${strokeGradientId})`;
+        }
+        evG.append("rect").attr("x", x).attr("y", y - BAR_H2 / 2).attr("width", rectW).attr("height", BAR_H2).attr("rx", 4).attr("fill", fill2).attr("stroke", stroke2).attr("stroke-width", 2);
+        if (labelFitsInside) {
+          evG.append("text").attr("x", x + 8).attr("y", y).attr("dy", "0.35em").attr("text-anchor", "start").attr("fill", textColor).attr("font-size", "13px").text(ev.label);
         } else {
-          evG.append("circle").attr("cx", axisX).attr("cy", y).attr("r", 4).attr("fill", shapeFill(palette, color, isDark, { solid })).attr("stroke", color).attr("stroke-width", 2);
-          evG.append("text").attr("x", axisX + 16).attr("y", y).attr("dy", "0.35em").attr("fill", textColor).attr("font-size", "11px").text(ev.label);
+          const wouldFlipLeft = x + rectW > innerWidth * 0.6;
+          const labelFitsLeft = x - 6 - estLabelWidth > 0;
+          const flipLeft = wouldFlipLeft && labelFitsLeft;
+          evG.append("text").attr("x", flipLeft ? x - 6 : x + rectW + 6).attr("y", y).attr("dy", "0.35em").attr("text-anchor", flipLeft ? "end" : "start").attr("fill", textColor).attr("font-size", "13px").text(ev.label);
         }
-        evG.append("text").attr("x", axisX - 14).attr(
-          "y",
-          ev.endDate ? yScale(parseTimelineDate(ev.date)) + Math.max(
-            yScale(parseTimelineDate(ev.endDate)) - yScale(parseTimelineDate(ev.date)),
-            4
-          ) / 2 : y
-        ).attr("dy", "0.35em").attr("text-anchor", "end").attr("fill", mutedColor).attr("font-size", "10px").text(ev.date + (ev.endDate ? `\u2192${ev.endDate}` : ""));
+      } else {
+        const estLabelWidth = ev.label.length * 7;
+        const wouldFlipLeft = x > innerWidth * 0.6;
+        const labelFitsLeft = x - 10 - estLabelWidth > 0;
+        const flipLeft = wouldFlipLeft && labelFitsLeft;
+        evG.append("circle").attr("cx", x).attr("cy", y).attr("r", 5).attr("fill", shapeFill(palette, evColor, isDark, { solid })).attr("stroke", evColor).attr("stroke-width", 2);
+        evG.append("text").attr("x", flipLeft ? x - 10 : x + 10).attr("y", y).attr("dy", "0.35em").attr("text-anchor", flipLeft ? "end" : "start").attr("fill", textColor).attr("font-size", "12px").text(ev.label);
       }
-    }
-    return;
+    });
+    curY += laneSpan + GROUP_GAP3;
   }
-  const BAR_H2 = 22;
-  const GROUP_GAP3 = 12;
-  const useGroupedHorizontal = tagLanes != null || timelineSort === "group" && timelineGroups.length > 0;
-  if (useGroupedHorizontal) {
-    let lanes;
+}
+function renderTimelineVertical(container, parsed, palette, isDark, setup, hovers, onClickItem, exportDims, _swimlaneTagGroup, _activeTagGroup, _onTagStateChange, _viewMode) {
+  const {
+    width,
+    height,
+    tooltip,
+    solid,
+    textColor,
+    mutedColor,
+    bgColor,
+    bg,
+    groupColorMap,
+    tagLanes,
+    eventColor,
+    minDate,
+    maxDate,
+    datePadding,
+    earliestStartDateStr,
+    latestEndDateStr,
+    tagLegendReserve
+  } = setup;
+  const { fadeToGroup, fadeToEra, fadeToMarker, fadeReset, setTagAttrs } = hovers;
+  const {
+    timelineEvents,
+    timelineGroups,
+    timelineEras,
+    timelineMarkers,
+    timelineSort,
+    timelineScale,
+    timelineSwimlanes
+  } = parsed;
+  const title = parsed.noTitle ? null : parsed.title;
+  const useGroupedVertical = tagLanes != null || timelineSort === "group" && timelineGroups.length > 0;
+  if (useGroupedVertical) {
+    let laneNames;
+    let laneEventsByName;
     if (tagLanes) {
-      lanes = tagLanes;
+      laneNames = tagLanes.map((l) => l.name);
+      laneEventsByName = new Map(tagLanes.map((l) => [l.name, l.events]));
     } else {
       const groupNames = timelineGroups.map((gr) => gr.name);
       const ungroupedEvents = timelineEvents.filter(
         (ev) => ev.group === null || !groupNames.includes(ev.group)
       );
-      const laneNames = ungroupedEvents.length > 0 ? [...groupNames, "(Other)"] : groupNames;
-      lanes = laneNames.map((name) => ({
-        name,
-        events: timelineEvents.filter(
-          (ev) => name === "(Other)" ? ev.group === null || !groupNames.includes(ev.group) : ev.group === name
-        )
-      }));
+      laneNames = ungroupedEvents.length > 0 ? [...groupNames, "(Other)"] : groupNames;
+      laneEventsByName = new Map(
+        laneNames.map((name) => [
+          name,
+          timelineEvents.filter(
+            (ev) => name === "(Other)" ? ev.group === null || !groupNames.includes(ev.group) : ev.group === name
+          )
+        ])
+      );
     }
-    const totalEventRows = lanes.reduce((s, l) => s + l.events.length, 0);
-    const scaleMargin = timelineScale ? 24 : 0;
-    const ERA_ROW_H = 22;
-    const MARKER_ROW_H = 22;
-    const eraReserve = timelineEras.length > 0 ? ERA_ROW_H : 0;
-    const markerReserve = timelineMarkers.length > 0 ? MARKER_ROW_H : 0;
-    const topScaleH = timelineScale ? 40 : 0;
-    const maxGroupNameLen = Math.max(...lanes.map((l) => l.name.length));
-    const dynamicLeftMargin = Math.max(120, maxGroupNameLen * 7 + 30);
-    const baseTopMargin = title ? 50 : 20;
+    const laneCount = laneNames.length;
+    const scaleMargin = timelineScale ? 40 : 0;
+    const markerMargin = timelineMarkers.length > 0 ? 30 : 0;
     const margin = {
-      top: baseTopMargin + topScaleH + eraReserve + markerReserve + tagLegendReserve,
-      right: 40,
-      bottom: 40 + scaleMargin,
-      left: dynamicLeftMargin
+      top: 104 + markerMargin + tagLegendReserve,
+      right: 40 + scaleMargin,
+      bottom: 40,
+      left: 60 + scaleMargin
     };
-    const markerLabelY = markerReserve ? -(topScaleH + MARKER_ROW_H / 2) : 0;
-    const eraLabelY = eraReserve ? -(topScaleH + markerReserve + ERA_ROW_H / 2) : 0;
     const innerWidth = width - margin.left - margin.right;
     const innerHeight = height - margin.top - margin.bottom;
-    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 = d3Selection22.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
+    const laneWidth = innerWidth / laneCount;
+    const yScale = d3Scale2.scaleLinear().domain([minDate - datePadding, maxDate + datePadding]).range([0, innerHeight]);
+    const svg = d3Selection22.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,
@@ -46752,36 +47175,34 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
     renderEras(
       g,
       timelineEras,
-      xScale,
-      false,
+      yScale,
+      true,
       innerWidth,
       innerHeight,
       (s, e) => fadeToEra(g, s, e),
       () => fadeReset(g),
       timelineScale,
       tooltip,
-      palette,
-      eraReserve ? eraLabelY : void 0
+      palette
     );
     renderMarkers(
       g,
       timelineMarkers,
-      xScale,
-      false,
+      yScale,
+      true,
       innerWidth,
       innerHeight,
       (d) => fadeToMarker(g, d),
       () => fadeReset(g),
       timelineScale,
       tooltip,
-      palette,
-      markerReserve ? markerLabelY : void 0
+      palette
     );
     if (timelineScale) {
       renderTimeScale(
         g,
-        xScale,
-        false,
+        yScale,
+        true,
         innerWidth,
         innerHeight,
         textColor,
@@ -46791,78 +47212,55 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
         formatBoundaryLabel(latestEndDateStr, earliestStartDateStr)
       );
     }
-    let curY = 0;
     if (timelineSwimlanes || tagLanes) {
-      let swimY = 0;
-      lanes.forEach((lane, idx) => {
-        const laneSpan = lane.events.length * rowH;
-        const fillColor = idx % 2 === 0 ? textColor : "transparent";
-        g.append("rect").attr("class", "tl-swimlane").attr("data-group", lane.name).attr("x", -margin.left).attr("y", swimY).attr("width", innerWidth + margin.left).attr("height", laneSpan + (idx < lanes.length - 1 ? GROUP_GAP3 : 0)).attr("fill", fillColor).attr("opacity", 0.06);
-        swimY += laneSpan + GROUP_GAP3;
+      laneNames.forEach((laneName, laneIdx) => {
+        const laneX = laneIdx * laneWidth;
+        const fillColor = laneIdx % 2 === 0 ? textColor : "transparent";
+        g.append("rect").attr("class", "tl-swimlane").attr("data-group", laneName).attr("x", laneX).attr("y", 0).attr("width", laneWidth).attr("height", innerHeight).attr("fill", fillColor).attr("opacity", 0.06);
       });
     }
-    for (const lane of lanes) {
-      const laneColor = groupColorMap.get(lane.name) ?? textColor;
-      const laneSpan = lane.events.length * rowH;
-      const group = timelineGroups.find((grp) => grp.name === lane.name);
-      const headerG = g.append("g").attr("class", "tl-lane-header").attr("data-group", lane.name).style("cursor", "pointer").on("mouseenter", () => fadeToGroup(g, lane.name)).on("mouseleave", () => fadeReset(g)).on("click", () => {
-        if (onClickItem && group?.lineNumber) onClickItem(group.lineNumber);
-      });
-      headerG.append("text").attr("x", -margin.left + 10).attr("y", curY + laneSpan / 2).attr("dy", "0.35em").attr("text-anchor", "start").attr("fill", laneColor).attr("font-size", "12px").attr("font-weight", "600").text(lane.name);
-      lane.events.forEach((ev, i) => {
-        const y = curY + i * rowH + rowH / 2;
-        const x = xScale(parseTimelineDate(ev.date));
-        const evG = g.append("g").attr("class", "tl-event").attr("data-group", lane.name).attr("data-line-number", String(ev.lineNumber)).attr("data-date", String(parseTimelineDate(ev.date))).attr(
+    laneNames.forEach((laneName, laneIdx) => {
+      const laneX = laneIdx * laneWidth;
+      const laneColor = groupColorMap.get(laneName) ?? textColor;
+      const laneCenter = laneX + laneWidth / 2;
+      const headerG = g.append("g").attr("class", "tl-lane-header").attr("data-group", laneName).style("cursor", "pointer").on("mouseenter", () => fadeToGroup(g, laneName)).on("mouseleave", () => fadeReset(g));
+      headerG.append("text").attr("x", laneCenter).attr("y", -15).attr("text-anchor", "middle").attr("fill", laneColor).attr("font-size", "12px").attr("font-weight", "600").text(laneName);
+      g.append("line").attr("x1", laneCenter).attr("y1", 0).attr("x2", laneCenter).attr("y2", innerHeight).attr("stroke", mutedColor).attr("stroke-width", 1).attr("stroke-dasharray", "4,4");
+      const laneEvents = laneEventsByName.get(laneName) ?? [];
+      for (const ev of laneEvents) {
+        const y = yScale(parseTimelineDate(ev.date));
+        const evG = g.append("g").attr("class", "tl-event").attr("data-group", laneName).attr("data-line-number", String(ev.lineNumber)).attr("data-date", String(parseTimelineDate(ev.date))).attr(
           "data-end-date",
           ev.endDate ? String(parseTimelineDate(ev.endDate)) : null
         ).style("cursor", "pointer").on("mouseenter", function(event) {
-          fadeToGroup(g, lane.name);
-          if (timelineScale) {
-            showEventDatesOnScale(
-              g,
-              xScale,
-              ev.date,
-              ev.endDate,
-              innerHeight,
-              laneColor
-            );
-          } else {
-            showTooltip(tooltip, buildEventTooltipHtml(ev), event);
-          }
+          fadeToGroup(g, laneName);
+          showTooltip(tooltip, buildEventTooltipHtml(ev), event);
         }).on("mouseleave", function() {
           fadeReset(g);
-          if (timelineScale) {
-            hideEventDatesOnScale(g);
-          } else {
-            hideTooltip(tooltip);
-          }
+          hideTooltip(tooltip);
         }).on("mousemove", function(event) {
-          if (!timelineScale) {
-            showTooltip(tooltip, buildEventTooltipHtml(ev), event);
-          }
+          showTooltip(tooltip, buildEventTooltipHtml(ev), event);
         }).on("click", () => {
           if (onClickItem && ev.lineNumber) onClickItem(ev.lineNumber);
         });
         setTagAttrs(evG, ev);
         const evColor = eventColor(ev);
         if (ev.endDate) {
-          const x2 = xScale(parseTimelineDate(ev.endDate));
-          const rectW = Math.max(x2 - x, 4);
-          const estLabelWidth = ev.label.length * 7 + 16;
-          const labelFitsInside = rectW >= estLabelWidth;
+          const y2 = yScale(parseTimelineDate(ev.endDate));
+          const rectH = Math.max(y2 - y, 4);
           let fill2 = shapeFill(palette, evColor, isDark, { solid });
           let stroke2 = evColor;
           if (ev.uncertain) {
-            const gradientId = `uncertain-${ev.lineNumber}`;
-            const strokeGradientId = `uncertain-s-${ev.lineNumber}`;
+            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 = d3Selection22.select(defs);
-            defsEl.append("linearGradient").attr("id", gradientId).attr("x1", "0%").attr("y1", "0%").attr("x2", "100%").attr("y2", "0%").selectAll("stop").data([
+            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 },
               { offset: "100%", opacity: 0 }
-            ]).enter().append("stop").attr("offset", (d) => d.offset).attr("stop-color", mix(evColor, bg, 30)).attr("stop-opacity", (d) => d.opacity);
-            defsEl.append("linearGradient").attr("id", strokeGradientId).attr("x1", "0%").attr("y1", "0%").attr("x2", "100%").attr("y2", "0%").selectAll("stop").data([
+            ]).enter().append("stop").attr("offset", (d) => d.offset).attr("stop-color", mix(laneColor, bg, 30)).attr("stop-opacity", (d) => d.opacity);
+            defsEl.append("linearGradient").attr("id", strokeGradientId).attr("x1", "0%").attr("y1", "0%").attr("x2", "0%").attr("y2", "100%").selectAll("stop").data([
               { offset: "0%", opacity: 1 },
               { offset: "80%", opacity: 1 },
               { offset: "100%", opacity: 0 }
@@ -46870,47 +47268,29 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
             fill2 = `url(#${gradientId})`;
             stroke2 = `url(#${strokeGradientId})`;
           }
-          evG.append("rect").attr("x", x).attr("y", y - BAR_H2 / 2).attr("width", rectW).attr("height", BAR_H2).attr("rx", 4).attr("fill", fill2).attr("stroke", stroke2).attr("stroke-width", 2);
-          if (labelFitsInside) {
-            evG.append("text").attr("x", x + 8).attr("y", y).attr("dy", "0.35em").attr("text-anchor", "start").attr("fill", textColor).attr("font-size", "13px").text(ev.label);
-          } else {
-            const wouldFlipLeft = x + rectW > innerWidth * 0.6;
-            const labelFitsLeft = x - 6 - estLabelWidth > 0;
-            const flipLeft = wouldFlipLeft && labelFitsLeft;
-            evG.append("text").attr("x", flipLeft ? x - 6 : x + rectW + 6).attr("y", y).attr("dy", "0.35em").attr("text-anchor", flipLeft ? "end" : "start").attr("fill", textColor).attr("font-size", "13px").text(ev.label);
-          }
+          evG.append("rect").attr("x", laneCenter - 6).attr("y", y).attr("width", 12).attr("height", rectH).attr("rx", 4).attr("fill", fill2).attr("stroke", stroke2).attr("stroke-width", 2);
+          evG.append("text").attr("x", laneCenter + 14).attr("y", y + rectH / 2).attr("dy", "0.35em").attr("fill", textColor).attr("font-size", "10px").text(ev.label);
         } else {
-          const estLabelWidth = ev.label.length * 7;
-          const wouldFlipLeft = x > innerWidth * 0.6;
-          const labelFitsLeft = x - 10 - estLabelWidth > 0;
-          const flipLeft = wouldFlipLeft && labelFitsLeft;
-          evG.append("circle").attr("cx", x).attr("cy", y).attr("r", 5).attr("fill", shapeFill(palette, evColor, isDark, { solid })).attr("stroke", evColor).attr("stroke-width", 2);
-          evG.append("text").attr("x", flipLeft ? x - 10 : x + 10).attr("y", y).attr("dy", "0.35em").attr("text-anchor", flipLeft ? "end" : "start").attr("fill", textColor).attr("font-size", "12px").text(ev.label);
+          evG.append("circle").attr("cx", laneCenter).attr("cy", y).attr("r", 4).attr("fill", shapeFill(palette, evColor, isDark, { solid })).attr("stroke", evColor).attr("stroke-width", 2);
+          evG.append("text").attr("x", laneCenter + 10).attr("y", y).attr("dy", "0.35em").attr("fill", textColor).attr("font-size", "10px").text(ev.label);
         }
-      });
-      curY += laneSpan + GROUP_GAP3;
-    }
+      }
+    });
   } else {
-    const sorted = timelineEvents.slice().sort((a, b) => parseTimelineDate(a.date) - parseTimelineDate(b.date));
-    const scaleMargin = timelineScale ? 24 : 0;
-    const ERA_ROW_H = 22;
-    const MARKER_ROW_H = 22;
-    const eraReserve = timelineEras.length > 0 ? ERA_ROW_H : 0;
-    const markerReserve = timelineMarkers.length > 0 ? MARKER_ROW_H : 0;
-    const topScaleH = timelineScale ? 40 : 0;
+    const scaleMargin = timelineScale ? 40 : 0;
+    const markerMargin = timelineMarkers.length > 0 ? 30 : 0;
     const margin = {
-      top: 104 + topScaleH + eraReserve + markerReserve + tagLegendReserve,
-      right: 40,
-      bottom: 40 + scaleMargin,
-      left: 60
+      top: 104 + markerMargin + tagLegendReserve,
+      right: 200,
+      bottom: 40,
+      left: 60 + scaleMargin
     };
-    const markerLabelY = markerReserve ? -(topScaleH + MARKER_ROW_H / 2) : 0;
-    const eraLabelY = eraReserve ? -(topScaleH + markerReserve + ERA_ROW_H / 2) : 0;
     const innerWidth = width - margin.left - margin.right;
     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 = d3Selection22.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
+    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 = d3Selection22.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,
@@ -46923,36 +47303,34 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
     renderEras(
       g,
       timelineEras,
-      xScale,
-      false,
+      yScale,
+      true,
       innerWidth,
       innerHeight,
       (s, e) => fadeToEra(g, s, e),
       () => fadeReset(g),
       timelineScale,
       tooltip,
-      palette,
-      eraReserve ? eraLabelY : void 0
+      palette
     );
     renderMarkers(
       g,
       timelineMarkers,
-      xScale,
-      false,
+      yScale,
+      true,
       innerWidth,
       innerHeight,
       (d) => fadeToMarker(g, d),
       () => fadeReset(g),
       timelineScale,
       tooltip,
-      palette,
-      markerReserve ? markerLabelY : void 0
+      palette
     );
     if (timelineScale) {
       renderTimeScale(
         g,
-        xScale,
-        false,
+        yScale,
+        true,
         innerWidth,
         innerHeight,
         textColor,
@@ -46963,7 +47341,6 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
       );
     }
     if (timelineGroups.length > 0) {
-      const legendY = timelineScale ? -75 : -55;
       renderTimelineGroupLegend(
         g,
         timelineGroups,
@@ -46971,65 +47348,46 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
         textColor,
         palette,
         isDark,
-        legendY,
+        -55,
         (name) => fadeToGroup(g, name),
         () => fadeReset(g)
       );
     }
-    sorted.forEach((ev, i) => {
-      const y = i * rowH + rowH / 2;
-      const x = xScale(parseTimelineDate(ev.date));
+    g.append("line").attr("x1", axisX).attr("y1", 0).attr("x2", axisX).attr("y2", innerHeight).attr("stroke", mutedColor).attr("stroke-width", 1).attr("stroke-dasharray", "4,4");
+    for (const ev of sorted) {
+      const y = yScale(parseTimelineDate(ev.date));
       const color = eventColor(ev);
       const evG = g.append("g").attr("class", "tl-event").attr("data-group", ev.group || "").attr("data-line-number", String(ev.lineNumber)).attr("data-date", String(parseTimelineDate(ev.date))).attr(
         "data-end-date",
         ev.endDate ? String(parseTimelineDate(ev.endDate)) : null
       ).style("cursor", "pointer").on("mouseenter", function(event) {
         if (ev.group && timelineGroups.length > 0) fadeToGroup(g, ev.group);
-        if (timelineScale) {
-          showEventDatesOnScale(
-            g,
-            xScale,
-            ev.date,
-            ev.endDate,
-            innerHeight,
-            color
-          );
-        } else {
-          showTooltip(tooltip, buildEventTooltipHtml(ev), event);
-        }
+        showTooltip(tooltip, buildEventTooltipHtml(ev), event);
       }).on("mouseleave", function() {
         fadeReset(g);
-        if (timelineScale) {
-          hideEventDatesOnScale(g);
-        } else {
-          hideTooltip(tooltip);
-        }
+        hideTooltip(tooltip);
       }).on("mousemove", function(event) {
-        if (!timelineScale) {
-          showTooltip(tooltip, buildEventTooltipHtml(ev), event);
-        }
+        showTooltip(tooltip, buildEventTooltipHtml(ev), event);
       }).on("click", () => {
         if (onClickItem && ev.lineNumber) onClickItem(ev.lineNumber);
       });
       setTagAttrs(evG, ev);
       if (ev.endDate) {
-        const x2 = xScale(parseTimelineDate(ev.endDate));
-        const rectW = Math.max(x2 - x, 4);
-        const estLabelWidth = ev.label.length * 7 + 16;
-        const labelFitsInside = rectW >= estLabelWidth;
+        const y2 = yScale(parseTimelineDate(ev.endDate));
+        const rectH = Math.max(y2 - y, 4);
         let fill2 = shapeFill(palette, color, isDark, { solid });
         let stroke2 = color;
         if (ev.uncertain) {
-          const gradientId = `uncertain-ts-${ev.lineNumber}`;
-          const strokeGradientId = `uncertain-ts-s-${ev.lineNumber}`;
+          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 = d3Selection22.select(defs);
-          defsEl.append("linearGradient").attr("id", gradientId).attr("x1", "0%").attr("y1", "0%").attr("x2", "100%").attr("y2", "0%").selectAll("stop").data([
+          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 },
             { offset: "100%", opacity: 0 }
           ]).enter().append("stop").attr("offset", (d) => d.offset).attr("stop-color", mix(color, bg, 30)).attr("stop-opacity", (d) => d.opacity);
-          defsEl.append("linearGradient").attr("id", strokeGradientId).attr("x1", "0%").attr("y1", "0%").attr("x2", "100%").attr("y2", "0%").selectAll("stop").data([
+          defsEl.append("linearGradient").attr("id", strokeGradientId).attr("x1", "0%").attr("y1", "0%").attr("x2", "0%").attr("y2", "100%").selectAll("stop").data([
             { offset: "0%", opacity: 1 },
             { offset: "80%", opacity: 1 },
             { offset: "100%", opacity: 0 }
@@ -47037,206 +47395,100 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
           fill2 = `url(#${gradientId})`;
           stroke2 = `url(#${strokeGradientId})`;
         }
-        evG.append("rect").attr("x", x).attr("y", y - BAR_H2 / 2).attr("width", rectW).attr("height", BAR_H2).attr("rx", 4).attr("fill", fill2).attr("stroke", stroke2).attr("stroke-width", 2);
-        if (labelFitsInside) {
-          evG.append("text").attr("x", x + 8).attr("y", y).attr("dy", "0.35em").attr("text-anchor", "start").attr("fill", textColor).attr("font-size", "13px").text(ev.label);
-        } else {
-          const wouldFlipLeft = x + rectW > innerWidth * 0.6;
-          const labelFitsLeft = x - 6 - estLabelWidth > 0;
-          const flipLeft = wouldFlipLeft && labelFitsLeft;
-          evG.append("text").attr("x", flipLeft ? x - 6 : x + rectW + 6).attr("y", y).attr("dy", "0.35em").attr("text-anchor", flipLeft ? "end" : "start").attr("fill", textColor).attr("font-size", "13px").text(ev.label);
-        }
+        evG.append("rect").attr("x", axisX - 6).attr("y", y).attr("width", 12).attr("height", rectH).attr("rx", 4).attr("fill", fill2).attr("stroke", stroke2).attr("stroke-width", 2);
+        evG.append("text").attr("x", axisX + 16).attr("y", y + rectH / 2).attr("dy", "0.35em").attr("fill", textColor).attr("font-size", "11px").text(ev.label);
       } else {
-        const estLabelWidth = ev.label.length * 7;
-        const wouldFlipLeft = x > innerWidth * 0.6;
-        const labelFitsLeft = x - 10 - estLabelWidth > 0;
-        const flipLeft = wouldFlipLeft && labelFitsLeft;
-        evG.append("circle").attr("cx", x).attr("cy", y).attr("r", 5).attr("fill", shapeFill(palette, color, isDark, { solid })).attr("stroke", color).attr("stroke-width", 2);
-        evG.append("text").attr("x", flipLeft ? x - 10 : x + 10).attr("y", y).attr("dy", "0.35em").attr("text-anchor", flipLeft ? "end" : "start").attr("fill", textColor).attr("font-size", "12px").text(ev.label);
-      }
-    });
-  }
-  if (parsed.timelineTagGroups.length > 0) {
-    const LG_HEIGHT = LEGEND_HEIGHT;
-    const LG_PILL_PAD = LEGEND_PILL_PAD;
-    const LG_PILL_FONT_SIZE = LEGEND_PILL_FONT_SIZE;
-    const LG_CAPSULE_PAD = LEGEND_CAPSULE_PAD;
-    const LG_DOT_R = LEGEND_DOT_R;
-    const LG_ENTRY_FONT_SIZE = LEGEND_ENTRY_FONT_SIZE;
-    const LG_ENTRY_DOT_GAP = LEGEND_ENTRY_DOT_GAP;
-    const LG_ENTRY_TRAIL = LEGEND_ENTRY_TRAIL;
-    const LG_ICON_W = 20;
-    const mainSvg = d3Selection22.select(container).select("svg");
-    const mainG = mainSvg.select("g");
-    if (!mainSvg.empty() && !mainG.empty()) {
-      let drawSwimlaneIcon4 = function(parent, x, y, isSwimActive) {
-        const iconG = parent.append("g").attr("class", "tl-swimlane-icon").attr("transform", `translate(${x}, ${y})`).style("cursor", "pointer");
-        const barColor = isSwimActive ? palette.primary : palette.textMuted;
-        const barOpacity = isSwimActive ? 1 : 0.35;
-        const bars = [
-          { y: 0, w: 8 },
-          { y: 4, w: 12 },
-          { y: 8, w: 6 }
-        ];
-        for (const bar of bars) {
-          iconG.append("rect").attr("x", 0).attr("y", bar.y).attr("width", bar.w).attr("height", 2).attr("rx", 1).attr("fill", barColor).attr("opacity", barOpacity);
-        }
-        return iconG;
-      }, relayout2 = function() {
-        renderTimeline(
-          container,
-          parsed,
-          palette,
-          isDark,
-          onClickItem,
-          exportDims,
-          currentActiveGroup,
-          currentSwimlaneGroup,
-          onTagStateChange,
-          viewMode
-        );
-      }, drawLegend2 = function() {
-        mainSvg.selectAll(".tl-tag-legend-group").remove();
-        mainSvg.selectAll(".tl-tag-legend-container").remove();
-        const effectiveColorKey = (currentActiveGroup ?? currentSwimlaneGroup)?.toLowerCase() ?? null;
-        const visibleGroups = viewMode ? legendGroups.filter(
-          (lg) => effectiveColorKey != null && lg.group.name.toLowerCase() === effectiveColorKey
-        ) : legendGroups;
-        if (visibleGroups.length === 0) return;
-        const legendContainer = mainSvg.append("g").attr("class", "tl-tag-legend-container");
-        if (currentActiveGroup) {
-          legendContainer.attr(
-            "data-legend-active",
-            currentActiveGroup.toLowerCase()
-          );
-        }
-        const iconAddon = viewMode ? 0 : LG_ICON_W;
-        const centralGroups = visibleGroups.map((lg) => ({
-          name: lg.group.name,
-          entries: lg.group.entries.map((e) => ({
-            value: e.value,
-            color: e.color
-          }))
-        }));
-        const centralActive = viewMode ? effectiveColorKey : currentActiveGroup;
-        const centralConfig = {
-          groups: centralGroups,
-          position: { placement: "top-center", titleRelation: "below-title" },
-          mode: "fixed",
-          capsulePillAddonWidth: iconAddon
-        };
-        const centralState = { activeGroup: centralActive };
-        const centralCallbacks = viewMode ? {} : {
-          onGroupToggle: (groupName) => {
-            currentActiveGroup = currentActiveGroup === groupName.toLowerCase() ? null : groupName.toLowerCase();
-            drawLegend2();
-            recolorEvents2();
-            onTagStateChange?.(currentActiveGroup, currentSwimlaneGroup);
-          },
-          onEntryHover: (groupName, entryValue) => {
-            const tagKey = groupName.toLowerCase();
-            if (entryValue) {
-              const tagVal = entryValue.toLowerCase();
-              fadeToTagValue(mainG, tagKey, tagVal);
-              mainSvg.selectAll("[data-legend-entry]").each(function() {
-                const el = d3Selection22.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(
-                  "opacity",
-                  eg === tagKey && ev === tagVal ? 1 : FADE_OPACITY3
-                );
-              });
-            } else {
-              fadeReset(mainG);
-              mainSvg.selectAll("[data-legend-entry]").attr("opacity", 1);
-            }
-          },
-          onGroupRendered: (groupName, groupEl, isActive) => {
-            const groupKey = groupName.toLowerCase();
-            groupEl.attr("data-tag-group", groupKey);
-            if (isActive && !viewMode) {
-              const isSwimActive = currentSwimlaneGroup != null && currentSwimlaneGroup.toLowerCase() === groupKey;
-              const pillWidth3 = measureLegendText(groupName, LG_PILL_FONT_SIZE) + LG_PILL_PAD;
-              const pillXOff = LG_CAPSULE_PAD;
-              const iconX = pillXOff + pillWidth3 + 5;
-              const iconY = (LG_HEIGHT - 10) / 2;
-              const iconEl = drawSwimlaneIcon4(
-                groupEl,
-                iconX,
-                iconY,
-                isSwimActive
-              );
-              iconEl.attr("data-swimlane-toggle", groupKey).on("click", (event) => {
-                event.stopPropagation();
-                currentSwimlaneGroup = currentSwimlaneGroup === groupKey ? null : groupKey;
-                onTagStateChange?.(
-                  currentActiveGroup,
-                  currentSwimlaneGroup
-                );
-                relayout2();
-              });
-            }
-          }
-        };
-        const legendInnerG = legendContainer.append("g").attr("transform", `translate(0, ${legendY})`);
-        renderLegendD3(
-          legendInnerG,
-          centralConfig,
-          centralState,
-          palette,
-          isDark,
-          centralCallbacks,
-          width
-        );
-      }, recolorEvents2 = function() {
-        const colorTG = currentActiveGroup ?? swimlaneTagGroup ?? null;
-        mainG.selectAll(".tl-event").each(function() {
-          const el = d3Selection22.select(this);
-          const lineNum = el.attr("data-line-number");
-          const ev = lineNum ? eventByLine.get(lineNum) : void 0;
-          if (!ev) return;
-          let color;
-          if (colorTG) {
-            const tagColor = resolveTagColor(
-              ev.metadata,
-              parsed.timelineTagGroups,
-              colorTG
-            );
-            color = tagColor ?? (ev.group && groupColorMap.has(ev.group) ? groupColorMap.get(ev.group) : textColor);
-          } else {
-            color = ev.group && groupColorMap.has(ev.group) ? groupColorMap.get(ev.group) : textColor;
-          }
-          el.selectAll("rect").attr("fill", shapeFill(palette, color, isDark, { solid })).attr("stroke", color);
-          el.selectAll("circle:not(.tl-event-point-outline)").attr("fill", shapeFill(palette, color, isDark, { solid })).attr("stroke", color);
-        });
-      };
-      var drawSwimlaneIcon3 = drawSwimlaneIcon4, relayout = relayout2, drawLegend = drawLegend2, recolorEvents = recolorEvents2;
-      const legendY = title ? 50 : 10;
-      const legendGroups = parsed.timelineTagGroups.map((g) => {
-        const pillW = measureLegendText(g.name, LG_PILL_FONT_SIZE) + LG_PILL_PAD;
-        const iconSpace = viewMode ? 8 : LG_ICON_W + 4;
-        let entryX = LG_CAPSULE_PAD + pillW + iconSpace;
-        for (const entry of g.entries) {
-          const textX = entryX + LG_DOT_R * 2 + LG_ENTRY_DOT_GAP;
-          entryX = textX + measureLegendText(entry.value, LG_ENTRY_FONT_SIZE) + LG_ENTRY_TRAIL;
-        }
-        return {
-          group: g,
-          minifiedWidth: pillW,
-          expandedWidth: entryX + LG_CAPSULE_PAD
-        };
-      });
-      let currentActiveGroup = activeTagGroup ?? null;
-      let currentSwimlaneGroup = swimlaneTagGroup ?? null;
-      const eventByLine = /* @__PURE__ */ new Map();
-      for (const ev of timelineEvents) {
-        eventByLine.set(String(ev.lineNumber), ev);
+        evG.append("circle").attr("cx", axisX).attr("cy", y).attr("r", 4).attr("fill", shapeFill(palette, color, isDark, { solid })).attr("stroke", color).attr("stroke-width", 2);
+        evG.append("text").attr("x", axisX + 16).attr("y", y).attr("dy", "0.35em").attr("fill", textColor).attr("font-size", "11px").text(ev.label);
       }
-      drawLegend2();
+      evG.append("text").attr("x", axisX - 14).attr(
+        "y",
+        ev.endDate ? yScale(parseTimelineDate(ev.date)) + Math.max(
+          yScale(parseTimelineDate(ev.endDate)) - yScale(parseTimelineDate(ev.date)),
+          4
+        ) / 2 : y
+      ).attr("dy", "0.35em").attr("text-anchor", "end").attr("fill", mutedColor).attr("font-size", "10px").text(ev.date + (ev.endDate ? `\u2192${ev.endDate}` : ""));
     }
   }
 }
+function renderTimeline(container, parsed, palette, isDark, onClickItem, exportDims, activeTagGroup, swimlaneTagGroup, onTagStateChange, viewMode) {
+  const setup = setupTimeline(
+    container,
+    parsed,
+    palette,
+    isDark,
+    exportDims,
+    activeTagGroup,
+    swimlaneTagGroup
+  );
+  if (!setup) return;
+  swimlaneTagGroup = setup.swimlaneTagGroup;
+  const { isVertical, tagLanes } = setup;
+  const hovers = makeTimelineHoverHelpers();
+  if (isVertical) {
+    renderTimelineVertical(
+      container,
+      parsed,
+      palette,
+      isDark,
+      setup,
+      hovers,
+      onClickItem,
+      exportDims,
+      swimlaneTagGroup,
+      activeTagGroup,
+      onTagStateChange,
+      viewMode
+    );
+    return;
+  }
+  const useGroupedHorizontal = tagLanes != null || parsed.timelineSort === "group" && parsed.timelineGroups.length > 0;
+  if (useGroupedHorizontal) {
+    renderTimelineHorizontalGrouped(
+      container,
+      parsed,
+      palette,
+      isDark,
+      setup,
+      hovers,
+      onClickItem,
+      exportDims,
+      swimlaneTagGroup,
+      activeTagGroup,
+      onTagStateChange,
+      viewMode
+    );
+  } else {
+    renderTimelineHorizontalTimeSort(
+      container,
+      parsed,
+      palette,
+      isDark,
+      setup,
+      hovers,
+      onClickItem,
+      exportDims,
+      swimlaneTagGroup,
+      activeTagGroup,
+      onTagStateChange,
+      viewMode
+    );
+  }
+  renderTimelineTagLegendOverlay(
+    container,
+    parsed,
+    palette,
+    isDark,
+    setup,
+    hovers,
+    onClickItem,
+    exportDims,
+    swimlaneTagGroup,
+    activeTagGroup,
+    onTagStateChange,
+    viewMode
+  );
+}
 function getRotateFn(mode) {
   if (mode === "mixed") return () => Math.random() > 0.5 ? 0 : 90;
   if (mode === "angled") return () => Math.round(Math.random() * 30 - 15);
@@ -47360,7 +47612,7 @@ function regionCentroid(circles, inside) {
   }
   return { x: sx / count, y: sy / count };
 }
-function renderVenn(container, parsed, palette, isDark, onClickItem, exportDims) {
+function renderVenn(container, parsed, palette, _isDark, onClickItem, exportDims) {
   const { vennSets, vennOverlaps } = parsed;
   const title = parsed.noTitle ? null : parsed.title;
   if (vennSets.length < 2 || vennSets.length > 3) return;
@@ -47594,7 +47846,7 @@ function renderVenn(container, parsed, palette, isDark, onClickItem, exportDims)
   };
   const gcx = circles.reduce((s, c) => s + c.x, 0) / n;
   const gcy = circles.reduce((s, c) => s + c.y, 0) / n;
-  function exclusiveHSpan(px, py, ci) {
+  function exclusiveHSpan(_px, py, ci) {
     const dy = py - circles[ci].y;
     const halfChord = Math.sqrt(
       Math.max(0, circles[ci].r * circles[ci].r - dy * dy)
@@ -48507,9 +48759,9 @@ async function renderForExport(content, theme, palette, viewState, options) {
         blHiddenTagValues.set(k, new Set(v));
       }
     }
-    const { layoutBoxesAndLines: layoutBoxesAndLines2 } = await Promise.resolve().then(() => (init_layout5(), layout_exports5));
     const { renderBoxesAndLinesForExport: renderBoxesAndLinesForExport2 } = await Promise.resolve().then(() => (init_renderer6(), renderer_exports6));
-    const blLayout = layoutBoxesAndLines2(blParsed);
+    const { layoutBoxesAndLines: layoutBoxesAndLines2 } = await Promise.resolve().then(() => (init_layout5(), layout_exports5));
+    const blLayout = await layoutBoxesAndLines2(blParsed);
     const PADDING3 = 20;
     const titleOffset = blParsed.title ? 40 : 0;
     const exportWidth = blLayout.width + PADDING3 * 2;
@@ -49597,7 +49849,7 @@ init_dgmo_router();
 init_registry();
 async function ensureDom() {
   if (typeof document !== "undefined") return;
-  const { JSDOM } = await import("jsdom");
+  const { JSDOM } = await loadJsdom();
   const dom = new JSDOM("<!DOCTYPE html><html><body></body></html>");
   const win = dom.window;
   Object.defineProperty(globalThis, "document", {
@@ -49621,6 +49873,14 @@ async function ensureDom() {
     configurable: true
   });
 }
+async function loadJsdom() {
+  const spec = ["js", "dom"].join("");
+  return import(
+    /* @vite-ignore */
+    /* webpackIgnore: true */
+    spec
+  );
+}
 async function render(content, options) {
   const theme = options?.theme ?? "light";
   const paletteName = options?.palette ?? "nord";
@@ -49802,6 +50062,7 @@ var DIRECTIVE_KEYWORDS = /* @__PURE__ */ new Set([
   "split",
   "slo-p90-latency-ms",
   "slo-availability",
+  "slo-warning-margin",
   "cache-hit",
   "concurrency",
   "duration-ms",
@@ -50425,7 +50686,7 @@ pre.dgmo, code.language-dgmo, pre > code.language-dgmo,
 
 // src/auto/index.ts
 init_safe_href();
-var VERSION = "0.14.1";
+var VERSION = "0.15.1";
 var DEFAULTS = {
   theme: "auto",
   palette: "nord",
@@ -50742,8 +51003,8 @@ function determineReplaceTarget(matched) {
 }
 async function processElement(el) {
   if (!(el instanceof HTMLElement)) return {};
-  if (el.dataset.dgmoProcessed === "true") return {};
-  el.dataset.dgmoProcessed = "true";
+  if (el.dataset["dgmoProcessed"] === "true") return {};
+  el.dataset["dgmoProcessed"] = "true";
   const source = el.textContent || "";
   const sourceBytes = new TextEncoder().encode(source).byteLength;
   if (sourceBytes > SOURCE_BYTE_CAP) {
@@ -50760,7 +51021,7 @@ async function processElement(el) {
   const resolvedTheme = cfg.theme === "transparent" ? "transparent" : resolveTheme(cfg.theme);
   const renderTheme = resolvedTheme === "transparent" ? "transparent" : resolvedTheme;
   const ariaLabel = deriveAriaLabel(source);
-  const perElementShowSource = el.dataset.showSource;
+  const perElementShowSource = el.dataset["showSource"];
   let showSource = cfg.showSource;
   if (perElementShowSource === "true") showSource = true;
   else if (perElementShowSource === "false") showSource = false;
@@ -50810,7 +51071,7 @@ async function processElement(el) {
   const wrapper = document.createElement("div");
   const themeClass = resolvedTheme === "dark" ? "dgmo-theme-dark" : resolvedTheme === "transparent" ? "dgmo-theme-transparent" : "dgmo-theme-light";
   wrapper.className = `dgmo-rendered ${themeClass}`;
-  wrapper.dataset.dgmoProcessed = "true";
+  wrapper.dataset["dgmoProcessed"] = "true";
   const svgHolder = document.createElement("div");
   svgHolder.innerHTML = result.svg;
   const svgEl = svgHolder.querySelector("svg");
@@ -50879,15 +51140,16 @@ function initialize(opts = {}) {
     }
   }
   const next = { ...activeConfig };
-  if (isValidTheme(opts.theme)) {
-    next.theme = opts.theme;
+  if (isValidTheme(opts["theme"])) {
+    next.theme = opts["theme"];
   }
-  if (typeof opts.palette === "string" && paletteExists(opts.palette)) {
-    next.palette = opts.palette;
+  if (typeof opts["palette"] === "string" && paletteExists(opts["palette"])) {
+    next.palette = opts["palette"];
   }
-  if (typeof opts.showSource === "boolean") next.showSource = opts.showSource;
-  if (typeof opts.showEditorLink === "boolean")
-    next.showEditorLink = opts.showEditorLink;
+  if (typeof opts["showSource"] === "boolean")
+    next.showSource = opts["showSource"];
+  if (typeof opts["showEditorLink"] === "boolean")
+    next.showEditorLink = opts["showEditorLink"];
   activeConfig = next;
 }
 async function run(opts = {}) {
@@ -50926,7 +51188,7 @@ function rerenderAllForTheme() {
     placeholder.className = "dgmo";
     placeholder.textContent = t.source;
     if (t.perElementShowSource !== null) {
-      placeholder.dataset.showSource = String(t.perElementShowSource);
+      placeholder.dataset["showSource"] = String(t.perElementShowSource);
     }
     t.wrapper.replaceWith(placeholder);
     wrappers.delete(t);
@@ -50953,7 +51215,7 @@ function unhideAllSources() {
     el.style.visibility = "visible";
   });
   if (document.documentElement && document.documentElement.dataset) {
-    document.documentElement.dataset.dgmoAutoFailed = "1";
+    document.documentElement.dataset["dgmoAutoFailed"] = "1";
   }
 }
 function bootstrap() {