@diagrammo/dgmo 0.15.1 → 0.17.0

package/dist/auto.cjs

@@ -418,6 +418,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.`;
 }
@@ -451,7 +454,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). */
@@ -1822,17 +1833,21 @@ function measureIndent(line12) {
   return indent;
 }
 function extractColor(label, palette, diagnostics, line12) {
-  const m = label.match(COLOR_SUFFIX_RE);
-  if (!m) return { label };
-  const colorName = m[1].trim();
+  const lastSpaceIdx = Math.max(
+    label.lastIndexOf(" "),
+    label.lastIndexOf("	")
+  );
+  if (lastSpaceIdx < 0) return { label };
+  const trailing = label.substring(lastSpaceIdx + 1);
+  if (!RECOGNIZED_COLOR_SET.has(trailing)) return { label };
   let color;
   if (diagnostics && line12 !== void 0) {
-    color = resolveColorWithDiagnostic(colorName, line12, diagnostics, palette);
+    color = resolveColorWithDiagnostic(trailing, line12, diagnostics, palette);
   } else {
-    color = resolveColor(colorName, palette) ?? void 0;
+    color = resolveColor(trailing, palette) ?? void 0;
   }
   return {
-    label: label.substring(0, m.index).trim(),
+    label: label.substring(0, lastSpaceIdx).trimEnd(),
     color
   };
 }
@@ -1965,14 +1980,18 @@ function parseSeriesNames(value, lines, lineIndex, palette, diagnostics) {
   }
   return { series, names, nameColors, nameLineNumbers, newIndex };
 }
-function inferArrowColor(label) {
-  const lower = label.toLowerCase();
-  if (lower === "yes" || lower === "success" || lower === "ok" || lower === "true")
-    return "green";
-  if (lower === "no" || lower === "fail" || lower === "error" || lower === "false")
-    return "red";
-  if (lower === "maybe" || lower === "warning") return "orange";
-  return void 0;
+function peelTrailingColorName(label) {
+  const lastSpaceIdx = Math.max(
+    label.lastIndexOf(" "),
+    label.lastIndexOf("	")
+  );
+  if (lastSpaceIdx < 0) return { label };
+  const trailing = label.substring(lastSpaceIdx + 1);
+  if (!RECOGNIZED_COLOR_SET.has(trailing)) return { label };
+  return {
+    label: label.substring(0, lastSpaceIdx).trimEnd(),
+    colorName: trailing
+  };
 }
 function parsePipeMetadata(segments, aliasMap = /* @__PURE__ */ new Map(), errorMultiplePipes) {
   if (segments.length > 2) {
@@ -1994,11 +2013,14 @@ function parsePipeMetadata(segments, aliasMap = /* @__PURE__ */ new Map(), error
   }
   return metadata;
 }
-var ALL_CHART_TYPES, PIPE_KEY_VALUE_PREFIX_RE, PIPE_LIKELY_STRUCTURED_TAIL_RE, COLOR_SUFFIX_RE, OPTION_NOCOLON_RE, GLOBAL_BOOLEANS, MULTIPLE_PIPE_ERROR;
+var RECOGNIZED_COLOR_SET, ALL_CHART_TYPES, PIPE_KEY_VALUE_PREFIX_RE, PIPE_LIKELY_STRUCTURED_TAIL_RE, OPTION_NOCOLON_RE, GLOBAL_BOOLEANS, MULTIPLE_PIPE_ERROR;
 var init_parsing = __esm({
   "src/utils/parsing.ts"() {
     "use strict";
     init_colors();
+    RECOGNIZED_COLOR_SET = new Set(
+      RECOGNIZED_COLOR_NAMES
+    );
     ALL_CHART_TYPES = /* @__PURE__ */ new Set([
       // data charts
       "bar",
@@ -2050,7 +2072,6 @@ var init_parsing = __esm({
     ]);
     PIPE_KEY_VALUE_PREFIX_RE = /^\s*[A-Za-z][A-Za-z0-9_-]*\s*:/;
     PIPE_LIKELY_STRUCTURED_TAIL_RE = /,\s*[A-Za-z][A-Za-z0-9_-]*\s*:/;
-    COLOR_SUFFIX_RE = /\(([^)]+)\)\s*$/;
     OPTION_NOCOLON_RE = /^([a-z][a-z0-9-]*)\s+(.+)$/i;
     GLOBAL_BOOLEANS = /* @__PURE__ */ new Set([
       "solid-fill",
@@ -2087,7 +2108,7 @@ function parseTagDeclaration(line12) {
   let restStartIdx = 1;
   let valueStart = tokens.length;
   for (let i = 1; i < tokens.length; i++) {
-    if (tokens[i].includes("(")) {
+    if (tokens[i].includes(",")) {
       valueStart = i;
       break;
     }
@@ -2119,13 +2140,29 @@ function parseTagDeclaration(line12) {
       restStartIdx = valueStart;
     }
   } else {
-    if (tokens[0][0] === '"' || tokens[0][0] === "'") {
-      if (tokens.length > 1 && isAliasToken(tokens[1]) && valueStart > 1) {
+    const isColorWord = (s) => RECOGNIZED_COLOR_NAMES.includes(s);
+    if (valueStart < tokens.length) {
+      const commaTokenIdx = valueStart;
+      const lastBeforeComma = tokens[commaTokenIdx].replace(/,$/, "");
+      const firstValueStart = isColorWord(lastBeforeComma) ? commaTokenIdx - 1 : commaTokenIdx;
+      const prefixEnd = firstValueStart;
+      const aliasCandidate = prefixEnd > 1 ? tokens[prefixEnd - 1] : void 0;
+      if (aliasCandidate && isAliasToken(aliasCandidate) && !isColorWord(aliasCandidate)) {
+        alias = aliasCandidate;
+        legacyForm = "bare-shorthand";
+        name = tokens.slice(0, prefixEnd - 1).map((t) => stripQuotes(t)).join(" ");
+        restStartIdx = prefixEnd;
+      } else {
+        name = tokens.slice(0, prefixEnd).map((t) => stripQuotes(t)).join(" ");
+        restStartIdx = prefixEnd;
+      }
+    } else if (tokens[0][0] === '"' || tokens[0][0] === "'") {
+      if (tokens.length > 1 && isAliasToken(tokens[1]) && !isColorWord(tokens[1])) {
         alias = tokens[1];
         legacyForm = "bare-shorthand";
         restStartIdx = 2;
       }
-    } else if (valueStart > 1 && isAliasToken(tokens[valueStart - 1])) {
+    } else if (valueStart > 1 && isAliasToken(tokens[valueStart - 1]) && !isColorWord(tokens[valueStart - 1])) {
       alias = tokens[valueStart - 1];
       legacyForm = "bare-shorthand";
       name = tokens.slice(0, valueStart - 1).map((t) => stripQuotes(t)).join(" ");
@@ -2140,10 +2177,13 @@ function parseTagDeclaration(line12) {
     inlineValues = valueStr.split(",").map((v) => v.trim()).filter(Boolean);
   }
   if (!inlineValues || inlineValues.length === 0) {
-    const colorMatch = name.match(/\(([^)]+)\)\s*$/);
-    if (colorMatch) {
-      colorHint = colorMatch[1];
-      name = name.substring(0, colorMatch.index).trim();
+    const lastSpaceIdx = name.lastIndexOf(" ");
+    if (lastSpaceIdx > 0) {
+      const trailing = name.substring(lastSpaceIdx + 1);
+      if (RECOGNIZED_COLOR_NAMES.includes(trailing)) {
+        colorHint = trailing;
+        name = name.substring(0, lastSpaceIdx).trimEnd();
+      }
     }
   }
   return {
@@ -2271,6 +2311,7 @@ var init_tag_groups = __esm({
     "use strict";
     init_parsing();
     init_diagnostics();
+    init_colors();
     TAG_BLOCK_NOCOLON_RE = /^tag\s+/i;
     VALID_TAG_IDENT_RE = /^[A-Za-z_][A-Za-z0-9_-]*$/;
   }
@@ -2544,7 +2585,7 @@ function buildControlsGroupLayout(config, state) {
 }
 function computeLegendLayout(config, state, containerWidth) {
   const { groups, controls: configControls, mode } = config;
-  const isExport = mode === "inline";
+  const isExport = mode === "export";
   const activeGroupName = state.activeGroup?.toLowerCase() ?? null;
   if (isExport && !activeGroupName) {
     return {
@@ -2830,7 +2871,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();
@@ -3081,81 +3125,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" },
@@ -3189,16 +3159,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" },
@@ -3211,6 +3180,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" },
@@ -3221,7 +3191,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" },
@@ -3240,98 +3210,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;
   }
@@ -3392,15 +3275,6 @@ function parseInArrowLabel(rawLabel, lineNumber) {
   const diagnostics = validateLabelCharacters(trimmed, lineNumber);
   return { label: trimmed, diagnostics };
 }
-function matchColorParens(content) {
-  const m = content.match(/^\(([A-Za-z]+)\)$/);
-  if (!m) return null;
-  const candidate = m[1].toLowerCase();
-  if (RECOGNIZED_COLOR_NAMES.includes(candidate)) {
-    return candidate;
-  }
-  return null;
-}
 function parseArrow(line12) {
   if (BIDI_SYNC_RE.test(line12) || BIDI_ASYNC_RE.test(line12)) {
     return {
@@ -3439,7 +3313,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",
@@ -3634,7 +3507,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");
@@ -3645,7 +3518,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) {
@@ -3764,7 +3637,7 @@ function parseSequenceDgmo(content) {
       if (groupColor) {
         pushWarning(
           lineNumber,
-          `(${groupColor}) color syntax removed from sequence diagrams \u2014 use 'tag:' groups for coloring`
+          `'(${groupColor})' parens-color syntax removed from sequence diagrams \u2014 use 'tag:' groups for coloring`
         );
       }
       contentStarted = true;
@@ -3844,7 +3717,7 @@ function parseSequenceDgmo(content) {
       if (!color) {
         pushError(
           lineNumber,
-          `Expected 'Value(color)' in tag group '${currentTagGroup.name}'`
+          `Expected 'Value color' in tag group '${currentTagGroup.name}'`
         );
         continue;
       }
@@ -3868,11 +3741,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;
@@ -3958,6 +3833,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";
@@ -4027,7 +3913,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 });
@@ -4258,6 +4144,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,
@@ -4381,7 +4286,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";
@@ -4394,19 +4299,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*$/;
@@ -4475,7 +4382,6 @@ function splitArrows(line12) {
     const arrowEnd = idx + 2;
     let arrowStart;
     let label;
-    let color;
     let openingStart = -1;
     for (let i = scanFloor; i < runStart; i++) {
       if (line12[i] !== "-") continue;
@@ -4488,21 +4394,13 @@ function splitArrows(line12) {
     if (openingStart !== -1) {
       let openingEnd = openingStart;
       while (openingEnd < runStart && line12[openingEnd] === "-") openingEnd++;
-      const arrowContent = line12.substring(openingEnd, runStart);
-      const colorMatch = arrowContent.match(/\(([^)]+)\)\s*$/);
-      if (colorMatch) {
-        color = colorMatch[1].trim();
-        const labelPart = arrowContent.substring(0, colorMatch.index).trim();
-        if (labelPart) label = labelPart;
-      } else {
-        const labelPart = arrowContent.trim();
-        if (labelPart) label = labelPart;
-      }
+      const labelPart = line12.substring(openingEnd, runStart).trim();
+      if (labelPart) label = labelPart;
       arrowStart = openingStart;
     } else {
       arrowStart = runStart;
     }
-    arrowPositions.push({ start: arrowStart, end: arrowEnd, label, color });
+    arrowPositions.push({ start: arrowStart, end: arrowEnd, label });
     searchFrom = arrowEnd;
     scanFloor = arrowEnd;
   }
@@ -4516,11 +4414,7 @@ function splitArrows(line12) {
     if (beforeText || i === 0) {
       segments.push(beforeText);
     }
-    let arrowToken = "->";
-    if (arrow.label && arrow.color)
-      arrowToken = `-${arrow.label}(${arrow.color})->`;
-    else if (arrow.label) arrowToken = `-${arrow.label}->`;
-    else if (arrow.color) arrowToken = `-(${arrow.color})->`;
+    const arrowToken = arrow.label ? `-${arrow.label}->` : "->";
     segments.push(arrowToken);
     lastIndex = arrow.end;
   }
@@ -4530,45 +4424,14 @@ function splitArrows(line12) {
   }
   return segments;
 }
-function parseArrowToken(token, palette, lineNumber, diagnostics) {
+function parseArrowToken(token, _palette, lineNumber, diagnostics) {
   if (token === "->") return {};
-  const bareParen = token.match(/^-(\([A-Za-z]+\))->$/);
-  if (bareParen) {
-    const colorName = matchColorParens(bareParen[1]);
-    if (colorName) {
-      return {
-        color: resolveColorWithDiagnostic(
-          colorName,
-          lineNumber,
-          diagnostics,
-          palette
-        )
-      };
-    }
-  }
-  const m = token.match(/^-(.+?)(?:\(([^)]+)\))?->$/);
+  const m = token.match(/^-(.+?)->$/);
   if (m) {
     const rawLabel = m[1] ?? "";
     const labelResult = parseInArrowLabel(rawLabel, lineNumber);
     diagnostics.push(...labelResult.diagnostics);
-    const label = labelResult.label;
-    let color = m[2] ? resolveColorWithDiagnostic(
-      m[2].trim(),
-      lineNumber,
-      diagnostics,
-      palette
-    ) : void 0;
-    if (label && !color) {
-      const inferred = inferArrowColor(label);
-      if (inferred)
-        color = resolveColorWithDiagnostic(
-          inferred,
-          lineNumber,
-          diagnostics,
-          palette
-        );
-    }
-    return { label, color };
+    return { label: labelResult.label };
   }
   return {};
 }
@@ -4634,13 +4497,12 @@ function parseFlowchart(content, palette) {
     result.nodes.push(node);
     return node;
   }
-  function addEdge(sourceId, targetId, lineNumber, label, color) {
+  function addEdge(sourceId, targetId, lineNumber, label) {
     const edge = {
       source: sourceId,
       target: targetId,
       lineNumber,
-      ...label && { label },
-      ...color && { color }
+      ...label && { label }
     };
     result.edges.push(edge);
   }
@@ -4706,13 +4568,7 @@ function parseFlowchart(content, palette) {
       if (pendingArrow !== null) {
         const sourceId = lastNodeId ?? implicitSourceId;
         if (sourceId) {
-          addEdge(
-            sourceId,
-            node.id,
-            lineNumber,
-            pendingArrow.label,
-            pendingArrow.color
-          );
+          addEdge(sourceId, node.id, lineNumber, pendingArrow.label);
         }
         pendingArrow = null;
       } else if (lastNodeId === null && implicitSourceId === null) {
@@ -4837,7 +4693,6 @@ var NODE_ID_RE;
 var init_flowchart_parser = __esm({
   "src/graph/flowchart-parser.ts"() {
     "use strict";
-    init_colors();
     init_diagnostics();
     init_arrows();
     init_parsing();
@@ -4865,7 +4720,6 @@ function splitArrows2(line12) {
     const arrowEnd = idx + 2;
     let arrowStart;
     let label;
-    let color;
     let openingStart = -1;
     for (let i = scanFloor; i < runStart; i++) {
       if (line12[i] !== "-") continue;
@@ -4878,21 +4732,13 @@ function splitArrows2(line12) {
     if (openingStart !== -1) {
       let openingEnd = openingStart;
       while (openingEnd < runStart && line12[openingEnd] === "-") openingEnd++;
-      const arrowContent = line12.substring(openingEnd, runStart);
-      const colorMatch = arrowContent.match(/\(([^)]+)\)\s*$/);
-      if (colorMatch) {
-        color = colorMatch[1].trim();
-        const labelPart = arrowContent.substring(0, colorMatch.index).trim();
-        if (labelPart) label = labelPart;
-      } else {
-        const labelPart = arrowContent.trim();
-        if (labelPart) label = labelPart;
-      }
+      const labelPart = line12.substring(openingEnd, runStart).trim();
+      if (labelPart) label = labelPart;
       arrowStart = openingStart;
     } else {
       arrowStart = runStart;
     }
-    arrowPositions.push({ start: arrowStart, end: arrowEnd, label, color });
+    arrowPositions.push({ start: arrowStart, end: arrowEnd, label });
     searchFrom = arrowEnd;
     scanFloor = arrowEnd;
   }
@@ -4902,11 +4748,7 @@ function splitArrows2(line12) {
     const arrow = arrowPositions[i];
     const beforeText = line12.substring(lastIndex, arrow.start).trim();
     if (beforeText || i === 0) segments.push(beforeText);
-    let arrowToken = "->";
-    if (arrow.label && arrow.color)
-      arrowToken = `-${arrow.label}(${arrow.color})->`;
-    else if (arrow.label) arrowToken = `-${arrow.label}->`;
-    else if (arrow.color) arrowToken = `-(${arrow.color})->`;
+    const arrowToken = arrow.label ? `-${arrow.label}->` : "->";
     segments.push(arrowToken);
     lastIndex = arrow.end;
   }
@@ -4914,35 +4756,14 @@ function splitArrows2(line12) {
   if (remaining) segments.push(remaining);
   return segments;
 }
-function parseArrowToken2(token, palette, lineNumber, diagnostics) {
+function parseArrowToken2(token, _palette, lineNumber, diagnostics) {
   if (token === "->") return {};
-  const bareParen = token.match(/^-(\([A-Za-z]+\))->$/);
-  if (bareParen) {
-    const colorName = matchColorParens(bareParen[1]);
-    if (colorName) {
-      return {
-        color: resolveColorWithDiagnostic(
-          colorName,
-          lineNumber,
-          diagnostics,
-          palette
-        )
-      };
-    }
-  }
-  const m = token.match(/^-(.+?)(?:\(([^)]+)\))?->$/);
+  const m = token.match(/^-(.+?)->$/);
   if (m) {
     const rawLabel = m[1] ?? "";
     const labelResult = parseInArrowLabel(rawLabel, lineNumber);
     diagnostics.push(...labelResult.diagnostics);
-    const label = labelResult.label;
-    const color = m[2] ? resolveColorWithDiagnostic(
-      m[2].trim(),
-      lineNumber,
-      diagnostics,
-      palette
-    ) : void 0;
-    return { label, color };
+    return { label: labelResult.label };
   }
   return {};
 }
@@ -5033,13 +4854,12 @@ function parseState(content, palette) {
     }
     return node;
   }
-  function addEdge(sourceId, targetId, lineNumber, label, color) {
+  function addEdge(sourceId, targetId, lineNumber, label) {
     result.edges.push({
       source: sourceId,
       target: targetId,
       lineNumber,
-      ...label && { label },
-      ...color && { color }
+      ...label && { label }
     });
   }
   for (let i = 0; i < lines.length; i++) {
@@ -5182,13 +5002,7 @@ function parseState(content, palette) {
       if (pendingArrow !== null) {
         const sourceId = lastNodeId ?? implicitSourceId;
         if (sourceId) {
-          addEdge(
-            sourceId,
-            node.id,
-            lineNumber,
-            pendingArrow.label,
-            pendingArrow.color
-          );
+          addEdge(sourceId, node.id, lineNumber, pendingArrow.label);
         }
         pendingArrow = null;
       }
@@ -5241,7 +5055,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*$/;
   }
 });
 
@@ -5389,7 +5203,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;
@@ -5620,7 +5434,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*/;
@@ -5790,7 +5604,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;
@@ -5827,7 +5641,7 @@ function parseERDiagram(content, palette) {
         result.diagnostics.push(
           makeDgmoError(
             lineNumber,
-            `Expected 'Value(color)' in tag group '${currentTagGroup.name}'`,
+            `Expected 'Value color' in tag group '${currentTagGroup.name}'`,
             "warning"
           )
         );
@@ -5939,7 +5753,7 @@ function parseERDiagram(content, palette) {
   if (result.tables.length === 0 && !result.error) {
     const diag = makeDgmoError(
       1,
-      'No tables found. Add table declarations like "users" or "orders (blue)".'
+      'No tables found. Add table declarations like "users" or "orders blue".'
     );
     result.diagnostics.push(diag);
     result.error = formatDgmoError(diag);
@@ -6025,15 +5839,19 @@ function extractSymbols3(docText) {
   for (const rawLine of docText.split("\n")) {
     const line12 = rawLine.trim();
     if (inMetadata && /^er(\s|$)/i.test(line12)) continue;
-    if (inMetadata && OPTION_NOCOLON_RE.test(line12)) continue;
-    inMetadata = false;
-    if (line12.length === 0) continue;
     if (/^\s/.test(rawLine)) continue;
+    if (line12.length === 0) continue;
     const m = TABLE_DECL_RE.exec(line12);
     if (m) {
       const name = (m[1] ?? m[2] ?? "").trim();
-      if (name) entities.push(name);
+      if (name) {
+        inMetadata = false;
+        entities.push(name);
+        continue;
+      }
     }
+    if (inMetadata && OPTION_NOCOLON_RE.test(line12)) continue;
+    inMetadata = false;
   }
   return {
     kind: "er",
@@ -6051,7 +5869,7 @@ var init_parser3 = __esm({
     init_name_normalize();
     init_parsing();
     init_tag_groups();
-    TABLE_DECL_RE = /^(?:"([^"]+)"|([a-zA-Z_][^|":(]*?))(?:\s*\(([^)]+)\))?(?:\s*\|(.+))?$/;
+    TABLE_DECL_RE = /^(?:"([^"]+)"|([a-zA-Z_][^|":(]*?))(?:\s+(red|orange|yellow|green|blue|purple|teal|cyan|gray|black|white))?(?:\s*\|(.+))?$/;
     INDENT_REL_RE = /^([1*?])-{1,2}(?:(.+?)-{1,2})?([1*?])\s+(?:"([^"]+)"|([a-zA-Z_][^":]*?))\s*$/;
     CONSTRAINT_MAP = {
       pk: "pk",
@@ -6131,18 +5949,22 @@ function parseChart(content, palette) {
         return fail(lineNumber, msg2);
       }
     }
-    const eraMatch = trimmed.match(
-      /^era\s+(.+?)\s*->\s*(.+?)(?:\s*\(([^)]+)\))?\s*$/
-    );
+    const eraMatch = trimmed.match(/^era\s+(.+?)\s*->\s*(.+?)\s*$/);
     if (eraMatch) {
       const afterArrow = eraMatch[2].trim();
       const spaceIdx2 = afterArrow.indexOf(" ");
       if (spaceIdx2 >= 0) {
+        const lastSpaceIdx = afterArrow.lastIndexOf(" ");
+        const trailing = afterArrow.substring(lastSpaceIdx + 1);
+        const hasColor = RECOGNIZED_COLOR_NAMES.includes(
+          trailing
+        );
+        const labelPart = hasColor ? afterArrow.substring(0, lastSpaceIdx).trimEnd() : afterArrow;
         rawEras.push({
           start: eraMatch[1].trim(),
-          afterArrow,
-          color: eraMatch[3] ? resolveColorWithDiagnostic(
-            eraMatch[3].trim(),
+          afterArrow: labelPart,
+          color: hasColor ? resolveColorWithDiagnostic(
+            trailing,
             lineNumber,
             result.diagnostics,
             palette
@@ -6642,11 +6464,12 @@ function parseExtendedChart(content, palette) {
         return result;
       }
     }
-    const categoryMatch = trimmed.match(/^\[(.+?)\](?:\s*\(([^)]+)\))?\s*$/);
+    const categoryMatch = trimmed.match(/^\[(.+?)\](?:\s+(\S+))?\s*$/);
     if (categoryMatch) {
       const catName = categoryMatch[1].trim();
-      const catColor = categoryMatch[2] ? resolveColorWithDiagnostic(
-        categoryMatch[2].trim(),
+      const rawCatColor = categoryMatch[2]?.trim();
+      const catColor = rawCatColor ? resolveColorWithDiagnostic(
+        rawCatColor,
         lineNumber,
         result.diagnostics,
         palette
@@ -6661,7 +6484,7 @@ function parseExtendedChart(content, palette) {
       continue;
     }
     const arrowMatch = trimmed.match(
-      /^(.+?)\s*(->|--)\s*(.+?)\s+(-?[\d,_]+(?:\.[\d]+)?)\s*(?:\(([^)]+)\))?\s*$/
+      /^(.+?)\s*(->|--)\s*(.+?)\s+(-?[\d,_]+(?:\.[\d]+)?)(?:\s+(red|orange|yellow|green|blue|purple|teal|cyan|gray|black|white))?\s*$/
     );
     if (arrowMatch) {
       const [, rawSource, arrow, rawTarget, rawVal, rawLinkColor] = arrowMatch;
@@ -6706,11 +6529,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(),
@@ -6942,7 +6768,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
@@ -8990,7 +8816,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");
@@ -9088,7 +8914,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;
         }
@@ -9287,7 +9113,7 @@ function parseKanban(content, palette) {
   const warn2 = (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");
@@ -9379,7 +9205,7 @@ function parseKanban(content, palette) {
         if (!color) {
           warn2(
             lineNumber,
-            `Expected 'Value(color)' in tag group '${currentTagGroup.name}'`
+            `Expected 'Value color' in tag group '${currentTagGroup.name}'`
           );
           continue;
         }
@@ -9422,8 +9248,9 @@ function parseKanban(content, palette) {
       currentCard = null;
       columnCounter++;
       const colName = columnMatch[1].trim();
-      const colColor = columnMatch[2] ? resolveColorWithDiagnostic(
-        columnMatch[2].trim(),
+      const rawTrailing = columnMatch[2]?.trim();
+      const colColor = rawTrailing ? resolveColorWithDiagnostic(
+        rawTrailing,
         lineNumber,
         result.diagnostics,
         palette
@@ -9578,7 +9405,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([
@@ -9675,7 +9502,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");
@@ -9761,7 +9588,7 @@ function parseC4(content, palette) {
         if (!color) {
           pushError(
             lineNumber,
-            `Expected 'Value(color)' in tag group '${currentTagGroup.name}'`
+            `Expected 'Value color' in tag group '${currentTagGroup.name}'`
           );
           continue;
         }
@@ -10357,7 +10184,7 @@ __export(parser_exports7, {
   looksLikeSitemap: () => looksLikeSitemap,
   parseSitemap: () => parseSitemap
 });
-function parseArrowLine(trimmed, palette, lineNumber, diagnostics) {
+function parseArrowLine(trimmed, _palette, _lineNumber, _diagnostics) {
   const bareMatch = trimmed.match(BARE_ARROW_RE);
   if (bareMatch) {
     const rawTarget = bareMatch[1].trim();
@@ -10370,27 +10197,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
     };
@@ -10443,7 +10253,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");
@@ -10532,7 +10342,7 @@ function parseSitemap(content, palette) {
         if (!color) {
           pushError(
             lineNumber,
-            `Expected 'Value(color)' in tag group '${currentTagGroup.name}'`
+            `Expected 'Value color' in tag group '${currentTagGroup.name}'`
           );
           continue;
         }
@@ -10569,7 +10379,6 @@ function parseSitemap(content, palette) {
           targetLabel: arrowInfo.target,
           targetIsGroup: arrowInfo.targetIsGroup,
           label: arrowInfo.label,
-          color: arrowInfo.color,
           lineNumber
         });
       }
@@ -10667,7 +10476,6 @@ function parseSitemap(content, palette) {
         sourceId: arrow.sourceNode.id,
         targetId: aliasHit,
         label: arrow.label,
-        color: arrow.color,
         lineNumber: arrow.lineNumber
       });
       continue;
@@ -10687,7 +10495,6 @@ function parseSitemap(content, palette) {
         sourceId: arrow.sourceNode.id,
         targetId: targetContainer.id,
         label: arrow.label,
-        color: arrow.color,
         lineNumber: arrow.lineNumber
       });
     } else {
@@ -10704,7 +10511,6 @@ function parseSitemap(content, palette) {
         sourceId: arrow.sourceNode.id,
         targetId: targetNode.id,
         label: arrow.label,
-        color: arrow.color,
         lineNumber: arrow.lineNumber
       });
     }
@@ -10794,7 +10600,6 @@ var CONTAINER_RE3, METADATA_RE3, ARROW_RE, BARE_ARROW_RE;
 var init_parser7 = __esm({
   "src/sitemap/parser.ts"() {
     "use strict";
-    init_colors();
     init_diagnostics();
     init_name_normalize();
     init_tag_groups();
@@ -10802,7 +10607,7 @@ var init_parser7 = __esm({
     init_description_helpers();
     CONTAINER_RE3 = /^\[([^\]]+)\]\s*(?:\|\s*(.+))?$/;
     METADATA_RE3 = /^([^:]+):\s*(.+)$/;
-    ARROW_RE = /^-([^(>][^(>]*?)?\s*(?:\(([^)]+)\))?\s*->\s*(.+)$/;
+    ARROW_RE = /^-([^>][^>]*?)?\s*->\s*(.+)$/;
     BARE_ARROW_RE = /^->\s*(.+)$/;
   }
 });
@@ -11093,13 +10898,18 @@ function parseInfra(content) {
     }
     if (currentTagGroup && indent > 0) {
       const { text: cleanEntry, isDefault } = stripDefaultModifier(trimmed);
-      const tvMatch = cleanEntry.match(TAG_VALUE_RE);
-      if (tvMatch) {
-        const valueName = tvMatch[1].trim();
-        const rawColor = tvMatch[2]?.trim();
-        if (rawColor) {
-          resolveColorWithDiagnostic(rawColor, lineNumber, result.diagnostics);
-        }
+      const lastSpaceIdx = cleanEntry.lastIndexOf(" ");
+      let valueName = cleanEntry;
+      let rawColor;
+      if (lastSpaceIdx > 0) {
+        const trailing = cleanEntry.substring(lastSpaceIdx + 1);
+        if (isRecognizedColorName(trailing)) {
+          rawColor = trailing;
+          valueName = cleanEntry.substring(0, lastSpaceIdx).trimEnd();
+        }
+      }
+      const tvMatch = valueName.match(TAG_VALUE_RE);
+      if (tvMatch || /^\w+$/.test(valueName)) {
         currentTagGroup.values.push({
           name: valueName,
           color: rawColor
@@ -11511,9 +11321,9 @@ var init_parser8 = __esm({
     "use strict";
     init_diagnostics();
     init_description_helpers();
-    init_colors();
     init_arrows();
     init_parsing();
+    init_colors();
     init_name_normalize();
     init_tag_groups();
     init_types();
@@ -11523,7 +11333,7 @@ var init_parser8 = __esm({
     ASYNC_SIMPLE_CONNECTION_RE = /^~>\s*(.+?)\s*$/;
     DEPRECATED_FANOUT_RE = /\bx(\d+)\s*$/;
     GROUP_RE = /^\[([^\]]+)\]\s*(?:as\s+([A-Za-z][A-Za-z0-9_]{0,11})\s*)?(?:\|\s*(.+))?$/;
-    TAG_VALUE_RE = /^(\w[\w\s]*?)(?:\(([^)]+)\))?\s*$/;
+    TAG_VALUE_RE = /^(\w[\w\s]+?)\s*$/;
     COMPONENT_RE = /^(?:"([^"]+)"|([a-zA-Z_][^|":]*?))\s*(\|.*)?$/;
     PIPE_META_RE = /[|,]\s*(\w+)\s*:\s*([^|,]+)/g;
     PROPERTY_RE = /^([\w-]+)\s+(.+)$/;
@@ -12960,7 +12770,7 @@ function parsePert(content, parseOpts = {}) {
             if (!color) {
               warn2(
                 lineNumber,
-                `Expected 'Value(color)' in tag group '${currentTagGroup.name}'`
+                `Expected 'Value color' in tag group '${currentTagGroup.name}'`
               );
               continue;
             }
@@ -12983,7 +12793,7 @@ function parsePert(content, parseOpts = {}) {
         if (!color) {
           warn2(
             lineNumber,
-            `Expected 'Value(color)' in tag group '${currentTagGroup.name}'`
+            `Expected 'Value color' in tag group '${currentTagGroup.name}'`
           );
           continue;
         }
@@ -13127,7 +12937,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}'?`,
@@ -14434,7 +14244,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");
@@ -14532,7 +14342,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;
         }
