@diagrammo/dgmo 0.51.0 → 0.52.0

package/dist/{chunk-EXOQP75F.js → chunk-CIRFIL4M.js}

@@ -3,7 +3,7 @@ import {
   layoutJourneyMap,
   scoreToColor,
   scoreToCurveY
-} from "./chunk-3JLKYGBQ.js";
+} from "./chunk-YIBAWQGJ.js";
 import {
   wrapNoteBody
 } from "./chunk-TYS6CSS5.js";
@@ -21,7 +21,7 @@ import {
 } from "./chunk-YYVTBZZC.js";
 import {
   renderIntegratedLegend
-} from "./chunk-OU7HLO7I.js";
+} from "./chunk-AUIM2NVH.js";
 import {
   FONT_FAMILY
 } from "./chunk-6KFWC4CO.js";
@@ -32,16 +32,20 @@ import {
 } from "./chunk-WCT3NYCV.js";
 import {
   parseJourneyMap
-} from "./chunk-4QZ43D7I.js";
+} from "./chunk-XD6ZYURY.js";
 import {
   contrastText,
   mix,
-  shapeFill
-} from "./chunk-P6T66CCZ.js";
+  shapeFill,
+  themeBaseBg
+} from "./chunk-WBM7ZNDI.js";
 import {
   resolveActiveTagGroup,
   tagAttrKey
-} from "./chunk-467TVMQL.js";
+} from "./chunk-HHKO6SKY.js";
+import {
+  fillModeFromOptions
+} from "./chunk-BRENJ2BQ.js";
 
 // src/journey-map/renderer.ts
 import * as d3 from "d3-selection";
@@ -76,7 +80,7 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
   const onActiveTagGroupChange = options?.onActiveTagGroupChange;
   const collapsedPhases = options?.collapsedPhases ?? /* @__PURE__ */ new Set();
   const onPhaseToggle = options?.onPhaseToggle;
-  const solid = parsed.options["solid-fill"] === "on";
+  const fillMode = fillModeFromOptions(parsed.options);
   const layout = layoutJourneyMap(parsed, palette, {
     collapsedPhases,
     ...exportDims !== void 0 && { exportDims },
@@ -131,7 +135,9 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
     const textX = panelX + CARD_PADDING_X;
     const clipId = "persona-clip";
     defs.append("clipPath").attr("id", clipId).append("rect").attr("x", panelX).attr("y", panelY).attr("width", panelWidth).attr("height", panelHeight).attr("rx", CARD_RADIUS);
-    const personaFill = shapeFill(palette, personaColor, isDark, { solid });
+    const personaFill = shapeFill(palette, personaColor, isDark, {
+      mode: fillMode
+    });
     const onPersonaText = contrastText(
       personaFill,
       palette.textOnFillLight,
@@ -139,12 +145,21 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
     );
     personaG.append("rect").attr("x", panelX).attr("y", panelY).attr("width", panelWidth).attr("height", panelHeight).attr("rx", CARD_RADIUS).attr("fill", personaFill);
     if (descLines.length > 0) {
-      personaG.append("line").attr("x1", panelX + 1).attr("x2", panelX + panelWidth - silhouetteZone).attr("y1", panelY + titleRowH).attr("y2", panelY + titleRowH).attr("stroke", solid ? onPersonaText : personaColor).attr("stroke-opacity", 0.3).attr("stroke-width", 1);
+      personaG.append("line").attr("x1", panelX + 1).attr("x2", panelX + panelWidth - silhouetteZone).attr("y1", panelY + titleRowH).attr("y2", panelY + titleRowH).attr("stroke", fillMode === "solid" ? onPersonaText : personaColor).attr("stroke-opacity", 0.3).attr("stroke-width", 1);
     }
     const silX = panelX + panelWidth - 32;
     const silY = panelY + panelHeight / 2 - 6;
     const silClip = personaG.append("g").attr("clip-path", `url(#${clipId})`);
-    renderPersonaSilhouette(silClip, silX, silY, personaColor, palette, 1.2);
+    renderPersonaSilhouette(
+      silClip,
+      silX,
+      silY,
+      personaColor,
+      palette,
+      isDark,
+      1.2,
+      fillMode
+    );
     personaG.append("rect").attr("x", panelX).attr("y", panelY).attr("width", panelWidth).attr("height", panelHeight).attr("rx", CARD_RADIUS).attr("fill", "none").attr("stroke", personaColor).attr("stroke-width", CARD_STROKE_WIDTH);
     personaG.append("text").attr("x", textX).attr("y", panelY + CARD_PADDING_Y + FONT_SIZE_STEP).attr("font-size", FONT_SIZE_STEP).attr("font-weight", "500").attr("fill", onPersonaText).text(parsed.persona.name);
     for (let li = 0; li < descLines.length; li++) {
@@ -280,7 +295,9 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
         pt.y,
         pt.score,
         palette,
-        isDark
+        isDark,
+        void 0,
+        fillMode
       );
       addEmotionLabel(faceG, pt, palette);
       if (step) {
@@ -313,7 +330,9 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
       pt.y,
       pt.score,
       palette,
-      isDark
+      isDark,
+      void 0,
+      fillMode
     );
     addEmotionLabel(faceG, pt, palette);
     if (step) {
@@ -398,7 +417,7 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
             palette,
             stepColor ?? palette.primary,
             isDark,
-            { solid }
+            { mode: fillMode }
           );
           const rowStroke = stepColor ?? palette.textMuted;
           itemG.append("rect").attr("x", listX).attr("y", itemY).attr("width", cardW).attr("height", COLLAPSED_CARD_H).attr("rx", CARD_RADIUS).attr("fill", rowFill).attr("stroke", rowStroke).attr("stroke-width", CARD_STROKE_WIDTH);
@@ -412,7 +431,8 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
               step.score,
               palette,
               isDark,
-              COLLAPSED_FACE_R
+              COLLAPSED_FACE_R,
+              fillMode
             );
             faceG.attr("data-line-number", step.lineNumber);
             faceG.attr("data-score", step.score);
@@ -441,7 +461,7 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
             effectiveActiveGroup,
             parsed.tagGroups,
             onNavigateToLine,
-            solid
+            fillMode
           );
         }
       }
