@principal-ai/subsystems-react 0.36.0 → 0.36.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@principal-ai/subsystems-react",
-  "version": "0.36.0",
+  "version": "0.36.1",
   "description": "React UI for Subsystem Models — graph, Pierre code views, and session-event feeds",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/stories/Subsystem/ComponentGraph/ModuleBadges.stories.tsx

@@ -105,9 +105,9 @@ const deepComponents: SubsystemComponent[] = [
 const deepEdges = graphSpecFromEdges([
   ['node-comp', 'group-comp', 'references'],
   ['edge-comp', 'group-comp', 'references'],
-  ['analysis', 'layers', 'references'],
-  ['use-drawings', 'analysis', 'references'],
-  ['analysis', 'node-comp', 'references'],
+  ['model-view', 'layers', 'references'],
+  ['use-drawings', 'model-view', 'references'],
+  ['model-view', 'node-comp', 'references'],
 ]);
 
 /** Collapsed module badges show `first/…/last`. Click one to expand the full

package/src/stories/Subsystem/ComponentGraph/Processes.stories.tsx

@@ -21,15 +21,28 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// Two deployment units + one unframed outsider: host and renderer each get a
-// dashed process frame; the service sits outside every boundary.
+// Three deployment units + one unframed outsider: host and renderer each frame
+// two nodes; worker is a one-member process (kept, since singleton frames
+// default on); the service has no `process` and sits outside every boundary.
+const PROCESS_OF: Record<string, string> = {
+  main: 'principal-studio/host',
+  store: 'principal-studio/host',
+  view: 'principal-studio/renderer',
+  bridge: 'principal-studio/renderer',
+  worker: 'principal-studio/worker',
+};
+
 const processComponents = [
   ...components([
     ['main', 'main', 'function', 'src/host/main.ts', 'pkg:github/principal-ai/principal-studio', 'boots the host process', 'main'],
     ['store', 'SessionStore', 'store', 'src/host/store.ts', 'pkg:github/principal-ai/principal-studio', 'retained host state', 'SessionStore'],
     ['view', 'TrailView', 'function', 'src/renderer/view.tsx', 'pkg:github/principal-ai/principal-studio', 'renders the trail', 'TrailView'],
     ['bridge', 'bridge', 'function', 'src/renderer/bridge.ts', 'pkg:github/principal-ai/principal-studio', 'IPC bridge to the host', 'bridge'],
-  ]),
+    ['worker', 'runWorker', 'function', 'src/worker/run.ts', 'pkg:github/principal-ai/principal-studio', 'sole member of the worker process', 'runWorker'],
+  ]).map((c) => {
+    const process: string | undefined = PROCESS_OF[c.alias];
+    return process ? { ...c, process } : c;
+  }),
   {
     alias: 'svc',
     name: 'telemetry',
@@ -39,18 +52,13 @@ const processComponents = [
     purpose: 'external telemetry sink (no process, never framed)',
     role: 'service' as const,
   },
-].map((c, i) =>
-  i < 2
-    ? { ...c, process: 'principal-studio/host' }
-    : i < 4
-      ? { ...c, process: 'principal-studio/renderer' }
-      : c,
-);
+];
 
 const processEdges = graphSpecFromEdges([
   ['main', 'store', 'writes'],
   ['main', 'bridge', 'calls'],
   ['bridge', 'view', 'feeds'],
+  ['main', 'worker', 'calls'],
   ['main', 'svc', 'uses'],
 ]);
 
@@ -59,7 +67,7 @@ export const ProcessBoundaries: Story = {
     <div style={{ width: '100%', height: '100vh' }}>
       <SubsystemComponentGraph
         title="Process boundaries"
-        description="Host and renderer each render in their own ELK-aware boundary frame. The telemetry service has no `process` and sits outside every boundary."
+        description="Host and renderer each render in their own ELK-aware boundary frame. The worker process holds a single node and still gets a frame (singleton frames default on). The telemetry service has no `process` and sits outside every boundary."
         components={processComponents}
         relations={processEdges.relations} walkthroughs={processEdges.walkthroughs}
       />

package/src/subsystem/SubsystemAggregateGraph.tsx

@@ -314,6 +314,7 @@ function Inner({
   const [rfEdges, setRfEdges] = useState<Edge[]>([]);
   const [ready, setReady] = useState(false);
   const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [focusedBoundaryId, setFocusedBoundaryId] = useState<string | null>(null);
   const [hoveredId, setHoveredId] = useState<string | null>(null);
   const [legendOpen, setLegendOpen] = useState(true);
 
@@ -350,6 +351,7 @@ function Inner({
     let alive = true;
     setReady(false);
     setSelectedId(null);
+    setFocusedBoundaryId(null);
     // Compound process frames: each box is parented to exactly one process
     // group (its majority process); process member-boxes to their own
     // process; the rest stays root-level. Exclusive assignment by
@@ -514,6 +516,9 @@ function Inner({
 
   const onNodeClick = useCallback(
     (_e: unknown, node: Node) => {
+      // Boundaries are shells, not frames — there is no frame to select, and a
+      // double-click would otherwise toggle the (empty) selection twice.
+      if (node.type === 'aggregate-frame-group') return;
       const next = selectedId === node.id ? null : node.id;
       setSelectedId(next);
       onSelectFrame?.(next);
@@ -521,6 +526,37 @@ function Inner({
     [selectedId, onSelectFrame],
   );
 
+  // Double-click a boundary to zoom to it; double-click it again to zoom back
+  // out to the whole graph. Double-clicking a different boundary moves the
+  // focus. A boundary's interior is covered by the frames inside it, so a hit
+  // on any frame resolves to its enclosing boundary — otherwise double-clicking
+  // "on the boundary" would usually land on a frame and do nothing.
+  const onNodeDoubleClick = useCallback(
+    (_e: unknown, node: Node) => {
+      const boundaryId =
+        node.type === 'aggregate-frame-group'
+          ? node.id
+          : (() => {
+              const parentId = (node as { parentId?: string }).parentId;
+              if (!parentId) return null;
+              return nodes.some(
+                (n) => n.id === parentId && n.type === 'aggregate-frame-group',
+              )
+                ? parentId
+                : null;
+            })();
+      if (!boundaryId) return;
+      if (focusedBoundaryId === boundaryId) {
+        setFocusedBoundaryId(null);
+        void fitView({ padding: 0.15, duration: 400 });
+      } else {
+        setFocusedBoundaryId(boundaryId);
+        void fitView({ nodes: [{ id: boundaryId }], padding: 0.25, duration: 400 });
+      }
+    },
+    [focusedBoundaryId, fitView, nodes],
+  );
+
   const displayNodes = useMemo(
     () =>
       nodes.map((n) => ({
@@ -571,10 +607,12 @@ function Inner({
         className={GRAPH_CANVAS_CLASS}
         {...GRAPH_NAV_PROPS}
         onNodeClick={onNodeClick}
+        onNodeDoubleClick={onNodeDoubleClick}
         onNodeMouseEnter={(_e, node) => setHoveredId(node.id)}
         onNodeMouseLeave={() => setHoveredId(null)}
         onPaneClick={() => {
           setSelectedId(null);
+          setFocusedBoundaryId(null);
           onSelectFrame?.(null);
         }}
         proOptions={{ hideAttribution: true }}

package/src/subsystem/SubsystemComponentGraph.tsx

@@ -1169,6 +1169,21 @@ function Inner({ components, relations, walkthroughs, initialWalkthroughId, onRe
     [onFileSelect],
   );
 
+  // Double-click a component opens its declaration in the file drawer — the
+  // `file` + anchored `declarationRef.startLine` when verify resolved one,
+  // else the file top. Uses the same open path as the declaration panel's
+  // file link, so the drawer and file tree stay in sync.
+  const onNodeDoubleClick: NodeMouseHandler = useCallback(
+    (_e, node: Node) => {
+      if (node.type !== 'subsystem-component') return;
+      const comp = (node.data as { component?: SubsystemComponent } | undefined)?.component;
+      if (!comp?.file) return;
+      const startLine = comp.declarationRef?.startLine;
+      onOpenDeclarationFile(comp.file, startLine != null ? { startLine } : undefined);
+    },
+    [onOpenDeclarationFile],
+  );
+
   const onOpenFileFromWalkthrough = useCallback(
     (file: string, opts?: SubsystemOpenFileOptions) => {
       setFileOverlay({ file, startLine: opts?.startLine });
@@ -1539,18 +1554,6 @@ function Inner({ components, relations, walkthroughs, initialWalkthroughId, onRe
     [expandedWalkthroughs, fitOverview, zoomOnWalkthroughFocus],
   );
 
-  // Filename-badge clicks on nodes open the drawer through the same path as
-  // the declaration panel's file link (toggle + tree sync, no start line).
-  useEffect(() => {
-    SUBSYSTEM_CALLBACKS.onOpenFile = (componentAlias: string) => {
-      const comp = components.find((c) => c.alias === componentAlias);
-      if (comp?.file) onOpenDeclarationFile(comp.file);
-    };
-    return () => {
-      SUBSYSTEM_CALLBACKS.onOpenFile = undefined;
-    };
-  }, [components, onOpenDeclarationFile]);
-
   // Detail-panel links: related-name clicks select the matching component —
   // resolved by alias, name, or symbol (call labels may carry a trailing `()`).
   const resolveRelatedComponent = useCallback(
@@ -1996,6 +1999,7 @@ function Inner({ components, relations, walkthroughs, initialWalkthroughId, onRe
         className={GRAPH_CANVAS_CLASS}
         {...GRAPH_NAV_PROPS}
         onNodeClick={onNodeClick}
+        onNodeDoubleClick={onNodeDoubleClick}
         onEdgeClick={onEdgeClick}
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChange}

package/src/subsystem/model.test.ts

@@ -12,6 +12,8 @@ import {
   moduleBadgeHoverLabel,
   moduleBadgeWidth,
   moduleMinWidthForBadge,
+  boundaryMinWidthForBadge,
+  MODULE_BADGE_INSET,
   packageGroupNodeId,
   buildBoundaryLayoutGroups,
   buildSubsystemGraph,
@@ -887,6 +889,18 @@ describe('module badge labels', () => {
   });
 });
 
+describe('boundary frame min width (process / package badges)', () => {
+  test('boundaryMinWidthForBadge reserves the full label plus padding', () => {
+    const label = 'principal-studio/worker';
+    const min = boundaryMinWidthForBadge(label);
+    // Clears the bare badge by an inset on both ends plus the frame border.
+    expect(min - moduleBadgeWidth(label)).toBe(MODULE_BADGE_INSET * 2 + 4);
+    expect(min).toBeGreaterThanOrEqual(moduleBadgeWidth(label));
+    // Longer labels need wider frames.
+    expect(boundaryMinWidthForBadge('principal-studio/renderer-worker')).toBeGreaterThan(min);
+  });
+});
+
 describe('reorderWalkthroughs', () => {
   const wts: SubsystemWalkthrough[] = [
     { id: 'a', title: 'A', steps: [] },

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}`;
@@ -1637,7 +1649,13 @@ 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
@@ -1697,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. */}
 
