@diagrammo/dgmo 0.48.1 → 0.49.0

package/dist/chunk-26RVGM44.js

@@ -0,0 +1,331 @@
+import {
+  encodeDiagramUrl
+} from "./chunk-SVDWQGX2.js";
+import {
+  FONT_FAMILY
+} from "./chunk-6KFWC4CO.js";
+import {
+  measureText,
+  truncateText
+} from "./chunk-5LWQH6QV.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/utils/svg-embed.ts
+function normalizeSvgForEmbed(input) {
+  let svg = input;
+  const rootMatch = svg.match(/<svg[^>]*>/);
+  const rootTag = rootMatch?.[0] ?? "";
+  if (rootTag && !rootTag.includes("viewBox")) {
+    const wh = rootTag.match(/width="(\d+)"[^>]*height="(\d+)"/);
+    if (wh) {
+      svg = svg.replace(/<svg/, `<svg viewBox="0 0 ${wh[1]} ${wh[2]}"`);
+    }
+  }
+  const tight = computeBBox(svg);
+  if (tight && tight.width > 0 && tight.height > 0) {
+    const pad = 16;
+    const x = tight.x - pad;
+    const y = tight.y - pad;
+    const w = tight.width + pad * 2;
+    const h = tight.height + pad * 2;
+    const canvas = readViewBox(svg);
+    const TOL = 2;
+    const MIN_COVERAGE = 0.5;
+    const trustworthy = !canvas || x >= canvas.x - TOL && y >= canvas.y - TOL && x + w <= canvas.x + canvas.width + TOL && y + h <= canvas.y + canvas.height + TOL && w >= canvas.width * MIN_COVERAGE && h >= canvas.height * MIN_COVERAGE;
+    if (trustworthy) {
+      const vb = `${x} ${y} ${w} ${h}`;
+      svg = svg.replace(/(<svg[^>]*?)viewBox="[^"]*"/, `$1viewBox="${vb}"`);
+    }
+  }
+  svg = svg.replace(/(<svg[^>]*?) width="[^"]*"/g, "$1");
+  svg = svg.replace(/(<svg[^>]*?) height="[^"]*"/g, "$1");
+  svg = svg.replace(/<svg\s{2,}/g, "<svg ");
+  return svg;
+}
+function getEmbedSvgViewBox(svg) {
+  const tight = computeBBox(svg);
+  if (!tight || tight.width <= 0 || tight.height <= 0) return null;
+  const pad = 16;
+  return {
+    x: tight.x - pad,
+    y: tight.y - pad,
+    width: tight.width + pad * 2,
+    height: tight.height + pad * 2
+  };
+}
+function readViewBox(svg) {
+  const m = svg.match(/<svg[^>]*?\bviewBox="([^"]+)"/);
+  if (!m) return null;
+  const n = m[1].trim().split(/[\s,]+/).map(Number);
+  if (n.length !== 4 || n.some((v) => !Number.isFinite(v)) || n[2] <= 0 || n[3] <= 0)
+    return null;
+  return { x: n[0], y: n[1], width: n[2], height: n[3] };
+}
+function computeBBox(svg) {
+  const xs = [];
+  const ys = [];
+  function push(x, y) {
+    if (Number.isFinite(x) && Number.isFinite(y)) {
+      xs.push(x);
+      ys.push(y);
+    }
+  }
+  function attr(tag, name) {
+    const m = tag.match(new RegExp(`\\b${name}="([^"]*)"`));
+    if (!m) return null;
+    const n = parseFloat(m[1]);
+    return Number.isFinite(n) ? n : null;
+  }
+  for (const m of svg.matchAll(/<rect\b[^>]*?\/?>/g)) {
+    const tag = m[0];
+    const x = attr(tag, "x");
+    const y = attr(tag, "y");
+    const w = attr(tag, "width");
+    const h = attr(tag, "height");
+    if (x !== null && y !== null && w !== null && h !== null) {
+      push(x, y);
+      push(x + w, y + h);
+    }
+  }
+  for (const m of svg.matchAll(/<line\b[^>]*?\/?>/g)) {
+    const tag = m[0];
+    const x1 = attr(tag, "x1");
+    const y1 = attr(tag, "y1");
+    const x2 = attr(tag, "x2");
+    const y2 = attr(tag, "y2");
+    if (x1 !== null && y1 !== null && x2 !== null && y2 !== null) {
+      push(x1, y1);
+      push(x2, y2);
+    }
+  }
+  for (const m of svg.matchAll(/<circle\b[^>]*?\/?>/g)) {
+    const tag = m[0];
+    const cx = attr(tag, "cx");
+    const cy = attr(tag, "cy");
+    const r = attr(tag, "r");
+    if (cx !== null && cy !== null && r !== null) {
+      push(cx - r, cy - r);
+      push(cx + r, cy + r);
+    }
+  }
+  for (const m of svg.matchAll(/<ellipse\b[^>]*?\/?>/g)) {
+    const tag = m[0];
+    const cx = attr(tag, "cx");
+    const cy = attr(tag, "cy");
+    const rx = attr(tag, "rx");
+    const ry = attr(tag, "ry");
+    if (cx !== null && cy !== null && rx !== null && ry !== null) {
+      push(cx - rx, cy - ry);
+      push(cx + rx, cy + ry);
+    }
+  }
+  for (const m of svg.matchAll(/<text\b([^>]*?)>([\s\S]*?)<\/text>/g)) {
+    const tag = `<text${m[1]}>`;
+    const text = m[2].replace(/<[^>]+>/g, "");
+    const x = attr(tag, "x");
+    const y = attr(tag, "y");
+    if (x !== null && y !== null) {
+      const w = text.length * 7;
+      const anchor = tag.match(/\btext-anchor="([^"]*)"/)?.[1] ?? "start";
+      const left = anchor === "middle" ? x - w / 2 : anchor === "end" ? x - w : x;
+      const right = anchor === "middle" ? x + w / 2 : anchor === "end" ? x : x + w;
+      push(left, y - 14);
+      push(right, y + 4);
+    }
+  }
+  for (const m of svg.matchAll(/<path\b[^>]*?\bd="([^"]+)"/g)) {
+    const d = m[1];
+    const nums = d.match(/-?\d+(?:\.\d+)?/g);
+    if (!nums) continue;
+    for (let i = 0; i + 1 < nums.length; i += 2) {
+      push(parseFloat(nums[i]), parseFloat(nums[i + 1]));
+    }
+  }
+  for (const m of svg.matchAll(
+    /<(?:polygon|polyline)\b[^>]*?\bpoints="([^"]+)"/g
+  )) {
+    const nums = m[1].match(/-?\d+(?:\.\d+)?/g);
+    if (!nums) continue;
+    for (let i = 0; i + 1 < nums.length; i += 2) {
+      push(parseFloat(nums[i]), parseFloat(nums[i + 1]));
+    }
+  }
+  if (xs.length === 0 || ys.length === 0) return null;
+  const minX = Math.min(...xs);
+  const maxX = Math.max(...xs);
+  const minY = Math.min(...ys);
+  const maxY = Math.max(...ys);
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
+
+export {
+  renderErrorCard,
+  normalizeSvgForEmbed,
+  getEmbedSvgViewBox
+};
+//# sourceMappingURL=chunk-26RVGM44.js.map

