@diagrammo/dgmo 0.6.2 → 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();
@@ -11717,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);
@@ -11900,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,
@@ -11916,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({
@@ -11935,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();
@@ -12202,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 = [];
@@ -12334,7 +12433,7 @@ function computeLegendGroups3(tagGroups) {
     const nameW = group.name.length * LEGEND_PILL_FONT_W4 + LEGEND_PILL_PAD4 * 2;
     let capsuleW = LEGEND_CAPSULE_PAD4;
     for (const e of entries) {
-      capsuleW += LEGEND_DOT_R4 * 2 + LEGEND_ENTRY_DOT_GAP4 + e.value.length * LEGEND_ENTRY_FONT_W5 + LEGEND_ENTRY_TRAIL4;
+      capsuleW += LEGEND_DOT_R4 * 2 + LEGEND_ENTRY_DOT_GAP4 + e.value.length * LEGEND_ENTRY_FONT_W4 + LEGEND_ENTRY_TRAIL4;
     }
     capsuleW += LEGEND_CAPSULE_PAD4;
     result.push({
@@ -13415,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_W5, LEGEND_ENTRY_DOT_GAP4, LEGEND_ENTRY_TRAIL4, LEGEND_CAPSULE_PAD4, EDGE_NODE_COLLISION_WEIGHT, 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";
@@ -13441,7 +13540,7 @@ var init_layout6 = __esm({
     LEGEND_PILL_PAD4 = 16;
     LEGEND_DOT_R4 = 4;
     LEGEND_ENTRY_FONT_SIZE2 = 10;
-    LEGEND_ENTRY_FONT_W5 = LEGEND_ENTRY_FONT_SIZE2 * 0.6;
+    LEGEND_ENTRY_FONT_W4 = LEGEND_ENTRY_FONT_SIZE2 * 0.6;
     LEGEND_ENTRY_DOT_GAP4 = 4;
     LEGEND_ENTRY_TRAIL4 = 8;
     LEGEND_CAPSULE_PAD4 = 4;
@@ -13533,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);
@@ -14023,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);
@@ -14636,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);
@@ -18711,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;
@@ -20100,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);
         });
@@ -20144,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);
         });
@@ -20462,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) => {
@@ -20723,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();
@@ -20731,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);
           }
         }
@@ -20830,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();
@@ -20838,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(
@@ -20995,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();
@@ -21003,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;
@@ -21020,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);
         }
       });
@@ -21133,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();
@@ -21141,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;
@@ -21158,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);
       }
     });
@@ -21313,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;
@@ -21779,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,
@@ -21803,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",
@@ -21860,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;
@@ -22006,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);
@@ -22507,6 +22603,7 @@ __export(index_exports, {
   contrastText: () => contrastText,
   decodeDiagramUrl: () => decodeDiagramUrl,
   encodeDiagramUrl: () => encodeDiagramUrl,
+  extractDiagramSymbols: () => extractDiagramSymbols,
   formatDateLabel: () => formatDateLabel,
   formatDgmoError: () => formatDgmoError,
   getAvailablePalettes: () => getAvailablePalettes,
@@ -22570,6 +22667,7 @@ __export(index_exports, {
   parseState: () => parseState,
   parseTimelineDate: () => parseTimelineDate,
   parseVisualization: () => parseVisualization,
+  registerExtractor: () => registerExtractor,
   registerPalette: () => registerPalette,
   render: () => render,
   renderArcDiagram: () => renderArcDiagram,
@@ -23423,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:
@@ -23455,6 +23581,7 @@ init_branding();
   contrastText,
   decodeDiagramUrl,
   encodeDiagramUrl,
+  extractDiagramSymbols,
   formatDateLabel,
   formatDgmoError,
   getAvailablePalettes,
@@ -23518,6 +23645,7 @@ init_branding();
   parseState,
   parseTimelineDate,
   parseVisualization,
+  registerExtractor,
   registerPalette,
   render,
   renderArcDiagram,