@transitrix/diagrams 1.8.2 → 1.8.4

package/src/theme/__tests__/tokens.test.ts

@@ -0,0 +1,185 @@
+/**
+ * Brand default-theme regression tests (hub issue #548).
+ *
+ * Locks in the three-role brand mapping from `brand/transitrix_brand.md`:
+ *   - Petrol = structure (node/edge stroke) and hierarchy depth (fill tint).
+ *   - A depth ramp never switches hue — only lightness/saturation move.
+ *   - Text stays WCAG-AA readable against every fill it can be drawn on.
+ * `hc` (VS Code high-contrast) is intentionally excluded — it's an
+ * accessibility override, not one of the three brand-contract themes.
+ */
+import { describe, expect, it } from 'vitest';
+import {
+  BRAND,
+  BRAND_EMPHASIS,
+  LAYER_COLORS,
+  LEVEL_COLORS,
+  MATURITY_COLORS,
+  TREE_MATURITY_COLORS,
+  STRUCTURAL,
+  TREE_LEVEL_COLORS,
+} from '../tokens.js';
+
+function hexToRgb(hex: string): [number, number, number] {
+  const n = hex.replace('#', '');
+  return [0, 2, 4].map((i) => parseInt(n.slice(i, i + 2), 16)) as [number, number, number];
+}
+
+function relativeLuminance([r, g, b]: [number, number, number]): number {
+  const f = (v: number): number => {
+    const c = v / 255;
+    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+  };
+  const [R, G, B] = [f(r), f(g), f(b)];
+  return 0.2126 * R + 0.7152 * G + 0.0722 * B;
+}
+
+/** WCAG 2.x contrast ratio between two hex colors (1..21). */
+function contrast(a: string, b: string): number {
+  const la = relativeLuminance(hexToRgb(a));
+  const lb = relativeLuminance(hexToRgb(b));
+  const [hi, lo] = la > lb ? [la, lb] : [lb, la];
+  return (hi + 0.05) / (lo + 0.05);
+}
+
+/** Hue in degrees (0-360) from a hex color; undefined (grey) hues return -1. */
+function hue(hex: string): number {
+  const [r, g, b] = hexToRgb(hex).map((v) => v / 255);
+  const max = Math.max(r, g, b), min = Math.min(r, g, b);
+  const delta = max - min;
+  if (delta < 0.001) return -1; // achromatic
+  let h: number;
+  if (max === r) h = ((g - b) / delta) % 6;
+  else if (max === g) h = (b - r) / delta + 2;
+  else h = (r - g) / delta + 4;
+  h *= 60;
+  return h < 0 ? h + 360 : h;
+}
+
+const PETROL_HUE = hue(BRAND.petrol);
+const HUE_TOLERANCE = 6; // degrees — rounding slop from hand-tuned hex values
+
+function expectSameHueFamily(hexes: string[], label: string): void {
+  for (const hex of hexes) {
+    const h = hue(hex);
+    const diff = Math.min(Math.abs(h - PETROL_HUE), 360 - Math.abs(h - PETROL_HUE));
+    expect(diff, `${label} ${hex} should stay in the petrol hue family (got hue ${h.toFixed(1)}, petrol is ${PETROL_HUE.toFixed(1)})`).toBeLessThanOrEqual(HUE_TOLERANCE);
+  }
+}
+
+// Minimum AA text-contrast ratios this design targets. Primary/secondary text
+// is small (10-12px) so we hold the full 4.5:1 normal-text bar for the name
+// label, and the calibrated ~4.0 bar the pre-brand palette already shipped
+// for the muted secondary/id label (see brand-ramp calibration in PR #548).
+const MIN_PRIMARY_CONTRAST = 4.5;
+const MIN_SECONDARY_CONTRAST = 4.0;
+
+describe('brand default theme (#548) — structure is petrol', () => {
+  it('nodeStroke and edgeStroke are brand petrol in the light theme', () => {
+    expect(STRUCTURAL.nodeStroke.light).toBe(BRAND.petrol);
+    expect(STRUCTURAL.edgeStroke.light).toBe(BRAND.petrol);
+  });
+
+  it('nodeStroke/edgeStroke stay in the petrol hue family in the dark theme', () => {
+    expectSameHueFamily([STRUCTURAL.nodeStroke.dark, STRUCTURAL.edgeStroke.dark], 'dark stroke');
+  });
+});
+
+describe('brand default theme (#548) — tint depth never switches hue', () => {
+  it('LEVEL_COLORS light ramp stays in the petrol hue family', () => {
+    expectSameHueFamily([...LEVEL_COLORS.light], 'LEVEL light');
+  });
+  it('LEVEL_COLORS dark ramp stays in the petrol hue family', () => {
+    expectSameHueFamily([...LEVEL_COLORS.dark], 'LEVEL dark');
+  });
+  it('LAYER_COLORS (DGCA/DGA columns) stay in the petrol hue family, both themes', () => {
+    const keys = ['driver', 'factor', 'goal', 'change', 'activity'] as const;
+    expectSameHueFamily(keys.map((k) => LAYER_COLORS[k].light), 'LAYER light');
+    expectSameHueFamily(keys.map((k) => LAYER_COLORS[k].dark), 'LAYER dark');
+  });
+  it('TREE_LEVEL_COLORS (capability map bands) stay in the petrol hue family, both themes', () => {
+    const keys = ['band0', 'band1', 'band2'] as const;
+    expectSameHueFamily(keys.map((k) => TREE_LEVEL_COLORS[k].light), 'BAND light');
+    expectSameHueFamily(keys.map((k) => TREE_LEVEL_COLORS[k].dark), 'BAND dark');
+  });
+});
+
+describe('brand default theme (#548) — WCAG-AA text-on-fill contrast', () => {
+  function checkFills(label: string, fills: string[], textPrimary: string, textSecondary: string): void {
+    for (const fill of fills) {
+      expect(contrast(fill, textPrimary), `${label} ${fill} vs text-primary`).toBeGreaterThanOrEqual(MIN_PRIMARY_CONTRAST);
+      expect(contrast(fill, textSecondary), `${label} ${fill} vs text-secondary`).toBeGreaterThanOrEqual(MIN_SECONDARY_CONTRAST);
+    }
+  }
+
+  it('LEVEL_COLORS — every slot, both themes', () => {
+    checkFills('LEVEL light', [...LEVEL_COLORS.light], STRUCTURAL.textPrimary.light, STRUCTURAL.textSecondary.light);
+    checkFills('LEVEL dark', [...LEVEL_COLORS.dark], STRUCTURAL.textPrimary.dark, STRUCTURAL.textSecondary.dark);
+  });
+
+  it('LAYER_COLORS — every column, both themes', () => {
+    const keys = ['driver', 'factor', 'goal', 'change', 'activity'] as const;
+    checkFills('LAYER light', keys.map((k) => LAYER_COLORS[k].light), STRUCTURAL.textPrimary.light, STRUCTURAL.textSecondary.light);
+    checkFills('LAYER dark', keys.map((k) => LAYER_COLORS[k].dark), STRUCTURAL.textPrimary.dark, STRUCTURAL.textSecondary.dark);
+  });
+
+  it('TREE_LEVEL_COLORS — every band, both themes', () => {
+    const keys = ['band0', 'band1', 'band2'] as const;
+    checkFills('BAND light', keys.map((k) => TREE_LEVEL_COLORS[k].light), STRUCTURAL.textPrimary.light, STRUCTURAL.textSecondary.light);
+    checkFills('BAND dark', keys.map((k) => TREE_LEVEL_COLORS[k].dark), STRUCTURAL.textPrimary.dark, STRUCTURAL.textSecondary.dark);
+  });
+
+  it('textPrimary/textSecondary stay readable against the shell background', () => {
+    expect(contrast(STRUCTURAL.textPrimary.light, '#ffffff')).toBeGreaterThanOrEqual(MIN_PRIMARY_CONTRAST);
+    expect(contrast(STRUCTURAL.textPrimary.dark, '#0a1628')).toBeGreaterThanOrEqual(MIN_PRIMARY_CONTRAST);
+  });
+});
+
+describe('brand default theme (#548) — amber/orange emphasis stays distinct from functional colors', () => {
+  it('does not reuse brand amber/orange for functional status', () => {
+    // FUNCTIONAL warning/error must remain visually distinct from the brand
+    // accents so a red error is never confused with brand orange, per
+    // brand/transitrix_brand.md "Don't reuse brand orange as semantic error".
+    expect(BRAND_EMPHASIS.orange.light).toBe(BRAND.orange);
+    expect(BRAND_EMPHASIS.amber.light).toBe(BRAND.amber);
+  });
+
+  it('critical-path emphasis tint pairs with the orange stroke, both themes', () => {
+    expect(contrast(BRAND_EMPHASIS.orange.light, BRAND_EMPHASIS.orangeTint.light)).toBeGreaterThan(1.5);
+    expect(contrast(BRAND_EMPHASIS.orange.dark, BRAND_EMPHASIS.orangeTint.dark)).toBeGreaterThan(1.5);
+  });
+});
+
+describe('maturity Likert ramp — one harmonious scale, white-label contrast', () => {
+  // .maturity-pill / tree-maturity badges hardcode white label text
+  // (capability-map-preview.ts, render-capability-tree.ts) regardless of
+  // theme, so every step needs AA (light/dark) or AAA (hc, since VS Code
+  // high-contrast mode exists specifically to demand stronger contrast)
+  // against white — not against the page's own text-primary/secondary.
+  const MIN_WHITE_CONTRAST_AA = 4.5;
+  const MIN_WHITE_CONTRAST_AAA = 7;
+
+  it('MATURITY_COLORS — every step reads white text at AA, light + dark', () => {
+    for (const hex of MATURITY_COLORS.light) {
+      expect(contrast(hex, '#ffffff'), `MATURITY light ${hex} vs white`).toBeGreaterThanOrEqual(MIN_WHITE_CONTRAST_AA);
+    }
+    for (const hex of MATURITY_COLORS.dark) {
+      expect(contrast(hex, '#ffffff'), `MATURITY dark ${hex} vs white`).toBeGreaterThanOrEqual(MIN_WHITE_CONTRAST_AA);
+    }
+  });
+
+  it('MATURITY_COLORS hc — every step reads white text at AAA', () => {
+    for (const hex of MATURITY_COLORS.hc) {
+      expect(contrast(hex, '#ffffff'), `MATURITY hc ${hex} vs white`).toBeGreaterThanOrEqual(MIN_WHITE_CONTRAST_AAA);
+    }
+  });
+
+  it('TREE_MATURITY_COLORS is the same harmonious ramp as MATURITY_COLORS', () => {
+    // Previously a divergent DSM-matching pink/yellow/blue set (plus a grey
+    // L1, an odd "no signal" hue for the worst rating) — "maturity" now
+    // means the same colors everywhere it's shown.
+    expect(TREE_MATURITY_COLORS.light).toEqual(MATURITY_COLORS.light);
+    expect(TREE_MATURITY_COLORS.dark).toEqual(MATURITY_COLORS.dark);
+    expect(TREE_MATURITY_COLORS.hc).toEqual(MATURITY_COLORS.hc);
+  });
+});

