@diagrammo/dgmo 0.76.0 → 0.78.0

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

@@ -1,39 +1,63 @@
+import {
+  appendArrowheadMarkers,
+  appendReverseArrowheadMarkers
+} from "./chunk-XBJJP2HN.js";
 import {
   renderCollapseBar,
   renderNodeCard
-} from "./chunk-5GM6BZO7.js";
+} from "./chunk-4AWLEWSD.js";
+import {
+  ScaleContext
+} from "./chunk-24YPR5EH.js";
 import {
+  ARROWHEAD_HEIGHT,
+  ARROWHEAD_WIDTH,
   CARD_RADIUS,
-  CONTAINER_RADIUS
-} from "./chunk-FJ57274M.js";
+  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-IIEI7VK5.js";
 import {
   layoutInlineHeader
-} from "./chunk-MG3DE3VO.js";
+} from "./chunk-FLMXJMMY.js";
+import {
+  TITLE_FONT_SIZE,
+  TITLE_FONT_WEIGHT,
+  TITLE_Y
+} from "./chunk-VSPNH7LC.js";
 import {
   renderIntegratedLegend
-} from "./chunk-QT5UMFPE.js";
+} from "./chunk-67I3HFSF.js";
 import {
   getLegendExtent,
   getMaxLegendReservedHeight
-} from "./chunk-4SXHMFFP.js";
+} from "./chunk-IZTU6WVR.js";
 import {
   FONT_FAMILY
-} from "./chunk-UTCPNJND.js";
+} from "./chunk-ICLB27PZ.js";
 import {
   measureText,
   wrapTextToWidth
 } from "./chunk-MTGGOCND.js";
 import {
+  UNTAGGED_TAG_COLOR,
   resolveActiveTagGroup,
   resolveTagColor,
   tagAttrKey
-} from "./chunk-76LHNLGX.js";
+} from "./chunk-R4YGH7DJ.js";
 import {
   contrastText,
   mix,
   shapeFill,
   themeBaseBg
-} from "./chunk-GLREDNBA.js";
+} from "./chunk-YVLTNNME.js";
 
 // src/sketch/renderer.ts
 import * as d3 from "d3-selection";
@@ -232,29 +256,180 @@ 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,
+  // 🔴 `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 = 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 +454,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 +482,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 +517,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 +544,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 +589,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(
@@ -415,22 +603,26 @@ function renderSketch(container, parsed, layout, palette, isDark, options = {})
   const edgeColorFor = (metadata) => {
     if (activeKey !== null && metadata[activeKey] !== void 0) {
       const c = resolveTagColor(metadata, tagGroups, activeName);
-      if (c && c !== "#999999") return c;
+      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)));
-  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 (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_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", "bold").attr("fill", palette.text).text(parsed.title);
   }
   if (legendGroups.length > 0) {
     const legendG = svg.append("g").attr(
@@ -456,7 +648,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 +660,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 +683,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 +716,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 +792,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 +812,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 +833,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 +848,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 +886,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 +911,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 +1350,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-ENDB5YSV.js.map