@diagrammo/dgmo 0.54.0 → 0.56.0

package/dist/{chunk-FFVFZLRT.js → chunk-BR2VSKHI.js}

@@ -11,10 +11,19 @@ import {
   initD3Chart,
   renderChartTitle,
   resolveExportPalette
-} from "./chunk-ADYKAKE3.js";
+} from "./chunk-CQ7Y3O67.js";
+import {
+  layoutInlineHeader
+} from "./chunk-6VJCURWU.js";
 import {
   computeLegendLayout
-} from "./chunk-J7HQPVYH.js";
+} from "./chunk-ES66QH6J.js";
+import {
+  TITLE_FONT_SIZE,
+  TITLE_FONT_WEIGHT,
+  TITLE_OFFSET,
+  TITLE_Y
+} from "./chunk-A4GOY3PE.js";
 import {
   FONT_FAMILY
 } from "./chunk-6KFWC4CO.js";
@@ -23,7 +32,7 @@ import {
   getSimpleChartLegendGroups,
   parseChart,
   parseExtendedChart
-} from "./chunk-AQEYUVGJ.js";
+} from "./chunk-CY5KE2P5.js";
 import {
   EMPHASIS_DIM_OPACITY,
   EMPHASIS_DIM_TEXT_OPACITY,
@@ -35,7 +44,7 @@ import {
   LEGEND_HEIGHT,
   LEGEND_PILL_FONT_SIZE,
   legendChromeColors
-} from "./chunk-Q5IHQ4NW.js";
+} from "./chunk-SCJ7CAJF.js";
 import {
   measureText
 } from "./chunk-4ASYQ347.js";
