@diagrammo/dgmo 0.45.0 → 0.47.0

package/dist/chunk-JED6ZDEE.js

@@ -0,0 +1,73 @@
+import {
+  placeNotes
+} from "./chunk-6EK55ART.js";
+import {
+  noteBoxSize
+} from "./chunk-TYS6CSS5.js";
+
+// src/utils/notes/build.ts
+function buildPlacedNotes(anchors, noteByNode, direction, collapsedNotes) {
+  const placed = /* @__PURE__ */ new Map();
+  if (noteByNode.size === 0) return placed;
+  const geoms = /* @__PURE__ */ new Map();
+  const requests = [];
+  for (const a of anchors) {
+    const note = noteByNode.get(a.id);
+    if (!note) continue;
+    const size = noteBoxSize(note.body);
+    geoms.set(a.id, {
+      noteW: size.width,
+      noteH: size.height,
+      ...note.color && { color: note.color },
+      lines: size.lines,
+      lineNumber: note.lineNumber,
+      endLineNumber: note.endLineNumber
+    });
+    requests.push({
+      key: a.id,
+      node: { x: a.x, y: a.y, width: a.width, height: a.height },
+      noteW: size.width,
+      noteH: size.height,
+      collapsed: collapsedNotes?.has(note.lineNumber) ?? false
+    });
+  }
+  const placements = placeNotes(
+    anchors.map((a) => ({ x: a.x, y: a.y, width: a.width, height: a.height })),
+    requests,
+    direction
+  );
+  for (const [id, g] of geoms) {
+    const p = placements.get(id);
+    placed.set(
+      id,
+      p.collapsed ? {
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+        side: "right",
+        ...g.color && { color: g.color },
+        lines: [],
+        lineNumber: g.lineNumber,
+        endLineNumber: g.endLineNumber,
+        collapsed: true
+      } : {
+        x: p.x,
+        y: p.y,
+        width: g.noteW,
+        height: g.noteH,
+        side: p.side,
+        ...g.color && { color: g.color },
+        lines: g.lines,
+        lineNumber: g.lineNumber,
+        endLineNumber: g.endLineNumber
+      }
+    );
+  }
+  return placed;
+}
+
+export {
+  buildPlacedNotes
+};
+//# sourceMappingURL=chunk-JED6ZDEE.js.map

package/dist/chunk-JEUJOX5X.js

