@principal-ai/subsystems-react 0.35.7 → 0.36.1

package/src/subsystem/model.ts

@@ -663,6 +663,18 @@ export function moduleMinWidthForBadge(path: string): number {
   );
 }
 
+/**
+ * Min frame width so a **non-collapsing** boundary badge (process / package)
+ * fits inside with padding at both ends. Process badges are centred on the top
+ * edge and never collapse, so the full label must clear `MODULE_BADGE_INSET` on
+ * each side; ELK receives this as the frame's `minWidth`.
+ */
+export function boundaryMinWidthForBadge(label: string): number {
+  return Math.ceil(
+    moduleBadgeWidth(label) + MODULE_BADGE_INSET * 2 + MODULE_FRAME_BORDER,
+  );
+}
+
 /** React Flow id for a package (repo) boundary group node. */
 export function packageGroupNodeId(packageKey: string): string {
   return `package:${packageKey}`;
@@ -824,6 +836,13 @@ export function buildBoundaryLayoutGroups(
   // ("value already present"). Mixed-process modules (common in composed
   // graphs, where models frame one file under different processes) never
   // nest — without this claim they land in both frames.
+  //
+  // Singletons deliberately do NOT claim, `showSingletonFrames` or not: a
+  // one-member process spans exactly one package and a one-member module
+  // sits in exactly one process, so each always nests, and the enclosing
+  // frame's own `claimed`/`nestedModuleKeys` filter already excludes the
+  // leaf. Claiming as well would only strip those leaves from a package's
+  // direct leaves for no gain.
   const claimedByModule = new Set<string>();
   for (const r of modules) {
     if (r.memberAliases.length >= 2) {
@@ -832,8 +851,7 @@ export function buildBoundaryLayoutGroups(
   }
   // Same rule one level up: a leaf owned by a multi-member process frame
   // must not also sit directly in a package frame. (Singleton processes
-  // never claim — ELK skips them and promotes the member upward, so the
-  // member has to stay reachable through its package or ungrouped.)
+  // never claim — see above.)
   const claimedByProcess = new Set<string>();
   for (const r of processes) {
     if (r.memberAliases.length >= 2) {
@@ -1046,6 +1064,87 @@ export const MECHANISM_STYLE: Record<SubsystemEdgeMechanism, 'solid' | 'dashed'
   'registers-into': 'dashed',
 };
 
+/**
+ * Region colors for process boundaries in the aggregate graph. Kept separate
+ * from MECHANISM_COLOR on purpose: that palette encodes edge semantics on thin
+ * arrowed strokes, this one encodes containment on wide filled regions, and a
+ * shared hue would make the two readings ambiguous.
+ */
+export const BOUNDARY_COLOR: readonly string[] = [
+  '#6c9eff', // blue
+  '#3fb8a0', // teal
+  '#8fbf5f', // green
+  '#d9a441', // amber
+  '#d67ab1', // magenta
+  '#9d7fe0', // violet
+  '#e8705f', // coral
+  '#4fb0d4', // sky
+  '#c2a83c', // olive
+  '#a876c8', // orchid
+  '#d1487f', // crimson
+  '#a3c94f', // lime
+];
+
+/** Stable 32-bit hash (FNV-1a plus a final mix) so low bits still spread. */
+function hashBoundaryKey(key: string): number {
+  let h = 0x811c9dc5;
+  for (let i = 0; i < key.length; i++) {
+    h ^= key.charCodeAt(i);
+    h = Math.imul(h, 0x01000193);
+  }
+  h ^= h >>> 15;
+  h = Math.imul(h, 0x2545f491);
+  h ^= h >>> 13;
+  return h >>> 0;
+}
+
+/**
+ * Assign each process boundary key a color from BOUNDARY_COLOR.
+ *
+ * A bare `hash % palette.length` collides constantly once a repo has more than
+ * a handful of processes — unrelated boundaries end up the same hue, which
+ * defeats the point of coding them at all. So the hash only picks the
+ * *preferred* slot and collisions probe forward to the next free one, with
+ * keys visited in sorted order to keep the result deterministic. Distinct
+ * boundaries therefore never share a color unless the key count exceeds the
+ * palette, and past that point the least-used hue wins rather than an
+ * arbitrary one, so the busiest boundaries keep unique colors longest.
+ *
+ * Assignment depends on the key set, so filtering the graph can reshuffle
+ * hues. That is the deliberate trade: the legend is always on screen, whereas
+ * a stable-but-colliding mapping is unreadable.
+ */
+export function assignBoundaryColors(keys: readonly string[]): Map<string, string> {
+  const out = new Map<string, string>();
+  const owners = new Map<string, number>();
+  for (const key of [...keys].sort()) {
+    if (out.has(key)) continue;
+    const start = hashBoundaryKey(key) % BOUNDARY_COLOR.length;
+    let picked: string | undefined;
+    for (let i = 0; i < BOUNDARY_COLOR.length; i++) {
+      const candidate = BOUNDARY_COLOR[(start + i) % BOUNDARY_COLOR.length]!;
+      if (owners.get(candidate)) continue;
+      picked = candidate;
+      break;
+    }
+    // Palette exhausted: share the least-used hue, ties going to the earlier
+    // slot so the result stays deterministic.
+    if (!picked) {
+      picked = BOUNDARY_COLOR.reduce((a, b) =>
+        (owners.get(a) ?? 0) <= (owners.get(b) ?? 0) ? a : b,
+      )!;
+    }
+    owners.set(picked, (owners.get(picked) ?? 0) + 1);
+    out.set(key, picked);
+  }
+  return out;
+}
+
+/** Low-alpha fill for a boundary region, from its assigned color. */
+export function boundaryFill(color: string, alpha = '1f'): string {
+  return `${color}${alpha}`;
+}
+
 /** Mechanism → [description, verifiable-with-graphify]. Drives the "not
  *  directly verifiable" styling of edge labels. */
 export const MECHANISM_DESCRIPTIONS: [SubsystemEdgeMechanism, string, boolean][] = [
@@ -1550,8 +1649,19 @@ export async function buildSubsystemGraph(
           id: g.id,
           memberIds: g.memberAliases,
           parentId: g.parentId,
-          minWidth: g.region.kind === 'module' ? moduleMinWidthForBadge(g.region.label) : undefined,
+          // Modules collapse a long path to `first/…/last`, so they only need
+          // room for the collapsed badge. Processes/packages never collapse:
+          // size the frame to hold the full centered label plus padding.
+          minWidth:
+            g.region.kind === 'module'
+              ? moduleMinWidthForBadge(g.region.label)
+              : boundaryMinWidthForBadge(g.region.label),
         })),
+        // Honour `showSingletonFrames`: a one-member process or module is
+        // still a real boundary. `buildBoundaryLayoutGroups` already made
+        // those regions claim their members, so keeping them here cannot
+        // double-parent a leaf.
+        keepSingletonGroups: showSingletonFrames === true,
       });
       const builtGroupIds = new Set(result.groupBounds.keys());
       // Parents before children — package, then process, then module frames.
@@ -1605,7 +1715,12 @@ export async function buildSubsystemGraph(
           id: g.id,
           type: 'subsystem-group',
           position: { x: 0, y: 0 },
-          width: 400,
+          width: Math.max(
+            400,
+            g.region.kind === 'module'
+              ? moduleMinWidthForBadge(g.region.label)
+              : boundaryMinWidthForBadge(g.region.label),
+          ),
           height: 300,
           ...(g.parentId ? { parentId: g.parentId } : {}),
           data: { region: g.region },

package/src/subsystem/nodes.tsx

@@ -27,7 +27,6 @@ import {
   storageBadgeLabel,
   storageBadgeColor,
   deriveNameFromSymbol,
-  BADGE_EDGE_INSET,
   nodeMinWidthForBadges,
   MODULE_BADGE_INSET,
   moduleBadgeLabel,
@@ -70,9 +69,6 @@ function breakWords(s: string): string {
 export interface SubsystemGraphCallbacks {
   /** Click a component — open its file/entry point. */
   onSelect?: (componentAlias: string) => void;
-  /** Click the filename badge — open that component's file in the drawer
-   *  (same path as clicking the file link in the declaration panel). */
-  onOpenFile?: (componentAlias: string) => void;
   /** Click an edge (or its label) — select the relationship. */
   onEdgeSelect?: (edgeId: string) => void;
   /** Hover a component (null on leave) — associates it with the file tree. */
@@ -121,6 +117,7 @@ export function SubsystemComponentNode(props: NodeProps<Node<SubsystemGraphNodeD
   const callbacks = useSubsystemCallbacks();
   const { data, selected, width: nodeWidth, height: nodeHeight } = props;
   const c = data.component;
+  const [hover, setHover] = useState(false);
   // Construct owns node color, derived from the active Pierre syntax theme —
   // the same palette the declaration panel and file drawer render with. Role
   // shows as the hover badge, not as color — for now; a role glyph/accent may
@@ -129,7 +126,6 @@ export function SubsystemComponentNode(props: NodeProps<Node<SubsystemGraphNodeD
   // Left badge: framework brand (e.g. React cyan) when the label is a
   // framework stereotype; otherwise the same construct color as the border.
   const badgeColor = constructBadgeColor(c) ?? color;
-  const [hover, setHover] = useState(false);
   const configuredMax = callbacks.maxNodeWidth;
   const maxWidth = configuredMax ?? 300;
   // `symbol` is the source of truth; `name` is derived from it consistently.
@@ -145,6 +141,11 @@ export function SubsystemComponentNode(props: NodeProps<Node<SubsystemGraphNodeD
   // Set while a file is open in the drawer: true → spotlight, false → dim,
   // absent (no file open) → neutral.
   const fileMatch = data.fileMatch as boolean | undefined;
+  // Node fill lifts on hover as the clickability affordance; badges share it
+  // so they read as tabs on the same surface rather than floating patches.
+  const nodeBg = theme.colors.backgroundSecondary ?? theme.colors.background;
+  const hoverBg =
+    theme.colors.backgroundHover ?? theme.colors.backgroundTertiary ?? nodeBg;
   // Border: proposed uses the goldenrod accent (dashed); construct color stays
   // on the left badge. File-open spotlight still wins with primary.
   const borderColor = fileMatch
@@ -159,6 +160,14 @@ export function SubsystemComponentNode(props: NodeProps<Node<SubsystemGraphNodeD
   const isExternal = c.construct === 'external';
   const nodeRadius = isExternal ? 0 : 8;
   const badgeRadius = isExternal ? 0 : 4;
+  // The border thickens on selection / file-match. Absolutely-positioned
+  // badges are laid out from the padding box (inside the border), so a raw
+  // `top` / `left` would slide with the border. Anchor them to the border box
+  // instead, offsetting by the border width. Side badges sit flush with the
+  // node's left / right edge (`-borderW`); the top reference stays at -9.
+  const borderW = isSelected || fileMatch ? 4 : 2;
+  const badgeTop = -9 - borderW;
+  const badgeEdge = -borderW;
 
   return (
     <div
@@ -187,15 +196,15 @@ export function SubsystemComponentNode(props: NodeProps<Node<SubsystemGraphNodeD
         maxWidth,
         padding: '6px 10px',
         borderRadius: nodeRadius,
-        background: theme.colors.backgroundSecondary ?? theme.colors.background,
+        background: hover ? hoverBg : nodeBg,
         // Selected / file-matched nodes get a thicker border. Proposed nodes
         // use a dashed goldenrod border; left construct badge keeps construct color.
-        border: `${isSelected || fileMatch ? 4 : 2}px ${c.proposed ? 'dashed' : 'solid'} ${borderColor}`,
+        border: `${borderW}px ${c.proposed ? 'dashed' : 'solid'} ${borderColor}`,
         boxShadow: fileMatch
           ? `0 1px 4px rgba(0,0,0,0.25), 0 0 12px ${theme.colors.primary}55`
           : '0 1px 4px rgba(0,0,0,0.25)',
         opacity: fileMatch === false || data.dimmed === true ? 0.18 : 1,
-        transition: 'opacity 150ms ease',
+        transition: 'opacity 150ms ease, background-color 120ms ease',
         cursor: 'pointer',
         fontFamily: theme.fonts.body,
       }}
@@ -207,8 +216,8 @@ export function SubsystemComponentNode(props: NodeProps<Node<SubsystemGraphNodeD
       <div
         style={{
           position: 'absolute',
-          top: -11,
-          left: BADGE_EDGE_INSET,
+          top: badgeTop,
+          left: badgeEdge,
           zIndex: 1,
           fontFamily: theme.fonts.monospace,
           fontSize: theme.fontSizes[1],
@@ -217,7 +226,7 @@ export function SubsystemComponentNode(props: NodeProps<Node<SubsystemGraphNodeD
           lineHeight: '17px',
           whiteSpace: 'nowrap',
           color: badgeColor,
-          background: theme.colors.backgroundSecondary ?? theme.colors.background,
+          background: nodeBg,
           border: `2px solid ${badgeColor}`,
           borderRadius: badgeRadius,
           padding: '2px 8px',
@@ -226,15 +235,18 @@ export function SubsystemComponentNode(props: NodeProps<Node<SubsystemGraphNodeD
         {constructBadgeLabel(c)}
       </div>
 
-      {/* Right badge cluster — proposed wins over role when both are set;
+      {/* Secondary badge cluster — proposed wins over role when both are set;
           store storage (retention backing) sits beside, since it is
-          orthogonal to topology. Persistent; pointer-events pass through. */}
+          orthogonal to topology. Persistent; pointer-events pass through.
+          Sits astride the bottom edge, centered (mirroring the top construct
+          badge's straddle), so the top edge stays free for the construct tag. */}
       {(topRightLabel != null || storageLabel != null) && (
         <div
           style={{
             position: 'absolute',
-            top: -11,
-            right: BADGE_EDGE_INSET,
+            bottom: badgeTop,
+            left: '50%',
+            transform: 'translateX(-50%)',
             zIndex: 1,
             display: 'flex',
             gap: 6,
@@ -250,7 +262,7 @@ export function SubsystemComponentNode(props: NodeProps<Node<SubsystemGraphNodeD
                 textTransform: 'uppercase',
                 lineHeight: '17px',
                 color: storageColor,
-                background: theme.colors.backgroundSecondary ?? theme.colors.background,
+                background: nodeBg,
                 border: `2px solid ${storageColor}`,
                 borderRadius: badgeRadius,
                 padding: '2px 8px',
@@ -268,7 +280,7 @@ export function SubsystemComponentNode(props: NodeProps<Node<SubsystemGraphNodeD
                 textTransform: 'uppercase',
                 lineHeight: '17px',
                 color: topRightColor,
-                background: theme.colors.backgroundSecondary ?? theme.colors.background,
+                background: nodeBg,
                 border: `2px solid ${topRightColor}`,
                 borderRadius: badgeRadius,
                 padding: '2px 8px',
@@ -280,41 +292,6 @@ export function SubsystemComponentNode(props: NodeProps<Node<SubsystemGraphNodeD
         </div>
       )}
 
-      {/* Filename badge — a strip across the bottom border, shown on hover
-          and pinned while this node's file is open in the drawer (fileMatch).
-          Mirrors the construct/role tab badges; hidden for fileless nodes. */}
-      {(hover || fileMatch === true) && c.file ? (
-        <div
-          style={{
-            position: 'absolute',
-            bottom: -14,
-            left: '50%',
-            transform: 'translateX(-50%)',
-            zIndex: 1,
-            fontFamily: theme.fonts.monospace,
-            fontSize: theme.fontSizes[1],
-            letterSpacing: 0.5,
-            lineHeight: '17px',
-            whiteSpace: 'nowrap',
-            // filename stays neutral — the construct color belongs to the
-            // borders and badges, not the file name
-            color: theme.colors.text ?? theme.colors.textSecondary,
-            background: theme.colors.backgroundSecondary ?? theme.colors.background,
-            border: `2px solid ${color}`,
-            borderRadius: badgeRadius,
-            padding: '2px 8px',
-            cursor: 'pointer',
-          }}
-          onClick={(e) => {
-            // Open the file directly; don't also toggle node selection.
-            e.stopPropagation();
-            callbacks.onOpenFile?.(c.alias);
-          }}
-        >
-          {c.file.split('/').pop()}
-        </div>
-      ) : null}
-
       {/* Purpose is no longer shown as a hover tooltip below the node — it
           lives in the declaration panel and the graphify detail payload. */}
 
@@ -405,6 +382,7 @@ export function SubsystemGroupNode(props: NodeProps<Node<SubsystemGroupNodeData,
     isModule && canToggle ? moduleBadgeHoverLabel(label, availableBadgeWidth) : label;
   const frameRadius = isProcess ? 0 : 12;
   const badgeRadius = isProcess ? 0 : 4;
+  const badgeBg = theme.colors.backgroundSecondary ?? theme.colors.background;
   // Processes are deployment units — solid frame. Modules/packages stay dashed
   // until selected.
   const frameStyle = isProcess || selected ? 'solid' : 'dashed';
@@ -453,14 +431,15 @@ export function SubsystemGroupNode(props: NodeProps<Node<SubsystemGroupNodeData,
         } : undefined}
         style={{
           position: 'absolute',
-          // Process: badge fill starts with the process fill (inside the
-          // frame border); no top badge border so widths don't fight.
-          // Module/package sit astride the top edge like component badges.
-          // Always set left/transform/borderTop explicitly — React Flow reuses
-          // group DOM nodes and `undefined` does not clear a prior value.
-          top: isProcess ? 0 : -19,
+          // Process: the tab sits flush over the frame's top border (`top:
+          // -2` — the frame border is 2px) and carries its own full border, so
+          // the two read as one piece. Module/package are centred astride the
+          // top edge like component badges. Always set left/transform
+          // explicitly — React Flow reuses group DOM nodes and `undefined`
+          // does not clear a prior value.
+          top: isProcess ? -2 : 0,
           left: isProcess ? '50%' : 12,
-          transform: isProcess ? 'translateX(-50%)' : 'none',
+          transform: isProcess ? 'translateX(-50%)' : 'translateY(-50%)',
           zIndex: canToggle ? 10 : undefined,
           // Width is explicit while collapsible so hover-reveal of more path
           // text animates; the cap keeps both states inside the frame.
@@ -472,17 +451,23 @@ export function SubsystemGroupNode(props: NodeProps<Node<SubsystemGroupNodeData,
               : undefined,
           transition: 'width 140ms ease, box-shadow 120ms ease',
           cursor: canToggle ? 'pointer' : undefined,
-          boxShadow: canToggle && hover ? `0 2px 10px ${color}55` : undefined,
+          // The trailing halo squares the rounded corners back off in the fill
+          // colour, so an edge crossing a corner can't show through the notch.
+          // Square (process) badges have no notch, and the halo would erase the
+          // frame border they now sit flush on, so they skip it.
+          boxShadow: isProcess
+            ? undefined
+            : `${canToggle && hover ? `0 2px 10px ${color}55, ` : ''}0 0 0 1.5px ${badgeBg}`,
           fontFamily: theme.fonts.monospace,
           fontSize: theme.fontSizes[3],
           fontWeight: 700,
           letterSpacing: 0.6,
           color,
-          background: theme.colors.backgroundSecondary ?? theme.colors.background,
-          border: `1px solid ${color}`,
-          borderTopWidth: isProcess ? 0 : 1,
+          background: badgeBg,
+          border: `2px solid ${color}`,
+          borderTopWidth: 2,
           borderRadius: badgeRadius,
-          padding: '1px 7px',
+          padding: '3px 9px',
           whiteSpace: 'nowrap',
           overflow: 'hidden',
           textOverflow: 'ellipsis',

package/src/utils/elkLayout.test.ts

@@ -1,9 +1,10 @@
 /**
  * Tests for ELK Layout Utility
  *
- * Tests the pure helper functions that don't require the ELK runtime.
- * The computeElkLayout function is tested via Storybook visual tests
- * since ELK requires a web worker environment.
+ * Tests the pure helper functions that don't require the ELK runtime, plus
+ * the compound-group planner. computeElkLayout itself needs a web worker
+ * (elkjs constructs one), so it is covered by Storybook visual tests and by
+ * testing planCompoundGroups — the part that decides which frames exist.
  */
 
 import { describe, test, expect } from 'bun:test';
@@ -11,9 +12,122 @@ import {
   pointsToPath,
   pointsToSmoothPath,
   calculatePathMidpoint,
+  planCompoundGroups,
   type Point,
 } from './elkLayout';
 
+describe('planCompoundGroups', () => {
+  test('drops a single-leaf group by default and promotes its member', () => {
+    const plan = planCompoundGroups(
+      [{ id: 'proc', memberIds: ['solo'] }],
+      ['solo'],
+    );
+    expect(plan.built.map((g) => g.id)).toEqual([]);
+    expect(plan.skipped).toEqual(['proc']);
+  });
+
+  test('keeps a single-leaf group when the caller opts in', () => {
+    const plan = planCompoundGroups(
+      [{ id: 'proc', memberIds: ['solo'] }],
+      ['solo'],
+      true,
+    );
+    expect(plan.skipped).toEqual([]);
+    expect(plan.built).toEqual([{ id: 'proc', childIds: ['solo'], minWidth: undefined }]);
+  });
+
+  test('keeps a multi-leaf group in both modes', () => {
+    const defs = [{ id: 'proc', memberIds: ['a', 'b'] }];
+    for (const keep of [false, true]) {
+      const plan = planCompoundGroups(defs, ['a', 'b'], keep);
+      expect(plan.built.map((g) => g.id)).toEqual(['proc']);
+      expect(plan.skipped).toEqual([]);
+    }
+  });
+
+  test('always drops an empty group even when singletons are kept', () => {
+    const plan = planCompoundGroups([{ id: 'proc', memberIds: [] }], ['a'], true);
+    expect(plan.built).toEqual([]);
+    expect(plan.skipped).toEqual(['proc']);
+  });
+
+  test('counts leaves through nested groups', () => {
+    // process → module(one leaf) is still a single leaf, so both drop by
+    // default even though the process lists one member id.
+    const defs = [
+      { id: 'mod', memberIds: ['a'] },
+      { id: 'proc', memberIds: ['mod'] },
+    ];
+    expect(planCompoundGroups(defs, ['a']).skipped).toEqual(['mod', 'proc']);
+    expect(planCompoundGroups(defs, ['a'], true).built.map((g) => g.id)).toEqual([
+      'mod',
+      'proc',
+    ]);
+  });
+
+  test('a two-leaf module keeps its process alive under the default', () => {
+    const defs = [
+      { id: 'mod', memberIds: ['a', 'b'] },
+      { id: 'proc', memberIds: ['mod'] },
+    ];
+    const plan = planCompoundGroups(defs, ['a', 'b']);
+    expect(plan.built.map((g) => g.id)).toEqual(['mod', 'proc']);
+    expect(plan.built[1]!.childIds).toEqual(['mod']);
+  });
+
+  test('promotes a dropped group member into its built parent', () => {
+    // proc contains a singleton module (dropped) plus a bare leaf, so proc
+    // still has two leaves and survives; the module's leaf is promoted in.
+    const defs = [
+      { id: 'mod', memberIds: ['a'] },
+      { id: 'proc', memberIds: ['mod', 'b'] },
+    ];
+    const plan = planCompoundGroups(defs, ['a', 'b']);
+    expect(plan.skipped).toEqual(['mod']);
+    expect(plan.built.map((g) => g.id)).toEqual(['proc']);
+    expect(plan.built[0]!.childIds.sort()).toEqual(['a', 'b']);
+  });
+
+  test('builds children before parents', () => {
+    const defs = [
+      { id: 'pkg', memberIds: ['procA', 'procB'] },
+      { id: 'procA', memberIds: ['a1', 'a2'] },
+      { id: 'procB', memberIds: ['b1', 'b2'] },
+    ];
+    const plan = planCompoundGroups(defs, ['a1', 'a2', 'b1', 'b2']);
+    const order = plan.built.map((g) => g.id);
+    expect(order.indexOf('procA')).toBeLessThan(order.indexOf('pkg'));
+    expect(order.indexOf('procB')).toBeLessThan(order.indexOf('pkg'));
+  });
+
+  test('drops groups caught in a cycle instead of looping forever', () => {
+    const defs = [
+      { id: 'x', memberIds: ['y'] },
+      { id: 'y', memberIds: ['x'] },
+    ];
+    const plan = planCompoundGroups(defs, ['a']);
+    expect(plan.built).toEqual([]);
+    expect(plan.skipped.sort()).toEqual(['x', 'y']);
+  });
+
+  test('ignores member ids that match no leaf or group', () => {
+    const plan = planCompoundGroups(
+      [{ id: 'proc', memberIds: ['a', 'ghost'] }],
+      ['a'],
+      true,
+    );
+    expect(plan.built[0]!.childIds).toEqual(['a']);
+  });
+
+  test('carries minWidth through to the plan', () => {
+    const plan = planCompoundGroups(
+      [{ id: 'mod', memberIds: ['a', 'b'], minWidth: 220 }],
+      ['a', 'b'],
+    );
+    expect(plan.built[0]!.minWidth).toBe(220);
+  });
+});
+
 describe('elkLayout helper functions', () => {
   describe('pointsToPath', () => {
     test('should return empty string for empty array', () => {