@diagrammo/dgmo 0.75.0 → 0.77.0

package/dist/{chunk-U7AO6FRL.js → chunk-H7BYMIVK.js}

@@ -4,21 +4,37 @@ import {
 } from "./chunk-5GM6BZO7.js";
 import {
   CARD_RADIUS,
-  CONTAINER_RADIUS
+  COLLAPSE_BAR_HEIGHT,
+  CONTAINER_LABEL_FONT_SIZE,
+  CONTAINER_RADIUS,
+  EDGE_LABEL_KNOCKOUT_OPACITY,
+  EDGE_STROKE_WIDTH,
+  HEADER_HEIGHT,
+  LABEL_FONT_SIZE,
+  META_FONT_SIZE,
+  NODE_STROKE_WIDTH
 } from "./chunk-FJ57274M.js";
+import {
+  ScaleContext
+} from "./chunk-24YPR5EH.js";
 import {
   layoutInlineHeader
 } from "./chunk-MG3DE3VO.js";
+import {
+  TITLE_FONT_SIZE,
+  TITLE_FONT_WEIGHT,
+  TITLE_Y
+} from "./chunk-DEW62ON3.js";
 import {
   renderIntegratedLegend
-} from "./chunk-QT5UMFPE.js";
+} from "./chunk-U4DS2ODO.js";
 import {
   getLegendExtent,
   getMaxLegendReservedHeight
-} from "./chunk-4SXHMFFP.js";
+} from "./chunk-VRPV6QXR.js";
 import {
   FONT_FAMILY
-} from "./chunk-UTCPNJND.js";
+} from "./chunk-53SEVJQM.js";
 import {
   measureText,
   wrapTextToWidth
@@ -232,29 +248,152 @@ function drawMarkdownBlock(container, text, opts) {
   };
 }
 
