@diagrammo/dgmo 0.95.0 → 0.97.0

package/dist/{chunk-4XYZJTFO.js → chunk-NQFZ7LXC.js}

@@ -4,12 +4,12 @@ import {
   META_FONT_SIZE,
   META_LINE_HEIGHT,
   SEPARATOR_GAP
-} from "./chunk-XCKNFFKM.js";
+} from "./chunk-WH6E6SHC.js";
 import {
   injectDefaultTagMetadata,
   resolveTagColor,
   tagAttrKey
-} from "./chunk-4SACN2C5.js";
+} from "./chunk-KW3CC7SB.js";
 import {
   LEGEND_CAPSULE_PAD,
   LEGEND_DOT_R,
@@ -23,14 +23,17 @@ import {
   LEGEND_PILL_FONT_SIZE,
   LEGEND_PILL_PAD,
   measureLegendText
-} from "./chunk-UOCWYLYT.js";
+} from "./chunk-OZXKW5NA.js";
 import {
   measureText
-} from "./chunk-KAO7JL4I.js";
+} from "./chunk-PU5X3P3T.js";
 
 // src/sitemap/layout.ts
 import dagre from "@dagrejs/dagre";
 var CONTAINER_LABEL_FONT_SIZE = 13;
+function layoutInPlace(g) {
+  dagre.layout(g);
+}
 function clipToRectBorder(cx, cy, w, h, tx, ty) {
   const dx = tx - cx;
   const dy = ty - cy;
@@ -205,7 +208,12 @@ function layoutSitemap(parsed, hiddenCounts, activeTagGroup, hiddenAttributes, e
   for (const flat of flatNodes) {
     nodeMap.set(flat.sitemapNode.id, flat);
   }
-  const g = new dagre.graphlib.Graph({ compound: true, multigraph: true });
+  const g = new dagre.graphlib.Graph(
+    {
+      compound: true,
+      multigraph: true
+    }
+  );
   g.setGraph({
     rankdir: parsed.direction,
     nodesep: 50,
@@ -294,7 +302,7 @@ function layoutSitemap(parsed, hiddenCounts, activeTagGroup, hiddenAttributes, e
       `e${i}`
     );
   }
-  dagre.layout(g);
+  layoutInPlace(g);
   const layoutNodes = [];
   const layoutContainers = [];
   for (const flat of flatNodes) {

package/dist/chunk-NTDWVTEY.js

@@ -0,0 +1,12 @@
+// src/journey-map/collapse.ts
+function collapsedJourneyPhasesFromSource(parsed, interactive) {
+  const names = new Set(interactive ?? []);
+  for (const phase of parsed.phases) {
+    if (phase.collapsed) names.add(phase.name);
+  }
+  return names;
+}
+
+export {
+  collapsedJourneyPhasesFromSource
+};

package/dist/{chunk-BQO24BDM.js → chunk-O3HRF25Z.js}

@@ -7,7 +7,7 @@ import {
   splitNameAndMeta,
   warnUnknownMetaKeys,
   withTagAliases
-} from "./chunk-TIIZIAGS.js";
+} from "./chunk-RFGQDIOI.js";
 import {
   makeDgmoError
 } from "./chunk-BYU54C3S.js";

package/dist/{chunk-ZD3QCNB7.js → chunk-OSSA5UWA.js}

@@ -2,10 +2,10 @@ import {
   getFigure,
   getPartGeom,
   resolvePartKey
-} from "./chunk-H7AXCRO7.js";
+} from "./chunk-453IWXZ3.js";
 import {
   renderIntegratedLegend
-} from "./chunk-NMS5XSLX.js";
+} from "./chunk-DFEVFLEG.js";
 import {
   FONT_FAMILY
 } from "./chunk-ICLB27PZ.js";
@@ -13,7 +13,7 @@ import {
   resolveActiveTagGroup,
   resolveTagColor,
   tagAttrKey
-} from "./chunk-4SACN2C5.js";
+} from "./chunk-KW3CC7SB.js";
 import {
   getSeriesColors,
   mix,

package/dist/{chunk-UOCWYLYT.js → chunk-OZXKW5NA.js}

@@ -1,7 +1,7 @@
 import {
   measureText,
   truncateText
-} from "./chunk-KAO7JL4I.js";
+} from "./chunk-PU5X3P3T.js";
 import {
   mix
 } from "./chunk-6GXLAKUH.js";

