@diagrammo/dgmo 0.51.0 → 0.52.0

package/dist/element.mjs

@@ -623,6 +623,23 @@ function extractColor(label, palette, diagnostics, line11) {
     ...color !== void 0 && { color }
   };
 }
+function fillModeFromToken(token) {
+  switch (token.trim().toLowerCase()) {
+    case "fill-solid":
+      return "solid";
+    case "fill-outline":
+      return "outline";
+    case "fill-tint":
+      return "tint";
+    default:
+      return null;
+  }
+}
+function fillModeFromOptions(options) {
+  if (options["fill-solid"] === "on") return "solid";
+  if (options["fill-outline"] === "on") return "outline";
+  return void 0;
+}
 function recognizeGlobalBoolean(token) {
   const t = token.trim().toLowerCase();
   return GLOBAL_BOOLEANS.has(t) ? t : null;
@@ -630,6 +647,9 @@ function recognizeGlobalBoolean(token) {
 function tryParseSharedOption(line11, options) {
   const key = recognizeGlobalBoolean(line11);
   if (key) {
+    if (FILL_FAMILY_TOKENS.has(key)) {
+      for (const t of FILL_FAMILY_TOKENS) delete options[t];
+    }
     options[key] = "on";
     return true;
   }
@@ -984,7 +1004,7 @@ function warnUnknownMetaKeys(meta, registry, warn, nameToScan) {
     }
   }
 }
-var RECOGNIZED_COLOR_SET, ALL_CHART_TYPES, OPTION_NOCOLON_RE, GLOBAL_BOOLEANS, RESERVED_KEY_RE, AS_ALIAS_RE, POTENTIAL_META_RE;
+var RECOGNIZED_COLOR_SET, ALL_CHART_TYPES, OPTION_NOCOLON_RE, GLOBAL_BOOLEANS, FILL_FAMILY_TOKENS, RESERVED_KEY_RE, AS_ALIAS_RE, POTENTIAL_META_RE;
 var init_parsing = __esm({
   "src/utils/parsing.ts"() {
     "use strict";
@@ -1051,10 +1071,17 @@ var init_parsing = __esm({
     ]);
     OPTION_NOCOLON_RE = /^([a-z][a-z0-9-]*)\s+(.+)$/i;
     GLOBAL_BOOLEANS = /* @__PURE__ */ new Set([
-      "solid-fill",
+      "fill-tint",
+      "fill-solid",
+      "fill-outline",
       "no-title",
       "no-notes"
     ]);
+    FILL_FAMILY_TOKENS = /* @__PURE__ */ new Set([
+      "fill-tint",
+      "fill-solid",
+      "fill-outline"
+    ]);
     RESERVED_KEY_RE = /^[A-Za-z][A-Za-z0-9_-]*$/;
     AS_ALIAS_RE = /\s+as\s+([A-Za-z][A-Za-z0-9_]{0,11})$/;
     POTENTIAL_META_RE = /\b([\w-]+)\s*:/;
@@ -1304,6 +1331,20 @@ function monthNameToNum(raw) {
   i = MONTHS_ABBR.indexOf(t.slice(0, 3));
   return i >= 0 ? i + 1 : 0;
 }
+function scanMonthNameDates(line11) {
+  const spans = [];
+  const re = new RegExp(MONTH_NAME_SCAN_RE.source, "g");
+  let m;
+  while ((m = re.exec(line11)) !== 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;
+}
 function matchTime(rest) {
   const m = rest.match(TIME_RE);
   if (!m) return { hour: 0, minute: 0, second: 0, hasTime: false, consumed: 0 };
@@ -1520,7 +1561,7 @@ function normalizeDate(raw, opts = {}) {
   const year = res.token.year ?? opts.year ?? opts.currentYear ?? (/* @__PURE__ */ new Date()).getFullYear();
   return toInternal(res.token, year);
 }
-var MONTHS_FULL, MONTHS_ABBR, ERA_RE, ISO_RE, MONTH_D_RE, D_MONTH_RE, SLASH_RE, TIME_RE;
+var MONTHS_FULL, MONTHS_ABBR, MONTH_NAME_SCAN_RE, ERA_RE, ISO_RE, MONTH_D_RE, D_MONTH_RE, SLASH_RE, TIME_RE;
 var init_date = __esm({
   "src/utils/date.ts"() {
     "use strict";
@@ -1552,6 +1593,7 @@ var init_date = __esm({
       "nov",
       "dec"
     ];
+    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;
     ERA_RE = /^(\d{1,4})(?:-(\d{2})(?:-(\d{2}))?)?\s+(BCE|BC|CE|AD)\b/i;
     ISO_RE = /^(\d{4})(?:-(\d{2})(?:-(\d{2}))?)?/;
     MONTH_D_RE = /^([A-Za-z]{3,9})\.?\s+(\d{1,2})(?:,?\s+(\d{4}))?/;
@@ -2392,7 +2434,7 @@ function parseVisualizationFull(content, palette) {
         }
         continue;
       }
-      if (!/^(era|marker|tag|sort|active-tag|swimlanes|no-scale|lane-by)\b/i.test(
+      if (!/^(era|marker|tag|sort|active-tag|swimlanes|no-scale|lane-by|fill-tint|fill-solid|fill-outline)\b/i.test(
         line11
       ) && !line11.startsWith("[")) {
         warn(lineNumber, `Expected a date at the start \u2014 e.g., '1718 ${line11}'`);
@@ -2400,7 +2442,9 @@ function parseVisualizationFull(content, palette) {
       }
     }
     if (result.type === "venn") {
-      if (/^(solid-fill|no-name|no-value|no-percent|no-title)$/i.test(line11)) {
+      if (/^(fill-tint|fill-solid|fill-outline|no-name|no-value|no-percent|no-title)$/i.test(
+        line11
+      )) {
       } else if (/\+/.test(line11)) {
         const knownSetRefs = /* @__PURE__ */ new Set();
         for (const s of result.vennSets) {
@@ -2434,7 +2478,9 @@ function parseVisualizationFull(content, palette) {
           continue;
         }
       }
-      if (!/^(solid-fill|no-name|no-value|no-percent|no-title)$/i.test(line11)) {
+      if (!/^(fill-tint|fill-solid|fill-outline|no-name|no-value|no-percent|no-title)$/i.test(
+        line11
+      )) {
         const { label: lineWithoutColor, colorName } = peelTrailingColorName(line11);
         let color = null;
         if (colorName) {
@@ -2601,8 +2647,10 @@ function parseVisualizationFull(content, palette) {
         result.noPercent = true;
         continue;
       }
-      if (bareToken === "solid-fill") {
-        result.solidFill = true;
+      const fillFamily = fillModeFromToken(bareToken);
+      if (fillFamily !== null) {
+        if (fillFamily === "tint") delete result.fillMode;
+        else result.fillMode = fillFamily;
         continue;
       }
       if (bareToken === "no-title") {
@@ -3367,7 +3415,8 @@ function themeBaseBg(palette, isDark) {
   return isDark ? palette.surface : palette.bg;
 }
 function shapeFill(palette, intent, isDark, opts) {
-  if (opts?.solid) return intent;
+  if (opts?.mode === "solid") return intent;
+  if (opts?.mode === "outline") return themeBaseBg(palette, isDark);
   return mix(intent, themeBaseBg(palette, isDark), 25);
 }
 function getSeriesColors(palette) {
@@ -5667,7 +5716,7 @@ function getEraColors(palette) {
     palette.colors.purple
   ];
 }
-function renderEras(g, eras, scale, isVertical, innerWidth, innerHeight, onEnter, onLeave, hasScale = false, _tooltip = null, palette, reservedLabelY) {
+function renderEras(g, eras, scale, isVertical, innerWidth, innerHeight, onEnter, onLeave, hasScale = false, _tooltip = null, palette, reservedLabelY, fillMode, outlineBg) {
   const eraColors = palette ? getEraColors(palette) : ["#3b6ea5", "#5b9357", "#c9a227", "#cc7a33", "#7d5ba6"];
   eras.forEach((era, i) => {
     const startVal = parseTimelineDate(era.startDate);
@@ -5681,10 +5730,20 @@ function renderEras(g, eras, scale, isVertical, innerWidth, innerHeight, onEnter
     let labelEl;
     let displayLabel = era.label;
     let truncated = false;
+    const outlineEra = fillMode === "outline" && outlineBg !== void 0;
+    const applyEraFill = (rect2) => {
+      if (outlineEra) {
+        rect2.attr("fill", outlineBg).attr("stroke", color).attr("stroke-width", 1);
+      } else {
+        rect2.attr("fill", color).attr("opacity", 0.08);
+      }
+    };
     if (isVertical) {
       const y = Math.min(start, end);
       const h = Math.abs(end - start);
-      eraG.append("rect").attr("x", 0).attr("y", y).attr("width", innerWidth).attr("height", h).attr("fill", color).attr("opacity", 0.08);
+      applyEraFill(
+        eraG.append("rect").attr("x", 0).attr("y", y).attr("width", innerWidth).attr("height", h)
+      );
       labelEl = eraG.append("text").attr("x", 6).attr("y", y + 18).attr("text-anchor", "start").attr("fill", color).attr("font-size", "13px").attr("font-weight", "600").attr("opacity", 0.8).text(displayLabel);
     } else {
       const x = Math.min(start, end);
@@ -5692,7 +5751,9 @@ function renderEras(g, eras, scale, isVertical, innerWidth, innerHeight, onEnter
       const useReservedRow = reservedLabelY != null;
       const rectTop = useReservedRow ? 0 : hasScale ? -48 : 0;
       const labelY = useReservedRow ? reservedLabelY : hasScale ? -32 : 18;
-      eraG.append("rect").attr("x", x).attr("y", rectTop).attr("width", w).attr("height", innerHeight - rectTop).attr("fill", color).attr("opacity", 0.08);
+      applyEraFill(
+        eraG.append("rect").attr("x", x).attr("y", rectTop).attr("width", w).attr("height", innerHeight - rectTop)
+      );
       if (useReservedRow) {
         const maxW = Math.max(0, w - 8);
         displayLabel = truncateLegendText(era.label, 13, maxW);
@@ -5709,7 +5770,7 @@ function renderEras(g, eras, scale, isVertical, innerWidth, innerHeight, onEnter
     });
   });
 }
-function renderMarkers(g, markers, scale, isVertical, innerWidth, innerHeight, onEnter, onLeave, _hasScale = false, _tooltip = null, palette, reservedLabelY) {
+function renderMarkers(g, markers, scale, isVertical, innerWidth, innerHeight, onEnter, onLeave, _hasScale = false, _tooltip = null, palette, reservedLabelY, fillMode, outlineBg) {
   const defaultColor = palette?.accent || "#3a9188";
   const positions = markers.map((m) => {
     const v = parseTimelineDate(m.date);
@@ -5724,14 +5785,24 @@ function renderMarkers(g, markers, scale, isVertical, innerWidth, innerHeight, o
     const color = marker.color || defaultColor;
     const lineOpacity = 0.5;
     const diamondSize = 5;
+    const outlineDiamond = fillMode === "outline" && outlineBg !== void 0;
+    const applyDiamondFill = (path) => {
+      if (outlineDiamond) {
+        path.attr("fill", outlineBg).attr("stroke", color).attr("stroke-width", 1.25).attr("opacity", 0.9);
+      } else {
+        path.attr("fill", color).attr("opacity", 0.9);
+      }
+    };
     const markerG = g.append("g").attr("class", "tl-marker").attr("data-marker-date", String(dateVal)).attr("data-line-number", String(marker.lineNumber)).style("cursor", "pointer");
     if (isVertical) {
       markerG.append("line").attr("x1", 0).attr("y1", pos).attr("x2", innerWidth).attr("y2", pos).attr("stroke", color).attr("stroke-width", 1.5).attr("stroke-dasharray", "6 4").attr("opacity", lineOpacity);
       markerG.append("text").attr("x", -diamondSize - 8).attr("y", pos - diamondSize - 4).attr("text-anchor", "middle").attr("fill", color).attr("font-size", "11px").attr("font-weight", "600").text(marker.label);
-      markerG.append("path").attr(
-        "d",
-        `M${-diamondSize - 8},${pos} l${diamondSize},-${diamondSize} l${diamondSize},${diamondSize} l-${diamondSize},${diamondSize} Z`
-      ).attr("fill", color).attr("opacity", 0.9);
+      applyDiamondFill(
+        markerG.append("path").attr(
+          "d",
+          `M${-diamondSize - 8},${pos} l${diamondSize},-${diamondSize} l${diamondSize},${diamondSize} l-${diamondSize},${diamondSize} Z`
+        )
+      );
       markerG.on("mouseenter", function() {
         onEnter(dateVal);
       }).on("mouseleave", function() {
@@ -5757,10 +5828,12 @@ function renderMarkers(g, markers, scale, isVertical, innerWidth, innerHeight, o
         truncated = displayLabel !== marker.label;
       }
       const labelEl = markerG.append("text").attr("x", pos).attr("y", labelY).attr("text-anchor", "middle").attr("fill", color).attr("font-size", "11px").attr("font-weight", "600").text(displayLabel);
-      markerG.append("path").attr(
-        "d",
-        `M${pos},${diamondY - diamondSize} l${diamondSize},${diamondSize} l-${diamondSize},${diamondSize} l-${diamondSize},-${diamondSize} Z`
-      ).attr("fill", color).attr("opacity", 0.9);
+      applyDiamondFill(
+        markerG.append("path").attr(
+          "d",
+          `M${pos},${diamondY - diamondSize} l${diamondSize},${diamondSize} l-${diamondSize},${diamondSize} l-${diamondSize},-${diamondSize} Z`
+        )
+      );
       markerG.append("line").attr("x1", pos).attr("y1", lineTop).attr("x2", pos).attr("y2", innerHeight).attr("stroke", color).attr("stroke-width", 1.5).attr("stroke-dasharray", "6 4").attr("opacity", lineOpacity);
       markerG.on("mouseenter", function() {
         onEnter(dateVal);
@@ -5887,7 +5960,7 @@ function renderTimelineGroupLegend(g, groups, groupColorMap, textColor, palette,
 }
 function setupTimeline(container, parsed, palette, isDark, exportDims, activeTagGroup, swimlaneTagGroup) {
   d3Selection3.select(container).selectAll(":not([data-d3-tooltip])").remove();
-  const solid = parsed.solidFill === true;
+  const fillMode = parsed.fillMode;
   const {
     timelineEvents,
     timelineGroups,
@@ -6012,7 +6085,7 @@ function setupTimeline(container, parsed, palette, isDark, exportDims, activeTag
     height,
     isVertical,
     tooltip,
-    solid,
+    fillMode,
     textColor,
     mutedColor,
     bgColor,
@@ -6142,7 +6215,7 @@ function makeTimelineHoverHelpers() {
 }
 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 { width, textColor, groupColorMap, fillMode } = setup;
   const { FADE_OPACITY: FADE_OPACITY2, fadeReset, fadeToTagValue } = hovers;
   const title = parsed.noTitle ? null : parsed.title;
   const { timelineEvents } = parsed;
@@ -6295,8 +6368,8 @@ function renderTimelineTagLegendOverlay(container, parsed, palette, isDark, setu
         } else {
           color = ev.group && groupColorMap.has(ev.group) ? groupColorMap.get(ev.group) : textColor;
         }
-        el.selectAll("rect").attr("fill", shapeFill(palette, color, isDark, { solid })).attr("stroke", color);
-        el.selectAll("circle:not(.tl-event-point-outline)").attr("fill", shapeFill(palette, color, isDark, { solid })).attr("stroke", color);
+        el.selectAll("rect").attr("fill", shapeFill(palette, color, isDark, { mode: fillMode })).attr("stroke", color);
+        el.selectAll("circle:not(.tl-event-point-outline)").attr("fill", shapeFill(palette, color, isDark, { mode: fillMode })).attr("stroke", color);
       });
     };
     var drawSwimlaneIcon3 = drawSwimlaneIcon4, relayout = relayout2, drawLegend = drawLegend2, recolorEvents = recolorEvents2;
@@ -6329,7 +6402,7 @@ function renderTimelineHorizontalTimeSort(container, parsed, palette, isDark, se
     width,
     height,
     tooltip,
-    solid,
+    fillMode,
     textColor,
     bgColor,
     bg,
@@ -6407,7 +6480,9 @@ function renderTimelineHorizontalTimeSort(container, parsed, palette, isDark, se
     timelineScale,
     tooltip,
     palette,
-    eraReserve ? eraLabelY : void 0
+    eraReserve ? eraLabelY : void 0,
+    fillMode,
+    bg
   );
   renderMarkers(
     g,
@@ -6421,7 +6496,9 @@ function renderTimelineHorizontalTimeSort(container, parsed, palette, isDark, se
     timelineScale,
     tooltip,
     palette,
-    markerReserve ? markerLabelY : void 0
+    markerReserve ? markerLabelY : void 0,
+    fillMode,
+    bg
   );
   if (timelineScale) {
     renderTimeScale(
@@ -6492,7 +6569,7 @@ function renderTimelineHorizontalTimeSort(container, parsed, palette, isDark, se
       const rectW = Math.max(x2 - x, 4);
       const estLabelWidth = ev.label.length * sCharW + ctx.aesthetic(16);
       const labelFitsInside = rectW >= estLabelWidth;
-      let fill2 = shapeFill(palette, color, isDark, { solid });
+      let fill2 = shapeFill(palette, color, isDark, { mode: fillMode });
       let stroke2 = color;
       if (ev.uncertain) {
         const gradientId = `uncertain-ts-${ev.lineNumber}`;
@@ -6503,7 +6580,7 @@ function renderTimelineHorizontalTimeSort(container, parsed, palette, isDark, se
           { offset: "0%", opacity: 1 },
           { offset: "80%", opacity: 1 },
           { offset: "100%", opacity: 0 }
-        ]).enter().append("stop").attr("offset", (d) => d.offset).attr("stop-color", mix(color, bg, 30)).attr("stop-opacity", (d) => d.opacity);
+        ]).enter().append("stop").attr("offset", (d) => d.offset).attr("stop-color", fillMode === "outline" ? bg : mix(color, bg, 30)).attr("stop-opacity", (d) => d.opacity);
         defsEl.append("linearGradient").attr("id", strokeGradientId).attr("x1", "0%").attr("y1", "0%").attr("x2", "100%").attr("y2", "0%").selectAll("stop").data([
           { offset: "0%", opacity: 1 },
           { offset: "80%", opacity: 1 },
@@ -6528,7 +6605,7 @@ function renderTimelineHorizontalTimeSort(container, parsed, palette, isDark, se
       const wouldFlipLeft = x > innerWidth * 0.6;
       const labelFitsLeft = x - sPointGap - estLabelWidth > 0;
       const flipLeft = wouldFlipLeft && labelFitsLeft;
-      evG.append("circle").attr("cx", x).attr("cy", y).attr("r", sPointR).attr("fill", shapeFill(palette, color, isDark, { solid })).attr("stroke", color).attr("stroke-width", sPointStroke);
+      evG.append("circle").attr("cx", x).attr("cy", y).attr("r", sPointR).attr("fill", shapeFill(palette, color, isDark, { mode: fillMode })).attr("stroke", color).attr("stroke-width", sPointStroke);
       evG.append("text").attr("x", flipLeft ? x - sPointGap : x + sPointGap).attr("y", y).attr("dy", "0.35em").attr("text-anchor", flipLeft ? "end" : "start").attr("fill", textColor).attr("font-size", `${sEventFontSm}px`).text(ev.label);
     }
   });
@@ -6538,7 +6615,7 @@ function renderTimelineHorizontalGrouped(container, parsed, palette, isDark, set
     width,
     height,
     tooltip,
-    solid,
+    fillMode,
     textColor,
     bgColor,
     bg,
@@ -6649,7 +6726,9 @@ function renderTimelineHorizontalGrouped(container, parsed, palette, isDark, set
     timelineScale,
     tooltip,
     palette,
-    eraReserve ? eraLabelY : void 0
+    eraReserve ? eraLabelY : void 0,
+    fillMode,
+    bg
   );
   renderMarkers(
     g,
@@ -6663,7 +6742,9 @@ function renderTimelineHorizontalGrouped(container, parsed, palette, isDark, set
     timelineScale,
     tooltip,
     palette,
-    markerReserve ? markerLabelY : void 0
+    markerReserve ? markerLabelY : void 0,
+    fillMode,
+    bg
   );
   if (timelineScale) {
     renderTimeScale(
@@ -6692,7 +6773,7 @@ function renderTimelineHorizontalGrouped(container, parsed, palette, isDark, set
     const sBandAccentW = ctx.structural(4);
     const clipId = `tl-band-clip-${tlBandClipCounter++}`;
     g.append("clipPath").attr("id", clipId).append("rect").attr("x", bandX).attr("y", bandY).attr("width", bandW).attr("height", bandH).attr("rx", sBandRx);
-    g.append("rect").attr("class", "tl-group-header-bg").attr("data-group", lane.name).attr("x", bandX).attr("y", bandY).attr("width", bandW).attr("height", bandH).attr("rx", sBandRx).attr("fill", shapeFill(palette, laneColor, isDark, { solid })).style("pointer-events", "none");
+    g.append("rect").attr("class", "tl-group-header-bg").attr("data-group", lane.name).attr("x", bandX).attr("y", bandY).attr("width", bandW).attr("height", bandH).attr("rx", sBandRx).attr("fill", shapeFill(palette, laneColor, isDark, { mode: fillMode })).style("pointer-events", "none");
     g.append("rect").attr("class", "tl-group-header-accent").attr("data-group", lane.name).attr("x", bandX).attr("y", bandY).attr("width", sBandAccentW).attr("height", bandH).attr("fill", laneColor).attr("clip-path", `url(#${clipId})`).style("pointer-events", "none");
     const headerG = g.append("g").attr("class", "tl-group-header").attr("data-group", lane.name).style("cursor", "pointer").on("mouseenter", () => fadeToGroup(g, lane.name)).on("mouseleave", () => fadeReset(g)).on("click", () => toggleGroup(lane.name));
     headerG.append("text").attr("x", -margin.left + ctx.aesthetic(10)).attr("y", curY + sBarH / 2).attr("dy", "0.35em").attr("text-anchor", "start").attr("fill", textColor).attr("font-size", `${sLaneHeaderFont}px`).attr("font-weight", "600").text(`${toggleIcon} ${lane.name}`);
@@ -6705,7 +6786,7 @@ function renderTimelineHorizontalGrouped(container, parsed, palette, isDark, set
       const sx2 = xScale(laneMaxD);
       const groupBarW = Math.max(sx2 - sx1, ctx.structural(20));
       const groupBarG = g.append("g").attr("class", isCollapsed ? "tl-group-summary" : "tl-group-bar").attr("data-group", lane.name).style("cursor", "pointer").on("mouseenter", () => fadeToGroup(g, lane.name)).on("mouseleave", () => fadeReset(g)).on("click", () => toggleGroup(lane.name));
-      groupBarG.append("rect").attr("x", sx1).attr("y", curY).attr("width", groupBarW).attr("height", sBarH).attr("rx", sBarRx).attr("fill", shapeFill(palette, laneColor, isDark, { solid })).attr("stroke", laneColor).attr("stroke-width", sBarStroke);
+      groupBarG.append("rect").attr("x", sx1).attr("y", curY).attr("width", groupBarW).attr("height", sBarH).attr("rx", sBarRx).attr("fill", shapeFill(palette, laneColor, isDark, { mode: fillMode })).attr("stroke", laneColor).attr("stroke-width", sBarStroke);
     }
     if (isCollapsed) {
       curY += rowH + sGroupGap;
@@ -6755,7 +6836,9 @@ function renderTimelineHorizontalGrouped(container, parsed, palette, isDark, set
       if (ev.endDate) {
         const x2 = xScale(parseTimelineDate(ev.endDate));
         const rectW = Math.max(x2 - x, 4);
-        let fill2 = shapeFill(palette, evColor, isDark, { solid });
+        let fill2 = shapeFill(palette, evColor, isDark, {
+          mode: fillMode
+        });
         let stroke2 = evColor;
         if (ev.uncertain) {
           const gradientId = `uncertain-${ev.lineNumber}`;
@@ -6766,7 +6849,10 @@ function renderTimelineHorizontalGrouped(container, parsed, palette, isDark, set
             { offset: "0%", opacity: 1 },
             { offset: "80%", opacity: 1 },
             { offset: "100%", opacity: 0 }
-          ]).enter().append("stop").attr("offset", (d) => d.offset).attr("stop-color", mix(evColor, bg, 30)).attr("stop-opacity", (d) => d.opacity);
+          ]).enter().append("stop").attr("offset", (d) => d.offset).attr(
+            "stop-color",
+            fillMode === "outline" ? bg : mix(evColor, bg, 30)
+          ).attr("stop-opacity", (d) => d.opacity);
           defsEl.append("linearGradient").attr("id", strokeGradientId).attr("x1", "0%").attr("y1", "0%").attr("x2", "100%").attr("y2", "0%").selectAll("stop").data([
             { offset: "0%", opacity: 1 },
             { offset: "80%", opacity: 1 },
@@ -6777,7 +6863,7 @@ function renderTimelineHorizontalGrouped(container, parsed, palette, isDark, set
         }
         evG.append("rect").attr("x", x).attr("y", y - sBarH / 2).attr("width", rectW).attr("height", sBarH).attr("rx", sBarRx).attr("fill", fill2).attr("stroke", stroke2).attr("stroke-width", sBarStroke);
       } else {
-        evG.append("circle").attr("cx", x).attr("cy", y).attr("r", sPointR).attr("fill", shapeFill(palette, evColor, isDark, { solid })).attr("stroke", evColor).attr("stroke-width", sPointStroke);
+        evG.append("circle").attr("cx", x).attr("cy", y).attr("r", sPointR).attr("fill", shapeFill(palette, evColor, isDark, { mode: fillMode })).attr("stroke", evColor).attr("stroke-width", sPointStroke);
       }
     });
     curY += (lane.events.length + 1) * rowH + sGroupGap;
@@ -6788,7 +6874,7 @@ function renderTimelineVertical(container, parsed, palette, isDark, setup, hover
     width,
     height,
     tooltip,
-    solid,
+    fillMode,
     textColor,
     mutedColor,
     bgColor,
@@ -6881,7 +6967,10 @@ function renderTimelineVertical(container, parsed, palette, isDark, setup, hover
       () => fadeReset(g),
       timelineScale,
       tooltip,
-      palette
+      palette,
+      void 0,
+      fillMode,
+      bg
     );
     renderMarkers(
       g,
@@ -6894,7 +6983,10 @@ function renderTimelineVertical(container, parsed, palette, isDark, setup, hover
       () => fadeReset(g),
       timelineScale,
       tooltip,
-      palette
+      palette,
+      void 0,
+      fillMode,
+      bg
     );
     if (timelineScale) {
       renderTimeScale(
@@ -6946,7 +7038,9 @@ function renderTimelineVertical(container, parsed, palette, isDark, setup, hover
         if (ev.endDate) {
           const y2 = yScale(parseTimelineDate(ev.endDate));
           const rectH = Math.max(y2 - y, 4);
-          let fill2 = shapeFill(palette, evColor, isDark, { solid });
+          let fill2 = shapeFill(palette, evColor, isDark, {
+            mode: fillMode
+          });
           let stroke2 = evColor;
           if (ev.uncertain) {
             const gradientId = `uncertain-vg-${ev.lineNumber}`;
@@ -6957,7 +7051,10 @@ function renderTimelineVertical(container, parsed, palette, isDark, setup, hover
               { offset: "0%", opacity: 1 },
               { offset: "80%", opacity: 1 },
               { offset: "100%", opacity: 0 }
-            ]).enter().append("stop").attr("offset", (d) => d.offset).attr("stop-color", mix(laneColor, bg, 30)).attr("stop-opacity", (d) => d.opacity);
+            ]).enter().append("stop").attr("offset", (d) => d.offset).attr(
+              "stop-color",
+              fillMode === "outline" ? bg : mix(laneColor, bg, 30)
+            ).attr("stop-opacity", (d) => d.opacity);
             defsEl.append("linearGradient").attr("id", strokeGradientId).attr("x1", "0%").attr("y1", "0%").attr("x2", "0%").attr("y2", "100%").selectAll("stop").data([
               { offset: "0%", opacity: 1 },
               { offset: "80%", opacity: 1 },
@@ -6969,7 +7066,10 @@ function renderTimelineVertical(container, parsed, palette, isDark, setup, hover
           evG.append("rect").attr("x", laneCenter - sBarW / 2).attr("y", y).attr("width", sBarW).attr("height", rectH).attr("rx", sBarRx).attr("fill", fill2).attr("stroke", stroke2).attr("stroke-width", sBarStroke);
           evG.append("text").attr("x", laneCenter + sBarW + ctx.aesthetic(2)).attr("y", y + rectH / 2).attr("dy", "0.35em").attr("fill", textColor).attr("font-size", `${sEventFont}px`).text(ev.label);
         } else {
-          evG.append("circle").attr("cx", laneCenter).attr("cy", y).attr("r", sPointR).attr("fill", shapeFill(palette, evColor, isDark, { solid })).attr("stroke", evColor).attr("stroke-width", sPointStroke);
+          evG.append("circle").attr("cx", laneCenter).attr("cy", y).attr("r", sPointR).attr(
+            "fill",
+            shapeFill(palette, evColor, isDark, { mode: fillMode })
+          ).attr("stroke", evColor).attr("stroke-width", sPointStroke);
           evG.append("text").attr("x", laneCenter + ctx.aesthetic(10)).attr("y", y).attr("dy", "0.35em").attr("fill", textColor).attr("font-size", `${sEventFont}px`).text(ev.label);
         }
       }
@@ -7009,7 +7109,10 @@ function renderTimelineVertical(container, parsed, palette, isDark, setup, hover
       () => fadeReset(g),
       timelineScale,
       tooltip,
-      palette
+      palette,
+      void 0,
+      fillMode,
+      bg
     );
     renderMarkers(
       g,
@@ -7022,7 +7125,10 @@ function renderTimelineVertical(container, parsed, palette, isDark, setup, hover
       () => fadeReset(g),
       timelineScale,
       tooltip,
-      palette
+      palette,
+      void 0,
+      fillMode,
+      bg
     );
     if (timelineScale) {
       renderTimeScale(
@@ -7073,7 +7179,9 @@ function renderTimelineVertical(container, parsed, palette, isDark, setup, hover
       if (ev.endDate) {
         const y2 = yScale(parseTimelineDate(ev.endDate));
         const rectH = Math.max(y2 - y, 4);
-        let fill2 = shapeFill(palette, color, isDark, { solid });
+        let fill2 = shapeFill(palette, color, isDark, {
+          mode: fillMode
+        });
         let stroke2 = color;
         if (ev.uncertain) {
           const gradientId = `uncertain-v-${ev.lineNumber}`;
@@ -7084,7 +7192,10 @@ function renderTimelineVertical(container, parsed, palette, isDark, setup, hover
             { offset: "0%", opacity: 1 },
             { offset: "80%", opacity: 1 },
             { offset: "100%", opacity: 0 }
-          ]).enter().append("stop").attr("offset", (d) => d.offset).attr("stop-color", mix(color, bg, 30)).attr("stop-opacity", (d) => d.opacity);
+          ]).enter().append("stop").attr("offset", (d) => d.offset).attr(
+            "stop-color",
+            fillMode === "outline" ? bg : mix(color, bg, 30)
+          ).attr("stop-opacity", (d) => d.opacity);
           defsEl.append("linearGradient").attr("id", strokeGradientId).attr("x1", "0%").attr("y1", "0%").attr("x2", "0%").attr("y2", "100%").selectAll("stop").data([
             { offset: "0%", opacity: 1 },
             { offset: "80%", opacity: 1 },
@@ -7096,7 +7207,7 @@ function renderTimelineVertical(container, parsed, palette, isDark, setup, hover
         evG.append("rect").attr("x", axisX - sBarW / 2).attr("y", y).attr("width", sBarW).attr("height", rectH).attr("rx", sBarRx).attr("fill", fill2).attr("stroke", stroke2).attr("stroke-width", sBarStroke);
         evG.append("text").attr("x", axisX + sBarW + ctx.aesthetic(4)).attr("y", y + rectH / 2).attr("dy", "0.35em").attr("fill", textColor).attr("font-size", `${sEventFontSm}px`).text(ev.label);
       } else {
-        evG.append("circle").attr("cx", axisX).attr("cy", y).attr("r", sPointR).attr("fill", shapeFill(palette, color, isDark, { solid })).attr("stroke", color).attr("stroke-width", sPointStroke);
+        evG.append("circle").attr("cx", axisX).attr("cy", y).attr("r", sPointR).attr("fill", shapeFill(palette, color, isDark, { mode: fillMode })).attr("stroke", color).attr("stroke-width", sPointStroke);
         evG.append("text").attr("x", axisX + sBarW + ctx.aesthetic(4)).attr("y", y).attr("dy", "0.35em").attr("fill", textColor).attr("font-size", `${sEventFontSm}px`).text(ev.label);
       }
       evG.append("text").attr("x", axisX - ctx.aesthetic(14)).attr(
@@ -8219,7 +8330,7 @@ function parseSequenceDgmo(content, palette) {
           continue;
         }
       }
-      if (KNOWN_SEQ_BOOLEANS.has(optLower) && (optLower === "solid-fill" || optLower === "no-title")) {
+      if (KNOWN_SEQ_BOOLEANS.has(optLower)) {
         if (contentStarted) {
           pushError(
             lineNumber,
@@ -8227,6 +8338,10 @@ function parseSequenceDgmo(content, palette) {
           );
           continue;
         }
+        if (FILL_FAMILY_TOKENS.has(optLower)) {
+          for (const t of FILL_FAMILY_TOKENS) delete result.options[t];
+          if (optLower === "fill-tint") continue;
+        }
         result.options[optLower] = "on";
         continue;
       }
@@ -8696,7 +8811,12 @@ var init_parser7 = __esm({
     init_reserved_key_registry();
     init_tag_groups();
     KNOWN_SEQ_OPTIONS = /* @__PURE__ */ new Set(["active-tag"]);
-    KNOWN_SEQ_BOOLEANS = /* @__PURE__ */ new Set(["solid-fill", "no-title"]);
+    KNOWN_SEQ_BOOLEANS = /* @__PURE__ */ new Set([
+      "fill-tint",
+      "fill-solid",
+      "fill-outline",
+      "no-title"
+    ]);
     NO_PREFIX_ONLY_BOOLEANS = /* @__PURE__ */ new Set(["activations"]);
     VALID_PARTICIPANT_TYPES = /* @__PURE__ */ new Set([
       "database",
@@ -9797,8 +9917,10 @@ function parseFlowchart(content, palette) {
         result.direction = dirMatch[1].toUpperCase();
         continue;
       }
-      if (/^solid-fill$/i.test(trimmed)) {
-        options["solid-fill"] = "on";
+      if (FILL_FAMILY_TOKENS.has(trimmed.toLowerCase())) {
+        for (const t of FILL_FAMILY_TOKENS) delete options[t];
+        if (trimmed.toLowerCase() !== "fill-tint")
+          options[trimmed.toLowerCase()] = "on";
         continue;
       }
       if (/^no-color$/i.test(trimmed)) {
@@ -10133,8 +10255,10 @@ function parseState(content, palette) {
         result.direction = "TB";
         continue;
       }
-      if (/^solid-fill$/i.test(trimmed)) {
-        options["solid-fill"] = "on";
+      if (FILL_FAMILY_TOKENS.has(trimmed.toLowerCase())) {
+        for (const t of FILL_FAMILY_TOKENS) delete options[t];
+        if (trimmed.toLowerCase() !== "fill-tint")
+          options[trimmed.toLowerCase()] = "on";
         continue;
       }
       if (/^no-color$/i.test(trimmed)) {
@@ -11547,7 +11671,9 @@ var init_parser10 = __esm({
     KNOWN_BOOLEANS = /* @__PURE__ */ new Set([
       "show-sub-node-count",
       "direction-tb",
-      "solid-fill",
+      "fill-tint",
+      "fill-solid",
+      "fill-outline",
       "no-title"
     ]);
   }
@@ -13236,8 +13362,16 @@ function applyDirective(key, value, lineNumber, options, error, warn, dateCfg) {
       options.noTitle = true;
       return;
     }
-    case "solid-fill": {
-      options.solidFill = true;
+    case "fill-solid": {
+      options.fillMode = "solid";
+      return;
+    }
+    case "fill-outline": {
+      options.fillMode = "outline";
+      return;
+    }
+    case "fill-tint": {
+      delete options.fillMode;
       return;
     }
     case "active-tag": {
@@ -13485,7 +13619,9 @@ var init_parser12 = __esm({
       "start-date",
       "end-date",
       "no-title",
-      "solid-fill",
+      "fill-tint",
+      "fill-solid",
+      "fill-outline",
       "sprint-length",
       "sprint-number",
       "sprint-start",
@@ -13903,8 +14039,10 @@ function parseChart(content, palette) {
     if (KNOWN_BOOLEANS2.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") {
@@ -14201,7 +14339,9 @@ var init_chart = __esm({
     DEFAULT_HOLE = 0.6;
     KNOWN_BOOLEANS2 = /* @__PURE__ */ new Set([
       "orientation-horizontal",
-      "solid-fill",
+      "fill-tint",
+      "fill-solid",
+      "fill-outline",
       "no-title",
       "no-auto-y",
       "fill",
@@ -14448,7 +14588,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";
@@ -14579,8 +14719,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) {
@@ -14933,7 +15075,7 @@ function parseEventLine(content, palette) {
     noTitle: false,
     noBox: false,
     noLegend: false,
-    solidFill: false
+    fillMode: void 0
   };
   const result = {
     type: "event-line",
@@ -15129,9 +15271,12 @@ function parseEventLine(content, palette) {
         options.noLegend = true;
         continue;
       }
-      if (trimmed.toLowerCase() === "solid-fill") {
-        options.solidFill = true;
-        continue;
+      {
+        const fm = fillModeFromToken(trimmed);
+        if (fm !== null) {
+          options.fillMode = fm === "tint" ? void 0 : fm;
+          continue;
+        }
       }
       const dirMatch = trimmed.match(DIRECTION_RE);
       if (dirMatch) {
@@ -16267,7 +16412,12 @@ var init_parser15 = __esm({
     PALETTE_COLOR_WORD_RE = /^(red|orange|yellow|green|blue|purple|teal|cyan|gray|black|white)\b/;
     AS_ALIAS_TOKEN_RE = /^as\s+([A-Za-z][A-Za-z0-9_]{0,11})\b/;
     KNOWN_OPTIONS4 = /* @__PURE__ */ new Set(["hide", "active-tag", "lane-by"]);
-    KNOWN_BOOLEANS3 = /* @__PURE__ */ new Set(["solid-fill", "no-title"]);
+    KNOWN_BOOLEANS3 = /* @__PURE__ */ new Set([
+      "fill-tint",
+      "fill-solid",
+      "fill-outline",
+      "no-title"
+    ]);
     REMOVED_BOOLEANS = {
       "no-auto-color": '"no-auto-color" was removed \u2014 colors are always auto-assigned from the palette; delete this line.'
     };
@@ -17034,7 +17184,9 @@ var init_parser16 = __esm({
     KNOWN_C4_OPTIONS = /* @__PURE__ */ new Set(["layout", "active-tag"]);
     KNOWN_C4_BOOLEANS = /* @__PURE__ */ new Set([
       "direction-tb",
-      "solid-fill",
+      "fill-tint",
+      "fill-solid",
+      "fill-outline",
       "no-title"
     ]);
     ALL_CHART_TYPES2 = [
@@ -17134,7 +17286,9 @@ var init_directives_registry = __esm({
       { token: "sprint-length", category: "directive", gantt: ["option"] },
       { token: "sprint-number", category: "directive", gantt: ["option"] },
       { token: "sprint-start", category: "directive", gantt: ["option"] },
-      { token: "solid-fill", category: "directive", gantt: ["boolean"] },
+      { token: "fill-tint", category: "directive", gantt: ["boolean"] },
+      { token: "fill-solid", category: "directive", gantt: ["boolean"] },
+      { token: "fill-outline", category: "directive", gantt: ["boolean"] },
       // `chart` is a wireframe element keyword (CONTROL); gantt also accepts it as
       // an option. Highlight family is control.
       { token: "chart", category: "control", gantt: ["option"] },
@@ -18377,7 +18531,7 @@ function parseGantt(content, palette) {
       sprintNumber: null,
       sprintStart: null,
       sprintMode: null,
-      solidFill: false,
+      fillMode: void 0,
       noTitle: false
     },
     diagnostics,
@@ -19020,8 +19174,14 @@ function parseGantt(content, palette) {
         case "today-marker":
           result.options.todayMarker = "on";
           break;
-        case "solid-fill":
-          result.options.solidFill = true;
+        case "fill-solid":
+          result.options.fillMode = "solid";
+          break;
+        case "fill-outline":
+          result.options.fillMode = "outline";
+          break;
+        case "fill-tint":
+          result.options.fillMode = void 0;
           break;
         case "no-title":
           result.options.noTitle = true;
@@ -21026,7 +21186,8 @@ var init_diagnostics6 = __esm({
       NESTED_BOX: "E_SKETCH_NESTED_BOX",
       AMBIGUOUS_TARGET: "E_SKETCH_AMBIGUOUS_TARGET",
       UNKNOWN_SHAPE: "W_SKETCH_UNKNOWN_SHAPE",
-      OVERLAP_RESOLVED: "W_SKETCH_OVERLAP_RESOLVED"
+      OVERLAP_RESOLVED: "W_SKETCH_OVERLAP_RESOLVED",
+      AT_OUT_OF_RANGE: "W_SKETCH_AT_OUT_OF_RANGE"
     };
     SKETCH_DIAGNOSTICS = [
       {
@@ -21064,6 +21225,15 @@ var init_diagnostics6 = __esm({
         message: (p) => `Shape "${String(p.label ?? "?")}" overlapped another at its authored position \u2014 moved to the nearest free slot`,
         hint: "Keep shapes at least 2 half-slots apart on one axis, or omit at: to flow-place.",
         example: "sketch\nA at: 0 0\nB at: 0 0"
+      },
+      {
+        code: SKETCH_DIAGNOSTIC_CODES.AT_OUT_OF_RANGE,
+        severity: "warning",
+        chartType: "sketch",
+        title: "at: coordinate out of range",
+        message: (p) => `at: coordinate "${String(p.raw ?? "?")}" is out of range \u2014 half-slot coords must be whole numbers within \xB1${String(p.max ?? "?")}; shape will flow-place`,
+        hint: "Use small integer half-slot coordinates near the origin, or omit at: to flow-place.",
+        example: "sketch\nA at: 2 0"
       }
     ];
   }
@@ -21096,7 +21266,7 @@ __export(parser_exports15, {
 function parseSketch(content, palette) {
   const options = {
     noLegend: false,
-    solidFill: false,
+    fillMode: void 0,
     noDescriptions: false
   };
   const result = {
@@ -21142,7 +21312,17 @@ function parseSketch(content, palette) {
       );
       return null;
     }
-    return { c: parseInt(m[1], 10), r: parseInt(m[2], 10) };
+    const c = parseInt(m[1], 10);
+    const r = parseInt(m[2], 10);
+    if (!Number.isSafeInteger(c) || !Number.isSafeInteger(r) || Math.abs(c) > SKETCH_AT_MAX || Math.abs(r) > SKETCH_AT_MAX) {
+      warn(
+        lineNumber,
+        `at: coordinate "${raw}" is out of range \u2014 half-slot coords must be whole numbers within \xB1${SKETCH_AT_MAX}; shape will flow-place`,
+        SKETCH_DIAGNOSTIC_CODES.AT_OUT_OF_RANGE
+      );
+      return null;
+    }
+    return { c, r };
   };
   const liftReserved = (meta, lineNumber) => {
     let shape = "rectangle";
@@ -21470,8 +21650,9 @@ function parseSketch(content, palette) {
       options.noLegend = true;
       continue;
     }
-    if (indent === 0 && /^solid-fill\s*$/i.test(trimmed)) {
-      options.solidFill = true;
+    if (indent === 0 && fillModeFromToken(trimmed) !== null) {
+      const fm = fillModeFromToken(trimmed);
+      options.fillMode = fm === "tint" ? void 0 : fm;
       continue;
     }
     if (indent === 0 && /^no-descriptions\s*$/i.test(trimmed)) {
@@ -21632,7 +21813,7 @@ ${descLine}`;
   }
   return result;
 }
-var EDGE_FORMS, EDGE_START_RE, LEFT_ARROW_RE, BOX_RE, BOX_TAIL_ALIAS_RE, AT_VALUE_RE;
+var EDGE_FORMS, EDGE_START_RE, LEFT_ARROW_RE, BOX_RE, BOX_TAIL_ALIAS_RE, AT_VALUE_RE, SKETCH_AT_MAX;
 var init_parser21 = __esm({
   "src/sketch/parser.ts"() {
     "use strict";
@@ -21663,6 +21844,7 @@ var init_parser21 = __esm({
     BOX_RE = /^\[([^\]]*)\]\s*(.*)$/;
     BOX_TAIL_ALIAS_RE = /^as\s+([A-Za-z][A-Za-z0-9_]{0,11})(?=\s|,|$)\s*,?\s*/;
     AT_VALUE_RE = /^(-?\d+)\s+(-?\d+)$/;
+    SKETCH_AT_MAX = 2e3;
   }
 });
 
@@ -21957,8 +22139,10 @@ function parseSwimlane(content, palette) {
       continue;
     }
     if (indent === 0) currentTagGroup = null;
-    if (indent === 0 && /^solid-fill\s*$/i.test(trimmed)) {
-      options["solid-fill"] = "on";
+    if (indent === 0 && FILL_FAMILY_TOKENS.has(trimmed.toLowerCase())) {
+      for (const t of FILL_FAMILY_TOKENS) delete options[t];
+      if (trimmed.toLowerCase() !== "fill-tint")
+        options[trimmed.toLowerCase()] = "on";
       continue;
     }
     if (indent === 0 && /^direction\s+/i.test(trimmed)) {
@@ -22184,7 +22368,7 @@ function parseSwimlane(content, palette) {
     if (!trimmed) continue;
     const indent = measureIndent(raw);
     if (indent === 0 && /^direction\s+/i.test(trimmed)) continue;
-    if (indent === 0 && /^solid-fill\s*$/i.test(trimmed)) continue;
+    if (indent === 0 && FILL_FAMILY_TOKENS.has(trimmed.toLowerCase())) continue;
     if (matchTagBlockHeading(trimmed) && indent === 0) {
       inTagBlock = true;
       continue;
@@ -24382,7 +24566,9 @@ var init_parser26 = __esm({
     KNOWN_OPTIONS8 = /* @__PURE__ */ new Set([]);
     KNOWN_BOOLEANS5 = /* @__PURE__ */ new Set([
       "show-blip-legend",
-      "solid-fill",
+      "fill-tint",
+      "fill-solid",
+      "fill-outline",
       "no-title"
     ]);
   }
@@ -25044,7 +25230,12 @@ var init_parser28 = __esm({
     PHASE_RE = /^\[(.+?)\]$/;
     ANNOTATION_RE = /^(pain|opportunity|thought)\s*:\s*(.+)$/i;
     KNOWN_OPTIONS9 = /* @__PURE__ */ new Set(["active-tag"]);
-    KNOWN_BOOLEANS6 = /* @__PURE__ */ new Set(["solid-fill", "no-title"]);
+    KNOWN_BOOLEANS6 = /* @__PURE__ */ new Set([
+      "fill-tint",
+      "fill-solid",
+      "fill-outline",
+      "no-title"
+    ]);
     REMOVED_BOOLEANS2 = {
       "no-legend": '"no-legend" has been removed \u2014 remove tag groups to hide the legend.'
     };
@@ -25390,7 +25581,7 @@ function parseTreemap(content, palette) {
     noPercent: false,
     noHeaders: false,
     noLegend: false,
-    solidFill: false,
+    fillMode: void 0,
     radial: false
   };
   const result = {
@@ -25607,9 +25798,12 @@ function handleDirective(trimmed, options, result, pushWarning, lineNumber) {
     else if (key === "legend") options.noLegend = true;
     return true;
   }
-  if (/^solid-fill\s*$/i.test(trimmed)) {
-    options.solidFill = true;
-    return true;
+  {
+    const fm = fillModeFromToken(trimmed);
+    if (fm !== null) {
+      options.fillMode = fm === "tint" ? void 0 : fm;
+      return true;
+    }
   }
   if (/^radial\s*$/i.test(trimmed)) {
     options.radial = true;
@@ -25720,7 +25914,7 @@ __export(parser_exports26, {
   parseBlock: () => parseBlock
 });
 function parseBlock(content, palette) {
-  const options = { noLegend: false, solidFill: false };
+  const options = { noLegend: false };
   const result = {
     type: "block",
     title: null,
@@ -25828,8 +26022,10 @@ function parseBlock(content, palette) {
           options.noLegend = true;
           continue;
         }
-        if (/^solid-fill\s*$/i.test(trimmed)) {
-          options.solidFill = true;
+        const fm = fillModeFromToken(trimmed);
+        if (fm !== null) {
+          if (fm === "tint") delete options.fillMode;
+          else options.fillMode = fm;
           continue;
         }
       }
@@ -26051,7 +26247,7 @@ function parseGoal(content, palette) {
   const options = {
     noPercent: false,
     noValue: false,
-    solidFill: false,
+    fillMode: void 0,
     noTitle: false,
     noAutoColor: false,
     noNote: false
@@ -26145,7 +26341,7 @@ function parseGoal(content, palette) {
       continue;
     }
     if (tryParseSharedOption(trimmed, sharedOpts)) {
-      if (sharedOpts["solid-fill"] === "on") options.solidFill = true;
+      options.fillMode = fillModeFromOptions(sharedOpts);
       if (sharedOpts["no-title"] === "on") options.noTitle = true;
       continue;
     }
@@ -26903,6 +27099,16 @@ function parseCountdown(content, palette) {
       case "no-visual":
         result.noVisual = true;
         break;
+      // ── §1.9 fill family — mutually exclusive bare flags, last one wins;
+      //    `fill-tint` is the explicit spelling of the default (clears it). ──
+      case "fill-tint":
+      case "fill-solid":
+      case "fill-outline": {
+        const fm = fillModeFromToken(key);
+        if (fm === "solid" || fm === "outline") result.fillMode = fm;
+        else delete result.fillMode;
+        break;
+      }
       // ── `note` — markdown caption; inline value or indented body block. ──
       case "note":
         inNote = true;
@@ -27790,6 +27996,14 @@ function parseClock(content, palette) {
         case "no-title":
           result.noTitle = true;
           break;
+        case "fill-tint":
+        case "fill-solid":
+        case "fill-outline": {
+          const fm = fillModeFromToken(key);
+          if (fm === "solid" || fm === "outline") result.fillMode = fm;
+          else delete result.fillMode;
+          break;
+        }
         case "color-by": {
           const v = rest.trim().toLowerCase();
           const modes = ["place", "work", "daylight", "time", "none"];
@@ -27950,7 +28164,10 @@ var init_parser35 = __esm({
       "time-24",
       "no-title",
       "direction",
-      "color-by"
+      "color-by",
+      "fill-tint",
+      "fill-solid",
+      "fill-outline"
     ]);
     WEEKDAY_ABBR2 = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
   }
@@ -28150,6 +28367,12 @@ function parseBracket(content, palette) {
       result.noRounds = true;
       continue;
     }
+    const fm = fillModeFromToken(lower);
+    if (fm !== null) {
+      if (fm === "tint") delete result.fillMode;
+      else result.fillMode = fm;
+      continue;
+    }
     const accentM = trimmed.match(/^accent\s+(.+)$/i);
     if (accentM) {
       const { color } = extractColor(
@@ -31793,6 +32016,13 @@ function parseBody(content, palette) {
         options.noTitle = true;
         continue;
       }
+      const fm = fillModeFromToken(trimmed);
+      if (fm !== null) {
+        if (fm === "tint") delete options.fillMode;
+        else options.fillMode = fm;
+        currentTagGroup = null;
+        continue;
+      }
     }
     const tagBlockMatch = matchTagBlockHeading(trimmed);
     if (tagBlockMatch && !contentStarted) {
@@ -32732,12 +32962,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,
@@ -32922,7 +33152,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,
@@ -33085,7 +33315,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;
@@ -33120,7 +33350,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 stroke2 = strokeFor(i, data[i].color);
-    const fill2 = solid ? stroke2 : shapeFill(palette, stroke2, isDark);
+    const fill2 = shapeFill(palette, stroke2, isDark, { mode: fillMode });
     const pct = Math.round(data[i].value / total * 100);
     const slice = g.append("path").attr("d", arcGen(a) ?? "").attr("fill", fill2).attr("stroke", stroke2).attr("stroke-width", 1.5);
     tagDatum(slice, {
@@ -33180,7 +33410,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,
@@ -33224,7 +33455,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);
@@ -33265,7 +33499,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;
@@ -33283,7 +33517,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 ? stroke2 : shapeFill(palette, stroke2, isDark)).attr("stroke", stroke2).attr("stroke-width", 2);
+    const sector = g.append("path").attr("d", arcGen({}) ?? "").attr("fill", shapeFill(palette, stroke2, isDark, { mode: fillMode })).attr("stroke", stroke2).attr("stroke-width", 2);
     tagDatum(sector, {
       line: d.lineNumber,
       key: d.label,
@@ -33320,7 +33554,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 H2 = bottom - top;
@@ -33378,7 +33612,7 @@ function renderFunnel(svg, chart, width, height, colors, palette, isDark, topIns
   ({ plotW, cx } = layout(rightW));
   sorted.forEach((d, i) => {
     const stroke2 = d.color ?? colors[chart.data.indexOf(d) % colors.length];
-    const fill2 = solid ? stroke2 : shapeFill(palette, stroke2, isDark);
+    const fill2 = shapeFill(palette, stroke2, isDark, { mode: fillMode });
     const { topW, botW } = bandWidthsAt(plotW, i);
     const y0 = top + i * bandH;
     const y1 = y0 + bandH;
@@ -33402,7 +33636,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(fill2, palette.textOnFillLight, palette.textOnFillDark) : stroke2;
+      const valueFill = fillMode === "solid" ? contrastText(fill2, palette.textOnFillLight, palette.textOnFillDark) : stroke2;
       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;
@@ -33446,12 +33680,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));
@@ -33501,25 +33737,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);
       }
@@ -33593,7 +33830,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))
@@ -33675,7 +33912,7 @@ function renderScatter(svg, chart, width, height, colors, palette, isDark, textC
   points.forEach((p, i) => {
     const stroke2 = 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 ? stroke2 : shapeFill(palette, stroke2, isDark)).attr("fill-opacity", FILL_OPACITY).attr("stroke", stroke2).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, stroke2, isDark, { mode: fillMode })).attr("fill-opacity", FILL_OPACITY).attr("stroke", stroke2).attr("stroke-width", 2);
     tagDatum(dot, {
       line: p.lineNumber,
       key: p.name,
@@ -33743,7 +33980,7 @@ var init_scatter = __esm({
 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(
@@ -33845,7 +34082,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
@@ -33884,7 +34123,7 @@ var init_sankey = __esm({
 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]));
@@ -33944,7 +34183,7 @@ function renderChord(svg, chart, width, height, colors, palette, isDark, textCol
   names.forEach((nm, i) => {
     const [px, py] = pos(i);
     const stroke2 = colorOf2(i);
-    const dot = svg.append("circle").attr("cx", px).attr("cy", py).attr("r", 10).attr("fill", solid ? stroke2 : shapeFill(palette, stroke2, isDark)).attr("stroke", stroke2).attr("stroke-width", 2);
+    const dot = svg.append("circle").attr("cx", px).attr("cy", py).attr("r", 10).attr("fill", shapeFill(palette, stroke2, isDark, { mode: fillMode })).attr("stroke", stroke2).attr("stroke-width", 2);
     tagDatum(dot, { key: `node:${nm}`, name: nm, color: stroke2 });
     const c = Math.cos(angle(i));
     const lx = px + c * 16;
@@ -34489,7 +34728,7 @@ function renderEventLine(container, parsed, palette, isDark, onClickItem, export
       const event = slot.event;
       const solid2 = eventColor(event);
       const cardFill2 = shapeFill(palette, solid2, isDark, {
-        solid: parsed.options.solidFill
+        mode: parsed.options.fillMode
       });
       const titleColor2 = contrastText(
         cardFill2,
@@ -34859,11 +35098,11 @@ function renderEventLine(container, parsed, palette, isDark, onClickItem, export
       cardG.append("clipPath").attr("id", clipId).append("rect").attr("x", 0).attr("y", shelfTop).attr("width", CARD_W).attr("height", shelfH).attr("rx", SHELF_EDGE);
       cardG.append("rect").attr("x", 0).attr("y", shelfTop).attr("width", CARD_W).attr("height", shelfH).attr("clip-path", `url(#${clipId})`).attr(
         "fill",
-        parsed.options.solidFill ? p.color : mix(p.color, themeBaseBg(palette, isDark), SHELF_TINT)
+        parsed.options.fillMode ? p.color : mix(p.color, themeBaseBg(palette, isDark), SHELF_TINT)
       );
       const edgeY = titleNearTop ? shelfTop : shelfTop + shelfH - SHELF_EDGE;
       cardG.append("rect").attr("x", 0).attr("y", edgeY).attr("width", CARD_W).attr("height", SHELF_EDGE).attr("clip-path", `url(#${clipId})`).attr("fill", p.color).attr("fill-opacity", p.future ? 0.4 : 1);
-      const shelfText = parsed.options.solidFill ? contrastText(p.color, palette.textOnFillLight, palette.textOnFillDark) : p.color;
+      const shelfText = parsed.options.fillMode ? contrastText(p.color, palette.textOnFillLight, palette.textOnFillDark) : p.color;
       const titleMid = headBandTop + p.headerH / 2;
       const titleTop = titleMid - (p.titleLines.length - 1) * TITLE_LINE_H / 2;
       for (let ti = 0; ti < p.titleLines.length; ti++) {
@@ -34875,7 +35114,7 @@ function renderEventLine(container, parsed, palette, isDark, onClickItem, export
           (titleNearTop ? p.headerH : headBandTop - dateH) + DATE_SUBTITLE_FONT + 2
         ).attr(
           "fill",
-          parsed.options.solidFill ? mix(shelfText, p.color, 25) : mix(palette.text, palette.bg, 55)
+          parsed.options.fillMode ? mix(shelfText, p.color, 25) : mix(palette.text, palette.bg, 55)
         ).attr("font-family", FONT_FAMILY).attr("font-size", DATE_SUBTITLE_FONT).attr("font-weight", 600).text(dateStr);
       }
       if (p.lines.length > 0) {
@@ -35381,7 +35620,7 @@ function sideCenter(centers, side, view) {
     (best, c) => wantScreenRight ? c.x > best.x ? c : best : c.x < best.x ? c : best
   );
 }
-function renderFigureBody(fig, view, parts, partColor, emphKey, form, palette, defs) {
+function renderFigureBody(fig, view, parts, partColor, emphKey, form, palette, isDark, fillMode, defs) {
   const [vx, vy, vw, vh] = fig.viewBox.split(" ").map(Number);
   const muscleFill = mix(palette.bg, palette.border, 0.7);
   const seam = palette.bg;
@@ -35429,7 +35668,16 @@ function renderFigureBody(fig, view, parts, partColor, emphKey, form, palette, d
       );
       if (sidePaths.length) paths = sidePaths;
     }
-    if (form === "skin") {
+    if (fillMode === "solid") {
+      for (const d of paths) {
+        out += `<path${dataLine} d="${d}" fill="${color}" stroke="${color}" stroke-width="1.5"/>`;
+      }
+    } else if (fillMode === "outline") {
+      const baseBg = themeBaseBg(palette, isDark);
+      for (const d of paths) {
+        out += `<path${dataLine} d="${d}" fill="${baseBg}" stroke="${color}" stroke-width="2.5"/>`;
+      }
+    } else if (form === "skin") {
       for (const d of paths) {
         out += `<path${dataLine} d="${d}" fill="${color}" fill-opacity="0.5" stroke="${color}" stroke-width="1.5"/>`;
       }
@@ -35516,6 +35764,8 @@ function renderBody2(container, parsed, palette, _isDark, _onClickItem, exportDi
       emphKey,
       parsed.options.form,
       palette,
+      _isDark,
+      parsed.options.fillMode,
       defs
     )
   );
@@ -37049,11 +37299,9 @@ __export(renderer_exports4, {
   renderOrgForExport: () => renderOrgForExport
 });
 import * as d3Selection9 from "d3-selection";
-function nodeFill(palette, isDark, nodeColor2, solid) {
+function nodeFill(palette, isDark, nodeColor2, fillMode) {
   const color = nodeColor2 ?? palette.primary;
-  return shapeFill(palette, color, isDark, {
-    ...solid !== void 0 && { solid }
-  });
+  return shapeFill(palette, color, isDark, { mode: fillMode });
 }
 function nodeStroke(palette, nodeColor2) {
   return nodeColor2 ?? palette.primary;
@@ -37257,12 +37505,12 @@ function renderOrg(container, parsed, layout, palette, isDark, onClickItem, expo
         onClickItem(node.lineNumber);
       });
     }
-    const solid = parsed.options["solid-fill"] === "on";
+    const fillMode = fillModeFromOptions(parsed.options);
     const fill2 = nodeFill(
       palette,
       isDark,
       colorOff ? void 0 : node.color,
-      solid
+      fillMode
     );
     const stroke2 = nodeStroke(palette, colorOff ? void 0 : node.color);
     const labelColor = contrastText(
@@ -37291,7 +37539,7 @@ function renderOrg(container, parsed, layout, palette, isDark, onClickItem, expo
           fontSize: sMetaFontSize,
           lineHeight: sMetaLineHeight,
           separatorGap: sSeparatorGap,
-          separatorColor: solid ? labelColor : stroke2,
+          separatorColor: fillMode === "solid" ? labelColor : stroke2,
           textColor: labelColor
         }
       }
@@ -37303,7 +37551,7 @@ function renderOrg(container, parsed, layout, palette, isDark, onClickItem, expo
         barHeight: sCollapseBarHeight,
         inset: sCollapseBarInset,
         rx: sCardRadius,
-        fill: solid ? labelColor : nodeStroke(palette, colorOff ? void 0 : node.color),
+        fill: fillMode === "solid" ? labelColor : nodeStroke(palette, colorOff ? void 0 : node.color),
         clipId: `clip-${node.id}`,
         className: "org-collapse-bar"
       });
@@ -37456,6 +37704,7 @@ var init_renderer5 = __esm({
   "src/org/renderer.ts"() {
     "use strict";
     init_tag_groups();
+    init_parsing();
     init_fonts();
     init_export_container();
     init_scaling();
@@ -38232,11 +38481,9 @@ __export(renderer_exports5, {
 });
 import * as d3Selection10 from "d3-selection";
 import * as d3Shape2 from "d3-shape";
-function nodeFill2(palette, isDark, nodeColor2, solid) {
+function nodeFill2(palette, isDark, nodeColor2, fillMode) {
   const color = nodeColor2 ?? palette.primary;
-  return shapeFill(palette, color, isDark, {
-    ...solid !== void 0 && { solid }
-  });
+  return shapeFill(palette, color, isDark, { mode: fillMode });
 }
 function nodeStroke2(_palette, nodeColor2) {
   return nodeColor2 ?? _palette.primary;
@@ -38422,8 +38669,8 @@ function renderSitemap(container, parsed, layout, palette, isDark, onClickItem,
       const tagVal = node.tagMetadata[tagKey];
       if (tagVal) nodeG.attr(`data-tag-${tagKey}`, tagVal.toLowerCase());
     }
-    const solid = parsed.options["solid-fill"] === "on";
-    const fill2 = nodeFill2(palette, isDark, node.color, solid);
+    const fillMode = fillModeFromOptions(parsed.options);
+    const fill2 = nodeFill2(palette, isDark, node.color, fillMode);
     const stroke2 = nodeStroke2(palette, node.color);
     const labelColor = contrastText(
       fill2,
@@ -38444,7 +38691,7 @@ function renderSitemap(container, parsed, layout, palette, isDark, onClickItem,
     });
     const metaEntries = Object.entries(node.metadata);
     if (metaEntries.length > 0) {
-      nodeG.append("line").attr("x1", 0).attr("y1", sHeaderHeight).attr("x2", node.width).attr("y2", sHeaderHeight).attr("stroke", solid ? labelColor : stroke2).attr("stroke-opacity", 0.3);
+      nodeG.append("line").attr("x1", 0).attr("y1", sHeaderHeight).attr("x2", node.width).attr("y2", sHeaderHeight).attr("stroke", fillMode === "solid" ? labelColor : stroke2).attr("stroke-opacity", 0.3);
       const metaDisplayKeys = metaEntries.map(
         ([k]) => displayNames.get(k) ?? k
       );
@@ -38457,7 +38704,7 @@ function renderSitemap(container, parsed, layout, palette, isDark, onClickItem,
         const displayKey = metaDisplayKeys[i];
         const rowY = sHeaderHeight + sSeparatorGap + (i + 1) * sMetaLineHeight - 4;
         const tagColor = tagColors.get(`${key}:${value.toLowerCase()}`);
-        const valColor = solid ? labelColor : tagColor ?? labelColor;
+        const valColor = fillMode === "solid" ? labelColor : tagColor ?? labelColor;
         nodeG.append("text").attr("x", 10).attr("y", rowY).attr("fill", labelColor).attr("font-size", sMetaFontSize).text(`${displayKey}:`);
         nodeG.append("text").attr("x", valueX).attr("y", rowY).attr("fill", valColor).attr("font-size", sMetaFontSize).text(value);
       }
@@ -38465,7 +38712,7 @@ function renderSitemap(container, parsed, layout, palette, isDark, onClickItem,
     if (node.description && node.description.length > 0) {
       const metaCount = Object.keys(node.metadata).length;
       const sepY = metaCount > 0 ? sHeaderHeight + sSeparatorGap + metaCount * sMetaLineHeight : sHeaderHeight;
-      nodeG.append("line").attr("x1", 0).attr("y1", sepY).attr("x2", node.width).attr("y2", sepY).attr("stroke", solid ? labelColor : stroke2).attr("stroke-opacity", 0.3);
+      nodeG.append("line").attr("x1", 0).attr("y1", sepY).attr("x2", node.width).attr("y2", sepY).attr("stroke", fillMode === "solid" ? labelColor : stroke2).attr("stroke-opacity", 0.3);
       const descStartY = sHeaderHeight + sSeparatorGap + metaCount * sMetaLineHeight;
       for (let di = 0; di < node.description.length; di++) {
         const processed = preprocessDescriptionLine(node.description[di]);
@@ -38477,7 +38724,10 @@ function renderSitemap(container, parsed, layout, palette, isDark, onClickItem,
     if (!exportDims && node.hiddenCount && node.hiddenCount > 0) {
       const clipId = `clip-${node.id}`;
       nodeG.append("clipPath").attr("id", clipId).append("rect").attr("width", node.width).attr("height", node.height).attr("rx", CARD_RADIUS);
-      nodeG.append("rect").attr("y", node.height - sCollapseBarHeight).attr("width", node.width).attr("height", sCollapseBarHeight).attr("fill", solid ? labelColor : node.color ?? palette.primary).attr("opacity", 0.5).attr("clip-path", `url(#${clipId})`);
+      nodeG.append("rect").attr("y", node.height - sCollapseBarHeight).attr("width", node.width).attr("height", sCollapseBarHeight).attr(
+        "fill",
+        fillMode === "solid" ? labelColor : node.color ?? palette.primary
+      ).attr("opacity", 0.5).attr("clip-path", `url(#${clipId})`);
     }
   }
   if (exportDims && hasLegend) {
@@ -38611,6 +38861,7 @@ var init_renderer6 = __esm({
   "src/sitemap/renderer.ts"() {
     "use strict";
     init_tag_groups();
+    init_parsing();
     init_fonts();
     init_color_utils();
     init_inline_markdown();
@@ -38771,7 +39022,9 @@ function renderKanban(container, parsed, palette, isDark, options) {
   const collapsedLanes = options?.collapsedLanes;
   const collapsedColumns = options?.collapsedColumns ?? new Set(parsed.columns.filter((c) => c.collapsed).map((c) => c.id));
   const compactMeta = options?.compactMeta ?? false;
-  const solid = parsed.options["solid-fill"] === "on";
+  const fillMode = fillModeFromOptions(parsed.options);
+  const baseBg = themeBaseBg(palette, isDark);
+  const wellStroke = mix(palette.border, baseBg, 20);
   const requestedSwimlane = options?.currentSwimlaneGroup ?? null;
   const swimlaneGroup = requestedSwimlane ? parsed.tagGroups.find(
     (g) => g.name.toLowerCase() === requestedSwimlane.toLowerCase()
@@ -38934,20 +39187,26 @@ function renderKanban(container, parsed, palette, isDark, options) {
     const isColCollapsed = collapsedColumns?.has(col.id) ?? false;
     const g = svg.append("g").attr("class", "kanban-column").attr("data-column-id", col.id).attr("data-line-number", col.lineNumber);
     const thisColBg = defaultColBg;
-    const thisColHeaderBg = col.color ? shapeFill(palette, col.color, isDark, { solid }) : defaultColHeaderBg;
+    const thisColHeaderBg = col.color ? shapeFill(palette, col.color, isDark, { mode: fillMode }) : defaultColHeaderBg;
     const onHeaderText = col.color ? contrastText(
       thisColHeaderBg,
       palette.textOnFillLight,
       palette.textOnFillDark
     ) : palette.text;
     if (isColCollapsed) {
-      g.append("rect").attr("x", colLayout.x).attr("y", colLayout.y).attr("width", sCollapsedColumnWidth).attr("height", colLayout.height).attr("rx", sColumnRadius).attr("fill", thisColBg);
+      g.append("rect").attr("x", colLayout.x).attr("y", colLayout.y).attr("width", sCollapsedColumnWidth).attr("height", colLayout.height).attr("rx", sColumnRadius).attr("fill", fillMode === "outline" ? baseBg : thisColBg).call((sel) => {
+        if (fillMode === "outline")
+          sel.attr("stroke", wellStroke).attr("stroke-width", 1);
+      });
       g.append("rect").attr("x", colLayout.x).attr("y", colLayout.y).attr("width", sCollapsedColumnWidth).attr("height", sColumnHeaderHeight).attr("rx", sColumnHeaderRadius).attr("fill", thisColHeaderBg);
       g.append("text").attr("x", colLayout.x + sCollapsedColumnWidth / 2).attr("y", colLayout.y + sColumnHeaderHeight / 2 + sWipFontSize / 2 - 1).attr("font-size", sWipFontSize).attr("font-weight", "bold").attr("fill", col.color ? onHeaderText : palette.textMuted).attr("text-anchor", "middle").text(String(col.cards.length));
       g.append("text").attr("x", colLayout.x + sCollapsedColumnWidth / 2).attr("y", colLayout.y + sColumnHeaderHeight + sColumnPadding).attr("font-size", sCardTitleFontSize).attr("font-weight", "bold").attr("fill", palette.text).attr("text-anchor", "middle").attr("writing-mode", "tb").text(col.name);
       continue;
     }
-    g.append("rect").attr("x", colLayout.x).attr("y", colLayout.y).attr("width", colLayout.width).attr("height", colLayout.height).attr("rx", sColumnRadius).attr("fill", thisColBg);
+    g.append("rect").attr("x", colLayout.x).attr("y", colLayout.y).attr("width", colLayout.width).attr("height", colLayout.height).attr("rx", sColumnRadius).attr("fill", fillMode === "outline" ? baseBg : thisColBg).call((sel) => {
+      if (fillMode === "outline")
+        sel.attr("stroke", wellStroke).attr("stroke-width", 1);
+    });
     g.append("rect").attr("x", colLayout.x).attr("y", colLayout.y).attr("width", colLayout.width).attr("height", sColumnHeaderHeight).attr("rx", sColumnHeaderRadius).attr("fill", thisColHeaderBg);
     g.append("text").attr("x", colLayout.x + sColumnPadding).attr(
       "y",
@@ -38978,7 +39237,7 @@ function renderKanban(container, parsed, palette, isDark, options) {
         palette,
         resolvedColor ?? palette.primary,
         isDark,
-        { solid }
+        { mode: fillMode }
       );
       const cardStroke = resolvedColor ?? palette.textMuted;
       const onCardText = contrastText(
@@ -39005,7 +39264,7 @@ function renderKanban(container, parsed, palette, isDark, options) {
       renderInlineText(titleEl, card.title, palette, sCardTitleFontSize);
       if (hasMeta) {
         const separatorY = cy + sCardHeaderHeight;
-        cg.append("line").attr("x1", cx).attr("y1", separatorY).attr("x2", cx + cardLayout.width).attr("y2", separatorY).attr("stroke", solid ? onCardText : cardStroke).attr("stroke-opacity", 0.3).attr("stroke-width", 1);
+        cg.append("line").attr("x1", cx).attr("y1", separatorY).attr("x2", cx + cardLayout.width).attr("y2", separatorY).attr("stroke", fillMode === "solid" ? onCardText : cardStroke).attr("stroke-opacity", 0.3).attr("stroke-width", 1);
         let metaY = separatorY + sCardSeparatorGap + sCardMetaFontSize;
         for (const meta of tagMeta) {
           cg.append("text").attr("x", cx + sCardPaddingX).attr("y", metaY).attr("font-size", sCardMetaFontSize).attr("fill", onCardText).text(`${meta.label}: `);
@@ -39224,7 +39483,7 @@ function renderSwimlaneBoard(svg, parsed, baseLayout, swimlaneGroup, palette, is
     const isColCollapsed = collapsedColumns?.has(col.id) ?? false;
     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 ? shapeFill(palette, col.color, isDark, {
-      solid: parsed.options["solid-fill"] === "on"
+      mode: fillModeFromOptions(parsed.options)
     }) : defaultColHeaderBg;
     headerG.append("rect").attr("x", colInfo.x).attr("y", grid.startY).attr("width", colInfo.width).attr("height", sColumnHeaderHeight).attr("rx", sColumnHeaderRadius).attr("fill", colHeaderBg);
     if (isColCollapsed) {
@@ -39300,7 +39559,7 @@ function renderSwimlaneBoard(svg, parsed, baseLayout, swimlaneGroup, palette, is
             palette,
             isDark,
             hiddenMetaGroups,
-            parsed.options["solid-fill"] === "on",
+            fillModeFromOptions(parsed.options),
             sCardRadius,
             sCardPaddingX,
             sCardPaddingY,
@@ -39316,7 +39575,7 @@ function renderSwimlaneBoard(svg, parsed, baseLayout, swimlaneGroup, palette, is
     }
   }
 }
-function renderSwimlaneCard(parent, cardLayout, tagGroups, activeTagGroup, palette, isDark, hiddenMetaGroups, solid, sCardRadius = CARD_RADIUS, sCardPaddingX = CARD_PADDING_X, sCardPaddingY = CARD_PADDING_Y, sCardStrokeWidth = CARD_STROKE_WIDTH, sCardTitleFontSize = CARD_TITLE_FONT_SIZE, sCardMetaFontSize = CARD_META_FONT_SIZE, sCardHeaderHeight = CARD_HEADER_HEIGHT, sCardSeparatorGap = CARD_SEPARATOR_GAP, sCardMetaLineHeight = CARD_META_LINE_HEIGHT) {
+function renderSwimlaneCard(parent, cardLayout, tagGroups, activeTagGroup, palette, isDark, hiddenMetaGroups, fillMode, sCardRadius = CARD_RADIUS, sCardPaddingX = CARD_PADDING_X, sCardPaddingY = CARD_PADDING_Y, sCardStrokeWidth = CARD_STROKE_WIDTH, sCardTitleFontSize = CARD_TITLE_FONT_SIZE, sCardMetaFontSize = CARD_META_FONT_SIZE, sCardHeaderHeight = CARD_HEADER_HEIGHT, sCardSeparatorGap = CARD_SEPARATOR_GAP, sCardMetaLineHeight = CARD_META_LINE_HEIGHT) {
   const card = cardLayout.card;
   const resolvedColor = resolveCardTagColor(card, tagGroups, activeTagGroup);
   const tagMeta = resolveCardTagMeta(card, tagGroups, hiddenMetaGroups);
@@ -39325,9 +39584,7 @@ function renderSwimlaneCard(parent, cardLayout, tagGroups, activeTagGroup, palet
     palette,
     resolvedColor ?? palette.primary,
     isDark,
-    {
-      ...solid !== void 0 && { solid }
-    }
+    { mode: fillMode }
   );
   const cardStroke = resolvedColor ?? palette.textMuted;
   const onCardText = contrastText(
@@ -39371,6 +39628,7 @@ var init_renderer7 = __esm({
   "src/kanban/renderer.ts"() {
     "use strict";
     init_tag_groups();
+    init_parsing();
     init_fonts();
     init_color_utils();
     init_inline_markdown();
@@ -39629,11 +39887,9 @@ function modifierColor(modifier, palette, colorOff) {
       return palette.colors.teal;
   }
 }
-function nodeFill3(palette, isDark, modifier, nodeColor2, colorOff, solid) {
+function nodeFill3(palette, isDark, modifier, nodeColor2, colorOff, fillMode) {
   const color = nodeColor2 ?? modifierColor(modifier, palette, colorOff);
-  return shapeFill(palette, color, isDark, {
-    ...solid !== void 0 && { solid }
-  });
+  return shapeFill(palette, color, isDark, { mode: fillMode });
 }
 function nodeStroke3(palette, modifier, nodeColor2, colorOff) {
   return nodeColor2 ?? modifierColor(modifier, palette, colorOff);
@@ -39811,14 +40067,14 @@ function renderClassDiagram(container, parsed, layout, palette, isDark, onClickI
     const colorOff = !!parsed.options?.["no-auto-color"];
     const neutralize = hasLegend && !isLegendExpanded && !node.color;
     const effectiveColor = neutralize ? palette.primary : node.color;
-    const solid = parsed.options?.["solid-fill"] === "on";
+    const fillMode = fillModeFromOptions(parsed.options ?? {});
     const fill2 = nodeFill3(
       palette,
       isDark,
       node.modifier,
       effectiveColor,
       colorOff,
-      solid
+      fillMode
     );
     const stroke2 = nodeStroke3(palette, node.modifier, effectiveColor, colorOff);
     const onFillText = contrastText(
@@ -39841,14 +40097,14 @@ function renderClassDiagram(container, parsed, layout, palette, isDark, onClickI
     const fields = node.members.filter((m) => !m.isMethod);
     const methods = node.members.filter((m) => m.isMethod);
     if (isEnum) {
-      nodeG.append("line").attr("x1", -w / 2).attr("y1", yPos).attr("x2", w / 2).attr("y2", yPos).attr("stroke", solid ? onFillText : stroke2).attr("stroke-width", 0.5).attr("stroke-opacity", 0.5);
+      nodeG.append("line").attr("x1", -w / 2).attr("y1", yPos).attr("x2", w / 2).attr("y2", yPos).attr("stroke", fillMode === "solid" ? onFillText : stroke2).attr("stroke-width", 0.5).attr("stroke-opacity", 0.5);
       let memberY = yPos + sCompartmentPaddingY;
       for (const member of node.members) {
         nodeG.append("text").attr("x", -w / 2 + sMemberPaddingX).attr("y", memberY + sMemberLineHeight / 2).attr("dominant-baseline", "central").attr("fill", onFillText).attr("font-size", sMemberFontSize).text(member.name);
         memberY += sMemberLineHeight;
       }
     } else {
-      nodeG.append("line").attr("x1", -w / 2).attr("y1", yPos).attr("x2", w / 2).attr("y2", yPos).attr("stroke", solid ? onFillText : stroke2).attr("stroke-width", 0.5).attr("stroke-opacity", 0.5);
+      nodeG.append("line").attr("x1", -w / 2).attr("y1", yPos).attr("x2", w / 2).attr("y2", yPos).attr("stroke", fillMode === "solid" ? onFillText : stroke2).attr("stroke-width", 0.5).attr("stroke-opacity", 0.5);
       if (fields.length > 0) {
         let memberY = yPos + sCompartmentPaddingY;
         for (const field of fields) {
@@ -39864,7 +40120,7 @@ function renderClassDiagram(container, parsed, layout, palette, isDark, onClickI
         }
       }
       yPos += node.fieldsHeight;
-      nodeG.append("line").attr("x1", -w / 2).attr("y1", yPos).attr("x2", w / 2).attr("y2", yPos).attr("stroke", solid ? onFillText : stroke2).attr("stroke-width", 0.5).attr("stroke-opacity", 0.5);
+      nodeG.append("line").attr("x1", -w / 2).attr("y1", yPos).attr("x2", w / 2).attr("y2", yPos).attr("stroke", fillMode === "solid" ? onFillText : stroke2).attr("stroke-width", 0.5).attr("stroke-opacity", 0.5);
       if (methods.length > 0) {
         let memberY = yPos + sCompartmentPaddingY;
         for (const method of methods) {
@@ -39958,6 +40214,7 @@ var DIAGRAM_PADDING4, MAX_SCALE3, CLASS_FONT_SIZE2, MEMBER_FONT_SIZE2, EDGE_LABE
 var init_renderer8 = __esm({
   "src/class/renderer.ts"() {
     "use strict";
+    init_parsing();
     init_fonts();
     init_export_container();
     init_legend_constants();
@@ -40652,7 +40909,7 @@ function renderERDiagram(container, parsed, layout, palette, isDark, onClickItem
     const w = node.width;
     const h = node.height;
     const fill2 = shapeFill(palette, nodeColor2, isDark, {
-      solid: parsed.options["solid-fill"] === "on"
+      mode: fillModeFromOptions(parsed.options)
     });
     const stroke2 = nodeColor2;
     const onFillText = contrastText(
@@ -40814,6 +41071,7 @@ var init_renderer9 = __esm({
   "src/er/renderer.ts"() {
     "use strict";
     init_tag_groups();
+    init_parsing();
     init_fonts();
     init_color_utils();
     init_palettes();
@@ -41558,7 +41816,7 @@ function renderSketch(container, parsed, layout, palette, isDark, options = {})
     hideDescriptions = false
   } = options;
   const hideDesc = hideDescriptions || parsed.options.noDescriptions;
-  const neutralFill = mix(palette.textMuted, palette.bg, 12);
+  const neutralFill = parsed.options.fillMode === "outline" ? themeBaseBg(palette, isDark) : mix(palette.textMuted, palette.bg, 12);
   const tagGroups = [...parsed.tagGroups];
   const activeName = resolveActiveTagGroup(
     tagGroups,
@@ -41577,14 +41835,14 @@ function renderSketch(container, parsed, layout, palette, isDark, options = {})
       };
     }
     const fill2 = shapeFill(palette, tagColor, isDark, {
-      solid: parsed.options.solidFill
+      mode: parsed.options.fillMode
     });
     return {
       fill: fill2,
       stroke: tagColor,
       // Label text takes the shape's own (tag) color — but for solid fills the
       // tag color would vanish into the fill, so keep a contrast color there.
-      text: parsed.options.solidFill ? contrastText(fill2, palette.textOnFillLight, palette.textOnFillDark) : tagColor
+      text: parsed.options.fillMode === "solid" ? contrastText(fill2, palette.textOnFillLight, palette.textOnFillDark) : tagColor
     };
   };
   const showTitle = !!parsed.title;
@@ -41833,8 +42091,8 @@ function drawNode(layer, node, colors, palette, isDark, tagGroups) {
     const rows = node.isCollapsedBox ? [] : metaRows(node.metadata, tagGroups);
     const badge = node.shape !== "rectangle";
     const labelInset = badge ? 22 : 0;
-    const solid = colors.stroke === colors.fill;
-    const ruleColor = solid ? colors.text : colors.stroke;
+    const solidLike = colors.stroke === colors.fill;
+    const ruleColor = solidLike ? colors.text : colors.stroke;
     if (node.description && !node.isCollapsedBox) {
       const fitH = fitWrapped(
         node.label,
@@ -41903,7 +42161,7 @@ function drawNode(layer, node, colors, palette, isDark, tagGroups) {
           lineHeight: CARD_META_FONT + 5,
           separatorGap: 8,
           separatorColor: ruleColor,
-          textColor: solid ? colors.text : palette.text,
+          textColor: solidLike ? colors.text : palette.text,
           keyX: 12
         }
       } : {}
@@ -42412,7 +42670,7 @@ function fitLabelToHeader(label, nodeWidth, maxLines) {
   const truncated = truncateText(label, MIN_NODE_FONT_SIZE, maxTextWidth);
   return { lines: [truncated], fontSize: MIN_NODE_FONT_SIZE };
 }
-function nodeColors(node, tagGroups, activeGroupName, palette, isDark, value, solid) {
+function nodeColors(node, tagGroups, activeGroupName, palette, isDark, value, fillMode) {
   const neutralFill = mix(palette.bg, palette.text, isDark ? 90 : 95);
   if (value.active) {
     if (node.value === void 0) {
@@ -42424,9 +42682,7 @@ function nodeColors(node, tagGroups, activeGroupName, palette, isDark, value, so
       return { fill: neutralFill, stroke: value.hue, text: text3 };
     }
     const rampColor2 = value.fillForValue(node.value);
-    const fill3 = shapeFill(palette, rampColor2, isDark, {
-      ...solid !== void 0 && { solid }
-    });
+    const fill3 = shapeFill(palette, rampColor2, isDark, { mode: fillMode });
     const stroke3 = value.twoColor ? rampColor2 : value.hue;
     const text2 = contrastText(
       fill3,
@@ -42441,9 +42697,7 @@ function nodeColors(node, tagGroups, activeGroupName, palette, isDark, value, so
     activeGroupName
   );
   if (tagColor) {
-    const fill3 = shapeFill(palette, tagColor, isDark, {
-      ...solid !== void 0 && { solid }
-    });
+    const fill3 = shapeFill(palette, tagColor, isDark, { mode: fillMode });
     const stroke3 = tagColor;
     const text2 = contrastText(
       fill3,
@@ -42755,7 +43009,7 @@ function renderBoxesAndLines(container, parsed, layout, palette, isDark, options
       }
       if (isHidden) continue;
     }
-    const solid = parsed.options["solid-fill"] === "on";
+    const fillMode = fillModeFromOptions(parsed.options);
     const colors = nodeColors(
       node,
       parsed.tagGroups,
@@ -42768,9 +43022,9 @@ function renderBoxesAndLines(container, parsed, layout, palette, isDark, options
         twoColor: rampLow !== void 0,
         fillForValue
       },
-      solid
+      fillMode
     );
-    const dividerStroke = solid ? colors.text : colors.stroke;
+    const dividerStroke = fillMode === "solid" ? colors.text : colors.stroke;
     const nodeG = diagramG.append("g").attr("class", "bl-node").attr("transform", `translate(${ln.x},${ln.y})`).attr("data-line-number", node.lineNumber).attr("data-node-id", node.label).style("cursor", onClickItem ? "pointer" : "default").style("--bl-node-stroke", colors.stroke);
     for (const [key, val] of Object.entries(node.metadata)) {
       nodeG.attr(`data-tag-${key.toLowerCase()}`, val.toLowerCase());
@@ -43032,6 +43286,7 @@ var DIAGRAM_PADDING7, NODE_FONT_SIZE, MIN_NODE_FONT_SIZE, EDGE_LABEL_FONT_SIZE6,
 var init_renderer11 = __esm({
   "src/boxes-and-lines/renderer.ts"() {
     "use strict";
+    init_parsing();
     init_note_box();
     init_fonts();
     init_legend_integration();
@@ -46252,7 +46507,7 @@ function renderSwimlaneForExport(container, parsed, layout, palette, isDark, opt
     laneColorById.set(lane.id, hex);
   });
   const isLR = parsed.direction === "LR";
-  const solid = parsed.options["solid-fill"] === "on";
+  const fillMode = fillModeFromOptions(parsed.options);
   const laneFill = (hex) => mix(hex, baseBg, 9);
   const haloAt = (cross) => {
     for (const band of layout.lanes) {
@@ -46301,28 +46556,35 @@ function renderSwimlaneForExport(container, parsed, layout, palette, isDark, opt
     phaseG.append("text").attr("x", isLR ? band.x + band.width / 2 : band.headerSize / 2).attr("y", isLR ? band.headerSize / 2 : band.y + band.height / 2).attr("text-anchor", "middle").attr("dominant-baseline", "middle").attr("font-size", PHASE_LABEL_FONT).attr("font-weight", "700").attr("letter-spacing", "0.06em").attr("fill", palette.textMuted).attr("data-line-number", String(band.lineNumber)).text(band.label);
   });
   const activeTag = opts.activeTagGroup ?? null;
+  const outline = fillMode === "outline";
   const nodeFill7 = (n) => {
     if (activeTag) {
       const key = tagAttrKey(activeTag);
       if (n.tags[key]) {
         const c = resolveTagColor(n.tags, [...parsed.tagGroups], activeTag);
         if (c && c !== "#999999")
-          return { fill: solid ? c : mix(c, baseBg, 22), stroke: c };
+          return {
+            fill: fillMode === "solid" ? c : outline ? baseBg : mix(c, baseBg, 22),
+            stroke: c
+          };
       }
     }
     if (n.shape === "terminal") {
       if (n.event === "error")
         return {
-          fill: solid ? ev.error : mix(ev.error, baseBg, 22),
+          fill: fillMode === "solid" ? ev.error : outline ? baseBg : mix(ev.error, baseBg, 22),
           stroke: ev.error
         };
       if (n.event === "success")
         return {
-          fill: solid ? ev.success : mix(ev.success, baseBg, 22),
+          fill: fillMode === "solid" ? ev.success : outline ? baseBg : mix(ev.success, baseBg, 22),
           stroke: ev.success
         };
       if (n.event === "terminate")
-        return { fill: mix(palette.text, baseBg, 30), stroke: palette.text };
+        return {
+          fill: outline ? baseBg : mix(palette.text, baseBg, 30),
+          stroke: palette.text
+        };
       return { fill: palette.bg, stroke: palette.textMuted };
     }
     if (n.shape === "exclusive" || n.shape === "parallel") {
@@ -46333,8 +46595,8 @@ function renderSwimlaneForExport(container, parsed, layout, palette, isDark, opt
     }
     const hex = laneColorById.get(n.lane) ?? palette.border;
     return {
-      fill: solid ? hex : mix(hex, baseBg, 20),
-      stroke: mix(hex, palette.text, 40)
+      fill: fillMode === "solid" ? hex : outline ? baseBg : mix(hex, baseBg, 20),
+      stroke: outline ? hex : mix(hex, palette.text, 40)
     };
   };
   const nodeById = new Map(layout.nodes.map((n) => [n.id, n]));
@@ -46519,6 +46781,7 @@ var NODE_FONT_SIZE2, LANE_LABEL_FONT, PHASE_LABEL_FONT, EDGE_LABEL_FONT, NODE_RX
 var init_renderer12 = __esm({
   "src/swimlane/renderer.ts"() {
     "use strict";
+    init_parsing();
     init_fonts();
     init_arrow_markers();
     init_title_constants();
@@ -47092,7 +47355,7 @@ function baseColor(node, parsed, palette, activeTagGroup) {
 function renderFamilyForExport(container, parsed, layout, palette, isDark, opts = {}) {
   d3Selection16.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const activeTagGroup = opts.activeTagGroup ?? null;
-  const solid = parsed.options["solid-fill"] === "on";
+  const fillMode = fillModeFromOptions(parsed.options);
   const noDaggers = parsed.options["no-daggers"] === "true";
   const baseBg = themeBaseBg(palette, isDark);
   const PAD3 = 20;
@@ -47206,7 +47469,7 @@ function renderFamilyForExport(container, parsed, layout, palette, isDark, opts
   for (const node of layout.nodes) {
     const isPh = !!node.placeholder;
     const base = baseColor(node, parsed, palette, activeTagGroup);
-    const fill2 = isPh ? mix(palette.textMuted, baseBg, 6) : shapeFill(palette, base, isDark, { solid });
+    const fill2 = isPh ? mix(palette.textMuted, baseBg, 6) : shapeFill(palette, base, isDark, { mode: fillMode });
     const stroke2 = isPh ? palette.textMuted : base;
     const labelColor = isPh ? palette.textMuted : contrastText(fill2, palette.textOnFillLight, palette.textOnFillDark);
     const g = cardsG.append("g").attr("class", "family-card").attr("transform", `translate(${node.x}, ${node.y})`).attr("data-line-number", String(node.lineNumber)).attr("data-person-id", node.id);
@@ -47227,7 +47490,7 @@ function renderFamilyForExport(container, parsed, layout, palette, isDark, opts
     focusG.append("circle").attr("cx", fx).attr("cy", fy).attr("r", 1.6).attr("fill", labelColor);
     const rows = familyCardRows(node);
     if (rows.length === 0) continue;
-    g.append("line").attr("x1", 0).attr("y1", HEADER_HEIGHT).attr("x2", node.width).attr("y2", HEADER_HEIGHT).attr("stroke", solid ? labelColor : stroke2).attr("stroke-opacity", 0.3).attr("stroke-width", 1);
+    g.append("line").attr("x1", 0).attr("y1", HEADER_HEIGHT).attr("x2", node.width).attr("y2", HEADER_HEIGHT).attr("stroke", fillMode === "solid" ? labelColor : stroke2).attr("stroke-opacity", 0.3).attr("stroke-width", 1);
     const maxKeyWidth = Math.max(
       0,
       ...rows.filter((r) => !r.year).map((r) => measureText(`${r.key}: `, META_FONT_SIZE))
@@ -47273,6 +47536,7 @@ var KEY_X2, KEY_VALUE_GAP2, BAR_DOT_R, TITLE_RESERVE, DIM_OPACITY, ROMAN;
 var init_renderer13 = __esm({
   "src/family/renderer.ts"() {
     "use strict";
+    init_parsing();
     init_fonts();
     init_title_constants();
     init_color_utils();
@@ -47900,11 +48164,9 @@ __export(renderer_exports13, {
   renderMindmapForExport: () => renderMindmapForExport
 });
 import * as d3Selection17 from "d3-selection";
-function nodeFill4(palette, isDark, nodeColor2, solid) {
+function nodeFill4(palette, isDark, nodeColor2, fillMode) {
   const color = nodeColor2 ?? palette.primary;
-  return shapeFill(palette, color, isDark, {
-    ...solid !== void 0 && { solid }
-  });
+  return shapeFill(palette, color, isDark, { mode: fillMode });
 }
 function nodeStroke4(palette, nodeColor2) {
   return nodeColor2 ?? palette.primary;
@@ -48092,7 +48354,7 @@ function renderMindmap(container, parsed, layout, palette, isDark, onClickItem,
       palette,
       isDark,
       effectiveColor,
-      parsed.options["solid-fill"] === "on"
+      fillModeFromOptions(parsed.options)
     );
     const stroke2 = nodeStroke4(palette, effectiveColor);
     const onFillText = contrastText(
@@ -48222,6 +48484,7 @@ var init_renderer14 = __esm({
   "src/mindmap/renderer.ts"() {
     "use strict";
     init_tag_groups();
+    init_parsing();
     init_fonts();
     init_export_container();
     init_color_utils();
@@ -48601,7 +48864,7 @@ function renderWireframe(container, parsed, layout, palette, isDark, _onClickIte
     isTransparent: effectiveTheme === "transparent",
     isDark,
     showGroupLabels: opts.showGroupLabels ?? true,
-    solid: parsed.options["solid-fill"] === "on"
+    fillMode: fillModeFromOptions(parsed.options)
   };
   if (!ctx.isTransparent) {
     svg.append("rect").attr("width", layout.width).attr("height", layout.height).attr("fill", palette.bg).attr("rx", 8);
@@ -48985,7 +49248,7 @@ function renderAlert(g, node, ctx) {
   const { palette, isDark, isTransparent } = ctx;
   const el = node.element;
   const color = getElementSemanticColor(el, palette) || palette.accent;
-  const fill2 = isTransparent ? null : shapeFill(palette, color, isDark, { solid: ctx.solid });
+  const fill2 = isTransparent ? null : shapeFill(palette, color, isDark, { mode: ctx.fillMode });
   if (fill2) {
     g.append("rect").attr("width", node.width).attr("height", node.height).attr("fill", fill2).attr("rx", 4);
   }
@@ -49093,6 +49356,7 @@ var INPUT_CORNER, BUTTON_CORNER, GROUP_CORNER, SEMANTIC_COLORS;
 var init_renderer15 = __esm({
   "src/wireframe/renderer.ts"() {
     "use strict";
+    init_parsing();
     init_fonts();
     init_color_utils();
     init_title_constants();
@@ -50811,11 +51075,9 @@ function typeColor(type, palette, nodeColor2) {
       return palette.colors.teal;
   }
 }
-function nodeFill5(palette, isDark, type, nodeColor2, solid) {
+function nodeFill5(palette, isDark, type, nodeColor2, fillMode) {
   const color = typeColor(type, palette, nodeColor2);
-  return shapeFill(palette, color, isDark, {
-    ...solid !== void 0 && { solid }
-  });
+  return shapeFill(palette, color, isDark, { mode: fillMode });
 }
 function nodeStroke5(palette, type, nodeColor2) {
   return typeColor(type, palette, nodeColor2);
@@ -50952,8 +51214,8 @@ function renderC4Context(container, parsed, layout, palette, isDark, onClickItem
     }
     const w = node.width;
     const h = node.height;
-    const solid = parsed.options["solid-fill"] === "on";
-    const fill2 = nodeFill5(palette, isDark, node.type, node.color, solid);
+    const fillMode = fillModeFromOptions(parsed.options);
+    const fill2 = nodeFill5(palette, isDark, node.type, node.color, fillMode);
     const stroke2 = nodeStroke5(palette, node.type, node.color);
     const onFillText = contrastText(
       fill2,
@@ -50982,7 +51244,7 @@ function renderC4Context(container, parsed, layout, palette, isDark, onClickItem
       nodeG.append("text").attr("x", 0).attr("y", yPos + NAME_FONT_SIZE2 / 2).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("fill", onFillText).attr("font-size", NAME_FONT_SIZE2).attr("font-weight", "bold").text(node.name);
     }
     yPos += NAME_HEIGHT2;
-    nodeG.append("line").attr("x1", -w / 2 + CARD_H_PAD5 / 2).attr("y1", yPos).attr("x2", w / 2 - CARD_H_PAD5 / 2).attr("y2", yPos).attr("stroke", solid ? onFillText : stroke2).attr("stroke-width", 0.5).attr("stroke-opacity", 0.4);
+    nodeG.append("line").attr("x1", -w / 2 + CARD_H_PAD5 / 2).attr("y1", yPos).attr("x2", w / 2 - CARD_H_PAD5 / 2).attr("y2", yPos).attr("stroke", fillMode === "solid" ? onFillText : stroke2).attr("stroke-width", 0.5).attr("stroke-opacity", 0.4);
     yPos += DIVIDER_GAP2;
     if (node.description) {
       const contentWidth = w - CARD_H_PAD5 * 2;
@@ -51005,7 +51267,7 @@ function renderC4Context(container, parsed, layout, palette, isDark, onClickItem
     if (node.drillable) {
       const clipId = `clip-drill-${node.id.replace(/\s+/g, "-")}`;
       nodeG.append("clipPath").attr("id", clipId).append("rect").attr("x", -w / 2).attr("y", -h / 2).attr("width", w).attr("height", h).attr("rx", CARD_RADIUS);
-      nodeG.append("rect").attr("x", -w / 2).attr("y", h / 2 - DRILL_BAR_HEIGHT).attr("width", w).attr("height", DRILL_BAR_HEIGHT).attr("fill", solid ? onFillText : stroke2).attr("clip-path", `url(#${clipId})`).attr("class", "c4-drill-bar");
+      nodeG.append("rect").attr("x", -w / 2).attr("y", h / 2 - DRILL_BAR_HEIGHT).attr("width", w).attr("height", DRILL_BAR_HEIGHT).attr("fill", fillMode === "solid" ? onFillText : stroke2).attr("clip-path", `url(#${clipId})`).attr("class", "c4-drill-bar");
     }
   }
   if (hasLegend) {
@@ -51514,8 +51776,8 @@ function renderC4Containers(container, parsed, layout, palette, isDark, onClickI
     }
     const w = node.width;
     const h = node.height;
-    const solid = parsed.options["solid-fill"] === "on";
-    const fill2 = nodeFill5(palette, isDark, node.type, node.color, solid);
+    const fillMode = fillModeFromOptions(parsed.options);
+    const fill2 = nodeFill5(palette, isDark, node.type, node.color, fillMode);
     const stroke2 = nodeStroke5(palette, node.type, node.color);
     const onFillText = contrastText(
       fill2,
@@ -51583,7 +51845,7 @@ function renderC4Containers(container, parsed, layout, palette, isDark, onClickI
       }
       const metaEntries = collectCardMetadata(node.metadata);
       if (metaEntries.length > 0) {
-        nodeG.append("line").attr("x1", -w / 2 + CARD_H_PAD5 / 2).attr("y1", yPos).attr("x2", w / 2 - CARD_H_PAD5 / 2).attr("y2", yPos).attr("stroke", solid ? onFillText : stroke2).attr("stroke-width", 0.5).attr("stroke-opacity", 0.4);
+        nodeG.append("line").attr("x1", -w / 2 + CARD_H_PAD5 / 2).attr("y1", yPos).attr("x2", w / 2 - CARD_H_PAD5 / 2).attr("y2", yPos).attr("stroke", fillMode === "solid" ? onFillText : stroke2).attr("stroke-width", 0.5).attr("stroke-opacity", 0.4);
         yPos += DIVIDER_GAP2;
         const maxKeyWidth = Math.max(
           ...metaEntries.map((e) => measureText(`${e.key}: `, META_FONT_SIZE))
@@ -51596,7 +51858,7 @@ function renderC4Containers(container, parsed, layout, palette, isDark, onClickI
         }
       }
     } else {
-      nodeG.append("line").attr("x1", -w / 2 + CARD_H_PAD5 / 2).attr("y1", yPos).attr("x2", w / 2 - CARD_H_PAD5 / 2).attr("y2", yPos).attr("stroke", solid ? onFillText : stroke2).attr("stroke-width", 0.5).attr("stroke-opacity", 0.4);
+      nodeG.append("line").attr("x1", -w / 2 + CARD_H_PAD5 / 2).attr("y1", yPos).attr("x2", w / 2 - CARD_H_PAD5 / 2).attr("y2", yPos).attr("stroke", fillMode === "solid" ? onFillText : stroke2).attr("stroke-width", 0.5).attr("stroke-opacity", 0.4);
       yPos += DIVIDER_GAP2;
       if (node.description) {
         const contentWidth = w - CARD_H_PAD5 * 2;
@@ -51620,7 +51882,7 @@ function renderC4Containers(container, parsed, layout, palette, isDark, onClickI
     if (node.drillable) {
       const clipId = `clip-drill-${node.id.replace(/\s+/g, "-")}`;
       nodeG.append("clipPath").attr("id", clipId).append("rect").attr("x", -w / 2).attr("y", -h / 2).attr("width", w).attr("height", h).attr("rx", CARD_RADIUS);
-      nodeG.append("rect").attr("x", -w / 2).attr("y", h / 2 - DRILL_BAR_HEIGHT).attr("width", w).attr("height", DRILL_BAR_HEIGHT).attr("fill", solid ? onFillText : stroke2).attr("clip-path", `url(#${clipId})`).attr("class", "c4-drill-bar");
+      nodeG.append("rect").attr("x", -w / 2).attr("y", h / 2 - DRILL_BAR_HEIGHT).attr("width", w).attr("height", DRILL_BAR_HEIGHT).attr("fill", fillMode === "solid" ? onFillText : stroke2).attr("clip-path", `url(#${clipId})`).attr("class", "c4-drill-bar");
     }
   }
   if (hasLegend) {
@@ -51753,6 +52015,7 @@ var init_renderer16 = __esm({
   "src/c4/renderer.ts"() {
     "use strict";
     init_tag_groups();
+    init_parsing();
     init_fonts();
     init_color_utils();
     init_inline_markdown();
@@ -52170,28 +52433,34 @@ function shapeDefaultColor(shape, palette, isEndTerminal, colorOff) {
       return palette.colors.blue;
   }
 }
-function nodeFill6(palette, isDark, shape, nodeColor2, isEndTerminal, colorOff, solid) {
+function nodeFill6(palette, isDark, shape, nodeColor2, isEndTerminal, colorOff, fillMode) {
   const color = nodeColor2 ?? shapeDefaultColor(shape, palette, isEndTerminal, colorOff);
-  return shapeFill(palette, color, isDark, {
-    ...solid !== void 0 && { solid }
-  });
+  return shapeFill(palette, color, isDark, { mode: fillMode });
 }
 function nodeStroke6(palette, shape, nodeColor2, isEndTerminal, colorOff) {
   return nodeColor2 ?? shapeDefaultColor(shape, palette, isEndTerminal, colorOff);
 }
-function renderTerminal(g, node, palette, isDark, isEnd, colorOff, solid, sNodeStrokeWidth = NODE_STROKE_WIDTH) {
+function renderTerminal(g, node, palette, isDark, isEnd, colorOff, fillMode, sNodeStrokeWidth = NODE_STROKE_WIDTH) {
   const w = node.width;
   const h = node.height;
   const rx = h / 2;
   g.append("rect").attr("x", -w / 2).attr("y", -h / 2).attr("width", w).attr("height", h).attr("rx", rx).attr("ry", rx).attr(
     "fill",
-    nodeFill6(palette, isDark, node.shape, node.color, isEnd, colorOff, solid)
+    nodeFill6(
+      palette,
+      isDark,
+      node.shape,
+      node.color,
+      isEnd,
+      colorOff,
+      fillMode
+    )
   ).attr(
     "stroke",
     nodeStroke6(palette, node.shape, node.color, isEnd, colorOff)
   ).attr("stroke-width", sNodeStrokeWidth);
 }
-function renderProcess(g, node, palette, isDark, colorOff, solid, sNodeStrokeWidth = NODE_STROKE_WIDTH) {
+function renderProcess(g, node, palette, isDark, colorOff, fillMode, sNodeStrokeWidth = NODE_STROKE_WIDTH) {
   const w = node.width;
   const h = node.height;
   g.append("rect").attr("x", -w / 2).attr("y", -h / 2).attr("width", w).attr("height", h).attr("rx", 3).attr("ry", 3).attr(
@@ -52203,14 +52472,14 @@ function renderProcess(g, node, palette, isDark, colorOff, solid, sNodeStrokeWid
       node.color,
       void 0,
       colorOff,
-      solid
+      fillMode
     )
   ).attr(
     "stroke",
     nodeStroke6(palette, node.shape, node.color, void 0, colorOff)
   ).attr("stroke-width", sNodeStrokeWidth);
 }
-function renderDecision(g, node, palette, isDark, colorOff, solid, sNodeStrokeWidth = NODE_STROKE_WIDTH) {
+function renderDecision(g, node, palette, isDark, colorOff, fillMode, sNodeStrokeWidth = NODE_STROKE_WIDTH) {
   const w = node.width / 2;
   const h = node.height / 2;
   const points = [`${0},${-h}`, `${w},${0}`, `${0},${h}`, `${-w},${0}`].join(
@@ -52225,14 +52494,14 @@ function renderDecision(g, node, palette, isDark, colorOff, solid, sNodeStrokeWi
       node.color,
       void 0,
       colorOff,
-      solid
+      fillMode
     )
   ).attr(
     "stroke",
     nodeStroke6(palette, node.shape, node.color, void 0, colorOff)
   ).attr("stroke-width", sNodeStrokeWidth);
 }
-function renderIO(g, node, palette, isDark, colorOff, solid, sNodeStrokeWidth = NODE_STROKE_WIDTH, sIoSkew = IO_SKEW) {
+function renderIO(g, node, palette, isDark, colorOff, fillMode, sNodeStrokeWidth = NODE_STROKE_WIDTH, sIoSkew = IO_SKEW) {
   const w = node.width / 2;
   const h = node.height / 2;
   const sk = sIoSkew;
@@ -52251,14 +52520,14 @@ function renderIO(g, node, palette, isDark, colorOff, solid, sNodeStrokeWidth =
       node.color,
       void 0,
       colorOff,
-      solid
+      fillMode
     )
   ).attr(
     "stroke",
     nodeStroke6(palette, node.shape, node.color, void 0, colorOff)
   ).attr("stroke-width", sNodeStrokeWidth);
 }
-function renderSubroutine(g, node, palette, isDark, colorOff, solid, sNodeStrokeWidth = NODE_STROKE_WIDTH, sSubroutineInset = SUBROUTINE_INSET) {
+function renderSubroutine(g, node, palette, isDark, colorOff, fillMode, sNodeStrokeWidth = NODE_STROKE_WIDTH, sSubroutineInset = SUBROUTINE_INSET) {
   const w = node.width;
   const h = node.height;
   const s = nodeStroke6(palette, node.shape, node.color, void 0, colorOff);
@@ -52269,14 +52538,14 @@ function renderSubroutine(g, node, palette, isDark, colorOff, solid, sNodeStroke
     node.color,
     void 0,
     colorOff,
-    solid
+    fillMode
   );
-  const innerStroke = solid ? contrastText(fill2, palette.textOnFillLight, palette.textOnFillDark) : s;
+  const innerStroke = fillMode === "solid" ? contrastText(fill2, palette.textOnFillLight, palette.textOnFillDark) : s;
   g.append("rect").attr("x", -w / 2).attr("y", -h / 2).attr("width", w).attr("height", h).attr("rx", 3).attr("ry", 3).attr("fill", fill2).attr("stroke", s).attr("stroke-width", sNodeStrokeWidth);
   g.append("line").attr("x1", -w / 2 + sSubroutineInset).attr("y1", -h / 2).attr("x2", -w / 2 + sSubroutineInset).attr("y2", h / 2).attr("stroke", innerStroke).attr("stroke-width", sNodeStrokeWidth);
   g.append("line").attr("x1", w / 2 - sSubroutineInset).attr("y1", -h / 2).attr("x2", w / 2 - sSubroutineInset).attr("y2", h / 2).attr("stroke", innerStroke).attr("stroke-width", sNodeStrokeWidth);
 }
-function renderDocument(g, node, palette, isDark, colorOff, solid, sNodeStrokeWidth = NODE_STROKE_WIDTH, sDocWaveHeight = DOC_WAVE_HEIGHT) {
+function renderDocument(g, node, palette, isDark, colorOff, fillMode, sNodeStrokeWidth = NODE_STROKE_WIDTH, sDocWaveHeight = DOC_WAVE_HEIGHT) {
   const w = node.width;
   const h = node.height;
   const waveH = sDocWaveHeight;
@@ -52300,14 +52569,14 @@ function renderDocument(g, node, palette, isDark, colorOff, solid, sNodeStrokeWi
       node.color,
       void 0,
       colorOff,
-      solid
+      fillMode
     )
   ).attr(
     "stroke",
     nodeStroke6(palette, node.shape, node.color, void 0, colorOff)
   ).attr("stroke-width", sNodeStrokeWidth);
 }
-function renderNodeShape(g, node, palette, isDark, endTerminalIds, colorOff, solid, sNodeStrokeWidth = NODE_STROKE_WIDTH, sIoSkew = IO_SKEW, sSubroutineInset = SUBROUTINE_INSET, sDocWaveHeight = DOC_WAVE_HEIGHT) {
+function renderNodeShape(g, node, palette, isDark, endTerminalIds, colorOff, fillMode, sNodeStrokeWidth = NODE_STROKE_WIDTH, sIoSkew = IO_SKEW, sSubroutineInset = SUBROUTINE_INSET, sDocWaveHeight = DOC_WAVE_HEIGHT) {
   switch (node.shape) {
     case "terminal":
       renderTerminal(
@@ -52317,7 +52586,7 @@ function renderNodeShape(g, node, palette, isDark, endTerminalIds, colorOff, sol
         isDark,
         endTerminalIds.has(node.id),
         colorOff,
-        solid,
+        fillMode,
         sNodeStrokeWidth
       );
       break;
@@ -52328,7 +52597,7 @@ function renderNodeShape(g, node, palette, isDark, endTerminalIds, colorOff, sol
         palette,
         isDark,
         colorOff,
-        solid,
+        fillMode,
         sNodeStrokeWidth
       );
       break;
@@ -52339,7 +52608,7 @@ function renderNodeShape(g, node, palette, isDark, endTerminalIds, colorOff, sol
         palette,
         isDark,
         colorOff,
-        solid,
+        fillMode,
         sNodeStrokeWidth
       );
       break;
@@ -52350,7 +52619,7 @@ function renderNodeShape(g, node, palette, isDark, endTerminalIds, colorOff, sol
         palette,
         isDark,
         colorOff,
-        solid,
+        fillMode,
         sNodeStrokeWidth,
         sIoSkew
       );
@@ -52362,7 +52631,7 @@ function renderNodeShape(g, node, palette, isDark, endTerminalIds, colorOff, sol
         palette,
         isDark,
         colorOff,
-        solid,
+        fillMode,
         sNodeStrokeWidth,
         sSubroutineInset
       );
@@ -52374,7 +52643,7 @@ function renderNodeShape(g, node, palette, isDark, endTerminalIds, colorOff, sol
         palette,
         isDark,
         colorOff,
-        solid,
+        fillMode,
         sNodeStrokeWidth,
         sDocWaveHeight
       );
@@ -52507,7 +52776,7 @@ function renderFlowchart(container, graph, layout, palette, isDark, onClickItem,
     }
   }
   const colorOff = graph.options?.["color"] === "off";
-  const solid = graph.options?.["solid-fill"] === "on";
+  const fillMode = fillModeFromOptions(graph.options ?? {});
   const noNotes = graph.options?.["no-notes"] === "on";
   for (const node of layout.nodes) {
     const nodeG = contentG.append("g").attr("transform", `translate(${node.x}, ${node.y})`).attr("class", "fc-node").attr("data-line-number", String(node.lineNumber)).attr("data-node-id", node.id);
@@ -52524,7 +52793,7 @@ function renderFlowchart(container, graph, layout, palette, isDark, onClickItem,
       isDark,
       endTerminalIds,
       colorOff,
-      solid,
+      fillMode,
       sNodeStrokeWidth,
       sIoSkew,
       sSubroutineInset,
@@ -52538,7 +52807,7 @@ function renderFlowchart(container, graph, layout, palette, isDark, onClickItem,
       node.color,
       isEnd,
       colorOff,
-      solid
+      fillMode
     );
     nodeG.append("text").attr("x", 0).attr("y", 0).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr(
       "fill",
@@ -52625,6 +52894,7 @@ var DIAGRAM_PADDING10, MAX_SCALE6, NODE_FONT_SIZE3, EDGE_LABEL_FONT_SIZE9, ARROW
 var init_flowchart_renderer = __esm({
   "src/graph/flowchart-renderer.ts"() {
     "use strict";
+    init_parsing();
     init_arrow_markers();
     init_fit_canvas();
     init_fonts();
@@ -54847,10 +55117,10 @@ function worstNodeSeverity(node, slo) {
   }
   return worst;
 }
-function nodeColor(_node, palette, isDark, severity, solid) {
+function nodeColor(_node, palette, isDark, severity, fillMode) {
   if (severity === "overloaded") {
     const fill2 = shapeFill(palette, COLOR_OVERLOADED, isDark, {
-      ...solid !== void 0 && { solid }
+      mode: fillMode
     });
     return {
       fill: fill2,
@@ -54863,9 +55133,7 @@ function nodeColor(_node, palette, isDark, severity, solid) {
     };
   }
   if (severity === "warning") {
-    const fill2 = shapeFill(palette, COLOR_WARNING, isDark, {
-      ...solid !== void 0 && { solid }
-    });
+    const fill2 = shapeFill(palette, COLOR_WARNING, isDark, { mode: fillMode });
     return {
       fill: fill2,
       stroke: COLOR_WARNING,
@@ -54877,9 +55145,7 @@ function nodeColor(_node, palette, isDark, severity, solid) {
     };
   }
   if (severity === "healthy") {
-    const fill2 = shapeFill(palette, COLOR_HEALTHY, isDark, {
-      ...solid !== void 0 && { solid }
-    });
+    const fill2 = shapeFill(palette, COLOR_HEALTHY, isDark, { mode: fillMode });
     return {
       fill: fill2,
       stroke: COLOR_HEALTHY,
@@ -55004,7 +55270,7 @@ function renderNodes(svg, nodes, palette, isDark, animate, expandedNodeIds, acti
   for (const node of nodes) {
     const slo = !node.isEdge && diagramOptions ? resolveNodeSlo(node, diagramOptions) : null;
     const severity = worstNodeSeverity(node, slo);
-    const nodeColors2 = nodeColor(node, palette, isDark, severity, false);
+    const nodeColors2 = nodeColor(node, palette, isDark, severity, void 0);
     const textFill = nodeColors2.textFill;
     let { fill: fill2, stroke: stroke2 } = nodeColors2;
     if (activeGroup && tagGroups && !node.isEdge) {
@@ -57757,7 +58023,10 @@ function paintAnalysisRowMode(svg, resolved, palette, isDark, state, captionBull
       isDark
     };
     if (w.kind === "tornado") {
-      renderTornadoBlock(svg, state.tornadoRows, args);
+      renderTornadoBlock(svg, state.tornadoRows, {
+        ...args,
+        fillMode: resolved.options.fillMode
+      });
     } else {
       const scurveTitle = !state.summaryRendered && captionBullets.length > 0 ? (
         // In-bounds by length check.
@@ -57875,7 +58144,10 @@ function paintAnalysisStackMode(svg, resolved, palette, isDark, state, captionBu
       };
       switch (item.kind) {
         case "tornado":
-          renderTornadoBlock(svg, state.tornadoRows, args);
+          renderTornadoBlock(svg, state.tornadoRows, {
+            ...args,
+            fillMode: resolved.options.fillMode
+          });
           break;
         case "scurve": {
           const scurveTitle = !state.summaryRendered && captionBullets.length > 0 ? (
@@ -57981,7 +58253,7 @@ function renderGroups2(root, resolved, layout, palette, isDark, collapsedSet, si
   if (layout.groups.length === 0) return;
   const layer = root.append("g").attr("class", "pert-groups");
   const unit = resolved.options.timeUnit;
-  const solid = resolved.options.solidFill === true;
+  const fillMode = resolved.options.fillMode;
   const containerFill3 = mix(palette.surface, palette.bg, 40);
   const containerStroke3 = palette.textMuted;
   const mcOn = resolved.monteCarloResult !== null;
@@ -58034,7 +58306,9 @@ function renderGroups2(root, resolved, layout, palette, isDark, collapsedSet, si
         "?"
       );
       const cardBaseColor = bandColor(memberBand, palette, palette.primary);
-      const cardFill = shapeFill(palette, cardBaseColor, isDark, { solid });
+      const cardFill = shapeFill(palette, cardBaseColor, isDark, {
+        mode: fillMode
+      });
       const cardLabelColor = contrastText(
         cardFill,
         palette.textOnFillLight,
@@ -58162,7 +58436,7 @@ function renderNodes2(root, _defs, resolved, layout, palette, isDark, sizing, on
   const unit = resolved.options.timeUnit;
   const sprintMode = resolved.options.sprintMode;
   const sprintNumber = resolved.options.sprintNumber ?? 1;
-  const solid = resolved.options.solidFill === true;
+  const fillMode = resolved.options.fillMode;
   const activeTagGroup = resolveActiveTagGroup(
     resolved.tagGroups,
     resolved.options.activeTag,
@@ -58217,7 +58491,7 @@ function renderNodes2(root, _defs, resolved, layout, palette, isDark, sizing, on
       );
     }
     const baseColor2 = bandColor(band, palette, palette.primary);
-    const fill2 = shapeFill(palette, baseColor2, isDark, { solid });
+    const fill2 = shapeFill(palette, baseColor2, isDark, { mode: fillMode });
     const labelColor = contrastText(
       fill2,
       palette.textOnFillLight,
@@ -58229,7 +58503,7 @@ function renderNodes2(root, _defs, resolved, layout, palette, isDark, sizing, on
       activeTagGroup
     );
     const hasTagColor = tagColor !== void 0 && tagColor !== "#999999";
-    const tagBandFill = hasTagColor ? shapeFill(palette, tagColor, isDark, { solid }) : void 0;
+    const tagBandFill = hasTagColor ? shapeFill(palette, tagColor, isDark, { mode: fillMode }) : void 0;
     const tagLabelColor = hasTagColor ? contrastText(
       tagBandFill,
       palette.textOnFillLight,
@@ -58655,7 +58929,7 @@ function tornadoBoxHeightFor(rows) {
   return rows.length * TORNADO_ROW_HEIGHT + 2 * CAPTION_BOX_PADDING_Y + CAPTION_HEADER_BAND_HEIGHT;
 }
 function renderTornadoBlock(svg, rows, args) {
-  const { x, y, width, height, palette, isDark } = args;
+  const { x, y, width, height, palette, isDark, fillMode } = args;
   const { fill: fill2, stroke: chromeStroke } = analysisBlockChrome(palette, isDark);
   const labelColor = contrastText(
     fill2,
@@ -58698,7 +58972,7 @@ function renderTornadoBlock(svg, rows, args) {
     const rowY = firstRowY + i * TORNADO_ROW_HEIGHT;
     const labelY = rowY + TORNADO_ROW_HEIGHT / 2 + TORNADO_BAR_FONT_SIZE / 2 - 2;
     const barColor = bandColor(row.band, palette, palette.primary);
-    const barFill = shapeFill(palette, barColor, isDark);
+    const barFill = fillMode === "outline" ? shapeFill(palette, barColor, isDark, { mode: "outline" }) : shapeFill(palette, barColor, isDark);
     const lowW = row.lowSwing * pixelsPerUnit;
     const highW = row.highSwing * pixelsPerUnit;
     const rowG = block.append("g").attr("class", "pert-tornado-row").attr("data-activity-id", row.id).attr("data-tornado-swing", String(row.lowSwing + row.highSwing));
@@ -59952,18 +60226,13 @@ function computeBarLabel(label, x1, barWidth, innerWidth, textColor, onFillColor
   }
   return null;
 }
-function renderLabelBand(svg, y, leftMargin, color, palette, isDark, cssPrefix, dataAttr, solid, barH = BAR_H, bandRadius = BAND_RADIUS, bandAccentW = BAND_ACCENT_W) {
+function renderLabelBand(svg, y, leftMargin, color, palette, isDark, cssPrefix, dataAttr, fillMode, barH = BAR_H, bandRadius = BAND_RADIUS, bandAccentW = BAND_ACCENT_W) {
   const bandX = 5;
   const bandW = leftMargin - 7;
   const bandY = y - barH / 2;
   const clipId = `gantt-band-clip-${bandClipCounter++}`;
   svg.append("clipPath").attr("id", clipId).append("rect").attr("x", bandX).attr("y", bandY).attr("width", bandW).attr("height", barH).attr("rx", bandRadius);
-  const tint2 = svg.append("rect").attr("class", `gantt-${cssPrefix}-band-bg`).attr("x", bandX).attr("y", bandY).attr("width", bandW).attr("height", barH).attr("rx", bandRadius).attr(
-    "fill",
-    shapeFill(palette, color, isDark, {
-      ...solid !== void 0 && { solid }
-    })
-  ).style("pointer-events", "none");
+  const tint2 = svg.append("rect").attr("class", `gantt-${cssPrefix}-band-bg`).attr("x", bandX).attr("y", bandY).attr("width", bandW).attr("height", barH).attr("rx", bandRadius).attr("fill", shapeFill(palette, color, isDark, { mode: fillMode })).style("pointer-events", "none");
   const accent = svg.append("rect").attr("class", `gantt-${cssPrefix}-band-accent`).attr("x", bandX).attr("y", bandY).attr("width", bandAccentW).attr("height", barH).attr("fill", color).attr("clip-path", `url(#${clipId})`).style("pointer-events", "none");
   if (dataAttr) {
     tint2.attr(dataAttr.key, dataAttr.value);
@@ -59979,7 +60248,7 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
   container.innerHTML = "";
   bandClipCounter = 0;
   if (resolved.tasks.length === 0) return;
-  const solid = false;
+  const fillMode = void 0;
   const onClickItem = options?.onClickItem;
   const collapsedGroups = options?.collapsedGroups ?? new Set(resolved.groups.filter((g2) => g2.collapsed).map((g2) => g2.name));
   const onToggleGroup = options?.onToggleGroup;
@@ -60170,7 +60439,7 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
         seriesColors2,
         palette
       );
-      const fillColor = shapeFill(palette, color, isDark, { solid });
+      const fillColor = shapeFill(palette, color, isDark, { mode: fillMode });
       el.select("rect").attr("fill", fillColor).attr("stroke", color);
     });
   }
@@ -60271,7 +60540,7 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
         isDark,
         "lane",
         { key: "data-lane", value: row.laneName },
-        solid,
+        fillMode,
         sBarH,
         sBandRadius,
         sBandAccentW
@@ -60298,7 +60567,9 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
         toggleIcon + " " + row.laneName + (row.aggregateProgress !== null ? ` ${Math.round(row.aggregateProgress)}%` : "")
       );
       if (laneBarWidth > 0) {
-        const barFill = shapeFill(palette, laneColor, isDark, { solid });
+        const barFill = shapeFill(palette, laneColor, isDark, {
+          mode: fillMode
+        });
         const laneBandG = g.append("g").attr("class", "gantt-lane-band-group").attr("data-lane", row.laneName).on("mouseenter", () => {
           highlightLane(g, svg, row.tagKey, row.laneName);
           if (row.laneStartDate && row.laneEndDate) {
@@ -60344,7 +60615,7 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
         isDark,
         "group",
         { key: "data-group", value: group.name },
-        solid,
+        fillMode,
         sBarH,
         sBandRadius,
         sBandAccentW
@@ -60391,7 +60662,10 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
             resetHighlight(g, svg);
             hideGanttDateIndicators(g);
           });
-          summaryG.append("rect").attr("x", gx1).attr("y", yOffset).attr("width", barWidth).attr("height", sBarH).attr("rx", 4).attr("fill", shapeFill(palette, groupColor, isDark, { solid })).attr("stroke", groupColor).attr("stroke-width", 2);
+          summaryG.append("rect").attr("x", gx1).attr("y", yOffset).attr("width", barWidth).attr("height", sBarH).attr("rx", 4).attr(
+            "fill",
+            shapeFill(palette, groupColor, isDark, { mode: fillMode })
+          ).attr("stroke", groupColor).attr("stroke-width", 2);
           if (group.progress !== null && group.progress > 0) {
             summaryG.append("rect").attr("x", gx1).attr("y", yOffset).attr("width", barWidth * Math.min(group.progress / 100, 1)).attr("height", sBarH).attr("fill", groupColor).attr("opacity", 0.5);
           }
@@ -60403,7 +60677,7 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
             innerWidth,
             palette.text,
             contrastText(
-              shapeFill(palette, groupColor, isDark, { solid }),
+              shapeFill(palette, groupColor, isDark, { mode: fillMode }),
               palette.textOnFillLight,
               palette.textOnFillDark
             ),
@@ -60421,7 +60695,9 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
           });
         } else {
           const groupBarWidth = Math.max(gx2 - gx1, 2);
-          const bandFill = shapeFill(palette, groupColor, isDark, { solid });
+          const bandFill = shapeFill(palette, groupColor, isDark, {
+            mode: fillMode
+          });
           const groupBarG = g.append("g").attr("class", "gantt-group-bar").attr("data-group", group.name).attr("data-line-number", String(group.lineNumber)).on("mouseenter", () => {
             highlightGroup(g, svg, group.name);
             showGanttDateIndicators(
@@ -60448,7 +60724,7 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
             innerWidth,
             palette.text,
             contrastText(
-              shapeFill(palette, groupColor, isDark, { solid }),
+              shapeFill(palette, groupColor, isDark, { mode: fillMode }),
               palette.textOnFillLight,
               palette.textOnFillDark
             ),
@@ -60528,7 +60804,9 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
         const x1 = xScale(tStart);
         const x2 = xScale(tEnd);
         const barWidth = Math.max(x2 - x1, 2);
-        const fillColor = shapeFill(palette, barColor, isDark, { solid });
+        const fillColor = shapeFill(palette, barColor, isDark, {
+          mode: fillMode
+        });
         const taskG = g.append("g").attr("class", "gantt-task").attr("data-line-number", String(task.lineNumber)).attr("data-task-name", task.label).attr("data-task-id", task.id).attr("data-group", topGroup).style("cursor", onClickItem ? "pointer" : "default").on("click", () => {
           if (onClickItem) onClickItem(task.lineNumber);
         }).on("mouseenter", () => {
@@ -60599,7 +60877,7 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
           innerWidth,
           palette.text,
           contrastText(
-            shapeFill(palette, barColor, isDark, { solid }),
+            shapeFill(palette, barColor, isDark, { mode: fillMode }),
             palette.textOnFillLight,
             palette.textOnFillDark
           ),
@@ -61990,11 +62268,9 @@ import * as d3Selection24 from "d3-selection";
 function stateDefaultColor(palette, colorOff) {
   return colorOff ? palette.textMuted : palette.colors.blue;
 }
-function stateFill(palette, isDark, nodeColor2, colorOff, solid) {
+function stateFill(palette, isDark, nodeColor2, colorOff, fillMode) {
   const color = nodeColor2 ?? stateDefaultColor(palette, colorOff);
-  return shapeFill(palette, color, isDark, {
-    ...solid !== void 0 && { solid }
-  });
+  return shapeFill(palette, color, isDark, { mode: fillMode });
 }
 function stateStroke(palette, nodeColor2, colorOff) {
   return nodeColor2 ?? stateDefaultColor(palette, colorOff);
@@ -62080,7 +62356,8 @@ function renderState(container, graph, layout, palette, isDark, onClickItem, exp
     const gy = group.y - sGroupExtraPadding - sGroupLabelFontSize - 4;
     const gw = group.width + sGroupExtraPadding * 2;
     const gh = group.height + sGroupExtraPadding * 2 + sGroupLabelFontSize + 4;
-    const fillColor = group.color ? mix(group.color, themeBaseBg(palette, isDark), 10) : isDark ? palette.surface : mix(palette.border, palette.bg, 30);
+    const groupOutline = fillModeFromOptions(graph.options ?? {}) === "outline";
+    const fillColor = groupOutline ? themeBaseBg(palette, isDark) : group.color ? mix(group.color, themeBaseBg(palette, isDark), 10) : isDark ? palette.surface : mix(palette.border, palette.bg, 30);
     const strokeColor = group.color ?? palette.textMuted;
     const groupWrapper = contentG.append("g").attr("class", "st-group-wrapper").attr("data-line-number", String(group.lineNumber)).attr("data-group-id", group.id).attr("data-group-toggle", group.id).attr("tabindex", "0").attr("role", "button").attr("aria-expanded", "true").attr("aria-label", `Collapse group ${group.label}`).style("cursor", "pointer");
     groupWrapper.append("rect").attr("x", gx).attr("y", gy).attr("width", gw).attr("height", gh).attr("rx", 6).attr("fill", fillColor).attr("stroke", strokeColor).attr("stroke-width", 1).attr("stroke-opacity", 0.5).attr("class", "st-group");
@@ -62174,7 +62451,7 @@ function renderState(container, graph, layout, palette, isDark, onClickItem, exp
     if (group.collapsed) collapsedGroupIds.add(group.id);
   }
   const colorOff = graph.options?.["color"] === "off";
-  const solid = graph.options?.["solid-fill"] === "on";
+  const fillMode = fillModeFromOptions(graph.options ?? {});
   const noNotes = graph.options?.["no-notes"] === "on";
   for (const node of layout.nodes) {
     const isCollapsedGroup = collapsedGroupIds.has(node.id);
@@ -62194,7 +62471,9 @@ function renderState(container, graph, layout, palette, isDark, onClickItem, exp
       const w = node.width;
       const h = node.height;
       const groupColor = node.color ?? stateDefaultColor(palette, colorOff);
-      const fillColor = shapeFill(palette, groupColor, isDark, { solid });
+      const fillColor = shapeFill(palette, groupColor, isDark, {
+        mode: fillMode
+      });
       const strokeColor = groupColor;
       const COLLAPSE_BAR_H = 6;
       nodeG.append("rect").attr("x", -w / 2).attr("y", -h / 2).attr("width", w).attr("height", h).attr("rx", sStateCornerRadius).attr("ry", sStateCornerRadius).attr("fill", fillColor).attr("stroke", strokeColor).attr("stroke-width", sNodeStrokeWidth);
@@ -62217,7 +62496,7 @@ function renderState(container, graph, layout, palette, isDark, onClickItem, exp
         isDark,
         node.color,
         colorOff,
-        solid
+        fillMode
       );
       nodeG.append("rect").attr("x", -w / 2).attr("y", -h / 2).attr("width", w).attr("height", h).attr("rx", sStateCornerRadius).attr("ry", sStateCornerRadius).attr("fill", resolvedFill).attr("stroke", stateStroke(palette, node.color, colorOff)).attr("stroke-width", sNodeStrokeWidth);
       nodeG.append("text").attr("x", 0).attr("y", 0).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr(
@@ -62306,6 +62585,7 @@ var DIAGRAM_PADDING13, MAX_SCALE7, NODE_FONT_SIZE7, EDGE_LABEL_FONT_SIZE12, GROU
 var init_state_renderer = __esm({
   "src/graph/state-renderer.ts"() {
     "use strict";
+    init_parsing();
     init_arrow_markers();
     init_fit_canvas();
     init_fonts();
@@ -62802,7 +63082,7 @@ function clearDim(root) {
 function renderHtmlPanel(panel, parsed, quadrant, qColor, palette, isDark, rootContainer, onClickItem) {
   const ringOrder = parsed.rings.map((r) => r.name);
   const fillColor = shapeFill(palette, qColor, isDark, {
-    solid: parsed.options["solid-fill"] === "on"
+    mode: fillModeFromOptions(parsed.options)
   });
   let expandedLineNum = null;
   function render2() {
@@ -63040,6 +63320,7 @@ var BLIP_RADIUS, BLIP_FONT_SIZE, TITLE_FONT_SIZE3, NARROW_BREAKPOINT;
 var init_interactive = __esm({
   "src/tech-radar/interactive.ts"() {
     "use strict";
+    init_parsing();
     init_fonts();
     init_color_utils();
     init_layout15();
@@ -63327,7 +63608,7 @@ function renderTechRadar(container, parsed, palette, isDark, onClickItem, export
         // Tech-radar opts out of solid-fill: blip popover stays in tinted
         // form so it reads consistently against the radar bg regardless of
         // the diagram's option setting.
-        false
+        void 0
       );
       showBlipHighlight(lineNum, bx, by, blipGroup);
     }).on("mousemove", (event) => {
@@ -63356,7 +63637,7 @@ function renderTechRadar(container, parsed, palette, isDark, onClickItem, export
           // Tech-radar opts out of solid-fill: blip popover stays in tinted
           // form so it reads consistently against the radar bg regardless of
           // the diagram's option setting.
-          false
+          void 0
         );
         popover.style.pointerEvents = "auto";
         showBlipHighlight(lineNum, bx, by, blipGroup);
@@ -63400,7 +63681,7 @@ function renderTechRadar(container, parsed, palette, isDark, onClickItem, export
             // Tech-radar opts out of solid-fill: blip popover stays in tinted
             // form so it reads consistently against the radar bg regardless of
             // the diagram's option setting.
-            false
+            void 0
           );
         }
         const lineNum = String(blip.lineNumber);
@@ -63593,10 +63874,8 @@ function createBlipPopover(container, _palette, isDark) {
   container.appendChild(el);
   return el;
 }
-function showBlipPopover(popover, blip, qColor, palette, isDark, event, solid) {
-  const fillColor = shapeFill(palette, qColor, isDark, {
-    ...solid !== void 0 && { solid }
-  });
+function showBlipPopover(popover, blip, qColor, palette, isDark, event, fillMode) {
+  const fillColor = shapeFill(palette, qColor, isDark, { mode: fillMode });
   const hasDesc = blip.description.length > 0;
   const onFillText = contrastText(
     fillColor,
@@ -63963,7 +64242,7 @@ function layoutJourneyMap(parsed, palette, options) {
         palette,
         scoreToColor(avgScore, palette),
         isDark,
-        { solid: parsed.options["solid-fill"] === "on" }
+        { mode: fillModeFromOptions(parsed.options) }
       );
       const COLLAPSED_CARD_H = 26;
       const COLLAPSED_GAP = 6;
@@ -64037,6 +64316,7 @@ var PADDING, TITLE_HEIGHT7, PERSONA_HEIGHT, PERSONA_PANEL_WIDTH, HEADER_GAP, CUR
 var init_layout16 = __esm({
   "src/journey-map/layout.ts"() {
     "use strict";
+    init_parsing();
     init_color_utils();
     init_text_measure();
     PADDING = 24;
@@ -64078,7 +64358,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 },
@@ -64133,7 +64413,9 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
     const textX = panelX + CARD_PADDING_X3;
     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,
@@ -64141,12 +64423,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_WIDTH2);
     personaG.append("text").attr("x", textX).attr("y", panelY + CARD_PADDING_Y3 + 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++) {
@@ -64282,7 +64573,9 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
         pt.y,
         pt.score,
         palette,
-        isDark
+        isDark,
+        void 0,
+        fillMode
       );
       addEmotionLabel(faceG, pt, palette);
       if (step) {
@@ -64315,7 +64608,9 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
       pt.y,
       pt.score,
       palette,
-      isDark
+      isDark,
+      void 0,
+      fillMode
     );
     addEmotionLabel(faceG, pt, palette);
     if (step) {
@@ -64400,7 +64695,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_WIDTH2);
@@ -64414,7 +64709,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);
@@ -64443,7 +64739,7 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
             effectiveActiveGroup,
             parsed.tagGroups,
             onNavigateToLine,
-            solid
+            fillMode
           );
         }
       }
@@ -64458,7 +64754,7 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
         effectiveActiveGroup,
         parsed.tagGroups,
         onNavigateToLine,
-        solid
+        fillMode
       );
     }
   }
@@ -64532,7 +64828,7 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
       );
       const by = Math.max(PADDING2, 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_WIDTH2);
       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_WIDTH2);
@@ -64626,7 +64922,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);
@@ -64647,7 +64943,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(
@@ -64665,7 +64961,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_HEIGHT3;
   if (sl.step.description) {
@@ -64687,7 +64983,7 @@ function renderStepCard(parent, sl, palette, isDark, activeGroup, tagGroups, onN
     const annoColor = annotationColor(anno.type, palette);
     const iconPaths = annotationIconPaths(anno.type);
     const annoLines = wrapText2(anno.text, annoTextW, FONT_SIZE_META);
-    const iconColor = solid ? onCardText : annoColor;
+    const iconColor = fillMode === "solid" ? onCardText : annoColor;
     renderAnnotationIcon(
       stepG,
       cx + CARD_PADDING_X3,
@@ -64712,7 +65008,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_WIDTH2);
     const stripTextColor = contrastText(
@@ -64729,8 +65025,8 @@ function renderStepCard(parent, sl, palette, isDark, activeGroup, tagGroups, onN
     });
   }
 }
-function renderPersonaSilhouette(parent, cx, cy, color, palette, scale = 1) {
-  const fill2 = mix(color, palette.bg, 70);
+function renderPersonaSilhouette(parent, cx, cy, color, palette, isDark, scale = 1, fillMode) {
+  const fill2 = fillMode === "outline" ? themeBaseBg(palette, isDark) : mix(color, palette.bg, 70);
   const stroke2 = color;
   const s = scale;
   parent.append("path").attr(
@@ -64742,12 +65038,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", fill2).attr("stroke", stroke2).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;
@@ -64835,6 +65131,7 @@ var init_renderer21 = __esm({
   "src/journey-map/renderer.ts"() {
     "use strict";
     init_tag_groups();
+    init_parsing();
     init_color_utils();
     init_fonts();
     init_parser28();
@@ -65545,7 +65842,7 @@ __export(renderer_exports21, {
 import * as d3Selection27 from "d3-selection";
 function renderCycle(container, parsed, palette, isDark, onClickItem, exportDims, viewState, renderOptions) {
   if (parsed.nodes.length === 0) return;
-  const solid = parsed.options?.["solid-fill"] === "on";
+  const fillMode = fillModeFromOptions(parsed.options ?? {});
   d3Selection27.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const width = exportDims?.width ?? container.clientWidth;
   const height = exportDims?.height ?? container.clientHeight;
@@ -65682,7 +65979,9 @@ function renderCycle(container, parsed, palette, isDark, onClickItem, exportDims
     const ln = layout.nodes[i];
     const node = parsed.nodes[i];
     const solidColor = resolveNodeColor5(node.color, palette, defaultNodeColor);
-    const fillColor = shapeFill(palette, solidColor, isDark, { solid });
+    const fillColor = shapeFill(palette, solidColor, isDark, {
+      mode: fillMode
+    });
     const textColor = contrastText(
       fillColor,
       palette.textOnFillLight,
@@ -65726,7 +66025,7 @@ function renderCycle(container, parsed, palette, isDark, onClickItem, exportDims
         const labelText = nodeG.append("text").attr("x", ln.x).attr("y", headerCenterY + scaledNodeFont / 3).attr("text-anchor", "middle").attr("fill", textColor).attr("font-family", FONT_FAMILY).attr("font-size", scaledNodeFont).attr("font-weight", "600");
         renderInlineText(labelText, node.label, palette, scaledNodeFont);
         const sepY = ln.y - nodeH / 2 + HEADER_H2;
-        nodeG.append("line").attr("x1", ln.x - nodeW / 2).attr("y1", sepY).attr("x2", ln.x + nodeW / 2).attr("y2", sepY).attr("stroke", solid ? descColor : solidColor).attr("stroke-opacity", 0.3).attr("stroke-width", 1);
+        nodeG.append("line").attr("x1", ln.x - nodeW / 2).attr("y1", sepY).attr("x2", ln.x + nodeW / 2).attr("y2", sepY).attr("stroke", fillMode === "solid" ? descColor : solidColor).attr("stroke-opacity", 0.3).attr("stroke-width", 1);
         const descStartY = sepY + 4 + scaledDescFont;
         const descPadX = Math.max(8, 12 * layout.scale);
         const descX = ln.x - nodeW / 2 + descPadX;
@@ -65829,6 +66128,7 @@ var NODE_FONT_SIZE8, DESC_FONT_SIZE7, EDGE_LABEL_FONT_SIZE14, DESC_LINE_HEIGHT8,
 var init_renderer22 = __esm({
   "src/cycle/renderer.ts"() {
     "use strict";
+    init_parsing();
     init_fonts();
     init_title_constants();
     init_legend_constants();
@@ -67086,7 +67386,6 @@ function renderClockCards(gCards, layout, resolved, palette, isDark, now, frameW
     const hasCoords = Number.isFinite(poi.lat) && Number.isFinite(poi.lon);
     const isFixed = poi.tzFixedOffsetMin !== void 0;
     const sun = !isFixed && hasCoords ? sunLine(now, poi.lat, poi.lon) : null;
-    const up = sun ? sun.up : parts.h >= 6 && parts.h < 18;
     const ts = formatTime(parts.h, parts.m, parts.s, hours12);
     const status = workStatus(parts, work);
     const viewerWeekday = WEEKDAY_ABBR3[new Date(now).getDay()];
@@ -67094,16 +67393,17 @@ function renderClockCards(gCards, layout, resolved, palette, isDark, now, frameW
     const line22 = [showWeekday ? parts.weekday : null, status?.text].filter(Boolean).join(" \xB7 ");
     const mainFont = 18;
     const sf = 8;
-    const mainW = measureText(ts.main, mainFont);
-    const stackW = Math.max(
-      measureText(`:${ts.sec}`, sf),
-      ts.ap ? measureText(ts.ap, sf) : 0
-    );
-    const stackGap = 3;
-    const dotGap = 15;
+    const advance = (s, f) => [...s].reduce((w, c) => w + f * (c === ":" ? 0.334 : 0.6), 0);
+    const mainW = advance(ts.main, mainFont);
+    const secW = advance(`:${ts.sec}`, sf);
+    const stackW = Math.max(secW, ts.ap ? measureText(ts.ap, sf) : 0);
+    const stackGap = 6;
     const padX = 9;
-    const line1W = dotGap + mainW + stackGap + stackW;
-    const line2W = measureText(line22, 10.5);
+    const iconR = 3.5;
+    const iconGap = 5;
+    const line2Icon = status ? iconR * 2 + iconGap : 0;
+    const line1W = mainW + stackGap + stackW;
+    const line2W = line2Icon + measureText(line22, 10.5);
     const cardW = Math.max(line1W, line2W) + padX * 2;
     const cardH = 44;
     const leaderGap = 7;
@@ -67133,27 +67433,19 @@ function renderClockCards(gCards, layout, resolved, palette, isDark, now, frameW
     const leaderX = clamp(cx, cardLeft + 10, cardLeft + cardW - 10);
     g.append("line").attr("x1", cx).attr("y1", below ? lp.cy + lp.r : lp.cy - lp.r).attr("x2", leaderX).attr("y2", below ? cardTop : cardTop + cardH).attr("stroke", border).attr("stroke-width", 1);
     g.append("rect").attr("x", cardLeft).attr("y", cardTop).attr("width", cardW).attr("height", cardH).attr("rx", 6).attr("fill", cardFill).attr("stroke", border).attr("stroke-width", 1);
-    const dotCX = cardLeft + padX + 3.5;
+    const statusColor = (cls) => cls === "ok" ? sw.ok : cls === "soon" ? sw.soon : sw.off;
     const line1Y = cardTop + 20;
-    const dot = g.append("circle").attr("data-dgmo-clock-status-dot", "").attr("cx", dotCX).attr("cy", line1Y - mainFont * 0.35).attr("r", 3.5);
-    if (status) {
-      const dc = status.cls === "ok" ? sw.ok : status.cls === "soon" ? sw.soon : sw.off;
-      if (status.cls === "off") {
-        dot.attr("fill", "none").attr("stroke", dc).attr("stroke-width", 1.4);
-      } else {
-        dot.attr("fill", dc);
-      }
-    } else {
-      dot.attr("fill", up ? sw.day : sw.night);
-    }
-    const timeX = cardLeft + padX + dotGap;
-    g.append("text").attr("data-dgmo-clock-digital-part", "main").attr("x", timeX).attr("y", line1Y).attr("font-family", FONT_FAMILY).attr("fill", palette.text).attr("font-size", mainFont).attr("font-weight", 600).style("font-variant-numeric", "tabular-nums").text(ts.main);
+    const timeX = cardLeft + padX;
+    g.append("text").attr("data-dgmo-clock-digital-part", "main").attr("x", timeX).attr("y", line1Y).attr("font-family", FONT_FAMILY).attr("fill", palette.text).attr("font-size", mainFont).attr("font-weight", 600).attr("textLength", mainW).attr("lengthAdjust", "spacing").style("font-variant-numeric", "tabular-nums").text(ts.main);
     const stackX = timeX + mainW + stackGap;
     const capTop = line1Y - mainFont * 0.7;
-    g.append("text").attr("data-dgmo-clock-digital-part", "sec").attr("x", stackX).attr("y", capTop + sf * 0.72).attr("font-family", FONT_FAMILY).attr("fill", muted).attr("font-size", sf).style("font-variant-numeric", "tabular-nums").text(`:${ts.sec}`);
+    g.append("text").attr("data-dgmo-clock-digital-part", "sec").attr("x", stackX).attr("y", capTop + sf * 0.72).attr("font-family", FONT_FAMILY).attr("fill", muted).attr("font-size", sf).attr("textLength", secW).attr("lengthAdjust", "spacing").style("font-variant-numeric", "tabular-nums").text(`:${ts.sec}`);
     g.append("text").attr("data-dgmo-clock-digital-part", "ap").attr("x", stackX).attr("y", line1Y).attr("font-family", FONT_FAMILY).attr("fill", muted).attr("font-size", sf).text(ts.ap);
     const line2Y = cardTop + 36;
-    const l2 = g.append("text").attr("x", cardLeft + padX).attr("y", line2Y).attr("font-family", FONT_FAMILY).attr("font-size", 10.5).attr("fill", muted);
+    if (status) {
+      g.append("circle").attr("data-dgmo-clock-status-icon", "").attr("cx", cardLeft + padX + iconR).attr("cy", line2Y - 3.5).attr("r", iconR).attr("fill", statusColor(status.cls));
+    }
+    const l2 = g.append("text").attr("x", cardLeft + padX + line2Icon).attr("y", line2Y).attr("font-family", FONT_FAMILY).attr("font-size", 10.5).attr("fill", muted);
     let needSep = false;
     if (showWeekday) {
       l2.append("tspan").text(parts.weekday);
@@ -71269,7 +71561,7 @@ function renderPyramid(container, parsed, palette, isDark, onClickItem, exportDi
     ].map((p) => `${p[0]},${p[1]}`).join(" ");
     const solidColor = resolveSolid(layer, i);
     const fillColor = shapeFill(palette, solidColor, isDark, {
-      solid: parsed.options["solid-fill"] === "on"
+      mode: fillModeFromOptions(parsed.options)
     });
     const layerG = diagramG.append("g").attr("class", "pyramid-layer").attr("data-line-number", layer.lineNumber);
     if (onClickItem) {
@@ -71576,6 +71868,7 @@ var TITLE_AREA_HEIGHT2, H_MARGIN_FRAC, V_MARGIN, BASE_WIDTH_FRAC_NO_DESC, PYRAMI
 var init_renderer24 = __esm({
   "src/pyramid/renderer.ts"() {
     "use strict";
+    init_parsing();
     init_fonts();
     init_title_constants();
     init_color_utils();
@@ -71665,10 +71958,10 @@ function renderRing(container, parsed, palette, isDark, onClickItem, exportDims)
     }
     return seriesColors2[i % seriesColors2.length];
   };
-  const solid = parsed.options["solid-fill"] === "on";
+  const fillMode = fillModeFromOptions(parsed.options);
   const layerColors = parsed.layers.map((l, i) => resolveLayerColor(l, i));
   const layerFills = layerColors.map(
-    (c) => shapeFill(palette, c, isDark, { solid })
+    (c) => shapeFill(palette, c, isDark, { mode: fillMode })
   );
   const diagramG = svg.append("g").attr("class", "ring-body");
   const strokeColor = palette.text;
@@ -71854,6 +72147,7 @@ var TITLE_AREA_HEIGHT3, H_MARGIN_FRAC2, V_MARGIN2, RING_AREA_FRAC_NO_DESC, RING_
 var init_renderer25 = __esm({
   "src/ring/renderer.ts"() {
     "use strict";
+    init_parsing();
     init_fonts();
     init_title_constants();
     init_color_utils();
@@ -72547,14 +72841,13 @@ function renderTreemapForExport(container, parsed, palette, isDark, exportDims,
 }
 function renderTreemap(container, parsed, palette, isDark, exportDims, options = {}) {
   if (parsed.error || parsed.roots.length === 0) return;
-  void isDark;
   d3Selection32.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const width = exportDims?.width ?? container.clientWidth;
   const height = exportDims?.height ?? container.clientHeight;
   if (width <= 0 || height <= 0) return;
   const mode = resolveColorMode(parsed, options.colorMode);
   const opts = parsed.options;
-  const solid = opts.solidFill;
+  const fillMode = opts.fillMode;
   const exportMode = options.exportMode ?? false;
   const seriesColorsTop = getSeriesColors(palette);
   const showTitle = !!parsed.title;
@@ -72607,7 +72900,7 @@ function renderTreemap(container, parsed, palette, isDark, exportDims, options =
     const h = Math.max(0, cell.y1 - cell.y0);
     if (w <= 0 || h <= 0) continue;
     const baseColor2 = resolveCellColor(cell, colorCtx);
-    const fill2 = cell.isContainer ? baseColor2 : solid ? baseColor2 : mix(baseColor2, palette.bg, LEAF_MUTE_PCT);
+    const fill2 = fillMode === "outline" ? themeBaseBg(palette, isDark) : cell.isContainer ? baseColor2 : fillMode === "solid" ? baseColor2 : mix(baseColor2, palette.bg, LEAF_MUTE_PCT);
     const drillable = cell.isContainer || cell.isCollapsed;
     const g = root.append("g").attr("class", "dgmo-treemap-cell").attr("transform", `translate(${cell.x0},${cell.y0})`).attr("data-node-path", cell.path.join(" / "));
     if (cell.lineNumber !== void 0) {
@@ -72622,16 +72915,15 @@ function renderTreemap(container, parsed, palette, isDark, exportDims, options =
     const rect2 = g.append("rect").attr(
       "class",
       cell.isContainer ? "dgmo-treemap-rect branch" : "dgmo-treemap-rect"
-    ).attr("width", w).attr("height", h).attr("rx", 2).attr("fill", fill2).attr("fill-opacity", 1).attr("stroke", palette.bg).attr("stroke-width", cell.isContainer ? 1 : 0);
+    ).attr("width", w).attr("height", h).attr("rx", 2).attr("fill", fill2).attr("fill-opacity", 1).attr("stroke", fillMode === "outline" ? baseColor2 : palette.bg).attr(
+      "stroke-width",
+      fillMode === "outline" ? 1 : cell.isContainer ? 1 : 0
+    );
     if (drillable && options.onClickItem && cell.lineNumber !== void 0) {
       const ln = cell.lineNumber;
       rect2.style("cursor", "pointer").on("click", () => options.onClickItem(ln));
     }
-    const ink = contrastText(
-      fill2,
-      palette.textOnFillLight,
-      palette.textOnFillDark
-    );
+    const ink = fillMode === "outline" ? baseColor2 : contrastText(fill2, palette.textOnFillLight, palette.textOnFillDark);
     if (cell.isContainer && headerH > 0 && w > 34 && h > headerH) {
       const valParts = [];
       if (!opts.noValues) valParts.push(compactNumber2(cell.value));
@@ -73008,7 +73300,8 @@ function renderBlock(container, parsed, palette, isDark, exportDims, options = {
     activeGroup,
     activeKey: activeGroup ? tagAttrKey(activeGroup) : null,
     neutral,
-    solidFill: opts.solidFill,
+    fillMode: opts.fillMode,
+    isDark,
     onToggle: options.onToggle
   });
   if (legend) {
@@ -73046,7 +73339,7 @@ function clipLabel2(s, maxWidth, fs) {
   return lo <= 0 ? "" : s.slice(0, lo) + "\u2026";
 }
 function drawItems(g, items, ctx, path = []) {
-  const { palette, solidFill: solid } = ctx;
+  const { palette, fillMode } = ctx;
   for (const it of items) {
     if (it.type === "empty") {
       g.append("rect").attr("x", it.x).attr("y", it.y).attr("width", it.w).attr("height", it.h).attr("rx", 7).attr("fill", "none").attr("stroke", ctx.neutral).attr("stroke-width", 1).attr("stroke-dasharray", "3 4").attr("opacity", 0.7);
@@ -73064,17 +73357,17 @@ function drawItems(g, items, ctx, path = []) {
       if (v) cell.attr(`data-tag-${ctx.activeKey}`, v);
     }
     if (it.type === "collapsed") {
-      const fill3 = color ? solid ? color : mix(color, palette.bg, 12) : palette.surface;
+      const fill3 = color ? fillMode === "solid" ? color : fillMode === "outline" ? themeBaseBg(palette, ctx.isDark) : mix(color, palette.bg, 12) : palette.surface;
       const cid = `dgmo-block-clip-${clipCounter++}`;
       cell.append("clipPath").attr("id", cid).append("rect").attr("x", it.x).attr("y", it.y).attr("width", it.w).attr("height", it.h).attr("rx", 10);
       cell.append("rect").attr("x", it.x).attr("y", it.y).attr("width", it.w).attr("height", it.h).attr("rx", 10).attr("fill", fill3).attr("stroke", stroke2).attr("stroke-width", 1.5);
       cell.append("text").attr("x", it.x + it.w / 2).attr("y", it.y + it.h / 2 + 4).attr("text-anchor", "middle").attr("font-size", 12.5).attr("font-weight", 700).attr("fill", palette.text).text(clipLabel2(it.label ?? "", it.w - 24, 12.5));
-      cell.append("rect").attr("x", it.x).attr("y", it.y + it.h - BLOCK_BAR_H).attr("width", it.w).attr("height", BLOCK_BAR_H).attr("fill", solid && color ? palette.text : stroke2).attr("clip-path", `url(#${cid})`);
+      cell.append("rect").attr("x", it.x).attr("y", it.y + it.h - BLOCK_BAR_H).attr("width", it.w).attr("height", BLOCK_BAR_H).attr("fill", fillMode === "solid" && color ? palette.text : stroke2).attr("clip-path", `url(#${cid})`);
       bindToggle(cell, it, ctx, it.h);
       continue;
     }
     if (it.type === "container") {
-      const fill3 = color ? solid ? color : mix(color, palette.bg, 7) : palette.surface;
+      const fill3 = color ? fillMode === "solid" ? color : fillMode === "outline" ? themeBaseBg(palette, ctx.isDark) : mix(color, palette.bg, 7) : palette.surface;
       cell.append("rect").attr("x", it.x).attr("y", it.y).attr("width", it.w).attr("height", it.h).attr("rx", 10).attr("fill", fill3).attr("stroke", stroke2).attr("stroke-width", 1.5);
       const sizeMetric = Math.min(it.w, it.h * 2.5);
       const headerFs = Math.max(
@@ -73089,7 +73382,7 @@ function drawItems(g, items, ctx, path = []) {
       if (it.inner) drawItems(g, it.inner, ctx, itemPath);
       continue;
     }
-    const fill2 = color ? solid ? mix(color, palette.bg, 80) : mix(color, palette.bg, 14) : palette.bg;
+    const fill2 = color ? fillMode === "solid" ? mix(color, palette.bg, 80) : fillMode === "outline" ? themeBaseBg(palette, ctx.isDark) : mix(color, palette.bg, 14) : palette.bg;
     cell.attr("data-leaf", "true");
     cell.append("rect").attr("x", it.x).attr("y", it.y).attr("width", it.w).attr("height", it.h).attr("rx", 8).attr("fill", fill2).attr("stroke", stroke2).attr("stroke-width", 1.25);
     cell.append("text").attr("x", it.x + it.w / 2).attr("y", it.y + it.h / 2 + 5).attr("text-anchor", "middle").attr("font-size", 13).attr("font-weight", 600).attr("fill", palette.text).text(clipLabel2(it.label ?? "", it.w - 16, 13));
@@ -73192,7 +73485,11 @@ function resolvePaint(parsed, palette, isDark, pctFrac) {
   const base = parsed.color && resolveColor(parsed.color, palette) || parsed.color || autoColor || getSeriesColors(palette)[0];
   return {
     base,
-    fill: shapeFill(palette, base, isDark, { solid: parsed.options.solidFill }),
+    // §1.9 fill family: tint (default) / solid / outline. In outline mode the
+    // progress region renders hollow (theme base bg) and the traffic-light /
+    // override color moves to the border — advancement still reads from the
+    // outlined region's extent against the gray track.
+    fill: shapeFill(palette, base, isDark, { mode: parsed.options.fillMode }),
     track: mix(palette.border, themeBaseBg(palette, isDark), 45),
     text: palette.text,
     muted: mix(palette.text, themeBaseBg(palette, isDark), 55)
@@ -73322,7 +73619,7 @@ function renderBar2(svg, parsed, metrics, paint) {
   g.append("rect").attr("x", x).attr("y", y).attr("width", trackW).attr("height", trackH).attr("rx", r).attr("fill", paint.track);
   const fillW = trackW * metrics.fillFrac;
   if (fillW > 0.5) {
-    g.append("rect").attr("x", x).attr("y", y).attr("width", fillW).attr("height", trackH).attr("rx", r).attr("fill", paint.fill).attr("stroke", paint.base).attr("stroke-width", 2);
+    g.append("rect").attr("x", x).attr("y", y).attr("width", fillW).attr("height", trackH).attr("rx", r).attr("fill", paint.fill).attr("stroke", paint.base).attr("stroke-width", parsed.options.fillMode === "outline" ? 1.5 : 2);
   }
   if (!parsed.options.noValue) {
     const valX = Math.max(x + fillW - 16, x + 52);
@@ -73367,7 +73664,7 @@ function renderThermometer(svg, parsed, metrics, paint) {
   const yBase = bulbCy - Math.sqrt(mBulb * mBulb - mHalf * mHalf);
   const yForFrac = (f) => yTop + (1 - f) * (yBase - yTop);
   const fillTopY = clamp5(yForFrac(metrics.fillFrac), yTop, yBase);
-  g.append("path").attr("d", bodyPath(fillTopY, mHalf, mBulb, false)).attr("fill", paint.fill).attr("stroke", paint.base).attr("stroke-width", 2).attr("stroke-linejoin", "round");
+  g.append("path").attr("d", bodyPath(fillTopY, mHalf, mBulb, false)).attr("fill", paint.fill).attr("stroke", paint.base).attr("stroke-width", parsed.options.fillMode === "outline" ? 1.5 : 2).attr("stroke-linejoin", "round");
   if (parsed.hasTarget) {
     const edgeX = cx + r;
     const tickLabelX = edgeX + 14;
@@ -73451,7 +73748,13 @@ function renderGauge(svg, parsed, metrics, paint) {
   }
   g.append("path").attr("d", arcPath(cx, cy, r, 0, 1)).attr("fill", "none").attr("stroke", paint.track).attr("stroke-width", stroke2).attr("stroke-linecap", "round");
   if (metrics.fillFrac > 1e-3) {
-    g.append("path").attr("d", arcPath(cx, cy, r, 0, metrics.fillFrac)).attr("fill", "none").attr("stroke", paint.fill).attr("stroke-width", stroke2).attr("stroke-linecap", "round");
+    const valueArc = arcPath(cx, cy, r, 0, metrics.fillFrac);
+    if (parsed.options.fillMode === "outline") {
+      g.append("path").attr("d", valueArc).attr("fill", "none").attr("stroke", paint.base).attr("stroke-width", stroke2).attr("stroke-linecap", "round");
+      g.append("path").attr("d", valueArc).attr("fill", "none").attr("stroke", paint.fill).attr("stroke-width", stroke2 - 3).attr("stroke-linecap", "round");
+    } else {
+      g.append("path").attr("d", valueArc).attr("fill", "none").attr("stroke", paint.fill).attr("stroke-width", stroke2).attr("stroke-linecap", "round");
+    }
   }
   const a = Math.PI - metrics.fillFrac * Math.PI;
   const needleLen = r - stroke2 / 2 - 6;
@@ -73558,7 +73861,7 @@ function stampRecur(sel, parsed) {
   if (r.anchorMs !== void 0) sel.attr("data-dgmo-recur-anchor", r.anchorMs);
   if (r.tz !== void 0) sel.attr("data-dgmo-recur-tz", r.tz);
 }
-function bandColors(palette, accent, muted, faint) {
+function bandColors(palette, accent, muted, faint, isDark, fillMode) {
   const blue = resolveColor("blue", palette) ?? mix(palette.text, palette.bg, 45);
   const collides = accent.toLowerCase() === blue.toLowerCase();
   const now = collides ? resolveColor("teal", palette) ?? resolveColor("cyan", palette) ?? mix(palette.text, palette.bg, 55) : blue;
@@ -73573,7 +73876,11 @@ function bandColors(palette, accent, muted, faint) {
     event: accent,
     midSoft: mix(mid, palette.bg, 24),
     inert: mix(palette.text, palette.bg, 7),
-    inertBorder: mix(palette.text, palette.bg, 22)
+    inertBorder: mix(palette.text, palette.bg, 22),
+    fillMode,
+    baseBg: themeBaseBg(palette, isDark),
+    onLight: palette.textOnFillLight,
+    onDark: palette.textOnFillDark
   };
 }
 function roleStyle(C, role) {
@@ -73583,15 +73890,26 @@ function roleStyle(C, role) {
     case "future":
       return { fill: C.inert, stroke: C.inertBorder, text: C.muted };
     case "today":
-      return { fill: C.now, stroke: C.now, text: C.bg };
+      return chipStyle(C, C.now);
     case "event":
-      return { fill: C.event, stroke: C.event, text: C.bg };
+      return chipStyle(C, C.event);
   }
 }
+function chipStyle(C, color) {
+  if (C.fillMode === "outline")
+    return { fill: C.baseBg, stroke: color, text: color };
+  if (C.fillMode === "solid")
+    return {
+      fill: color,
+      stroke: color,
+      text: contrastText(color, C.onLight, C.onDark)
+    };
+  return { fill: color, stroke: color, text: C.bg };
+}
 function gradStyle(C, frac) {
   const t = Math.max(0, Math.min(1, frac));
   const f = mix(C.event, C.now, Math.round(t * 100));
-  return { fill: f, stroke: f, text: C.bg };
+  return chipStyle(C, f);
 }
 function aText(svg, x, y, size, fill2, weight, anchor, txt, extra) {
   const t = svg.append("text").attr("x", x).attr("y", y).attr("text-anchor", anchor).attr("font-size", size).attr("font-weight", weight).attr("fill", fill2).attr("font-family", FONT_FAMILY).attr("font-variant-numeric", "tabular-nums").text(txt);
@@ -74111,13 +74429,14 @@ function vizToday(svg, g, resolvedMs, C) {
   }
   const w = Math.min(120, g.contentW * 0.16);
   const h = g.height * 0.52;
-  aRect(svg, cx - w / 2, cy - h / 2, w, h, 18, C.event, C.event, 2);
+  const st = roleStyle(C, "event");
+  aRect(svg, cx - w / 2, cy - h / 2, w, h, 18, st.fill, st.stroke, 2);
   aText(
     svg,
     cx,
     cy - h * 0.14,
     14,
-    C.bg,
+    st.text,
     700,
     "middle",
     MON_ABBR[ev.getMonth()].toUpperCase(),
@@ -74128,7 +74447,7 @@ function vizToday(svg, g, resolvedMs, C) {
     cx,
     cy + h * 0.22,
     Math.min(48, h * 0.4),
-    C.bg,
+    st.text,
     800,
     "middle",
     String(ev.getDate())
@@ -74468,7 +74787,14 @@ function renderCountdown(container, parsed, palette, isDark, exportDims) {
   );
   svg.attr("height", bannerH).attr("viewBox", `0 0 ${width} ${bannerH}`);
   bgRect.attr("height", bannerH);
-  const bandC = bandColors(palette, accent, muted, faint);
+  const bandC = bandColors(
+    palette,
+    accent,
+    muted,
+    faint,
+    isDark,
+    parsed.fillMode
+  );
   if (hasBand && resolved !== null) {
     drawBand2(
       svg,
@@ -74677,7 +75003,7 @@ function renderClock(container, parsed, palette, isDark, exportDims) {
   const rowH = 84;
   const svg = d3Selection36.select(container).append("svg").attr("width", width).attr("preserveAspectRatio", "xMidYMid meet").attr("xmlns", "http://www.w3.org/2000/svg").attr("role", "img").attr("aria-label", `${parsed.title ?? "Clock"} \u2014 world clocks`).style("font-family", FONT_FAMILY);
   const bgRect = svg.append("rect").attr("width", width).attr("fill", palette.bg);
-  const card = svg.append("rect").attr("x", cardM).attr("y", cardM).attr("width", width - 2 * cardM).attr("rx", 14).attr("fill", cardFill).attr("stroke", mix(palette.text, palette.bg, 40)).attr("stroke-width", 1);
+  const card = svg.append("rect").attr("x", cardM).attr("y", cardM).attr("width", width - 2 * cardM).attr("rx", 14).attr("fill", parsed.fillMode === "outline" ? baseBg : cardFill).attr("stroke", mix(palette.text, palette.bg, 40)).attr("stroke-width", 1);
   clipSeq += 1;
   const clipId = `dgmo-clock-clip-${clipSeq}`;
   const clipRect = svg.append("clipPath").attr("id", clipId).append("rect").attr("x", cardM).attr("y", cardM).attr("width", width - 2 * cardM).attr("rx", 14);
@@ -74705,6 +75031,8 @@ function renderClock(container, parsed, palette, isDark, exportDims) {
     line2: line22,
     tick: mix(palette.text, palette.bg, 35),
     cardFill,
+    baseBg,
+    fillMode: parsed.fillMode,
     sw,
     palette
   };
@@ -74746,6 +75074,9 @@ function renderClock(container, parsed, palette, isDark, exportDims) {
   bgRect.attr("height", bannerH);
   card.attr("height", bannerH - 2 * cardM);
 }
+function zoneFillMode(entry, parsed, col) {
+  return entry.color || parsed.colorBy === "place" ? col.fillMode : void 0;
+}
 function drawRow(svg, entry, index, parsed, now, rowTop, rowH, geom, col) {
   const { padX } = geom;
   const { text, muted, line2: line22, tick, sw, cardFill } = col;
@@ -74773,9 +75104,10 @@ function drawRow(svg, entry, index, parsed, now, rowTop, rowH, geom, col) {
   });
   const rightBlockW = 178;
   const rightColLeft = geom.rightX - rightBlockW;
+  const fm = zoneFillMode(entry, parsed, col);
   const g = svg.append("g").attr("data-line-number", entry.lineNumber);
   if (auto) {
-    g.append("rect").attr("data-dgmo-clock-lane", "").attr("x", 9).attr("y", rowTop).attr("width", geom.width - 18).attr("height", rowH).attr("fill", auto.laneTint);
+    g.append("rect").attr("data-dgmo-clock-lane", "").attr("x", 9).attr("y", rowTop).attr("width", geom.width - 18).attr("height", rowH).attr("fill", fm === "outline" ? col.baseBg : auto.laneTint);
   }
   g.attr("data-dgmo-clock", "").attr("data-dgmo-clock-zone", entry.zone).attr("data-dgmo-clock-face", parsed.face).attr("data-dgmo-clock-hours12", parsed.hours12 ? "1" : "0").attr("data-dgmo-clock-sun", sun ? "1" : "0").attr("data-dgmo-clock-c-day", sw.day).attr("data-dgmo-clock-c-night", sw.night).attr("data-dgmo-clock-c-day-soft", sw.dayTint).attr("data-dgmo-clock-c-night-soft", sw.nightTint).attr("data-dgmo-clock-c-ok", sw.ok).attr("data-dgmo-clock-c-soon", sw.soon).attr("data-dgmo-clock-c-off", sw.off).attr("data-dgmo-clock-c-ok-soft", sw.okSoft).attr("data-dgmo-clock-c-soon-soft", sw.soonSoft).attr("data-dgmo-clock-c-off-soft", sw.offSoft);
   if (entry.lat !== null) g.attr("data-dgmo-clock-lat", entry.lat);
@@ -74790,12 +75122,18 @@ function drawRow(svg, entry, index, parsed, now, rowTop, rowH, geom, col) {
   }
   const contentLeft = padX + 4;
   const timeColor = auto?.solid ?? text;
-  const faceFill = auto ? mix(auto.solid, cardFill, 20) : stTint;
+  const faceFill = auto && fm === "outline" ? col.baseBg : auto && fm === "solid" ? auto.solid : auto ? mix(auto.solid, cardFill, 20) : stTint;
   const ringColor = auto?.solid ?? line22;
-  const accentColor = auto?.solid ?? stColor;
+  const handInk = auto && fm === "solid" ? contrastText(
+    auto.solid,
+    col.palette.textOnFillLight,
+    col.palette.textOnFillDark
+  ) : text;
+  const accentColor = auto && fm === "solid" ? handInk : auto?.solid ?? stColor;
   if (auto) {
     g.attr("data-dgmo-clock-auto-solid", auto.solid).attr("data-dgmo-clock-auto-face", faceFill).attr("data-dgmo-clock-auto-mode", parsed.colorBy).attr("data-dgmo-clock-cardfill", cardFill);
   }
+  if (fm) g.attr("data-dgmo-clock-fill-mode", fm);
   if (parsed.face === "analog") {
     const size = rowH - 20;
     const fx = contentLeft;
@@ -74808,8 +75146,8 @@ function drawRow(svg, entry, index, parsed, now, rowTop, rowH, geom, col) {
       fg.append("line").attr("x1", 50 + 39 * Math.sin(a)).attr("y1", 50 - 39 * Math.cos(a)).attr("x2", 50 + 46 * Math.sin(a)).attr("y2", 50 - 46 * Math.cos(a)).attr("stroke", tick).attr("stroke-width", 1.8);
     }
     const ang = handAngles(parts.h, parts.m, parts.s);
-    fg.append("line").attr("data-dgmo-clock-hand", "h").attr("x1", 50).attr("y1", 50).attr("x2", 50).attr("y2", 28).attr("stroke", text).attr("stroke-width", 4).attr("stroke-linecap", "round").attr("transform", `rotate(${ang.hour} 50 50)`);
-    fg.append("line").attr("data-dgmo-clock-hand", "m").attr("x1", 50).attr("y1", 50).attr("x2", 50).attr("y2", 17).attr("stroke", text).attr("stroke-width", 2.6).attr("stroke-linecap", "round").attr("transform", `rotate(${ang.minute} 50 50)`);
+    fg.append("line").attr("data-dgmo-clock-hand", "h").attr("x1", 50).attr("y1", 50).attr("x2", 50).attr("y2", 28).attr("stroke", handInk).attr("stroke-width", 4).attr("stroke-linecap", "round").attr("transform", `rotate(${ang.hour} 50 50)`);
+    fg.append("line").attr("data-dgmo-clock-hand", "m").attr("x1", 50).attr("y1", 50).attr("x2", 50).attr("y2", 17).attr("stroke", handInk).attr("stroke-width", 2.6).attr("stroke-linecap", "round").attr("transform", `rotate(${ang.minute} 50 50)`);
     fg.append("line").attr("data-dgmo-clock-hand", "s").attr("x1", 50).attr("y1", 55).attr("x2", 50).attr("y2", 14).attr("stroke", accentColor).attr("stroke-width", 1.3).attr("stroke-linecap", "round").attr("transform", `rotate(${ang.second} 50 50)`);
     fg.append("circle").attr("data-dgmo-clock-center", "").attr("cx", 50).attr("cy", 50).attr("r", 2.6).attr("fill", accentColor);
   } else {
@@ -74869,10 +75207,7 @@ function drawRow(svg, entry, index, parsed, now, rowTop, rowH, geom, col) {
       g.append("text").attr("x", textX).attr("y", yy).attr("fill", muted).attr("font-family", FONT_FAMILY).attr("font-size", 14).attr("font-weight", 500).text(ellipsize(entry.place, 14, textMax));
     } else if (ln.kind === "avail" && status) {
       const stCol = status.cls === "ok" ? sw.ok : status.cls === "soon" ? sw.soon : sw.off;
-      const dot = g.append("circle").attr("data-dgmo-clock-status-dot", "").attr("cx", iconX).attr("cy", yy - 5).attr("r", 5);
-      if (status.cls === "off")
-        dot.attr("fill", "none").attr("stroke", stCol).attr("stroke-width", 1.6);
-      else dot.attr("fill", stCol).attr("stroke", "none");
+      drawStatusClock(g, iconX, yy - 5, 5, stCol);
       g.append("text").attr("data-dgmo-clock-status", "").attr("x", textX).attr("y", yy).attr("fill", stCol).attr("font-family", FONT_FAMILY).attr("font-size", 14).attr("font-weight", 600).text(ellipsize(status.text, 14, textMax));
     } else if (ln.kind === "sun" && sun) {
       drawSunMoon(g, iconX, yy - 5, up, sw, 1.25);
@@ -74890,6 +75225,9 @@ function drawFixedGlyph(parent, cx, cy, color) {
     g.append("line").attr("x1", -4 * Math.cos(a)).attr("y1", -4 * Math.sin(a)).attr("x2", 4 * Math.cos(a)).attr("y2", 4 * Math.sin(a)).attr("stroke", color).attr("stroke-width", 1.2).attr("stroke-linecap", "round");
   }
 }
+function drawStatusClock(parent, cx, cy, r, color) {
+  parent.append("circle").attr("data-dgmo-clock-status-icon", "").attr("cx", cx).attr("cy", cy).attr("r", r).attr("fill", color);
+}
 function bakeAnchors(g, entry, parsed, sun, sw) {
   g.attr("data-dgmo-clock", "").attr("data-dgmo-clock-zone", entry.zone).attr("data-dgmo-clock-face", parsed.face).attr("data-dgmo-clock-hours12", parsed.hours12 ? "1" : "0").attr("data-dgmo-clock-sun", sun ? "1" : "0").attr("data-dgmo-clock-c-day", sw.day).attr("data-dgmo-clock-c-night", sw.night).attr("data-dgmo-clock-c-day-soft", sw.dayTint).attr("data-dgmo-clock-c-night-soft", sw.nightTint).attr("data-dgmo-clock-c-ok", sw.ok).attr("data-dgmo-clock-c-soon", sw.soon).attr("data-dgmo-clock-c-off", sw.off).attr("data-dgmo-clock-c-ok-soft", sw.okSoft).attr("data-dgmo-clock-c-soon-soft", sw.soonSoft).attr("data-dgmo-clock-c-off-soft", sw.offSoft);
   if (entry.lat !== null) g.attr("data-dgmo-clock-lat", entry.lat);
@@ -74936,19 +75274,26 @@ function drawColumns(body, parsed, now, top, geom, col) {
       palette: col.palette,
       cardFill
     });
+    const fm = zoneFillMode(entry, parsed, col);
     const timeColor = auto?.solid ?? text;
-    const faceFill = auto ? mix(auto.solid, cardFill, 20) : stTint;
+    const faceFill = auto && fm === "outline" ? col.baseBg : auto && fm === "solid" ? auto.solid : auto ? mix(auto.solid, cardFill, 20) : stTint;
     const ringColor = auto?.solid ?? line22;
-    const accentColor = auto?.solid ?? stColor;
+    const handInk = auto && fm === "solid" ? contrastText(
+      auto.solid,
+      col.palette.textOnFillLight,
+      col.palette.textOnFillDark
+    ) : text;
+    const accentColor = auto && fm === "solid" ? handInk : auto?.solid ?? stColor;
     const g = body.append("g").attr("data-line-number", entry.lineNumber);
     bakeAnchors(g, entry, parsed, sun, sw);
     if (auto)
       tints.push(
-        g.append("rect").attr("data-dgmo-clock-lane", "").attr("x", x0).attr("y", top).attr("width", colW).attr("fill", auto.laneTint)
+        g.append("rect").attr("data-dgmo-clock-lane", "").attr("x", x0).attr("y", top).attr("width", colW).attr("fill", fm === "outline" ? col.baseBg : auto.laneTint)
       );
     if (auto) {
       g.attr("data-dgmo-clock-auto-solid", auto.solid).attr("data-dgmo-clock-auto-face", faceFill).attr("data-dgmo-clock-auto-mode", parsed.colorBy).attr("data-dgmo-clock-cardfill", cardFill);
     }
+    if (fm) g.attr("data-dgmo-clock-fill-mode", fm);
     let cy = top + (parsed.face === "analog" ? 22 : 36);
     const innerW = colW - 16;
     if (parsed.face === "analog") {
@@ -74964,8 +75309,8 @@ function drawColumns(body, parsed, now, top, geom, col) {
         fg.append("line").attr("x1", 50 + 39 * Math.sin(a)).attr("y1", 50 - 39 * Math.cos(a)).attr("x2", 50 + 46 * Math.sin(a)).attr("y2", 50 - 46 * Math.cos(a)).attr("stroke", tick).attr("stroke-width", 1.8);
       }
       const ang = handAngles(parts.h, parts.m, parts.s);
-      fg.append("line").attr("data-dgmo-clock-hand", "h").attr("x1", 50).attr("y1", 50).attr("x2", 50).attr("y2", 28).attr("stroke", text).attr("stroke-width", 4).attr("stroke-linecap", "round").attr("transform", `rotate(${ang.hour} 50 50)`);
-      fg.append("line").attr("data-dgmo-clock-hand", "m").attr("x1", 50).attr("y1", 50).attr("x2", 50).attr("y2", 17).attr("stroke", text).attr("stroke-width", 2.6).attr("stroke-linecap", "round").attr("transform", `rotate(${ang.minute} 50 50)`);
+      fg.append("line").attr("data-dgmo-clock-hand", "h").attr("x1", 50).attr("y1", 50).attr("x2", 50).attr("y2", 28).attr("stroke", handInk).attr("stroke-width", 4).attr("stroke-linecap", "round").attr("transform", `rotate(${ang.hour} 50 50)`);
+      fg.append("line").attr("data-dgmo-clock-hand", "m").attr("x1", 50).attr("y1", 50).attr("x2", 50).attr("y2", 17).attr("stroke", handInk).attr("stroke-width", 2.6).attr("stroke-linecap", "round").attr("transform", `rotate(${ang.minute} 50 50)`);
       fg.append("line").attr("data-dgmo-clock-hand", "s").attr("x1", 50).attr("y1", 55).attr("x2", 50).attr("y2", 14).attr("stroke", accentColor).attr("stroke-width", 1.3).attr("stroke-linecap", "round").attr("transform", `rotate(${ang.second} 50 50)`);
       fg.append("circle").attr("data-dgmo-clock-center", "").attr("cx", 50).attr("cy", 50).attr("r", 2.6).attr("fill", accentColor);
       cy += size + 6;
@@ -75025,10 +75370,7 @@ function drawColumns(body, parsed, now, top, geom, col) {
             g.append("text").attr("x", textX).attr("y", yy).attr("fill", muted).attr("font-family", FONT_FAMILY).attr("font-size", 12).text(ellipsize(entry.place, 12, tmax));
           } else if (kind === "avail" && status) {
             const stCol = status.cls === "ok" ? sw.ok : status.cls === "soon" ? sw.soon : sw.off;
-            const dot = g.append("circle").attr("data-dgmo-clock-status-dot", "").attr("cx", iconX).attr("cy", yy - 4).attr("r", 4);
-            if (status.cls === "off")
-              dot.attr("fill", "none").attr("stroke", stCol).attr("stroke-width", 1.4);
-            else dot.attr("fill", stCol).attr("stroke", "none");
+            drawStatusClock(g, iconX, yy - 4, 4, stCol);
             g.append("text").attr("data-dgmo-clock-status", "").attr("x", textX).attr("y", yy).attr("fill", stCol).attr("font-family", FONT_FAMILY).attr("font-size", 12).attr("font-weight", 600).text(ellipsize(status.text, 12, tmax));
           } else if (kind === "sun" && sun) {
             drawSunMoon(g, iconX, yy - 4, up, sw, 1);
@@ -75676,7 +76018,7 @@ function clip3(s, maxW, fs) {
   }
   return lo <= 0 ? "" : s.slice(0, lo) + "\u2026";
 }
-function paintForAccent(palette, isDark, accent) {
+function paintForAccent(palette, isDark, accent, fillMode) {
   const base = themeBaseBg(palette, isDark);
   return {
     accent,
@@ -75687,12 +76029,14 @@ function paintForAccent(palette, isDark, accent) {
     hair: mix(palette.text, base, 34),
     wire: mix(palette.text, base, 30),
     track: mix(palette.border, base, 55),
-    tint: shapeFill(palette, accent, isDark)
+    // §1.9 fill family rides through shapeFill: solid ⇒ raw accent,
+    // outline ⇒ theme base bg (accent stays on the stroke), absent ⇒ 25% tint.
+    tint: shapeFill(palette, accent, isDark, { mode: fillMode })
   };
 }
-function paintFor(palette, isDark, sideColor) {
+function paintFor(palette, isDark, sideColor, fillMode) {
   const accent = sideColor && resolveColor(sideColor, palette) || sideColor || getSeriesColors(palette)[0];
-  return paintForAccent(palette, isDark, accent);
+  return paintForAccent(palette, isDark, accent, fillMode);
 }
 function resolveBracketLegend(parsed, palette) {
   const activeTag = parsed.activeTag;
@@ -75788,7 +76132,8 @@ function renderBracket(container, parsed, palette, isDark, exportDims) {
     });
   }
   const baseAccent = parsed.accentColor ?? resolveColor("blue", palette) ?? getSeriesColors(palette)[0];
-  const basePaint = paintForAccent(palette, isDark, baseAccent);
+  const fillMode = parsed.fillMode;
+  const basePaint = paintForAccent(palette, isDark, baseAccent, fillMode);
   const sideColorByLabel = /* @__PURE__ */ new Map();
   for (const s of parsed.sides) sideColorByLabel.set(s.label, s.color);
   const sideBarH = layout.sideLabels.length ? 30 : 0;
@@ -75801,11 +76146,20 @@ function renderBracket(container, parsed, palette, isDark, exportDims) {
     );
     const top = covered ? bandTop : 2;
     const c = resolveColor(col.color, palette) ?? col.color;
-    root.append("rect").attr("x", col.x - BOX_W / 2 - 10).attr("y", top).attr("width", BOX_W + 20).attr("height", Math.max(0, layout.height - top)).attr("rx", 10).attr("fill", mix(c, palette.bg, isDark ? 12 : 8));
+    root.append("rect").attr("x", col.x - BOX_W / 2 - 10).attr("y", top).attr("width", BOX_W + 20).attr("height", Math.max(0, layout.height - top)).attr("rx", 10).attr(
+      "fill",
+      fillMode === "outline" ? themeBaseBg(palette, isDark) : mix(c, palette.bg, isDark ? 12 : 8)
+    ).call((sel) => {
+      if (fillMode === "outline")
+        sel.attr("stroke", mix(c, palette.bg, 35)).attr("stroke-width", 1);
+    });
   }
   for (const s of layout.sideLabels) {
     const c = s.color ? resolveColor(s.color, palette) ?? s.color : basePaint.accent;
-    root.append("rect").attr("x", s.x0 - 8).attr("y", 2).attr("width", s.x1 - s.x0 + 16).attr("height", 24).attr("rx", 8).attr("fill", mix(c, palette.bg, isDark ? 20 : 14)).attr("stroke", mix(c, palette.bg, 55)).attr("stroke-width", 1);
+    root.append("rect").attr("x", s.x0 - 8).attr("y", 2).attr("width", s.x1 - s.x0 + 16).attr("height", 24).attr("rx", 8).attr(
+      "fill",
+      fillMode === "outline" ? themeBaseBg(palette, isDark) : mix(c, palette.bg, isDark ? 20 : 14)
+    ).attr("stroke", fillMode === "outline" ? c : mix(c, palette.bg, 55)).attr("stroke-width", 1);
     root.append("text").attr("x", (s.x0 + s.x1) / 2).attr("y", 18).attr("text-anchor", "middle").attr("font-size", 13).attr("font-weight", 800).attr("letter-spacing", 0.3).attr("fill", c).text(clip3(s.label, s.x1 - s.x0, 13));
   }
   for (const col of layout.columns) {
@@ -75820,7 +76174,7 @@ function renderBracket(container, parsed, palette, isDark, exportDims) {
     drawConnector(root, m, m.botFrom, m.y + HALF_SPAN2, basePaint);
   }
   for (const m of layout.matches) {
-    const sidePaint = m.side && sideColorByLabel.get(m.side) ? paintFor(palette, isDark, sideColorByLabel.get(m.side)) : basePaint;
+    const sidePaint = m.side && sideColorByLabel.get(m.side) ? paintFor(palette, isDark, sideColorByLabel.get(m.side), fillMode) : basePaint;
     const topSeed = seedByName.get(m.top ?? "") ?? null;
     const botSeed = seedByName.get(m.bot ?? "") ?? null;
     let homeName = m.home;
@@ -75858,7 +76212,8 @@ function renderBracket(container, parsed, palette, isDark, exportDims) {
       palette,
       isDark,
       m,
-      activeKey
+      activeKey,
+      fillMode
     );
     drawBox(
       root,
@@ -75870,7 +76225,8 @@ function renderBracket(container, parsed, palette, isDark, exportDims) {
       palette,
       isDark,
       m,
-      activeKey
+      activeKey,
+      fillMode
     );
     if (isUpset) drawUpset(root, m, sidePaint);
     if (m.commentary.length) drawCommentary(root, m, palette);
@@ -75889,10 +76245,10 @@ function drawConnector(g, m, from, toCy, paint) {
   const d = from.yA !== from.yB ? `M ${childEdge} ${from.yA} H ${midX} M ${childEdge} ${from.yB} H ${midX} M ${midX} ${vLo} V ${vHi} M ${midX} ${toCy} H ${parentEdge}` : `M ${childEdge} ${from.y} H ${midX} V ${toCy} H ${parentEdge}`;
   g.append("path").attr("d", d).attr("fill", "none").attr("stroke", paint.wire).attr("stroke-width", 1.5);
 }
-function drawBox(g, cx, cy, name, info, sidePaint, palette, isDark, m, activeKey) {
+function drawBox(g, cx, cy, name, info, sidePaint, palette, isDark, m, activeKey, fillMode) {
   const x = cx - BOX_W / 2;
   const y = cy - BOX_H / 2;
-  const paint = info.tagColor ? paintForAccent(palette, isDark, info.tagColor) : sidePaint;
+  const paint = info.tagColor ? paintForAccent(palette, isDark, info.tagColor, fillMode) : sidePaint;
   const cell = g.append("g").attr("class", "dgmo-bracket-box");
   if (m.lineNumber !== null) cell.attr("data-line-number", m.lineNumber);
   if (activeKey && info.tagValue)
@@ -75926,22 +76282,29 @@ function drawBox(g, cx, cy, name, info, sidePaint, palette, isDark, m, activeKey
   } else if (info.pending) {
     stroke2 = mix(paint.accent, paint.hair, 50);
   }
+  const onSolid = fillMode === "solid" && (info.isChampion || info.isWinner) ? contrastText(
+    paint.tint,
+    palette.textOnFillLight,
+    palette.textOnFillDark
+  ) : null;
+  if (onSolid) textColor = onSolid;
+  const gutterColor = onSolid ?? paint.muted;
   const rect2 = cell.append("rect").attr("x", x).attr("y", y).attr("width", BOX_W).attr("height", BOX_H).attr("rx", 6).attr("fill", fill2).attr("stroke", stroke2).attr("stroke-width", sw);
   if (dash) rect2.attr("stroke-dasharray", dash);
   let leftPad = 11;
   if (info.seed !== null) {
-    cell.append("text").attr("x", x + 9).attr("y", cy + 4).attr("text-anchor", "start").attr("font-size", 10).attr("font-weight", 700).attr("fill", paint.muted).text(info.seed);
+    cell.append("text").attr("x", x + 9).attr("y", cy + 4).attr("text-anchor", "start").attr("font-size", 10).attr("font-weight", 700).attr("fill", gutterColor).text(info.seed);
     leftPad = 9 + Math.max(12, measureText(String(info.seed), 10)) + 6;
   }
   let rightPad = 11;
   if (info.score) rightPad += 20;
   if (info.isHome) {
-    drawHome(cell, x + BOX_W - rightPad - 6, cy, paint.muted);
+    drawHome(cell, x + BOX_W - rightPad - 6, cy, gutterColor);
     rightPad += 16;
   }
   cell.append("text").attr("x", x + leftPad).attr("y", cy + 4).attr("text-anchor", "start").attr("font-size", 12.5).attr("font-weight", weight).attr("fill", textColor).text(clip3(isTBD ? "TBD" : name, BOX_W - leftPad - rightPad, 12.5));
   if (info.score) {
-    cell.append("text").attr("x", x + BOX_W - 11).attr("y", cy + 4).attr("text-anchor", "end").attr("font-size", 12).attr("font-weight", info.isWinner ? 700 : 500).attr("fill", info.isWinner ? textColor : paint.muted).text(info.score);
+    cell.append("text").attr("x", x + BOX_W - 11).attr("y", cy + 4).attr("text-anchor", "end").attr("font-size", 12).attr("font-weight", info.isWinner ? 700 : 500).attr("fill", info.isWinner ? textColor : gutterColor).text(info.score);
   }
 }
 function drawHome(cell, hx, cy, color) {
@@ -76089,7 +76452,7 @@ function renderRaci(container, parsed, palette, isDark, handlers, exportDims) {
   if (width <= 0 || height <= 0) return;
   const tasksAll = [...allTasks(parsed)];
   if (tasksAll.length === 0 && parsed.phases.length === 0) return;
-  const solid = parsed.options["solid-fill"] === "on";
+  const fillMode = fillModeFromOptions(parsed.options);
   const surfaceBg = themeBaseBg(palette, isDark);
   const roleCount = Math.max(1, parsed.roles.length);
   const idealWidth = roleCount * ROLE_COL_MAX + TASK_LABEL_MAX + 2 * H_MARGIN2;
@@ -76243,7 +76606,7 @@ function renderRaci(container, parsed, palette, isDark, handlers, exportDims) {
       legendChipW,
       palette,
       surfaceBg,
-      solid,
+      fillMode,
       onMarkerDragStart,
       sLegendChipGap,
       sLegendHeight,
@@ -76263,7 +76626,14 @@ function renderRaci(container, parsed, palette, isDark, handlers, exportDims) {
       if (taskIdx < 0) return;
       const yTop = rowYs[i];
       const rh = taskRowContent.get(row.task.id)?.rowHeight ?? sRowHeight;
-      bandsG.append("rect").attr("class", "raci-row-band").attr("data-task-id", row.task.id).attr("x", sHMargin).attr("y", yTop + 2).attr("width", innerWidth).attr("height", rh - 4).attr("rx", 6).attr("fill", mix(autoAccent(taskIdx, palette), surfaceBg, 12));
+      const bandAccent = autoAccent(taskIdx, palette);
+      const band = bandsG.append("rect").attr("class", "raci-row-band").attr("data-task-id", row.task.id).attr("x", sHMargin).attr("y", yTop + 2).attr("width", innerWidth).attr("height", rh - 4).attr("rx", 6).attr(
+        "fill",
+        fillMode === "outline" ? surfaceBg : mix(bandAccent, surfaceBg, 12)
+      );
+      if (fillMode === "outline") {
+        band.attr("stroke", bandAccent).attr("stroke-width", 1);
+      }
     });
   }
   const columnsG = svg.append("g").attr("class", "raci-columns");
@@ -76271,14 +76641,21 @@ function renderRaci(container, parsed, palette, isDark, handlers, exportDims) {
     const cx = roleX(i) + sColumnInset;
     const cw = roleColW - 2 * sColumnInset;
     const roleColor = parsed.roleColors[i] ?? autoAccent(i, palette);
-    const bodyFill = mix(roleColor, themeBaseBg(palette, isDark), 16);
-    const headerFill = mix(roleColor, themeBaseBg(palette, isDark), 30);
+    const outline = fillMode === "outline";
+    const bodyFill = outline ? surfaceBg : mix(roleColor, themeBaseBg(palette, isDark), 16);
+    const headerFill = outline ? surfaceBg : mix(roleColor, themeBaseBg(palette, isDark), 30);
     const colG = columnsG.append("g").attr("class", "raci-column").attr("data-role-id", roleId);
-    colG.append("rect").attr("class", "raci-column-body").attr("x", cx).attr("y", headerY).attr("width", cw).attr("height", colTotalHeight).attr("rx", sColumnRadius).attr("fill", bodyFill);
-    colG.append("path").attr("class", "raci-column-header").attr(
+    const bodyRect = colG.append("rect").attr("class", "raci-column-body").attr("x", cx).attr("y", headerY).attr("width", cw).attr("height", colTotalHeight).attr("rx", sColumnRadius).attr("fill", bodyFill);
+    if (outline) {
+      bodyRect.attr("stroke", roleColor).attr("stroke-width", 1);
+    }
+    const headerPath = colG.append("path").attr("class", "raci-column-header").attr(
       "d",
       topRoundedRectPath(cx, headerY, cw, sHeaderHeight, sColumnRadius)
     ).attr("fill", headerFill);
+    if (outline) {
+      headerPath.attr("stroke", roleColor).attr("stroke-width", 1);
+    }
     const cxText = roleX(i) + roleColW / 2;
     colG.append("text").attr("class", "raci-column-label").attr("x", cxText).attr("y", headerY + sHeaderHeight / 2).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-size", sRoleHeaderFont).attr("font-weight", 600).attr("fill", palette.text).text(
       truncateText(
@@ -76331,7 +76708,7 @@ function renderRaci(container, parsed, palette, isDark, handlers, exportDims) {
         roleColW,
         parsed.variant,
         surfaceBg,
-        solid,
+        fillMode,
         chartCanShowSummaries,
         sPhaseHeight,
         sPhaseFont,
@@ -76350,7 +76727,7 @@ function renderRaci(container, parsed, palette, isDark, handlers, exportDims) {
         roleColW,
         palette,
         surfaceBg,
-        solid,
+        fillMode,
         taskDiagnostics,
         hasAnyDiagnostic,
         taskRowContent.get(row.task.id),
@@ -76413,7 +76790,7 @@ function setupColumnHover(svg) {
   svg.on("mouseover", (event) => set(findRole(event.target)));
   svg.on("mouseleave", () => set(null));
 }
-function renderLegend4(svg, markers, variant, x, y, mode, chipW, palette, surfaceBg, solid, _onMarkerDragStart, sLegendChipGap, sLegendHeight, sNodeRadius, sNodeStrokeWidth, sLegendLetterFont, sLegendLabelFont) {
+function renderLegend4(svg, markers, variant, x, y, mode, chipW, palette, surfaceBg, fillMode, _onMarkerDragStart, sLegendChipGap, sLegendHeight, sNodeRadius, sNodeStrokeWidth, sLegendLetterFont, sLegendLabelFont) {
   if (markers.length === 0) return;
   const labels = MARKER_LABELS[variant];
   const legendG = svg.append("g").attr("class", "raci-legend").attr("aria-label", `${variant.toUpperCase()} marker legend`);
@@ -76423,12 +76800,12 @@ function renderLegend4(svg, markers, variant, x, y, mode, chipW, palette, surfac
     const labelText = labels[marker];
     const chipG = legendG.append("g").attr("class", "raci-legend-chip").attr("data-marker", marker).style("cursor", "grab");
     if (mode === "letters") {
-      const fill3 = solid ? rawColor : mix(rawColor, surfaceBg, TINT_PCT);
-      const stroke3 = solid ? mix(rawColor, surfaceBg, 70) : rawColor;
+      const fill3 = fillMode === "solid" ? rawColor : fillMode === "outline" ? surfaceBg : mix(rawColor, surfaceBg, TINT_PCT);
+      const stroke3 = fillMode === "solid" ? mix(rawColor, surfaceBg, 70) : rawColor;
       chipG.append("rect").attr("x", cx).attr("y", y).attr("width", chipW).attr("height", sLegendHeight).attr("rx", sNodeRadius).attr("fill", fill3).attr("stroke", stroke3).attr("stroke-width", sNodeStrokeWidth);
       chipG.append("text").attr("x", cx + chipW / 2).attr("y", y + sLegendHeight / 2).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-size", sLegendLetterFont).attr("font-weight", 700).attr(
         "fill",
-        solid ? contrastText(
+        fillMode === "solid" ? contrastText(
           fill3,
           palette.textOnFillLight,
           palette.textOnFillDark
@@ -76436,16 +76813,32 @@ function renderLegend4(svg, markers, variant, x, y, mode, chipW, palette, surfac
       ).text(marker);
       return;
     }
-    const fill2 = solid ? rawColor : mix(rawColor, surfaceBg, TINT_PCT);
-    const stroke2 = mix(rawColor, surfaceBg, 70);
+    let fill2;
+    if (fillMode === "outline") {
+      const gradId = `raci-legend-grad-${marker}`;
+      let defs = svg.select("defs");
+      if (defs.empty()) defs = svg.append("defs");
+      if (defs.select(`#${gradId}`).empty()) {
+        const grad = defs.append("linearGradient").attr("id", gradId).attr("x1", "0%").attr("y1", "0%").attr("x2", "0%").attr("y2", "100%");
+        grad.append("stop").attr("offset", "0%").attr("stop-color", mix(rawColor, surfaceBg, 38));
+        grad.append("stop").attr("offset", "100%").attr("stop-color", mix(rawColor, surfaceBg, 8));
+      }
+      fill2 = `url(#${gradId})`;
+    } else {
+      fill2 = fillMode === "solid" ? rawColor : mix(rawColor, surfaceBg, TINT_PCT);
+    }
+    const stroke2 = fillMode === "outline" ? rawColor : mix(rawColor, surfaceBg, 70);
     chipG.append("rect").attr("x", cx).attr("y", y).attr("width", chipW).attr("height", sLegendHeight).attr("rx", sNodeRadius).attr("fill", fill2).attr("stroke", stroke2).attr("stroke-width", sNodeStrokeWidth);
     const slabPad = 4;
     const slabW = 24;
-    const slabFill = solid ? mix(rawColor, surfaceBg, 70) : mix(rawColor, surfaceBg, 55);
-    chipG.append("rect").attr("x", cx + slabPad).attr("y", y + slabPad).attr("width", slabW).attr("height", sLegendHeight - 2 * slabPad).attr("rx", 4).attr("fill", slabFill);
+    const slabFill = fillMode === "solid" ? mix(rawColor, surfaceBg, 70) : fillMode === "outline" ? surfaceBg : mix(rawColor, surfaceBg, 55);
+    const slabRect = chipG.append("rect").attr("x", cx + slabPad).attr("y", y + slabPad).attr("width", slabW).attr("height", sLegendHeight - 2 * slabPad).attr("rx", 4).attr("fill", slabFill);
+    if (fillMode === "outline") {
+      slabRect.attr("stroke", rawColor).attr("stroke-width", 1);
+    }
     chipG.append("text").attr("x", cx + slabPad + slabW / 2).attr("y", y + sLegendHeight / 2).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-size", sLegendLetterFont).attr("font-weight", 700).attr(
       "fill",
-      solid ? contrastText(
+      fillMode === "solid" ? contrastText(
         slabFill,
         palette.textOnFillLight,
         palette.textOnFillDark
@@ -76463,10 +76856,16 @@ function renderLegend4(svg, markers, variant, x, y, mode, chipW, palette, surfac
 function renderRaciForExport(container, parsed, palette, isDark, exportDims) {
   renderRaci(container, parsed, palette, isDark, {}, exportDims);
 }
-function renderPhaseBar(svg, phase, x, y, width, palette, collapsed, autoColor, roles, roleX, roleColW, variant, surfaceBg, solid, showSummary, sPhaseHeight, sPhaseFont, sColumnInset, sNodeRadius) {
+function renderPhaseBar(svg, phase, x, y, width, palette, collapsed, autoColor, roles, roleX, roleColW, variant, surfaceBg, fillMode, showSummary, sPhaseHeight, sPhaseFont, sColumnInset, sNodeRadius) {
   const phaseG = svg.append("g").attr("class", "raci-phase").attr("data-section", `phase-${phase.id}`).attr("data-section-toggle", "").attr("data-line-number", String(phase.lineNumber)).attr("data-phase-id", phase.id).attr("data-collapsed", collapsed ? "1" : "0").style("cursor", "pointer");
-  const phaseFill = mix(phase.color ?? autoColor, palette.bg, 30);
-  phaseG.append("rect").attr("x", x).attr("y", y + 4).attr("width", width).attr("height", sPhaseHeight - 8).attr("fill", phaseFill).attr("rx", 4);
+  const phaseColor = phase.color ?? autoColor;
+  const phaseRect = phaseG.append("rect").attr("x", x).attr("y", y + 4).attr("width", width).attr("height", sPhaseHeight - 8).attr(
+    "fill",
+    fillMode === "outline" ? surfaceBg : mix(phaseColor, palette.bg, 30)
+  ).attr("rx", 4);
+  if (fillMode === "outline") {
+    phaseRect.attr("stroke", phaseColor).attr("stroke-width", 1.25);
+  }
   const chevX = x + 12;
   const chevY = y + sPhaseHeight / 2;
   phaseG.append("text").attr("x", chevX).attr("y", chevY).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-family", FONT_FAMILY).attr("font-size", 9).attr("fill", palette.text).attr("opacity", 0.6).text(collapsed ? "\u25B6" : "\u25BC");
@@ -76499,13 +76898,13 @@ function renderPhaseBar(svg, phase, x, y, width, palette, collapsed, autoColor,
       ordered.forEach((marker, i) => {
         const cx = startX + i * (sliceW + SLICE_GAP);
         const rawColor = markerColor(marker, palette);
-        const fill2 = solid ? rawColor : mix(rawColor, surfaceBg, TINT_PCT);
-        const stroke2 = solid ? mix(rawColor, surfaceBg, 70) : rawColor;
+        const fill2 = fillMode === "solid" ? rawColor : fillMode === "outline" ? surfaceBg : mix(rawColor, surfaceBg, TINT_PCT);
+        const stroke2 = fillMode === "solid" ? mix(rawColor, surfaceBg, 70) : rawColor;
         const chipG = phaseG.append("g").attr("class", "raci-phase-summary");
         chipG.append("rect").attr("x", cx).attr("y", summaryY).attr("width", sliceW).attr("height", SUMMARY_CHIP_H).attr("rx", sNodeRadius).attr("fill", fill2).attr("stroke", stroke2).attr("stroke-width", 1.25);
         chipG.append("text").attr("x", cx + sliceW / 2).attr("y", summaryY + SUMMARY_CHIP_H / 2).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-size", SUMMARY_LETTER_FONT).attr("font-weight", 700).attr(
           "fill",
-          solid ? contrastText(
+          fillMode === "solid" ? contrastText(
             fill2,
             palette.textOnFillLight,
             palette.textOnFillDark
@@ -76515,7 +76914,7 @@ function renderPhaseBar(svg, phase, x, y, width, palette, collapsed, autoColor,
     });
   }
 }
-function renderTaskRow(svg, task, parsed, x, y, labelW, roleX, roleColW, palette, surfaceBg, solid, taskDiagnostics, _hasAnyDiagnostic, rowContent, onClickLine, _onMarkerDragStart, sLabelFont, sDescFont, sCellPad, sRowHeight, sColumnInset, sNodeRadius, sNodeStrokeWidth, sMarkerFont, sLegendLabelFont, sStackTopGap, sViolationLineHeight) {
+function renderTaskRow(svg, task, parsed, x, y, labelW, roleX, roleColW, palette, surfaceBg, fillMode, taskDiagnostics, _hasAnyDiagnostic, rowContent, onClickLine, _onMarkerDragStart, sLabelFont, sDescFont, sCellPad, sRowHeight, sColumnInset, sNodeRadius, sNodeStrokeWidth, sMarkerFont, sLegendLabelFont, sStackTopGap, sViolationLineHeight) {
   const rowG = svg.append("g").attr("class", "raci-task-row").attr("data-task-id", task.id).attr("data-line-number", String(task.lineNumber));
   const labelX = x + 8;
   const labelMaxW = labelW - 16;
@@ -76594,7 +76993,7 @@ function renderTaskRow(svg, task, parsed, x, y, labelW, roleX, roleColW, palette
     const variantLabels = MARKER_LABELS[parsed.variant];
     markers.forEach((m, i) => {
       const rawColor = markerColor(m, palette);
-      const fill2 = solid ? rawColor : mix(rawColor, surfaceBg, TINT_PCT);
+      const fill2 = fillMode === "solid" ? rawColor : fillMode === "outline" ? surfaceBg : mix(rawColor, surfaceBg, TINT_PCT);
       const stroke2 = rawColor;
       const sliceX = cx + i * (sliceW + SLICE_GAP);
       const sliceG = cellG.append("g").attr("class", "raci-marker-slice").attr("data-marker", m).style("cursor", "grab");
@@ -76606,7 +77005,7 @@ function renderTaskRow(svg, task, parsed, x, y, labelW, roleX, roleColW, palette
       const textFont = showFullLabel ? sLegendLabelFont : sMarkerFont;
       sliceG.append("text").attr("x", sliceX + sliceW / 2).attr("y", cy + ch / 2).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-size", textFont).attr("font-weight", MARKER_FONT_WEIGHT).attr(
         "fill",
-        solid ? contrastText(
+        fillMode === "solid" ? contrastText(
           fill2,
           palette.textOnFillLight,
           palette.textOnFillDark
@@ -76673,6 +77072,7 @@ var MARKER_LABELS, TITLE_AREA_HEIGHT4, H_MARGIN2, V_MARGIN3, LEGEND_HEIGHT2, LEG
 var init_renderer32 = __esm({
   "src/raci/renderer.ts"() {
     "use strict";
+    init_parsing();
     init_fonts();
     init_title_constants();
     init_color_utils();
@@ -76984,8 +77384,8 @@ function wrapLabelWords(words, maxWidth, fontSize) {
   if (current) lines.push(current);
   return lines;
 }
-function renderRectParticipant(g, palette, isDark, color, solid, w = W, h = H) {
-  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 renderRectParticipant(g, palette, isDark, color, fillMode, w = W, h = H) {
+  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, fillMode)).attr("stroke", stroke(palette, color)).attr("stroke-width", SW);
 }
 function renderActorParticipant(g, palette, color, h = H) {
   const sc = h / H;
@@ -77006,11 +77406,11 @@ function renderActorParticipant(g, palette, color, h = H) {
   g.append("line").attr("x1", cx).attr("y1", bodyBottomY).attr("x2", cx - legSpan).attr("y2", legY).attr("stroke", s).attr("stroke-width", actorSW);
   g.append("line").attr("x1", cx).attr("y1", bodyBottomY).attr("x2", cx + legSpan).attr("y2", legY).attr("stroke", s).attr("stroke-width", actorSW);
 }
-function renderDatabaseParticipant(g, palette, isDark, color, solid, w = W, h = H) {
+function renderDatabaseParticipant(g, palette, isDark, color, fillMode, w = W, h = H) {
   const ry = 7;
   const topY = ry;
   const bodyH = h - ry * 2;
-  const f = fill(palette, isDark, color, solid);
+  const f = fill(palette, isDark, color, fillMode);
   const s = stroke(palette, color);
   g.append("ellipse").attr("cx", 0).attr("cy", topY + bodyH).attr("rx", w / 2).attr("ry", ry).attr("fill", f).attr("stroke", s).attr("stroke-width", SW);
   g.append("rect").attr("class", "participant-body").attr("x", -w / 2).attr("y", topY).attr("width", w).attr("height", bodyH).attr("fill", f).attr("stroke", "none");
@@ -77018,11 +77418,11 @@ function renderDatabaseParticipant(g, palette, isDark, color, solid, w = W, h =
   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);
   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);
 }
-function renderQueueParticipant(g, palette, isDark, color, solid, w = W, h = H) {
+function renderQueueParticipant(g, palette, isDark, color, fillMode, w = W, h = H) {
   const rx = 10;
   const leftX = -w / 2 + rx;
   const bodyW = w - rx * 2;
-  const f = fill(palette, isDark, color, solid);
+  const f = fill(palette, isDark, color, fillMode);
   const s = stroke(palette, color);
   g.append("ellipse").attr("cx", leftX + bodyW).attr("cy", h / 2).attr("rx", rx).attr("ry", h / 2).attr("fill", f).attr("stroke", s).attr("stroke-width", SW);
   g.append("rect").attr("class", "participant-body").attr("x", leftX).attr("y", 0).attr("width", bodyW).attr("height", h).attr("fill", f).attr("stroke", "none");
@@ -77030,11 +77430,11 @@ function renderQueueParticipant(g, palette, isDark, color, solid, w = W, h = H)
   g.append("line").attr("x1", leftX).attr("y1", h).attr("x2", leftX + bodyW).attr("y2", h).attr("stroke", s).attr("stroke-width", SW);
   g.append("ellipse").attr("cx", leftX).attr("cy", h / 2).attr("rx", rx).attr("ry", h / 2).attr("fill", f).attr("stroke", s).attr("stroke-width", SW);
 }
-function renderCacheParticipant(g, palette, isDark, color, solid, w = W, h = H) {
+function renderCacheParticipant(g, palette, isDark, color, fillMode, w = W, h = H) {
   const ry = 7;
   const topY = ry;
   const bodyH = h - ry * 2;
-  const f = fill(palette, isDark, color, solid);
+  const f = fill(palette, isDark, color, fillMode);
   const s = stroke(palette, color);
   const dash = "4 3";
   g.append("ellipse").attr("cx", 0).attr("cy", topY + bodyH).attr("rx", w / 2).attr("ry", ry).attr("fill", f).attr("stroke", s).attr("stroke-width", SW).attr("stroke-dasharray", dash);
@@ -77277,7 +77677,7 @@ function applyGroupOrdering(participants, groups, messages = []) {
 function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateToLine, options) {
   d3Selection39.select(container).selectAll("*").remove();
   const { title, options: parsedOptions } = parsed;
-  const solid = parsedOptions["solid-fill"] === "on";
+  const fillMode = fillModeFromOptions(parsedOptions);
   const effectiveCollapsedGroups = options?.collapsedGroups ? new Set(options.collapsedGroups) : new Set(
     parsed.groups.filter((g) => g.collapsed).map((g) => g.lineNumber)
   );
@@ -77837,7 +78237,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
   }
   let rightMargin = Math.max(rightProjection + 10, sGap / 2);
   let leftMargin = sGap / 2;
-  const diagramWidth = participants.length * sGap;
+  const diagramWidth = Math.max(0, participants.length - 1) * sGap;
   let totalWidth = Math.max(
     leftMargin + diagramWidth + rightMargin,
     sBoxW + 40
@@ -78018,7 +78418,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
       isDark,
       effectiveTagColor,
       pTagAttr,
-      solid,
+      fillMode,
       sBoxW,
       sBoxH,
       sLabelTextWidth,
@@ -78242,7 +78642,9 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     const actTagColor = getTagColor(actTagValue);
     const actBaseColor = actTagColor || palette.primary;
     svg.append("rect").attr("x", x).attr("y", y1).attr("width", sActivationWidth).attr("height", y2 - y1).attr("fill", themeBaseBg(palette, isDark));
-    const actFill = shapeFill(palette, actBaseColor, isDark, { solid });
+    const actFill = shapeFill(palette, actBaseColor, isDark, {
+      mode: fillMode
+    });
     const actRect = svg.append("rect").attr("x", x).attr("y", y1).attr("width", sActivationWidth).attr("height", y2 - y1).attr("fill", actFill).attr("stroke", actBaseColor).attr("stroke-width", 1).attr("stroke-opacity", 0.5).attr("data-participant-id", act.participantId).attr("data-msg-lines", coveredLines.join(",")).attr("data-line-number", coveredLines[0] ?? "").attr("class", "activation");
     if (tagKey && actTagValue) {
       actRect.attr(`data-tag-${tagKey}`, actTagValue.toLowerCase());
@@ -78480,7 +78882,7 @@ function buildNoteMessageMap(elements) {
   walk(elements);
   return map;
 }
-function renderParticipant(svg, participant, cx, cy, palette, isDark, color, tagAttr, solid, boxW = W, boxH = H, labelTextW = labelTextWidth(W), labelFontSize2 = LABEL_FONT_SIZE5) {
+function renderParticipant(svg, participant, cx, cy, palette, isDark, color, tagAttr, fillMode, boxW = W, boxH = H, labelTextW = labelTextWidth(W), labelFontSize2 = LABEL_FONT_SIZE5) {
   const g = svg.append("g").attr("transform", `translate(${cx}, ${cy})`).attr("class", "participant").attr("data-participant-id", participant.id);
   if (tagAttr) {
     g.attr(`data-tag-${tagAttr.key}`, tagAttr.value);
@@ -78490,16 +78892,24 @@ function renderParticipant(svg, participant, cx, cy, palette, isDark, color, tag
       renderActorParticipant(g, palette, color, boxH);
       break;
     case "database":
-      renderDatabaseParticipant(g, palette, isDark, color, solid, boxW, boxH);
+      renderDatabaseParticipant(
+        g,
+        palette,
+        isDark,
+        color,
+        fillMode,
+        boxW,
+        boxH
+      );
       break;
     case "queue":
-      renderQueueParticipant(g, palette, isDark, color, solid, boxW, boxH);
+      renderQueueParticipant(g, palette, isDark, color, fillMode, boxW, boxH);
       break;
     case "cache":
-      renderCacheParticipant(g, palette, isDark, color, solid, boxW, boxH);
+      renderCacheParticipant(g, palette, isDark, color, fillMode, boxW, boxH);
       break;
     default:
-      renderRectParticipant(g, palette, isDark, color, solid, boxW, boxH);
+      renderRectParticipant(g, palette, isDark, color, fillMode, boxW, boxH);
       break;
   }
   const isActor = participant.type === "actor";
@@ -78511,7 +78921,7 @@ function renderParticipant(svg, participant, cx, cy, palette, isDark, color, tag
   const fontSize = labelFontSize2;
   const lineHeight = fontSize + 2;
   const labelFill = isActor ? palette.text : contrastText(
-    fill(palette, isDark, color, solid),
+    fill(palette, isDark, color, fillMode),
     palette.textOnFillLight,
     palette.textOnFillDark
   );
@@ -78533,6 +78943,7 @@ var init_renderer33 = __esm({
   "src/sequence/renderer.ts"() {
     "use strict";
     init_tag_groups();
+    init_parsing();
     init_color_utils();
     init_inline_markdown();
     init_fonts();
@@ -78568,9 +78979,7 @@ var init_renderer33 = __esm({
     SELF_CALL_WIDTH = 30;
     ACTOR_LABEL_CLEARANCE = 22;
     labelTextWidth = (boxW) => boxW - 10;
-    fill = (palette, isDark, color, solid) => color ? shapeFill(palette, color, isDark, {
-      ...solid !== void 0 && { solid }
-    }) : isDark ? mix(palette.overlay, palette.surface, 50) : mix(palette.bg, palette.surface, 50);
+    fill = (palette, isDark, color, fillMode) => color ? shapeFill(palette, color, isDark, { mode: fillMode }) : isDark ? mix(palette.overlay, palette.surface, 50) : mix(palette.bg, palette.surface, 50);
     stroke = (palette, color) => color || palette.border;
     SW = 1.5;
     W = PARTICIPANT_BOX_WIDTH;
@@ -79239,6 +79648,7 @@ init_parser2();
 // src/arc/renderer.ts
 init_scaling();
 init_d3_helpers();
+init_color_utils();
 import * as d3Scale2 from "d3-scale";
 import * as d3Selection2 from "d3-selection";
 import * as d3Array2 from "d3-array";
@@ -79348,8 +79758,10 @@ var ARC_NODE_LABEL_Y_OFFSET = 20;
 var ARC_STROKE_MIN = 1.5;
 var ARC_STROKE_MAX = 6;
 var ARC_BASELINE_STROKE_WIDTH = 1;
-function renderArcDiagram(container, parsed, palette, _isDark, onClickItem, exportDims) {
+function renderArcDiagram(container, parsed, palette, isDark, onClickItem, exportDims) {
   const { links, orientation, arcOrder, arcNodeGroups } = parsed;
+  const outlineDots = parsed.fillMode === "outline";
+  const hollowFill = themeBaseBg(palette, isDark);
   const title = parsed.noTitle ? null : parsed.title;
   if (links.length === 0) return;
   const init = initD3Chart(container, palette, exportDims);
@@ -79506,7 +79918,10 @@ function renderArcDiagram(container, parsed, palette, _isDark, onClickItem, expo
         const minY = Math.min(...positions) - bandPad;
         const maxY = Math.max(...positions) + bandPad;
         const midYBand = (minY + maxY) / 2;
-        g.append("rect").attr("class", "arc-group-band").attr("data-group", group.name).attr("data-line-number", String(group.lineNumber)).attr("x", bandLeft).attr("y", minY).attr("width", bandRight - bandLeft).attr("height", maxY - minY).attr("rx", sBandRadius).attr("fill", group.color ?? textColor).attr("fill-opacity", group.color ? 0.15 : 0.06).style("cursor", "pointer").on("mouseenter", () => handleGroupEnter(group.name)).on("mouseleave", handleMouseLeave).on("click", () => {
+        g.append("rect").attr("class", "arc-group-band").attr("data-group", group.name).attr("data-line-number", String(group.lineNumber)).attr("x", bandLeft).attr("y", minY).attr("width", bandRight - bandLeft).attr("height", maxY - minY).attr("rx", sBandRadius).attr("fill", outlineDots ? "none" : group.color ?? textColor).attr("fill-opacity", group.color ? 0.15 : 0.06).call((sel) => {
+          if (outlineDots)
+            sel.attr("stroke", group.color ?? textColor).attr("stroke-width", 1.25);
+        }).style("cursor", "pointer").on("mouseenter", () => handleGroupEnter(group.name)).on("mouseleave", handleMouseLeave).on("click", () => {
           if (onClickItem) onClickItem(group.lineNumber);
         });
         const nameX = bandLeft + vNameColW / 2;
@@ -79540,7 +79955,10 @@ function renderArcDiagram(container, parsed, palette, _isDark, onClickItem, expo
         if (onClickItem && nodeLink?.lineNumber)
           onClickItem(nodeLink.lineNumber);
       });
-      nodeG.append("circle").attr("cx", baseX).attr("cy", y).attr("r", sNodeRadius).attr("fill", nodeColor2).attr("stroke", bgColor).attr("stroke-width", sNodeStrokeWidth);
+      nodeG.append("circle").attr("cx", baseX).attr("cy", y).attr("r", sNodeRadius).attr("fill", outlineDots ? hollowFill : nodeColor2).attr("stroke", outlineDots ? nodeColor2 : bgColor).attr(
+        "stroke-width",
+        outlineDots ? ctx.structural(2) : sNodeStrokeWidth
+      );
       nodeG.append("text").attr("x", baseX - sNodeLabelXOffset).attr("y", y).attr("dy", "0.35em").attr("text-anchor", "end").attr("fill", textColor).attr("font-size", `${sNodeLabelFont}px`).text(node);
     }
   } else {
@@ -79620,7 +80038,10 @@ function renderArcDiagram(container, parsed, palette, _isDark, onClickItem, expo
         const bandFill = group.color ?? textColor;
         const bandFillOpacity = group.color ? 0.15 : 0.06;
         const nameY = baseY + nodeLabelDepth + sGroupLabelFont;
-        g.append("rect").attr("class", "arc-group-band").attr("data-group", group.name).attr("data-line-number", String(group.lineNumber)).attr("x", bandLeft).attr("y", bandTopY).attr("width", bandRight - bandLeft).attr("height", bandBottomY - bandTopY).attr("rx", sBandRadius).attr("fill", bandFill).attr("fill-opacity", bandFillOpacity).style("cursor", "pointer").on("mouseenter", () => handleGroupEnter(group.name)).on("mouseleave", handleMouseLeave).on("click", () => {
+        g.append("rect").attr("class", "arc-group-band").attr("data-group", group.name).attr("data-line-number", String(group.lineNumber)).attr("x", bandLeft).attr("y", bandTopY).attr("width", bandRight - bandLeft).attr("height", bandBottomY - bandTopY).attr("rx", sBandRadius).attr("fill", outlineDots ? "none" : bandFill).attr("fill-opacity", bandFillOpacity).call((sel) => {
+          if (outlineDots)
+            sel.attr("stroke", bandFill).attr("stroke-width", 1.25);
+        }).style("cursor", "pointer").on("mouseenter", () => handleGroupEnter(group.name)).on("mouseleave", handleMouseLeave).on("click", () => {
           if (onClickItem) onClickItem(group.lineNumber);
         });
         g.append("text").attr("class", "arc-group-label").attr("data-group", group.name).attr("data-line-number", String(group.lineNumber)).attr("x", (minP + maxP) / 2).attr("y", nameY).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", `${sGroupLabelFont}px`).attr("font-weight", "600").attr("fill-opacity", 0.6).style("cursor", onClickItem ? "pointer" : "default").text(group.name).on("mouseenter", () => handleGroupEnter(group.name)).on("mouseleave", handleMouseLeave).on("click", () => {
@@ -79653,7 +80074,10 @@ function renderArcDiagram(container, parsed, palette, _isDark, onClickItem, expo
         if (onClickItem && nodeLink?.lineNumber)
           onClickItem(nodeLink.lineNumber);
       });
-      nodeG.append("circle").attr("cx", x).attr("cy", baseY).attr("r", sNodeRadius).attr("fill", nodeColor2).attr("stroke", bgColor).attr("stroke-width", sNodeStrokeWidth);
+      nodeG.append("circle").attr("cx", x).attr("cy", baseY).attr("r", sNodeRadius).attr("fill", outlineDots ? hollowFill : nodeColor2).attr("stroke", outlineDots ? nodeColor2 : bgColor).attr(
+        "stroke-width",
+        outlineDots ? ctx.structural(2) : sNodeStrokeWidth
+      );
       const labelY = rotateLabels ? baseY + labelPivotGap : baseY + sNodeLabelYOffset;
       const nodeLabel = nodeG.append("text").attr("x", x).attr("y", labelY).attr("text-anchor", rotateLabels ? "end" : "middle").attr("fill", textColor).attr("font-size", `${sNodeLabelFont}px`).text(node);
       if (rotateLabels) {
@@ -79868,7 +80292,7 @@ function regionCentroid(circles, inside) {
 }
 function renderVenn(container, parsed, palette, _isDark, onClickItem, exportDims) {
   const { vennSets, vennOverlaps } = parsed;
-  const solid = parsed.solidFill === true;
+  const fillMode = parsed.fillMode;
   const title = parsed.noTitle ? null : parsed.title;
   if (vennSets.length < 2 || vennSets.length > 3) return;
   const init = initD3Chart(container, palette, exportDims);
@@ -80022,7 +80446,10 @@ function renderVenn(container, parsed, palette, _isDark, onClickItem, exportDims
   const circleEls = [];
   const circleGroup = svg.append("g");
   circles.forEach((c, i) => {
-    const el = circleGroup.append("circle").attr("cx", c.x).attr("cy", c.y).attr("r", c.r).attr("fill", setColors[i]).attr("fill-opacity", solid ? 0.6 : 0.35).attr("stroke", setColors[i]).attr("stroke-width", ctx.structural(2)).style("pointer-events", "none");
+    const el = circleGroup.append("circle").attr("cx", c.x).attr("cy", c.y).attr("r", c.r).attr("fill", setColors[i]).attr(
+      "fill-opacity",
+      fillMode === "solid" ? 0.6 : fillMode === "outline" ? 0 : 0.35
+    ).attr("stroke", setColors[i]).attr("stroke-width", ctx.structural(2)).style("pointer-events", "none");
     circleEls.push(el);
   });
   const defs = svg.append("defs");
@@ -80748,7 +81175,7 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem, exportD
     if (placed.connectorLine) {
       pointG.append("line").attr("x1", placed.connectorLine.x1).attr("y1", placed.connectorLine.y1).attr("x2", placed.connectorLine.x2).attr("y2", placed.connectorLine.y2).attr("stroke", pointColor).attr("stroke-width", 1).attr("opacity", 0.5);
     }
-    pointG.append("circle").attr("cx", cx).attr("cy", cy).attr("r", POINT_RADIUS).attr("fill", "#ffffff").attr("stroke", pointColor).attr("stroke-width", ctx.structural(2));
+    pointG.append("circle").attr("cx", cx).attr("cy", cy).attr("r", POINT_RADIUS).attr("fill", parsed.fillMode === "outline" ? bg : "#ffffff").attr("stroke", pointColor).attr("stroke-width", ctx.structural(2));
     const labelText = pointG.append("text").attr("x", placed.x).attr("y", placed.y).attr("text-anchor", placed.anchor).attr("dominant-baseline", "central").attr("fill", textColor).attr("font-size", `${POINT_LABEL_FONT_SIZE}px`).attr("font-weight", "700").style("text-shadow", `0 1px 2px ${shadowColor}`).style("transition", "y 120ms ease-out");
     labelText.append("tspan").text(point.label);
     const coordsTspan = labelText.append("tspan").attr("class", "point-coords").attr("x", placed.x).attr("dy", `${POINT_LABEL_FONT_SIZE}px`).attr("font-size", `${ctx.text(10)}px`).attr("font-weight", "500").attr("opacity", 0).text(`${point.x.toFixed(2)}, ${point.y.toFixed(2)}`);
@@ -80854,6 +81281,9 @@ function resolveArcChordOverride(content, detectedType, palette) {
     if (!p.error && p.layout === "chord" && p.links.length) {
       const emitted = [
         `chord ${p.title ?? ""}`.trimEnd(),
+        // §1.9 fill family survives the layout re-emit so the circular
+        // renderer honors fill-solid / fill-outline authored on the arc.
+        ...p.fillMode ? [`fill-${p.fillMode}`] : [],
         ...p.links.map((l) => `${l.source} -> ${l.target} ${l.value}`)
       ].join("\n");
       return { content: emitted, type: "chord" };
@@ -82844,20 +83274,23 @@ function updateRow(group, now) {
   setHand(group, "s", ang.second);
   const mode = group.getAttribute("data-dgmo-clock-auto-mode");
   const cardFill = group.getAttribute("data-dgmo-clock-cardfill");
+  const fillMode = group.getAttribute("data-dgmo-clock-fill-mode");
   let autoSolid = null;
   if (mode === "daylight") autoSolid = up ? c("day") : c("night");
   else if (mode === "time") autoSolid = rampColor(parts.h);
   else if (mode) autoSolid = group.getAttribute("data-dgmo-clock-auto-solid");
-  const faceFill = autoSolid && cardFill ? mix(autoSolid, cardFill, 20) : group.getAttribute("data-dgmo-clock-auto-face") ?? stTint;
-  const handColor = autoSolid ?? stColor;
-  const face = group.querySelector("[data-dgmo-clock-facebg]");
-  if (face) face.setAttribute("fill", faceFill);
-  const ring = group.querySelector("[data-dgmo-clock-facering]");
-  if (ring && autoSolid) ring.setAttribute("stroke", autoSolid);
-  const center = group.querySelector("[data-dgmo-clock-center]");
-  if (center) center.setAttribute("fill", handColor);
-  const secondHand = group.querySelector('[data-dgmo-clock-hand="s"]');
-  if (secondHand) secondHand.setAttribute("stroke", handColor);
+  if (!fillMode) {
+    const faceFill = autoSolid && cardFill ? mix(autoSolid, cardFill, 20) : group.getAttribute("data-dgmo-clock-auto-face") ?? stTint;
+    const handColor = autoSolid ?? stColor;
+    const face = group.querySelector("[data-dgmo-clock-facebg]");
+    if (face) face.setAttribute("fill", faceFill);
+    const ring = group.querySelector("[data-dgmo-clock-facering]");
+    if (ring && autoSolid) ring.setAttribute("stroke", autoSolid);
+    const center = group.querySelector("[data-dgmo-clock-center]");
+    if (center) center.setAttribute("fill", handColor);
+    const secondHand = group.querySelector('[data-dgmo-clock-hand="s"]');
+    if (secondHand) secondHand.setAttribute("stroke", handColor);
+  }
   setPart(group, '[data-dgmo-clock-digital-part="main"]', ts.main);
   setPart(group, '[data-dgmo-clock-digital-part="sec"]', `:${ts.sec}`);
   setPart(group, '[data-dgmo-clock-digital-part="ap"]', ts.ap);
@@ -82870,20 +83303,11 @@ function updateRow(group, now) {
     if (statusEl.textContent !== status.text)
       statusEl.textContent = status.text;
     statusEl.setAttribute("fill", col);
-    const dot = group.querySelector("[data-dgmo-clock-status-dot]");
-    if (dot) {
-      if (status.cls === "off") {
-        dot.setAttribute("fill", "none");
-        dot.setAttribute("stroke", col);
-        dot.setAttribute("stroke-width", "1.4");
-      } else {
-        dot.setAttribute("fill", col);
-        dot.setAttribute("stroke", "none");
-      }
-    }
+    const icon = group.querySelector("[data-dgmo-clock-status-icon]");
+    if (icon) icon.setAttribute("fill", col);
   }
   const lane = group.querySelector("[data-dgmo-clock-lane]");
-  if (lane && mode) {
+  if (lane && mode && !fillMode) {
     let laneFill = null;
     if (mode === "daylight") laneFill = stTint;
     else if (mode === "time" && cardFill)
@@ -83058,7 +83482,7 @@ var parser = LRParser.deserialize({
   maxTerm: 40,
   skippedNodes: [0],
   repeatNodeCount: 2,
-  tokenData: "={~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![!]1Q!]!^#u!^!_1X!_!`1`!`!a1m!a!b1t!b!c#u!c!}1{!}#O5R#O#P#u#P#Q5W#Q#R#u#R#S1{#S#T#u#T#[1{#[#]5_#]#o1{#o#p#u#p#q=_#q#r#u#r#s=f#s;'S#u;'S;=`=u<%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(]|}(b!O!P)_!P!Q+O!Q![,Y#R#S0l#U#V*Y#W#X*`#[#]*`#a#b*m#e#f*`#g#h*`#k#l*`#m#n*`~(bO]~~(eP!Q![(h~(kP!Q![(n~(qP!Q![(t~(yQ^~|}(b!O!P)P~)SP!Q![)V~)[P^~!Q![)V~)bP!Q![)e~)jY^~uv(]!Q![)e#U#V*Y#W#X*`#[#]*`#a#b*m#e#f*`#g#h*`#k#l*`#m#n*`~*]P#W#X*`~*ePZ~!a!b*h~*mOZ~~*rQZ~!a!b*h#]#^*x~*{P#b#c*`~+RP!Q![+U~+ZQ[~!P!Q+a!Q![,Q~+dP!Q![+g~+jP!Q![+m~+rP[~!Q![+u~+xP!Q![+{~,QO[~~,VP[~!P!Q+a~,_^^~uv(]|}(b!O!P)_!P!Q+O!Q![-Z#R#S0l#U#V*Y#W#X*`#[#]*`#a#b*m#e#f*`#g#h*`#k#l*`#m#n*`~-`]^~uv(]|}(b!O!P)_!Q![.X#R#S0l#U#V*Y#W#X*`#[#]*`#a#b*m#e#f*`#g#h*`#k#l*`#m#n*`~.^]^~uv(]}!O/V!O!P)_!Q![/q#R#S0l#U#V*Y#W#X*`#[#]*`#a#b*m#e#f*`#g#h*`#k#l*`#m#n*`~/YP!Q![/]~/`P!Q![/c~/hP[~}!O/k~/nP!Q![+u~/v[^~uv(]!O!P)_!Q![/q#R#S0l#U#V*Y#W#X*`#[#]*`#a#b*m#e#f*`#g#h*`#k#l*`#m#n*`~0oP!Q![0r~0wR^~!O!P)P!Q![0r#R#S0l~1XOh~q~~1`Oe~q~~1ePq~!_!`1h~1mO_~~1tOf~q~~1{On~q~~2S_p~q~qr3Rst3Rvw3Rwx3R{|3R}!O4V!O!P3R!P!Q3R!Q![3R!_!`3R!a!b3R!b!c3R!c!}3R#R#S3R#T#o3R~3W_p~qr3Rst3Rvw3Rwx3R{|3R}!O4V!O!P3R!P!Q3R!Q![3R!_!`3R!a!b3R!b!c3R!c!}3R#R#S3R#T#o3R~4Y]qr3Rst3Rvw3Rwx3R{|3R!O!P3R!P!Q3R!_!`3R!a!b3R!b!c3R!c!}3R#R#S3R#T#o3R~5WOa~~5_Ob~q~~5fap~q~qr3Rst3Rvw3Rwx3R{|3R}!O4V!O!P3R!P!Q3R!Q![3R!_!`3R!a!b3R!b!c3R!c!}3R#R#S3R#T#h3R#h#i6k#i#o3R~6pap~qr3Rst3Rvw3Rwx3R{|3R}!O4V!O!P3R!P!Q3R!Q![3R!_!`3R!a!b3R!b!c3R!c!}3R#R#S3R#T#h3R#h#i7u#i#o3R~7zap~qr3Rst3Rvw3Rwx3R{|3R}!O4V!O!P3R!P!Q3R!Q![3R!_!`3R!a!b3R!b!c3R!c!}3R#R#S3R#T#d3R#d#e9P#e#o3R~9Ubp~qr3Rst3Rvw3Rwx3R{|3R}!O4V!O!P3R!P!Q3R!Q![3R![!]:^!_!`3R!a!b3R!b!c3R!c!}3R#R#S3R#T#g3R#g#h<W#h#o3R~:aP!P!Q:d~:gP!P!Q:j~:mYOX;]Zp;]qy;]z|;]}!`;]!a#P;]#Q#p;]#q;'S;];'S;=`<Q<%lO;]~;bY`~OX;]Zp;]qy;]z|;]}!`;]!a#P;]#Q#p;]#q;'S;];'S;=`<Q<%lO;]~<TP;=`<%l;]~<]`p~qr3Rst3Rvw3Rwx3R{|3R}!O4V!O!P3R!P!Q3R!Q![3R![!]:^!_!`3R!a!b3R!b!c3R!c!}3R#R#S3R#T#o3R~=fOg~q~~=mPl~q~!`!a=p~=uOY~~=xP;=`<%l#u",
+  tokenData: ">l~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![!]1q!]!^#u!^!_1x!_!`2P!`!a2^!a!b2e!b!c#u!c!}2l!}#O5r#O#P#u#P#Q5w#Q#R#u#R#S2l#S#T#u#T#[2l#[#]6O#]#o2l#o#p#u#p#q>O#q#r#u#r#s>V#s;'S#u;'S;=`>f<%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(`|}(e}!O)b!O!P*l!P!Q,]!Q![,v#R#S1]#U#V+g#W#X+m#[#]+m#a#b+z#e#f+m#g#h+m#k#l+m#m#n+m~(eO]~~(hP!Q![(k~(nP!Q![(q~(tP!Q![(w~(|Q^~|}(e!O!P)S~)VP!Q![)Y~)_P^~!Q![)Y~)eP!Q![)h~)mQ[~}!O)s!Q![*d~)vP!Q![)y~)|P!Q![*P~*UP[~!Q![*X~*[P!Q![*_~*dO[~~*iP[~}!O)s~*oP!Q![*r~*wY^~uv(`!Q![*r#U#V+g#W#X+m#[#]+m#a#b+z#e#f+m#g#h+m#k#l+m#m#n+m~+jP#W#X+m~+rPZ~!a!b+u~+zOZ~~,PQZ~!a!b+u#]#^,V~,YP#b#c+m~,`P!Q![,c~,hQ[~!P!Q)s!Q![,n~,sP[~!P!Q)s~,{_^~uv(`|}(e}!O)b!O!P*l!P!Q,]!Q![-z#R#S1]#U#V+g#W#X+m#[#]+m#a#b+z#e#f+m#g#h+m#k#l+m#m#n+m~.P]^~uv(`|}(e!O!P*l!Q![.x#R#S1]#U#V+g#W#X+m#[#]+m#a#b+z#e#f+m#g#h+m#k#l+m#m#n+m~.}]^~uv(`}!O/v!O!P*l!Q![0b#R#S1]#U#V+g#W#X+m#[#]+m#a#b+z#e#f+m#g#h+m#k#l+m#m#n+m~/yP!Q![/|~0PP!Q![0S~0XP[~}!O0[~0_P!Q![*X~0g[^~uv(`!O!P*l!Q![0b#R#S1]#U#V+g#W#X+m#[#]+m#a#b+z#e#f+m#g#h+m#k#l+m#m#n+m~1`P!Q![1c~1hR^~!O!P)S!Q![1c#R#S1]~1xOh~q~~2POe~q~~2UPq~!_!`2X~2^O_~~2eOf~q~~2lOn~q~~2s_p~q~qr3rst3rvw3rwx3r{|3r}!O4v!O!P3r!P!Q3r!Q![3r!_!`3r!a!b3r!b!c3r!c!}3r#R#S3r#T#o3r~3w_p~qr3rst3rvw3rwx3r{|3r}!O4v!O!P3r!P!Q3r!Q![3r!_!`3r!a!b3r!b!c3r!c!}3r#R#S3r#T#o3r~4y]qr3rst3rvw3rwx3r{|3r!O!P3r!P!Q3r!_!`3r!a!b3r!b!c3r!c!}3r#R#S3r#T#o3r~5wOa~~6OOb~q~~6Vap~q~qr3rst3rvw3rwx3r{|3r}!O4v!O!P3r!P!Q3r!Q![3r!_!`3r!a!b3r!b!c3r!c!}3r#R#S3r#T#h3r#h#i7[#i#o3r~7aap~qr3rst3rvw3rwx3r{|3r}!O4v!O!P3r!P!Q3r!Q![3r!_!`3r!a!b3r!b!c3r!c!}3r#R#S3r#T#h3r#h#i8f#i#o3r~8kap~qr3rst3rvw3rwx3r{|3r}!O4v!O!P3r!P!Q3r!Q![3r!_!`3r!a!b3r!b!c3r!c!}3r#R#S3r#T#d3r#d#e9p#e#o3r~9ubp~qr3rst3rvw3rwx3r{|3r}!O4v!O!P3r!P!Q3r!Q![3r![!]:}!_!`3r!a!b3r!b!c3r!c!}3r#R#S3r#T#g3r#g#h<w#h#o3r~;QP!P!Q;T~;WP!P!Q;Z~;^YOX;|Zp;|qy;|z|;|}!`;|!a#P;|#Q#p;|#q;'S;|;'S;=`<q<%lO;|~<RY`~OX;|Zp;|qy;|z|;|}!`;|!a#P;|#Q#p;|#q;'S;|;'S;=`<q<%lO;|~<tP;=`<%l;|~<|`p~qr3rst3rvw3rwx3r{|3r}!O4v!O!P3r!P!Q3r!Q![3r![!]:}!_!`3r!a!b3r!b!c3r!c!}3r#R#S3r#T#o3r~>VOg~q~~>^Pl~q~!`!a>a~>fOY~~>iP;=`<%l#u",
   tokenizers: [0],
   topRules: { "Document": [0, 6] },
   specialized: [{ term: 32, get: (value, stack) => specializeKeyword(value, stack) << 1, external: specializeKeyword }],
@@ -83068,6 +83492,7 @@ var parser = LRParser.deserialize({
 // src/editor/highlight-api.ts
 init_directives_registry();
 init_resolve2();
+init_date();
 var NODE_TO_ROLE = {
   Comment: "comment",
   ChartType: "chartType",
@@ -83171,6 +83596,7 @@ function highlightDgmo(source) {
   applyLabelOverrides(tokens);
   applyNoteContent(tokens);
   applyRecurringLine(tokens);
+  applyMonthNameDates(tokens);
   return tokens;
 }
 var ATTRIBUTE_KEYS = /* @__PURE__ */ new Set([
@@ -83405,6 +83831,40 @@ function applyRecurringLine(tokens) {
     offset += lineText.length + 1;
   }
 }
+var DATE_BEARING_CHARTS = /* @__PURE__ */ new Set([
+  "gantt",
+  "pert",
+  "countdown",
+  "timeline",
+  "event-line"
+]);
+function applyMonthNameDates(tokens) {
+  const fullText = tokens.map((t) => t.text).join("");
+  const lines = fullText.split("\n");
+  const firstContent = lines.find((l) => {
+    const t = l.trim();
+    return t.length > 0 && !t.startsWith("//");
+  });
+  const chartType = firstContent?.trim().split(/\s+/)[0]?.toLowerCase();
+  if (!chartType || !DATE_BEARING_CHARTS.has(chartType)) return;
+  let offset = 0;
+  for (const lineText of lines) {
+    for (const sp of scanMonthNameDates(lineText)) {
+      markDateSpan(tokens, offset + sp.start, offset + sp.end);
+    }
+    offset += lineText.length + 1;
+  }
+}
+function markDateSpan(tokens, from, to) {
+  let pos = 0;
+  for (const token of tokens) {
+    const tokenEnd = pos + token.text.length;
+    if (tokenEnd > from && pos < to && token.text.trim().length > 0 && (token.role === "default" || token.role === "number")) {
+      token.role = "number";
+    }
+    pos = tokenEnd;
+  }
+}
 var NOTE_HEAD_RE = /^note(\s|$)/i;
 function applyNoteContent(tokens) {
   const fullText = tokens.map((t) => t.text).join("");
@@ -83971,7 +84431,7 @@ var CSS = AUTO_BASE_CSS + "\n" + BLOCK_CSS + "\n" + darkScopedBlockCss(BLOCK_CSS
 
 // src/auto/shared.ts
 init_safe_href();
-var VERSION = "0.51.0";
+var VERSION = "0.52.0";
 var ARIA_LABEL_MAX = 200;
 var COPIED_INTERACTION_MS = 1500;
 var LOG_PREFIX = "[dgmo]";