@diagrammo/dgmo 0.48.1 → 0.49.0

package/dist/chunk-6CLKNXVP.js

@@ -0,0 +1,664 @@
+import {
+  renderCollapseBar,
+  renderNodeCard
+} from "./chunk-AHGF2YYA.js";
+import {
+  CARD_RADIUS,
+  CONTAINER_RADIUS
+} from "./chunk-3CIOJ5YJ.js";
+import {
+  renderIntegratedLegend
+} from "./chunk-4UDKKGHH.js";
+import {
+  getMaxLegendReservedHeight
+} from "./chunk-7UEMZREK.js";
+import {
+  FONT_FAMILY
+} from "./chunk-6KFWC4CO.js";
+import {
+  measureText,
+  wrapTextToWidth
+} from "./chunk-5LWQH6QV.js";
+import {
+  contrastText,
+  mix,
+  shapeFill
+} from "./chunk-P6T66CCZ.js";
+import {
+  resolveActiveTagGroup,
+  resolveTagColor,
+  tagAttrKey
+} from "./chunk-HBVD67XG.js";
+
+// src/sketch/renderer.ts
+import * as d3 from "d3-selection";
+
+// src/sketch/markdown-card.ts
+var BOLD_WIDTH_FACTOR = 1.06;
+var INDENT_PX = 12;
+var BULLET_HANG_PX = 12;
+var ELLIPSIS = "\u2026";
+var BULLET = "\u2022";
+function segWidth(seg, fontSize) {
+  const w = measureText(seg.text, fontSize);
+  return seg.bold ? w * BOLD_WIDTH_FACTOR : w;
+}
+function parseInline(text) {
+  const segments = [];
+  const regex = /\*\*(.+?)\*\*|\[([^\]]*)\]\(([^)]*)\)|((?:(?!\*\*|\[).)+)/gs;
+  let m;
+  while ((m = regex.exec(text)) !== null) {
+    if (m[1] !== void 0) {
+      segments.push({ text: m[1], bold: true });
+    } else if (m[2] !== void 0) {
+      segments.push({ text: m[2], bold: false, ...m[3] && { href: m[3] } });
+    } else if (m[4] !== void 0) {
+      segments.push({ text: m[4], bold: false });
+    }
+  }
+  return segments;
+}
+function segmentsToWords(segments) {
+  const words = [];
+  let current = [];
+  for (const seg of segments) {
+    const parts = seg.text.split(/(\s+)/);
+    for (const part of parts) {
+      if (part === "") continue;
+      if (/^\s+$/.test(part)) {
+        if (current.length > 0) {
+          words.push(current);
+          current = [];
+        }
+      } else {
+        current.push({
+          text: part,
+          bold: seg.bold,
+          ...seg.href !== void 0 && { href: seg.href }
+        });
+      }
+    }
+  }
+  if (current.length > 0) words.push(current);
+  return words;
+}
+function wordWidth(word, fontSize) {
+  let w = 0;
+  for (const piece of word) w += segWidth(piece, fontSize);
+  return w;
+}
+function coalesce(pieces) {
+  const out = [];
+  for (const p of pieces) {
+    const last = out[out.length - 1];
+    if (last?.bold === p.bold && last.href === p.href) {
+      last.text += p.text;
+    } else {
+      out.push({
+        text: p.text,
+        bold: p.bold,
+        ...p.href !== void 0 && { href: p.href }
+      });
+    }
+  }
+  return out;
+}
+function wrapSegments(segments, fontSize, avail, textX, bulletX) {
+  const words = segmentsToWords(segments);
+  if (words.length === 0) {
+    return [
+      { segments: [], x: textX, ...bulletX !== void 0 && { bulletX } }
+    ];
+  }
+  const spaceW = measureText(" ", fontSize);
+  const lines = [];
+  let currentPieces = [];
+  let currentW = 0;
+  let first = true;
+  const flush = () => {
+    lines.push({
+      segments: coalesce(currentPieces),
+      x: textX,
+      // only the FIRST visual line of a bullet carries the marker
+      ...first && bulletX !== void 0 && { bulletX }
+    });
+    first = false;
+    currentPieces = [];
+    currentW = 0;
+  };
+  for (const word of words) {
+    const ww = wordWidth(word, fontSize);
+    const addW = currentPieces.length === 0 ? ww : spaceW + ww;
+    if (currentPieces.length > 0 && currentW + addW > avail) {
+      flush();
+      currentPieces.push(...word);
+      currentW = ww;
+    } else {
+      if (currentPieces.length > 0) {
+        currentPieces.push({ text: " ", bold: false });
+        currentW += spaceW;
+      }
+      currentPieces.push(...word);
+      currentW += ww;
+    }
+  }
+  flush();
+  return lines;
+}
+function parseLogicalLine(raw) {
+  let i = 0;
+  let level = 0;
+  let spaceRun = 0;
+  while (i < raw.length) {
+    const ch = raw[i];
+    if (ch === "	") {
+      level += 1;
+      i += 1;
+      spaceRun = 0;
+    } else if (ch === " ") {
+      spaceRun += 1;
+      i += 1;
+      if (spaceRun === 2) {
+        level += 1;
+        spaceRun = 0;
+      }
+    } else {
+      break;
+    }
+  }
+  let content = raw.slice(i);
+  let bullet = false;
+  if (content.startsWith("- ") || content.startsWith("* ")) {
+    bullet = true;
+    content = content.slice(2);
+  }
+  return { level, bullet, content };
+}
+function drawMarkdownBlock(container, text, opts) {
+  const { width, fontSize, lineHeight, color, linkColor, maxLines } = opts;
+  const visualLines = [];
+  for (const raw of text.split("\n")) {
+    const { level, bullet, content } = parseLogicalLine(raw);
+    const indentX = level * INDENT_PX;
+    const textX = bullet ? indentX + BULLET_HANG_PX : indentX;
+    const avail = Math.max(1, width - textX);
+    const segments = parseInline(content);
+    const wrapped = wrapSegments(
+      segments,
+      fontSize,
+      avail,
+      textX,
+      bullet ? indentX : void 0
+    );
+    visualLines.push(...wrapped);
+  }
+  let shown = visualLines;
+  let clamped = false;
+  if (maxLines !== void 0 && visualLines.length > maxLines) {
+    shown = visualLines.slice(0, maxLines);
+    clamped = true;
+  }
+  for (let li = 0; li < shown.length; li++) {
+    const line = shown[li];
+    const y = fontSize + li * lineHeight;
+    const isLast = li === shown.length - 1;
+    if (line.bulletX !== void 0) {
+      container.append("text").attr("x", line.bulletX).attr("y", y).attr("fill", color).attr("font-size", fontSize).text(BULLET);
+    }
+    const textEl = container.append("text").attr("x", line.x).attr("y", y).attr("font-size", fontSize);
+    let cursorX = line.x;
+    const segs = line.segments.slice();
+    if (clamped && isLast) {
+      segs.push({ text: ELLIPSIS, bold: false });
+    }
+    for (const seg of segs) {
+      const tspan = textEl.append("tspan").attr("x", cursorX).attr("fill", seg.href !== void 0 ? linkColor : color).text(seg.text);
+      if (seg.bold) tspan.attr("font-weight", "bold");
+      const w = segWidth(seg, fontSize);
+      if (seg.href !== void 0) {
+        tspan.attr("data-href", seg.href);
+        container.append("line").attr("x1", cursorX).attr("y1", y + 1.5).attr("x2", cursorX + w).attr("y2", y + 1.5).attr("stroke", linkColor).attr("stroke-width", 1);
+      }
+      cursorX += w;
+    }
+  }
+  return shown.length * lineHeight;
+}
+
+// src/sketch/renderer.ts
+var DIAGRAM_PADDING = 20;
+var TITLE_Y = 32;
+var TITLE_FONT_SIZE = 18;
+var NODE_STROKE_WIDTH = 2;
+var EDGE_STROKE_WIDTH = 2;
+var EDGE_HIT_WIDTH = 18;
+var ARROWHEAD_W = 12;
+var ARROWHEAD_H = 8;
+var DASH = "6 3";
+var BAND_LABEL_FONT_SIZE = 19;
+var BAND_LABEL_OPACITY = 0.55;
+var NOTE_FONT_SIZE = 11;
+var COLLAPSE_BAR_HEIGHT = 4;
+var EDGE_LABEL_FONT_SIZE = 12;
+var CURVE_HANDLE_MIN = 24;
+var CURVE_HANDLE_MAX = 90;
+function drawNoteBody(g, w, h, colors) {
+  const f = 14;
+  g.append("path").attr(
+    "d",
+    `M0 2 a2 2 0 0 1 2 -2 h${w - f - 2} l${f} ${f} v${h - f - 2} a2 2 0 0 1 -2 2 h-${w - 4} a2 2 0 0 1 -2 -2 Z`
+  ).attr("fill", colors.fill).attr("stroke", colors.stroke).attr("stroke-width", NODE_STROKE_WIDTH);
+  g.append("path").attr("d", `M${w - f} 0 v${f} h${f}`).attr("fill", "none").attr("stroke", colors.stroke).attr("stroke-width", 1.2);
+}
+function drawTypeBadge(g, kind, color, bx, by) {
+  const b = g.append("g").attr("transform", `translate(${bx},${by})`).attr("fill", "none").attr("stroke", color).attr("stroke-width", 1.3).attr("stroke-linejoin", "round").attr("stroke-linecap", "round");
+  switch (kind) {
+    case "database":
+      b.append("ellipse").attr("cx", 8).attr("cy", 3).attr("rx", 6).attr("ry", 2.4);
+      b.append("path").attr("d", "M2 3 v10 a6 2.4 0 0 0 12 0 v-10");
+      return;
+    case "queue":
+      b.append("path").attr("d", "M3 1 h8 a3 6.5 0 0 1 0 13 h-8 Z");
+      b.append("ellipse").attr("cx", 3).attr("cy", 7.5).attr("rx", 3).attr("ry", 6.5);
+      return;
+    case "document":
+      b.append("path").attr("d", "M2 1 h9 v11 q-4.5 2 -9 0 q0 0 0 0 Z");
+      return;
+    case "person":
+      b.append("circle").attr("cx", 8).attr("cy", 5).attr("r", 3);
+      b.append("path").attr("d", "M2 15 a6 5 0 0 1 12 0");
+      return;
+    default:
+      return;
+  }
+}
+function metaRows(metadata, tagGroups) {
+  const rows = [];
+  for (const grp of tagGroups) {
+    const v = metadata[tagAttrKey(grp.name)];
+    if (v !== void 0) rows.push([grp.name, v]);
+  }
+  return rows;
+}
+var CARD_HEADER_H = 34;
+var CARD_LABEL_MAX = 15;
+var CARD_LABEL_MIN = 11;
+var CARD_META_FONT = 12;
+var CARD_TITLE_MAX = 30;
+function fitWrapped(label, maxWidth, maxFont = CARD_LABEL_MAX, minFont = CARD_LABEL_MIN, maxLines = 2) {
+  for (let fs = maxFont; fs >= minFont; fs--) {
+    const lines2 = wrapTextToWidth(label, fs, maxWidth, { hardBreak: true });
+    if (lines2.length <= maxLines) return { lines: lines2, fontSize: fs };
+  }
+  const lines = wrapTextToWidth(label, minFont, maxWidth, { hardBreak: true });
+  if (lines.length <= maxLines) return { lines, fontSize: minFont };
+  const kept = lines.slice(0, maxLines);
+  let last = kept[maxLines - 1];
+  while (last.length > 1 && measureText(`${last}\u2026`, minFont) > maxWidth)
+    last = last.slice(0, -1);
+  kept[maxLines - 1] = `${last}\u2026`;
+  return { lines: kept, fontSize: minFont };
+}
+function renderSketch(container, parsed, layout, palette, isDark, options = {}) {
+  const {
+    activeTagGroup,
+    exportMode = false,
+    hideDescriptions = false
+  } = options;
+  const hideDesc = hideDescriptions || parsed.options.noDescriptions;
+  const neutralFill = mix(palette.textMuted, palette.bg, 12);
+  const tagGroups = [...parsed.tagGroups];
+  const activeName = resolveActiveTagGroup(
+    tagGroups,
+    void 0,
+    activeTagGroup
+  );
+  const activeKey = activeName === null ? null : tagAttrKey(activeName);
+  const colorsFor = (metadata, isContainer = false) => {
+    const tagged = activeKey !== null && metadata[activeKey] !== void 0;
+    const tagColor = tagged ? resolveTagColor(metadata, tagGroups, activeName, isContainer) : void 0;
+    if (!tagColor) {
+      return {
+        fill: neutralFill,
+        stroke: palette.textMuted,
+        text: palette.text
+      };
+    }
+    const fill = shapeFill(palette, tagColor, isDark, {
+      solid: parsed.options.solidFill
+    });
+    return {
+      fill,
+      stroke: tagColor,
+      // Label text takes the shape's own (tag) color — but for solid fills the
+      // tag color would vanish into the fill, so keep a contrast color there.
+      text: parsed.options.solidFill ? contrastText(fill, palette.textOnFillLight, palette.textOnFillDark) : tagColor
+    };
+  };
+  const showTitle = !!parsed.title;
+  const titleOffset = showTitle ? 40 : 0;
+  const legendGroups = parsed.options.noLegend ? [] : tagGroups;
+  const contentWidth = layout.width + 2 * DIAGRAM_PADDING;
+  const width = Math.max(contentWidth, options.exportDims?.width ?? 0);
+  const legendHeight = legendGroups.length > 0 ? getMaxLegendReservedHeight(
+    {
+      groups: legendGroups,
+      position: { placement: "top-center", titleRelation: "below-title" },
+      mode: exportMode ? "export" : "preview"
+    },
+    width
+  ) : 0;
+  const contentTop = titleOffset + legendHeight + DIAGRAM_PADDING;
+  const height = Math.max(
+    contentTop + layout.height + DIAGRAM_PADDING,
+    options.exportDims?.height ?? 0
+  );
+  d3.select(container).selectAll("*").remove();
+  const svg = d3.select(container).append("svg").attr("width", width).attr("height", height).attr("viewBox", `0 0 ${width} ${height}`).style("font-family", FONT_FAMILY);
+  const defs = svg.append("defs");
+  const edgeColorFor = (metadata) => {
+    if (activeKey !== null && metadata[activeKey] !== void 0) {
+      const c = resolveTagColor(metadata, tagGroups, activeName);
+      if (c && c !== "#999999") return c;
+    }
+    return palette.textMuted;
+  };
+  const flowColor = (edge) => edgeColorFor(edge.metadata);
+  const edgeColors = new Set(layout.edges.map((e) => flowColor(e)));
+  for (const color of edgeColors) {
+    const hex = color.replace("#", "");
+    defs.append("marker").attr("id", `sk-arrow-${hex}`).attr("viewBox", `0 0 ${ARROWHEAD_W} ${ARROWHEAD_H}`).attr("refX", ARROWHEAD_W).attr("refY", ARROWHEAD_H / 2).attr("markerWidth", ARROWHEAD_W).attr("markerHeight", ARROWHEAD_H).attr("markerUnits", "userSpaceOnUse").attr("orient", "auto").append("polygon").attr("points", `0,0 ${ARROWHEAD_W},${ARROWHEAD_H / 2} 0,${ARROWHEAD_H}`).attr("fill", color);
+    defs.append("marker").attr("id", `sk-arrow-rev-${hex}`).attr("viewBox", `0 0 ${ARROWHEAD_W} ${ARROWHEAD_H}`).attr("refX", 0).attr("refY", ARROWHEAD_H / 2).attr("markerWidth", ARROWHEAD_W).attr("markerHeight", ARROWHEAD_H).attr("markerUnits", "userSpaceOnUse").attr("orient", "auto").append("polygon").attr(
+      "points",
+      `${ARROWHEAD_W},0 0,${ARROWHEAD_H / 2} ${ARROWHEAD_W},${ARROWHEAD_H}`
+    ).attr("fill", color);
+  }
+  if (showTitle) {
+    svg.append("text").attr("x", width / 2).attr("y", TITLE_Y).attr("text-anchor", "middle").attr("font-size", TITLE_FONT_SIZE).attr("font-weight", 700).attr("fill", palette.text).text(parsed.title);
+  }
+  if (legendGroups.length > 0) {
+    const legendG = svg.append("g").attr("transform", `translate(0,${titleOffset + 4})`);
+    renderIntegratedLegend(legendG, {
+      groups: legendGroups,
+      ...activeName !== null && { activeGroup: activeName },
+      mode: exportMode ? "export" : "preview",
+      showInactivePills: true,
+      palette,
+      isDark,
+      width
+    });
+    legendG.selectAll("[data-legend-group]").classed("sk-legend-group", true);
+  }
+  const contentX = DIAGRAM_PADDING + Math.max(0, (width - contentWidth) / 2);
+  const root = svg.append("g").attr("class", "sk-root").attr("transform", `translate(${contentX},${contentTop})`);
+  const rectById = /* @__PURE__ */ new Map();
+  for (const node of layout.nodes) {
+    rectById.set(node.id, { x: node.x, y: node.y, w: node.w, h: node.h });
+  }
+  for (const box of layout.boxes) {
+    rectById.set(box.id, { x: box.x, y: box.y, w: box.w, h: box.h });
+  }
+  const portsById = /* @__PURE__ */ new Map();
+  for (const box of layout.boxes) {
+    const kids = layout.nodes.filter((n) => n.boxLabel === box.label);
+    const ys = kids.map((k) => k.y + k.h / 2);
+    const xs = kids.map((k) => k.x + k.w / 2);
+    ys.push(box.y + box.h / 2);
+    xs.push(box.x + box.w / 2);
+    portsById.set(box.id, { ys, xs });
+  }
+  const boxLayer = root.append("g").attr("class", "sk-boxes");
+  for (const box of layout.boxes) {
+    drawBoxFrame(boxLayer, box, colorsFor(box.metadata, true), palette);
+  }
+  const edgeLayer = root.append("g").attr("class", "sk-edges");
+  const labelLayerData = [];
+  for (const edge of layout.edges) {
+    const source = rectById.get(edge.sourceId);
+    const target = rectById.get(edge.targetId);
+    if (!source || !target) continue;
+    const color = flowColor(edge);
+    const hex = color.replace("#", "");
+    const { d, mid } = edgePath(
+      source,
+      target,
+      portsById.get(edge.sourceId),
+      portsById.get(edge.targetId)
+    );
+    const g = edgeLayer.append("g").attr("class", "sk-edge-group").attr("data-from", edge.sourceId).attr("data-to", edge.targetId).attr("data-line-number", edge.lineNumber);
+    const path = g.append("path").attr("d", d).attr("fill", "none").attr("stroke", color).attr("stroke-width", EDGE_STROKE_WIDTH);
+    if (edge.dashed) path.attr("stroke-dasharray", DASH);
+    if (edge.heads === "one" || edge.heads === "both") {
+      path.attr("marker-end", `url(#sk-arrow-${hex})`);
+    }
+    if (edge.heads === "both") {
+      path.attr("marker-start", `url(#sk-arrow-rev-${hex})`);
+    }
+    g.append("path").attr("class", "sk-edge-hit").attr("d", d).attr("fill", "none").attr("stroke", "transparent").attr("stroke-width", EDGE_HIT_WIDTH).attr("stroke-linecap", "round").attr("pointer-events", "stroke");
+    if (edge.label) {
+      labelLayerData.push({
+        x: mid.x,
+        y: mid.y,
+        text: edge.label,
+        color,
+        from: edge.sourceId,
+        to: edge.targetId
+      });
+    }
+  }
+  const nodeLayer = root.append("g").attr("class", "sk-nodes");
+  for (const node of layout.nodes) {
+    let n = node;
+    if (hideDesc && node.description) {
+      n = { ...node };
+      delete n.description;
+    }
+    drawNode(
+      nodeLayer,
+      n,
+      colorsFor(node.metadata),
+      palette,
+      isDark,
+      hideDesc ? [] : tagGroups
+    );
+  }
+  const labelLayer = root.append("g").attr("class", "sk-edge-labels");
+  for (const l of labelLayerData) {
+    const g = labelLayer.append("g").attr("class", "sk-edge-label").attr("data-from", l.from).attr("data-to", l.to);
+    const textWidth = l.text.length * EDGE_LABEL_FONT_SIZE * 0.56;
+    g.append("rect").attr("x", l.x - textWidth / 2 - 3).attr("y", l.y - EDGE_LABEL_FONT_SIZE / 2 - 3).attr("width", textWidth + 6).attr("height", EDGE_LABEL_FONT_SIZE + 6).attr("rx", 3).attr("fill", palette.bg);
+    g.append("text").attr("x", l.x).attr("y", l.y).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-size", EDGE_LABEL_FONT_SIZE).attr("fill", l.color).text(l.text);
+  }
+  if (options.onClickItem) {
+    const handler = options.onClickItem;
+    svg.selectAll("[data-line-number]").on("click", function() {
+      const ln = Number(this.getAttribute("data-line-number"));
+      if (Number.isFinite(ln) && ln > 0) handler(ln);
+    });
+  }
+}
+function drawBoxFrame(layer, box, colors, palette) {
+  const g = layer.append("g").attr("class", "sk-box").attr("data-node-id", box.id).attr("data-group-toggle", box.label).attr("data-line-number", box.lineNumber);
+  g.append("rect").attr("x", box.x).attr("y", box.y).attr("width", box.w).attr("height", box.h).attr("rx", CONTAINER_RADIUS).attr("fill", colors.fill).attr("fill-opacity", 0.4).attr("stroke", colors.stroke).attr("stroke-opacity", 0.7).attr("stroke-width", NODE_STROKE_WIDTH);
+  const fit = fitWrapped(box.label, box.w - 16, BAND_LABEL_FONT_SIZE, 12, 2);
+  const lineH = fit.fontSize * 1.2;
+  const bandMid = box.y + box.bandH / 2;
+  const startY = bandMid - (fit.lines.length - 1) * lineH / 2;
+  for (let li = 0; li < fit.lines.length; li++) {
+    g.append("text").attr("x", box.x + box.w / 2).attr("y", startY + li * lineH).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-size", fit.fontSize).attr("font-weight", 800).attr("fill", palette.text).attr("opacity", BAND_LABEL_OPACITY).text(fit.lines[li]);
+  }
+}
+function drawNode(layer, node, colors, palette, isDark, tagGroups) {
+  void isDark;
+  const g = layer.append("g").attr("class", node.isCollapsedBox ? "sk-node sk-box-collapsed" : "sk-node").attr("transform", `translate(${node.x},${node.y})`).attr("data-node-id", node.id).attr("data-line-number", node.lineNumber);
+  for (const [k, v] of Object.entries(node.metadata)) {
+    g.attr(`data-tag-${k}`, v);
+  }
+  if (node.isCollapsedBox) {
+    g.attr("data-group-toggle", node.label);
+  }
+  if (node.shape === "note") {
+    drawNoteBody(g, node.w, node.h, colors);
+    const lines = wrapTextToWidth(node.label, NOTE_FONT_SIZE, node.w - 34);
+    const lineHeight = NOTE_FONT_SIZE + 4;
+    lines.slice(0, 5).forEach((line, i) => {
+      g.append("text").attr("x", 10).attr("y", 20 + i * lineHeight).attr("font-size", NOTE_FONT_SIZE).attr("fill", colors.text).text(line);
+    });
+  } else {
+    const rows = node.isCollapsedBox ? [] : metaRows(node.metadata, tagGroups);
+    const badge = node.shape !== "rectangle";
+    const labelInset = badge ? 22 : 0;
+    const solid = colors.stroke === colors.fill;
+    const ruleColor = solid ? colors.text : colors.stroke;
+    if (node.description && !node.isCollapsedBox) {
+      const fitH = fitWrapped(
+        node.label,
+        node.w - 24 - labelInset,
+        CARD_LABEL_MAX,
+        CARD_LABEL_MIN,
+        1
+      );
+      renderNodeCard(g, {
+        width: node.w,
+        height: node.h,
+        rx: CARD_RADIUS,
+        fill: colors.fill,
+        stroke: colors.stroke,
+        strokeWidth: NODE_STROKE_WIDTH,
+        label: fitH.lines[0] ?? node.label,
+        labelColor: colors.text,
+        labelFontSize: fitH.fontSize,
+        headerHeight: CARD_HEADER_H
+      });
+      g.append("line").attr("x1", 0).attr("y1", CARD_HEADER_H).attr("x2", node.w).attr("y2", CARD_HEADER_H).attr("stroke", ruleColor).attr("stroke-opacity", 0.3).attr("stroke-width", 1);
+      const inset = 12;
+      const bodyGap = 8;
+      const lh = CARD_META_FONT + 4;
+      const avail = node.h - CARD_HEADER_H - bodyGap - 8;
+      const body = g.append("g").attr("class", "sk-desc").attr("transform", `translate(${inset} ${CARD_HEADER_H + bodyGap})`);
+      drawMarkdownBlock(body, node.description, {
+        width: node.w - inset * 2,
+        fontSize: CARD_META_FONT,
+        lineHeight: lh,
+        color: colors.text,
+        // match the header label (contrast-aware in solid)
+        linkColor: colors.text,
+        maxLines: Math.max(1, Math.floor(avail / lh))
+      });
+      if (badge) {
+        drawTypeBadge(g, node.shape, colors.text, 10, (CARD_HEADER_H - 16) / 2);
+      }
+      return;
+    }
+    const headerH = rows.length ? CARD_HEADER_H : node.h;
+    const fillTitle = rows.length === 0;
+    const fit = fitWrapped(
+      node.label,
+      node.w - 24 - labelInset,
+      fillTitle ? CARD_TITLE_MAX : CARD_LABEL_MAX,
+      CARD_LABEL_MIN,
+      fillTitle ? 3 : 2
+    );
+    renderNodeCard(g, {
+      width: node.w,
+      height: node.h,
+      rx: CARD_RADIUS,
+      fill: colors.fill,
+      stroke: colors.stroke,
+      strokeWidth: NODE_STROKE_WIDTH,
+      label: fit.lines.join(" "),
+      labelLines: fit.lines,
+      labelColor: colors.text,
+      labelFontSize: fit.fontSize,
+      headerHeight: headerH,
+      ...rows.length ? {
+        meta: {
+          rows,
+          fontSize: CARD_META_FONT,
+          lineHeight: CARD_META_FONT + 5,
+          separatorGap: 8,
+          separatorColor: ruleColor,
+          textColor: solid ? colors.text : palette.text,
+          keyX: 12
+        }
+      } : {}
+    });
+    if (badge) {
+      drawTypeBadge(g, node.shape, colors.text, 10, (CARD_HEADER_H - 16) / 2);
+    }
+  }
+  if (node.isCollapsedBox) {
+    renderCollapseBar(g, {
+      width: node.w,
+      height: node.h,
+      barHeight: COLLAPSE_BAR_HEIGHT,
+      inset: 0,
+      rx: CARD_RADIUS,
+      fill: colors.stroke === palette.textMuted ? palette.textMuted : colors.stroke,
+      clipId: `sk-clip-${node.id.replace(/[^a-zA-Z0-9_-]/g, "")}-${node.lineNumber}`,
+      className: "sk-collapse-bar"
+    });
+  }
+}
+function edgePath(source, target, sourcePorts, targetPorts) {
+  const acx = source.x + source.w / 2;
+  const acy = source.y + source.h / 2;
+  const bcx = target.x + target.w / 2;
+  const bcy = target.y + target.h / 2;
+  const horiz = Math.abs(bcx - acx) >= Math.abs(bcy - acy);
+  let p0;
+  let p1;
+  let h0;
+  let h1;
+  const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
+  const CORNER_FRAC = 0.25;
+  const midClamp = (v, lo, hi) => {
+    const m = (hi - lo) * CORNER_FRAC;
+    return clamp(v, lo + m, hi - m);
+  };
+  const nearest = (arr, v) => arr.reduce((a, b) => Math.abs(b - v) < Math.abs(a - v) ? b : a, arr[0]);
+  if (horiz) {
+    const sign = bcx >= acx ? 1 : -1;
+    const y0 = sourcePorts ? midClamp(nearest(sourcePorts.ys, bcy), source.y, source.y + source.h) : acy;
+    const y1 = targetPorts ? midClamp(nearest(targetPorts.ys, acy), target.y, target.y + target.h) : bcy;
+    p0 = { x: sign > 0 ? source.x + source.w : source.x, y: y0 };
+    p1 = { x: sign > 0 ? target.x : target.x + target.w, y: y1 };
+    const k = Math.max(
+      CURVE_HANDLE_MIN,
+      Math.min(CURVE_HANDLE_MAX, Math.abs(p1.x - p0.x) / 2)
+    );
+    h0 = { x: p0.x + sign * k, y: p0.y };
+    h1 = { x: p1.x - sign * k, y: p1.y };
+  } else {
+    const sign = bcy >= acy ? 1 : -1;
+    const x0 = sourcePorts ? midClamp(nearest(sourcePorts.xs, bcx), source.x, source.x + source.w) : acx;
+    const x1 = targetPorts ? midClamp(nearest(targetPorts.xs, acx), target.x, target.x + target.w) : bcx;
+    p0 = { x: x0, y: sign > 0 ? source.y + source.h : source.y };
+    p1 = { x: x1, y: sign > 0 ? target.y : target.y + target.h };
+    const k = Math.max(
+      CURVE_HANDLE_MIN,
+      Math.min(CURVE_HANDLE_MAX, Math.abs(p1.y - p0.y) / 2)
+    );
+    h0 = { x: p0.x, y: p0.y + sign * k };
+    h1 = { x: p1.x, y: p1.y - sign * k };
+  }
+  return {
+    d: `M ${p0.x} ${p0.y} C ${h0.x} ${h0.y}, ${h1.x} ${h1.y}, ${p1.x} ${p1.y}`,
+    // Centered ON the line (no vertical offset): the opaque label halo masks
+    // the segment behind it cleanly, so the label reads as sitting on the line
+    // rather than floating awkwardly just above it.
+    mid: { x: (p0.x + p1.x) / 2, y: (p0.y + p1.y) / 2 }
+  };
+}
+function renderSketchForExport(container, parsed, layout, palette, isDark, options = {}) {
+  renderSketch(container, parsed, layout, palette, isDark, {
+    ...options,
+    exportMode: options.exportMode ?? true
+  });
+}
+
+export {
+  renderSketch,
+  renderSketchForExport
+};
+//# sourceMappingURL=chunk-6CLKNXVP.js.map

package/dist/{chunk-H6PI3KJT.js → chunk-6IUAK7RZ.js}

@@ -1,6 +1,6 @@
 import {
   measureText
-} from "./chunk-WCT3NYCV.js";
+} from "./chunk-5LWQH6QV.js";
 
 // src/wireframe/layout.ts
 var DESKTOP_WIDTH = 1200;
@@ -302,4 +302,4 @@ function computeFieldAlignX(children) {
 export {
   layoutWireframe
 };
-//# sourceMappingURL=chunk-H6PI3KJT.js.map
+//# sourceMappingURL=chunk-6IUAK7RZ.js.map