@diagrammo/dgmo 0.48.2 → 0.50.0

package/dist/index.js

@@ -1,7 +1,8 @@
 import {
   getEmbedSvgViewBox,
-  normalizeSvgForEmbed
-} from "./chunk-ODZVHU3R.js";
+  normalizeSvgForEmbed,
+  renderErrorCard
+} from "./chunk-L2ZTFHAY.js";
 import {
   completeMapPlaces,
   completeMapRegions,
@@ -10,79 +11,91 @@ import {
 } from "./chunk-SQAG3UXH.js";
 import {
   MAP_DIAGNOSTICS
-} from "./chunk-3SMGIJDD.js";
+} from "./chunk-HHXOONLX.js";
 import {
   decodeDiagramUrl,
   encodeDiagramUrl,
   render
-} from "./chunk-PZMETGLY.js";
-import "./chunk-PBAHEPLQ.js";
-import {
-  D3_DATA_CHART_TYPES,
-  renderDataChartD3,
-  supportsD3DataChart
-} from "./chunk-OJR3MQYV.js";
-import "./chunk-UWN33VNX.js";
+} from "./chunk-NISQC5KW.js";
+import "./chunk-XCLHOZAM.js";
 import "./chunk-YRYKTYMQ.js";
-import "./chunk-U6EQI3U6.js";
-import "./chunk-PWIHZ6NJ.js";
 import "./chunk-YYVTBZZC.js";
-import "./chunk-YAA6IID3.js";
-import "./chunk-A4GOY3PE.js";
-import {
-  FONT_FAMILY
-} from "./chunk-6KFWC4CO.js";
-import "./chunk-QOOUC2J5.js";
-import {
-  measureText,
-  truncateText
-} from "./chunk-WCT3NYCV.js";
+import "./chunk-QUJGFNFN.js";
 import {
   REGISTRY_BY_ID,
   chartTypes,
   parseDgmo
-} from "./chunk-HSH73DP6.js";
-import "./chunk-P235SVAH.js";
-import "./chunk-6HO5ZTXK.js";
-import "./chunk-44CM72SQ.js";
-import "./chunk-76OWZ3BA.js";
-import "./chunk-MO5YHHMQ.js";
+} from "./chunk-JFYIP7XU.js";
+import "./chunk-Q4V4XQWV.js";
+import "./chunk-BTUTZMPT.js";
+import "./chunk-YNRDWYZP.js";
+import "./chunk-3XPUDB7B.js";
+import "./chunk-FL4IOQ37.js";
+import {
+  RACI_DIAGNOSTICS
+} from "./chunk-PGEGPSCZ.js";
+import {
+  BODY_DIAGNOSTICS
+} from "./chunk-DMJJ3CEQ.js";
+import "./chunk-BDXC7MDK.js";
+import {
+  D3_DATA_CHART_TYPES,
+  renderDataChartD3,
+  supportsD3DataChart
+} from "./chunk-6ZT4U37Q.js";
+import "./chunk-HGN652MU.js";
+import "./chunk-U6EQI3U6.js";
+import "./chunk-7UEMZREK.js";
+import "./chunk-A4GOY3PE.js";
+import "./chunk-6KFWC4CO.js";
+import "./chunk-HQCHYB5F.js";
+import "./chunk-5LWQH6QV.js";
+import "./chunk-XDXNDSKO.js";
+import "./chunk-OHQEMBLI.js";
+import "./chunk-TSA237IM.js";
+import "./chunk-6IAA2QQ2.js";
+import "./chunk-YZLMKW4T.js";
+import "./chunk-3P2DKJCG.js";
+import "./chunk-3LKM6FMW.js";
 import {
   TREEMAP_DIAGNOSTICS
-} from "./chunk-WCSOJFU3.js";
-import "./chunk-7JEGTRLD.js";
+} from "./chunk-OTP5KVLO.js";
+import "./chunk-YB3FW24O.js";
 import "./chunk-NNAAJVBU.js";
