@diagrammo/dgmo 0.6.1 → 0.6.3

package/dist/index.cjs

@@ -1809,12 +1809,12 @@ var SYNC_LABELED_RE, ASYNC_LABELED_RE, RETURN_SYNC_LABELED_RE, RETURN_ASYNC_LABE
 var init_arrows = __esm({
   "src/utils/arrows.ts"() {
     "use strict";
-    SYNC_LABELED_RE = /^(\S+)\s+-(.+)->\s+(\S+)$/;
-    ASYNC_LABELED_RE = /^(\S+)\s+~(.+)~>\s+(\S+)$/;
-    RETURN_SYNC_LABELED_RE = /^(\S+)\s+<-(.+)-\s+(\S+)$/;
-    RETURN_ASYNC_LABELED_RE = /^(\S+)\s+<~(.+)~\s+(\S+)$/;
-    BIDI_SYNC_RE = /^(\S+)\s+<-(.+)->\s+(\S+)$/;
-    BIDI_ASYNC_RE = /^(\S+)\s+<~(.+)~>\s+(\S+)$/;
+    SYNC_LABELED_RE = /^(.+?)\s+-(.+)->\s+(.+)$/;
+    ASYNC_LABELED_RE = /^(.+?)\s+~(.+)~>\s+(.+)$/;
+    RETURN_SYNC_LABELED_RE = /^(.+?)\s+<-(.+)-\s+(.+)$/;
+    RETURN_ASYNC_LABELED_RE = /^(.+?)\s+<~(.+)~\s+(.+)$/;
+    BIDI_SYNC_RE = /^(.+?)\s+<-(.+)->\s+(.+)$/;
+    BIDI_ASYNC_RE = /^(.+?)\s+<~(.+)~>\s+(.+)$/;
     ARROW_CHARS = ["->", "~>"];
   }
 });
@@ -2223,7 +2223,7 @@ function parseSequenceDgmo(content) {
       continue;
     }
     const bidiPlainMatch = arrowCore.match(
-      /^(\S+)\s*(?:<->|<~>)\s*(\S+)/
+      /^(.+?)\s*(?:<->|<~>)\s*(.+)/
     );
     if (bidiPlainMatch) {
       pushError(
@@ -2232,8 +2232,8 @@ function parseSequenceDgmo(content) {
       );
       continue;
     }
-    const bareReturnSync = arrowCore.match(/^(\S+)\s+<-\s+(\S+)$/);
-    const bareReturnAsync = arrowCore.match(/^(\S+)\s+<~\s+(\S+)$/);
+    const bareReturnSync = arrowCore.match(/^(.+?)\s+<-\s+(.+)$/);
+    const bareReturnAsync = arrowCore.match(/^(.+?)\s+<~\s+(.+)$/);
     const bareReturn = bareReturnSync || bareReturnAsync;
     if (bareReturn) {
       const to = bareReturn[1];
@@ -2244,8 +2244,8 @@ function parseSequenceDgmo(content) {
       );
       continue;
     }
-    const bareCallSync = arrowCore.match(/^(\S+)\s*->\s*(\S+)$/);
-    const bareCallAsync = arrowCore.match(/^(\S+)\s*~>\s*(\S+)$/);
+    const bareCallSync = arrowCore.match(/^(.+?)\s*->\s*(.+)$/);
+    const bareCallAsync = arrowCore.match(/^(.+?)\s*~>\s*(.+)$/);
     const bareCall = bareCallSync || bareCallAsync;
     if (bareCall) {
       contentStarted = true;
@@ -2497,21 +2497,22 @@ var init_parser = __esm({
       "networking",
       "frontend"
     ]);
-    IS_A_PATTERN = /^(\S+)\s+is\s+an?\s+(\w+)(?:\s+(.+))?$/i;
-    POSITION_ONLY_PATTERN = /^(\S+)\s+position\s+(-?\d+)$/i;
+    IS_A_PATTERN = /^([^:]+?)\s+is\s+an?\s+(\w+)(?:\s+(.+))?$/i;
+    POSITION_ONLY_PATTERN = /^([^:]+?)\s+position\s+(-?\d+)$/i;
     COLORED_PARTICIPANT_PATTERN = /^(\S+?)\(([^)]+)\)\s*$/;
     GROUP_HEADING_PATTERN = /^\[(.+?)(?:\(([^)]+)\))?\]\s*$/;
     LEGACY_GROUP_PATTERN = /^##\s+(.+?)(?:\(([^)]+)\))?\s*$/;
     SECTION_PATTERN = /^==\s+(.+?)(?:\s*==)?\s*$/;
     ARROW_PATTERN = /\S+\s*(?:<-\S+-|<~\S+~|-\S+->|~\S+~>|->|~>|<-|<~)\s*\S+/;
-    NOTE_SINGLE = /^note(?:\s+(right|left)\s+of\s+(\S+))?\s*:\s*(.+)$/i;
-    NOTE_MULTI = /^note(?:\s+(right|left)\s+of\s+([^\s:]+))?\s*:?\s*$/i;
+    NOTE_SINGLE = /^note(?:\s+(right|left)\s+of\s+(.+?))?\s*:\s*(.+)$/i;
+    NOTE_MULTI = /^note(?:\s+(right|left)\s+of\s+(.+?))?\s*:?\s*$/i;
   }
 });
 
 // src/graph/flowchart-parser.ts
 var flowchart_parser_exports = {};
 __export(flowchart_parser_exports, {
+  extractSymbols: () => extractSymbols,
   looksLikeFlowchart: () => looksLikeFlowchart,
   parseFlowchart: () => parseFlowchart
 });
