@diagrammo/dgmo 0.57.0 → 0.58.0

package/dist/auto.mjs

@@ -811,7 +811,14 @@ var init_directives_registry = __esm({
       { token: "no-rounds", category: "modifier" },
       { token: "single-elim", category: "modifier" },
       { token: "double-elim", category: "modifier" },
-      { token: "seeded", category: "modifier" }
+      { token: "seeded", category: "modifier" },
+      // ── Live link (§38) ──────────────────────────────────────
+      // The pointer type's one directive. Registered so it highlights and
+      // autocompletes like `palette` does — §38 justifies the shape by calling it
+      // "the ordinary DGMO directive shape", and an unregistered `url` would make
+      // that sentence false in the editor: `editor/tokens.ts` specializes only
+      // against the keyword registries, so it would render as plain identifier text.
+      { token: "url", category: "directive" }
     ];
     ALL_REGISTRY_TOKENS = tokensWhere(() => true);
     INFRA_TOP_LEVEL_OPTION_SET = tokensWhere(
@@ -1528,7 +1535,9 @@ var init_parsing = __esm({
       "raci",
       "map",
       "family",
-      "bracket"
+      "bracket",
+      // pointer, not a drawing — internal (see ChartTypeMeta.internal)
+      "live-link"
     ]);
     OPTION_NOCOLON_RE = /^([a-z][a-z0-9-]*)\s+(.+)$/i;
     GLOBAL_BOOLEANS = /* @__PURE__ */ new Set([
@@ -14747,6 +14756,17 @@ var init_chart_types = __esm({
         id: "boxes-and-lines",
         description: "General-purpose node-edge diagrams with groups and tags",
         fallback: true
+      },
+      // ── Not a tier — a pointer, not a drawing ─────────────────
+      // `live-link` holds no diagram of its own; it names one published to
+      // Diagrammo Cloud. Internal (see `internal` above): it arrives by being saved
+      // from a shared link, never by being picked from a list. Kept LAST because
+      // `chartTypes.slice(0, 8)` is a live window feeding language-reference checks
+      // and the generated AI core — any insertion above position 8 shifts it.
+      {
+        id: "live-link",
+        description: "A pointer to a diagram published at Diagrammo Cloud",
+        internal: true
       }
     ];
   }
@@ -33131,6 +33151,221 @@ var init_parser38 = __esm({
   }
 });
 
+// src/cloud-reference.ts
+function parseCloudReference(text) {
+  const fence = FENCE_RE.exec(text) ?? EMBED_RE.exec(text);
+  if (fence) return reference(fence[1]);
+  return parseCloudReferenceUrl(text);
+}
+function parseCloudReferenceUrl(text) {
+  let url;
+  try {
+    url = new URL(text.trim());
+  } catch {
+    return null;
+  }
+  if (url.protocol !== "https:" && url.protocol !== "http:") return null;
+  const match = URL_PATH_RE.exec(url.pathname);
+  if (!match) return null;
+  if (url.searchParams.has("at")) return null;
+  return reference(match[1] ?? match[2] ?? match[3]);
+}
+function reference(id) {
+  return id ? { id } : null;
+}
+var ID, FENCE_RE, EMBED_RE, URL_PATH_RE;
+var init_cloud_reference = __esm({
+  "src/cloud-reference.ts"() {
+    "use strict";
+    ID = String.raw`[A-Za-z0-9_-]{3,64}`;
+    FENCE_RE = new RegExp(`^\\s*live-link\\s+(${ID})\\s*$`);
+    EMBED_RE = new RegExp(
+      `^\\s*!\\[\\[\\s*live-link:\\s*(${ID})\\s*\\]\\]\\s*$`
+    );
+    URL_PATH_RE = new RegExp(
+      `^/(?:public/diagrams/(${ID})/source|d/(${ID})|view/(${ID}))/?$`
+    );
+  }
+});
+
+// src/live-link/parser.ts
+var parser_exports33 = {};
+__export(parser_exports33, {
+  parseLiveLink: () => parseLiveLink
+});
+function resolveTarget(value) {
+  const trimmed = value.trim();
+  const asUrl = parseCloudReferenceUrl(trimmed)?.id;
+  if (asUrl) return asUrl;
+  if (!/^[^\s[\]]+$/.test(trimmed)) return null;
+  return parseCloudReference(`live-link ${trimmed}`)?.id ?? null;
+}
+function pinnedRevision(value) {
+  const trimmed = value.trim();
+  if (resolveTarget(trimmed) !== null) return null;
+  try {
+    const url = new URL(trimmed);
+    const at2 = url.searchParams.get("at");
+    if (at2 !== null) {
+      url.searchParams.delete("at");
+      if (resolveTarget(url.toString()) !== null) return `?at=${at2}`;
+    }
+  } catch {
+  }
+  const at = trimmed.indexOf("@");
+  if (at > 0) {
+    const pin = trimmed.slice(at);
+    if (resolveTarget(trimmed.slice(0, at)) !== null) return pin;
+  }
+  return null;
+}
+function parseLiveLink(content) {
+  const diagnostics = [];
+  let error = null;
+  const fail = (line11, message) => {
+    const diag = makeDgmoError(line11, message);
+    diagnostics.push(diag);
+    error ??= formatDgmoError(diag);
+  };
+  const warn2 = (line11, message) => {
+    diagnostics.push(makeDgmoError(line11, message, "warning"));
+  };
+  const lines = content.split("\n");
+  const isSkippable = (line11) => !line11 || line11.startsWith("//");
+  let titleSlot = null;
+  let titleLineNumber = 1;
+  let bodyStart = lines.length;
+  for (let i = 0; i < lines.length; i++) {
+    const trimmed = lines[i].trim();
+    if (isSkippable(trimmed)) continue;
+    const first = parseFirstLine(trimmed);
+    titleLineNumber = i + 1;
+    titleSlot = first?.title ?? null;
+    bodyStart = first ? i + 1 : i;
+    break;
+  }
+  let sawUrlLine = false;
+  const urls = [];
+  for (let i = bodyStart; i < lines.length; i++) {
+    const trimmed = lines[i].trim();
+    if (isSkippable(trimmed)) continue;
+    const spaceIdx = trimmed.search(/\s/);
+    const key = (spaceIdx === -1 ? trimmed : trimmed.slice(0, spaceIdx)).toLowerCase();
+    const value = spaceIdx === -1 ? "" : trimmed.slice(spaceIdx + 1).trim();
+    if (key === "url") {
+      sawUrlLine = true;
+      if (!value) {
+        fail(
+          i + 1,
+          `"url" needs a diagram \u2014 a link like ${EXAMPLE_URL}, or a bare diagram id.`
+        );
+        continue;
+      }
+      urls.push({ value, line: i + 1 });
+      continue;
+    }
+    if (GLOBAL_DIRECTIVES.has(key)) continue;
+    warn2(
+      i + 1,
+      `Unrecognized directive "${key}" \u2014 a live link takes only "url".`
+    );
+  }
+  const titleIsPhrase = titleSlot !== null && /\s/.test(titleSlot);
+  const done = (title, id2) => ({
+    type: "live-link",
+    title,
+    titleLineNumber,
+    id: id2,
+    diagnostics,
+    error
+  });
+  if (!sawUrlLine && titleSlot === null) {
+    fail(
+      titleLineNumber,
+      "A live link needs a diagram \u2014 add `url <link>`, or write `live-link <id>`."
+    );
+    return done(null, null);
+  }
+  if (sawUrlLine && urls.length === 0) {
+    return done(titleIsPhrase ? titleSlot : null, null);
+  }
+  if (urls.length > 1) {
+    const [a, b] = [urls[0], urls[1]];
+    fail(
+      b.line,
+      `Two targets: "${a.value}" on line ${a.line} and "${b.value}" on line ${b.line}. A live link points at one diagram \u2014 delete one.`
+    );
+    return done(titleIsPhrase ? titleSlot : null, null);
+  }
+  const url = urls[0];
+  if (url && titleSlot !== null && !titleIsPhrase) {
+    fail(
+      titleLineNumber,
+      `Two targets: "${titleSlot}" on line ${titleLineNumber} and "${url.value}" on line ${url.line}. A live link points at one diagram \u2014 keep the \`url\` line and give line ${titleLineNumber} a title, or delete the \`url\` line.`
+    );
+    return done(null, null);
+  }
+  if (url) {
+    const pin = pinnedRevision(url.value);
+    if (pin !== null) {
+      fail(
+        url.line,
+        `A pinned revision cannot be served \u2014 a live link always shows the publisher's current version. Remove the "${pin}" from the link.`
+      );
+      return done(titleSlot, null);
+    }
+    const id2 = resolveTarget(url.value);
+    if (id2 === null) {
+      fail(
+        url.line,
+        `"${url.value}" is not a Diagrammo diagram \u2014 use a link like ${EXAMPLE_URL}, or a bare diagram id.`
+      );
+      return done(titleSlot, null);
+    }
+    return done(titleSlot, id2);
+  }
+  if (titleIsPhrase) {
+    fail(
+      titleLineNumber,
+      `"${titleSlot}" is a title, not a diagram id \u2014 add a \`url <link>\` line naming the diagram this points at.`
+    );
+    return done(titleSlot, null);
+  }
+  const shorthandPin = pinnedRevision(titleSlot);
+  if (shorthandPin !== null) {
+    fail(
+      titleLineNumber,
+      `A pinned revision cannot be served \u2014 a live link always shows the publisher's current version. Remove the "${shorthandPin}" from the id.`
+    );
+    return done(null, null);
+  }
+  const id = resolveTarget(titleSlot);
+  if (id === null) {
+    fail(
+      titleLineNumber,
+      `"${titleSlot}" is not a diagram id \u2014 use a bare id, or add a \`url <link>\` line.`
+    );
+    return done(null, null);
+  }
+  return done(null, id);
+}
+var GLOBAL_DIRECTIVES, EXAMPLE_URL;
+var init_parser39 = __esm({
+  "src/live-link/parser.ts"() {
+    "use strict";
+    init_diagnostics();
+    init_cloud_reference();
+    init_parsing();
+    GLOBAL_DIRECTIVES = /* @__PURE__ */ new Set([
+      "palette",
+      "theme",
+      "no-title",
+      "legend-inline"
+    ]);
+    EXAMPLE_URL = "https://online.diagrammo.app/d/dgm_7f2a91";
+  }
+});
+
 // src/chart-type-registry.ts
 function measureSequence(content) {
   const parsed = parseSequenceDgmo(content);
@@ -33395,6 +33630,7 @@ var init_chart_type_registry = __esm({
     init_parser36();
     init_parser37();
     init_parser38();
+    init_parser39();
     CHART_TYPE_REGISTRY = [
       // ── Structured diagrams ───────────────────────────────────
       {
@@ -33583,7 +33819,12 @@ var init_chart_type_registry = __esm({
       // no measure/minDims — it sizes to content and scales to fit its rectangle.
       { id: "bracket", category: "diagram", parse: parseBracket },
       // ── Geographic map (own parser → resolver → layout → renderer) ──
-      { id: "map", category: "visualization", parse: parseMap }
+      { id: "map", category: "visualization", parse: parseMap },
+      // Live link: a pointer to a diagram published at Diagrammo Cloud, rendered
+      // as a reference card. `diagram` like every other card-shaped type, so the
+      // export-handler cross-check covers it rather than being relaxed for it. No
+      // measure/minDims — the card sizes to its own text and scales to fit.
+      { id: "live-link", category: "diagram", parse: parseLiveLink }
     ];
     REGISTRY_BY_ID = new Map(
       CHART_TYPE_REGISTRY.map((d) => [d.id, d])
@@ -33682,13 +33923,19 @@ function parseDgmoUndeduped(content) {
   if (parser2) {
     const result2 = parser2(content);
     return {
-      diagnostics: [...result2.diagnostics, ...detectEmptyContent(content)],
+      diagnostics: [
+        ...result2.diagnostics,
+        ...detectEmptyContent(content, chartType)
+      ],
       chartType
     };
   }
   const result = parseVisualization(content);
   return {
-    diagnostics: [...result.diagnostics, ...detectEmptyContent(content)],
+    diagnostics: [
+      ...result.diagnostics,
+      ...detectEmptyContent(content, chartType)
+    ],
     chartType
   };
 }
@@ -33720,7 +33967,8 @@ function detectColonChartType(content) {
   }
   return null;
 }
-function detectEmptyContent(content) {
+function detectEmptyContent(content, chartType) {
+  if (chartType && EMPTY_CONTENT_EXEMPT.has(chartType)) return [];
   const lines = content.split("\n");
   const nonEmpty = lines.filter(
     (l) => l.trim() && !l.trim().startsWith("#") && !l.trim().startsWith("//")
@@ -33732,7 +33980,7 @@ function detectEmptyContent(content) {
   }
   return [];
 }
-var GANTT_DURATION_RE, GANTT_DATE_RE, C4_TYPE_RE, CHART_TYPE_DESCRIPTIONS, chartTypeParsers, knownChartTypeIds, PARSER_BY_ID, ALL_KNOWN_TYPES;
+var GANTT_DURATION_RE, GANTT_DATE_RE, C4_TYPE_RE, CHART_TYPE_DESCRIPTIONS, chartTypeParsers, knownChartTypeIds, PARSER_BY_ID, ALL_KNOWN_TYPES, EMPTY_CONTENT_EXEMPT;
 var init_dgmo_router = __esm({
   "src/dgmo-router.ts"() {
     "use strict";
@@ -33759,6 +34007,7 @@ var init_dgmo_router = __esm({
     );
     PARSER_BY_ID = new Map(chartTypeParsers);
     ALL_KNOWN_TYPES = new Set(knownChartTypeIds);
+    EMPTY_CONTENT_EXEMPT = /* @__PURE__ */ new Set(["live-link"]);
   }
 });
 
@@ -37690,14 +37939,14 @@ function renderVersionControl(container, parsed, palette, isDark, onClickItem, e
   const exportMode = !!exportDims;
   const paneW = exportMode ? 0 : container.clientWidth || 0;
   const paneH = exportMode ? 0 : container.clientHeight || 0;
-  const W3 = Math.round(Math.max(baseW, paneW));
+  const W4 = Math.round(Math.max(baseW, paneW));
   const H2 = Math.round(Math.max(baseH, paneH));
-  const vw = exportMode ? W3 : paneW || W3;
+  const vw = exportMode ? W4 : paneW || W4;
   const vh = exportMode ? H2 : paneH || H2;
-  const svg = d3Selection8.select(container).append("svg").attr("width", vw).attr("height", vh).attr("viewBox", `0 0 ${W3} ${H2}`).attr("preserveAspectRatio", "xMidYMin meet").attr("xmlns", "http://www.w3.org/2000/svg").style("font-family", FONT_FAMILY);
-  svg.append("rect").attr("width", W3).attr("height", H2).attr("fill", palette.bg);
+  const svg = d3Selection8.select(container).append("svg").attr("width", vw).attr("height", vh).attr("viewBox", `0 0 ${W4} ${H2}`).attr("preserveAspectRatio", "xMidYMin meet").attr("xmlns", "http://www.w3.org/2000/svg").style("font-family", FONT_FAMILY);
+  svg.append("rect").attr("width", W4).attr("height", H2).attr("fill", palette.bg);
   if (showTitle) {
-    const t = svg.append("text").attr("class", "chart-title").attr("x", W3 / 2).attr("y", TITLE_Y).attr("text-anchor", "middle").attr("fill", palette.text).attr("font-family", FONT_FAMILY).attr("font-size", TITLE_FONT_SIZE).attr("font-weight", TITLE_FONT_WEIGHT).attr("data-line-number", parsed.titleLineNumber ?? 1).text(parsed.title);
+    const t = svg.append("text").attr("class", "chart-title").attr("x", W4 / 2).attr("y", TITLE_Y).attr("text-anchor", "middle").attr("fill", palette.text).attr("font-family", FONT_FAMILY).attr("font-size", TITLE_FONT_SIZE).attr("font-weight", TITLE_FONT_WEIGHT).attr("data-line-number", parsed.titleLineNumber ?? 1).text(parsed.title);
     if (onClickItem && parsed.titleLineNumber && !exportMode) {
       const ln = parsed.titleLineNumber;
       t.style("cursor", "pointer").on("click", () => onClickItem(ln));
@@ -45422,7 +45671,7 @@ function findClearPosition(w, h, points, obstacles) {
 }
 function resolveLabelOverlaps(boxes) {
   const MAX_PASSES = 8;
-  const PAD3 = 4;
+  const PAD4 = 4;
   for (let pass = 0; pass < MAX_PASSES; pass++) {
     let moved = false;
     for (let i = 0; i < boxes.length; i++) {
@@ -45431,8 +45680,8 @@ function resolveLabelOverlaps(boxes) {
         const b = boxes[j];
         const dx = Math.abs(a.cx - b.cx);
         const dy = Math.abs(a.cy - b.cy);
-        const overlapX = (a.w + b.w) / 2 + PAD3 - dx;
-        const overlapY = (a.h + b.h) / 2 + PAD3 - dy;
+        const overlapX = (a.w + b.w) / 2 + PAD4 - dx;
+        const overlapY = (a.h + b.h) / 2 + PAD4 - dy;
         if (overlapX > 0 && overlapY > 0) {
           const shift = overlapY / 2 + 1;
           if (a.cy < b.cy) {
@@ -49667,7 +49916,7 @@ function renderFamilyForExport(container, parsed, layout, palette, isDark, opts
   const fillMode = fillModeFromOptions(parsed.options);
   const noDaggers = parsed.options["no-daggers"] === "true";
   const baseBg = themeBaseBg(palette, isDark);
-  const PAD3 = 20;
+  const PAD4 = 20;
   const MAX_SCALE8 = 1.5;
   const titleReserve = parsed.title ? TITLE_RESERVE : 0;
   const legendGroups = parsed.tagGroups.filter((g) => g.entries.length > 0).map((g) => ({
@@ -49683,8 +49932,8 @@ function renderFamilyForExport(container, parsed, layout, palette, isDark, opts
   };
   const contentW = layout.width;
   const contentH = layout.height;
-  const W3 = opts.fit?.width ?? opts.exportDims?.width ?? contentW + PAD3 * 2;
-  const legendReserve = hasLegend ? getMaxLegendReservedHeight(legendConfig, W3) + LEGEND_GROUP_GAP : 0;
+  const W4 = opts.fit?.width ?? opts.exportDims?.width ?? contentW + PAD4 * 2;
+  const legendReserve = hasLegend ? getMaxLegendReservedHeight(legendConfig, W4) + LEGEND_GROUP_GAP : 0;
   const inlineRequested = legendInlineRequested(parsed.options);
   const legendExtent = inlineRequested && hasLegend ? getLegendExtent(
     {
@@ -49697,7 +49946,7 @@ function renderFamilyForExport(container, parsed, layout, palette, isDark, opts
       showInactivePills: true
     },
     { activeGroup: activeTagGroup },
-    W3
+    W4
   ) : { width: 0, height: 0 };
   const header = layoutInlineHeader({
     requested: inlineRequested,
@@ -49705,7 +49954,7 @@ function renderFamilyForExport(container, parsed, layout, palette, isDark, opts
     hasLegend,
     legendWidth: legendExtent.width,
     legendHeight: legendExtent.height,
-    containerWidth: W3,
+    containerWidth: W4,
     titleBandHeight: titleReserve,
     legendReserve,
     titleBaselineY: TITLE_Y,
@@ -49716,14 +49965,14 @@ function renderFamilyForExport(container, parsed, layout, palette, isDark, opts
   let H2;
   if (opts.fit) {
     H2 = opts.fit.height;
-    const availW = Math.max(1, W3 - PAD3 * 2);
-    const availH = Math.max(1, H2 - chrome - PAD3 * 2);
+    const availW = Math.max(1, W4 - PAD4 * 2);
+    const availH = Math.max(1, H2 - chrome - PAD4 * 2);
     scale = Math.min(MAX_SCALE8, availW / contentW, availH / contentH);
     if (!Number.isFinite(scale) || scale <= 0) scale = 1;
   } else {
-    H2 = contentH + chrome + PAD3 * 2;
+    H2 = contentH + chrome + PAD4 * 2;
   }
-  const svg = d3Selection16.select(container).append("svg").attr("xmlns", "http://www.w3.org/2000/svg").attr("width", W3).attr("height", H2).attr("viewBox", `0 0 ${W3} ${H2}`).attr("preserveAspectRatio", "xMidYMin meet").attr("data-fit-scale", scale.toFixed(3)).style("font-family", FONT_FAMILY);
+  const svg = d3Selection16.select(container).append("svg").attr("xmlns", "http://www.w3.org/2000/svg").attr("width", W4).attr("height", H2).attr("viewBox", `0 0 ${W4} ${H2}`).attr("preserveAspectRatio", "xMidYMin meet").attr("data-fit-scale", scale.toFixed(3)).style("font-family", FONT_FAMILY);
   svg.append("style").text(
     ".family-focus-icon{opacity:0;transition:opacity .15s ease;pointer-events:none}.family-card:hover .family-focus-icon{opacity:.6;pointer-events:all}.family-focus-icon:hover{opacity:1}"
   );
@@ -49745,15 +49994,15 @@ function renderFamilyForExport(container, parsed, layout, palette, isDark, opts
       },
       palette,
       isDark,
-      width: W3,
+      width: W4,
       activeGroup: activeTagGroup
     });
     legendParent.selectAll("[data-legend-group]").classed("family-legend-group", true);
   }
-  const contentX = (W3 - contentW * scale) / 2;
+  const contentX = (W4 - contentW * scale) / 2;
   const root = svg.append("g").attr(
     "transform",
-    `translate(${contentX}, ${chrome + PAD3}) scale(${scale})`
+    `translate(${contentX}, ${chrome + PAD4}) scale(${scale})`
   );
   if (parsed.options["generations"] === "true" && layout.rows.length > 0) {
     const bandG = root.append("g").attr("class", "family-generation-bands");
@@ -57030,7 +57279,7 @@ function nodeMapWithGroups(nodes, groups) {
 function computePortPts(edges, nodeMap, direction) {
   const srcPts = /* @__PURE__ */ new Map();
   const tgtPts = /* @__PURE__ */ new Map();
-  const PAD3 = 0.1;
+  const PAD4 = 0.1;
   const activeEdges = edges.filter((e) => e.points.length > 0);
   const bySource = /* @__PURE__ */ new Map();
   for (const e of activeEdges) {
@@ -57046,7 +57295,7 @@ function computePortPts(edges, nodeMap, direction) {
     ).sort((a, b) => direction === "LR" ? a.t.y - b.t.y : a.t.x - b.t.x);
     const n = sorted.length;
     for (let i = 0; i < n; i++) {
-      const frac = n === 1 ? 0.5 : PAD3 + (1 - 2 * PAD3) * i / (n - 1);
+      const frac = n === 1 ? 0.5 : PAD4 + (1 - 2 * PAD4) * i / (n - 1);
       const { e, t } = sorted[i];
       const isBackward = direction === "LR" ? t.x < source.x : t.y < source.y;
       if (direction === "LR") {
@@ -57076,7 +57325,7 @@ function computePortPts(edges, nodeMap, direction) {
     ).sort((a, b) => direction === "LR" ? a.s.y - b.s.y : a.s.x - b.s.x);
     const n = sorted.length;
     for (let i = 0; i < n; i++) {
-      const frac = n === 1 ? 0.5 : PAD3 + (1 - 2 * PAD3) * i / (n - 1);
+      const frac = n === 1 ? 0.5 : PAD4 + (1 - 2 * PAD4) * i / (n - 1);
       const { e, s } = sorted[i];
       const isBackward = direction === "LR" ? target.x < s.x : target.y < s.y;
       if (direction === "LR") {
@@ -71275,7 +71524,7 @@ function layoutMap(resolvedIn, data, size, opts) {
   const akRef = resolved.regions.some((r) => r.iso === "US-AK") || resolved.pois.some((p) => inAlaska(p.lon, p.lat));
   const hiRef = resolved.regions.some((r) => r.iso === "US-HI") || resolved.pois.some((p) => inHawaii(p.lon, p.lat));
   if (resolved.projection === "albers-usa" && usLayer && (akRef || hiRef)) {
-    const PAD3 = 8;
+    const PAD4 = 8;
     const GAP = 12;
     const yB = height - FIT_PAD;
     const BW = 8;
@@ -71318,22 +71567,22 @@ function layoutMap(resolvedIn, data, size, opts) {
       const f = usLayer.get(iso);
       if (!f) return boxX;
       const x0 = boxX;
-      const iw = Math.min(iwReq, width - FIT_PAD - x0 - 2 * PAD3);
+      const iw = Math.min(iwReq, width - FIT_PAD - x0 - 2 * PAD4);
       if (iw < 24) return boxX;
-      const xr = x0 + iw + 2 * PAD3;
+      const xr = x0 + iw + 2 * PAD4;
       const floor = coastFloor(x0, xr);
       const topGuess = floor > -Infinity ? floor + GAP : yB - height * 0.42;
       proj.fitWidth(iw, f);
       const bb = geoPath(proj).bounds(f);
       const sh = Number.isFinite(bb[0][0]) ? bb[1][1] - bb[0][1] : iw;
-      const needH = sh + 2 * PAD3;
+      const needH = sh + 2 * PAD4;
       let topFit = topGuess;
       const bottom2 = Math.min(topFit + needH, yB);
       if (bottom2 - topFit < needH) topFit = bottom2 - needH;
       proj.fitExtent(
         [
-          [x0 + PAD3, topFit + PAD3],
-          [xr - PAD3, bottom2 - PAD3]
+          [x0 + PAD4, topFit + PAD4],
+          [xr - PAD4, bottom2 - PAD4]
         ],
         f
       );
@@ -72971,15 +73220,15 @@ function layoutMap(resolvedIn, data, size, opts) {
     }
   }
   if (regionLabelGuards.length > 0) {
-    const PAD3 = 2;
+    const PAD4 = 2;
     const poiRects = labels.filter((l) => l.poiId !== void 0 && l.hidden !== true).map((l) => {
       const w = measureLegendText(l.text, FONT2);
       const x = l.anchor === "start" ? l.x : l.anchor === "end" ? l.x - w : l.x - w / 2;
       return {
-        x: x - PAD3,
+        x: x - PAD4,
         y: l.y - FONT2,
-        w: w + 2 * PAD3,
-        h: FONT2 * 1.4 + 2 * PAD3
+        w: w + 2 * PAD4,
+        h: FONT2 * 1.4 + 2 * PAD4
       };
     });
     for (const g of regionLabelGuards) {
@@ -73592,7 +73841,7 @@ function renderMap(container, resolved, data, palette, isDark, onClickItem, expo
   if (poiLabels.length) {
     const patchBlurId = nid("dgmo-map-label-patch-blur");
     defs.append("filter").attr("id", patchBlurId).attr("x", "-50%").attr("y", "-50%").attr("width", "200%").attr("height", "200%").append("feGaussianBlur").attr("in", "SourceGraphic").attr("stdDeviation", 2.5);
-    const PAD3 = 8;
+    const PAD4 = 8;
     const buildPatch = (labels, maskId, decoCluster) => {
       if (!labels.length) return;
       const patchMask = defs.append("mask").attr("id", maskId).attr("maskUnits", "userSpaceOnUse").attr("x", 0).attr("y", 0).attr("width", width).attr("height", height);
@@ -73608,10 +73857,10 @@ function renderMap(container, resolved, data, palette, isDark, onClickItem, expo
         const h = th + 6;
         blobs.append("rect").attr("x", cx - w / 2).attr("y", cy - h / 2).attr("width", w).attr("height", h).attr("rx", h / 2).attr("fill", "white");
         blobRects.push({
-          x0: cx - w / 2 - PAD3,
-          y0: cy - h / 2 - PAD3,
-          x1: cx + w / 2 + PAD3,
-          y1: cy + h / 2 + PAD3
+          x0: cx - w / 2 - PAD4,
+          y0: cy - h / 2 - PAD4,
+          x1: cx + w / 2 + PAD4,
+          y1: cy + h / 2 + PAD4
         });
       }
       const gPatch = svg.append("g").attr("class", "dgmo-map-label-patch").attr("mask", `url(#${maskId})`).style("pointer-events", "none");
@@ -74738,16 +74987,16 @@ function renderRing(container, parsed, palette, isDark, onClickItem, exportDims)
   }
 }
 function drawRingCurvedLabel(labelG, defs, pathId, text, cx, cy, rMid, labelFont, textColor, palette) {
-  const PAD3 = 1.18;
+  const PAD4 = 1.18;
   let fs = labelFont;
   let rPath = rMid - fs * 0.32;
   const maxLen = MAX_LABEL_ARC * rPath;
-  const wPadded = measureText(text, labelFont) * PAD3;
+  const wPadded = measureText(text, labelFont) * PAD4;
   if (wPadded > maxLen) {
     fs = Math.max(LABEL_FONT_MIN2, Math.floor(labelFont * maxLen / wPadded));
     rPath = rMid - fs * 0.32;
   }
-  const arcLen = measureText(text, fs) * PAD3;
+  const arcLen = measureText(text, fs) * PAD4;
   const halfAngle = Math.min(arcLen / (2 * rPath), MAX_LABEL_ARC / 2);
   const largeArc = halfAngle * 2 > Math.PI ? 1 : 0;
   const p0x = cx - Math.sin(halfAngle) * rPath;
@@ -75699,13 +75948,13 @@ function renderTreemap(container, parsed, palette, isDark, exportDims, options =
         g.append("text").attr("class", "dgmo-treemap-header-value").attr("x", w - ICON_RESERVE - 4).attr("y", 13).attr("text-anchor", "end").attr("font-size", 10.5).attr("fill", ink).attr("opacity", 0.75).text(valStr);
       }
     }
-    const PAD3 = Math.max(4, Math.min(14, Math.floor(Math.min(w, h) / 5)));
+    const PAD4 = Math.max(4, Math.min(14, Math.floor(Math.min(w, h) / 5)));
     const MIN_FS = 7;
-    if (!cell.isContainer && w >= 2 * PAD3 + 8 && h >= 2 * PAD3 + 8) {
-      const maxW = w - 2 * PAD3;
+    if (!cell.isContainer && w >= 2 * PAD4 + 8 && h >= 2 * PAD4 + 8) {
+      const maxW = w - 2 * PAD4;
       const horizMinW = measureText(cell.label, MIN_FS) * 1.06;
-      if (horizMinW > maxW && h > w * 1.25 && h - 2 * PAD3 > maxW) {
-        drawVerticalLabel(g, cell.label, w, h, PAD3, ink);
+      if (horizMinW > maxW && h > w * 1.25 && h - 2 * PAD4 > maxW) {
+        drawVerticalLabel(g, cell.label, w, h, PAD4, ink);
         if (drillable && w > 30 && h > 22) drawFocusIcon(g, w, ink, 9);
         continue;
       }
@@ -75716,8 +75965,8 @@ function renderTreemap(container, parsed, palette, isDark, exportDims, options =
       const nameOpacity = 0.95 - tg * 0.5;
       const vfs = clamp4(Math.round(fs * 0.42), 11, 28);
       const valOpacity = Math.max(0.45, nameOpacity - 0.1);
-      let y = PAD3 + Math.round(fs * 0.78);
-      g.append("text").attr("class", "dgmo-treemap-label").attr("x", PAD3).attr("y", y).attr("font-size", fs).attr("font-weight", 600).attr("fill", ink).attr("opacity", nameOpacity).text(clipLabel(cell.label, maxW, fs));
+      let y = PAD4 + Math.round(fs * 0.78);
+      g.append("text").attr("class", "dgmo-treemap-label").attr("x", PAD4).attr("y", y).attr("font-size", fs).attr("font-weight", 600).attr("fill", ink).attr("opacity", nameOpacity).text(clipLabel(cell.label, maxW, fs));
       const valParts = [
         opts.noValues ? "" : compactNumber2(cell.value),
         opts.noPercent ? "" : formatPct(cell.pctOfRoot)
@@ -75725,12 +75974,12 @@ function renderTreemap(container, parsed, palette, isDark, exportDims, options =
       const combined = valParts.join(" \xB7 ");
       const nameBaseY = y;
       const addLineAt = (text, yy, size, opacity) => {
-        g.append("text").attr("class", "dgmo-treemap-value").attr("x", PAD3).attr("y", yy).attr("font-size", size).attr("fill", ink).attr("opacity", opacity).text(text);
+        g.append("text").attr("class", "dgmo-treemap-value").attr("x", PAD4).attr("y", yy).attr("font-size", size).attr("fill", ink).attr("opacity", opacity).text(text);
       };
       if (combined) {
         const fitsW = measureText(combined, vfs) <= maxW;
         const valY = y + lineDrop(fs, vfs);
-        const roomBelow = valY + descent(vfs) <= h - PAD3;
+        const roomBelow = valY + descent(vfs) <= h - PAD4;
         if (fitsW && roomBelow) {
           addLineAt(combined, valY, vfs, valOpacity);
         } else if (fitsW) {
@@ -75738,24 +75987,24 @@ function renderTreemap(container, parsed, palette, isDark, exportDims, options =
           const rendered = clipLabel(cell.label, maxW, fs);
           const nW = measureText(rendered, fs) * 1.12;
           const gap = Math.max(12, Math.round(fs * 0.25));
-          if (PAD3 + nW + gap + measureText(combined, ivfs) <= w - PAD3) {
-            g.append("text").attr("class", "dgmo-treemap-value").attr("x", PAD3 + nW + gap).attr("y", nameBaseY).attr("font-size", ivfs).attr("fill", ink).attr("opacity", valOpacity).text(combined);
+          if (PAD4 + nW + gap + measureText(combined, ivfs) <= w - PAD4) {
+            g.append("text").attr("class", "dgmo-treemap-value").attr("x", PAD4 + nW + gap).attr("y", nameBaseY).attr("font-size", ivfs).attr("fill", ink).attr("opacity", valOpacity).text(combined);
           }
         } else if (valParts.length === 2) {
           const d1 = lineDrop(fs, vfs);
-          if (y + d1 + descent(vfs) <= h - PAD3) {
+          if (y + d1 + descent(vfs) <= h - PAD4) {
             y += d1;
             addLineAt(valParts[0], y, vfs, valOpacity);
           }
           const pfs = Math.max(10, Math.round(vfs * 0.9));
           const d2 = lineDrop(vfs, pfs);
-          if (y + d2 + descent(pfs) <= h - PAD3) {
+          if (y + d2 + descent(pfs) <= h - PAD4) {
             y += d2;
             addLineAt(valParts[1], y, pfs, valOpacity);
           }
         } else {
           const onlyY = y + lineDrop(fs, vfs);
-          if (onlyY + descent(vfs) <= h - PAD3) {
+          if (onlyY + descent(vfs) <= h - PAD4) {
             addLineAt(combined, onlyY, vfs, valOpacity);
           }
         }
@@ -75871,422 +76120,1011 @@ var init_renderer26 = __esm({
   }
 });
 
-// src/block/layout.ts
-function layoutBlock(grid, opts = {}) {
-  const collapsed = opts.collapsed ?? /* @__PURE__ */ new Set();
-  const node = layoutGrid(grid, 0, 0, null, collapsed);
-  return { width: node.w, height: node.h, items: node.items };
-}
-function maxSpanSum(g) {
-  return Math.max(
-    1,
-    ...g.rows.map((r) => r.reduce((s, c) => s + (c.span || 1), 0))
-  );
-}
-function leafW(node) {
-  return Math.max(
-    MIN_COL,
-    Math.min(MAX_COL, measureText(node.label, LABEL_FS) + 2 * BLOCK_PAD + 14)
-  );
-}
-function gridColW(g) {
-  let m = MIN_COL;
-  for (const row of g.rows)
-    for (const c of row) {
-      if (!isBlockNode(c)) continue;
-      const iw = c.grid ? intrinsicGridW(c.grid) + 2 * BLOCK_PAD : leafW(c);
-      m = Math.max(m, iw / (c.span || 1));
-    }
-  return m;
-}
-function intrinsicGridW(g) {
-  const cols = g.cols ?? maxSpanSum(g);
-  return cols * gridColW(g) + (cols + 1) * BLOCK_GAP;
-}
-function layoutGrid(g, ox, oy, forceColW, collapsed) {
-  const cols = g.cols ?? maxSpanSum(g);
-  const colW = forceColW ?? gridColW(g);
-  const gridW = cols * colW + (cols + 1) * BLOCK_GAP;
-  let cy = oy + BLOCK_GAP;
-  const items = [];
-  let maxRight = ox + BLOCK_GAP;
-  for (const row of g.rows) {
-    let cx = ox + BLOCK_GAP;
-    let rowH = BLOCK_LEAF_H;
-    const rowItems = [];
-    for (const cell of row) {
-      const span = cell.span || 1;
-      const cw = span * colW + (span - 1) * BLOCK_GAP;
-      if (!isBlockNode(cell)) {
-        rowItems.push({ type: "empty", x: cx, y: cy, w: cw, h: BLOCK_LEAF_H });
-        cx += cw + BLOCK_GAP;
-        maxRight = Math.max(maxRight, cx - BLOCK_GAP);
-        continue;
-      }
-      if (cell.grid && collapsed.has(cell.id)) {
-        const item = {
-          type: "collapsed",
-          x: cx,
-          y: cy,
-          w: cw,
-          h: BLOCK_COLLAPSED_H,
-          label: cell.label,
-          node: cell,
-          lineNumber: cell.lineNumber
-        };
-        rowItems.push(item);
-        rowH = Math.max(rowH, BLOCK_COLLAPSED_H);
-        cx += cw + BLOCK_GAP;
-        maxRight = Math.max(maxRight, cx - BLOCK_GAP);
-        continue;
-      }
-      if (cell.grid) {
-        const innerCols = cell.grid.cols ?? maxSpanSum(cell.grid);
-        const innerColW = Math.max(
-          MIN_COL * 0.66,
-          (cw - 2 * BLOCK_PAD - (innerCols + 1) * BLOCK_GAP) / innerCols
-        );
-        const inner = layoutGrid(
-          cell.grid,
-          cx + BLOCK_PAD,
-          cy + BLOCK_HEADER_H,
-          innerColW,
-          collapsed
-        );
-        const h = BLOCK_HEADER_H + inner.h + BLOCK_PAD;
-        rowItems.push({
-          type: "container",
-          x: cx,
-          y: cy,
-          w: cw,
-          h,
-          label: cell.label,
-          node: cell,
-          lineNumber: cell.lineNumber,
-          inner: inner.items
-        });
-        rowH = Math.max(rowH, h);
-        cx += cw + BLOCK_GAP;
-        maxRight = Math.max(maxRight, cx - BLOCK_GAP);
-        continue;
-      }
-      rowItems.push({
-        type: "leaf",
-        x: cx,
-        y: cy,
-        w: cw,
-        h: BLOCK_LEAF_H,
-        label: cell.label,
-        node: cell,
-        lineNumber: cell.lineNumber
-      });
-      cx += cw + BLOCK_GAP;
-      maxRight = Math.max(maxRight, cx - BLOCK_GAP);
-    }
-    items.push(...rowItems);
-    cy += rowH + BLOCK_GAP;
-  }
-  const fitW = Math.max(gridW, maxRight - ox + BLOCK_GAP);
-  return { x: ox, y: oy, w: fitW, h: cy - oy, items };
-}
-var BLOCK_GAP, BLOCK_PAD, BLOCK_LEAF_H, BLOCK_HEADER_H, BLOCK_COLLAPSED_H, BLOCK_BAR_H, MIN_COL, MAX_COL, LABEL_FS;
-var init_layout20 = __esm({
-  "src/block/layout.ts"() {
+// node_modules/.pnpm/lz-string@1.5.0/node_modules/lz-string/libs/lz-string.js
+var require_lz_string = __commonJS({
+  "node_modules/.pnpm/lz-string@1.5.0/node_modules/lz-string/libs/lz-string.js"(exports, module) {
     "use strict";
-    init_text_measure();
-    init_types4();
-    BLOCK_GAP = 12;
-    BLOCK_PAD = 10;
-    BLOCK_LEAF_H = 46;
-    BLOCK_HEADER_H = 28;
-    BLOCK_COLLAPSED_H = 46;
-    BLOCK_BAR_H = 6;
-    MIN_COL = 104;
-    MAX_COL = 250;
-    LABEL_FS = 13;
-  }
-});
-
-// src/block/renderer.ts
-var renderer_exports26 = {};
-__export(renderer_exports26, {
-  authoredCollapsedIds: () => authoredCollapsedIds,
-  renderBlock: () => renderBlock,
-  renderBlockForExport: () => renderBlockForExport
-});
-import * as d3Selection33 from "d3-selection";
-function renderBlockForExport(container, parsed, palette, isDark, exportDims, options) {
-  renderBlock(container, parsed, palette, isDark, exportDims, {
-    exportMode: true,
-    ...options
-  });
-}
-function renderBlock(container, parsed, palette, isDark, exportDims, options = {}) {
-  if (parsed.error || parsed.top.rows.length === 0) return;
-  d3Selection33.select(container).selectAll(":not([data-d3-tooltip])").remove();
-  const opts = parsed.options;
-  const showTitle = !!parsed.title;
-  const titleH = showTitle ? TITLE_BAND2 : 0;
-  const collapsed = options.collapsed ?? authoredCollapsedIds(parsed);
-  const layout = layoutBlock(parsed.top, { collapsed });
-  const legend = !opts.noLegend ? buildBlockLegend(parsed) : null;
-  let width;
-  let height;
-  if (options.exportMode) {
-    width = Math.max(layout.width, MIN_EXPORT_WIDTH) + PADDING5 * 2;
-  } else {
-    width = exportDims?.width ?? container.clientWidth;
-  }
-  const legendReserve = legend ? getMaxLegendReservedHeight(
-    { groups: legend.groups, position: LEGEND_POSITION3, mode: "preview" },
-    width
-  ) + LEGEND_GROUP_GAP : 0;
-  const inlineRequested = opts.legendInline === true;
-  const legendExtent = inlineRequested && legend ? getLegendExtent(
-    {
-      groups: legend.groups,
-      position: {
-        placement: "top-center",
-        titleRelation: "inline-with-title"
-      },
-      mode: options.exportMode ? "export" : "preview"
-    },
-    { activeGroup: legend.activeGroup ?? null },
-    width
-  ) : { width: 0, height: 0 };
-  const header = layoutInlineHeader({
-    requested: inlineRequested,
-    title: parsed.title ?? "",
-    hasLegend: !!legend,
-    legendWidth: legendExtent.width,
-    legendHeight: legendExtent.height,
-    containerWidth: width,
-    titleBandHeight: titleH,
-    legendReserve,
-    titleBaselineY: TITLE_Y,
-    titleFontSize: TITLE_FONT_SIZE
-  });
-  const areaY = (header.inline ? titleH : titleH + legendReserve) + PADDING5;
-  if (options.exportMode) {
-    height = areaY + layout.height + PADDING5;
-  } else {
-    height = exportDims?.height ?? container.clientHeight;
-  }
-  if (width <= 0 || height <= 0) return;
-  const areaX = PADDING5;
-  const areaW = Math.max(1, width - PADDING5 * 2);
-  const areaH = Math.max(1, height - areaY - PADDING5);
-  const scale = Math.min(1, areaW / layout.width, areaH / layout.height);
-  const offsetX = areaX + (areaW - layout.width * scale) / 2;
-  const offsetY = areaY;
-  const svg = d3Selection33.select(container).append("svg").attr("width", width).attr("height", height).attr("viewBox", `0 0 ${width} ${height}`).attr("preserveAspectRatio", "xMidYMin meet").attr("xmlns", "http://www.w3.org/2000/svg").attr("class", "dgmo-block").style("font-family", FONT_FAMILY);
-  if (showTitle) {
-    const title = svg.append("text").attr("class", "chart-title").attr("x", header.titleX).attr("y", TITLE_Y).attr("text-anchor", header.titleAnchor).attr("fill", palette.text).attr("font-family", FONT_FAMILY).attr("font-size", TITLE_FONT_SIZE).attr("font-weight", TITLE_FONT_WEIGHT).text(parsed.title);
-    if (parsed.titleLineNumber !== null) {
-      title.attr("data-line-number", parsed.titleLineNumber);
-    }
-  }
-  const activeGroup = parsed.tagGroups.length > 0 ? parsed.tagGroups[0].name : null;
-  const neutral = mix(palette.text, palette.bg, 22);
-  const root = svg.append("g").attr("class", "dgmo-block-cells").attr("transform", `translate(${offsetX},${offsetY}) scale(${scale})`);
-  drawItems(root, layout.items, {
-    palette,
-    tagGroups: parsed.tagGroups,
-    activeGroup,
-    activeKey: activeGroup ? tagAttrKey(activeGroup) : null,
-    neutral,
-    fillMode: opts.fillMode,
-    isDark,
-    onToggle: options.onToggle
-  });
-  if (legend) {
-    const legendG = svg.append("g").attr("class", "dgmo-block-legend").attr(
-      "transform",
-      header.inline ? `translate(${header.legendX}, ${header.legendY})` : `translate(0, ${titleH})`
-    );
-    renderIntegratedLegend(legendG, {
-      groups: legend.groups,
-      palette: {
-        bg: palette.bg,
-        surface: palette.surface,
-        text: palette.text,
-        textMuted: palette.textMuted,
-        primary: palette.primary
-      },
-      isDark,
-      width,
-      mode: options.exportMode ? "export" : "preview",
-      position: {
-        placement: "top-center",
-        titleRelation: header.inline ? "inline-with-title" : "below-title"
-      },
-      activeGroup: legend.activeGroup
-    });
-  }
-}
-function colorOf(node, ctx) {
-  if (!node || !ctx.activeGroup) return null;
-  return resolveTagColor(node.metadata, ctx.tagGroups, ctx.activeGroup) ?? null;
-}
-function clipLabel2(s, maxWidth, fs) {
-  if (measureText(s, fs) <= maxWidth) return s;
-  let lo = 0;
-  let hi = s.length;
-  while (lo < hi) {
-    const mid = Math.ceil((lo + hi) / 2);
-    if (measureText(s.slice(0, mid) + "\u2026", fs) <= maxWidth) lo = mid;
-    else hi = mid - 1;
-  }
-  return lo <= 0 ? "" : s.slice(0, lo) + "\u2026";
-}
-function drawItems(g, items, ctx, path = []) {
-  const { palette, fillMode } = ctx;
-  for (const it of items) {
-    if (it.type === "empty") {
-      g.append("rect").attr("x", it.x).attr("y", it.y).attr("width", it.w).attr("height", it.h).attr("rx", 7).attr("fill", "none").attr("stroke", ctx.neutral).attr("stroke-width", 1).attr("stroke-dasharray", "3 4").attr("opacity", 0.7);
-      continue;
-    }
-    const node = it.node;
-    const itemPath = [...path, node.id];
-    const color = colorOf(node, ctx);
-    const stroke2 = color ?? ctx.neutral;
-    const cell = g.append("g").attr("class", "dgmo-block-cell").attr("data-block-id", node.id).attr("data-block-path", itemPath.join(" / "));
-    if (it.lineNumber !== void 0)
-      cell.attr("data-line-number", it.lineNumber);
-    if (ctx.activeKey) {
-      const v = node.metadata[ctx.activeKey];
-      if (v) cell.attr(`data-tag-${ctx.activeKey}`, v);
-    }
-    if (it.type === "collapsed") {
-      const fill3 = color ? fillMode === "solid" ? color : fillMode === "outline" ? themeBaseBg(palette, ctx.isDark) : mix(color, palette.bg, 12) : palette.surface;
-      const cid = `dgmo-block-clip-${clipCounter++}`;
-      cell.append("clipPath").attr("id", cid).append("rect").attr("x", it.x).attr("y", it.y).attr("width", it.w).attr("height", it.h).attr("rx", 10);
-      cell.append("rect").attr("x", it.x).attr("y", it.y).attr("width", it.w).attr("height", it.h).attr("rx", 10).attr("fill", fill3).attr("stroke", stroke2).attr("stroke-width", 1.5);
-      cell.append("text").attr("x", it.x + it.w / 2).attr("y", it.y + it.h / 2 + 4).attr("text-anchor", "middle").attr("font-size", 12.5).attr("font-weight", 700).attr("fill", palette.text).text(clipLabel2(it.label ?? "", it.w - 24, 12.5));
-      cell.append("rect").attr("x", it.x).attr("y", it.y + it.h - BLOCK_BAR_H).attr("width", it.w).attr("height", BLOCK_BAR_H).attr("fill", fillMode === "solid" && color ? palette.text : stroke2).attr("clip-path", `url(#${cid})`);
-      bindToggle(cell, it, ctx, it.h);
-      continue;
-    }
-    if (it.type === "container") {
-      const fill3 = color ? fillMode === "solid" ? color : fillMode === "outline" ? themeBaseBg(palette, ctx.isDark) : mix(color, palette.bg, 7) : palette.surface;
-      cell.append("rect").attr("x", it.x).attr("y", it.y).attr("width", it.w).attr("height", it.h).attr("rx", 10).attr("fill", fill3).attr("stroke", stroke2).attr("stroke-width", 1.5);
-      const sizeMetric = Math.min(it.w, it.h * 2.5);
-      const headerFs = Math.max(
-        13,
-        Math.min(20, Math.round(13 + (sizeMetric - 220) / 70))
-      );
-      const grow = (headerFs - 13) / (20 - 13);
-      const headerOpacity = 0.92 - grow * 0.3;
-      const headerY = it.y + Math.round(headerFs * 0.7) + 7;
-      cell.append("text").attr("x", it.x + it.w / 2).attr("y", headerY).attr("text-anchor", "middle").attr("font-size", headerFs).attr("font-weight", 700).attr("fill", palette.text).attr("opacity", headerOpacity).text(clipLabel2(it.label ?? "", it.w - 24, headerFs));
-      bindToggle(cell, it, ctx, BLOCK_HEADER_H);
-      if (it.inner) drawItems(g, it.inner, ctx, itemPath);
-      continue;
-    }
-    const fill2 = color ? fillMode === "solid" ? mix(color, palette.bg, 80) : fillMode === "outline" ? themeBaseBg(palette, ctx.isDark) : mix(color, palette.bg, 14) : palette.bg;
-    cell.attr("data-leaf", "true");
-    cell.append("rect").attr("x", it.x).attr("y", it.y).attr("width", it.w).attr("height", it.h).attr("rx", 8).attr("fill", fill2).attr("stroke", stroke2).attr("stroke-width", 1.25);
-    cell.append("text").attr("x", it.x + it.w / 2).attr("y", it.y + it.h / 2 + 5).attr("text-anchor", "middle").attr("font-size", 13).attr("font-weight", 600).attr("fill", palette.text).text(clipLabel2(it.label ?? "", it.w - 16, 13));
-  }
-}
-function bindToggle(cell, it, ctx, hitH) {
-  if (!ctx.onToggle || !it.node || it.lineNumber === void 0) return;
-  const id = it.node.id;
-  const ln = it.lineNumber;
-  cell.append("rect").attr("x", it.x).attr("y", it.y).attr("width", it.w).attr("height", hitH).attr("rx", 10).attr("fill", "transparent").style("cursor", "pointer").on("click", () => ctx.onToggle(id, ln));
-}
-function authoredCollapsedIds(parsed) {
-  const into = /* @__PURE__ */ new Set();
-  collectCollapsed(parsed, into);
-  return into;
-}
-function collectCollapsed(parsed, into) {
-  const walk = (grid) => {
-    for (const row of grid.rows)
-      for (const c of row)
-        if (isBlockNode(c)) {
-          if (c.collapsed && c.grid) into.add(c.id);
-          if (c.grid) walk(c.grid);
-        }
-  };
-  walk(parsed.top);
-}
-function buildBlockLegend(parsed) {
-  if (parsed.tagGroups.length === 0) return null;
-  const tg = parsed.tagGroups[0];
-  const key = tagAttrKey(tg.name);
-  const used = /* @__PURE__ */ new Set();
-  const walk = (grid) => {
-    for (const row of grid.rows)
-      for (const c of row)
-        if (isBlockNode(c)) {
-          const v = c.metadata[key];
-          if (v) used.add(v.toLowerCase());
-          if (c.grid) walk(c.grid);
+    var LZString = (function() {
+      var f = String.fromCharCode;
+      var keyStrBase64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
+      var keyStrUriSafe = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+-$";
+      var baseReverseDic = {};
+      function getBaseValue(alphabet, character) {
+        if (!baseReverseDic[alphabet]) {
+          baseReverseDic[alphabet] = {};
+          for (var i = 0; i < alphabet.length; i++) {
+            baseReverseDic[alphabet][alphabet.charAt(i)] = i;
+          }
         }
-  };
-  walk(parsed.top);
-  const entries = tg.entries.filter((e) => used.has(e.value.toLowerCase())).map((e) => ({ value: e.value, color: e.color }));
-  if (entries.length === 0) return null;
-  return { groups: [{ name: tg.name, entries }], activeGroup: tg.name };
-}
-var PADDING5, TITLE_BAND2, MIN_EXPORT_WIDTH, LEGEND_POSITION3, clipCounter;
-var init_renderer27 = __esm({
-  "src/block/renderer.ts"() {
-    "use strict";
-    init_fonts();
-    init_color_utils();
-    init_tag_groups();
-    init_inline_header();
-    init_legend_integration();
-    init_legend_layout();
-    init_legend_constants();
-    init_title_constants();
-    init_text_measure();
-    init_types4();
-    init_layout20();
-    PADDING5 = 12;
-    TITLE_BAND2 = 36;
-    MIN_EXPORT_WIDTH = 220;
-    LEGEND_POSITION3 = {
-      placement: "top-center",
-      titleRelation: "below-title"
-    };
-    clipCounter = 0;
-  }
-});
-
-// src/goal/renderer.ts
-var renderer_exports27 = {};
-__export(renderer_exports27, {
-  renderGoal: () => renderGoal,
-  renderGoalForExport: () => renderGoalForExport
-});
-import * as d3Selection34 from "d3-selection";
-function clamp5(x, lo, hi) {
-  return Math.max(lo, Math.min(hi, x));
-}
-function computeMetrics(parsed) {
-  const pctFrac = parsed.hasTarget ? parsed.now / parsed.target : 0;
-  const fillFrac = clamp5(pctFrac, 0, 1);
-  const pctLabel = `${Math.round(pctFrac * 100)}%`;
-  const targetLabel = parsed.hasTarget ? compactNumber2(parsed.target) : "?";
-  const valueLabel = `${compactNumber2(parsed.now)} / ${targetLabel}`;
-  const ariaTarget = parsed.hasTarget ? parsed.target : "?";
-  const ariaLabel = `${parsed.title ?? "Goal"}: ${parsed.now} of ${ariaTarget} (${Math.round(
-    pctFrac * 100
-  )}%)`;
-  return { pctFrac, fillFrac, pctLabel, valueLabel, ariaLabel };
-}
-function autoBandColor(pctFrac, palette) {
-  const name = pctFrac < 0.5 ? "red" : pctFrac < 0.8 ? "orange" : "green";
-  return resolveColor(name, palette) || name;
-}
-function resolvePaint(parsed, palette, isDark, pctFrac) {
-  const autoColor = !parsed.options.noAutoColor && parsed.hasTarget ? autoBandColor(pctFrac, palette) : null;
-  const base = parsed.color && resolveColor(parsed.color, palette) || parsed.color || autoColor || getSeriesColors(palette)[0];
-  return {
-    base,
+        return baseReverseDic[alphabet][character];
+      }
+      var LZString2 = {
+        compressToBase64: function(input) {
+          if (input == null) return "";
+          var res = LZString2._compress(input, 6, function(a) {
+            return keyStrBase64.charAt(a);
+          });
+          switch (res.length % 4) {
+            // To produce valid Base64
+            default:
+            // When could this happen ?
+            case 0:
+              return res;
+            case 1:
+              return res + "===";
+            case 2:
+              return res + "==";
+            case 3:
+              return res + "=";
+          }
+        },
+        decompressFromBase64: function(input) {
+          if (input == null) return "";
+          if (input == "") return null;
+          return LZString2._decompress(input.length, 32, function(index) {
+            return getBaseValue(keyStrBase64, input.charAt(index));
+          });
+        },
+        compressToUTF16: function(input) {
+          if (input == null) return "";
+          return LZString2._compress(input, 15, function(a) {
+            return f(a + 32);
+          }) + " ";
+        },
+        decompressFromUTF16: function(compressed) {
+          if (compressed == null) return "";
+          if (compressed == "") return null;
+          return LZString2._decompress(compressed.length, 16384, function(index) {
+            return compressed.charCodeAt(index) - 32;
+          });
+        },
+        //compress into uint8array (UCS-2 big endian format)
+        compressToUint8Array: function(uncompressed) {
+          var compressed = LZString2.compress(uncompressed);
+          var buf = new Uint8Array(compressed.length * 2);
+          for (var i = 0, TotalLen = compressed.length; i < TotalLen; i++) {
+            var current_value = compressed.charCodeAt(i);
+            buf[i * 2] = current_value >>> 8;
+            buf[i * 2 + 1] = current_value % 256;
+          }
+          return buf;
+        },
+        //decompress from uint8array (UCS-2 big endian format)
+        decompressFromUint8Array: function(compressed) {
+          if (compressed === null || compressed === void 0) {
+            return LZString2.decompress(compressed);
+          } else {
+            var buf = new Array(compressed.length / 2);
+            for (var i = 0, TotalLen = buf.length; i < TotalLen; i++) {
+              buf[i] = compressed[i * 2] * 256 + compressed[i * 2 + 1];
+            }
+            var result = [];
+            buf.forEach(function(c) {
+              result.push(f(c));
+            });
+            return LZString2.decompress(result.join(""));
+          }
+        },
+        //compress into a string that is already URI encoded
+        compressToEncodedURIComponent: function(input) {
+          if (input == null) return "";
+          return LZString2._compress(input, 6, function(a) {
+            return keyStrUriSafe.charAt(a);
+          });
+        },
+        //decompress from an output of compressToEncodedURIComponent
+        decompressFromEncodedURIComponent: function(input) {
+          if (input == null) return "";
+          if (input == "") return null;
+          input = input.replace(/ /g, "+");
+          return LZString2._decompress(input.length, 32, function(index) {
+            return getBaseValue(keyStrUriSafe, input.charAt(index));
+          });
+        },
+        compress: function(uncompressed) {
+          return LZString2._compress(uncompressed, 16, function(a) {
+            return f(a);
+          });
+        },
+        _compress: function(uncompressed, bitsPerChar, getCharFromInt) {
+          if (uncompressed == null) return "";
+          var i, value, context_dictionary = {}, context_dictionaryToCreate = {}, context_c = "", context_wc = "", context_w = "", context_enlargeIn = 2, context_dictSize = 3, context_numBits = 2, context_data = [], context_data_val = 0, context_data_position = 0, ii;
+          for (ii = 0; ii < uncompressed.length; ii += 1) {
+            context_c = uncompressed.charAt(ii);
+            if (!Object.prototype.hasOwnProperty.call(context_dictionary, context_c)) {
+              context_dictionary[context_c] = context_dictSize++;
+              context_dictionaryToCreate[context_c] = true;
+            }
+            context_wc = context_w + context_c;
+            if (Object.prototype.hasOwnProperty.call(context_dictionary, context_wc)) {
+              context_w = context_wc;
+            } else {
+              if (Object.prototype.hasOwnProperty.call(context_dictionaryToCreate, context_w)) {
+                if (context_w.charCodeAt(0) < 256) {
+                  for (i = 0; i < context_numBits; i++) {
+                    context_data_val = context_data_val << 1;
+                    if (context_data_position == bitsPerChar - 1) {
+                      context_data_position = 0;
+                      context_data.push(getCharFromInt(context_data_val));
+                      context_data_val = 0;
+                    } else {
+                      context_data_position++;
+                    }
+                  }
+                  value = context_w.charCodeAt(0);
+                  for (i = 0; i < 8; i++) {
+                    context_data_val = context_data_val << 1 | value & 1;
+                    if (context_data_position == bitsPerChar - 1) {
+                      context_data_position = 0;
+                      context_data.push(getCharFromInt(context_data_val));
+                      context_data_val = 0;
+                    } else {
+                      context_data_position++;
+                    }
+                    value = value >> 1;
+                  }
+                } else {
+                  value = 1;
+                  for (i = 0; i < context_numBits; i++) {
+                    context_data_val = context_data_val << 1 | value;
+                    if (context_data_position == bitsPerChar - 1) {
+                      context_data_position = 0;
+                      context_data.push(getCharFromInt(context_data_val));
+                      context_data_val = 0;
+                    } else {
+                      context_data_position++;
+                    }
+                    value = 0;
+                  }
+                  value = context_w.charCodeAt(0);
+                  for (i = 0; i < 16; i++) {
+                    context_data_val = context_data_val << 1 | value & 1;
+                    if (context_data_position == bitsPerChar - 1) {
+                      context_data_position = 0;
+                      context_data.push(getCharFromInt(context_data_val));
+                      context_data_val = 0;
+                    } else {
+                      context_data_position++;
+                    }
+                    value = value >> 1;
+                  }
+                }
+                context_enlargeIn--;
+                if (context_enlargeIn == 0) {
+                  context_enlargeIn = Math.pow(2, context_numBits);
+                  context_numBits++;
+                }
+                delete context_dictionaryToCreate[context_w];
+              } else {
+                value = context_dictionary[context_w];
+                for (i = 0; i < context_numBits; i++) {
+                  context_data_val = context_data_val << 1 | value & 1;
+                  if (context_data_position == bitsPerChar - 1) {
+                    context_data_position = 0;
+                    context_data.push(getCharFromInt(context_data_val));
+                    context_data_val = 0;
+                  } else {
+                    context_data_position++;
+                  }
+                  value = value >> 1;
+                }
+              }
+              context_enlargeIn--;
+              if (context_enlargeIn == 0) {
+                context_enlargeIn = Math.pow(2, context_numBits);
+                context_numBits++;
+              }
+              context_dictionary[context_wc] = context_dictSize++;
+              context_w = String(context_c);
+            }
+          }
+          if (context_w !== "") {
+            if (Object.prototype.hasOwnProperty.call(context_dictionaryToCreate, context_w)) {
+              if (context_w.charCodeAt(0) < 256) {
+                for (i = 0; i < context_numBits; i++) {
+                  context_data_val = context_data_val << 1;
+                  if (context_data_position == bitsPerChar - 1) {
+                    context_data_position = 0;
+                    context_data.push(getCharFromInt(context_data_val));
+                    context_data_val = 0;
+                  } else {
+                    context_data_position++;
+                  }
+                }
+                value = context_w.charCodeAt(0);
+                for (i = 0; i < 8; i++) {
+                  context_data_val = context_data_val << 1 | value & 1;
+                  if (context_data_position == bitsPerChar - 1) {
+                    context_data_position = 0;
+                    context_data.push(getCharFromInt(context_data_val));
+                    context_data_val = 0;
+                  } else {
+                    context_data_position++;
+                  }
+                  value = value >> 1;
+                }
+              } else {
+                value = 1;
+                for (i = 0; i < context_numBits; i++) {
+                  context_data_val = context_data_val << 1 | value;
+                  if (context_data_position == bitsPerChar - 1) {
+                    context_data_position = 0;
+                    context_data.push(getCharFromInt(context_data_val));
+                    context_data_val = 0;
+                  } else {
+                    context_data_position++;
+                  }
+                  value = 0;
+                }
+                value = context_w.charCodeAt(0);
+                for (i = 0; i < 16; i++) {
+                  context_data_val = context_data_val << 1 | value & 1;
+                  if (context_data_position == bitsPerChar - 1) {
+                    context_data_position = 0;
+                    context_data.push(getCharFromInt(context_data_val));
+                    context_data_val = 0;
+                  } else {
+                    context_data_position++;
+                  }
+                  value = value >> 1;
+                }
+              }
+              context_enlargeIn--;
+              if (context_enlargeIn == 0) {
+                context_enlargeIn = Math.pow(2, context_numBits);
+                context_numBits++;
+              }
+              delete context_dictionaryToCreate[context_w];
+            } else {
+              value = context_dictionary[context_w];
+              for (i = 0; i < context_numBits; i++) {
+                context_data_val = context_data_val << 1 | value & 1;
+                if (context_data_position == bitsPerChar - 1) {
+                  context_data_position = 0;
+                  context_data.push(getCharFromInt(context_data_val));
+                  context_data_val = 0;
+                } else {
+                  context_data_position++;
+                }
+                value = value >> 1;
+              }
+            }
+            context_enlargeIn--;
+            if (context_enlargeIn == 0) {
+              context_enlargeIn = Math.pow(2, context_numBits);
+              context_numBits++;
+            }
+          }
+          value = 2;
+          for (i = 0; i < context_numBits; i++) {
+            context_data_val = context_data_val << 1 | value & 1;
+            if (context_data_position == bitsPerChar - 1) {
+              context_data_position = 0;
+              context_data.push(getCharFromInt(context_data_val));
+              context_data_val = 0;
+            } else {
+              context_data_position++;
+            }
+            value = value >> 1;
+          }
+          while (true) {
+            context_data_val = context_data_val << 1;
+            if (context_data_position == bitsPerChar - 1) {
+              context_data.push(getCharFromInt(context_data_val));
+              break;
+            } else context_data_position++;
+          }
+          return context_data.join("");
+        },
+        decompress: function(compressed) {
+          if (compressed == null) return "";
+          if (compressed == "") return null;
+          return LZString2._decompress(compressed.length, 32768, function(index) {
+            return compressed.charCodeAt(index);
+          });
+        },
+        _decompress: function(length, resetValue, getNextValue) {
+          var dictionary = [], next, enlargeIn = 4, dictSize = 4, numBits = 3, entry = "", result = [], i, w, bits, resb, maxpower, power, c, data = { val: getNextValue(0), position: resetValue, index: 1 };
+          for (i = 0; i < 3; i += 1) {
+            dictionary[i] = i;
+          }
+          bits = 0;
+          maxpower = Math.pow(2, 2);
+          power = 1;
+          while (power != maxpower) {
+            resb = data.val & data.position;
+            data.position >>= 1;
+            if (data.position == 0) {
+              data.position = resetValue;
+              data.val = getNextValue(data.index++);
+            }
+            bits |= (resb > 0 ? 1 : 0) * power;
+            power <<= 1;
+          }
+          switch (next = bits) {
+            case 0:
+              bits = 0;
+              maxpower = Math.pow(2, 8);
+              power = 1;
+              while (power != maxpower) {
+                resb = data.val & data.position;
+                data.position >>= 1;
+                if (data.position == 0) {
+                  data.position = resetValue;
+                  data.val = getNextValue(data.index++);
+                }
+                bits |= (resb > 0 ? 1 : 0) * power;
+                power <<= 1;
+              }
+              c = f(bits);
+              break;
+            case 1:
+              bits = 0;
+              maxpower = Math.pow(2, 16);
+              power = 1;
+              while (power != maxpower) {
+                resb = data.val & data.position;
+                data.position >>= 1;
+                if (data.position == 0) {
+                  data.position = resetValue;
+                  data.val = getNextValue(data.index++);
+                }
+                bits |= (resb > 0 ? 1 : 0) * power;
+                power <<= 1;
+              }
+              c = f(bits);
+              break;
+            case 2:
+              return "";
+          }
+          dictionary[3] = c;
+          w = c;
+          result.push(c);
+          while (true) {
+            if (data.index > length) {
+              return "";
+            }
+            bits = 0;
+            maxpower = Math.pow(2, numBits);
+            power = 1;
+            while (power != maxpower) {
+              resb = data.val & data.position;
+              data.position >>= 1;
+              if (data.position == 0) {
+                data.position = resetValue;
+                data.val = getNextValue(data.index++);
+              }
+              bits |= (resb > 0 ? 1 : 0) * power;
+              power <<= 1;
+            }
+            switch (c = bits) {
+              case 0:
+                bits = 0;
+                maxpower = Math.pow(2, 8);
+                power = 1;
+                while (power != maxpower) {
+                  resb = data.val & data.position;
+                  data.position >>= 1;
+                  if (data.position == 0) {
+                    data.position = resetValue;
+                    data.val = getNextValue(data.index++);
+                  }
+                  bits |= (resb > 0 ? 1 : 0) * power;
+                  power <<= 1;
+                }
+                dictionary[dictSize++] = f(bits);
+                c = dictSize - 1;
+                enlargeIn--;
+                break;
+              case 1:
+                bits = 0;
+                maxpower = Math.pow(2, 16);
+                power = 1;
+                while (power != maxpower) {
+                  resb = data.val & data.position;
+                  data.position >>= 1;
+                  if (data.position == 0) {
+                    data.position = resetValue;
+                    data.val = getNextValue(data.index++);
+                  }
+                  bits |= (resb > 0 ? 1 : 0) * power;
+                  power <<= 1;
+                }
+                dictionary[dictSize++] = f(bits);
+                c = dictSize - 1;
+                enlargeIn--;
+                break;
+              case 2:
+                return result.join("");
+            }
+            if (enlargeIn == 0) {
+              enlargeIn = Math.pow(2, numBits);
+              numBits++;
+            }
+            if (dictionary[c]) {
+              entry = dictionary[c];
+            } else {
+              if (c === dictSize) {
+                entry = w + w.charAt(0);
+              } else {
+                return null;
+              }
+            }
+            result.push(entry);
+            dictionary[dictSize++] = w + entry.charAt(0);
+            enlargeIn--;
+            w = entry;
+            if (enlargeIn == 0) {
+              enlargeIn = Math.pow(2, numBits);
+              numBits++;
+            }
+          }
+        }
+      };
+      return LZString2;
+    })();
+    if (typeof define === "function" && define.amd) {
+      define(function() {
+        return LZString;
+      });
+    } else if (typeof module !== "undefined" && module != null) {
+      module.exports = LZString;
+    } else if (typeof angular !== "undefined" && angular != null) {
+      angular.module("LZString", []).factory("LZString", function() {
+        return LZString;
+      });
+    }
+  }
+});
+
+// src/sharing.ts
+function encodeViewState(state) {
+  const keys = Object.keys(state);
+  if (keys.length === 0) return "";
+  return (0, import_lz_string.compressToEncodedURIComponent)(JSON.stringify(state));
+}
+function encodeDiagramUrl(dsl, options) {
+  const baseUrl = options?.baseUrl ?? DEFAULT_BASE_URL;
+  const compressed = (0, import_lz_string.compressToEncodedURIComponent)(dsl);
+  const byteSize = new TextEncoder().encode(compressed).byteLength;
+  if (byteSize > COMPRESSED_SIZE_LIMIT) {
+    return {
+      error: "too-large",
+      compressedSize: byteSize,
+      limit: COMPRESSED_SIZE_LIMIT
+    };
+  }
+  let hash = `dgmo=${compressed}`;
+  if (options?.viewState) {
+    const vsEncoded = encodeViewState(options.viewState);
+    if (vsEncoded) {
+      hash += `&vs=${vsEncoded}`;
+    }
+  }
+  if (options?.palette && options.palette !== "nord") {
+    hash += `&pal=${encodeURIComponent(options.palette)}`;
+  }
+  if (options?.theme && options.theme !== "dark") {
+    hash += `&th=${encodeURIComponent(options.theme)}`;
+  }
+  if (options?.filename) {
+    hash += `&fn=${encodeURIComponent(options.filename)}`;
+  }
+  return { url: `${baseUrl}?${hash}#${hash}` };
+}
+var import_lz_string, DEFAULT_BASE_URL, COMPRESSED_SIZE_LIMIT;
+var init_sharing = __esm({
+  "src/sharing.ts"() {
+    "use strict";
+    import_lz_string = __toESM(require_lz_string(), 1);
+    DEFAULT_BASE_URL = "https://online.diagrammo.app";
+    COMPRESSED_SIZE_LIMIT = 8192;
+  }
+});
+
+// src/error-card.ts
+function docsLink(source) {
+  const chartType = parseDgmoChartType(source);
+  const hasGuide = chartType !== null && !chartTypes.some((c) => c.id === chartType && c.internal);
+  return hasGuide ? {
+    url: `${DOCS_BASE}/chart-${chartType}/`,
+    label: `Read the ${chartType} guide \u2197`
+  } : { url: `${DOCS_BASE}/`, label: "Browse the DGMO docs \u2197" };
+}
+var DOCS_BASE, MONO_FAMILY, W, PAD2, CONTENT_W;
+var init_error_card = __esm({
+  "src/error-card.ts"() {
+    "use strict";
+    init_dgmo_router();
+    init_chart_types();
+    DOCS_BASE = "https://diagrammo.app/docs";
+    MONO_FAMILY = "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace";
+    W = 660;
+    PAD2 = 24;
+    CONTENT_W = W - PAD2 * 2;
+  }
+});
+
+// src/live-link/renderer.ts
+var renderer_exports26 = {};
+__export(renderer_exports26, {
+  renderLiveLinkCard: () => renderLiveLinkCard
+});
+function renderLiveLinkCard(parsed, palette, theme) {
+  const isTransparent = theme === "transparent";
+  const parts = [];
+  let y = PAD3 + 18;
+  parts.push(cloudGlyph(PAD3, y - 14, 24, palette.textMuted));
+  const headline = parsed.title ?? parsed.id ?? "Unresolved live link";
+  const headlineMono = parsed.title === null && parsed.id !== null;
+  parts.push(
+    `<text x="${CONTENT_X}" y="${y}" fill="${palette.text}" font-family="${headlineMono ? MONO_FAMILY : FONT_FAMILY}" font-size="${HEADLINE_FS}" font-weight="${headlineMono ? 500 : 700}">${escapeXml(truncateText(headline, HEADLINE_FS, CONTENT_W2))}</text>`
+  );
+  y += 30;
+  parts.push(
+    `<text x="${CONTENT_X}" y="${y}" fill="${palette.textMuted}" font-family="${FONT_FAMILY}" font-size="${SUBTITLE_FS}">${escapeXml(SUBTITLE)}</text>`
+  );
+  y += 22;
+  if (parsed.title !== null && parsed.id !== null) {
+    parts.push(
+      `<text x="${CONTENT_X}" y="${y}" fill="${palette.textMuted}" font-family="${MONO_FAMILY}" font-size="${ID_FS}">${escapeXml(
+        truncateText(parsed.id, ID_FS, CONTENT_W2)
+      )}</text>`
+    );
+    y += 22;
+  }
+  const height = Math.round(y + PAD3 - 12);
+  const pageBg = isTransparent ? "" : `<rect width="100%" height="100%" fill="${palette.bg}"/>`;
+  return [
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${W2}" height="${height}" viewBox="0 0 ${W2} ${height}" preserveAspectRatio="xMidYMid meet" font-family="${FONT_FAMILY}">`,
+    pageBg,
+    `<rect x="0.5" y="0.5" width="${W2 - 1}" height="${height - 1}" rx="10" fill="${palette.surface}" stroke="${palette.border}" stroke-width="1"/>`,
+    parts.join(""),
+    `</svg>`
+  ].join("");
+}
+function cloudGlyph(x, y, size, color) {
+  const s = size / 24;
+  const d = "M6.5 19a4.5 4.5 0 0 1-.6-8.96A6 6 0 0 1 17.6 8.7 4.15 4.15 0 0 1 17.5 19Z";
+  return `<path transform="translate(${x},${y}) scale(${s})" d="${d}" fill="none" stroke="${color}" stroke-width="1.6" stroke-linejoin="round"/>`;
+}
+function escapeXml(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+var W2, PAD3, CONTENT_X, CONTENT_W2, HEADLINE_FS, SUBTITLE_FS, ID_FS, SUBTITLE;
+var init_renderer27 = __esm({
+  "src/live-link/renderer.ts"() {
+    "use strict";
+    init_text_measure();
+    init_fonts();
+    init_error_card();
+    W2 = 560;
+    PAD3 = 28;
+    CONTENT_X = PAD3 + 40;
+    CONTENT_W2 = W2 - CONTENT_X - PAD3;
+    HEADLINE_FS = 18;
+    SUBTITLE_FS = 13;
+    ID_FS = 13;
+    SUBTITLE = "Live link published at Diagrammo Cloud";
+  }
+});
+
+// src/block/layout.ts
+function layoutBlock(grid, opts = {}) {
+  const collapsed = opts.collapsed ?? /* @__PURE__ */ new Set();
+  const node = layoutGrid(grid, 0, 0, null, collapsed);
+  return { width: node.w, height: node.h, items: node.items };
+}
+function maxSpanSum(g) {
+  return Math.max(
+    1,
+    ...g.rows.map((r) => r.reduce((s, c) => s + (c.span || 1), 0))
+  );
+}
+function leafW(node) {
+  return Math.max(
+    MIN_COL,
+    Math.min(MAX_COL, measureText(node.label, LABEL_FS) + 2 * BLOCK_PAD + 14)
+  );
+}
+function gridColW(g) {
+  let m = MIN_COL;
+  for (const row of g.rows)
+    for (const c of row) {
+      if (!isBlockNode(c)) continue;
+      const iw = c.grid ? intrinsicGridW(c.grid) + 2 * BLOCK_PAD : leafW(c);
+      m = Math.max(m, iw / (c.span || 1));
+    }
+  return m;
+}
+function intrinsicGridW(g) {
+  const cols = g.cols ?? maxSpanSum(g);
+  return cols * gridColW(g) + (cols + 1) * BLOCK_GAP;
+}
+function layoutGrid(g, ox, oy, forceColW, collapsed) {
+  const cols = g.cols ?? maxSpanSum(g);
+  const colW = forceColW ?? gridColW(g);
+  const gridW = cols * colW + (cols + 1) * BLOCK_GAP;
+  let cy = oy + BLOCK_GAP;
+  const items = [];
+  let maxRight = ox + BLOCK_GAP;
+  for (const row of g.rows) {
+    let cx = ox + BLOCK_GAP;
+    let rowH = BLOCK_LEAF_H;
+    const rowItems = [];
+    for (const cell of row) {
+      const span = cell.span || 1;
+      const cw = span * colW + (span - 1) * BLOCK_GAP;
+      if (!isBlockNode(cell)) {
+        rowItems.push({ type: "empty", x: cx, y: cy, w: cw, h: BLOCK_LEAF_H });
+        cx += cw + BLOCK_GAP;
+        maxRight = Math.max(maxRight, cx - BLOCK_GAP);
+        continue;
+      }
+      if (cell.grid && collapsed.has(cell.id)) {
+        const item = {
+          type: "collapsed",
+          x: cx,
+          y: cy,
+          w: cw,
+          h: BLOCK_COLLAPSED_H,
+          label: cell.label,
+          node: cell,
+          lineNumber: cell.lineNumber
+        };
+        rowItems.push(item);
+        rowH = Math.max(rowH, BLOCK_COLLAPSED_H);
+        cx += cw + BLOCK_GAP;
+        maxRight = Math.max(maxRight, cx - BLOCK_GAP);
+        continue;
+      }
+      if (cell.grid) {
+        const innerCols = cell.grid.cols ?? maxSpanSum(cell.grid);
+        const innerColW = Math.max(
+          MIN_COL * 0.66,
+          (cw - 2 * BLOCK_PAD - (innerCols + 1) * BLOCK_GAP) / innerCols
+        );
+        const inner = layoutGrid(
+          cell.grid,
+          cx + BLOCK_PAD,
+          cy + BLOCK_HEADER_H,
+          innerColW,
+          collapsed
+        );
+        const h = BLOCK_HEADER_H + inner.h + BLOCK_PAD;
+        rowItems.push({
+          type: "container",
+          x: cx,
+          y: cy,
+          w: cw,
+          h,
+          label: cell.label,
+          node: cell,
+          lineNumber: cell.lineNumber,
+          inner: inner.items
+        });
+        rowH = Math.max(rowH, h);
+        cx += cw + BLOCK_GAP;
+        maxRight = Math.max(maxRight, cx - BLOCK_GAP);
+        continue;
+      }
+      rowItems.push({
+        type: "leaf",
+        x: cx,
+        y: cy,
+        w: cw,
+        h: BLOCK_LEAF_H,
+        label: cell.label,
+        node: cell,
+        lineNumber: cell.lineNumber
+      });
+      cx += cw + BLOCK_GAP;
+      maxRight = Math.max(maxRight, cx - BLOCK_GAP);
+    }
+    items.push(...rowItems);
+    cy += rowH + BLOCK_GAP;
+  }
+  const fitW = Math.max(gridW, maxRight - ox + BLOCK_GAP);
+  return { x: ox, y: oy, w: fitW, h: cy - oy, items };
+}
+var BLOCK_GAP, BLOCK_PAD, BLOCK_LEAF_H, BLOCK_HEADER_H, BLOCK_COLLAPSED_H, BLOCK_BAR_H, MIN_COL, MAX_COL, LABEL_FS;
+var init_layout20 = __esm({
+  "src/block/layout.ts"() {
+    "use strict";
+    init_text_measure();
+    init_types4();
+    BLOCK_GAP = 12;
+    BLOCK_PAD = 10;
+    BLOCK_LEAF_H = 46;
+    BLOCK_HEADER_H = 28;
+    BLOCK_COLLAPSED_H = 46;
+    BLOCK_BAR_H = 6;
+    MIN_COL = 104;
+    MAX_COL = 250;
+    LABEL_FS = 13;
+  }
+});
+
+// src/block/renderer.ts
+var renderer_exports27 = {};
+__export(renderer_exports27, {
+  authoredCollapsedIds: () => authoredCollapsedIds,
+  renderBlock: () => renderBlock,
+  renderBlockForExport: () => renderBlockForExport
+});
+import * as d3Selection33 from "d3-selection";
+function renderBlockForExport(container, parsed, palette, isDark, exportDims, options) {
+  renderBlock(container, parsed, palette, isDark, exportDims, {
+    exportMode: true,
+    ...options
+  });
+}
+function renderBlock(container, parsed, palette, isDark, exportDims, options = {}) {
+  if (parsed.error || parsed.top.rows.length === 0) return;
+  d3Selection33.select(container).selectAll(":not([data-d3-tooltip])").remove();
+  const opts = parsed.options;
+  const showTitle = !!parsed.title;
+  const titleH = showTitle ? TITLE_BAND2 : 0;
+  const collapsed = options.collapsed ?? authoredCollapsedIds(parsed);
+  const layout = layoutBlock(parsed.top, { collapsed });
+  const legend = !opts.noLegend ? buildBlockLegend(parsed) : null;
+  let width;
+  let height;
+  if (options.exportMode) {
+    width = Math.max(layout.width, MIN_EXPORT_WIDTH) + PADDING5 * 2;
+  } else {
+    width = exportDims?.width ?? container.clientWidth;
+  }
+  const legendReserve = legend ? getMaxLegendReservedHeight(
+    { groups: legend.groups, position: LEGEND_POSITION3, mode: "preview" },
+    width
+  ) + LEGEND_GROUP_GAP : 0;
+  const inlineRequested = opts.legendInline === true;
+  const legendExtent = inlineRequested && legend ? getLegendExtent(
+    {
+      groups: legend.groups,
+      position: {
+        placement: "top-center",
+        titleRelation: "inline-with-title"
+      },
+      mode: options.exportMode ? "export" : "preview"
+    },
+    { activeGroup: legend.activeGroup ?? null },
+    width
+  ) : { width: 0, height: 0 };
+  const header = layoutInlineHeader({
+    requested: inlineRequested,
+    title: parsed.title ?? "",
+    hasLegend: !!legend,
+    legendWidth: legendExtent.width,
+    legendHeight: legendExtent.height,
+    containerWidth: width,
+    titleBandHeight: titleH,
+    legendReserve,
+    titleBaselineY: TITLE_Y,
+    titleFontSize: TITLE_FONT_SIZE
+  });
+  const areaY = (header.inline ? titleH : titleH + legendReserve) + PADDING5;
+  if (options.exportMode) {
+    height = areaY + layout.height + PADDING5;
+  } else {
+    height = exportDims?.height ?? container.clientHeight;
+  }
+  if (width <= 0 || height <= 0) return;
+  const areaX = PADDING5;
+  const areaW = Math.max(1, width - PADDING5 * 2);
+  const areaH = Math.max(1, height - areaY - PADDING5);
+  const scale = Math.min(1, areaW / layout.width, areaH / layout.height);
+  const offsetX = areaX + (areaW - layout.width * scale) / 2;
+  const offsetY = areaY;
+  const svg = d3Selection33.select(container).append("svg").attr("width", width).attr("height", height).attr("viewBox", `0 0 ${width} ${height}`).attr("preserveAspectRatio", "xMidYMin meet").attr("xmlns", "http://www.w3.org/2000/svg").attr("class", "dgmo-block").style("font-family", FONT_FAMILY);
+  if (showTitle) {
+    const title = svg.append("text").attr("class", "chart-title").attr("x", header.titleX).attr("y", TITLE_Y).attr("text-anchor", header.titleAnchor).attr("fill", palette.text).attr("font-family", FONT_FAMILY).attr("font-size", TITLE_FONT_SIZE).attr("font-weight", TITLE_FONT_WEIGHT).text(parsed.title);
+    if (parsed.titleLineNumber !== null) {
+      title.attr("data-line-number", parsed.titleLineNumber);
+    }
+  }
+  const activeGroup = parsed.tagGroups.length > 0 ? parsed.tagGroups[0].name : null;
+  const neutral = mix(palette.text, palette.bg, 22);
+  const root = svg.append("g").attr("class", "dgmo-block-cells").attr("transform", `translate(${offsetX},${offsetY}) scale(${scale})`);
+  drawItems(root, layout.items, {
+    palette,
+    tagGroups: parsed.tagGroups,
+    activeGroup,
+    activeKey: activeGroup ? tagAttrKey(activeGroup) : null,
+    neutral,
+    fillMode: opts.fillMode,
+    isDark,
+    onToggle: options.onToggle
+  });
+  if (legend) {
+    const legendG = svg.append("g").attr("class", "dgmo-block-legend").attr(
+      "transform",
+      header.inline ? `translate(${header.legendX}, ${header.legendY})` : `translate(0, ${titleH})`
+    );
+    renderIntegratedLegend(legendG, {
+      groups: legend.groups,
+      palette: {
+        bg: palette.bg,
+        surface: palette.surface,
+        text: palette.text,
+        textMuted: palette.textMuted,
+        primary: palette.primary
+      },
+      isDark,
+      width,
+      mode: options.exportMode ? "export" : "preview",
+      position: {
+        placement: "top-center",
+        titleRelation: header.inline ? "inline-with-title" : "below-title"
+      },
+      activeGroup: legend.activeGroup
+    });
+  }
+}
+function colorOf(node, ctx) {
+  if (!node || !ctx.activeGroup) return null;
+  return resolveTagColor(node.metadata, ctx.tagGroups, ctx.activeGroup) ?? null;
+}
+function clipLabel2(s, maxWidth, fs) {
+  if (measureText(s, fs) <= maxWidth) return s;
+  let lo = 0;
+  let hi = s.length;
+  while (lo < hi) {
+    const mid = Math.ceil((lo + hi) / 2);
+    if (measureText(s.slice(0, mid) + "\u2026", fs) <= maxWidth) lo = mid;
+    else hi = mid - 1;
+  }
+  return lo <= 0 ? "" : s.slice(0, lo) + "\u2026";
+}
+function drawItems(g, items, ctx, path = []) {
+  const { palette, fillMode } = ctx;
+  for (const it of items) {
+    if (it.type === "empty") {
+      g.append("rect").attr("x", it.x).attr("y", it.y).attr("width", it.w).attr("height", it.h).attr("rx", 7).attr("fill", "none").attr("stroke", ctx.neutral).attr("stroke-width", 1).attr("stroke-dasharray", "3 4").attr("opacity", 0.7);
+      continue;
+    }
+    const node = it.node;
+    const itemPath = [...path, node.id];
+    const color = colorOf(node, ctx);
+    const stroke2 = color ?? ctx.neutral;
+    const cell = g.append("g").attr("class", "dgmo-block-cell").attr("data-block-id", node.id).attr("data-block-path", itemPath.join(" / "));
+    if (it.lineNumber !== void 0)
+      cell.attr("data-line-number", it.lineNumber);
+    if (ctx.activeKey) {
+      const v = node.metadata[ctx.activeKey];
+      if (v) cell.attr(`data-tag-${ctx.activeKey}`, v);
+    }
+    if (it.type === "collapsed") {
+      const fill3 = color ? fillMode === "solid" ? color : fillMode === "outline" ? themeBaseBg(palette, ctx.isDark) : mix(color, palette.bg, 12) : palette.surface;
+      const cid = `dgmo-block-clip-${clipCounter++}`;
+      cell.append("clipPath").attr("id", cid).append("rect").attr("x", it.x).attr("y", it.y).attr("width", it.w).attr("height", it.h).attr("rx", 10);
+      cell.append("rect").attr("x", it.x).attr("y", it.y).attr("width", it.w).attr("height", it.h).attr("rx", 10).attr("fill", fill3).attr("stroke", stroke2).attr("stroke-width", 1.5);
+      cell.append("text").attr("x", it.x + it.w / 2).attr("y", it.y + it.h / 2 + 4).attr("text-anchor", "middle").attr("font-size", 12.5).attr("font-weight", 700).attr("fill", palette.text).text(clipLabel2(it.label ?? "", it.w - 24, 12.5));
+      cell.append("rect").attr("x", it.x).attr("y", it.y + it.h - BLOCK_BAR_H).attr("width", it.w).attr("height", BLOCK_BAR_H).attr("fill", fillMode === "solid" && color ? palette.text : stroke2).attr("clip-path", `url(#${cid})`);
+      bindToggle(cell, it, ctx, it.h);
+      continue;
+    }
+    if (it.type === "container") {
+      const fill3 = color ? fillMode === "solid" ? color : fillMode === "outline" ? themeBaseBg(palette, ctx.isDark) : mix(color, palette.bg, 7) : palette.surface;
+      cell.append("rect").attr("x", it.x).attr("y", it.y).attr("width", it.w).attr("height", it.h).attr("rx", 10).attr("fill", fill3).attr("stroke", stroke2).attr("stroke-width", 1.5);
+      const sizeMetric = Math.min(it.w, it.h * 2.5);
+      const headerFs = Math.max(
+        13,
+        Math.min(20, Math.round(13 + (sizeMetric - 220) / 70))
+      );
+      const grow = (headerFs - 13) / (20 - 13);
+      const headerOpacity = 0.92 - grow * 0.3;
+      const headerY = it.y + Math.round(headerFs * 0.7) + 7;
+      cell.append("text").attr("x", it.x + it.w / 2).attr("y", headerY).attr("text-anchor", "middle").attr("font-size", headerFs).attr("font-weight", 700).attr("fill", palette.text).attr("opacity", headerOpacity).text(clipLabel2(it.label ?? "", it.w - 24, headerFs));
+      bindToggle(cell, it, ctx, BLOCK_HEADER_H);
+      if (it.inner) drawItems(g, it.inner, ctx, itemPath);
+      continue;
+    }
+    const fill2 = color ? fillMode === "solid" ? mix(color, palette.bg, 80) : fillMode === "outline" ? themeBaseBg(palette, ctx.isDark) : mix(color, palette.bg, 14) : palette.bg;
+    cell.attr("data-leaf", "true");
+    cell.append("rect").attr("x", it.x).attr("y", it.y).attr("width", it.w).attr("height", it.h).attr("rx", 8).attr("fill", fill2).attr("stroke", stroke2).attr("stroke-width", 1.25);
+    cell.append("text").attr("x", it.x + it.w / 2).attr("y", it.y + it.h / 2 + 5).attr("text-anchor", "middle").attr("font-size", 13).attr("font-weight", 600).attr("fill", palette.text).text(clipLabel2(it.label ?? "", it.w - 16, 13));
+  }
+}
+function bindToggle(cell, it, ctx, hitH) {
+  if (!ctx.onToggle || !it.node || it.lineNumber === void 0) return;
+  const id = it.node.id;
+  const ln = it.lineNumber;
+  cell.append("rect").attr("x", it.x).attr("y", it.y).attr("width", it.w).attr("height", hitH).attr("rx", 10).attr("fill", "transparent").style("cursor", "pointer").on("click", () => ctx.onToggle(id, ln));
+}
+function authoredCollapsedIds(parsed) {
+  const into = /* @__PURE__ */ new Set();
+  collectCollapsed(parsed, into);
+  return into;
+}
+function collectCollapsed(parsed, into) {
+  const walk = (grid) => {
+    for (const row of grid.rows)
+      for (const c of row)
+        if (isBlockNode(c)) {
+          if (c.collapsed && c.grid) into.add(c.id);
+          if (c.grid) walk(c.grid);
+        }
+  };
+  walk(parsed.top);
+}
+function buildBlockLegend(parsed) {
+  if (parsed.tagGroups.length === 0) return null;
+  const tg = parsed.tagGroups[0];
+  const key = tagAttrKey(tg.name);
+  const used = /* @__PURE__ */ new Set();
+  const walk = (grid) => {
+    for (const row of grid.rows)
+      for (const c of row)
+        if (isBlockNode(c)) {
+          const v = c.metadata[key];
+          if (v) used.add(v.toLowerCase());
+          if (c.grid) walk(c.grid);
+        }
+  };
+  walk(parsed.top);
+  const entries = tg.entries.filter((e) => used.has(e.value.toLowerCase())).map((e) => ({ value: e.value, color: e.color }));
+  if (entries.length === 0) return null;
+  return { groups: [{ name: tg.name, entries }], activeGroup: tg.name };
+}
+var PADDING5, TITLE_BAND2, MIN_EXPORT_WIDTH, LEGEND_POSITION3, clipCounter;
+var init_renderer28 = __esm({
+  "src/block/renderer.ts"() {
+    "use strict";
+    init_fonts();
+    init_color_utils();
+    init_tag_groups();
+    init_inline_header();
+    init_legend_integration();
+    init_legend_layout();
+    init_legend_constants();
+    init_title_constants();
+    init_text_measure();
+    init_types4();
+    init_layout20();
+    PADDING5 = 12;
+    TITLE_BAND2 = 36;
+    MIN_EXPORT_WIDTH = 220;
+    LEGEND_POSITION3 = {
+      placement: "top-center",
+      titleRelation: "below-title"
+    };
+    clipCounter = 0;
+  }
+});
+
+// src/goal/renderer.ts
+var renderer_exports28 = {};
+__export(renderer_exports28, {
+  renderGoal: () => renderGoal,
+  renderGoalForExport: () => renderGoalForExport
+});
+import * as d3Selection34 from "d3-selection";
+function clamp5(x, lo, hi) {
+  return Math.max(lo, Math.min(hi, x));
+}
+function computeMetrics(parsed) {
+  const pctFrac = parsed.hasTarget ? parsed.now / parsed.target : 0;
+  const fillFrac = clamp5(pctFrac, 0, 1);
+  const pctLabel = `${Math.round(pctFrac * 100)}%`;
+  const targetLabel = parsed.hasTarget ? compactNumber2(parsed.target) : "?";
+  const valueLabel = `${compactNumber2(parsed.now)} / ${targetLabel}`;
+  const ariaTarget = parsed.hasTarget ? parsed.target : "?";
+  const ariaLabel = `${parsed.title ?? "Goal"}: ${parsed.now} of ${ariaTarget} (${Math.round(
+    pctFrac * 100
+  )}%)`;
+  return { pctFrac, fillFrac, pctLabel, valueLabel, ariaLabel };
+}
+function autoBandColor(pctFrac, palette) {
+  const name = pctFrac < 0.5 ? "red" : pctFrac < 0.8 ? "orange" : "green";
+  return resolveColor(name, palette) || name;
+}
+function resolvePaint(parsed, palette, isDark, pctFrac) {
+  const autoColor = !parsed.options.noAutoColor && parsed.hasTarget ? autoBandColor(pctFrac, palette) : null;
+  const base = parsed.color && resolveColor(parsed.color, palette) || parsed.color || autoColor || getSeriesColors(palette)[0];
+  return {
+    base,
     // §1.9 fill family: tint (default) / solid / outline. In outline mode the
     // progress region renders hollow (theme base bg) and the traffic-light /
     // override color moves to the border — advancement still reads from the
@@ -76597,7 +77435,7 @@ function renderGauge(svg, parsed, metrics, paint) {
   };
 }
 var GOAL_TITLE_SIZE;
-var init_renderer28 = __esm({
+var init_renderer29 = __esm({
   "src/goal/renderer.ts"() {
     "use strict";
     init_fonts();
@@ -76611,8 +77449,8 @@ var init_renderer28 = __esm({
 });
 
 // src/countdown/renderer.ts
-var renderer_exports28 = {};
-__export(renderer_exports28, {
+var renderer_exports29 = {};
+__export(renderer_exports29, {
   renderCountdown: () => renderCountdown,
   renderCountdownForExport: () => renderCountdownForExport
 });
@@ -77583,7 +78421,7 @@ function renderCountdownForExport(container, parsed, palette, isDark, exportDims
   renderCountdown(container, parsed, palette, isDark, exportDims);
 }
 var MON_ABBR, WD_ABBR, DAY_START, dayDelta2, keyOf, REPEAT_ICON_PATH, MONTH_TARGET_PX;
-var init_renderer29 = __esm({
+var init_renderer30 = __esm({
   "src/countdown/renderer.ts"() {
     "use strict";
     init_fonts();
@@ -77622,8 +78460,8 @@ var init_renderer29 = __esm({
 });
 
 // src/clock/renderer.ts
-var renderer_exports29 = {};
-__export(renderer_exports29, {
+var renderer_exports30 = {};
+__export(renderer_exports30, {
   renderClock: () => renderClock,
   renderClockForExport: () => renderClockForExport
 });
@@ -78146,7 +78984,7 @@ function renderClockForExport(container, parsed, palette, isDark, exportDims) {
   renderClock(container, parsed, palette, isDark, exportDims);
 }
 var PLACE_ACCENTS, clipSeq, WEEKDAY_ABBR4;
-var init_renderer30 = __esm({
+var init_renderer31 = __esm({
   "src/clock/renderer.ts"() {
     "use strict";
     init_fonts();
@@ -78744,8 +79582,8 @@ var init_layout21 = __esm({
 });
 
 // src/bracket/renderer.ts
-var renderer_exports30 = {};
-__export(renderer_exports30, {
+var renderer_exports31 = {};
+__export(renderer_exports31, {
   bracketExportDimensions: () => bracketExportDimensions,
   renderBracket: () => renderBracket,
   renderBracketForExport: () => renderBracketForExport
@@ -79117,7 +79955,7 @@ function renderBracketForExport(container, parsed, palette, isDark, exportDims)
   renderBracket(container, parsed, palette, isDark, exportDims);
 }
 var PADDING6, TITLE_BAND3, HALF_SPAN2, COMMENT_LH, LEGEND_POSITION4;
-var init_renderer31 = __esm({
+var init_renderer32 = __esm({
   "src/bracket/renderer.ts"() {
     "use strict";
     init_fonts();
@@ -79144,8 +79982,8 @@ var init_renderer31 = __esm({
 });
 
 // src/raci/renderer.ts
-var renderer_exports31 = {};
-__export(renderer_exports31, {
+var renderer_exports32 = {};
+__export(renderer_exports32, {
   MARKER_LABELS: () => MARKER_LABELS,
   renderRaci: () => renderRaci,
   renderRaciForExport: () => renderRaciForExport
@@ -79845,7 +80683,7 @@ function parseQuotedSegments(message) {
   return out;
 }
 var MARKER_LABELS, TITLE_AREA_HEIGHT4, H_MARGIN2, V_MARGIN3, LEGEND_HEIGHT2, LEGEND_CHIP_GAP, LEGEND_CHIP_LABEL_MIN, LEGEND_LETTER_CHIP_W, TITLE_LEGEND_GAP, LEGEND_LABEL_FONT, LEGEND_LETTER_FONT, HEADER_HEIGHT5, ROW_HEIGHT, PHASE_HEIGHT, TASK_LABEL_MIN, TASK_LABEL_MAX, ROLE_COL_MIN, ROLE_COL_MAX, CELL_PAD, VIOLATION_LINE_HEIGHT, STACK_TOP_GAP, DESC_FONT2, COLUMN_RADIUS3, COLUMN_INSET, COLUMN_BOTTOM_PAD, MARKER_FONT, MARKER_FONT_WEIGHT, LABEL_FONT5, ROLE_HEADER_FONT, PHASE_FONT, TINT_PCT, NODE_RADIUS3, AUTO_ACCENTS, SLICE_GAP, NAME_LINE_HEIGHT, DESC_LINE_HEIGHT9;
-var init_renderer32 = __esm({
+var init_renderer33 = __esm({
   "src/raci/renderer.ts"() {
     "use strict";
     init_parsing();
@@ -80109,8 +80947,8 @@ var init_tag_resolution = __esm({
 });
 
 // src/sequence/renderer.ts
-var renderer_exports32 = {};
-__export(renderer_exports32, {
+var renderer_exports33 = {};
+__export(renderer_exports33, {
   applyGroupOrdering: () => applyGroupOrdering,
   applyPositionOverrides: () => applyPositionOverrides,
   buildNoteMessageMap: () => buildNoteMessageMap,
@@ -80160,7 +80998,7 @@ function wrapLabelWords(words, maxWidth, fontSize) {
   if (current) lines.push(current);
   return lines;
 }
-function renderRectParticipant(g, palette, isDark, color, fillMode, w = W, h = H) {
+function renderRectParticipant(g, palette, isDark, color, fillMode, w = W3, h = H) {
   g.append("rect").attr("x", -w / 2).attr("y", 0).attr("width", w).attr("height", h).attr("rx", 2).attr("ry", 2).attr("fill", fill(palette, isDark, color, fillMode)).attr("stroke", stroke(palette, color)).attr("stroke-width", SW);
 }
 function renderActorParticipant(g, palette, color, h = H) {
@@ -80182,7 +81020,7 @@ function renderActorParticipant(g, palette, color, h = H) {
   g.append("line").attr("x1", cx).attr("y1", bodyBottomY).attr("x2", cx - legSpan).attr("y2", legY).attr("stroke", s).attr("stroke-width", actorSW);
   g.append("line").attr("x1", cx).attr("y1", bodyBottomY).attr("x2", cx + legSpan).attr("y2", legY).attr("stroke", s).attr("stroke-width", actorSW);
 }
-function renderDatabaseParticipant(g, palette, isDark, color, fillMode, w = W, h = H) {
+function renderDatabaseParticipant(g, palette, isDark, color, fillMode, w = W3, h = H) {
   const ry = 7;
   const topY = ry;
   const bodyH = h - ry * 2;
@@ -80194,7 +81032,7 @@ function renderDatabaseParticipant(g, palette, isDark, color, fillMode, w = W, h
   g.append("line").attr("x1", w / 2).attr("y1", topY).attr("x2", w / 2).attr("y2", topY + bodyH).attr("stroke", s).attr("stroke-width", SW);
   g.append("ellipse").attr("cx", 0).attr("cy", topY).attr("rx", w / 2).attr("ry", ry).attr("fill", f).attr("stroke", s).attr("stroke-width", SW);
 }
-function renderQueueParticipant(g, palette, isDark, color, fillMode, w = W, h = H) {
+function renderQueueParticipant(g, palette, isDark, color, fillMode, w = W3, h = H) {
   const rx = 10;
   const leftX = -w / 2 + rx;
   const bodyW = w - rx * 2;
@@ -80206,7 +81044,7 @@ function renderQueueParticipant(g, palette, isDark, color, fillMode, w = W, h =
   g.append("line").attr("x1", leftX).attr("y1", h).attr("x2", leftX + bodyW).attr("y2", h).attr("stroke", s).attr("stroke-width", SW);
   g.append("ellipse").attr("cx", leftX).attr("cy", h / 2).attr("rx", rx).attr("ry", h / 2).attr("fill", f).attr("stroke", s).attr("stroke-width", SW);
 }
-function renderCacheParticipant(g, palette, isDark, color, fillMode, w = W, h = H) {
+function renderCacheParticipant(g, palette, isDark, color, fillMode, w = W3, h = H) {
   const ry = 7;
   const topY = ry;
   const bodyH = h - ry * 2;
@@ -81421,846 +82259,389 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
       renderBlockFrames(el.children, depth + 1);
       if (el.elseIfBranches) {
         for (const branch of el.elseIfBranches) {
-          renderBlockFrames(branch.children, depth + 1);
-        }
-      }
-      renderBlockFrames(el.elseChildren, depth + 1);
-    }
-  };
-  if (elements && elements.length > 0) {
-    renderBlockFrames(elements, 0);
-  }
-  const ACTIVATION_NEST_OFFSET = ctx.structural(6);
-  activations.forEach((act) => {
-    const px = participantX.get(act.participantId);
-    if (px === void 0) return;
-    const x = px - sActivationWidth / 2 + act.depth * ACTIVATION_NEST_OFFSET;
-    const y1 = stepY(act.startStep);
-    const y2 = stepY(act.endStep);
-    const coveredLines = [];
-    for (let si = act.startStep; si <= act.endStep; si++) {
-      const step = renderSteps[si];
-      if (!step) continue;
-      const msg = messages[step.messageIndex];
-      if (msg) coveredLines.push(msg.lineNumber);
-    }
-    const triggerStep = renderSteps[act.startStep];
-    const triggerMsg = triggerStep !== void 0 ? messages[triggerStep.messageIndex] : void 0;
-    const actTagValue = triggerMsg ? tagMap?.messages.get(triggerMsg.lineNumber) : void 0;
-    const actTagColor = getTagColor(actTagValue);
-    const actBaseColor = actTagColor || palette.primary;
-    svg.append("rect").attr("x", x).attr("y", y1).attr("width", sActivationWidth).attr("height", y2 - y1).attr("fill", themeBaseBg(palette, isDark));
-    const actFill = shapeFill(palette, actBaseColor, isDark, {
-      mode: fillMode
-    });
-    const actRect = svg.append("rect").attr("x", x).attr("y", y1).attr("width", sActivationWidth).attr("height", y2 - y1).attr("fill", actFill).attr("stroke", actBaseColor).attr("stroke-width", 1).attr("stroke-opacity", 0.5).attr("data-participant-id", act.participantId).attr("data-msg-lines", coveredLines.join(",")).attr("data-line-number", coveredLines[0] ?? "").attr("class", "activation");
-    if (tagKey && actTagValue) {
-      actRect.attr(`data-tag-${tagKey}`, actTagValue.toLowerCase());
-    }
-  });
-  for (const ln of deferredLines) {
-    const line11 = svg.append("line").attr("x1", ln.x1).attr("y1", ln.y1).attr("x2", ln.x2).attr("y2", ln.y2).attr("stroke", palette.textMuted).attr("stroke-width", 1).attr("stroke-dasharray", "2 3").attr("class", "block-divider");
-    if (ln.blockLine !== void 0)
-      line11.attr("data-block-line", String(ln.blockLine));
-  }
-  for (const lbl of deferredLabels) {
-    const t = svg.append("text").attr("x", lbl.x).attr("y", lbl.y).attr("fill", palette.text).attr("font-size", 11).attr("class", "block-label").text(lbl.text);
-    if (lbl.bold) t.attr("font-weight", "bold");
-    if (lbl.italic) t.attr("font-style", "italic");
-    if (lbl.blockLine !== void 0)
-      t.attr("data-block-line", String(lbl.blockLine));
-  }
-  const activeDepthAt = (pid, stepIdx) => {
-    let maxDepth = -1;
-    for (const act of activations) {
-      if (act.participantId === pid && act.startStep <= stepIdx && stepIdx <= act.endStep && act.depth > maxDepth) {
-        maxDepth = act.depth;
-      }
-    }
-    return maxDepth;
-  };
-  const arrowEdgeX = (pid, stepIdx, side) => {
-    const px = participantX.get(pid);
-    const depth = activeDepthAt(pid, stepIdx);
-    if (depth < 0) return px;
-    const offset = depth * ACTIVATION_NEST_OFFSET;
-    return side === "right" ? px + sActivationWidth / 2 + offset : px - sActivationWidth / 2 + offset;
-  };
-  const leftmostX = Math.min(...Array.from(participantX.values()));
-  const rightmostX = frameRightmostX;
-  const sectionLineX1 = leftmostX - sBoxW / 2 - 10;
-  const sectionLineX2 = rightmostX + sBoxW / 2 + 10;
-  for (const region of sectionRegions) {
-    const sec = region.section;
-    const secY = sectionYPositions.get(sec.lineNumber);
-    if (secY === void 0) continue;
-    const isCollapsed = collapsedSections?.has(sec.lineNumber) ?? false;
-    const lineColor = palette.textMuted;
-    const sectionG = svg.append("g").attr("data-section-toggle", "").attr("data-line-number", String(sec.lineNumber)).attr("data-section", "").attr("tabindex", "0").attr("role", "button").attr("aria-expanded", String(!isCollapsed));
-    const BAND_HEIGHT = 22;
-    const bandX = sectionLineX1 - 10;
-    const bandWidth = sectionLineX2 - sectionLineX1 + 20;
-    const bandOpacity = isCollapsed ? isDark ? 0.35 : 0.25 : isDark ? 0.1 : 0.08;
-    sectionG.append("rect").attr("x", bandX).attr("y", secY - BAND_HEIGHT / 2).attr("width", bandWidth).attr("height", BAND_HEIGHT).attr("fill", lineColor).attr("opacity", bandOpacity).attr("rx", 2).attr("pointer-events", "none").attr("class", "section-divider");
-    const msgCount = sectionMsgCounts.get(sec.lineNumber) ?? 0;
-    const labelText = isCollapsed ? `${sec.label} (${msgCount} ${msgCount === 1 ? "message" : "messages"})` : sec.label;
-    const labelX = (sectionLineX1 + sectionLineX2) / 2;
-    const labelHitW = Math.max(80, measureText(labelText, 11) + 24);
-    sectionG.append("rect").attr("x", labelX - labelHitW / 2).attr("y", secY - BAND_HEIGHT / 2).attr("width", labelHitW).attr("height", BAND_HEIGHT).attr("fill", "transparent").attr("class", "section-label-hit");
-    sectionG.append("text").attr("x", labelX).attr("y", secY + 4).attr("text-anchor", "middle").attr("fill", lineColor).attr("font-size", 11).attr("font-weight", "bold").attr("class", "section-label").text(labelText);
-  }
-  renderSteps.forEach((step, i) => {
-    const fromX = participantX.get(step.from);
-    const toX = participantX.get(step.to);
-    if (fromX === void 0 || toX === void 0) return;
-    const y = stepY(i);
-    const HIT_H = 20;
-    const msg = messages[step.messageIndex];
-    const msgTagValue = msg ? tagMap?.messages.get(msg.lineNumber) : void 0;
-    const msgTagColor = getTagColor(msgTagValue);
-    if (step.type === "call") {
-      const arrowColor = msgTagColor || palette.text;
-      if (step.from === step.to) {
-        const x = arrowEdgeX(step.from, i, "right");
-        const loopX = x + sSelfCallWidth;
-        const hitX = x;
-        svg.append("rect").attr("x", hitX).attr("y", y - 5).attr("width", sSelfCallWidth).attr("height", sSelfCallHeight + 10).attr("fill", "transparent").attr("class", "message-hit-area").attr("data-line-number", String(msg.lineNumber)).attr("data-msg-index", String(step.messageIndex)).attr("data-step-index", String(i));
-        const selfCallEl = svg.append("path").attr("d", `M ${x} ${y} H ${loopX} V ${y + sSelfCallHeight} H ${x}`).attr("fill", "none").attr("stroke", arrowColor).attr("stroke-width", 1.2).attr("marker-end", coloredMarker("call", msgTagColor)).attr("class", "message-arrow self-call").attr("data-line-number", String(msg.lineNumber)).attr("data-msg-index", String(step.messageIndex)).attr("data-step-index", String(i)).attr("data-from", step.from).attr("data-to", step.to);
-        if (tagKey && msgTagValue) {
-          selfCallEl.attr(`data-tag-${tagKey}`, msgTagValue.toLowerCase());
-        }
-        if (step.label) {
-          const labelEl = svg.append("text").attr("x", loopX + 5).attr("y", y + sSelfCallHeight / 2 + 4).attr("text-anchor", "start").attr("fill", arrowColor).attr("paint-order", "stroke fill").attr("stroke", palette.bg).attr("stroke-width", 4).attr("stroke-linejoin", "round").attr("font-size", 12).attr("class", "message-label").attr("data-line-number", String(msg.lineNumber)).attr("data-msg-index", String(step.messageIndex)).attr("data-step-index", String(i));
-          if (tagKey && msgTagValue) {
-            labelEl.attr(`data-tag-${tagKey}`, msgTagValue.toLowerCase());
-          }
-          labelEl.text(step.label);
-        }
-      } else {
-        const goingRight = fromX < toX;
-        const x1 = arrowEdgeX(step.from, i, goingRight ? "right" : "left");
-        const x2 = arrowEdgeX(step.to, i, goingRight ? "left" : "right");
-        svg.append("rect").attr("x", Math.min(x1, x2)).attr("y", y - HIT_H / 2).attr("width", Math.abs(x2 - x1)).attr("height", HIT_H).attr("fill", "transparent").attr("class", "message-hit-area").attr("data-line-number", String(msg.lineNumber)).attr("data-msg-index", String(step.messageIndex)).attr("data-step-index", String(i));
-        const markerRef = step.async ? coloredMarker("async", msgTagColor) : coloredMarker("call", msgTagColor);
-        const arrowEl = svg.append("line").attr("x1", x1).attr("y1", y).attr("x2", x2).attr("y2", y).attr("stroke", arrowColor).attr("stroke-width", 1.2).attr("marker-end", markerRef).attr("class", "message-arrow").attr("data-line-number", String(msg.lineNumber)).attr("data-msg-index", String(step.messageIndex)).attr("data-step-index", String(i)).attr("data-from", step.from).attr("data-to", step.to);
-        if (tagKey && msgTagValue) {
-          arrowEl.attr(`data-tag-${tagKey}`, msgTagValue.toLowerCase());
-        }
-        if (step.label) {
-          const midX = (x1 + x2) / 2;
-          const labelEl = svg.append("text").attr("x", midX).attr("y", y - 8).attr("text-anchor", "middle").attr("fill", arrowColor).attr("paint-order", "stroke fill").attr("stroke", palette.bg).attr("stroke-width", 4).attr("stroke-linejoin", "round").attr("font-size", 12).attr("class", "message-label").attr("data-line-number", String(msg.lineNumber)).attr("data-msg-index", String(step.messageIndex)).attr("data-step-index", String(i));
-          if (tagKey && msgTagValue) {
-            labelEl.attr(`data-tag-${tagKey}`, msgTagValue.toLowerCase());
-          }
-          labelEl.text(step.label);
-        }
-      }
-    } else {
-      if (step.from === step.to) {
-        return;
-      }
-      const goingRight = fromX < toX;
-      const x1 = arrowEdgeX(step.from, i, goingRight ? "right" : "left");
-      const x2 = arrowEdgeX(step.to, i, goingRight ? "left" : "right");
-      const returnColor = msgTagColor || palette.textMuted;
-      svg.append("rect").attr("x", Math.min(x1, x2)).attr("y", y - HIT_H / 2).attr("width", Math.abs(x2 - x1)).attr("height", HIT_H).attr("fill", "transparent").attr("class", "message-hit-area").attr("data-line-number", String(msg.lineNumber)).attr("data-msg-index", String(step.messageIndex)).attr("data-step-index", String(i));
-      const returnEl = svg.append("line").attr("x1", x1).attr("y1", y).attr("x2", x2).attr("y2", y).attr("stroke", returnColor).attr("stroke-width", 1).attr("stroke-dasharray", "6 4").attr("marker-end", coloredMarker("return", msgTagColor)).attr("class", "return-arrow").attr("data-line-number", String(msg.lineNumber)).attr("data-msg-index", String(step.messageIndex)).attr("data-step-index", String(i)).attr("data-from", step.from).attr("data-to", step.to);
-      if (tagKey && msgTagValue) {
-        returnEl.attr(`data-tag-${tagKey}`, msgTagValue.toLowerCase());
-      }
-      if (step.label) {
-        const midX = (x1 + x2) / 2;
-        const labelEl = svg.append("text").attr("x", midX).attr("y", y - 6).attr("text-anchor", "middle").attr("fill", returnColor).attr("paint-order", "stroke fill").attr("stroke", palette.bg).attr("stroke-width", 4).attr("stroke-linejoin", "round").attr("font-size", 11).attr("class", "message-label").attr("data-line-number", String(msg.lineNumber)).attr("data-msg-index", String(step.messageIndex)).attr("data-step-index", String(i));
-        if (tagKey && msgTagValue) {
-          labelEl.attr(`data-tag-${tagKey}`, msgTagValue.toLowerCase());
-        }
-        labelEl.text(step.label);
-      }
-    }
-  });
-  const noteFill = isDark ? mix(palette.surface, palette.bg, 50) : mix(palette.bg, palette.surface, 15);
-  const renderNoteElements = (els) => {
-    for (const el of els) {
-      if (isSequenceNote(el)) {
-        const px = participantX.get(el.participantId);
-        if (px === void 0) continue;
-        const noteTopY = noteYMap.get(el);
-        if (noteTopY === void 0) continue;
-        const position = effectiveNotePosition(el);
-        const isRight = position === "right";
-        const afterSelfCall = isNoteAfterSelfCall(el);
-        const maxW = noteEffectiveMaxW(
-          el.participantId,
-          position,
-          afterSelfCall
-        );
-        const textWidth = noteTextWidth(maxW);
-        const wrappedLines = wrapTextLines(el.text, textWidth, sNoteFontSize);
-        const noteH = wrappedLines.length * sNoteLineH + sNotePadV * 2;
-        const maxLineW = Math.max(
-          ...wrappedLines.map((l) => measureText(l.text, sNoteFontSize))
-        );
-        const noteW = Math.min(
-          maxW,
-          Math.max(80, maxLineW + sNotePadH * 2 + sNoteFold)
-        );
-        const rightOffset = afterSelfCall && isRight ? sActivationWidth / 2 + sSelfCallWidth + sNoteGap : sActivationWidth + sNoteGap;
-        const noteX = isRight ? px + rightOffset : px - sActivationWidth - sNoteGap - noteW;
-        const noteG = svg.append("g").attr("class", "note").attr("data-note-toggle", "").attr("data-line-number", String(el.lineNumber)).attr("data-line-end", String(el.endLineNumber));
-        noteG.append("path").attr(
-          "d",
-          [
-            `M ${noteX} ${noteTopY}`,
-            `L ${noteX + noteW - sNoteFold} ${noteTopY}`,
-            `L ${noteX + noteW} ${noteTopY + sNoteFold}`,
-            `L ${noteX + noteW} ${noteTopY + noteH}`,
-            `L ${noteX} ${noteTopY + noteH}`,
-            "Z"
-          ].join(" ")
-        ).attr("fill", noteFill).attr("stroke", palette.textMuted).attr("stroke-width", 0.75).attr("class", "note-box");
-        noteG.append("path").attr(
-          "d",
-          [
-            `M ${noteX + noteW - sNoteFold} ${noteTopY}`,
-            `L ${noteX + noteW - sNoteFold} ${noteTopY + sNoteFold}`,
-            `L ${noteX + noteW} ${noteTopY + sNoteFold}`
-          ].join(" ")
-        ).attr("fill", "none").attr("stroke", palette.textMuted).attr("stroke-width", 0.75).attr("class", "note-fold");
-        const BULLET_BODY_INDENT3 = 10;
-        wrappedLines.forEach((line11, li) => {
-          const textY = noteTopY + sNotePadV + (li + 1) * sNoteLineH - 3;
-          const indent = line11.kind === "plain" ? 0 : BULLET_BODY_INDENT3;
-          if (line11.kind === "bullet-first") {
-            noteG.append("text").attr("x", noteX + sNotePadH).attr("y", textY).attr("fill", palette.text).attr("font-size", sNoteFontSize).text("\u2022");
-          }
-          const textEl = noteG.append("text").attr("x", noteX + sNotePadH + indent).attr("y", textY).attr("fill", palette.text).attr("font-size", sNoteFontSize).attr("class", "note-text");
-          renderInlineText(textEl, line11.text, palette, sNoteFontSize);
-        });
-      } else if (isSequenceBlock(el)) {
-        renderNoteElements(el.children);
-        if (el.elseIfBranches) {
-          for (const branch of el.elseIfBranches) {
-            renderNoteElements(branch.children);
-          }
+          renderBlockFrames(branch.children, depth + 1);
         }
-        renderNoteElements(el.elseChildren);
       }
+      renderBlockFrames(el.elseChildren, depth + 1);
     }
   };
   if (elements && elements.length > 0) {
-    renderNoteElements(elements);
-  }
-  if (hasTagGroups) {
-    const legendY = sTopMargin + titleOffset;
-    const legendCallbacks = {};
-    const legendG = svg.append("g").attr("class", "sequence-legend").attr(
-      "transform",
-      header.inline ? `translate(${header.legendX}, ${header.legendY})` : `translate(0,${legendY})`
-    );
-    renderIntegratedLegend(legendG, {
-      ...legendConfig,
-      // Inline → left-origin so the wrapper's right-flush translate lands the
-      // legend at the header's right edge; stacked → centered below the title
-      // (identical to legendConfig.position, so the stacked path is unchanged).
-      position: {
-        placement: "top-center",
-        titleRelation: header.inline ? "inline-with-title" : "below-title"
-      },
-      palette,
-      isDark,
-      width: svgWidth,
-      activeGroup: activeTagGroup ?? null,
-      controlsExpanded: false,
-      callbacks: legendCallbacks
-    });
+    renderBlockFrames(elements, 0);
   }
-}
-function buildNoteMessageMap(elements) {
-  const map = /* @__PURE__ */ new Map();
-  let lastMessageLine = -1;
-  const walk = (els) => {
-    for (const el of els) {
-      if (isSequenceNote(el)) {
-        if (lastMessageLine >= 0) {
-          map.set(el.lineNumber, lastMessageLine);
-        }
-      } else if (isSequenceBlock(el)) {
-        walk(el.children);
-        if (el.elseIfBranches) {
-          for (const branch of el.elseIfBranches) {
-            walk(branch.children);
-          }
-        }
-        walk(el.elseChildren);
-      } else if (!isSequenceSection(el)) {
-        lastMessageLine = el.lineNumber;
-      }
+  const ACTIVATION_NEST_OFFSET = ctx.structural(6);
+  activations.forEach((act) => {
+    const px = participantX.get(act.participantId);
+    if (px === void 0) return;
+    const x = px - sActivationWidth / 2 + act.depth * ACTIVATION_NEST_OFFSET;
+    const y1 = stepY(act.startStep);
+    const y2 = stepY(act.endStep);
+    const coveredLines = [];
+    for (let si = act.startStep; si <= act.endStep; si++) {
+      const step = renderSteps[si];
+      if (!step) continue;
+      const msg = messages[step.messageIndex];
+      if (msg) coveredLines.push(msg.lineNumber);
     }
-  };
-  walk(elements);
-  return map;
-}
-function renderParticipant(svg, participant, cx, cy, palette, isDark, color, tagAttr, fillMode, boxW = W, boxH = H, labelTextW = labelTextWidth(W), labelFontSize2 = LABEL_FONT_SIZE5) {
-  const g = svg.append("g").attr("transform", `translate(${cx}, ${cy})`).attr("class", "participant").attr("data-participant-id", participant.id);
-  if (tagAttr) {
-    g.attr(`data-tag-${tagAttr.key}`, tagAttr.value);
-  }
-  switch (participant.type) {
-    case "actor":
-      renderActorParticipant(g, palette, color, boxH);
-      break;
-    case "database":
-      renderDatabaseParticipant(
-        g,
-        palette,
-        isDark,
-        color,
-        fillMode,
-        boxW,
-        boxH
-      );
-      break;
-    case "queue":
-      renderQueueParticipant(g, palette, isDark, color, fillMode, boxW, boxH);
-      break;
-    case "cache":
-      renderCacheParticipant(g, palette, isDark, color, fillMode, boxW, boxH);
-      break;
-    default:
-      renderRectParticipant(g, palette, isDark, color, fillMode, boxW, boxH);
-      break;
-  }
-  const isActor = participant.type === "actor";
-  const labelLines = splitParticipantLabel(
-    participant.label,
-    labelTextW,
-    labelFontSize2
-  );
-  const fontSize = labelFontSize2;
-  const lineHeight = fontSize + 2;
-  const labelFill = isActor ? palette.text : contrastText(
-    fill(palette, isDark, color, fillMode),
-    palette.textOnFillLight,
-    palette.textOnFillDark
-  );
-  const textEl = g.append("text").attr("x", 0).attr("text-anchor", "middle").attr("fill", labelFill).attr("font-size", fontSize).attr("font-weight", 500);
-  const maxLabelW = labelTextWidth(boxW);
-  const truncLine = (text) => truncateText(text, fontSize, maxLabelW);
-  if (labelLines.length === 1) {
-    textEl.attr("y", isActor ? boxH + 14 : boxH / 2 + 5).text(truncLine(participant.label));
-  } else {
-    const totalHeight = labelLines.length * lineHeight;
-    const baseY = isActor ? boxH + 14 - (labelLines.length - 1) * lineHeight / 2 : boxH / 2 + 5 - (totalHeight - lineHeight) / 2;
-    labelLines.forEach((line11, i) => {
-      textEl.append("tspan").attr("x", 0).attr("dy", i === 0 ? `${baseY}px` : `${lineHeight}px`).text(truncLine(line11));
+    const triggerStep = renderSteps[act.startStep];
+    const triggerMsg = triggerStep !== void 0 ? messages[triggerStep.messageIndex] : void 0;
+    const actTagValue = triggerMsg ? tagMap?.messages.get(triggerMsg.lineNumber) : void 0;
+    const actTagColor = getTagColor(actTagValue);
+    const actBaseColor = actTagColor || palette.primary;
+    svg.append("rect").attr("x", x).attr("y", y1).attr("width", sActivationWidth).attr("height", y2 - y1).attr("fill", themeBaseBg(palette, isDark));
+    const actFill = shapeFill(palette, actBaseColor, isDark, {
+      mode: fillMode
     });
+    const actRect = svg.append("rect").attr("x", x).attr("y", y1).attr("width", sActivationWidth).attr("height", y2 - y1).attr("fill", actFill).attr("stroke", actBaseColor).attr("stroke-width", 1).attr("stroke-opacity", 0.5).attr("data-participant-id", act.participantId).attr("data-msg-lines", coveredLines.join(",")).attr("data-line-number", coveredLines[0] ?? "").attr("class", "activation");
+    if (tagKey && actTagValue) {
+      actRect.attr(`data-tag-${tagKey}`, actTagValue.toLowerCase());
+    }
+  });
+  for (const ln of deferredLines) {
+    const line11 = svg.append("line").attr("x1", ln.x1).attr("y1", ln.y1).attr("x2", ln.x2).attr("y2", ln.y2).attr("stroke", palette.textMuted).attr("stroke-width", 1).attr("stroke-dasharray", "2 3").attr("class", "block-divider");
+    if (ln.blockLine !== void 0)
+      line11.attr("data-block-line", String(ln.blockLine));
   }
-}
-var PARTICIPANT_GAP, PARTICIPANT_BOX_WIDTH, PARTICIPANT_BOX_HEIGHT, LABEL_FONT_SIZE5, TOP_MARGIN, TITLE_HEIGHT8, PARTICIPANT_Y_OFFSET, MESSAGE_START_OFFSET, LIFELINE_TAIL, ARROWHEAD_SIZE, NOTE_MAX_W2, NOTE_FOLD2, NOTE_PAD_H2, NOTE_PAD_V2, NOTE_FONT_SIZE3, NOTE_LINE_H2, NOTE_GAP2, ACTIVATION_WIDTH, SELF_CALL_HEIGHT, SELF_CALL_WIDTH, ACTOR_LABEL_CLEARANCE, labelTextWidth, fill, stroke, SW, W, H;
-var init_renderer33 = __esm({
-  "src/sequence/renderer.ts"() {
-    "use strict";
-    init_tag_groups();
-    init_parsing();
-    init_color_utils();
-    init_inline_markdown();
-    init_fonts();
-    init_parser7();
-    init_collapse5();
-    init_wrapped_desc();
-    init_text_measure();
-    init_tag_resolution();
-    init_tag_groups();
-    init_legend_layout();
-    init_parsing();
-    init_inline_header();
-    init_legend_integration();
-    init_title_constants();
-    init_scaling();
-    PARTICIPANT_GAP = 160;
-    PARTICIPANT_BOX_WIDTH = 120;
-    PARTICIPANT_BOX_HEIGHT = 50;
-    LABEL_FONT_SIZE5 = 13;
-    TOP_MARGIN = 20;
-    TITLE_HEIGHT8 = 30;
-    PARTICIPANT_Y_OFFSET = 10;
-    MESSAGE_START_OFFSET = 50;
-    LIFELINE_TAIL = 30;
-    ARROWHEAD_SIZE = 8;
-    NOTE_MAX_W2 = 200;
-    NOTE_FOLD2 = 10;
-    NOTE_PAD_H2 = 8;
-    NOTE_PAD_V2 = 6;
-    NOTE_FONT_SIZE3 = 10;
-    NOTE_LINE_H2 = 14;
-    NOTE_GAP2 = 15;
-    ACTIVATION_WIDTH = 10;
-    SELF_CALL_HEIGHT = 25;
-    SELF_CALL_WIDTH = 30;
-    ACTOR_LABEL_CLEARANCE = 22;
-    labelTextWidth = (boxW) => boxW - 10;
-    fill = (palette, isDark, color, fillMode) => color ? shapeFill(palette, color, isDark, { mode: fillMode }) : isDark ? mix(palette.overlay, palette.surface, 50) : mix(palette.bg, palette.surface, 50);
-    stroke = (palette, color) => color || palette.border;
-    SW = 1.5;
-    W = PARTICIPANT_BOX_WIDTH;
-    H = PARTICIPANT_BOX_HEIGHT;
+  for (const lbl of deferredLabels) {
+    const t = svg.append("text").attr("x", lbl.x).attr("y", lbl.y).attr("fill", palette.text).attr("font-size", 11).attr("class", "block-label").text(lbl.text);
+    if (lbl.bold) t.attr("font-weight", "bold");
+    if (lbl.italic) t.attr("font-style", "italic");
+    if (lbl.blockLine !== void 0)
+      t.attr("data-block-line", String(lbl.blockLine));
   }
-});
-
-// node_modules/.pnpm/lz-string@1.5.0/node_modules/lz-string/libs/lz-string.js
-var require_lz_string = __commonJS({
-  "node_modules/.pnpm/lz-string@1.5.0/node_modules/lz-string/libs/lz-string.js"(exports, module) {
-    "use strict";
-    var LZString = (function() {
-      var f = String.fromCharCode;
-      var keyStrBase64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
-      var keyStrUriSafe = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+-$";
-      var baseReverseDic = {};
-      function getBaseValue(alphabet, character) {
-        if (!baseReverseDic[alphabet]) {
-          baseReverseDic[alphabet] = {};
-          for (var i = 0; i < alphabet.length; i++) {
-            baseReverseDic[alphabet][alphabet.charAt(i)] = i;
-          }
-        }
-        return baseReverseDic[alphabet][character];
+  const activeDepthAt = (pid, stepIdx) => {
+    let maxDepth = -1;
+    for (const act of activations) {
+      if (act.participantId === pid && act.startStep <= stepIdx && stepIdx <= act.endStep && act.depth > maxDepth) {
+        maxDepth = act.depth;
       }
-      var LZString2 = {
-        compressToBase64: function(input) {
-          if (input == null) return "";
-          var res = LZString2._compress(input, 6, function(a) {
-            return keyStrBase64.charAt(a);
-          });
-          switch (res.length % 4) {
-            // To produce valid Base64
-            default:
-            // When could this happen ?
-            case 0:
-              return res;
-            case 1:
-              return res + "===";
-            case 2:
-              return res + "==";
-            case 3:
-              return res + "=";
-          }
-        },
-        decompressFromBase64: function(input) {
-          if (input == null) return "";
-          if (input == "") return null;
-          return LZString2._decompress(input.length, 32, function(index) {
-            return getBaseValue(keyStrBase64, input.charAt(index));
-          });
-        },
-        compressToUTF16: function(input) {
-          if (input == null) return "";
-          return LZString2._compress(input, 15, function(a) {
-            return f(a + 32);
-          }) + " ";
-        },
-        decompressFromUTF16: function(compressed) {
-          if (compressed == null) return "";
-          if (compressed == "") return null;
-          return LZString2._decompress(compressed.length, 16384, function(index) {
-            return compressed.charCodeAt(index) - 32;
-          });
-        },
-        //compress into uint8array (UCS-2 big endian format)
-        compressToUint8Array: function(uncompressed) {
-          var compressed = LZString2.compress(uncompressed);
-          var buf = new Uint8Array(compressed.length * 2);
-          for (var i = 0, TotalLen = compressed.length; i < TotalLen; i++) {
-            var current_value = compressed.charCodeAt(i);
-            buf[i * 2] = current_value >>> 8;
-            buf[i * 2 + 1] = current_value % 256;
-          }
-          return buf;
-        },
-        //decompress from uint8array (UCS-2 big endian format)
-        decompressFromUint8Array: function(compressed) {
-          if (compressed === null || compressed === void 0) {
-            return LZString2.decompress(compressed);
-          } else {
-            var buf = new Array(compressed.length / 2);
-            for (var i = 0, TotalLen = buf.length; i < TotalLen; i++) {
-              buf[i] = compressed[i * 2] * 256 + compressed[i * 2 + 1];
-            }
-            var result = [];
-            buf.forEach(function(c) {
-              result.push(f(c));
-            });
-            return LZString2.decompress(result.join(""));
-          }
-        },
-        //compress into a string that is already URI encoded
-        compressToEncodedURIComponent: function(input) {
-          if (input == null) return "";
-          return LZString2._compress(input, 6, function(a) {
-            return keyStrUriSafe.charAt(a);
-          });
-        },
-        //decompress from an output of compressToEncodedURIComponent
-        decompressFromEncodedURIComponent: function(input) {
-          if (input == null) return "";
-          if (input == "") return null;
-          input = input.replace(/ /g, "+");
-          return LZString2._decompress(input.length, 32, function(index) {
-            return getBaseValue(keyStrUriSafe, input.charAt(index));
-          });
-        },
-        compress: function(uncompressed) {
-          return LZString2._compress(uncompressed, 16, function(a) {
-            return f(a);
-          });
-        },
-        _compress: function(uncompressed, bitsPerChar, getCharFromInt) {
-          if (uncompressed == null) return "";
-          var i, value, context_dictionary = {}, context_dictionaryToCreate = {}, context_c = "", context_wc = "", context_w = "", context_enlargeIn = 2, context_dictSize = 3, context_numBits = 2, context_data = [], context_data_val = 0, context_data_position = 0, ii;
-          for (ii = 0; ii < uncompressed.length; ii += 1) {
-            context_c = uncompressed.charAt(ii);
-            if (!Object.prototype.hasOwnProperty.call(context_dictionary, context_c)) {
-              context_dictionary[context_c] = context_dictSize++;
-              context_dictionaryToCreate[context_c] = true;
-            }
-            context_wc = context_w + context_c;
-            if (Object.prototype.hasOwnProperty.call(context_dictionary, context_wc)) {
-              context_w = context_wc;
-            } else {
-              if (Object.prototype.hasOwnProperty.call(context_dictionaryToCreate, context_w)) {
-                if (context_w.charCodeAt(0) < 256) {
-                  for (i = 0; i < context_numBits; i++) {
-                    context_data_val = context_data_val << 1;
-                    if (context_data_position == bitsPerChar - 1) {
-                      context_data_position = 0;
-                      context_data.push(getCharFromInt(context_data_val));
-                      context_data_val = 0;
-                    } else {
-                      context_data_position++;
-                    }
-                  }
-                  value = context_w.charCodeAt(0);
-                  for (i = 0; i < 8; i++) {
-                    context_data_val = context_data_val << 1 | value & 1;
-                    if (context_data_position == bitsPerChar - 1) {
-                      context_data_position = 0;
-                      context_data.push(getCharFromInt(context_data_val));
-                      context_data_val = 0;
-                    } else {
-                      context_data_position++;
-                    }
-                    value = value >> 1;
-                  }
-                } else {
-                  value = 1;
-                  for (i = 0; i < context_numBits; i++) {
-                    context_data_val = context_data_val << 1 | value;
-                    if (context_data_position == bitsPerChar - 1) {
-                      context_data_position = 0;
-                      context_data.push(getCharFromInt(context_data_val));
-                      context_data_val = 0;
-                    } else {
-                      context_data_position++;
-                    }
-                    value = 0;
-                  }
-                  value = context_w.charCodeAt(0);
-                  for (i = 0; i < 16; i++) {
-                    context_data_val = context_data_val << 1 | value & 1;
-                    if (context_data_position == bitsPerChar - 1) {
-                      context_data_position = 0;
-                      context_data.push(getCharFromInt(context_data_val));
-                      context_data_val = 0;
-                    } else {
-                      context_data_position++;
-                    }
-                    value = value >> 1;
-                  }
-                }
-                context_enlargeIn--;
-                if (context_enlargeIn == 0) {
-                  context_enlargeIn = Math.pow(2, context_numBits);
-                  context_numBits++;
-                }
-                delete context_dictionaryToCreate[context_w];
-              } else {
-                value = context_dictionary[context_w];
-                for (i = 0; i < context_numBits; i++) {
-                  context_data_val = context_data_val << 1 | value & 1;
-                  if (context_data_position == bitsPerChar - 1) {
-                    context_data_position = 0;
-                    context_data.push(getCharFromInt(context_data_val));
-                    context_data_val = 0;
-                  } else {
-                    context_data_position++;
-                  }
-                  value = value >> 1;
-                }
-              }
-              context_enlargeIn--;
-              if (context_enlargeIn == 0) {
-                context_enlargeIn = Math.pow(2, context_numBits);
-                context_numBits++;
-              }
-              context_dictionary[context_wc] = context_dictSize++;
-              context_w = String(context_c);
-            }
-          }
-          if (context_w !== "") {
-            if (Object.prototype.hasOwnProperty.call(context_dictionaryToCreate, context_w)) {
-              if (context_w.charCodeAt(0) < 256) {
-                for (i = 0; i < context_numBits; i++) {
-                  context_data_val = context_data_val << 1;
-                  if (context_data_position == bitsPerChar - 1) {
-                    context_data_position = 0;
-                    context_data.push(getCharFromInt(context_data_val));
-                    context_data_val = 0;
-                  } else {
-                    context_data_position++;
-                  }
-                }
-                value = context_w.charCodeAt(0);
-                for (i = 0; i < 8; i++) {
-                  context_data_val = context_data_val << 1 | value & 1;
-                  if (context_data_position == bitsPerChar - 1) {
-                    context_data_position = 0;
-                    context_data.push(getCharFromInt(context_data_val));
-                    context_data_val = 0;
-                  } else {
-                    context_data_position++;
-                  }
-                  value = value >> 1;
-                }
-              } else {
-                value = 1;
-                for (i = 0; i < context_numBits; i++) {
-                  context_data_val = context_data_val << 1 | value;
-                  if (context_data_position == bitsPerChar - 1) {
-                    context_data_position = 0;
-                    context_data.push(getCharFromInt(context_data_val));
-                    context_data_val = 0;
-                  } else {
-                    context_data_position++;
-                  }
-                  value = 0;
-                }
-                value = context_w.charCodeAt(0);
-                for (i = 0; i < 16; i++) {
-                  context_data_val = context_data_val << 1 | value & 1;
-                  if (context_data_position == bitsPerChar - 1) {
-                    context_data_position = 0;
-                    context_data.push(getCharFromInt(context_data_val));
-                    context_data_val = 0;
-                  } else {
-                    context_data_position++;
-                  }
-                  value = value >> 1;
-                }
-              }
-              context_enlargeIn--;
-              if (context_enlargeIn == 0) {
-                context_enlargeIn = Math.pow(2, context_numBits);
-                context_numBits++;
-              }
-              delete context_dictionaryToCreate[context_w];
-            } else {
-              value = context_dictionary[context_w];
-              for (i = 0; i < context_numBits; i++) {
-                context_data_val = context_data_val << 1 | value & 1;
-                if (context_data_position == bitsPerChar - 1) {
-                  context_data_position = 0;
-                  context_data.push(getCharFromInt(context_data_val));
-                  context_data_val = 0;
-                } else {
-                  context_data_position++;
-                }
-                value = value >> 1;
-              }
-            }
-            context_enlargeIn--;
-            if (context_enlargeIn == 0) {
-              context_enlargeIn = Math.pow(2, context_numBits);
-              context_numBits++;
-            }
-          }
-          value = 2;
-          for (i = 0; i < context_numBits; i++) {
-            context_data_val = context_data_val << 1 | value & 1;
-            if (context_data_position == bitsPerChar - 1) {
-              context_data_position = 0;
-              context_data.push(getCharFromInt(context_data_val));
-              context_data_val = 0;
-            } else {
-              context_data_position++;
-            }
-            value = value >> 1;
-          }
-          while (true) {
-            context_data_val = context_data_val << 1;
-            if (context_data_position == bitsPerChar - 1) {
-              context_data.push(getCharFromInt(context_data_val));
-              break;
-            } else context_data_position++;
+    }
+    return maxDepth;
+  };
+  const arrowEdgeX = (pid, stepIdx, side) => {
+    const px = participantX.get(pid);
+    const depth = activeDepthAt(pid, stepIdx);
+    if (depth < 0) return px;
+    const offset = depth * ACTIVATION_NEST_OFFSET;
+    return side === "right" ? px + sActivationWidth / 2 + offset : px - sActivationWidth / 2 + offset;
+  };
+  const leftmostX = Math.min(...Array.from(participantX.values()));
+  const rightmostX = frameRightmostX;
+  const sectionLineX1 = leftmostX - sBoxW / 2 - 10;
+  const sectionLineX2 = rightmostX + sBoxW / 2 + 10;
+  for (const region of sectionRegions) {
+    const sec = region.section;
+    const secY = sectionYPositions.get(sec.lineNumber);
+    if (secY === void 0) continue;
+    const isCollapsed = collapsedSections?.has(sec.lineNumber) ?? false;
+    const lineColor = palette.textMuted;
+    const sectionG = svg.append("g").attr("data-section-toggle", "").attr("data-line-number", String(sec.lineNumber)).attr("data-section", "").attr("tabindex", "0").attr("role", "button").attr("aria-expanded", String(!isCollapsed));
+    const BAND_HEIGHT = 22;
+    const bandX = sectionLineX1 - 10;
+    const bandWidth = sectionLineX2 - sectionLineX1 + 20;
+    const bandOpacity = isCollapsed ? isDark ? 0.35 : 0.25 : isDark ? 0.1 : 0.08;
+    sectionG.append("rect").attr("x", bandX).attr("y", secY - BAND_HEIGHT / 2).attr("width", bandWidth).attr("height", BAND_HEIGHT).attr("fill", lineColor).attr("opacity", bandOpacity).attr("rx", 2).attr("pointer-events", "none").attr("class", "section-divider");
+    const msgCount = sectionMsgCounts.get(sec.lineNumber) ?? 0;
+    const labelText = isCollapsed ? `${sec.label} (${msgCount} ${msgCount === 1 ? "message" : "messages"})` : sec.label;
+    const labelX = (sectionLineX1 + sectionLineX2) / 2;
+    const labelHitW = Math.max(80, measureText(labelText, 11) + 24);
+    sectionG.append("rect").attr("x", labelX - labelHitW / 2).attr("y", secY - BAND_HEIGHT / 2).attr("width", labelHitW).attr("height", BAND_HEIGHT).attr("fill", "transparent").attr("class", "section-label-hit");
+    sectionG.append("text").attr("x", labelX).attr("y", secY + 4).attr("text-anchor", "middle").attr("fill", lineColor).attr("font-size", 11).attr("font-weight", "bold").attr("class", "section-label").text(labelText);
+  }
+  renderSteps.forEach((step, i) => {
+    const fromX = participantX.get(step.from);
+    const toX = participantX.get(step.to);
+    if (fromX === void 0 || toX === void 0) return;
+    const y = stepY(i);
+    const HIT_H = 20;
+    const msg = messages[step.messageIndex];
+    const msgTagValue = msg ? tagMap?.messages.get(msg.lineNumber) : void 0;
+    const msgTagColor = getTagColor(msgTagValue);
+    if (step.type === "call") {
+      const arrowColor = msgTagColor || palette.text;
+      if (step.from === step.to) {
+        const x = arrowEdgeX(step.from, i, "right");
+        const loopX = x + sSelfCallWidth;
+        const hitX = x;
+        svg.append("rect").attr("x", hitX).attr("y", y - 5).attr("width", sSelfCallWidth).attr("height", sSelfCallHeight + 10).attr("fill", "transparent").attr("class", "message-hit-area").attr("data-line-number", String(msg.lineNumber)).attr("data-msg-index", String(step.messageIndex)).attr("data-step-index", String(i));
+        const selfCallEl = svg.append("path").attr("d", `M ${x} ${y} H ${loopX} V ${y + sSelfCallHeight} H ${x}`).attr("fill", "none").attr("stroke", arrowColor).attr("stroke-width", 1.2).attr("marker-end", coloredMarker("call", msgTagColor)).attr("class", "message-arrow self-call").attr("data-line-number", String(msg.lineNumber)).attr("data-msg-index", String(step.messageIndex)).attr("data-step-index", String(i)).attr("data-from", step.from).attr("data-to", step.to);
+        if (tagKey && msgTagValue) {
+          selfCallEl.attr(`data-tag-${tagKey}`, msgTagValue.toLowerCase());
+        }
+        if (step.label) {
+          const labelEl = svg.append("text").attr("x", loopX + 5).attr("y", y + sSelfCallHeight / 2 + 4).attr("text-anchor", "start").attr("fill", arrowColor).attr("paint-order", "stroke fill").attr("stroke", palette.bg).attr("stroke-width", 4).attr("stroke-linejoin", "round").attr("font-size", 12).attr("class", "message-label").attr("data-line-number", String(msg.lineNumber)).attr("data-msg-index", String(step.messageIndex)).attr("data-step-index", String(i));
+          if (tagKey && msgTagValue) {
+            labelEl.attr(`data-tag-${tagKey}`, msgTagValue.toLowerCase());
           }
-          return context_data.join("");
-        },
-        decompress: function(compressed) {
-          if (compressed == null) return "";
-          if (compressed == "") return null;
-          return LZString2._decompress(compressed.length, 32768, function(index) {
-            return compressed.charCodeAt(index);
-          });
-        },
-        _decompress: function(length, resetValue, getNextValue) {
-          var dictionary = [], next, enlargeIn = 4, dictSize = 4, numBits = 3, entry = "", result = [], i, w, bits, resb, maxpower, power, c, data = { val: getNextValue(0), position: resetValue, index: 1 };
-          for (i = 0; i < 3; i += 1) {
-            dictionary[i] = i;
+          labelEl.text(step.label);
+        }
+      } else {
+        const goingRight = fromX < toX;
+        const x1 = arrowEdgeX(step.from, i, goingRight ? "right" : "left");
+        const x2 = arrowEdgeX(step.to, i, goingRight ? "left" : "right");
+        svg.append("rect").attr("x", Math.min(x1, x2)).attr("y", y - HIT_H / 2).attr("width", Math.abs(x2 - x1)).attr("height", HIT_H).attr("fill", "transparent").attr("class", "message-hit-area").attr("data-line-number", String(msg.lineNumber)).attr("data-msg-index", String(step.messageIndex)).attr("data-step-index", String(i));
+        const markerRef = step.async ? coloredMarker("async", msgTagColor) : coloredMarker("call", msgTagColor);
+        const arrowEl = svg.append("line").attr("x1", x1).attr("y1", y).attr("x2", x2).attr("y2", y).attr("stroke", arrowColor).attr("stroke-width", 1.2).attr("marker-end", markerRef).attr("class", "message-arrow").attr("data-line-number", String(msg.lineNumber)).attr("data-msg-index", String(step.messageIndex)).attr("data-step-index", String(i)).attr("data-from", step.from).attr("data-to", step.to);
+        if (tagKey && msgTagValue) {
+          arrowEl.attr(`data-tag-${tagKey}`, msgTagValue.toLowerCase());
+        }
+        if (step.label) {
+          const midX = (x1 + x2) / 2;
+          const labelEl = svg.append("text").attr("x", midX).attr("y", y - 8).attr("text-anchor", "middle").attr("fill", arrowColor).attr("paint-order", "stroke fill").attr("stroke", palette.bg).attr("stroke-width", 4).attr("stroke-linejoin", "round").attr("font-size", 12).attr("class", "message-label").attr("data-line-number", String(msg.lineNumber)).attr("data-msg-index", String(step.messageIndex)).attr("data-step-index", String(i));
+          if (tagKey && msgTagValue) {
+            labelEl.attr(`data-tag-${tagKey}`, msgTagValue.toLowerCase());
           }
-          bits = 0;
-          maxpower = Math.pow(2, 2);
-          power = 1;
-          while (power != maxpower) {
-            resb = data.val & data.position;
-            data.position >>= 1;
-            if (data.position == 0) {
-              data.position = resetValue;
-              data.val = getNextValue(data.index++);
-            }
-            bits |= (resb > 0 ? 1 : 0) * power;
-            power <<= 1;
+          labelEl.text(step.label);
+        }
+      }
+    } else {
+      if (step.from === step.to) {
+        return;
+      }
+      const goingRight = fromX < toX;
+      const x1 = arrowEdgeX(step.from, i, goingRight ? "right" : "left");
+      const x2 = arrowEdgeX(step.to, i, goingRight ? "left" : "right");
+      const returnColor = msgTagColor || palette.textMuted;
+      svg.append("rect").attr("x", Math.min(x1, x2)).attr("y", y - HIT_H / 2).attr("width", Math.abs(x2 - x1)).attr("height", HIT_H).attr("fill", "transparent").attr("class", "message-hit-area").attr("data-line-number", String(msg.lineNumber)).attr("data-msg-index", String(step.messageIndex)).attr("data-step-index", String(i));
+      const returnEl = svg.append("line").attr("x1", x1).attr("y1", y).attr("x2", x2).attr("y2", y).attr("stroke", returnColor).attr("stroke-width", 1).attr("stroke-dasharray", "6 4").attr("marker-end", coloredMarker("return", msgTagColor)).attr("class", "return-arrow").attr("data-line-number", String(msg.lineNumber)).attr("data-msg-index", String(step.messageIndex)).attr("data-step-index", String(i)).attr("data-from", step.from).attr("data-to", step.to);
+      if (tagKey && msgTagValue) {
+        returnEl.attr(`data-tag-${tagKey}`, msgTagValue.toLowerCase());
+      }
+      if (step.label) {
+        const midX = (x1 + x2) / 2;
+        const labelEl = svg.append("text").attr("x", midX).attr("y", y - 6).attr("text-anchor", "middle").attr("fill", returnColor).attr("paint-order", "stroke fill").attr("stroke", palette.bg).attr("stroke-width", 4).attr("stroke-linejoin", "round").attr("font-size", 11).attr("class", "message-label").attr("data-line-number", String(msg.lineNumber)).attr("data-msg-index", String(step.messageIndex)).attr("data-step-index", String(i));
+        if (tagKey && msgTagValue) {
+          labelEl.attr(`data-tag-${tagKey}`, msgTagValue.toLowerCase());
+        }
+        labelEl.text(step.label);
+      }
+    }
+  });
+  const noteFill = isDark ? mix(palette.surface, palette.bg, 50) : mix(palette.bg, palette.surface, 15);
+  const renderNoteElements = (els) => {
+    for (const el of els) {
+      if (isSequenceNote(el)) {
+        const px = participantX.get(el.participantId);
+        if (px === void 0) continue;
+        const noteTopY = noteYMap.get(el);
+        if (noteTopY === void 0) continue;
+        const position = effectiveNotePosition(el);
+        const isRight = position === "right";
+        const afterSelfCall = isNoteAfterSelfCall(el);
+        const maxW = noteEffectiveMaxW(
+          el.participantId,
+          position,
+          afterSelfCall
+        );
+        const textWidth = noteTextWidth(maxW);
+        const wrappedLines = wrapTextLines(el.text, textWidth, sNoteFontSize);
+        const noteH = wrappedLines.length * sNoteLineH + sNotePadV * 2;
+        const maxLineW = Math.max(
+          ...wrappedLines.map((l) => measureText(l.text, sNoteFontSize))
+        );
+        const noteW = Math.min(
+          maxW,
+          Math.max(80, maxLineW + sNotePadH * 2 + sNoteFold)
+        );
+        const rightOffset = afterSelfCall && isRight ? sActivationWidth / 2 + sSelfCallWidth + sNoteGap : sActivationWidth + sNoteGap;
+        const noteX = isRight ? px + rightOffset : px - sActivationWidth - sNoteGap - noteW;
+        const noteG = svg.append("g").attr("class", "note").attr("data-note-toggle", "").attr("data-line-number", String(el.lineNumber)).attr("data-line-end", String(el.endLineNumber));
+        noteG.append("path").attr(
+          "d",
+          [
+            `M ${noteX} ${noteTopY}`,
+            `L ${noteX + noteW - sNoteFold} ${noteTopY}`,
+            `L ${noteX + noteW} ${noteTopY + sNoteFold}`,
+            `L ${noteX + noteW} ${noteTopY + noteH}`,
+            `L ${noteX} ${noteTopY + noteH}`,
+            "Z"
+          ].join(" ")
+        ).attr("fill", noteFill).attr("stroke", palette.textMuted).attr("stroke-width", 0.75).attr("class", "note-box");
+        noteG.append("path").attr(
+          "d",
+          [
+            `M ${noteX + noteW - sNoteFold} ${noteTopY}`,
+            `L ${noteX + noteW - sNoteFold} ${noteTopY + sNoteFold}`,
+            `L ${noteX + noteW} ${noteTopY + sNoteFold}`
+          ].join(" ")
+        ).attr("fill", "none").attr("stroke", palette.textMuted).attr("stroke-width", 0.75).attr("class", "note-fold");
+        const BULLET_BODY_INDENT3 = 10;
+        wrappedLines.forEach((line11, li) => {
+          const textY = noteTopY + sNotePadV + (li + 1) * sNoteLineH - 3;
+          const indent = line11.kind === "plain" ? 0 : BULLET_BODY_INDENT3;
+          if (line11.kind === "bullet-first") {
+            noteG.append("text").attr("x", noteX + sNotePadH).attr("y", textY).attr("fill", palette.text).attr("font-size", sNoteFontSize).text("\u2022");
           }
-          switch (next = bits) {
-            case 0:
-              bits = 0;
-              maxpower = Math.pow(2, 8);
-              power = 1;
-              while (power != maxpower) {
-                resb = data.val & data.position;
-                data.position >>= 1;
-                if (data.position == 0) {
-                  data.position = resetValue;
-                  data.val = getNextValue(data.index++);
-                }
-                bits |= (resb > 0 ? 1 : 0) * power;
-                power <<= 1;
-              }
-              c = f(bits);
-              break;
-            case 1:
-              bits = 0;
-              maxpower = Math.pow(2, 16);
-              power = 1;
-              while (power != maxpower) {
-                resb = data.val & data.position;
-                data.position >>= 1;
-                if (data.position == 0) {
-                  data.position = resetValue;
-                  data.val = getNextValue(data.index++);
-                }
-                bits |= (resb > 0 ? 1 : 0) * power;
-                power <<= 1;
-              }
-              c = f(bits);
-              break;
-            case 2:
-              return "";
+          const textEl = noteG.append("text").attr("x", noteX + sNotePadH + indent).attr("y", textY).attr("fill", palette.text).attr("font-size", sNoteFontSize).attr("class", "note-text");
+          renderInlineText(textEl, line11.text, palette, sNoteFontSize);
+        });
+      } else if (isSequenceBlock(el)) {
+        renderNoteElements(el.children);
+        if (el.elseIfBranches) {
+          for (const branch of el.elseIfBranches) {
+            renderNoteElements(branch.children);
           }
-          dictionary[3] = c;
-          w = c;
-          result.push(c);
-          while (true) {
-            if (data.index > length) {
-              return "";
-            }
-            bits = 0;
-            maxpower = Math.pow(2, numBits);
-            power = 1;
-            while (power != maxpower) {
-              resb = data.val & data.position;
-              data.position >>= 1;
-              if (data.position == 0) {
-                data.position = resetValue;
-                data.val = getNextValue(data.index++);
-              }
-              bits |= (resb > 0 ? 1 : 0) * power;
-              power <<= 1;
-            }
-            switch (c = bits) {
-              case 0:
-                bits = 0;
-                maxpower = Math.pow(2, 8);
-                power = 1;
-                while (power != maxpower) {
-                  resb = data.val & data.position;
-                  data.position >>= 1;
-                  if (data.position == 0) {
-                    data.position = resetValue;
-                    data.val = getNextValue(data.index++);
-                  }
-                  bits |= (resb > 0 ? 1 : 0) * power;
-                  power <<= 1;
-                }
-                dictionary[dictSize++] = f(bits);
-                c = dictSize - 1;
-                enlargeIn--;
-                break;
-              case 1:
-                bits = 0;
-                maxpower = Math.pow(2, 16);
-                power = 1;
-                while (power != maxpower) {
-                  resb = data.val & data.position;
-                  data.position >>= 1;
-                  if (data.position == 0) {
-                    data.position = resetValue;
-                    data.val = getNextValue(data.index++);
-                  }
-                  bits |= (resb > 0 ? 1 : 0) * power;
-                  power <<= 1;
-                }
-                dictionary[dictSize++] = f(bits);
-                c = dictSize - 1;
-                enlargeIn--;
-                break;
-              case 2:
-                return result.join("");
-            }
-            if (enlargeIn == 0) {
-              enlargeIn = Math.pow(2, numBits);
-              numBits++;
-            }
-            if (dictionary[c]) {
-              entry = dictionary[c];
-            } else {
-              if (c === dictSize) {
-                entry = w + w.charAt(0);
-              } else {
-                return null;
-              }
-            }
-            result.push(entry);
-            dictionary[dictSize++] = w + entry.charAt(0);
-            enlargeIn--;
-            w = entry;
-            if (enlargeIn == 0) {
-              enlargeIn = Math.pow(2, numBits);
-              numBits++;
-            }
+        }
+        renderNoteElements(el.elseChildren);
+      }
+    }
+  };
+  if (elements && elements.length > 0) {
+    renderNoteElements(elements);
+  }
+  if (hasTagGroups) {
+    const legendY = sTopMargin + titleOffset;
+    const legendCallbacks = {};
+    const legendG = svg.append("g").attr("class", "sequence-legend").attr(
+      "transform",
+      header.inline ? `translate(${header.legendX}, ${header.legendY})` : `translate(0,${legendY})`
+    );
+    renderIntegratedLegend(legendG, {
+      ...legendConfig,
+      // Inline → left-origin so the wrapper's right-flush translate lands the
+      // legend at the header's right edge; stacked → centered below the title
+      // (identical to legendConfig.position, so the stacked path is unchanged).
+      position: {
+        placement: "top-center",
+        titleRelation: header.inline ? "inline-with-title" : "below-title"
+      },
+      palette,
+      isDark,
+      width: svgWidth,
+      activeGroup: activeTagGroup ?? null,
+      controlsExpanded: false,
+      callbacks: legendCallbacks
+    });
+  }
+}
+function buildNoteMessageMap(elements) {
+  const map = /* @__PURE__ */ new Map();
+  let lastMessageLine = -1;
+  const walk = (els) => {
+    for (const el of els) {
+      if (isSequenceNote(el)) {
+        if (lastMessageLine >= 0) {
+          map.set(el.lineNumber, lastMessageLine);
+        }
+      } else if (isSequenceBlock(el)) {
+        walk(el.children);
+        if (el.elseIfBranches) {
+          for (const branch of el.elseIfBranches) {
+            walk(branch.children);
           }
         }
-      };
-      return LZString2;
-    })();
-    if (typeof define === "function" && define.amd) {
-      define(function() {
-        return LZString;
-      });
-    } else if (typeof module !== "undefined" && module != null) {
-      module.exports = LZString;
-    } else if (typeof angular !== "undefined" && angular != null) {
-      angular.module("LZString", []).factory("LZString", function() {
-        return LZString;
-      });
+        walk(el.elseChildren);
+      } else if (!isSequenceSection(el)) {
+        lastMessageLine = el.lineNumber;
+      }
     }
+  };
+  walk(elements);
+  return map;
+}
+function renderParticipant(svg, participant, cx, cy, palette, isDark, color, tagAttr, fillMode, boxW = W3, boxH = H, labelTextW = labelTextWidth(W3), labelFontSize2 = LABEL_FONT_SIZE5) {
+  const g = svg.append("g").attr("transform", `translate(${cx}, ${cy})`).attr("class", "participant").attr("data-participant-id", participant.id);
+  if (tagAttr) {
+    g.attr(`data-tag-${tagAttr.key}`, tagAttr.value);
+  }
+  switch (participant.type) {
+    case "actor":
+      renderActorParticipant(g, palette, color, boxH);
+      break;
+    case "database":
+      renderDatabaseParticipant(
+        g,
+        palette,
+        isDark,
+        color,
+        fillMode,
+        boxW,
+        boxH
+      );
+      break;
+    case "queue":
+      renderQueueParticipant(g, palette, isDark, color, fillMode, boxW, boxH);
+      break;
+    case "cache":
+      renderCacheParticipant(g, palette, isDark, color, fillMode, boxW, boxH);
+      break;
+    default:
+      renderRectParticipant(g, palette, isDark, color, fillMode, boxW, boxH);
+      break;
+  }
+  const isActor = participant.type === "actor";
+  const labelLines = splitParticipantLabel(
+    participant.label,
+    labelTextW,
+    labelFontSize2
+  );
+  const fontSize = labelFontSize2;
+  const lineHeight = fontSize + 2;
+  const labelFill = isActor ? palette.text : contrastText(
+    fill(palette, isDark, color, fillMode),
+    palette.textOnFillLight,
+    palette.textOnFillDark
+  );
+  const textEl = g.append("text").attr("x", 0).attr("text-anchor", "middle").attr("fill", labelFill).attr("font-size", fontSize).attr("font-weight", 500);
+  const maxLabelW = labelTextWidth(boxW);
+  const truncLine = (text) => truncateText(text, fontSize, maxLabelW);
+  if (labelLines.length === 1) {
+    textEl.attr("y", isActor ? boxH + 14 : boxH / 2 + 5).text(truncLine(participant.label));
+  } else {
+    const totalHeight = labelLines.length * lineHeight;
+    const baseY = isActor ? boxH + 14 - (labelLines.length - 1) * lineHeight / 2 : boxH / 2 + 5 - (totalHeight - lineHeight) / 2;
+    labelLines.forEach((line11, i) => {
+      textEl.append("tspan").attr("x", 0).attr("dy", i === 0 ? `${baseY}px` : `${lineHeight}px`).text(truncLine(line11));
+    });
+  }
+}
+var PARTICIPANT_GAP, PARTICIPANT_BOX_WIDTH, PARTICIPANT_BOX_HEIGHT, LABEL_FONT_SIZE5, TOP_MARGIN, TITLE_HEIGHT8, PARTICIPANT_Y_OFFSET, MESSAGE_START_OFFSET, LIFELINE_TAIL, ARROWHEAD_SIZE, NOTE_MAX_W2, NOTE_FOLD2, NOTE_PAD_H2, NOTE_PAD_V2, NOTE_FONT_SIZE3, NOTE_LINE_H2, NOTE_GAP2, ACTIVATION_WIDTH, SELF_CALL_HEIGHT, SELF_CALL_WIDTH, ACTOR_LABEL_CLEARANCE, labelTextWidth, fill, stroke, SW, W3, H;
+var init_renderer34 = __esm({
+  "src/sequence/renderer.ts"() {
+    "use strict";
+    init_tag_groups();
+    init_parsing();
+    init_color_utils();
+    init_inline_markdown();
+    init_fonts();
+    init_parser7();
+    init_collapse5();
+    init_wrapped_desc();
+    init_text_measure();
+    init_tag_resolution();
+    init_tag_groups();
+    init_legend_layout();
+    init_parsing();
+    init_inline_header();
+    init_legend_integration();
+    init_title_constants();
+    init_scaling();
+    PARTICIPANT_GAP = 160;
+    PARTICIPANT_BOX_WIDTH = 120;
+    PARTICIPANT_BOX_HEIGHT = 50;
+    LABEL_FONT_SIZE5 = 13;
+    TOP_MARGIN = 20;
+    TITLE_HEIGHT8 = 30;
+    PARTICIPANT_Y_OFFSET = 10;
+    MESSAGE_START_OFFSET = 50;
+    LIFELINE_TAIL = 30;
+    ARROWHEAD_SIZE = 8;
+    NOTE_MAX_W2 = 200;
+    NOTE_FOLD2 = 10;
+    NOTE_PAD_H2 = 8;
+    NOTE_PAD_V2 = 6;
+    NOTE_FONT_SIZE3 = 10;
+    NOTE_LINE_H2 = 14;
+    NOTE_GAP2 = 15;
+    ACTIVATION_WIDTH = 10;
+    SELF_CALL_HEIGHT = 25;
+    SELF_CALL_WIDTH = 30;
+    ACTOR_LABEL_CLEARANCE = 22;
+    labelTextWidth = (boxW) => boxW - 10;
+    fill = (palette, isDark, color, fillMode) => color ? shapeFill(palette, color, isDark, { mode: fillMode }) : isDark ? mix(palette.overlay, palette.surface, 50) : mix(palette.bg, palette.surface, 50);
+    stroke = (palette, color) => color || palette.border;
+    SW = 1.5;
+    W3 = PARTICIPANT_BOX_WIDTH;
+    H = PARTICIPANT_BOX_HEIGHT;
   }
 });
 
@@ -84085,6 +84466,7 @@ var DIAGRAM_EXPORT_HANDLERS = {
   bracket: exportBracket,
   raci: exportRaci,
   body: exportBody,
+  "live-link": exportLiveLink,
   // D3 visualizations — own handler per type (Story 109.2). Only `sequence`
   // still falls through to exportVisualization (no chart-type of its own).
   slope: exportSlope,
@@ -84131,7 +84513,9 @@ async function renderForExport(content, theme, palette, viewState, options) {
     viewState,
     options,
     exportMode,
-    isDark: theme === "dark"
+    isDark: theme === "dark",
+    width: options?.width && options.width > 0 ? Math.round(options.width) : EXPORT_WIDTH,
+    height: options?.height && options.height > 0 ? Math.round(options.height) : EXPORT_HEIGHT
   };
   const handler = detectedType !== null ? DIAGRAM_EXPORT_HANDLERS[detectedType] : void 0;
   return (handler ?? exportVisualization)(ctx);
@@ -84146,13 +84530,13 @@ async function exportEventLine(ctx) {
   const effectivePalette = await resolveExportPalette(theme, palette);
   const parsed = parseEventLine2(content, effectivePalette);
   if (parsed.error || parsed.events.length === 0) return "";
-  const container = createExportContainer(EXPORT_WIDTH, EXPORT_HEIGHT);
+  const container = createExportContainer(ctx.width, ctx.height);
   renderEventLineForExport2(
     container,
     parsed,
     effectivePalette,
     ctx.isDark,
-    { width: EXPORT_WIDTH, height: EXPORT_HEIGHT },
+    { width: ctx.width, height: ctx.height },
     ctxTagOverride(ctx),
     /* @__PURE__ */ new Date()
   );
@@ -84165,13 +84549,13 @@ async function exportBody(ctx) {
   const effectivePalette = await resolveExportPalette(theme, palette);
   const parsed = parseBody2(content, effectivePalette);
   if (parsed.error) return "";
-  const container = createExportContainer(EXPORT_WIDTH, EXPORT_HEIGHT);
+  const container = createExportContainer(ctx.width, ctx.height);
   renderBodyForExport2(
     container,
     parsed,
     effectivePalette,
     ctx.isDark,
-    { width: EXPORT_WIDTH, height: EXPORT_HEIGHT },
+    { width: ctx.width, height: ctx.height },
     ctxTagOverride(ctx)
   );
   return finalizeSvgExport(container, theme, effectivePalette);
@@ -84183,15 +84567,15 @@ async function exportVersionControl(ctx) {
   const effectivePalette = await resolveExportPalette(theme, palette);
   const parsed = parseVersionControl2(content, effectivePalette);
   if (parsed.error || parsed.nodes.length === 0) return "";
-  const container = createExportContainer(EXPORT_WIDTH, EXPORT_HEIGHT);
+  const container = createExportContainer(ctx.width, ctx.height);
   renderVersionControlForExport2(
     container,
     parsed,
     effectivePalette,
     ctx.isDark,
     {
-      width: EXPORT_WIDTH,
-      height: EXPORT_HEIGHT
+      width: ctx.width,
+      height: ctx.height
     }
   );
   return finalizeSvgExport(container, theme, effectivePalette);
@@ -84662,7 +85046,7 @@ async function exportFlowchart(ctx) {
   const fcParsed = parseFlowchart2(content, effectivePalette);
   if (fcParsed.error || fcParsed.nodes.length === 0) return "";
   const layout = layoutGraph2(fcParsed);
-  const container = createExportContainer(EXPORT_WIDTH, EXPORT_HEIGHT);
+  const container = createExportContainer(ctx.width, ctx.height);
   renderFlowchart2(
     container,
     fcParsed,
@@ -84670,7 +85054,7 @@ async function exportFlowchart(ctx) {
     effectivePalette,
     ctx.isDark,
     void 0,
-    { width: EXPORT_WIDTH, height: EXPORT_HEIGHT }
+    { width: ctx.width, height: ctx.height }
   );
   return finalizeSvgExport(container, theme, effectivePalette);
 }
@@ -84835,7 +85219,7 @@ async function exportState(ctx) {
     collapsedChildCounts,
     originalGroups
   });
-  const container = createExportContainer(EXPORT_WIDTH, EXPORT_HEIGHT);
+  const container = createExportContainer(ctx.width, ctx.height);
   renderState2(
     container,
     effectiveParsed,
@@ -84843,7 +85227,7 @@ async function exportState(ctx) {
     effectivePalette,
     ctx.isDark,
     void 0,
-    { width: EXPORT_WIDTH, height: EXPORT_HEIGHT }
+    { width: ctx.width, height: ctx.height }
   );
   return finalizeSvgExport(container, theme, effectivePalette);
 }
@@ -84897,13 +85281,13 @@ async function exportCycle(ctx) {
   const effectivePalette = await resolveExportPalette(theme, palette);
   const cycleParsed = parseCycle2(content);
   if (cycleParsed.error || cycleParsed.nodes.length === 0) return "";
-  const container = createExportContainer(EXPORT_WIDTH, EXPORT_HEIGHT);
+  const container = createExportContainer(ctx.width, ctx.height);
   renderCycleForExport2(
     container,
     cycleParsed,
     effectivePalette,
     ctx.isDark,
-    { width: EXPORT_WIDTH, height: EXPORT_HEIGHT },
+    { width: ctx.width, height: ctx.height },
     viewState,
     exportMode
   );
@@ -84931,7 +85315,7 @@ async function exportMap(ctx) {
   const dims = mapExportDimensions2(
     mapResolved,
     mapData,
-    EXPORT_WIDTH,
+    ctx.width,
     options?.mapAspect
   );
   const container = createExportContainer(dims.width, dims.height);
@@ -84952,13 +85336,13 @@ async function exportPyramid(ctx) {
   const effectivePalette = await resolveExportPalette(theme, palette);
   const pyramidParsed = parsePyramid2(content);
   if (pyramidParsed.error || pyramidParsed.layers.length === 0) return "";
-  const container = createExportContainer(EXPORT_WIDTH, EXPORT_HEIGHT);
+  const container = createExportContainer(ctx.width, ctx.height);
   renderPyramidForExport2(
     container,
     pyramidParsed,
     effectivePalette,
     ctx.isDark,
-    { width: EXPORT_WIDTH, height: EXPORT_HEIGHT }
+    { width: ctx.width, height: ctx.height }
   );
   return finalizeSvgExport(container, theme, effectivePalette);
 }
@@ -84969,10 +85353,10 @@ async function exportRing(ctx) {
   const effectivePalette = await resolveExportPalette(theme, palette);
   const ringParsed = parseRing2(content);
   if (ringParsed.error || ringParsed.layers.length === 0) return "";
-  const container = createExportContainer(EXPORT_WIDTH, EXPORT_HEIGHT);
+  const container = createExportContainer(ctx.width, ctx.height);
   renderRingForExport2(container, ringParsed, effectivePalette, ctx.isDark, {
-    width: EXPORT_WIDTH,
-    height: EXPORT_HEIGHT
+    width: ctx.width,
+    height: ctx.height
   });
   return finalizeSvgExport(container, theme, effectivePalette);
 }
@@ -84982,8 +85366,8 @@ async function exportTreemap(ctx) {
   const effectivePalette = await resolveExportPalette(theme, palette);
   const treemapParsed = parseTreemap2(content, effectivePalette);
   if (treemapParsed.error || treemapParsed.roots.length === 0) return "";
-  const container = createExportContainer(EXPORT_WIDTH, EXPORT_HEIGHT);
-  const dims = { width: EXPORT_WIDTH, height: EXPORT_HEIGHT };
+  const container = createExportContainer(ctx.width, ctx.height);
+  const dims = { width: ctx.width, height: ctx.height };
   if (treemapParsed.options.radial) {
     const { renderTreemapRadialForExport: renderTreemapRadialForExport2 } = await Promise.resolve().then(() => (init_renderer_radial(), renderer_radial_exports));
     renderTreemapRadialForExport2(
@@ -85005,66 +85389,73 @@ async function exportTreemap(ctx) {
   }
   return finalizeSvgExport(container, theme, effectivePalette);
 }
+async function exportLiveLink(ctx) {
+  const { content, theme, palette } = ctx;
+  const { parseLiveLink: parseLiveLink2 } = await Promise.resolve().then(() => (init_parser39(), parser_exports33));
+  const { renderLiveLinkCard: renderLiveLinkCard2 } = await Promise.resolve().then(() => (init_renderer27(), renderer_exports26));
+  const effectivePalette = await resolveExportPalette(theme, palette);
+  return renderLiveLinkCard2(parseLiveLink2(content), effectivePalette, theme);
+}
 async function exportBlock(ctx) {
   const { content, theme, palette } = ctx;
   const { parseBlock: parseBlock2 } = await Promise.resolve().then(() => (init_parser32(), parser_exports26));
-  const { renderBlockForExport: renderBlockForExport2 } = await Promise.resolve().then(() => (init_renderer27(), renderer_exports26));
+  const { renderBlockForExport: renderBlockForExport2 } = await Promise.resolve().then(() => (init_renderer28(), renderer_exports27));
   const effectivePalette = await resolveExportPalette(theme, palette);
   const blockParsed = parseBlock2(content, effectivePalette);
   if (blockParsed.error || blockParsed.top.rows.length === 0) return "";
-  const container = createExportContainer(EXPORT_WIDTH, EXPORT_HEIGHT);
+  const container = createExportContainer(ctx.width, ctx.height);
   renderBlockForExport2(container, blockParsed, effectivePalette, ctx.isDark, {
-    width: EXPORT_WIDTH,
-    height: EXPORT_HEIGHT
+    width: ctx.width,
+    height: ctx.height
   });
   return finalizeSvgExport(container, theme, effectivePalette);
 }
 async function exportGoal(ctx) {
   const { content, theme, palette } = ctx;
   const { parseGoal: parseGoal2 } = await Promise.resolve().then(() => (init_parser33(), parser_exports27));
-  const { renderGoalForExport: renderGoalForExport2 } = await Promise.resolve().then(() => (init_renderer28(), renderer_exports27));
+  const { renderGoalForExport: renderGoalForExport2 } = await Promise.resolve().then(() => (init_renderer29(), renderer_exports28));
   const effectivePalette = await resolveExportPalette(theme, palette);
   const parsed = parseGoal2(content, effectivePalette);
   if (parsed.error) return "";
-  const container = createExportContainer(EXPORT_WIDTH, EXPORT_HEIGHT);
+  const container = createExportContainer(ctx.width, ctx.height);
   renderGoalForExport2(container, parsed, effectivePalette, ctx.isDark, {
-    width: EXPORT_WIDTH,
-    height: EXPORT_HEIGHT
+    width: ctx.width,
+    height: ctx.height
   });
   return finalizeSvgExport(container, theme, effectivePalette);
 }
 async function exportCountdown(ctx) {
   const { content, theme, palette } = ctx;
   const { parseCountdown: parseCountdown2 } = await Promise.resolve().then(() => (init_parser34(), parser_exports28));
-  const { renderCountdownForExport: renderCountdownForExport2 } = await Promise.resolve().then(() => (init_renderer29(), renderer_exports28));
+  const { renderCountdownForExport: renderCountdownForExport2 } = await Promise.resolve().then(() => (init_renderer30(), renderer_exports29));
   const effectivePalette = await resolveExportPalette(theme, palette);
   const parsed = parseCountdown2(content, effectivePalette);
   if (parsed.error) return "";
-  const container = createExportContainer(EXPORT_WIDTH, EXPORT_HEIGHT);
+  const container = createExportContainer(ctx.width, ctx.height);
   renderCountdownForExport2(container, parsed, effectivePalette, ctx.isDark, {
-    width: EXPORT_WIDTH,
-    height: EXPORT_HEIGHT
+    width: ctx.width,
+    height: ctx.height
   });
   return finalizeSvgExport(container, theme, effectivePalette);
 }
 async function exportClock(ctx) {
   const { content, theme, palette } = ctx;
   const { parseClock: parseClock2 } = await Promise.resolve().then(() => (init_parser35(), parser_exports29));
-  const { renderClockForExport: renderClockForExport2 } = await Promise.resolve().then(() => (init_renderer30(), renderer_exports29));
+  const { renderClockForExport: renderClockForExport2 } = await Promise.resolve().then(() => (init_renderer31(), renderer_exports30));
   const effectivePalette = await resolveExportPalette(theme, palette);
   const parsed = parseClock2(content, effectivePalette);
   if (parsed.error) return "";
-  const container = createExportContainer(EXPORT_WIDTH, EXPORT_HEIGHT);
+  const container = createExportContainer(ctx.width, ctx.height);
   renderClockForExport2(container, parsed, effectivePalette, ctx.isDark, {
-    width: EXPORT_WIDTH,
-    height: EXPORT_HEIGHT
+    width: ctx.width,
+    height: ctx.height
   });
   return finalizeSvgExport(container, theme, effectivePalette);
 }
 async function exportBracket(ctx) {
   const { content, theme, palette } = ctx;
   const { parseBracket: parseBracket2 } = await Promise.resolve().then(() => (init_parser36(), parser_exports30));
-  const { renderBracketForExport: renderBracketForExport2, bracketExportDimensions: bracketExportDimensions2 } = await Promise.resolve().then(() => (init_renderer31(), renderer_exports30));
+  const { renderBracketForExport: renderBracketForExport2, bracketExportDimensions: bracketExportDimensions2 } = await Promise.resolve().then(() => (init_renderer32(), renderer_exports31));
   const effectivePalette = await resolveExportPalette(theme, palette);
   const parsed = parseBracket2(content, effectivePalette);
   if (parsed.error) return "";
@@ -85079,22 +85470,22 @@ async function exportBracket(ctx) {
 async function exportRaci(ctx) {
   const { content, theme, palette } = ctx;
   const { parseRaci: parseRaci2 } = await Promise.resolve().then(() => (init_parser37(), parser_exports31));
-  const { renderRaciForExport: renderRaciForExport2 } = await Promise.resolve().then(() => (init_renderer32(), renderer_exports31));
+  const { renderRaciForExport: renderRaciForExport2 } = await Promise.resolve().then(() => (init_renderer33(), renderer_exports32));
   const effectivePalette = await resolveExportPalette(theme, palette);
   const raciParsed = parseRaci2(content, effectivePalette);
   if (raciParsed.error) return "";
-  const container = createExportContainer(EXPORT_WIDTH, EXPORT_HEIGHT);
+  const container = createExportContainer(ctx.width, ctx.height);
   renderRaciForExport2(container, raciParsed, effectivePalette, ctx.isDark, {
-    width: EXPORT_WIDTH,
-    height: EXPORT_HEIGHT
+    width: ctx.width,
+    height: ctx.height
   });
   return finalizeSvgExport(container, theme, effectivePalette);
 }
-function beginVizExport() {
-  const container = createExportContainer(EXPORT_WIDTH, EXPORT_HEIGHT);
+function beginVizExport(ctx) {
+  const container = createExportContainer(ctx.width, ctx.height);
   const dims = {
-    width: EXPORT_WIDTH,
-    height: EXPORT_HEIGHT
+    width: ctx.width,
+    height: ctx.height
   };
   return { container, dims };
 }
@@ -85103,7 +85494,7 @@ async function exportSlope(ctx) {
   const parsed = parseSlope(content, palette);
   if (parsed.error || parsed.data.length === 0) return "";
   const effectivePalette = await resolveExportPalette(theme, palette);
-  const { container, dims } = beginVizExport();
+  const { container, dims } = beginVizExport(ctx);
   renderSlopeChart(
     container,
     parsed,
@@ -85119,7 +85510,7 @@ async function exportArc(ctx) {
   const parsed = parseArc(content, palette);
   if (parsed.error || parsed.links.length === 0) return "";
   const effectivePalette = await resolveExportPalette(theme, palette);
-  const { container, dims } = beginVizExport();
+  const { container, dims } = beginVizExport(ctx);
   renderArcDiagram(
     container,
     parsed,
@@ -85135,7 +85526,7 @@ async function exportTimeline(ctx) {
   const parsed = parseTimeline(content, palette);
   if (parsed.error || parsed.timelineEvents.length === 0) return "";
   const effectivePalette = await resolveExportPalette(theme, palette);
-  const { container, dims } = beginVizExport();
+  const { container, dims } = beginVizExport(ctx);
   renderTimeline(
     container,
     parsed,
@@ -85162,7 +85553,7 @@ async function exportWordcloud(ctx) {
   const parsed = parseWordcloud(content, palette);
   if (parsed.error || parsed.words.length === 0) return "";
   const effectivePalette = await resolveExportPalette(theme, palette);
-  const { container, dims } = beginVizExport();
+  const { container, dims } = beginVizExport(ctx);
   await renderWordCloudAsync(
     container,
     parsed,
@@ -85177,7 +85568,7 @@ async function exportVenn(ctx) {
   const parsed = parseVenn(content, palette);
   if (parsed.error || parsed.vennSets.length < 2) return "";
   const effectivePalette = await resolveExportPalette(theme, palette);
-  const { container, dims } = beginVizExport();
+  const { container, dims } = beginVizExport(ctx);
   renderVenn(container, parsed, effectivePalette, ctx.isDark, void 0, dims);
   return finalizeSvgExport(container, theme, effectivePalette);
 }
@@ -85186,7 +85577,7 @@ async function exportQuadrant(ctx) {
   const parsed = parseQuadrant(content, palette);
   if (parsed.error || parsed.quadrantPoints.length === 0) return "";
   const effectivePalette = await resolveExportPalette(theme, palette);
-  const { container, dims } = beginVizExport();
+  const { container, dims } = beginVizExport(ctx);
   renderQuadrant(
     container,
     parsed,
@@ -85210,9 +85601,9 @@ async function exportVisualization(ctx) {
   }
   const effectivePalette = await resolveExportPalette(theme, palette);
   const isDark = ctx.isDark;
-  const container = createExportContainer(EXPORT_WIDTH, EXPORT_HEIGHT);
+  const container = createExportContainer(ctx.width, ctx.height);
   const { parseSequenceDgmo: parseSequenceDgmo2 } = await Promise.resolve().then(() => (init_parser7(), parser_exports));
-  const { renderSequenceDiagram: renderSequenceDiagram2 } = await Promise.resolve().then(() => (init_renderer33(), renderer_exports32));
+  const { renderSequenceDiagram: renderSequenceDiagram2 } = await Promise.resolve().then(() => (init_renderer34(), renderer_exports33));
   const seqParsed = parseSequenceDgmo2(content, effectivePalette);
   if (seqParsed.error || seqParsed.participants.length === 0) return "";
   const collapsedSections = viewState?.cs ? new Set(viewState.cs) : void 0;
@@ -85225,7 +85616,7 @@ async function exportVisualization(ctx) {
     isDark,
     void 0,
     {
-      exportWidth: EXPORT_WIDTH,
+      exportWidth: ctx.width,
       ...seqActiveTagGroup !== void 0 && {
         activeTagGroup: seqActiveTagGroup
       },
@@ -85821,9 +86212,16 @@ async function render(content, options) {
   if (category === "data-chart") {
     await acquireDom();
     try {
-      const raw = await renderDataChartD3(renderContent, theme, paletteColors);
+      const raw = await renderDataChartD3(renderContent, theme, paletteColors, {
+        ...options?.width !== void 0 && { width: options.width },
+        ...options?.height !== void 0 && { height: options.height }
+      });
       const svg2 = injectHoverStyles(raw, chartType, { bakeHover });
-      return { svg: svg2, diagnostics: withLegendInlineWarning(diagnostics), chartType: chartType ?? void 0 };
+      return {
+        svg: svg2,
+        diagnostics: withLegendInlineWarning(diagnostics),
+        chartType: chartType ?? void 0
+      };
     } finally {
       releaseDom();
     }
@@ -85845,6 +86243,8 @@ async function render(content, options) {
         },
         ...options?.tagGroup !== void 0 && { tagGroup: options.tagGroup },
         ...options?.mapData !== void 0 && { mapData: options.mapData },
+        ...options?.width !== void 0 && { width: options.width },
+        ...options?.height !== void 0 && { height: options.height },
         onMapResolverDiagnostics: (d) => {
           mapDiag.current = d;
         }
@@ -85857,7 +86257,11 @@ async function render(content, options) {
   if (chartType === "map" && mapDiag.current) {
     diagnostics = [...mapDiag.current];
   }
-  return { svg, diagnostics: withLegendInlineWarning(diagnostics), chartType: chartType ?? void 0 };
+  return {
+    svg,
+    diagnostics: withLegendInlineWarning(diagnostics),
+    chartType: chartType ?? void 0
+  };
 }
 
 // src/countdown/ticker.ts
@@ -86202,46 +86606,11 @@ function startClocks(root = document) {
 init_registry();
 init_palettes();
 
-// src/sharing.ts
-var import_lz_string = __toESM(require_lz_string(), 1);
-var DEFAULT_BASE_URL = "https://online.diagrammo.app";
-var COMPRESSED_SIZE_LIMIT = 8192;
-function encodeViewState(state) {
-  const keys = Object.keys(state);
-  if (keys.length === 0) return "";
-  return (0, import_lz_string.compressToEncodedURIComponent)(JSON.stringify(state));
-}
-function encodeDiagramUrl(dsl, options) {
-  const baseUrl = options?.baseUrl ?? DEFAULT_BASE_URL;
-  const compressed = (0, import_lz_string.compressToEncodedURIComponent)(dsl);
-  const byteSize = new TextEncoder().encode(compressed).byteLength;
-  if (byteSize > COMPRESSED_SIZE_LIMIT) {
-    return {
-      error: "too-large",
-      compressedSize: byteSize,
-      limit: COMPRESSED_SIZE_LIMIT
-    };
-  }
-  let hash = `dgmo=${compressed}`;
-  if (options?.viewState) {
-    const vsEncoded = encodeViewState(options.viewState);
-    if (vsEncoded) {
-      hash += `&vs=${vsEncoded}`;
-    }
-  }
-  if (options?.palette && options.palette !== "nord") {
-    hash += `&pal=${encodeURIComponent(options.palette)}`;
-  }
-  if (options?.theme && options.theme !== "dark") {
-    hash += `&th=${encodeURIComponent(options.theme)}`;
-  }
-  if (options?.filename) {
-    hash += `&fn=${encodeURIComponent(options.filename)}`;
-  }
-  return { url: `${baseUrl}?${hash}#${hash}` };
-}
+// src/auto/shared.ts
+init_sharing();
 
 // src/embed/index.ts
+init_sharing();
 init_palettes();
 
 // src/editor/dgmo.grammar.js
@@ -86309,7 +86678,9 @@ var CHART_TYPES = /* @__PURE__ */ new Set([
   "venn",
   "quadrant",
   "map",
-  "body"
+  "body",
+  // Pointer type — internal, but it must still highlight when one is open
+  "live-link"
 ]);
 var TAG_KEYWORD = "tag";
 var DIRECTIVE_KEYWORDS = /* @__PURE__ */ new Set([...REGISTRY_DIRECTIVE_TOKENS]);
@@ -86761,19 +87132,8 @@ function markTokensInRange(tokens, from, to, role) {
   }
 }
 
-// src/error-card.ts
-init_dgmo_router();
-var DOCS_BASE = "https://diagrammo.app/docs";
-function docsLink(source) {
-  const chartType = parseDgmoChartType(source);
-  return chartType ? {
-    url: `${DOCS_BASE}/chart-${chartType}/`,
-    label: `Read the ${chartType} guide \u2197`
-  } : { url: `${DOCS_BASE}/`, label: "Browse the DGMO docs \u2197" };
-}
-var W2 = 660;
-var PAD2 = 24;
-var CONTENT_W = W2 - PAD2 * 2;
+// src/embed/index.ts
+init_error_card();
 
 // src/embed/escape.ts
 var HTML_ENTITIES = {
@@ -87180,8 +87540,8 @@ var BLOCK_CSS = `
   font-style: italic;
 }
 
-/* === Cloud references ===
- * A withdrawn reference's placeholder, and the "this moved" affordance a host's
+/* === Live links ===
+ * A withdrawn pointer's placeholder, and the "this moved" affordance a host's
  * client script falls back to when it can see a diagram has changed but cannot
  * safely swap it in. Both are deliberately quiet: a page peppered with badges
  * is worse than one that is a few days behind. */
@@ -87203,6 +87563,42 @@ var BLOCK_CSS = `
   opacity: 0.7;
   text-align: right;
 }
+/* The card a docs site shows when live links are switched OFF, plus its
+ * hover-revealed way to turn them on. Hover-only on purpose: a READER never
+ * meets it, and anyone mousing over a diagram-shaped thing on their own docs
+ * site is almost certainly its author \u2014 which makes this the fix for a build
+ * warning nobody reads. The markup is the WRAPPER's (only it knows the feature
+ * is off); the styling is here because there is one stylesheet. */
+.dgmo-live-link-off {
+  position: relative;
+}
+.dgmo-live-link-view {
+  display: block;
+  text-decoration: none;
+}
+/* pointer-events: none alongside the fade, or an invisible link sits over the
+ * card's bottom-right corner and navigates a reader who clicks near it. Focus
+ * still reveals it (:focus-within on the wrapper), so a keyboard user is not
+ * shut out of something a mouse user can reach. */
+.dgmo-live-link-enable {
+  bottom: 0.5rem;
+  font-size: 0.8em;
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  right: 0.5rem;
+  transition: opacity 0.15s ease-in-out;
+}
+.dgmo-live-link-off:hover .dgmo-live-link-enable,
+.dgmo-live-link-off:focus-within .dgmo-live-link-enable {
+  opacity: 1;
+  pointer-events: auto;
+}
+@media (prefers-reduced-motion: reduce) {
+  .dgmo-live-link-enable {
+    transition: none;
+  }
+}
 `;
 
 // src/embed/index.ts
@@ -87327,7 +87723,7 @@ var CSS = AUTO_BASE_CSS + "\n" + BLOCK_CSS + "\n" + darkScopedBlockCss(BLOCK_CSS
 
 // src/auto/shared.ts
 init_safe_href();
-var VERSION = "0.57.0";
+var VERSION = "0.58.0";
 var ARIA_LABEL_MAX = 200;
 var COPIED_INTERACTION_MS = 1500;
 var LOG_PREFIX = "[dgmo]";