+import "./chunk-XMVQ5F4M.js";
+import "./chunk-UXOSVCLJ.js";
+import "./chunk-FB2WHOEQ.js";
+import "./chunk-U2HGPLZS.js";
+import "./chunk-SU2VBK4L.js";
+import "./chunk-5JSWBPZZ.js";
 import {
-  RACI_DIAGNOSTICS
-} from "./chunk-RYEGFMUO.js";
-import "./chunk-33LCUH4H.js";
-import "./chunk-XAKEUMEJ.js";
-import "./chunk-BUPDIHML.js";
-import "./chunk-DKEPS5LH.js";
-import "./chunk-BUVJFRPY.js";
+  SKETCH_DIAGNOSTICS
+} from "./chunk-XHVV4NVW.js";
 import {
   SWIMLANE_DIAGNOSTICS
-} from "./chunk-WVAJFAIA.js";
-import "./chunk-EB6FPQUP.js";
-import "./chunk-EVCVDTXE.js";
-import "./chunk-NURGB5Z4.js";
-import "./chunk-L66GEFB6.js";
-import "./chunk-RVMRZAPB.js";
-import "./chunk-AN2MOO5T.js";
+} from "./chunk-WWN566I7.js";
+import {
+  FAMILY_DIAGNOSTICS
+} from "./chunk-O4VUFXIH.js";
+import "./chunk-QQJUTGQH.js";
+import "./chunk-S5GRONXL.js";
+import "./chunk-2JJ2KNPI.js";
+import "./chunk-O76UD6VJ.js";
+import "./chunk-A3WQVFBS.js";
 import {
   PERT_DIAGNOSTICS
-} from "./chunk-RTLBSQ3G.js";
+} from "./chunk-6M5PJFQG.js";
 import "./chunk-L3UHP6TD.js";
 import "./chunk-USZW2HHU.js";
 import {
   EVENT_LINE_DIAGNOSTICS
-} from "./chunk-5QXL4NYS.js";
-import "./chunk-GMR5MFHJ.js";
+} from "./chunk-7G2ER4CY.js";
+import "./chunk-I7F2A35O.js";
 import {
   VERSION_CONTROL_DIAGNOSTICS
-} from "./chunk-ERLBPDGU.js";
-import "./chunk-AELOBFW5.js";
-import "./chunk-B65G5DNL.js";
+} from "./chunk-6BFZKBGD.js";
+import "./chunk-I4IFRCUB.js";
+import "./chunk-URSQLCTR.js";
 import "./chunk-IYULMRBE.js";
 import {
   getPalette,
@@ -90,23 +103,23 @@ import {
   resolvePaletteOrFallback
 } from "./chunk-R3XI2VC7.js";
 import "./chunk-P6T66CCZ.js";
-import "./chunk-SML67VPV.js";
+import "./chunk-T4BRO3Z6.js";
 import "./chunk-C3Z4DX3V.js";
-import "./chunk-QLCCJEJI.js";
-import "./chunk-LIOHW36Z.js";
+import "./chunk-WCUHAQKB.js";
+import "./chunk-GBE54KY6.js";
 import {
   GRAPH_DIAGNOSTICS
 } from "./chunk-I46X5VUA.js";
-import "./chunk-3MQQNXPD.js";
+import "./chunk-2C56LEML.js";
 import "./chunk-NXMESY4J.js";
-import "./chunk-RUNNI6VE.js";
-import "./chunk-5MLYVTYM.js";
+import "./chunk-GL5UZ6NY.js";
+import "./chunk-SCHXJTZL.js";
 import "./chunk-FMDSF3OV.js";
 import {
   ARROW_DIAGNOSTIC_CODES
 } from "./chunk-FFUN5D66.js";
 import "./chunk-NOTA6TEI.js";
-import "./chunk-Y3J7VR52.js";
+import "./chunk-OTAL43EH.js";
 import "./chunk-TLVIHFRO.js";
 import {
   emit,
@@ -116,172 +129,6 @@ import {
 } from "./chunk-CXK4DZH3.js";
 import "./chunk-5WRI5ZAA.js";
 
-// src/error-card.ts
-var MONO_FAMILY = "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace";
-var W = 660;
-var PAD = 24;
-var CONTENT_W = W - PAD * 2;
-var MAX_ERRORS = 4;
-var MONO_CH = 0.6;
-var CODE_FS = 12.5;
-function renderErrorCard(errors, source, palette, theme) {
-  const c = palette[theme === "dark" ? "dark" : "light"];
-  const isTransparent = theme === "transparent";
-  const card = c.surface;
-  const codeBg = c.bg;
-  const border = c.border;
-  const danger = c.destructive ?? c.colors.red;
-  const text = c.text;
-  const muted = c.textMuted;
-  const srcLines = source.split("\n");
-  const shown = errors.slice(0, MAX_ERRORS);
-  const overflow = errors.length - shown.length;
-  const parts = [];
-  let y = PAD + 8;
-  parts.push(frownMark(PAD + 14, y + 12, danger));
-  parts.push(
-    `<text x="${PAD + 38}" y="${y + 11}" fill="${text}" font-family="${FONT_FAMILY}" font-size="16" font-weight="700">Couldn't render this diagram</text>`,
-    `<text x="${W - PAD}" y="${y + 10}" text-anchor="end" fill="${muted}" font-family="${FONT_FAMILY}" font-size="12" font-weight="600" letter-spacing="0.5">dgmo</text>`
-  );
-  y += 24;
-  const errLabel = errors.length === 1 ? "1 error" : `${errors.length} errors`;
-  parts.push(
-    `<text x="${PAD + 38}" y="${y + 4}" fill="${muted}" font-family="${FONT_FAMILY}" font-size="12.5">${errLabel} \u2014 fix the lines below and re-render</text>`
-  );
-  y += 22;
-  parts.push(
-    `<line x1="${PAD}" y1="${y}" x2="${W - PAD}" y2="${y}" stroke="${border}" stroke-width="1"/>`
-  );
-  y += 24;
-  for (const e of shown) {
-    const hasLine = e.line > 0;
-    let msgX = PAD;
-    if (hasLine) {
-      const label = e.column ? `Line ${e.line}:${e.column}` : `Line ${e.line}`;
-      const badgeW = 14 + label.length * 7;
-      parts.push(
-        `<rect x="${PAD}" y="${y - 13}" width="${badgeW}" height="19" rx="4" fill="${danger}"/>`,
-        `<text x="${PAD + badgeW / 2}" y="${y + 1}" text-anchor="middle" fill="${c.bg}" font-family="${FONT_FAMILY}" font-size="11.5" font-weight="700">${escapeXml(label)}</text>`
-      );
-      msgX = PAD + badgeW + 12;
-    }
-    const lines = wrapMessage(e.message, CONTENT_W - (msgX - PAD), CONTENT_W);
-    lines.forEach((line, i) => {
-      parts.push(
-        `<text x="${i === 0 ? msgX : PAD}" y="${y + 1}" fill="${text}" font-family="${FONT_FAMILY}" font-size="13">${escapeXml(line)}</text>`
-      );
-      if (i < lines.length - 1) y += 18;
-    });
-    y += 24;
-    if (hasLine) {
-      const CTX = 2;
-      const first = Math.max(1, e.line - CTX);
-      const last = Math.min(srcLines.length, e.line + CTX);
-      const rowH = 18;
-      const hasCaret = e.column !== void 0 && e.column > 0;
-      const gutterW = `${last}`.length * CODE_FS * MONO_CH + 16;
-      const codeX = PAD + gutterW;
-      const codeMaxW = CONTENT_W - gutterW - 12;
-      const topY = y - 14;
-      const rowCount = last - first + 1;
-      const blockH = rowCount * rowH + (hasCaret ? 14 : 0) + 10;
-      const rowParts = [];
-      let ry = y + 3;
-      for (let n = first; n <= last; n++) {
-        const raw = (srcLines[n - 1] ?? "").replace(/\t/g, "  ");
-        const codeText = truncateText(raw, CODE_FS, codeMaxW);
-        const isBad = n === e.line;
-        if (isBad) {
-          rowParts.push(
-            `<rect x="${PAD + 1}" y="${ry - 13}" width="${CONTENT_W - 2}" height="${rowH}" fill="${danger}" fill-opacity="0.16"/>`
-          );
-        }
-        rowParts.push(
-          `<text x="${PAD + 8}" y="${ry + 1}" fill="${isBad ? danger : muted}" font-family="${MONO_FAMILY}" font-size="${CODE_FS}" font-weight="${isBad ? 700 : 400}">${escapeXml(`${n}`)}</text>`,
-          `<text x="${codeX}" y="${ry + 1}" fill="${text}" font-family="${MONO_FAMILY}" font-size="${CODE_FS}" xml:space="preserve">${escapeXml(codeText)}</text>`
-        );
-        if (isBad && hasCaret) {
-          const caretX = codeX + (e.column - 1) * CODE_FS * MONO_CH;
-          rowParts.push(
-            `<text x="${caretX}" y="${ry + 15}" fill="${danger}" font-family="${MONO_FAMILY}" font-size="${CODE_FS}" font-weight="700">^</text>`
-          );
-          ry += 14;
-        }
-        ry += rowH;
-      }
-      parts.push(
-        `<rect x="${PAD}" y="${topY}" width="${CONTENT_W}" height="${blockH}" rx="5" fill="${codeBg}" stroke="${border}" stroke-width="1"/>`,
-        `<line x1="${codeX - 8}" y1="${topY}" x2="${codeX - 8}" y2="${topY + blockH}" stroke="${border}" stroke-width="1"/>`,
-        rowParts.join("")
-      );
-      y = topY + blockH + 10;
-    }
-    y += 14;
-  }
-  if (overflow > 0) {
-    parts.push(
-      `<text x="${PAD}" y="${y}" fill="${muted}" font-family="${FONT_FAMILY}" font-size="12.5" font-style="italic">+ ${overflow} more error${overflow === 1 ? "" : "s"}</text>`
-    );
-    y += 22;
-  }
-  y += 2;
-  parts.push(
-    `<line x1="${PAD}" y1="${y}" x2="${W - PAD}" y2="${y}" stroke="${border}" stroke-width="1"/>`
-  );
-  y += 24;
-  const encoded = encodeDiagramUrl(source);
-  const editUrl = "url" in encoded && encoded.url ? encoded.url : "https://online.diagrammo.app";
-  const iconSize = 18;
-  const linkColor = c.colors.blue ?? c.text;
-  parts.push(
-    `<a href="${escapeXml(editUrl)}" target="_blank" rel="noopener noreferrer">` + diagrammoIcon(PAD, y - 14, iconSize) + `<text x="${PAD + iconSize + 8}" y="${y}" fill="${linkColor}" font-family="${FONT_FAMILY}" font-size="12.5" font-weight="600" text-decoration="underline">Edit &amp; fix this diagram at online.diagrammo.app \u2197</text></a>`
-  );
-  y += 8;
-  const height = Math.round(y + PAD - 14);
-  const pageBg = isTransparent ? "" : `<rect width="100%" height="100%" fill="${c.bg}"/>`;
-  return [
-    `<svg xmlns="http://www.w3.org/2000/svg" width="${W}" height="${height}" viewBox="0 0 ${W} ${height}" font-family="${FONT_FAMILY}">`,
-    pageBg,
-    `<rect x="0.5" y="0.5" width="${W - 1}" height="${height - 1}" rx="10" fill="${card}" stroke="${border}" stroke-width="1"/>`,
-    parts.join(""),
-    `</svg>`
-  ].join("");
-}
-function wrapMessage(message, firstWidth, fullWidth) {
-  const words = message.split(/\s+/).filter(Boolean);
-  if (words.length === 0) return [""];
-  const lines = [];
-  let cur = "";
-  for (const word of words) {
-    const limit = lines.length === 0 ? firstWidth : fullWidth;
-    const test = cur ? `${cur} ${word}` : word;
-    if (measureText(test, 13) <= limit || !cur) {
-      cur = test;
-    } else {
-      lines.push(cur);
-      cur = word;
-    }
-  }
-  if (cur) lines.push(cur);
-  return lines;
-}
-function frownMark(cx, cy, color) {
-  const r = 12;
-  return [
-    `<circle cx="${cx}" cy="${cy}" r="${r}" fill="none" stroke="${color}" stroke-width="2"/>`,
-    `<circle cx="${cx - 4.5}" cy="${cy - 3}" r="1.6" fill="${color}"/>`,
-    `<circle cx="${cx + 4.5}" cy="${cy - 3}" r="1.6" fill="${color}"/>`,
-    `<path d="M ${cx - 5} ${cy + 6} Q ${cx} ${cy + 1} ${cx + 5} ${cy + 6}" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round"/>`
-  ].join("");
-}
-function diagrammoIcon(x, y, size) {
-  const s = size / 100;
-  return `<g transform="translate(${x} ${y}) scale(${s})"><rect width="100" height="100" rx="18" fill="#1f2933"/><path d="M41 71 L41 63.51 A28 28 0 1 1 59 63.51 L59 71" fill="none" stroke="#c9a227" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/><rect x="36" y="43" width="7" height="9" rx="1.9" fill="#c0504d"/><rect x="45" y="37" width="7" height="15" rx="1.9" fill="#5b9357"/><rect x="54" y="30" width="7" height="22" rx="1.9" fill="#3b6ea5"/><rect x="36" y="75" width="28" height="4.6" rx="2.3" fill="#7d5ba6"/><rect x="36" y="82" width="28" height="4.6" rx="2.3" fill="#7d5ba6"/><rect x="36" y="89" width="28" height="4.6" rx="2.3" fill="#7d5ba6"/></g>`;
-}
-function escapeXml(s) {
-  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
-}
-
 // src/dimensions.ts
 function getMinDimensions(content) {
   const { chartType } = parseDgmo(content);
@@ -300,10 +147,12 @@ function ensureStyle(svg, muted) {
   const style = doc.createElementNS(NS, "style");
   style.id = STYLE_ID;
   style.textContent = `
-    .dgmo-series,.dgmo-datum,.dgmo-tick{transition:opacity .12s ease}
-    .dgmo-series.dgmo-dim,.dgmo-datum.dgmo-dim{opacity:.18}
+    .dgmo-series,.dgmo-datum,.dgmo-tick,.dgmo-ptlabel{transition:opacity .12s ease}
+    .dgmo-series.dgmo-dim,.dgmo-datum.dgmo-dim,.dgmo-ptlabel.dgmo-dim{opacity:.18}
     .dgmo-tick.dgmo-faded{opacity:.22}
     .dgmo-datum{cursor:pointer}
+    .dgmo-axis-label{cursor:pointer}
+    .dgmo-axis-label.dgmo-axis-active{font-weight:700}
     .dgmo-axline{stroke:${muted};stroke-width:1;stroke-dasharray:4 4;pointer-events:none}
   `;
   svg.insertBefore(style, svg.firstChild);
@@ -390,8 +239,36 @@ function attachDataChartInteractions(svg, opts = {}) {
     }
     getOverlay().appendChild(t);
   };
+  const pointValue = (cx, numY, lblY, label, value, anchor = "middle", color) => {
+    const fill = color ?? text;
+    const mk = (content, y, font, weight, opacity) => {
+      const t = doc.createElementNS(NS, "text");
+      t.setAttribute("class", "dgmo-pointval");
+      t.setAttribute("font-size", String(font));
+      t.setAttribute("font-weight", String(weight));
+      t.setAttribute("font-family", "Inter, system-ui, sans-serif");
+      t.setAttribute("fill", fill);
+      t.setAttribute("fill-opacity", String(opacity));
+      t.setAttribute("text-anchor", anchor);
+      t.setAttribute("x", String(cx));
+      t.setAttribute("y", String(y));
+      t.textContent = content;
+      getOverlay().appendChild(t);
+    };
+    mk(value, numY, 20, 700, 0.75);
+    mk(label, lblY, 11, 500, 0.85);
+  };
+  const ptLabels = Array.from(
+    svg.querySelectorAll(".dgmo-ptlabel")
+  );
   const dimDatumsExcept = (el) => {
     for (const d of datums) d.classList.toggle("dgmo-dim", d !== el);
+    const line = el?.getAttribute("data-line-number");
+    for (const l of ptLabels)
+      l.classList.toggle(
+        "dgmo-dim",
+        line == null || l.getAttribute("data-line-number") !== line
+      );
   };
   const dimByKey = (el) => {
     const key = el.getAttribute("data-emph-key");
@@ -404,7 +281,42 @@ function attachDataChartInteractions(svg, opts = {}) {
   const clearDim = () => {
     for (const d of datums) d.classList.remove("dgmo-dim");
     for (const g of seriesGroups) g.classList.remove("dgmo-dim");
+    for (const l of ptLabels) l.classList.remove("dgmo-dim");
+    reapplyAxisPin();
   };
+  let axisPin = null;
+  const axisLabels = Array.from(
+    svg.querySelectorAll("[data-filter-attr]")
+  );
+  const applyAxisFilter = (attr, value) => {
+    for (const d of datums)
+      d.classList.toggle("dgmo-dim", d.getAttribute(attr) !== value);
+  };
+  function reapplyAxisPin() {
+    if (axisPin) applyAxisFilter(axisPin.attr, axisPin.value);
+  }
+  const setAxisPin = (next) => {
+    if (axisPin) axisPin.el.classList.remove("dgmo-axis-active");
+    axisPin = next;
+    if (axisPin) axisPin.el.classList.add("dgmo-axis-active");
+    if (!axisPin) for (const d of datums) d.classList.remove("dgmo-dim");
+    reapplyAxisPin();
+  };
+  const axisLabelListeners = [];
+  for (const el of axisLabels) {
+    const attr = el.getAttribute("data-filter-attr");
+    const value = el.getAttribute("data-filter-value");
+    if (!attr || value == null) continue;
+    const onEnter = () => applyAxisFilter(attr, value);
+    const onExit = () => {
+      for (const d of datums) d.classList.remove("dgmo-dim");
+      reapplyAxisPin();
+    };
+    el.addEventListener("mouseenter", onEnter);
+    el.addEventListener("mouseleave", onExit);
+    axisLabelListeners.push([el, "mouseenter", onEnter]);
+    axisLabelListeners.push([el, "mouseleave", onExit]);
+  }
   const crosshairOn = !!plot && circles.length > 0;
   let activePt = null;
   const restorePt = () => {
@@ -493,6 +405,29 @@ function attachDataChartInteractions(svg, opts = {}) {
         dottedLine(plot.left, cy, cx, cy);
         axisValue(plot.left, cy, axY, "y");
       }
+      const sz = el.getAttribute("data-size");
+      if (sz !== null) {
+        const label = el.getAttribute("data-size-label") ?? "size";
+        const vx = el.getAttribute("data-sizeval-x");
+        const vy = el.getAttribute("data-sizeval-y");
+        const vly = el.getAttribute("data-sizeval-ly");
+        const va = el.getAttribute("data-sizeval-anchor");
+        const color = el.getAttribute("data-color") ?? void 0;
+        if (vx !== null && vy !== null && vly !== null) {
+          pointValue(
+            parseFloat(vx),
+            parseFloat(vy),
+            parseFloat(vly),
+            label,
+            sz,
+            va === "start" || va === "end" ? va : "middle",
+            color
+          );
+        } else {
+          const r = parseFloat(el.getAttribute("r") ?? "0");
+          pointValue(cx, cy + r + 22, cy + r + 37, label, sz, "middle", color);
+        }
+      }
       fadeTicks();
       dimDatumsExcept(el);
     } else {
@@ -502,9 +437,14 @@ function attachDataChartInteractions(svg, opts = {}) {
   };
   let crosshairActive = false;
   const onSvgMove = (e) => {
-    const el = e.target.closest?.(
-      ".dgmo-datum"
-    );
+    const t = e.target;
+    let el = t.closest?.(".dgmo-datum");
+    if (!el) {
+      const lbl = t.closest?.(".dgmo-ptlabel");
+      const ln = lbl?.getAttribute("data-line-number");
+      if (ln != null)
+        el = datums.find((d) => d.getAttribute("data-line-number") === ln) ?? null;
+    }
     if (el) {
       if (el !== curDatum) {
         clearDatum();
@@ -534,8 +474,24 @@ function attachDataChartInteractions(svg, opts = {}) {
     }
   };
   const onClick = (e) => {
+    const label = e.target.closest?.(
+      "[data-filter-attr]"
+    );
+    if (label && axisLabels.includes(label)) {
+      const attr = label.getAttribute("data-filter-attr");
+      const value = label.getAttribute("data-filter-value");
+      if (attr && value != null) {
+        const same = axisPin?.attr === attr && axisPin.value === value;
+        setAxisPin(same ? null : { attr, value, el: label });
+        return;
+      }
+    }
     const line = walkUpForLine(e.target, svg);
-    if (line !== null && opts.onNavigate) opts.onNavigate(line);
+    if (line !== null && opts.onNavigate) {
+      opts.onNavigate(line);
+      return;
+    }
+    if (axisPin) setAxisPin(null);
   };
   let pinned = [];
   const clearHighlight = () => {
@@ -543,6 +499,7 @@ function attachDataChartInteractions(svg, opts = {}) {
     pinned = [];
     for (const d of datums) d.classList.remove("dgmo-dim");
     for (const g of seriesGroups) g.classList.remove("dgmo-dim");
+    reapplyAxisPin();
   };
   const highlightLine = (line) => {
     if (curDatum || crosshairActive) return;
@@ -586,7 +543,10 @@ function attachDataChartInteractions(svg, opts = {}) {
     }
   };
   const legendListeners = [];
-  if (legendEntries.length > 0 && seriesGroups.length > 1) {
+  const datumsHaveSeries = datums.some(
+    (d) => d.getAttribute("data-series-name") != null
+  );
+  if (legendEntries.length > 0 && (seriesGroups.length > 1 || datumsHaveSeries)) {
     for (const entry of legendEntries) {
       const name = entry.getAttribute("data-series-name");
       if (name == null) continue;
@@ -640,8 +600,11 @@ function attachDataChartInteractions(svg, opts = {}) {
       svg.removeEventListener("click", onClick);
       for (const [el, ev, fn] of legendListeners)
         el.removeEventListener(ev, fn);
+      for (const [el, ev, fn] of axisLabelListeners)
+        el.removeEventListener(ev, fn);
       if (overlay) overlay.remove();
       restorePt();
+      setAxisPin(null);
       clearHighlight();
       clearDim();
     },
@@ -832,12 +795,15 @@ var REGISTRY = [
   ...RACI_DIAGNOSTICS,
   ...TREEMAP_DIAGNOSTICS,
   ...EVENT_LINE_DIAGNOSTICS,
+  ...BODY_DIAGNOSTICS,
   ...VERSION_CONTROL_DIAGNOSTICS,
   ...ARROW_DIAGNOSTICS,
   ...MAP_DIAGNOSTICS,
   ...PERT_DIAGNOSTICS,
   ...GRAPH_DIAGNOSTICS,
-  ...COLOR_DIAGNOSTICS
+  ...COLOR_DIAGNOSTICS,
+  ...SKETCH_DIAGNOSTICS,
+  ...FAMILY_DIAGNOSTICS
 ];
 function listDiagnosticCodes() {
   return [...REGISTRY].sort((a, b) => a.code.localeCompare(b.code));
@@ -848,7 +814,7 @@ function getDiagnosticSpec(code) {
 
 // src/index.ts
 async function render2(text, options) {
-  const palette = options?.palette ?? palettes.slate;
+  const palette = typeof options?.palette === "string" ? getPalette(options.palette) : options?.palette ?? palettes.slate;
   const onError = options?.onError ?? "svg";
   const result = await render(text, {
     ...options?.theme !== void 0 && { theme: options.theme },

package/dist/{layout-HRBZPFCN.js → layout-34CLNICW.js}

@@ -3,13 +3,13 @@ import {
   NODE_WIDTH,
   computeNodeSize,
   layoutBoxesAndLines
-} from "./chunk-IJZFN3HM.js";
-import "./chunk-JED6ZDEE.js";
+} from "./chunk-TWQUYVP3.js";
+import "./chunk-O7WP4ZD4.js";
 import "./chunk-6EK55ART.js";
-import "./chunk-TYS6CSS5.js";
+import "./chunk-BCYVE3N5.js";
 import "./chunk-5DH3KYFH.js";
 import "./chunk-BMR4CIEO.js";
-import "./chunk-WCT3NYCV.js";
+import "./chunk-5LWQH6QV.js";
 import "./chunk-FMDSF3OV.js";
 import "./chunk-NOTA6TEI.js";
 import "./chunk-CXK4DZH3.js";
@@ -20,4 +20,4 @@ export {
   computeNodeSize,
   layoutBoxesAndLines
 };
-//# sourceMappingURL=layout-HRBZPFCN.js.map
+//# sourceMappingURL=layout-34CLNICW.js.map

package/dist/layout-46366KBT.js

@@ -0,0 +1,10 @@
+import {
+  layoutSketch
+} from "./chunk-Z6XJQ6KO.js";
+import "./chunk-XHVV4NVW.js";
+import "./chunk-CXK4DZH3.js";
+import "./chunk-5WRI5ZAA.js";
+export {
+  layoutSketch
+};
+//# sourceMappingURL=layout-46366KBT.js.map

package/dist/{layout-HWDSRX5E.js → layout-5BG6DFCU.js}

@@ -1,20 +1,20 @@
 import {
   layoutGraph
-} from "./chunk-T3UBLACL.js";
+} from "./chunk-SCQ5VPUF.js";
 import "./chunk-6EK55ART.js";
-import "./chunk-TYS6CSS5.js";
+import "./chunk-BCYVE3N5.js";
 import "./chunk-5DH3KYFH.js";
 import "./chunk-BMR4CIEO.js";
-import "./chunk-WCT3NYCV.js";
+import "./chunk-5LWQH6QV.js";
 import "./chunk-NXMESY4J.js";
-import "./chunk-5MLYVTYM.js";
+import "./chunk-SCHXJTZL.js";
 import "./chunk-FMDSF3OV.js";
 import "./chunk-NOTA6TEI.js";
-import "./chunk-Y3J7VR52.js";
+import "./chunk-OTAL43EH.js";
 import "./chunk-TLVIHFRO.js";
 import "./chunk-CXK4DZH3.js";
 import "./chunk-5WRI5ZAA.js";
 export {
   layoutGraph
 };
-//# sourceMappingURL=layout-HWDSRX5E.js.map
+//# sourceMappingURL=layout-5BG6DFCU.js.map

package/dist/layout-6RDJHS6E.js

@@ -0,0 +1,9 @@
+import {
+  layoutWireframe
+} from "./chunk-6IUAK7RZ.js";
+import "./chunk-5LWQH6QV.js";
+import "./chunk-5WRI5ZAA.js";
+export {
+  layoutWireframe
+};
+//# sourceMappingURL=layout-6RDJHS6E.js.map

package/dist/{layout-7QXCNOVS.js → layout-7H4H46CS.js}

@@ -2,12 +2,12 @@ import {
   fixEdgeWaypoints,
   layoutInfra,
   separateGroups
-} from "./chunk-Y2ZE3MSG.js";
-import "./chunk-WCT3NYCV.js";
+} from "./chunk-C63UWAKM.js";
+import "./chunk-5LWQH6QV.js";
 import "./chunk-5WRI5ZAA.js";
 export {
   fixEdgeWaypoints,
   layoutInfra,
   separateGroups
 };
-//# sourceMappingURL=layout-7QXCNOVS.js.map
+//# sourceMappingURL=layout-7H4H46CS.js.map