@@ -2555,7 +2556,6 @@ function parseNodeRef(text, palette) {
 }
 function splitArrows(line10) {
   const segments = [];
-  const arrowRe = /(?:^|\s)-([^>\s(][^(>]*?)?\s*(?:\(([^)]+)\))?\s*->|(?:^|\s)->/g;
   let lastIndex = 0;
   const arrowPositions = [];
   let searchFrom = 0;
@@ -2796,7 +2796,20 @@ function looksLikeFlowchart(content) {
   /->[ \t]*[\[(<\/]/.test(content);
   return shapeNearArrow;
 }
-var LEGACY_GROUP_RE;
+function extractSymbols(docText) {
+  const entities = [];
+  let inMetadata = true;
+  for (const rawLine of docText.split("\n")) {
+    const line10 = rawLine.trim();
+    if (inMetadata && /^[a-z-]+\s*:/i.test(line10)) continue;
+    inMetadata = false;
+    if (line10.length === 0 || /^\s/.test(rawLine)) continue;
+    const m = NODE_ID_RE.exec(line10);
+    if (m && !entities.includes(m[1])) entities.push(m[1]);
+  }
+  return { kind: "flowchart", entities, keywords: [] };
+}
+var LEGACY_GROUP_RE, NODE_ID_RE;
 var init_flowchart_parser = __esm({
   "src/graph/flowchart-parser.ts"() {
     "use strict";
@@ -2804,6 +2817,7 @@ var init_flowchart_parser = __esm({
     init_diagnostics();
     init_parsing();
     LEGACY_GROUP_RE = /^##\s+/;
+    NODE_ID_RE = /^([a-zA-Z_][\w-]*)[\s([</{]/;
   }
 });
 
@@ -3079,6 +3093,7 @@ var init_state_parser = __esm({
 // src/class/parser.ts
 var parser_exports2 = {};
 __export(parser_exports2, {
+  extractSymbols: () => extractSymbols2,
   looksLikeClassDiagram: () => looksLikeClassDiagram,
   parseClassDiagram: () => parseClassDiagram
 });
@@ -3326,6 +3341,23 @@ function looksLikeClassDiagram(content) {
   if (hasRelationship && hasClassDecl && hasIndentedMember) return true;
   return false;
 }
+function extractSymbols2(docText) {
+  const entities = [];
+  let inMetadata = true;
+  for (const rawLine of docText.split("\n")) {
+    const line10 = rawLine.trim();
+    if (inMetadata && /^[a-z-]+\s*:/i.test(line10)) continue;
+    inMetadata = false;
+    if (line10.length === 0 || /^\s/.test(rawLine)) continue;
+    const m = CLASS_DECL_RE.exec(line10);
+    if (m && !entities.includes(m[1])) entities.push(m[1]);
+  }
+  return {
+    kind: "class",
+    entities,
+    keywords: ["extends", "implements", "abstract", "interface", "enum"]
+  };
+}
 var CLASS_DECL_RE, REL_ARROW_RE, VISIBILITY_RE, STATIC_SUFFIX_RE, METHOD_RE, FIELD_RE, ARROW_TO_TYPE;
 var init_parser2 = __esm({
   "src/class/parser.ts"() {
@@ -3353,6 +3385,7 @@ var init_parser2 = __esm({
 // src/er/parser.ts
 var parser_exports3 = {};
 __export(parser_exports3, {
+  extractSymbols: () => extractSymbols3,
   looksLikeERDiagram: () => looksLikeERDiagram,
   parseERDiagram: () => parseERDiagram
 });
@@ -3655,6 +3688,25 @@ function looksLikeERDiagram(content) {
   if (hasRelationship && hasTableDecl) return true;
   return false;
 }
+function extractSymbols3(docText) {
+  const entities = [];
+  let inMetadata = true;
+  for (const rawLine of docText.split("\n")) {
+    const line10 = rawLine.trim();
+    if (inMetadata && /^chart\s*:/i.test(line10)) continue;
+    if (inMetadata && /^[a-z-]+\s*:/i.test(line10)) continue;
+    inMetadata = false;
+    if (line10.length === 0) continue;
+    if (/^\s/.test(rawLine)) continue;
+    const m = TABLE_DECL_RE.exec(line10);
+    if (m) entities.push(m[1]);
+  }
+  return {
+    kind: "er",
+    entities,
+    keywords: ["pk", "fk", "unique", "nullable", "1", "*", "?"]
+  };
+}
 var TABLE_DECL_RE, COLUMN_RE, INDENT_REL_RE, CONSTRAINT_MAP, REL_SYMBOLIC_RE, REL_KEYWORD_RE, KEYWORD_TO_SYMBOL;
 var init_parser3 = __esm({
   "src/er/parser.ts"() {
@@ -4136,10 +4188,12 @@ function buildExtendedChartOption(parsed, palette, isDark) {
     );
   }
   if (parsed.type === "chord") {
+    const bg = isDark ? palette.surface : palette.bg;
     return buildChordOption(
       parsed,
       textColor,
       colors,
+      bg,
       titleConfig,
       tooltipTheme
     );
@@ -4157,6 +4211,7 @@ function buildExtendedChartOption(parsed, palette, isDark) {
     );
   }
   if (parsed.type === "scatter") {
+    const bg = isDark ? palette.surface : palette.bg;
     return buildScatterOption(
       parsed,
       palette,
@@ -4164,15 +4219,18 @@ function buildExtendedChartOption(parsed, palette, isDark) {
       axisLineColor,
       gridOpacity,
       colors,
+      bg,
       titleConfig,
       tooltipTheme
     );
   }
   if (parsed.type === "funnel") {
+    const bg = isDark ? palette.surface : palette.bg;
     return buildFunnelOption(
       parsed,
       textColor,
       colors,
+      bg,
       titleConfig,
       tooltipTheme
     );
@@ -4180,6 +4238,7 @@ function buildExtendedChartOption(parsed, palette, isDark) {
   return buildHeatmapOption(
     parsed,
     palette,
+    isDark,
     textColor,
     axisLineColor,
     titleConfig,
@@ -4236,7 +4295,7 @@ function buildSankeyOption(parsed, textColor, colors, titleConfig, tooltipTheme)
     ]
   };
 }
-function buildChordOption(parsed, textColor, colors, titleConfig, tooltipTheme) {
+function buildChordOption(parsed, textColor, colors, bg, titleConfig, tooltipTheme) {
   const nodeSet = /* @__PURE__ */ new Set();
   if (parsed.links) {
     for (const link of parsed.links) {
@@ -4256,12 +4315,13 @@ function buildChordOption(parsed, textColor, colors, titleConfig, tooltipTheme)
       }
     }
   }
-  const categories = nodeNames.map((name, index) => ({
-    name,
-    itemStyle: {
-      color: colors[index % colors.length]
-    }
-  }));
+  const categories = nodeNames.map((name, index) => {
+    const stroke2 = colors[index % colors.length];
+    return {
+      name,
+      itemStyle: { color: mix(stroke2, bg, 30), borderColor: stroke2, borderWidth: CHART_BORDER_WIDTH }
+    };
+  });
   return {
     ...CHART_BASE,
     title: titleConfig,
@@ -4429,7 +4489,7 @@ function buildFunctionOption(parsed, palette, textColor, axisLineColor, gridOpac
     series
   };
 }
-function buildScatterOption(parsed, palette, textColor, axisLineColor, gridOpacity, colors, titleConfig, tooltipTheme) {
+function buildScatterOption(parsed, palette, textColor, axisLineColor, gridOpacity, colors, bg, titleConfig, tooltipTheme) {
   const points = parsed.scatterPoints ?? [];
   const defaultSize = 15;
   const hasCategories = points.some((p) => p.category !== void 0);
@@ -4461,27 +4521,30 @@ function buildScatterOption(parsed, palette, textColor, axisLineColor, gridOpaci
       const data = categoryPoints.map((p) => ({
         name: p.name,
         value: hasSize ? [p.x, p.y, p.size ?? 0] : [p.x, p.y],
-        ...p.color && { itemStyle: { color: p.color } }
+        ...p.color && {
+          itemStyle: { color: mix(p.color, bg, 30), borderColor: p.color, borderWidth: CHART_BORDER_WIDTH }
+        }
       }));
       return {
         name: category,
         type: "scatter",
         data,
         ...hasSize ? { symbolSize: (val) => val[2] } : { symbolSize: defaultSize },
-        itemStyle: { color: catColor },
+        itemStyle: { color: mix(catColor, bg, 30), borderColor: catColor, borderWidth: CHART_BORDER_WIDTH },
         label: labelConfig,
         emphasis: emphasisConfig
       };
     });
   } else {
-    const data = points.map((p, index) => ({
-      name: p.name,
-      value: hasSize ? [p.x, p.y, p.size ?? 0] : [p.x, p.y],
-      ...hasSize ? { symbolSize: p.size ?? defaultSize } : { symbolSize: defaultSize },
-      itemStyle: {
-        color: p.color ?? colors[index % colors.length]
-      }
-    }));
+    const data = points.map((p, index) => {
+      const stroke2 = p.color ?? colors[index % colors.length];
+      return {
+        name: p.name,
+        value: hasSize ? [p.x, p.y, p.size ?? 0] : [p.x, p.y],
+        ...hasSize ? { symbolSize: p.size ?? defaultSize } : { symbolSize: defaultSize },
+        itemStyle: { color: mix(stroke2, bg, 30), borderColor: stroke2, borderWidth: CHART_BORDER_WIDTH }
+      };
+    });
     series = [
       {
         type: "scatter",
@@ -4584,7 +4647,8 @@ function buildScatterOption(parsed, palette, textColor, axisLineColor, gridOpaci
     series
   };
 }
-function buildHeatmapOption(parsed, palette, textColor, axisLineColor, titleConfig, tooltipTheme) {
+function buildHeatmapOption(parsed, palette, isDark, textColor, axisLineColor, titleConfig, tooltipTheme) {
+  const bg = isDark ? palette.surface : palette.bg;
   const heatmapRows = parsed.heatmapRows ?? [];
   const columns = parsed.columns ?? [];
   const rowLabels = heatmapRows.map((r) => r.label);
@@ -4655,10 +4719,10 @@ function buildHeatmapOption(parsed, palette, textColor, axisLineColor, titleConf
       top: "center",
       inRange: {
         color: [
-          palette.primary,
-          palette.colors.cyan,
-          palette.colors.yellow,
-          palette.colors.orange
+          mix(palette.primary, bg, 30),
+          mix(palette.colors.cyan, bg, 30),
+          mix(palette.colors.yellow, bg, 30),
+          mix(palette.colors.orange, bg, 30)
         ]
       },
       textStyle: {
@@ -4669,9 +4733,13 @@ function buildHeatmapOption(parsed, palette, textColor, axisLineColor, titleConf
       {
         type: "heatmap",
         data,
+        itemStyle: {
+          borderWidth: 2,
+          borderColor: bg
+        },
         label: {
           show: true,
-          color: "#ffffff",
+          color: textColor,
           fontSize: 14,
           fontWeight: "bold"
         },
@@ -4686,17 +4754,21 @@ function buildHeatmapOption(parsed, palette, textColor, axisLineColor, titleConf
     ]
   };
 }
-function buildFunnelOption(parsed, textColor, colors, titleConfig, tooltipTheme) {
+function buildFunnelOption(parsed, textColor, colors, bg, titleConfig, tooltipTheme) {
   const sorted = [...parsed.data].sort((a, b) => b.value - a.value);
   const topValue = sorted.length > 0 ? sorted[0].value : 1;
-  const data = sorted.map((d) => ({
-    name: d.label,
-    value: d.value,
-    itemStyle: {
-      color: d.color ?? colors[parsed.data.indexOf(d) % colors.length],
-      borderWidth: 0
-    }
-  }));
+  const data = sorted.map((d) => {
+    const stroke2 = d.color ?? colors[parsed.data.indexOf(d) % colors.length];
+    return {
+      name: d.label,
+      value: d.value,
+      itemStyle: {
+        color: mix(stroke2, bg, 30),
+        borderColor: stroke2,
+        borderWidth: CHART_BORDER_WIDTH
+      }
+    };
+  });
   const prevValueMap = /* @__PURE__ */ new Map();
   for (let i = 0; i < sorted.length; i++) {
     prevValueMap.set(
@@ -4842,23 +4914,24 @@ function makeGridAxis(type, textColor, axisLineColor, splitLineColor, gridOpacit
 function buildSimpleChartOption(parsed, palette, isDark, chartWidth) {
   if (parsed.error) return {};
   const { textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme } = buildChartCommons(parsed, palette, isDark);
+  const bg = isDark ? palette.surface : palette.bg;
   switch (parsed.type) {
     case "bar":
-      return buildBarOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme, chartWidth);
+      return buildBarOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, bg, titleConfig, tooltipTheme, chartWidth);
     case "bar-stacked":
-      return buildBarStackedOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme, chartWidth);
+      return buildBarStackedOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, bg, titleConfig, tooltipTheme, chartWidth);
     case "line":
       return parsed.seriesNames ? buildMultiLineOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme, chartWidth) : buildLineOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, titleConfig, tooltipTheme, chartWidth);
     case "area":
       return buildAreaOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, titleConfig, tooltipTheme, chartWidth);
     case "pie":
-      return buildPieOption(parsed, textColor, getSegmentColors(palette, parsed.data.length), titleConfig, tooltipTheme, false);
+      return buildPieOption(parsed, textColor, getSegmentColors(palette, parsed.data.length), bg, titleConfig, tooltipTheme, false);
     case "doughnut":
-      return buildPieOption(parsed, textColor, getSegmentColors(palette, parsed.data.length), titleConfig, tooltipTheme, true);
+      return buildPieOption(parsed, textColor, getSegmentColors(palette, parsed.data.length), bg, titleConfig, tooltipTheme, true);
     case "radar":
-      return buildRadarOption(parsed, palette, textColor, gridOpacity, colors, titleConfig, tooltipTheme);
+      return buildRadarOption(parsed, palette, isDark, textColor, gridOpacity, titleConfig, tooltipTheme);
     case "polar-area":
-      return buildPolarAreaOption(parsed, textColor, getSegmentColors(palette, parsed.data.length), titleConfig, tooltipTheme);
+      return buildPolarAreaOption(parsed, textColor, getSegmentColors(palette, parsed.data.length), bg, titleConfig, tooltipTheme);
   }
 }
 function makeChartGrid(options) {
@@ -4870,14 +4943,17 @@ function makeChartGrid(options) {
     containLabel: true
   };
 }
-function buildBarOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme, chartWidth) {
+function buildBarOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, bg, titleConfig, tooltipTheme, chartWidth) {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
   const isHorizontal = parsed.orientation === "horizontal";
   const labels = parsed.data.map((d) => d.label);
-  const data = parsed.data.map((d, i) => ({
-    value: d.value,
-    itemStyle: { color: d.color ?? colors[i % colors.length] }
-  }));
+  const data = parsed.data.map((d, i) => {
+    const stroke2 = d.color ?? colors[i % colors.length];
+    return {
+      value: d.value,
+      itemStyle: { color: mix(stroke2, bg, 30), borderColor: stroke2, borderWidth: CHART_BORDER_WIDTH }
+    };
+  });
   const hCatGap = isHorizontal && yLabel ? Math.max(40, Math.max(...labels.map((l) => l.length)) * 8 + 16) : void 0;
   const categoryAxis = makeGridAxis("category", textColor, axisLineColor, splitLineColor, gridOpacity, isHorizontal ? yLabel : xLabel, labels, hCatGap, !isHorizontal ? chartWidth : void 0);
   const valueAxis = makeGridAxis("value", textColor, axisLineColor, splitLineColor, gridOpacity, isHorizontal ? xLabel : yLabel);
@@ -5058,12 +5134,15 @@ function segmentLabelFormatter(mode) {
       return "{b} \u2014 {c} ({d}%)";
   }
 }
-function buildPieOption(parsed, textColor, colors, titleConfig, tooltipTheme, isDoughnut) {
-  const data = parsed.data.map((d, i) => ({
-    name: d.label,
-    value: d.value,
-    itemStyle: { color: d.color ?? colors[i % colors.length] }
-  }));
+function buildPieOption(parsed, textColor, colors, bg, titleConfig, tooltipTheme, isDoughnut) {
+  const data = parsed.data.map((d, i) => {
+    const stroke2 = d.color ?? colors[i % colors.length];
+    return {
+      name: d.label,
+      value: d.value,
+      itemStyle: { color: mix(stroke2, bg, 30), borderColor: stroke2, borderWidth: CHART_BORDER_WIDTH }
+    };
+  });
   return {
     ...CHART_BASE,
     title: titleConfig,
@@ -5088,7 +5167,8 @@ function buildPieOption(parsed, textColor, colors, titleConfig, tooltipTheme, is
     ]
   };
 }
-function buildRadarOption(parsed, palette, textColor, gridOpacity, colors, titleConfig, tooltipTheme) {
+function buildRadarOption(parsed, palette, isDark, textColor, gridOpacity, titleConfig, tooltipTheme) {
+  const bg = isDark ? palette.surface : palette.bg;
   const radarColor = parsed.color ?? parsed.seriesNameColors?.[0] ?? palette.primary;
   const values = parsed.data.map((d) => d.value);
   const maxValue = Math.max(...values) * 1.15;
@@ -5125,7 +5205,7 @@ function buildRadarOption(parsed, palette, textColor, gridOpacity, colors, title
           {
             value: values,
             name: parsed.series ?? "Value",
-            areaStyle: { color: radarColor, opacity: 0.25 },
+            areaStyle: { color: mix(radarColor, bg, 30) },
             lineStyle: { color: radarColor },
             itemStyle: { color: radarColor },
             symbol: "circle",
@@ -5144,12 +5224,15 @@ function buildRadarOption(parsed, palette, textColor, gridOpacity, colors, title
     ]
   };
 }
-function buildPolarAreaOption(parsed, textColor, colors, titleConfig, tooltipTheme) {
-  const data = parsed.data.map((d, i) => ({
-    name: d.label,
-    value: d.value,
-    itemStyle: { color: d.color ?? colors[i % colors.length] }
-  }));
+function buildPolarAreaOption(parsed, textColor, colors, bg, titleConfig, tooltipTheme) {
+  const data = parsed.data.map((d, i) => {
+    const stroke2 = d.color ?? colors[i % colors.length];
+    return {
+      name: d.label,
+      value: d.value,
+      itemStyle: { color: mix(stroke2, bg, 30), borderColor: stroke2, borderWidth: CHART_BORDER_WIDTH }
+    };
+  });
   return {
     ...CHART_BASE,
     title: titleConfig,
@@ -5175,7 +5258,7 @@ function buildPolarAreaOption(parsed, textColor, colors, titleConfig, tooltipThe
     ]
   };
 }
-function buildBarStackedOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme, chartWidth) {
+function buildBarStackedOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, bg, titleConfig, tooltipTheme, chartWidth) {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
   const isHorizontal = parsed.orientation === "horizontal";
   const seriesNames = parsed.seriesNames ?? [];
@@ -5190,12 +5273,12 @@ function buildBarStackedOption(parsed, textColor, axisLineColor, splitLineColor,
       type: "bar",
       stack: "total",
       data,
-      itemStyle: { color },
+      itemStyle: { color: mix(color, bg, 30), borderColor: color, borderWidth: CHART_BORDER_WIDTH },
       label: {
         show: true,
         position: "inside",
         formatter: "{c}",
-        color: "#ffffff",
+        color: textColor,
         fontSize: 14,
         fontWeight: "bold",
         fontFamily: FONT_FAMILY
@@ -5267,7 +5350,7 @@ async function renderExtendedChartForExport(content, theme, palette, options) {
     chart.dispose();
   }
 }
-var echarts, EMPHASIS_SELF, CHART_BASE, ECHART_EXPORT_WIDTH, ECHART_EXPORT_HEIGHT, STANDARD_CHART_TYPES;
+var echarts, EMPHASIS_SELF, CHART_BASE, CHART_BORDER_WIDTH, ECHART_EXPORT_WIDTH, ECHART_EXPORT_HEIGHT, STANDARD_CHART_TYPES;
 var init_echarts = __esm({
   "src/echarts.ts"() {
     "use strict";
@@ -5275,12 +5358,14 @@ var init_echarts = __esm({
     init_fonts();
     init_branding();
     init_palettes();
+    init_color_utils();
     init_chart();
     init_diagnostics();
     init_colors();
     init_parsing();
     EMPHASIS_SELF = { focus: "self", blurScope: "global" };
     CHART_BASE = { backgroundColor: "transparent", animation: false };
+    CHART_BORDER_WIDTH = 2;
     ECHART_EXPORT_WIDTH = 1200;
     ECHART_EXPORT_HEIGHT = 800;
     STANDARD_CHART_TYPES = /* @__PURE__ */ new Set([
@@ -6995,6 +7080,7 @@ var init_types2 = __esm({
 // src/infra/parser.ts
 var parser_exports9 = {};
 __export(parser_exports9, {
+  extractSymbols: () => extractSymbols4,
   parseInfra: () => parseInfra
 });
 function nodeId2(name) {
@@ -7037,7 +7123,6 @@ function parseInfra(content) {
     error: null
   };
   const nodeMap = /* @__PURE__ */ new Map();
-  const edgeNodeId = "edge";
   const setError = (line10, message) => {
     const diag = makeDgmoError(line10, message);
     result.diagnostics.push(diag);
@@ -7403,6 +7488,38 @@ function parseInfra(content) {
   }
   return result;
 }
+function extractSymbols4(docText) {
+  const entities = [];
+  let inMetadata = true;
+  let inTagGroup = false;
+  for (const rawLine of docText.split("\n")) {
+    const line10 = rawLine.trim();
+    if (line10.length === 0) continue;
+    const indented = /^\s/.test(rawLine);
+    if (inMetadata) {
+      if (!indented && !/^[a-z-]+\s*:/i.test(line10)) inMetadata = false;
+      else continue;
+    }
+    if (!indented) {
+      if (/^tag\s*:/i.test(line10)) {
+        inTagGroup = true;
+        continue;
+      }
+      inTagGroup = false;
+      if (/^\[/.test(line10)) continue;
+      const m = COMPONENT_RE.exec(line10);
+      if (m && !entities.includes(m[1])) entities.push(m[1]);
+    } else {
+      if (inTagGroup) continue;
+      if (/^->/.test(line10)) continue;
+      if (/^-[^>]+-?>/.test(line10)) continue;
+      if (/^\w[\w-]*\s*:/.test(line10)) continue;
+      const m = COMPONENT_RE.exec(line10);
+      if (m && !entities.includes(m[1])) entities.push(m[1]);
+    }
+  }
+  return { kind: "infra", entities, keywords: [] };
+}
 var CONNECTION_RE, SIMPLE_CONNECTION_RE, GROUP_RE, TAG_GROUP_RE, TAG_VALUE_RE, COMPONENT_RE, PIPE_META_RE, PROPERTY_RE, PERCENT_RE, RANGE_RE, EDGE_NODE_NAMES;
 var init_parser9 = __esm({
   "src/infra/parser.ts"() {
@@ -8265,7 +8382,6 @@ function layoutOrg(parsed, hiddenCounts, activeTagGroup, hiddenAttributes, expan
   const visibleGroups = activeTagGroup != null ? legendGroups.filter((g) => g.name.toLowerCase() === activeTagGroup.toLowerCase()) : legendGroups;
   const allExpanded = expandAllLegend && activeTagGroup == null;
   const effectiveW = (g) => activeTagGroup != null || allExpanded ? g.width : g.minifiedWidth;
-  const effectiveH = (g) => activeTagGroup != null || allExpanded ? g.height : g.minifiedHeight;
   if (visibleGroups.length > 0) {
     if (legendPosition === "bottom") {
       const totalGroupsWidth = visibleGroups.reduce((s, g) => s + effectiveW(g), 0) + (visibleGroups.length - 1) * LEGEND_GROUP_GAP2;
@@ -8419,6 +8535,35 @@ var init_collapse = __esm({
   }
 });
 
+// src/utils/export-container.ts
+function runInExportContainer(width, height, fn) {
+  const container = document.createElement("div");
+  container.style.width = `${width}px`;
+  container.style.height = `${height}px`;
+  container.style.position = "absolute";
+  container.style.left = "-9999px";
+  document.body.appendChild(container);
+  try {
+    return fn(container);
+  } finally {
+    document.body.removeChild(container);
+  }
+}
+function extractExportSvg(container, theme) {
+  const svgEl = container.querySelector("svg");
+  if (!svgEl) return "";
+  if (theme === "transparent") svgEl.style.background = "none";
+  svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+  svgEl.style.fontFamily = FONT_FAMILY;
+  return svgEl.outerHTML;
+}
+var init_export_container = __esm({
+  "src/utils/export-container.ts"() {
+    "use strict";
+    init_fonts();
+  }
+});
+
 // src/org/renderer.ts
 var renderer_exports = {};
 __export(renderer_exports, {
@@ -8673,31 +8818,16 @@ function renderOrgForExport(content, theme, palette) {
   const exportHidden = hideOption ? new Set(hideOption.split(",").map((s) => s.trim().toLowerCase())) : void 0;
   const layout = layoutOrg(parsed, void 0, void 0, exportHidden);
   const isDark = theme === "dark";
-  const container = document.createElement("div");
   const titleOffset = parsed.title ? TITLE_HEIGHT : 0;
   const exportWidth = layout.width + DIAGRAM_PADDING * 2;
   const exportHeight = layout.height + DIAGRAM_PADDING * 2 + titleOffset;
-  container.style.width = `${exportWidth}px`;
-  container.style.height = `${exportHeight}px`;
-  container.style.position = "absolute";
-  container.style.left = "-9999px";
-  document.body.appendChild(container);
-  try {
+  return runInExportContainer(exportWidth, exportHeight, (container) => {
     renderOrg(container, parsed, layout, palette, isDark, void 0, {
       width: exportWidth,
       height: exportHeight
     });
-    const svgEl = container.querySelector("svg");
-    if (!svgEl) return "";
-    if (theme === "transparent") {
-      svgEl.style.background = "none";
-    }
-    svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
-    svgEl.style.fontFamily = FONT_FAMILY;
-    return svgEl.outerHTML;
-  } finally {
-    document.body.removeChild(container);
-  }
+    return extractExportSvg(container, theme);
+  });
 }
 var d3Selection, DIAGRAM_PADDING, MAX_SCALE, TITLE_HEIGHT, TITLE_FONT_SIZE, LABEL_FONT_SIZE, META_FONT_SIZE, META_LINE_HEIGHT2, HEADER_HEIGHT2, SEPARATOR_GAP2, EDGE_STROKE_WIDTH, NODE_STROKE_WIDTH, CARD_RADIUS, CONTAINER_RADIUS, CONTAINER_LABEL_FONT_SIZE, CONTAINER_META_FONT_SIZE, CONTAINER_META_LINE_HEIGHT2, CONTAINER_HEADER_HEIGHT, COLLAPSE_BAR_HEIGHT, COLLAPSE_BAR_INSET, LEGEND_FIXED_GAP;
 var init_renderer = __esm({
@@ -8705,6 +8835,7 @@ var init_renderer = __esm({
     "use strict";
     d3Selection = __toESM(require("d3-selection"), 1);
     init_fonts();
+    init_export_container();
     init_color_utils();
     init_parser4();
     init_layout();
@@ -10290,7 +10421,6 @@ function renderClassDiagram(container, parsed, layout, palette, isDark, onClickI
   const scaleY = (availH - DIAGRAM_PADDING4 * 2) / diagramH;
   const scale = Math.min(MAX_SCALE3, scaleX, scaleY);
   const scaledW = diagramW * scale;
-  const scaledH = diagramH * scale;
   const offsetX = (width - scaledW) / 2;
   const offsetY = titleHeight + DIAGRAM_PADDING4;
   const svg = d3Selection4.select(container).append("svg").attr("width", width).attr("height", height).style("font-family", FONT_FAMILY);
@@ -10421,15 +10551,9 @@ function renderClassDiagramForExport(content, theme, palette) {
   if (parsed.error || parsed.classes.length === 0) return "";
   const layout = layoutClassDiagram(parsed);
   const isDark = theme === "dark";
-  const container = document.createElement("div");
   const exportWidth = layout.width + DIAGRAM_PADDING4 * 2;
   const exportHeight = layout.height + DIAGRAM_PADDING4 * 2 + (parsed.title ? 40 : 0);
-  container.style.width = `${exportWidth}px`;
-  container.style.height = `${exportHeight}px`;
-  container.style.position = "absolute";
-  container.style.left = "-9999px";
-  document.body.appendChild(container);
-  try {
+  return runInExportContainer(exportWidth, exportHeight, (container) => {
     renderClassDiagram(
       container,
       parsed,
@@ -10439,17 +10563,8 @@ function renderClassDiagramForExport(content, theme, palette) {
       void 0,
       { width: exportWidth, height: exportHeight }
     );
-    const svgEl = container.querySelector("svg");
-    if (!svgEl) return "";
-    if (theme === "transparent") {
-      svgEl.style.background = "none";
-    }
-    svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
-    svgEl.style.fontFamily = FONT_FAMILY;
-    return svgEl.outerHTML;
-  } finally {
-    document.body.removeChild(container);
-  }
+    return extractExportSvg(container, theme);
+  });
 }
 var d3Selection4, d3Shape2, DIAGRAM_PADDING4, MAX_SCALE3, CLASS_FONT_SIZE, MEMBER_FONT_SIZE, EDGE_LABEL_FONT_SIZE2, EDGE_STROKE_WIDTH3, NODE_STROKE_WIDTH3, MEMBER_LINE_HEIGHT2, COMPARTMENT_PADDING_Y2, MEMBER_PADDING_X, lineGenerator2;
 var init_renderer4 = __esm({
@@ -10458,6 +10573,7 @@ var init_renderer4 = __esm({
     d3Selection4 = __toESM(require("d3-selection"), 1);
     d3Shape2 = __toESM(require("d3-shape"), 1);
     init_fonts();
+    init_export_container();
     init_color_utils();
     init_parser2();
     init_layout3();
@@ -10497,110 +10613,211 @@ function computeNodeDimensions2(table) {
   const height = headerHeight + columnsHeight + (columnsHeight === 0 ? 4 : 0);
   return { width, height, headerHeight, columnsHeight };
 }
+function findConnectedComponents(tableIds, relationships) {
+  const adj = /* @__PURE__ */ new Map();
+  for (const id of tableIds) adj.set(id, /* @__PURE__ */ new Set());
+  for (const rel of relationships) {
+    adj.get(rel.source)?.add(rel.target);
+    adj.get(rel.target)?.add(rel.source);
+  }
+  const visited = /* @__PURE__ */ new Set();
+  const components = [];
+  for (const id of tableIds) {
+    if (visited.has(id)) continue;
+    const comp = [];
+    const queue = [id];
+    while (queue.length > 0) {
+      const cur = queue.shift();
+      if (visited.has(cur)) continue;
+      visited.add(cur);
+      comp.push(cur);
+      for (const nb of adj.get(cur) ?? []) {
+        if (!visited.has(nb)) queue.push(nb);
+      }
+    }
+    components.push(comp);
+  }
+  return components;
+}
+function layoutComponent(tables, rels, dimMap) {
+  const nodePositions = /* @__PURE__ */ new Map();
+  const edgePoints = /* @__PURE__ */ new Map();
+  if (tables.length === 1) {
+    const dims = dimMap.get(tables[0].id);
+    nodePositions.set(tables[0].id, { x: dims.width / 2, y: dims.height / 2, ...dims });
+    return { nodePositions, edgePoints, width: dims.width, height: dims.height };
+  }
+  const g = new import_dagre3.default.graphlib.Graph({ multigraph: true });
+  g.setGraph({ rankdir: "LR", nodesep: 40, ranksep: 80, edgesep: 20 });
+  g.setDefaultEdgeLabel(() => ({}));
+  for (const table of tables) {
+    const dims = dimMap.get(table.id);
+    g.setNode(table.id, { width: dims.width, height: dims.height });
+  }
+  for (const rel of rels) {
+    g.setEdge(rel.source, rel.target, { label: rel.label ?? "" }, String(rel.lineNumber));
+  }
+  import_dagre3.default.layout(g);
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const table of tables) {
+    const pos = g.node(table.id);
+    const dims = dimMap.get(table.id);
+    minX = Math.min(minX, pos.x - dims.width / 2);
+    minY = Math.min(minY, pos.y - dims.height / 2);
+    maxX = Math.max(maxX, pos.x + dims.width / 2);
+    maxY = Math.max(maxY, pos.y + dims.height / 2);
+  }
+  for (const rel of rels) {
+    const ed = g.edge(rel.source, rel.target, String(rel.lineNumber));
+    for (const pt of ed?.points ?? []) {
+      minX = Math.min(minX, pt.x);
+      minY = Math.min(minY, pt.y);
+      maxX = Math.max(maxX, pt.x);
+      maxY = Math.max(maxY, pt.y);
+    }
+    if (rel.label && (ed?.points ?? []).length > 0) {
+      const pts = ed.points;
+      const mid = pts[Math.floor(pts.length / 2)];
+      const hw = (rel.label.length * 7 + 8) / 2;
+      minX = Math.min(minX, mid.x - hw);
+      maxX = Math.max(maxX, mid.x + hw);
+    }
+  }
+  for (const table of tables) {
+    const pos = g.node(table.id);
+    const dims = dimMap.get(table.id);
+    nodePositions.set(table.id, {
+      x: pos.x - minX,
+      y: pos.y - minY,
+      ...dims
+    });
+  }
+  for (const rel of rels) {
+    const ed = g.edge(rel.source, rel.target, String(rel.lineNumber));
+    edgePoints.set(
+      rel.lineNumber,
+      (ed?.points ?? []).map((pt) => ({ x: pt.x - minX, y: pt.y - minY }))
+    );
+  }
+  return {
+    nodePositions,
+    edgePoints,
+    width: Math.max(0, maxX - minX),
+    height: Math.max(0, maxY - minY)
+  };
+}
+function packComponents(items) {
+  if (items.length === 0) return [];
+  const sorted = [...items].sort((a, b) => {
+    const aConnected = a.compIds.length > 1 ? 1 : 0;
+    const bConnected = b.compIds.length > 1 ? 1 : 0;
+    if (aConnected !== bConnected) return bConnected - aConnected;
+    return b.compLayout.height - a.compLayout.height;
+  });
+  const totalArea = items.reduce(
+    (s, c) => s + (c.compLayout.width || MIN_WIDTH2) * (c.compLayout.height || HEADER_BASE2),
+    0
+  );
+  const targetW = Math.max(
+    Math.sqrt(totalArea) * 1.5,
+    sorted[0].compLayout.width
+    // at least as wide as the widest component
+  );
+  const placements = [];
+  let curX = 0;
+  let curY = 0;
+  let rowH = 0;
+  for (const item of sorted) {
+    const w = item.compLayout.width || MIN_WIDTH2;
+    const h = item.compLayout.height || HEADER_BASE2;
+    if (curX > 0 && curX + w > targetW) {
+      curY += rowH + COMP_GAP;
+      curX = 0;
+      rowH = 0;
+    }
+    placements.push({ compIds: item.compIds, compLayout: item.compLayout, offsetX: curX, offsetY: curY });
+    curX += w + COMP_GAP;
+    rowH = Math.max(rowH, h);
+  }
+  return placements;
+}
 function layoutERDiagram(parsed) {
   if (parsed.tables.length === 0) {
     return { nodes: [], edges: [], width: 0, height: 0 };
   }
-  const g = new import_dagre3.default.graphlib.Graph();
-  g.setGraph({
-    rankdir: "TB",
-    nodesep: 60,
-    ranksep: 80,
-    edgesep: 20
-  });
-  g.setDefaultEdgeLabel(() => ({}));
   const dimMap = /* @__PURE__ */ new Map();
   for (const table of parsed.tables) {
-    const dims = computeNodeDimensions2(table);
-    dimMap.set(table.id, dims);
-    g.setNode(table.id, {
-      label: table.name,
-      width: dims.width,
-      height: dims.height
-    });
+    dimMap.set(table.id, computeNodeDimensions2(table));
   }
-  for (const rel of parsed.relationships) {
-    g.setEdge(rel.source, rel.target, { label: rel.label ?? "" });
+  const compIdSets = findConnectedComponents(
+    parsed.tables.map((t) => t.id),
+    parsed.relationships
+  );
+  const tableById = new Map(parsed.tables.map((t) => [t.id, t]));
+  const componentItems = compIdSets.map((ids) => {
+    const tables = ids.map((id) => tableById.get(id));
+    const rels = parsed.relationships.filter((r) => ids.includes(r.source));
+    return { compIds: ids, compLayout: layoutComponent(tables, rels, dimMap) };
+  });
+  const packed = packComponents(componentItems);
+  const placementByTableId = /* @__PURE__ */ new Map();
+  for (const p of packed) {
+    for (const id of p.compIds) placementByTableId.set(id, p);
+  }
+  const placementByRelLine = /* @__PURE__ */ new Map();
+  for (const p of packed) {
+    for (const lineNum of p.compLayout.edgePoints.keys()) {
+      placementByRelLine.set(lineNum, p);
+    }
   }
-  import_dagre3.default.layout(g);
   const layoutNodes = parsed.tables.map((table) => {
-    const pos = g.node(table.id);
-    const dims = dimMap.get(table.id);
+    const p = placementByTableId.get(table.id);
+    const pos = p.compLayout.nodePositions.get(table.id);
     return {
       ...table,
-      x: pos.x,
-      y: pos.y,
-      width: dims.width,
-      height: dims.height,
-      headerHeight: dims.headerHeight,
-      columnsHeight: dims.columnsHeight
+      x: pos.x + p.offsetX + HALF_MARGIN,
+      y: pos.y + p.offsetY + HALF_MARGIN,
+      width: pos.width,
+      height: pos.height,
+      headerHeight: pos.headerHeight,
+      columnsHeight: pos.columnsHeight
     };
   });
   const layoutEdges = parsed.relationships.map((rel) => {
-    const edgeData = g.edge(rel.source, rel.target);
+    const p = placementByRelLine.get(rel.lineNumber);
+    const pts = p?.compLayout.edgePoints.get(rel.lineNumber) ?? [];
     return {
       source: rel.source,
       target: rel.target,
       cardinality: rel.cardinality,
-      points: edgeData?.points ?? [],
+      points: pts.map((pt) => ({
+        x: pt.x + (p?.offsetX ?? 0) + HALF_MARGIN,
+        y: pt.y + (p?.offsetY ?? 0) + HALF_MARGIN
+      })),
       label: rel.label,
       lineNumber: rel.lineNumber
     };
   });
-  let minX = Infinity;
-  let minY = Infinity;
   let maxX = 0;
   let maxY = 0;
   for (const node of layoutNodes) {
-    const left = node.x - node.width / 2;
-    const right = node.x + node.width / 2;
-    const top = node.y - node.height / 2;
-    const bottom = node.y + node.height / 2;
-    if (left < minX) minX = left;
-    if (right > maxX) maxX = right;
-    if (top < minY) minY = top;
-    if (bottom > maxY) maxY = bottom;
+    maxX = Math.max(maxX, node.x + node.width / 2);
+    maxY = Math.max(maxY, node.y + node.height / 2);
   }
   for (const edge of layoutEdges) {
     for (const pt of edge.points) {
-      if (pt.x < minX) minX = pt.x;
-      if (pt.x > maxX) maxX = pt.x;
-      if (pt.y < minY) minY = pt.y;
-      if (pt.y > maxY) maxY = pt.y;
-    }
-    if (edge.label && edge.points.length > 0) {
-      const midPt = edge.points[Math.floor(edge.points.length / 2)];
-      const labelHalfW = (edge.label.length * 7 + 8) / 2;
-      if (midPt.x + labelHalfW > maxX) maxX = midPt.x + labelHalfW;
-      if (midPt.x - labelHalfW < minX) minX = midPt.x - labelHalfW;
+      maxX = Math.max(maxX, pt.x);
+      maxY = Math.max(maxY, pt.y);
     }
   }
-  const EDGE_MARGIN2 = 60;
-  const HALF_MARGIN = EDGE_MARGIN2 / 2;
-  const shiftX = -minX + HALF_MARGIN;
-  const shiftY = -minY + HALF_MARGIN;
-  for (const node of layoutNodes) {
-    node.x += shiftX;
-    node.y += shiftY;
-  }
-  for (const edge of layoutEdges) {
-    for (const pt of edge.points) {
-      pt.x += shiftX;
-      pt.y += shiftY;
-    }
-  }
-  maxX += shiftX;
-  maxY += shiftY;
-  const totalWidth = maxX + HALF_MARGIN;
-  const totalHeight = maxY + HALF_MARGIN;
   return {
     nodes: layoutNodes,
     edges: layoutEdges,
-    width: totalWidth,
-    height: totalHeight
+    width: maxX + HALF_MARGIN,
+    height: maxY + HALF_MARGIN
   };
 }
-var import_dagre3, MIN_WIDTH2, CHAR_WIDTH4, PADDING_X2, HEADER_BASE2, MEMBER_LINE_HEIGHT3, COMPARTMENT_PADDING_Y3, SEPARATOR_HEIGHT2;
+var import_dagre3, MIN_WIDTH2, CHAR_WIDTH4, PADDING_X2, HEADER_BASE2, MEMBER_LINE_HEIGHT3, COMPARTMENT_PADDING_Y3, SEPARATOR_HEIGHT2, HALF_MARGIN, COMP_GAP;
 var init_layout4 = __esm({
   "src/er/layout.ts"() {
     "use strict";
@@ -10612,6 +10829,135 @@ var init_layout4 = __esm({
     MEMBER_LINE_HEIGHT3 = 18;
     COMPARTMENT_PADDING_Y3 = 8;
     SEPARATOR_HEIGHT2 = 1;
+    HALF_MARGIN = 30;
+    COMP_GAP = 60;
+  }
+});
+
+// src/er/classify.ts
+function classifyEREntities(tables, relationships) {
+  const result = /* @__PURE__ */ new Map();
+  if (tables.length === 0) return result;
+  const indegreeMap = {};
+  for (const t of tables) indegreeMap[t.id] = 0;
+  for (const rel of relationships) {
+    if (rel.source === rel.target) continue;
+    if (rel.cardinality.from === "1" && rel.cardinality.to !== "1") {
+      indegreeMap[rel.source] = (indegreeMap[rel.source] ?? 0) + 1;
+    }
+    if (rel.cardinality.to === "1" && rel.cardinality.from !== "1") {
+      indegreeMap[rel.target] = (indegreeMap[rel.target] ?? 0) + 1;
+    }
+  }
+  const tableStarNeighbors = /* @__PURE__ */ new Map();
+  for (const rel of relationships) {
+    if (rel.source === rel.target) continue;
+    if (rel.cardinality.from === "*") {
+      if (!tableStarNeighbors.has(rel.source)) tableStarNeighbors.set(rel.source, /* @__PURE__ */ new Set());
+      tableStarNeighbors.get(rel.source).add(rel.target);
+    }
+    if (rel.cardinality.to === "*") {
+      if (!tableStarNeighbors.has(rel.target)) tableStarNeighbors.set(rel.target, /* @__PURE__ */ new Set());
+      tableStarNeighbors.get(rel.target).add(rel.source);
+    }
+  }
+  const mmParticipants = /* @__PURE__ */ new Set();
+  for (const [id, neighbors] of tableStarNeighbors) {
+    if (neighbors.size >= 2) mmParticipants.add(id);
+  }
+  const indegreeValues = Object.values(indegreeMap);
+  const mean = indegreeValues.reduce((a, b) => a + b, 0) / indegreeValues.length;
+  const variance = indegreeValues.reduce((a, b) => a + (b - mean) ** 2, 0) / indegreeValues.length;
+  const stddev = Math.sqrt(variance);
+  const sorted = [...indegreeValues].sort((a, b) => a - b);
+  const median = sorted.length % 2 === 0 ? (sorted[sorted.length / 2 - 1] + sorted[sorted.length / 2]) / 2 : sorted[Math.floor(sorted.length / 2)];
+  for (const table of tables) {
+    const id = table.id;
+    const cols = table.columns;
+    const fkCols = cols.filter((c) => c.constraints.includes("fk"));
+    const pkFkCols = cols.filter(
+      (c) => c.constraints.includes("pk") && c.constraints.includes("fk")
+    );
+    const fkCount = fkCols.length;
+    const fkRatio = cols.length === 0 ? 0 : fkCount / cols.length;
+    const indegree = indegreeMap[id] ?? 0;
+    const nameLower = table.name.toLowerCase();
+    const externalRels = relationships.filter(
+      (r) => (r.source === id || r.target === id) && r.source !== r.target
+    );
+    const hasSelfRef = relationships.some((r) => r.source === id && r.target === id);
+    const externalTargets = /* @__PURE__ */ new Set();
+    for (const rel of externalRels) {
+      externalTargets.add(rel.source === id ? rel.target : rel.source);
+    }
+    if (hasSelfRef && externalRels.length === 0) {
+      result.set(id, "self-referential");
+      continue;
+    }
+    const isInheritancePattern = pkFkCols.length >= 2 && externalTargets.size === 1;
+    const junctionByRatio = fkRatio >= 0.6 && !isInheritancePattern;
+    const junctionByCompositePk = pkFkCols.length >= 2 && externalTargets.size >= 2;
+    const junctionByMm = mmParticipants.has(id);
+    if (junctionByRatio || junctionByCompositePk || junctionByMm) {
+      result.set(id, "junction");
+      continue;
+    }
+    if (fkRatio >= 0.4 && fkRatio < 0.6 && pkFkCols.length < 2 && !mmParticipants.has(id)) {
+      result.set(id, "ambiguous");
+      continue;
+    }
+    const nameMatchesLookup = LOOKUP_NAME_SUFFIXES.some((s) => nameLower.endsWith(s));
+    if (nameMatchesLookup && cols.length <= 6 && fkCount <= 1 && indegree > median) {
+      result.set(id, "lookup");
+      continue;
+    }
+    if (tables.length >= 6 && indegree > 0 && indegree > mean + 1.5 * stddev && indegree >= 2 * mean) {
+      result.set(id, "hub");
+      continue;
+    }
+    if (fkCount > 0) {
+      result.set(id, "dependent");
+      continue;
+    }
+    result.set(id, "core");
+  }
+  return result;
+}
+var ROLE_COLORS, ROLE_LABELS, ROLE_ORDER, LOOKUP_NAME_SUFFIXES;
+var init_classify = __esm({
+  "src/er/classify.ts"() {
+    "use strict";
+    ROLE_COLORS = {
+      core: "green",
+      dependent: "blue",
+      junction: "red",
+      ambiguous: "purple",
+      lookup: "yellow",
+      hub: "orange",
+      "self-referential": "teal",
+      unclassified: "gray"
+    };
+    ROLE_LABELS = {
+      core: "Core entity",
+      dependent: "Dependent",
+      junction: "Junction / M:M",
+      ambiguous: "Bridge",
+      lookup: "Lookup / Reference",
+      hub: "Hub",
+      "self-referential": "Self-referential",
+      unclassified: "Unclassified"
+    };
+    ROLE_ORDER = [
+      "core",
+      "dependent",
+      "junction",
+      "ambiguous",
+      "lookup",
+      "hub",
+      "self-referential",
+      "unclassified"
+    ];
+    LOOKUP_NAME_SUFFIXES = ["_type", "_status", "_code", "_category"];
   }
 });
 
@@ -10681,25 +11027,41 @@ function drawCardinality(g, point, prevPoint, cardinality, color, useLabels) {
     g.append("line").attr("x1", bx + px * spread).attr("y1", by + py * spread).attr("x2", bx - px * spread).attr("y2", by - py * spread).attr("stroke", color).attr("stroke-width", sw);
   }
 }
-function renderERDiagram(container, parsed, layout, palette, isDark, onClickItem, exportDims, activeTagGroup) {
+function renderERDiagram(container, parsed, layout, palette, isDark, onClickItem, exportDims, activeTagGroup, semanticColorsActive) {
   d3Selection5.select(container).selectAll(":not([data-d3-tooltip])").remove();
-  const width = exportDims?.width ?? container.clientWidth;
-  const height = exportDims?.height ?? container.clientHeight;
-  if (width <= 0 || height <= 0) return;
+  const useSemanticColors = parsed.tagGroups.length === 0 && layout.nodes.every((n) => !n.color);
+  const legendReserveH = useSemanticColors ? LEGEND_HEIGHT + DIAGRAM_PADDING5 : 0;
   const titleHeight = parsed.title ? 40 : 0;
   const diagramW = layout.width;
   const diagramH = layout.height;
-  const availH = height - titleHeight;
-  const scaleX = (width - DIAGRAM_PADDING5 * 2) / diagramW;
-  const scaleY = (availH - DIAGRAM_PADDING5 * 2) / diagramH;
-  const scale = Math.min(MAX_SCALE4, scaleX, scaleY);
-  const scaledW = diagramW * scale;
-  const scaledH = diagramH * scale;
-  const offsetX = (width - scaledW) / 2;
-  const offsetY = titleHeight + DIAGRAM_PADDING5;
-  const svg = d3Selection5.select(container).append("svg").attr("width", width).attr("height", height).style("font-family", FONT_FAMILY);
+  const naturalW = diagramW + DIAGRAM_PADDING5 * 2;
+  const naturalH = diagramH + titleHeight + legendReserveH + DIAGRAM_PADDING5 * 2;
+  let viewW;
+  let viewH;
+  let scale;
+  let offsetX;
+  let offsetY;
+  if (exportDims) {
+    viewW = exportDims.width ?? naturalW;
+    viewH = exportDims.height ?? naturalH;
+    const availH = viewH - titleHeight - legendReserveH;
+    const scaleX = (viewW - DIAGRAM_PADDING5 * 2) / diagramW;
+    const scaleY = (availH - DIAGRAM_PADDING5 * 2) / diagramH;
+    scale = Math.min(MAX_SCALE4, scaleX, scaleY);
+    const scaledW = diagramW * scale;
+    offsetX = (viewW - scaledW) / 2;
+    offsetY = titleHeight + DIAGRAM_PADDING5;
+  } else {
+    viewW = naturalW;
+    viewH = naturalH;
+    scale = 1;
+    offsetX = DIAGRAM_PADDING5;
+    offsetY = titleHeight + DIAGRAM_PADDING5;
+  }
+  if (viewW <= 0 || viewH <= 0) return;
+  const svg = d3Selection5.select(container).append("svg").attr("width", exportDims ? viewW : "100%").attr("height", exportDims ? viewH : "100%").attr("viewBox", `0 0 ${viewW} ${viewH}`).attr("preserveAspectRatio", "xMidYMid meet").style("font-family", FONT_FAMILY);
   if (parsed.title) {
-    const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", palette.text).attr("font-size", "20px").attr("font-weight", "700").style("cursor", onClickItem && parsed.titleLineNumber ? "pointer" : "default").text(parsed.title);
+    const titleEl = svg.append("text").attr("class", "chart-title").attr("x", viewW / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", palette.text).attr("font-size", "20px").attr("font-weight", "700").style("cursor", onClickItem && parsed.titleLineNumber ? "pointer" : "default").text(parsed.title);
     if (parsed.titleLineNumber) {
       titleEl.attr("data-line-number", parsed.titleLineNumber);
       if (onClickItem) {
@@ -10713,6 +11075,8 @@ function renderERDiagram(container, parsed, layout, palette, isDark, onClickItem
   }
   const contentG = svg.append("g").attr("transform", `translate(${offsetX}, ${offsetY}) scale(${scale})`);
   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";
   for (const edge of layout.edges) {
     if (edge.points.length < 2) continue;
@@ -10752,7 +11116,8 @@ function renderERDiagram(container, parsed, layout, palette, isDark, onClickItem
   for (let ni = 0; ni < layout.nodes.length; ni++) {
     const node = layout.nodes[ni];
     const tagColor = resolveTagColor(node.metadata, parsed.tagGroups, activeTagGroup ?? null);
-    const nodeColor2 = node.color ?? tagColor ?? seriesColors2[ni % seriesColors2.length];
+    const semanticColor = semanticActive ? palette.colors[ROLE_COLORS[semanticRoles.get(node.id) ?? "unclassified"]] : semanticRoles ? palette.primary : void 0;
+    const nodeColor2 = node.color ?? tagColor ?? semanticColor ?? seriesColors2[ni % seriesColors2.length];
     const nodeG = contentG.append("g").attr("transform", `translate(${node.x}, ${node.y})`).attr("class", "er-table").attr("data-line-number", String(node.lineNumber)).attr("data-node-id", node.id);
     if (activeTagGroup) {
       const tagKey = activeTagGroup.toLowerCase();
@@ -10761,6 +11126,10 @@ function renderERDiagram(container, parsed, layout, palette, isDark, onClickItem
         nodeG.attr(`data-tag-${tagKey}`, tagValue.toLowerCase());
       }
     }
+    if (semanticRoles) {
+      const role = semanticRoles.get(node.id);
+      if (role) nodeG.attr("data-er-role", role);
+    }
     if (onClickItem) {
       nodeG.style("cursor", "pointer").on("click", () => {
         onClickItem(node.lineNumber);
@@ -10801,7 +11170,7 @@ function renderERDiagram(container, parsed, layout, palette, isDark, onClickItem
       legendG.attr("data-legend-active", activeTagGroup.toLowerCase());
     }
     let legendX = DIAGRAM_PADDING5;
-    let legendY = height - DIAGRAM_PADDING5;
+    let legendY = viewH - DIAGRAM_PADDING5;
     for (const group of parsed.tagGroups) {
       const groupG = legendG.append("g").attr("data-legend-group", group.name.toLowerCase());
       const labelText = groupG.append("text").attr("x", legendX).attr("y", legendY + LEGEND_PILL_H / 2).attr("dominant-baseline", "central").attr("fill", palette.textMuted).attr("font-size", LEGEND_PILL_FONT_SIZE).attr("font-family", FONT_FAMILY).text(`${group.name}:`);
@@ -10820,6 +11189,62 @@ function renderERDiagram(container, parsed, layout, palette, isDark, onClickItem
       legendX += LEGEND_GROUP_GAP;
     }
   }
+  if (semanticRoles) {
+    const presentRoles = ROLE_ORDER.filter((role) => {
+      for (const r of semanticRoles.values()) {
+        if (r === role) return true;
+      }
+      return false;
+    });
+    if (presentRoles.length > 0) {
+      const measureLabelW = (text, fontSize) => {
+        const dummy = svg.append("text").attr("font-size", fontSize).attr("font-family", FONT_FAMILY).attr("visibility", "hidden").text(text);
+        const measured = dummy.node()?.getComputedTextLength?.() ?? 0;
+        dummy.remove();
+        return measured > 0 ? measured : text.length * fontSize * 0.6;
+      };
+      const labelWidths = /* @__PURE__ */ new Map();
+      for (const role of presentRoles) {
+        labelWidths.set(role, measureLabelW(ROLE_LABELS[role], LEGEND_ENTRY_FONT_SIZE));
+      }
+      const groupBg = isDark ? mix(palette.surface, palette.bg, 50) : mix(palette.surface, palette.bg, 30);
+      const groupName = "Role";
+      const pillWidth = groupName.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
+      const pillH = LEGEND_HEIGHT - LEGEND_CAPSULE_PAD * 2;
+      let totalWidth;
+      let entriesWidth = 0;
+      if (semanticActive) {
+        for (const role of presentRoles) {
+          entriesWidth += LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + labelWidths.get(role) + LEGEND_ENTRY_TRAIL;
+        }
+        totalWidth = LEGEND_CAPSULE_PAD * 2 + pillWidth + LEGEND_ENTRY_TRAIL + entriesWidth;
+      } else {
+        totalWidth = pillWidth;
+      }
+      const legendX = (viewW - totalWidth) / 2;
+      const legendY = viewH - DIAGRAM_PADDING5 - LEGEND_HEIGHT;
+      const semanticLegendG = svg.append("g").attr("class", "er-semantic-legend").attr("data-legend-group", "role").attr("transform", `translate(${legendX}, ${legendY})`).style("cursor", "pointer");
+      if (semanticActive) {
+        semanticLegendG.append("rect").attr("width", totalWidth).attr("height", LEGEND_HEIGHT).attr("rx", LEGEND_HEIGHT / 2).attr("fill", groupBg);
+        semanticLegendG.append("rect").attr("x", LEGEND_CAPSULE_PAD).attr("y", LEGEND_CAPSULE_PAD).attr("width", pillWidth).attr("height", pillH).attr("rx", pillH / 2).attr("fill", palette.bg);
+        semanticLegendG.append("rect").attr("x", LEGEND_CAPSULE_PAD).attr("y", LEGEND_CAPSULE_PAD).attr("width", pillWidth).attr("height", pillH).attr("rx", pillH / 2).attr("fill", "none").attr("stroke", mix(palette.textMuted, palette.bg, 50)).attr("stroke-width", 0.75);
+        semanticLegendG.append("text").attr("x", LEGEND_CAPSULE_PAD + pillWidth / 2).attr("y", LEGEND_HEIGHT / 2 + LEGEND_PILL_FONT_SIZE / 2 - 2).attr("font-size", LEGEND_PILL_FONT_SIZE).attr("font-weight", "500").attr("fill", palette.text).attr("text-anchor", "middle").attr("font-family", FONT_FAMILY).text(groupName);
+        let entryX = LEGEND_CAPSULE_PAD + pillWidth + LEGEND_ENTRY_TRAIL;
+        for (const role of presentRoles) {
+          const label = ROLE_LABELS[role];
+          const roleColor = palette.colors[ROLE_COLORS[role]];
+          const entryG = semanticLegendG.append("g").attr("data-legend-entry", role);
+          entryG.append("circle").attr("cx", entryX + LEGEND_DOT_R).attr("cy", LEGEND_HEIGHT / 2).attr("r", LEGEND_DOT_R).attr("fill", roleColor);
+          const textX = entryX + LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP;
+          entryG.append("text").attr("x", textX).attr("y", LEGEND_HEIGHT / 2 + LEGEND_ENTRY_FONT_SIZE / 2 - 1).attr("font-size", LEGEND_ENTRY_FONT_SIZE).attr("fill", palette.textMuted).attr("font-family", FONT_FAMILY).text(label);
+          entryX = textX + labelWidths.get(role) + LEGEND_ENTRY_TRAIL;
+        }
+      } else {
+        semanticLegendG.append("rect").attr("width", pillWidth).attr("height", LEGEND_HEIGHT).attr("rx", LEGEND_HEIGHT / 2).attr("fill", groupBg);
+        semanticLegendG.append("text").attr("x", pillWidth / 2).attr("y", LEGEND_HEIGHT / 2 + LEGEND_PILL_FONT_SIZE / 2 - 2).attr("font-size", LEGEND_PILL_FONT_SIZE).attr("font-weight", "500").attr("fill", palette.textMuted).attr("text-anchor", "middle").attr("font-family", FONT_FAMILY).text(groupName);
+      }
+    }
+  }
 }
 function renderERDiagramForExport(content, theme, palette) {
   const parsed = parseERDiagram(content, palette);
@@ -10869,6 +11294,7 @@ var init_renderer5 = __esm({
     init_legend_constants();
     init_parser3();
     init_layout4();
+    init_classify();
     DIAGRAM_PADDING5 = 20;
     MAX_SCALE4 = 3;
     TABLE_FONT_SIZE = 13;
@@ -10996,9 +11422,10 @@ function layoutInitiativeStatus(parsed, collapseResult) {
     const dagreEdge = g.edge(edge.source, edge.target, `e${i}`);
     const dagrePoints = dagreEdge?.points ?? [];
     const hasIntermediateRank = allNodeX.some((x) => x > src.x + 20 && x < tgt.x - 20);
-    const step = Math.min((enterX - exitX) * 0.15, 20);
+    const step = Math.max(0, Math.min((enterX - exitX) * 0.15, 20));
     const isBackEdge = tgt.x < src.x - 5;
-    const isYDisplaced = !isBackEdge && Math.abs(tgt.y - src.y) > NODESEP;
+    const isTopExit = !isBackEdge && tgt.x > src.x && !hasIntermediateRank && tgt.y < src.y - NODESEP;
+    const isBottomExit = !isBackEdge && tgt.x > src.x && !hasIntermediateRank && tgt.y > src.y + NODESEP;
     let points;
     if (isBackEdge) {
       const routeAbove = Math.min(src.y, tgt.y) > avgNodeY;
@@ -11008,31 +11435,44 @@ function layoutInitiativeStatus(parsed, collapseResult) {
       const spreadDir = avgNodeX < rawMidX ? 1 : -1;
       const unclamped = Math.abs(src.x - tgt.x) < NODE_WIDTH ? rawMidX + spreadDir * BACK_EDGE_MIN_SPREAD : rawMidX;
       const midX = Math.min(src.x, Math.max(tgt.x, unclamped));
+      const srcDepart = Math.max(midX + 1, src.x - TOP_EXIT_STEP);
+      const tgtApproach = Math.min(midX - 1, tgt.x + TOP_EXIT_STEP);
       if (routeAbove) {
         const arcY = Math.min(src.y - srcHalfH, tgt.y - tgtHalfH) - BACK_EDGE_MARGIN;
         points = [
           { x: src.x, y: src.y - srcHalfH },
+          { x: srcDepart, y: src.y - srcHalfH - TOP_EXIT_STEP },
           { x: midX, y: arcY },
+          { x: tgtApproach, y: tgt.y - tgtHalfH - TOP_EXIT_STEP },
           { x: tgt.x, y: tgt.y - tgtHalfH }
         ];
       } else {
         const arcY = Math.max(src.y + srcHalfH, tgt.y + tgtHalfH) + BACK_EDGE_MARGIN;
         points = [
           { x: src.x, y: src.y + srcHalfH },
+          { x: srcDepart, y: src.y + srcHalfH + TOP_EXIT_STEP },
           { x: midX, y: arcY },
+          { x: tgtApproach, y: tgt.y + tgtHalfH + TOP_EXIT_STEP },
           { x: tgt.x, y: tgt.y + tgtHalfH }
         ];
       }
-    } else if (isYDisplaced) {
-      const exitY = tgt.y > src.y + NODESEP ? src.y + src.height / 2 : src.y - src.height / 2;
-      const spreadExitX = src.x + yOffset;
-      const spreadEntryY = tgt.y + yOffset;
-      const midX = (spreadExitX + enterX) / 2;
-      const midY = (exitY + spreadEntryY) / 2;
+    } else if (isTopExit) {
+      const exitY = src.y - src.height / 2;
+      const p1x = Math.min(Math.max(src.x, src.x + yOffset + TOP_EXIT_STEP), (src.x + enterX) / 2 - 1);
       points = [
-        { x: spreadExitX, y: exitY },
-        { x: midX, y: midY },
-        { x: enterX, y: spreadEntryY }
+        { x: src.x, y: exitY },
+        { x: p1x, y: exitY - TOP_EXIT_STEP },
+        { x: enterX - step, y: tgt.y + yOffset },
+        { x: enterX, y: tgt.y }
+      ];
+    } else if (isBottomExit) {
+      const exitY = src.y + src.height / 2;
+      const p1x = Math.min(Math.max(src.x, src.x + yOffset + TOP_EXIT_STEP), (src.x + enterX) / 2 - 1);
+      points = [
+        { x: src.x, y: exitY },
+        { x: p1x, y: exitY + TOP_EXIT_STEP },
+        { x: enterX - step, y: tgt.y + yOffset },
+        { x: enterX, y: tgt.y }
       ];
     } else if (tgt.x > src.x && !hasIntermediateRank) {
       points = [
@@ -11129,7 +11569,7 @@ function layoutInitiativeStatus(parsed, collapseResult) {
   totalHeight += 40;
   return { nodes: layoutNodes, edges: layoutEdges, groups: layoutGroups, width: totalWidth, height: totalHeight };
 }
-var import_dagre4, STATUS_PRIORITY, PHI, NODE_HEIGHT, NODE_WIDTH, GROUP_PADDING, NODESEP, RANKSEP, PARALLEL_SPACING, PARALLEL_EDGE_MARGIN, MAX_PARALLEL_EDGES, BACK_EDGE_MARGIN, BACK_EDGE_MIN_SPREAD, CHAR_WIDTH_RATIO, NODE_FONT_SIZE, NODE_TEXT_PADDING;
+var import_dagre4, STATUS_PRIORITY, PHI, NODE_HEIGHT, NODE_WIDTH, GROUP_PADDING, NODESEP, RANKSEP, PARALLEL_SPACING, PARALLEL_EDGE_MARGIN, MAX_PARALLEL_EDGES, BACK_EDGE_MARGIN, BACK_EDGE_MIN_SPREAD, TOP_EXIT_STEP, CHAR_WIDTH_RATIO, NODE_FONT_SIZE, NODE_TEXT_PADDING;
 var init_layout5 = __esm({
   "src/initiative-status/layout.ts"() {
     "use strict";
@@ -11146,6 +11586,7 @@ var init_layout5 = __esm({
     MAX_PARALLEL_EDGES = 5;
     BACK_EDGE_MARGIN = 40;
     BACK_EDGE_MIN_SPREAD = Math.round(NODE_WIDTH * 0.75);
+    TOP_EXIT_STEP = 10;
     CHAR_WIDTH_RATIO = 0.6;
     NODE_FONT_SIZE = 13;
     NODE_TEXT_PADDING = 12;
@@ -11392,7 +11833,6 @@ function renderInitiativeStatus(container, parsed, layout, palette, isDark, onCl
   const scaleY = (availH - DIAGRAM_PADDING6 * 2) / diagramH;
   const scale = Math.min(MAX_SCALE5, scaleX, scaleY);
   const scaledW = diagramW * scale;
-  const scaledH = diagramH * scale;
   const offsetX = (width - scaledW) / 2;
   const offsetY = titleHeight + DIAGRAM_PADDING6;
   const svg = d3Selection6.select(container).append("svg").attr("width", width).attr("height", height).style("font-family", FONT_FAMILY);
@@ -11575,13 +12015,7 @@ function renderInitiativeStatusForExport(content, theme, palette) {
   const titleOffset = parsed.title ? 40 : 0;
   const exportWidth = layout.width + DIAGRAM_PADDING6 * 2;
   const exportHeight = layout.height + DIAGRAM_PADDING6 * 2 + titleOffset;
-  const container = document.createElement("div");
-  container.style.width = `${exportWidth}px`;
-  container.style.height = `${exportHeight}px`;
-  container.style.position = "absolute";
-  container.style.left = "-9999px";
-  document.body.appendChild(container);
-  try {
+  return runInExportContainer(exportWidth, exportHeight, (container) => {
     renderInitiativeStatus(
       container,
       parsed,
@@ -11591,17 +12025,8 @@ function renderInitiativeStatusForExport(content, theme, palette) {
       void 0,
       { width: exportWidth, height: exportHeight }
     );
-    const svgEl = container.querySelector("svg");
-    if (!svgEl) return "";
-    if (theme === "transparent") {
-      svgEl.style.background = "none";
-    }
-    svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
-    svgEl.style.fontFamily = FONT_FAMILY;
-    return svgEl.outerHTML;
-  } finally {
-    document.body.removeChild(container);
-  }
+    return extractExportSvg(container, theme);
+  });
 }
 var d3Selection6, d3Shape4, DIAGRAM_PADDING6, MAX_SCALE5, NODE_FONT_SIZE2, MIN_NODE_FONT_SIZE, EDGE_LABEL_FONT_SIZE4, EDGE_STROKE_WIDTH5, NODE_STROKE_WIDTH5, NODE_RX, ARROWHEAD_W2, ARROWHEAD_H2, CHAR_WIDTH_RATIO2, NODE_TEXT_PADDING2, SERVICE_RX, GROUP_EXTRA_PADDING, GROUP_LABEL_FONT_SIZE, COLLAPSE_BAR_HEIGHT3, lineGenerator4;
 var init_renderer6 = __esm({
@@ -11610,6 +12035,7 @@ var init_renderer6 = __esm({
     d3Selection6 = __toESM(require("d3-selection"), 1);
     d3Shape4 = __toESM(require("d3-shape"), 1);
     init_fonts();
+    init_export_container();
     init_color_utils();
     init_parser7();
     init_layout5();
@@ -11644,7 +12070,7 @@ __export(layout_exports6, {
   layoutC4Deployment: () => layoutC4Deployment,
   rollUpContextRelationships: () => rollUpContextRelationships
 });
-function computeEdgePenalty(edgeList, nodePositions, degrees) {
+function computeEdgePenalty(edgeList, nodePositions, degrees, nodeGeometry) {
   let penalty = 0;
   for (const edge of edgeList) {
     const sx = nodePositions.get(edge.source);
@@ -11654,6 +12080,32 @@ function computeEdgePenalty(edgeList, nodePositions, degrees) {
     const weight = Math.min(degrees.get(edge.source) ?? 1, degrees.get(edge.target) ?? 1);
     penalty += dist * weight;
   }
+  if (nodeGeometry) {
+    for (const edge of edgeList) {
+      const geomA = nodeGeometry.get(edge.source);
+      const geomB = nodeGeometry.get(edge.target);
+      if (!geomA || !geomB) continue;
+      const ax = nodePositions.get(edge.source) ?? 0;
+      const bx = nodePositions.get(edge.target) ?? 0;
+      const ay = geomA.y;
+      const by = geomB.y;
+      if (ay === by) continue;
+      const edgeMinX = Math.min(ax, bx);
+      const edgeMaxX = Math.max(ax, bx);
+      const edgeMinY = Math.min(ay, by);
+      const edgeMaxY = Math.max(ay, by);
+      for (const [name, geomC] of nodeGeometry) {
+        if (name === edge.source || name === edge.target) continue;
+        const cx = nodePositions.get(name) ?? 0;
+        const cy = geomC.y;
+        const hw = geomC.width / 2;
+        const hh = geomC.height / 2;
+        if (cx + hw > edgeMinX && cx - hw < edgeMaxX && cy + hh > edgeMinY && cy - hh < edgeMaxY) {
+          penalty += EDGE_NODE_COLLISION_WEIGHT;
+        }
+      }
+    }
+  }
   return penalty;
 }
 function reduceCrossings(g, edgeList, nodeGroupMap) {
@@ -11663,6 +12115,11 @@ function reduceCrossings(g, edgeList, nodeGroupMap) {
     degrees.set(edge.source, (degrees.get(edge.source) ?? 0) + 1);
     degrees.set(edge.target, (degrees.get(edge.target) ?? 0) + 1);
   }
+  const nodeGeometry = /* @__PURE__ */ new Map();
+  for (const name of g.nodes()) {
+    const pos = g.node(name);
+    if (pos) nodeGeometry.set(name, { y: pos.y, width: pos.width, height: pos.height });
+  }
   const rankMap = /* @__PURE__ */ new Map();
   for (const name of g.nodes()) {
     const pos = g.node(name);
@@ -11705,7 +12162,7 @@ function reduceCrossings(g, edgeList, nodeGroupMap) {
         const pos = g.node(name);
         if (pos) basePositions.set(name, pos.x);
       }
-      const currentPenalty = computeEdgePenalty(edgeList, basePositions, degrees);
+      const currentPenalty = computeEdgePenalty(edgeList, basePositions, degrees, nodeGeometry);
       let bestPerm = [...partition];
       let bestPenalty = currentPenalty;
       if (partition.length <= 8) {
@@ -11715,7 +12172,7 @@ function reduceCrossings(g, edgeList, nodeGroupMap) {
           for (let i = 0; i < perm.length; i++) {
             testPositions.set(perm[i], xSlots[i]);
           }
-          const penalty = computeEdgePenalty(edgeList, testPositions, degrees);
+          const penalty = computeEdgePenalty(edgeList, testPositions, degrees, nodeGeometry);
           if (penalty < bestPenalty) {
             bestPenalty = penalty;
             bestPerm = [...perm];
@@ -11733,13 +12190,13 @@ function reduceCrossings(g, edgeList, nodeGroupMap) {
             for (let k = 0; k < workingOrder.length; k++) {
               testPositions.set(workingOrder[k], xSlots[k]);
             }
-            const before = computeEdgePenalty(edgeList, testPositions, degrees);
+            const before = computeEdgePenalty(edgeList, testPositions, degrees, nodeGeometry);
             [workingOrder[i], workingOrder[i + 1]] = [workingOrder[i + 1], workingOrder[i]];
             const testPositions2 = new Map(basePositions);
             for (let k = 0; k < workingOrder.length; k++) {
               testPositions2.set(workingOrder[k], xSlots[k]);
             }
-            const after = computeEdgePenalty(edgeList, testPositions2, degrees);
+            const after = computeEdgePenalty(edgeList, testPositions2, degrees, nodeGeometry);
             if (after < before) {
               improved = true;
               if (after < bestPenalty) {
@@ -11846,8 +12303,6 @@ function collectAllRelationships(elements, ownerMap) {
 function rollUpContextRelationships(parsed) {
   const ownerMap = buildOwnershipMap(parsed.elements);
   const allRels = collectAllRelationships(parsed.elements, ownerMap);
-  for (const rel of parsed.relationships) {
-  }
   const topLevelNames = new Set(parsed.elements.map((e) => e.name));
   const explicitKeys = /* @__PURE__ */ new Set();
   const explicit = [];
@@ -13059,7 +13514,7 @@ function layoutC4Deployment(parsed, activeTagGroup) {
   }
   return { nodes, edges, legend: legendGroups, groupBoundaries, width: totalWidth, height: totalHeight };
 }
-var import_dagre5, CHAR_WIDTH5, MIN_NODE_WIDTH, MAX_NODE_WIDTH, TYPE_LABEL_HEIGHT, DIVIDER_GAP, NAME_HEIGHT, DESC_LINE_HEIGHT, DESC_CHAR_WIDTH, CARD_V_PAD3, CARD_H_PAD3, META_LINE_HEIGHT5, META_CHAR_WIDTH, MARGIN3, BOUNDARY_PAD, GROUP_BOUNDARY_PAD, LEGEND_HEIGHT4, LEGEND_PILL_FONT_SIZE2, LEGEND_PILL_FONT_W4, LEGEND_PILL_PAD4, LEGEND_DOT_R4, LEGEND_ENTRY_FONT_SIZE2, LEGEND_ENTRY_FONT_W4, LEGEND_ENTRY_DOT_GAP4, LEGEND_ENTRY_TRAIL4, LEGEND_CAPSULE_PAD4, META_EXCLUDE_KEYS;
+var import_dagre5, CHAR_WIDTH5, MIN_NODE_WIDTH, MAX_NODE_WIDTH, TYPE_LABEL_HEIGHT, DIVIDER_GAP, NAME_HEIGHT, DESC_LINE_HEIGHT, DESC_CHAR_WIDTH, CARD_V_PAD3, CARD_H_PAD3, META_LINE_HEIGHT5, META_CHAR_WIDTH, MARGIN3, BOUNDARY_PAD, GROUP_BOUNDARY_PAD, LEGEND_HEIGHT4, LEGEND_PILL_FONT_SIZE2, LEGEND_PILL_FONT_W4, LEGEND_PILL_PAD4, LEGEND_DOT_R4, LEGEND_ENTRY_FONT_SIZE2, LEGEND_ENTRY_FONT_W4, LEGEND_ENTRY_DOT_GAP4, LEGEND_ENTRY_TRAIL4, LEGEND_CAPSULE_PAD4, EDGE_NODE_COLLISION_WEIGHT, META_EXCLUDE_KEYS;
 var init_layout6 = __esm({
   "src/c4/layout.ts"() {
     "use strict";
@@ -13089,6 +13544,7 @@ var init_layout6 = __esm({
     LEGEND_ENTRY_DOT_GAP4 = 4;
     LEGEND_ENTRY_TRAIL4 = 8;
     LEGEND_CAPSULE_PAD4 = 4;
+    EDGE_NODE_COLLISION_WEIGHT = 5e3;
     META_EXCLUDE_KEYS = /* @__PURE__ */ new Set(["description", "tech", "technology", "is a"]);
   }
 });
@@ -13176,7 +13632,6 @@ function renderC4Context(container, parsed, layout, palette, isDark, onClickItem
   const scaleY = (availH - DIAGRAM_PADDING7 * 2) / diagramH;
   const scale = Math.min(MAX_SCALE6, scaleX, scaleY);
   const scaledW = diagramW * scale;
-  const scaledH = diagramH * scale;
   const offsetX = (width - scaledW) / 2;
   const offsetY = titleHeight + DIAGRAM_PADDING7;
   const svg = d3Selection7.select(container).append("svg").attr("width", width).attr("height", height).style("font-family", FONT_FAMILY);
@@ -13666,7 +14121,6 @@ function renderC4Containers(container, parsed, layout, palette, isDark, onClickI
   const scaleY = (availH - DIAGRAM_PADDING7 * 2) / diagramH;
   const scale = Math.min(MAX_SCALE6, scaleX, scaleY);
   const scaledW = diagramW * scale;
-  const scaledH = diagramH * scale;
   const offsetX = (width - scaledW) / 2;
   const offsetY = titleHeight + DIAGRAM_PADDING7;
   const svg = d3Selection7.select(container).append("svg").attr("width", width).attr("height", height).style("font-family", FONT_FAMILY);
@@ -14279,7 +14733,6 @@ function renderFlowchart(container, graph, layout, palette, isDark, onClickItem,
   const scaleY = (availH - DIAGRAM_PADDING8 * 2) / diagramH;
   const scale = Math.min(MAX_SCALE7, scaleX, scaleY);
   const scaledW = diagramW * scale;
-  const scaledH = diagramH * scale;
   const offsetX = (width - scaledW) / 2;
   const offsetY = titleHeight + DIAGRAM_PADDING8;
   const svg = d3Selection8.select(container).append("svg").attr("width", width).attr("height", height).style("font-family", FONT_FAMILY);
@@ -15273,6 +15726,7 @@ var init_compute = __esm({
 // src/infra/layout.ts
 var layout_exports8 = {};
 __export(layout_exports8, {
+  fixEdgeWaypoints: () => fixEdgeWaypoints,
   layoutInfra: () => layoutInfra,
   separateGroups: () => separateGroups
 });
@@ -15456,6 +15910,8 @@ function formatUptime(fraction) {
   return `${pct.toFixed(1)}%`;
 }
 function separateGroups(groups, nodes, isLR, maxIterations = 20) {
+  const groupDeltas = /* @__PURE__ */ new Map();
+  let converged = false;
   for (let iter = 0; iter < maxIterations; iter++) {
     let anyOverlap = false;
     for (let i = 0; i < groups.length; i++) {
@@ -15473,6 +15929,9 @@ function separateGroups(groups, nodes, isLR, maxIterations = 20) {
         const groupToShift = aCenter <= bCenter ? gb : ga;
         if (isLR) groupToShift.y += shift;
         else groupToShift.x += shift;
+        const prev = groupDeltas.get(groupToShift.id) ?? { dx: 0, dy: 0 };
+        if (isLR) groupDeltas.set(groupToShift.id, { dx: prev.dx, dy: prev.dy + shift });
+        else groupDeltas.set(groupToShift.id, { dx: prev.dx + shift, dy: prev.dy });
         for (const node of nodes) {
           if (node.groupId === groupToShift.id) {
             if (isLR) node.y += shift;
@@ -15481,19 +15940,48 @@ function separateGroups(groups, nodes, isLR, maxIterations = 20) {
         }
       }
     }
-    if (!anyOverlap) break;
+    if (!anyOverlap) {
+      converged = true;
+      break;
+    }
+  }
+  if (!converged && maxIterations > 0) {
+    console.warn(`separateGroups: hit maxIterations (${maxIterations}) without fully resolving all group overlaps`);
+  }
+  return groupDeltas;
+}
+function fixEdgeWaypoints(edges, nodes, groupDeltas) {
+  if (groupDeltas.size === 0) return;
+  const nodeToGroup = /* @__PURE__ */ new Map();
+  for (const node of nodes) nodeToGroup.set(node.id, node.groupId);
+  for (const edge of edges) {
+    const srcGroup = nodeToGroup.get(edge.sourceId) ?? null;
+    const tgtGroup = nodeToGroup.get(edge.targetId) ?? null;
+    const srcDelta = srcGroup ? groupDeltas.get(srcGroup) : void 0;
+    const tgtDelta = tgtGroup ? groupDeltas.get(tgtGroup) : void 0;
+    if (!srcDelta && !tgtDelta) continue;
+    if (srcDelta && tgtDelta && srcGroup !== tgtGroup) {
+      edge.points = [];
+      continue;
+    }
+    const delta = srcDelta ?? tgtDelta;
+    for (const pt of edge.points) {
+      pt.x += delta.dx;
+      pt.y += delta.dy;
+    }
   }
 }
 function layoutInfra(computed, expandedNodeIds, collapsedNodes) {
   if (computed.nodes.length === 0) {
-    return { nodes: [], edges: [], groups: [], options: {}, width: 0, height: 0 };
+    return { nodes: [], edges: [], groups: [], options: {}, direction: computed.direction, width: 0, height: 0 };
   }
+  const isLR = computed.direction !== "TB";
   const g = new import_dagre7.default.graphlib.Graph();
   g.setGraph({
     rankdir: computed.direction === "TB" ? "TB" : "LR",
-    nodesep: 50,
-    ranksep: 100,
-    edgesep: 20
+    nodesep: isLR ? 70 : 60,
+    ranksep: isLR ? 150 : 120,
+    edgesep: 30
   });
   g.setDefaultEdgeLabel(() => ({}));
   const groupedNodeIds = /* @__PURE__ */ new Set();
@@ -15501,7 +15989,6 @@ function layoutInfra(computed, expandedNodeIds, collapsedNodes) {
     if (node.groupId) groupedNodeIds.add(node.id);
   }
   const GROUP_INFLATE = GROUP_PADDING3 * 2 + GROUP_HEADER_HEIGHT;
-  const isLR = computed.direction !== "TB";
   const widthMap = /* @__PURE__ */ new Map();
   const heightMap = /* @__PURE__ */ new Map();
   for (const node of computed.nodes) {
@@ -15636,7 +16123,8 @@ function layoutInfra(computed, expandedNodeIds, collapsedNodes) {
       lineNumber: group.lineNumber
     };
   });
-  separateGroups(layoutGroups, layoutNodes, isLR);
+  const groupDeltas = separateGroups(layoutGroups, layoutNodes, isLR);
+  fixEdgeWaypoints(layoutEdges, layoutNodes, groupDeltas);
   let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
   for (const node of layoutNodes) {
     const left = node.x - node.width / 2;
@@ -15694,6 +16182,7 @@ function layoutInfra(computed, expandedNodeIds, collapsedNodes) {
     edges: layoutEdges,
     groups: layoutGroups,
     options: computed.options,
+    direction: computed.direction,
     width: totalWidth,
     height: totalHeight
   };
@@ -15736,23 +16225,23 @@ var init_layout8 = __esm({
     ]);
     DISPLAY_NAMES = {
       "cache-hit": "cache hit",
-      "firewall-block": "fw block",
+      "firewall-block": "firewall block",
       "ratelimit-rps": "rate limit RPS",
       "latency-ms": "latency",
       "uptime": "uptime",
       "instances": "instances",
       "max-rps": "max RPS",
-      "cb-error-threshold": "CB error",
-      "cb-latency-threshold-ms": "CB latency",
+      "cb-error-threshold": "CB error threshold",
+      "cb-latency-threshold-ms": "CB latency threshold",
       "concurrency": "concurrency",
       "duration-ms": "duration",
       "cold-start-ms": "cold start",
       "buffer": "buffer",
-      "drain-rate": "drain",
+      "drain-rate": "drain rate",
       "retention-hours": "retention",
       "partitions": "partitions"
     };
-    GROUP_GAP = 24;
+    GROUP_GAP = GROUP_PADDING3 * 2 + GROUP_HEADER_HEIGHT;
   }
 });
 
@@ -15825,6 +16314,236 @@ function resolveNodeSlo(node, diagramOptions) {
   if (availThreshold == null && latencyP90 == null) return null;
   return { availThreshold, latencyP90, warningMargin };
 }
+function buildPathD(pts, direction) {
+  const gen = d3Shape7.line().x((d) => d.x).y((d) => d.y);
+  if (pts.length <= 2) {
+    gen.curve(direction === "TB" ? d3Shape7.curveBumpY : d3Shape7.curveBumpX);
+  } else {
+    gen.curve(d3Shape7.curveCatmullRom.alpha(0.5));
+  }
+  return gen(pts) ?? "";
+}
+function computePortPts(edges, nodeMap, direction) {
+  const srcPts = /* @__PURE__ */ new Map();
+  const tgtPts = /* @__PURE__ */ new Map();
+  const PAD = 0.1;
+  const activeEdges = edges.filter((e) => e.points.length > 0);
+  const bySource = /* @__PURE__ */ new Map();
+  for (const e of activeEdges) {
+    if (!bySource.has(e.sourceId)) bySource.set(e.sourceId, []);
+    bySource.get(e.sourceId).push(e);
+  }
+  for (const [sourceId, es] of bySource) {
+    if (es.length < 2) continue;
+    const source = nodeMap.get(sourceId);
+    if (!source) continue;
+    const sorted = es.map((e) => ({ e, t: nodeMap.get(e.targetId) })).filter((x) => x.t != null).sort((a, b) => direction === "LR" ? a.t.y - b.t.y : a.t.x - b.t.x);
+    const n = sorted.length;
+    for (let i = 0; i < n; i++) {
+      const frac = n === 1 ? 0.5 : PAD + (1 - 2 * PAD) * i / (n - 1);
+      const { e, t } = sorted[i];
+      const isBackward = direction === "LR" ? t.x < source.x : t.y < source.y;
+      if (direction === "LR") {
+        srcPts.set(`${e.sourceId}:${e.targetId}`, {
+          x: isBackward ? source.x - source.width / 2 : source.x + source.width / 2,
+          y: source.y - source.height / 2 + frac * source.height
+        });
+      } else {
+        srcPts.set(`${e.sourceId}:${e.targetId}`, {
+          x: source.x - source.width / 2 + frac * source.width,
+          y: isBackward ? source.y - source.height / 2 : source.y + source.height / 2
+        });
+      }
+    }
+  }
+  const byTarget = /* @__PURE__ */ new Map();
+  for (const e of activeEdges) {
+    if (!byTarget.has(e.targetId)) byTarget.set(e.targetId, []);
+    byTarget.get(e.targetId).push(e);
+  }
+  for (const [targetId, es] of byTarget) {
+    if (es.length < 2) continue;
+    const target = nodeMap.get(targetId);
+    if (!target) continue;
+    const sorted = es.map((e) => ({ e, s: nodeMap.get(e.sourceId) })).filter((x) => x.s != null).sort((a, b) => direction === "LR" ? a.s.y - b.s.y : a.s.x - b.s.x);
+    const n = sorted.length;
+    for (let i = 0; i < n; i++) {
+      const frac = n === 1 ? 0.5 : PAD + (1 - 2 * PAD) * i / (n - 1);
+      const { e, s } = sorted[i];
+      const isBackward = direction === "LR" ? target.x < s.x : target.y < s.y;
+      if (direction === "LR") {
+        tgtPts.set(`${e.sourceId}:${e.targetId}`, {
+          x: isBackward ? target.x + target.width / 2 : target.x - target.width / 2,
+          y: target.y - target.height / 2 + frac * target.height
+        });
+      } else {
+        tgtPts.set(`${e.sourceId}:${e.targetId}`, {
+          x: target.x - target.width / 2 + frac * target.width,
+          y: isBackward ? target.y + target.height / 2 : target.y - target.height / 2
+        });
+      }
+    }
+  }
+  return { srcPts, tgtPts };
+}
+function findRoutingLane(blocking, targetY, margin) {
+  const MERGE_SLOP = 4;
+  const sorted = [...blocking].sort((a, b) => a.y + a.height / 2 - (b.y + b.height / 2));
+  const merged = [];
+  for (const r of sorted) {
+    const lo = r.y - MERGE_SLOP;
+    const hi = r.y + r.height + MERGE_SLOP;
+    if (merged.length && lo <= merged[merged.length - 1][1]) {
+      merged[merged.length - 1][1] = Math.max(merged[merged.length - 1][1], hi);
+    } else {
+      merged.push([lo, hi]);
+    }
+  }
+  if (merged.length === 0) return targetY;
+  const MIN_GAP = 10;
+  const candidates = [
+    merged[0][0] - margin,
+    // above all blocking rects
+    merged[merged.length - 1][1] + margin
+    // below all blocking rects
+  ];
+  for (let i = 0; i < merged.length - 1; i++) {
+    const gapLo = merged[i][1];
+    const gapHi = merged[i + 1][0];
+    if (gapHi - gapLo >= MIN_GAP) {
+      candidates.push((gapLo + gapHi) / 2);
+    }
+  }
+  return candidates.reduce(
+    (best, c) => Math.abs(c - targetY) < Math.abs(best - targetY) ? c : best,
+    candidates[0]
+  );
+}
+function segmentIntersectsRect(p1, p2, rect) {
+  const { x: rx, y: ry, width: rw, height: rh } = rect;
+  const rr = rx + rw;
+  const rb = ry + rh;
+  const inRect = (p) => p.x >= rx && p.x <= rr && p.y >= ry && p.y <= rb;
+  if (inRect(p1) || inRect(p2)) return true;
+  if (Math.max(p1.x, p2.x) < rx || Math.min(p1.x, p2.x) > rr) return false;
+  if (Math.max(p1.y, p2.y) < ry || Math.min(p1.y, p2.y) > rb) return false;
+  const cross = (o, a, b) => (a.x - o.x) * (b.y - o.y) - (a.y - o.y) * (b.x - o.x);
+  const crosses = (a, b) => {
+    const d1 = cross(a, b, p1);
+    const d2 = cross(a, b, p2);
+    const d3 = cross(p1, p2, a);
+    const d4 = cross(p1, p2, b);
+    return (d1 > 0 && d2 < 0 || d1 < 0 && d2 > 0) && (d3 > 0 && d4 < 0 || d3 < 0 && d4 > 0);
+  };
+  const tl = { x: rx, y: ry };
+  const tr = { x: rr, y: ry };
+  const br = { x: rr, y: rb };
+  const bl = { x: rx, y: rb };
+  return crosses(tl, tr) || crosses(tr, br) || crosses(br, bl) || crosses(bl, tl);
+}
+function curveIntersectsRect(sc, tc, rect, direction) {
+  if (direction === "LR") {
+    const midX = (sc.x + tc.x) / 2;
+    const m1 = { x: midX, y: sc.y };
+    const m2 = { x: midX, y: tc.y };
+    return segmentIntersectsRect(sc, m1, rect) || segmentIntersectsRect(m1, m2, rect) || segmentIntersectsRect(m2, tc, rect);
+  } else {
+    const midY = (sc.y + tc.y) / 2;
+    const m1 = { x: sc.x, y: midY };
+    const m2 = { x: tc.x, y: midY };
+    return segmentIntersectsRect(sc, m1, rect) || segmentIntersectsRect(m1, m2, rect) || segmentIntersectsRect(m2, tc, rect);
+  }
+}
+function edgeWaypoints(source, target, groups, nodes, direction, margin = 30, srcExitPt, tgtEnterPt) {
+  const sc = { x: source.x, y: source.y };
+  const tc = { x: target.x, y: target.y };
+  const isBackward = direction === "LR" ? tc.x < sc.x : tc.y < sc.y;
+  if (isBackward) {
+    if (direction === "LR") {
+      const xBandObs = [];
+      for (const g of groups) {
+        if (g.x + g.width < tc.x - margin || g.x > sc.x + margin) continue;
+        xBandObs.push({ x: g.x, y: g.y, width: g.width, height: g.height });
+      }
+      for (const n of nodes) {
+        if (n.id === source.id || n.id === target.id) continue;
+        const nLeft = n.x - n.width / 2;
+        const nRight = n.x + n.width / 2;
+        if (nRight < tc.x - margin || nLeft > sc.x + margin) continue;
+        xBandObs.push({ x: nLeft, y: n.y - n.height / 2, width: n.width, height: n.height });
+      }
+      const midY = (sc.y + tc.y) / 2;
+      const routeY2 = xBandObs.length > 0 ? findRoutingLane(xBandObs, midY, margin) : midY;
+      const exitBorder = srcExitPt ?? nodeBorderPoint(source, { x: sc.x, y: routeY2 });
+      const exitPt2 = { x: exitBorder.x, y: routeY2 };
+      const enterPt2 = { x: tc.x, y: routeY2 };
+      const tp2 = tgtEnterPt ?? nodeBorderPoint(target, enterPt2);
+      return srcExitPt ? [srcExitPt, exitPt2, enterPt2, tp2] : [exitBorder, exitPt2, enterPt2, tp2];
+    } else {
+      const yBandObs = [];
+      for (const g of groups) {
+        if (g.y + g.height < tc.y - margin || g.y > sc.y + margin) continue;
+        yBandObs.push({ x: g.x, y: g.y, width: g.width, height: g.height });
+      }
+      for (const n of nodes) {
+        if (n.id === source.id || n.id === target.id) continue;
+        const nTop = n.y - n.height / 2;
+        const nBot = n.y + n.height / 2;
+        if (nBot < tc.y - margin || nTop > sc.y + margin) continue;
+        yBandObs.push({ x: n.x - n.width / 2, y: nTop, width: n.width, height: n.height });
+      }
+      const rotated = yBandObs.map((r) => ({ x: r.y, y: r.x, width: r.height, height: r.width }));
+      const midX = (sc.x + tc.x) / 2;
+      const routeX = rotated.length > 0 ? findRoutingLane(rotated, midX, margin) : midX;
+      const exitPt2 = srcExitPt ?? { x: routeX, y: sc.y };
+      const enterPt2 = { x: routeX, y: tc.y };
+      return [
+        srcExitPt ?? nodeBorderPoint(source, exitPt2),
+        exitPt2,
+        enterPt2,
+        tgtEnterPt ?? nodeBorderPoint(target, enterPt2)
+      ];
+    }
+  }
+  const blocking = [];
+  const blockingGroupIds = /* @__PURE__ */ new Set();
+  const pathSrc = srcExitPt ?? sc;
+  const pathTgt = tgtEnterPt ?? tc;
+  for (const g of groups) {
+    if (g.id === source.groupId || g.id === target.groupId) continue;
+    const gRect = { x: g.x, y: g.y, width: g.width, height: g.height };
+    if (curveIntersectsRect(pathSrc, pathTgt, gRect, direction)) {
+      blocking.push(gRect);
+      blockingGroupIds.add(g.id);
+    }
+  }
+  for (const n of nodes) {
+    if (n.id === source.id || n.id === target.id) continue;
+    if (n.groupId && (n.groupId === source.groupId || n.groupId === target.groupId)) continue;
+    if (n.groupId && blockingGroupIds.has(n.groupId)) continue;
+    const nodeRect = { x: n.x - n.width / 2, y: n.y - n.height / 2, width: n.width, height: n.height };
+    if (curveIntersectsRect(pathSrc, pathTgt, nodeRect, direction)) {
+      blocking.push(nodeRect);
+    }
+  }
+  if (blocking.length === 0) {
+    const sp = srcExitPt ?? nodeBorderPoint(source, tc);
+    const tp2 = tgtEnterPt ?? nodeBorderPoint(target, sp);
+    return [sp, tp2];
+  }
+  const obsLeft = Math.min(...blocking.map((o) => o.x));
+  const obsRight = Math.max(...blocking.map((o) => o.x + o.width));
+  const routeY = findRoutingLane(blocking, tc.y, margin);
+  const exitX = direction === "LR" ? Math.max(sc.x, obsLeft - margin) : obsLeft - margin;
+  const enterX = direction === "LR" ? Math.min(tc.x, obsRight + margin) : obsRight + margin;
+  const exitPt = { x: exitX, y: routeY };
+  const enterPt = { x: enterX, y: routeY };
+  const tp = tgtEnterPt ?? nodeBorderPoint(target, enterPt);
+  if (srcExitPt) {
+    return [srcExitPt, exitPt, enterPt, tp];
+  }
+  return [nodeBorderPoint(source, exitPt), exitPt, enterPt, tp];
+}
 function nodeBorderPoint(node, target) {
   const hw = node.width / 2;
   const hh = node.height / 2;
@@ -16108,33 +16827,29 @@ function renderGroups(svg, groups, palette, isDark) {
     }
   }
 }
-function renderEdgePaths(svg, edges, nodes, palette, isDark, animate) {
+function renderEdgePaths(svg, edges, nodes, groups, palette, isDark, animate, direction) {
   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);
   for (const edge of edges) {
     if (edge.points.length === 0) continue;
     const targetNode = nodeMap.get(edge.targetId);
     const sourceNode = nodeMap.get(edge.sourceId);
     const color = edgeColor(edge, palette);
     const strokeW = edgeWidth();
-    let pts = edge.points;
-    if (sourceNode && targetNode && pts.length >= 2) {
-      const first = pts[0];
-      const distFirstToSource = (first.x - sourceNode.x) ** 2 + (first.y - sourceNode.y) ** 2;
-      const distFirstToTarget = (first.x - targetNode.x) ** 2 + (first.y - targetNode.y) ** 2;
-      if (distFirstToTarget < distFirstToSource) {
-        pts = [...pts].reverse();
-      }
-    }
-    if (sourceNode && pts.length > 0) {
-      const bp = nodeBorderPoint(sourceNode, pts[0]);
-      pts = [bp, ...pts];
-    }
-    if (targetNode && pts.length > 0) {
-      const bp = nodeBorderPoint(targetNode, pts[pts.length - 1]);
-      pts = [...pts, bp];
-    }
-    const pathD = lineGenerator7(pts) ?? "";
+    if (!sourceNode || !targetNode) continue;
+    const key = `${edge.sourceId}:${edge.targetId}`;
+    const pts = edgeWaypoints(
+      sourceNode,
+      targetNode,
+      groups,
+      nodes,
+      direction,
+      30,
+      srcPts.get(key),
+      tgtPts.get(key)
+    );
+    const pathD = buildPathD(pts, direction);
     const edgeG = svg.append("g").attr("class", "infra-edge").attr("data-line-number", edge.lineNumber);
     edgeG.append("path").attr("d", pathD).attr("fill", "none").attr("stroke", color).attr("stroke-width", strokeW);
     if (animate && edge.computedRps > 0) {
@@ -16149,19 +16864,34 @@ function renderEdgePaths(svg, edges, nodes, palette, isDark, animate) {
     }
   }
 }
-function renderEdgeLabels(svg, edges, palette, isDark, animate) {
+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) {
     if (edge.points.length === 0) continue;
     if (!edge.label) continue;
-    const midIdx = Math.floor(edge.points.length / 2);
-    const midPt = edge.points[midIdx];
+    const sourceNode = nodeMap.get(edge.sourceId);
+    const targetNode = nodeMap.get(edge.targetId);
+    if (!sourceNode || !targetNode) continue;
+    const key = `${edge.sourceId}:${edge.targetId}`;
+    const wps = edgeWaypoints(
+      sourceNode,
+      targetNode,
+      groups,
+      nodes,
+      direction,
+      30,
+      srcPts.get(key),
+      tgtPts.get(key)
+    );
+    const midPt = wps[Math.floor(wps.length / 2)];
     const labelText = edge.label;
     const g = svg.append("g").attr("class", animate ? "infra-edge-label" : "");
     const textWidth = labelText.length * 6.5 + 8;
     g.append("rect").attr("x", midPt.x - textWidth / 2).attr("y", midPt.y - 8).attr("width", textWidth).attr("height", 16).attr("rx", 3).attr("fill", palette.bg).attr("opacity", 0.9);
     g.append("text").attr("x", midPt.x).attr("y", midPt.y + 4).attr("text-anchor", "middle").attr("font-family", FONT_FAMILY).attr("font-size", EDGE_LABEL_FONT_SIZE7).attr("fill", palette.textMuted).text(labelText);
     if (animate) {
-      const pathD = lineGenerator7(edge.points) ?? "";
+      const pathD = buildPathD(wps, direction);
       g.insert("path", ":first-child").attr("d", pathD).attr("fill", "none").attr("stroke", "transparent").attr("stroke-width", 20);
     }
   }
@@ -16571,7 +17301,7 @@ function renderInfra(container, layout, palette, isDark, title, titleLineNumber,
     rootSvg.append("text").attr("class", "chart-title").attr("x", totalWidth / 2).attr("y", 28).attr("text-anchor", "middle").attr("font-family", FONT_FAMILY).attr("font-size", 18).attr("font-weight", "700").attr("fill", palette.text).attr("data-line-number", titleLineNumber != null ? titleLineNumber : "").text(title);
   }
   renderGroups(svg, layout.groups, palette, isDark);
-  renderEdgePaths(svg, layout.edges, layout.nodes, palette, isDark, shouldAnimate);
+  renderEdgePaths(svg, layout.edges, layout.nodes, layout.groups, palette, isDark, shouldAnimate, layout.direction);
   const fanoutSourceIds = collectFanoutSourceIds(layout.edges);
   const scaledGroupIds = new Set(
     layout.groups.filter((g) => {
@@ -16583,7 +17313,7 @@ function renderInfra(container, layout, palette, isDark, title, titleLineNumber,
   if (shouldAnimate) {
     renderRejectParticles(svg, layout.nodes);
   }
-  renderEdgeLabels(svg, layout.edges, palette, isDark, shouldAnimate);
+  renderEdgeLabels(svg, layout.edges, layout.nodes, layout.groups, palette, isDark, shouldAnimate, layout.direction);
   if (hasLegend) {
     if (fixedLegend) {
       const containerWidth = container.clientWidth || totalWidth;
@@ -16601,7 +17331,7 @@ function parseAndLayoutInfra(content) {
   const layout = layoutInfra(computed);
   return { parsed, computed, layout };
 }
-var d3Selection9, d3Shape7, NODE_FONT_SIZE4, META_FONT_SIZE4, META_LINE_HEIGHT8, EDGE_LABEL_FONT_SIZE7, GROUP_LABEL_FONT_SIZE2, NODE_BORDER_RADIUS, EDGE_STROKE_WIDTH8, NODE_STROKE_WIDTH8, OVERLOAD_STROKE_WIDTH, ROLE_DOT_RADIUS, NODE_HEADER_HEIGHT2, NODE_SEPARATOR_GAP2, NODE_PAD_BOTTOM2, COLLAPSE_BAR_HEIGHT5, COLLAPSE_BAR_INSET2, LEGEND_FIXED_GAP3, COLOR_HEALTHY, COLOR_WARNING, COLOR_OVERLOADED, FLOW_SPEED_MIN, FLOW_SPEED_MAX, PARTICLE_R, PARTICLE_COUNT_MIN, PARTICLE_COUNT_MAX, NODE_PULSE_SPEED, NODE_PULSE_OVERLOAD, REJECT_PARTICLE_R, REJECT_DROP_DISTANCE, REJECT_DURATION_MIN, REJECT_DURATION_MAX, REJECT_COUNT_MIN, REJECT_COUNT_MAX, lineGenerator7, PROP_DISPLAY, DESC_MAX_CHARS, RPS_FORMAT_KEYS, MS_FORMAT_KEYS, PCT_FORMAT_KEYS;
+var d3Selection9, d3Shape7, NODE_FONT_SIZE4, META_FONT_SIZE4, META_LINE_HEIGHT8, EDGE_LABEL_FONT_SIZE7, GROUP_LABEL_FONT_SIZE2, NODE_BORDER_RADIUS, EDGE_STROKE_WIDTH8, NODE_STROKE_WIDTH8, OVERLOAD_STROKE_WIDTH, ROLE_DOT_RADIUS, NODE_HEADER_HEIGHT2, NODE_SEPARATOR_GAP2, NODE_PAD_BOTTOM2, COLLAPSE_BAR_HEIGHT5, COLLAPSE_BAR_INSET2, LEGEND_FIXED_GAP3, COLOR_HEALTHY, COLOR_WARNING, COLOR_OVERLOADED, FLOW_SPEED_MIN, FLOW_SPEED_MAX, PARTICLE_R, PARTICLE_COUNT_MIN, PARTICLE_COUNT_MAX, NODE_PULSE_SPEED, NODE_PULSE_OVERLOAD, REJECT_PARTICLE_R, REJECT_DROP_DISTANCE, REJECT_DURATION_MIN, REJECT_DURATION_MAX, REJECT_COUNT_MIN, REJECT_COUNT_MAX, PROP_DISPLAY, DESC_MAX_CHARS, RPS_FORMAT_KEYS, MS_FORMAT_KEYS, PCT_FORMAT_KEYS;
 var init_renderer8 = __esm({
   "src/infra/renderer.ts"() {
     "use strict";
@@ -16647,7 +17377,6 @@ var init_renderer8 = __esm({
     REJECT_DURATION_MAX = 3;
     REJECT_COUNT_MIN = 1;
     REJECT_COUNT_MAX = 3;
-    lineGenerator7 = d3Shape7.line().x((d) => d.x).y((d) => d.y).curve(d3Shape7.curveBasis);
     PROP_DISPLAY = {
       "cache-hit": "cache hit",
       "firewall-block": "firewall block",
@@ -16830,7 +17559,7 @@ function renderState(container, graph, layout, palette, isDark, onClickItem, exp
         }
       }
     } else if (edge.points.length >= 2) {
-      const pathD = lineGenerator8(edge.points);
+      const pathD = lineGenerator7(edge.points);
       if (pathD) {
         edgeG.append("path").attr("d", pathD).attr("fill", "none").attr("stroke", edgeColor2).attr("stroke-width", EDGE_STROKE_WIDTH9).attr("marker-end", `url(#${markerId})`).attr("class", "st-edge");
       }
@@ -16894,7 +17623,7 @@ function renderStateForExport(content, theme, palette) {
     document.body.removeChild(container);
   }
 }
-var d3Selection10, d3Shape8, DIAGRAM_PADDING9, MAX_SCALE8, NODE_FONT_SIZE5, EDGE_LABEL_FONT_SIZE8, GROUP_LABEL_FONT_SIZE3, EDGE_STROKE_WIDTH9, NODE_STROKE_WIDTH9, ARROWHEAD_W4, ARROWHEAD_H4, PSEUDOSTATE_RADIUS, STATE_CORNER_RADIUS, GROUP_EXTRA_PADDING2, lineGenerator8;
+var d3Selection10, d3Shape8, DIAGRAM_PADDING9, MAX_SCALE8, NODE_FONT_SIZE5, EDGE_LABEL_FONT_SIZE8, GROUP_LABEL_FONT_SIZE3, EDGE_STROKE_WIDTH9, NODE_STROKE_WIDTH9, ARROWHEAD_W4, ARROWHEAD_H4, PSEUDOSTATE_RADIUS, STATE_CORNER_RADIUS, GROUP_EXTRA_PADDING2, lineGenerator7;
 var init_state_renderer = __esm({
   "src/graph/state-renderer.ts"() {
     "use strict";
@@ -16916,7 +17645,7 @@ var init_state_renderer = __esm({
     PSEUDOSTATE_RADIUS = 10;
     STATE_CORNER_RADIUS = 10;
     GROUP_EXTRA_PADDING2 = 12;
-    lineGenerator8 = d3Shape8.line().x((d) => d.x).y((d) => d.y).curve(d3Shape8.curveBasis);
+    lineGenerator7 = d3Shape8.line().x((d) => d.x).y((d) => d.y).curve(d3Shape8.curveBasis);
   }
 });
 
@@ -18078,7 +18807,6 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     if (secY === void 0) continue;
     const isCollapsed = collapsedSections?.has(sec.lineNumber) ?? false;
     const lineColor = palette.textMuted;
-    const HIT_AREA_HEIGHT = 36;
     const sectionG = svg.append("g").attr("data-section-toggle", "").attr("data-line-number", String(sec.lineNumber)).attr("data-section", "").attr("tabindex", "0").attr("role", "button").attr("aria-expanded", String(!isCollapsed));
     const BAND_HEIGHT = 22;
     const bandX = sectionLineX1 - 10;
@@ -19467,7 +20195,6 @@ function renderArcDiagram(container, parsed, palette, _isDark, onClickItem, expo
         const positions = groupNodes.map((n) => yScale(n));
         const minY = Math.min(...positions) - bandPad;
         const maxY = Math.max(...positions) + bandPad;
-        const bandColor = group.color ?? mutedColor;
         g.append("rect").attr("class", "arc-group-band").attr("data-group", group.name).attr("data-line-number", String(group.lineNumber)).attr("x", baseX - bandHalfW).attr("y", minY).attr("width", bandHalfW * 2).attr("height", maxY - minY).attr("rx", 4).attr("fill", textColor).attr("fill-opacity", 0.06).style("cursor", "pointer").on("mouseenter", () => handleGroupEnter(group.name)).on("mouseleave", handleMouseLeave).on("click", () => {
           if (onClickItem) onClickItem(group.lineNumber);
         });
@@ -19511,7 +20238,6 @@ function renderArcDiagram(container, parsed, palette, _isDark, onClickItem, expo
         const positions = groupNodes.map((n) => xScale(n));
         const minX = Math.min(...positions) - bandPad;
         const maxX = Math.max(...positions) + bandPad;
-        const bandColor = group.color ?? mutedColor;
         g.append("rect").attr("class", "arc-group-band").attr("data-group", group.name).attr("data-line-number", String(group.lineNumber)).attr("x", minX).attr("y", baseY - bandHalfH).attr("width", maxX - minX).attr("height", bandHalfH * 2).attr("rx", 4).attr("fill", textColor).attr("fill-opacity", 0.06).style("cursor", "pointer").on("mouseenter", () => handleGroupEnter(group.name)).on("mouseleave", handleMouseLeave).on("click", () => {
           if (onClickItem) onClickItem(group.lineNumber);
         });
@@ -19829,6 +20555,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
   const textColor = palette.text;
   const mutedColor = palette.border;
   const bgColor = palette.bg;
+  const bg = isDark ? palette.surface : palette.bg;
   const colors = getSeriesColors(palette);
   const groupColorMap = /* @__PURE__ */ new Map();
   timelineGroups.forEach((grp, i) => {
@@ -20090,7 +20817,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
           if (ev.endDate) {
             const y2 = yScale(parseTimelineDate(ev.endDate));
             const rectH = Math.max(y2 - y, 4);
-            let fill2 = evColor;
+            let fill2 = mix(evColor, bg, 30);
             if (ev.uncertain) {
               const gradientId = `uncertain-vg-${ev.lineNumber}`;
               const defs = svg.select("defs").node() || svg.append("defs").node();
@@ -20098,13 +20825,13 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
                 { offset: "0%", opacity: 1 },
                 { offset: "80%", opacity: 1 },
                 { offset: "100%", opacity: 0 }
-              ]).enter().append("stop").attr("offset", (d) => d.offset).attr("stop-color", laneColor).attr("stop-opacity", (d) => d.opacity);
+              ]).enter().append("stop").attr("offset", (d) => d.offset).attr("stop-color", mix(laneColor, bg, 30)).attr("stop-opacity", (d) => d.opacity);
               fill2 = `url(#${gradientId})`;
             }
-            evG.append("rect").attr("x", laneCenter - 6).attr("y", y).attr("width", 12).attr("height", rectH).attr("rx", 4).attr("fill", fill2);
+            evG.append("rect").attr("x", laneCenter - 6).attr("y", y).attr("width", 12).attr("height", rectH).attr("rx", 4).attr("fill", fill2).attr("stroke", evColor).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 {
-            evG.append("circle").attr("cx", laneCenter).attr("cy", y).attr("r", 4).attr("fill", evColor).attr("stroke", bgColor).attr("stroke-width", 1.5);
+            evG.append("circle").attr("cx", laneCenter).attr("cy", y).attr("r", 4).attr("fill", mix(evColor, bg, 30)).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);
           }
         }
@@ -20197,7 +20924,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
         if (ev.endDate) {
           const y2 = yScale(parseTimelineDate(ev.endDate));
           const rectH = Math.max(y2 - y, 4);
-          let fill2 = color;
+          let fill2 = mix(color, bg, 30);
           if (ev.uncertain) {
             const gradientId = `uncertain-v-${ev.lineNumber}`;
             const defs = svg.select("defs").node() || svg.append("defs").node();
@@ -20205,13 +20932,13 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
               { 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);
+            ]).enter().append("stop").attr("offset", (d) => d.offset).attr("stop-color", mix(color, bg, 30)).attr("stop-opacity", (d) => d.opacity);
             fill2 = `url(#${gradientId})`;
           }
-          evG.append("rect").attr("x", axisX - 6).attr("y", y).attr("width", 12).attr("height", rectH).attr("rx", 4).attr("fill", fill2);
+          evG.append("rect").attr("x", axisX - 6).attr("y", y).attr("width", 12).attr("height", rectH).attr("rx", 4).attr("fill", fill2).attr("stroke", color).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 {
-          evG.append("circle").attr("cx", axisX).attr("cy", y).attr("r", 4).attr("fill", color).attr("stroke", bgColor).attr("stroke-width", 1.5);
+          evG.append("circle").attr("cx", axisX).attr("cy", y).attr("r", 4).attr("fill", mix(color, bg, 30)).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);
         }
         evG.append("text").attr("x", axisX - 14).attr(
@@ -20362,7 +21089,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
           const rectW = Math.max(x2 - x, 4);
           const estLabelWidth = ev.label.length * 7 + 16;
           const labelFitsInside = rectW >= estLabelWidth;
-          let fill2 = evColor;
+          let fill2 = mix(evColor, bg, 30);
           if (ev.uncertain) {
             const gradientId = `uncertain-${ev.lineNumber}`;
             const defs = svg.select("defs").node() || svg.append("defs").node();
@@ -20370,12 +21097,12 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
               { 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);
+            ]).enter().append("stop").attr("offset", (d) => d.offset).attr("stop-color", mix(evColor, bg, 30)).attr("stop-opacity", (d) => d.opacity);
             fill2 = `url(#${gradientId})`;
           }
-          evG.append("rect").attr("x", x).attr("y", y - BAR_H / 2).attr("width", rectW).attr("height", BAR_H).attr("rx", 4).attr("fill", fill2);
+          evG.append("rect").attr("x", x).attr("y", y - BAR_H / 2).attr("width", rectW).attr("height", BAR_H).attr("rx", 4).attr("fill", fill2).attr("stroke", evColor).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", "#ffffff").attr("font-size", "14px").attr("font-weight", "700").text(ev.label);
+            evG.append("text").attr("x", x + 8).attr("y", y).attr("dy", "0.35em").attr("text-anchor", "start").attr("fill", textColor).attr("font-size", "14px").attr("font-weight", "700").text(ev.label);
           } else {
             const wouldFlipLeft = x + rectW > innerWidth * 0.6;
             const labelFitsLeft = x - 6 - estLabelWidth > 0;
@@ -20387,7 +21114,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
           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", evColor).attr("stroke", bgColor).attr("stroke-width", 1.5);
+          evG.append("circle").attr("cx", x).attr("cy", y).attr("r", 5).attr("fill", mix(evColor, bg, 30)).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);
         }
       });
@@ -20500,7 +21227,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
         const rectW = Math.max(x2 - x, 4);
         const estLabelWidth = ev.label.length * 7 + 16;
         const labelFitsInside = rectW >= estLabelWidth;
-        let fill2 = color;
+        let fill2 = mix(color, bg, 30);
         if (ev.uncertain) {
           const gradientId = `uncertain-ts-${ev.lineNumber}`;
           const defs = svg.select("defs").node() || svg.append("defs").node();
@@ -20508,12 +21235,12 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
             { 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);
+          ]).enter().append("stop").attr("offset", (d) => d.offset).attr("stop-color", mix(color, bg, 30)).attr("stop-opacity", (d) => d.opacity);
           fill2 = `url(#${gradientId})`;
         }
-        evG.append("rect").attr("x", x).attr("y", y - BAR_H / 2).attr("width", rectW).attr("height", BAR_H).attr("rx", 4).attr("fill", fill2);
+        evG.append("rect").attr("x", x).attr("y", y - BAR_H / 2).attr("width", rectW).attr("height", BAR_H).attr("rx", 4).attr("fill", fill2).attr("stroke", color).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", "#ffffff").attr("font-size", "14px").attr("font-weight", "700").text(ev.label);
+          evG.append("text").attr("x", x + 8).attr("y", y).attr("dy", "0.35em").attr("text-anchor", "start").attr("fill", textColor).attr("font-size", "14px").attr("font-weight", "700").text(ev.label);
         } else {
           const wouldFlipLeft = x + rectW > innerWidth * 0.6;
           const labelFitsLeft = x - 6 - estLabelWidth > 0;
@@ -20525,7 +21252,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
         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", color).attr("stroke", bgColor).attr("stroke-width", 1.5);
+        evG.append("circle").attr("cx", x).attr("cy", y).attr("r", 5).attr("fill", mix(color, bg, 30)).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);
       }
     });
@@ -20680,8 +21407,8 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
           } else {
             color = ev.group && groupColorMap.has(ev.group) ? groupColorMap.get(ev.group) : textColor;
           }
-          el.selectAll("rect").attr("fill", color);
-          el.selectAll("circle:not(.tl-event-point-outline)").attr("fill", color);
+          el.selectAll("rect").attr("fill", mix(color, bg, 30)).attr("stroke", color);
+          el.selectAll("circle:not(.tl-event-point-outline)").attr("fill", mix(color, bg, 30)).attr("stroke", color);
         });
       };
       var drawSwimlaneIcon = drawSwimlaneIcon2, relayout = relayout2, drawLegend = drawLegend2, recolorEvents = recolorEvents2;
@@ -21146,7 +21873,6 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem, exportD
   const init2 = initD3Chart(container, palette, exportDims);
   if (!init2) return;
   const { svg, width, height, textColor } = init2;
-  const mutedColor = palette.textMuted;
   const borderColor = palette.border;
   const defaultColors = [
     palette.colors.blue,
@@ -21170,13 +21896,17 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem, exportD
       const f = r.length === 3 ? r[0] + r[0] + r[1] + r[1] + r[2] + r[2] : r;
       return [parseInt(f.substring(0, 2), 16), parseInt(f.substring(2, 4), 16), parseInt(f.substring(4, 6), 16)];
     };
-    const [ar, ag, ab] = parse(a), [br, bg, bb] = parse(b), t = pct / 100;
+    const [ar, ag, ab] = parse(a), [br, bg2, bb] = parse(b), t = pct / 100;
     const c = (x, y) => Math.round(x * t + y * (1 - t)).toString(16).padStart(2, "0");
-    return `#${c(ar, br)}${c(ag, bg)}${c(ab, bb)}`;
+    return `#${c(ar, br)}${c(ag, bg2)}${c(ab, bb)}`;
   };
-  const getQuadrantFill = (label, defaultIdx) => {
+  const bg = isDark ? palette.surface : palette.bg;
+  const getQuadrantColor = (label, defaultIdx) => {
     return label?.color ?? defaultColors[defaultIdx % defaultColors.length];
   };
+  const getQuadrantFill = (label, defaultIdx) => {
+    return mixHex(getQuadrantColor(label, defaultIdx), bg, 30);
+  };
   const quadrantDefs = [
     {
       position: "top-left",
@@ -21227,12 +21957,11 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem, exportD
       // purple
     }
   ];
-  const quadrantRects = chartG.selectAll("rect.quadrant").data(quadrantDefs).enter().append("rect").attr("class", "quadrant").attr("x", (d) => d.x).attr("y", (d) => d.y).attr("width", (d) => d.w).attr("height", (d) => d.h).attr("fill", (d) => getQuadrantFill(d.label, d.colorIdx)).attr("stroke", borderColor).attr("stroke-width", 0.5);
-  const contrastColor = "#ffffff";
+  const quadrantRects = chartG.selectAll("rect.quadrant").data(quadrantDefs).enter().append("rect").attr("class", "quadrant").attr("x", (d) => d.x).attr("y", (d) => d.y).attr("width", (d) => d.w).attr("height", (d) => d.h).attr("fill", (d) => getQuadrantFill(d.label, d.colorIdx)).attr("stroke", (d) => getQuadrantColor(d.label, d.colorIdx)).attr("stroke-width", 2);
   const shadowColor = "rgba(0,0,0,0.4)";
   const getQuadrantLabelColor = (d) => {
-    const fill2 = getQuadrantFill(d.label, d.colorIdx);
-    return mixHex("#000000", fill2, 40);
+    const color = getQuadrantColor(d.label, d.colorIdx);
+    return mixHex("#000000", color, 40);
   };
   const LABEL_MAX_FONT = 48;
   const LABEL_MIN_FONT = 14;
@@ -21373,7 +22102,7 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem, exportD
     const pointColor = quadDef?.label?.color ?? defaultColors[quadDef?.colorIdx ?? 0];
     const pointG = pointsG.append("g").attr("class", "point-group").attr("data-line-number", String(point.lineNumber));
     pointG.append("circle").attr("cx", cx).attr("cy", cy).attr("r", 6).attr("fill", "#ffffff").attr("stroke", pointColor).attr("stroke-width", 2);
-    pointG.append("text").attr("x", cx).attr("y", cy - 10).attr("text-anchor", "middle").attr("fill", contrastColor).attr("font-size", "12px").attr("font-weight", "700").style("text-shadow", `0 1px 2px ${shadowColor}`).text(point.label);
+    pointG.append("text").attr("x", cx).attr("y", cy - 10).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "12px").attr("font-weight", "700").style("text-shadow", `0 1px 2px ${shadowColor}`).text(point.label);
     const tipHtml = `<strong>${point.label}</strong><br>x: ${point.x.toFixed(2)}, y: ${point.y.toFixed(2)}`;
     pointG.style("cursor", onClickItem ? "pointer" : "default").on("mouseenter", (event) => {
       showTooltip(tooltip, tipHtml, event);
@@ -21874,6 +22603,7 @@ __export(index_exports, {
   contrastText: () => contrastText,
   decodeDiagramUrl: () => decodeDiagramUrl,
   encodeDiagramUrl: () => encodeDiagramUrl,
+  extractDiagramSymbols: () => extractDiagramSymbols,
   formatDateLabel: () => formatDateLabel,
   formatDgmoError: () => formatDgmoError,
   getAvailablePalettes: () => getAvailablePalettes,
@@ -21937,6 +22667,7 @@ __export(index_exports, {
   parseState: () => parseState,
   parseTimelineDate: () => parseTimelineDate,
   parseVisualization: () => parseVisualization,
+  registerExtractor: () => registerExtractor,
   registerPalette: () => registerPalette,
   render: () => render,
   renderArcDiagram: () => renderArcDiagram,
@@ -22790,6 +23521,34 @@ function decodeDiagramUrl(hash) {
   }
 }
 
+// src/completion.ts
+init_parser3();
+init_flowchart_parser();
+init_parser9();
+init_parser2();
+var registry = /* @__PURE__ */ new Map();
+function registerExtractor(kind, fn) {
+  registry.set(kind, fn);
+}
+function extractDiagramSymbols(docText) {
+  let chartType = null;
+  for (const line10 of docText.split("\n")) {
+    const m = line10.match(/^\s*chart\s*:\s*(.+)/i);
+    if (m) {
+      chartType = m[1].trim().toLowerCase();
+      break;
+    }
+  }
+  if (!chartType) return null;
+  const fn = registry.get(chartType);
+  if (!fn) return null;
+  return fn(docText);
+}
+registerExtractor("er", extractSymbols3);
+registerExtractor("flowchart", extractSymbols);
+registerExtractor("infra", extractSymbols4);
+registerExtractor("class", extractSymbols2);
+
 // src/index.ts
 init_branding();
 // Annotate the CommonJS export names for ESM import in node:
@@ -22822,6 +23581,7 @@ init_branding();
   contrastText,
   decodeDiagramUrl,
   encodeDiagramUrl,
+  extractDiagramSymbols,
   formatDateLabel,
   formatDgmoError,
   getAvailablePalettes,
@@ -22885,6 +23645,7 @@ init_branding();
   parseState,
   parseTimelineDate,
   parseVisualization,
+  registerExtractor,
   registerPalette,
   render,
   renderArcDiagram,