@diagrammo/dgmo 0.8.14 → 0.8.16

package/dist/index.cjs

@@ -322,20 +322,39 @@ var init_label_layout = __esm({
 });
 
 // src/colors.ts
+function isRecognizedColorName(name) {
+  return Object.prototype.hasOwnProperty.call(colorNames, name.toLowerCase());
+}
 function resolveColor(color, palette) {
+  if (!color) return null;
   if (color.startsWith("#")) return null;
   const lower = color.toLowerCase();
+  if (!isRecognizedColorName(lower)) return null;
   if (palette) {
     const named = palette.colors[lower];
     if (named) return named;
   }
-  if (colorNames[lower]) return colorNames[lower];
-  return color;
+  return colorNames[lower];
+}
+function resolveColorWithDiagnostic(color, line10, diagnostics, palette) {
+  const resolved = resolveColor(color, palette);
+  if (resolved !== null) return resolved;
+  const hint = suggest(color, RECOGNIZED_COLOR_NAMES);
+  const suggestion = hint ? ` ${hint}` : "";
+  diagnostics.push(
+    makeDgmoError(
+      line10,
+      `Unknown color "${color}". Allowed: ${RECOGNIZED_COLOR_NAMES.join(", ")}.${suggestion}`,
+      "warning"
+    )
+  );
+  return void 0;
 }
