@12ui/design 0.2.42 → 0.2.44

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/tests/adversarial-runtime.mjs

@@ -1,6 +1,8 @@
 #!/usr/bin/env node
 import assert from 'node:assert/strict';
+import { spawnSync } from 'node:child_process';
 import fs from 'node:fs';
+import os from 'node:os';
 import path from 'node:path';
 import { chromium } from '@playwright/test';
 import { checkRuntime } from '../lib/runtime-check.mjs';
@@ -130,9 +132,19 @@ const interactionReachability = {
   ordinaryControl: interactionPage('ordinary-dropdown.html')?.dropdown,
 };
 
+const blockingScratch = fs.mkdtempSync(path.join(os.tmpdir(), 'prototype-blocking-runtime-'));
+const blockingAuditFile = path.join(blockingScratch, 'runtime-audit.json');
+const blockingVerification = spawnSync(process.execPath, [
+  path.join(kitDir, 'verify-runtime.mjs'),
+  path.join(kitDir, 'tests', 'fixtures', 'blocking-runtime'),
+  blockingAuditFile,
+], { cwd: kitDir, encoding: 'utf8', timeout: 30_000 });
+const blockingAudit = JSON.parse(fs.readFileSync(blockingAuditFile, 'utf8'));
+fs.rmSync(blockingScratch, { recursive: true, force: true });
+
 await browser.close();
 await server.close();
