@diagrammo/dgmo 0.48.2 → 0.50.0

package/dist/chunk-3TDRHT4J.js

@@ -0,0 +1,1043 @@
+import {
+  renderCollapseBar,
+  renderNodeCard
+} from "./chunk-AHGF2YYA.js";
+import {
+  CARD_RADIUS,
+  CONTAINER_RADIUS
+} from "./chunk-3CIOJ5YJ.js";
+import {
+  renderIntegratedLegend
+} from "./chunk-QUJGFNFN.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-WCUHAQKB.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 edgeGeom = sketchEdgeGeometry(layout);
+  let minX = 0;
+  let minY = 0;
+  let maxX = layout.width;
+  let maxY = layout.height;
+  for (let i = 0; i < edgeGeom.length; i++) {
+    const g = edgeGeom[i];
+    if (!g) continue;
+    const nums = (g.d.match(/-?[\d.]+/g) ?? []).map(Number);
+    for (let k = 0; k + 1 < nums.length; k += 2) {
+      minX = Math.min(minX, nums[k]);
+      maxX = Math.max(maxX, nums[k]);
+      minY = Math.min(minY, nums[k + 1]);
+      maxY = Math.max(maxY, nums[k + 1]);
+    }
+    const label = layout.edges[i]?.label;
+    if (label) {
+      const hw = measureText(label, EDGE_LABEL_FONT_SIZE) / 2 + 6;
+      const hh = EDGE_LABEL_FONT_SIZE / 2 + 4;
+      minX = Math.min(minX, g.mid.x - hw);
+      maxX = Math.max(maxX, g.mid.x + hw);
+      minY = Math.min(minY, g.mid.y - hh);
+      maxY = Math.max(maxY, g.mid.y + hh);
+    }
+  }
+  const extraLeft = Math.max(0, -minX);
+  const extraTop = Math.max(0, -minY);
+  const boundW = maxX + extraLeft;
+  const contentWidth = boundW + 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 + extraTop;
+  const height = Math.max(
+    contentTop + maxY + 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 + extraLeft + Math.max(0, (width - contentWidth) / 2);
+  const root = svg.append("g").attr("class", "sk-root").attr("transform", `translate(${contentX},${contentTop})`);
+  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 (let ei = 0; ei < layout.edges.length; ei++) {
+    const edge = layout.edges[ei];
+    const geo = edgeGeom[ei];
+    if (!geo) continue;
+    const color = flowColor(edge);
+    const hex = color.replace("#", "");
+    const { d, mid } = geo;
+    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", geo.dRender ?? 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,
+        ei,
+        cp: (d.match(/-?[\d.]+/g) ?? []).map(Number)
+      });
+    }
+  }
+  {
+    const labelW = (t) => t.length * EDGE_LABEL_FONT_SIZE * 0.56;
+    const halfH = EDGE_LABEL_FONT_SIZE / 2 + 3;
+    const GAP = 4;
+    const shapeRects = [
+      ...layout.nodes.map((n) => ({ x: n.x, y: n.y, w: n.w, h: n.h })),
+      ...layout.boxes.map((b) => ({ x: b.x, y: b.y, w: b.w, h: b.h }))
+    ];
+    const cubicPt = (cp, t) => {
+      const u = 1 - t;
+      const a = u * u * u;
+      const b = 3 * u * u * t;
+      const c = 3 * u * t * t;
+      const dd = t * t * t;
+      return {
+        x: a * cp[0] + b * cp[2] + c * cp[4] + dd * cp[6],
+        y: a * cp[1] + b * cp[3] + c * cp[5] + dd * cp[7]
+      };
+    };
+    const allPolys = edgeGeom.map((g) => {
+      if (!g) return null;
+      const cp = (g.d.match(/-?[\d.]+/g) ?? []).map(Number);
+      if (cp.length < 8) return null;
+      const pts = [];
+      for (let s = 0; s <= 32; s++) pts.push(cubicPt(cp, s / 32));
+      return pts;
+    });
+    const covers = (cx, cy, hw, ox, oy, ohw, ohh) => Math.abs(cx - ox) < hw + ohw + GAP && Math.abs(cy - oy) < halfH + ohh + GAP;
+    const placed = [];
+    const TS = [0.5, 0.4, 0.6, 0.32, 0.68, 0.25, 0.75, 0.18, 0.82];
+    for (const l of labelLayerData) {
+      const hw = labelW(l.text) / 2 + 3;
+      let bestT = 0.5;
+      let bestScore = Infinity;
+      for (const t of TS) {
+        const p2 = cubicPt(l.cp, t);
+        let labelHits = 0;
+        for (const q of placed)
+          if (covers(p2.x, p2.y, hw, q.x, q.y, q.hw, halfH)) labelHits++;
+        let shapeHits = 0;
+        for (const r of shapeRects)
+          if (covers(p2.x, p2.y, hw, r.x + r.w / 2, r.y + r.h / 2, r.w / 2, r.h / 2))
+            shapeHits++;
+        let lineHits = 0;
+        for (let k = 0; k < allPolys.length; k++) {
+          if (k === l.ei) continue;
+          const poly = allPolys[k];
+          if (poly?.some((pt) => covers(p2.x, p2.y, hw, pt.x, pt.y, 0, 0)))
+            lineHits++;
+        }
+        if (labelHits === 0 && shapeHits === 0 && lineHits === 0) {
+          bestT = t;
+          break;
+        }
+        const score = labelHits * 10 + shapeHits * 6 + lineHits * 4 + Math.abs(t - 0.5);
+        if (score < bestScore) {
+          bestScore = score;
+          bestT = t;
+        }
+      }
+      const p = cubicPt(l.cp, bestT);
+      l.x = p.x;
+      l.y = p.y;
+      placed.push({ x: p.x, y: p.y, hw });
+    }
+  }
+  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);
+    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).attr("stroke", palette.bg).attr("stroke-width", 3).attr("stroke-linejoin", "round").attr("paint-order", "stroke").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 assignEdgeSides(edges, rectById) {
+  const cx = (r) => r.x + r.w / 2;
+  const cy = (r) => r.y + r.h / 2;
+  const facing = (dx, dy) => Math.abs(dx) >= Math.abs(dy) ? dx >= 0 ? "R" : "L" : dy >= 0 ? "B" : "T";
+  return edges.map((e) => {
+    const s = rectById.get(e.sourceId);
+    const t = rectById.get(e.targetId);
+    if (!s || !t) return null;
+    const dx = cx(t) - cx(s);
+    const dy = cy(t) - cy(s);
+    const xOverlap = Math.min(s.x + s.w, t.x + t.w) - Math.max(s.x, t.x);
+    const yOverlap = Math.min(s.y + s.h, t.y + t.h) - Math.max(s.y, t.y);
+    if (xOverlap >= 0 && xOverlap >= yOverlap) {
+      const below = dy >= 0;
+      return { s: below ? "B" : "T", t: below ? "T" : "B" };
+    }
+    if (yOverlap >= 0 && yOverlap >= xOverlap) {
+      const right = dx >= 0;
+      return { s: right ? "R" : "L", t: right ? "L" : "R" };
+    }
+    return { s: facing(dx, dy), t: facing(-dx, -dy) };
+  });
+}
+function edgePath(source, target, sSide, tSide, 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 clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
+  const nearest = (arr, v) => arr.reduce((a, b) => Math.abs(b - v) < Math.abs(a - v) ? b : a, arr[0]);
+  const attach = (side, rect, ports, toward) => {
+    if (side === "L" || side === "R") {
+      const x2 = side === "L" ? rect.x : rect.x + rect.w;
+      const y2 = ports ? clamp(nearest(ports.ys, toward.y), rect.y, rect.y + rect.h) : rect.y + rect.h / 2;
+      return { x: x2, y: y2 };
+    }
+    const y = side === "T" ? rect.y : rect.y + rect.h;
+    const x = ports ? clamp(nearest(ports.xs, toward.x), rect.x, rect.x + rect.w) : rect.x + rect.w / 2;
+    return { x, y };
+  };
+  const normal = (side) => side === "L" ? { x: -1, y: 0 } : side === "R" ? { x: 1, y: 0 } : side === "T" ? { x: 0, y: -1 } : { x: 0, y: 1 };
+  const p0 = attach(sSide, source, sourcePorts, { x: bcx, y: bcy });
+  const p1 = attach(tSide, target, targetPorts, { x: acx, y: acy });
+  const n0 = normal(sSide);
+  const n1 = normal(tSide);
+  const k = Math.max(
+    CURVE_HANDLE_MIN,
+    Math.min(CURVE_HANDLE_MAX, Math.hypot(p1.x - p0.x, p1.y - p0.y) / 2)
+  );
+  const h0 = { x: p0.x + n0.x * k, y: p0.y + n0.y * k };
+  const h1 = { x: p1.x + n1.x * k, y: p1.y + n1.y * 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 at its ARC midpoint (t=0.5 on the cubic), not the
+    // endpoint average: for a straight edge the two coincide, but for a curve
+    // that bulges out to route around a shape the arc midpoint sits at the
+    // bulge apex — in open space — while the endpoint average would land on the
+    // very shape the edge detoured past. The opaque halo masks the line behind.
+    mid: {
+      x: 0.125 * p0.x + 0.375 * h0.x + 0.375 * h1.x + 0.125 * p1.x,
+      y: 0.125 * p0.y + 0.375 * h0.y + 0.375 * h1.y + 0.125 * p1.y
+    },
+    p0,
+    h0,
+    h1,
+    p1
+  };
+}
+var SIDES = ["T", "B", "L", "R"];
+function cubicAt(g, t) {
+  const u = 1 - t;
+  const a = u * u * u;
+  const b = 3 * u * u * t;
+  const c = 3 * u * t * t;
+  const dd = t * t * t;
+  return {
+    x: a * g.p0.x + b * g.h0.x + c * g.h1.x + dd * g.p1.x,
+    y: a * g.p0.y + b * g.h0.y + c * g.h1.y + dd * g.p1.y
+  };
+}
+var EDGE_OBSTACLE_INSET = 6;
+var EDGE_SAMPLES = 24;
+var POLY_SAMPLES = 19;
+function polyline(g) {
+  const pts = [];
+  for (let i = 0; i <= POLY_SAMPLES; i++)
+    pts.push(cubicAt(g, i / POLY_SAMPLES));
+  return pts;
+}
+function segmentsCross(p, p2, q, q2) {
+  const o = (a, b, c) => (b.x - a.x) * (c.y - a.y) - (b.y - a.y) * (c.x - a.x);
+  const d1 = o(p, p2, q);
+  const d2 = o(p, p2, q2);
+  const d32 = o(q, q2, p);
+  const d4 = o(q, q2, p2);
+  return (d1 > 0 && d2 < 0 || d1 < 0 && d2 > 0) && (d32 > 0 && d4 < 0 || d32 < 0 && d4 > 0);
+}
+function polyCrossings(a, b) {
+  let n = 0;
+  for (let i = 0; i + 1 < a.length; i++)
+    for (let j = 0; j + 1 < b.length; j++)
+      if (segmentsCross(a[i], a[i + 1], b[j], b[j + 1])) n++;
+  return n;
+}
+function polyIntersection(a, b) {
+  for (let i = 0; i + 1 < a.length; i++) {
+    const p = a[i];
+    const p2 = a[i + 1];
+    for (let j = 0; j + 1 < b.length; j++) {
+      const q = b[j];
+      const q2 = b[j + 1];
+      if (!segmentsCross(p, p2, q, q2)) continue;
+      const rx = p2.x - p.x;
+      const ry = p2.y - p.y;
+      const sx = q2.x - q.x;
+      const sy = q2.y - q.y;
+      const denom = rx * sy - ry * sx;
+      if (denom === 0) continue;
+      const t = ((q.x - p.x) * sy - (q.y - p.y) * sx) / denom;
+      return { x: p.x + t * rx, y: p.y + t * ry };
+    }
+  }
+  return null;
+}
+var HOP_R = 7;
+function hoppedPath(g, hops) {
+  if (hops.length === 0) return null;
+  const N = 49;
+  const pts = [];
+  for (let s = 0; s <= N; s++) pts.push(cubicAt(g, s / N));
+  const onSeg = /* @__PURE__ */ new Map();
+  for (const hp of hops) {
+    let bestSeg = -1;
+    let bestD = Infinity;
+    let bestPt = null;
+    for (let k = 1; k <= N; k++) {
+      const a = pts[k - 1];
+      const b = pts[k];
+      const dx = b.x - a.x;
+      const dy = b.y - a.y;
+      const len2 = dx * dx + dy * dy || 1;
+      let f = ((hp.x - a.x) * dx + (hp.y - a.y) * dy) / len2;
+      f = Math.max(0, Math.min(1, f));
+      const px = a.x + f * dx;
+      const py = a.y + f * dy;
+      const d2 = Math.hypot(hp.x - px, hp.y - py);
+      if (d2 < bestD) {
+        bestD = d2;
+        bestSeg = k;
+        bestPt = { x: px, y: py };
+      }
+    }
+    if (bestSeg >= 3 && bestSeg <= N - 3 && bestPt && !onSeg.has(bestSeg))
+      onSeg.set(bestSeg, bestPt);
+  }
+  if (onSeg.size === 0) return null;
+  let d = `M ${pts[0].x} ${pts[0].y}`;
+  for (let k = 1; k <= N; k++) {
+    const a = pts[k - 1];
+    const b = pts[k];
+    const hp = onSeg.get(k);
+    if (hp) {
+      const segLen = Math.hypot(b.x - a.x, b.y - a.y) || 1;
+      const dir = { x: (b.x - a.x) / segLen, y: (b.y - a.y) / segLen };
+      let perp = { x: dir.y, y: -dir.x };
+      if (perp.y > 0) perp = { x: -perp.x, y: -perp.y };
+      const A = { x: hp.x - dir.x * HOP_R, y: hp.y - dir.y * HOP_R };
+      const B = { x: hp.x + dir.x * HOP_R, y: hp.y + dir.y * HOP_R };
+      const k1 = {
+        x: A.x + perp.x * HOP_R * 1.33,
+        y: A.y + perp.y * HOP_R * 1.33
+      };
+      const k2 = {
+        x: B.x + perp.x * HOP_R * 1.33,
+        y: B.y + perp.y * HOP_R * 1.33
+      };
+      d += ` L ${A.x} ${A.y} C ${k1.x} ${k1.y}, ${k2.x} ${k2.y}, ${B.x} ${B.y} L ${b.x} ${b.y}`;
+    } else {
+      d += ` L ${b.x} ${b.y}`;
+    }
+  }
+  return d;
+}
+function pathCrossings(g, obstacles) {
+  if (obstacles.length === 0) return 0;
+  let hits = 0;
+  for (let i = 1; i < EDGE_SAMPLES; i++) {
+    const p = cubicAt(g, i / EDGE_SAMPLES);
+    for (const r of obstacles) {
+      const x0 = r.x + EDGE_OBSTACLE_INSET;
+      const y0 = r.y + EDGE_OBSTACLE_INSET;
+      const x1 = r.x + r.w - EDGE_OBSTACLE_INSET;
+      const y1 = r.y + r.h - EDGE_OBSTACLE_INSET;
+      if (p.x >= x0 && p.x <= x1 && p.y >= y0 && p.y <= y1) {
+        hits++;
+        break;
+      }
+    }
+  }
+  return hits;
+}
+function sketchEdgeGeometry(layout, offsets) {
+  const off = (id) => offsets?.get(id) ?? { dx: 0, dy: 0 };
+  const rectById = /* @__PURE__ */ new Map();
+  for (const n of layout.nodes) {
+    const o = off(n.id);
+    rectById.set(n.id, { x: n.x + o.dx, y: n.y + o.dy, w: n.w, h: n.h });
+  }
+  for (const b of layout.boxes) {
+    const o = off(b.id);
+    rectById.set(b.id, { x: b.x + o.dx, y: b.y + o.dy, w: b.w, h: b.h });
+  }
+  const portsById = /* @__PURE__ */ new Map();
+  for (const box of layout.boxes) {
+    const o = off(box.id);
+    const kids = layout.nodes.filter((n) => n.boxLabel === box.label);
+    const ys = kids.map((k) => k.y + off(k.id).dy + k.h / 2);
+    const xs = kids.map((k) => k.x + off(k.id).dx + k.w / 2);
+    ys.push(box.y + o.dy + box.h / 2);
+    xs.push(box.x + o.dx + box.w / 2);
+    portsById.set(box.id, { ys, xs });
+  }
+  const sides = assignEdgeSides(layout.edges, rectById);
+  const boxIdByLabel = /* @__PURE__ */ new Map();
+  for (const b of layout.boxes) boxIdByLabel.set(b.label, b.id);
+  const boxOf = (id) => {
+    const n = layout.nodes.find((m) => m.id === id);
+    return n?.boxLabel ? boxIdByLabel.get(n.boxLabel) : void 0;
+  };
+  const obstacles = [];
+  for (const [id, rect] of rectById) obstacles.push({ id, rect });
+  const normalOf = (s) => s === "L" ? { x: -1, y: 0 } : s === "R" ? { x: 1, y: 0 } : s === "T" ? { x: 0, y: -1 } : { x: 0, y: 1 };
+  const facingCost = (from, to, side) => {
+    const dx = to.x + to.w / 2 - (from.x + from.w / 2);
+    const dy = to.y + to.h / 2 - (from.y + from.h / 2);
+    const len = Math.hypot(dx, dy) || 1;
+    const n = normalOf(side);
+    return 1 - (n.x * dx + n.y * dy) / len;
+  };
+  const ctx = layout.edges.map((edge) => {
+    const source = rectById.get(edge.sourceId);
+    const target = rectById.get(edge.targetId);
+    if (!source || !target) return null;
+    const exclude = new Set(
+      [
+        edge.sourceId,
+        edge.targetId,
+        boxOf(edge.sourceId),
+        boxOf(edge.targetId)
+      ].filter((x) => x !== void 0)
+    );
+    return {
+      source,
+      target,
+      sPorts: portsById.get(edge.sourceId),
+      tPorts: portsById.get(edge.targetId),
+      obstacleRects: obstacles.filter((o) => !exclude.has(o.id)).map((o) => o.rect),
+      adjacent: /* @__PURE__ */ new Set()
+    };
+  });
+  for (let a = 0; a < layout.edges.length; a++) {
+    for (let b = a + 1; b < layout.edges.length; b++) {
+      const ea = layout.edges[a];
+      const eb = layout.edges[b];
+      if (ea.sourceId === eb.sourceId || ea.sourceId === eb.targetId || ea.targetId === eb.sourceId || ea.targetId === eb.targetId) {
+        ctx[a]?.adjacent.add(b);
+        ctx[b]?.adjacent.add(a);
+      }
+    }
+  }
+  const W_NODE = 100;
+  const W_EDGE = 8;
+  const scoreOf = (c, g, poly, self, polys2, s, t) => {
+    let edgeCross = 0;
+    for (let j = 0; j < polys2.length; j++) {
+      if (j === self || c.adjacent.has(j)) continue;
+      const pj = polys2[j];
+      if (pj) edgeCross += polyCrossings(poly, pj);
+    }
+    return pathCrossings(g, c.obstacleRects) * W_NODE + edgeCross * W_EDGE + facingCost(c.source, c.target, s) + facingCost(c.target, c.source, t);
+  };
+  const chosen = layout.edges.map(
+    (_, i) => sides[i] ?? { s: "R", t: "L" }
+  );
+  const geoms = ctx.map(
+    (c, i) => c ? edgePath(
+      c.source,
+      c.target,
+      chosen[i].s,
+      chosen[i].t,
+      c.sPorts,
+      c.tPorts
+    ) : null
+  );
+  const polys = geoms.map((g) => g ? polyline(g) : null);
+  for (let pass = 0; pass < 3; pass++) {
+    let changed = false;
+    for (let i = 0; i < ctx.length; i++) {
+      const c = ctx[i];
+      const g = geoms[i];
+      const p = polys[i];
+      if (!c || !g || !p) continue;
+      const cur = chosen[i];
+      const curScore = scoreOf(c, g, p, i, polys, cur.s, cur.t);
+      if (curScore < W_EDGE) continue;
+      let bestScore = curScore;
+      let bestG = g;
+      let bestP = p;
+      let bestSide = cur;
+      for (const s of SIDES) {
+        for (const t of SIDES) {
+          const cg = edgePath(c.source, c.target, s, t, c.sPorts, c.tPorts);
+          const cp = polyline(cg);
+          const sc = scoreOf(c, cg, cp, i, polys, s, t);
+          if (sc < bestScore) {
+            bestScore = sc;
+            bestG = cg;
+            bestP = cp;
+            bestSide = { s, t };
+          }
+        }
+      }
+      if (bestSide !== cur) {
+        chosen[i] = bestSide;
+        geoms[i] = bestG;
+        polys[i] = bestP;
+        changed = true;
+      }
+    }
+    if (!changed) break;
+  }
+  const hopsFor = layout.edges.map(() => []);
+  for (let i = 0; i < polys.length; i++) {
+    for (let j = i + 1; j < polys.length; j++) {
+      if (ctx[i]?.adjacent.has(j)) continue;
+      const a = polys[i];
+      const b = polys[j];
+      if (!a || !b) continue;
+      const pt = polyIntersection(a, b);
+      if (pt) hopsFor[j].push(pt);
+    }
+  }
+  return layout.edges.map((edge, i) => {
+    const g = geoms[i];
+    if (!g) return null;
+    const dRender = hoppedPath(g, hopsFor[i]);
+    return {
+      sourceId: edge.sourceId,
+      targetId: edge.targetId,
+      d: g.d,
+      mid: g.mid,
+      ...dRender && { dRender }
+    };
+  });
+}
+function renderSketchForExport(container, parsed, layout, palette, isDark, options = {}) {
+  renderSketch(container, parsed, layout, palette, isDark, {
+    ...options,
+    exportMode: options.exportMode ?? true
+  });
+}
+
+export {
+  renderSketch,
+  sketchEdgeGeometry,
+  renderSketchForExport
+};
+//# sourceMappingURL=chunk-3TDRHT4J.js.map