package/src/theme/index.ts

@@ -1,4 +1,4 @@
 export type { AdaptiveTokens } from './tokens.js';
-export { BRAND, FUNCTIONAL, LAYER_COLORS, LEVEL_COLORS, MATURITY_COLORS, TREE_LEVEL_COLORS, TREE_MATURITY_COLORS, STRUCTURAL, TYPOGRAPHY, CSS_VAR, getBaseResetCss } from './tokens.js';
+export { BRAND, BRAND_EMPHASIS, FUNCTIONAL, LAYER_COLORS, LEVEL_COLORS, MATURITY_COLORS, TREE_LEVEL_COLORS, TREE_MATURITY_COLORS, STRUCTURAL, TYPOGRAPHY, CSS_VAR, getBaseResetCss } from './tokens.js';
 export type { ThemeId } from './themes.js';
 export { generateWebviewCss, generateSvgEmbedCss } from './themes.js';

package/src/theme/themes.ts

@@ -5,6 +5,7 @@ import {
   TREE_LEVEL_COLORS,
   TREE_MATURITY_COLORS,
   STRUCTURAL,
+  BRAND_EMPHASIS,
   TYPOGRAPHY,
   CSS_VAR,
   getBaseResetCss,
@@ -106,6 +107,9 @@ function diagramVars(variant: 'light' | 'dark' | 'hc'): string {
     `${CSS_VAR.maturity3}:${mat[2]}`,
     `${CSS_VAR.maturity4}:${mat[3]}`,
     `${CSS_VAR.maturity5}:${mat[4]}`,
+    `${CSS_VAR.brandAmber}:${BRAND_EMPHASIS.amber[variant]}`,
+    `${CSS_VAR.brandOrange}:${BRAND_EMPHASIS.orange[variant]}`,
+    `${CSS_VAR.brandOrangeTint}:${BRAND_EMPHASIS.orangeTint[variant]}`,
   ].join(';') + ';' + levelVars + treeVars;
 }
 

