@diagrammo/dgmo 0.15.1 → 0.16.0

package/dist/index.cjs

@@ -1822,17 +1822,21 @@ function measureIndent(line12) {
   return indent;
 }
 function extractColor(label, palette, diagnostics, line12) {
-  const m = label.match(COLOR_SUFFIX_RE);
-  if (!m) return { label };
-  const colorName = m[1].trim();
+  const lastSpaceIdx = Math.max(
+    label.lastIndexOf(" "),
+    label.lastIndexOf("	")
+  );
+  if (lastSpaceIdx < 0) return { label };
+  const trailing = label.substring(lastSpaceIdx + 1);
+  if (!RECOGNIZED_COLOR_SET.has(trailing)) return { label };
   let color;
   if (diagnostics && line12 !== void 0) {
-    color = resolveColorWithDiagnostic(colorName, line12, diagnostics, palette);
+    color = resolveColorWithDiagnostic(trailing, line12, diagnostics, palette);
   } else {
-    color = resolveColor(colorName, palette) ?? void 0;
+    color = resolveColor(trailing, palette) ?? void 0;
   }
   return {
-    label: label.substring(0, m.index).trim(),
+    label: label.substring(0, lastSpaceIdx).trimEnd(),
     color
   };
 }
@@ -1965,14 +1969,18 @@ function parseSeriesNames(value, lines, lineIndex, palette, diagnostics) {
   }
   return { series, names, nameColors, nameLineNumbers, newIndex };
 }
