@diagrammo/dgmo 0.51.0 → 0.53.0

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

@@ -5,6 +5,9 @@ import {
 import {
   wrapDescriptionLines
 } from "./chunk-BMR4CIEO.js";
+import {
+  FONT_FAMILY
+} from "./chunk-6KFWC4CO.js";
 import {
   DAY_MS,
   applyOrdinalTemplate,
@@ -20,16 +23,14 @@ import {
   splitClockSeconds
 } from "./chunk-OQKP2X3D.js";
 import {
-  FONT_FAMILY
-} from "./chunk-6KFWC4CO.js";
-import {
+  contrastText,
   getSeriesColors,
   mix,
   themeBaseBg
-} from "./chunk-P6T66CCZ.js";
+} from "./chunk-JYDMBWRP.js";
 import {
   resolveColor
-} from "./chunk-TLVIHFRO.js";
+} from "./chunk-ZKPPI6BF.js";
 
 // src/countdown/renderer.ts
 import * as d3Selection from "d3-selection";
@@ -42,8 +43,10 @@ function bakedHero(parsed, now) {
     if (parsed.expired !== null) return parsed.expired;
     const elapsed = -remaining;
     if (elapsed <= 0) return "Now!";
-    if (parsed.units === "compound" || parsed.units === "human")
-      return `${formatCompound(resolved, now, 2, tz)} ago`;
+    if (parsed.units === "compound" || parsed.units === "human") {
+      const [a, b] = parsed.hasTime ? [resolved, now] : [dayStart(resolved, tz), dayStart(now, tz)];
+      return `${formatCompound(a, b, 2, tz)} ago`;
+    }
     const bu = parsed.units === "full" || parsed.units === "clock" ? "days" : parsed.units;
     return `${formatCount(elapsed, { units: bu, round: parsed.round, fields: parsed.fields })} ago`;
   }