package/dist/{chunk-44CM72SQ.js → chunk-2WMBWZY2.js}

@@ -8,7 +8,7 @@ import {
   stripDefaultModifier,
   tagAttrKey,
   validateTagGroupNames
-} from "./chunk-QLCCJEJI.js";
+} from "./chunk-HBVD67XG.js";
 import {
   JOURNEY_MAP_REGISTRY,
   OPTION_NOCOLON_RE,
@@ -19,7 +19,7 @@ import {
   splitNameAndMeta,
   warnUnknownMetaKeys,
   withTagAliases
-} from "./chunk-Y3J7VR52.js";
+} from "./chunk-ZNQX6QWH.js";
 import {
   resolveColorWithDiagnostic
 } from "./chunk-TLVIHFRO.js";
@@ -406,4 +406,4 @@ function parseStepLine(trimmed, lineNumber, counter, aliasMap, warn, diagnostics
 export {
   parseJourneyMap
 };
-//# sourceMappingURL=chunk-44CM72SQ.js.map
+//# sourceMappingURL=chunk-2WMBWZY2.js.map

package/dist/{chunk-L66GEFB6.js → chunk-35BBZDFE.js}

@@ -6,10 +6,10 @@ import {
   tagAttrKey,
   validateTagGroupNames,
   validateTagValues
-} from "./chunk-QLCCJEJI.js";
+} from "./chunk-HBVD67XG.js";
 import {
   tryCollectNote
-} from "./chunk-5MLYVTYM.js";
+} from "./chunk-K6HNAY5V.js";
 import {
   resolveNotes
 } from "./chunk-FMDSF3OV.js";
@@ -32,7 +32,7 @@ import {
   tryParseSharedOption,
   warnUnknownMetaKeys,
   withTagAliases
-} from "./chunk-Y3J7VR52.js";
+} from "./chunk-ZNQX6QWH.js";
 import {
   resolveColorWithDiagnostic
 } from "./chunk-TLVIHFRO.js";
@@ -521,4 +521,4 @@ export {
   looksLikeERDiagram,
   extractSymbols
 };
-//# sourceMappingURL=chunk-L66GEFB6.js.map
+//# sourceMappingURL=chunk-35BBZDFE.js.map

package/dist/{chunk-4GRI7MEB.js → chunk-3BIAFYD2.js}

@@ -2,15 +2,15 @@ import {
   parseInlineMarkdown,
   safeHref
 } from "./chunk-3HDBAXF5.js";
-import {
-  renderIntegratedLegend
-} from "./chunk-PWIHZ6NJ.js";
 import {
   ScaleContext
 } from "./chunk-YYVTBZZC.js";
+import {
+  renderIntegratedLegend
+} from "./chunk-4UDKKGHH.js";
 import {
   getMaxLegendReservedHeight
-} from "./chunk-YAA6IID3.js";
+} from "./chunk-7UEMZREK.js";
 import {
   FONT_FAMILY
 } from "./chunk-6KFWC4CO.js";
@@ -18,7 +18,7 @@ import {
   measureText,
   truncateText,
   wrapTextToWidth
-} from "./chunk-WCT3NYCV.js";
+} from "./chunk-5LWQH6QV.js";
 import {
   contrastText,
   mix,
@@ -1601,4 +1601,4 @@ export {
   renderTechRadar,
   renderTechRadarForExport
 };
-//# sourceMappingURL=chunk-4GRI7MEB.js.map
+//# sourceMappingURL=chunk-3BIAFYD2.js.map