-function inferArrowColor(label) {
-  const lower = label.toLowerCase();
-  if (lower === "yes" || lower === "success" || lower === "ok" || lower === "true")
-    return "green";
-  if (lower === "no" || lower === "fail" || lower === "error" || lower === "false")
-    return "red";
-  if (lower === "maybe" || lower === "warning") return "orange";
-  return void 0;
+function peelTrailingColorName(label) {
+  const lastSpaceIdx = Math.max(
+    label.lastIndexOf(" "),
+    label.lastIndexOf("	")
+  );
+  if (lastSpaceIdx < 0) return { label };
+  const trailing = label.substring(lastSpaceIdx + 1);
+  if (!RECOGNIZED_COLOR_SET.has(trailing)) return { label };
+  return {
+    label: label.substring(0, lastSpaceIdx).trimEnd(),
+    colorName: trailing
+  };
 }
 function parsePipeMetadata(segments, aliasMap = /* @__PURE__ */ new Map(), errorMultiplePipes) {
   if (segments.length > 2) {
@@ -1994,11 +2002,14 @@ function parsePipeMetadata(segments, aliasMap = /* @__PURE__ */ new Map(), error
   }
   return metadata;
 }
-var ALL_CHART_TYPES, PIPE_KEY_VALUE_PREFIX_RE, PIPE_LIKELY_STRUCTURED_TAIL_RE, COLOR_SUFFIX_RE, OPTION_NOCOLON_RE, GLOBAL_BOOLEANS, MULTIPLE_PIPE_ERROR;
+var RECOGNIZED_COLOR_SET, ALL_CHART_TYPES, PIPE_KEY_VALUE_PREFIX_RE, PIPE_LIKELY_STRUCTURED_TAIL_RE, OPTION_NOCOLON_RE, GLOBAL_BOOLEANS, MULTIPLE_PIPE_ERROR;
 var init_parsing = __esm({
   "src/utils/parsing.ts"() {
     "use strict";
     init_colors();
+    RECOGNIZED_COLOR_SET = new Set(
+      RECOGNIZED_COLOR_NAMES
+    );
     ALL_CHART_TYPES = /* @__PURE__ */ new Set([
       // data charts
       "bar",
@@ -2050,7 +2061,6 @@ var init_parsing = __esm({
     ]);
     PIPE_KEY_VALUE_PREFIX_RE = /^\s*[A-Za-z][A-Za-z0-9_-]*\s*:/;
     PIPE_LIKELY_STRUCTURED_TAIL_RE = /,\s*[A-Za-z][A-Za-z0-9_-]*\s*:/;
-    COLOR_SUFFIX_RE = /\(([^)]+)\)\s*$/;
     OPTION_NOCOLON_RE = /^([a-z][a-z0-9-]*)\s+(.+)$/i;
     GLOBAL_BOOLEANS = /* @__PURE__ */ new Set([
       "solid-fill",
@@ -2087,7 +2097,7 @@ function parseTagDeclaration(line12) {
   let restStartIdx = 1;
   let valueStart = tokens.length;
   for (let i = 1; i < tokens.length; i++) {
-    if (tokens[i].includes("(")) {
+    if (tokens[i].includes(",")) {
       valueStart = i;
       break;
     }
@@ -2119,13 +2129,29 @@ function parseTagDeclaration(line12) {
       restStartIdx = valueStart;
     }
   } else {
-    if (tokens[0][0] === '"' || tokens[0][0] === "'") {
-      if (tokens.length > 1 && isAliasToken(tokens[1]) && valueStart > 1) {
+    const isColorWord = (s) => RECOGNIZED_COLOR_NAMES.includes(s);
+    if (valueStart < tokens.length) {
+      const commaTokenIdx = valueStart;
+      const lastBeforeComma = tokens[commaTokenIdx].replace(/,$/, "");
+      const firstValueStart = isColorWord(lastBeforeComma) ? commaTokenIdx - 1 : commaTokenIdx;
+      const prefixEnd = firstValueStart;
+      const aliasCandidate = prefixEnd > 1 ? tokens[prefixEnd - 1] : void 0;
+      if (aliasCandidate && isAliasToken(aliasCandidate) && !isColorWord(aliasCandidate)) {
+        alias = aliasCandidate;
+        legacyForm = "bare-shorthand";
+        name = tokens.slice(0, prefixEnd - 1).map((t) => stripQuotes(t)).join(" ");
+        restStartIdx = prefixEnd;
+      } else {
+        name = tokens.slice(0, prefixEnd).map((t) => stripQuotes(t)).join(" ");
+        restStartIdx = prefixEnd;
+      }
+    } else if (tokens[0][0] === '"' || tokens[0][0] === "'") {
+      if (tokens.length > 1 && isAliasToken(tokens[1]) && !isColorWord(tokens[1])) {
         alias = tokens[1];
         legacyForm = "bare-shorthand";
         restStartIdx = 2;
       }
-    } else if (valueStart > 1 && isAliasToken(tokens[valueStart - 1])) {
+    } else if (valueStart > 1 && isAliasToken(tokens[valueStart - 1]) && !isColorWord(tokens[valueStart - 1])) {
       alias = tokens[valueStart - 1];
       legacyForm = "bare-shorthand";
       name = tokens.slice(0, valueStart - 1).map((t) => stripQuotes(t)).join(" ");
@@ -2140,10 +2166,13 @@ function parseTagDeclaration(line12) {
     inlineValues = valueStr.split(",").map((v) => v.trim()).filter(Boolean);
   }
   if (!inlineValues || inlineValues.length === 0) {
-    const colorMatch = name.match(/\(([^)]+)\)\s*$/);
-    if (colorMatch) {
-      colorHint = colorMatch[1];
-      name = name.substring(0, colorMatch.index).trim();
+    const lastSpaceIdx = name.lastIndexOf(" ");
+    if (lastSpaceIdx > 0) {
+      const trailing = name.substring(lastSpaceIdx + 1);
+      if (RECOGNIZED_COLOR_NAMES.includes(trailing)) {
+        colorHint = trailing;
+        name = name.substring(0, lastSpaceIdx).trimEnd();
+      }
     }
   }
   return {
@@ -2271,6 +2300,7 @@ var init_tag_groups = __esm({
     "use strict";
     init_parsing();
     init_diagnostics();
+    init_colors();
     TAG_BLOCK_NOCOLON_RE = /^tag\s+/i;
     VALID_TAG_IDENT_RE = /^[A-Za-z_][A-Za-z0-9_-]*$/;
   }
@@ -2544,7 +2574,7 @@ function buildControlsGroupLayout(config, state) {
 }
 function computeLegendLayout(config, state, containerWidth) {
   const { groups, controls: configControls, mode } = config;
-  const isExport = mode === "inline";
+  const isExport = mode === "export";
   const activeGroupName = state.activeGroup?.toLowerCase() ?? null;
   if (isExport && !activeGroupName) {
     return {
@@ -2830,7 +2860,10 @@ function renderLegendD3(container, config, state, palette, isDark, callbacks, co
   const width = containerWidth ?? parseFloat(container.attr("width") || "800");
   let currentState = { ...state };
   let currentLayout;
-  const legendG = container.append("g").attr("class", "dgmo-legend");
+  const legendG = container.append("g").attr("class", "dgmo-legend").attr("data-legend-title-relation", config.position.titleRelation).attr(
+    "data-legend-capsule-addon-width",
+    String(config.capsulePillAddonWidth ?? 0)
+  );
   function render3() {
     currentLayout = computeLegendLayout(config, currentState, width);
     legendG.selectAll("*").remove();
@@ -3392,15 +3425,6 @@ function parseInArrowLabel(rawLabel, lineNumber) {
   const diagnostics = validateLabelCharacters(trimmed, lineNumber);
   return { label: trimmed, diagnostics };
 }
-function matchColorParens(content) {
-  const m = content.match(/^\(([A-Za-z]+)\)$/);
-  if (!m) return null;
-  const candidate = m[1].toLowerCase();
-  if (RECOGNIZED_COLOR_NAMES.includes(candidate)) {
-    return candidate;
-  }
-  return null;
-}
 function parseArrow(line12) {
   if (BIDI_SYNC_RE.test(line12) || BIDI_ASYNC_RE.test(line12)) {
     return {
@@ -3439,7 +3463,6 @@ var init_arrows = __esm({
   "src/utils/arrows.ts"() {
     "use strict";
     init_diagnostics();
-    init_colors();
     ARROW_DIAGNOSTIC_CODES = {
       /** Active: label contains `->` or `~>` substring (TD-13). */
       ARROW_SUBSTRING_IN_LABEL: "E_ARROW_SUBSTRING_IN_LABEL",
@@ -3764,7 +3787,7 @@ function parseSequenceDgmo(content) {
       if (groupColor) {
         pushWarning(
           lineNumber,
-          `(${groupColor}) color syntax removed from sequence diagrams \u2014 use 'tag:' groups for coloring`
+          `'(${groupColor})' parens-color syntax removed from sequence diagrams \u2014 use 'tag:' groups for coloring`
         );
       }
       contentStarted = true;
@@ -3844,7 +3867,7 @@ function parseSequenceDgmo(content) {
       if (!color) {
         pushError(
           lineNumber,
-          `Expected 'Value(color)' in tag group '${currentTagGroup.name}'`
+          `Expected 'Value color' in tag group '${currentTagGroup.name}'`
         );
         continue;
       }
@@ -3868,11 +3891,13 @@ function parseSequenceDgmo(content) {
         blockStack.pop();
       }
       const labelRaw = sectionMatch[1].trim();
-      const colorMatch = labelRaw.match(/^(.+?)\(([^)]+)\)$/);
+      const colorMatch = labelRaw.match(
+        /^(.+?)\((red|orange|yellow|green|blue|purple|teal|cyan|gray|black|white)\)$/
+      );
       if (colorMatch) {
         pushWarning(
           lineNumber,
-          `(${colorMatch[2].trim()}) color syntax removed from sequence diagrams \u2014 use 'tag:' groups for coloring`
+          `'(${colorMatch[2]})' parens-color syntax removed from sequence diagrams \u2014 use 'tag:' groups for coloring`
         );
       }
       contentStarted = true;
@@ -4027,7 +4052,7 @@ function parseSequenceDgmo(content) {
       const color = coloredMatch[2].trim();
       pushError(
         lineNumber,
-        `'${id}(${color})' syntax is no longer supported \u2014 use 'tag:' groups for coloring`
+        `'${id}(${color})' parens-color syntax is no longer supported \u2014 use 'tag:' groups for coloring`
       );
       contentStarted = true;
       const key = addParticipant(id, lineNumber, { metadata: colorMeta });
@@ -4406,7 +4431,7 @@ var init_parser = __esm({
     ]);
     IS_A_PATTERN = /^([^:]+?)\s+is\s+an?\s+(\w+)(?:\s+(.+))?$/i;
     POSITION_ONLY_PATTERN = /^([^:]+?)\s+position\s+(-?\d+)$/i;
-    COLORED_PARTICIPANT_PATTERN = /^(\S+?)\(([^)]+)\)\s*$/;
+    COLORED_PARTICIPANT_PATTERN = /^(\S+?)\((red|orange|yellow|green|blue|purple|teal|cyan|gray|black|white)\)\s*$/;
     GROUP_HEADING_PATTERN = /^\[([^\]|]+?)(?:\(([^)]+)\))?\]\s*(.*)$/;
     GROUP_HEADING_FALLBACK = /^\[([^\]]+)\]\s*(.*)$/;
     LEGACY_GROUP_PATTERN = /^##\s+(.+?)(?:\(([^)]+)\))?\s*$/;
@@ -4475,7 +4500,6 @@ function splitArrows(line12) {
     const arrowEnd = idx + 2;
     let arrowStart;
     let label;
-    let color;
     let openingStart = -1;
     for (let i = scanFloor; i < runStart; i++) {
       if (line12[i] !== "-") continue;
@@ -4488,21 +4512,13 @@ function splitArrows(line12) {
     if (openingStart !== -1) {
       let openingEnd = openingStart;
       while (openingEnd < runStart && line12[openingEnd] === "-") openingEnd++;
-      const arrowContent = line12.substring(openingEnd, runStart);
-      const colorMatch = arrowContent.match(/\(([^)]+)\)\s*$/);
-      if (colorMatch) {
-        color = colorMatch[1].trim();
-        const labelPart = arrowContent.substring(0, colorMatch.index).trim();
-        if (labelPart) label = labelPart;
-      } else {
-        const labelPart = arrowContent.trim();
-        if (labelPart) label = labelPart;
-      }
+      const labelPart = line12.substring(openingEnd, runStart).trim();
+      if (labelPart) label = labelPart;
       arrowStart = openingStart;
     } else {
       arrowStart = runStart;
     }
-    arrowPositions.push({ start: arrowStart, end: arrowEnd, label, color });
+    arrowPositions.push({ start: arrowStart, end: arrowEnd, label });
     searchFrom = arrowEnd;
     scanFloor = arrowEnd;
   }
@@ -4516,11 +4532,7 @@ function splitArrows(line12) {
     if (beforeText || i === 0) {
       segments.push(beforeText);
     }
-    let arrowToken = "->";
-    if (arrow.label && arrow.color)
-      arrowToken = `-${arrow.label}(${arrow.color})->`;
-    else if (arrow.label) arrowToken = `-${arrow.label}->`;
-    else if (arrow.color) arrowToken = `-(${arrow.color})->`;
+    const arrowToken = arrow.label ? `-${arrow.label}->` : "->";
     segments.push(arrowToken);
     lastIndex = arrow.end;
   }
@@ -4530,45 +4542,14 @@ function splitArrows(line12) {
   }
   return segments;
 }
-function parseArrowToken(token, palette, lineNumber, diagnostics) {
+function parseArrowToken(token, _palette, lineNumber, diagnostics) {
   if (token === "->") return {};
-  const bareParen = token.match(/^-(\([A-Za-z]+\))->$/);
-  if (bareParen) {
-    const colorName = matchColorParens(bareParen[1]);
-    if (colorName) {
-      return {
-        color: resolveColorWithDiagnostic(
-          colorName,
-          lineNumber,
-          diagnostics,
-          palette
-        )
-      };
-    }
-  }
-  const m = token.match(/^-(.+?)(?:\(([^)]+)\))?->$/);
+  const m = token.match(/^-(.+?)->$/);
   if (m) {
     const rawLabel = m[1] ?? "";
     const labelResult = parseInArrowLabel(rawLabel, lineNumber);
     diagnostics.push(...labelResult.diagnostics);
-    const label = labelResult.label;
-    let color = m[2] ? resolveColorWithDiagnostic(
-      m[2].trim(),
-      lineNumber,
-      diagnostics,
-      palette
-    ) : void 0;
-    if (label && !color) {
-      const inferred = inferArrowColor(label);
-      if (inferred)
-        color = resolveColorWithDiagnostic(
-          inferred,
-          lineNumber,
-          diagnostics,
-          palette
-        );
-    }
-    return { label, color };
+    return { label: labelResult.label };
   }
   return {};
 }
@@ -4634,13 +4615,12 @@ function parseFlowchart(content, palette) {
     result.nodes.push(node);
     return node;
   }
-  function addEdge(sourceId, targetId, lineNumber, label, color) {
+  function addEdge(sourceId, targetId, lineNumber, label) {
     const edge = {
       source: sourceId,
       target: targetId,
       lineNumber,
-      ...label && { label },
-      ...color && { color }
+      ...label && { label }
     };
     result.edges.push(edge);
   }
@@ -4706,13 +4686,7 @@ function parseFlowchart(content, palette) {
       if (pendingArrow !== null) {
         const sourceId = lastNodeId ?? implicitSourceId;
         if (sourceId) {
-          addEdge(
-            sourceId,
-            node.id,
-            lineNumber,
-            pendingArrow.label,
-            pendingArrow.color
-          );
+          addEdge(sourceId, node.id, lineNumber, pendingArrow.label);
         }
         pendingArrow = null;
       } else if (lastNodeId === null && implicitSourceId === null) {
@@ -4837,7 +4811,6 @@ var NODE_ID_RE;
 var init_flowchart_parser = __esm({
   "src/graph/flowchart-parser.ts"() {
     "use strict";
-    init_colors();
     init_diagnostics();
     init_arrows();
     init_parsing();
@@ -4865,7 +4838,6 @@ function splitArrows2(line12) {
     const arrowEnd = idx + 2;
     let arrowStart;
     let label;
-    let color;
     let openingStart = -1;
     for (let i = scanFloor; i < runStart; i++) {
       if (line12[i] !== "-") continue;
@@ -4878,21 +4850,13 @@ function splitArrows2(line12) {
     if (openingStart !== -1) {
       let openingEnd = openingStart;
       while (openingEnd < runStart && line12[openingEnd] === "-") openingEnd++;
-      const arrowContent = line12.substring(openingEnd, runStart);
-      const colorMatch = arrowContent.match(/\(([^)]+)\)\s*$/);
-      if (colorMatch) {
-        color = colorMatch[1].trim();
-        const labelPart = arrowContent.substring(0, colorMatch.index).trim();
-        if (labelPart) label = labelPart;
-      } else {
-        const labelPart = arrowContent.trim();
-        if (labelPart) label = labelPart;
-      }
+      const labelPart = line12.substring(openingEnd, runStart).trim();
+      if (labelPart) label = labelPart;
       arrowStart = openingStart;
     } else {
       arrowStart = runStart;
     }
-    arrowPositions.push({ start: arrowStart, end: arrowEnd, label, color });
+    arrowPositions.push({ start: arrowStart, end: arrowEnd, label });
     searchFrom = arrowEnd;
     scanFloor = arrowEnd;
   }
@@ -4902,11 +4866,7 @@ function splitArrows2(line12) {
     const arrow = arrowPositions[i];
     const beforeText = line12.substring(lastIndex, arrow.start).trim();
     if (beforeText || i === 0) segments.push(beforeText);
-    let arrowToken = "->";
-    if (arrow.label && arrow.color)
-      arrowToken = `-${arrow.label}(${arrow.color})->`;
-    else if (arrow.label) arrowToken = `-${arrow.label}->`;
-    else if (arrow.color) arrowToken = `-(${arrow.color})->`;
+    const arrowToken = arrow.label ? `-${arrow.label}->` : "->";
     segments.push(arrowToken);
     lastIndex = arrow.end;
   }
@@ -4914,35 +4874,14 @@ function splitArrows2(line12) {
   if (remaining) segments.push(remaining);
   return segments;
 }
-function parseArrowToken2(token, palette, lineNumber, diagnostics) {
+function parseArrowToken2(token, _palette, lineNumber, diagnostics) {
   if (token === "->") return {};
-  const bareParen = token.match(/^-(\([A-Za-z]+\))->$/);
-  if (bareParen) {
-    const colorName = matchColorParens(bareParen[1]);
-    if (colorName) {
-      return {
-        color: resolveColorWithDiagnostic(
-          colorName,
-          lineNumber,
-          diagnostics,
-          palette
-        )
-      };
-    }
-  }
-  const m = token.match(/^-(.+?)(?:\(([^)]+)\))?->$/);
+  const m = token.match(/^-(.+?)->$/);
   if (m) {
     const rawLabel = m[1] ?? "";
     const labelResult = parseInArrowLabel(rawLabel, lineNumber);
     diagnostics.push(...labelResult.diagnostics);
-    const label = labelResult.label;
-    const color = m[2] ? resolveColorWithDiagnostic(
-      m[2].trim(),
-      lineNumber,
-      diagnostics,
-      palette
-    ) : void 0;
-    return { label, color };
+    return { label: labelResult.label };
   }
   return {};
 }
@@ -5033,13 +4972,12 @@ function parseState(content, palette) {
     }
     return node;
   }
-  function addEdge(sourceId, targetId, lineNumber, label, color) {
+  function addEdge(sourceId, targetId, lineNumber, label) {
     result.edges.push({
       source: sourceId,
       target: targetId,
       lineNumber,
-      ...label && { label },
-      ...color && { color }
+      ...label && { label }
     });
   }
   for (let i = 0; i < lines.length; i++) {
@@ -5182,13 +5120,7 @@ function parseState(content, palette) {
       if (pendingArrow !== null) {
         const sourceId = lastNodeId ?? implicitSourceId;
         if (sourceId) {
-          addEdge(
-            sourceId,
-            node.id,
-            lineNumber,
-            pendingArrow.label,
-            pendingArrow.color
-          );
+          addEdge(sourceId, node.id, lineNumber, pendingArrow.label);
         }
         pendingArrow = null;
       }
@@ -5241,7 +5173,7 @@ var init_state_parser = __esm({
     init_name_normalize();
     PSEUDOSTATE_ID = "pseudostate:[*]";
     PSEUDOSTATE_LABEL = "[*]";
-    GROUP_BRACKET_RE = /^\[([^\]]+)\](?:\(([^)]+)\))?\s*$/;
+    GROUP_BRACKET_RE = /^\[([^\]]+)\](?:\s+(red|orange|yellow|green|blue|purple|teal|cyan|gray|black|white))?\s*$/;
   }
 });
 
@@ -5620,7 +5552,7 @@ var init_parser2 = __esm({
     init_arrows();
     init_parsing();
     init_name_normalize();
-    CLASS_DECL_RE = /^(?:(abstract|interface|enum)\s+)?(?:"([^"]+)"|([A-Z][^":]*?))(?:\s+extends\s+(?:"([^"]+)"|([A-Z][^":]*?)))?(?:\s+implements\s+(?:"([^"]+)"|([A-Z][^":]*?)))?(?:\s+\[(abstract|interface|enum)\])?(?:\s+\(([^)]+)\))?(?:\s+as\s+([A-Za-z][A-Za-z0-9_]{0,11}))?\s*$/;
+    CLASS_DECL_RE = /^(?:(abstract|interface|enum)\s+)?(?:"([^"]+)"|([A-Z][^":]*?))(?:\s+extends\s+(?:"([^"]+)"|([A-Z][^":]*?)))?(?:\s+implements\s+(?:"([^"]+)"|([A-Z][^":]*?)))?(?:\s+\[(abstract|interface|enum)\])?(?:\s+(red|orange|yellow|green|blue|purple|teal|cyan|gray|black|white))?(?:\s+as\s+([A-Za-z][A-Za-z0-9_]{0,11}))?\s*$/;
     INDENT_REL_ARROW_RE = /^(--\|>|\.\.\|>|\*--|o--|\.\.>|->)\s*(?:"([^"]+)"|([A-Za-z][^":]*?))(?:\s+:?\s*(.+))?$/;
     REL_ARROW_RE = /^(?:"([^"]+)"|([A-Z][^":]*?))\s*(--\|>|\.\.\|>|\*--|o--|\.\.>|->)\s*(?:"([^"]+)"|([A-Z][^":]*?))(?:\s+:?\s*(.+))?$/;
     VISIBILITY_RE = /^([+\-#])\s*/;
@@ -5827,7 +5759,7 @@ function parseERDiagram(content, palette) {
         result.diagnostics.push(
           makeDgmoError(
             lineNumber,
-            `Expected 'Value(color)' in tag group '${currentTagGroup.name}'`,
+            `Expected 'Value color' in tag group '${currentTagGroup.name}'`,
             "warning"
           )
         );
@@ -5939,7 +5871,7 @@ function parseERDiagram(content, palette) {
   if (result.tables.length === 0 && !result.error) {
     const diag = makeDgmoError(
       1,
-      'No tables found. Add table declarations like "users" or "orders (blue)".'
+      'No tables found. Add table declarations like "users" or "orders blue".'
     );
     result.diagnostics.push(diag);
     result.error = formatDgmoError(diag);
@@ -6025,15 +5957,19 @@ function extractSymbols3(docText) {
   for (const rawLine of docText.split("\n")) {
     const line12 = rawLine.trim();
     if (inMetadata && /^er(\s|$)/i.test(line12)) continue;
-    if (inMetadata && OPTION_NOCOLON_RE.test(line12)) continue;
-    inMetadata = false;
-    if (line12.length === 0) continue;
     if (/^\s/.test(rawLine)) continue;
+    if (line12.length === 0) continue;
     const m = TABLE_DECL_RE.exec(line12);
     if (m) {
       const name = (m[1] ?? m[2] ?? "").trim();
-      if (name) entities.push(name);
+      if (name) {
+        inMetadata = false;
+        entities.push(name);
+        continue;
+      }
     }
+    if (inMetadata && OPTION_NOCOLON_RE.test(line12)) continue;
+    inMetadata = false;
   }
   return {
     kind: "er",
@@ -6051,7 +5987,7 @@ var init_parser3 = __esm({
     init_name_normalize();
     init_parsing();
     init_tag_groups();
-    TABLE_DECL_RE = /^(?:"([^"]+)"|([a-zA-Z_][^|":(]*?))(?:\s*\(([^)]+)\))?(?:\s*\|(.+))?$/;
+    TABLE_DECL_RE = /^(?:"([^"]+)"|([a-zA-Z_][^|":(]*?))(?:\s+(red|orange|yellow|green|blue|purple|teal|cyan|gray|black|white))?(?:\s*\|(.+))?$/;
     INDENT_REL_RE = /^([1*?])-{1,2}(?:(.+?)-{1,2})?([1*?])\s+(?:"([^"]+)"|([a-zA-Z_][^":]*?))\s*$/;
     CONSTRAINT_MAP = {
       pk: "pk",
@@ -6131,18 +6067,22 @@ function parseChart(content, palette) {
         return fail(lineNumber, msg2);
       }
     }