@@ -14605,7 +14415,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;
 }
@@ -15064,7 +14874,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;
@@ -15118,7 +14928,7 @@ function parseWireframe(content) {
         } else {
           pushWarning(
             lineNumber,
-            `Expected 'Value(color)' in tag group '${currentTagGroup.name}'`
+            `Expected 'Value color' in tag group '${currentTagGroup.name}'`
           );
         }
         continue;
@@ -15359,7 +15169,7 @@ function parseTechRadar(content) {
   const warn2 = (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) {
@@ -15396,7 +15206,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;
@@ -15688,7 +15498,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;
@@ -15735,6 +15545,13 @@ function parseCycle(content) {
         warn2(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;
@@ -15905,7 +15722,7 @@ function parseJourneyMap(content, palette) {
   const warn2 = (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");
@@ -15964,8 +15781,12 @@ function parseJourneyMap(content, palette) {
               const key = part.substring(0, colonIdx).trim().toLowerCase();
               const value = part.substring(colonIdx + 1).trim();
               if (key === "color") {
-                const resolved = extractColor(`x(${value})`, palette);
-                personaColor = resolved.color;
+                personaColor = resolveColorWithDiagnostic(
+                  value,
+                  lineNumber,
+                  result.diagnostics,
+                  palette
+                ) ?? void 0;
               }
             }
           }
@@ -16023,7 +15844,7 @@ function parseJourneyMap(content, palette) {
         if (!color) {
           warn2(
             lineNumber,
-            `Expected 'Value(color)' in tag group '${currentTagGroup.name}'`
+            `Expected 'Value color' in tag group '${currentTagGroup.name}'`
           );
           continue;
         }
@@ -16266,6 +16087,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();
@@ -16320,7 +16142,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;
@@ -16364,6 +16186,13 @@ function parsePyramid(content) {
         warn2(lineNum, "Empty layer label.");
         continue;
       }
+      if (!color) {
+        const { label: stripped, colorName: shortcutColor } = peelTrailingColorName(label);
+        if (shortcutColor) {
+          color = shortcutColor;
+          label = stripped;
+        }
+      }
       currentLayer = {
         label,
         lineNumber: lineNum,
@@ -16447,7 +16276,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;
@@ -16527,6 +16356,13 @@ function parseRing(content) {
         warn2(lineNum, "Empty layer label.");
         continue;
       }
+      if (!color) {
+        const { label: stripped, colorName: shortcutColor } = peelTrailingColorName(label);
+        if (shortcutColor) {
+          color = shortcutColor;
+          label = stripped;
+        }
+      }
       currentLayer = {
         label,
         lineNumber: lineNum,
@@ -16887,7 +16723,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");
@@ -17021,7 +16857,7 @@ function parseRaci(content, palette) {
           if (next.length > 0 && next[0] !== " " && next[0] !== "	") break;
           const stripped = nextTrim.replace(/,\s*$/, "");
           const segments = stripped.split("|").map((s) => s.trim());
-          const roleLabel = segments[0] ?? "";
+          let roleLabel = segments[0] ?? "";
           let roleColor;
           if (segments.length > 1) {
             const meta = parsePipeMetadata(segments);
@@ -17034,6 +16870,18 @@ function parseRaci(content, palette) {
               );
             }
           }
+          if (!roleColor) {
+            const { label: stripLabel, colorName: shortcutColor } = peelTrailingColorName(roleLabel);
+            if (shortcutColor) {
+              roleColor = resolveColorWithDiagnostic(
+                shortcutColor,
+                j + 1,
+                result.diagnostics,
+                palette
+              );
+              roleLabel = stripLabel;
+            }
+          }
           if (roleLabel) getOrAddRole(roleLabel, j + 1, roleColor);
         }
         i = j - 1;
@@ -17092,8 +16940,10 @@ function parseRaci(content, palette) {
           continue;
         }
         let phaseColor;
-        if (phaseMatch[2]) {
-          const meta = parsePipeMetadata(["", phaseMatch[2]]);
+        const trailingToken = phaseMatch[2];
+        const pipeMeta = phaseMatch[3];
+        if (pipeMeta) {
+          const meta = parsePipeMetadata(["", pipeMeta]);
           if (meta["color"]) {
             phaseColor = resolveColorWithDiagnostic(
               meta["color"],
@@ -17103,6 +16953,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,
@@ -17183,7 +17044,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
             );
@@ -17333,7 +17194,7 @@ var init_parser19 = __esm({
       "no-title",
       ...Object.keys(VARIANT_LOCK_DIRECTIVES)
     ]);
-    PHASE_RE2 = /^\[(.+?)\]\s*(?:\|\s*(.+))?\s*$/;
+    PHASE_RE2 = /^\[(.+?)\](?:\s+(\S+))?(?:\s*\|\s*(.+))?\s*$/;
     ROLE_ASSIGNMENT_RE = /^([^:]+):\s*(.*)$/;
   }
 });
@@ -19049,7 +18910,7 @@ function containerFill(palette, isDark, nodeColor2) {
 function containerStroke(palette, nodeColor2) {
   return nodeColor2 ?? palette.textMuted;
 }
-function renderOrg(container, parsed, layout, palette, isDark, onClickItem, exportDims, activeTagGroup, hiddenAttributes, ancestorPath) {
+function renderOrg(container, parsed, layout, palette, isDark, onClickItem, exportDims, activeTagGroup, hiddenAttributes, ancestorPath, exportMode) {
   d3Selection.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const width = exportDims?.width ?? container.clientWidth;
   const height = exportDims?.height ?? container.clientHeight;
@@ -19309,7 +19170,7 @@ function renderOrg(container, parsed, layout, palette, isDark, onClickItem, expo
             }
           ],
           position: { placement: "top-center", titleRelation: "below-title" },
-          mode: "fixed"
+          mode: exportMode ? "export" : "preview"
         };
         const singleState = { activeGroup: lg.name };
         const groupG = legendParentBase.append("g").attr("transform", `translate(${lg.x}, ${lg.y})`);
@@ -19329,7 +19190,7 @@ function renderOrg(container, parsed, layout, palette, isDark, onClickItem, expo
       const legendConfig = {
         groups,
         position: { placement: "top-center", titleRelation: "below-title" },
-        mode: "fixed",
+        mode: exportMode ? "export" : "preview",
         capsulePillAddonWidth: eyeAddonWidth
       };
       const legendState = { activeGroup: activeTagGroup ?? null };
@@ -19796,7 +19657,6 @@ function layoutSitemap(parsed, hiddenCounts, activeTagGroup, hiddenAttributes, e
       targetId: edge.targetId,
       points,
       label: edge.label,
-      color: edge.color,
       lineNumber: edge.lineNumber,
       deferred: deferredSet.has(i) || void 0
     });
@@ -20252,7 +20112,7 @@ function containerFill2(palette, isDark, nodeColor2) {
 function containerStroke2(palette, nodeColor2) {
   return nodeColor2 ?? palette.textMuted;
 }
-function renderSitemap(container, parsed, layout, palette, isDark, onClickItem, exportDims, activeTagGroup, hiddenAttributes) {
+function renderSitemap(container, parsed, layout, palette, isDark, onClickItem, exportDims, activeTagGroup, hiddenAttributes, exportMode) {
   d3Selection2.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const width = exportDims?.width ?? container.clientWidth;
   const height = exportDims?.height ?? container.clientHeight;
@@ -20283,9 +20143,6 @@ function renderSitemap(container, parsed, layout, palette, isDark, onClickItem,
   const defs = svg.append("defs");
   defs.append("marker").attr("id", "sm-arrow").attr("viewBox", `0 0 ${ARROWHEAD_W} ${ARROWHEAD_H}`).attr("refX", ARROWHEAD_W).attr("refY", ARROWHEAD_H / 2).attr("markerWidth", ARROWHEAD_W).attr("markerHeight", ARROWHEAD_H).attr("orient", "auto").append("polygon").attr("points", `0,0 ${ARROWHEAD_W},${ARROWHEAD_H / 2} 0,${ARROWHEAD_H}`).attr("fill", palette.textMuted);
   const edgeColors = /* @__PURE__ */ new Set();
-  for (const edge of layout.edges) {
-    if (edge.color) edgeColors.add(edge.color);
-  }
   for (const color of edgeColors) {
     const id = `sm-arrow-${color.replace("#", "")}`;
     defs.append("marker").attr("id", id).attr("viewBox", `0 0 ${ARROWHEAD_W} ${ARROWHEAD_H}`).attr("refX", ARROWHEAD_W).attr("refY", ARROWHEAD_H / 2).attr("markerWidth", ARROWHEAD_W).attr("markerHeight", ARROWHEAD_H).attr("orient", "auto").append("polygon").attr("points", `0,0 ${ARROWHEAD_W},${ARROWHEAD_H / 2} 0,${ARROWHEAD_H}`).attr("fill", color);
@@ -20364,8 +20221,8 @@ function renderSitemap(container, parsed, layout, palette, isDark, onClickItem,
   for (const edge of layout.edges) {
     if (edge.points.length < 2) continue;
     const edgeG = contentG.append("g").attr("class", "sitemap-edge-group").attr("data-line-number", String(edge.lineNumber));
-    const edgeColor3 = edge.color ?? palette.textMuted;
-    const markerId = edge.color ? `sm-arrow-${edge.color.replace("#", "")}` : "sm-arrow";
+    const edgeColor3 = palette.textMuted;
+    const markerId = "sm-arrow";
     const gen = edge.deferred ? lineGeneratorLinear : lineGenerator;
     const pathD = gen(edge.points);
     if (pathD) {
@@ -20446,7 +20303,8 @@ function renderSitemap(container, parsed, layout, palette, isDark, onClickItem,
       isDark,
       activeTagGroup,
       void 0,
-      hiddenAttributes
+      hiddenAttributes,
+      exportMode
     );
   }
   if (fixedTitle) {
@@ -20471,11 +20329,12 @@ function renderSitemap(container, parsed, layout, palette, isDark, onClickItem,
       isDark,
       activeTagGroup,
       width,
-      hiddenAttributes
+      hiddenAttributes,
+      exportMode
     );
   }
 }
-function renderLegend(parent, legendGroups, palette, isDark, activeTagGroup, fixedWidth, hiddenAttributes) {
+function renderLegend(parent, legendGroups, palette, isDark, activeTagGroup, fixedWidth, hiddenAttributes, exportMode) {
   if (legendGroups.length === 0) return;
   const groups = legendGroups.map((g) => ({
     name: g.name,
@@ -20486,7 +20345,7 @@ function renderLegend(parent, legendGroups, palette, isDark, activeTagGroup, fix
   const legendConfig = {
     groups,
     position: { placement: "top-center", titleRelation: "below-title" },
-    mode: "fixed",
+    mode: exportMode ? "export" : "preview",
     capsulePillAddonWidth: eyeAddonWidth
   };
   const legendState = { activeGroup: activeTagGroup ?? null };
@@ -20772,7 +20631,7 @@ function renderKanban(container, parsed, palette, isDark, options) {
     const legendConfig = {
       groups: parsed.tagGroups,
       position: { placement: "top-center", titleRelation: "inline-with-title" },
-      mode: exportDims ? "inline" : "fixed"
+      mode: options?.exportMode ? "export" : "preview"
     };
     const legendState = { activeGroup: activeTagGroup ?? null };
     const legendG = svg.append("g").attr("class", "kanban-legend").attr("transform", `translate(${legendX},${legendY})`);
@@ -20930,7 +20789,8 @@ function renderKanbanForExport(content, theme, palette) {
   const layout = computeLayout(parsed, palette);
   const container = document.createElement("div");
   renderKanban(container, parsed, palette, isDark, {
-    exportDims: { width: layout.totalWidth, height: layout.totalHeight }
+    exportDims: { width: layout.totalWidth, height: layout.totalHeight },
+    exportMode: true
   });
   const svgEl = container.querySelector("svg");
   return svgEl?.outerHTML ?? "";
@@ -21468,7 +21328,7 @@ function markerIdForType(type) {
 function isSourceMarker(type) {
   return type === "composes" || type === "aggregates";
 }
-function renderClassDiagram(container, parsed, layout, palette, isDark, onClickItem, exportDims, legendActive) {
+function renderClassDiagram(container, parsed, layout, palette, isDark, onClickItem, exportDims, legendActive, exportMode) {
   d3Selection4.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const width = exportDims?.width ?? container.clientWidth;
   const height = exportDims?.height ?? container.clientHeight;
@@ -21530,7 +21390,7 @@ function renderClassDiagram(container, parsed, layout, palette, isDark, onClickI
     const legendConfig = {
       groups: legendGroups,
       position: { placement: "top-center", titleRelation: "below-title" },
-      mode: "fixed"
+      mode: exportMode ? "export" : "preview"
     };
     const legendState = {
       activeGroup: isLegendExpanded ? LEGEND_GROUP_NAME : null
@@ -21670,10 +21530,22 @@ function renderClassDiagramForExport(content, theme, palette) {
   const exportWidth = layout.width + DIAGRAM_PADDING4 * 2;
   const exportHeight = layout.height + DIAGRAM_PADDING4 * 2 + (parsed.title ? 40 : 0) + legendReserve;
   return runInExportContainer(exportWidth, exportHeight, (container) => {
-    renderClassDiagram(container, parsed, layout, palette, isDark, void 0, {
-      width: exportWidth,
-      height: exportHeight
-    });
+    renderClassDiagram(
+      container,
+      parsed,
+      layout,
+      palette,
+      isDark,
+      void 0,
+      {
+        width: exportWidth,
+        height: exportHeight
+      },
+      true,
+      // legendActive for export
+      true
+      // exportMode
+    );
     return extractExportSvg(container, theme);
   });
 }
@@ -22149,7 +22021,7 @@ function drawCardinality(g, point, prevPoint, cardinality, color, useLabels) {
     g.append("line").attr("x1", bx + px * spread).attr("y1", by + py * spread).attr("x2", bx - px * spread).attr("y2", by - py * spread).attr("stroke", color).attr("stroke-width", sw);
   }
 }
-function renderERDiagram(container, parsed, layout, palette, isDark, onClickItem, exportDims, activeTagGroup, semanticColorsActive) {
+function renderERDiagram(container, parsed, layout, palette, isDark, onClickItem, exportDims, activeTagGroup, semanticColorsActive, exportMode) {
   d3Selection5.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const useSemanticColors = parsed.tagGroups.length === 0 && layout.nodes.every((n) => !n.color);
   const LEGEND_FIXED_GAP4 = 8;
@@ -22305,7 +22177,7 @@ function renderERDiagram(container, parsed, layout, palette, isDark, onClickItem
     const legendConfig = {
       groups: parsed.tagGroups,
       position: { placement: "top-center", titleRelation: "below-title" },
-      mode: "fixed"
+      mode: exportMode ? "export" : "preview"
     };
     const legendState = { activeGroup: activeTagGroup ?? null };
     const legendG = svg.append("g").attr("class", "er-tag-legend").attr("transform", `translate(0,${legendY})`);
@@ -22341,7 +22213,7 @@ function renderERDiagram(container, parsed, layout, palette, isDark, onClickItem
       const legendConfig = {
         groups: semanticGroups,
         position: { placement: "top-center", titleRelation: "below-title" },
-        mode: "fixed"
+        mode: exportMode ? "export" : "preview"
       };
       const legendState = {
         activeGroup: semanticActive ? "Role" : null
@@ -22374,10 +22246,21 @@ function renderERDiagramForExport(content, theme, palette) {
   container.style.left = "-9999px";
   document.body.appendChild(container);
   try {
-    renderERDiagram(container, parsed, layout, palette, isDark, void 0, {
-      width: exportWidth,
-      height: exportHeight
-    });
+    renderERDiagram(
+      container,
+      parsed,
+      layout,
+      palette,
+      isDark,
+      void 0,
+      {
+        width: exportWidth,
+        height: exportHeight
+      },
+      void 0,
+      void 0,
+      true
+    );
     const svgEl = container.querySelector("svg");
     if (!svgEl) return "";
     if (theme === "transparent") {
@@ -22612,7 +22495,8 @@ function renderBoxesAndLines(container, parsed, layout, palette, isDark, options
     hideDescriptions,
     controlsExpanded,
     onToggleDescriptions,
-    onToggleControlsExpand
+    onToggleControlsExpand,
+    exportMode = false
   } = options ?? {};
   d3Selection6.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const width = exportDims?.width ?? container.clientWidth;
@@ -22948,7 +22832,7 @@ function renderBoxesAndLines(container, parsed, layout, palette, isDark, options
     const legendConfig = {
       groups: parsed.tagGroups,
       position: { placement: "top-center", titleRelation: "below-title" },
-      mode: "fixed",
+      mode: exportMode ? "export" : "preview",
       controlsGroup
     };
     const legendState = {
@@ -22980,7 +22864,8 @@ function renderBoxesAndLinesForExport(container, parsed, layout, palette, isDark
   renderBoxesAndLines(container, parsed, layout, palette, isDark, {
     exportDims: options?.exportDims,
     activeTagGroup: options?.activeTagGroup,
-    hiddenTagValues: options?.hiddenTagValues
+    hiddenTagValues: options?.hiddenTagValues,
+    exportMode: options?.exportMode
   });
 }
 var d3Selection6, d3Shape4, DIAGRAM_PADDING6, NODE_FONT_SIZE, MIN_NODE_FONT_SIZE, EDGE_LABEL_FONT_SIZE4, EDGE_STROKE_WIDTH5, NODE_STROKE_WIDTH5, NODE_RX, COLLAPSE_BAR_HEIGHT3, ARROWHEAD_W2, ARROWHEAD_H2, DESC_FONT_SIZE, DESC_LINE_HEIGHT, MAX_DESC_LINES, CHAR_WIDTH_RATIO2, NODE_TEXT_PADDING, GROUP_RX, GROUP_LABEL_FONT_SIZE, GROUP_LABEL_ZONE, lineGeneratorLR, lineGeneratorTB;
@@ -23440,8 +23325,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];
@@ -24218,7 +24102,7 @@ function renderMindmap(container, parsed, layout, palette, isDark, onClickItem,
         };
       }),
       position: { placement: "top-center", titleRelation: "below-title" },
-      mode: "fixed",
+      mode: options?.exportMode ? "export" : "preview",
       controlsGroup: controlsToggles
     };
     const legendState = {
@@ -27020,7 +26904,7 @@ function drawPersonIcon(g, cx, cy, color) {
   g.append("line").attr("x1", cx).attr("y1", bodyBottomY).attr("x2", cx - PERSON_LEG_SPAN).attr("y2", legY).attr("stroke", color).attr("stroke-width", PERSON_SW);
   g.append("line").attr("x1", cx).attr("y1", bodyBottomY).attr("x2", cx + PERSON_LEG_SPAN).attr("y2", legY).attr("stroke", color).attr("stroke-width", PERSON_SW);
 }
-function renderC4Context(container, parsed, layout, palette, isDark, onClickItem, exportDims, activeTagGroup) {
+function renderC4Context(container, parsed, layout, palette, isDark, onClickItem, exportDims, activeTagGroup, exportMode) {
   d3Selection9.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const width = exportDims?.width ?? container.clientWidth;
   const height = exportDims?.height ?? container.clientHeight;
@@ -27196,7 +27080,8 @@ function renderC4Context(container, parsed, layout, palette, isDark, onClickItem
       palette,
       isDark,
       activeTagGroup,
-      fixedLegend ? width : null
+      fixedLegend ? width : null,
+      exportMode
     );
   }
 }
@@ -27551,7 +27436,7 @@ function placeEdgeLabels(labels, edges, obstacleRects) {
     placedRects.push({ x: lbl.x, y: lbl.y, w: lbl.bgW, h: lbl.bgH });
   }
 }
-function renderLegend2(parent, layout, palette, isDark, activeTagGroup, fixedWidth) {
+function renderLegend2(parent, layout, palette, isDark, activeTagGroup, fixedWidth, exportMode) {
   const groups = layout.legend.map((g) => ({
     name: g.name,
     entries: g.entries.map((e) => ({ value: e.value, color: e.color }))
@@ -27559,7 +27444,7 @@ function renderLegend2(parent, layout, palette, isDark, activeTagGroup, fixedWid
   const legendConfig = {
     groups,
     position: { placement: "top-center", titleRelation: "below-title" },
-    mode: "fixed"
+    mode: exportMode ? "export" : "preview"
   };
   const legendState = { activeGroup: activeTagGroup ?? null };
   const containerWidth = fixedWidth ?? layout.width;
@@ -27574,7 +27459,7 @@ function renderLegend2(parent, layout, palette, isDark, activeTagGroup, fixedWid
   );
   parent.selectAll("[data-legend-group]").classed("c4-legend-group", true);
 }
-function renderC4Containers(container, parsed, layout, palette, isDark, onClickItem, exportDims, activeTagGroup) {
+function renderC4Containers(container, parsed, layout, palette, isDark, onClickItem, exportDims, activeTagGroup, exportMode) {
   d3Selection9.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const width = exportDims?.width ?? container.clientWidth;
   const height = exportDims?.height ?? container.clientHeight;
@@ -27805,7 +27690,8 @@ function renderC4Containers(container, parsed, layout, palette, isDark, onClickI
       palette,
       isDark,
       activeTagGroup,
-      fixedLegend ? width : null
+      fixedLegend ? width : null,
+      exportMode
     );
   }
 }
@@ -27873,7 +27759,7 @@ function renderC4ComponentsForExport(content, systemName, containerName, theme,
     document.body.removeChild(el);
   }
 }
-function renderC4Deployment(container, parsed, layout, palette, isDark, onClickItem, exportDims, activeTagGroup) {
+function renderC4Deployment(container, parsed, layout, palette, isDark, onClickItem, exportDims, activeTagGroup, exportMode) {
   renderC4Containers(
     container,
     parsed,
@@ -27882,7 +27768,8 @@ function renderC4Deployment(container, parsed, layout, palette, isDark, onClickI
     isDark,
     onClickItem,
     exportDims,
-    activeTagGroup
+    activeTagGroup,
+    exportMode
   );
 }
 function renderC4DeploymentForExport(content, theme, palette) {
@@ -28064,7 +27951,6 @@ function layoutGraph(graph, options) {
       target: edge.target,
       points: edgeData?.points ?? [],
       label: edge.label,
-      color: edge.color,
       lineNumber: edge.lineNumber
     };
   });
@@ -28365,6 +28251,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) {
@@ -28387,9 +28275,6 @@ function renderFlowchart(container, graph, layout, palette, isDark, onClickItem,
   const defs = svg.append("defs");
   defs.append("marker").attr("id", "fc-arrow").attr("viewBox", `0 0 ${ARROWHEAD_W3} ${ARROWHEAD_H3}`).attr("refX", ARROWHEAD_W3).attr("refY", ARROWHEAD_H3 / 2).attr("markerWidth", ARROWHEAD_W3).attr("markerHeight", ARROWHEAD_H3).attr("orient", "auto").append("polygon").attr("points", `0,0 ${ARROWHEAD_W3},${ARROWHEAD_H3 / 2} 0,${ARROWHEAD_H3}`).attr("fill", palette.textMuted);
   const edgeColors = /* @__PURE__ */ new Set();
-  for (const edge of layout.edges) {
-    if (edge.color) edgeColors.add(edge.color);
-  }
   for (const color of edgeColors) {
     const id = `fc-arrow-${color.replace("#", "")}`;
     defs.append("marker").attr("id", id).attr("viewBox", `0 0 ${ARROWHEAD_W3} ${ARROWHEAD_H3}`).attr("refX", ARROWHEAD_W3).attr("refY", ARROWHEAD_H3 / 2).attr("markerWidth", ARROWHEAD_W3).attr("markerHeight", ARROWHEAD_H3).attr("orient", "auto").append("polygon").attr("points", `0,0 ${ARROWHEAD_W3},${ARROWHEAD_H3 / 2} 0,${ARROWHEAD_H3}`).attr("fill", color);
@@ -28453,8 +28338,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");
@@ -30938,7 +30823,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;
@@ -31078,7 +30963,7 @@ function computeInfraLegendGroups(nodes, tagGroups, palette, edges) {
   }
   return groups;
 }
-function renderLegend3(rootSvg, legendGroups, totalWidth, legendY, palette, isDark, activeGroup, playback) {
+function renderLegend3(rootSvg, legendGroups, totalWidth, legendY, palette, isDark, activeGroup, playback, exportMode = false) {
   if (legendGroups.length === 0 && !playback) return;
   const legendG = rootSvg.append("g").attr("transform", `translate(0, ${legendY})`);
   if (activeGroup) {
@@ -31094,7 +30979,7 @@ function renderLegend3(rootSvg, legendGroups, totalWidth, legendY, palette, isDa
   const legendConfig = {
     groups: allGroups,
     position: { placement: "top-center", titleRelation: "below-title" },
-    mode: "fixed",
+    mode: exportMode ? "export" : "preview",
     showEmptyGroups: true
   };
   const legendState = { activeGroup };
@@ -31282,7 +31167,8 @@ function renderInfra(container, layout, palette, isDark, title, titleLineNumber,
         palette,
         isDark,
         activeGroup ?? null,
-        playback ?? void 0
+        playback ?? void 0,
+        exportMode
       );
       legendSvg.selectAll(".infra-legend-group").style("pointer-events", "auto");
     } else {
@@ -31294,7 +31180,8 @@ function renderInfra(container, layout, palette, isDark, title, titleLineNumber,
         palette,
         isDark,
         activeGroup ?? null,
-        playback ?? void 0
+        playback ?? void 0,
+        exportMode
       );
     }
   }
@@ -31735,7 +31622,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) {
@@ -32241,7 +32128,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 },
@@ -32264,13 +32151,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}.`,
@@ -32289,13 +32176,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);
@@ -32339,20 +32226,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}`;
   }
@@ -32542,7 +32429,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);
@@ -33193,7 +33080,8 @@ function renderPert(container, resolved, layout, palette, isDark, options = {})
       x: 0,
       y: tagLegendY,
       width: exportWidth,
-      activeGroup: tagLegendActive
+      activeGroup: tagLegendActive,
+      exportMode: options.exportMode
     });
   }
   const root = svg.append("g").attr("transform", `translate(${offsetX}, ${offsetY})`);
@@ -33254,7 +33142,8 @@ function renderPertForExport(content, theme, palette, now) {
     renderPert(container, resolved, layout, palette, isDark, {
       title: hasTitle ? parsed.title : null,
       subtitle: resolved.projectSubtitle,
-      exportDims: { width: exportWidth, height: exportHeight }
+      exportDims: { width: exportWidth, height: exportHeight },
+      exportMode: true
     });
     const svgEl = container.querySelector("svg");
     if (!svgEl) return "";
@@ -34341,7 +34230,7 @@ function renderLegendBlock(svg, entries, args) {
 }
 function renderTagLegendRow(svg, resolved, palette, isDark, args) {
   if (resolved.tagGroups.length === 0) return;
-  const { x, y, width, activeGroup } = args;
+  const { x, y, width, activeGroup, exportMode } = args;
   const groups = resolved.tagGroups.map((g) => ({
     name: g.name,
     entries: g.entries.map((e) => ({ value: e.value, color: e.color }))
@@ -34352,7 +34241,7 @@ function renderTagLegendRow(svg, resolved, palette, isDark, args) {
     {
       groups,
       position: { placement: "top-center", titleRelation: "below-title" },
-      mode: "fixed"
+      mode: exportMode ? "export" : "preview"
     },
     { activeGroup },
     palette,
@@ -35792,7 +35681,8 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
             ).attr("display", active ? null : "none");
           }
           drawLegend();
-        }
+        },
+        options?.exportMode ?? false
       );
     }
   }
@@ -36581,7 +36471,7 @@ function buildControlsToggles(hasCriticalPath, criticalPathActive, hasDependenci
   }
   return toggles;
 }
-function renderTagLegend(svg, chartG, tagGroups, activeGroupName, chartLeftMargin, chartInnerWidth, legendY, palette, isDark, hasCriticalPath, criticalPathActive, _optionLineNumbers, onToggle, onToggleControlsExpand, currentSwimlaneGroup, onSwimlaneChange, legendViewMode, resolvedTasks, controlsExpanded = false, hasDependencies = false, dependenciesActive = false, onControlsToggle) {
+function renderTagLegend(svg, chartG, tagGroups, activeGroupName, chartLeftMargin, chartInnerWidth, legendY, palette, isDark, hasCriticalPath, criticalPathActive, _optionLineNumbers, onToggle, onToggleControlsExpand, currentSwimlaneGroup, onSwimlaneChange, legendViewMode, resolvedTasks, controlsExpanded = false, hasDependencies = false, dependenciesActive = false, onControlsToggle, exportMode = false) {
   let visibleGroups;
   if (activeGroupName) {
     const activeGroup = tagGroups.filter(
@@ -36676,7 +36566,7 @@ function renderTagLegend(svg, chartG, tagGroups, activeGroupName, chartLeftMargi
         placement: "top-center",
         titleRelation: "below-title"
       },
-      mode: "fixed",
+      mode: exportMode ? "export" : "preview",
       capsulePillAddonWidth: iconReserve,
       controlsGroup: controlsToggles.length > 0 ? { toggles: controlsToggles } : void 0
     };
@@ -36783,7 +36673,7 @@ function renderTagLegend(svg, chartG, tagGroups, activeGroupName, chartLeftMargi
         placement: "top-center",
         titleRelation: "below-title"
       },
-      mode: "fixed",
+      mode: exportMode ? "export" : "preview",
       controlsGroup: { toggles: controlsToggles }
     };
     const tagGroupG = legendRow.append("g");
@@ -37666,9 +37556,6 @@ function renderState(container, graph, layout, palette, isDark, onClickItem, exp
   const defs = svg.append("defs");
   defs.append("marker").attr("id", "st-arrow").attr("viewBox", `0 0 ${ARROWHEAD_W5} ${ARROWHEAD_H5}`).attr("refX", ARROWHEAD_W5).attr("refY", ARROWHEAD_H5 / 2).attr("markerWidth", ARROWHEAD_W5).attr("markerHeight", ARROWHEAD_H5).attr("orient", "auto").append("polygon").attr("points", `0,0 ${ARROWHEAD_W5},${ARROWHEAD_H5 / 2} 0,${ARROWHEAD_H5}`).attr("fill", palette.textMuted);
   const edgeColors = /* @__PURE__ */ new Set();
-  for (const edge of layout.edges) {
-    if (edge.color) edgeColors.add(edge.color);
-  }
   for (const color of edgeColors) {
     const id = `st-arrow-${color.replace("#", "")}`;
     defs.append("marker").attr("id", id).attr("viewBox", `0 0 ${ARROWHEAD_W5} ${ARROWHEAD_H5}`).attr("refX", ARROWHEAD_W5).attr("refY", ARROWHEAD_H5 / 2).attr("markerWidth", ARROWHEAD_W5).attr("markerHeight", ARROWHEAD_H5).attr("orient", "auto").append("polygon").attr("points", `0,0 ${ARROWHEAD_W5},${ARROWHEAD_H5 / 2} 0,${ARROWHEAD_H5}`).attr("fill", color);
@@ -37763,8 +37650,8 @@ function renderState(container, graph, layout, palette, isDark, onClickItem, exp
   for (let ei = 0; ei < layout.edges.length; ei++) {
     const edge = layout.edges[ei];
     const edgeG = contentG.append("g").attr("class", "st-edge-group").attr("data-line-number", String(edge.lineNumber));
-    const edgeColor3 = edge.color ?? palette.textMuted;
-    const markerId = edge.color ? `st-arrow-${edge.color.replace("#", "")}` : "st-arrow";
+    const edgeColor3 = palette.textMuted;
+    const markerId = "st-arrow";
     if (edge.source === edge.target) {
       const node = nodePositionMap.get(edge.source);
       if (node) {
@@ -38634,7 +38521,7 @@ function renderTechRadar(container, parsed, palette, isDark, onClickItem, export
         }
       ],
       position: { placement: "top-center", titleRelation: "below-title" },
-      mode: "fixed",
+      mode: options?.exportMode ? "export" : "preview",
       controlsGroup: {
         toggles: [
           {
@@ -39237,7 +39124,7 @@ function getQuadrantLabelPosition(position, cx, cy, maxRadius) {
       };
   }
 }
-function renderTechRadarForExport(container, parsed, palette, isDark, exportDims, viewState) {
+function renderTechRadarForExport(container, parsed, palette, isDark, exportDims, viewState, exportMode) {
   renderTechRadar(
     container,
     parsed,
@@ -39245,7 +39132,8 @@ function renderTechRadarForExport(container, parsed, palette, isDark, exportDims
     isDark,
     void 0,
     exportDims,
-    viewState
+    viewState,
+    { exportMode }
   );
 }
 var d3Selection16, BLIP_RADIUS2, BLIP_FONT_SIZE2, RING_LABEL_FONT_SIZE, QUADRANT_LABEL_FONT_SIZE, TITLE_FONT_SIZE3, LISTING_FONT_SIZE, LISTING_HEADER_FONT_SIZE, LISTING_TOP_MARGIN, LISTING_COL_GAP, LISTING_LINE_HEIGHT, LISTING_BLIP_R;
@@ -39624,7 +39512,7 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
         titleRelation: "inline-with-title"
       },
       titleWidth: 0,
-      mode: exportDims ? "inline" : "fixed"
+      mode: options?.exportMode ? "export" : "preview"
     };
     const legendState = { activeGroup: effectiveActiveGroup };
     const legendCallbacks = {
@@ -40337,7 +40225,8 @@ function renderJourneyMapForExport(content, theme, palette) {
   const layout = layoutJourneyMap(parsed, palette, { isDark });
   const container = document.createElement("div");
   renderJourneyMap(container, parsed, palette, isDark, {
-    exportDims: { width: layout.totalWidth, height: layout.totalHeight }
+    exportDims: { width: layout.totalWidth, height: layout.totalHeight },
+    exportMode: true
   });
   const svgEl = container.querySelector("svg");
   if (!svgEl) return "";
@@ -41103,7 +40992,7 @@ function renderCycle(container, parsed, palette, isDark, onClickItem, exportDims
     const legendConfig = {
       groups: [],
       position: { placement: "top-center", titleRelation: "below-title" },
-      mode: "fixed",
+      mode: renderOptions?.exportMode ? "export" : "preview",
       controlsGroup
     };
     const legendState = {
@@ -41287,7 +41176,7 @@ function renderCycle(container, parsed, palette, isDark, onClickItem, exportDims
     }
   }
 }
-function renderCycleForExport(container, parsed, palette, isDark, exportDims, viewState) {
+function renderCycleForExport(container, parsed, palette, isDark, exportDims, viewState, exportMode) {
   renderCycle(
     container,
     parsed,
@@ -41295,7 +41184,8 @@ function renderCycleForExport(container, parsed, palette, isDark, exportDims, vi
     isDark,
     void 0,
     exportDims,
-    viewState
+    viewState,
+    { exportMode }
   );
 }
 function resolveNodeColor5(color, palette, defaultColor) {
@@ -42925,9 +42815,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;
@@ -42982,31 +42869,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;
@@ -43645,7 +43507,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,
@@ -43819,6 +43681,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) {
@@ -43885,16 +43750,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
       });
@@ -43920,7 +43809,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
             });
           }
@@ -43947,7 +43836,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
             y: dividerY + 14,
             text: "else",
             bold: false,
-            italic: true,
+            italic: false,
             blockLine: el.elseLineNumber
           });
         }
@@ -44017,7 +43906,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) {
@@ -44219,7 +44108,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,
@@ -44276,27 +44165,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;
@@ -44324,7 +44198,7 @@ function renderParticipant(svg, participant, cx, cy, palette, isDark, color, tag
     });
   }
 }
-var d3Selection21, 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 d3Selection21, 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";
@@ -44346,7 +44220,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;
@@ -44538,7 +44411,7 @@ function parseVisualization(content, palette) {
   const warn2 = (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");
@@ -44620,7 +44493,9 @@ function parseVisualization(content, palette) {
     if (currentTimelineTagGroup && indent === 0) {
       currentTimelineTagGroup = null;
     }
-    const groupMatch = line12.match(/^\[(.+?)\](?:\s*\(([^)]+)\))?\s*$/);
+    const groupMatch = line12.match(
+      /^\[(.+?)\](?:\s+(red|orange|yellow|green|blue|purple|teal|cyan|gray|black|white))?\s*$/
+    );
     if (groupMatch) {
       if (result.type === "arc") {
         const name = groupMatch[1].trim();
@@ -44662,7 +44537,7 @@ function parseVisualization(content, palette) {
     }
     if (result.type === "arc") {
       const linkMatch = line12.match(
-        /^(.+?)\s*->\s*(.+?)(?:\(([^)]+)\))?\s*(?:\s+(-?[\d,_]+(?:\.[\d]+)?))?$/
+        /^(.+?)\s*->\s*(.+?)(?:\s+(red|orange|yellow|green|blue|purple|teal|cyan|gray|black|white))?(?:\s+(-?[\d,_]+(?:\.[\d]+)?))?$/
       );
       if (linkMatch) {
         const source = linkMatch[1].trim();
@@ -44701,7 +44576,7 @@ function parseVisualization(content, palette) {
       } else {
         if (line12.startsWith("//")) continue;
         const eraEntryMatch = line12.match(
-          /^(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s*(?:->|\u2013>)\s*(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s+(.+?)(?:\s*\(([^)]+)\))?\s*$/
+          /^(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s*(?:->|\u2013>)\s*(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s+(.+?)(?:\s+(red|orange|yellow|green|blue|purple|teal|cyan|gray|black|white))?\s*$/
         );
         if (eraEntryMatch) {
           const colorAnnotation = eraEntryMatch[4]?.trim() || null;
@@ -44729,7 +44604,7 @@ function parseVisualization(content, palette) {
       } else {
         if (line12.startsWith("//")) continue;
         const markerEntryMatch = line12.match(
-          /^(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s+(.+?)(?:\s*\(([^)]+)\))?\s*$/
+          /^(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s+(.+?)(?:\s+(red|orange|yellow|green|blue|purple|teal|cyan|gray|black|white))?\s*$/
         );
         if (markerEntryMatch) {
           const colorAnnotation = markerEntryMatch[3]?.trim() || null;
@@ -44762,7 +44637,7 @@ function parseVisualization(content, palette) {
         continue;
       }
       const eraMatch = line12.match(
-        /^era\s+(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s*(?:->|\u2013>)\s*(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s+(.+?)(?:\s*\(([^)]+)\))?\s*$/
+        /^era\s+(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s*(?:->|\u2013>)\s*(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s+(.+?)(?:\s+(red|orange|yellow|green|blue|purple|teal|cyan|gray|black|white))?\s*$/
       );
       if (eraMatch) {
         const colorAnnotation = eraMatch[4]?.trim() || null;
@@ -44781,7 +44656,7 @@ function parseVisualization(content, palette) {
         continue;
       }
       const markerMatch = line12.match(
-        /^marker\s+(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s+(.+?)(?:\s*\(([^)]+)\))?\s*$/
+        /^marker\s+(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s+(.+?)(?:\s+(red|orange|yellow|green|blue|purple|teal|cyan|gray|black|white))?\s*$/
       );
       if (markerMatch) {
         const colorAnnotation = markerMatch[3]?.trim() || null;
@@ -44902,13 +44777,11 @@ function parseVisualization(content, palette) {
         }
       }
       if (!/^(solid-fill|no-name|no-value|no-percent|no-title)$/i.test(line12)) {
-        const legacyAliasMatch = line12.match(
-          /^([^(:]+?)(?:\(([^)]+)\))?\s+alias\s+(\S+)\s*$/i
-        );
+        const legacyAliasMatch = line12.match(/^(.+?)\s+alias\s+(\S+)\s*$/i);
         if (legacyAliasMatch) {
-          const name = legacyAliasMatch[1].trim();
-          const colorName = legacyAliasMatch[2]?.trim() ?? null;
-          const aliasToken = legacyAliasMatch[3].trim();
+          const nameWithMaybeColor = legacyAliasMatch[1].trim();
+          const aliasToken = legacyAliasMatch[2].trim();
+          const { label: name, colorName } = peelTrailingColorName(nameWithMaybeColor);
           let color = null;
           if (colorName) {
             color = resolveColorWithDiagnostic(
@@ -44930,11 +44803,12 @@ function parseVisualization(content, palette) {
           continue;
         }
         const setDeclMatch = line12.match(
-          /^([^(:]+?)(?:\(([^)]+)\))?(?:\s+as\s+([A-Za-z][A-Za-z0-9_]{0,11}))?\s*$/i
+          /^(.+?)(?:\s+as\s+([A-Za-z][A-Za-z0-9_]{0,11}))?\s*$/i
         );
         if (setDeclMatch) {
-          const name = setDeclMatch[1].trim();
-          const colorName = setDeclMatch[2]?.trim() ?? null;
+          const nameWithMaybeColor = setDeclMatch[1].trim();
+          const alias = setDeclMatch[2]?.trim() ?? null;
+          const { label: name, colorName } = peelTrailingColorName(nameWithMaybeColor);
           let color = null;
           if (colorName) {
             color = resolveColorWithDiagnostic(
@@ -44944,7 +44818,6 @@ function parseVisualization(content, palette) {
               palette
             ) ?? null;
           }
-          const alias = setDeclMatch[3]?.trim() ?? null;
           result.vennSets.push({ name, alias, color, lineNumber });
           continue;
         }
@@ -44990,10 +44863,9 @@ function parseVisualization(content, palette) {
       if (quadrantMatch) {
         const position = quadrantMatch[1].toLowerCase();
         const labelPart = quadrantMatch[2].trim();
-        const labelColorMatch = labelPart.match(/^(.+?)\s*\(([^)]+)\)\s*$/);
-        const text = labelColorMatch ? labelColorMatch[1].trim() : labelPart;
-        const color = labelColorMatch ? resolveColorWithDiagnostic(
-          labelColorMatch[2].trim(),
+        const { label: text, colorName } = peelTrailingColorName(labelPart);
+        const color = colorName ? resolveColorWithDiagnostic(
+          colorName,
           lineNumber,
           result.diagnostics,
           palette
@@ -45183,10 +45055,9 @@ function parseVisualization(content, palette) {
           );
           continue;
         }
-        const colorMatch = joinedLabel.match(/^(.+?)\(([^)]+)\)\s*$/);
-        const labelPart = colorMatch ? colorMatch[1].trim() : joinedLabel;
-        const colorPart = colorMatch ? resolveColorWithDiagnostic(
-          colorMatch[2].trim(),
+        const { label: labelPart, colorName: colorWord } = peelTrailingColorName(joinedLabel);
+        const colorPart = colorWord ? resolveColorWithDiagnostic(
+          colorWord,
           lineNumber,
           result.diagnostics,
           palette
@@ -46475,7 +46346,7 @@ function makeTimelineHoverHelpers() {
     setTagAttrs
   };
 }
-function renderTimelineTagLegendOverlay(container, parsed, palette, isDark, setup, hovers, onClickItem, exportDims, swimlaneTagGroup, activeTagGroup, onTagStateChange, viewMode) {
+function renderTimelineTagLegendOverlay(container, parsed, palette, isDark, setup, hovers, onClickItem, exportDims, swimlaneTagGroup, activeTagGroup, onTagStateChange, viewMode, exportMode) {
   if (parsed.timelineTagGroups.length === 0) return;
   const { width, textColor, groupColorMap, solid } = setup;
   const { FADE_OPACITY: FADE_OPACITY3, fadeReset, fadeToTagValue } = hovers;
@@ -46546,7 +46417,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 };
@@ -46580,7 +46451,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;
@@ -47390,7 +47261,7 @@ function renderTimelineVertical(container, parsed, palette, isDark, setup, hover
     }
   }
 }
-function renderTimeline(container, parsed, palette, isDark, onClickItem, exportDims, activeTagGroup, swimlaneTagGroup, onTagStateChange, viewMode) {
+function renderTimeline(container, parsed, palette, isDark, onClickItem, exportDims, activeTagGroup, swimlaneTagGroup, onTagStateChange, viewMode, exportMode) {
   const setup = setupTimeline(
     container,
     parsed,
@@ -47465,7 +47336,8 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
     swimlaneTagGroup,
     activeTagGroup,
     onTagStateChange,
-    viewMode
+    viewMode,
+    exportMode
   );
 }
 function getRotateFn(mode) {
@@ -48562,6 +48434,7 @@ function finalizeSvgExport(container, theme, palette) {
   return svgHtml;
 }
 async function renderForExport(content, theme, palette, viewState, options) {
+  const exportMode = options?.exportMode ?? false;
   const { parseDgmoChartType: parseDgmoChartType2 } = await Promise.resolve().then(() => (init_dgmo_router(), dgmo_router_exports));
   const detectedType = parseDgmoChartType2(content);
   if (detectedType === "org") {
@@ -48603,7 +48476,9 @@ async function renderForExport(content, theme, palette, viewState, options) {
       void 0,
       { width: exportWidth, height: exportHeight },
       activeTagGroup,
-      hiddenAttributes
+      hiddenAttributes,
+      void 0,
+      exportMode
     );
     return finalizeSvgExport(container2, theme, effectivePalette2);
   }
@@ -48645,7 +48520,8 @@ async function renderForExport(content, theme, palette, viewState, options) {
       void 0,
       { width: exportWidth, height: exportHeight },
       activeTagGroup,
-      hiddenAttributes
+      hiddenAttributes,
+      exportMode
     );
     return finalizeSvgExport(container2, theme, effectivePalette2);
   }
@@ -48668,7 +48544,8 @@ async function renderForExport(content, theme, palette, viewState, options) {
       currentSwimlaneGroup: viewState?.swim ?? null,
       collapsedLanes: viewState?.cl ? new Set(viewState.cl) : void 0,
       collapsedColumns: viewState?.cc ? new Set(viewState.cc) : void 0,
-      compactMeta: viewState?.cm
+      compactMeta: viewState?.cm,
+      exportMode
     });
     return finalizeSvgExport(container2, theme, effectivePalette2);
   }
@@ -48692,7 +48569,9 @@ async function renderForExport(content, theme, palette, viewState, options) {
       effectivePalette2,
       theme === "dark",
       void 0,
-      { width: exportWidth, height: exportHeight }
+      { width: exportWidth, height: exportHeight },
+      void 0,
+      exportMode
     );
     return finalizeSvgExport(container2, theme, effectivePalette2);
   }
@@ -48722,7 +48601,8 @@ async function renderForExport(content, theme, palette, viewState, options) {
         erParsed.options["active-tag"],
         viewState?.tag ?? options?.tagGroup
       ),
-      viewState?.sem
+      viewState?.sem,
+      exportMode
     );
     return finalizeSvgExport(container2, theme, effectivePalette2);
   }
@@ -48755,7 +48635,8 @@ async function renderForExport(content, theme, palette, viewState, options) {
       {
         exportDims: { width: exportWidth, height: exportHeight },
         activeTagGroup: viewState?.tag ?? options?.tagGroup,
-        hiddenTagValues: blHiddenTagValues
+        hiddenTagValues: blHiddenTagValues,
+        exportMode
       }
     );
     return finalizeSvgExport(container2, theme, effectivePalette2);
@@ -48801,7 +48682,7 @@ async function renderForExport(content, theme, palette, viewState, options) {
       void 0,
       hideDescriptions,
       colorByDepth ? null : activeTagGroup,
-      colorByDepth ? { colorByDepth: true } : void 0
+      colorByDepth ? { colorByDepth: true, exportMode } : { exportMode }
     );
     return finalizeSvgExport(container2, theme, effectivePalette2);
   }
@@ -48864,7 +48745,8 @@ async function renderForExport(content, theme, palette, viewState, options) {
         c4Parsed.tagGroups,
         c4Parsed.options["active-tag"],
         viewState?.tag ?? options?.tagGroup
-      )
+      ),
+      exportMode
     );
     return finalizeSvgExport(container2, theme, effectivePalette2);
   }
@@ -49000,7 +48882,8 @@ async function renderForExport(content, theme, palette, viewState, options) {
           resolved.tagGroups,
           resolved.options.activeTag ?? void 0,
           viewState?.tag ?? options?.tagGroup
-        )
+        ),
+        exportMode
       },
       { width: EXPORT_W, height: EXPORT_H }
     );
@@ -49041,7 +48924,8 @@ async function renderForExport(content, theme, palette, viewState, options) {
       effectivePalette2,
       theme === "dark",
       { width: RADAR_EXPORT_W, height: RADAR_EXPORT_H },
-      viewState
+      viewState,
+      exportMode
     );
     return finalizeSvgExport(container2, theme, effectivePalette2);
   }
@@ -49061,7 +48945,8 @@ async function renderForExport(content, theme, palette, viewState, options) {
       jmLayout.totalHeight
     );
     renderJourneyMap2(container2, jmParsed, effectivePalette2, theme === "dark", {
-      exportDims: { width: jmLayout.totalWidth, height: jmLayout.totalHeight }
+      exportDims: { width: jmLayout.totalWidth, height: jmLayout.totalHeight },
+      exportMode
     });
     return finalizeSvgExport(container2, theme, effectivePalette2);
   }
@@ -49078,7 +48963,8 @@ async function renderForExport(content, theme, palette, viewState, options) {
       effectivePalette2,
       theme === "dark",
       { width: EXPORT_WIDTH, height: EXPORT_HEIGHT },
-      viewState
+      viewState,
+      exportMode
     );
     return finalizeSvgExport(container2, theme, effectivePalette2);
   }
@@ -49197,7 +49083,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);
@@ -50233,18 +50122,18 @@ function specializeKeyword(value) {
 // src/editor/dgmo.grammar.js
 var parser = import_lr.LRParser.deserialize({
   version: 14,
-  states: "!WQVQPOOOOQO'#DV'#DVOOQO'#DQ'#DQO%cQPO'#CdOOQO'#DP'#DPQVQPOOOOQO-E7O-E7OOOQO,59O,59OOOQO-E6}-E6}",
-  stateData: "&X~OwOS~OPPOQPORPOSPOTPOVSOXPOYPOZPO[PO]PO^PO_PO`POaPObPOcPOdPOePOfPOgPOhPOiPOjPOkPOlPOmPOnPOoPOpPOqPOrPOxSO~OPPOQPORPOSPOTPOXPOYPOZPO[PO]PO^PO_PO`POaPObPOcPOdPOePOfPOgPOhPOiPOjPOkPOlPOmPOnPOoPOpPOqPOrPO~OxVO~P#`OVXYZ[]^_`ghijklmnoabcdefpqrk~",
-  goto: "!czPPPPPPPP{PPPPPPPPPPPPPPPPPPPPPPPPPP!P!VPPPP!^TSOTQTORWTSROTRURVQORT",
-  nodeNames: "\u26A0 ChartType TagKeyword DirectiveKeyword ControlKeyword ModifierKeyword Document Comment ContentLine SyncArrow AsyncArrow Duration DateLiteral Percentage Number SectionMarker Url OpenBracket CloseBracket OpenParen CloseParen OpenAngle CloseAngle ColorAnnotation Pipe Colon Comma Plus Dash Tilde Star Question QuotedString Identifier Punct",
-  maxTerm: 41,
+  states: "!WQVQPOOOOQO'#DU'#DUOOQO'#DP'#DPO%]QPO'#CdOOQO'#DO'#DOQVQPOOOOQO-E6}-E6}OOQO,59O,59OOOQO-E6|-E6|",
+  stateData: "&Q~OvOS~OPPOQPORPOSPOTPOVSOXPOYPOZPO[PO]PO^PO_PO`POaPObPOcPOdPOePOfPOgPOhPOiPOjPOkPOlPOmPOnPOoPOpPOqPOwSO~OPPOQPORPOSPOTPOXPOYPOZPO[PO]PO^PO_PO`POaPObPOcPOdPOePOfPOgPOhPOiPOjPOkPOlPOmPOnPOoPOpPOqPO~OwVO~P#]OVXYZ[]^_`ghijklmnabcdefopqk~",
+  goto: "!byPPPPPPPPzPPPPPPPPPPPPPPPPPPPPPPPPP!O!UPPPP!]TSOTQTORWTSROTRURVQORT",
+  nodeNames: "\u26A0 ChartType TagKeyword DirectiveKeyword ControlKeyword ModifierKeyword Document Comment ContentLine SyncArrow AsyncArrow Duration DateLiteral Percentage Number SectionMarker Url OpenBracket CloseBracket OpenParen CloseParen OpenAngle CloseAngle Pipe Colon Comma Plus Dash Tilde Star Question QuotedString Identifier Punct",
+  maxTerm: 40,
   skippedNodes: [0],
   repeatNodeCount: 2,
-  tokenData: "=_~RzOX#uXY#zYZ$VZp#upq#zqr#urs$[st#uux#uxy%eyz&Tz{&[{|&c|}&j}!O&q!O!P#u!P!Q'Q!Q!['q![!]0d!]!^#u!^!_0k!_!`0r!`!a1P!a!b1W!b!c#u!c!}1_!}#O4e#O#P#u#P#Q4j#Q#R#u#R#S1_#S#T#u#T#[1_#[#]4q#]#o1_#o#p#u#p#q<q#q#r#u#r#s<x#s;'S#u;'S;=`=X<%lO#u~#zOr~~$PQw~XY#zpq#z~$[Ox~~$aUr~OY$sZr$srs%Ys;'S$s;'S;=`%_<%lO$s~$vUOY$sZr$srs%Ys;'S$s;'S;=`%_<%lO$s~%_Op~~%bP;=`<%l$s~%lQc~r~}!O%r#T#o%r~%uRyz&O}!O%r#T#o%r~&TOg~~&[Od~r~~&cOn~r~~&jOk~r~~&qOj~r~~&xPl~r~!`!a&{~'QOX~~'VPr~!P!Q'Y~'_SV~OY'YZ;'S'Y;'S;=`'k<%lO'Y~'nP;=`<%l'Y~'x]^~r~uv(q|}(v!O!P)s!Q![+d#R#S0O#U#V*n#W#X*t#[#]*t#a#b+R#e#f*t#g#h*t#k#l*t#m#n*t~(vO]~~(yP!Q![(|~)PP!Q![)S~)VP!Q![)Y~)_Q^~|}(v!O!P)e~)hP!Q![)k~)pP^~!Q![)k~)vP!Q![)y~*OY^~uv(q!Q![)y#U#V*n#W#X*t#[#]*t#a#b+R#e#f*t#g#h*t#k#l*t#m#n*t~*qP#W#X*t~*yPZ~!a!b*|~+ROZ~~+WQZ~!a!b*|#]#^+^~+aP#b#c*t~+i]^~uv(q|}(v!O!P)s!Q![,b#R#S0O#U#V*n#W#X*t#[#]*t#a#b+R#e#f*t#g#h*t#k#l*t#m#n*t~,g]^~uv(q|}(v!O!P)s!Q![-`#R#S0O#U#V*n#W#X*t#[#]*t#a#b+R#e#f*t#g#h*t#k#l*t#m#n*t~-e]^~uv(q}!O.^!O!P)s!Q![/T#R#S0O#U#V*n#W#X*t#[#]*t#a#b+R#e#f*t#g#h*t#k#l*t#m#n*t~.aP!Q![.d~.gP!Q![.j~.oP[~}!O.r~.uP!Q![.x~.{P!Q![/O~/TO[~~/Y[^~uv(q!O!P)s!Q![/T#R#S0O#U#V*n#W#X*t#[#]*t#a#b+R#e#f*t#g#h*t#k#l*t#m#n*t~0RP!Q![0U~0ZR^~!O!P)e!Q![0U#R#S0O~0kOi~r~~0rOe~r~~0wPr~!_!`0z~1PO_~~1WOf~r~~1_Oo~r~~1f_q~r~qr2est2evw2ewx2e{|2e}!O3i!O!P2e!P!Q2e!Q![2e!_!`2e!a!b2e!b!c2e!c!}2e#R#S2e#T#o2e~2j_q~qr2est2evw2ewx2e{|2e}!O3i!O!P2e!P!Q2e!Q![2e!_!`2e!a!b2e!b!c2e!c!}2e#R#S2e#T#o2e~3l]qr2est2evw2ewx2e{|2e!O!P2e!P!Q2e!_!`2e!a!b2e!b!c2e!c!}2e#R#S2e#T#o2e~4jOa~~4qOb~r~~4xaq~r~qr2est2evw2ewx2e{|2e}!O3i!O!P2e!P!Q2e!Q![2e!_!`2e!a!b2e!b!c2e!c!}2e#R#S2e#T#h2e#h#i5}#i#o2e~6Saq~qr2est2evw2ewx2e{|2e}!O3i!O!P2e!P!Q2e!Q![2e!_!`2e!a!b2e!b!c2e!c!}2e#R#S2e#T#h2e#h#i7X#i#o2e~7^aq~qr2est2evw2ewx2e{|2e}!O3i!O!P2e!P!Q2e!Q![2e!_!`2e!a!b2e!b!c2e!c!}2e#R#S2e#T#d2e#d#e8c#e#o2e~8hbq~qr2est2evw2ewx2e{|2e}!O3i!O!P2e!P!Q2e!Q![2e![!]9p!_!`2e!a!b2e!b!c2e!c!}2e#R#S2e#T#g2e#g#h;j#h#o2e~9sP!P!Q9v~9yP!P!Q9|~:PYOX:oZp:oqy:oz|:o}!`:o!a#P:o#Q#p:o#q;'S:o;'S;=`;d<%lO:o~:tY`~OX:oZp:oqy:oz|:o}!`:o!a#P:o#Q#p:o#q;'S:o;'S;=`;d<%lO:o~;gP;=`<%l:o~;o`q~qr2est2evw2ewx2e{|2e}!O3i!O!P2e!P!Q2e!Q![2e![!]9p!_!`2e!a!b2e!b!c2e!c!}2e#R#S2e#T#o2e~<xOh~r~~=PPm~r~!`!a=S~=XOY~~=[P;=`<%l#u",
+  tokenData: "<v~RzOX#uXY#zYZ$VZp#upq#zqr#urs$[st#uux#uxy%eyz%lz{%s{|%z|}&R}!O&Y!O!P#u!P!Q&i!Q!['Y![!]/{!]!^#u!^!_0S!_!`0Z!`!a0h!a!b0o!b!c#u!c!}0v!}#O3|#O#P#u#P#Q4R#Q#R#u#R#S0v#S#T#u#T#[0v#[#]4Y#]#o0v#o#p#u#p#q<Y#q#r#u#r#s<a#s;'S#u;'S;=`<p<%lO#u~#zOq~~$PQv~XY#zpq#z~$[Ow~~$aUq~OY$sZr$srs%Ys;'S$s;'S;=`%_<%lO$s~$vUOY$sZr$srs%Ys;'S$s;'S;=`%_<%lO$s~%_Oo~~%bP;=`<%l$s~%lOc~q~~%sOd~q~~%zOm~q~~&ROj~q~~&YOi~q~~&aPk~q~!`!a&d~&iOX~~&nPq~!P!Q&q~&vSV~OY&qZ;'S&q;'S;=`'S<%lO&q~'VP;=`<%l&q~'a]^~q~uv(Y|}(_!O!P)[!Q![*{#R#S/g#U#V*V#W#X*]#[#]*]#a#b*j#e#f*]#g#h*]#k#l*]#m#n*]~(_O]~~(bP!Q![(e~(hP!Q![(k~(nP!Q![(q~(vQ^~|}(_!O!P(|~)PP!Q![)S~)XP^~!Q![)S~)_P!Q![)b~)gY^~uv(Y!Q![)b#U#V*V#W#X*]#[#]*]#a#b*j#e#f*]#g#h*]#k#l*]#m#n*]~*YP#W#X*]~*bPZ~!a!b*e~*jOZ~~*oQZ~!a!b*e#]#^*u~*xP#b#c*]~+Q]^~uv(Y|}(_!O!P)[!Q![+y#R#S/g#U#V*V#W#X*]#[#]*]#a#b*j#e#f*]#g#h*]#k#l*]#m#n*]~,O]^~uv(Y|}(_!O!P)[!Q![,w#R#S/g#U#V*V#W#X*]#[#]*]#a#b*j#e#f*]#g#h*]#k#l*]#m#n*]~,|]^~uv(Y}!O-u!O!P)[!Q![.l#R#S/g#U#V*V#W#X*]#[#]*]#a#b*j#e#f*]#g#h*]#k#l*]#m#n*]~-xP!Q![-{~.OP!Q![.R~.WP[~}!O.Z~.^P!Q![.a~.dP!Q![.g~.lO[~~.q[^~uv(Y!O!P)[!Q![.l#R#S/g#U#V*V#W#X*]#[#]*]#a#b*j#e#f*]#g#h*]#k#l*]#m#n*]~/jP!Q![/m~/rR^~!O!P(|!Q![/m#R#S/g~0SOh~q~~0ZOe~q~~0`Pq~!_!`0c~0hO_~~0oOf~q~~0vOn~q~~0}_p~q~qr1|st1|vw1|wx1|{|1|}!O3Q!O!P1|!P!Q1|!Q![1|!_!`1|!a!b1|!b!c1|!c!}1|#R#S1|#T#o1|~2R_p~qr1|st1|vw1|wx1|{|1|}!O3Q!O!P1|!P!Q1|!Q![1|!_!`1|!a!b1|!b!c1|!c!}1|#R#S1|#T#o1|~3T]qr1|st1|vw1|wx1|{|1|!O!P1|!P!Q1|!_!`1|!a!b1|!b!c1|!c!}1|#R#S1|#T#o1|~4ROa~~4YOb~q~~4aap~q~qr1|st1|vw1|wx1|{|1|}!O3Q!O!P1|!P!Q1|!Q![1|!_!`1|!a!b1|!b!c1|!c!}1|#R#S1|#T#h1|#h#i5f#i#o1|~5kap~qr1|st1|vw1|wx1|{|1|}!O3Q!O!P1|!P!Q1|!Q![1|!_!`1|!a!b1|!b!c1|!c!}1|#R#S1|#T#h1|#h#i6p#i#o1|~6uap~qr1|st1|vw1|wx1|{|1|}!O3Q!O!P1|!P!Q1|!Q![1|!_!`1|!a!b1|!b!c1|!c!}1|#R#S1|#T#d1|#d#e7z#e#o1|~8Pbp~qr1|st1|vw1|wx1|{|1|}!O3Q!O!P1|!P!Q1|!Q![1|![!]9X!_!`1|!a!b1|!b!c1|!c!}1|#R#S1|#T#g1|#g#h;R#h#o1|~9[P!P!Q9_~9bP!P!Q9e~9hYOX:WZp:Wqy:Wz|:W}!`:W!a#P:W#Q#p:W#q;'S:W;'S;=`:{<%lO:W~:]Y`~OX:WZp:Wqy:Wz|:W}!`:W!a#P:W#Q#p:W#q;'S:W;'S;=`:{<%lO:W~;OP;=`<%l:W~;W`p~qr1|st1|vw1|wx1|{|1|}!O3Q!O!P1|!P!Q1|!Q![1|![!]9X!_!`1|!a!b1|!b!c1|!c!}1|#R#S1|#T#o1|~<aOg~q~~<hPl~q~!`!a<k~<pOY~~<sP;=`<%l#u",
   tokenizers: [0],
   topRules: { "Document": [0, 6] },
-  specialized: [{ term: 33, get: (value, stack) => specializeKeyword(value, stack) << 1, external: specializeKeyword }],
-  tokenPrec: 210
+  specialized: [{ term: 32, get: (value, stack) => specializeKeyword(value, stack) << 1, external: specializeKeyword }],
+  tokenPrec: 204
 });
 
 // src/editor/highlight-api.ts
@@ -50267,7 +50156,6 @@ var NODE_TO_ROLE = {
   Percentage: "number",
   SectionMarker: "heading",
   Url: "url",
-  ColorAnnotation: "colorAnnotation",
   OpenBracket: "bracket",
   CloseBracket: "bracket",
   OpenParen: "bracket",
@@ -50684,7 +50572,7 @@ pre.dgmo, code.language-dgmo, pre > code.language-dgmo,
 
 // src/auto/index.ts
 init_safe_href();
-var VERSION = "0.15.1";
+var VERSION = "0.17.0";
 var DEFAULTS = {
   theme: "auto",
   palette: "nord",
@@ -50832,7 +50720,7 @@ function resolveTheme(theme) {
 function ensureStyles() {
   if (typeof document === "undefined") return;
   const html = document.documentElement;
-  if (html && html.dataset && html.dataset[STYLE_FLAG] === "1") return;
+  if (html?.dataset?.[STYLE_FLAG] === "1") return;
   const linked = document.querySelector(
     'link[rel="stylesheet"][href*="auto.css"]'
   );
@@ -50988,7 +50876,7 @@ function deriveAriaLabel(source) {
 function determineReplaceTarget(matched) {
   if (matched.tagName === "CODE") {
     const parent = matched.parentElement;
-    if (parent && parent.tagName === "PRE") {
+    if (parent?.tagName === "PRE") {
       const meaningfulChildren = Array.from(parent.childNodes).filter(
         (n) => n.nodeType === 1 || n.nodeType === 3 && (n.textContent || "").trim().length > 0
       );