@diagrammo/dgmo 0.15.1 → 0.17.0

package/dist/advanced.js

@@ -74,6 +74,9 @@ function nameMergedMessage(args) {
 function akaRemovedMessage() {
   return `'aka' is no longer supported \u2014 use the participant name directly`;
 }
+function participantTypeRemovedMessage(type) {
+  return `'${type}' is no longer supported \u2014 drop 'is a ${type}'; the participant renders as the default rectangle`;
+}
 function tagShorthandRemovedMessage(args) {
   return `Bare tag shorthand 'tag ${args.name} ${args.alias}' was removed. Use 'tag ${args.name} as ${args.alias}' instead.`;
 }
@@ -107,7 +110,15 @@ var init_diagnostics = __esm({
        * participant declaration. Forgiving normalization makes aliasing
        * unnecessary; the diagnostic directs users to the new syntax.
        */
-      AKA_REMOVED: "E_AKA_REMOVED"
+      AKA_REMOVED: "E_AKA_REMOVED",
+      /**
+       * Error: a removed sequence participant-type keyword was used in
+       * an `is a X` declaration. The 0.16.0 trim retained only
+       * `actor`/`database`/`cache`/`queue`; `service`/`frontend`/
+       * `networking`/`gateway`/`external` no longer carry semantic
+       * weight and emit this error so users drop the override.
+       */
+      PARTICIPANT_TYPE_REMOVED: "E_PARTICIPANT_TYPE_REMOVED"
     };
     ALIAS_DIAGNOSTIC_CODES = {
       /** Alias token used before its declaration (strict-ordering rule). */
@@ -138,114 +149,6 @@ var init_diagnostics = __esm({
   }
 });
 
-// src/colors.ts
-function isRecognizedColorName(name) {
-  return Object.prototype.hasOwnProperty.call(colorNames, name.toLowerCase());
-}
-function resolveColor(color, palette) {
-  if (!color) return null;
-  if (color.startsWith("#")) return null;
-  const lower = color.toLowerCase();
-  if (!isRecognizedColorName(lower)) return null;
-  if (palette) {
-    const named = palette.colors[lower];
-    if (named) return named;
-  }
-  return colorNames[lower];
-}
-function resolveColorWithDiagnostic(color, line12, diagnostics, palette) {
-  const resolved = resolveColor(color, palette);
-  if (resolved !== null) return resolved;
-  const hint = suggest(color, RECOGNIZED_COLOR_NAMES);
-  const suggestion = hint ? ` ${hint}` : "";
-  diagnostics.push(
-    makeDgmoError(
-      line12,
-      `Unknown color "${color}". Allowed: ${RECOGNIZED_COLOR_NAMES.join(", ")}.${suggestion}`,
-      "warning"
-    )
-  );
-  return void 0;
-}
-var nord, colorNames, RECOGNIZED_COLOR_NAMES, seriesColors;
-var init_colors = __esm({
-  "src/colors.ts"() {
-    "use strict";
-    init_diagnostics();
-    nord = {
-      // Polar Night (dark)
-      nord0: "#2e3440",
-      nord1: "#3b4252",
-      nord2: "#434c5e",
-      nord3: "#4c566a",
-      // Snow Storm (light)
-      nord4: "#d8dee9",
-      nord5: "#e5e9f0",
-      nord6: "#eceff4",
-      // Frost (accent blues)
-      nord7: "#8fbcbb",
-      nord8: "#88c0d0",
-      nord9: "#81a1c1",
-      nord10: "#5e81ac",
-      // Aurora (colors)
-      nord11: "#bf616a",
-      // red
-      nord12: "#d08770",
-      // orange
-      nord13: "#ebcb8b",
-      // yellow
-      nord14: "#a3be8c",
-      // green
-      nord15: "#b48ead"
-      // purple
-    };
-    colorNames = {
-      red: nord.nord11,
-      orange: nord.nord12,
-      yellow: nord.nord13,
-      green: nord.nord14,
-      blue: nord.nord10,
-      purple: nord.nord15,
-      teal: nord.nord7,
-      cyan: nord.nord8,
-      gray: nord.nord3,
-      black: nord.nord0,
-      white: nord.nord6
-    };
-    RECOGNIZED_COLOR_NAMES = Object.freeze([
-      "red",
-      "orange",
-      "yellow",
-      "green",
-      "blue",
-      "purple",
-      "teal",
-      "cyan",
-      "gray",
-      "black",
-      "white"
-    ]);
-    seriesColors = [
-      nord.nord10,
-      // blue
-      nord.nord14,
-      // green
-      nord.nord13,
-      // yellow
-      nord.nord12,
-      // orange
-      nord.nord15,
-      // purple
-      nord.nord11,
-      // red
-      nord.nord7,
-      // teal
-      nord.nord8
-      // light blue
-    ];
-  }
-});
-
 // src/utils/arrows.ts
 function validateLabelCharacters(label, lineNumber) {
   const out = [];
@@ -286,15 +189,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 {
@@ -333,7 +227,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",
@@ -695,6 +588,114 @@ var init_time_ticks = __esm({
   }
 });
 
+// src/colors.ts
+function isRecognizedColorName(name) {
+  return Object.prototype.hasOwnProperty.call(colorNames, name.toLowerCase());
+}
+function resolveColor(color, palette) {
+  if (!color) return null;
+  if (color.startsWith("#")) return null;
+  const lower = color.toLowerCase();
+  if (!isRecognizedColorName(lower)) return null;
+  if (palette) {
+    const named = palette.colors[lower];
+    if (named) return named;
+  }
+  return colorNames[lower];
+}
+function resolveColorWithDiagnostic(color, line12, diagnostics, palette) {
+  const resolved = resolveColor(color, palette);
+  if (resolved !== null) return resolved;
+  const hint = suggest(color, RECOGNIZED_COLOR_NAMES);
+  const suggestion = hint ? ` ${hint}` : "";
+  diagnostics.push(
+    makeDgmoError(
+      line12,
+      `Unknown color "${color}". Allowed: ${RECOGNIZED_COLOR_NAMES.join(", ")}.${suggestion}`,
+      "warning"
+    )
+  );
+  return void 0;
+}
+var nord, colorNames, RECOGNIZED_COLOR_NAMES, seriesColors;
+var init_colors = __esm({
+  "src/colors.ts"() {
+    "use strict";
+    init_diagnostics();
+    nord = {
+      // Polar Night (dark)
+      nord0: "#2e3440",
+      nord1: "#3b4252",
+      nord2: "#434c5e",
+      nord3: "#4c566a",
+      // Snow Storm (light)
+      nord4: "#d8dee9",
+      nord5: "#e5e9f0",
+      nord6: "#eceff4",
+      // Frost (accent blues)
+      nord7: "#8fbcbb",
+      nord8: "#88c0d0",
+      nord9: "#81a1c1",
+      nord10: "#5e81ac",
+      // Aurora (colors)
+      nord11: "#bf616a",
+      // red
+      nord12: "#d08770",
+      // orange
+      nord13: "#ebcb8b",
+      // yellow
+      nord14: "#a3be8c",
+      // green
+      nord15: "#b48ead"
+      // purple
+    };
+    colorNames = {
+      red: nord.nord11,
+      orange: nord.nord12,
+      yellow: nord.nord13,
+      green: nord.nord14,
+      blue: nord.nord10,
+      purple: nord.nord15,
+      teal: nord.nord7,
+      cyan: nord.nord8,
+      gray: nord.nord3,
+      black: nord.nord0,
+      white: nord.nord6
+    };
+    RECOGNIZED_COLOR_NAMES = Object.freeze([
+      "red",
+      "orange",
+      "yellow",
+      "green",
+      "blue",
+      "purple",
+      "teal",
+      "cyan",
+      "gray",
+      "black",
+      "white"
+    ]);
+    seriesColors = [
+      nord.nord10,
+      // blue
+      nord.nord14,
+      // green
+      nord.nord13,
+      // yellow
+      nord.nord12,
+      // orange
+      nord.nord15,
+      // purple
+      nord.nord11,
+      // red
+      nord.nord7,
+      // teal
+      nord.nord8
+      // light blue
+    ];
+  }
+});
+
 // src/palettes/registry.ts
 function isValidHex(value) {
   return /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(value);
@@ -1927,17 +1928,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
   };
 }
@@ -2070,14 +2075,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) {
@@ -2099,11 +2108,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",
@@ -2155,7 +2167,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",
@@ -2192,7 +2203,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;
     }
@@ -2224,13 +2235,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(" ");
@@ -2245,10 +2272,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 {
@@ -2376,6 +2406,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_-]*$/;
   }