-const result = { doubleBinding, nestedBinding, dropdownGuard, hoverStacking, deepLinkBack, accessibleBack, pageBack, holdingComposition, shellNavigation, interactionReachability };
+const result = { doubleBinding, nestedBinding, dropdownGuard, hoverStacking, deepLinkBack, accessibleBack, pageBack, holdingComposition, shellNavigation, interactionReachability, blockingInteraction: { status: blockingVerification.status, failures: blockingAudit.interactionFailures } };
 if (process.argv.includes('--assert')) {
   assert.deepEqual(doubleBinding, { overlayRoots: 1, modals: 1 }, 'runtime must bind exactly once when injected twice');
   assert.deepEqual(nestedBinding, { modals: 1, menus: 0 }, 'the innermost action must stop a parent binding from also firing');
@@ -182,6 +194,9 @@ if (process.argv.includes('--assert')) {
   assert.equal(interactionReachability.occludedExactFailure?.ok, true, 'must fire: the exact Saved Journeys dropdown is scrolled clear of the fixed review framing before pointer hit-testing');
   assert.ok(interactionReachability.occludedExactFailure?.point?.y < 700, 'must fire: the exact initially occluded target is measured outside the review panel');
   assert.equal(interactionReachability.ordinaryControl?.ok, true, 'must stay silent: an ordinary already-visible dropdown remains pointer reachable');
+  assert.notEqual(blockingVerification.status, 0, 'must fire: a claimed dropdown with broken pointer wiring still refuses publication');
+  assert.match(blockingVerification.stderr, /Prototype runtime gate failed: 1 page\(s\) with broken dropdown\/modal interaction/, 'must fire: the refusal names the genuinely blocking interaction gate');
+  assert.deepEqual(blockingAudit.interactionFailures, ['broken-interaction.html'], 'must stay silent: the blocking fixture identifies only the broken page');
 }
 const json = JSON.stringify(result, null, 2) + '\n';
 if (outFile) fs.writeFileSync(outFile, json);

package/prototype-kit/tests/fixtures/blocking-runtime/broken-interaction.html

@@ -0,0 +1,7 @@
+<!doctype html><html><head><meta charset="utf-8"><style>
+html,body{margin:0;width:1536px;height:1024px}.control{position:absolute;left:120px;top:120px;width:220px;height:44px}.interceptor{position:fixed;inset:0;z-index:20;background:rgba(255,255,255,.01)}
+</style></head><body>
+<button id="broken-dropdown" class="control" data-proto-action="dropdown" data-proto-options='["One","Two","Three"]'>Menu</button>
+<div class="interceptor" aria-hidden="true"></div>
+<script id="proto-state" type="application/json">{"unit":"broken-interaction","tokens":{},"contentFile":null}</script>
+</body></html>

package/prototype-kit/tests/fixtures/four-dropdown/branch.plan.json

@@ -0,0 +1,29 @@
+{
+  "version": 1,
+  "scope": "site",
+  "concept": "Observed four-candidate dropdown degradation shape",
+  "pages": [
+    {
+      "index": 0,
+      "id": "p2-stream-proposals",
+      "title": "Stream proposals",
+      "surfaceType": "web_app",
+      "purpose": "Review proposed streams.",
+      "startsFromWinner": true,
+      "slots": ["b"]
+    },
+    {
+      "index": 1,
+      "id": "p4-live-stream-results",
+      "title": "Live stream results",
+      "surfaceType": "web_app",
+      "purpose": "Review live stream performance.",
+      "startsFromWinner": false,
+      "slots": ["e"]
+    }
+  ],
+  "screens": [
+    { "slot": "b", "pageIndex": 0, "content": "Stream proposal filters", "dependsOnSlot": null },
+    { "slot": "e", "pageIndex": 1, "content": "Live stream date filter", "dependsOnSlot": null }
+  ]
+}

package/prototype-kit/tests/fixtures/four-dropdown/pages/p2-stream-proposals.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html><head><meta charset="utf-8"><style>
+html,body,#page-flow,#viewport-1-b{margin:0;width:1536px;height:1024px;font-family:Arial,sans-serif}
+.filter{position:absolute;display:flex;align-items:center;justify-content:space-between;width:280px;height:44px}.text{font-size:16px}.icon{width:16px;height:16px}
+#viewport-1-b-filters{left:80px;top:180px}#viewport-1-b-sort{left:80px;top:260px}#viewport-1-b-table-footer{left:80px;top:340px}
+</style></head><body><main id="page-flow"><section id="viewport-1-b">
+<button class="filter" id="viewport-1-b-filters"><span class="text" id="viewport-1-b-filters-device-button">All countries</span><span class="icon" id="viewport-1-b-filters-language-icon-2" aria-label="Chevron down">⌄</span></button>
+<button class="filter" id="viewport-1-b-sort"><span class="text" id="viewport-1-b-sort-text">Sort by</span><span class="icon" id="viewport-1-b-sort-icon" aria-label="Chevron down">⌄</span></button>
+<button class="filter" id="viewport-1-b-table-footer"><span class="text" id="viewport-1-b-table-footer-text-2">Compare</span><span class="icon" id="viewport-1-b-table-footer-icon" aria-label="Chevron down">⌄</span></button>
+</section></main></body></html>

package/prototype-kit/tests/fixtures/four-dropdown/pages/p4-live-stream-results.html

@@ -0,0 +1,7 @@
+<!doctype html>
+<html><head><meta charset="utf-8"><style>
+html,body,#page-flow,#viewport-1-e{margin:0;width:1536px;height:1024px;font-family:Arial,sans-serif}
+.filter{position:absolute;left:80px;top:180px;display:flex;align-items:center;justify-content:space-between;width:460px;height:44px}.text{font-size:16px}.icon{width:16px;height:16px}
+</style></head><body><main id="page-flow"><section id="viewport-1-e">
+<button class="filter" id="viewport-1-e-main-date-filter"><span class="text" id="viewport-1-e-main-date-filter-text">compared to Apr 6 – May 5, 2025</span><span class="icon" id="viewport-1-e-main-date-filter-icon-3" aria-label="Chevron down">⌄</span></button>
+</section></main></body></html>

package/prototype-kit/tests/fixtures/shell-stitching-runtime/PROVENANCE.md

@@ -0,0 +1,22 @@
+# Responsive shell-stitching runtime fixture
+
+This reduced three-page branch preserves the deterministic mechanism found by
+the 2026-08-25 b13 header-signature refusal study. The full artifact's canonical
+Central Station Departures and stitched Network Map pages had byte-identical
+`#mobile-390-header` DOM and identical outer geometry `[0, 0, 390, 72.5]`, but
+their runtime signatures differed:
+
+- donor: `47b710c2aee9240892128ad7271eb0451792db7d8b1c1650c36bc076770ca088`;
+- recipient: `5f1aae89d7c2083b27edc7c50e265bb844ed2760722b8dccea91a8c07ab4fbf9`.
+
+The recipient stylesheet still addressed the reused `mobile-390-header-*` ids.
+Its `left` and `top` declarations therefore survived the later, property-partial
+donor rules and displaced donor descendants. The fixture keeps that exact
+boundary: the donor omits `left`/`top`, while the recipient declares them on the
+same responsive ids. Native shell identities stay distinct so the failure is
+isolated to the 390px band.
+
+The third page is the paired silent control. It renders the donor shell but has
+different product content and a substantially taller portrait canvas. Its shell
+signature must remain equal to the donor's because canvas and body variation are
+outside the declared shell subtree.

package/prototype-kit/tests/fixtures/shell-stitching-runtime/branch.plan.json

@@ -0,0 +1,40 @@
+{
+  "version": 1,
+  "scope": "site",
+  "concept": "Canonical responsive shell CSS isolation fixture",
+  "sitePurpose": "Exercise one donor shell, one colliding recipient, and one canvas-only control.",
+  "pages": [
+    {
+      "index": 0,
+      "id": "p0-donor",
+      "title": "Departures",
+      "surfaceType": "web_app",
+      "purpose": "Provide the canonical responsive header.",
+      "startsFromWinner": true,
+      "slots": ["a"]
+    },
+    {
+      "index": 1,
+      "id": "p1-id-collision",
+      "title": "Network map",
+      "surfaceType": "web_app",
+      "purpose": "Reuse responsive header ids under recipient-specific offsets.",
+      "startsFromWinner": false,
+      "slots": ["b"]
+    },
+    {
+      "index": 2,
+      "id": "p2-canvas-control",
+      "title": "Service notes",
+      "surfaceType": "web_app",
+      "purpose": "Keep the canonical header while changing content and canvas height.",
+      "startsFromWinner": false,
+      "slots": ["c"]
+    }
+  ],
+  "screens": [
+    { "slot": "a", "pageIndex": 0, "content": "Departures content", "dependsOnSlot": null },
+    { "slot": "b", "pageIndex": 1, "content": "Network map content", "dependsOnSlot": null },
+    { "slot": "c", "pageIndex": 2, "content": "Long service notes content", "dependsOnSlot": null }
+  ]
+}

package/prototype-kit/tests/fixtures/shell-stitching-runtime/pages/p0-donor.html

@@ -0,0 +1,38 @@
+<!doctype html>
+<html><head><meta charset="utf-8"><style>
+html,body,#page-flow{margin:0;width:100%;min-height:100%;font-family:Arial,sans-serif;background:#eef2f4}.ly-band{display:none}.generated-screen,.ly-anchor-canvas{position:relative}.generated-screen{width:100%}.text{margin:0}.fixture-shell{box-sizing:border-box;color:#f7fafc;background:#071923}
+@media(max-width:959px){.ly-band[data-ly-band="mobile-390"]{display:block}}
+@media(min-width:960px){.ly-band[data-ly-band="native"]{display:block}}
+#donor-mobile-canvas{width:390px;height:900px;background:#dce7eb}
+#mobile-390-header{position:relative;display:flex;align-items:flex-start;margin:0;width:390px;height:72px;background:#071923}
+#mobile-390-header-brand{position:relative;margin:20px 0 0 20px;width:100px;height:28px}
+#mobile-390-header-time{position:relative;margin:20px 0 0 90px;width:80px;height:32px}
+#mobile-390-header-menu{position:relative;margin:24px 0 0 25px;width:24px;height:24px}
+#mobile-390-header-divider{position:absolute;left:0;bottom:0;width:390px;height:2px;background:#3e5e6d}
+#mobile-390-header-brand-text{font-size:16px;line-height:28px;font-weight:700}
+#mobile-390-header-time-text{font-size:14px;line-height:16px;font-weight:600}
+#mobile-390-header-time-live{font-size:11px;line-height:16px;color:#b6f437}
+#mobile-390-header-menu-icon{display:block;width:24px;height:24px;font-size:20px;line-height:24px;text-align:center}
+#donor-mobile-content{padding:44px 24px;color:#17252c}
+#viewport-1-a{position:relative;width:1536px;height:1024px;background:#eef2f4}
+#viewport-1-a-header{position:absolute;left:0;top:0;display:flex;align-items:center;width:1536px;height:72px}
+#viewport-1-a-header-brand{margin-left:32px;font-size:16px;line-height:24px;font-weight:700}
+#viewport-1-a-header-status{margin-left:1200px;font-size:14px;line-height:24px}
+#viewport-1-a-content{position:absolute;left:80px;top:150px;width:800px;height:400px;color:#17252c}
+</style></head><body><main id="page-flow">
+<div class="ly-band" data-ly-band="mobile-390"><div class="generated-screen"><div id="donor-mobile-canvas" class="ly-anchor-canvas">
+  <header id="mobile-390-header" class="fixture-shell">
+    <div id="mobile-390-header-brand"><p id="mobile-390-header-brand-text" class="text">Kinetic</p></div>
+    <div id="mobile-390-header-time"><p id="mobile-390-header-time-text" class="text">09:42</p><p id="mobile-390-header-time-live" class="text">Live</p></div>
+    <nav id="mobile-390-header-menu"><span id="mobile-390-header-menu-icon" class="icon" role="img" aria-label="Menu">≡</span></nav>
+    <div id="mobile-390-header-divider" class="divider"></div>
+  </header>
+  <article id="donor-mobile-content"><h1>Central departures</h1><p>Two platforms are boarding.</p></article>
+</div></div></div>
+<div class="ly-band" data-ly-band="native"><div class="generated-screen"><div class="ly-anchor-canvas">
+  <section id="viewport-1-a">
+    <header id="viewport-1-a-header" class="fixture-shell"><p id="viewport-1-a-header-brand" class="text">Kinetic</p><p id="viewport-1-a-header-status" class="text">Live service</p></header>
+    <div id="viewport-1-a-content"><h1 id="viewport-1-a-content-title">Central departures</h1><p id="viewport-1-a-content-copy">Two platforms are boarding.</p></div>
+  </section>
+</div></div></div>
+</main></body></html>

package/prototype-kit/tests/fixtures/shell-stitching-runtime/pages/p1-id-collision.html

@@ -0,0 +1,38 @@
+<!doctype html>
+<html><head><meta charset="utf-8"><style>
+html,body,#page-flow{margin:0;width:100%;min-height:100%;font-family:Arial,sans-serif;background:#eef2f4}.ly-band{display:none}.generated-screen,.ly-anchor-canvas{position:relative}.generated-screen{width:100%}.text{margin:0}.fixture-shell{box-sizing:border-box;color:#f7fafc;background:#071923}
+@media(max-width:959px){.ly-band[data-ly-band="mobile-390"]{display:block}}
+@media(min-width:960px){.ly-band[data-ly-band="native"]{display:block}}
+#collision-mobile-canvas{width:390px;height:900px;background:#d9e4e8}
+#mobile-390-header{position:relative;margin:0;width:390px;height:72px;background:#0a202b}
+#mobile-390-header-brand{position:absolute;left:25px;top:22px;width:104px;height:30px}
+#mobile-390-header-time{position:absolute;left:215px;top:19px;width:82px;height:34px}
+#mobile-390-header-menu{position:absolute;left:340px;top:23px;width:26px;height:26px}
+#mobile-390-header-divider{position:absolute;left:0;top:68px;width:390px;height:2px;background:#476b7a}
+#mobile-390-header-brand-text{font-size:16px;line-height:28px;font-weight:700}
+#mobile-390-header-time-text{font-size:14px;line-height:16px;font-weight:600}
+#mobile-390-header-time-live{font-size:11px;line-height:16px;color:#b6f437}
+#mobile-390-header-menu-icon{display:block;width:24px;height:24px;font-size:20px;line-height:24px;text-align:center}
+#collision-mobile-content{padding:70px 36px;color:#17252c}
+#viewport-1-b{position:relative;width:1536px;height:1024px;background:#eef2f4}
+#viewport-1-b-header{position:absolute;left:0;top:0;display:flex;align-items:center;width:1536px;height:72px}
+#viewport-1-b-header-brand{margin-left:32px;font-size:16px;line-height:24px;font-weight:700}
+#viewport-1-b-header-status{margin-left:1200px;font-size:14px;line-height:24px}
+#viewport-1-b-content{position:absolute;left:110px;top:180px;width:900px;height:420px;color:#17252c}
+</style></head><body><main id="page-flow">
+<div class="ly-band" data-ly-band="mobile-390"><div class="generated-screen"><div id="collision-mobile-canvas" class="ly-anchor-canvas">
+  <header id="mobile-390-header" class="fixture-shell">
+    <div id="mobile-390-header-brand"><p id="mobile-390-header-brand-text" class="text">Kinetic</p></div>
+    <div id="mobile-390-header-time"><p id="mobile-390-header-time-text" class="text">09:42</p><p id="mobile-390-header-time-live" class="text">Live</p></div>
+    <nav id="mobile-390-header-menu"><span id="mobile-390-header-menu-icon" class="icon" role="img" aria-label="Menu">≡</span></nav>
+    <div id="mobile-390-header-divider" class="divider"></div>
+  </header>
+  <article id="collision-mobile-content"><h1>Network map</h1><p>Choose a station to inspect its connections.</p></article>
+</div></div></div>
+<div class="ly-band" data-ly-band="native"><div class="generated-screen"><div class="ly-anchor-canvas">
+  <section id="viewport-1-b">
+    <header id="viewport-1-b-header" class="fixture-shell"><p id="viewport-1-b-header-brand" class="text">Kinetic</p><p id="viewport-1-b-header-status" class="text">Live service</p></header>
+    <div id="viewport-1-b-content"><h1 id="viewport-1-b-content-title">Network map</h1><p id="viewport-1-b-content-copy">Choose a station to inspect its connections.</p></div>
+  </section>
+</div></div></div>
+</main></body></html>

package/prototype-kit/tests/fixtures/shell-stitching-runtime/pages/p2-canvas-control.html

@@ -0,0 +1,39 @@
+<!doctype html>
+<html><head><meta charset="utf-8"><style>
+html,body,#page-flow{margin:0;width:100%;min-height:100%;font-family:Arial,sans-serif;background:#f3eee6}.ly-band{display:none}.generated-screen,.ly-anchor-canvas{position:relative}.generated-screen{width:100%}.text{margin:0}.fixture-shell{box-sizing:border-box;color:#f7fafc;background:#071923}
+@media(max-width:959px){.ly-band[data-ly-band="mobile-390"]{display:block}}
+@media(min-width:960px){.ly-band[data-ly-band="native"]{display:block}}
+#control-mobile-canvas{width:390px;height:1400px;background:#f3eee6}
+#mobile-390-header{position:relative;display:flex;align-items:flex-start;margin:0;width:390px;height:72px;background:#071923}
+#mobile-390-header-brand{position:relative;margin:20px 0 0 20px;width:100px;height:28px}
+#mobile-390-header-time{position:relative;margin:20px 0 0 90px;width:80px;height:32px}
+#mobile-390-header-menu{position:relative;margin:24px 0 0 25px;width:24px;height:24px}
+#mobile-390-header-divider{position:absolute;left:0;bottom:0;width:390px;height:2px;background:#3e5e6d}
+#mobile-390-header-brand-text{font-size:16px;line-height:28px;font-weight:700}
+#mobile-390-header-time-text{font-size:14px;line-height:16px;font-weight:600}
+#mobile-390-header-time-live{font-size:11px;line-height:16px;color:#b6f437}
+#mobile-390-header-menu-icon{display:block;width:24px;height:24px;font-size:20px;line-height:24px;text-align:center}
+#control-mobile-content{padding:96px 28px;color:#30271f}
+#control-mobile-content section{margin-top:180px;padding:28px;background:#fff;border-radius:16px}
+#viewport-1-c{position:relative;width:1536px;height:1400px;background:#f3eee6}
+#viewport-1-c-header{position:absolute;left:0;top:0;display:flex;align-items:center;width:1536px;height:72px}
+#viewport-1-c-header-brand{margin-left:32px;font-size:16px;line-height:24px;font-weight:700}
+#viewport-1-c-header-status{margin-left:1200px;font-size:14px;line-height:24px}
+#viewport-1-c-content{position:absolute;left:140px;top:220px;width:1000px;height:900px;color:#30271f}
+</style></head><body><main id="page-flow">
+<div class="ly-band" data-ly-band="mobile-390"><div class="generated-screen"><div id="control-mobile-canvas" class="ly-anchor-canvas">
+  <header id="mobile-390-header" class="fixture-shell">
+    <div id="mobile-390-header-brand"><p id="mobile-390-header-brand-text" class="text">Kinetic</p></div>
+    <div id="mobile-390-header-time"><p id="mobile-390-header-time-text" class="text">09:42</p><p id="mobile-390-header-time-live" class="text">Live</p></div>
+    <nav id="mobile-390-header-menu"><span id="mobile-390-header-menu-icon" class="icon" role="img" aria-label="Menu">≡</span></nav>
+    <div id="mobile-390-header-divider" class="divider"></div>
+  </header>
+  <article id="control-mobile-content"><h1>Service notes</h1><p>This deliberately taller route has unrelated portrait content.</p><section><h2>Maintenance archive</h2><p>Older notices continue far below the shared shell.</p></section></article>
+</div></div></div>
+<div class="ly-band" data-ly-band="native"><div class="generated-screen"><div class="ly-anchor-canvas">
+  <section id="viewport-1-c">
+    <header id="viewport-1-c-header" class="fixture-shell"><p id="viewport-1-c-header-brand" class="text">Kinetic</p><p id="viewport-1-c-header-status" class="text">Live service</p></header>
+    <div id="viewport-1-c-content"><h1 id="viewport-1-c-content-title">Service notes</h1><p id="viewport-1-c-content-copy">This route has substantially more content and a taller canvas.</p></div>
+  </section>
+</div></div></div>
+</main></body></html>

package/prototype-kit/tests/offline-check.mjs

@@ -44,7 +44,7 @@ const outputDigest = (directory) => {
 };
 assert.equal(
   outputDigest(threeShell.protoDir),
-  '5168cc6926988d3bee32d5e890792e989417d9ca78376282f988ebf7875a57bc',
+  '0c2147df5bc6552016cc278faec7abaabecbc7f5945cad7e1ac9b1df6e554403',
   'must stay silent: review support leaves the accepted shell/navigation complete output byte-identical',
 );
 const threeShellModel = JSON.parse(fs.readFileSync(threeShell.modelFile, 'utf8'));

package/prototype-kit/tests/rules-check.mjs

@@ -1,11 +1,12 @@
 #!/usr/bin/env node
 import assert from 'node:assert/strict';
 import { parseHTML } from 'linkedom';
-import { usableDropdownOptions } from '../lib/actions.mjs';
+import { resolveDropdownAction, suppressDeterministicAction, usableDropdownOptions } from '../lib/actions.mjs';
 import { restoreActionPointerReachability } from '../lib/action-target.mjs';
 import { declaredActiveMarkers, linkedNavForUnit, markerOverlapsNav } from '../lib/nav-active-state.mjs';
 import { matchPlannedPage } from '../lib/navigation.mjs';
 import { needsCanonicalShell, selectCanonicalShellPage } from '../lib/shell-consistency.mjs';
+import { isolateTransplantedShell, shellElementsForSourceId } from '../lib/shell-identity.mjs';
 import { stitchUnitShells } from '../lib/shell-stitching.mjs';
 import { compareCanonicalShells, isWithinShell, qualifiesShellCandidate, selectOneShellPerRegion, shouldSuppressDroppedShell, shouldTransplantShell } from '../lib/shells.mjs';
 import { slugText } from '../lib/text.mjs';
@@ -25,6 +26,39 @@ assert.equal(matchPlannedPage('التقارير', [{ stateId: 'reports-ar', titl
 assert.notEqual(slugText('التقارير'), slugText('الإعدادات'), 'must stay silent: distinct non-Latin holdings do not collide');
 assert.equal(usableDropdownOptions(['Only choice']), null, 'must fire: a one-option fallback is not bound as a fake dropdown');
 assert.deepEqual(usableDropdownOptions(['All', 'Open', 'Closed']), ['All', 'Open', 'Closed'], 'must stay silent: a real three-option dropdown remains bindable');
+assert.equal(suppressDeterministicAction({ action: 'none' }), true, 'must fire: a recovered explicit none suppresses an unsafe deterministic dropdown');
+assert.equal(suppressDeterministicAction({ action: 'dropdown', options: ['All', 'Open', 'Closed'] }), false, 'must stay silent: a valid labeled dropdown remains bindable');
+assert.deepEqual(resolveDropdownAction({
+  deterministic: { action: 'dropdown' },
+  label: { action: 'none' },
+  labelId: 'filter-label',
+}), {
+  disposition: 'static',
+  degradation: {
+    code: 'label_none_overrode_deterministic_dropdown',
+    reason: 'explicit-label-none',
+    fromAction: 'dropdown',
+    toAction: 'none',
+    options: [],
+  },
+}, 'must fire: normalized none becomes one recorded static dropdown policy outcome');
+assert.deepEqual(resolveDropdownAction({
+  deterministic: { action: 'dropdown' },
+  label: { action: 'dropdown', options: ['All', 'Open', 'Closed'] },
+  labelId: 'filter-label',
+}), {
+  disposition: 'dropdown',
+  action: { action: 'dropdown', labelId: 'filter-label', options: ['All', 'Open', 'Closed'] },
+}, 'must stay silent: a proven three-option dropdown remains actionable');
+assert.equal(
+  resolveDropdownAction({
+    deterministic: { action: 'dropdown' },
+    label: { action: 'modal', options: null },
+    labelId: 'filter-label',
+  }).degradation.code,
+  'dropdown_options_incomplete',
+  'must fire: a deterministic dropdown with no usable label options is recorded and kept static',
+);
 
 const unreachableDropdown = parseHTML('<span id="viewport-1-c-journeys-harbourfront-source-row-1-icon" style="width:29.696px;height:11.264px;pointer-events:none">...</span>').document.querySelector('span');
 assert.equal(restoreActionPointerReachability(unreachableDropdown), true, 'must fire: the exact failed Saved Journeys dropdown target becomes pointer reachable');
@@ -104,6 +138,34 @@ assert.equal(linkedNavForUnit({ navRows: [{ region: 'header', text: 'Journal', t
 
 const rulesForFixture = () => '';
 const styleTextFixture = () => '';
+const identityRecipient = parseHTML('<html><body><div id="donor-shell"><span id="donor-shell-label"></span></div></body></html>').document;
+const identityDonor = parseHTML('<html><body><section id="donor-shell" aria-labelledby="donor-shell-label"><label id="donor-shell-label" for="donor-shell-field">Name</label><input id="donor-shell-field"><svg id="donor-shell-icon" aria-labelledby="donor-shell-label"><use id="donor-shell-icon-use" href="#donor-shell-icon"></use></svg></section></body></html>').document;
+const isolatedIdentity = isolateTransplantedShell({
+  document: identityRecipient,
+  sourceElement: identityDonor.getElementById('donor-shell'),
+  css: '#donor-shell{display:block}#donor-shell-label{color:red}#donor-shell-icon-use{fill:url(#donor-shell-icon)}',
+  namespaceParts: ['mobile-390', 'header'],
+});
+const isolatedIdentityDocument = parseHTML(`<html><body>${isolatedIdentity.html}</body></html>`).document;
+const isolatedIdentityRoot = isolatedIdentityDocument.getElementById(isolatedIdentity.rootId);
+const isolatedIdentityLabel = shellElementsForSourceId(isolatedIdentityRoot, 'donor-shell-label')[0];
+const isolatedIdentityField = shellElementsForSourceId(isolatedIdentityRoot, 'donor-shell-field')[0];
+const isolatedIdentityIcon = shellElementsForSourceId(isolatedIdentityRoot, 'donor-shell-icon')[0];
+assert.notEqual(isolatedIdentity.rootId, 'donor-shell', 'must fire: the physical donor root cannot reuse a recipient identity');
+assert.equal(isolatedIdentityRoot.getAttribute('aria-labelledby'), isolatedIdentityLabel.id, 'must fire: ARIA id references follow isolated identities');
+assert.equal(isolatedIdentityLabel.getAttribute('for'), isolatedIdentityField.id, 'must fire: form id references follow isolated identities');
+assert.equal(isolatedIdentityRoot.querySelector('use').getAttribute('href'), `#${isolatedIdentityIcon.id}`, 'must fire: fragment references follow isolated identities');
+assert.ok(isolatedIdentity.css.includes(`#${isolatedIdentityLabel.id}{color:red}`), 'must fire: exact donor CSS selectors follow isolated identities');
+assert.ok(isolatedIdentity.css.includes(`url(#${isolatedIdentityIcon.id})`), 'must fire: CSS fragment references follow isolated identities');
+assert.equal(isolatedIdentity.css.includes('#donor-shell'), false, 'must stay silent: no donor id selector remains available to recipient CSS');
+const duplicateDonor = parseHTML('<html><body><section id="duplicate-shell"><span id="duplicate-child"></span><span id="duplicate-child"></span></section></body></html>').document;
+assert.throws(() => isolateTransplantedShell({
+  document: identityRecipient,
+  sourceElement: duplicateDonor.getElementById('duplicate-shell'),
+  css: '',
+  namespaceParts: ['native', 'header'],
+}), /duplicate donor id duplicate-child/, 'must fire: invalid donor identity cannot be ambiguously namespaced');
+
 const noWriteDocument = parseHTML('<html><head></head><body><header id="detail-header"><span id="detail-home">Home</span><img id="detail-ink" alt="Home navigation underline"></header></body></html>').document;
 const noWriteBefore = noWriteDocument.documentElement.outerHTML;
 const noWriteResult = stitchUnitShells({
@@ -133,8 +195,14 @@ const fireResult = stitchUnitShells({
   styleText: styleTextFixture,
 });
 assert.equal(fireResult.changes, 1, 'must fire: a measured incompatible fingerprint commits the declared donor shell');
-assert.ok(fireDocument.getElementById('journal-header'), 'must fire: the canonical donor outer shell replaces the recipient shell');
-assert.ok(fireDocument.getElementById('menu-ink'), 'must fire: the page-declared Menu underline is retained and moved into the donor shell');
+const isolatedHeader = shellElementsForSourceId(fireDocument, 'journal-header')[0];
+const isolatedMarker = shellElementsForSourceId(fireDocument, 'menu-ink')[0];
+assert.ok(isolatedHeader, 'must fire: the canonical donor outer shell replaces the recipient shell');
+assert.notEqual(isolatedHeader.id, 'journal-header', 'must fire: transplanted donor identity is physically isolated from recipient CSS');
+assert.ok(isolatedMarker && isolatedHeader.contains(isolatedMarker), 'must fire: the page-declared Menu underline is retained and moved into the isolated donor shell');
+assert.equal(fireDocument.getElementById('menu-header')?.getAttribute('data-proto-shell-space'), 'header', 'must stay silent: the recipient shell remains an invisible flow spacer under its own identity');
 assert.equal(fireResult.bands[0].regions[0].active.navText, 'Menu');
+assert.equal(fireResult.bands[0].regions[0].shellId, isolatedHeader.id);
+assert.equal(fireResult.bands[0].regions[0].active.markerId, isolatedMarker.id);
 
 process.stdout.write('rules: ok\n');