@diagrammo/dgmo 0.51.0 → 0.52.0

package/dist/{chunk-B63YB7X3.js → chunk-7KINELPI.js}

@@ -7,13 +7,13 @@ import {
 } from "./chunk-YYVTBZZC.js";
 import {
   renderIntegratedLegend
-} from "./chunk-OU7HLO7I.js";
+} from "./chunk-AUIM2NVH.js";
 import {
   createTooltip,
   hideTooltip,
   renderChartTitle,
   showTooltip
-} from "./chunk-U6EQI3U6.js";
+} from "./chunk-QBZYACOG.js";
 import {
   FONT_FAMILY
 } from "./chunk-6KFWC4CO.js";
@@ -31,17 +31,17 @@ import {
 } from "./chunk-QOOUC2J5.js";
 import {
   parseTimelineDate
-} from "./chunk-TMACGPW5.js";
+} from "./chunk-R3YSD62R.js";
 import {
   getSeriesColors,
   mix,
   shapeFill,
   themeBaseBg
-} from "./chunk-P6T66CCZ.js";
+} from "./chunk-WBM7ZNDI.js";
 import {
   resolveTagColor,
   tagAttrKey
-} from "./chunk-467TVMQL.js";
+} from "./chunk-HHKO6SKY.js";
 
 // src/timeline/renderer.ts
 import * as d3Scale from "d3-scale";
