@diagrammo/dgmo 0.8.20 → 0.8.21

package/src/mindmap/text-wrap.ts

@@ -0,0 +1,207 @@
+// ============================================================
+// Mindmap Text Wrapping
+// ============================================================
+//
+// Shared logic for wrapping node labels and descriptions into
+// multiple lines. Used by both layout (for sizing) and renderer
+// (for drawing). Ensures both agree on line breaks and font size.
+
+const CHAR_WIDTH_RATIO = 0.58; // avg char width / fontSize for Helvetica
+const H_PAD = 16; // 8px padding each side
+const MAX_LABEL_LINES = 3;
+const MAX_DESC_LINES = 2;
+
+/** Split text into tokens, keeping hyphens attached to the left word. */
+function tokenize(text: string): string[] {
+  const tokens: string[] = [];
+  // Split on spaces, and after hyphens (keep hyphen with left token)
+  const parts = text.split(/(\s+)/);
+  for (const part of parts) {
+    if (/^\s+$/.test(part)) continue; // skip whitespace tokens
+    // Further split on hyphens: "well-known" → ["well-", "known"]
+    const hyphenParts = part.split(/(?<=-)(?=\S)/);
+    tokens.push(...hyphenParts);
+  }
+  return tokens;
+}
+
+/**
+ * Wrap text into lines that fit within maxWidth at the given fontSize.
+ * Returns null if the text doesn't fit within maxLines.
+ */
+function tryWrap(
+  tokens: string[],
+  maxWidth: number,
+  fontSize: number,
+  maxLines: number
+): string[] | null {
+  const availWidth = maxWidth - H_PAD;
+  const charWidth = fontSize * CHAR_WIDTH_RATIO;
+  const maxChars = Math.max(1, Math.floor(availWidth / charWidth));
+
+  const lines: string[] = [];
+  let currentLine = '';
+
+  for (const token of tokens) {
+    // After a hyphen-ending token, don't add a space
+    const sep = currentLine && !currentLine.endsWith('-') ? ' ' : '';
+    const candidate = currentLine + sep + token;
+
+    if (candidate.length <= maxChars) {
+      currentLine = candidate;
+    } else if (!currentLine) {
+      // Single token exceeds line — force it onto this line (will be truncated later if needed)
+      currentLine = token;
+    } else {
+      // Push current line, start new one
+      lines.push(currentLine);
+      if (lines.length >= maxLines) {
+        // Can't fit — return null to signal overflow
+        return null;
+      }
+      currentLine = token;
+    }
+  }
+  if (currentLine) {
+    lines.push(currentLine);
+  }
+
+  if (lines.length > maxLines) return null;
+  return lines;
+}
+
+/** Truncate the last line of a lines array with ellipsis to fit maxChars. */
+function truncateLastLine(
+  lines: string[],
+  maxWidth: number,
+  fontSize: number
+): string[] {
+  const availWidth = maxWidth - H_PAD;
+  const charWidth = fontSize * CHAR_WIDTH_RATIO;
+  const maxChars = Math.max(1, Math.floor(availWidth / charWidth));
+
+  const result = [...lines];
+  const last = result[result.length - 1];
+  if (last.length > maxChars) {
+    result[result.length - 1] = last.substring(0, maxChars - 1) + '\u2026';
+  }
+  return result;
+}
+
+interface WrapResult {
+  lines: string[];
+  fontSize: number;
+}
+
+/**
+ * Wrap text to fit within a node of the given maxWidth.
+ * Tries wrapping at baseFontSize first. If text doesn't fit within
+ * maxLines, reduces font size by 1px at a time down to minFontSize.
+ * As a last resort, truncates the final line with ellipsis.
+ */
+export function wrapText(
+  text: string,
+  maxWidth: number,
+  baseFontSize: number,
+  minFontSize: number,
+  maxLines: number = MAX_LABEL_LINES
+): WrapResult {
+  if (!text) return { lines: [''], fontSize: baseFontSize };
+
+  const tokens = tokenize(text);
+
+  // Try at each font size from base down to min
+  for (let fs = baseFontSize; fs >= minFontSize; fs--) {
+    const lines = tryWrap(tokens, maxWidth, fs, maxLines);
+    if (lines) {
+      // Ensure each line fits (truncate overly long single tokens)
+      return { lines: truncateLastLine(lines, maxWidth, fs), fontSize: fs };
+    }
+  }
+
+  // Last resort: wrap at minFontSize with unlimited lines, then take first maxLines
+  const allLines = tryWrap(tokens, maxWidth, minFontSize, 999) ?? [text];
+  const capped = allLines.slice(0, maxLines);
+  const truncated = truncateLastLine(capped, maxWidth, minFontSize);
+  // If we dropped lines, append ellipsis to indicate overflow
+  if (allLines.length > maxLines) {
+    const last = truncated[truncated.length - 1];
+    if (!last.endsWith('\u2026')) {
+      const availWidth = maxWidth - H_PAD;
+      const charWidth = minFontSize * CHAR_WIDTH_RATIO;
+      const maxChars = Math.max(1, Math.floor(availWidth / charWidth));
+      if (last.length >= maxChars - 1) {
+        truncated[truncated.length - 1] =
+          last.substring(0, maxChars - 1) + '\u2026';
+      } else {
+        truncated[truncated.length - 1] = last + '\u2026';
+      }
+    }
+  }
+  return {
+    lines: truncated,
+    fontSize: minFontSize,
+  };
+}
+
+// ============================================================
+// Compute full node text layout (shared between layout + renderer)
+// ============================================================
+
+const ROOT_FONT_SIZE = 17;
+const MIN_FONT_SIZE = 9;
+const FONT_STEP = 3;
+const DESC_FONT_SIZE = 10;
+
+function labelFontSize(depth: number): number {
+  return Math.max(MIN_FONT_SIZE, ROOT_FONT_SIZE - depth * FONT_STEP);
+}
+
+interface NodeTextLayout {
+  labelLines: string[];
+  labelFontSize: number;
+  descLines: string[];
+  descFontSize: number;
+}
+
+/**
+ * Compute wrapped text layout for a mindmap node.
+ * Called by both layout (for height) and renderer (for drawing).
+ */
+export function computeNodeText(
+  label: string,
+  description: string | undefined,
+  depth: number,
+  nodeWidth: number,
+  hideDescriptions: boolean
+): NodeTextLayout {
+  const baseFontSize = labelFontSize(depth);
+  const labelResult = wrapText(
+    label,
+    nodeWidth,
+    baseFontSize,
+    MIN_FONT_SIZE,
+    MAX_LABEL_LINES
+  );
+
+  let descLines: string[] = [];
+  let descFontSize = DESC_FONT_SIZE;
+  if (!hideDescriptions && description) {
+    const descResult = wrapText(
+      description,
+      nodeWidth,
+      DESC_FONT_SIZE,
+      DESC_FONT_SIZE, // don't shrink descriptions
+      MAX_DESC_LINES
+    );
+    descLines = descResult.lines;
+    descFontSize = descResult.fontSize;
+  }
+
+  return {
+    labelLines: labelResult.lines,
+    labelFontSize: labelResult.fontSize,
+    descLines,
+    descFontSize,
+  };
+}