package/dist/{chunk-NPDVWFAQ.js → chunk-PLQZJZ2K.js}

@@ -8,7 +8,7 @@ import {
   splitNameAndMeta,
   tryParseSharedOption,
   warnUnknownMetaKeys
-} from "./chunk-TIIZIAGS.js";
+} from "./chunk-RFGQDIOI.js";
 import {
   makeDgmoError,
   makeFail

package/dist/chunk-PRG7NIUU.js

@@ -0,0 +1,272 @@
+import {
+  TITLE_FONT_SIZE,
+  TITLE_FONT_WEIGHT
+} from "./chunk-GULGSH2Z.js";
+import {
+  renderIntegratedLegend
+} from "./chunk-DFEVFLEG.js";
+import {
+  getMaxLegendReservedHeight
+} from "./chunk-VVL2KKG4.js";
+import {
+  FONT_FAMILY
+} from "./chunk-ICLB27PZ.js";
+import {
+  tagAttrKey
+} from "./chunk-KW3CC7SB.js";
+import {
+  legendSuppressed
+} from "./chunk-RFGQDIOI.js";
+import {
+  measureText,
+  wrapTextToWidth
+} from "./chunk-PU5X3P3T.js";
+import {
+  contrastText,
+  mix
+} from "./chunk-6GXLAKUH.js";
+
+// src/swot/renderer.ts
+import * as d3Selection from "d3-selection";
+var DIAGRAM_PADDING = 20;
+var TITLE_HEIGHT = 30;
+var LEGEND_GAP = 8;
+var PANEL_WIDTH = 300;
+var PANEL_GAP = 12;
+var PANEL_RADIUS = 8;
+var PANEL_PADDING = 12;
+var HEADER_HEIGHT = 34;
+var HEADER_FONT_SIZE = 13;
+var HEADER_LINE_HEIGHT = 16;
+var HEADER_COLOR_PCT = 38;
+var ITEM_FONT_SIZE = 13;
+var ITEM_LINE_HEIGHT = 18;
+var ITEM_GAP = 8;
+var DOT_RADIUS = 3.5;
+var DOT_GAP = 8;
+var DETAIL_FONT_SIZE = 11;
+var DETAIL_LINE_HEIGHT = 15;
+var AXIS_FONT_SIZE = 10.5;
+var AXIS_FONT_WEIGHT = 600;
+var AXIS_LETTER_SPACING = 1.2;
+var AXIS_HEADER_SIZE = 22;
+var AXIS_HEADER_GAP = 6;
+var AXIS_HEADER_RADIUS = 5;
+var AXIS_BAND = AXIS_HEADER_SIZE + AXIS_HEADER_GAP;
+var EMPTY_TEXT = "None listed";
+var ROW_TINT_PCT = 12;
+var TINT_INSET = 5;
+var TINT_PAD_Y = 3;
+var TINT_RADIUS = 4;
+var ITEM_TEXT_WIDTH = PANEL_WIDTH - 2 * PANEL_PADDING - 2 * DOT_RADIUS - DOT_GAP;
+function layoutItem(item) {
+  const wrapOpts = { hardBreak: true };
+  const titleLines = wrapTextToWidth(
+    item.title,
+    ITEM_FONT_SIZE,
+    ITEM_TEXT_WIDTH,
+    wrapOpts
+  );
+  const detailLines = item.details.flatMap(
+    (detail) => wrapTextToWidth(detail, DETAIL_FONT_SIZE, ITEM_TEXT_WIDTH, wrapOpts)
+  );
+  return {
+    item,
+    titleLines,
+    detailLines,
+    height: titleLines.length * ITEM_LINE_HEIGHT + detailLines.length * DETAIL_LINE_HEIGHT
+  };
+}
+function layoutPanel(section) {
+  const headerLines = wrapTextToWidth(
+    section.label,
+    HEADER_FONT_SIZE,
+    PANEL_WIDTH - 2 * PANEL_PADDING,
+    { bold: true, hardBreak: true }
+  );
+  const headerHeight = HEADER_HEIGHT + (headerLines.length - 1) * HEADER_LINE_HEIGHT;
+  const items = section.items.map(layoutItem);
+  const body = items.length === 0 ? ITEM_LINE_HEIGHT : items.reduce((sum, item) => sum + item.height, 0) + (items.length - 1) * ITEM_GAP;
+  return {
+    section,
+    headerLines,
+    headerHeight,
+    items,
+    height: headerHeight + 2 * PANEL_PADDING + body
+  };
+}
+function itemColor(item, section, parsed, activeTagGroup) {
+  if (!activeTagGroup) return section.color;
+  const key = tagAttrKey(activeTagGroup);
+  const value = item.tags[key];
+  if (!value) return section.color;
+  const group = parsed.tagGroups.find((g) => tagAttrKey(g.name) === key);
+  const entry = group?.entries.find(
+    (e) => e.value.toLowerCase() === value.toLowerCase()
+  );
+  return entry?.color ?? section.color;
+}
+function renderSwot(container, parsed, palette, isDark, options) {
+  const activeTagGroup = options?.activeTagGroup ?? null;
+  const showAxes = parsed.options["no-axes"] !== "on";
+  const tintItems = parsed.options["no-tint-items"] !== "on";
+  const showTitle = !!parsed.title && parsed.options["no-title"] !== "on";
+  const showLegend = parsed.tagGroups.length > 0 && !legendSuppressed(parsed.options);
+  const axisBand = showAxes ? AXIS_BAND : 0;
+  const gridWidth = 2 * PANEL_WIDTH + PANEL_GAP;
+  const titleWidth = showTitle ? measureText(parsed.title, TITLE_FONT_SIZE, { bold: true }) : 0;
+  const width = Math.ceil(
+    2 * DIAGRAM_PADDING + Math.max(axisBand + gridWidth, titleWidth)
+  );
+  const legendX = DIAGRAM_PADDING + (showTitle ? titleWidth + 16 : 0);
+  const legendWidth = Math.max(
+    gridWidth / 2,
+    width - legendX - DIAGRAM_PADDING
+  );
+  const legendConfig = {
+    groups: parsed.tagGroups,
+    position: { placement: "top-center", titleRelation: "inline-with-title" },
+    mode: options?.exportMode ? "export" : "preview",
+    // Every other group as a pill beside the active capsule, so a click can
+    // switch to it — as family and c4 do. Export still shows only the active
+    // group (legend-layout drops the rest before consulting this).
+    showInactivePills: true
+  };
+  const legendHeight = showLegend ? getMaxLegendReservedHeight(legendConfig, legendWidth) : 0;
+  const legendY = DIAGRAM_PADDING + (TITLE_FONT_SIZE - legendHeight) / 2;
+  const headerBottom = Math.max(
+    showTitle || showLegend ? DIAGRAM_PADDING + TITLE_HEIGHT : DIAGRAM_PADDING,
+    showLegend ? legendY + legendHeight + LEGEND_GAP : 0
+  );
+  const gridTop = headerBottom + axisBand;
+  const gridLeft = DIAGRAM_PADDING + axisBand;
+  const panels = parsed.sections.map(layoutPanel);
+  const topHeight = Math.max(panels[0].height, panels[1].height);
+  const bottomHeight = Math.max(panels[2].height, panels[3].height);
+  const height = Math.ceil(
+    gridTop + topHeight + PANEL_GAP + bottomHeight + DIAGRAM_PADDING
+  );
+  container.innerHTML = "";
+  const svg = d3Selection.select(container).append("svg").attr("xmlns", "http://www.w3.org/2000/svg").attr("width", width).attr("height", height).attr("viewBox", `0 0 ${width} ${height}`).attr("preserveAspectRatio", "xMidYMin meet").attr("font-family", FONT_FAMILY).style("background", palette.bg);
+  const containerWidth = container.getBoundingClientRect().width;
+  if (containerWidth > 0 && containerWidth < width) {
+    svg.attr("width", "100%").attr("height", null);
+  }
+  if (showTitle) {
+    svg.append("text").attr("class", "chart-title").attr("data-line-number", parsed.titleLineNumber ?? 0).attr("x", DIAGRAM_PADDING).attr("y", DIAGRAM_PADDING + TITLE_FONT_SIZE).attr("font-size", TITLE_FONT_SIZE).attr("font-weight", TITLE_FONT_WEIGHT).attr("fill", palette.text).text(parsed.title);
+  }
+  if (showLegend) {
+    const legendG = svg.append("g").attr("class", "swot-legend").attr("transform", `translate(${legendX},${legendY})`);
+    renderIntegratedLegend(legendG, {
+      ...legendConfig,
+      palette,
+      isDark,
+      width: legendWidth,
+      activeGroup: activeTagGroup
+    });
+  }
+  const columnX = [gridLeft, gridLeft + PANEL_WIDTH + PANEL_GAP];
+  const rowY = [gridTop, gridTop + topHeight + PANEL_GAP];
+  const rowHeight = [topHeight, bottomHeight];
+  const panelFill = isDark ? mix(palette.surface, palette.bg, 50) : mix(palette.surface, palette.bg, 30);
+  if (showAxes) {
+    const axes = svg.append("g").attr("class", "swot-axes");
+    const headerFill = mix(palette.textMuted, panelFill, 12);
+    const header = (x, y, w, h, label, rotate, key) => {
+      const cell = axes.append("g").attr("class", "swot-axis").attr("data-swot-axis", key);
+      cell.append("rect").attr("class", "swot-axis-header").attr("x", x).attr("y", y).attr("width", w).attr("height", h).attr("rx", AXIS_HEADER_RADIUS).attr("fill", headerFill);
+      const cx = x + w / 2;
+      const cy = y + h / 2;
+      const text = cell.append("text").attr("class", "swot-axis-label").attr("x", cx).attr("y", cy).attr("font-size", AXIS_FONT_SIZE).attr("font-weight", AXIS_FONT_WEIGHT).attr("letter-spacing", AXIS_LETTER_SPACING).attr("fill", palette.textMuted).attr("text-anchor", "middle").attr("dominant-baseline", "central").text(label.toUpperCase());
+      if (rotate) text.attr("transform", `rotate(-90 ${cx} ${cy})`);
+    };
+    for (const column of [0, 1]) {
+      header(
+        columnX[column],
+        gridTop - AXIS_BAND,
+        PANEL_WIDTH,
+        AXIS_HEADER_SIZE,
+        parsed.xLabels[column],
+        false,
+        `col-${column}`
+      );
+    }
+    for (const row of [0, 1]) {
+      header(
+        gridLeft - AXIS_BAND,
+        rowY[row],
+        AXIS_HEADER_SIZE,
+        rowHeight[row],
+        parsed.yLabels[row],
+        true,
+        `row-${row}`
+      );
+    }
+  }
+  panels.forEach((panel, index) => {
+    const section = panel.section;
+    const column = index % 2;
+    const row = index < 2 ? 0 : 1;
+    const x = columnX[column];
+    const y = rowY[row];
+    const g = svg.append("g").attr("class", "swot-panel").attr("data-section", section.key).attr("data-swot-col", column).attr("data-swot-row", row);
+    if (section.lineNumber > 0) {
+      g.attr("data-line-number", section.lineNumber);
+    }
+    g.append("rect").attr("x", x).attr("y", y).attr("width", PANEL_WIDTH).attr("height", rowHeight[row]).attr("rx", PANEL_RADIUS).attr("fill", panelFill);
+    const bandFill = mix(section.color, panelFill, HEADER_COLOR_PCT);
+    const r = PANEL_RADIUS;
+    const right = x + PANEL_WIDTH;
+    const bottom = y + panel.headerHeight;
+    g.append("path").attr("class", "swot-header").attr(
+      "d",
+      `M${x},${bottom}V${y + r}Q${x},${y} ${x + r},${y}H${right - r}Q${right},${y} ${right},${y + r}V${bottom}Z`
+    ).attr("fill", bandFill);
+    const labelColor = contrastText(
+      bandFill,
+      palette.textOnFillLight,
+      palette.textOnFillDark
+    );
+    panel.headerLines.forEach((line, lineIndex) => {
+      g.append("text").attr("x", x + PANEL_PADDING).attr("y", y + HEADER_HEIGHT / 2 + lineIndex * HEADER_LINE_HEIGHT).attr("dominant-baseline", "central").attr("font-size", HEADER_FONT_SIZE).attr("font-weight", "bold").attr("fill", labelColor).text(line);
+    });
+    const dotX = x + PANEL_PADDING + DOT_RADIUS;
+    const textX = dotX + DOT_RADIUS + DOT_GAP;
+    let cursorY = y + panel.headerHeight + PANEL_PADDING;
+    if (panel.items.length === 0) {
+      g.append("text").attr("class", "swot-empty").attr("x", x + PANEL_PADDING).attr("y", cursorY + ITEM_LINE_HEIGHT / 2).attr("dominant-baseline", "central").attr("font-size", ITEM_FONT_SIZE).attr("font-style", "italic").attr("fill", palette.textMuted).text(EMPTY_TEXT);
+      return;
+    }
+    for (const itemLayout of panel.items) {
+      const item = itemLayout.item;
+      const itemG = g.append("g").attr("class", "swot-item").attr("data-line-number", item.lineNumber);
+      if (activeTagGroup) {
+        const key = tagAttrKey(activeTagGroup);
+        const value = item.tags[key];
+        if (value) itemG.attr(`data-tag-${key}`, value.toLowerCase());
+      }
+      const fill = itemColor(item, section, parsed, activeTagGroup);
+      const tagged = !!activeTagGroup && !!item.tags[tagAttrKey(activeTagGroup)];
+      if (tagged && tintItems) {
+        itemG.append("rect").attr("class", "swot-item-tint").attr("x", x + TINT_INSET).attr("y", cursorY - TINT_PAD_Y).attr("width", PANEL_WIDTH - 2 * TINT_INSET).attr(
+          "height",
+          itemLayout.titleLines.length * ITEM_LINE_HEIGHT + itemLayout.detailLines.length * DETAIL_LINE_HEIGHT + 2 * TINT_PAD_Y
+        ).attr("rx", TINT_RADIUS).attr("fill", mix(fill, panelFill, ROW_TINT_PCT));
+      }
+      itemG.append("circle").attr("cx", dotX).attr("cy", cursorY + ITEM_LINE_HEIGHT / 2).attr("r", DOT_RADIUS).attr("fill", fill);
+      for (const line of itemLayout.titleLines) {
+        itemG.append("text").attr("x", textX).attr("y", cursorY + ITEM_LINE_HEIGHT / 2).attr("dominant-baseline", "central").attr("font-size", ITEM_FONT_SIZE).attr("fill", palette.text).text(line);
+        cursorY += ITEM_LINE_HEIGHT;
+      }
+      for (const line of itemLayout.detailLines) {
+        itemG.append("text").attr("class", "swot-detail").attr("x", textX).attr("y", cursorY + DETAIL_LINE_HEIGHT / 2).attr("dominant-baseline", "central").attr("font-size", DETAIL_FONT_SIZE).attr("fill", palette.textMuted).text(line);
+        cursorY += DETAIL_LINE_HEIGHT;
+      }
+      cursorY += ITEM_GAP;
+    }
+  });
+}
+
+export {
+  renderSwot
+};

package/dist/{chunk-S4SJ4LLY.js → chunk-PSNRB75I.js}

@@ -4,7 +4,7 @@ import {
 import {
   resolveNotes,
   tryCollectNote
-} from "./chunk-KLBTJEIK.js";
+} from "./chunk-4TK26YHH.js";
 import {
   displayName,
   normalizeName
@@ -18,7 +18,7 @@ import {
   tagAttrKey,
   validateTagGroupNames,
   validateTagValues
-} from "./chunk-4SACN2C5.js";
+} from "./chunk-KW3CC7SB.js";
 import {
   AliasRegistry,
   ER_REGISTRY,
@@ -32,7 +32,7 @@ import {
   tryParseSharedOption,
   warnUnknownMetaKeys,
   withTagAliases
-} from "./chunk-TIIZIAGS.js";
+} from "./chunk-RFGQDIOI.js";
 import {
   resolveColorWithDiagnostic
 } from "./chunk-3J7O3CU6.js";

package/dist/{chunk-QPQWY5RU.js → chunk-PT5VFY3B.js}

@@ -1,37 +1,40 @@
 import {
   isBlockNode
 } from "./chunk-XSVWUOUZ.js";
+import {
+  renderCollapseBar
+} from "./chunk-LRTSTDJ6.js";
 import {
   layoutInlineHeader
-} from "./chunk-UIEKW4SG.js";
+} from "./chunk-REKLKGR6.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT,
   TITLE_Y
