@diagrammo/dgmo 0.50.2 → 0.52.0

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

@@ -7,11 +7,11 @@ import {
 } from "./chunk-YYVTBZZC.js";
 import {
   renderIntegratedLegend
-} from "./chunk-HEVYAHLW.js";
+} from "./chunk-AUIM2NVH.js";
 import {
   controlsGroupCapsuleWidth,
   getMaxLegendReservedHeight
-} from "./chunk-7UEMZREK.js";
+} from "./chunk-YAA6IID3.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT,
@@ -34,23 +34,23 @@ import {
   LEGEND_PILL_PAD,
   measureLegendText,
   truncateLegendText
-} from "./chunk-HQCHYB5F.js";
+} from "./chunk-QOOUC2J5.js";
 import {
   CHAR_WIDTH_RATIO,
   measureText,
   truncateText
-} from "./chunk-5LWQH6QV.js";
+} from "./chunk-WCT3NYCV.js";
 import {
   contrastText,
   getSeriesColors,
   mix,
   shapeFill
-} from "./chunk-P6T66CCZ.js";
+} from "./chunk-WBM7ZNDI.js";
 import {
   resolveActiveTagGroup,
   resolveTagColor,
   tagAttrKey
-} from "./chunk-FJUNPCYI.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-NWED7CYO.js.map
+//# sourceMappingURL=chunk-FHGVORFO.js.map

package/dist/{chunk-U2HGPLZS.js → chunk-FQ7HTV52.js}

@@ -1,5 +1,12 @@
 // src/directives-registry.ts
 var DIRECTIVES_REGISTRY = [
+  // ── Universal date handling (§ BL-121) ───────────────────
+  // Accepted in every date-bearing chart (gantt, pert, countdown, timeline,
+  // event-line). Handled inline by each parser's prescan — no parser-Set
+  // membership here — so they only contribute highlighting (DIRECTIVE_KEYWORDS).
+  { token: "year", category: "directive" },
+  { token: "date-order", category: "directive" },
+  { token: "no-current-year", category: "directive" },
   // ── Infra ────────────────────────────────────────────────
   // Top-level SLO options that are ALSO accepted as node colon-properties
   // (dual membership). Highlight bare (kept in DIRECTIVE_KEYWORDS) — their
@@ -58,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"] },
@@ -86,6 +95,12 @@ var DIRECTIVES_REGISTRY = [
   { token: "no-colorize", category: "directive", map: true },
   { token: "no-cities", category: "directive", map: true },
   { token: "no-cluster-pois", category: "directive", map: true },
+  // ── Clock channel (BL-122): live local-time cards on POIs flagged `clock` ──
+  // Activation is the per-POI `clock` flag (peeled in the map parser, not a
+  // directive). `hours 9-17` / `days mon-fri` are the global availability
+  // window (reused verbatim from the clock chart type).
+  { token: "hours", category: "directive", map: true },
+  { token: "days", category: "directive", map: true },
   // ── Shared across types ──────────────────────────────────
   // `active-tag`: infra top-level option + gantt option + map directive.
   {
@@ -346,4 +361,4 @@ export {
   REGISTRY_MODIFIER_TOKENS,
   REGISTRY_COLON_KEY_TOKENS
 };
-//# sourceMappingURL=chunk-U2HGPLZS.js.map
+//# sourceMappingURL=chunk-FQ7HTV52.js.map

package/dist/{chunk-H73FP42Q.js → chunk-FQMUHRVC.js}

@@ -7,7 +7,7 @@ import {
 import {
   VARIANTS,
   allTasks
-} from "./chunk-PGEGPSCZ.js";
+} from "./chunk-4IHAV6O7.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT,
@@ -20,12 +20,15 @@ import {
   measureText,
   truncateText,
   wrapTextToWidth
-} from "./chunk-5LWQH6QV.js";
+} from "./chunk-WCT3NYCV.js";
 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-H73FP42Q.js.map
+//# sourceMappingURL=chunk-FQMUHRVC.js.map