package/src/mindmap/types.ts

@@ -0,0 +1,55 @@
+import type { DgmoError } from '../diagnostics.js';
+import type { TagGroup } from '../utils/tag-groups.js';
+
+export interface MindmapNode {
+  id: string;
+  label: string;
+  description?: string;
+  metadata: Record<string, string>;
+  children: MindmapNode[];
+  parentId: string | null;
+  lineNumber: number;
+  color?: string;
+  collapsed?: boolean;
+}
+
+export interface ParsedMindmap {
+  title: string | null;
+  titleLineNumber: number | null;
+  roots: MindmapNode[];
+  tagGroups: TagGroup[];
+  options: Record<string, string>;
+  diagnostics: DgmoError[];
+  error: string | null;
+}
+
+export interface MindmapLayoutNode {
+  id: string;
+  label: string;
+  description?: string;
+  metadata: Record<string, string>;
+  lineNumber: number;
+  color?: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  depth: number;
+  angle: number;
+  radius: number;
+  hiddenCount?: number;
+  hasChildren?: boolean;
+}
+
+export interface MindmapLayoutEdge {
+  sourceId: string;
+  targetId: string;
+  path: string; // SVG path d attribute
+}
+
+export interface MindmapLayoutResult {
+  nodes: MindmapLayoutNode[];
+  edges: MindmapLayoutEdge[];
+  width: number;
+  height: number;
+}