@@ -2649,7 +2680,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 {
@@ -2939,7 +2970,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 render2() {
     currentLayout = computeLegendLayout(config, currentState, width);
     legendG.selectAll("*").remove();
@@ -3190,81 +3224,7 @@ var init_participant_inference = __esm({
       // Names that would incorrectly match general patterns in later groups
       { pattern: /^KeyDB$/i, type: "cache" },
       // not database (DB$ suffix)
-      { pattern: /Webhook/i, type: "external" },
-      // not frontend (Web contains)
-      { pattern: /^Upstream$/i, type: "external" },
-      // not queue (Stream$ suffix)
-      { pattern: /^Downstream$/i, type: "external" },
-      // not queue (Stream$ suffix)
-      // ── 1. Infrastructure overrides ─────────────────────────
-      // These names end in -er/-or but are NOT actors
-      { pattern: /^.*Router$/i, type: "networking" },
-      { pattern: /^.*Scheduler$/i, type: "service" },
-      { pattern: /^.*Dispatcher$/i, type: "service" },
-      { pattern: /^.*Balancer$/i, type: "networking" },
-      { pattern: /^.*Controller$/i, type: "service" },
-      { pattern: /^.*Handler$/i, type: "service" },
-      { pattern: /^.*Processor$/i, type: "service" },
-      { pattern: /^.*Connector$/i, type: "service" },
-      { pattern: /^.*Adapter$/i, type: "service" },
-      { pattern: /^.*Provider$/i, type: "service" },
-      { pattern: /^.*Manager$/i, type: "service" },
-      { pattern: /^.*Orchestrator$/i, type: "service" },
-      { pattern: /^.*Monitor$/i, type: "service" },
-      { pattern: /^.*Resolver$/i, type: "service" },
-      { pattern: /^.*Logger$/i, type: "service" },
-      { pattern: /^.*Server$/i, type: "service" },
-      { pattern: /^.*Broker$/i, type: "queue" },
-      { pattern: /^.*Worker$/i, type: "service" },
-      { pattern: /^.*Consumer$/i, type: "service" },
-      { pattern: /^.*Producer$/i, type: "service" },
-      { pattern: /^.*Publisher$/i, type: "service" },
-      { pattern: /^.*Subscriber$/i, type: "service" },
-      { pattern: /^.*Listener$/i, type: "service" },
-      // New -er/-or suffixes that are services, not actors
-      { pattern: /^.*Watcher$/i, type: "service" },
-      { pattern: /^.*Executor$/i, type: "service" },
-      { pattern: /^.*Aggregator$/i, type: "service" },
-      { pattern: /^.*Collector$/i, type: "service" },
-      { pattern: /^.*Transformer$/i, type: "service" },
-      { pattern: /^.*Validator$/i, type: "service" },
-      { pattern: /^.*Generator$/i, type: "service" },
-      { pattern: /^.*Indexer$/i, type: "service" },
-      { pattern: /^.*Crawler$/i, type: "service" },
-      { pattern: /^.*Scanner$/i, type: "service" },
-      { pattern: /^.*Parser$/i, type: "service" },
-      { pattern: /^.*Emitter$/i, type: "service" },
-      { pattern: /^.*Exporter$/i, type: "service" },
-      { pattern: /^.*Importer$/i, type: "service" },
-      { pattern: /^.*Loader$/i, type: "service" },
-      { pattern: /^.*Renderer$/i, type: "service" },
-      { pattern: /^.*Checker$/i, type: "service" },
-      { pattern: /^.*Inspector$/i, type: "service" },
-      { pattern: /^.*Encoder$/i, type: "service" },
-      { pattern: /^.*Decoder$/i, type: "service" },
-      { pattern: /^.*Notifier$/i, type: "service" },
-      // ── 2. Networking patterns ──────────────────────────────
-      { pattern: /Gateway/i, type: "networking" },
-      { pattern: /GW$/i, type: "networking" },
-      { pattern: /Proxy/i, type: "networking" },
-      { pattern: /LB$/i, type: "networking" },
-      { pattern: /LoadBalancer/i, type: "networking" },
-      { pattern: /CDN/i, type: "networking" },
-      { pattern: /Firewall/i, type: "networking" },
-      { pattern: /WAF$/i, type: "networking" },
-      { pattern: /DNS/i, type: "networking" },
-      { pattern: /Ingress/i, type: "networking" },
-      // Named products & patterns
-      { pattern: /Nginx/i, type: "networking" },
-      { pattern: /Traefik/i, type: "networking" },
-      { pattern: /Envoy/i, type: "networking" },
-      { pattern: /Istio/i, type: "networking" },
-      { pattern: /Kong/i, type: "networking" },
-      { pattern: /Akamai/i, type: "networking" },
-      { pattern: /Cloudflare/i, type: "networking" },
-      { pattern: /Mesh$/i, type: "networking" },
-      { pattern: /ServiceMesh/i, type: "networking" },
-      // ── 3. Database patterns ────────────────────────────────
+      // ── 1. Database patterns ────────────────────────────────
       { pattern: /DB$/i, type: "database" },
       { pattern: /Database/i, type: "database" },
       { pattern: /Datastore/i, type: "database" },
@@ -3298,16 +3258,15 @@ var init_participant_inference = __esm({
       { pattern: /Milvus/i, type: "database" },
       { pattern: /Presto/i, type: "database" },
       { pattern: /Table$/i, type: "database" },
-      // ── 4. Cache patterns ──────────────────────────────────
+      // ── 2. Cache patterns ──────────────────────────────────
       { pattern: /Cache/i, type: "cache" },
       { pattern: /Redis/i, type: "cache" },
       { pattern: /Memcache/i, type: "cache" },
-      // CDN already matched by networking above
       // Named products
       { pattern: /Dragonfly/i, type: "cache" },
       { pattern: /Hazelcast/i, type: "cache" },
       { pattern: /Valkey/i, type: "cache" },
-      // ── 5. Queue/Messaging patterns ─────────────────────────
+      // ── 3. Queue/Messaging patterns ─────────────────────────
       { pattern: /Queue/i, type: "queue" },
       { pattern: /MQ$/i, type: "queue" },
       { pattern: /SQS/i, type: "queue" },
@@ -3320,6 +3279,7 @@ var init_participant_inference = __esm({
       { pattern: /Stream$/i, type: "queue" },
       { pattern: /SNS/i, type: "queue" },
       { pattern: /PubSub/i, type: "queue" },
+      { pattern: /Broker$/i, type: "queue" },
       // Named products & patterns
       { pattern: /NATS/i, type: "queue" },
       { pattern: /Pulsar/i, type: "queue" },
@@ -3330,7 +3290,7 @@ var init_participant_inference = __esm({
       { pattern: /Sidekiq/i, type: "queue" },
       { pattern: /EventHub/i, type: "queue" },
       { pattern: /Channel$/i, type: "queue" },
-      // ── 6. Actor patterns ──────────────────────────────────
+      // ── 4. Actor patterns ──────────────────────────────────
       // Exact matches first
       { pattern: /^Admin$/i, type: "actor" },
       { pattern: /^User$/i, type: "actor" },
@@ -3349,98 +3309,11 @@ var init_participant_inference = __esm({
       { pattern: /^Fan$/i, type: "actor" },
       { pattern: /^Purchaser$/i, type: "actor" },
       { pattern: /^Reviewer$/i, type: "actor" },
-      // Suffix rules (after infrastructure overrides filtered above)
+      // Suffix rules
       { pattern: /User$/i, type: "actor" },
       { pattern: /Actor$/i, type: "actor" },
       { pattern: /Analyst$/i, type: "actor" },
-      { pattern: /Staff$/i, type: "actor" },
-      // ── 7. Frontend patterns ────────────────────────────────
-      { pattern: /App$/i, type: "frontend" },
-      { pattern: /Application/i, type: "frontend" },
-      { pattern: /Mobile/i, type: "frontend" },
-      { pattern: /iOS/i, type: "frontend" },
-      { pattern: /Android/i, type: "frontend" },
-      { pattern: /Web/i, type: "frontend" },
-      { pattern: /Browser/i, type: "frontend" },
-      { pattern: /Frontend/i, type: "frontend" },
-      { pattern: /UI$/i, type: "frontend" },
-      { pattern: /Dashboard/i, type: "frontend" },
-      { pattern: /CLI$/i, type: "frontend" },
-      { pattern: /Terminal/i, type: "frontend" },
-      // Frameworks & patterns
-      { pattern: /React/i, type: "frontend" },
-      { pattern: /^Vue$/i, type: "frontend" },
-      { pattern: /Angular/i, type: "frontend" },
-      { pattern: /Svelte/i, type: "frontend" },
-      { pattern: /NextJS/i, type: "frontend" },
-      { pattern: /Nuxt/i, type: "frontend" },
-      { pattern: /Remix/i, type: "frontend" },
-      { pattern: /Electron/i, type: "frontend" },
-      { pattern: /Tauri/i, type: "frontend" },
-      { pattern: /Widget$/i, type: "frontend" },
-      { pattern: /Portal/i, type: "frontend" },
-      { pattern: /Console$/i, type: "frontend" },
-      { pattern: /^SPA$/i, type: "frontend" },
-      { pattern: /^PWA$/i, type: "frontend" },
-      // ── 8. Service patterns ─────────────────────────────────
-      { pattern: /Service/i, type: "service" },
-      { pattern: /Svc$/i, type: "service" },
-      { pattern: /API$/i, type: "service" },
-      { pattern: /Lambda/i, type: "service" },
-      { pattern: /Function$/i, type: "service" },
-      { pattern: /Fn$/i, type: "service" },
-      { pattern: /Job$/i, type: "service" },
-      { pattern: /Cron/i, type: "service" },
-      { pattern: /Microservice/i, type: "service" },
-      // Auth
-      { pattern: /^Auth$/i, type: "service" },
-      { pattern: /^AuthN$/i, type: "service" },
-      { pattern: /^AuthZ$/i, type: "service" },
-      { pattern: /^SSO$/i, type: "service" },
-      { pattern: /OAuth/i, type: "service" },
-      { pattern: /^OIDC$/i, type: "service" },
-      // SaaS
-      { pattern: /Stripe/i, type: "service" },
-      { pattern: /Twilio/i, type: "service" },
-      { pattern: /SendGrid/i, type: "service" },
-      { pattern: /Mailgun/i, type: "service" },
-      // Cloud/infra
-      { pattern: /^S3$/i, type: "service" },
-      { pattern: /^Blob$/i, type: "service" },
-      { pattern: /Vercel/i, type: "service" },
-      { pattern: /Netlify/i, type: "service" },
-      { pattern: /Heroku/i, type: "service" },
-      { pattern: /Docker/i, type: "service" },
-      { pattern: /Kubernetes/i, type: "service" },
-      { pattern: /K8s/i, type: "service" },
-      { pattern: /Terraform/i, type: "service" },
-      // Security
-      { pattern: /Vault/i, type: "service" },
-      { pattern: /^HSM$/i, type: "service" },
-      { pattern: /KMS/i, type: "service" },
-      { pattern: /^IAM$/i, type: "service" },
-      // AI/ML
-      { pattern: /^LLM$/i, type: "service" },
-      { pattern: /GPT/i, type: "service" },
-      { pattern: /^Claude$/i, type: "service" },
-      { pattern: /Embedding/i, type: "service" },
-      { pattern: /Inference/i, type: "service" },
-      // Suffixes & patterns
-      { pattern: /Pipeline$/i, type: "service" },
-      { pattern: /Registry/i, type: "service" },
-      { pattern: /Engine$/i, type: "service" },
-      { pattern: /Daemon/i, type: "service" },
-      // ── 9. External patterns ────────────────────────────────
-      { pattern: /External/i, type: "external" },
-      { pattern: /Ext$/i, type: "external" },
-      { pattern: /ThirdParty/i, type: "external" },
-      { pattern: /3P$/i, type: "external" },
-      { pattern: /Vendor/i, type: "external" },
-      // Named products & patterns
-      { pattern: /Callback/i, type: "external" },
-      { pattern: /^AWS$/i, type: "external" },
-      { pattern: /^GCP$/i, type: "external" },
-      { pattern: /Azure/i, type: "external" }
+      { pattern: /Staff$/i, type: "actor" }
     ];
     RULE_COUNT = PARTICIPANT_RULES.length;
   }
@@ -3668,7 +3541,7 @@ function parseSequenceDgmo(content) {
   const pushWarning = (line12, message) => {
     result.diagnostics.push(makeDgmoError(line12, message, "warning"));
   };
-  if (!content || !content.trim()) {
+  if (!content?.trim()) {
     return fail(0, "Empty content");
   }
   const lines = content.split("\n");
@@ -3679,7 +3552,7 @@ function parseSequenceDgmo(content) {
     const fl = lines[fi].trim();
     if (!fl || fl.startsWith("//")) continue;
     const parsed = parseFirstLine(fl);
-    if (parsed && parsed.chartType === "sequence") {
+    if (parsed?.chartType === "sequence") {
       hasExplicitChart = true;
       firstLineIndex = fi;
       if (parsed.title) {
@@ -3798,7 +3671,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;
@@ -3878,7 +3751,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;
       }
@@ -3902,11 +3775,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;
@@ -3992,6 +3867,17 @@ function parseSequenceDgmo(content) {
       const id = isAMatch[1];
       const typeStr = isAMatch[2].toLowerCase();
       let remainder = isAMatch[3]?.trim() || "";
+      if (REMOVED_PARTICIPANT_TYPES.has(typeStr)) {
+        result.diagnostics.push(
+          makeDgmoError(
+            lineNumber,
+            participantTypeRemovedMessage(typeStr),
+            "error",
+            NAME_DIAGNOSTIC_CODES.PARTICIPANT_TYPE_REMOVED
+          )
+        );
+        continue;
+      }
       const participantType = VALID_PARTICIPANT_TYPES.has(
         typeStr
       ) ? typeStr : "default";
@@ -4061,7 +3947,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 });
@@ -4292,6 +4178,25 @@ function parseSequenceDgmo(content) {
       }
       continue;
     }
+    const elifMatch = trimmed.match(/^elif\b\s*(.*)$/i);
+    if (elifMatch) {
+      const tailRaw = elifMatch[1].trim();
+      const tail = tailRaw ? " " + tailRaw : "";
+      pushError(
+        lineNumber,
+        `'elif' is not a keyword. Did you mean 'else if${tail}'?`
+      );
+      continue;
+    }
+    const elseLabelMatch = trimmed.match(/^else\s+(.+)$/i);
+    if (elseLabelMatch) {
+      const tail = elseLabelMatch[1].trim();
+      pushError(
+        lineNumber,
+        `'else' does not take a label. Did you mean 'else if ${tail}'?`
+      );
+      continue;
+    }
     {
       const noteParsed = parseNoteLine(
         trimmed,
@@ -4415,7 +4320,7 @@ function looksLikeSequence(content) {
     return ARROW_PATTERN.test(trimmed);
   });
 }
-var KNOWN_SEQ_OPTIONS, KNOWN_SEQ_BOOLEANS, VALID_PARTICIPANT_TYPES, IS_A_PATTERN, POSITION_ONLY_PATTERN, COLORED_PARTICIPANT_PATTERN, GROUP_HEADING_PATTERN, GROUP_HEADING_FALLBACK, LEGACY_GROUP_PATTERN, SECTION_PATTERN, ARROW_PATTERN, NOTE_BARE, NOTE_MULTI;
+var KNOWN_SEQ_OPTIONS, KNOWN_SEQ_BOOLEANS, VALID_PARTICIPANT_TYPES, REMOVED_PARTICIPANT_TYPES, IS_A_PATTERN, POSITION_ONLY_PATTERN, COLORED_PARTICIPANT_PATTERN, GROUP_HEADING_PATTERN, GROUP_HEADING_FALLBACK, LEGACY_GROUP_PATTERN, SECTION_PATTERN, ARROW_PATTERN, NOTE_BARE, NOTE_MULTI;
 var init_parser = __esm({
   "src/sequence/parser.ts"() {
     "use strict";
@@ -4428,19 +4333,21 @@ var init_parser = __esm({
     KNOWN_SEQ_OPTIONS = /* @__PURE__ */ new Set(["active-tag"]);
     KNOWN_SEQ_BOOLEANS = /* @__PURE__ */ new Set(["activations", "solid-fill", "no-title"]);
     VALID_PARTICIPANT_TYPES = /* @__PURE__ */ new Set([
-      "service",
       "database",
       "actor",
       "queue",
-      "cache",
-      "gateway",
-      "external",
+      "cache"
+    ]);
+    REMOVED_PARTICIPANT_TYPES = /* @__PURE__ */ new Set([
+      "service",
+      "frontend",
       "networking",
-      "frontend"
+      "gateway",
+      "external"
     ]);
     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*$/;
@@ -4509,7 +4416,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;
@@ -4522,21 +4428,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;
   }
@@ -4550,11 +4448,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;
   }
@@ -4564,45 +4458,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 {};
 }
@@ -4668,13 +4531,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);
   }
@@ -4740,13 +4602,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) {
@@ -4871,7 +4727,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();
@@ -4899,7 +4754,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;
@@ -4912,21 +4766,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;
   }
@@ -4936,11 +4782,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;
   }
@@ -4948,35 +4790,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 {};
 }
@@ -5067,13 +4888,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++) {
@@ -5216,13 +5036,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;
       }
@@ -5275,7 +5089,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*$/;
   }
 });
 
@@ -5423,7 +5237,7 @@ function parseClassDiagram(content, palette) {
     if (trimmed.startsWith("//")) continue;
     if (!contentStarted && indent === 0 && i === 0) {
       const firstLine = parseFirstLine(trimmed);
-      if (firstLine && firstLine.chartType === "class") {
+      if (firstLine?.chartType === "class") {
         if (firstLine.title) {
           result.title = firstLine.title;
           result.titleLineNumber = lineNumber;
@@ -5654,7 +5468,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*/;
@@ -5824,7 +5638,7 @@ function parseERDiagram(content, palette) {
     if (trimmed.startsWith("//")) continue;
     if (!firstLineParsed && indent === 0) {
       const firstLineResult = parseFirstLine(trimmed);
-      if (firstLineResult && firstLineResult.chartType === "er") {
+      if (firstLineResult?.chartType === "er") {
         firstLineParsed = true;
         if (firstLineResult.title) {
           result.title = firstLineResult.title;
@@ -5861,7 +5675,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"
           )
         );
@@ -5973,7 +5787,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);
@@ -6059,15 +5873,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",
@@ -6085,7 +5903,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",
@@ -6165,18 +5983,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
@@ -6711,11 +6533,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
@@ -6730,7 +6553,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;
@@ -6775,11 +6598,14 @@ 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) {
+          if (dataRow2?.values.length === 1) {
             const source = sankeyStack.at(-1).name;
             const linkColor = valColorMatch?.[2] ? resolveColorWithDiagnostic(
               valColorMatch[2].trim(),
@@ -7011,7 +6837,7 @@ function parseExtendedChart(content, palette) {
       }
     }
     const dataRow = parseDataRowValues(trimmed);
-    if (dataRow && dataRow.values.length === 1) {
+    if (dataRow?.values.length === 1) {
       const { label: rawLabel, color: pointColor } = extractColor(
         dataRow.label,
         palette
@@ -9055,7 +8881,7 @@ function parseOrg(content, palette) {
   const pushWarning = (line12, message) => {
     result.diagnostics.push(makeDgmoError(line12, message, "warning"));
   };
-  if (!content || !content.trim()) {
+  if (!content?.trim()) {
     return fail(0, "No content provided");
   }
   const lines = content.split("\n");
@@ -9153,7 +8979,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;
         }
@@ -9352,7 +9178,7 @@ function parseKanban(content, palette) {
   const warn = (line12, message) => {
     result.diagnostics.push(makeDgmoError(line12, message, "warning"));
   };
-  if (!content || !content.trim()) {
+  if (!content?.trim()) {
     return fail(0, "No content provided");
   }
   const lines = content.split("\n");
@@ -9444,7 +9270,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;
         }
@@ -9487,8 +9313,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
@@ -9643,7 +9470,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([
@@ -9740,7 +9567,7 @@ function parseC4(content, palette) {
     result.error = formatDgmoError(diag);
     return result;
   };
-  if (!content || !content.trim()) {
+  if (!content?.trim()) {
     return fail(0, "No content provided");
   }
   const lines = content.split("\n");
@@ -9826,7 +9653,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;
         }
@@ -10422,7 +10249,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();
@@ -10435,27 +10262,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
     };
@@ -10508,7 +10318,7 @@ function parseSitemap(content, palette) {
   const pushWarning = (line12, message) => {
     result.diagnostics.push(makeDgmoError(line12, message, "warning"));
   };
-  if (!content || !content.trim()) {
+  if (!content?.trim()) {
     return fail(0, "No content provided");
   }
   const lines = content.split("\n");
@@ -10597,7 +10407,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;
         }
@@ -10634,7 +10444,6 @@ function parseSitemap(content, palette) {
           targetLabel: arrowInfo.target,
           targetIsGroup: arrowInfo.targetIsGroup,
           label: arrowInfo.label,
-          color: arrowInfo.color,
           lineNumber
         });
       }
@@ -10732,7 +10541,6 @@ function parseSitemap(content, palette) {
         sourceId: arrow.sourceNode.id,
         targetId: aliasHit,
         label: arrow.label,
-        color: arrow.color,
         lineNumber: arrow.lineNumber
       });
       continue;
@@ -10752,7 +10560,6 @@ function parseSitemap(content, palette) {
         sourceId: arrow.sourceNode.id,
         targetId: targetContainer.id,
         label: arrow.label,
-        color: arrow.color,
         lineNumber: arrow.lineNumber
       });
     } else {
@@ -10769,7 +10576,6 @@ function parseSitemap(content, palette) {
         sourceId: arrow.sourceNode.id,
         targetId: targetNode.id,
         label: arrow.label,
-        color: arrow.color,
         lineNumber: arrow.lineNumber
       });
     }
@@ -10859,7 +10665,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();
@@ -10867,7 +10672,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*(.+)$/;
   }
 });
@@ -11158,13 +10963,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
@@ -11576,9 +11386,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();
@@ -11588,7 +11398,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+(.+)$/;
@@ -13025,7 +12835,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;
             }
@@ -13048,7 +12858,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;
         }
@@ -13192,7 +13002,7 @@ function parsePert(content, parseOpts = {}) {
         const head = trimmed.slice(0, firstSpace).toLowerCase();
         const value = trimmed.slice(firstSpace + 1).trim();
         const hint = NEAR_DIRECTIVE_HINTS.find((h) => h.stem === head);
-        if (hint && hint.matches.test(value)) {
+        if (hint?.matches.test(value)) {
           error(
             lineNumber,
             `Unknown directive '${head}'. Did you mean '${hint.canonical}'?`,
@@ -14499,7 +14309,7 @@ function parseMindmap(content, palette) {
   const pushWarning = (line12, message) => {
     result.diagnostics.push(makeDgmoError(line12, message, "warning"));
   };
-  if (!content || !content.trim()) {
+  if (!content?.trim()) {
     return fail(0, "No content provided");
   }
   const lines = content.split("\n");
@@ -14597,7 +14407,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;
         }
@@ -14670,7 +14480,7 @@ function parseMindmap(content, palette) {
     const diag = makeDgmoError(1, "No nodes found in mindmap");
     result.diagnostics.push(diag);
     result.error = formatDgmoError(diag);
-  } else if (titleRoot && titleRoot.children.length === 0 && result.roots.length === 1 && !result.error) {
+  } else if (titleRoot?.children.length === 0 && result.roots.length === 1 && !result.error) {
   }
   return result;
 }
@@ -15129,7 +14939,7 @@ function parseWireframe(content) {
     const indent = measureIndent(line12);
     if (phase === "header") {
       const firstLineResult = parseFirstLine(trimmed);
-      if (firstLineResult && firstLineResult.chartType === "wireframe") {
+      if (firstLineResult?.chartType === "wireframe") {
         title = firstLineResult.title || null;
         titleLineNumber = lineNumber;
         continue;
@@ -15183,7 +14993,7 @@ function parseWireframe(content) {
         } else {
           pushWarning(
             lineNumber,
-            `Expected 'Value(color)' in tag group '${currentTagGroup.name}'`
+            `Expected 'Value color' in tag group '${currentTagGroup.name}'`
           );
         }
         continue;
@@ -15424,7 +15234,7 @@ function parseTechRadar(content) {
   const warn = (line12, message) => {
     result.diagnostics.push(makeDgmoError(line12, message, "warning"));
   };
-  if (!content || !content.trim()) {
+  if (!content?.trim()) {
     return fail(0, "No content provided");
   }
   function isRingName(name) {
@@ -15461,7 +15271,7 @@ function parseTechRadar(content) {
     if (trimmed.startsWith("//")) continue;
     if (!headerParsed) {
       const firstLine = parseFirstLine(trimmed);
-      if (firstLine && firstLine.chartType === "tech-radar") {
+      if (firstLine?.chartType === "tech-radar") {
         result.title = firstLine.title ?? "";
         result.titleLineNumber = lineNumber;
         headerParsed = true;
@@ -15753,7 +15563,7 @@ function parseCycle(content) {
     const indent = measureIndent(raw);
     if (!headerParsed) {
       const firstLineResult = parseFirstLine(trimmed);
-      if (firstLineResult && firstLineResult.chartType === "cycle") {
+      if (firstLineResult?.chartType === "cycle") {
         result.title = firstLineResult.title ?? "";
         result.titleLineNumber = lineNum;
         headerParsed = true;
@@ -15800,6 +15610,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;
@@ -15970,7 +15787,7 @@ function parseJourneyMap(content, palette) {
   const warn = (line12, message) => {
     result.diagnostics.push(makeDgmoError(line12, message, "warning"));
   };
-  if (!content || !content.trim()) {
+  if (!content?.trim()) {
     return fail(0, "No content provided");
   }
   const lines = content.split("\n");
@@ -16029,8 +15846,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;
               }
             }
           }
@@ -16088,7 +15909,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;
         }
@@ -16331,6 +16152,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();
@@ -16385,7 +16207,7 @@ function parsePyramid(content) {
     const indent = measureIndent(raw);
     if (!headerParsed) {
       const firstLineResult = parseFirstLine(trimmed);
-      if (firstLineResult && firstLineResult.chartType === "pyramid") {
+      if (firstLineResult?.chartType === "pyramid") {
         result.title = firstLineResult.title ?? "";
         result.titleLineNumber = lineNum;
         headerParsed = true;
@@ -16429,6 +16251,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,
@@ -16512,7 +16341,7 @@ function parseRing(content) {
     const indent = measureIndent(raw);
     if (!headerParsed) {
       const firstLineResult = parseFirstLine(trimmed);
-      if (firstLineResult && firstLineResult.chartType === "ring") {
+      if (firstLineResult?.chartType === "ring") {
         result.title = firstLineResult.title ?? "";
         result.titleLineNumber = lineNum;
         headerParsed = true;
@@ -16592,6 +16421,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,
@@ -16952,7 +16788,7 @@ function parseRaci(content, palette) {
   const errorAt = (line12, message, code) => {
     result.diagnostics.push(makeDgmoError(line12, message, "error", code));
   };
-  if (!content || !content.trim()) {
+  if (!content?.trim()) {
     return fail(0, "No content provided");
   }
   const lines = content.split("\n");
@@ -17086,7 +16922,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);
@@ -17099,6 +16935,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;
@@ -17157,8 +17005,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"],
@@ -17168,6 +17018,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,
@@ -17248,7 +17109,7 @@ function parseRaci(content, palette) {
         if (roleId === null) continue;
         if (rolesExplicit) {
           const entry = roleStore.get(roleId);
-          if (entry && entry.declaredLine === lineNumber) {
+          if (entry?.declaredLine === lineNumber) {
             const candidates = result.roleDisplayNames.filter(
               (n) => n !== entry.displayName
             );
@@ -17398,7 +17259,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*(.*)$/;
   }
 });
@@ -19115,7 +18976,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;
@@ -19375,7 +19236,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})`);
@@ -19395,7 +19256,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 };
@@ -19862,7 +19723,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
     });
@@ -20319,7 +20179,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;
@@ -20350,9 +20210,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);
@@ -20431,8 +20288,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) {
@@ -20513,7 +20370,8 @@ function renderSitemap(container, parsed, layout, palette, isDark, onClickItem,
       isDark,
       activeTagGroup,
       void 0,
-      hiddenAttributes
+      hiddenAttributes,
+      exportMode
     );
   }
   if (fixedTitle) {
@@ -20538,11 +20396,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,
@@ -20553,7 +20412,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 };
@@ -20938,7 +20797,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})`);
@@ -21096,7 +20955,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 ?? "";
@@ -21635,7 +21495,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;
@@ -21697,7 +21557,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
@@ -21837,10 +21697,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);
   });
 }
@@ -22316,7 +22188,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;
@@ -22472,7 +22344,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})`);
@@ -22508,7 +22380,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
@@ -22541,10 +22413,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") {
@@ -22779,7 +22662,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;
@@ -23115,7 +22999,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 = {
@@ -23147,7 +23031,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 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;
@@ -23606,8 +23491,7 @@ async function layoutBoxesAndLines(parsed, collapseInfo, layoutOptions) {
       const edge = parsed.edges[i];
       if (edgeParallelCounts[i] === 0) continue;
       const elkEdge = edgeById.get(`e${i}`);
-      if (!elkEdge || !elkEdge.sections || elkEdge.sections.length === 0)
-        continue;
+      if (!elkEdge?.sections || elkEdge.sections.length === 0) continue;
       const container = elkEdge.container ?? "root";
       const off = containerAbs.get(container) ?? { x: 0, y: 0 };
       const s = elkEdge.sections[0];
@@ -24384,7 +24268,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 = {
@@ -27187,7 +27071,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;
@@ -27363,7 +27247,8 @@ function renderC4Context(container, parsed, layout, palette, isDark, onClickItem
       palette,
       isDark,
       activeTagGroup,
-      fixedLegend ? width : null
+      fixedLegend ? width : null,
+      exportMode
     );
   }
 }
@@ -27718,7 +27603,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 }))
@@ -27726,7 +27611,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;
@@ -27741,7 +27626,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;
@@ -27972,7 +27857,8 @@ function renderC4Containers(container, parsed, layout, palette, isDark, onClickI
       palette,
       isDark,
       activeTagGroup,
-      fixedLegend ? width : null
+      fixedLegend ? width : null,
+      exportMode
     );
   }
 }
@@ -28040,7 +27926,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,
@@ -28049,7 +27935,8 @@ function renderC4Deployment(container, parsed, layout, palette, isDark, onClickI
     isDark,
     onClickItem,
     exportDims,
-    activeTagGroup
+    activeTagGroup,
+    exportMode
   );
 }
 function renderC4DeploymentForExport(content, theme, palette) {
@@ -28230,7 +28117,6 @@ function layoutGraph(graph, options) {
       target: edge.target,
       points: edgeData?.points ?? [],
       label: edge.label,
-      color: edge.color,
       lineNumber: edge.lineNumber
     };
   });
@@ -28532,6 +28418,8 @@ function renderNodeShape(g, node, palette, isDark, endTerminalIds, colorOff, sol
     case "document":
       renderDocument(g, node, palette, isDark, colorOff, solid);
       break;
+    default:
+      break;
   }
 }
 function renderFlowchart(container, graph, layout, palette, isDark, onClickItem, exportDims) {
@@ -28554,9 +28442,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);
@@ -28620,8 +28505,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");
@@ -31105,7 +30990,7 @@ function renderNodes(svg, nodes, palette, isDark, animate, expandedNodeIds, acti
         const badgeText = `${node.computedInstances}x`;
         g.append("text").attr("x", x + node.width - 6).attr("y", y + NODE_HEADER_HEIGHT2 / 2 + META_FONT_SIZE4 * 0.35).attr("text-anchor", "end").attr("font-family", FONT_FAMILY).attr("font-size", META_FONT_SIZE4).attr("fill", textFill).attr("data-instance-node", node.id).style("cursor", "pointer").text(badgeText);
       }
-      const showDots = activeGroup != null && activeGroup.toLowerCase() === "capabilities";
+      const showDots = activeGroup?.toLowerCase() === "capabilities";
       const roles = showDots && !node.isEdge ? inferRoles(node.properties) : [];
       if (roles.length > 0) {
         const dotY = isCollapsedGroup ? y + node.height - COLLAPSE_BAR_HEIGHT6 - NODE_PAD_BOTTOM2 / 2 : y + node.height - NODE_PAD_BOTTOM2 / 2;
@@ -31245,7 +31130,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) {
@@ -31261,7 +31146,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 };
@@ -31449,7 +31334,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 {
@@ -31461,7 +31347,8 @@ function renderInfra(container, layout, palette, isDark, title, titleLineNumber,
         palette,
         isDark,
         activeGroup ?? null,
-        playback ?? void 0
+        playback ?? void 0,
+        exportMode
       );
     }
   }
@@ -31903,7 +31790,7 @@ function analyzePert(parsed) {
   for (const e of edges) {
     if (!e.lag || e.lag.amount >= 0) continue;
     const src = activities.find((a) => a.id === e.source);
-    if (!src || !src.duration) continue;
+    if (!src?.duration) continue;
     const leadDays = -toDays(e.lag, sprintDays);
     const srcDurDays = toDays(src.duration.m, sprintDays);
     if (e.type === "FS" && leadDays > srcDurDays) {
@@ -32409,7 +32296,7 @@ function buildSummary(input) {
   const anchor = input.anchor ?? null;
   if (parsedActivities.length === 0) return null;
   if (projectMu === null) {
-    if (anchor && anchor.kind === "backward") {
+    if (anchor?.kind === "backward") {
       return [
         { text: "Expected duration: ?", level: 0 },
         { text: "P50 latest-safe start: ?", level: 0 },
@@ -32432,13 +32319,13 @@ function buildSummary(input) {
   const sigmaPositive = projectSigma !== null && projectSigma > 0;
   const showMcDetail = mc && sigmaPositive;
   const sigmaParen = showMcDetail ? ` (\xB1 ${roundForCaption(projectSigma)} ${pluralizeUnit(projectSigma, unit)})` : "";
-  if (anchor && anchor.kind === "forward") {
+  if (anchor?.kind === "forward") {
     const projectMuDays = projectMu * unitToDays(unit);
     rows.push({
       text: `Expected finish: ${addCalendarDays(anchor.date, projectMuDays)}${sigmaParen}.`,
       level: 0
     });
-  } else if (anchor && anchor.kind === "backward") {
+  } else if (anchor?.kind === "backward") {
     const projectMuDays = projectMu * unitToDays(unit);
     rows.push({
       text: `Expected start: ${addCalendarDays(anchor.date, -projectMuDays)}${sigmaParen}.`,
@@ -32457,13 +32344,13 @@ function buildSummary(input) {
       { pct: 80, days: monteCarloResult.p80 },
       { pct: 95, days: monteCarloResult.p95 }
     ];
-    if (anchor && anchor.kind === "forward") {
+    if (anchor?.kind === "forward") {
       for (const { pct, days } of percentiles) {
         const offsetDays = roundConservative(days, "forward");
         const date = addCalendarDays(anchor.date, offsetDays);
         rows.push({ text: `P${pct} finish: ${date}.`, level: 1 });
       }
-    } else if (anchor && anchor.kind === "backward") {
+    } else if (anchor?.kind === "backward") {
       for (const { pct, days } of percentiles) {
         const offsetDays = roundConservative(days, "backward");
         const date = addCalendarDays(anchor.date, -offsetDays);
@@ -32507,20 +32394,20 @@ function buildProjectSubtitle(input) {
   const sigmaPositive = projectSigma !== null && projectSigma > 0;
   const sigmaParen = sigmaPositive ? ` (\xB1 ${roundForCaption(projectSigma)})` : "";
   if (projectMu === null) {
-    if (anchor && anchor.kind === "forward") {
+    if (anchor?.kind === "forward") {
       return `Expected finish: ? \xB7 \u2248 ? ${pluralizeUnit(2, unit)} of work`;
     }
-    if (anchor && anchor.kind === "backward") {
+    if (anchor?.kind === "backward") {
       return `Expected start: ? \xB7 \u2248 ? ${pluralizeUnit(2, unit)} lead time`;
     }
     return `\u2248 ? ${pluralizeUnit(2, unit)}`;
   }
   const muStr = `${roundForCaption(projectMu)} ${pluralizeUnit(projectMu, unit)}`;
-  if (anchor && anchor.kind === "forward") {
+  if (anchor?.kind === "forward") {
     const projectMuDays = projectMu * unitToDays(unit);
     return `Expected finish: ${addCalendarDays(anchor.date, projectMuDays)} \xB7 \u2248 ${muStr} of work${sigmaParen}`;
   }
-  if (anchor && anchor.kind === "backward") {
+  if (anchor?.kind === "backward") {
     const projectMuDays = projectMu * unitToDays(unit);
     return `Expected start: ${addCalendarDays(anchor.date, -projectMuDays)} \xB7 \u2248 ${muStr} lead time${sigmaParen}`;
   }
@@ -32711,7 +32598,7 @@ function computeNodeSizing(resolved) {
   return { activityWidth, milestoneWidth, outerColW, midColW };
 }
 function nodeDimensions(resolved, id, sizing, overrides) {
-  if (overrides && overrides[id]) {
+  if (overrides?.[id]) {
     return { width: overrides[id].width, height: overrides[id].height };
   }
   const r = resolved.activities.find((a) => a.activity.id === id);
@@ -33363,7 +33250,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})`);
@@ -33424,7 +33312,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 "";
@@ -34511,7 +34400,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 }))
@@ -34522,7 +34411,7 @@ function renderTagLegendRow(svg, resolved, palette, isDark, args) {
     {
       groups,
       position: { placement: "top-center", titleRelation: "below-title" },
-      mode: "fixed"
+      mode: exportMode ? "export" : "preview"
     },
     { activeGroup },
     palette,
@@ -35962,7 +35851,8 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
             ).attr("display", active ? null : "none");
           }
           drawLegend();
-        }
+        },
+        options?.exportMode ?? false
       );
     }
   }
@@ -36751,7 +36641,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(
@@ -36846,7 +36736,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
     };
@@ -36953,7 +36843,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");
@@ -37836,9 +37726,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);
@@ -37933,8 +37820,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) {
@@ -39023,7 +38910,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: [
           {
@@ -39626,7 +39513,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,
@@ -39634,7 +39521,8 @@ function renderTechRadarForExport(container, parsed, palette, isDark, exportDims
     isDark,
     void 0,
     exportDims,
-    viewState
+    viewState,
+    { exportMode }
   );
 }
 var 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;
@@ -40014,7 +39902,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 = {
@@ -40727,7 +40615,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 "";
@@ -41492,7 +41381,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 = {
@@ -41676,7 +41565,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,
@@ -41684,7 +41573,8 @@ function renderCycleForExport(container, parsed, palette, isDark, exportDims, vi
     isDark,
     void 0,
     exportDims,
-    viewState
+    viewState,
+    { exportMode }
   );
 }
 function resolveNodeColor5(color, palette, defaultColor) {
@@ -43314,9 +43204,6 @@ function wrapLabelWords(words) {
 function renderRectParticipant(g, palette, isDark, color, solid) {
   g.append("rect").attr("x", -W / 2).attr("y", 0).attr("width", W).attr("height", H).attr("rx", 2).attr("ry", 2).attr("fill", fill(palette, isDark, color, solid)).attr("stroke", stroke(palette, color)).attr("stroke-width", SW);
 }
-function renderServiceParticipant(g, palette, isDark, color, solid) {
-  g.append("rect").attr("x", -W / 2).attr("y", 0).attr("width", W).attr("height", H).attr("rx", SERVICE_BORDER_RADIUS).attr("ry", SERVICE_BORDER_RADIUS).attr("fill", fill(palette, isDark, color, solid)).attr("stroke", stroke(palette, color)).attr("stroke-width", SW);
-}
 function renderActorParticipant(g, palette, color) {
   const headR = 8;
   const cx = 0;
@@ -43371,31 +43258,6 @@ function renderCacheParticipant(g, palette, isDark, color, solid) {
   g.append("line").attr("x1", W / 2).attr("y1", topY).attr("x2", W / 2).attr("y2", topY + bodyH).attr("stroke", s).attr("stroke-width", SW).attr("stroke-dasharray", dash);
   g.append("ellipse").attr("cx", 0).attr("cy", topY).attr("rx", W / 2).attr("ry", ry).attr("fill", f).attr("stroke", s).attr("stroke-width", SW).attr("stroke-dasharray", dash);
 }
-function renderNetworkingParticipant(g, palette, isDark, color, solid) {
-  const inset = 16;
-  const points = [
-    `${-W / 2 + inset},0`,
-    `${W / 2 - inset},0`,
-    `${W / 2},${H / 2}`,
-    `${W / 2 - inset},${H}`,
-    `${-W / 2 + inset},${H}`,
-    `${-W / 2},${H / 2}`
-  ].join(" ");
-  g.append("polygon").attr("points", points).attr("fill", fill(palette, isDark, color, solid)).attr("stroke", stroke(palette, color)).attr("stroke-width", SW);
-}
-function renderFrontendParticipant(g, palette, isDark, color, solid) {
-  const screenH = H - 10;
-  const s = stroke(palette, color);
-  g.append("rect").attr("x", -W / 2).attr("y", 0).attr("width", W).attr("height", screenH).attr("rx", 3).attr("ry", 3).attr("fill", fill(palette, isDark, color, solid)).attr("stroke", s).attr("stroke-width", SW);
-  g.append("line").attr("x1", 0).attr("y1", screenH).attr("x2", 0).attr("y2", H - 2).attr("stroke", s).attr("stroke-width", SW);
-  g.append("line").attr("x1", -14).attr("y1", H - 2).attr("x2", 14).attr("y2", H - 2).attr("stroke", s).attr("stroke-width", SW);
-}
-function renderExternalParticipant(g, palette, isDark, color, solid) {
-  g.append("rect").attr("x", -W / 2).attr("y", 0).attr("width", W).attr("height", H).attr("rx", 2).attr("ry", 2).attr("fill", fill(palette, isDark, color, solid)).attr("stroke", stroke(palette, color)).attr("stroke-width", SW).attr("stroke-dasharray", "6 3");
-}
-function renderGatewayParticipant(g, palette, isDark, color, _solid) {
-  renderRectParticipant(g, palette, isDark, color);
-}
 function groupMessagesBySection(elements, messages) {
   const groups = [];
   let currentGroup = null;
@@ -44034,7 +43896,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     }
   }
   const lastStep = renderSteps[renderSteps.length - 1];
-  const lastIsSelfCall = lastStep && lastStep.type === "call" && lastStep.from === lastStep.to;
+  const lastIsSelfCall = lastStep?.type === "call" && lastStep.from === lastStep.to;
   const lastStepTrailing = lastIsSelfCall ? SELF_CALL_HEIGHT + 25 : stepSpacing;
   let contentBottomY = renderSteps.length > 0 ? Math.max(
     stepYPositions[stepYPositions.length - 1] + lastStepTrailing,
@@ -44208,6 +44070,9 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
   const FRAME_PADDING_X = 30;
   const FRAME_PADDING_BOTTOM = 15;
   const FRAME_LABEL_HEIGHT = 18;
+  const SELF_ARROW_PROJECTION = ACTIVATION_WIDTH / 2 + SELF_CALL_WIDTH;
+  const SELF_ARROW_FRAME_PAD = 10;
+  const frameRightmostX = Math.max(...Array.from(participantX.values()));
   const collectMsgIndices = (els) => {
     const indices = [];
     for (const el of els) {
@@ -44274,16 +44139,40 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
           maxPX = Math.max(maxPX, px);
         }
       }
-      const frameX = minPX - FRAME_PADDING_X;
+      let extraLeft = 0;
+      let extraRight = 0;
+      let maxStepIsSelfCall = false;
+      for (const mi of allIndices) {
+        const m = messages[mi];
+        if (m.from === m.to) {
+          const px = participantX.get(m.from);
+          if (px !== void 0) {
+            const flipLeft = px === frameRightmostX;
+            if (flipLeft) {
+              const loopMin = px - SELF_ARROW_PROJECTION;
+              const need = minPX - FRAME_PADDING_X - loopMin + SELF_ARROW_FRAME_PAD;
+              if (need > 0) extraLeft = Math.max(extraLeft, need);
+            } else {
+              const loopMax = px + SELF_ARROW_PROJECTION;
+              const need = loopMax - (maxPX + FRAME_PADDING_X) + SELF_ARROW_FRAME_PAD;
+              if (need > 0) extraRight = Math.max(extraRight, need);
+            }
+          }
+          if (msgToLastStep.get(mi) === maxStep) {
+            maxStepIsSelfCall = true;
+          }
+        }
+      }
+      const frameX = minPX - FRAME_PADDING_X - extraLeft;
       const frameY = stepY(minStep) - FRAME_PADDING_TOP;
-      const frameW = maxPX - minPX + FRAME_PADDING_X * 2;
-      const frameH = stepY(maxStep) - stepY(minStep) + FRAME_PADDING_TOP + FRAME_PADDING_BOTTOM;
+      const frameW = maxPX - minPX + FRAME_PADDING_X * 2 + extraLeft + extraRight;
+      const frameH = stepY(maxStep) - stepY(minStep) + FRAME_PADDING_TOP + FRAME_PADDING_BOTTOM + (maxStepIsSelfCall ? SELF_CALL_HEIGHT : 0);
       svg.append("rect").attr("x", frameX).attr("y", frameY).attr("width", frameW).attr("height", frameH).attr("fill", "none").attr("stroke", palette.textMuted).attr("stroke-width", 1).attr("stroke-dasharray", "2 3").attr("rx", 3).attr("ry", 3).attr("class", "block-frame").attr("data-block-line", String(el.lineNumber));
       deferredLabels.push({
         x: frameX + 6,
         y: frameY + FRAME_LABEL_HEIGHT - 4,
         text: `${el.type} ${el.label}`,
-        bold: true,
+        bold: false,
         italic: false,
         blockLine: el.lineNumber
       });
@@ -44309,7 +44198,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
               y: dividerY + 14,
               text: `else if ${branchData.label}`,
               bold: false,
-              italic: true,
+              italic: false,
               blockLine: branchData.lineNumber
             });
           }
@@ -44336,7 +44225,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
             y: dividerY + 14,
             text: "else",
             bold: false,
-            italic: true,
+            italic: false,
             blockLine: el.elseLineNumber
           });
         }
@@ -44406,7 +44295,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     return side === "right" ? px + ACTIVATION_WIDTH / 2 + offset : px - ACTIVATION_WIDTH / 2 + offset;
   };
   const leftmostX = Math.min(...Array.from(participantX.values()));
-  const rightmostX = Math.max(...Array.from(participantX.values()));
+  const rightmostX = frameRightmostX;
   const sectionLineX1 = leftmostX - PARTICIPANT_BOX_WIDTH / 2 - 10;
   const sectionLineX2 = rightmostX + PARTICIPANT_BOX_WIDTH / 2 + 10;
   for (const region of sectionRegions) {
@@ -44608,7 +44497,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,
@@ -44665,27 +44554,12 @@ function renderParticipant(svg, participant, cx, cy, palette, isDark, color, tag
     case "database":
       renderDatabaseParticipant(g, palette, isDark, color, solid);
       break;
-    case "service":
-      renderServiceParticipant(g, palette, isDark, color, solid);
-      break;
     case "queue":
       renderQueueParticipant(g, palette, isDark, color, solid);
       break;
     case "cache":
       renderCacheParticipant(g, palette, isDark, color, solid);
       break;
-    case "networking":
-      renderNetworkingParticipant(g, palette, isDark, color, solid);
-      break;
-    case "frontend":
-      renderFrontendParticipant(g, palette, isDark, color, solid);
-      break;
-    case "external":
-      renderExternalParticipant(g, palette, isDark, color, solid);
-      break;
-    case "gateway":
-      renderGatewayParticipant(g, palette, isDark, color, solid);
-      break;
     default:
       renderRectParticipant(g, palette, isDark, color, solid);
       break;
@@ -44713,7 +44587,7 @@ function renderParticipant(svg, participant, cx, cy, palette, isDark, color, tag
     });
   }
 }
-var PARTICIPANT_GAP, PARTICIPANT_BOX_WIDTH, PARTICIPANT_BOX_HEIGHT, TOP_MARGIN, TITLE_HEIGHT8, PARTICIPANT_Y_OFFSET, SERVICE_BORDER_RADIUS, MESSAGE_START_OFFSET, LIFELINE_TAIL, ARROWHEAD_SIZE, NOTE_MAX_W, NOTE_FOLD, NOTE_PAD_H, NOTE_PAD_V, NOTE_FONT_SIZE, NOTE_LINE_H, NOTE_GAP, NOTE_CHAR_W, NOTE_CHARS_PER_LINE, ACTIVATION_WIDTH, SELF_CALL_HEIGHT, SELF_CALL_WIDTH, NOTE_LANE_MAX, LABEL_CHAR_WIDTH, LABEL_MAX_CHARS, fill, stroke, SW, W, H;
+var PARTICIPANT_GAP, PARTICIPANT_BOX_WIDTH, PARTICIPANT_BOX_HEIGHT, TOP_MARGIN, TITLE_HEIGHT8, PARTICIPANT_Y_OFFSET, MESSAGE_START_OFFSET, LIFELINE_TAIL, ARROWHEAD_SIZE, NOTE_MAX_W, NOTE_FOLD, NOTE_PAD_H, NOTE_PAD_V, NOTE_FONT_SIZE, NOTE_LINE_H, NOTE_GAP, NOTE_CHAR_W, NOTE_CHARS_PER_LINE, ACTIVATION_WIDTH, SELF_CALL_HEIGHT, SELF_CALL_WIDTH, NOTE_LANE_MAX, LABEL_CHAR_WIDTH, LABEL_MAX_CHARS, fill, stroke, SW, W, H;
 var init_renderer19 = __esm({
   "src/sequence/renderer.ts"() {
     "use strict";
@@ -44734,7 +44608,6 @@ var init_renderer19 = __esm({
     TOP_MARGIN = 20;
     TITLE_HEIGHT8 = 30;
     PARTICIPANT_Y_OFFSET = 10;
-    SERVICE_BORDER_RADIUS = 10;
     MESSAGE_START_OFFSET = 30;
     LIFELINE_TAIL = 30;
     ARROWHEAD_SIZE = 8;
@@ -44931,7 +44804,7 @@ function parseVisualization(content, palette) {
   const warn = (line12, message) => {
     result.diagnostics.push(makeDgmoError(line12, message, "warning"));
   };
-  if (!content || !content.trim()) {
+  if (!content?.trim()) {
     return fail(0, "Empty content");
   }
   const lines = content.split("\n");
@@ -45013,7 +44886,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();
@@ -45055,7 +44930,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();
@@ -45094,7 +44969,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;
@@ -45122,7 +44997,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;
@@ -45155,7 +45030,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;
@@ -45174,7 +45049,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;
@@ -45295,13 +45170,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(
@@ -45323,11 +45196,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(
@@ -45337,7 +45211,6 @@ function parseVisualization(content, palette) {
               palette
             ) ?? null;
           }
-          const alias = setDeclMatch[3]?.trim() ?? null;
           result.vennSets.push({ name, alias, color, lineNumber });
           continue;
         }
@@ -45383,10 +45256,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
@@ -45576,10 +45448,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
@@ -46868,7 +46739,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;
@@ -46939,7 +46810,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 };
@@ -46973,7 +46844,7 @@ function renderTimelineTagLegendOverlay(container, parsed, palette, isDark, setu
           const groupKey = groupName.toLowerCase();
           groupEl.attr("data-tag-group", groupKey);
           if (isActive && !viewMode) {
-            const isSwimActive = currentSwimlaneGroup != null && currentSwimlaneGroup.toLowerCase() === groupKey;
+            const isSwimActive = currentSwimlaneGroup?.toLowerCase() === groupKey;
             const pillWidth3 = measureLegendText(groupName, LG_PILL_FONT_SIZE) + LG_PILL_PAD;
             const pillXOff = LG_CAPSULE_PAD;
             const iconX = pillXOff + pillWidth3 + 5;
@@ -47783,7 +47654,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,
@@ -47858,7 +47729,8 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
     swimlaneTagGroup,
     activeTagGroup,
     onTagStateChange,
-    viewMode
+    viewMode,
+    exportMode
   );
 }
 function getRotateFn(mode) {
@@ -49002,6 +48874,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") {
@@ -49043,7 +48916,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);
   }
@@ -49085,7 +48960,8 @@ async function renderForExport(content, theme, palette, viewState, options) {
       void 0,
       { width: exportWidth, height: exportHeight },
       activeTagGroup,
-      hiddenAttributes
+      hiddenAttributes,
+      exportMode
     );
     return finalizeSvgExport(container2, theme, effectivePalette2);
   }
@@ -49108,7 +48984,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);
   }
@@ -49132,7 +49009,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);
   }
@@ -49162,7 +49041,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);
   }
@@ -49195,7 +49075,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);
@@ -49241,7 +49122,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);
   }
@@ -49304,7 +49185,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);
   }
@@ -49440,7 +49322,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 }
     );
@@ -49481,7 +49364,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);
   }
@@ -49501,7 +49385,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);
   }
@@ -49518,7 +49403,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);
   }
