@diagrammo/dgmo 0.51.0 → 0.53.0

package/dist/{chunk-ZO27FGJS.js → chunk-4ASVFYB2.js}

@@ -8,14 +8,17 @@ import {
 import {
   FONT_FAMILY
 } from "./chunk-6KFWC4CO.js";
-import {
-  measureText
-} from "./chunk-WCT3NYCV.js";
 import {
   contrastText,
   mix,
   shapeFill
-} from "./chunk-P6T66CCZ.js";
+} from "./chunk-JYDMBWRP.js";
+import {
+  measureText
+} from "./chunk-4ASYQ347.js";
+import {
+  fillModeFromOptions
+} from "./chunk-YJVA3QUU.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-4ASVFYB2.js.map

package/dist/{chunk-WCT3NYCV.js → chunk-4ASYQ347.js}

@@ -88,23 +88,38 @@ var CHAR_W = {
 };
 var DEFAULT_W = 0.56;
 var CHAR_WIDTH_RATIO = DEFAULT_W;
-function measureText(text, fontSize) {
-  let w = 0;
+var MEASURE_CACHE = /* @__PURE__ */ new Map();
+var MEASURE_CACHE_MAX = 1e4;
+function extendWidth(acc, text, fontSize) {
+  let w = acc;
   for (let i = 0; i < text.length; i++) {
     w += (CHAR_W[text.charAt(i)] ?? DEFAULT_W) * fontSize;
   }
   return w;
 }
+function measureText(text, fontSize) {
+  const key = `${fontSize}|${text}`;
+  const cached = MEASURE_CACHE.get(key);
+  if (cached !== void 0) return cached;
+  const w = extendWidth(0, text, fontSize);
+  if (MEASURE_CACHE.size >= MEASURE_CACHE_MAX) MEASURE_CACHE.clear();
+  MEASURE_CACHE.set(key, w);
+  return w;
+}
 function truncateText(text, fontSize, maxWidth) {
   if (measureText(text, fontSize) <= maxWidth) return text;
   const ellipsis = "\u2026";
   const ellipsisW = measureText(ellipsis, fontSize);
   if (ellipsisW > maxWidth) return "";
+  const prefix = [0];
+  for (let i = 0; i < text.length; i++) {
+    prefix.push(extendWidth(prefix[i], text.charAt(i), fontSize));
+  }
   let lo = 0;
   let hi = text.length;
   while (lo < hi) {
     const mid = Math.ceil((lo + hi) / 2);
-    if (measureText(text.slice(0, mid), fontSize) + ellipsisW <= maxWidth) {
+    if (prefix[mid] + ellipsisW <= maxWidth) {
       lo = mid;
     } else {
       hi = mid - 1;
@@ -116,15 +131,19 @@ function wrapTextToWidth(text, fontSize, maxWidth, opts) {
   const words = text.split(/\s+/).filter((w) => w.length > 0);
   if (words.length === 0) return [""];
   const hardBreak = opts?.hardBreak ?? false;
+  const spaceW = (CHAR_W[" "] ?? DEFAULT_W) * fontSize;
   const lines = [];
   let current = "";
+  let currentW = 0;
   const pushWord = (word) => {
-    const test = current ? `${current} ${word}` : word;
-    if (measureText(test, fontSize) <= maxWidth || !current) {
-      current = test;
+    const testW = extendWidth(current ? currentW + spaceW : 0, word, fontSize);
+    if (testW <= maxWidth || !current) {
+      current = current ? `${current} ${word}` : word;
+      currentW = testW;
     } else {
       lines.push(current);
       current = word;
+      currentW = extendWidth(0, word, fontSize);
     }
   };
   for (const word of words) {
@@ -132,17 +151,23 @@ function wrapTextToWidth(text, fontSize, maxWidth, opts) {
       if (current) {
         lines.push(current);
         current = "";
+        currentW = 0;
       }
       let chunk = "";
+      let chunkW = 0;
       for (const ch of word) {
-        if (chunk && measureText(chunk + ch, fontSize) > maxWidth) {
+        const candW = extendWidth(chunkW, ch, fontSize);
+        if (chunk && candW > maxWidth) {
           lines.push(chunk);
           chunk = ch;
+          chunkW = extendWidth(0, ch, fontSize);
         } else {
           chunk += ch;
+          chunkW = candW;
         }
       }
       current = chunk;
+      currentW = chunkW;
       continue;
     }
     pushWord(word);
@@ -157,4 +182,4 @@ export {
   truncateText,
   wrapTextToWidth
 };
-//# sourceMappingURL=chunk-WCT3NYCV.js.map
+//# sourceMappingURL=chunk-4ASYQ347.js.map

package/dist/{chunk-2ILHQOL3.js → chunk-4K42RUGC.js}

@@ -7,10 +7,11 @@ import {
   tagAttrKey,
   validateTagGroupNames,
   validateTagValues
-} from "./chunk-467TVMQL.js";
+} from "./chunk-CMVZWP32.js";
 import {
   TREEMAP_REGISTRY,
   extractColor,
+  fillModeFromToken,
   measureIndent,
   parseFirstLine,
   peelRampColors,
@@ -18,14 +19,14 @@ import {
   stripQuotes,
   warnUnknownMetaKeys,
   withTagAliases
-} from "./chunk-LV4BETUU.js";
+} from "./chunk-YJVA3QUU.js";
 import {
   emit,
   formatDgmoError,
   makeDgmoError,
   makeFail,
   suggest
-} from "./chunk-CXK4DZH3.js";
+} from "./chunk-4W2PE66Q.js";
 
 // src/treemap/diagnostics.ts
 var TREEMAP_DX = {
@@ -71,7 +72,7 @@ function parseTreemap(content, palette) {
     noPercent: false,
     noHeaders: false,
     noLegend: false,
-    solidFill: false,
+    fillMode: void 0,
     radial: false
   };
   const result = {
@@ -245,7 +246,7 @@ function parseTreemap(content, palette) {
     validateTagGroupNames(result.tagGroups, pushWarning);
     cascadeTagMetadata(result.roots, result.tagGroups);
   }
-  result.defaultColorMode = resolveDefaultColorMode(result);
+  result.defaultColorMode = resolveDefaultColorMode(result, pushWarning);
   if (result.roots.length === 0 && !result.error) {
     const diag = makeDgmoError(1, "No nodes found in treemap");
     result.diagnostics.push(diag);
@@ -279,18 +280,27 @@ function handleDirective(trimmed, options, result, pushWarning, lineNumber) {
     result.hasHeat = true;
     return true;
   }
-  const noMatch = trimmed.match(/^no-(values|percent|headers|legend)\s*$/i);
+  const activeTagMatch = trimmed.match(/^active-tag\s+(.+)$/i);
+  if (activeTagMatch) {
+    result.activeTag = activeTagMatch[1].trim();
+    result.activeTagLineNumber = lineNumber;
+    return true;
+  }
+  const noMatch = trimmed.match(/^no-(values?|percent|headers|legend)\s*$/i);
   if (noMatch) {
     const key = noMatch[1].toLowerCase();
-    if (key === "values") options.noValues = true;
+    if (key === "value" || key === "values") options.noValues = true;
     else if (key === "percent") options.noPercent = true;
     else if (key === "headers") options.noHeaders = true;
     else if (key === "legend") options.noLegend = true;
     return true;
   }
-  if (/^solid-fill\s*$/i.test(trimmed)) {
-    options.solidFill = true;
-    return true;
+  {
+    const fm = fillModeFromToken(trimmed);
+    if (fm !== null) {
+      options.fillMode = fm === "tint" ? void 0 : fm;
+      return true;
+    }
   }
   if (/^radial\s*$/i.test(trimmed)) {
     options.radial = true;
@@ -298,9 +308,27 @@ function handleDirective(trimmed, options, result, pushWarning, lineNumber) {
   }
   return false;
 }
-function resolveDefaultColorMode(result) {
-  if (result.tagGroups.length > 0) return "tag";
+function resolveDefaultColorMode(result, pushWarning) {
+  const at = result.activeTag?.trim();
+  if (at) {
+    const lv = at.toLowerCase();
+    if (lv === "none") return "branch";
+    const heatName = result.options.heatLabel;
+    const heatHit = heatName !== void 0 ? lv === heatName.toLowerCase() : lv === "value" || lv === "heat";
+    if (result.hasHeat && heatHit) return "heat";
+    if (result.tagGroups.some((g) => g.name.toLowerCase() === lv)) return "tag";
+    const dims = [
+      ...result.tagGroups.map((g) => g.name),
+      ...result.hasHeat ? [heatName ?? "Value"] : []
+    ];
+    const hint = dims.length ? ` Available: ${dims.join(", ")}, none.` : " No tag groups or heat are declared.";
+    pushWarning(
+      result.activeTagLineNumber ?? 0,
+      `active-tag "${at}" does not match a declared tag group or the heat label.${hint}`
+    );
+  }
   if (result.hasHeat) return "heat";
+  if (result.tagGroups.length > 0) return "tag";
   return "branch";
 }
 function parseNodeLine(trimmed, lineNumber, counter, aliasMap, diagnostics) {
@@ -377,4 +405,4 @@ export {
   TREEMAP_DIAGNOSTICS,
   parseTreemap
 };
-//# sourceMappingURL=chunk-2ILHQOL3.js.map
+//# sourceMappingURL=chunk-4K42RUGC.js.map

package/dist/{chunk-I5IGB56C.js → chunk-4QV26TEG.js}

@@ -100,11 +100,50 @@ function pointInGeometry(geometry, lon, lat) {
   }
   return false;
 }
+var planarBboxCache = /* @__PURE__ */ new WeakMap();
+function planarGeometryBbox(geometry) {
+  const g = geometry;
+  if (!g) return null;
+  const polys = g.type === "Polygon" ? [g.coordinates] : g.type === "MultiPolygon" ? g.coordinates : [];
+  let minLon = Infinity;
+  let minLat = Infinity;
+  let maxLon = -Infinity;
+  let maxLat = -Infinity;
+  let seen = false;
+  for (const rings of polys) {
+    const outer = rings[0];
+    if (!outer) continue;
+    for (const pt of outer) {
+      const x = pt[0];
+      const y = pt[1];
+      if (x < minLon) minLon = x;
+      if (x > maxLon) maxLon = x;
+      if (y < minLat) minLat = y;
+      if (y > maxLat) maxLat = y;
+      seen = true;
+    }
+  }
+  return seen ? [minLon, minLat, maxLon, maxLat] : null;
+}
+function featurePlanarBbox(f) {
+  let bbox = planarBboxCache.get(f);
+  if (bbox === void 0) {
+    bbox = planarGeometryBbox(f.geometry);
+    planarBboxCache.set(f, bbox);
+  }
+  return bbox;
+}
+function bboxRejects(f, lon, lat) {
+  const b = featurePlanarBbox(f);
+  if (!b) return false;
+  return lon < b[0] - EDGE_EPS || lon > b[2] + EDGE_EPS || lat < b[1] - EDGE_EPS || lat > b[3] + EDGE_EPS;
+}
 function regionAt(lonLat, countries, states) {
   const lon = lonLat[0];
   const lat = lonLat[1];
   let country = null;
   for (const f of countries) {
+    if (bboxRejects(f, lon, lat)) continue;
     if (pointInGeometry(f.geometry, lon, lat)) {
       country = { iso: f.id, name: f.properties.name };
       break;
@@ -113,6 +152,7 @@ function regionAt(lonLat, countries, states) {
   let state = null;
   if (country?.iso === "US" && states) {
     for (const f of states) {
+      if (bboxRejects(f, lon, lat)) continue;
       if (pointInGeometry(f.geometry, lon, lat)) {
         state = { iso: f.id, name: f.properties.name };
         break;
@@ -252,4 +292,4 @@ export {
   featureBboxPrimary,
   unionExtent
 };
-//# sourceMappingURL=chunk-I5IGB56C.js.map
+//# sourceMappingURL=chunk-4QV26TEG.js.map

package/dist/{chunk-QOOUC2J5.js → chunk-4RGZFA7H.js}

@@ -1,7 +1,7 @@
 import {
   measureText,
   truncateText
-} from "./chunk-WCT3NYCV.js";
+} from "./chunk-4ASYQ347.js";
 
 // src/utils/legend-constants.ts
 var LEGEND_HEIGHT = 28;
@@ -49,4 +49,4 @@ export {
   LEGEND_TOGGLE_OFF_OPACITY,
   LEGEND_GEAR_PILL_W
 };
-//# sourceMappingURL=chunk-QOOUC2J5.js.map
+//# sourceMappingURL=chunk-4RGZFA7H.js.map

package/dist/{chunk-CXK4DZH3.js → chunk-4W2PE66Q.js}

@@ -98,6 +98,15 @@ var METADATA_DIAGNOSTIC_CODES = {
 function emptyMetadataValueMessage(key) {
   return `Metadata key '${key}:' has no value \u2014 the pair is dropped. Provide a value or remove the key.`;
 }
+var TITLE_DIRECTIVE_DX = {
+  code: "E_TITLE_DIRECTIVE",
+  severity: "error",
+  chartType: null,
+  title: "title directive on a data chart",
+  message: "The `title` directive is not supported \u2014 the chart title is line 1 \u2014 remove the title directive.",
+  hint: "Put the title on the declaration line (`bar My Chart`) and delete the `title` line.",
+  example: "bar Revenue\ntitle Revenue\nQ1 100"
+};
 
 export {
   makeDgmoError,
@@ -109,6 +118,7 @@ export {
   NAME_DIAGNOSTIC_CODES,
   nameMergedMessage,
   METADATA_DIAGNOSTIC_CODES,
-  emptyMetadataValueMessage
+  emptyMetadataValueMessage,
+  TITLE_DIRECTIVE_DX
 };
-//# sourceMappingURL=chunk-CXK4DZH3.js.map
+//# sourceMappingURL=chunk-4W2PE66Q.js.map

package/dist/{chunk-EXOQP75F.js → chunk-4WGMGKCZ.js}

@@ -3,10 +3,10 @@ import {
   layoutJourneyMap,
   scoreToColor,
   scoreToCurveY
-} from "./chunk-3JLKYGBQ.js";
+} from "./chunk-J7HI6G3G.js";
 import {
   wrapNoteBody
-} from "./chunk-TYS6CSS5.js";
+} from "./chunk-UU6LUYUH.js";
 import {
   NOTE_BULLET_INDENT
 } from "./chunk-5DH3KYFH.js";
@@ -21,27 +21,31 @@ import {
 } from "./chunk-YYVTBZZC.js";
 import {
   renderIntegratedLegend
-} from "./chunk-OU7HLO7I.js";
+} from "./chunk-W5KMNC5U.js";
 import {
   FONT_FAMILY
 } from "./chunk-6KFWC4CO.js";
-import {
-  measureText,
-  truncateText,
-  wrapTextToWidth
-} from "./chunk-WCT3NYCV.js";
 import {
   parseJourneyMap
-} from "./chunk-4QZ43D7I.js";
+} from "./chunk-VJHBSPGF.js";
 import {
   contrastText,
   mix,
-  shapeFill
-} from "./chunk-P6T66CCZ.js";
+  shapeFill,
+  themeBaseBg
+} from "./chunk-JYDMBWRP.js";
+import {
+  measureText,
+  truncateText,
+  wrapTextToWidth
+} from "./chunk-4ASYQ347.js";
 import {
   resolveActiveTagGroup,
   tagAttrKey
-} from "./chunk-467TVMQL.js";
+} from "./chunk-CMVZWP32.js";
+import {
+  fillModeFromOptions
+} from "./chunk-YJVA3QUU.js";
 
 // src/journey-map/renderer.ts
 import * as d3 from "d3-selection";
@@ -76,7 +80,7 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
   const onActiveTagGroupChange = options?.onActiveTagGroupChange;
   const collapsedPhases = options?.collapsedPhases ?? /* @__PURE__ */ new Set();
   const onPhaseToggle = options?.onPhaseToggle;
-  const solid = parsed.options["solid-fill"] === "on";
+  const fillMode = fillModeFromOptions(parsed.options);
   const layout = layoutJourneyMap(parsed, palette, {
     collapsedPhases,
     ...exportDims !== void 0 && { exportDims },
@@ -131,7 +135,9 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
     const textX = panelX + CARD_PADDING_X;
     const clipId = "persona-clip";
     defs.append("clipPath").attr("id", clipId).append("rect").attr("x", panelX).attr("y", panelY).attr("width", panelWidth).attr("height", panelHeight).attr("rx", CARD_RADIUS);
-    const personaFill = shapeFill(palette, personaColor, isDark, { solid });
+    const personaFill = shapeFill(palette, personaColor, isDark, {
+      mode: fillMode
+    });
     const onPersonaText = contrastText(
       personaFill,
       palette.textOnFillLight,
@@ -139,12 +145,21 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
     );
     personaG.append("rect").attr("x", panelX).attr("y", panelY).attr("width", panelWidth).attr("height", panelHeight).attr("rx", CARD_RADIUS).attr("fill", personaFill);
     if (descLines.length > 0) {
-      personaG.append("line").attr("x1", panelX + 1).attr("x2", panelX + panelWidth - silhouetteZone).attr("y1", panelY + titleRowH).attr("y2", panelY + titleRowH).attr("stroke", solid ? onPersonaText : personaColor).attr("stroke-opacity", 0.3).attr("stroke-width", 1);
+      personaG.append("line").attr("x1", panelX + 1).attr("x2", panelX + panelWidth - silhouetteZone).attr("y1", panelY + titleRowH).attr("y2", panelY + titleRowH).attr("stroke", fillMode === "solid" ? onPersonaText : personaColor).attr("stroke-opacity", 0.3).attr("stroke-width", 1);
     }
     const silX = panelX + panelWidth - 32;
     const silY = panelY + panelHeight / 2 - 6;
     const silClip = personaG.append("g").attr("clip-path", `url(#${clipId})`);
-    renderPersonaSilhouette(silClip, silX, silY, personaColor, palette, 1.2);
+    renderPersonaSilhouette(
+      silClip,
+      silX,
+      silY,
+      personaColor,
+      palette,
+      isDark,
+      1.2,
+      fillMode
+    );
     personaG.append("rect").attr("x", panelX).attr("y", panelY).attr("width", panelWidth).attr("height", panelHeight).attr("rx", CARD_RADIUS).attr("fill", "none").attr("stroke", personaColor).attr("stroke-width", CARD_STROKE_WIDTH);
     personaG.append("text").attr("x", textX).attr("y", panelY + CARD_PADDING_Y + FONT_SIZE_STEP).attr("font-size", FONT_SIZE_STEP).attr("font-weight", "500").attr("fill", onPersonaText).text(parsed.persona.name);
     for (let li = 0; li < descLines.length; li++) {
@@ -280,7 +295,9 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
         pt.y,
         pt.score,
         palette,
-        isDark
+        isDark,
+        void 0,
+        fillMode
       );
       addEmotionLabel(faceG, pt, palette);
       if (step) {
@@ -313,7 +330,9 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
       pt.y,
       pt.score,
       palette,
-      isDark
+      isDark,
+      void 0,
+      fillMode
     );
     addEmotionLabel(faceG, pt, palette);
     if (step) {
@@ -398,7 +417,7 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
             palette,
             stepColor ?? palette.primary,
             isDark,
-            { solid }
+            { mode: fillMode }
           );
           const rowStroke = stepColor ?? palette.textMuted;
           itemG.append("rect").attr("x", listX).attr("y", itemY).attr("width", cardW).attr("height", COLLAPSED_CARD_H).attr("rx", CARD_RADIUS).attr("fill", rowFill).attr("stroke", rowStroke).attr("stroke-width", CARD_STROKE_WIDTH);
@@ -412,7 +431,8 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
               step.score,
               palette,
               isDark,
-              COLLAPSED_FACE_R
+              COLLAPSED_FACE_R,
+              fillMode
             );
             faceG.attr("data-line-number", step.lineNumber);
             faceG.attr("data-score", step.score);
@@ -441,7 +461,7 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
             effectiveActiveGroup,
             parsed.tagGroups,
             onNavigateToLine,
-            solid
+            fillMode
           );
         }
       }
@@ -456,7 +476,7 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
         effectiveActiveGroup,
         parsed.tagGroups,
         onNavigateToLine,
-        solid
+        fillMode
       );
     }
   }
@@ -530,7 +550,7 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
       );
       const by = Math.max(PADDING, fcy - FACE_HOVER_R - THOUGHT_GAP - bh);
       const scoreColor = scoreToColor(score, palette);
-      const tintedBg = mix(scoreColor, palette.surface, 20);
+      const tintedBg = fillMode === "outline" ? themeBaseBg(palette, isDark) : mix(scoreColor, palette.surface, 20);
       const g = overlayG.append("g").attr("class", "journey-thought-hover");
       g.append("rect").attr("x", bx).attr("y", by).attr("width", bw).attr("height", bh).attr("rx", CARD_RADIUS).attr("fill", tintedBg).attr("stroke", scoreColor).attr("stroke-width", CARD_STROKE_WIDTH);
       g.append("line").attr("x1", fcx).attr("y1", by + bh).attr("x2", fcx).attr("y2", fcy - FACE_HOVER_R - 1).attr("stroke", scoreColor).attr("stroke-width", CARD_STROKE_WIDTH);
@@ -624,7 +644,7 @@ function resolveStepColor(step, scoreColor, activeGroup, tagGroups, _palette) {
   );
   return entry?.color;
 }
-function renderStepCard(parent, sl, palette, isDark, activeGroup, tagGroups, onNavigateToLine, solid) {
+function renderStepCard(parent, sl, palette, isDark, activeGroup, tagGroups, onNavigateToLine, fillMode) {
   const stepG = parent.append("g").attr("class", "journey-step").attr("data-line-number", sl.step.lineNumber);
   if (sl.step.score !== void 0) {
     stepG.attr("data-score", sl.step.score);
@@ -645,7 +665,7 @@ function renderStepCard(parent, sl, palette, isDark, activeGroup, tagGroups, onN
     palette,
     resolvedColor ?? palette.primary,
     isDark,
-    { ...solid !== void 0 && { solid } }
+    { mode: fillMode }
   );
   const cardStroke = resolvedColor ?? palette.textMuted;
   const onCardText = contrastText(
@@ -663,7 +683,7 @@ function renderStepCard(parent, sl, palette, isDark, activeGroup, tagGroups, onN
   const cardAnnotations = sl.step.annotations;
   const hasContent = sl.step.description || cardAnnotations.length > 0;
   if (hasContent) {
-    stepG.append("line").attr("x1", cx).attr("y1", cy + titleBlockH).attr("x2", cx + sl.width).attr("y2", cy + titleBlockH).attr("stroke", solid ? onCardText : cardStroke).attr("stroke-opacity", 0.3).attr("stroke-width", 1);
+    stepG.append("line").attr("x1", cx).attr("y1", cy + titleBlockH).attr("x2", cx + sl.width).attr("y2", cy + titleBlockH).attr("stroke", fillMode === "solid" ? onCardText : cardStroke).attr("stroke-opacity", 0.3).attr("stroke-width", 1);
   }
   let metaY = cy + titleBlockH + CARD_META_LINE_HEIGHT;
   if (sl.step.description) {
@@ -685,7 +705,7 @@ function renderStepCard(parent, sl, palette, isDark, activeGroup, tagGroups, onN
     const annoColor = annotationColor(anno.type, palette);
     const iconPaths = annotationIconPaths(anno.type);
     const annoLines = wrapText(anno.text, annoTextW, FONT_SIZE_META);
-    const iconColor = solid ? onCardText : annoColor;
+    const iconColor = fillMode === "solid" ? onCardText : annoColor;
     renderAnnotationIcon(
       stepG,
       cx + CARD_PADDING_X,
@@ -710,7 +730,7 @@ function renderStepCard(parent, sl, palette, isDark, activeGroup, tagGroups, onN
     const TAG_GAP = 6;
     const stripY = cy - TAG_STRIP_HEIGHT - TAG_GAP;
     const stripFill = shapeFill(palette, stripColor, isDark, {
-      ...solid !== void 0 && { solid }
+      mode: fillMode
     });
     stepG.append("rect").attr("x", cx).attr("y", stripY).attr("width", sl.width).attr("height", TAG_STRIP_HEIGHT).attr("rx", CARD_RADIUS).attr("fill", stripFill).attr("stroke", stripColor).attr("stroke-width", CARD_STROKE_WIDTH);
     const stripTextColor = contrastText(
@@ -727,8 +747,8 @@ function renderStepCard(parent, sl, palette, isDark, activeGroup, tagGroups, onN
     });
   }
 }
-function renderPersonaSilhouette(parent, cx, cy, color, palette, scale = 1) {
-  const fill = mix(color, palette.bg, 70);
+function renderPersonaSilhouette(parent, cx, cy, color, palette, isDark, scale = 1, fillMode) {
+  const fill = fillMode === "outline" ? themeBaseBg(palette, isDark) : mix(color, palette.bg, 70);
   const stroke = color;
   const s = scale;
   parent.append("path").attr(
@@ -740,12 +760,12 @@ function renderPersonaSilhouette(parent, cx, cy, color, palette, scale = 1) {
     `M ${cx} ${cy - 12 * s} C ${cx + 10 * s} ${cy - 12 * s}, ${cx + 9 * s} ${cy + 2 * s}, ${cx + 6 * s} ${cy + 6 * s} Q ${cx} ${cy + 9 * s}, ${cx - 6 * s} ${cy + 6 * s} C ${cx - 9 * s} ${cy + 2 * s}, ${cx - 10 * s} ${cy - 12 * s}, ${cx} ${cy - 12 * s} Z`
   ).attr("fill", fill).attr("stroke", stroke).attr("stroke-width", 1.2);
 }
-function renderScoreFace(parent, cx, cy, score, palette, isDark, radius) {
+function renderScoreFace(parent, cx, cy, score, palette, isDark, radius, fillMode) {
   const r = radius ?? FACE_RADIUS;
   const color = scoreToColor(score, palette);
   const g = parent.append("g").attr("class", "journey-face").attr("data-cx", cx).attr("data-cy", cy);
   const iconG = g.append("g").attr("class", "journey-face-icon");
-  const faceFill = shapeFill(palette, color, isDark);
+  const faceFill = fillMode === "outline" ? shapeFill(palette, color, isDark, { mode: "outline" }) : shapeFill(palette, color, isDark);
   iconG.append("circle").attr("cx", cx).attr("cy", cy).attr("r", r + 1).attr("fill", palette.bg);
   iconG.append("circle").attr("cx", cx).attr("cy", cy).attr("r", r).attr("fill", faceFill).attr("stroke", color).attr("stroke-width", 2);
   const eyeColor = color;
@@ -848,4 +868,4 @@ export {
   renderJourneyMap,
   renderJourneyMapForExport
 };
-//# sourceMappingURL=chunk-EXOQP75F.js.map
+//# sourceMappingURL=chunk-4WGMGKCZ.js.map

package/dist/{chunk-JED6ZDEE.js → chunk-5HWPEYWB.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-6EK55ART.js";
 import {
   noteBoxSize
-} from "./chunk-TYS6CSS5.js";
+} from "./chunk-UU6LUYUH.js";
 
 // src/utils/notes/build.ts
 function buildPlacedNotes(anchors, noteByNode, direction, collapsedNotes) {
@@ -70,4 +70,4 @@ function buildPlacedNotes(anchors, noteByNode, direction, collapsedNotes) {
 export {
   buildPlacedNotes
 };
-//# sourceMappingURL=chunk-JED6ZDEE.js.map
+//# sourceMappingURL=chunk-5HWPEYWB.js.map