package/src/render.ts

@@ -7,6 +7,7 @@ import {
 } from './dgmo-router';
 import type { DgmoError } from './diagnostics';
 import { getPalette } from './palettes/registry';
+import type { CompactViewState } from './sharing';
 
 /**
  * Ensures DOM globals are available for D3 renderers.
@@ -73,6 +74,8 @@ export async function render(
     tagGroup?: string;
     /** Legend state for export — controls which tag group is shown in exported SVG. */
     legendState?: { activeGroup?: string; hiddenAttributes?: string[] };
+    /** View state for export — controls interactive state (collapse, swimlanes, etc.) */
+    viewState?: CompactViewState;
   }
 ): Promise<{ svg: string; diagnostics: DgmoError[] }> {
   const theme = options?.theme ?? 'light';
@@ -86,15 +89,15 @@ export async function render(
   const chartType = parseDgmoChartType(content);
   const category = chartType ? getRenderCategory(chartType) : null;
 
-  // Build orgExportState from legendState if provided
-  const legendExportState = options?.legendState
-    ? {
-        activeTagGroup: options.legendState.activeGroup ?? null,
-        hiddenAttributes: options.legendState.hiddenAttributes
-          ? new Set(options.legendState.hiddenAttributes)
-          : undefined,
-      }
-    : undefined;
+  // Build viewState from legendState (backwards compat) or use provided viewState
+  const viewState: CompactViewState | undefined =
+    options?.viewState ??
+    (options?.legendState
+      ? {
+          tag: options.legendState.activeGroup ?? undefined,
+          ha: options.legendState.hiddenAttributes,
+        }
+      : undefined);
 
   if (category === 'data-chart') {
     const svg = await renderExtendedChartForExport(
@@ -107,17 +110,11 @@ export async function render(
 
   // Visualization/diagram and unknown/null types all go through the unified renderer
   await ensureDom();
-  const svg = await renderForExport(
-    content,
-    theme,
-    paletteColors,
-    legendExportState,
-    {
-      c4Level: options?.c4Level,
-      c4System: options?.c4System,
-      c4Container: options?.c4Container,
-      tagGroup: options?.tagGroup,
-    }
-  );
+  const svg = await renderForExport(content, theme, paletteColors, viewState, {
+    c4Level: options?.c4Level,
+    c4System: options?.c4System,
+    c4Container: options?.c4Container,
+    tagGroup: options?.tagGroup,
+  });
   return { svg, diagnostics };
 }

package/src/sequence/renderer.ts

@@ -60,6 +60,11 @@ const NOTE_CHARS_PER_LINE = Math.floor(
 );
 const COLLAPSED_NOTE_H = 20;
 const COLLAPSED_NOTE_W = 40;
+const ACTIVATION_WIDTH = 10;
+const SELF_CALL_HEIGHT = 25;
+const SELF_CALL_WIDTH = 30;
+// Max note width that keeps a note within one participant lane
+const NOTE_LANE_MAX = PARTICIPANT_GAP - ACTIVATION_WIDTH - NOTE_GAP; // 135px
 
 function wrapTextLines(text: string, maxChars: number): string[] {
   const rawLines = text.split('\n');
@@ -953,6 +958,37 @@ export function renderSequenceDiagram(
   );
   if (participants.length === 0) return;
 
+  // Participant index lookup — used to clamp note width within one lane
+  const participantIndexMap = new Map<string, number>();
+  participants.forEach((p, i) => participantIndexMap.set(p.id, i));
+
+  // Extra X shift for notes after self-calls
+  const SELF_CALL_NOTE_X_SHIFT =
+    ACTIVATION_WIDTH / 2 +
+    SELF_CALL_WIDTH +
+    NOTE_GAP -
+    (ACTIVATION_WIDTH + NOTE_GAP); // 25px
+
+  const noteEffectiveMaxW = (
+    participantId: string,
+    position: 'right' | 'left',
+    afterSelfCall = false
+  ): number => {
+    const idx = participantIndexMap.get(participantId);
+    if (idx === undefined) return NOTE_MAX_W;
+    const hasNeighbor =
+      position === 'right' ? idx < participants.length - 1 : idx > 0;
+    if (!hasNeighbor) return NOTE_MAX_W;
+    const laneMax =
+      afterSelfCall && position === 'right'
+        ? NOTE_LANE_MAX - SELF_CALL_NOTE_X_SHIFT
+        : NOTE_LANE_MAX;
+    return Math.min(NOTE_MAX_W, laneMax);
+  };
+
+  const charsForWidth = (maxW: number): number =>
+    Math.floor((maxW - NOTE_PAD_H * 2 - NOTE_FOLD) / NOTE_CHAR_W);
+
   const activationsOff = parsedOptions.activations?.toLowerCase() === 'off';
 
   // Tag resolution — shared utility handles priority chain:
@@ -1049,7 +1085,39 @@ export function renderSequenceDiagram(
     return msgToLastStep.get(closestMsgIndex) ?? -1;
   };
 
-  // Find the first visible message index in an element subtree
+  // Check whether a note's preceding message is a self-call.
+  // Self-call loopback arrows extend SELF_CALL_HEIGHT below the step Y,
+  // so notes after self-calls need a larger vertical offset.
+  const isNoteAfterSelfCall = (note: SequenceNote): boolean => {
+    let closestMsgIndex = -1;
+    let closestLine = -1;
+    for (let mi = 0; mi < messages.length; mi++) {
+      if (
+        messages[mi].lineNumber < note.lineNumber &&
+        messages[mi].lineNumber > closestLine
+      ) {
+        closestLine = messages[mi].lineNumber;
+        closestMsgIndex = mi;
+      }
+    }
+    if (closestMsgIndex < 0) return false;
+    const msg = messages[closestMsgIndex];
+    return msg.from === msg.to;
+  };
+
+  // Extra gap below self-call loop before note starts
+  const SELF_CALL_NOTE_GAP = 8;
+  const noteOffsetBelow = (note: SequenceNote): number =>
+    isNoteAfterSelfCall(note)
+      ? SELF_CALL_HEIGHT + NOTE_OFFSET_BELOW + SELF_CALL_NOTE_GAP
+      : NOTE_OFFSET_BELOW;
+
+  // Find the first visible message index in an element subtree.
+  // Use lineNumber lookup instead of indexOf — collapse projection creates
+  // separate spread copies for messages[] and elements[], breaking reference equality.
+  const msgLineToIdx = new Map<number, number>();
+  messages.forEach((m, i) => msgLineToIdx.set(m.lineNumber, i));
+
   const findFirstMsgIndex = (els: SequenceElement[]): number => {
     for (const el of els) {
       if (isSequenceBlock(el)) {
@@ -1064,7 +1132,7 @@ export function renderSequenceDiagram(
         const elseIdx = findFirstMsgIndex(el.elseChildren);
         if (elseIdx >= 0) return elseIdx;
       } else if (!isSequenceSection(el) && !isSequenceNote(el)) {
-        const idx = messages.indexOf(el as SequenceMessage);
+        const idx = msgLineToIdx.get(el.lineNumber) ?? -1;
         if (idx >= 0 && !hiddenMsgIndices.has(idx)) return idx;
       }
     }
@@ -1121,8 +1189,11 @@ export function renderSequenceDiagram(
   // When notes share horizontal space with subsequent arrows, generous vertical clearance
   // is needed so note boxes don't visually cover message labels.
   const NOTE_TRAILING_GAP = 35;
-  const computeNoteHeight = (text: string): number => {
-    const lines = wrapTextLines(text, NOTE_CHARS_PER_LINE);
+  const computeNoteHeight = (
+    text: string,
+    maxChars: number = NOTE_CHARS_PER_LINE
+  ): number => {
+    const lines = wrapTextLines(text, maxChars);
     return lines.length * NOTE_LINE_H + NOTE_PAD_V * 2;
   };
   let trailingNoteSpace = 0; // extra space for notes at the end with no following message
@@ -1131,15 +1202,18 @@ export function renderSequenceDiagram(
       const el = els[i];
       if (isSequenceNote(el)) {
         // Total vertical extent of notes from the message arrow:
-        //   NOTE_OFFSET_BELOW (gap above first note)
+        //   offset (gap above first note — larger after self-calls)
         //   + each note's height + NOTE_OFFSET_BELOW (inter-note gap)
         //   + NOTE_TRAILING_GAP (gap below last note — clears next message label)
-        let totalExtent = NOTE_OFFSET_BELOW;
+        const firstOffset = noteOffsetBelow(el as SequenceNote);
+        let totalExtent = firstOffset;
         let j = i;
         while (j < els.length && isSequenceNote(els[j])) {
           const note = els[j] as SequenceNote;
+          const sc = isNoteAfterSelfCall(note);
+          const maxW = noteEffectiveMaxW(note.participantId, note.position, sc);
           const noteH = isNoteExpanded(note)
-            ? computeNoteHeight(note.text)
+            ? computeNoteHeight(note.text, charsForWidth(maxW))
             : COLLAPSED_NOTE_H;
           totalExtent += noteH + NOTE_OFFSET_BELOW;
           j++;
@@ -1401,13 +1475,18 @@ export function renderSequenceDiagram(
           let noteTopY: number;
           if (prevNoteY !== undefined && prevNote) {
             // Stack below previous note
+            const prevMaxW = noteEffectiveMaxW(
+              prevNote.participantId,
+              prevNote.position,
+              isNoteAfterSelfCall(prevNote)
+            );
             const prevNoteH = isNoteExpanded(prevNote)
-              ? computeNoteHeight(prevNote.text)
+              ? computeNoteHeight(prevNote.text, charsForWidth(prevMaxW))
               : COLLAPSED_NOTE_H;
             noteTopY = prevNoteY + prevNoteH + NOTE_OFFSET_BELOW;
           } else {
-            // First note after a message
-            noteTopY = stepY(si) + NOTE_OFFSET_BELOW;
+            // First note after a message — use larger offset after self-calls
+            noteTopY = stepY(si) + noteOffsetBelow(el);
           }
           noteYMap.set(el, noteTopY);
         } else if (isSequenceBlock(el)) {
@@ -1435,8 +1514,13 @@ export function renderSequenceDiagram(
         )
       : layoutEndY;
   for (const [note, noteTopY] of noteYMap) {
+    const maxW = noteEffectiveMaxW(
+      note.participantId,
+      note.position,
+      isNoteAfterSelfCall(note)
+    );
     const noteH = isNoteExpanded(note)
-      ? computeNoteHeight(note.text)
+      ? computeNoteHeight(note.text, charsForWidth(maxW))
       : COLLAPSED_NOTE_H;
     contentBottomY = Math.max(
       contentBottomY,
@@ -2093,7 +2177,6 @@ export function renderSequenceDiagram(
   }
 
   // Render activation rectangles (behind arrows)
-  const ACTIVATION_WIDTH = 10;
   const ACTIVATION_NEST_OFFSET = 6;
   activations.forEach((act) => {
     const px = participantX.get(act.participantId);
@@ -2285,8 +2368,7 @@ export function renderSequenceDiagram(
   }
 
   // Render steps (calls and returns in stack-inferred order)
-  const SELF_CALL_WIDTH = 30;
-  const SELF_CALL_HEIGHT = 25;
+  // SELF_CALL_WIDTH is now a module-level constant
   renderSteps.forEach((step, i) => {
     const fromX = participantX.get(step.from);
     const toX = participantX.get(step.to);
@@ -2354,6 +2436,10 @@ export function renderSequenceDiagram(
             .attr('y', y + SELF_CALL_HEIGHT / 2 + 4)
             .attr('text-anchor', 'start')
             .attr('fill', arrowColor)
+            .attr('paint-order', 'stroke fill')
+            .attr('stroke', palette.bg)
+            .attr('stroke-width', 4)
+            .attr('stroke-linejoin', 'round')
             .attr('font-size', 12)
             .attr('class', 'message-label')
             .attr(
@@ -2424,6 +2510,10 @@ export function renderSequenceDiagram(
             .attr('y', y - 8)
             .attr('text-anchor', 'middle')
             .attr('fill', arrowColor)
+            .attr('paint-order', 'stroke fill')
+            .attr('stroke', palette.bg)
+            .attr('stroke-width', 4)
+            .attr('stroke-linejoin', 'round')
             .attr('font-size', 12)
             .attr('class', 'message-label')
             .attr(
@@ -2498,6 +2588,10 @@ export function renderSequenceDiagram(
           .attr('y', y - 6)
           .attr('text-anchor', 'middle')
           .attr('fill', returnColor)
+          .attr('paint-order', 'stroke fill')
+          .attr('stroke', palette.bg)
+          .attr('stroke-width', 4)
+          .attr('stroke-linejoin', 'round')
           .attr('font-size', 11)
           .attr('class', 'message-label')
           .attr(
@@ -2539,15 +2633,27 @@ export function renderSequenceDiagram(
 
         if (expanded) {
           // --- Expanded note: full folded-corner box with wrapped text ---
-          const wrappedLines = wrapTextLines(el.text, NOTE_CHARS_PER_LINE);
+          const afterSelfCall = isNoteAfterSelfCall(el);
+          const maxW = noteEffectiveMaxW(
+            el.participantId,
+            el.position,
+            afterSelfCall
+          );
+          const maxChars = charsForWidth(maxW);
+          const wrappedLines = wrapTextLines(el.text, maxChars);
           const noteH = wrappedLines.length * NOTE_LINE_H + NOTE_PAD_V * 2;
           const maxLineLen = Math.max(...wrappedLines.map((l) => l.length));
           const noteW = Math.min(
-            NOTE_MAX_W,
+            maxW,
             Math.max(80, maxLineLen * NOTE_CHAR_W + NOTE_PAD_H * 2 + NOTE_FOLD)
           );
+          // Shift notes past self-call loopback when applicable
+          const rightOffset =
+            afterSelfCall && isRight
+              ? ACTIVATION_WIDTH / 2 + SELF_CALL_WIDTH + NOTE_GAP
+              : ACTIVATION_WIDTH + NOTE_GAP;
           const noteX = isRight
-            ? px + ACTIVATION_WIDTH + NOTE_GAP
+            ? px + rightOffset
             : px - ACTIVATION_WIDTH - NOTE_GAP - noteW;
 
           const noteG = svg
@@ -2621,8 +2727,13 @@ export function renderSequenceDiagram(
         } else {
           // --- Collapsed note: compact indicator ---
           const cFold = 6;
+          const afterSelfCallC = isNoteAfterSelfCall(el);
+          const rightOffsetC =
+            afterSelfCallC && isRight
+              ? ACTIVATION_WIDTH / 2 + SELF_CALL_WIDTH + NOTE_GAP
+              : ACTIVATION_WIDTH + NOTE_GAP;
           const noteX = isRight
-            ? px + ACTIVATION_WIDTH + NOTE_GAP
+            ? px + rightOffsetC
             : px - ACTIVATION_WIDTH - NOTE_GAP - COLLAPSED_NOTE_W;
 
           const noteG = svg

package/src/sharing.ts

@@ -30,6 +30,8 @@ export interface CompactViewState {
   rps?: number; // RPS multiplier (infra)
   spd?: number; // playback speed (infra)
   io?: Record<string, number>; // instance overrides (infra)
+  hd?: boolean; // hide descriptions (mindmap)
+  cbd?: boolean; // color by depth (mindmap)
 }
 
 export interface DecodedDiagramUrl {

package/src/sitemap/layout.ts

@@ -396,15 +396,15 @@ export function layoutSitemap(
   const pageNodeIds = new Set<string>();
   const collapsedContainerIds = new Set<string>();
 
-  // Identify containers vs pages, and detect collapsed (empty) containers
+  // Identify containers vs pages, and detect collapsed containers.
+  // A container is collapsed iff hiddenCounts records it with a positive count
+  // (meaning collapseSitemapTree pruned its descendants). Source-level empty
+  // containers (never had children) are NOT treated as collapsed.
   for (const flat of flatNodes) {
     if (flat.sitemapNode.isContainer) {
       containerIds.add(flat.sitemapNode.id);
-      // A container is "collapsed" if it has no children at all in the flat list
-      const hasAnyChild = flatNodes.some(
-        (f) => f.parentContainerId === flat.sitemapNode.id
-      );
-      if (!hasAnyChild) {
+      const hidden = hiddenCounts?.get(flat.sitemapNode.id) ?? 0;
+      if (hidden > 0) {
         collapsedContainerIds.add(flat.sitemapNode.id);
       }
     } else {
@@ -412,16 +412,31 @@ export function layoutSitemap(
     }
   }
 
+  // Sibling-page floor for collapsed containers — prevents collapsed containers
+  // from rendering smaller than meta-rich page cards in the same layout.
+  let pageMaxW = 0;
+  let pageMaxH = 0;
+  for (const f of flatNodes) {
+    if (!f.sitemapNode.isContainer) {
+      if (f.width > pageMaxW) pageMaxW = f.width;
+      if (f.height > pageMaxH) pageMaxH = f.height;
+    }
+  }
+
   // Add nodes to dagre
   for (const flat of flatNodes) {
     const node = flat.sitemapNode;
     if (node.isContainer) {
       if (collapsedContainerIds.has(node.id)) {
-        // Collapsed container — regular node with explicit dimensions
+        // Collapsed container — regular node with explicit dimensions.
+        // Floor to max page-card dims so collapsed containers never look
+        // smaller than sibling page cards.
+        const flooredW = Math.max(flat.width, pageMaxW);
+        const flooredH = Math.max(flat.height, pageMaxH);
         g.setNode(node.id, {
           label: node.label,
-          width: flat.width,
-          height: flat.height,
+          width: flooredW,
+          height: flooredH,
         });
       } else {
         // Regular container — compound node with padding for child layout
@@ -546,7 +561,15 @@ export function layoutSitemap(
           node.children.length > 0 || (hc != null && hc > 0) || undefined,
       });
     } else {
-      // Fallback
+      // Fallback — still apply the floor for consistency
+      const isCollapsed = collapsedContainerIds.has(node.id);
+      const flooredW = isCollapsed
+        ? Math.max(flat.width, pageMaxW)
+        : flat.width;
+      const fallbackH = isCollapsed
+        ? flat.height
+        : labelHeight + CONTAINER_PAD_BOTTOM;
+      const flooredH = isCollapsed ? Math.max(fallbackH, pageMaxH) : fallbackH;
       layoutContainers.push({
         nodeId: node.id,
         label: node.label,
@@ -556,8 +579,8 @@ export function layoutSitemap(
         tagMetadata: flat.fullMeta,
         x: MARGIN,
         y: MARGIN,
-        width: flat.width,
-        height: labelHeight + CONTAINER_PAD_BOTTOM,
+        width: flooredW,
+        height: flooredH,
         labelHeight,
         hiddenCount: hc,
         hasChildren: