@diagrammo/dgmo 0.51.0 → 0.52.0

package/dist/{chunk-IUO34HKW.js → chunk-FHGVORFO.js}

@@ -7,7 +7,7 @@ import {
 } from "./chunk-YYVTBZZC.js";
 import {
   renderIntegratedLegend
-} from "./chunk-OU7HLO7I.js";
+} from "./chunk-AUIM2NVH.js";
 import {
   controlsGroupCapsuleWidth,
   getMaxLegendReservedHeight
@@ -45,12 +45,12 @@ import {
   getSeriesColors,
   mix,
   shapeFill
-} from "./chunk-P6T66CCZ.js";
+} from "./chunk-WBM7ZNDI.js";
 import {
   resolveActiveTagGroup,
   resolveTagColor,
   tagAttrKey
-} from "./chunk-467TVMQL.js";
+} from "./chunk-HHKO6SKY.js";
 import {
   normalizeName
 } from "./chunk-NOTA6TEI.js";
@@ -100,18 +100,13 @@ function computeBarLabel(label, x1, barWidth, innerWidth, textColor, onFillColor
 var BAND_ACCENT_W = 4;
 var BAND_RADIUS = 4;
 var bandClipCounter = 0;
-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 tint = 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 tint = 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) {
     tint.attr(dataAttr.key, dataAttr.value);
@@ -127,7 +122,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;
@@ -318,7 +313,7 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
         seriesColors,
         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);
     });
   }
@@ -419,7 +414,7 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
         isDark,
         "lane",
         { key: "data-lane", value: row.laneName },
-        solid,
+        fillMode,
         sBarH,
         sBandRadius,
         sBandAccentW
@@ -446,7 +441,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) {
@@ -492,7 +489,7 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
         isDark,
         "group",
         { key: "data-group", value: group.name },
-        solid,
+        fillMode,
         sBarH,
         sBandRadius,
         sBandAccentW
@@ -539,7 +536,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);
           }
@@ -551,7 +551,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
             ),
@@ -569,7 +569,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(
@@ -596,7 +598,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
             ),
@@ -676,7 +678,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", () => {
@@ -747,7 +751,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
           ),
@@ -2101,4 +2105,4 @@ export {
   renderGantt,
   buildTagLaneRowList
 };
-//# sourceMappingURL=chunk-IUO34HKW.js.map
+//# sourceMappingURL=chunk-FHGVORFO.js.map

package/dist/{chunk-6H7O2OPM.js → chunk-FQ7HTV52.js}

