@diagrammo/dgmo 0.31.0 → 0.32.0

package/gallery/fixtures/boxes-and-lines.dgmo

@@ -1,7 +1,7 @@
 boxes-and-lines E-Commerce Platform
 
-tag Team t Backend blue, Frontend green, Platform purple
-tag Priority p High red, Medium orange, Low gray
+tag Team as t Backend blue, Frontend green, Platform purple
+tag Priority as p High red, Medium orange, Low gray
 
 active-tag Team
 hide priority:Low

package/gallery/fixtures/c4-full.dgmo

@@ -14,12 +14,16 @@ tag Team as t
 
 Customer is a person t: Frontend
   description: Browses and purchases books online
+  -Browses catalog-> Bookstore
 
 Admin is a person t: Backend
   description: Manages inventory and orders
+  -Manages inventory-> Bookstore
 
 Bookstore is a system t: Backend
   description: Core e-commerce platform for book sales
+  -Processes payments via-> PaymentGW tech: REST
+  ~Sends order confirmations~> EmailSvc tech: SMTP
   containers
     WebApp is a container tech: React, t: Frontend
       description: Single-page storefront application
@@ -45,8 +49,3 @@ PaymentGW is a system t: Platform
 
 EmailSvc is a system t: Platform
   description: SendGrid — transactional email delivery
-
-Customer -Browses catalog-> Bookstore
-Admin -Manages inventory-> Bookstore
-Bookstore -Processes payments via-> PaymentGW tech: REST
-Bookstore ~Sends order confirmations~> EmailSvc tech: SMTP

package/gallery/fixtures/c4.dgmo

@@ -2,9 +2,11 @@ c4 Internet Banking System
 
 Customer is a person
   description: A customer of the bank
+  -Uses-> Banking
 
 Banking is a system
   description: Core internet banking system
+  -Sends emails via-> Email
   containers
     WebApp is a container tech: React
     API is a container tech: Node.js
@@ -12,6 +14,3 @@ Banking is a system
 
 Email is a system
   description: External email delivery service
-
-Customer -Uses-> Banking
-Banking -Sends emails via-> Email

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diagrammo/dgmo",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "description": "DGMO diagram markup language — parser, renderer, and color system",
   "license": "MIT",
   "repository": {
@@ -111,6 +111,7 @@
     "dev": "DGMO_DEV_RELOAD=1 tsup --watch",
     "pretest": "pnpm codegen",
     "test": "vitest run --coverage",
+    "bench:perf": "vitest run --config vitest.perf.config.ts tests/perf-bench.ts",
     "bench:bl": "vitest run --config vitest.bench.config.ts tests/bl-layout-bench.ts",
     "bench:bl-collapse": "vitest run --config vitest.bench.config.ts tests/bl-collapse-bench.ts",
     "bench:bl-options": "vitest run --config vitest.bench.config.ts tests/bl-options.ts",
@@ -157,6 +158,11 @@
     "lz-string": "^1.5.0",
     "topojson-client": "^3.1.0"
   },
+  "pnpm": {
+    "overrides": {
+      "undici": "^7.28.0"
+    }
+  },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.3",
     "@codemirror/language": "^6.12.3",

package/src/advanced.ts

