@diagrammo/dgmo 0.95.0 → 0.96.0

package/dist/chunk-VBMRZCMQ.js

@@ -1,1465 +0,0 @@
-import {
-  renderCollapseBar,
-  renderNodeCard
-} from "./chunk-R2K5L4UA.js";
-import {
-  appendArrowheadMarkers,
-  appendReverseArrowheadMarkers
-} from "./chunk-XBJJP2HN.js";
-import {
-  ScaleContext
-} from "./chunk-24YPR5EH.js";
-import {
-  layoutInlineHeader
-} from "./chunk-UIEKW4SG.js";
-import {
-  TITLE_FONT_SIZE,
-  TITLE_FONT_WEIGHT,
-  TITLE_Y
-} from "./chunk-VLC6WNRD.js";
-import {
-  ARROWHEAD_HEIGHT,
-  ARROWHEAD_WIDTH,
-  CARD_RADIUS,
-  COLLAPSE_BAR_HEIGHT,
-  CONTAINER_LABEL_FONT_SIZE,
-  CONTAINER_RADIUS,
-  EDGE_DASH,
-  EDGE_LABEL_KNOCKOUT_OPACITY,
-  EDGE_STROKE_WIDTH,
-  HEADER_HEIGHT,
-  LABEL_FONT_SIZE,
-  META_FONT_SIZE,
-  NODE_STROKE_WIDTH
-} from "./chunk-XCKNFFKM.js";
-import {
-  renderIntegratedLegend
-} from "./chunk-NMS5XSLX.js";
-import {
-  getLegendExtent,
-  getMaxLegendReservedHeight
-} from "./chunk-JILEYZ2V.js";
-import {
-  FONT_FAMILY
-} from "./chunk-ICLB27PZ.js";
-import {
-  UNTAGGED_TAG_COLOR,
-  resolveActiveTagGroup,
-  resolveGroupTagColor,
-  resolveTagColor,
-  tagAttrKey
-} from "./chunk-4SACN2C5.js";
-import {
-  fitWrapped,
-  measureText
-} from "./chunk-KAO7JL4I.js";
-import {
-  contrastText,
-  groupFill,
-  groupStroke,
-  mix,
-  shapeFill,
-  themeBaseBg
-} from "./chunk-6GXLAKUH.js";
-
-// src/sketch/renderer.ts
-import * as d3 from "d3-selection";
-
-// src/sketch/markdown-card.ts
-var INDENT_PX = 12;
-var BULLET_HANG_PX = 12;
-var ELLIPSIS = "\u2026";
-var BULLET = "\u2022";
-function segWidth(seg, fontSize) {
-  return measureText(seg.text, fontSize, { bold: seg.bold });
-}
-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 && !opts.noEllipsis) {
-      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 {
-    height: shown.length * lineHeight,
-    shown: shown.length,
-    total: visualLines.length
-  };
-}
-
-// src/sketch/colors.ts
-var CONTAINER_FILL_OPACITY = 1;
-var CONTAINER_STROKE_OPACITY = 0.35;
-var CONTAINER_STROKE_WIDTH = 1;
-function sketchContainerFill(palette, isDark) {
-  return groupFill(palette, isDark);
-}
-function sketchNeutralFill(palette, isDark, fillMode) {
-  return fillMode === "outline" ? themeBaseBg(palette, isDark) : mix(palette.textMuted, palette.bg, 12);
-}
-function sketchColors(opts) {
-  const { palette, isDark, fillMode } = opts;
-  const neutralFill = sketchNeutralFill(palette, isDark, fillMode);
-  const tagGroups = [...opts.tagGroups];
-  const activeName = resolveActiveTagGroup(
-    tagGroups,
-    void 0,
-    opts.activeTagGroup ?? void 0
-  );
-  const activeKey = activeName === null ? null : tagAttrKey(activeName);
-  return (metadata, isContainer = false) => {
-    if (isContainer) {
-      const groupColor = resolveGroupTagColor(metadata, tagGroups, activeName);
-      return {
-        fill: groupFill(palette, isDark, groupColor),
-        stroke: groupStroke(palette, groupColor),
-        text: palette.text
-      };
-    }
-    const tagged = activeKey !== null && metadata[activeKey] !== void 0;
-    const tagColor = tagged ? resolveTagColor(metadata, tagGroups, activeName, isContainer) : void 0;
-    if (!tagColor) {
-      return {
-        fill: neutralFill,
-        // 🔴 The same expression `boxes-and-lines` gives an untagged node
-        // (`renderer.ts`): a softened text colour, not `palette.textMuted`.
-        // Muted is a good deal darker, and at the shared stroke width it made
-        // an untagged sketch card the most heavily outlined object in the
-        // product (2026-08-27).
-        stroke: mix(palette.text, palette.bg, isDark ? 60 : 40),
-        text: palette.text
-      };
-    }
-    const fill = shapeFill(palette, tagColor, isDark, { mode: fillMode });
-    return {
-      fill,
-      stroke: tagColor,
-      // 🔴 CONTRAST-DERIVED, like every other chart type. This took the tag
-      // colour itself in the default and `outline` modes, which made sketch the
-      // only chart in the product whose labels are tinted — and on the 25% blend
-      // a card is filled with, that is pale-green text on a pale-green card.
-      // `boxes-and-lines` and `org` both derive it from the fill and land on one
-      // of two neutral tokens; sketch now does the same, in every mode rather
-      // than only `solid`.
-      text: contrastText(fill, palette.textOnFillLight, palette.textOnFillDark)
-    };
-  };
-}
-
-// src/sketch/visuals.ts
-var SKETCH_VISUALS = {
-  /** Air round the whole diagram. */
-  diagramPadding: 20,
-  // 🔴 SHARED, not a second answer. Sketch printed its title at 18/y-32 while
-  // every other chart type used 20/y-30 from `utils/title-constants` — so two
-  // diagrams of the same content, side by side, did not even agree on how big
-  // their own name was (2026-08-27, #518).
-  titleY: TITLE_Y,
-  titleFontSize: TITLE_FONT_SIZE,
-  // 🔴 `bold` AS A NUMBER, and never `Number('bold')` — which is `NaN`, which is
-  // what this shipped. Every other consumer of `TITLE_FONT_WEIGHT` writes it
-  // straight into an SVG attribute, where the string is valid; this one is read
-  // as a VALUE by the desktop canvas, which puts it on an SVG attribute AND on
-  // an input's inline style, so it has to be a weight rather than a word.
-  //
-  // The result was `font-weight="NaN"` on every sketch title — silently
-  // rendered at the default weight, so a sketch's name was the one title in the
-  // product that was not bold, and nothing failed. Found 2026-08-29 by an app
-  // test asserting the drawn weight, which had been red on it.
-  //
-  // The comparison rather than a bare `700` so that changing the shared
-  // constant is a type error here instead of another silent coercion.
-  //
-  // ⚠️ Widened back to `number`. Without the assertion the literal `700` leaks
-  // into the published type surface — `check:api` caught it on the push — and a
-  // consumer would then be typed against this exact weight rather than against
-  // "a weight", which is the opposite of what a shared constant is for.
-  titleFontWeight: TITLE_FONT_WEIGHT === "bold" ? 700 : 400,
-  // 🔴 SHARED, not overridden. These read 2 and 2 against the conventions'
-  // 1.5, under a comment claiming "a bolder, less-washed look" — and the
-  // boldness was the complaint: a sketch beside a boxes-and-lines or an org
-  // chart of the same content did not look like the same product (2026-08-27).
-  // Sketch is not in the deviation list `visual-conventions.ts` keeps, either,
-  // so the override was drift rather than a decision anyone had recorded.
-  nodeStrokeWidth: NODE_STROKE_WIDTH,
-  edgeStrokeWidth: EDGE_STROKE_WIDTH,
-  // 🔴 A FILLED polygon, not an open V — and sized in STROKE-WIDTHS, like every
-  // other chart type. These read 18×12 in USER SPACE, which is 2.4× the ink
-  // boxes-and-lines puts on the same 1.5px connector, and it was the loudest
-  // single difference between the two pictures (#518). `markerUnits` defaults
-  // to `strokeWidth`, so 5×4 here renders 7.5×6 — the same triangle
-  // boxes-and-lines draws.
-  arrowheadW: ARROWHEAD_WIDTH,
-  arrowheadH: ARROWHEAD_HEIGHT,
-  dash: EDGE_DASH,
-  /** A card's name. Shared, and it fits DOWN to `nodeLabelFontSizeMin` before
-   *  it wraps — it used to be allowed up to 30 on a card with no rows, which is
-   *  more than twice what any other chart type prints. */
-  nodeLabelFontSize: LABEL_FONT_SIZE,
-  nodeLabelFontSizeMin: 11,
-  /** A card's description rows. */
-  cardMetaFontSize: META_FONT_SIZE,
-  /** A card's header band. */
-  cardHeaderHeight: HEADER_HEIGHT,
-  // 🔴 A container's own name: shared size, and `600` is what boxes-and-lines
-  // gives the same object (org gives it bold). It was 19 at weight 800 behind
-  // 0.55 opacity — bigger than a node's name, and the only container label in
-  // the product that was faded.
-  // 🔴 SHARED, and it stays shared even though boxes-and-lines prints 14 here.
-  // Going to 14 to match it was tried and reverted (#518): `sketch` keeps the
-  // rule that a container's name is never LOUDER than the names inside it, and
-  // one point is imperceptible next to the differences that actually made the
-  // two pictures look like different products (footprint, arrowheads, title).
-  // boxes-and-lines' 14 — and infra's — are the undocumented deviations here;
-  // the fix is those two coming to 13, not a third chart type leaving.
-  bandLabelFontSize: CONTAINER_LABEL_FONT_SIZE,
-  // 🔴 A WEIGHT, never the word — the same defect `titleFontWeight` carries
-  //  the note for, one property along. `'bold'` is valid on the SVG attribute
-  //  this renderer writes it to, and invalid everywhere a consumer needs a
-  //  number: the app's live canvas puts a container band's weight on an
-  //  `<input>`'s inline style and into a `fontWeight: number` slot, so it had
-  //  to translate the word back to 700 itself and typecheck went red on main
-  //  when it did not (#537, 2026-08-29). 700 is what `'bold'` already drew —
-  //  this changes the type, not the picture. `as number` for the same reason
-  //  `titleFontWeight` carries it: the literal would otherwise leak into the
-  //  published type surface and `check:api` fails on it.
-  bandLabelFontWeight: 700,
-  bandLabelOpacity: 1,
-  /** 11 — what boxes-and-lines prints. It was 12, the only edge label in the
-   *  product at that size. */
-  edgeLabelFontSize: 11,
-  /** The `palette.bg` halo painted under an edge label so the connector cannot
-   *  cross its glyphs. Stroke, with `paint-order: stroke`. */
-  edgeLabelHaloWidth: 3,
-  cardRadius: CARD_RADIUS,
-  containerRadius: CONTAINER_RADIUS
-};
-
-// src/sketch/renderer.ts
-var DIAGRAM_PADDING = SKETCH_VISUALS.diagramPadding;
-var TITLE_Y2 = SKETCH_VISUALS.titleY;
-var TITLE_FONT_SIZE2 = SKETCH_VISUALS.titleFontSize;
-var NODE_STROKE_WIDTH2 = SKETCH_VISUALS.nodeStrokeWidth;
-var EDGE_STROKE_WIDTH2 = SKETCH_VISUALS.edgeStrokeWidth;
-var EDGE_HIT_WIDTH = 18;
-var EDGE_LABEL_H_PAD = 6;
-var EDGE_LABEL_V_PAD = 3;
-var CONTAINER_LABEL_BASELINE = 18;
-var ARROWHEAD_W = SKETCH_VISUALS.arrowheadW;
-var ARROWHEAD_H = SKETCH_VISUALS.arrowheadH;
-var DASH = SKETCH_VISUALS.dash;
-var BAND_LABEL_FONT_SIZE = SKETCH_VISUALS.bandLabelFontSize;
-var BAND_LABEL_OPACITY = SKETCH_VISUALS.bandLabelOpacity;
-var BAND_LABEL_WEIGHT = SKETCH_VISUALS.bandLabelFontWeight;
-var COLLAPSE_BAR_HEIGHT2 = COLLAPSE_BAR_HEIGHT;
-var EDGE_LABEL_FONT_SIZE = SKETCH_VISUALS.edgeLabelFontSize;
-var CURVE_HANDLE_MIN = 24;
-var CURVE_HANDLE_MAX = 90;
-var CARD_HEADER_H = SKETCH_VISUALS.cardHeaderHeight;
-var CARD_LABEL_MAX = SKETCH_VISUALS.nodeLabelFontSize;
-var CARD_LABEL_MIN = SKETCH_VISUALS.nodeLabelFontSizeMin;
-var CARD_META_FONT = SKETCH_VISUALS.cardMetaFontSize;
-var CARD_TITLE_MAX = SKETCH_VISUALS.nodeLabelFontSize;
-function renderSketch(container, parsed, layout, palette, isDark, options = {}) {
-  const {
-    activeTagGroup,
-    exportMode = false,
-    hideDescriptions = false,
-    splitCardIds
-  } = options;
-  const hideDesc = hideDescriptions || parsed.options.noDescriptions;
-  const sctx = ScaleContext.identity();
-  const sTitleFontSize = sctx.text(TITLE_FONT_SIZE2);
-  const sEdgeLabelFontSize = sctx.text(EDGE_LABEL_FONT_SIZE);
-  const sBandLabelFontSize = sctx.text(BAND_LABEL_FONT_SIZE);
-  const sCardLabelMax = sctx.text(CARD_LABEL_MAX);
-  const sCardLabelMin = sctx.text(CARD_LABEL_MIN);
-  const sCardMetaFont = sctx.text(CARD_META_FONT);
-  const sCardTitleMax = sctx.text(CARD_TITLE_MAX);
-  const sNodeStrokeWidth = sctx.structural(NODE_STROKE_WIDTH2);
-  const sEdgeStrokeWidth = sctx.structural(EDGE_STROKE_WIDTH2);
-  const sCardRadius = sctx.structural(CARD_RADIUS);
-  const sContainerRadius = sctx.structural(CONTAINER_RADIUS);
-  const sCardHeaderH = sctx.structural(CARD_HEADER_H);
-  const sCollapseBarHeight = sctx.structural(COLLAPSE_BAR_HEIGHT2);
-  const scaled = {
-    nodeStrokeWidth: sNodeStrokeWidth,
-    cardRadius: sCardRadius,
-    containerRadius: sContainerRadius,
-    cardHeaderH: sCardHeaderH,
-    collapseBarHeight: sCollapseBarHeight,
-    cardLabelMax: sCardLabelMax,
-    cardLabelMin: sCardLabelMin,
-    cardMetaFont: sCardMetaFont,
-    cardTitleMax: sCardTitleMax,
-    bandLabelFontSize: sBandLabelFontSize
-  };
-  const tagGroups = [...parsed.tagGroups];
-  const activeName = resolveActiveTagGroup(
-    tagGroups,
-    void 0,
-    activeTagGroup
-  );
-  const activeKey = activeName === null ? null : tagAttrKey(activeName);
-  const colorsFor = sketchColors({
-    palette,
-    isDark,
-    tagGroups,
-    activeTagGroup,
-    fillMode: parsed.options.fillMode
-  });
-  const showTitle = !!parsed.title && !parsed.options.noTitle;
-  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, sEdgeLabelFontSize) / 2 + 6;
-      const hh = sEdgeLabelFontSize / 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 hasLegend = legendGroups.length > 0;
-  const inlineRequested = parsed.options.legendInline === true;
-  const legendExtent = inlineRequested && hasLegend ? getLegendExtent(
-    {
-      groups: legendGroups,
-      position: {
-        placement: "top-center",
-        titleRelation: "inline-with-title"
-      },
-      mode: exportMode ? "export" : "preview",
-      showInactivePills: true
-    },
-    { activeGroup: activeName },
-    width
-  ) : { width: 0, height: 0 };
-  const header = layoutInlineHeader({
-    requested: inlineRequested,
-    title: parsed.title ?? "",
-    hasLegend,
-    legendWidth: legendExtent.width,
-    legendHeight: legendExtent.height,
-    containerWidth: width,
-    titleBandHeight: titleOffset,
-    legendReserve: legendHeight,
-    titleBaselineY: TITLE_Y2,
-    titleFontSize: sTitleFontSize
-  });
-  const contentTop = titleOffset + (header.inline ? 0 : 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 !== UNTAGGED_TAG_COLOR) return c;
-    }
-    return palette.textMuted;
-  };
-  const flowColor = (edge) => edgeColorFor(edge.metadata);
-  const edgeColors = new Set(layout.edges.map((e) => flowColor(e)));
-  if (edgeColors.size > 0) {
-    const markerOpts = {
-      idPrefix: "sk",
-      width: ARROWHEAD_W,
-      height: ARROWHEAD_H,
-      // Every marker is per-colour here; the base id is never referenced.
-      baseFill: [...edgeColors][0],
-      colors: edgeColors
-    };
-    appendArrowheadMarkers(defs, markerOpts);
-    appendReverseArrowheadMarkers(defs, markerOpts);
-  }
-  if (showTitle) {
-    svg.append("text").attr("class", "chart-title").attr("x", header.titleX).attr("y", TITLE_Y2).attr("text-anchor", header.titleAnchor).attr("font-size", sTitleFontSize).attr("font-weight", "bold").attr("fill", palette.text).text(parsed.title);
-  }
-  if (legendGroups.length > 0) {
-    const legendG = svg.append("g").attr(
-      "transform",
-      header.inline ? `translate(${header.legendX}, ${header.legendY})` : `translate(0,${titleOffset + 4})`
-    );
-    renderIntegratedLegend(legendG, {
-      groups: legendGroups,
-      ...activeName !== null && { activeGroup: activeName },
-      mode: exportMode ? "export" : "preview",
-      showInactivePills: true,
-      position: {
-        placement: "top-center",
-        titleRelation: header.inline ? "inline-with-title" : "below-title"
-      },
-      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, scaled);
-  }
-  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", sEdgeStrokeWidth);
-    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 * sEdgeLabelFontSize * 0.56;
-    const halfH = sEdgeLabelFontSize / 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) => ({
-        // The band the name is drawn in, not the frame below it.
-        x: b.x,
-        y: b.y,
-        w: b.w,
-        h: b.bandH
-      }))
-    ];
-    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 normalAt = (cp, t) => {
-      const e = 0.01;
-      const a = cubicPt(cp, Math.max(0, t - e));
-      const b = cubicPt(cp, Math.min(1, t + e));
-      const dx = b.x - a.x;
-      const dy = b.y - a.y;
-      const len = Math.hypot(dx, dy);
-      return len === 0 ? { x: 0, y: -1 } : { x: -dy / len, y: dx / len };
-    };
-    const placed = [];
-    const TS = [0.5, 0.4, 0.6, 0.32, 0.68, 0.25, 0.75, 0.18, 0.82];
-    const PERP_STEP = 8;
-    const PERP_MAX = 40;
-    const PERP_OFFSETS = [0];
-    for (let d = PERP_STEP; d <= PERP_MAX; d += PERP_STEP)
-      PERP_OFFSETS.push(d, -d);
-    for (const l of labelLayerData) {
-      const hw = labelW(l.text) / 2 + 3;
-      let best = cubicPt(l.cp, 0.5);
-      let bestScore = Infinity;
-      search: for (const perp of PERP_OFFSETS) {
-        const n = perp === 0 ? { x: 0, y: 0 } : normalAt(l.cp, 0.5);
-        for (const t of TS) {
-          const base = cubicPt(l.cp, t);
-          const p = { x: base.x + n.x * perp, y: base.y + n.y * perp };
-          let labelHits = 0;
-          for (const q of placed)
-            if (covers(p.x, p.y, hw, q.x, q.y, q.hw, halfH)) labelHits++;
-          let shapeHits = 0;
-          for (const r of shapeRects)
-            if (covers(
-              p.x,
-              p.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(p.x, p.y, hw, pt.x, pt.y, 0, 0)))
-              lineHits++;
-          }
-          if (labelHits === 0 && shapeHits === 0 && lineHits === 0) {
-            best = p;
-            break search;
-          }
-          const score = labelHits * 10 + shapeHits * 6 + lineHits * 4 + Math.abs(t - 0.5) + Math.abs(perp) / PERP_MAX;
-          if (score < bestScore) {
-            bestScore = score;
-            best = p;
-          }
-        }
-      }
-      l.x = best.x;
-      l.y = best.y;
-      placed.push({ x: best.x, y: best.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 && (splitCardIds?.includes(node.id) ?? false),
-      scaled
-    );
-  }
-  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 plateW = measureText(l.text, sEdgeLabelFontSize) + EDGE_LABEL_H_PAD * 2;
-    const plateH = sEdgeLabelFontSize * 1.3 + EDGE_LABEL_V_PAD * 2;
-    g.append("rect").attr("x", l.x - plateW / 2).attr("y", l.y - plateH / 2).attr("width", plateW).attr("height", plateH).attr("rx", 3).attr("fill", palette.bg).attr("opacity", EDGE_LABEL_KNOCKOUT_OPACITY);
-    g.append("text").attr("x", l.x).attr("y", l.y).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-size", sEdgeLabelFontSize).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, s) {
-  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", s.containerRadius).attr("fill", colors.fill).attr("fill-opacity", CONTAINER_FILL_OPACITY).attr("stroke", colors.stroke).attr("stroke-opacity", CONTAINER_STROKE_OPACITY).attr("stroke-width", CONTAINER_STROKE_WIDTH);
-  const fit = fitWrapped(box.label, box.w - 16, s.bandLabelFontSize, 12, 2);
-  const lineH = fit.fontSize * 1.2;
-  const bandMid = box.y + CONTAINER_LABEL_BASELINE;
-  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", BAND_LABEL_WEIGHT).attr("fill", palette.text).attr("opacity", BAND_LABEL_OPACITY).text(fit.lines[li]);
-  }
-}
-function drawNode(layer, node, colors, palette, isDark, splitCard, s) {
-  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-${tagAttrKey(k)}`, v);
-  }
-  if (node.isCollapsedBox) {
-    g.attr("data-group-toggle", node.label);
-  }
-  const solidLike = colors.stroke === colors.fill;
-  const ruleColor = solidLike ? colors.text : colors.stroke;
-  if (!node.isCollapsedBox && (node.description || splitCard)) {
-    const fitH = fitWrapped(
-      node.label,
-      node.w - 24,
-      s.cardLabelMax,
-      s.cardLabelMin,
-      1
-    );
-    renderNodeCard(g, {
-      width: node.w,
-      height: node.h,
-      rx: s.cardRadius,
-      fill: colors.fill,
-      stroke: colors.stroke,
-      strokeWidth: s.nodeStrokeWidth,
-      label: fitH.lines[0] ?? node.label,
-      labelColor: colors.text,
-      labelFontSize: fitH.fontSize,
-      headerHeight: s.cardHeaderH
-    });
-    g.append("line").attr("x1", 0).attr("y1", s.cardHeaderH).attr("x2", node.w).attr("y2", s.cardHeaderH).attr("stroke", ruleColor).attr("stroke-opacity", 0.3).attr("stroke-width", 1);
-    if (node.description) {
-      const inset = 12;
-      const bodyGap = 8;
-      const lh = s.cardMetaFont + 4;
-      const avail = node.h - s.cardHeaderH - bodyGap - 8;
-      const body = g.append("g").attr("class", "sk-desc").attr("transform", `translate(${inset} ${s.cardHeaderH + bodyGap})`);
-      const block = drawMarkdownBlock(body, node.description, {
-        width: node.w - inset * 2,
-        fontSize: s.cardMetaFont,
-        lineHeight: lh,
-        color: colors.text,
-        // match the header label (contrast-aware in solid)
-        linkColor: colors.text,
-        maxLines: Math.max(1, Math.floor(avail / lh)),
-        noEllipsis: true
-      });
-      if (block.total > block.shown) {
-        g.append("text").attr("class", "sk-desc-more").attr("x", node.w - 8).attr("y", node.h - 5).attr("text-anchor", "end").attr("font-size", 9).attr("fill", palette.textMuted).attr("data-line-number", node.lineNumber).style("cursor", "pointer").text(`+${block.total - block.shown} more in source`);
-      }
-    }
-    return;
-  }
-  const fit = fitWrapped(
-    node.label,
-    node.w - 24,
-    s.cardTitleMax,
-    s.cardLabelMin,
-    3
-  );
-  renderNodeCard(g, {
-    width: node.w,
-    height: node.h,
-    rx: s.cardRadius,
-    fill: colors.fill,
-    stroke: colors.stroke,
-    strokeWidth: s.nodeStrokeWidth,
-    label: fit.lines.join(" "),
-    labelLines: fit.lines,
-    labelColor: colors.text,
-    labelFontSize: fit.fontSize,
-    headerHeight: node.h
-  });
-  if (node.isCollapsedBox) {
-    renderCollapseBar(g, {
-      width: node.w,
-      height: node.h,
-      barHeight: s.collapseBarHeight,
-      inset: 0,
-      rx: s.cardRadius,
-      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, ends) {
-  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 = ends?.p0 ?? attach(sSide, source, sourcePorts, { x: bcx, y: bcy });
-  const p1 = ends?.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 polyIntersections(a, b) {
-  const out = [];
-  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;
-      out.push({ x: p.x + t * rx, y: p.y + t * ry });
-    }
-  }
-  return out;
-}
-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 cum = [0];
-  for (let k2 = 1; k2 <= N; k2++) {
-    const a = pts[k2 - 1];
-    const b = pts[k2];
-    cum.push(cum[k2 - 1] + Math.hypot(b.x - a.x, b.y - a.y));
-  }
-  const total = cum[N];
-  const at = (len) => {
-    let k2 = 1;
-    while (k2 < N && cum[k2] < len) k2++;
-    const a = pts[k2 - 1];
-    const b = pts[k2];
-    const span = cum[k2] - cum[k2 - 1] || 1;
-    const f = Math.max(0, Math.min(1, (len - cum[k2 - 1]) / span));
-    return { x: a.x + f * (b.x - a.x), y: a.y + f * (b.y - a.y) };
-  };
-  const centres = [];
-  for (const hp of hops) {
-    let bestD = Infinity;
-    let bestLen = 0;
-    for (let k2 = 1; k2 <= N; k2++) {
-      const a = pts[k2 - 1];
-      const b = pts[k2];
-      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 d2 = Math.hypot(hp.x - (a.x + f * dx), hp.y - (a.y + f * dy));
-      if (d2 < bestD) {
-        bestD = d2;
-        bestLen = cum[k2 - 1] + f * (cum[k2] - cum[k2 - 1]);
-      }
-    }
-    centres.push(bestLen);
-  }
-  const clear = Math.max(2 * HOP_R, 3 * total / N);
-  const kept = [];
-  for (const c of centres.sort((x, y) => x - y)) {
-    if (c < clear || c > total - clear) continue;
-    if (kept.length > 0 && c - kept[kept.length - 1] < 2 * HOP_R) continue;
-    kept.push(c);
-  }
-  if (kept.length === 0) return null;
-  let d = `M ${pts[0].x} ${pts[0].y}`;
-  let k = 1;
-  for (const c of kept) {
-    const s0 = c - HOP_R;
-    const s1 = c + HOP_R;
-    while (k <= N && cum[k] < s0) {
-      d += ` L ${pts[k].x} ${pts[k].y}`;
-      k++;
-    }
-    const A = at(s0);
-    const B = at(s1);
-    const chord = Math.hypot(B.x - A.x, B.y - A.y) || 1;
-    const dir = { x: (B.x - A.x) / chord, y: (B.y - A.y) / chord };
-    let perp = { x: dir.y, y: -dir.x };
-    if (perp.y > 0) perp = { x: -perp.x, y: -perp.y };
-    const lift = chord / 2 * 1.33;
-    d += ` L ${A.x} ${A.y} C ${A.x + perp.x * lift} ${A.y + perp.y * lift}, ${B.x + perp.x * lift} ${B.y + perp.y * lift}, ${B.x} ${B.y}`;
-    while (k <= N && cum[k] <= s1) k++;
-  }
-  for (; k <= N; k++) d += ` L ${pts[k].x} ${pts[k].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 W_BACK = 2.6;
-  const backFacingCost = (from, to, side) => W_BACK * Math.max(0, facingCost(from, to, side) - 1);
-  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 W_PORT = 1.5;
-  const W_PORT_SAME = 0.6;
-  const isBox = (id) => portsById.has(id);
-  const portClashCount = (self, s, t) => {
-    const e = layout.edges[self];
-    let n = 0;
-    for (let j = 0; j < layout.edges.length; j++) {
-      if (j === self) continue;
-      const ej = layout.edges[j];
-      const cj = chosen[j];
-      if (!isBox(e.sourceId) && ej.targetId === e.sourceId && ej.sourceId !== e.targetId && // not reciprocal
-      cj.t === s)
-        n++;
-      if (!isBox(e.targetId) && ej.sourceId === e.targetId && ej.targetId !== e.sourceId && // not reciprocal
-      cj.s === t)
-        n++;
-    }
-    return n;
-  };
-  const portStackCount = (self, _s, t) => {
-    const e = layout.edges[self];
-    if (isBox(e.targetId)) return 0;
-    let n = 0;
-    for (let j = 0; j < layout.edges.length; j++) {
-      if (j === self) continue;
-      const ej = layout.edges[j];
-      if (ej.targetId === e.targetId && ej.sourceId !== e.sourceId && // not reciprocal
-      chosen[j].t === t)
-        n++;
-    }
-    return n;
-  };
-  const W_TURN = 0.55;
-  const W_SCURVE = 1.8;
-  const CURVE_STRAIGHT = 0.35;
-  const curveCostPoly = (pts) => {
-    let totalTurn = 0;
-    let inflections = 0;
-    let prevSign = 0;
-    for (let i = 1; i < pts.length - 1; i++) {
-      const ax = pts[i].x - pts[i - 1].x;
-      const ay = pts[i].y - pts[i - 1].y;
-      const bx = pts[i + 1].x - pts[i].x;
-      const by = pts[i + 1].y - pts[i].y;
-      const cross = ax * by - ay * bx;
-      const dot = ax * bx + ay * by;
-      if (ax === 0 && ay === 0) continue;
-      if (bx === 0 && by === 0) continue;
-      totalTurn += Math.abs(Math.atan2(cross, dot));
-      const sign = cross > 1e-6 ? 1 : cross < -1e-6 ? -1 : 0;
-      if (sign !== 0) {
-        if (prevSign !== 0 && sign !== prevSign) inflections++;
-        prevSign = sign;
-      }
-    }
-    return totalTurn * W_TURN + inflections * W_SCURVE;
-  };
-  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 + portClashCount(self, s, t) * W_PORT + portStackCount(self, s, t) * W_PORT_SAME + curveCostPoly(poly) + facingCost(c.source, c.target, s) + facingCost(c.target, c.source, t) + backFacingCost(c.source, c.target, s) + backFacingCost(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 && portClashCount(i, cur.s, cur.t) === 0 && portStackCount(i, cur.s, cur.t) === 0 && curveCostPoly(p) < CURVE_STRAIGHT && backFacingCost(c.source, c.target, cur.s) === 0 && backFacingCost(c.target, c.source, cur.t) === 0)
-        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 FAN_GAP_MAX = 32;
-  const fanSides = /* @__PURE__ */ new Map();
-  for (let i = 0; i < layout.edges.length; i++) {
-    const g = geoms[i];
-    if (!g) continue;
-    const e = layout.edges[i];
-    const ch = chosen[i];
-    const ends = [
-      { id: e.sourceId, side: ch.s, end: "p0", at: g.p0, far: g.p1 },
-      { id: e.targetId, side: ch.t, end: "p1", at: g.p1, far: g.p0 }
-    ];
-    for (const en of ends) {
-      if (isBox(en.id)) continue;
-      const n = normalOf(en.side);
-      const along = en.side === "T" || en.side === "B";
-      const dx = en.far.x - en.at.x;
-      const dy = en.far.y - en.at.y;
-      const proj = along ? dx : dy;
-      const key = Math.atan2(proj, dx * n.x + dy * n.y);
-      const k = `${en.side}:${en.id}`;
-      const list = fanSides.get(k) ?? [];
-      list.push({ edge: i, end: en.end, at: en.at, key, proj });
-      fanSides.set(k, list);
-    }
-  }
-  const fanned = layout.edges.map(() => ({}));
-  let anyFanned = false;
-  for (const [k, list] of fanSides) {
-    const count = list.length;
-    if (count < 2) continue;
-    const along = k[0] === "T" || k[0] === "B";
-    const c = ctx[list[0].edge];
-    const rect = list[0].end === "p0" ? c.source : c.target;
-    const len = along ? rect.w : rect.h;
-    const gap = Math.min(len / (count + 1), FAN_GAP_MAX);
-    const span = (count - 1) / 2 * gap;
-    const reach = len / 2 - gap / 2;
-    list.sort(
-      (a, b) => a.key - b.key || a.edge - b.edge || (a.end < b.end ? -1 : 1)
-    );
-    const runs = [];
-    const place = (r) => Math.max(
-      -reach,
-      Math.min(reach - (r.n - 1) * gap, r.an > 0 ? r.as / r.an : r.ls / r.ln)
-    );
-    for (const f of list) {
-      const aligned = Math.abs(f.proj) <= span;
-      const d = Math.max(-span, Math.min(span, f.proj));
-      const run = aligned ? { n: 1, an: 1, as: d, ln: 0, ls: 0, at: 0 } : { n: 1, an: 0, as: 0, ln: 1, ls: d, at: 0 };
-      run.at = place(run);
-      runs.push(run);
-      while (runs.length > 1) {
-        const cur = runs[runs.length - 1];
-        const prev = runs[runs.length - 2];
-        if (prev.at + prev.n * gap <= cur.at) break;
-        runs.pop();
-        prev.as += cur.as - cur.an * prev.n * gap;
-        prev.ls += cur.ls - cur.ln * prev.n * gap;
-        prev.an += cur.an;
-        prev.ln += cur.ln;
-        prev.n += cur.n;
-        prev.at = place(prev);
-      }
-    }
-    let idx = 0;
-    for (const run of runs) {
-      for (let m = 0; m < run.n; m++, idx++) {
-        const f = list[idx];
-        const off2 = run.at + m * gap;
-        fanned[f.edge][f.end] = along ? { x: f.at.x + off2, y: f.at.y } : { x: f.at.x, y: f.at.y + off2 };
-      }
-    }
-    anyFanned = true;
-  }
-  if (anyFanned) {
-    for (let i = 0; i < ctx.length; i++) {
-      const c = ctx[i];
-      const f = fanned[i];
-      if (!c || !f.p0 && !f.p1) continue;
-      const g = edgePath(
-        c.source,
-        c.target,
-        chosen[i].s,
-        chosen[i].t,
-        c.sPorts,
-        c.tPorts,
-        f
-      );
-      geoms[i] = g;
-      polys[i] = polyline(g);
-    }
-  }
-  const SHARED_END_CLEAR = 2 * HOP_R;
-  const endsAt = (i, id) => {
-    const e = layout.edges[i];
-    const g = geoms[i];
-    const out = [];
-    if (e.sourceId === id) out.push(g.p0);
-    if (e.targetId === id) out.push(g.p1);
-    return out;
-  };
-  const hopsFor = layout.edges.map(() => []);
-  const hopsOn = layout.edges.map(() => []);
-  for (let i = 0; i < polys.length; i++) {
-    for (let j = i + 1; j < polys.length; j++) {
-      const a = polys[i];
-      const b = polys[j];
-      if (!a || !b) continue;
-      if (!ctx[i]?.adjacent.has(j)) {
-        const pt2 = polyIntersections(a, b)[0];
-        if (pt2) {
-          hopsFor[j].push(pt2);
-          hopsOn[i].push(pt2);
-          hopsOn[j].push(pt2);
-        }
-        continue;
-      }
-      const ei = layout.edges[i];
-      const ej = layout.edges[j];
-      const shared = [ei.sourceId, ei.targetId].filter(
-        (id) => id === ej.sourceId || id === ej.targetId
-      );
-      const nearShared = shared.flatMap((id) => [
-        ...endsAt(i, id),
-        ...endsAt(j, id)
-      ]);
-      const pt = polyIntersections(a, b).find(
-        (p) => nearShared.every(
-          (q) => Math.hypot(p.x - q.x, p.y - q.y) > SHARED_END_CLEAR
-        )
-      );
-      if (pt) {
-        hopsFor[j].push(pt);
-        hopsOn[i].push(pt);
-        hopsOn[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 },
-      ...hopsOn[i].length > 0 && { hops: hopsOn[i] },
-      p0: g.p0,
-      h0: g.h0,
-      h1: g.h1,
-      p1: g.p1
-    };
-  });
-}
-var HOP_LABEL_CLEAR = HOP_R + 2;
-function sketchLabelSpot(g, halfW, halfH) {
-  const hops = g.hops ?? [];
-  if (hops.length === 0) return g.mid;
-  const clear = (p) => hops.every(
-    (h) => Math.abs(p.x - h.x) >= halfW + HOP_LABEL_CLEAR || Math.abs(p.y - h.y) >= halfH + HOP_LABEL_CLEAR
-  );
-  if (clear(g.mid)) return g.mid;
-  for (let step = 1; step <= 18; step++) {
-    for (const t of [0.5 - step * 0.02, 0.5 + step * 0.02]) {
-      const p = cubicAt(g, t);
-      if (clear(p)) return p;
-    }
-  }
-  return g.mid;
-}
-function renderSketchForExport(container, parsed, layout, palette, isDark, options = {}) {
-  renderSketch(container, parsed, layout, palette, isDark, {
-    ...options,
-    exportMode: options.exportMode ?? true
-  });
-}
-
-export {
-  CONTAINER_FILL_OPACITY,
-  CONTAINER_STROKE_OPACITY,
-  CONTAINER_STROKE_WIDTH,
-  sketchContainerFill,
-  sketchNeutralFill,
-  sketchColors,
-  SKETCH_VISUALS,
-  renderSketch,
-  sketchEdgeGeometry,
-  sketchLabelSpot,
-  renderSketchForExport
-};