-    const eraMatch = trimmed.match(
-      /^era\s+(.+?)\s*->\s*(.+?)(?:\s*\(([^)]+)\))?\s*$/
-    );
+    const eraMatch = trimmed.match(/^era\s+(.+?)\s*->\s*(.+?)\s*$/);
     if (eraMatch) {
       const afterArrow = eraMatch[2].trim();
       const spaceIdx2 = afterArrow.indexOf(" ");
       if (spaceIdx2 >= 0) {
+        const lastSpaceIdx = afterArrow.lastIndexOf(" ");
+        const trailing = afterArrow.substring(lastSpaceIdx + 1);
+        const hasColor = RECOGNIZED_COLOR_NAMES.includes(
+          trailing
+        );
+        const labelPart = hasColor ? afterArrow.substring(0, lastSpaceIdx).trimEnd() : afterArrow;
         rawEras.push({
           start: eraMatch[1].trim(),
-          afterArrow,
-          color: eraMatch[3] ? resolveColorWithDiagnostic(
-            eraMatch[3].trim(),
+          afterArrow: labelPart,
+          color: hasColor ? resolveColorWithDiagnostic(
+            trailing,
             lineNumber,
             result.diagnostics,
             palette
@@ -6642,11 +6582,12 @@ function parseExtendedChart(content, palette) {
         return result;
       }
     }
-    const categoryMatch = trimmed.match(/^\[(.+?)\](?:\s*\(([^)]+)\))?\s*$/);
+    const categoryMatch = trimmed.match(/^\[(.+?)\](?:\s+(\S+))?\s*$/);
     if (categoryMatch) {
       const catName = categoryMatch[1].trim();
-      const catColor = categoryMatch[2] ? resolveColorWithDiagnostic(
-        categoryMatch[2].trim(),
+      const rawCatColor = categoryMatch[2]?.trim();
+      const catColor = rawCatColor ? resolveColorWithDiagnostic(
+        rawCatColor,
         lineNumber,
         result.diagnostics,
         palette
@@ -6661,7 +6602,7 @@ function parseExtendedChart(content, palette) {
       continue;
     }
     const arrowMatch = trimmed.match(
-      /^(.+?)\s*(->|--)\s*(.+?)\s+(-?[\d,_]+(?:\.[\d]+)?)\s*(?:\(([^)]+)\))?\s*$/
+      /^(.+?)\s*(->|--)\s*(.+?)\s+(-?[\d,_]+(?:\.[\d]+)?)(?:\s+(red|orange|yellow|green|blue|purple|teal|cyan|gray|black|white))?\s*$/
     );
     if (arrowMatch) {
       const [, rawSource, arrow, rawTarget, rawVal, rawLinkColor] = arrowMatch;
@@ -6706,9 +6647,12 @@ function parseExtendedChart(content, palette) {
         }
         if (sankeyStack.length > 0) {
           const valColorMatch = trimmed.match(
-            /(-?[\d,_]+(?:\.[\d]+)?)\s*\(([^)]+)\)\s*$/
+            /(-?[\d,_]+(?:\.[\d]+)?)\s+(red|orange|yellow|green|blue|purple|teal|cyan|gray|black|white)\s*$/
           );
-          const strippedLine = valColorMatch ? trimmed.replace(/\s*\([^)]+\)\s*$/, "") : trimmed;
+          const strippedLine = valColorMatch ? trimmed.replace(
+            /\s+(red|orange|yellow|green|blue|purple|teal|cyan|gray|black|white)\s*$/,
+            ""
+          ) : trimmed;
           const dataRow2 = parseDataRowValues(strippedLine);
           if (dataRow2 && dataRow2.values.length === 1) {
             const source = sankeyStack.at(-1).name;
@@ -9088,7 +9032,7 @@ function parseOrg(content, palette) {
         if (!color) {
           pushError(
             lineNumber,
-            `Expected 'Value(color)' in tag group '${currentTagGroup.name}'`
+            `Expected 'Value color' in tag group '${currentTagGroup.name}'`
           );
           continue;
         }
@@ -9379,7 +9323,7 @@ function parseKanban(content, palette) {
         if (!color) {
           warn(
             lineNumber,
-            `Expected 'Value(color)' in tag group '${currentTagGroup.name}'`
+            `Expected 'Value color' in tag group '${currentTagGroup.name}'`
           );
           continue;
         }
@@ -9422,8 +9366,9 @@ function parseKanban(content, palette) {
       currentCard = null;
       columnCounter++;
       const colName = columnMatch[1].trim();
-      const colColor = columnMatch[2] ? resolveColorWithDiagnostic(
-        columnMatch[2].trim(),
+      const rawTrailing = columnMatch[2]?.trim();
+      const colColor = rawTrailing ? resolveColorWithDiagnostic(
+        rawTrailing,
         lineNumber,
         result.diagnostics,
         palette
@@ -9578,7 +9523,7 @@ var init_parser5 = __esm({
     init_tag_groups();
     init_parsing();
     init_name_normalize();
-    COLUMN_RE = /^\[(.+?)\](?:\s*\(([^)]+)\))?(?:\s+as\s+([A-Za-z][A-Za-z0-9_]{0,11}))?\s*(?:\|\s*(.+))?$/;
+    COLUMN_RE = /^\[(.+?)\](?:\s+(\S+))?(?:\s+as\s+([A-Za-z][A-Za-z0-9_]{0,11}))?\s*(?:\|\s*(.+))?$/;
     LEGACY_COLUMN_RE = /^==\s+(.+?)\s*(?:\[wip:\s*(\d+)\])?\s*==$/;
     KNOWN_OPTIONS4 = /* @__PURE__ */ new Set(["hide", "active-tag"]);
     KNOWN_BOOLEANS3 = /* @__PURE__ */ new Set([
@@ -9761,7 +9706,7 @@ function parseC4(content, palette) {
         if (!color) {
           pushError(
             lineNumber,
-            `Expected 'Value(color)' in tag group '${currentTagGroup.name}'`
+            `Expected 'Value color' in tag group '${currentTagGroup.name}'`
           );
           continue;
         }
@@ -10357,7 +10302,7 @@ __export(parser_exports7, {
   looksLikeSitemap: () => looksLikeSitemap,
   parseSitemap: () => parseSitemap
 });
-function parseArrowLine(trimmed, palette, lineNumber, diagnostics) {
+function parseArrowLine(trimmed, _palette, _lineNumber, _diagnostics) {
   const bareMatch = trimmed.match(BARE_ARROW_RE);
   if (bareMatch) {
     const rawTarget = bareMatch[1].trim();
@@ -10370,27 +10315,10 @@ function parseArrowLine(trimmed, palette, lineNumber, diagnostics) {
   const arrowMatch = trimmed.match(ARROW_RE);
   if (arrowMatch) {
     const label = arrowMatch[1]?.trim() || void 0;
-    let color = arrowMatch[2] ? resolveColorWithDiagnostic(
-      arrowMatch[2].trim(),
-      lineNumber,
-      diagnostics,
-      palette
-    ) : void 0;
-    if (label && !color) {
-      const inferred = inferArrowColor(label);
-      if (inferred)
-        color = resolveColorWithDiagnostic(
-          inferred,
-          lineNumber,
-          diagnostics,
-          palette
-        );
-    }
-    const rawTarget = arrowMatch[3].trim();
+    const rawTarget = arrowMatch[2].trim();
     const groupMatch = rawTarget.match(/^\[(.+)\]$/);
     return {
       label,
-      color,
       target: groupMatch ? groupMatch[1].trim() : rawTarget,
       targetIsGroup: !!groupMatch
     };
@@ -10532,7 +10460,7 @@ function parseSitemap(content, palette) {
         if (!color) {
           pushError(
             lineNumber,
-            `Expected 'Value(color)' in tag group '${currentTagGroup.name}'`
+            `Expected 'Value color' in tag group '${currentTagGroup.name}'`
           );
           continue;
         }
@@ -10569,7 +10497,6 @@ function parseSitemap(content, palette) {
           targetLabel: arrowInfo.target,
           targetIsGroup: arrowInfo.targetIsGroup,
           label: arrowInfo.label,
-          color: arrowInfo.color,
           lineNumber
         });
       }
@@ -10667,7 +10594,6 @@ function parseSitemap(content, palette) {
         sourceId: arrow.sourceNode.id,
         targetId: aliasHit,
         label: arrow.label,
-        color: arrow.color,
         lineNumber: arrow.lineNumber
       });
       continue;
@@ -10687,7 +10613,6 @@ function parseSitemap(content, palette) {
         sourceId: arrow.sourceNode.id,
         targetId: targetContainer.id,
         label: arrow.label,
-        color: arrow.color,
         lineNumber: arrow.lineNumber
       });
     } else {
@@ -10704,7 +10629,6 @@ function parseSitemap(content, palette) {
         sourceId: arrow.sourceNode.id,
         targetId: targetNode.id,
         label: arrow.label,
-        color: arrow.color,
         lineNumber: arrow.lineNumber
       });
     }
@@ -10794,7 +10718,6 @@ var CONTAINER_RE3, METADATA_RE3, ARROW_RE, BARE_ARROW_RE;
 var init_parser7 = __esm({
   "src/sitemap/parser.ts"() {
     "use strict";
-    init_colors();
     init_diagnostics();
     init_name_normalize();
     init_tag_groups();
@@ -10802,7 +10725,7 @@ var init_parser7 = __esm({
     init_description_helpers();
     CONTAINER_RE3 = /^\[([^\]]+)\]\s*(?:\|\s*(.+))?$/;
     METADATA_RE3 = /^([^:]+):\s*(.+)$/;
-    ARROW_RE = /^-([^(>][^(>]*?)?\s*(?:\(([^)]+)\))?\s*->\s*(.+)$/;
+    ARROW_RE = /^-([^>][^>]*?)?\s*->\s*(.+)$/;
     BARE_ARROW_RE = /^->\s*(.+)$/;
   }
 });
@@ -11093,13 +11016,18 @@ function parseInfra(content) {
     }
     if (currentTagGroup && indent > 0) {
       const { text: cleanEntry, isDefault } = stripDefaultModifier(trimmed);
-      const tvMatch = cleanEntry.match(TAG_VALUE_RE);
-      if (tvMatch) {
-        const valueName = tvMatch[1].trim();
-        const rawColor = tvMatch[2]?.trim();
-        if (rawColor) {
-          resolveColorWithDiagnostic(rawColor, lineNumber, result.diagnostics);
-        }
+      const lastSpaceIdx = cleanEntry.lastIndexOf(" ");
+      let valueName = cleanEntry;
+      let rawColor;
+      if (lastSpaceIdx > 0) {
+        const trailing = cleanEntry.substring(lastSpaceIdx + 1);
+        if (isRecognizedColorName(trailing)) {
+          rawColor = trailing;
+          valueName = cleanEntry.substring(0, lastSpaceIdx).trimEnd();
+        }
+      }
+      const tvMatch = valueName.match(TAG_VALUE_RE);
+      if (tvMatch || /^\w+$/.test(valueName)) {
         currentTagGroup.values.push({
           name: valueName,
           color: rawColor
@@ -11511,9 +11439,9 @@ var init_parser8 = __esm({
     "use strict";
     init_diagnostics();
     init_description_helpers();
-    init_colors();
     init_arrows();
     init_parsing();
+    init_colors();
     init_name_normalize();
     init_tag_groups();
     init_types();
@@ -11523,7 +11451,7 @@ var init_parser8 = __esm({
     ASYNC_SIMPLE_CONNECTION_RE = /^~>\s*(.+?)\s*$/;
     DEPRECATED_FANOUT_RE = /\bx(\d+)\s*$/;
     GROUP_RE = /^\[([^\]]+)\]\s*(?:as\s+([A-Za-z][A-Za-z0-9_]{0,11})\s*)?(?:\|\s*(.+))?$/;
-    TAG_VALUE_RE = /^(\w[\w\s]*?)(?:\(([^)]+)\))?\s*$/;
+    TAG_VALUE_RE = /^(\w[\w\s]+?)\s*$/;
     COMPONENT_RE = /^(?:"([^"]+)"|([a-zA-Z_][^|":]*?))\s*(\|.*)?$/;
     PIPE_META_RE = /[|,]\s*(\w+)\s*:\s*([^|,]+)/g;
     PROPERTY_RE = /^([\w-]+)\s+(.+)$/;
@@ -12960,7 +12888,7 @@ function parsePert(content, parseOpts = {}) {
             if (!color) {
               warn(
                 lineNumber,
-                `Expected 'Value(color)' in tag group '${currentTagGroup.name}'`
+                `Expected 'Value color' in tag group '${currentTagGroup.name}'`
               );
               continue;
             }
@@ -12983,7 +12911,7 @@ function parsePert(content, parseOpts = {}) {
         if (!color) {
           warn(
             lineNumber,
-            `Expected 'Value(color)' in tag group '${currentTagGroup.name}'`
+            `Expected 'Value color' in tag group '${currentTagGroup.name}'`
           );
           continue;
         }
@@ -14532,7 +14460,7 @@ function parseMindmap(content, palette) {
         if (!color) {
           pushError(
             lineNumber,
-            `Expected 'Value(color)' in tag group '${currentTagGroup.name}'`
+            `Expected 'Value color' in tag group '${currentTagGroup.name}'`
           );
           continue;
         }
@@ -15118,7 +15046,7 @@ function parseWireframe(content) {
         } else {
           pushWarning(
             lineNumber,
-            `Expected 'Value(color)' in tag group '${currentTagGroup.name}'`
+            `Expected 'Value color' in tag group '${currentTagGroup.name}'`
           );
         }
         continue;
@@ -15735,6 +15663,13 @@ function parseCycle(content) {
         warn(lineNum, "Empty node label.");
         continue;
       }
+      if (!metadata["color"]) {
+        const { label: stripped, colorName: shortcutColor } = peelTrailingColorName(label);
+        if (shortcutColor) {
+          metadata["color"] = shortcutColor;
+          label = stripped;
+        }
+      }
       const color = metadata["color"];
       const spanStr = metadata["span"];
       let span = 1;
@@ -15964,8 +15899,12 @@ function parseJourneyMap(content, palette) {
               const key = part.substring(0, colonIdx).trim().toLowerCase();
               const value = part.substring(colonIdx + 1).trim();
               if (key === "color") {
-                const resolved = extractColor(`x(${value})`, palette);
-                personaColor = resolved.color;
+                personaColor = resolveColorWithDiagnostic(
+                  value,
+                  lineNumber,
+                  result.diagnostics,
+                  palette
+                ) ?? void 0;
               }
             }
           }
@@ -16023,7 +15962,7 @@ function parseJourneyMap(content, palette) {
         if (!color) {
           warn(
             lineNumber,
-            `Expected 'Value(color)' in tag group '${currentTagGroup.name}'`
+            `Expected 'Value color' in tag group '${currentTagGroup.name}'`
           );
           continue;
         }
@@ -16266,6 +16205,7 @@ var PHASE_RE, SCORE_RE, ANNOTATION_RE, KNOWN_OPTIONS9, KNOWN_BOOLEANS6;
 var init_parser16 = __esm({
   "src/journey-map/parser.ts"() {
     "use strict";
+    init_colors();
     init_diagnostics();
     init_tag_groups();
     init_parsing();
@@ -16364,6 +16304,13 @@ function parsePyramid(content) {
         warn(lineNum, "Empty layer label.");
         continue;
       }
+      if (!color) {
+        const { label: stripped, colorName: shortcutColor } = peelTrailingColorName(label);
+        if (shortcutColor) {
+          color = shortcutColor;
+          label = stripped;
+        }
+      }
       currentLayer = {
         label,
         lineNumber: lineNum,
@@ -16527,6 +16474,13 @@ function parseRing(content) {
         warn(lineNum, "Empty layer label.");
         continue;
       }
+      if (!color) {
+        const { label: stripped, colorName: shortcutColor } = peelTrailingColorName(label);
+        if (shortcutColor) {
+          color = shortcutColor;
+          label = stripped;
+        }
+      }
       currentLayer = {
         label,
         lineNumber: lineNum,
@@ -17021,7 +16975,7 @@ function parseRaci(content, palette) {
           if (next.length > 0 && next[0] !== " " && next[0] !== "	") break;
           const stripped = nextTrim.replace(/,\s*$/, "");
           const segments = stripped.split("|").map((s) => s.trim());
-          const roleLabel = segments[0] ?? "";
+          let roleLabel = segments[0] ?? "";
           let roleColor;
           if (segments.length > 1) {
             const meta = parsePipeMetadata(segments);
@@ -17034,6 +16988,18 @@ function parseRaci(content, palette) {
               );
             }
           }
+          if (!roleColor) {
+            const { label: stripLabel, colorName: shortcutColor } = peelTrailingColorName(roleLabel);
+            if (shortcutColor) {
+              roleColor = resolveColorWithDiagnostic(
+                shortcutColor,
+                j + 1,
+                result.diagnostics,
+                palette
+              );
+              roleLabel = stripLabel;
+            }
+          }
           if (roleLabel) getOrAddRole(roleLabel, j + 1, roleColor);
         }
         i = j - 1;
@@ -17092,8 +17058,10 @@ function parseRaci(content, palette) {
           continue;
         }
         let phaseColor;
-        if (phaseMatch[2]) {
-          const meta = parsePipeMetadata(["", phaseMatch[2]]);
+        const trailingToken = phaseMatch[2];
+        const pipeMeta = phaseMatch[3];
+        if (pipeMeta) {
+          const meta = parsePipeMetadata(["", pipeMeta]);
           if (meta["color"]) {
             phaseColor = resolveColorWithDiagnostic(
               meta["color"],
@@ -17103,6 +17071,17 @@ function parseRaci(content, palette) {
             );
           }
         }
+        if (!phaseColor && trailingToken) {
+          const { colorName } = peelTrailingColorName(`x ${trailingToken}`);
+          if (colorName) {
+            phaseColor = resolveColorWithDiagnostic(
+              colorName,
+              lineNumber,
+              result.diagnostics,
+              palette
+            );
+          }
+        }
         currentPhase = {
           id: normalizeName(display),
           displayName: display,
@@ -17333,7 +17312,7 @@ var init_parser19 = __esm({
       "no-title",
       ...Object.keys(VARIANT_LOCK_DIRECTIVES)
     ]);
-    PHASE_RE2 = /^\[(.+?)\]\s*(?:\|\s*(.+))?\s*$/;
+    PHASE_RE2 = /^\[(.+?)\](?:\s+(\S+))?(?:\s*\|\s*(.+))?\s*$/;
     ROLE_ASSIGNMENT_RE = /^([^:]+):\s*(.*)$/;
   }
 });
@@ -19049,7 +19028,7 @@ function containerFill(palette, isDark, nodeColor2) {
 function containerStroke(palette, nodeColor2) {
   return nodeColor2 ?? palette.textMuted;
 }
-function renderOrg(container, parsed, layout, palette, isDark, onClickItem, exportDims, activeTagGroup, hiddenAttributes, ancestorPath) {
+function renderOrg(container, parsed, layout, palette, isDark, onClickItem, exportDims, activeTagGroup, hiddenAttributes, ancestorPath, exportMode) {
   d3Selection.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const width = exportDims?.width ?? container.clientWidth;
   const height = exportDims?.height ?? container.clientHeight;
@@ -19309,7 +19288,7 @@ function renderOrg(container, parsed, layout, palette, isDark, onClickItem, expo
             }
           ],
           position: { placement: "top-center", titleRelation: "below-title" },
-          mode: "fixed"
+          mode: exportMode ? "export" : "preview"
         };
         const singleState = { activeGroup: lg.name };
         const groupG = legendParentBase.append("g").attr("transform", `translate(${lg.x}, ${lg.y})`);
@@ -19329,7 +19308,7 @@ function renderOrg(container, parsed, layout, palette, isDark, onClickItem, expo
       const legendConfig = {
         groups,
         position: { placement: "top-center", titleRelation: "below-title" },
-        mode: "fixed",
+        mode: exportMode ? "export" : "preview",
         capsulePillAddonWidth: eyeAddonWidth
       };
       const legendState = { activeGroup: activeTagGroup ?? null };
@@ -19796,7 +19775,6 @@ function layoutSitemap(parsed, hiddenCounts, activeTagGroup, hiddenAttributes, e
       targetId: edge.targetId,
       points,
       label: edge.label,
-      color: edge.color,
       lineNumber: edge.lineNumber,
       deferred: deferredSet.has(i) || void 0
     });
@@ -20252,7 +20230,7 @@ function containerFill2(palette, isDark, nodeColor2) {
 function containerStroke2(palette, nodeColor2) {
   return nodeColor2 ?? palette.textMuted;
 }
-function renderSitemap(container, parsed, layout, palette, isDark, onClickItem, exportDims, activeTagGroup, hiddenAttributes) {
+function renderSitemap(container, parsed, layout, palette, isDark, onClickItem, exportDims, activeTagGroup, hiddenAttributes, exportMode) {
   d3Selection2.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const width = exportDims?.width ?? container.clientWidth;
   const height = exportDims?.height ?? container.clientHeight;
@@ -20283,9 +20261,6 @@ function renderSitemap(container, parsed, layout, palette, isDark, onClickItem,
   const defs = svg.append("defs");
   defs.append("marker").attr("id", "sm-arrow").attr("viewBox", `0 0 ${ARROWHEAD_W} ${ARROWHEAD_H}`).attr("refX", ARROWHEAD_W).attr("refY", ARROWHEAD_H / 2).attr("markerWidth", ARROWHEAD_W).attr("markerHeight", ARROWHEAD_H).attr("orient", "auto").append("polygon").attr("points", `0,0 ${ARROWHEAD_W},${ARROWHEAD_H / 2} 0,${ARROWHEAD_H}`).attr("fill", palette.textMuted);
   const edgeColors = /* @__PURE__ */ new Set();
-  for (const edge of layout.edges) {
-    if (edge.color) edgeColors.add(edge.color);
-  }
   for (const color of edgeColors) {
     const id = `sm-arrow-${color.replace("#", "")}`;
     defs.append("marker").attr("id", id).attr("viewBox", `0 0 ${ARROWHEAD_W} ${ARROWHEAD_H}`).attr("refX", ARROWHEAD_W).attr("refY", ARROWHEAD_H / 2).attr("markerWidth", ARROWHEAD_W).attr("markerHeight", ARROWHEAD_H).attr("orient", "auto").append("polygon").attr("points", `0,0 ${ARROWHEAD_W},${ARROWHEAD_H / 2} 0,${ARROWHEAD_H}`).attr("fill", color);
@@ -20364,8 +20339,8 @@ function renderSitemap(container, parsed, layout, palette, isDark, onClickItem,
   for (const edge of layout.edges) {
     if (edge.points.length < 2) continue;
     const edgeG = contentG.append("g").attr("class", "sitemap-edge-group").attr("data-line-number", String(edge.lineNumber));
-    const edgeColor3 = edge.color ?? palette.textMuted;
-    const markerId = edge.color ? `sm-arrow-${edge.color.replace("#", "")}` : "sm-arrow";
+    const edgeColor3 = palette.textMuted;
+    const markerId = "sm-arrow";
     const gen = edge.deferred ? lineGeneratorLinear : lineGenerator;
     const pathD = gen(edge.points);
     if (pathD) {
@@ -20446,7 +20421,8 @@ function renderSitemap(container, parsed, layout, palette, isDark, onClickItem,
       isDark,
       activeTagGroup,
       void 0,
-      hiddenAttributes
+      hiddenAttributes,
+      exportMode
     );
   }
   if (fixedTitle) {
@@ -20471,11 +20447,12 @@ function renderSitemap(container, parsed, layout, palette, isDark, onClickItem,
       isDark,
       activeTagGroup,
       width,
-      hiddenAttributes
+      hiddenAttributes,
+      exportMode
     );
   }
 }
-function renderLegend(parent, legendGroups, palette, isDark, activeTagGroup, fixedWidth, hiddenAttributes) {
+function renderLegend(parent, legendGroups, palette, isDark, activeTagGroup, fixedWidth, hiddenAttributes, exportMode) {
   if (legendGroups.length === 0) return;
   const groups = legendGroups.map((g) => ({
     name: g.name,
@@ -20486,7 +20463,7 @@ function renderLegend(parent, legendGroups, palette, isDark, activeTagGroup, fix
   const legendConfig = {
     groups,
     position: { placement: "top-center", titleRelation: "below-title" },
-    mode: "fixed",
+    mode: exportMode ? "export" : "preview",
     capsulePillAddonWidth: eyeAddonWidth
   };
   const legendState = { activeGroup: activeTagGroup ?? null };
@@ -20772,7 +20749,7 @@ function renderKanban(container, parsed, palette, isDark, options) {
     const legendConfig = {
       groups: parsed.tagGroups,
       position: { placement: "top-center", titleRelation: "inline-with-title" },
-      mode: exportDims ? "inline" : "fixed"
+      mode: options?.exportMode ? "export" : "preview"
     };
     const legendState = { activeGroup: activeTagGroup ?? null };
     const legendG = svg.append("g").attr("class", "kanban-legend").attr("transform", `translate(${legendX},${legendY})`);
@@ -20930,7 +20907,8 @@ function renderKanbanForExport(content, theme, palette) {
   const layout = computeLayout(parsed, palette);
   const container = document.createElement("div");
   renderKanban(container, parsed, palette, isDark, {
-    exportDims: { width: layout.totalWidth, height: layout.totalHeight }
+    exportDims: { width: layout.totalWidth, height: layout.totalHeight },
+    exportMode: true
   });
   const svgEl = container.querySelector("svg");
   return svgEl?.outerHTML ?? "";
@@ -21468,7 +21446,7 @@ function markerIdForType(type) {
 function isSourceMarker(type) {
   return type === "composes" || type === "aggregates";
 }
-function renderClassDiagram(container, parsed, layout, palette, isDark, onClickItem, exportDims, legendActive) {
+function renderClassDiagram(container, parsed, layout, palette, isDark, onClickItem, exportDims, legendActive, exportMode) {
   d3Selection4.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const width = exportDims?.width ?? container.clientWidth;
   const height = exportDims?.height ?? container.clientHeight;
@@ -21530,7 +21508,7 @@ function renderClassDiagram(container, parsed, layout, palette, isDark, onClickI
     const legendConfig = {
       groups: legendGroups,
       position: { placement: "top-center", titleRelation: "below-title" },
-      mode: "fixed"
+      mode: exportMode ? "export" : "preview"
     };
     const legendState = {
       activeGroup: isLegendExpanded ? LEGEND_GROUP_NAME : null
@@ -21670,10 +21648,22 @@ function renderClassDiagramForExport(content, theme, palette) {
   const exportWidth = layout.width + DIAGRAM_PADDING4 * 2;
   const exportHeight = layout.height + DIAGRAM_PADDING4 * 2 + (parsed.title ? 40 : 0) + legendReserve;
   return runInExportContainer(exportWidth, exportHeight, (container) => {
-    renderClassDiagram(container, parsed, layout, palette, isDark, void 0, {
-      width: exportWidth,
-      height: exportHeight
-    });
+    renderClassDiagram(
+      container,
+      parsed,
+      layout,
+      palette,
+      isDark,
+      void 0,
+      {
+        width: exportWidth,
+        height: exportHeight
+      },
+      true,
+      // legendActive for export
+      true
+      // exportMode
+    );
     return extractExportSvg(container, theme);
   });
 }
@@ -22149,7 +22139,7 @@ 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, semanticColorsActive) {
+function renderERDiagram(container, parsed, layout, palette, isDark, onClickItem, exportDims, activeTagGroup, semanticColorsActive, exportMode) {
   d3Selection5.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const useSemanticColors = parsed.tagGroups.length === 0 && layout.nodes.every((n) => !n.color);
   const LEGEND_FIXED_GAP4 = 8;
@@ -22305,7 +22295,7 @@ function renderERDiagram(container, parsed, layout, palette, isDark, onClickItem
     const legendConfig = {
       groups: parsed.tagGroups,
       position: { placement: "top-center", titleRelation: "below-title" },
-      mode: "fixed"
+      mode: exportMode ? "export" : "preview"
     };
     const legendState = { activeGroup: activeTagGroup ?? null };
     const legendG = svg.append("g").attr("class", "er-tag-legend").attr("transform", `translate(0,${legendY})`);
@@ -22341,7 +22331,7 @@ function renderERDiagram(container, parsed, layout, palette, isDark, onClickItem
       const legendConfig = {
         groups: semanticGroups,
         position: { placement: "top-center", titleRelation: "below-title" },
-        mode: "fixed"
+        mode: exportMode ? "export" : "preview"
       };
       const legendState = {
         activeGroup: semanticActive ? "Role" : null
@@ -22374,10 +22364,21 @@ function renderERDiagramForExport(content, theme, palette) {
   container.style.left = "-9999px";
   document.body.appendChild(container);
   try {
-    renderERDiagram(container, parsed, layout, palette, isDark, void 0, {
-      width: exportWidth,
-      height: exportHeight
-    });
+    renderERDiagram(
+      container,
+      parsed,
+      layout,
+      palette,
+      isDark,
+      void 0,
+      {
+        width: exportWidth,
+        height: exportHeight
+      },
+      void 0,
+      void 0,
+      true
+    );
     const svgEl = container.querySelector("svg");
     if (!svgEl) return "";
     if (theme === "transparent") {
@@ -22612,7 +22613,8 @@ function renderBoxesAndLines(container, parsed, layout, palette, isDark, options
     hideDescriptions,
     controlsExpanded,
     onToggleDescriptions,
-    onToggleControlsExpand
+    onToggleControlsExpand,
+    exportMode = false
   } = options ?? {};
   d3Selection6.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const width = exportDims?.width ?? container.clientWidth;
@@ -22948,7 +22950,7 @@ function renderBoxesAndLines(container, parsed, layout, palette, isDark, options
     const legendConfig = {
       groups: parsed.tagGroups,
       position: { placement: "top-center", titleRelation: "below-title" },
-      mode: "fixed",
+      mode: exportMode ? "export" : "preview",
       controlsGroup
     };
     const legendState = {
@@ -22980,7 +22982,8 @@ function renderBoxesAndLinesForExport(container, parsed, layout, palette, isDark
   renderBoxesAndLines(container, parsed, layout, palette, isDark, {
     exportDims: options?.exportDims,
     activeTagGroup: options?.activeTagGroup,
-    hiddenTagValues: options?.hiddenTagValues
+    hiddenTagValues: options?.hiddenTagValues,
+    exportMode: options?.exportMode
   });
 }
 var d3Selection6, d3Shape4, DIAGRAM_PADDING6, NODE_FONT_SIZE, MIN_NODE_FONT_SIZE, EDGE_LABEL_FONT_SIZE4, EDGE_STROKE_WIDTH5, NODE_STROKE_WIDTH5, NODE_RX, COLLAPSE_BAR_HEIGHT3, ARROWHEAD_W2, ARROWHEAD_H2, DESC_FONT_SIZE, DESC_LINE_HEIGHT, MAX_DESC_LINES, CHAR_WIDTH_RATIO2, NODE_TEXT_PADDING, GROUP_RX, GROUP_LABEL_FONT_SIZE, GROUP_LABEL_ZONE, lineGeneratorLR, lineGeneratorTB;
@@ -24218,7 +24221,7 @@ function renderMindmap(container, parsed, layout, palette, isDark, onClickItem,
         };
       }),
       position: { placement: "top-center", titleRelation: "below-title" },
-      mode: "fixed",
+      mode: options?.exportMode ? "export" : "preview",
       controlsGroup: controlsToggles
     };
     const legendState = {
@@ -27020,7 +27023,7 @@ function drawPersonIcon(g, cx, cy, color) {
   g.append("line").attr("x1", cx).attr("y1", bodyBottomY).attr("x2", cx - PERSON_LEG_SPAN).attr("y2", legY).attr("stroke", color).attr("stroke-width", PERSON_SW);
   g.append("line").attr("x1", cx).attr("y1", bodyBottomY).attr("x2", cx + PERSON_LEG_SPAN).attr("y2", legY).attr("stroke", color).attr("stroke-width", PERSON_SW);
 }
-function renderC4Context(container, parsed, layout, palette, isDark, onClickItem, exportDims, activeTagGroup) {
+function renderC4Context(container, parsed, layout, palette, isDark, onClickItem, exportDims, activeTagGroup, exportMode) {
   d3Selection9.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const width = exportDims?.width ?? container.clientWidth;
   const height = exportDims?.height ?? container.clientHeight;
@@ -27196,7 +27199,8 @@ function renderC4Context(container, parsed, layout, palette, isDark, onClickItem
       palette,
       isDark,
       activeTagGroup,
-      fixedLegend ? width : null
+      fixedLegend ? width : null,
+      exportMode
     );
   }
 }
@@ -27551,7 +27555,7 @@ function placeEdgeLabels(labels, edges, obstacleRects) {
     placedRects.push({ x: lbl.x, y: lbl.y, w: lbl.bgW, h: lbl.bgH });
   }
 }
-function renderLegend2(parent, layout, palette, isDark, activeTagGroup, fixedWidth) {
+function renderLegend2(parent, layout, palette, isDark, activeTagGroup, fixedWidth, exportMode) {
   const groups = layout.legend.map((g) => ({
     name: g.name,
     entries: g.entries.map((e) => ({ value: e.value, color: e.color }))
@@ -27559,7 +27563,7 @@ function renderLegend2(parent, layout, palette, isDark, activeTagGroup, fixedWid
   const legendConfig = {
     groups,
     position: { placement: "top-center", titleRelation: "below-title" },
-    mode: "fixed"
+    mode: exportMode ? "export" : "preview"
   };
   const legendState = { activeGroup: activeTagGroup ?? null };
   const containerWidth = fixedWidth ?? layout.width;
@@ -27574,7 +27578,7 @@ function renderLegend2(parent, layout, palette, isDark, activeTagGroup, fixedWid
   );
   parent.selectAll("[data-legend-group]").classed("c4-legend-group", true);
 }
-function renderC4Containers(container, parsed, layout, palette, isDark, onClickItem, exportDims, activeTagGroup) {
+function renderC4Containers(container, parsed, layout, palette, isDark, onClickItem, exportDims, activeTagGroup, exportMode) {
   d3Selection9.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const width = exportDims?.width ?? container.clientWidth;
   const height = exportDims?.height ?? container.clientHeight;
@@ -27805,7 +27809,8 @@ function renderC4Containers(container, parsed, layout, palette, isDark, onClickI
       palette,
       isDark,
       activeTagGroup,
-      fixedLegend ? width : null
+      fixedLegend ? width : null,
+      exportMode
     );
   }
 }
@@ -27873,7 +27878,7 @@ function renderC4ComponentsForExport(content, systemName, containerName, theme,
     document.body.removeChild(el);
   }
 }
-function renderC4Deployment(container, parsed, layout, palette, isDark, onClickItem, exportDims, activeTagGroup) {
+function renderC4Deployment(container, parsed, layout, palette, isDark, onClickItem, exportDims, activeTagGroup, exportMode) {
   renderC4Containers(
     container,
     parsed,
@@ -27882,7 +27887,8 @@ function renderC4Deployment(container, parsed, layout, palette, isDark, onClickI
     isDark,
     onClickItem,
     exportDims,
-    activeTagGroup
+    activeTagGroup,
+    exportMode
   );
 }
 function renderC4DeploymentForExport(content, theme, palette) {
@@ -28064,7 +28070,6 @@ function layoutGraph(graph, options) {
       target: edge.target,
       points: edgeData?.points ?? [],
       label: edge.label,
-      color: edge.color,
       lineNumber: edge.lineNumber
     };
   });
@@ -28387,9 +28392,6 @@ function renderFlowchart(container, graph, layout, palette, isDark, onClickItem,
   const defs = svg.append("defs");
   defs.append("marker").attr("id", "fc-arrow").attr("viewBox", `0 0 ${ARROWHEAD_W3} ${ARROWHEAD_H3}`).attr("refX", ARROWHEAD_W3).attr("refY", ARROWHEAD_H3 / 2).attr("markerWidth", ARROWHEAD_W3).attr("markerHeight", ARROWHEAD_H3).attr("orient", "auto").append("polygon").attr("points", `0,0 ${ARROWHEAD_W3},${ARROWHEAD_H3 / 2} 0,${ARROWHEAD_H3}`).attr("fill", palette.textMuted);
   const edgeColors = /* @__PURE__ */ new Set();
-  for (const edge of layout.edges) {
-    if (edge.color) edgeColors.add(edge.color);
-  }
   for (const color of edgeColors) {
     const id = `fc-arrow-${color.replace("#", "")}`;
     defs.append("marker").attr("id", id).attr("viewBox", `0 0 ${ARROWHEAD_W3} ${ARROWHEAD_H3}`).attr("refX", ARROWHEAD_W3).attr("refY", ARROWHEAD_H3 / 2).attr("markerWidth", ARROWHEAD_W3).attr("markerHeight", ARROWHEAD_H3).attr("orient", "auto").append("polygon").attr("points", `0,0 ${ARROWHEAD_W3},${ARROWHEAD_H3 / 2} 0,${ARROWHEAD_H3}`).attr("fill", color);
@@ -28453,8 +28455,8 @@ function renderFlowchart(container, graph, layout, palette, isDark, onClickItem,
     const edge = layout.edges[ei];
     if (edge.points.length < 2) continue;
     const edgeG = contentG.append("g").attr("class", "fc-edge-group").attr("data-line-number", String(edge.lineNumber));
-    const edgeColor3 = edge.color ?? palette.textMuted;
-    const markerId = edge.color ? `fc-arrow-${edge.color.replace("#", "")}` : "fc-arrow";
+    const edgeColor3 = palette.textMuted;
+    const markerId = "fc-arrow";
     const pathD = lineGenerator5(edge.points);
     if (pathD) {
       edgeG.append("path").attr("d", pathD).attr("fill", "none").attr("stroke", edgeColor3).attr("stroke-width", EDGE_STROKE_WIDTH8).attr("marker-end", `url(#${markerId})`).attr("class", "fc-edge");
@@ -31078,7 +31080,7 @@ function computeInfraLegendGroups(nodes, tagGroups, palette, edges) {
   }
   return groups;
 }
-function renderLegend3(rootSvg, legendGroups, totalWidth, legendY, palette, isDark, activeGroup, playback) {
+function renderLegend3(rootSvg, legendGroups, totalWidth, legendY, palette, isDark, activeGroup, playback, exportMode = false) {
   if (legendGroups.length === 0 && !playback) return;
   const legendG = rootSvg.append("g").attr("transform", `translate(0, ${legendY})`);
   if (activeGroup) {
@@ -31094,7 +31096,7 @@ function renderLegend3(rootSvg, legendGroups, totalWidth, legendY, palette, isDa
   const legendConfig = {
     groups: allGroups,
     position: { placement: "top-center", titleRelation: "below-title" },
-    mode: "fixed",
+    mode: exportMode ? "export" : "preview",
     showEmptyGroups: true
   };
   const legendState = { activeGroup };
@@ -31282,7 +31284,8 @@ function renderInfra(container, layout, palette, isDark, title, titleLineNumber,
         palette,
         isDark,
         activeGroup ?? null,
-        playback ?? void 0
+        playback ?? void 0,
+        exportMode
       );
       legendSvg.selectAll(".infra-legend-group").style("pointer-events", "auto");
     } else {
@@ -31294,7 +31297,8 @@ function renderInfra(container, layout, palette, isDark, title, titleLineNumber,
         palette,
         isDark,
         activeGroup ?? null,
-        playback ?? void 0
+        playback ?? void 0,
+        exportMode
       );
     }
   }
@@ -33193,7 +33197,8 @@ function renderPert(container, resolved, layout, palette, isDark, options = {})
       x: 0,
       y: tagLegendY,
       width: exportWidth,
-      activeGroup: tagLegendActive
+      activeGroup: tagLegendActive,
+      exportMode: options.exportMode
     });
   }
   const root = svg.append("g").attr("transform", `translate(${offsetX}, ${offsetY})`);
@@ -33254,7 +33259,8 @@ function renderPertForExport(content, theme, palette, now) {
     renderPert(container, resolved, layout, palette, isDark, {
       title: hasTitle ? parsed.title : null,
       subtitle: resolved.projectSubtitle,
-      exportDims: { width: exportWidth, height: exportHeight }
+      exportDims: { width: exportWidth, height: exportHeight },
+      exportMode: true
     });
     const svgEl = container.querySelector("svg");
     if (!svgEl) return "";
@@ -34341,7 +34347,7 @@ function renderLegendBlock(svg, entries, args) {
 }
 function renderTagLegendRow(svg, resolved, palette, isDark, args) {
   if (resolved.tagGroups.length === 0) return;
-  const { x, y, width, activeGroup } = args;
+  const { x, y, width, activeGroup, exportMode } = args;
   const groups = resolved.tagGroups.map((g) => ({
     name: g.name,
     entries: g.entries.map((e) => ({ value: e.value, color: e.color }))
@@ -34352,7 +34358,7 @@ function renderTagLegendRow(svg, resolved, palette, isDark, args) {
     {
       groups,
       position: { placement: "top-center", titleRelation: "below-title" },
-      mode: "fixed"
+      mode: exportMode ? "export" : "preview"
     },
     { activeGroup },
     palette,
@@ -35792,7 +35798,8 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
             ).attr("display", active ? null : "none");
           }
           drawLegend();
-        }
+        },
+        options?.exportMode ?? false
       );
     }
   }
@@ -36581,7 +36588,7 @@ function buildControlsToggles(hasCriticalPath, criticalPathActive, hasDependenci
   }
   return toggles;
 }
-function renderTagLegend(svg, chartG, tagGroups, activeGroupName, chartLeftMargin, chartInnerWidth, legendY, palette, isDark, hasCriticalPath, criticalPathActive, _optionLineNumbers, onToggle, onToggleControlsExpand, currentSwimlaneGroup, onSwimlaneChange, legendViewMode, resolvedTasks, controlsExpanded = false, hasDependencies = false, dependenciesActive = false, onControlsToggle) {
+function renderTagLegend(svg, chartG, tagGroups, activeGroupName, chartLeftMargin, chartInnerWidth, legendY, palette, isDark, hasCriticalPath, criticalPathActive, _optionLineNumbers, onToggle, onToggleControlsExpand, currentSwimlaneGroup, onSwimlaneChange, legendViewMode, resolvedTasks, controlsExpanded = false, hasDependencies = false, dependenciesActive = false, onControlsToggle, exportMode = false) {
   let visibleGroups;
   if (activeGroupName) {
     const activeGroup = tagGroups.filter(
@@ -36676,7 +36683,7 @@ function renderTagLegend(svg, chartG, tagGroups, activeGroupName, chartLeftMargi
         placement: "top-center",
         titleRelation: "below-title"
       },
-      mode: "fixed",
+      mode: exportMode ? "export" : "preview",
       capsulePillAddonWidth: iconReserve,
       controlsGroup: controlsToggles.length > 0 ? { toggles: controlsToggles } : void 0
     };
@@ -36783,7 +36790,7 @@ function renderTagLegend(svg, chartG, tagGroups, activeGroupName, chartLeftMargi
         placement: "top-center",
         titleRelation: "below-title"
       },
-      mode: "fixed",
+      mode: exportMode ? "export" : "preview",
       controlsGroup: { toggles: controlsToggles }
     };
     const tagGroupG = legendRow.append("g");
@@ -37666,9 +37673,6 @@ function renderState(container, graph, layout, palette, isDark, onClickItem, exp
   const defs = svg.append("defs");
   defs.append("marker").attr("id", "st-arrow").attr("viewBox", `0 0 ${ARROWHEAD_W5} ${ARROWHEAD_H5}`).attr("refX", ARROWHEAD_W5).attr("refY", ARROWHEAD_H5 / 2).attr("markerWidth", ARROWHEAD_W5).attr("markerHeight", ARROWHEAD_H5).attr("orient", "auto").append("polygon").attr("points", `0,0 ${ARROWHEAD_W5},${ARROWHEAD_H5 / 2} 0,${ARROWHEAD_H5}`).attr("fill", palette.textMuted);
   const edgeColors = /* @__PURE__ */ new Set();
-  for (const edge of layout.edges) {
-    if (edge.color) edgeColors.add(edge.color);
-  }
   for (const color of edgeColors) {
     const id = `st-arrow-${color.replace("#", "")}`;
     defs.append("marker").attr("id", id).attr("viewBox", `0 0 ${ARROWHEAD_W5} ${ARROWHEAD_H5}`).attr("refX", ARROWHEAD_W5).attr("refY", ARROWHEAD_H5 / 2).attr("markerWidth", ARROWHEAD_W5).attr("markerHeight", ARROWHEAD_H5).attr("orient", "auto").append("polygon").attr("points", `0,0 ${ARROWHEAD_W5},${ARROWHEAD_H5 / 2} 0,${ARROWHEAD_H5}`).attr("fill", color);
@@ -37763,8 +37767,8 @@ function renderState(container, graph, layout, palette, isDark, onClickItem, exp
   for (let ei = 0; ei < layout.edges.length; ei++) {
     const edge = layout.edges[ei];
     const edgeG = contentG.append("g").attr("class", "st-edge-group").attr("data-line-number", String(edge.lineNumber));
-    const edgeColor3 = edge.color ?? palette.textMuted;
-    const markerId = edge.color ? `st-arrow-${edge.color.replace("#", "")}` : "st-arrow";
+    const edgeColor3 = palette.textMuted;
+    const markerId = "st-arrow";
     if (edge.source === edge.target) {
       const node = nodePositionMap.get(edge.source);
       if (node) {
@@ -38634,7 +38638,7 @@ function renderTechRadar(container, parsed, palette, isDark, onClickItem, export
         }
       ],
       position: { placement: "top-center", titleRelation: "below-title" },
-      mode: "fixed",
+      mode: options?.exportMode ? "export" : "preview",
       controlsGroup: {
         toggles: [
           {
@@ -39237,7 +39241,7 @@ function getQuadrantLabelPosition(position, cx, cy, maxRadius) {
       };
   }
 }
-function renderTechRadarForExport(container, parsed, palette, isDark, exportDims, viewState) {
+function renderTechRadarForExport(container, parsed, palette, isDark, exportDims, viewState, exportMode) {
   renderTechRadar(
     container,
     parsed,
@@ -39245,7 +39249,8 @@ function renderTechRadarForExport(container, parsed, palette, isDark, exportDims
     isDark,
     void 0,
     exportDims,
-    viewState
+    viewState,
+    { exportMode }
   );
 }
 var d3Selection16, BLIP_RADIUS2, BLIP_FONT_SIZE2, RING_LABEL_FONT_SIZE, QUADRANT_LABEL_FONT_SIZE, TITLE_FONT_SIZE3, LISTING_FONT_SIZE, LISTING_HEADER_FONT_SIZE, LISTING_TOP_MARGIN, LISTING_COL_GAP, LISTING_LINE_HEIGHT, LISTING_BLIP_R;
@@ -39624,7 +39629,7 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
         titleRelation: "inline-with-title"
       },
       titleWidth: 0,
-      mode: exportDims ? "inline" : "fixed"
+      mode: options?.exportMode ? "export" : "preview"
     };
     const legendState = { activeGroup: effectiveActiveGroup };
     const legendCallbacks = {
@@ -40337,7 +40342,8 @@ function renderJourneyMapForExport(content, theme, palette) {
   const layout = layoutJourneyMap(parsed, palette, { isDark });
   const container = document.createElement("div");
   renderJourneyMap(container, parsed, palette, isDark, {
-    exportDims: { width: layout.totalWidth, height: layout.totalHeight }
+    exportDims: { width: layout.totalWidth, height: layout.totalHeight },
+    exportMode: true
   });
   const svgEl = container.querySelector("svg");
   if (!svgEl) return "";
@@ -41103,7 +41109,7 @@ function renderCycle(container, parsed, palette, isDark, onClickItem, exportDims
     const legendConfig = {
       groups: [],
       position: { placement: "top-center", titleRelation: "below-title" },
-      mode: "fixed",
+      mode: renderOptions?.exportMode ? "export" : "preview",
       controlsGroup
     };
     const legendState = {
@@ -41287,7 +41293,7 @@ function renderCycle(container, parsed, palette, isDark, onClickItem, exportDims
     }
   }
 }
-function renderCycleForExport(container, parsed, palette, isDark, exportDims, viewState) {
+function renderCycleForExport(container, parsed, palette, isDark, exportDims, viewState, exportMode) {
   renderCycle(
     container,
     parsed,
@@ -41295,7 +41301,8 @@ function renderCycleForExport(container, parsed, palette, isDark, exportDims, vi
     isDark,
     void 0,
     exportDims,
-    viewState
+    viewState,
+    { exportMode }
   );
 }
 function resolveNodeColor5(color, palette, defaultColor) {
@@ -44219,7 +44226,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     const legendConfig = {
       groups: resolvedGroups,
       position: { placement: "top-center", titleRelation: "below-title" },
-      mode: "fixed"
+      mode: "preview"
     };
     const legendState = {
       activeGroup: activeTagGroup ?? null,
@@ -44620,7 +44627,9 @@ function parseVisualization(content, palette) {
     if (currentTimelineTagGroup && indent === 0) {
       currentTimelineTagGroup = null;
     }
-    const groupMatch = line12.match(/^\[(.+?)\](?:\s*\(([^)]+)\))?\s*$/);
+    const groupMatch = line12.match(
+      /^\[(.+?)\](?:\s+(red|orange|yellow|green|blue|purple|teal|cyan|gray|black|white))?\s*$/
+    );
     if (groupMatch) {
       if (result.type === "arc") {
         const name = groupMatch[1].trim();
@@ -44662,7 +44671,7 @@ function parseVisualization(content, palette) {
     }
     if (result.type === "arc") {
       const linkMatch = line12.match(
-        /^(.+?)\s*->\s*(.+?)(?:\(([^)]+)\))?\s*(?:\s+(-?[\d,_]+(?:\.[\d]+)?))?$/
+        /^(.+?)\s*->\s*(.+?)(?:\s+(red|orange|yellow|green|blue|purple|teal|cyan|gray|black|white))?(?:\s+(-?[\d,_]+(?:\.[\d]+)?))?$/
       );
       if (linkMatch) {
         const source = linkMatch[1].trim();
@@ -44701,7 +44710,7 @@ function parseVisualization(content, palette) {
       } else {
         if (line12.startsWith("//")) continue;
         const eraEntryMatch = line12.match(
-          /^(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s*(?:->|\u2013>)\s*(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s+(.+?)(?:\s*\(([^)]+)\))?\s*$/
+          /^(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s*(?:->|\u2013>)\s*(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s+(.+?)(?:\s+(red|orange|yellow|green|blue|purple|teal|cyan|gray|black|white))?\s*$/
         );
         if (eraEntryMatch) {
           const colorAnnotation = eraEntryMatch[4]?.trim() || null;
@@ -44729,7 +44738,7 @@ function parseVisualization(content, palette) {
       } else {
         if (line12.startsWith("//")) continue;
         const markerEntryMatch = line12.match(
-          /^(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s+(.+?)(?:\s*\(([^)]+)\))?\s*$/
+          /^(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s+(.+?)(?:\s+(red|orange|yellow|green|blue|purple|teal|cyan|gray|black|white))?\s*$/
         );
         if (markerEntryMatch) {
           const colorAnnotation = markerEntryMatch[3]?.trim() || null;
@@ -44762,7 +44771,7 @@ function parseVisualization(content, palette) {
         continue;
       }
       const eraMatch = line12.match(
-        /^era\s+(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s*(?:->|\u2013>)\s*(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s+(.+?)(?:\s*\(([^)]+)\))?\s*$/
+        /^era\s+(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s*(?:->|\u2013>)\s*(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s+(.+?)(?:\s+(red|orange|yellow|green|blue|purple|teal|cyan|gray|black|white))?\s*$/
       );
       if (eraMatch) {
         const colorAnnotation = eraMatch[4]?.trim() || null;
@@ -44781,7 +44790,7 @@ function parseVisualization(content, palette) {
         continue;
       }
       const markerMatch = line12.match(
-        /^marker\s+(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s+(.+?)(?:\s*\(([^)]+)\))?\s*$/
+        /^marker\s+(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s+(.+?)(?:\s+(red|orange|yellow|green|blue|purple|teal|cyan|gray|black|white))?\s*$/
       );
       if (markerMatch) {
         const colorAnnotation = markerMatch[3]?.trim() || null;
@@ -44902,13 +44911,11 @@ function parseVisualization(content, palette) {
         }
       }
       if (!/^(solid-fill|no-name|no-value|no-percent|no-title)$/i.test(line12)) {
-        const legacyAliasMatch = line12.match(
-          /^([^(:]+?)(?:\(([^)]+)\))?\s+alias\s+(\S+)\s*$/i
-        );
+        const legacyAliasMatch = line12.match(/^(.+?)\s+alias\s+(\S+)\s*$/i);
         if (legacyAliasMatch) {
-          const name = legacyAliasMatch[1].trim();
-          const colorName = legacyAliasMatch[2]?.trim() ?? null;
-          const aliasToken = legacyAliasMatch[3].trim();
+          const nameWithMaybeColor = legacyAliasMatch[1].trim();
+          const aliasToken = legacyAliasMatch[2].trim();
+          const { label: name, colorName } = peelTrailingColorName(nameWithMaybeColor);
           let color = null;
           if (colorName) {
             color = resolveColorWithDiagnostic(
@@ -44930,11 +44937,12 @@ function parseVisualization(content, palette) {
           continue;
         }
         const setDeclMatch = line12.match(
-          /^([^(:]+?)(?:\(([^)]+)\))?(?:\s+as\s+([A-Za-z][A-Za-z0-9_]{0,11}))?\s*$/i
+          /^(.+?)(?:\s+as\s+([A-Za-z][A-Za-z0-9_]{0,11}))?\s*$/i
         );
         if (setDeclMatch) {
-          const name = setDeclMatch[1].trim();
-          const colorName = setDeclMatch[2]?.trim() ?? null;
+          const nameWithMaybeColor = setDeclMatch[1].trim();
+          const alias = setDeclMatch[2]?.trim() ?? null;
+          const { label: name, colorName } = peelTrailingColorName(nameWithMaybeColor);
           let color = null;
           if (colorName) {
             color = resolveColorWithDiagnostic(
@@ -44944,7 +44952,6 @@ function parseVisualization(content, palette) {
               palette
             ) ?? null;
           }
-          const alias = setDeclMatch[3]?.trim() ?? null;
           result.vennSets.push({ name, alias, color, lineNumber });
           continue;
         }
@@ -44990,10 +44997,9 @@ function parseVisualization(content, palette) {
       if (quadrantMatch) {
         const position = quadrantMatch[1].toLowerCase();
         const labelPart = quadrantMatch[2].trim();
-        const labelColorMatch = labelPart.match(/^(.+?)\s*\(([^)]+)\)\s*$/);
-        const text = labelColorMatch ? labelColorMatch[1].trim() : labelPart;
-        const color = labelColorMatch ? resolveColorWithDiagnostic(
-          labelColorMatch[2].trim(),
+        const { label: text, colorName } = peelTrailingColorName(labelPart);
+        const color = colorName ? resolveColorWithDiagnostic(
+          colorName,
           lineNumber,
           result.diagnostics,
           palette
@@ -45183,10 +45189,9 @@ function parseVisualization(content, palette) {
           );
           continue;
         }
-        const colorMatch = joinedLabel.match(/^(.+?)\(([^)]+)\)\s*$/);
-        const labelPart = colorMatch ? colorMatch[1].trim() : joinedLabel;
-        const colorPart = colorMatch ? resolveColorWithDiagnostic(
-          colorMatch[2].trim(),
+        const { label: labelPart, colorName: colorWord } = peelTrailingColorName(joinedLabel);
+        const colorPart = colorWord ? resolveColorWithDiagnostic(
+          colorWord,
           lineNumber,
           result.diagnostics,
           palette
@@ -46475,7 +46480,7 @@ function makeTimelineHoverHelpers() {
     setTagAttrs
   };
 }
-function renderTimelineTagLegendOverlay(container, parsed, palette, isDark, setup, hovers, onClickItem, exportDims, swimlaneTagGroup, activeTagGroup, onTagStateChange, viewMode) {
+function renderTimelineTagLegendOverlay(container, parsed, palette, isDark, setup, hovers, onClickItem, exportDims, swimlaneTagGroup, activeTagGroup, onTagStateChange, viewMode, exportMode) {
   if (parsed.timelineTagGroups.length === 0) return;
   const { width, textColor, groupColorMap, solid } = setup;
   const { FADE_OPACITY: FADE_OPACITY3, fadeReset, fadeToTagValue } = hovers;
@@ -46546,7 +46551,7 @@ function renderTimelineTagLegendOverlay(container, parsed, palette, isDark, setu
       const centralConfig = {
         groups: centralGroups,
         position: { placement: "top-center", titleRelation: "below-title" },
-        mode: "fixed",
+        mode: exportMode ? "export" : "preview",
         capsulePillAddonWidth: iconAddon
       };
       const centralState = { activeGroup: centralActive };
@@ -47390,7 +47395,7 @@ function renderTimelineVertical(container, parsed, palette, isDark, setup, hover
     }
   }
 }
-function renderTimeline(container, parsed, palette, isDark, onClickItem, exportDims, activeTagGroup, swimlaneTagGroup, onTagStateChange, viewMode) {
+function renderTimeline(container, parsed, palette, isDark, onClickItem, exportDims, activeTagGroup, swimlaneTagGroup, onTagStateChange, viewMode, exportMode) {
   const setup = setupTimeline(
     container,
     parsed,
@@ -47465,7 +47470,8 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
     swimlaneTagGroup,
     activeTagGroup,
     onTagStateChange,
-    viewMode
+    viewMode,
+    exportMode
   );
 }
 function getRotateFn(mode) {
@@ -48562,6 +48568,7 @@ function finalizeSvgExport(container, theme, palette) {
   return svgHtml;
 }
 async function renderForExport(content, theme, palette, viewState, options) {
+  const exportMode = options?.exportMode ?? false;
   const { parseDgmoChartType: parseDgmoChartType2 } = await Promise.resolve().then(() => (init_dgmo_router(), dgmo_router_exports));
   const detectedType = parseDgmoChartType2(content);
   if (detectedType === "org") {
@@ -48603,7 +48610,9 @@ async function renderForExport(content, theme, palette, viewState, options) {
       void 0,
       { width: exportWidth, height: exportHeight },
       activeTagGroup,
-      hiddenAttributes
+      hiddenAttributes,
+      void 0,
+      exportMode
     );
     return finalizeSvgExport(container2, theme, effectivePalette2);
   }
@@ -48645,7 +48654,8 @@ async function renderForExport(content, theme, palette, viewState, options) {
       void 0,
       { width: exportWidth, height: exportHeight },
       activeTagGroup,
-      hiddenAttributes
+      hiddenAttributes,
+      exportMode
     );
     return finalizeSvgExport(container2, theme, effectivePalette2);
   }
@@ -48668,7 +48678,8 @@ async function renderForExport(content, theme, palette, viewState, options) {
       currentSwimlaneGroup: viewState?.swim ?? null,
       collapsedLanes: viewState?.cl ? new Set(viewState.cl) : void 0,
       collapsedColumns: viewState?.cc ? new Set(viewState.cc) : void 0,
-      compactMeta: viewState?.cm
+      compactMeta: viewState?.cm,
+      exportMode
     });
     return finalizeSvgExport(container2, theme, effectivePalette2);
   }
@@ -48692,7 +48703,9 @@ async function renderForExport(content, theme, palette, viewState, options) {
       effectivePalette2,
       theme === "dark",
       void 0,
-      { width: exportWidth, height: exportHeight }
+      { width: exportWidth, height: exportHeight },
+      void 0,
+      exportMode
     );
     return finalizeSvgExport(container2, theme, effectivePalette2);
   }
@@ -48722,7 +48735,8 @@ async function renderForExport(content, theme, palette, viewState, options) {
         erParsed.options["active-tag"],
         viewState?.tag ?? options?.tagGroup
       ),
-      viewState?.sem
+      viewState?.sem,
+      exportMode
     );
     return finalizeSvgExport(container2, theme, effectivePalette2);
   }
@@ -48755,7 +48769,8 @@ async function renderForExport(content, theme, palette, viewState, options) {
       {
         exportDims: { width: exportWidth, height: exportHeight },
         activeTagGroup: viewState?.tag ?? options?.tagGroup,
-        hiddenTagValues: blHiddenTagValues
+        hiddenTagValues: blHiddenTagValues,
+        exportMode
       }
     );
     return finalizeSvgExport(container2, theme, effectivePalette2);
@@ -48801,7 +48816,7 @@ async function renderForExport(content, theme, palette, viewState, options) {
       void 0,
       hideDescriptions,
       colorByDepth ? null : activeTagGroup,
-      colorByDepth ? { colorByDepth: true } : void 0
+      colorByDepth ? { colorByDepth: true, exportMode } : { exportMode }
     );
     return finalizeSvgExport(container2, theme, effectivePalette2);
   }
@@ -48864,7 +48879,8 @@ async function renderForExport(content, theme, palette, viewState, options) {
         c4Parsed.tagGroups,
         c4Parsed.options["active-tag"],
         viewState?.tag ?? options?.tagGroup
-      )
+      ),
+      exportMode
     );
     return finalizeSvgExport(container2, theme, effectivePalette2);
   }
@@ -49000,7 +49016,8 @@ async function renderForExport(content, theme, palette, viewState, options) {
           resolved.tagGroups,
           resolved.options.activeTag ?? void 0,
           viewState?.tag ?? options?.tagGroup
-        )
+        ),
+        exportMode
       },
       { width: EXPORT_W, height: EXPORT_H }
     );
@@ -49041,7 +49058,8 @@ async function renderForExport(content, theme, palette, viewState, options) {
       effectivePalette2,
       theme === "dark",
       { width: RADAR_EXPORT_W, height: RADAR_EXPORT_H },
-      viewState
+      viewState,
+      exportMode
     );
     return finalizeSvgExport(container2, theme, effectivePalette2);
   }
@@ -49061,7 +49079,8 @@ async function renderForExport(content, theme, palette, viewState, options) {
       jmLayout.totalHeight
     );
     renderJourneyMap2(container2, jmParsed, effectivePalette2, theme === "dark", {
-      exportDims: { width: jmLayout.totalWidth, height: jmLayout.totalHeight }
+      exportDims: { width: jmLayout.totalWidth, height: jmLayout.totalHeight },
+      exportMode
     });
     return finalizeSvgExport(container2, theme, effectivePalette2);
   }
@@ -49078,7 +49097,8 @@ async function renderForExport(content, theme, palette, viewState, options) {
       effectivePalette2,
       theme === "dark",
       { width: EXPORT_WIDTH, height: EXPORT_HEIGHT },
-      viewState
+      viewState,
+      exportMode
     );
     return finalizeSvgExport(container2, theme, effectivePalette2);
   }
@@ -49197,7 +49217,10 @@ async function renderForExport(content, theme, palette, viewState, options) {
         void 0,
         viewState?.tag ?? options?.tagGroup
       ),
-      viewState?.swim
+      viewState?.swim,
+      void 0,
+      void 0,
+      exportMode
     );
   } else if (parsed.type === "venn") {
     renderVenn(container, parsed, effectivePalette, isDark, void 0, dims);