@@ -456,7 +476,7 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
         effectiveActiveGroup,
         parsed.tagGroups,
         onNavigateToLine,
-        solid
+        fillMode
       );
     }
   }
@@ -530,7 +550,7 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
       );
       const by = Math.max(PADDING, fcy - FACE_HOVER_R - THOUGHT_GAP - bh);
       const scoreColor = scoreToColor(score, palette);
-      const tintedBg = mix(scoreColor, palette.surface, 20);
+      const tintedBg = fillMode === "outline" ? themeBaseBg(palette, isDark) : mix(scoreColor, palette.surface, 20);
       const g = overlayG.append("g").attr("class", "journey-thought-hover");
       g.append("rect").attr("x", bx).attr("y", by).attr("width", bw).attr("height", bh).attr("rx", CARD_RADIUS).attr("fill", tintedBg).attr("stroke", scoreColor).attr("stroke-width", CARD_STROKE_WIDTH);
       g.append("line").attr("x1", fcx).attr("y1", by + bh).attr("x2", fcx).attr("y2", fcy - FACE_HOVER_R - 1).attr("stroke", scoreColor).attr("stroke-width", CARD_STROKE_WIDTH);
@@ -624,7 +644,7 @@ function resolveStepColor(step, scoreColor, activeGroup, tagGroups, _palette) {
   );
   return entry?.color;
 }