-} from "./chunk-VLC6WNRD.js";
+} from "./chunk-GULGSH2Z.js";
 import {
   EDGE_DASH
-} from "./chunk-XCKNFFKM.js";
+} from "./chunk-WH6E6SHC.js";
 import {
   renderIntegratedLegend
-} from "./chunk-NMS5XSLX.js";
+} from "./chunk-DFEVFLEG.js";
 import {
   getLegendExtent,
   getMaxLegendReservedHeight
-} from "./chunk-JILEYZ2V.js";
+} from "./chunk-VVL2KKG4.js";
 import {
   FONT_FAMILY
 } from "./chunk-ICLB27PZ.js";
 import {
   resolveTagColor,
   tagAttrKey
-} from "./chunk-4SACN2C5.js";
+} from "./chunk-KW3CC7SB.js";
 import {
   LEGEND_GROUP_GAP
-} from "./chunk-UOCWYLYT.js";
+} from "./chunk-OZXKW5NA.js";
 import {
   measureText
-} from "./chunk-KAO7JL4I.js";
+} from "./chunk-PU5X3P3T.js";
 import {
   mix,
   themeBaseBg
@@ -46,7 +49,6 @@ var BLOCK_PAD = 10;
 var BLOCK_LEAF_H = 46;
 var BLOCK_HEADER_H = 28;
 var BLOCK_COLLAPSED_H = 46;
-var BLOCK_BAR_H = 6;
 var MIN_COL = 104;
 var MAX_COL = 250;
 var LABEL_FS = 13;
@@ -322,11 +324,18 @@ function drawItems(g, items, ctx, path = []) {
     }
     if (it.type === "collapsed") {
       const fill2 = 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", fill2).attr("stroke", stroke).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", "bold").attr("fill", palette.text).text(clipLabel(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 : stroke).attr("clip-path", `url(#${cid})`);
+      renderCollapseBar(cell, {
+        x: it.x,
+        y: it.y,
+        width: it.w,
+        height: it.h,
+        rx: 10,
+        fill: fillMode === "solid" && color ? palette.text : stroke,
+        clipId: `dgmo-block-clip-${clipCounter++}`,
+        prefix: "block"
+      });
       bindToggle(cell, it, ctx, it.h);
       continue;
     }
@@ -342,7 +351,19 @@ function drawItems(g, items, ctx, path = []) {
       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", "bold").attr("fill", palette.text).attr("opacity", headerOpacity).text(clipLabel(it.label ?? "", it.w - 24, headerFs));
-      bindToggle(cell, it, ctx, BLOCK_HEADER_H);
+      if (bindToggle(cell, it, ctx, BLOCK_HEADER_H)) {
+        renderCollapseBar(cell, {
+          expanded: true,
+          x: it.x,
+          y: it.y,
+          width: it.w,
+          height: it.h,
+          rx: 10,
+          fill: fillMode === "solid" && color ? palette.text : stroke,
+          clipId: `dgmo-block-clip-${clipCounter++}`,
+          prefix: "block"
+        });
+      }
       if (it.inner) drawItems(g, it.inner, ctx, itemPath);
       continue;
     }
@@ -353,10 +374,13 @@ function drawItems(g, items, ctx, path = []) {
   }
 }
 function bindToggle(cell, it, ctx, hitH) {
-  if (!ctx.onToggle || !it.node || it.lineNumber === void 0) return;
+  if (!it.node || it.lineNumber === void 0) return false;
   const id = it.node.id;
   const ln = it.lineNumber;
+  cell.attr("data-group-toggle", id).attr("role", "button").attr("aria-expanded", String(it.type !== "collapsed")).attr("aria-label", it.label ?? id);
+  if (!ctx.onToggle) return true;
   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));