@@ -48,10 +57,10 @@ import {
   mix,
   shapeFill,
   themeBaseBg
-} from "./chunk-JYDMBWRP.js";
+} from "./chunk-42IT4BG2.js";
 import {
   tagAttrKey
-} from "./chunk-AHTTKERF.js";
+} from "./chunk-D5FANMSG.js";
 
 // src/utils/legend-svg.ts
 function esc(s) {
@@ -88,7 +97,10 @@ function renderLegendSvg(groups, options) {
   const wrapWidth = containerWidth > 0 ? containerWidth : 1200;
   const config = {
     groups,
-    position: { placement: "top-center", titleRelation: "below-title" },
+    position: {
+      placement: "top-center",
+      titleRelation: options.align === "left" ? "inline-with-title" : "below-title"
+    },
     mode: "preview"
   };
   const state = { activeGroup: activeGroup ?? null };
@@ -147,7 +159,47 @@ function fmtNum(n) {
   if (Math.abs(n) >= 1e3) return n.toLocaleString("en-US");
   return String(Math.round(n * 100) / 100);
 }
-function reserveHeader(svg, chart, colors, palette, isDark, hasTitle, width) {
+function renderInlineHeader(svg, groups, palette, isDark, width, info) {
+  const {
+    svg: legendSvg,
+    height: legendH,
+    width: legendW
+  } = renderLegendSvg(groups, {
+    palette,
+    isDark,
+    containerWidth: width,
+    activeGroup: groups[0].name,
+    className: "chart-legend",
+    align: "left"
+  });
+  if (!legendSvg) return null;
+  const geom = layoutInlineHeader({
+    requested: true,
+    title: info.title,
+    hasLegend: true,
+    legendWidth: legendW,
+    legendHeight: legendH,
+    containerWidth: width,
+    titleBandHeight: TITLE_OFFSET,
+    legendReserve: 0,
+    titleBaselineY: TITLE_Y,
+    titleFontSize: TITLE_FONT_SIZE
+  });
+  if (!geom.inline) return null;
+  const titleEl = svg.append("text").attr("class", "chart-title").attr("x", geom.titleX).attr("y", TITLE_Y).attr("fill", info.textColor).attr("font-size", TITLE_FONT_SIZE).attr("font-weight", TITLE_FONT_WEIGHT).text(info.title);
+  if (info.titleLineNumber) {
+    titleEl.attr("data-line-number", info.titleLineNumber);
+  }
+  const node = svg.node();
+  if (node) {
+    node.insertAdjacentHTML(
+      "beforeend",
+      `<g transform="translate(${geom.legendX},${geom.legendY})">${legendSvg}</g>`
+    );
+  }
+  return TITLE_OFFSET + 12;
+}
+function reserveHeader(svg, chart, colors, palette, isDark, hasTitle, width, inlineTitle) {
   return injectLegendGroups(
     svg,
     // `no-legend` (#48) → pass no groups; injectLegendGroups then returns the
@@ -156,10 +208,31 @@ function reserveHeader(svg, chart, colors, palette, isDark, hasTitle, width) {
     palette,
     isDark,
     hasTitle,
-    width
+    width,
+    inlineTitle
   );
 }
-function injectLegendGroups(svg, groups, palette, isDark, hasTitle, width) {
+function injectLegendGroups(svg, groups, palette, isDark, hasTitle, width, inlineTitle) {
+  if (inlineTitle && groups.length > 0) {
+    const inset = renderInlineHeader(
+      svg,
+      groups,
+      palette,
+      isDark,
+      width,
+      inlineTitle
+    );
+    if (inset !== null) return inset;
+  }
+  if (inlineTitle) {
+    renderChartTitle(
+      svg,
+      inlineTitle.title,
+      inlineTitle.titleLineNumber,
+      width,
+      inlineTitle.textColor
+    );
+  }
   const titleH = hasTitle ? 40 : 0;
   if (groups.length === 0) return hasTitle ? titleH + 12 : 24;
   const legendY = 8 + titleH;
@@ -202,6 +275,7 @@ function tagDatum(sel, o) {
   if (o.name != null) sel.attr("data-name", o.name);
   if (o.value != null) sel.attr("data-value", String(o.value));
   if (o.color != null) sel.attr("data-color", o.color);
+  if (o.seriesName != null) sel.attr("data-series-name", o.seriesName);
   return sel;
 }
 function drawValueLabel(svg, text, x, y, color, anchor = "middle") {
@@ -210,13 +284,13 @@ function drawValueLabel(svg, text, x, y, color, anchor = "middle") {
 
 // src/charts-d3/bar.ts
 import { scaleBand, scaleLinear } from "d3-scale";
-import { max as d3max } from "d3-array";
+import { max as d3max, min as d3min } from "d3-array";
 function seriesValues(pt, seriesCount) {
   const out = [pt.value];
   for (let s = 1; s < seriesCount; s++) out.push(pt.extraValues?.[s - 1] ?? 0);
   return out;
 }
-function renderBar(svg, chart, width, height, colors, palette, isDark, textColor, mutedColor, hasTitle) {
+function renderBar(svg, chart, width, height, colors, palette, isDark, textColor, mutedColor, hasTitle, inlineTitle) {
   const data = chart.data;
   const seriesNames = chart.seriesNames?.length ? chart.seriesNames : [chart.series ?? ""];
   const stacked = chart.barLayout === "stack";
@@ -231,7 +305,7 @@ function renderBar(svg, chart, width, height, colors, palette, isDark, textColor
   const fillMode = chart.fillMode;
   const colorFor = (seriesIdx, catIdx, override) => {
     if (override) return override;
-    return multiSeries ? colors[seriesIdx % colors.length] : colors[catIdx % colors.length];
+    return multiSeries ? chart.seriesNameColors?.[seriesIdx] ?? colors[seriesIdx % colors.length] : colors[catIdx % colors.length];
   };
   const fillOf = (c) => shapeFill(palette, c, isDark, { mode: fillMode });
   const top = reserveHeader(
@@ -241,12 +315,22 @@ function renderBar(svg, chart, width, height, colors, palette, isDark, textColor
     palette,
     isDark,
     hasTitle,
-    width
+    width,
+    inlineTitle
   );
   const perCat = data.map((d) => seriesValues(d, seriesCount));
-  const maxVal = stacked ? d3max(perCat, (vals) => vals.reduce((a, b) => a + b, 0)) ?? 0 : d3max(perCat, (vals) => d3max(vals) ?? 0) ?? 0;
-  const niceMax = maxVal === 0 ? 1 : maxVal;
-  const leftLabels = horizontal ? data.map((d) => d.label) : [fmtNum(niceMax), fmtNum(niceMax / 2)];
+  const maxVal = stacked ? d3max(
+    perCat,
+    (vals) => vals.filter((v) => v > 0).reduce((a, b) => a + b, 0)
+  ) ?? 0 : d3max(perCat, (vals) => d3max(vals) ?? 0) ?? 0;
+  const minVal = stacked ? d3min(
+    perCat,
+    (vals) => vals.filter((v) => v < 0).reduce((a, b) => a + b, 0)
+  ) ?? 0 : d3min(perCat, (vals) => d3min(vals) ?? 0) ?? 0;
+  const hiVal = Math.max(0, maxVal);
+  const loVal = Math.min(0, minVal);
+  const niceMax = hiVal === 0 && loVal === 0 ? 1 : hiVal;
+  const leftLabels = horizontal ? data.map((d) => d.label) : [fmtNum(niceMax), fmtNum(niceMax / 2), fmtNum(loVal), fmtNum(loVal / 2)];
   const m = {
     top: top + 8,
     right: 32,
@@ -259,7 +343,7 @@ function renderBar(svg, chart, width, height, colors, palette, isDark, textColor
   const catRange = horiz ? [m.top, m.top + plotH] : [m.left, m.left + plotW];
   const cat = scaleBand().domain(data.map((d) => d.label)).range(catRange).padding(0.3);
   const valRange = horiz ? [m.left, m.left + plotW] : [m.top + plotH, m.top];
-  const val = scaleLinear().domain([0, niceMax]).nice().range(valRange);
+  const val = scaleLinear().domain([loVal, niceMax]).nice().range(valRange);
   for (const t of val.ticks(6)) {
     if (horiz) {
       const x = val(t);
@@ -284,7 +368,8 @@ function renderBar(svg, chart, width, height, colors, palette, isDark, textColor
   data.forEach((d, ci) => {
     const base = cat(d.label) ?? 0;
     const vals = seriesValues(d, seriesCount);
-    let acc = 0;
+    let accPos = 0;
+    let accNeg = 0;
     vals.forEach((v, s) => {
       const stroke = colorFor(s, ci, seriesCount === 1 ? d.color : void 0);
       const fill = fillOf(stroke);
@@ -294,9 +379,11 @@ function renderBar(svg, chart, width, height, colors, palette, isDark, textColor
         key: multiSeries ? sName : d.label,
         name: multiSeries ? `${d.label} \xB7 ${sName}` : d.label,
         value: v,
-        color: stroke
+        color: stroke,
+        seriesName: multiSeries ? sName : void 0
       };
       if (stacked) {
+        const acc = v < 0 ? accNeg : accPos;
         if (horiz) {
           const x0 = val(acc);
           const x1 = val(acc + v);
@@ -340,7 +427,8 @@ function renderBar(svg, chart, width, height, colors, palette, isDark, textColor
               textColor
             );
         }
-        acc += v;
+        if (v < 0) accNeg += v;
+        else accPos += v;
       } else {
         const off = inner(s) ?? 0;
         const bw = inner.bandwidth();
@@ -356,13 +444,16 @@ function renderBar(svg, chart, width, height, colors, palette, isDark, textColor
             stroke,
             tag
           );
+          const txt = fmtNum(v);
+          const approxW = txt.length * 7 + 6;
+          const inside = v < 0 ? x1 - approxW < m.left : x1 + approxW > m.left + plotW;
           drawValueLabel(
             svg,
-            fmtNum(v),
-            x1 + 6,
+            txt,
+            v < 0 ? inside ? x1 + 6 : x1 - 6 : inside ? x1 - 6 : x1 + 6,
             base + off + bw / 2 + 4,
             textColor,
-            "start"
+            v < 0 !== inside ? "end" : "start"
           );
         } else {
           const y1 = val(v);
@@ -376,11 +467,13 @@ function renderBar(svg, chart, width, height, colors, palette, isDark, textColor
             stroke,
             tag
           );
+          const yOut = v < 0 ? y1 + 14 : y1 - 6;
+          const yInside = v < 0 ? yOut > m.top + plotH - 2 : yOut < m.top + 2;
           drawValueLabel(
             svg,
             fmtNum(v),
             base + off + bw / 2,
-            y1 - 6,
+            yInside ? v < 0 ? y1 - 6 : y1 + 14 : yOut,
             textColor
           );
         }
@@ -407,7 +500,7 @@ import { line as d3line, area as d3area } from "d3-shape";
 function seriesValue(pt, s) {
   return s === 0 ? pt.value : pt.extraValues?.[s - 1] ?? 0;
 }
-function renderLine(svg, chart, width, height, colors, palette, isDark, textColor, mutedColor, bgColor, hasTitle) {
+function renderLine(svg, chart, width, height, colors, palette, isDark, textColor, mutedColor, bgColor, hasTitle, inlineTitle) {
   const data = chart.data;
   const isArea = chart.fill === true;
   const solid = chart.fillMode === "solid";
@@ -433,7 +526,8 @@ function renderLine(svg, chart, width, height, colors, palette, isDark, textColo
     palette,
     isDark,
     hasTitle,
-    width
+    width,
+    inlineTitle
   );
   const extentFor = (side) => {
     let lo = Infinity;
@@ -585,7 +679,7 @@ function renderPie(svg, chart, width, height, palette, isDark, textColor, topIns
   const MARGIN2 = 6;
   const halfW = width / 2 - MARGIN2;
   const rH = availH / 2 - availH * 0.06;
-  const labelExtent = 1.268 + 0.0428 * maxLabelLen;
+  const labelExtent = 1.27 + 0.06 * maxLabelLen;
   const rLabeled = Math.min(rH, halfW / labelExtent);
   const showLabels = maxLabelLen > 0 && rLabeled >= 45;
   const rPlain = Math.min(rH, halfW * 0.94);
@@ -599,6 +693,7 @@ function renderPie(svg, chart, width, height, palette, isDark, textColor, topIns
   const arcs = d3pie().sort(null).value((d) => d.value)(data.map((d) => ({ value: d.value })));
   const arcGen = d3arc().innerRadius(hasHole ? radius * holeRatio : 0).outerRadius(radius);
   const g = svg.append("g").attr("transform", `translate(${cx},${cy})`);
+  const labelInfos = [];
   arcs.forEach((a, i) => {
     const stroke = strokeFor(i, data[i].color);
     const fill = shapeFill(palette, stroke, isDark, { mode: fillMode });
@@ -612,32 +707,65 @@ function renderPie(svg, chart, width, height, palette, isDark, textColor, topIns
       color: stroke
     });
     if (!showLabels) return;
+    const label = labels[i];
+    if (!label) return;
     const mid = (a.startAngle + a.endAngle) / 2 - Math.PI / 2;
     const rightSide = Math.cos(mid) >= 0;
-    const x0 = Math.cos(mid) * radius;
-    const y0 = Math.sin(mid) * radius;
-    const x1 = Math.cos(mid) * (radius + elbowOut);
-    const y1 = Math.sin(mid) * (radius + elbowOut);
-    const x2 = x1 + (rightSide ? elbowRun : -elbowRun);
-    const label = labels[i];
-    if (label) {
-      const tag = {
+    labelInfos.push({
+      rightSide,
+      x0: Math.cos(mid) * radius,
+      y0: Math.sin(mid) * radius,
+      // Radial stub end — meets the arc at 90° to the circle edge.
+      x1: Math.cos(mid) * (radius + elbowOut),
+      y1: Math.sin(mid) * (radius + elbowOut),
+      idealY: Math.sin(mid) * (radius + elbowOut),
+      y: 0,
+      label,
+      stroke,
+      // Tag the leader-line + label with the same emph-key as the wedge so
+      // hover (baked-CSS :has() and the app's JS dim) emphasizes all three
+      // together; colour the label text to match its segment.
+      tag: {
         line: data[i].lineNumber,
         key: data[i].label,
         name: data[i].label,
         value: `${fmtNum(data[i].value)} (${pct}%)`,
         color: stroke
-      };
-      tagDatum(
-        g.append("polyline").attr("points", `${x0},${y0} ${x1},${y1} ${x2},${y1}`).attr("fill", "none").attr("stroke", stroke).attr("stroke-width", 1),
-        tag
-      );
-      tagDatum(
-        g.append("text").attr("x", x2 + (rightSide ? font * 0.3 : -font * 0.3)).attr("y", y1 + font * 0.3).attr("text-anchor", rightSide ? "start" : "end").attr("fill", stroke).attr("font-size", font).attr("font-family", FONT_FAMILY).text(label),
-        tag
-      );
-    }
+      }
+    });
   });
+  if (showLabels && labelInfos.length > 0) {
+    const labelX = radius + elbowOut + elbowRun;
+    const minGap = font * 1.18;
+    const bound = availH / 2 - font;
+    for (const side of [true, false]) {
+      const group = labelInfos.filter((l) => l.rightSide === side);
+      if (group.length === 0) continue;
+      const topHalf = group.filter((l) => l.idealY < 0).sort((a, b) => b.idealY - a.idealY);
+      const botHalf = group.filter((l) => l.idealY >= 0).sort((a, b) => a.idealY - b.idealY);
+      topHalf.forEach((l, i) => {
+        l.y = i === 0 ? l.idealY : Math.min(l.idealY, topHalf[i - 1].y - minGap);
+        l.y = Math.max(l.y, -bound);
+      });
+      botHalf.forEach((l, i) => {
+        l.y = i === 0 ? l.idealY : Math.max(l.idealY, botHalf[i - 1].y + minGap);
+        l.y = Math.min(l.y, bound);
+      });
+      const sx = side ? 1 : -1;
+      const tx = sx * labelX;
+      for (const l of group) {
+        const xr = Math.abs(l.y0) < 1e-3 ? l.x1 : l.y * l.x0 / l.y0;
+        tagDatum(
+          g.append("polyline").attr("points", `${l.x0},${l.y0} ${xr},${l.y} ${tx},${l.y}`).attr("fill", "none").attr("stroke", l.stroke).attr("stroke-width", 1),
+          l.tag
+        );
+        tagDatum(
+          g.append("text").attr("x", tx + sx * font * 0.3).attr("y", l.y + font * 0.3).attr("text-anchor", side ? "start" : "end").attr("fill", l.stroke).attr("font-size", font).attr("font-family", FONT_FAMILY).text(l.label),
+          l.tag
+        );
+      }
+    }
+  }
   if (hasHole && !chart.noCenterTotal) {
     g.append("text").attr("text-anchor", "middle").attr("y", Math.max(4, 8 * labelScale)).attr("fill", textColor).attr("font-size", Math.max(11, 26 * labelScale)).attr("font-weight", 700).attr("font-family", FONT_FAMILY).text(fmtNum(total));
   }
@@ -1408,13 +1536,166 @@ function renderChord(svg, chart, width, height, colors, palette, isDark, textCol
 
 // src/charts-d3/function.ts
 import { scaleLinear as scaleLinear4 } from "d3-scale";
-import { line as d3line2 } from "d3-shape";
+import { line as d3line2, area as d3area2 } from "d3-shape";
 
 // src/utils/expr-eval.ts
+var FUNCS = {
+  sin: Math.sin,
+  cos: Math.cos,
+  tan: Math.tan,
+  ln: Math.log,
+  log: Math.log10,
+  exp: Math.exp,
+  sqrt: Math.sqrt,
+  abs: Math.abs
+};
+function tokenize(expr) {
+  const tokens = [];
+  let i = 0;
+  const n = expr.length;
+  while (i < n) {
+    const c = expr.charAt(i);
+    if (c === " " || c === "	") {
+      i++;
+      continue;
+    }
+    if (c >= "0" && c <= "9" || c === ".") {
+      let j = i + 1;
+      while (/[0-9.]/.test(expr.charAt(j))) j++;
+      const exp = expr.charAt(j);
+      if (exp === "e" || exp === "E") {
+        let k = j + 1;
+        const sign = expr.charAt(k);
+        if (sign === "+" || sign === "-") k++;
+        if (/[0-9]/.test(expr.charAt(k))) {
+          while (/[0-9]/.test(expr.charAt(k))) k++;
+          j = k;
+        }
+      }
+      const num = Number(expr.slice(i, j));
+      if (!isFinite(num)) throw new Error("bad number");
+      tokens.push({ t: "num", v: num });
+      i = j;
+      continue;
+    }
+    if (/[a-zA-Z]/.test(c)) {
+      let j = i + 1;
+      while (/[a-zA-Z0-9]/.test(expr.charAt(j))) j++;
+      tokens.push({ t: "id", v: expr.slice(i, j).toLowerCase() });
+      i = j;
+      continue;
+    }
+    if ("+-*/^()".includes(c)) {
+      tokens.push({ t: "op", v: c });
+      i++;
+      continue;
+    }
+    throw new Error(`unexpected char: ${c}`);
+  }
+  return tokens;
+}
+var Parser = class {
+  constructor(tokens, x) {
+    this.tokens = tokens;
+    this.x = x;
+  }
+  tokens;
+  x;
+  pos = 0;
+  peek() {
+    return this.tokens[this.pos];
+  }
+  eatOp(v) {
+    const tk = this.peek();
+    if (tk?.t !== "op" || tk.v !== v) throw new Error(`expected ${v}`);
+    this.pos++;
+  }
+  evaluate() {
+    const value = this.parseExpr();
+    if (this.pos !== this.tokens.length) throw new Error("trailing input");
+    return value;
+  }
+  // expr = term (('+' | '-') term)*
+  parseExpr() {
+    let value = this.parseTerm();
+    for (; ; ) {
+      const tk = this.peek();
+      if (tk?.t === "op" && (tk.v === "+" || tk.v === "-")) {
+        this.pos++;
+        const rhs = this.parseTerm();
+        value = tk.v === "+" ? value + rhs : value - rhs;
+      } else break;
+    }
+    return value;
+  }
+  // term = factor (('*' | '/') factor)*
+  parseTerm() {
+    let value = this.parseFactor();
+    for (; ; ) {
+      const tk = this.peek();
+      if (tk?.t === "op" && (tk.v === "*" || tk.v === "/")) {
+        this.pos++;
+        const rhs = this.parseFactor();
+        value = tk.v === "*" ? value * rhs : value / rhs;
+      } else break;
+    }
+    return value;
+  }
+  // factor = ('+' | '-') factor | power
+  parseFactor() {
+    const tk = this.peek();
+    if (tk?.t === "op" && (tk.v === "+" || tk.v === "-")) {
+      this.pos++;
+      const operand = this.parseFactor();
+      return tk.v === "-" ? -operand : operand;
+    }
+    return this.parsePower();
+  }
+  // power = primary ('^' factor)?  — right-associative
+  parsePower() {
+    const base = this.parsePrimary();
+    const tk = this.peek();
+    if (tk?.t === "op" && tk.v === "^") {
+      this.pos++;
+      const exponent = this.parseFactor();
+      return base ** exponent;
+    }
+    return base;
+  }
+  // primary = number | const | 'x' | func '(' expr ')' | '(' expr ')'
+  parsePrimary() {
+    const tk = this.peek();
+    if (!tk) throw new Error("unexpected end");
+    if (tk.t === "num") {
+      this.pos++;
+      return tk.v;
+    }
+    if (tk.t === "op" && tk.v === "(") {
+      this.pos++;
+      const value = this.parseExpr();
+      this.eatOp(")");
+      return value;
+    }
+    if (tk.t === "id") {
+      this.pos++;
+      if (tk.v === "x") return this.x;
+      if (tk.v === "pi") return Math.PI;
+      if (tk.v === "e") return Math.E;
+      const fn = FUNCS[tk.v];
+      if (fn) {
+        this.eatOp("(");
+        const arg = this.parseExpr();
+        this.eatOp(")");
+        return fn(arg);
+      }
+      throw new Error(`unknown identifier: ${tk.v}`);
+    }
+    throw new Error("unexpected token");
+  }
+};
 function evaluateExpression(expr, x) {
   try {
-    const processed = expr.replace(/\bpi\b/gi, String(Math.PI)).replace(/\be\b/g, String(Math.E)).replace(/\bsin\s*\(/gi, "Math.sin(").replace(/\bcos\s*\(/gi, "Math.cos(").replace(/\btan\s*\(/gi, "Math.tan(").replace(/\bln\s*\(/gi, "Math.log(").replace(/\blog\s*\(/gi, "Math.log10(").replace(/\bexp\s*\(/gi, "Math.exp(").replace(/\bsqrt\s*\(/gi, "Math.sqrt(").replace(/\babs\s*\(/gi, "Math.abs(").replace(/\bx\b/gi, `(${x})`).replace(/\^/g, "**");
-    const result = new Function(`return ${processed}`)();
+    const result = new Parser(tokenize(expr), x).evaluate();
     return typeof result === "number" && isFinite(result) ? result : NaN;
   } catch {
     return NaN;
@@ -1423,7 +1704,7 @@ function evaluateExpression(expr, x) {
 
 // src/charts-d3/function.ts
 var SAMPLES = 200;
-function renderFunction(svg, chart, width, height, colors, textColor, mutedColor, topInset) {
+function renderFunction(svg, chart, width, height, colors, textColor, mutedColor, topInset, palette, isDark) {
   const fns = chart.functions ?? [];
   if (fns.length === 0) return;
   const xr = chart.xRange ?? { min: -10, max: 10 };
@@ -1471,7 +1752,15 @@ function renderFunction(svg, chart, width, height, colors, textColor, mutedColor
     svg.append("line").attr("x1", xx).attr("x2", xx).attr("y1", m.top).attr("y2", m.top + plotH).attr("stroke", mutedColor).attr("stroke-opacity", t === 0 ? 0.6 : 0.2);
     svg.append("text").attr("class", "dgmo-tick").attr("x", xx).attr("y", m.top + plotH + 18).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", TICK_FONT).attr("font-family", FONT_FAMILY).text(fmtNum(t));
   }
-  const gen = d3line2().defined((p) => isFinite(p[1]) && p[1] >= yLo - 1 && p[1] <= yHi + 1).x((p) => x(p[0])).y((p) => y(p[1]));
+  const inRange = (p) => isFinite(p[1]) && p[1] >= yLo - 1 && p[1] <= yHi + 1;
+  if (chart.fill === true) {
+    const solid = chart.fillMode === "solid";
+    const areaGen = d3area2().defined(inRange).x((p) => x(p[0])).y0(y(Math.max(y.domain()[0], 0))).y1((p) => y(p[1]));
+    for (const c of curves) {
+      svg.append("path").attr("class", "dgmo-series-area").attr("d", areaGen(c.pts) ?? "").attr("fill", solid ? c.color : shapeFill(palette, c.color, isDark)).attr("stroke", "none").attr("data-series-name", c.name);
+    }
+  }
+  const gen = d3line2().defined(inRange).x((p) => x(p[0])).y((p) => y(p[1]));
   for (const c of curves) {
     const path = svg.append("path").attr("d", gen(c.pts) ?? "").attr("fill", "none").attr("stroke", c.color).attr("stroke-width", 1.75).attr("stroke-linejoin", "round").attr("data-series-name", c.name);
     tagDatum(path, { line: c.line, key: c.name, name: c.name, color: c.color });
@@ -1500,6 +1789,25 @@ var D3_DATA_CHART_TYPES = /* @__PURE__ */ new Set([...STANDARD, ...EXTENDED]);
 function supportsD3DataChart(type) {
   return D3_DATA_CHART_TYPES.has(type);
 }
+var INLINE_LEGEND_TYPES = /* @__PURE__ */ new Set([
+  "bar",
+  "line",
+  "radar",
+  "scatter",
+  "function"
+]);
+function inlineTitleFor(chart, hasTitle, textColor) {
+  if (!hasTitle || !chart.legendInline || chart.noLegend || !INLINE_LEGEND_TYPES.has(chart.type)) {
+    return void 0;
+  }
+  return {
+    title: chart.title,
+    ...chart.titleLineNumber !== void 0 && {
+      titleLineNumber: chart.titleLineNumber
+    },
+    textColor
+  };
+}
 function firstNonCommentToken(content) {
   for (const raw of content.split("\n")) {
     const l = raw.trim();
@@ -1547,7 +1855,8 @@ function renderInto(s, content, palette, isDark, width, height, textColor, muted
   const std = forceExtended ? null : parseChart(content, palette);
   if (std && !std.error && std.data.length > 0 && STANDARD.has(std.type)) {
     const hasTitle2 = !std.noTitle && !!std.title;
-    if (hasTitle2)
+    const inlineTitle2 = inlineTitleFor(std, hasTitle2, textColor);
+    if (hasTitle2 && !inlineTitle2)
       renderChartTitle(s, std.title, std.titleLineNumber, width, textColor);
     switch (std.type) {
       case "bar":
@@ -1561,7 +1870,8 @@ function renderInto(s, content, palette, isDark, width, height, textColor, muted
           isDark,
           textColor,
           mutedColor,
-          hasTitle2
+          hasTitle2,
+          inlineTitle2
         );
         return true;
       case "line":
@@ -1576,7 +1886,8 @@ function renderInto(s, content, palette, isDark, width, height, textColor, muted
           textColor,
           mutedColor,
           bgColor,
-          hasTitle2
+          hasTitle2,
+          inlineTitle2
         );
         return true;
       case "pie":
@@ -1599,7 +1910,8 @@ function renderInto(s, content, palette, isDark, width, height, textColor, muted
           palette,
           isDark,
           hasTitle2,
-          width
+          width,
+          inlineTitle2
         );
         renderRadar(
           s,
@@ -1633,7 +1945,8 @@ function renderInto(s, content, palette, isDark, width, height, textColor, muted
   if (ext.error || !EXTENDED.has(ext.type)) return false;
   const seriesColors = getSeriesColors(palette);
   const hasTitle = !ext.noTitle && !!ext.title;
-  if (hasTitle)
+  const inlineTitle = inlineTitleFor(ext, hasTitle, textColor);
+  if (hasTitle && !inlineTitle)
     renderChartTitle(s, ext.title, ext.titleLineNumber, width, textColor);
   switch (ext.type) {
     case "funnel":
@@ -1669,7 +1982,8 @@ function renderInto(s, content, palette, isDark, width, height, textColor, muted
         palette,
         isDark,
         hasTitle,
-        width
+        width,
+        inlineTitle
       );
       renderScatter(
         s,
@@ -1718,7 +2032,8 @@ function renderInto(s, content, palette, isDark, width, height, textColor, muted
         palette,
         isDark,
         hasTitle,
-        width
+        width,
+        inlineTitle
       );
       renderFunction(
         s,
@@ -1728,7 +2043,9 @@ function renderInto(s, content, palette, isDark, width, height, textColor, muted
         seriesColors,
         textColor,
         mutedColor,
-        top
+        top,
+        palette,
+        isDark
       );
       return true;
     }
@@ -1744,4 +2061,4 @@ export {
   supportsD3DataChart,
   renderDataChartD3
 };
-//# sourceMappingURL=chunk-FFVFZLRT.js.map
+//# sourceMappingURL=chunk-BR2VSKHI.js.map