-function renderStepCard(parent, sl, palette, isDark, activeGroup, tagGroups, onNavigateToLine, solid) {
+function renderStepCard(parent, sl, palette, isDark, activeGroup, tagGroups, onNavigateToLine, fillMode) {
   const stepG = parent.append("g").attr("class", "journey-step").attr("data-line-number", sl.step.lineNumber);
   if (sl.step.score !== void 0) {
     stepG.attr("data-score", sl.step.score);
@@ -645,7 +665,7 @@ function renderStepCard(parent, sl, palette, isDark, activeGroup, tagGroups, onN
     palette,
     resolvedColor ?? palette.primary,
     isDark,
-    { ...solid !== void 0 && { solid } }
+    { mode: fillMode }
   );
   const cardStroke = resolvedColor ?? palette.textMuted;
   const onCardText = contrastText(
@@ -663,7 +683,7 @@ function renderStepCard(parent, sl, palette, isDark, activeGroup, tagGroups, onN
   const cardAnnotations = sl.step.annotations;
   const hasContent = sl.step.description || cardAnnotations.length > 0;
   if (hasContent) {
-    stepG.append("line").attr("x1", cx).attr("y1", cy + titleBlockH).attr("x2", cx + sl.width).attr("y2", cy + titleBlockH).attr("stroke", solid ? onCardText : cardStroke).attr("stroke-opacity", 0.3).attr("stroke-width", 1);
+    stepG.append("line").attr("x1", cx).attr("y1", cy + titleBlockH).attr("x2", cx + sl.width).attr("y2", cy + titleBlockH).attr("stroke", fillMode === "solid" ? onCardText : cardStroke).attr("stroke-opacity", 0.3).attr("stroke-width", 1);
   }
   let metaY = cy + titleBlockH + CARD_META_LINE_HEIGHT;
   if (sl.step.description) {
@@ -685,7 +705,7 @@ function renderStepCard(parent, sl, palette, isDark, activeGroup, tagGroups, onN
     const annoColor = annotationColor(anno.type, palette);
     const iconPaths = annotationIconPaths(anno.type);
     const annoLines = wrapText(anno.text, annoTextW, FONT_SIZE_META);
-    const iconColor = solid ? onCardText : annoColor;
+    const iconColor = fillMode === "solid" ? onCardText : annoColor;
     renderAnnotationIcon(
       stepG,
       cx + CARD_PADDING_X,
@@ -710,7 +730,7 @@ function renderStepCard(parent, sl, palette, isDark, activeGroup, tagGroups, onN
     const TAG_GAP = 6;
     const stripY = cy - TAG_STRIP_HEIGHT - TAG_GAP;
     const stripFill = shapeFill(palette, stripColor, isDark, {
-      ...solid !== void 0 && { solid }
+      mode: fillMode
     });
     stepG.append("rect").attr("x", cx).attr("y", stripY).attr("width", sl.width).attr("height", TAG_STRIP_HEIGHT).attr("rx", CARD_RADIUS).attr("fill", stripFill).attr("stroke", stripColor).attr("stroke-width", CARD_STROKE_WIDTH);
     const stripTextColor = contrastText(
@@ -727,8 +747,8 @@ function renderStepCard(parent, sl, palette, isDark, activeGroup, tagGroups, onN
     });
   }
 }
-function renderPersonaSilhouette(parent, cx, cy, color, palette, scale = 1) {
-  const fill = mix(color, palette.bg, 70);
+function renderPersonaSilhouette(parent, cx, cy, color, palette, isDark, scale = 1, fillMode) {
+  const fill = fillMode === "outline" ? themeBaseBg(palette, isDark) : mix(color, palette.bg, 70);
   const stroke = color;
   const s = scale;
   parent.append("path").attr(
@@ -740,12 +760,12 @@ function renderPersonaSilhouette(parent, cx, cy, color, palette, scale = 1) {
     `M ${cx} ${cy - 12 * s} C ${cx + 10 * s} ${cy - 12 * s}, ${cx + 9 * s} ${cy + 2 * s}, ${cx + 6 * s} ${cy + 6 * s} Q ${cx} ${cy + 9 * s}, ${cx - 6 * s} ${cy + 6 * s} C ${cx - 9 * s} ${cy + 2 * s}, ${cx - 10 * s} ${cy - 12 * s}, ${cx} ${cy - 12 * s} Z`
   ).attr("fill", fill).attr("stroke", stroke).attr("stroke-width", 1.2);
 }
-function renderScoreFace(parent, cx, cy, score, palette, isDark, radius) {
+function renderScoreFace(parent, cx, cy, score, palette, isDark, radius, fillMode) {
   const r = radius ?? FACE_RADIUS;
   const color = scoreToColor(score, palette);
   const g = parent.append("g").attr("class", "journey-face").attr("data-cx", cx).attr("data-cy", cy);
   const iconG = g.append("g").attr("class", "journey-face-icon");
-  const faceFill = shapeFill(palette, color, isDark);
+  const faceFill = fillMode === "outline" ? shapeFill(palette, color, isDark, { mode: "outline" }) : shapeFill(palette, color, isDark);
   iconG.append("circle").attr("cx", cx).attr("cy", cy).attr("r", r + 1).attr("fill", palette.bg);
   iconG.append("circle").attr("cx", cx).attr("cy", cy).attr("r", r).attr("fill", faceFill).attr("stroke", color).attr("stroke-width", 2);
   const eyeColor = color;
@@ -848,4 +868,4 @@ export {
   renderJourneyMap,
   renderJourneyMapForExport
 };
-//# sourceMappingURL=chunk-EXOQP75F.js.map
+//# sourceMappingURL=chunk-CIRFIL4M.js.map

package/dist/{chunk-RBDIYLA5.js → chunk-DAOFNU6J.js}

@@ -34,6 +34,21 @@ function monthNameToNum(raw) {
   i = MONTHS_ABBR.indexOf(t.slice(0, 3));
   return i >= 0 ? i + 1 : 0;
 }
+var MONTH_NAME_SCAN_RE = /\b(\d{1,2})\s+([A-Za-z]{3,9})\.?(?:\s+\d{4})?|\b([A-Za-z]{3,9})\.?\s+(\d{1,2})(?:,?\s+\d{4})?/g;
+function scanMonthNameDates(line) {
+  const spans = [];
+  const re = new RegExp(MONTH_NAME_SCAN_RE.source, "g");
+  let m;
+  while ((m = re.exec(line)) !== null) {
+    const month = m[2] ?? m[3] ?? "";
+    if (monthNameToNum(month) <= 0) {
+      re.lastIndex = m.index + 1;
+      continue;
+    }
+    spans.push({ start: m.index, end: m.index + m[0].length });
+  }
+  return spans;
+}
 var ERA_RE = /^(\d{1,4})(?:-(\d{2})(?:-(\d{2}))?)?\s+(BCE|BC|CE|AD)\b/i;
 var ISO_RE = /^(\d{4})(?:-(\d{2})(?:-(\d{2}))?)?/;
 var MONTH_D_RE = /^([A-Za-z]{3,9})\.?\s+(\d{1,2})(?:,?\s+(\d{4}))?/;
@@ -258,10 +273,11 @@ function normalizeDate(raw, opts = {}) {
 }
 
 export {
+  scanMonthNameDates,
   parseDateToken,
   toInternal,
   resolveTokenYear,
   makeYearContext,
   normalizeDate
 };
-//# sourceMappingURL=chunk-RBDIYLA5.js.map
+//# sourceMappingURL=chunk-DAOFNU6J.js.map

package/dist/{chunk-4VWJ4LW2.js → chunk-DYWQFQJP.js}

@@ -11,7 +11,7 @@ import {
   initD3Chart,
   renderChartTitle,
   resolveExportPalette
-} from "./chunk-U6EQI3U6.js";
+} from "./chunk-QBZYACOG.js";
 import {
   computeLegendLayout
 } from "./chunk-YAA6IID3.js";
@@ -32,7 +32,7 @@ import {
   getSimpleChartLegendGroups,
   parseChart,
   parseExtendedChart
-} from "./chunk-QZPEGJOM.js";
+} from "./chunk-EMLPOL77.js";
 import {
   contrastText,
   getSegmentColors,
@@ -40,11 +40,12 @@ import {
   hexToHSL,
   hslToHex,
   mix,
-  shapeFill
-} from "./chunk-P6T66CCZ.js";
+  shapeFill,
+  themeBaseBg
+} from "./chunk-WBM7ZNDI.js";
 import {
   tagAttrKey
-} from "./chunk-467TVMQL.js";
+} from "./chunk-HHKO6SKY.js";
 
 // src/utils/legend-svg.ts
 function esc(s) {
@@ -220,12 +221,12 @@ function renderBar(svg, chart, width, height, colors, palette, isDark, textColor
   ) : 1;
   const horizontal = chart.orientation === "horizontal";
   const multiSeries = seriesCount > 1;
-  const solid = chart.solidFill === true;
+  const fillMode = chart.fillMode;
   const colorFor = (seriesIdx, catIdx, override) => {
     if (override) return override;
     return multiSeries ? colors[seriesIdx % colors.length] : colors[catIdx % colors.length];
   };
-  const fillOf = (c) => solid ? c : shapeFill(palette, c, isDark);
+  const fillOf = (c) => shapeFill(palette, c, isDark, { mode: fillMode });
   const top = reserveHeader(
     svg,
     chart,
@@ -402,7 +403,7 @@ function seriesValue(pt, s) {
 function renderLine(svg, chart, width, height, colors, palette, isDark, textColor, mutedColor, bgColor, hasTitle) {
   const data = chart.data;
   const isArea = chart.fill === true;
-  const solid = chart.solidFill === true;
+  const solid = chart.fillMode === "solid";
   const seriesNames = chart.seriesNames?.length ? chart.seriesNames : [chart.series ?? ""];
   const seriesCount = Math.max(
     1,
@@ -558,7 +559,7 @@ function renderPie(svg, chart, width, height, palette, isDark, textColor, topIns
   if (data.length === 0) return;
   const holeRatio = chart.hole;
   const hasHole = holeRatio !== void 0;
-  const solid = chart.solidFill === true;
+  const fillMode = chart.fillMode;
   const total = data.reduce((a, d) => a + d.value, 0);
   const cx = width / 2;
   const top = topInset + 12;
@@ -593,7 +594,7 @@ function renderPie(svg, chart, width, height, palette, isDark, textColor, topIns
   const g = svg.append("g").attr("transform", `translate(${cx},${cy})`);
   arcs.forEach((a, i) => {
     const stroke = strokeFor(i, data[i].color);
-    const fill = solid ? stroke : shapeFill(palette, stroke, isDark);
+    const fill = shapeFill(palette, stroke, isDark, { mode: fillMode });
     const pct = Math.round(data[i].value / total * 100);
     const slice = g.append("path").attr("d", arcGen(a) ?? "").attr("fill", fill).attr("stroke", stroke).attr("stroke-width", 1.5);
     tagDatum(slice, {
@@ -644,7 +645,8 @@ function renderRadar(svg, chart, width, height, colors, palette, isDark, textCol
   const data = chart.data;
   const n = data.length;
   if (n < 3) return;
-  const solid = chart.solidFill === true;
+  const fillMode = chart.fillMode;
+  const solid = fillMode === "solid";
   const seriesNames = chart.seriesNames?.length ? chart.seriesNames : [chart.series ?? ""];
   const seriesCount = Math.max(
     1,
@@ -688,7 +690,10 @@ function renderRadar(svg, chart, width, height, colors, palette, isDark, textCol
     const seriesLine = chart.seriesNameLineNumbers?.[s];
     if (seriesLine !== void 0) g.attr("data-line-number", seriesLine);
     const poly = data.map((d, i) => pt(i, seriesValue2(d, s) / maxValue * radius).join(",")).join(" ");
-    g.append("polygon").attr("points", poly).attr("fill", solid || multi ? color : shapeFill(palette, color, isDark)).attr("fill-opacity", solid ? 0.6 : multi ? 0.2 : 1).attr("stroke", color).attr("stroke-width", 2);
+    g.append("polygon").attr("points", poly).attr(
+      "fill",
+      fillMode === "outline" ? "none" : solid || multi ? color : shapeFill(palette, color, isDark)
+    ).attr("fill-opacity", solid ? 0.6 : multi ? 0.2 : 1).attr("stroke", color).attr("stroke-width", 2);
     data.forEach((d, i) => {
       const v = seriesValue2(d, s);
       const [x, y] = pt(i, v / maxValue * radius);
@@ -719,7 +724,7 @@ function renderPolarArea(svg, chart, width, height, palette, isDark, textColor,
   const data = chart.data.filter((d) => d.value > 0);
   const n = data.length;
   if (n === 0) return;
-  const solid = chart.solidFill === true;
+  const fillMode = chart.fillMode;
   const total = data.reduce((a, d) => a + d.value, 0);
   const maxValue = Math.max(...data.map((d) => d.value)) || 1;
   const cx = width / 2;
@@ -737,7 +742,7 @@ function renderPolarArea(svg, chart, width, height, palette, isDark, textColor,
     const a1 = a0 + seg;
     const arcGen = d3arc2().innerRadius(innerR).outerRadius(r).startAngle(a0).endAngle(a1);
     const pct = Math.round(d.value / total * 100);
-    const sector = g.append("path").attr("d", arcGen({}) ?? "").attr("fill", solid ? stroke : shapeFill(palette, stroke, isDark)).attr("stroke", stroke).attr("stroke-width", 2);
+    const sector = g.append("path").attr("d", arcGen({}) ?? "").attr("fill", shapeFill(palette, stroke, isDark, { mode: fillMode })).attr("stroke", stroke).attr("stroke-width", 2);
     tagDatum(sector, {
       line: d.lineNumber,
       key: d.label,
@@ -768,7 +773,7 @@ function renderFunnel(svg, chart, width, height, colors, palette, isDark, topIns
   const sorted = [...chart.data].sort((a, b) => b.value - a.value);
   const n = sorted.length;
   if (n === 0) return;
-  const solid = chart.solidFill === true;
+  const fillMode = chart.fillMode;
   const top = topInset + 8;
   const bottom = height - 30;
   const H = bottom - top;
@@ -826,7 +831,7 @@ function renderFunnel(svg, chart, width, height, colors, palette, isDark, topIns
   ({ plotW, cx } = layout(rightW));
   sorted.forEach((d, i) => {
     const stroke = d.color ?? colors[chart.data.indexOf(d) % colors.length];
-    const fill = solid ? stroke : shapeFill(palette, stroke, isDark);
+    const fill = shapeFill(palette, stroke, isDark, { mode: fillMode });
     const { topW, botW } = bandWidthsAt(plotW, i);
     const y0 = top + i * bandH;
     const y1 = y0 + bandH;
@@ -850,7 +855,7 @@ function renderFunnel(svg, chart, width, height, colors, palette, isDark, topIns
     const valueInside = valueInsideAt(plotW, i);
     if (valueInside) {
       const valueSize = valueSizeAt(plotW, i);
-      const valueFill = solid ? contrastText(fill, palette.textOnFillLight, palette.textOnFillDark) : stroke;
+      const valueFill = fillMode === "solid" ? contrastText(fill, palette.textOnFillLight, palette.textOnFillDark) : stroke;
       svg.append("text").attr("x", cx).attr("y", yMid + valueSize * 0.35).attr("text-anchor", "middle").attr("fill", valueFill).attr("font-size", valueSize).attr("font-weight", 700).attr("font-family", FONT_FAMILY).text(fmtNum(d.value));
     }
     const showValueRight = !chart.noValue && !valueInside;
@@ -883,12 +888,14 @@ function renderHeatmap(svg, chart, width, height, palette, isDark, textColor, bg
       minValue = Math.min(minValue, v);
       maxValue = Math.max(maxValue, v);
     }
-  const solid = chart.solidFill === true;
+  const outline = chart.fillMode === "outline";
+  const fillMode = outline || chart.fillMode === "solid" ? "solid" : void 0;
+  const baseBg = themeBaseBg(palette, isDark);
   const gradientStops = [
-    shapeFill(palette, palette.primary, isDark, { solid }),
-    shapeFill(palette, palette.colors.cyan, isDark, { solid }),
-    shapeFill(palette, palette.colors.yellow, isDark, { solid }),
-    shapeFill(palette, palette.colors.orange, isDark, { solid })
+    shapeFill(palette, palette.primary, isDark, { mode: fillMode }),
+    shapeFill(palette, palette.colors.cyan, isDark, { mode: fillMode }),
+    shapeFill(palette, palette.colors.yellow, isDark, { mode: fillMode }),
+    shapeFill(palette, palette.colors.orange, isDark, { mode: fillMode })
   ];
   const gradientAt = (t) => {
     const tt = Math.max(0, Math.min(1, t));
@@ -938,25 +945,26 @@ function renderHeatmap(svg, chart, width, height, palette, isDark, textColor, bg
     svg.append("text").attr("class", "dgmo-axis-label").attr("data-filter-attr", "data-row-key").attr("data-filter-value", row.label).attr("x", left - 10).attr("y", top + ri * ch + ch / 2 + 4).attr("text-anchor", "end").attr("fill", textColor).attr("font-size", 13).attr("font-family", FONT_FAMILY).text(row.label);
     row.values.forEach((v, ci) => {
       const t = maxValue === minValue ? 0.5 : (v - minValue) / (maxValue - minValue);
-      const cell = gradientAt(t);
+      const ramp = gradientAt(t);
+      const cell = outline ? baseBg : ramp;
       const colLabel = cols[ci] ?? `Col ${ci + 1}`;
       const cellKey = `${row.label} \xB7 ${colLabel}`;
-      const r = svg.append("rect").attr("x", left + ci * cw).attr("y", top + ri * ch).attr("width", cw).attr("height", ch).attr("fill", cell).attr("stroke", bgColor).attr("stroke-width", 2).attr("data-row-key", row.label).attr("data-col-key", colLabel);
+      const r = svg.append("rect").attr("x", left + ci * cw).attr("y", top + ri * ch).attr("width", cw).attr("height", ch).attr("fill", cell).attr("stroke", outline ? ramp : bgColor).attr("stroke-width", outline ? 1.5 : 2).attr("data-row-key", row.label).attr("data-col-key", colLabel);
       tagDatum(r, {
         line: row.lineNumber,
         key: cellKey,
         name: cellKey,
         value: fmtNum(v),
-        color: cell
+        color: ramp
       });
       if (!chart.noValue) {
-        const label = svg.append("text").attr("x", left + ci * cw + cw / 2).attr("y", top + ri * ch + ch / 2 + cellFont / 3).attr("text-anchor", "middle").attr("fill", labelTint(cell)).attr("font-size", cellFont).attr("font-weight", 600).attr("font-family", FONT_FAMILY).text(fmtNum(v));
+        const label = svg.append("text").attr("x", left + ci * cw + cw / 2).attr("y", top + ri * ch + ch / 2 + cellFont / 3).attr("text-anchor", "middle").attr("fill", labelTint(ramp)).attr("font-size", cellFont).attr("font-weight", 600).attr("font-family", FONT_FAMILY).text(fmtNum(v));
         tagDatum(label, {
           line: row.lineNumber,
           key: cellKey,
           name: cellKey,
           value: fmtNum(v),
-          color: cell
+          color: ramp
         });
         label.attr("data-row-key", row.label).attr("data-col-key", colLabel);
       }
@@ -1029,7 +1037,7 @@ function placeScatterHoverValue(cx, cy, r, labelText, valueText, labelRects, cir
 function renderScatter(svg, chart, width, height, colors, palette, isDark, textColor, mutedColor, topInset) {
   const points = chart.scatterPoints ?? [];
   if (points.length === 0) return;
-  const solid = chart.solidFill === true;
+  const fillMode = chart.fillMode;
   const hasSize = points.some((p) => p.size !== void 0);
   const categories = [
     ...new Set(points.map((p) => p.category).filter(Boolean))
@@ -1111,7 +1119,7 @@ function renderScatter(svg, chart, width, height, colors, palette, isDark, textC
   points.forEach((p, i) => {
     const stroke = p.color ?? (p.category ? catColor(p.category, catIndex.get(p.category) ?? 0) : colors[i % colors.length]);
     const r = radii[i];
-    const dot = svg.append("circle").attr("cx", x(p.x)).attr("cy", y(p.y)).attr("r", r).attr("fill", solid ? stroke : shapeFill(palette, stroke, isDark)).attr("fill-opacity", FILL_OPACITY).attr("stroke", stroke).attr("stroke-width", 2);
+    const dot = svg.append("circle").attr("cx", x(p.x)).attr("cy", y(p.y)).attr("r", r).attr("fill", shapeFill(palette, stroke, isDark, { mode: fillMode })).attr("fill-opacity", FILL_OPACITY).attr("stroke", stroke).attr("stroke-width", 2);
     tagDatum(dot, {
       line: p.lineNumber,
       key: p.name,
@@ -1162,7 +1170,7 @@ var NODE_GAP = 14;
 function renderSankey(svg, chart, width, height, colors, bgColor, textColor, topInset) {
   const links = chart.links ?? [];
   if (links.length === 0) return;
-  const solid = chart.solidFill === true;
+  const solid = chart.fillMode === "solid";
   const names = Array.from(new Set(links.flatMap((l) => [l.source, l.target])));
   const node = /* @__PURE__ */ new Map();
   names.forEach(
@@ -1264,7 +1272,9 @@ function renderSankey(svg, chart, width, height, colors, bgColor, textColor, top
     ).attr("fill", color).attr("fill-opacity", 0.6);
     tagDatum(ribbon, {
       line: l.lineNumber,
-      key: `link:${s.name}\0${t.name}`,
+      // U+241F (symbol-for-unit-separator) — collision-proof AND XML-legal;
+      // a raw control char here corrupts the exported SVG (data-emph-key).
+      key: `link:${s.name}\u241F${t.name}`,
       name: `${s.name} \u2192 ${t.name}`,
       value: String(l.value),
       color: s.raw
@@ -1291,7 +1301,7 @@ function renderSankey(svg, chart, width, height, colors, bgColor, textColor, top
 function renderChord(svg, chart, width, height, colors, palette, isDark, textColor, topInset) {
   const links = chart.links ?? [];
   if (links.length === 0) return;
-  const solid = chart.solidFill === true;
+  const fillMode = chart.fillMode;
   const names = Array.from(new Set(links.flatMap((l) => [l.source, l.target])));
   const n = names.length;
   const idx = new Map(names.map((nm, i) => [nm, i]));
@@ -1351,7 +1361,7 @@ function renderChord(svg, chart, width, height, colors, palette, isDark, textCol
   names.forEach((nm, i) => {
     const [px, py] = pos(i);
     const stroke = colorOf(i);
-    const dot = svg.append("circle").attr("cx", px).attr("cy", py).attr("r", 10).attr("fill", solid ? stroke : shapeFill(palette, stroke, isDark)).attr("stroke", stroke).attr("stroke-width", 2);
+    const dot = svg.append("circle").attr("cx", px).attr("cy", py).attr("r", 10).attr("fill", shapeFill(palette, stroke, isDark, { mode: fillMode })).attr("stroke", stroke).attr("stroke-width", 2);
     tagDatum(dot, { key: `node:${nm}`, name: nm, color: stroke });
     const c = Math.cos(angle(i));
     const lx = px + c * 16;
@@ -1701,4 +1711,4 @@ export {
   supportsD3DataChart,
   renderDataChartD3
 };
-//# sourceMappingURL=chunk-4VWJ4LW2.js.map
+//# sourceMappingURL=chunk-DYWQFQJP.js.map

package/dist/{chunk-QZPEGJOM.js → chunk-EMLPOL77.js}

@@ -1,11 +1,12 @@
 import {
   collectIndentedValues,
   extractColor,
+  fillModeFromToken,
   measureIndent,
   normalizeNumericToken,
   parseFirstLine,
   parseSeriesNames
-} from "./chunk-LV4BETUU.js";
+} from "./chunk-BRENJ2BQ.js";
 import {
   RECOGNIZED_COLOR_NAMES,
   resolveColorWithDiagnostic
@@ -43,7 +44,9 @@ var KNOWN_OPTIONS = /* @__PURE__ */ new Set([
 var DEFAULT_HOLE = 0.6;
 var KNOWN_BOOLEANS = /* @__PURE__ */ new Set([
   "orientation-horizontal",
-  "solid-fill",
+  "fill-tint",
+  "fill-solid",
+  "fill-outline",
   "no-title",
   "no-auto-y",
   "fill",
@@ -173,8 +176,10 @@ function parseChart(content, palette) {
     if (KNOWN_BOOLEANS.has(firstToken) && spaceIdx < 0) {
       if (firstToken === "orientation-horizontal") {
         result.orientation = "horizontal";
-      } else if (firstToken === "solid-fill") {
-        result.solidFill = true;
+      } else if (fillModeFromToken(firstToken) !== null) {
+        const fm = fillModeFromToken(firstToken);
+        if (fm === "tint") delete result.fillMode;
+        else result.fillMode = fm;
       } else if (firstToken === "no-title") {
         result.noTitle = true;
       } else if (firstToken === "no-auto-y") {
@@ -708,7 +713,7 @@ function parseExtendedChartFull(content, palette) {
       const spaceIdx2 = trimmed.indexOf(" ");
       const lastTok = trimmed.substring(trimmed.lastIndexOf(" ") + 1);
       const hasNumericSuffix = spaceIdx2 >= 0 && !isNaN(parseFloat(normalizeNumericToken(lastTok) ?? lastTok));
-      const isBareKeywordOption = spaceIdx2 < 0 && /^(solid-fill|no-name|no-value|no-percent|shade|no-title)$/i.test(
+      const isBareKeywordOption = spaceIdx2 < 0 && /^(fill-tint|fill-solid|fill-outline|no-name|no-value|no-percent|shade|no-title)$/i.test(
         trimmed
       );
       const isLayoutDirective = spaceIdx2 >= 0 && trimmed.substring(0, spaceIdx2).toLowerCase() === "layout";
@@ -839,8 +844,10 @@ function parseExtendedChartFull(content, palette) {
       result.shade = true;
       continue;
     }
-    if (firstToken === "solid-fill") {
-      result.solidFill = true;
+    const fillFamily = fillModeFromToken(firstToken);
+    if (fillFamily !== null && spaceIdx < 0) {
+      if (fillFamily === "tint") delete result.fillMode;
+      else result.fillMode = fillFamily;
       continue;
     }
     if (firstToken === "no-title" && spaceIdx < 0) {
@@ -1057,4 +1064,4 @@ export {
   getSimpleChartLegendGroups,
   getExtendedChartLegendGroups
 };
-//# sourceMappingURL=chunk-QZPEGJOM.js.map
+//# sourceMappingURL=chunk-EMLPOL77.js.map