@@ -103,7 +106,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 +121,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 +135,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);
@@ -167,18 +185,20 @@ function haloRect(svg, x, y, w, h, rx, C) {
 function pickBand(nowMs, resolvedMs, hasTime) {
   const days = dayDelta(nowMs, resolvedMs);
   if (hasTime && days <= 0) return "clock";
-  if (days > 3 * 365) return "years";
-  if (days > 365) return "year";
-  if (days > 92) return "months";
-  if (days > 18) return "monthgrid";
-  if (days >= 1) return "weekstrip";
   if (days === 0) return "today";
-  return "after";
+  const mag = Math.abs(days);
+  if (mag > 3 * 365) return "years";
+  if (mag > 365) return "year";
+  if (mag > 92) return "months";
+  if (mag > 7) return "monthgrid";
+  return "weekstrip";
 }
 function monthSpan(nowMs, resolvedMs) {
   const n = new Date(nowMs);
   const t = new Date(resolvedMs);
-  return (t.getFullYear() - n.getFullYear()) * 12 + (t.getMonth() - n.getMonth()) + 1;
+  return Math.abs(
+    (t.getFullYear() - n.getFullYear()) * 12 + (t.getMonth() - n.getMonth())
+  ) + 1;
 }
 var MONTH_TARGET_PX = 200;
 function monthGridLayout(nowMs, resolvedMs, contentW) {
@@ -189,21 +209,24 @@ function monthGridLayout(nowMs, resolvedMs, contentW) {
   const padBefore = Math.floor((shown - realSpan) / 2);
   const nowMk = now.getFullYear() * 12 + now.getMonth();
   const evMk = ev.getFullYear() * 12 + ev.getMonth();
+  const loMk = Math.min(nowMk, evMk);
+  const hiMk = Math.max(nowMk, evMk);
+  const startMk = loMk - padBefore;
   const months = [];
   const dim = [];
   for (let i = 0; i < shown; i++) {
-    const d = new Date(now.getFullYear(), now.getMonth() - padBefore + i, 1);
+    const d = new Date(Math.floor(startMk / 12), startMk % 12 + i, 1);
     const mk = d.getFullYear() * 12 + d.getMonth();
     months.push(d);
-    dim.push(mk < nowMk || mk > evMk);
+    dim.push(mk < loMk || mk > hiMk);
   }
   return { months, dim };
 }
 function yearsLayout(nowMs, resolvedMs) {
   const y0 = new Date(nowMs).getFullYear();
   const y1 = new Date(resolvedMs).getFullYear();
-  const d0 = Math.floor(y0 / 10) * 10;
-  const d1 = Math.floor(y1 / 10) * 10;
+  const d0 = Math.floor(Math.min(y0, y1) / 10) * 10;
+  const d1 = Math.floor(Math.max(y0, y1) / 10) * 10;
   return { d0, d1, rows: (d1 - d0) / 10 + 1 };
 }
 function bandHeightFor(kind, nowMs, resolvedMs, contentW) {
@@ -225,7 +248,9 @@ function bandHeightFor(kind, nowMs, resolvedMs, contentW) {
       return total;
     }
     case "year": {
-      const R = new Date(resolvedMs).getFullYear() - new Date(nowMs).getFullYear() + 1;
+      const R = Math.abs(
+        new Date(resolvedMs).getFullYear() - new Date(nowMs).getFullYear()
+      ) + 1;
       const yearW = 66;
       const gap = 8;
       const cellW = (contentW - yearW - 11 * gap) / 12;
@@ -251,14 +276,13 @@ function bandHeightFor(kind, nowMs, resolvedMs, contentW) {
       return 26 + 6 * cellH + 8;
     }
     case "weekstrip": {
-      const n = Math.max(7, dayDelta(nowMs, resolvedMs) + 1);
+      const n = Math.max(7, Math.abs(dayDelta(nowMs, resolvedMs)) + 1);
       const cw = (contentW - 10 * (n - 1)) / n;
       return clamp(cw * 1.5, 116, 170);
     }
     case "clock":
       return clamp(contentW * 0.26, 150, 205);
     case "today":
-    case "after":
       return clamp(contentW * 0.22, 125, 170);
   }
 }
@@ -296,7 +320,7 @@ function vizYears(svg, g, nowMs, resolvedMs, C) {
       const before = yr < nowY;
       const isNow = yr === nowY;
       const isEv = yr === evY;
-      const between = yr > nowY && yr < evY;
+      const between = (yr - nowY) * (yr - evY) < 0;
       const st = isEv ? roleStyle(C, "event") : isNow ? roleStyle(C, "today") : between ? gradStyle(C, (yr - nowY) / (evY - nowY)) : roleStyle(C, before ? "past" : "future");
       const x = g.left + labW + i * (cellW + gap);
       aRect(svg, x, ry, cellW, cellH, rx, st.fill, st.stroke, 1);
@@ -320,8 +344,8 @@ function vizYears(svg, g, nowMs, resolvedMs, C) {
 function vizYear(svg, g, nowMs, resolvedMs, C) {
   const now = new Date(nowMs);
   const ev = new Date(resolvedMs);
-  const y0 = now.getFullYear();
-  const y1 = ev.getFullYear();
+  const y0 = Math.min(now.getFullYear(), ev.getFullYear());
+  const y1 = Math.max(now.getFullYear(), ev.getFullYear());
   const years = [];
   for (let y = y0; y <= y1; y++) years.push(y);
   const R = years.length;
@@ -351,10 +375,11 @@ function vizYear(svg, g, nowMs, resolvedMs, C) {
       { "dominant-baseline": "central" }
     );
     for (let m = 0; m < 12; m++) {
-      const before = yr < nowY || yr === nowY && m < nowM;
+      const mOrd = yr * 12 + m;
+      const before = mOrd < nowOrd;
       const isNow = yr === nowY && m === nowM;
       const isEv = yr === evY && m === evM;
-      const between = (yr > nowY || yr === nowY && m > nowM) && (yr < evY || yr === evY && m < evM);
+      const between = (mOrd - nowOrd) * (mOrd - evOrd) < 0;
       const anchor = isEv || isNow;
       const st = isEv ? roleStyle(C, "event") : isNow ? roleStyle(C, "today") : between ? gradStyle(C, (yr * 12 + m - nowOrd) / (evOrd - nowOrd)) : roleStyle(C, before ? "past" : "future");
       const x = g.left + yearW + m * (cellW + gap);
@@ -418,19 +443,22 @@ function vizMonths(svg, g, nowMs, resolvedMs, C) {
   const cellH = (g.height - rowGap * (rows - 1)) / rows;
   const nowMk = now.getFullYear() * 12 + now.getMonth();
   const evMk = ev.getFullYear() * 12 + ev.getMonth();
+  const loMk = Math.min(nowMk, evMk);
+  const hiMk = Math.max(nowMk, evMk);
+  const startMk = loMk - padBefore;
   for (let i = 0; i < shown; i++) {
-    const d = new Date(now.getFullYear(), now.getMonth() - padBefore + i, 1);
+    const d = new Date(Math.floor(startMk / 12), startMk % 12 + i, 1);
     const mk = d.getFullYear() * 12 + d.getMonth();
     const isNow = mk === nowMk;
     const isEv = mk === evMk;
-    const isContext = mk < nowMk || mk > evMk;
+    const isContext = mk < loMk || mk > hiMk;
     const anchor = isNow || isEv;
     const col = i % perRow;
     const row = Math.floor(i / perRow);
     const x = g.left + col * (cellW + gap);
     const y = g.top + row * (cellH + rowGap);
     const mt = isContext ? svg.append("g").attr("opacity", 0.42) : svg;
-    const st = isEv ? roleStyle(C, "event") : isNow ? roleStyle(C, "today") : mk > nowMk && mk < evMk ? gradStyle(C, (mk - nowMk) / (evMk - nowMk)) : roleStyle(C, mk < nowMk ? "past" : "future");
+    const st = isEv ? roleStyle(C, "event") : isNow ? roleStyle(C, "today") : (mk - nowMk) * (mk - evMk) < 0 ? gradStyle(C, (mk - nowMk) / (evMk - nowMk)) : roleStyle(C, mk < nowMk ? "past" : "future");
     const rxM = Math.min(12, cellH * 0.14);
     aRect(mt, x, y, cellW, cellH, rxM, st.fill, st.stroke, 1.25);
     if (isEv) haloRect(mt, x, y, cellW, cellH, rxM, C);
@@ -529,7 +557,7 @@ function vizMonthGrid(svg, g, nowMs, resolvedMs, C) {
       const cy = gy + wk * cellH;
       const isEvent = dk === evKey;
       const isToday = dk === todayKey;
-      const between = dk > todayKey && dk < evKey;
+      const between = (dk - todayKey) * (dk - evKey) < 0;
       const anchor = isEvent || isToday;
       const dtMs = new Date(m.getFullYear(), m.getMonth(), day).getTime();
       const st = isEvent ? roleStyle(C, "event") : isToday ? roleStyle(C, "today") : between ? gradStyle(C, dayDelta(nowMs, dtMs) / dayDelta(nowMs, resolvedMs)) : roleStyle(C, dk < todayKey ? "past" : "future");
@@ -568,8 +596,7 @@ function vizMonthGrid(svg, g, nowMs, resolvedMs, C) {
   });
 }
 function vizWeekStrip(svg, g, nowMs, resolvedMs, C) {
-  const now = new Date(nowMs);
-  const nReal = dayDelta(nowMs, resolvedMs) + 1;
+  const nReal = Math.abs(dayDelta(nowMs, resolvedMs)) + 1;
   const n = Math.max(7, nReal);
   const padBefore = Math.floor((n - nReal) / 2);
   const gap = n <= 7 ? 14 : n <= 12 ? 10 : 7;
@@ -580,17 +607,20 @@ function vizWeekStrip(svg, g, nowMs, resolvedMs, C) {
   const showTag = cw >= 44;
   const nowOrd = DAY_START(nowMs);
   const evOrd = DAY_START(resolvedMs);
+  const loOrd = Math.min(nowOrd, evOrd);
+  const hiOrd = Math.max(nowOrd, evOrd);
+  const first = new Date(Math.min(nowMs, resolvedMs));
   for (let i = 0; i < n; i++) {
     const dt = new Date(
-      now.getFullYear(),
-      now.getMonth(),
-      now.getDate() + i - padBefore
+      first.getFullYear(),
+      first.getMonth(),
+      first.getDate() + i - padBefore
     );
     const dtOrd = DAY_START(dt.getTime());
     const x = g.left + i * (cw + gap);
     const isToday = dtOrd === nowOrd;
     const isEvent = dtOrd === evOrd;
-    const isContext = dtOrd < nowOrd || dtOrd > evOrd;
+    const isContext = dtOrd < loOrd || dtOrd > hiOrd;
     const st = isEvent ? roleStyle(C, "event") : isToday ? roleStyle(C, "today") : isContext ? roleStyle(C, dtOrd < nowOrd ? "past" : "future") : gradStyle(C, (dtOrd - nowOrd) / (evOrd - nowOrd));
     const ct = isContext ? svg.append("g").attr("opacity", 0.5) : svg;
     const sw = isToday || isEvent ? 2 : 1.25;
@@ -658,13 +688,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 +706,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())
@@ -692,75 +723,6 @@ function vizToday(svg, g, resolvedMs, C) {
     { "letter-spacing": "0.12em" }
   );
 }
-function vizAfter(svg, g, nowMs, resolvedMs, C) {
-  const ev = new Date(resolvedMs);
-  const elapsed = dayDelta(resolvedMs, nowMs);
-  const n = elapsed + 1;
-  const gap = 10;
-  const cw = (g.contentW - gap * (n - 1)) / n;
-  const ch = Math.min(cw * 1.1, g.height * 0.62);
-  const top = g.top + (g.height - ch) / 2 - 8;
-  for (let i = 0; i < n; i++) {
-    const dt = new Date(ev);
-    dt.setDate(ev.getDate() + i);
-    const x = g.left + i * (cw + gap);
-    const isEvent = i === 0;
-    const isToday = i === n - 1;
-    const st = roleStyle(C, isEvent ? "event" : "past");
-    const fill = st.fill;
-    const stroke = st.stroke;
-    const tcol = st.text;
-    const sw = isEvent ? 2.5 : 1;
-    aRect(svg, x, top, cw, ch, 12, fill, stroke, sw);
-    if (isEvent) haloRect(svg, x, top, cw, ch, 12, C);
-    aText(
-      svg,
-      x + cw / 2,
-      top + ch * 0.46,
-      Math.min(34, cw * 0.34),
-      tcol,
-      isEvent ? 750 : 500,
-      "middle",
-      String(dt.getDate())
-    );
-    aText(
-      svg,
-      x + cw / 2,
-      top + ch * 0.72,
-      11,
-      tcol,
-      600,
-      "middle",
-      MON_ABBR[dt.getMonth()]
-    );
-    if (isEvent)
-      aText(
-        svg,
-        x + cw / 2,
-        top - 8,
-        11,
-        C.event,
-        700,
-        "middle",
-        "IT HAPPENED",
-        { "letter-spacing": "0.05em" }
-      );
-    if (isToday)
-      aText(svg, x + cw / 2, top - 8, 11, C.now, 700, "middle", "TODAY", {
-        "letter-spacing": "0.05em"
-      });
-  }
-  aText(
-    svg,
-    g.left,
-    top + ch + 28,
-    14,
-    C.muted,
-    400,
-    "start",
-    `${elapsed} day${elapsed === 1 ? "" : "s"} ago \u2014 the day has passed`
-  );
-}
 function polar(cx, cy, r, deg) {
   const a = (deg - 90) * Math.PI / 180;
   return [cx + r * Math.cos(a), cy + r * Math.sin(a)];
@@ -847,8 +809,6 @@ function drawBand(svg, kind, g, nowMs, resolvedMs, C) {
       return vizWeekStrip(svg, g, nowMs, resolvedMs, C);
     case "today":
       return vizToday(svg, g, resolvedMs, C);
-    case "after":
-      return vizAfter(svg, g, nowMs, resolvedMs, C);
     case "clock":
       return vizClock(svg, g, nowMs, resolvedMs, C);
   }
@@ -1015,7 +975,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 +1030,4 @@ export {
   renderCountdown,
   renderCountdownForExport
 };
-//# sourceMappingURL=chunk-ND76YJCN.js.map
+//# sourceMappingURL=chunk-PIXZTCKH.js.map

package/dist/{chunk-3LV2NCB6.js → chunk-PKNNHU7H.js}

@@ -11,10 +11,10 @@ import {
   stripDefaultModifier,
   tagAttrKey,
   validateTagGroupNames
-} from "./chunk-467TVMQL.js";
+} from "./chunk-CMVZWP32.js";
 import {
   parseInArrowLabel
-} from "./chunk-FFUN5D66.js";
+} from "./chunk-WF64MW5G.js";
 import {
   normalizeName
 } from "./chunk-NOTA6TEI.js";
@@ -27,16 +27,16 @@ import {
   splitNameAndMeta,
   warnUnknownMetaKeys,
   withTagAliases
-} from "./chunk-LV4BETUU.js";
+} from "./chunk-YJVA3QUU.js";
 import {
   formatDgmoError,
   makeDgmoError,
   makeFail,
   suggest
-} from "./chunk-CXK4DZH3.js";
+} from "./chunk-4W2PE66Q.js";
 
 // src/c4/parser.ts
-var CONTAINER_RE = /^\[([^\]]+)\]$/;
+var CONTAINER_RE = /^\[([^\]]+)\](?:\s+(collapsed)|\s+collapsed:\s*(\S+))?$/;
 var ELEMENT_RE = /^(person|system|container|component)\s+(.+)$/i;
 var IS_A_RE = /\s+is\s+a(?:n)?\s+(\w+)\s*$/i;
 var C4_IS_A_RE = /^([^:]+?)\s+is\s+an?\s+(person|system|container|component|external|database)\b(.*)$/i;
@@ -65,8 +65,12 @@ var VALID_SHAPES = /* @__PURE__ */ new Set([
 var KNOWN_C4_OPTIONS = /* @__PURE__ */ new Set(["layout", "active-tag"]);
 var KNOWN_C4_BOOLEANS = /* @__PURE__ */ new Set([
   "direction-tb",
-  "solid-fill",
-  "no-title"
+  "direction-lr",
+  "fill-tint",
+  "fill-solid",
+  "fill-outline",
+  "no-title",
+  "no-legend"
 ]);
 var ALL_CHART_TYPES = [
   "c4",
@@ -150,6 +154,7 @@ function parseC4(content, palette) {
     title: null,
     titleLineNumber: null,
     options,
+    direction: "TB",
     tagGroups: [],
     elements: [],
     relationships: [],
@@ -237,7 +242,12 @@ function parseC4(content, palette) {
     }
     if (!contentStarted && !currentTagGroup && measureIndent(line) === 0) {
       if (KNOWN_C4_BOOLEANS.has(trimmed.toLowerCase())) {
-        options[trimmed.toLowerCase()] = "on";
+        const boolKey = trimmed.toLowerCase();
+        if (boolKey === "direction-lr" || boolKey === "direction-tb") {
+          delete options["direction-lr"];
+          delete options["direction-tb"];
+        }
+        options[boolKey] = "on";
         continue;
       }
       const optMatch = trimmed.match(OPTION_NOCOLON_RE);
@@ -367,11 +377,13 @@ function parseC4(content, palette) {
     const containerMatch = trimmed.match(CONTAINER_RE);
     if (containerMatch) {
       const groupName = containerMatch[1].trim();
+      const groupCollapsed = containerMatch[2] !== void 0 || containerMatch[3]?.toLowerCase() === "true";
       const parentEntry = findParentElement(indent, stack);
       if (parentEntry) {
         const group = {
           name: groupName,
           children: [],
+          ...groupCollapsed && { collapsed: true },
           lineNumber
         };
         parentEntry.element.groups.push(group);
@@ -709,6 +721,7 @@ function parseC4(content, palette) {
     result.tagGroups,
     (line, msg) => pushError(line, msg, "warning")
   );
+  result.direction = options["direction-lr"] ? "LR" : "TB";
   return result;
 }
 function findParentElement(indent, stack) {
@@ -804,4 +817,4 @@ function validateDeploymentRefs(result, knownNames, pushWarning) {
 export {
   parseC4
 };
-//# sourceMappingURL=chunk-3LV2NCB6.js.map
+//# sourceMappingURL=chunk-PKNNHU7H.js.map

package/dist/{chunk-TK2VQQX2.js → chunk-PT4SW76W.js}

@@ -1,9 +1,9 @@
 import {
   renderIntegratedLegend
-} from "./chunk-OU7HLO7I.js";
+} from "./chunk-W5KMNC5U.js";
 import {
   getMaxLegendReservedHeight
-} from "./chunk-YAA6IID3.js";
+} from "./chunk-774C2FF3.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT,
@@ -13,21 +13,22 @@ import {
   FONT_FAMILY
 } from "./chunk-6KFWC4CO.js";
 import {
-  LEGEND_GROUP_GAP
-} from "./chunk-QOOUC2J5.js";
+  isBlockNode
+} from "./chunk-NR5HCAUD.js";
 import {
-  measureText
-} from "./chunk-WCT3NYCV.js";
+  mix,
+  themeBaseBg
+} from "./chunk-JYDMBWRP.js";
 import {
-  isBlockNode
-} from "./chunk-NNAAJVBU.js";
+  LEGEND_GROUP_GAP
+} from "./chunk-4RGZFA7H.js";
 import {
-  mix
-} from "./chunk-P6T66CCZ.js";
+  measureText
+} from "./chunk-4ASYQ347.js";
 import {
   resolveTagColor,
   tagAttrKey
-} from "./chunk-467TVMQL.js";
+} from "./chunk-CMVZWP32.js";
 
 // src/block/renderer.ts
 import * as d3Selection from "d3-selection";
@@ -223,7 +224,8 @@ function renderBlock(container, parsed, palette, isDark, exportDims, options = {
     activeGroup,
     activeKey: activeGroup ? tagAttrKey(activeGroup) : null,
     neutral,
-    solidFill: opts.solidFill,
+    fillMode: opts.fillMode,
+    isDark,
     onToggle: options.onToggle
   });
   if (legend) {
@@ -262,7 +264,7 @@ function clipLabel(s, maxWidth, fs) {
 }
 var clipCounter = 0;
 function drawItems(g, items, ctx, path = []) {
-  const { palette, solidFill: solid } = ctx;
+  const { palette, fillMode } = ctx;
   for (const it of items) {
     if (it.type === "empty") {
       g.append("rect").attr("x", it.x).attr("y", it.y).attr("width", it.w).attr("height", it.h).attr("rx", 7).attr("fill", "none").attr("stroke", ctx.neutral).attr("stroke-width", 1).attr("stroke-dasharray", "3 4").attr("opacity", 0.7);
@@ -280,17 +282,17 @@ function drawItems(g, items, ctx, path = []) {
       if (v) cell.attr(`data-tag-${ctx.activeKey}`, v);
     }
     if (it.type === "collapsed") {
-      const fill2 = color ? solid ? color : mix(color, palette.bg, 12) : palette.surface;
+      const fill2 = color ? fillMode === "solid" ? color : fillMode === "outline" ? themeBaseBg(palette, ctx.isDark) : mix(color, palette.bg, 12) : palette.surface;
       const cid = `dgmo-block-clip-${clipCounter++}`;
       cell.append("clipPath").attr("id", cid).append("rect").attr("x", it.x).attr("y", it.y).attr("width", it.w).attr("height", it.h).attr("rx", 10);
       cell.append("rect").attr("x", it.x).attr("y", it.y).attr("width", it.w).attr("height", it.h).attr("rx", 10).attr("fill", fill2).attr("stroke", stroke).attr("stroke-width", 1.5);
       cell.append("text").attr("x", it.x + it.w / 2).attr("y", it.y + it.h / 2 + 4).attr("text-anchor", "middle").attr("font-size", 12.5).attr("font-weight", 700).attr("fill", palette.text).text(clipLabel(it.label ?? "", it.w - 24, 12.5));
-      cell.append("rect").attr("x", it.x).attr("y", it.y + it.h - BLOCK_BAR_H).attr("width", it.w).attr("height", BLOCK_BAR_H).attr("fill", solid && color ? palette.text : stroke).attr("clip-path", `url(#${cid})`);
+      cell.append("rect").attr("x", it.x).attr("y", it.y + it.h - BLOCK_BAR_H).attr("width", it.w).attr("height", BLOCK_BAR_H).attr("fill", fillMode === "solid" && color ? palette.text : stroke).attr("clip-path", `url(#${cid})`);
       bindToggle(cell, it, ctx, it.h);
       continue;
     }
     if (it.type === "container") {
-      const fill2 = color ? solid ? color : mix(color, palette.bg, 7) : palette.surface;
+      const fill2 = color ? fillMode === "solid" ? color : fillMode === "outline" ? themeBaseBg(palette, ctx.isDark) : mix(color, palette.bg, 7) : palette.surface;
       cell.append("rect").attr("x", it.x).attr("y", it.y).attr("width", it.w).attr("height", it.h).attr("rx", 10).attr("fill", fill2).attr("stroke", stroke).attr("stroke-width", 1.5);
       const sizeMetric = Math.min(it.w, it.h * 2.5);
       const headerFs = Math.max(
@@ -305,7 +307,7 @@ function drawItems(g, items, ctx, path = []) {
       if (it.inner) drawItems(g, it.inner, ctx, itemPath);
       continue;
     }
-    const fill = color ? solid ? mix(color, palette.bg, 80) : mix(color, palette.bg, 14) : palette.bg;
+    const fill = color ? fillMode === "solid" ? mix(color, palette.bg, 80) : fillMode === "outline" ? themeBaseBg(palette, ctx.isDark) : mix(color, palette.bg, 14) : palette.bg;
     cell.attr("data-leaf", "true");
     cell.append("rect").attr("x", it.x).attr("y", it.y).attr("width", it.w).attr("height", it.h).attr("rx", 8).attr("fill", fill).attr("stroke", stroke).attr("stroke-width", 1.25);
     cell.append("text").attr("x", it.x + it.w / 2).attr("y", it.y + it.h / 2 + 5).attr("text-anchor", "middle").attr("font-size", 13).attr("font-weight", 600).attr("fill", palette.text).text(clipLabel(it.label ?? "", it.w - 16, 13));
@@ -359,4 +361,4 @@ export {
   renderBlock,
   authoredCollapsedIds
 };
-//# sourceMappingURL=chunk-TK2VQQX2.js.map
+//# sourceMappingURL=chunk-PT4SW76W.js.map

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

@@ -5,16 +5,16 @@ import {
   splitNameAndMeta,
   tryParseSharedOption,
   warnUnknownMetaKeys
-} from "./chunk-LV4BETUU.js";
+} from "./chunk-YJVA3QUU.js";
 import {
   RECOGNIZED_COLOR_NAMES,
   resolveColor
-} from "./chunk-TLVIHFRO.js";
+} from "./chunk-ZKPPI6BF.js";
 import {
   makeDgmoError,
   makeFail,
   suggest
-} from "./chunk-CXK4DZH3.js";
+} from "./chunk-4W2PE66Q.js";
 
 // src/ring/parser.ts
 var MAX_LAYERS = 15;
@@ -165,4 +165,4 @@ function parseRing(content) {
 export {
   parseRing
 };
-//# sourceMappingURL=chunk-AE7II3E3.js.map
+//# sourceMappingURL=chunk-PV2QO7QL.js.map