@diagrammo/dgmo 0.51.0 → 0.52.0

package/dist/{chunk-AXW3M6OQ.js → chunk-TTIM6YTT.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-YYVTBZZC.js";
 import {
   renderIntegratedLegend
-} from "./chunk-OU7HLO7I.js";
+} from "./chunk-AUIM2NVH.js";
 import {
   getMaxLegendReservedHeight
 } from "./chunk-YAA6IID3.js";
@@ -29,15 +29,19 @@ import {
 } from "./chunk-WCT3NYCV.js";
 import {
   parseKanban
-} from "./chunk-IEDMFNU7.js";
+} from "./chunk-3QD7VP3U.js";
 import {
   contrastText,
   mix,
-  shapeFill
-} from "./chunk-P6T66CCZ.js";
+  shapeFill,
+  themeBaseBg
+} from "./chunk-WBM7ZNDI.js";
 import {
   tagAttrKey
-} from "./chunk-467TVMQL.js";
+} from "./chunk-HHKO6SKY.js";
+import {
+  fillModeFromOptions
+} from "./chunk-BRENJ2BQ.js";
 
 // src/kanban/renderer.ts
 import * as d3Selection from "d3-selection";
@@ -277,7 +281,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()
@@ -440,20 +446,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",
@@ -484,7 +496,7 @@ function renderKanban(container, parsed, palette, isDark, options) {
         palette,
         resolvedColor ?? palette.primary,
         isDark,
-        { solid }
+        { mode: fillMode }
       );
       const cardStroke = resolvedColor ?? palette.textMuted;
       const onCardText = contrastText(
@@ -511,7 +523,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}: `);
@@ -732,7 +744,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) {
@@ -808,7 +820,7 @@ function renderSwimlaneBoard(svg, parsed, baseLayout, swimlaneGroup, palette, is
             palette,
             isDark,
             hiddenMetaGroups,
-            parsed.options["solid-fill"] === "on",
+            fillModeFromOptions(parsed.options),
             sCardRadius,
             sCardPaddingX,
             sCardPaddingY,
@@ -824,7 +836,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);
@@ -833,9 +845,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(
@@ -882,4 +892,4 @@ export {
   renderKanban,
   renderKanbanForExport
 };
-//# sourceMappingURL=chunk-AXW3M6OQ.js.map
+//# sourceMappingURL=chunk-TTIM6YTT.js.map

package/dist/{chunk-WJ7RW65H.js → chunk-UBLHQTLV.js}

@@ -7,7 +7,7 @@ import {
 } from "./chunk-YYVTBZZC.js";
 import {
   renderIntegratedLegend
-} from "./chunk-OU7HLO7I.js";
+} from "./chunk-AUIM2NVH.js";
 import {
   getMaxLegendReservedHeight
 } from "./chunk-YAA6IID3.js";
@@ -23,7 +23,10 @@ import {
   contrastText,
   mix,
   shapeFill
-} from "./chunk-P6T66CCZ.js";
+} from "./chunk-WBM7ZNDI.js";
+import {
+  fillModeFromOptions
+} from "./chunk-BRENJ2BQ.js";
 
 // src/tech-radar/renderer.ts
 import * as d3Selection2 from "d3-selection";
@@ -440,7 +443,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 render() {
@@ -819,7 +822,7 @@ function renderQuarterCircleStatic(svg, parsed, quadrant, qColor, palette, isDar
 function renderStaticHtmlPanel(panel, parsed, quadrant, qColor, palette, isDark) {
   const ringOrder = parsed.rings.map((r) => r.name);
   const fillColor = shapeFill(palette, qColor, isDark, {
-    solid: parsed.options["solid-fill"] === "on"
+    mode: fillModeFromOptions(parsed.options)
   });
   for (const ringName of ringOrder) {
     const blips = quadrant.blips.filter((b) => b.ring === ringName);
@@ -1173,7 +1176,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) => {
@@ -1202,7 +1205,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);
@@ -1246,7 +1249,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);
@@ -1440,10 +1443,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,
@@ -1601,4 +1602,4 @@ export {
   renderTechRadar,
   renderTechRadarForExport
 };
-//# sourceMappingURL=chunk-WJ7RW65H.js.map
+//# sourceMappingURL=chunk-UBLHQTLV.js.map

package/dist/{chunk-AE7II3E3.js → chunk-UNURMIQO.js}

@@ -5,7 +5,7 @@ import {
   splitNameAndMeta,
   tryParseSharedOption,
   warnUnknownMetaKeys
-} from "./chunk-LV4BETUU.js";
+} from "./chunk-BRENJ2BQ.js";
 import {
   RECOGNIZED_COLOR_NAMES,
   resolveColor
@@ -165,4 +165,4 @@ function parseRing(content) {
 export {
   parseRing
 };
-//# sourceMappingURL=chunk-AE7II3E3.js.map
+//# sourceMappingURL=chunk-UNURMIQO.js.map

package/dist/{chunk-PZDBOK2Q.js → chunk-VILVLS7P.js}

@@ -5,7 +5,7 @@ import {
   parseFirstLine,
   splitNameAndMeta,
   warnUnknownMetaKeys
-} from "./chunk-LV4BETUU.js";
+} from "./chunk-BRENJ2BQ.js";
 import {
   makeDgmoError,
   makeFail,
@@ -29,7 +29,9 @@ var POSITION_ORDER = [
 var KNOWN_OPTIONS = /* @__PURE__ */ new Set([]);
 var KNOWN_BOOLEANS = /* @__PURE__ */ new Set([
   "show-blip-legend",
-  "solid-fill",
+  "fill-tint",
+  "fill-solid",
+  "fill-outline",
   "no-title"
 ]);
 function parseTechRadar(content) {
@@ -332,4 +334,4 @@ function assignGlobalNumbers(result) {
 export {
   parseTechRadar
 };
-//# sourceMappingURL=chunk-PZDBOK2Q.js.map
+//# sourceMappingURL=chunk-VILVLS7P.js.map

package/dist/{chunk-3YSQZ75W.js → chunk-VQOCMUWI.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-YYVTBZZC.js";
 import {
   renderIntegratedLegend
-} from "./chunk-OU7HLO7I.js";
+} from "./chunk-AUIM2NVH.js";
 import {
   getMaxLegendReservedHeight
 } from "./chunk-YAA6IID3.js";
@@ -30,16 +30,19 @@ import {
   mix,
   shapeFill,
   themeBaseBg
-} from "./chunk-P6T66CCZ.js";
+} from "./chunk-WBM7ZNDI.js";
 import {
   isSequenceBlock,
   isSequenceNote,
   isSequenceSection
-} from "./chunk-RLFVAKEO.js";
+} from "./chunk-QJMKPUYK.js";
 import {
   resolveActiveTagGroup,
   tagAttrKey
-} from "./chunk-467TVMQL.js";
+} from "./chunk-HHKO6SKY.js";
+import {
+  fillModeFromOptions
+} from "./chunk-BRENJ2BQ.js";
 
 // src/sequence/renderer.ts
 import * as d3Selection from "d3-selection";
@@ -286,15 +289,13 @@ function wrapLabelWords(words, maxWidth, fontSize) {
   if (current) lines.push(current);
   return lines;
 }
-var 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);
+var 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);
 var stroke = (palette, color) => color || palette.border;
 var SW = 1.5;
 var W = PARTICIPANT_BOX_WIDTH;
 var H = PARTICIPANT_BOX_HEIGHT;
-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;
@@ -315,11 +316,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");
@@ -327,11 +328,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");
@@ -339,11 +340,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);
@@ -586,7 +587,7 @@ function applyGroupOrdering(participants, groups, messages = []) {
 function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateToLine, options) {
   d3Selection.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)
   );
@@ -1146,7 +1147,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
@@ -1327,7 +1328,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
       isDark,
       effectiveTagColor,
       pTagAttr,
-      solid,
+      fillMode,
       sBoxW,
       sBoxH,
       sLabelTextWidth,
@@ -1551,7 +1552,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());
@@ -1789,7 +1792,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), labelFontSize = LABEL_FONT_SIZE) {
+function renderParticipant(svg, participant, cx, cy, palette, isDark, color, tagAttr, fillMode, boxW = W, boxH = H, labelTextW = labelTextWidth(W), labelFontSize = LABEL_FONT_SIZE) {
   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);
@@ -1799,16 +1802,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";
@@ -1820,7 +1831,7 @@ function renderParticipant(svg, participant, cx, cy, palette, isDark, color, tag
   const fontSize = labelFontSize;
   const lineHeight = fontSize + 2;
   const labelFill = isActor ? palette.text : contrastText(
-    fill(palette, isDark, color, solid),
+    fill(palette, isDark, color, fillMode),
     palette.textOnFillLight,
     palette.textOnFillDark
   );
@@ -1848,4 +1859,4 @@ export {
   renderSequenceDiagram,
   buildNoteMessageMap
 };
-//# sourceMappingURL=chunk-3YSQZ75W.js.map
+//# sourceMappingURL=chunk-VQOCMUWI.js.map

package/dist/{chunk-P6T66CCZ.js → chunk-WBM7ZNDI.js}

@@ -146,7 +146,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) {
@@ -223,4 +224,4 @@ export {
   getSegmentColors,
   politicalTints
 };
-//# sourceMappingURL=chunk-P6T66CCZ.js.map
+//# sourceMappingURL=chunk-WBM7ZNDI.js.map

package/dist/{chunk-4QZ43D7I.js → chunk-XD6ZYURY.js}

@@ -8,7 +8,7 @@ import {
   stripDefaultModifier,
   tagAttrKey,
   validateTagGroupNames
-} from "./chunk-467TVMQL.js";
+} from "./chunk-HHKO6SKY.js";
 import {
   JOURNEY_MAP_REGISTRY,
   OPTION_NOCOLON_RE,
@@ -19,7 +19,7 @@ import {
   splitNameAndMeta,
   warnUnknownMetaKeys,
   withTagAliases
-} from "./chunk-LV4BETUU.js";
+} from "./chunk-BRENJ2BQ.js";
 import {
   resolveColorWithDiagnostic
 } from "./chunk-TLVIHFRO.js";
@@ -34,7 +34,12 @@ import {
 var PHASE_RE = /^\[(.+?)\]$/;
 var ANNOTATION_RE = /^(pain|opportunity|thought)\s*:\s*(.+)$/i;
 var KNOWN_OPTIONS = /* @__PURE__ */ new Set(["active-tag"]);
-var KNOWN_BOOLEANS = /* @__PURE__ */ new Set(["solid-fill", "no-title"]);
+var KNOWN_BOOLEANS = /* @__PURE__ */ new Set([
+  "fill-tint",
+  "fill-solid",
+  "fill-outline",
+  "no-title"
+]);
 var REMOVED_BOOLEANS = {
   "no-legend": '"no-legend" has been removed \u2014 remove tag groups to hide the legend.'
 };
@@ -406,4 +411,4 @@ function parseStepLine(trimmed, lineNumber, counter, aliasMap, warn, diagnostics
 export {
   parseJourneyMap
 };
-//# sourceMappingURL=chunk-4QZ43D7I.js.map
+//# sourceMappingURL=chunk-XD6ZYURY.js.map

package/dist/{chunk-3JLKYGBQ.js → chunk-YIBAWQGJ.js}

@@ -5,7 +5,10 @@ import {
 import {
   mix,
   shapeFill
-} from "./chunk-P6T66CCZ.js";
+} from "./chunk-WBM7ZNDI.js";
+import {
+  fillModeFromOptions
+} from "./chunk-BRENJ2BQ.js";
 
 // src/journey-map/layout.ts
 var PADDING = 24;
@@ -210,7 +213,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;
@@ -287,4 +290,4 @@ export {
   scoreToCurveY,
   layoutJourneyMap
 };
-//# sourceMappingURL=chunk-3JLKYGBQ.js.map
+//# sourceMappingURL=chunk-YIBAWQGJ.js.map

package/dist/{chunk-ZO27FGJS.js → chunk-YTMTPUH4.js}

@@ -15,7 +15,10 @@ import {
   contrastText,
   mix,
   shapeFill
-} from "./chunk-P6T66CCZ.js";
+} from "./chunk-WBM7ZNDI.js";
+import {
+  fillModeFromOptions
+} from "./chunk-BRENJ2BQ.js";
 
 // src/wireframe/renderer.ts
 import * as d3Selection from "d3-selection";
@@ -59,7 +62,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);
@@ -443,7 +446,7 @@ function renderAlert(g, node, ctx) {
   const { palette, isDark, isTransparent } = ctx;
   const el = node.element;
   const color = getElementSemanticColor(el, palette) || palette.accent;
-  const fill = isTransparent ? null : shapeFill(palette, color, isDark, { solid: ctx.solid });
+  const fill = isTransparent ? null : shapeFill(palette, color, isDark, { mode: ctx.fillMode });
   if (fill) {
     g.append("rect").attr("width", node.width).attr("height", node.height).attr("fill", fill).attr("rx", 4);
   }
@@ -551,4 +554,4 @@ function renderModal(parent, node, ctx) {
 export {
   renderWireframe
 };
-//# sourceMappingURL=chunk-ZO27FGJS.js.map
+//# sourceMappingURL=chunk-YTMTPUH4.js.map

package/dist/{chunk-6BQFET7X.js → chunk-Z5QVYKR7.js}

@@ -9,12 +9,13 @@ import {
   matchTagBlockHeading,
   stripDefaultModifier,
   tagAttrKey
-} from "./chunk-467TVMQL.js";
+} from "./chunk-HHKO6SKY.js";
 import {
   extractColor,
+  fillModeFromToken,
   measureIndent,
   parseFirstLine
-} from "./chunk-LV4BETUU.js";
+} from "./chunk-BRENJ2BQ.js";
 import {
   emit
 } from "./chunk-CXK4DZH3.js";
@@ -140,6 +141,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) {
@@ -256,4 +264,4 @@ export {
   parseBody,
   extractSymbols
 };
-//# sourceMappingURL=chunk-6BQFET7X.js.map
+//# sourceMappingURL=chunk-Z5QVYKR7.js.map