@@ -278,6 +278,8 @@ export {
 
 export { collapseBoxesAndLines } from './boxes-and-lines/collapse';
 export type { BLCollapseResult } from './boxes-and-lines/collapse';
+export { focusBoxesAndLines } from './boxes-and-lines/focus';
+export type { FocusTarget, FocusResult } from './boxes-and-lines/focus';
 
 export { parseSitemap, looksLikeSitemap } from './sitemap/parser';
 
@@ -705,6 +707,11 @@ export {
   seriesColors,
   RECOGNIZED_COLOR_NAMES,
   isRecognizedColorName,
+  INVALID_COLOR_CODE,
+  nearestNamedColor,
+  isInvalidColorToken,
+  invalidColorDiagnostic,
+  INVALID_CSS_COLOR_HEX,
 } from './colors';
 
 export {

package/src/boxes-and-lines/focus.ts

@@ -0,0 +1,257 @@
+// ============================================================
+// Boxes and Lines — Focus (1-hop neighborhood) Transform
+// ============================================================
+//
+// Pure transform that filters a parsed boxes-and-lines diagram down to a single
+// focused element plus its direct (1-hop) graph neighbours, mirroring the shape
+// of `org/collapse.ts#focusOrgTree` but for a general graph instead of a tree.
+//
+// Unlike the org tree (subtree extraction), boxes-and-lines is a general graph,
+// so "focus" = the focused element + everything one edge away. Neighbour groups
+// come back COLLAPSED (reusing `collapseBoxesAndLines`'s edge-redirect + dedup),
+// the focused group comes back EXPANDED, and everything else is hidden.
+//
+// Composition: this owns ALL collapse decisions for the focused view, so it is
+// fed the un-(manually-)collapsed parsed model — focus supersedes the user's
+// manual collapse selection for its duration (Decision 12). It runs after
+// tag-hide in the app pipeline (FM10).
+
+import type { ParsedBoxesAndLines, BLGroup, BLEdge } from './types';
+import { collapseBoxesAndLines } from './collapse';
+
+const GROUP_PREFIX = '__group_';
+const groupKey = (label: string): string => `${GROUP_PREFIX}${label}`;
+const isGroupKey = (k: string): boolean => k.startsWith(GROUP_PREFIX);
+const groupLabelOf = (k: string): string => k.slice(GROUP_PREFIX.length);
+
+export interface FocusTarget {
+  readonly kind: 'box' | 'group';
+  /** Canonical endpoint key the parser uses for edges: a node label for a box,
+   *  or `__group_<label>` for a group. */
+  readonly id: string;
+}
+
+export interface FocusResult {
+  /** Filtered model to lay out + render (neighbour groups already collapsed via
+   *  `collapseBoxesAndLines`; `nodePositions` cleared so the subset auto-lays). */
+  readonly parsed: ParsedBoxesAndLines;
+  /** Canonical keys of the 1-hop neighbours kept in view (box labels +
+   *  `__group_<label>` for neighbour groups). */
+  readonly neighborIds: Set<string>;
+  /** Group LABELS of neighbours rendered collapsed. */
+  readonly collapsedNeighborGroupIds: Set<string>;
+  /** GLOBAL value-ramp domain computed from the ORIGINAL model before filtering
+   *  (Decision 20 / FM1); null when the diagram has no `value:` data. */
+  readonly rampDomain: { min: number; max: number } | null;
+  /** Collapse metadata for `layoutBoxesAndLines` so neighbour groups materialise
+   *  as collapsed boxes — mirrors the manual-collapse path's `collapseInfo`. */
+  readonly collapseInfo: {
+    collapsedChildCounts: Map<string, number>;
+    originalGroups: readonly BLGroup[];
+  };
+}
+
+/**
+ * Filter `parsed` to the focused element + its 1-hop neighbours.
+ *
+ * Pure, synchronous, no I/O. Tolerant of dangling/alias endpoints (skips them,
+ * never throws). For an edge-less target it returns the lone element (the app
+ * decides the "no connections" affordance, Decision 19).
+ */
+export function focusBoxesAndLines(
+  parsed: ParsedBoxesAndLines,
+  target: FocusTarget
+): FocusResult {
+  // ── Step 1: GLOBAL ramp domain, computed BEFORE any filtering (Dec 20/FM1) ──
+  const allValues = parsed.nodes
+    .filter((n) => n.value !== undefined)
+    .map((n) => n.value!);
+  const rampDomain =
+    allValues.length > 0
+      ? { min: Math.min(...allValues), max: Math.max(...allValues) }
+      : null;
+
+  // ── Lookups ──
+  const nodeLabelSet = new Set(parsed.nodes.map((n) => n.label));
+  const groupByLabel = new Map<string, BLGroup>();
+  for (const g of parsed.groups) groupByLabel.set(g.label, g);
+  // child label (node or sub-group) → its direct parent group label
+  const parentOf = new Map<string, string>();
+  for (const g of parsed.groups)
+    for (const child of g.children) parentOf.set(child, g.label);
+
+  /** Top-most ancestor group of a node/group label (undefined if top-level). */
+  const topAncestor = (label: string): string | undefined => {
+    let p = parentOf.get(label);
+    if (p === undefined) return undefined;
+    for (;;) {
+      const up = parentOf.get(p);
+      if (up === undefined) return p;
+      p = up;
+    }
+  };
+
+  /** All descendant node + sub-group labels of a group (recursive, cycle-safe). */
+  const descendantsOf = (
+    groupLabel: string
+  ): { nodes: Set<string>; groups: Set<string> } => {
+    const nodes = new Set<string>();
+    const groups = new Set<string>();
+    const seen = new Set<string>([groupLabel]);
+    const stack = [groupLabel];
+    while (stack.length) {
+      const cur = stack.pop()!;
+      const g = groupByLabel.get(cur);
+      if (!g) continue;
+      for (const child of g.children) {
+        if (groupByLabel.has(child)) {
+          if (!seen.has(child)) {
+            seen.add(child);
+            groups.add(child);
+            stack.push(child);
+          }
+        } else {
+          nodes.add(child);
+        }
+      }
+    }
+    return { nodes, groups };
+  };
+
+  // ── Step 2: resolve the focused element ──
+  // focusNodeLabels  — focus boxes shown standalone (focused box, or a group's members)
+  // focusGroupLabels — groups kept EXPANDED (focused group + its sub-groups)
+  // focusEndpointSet — canonical keys that count as "the focus" for edge adjacency
+  const focusNodeLabels = new Set<string>();
+  const focusGroupLabels = new Set<string>();
+  const focusEndpointSet = new Set<string>();
+
+  if (target.kind === 'group') {
+    const gl = isGroupKey(target.id) ? groupLabelOf(target.id) : target.id;
+    if (groupByLabel.has(gl)) {
+      focusGroupLabels.add(gl);
+      focusEndpointSet.add(groupKey(gl));
+      const desc = descendantsOf(gl);
+      for (const n of desc.nodes) {
+        focusNodeLabels.add(n);
+        focusEndpointSet.add(n);
+      }
+      for (const sg of desc.groups) {
+        focusGroupLabels.add(sg);
+        focusEndpointSet.add(groupKey(sg));
+      }
+    }
+  } else {
+    // box — shown standalone even if it belongs to a group (framing stripped).
+    if (nodeLabelSet.has(target.id)) {
+      focusNodeLabels.add(target.id);
+      focusEndpointSet.add(target.id);
+    }
+  }
+
+  // ── Step 3: walk edges → neighbours + kept (focus-incident / internal) edges ──
+  const neighborIds = new Set<string>();
+  const collapsedNeighborGroupIds = new Set<string>();
+  const neighborBoxes = new Set<string>();
+  const keepGroupLabels = new Set<string>(focusGroupLabels);
+  const keptEdges: BLEdge[] = [];
+  const selfLoops: BLEdge[] = [];
+
+  const keepGroupAndSubgroups = (gl: string): void => {
+    keepGroupLabels.add(gl);
+    for (const sg of descendantsOf(gl).groups) keepGroupLabels.add(sg);
+  };
+
+  /** Classify a neighbour endpoint; returns whether the incident edge survives. */
+  const classifyNeighbor = (key: string): boolean => {
+    if (isGroupKey(key)) {
+      const gl = groupLabelOf(key);
+      if (!groupByLabel.has(gl)) return false; // dangling group ref (FM7)
+      if (focusGroupLabels.has(gl)) return true; // part of focus (internal)
+      neighborIds.add(key);
+      collapsedNeighborGroupIds.add(gl);
+      keepGroupAndSubgroups(gl);
+      return true;
+    }
+    if (focusNodeLabels.has(key)) return true; // part of focus
+    if (!nodeLabelSet.has(key)) return false; // dangling box endpoint (FM7)
+    // A neighbour box inside a group → collapse that group so the edge redirects
+    // to a single collapsed box (AC3 / Dec 11); never expand the group (FM4).
+    const top = topAncestor(key);
+    if (top !== undefined && !focusGroupLabels.has(top)) {
+      neighborIds.add(groupKey(top));
+      collapsedNeighborGroupIds.add(top);
+      keepGroupAndSubgroups(top);
+      return true;
+    }
+    // Standalone neighbour box (no group, or already inside the focused group).
+    neighborIds.add(key);
+    neighborBoxes.add(key);
+    return true;
+  };
+
+  for (const edge of parsed.edges) {
+    const inS = focusEndpointSet.has(edge.source);
+    const inT = focusEndpointSet.has(edge.target);
+    if (edge.source === edge.target) {
+      // Self-loop: kept iff incident to focus, re-added after the collapse pass
+      // (which drops src===tgt) — FM5.
+      if (inS) selfLoops.push(edge);
+      continue;
+    }
+    if (inS && inT) {
+      keptEdges.push(edge); // internal (member↔member inside focused group) — FM3
+      continue;
+    }
+    if (!inS && !inT) continue; // unrelated to focus
+    const other = inS ? edge.target : edge.source;
+    if (classifyNeighbor(other)) keptEdges.push(edge);
+  }
+
+  // ── Step 4: build the filtered model ──
+  const keepNodeLabels = new Set<string>([
+    ...focusNodeLabels,
+    ...neighborBoxes,
+  ]);
+  const nodes = parsed.nodes.filter((n) => keepNodeLabels.has(n.label));
+  const groups = parsed.groups.filter((g) => keepGroupLabels.has(g.label));
+  // Notes follow their owner: kept iff the owning box survives (FM9).
+  const notes = parsed.notes?.filter((note) => keepNodeLabels.has(note.ref));
+
+  const filtered: ParsedBoxesAndLines = {
+    ...parsed,
+    nodes,
+    edges: keptEdges,
+    groups,
+    ...(notes !== undefined && { notes }),
+  };
+  // Clear pinned positions so the subset auto-lays-out (Dec 21 / FM2). Pins are
+  // restored on exit because exit re-renders the original unfiltered model.
+  delete (filtered as { nodePositions?: unknown }).nodePositions;
+
+  // ── Step 5: collapse neighbour groups via the shared redirect+dedup (ADR-3) ──
+  const collapsed = collapseBoxesAndLines(filtered, collapsedNeighborGroupIds);
+
+  // ── Step 6: re-add self-loops the collapse pass dropped (FM5) ──
+  let resultParsed = collapsed.parsed;
+  if (selfLoops.length > 0) {
+    const visible = new Set(resultParsed.nodes.map((n) => n.label));
+    const survivors = selfLoops.filter((e) => visible.has(e.source));
+    if (survivors.length > 0)
+      resultParsed = {
+        ...resultParsed,
+        edges: [...resultParsed.edges, ...survivors],
+      };
+  }
+
+  return {
+    parsed: resultParsed,
+    neighborIds,
+    collapsedNeighborGroupIds,
+    rampDomain,
+    collapseInfo: {
+      collapsedChildCounts: collapsed.collapsedChildCounts,
+      originalGroups: collapsed.originalGroups,
+    },
+  };
+}

package/src/boxes-and-lines/layout-search.ts

@@ -60,9 +60,13 @@ const splineGen = d3line<Pt>()
   .y((d) => d.y)
   .curve(curveBasis);
 
+// Path tokenizer for `flatten` — module-scope so it isn't recompiled per call.
+// String.match with a /g regex is stateless (ignores lastIndex), so a shared
+// instance is safe to reuse.
+const PATH_TOKEN_RE = /[MLQC]|-?\d*\.?\d+(?:e-?\d+)?/gi;
 // flatten an SVG path "d" (M/L/Q/C) into a polyline for crossing detection
 function flatten(d: string): Pt[] {
-  const toks = d.match(/[MLQC]|-?\d*\.?\d+(?:e-?\d+)?/gi) ?? [];
+  const toks = d.match(PATH_TOKEN_RE) ?? [];
   const pts: Pt[] = [];
   let i = 0,
     cx = 0,
@@ -121,6 +125,34 @@ function flatten(d: string): Pt[] {
   }
   return pts;
 }
+// Flattened edge polyline + its bbox. Building it requires an SVG-string
+// round-trip (d3 spline → regex parse), so it's memoized per layout: every
+// candidate is scored by countSplineCrossings + countEdgeOverlaps +
+// countEdgeNodePierces, which would otherwise each re-flatten all edges.
+type FlatPoly = { pts: Pt[]; x0: number; y0: number; x1: number; y1: number };
+const FLAT_CACHE = new WeakMap<object, FlatPoly[]>();
+function flatPolys(layout: BLLayoutResult): FlatPoly[] {
+  const key = layout.edges as unknown as object;
+  const hit = FLAT_CACHE.get(key);
+  if (hit) return hit;
+  const polys = layout.edges.map((e) => {
+    const pts =
+      e.points.length >= 2 ? flatten(splineGen(e.points as Pt[]) ?? '') : [];
+    let x0 = Infinity,
+      y0 = Infinity,
+      x1 = -Infinity,
+      y1 = -Infinity;
+    for (const p of pts) {
+      if (p.x < x0) x0 = p.x;
+      if (p.x > x1) x1 = p.x;
+      if (p.y < y0) y0 = p.y;
+      if (p.y > y1) y1 = p.y;
+    }
+    return { pts, x0, y0, x1, y1 };
+  });
+  FLAT_CACHE.set(key, polys);
+  return polys;
+}
 function segPoint(p1: Pt, p2: Pt, p3: Pt, p4: Pt): Pt | null {
   const den = (p2.x - p1.x) * (p4.y - p3.y) - (p2.y - p1.y) * (p4.x - p3.x);
   if (Math.abs(den) < 1e-9) return null;
@@ -136,28 +168,21 @@ function segPoint(p1: Pt, p2: Pt, p3: Pt, p4: Pt): Pt | null {
 // near a genuinely shared endpoint node; cluster near-duplicate hits.
 // Exported so the playground + benchmark score with the SAME counter the
 // engine optimizes against.
-export function countSplineCrossings(layout: BLLayoutResult): number {
+export function countSplineCrossings(
+  layout: BLLayoutResult,
+  /** Abort early once the running total exceeds this (the caller only needs to
+   *  know X has passed the best-so-far badness — the exact value no longer
+   *  matters). Returns a value > floor in that case; identical otherwise. */
+  floor = Infinity
+): number {
   const center = new Map<string, Pt>();
   for (const n of layout.nodes) center.set(n.label, { x: n.x, y: n.y });
   // collapsed group boxes are edge endpoints too (`__group_<label>`); without
   // them, edges meeting AT a collapsed box are miscounted as crossings.
   for (const g of layout.groups)
     if (g.collapsed) center.set('__group_' + g.label, { x: g.x, y: g.y });
-  const polys = layout.edges.map((e) => {
-    const pts =
-      e.points.length >= 2 ? flatten(splineGen(e.points as Pt[]) ?? '') : [];
-    let x0 = Infinity,
-      y0 = Infinity,
-      x1 = -Infinity,
-      y1 = -Infinity;
-    for (const p of pts) {
-      if (p.x < x0) x0 = p.x;
-      if (p.x > x1) x1 = p.x;
-      if (p.y < y0) y0 = p.y;
-      if (p.y > y1) y1 = p.y;
-    }
-    return { pts, s: e.source, t: e.target, x0, y0, x1, y1 };
-  });
+  const polys = flatPolys(layout);
+  const edges = layout.edges;
   const R = 34;
   let total = 0;
   for (let a = 0; a < polys.length; a++)
@@ -166,26 +191,43 @@ export function countSplineCrossings(layout: BLLayoutResult): number {
         B = polys[b]!;
       if (A.pts.length < 2 || B.pts.length < 2) continue;
       if (A.x1 < B.x0 || B.x1 < A.x0 || A.y1 < B.y0 || B.y1 < A.y0) continue; // bbox disjoint
-      const shared = [A.s, A.t]
-        .filter((n) => n === B.s || n === B.t)
-        .map((n) => center.get(n))
-        .filter(Boolean) as Pt[];
+      const ea = edges[a]!,
+        eb = edges[b]!;
+      // Shared-endpoint centres (≤2) — inlined to avoid allocating a filter/map
+      // array on every one of the O(E²) edge pairs.
+      let sh0: Pt | undefined, sh1: Pt | undefined;
+      if (ea.source === eb.source || ea.source === eb.target)
+        sh0 = center.get(ea.source);
+      if (ea.target === eb.source || ea.target === eb.target)
+        sh1 = center.get(ea.target);
       const hits: Pt[] = [];
-      for (let i = 1; i < A.pts.length; i++)
-        for (let j = 1; j < B.pts.length; j++) {
-          const p = segPoint(
-            A.pts[i - 1]!,
-            A.pts[i]!,
-            B.pts[j - 1]!,
-            B.pts[j]!
-          );
+      const ap = A.pts,
+        bp = B.pts;
+      for (let i = 1; i < ap.length; i++) {
+        const a0 = ap[i - 1]!,
+          a1 = ap[i]!;
+        const axMin = a0.x < a1.x ? a0.x : a1.x,
+          axMax = a0.x > a1.x ? a0.x : a1.x,
+          ayMin = a0.y < a1.y ? a0.y : a1.y,
+          ayMax = a0.y > a1.y ? a0.y : a1.y;
+        for (let j = 1; j < bp.length; j++) {
+          const b0 = bp[j - 1]!,
+            b1 = bp[j]!;
+          // per-segment bbox reject — disjoint segments can't cross
+          if (axMax < (b0.x < b1.x ? b0.x : b1.x)) continue;
+          if ((b0.x > b1.x ? b0.x : b1.x) < axMin) continue;
+          if (ayMax < (b0.y < b1.y ? b0.y : b1.y)) continue;
+          if ((b0.y > b1.y ? b0.y : b1.y) < ayMin) continue;
+          const p = segPoint(a0, a1, b0, b1);
           if (!p) continue;
-          if (shared.some((c) => Math.hypot(p.x - c.x, p.y - c.y) < R))
-            continue;
+          if (sh0 && Math.hypot(p.x - sh0.x, p.y - sh0.y) < R) continue;
+          if (sh1 && Math.hypot(p.x - sh1.x, p.y - sh1.y) < R) continue;
           if (!hits.some((h) => Math.hypot(h.x - p.x, h.y - p.y) < 6))
             hits.push(p);
         }
+      }
       total += hits.length;
+      if (total > floor) return total; // can't win — stop counting
     }
   return total;
 }
@@ -251,21 +293,8 @@ export function detectEdgeOverlaps(
         h: g.height,
       });
 
-  const polys = layout.edges.map((e) => {
-    const pts =
-      e.points.length >= 2 ? flatten(splineGen(e.points as Pt[]) ?? '') : [];
-    let x0 = Infinity,
-      y0 = Infinity,
-      x1 = -Infinity,
-      y1 = -Infinity;
-    for (const p of pts) {
-      if (p.x < x0) x0 = p.x;
-      if (p.x > x1) x1 = p.x;
-      if (p.y < y0) y0 = p.y;
-      if (p.y > y1) y1 = p.y;
-    }
-    return { pts, s: e.source, t: e.target, x0, y0, x1, y1 };
-  });
+  const polys = flatPolys(layout);
+  const edges = layout.edges;
 
   const runs: OverlapRun[] = [];
   for (let a = 0; a < polys.length; a++)
@@ -280,10 +309,14 @@ export function detectEdgeOverlaps(
         B.y1 + dist < A.y0
       )
         continue;
-      const shared = [A.s, A.t]
-        .filter((n) => n === B.s || n === B.t)
-        .map((n) => rect.get(n))
-        .filter(Boolean) as Rect[];
+      const ea = edges[a]!,
+        eb = edges[b]!;
+      // Shared-endpoint rects (≤2) — inlined to avoid a per-pair filter/map array.
+      let shr0: Rect | undefined, shr1: Rect | undefined;
+      if (ea.source === eb.source || ea.source === eb.target)
+        shr0 = rect.get(ea.source);
+      if (ea.target === eb.source || ea.target === eb.target)
+        shr1 = rect.get(ea.target);
       // Walk A; accumulate contiguous "covered" runs (close to B, off any shared
       // node). A run counts once if it reaches minLen.
       let run: Pt[] = [];
@@ -299,7 +332,9 @@ export function detectEdgeOverlaps(
         runLen = 0;
       };
       for (const p of A.pts) {
-        const nearShared = shared.some((r) => pointRectDist(p, r) < nodeClear);
+        const nearShared =
+          (shr0 !== undefined && pointRectDist(p, shr0) < nodeClear) ||
+          (shr1 !== undefined && pointRectDist(p, shr1) < nodeClear);
         const covered = !nearShared && distToPoly(p, B.pts) < dist;
         if (covered) {
           if (run.length)
@@ -358,9 +393,10 @@ export function detectEdgeNodePierces(
     Math.abs(p.x - r.x) < r.w / 2 - inset &&
     Math.abs(p.y - r.y) < r.h / 2 - inset;
   const out: NodePierce[] = [];
+  const polys = flatPolys(layout);
   layout.edges.forEach((e, idx) => {
     if (e.points.length < 2) return;
-    const poly = flatten(splineGen(e.points as Pt[]) ?? '');
+    const poly = polys[idx]!.pts;
     for (const r of rects) {
       if (
         r.key === e.source ||
@@ -860,7 +896,7 @@ function edgeLength(layout: BLLayoutResult): number {
   return total;
 }
 
-export function layoutBoxesAndLinesSearch(
+export async function layoutBoxesAndLinesSearch(
   parsed: ParsedBoxesAndLines,
   collapseInfo?: {
     collapsedChildCounts: Map<string, number>;
@@ -875,9 +911,21 @@ export function layoutBoxesAndLinesSearch(
     lambda?: number;
     /** How many top candidates to re-rank with the exact counter (default 6). */
     refineK?: number;
+    /** Progress hook for the interactive path. When provided, the search yields
+     *  to a macrotask after each candidate so the host UI can paint a progress
+     *  indicator. Omit it (CLI/export) and the search runs straight through with
+     *  no added latency. */
+    onProgress?: (done: number, total: number, phase: string) => void;
   }
-): BLLayoutResult {
+): Promise<BLLayoutResult> {
   const hideDescriptions = opts?.hideDescriptions ?? false;
+  const onProgress = opts?.onProgress;
+  // Yield to a macrotask (lets the browser repaint between heavy placements);
+  // no-op when there's no progress observer so non-interactive callers pay
+  // nothing.
+  const tick = onProgress
+    ? (): Promise<void> => new Promise<void>((r) => setTimeout(r))
+    : (): undefined => undefined;
 
   // collapsed group labels (shown as plain boxes) — mirrors the ELK path
   const collapsedGroupLabels = new Set<string>();
@@ -1427,7 +1475,7 @@ export function layoutBoxesAndLinesSearch(
   // `floor` lets callers skip the expensive O/P passes once X alone already
   // exceeds the best badness found so far (it can't win, return Infinity).
   const badness = (lay: BLLayoutResult, floor: number): number => {
-    const x = countSplineCrossings(lay);
+    const x = countSplineCrossings(lay, floor);
     if (x > floor) return Infinity;
     return (
       x +
@@ -1442,6 +1490,18 @@ export function layoutBoxesAndLinesSearch(
   const objective = (lay: BLLayoutResult, viol: number) =>
     viol * 1e6 + edgeLength(lay) + lambda * meanDrift(lay, prev) * 10;
 
+  // Progress is reported over the two dominant phases: building the dagre
+  // candidate pool, then exact-scoring the top few. `refineK` is clamped below,
+  // so estimate the total here for a smooth bar.
+  const progressTotal =
+    configs.length + Math.min(opts?.refineK ?? 6, configs.length);
+  let progressDone = 0;
+  const step = async (phase: string): Promise<void> => {
+    if (!onProgress) return;
+    onProgress(++progressDone, progressTotal, phase);
+    await tick();
+  };
+
   // Build the candidate pool.
   const pool: BLLayoutResult[] = [];
   for (const cfg of configs) {
@@ -1450,6 +1510,7 @@ export function layoutBoxesAndLinesSearch(
     } catch {
       /* some rankers choke on odd graphs */
     }
+    await step('Optimizing layout');
   }
   if (!pool.length)
     return place({ ranker: 'network-simplex', nodesep: 50, ranksep: 60 });
@@ -1470,10 +1531,13 @@ export function layoutBoxesAndLinesSearch(
   // Stage 1: rank the dagre pool with the cheap straight-segment counter — a
   // cheap proxy to pick which candidates are worth the expensive exact scoring.
   // Widen REFINE_K a little since the proxy only sees crossings, not O/P.
-  pool.sort(
-    (a, b) =>
-      objective(a, countCrossingsFast(a)) - objective(b, countCrossingsFast(b))
-  );
+  // Pre-score each candidate ONCE (countCrossingsFast is O(E²)) into a key map,
+  // then sort by the stored key — the comparator otherwise recomputes the score
+  // for both operands on every comparison (O(C log C) calls vs C). The score is a
+  // pure function of the layout, so the resulting order is identical.
+  const fastKey = new Map<BLLayoutResult, number>();
+  for (const lay of pool) fastKey.set(lay, objective(lay, countCrossingsFast(lay)));
+  pool.sort((a, b) => fastKey.get(a)! - fastKey.get(b)!);
   const refineK = Math.min(REFINE_K, pool.length);
 
   // Stage 2: exact-score the top-K dagre candidates on the FULL badness (X+O+P)
@@ -1492,7 +1556,10 @@ export function layoutBoxesAndLinesSearch(
       best = lay;
     }
   };
-  for (const lay of pool.slice(0, refineK)) consider(lay);
+  for (const lay of pool.slice(0, refineK)) {
+    consider(lay);
+    await step('Refining layout');
+  }
 
   // Adaptive escalation: a still-high badness after the base seed budget means
   // the graph is genuinely hard — dense layouts (e.g. the marketplace) need many
@@ -1517,11 +1584,10 @@ export function layoutBoxesAndLinesSearch(
         /* ignore choking rankers */
       }
     }
-    extra.sort(
-      (a, b) =>
-        objective(a, countCrossingsFast(a)) -
-        objective(b, countCrossingsFast(b))
-    );
+    const extraKey = new Map<BLLayoutResult, number>();
+    for (const lay of extra)
+      extraKey.set(lay, objective(lay, countCrossingsFast(lay)));
+    extra.sort((a, b) => extraKey.get(a)! - extraKey.get(b)!);
     for (const lay of extra.slice(0, ESCALATE_REFINE)) consider(lay);
   }