@12ui/design 0.2.43 → 0.2.45

package/prototype-kit/lib/shell-identity.mjs

@@ -0,0 +1,139 @@
+const SOURCE_ID_ATTRIBUTE = 'data-proto-shell-source-id';
+const ID_REFERENCE_ATTRIBUTES = new Set([
+  'aria-activedescendant',
+  'aria-controls',
+  'aria-describedby',
+  'aria-details',
+  'aria-errormessage',
+  'aria-flowto',
+  'aria-labelledby',
+  'aria-owns',
+  'commandfor',
+  'data-proto-field',
+  'data-proto-label',
+  'data-proto-submit-for',
+  'for',
+  'form',
+  'headers',
+  'list',
+  'popovertarget',
+]);
+
+function escapeRegex(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+function safeIdentityPart(value) {
+  return String(value).toLowerCase().replace(/[^a-z0-9_-]+/g, '-').replace(/^-+|-+$/g, '') || 'shell';
+}
+
+function rewriteHashIds(value, identities) {
+  let rewritten = value;
+  for (const [sourceId, physicalId] of [...identities].sort(([left], [right]) => right.length - left.length)) {
+    rewritten = rewritten.replace(
+      new RegExp(`#${escapeRegex(sourceId)}(?=[^A-Za-z0-9_-]|$)`, 'g'),
+      `#${physicalId}`,
+    );
+  }
+  return rewritten;
+}
+
+function rewriteIdentityReferences(root, identities) {
+  for (const element of [root, ...root.querySelectorAll('*')]) for (const attribute of [...element.attributes]) {
+    let value = attribute.value;
+    if (ID_REFERENCE_ATTRIBUTES.has(attribute.name)) {
+      value = value.split(/(\s+)/).map((token) => identities.get(token) || token).join('');
+    }
+    value = rewriteHashIds(value, identities);
+    if (attribute.name === 'begin' || attribute.name === 'end') {
+      for (const [sourceId, physicalId] of identities) {
+        value = value.replace(
+          new RegExp(`(^|;)${escapeRegex(sourceId)}(?=\\.)`, 'g'),
+          `$1${physicalId}`,
+        );
+      }
+    }
+    if (value !== attribute.value) element.setAttribute(attribute.name, value);
+  }
+}
+
+function unusedNamespace(document, parts) {
+  const existing = [...document.querySelectorAll('[id]')].map((element) => element.id);
+  const base = `proto-shell-${parts.map(safeIdentityPart).join('-')}`;
+  let namespace = base;
+  let suffix = 2;
+  while (existing.some((id) => id === namespace || id.startsWith(`${namespace}-`))) {
+    namespace = `${base}-${suffix}`;
+    suffix++;
+  }
+  return namespace;
+}
+
+function isolatedElements(root, sourceId) {
+  const elements = [];
+  if (root.nodeType === 1 && root.getAttribute(SOURCE_ID_ATTRIBUTE) === sourceId) elements.push(root);
+  for (const element of root.querySelectorAll(`[${SOURCE_ID_ATTRIBUTE}]`)) {
+    if (element.getAttribute(SOURCE_ID_ATTRIBUTE) === sourceId) elements.push(element);
+  }
+  return elements;
+}
+
+function identitiesIn(root) {
+  return new Map(
+    [root, ...root.querySelectorAll(`[${SOURCE_ID_ATTRIBUTE}]`)]
+      .filter((element) => element.getAttribute(SOURCE_ID_ATTRIBUTE))
+      .map((element) => [element.getAttribute(SOURCE_ID_ATTRIBUTE), element.id]),
+  );
+}
+
+/** Clone foreign shell DOM under opaque physical ids and rewrite every internal reference and donor selector. */
+export function isolateTransplantedShell({ document, sourceElement, css, namespaceParts }) {
+  const clone = sourceElement.cloneNode(true);
+  const identityNodes = [clone, ...clone.querySelectorAll('[id]')].filter((element) => element.id);
+  const identities = new Map();
+  const namespace = unusedNamespace(document, namespaceParts);
+  for (const [index, element] of identityNodes.entries()) {
+    if (identities.has(element.id)) {
+      throw new Error(`Canonical shell isolation found duplicate donor id ${element.id}.`);
+    }
+    identities.set(element.id, `${namespace}-${index + 1}`);
+  }
+  rewriteIdentityReferences(clone, identities);
+  for (const element of identityNodes) {
+    const sourceId = element.id;
+    element.id = identities.get(sourceId);
+    element.setAttribute(SOURCE_ID_ATTRIBUTE, sourceId);
+  }
+  return {
+    css: rewriteHashIds(css, identities),
+    html: clone.outerHTML,
+    identities,
+    rootId: identities.get(sourceElement.id),
+  };
+}
+
+/** Resolve a logical donor id to the physical nodes emitted for this document or subtree. */
+export function shellElementsForSourceId(root, sourceId) {
+  const isolated = isolatedElements(root, sourceId);
+  if (isolated.length > 0) return isolated;
+  const document = root.nodeType === 9 ? root : root.ownerDocument;
+  const original = document?.getElementById(sourceId) || null;
+  return original && (root.nodeType === 9 || root === original || root.contains(original)) ? [original] : [];
+}
+
+/** Build a CSS selector that follows a logical donor identity through shell isolation. */
+export function shellSelectorForSourceId(document, sourceId) {
+  const elements = shellElementsForSourceId(document, sourceId);
+  return (elements.length > 0 ? elements.map((element) => `#${element.id}`) : [`#${sourceId}`]).join(',');
+}
+
+/** Rewrite an additional donor rule set for a shell that was already isolated as part of an ancestor. */
+export function cssForIsolatedShell(root, css) {
+  return rewriteHashIds(css, identitiesIn(root));
+}
+
+export function rulesFor(css, id) {
+  // One selector per rule in these exports; retain rules owned by this shell id family.
+  const re = new RegExp(`#${escapeRegex(id)}(?:-[A-Za-z0-9_-]*)?(?:[:>\\s][^{]*)?\\{[^}]*\\}`, 'g');
+  return (css.match(re) || []).join('\n');
+}

package/prototype-kit/lib/shell-stitching.mjs

@@ -1,5 +1,11 @@
 import { declaredActiveMarkers, linkedNavForUnit } from './nav-active-state.mjs';
 import { needsCanonicalShell, shellForBand } from './shell-consistency.mjs';
+import {
+  cssForIsolatedShell,
+  isolateTransplantedShell,
+  rulesFor,
+  shellElementsForSourceId,
+} from './shell-identity.mjs';
 import { shouldTransplantShell } from './shells.mjs';
 import { normalizeText } from './text.mjs';
 
@@ -26,6 +32,7 @@ function markerSnapshots({ document, shell, markers, rulesFor, styleText }) {
     if (!element) return [];
     return [{
       ...marker,
+      element: element.cloneNode(true),
       html: element.outerHTML,
       css: rulesFor(css, marker.id),
       item: shell.items.find((item) => item.id === marker.id),
@@ -34,20 +41,28 @@ function markerSnapshots({ document, shell, markers, rulesFor, styleText }) {
   });
 }
 
-function removeMarkers(document, markers) {
-  for (const marker of markers) document.getElementById(marker.id)?.remove();
+function removeMarkers(shellElement, markers) {
+  for (const marker of markers) shellElementsForSourceId(shellElement, marker.id)[0]?.remove();
 }
 
-function placeMarker({ shellElement, shell, marker, targetItem, extraCss }) {
-  shellElement.insertAdjacentHTML('beforeend', marker.html);
-  if (marker.css) extraCss.push(marker.css);
+function placeMarker({ document, shellElement, shell, marker, targetItem, extraCss, namespaceParts }) {
+  const isolated = isolateTransplantedShell({
+    document,
+    sourceElement: marker.element,
+    css: marker.css,
+    namespaceParts,
+  });
+  shellElement.insertAdjacentHTML('beforeend', isolated.html);
+  if (isolated.css) extraCss.push(isolated.css);
+  const outputMarker = { ...marker, id: isolated.identities.get(marker.id) };
   const sourceTarget = marker.targetItem;
   const source = marker.item;
-  if (!source) return;
+  if (!source) return outputMarker;
   const desiredX = targetItem && sourceTarget ? targetItem.x + (source.x - sourceTarget.x) : source.x;
   const desiredY = targetItem && sourceTarget ? targetItem.y + (source.y - sourceTarget.y) : source.y;
-  extraCss.push(`#${marker.id}{position:absolute!important;left:${desiredX - shell.box[0]}px!important;top:${desiredY - shell.box[1]}px!important;`
+  extraCss.push(`#${outputMarker.id}{position:absolute!important;left:${desiredX - shell.box[0]}px!important;top:${desiredY - shell.box[1]}px!important;`
     + `width:${source.w}px!important;height:${source.h}px!important;margin:0!important;translate:none!important}`);
+  return outputMarker;
 }
 
 function decisionForRegion({ unit, donorPage, recipientPage, region, canonicalShell }) {
@@ -83,7 +98,6 @@ export function stitchUnitShells({
   unit,
   canonicalShell,
   navRows,
-  rulesFor,
   styleText,
 }) {
   const extraCss = [];
@@ -142,31 +156,39 @@ export function stitchUnitShells({
         const donorElement = donorDocument.getElementById(pair.canonical.containerId);
         const root = bandRoot(document, pair.key);
         const host = shellHost(root);
-        const alreadyPlaced = document.getElementById(pair.canonical.containerId);
+        const alreadyPlaced = root && shellElementsForSourceId(root, pair.canonical.containerId)[0];
         if (!donorElement || !root || !host || (!root.contains(recipientElement) && !root.contains(alreadyPlaced))) {
           throw new Error(`Canonical shell commit lost declared ${region} DOM in band ${pair.key}.`);
         }
+        const donorAlreadyIsolated = alreadyPlaced && alreadyPlaced.id !== pair.canonical.containerId;
+        let outputShell = donorAlreadyIsolated ? alreadyPlaced : null;
         if (recipientElement && root.contains(recipientElement)) {
-          const recipientId = recipientElement.id;
-          recipientElement.insertAdjacentHTML('beforebegin', donorElement.outerHTML);
-          recipientElement.replaceChildren();
-          if (recipientId === pair.canonical.containerId) {
-            const placeholderId = `${recipientId}-proto-shell-space`;
-            const placeholderCss = rulesFor(styleText(document), recipientId)
-              .replaceAll(`#${recipientId}`, `#${placeholderId}`);
-            recipientElement.id = placeholderId;
-            if (placeholderCss) extraCss.push(placeholderCss);
+          if (!donorAlreadyIsolated) {
+            const isolated = isolateTransplantedShell({
+              document,
+              sourceElement: donorElement,
+              css: rulesFor(styleText(donorDocument), pair.canonical.containerId),
+              namespaceParts: [pair.key, region],
+            });
+            recipientElement.insertAdjacentHTML('beforebegin', isolated.html);
+            outputShell = document.getElementById(isolated.rootId);
+            if (isolated.css) extraCss.push(isolated.css);
           }
+          recipientElement.replaceChildren();
           recipientElement.setAttribute('data-proto-shell-space', region);
           recipientElement.setAttribute('aria-hidden', 'true');
           extraCss.push(`#${recipientElement.id}{visibility:hidden!important;pointer-events:none!important}`);
         }
-        outputShellId = pair.canonical.containerId;
-        const outputShell = document.getElementById(outputShellId);
+        outputShellId = outputShell?.id || null;
         if (!outputShell || !root.contains(outputShell)) {
           throw new Error(`Canonical shell commit did not place ${region} in band ${pair.key}.`);
         }
-        extraCss.push(rulesFor(styleText(donorDocument), pair.canonical.containerId));
+        if (outputShell === alreadyPlaced) {
+          extraCss.push(cssForIsolatedShell(
+            outputShell,
+            rulesFor(styleText(donorDocument), pair.canonical.containerId),
+          ));
+        }
         const donorBand = donorPage.bands.find((band) => band.key === pair.key);
         const parentShell = donorBand?.shells.find((candidate) => {
           if (candidate.containerId === pair.canonical.containerId) return false;
@@ -180,21 +202,36 @@ export function stitchUnitShells({
               pair.canonical.box[1] - parentShell.box[1],
             ]
           : pair.canonical.box;
-        extraCss.push(`#${pair.canonical.containerId}{position:absolute!important;left:${x}px!important;top:${y}px!important;`
+        extraCss.push(`#${outputShellId}{position:absolute!important;left:${x}px!important;top:${y}px!important;`
           + 'margin:0!important;z-index:100000!important}');
-        removeMarkers(document, canonicalMarkers);
+        removeMarkers(outputShell, canonicalMarkers);
         const matchingSource = linkedNav
           ? sourceSnapshots.find((marker) => normalizeText(marker.targetText) === normalizeText(linkedNav.text))
           : null;
         const markerToPlace = matchingSource || (linkedNav ? donorSnapshots[0] : null);
         if (markerToPlace) {
-          placeMarker({ shellElement: outputShell, shell: pair.canonical, marker: markerToPlace, targetItem, extraCss });
-          outputMarkers = [{ ...markerToPlace, id: markerToPlace.id }];
+          outputMarkers = [placeMarker({
+            document,
+            shellElement: outputShell,
+            shell: pair.canonical,
+            marker: markerToPlace,
+            targetItem,
+            extraCss,
+            namespaceParts: [pair.key, region, 'marker'],
+          })];
         } else if (!linkedNav) {
+          outputMarkers = [];
           for (const marker of sourceSnapshots) {
-            placeMarker({ shellElement: outputShell, shell: pair.canonical, marker, targetItem: null, extraCss });
+            outputMarkers.push(placeMarker({
+              document,
+              shellElement: outputShell,
+              shell: pair.canonical,
+              marker,
+              targetItem: null,
+              extraCss,
+              namespaceParts: [pair.key, region, 'marker'],
+            }));
           }
-          outputMarkers = sourceSnapshots;
         } else outputMarkers = [];
         changes++;
       }
@@ -203,6 +240,10 @@ export function stitchUnitShells({
           || outputMarkers[0]
           || null
         : null;
+      const outputShell = document.getElementById(outputShellId);
+      const outputNavId = targetItem
+        ? shellElementsForSourceId(outputShell || document, targetItem.id)[0]?.id || targetItem.id
+        : null;
       bands.get(pair.key)?.regions.push({
         region,
         shellId: outputShellId,
@@ -210,8 +251,8 @@ export function stitchUnitShells({
         consistencyStatus: decision.commit || decision.reason === 'canonical-page' ? 'canonical' : 'silent',
         activeMarkerIds: outputMarkers.map((marker) => marker.id),
         active: linkedNav && targetItem && activeMarker
-          ? { status: 'linked', navText: linkedNav.text, navId: targetItem.id, markerId: activeMarker.id }
-          : linkedNav ? { status: 'unproven', navText: linkedNav.text, navId: targetItem?.id || null, markerId: null }
+          ? { status: 'linked', navText: linkedNav.text, navId: outputNavId, markerId: activeMarker.id }
+          : linkedNav ? { status: 'unproven', navText: linkedNav.text, navId: outputNavId, markerId: null }
             : { status: 'silent', navText: null, navId: null, markerId: null },
         changed: decision.commit,
       });

package/prototype-kit/polish/ground-probe.mjs

@@ -0,0 +1,119 @@
+// Real-pixel paint verification for section breathing.
+//
+// Ordinary seam pixels remain strict (owner colour +/-2). One measured exception is admitted: a neutral, monotone
+// drop-shadow gradient may darken the top of the new air by at most 8 levels, must fade through at least three levels,
+// may change by at most two levels per row, and must return to the owner colour within 20 px. This is the exact shared
+// signature of the r10 probe-declined population; hue shifts, flat bands, hard lines, and floor exposure still fail.
+import sharp from 'sharp';
+
+export const STRICT_CHANNEL_TOLERANCE = 2;
+export const SHADOW_MAX_CHANNEL_DELTA = 8;
+export const SHADOW_MAX_FADE_PX = 20;
+
+const parseRgb = (s) => {
+  const m = s && s.match(/rgba?\(([^)]+)\)/); if (!m) return null;
+  const p = m[1].split(/[, /]+/).filter(Boolean).map(Number);
+  return { r: p[0], g: p[1], b: p[2] };
+};
+const pixelAt = (data, info, x, y) => {
+  const i = (y * info.width + x) * info.channels;
+  return { r: data[i], g: data[i + 1], b: data[i + 2] };
+};
+const channelDistance = (a, b) => Math.max(Math.abs(a.r - b.r), Math.abs(a.g - b.g), Math.abs(a.b - b.b));
+
+export function shadowGradientProfile(data, info, x, want) {
+  const last = Math.min(info.height - 1, SHADOW_MAX_FADE_PX);
+  const deltas = [];
+  for (let y = 0; y <= last; y++) {
+    const got = pixelAt(data, info, x, y);
+    const channels = [want.r - got.r, want.g - got.g, want.b - got.b];
+    if (channels.some((d) => d < 0 || d > SHADOW_MAX_CHANNEL_DELTA)) return { ok: false, reason: 'not-bounded-darkening', deltas };
+    if (Math.max(...channels) - Math.min(...channels) > 1) return { ok: false, reason: 'hue-shift', deltas };
+    deltas.push(Math.max(...channels));
+  }
+  const exactAt = deltas.findIndex((d) => d <= STRICT_CHANNEL_TOLERANCE);
+  if (deltas[0] <= STRICT_CHANNEL_TOLERANCE || exactAt < 0) return { ok: false, reason: 'does-not-fade', deltas };
+  if (new Set(deltas.slice(0, exactAt + 1)).size < 3) return { ok: false, reason: 'not-a-gradient', deltas };
+  for (let i = 1; i <= exactAt; i++) {
+    if (deltas[i] > deltas[i - 1] || deltas[i - 1] - deltas[i] > 2) return { ok: false, reason: 'not-monotone-soft', deltas };
+  }
+  if (deltas.slice(exactAt).some((d) => d > STRICT_CHANNEL_TOLERANCE)) return { ok: false, reason: 'returns-after-fade', deltas };
+  return { ok: true, exactAt, deltas };
+}
+
+export async function probeSeams(page, seams, baselineDocumentHeight) {
+  const failures = []; let probes = 0; let toleratedShadowGradients = 0;
+  const height = await page.evaluate(() => document.documentElement.scrollHeight);
+  const expected = (baselineDocumentHeight || 0) + seams.reduce((n, s) => n + s.addition, 0);
+  if (baselineDocumentHeight && Math.abs(height - expected) > 1) failures.push({ kind: 'document-height', expected, actual: height });
+  const floor = await page.evaluate(() => ({
+    body: getComputedStyle(document.body).backgroundColor,
+    html: getComputedStyle(document.documentElement).backgroundColor,
+  }));
+  for (const seam of seams) {
+    const geometry = await page.evaluate(({ before, after, attachments }) => {
+      const a = document.getElementById(before), b = document.getElementById(after);
+      if (!a || !b) return null;
+      const ar = a.getBoundingClientRect(), br = b.getBoundingClientRect();
+      const strip = { top: ar.bottom + window.scrollY, bottom: br.top + window.scrollY, left: ar.left + window.scrollX, width: ar.width };
+      const attachmentRects = (attachments || []).flatMap((expected) => {
+        const el = document.getElementById(expected.id); if (!el) return [];
+        const r = el.getBoundingClientRect();
+        return [{ ...expected, top: r.top + window.scrollY, bottom: r.bottom + window.scrollY, left: r.left + window.scrollX, right: r.right + window.scrollX }];
+      });
+      return { strip, attachmentRects };
+    }, seam);
+    if (!geometry) { failures.push({ kind: 'coverage', seam, reason: 'section missing' }); continue; }
+    const { strip, attachmentRects } = geometry;
+    const seamName = `${seam.before}→${seam.after}`;
+    const h = strip.bottom - strip.top; const expectedStripHeight = (seam.baseStripHeight || 0) + seam.addition;
+    if (Math.abs(h - expectedStripHeight) > 0.75) {
+      failures.push({ kind: 'coverage', seam: seamName, reason: `seam height ${h.toFixed(1)} != ${expectedStripHeight.toFixed(1)}` });
+    }
+    for (const expectedAttachment of seam.attachments || []) {
+      const actual = attachmentRects.find((r) => r.id === expectedAttachment.id);
+      if (!actual) { failures.push({ kind: 'attachment', seam: seamName, id: expectedAttachment.id, reason: 'attachment missing' }); continue; }
+      const topOffset = actual.top - strip.bottom, bottomOffset = actual.bottom - strip.bottom;
+      if (Math.abs(topOffset - expectedAttachment.topOffset) > 0.75 || Math.abs(bottomOffset - expectedAttachment.bottomOffset) > 0.75) {
+        failures.push({ kind: 'attachment', seam: seamName, id: expectedAttachment.id, expected: { topOffset: expectedAttachment.topOffset, bottomOffset: expectedAttachment.bottomOffset }, actual: { topOffset, bottomOffset } });
+      }
+    }
+    const clip = {
+      x: Math.max(0, strip.left), y: Math.max(0, Math.floor(strip.top)),
+      width: Math.max(1, Math.floor(strip.width)), height: Math.max(1, Math.floor(h)),
+    };
+    const png = await page.screenshot({ clip, fullPage: true });
+    const { data, info } = await sharp(png).raw().toBuffer({ resolveWithObject: true });
+    const want = parseRgb(seam.color); const floorRgb = parseRgb(floor.body) || parseRgb(floor.html);
+    const blocked = attachmentRects.map((r) => ({ left: r.left - strip.left, right: r.right - strip.left }));
+    const candidateX = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9]
+      .map((f) => Math.min(info.width - 1, Math.floor(f * info.width)))
+      .filter((x) => !blocked.some((r) => x >= r.left - 0.75 && x <= r.right + 0.75));
+    if (candidateX.length < 3) {
+      failures.push({ kind: 'attachment-coverage-unproven', seam: seamName, availableGroundColumns: candidateX.length });
+      continue;
+    }
+    const xs = [candidateX[0], candidateX[Math.floor((candidateX.length - 1) / 2)], candidateX[candidateX.length - 1]];
+    for (const x of xs) for (const fy of [0.15, 0.5, 0.85]) {
+      // Internal seams retain their original gap verbatim. Verify only the newly inserted air after that base strip;
+      // page seams have a zero-height base strip and therefore keep the original whole-strip sampling behavior.
+      const y = Math.min(info.height - 1, Math.floor((seam.baseStripHeight || 0) + fy * seam.addition));
+      const got = pixelAt(data, info, x, y);
+      const d = channelDistance(got, want); probes++;
+      if (d <= STRICT_CHANNEL_TOLERANCE) continue;
+      const isFloor = floorRgb && channelDistance(got, floorRgb) <= STRICT_CHANNEL_TOLERANCE;
+      if (!isFloor) {
+        const profile = shadowGradientProfile(data, info, x, want);
+        if (profile.ok) { toleratedShadowGradients++; continue; }
+      }
+      failures.push({
+        kind: isFloor ? 'floor-exposure' : 'coverage', seam: seamName, probe: { x, y }, got, want,
+        shadowProfile: isFloor ? null : shadowGradientProfile(data, info, x, want),
+      });
+    }
+  }
+  return {
+    ok: failures.length === 0, failures, probes, toleratedShadowGradients,
+    documentHeight: height, expectedHeight: expected,
+  };
+}

package/prototype-kit/polish/harm.mjs

@@ -0,0 +1,23 @@
+// Structure the harm guard protects, computed from two measurements of the same page (before / after a rule set):
+//   misaligned — a same-kind sibling pair whose left (top) edges were exactly aligned before and are not after
+//                (an icon nudged out of its column, a nav label pulled off its list edge);
+//   spacing    — a consecutive sibling gap that changed by more than GAP_TOL px, unless one side was itself cut or
+//                escaped before (a stranded footer coming home is allowed to change its gap).
+// Owner rule (2026-08-22): a repair that moves an icon out of its column or changes sibling spacing is harm.
+export const GAP_TOL = 6;
+
+export function structureHarm(before, after, exempt = new Set(), exemptGaps = new Set()) {
+  const colKey = (c) => `${c.axis}|${c.a}|${c.b}`;
+  const beforeCols = new Set((before.columns || []).map(colKey));
+  const afterCols = new Set((after.columns || []).map(colKey));
+  const misaligned = [...beforeCols].filter((k) => !afterCols.has(k));
+  const beforeGaps = new Map((before.gaps || []).map((g) => [`${g.axis}|${g.a}|${g.b}`, g.gap]));
+  const broken = new Set((before.overflow || []).filter((o) => o.kind === 'cut' || o.kind === 'escape').map((o) => o.id));
+  const spacing = (after.gaps || []).filter((g) => {
+    const b = beforeGaps.get(`${g.axis}|${g.a}|${g.b}`);
+    // a horizontal gap inside a fitted shell child is the fit's own declared change (name … chevron), not harm
+    const declaredGap = exemptGaps.has(`${g.a}|${g.b}`) || exemptGaps.has(`${g.b}|${g.a}`);
+    return b != null && Math.abs(g.gap - b) > GAP_TOL && !broken.has(g.a) && !broken.has(g.b) && !g.fit && !declaredGap && !(g.axis === 'h' && (exempt.has(g.a) || exempt.has(g.b)));
+  }).map((g) => ({ ...g, before: beforeGaps.get(`${g.axis}|${g.a}|${g.b}`) }));
+  return { misaligned, spacing };
+}