-var nord, colorNames, seriesColors;
+var nord, colorNames, RECOGNIZED_COLOR_NAMES, seriesColors;
 var init_colors = __esm({
   "src/colors.ts"() {
     "use strict";
+    init_diagnostics();
     nord = {
       // Polar Night (dark)
       nord0: "#2e3440",
@@ -372,9 +391,23 @@ var init_colors = __esm({
       purple: nord.nord15,
       teal: nord.nord7,
       cyan: nord.nord8,
-      lightblue: nord.nord8,
-      gray: nord.nord3
+      gray: nord.nord3,
+      black: nord.nord0,
+      white: nord.nord6
     };
+    RECOGNIZED_COLOR_NAMES = Object.freeze([
+      "red",
+      "orange",
+      "yellow",
+      "green",
+      "blue",
+      "purple",
+      "teal",
+      "cyan",
+      "gray",
+      "black",
+      "white"
+    ]);
     seriesColors = [
       nord.nord10,
       // blue
@@ -631,7 +664,9 @@ var init_bold = __esm({
           purple: "#cc00cc",
           teal: "#008080",
           cyan: "#00cccc",
-          gray: "#808080"
+          gray: "#808080",
+          black: "#000000",
+          white: "#f0f0f0"
         }
       },
       dark: {
@@ -654,7 +689,9 @@ var init_bold = __esm({
           purple: "#ff00ff",
           teal: "#00cccc",
           cyan: "#00ffff",
-          gray: "#808080"
+          gray: "#808080",
+          black: "#111111",
+          white: "#ffffff"
         }
       }
     };
@@ -701,8 +738,10 @@ var init_catppuccin = __esm({
           purple: "#8839ef",
           teal: "#179299",
           cyan: "#209fb5",
-          gray: "#9ca0b0"
+          gray: "#9ca0b0",
           // Latte Overlay0
+          black: "#4c4f69",
+          white: "#e6e9ef"
         }
       },
       dark: {
@@ -735,8 +774,10 @@ var init_catppuccin = __esm({
           purple: "#cba6f7",
           teal: "#94e2d5",
           cyan: "#74c7ec",
-          gray: "#6c7086"
+          gray: "#6c7086",
           // Mocha Overlay0
+          black: "#313244",
+          white: "#cdd6f4"
         }
       }
     };
@@ -791,7 +832,9 @@ var init_gruvbox = __esm({
           // faded aqua
           cyan: "#427b58",
           // faded aqua
-          gray: "#928374"
+          gray: "#928374",
+          black: "#3c3836",
+          white: "#ebdbb2"
         }
       },
       dark: {
@@ -832,7 +875,9 @@ var init_gruvbox = __esm({
           // bright aqua
           cyan: "#8ec07c",
           // bright aqua
-          gray: "#928374"
+          gray: "#928374",
+          black: "#3c3836",
+          white: "#ebdbb2"
         }
       }
     };
@@ -887,8 +932,10 @@ var init_nord = __esm({
           // nord7
           cyan: "#88c0d0",
           // nord8
-          gray: "#4c566a"
+          gray: "#4c566a",
           // nord3
+          black: "#2e3440",
+          white: "#e5e9f0"
         }
       },
       dark: {
@@ -929,8 +976,10 @@ var init_nord = __esm({
           // nord7
           cyan: "#88c0d0",
           // nord8
-          gray: "#4c566a"
+          gray: "#4c566a",
           // nord3
+          black: "#3b4252",
+          white: "#eceff4"
         }
       }
     };
@@ -968,7 +1017,9 @@ var init_one_dark = __esm({
           purple: "#a626a4",
           teal: "#0184bc",
           cyan: "#0997b3",
-          gray: "#696c77"
+          gray: "#696c77",
+          black: "#383a42",
+          white: "#f0f0f0"
         }
       },
       dark: {
@@ -992,7 +1043,9 @@ var init_one_dark = __esm({
           purple: "#c678dd",
           teal: "#56b6c2",
           cyan: "#56b6c2",
-          gray: "#5c6370"
+          gray: "#5c6370",
+          black: "#21252b",
+          white: "#abb2bf"
         }
       }
     };
@@ -1047,8 +1100,10 @@ var init_rose_pine = __esm({
           // Pine
           cyan: "#56949f",
           // Foam
-          gray: "#9893a5"
+          gray: "#9893a5",
           // Muted
+          black: "#575279",
+          white: "#fffaf3"
         }
       },
       dark: {
@@ -1089,8 +1144,10 @@ var init_rose_pine = __esm({
           // Pine
           cyan: "#9ccfd8",
           // Foam
-          gray: "#6e6a86"
+          gray: "#6e6a86",
           // Muted
+          black: "#2a273f",
+          white: "#e0def4"
         }
       }
     };
@@ -1138,8 +1195,10 @@ var init_solarized = __esm({
           teal: "#2aa198",
           cyan: "#2aa198",
           // Solarized has no separate cyan — reuse teal
-          gray: "#586e75"
+          gray: "#586e75",
           // base01
+          black: "#657b83",
+          white: "#eee8d5"
         }
       },
       dark: {
@@ -1172,8 +1231,10 @@ var init_solarized = __esm({
           purple: "#6c71c4",
           teal: "#2aa198",
           cyan: "#2aa198",
-          gray: "#586e75"
+          gray: "#586e75",
           // base01
+          black: "#073642",
+          white: "#839496"
         }
       }
     };
@@ -1220,8 +1281,10 @@ var init_tokyo_night = __esm({
           purple: "#7847bd",
           teal: "#118c74",
           cyan: "#007197",
-          gray: "#8990b3"
+          gray: "#8990b3",
           // Day dark3
+          black: "#1a1b26",
+          white: "#d0d5e3"
         }
       },
       dark: {
@@ -1254,8 +1317,10 @@ var init_tokyo_night = __esm({
           purple: "#bb9af7",
           teal: "#1abc9c",
           cyan: "#7dcfff",
-          gray: "#565f89"
+          gray: "#565f89",
           // Night comment
+          black: "#292e42",
+          white: "#c0caf5"
         }
       }
     };
@@ -1301,7 +1366,9 @@ var init_dracula = __esm({
           teal: "#5ac8b8",
           // muted cyan toward green
           cyan: "#8be9fd",
-          gray: "#6272a4"
+          gray: "#6272a4",
+          black: "#282a36",
+          white: "#f0f0ec"
         }
       },
       dark: {
@@ -1336,7 +1403,9 @@ var init_dracula = __esm({
           teal: "#5ac8b8",
           // muted cyan toward green
           cyan: "#8be9fd",
-          gray: "#6272a4"
+          gray: "#6272a4",
+          black: "#343746",
+          white: "#f8f8f2"
         }
       }
     };
@@ -1382,8 +1451,10 @@ var init_monokai = __esm({
           teal: "#4ea8a6",
           // muted from cyan
           cyan: "#66d9ef",
-          gray: "#75715e"
+          gray: "#75715e",
           // comment
+          black: "#272822",
+          white: "#f0efe8"
         }
       },
       dark: {
@@ -1416,8 +1487,10 @@ var init_monokai = __esm({
           teal: "#4ea8a6",
           // muted from cyan
           cyan: "#66d9ef",
-          gray: "#75715e"
+          gray: "#75715e",
           // comment
+          black: "#2d2e27",
+          white: "#f8f8f2"
         }
       }
     };
@@ -1648,13 +1721,19 @@ function measureIndent(line10) {
   }
   return indent;
 }
-function extractColor(label, palette) {
+function extractColor(label, palette, diagnostics, line10) {
   const m = label.match(COLOR_SUFFIX_RE);
   if (!m) return { label };
   const colorName = m[1].trim();
+  let color;
+  if (diagnostics && line10 !== void 0) {
+    color = resolveColorWithDiagnostic(colorName, line10, diagnostics, palette);
+  } else {
+    color = resolveColor(colorName, palette) ?? void 0;
+  }
   return {
     label: label.substring(0, m.index).trim(),
-    color: resolveColor(colorName, palette) ?? void 0
+    color
   };
 }
 function parseFirstLine(line10) {
@@ -1718,7 +1797,7 @@ function collectIndentedValues(lines, startIndex) {
   }
   return { values, lineNumbers, newIndex: j - 1 };
 }
-function parseSeriesNames(value, lines, lineIndex, palette) {
+function parseSeriesNames(value, lines, lineIndex, palette, diagnostics) {
   let rawNames;
   let series;
   let newIndex = lineIndex;
@@ -1736,8 +1815,14 @@ function parseSeriesNames(value, lines, lineIndex, palette) {
   }
   const names = [];
   const nameColors = [];
-  for (const raw of rawNames) {
-    const extracted = extractColor(raw, palette);
+  for (let i = 0; i < rawNames.length; i++) {
+    const raw = rawNames[i];
+    const extracted = extractColor(
+      raw,
+      palette,
+      diagnostics,
+      nameLineNumbers[i]
+    );
     nameColors.push(extracted.color);
     names.push(extracted.label);
   }
@@ -3238,7 +3323,12 @@ function parseSequenceDgmo(content) {
     }
     if (currentTagGroup && !contentStarted && measureIndent(raw) > 0) {
       const { text: cleanEntry, isDefault } = stripDefaultModifier(trimmed);
-      const { label, color } = extractColor(cleanEntry);
+      const { label, color } = extractColor(
+        cleanEntry,
+        void 0,
+        result.diagnostics,
+        lineNumber
+      );
       if (!color) {
         pushError(
           lineNumber,
@@ -3951,18 +4041,37 @@ function splitArrows(line10) {
   }
   return segments;
 }
-function parseArrowToken(token, palette) {
+function parseArrowToken(token, palette, lineNumber, diagnostics) {
   if (token === "->") return {};
   const colorOnly = token.match(/^-\(([^)]+)\)->$/);
   if (colorOnly) {
-    return { color: resolveColor(colorOnly[1].trim(), palette) ?? void 0 };
+    return {
+      color: resolveColorWithDiagnostic(
+        colorOnly[1].trim(),
+        lineNumber,
+        diagnostics,
+        palette
+      )
+    };
   }
   const m = token.match(/^-(.+?)(?:\(([^)]+)\))?->$/);
   if (m) {
     const label = m[1]?.trim() || void 0;
-    let color = m[2] ? resolveColor(m[2].trim(), palette) ?? void 0 : void 0;
+    let color = m[2] ? resolveColorWithDiagnostic(
+      m[2].trim(),
+      lineNumber,
+      diagnostics,
+      palette
+    ) : void 0;
     if (label && !color) {
-      color = inferArrowColor(label);
+      const inferred = inferArrowColor(label);
+      if (inferred)
+        color = resolveColorWithDiagnostic(
+          inferred,
+          lineNumber,
+          diagnostics,
+          palette
+        );
     }
     return { label, color };
   }
@@ -4039,7 +4148,12 @@ function parseFlowchart(content, palette) {
     for (let i = 0; i < segments.length; i++) {
       const seg = segments[i];
       if (seg === "->" || /^-.+->$/.test(seg)) {
-        pendingArrow = parseArrowToken(seg, palette);
+        pendingArrow = parseArrowToken(
+          seg,
+          palette,
+          lineNumber,
+          result.diagnostics
+        );
         continue;
       }
       const ref = parseNodeRef(seg, palette);
@@ -4233,15 +4347,27 @@ function splitArrows2(line10) {
   if (remaining) segments.push(remaining);
   return segments;
 }
-function parseArrowToken2(token, palette) {
+function parseArrowToken2(token, palette, lineNumber, diagnostics) {
   if (token === "->") return {};
   const colorOnly = token.match(/^-\(([^)]+)\)->$/);
   if (colorOnly)
-    return { color: resolveColor(colorOnly[1].trim(), palette) ?? void 0 };
+    return {
+      color: resolveColorWithDiagnostic(
+        colorOnly[1].trim(),
+        lineNumber,
+        diagnostics,
+        palette
+      )
+    };
   const m = token.match(/^-(.+?)(?:\(([^)]+)\))?->$/);
   if (m) {
     const label = m[1]?.trim() || void 0;
-    const color = m[2] ? resolveColor(m[2].trim(), palette) ?? void 0 : void 0;
+    const color = m[2] ? resolveColorWithDiagnostic(
+      m[2].trim(),
+      lineNumber,
+      diagnostics,
+      palette
+    ) : void 0;
     return { label, color };
   }
   return {};
@@ -4345,7 +4471,12 @@ function parseState(content, palette) {
     if (groupMatch && groupMatch[1].trim() !== "*") {
       const groupLabel = groupMatch[1].trim();
       const groupColorName = groupMatch[2]?.trim();
-      const groupColor = groupColorName ? resolveColor(groupColorName, palette) : void 0;
+      const groupColor = groupColorName ? resolveColorWithDiagnostic(
+        groupColorName,
+        lineNumber,
+        result.diagnostics,
+        palette
+      ) : void 0;
       currentGroup = {
         id: `group:${groupLabel.toLowerCase()}`,
         label: groupLabel,
@@ -4403,7 +4534,12 @@ function parseState(content, palette) {
     for (let j = 0; j < segments.length; j++) {
       const seg = segments[j];
       if (seg === "->" || /^-.+->$/.test(seg)) {
-        pendingArrow = parseArrowToken2(seg, palette);
+        pendingArrow = parseArrowToken2(
+          seg,
+          palette,
+          lineNumber,
+          result.diagnostics
+        );
         continue;
       }
       const ref = parseStateNodeRef(seg, palette);
@@ -4666,7 +4802,12 @@ function parseClassDiagram(content, palette) {
       const bracketModifier = classDecl[5];
       const modifier = prefixModifier ?? bracketModifier;
       const colorName = classDecl[6]?.trim();
-      const color = colorName ? resolveColor(colorName, palette) : void 0;
+      const color = colorName ? resolveColorWithDiagnostic(
+        colorName,
+        lineNumber,
+        result.diagnostics,
+        palette
+      ) : void 0;
       const node = getOrCreateClass(name, lineNumber);
       if (modifier) node.modifier = modifier;
       if (color) node.color = color;
@@ -5036,7 +5177,12 @@ function parseERDiagram(content, palette) {
     if (tableDecl) {
       const name = tableDecl[1];
       const colorName = tableDecl[2]?.trim();
-      const color = colorName ? resolveColor(colorName, palette) : void 0;
+      const color = colorName ? resolveColorWithDiagnostic(
+        colorName,
+        lineNumber,
+        result.diagnostics,
+        palette
+      ) : void 0;
       const table = getOrCreateTable(name, lineNumber);
       if (color) table.color = color;
       table.lineNumber = lineNumber;
@@ -5164,7 +5310,7 @@ var init_parser3 = __esm({
     init_parsing();
     init_tag_groups();
     TABLE_DECL_RE = /^([a-zA-Z_]\w*)(?:\s*\(([^)]+)\))?(?:\s*\|(.+))?$/;
-    INDENT_REL_RE = /^([1*?])-(?:(.+)-)?([1*?])\s+([a-zA-Z_]\w*)\s*$/;
+    INDENT_REL_RE = /^([1*?])-{1,2}(?:(.+?)-{1,2})?([1*?])\s+([a-zA-Z_]\w*)\s*$/;
     CONSTRAINT_MAP = {
       pk: "pk",
       fk: "fk",
@@ -5253,7 +5399,12 @@ function parseChart(content, palette) {
         rawEras.push({
           start: eraMatch[1].trim(),
           afterArrow,
-          color: eraMatch[3] ? resolveColor(eraMatch[3].trim(), palette) : null,
+          color: eraMatch[3] ? resolveColorWithDiagnostic(
+            eraMatch[3].trim(),
+            lineNumber,
+            result.diagnostics,
+            palette
+          ) ?? null : null,
           lineNumber
         });
       }
@@ -5302,11 +5453,22 @@ function parseChart(content, palette) {
         continue;
       }
       if (firstToken === "color") {
-        result.color = resolveColor(value.trim(), palette) ?? void 0;
+        result.color = resolveColorWithDiagnostic(
+          value.trim(),
+          lineNumber,
+          result.diagnostics,
+          palette
+        );
         continue;
       }
       if (firstToken === "series") {
-        const parsed = parseSeriesNames(value, lines, i, palette);
+        const parsed = parseSeriesNames(
+          value,
+          lines,
+          i,
+          palette,
+          result.diagnostics
+        );
         i = parsed.newIndex;
         result.series = parsed.series;
         result.seriesLineNumber = lineNumber;
@@ -5727,7 +5889,12 @@ function parseExtendedChart(content, palette) {
     const categoryMatch = trimmed.match(/^\[(.+?)\](?:\s*\(([^)]+)\))?\s*$/);
     if (categoryMatch) {
       const catName = categoryMatch[1].trim();
-      const catColor = categoryMatch[2] ? resolveColor(categoryMatch[2].trim(), palette) : null;
+      const catColor = categoryMatch[2] ? resolveColorWithDiagnostic(
+        categoryMatch[2].trim(),
+        lineNumber,
+        result.diagnostics,
+        palette
+      ) ?? null : null;
       if (catColor) {
         if (!result.categoryColors) result.categoryColors = {};
         result.categoryColors[catName] = catColor;
@@ -5755,7 +5922,12 @@ function parseExtendedChart(content, palette) {
         if (sourceColor) result.nodeColors[source] = sourceColor;
         if (targetColor) result.nodeColors[target] = targetColor;
       }
-      const linkColor = rawLinkColor ? resolveColor(rawLinkColor.trim(), palette) : void 0;
+      const linkColor = rawLinkColor ? resolveColorWithDiagnostic(
+        rawLinkColor.trim(),
+        lineNumber,
+        result.diagnostics,
+        palette
+      ) : void 0;
       if (!result.links) result.links = [];
       result.links.push({
         source,
@@ -5781,7 +5953,12 @@ function parseExtendedChart(content, palette) {
           const dataRow2 = parseDataRowValues(strippedLine);
           if (dataRow2 && dataRow2.values.length === 1) {
             const source = sankeyStack.at(-1).name;
-            const linkColor = valColorMatch?.[2] ? resolveColor(valColorMatch[2].trim(), palette) : void 0;
+            const linkColor = valColorMatch?.[2] ? resolveColorWithDiagnostic(
+              valColorMatch[2].trim(),
+              lineNumber,
+              result.diagnostics,
+              palette
+            ) : void 0;
             const { label: target, color: targetColor } = extractColor(
               dataRow2.label,
               palette
@@ -8250,7 +8427,12 @@ function parseKanban(content, palette) {
       currentCard = null;
       columnCounter++;
       const colName = columnMatch[1].trim();
-      const colColor = columnMatch[2] ? resolveColor(columnMatch[2].trim(), palette) ?? void 0 : void 0;
+      const colColor = columnMatch[2] ? resolveColorWithDiagnostic(
+        columnMatch[2].trim(),
+        lineNumber,
+        result.diagnostics,
+        palette
+      ) : void 0;
       let wipLimit;
       const columnMetadata = {};
       const pipeStr = columnMatch[3];
@@ -8298,7 +8480,8 @@ function parseKanban(content, palette) {
         lineNumber,
         cardCounter,
         aliasMap,
-        palette
+        palette,
+        result.diagnostics
       );
       if (currentColumn.metadata) {
         for (const [key, value] of Object.entries(currentColumn.metadata)) {
@@ -8352,7 +8535,7 @@ function parseKanban(content, palette) {
   validateTagGroupNames(result.tagGroups, warn);
   return result;
 }
-function parseCardLine(trimmed, lineNumber, counter, aliasMap, palette) {
+function parseCardLine(trimmed, lineNumber, counter, aliasMap, palette, diagnostics) {
   const pipeIdx = trimmed.indexOf("|");
   let rawTitle;
   let tagsStr = null;
@@ -8362,7 +8545,12 @@ function parseCardLine(trimmed, lineNumber, counter, aliasMap, palette) {
   } else {
     rawTitle = trimmed;
   }
-  const { label: title, color } = extractColor(rawTitle, palette);
+  const { label: title, color } = extractColor(
+    rawTitle,
+    palette,
+    diagnostics,
+    lineNumber
+  );
   const tags = {};
   if (tagsStr) {
     for (const part of tagsStr.split(",")) {
@@ -9097,7 +9285,7 @@ __export(parser_exports7, {
   looksLikeSitemap: () => looksLikeSitemap,
   parseSitemap: () => parseSitemap
 });
-function parseArrowLine(trimmed, palette) {
+function parseArrowLine(trimmed, palette, lineNumber, diagnostics) {
   const bareMatch = trimmed.match(BARE_ARROW_RE);
   if (bareMatch) {
     const rawTarget = bareMatch[1].trim();
@@ -9110,9 +9298,21 @@ function parseArrowLine(trimmed, palette) {
   const arrowMatch = trimmed.match(ARROW_RE);
   if (arrowMatch) {
     const label = arrowMatch[1]?.trim() || void 0;
-    let color = arrowMatch[2] ? resolveColor(arrowMatch[2].trim(), palette) ?? void 0 : void 0;
+    let color = arrowMatch[2] ? resolveColorWithDiagnostic(
+      arrowMatch[2].trim(),
+      lineNumber,
+      diagnostics,
+      palette
+    ) : void 0;
     if (label && !color) {
-      color = inferArrowColor(label);
+      const inferred = inferArrowColor(label);
+      if (inferred)
+        color = resolveColorWithDiagnostic(
+          inferred,
+          lineNumber,
+          diagnostics,
+          palette
+        );
     }
     const rawTarget = arrowMatch[3].trim();
     const groupMatch = rawTarget.match(/^\[(.+)\]$/);
@@ -9276,7 +9476,12 @@ function parseSitemap(content, palette) {
     contentStarted = true;
     currentTagGroup = null;
     const indent = measureIndent(line10);
-    const arrowInfo = parseArrowLine(trimmed, palette);
+    const arrowInfo = parseArrowLine(
+      trimmed,
+      palette,
+      lineNumber,
+      result.diagnostics
+    );
     if (arrowInfo) {
       const source = findParentNode(indent, indentStack);
       if (!source) {
@@ -9297,7 +9502,12 @@ function parseSitemap(content, palette) {
     const metadataMatch = trimmed.includes("|") ? null : trimmed.match(METADATA_RE3);
     if (containerMatch) {
       const rawLabel = containerMatch[1].trim();
-      const { label, color } = extractColor(rawLabel, palette);
+      const { label, color } = extractColor(
+        rawLabel,
+        palette,
+        result.diagnostics,
+        lineNumber
+      );
       const pipeStr = containerMatch[2];
       const containerMetadata = {};
       if (pipeStr) {
@@ -9338,7 +9548,8 @@ function parseSitemap(content, palette) {
           palette,
           ++nodeCounter,
           aliasMap,
-          pushWarning
+          pushWarning,
+          result.diagnostics
         );
         attachNode2(node, indent, indentStack, result);
         labelToNode.set(node.label.toLowerCase(), node);
@@ -9352,7 +9563,8 @@ function parseSitemap(content, palette) {
         palette,
         ++nodeCounter,
         aliasMap,
-        pushWarning
+        pushWarning,
+        result.diagnostics
       );
       attachNode2(node, indent, indentStack, result);
       labelToNode.set(node.label.toLowerCase(), node);
@@ -9415,10 +9627,15 @@ function parseSitemap(content, palette) {
   }
   return result;
 }
-function parseNodeLabel2(trimmed, lineNumber, palette, counter, aliasMap = /* @__PURE__ */ new Map(), warnFn) {
+function parseNodeLabel2(trimmed, lineNumber, palette, counter, aliasMap = /* @__PURE__ */ new Map(), warnFn, diagnostics) {
   const segments = trimmed.split("|").map((s) => s.trim());
   const rawLabel = segments[0];
-  const { label, color } = extractColor(rawLabel, palette);
+  const { label, color } = extractColor(
+    rawLabel,
+    palette,
+    diagnostics,
+    lineNumber
+  );
   const metadata = parsePipeMetadata(
     segments,
     aliasMap,
@@ -9710,9 +9927,13 @@ function parseInfra(content) {
       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);
+        }
         currentTagGroup.values.push({
           name: valueName,
-          color: tvMatch[2]?.trim()
+          color: rawColor
         });
         if (isDefault) {
           currentTagGroup.defaultValue = valueName;
@@ -10064,6 +10285,7 @@ var init_parser8 = __esm({
   "src/infra/parser.ts"() {
     "use strict";
     init_diagnostics();
+    init_colors();
     init_parsing();
     init_tag_groups();
     init_types();
@@ -10125,9 +10347,11 @@ function buildHolidaySet(holidays) {
 function addBusinessDays(startDate, count, workweek, holidaySet, direction = 1) {
   const days = Math.round(Math.abs(count));
   if (days === 0) return new Date(startDate);
+  if (Number.isNaN(startDate.getTime())) return new Date(startDate);
   const current = new Date(startDate);
   let remaining = days;
-  while (remaining > 0) {
+  let safety = days * 14 + 14;
+  while (remaining > 0 && safety-- > 0) {
     current.setDate(current.getDate() + direction);
     if (isWorkday(current, workweek, holidaySet)) {
       remaining--;
@@ -14232,6 +14456,7 @@ var init_mutations = __esm({
 // src/kanban/renderer.ts
 var renderer_exports3 = {};
 __export(renderer_exports3, {
+  bucketCardsBySwimlane: () => bucketCardsBySwimlane,
   renderKanban: () => renderKanban,
   renderKanbanForExport: () => renderKanbanForExport
 });
@@ -14326,7 +14551,14 @@ function computeLayout(parsed, _palette) {
   const totalHeight = startY + maxColumnHeight + DIAGRAM_PADDING3;
   return { columns: columnLayouts, totalWidth, totalHeight };
 }
-function renderKanban(container, parsed, palette, isDark, _onNavigateToLine, exportDims, activeTagGroup) {
+function renderKanban(container, parsed, palette, isDark, options) {
+  const exportDims = options?.exportDims;
+  const activeTagGroup = options?.activeTagGroup ?? null;
+  const onSwimlaneChange = options?.onSwimlaneChange;
+  const requestedSwimlane = options?.currentSwimlaneGroup ?? null;
+  const swimlaneGroup = requestedSwimlane ? parsed.tagGroups.find(
+    (g) => g.name.toLowerCase() === requestedSwimlane.toLowerCase()
+  ) ?? null : null;
   const layout = computeLayout(parsed, palette);
   const width = exportDims?.width ?? layout.totalWidth;
   const height = exportDims?.height ?? layout.totalHeight;
@@ -14346,16 +14578,49 @@ function renderKanban(container, parsed, palette, isDark, _onNavigateToLine, exp
     };
     const legendState = { activeGroup: activeTagGroup ?? null };
     const legendG = svg.append("g").attr("class", "kanban-legend").attr("transform", `translate(${legendX},${legendY})`);
+    const showSwimlaneIcon = !!onSwimlaneChange && !exportDims;
+    const legendCallbacks = showSwimlaneIcon ? {
+      onGroupRendered: (groupName, groupEl, isActive) => {
+        const isCurrent = swimlaneGroup?.name.toLowerCase() === groupName.toLowerCase();
+        const textW = measureLegendText(groupName, 11);
+        const iconX = isActive ? 4 + 6 + textW + 6 : 8 + textW + 4;
+        const iconY = (LEGEND_HEIGHT - 7) / 2;
+        const iconEl = drawSwimlaneIcon(
+          groupEl,
+          iconX,
+          iconY,
+          isCurrent,
+          palette
+        );
+        iconEl.append("title").text(`Group by ${groupName}`);
+        iconEl.style("cursor", "pointer").on("click", (event) => {
+          event.stopPropagation();
+          onSwimlaneChange?.(isCurrent ? null : groupName);
+        });
+      }
+    } : void 0;
     renderLegendD3(
       legendG,
       legendConfig,
       legendState,
       palette,
       isDark,
-      void 0,
+      legendCallbacks,
       width - legendX - DIAGRAM_PADDING3
     );
   }
+  if (swimlaneGroup) {
+    renderSwimlaneBoard(
+      svg,
+      parsed,
+      layout,
+      swimlaneGroup,
+      palette,
+      isDark,
+      activeTagGroup
+    );
+    return;
+  }
   const defaultColBg = isDark ? mix(palette.surface, palette.bg, 50) : mix(palette.surface, palette.bg, 30);
   const defaultColHeaderBg = isDark ? mix(palette.surface, palette.bg, 70) : mix(palette.surface, palette.bg, 50);
   const cardBaseBg = isDark ? palette.surface : palette.bg;
@@ -14432,14 +14697,204 @@ function renderKanbanForExport(content, theme, palette) {
   const isDark = theme === "dark";
   const layout = computeLayout(parsed, palette);
   const container = document.createElement("div");
-  renderKanban(container, parsed, palette, isDark, void 0, {
-    width: layout.totalWidth,
-    height: layout.totalHeight
+  renderKanban(container, parsed, palette, isDark, {
+    exportDims: { width: layout.totalWidth, height: layout.totalHeight }
   });
   const svgEl = container.querySelector("svg");
   return svgEl?.outerHTML ?? "";
 }
-var d3Selection3, DIAGRAM_PADDING3, COLUMN_GAP, COLUMN_HEADER_HEIGHT, COLUMN_PADDING, COLUMN_MIN_WIDTH, CARD_HEADER_HEIGHT, CARD_META_LINE_HEIGHT, CARD_SEPARATOR_GAP, CARD_GAP, CARD_RADIUS3, CARD_PADDING_X, CARD_PADDING_Y, CARD_STROKE_WIDTH, TITLE_HEIGHT3, COLUMN_HEADER_FONT_SIZE, CARD_TITLE_FONT_SIZE, CARD_META_FONT_SIZE, WIP_FONT_SIZE, COLUMN_RADIUS, COLUMN_HEADER_RADIUS;
+function drawSwimlaneIcon(parent, x, y, isActive, palette) {
+  const iconG = parent.append("g").attr("class", "kanban-swimlane-icon").attr("transform", `translate(${x}, ${y})`);
+  const color = isActive ? palette.primary : palette.textMuted;
+  const opacity = isActive ? 1 : 0.35;
+  const barWidths = [8, 12, 6];
+  const barH = 2;
+  const gap = 3;
+  for (let i = 0; i < barWidths.length; i++) {
+    iconG.append("rect").attr("x", 0).attr("y", i * gap).attr("width", barWidths[i]).attr("height", barH).attr("rx", 1).attr("fill", color).attr("opacity", opacity);
+  }
+  return iconG;
+}
+function bucketCardsBySwimlane(columns, swimlaneGroup) {
+  const tagKey = swimlaneGroup.name.toLowerCase();
+  const buckets = /* @__PURE__ */ new Map();
+  for (const entry of swimlaneGroup.entries) {
+    buckets.set(entry.value.toLowerCase(), {
+      laneName: entry.value,
+      laneColor: entry.color,
+      isFallback: false,
+      cellsByColumn: {}
+    });
+  }
+  const fallbackKey = `__no_${tagKey}__`;
+  for (const col of columns) {
+    for (const card of col.cards) {
+      const raw = card.tags[tagKey] ?? swimlaneGroup.defaultValue;
+      let bucketKey;
+      if (raw && buckets.has(raw.toLowerCase())) {
+        bucketKey = raw.toLowerCase();
+      } else {
+        if (!buckets.has(fallbackKey)) {
+          buckets.set(fallbackKey, {
+            laneName: `No ${swimlaneGroup.name}`,
+            isFallback: true,
+            cellsByColumn: {}
+          });
+        }
+        bucketKey = fallbackKey;
+      }
+      const bucket = buckets.get(bucketKey);
+      (bucket.cellsByColumn[col.id] ??= []).push(card);
+    }
+  }
+  return Array.from(buckets.values());
+}
+function computeCardHeight3(card, tagGroups) {
+  const tagMeta = resolveCardTagMeta(card, tagGroups);
+  const metaCount = tagMeta.length + card.details.length;
+  const metaHeight = metaCount > 0 ? CARD_SEPARATOR_GAP + 1 + CARD_PADDING_Y + metaCount * CARD_META_LINE_HEIGHT : 0;
+  return CARD_HEADER_HEIGHT + CARD_PADDING_Y + metaHeight;
+}
+function computeSwimlaneLayout(parsed, buckets, baseLayout) {
+  const headerHeight = parsed.title ? TITLE_HEIGHT3 + 8 : 0;
+  const startY = DIAGRAM_PADDING3 + headerHeight;
+  const columnXs = [];
+  let currentX = DIAGRAM_PADDING3 + LANE_HEADER_WIDTH;
+  for (const col of baseLayout.columns) {
+    columnXs.push({ column: col.column, x: currentX, width: col.width });
+    currentX += col.width + COLUMN_GAP;
+  }
+  const totalWidth = currentX - COLUMN_GAP + DIAGRAM_PADDING3;
+  const lanes = [];
+  let laneY = startY + COLUMN_HEADER_HEIGHT + COLUMN_PADDING;
+  const minCellH = CARD_HEADER_HEIGHT + CARD_PADDING_Y + CARD_GAP;
+  for (const bucket of buckets) {
+    let maxCellH = minCellH;
+    const cellsTmp = [];
+    for (const colInfo of columnXs) {
+      const cards = bucket.cellsByColumn[colInfo.column.id] ?? [];
+      let h = 0;
+      for (const c of cards) {
+        h += computeCardHeight3(c, parsed.tagGroups) + CARD_GAP;
+      }
+      h = Math.max(h - (cards.length > 0 ? CARD_GAP : 0), 0);
+      cellsTmp.push({ column: colInfo.column, cards, h });
+      if (h > maxCellH) maxCellH = h;
+    }
+    const laneHeight = Math.max(maxCellH, minCellH);
+    const cells = cellsTmp.map((tmp, i) => {
+      const colInfo = columnXs[i];
+      const cardLayouts = [];
+      let cy = 0;
+      for (const card of tmp.cards) {
+        const ch = computeCardHeight3(card, parsed.tagGroups);
+        cardLayouts.push({
+          x: colInfo.x + COLUMN_PADDING,
+          y: laneY + cy,
+          width: colInfo.width - COLUMN_PADDING * 2,
+          height: ch,
+          card
+        });
+        cy += ch + CARD_GAP;
+      }
+      return { column: tmp.column, cards: tmp.cards, cardLayouts };
+    });
+    lanes.push({ bucket, y: laneY, height: laneHeight, cells });
+    laneY += laneHeight + LANE_GAP;
+  }
+  const totalHeight = laneY - LANE_GAP + COLUMN_PADDING + DIAGRAM_PADDING3;
+  return { columnXs, lanes, totalWidth, totalHeight, startY };
+}
+function renderSwimlaneBoard(svg, parsed, baseLayout, swimlaneGroup, palette, isDark, activeTagGroup) {
+  const visibleColumns = parsed.columns.filter((c) => !isArchiveColumn(c.name));
+  const buckets = bucketCardsBySwimlane(visibleColumns, swimlaneGroup);
+  const grid = computeSwimlaneLayout(parsed, buckets, baseLayout);
+  const currentW = parseFloat(svg.attr("width") || "0");
+  const currentH = parseFloat(svg.attr("height") || "0");
+  if (grid.totalWidth > currentW) svg.attr("width", grid.totalWidth);
+  if (grid.totalHeight > currentH) svg.attr("height", grid.totalHeight);
+  const defaultColBg = isDark ? mix(palette.surface, palette.bg, 50) : mix(palette.surface, palette.bg, 30);
+  const defaultColHeaderBg = isDark ? mix(palette.surface, palette.bg, 70) : mix(palette.surface, palette.bg, 50);
+  const cardBaseBg = isDark ? palette.surface : palette.bg;
+  for (const colInfo of grid.columnXs) {
+    const col = colInfo.column;
+    const headerG = svg.append("g").attr("class", "kanban-column kanban-column-header").attr("data-column-id", col.id).attr("data-line-number", col.lineNumber);
+    const colHeaderBg = col.color ? mix(col.color, palette.bg, 25) : defaultColHeaderBg;
+    headerG.append("rect").attr("x", colInfo.x).attr("y", grid.startY).attr("width", colInfo.width).attr("height", COLUMN_HEADER_HEIGHT).attr("rx", COLUMN_HEADER_RADIUS).attr("fill", colHeaderBg);
+    headerG.append("text").attr("x", colInfo.x + COLUMN_PADDING).attr(
+      "y",
+      grid.startY + COLUMN_HEADER_HEIGHT / 2 + COLUMN_HEADER_FONT_SIZE / 2 - 2
+    ).attr("font-size", COLUMN_HEADER_FONT_SIZE).attr("font-weight", "bold").attr("fill", palette.text).text(col.name);
+  }
+  for (const lane of grid.lanes) {
+    const laneG = svg.append("g").attr("class", "kanban-lane").attr("data-lane-name", lane.bucket.laneName);
+    const headerG = laneG.append("g").attr("class", "kanban-lane-header").attr(
+      "transform",
+      `translate(${DIAGRAM_PADDING3}, ${lane.y - COLUMN_PADDING})`
+    );
+    headerG.append("rect").attr("x", 0).attr("y", 0).attr("width", LANE_HEADER_WIDTH - 8).attr("height", lane.height + COLUMN_PADDING * 2).attr("rx", COLUMN_RADIUS).attr("fill", defaultColBg);
+    let labelX = 10;
+    if (lane.bucket.laneColor) {
+      headerG.append("circle").attr("cx", labelX + 4).attr("cy", 16).attr("r", 4).attr("fill", lane.bucket.laneColor);
+      labelX += 14;
+    }
+    headerG.append("text").attr("x", labelX).attr("y", 20).attr("font-size", 12).attr("font-weight", "bold").attr("fill", lane.bucket.isFallback ? palette.textMuted : palette.text).text(lane.bucket.laneName);
+    const totalCards = lane.cells.reduce((s, c) => s + c.cards.length, 0);
+    headerG.append("text").attr("x", labelX).attr("y", 36).attr("font-size", 10).attr("fill", palette.textMuted).text(`(${totalCards})`);
+    laneG.append("line").attr("x1", DIAGRAM_PADDING3 + LANE_HEADER_WIDTH).attr("x2", grid.totalWidth - DIAGRAM_PADDING3).attr("y1", lane.y + lane.height + COLUMN_PADDING).attr("y2", lane.y + lane.height + COLUMN_PADDING).attr("stroke", palette.border ?? palette.textMuted).attr("stroke-opacity", 0.4).attr("stroke-width", 1);
+    for (const cell of lane.cells) {
+      for (const cardLayout of cell.cardLayouts) {
+        renderSwimlaneCard(
+          laneG,
+          cardLayout,
+          parsed.tagGroups,
+          activeTagGroup,
+          palette,
+          cardBaseBg
+        );
+      }
+    }
+  }
+}
+function renderSwimlaneCard(parent, cardLayout, tagGroups, activeTagGroup, palette, cardBaseBg) {
+  const card = cardLayout.card;
+  const resolvedColor = resolveCardTagColor(card, tagGroups, activeTagGroup);
+  const tagMeta = resolveCardTagMeta(card, tagGroups);
+  const hasMeta = tagMeta.length > 0 || card.details.length > 0;
+  const cardFill = resolvedColor ? mix(resolvedColor, cardBaseBg, 15) : mix(palette.primary, cardBaseBg, 15);
+  const cardStroke = resolvedColor ?? palette.textMuted;
+  const cg = parent.append("g").attr("class", "kanban-card").attr("data-card-id", card.id).attr("data-line-number", card.lineNumber);
+  if (activeTagGroup) {
+    const tagKey = activeTagGroup.toLowerCase();
+    const group = tagGroups.find((tg) => tg.name.toLowerCase() === tagKey);
+    const value = card.tags[tagKey] ?? group?.defaultValue;
+    if (value) {
+      cg.attr(`data-tag-${tagKey}`, value.toLowerCase());
+    }
+  }
+  const cx = cardLayout.x;
+  const cy = cardLayout.y;
+  cg.append("rect").attr("x", cx).attr("y", cy).attr("width", cardLayout.width).attr("height", cardLayout.height).attr("rx", CARD_RADIUS3).attr("fill", cardFill).attr("stroke", cardStroke).attr("stroke-width", CARD_STROKE_WIDTH);
+  const titleEl = cg.append("text").attr("x", cx + CARD_PADDING_X).attr("y", cy + CARD_PADDING_Y + CARD_TITLE_FONT_SIZE).attr("font-size", CARD_TITLE_FONT_SIZE).attr("font-weight", "500").attr("fill", palette.text);
+  renderInlineText(titleEl, card.title, palette, CARD_TITLE_FONT_SIZE);
+  if (hasMeta) {
+    const separatorY = cy + CARD_HEADER_HEIGHT;
+    cg.append("line").attr("x1", cx).attr("y1", separatorY).attr("x2", cx + cardLayout.width).attr("y2", separatorY).attr("stroke", cardStroke).attr("stroke-opacity", 0.3).attr("stroke-width", 1);
+    let metaY = separatorY + CARD_SEPARATOR_GAP + CARD_META_FONT_SIZE;
+    for (const meta of tagMeta) {
+      cg.append("text").attr("x", cx + CARD_PADDING_X).attr("y", metaY).attr("font-size", CARD_META_FONT_SIZE).attr("fill", palette.textMuted).text(`${meta.label}: `);
+      const labelWidth = (meta.label.length + 2) * CARD_META_FONT_SIZE * 0.6;
+      cg.append("text").attr("x", cx + CARD_PADDING_X + labelWidth).attr("y", metaY).attr("font-size", CARD_META_FONT_SIZE).attr("fill", palette.text).text(meta.value);
+      metaY += CARD_META_LINE_HEIGHT;
+    }
+    for (const detail of card.details) {
+      const detailEl = cg.append("text").attr("x", cx + CARD_PADDING_X).attr("y", metaY).attr("font-size", CARD_META_FONT_SIZE).attr("fill", palette.textMuted);
+      renderInlineText(detailEl, detail, palette, CARD_META_FONT_SIZE);
+      metaY += CARD_META_LINE_HEIGHT;
+    }
+  }
+}
+var d3Selection3, DIAGRAM_PADDING3, COLUMN_GAP, COLUMN_HEADER_HEIGHT, COLUMN_PADDING, COLUMN_MIN_WIDTH, CARD_HEADER_HEIGHT, CARD_META_LINE_HEIGHT, CARD_SEPARATOR_GAP, CARD_GAP, CARD_RADIUS3, CARD_PADDING_X, CARD_PADDING_Y, CARD_STROKE_WIDTH, TITLE_HEIGHT3, COLUMN_HEADER_FONT_SIZE, CARD_TITLE_FONT_SIZE, CARD_META_FONT_SIZE, WIP_FONT_SIZE, COLUMN_RADIUS, COLUMN_HEADER_RADIUS, LANE_HEADER_WIDTH, LANE_GAP;
 var init_renderer3 = __esm({
   "src/kanban/renderer.ts"() {
     "use strict";
@@ -14472,6 +14927,8 @@ var init_renderer3 = __esm({
     WIP_FONT_SIZE = 10;
     COLUMN_RADIUS = 8;
     COLUMN_HEADER_RADIUS = 8;
+    LANE_HEADER_WIDTH = 140;
+    LANE_GAP = 14;
   }
 });
 
@@ -23614,7 +24071,7 @@ function resetHighlightAll(svg, chartG) {
   chartG.selectAll(".gantt-lane-band, .gantt-lane-accent").attr("opacity", 1);
   chartG.selectAll(".gantt-dep-arrow, .gantt-dep-arrowhead").attr("opacity", 0.5);
 }
-function drawSwimlaneIcon(parent, x, y, isActive, palette) {
+function drawSwimlaneIcon2(parent, x, y, isActive, palette) {
   const iconG = parent.append("g").attr("class", "gantt-swimlane-icon").attr("transform", `translate(${x}, ${y})`);
   const color = isActive ? palette.primary : palette.textMuted;
   const opacity = isActive ? 1 : 0.35;
@@ -23771,7 +24228,7 @@ function renderTagLegend(svg, chartG, tagGroups, activeGroupName, chartLeftMargi
           const pillXOff = LEGEND_CAPSULE_PAD;
           const iconX = pillXOff + textW + 3;
           const iconY = (LEGEND_HEIGHT - 10) / 2;
-          const iconEl = drawSwimlaneIcon(
+          const iconEl = drawSwimlaneIcon2(
             groupEl,
             iconX,
             iconY,
@@ -25199,10 +25656,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     );
     if (tg) {
       for (const entry of tg.entries) {
-        tagValueToColor.set(
-          entry.value.toLowerCase(),
-          resolveColor(entry.color) ?? entry.color
-        );
+        tagValueToColor.set(entry.value.toLowerCase(), entry.color);
       }
     }
   }
@@ -25608,7 +26062,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
       name: tg.name,
       entries: tg.entries.map((e) => ({
         value: e.value,
-        color: resolveColor(e.color) ?? e.color
+        color: e.color
       }))
     }));
     const legendConfig = {
@@ -26189,7 +26643,6 @@ var init_renderer10 = __esm({
     init_color_utils();
     init_inline_markdown();
     init_fonts();
-    init_colors();
     init_parser();
     init_tag_resolution();
     init_tag_groups();
@@ -26495,12 +26948,22 @@ function parseVisualization(content, palette) {
     if (groupMatch) {
       if (result.type === "arc") {
         const name = groupMatch[1].trim();
-        const color = groupMatch[2] ? resolveColor(groupMatch[2].trim(), palette) : null;
+        const color = groupMatch[2] ? resolveColorWithDiagnostic(
+          groupMatch[2].trim(),
+          lineNumber,
+          result.diagnostics,
+          palette
+        ) ?? null : null;
         result.arcNodeGroups.push({ name, nodes: [], color, lineNumber });
         currentArcGroup = name;
       } else if (result.type === "timeline") {
         const name = groupMatch[1].trim();
-        const color = groupMatch[2] ? resolveColor(groupMatch[2].trim(), palette) : null;
+        const color = groupMatch[2] ? resolveColorWithDiagnostic(
+          groupMatch[2].trim(),
+          lineNumber,
+          result.diagnostics,
+          palette
+        ) ?? null : null;
         result.timelineGroups.push({ name, color, lineNumber });
         currentTimelineGroup = name;
       }
@@ -26528,7 +26991,12 @@ function parseVisualization(content, palette) {
       if (linkMatch) {
         const source = linkMatch[1].trim();
         const target = linkMatch[2].trim();
-        const linkColor = linkMatch[3] ? resolveColor(linkMatch[3].trim(), palette) : null;
+        const linkColor = linkMatch[3] ? resolveColorWithDiagnostic(
+          linkMatch[3].trim(),
+          lineNumber,
+          result.diagnostics,
+          palette
+        ) ?? null : null;
         result.links.push({
           source,
           target,
@@ -26565,7 +27033,12 @@ function parseVisualization(content, palette) {
             startDate: eraEntryMatch[1],
             endDate: eraEntryMatch[2],
             label: eraEntryMatch[3].trim(),
-            color: colorAnnotation ? resolveColor(colorAnnotation, palette) : null,
+            color: colorAnnotation ? resolveColorWithDiagnostic(
+              colorAnnotation,
+              lineNumber,
+              result.diagnostics,
+              palette
+            ) ?? null : null,
             lineNumber
           });
         } else {
@@ -26587,7 +27060,12 @@ function parseVisualization(content, palette) {
           result.timelineMarkers.push({
             date: markerEntryMatch[1],
             label: markerEntryMatch[2].trim(),
-            color: colorAnnotation ? resolveColor(colorAnnotation, palette) : null,
+            color: colorAnnotation ? resolveColorWithDiagnostic(
+              colorAnnotation,
+              lineNumber,
+              result.diagnostics,
+              palette
+            ) ?? null : null,
             lineNumber
           });
         } else {
@@ -26616,7 +27094,12 @@ function parseVisualization(content, palette) {
           startDate: eraMatch[1],
           endDate: eraMatch[2],
           label: eraMatch[3].trim(),
-          color: colorAnnotation ? resolveColor(colorAnnotation, palette) : null,
+          color: colorAnnotation ? resolveColorWithDiagnostic(
+            colorAnnotation,
+            lineNumber,
+            result.diagnostics,
+            palette
+          ) ?? null : null,
           lineNumber
         });
         continue;
@@ -26629,7 +27112,12 @@ function parseVisualization(content, palette) {
         result.timelineMarkers.push({
           date: markerMatch[1],
           label: markerMatch[2].trim(),
-          color: colorAnnotation ? resolveColor(colorAnnotation, palette) : null,
+          color: colorAnnotation ? resolveColorWithDiagnostic(
+            colorAnnotation,
+            lineNumber,
+            result.diagnostics,
+            palette
+          ) ?? null : null,
           lineNumber
         });
         continue;
@@ -26744,20 +27232,12 @@ function parseVisualization(content, palette) {
         const colorName = setDeclMatch[2]?.trim() ?? null;
         let color = null;
         if (colorName) {
-          const resolved = resolveColor(colorName, palette);
-          if (resolved === null) {
-            warn(
-              lineNumber,
-              `Hex colors are not supported \u2014 use named colors (blue, red, green, etc.)`
-            );
-          } else if (resolved.startsWith("#")) {
-            color = resolved;
-          } else {
-            warn(
-              lineNumber,
-              `Unknown color "${colorName}" on set "${name}". Using auto-assigned color.`
-            );
-          }
+          color = resolveColorWithDiagnostic(
+            colorName,
+            lineNumber,
+            result.diagnostics,
+            palette
+          ) ?? null;
         }
         const alias = setDeclMatch[3]?.trim() ?? null;
         result.vennSets.push({ name, alias, color, lineNumber });
@@ -26806,7 +27286,12 @@ function parseVisualization(content, palette) {
         const labelPart = quadrantMatch[2].trim();
         const labelColorMatch = labelPart.match(/^(.+?)\s*\(([^)]+)\)\s*$/);
         const text = labelColorMatch ? labelColorMatch[1].trim() : labelPart;
-        const color = labelColorMatch ? resolveColor(labelColorMatch[2].trim(), palette) : null;
+        const color = labelColorMatch ? resolveColorWithDiagnostic(
+          labelColorMatch[2].trim(),
+          lineNumber,
+          result.diagnostics,
+          palette
+        ) ?? null : null;
         const label = { text, color, lineNumber };
         if (position === "top-right") result.quadrantLabels.topRight = label;
         else if (position === "top-left") result.quadrantLabels.topLeft = label;
@@ -26964,7 +27449,12 @@ function parseVisualization(content, palette) {
         }
         const colorMatch = joinedLabel.match(/^(.+?)\(([^)]+)\)\s*$/);
         const labelPart = colorMatch ? colorMatch[1].trim() : joinedLabel;
-        const colorPart = colorMatch ? resolveColor(colorMatch[2].trim(), palette) : null;
+        const colorPart = colorMatch ? resolveColorWithDiagnostic(
+          colorMatch[2].trim(),
+          lineNumber,
+          result.diagnostics,
+          palette
+        ) ?? null : null;
         if (!labelPart) {
           warn(
             lineNumber,
@@ -27035,7 +27525,12 @@ function parseVisualization(content, palette) {
         continue;
       }
       const labelPart = colorMatch ? colorMatch[1].trim() : rawKey;
-      const colorPart = colorMatch ? resolveColor(colorMatch[2].trim(), palette) : null;
+      const colorPart = colorMatch ? resolveColorWithDiagnostic(
+        colorMatch[2].trim(),
+        lineNumber,
+        result.diagnostics,
+        palette
+      ) ?? null : null;
       const valuePart = line10.substring(colonIndex + 1).trim();
       const values = valuePart.split(",").map((v) => v.trim());
       const numericValues = [];
@@ -28883,7 +29378,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
     const mainSvg = d3Selection13.select(container).select("svg");
     const mainG = mainSvg.select("g");
     if (!mainSvg.empty() && !mainG.empty()) {
-      let drawSwimlaneIcon3 = function(parent, x, y, isSwimActive) {
+      let drawSwimlaneIcon4 = function(parent, x, y, isSwimActive) {
         const iconG = parent.append("g").attr("class", "tl-swimlane-icon").attr("transform", `translate(${x}, ${y})`).style("cursor", "pointer");
         const barColor = isSwimActive ? palette.primary : palette.textMuted;
         const barOpacity = isSwimActive ? 1 : 0.35;
@@ -28975,7 +29470,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
               const pillXOff = LG_CAPSULE_PAD;
               const iconX = pillXOff + pillWidth3 + 5;
               const iconY = (LG_HEIGHT - 10) / 2;
-              const iconEl = drawSwimlaneIcon3(
+              const iconEl = drawSwimlaneIcon4(
                 groupEl,
                 iconX,
                 iconY,
@@ -29025,7 +29520,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
           el.selectAll("circle:not(.tl-event-point-outline)").attr("fill", mix(color, bg, 30)).attr("stroke", color);
         });
       };
-      var drawSwimlaneIcon2 = drawSwimlaneIcon3, relayout = relayout2, drawLegend = drawLegend2, recolorEvents = recolorEvents2;
+      var drawSwimlaneIcon3 = drawSwimlaneIcon4, relayout = relayout2, drawLegend = drawLegend2, recolorEvents = recolorEvents2;
       const legendY = title ? 50 : 10;
       const legendGroups = parsed.timelineTagGroups.map((g) => {
         const pillW = measureLegendText(g.name, LG_PILL_FONT_SIZE) + LG_PILL_PAD;
@@ -29985,19 +30480,13 @@ async function renderForExport(content, theme, palette, orgExportState, options)
     container2.style.position = "absolute";
     container2.style.left = "-9999px";
     document.body.appendChild(container2);
-    renderKanban2(
-      container2,
-      kanbanParsed,
-      effectivePalette2,
-      theme === "dark",
-      void 0,
-      void 0,
-      resolveActiveTagGroup(
+    renderKanban2(container2, kanbanParsed, effectivePalette2, theme === "dark", {
+      activeTagGroup: resolveActiveTagGroup(
         kanbanParsed.tagGroups,
         kanbanParsed.options["active-tag"],
         options?.tagGroup
       )
-    );
+    });
     return finalizeSvgExport(container2, theme, effectivePalette2, options);
   }
   if (detectedType === "class") {
@@ -30489,6 +30978,7 @@ __export(index_exports, {
   LEGEND_HEIGHT: () => LEGEND_HEIGHT,
   METADATA_KEY_SET: () => METADATA_KEY_SET,
   PIPE_METADATA: () => PIPE_METADATA,
+  RECOGNIZED_COLOR_NAMES: () => RECOGNIZED_COLOR_NAMES,
   RULE_COUNT: () => RULE_COUNT,
   addDurationToDate: () => addDurationToDate,
   applyGroupOrdering: () => applyGroupOrdering,
@@ -30543,6 +31033,7 @@ __export(index_exports, {
   injectBranding: () => injectBranding,
   isArchiveColumn: () => isArchiveColumn,
   isExtendedChartType: () => isExtendedChartType,
+  isRecognizedColorName: () => isRecognizedColorName,
   isSequenceBlock: () => isSequenceBlock,
   isSequenceNote: () => isSequenceNote,
   isValidHex: () => isValidHex,
@@ -30634,6 +31125,7 @@ __export(index_exports, {
   renderVenn: () => renderVenn,
   renderWordCloud: () => renderWordCloud,
   resolveColor: () => resolveColor,
+  resolveColorWithDiagnostic: () => resolveColorWithDiagnostic,
   resolveOrgImports: () => resolveOrgImports,
   resolveTaskName: () => resolveTaskName,
   rollUpContextRelationships: () => rollUpContextRelationships,
@@ -30783,7 +31275,11 @@ function parseQuadrant(content) {
       if (labelMatch) {
         const label = {
           text: labelMatch[1].trim(),
-          color: labelMatch[2] ? resolveColor(labelMatch[2].trim()) : null,
+          color: labelMatch[2] ? resolveColorWithDiagnostic(
+            labelMatch[2].trim(),
+            lineNumber,
+            result.diagnostics
+          ) ?? null : null,
           lineNumber
         };
         if (position === "top-right") result.quadrants.topRight = label;
@@ -31463,10 +31959,14 @@ function encodeDiagramUrl(dsl, options) {
   if (options?.viewState?.theme && options.viewState.theme !== "dark") {
     hash += `&th=${encodeURIComponent(options.viewState.theme)}`;
   }
+  if (options?.filename) {
+    hash += `&fn=${encodeURIComponent(options.filename)}`;
+  }
   return { url: `${baseUrl}?${hash}#${hash}` };
 }
 function decodeDiagramUrl(hash) {
   const empty = { dsl: "", viewState: {} };
+  let filename;
   if (!hash) return empty;
   let raw = hash;
   if (raw.startsWith("#") || raw.startsWith("?")) {
@@ -31495,16 +31995,17 @@ function decodeDiagramUrl(hash) {
     if (key === "pal" && val) viewState.palette = val;
     if (key === "th" && (val === "light" || val === "dark"))
       viewState.theme = val;
+    if (key === "fn" && val) filename = val;
   }
   if (payload.startsWith("dgmo=")) {
     payload = payload.slice(5);
   }
-  if (!payload) return { dsl: "", viewState };
+  if (!payload) return { dsl: "", viewState, filename };
   try {
     const result = decompressFromEncodedURIComponent(payload);
-    return { dsl: result ?? "", viewState };
+    return { dsl: result ?? "", viewState, filename };
   } catch {
-    return { dsl: "", viewState };
+    return { dsl: "", viewState, filename };
   }
 }
 
@@ -32262,6 +32763,7 @@ init_branding();
   LEGEND_HEIGHT,
   METADATA_KEY_SET,
   PIPE_METADATA,
+  RECOGNIZED_COLOR_NAMES,
   RULE_COUNT,
   addDurationToDate,
   applyGroupOrdering,
@@ -32316,6 +32818,7 @@ init_branding();
   injectBranding,
   isArchiveColumn,
   isExtendedChartType,
+  isRecognizedColorName,
   isSequenceBlock,
   isSequenceNote,
   isValidHex,
@@ -32407,6 +32910,7 @@ init_branding();
   renderVenn,
   renderWordCloud,
   resolveColor,
+  resolveColorWithDiagnostic,
   resolveOrgImports,
   resolveTaskName,
   rollUpContextRelationships,