@@ -55,7 +55,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);
@@ -69,10 +69,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 = (rect) => {
+      if (outlineEra) {
+        rect.attr("fill", outlineBg).attr("stroke", color).attr("stroke-width", 1);
+      } else {
+        rect.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);
@@ -80,7 +90,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);
@@ -97,7 +109,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);
@@ -112,14 +124,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() {
@@ -145,10 +167,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);
@@ -275,7 +299,7 @@ function renderTimelineGroupLegend(g, groups, groupColorMap, textColor, palette,
 }
 function setupTimeline(container, parsed, palette, isDark, exportDims, activeTagGroup, swimlaneTagGroup) {
   d3Selection.select(container).selectAll(":not([data-d3-tooltip])").remove();
-  const solid = parsed.solidFill === true;
+  const fillMode = parsed.fillMode;
   const {
     timelineEvents,
     timelineGroups,
@@ -400,7 +424,7 @@ function setupTimeline(container, parsed, palette, isDark, exportDims, activeTag
     height,
     isVertical,
     tooltip,
-    solid,
+    fillMode,
     textColor,
     mutedColor,
     bgColor,
@@ -530,7 +554,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, fadeReset, fadeToTagValue } = hovers;
   const title = parsed.noTitle ? null : parsed.title;
   const { timelineEvents } = parsed;
@@ -683,8 +707,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 drawSwimlaneIcon = drawSwimlaneIcon2, relayout = relayout2, drawLegend = drawLegend2, recolorEvents = recolorEvents2;
@@ -717,7 +741,7 @@ function renderTimelineHorizontalTimeSort(container, parsed, palette, isDark, se
     width,
     height,
     tooltip,
-    solid,
+    fillMode,
     textColor,
     bgColor,
     bg,
@@ -795,7 +819,9 @@ function renderTimelineHorizontalTimeSort(container, parsed, palette, isDark, se
     timelineScale,
     tooltip,
     palette,
-    eraReserve ? eraLabelY : void 0
+    eraReserve ? eraLabelY : void 0,
+    fillMode,
+    bg
   );
   renderMarkers(
     g,
@@ -809,7 +835,9 @@ function renderTimelineHorizontalTimeSort(container, parsed, palette, isDark, se
     timelineScale,
     tooltip,
     palette,
-    markerReserve ? markerLabelY : void 0
+    markerReserve ? markerLabelY : void 0,
+    fillMode,
+    bg
   );
   if (timelineScale) {
     renderTimeScale(
@@ -880,7 +908,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 fill = shapeFill(palette, color, isDark, { solid });
+      let fill = shapeFill(palette, color, isDark, { mode: fillMode });
       let stroke = color;
       if (ev.uncertain) {
         const gradientId = `uncertain-ts-${ev.lineNumber}`;
@@ -891,7 +919,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 },
@@ -916,7 +944,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);
     }
   });
@@ -926,7 +954,7 @@ function renderTimelineHorizontalGrouped(container, parsed, palette, isDark, set
     width,
     height,
     tooltip,
-    solid,
+    fillMode,
     textColor,
     bgColor,
     bg,
@@ -1037,7 +1065,9 @@ function renderTimelineHorizontalGrouped(container, parsed, palette, isDark, set
     timelineScale,
     tooltip,
     palette,
-    eraReserve ? eraLabelY : void 0
+    eraReserve ? eraLabelY : void 0,
+    fillMode,
+    bg
   );
   renderMarkers(
     g,
@@ -1051,7 +1081,9 @@ function renderTimelineHorizontalGrouped(container, parsed, palette, isDark, set
     timelineScale,
     tooltip,
     palette,
-    markerReserve ? markerLabelY : void 0
+    markerReserve ? markerLabelY : void 0,
+    fillMode,
+    bg
   );
   if (timelineScale) {
     renderTimeScale(
@@ -1080,7 +1112,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}`);
@@ -1093,7 +1125,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;
@@ -1143,7 +1175,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 fill = shapeFill(palette, evColor, isDark, { solid });
+        let fill = shapeFill(palette, evColor, isDark, {
+          mode: fillMode
+        });
         let stroke = evColor;
         if (ev.uncertain) {
           const gradientId = `uncertain-${ev.lineNumber}`;
@@ -1154,7 +1188,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 },
@@ -1165,7 +1202,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", fill).attr("stroke", stroke).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;
@@ -1176,7 +1213,7 @@ function renderTimelineVertical(container, parsed, palette, isDark, setup, hover
     width,
     height,
     tooltip,
-    solid,
+    fillMode,
     textColor,
     mutedColor,
     bgColor,
@@ -1269,7 +1306,10 @@ function renderTimelineVertical(container, parsed, palette, isDark, setup, hover
       () => fadeReset(g),
       timelineScale,
       tooltip,
-      palette
+      palette,
+      void 0,
+      fillMode,
+      bg
     );
     renderMarkers(
       g,
@@ -1282,7 +1322,10 @@ function renderTimelineVertical(container, parsed, palette, isDark, setup, hover
       () => fadeReset(g),
       timelineScale,
       tooltip,
-      palette
+      palette,
+      void 0,
+      fillMode,
+      bg
     );
     if (timelineScale) {
       renderTimeScale(
@@ -1334,7 +1377,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 fill = shapeFill(palette, evColor, isDark, { solid });
+          let fill = shapeFill(palette, evColor, isDark, {
+            mode: fillMode
+          });
           let stroke = evColor;
           if (ev.uncertain) {
             const gradientId = `uncertain-vg-${ev.lineNumber}`;
@@ -1345,7 +1390,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 },
@@ -1357,7 +1405,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", fill).attr("stroke", stroke).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);
         }
       }
@@ -1397,7 +1448,10 @@ function renderTimelineVertical(container, parsed, palette, isDark, setup, hover
       () => fadeReset(g),
       timelineScale,
       tooltip,
-      palette
+      palette,
+      void 0,
+      fillMode,
+      bg
     );
     renderMarkers(
       g,
@@ -1410,7 +1464,10 @@ function renderTimelineVertical(container, parsed, palette, isDark, setup, hover
       () => fadeReset(g),
       timelineScale,
       tooltip,
-      palette
+      palette,
+      void 0,
+      fillMode,
+      bg
     );
     if (timelineScale) {
       renderTimeScale(
@@ -1461,7 +1518,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 fill = shapeFill(palette, color, isDark, { solid });
+        let fill = shapeFill(palette, color, isDark, {
+          mode: fillMode
+        });
         let stroke = color;
         if (ev.uncertain) {
           const gradientId = `uncertain-v-${ev.lineNumber}`;
@@ -1472,7 +1531,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 },
@@ -1484,7 +1546,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", fill).attr("stroke", stroke).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(
@@ -1607,4 +1669,4 @@ export {
   formatDateLabel,
   renderTimeline
 };
-//# sourceMappingURL=chunk-B63YB7X3.js.map
+//# sourceMappingURL=chunk-7KINELPI.js.map

package/dist/{chunk-AB7INMR5.js → chunk-7QE3XMRK.js}

@@ -25,13 +25,13 @@ import {
 } from "./chunk-3CIOJ5YJ.js";
 import {
   layoutOrg
-} from "./chunk-GROLTAWZ.js";
+} from "./chunk-QZX5S6R3.js";
 import {
   ScaleContext
 } from "./chunk-YYVTBZZC.js";
 import {
   renderIntegratedLegend
-} from "./chunk-OU7HLO7I.js";
+} from "./chunk-AUIM2NVH.js";
 import {
   getMaxLegendReservedHeight
 } from "./chunk-YAA6IID3.js";
@@ -55,17 +55,20 @@ import {
 } from "./chunk-WCT3NYCV.js";
 import {
   parseOrg
-} from "./chunk-RBHWPDBB.js";
+} from "./chunk-NNS4E7CW.js";
 import {
   contrastText,
   mix,
   shapeFill,
   themeBaseBg
-} from "./chunk-P6T66CCZ.js";
+} from "./chunk-WBM7ZNDI.js";
 import {
   resolveTagColor,
   tagAttrKey
-} from "./chunk-467TVMQL.js";
+} from "./chunk-HHKO6SKY.js";
+import {
+  fillModeFromOptions
+} from "./chunk-BRENJ2BQ.js";
 
 // src/org/renderer.ts
 import * as d3Selection from "d3-selection";
@@ -77,11 +80,9 @@ var ANCESTOR_LABEL_FONT_SIZE = 11;
 var ANCESTOR_ROW_HEIGHT = 22;
 var ANCESTOR_TRAIL_BOTTOM_GAP = 16;
 var LEGEND_FIXED_GAP = 8;
-function nodeFill(palette, isDark, nodeColor, solid) {
+function nodeFill(palette, isDark, nodeColor, fillMode) {
   const color = nodeColor ?? palette.primary;
-  return shapeFill(palette, color, isDark, {
-    ...solid !== void 0 && { solid }
-  });
+  return shapeFill(palette, color, isDark, { mode: fillMode });
 }
 function nodeStroke(palette, nodeColor) {
   return nodeColor ?? palette.primary;
@@ -285,12 +286,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 fill = nodeFill(
       palette,
       isDark,
       colorOff ? void 0 : node.color,
-      solid
+      fillMode
     );
     const stroke = nodeStroke(palette, colorOff ? void 0 : node.color);
     const labelColor = contrastText(
@@ -319,7 +320,7 @@ function renderOrg(container, parsed, layout, palette, isDark, onClickItem, expo
           fontSize: sMetaFontSize,
           lineHeight: sMetaLineHeight,
           separatorGap: sSeparatorGap,
-          separatorColor: solid ? labelColor : stroke,
+          separatorColor: fillMode === "solid" ? labelColor : stroke,
           textColor: labelColor
         }
       }
@@ -331,7 +332,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"
       });
@@ -484,4 +485,4 @@ export {
   renderOrg,
   renderOrgForExport
 };
-//# sourceMappingURL=chunk-AB7INMR5.js.map
+//# sourceMappingURL=chunk-7QE3XMRK.js.map

package/dist/{chunk-IUJODQKX.js → chunk-AAXZDUOV.js}

@@ -7,7 +7,7 @@ import {
   renderNoteBadge,
   renderNoteBox,
   renderNoteConnector
-} from "./chunk-JEUJOX5X.js";
+} from "./chunk-J7TLCB2Q.js";
 import {
   extractExportSvg,
   runInExportContainer
@@ -21,7 +21,7 @@ import {
 } from "./chunk-YYVTBZZC.js";
 import {
   renderIntegratedLegend
-} from "./chunk-OU7HLO7I.js";
+} from "./chunk-AUIM2NVH.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT,
@@ -39,10 +39,13 @@ import {
 import {
   contrastText,
   shapeFill
-} from "./chunk-P6T66CCZ.js";
+} from "./chunk-WBM7ZNDI.js";
 import {
   parseClassDiagram
-} from "./chunk-FC5I2KXV.js";
+} from "./chunk-TPFKKXCB.js";
+import {
+  fillModeFromOptions
+} from "./chunk-BRENJ2BQ.js";
 
 // src/class/renderer.ts
 import * as d3Selection from "d3-selection";
@@ -68,11 +71,9 @@ function modifierColor(modifier, palette, colorOff) {
       return palette.colors.teal;
   }
 }
-function nodeFill(palette, isDark, modifier, nodeColor, colorOff, solid) {
+function nodeFill(palette, isDark, modifier, nodeColor, colorOff, fillMode) {
   const color = nodeColor ?? modifierColor(modifier, palette, colorOff);
-  return shapeFill(palette, color, isDark, {
-    ...solid !== void 0 && { solid }
-  });
+  return shapeFill(palette, color, isDark, { mode: fillMode });
 }
 function nodeStroke(palette, modifier, nodeColor, colorOff) {
   return nodeColor ?? modifierColor(modifier, palette, colorOff);
@@ -259,14 +260,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 fill = nodeFill(
       palette,
       isDark,
       node.modifier,
       effectiveColor,
       colorOff,
-      solid
+      fillMode
     );
     const stroke = nodeStroke(palette, node.modifier, effectiveColor, colorOff);
     const onFillText = contrastText(
@@ -289,14 +290,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 : stroke).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 : stroke).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 : stroke).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 : stroke).attr("stroke-width", 0.5).attr("stroke-opacity", 0.5);
       if (fields.length > 0) {
         let memberY = yPos + sCompartmentPaddingY;
         for (const field of fields) {
@@ -312,7 +313,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 : stroke).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 : stroke).attr("stroke-width", 0.5).attr("stroke-opacity", 0.5);
       if (methods.length > 0) {
         let memberY = yPos + sCompartmentPaddingY;
         for (const method of methods) {
@@ -407,4 +408,4 @@ export {
   renderClassDiagram,
   renderClassDiagramForExport
 };
-//# sourceMappingURL=chunk-IUJODQKX.js.map
+//# sourceMappingURL=chunk-AAXZDUOV.js.map

package/dist/{chunk-2UJSV2VT.js → chunk-AL672HNE.js}

@@ -10,7 +10,7 @@ import {
   tagAttrKey,
   validateTagGroupNames,
   validateTagValues
-} from "./chunk-467TVMQL.js";
+} from "./chunk-HHKO6SKY.js";
 import {
   MINDMAP_REGISTRY,
   OPTION_NOCOLON_RE,
@@ -21,7 +21,7 @@ import {
   tryParseSharedOption,
   warnUnknownMetaKeys,
   withTagAliases
-} from "./chunk-LV4BETUU.js";
+} from "./chunk-BRENJ2BQ.js";
 import {
   formatDgmoError,
   makeDgmoError,
@@ -313,4 +313,4 @@ function findMetadataParent(indent, indentStack) {
 export {
   parseMindmap
 };
-//# sourceMappingURL=chunk-2UJSV2VT.js.map
+//# sourceMappingURL=chunk-AL672HNE.js.map

package/dist/{chunk-WQLMU7VG.js → chunk-ARGMQ3H4.js}

@@ -1,7 +1,7 @@
 import {
   extractColor,
   measureIndent
-} from "./chunk-LV4BETUU.js";
+} from "./chunk-BRENJ2BQ.js";
 import {
   makeDgmoError
 } from "./chunk-CXK4DZH3.js";
@@ -73,4 +73,4 @@ function tryCollectNote(lines, index, indent, palette, diagnostics) {
 export {
   tryCollectNote
 };
-//# sourceMappingURL=chunk-WQLMU7VG.js.map
+//# sourceMappingURL=chunk-ARGMQ3H4.js.map