@@ -65,7 +65,9 @@ var DIRECTIVES_REGISTRY = [
   { 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"] },
@@ -359,4 +361,4 @@ export {
   REGISTRY_MODIFIER_TOKENS,
   REGISTRY_COLON_KEY_TOKENS
 };
-//# sourceMappingURL=chunk-6H7O2OPM.js.map
+//# sourceMappingURL=chunk-FQ7HTV52.js.map

package/dist/{chunk-7DYOELRK.js → chunk-FQMUHRVC.js}

@@ -7,7 +7,7 @@ import {
 import {
   VARIANTS,
   allTasks
-} from "./chunk-6MNGECP2.js";
+} from "./chunk-4IHAV6O7.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT,
@@ -25,7 +25,10 @@ import {
   contrastText,
   mix,
   themeBaseBg
-} from "./chunk-P6T66CCZ.js";
+} from "./chunk-WBM7ZNDI.js";
+import {
+  fillModeFromOptions
+} from "./chunk-BRENJ2BQ.js";
 
 // src/raci/renderer.ts
 import * as d3Selection from "d3-selection";
@@ -158,7 +161,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_MARGIN;
@@ -312,7 +315,7 @@ function renderRaci(container, parsed, palette, isDark, handlers, exportDims) {
       legendChipW,
       palette,
       surfaceBg,
-      solid,
+      fillMode,
       onMarkerDragStart,
       sLegendChipGap,
       sLegendHeight,
@@ -332,7 +335,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");
@@ -340,14 +350,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(
@@ -400,7 +417,7 @@ function renderRaci(container, parsed, palette, isDark, handlers, exportDims) {
         roleColW,
         parsed.variant,
         surfaceBg,
-        solid,
+        fillMode,
         chartCanShowSummaries,
         sPhaseHeight,
         sPhaseFont,
@@ -419,7 +436,7 @@ function renderRaci(container, parsed, palette, isDark, handlers, exportDims) {
         roleColW,
         palette,
         surfaceBg,
-        solid,
+        fillMode,
         taskDiagnostics,
         hasAnyDiagnostic,
         taskRowContent.get(row.task.id),
@@ -482,7 +499,7 @@ function setupColumnHover(svg) {
   svg.on("mouseover", (event) => set(findRole(event.target)));
   svg.on("mouseleave", () => set(null));
 }
-function renderLegend(svg, markers, variant, x, y, mode, chipW, palette, surfaceBg, solid, _onMarkerDragStart, sLegendChipGap, sLegendHeight, sNodeRadius, sNodeStrokeWidth, sLegendLetterFont, sLegendLabelFont) {
+function renderLegend(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`);
@@ -492,12 +509,12 @@ function renderLegend(svg, markers, variant, x, y, mode, chipW, palette, surface
     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 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;
       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);
       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(
           fill2,
           palette.textOnFillLight,
           palette.textOnFillDark
@@ -505,16 +522,32 @@ function renderLegend(svg, markers, variant, x, y, mode, chipW, palette, surface
       ).text(marker);
       return;
     }
-    const fill = solid ? rawColor : mix(rawColor, surfaceBg, TINT_PCT);
-    const stroke = mix(rawColor, surfaceBg, 70);
+    let fill;
+    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));
+      }
+      fill = `url(#${gradId})`;
+    } else {
+      fill = fillMode === "solid" ? rawColor : mix(rawColor, surfaceBg, TINT_PCT);
+    }
+    const stroke = 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", fill).attr("stroke", stroke).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
@@ -532,10 +565,16 @@ function renderLegend(svg, markers, variant, x, y, mode, chipW, palette, surface
 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");
@@ -568,13 +607,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 fill = solid ? rawColor : mix(rawColor, surfaceBg, TINT_PCT);
-        const stroke = solid ? mix(rawColor, surfaceBg, 70) : rawColor;
+        const fill = fillMode === "solid" ? rawColor : fillMode === "outline" ? surfaceBg : mix(rawColor, surfaceBg, TINT_PCT);
+        const stroke = 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", fill).attr("stroke", stroke).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(
             fill,
             palette.textOnFillLight,
             palette.textOnFillDark
@@ -585,7 +624,7 @@ function renderPhaseBar(svg, phase, x, y, width, palette, collapsed, autoColor,
   }
 }
 var SLICE_GAP = 4;
-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;
@@ -664,7 +703,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 fill = solid ? rawColor : mix(rawColor, surfaceBg, TINT_PCT);
+      const fill = fillMode === "solid" ? rawColor : fillMode === "outline" ? surfaceBg : mix(rawColor, surfaceBg, TINT_PCT);
       const stroke = 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");
@@ -676,7 +715,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(
           fill,
           palette.textOnFillLight,
           palette.textOnFillDark
@@ -747,4 +786,4 @@ export {
   renderRaci,
   renderRaciForExport
 };
-//# sourceMappingURL=chunk-7DYOELRK.js.map
+//# sourceMappingURL=chunk-FQMUHRVC.js.map

package/dist/{chunk-AFIEPDLX.js → chunk-FT3ZYWET.js}

@@ -6,12 +6,13 @@ import {
 } from "./chunk-OQKP2X3D.js";
 import {
   normalizeDate
-} from "./chunk-RBDIYLA5.js";
+} from "./chunk-DAOFNU6J.js";
 import {
   extractColor,
+  fillModeFromToken,
   measureIndent,
   parseFirstLine
-} from "./chunk-LV4BETUU.js";
+} from "./chunk-BRENJ2BQ.js";
 import {
   makeDgmoError,
   makeFail
@@ -326,6 +327,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;
@@ -534,4 +545,4 @@ export {
   targetToMs2 as targetToMs,
   parseCountdown
 };
-//# sourceMappingURL=chunk-AFIEPDLX.js.map
+//# sourceMappingURL=chunk-FT3ZYWET.js.map

package/dist/{chunk-ND76YJCN.js → chunk-FUPF2UYQ.js}

@@ -23,10 +23,11 @@ import {
   FONT_FAMILY
 } from "./chunk-6KFWC4CO.js";
 import {
+  contrastText,
   getSeriesColors,
   mix,
   themeBaseBg
-} from "./chunk-P6T66CCZ.js";
+} from "./chunk-WBM7ZNDI.js";
 import {
   resolveColor
 } from "./chunk-TLVIHFRO.js";
@@ -103,7 +104,7 @@ var keyOf = (ms) => {
   const d = new Date(ms);
   return d.getFullYear() * 1e4 + d.getMonth() * 100 + d.getDate();
 };
-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;
@@ -118,7 +119,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) {
@@ -128,15 +133,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, fill, 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", fill).attr("font-family", FONT_FAMILY).attr("font-variant-numeric", "tabular-nums").text(txt);
@@ -658,13 +674,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(),
@@ -675,7 +692,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())
@@ -1015,7 +1032,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) {
     drawBand(
       svg,
@@ -1063,4 +1087,4 @@ export {
   renderCountdown,
   renderCountdownForExport
 };
-//# sourceMappingURL=chunk-ND76YJCN.js.map
+//# sourceMappingURL=chunk-FUPF2UYQ.js.map

package/dist/{chunk-6NFYEQDX.js → chunk-FY5MSZAP.js}

@@ -5,8 +5,9 @@ import {
 } from "./chunk-APKUAJ2L.js";
 import {
   extractColor,
+  fillModeFromToken,
   parseFirstLine
-} from "./chunk-LV4BETUU.js";
+} from "./chunk-BRENJ2BQ.js";
 import {
   makeDgmoError,
   makeFail
@@ -330,7 +331,10 @@ var DIRECTIVES = /* @__PURE__ */ new Set([
   "time-24",
   "no-title",
   "direction",
-  "color-by"
+  "color-by",
+  "fill-tint",
+  "fill-solid",
+  "fill-outline"
 ]);
 var WEEKDAY_ABBR = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 function weekdayIndex(token) {
@@ -495,6 +499,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"];
@@ -645,4 +657,4 @@ export {
   searchZones,
   parseClock
 };
-//# sourceMappingURL=chunk-6NFYEQDX.js.map
+//# sourceMappingURL=chunk-FY5MSZAP.js.map