+// 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 mix(palette.surface, palette.bg, 40);
+}
+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) {
+      return {
+        fill: sketchContainerFill(palette, isDark),
+        stroke: palette.textMuted,
+        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,
+  titleFontWeight: Number(TITLE_FONT_WEIGHT),
+  // 🔴 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: 5,
+  arrowheadH: 4,
+  dash: "6 3",
+  /** 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,
+  bandLabelFontWeight: 600,
+  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 = 20;
-var TITLE_Y = 32;
-var TITLE_FONT_SIZE = 18;
-var NODE_STROKE_WIDTH = 2;
-var EDGE_STROKE_WIDTH = 2;
+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 ARROWHEAD_W = 18;
-var ARROWHEAD_H = 12;
-var DASH = "6 3";
-var BAND_LABEL_FONT_SIZE = 19;
-var BAND_LABEL_OPACITY = 0.55;
+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 NOTE_FONT_SIZE = 11;
-var COLLAPSE_BAR_HEIGHT = 4;
-var EDGE_LABEL_FONT_SIZE = 12;
+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;
-function drawNoteBody(g, w, h, colors) {
+function drawNoteBody(g, w, h, colors, strokeWidth) {
   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);
+  ).attr("fill", colors.fill).attr("stroke", colors.stroke).attr("stroke-width", strokeWidth);
   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) {
@@ -279,12 +418,12 @@ function drawTypeBadge(g, kind, color, bx, by) {
       return;
   }
 }
-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) {
+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 fitWrapped(label, maxWidth, maxFont, minFont, maxLines = 2) {
   const BOLD = { hardBreak: true, bold: true };
   for (let fs = maxFont; fs >= minFont; fs--) {
     const lines2 = wrapTextToWidth(label, fs, maxWidth, BOLD);
@@ -307,7 +446,34 @@ function renderSketch(container, parsed, layout, palette, isDark, options = {})
     splitCardIds
   } = options;
   const hideDesc = hideDescriptions || parsed.options.noDescriptions;
-  const neutralFill = parsed.options.fillMode === "outline" ? themeBaseBg(palette, isDark) : mix(palette.textMuted, palette.bg, 12);
+  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 sNoteFontSize = sctx.text(NOTE_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,
+    noteFontSize: sNoteFontSize
+  };
   const tagGroups = [...parsed.tagGroups];
   const activeName = resolveActiveTagGroup(
     tagGroups,
@@ -315,27 +481,13 @@ function renderSketch(container, parsed, layout, palette, isDark, options = {})
     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, {
-      mode: parsed.options.fillMode
-    });
-    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.fillMode === "solid" ? contrastText(fill, palette.textOnFillLight, palette.textOnFillDark) : tagColor
-    };
-  };
+  const colorsFor = sketchColors({
+    palette,
+    isDark,
+    tagGroups,
+    activeTagGroup,
+    fillMode: parsed.options.fillMode
+  });
   const showTitle = !!parsed.title;
   const titleOffset = showTitle ? 40 : 0;
   const legendGroups = parsed.options.noLegend ? [] : tagGroups;
@@ -356,8 +508,8 @@ function renderSketch(container, parsed, layout, palette, isDark, options = {})
     }
     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;
+      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);
@@ -401,8 +553,8 @@ function renderSketch(container, parsed, layout, palette, isDark, options = {})
     containerWidth: width,
     titleBandHeight: titleOffset,
     legendReserve: legendHeight,
-    titleBaselineY: TITLE_Y,
-    titleFontSize: TITLE_FONT_SIZE
+    titleBaselineY: TITLE_Y2,
+    titleFontSize: sTitleFontSize
   });
   const contentTop = titleOffset + (header.inline ? 0 : legendHeight) + DIAGRAM_PADDING + extraTop;
   const height = Math.max(
@@ -423,14 +575,14 @@ function renderSketch(container, parsed, layout, palette, isDark, options = {})
   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(
+    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("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("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("class", "chart-title").attr("x", header.titleX).attr("y", TITLE_Y).attr("text-anchor", header.titleAnchor).attr("font-size", TITLE_FONT_SIZE).attr("font-weight", 700).attr("fill", palette.text).text(parsed.title);
+    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", 700).attr("fill", palette.text).text(parsed.title);
   }
   if (legendGroups.length > 0) {
     const legendG = svg.append("g").attr(
@@ -456,7 +608,7 @@ function renderSketch(container, parsed, layout, palette, isDark, options = {})
   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);
+    drawBoxFrame(boxLayer, box, colorsFor(box.metadata, true), palette, scaled);
   }
   const edgeLayer = root.append("g").attr("class", "sk-edges");
   const labelLayerData = [];
@@ -468,7 +620,7 @@ function renderSketch(container, parsed, layout, palette, isDark, options = {})
     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);
+    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})`);
@@ -491,12 +643,18 @@ function renderSketch(container, parsed, layout, palette, isDark, options = {})
     }
   }
   {
-    const labelW = (t) => t.length * EDGE_LABEL_FONT_SIZE * 0.56;
-    const halfH = EDGE_LABEL_FONT_SIZE / 2 + 3;
+    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) => ({ x: b.x, y: b.y, w: b.w, h: b.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;
@@ -518,42 +676,67 @@ function renderSketch(container, parsed, layout, palette, isDark, options = {})
       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 bestT = 0.5;
+      let best = cubicPt(l.cp, 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;
+      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;
+          }
         }
       }
-      const p = cubicPt(l.cp, bestT);
-      l.x = p.x;
-      l.y = p.y;
-      placed.push({ x: p.x, y: p.y, hw });
+      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");
@@ -569,13 +752,17 @@ function renderSketch(container, parsed, layout, palette, isDark, options = {})
       colorsFor(node.metadata),
       palette,
       isDark,
-      !hideDesc && (splitCardIds?.includes(node.id) ?? false)
+      !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);
-    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);
+    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;
@@ -585,18 +772,18 @@ function renderSketch(container, parsed, layout, palette, isDark, options = {})
     });
   }
 }
-function drawBoxFrame(layer, box, colors, palette) {
+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", 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);
+  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 + box.bandH / 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", 800).attr("fill", palette.text).attr("opacity", BAND_LABEL_OPACITY).text(fit.lines[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) {
+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)) {
@@ -606,11 +793,11 @@ function drawNode(layer, node, colors, palette, isDark, splitCard) {
     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;
+    drawNoteBody(g, node.w, node.h, colors, s.nodeStrokeWidth);
+    const lines = wrapTextToWidth(node.label, s.noteFontSize, node.w - 34);
+    const lineHeight = s.noteFontSize + 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);
+      g.append("text").attr("x", 10).attr("y", 20 + i * lineHeight).attr("font-size", s.noteFontSize).attr("fill", colors.text).text(line);
     });
   } else {
     const badge = node.shape !== "rectangle";
@@ -621,32 +808,32 @@ function drawNode(layer, node, colors, palette, isDark, splitCard) {
       const fitH = fitWrapped(
         node.label,
         node.w - 24 - labelInset,
-        CARD_LABEL_MAX,
-        CARD_LABEL_MIN,
+        s.cardLabelMax,
+        s.cardLabelMin,
         1
       );
       renderNodeCard(g, {
         width: node.w,
         height: node.h,
-        rx: CARD_RADIUS,
+        rx: s.cardRadius,
         fill: colors.fill,
         stroke: colors.stroke,
-        strokeWidth: NODE_STROKE_WIDTH,
+        strokeWidth: s.nodeStrokeWidth,
         label: fitH.lines[0] ?? node.label,
         labelColor: colors.text,
         labelFontSize: fitH.fontSize,
-        headerHeight: CARD_HEADER_H
+        headerHeight: s.cardHeaderH
       });
-      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);
+      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 = 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})`);
+        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: CARD_META_FONT,
+          fontSize: s.cardMetaFont,
           lineHeight: lh,
           color: colors.text,
           // match the header label (contrast-aware in solid)
@@ -659,24 +846,24 @@ function drawNode(layer, node, colors, palette, isDark, splitCard) {
         }
       }
       if (badge) {
-        drawTypeBadge(g, node.shape, colors.text, 10, (CARD_HEADER_H - 16) / 2);
+        drawTypeBadge(g, node.shape, colors.text, 10, (s.cardHeaderH - 16) / 2);
       }
       return;
     }
     const fit = fitWrapped(
       node.label,
       node.w - 24 - labelInset,
-      CARD_TITLE_MAX,
-      CARD_LABEL_MIN,
+      s.cardTitleMax,
+      s.cardLabelMin,
       3
     );
     renderNodeCard(g, {
       width: node.w,
       height: node.h,
-      rx: CARD_RADIUS,
+      rx: s.cardRadius,
       fill: colors.fill,
       stroke: colors.stroke,
-      strokeWidth: NODE_STROKE_WIDTH,
+      strokeWidth: s.nodeStrokeWidth,
       label: fit.lines.join(" "),
       labelLines: fit.lines,
       labelColor: colors.text,
@@ -684,16 +871,16 @@ function drawNode(layer, node, colors, palette, isDark, splitCard) {
       headerHeight: node.h
     });
     if (badge) {
-      drawTypeBadge(g, node.shape, colors.text, 10, (CARD_HEADER_H - 16) / 2);
+      drawTypeBadge(g, node.shape, colors.text, 10, (s.cardHeaderH - 16) / 2);
     }
   }
   if (node.isCollapsedBox) {
     renderCollapseBar(g, {
       width: node.w,
       height: node.h,
-      barHeight: COLLAPSE_BAR_HEIGHT,
+      barHeight: s.collapseBarHeight,
       inset: 0,
-      rx: CARD_RADIUS,
+      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"
@@ -1123,8 +1310,15 @@ function renderSketchForExport(container, parsed, layout, palette, isDark, optio
 }
 
 export {
+  CONTAINER_FILL_OPACITY,
+  CONTAINER_STROKE_OPACITY,
+  CONTAINER_STROKE_WIDTH,
+  sketchContainerFill,
+  sketchNeutralFill,
+  sketchColors,
+  SKETCH_VISUALS,
   renderSketch,
   sketchEdgeGeometry,
   renderSketchForExport
 };
-//# sourceMappingURL=chunk-U7AO6FRL.js.map
+//# sourceMappingURL=chunk-H7BYMIVK.js.map