+  return true;
 }
 function authoredCollapsedIds(parsed) {
   const into = /* @__PURE__ */ new Set();

package/dist/{chunk-KAO7JL4I.js → chunk-PU5X3P3T.js}

@@ -428,6 +428,7 @@ var INTER_BOLD_W = {
 var INTER_DEFAULT_W = 0.603;
 
 // src/utils/script-metrics.ts
+var ARABIC_W = 0.66;
 var SCRIPT_W = [
   // Greek and Greek Extended — Inter has these glyphs, but the generated
   // table stops at Latin-1, so they arrive here.
@@ -437,11 +438,11 @@ var SCRIPT_W = [
   [1024, 1327, 0.604],
   [1424, 1535, 0.499],
   // Hebrew
-  [1536, 1791, 0.447],
+  [1536, 1791, ARABIC_W],
   // Arabic
-  [1872, 1919, 0.447],
+  [1872, 1919, ARABIC_W],
   // Arabic Supplement
-  [2208, 2303, 0.447],
+  [2208, 2303, ARABIC_W],
   // Arabic Extended-A
   [2304, 2431, 0.553],
   // Devanagari
@@ -475,9 +476,9 @@ var SCRIPT_W = [
   // Hangul syllables, and extended letters B
   [63744, 64255, 1],
   // CJK Compatibility Ideographs
-  [64336, 65023, 0.447],
+  [64336, 65023, ARABIC_W],
   // Arabic Presentation Forms-A
-  [65136, 65279, 0.447],
+  [65136, 65279, ARABIC_W],
   // Arabic Presentation Forms-B
   // Full-width forms only. The half-width tail (U+FF61 onward) is half an em
   // and is left to the default rather than given a wrong full-width ratio.

package/dist/{chunk-J7Q4AB23.js → chunk-PZ5LAAO3.js}

@@ -4,13 +4,13 @@ import {
   matchTagBlockHeading,
   stripDefaultModifier,
   tagAttrKey
-} from "./chunk-4SACN2C5.js";
+} from "./chunk-KW3CC7SB.js";
 import {
   FILL_FAMILY_TOKENS,
   extractColor,
   measureIndent,
   parseFirstLine
-} from "./chunk-TIIZIAGS.js";
+} from "./chunk-RFGQDIOI.js";
 import {
   emit
 } from "./chunk-BYU54C3S.js";

package/dist/{chunk-TOHTKLKE.js → chunk-Q5Q5JLRT.js}

@@ -1,6 +1,6 @@
 import {
   serializeSvg
-} from "./chunk-CYRB2JTN.js";
+} from "./chunk-YLKPRT6U.js";
 import {
   FONT_FAMILY
 } from "./chunk-ICLB27PZ.js";

package/dist/{chunk-Y3SIQN4J.js → chunk-Q6V342WS.js}

@@ -1,19 +1,22 @@
 import {
   ScaleContext
 } from "./chunk-24YPR5EH.js";
+import {
+  renderCollapseBar
+} from "./chunk-LRTSTDJ6.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT
-} from "./chunk-VLC6WNRD.js";
+} from "./chunk-GULGSH2Z.js";
 import {
   FONT_FAMILY
 } from "./chunk-ICLB27PZ.js";
 import {
   fillModeFromOptions
-} from "./chunk-TIIZIAGS.js";
+} from "./chunk-RFGQDIOI.js";
 import {
   measureText
-} from "./chunk-KAO7JL4I.js";
+} from "./chunk-PU5X3P3T.js";
 import {
   contrastText,
   mix,
@@ -42,6 +45,7 @@ function getElementSemanticColor(el, palette) {
   }
   return null;
 }
