@diagrammo/dgmo 0.51.0 → 0.53.0

package/dist/{chunk-4VWJ4LW2.js → chunk-SG4PRYO3.js}

@@ -2,7 +2,7 @@ import {
   computeQuadrantPointLabels,
   rectCircleOverlap,
   rectsOverlap
-} from "./chunk-VL2O2F3W.js";
+} from "./chunk-VHO3YBTB.js";
 import {
   EXPORT_HEIGHT,
   EXPORT_WIDTH,
@@ -11,28 +11,19 @@ import {
   initD3Chart,
   renderChartTitle,
   resolveExportPalette
-} from "./chunk-U6EQI3U6.js";
+} from "./chunk-ADYKAKE3.js";
 import {
   computeLegendLayout
-} from "./chunk-YAA6IID3.js";
+} from "./chunk-774C2FF3.js";
 import {
   FONT_FAMILY
 } from "./chunk-6KFWC4CO.js";
-import {
-  LEGEND_DOT_R,
-  LEGEND_ENTRY_FONT_SIZE,
-  LEGEND_HEIGHT,
-  LEGEND_PILL_FONT_SIZE
-} from "./chunk-QOOUC2J5.js";
-import {
-  measureText
-} from "./chunk-WCT3NYCV.js";
 import {
   getExtendedChartLegendGroups,
   getSimpleChartLegendGroups,
   parseChart,
   parseExtendedChart
-} from "./chunk-QZPEGJOM.js";
+} from "./chunk-Q7AH665U.js";
 import {
   contrastText,
   getSegmentColors,
@@ -40,11 +31,21 @@ import {
   hexToHSL,
   hslToHex,
   mix,
-  shapeFill
-} from "./chunk-P6T66CCZ.js";
+  shapeFill,
+  themeBaseBg
+} from "./chunk-JYDMBWRP.js";
+import {
+  LEGEND_DOT_R,
+  LEGEND_ENTRY_FONT_SIZE,
+  LEGEND_HEIGHT,
+  LEGEND_PILL_FONT_SIZE
+} from "./chunk-4RGZFA7H.js";
+import {
+  measureText
+} from "./chunk-4ASYQ347.js";
 import {
   tagAttrKey
-} from "./chunk-467TVMQL.js";
+} from "./chunk-CMVZWP32.js";
 
 // src/utils/legend-svg.ts
 function esc(s) {
@@ -144,7 +145,9 @@ function fmtNum(n) {
 function reserveHeader(svg, chart, colors, palette, isDark, hasTitle, width) {
   return injectLegendGroups(
     svg,
-    getSimpleChartLegendGroups(chart, colors),
+    // `no-legend` (#48) → pass no groups; injectLegendGroups then returns the
+    // title-only top inset, so the legend band collapses rather than blanking.
+    chart.noLegend ? [] : getSimpleChartLegendGroups(chart, colors),
     palette,
     isDark,
     hasTitle,
@@ -220,12 +223,12 @@ function renderBar(svg, chart, width, height, colors, palette, isDark, textColor
   ) : 1;
   const horizontal = chart.orientation === "horizontal";
   const multiSeries = seriesCount > 1;
-  const solid = chart.solidFill === true;
+  const fillMode = chart.fillMode;
   const colorFor = (seriesIdx, catIdx, override) => {
     if (override) return override;
     return multiSeries ? colors[seriesIdx % colors.length] : colors[catIdx % colors.length];
   };
-  const fillOf = (c) => solid ? c : shapeFill(palette, c, isDark);
+  const fillOf = (c) => shapeFill(palette, c, isDark, { mode: fillMode });
   const top = reserveHeader(
     svg,
     chart,
@@ -402,7 +405,7 @@ function seriesValue(pt, s) {
 function renderLine(svg, chart, width, height, colors, palette, isDark, textColor, mutedColor, bgColor, hasTitle) {
   const data = chart.data;
   const isArea = chart.fill === true;
-  const solid = chart.solidFill === true;
+  const solid = chart.fillMode === "solid";
   const seriesNames = chart.seriesNames?.length ? chart.seriesNames : [chart.series ?? ""];
   const seriesCount = Math.max(
     1,
@@ -558,7 +561,7 @@ function renderPie(svg, chart, width, height, palette, isDark, textColor, topIns
   if (data.length === 0) return;
   const holeRatio = chart.hole;
   const hasHole = holeRatio !== void 0;
-  const solid = chart.solidFill === true;
+  const fillMode = chart.fillMode;
   const total = data.reduce((a, d) => a + d.value, 0);
   const cx = width / 2;
   const top = topInset + 12;
@@ -593,7 +596,7 @@ function renderPie(svg, chart, width, height, palette, isDark, textColor, topIns
   const g = svg.append("g").attr("transform", `translate(${cx},${cy})`);
   arcs.forEach((a, i) => {
     const stroke = strokeFor(i, data[i].color);
-    const fill = solid ? stroke : shapeFill(palette, stroke, isDark);
+    const fill = shapeFill(palette, stroke, isDark, { mode: fillMode });
     const pct = Math.round(data[i].value / total * 100);
     const slice = g.append("path").attr("d", arcGen(a) ?? "").attr("fill", fill).attr("stroke", stroke).attr("stroke-width", 1.5);
     tagDatum(slice, {
@@ -644,7 +647,8 @@ function renderRadar(svg, chart, width, height, colors, palette, isDark, textCol
   const data = chart.data;
   const n = data.length;
   if (n < 3) return;
-  const solid = chart.solidFill === true;
+  const fillMode = chart.fillMode;
+  const solid = fillMode === "solid";
   const seriesNames = chart.seriesNames?.length ? chart.seriesNames : [chart.series ?? ""];
   const seriesCount = Math.max(
     1,
@@ -688,7 +692,10 @@ function renderRadar(svg, chart, width, height, colors, palette, isDark, textCol
     const seriesLine = chart.seriesNameLineNumbers?.[s];
     if (seriesLine !== void 0) g.attr("data-line-number", seriesLine);
     const poly = data.map((d, i) => pt(i, seriesValue2(d, s) / maxValue * radius).join(",")).join(" ");
-    g.append("polygon").attr("points", poly).attr("fill", solid || multi ? color : shapeFill(palette, color, isDark)).attr("fill-opacity", solid ? 0.6 : multi ? 0.2 : 1).attr("stroke", color).attr("stroke-width", 2);
+    g.append("polygon").attr("points", poly).attr(
+      "fill",
+      fillMode === "outline" ? "none" : solid || multi ? color : shapeFill(palette, color, isDark)
+    ).attr("fill-opacity", solid ? 0.6 : multi ? 0.2 : 1).attr("stroke", color).attr("stroke-width", 2);
     data.forEach((d, i) => {
       const v = seriesValue2(d, s);
       const [x, y] = pt(i, v / maxValue * radius);
@@ -719,7 +726,7 @@ function renderPolarArea(svg, chart, width, height, palette, isDark, textColor,
   const data = chart.data.filter((d) => d.value > 0);
   const n = data.length;
   if (n === 0) return;
-  const solid = chart.solidFill === true;
+  const fillMode = chart.fillMode;
   const total = data.reduce((a, d) => a + d.value, 0);
   const maxValue = Math.max(...data.map((d) => d.value)) || 1;
   const cx = width / 2;
@@ -737,7 +744,7 @@ function renderPolarArea(svg, chart, width, height, palette, isDark, textColor,
     const a1 = a0 + seg;
     const arcGen = d3arc2().innerRadius(innerR).outerRadius(r).startAngle(a0).endAngle(a1);
     const pct = Math.round(d.value / total * 100);
-    const sector = g.append("path").attr("d", arcGen({}) ?? "").attr("fill", solid ? stroke : shapeFill(palette, stroke, isDark)).attr("stroke", stroke).attr("stroke-width", 2);
+    const sector = g.append("path").attr("d", arcGen({}) ?? "").attr("fill", shapeFill(palette, stroke, isDark, { mode: fillMode })).attr("stroke", stroke).attr("stroke-width", 2);
     tagDatum(sector, {
       line: d.lineNumber,
       key: d.label,
@@ -768,7 +775,7 @@ function renderFunnel(svg, chart, width, height, colors, palette, isDark, topIns
   const sorted = [...chart.data].sort((a, b) => b.value - a.value);
   const n = sorted.length;
   if (n === 0) return;
-  const solid = chart.solidFill === true;
+  const fillMode = chart.fillMode;
   const top = topInset + 8;
   const bottom = height - 30;
   const H = bottom - top;
@@ -826,7 +833,7 @@ function renderFunnel(svg, chart, width, height, colors, palette, isDark, topIns
   ({ plotW, cx } = layout(rightW));
   sorted.forEach((d, i) => {
     const stroke = d.color ?? colors[chart.data.indexOf(d) % colors.length];
-    const fill = solid ? stroke : shapeFill(palette, stroke, isDark);
+    const fill = shapeFill(palette, stroke, isDark, { mode: fillMode });
     const { topW, botW } = bandWidthsAt(plotW, i);
     const y0 = top + i * bandH;
     const y1 = y0 + bandH;
@@ -850,7 +857,7 @@ function renderFunnel(svg, chart, width, height, colors, palette, isDark, topIns
     const valueInside = valueInsideAt(plotW, i);
     if (valueInside) {
       const valueSize = valueSizeAt(plotW, i);
-      const valueFill = solid ? contrastText(fill, palette.textOnFillLight, palette.textOnFillDark) : stroke;
+      const valueFill = fillMode === "solid" ? contrastText(fill, palette.textOnFillLight, palette.textOnFillDark) : stroke;
       svg.append("text").attr("x", cx).attr("y", yMid + valueSize * 0.35).attr("text-anchor", "middle").attr("fill", valueFill).attr("font-size", valueSize).attr("font-weight", 700).attr("font-family", FONT_FAMILY).text(fmtNum(d.value));
     }
     const showValueRight = !chart.noValue && !valueInside;
@@ -883,12 +890,14 @@ function renderHeatmap(svg, chart, width, height, palette, isDark, textColor, bg
       minValue = Math.min(minValue, v);
       maxValue = Math.max(maxValue, v);
     }
-  const solid = chart.solidFill === true;
+  const outline = chart.fillMode === "outline";
+  const fillMode = outline || chart.fillMode === "solid" ? "solid" : void 0;
+  const baseBg = themeBaseBg(palette, isDark);
   const gradientStops = [
-    shapeFill(palette, palette.primary, isDark, { solid }),
-    shapeFill(palette, palette.colors.cyan, isDark, { solid }),
-    shapeFill(palette, palette.colors.yellow, isDark, { solid }),
-    shapeFill(palette, palette.colors.orange, isDark, { solid })
+    shapeFill(palette, palette.primary, isDark, { mode: fillMode }),
+    shapeFill(palette, palette.colors.cyan, isDark, { mode: fillMode }),
+    shapeFill(palette, palette.colors.yellow, isDark, { mode: fillMode }),
+    shapeFill(palette, palette.colors.orange, isDark, { mode: fillMode })
   ];
   const gradientAt = (t) => {
     const tt = Math.max(0, Math.min(1, t));
@@ -938,25 +947,26 @@ function renderHeatmap(svg, chart, width, height, palette, isDark, textColor, bg
     svg.append("text").attr("class", "dgmo-axis-label").attr("data-filter-attr", "data-row-key").attr("data-filter-value", row.label).attr("x", left - 10).attr("y", top + ri * ch + ch / 2 + 4).attr("text-anchor", "end").attr("fill", textColor).attr("font-size", 13).attr("font-family", FONT_FAMILY).text(row.label);
     row.values.forEach((v, ci) => {
       const t = maxValue === minValue ? 0.5 : (v - minValue) / (maxValue - minValue);
-      const cell = gradientAt(t);
+      const ramp = gradientAt(t);
+      const cell = outline ? baseBg : ramp;
       const colLabel = cols[ci] ?? `Col ${ci + 1}`;
       const cellKey = `${row.label} \xB7 ${colLabel}`;
-      const r = svg.append("rect").attr("x", left + ci * cw).attr("y", top + ri * ch).attr("width", cw).attr("height", ch).attr("fill", cell).attr("stroke", bgColor).attr("stroke-width", 2).attr("data-row-key", row.label).attr("data-col-key", colLabel);
+      const r = svg.append("rect").attr("x", left + ci * cw).attr("y", top + ri * ch).attr("width", cw).attr("height", ch).attr("fill", cell).attr("stroke", outline ? ramp : bgColor).attr("stroke-width", outline ? 1.5 : 2).attr("data-row-key", row.label).attr("data-col-key", colLabel);
       tagDatum(r, {
         line: row.lineNumber,
         key: cellKey,
         name: cellKey,
         value: fmtNum(v),
-        color: cell
+        color: ramp
       });
       if (!chart.noValue) {
-        const label = svg.append("text").attr("x", left + ci * cw + cw / 2).attr("y", top + ri * ch + ch / 2 + cellFont / 3).attr("text-anchor", "middle").attr("fill", labelTint(cell)).attr("font-size", cellFont).attr("font-weight", 600).attr("font-family", FONT_FAMILY).text(fmtNum(v));
+        const label = svg.append("text").attr("x", left + ci * cw + cw / 2).attr("y", top + ri * ch + ch / 2 + cellFont / 3).attr("text-anchor", "middle").attr("fill", labelTint(ramp)).attr("font-size", cellFont).attr("font-weight", 600).attr("font-family", FONT_FAMILY).text(fmtNum(v));
         tagDatum(label, {
           line: row.lineNumber,
           key: cellKey,
           name: cellKey,
           value: fmtNum(v),
-          color: cell
+          color: ramp
         });
         label.attr("data-row-key", row.label).attr("data-col-key", colLabel);
       }
@@ -1029,7 +1039,7 @@ function placeScatterHoverValue(cx, cy, r, labelText, valueText, labelRects, cir
 function renderScatter(svg, chart, width, height, colors, palette, isDark, textColor, mutedColor, topInset) {
   const points = chart.scatterPoints ?? [];
   if (points.length === 0) return;
-  const solid = chart.solidFill === true;
+  const fillMode = chart.fillMode;
   const hasSize = points.some((p) => p.size !== void 0);
   const categories = [
     ...new Set(points.map((p) => p.category).filter(Boolean))
@@ -1111,7 +1121,7 @@ function renderScatter(svg, chart, width, height, colors, palette, isDark, textC
   points.forEach((p, i) => {
     const stroke = p.color ?? (p.category ? catColor(p.category, catIndex.get(p.category) ?? 0) : colors[i % colors.length]);
     const r = radii[i];
-    const dot = svg.append("circle").attr("cx", x(p.x)).attr("cy", y(p.y)).attr("r", r).attr("fill", solid ? stroke : shapeFill(palette, stroke, isDark)).attr("fill-opacity", FILL_OPACITY).attr("stroke", stroke).attr("stroke-width", 2);
+    const dot = svg.append("circle").attr("cx", x(p.x)).attr("cy", y(p.y)).attr("r", r).attr("fill", shapeFill(palette, stroke, isDark, { mode: fillMode })).attr("fill-opacity", FILL_OPACITY).attr("stroke", stroke).attr("stroke-width", 2);
     tagDatum(dot, {
       line: p.lineNumber,
       key: p.name,
@@ -1162,7 +1172,7 @@ var NODE_GAP = 14;
 function renderSankey(svg, chart, width, height, colors, bgColor, textColor, topInset) {
   const links = chart.links ?? [];
   if (links.length === 0) return;
-  const solid = chart.solidFill === true;
+  const solid = chart.fillMode === "solid";
   const names = Array.from(new Set(links.flatMap((l) => [l.source, l.target])));
   const node = /* @__PURE__ */ new Map();
   names.forEach(
@@ -1264,7 +1274,9 @@ function renderSankey(svg, chart, width, height, colors, bgColor, textColor, top
     ).attr("fill", color).attr("fill-opacity", 0.6);
     tagDatum(ribbon, {
       line: l.lineNumber,
-      key: `link:${s.name}\0${t.name}`,
+      // U+241F (symbol-for-unit-separator) — collision-proof AND XML-legal;
+      // a raw control char here corrupts the exported SVG (data-emph-key).
+      key: `link:${s.name}\u241F${t.name}`,
       name: `${s.name} \u2192 ${t.name}`,
       value: String(l.value),
       color: s.raw
@@ -1291,7 +1303,7 @@ function renderSankey(svg, chart, width, height, colors, bgColor, textColor, top
 function renderChord(svg, chart, width, height, colors, palette, isDark, textColor, topInset) {
   const links = chart.links ?? [];
   if (links.length === 0) return;
-  const solid = chart.solidFill === true;
+  const fillMode = chart.fillMode;
   const names = Array.from(new Set(links.flatMap((l) => [l.source, l.target])));
   const n = names.length;
   const idx = new Map(names.map((nm, i) => [nm, i]));
@@ -1351,7 +1363,7 @@ function renderChord(svg, chart, width, height, colors, palette, isDark, textCol
   names.forEach((nm, i) => {
     const [px, py] = pos(i);
     const stroke = colorOf(i);
-    const dot = svg.append("circle").attr("cx", px).attr("cy", py).attr("r", 10).attr("fill", solid ? stroke : shapeFill(palette, stroke, isDark)).attr("stroke", stroke).attr("stroke-width", 2);
+    const dot = svg.append("circle").attr("cx", px).attr("cy", py).attr("r", 10).attr("fill", shapeFill(palette, stroke, isDark, { mode: fillMode })).attr("stroke", stroke).attr("stroke-width", 2);
     tagDatum(dot, { key: `node:${nm}`, name: nm, color: stroke });
     const c = Math.cos(angle(i));
     const lx = px + c * 16;
@@ -1549,7 +1561,7 @@ function renderInto(s, content, palette, isDark, width, height, textColor, muted
         );
         return true;
       case "radar": {
-        const groups = getSimpleChartLegendGroups(std, colors);
+        const groups = std.noLegend ? [] : getSimpleChartLegendGroups(std, colors);
         const top = injectLegendGroups(
           s,
           groups,
@@ -1619,7 +1631,7 @@ function renderInto(s, content, palette, isDark, width, height, textColor, muted
       );
       return true;
     case "scatter": {
-      const groups = getExtendedChartLegendGroups(ext, seriesColors);
+      const groups = ext.noLegend ? [] : getExtendedChartLegendGroups(ext, seriesColors);
       const top = injectLegendGroups(
         s,
         groups,
@@ -1668,7 +1680,7 @@ function renderInto(s, content, palette, isDark, width, height, textColor, muted
       );
       return true;
     case "function": {
-      const groups = getExtendedChartLegendGroups(ext, seriesColors);
+      const groups = ext.noLegend ? [] : getExtendedChartLegendGroups(ext, seriesColors);
       const top = injectLegendGroups(
         s,
         groups,
@@ -1701,4 +1713,4 @@ export {
   supportsD3DataChart,
   renderDataChartD3
 };
-//# sourceMappingURL=chunk-4VWJ4LW2.js.map
+//# sourceMappingURL=chunk-SG4PRYO3.js.map

package/dist/{chunk-RBHWPDBB.js → chunk-SGPFVDUL.js}

@@ -7,7 +7,7 @@ import {
   tagAttrKey,
   validateTagGroupNames,
   validateTagValues
-} from "./chunk-467TVMQL.js";
+} from "./chunk-CMVZWP32.js";
 import {
   normalizeName
 } from "./chunk-NOTA6TEI.js";
@@ -20,13 +20,13 @@ 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/org/parser.ts
 var CONTAINER_RE = /^\[([^\]]+)\]$/;
@@ -40,8 +40,12 @@ var KNOWN_OPTIONS = /* @__PURE__ */ new Set([
 var KNOWN_BOOLEANS = /* @__PURE__ */ new Set([
   "show-sub-node-count",
   "direction-tb",
-  "solid-fill",
-  "no-title"
+  "direction-lr",
+  "fill-tint",
+  "fill-solid",
+  "fill-outline",
+  "no-title",
+  "no-legend"
 ]);
 function looksLikeOrg(content) {
   for (const line of content.split("\n")) {
@@ -59,6 +63,7 @@ function parseOrg(content, palette) {
     roots: [],
     tagGroups: [],
     options,
+    direction: "TB",
     diagnostics: [],
     error: null
   };
@@ -162,7 +167,12 @@ function parseOrg(content, palette) {
         }
       }
       if (KNOWN_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;
       }
     }
@@ -285,6 +295,7 @@ function parseOrg(content, palette) {
     result.diagnostics.push(diag);
     result.error = formatDgmoError(diag);
   }
+  result.direction = options["direction-lr"] ? "LR" : "TB";
   return result;
 }
 function parseNodeLabel(trimmed, _indent, lineNumber, _palette, counter, metaAliasMap = /* @__PURE__ */ new Map(), diagnostics, nameAliasMap) {
@@ -351,4 +362,4 @@ export {
   looksLikeOrg,
   parseOrg
 };
-//# sourceMappingURL=chunk-RBHWPDBB.js.map
+//# sourceMappingURL=chunk-SGPFVDUL.js.map