@@ -49637,7 +49523,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);
@@ -51358,7 +51247,11 @@ init_parser8();
 init_parser2();
 init_parser10();
 init_parsing();
+init_colors();
 init_chart_types();
+var RECOGNIZED_COLOR_SET2 = new Set(
+  RECOGNIZED_COLOR_NAMES
+);
 var extractorRegistry = /* @__PURE__ */ new Map();
 function registerExtractor(kind, fn) {
   extractorRegistry.set(kind, fn);
@@ -51845,20 +51738,7 @@ var CHART_TYPES = [...ALL_CHART_TYPES].filter((t) => t !== "multi-line").map((na
   description: CHART_TYPE_DESCRIPTIONS2[name] ?? name
 }));
 var ENTITY_TYPES = /* @__PURE__ */ new Map([
-  [
-    "sequence",
-    [
-      "service",
-      "database",
-      "actor",
-      "queue",
-      "cache",
-      "gateway",
-      "external",
-      "networking",
-      "frontend"
-    ]
-  ],
+  ["sequence", ["actor", "database", "queue", "cache"]],
   [
     "c4",
     ["person", "system", "container", "component", "external", "database"]
@@ -52127,8 +52007,8 @@ function extractTagDeclarations(docText) {
     }
     if (currentAlias !== null && raw.length > 0 && (raw[0] === " " || raw[0] === "	")) {
       if (trimmed && !trimmed.startsWith("//")) {
-        const colorIdx = trimmed.indexOf("(");
-        const value = colorIdx > 0 ? trimmed.substring(0, colorIdx).trim() : trimmed;
+        const lastSpaceIdx = trimmed.lastIndexOf(" ");
+        const value = lastSpaceIdx > 0 && RECOGNIZED_COLOR_SET2.has(trimmed.substring(lastSpaceIdx + 1)) ? trimmed.substring(0, lastSpaceIdx).trim() : trimmed;
         if (value) currentValues.push(value);
       }
       continue;
@@ -52679,7 +52559,6 @@ export {
   looksLikeSitemap,
   looksLikeState,
   makeDgmoError,
-  matchColorParens,
   matchesContiguously,
   measurePertAnalysisBlock,
   mix,