+var wfClipCounter = 0;
 function renderWireframe(container, parsed, layout, palette, isDark, _onClickItem, exportDims, theme, options) {
   const opts = options ?? {};
   const effectiveExportDims = opts.exportDims ?? exportDims;
@@ -55,8 +59,9 @@ function renderWireframe(container, parsed, layout, palette, isDark, _onClickIte
   if (isExport) {
     svg.attr("width", width).attr("height", height);
   } else {
-    svg.attr("width", "100%").attr("height", "auto").style("display", "block");
+    svg.attr("width", "100%").style("display", "block");
   }
+  wfClipCounter = 0;
   const ctx = {
     palette,
     isTransparent: effectiveTheme === "transparent",
@@ -176,7 +181,14 @@ function renderGroup(g, node, ctx, depth) {
     g.append("text").attr("x", 10).attr("y", 18).attr("fill", palette.textMuted).attr("font-size", 11).attr("font-weight", "bold").attr("letter-spacing", "0.5px").text(el.label.toUpperCase());
   }
   if (el.states.includes("collapsed")) {
-    g.append("text").attr("x", node.width - 20).attr("y", 18).attr("fill", palette.textMuted).attr("font-size", 12).attr("opacity", 0.6).text("\u25B6");
+    renderCollapseBar(g, {
+      width: node.width,
+      height: node.height,
+      rx: GROUP_CORNER,
+      fill: palette.border,
+      clipId: `wf-collapse-clip-${wfClipCounter++}`,
+      prefix: "wf"
+    });
     return;
   }
   if (el.states.includes("scrollable")) {