@@ -0,0 +1,136 @@
+import {
+  NOTE_BULLET_INDENT,
+  NOTE_FOLD,
+  NOTE_FONT_SIZE,
+  NOTE_LINE_H,
+  NOTE_PAD_H,
+  NOTE_PAD_V
+} from "./chunk-5DH3KYFH.js";
+import {
+  renderInlineText
+} from "./chunk-3HDBAXF5.js";
+import {
+  mix
+} from "./chunk-P6T66CCZ.js";
+
+// src/utils/note-box/svg.ts
+var NOTE_STROKE_WIDTH = 0.6;
+var NOTE_STROKE_OPACITY = 0.6;
+function renderNoteConnector(parent, x1, y1, x2, y2, palette) {
+  parent.append("line").attr("x1", x1).attr("y1", y1).attr("x2", x2).attr("y2", y2).attr("stroke", palette.textMuted).attr("stroke-width", NOTE_STROKE_WIDTH).attr("stroke-opacity", NOTE_STROKE_OPACITY).attr("class", "note-connector").style("pointer-events", "none");
+}
+function noteConnectorPoints(node, note) {
+  const clampX = Math.max(note.x, Math.min(0, note.x + note.width));
+  switch (note.side) {
+    case "right":
+      return [node.width / 2, 0, note.x, note.y + note.height / 2];
+    case "left":
+      return [
+        -node.width / 2,
+        0,
+        note.x + note.width,
+        note.y + note.height / 2
+      ];
+    case "below":
+      return [clampX, node.height / 2, clampX, note.y];
+    case "above":
+    default:
+      return [clampX, -node.height / 2, clampX, note.y + note.height];
+  }
+}
+function noteAccent(palette, color) {
+  return color ?? palette.colors.yellow;
+}
+function noteBoxFill(palette, isDark, color) {
+  const accent = noteAccent(palette, color);
+  return isDark ? mix(accent, palette.bg, 24) : mix(accent, palette.bg, 16);
+}
+function renderNoteBox(parent, rect, lines, palette, opts) {
+  const fontSize = opts.fontSize ?? NOTE_FONT_SIZE;
+  const interactive = opts.interactive ?? false;
+  const { x, y, width, height } = rect;
+  const fill = noteBoxFill(palette, opts.isDark, opts.color);
+  const accent = noteAccent(palette, opts.color);
+  const noteG = parent.append("g").attr("class", "note").attr("data-note-toggle", "");
+  if (opts.lineNumber !== void 0) {
+    noteG.attr("data-line-number", String(opts.lineNumber));
+  }
+  if (opts.endLineNumber !== void 0) {
+    noteG.attr("data-line-end", String(opts.endLineNumber));
+  }
+  if (interactive) {
+    noteG.style("cursor", "pointer").attr("role", "button").attr("tabindex", "0").attr("aria-expanded", "true").attr("aria-label", "Collapse note");
+  }
+  const boxPath = noteG.append("path").attr(
+    "d",
+    [
+      `M ${x} ${y}`,
+      `L ${x + width - NOTE_FOLD} ${y}`,
+      `L ${x + width} ${y + NOTE_FOLD}`,
+      `L ${x + width} ${y + height}`,
+      `L ${x} ${y + height}`,
+      "Z"
+    ].join(" ")
+  ).attr("fill", fill).attr("stroke", accent).attr("stroke-width", NOTE_STROKE_WIDTH).attr("stroke-opacity", NOTE_STROKE_OPACITY).attr("class", "note-box");
+  if (!interactive) boxPath.style("pointer-events", "none");
+  noteG.append("path").attr(
+    "d",
+    [
+      `M ${x + width - NOTE_FOLD} ${y}`,
+      `L ${x + width - NOTE_FOLD} ${y + NOTE_FOLD}`,
+      `L ${x + width} ${y + NOTE_FOLD}`
+    ].join(" ")
+  ).attr("fill", "none").attr("stroke", accent).attr("stroke-width", NOTE_STROKE_WIDTH).attr("stroke-opacity", NOTE_STROKE_OPACITY).attr("class", "note-fold").style("pointer-events", "none");
+  lines.forEach((line, li) => {
+    const textY = y + NOTE_PAD_V + (li + 1) * NOTE_LINE_H - 3;
+    const indent = line.kind === "plain" ? 0 : NOTE_BULLET_INDENT;
+    if (line.kind === "bullet-first") {
+      noteG.append("text").attr("x", x + NOTE_PAD_H).attr("y", textY).attr("fill", palette.text).attr("font-size", fontSize).text("\u2022");
+    }
+    const textEl = noteG.append("text").attr("x", x + NOTE_PAD_H + indent).attr("y", textY).attr("fill", palette.text).attr("font-size", fontSize).attr("class", "note-text");
+    renderInlineText(textEl, line.text, palette, fontSize);
+  });
+  return noteG;
+}
+var NOTE_BADGE_RADIUS = 7;
+var NOTE_BADGE_OPACITY = 0.6;
+function renderNoteBadge(parent, center, palette, opts) {
+  const fill = noteBoxFill(palette, opts.isDark, opts.color);
+  const accent = noteAccent(palette, opts.color);
+  const g = parent.append("g").attr("class", "note note-badge").attr("data-note-toggle", "").attr("transform", `translate(${center.x}, ${center.y})`).attr("opacity", NOTE_BADGE_OPACITY).style("cursor", "pointer").attr("role", "button").attr("tabindex", "0").attr("aria-expanded", "false").attr("aria-label", "Expand note");
+  if (opts.lineNumber !== void 0) {
+    g.attr("data-line-number", String(opts.lineNumber));
+  }
+  if (opts.endLineNumber !== void 0) {
+    g.attr("data-line-end", String(opts.endLineNumber));
+  }
+  g.append("path").attr(
+    "d",
+    [
+      "M -6.5 -4",
+      "Q -6.5 -6 -4.5 -6",
+      "L 4.5 -6",
+      "Q 6.5 -6 6.5 -4",
+      "L 6.5 1",
+      "Q 6.5 3 4.5 3",
+      "L -1 3",
+      "L -4 6",
+      "L -2.5 3",
+      "L -4.5 3",
+      "Q -6.5 3 -6.5 1",
+      "Z"
+    ].join(" ")
+  ).attr("fill", fill).attr("stroke", accent).attr("stroke-width", 0.55).attr("class", "note-badge-bubble");
+  g.append("line").attr("x1", -3.5).attr("y1", -3).attr("x2", 3.5).attr("y2", -3).attr("stroke", palette.textMuted).attr("stroke-width", 0.75).style("pointer-events", "none");
+  g.append("line").attr("x1", -3.5).attr("y1", -0.5).attr("x2", 1.5).attr("y2", -0.5).attr("stroke", palette.textMuted).attr("stroke-width", 0.75).style("pointer-events", "none");
+  return g;
+}
+
+export {
+  renderNoteConnector,
+  noteConnectorPoints,
+  renderNoteBox,
+  NOTE_BADGE_RADIUS,
+  renderNoteBadge
+};
+//# sourceMappingURL=chunk-JEUJOX5X.js.map