@@ -454,12 +431,13 @@ 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 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: 0,
+          // 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%)' : 'translateY(-50%)',
           zIndex: canToggle ? 10 : undefined,
@@ -475,7 +453,11 @@ export function SubsystemGroupNode(props: NodeProps<Node<SubsystemGroupNodeData,
           cursor: canToggle ? 'pointer' : 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.
-          boxShadow: `${canToggle && hover ? `0 2px 10px ${color}55, ` : ''}0 0 0 1.5px ${badgeBg}`,
+          // 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,
@@ -483,7 +465,7 @@ export function SubsystemGroupNode(props: NodeProps<Node<SubsystemGroupNodeData,
           color,
           background: badgeBg,
           border: `2px solid ${color}`,
-          borderTopWidth: isProcess ? 0 : 2,
+          borderTopWidth: 2,
           borderRadius: badgeRadius,
           padding: '3px 9px',
           whiteSpace: 'nowrap',

package/src/utils/elkLayout.ts

@@ -642,7 +642,10 @@ export async function computeElkLayout(
   const compoundLayoutOptions: LayoutOptions = {
     'elk.algorithm': 'layered',
     'elk.direction': direction,
-    'elk.padding': '[top=48,left=24,bottom=24,right=24]',
+    // `top` is the header band a boundary badge sits in. It has to clear the
+    // badge (~28px tall, and a nested frame's badge can overhang its own top
+    // edge by ~13px) plus a gap before the first child.
+    'elk.padding': '[top=64,left=24,bottom=24,right=24]',
     'elk.spacing.nodeNode': '40',
   };