package/src/theme/tokens.ts

@@ -1,4 +1,4 @@
-/** Transitrix brand palette. */
+/** Transitrix brand palette (`brand/transitrix_brand.md` — canonical). */
 export const BRAND = {
   petrol: '#004d67',
   amber:  '#ffaf00',
@@ -13,61 +13,109 @@ export const FUNCTIONAL = {
   info:    '#1d6fa8',
 } as const;
 
-/** Fill colors for FGCA/DGCA notation columns. */
+/**
+ * Amber/orange "author emphasis" accents, theme-adjusted for contrast against
+ * each theme's background (dark theme gets the brand hues lightened per
+ * `brand/transitrix_brand.md` §Themes: "brand colours slightly desaturated
+ * for contrast on dark surfaces"). `orangeTint` is the light emphasis-fill
+ * paired with an `orange` stroke (e.g. Activities critical-path nodes).
+ * `hc` intentionally falls back to the plain BRAND hex — VS Code
+ * high-contrast mode prioritises accessibility overrides over brand fidelity.
+ */
+export const BRAND_EMPHASIS = {
+  amber:      { light: BRAND.amber, dark: '#ffc83d', hc: BRAND.amber },
+  orange:     { light: BRAND.orange, dark: '#ff7542', hc: BRAND.orange },
+  orangeTint: { light: '#ffeee5', dark: '#432114', hc: '#ffeee5' },
+} as const;
+
+/**
+ * Fill colors for FGCA/DGCA notation columns — a petrol tint per stage
+ * (Driver → Goal → Change → Activity), deepening left to right like the
+ * Goals-tree level ladder below. Petrol tint = structural position, never a
+ * hue switch, per the brand's "structure via petrol" role mapping.
+ */
 export const LAYER_COLORS = {
-  driver:   { light: '#fef3c7', dark: '#292108', hc: '#f59e0b' },
-  factor:   { light: '#fef3c7', dark: '#292108', hc: '#f59e0b' },
-  goal:     { light: '#e0e7ff', dark: '#1e1b4b', hc: '#818cf8' },
-  change:   { light: '#dbeafe', dark: '#0c2042', hc: '#60a5fa' },
-  activity: { light: '#d4edda', dark: '#0a2414', hc: '#4ade80' },
+  driver:   { light: '#eaf3f6', dark: '#17262c', hc: '#f59e0b' },
+  factor:   { light: '#eaf3f6', dark: '#17262c', hc: '#f59e0b' },
+  goal:     { light: '#d9ecf2', dark: '#192f37', hc: '#818cf8' },
+  change:   { light: '#c7e5ef', dark: '#1a3842', hc: '#60a5fa' },
+  activity: { light: '#b4e0ee', dark: '#1a414e', hc: '#4ade80' },
 } as const;
 
-/** Level fill colors for Goals tree nodes — 8 slots, cycled by level index. */
+/**
+ * Level fill colors for Goals tree nodes — 8 slots, cycled by level index.
+ * A single-hue petrol tint ramp (level-0 lightest/root → level-7 deepest);
+ * hue never switches with depth. Saturation/lightness tuned so text-primary
+ * and text-secondary keep at least their pre-brand contrast ratio against
+ * every slot — see `theme/__tests__/tokens.test.ts`.
+ */
 export const LEVEL_COLORS = {
-  light: ['#dbeafe', '#e0e7ff', '#d4edda', '#fef3c7', '#fce7f3', '#e0f2fe', '#f3e8ff', '#fef9c3'],
-  dark:  ['#0c2042', '#1e1b4b', '#0a2414', '#292108', '#2a0c1f', '#071e2e', '#1a0c33', '#2a2107'],
+  light: ['#eef4f7', '#e6f1f4', '#dfedf1', '#d7e9ef', '#cee6ed', '#c6e2ec', '#bfe0eb', '#b7deeb'],
+  dark:  ['#152328', '#16292f', '#172e36', '#18333d', '#183944', '#183f4c', '#184554', '#174b5c'],
   hc:    ['#60a5fa', '#818cf8', '#4ade80', '#f59e0b', '#f472b6', '#38bdf8', '#a78bfa', '#facc15'],
 } as const;
 
-/** Structural diagram colors (nodes, edges, text). */
+/**
+ * Structural diagram colors (nodes, edges, text). nodeStroke/edgeStroke are
+ * brand petrol — "structure via petrol" per the brand's role mapping.
+ * textPrimary is a dark petrol ink (light theme) / near-white petrol-tinted
+ * (dark theme); textSecondary stays a muted grey with a faint petrol lean.
+ * `hc` is untouched — VS Code high-contrast accessibility overrides win over
+ * brand fidelity there.
+ */
 export const STRUCTURAL = {
-  nodeStroke:    { light: '#94a3b8', dark: '#475569', hc: '#e2e8f0' },
-  edgeStroke:    { light: '#94a3b8', dark: '#475569', hc: '#e2e8f0' },
-  textPrimary:   { light: '#1e293b', dark: '#f1f5f9', hc: '#ffffff' },
-  textSecondary: { light: '#64748b', dark: '#94a3b8', hc: '#cbd5e1' },
-  headerText:    { light: '#374151', dark: '#e5e7eb', hc: '#ffffff' },
+  nodeStroke:    { light: BRAND.petrol, dark: '#53a9c6', hc: '#e2e8f0' },
+  edgeStroke:    { light: BRAND.petrol, dark: '#53a9c6', hc: '#e2e8f0' },
+  textPrimary:   { light: '#0d2b35', dark: '#edf5f8', hc: '#ffffff' },
+  textSecondary: { light: '#516970', dark: '#adc8d1', hc: '#cbd5e1' },
+  headerText:    { light: '#0d2b35', dark: '#edf5f8', hc: '#ffffff' },
 } as const;
 
 /**
- * Maturity scale fill colors — Likert 1..5, danger→success.
+ * Maturity scale fill colors — Likert 1..5, danger→success. A single
+ * harmonious ramp: consistent saturation curve, hue stepping smoothly
+ * red→orange→gold→yellow-green→green (never jumping registers the way the
+ * previous per-theme picks did), tuned so the badge's hardcoded white label
+ * text (`.maturity-pill`, capability-map-preview.ts) stays ≥4.5:1 AA at
+ * every step. Same ramp for light/dark — these are small solid badges, not
+ * background tints, so theme brightness doesn't change the contrast need.
+ * `hc` pushes the same hues darker/more saturated for AAA (≥7:1), since VS
+ * Code high-contrast mode exists specifically to demand stronger contrast.
  * Used by Capability Map and any future maturity-based notation.
  */
 export const MATURITY_COLORS = {
-  light: ['#b91c1c', '#d97706', '#ca8a04', '#65a30d', '#15803d'],
-  dark:  ['#7f1d1d', '#92400e', '#854d0e', '#3f6212', '#14532d'],
-  hc:    ['#f87171', '#fb923c', '#facc15', '#a3e635', '#4ade80'],
+  light: ['#bf2518', '#b05911', '#8d7011', '#407d21', '#237b48'],
+  dark:  ['#bf2518', '#b05911', '#8d7011', '#407d21', '#237b48'],
+  hc:    ['#a0190d', '#864109', '#5a4607', '#316317', '#155630'],
 } as const;
 
 /**
- * DSM-matching capability tree node fill colors, grouped by depth band.
- *   band0: depth 0–2 (pink)
- *   band1: depth 3–4 (yellow)
- *   band2: depth 5+  (blue)
+ * Capability tree node fill colors, grouped by depth band — a 3-step petrol
+ * tint (shallow → deep), same "petrol tint = structural depth" rule as
+ * LEVEL_COLORS above. Previously a DSM-matching pink/yellow/blue scheme;
+ * brand/transitrix_brand.md ("Components") anticipates DSM adopting the same
+ * shared color tokens, so Studio moving first is convergence, not drift.
+ *   band0: depth 0–2 (shallowest)
+ *   band1: depth 3–4
+ *   band2: depth 5+  (deepest)
  */
 export const TREE_LEVEL_COLORS = {
-  band0: { light: '#fee0e0', dark: '#3d0f0f', hc: '#ff9999' },
-  band1: { light: '#ffffcb', dark: '#3a3500', hc: '#ffff88' },
-  band2: { light: '#c2f0ff', dark: '#003d4d', hc: '#66ccff' },
+  band0: { light: '#e6f1f4', dark: '#152b32', hc: '#ff9999' },
+  band1: { light: '#d0e9f1', dark: '#153b47', hc: '#ffff88' },
+  band2: { light: '#b5e3f2', dark: '#114c5f', hc: '#66ccff' },
 } as const;
 
 /**
- * DSM-matching maturity badge fills for the capability tree (L1–L5).
- * Distinct from MATURITY_COLORS which drives the cards / compliance views.
+ * Maturity badge fills for the capability tree (L1–L5). Same ramp as
+ * MATURITY_COLORS — previously a separate DSM-matching pink/yellow/blue set
+ * that didn't even share L1's meaning (grey = lowest maturity, an odd
+ * "no signal" hue for the worst rating) and had white-label contrast as low
+ * as 1.07:1 in `hc`. One harmonious Likert ramp for "maturity" everywhere.
  */
 export const TREE_MATURITY_COLORS = {
-  light: ['#c1c1c1', '#ff3d67', '#ff9a59', '#fdef59', '#83cca3'],
-  dark:  ['#555555', '#cc1040', '#d06020', '#c8c000', '#4d9970'],
-  hc:    ['#cccccc', '#ff6699', '#ffbb77', '#ffff44', '#88ddaa'],
+  light: MATURITY_COLORS.light,
+  dark:  MATURITY_COLORS.dark,
+  hc:    MATURITY_COLORS.hc,
 } as const;
 
 /**
@@ -158,6 +206,9 @@ export const CSS_VAR = {
   treeMaturity3:    '--ts-tree-maturity-3',
   treeMaturity4:    '--ts-tree-maturity-4',
   treeMaturity5:    '--ts-tree-maturity-5',
+  brandAmber:       '--ts-brand-amber',
+  brandOrange:      '--ts-brand-orange',
+  brandOrangeTint:  '--ts-brand-orange-tint',
 } as const;
 
 export function getBaseResetCss(): string {

package/src/webview/__tests__/entity-text-layout.test.ts

@@ -1,13 +1,17 @@
 import { describe, expect, it } from 'vitest';
 import {
   layoutCenteredEntityText,
+  layoutLeafBlockText,
+  layoutHeaderBlockText,
   LINE_H_PRIMARY,
   LINE_H_SECONDARY,
+  TEXT_MARGIN_Y,
   maxCharsForInnerWidth,
   ROW_GROUP_GAP,
   wrapWords,
   wrapTextLines,
 } from '../entity-text-layout.js';
+import { ENTITY_NODE_SIZE } from '../../node-size-presets.js';
 
 describe('entity-text-layout', () => {
   it('wrapWords respects max lines and truncates with ellipsis', () => {
@@ -71,3 +75,108 @@ describe('entity-text-layout', () => {
     expect(lines.every((l) => l.length <= 10)).toBe(true);
   });
 });
+
+// Approximate half-extent (px) of each text class's glyphs around its centre
+// y — font-size / 2, the same heuristic the render-blocks overlap regression
+// test (#419) uses. Used below to assert text never visually crosses the box
+// border, not just that the *nominal* line-height budget fits.
+const HALF_EXTENT: Record<string, number> = {
+  'text-primary': 6, // 12px font
+  'text-secondary': 6, // 11px font, rounded up
+  'text-id': 5, // 10px font
+};
+
+describe('entity text layout — never overflows the box, always keeps padding', () => {
+  const PRESETS = Object.entries(ENTITY_NODE_SIZE); // compact/normal/wide
+  const NAMES = [
+    'Short',
+    'Achieve full GDPR & NIS2 compliance',
+    'A name so long it would need three or more lines to render in full without any height limit at all',
+  ];
+
+  function assertNoOverflowAndPadded(
+    specs: { cls: string; y: number }[],
+    boxTop: number,
+    boxBottom: number,
+  ): void {
+    for (const s of specs) {
+      const half = HALF_EXTENT[s.cls] ?? 6;
+      expect(s.y - half).toBeGreaterThanOrEqual(boxTop);
+      expect(s.y + half).toBeLessThanOrEqual(boxBottom);
+    }
+  }
+
+  for (const [presetName, size] of PRESETS) {
+    for (const withType of [false, true]) {
+      for (const name of NAMES) {
+        it(`layoutCenteredEntityText: ${presetName} preset, type=${withType}, name="${name.slice(0, 20)}…" stays inside the box`, () => {
+          const boxY = 0;
+          const specs = layoutCenteredEntityText({
+            boxX: 0,
+            boxY,
+            boxWidth: size.width,
+            boxHeight: size.height,
+            name,
+            type: withType ? 'Strategic Goal' : undefined,
+            id: 'GOAL-EU-COMPLIANCE-1',
+            nameMaxLines: 2,
+            idMaxLines: 1,
+          });
+          assertNoOverflowAndPadded(specs, boxY, boxY + size.height);
+        });
+      }
+    }
+  }
+
+  it('reproduces the reported case (wide preset, 2-line name + type + long id) with real padding on all sides', () => {
+    const size = ENTITY_NODE_SIZE.normal;
+    const boxY = 100;
+    const specs = layoutCenteredEntityText({
+      boxX: 0,
+      boxY,
+      boxWidth: size.width,
+      boxHeight: size.height,
+      name: 'Achieve full GDPR & NIS2 compliance',
+      type: 'Project Goal',
+      id: 'GOAL-EU-COMPLIANCE-1',
+      nameMaxLines: 2,
+      idMaxLines: 1,
+    });
+    const nameLines = specs.filter((s) => s.cls === 'text-primary');
+    expect(nameLines.length).toBe(2); // normal preset is tall enough to keep both lines
+    assertNoOverflowAndPadded(specs, boxY, boxY + size.height);
+    // Explicit padding, not just "doesn't cross the border".
+    const firstTop = Math.min(...specs.map((s) => s.y - (HALF_EXTENT[s.cls] ?? 6)));
+    const lastBottom = Math.max(...specs.map((s) => s.y + (HALF_EXTENT[s.cls] ?? 6)));
+    expect(firstTop - boxY).toBeGreaterThanOrEqual(TEXT_MARGIN_Y);
+    expect(boxY + size.height - lastBottom).toBeGreaterThanOrEqual(TEXT_MARGIN_Y);
+  });
+
+  it('layoutLeafBlockText stays inside the box for compact preset with a long name and id', () => {
+    const size = ENTITY_NODE_SIZE.compact;
+    const boxY = 0;
+    const specs = layoutLeafBlockText({
+      boxX: 0,
+      boxY,
+      boxWidth: size.width,
+      boxHeight: size.height,
+      name: 'Personal data records that linger after consent withdrawal across many systems and archives',
+      id: 'VERY_LONG_BLOCK_IDENTIFIER_WITH_MANY_SEGMENTS_AND_MORE',
+    });
+    assertNoOverflowAndPadded(specs, boxY, boxY + size.height);
+  });
+
+  it('layoutHeaderBlockText stays inside a short header strip', () => {
+    const boxY = 0;
+    const headerHeight = 28;
+    const specs = layoutHeaderBlockText({
+      boxX: 0,
+      boxY,
+      boxWidth: 250,
+      headerHeight,
+      name: 'A fairly long container name here',
+      id: 'VERY_LONG_CONTAINER_IDENTIFIER',
+    });
+    assertNoOverflowAndPadded(specs, boxY, boxY + headerHeight);
+  });
+});