package/dist/chunk-JM4LEPY3.js

@@ -0,0 +1,436 @@
+import {
+  renderInlineText
+} from "./chunk-3HDBAXF5.js";
+import {
+  wrapDescriptionLines
+} from "./chunk-BMR4CIEO.js";
+import {
+  ScaleContext
+} from "./chunk-YYVTBZZC.js";
+import {
+  TITLE_FONT_SIZE,
+  TITLE_FONT_WEIGHT,
+  TITLE_Y
+} from "./chunk-A4GOY3PE.js";
+import {
+  FONT_FAMILY
+} from "./chunk-6KFWC4CO.js";
+import {
+  CHAR_WIDTH_RATIO,
+  measureText
+} from "./chunk-WCT3NYCV.js";
+import {
+  contrastText,
+  getSeriesColors,
+  shapeFill
+} from "./chunk-P6T66CCZ.js";
+import {
+  resolveColor
+} from "./chunk-TLVIHFRO.js";
+
+// src/pyramid/renderer.ts
+import * as d3Selection from "d3-selection";
+var TITLE_AREA_HEIGHT = 50;
+var H_MARGIN_FRAC = 0.03;
+var V_MARGIN = 16;
+var BASE_WIDTH_FRAC_NO_DESC = 0.78;
+var PYRAMID_SHARE_WITH_DESC = 0.58;
+var PYRAMID_SHARE_ALTERNATE = 0.42;
+var PITCH_RATIO = 0.85;
+var DESC_GAP = 28;
+var DESC_ACCENT_WIDTH = 3;
+var DESC_ACCENT_GAP = 12;
+var BULLET_BODY_INDENT = 10;
+var LABEL_FONT_MIN = 12;
+var LABEL_FONT_MAX = 22;
+var DESC_FONT_MIN = 11;
+var DESC_FONT_MAX = 15;
+function renderPyramid(container, parsed, palette, isDark, onClickItem, exportDims) {
+  if (parsed.layers.length === 0) return;
+  d3Selection.select(container).selectAll(":not([data-d3-tooltip])").remove();
+  const width = exportDims?.width ?? container.clientWidth;
+  const height = exportDims?.height ?? container.clientHeight;
+  if (width <= 0 || height <= 0) return;
+  const idealWidth = width;
+  const sctx = exportDims ? ScaleContext.identity() : ScaleContext.from(width, idealWidth);
+  const sTitleFontSize = sctx.text(TITLE_FONT_SIZE);
+  const sTitleY = sctx.structural(TITLE_Y);
+  const sTitleAreaHeight = sctx.structural(TITLE_AREA_HEIGHT);
+  const sVMargin = sctx.aesthetic(V_MARGIN);
+  const hasAnyDescription = parsed.layers.some((l) => l.description.length > 0);
+  const showTitle = !!parsed.title && parsed.options["no-title"] !== "on";
+  const titleH = showTitle ? sTitleAreaHeight : 0;
+  const bodyTop = titleH + sVMargin;
+  const bodyBottom = height - sVMargin;
+  const bodyHeight = Math.max(60, bodyBottom - bodyTop);
+  const sideMargin = width * H_MARGIN_FRAC;
+  const usableWidth = width - sideMargin * 2;
+  const N = parsed.layers.length;
+  const singleProbe = computeLayout({
+    width,
+    usableWidth,
+    sideMargin,
+    bodyTop,
+    bodyHeight,
+    layers: parsed.layers,
+    hasDescription: hasAnyDescription,
+    alternate: false
+  });
+  const anyOverflow = singleProbe.wraps.some((w) => w.overflows);
+  const useAlternate = anyOverflow && hasAnyDescription && N >= 2;
+  const layout = useAlternate ? computeLayout({
+    width,
+    usableWidth,
+    sideMargin,
+    bodyTop,
+    bodyHeight,
+    layers: parsed.layers,
+    hasDescription: true,
+    alternate: true
+  }) : singleProbe;
+  const svg = d3Selection.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").style("font-family", FONT_FAMILY);
+  if (sctx.isBelowFloor) {
+    svg.attr("width", "100%");
+  }
+  svg.append("style").text(
+    ".pyramid-desc-full{display:none}.dgmo-pyramid-layer-highlight.pyramid-desc-short{display:none}.dgmo-pyramid-layer-highlight.pyramid-desc-full{display:inline}.dgmo-pyramid-hidden{display:none}"
+  );
+  svg.append("rect").attr("width", width).attr("height", height).attr("fill", palette.bg);
+  if (showTitle) {
+    const titleText = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", sTitleY).attr("text-anchor", "middle").attr("fill", palette.text).attr("font-family", FONT_FAMILY).attr("font-size", sTitleFontSize).attr("font-weight", TITLE_FONT_WEIGHT).attr("data-line-number", parsed.titleLineNumber).text(parsed.title).style("cursor", onClickItem ? "pointer" : "default");
+    if (onClickItem) {
+      titleText.on("click", () => onClickItem(parsed.titleLineNumber));
+    }
+  }
+  const seriesColors = getSeriesColors(palette);
+  const resolveSolid = (layer, i) => {
+    if (layer.color) {
+      const named = resolveColor(layer.color, palette);
+      if (named) return named;
+    }
+    return seriesColors[i % seriesColors.length];
+  };
+  const diagramG = svg.append("g").attr("class", "pyramid-body");
+  for (let i = 0; i < N; i++) {
+    const layer = parsed.layers[i];
+    const topEdgeY = layout.pyramidTop + i * layout.layerH;
+    const botEdgeY = topEdgeY + layout.layerH;
+    const topHalf = halfWidthAt(i, N, layout.baseWidth, parsed.inverted);
+    const botHalf = halfWidthAt(i + 1, N, layout.baseWidth, parsed.inverted);
+    const polyPoints = [
+      [layout.pyramidCx - topHalf, topEdgeY],
+      [layout.pyramidCx + topHalf, topEdgeY],
+      [layout.pyramidCx + botHalf, botEdgeY],
+      [layout.pyramidCx - botHalf, botEdgeY]
+    ].map((p) => `${p[0]},${p[1]}`).join(" ");
+    const solidColor = resolveSolid(layer, i);
+    const fillColor = shapeFill(palette, solidColor, isDark, {
+      solid: parsed.options["solid-fill"] === "on"
+    });
+    const layerG = diagramG.append("g").attr("class", "pyramid-layer").attr("data-line-number", layer.lineNumber);
+    if (onClickItem) {
+      const ln = layer.lineNumber;
+      layerG.style("cursor", "pointer").on("click", () => onClickItem(ln));
+    }
+    layerG.append("polygon").attr("points", polyPoints).attr("fill", fillColor).attr("stroke", solidColor).attr("stroke-width", 2);
+    const midY = (topEdgeY + botEdgeY) / 2;
+    const textColor = contrastText(
+      fillColor,
+      palette.textOnFillLight,
+      palette.textOnFillDark
+    );
+    const labelFitsInside = Math.min(topHalf, botHalf) * 2 > measureText(layer.label, layout.labelFont);
+    const haloColor = textColor === palette.textOnFillLight ? palette.textOnFillDark : palette.textOnFillLight;
+    const labelText = layerG.append("text").attr("x", layout.pyramidCx).attr("y", midY).attr("dy", "0.35em").attr("text-anchor", "middle").attr("fill", textColor).attr("font-family", FONT_FAMILY).attr("font-size", layout.labelFont).attr("font-weight", 600);
+    if (!labelFitsInside) {
+      labelText.attr("paint-order", "stroke fill").attr("stroke", haloColor).attr("stroke-width", 3).attr("stroke-linejoin", "round").attr("stroke-opacity", 0.6);
+    }
+    renderInlineText(labelText, layer.label, palette);
+    if (layer.description.length > 0) {
+      const side = useAlternate ? i % 2 === 0 ? "right" : "left" : "right";
+      const wrap = layout.wraps[i];
+      renderLayerDescriptions(
+        diagramG,
+        layer,
+        side,
+        wrap,
+        layout,
+        midY,
+        solidColor,
+        palette,
+        titleH + V_MARGIN,
+        height - V_MARGIN,
+        onClickItem
+      );
+    }
+  }
+}
+function renderPyramidForExport(container, parsed, palette, isDark, exportDims) {
+  renderPyramid(container, parsed, palette, isDark, void 0, exportDims);
+}
+function computeLayout(input) {
+  const {
+    width,
+    usableWidth,
+    sideMargin,
+    bodyTop,
+    bodyHeight,
+    layers,
+    hasDescription,
+    alternate
+  } = input;
+  const N = layers.length;
+  const pyramidShareFrac = hasDescription ? alternate ? PYRAMID_SHARE_ALTERNATE : PYRAMID_SHARE_WITH_DESC : BASE_WIDTH_FRAC_NO_DESC;
+  const pyramidBandWidth = usableWidth * pyramidShareFrac;
+  const maxBaseByHeight = bodyHeight / PITCH_RATIO;
+  const baseWidth = Math.min(pyramidBandWidth, maxBaseByHeight);
+  const pyramidH = baseWidth * PITCH_RATIO;
+  let pyramidCx;
+  if (!hasDescription) {
+    pyramidCx = width / 2;
+  } else if (alternate) {
+    pyramidCx = width / 2;
+  } else {
+    pyramidCx = sideMargin + pyramidBandWidth / 2;
+  }
+  const pyramidTop = bodyTop + (bodyHeight - pyramidH) / 2;
+  const layerH = pyramidH / N;
+  const labelFont = clamp(
+    Math.round(layerH * 0.38),
+    LABEL_FONT_MIN,
+    LABEL_FONT_MAX
+  );
+  const descFont = clamp(
+    Math.round(layerH * 0.22),
+    DESC_FONT_MIN,
+    DESC_FONT_MAX
+  );
+  const descLineHeight = Math.round(descFont * 1.35);
+  const pyramidRightEdge = pyramidCx + baseWidth / 2;
+  const pyramidLeftEdge = pyramidCx - baseWidth / 2;
+  const rightAccentX = pyramidRightEdge + DESC_GAP;
+  const rightTextX = rightAccentX + DESC_ACCENT_WIDTH + DESC_ACCENT_GAP;
+  const rightTextWidth = Math.max(80, width - sideMargin - rightTextX);
+  const leftAccentX = pyramidLeftEdge - DESC_GAP - DESC_ACCENT_WIDTH;
+  const leftTextWidth = Math.max(
+    80,
+    leftAccentX - DESC_ACCENT_GAP - sideMargin
+  );
+  const leftTextX = sideMargin;
+  const wraps = layers.map((layer, i) => {
+    if (layer.description.length === 0) {
+      return { allLines: [], overflows: false, shortLineCount: 0 };
+    }
+    const side = alternate ? i % 2 === 0 ? "right" : "left" : "right";
+    const colWidth = side === "right" ? rightTextWidth : leftTextWidth;
+    const wrapped = wrapDescription(layer.description, colWidth, descFont);
+    const bandCap = Math.max(1, Math.floor(layerH / descLineHeight) - 0);
+    const overflows = wrapped.length > bandCap;
+    const shortLineCount = overflows ? bandCap : wrapped.length;
+    return { allLines: wrapped, overflows, shortLineCount };
+  });
+  return {
+    alternate,
+    baseWidth,
+    pyramidCx,
+    pyramidTop,
+    pyramidH,
+    layerH,
+    labelFont,
+    descFont,
+    descLineHeight,
+    rightTextX,
+    rightTextWidth,
+    leftTextX,
+    leftTextWidth,
+    rightAccentX,
+    leftAccentX,
+    wraps
+  };
+}
+function halfWidthAt(edgeIdx, n, baseWidth, inverted) {
+  const topNarrow = !inverted;
+  const frac = topNarrow ? edgeIdx / n : (n - edgeIdx) / n;
+  return frac * baseWidth / 2;
+}
+function renderLayerDescriptions(parentG, layer, side, wrap, layout, midY, accentColor, palette, topBound, bottomBound, onClickItem) {
+  const { descFont, descLineHeight } = layout;
+  const accentX = side === "right" ? layout.rightAccentX : layout.leftAccentX;
+  const textX = side === "right" ? layout.rightTextX : layout.leftTextX;
+  const textAnchor = side === "right" ? "start" : "end";
+  const textLineX = side === "right" ? textX : layout.leftAccentX - DESC_ACCENT_GAP;
+  const bulletColRightEdge = layout.leftAccentX - DESC_ACCENT_GAP;
+  const computeBulletColLeftX = (lines) => {
+    if (side === "right") return layout.rightTextX;
+    let maxBodyW = 0;
+    for (const l of lines) {
+      if (l.kind === "bullet-first" || l.kind === "bullet-cont") {
+        maxBodyW = Math.max(maxBodyW, measureText(l.text, descFont));
+      }
+    }
+    return bulletColRightEdge - maxBodyW - BULLET_BODY_INDENT;
+  };
+  const availableH = bottomBound - topBound;
+  const fullMaxLines = Math.max(1, Math.floor(availableH / descLineHeight));
+  const fullLines = truncateWithEllipsis(wrap.allLines, fullMaxLines);
+  if (!wrap.overflows) {
+    renderDescriptionVariant({
+      parentG,
+      layer,
+      lines: wrap.allLines,
+      className: "pyramid-desc",
+      accentX,
+      accentColor,
+      textX: textLineX,
+      textAnchor,
+      side,
+      bulletColLeftX: computeBulletColLeftX(wrap.allLines),
+      midY,
+      descFont,
+      descLineHeight,
+      palette,
+      topBound,
+      bottomBound,
+      ...onClickItem !== void 0 && { onClickItem },
+      variant: "short"
+    });
+    return;
+  }
+  const shortLines = buildShortLines(wrap);
+  renderDescriptionVariant({
+    parentG,
+    layer,
+    lines: shortLines,
+    className: "pyramid-desc pyramid-desc-short",
+    accentX,
+    accentColor,
+    textX: textLineX,
+    textAnchor,
+    side,
+    bulletColLeftX: computeBulletColLeftX(shortLines),
+    midY,
+    descFont,
+    descLineHeight,
+    palette,
+    topBound,
+    bottomBound,
+    ...onClickItem !== void 0 && { onClickItem },
+    variant: "short"
+  });
+  renderDescriptionVariant({
+    parentG,
+    layer,
+    lines: fullLines,
+    className: "pyramid-desc pyramid-desc-full",
+    accentX,
+    accentColor,
+    textX: textLineX,
+    textAnchor,
+    side,
+    bulletColLeftX: computeBulletColLeftX(fullLines),
+    midY,
+    descFont,
+    descLineHeight,
+    palette,
+    topBound,
+    bottomBound,
+    ...onClickItem !== void 0 && { onClickItem },
+    variant: "full"
+  });
+}
+function truncateWithEllipsis(lines, maxLines) {
+  if (lines.length <= maxLines) return lines.slice();
+  const visible = lines.slice(0, maxLines);
+  if (visible.length === 0) return visible;
+  const last = visible[visible.length - 1];
+  visible[visible.length - 1] = {
+    ...last,
+    text: last.text.endsWith("\u2026") ? last.text : `${last.text} \u2026`
+  };
+  return visible;
+}
+function buildShortLines(wrap) {
+  if (!wrap.overflows) return wrap.allLines.slice();
+  const visible = wrap.allLines.slice(0, wrap.shortLineCount);
+  if (visible.length === 0) return [];
+  const last = visible[visible.length - 1];
+  visible[visible.length - 1] = {
+    ...last,
+    text: last.text.endsWith("\u2026") ? last.text : `${last.text} \u2026`
+  };
+  return visible;
+}
+function renderDescriptionVariant(args) {
+  const {
+    parentG,
+    layer,
+    lines,
+    className,
+    accentX,
+    accentColor,
+    textX,
+    textAnchor,
+    bulletColLeftX,
+    midY,
+    descFont,
+    descLineHeight,
+    palette,
+    topBound,
+    bottomBound,
+    onClickItem,
+    variant
+  } = args;
+  if (lines.length === 0) return;
+  const totalH = lines.length * descLineHeight;
+  let startY = midY - totalH / 2 + descLineHeight / 2;
+  const accentPad = Math.max(4, Math.round(descFont * 0.3));
+  const blockTop = startY - descLineHeight / 2 - accentPad;
+  const blockBottom = startY + (lines.length - 1) * descLineHeight + descLineHeight / 2 + accentPad;
+  let shift = 0;
+  if (blockTop < topBound) shift = topBound - blockTop;
+  else if (blockBottom > bottomBound) shift = bottomBound - blockBottom;
+  startY += shift;
+  const accentTop = startY - descLineHeight / 2 - accentPad;
+  const accentH = totalH + accentPad * 2;
+  const descG = parentG.append("g").attr("class", className).attr("data-line-number", layer.lineNumber).attr("data-variant", variant);
+  if (onClickItem) {
+    const ln = layer.lineNumber;
+    descG.style("cursor", "pointer").on("click", () => onClickItem(ln));
+  }
+  descG.append("rect").attr("x", accentX).attr("y", accentTop).attr("width", DESC_ACCENT_WIDTH).attr("height", accentH).attr("rx", DESC_ACCENT_WIDTH / 2).attr("fill", accentColor);
+  for (let j = 0; j < lines.length; j++) {
+    const line = lines[j];
+    const y = startY + j * descLineHeight;
+    const isBullet = line.kind === "bullet-first" || line.kind === "bullet-cont";
+    if (line.kind === "bullet-first") {
+      descG.append("text").attr("x", bulletColLeftX).attr("y", y).attr("dy", "0.35em").attr("text-anchor", "start").attr("fill", palette.text).attr("font-family", FONT_FAMILY).attr("font-size", descFont).attr("font-weight", j === 0 ? 500 : 400).text("\u2022");
+    }
+    const t = descG.append("text").attr("x", isBullet ? bulletColLeftX + BULLET_BODY_INDENT : textX).attr("y", y).attr("dy", "0.35em").attr("text-anchor", isBullet ? "start" : textAnchor).attr("fill", palette.text).attr("font-family", FONT_FAMILY).attr("font-size", descFont).attr("font-weight", j === 0 ? 500 : 400);
+    renderInlineText(t, line.text, palette);
+  }
+}
+function wrapDescription(lines, maxWidth, fontSize) {
+  const avgCharW = fontSize * CHAR_WIDTH_RATIO;
+  const maxChars = Math.max(8, Math.floor(maxWidth / avgCharW));
+  const normalized = lines.map(
+    (l) => l.startsWith("- ") ? "\u2022 " + l.slice(2) : l
+  );
+  const out = [];
+  for (const line of normalized) {
+    if (line === "") {
+      out.push({ text: "", kind: "plain" });
+      continue;
+    }
+    out.push(...wrapDescriptionLines([line], maxChars));
+  }
+  return out;
+}
+function clamp(x, lo, hi) {
+  return Math.max(lo, Math.min(hi, x));
+}
+
+export {
+  renderPyramid,
+  renderPyramidForExport
+};
+//# sourceMappingURL=chunk-JM4LEPY3.js.map