@12ui/design 0.2.36 → 0.2.38

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

@@ -0,0 +1,221 @@
+import { declaredActiveMarkers, linkedNavForUnit } from './nav-active-state.mjs';
+import { needsCanonicalShell, shellForBand } from './shell-consistency.mjs';
+import { shouldTransplantShell } from './shells.mjs';
+import { normalizeText } from './text.mjs';
+
+function bandRoot(document, key) {
+  const roots = [...document.querySelectorAll('.ly-band[data-ly-band]')];
+  if (roots.length === 0) return key === 'native' ? document.body : null;
+  return roots.find((root) => root.getAttribute('data-ly-band') === key) || null;
+}
+
+function shellHost(root) {
+  const screen = root?.querySelector('.generated-screen') || (root?.tagName === 'BODY' ? root : null);
+  return screen?.querySelector('.ly-anchor-canvas') || screen || null;
+}
+
+function navItems(shell, navRows, region) {
+  const names = new Set(navRows.filter((row) => row.region === region).map((row) => normalizeText(row.text)));
+  return (shell?.items || []).filter((item) => item.text && names.has(normalizeText(item.text)));
+}
+
+function markerSnapshots({ document, shell, markers, rulesFor, styleText }) {
+  const css = styleText(document);
+  return markers.flatMap((marker) => {
+    const element = document.getElementById(marker.id);
+    if (!element) return [];
+    return [{
+      ...marker,
+      html: element.outerHTML,
+      css: rulesFor(css, marker.id),
+      item: shell.items.find((item) => item.id === marker.id),
+      targetItem: shell.items.find((item) => item.id === marker.targetId),
+    }];
+  });
+}
+
+function removeMarkers(document, markers) {
+  for (const marker of markers) document.getElementById(marker.id)?.remove();
+}
+
+function placeMarker({ shellElement, shell, marker, targetItem, extraCss }) {
+  shellElement.insertAdjacentHTML('beforeend', marker.html);
+  if (marker.css) extraCss.push(marker.css);
+  const sourceTarget = marker.targetItem;
+  const source = marker.item;
+  if (!source) return;
+  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;`
+    + `width:${source.w}px!important;height:${source.h}px!important;margin:0!important;translate:none!important}`);
+}
+
+function decisionForRegion({ unit, donorPage, recipientPage, region, canonicalShell }) {
+  if (recipientPage.pageId === donorPage.pageId) return { commit: false, reason: 'canonical-page' };
+  const semantic = unit.states.flatMap((state) => state.shell).find((shell) => shell.region === region);
+  if (!semantic) return { commit: false, reason: 'absent-analyzed-region' };
+  if (!shouldTransplantShell(semantic.box, canonicalShell.box)) {
+    return { commit: false, reason: 'incompatible-analyzed-geometry' };
+  }
+  const pairs = [];
+  for (const band of recipientPage.bands || []) {
+    const recipient = shellForBand(recipientPage, band.key, region);
+    const canonical = shellForBand(donorPage, band.key, region);
+    if (!recipient || !canonical) return { commit: false, reason: `missing-${band.key}-declaration` };
+    if (!shouldTransplantShell(recipient.box, canonical.box)) {
+      return { commit: false, reason: `incompatible-${band.key}-geometry` };
+    }
+    pairs.push({ key: band.key, recipient, canonical });
+  }
+  return { commit: pairs.some((pair) => needsCanonicalShell(pair.recipient, pair.canonical)), reason: 'compatible', pairs };
+}
+
+/**
+ * Atomically commits one donor page's complete region across every declared
+ * band of a compatible member page. A failed band proof makes the whole region
+ * a literal no-write path.
+ */
+export function stitchUnitShells({
+  document,
+  donorDocument,
+  donorPage,
+  recipientPage,
+  unit,
+  canonicalShell,
+  navRows,
+  rulesFor,
+  styleText,
+}) {
+  const extraCss = [];
+  const bands = new Map((recipientPage.bands || []).map((band) => [band.key, { key: band.key, regions: [] }]));
+  const decisions = [];
+  const sourceMarkerSnapshots = new Map();
+  for (const region of Object.keys(canonicalShell || {})) for (const band of recipientPage.bands || []) {
+    const sourceShell = shellForBand(recipientPage, band.key, region);
+    if (!sourceShell) continue;
+    const sourceItems = navItems(sourceShell, navRows, region);
+    sourceMarkerSnapshots.set(`${band.key}:${region}`, markerSnapshots({
+      document,
+      shell: sourceShell,
+      markers: declaredActiveMarkers(sourceShell, sourceItems),
+      rulesFor,
+      styleText,
+    }));
+  }
+  let changes = 0;
+  for (const [region, canonicalSemantic] of Object.entries(canonicalShell || {})) {
+    const decision = decisionForRegion({
+      unit,
+      donorPage,
+      recipientPage,
+      region,
+      canonicalShell: canonicalSemantic,
+    });
+    decisions.push({ region, commit: decision.commit, reason: decision.reason });
+    const pairs = decision.pairs || (recipientPage.bands || []).flatMap((band) => {
+      const recipient = shellForBand(recipientPage, band.key, region);
+      const canonical = shellForBand(donorPage, band.key, region);
+      return recipient && canonical ? [{ key: band.key, recipient, canonical }] : [];
+    });
+    for (const pair of pairs) {
+      const sourceNavItems = navItems(pair.recipient, navRows, region);
+      const canonicalNavItems = navItems(pair.canonical, navRows, region);
+      const sourceMarkers = declaredActiveMarkers(pair.recipient, sourceNavItems);
+      const canonicalMarkers = declaredActiveMarkers(pair.canonical, canonicalNavItems);
+      const linkedNav = linkedNavForUnit({ navRows, unit, sourceMarkers, region });
+      const outputNavItems = decision.commit ? canonicalNavItems : sourceNavItems;
+      const targetItem = linkedNav
+        ? outputNavItems.find((item) => normalizeText(item.text) === normalizeText(linkedNav.text)) || null
+        : null;
+      let outputShellId = pair.recipient.containerId;
+      let outputMarkers = sourceMarkers;
+      if (decision.commit) {
+        const sourceSnapshots = sourceMarkerSnapshots.get(`${pair.key}:${region}`) || [];
+        const donorSnapshots = markerSnapshots({
+          document: donorDocument,
+          shell: pair.canonical,
+          markers: canonicalMarkers,
+          rulesFor,
+          styleText,
+        });
+        const recipientElement = document.getElementById(pair.recipient.containerId);
+        const donorElement = donorDocument.getElementById(pair.canonical.containerId);
+        const root = bandRoot(document, pair.key);
+        const host = shellHost(root);
+        const alreadyPlaced = document.getElementById(pair.canonical.containerId);
+        if (!donorElement || !root || !host || (!root.contains(recipientElement) && !root.contains(alreadyPlaced))) {
+          throw new Error(`Canonical shell commit lost declared ${region} DOM in band ${pair.key}.`);
+        }
+        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);
+          }
+          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);
+        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));
+        const donorBand = donorPage.bands.find((band) => band.key === pair.key);
+        const parentShell = donorBand?.shells.find((candidate) => {
+          if (candidate.containerId === pair.canonical.containerId) return false;
+          const candidateElement = donorDocument.getElementById(candidate.containerId);
+          return candidateElement?.contains(donorElement);
+        }) || null;
+        if (!parentShell && outputShell.parentElement !== host) host.appendChild(outputShell);
+        const [x, y] = parentShell
+          ? [
+              pair.canonical.box[0] - parentShell.box[0],
+              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;`
+          + 'margin:0!important;z-index:100000!important}');
+        removeMarkers(document, 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 }];
+        } else if (!linkedNav) {
+          for (const marker of sourceSnapshots) {
+            placeMarker({ shellElement: outputShell, shell: pair.canonical, marker, targetItem: null, extraCss });
+          }
+          outputMarkers = sourceSnapshots;
+        } else outputMarkers = [];
+        changes++;
+      }
+      const activeMarker = linkedNav
+        ? outputMarkers.find((marker) => normalizeText(marker.targetText) === normalizeText(linkedNav.text))
+          || outputMarkers[0]
+          || null
+        : null;
+      bands.get(pair.key)?.regions.push({
+        region,
+        shellId: outputShellId,
+        canonicalSignature: pair.canonical.signature,
+        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: 'silent', navText: null, navId: null, markerId: null },
+        changed: decision.commit,
+      });
+    }
+  }
+  return { extraCss, bands: [...bands.values()], decisions, changes };
+}

package/prototype-kit/runtime/proto.css

@@ -1,7 +1,8 @@
 /* Prototype runtime chrome. Colours/fonts come from CSS variables set from the page's own tokens. */
-.proto-clickable { cursor: pointer; }
+.proto-clickable { color: inherit; cursor: pointer; }
 .proto-clickable:hover { background-color: rgba(0, 0, 0, 0.035); }
-p.proto-clickable:hover { text-decoration: underline; text-underline-offset: 3px; }
+a.proto-clickable:hover { text-decoration: underline; text-underline-offset: 3px; }
+.proto-clickable:focus-visible { outline: 2px solid var(--proto-accent); outline-offset: 3px; }
 
 #proto-overlay-root { position: absolute; inset: 0; z-index: 2147483000; pointer-events: none; }
 #proto-overlay-root > * { pointer-events: auto; }
@@ -37,10 +38,14 @@ p.proto-clickable:hover { text-decoration: underline; text-underline-offset: 3px
 .proto-holding-sub { font-size: 15px; line-height: 1.5; color: var(--proto-muted); margin: 0 0 28px; max-width: 560px; }
 .proto-holding-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
 .proto-holding-card { background: var(--proto-surface); border: 1px solid var(--proto-border); border-radius: var(--proto-radius); padding: 20px; min-height: 140px; }
-.proto-holding-card-title { font-size: 14px; font-weight: 600; color: var(--proto-heading); margin: 0 0 10px; }
 .proto-holding-card-line { height: 10px; border-radius: 5px; background: rgba(0,0,0,0.06); margin: 8px 0; }
 .proto-holding-card-line.short { width: 60%; }
 .proto-holding-note { margin-top: 24px; font-size: 12px; color: var(--proto-muted); }
+.proto-holding-block[data-proto-holding-layout="mobile"] { max-width:calc(100vw - 40px); }
+.proto-holding-block[data-proto-holding-layout="mobile"] .proto-holding-cards { grid-template-columns:1fr; gap:10px; }
+.proto-holding-block[data-proto-holding-layout="mobile"] .proto-holding-card { min-height:72px; padding:14px; }
+.proto-holding-block[data-proto-holding-layout="mobile"] .proto-holding-sub { margin-bottom:18px; }
+.proto-holding-block[data-proto-holding-layout="mobile"] .proto-holding-note { margin-top:16px; }
 
 @keyframes proto-fade { from { opacity: 0; } to { opacity: 1; } }
 @keyframes proto-pop { from { opacity: 0; transform: translateY(4px) scale(0.985); } to { opacity: 1; transform: none; } }

package/prototype-kit/tests/README.md

@@ -25,4 +25,7 @@ node population-sweep.mjs \
 The JSONL is append-only and resumable by run fingerprint. A row records the
 failed stage or, for successful builds, real/holding page counts, action counts,
 runtime page errors, broken targets, shell-size residuals, and same-page
-deep-link/back behavior.
+deep-link/back behavior. Runtime loads every generated page at 1536 and 390;
+holding routes additionally load every declared band's representative width and
+record active-band ownership, viewport-specific host/shell geometry and intersection, exact emitted
+positioned-scene registration/neutralization, and holding-copy contrast.

package/prototype-kit/tests/adversarial-runtime.mjs

@@ -3,6 +3,7 @@ import assert from 'node:assert/strict';
 import fs from 'node:fs';
 import path from 'node:path';
 import { chromium } from '@playwright/test';
+import { checkRuntime } from '../lib/runtime-check.mjs';
 import { startStaticServer } from '../lib/static-server.mjs';
 
 const outIndex = process.argv.indexOf('--out');
@@ -66,16 +67,60 @@ const deepLinkBack = {
   afterBack: historyPage.url(),
   historyLength: [beforeLength, afterLength],
 };
-await historyPage.locator('#next').click();
+const backLink = historyPage.getByRole('link', { name: 'Back to destination' });
+await backLink.focus();
+const accessibleBack = {
+  roleCount: await backLink.count(),
+  focused: await backLink.evaluate((element) => element === document.activeElement),
+};
+await historyPage.keyboard.press('Enter');
 await historyPage.waitForURL('**/history-destination.html');
 const afterPageClick = historyPage.url();
 await historyPage.goBack({ waitUntil: 'domcontentloaded', timeout: 2_000 });
 const pageBack = { afterPageClick, afterBack: historyPage.url() };
 await historyPage.close();
 
+const holdingRuntime = await checkRuntime({
+  browser,
+  baseUrl: server.baseUrl,
+  relativeProtoPath: 'tests/fixtures/holding-runtime',
+  protoDir: path.join(kitDir, 'tests', 'fixtures', 'holding-runtime'),
+});
+const holdingPage = (file) => holdingRuntime.pages.find((page) => page.file === file);
+const failuresFor = (file) => (holdingPage(file)?.viewports || []).flatMap((viewport) => (
+  (viewport.composition?.failures || []).map((failure) => ({ width: viewport.width, failure }))
+));
+const holdingComposition = {
+  bandOwnershipFire: failuresFor('band-ownership-fire.html'),
+  bandOwnershipSilent: failuresFor('band-ownership-silent.html'),
+  shellIntersectionFire: failuresFor('shell-intersection-fire.html'),
+  shellIntersectionSilent: failuresFor('shell-intersection-silent.html'),
+  positionedGroundFire: failuresFor('positioned-ground-fire.html'),
+  positionedGroundSilent: failuresFor('positioned-ground-silent.html'),
+  declaredWidthFire: failuresFor('declared-width-fire.html'),
+  declaredWidthSilent: failuresFor('declared-width-silent.html'),
+  groundRegistrationMismatchFire: failuresFor('ground-registration-mismatch-fire.html'),
+  groundRegistrationMismatchSilent: failuresFor('ground-registration-mismatch-silent.html'),
+  shellGeometryFire: failuresFor('shell-geometry-fire.html'),
+  shellGeometrySilent: failuresFor('shell-geometry-silent.html'),
+  holdingContrastFire: failuresFor('holding-contrast-fire.html'),
+  holdingContrastSilent: failuresFor('holding-contrast-silent.html'),
+};
+
+const shellNavRuntime = await checkRuntime({
+  browser,
+  baseUrl: server.baseUrl,
+  relativeProtoPath: 'tests/fixtures/shell-nav-runtime',
+  protoDir: path.join(kitDir, 'tests', 'fixtures', 'shell-nav-runtime'),
+});
+const shellNavigation = {
+  shellConsistencyFailures: shellNavRuntime.shellConsistencyFailures,
+  activeNavigationFailures: shellNavRuntime.activeNavigationFailures,
+};
+
 await browser.close();
 await server.close();
-const result = { doubleBinding, nestedBinding, dropdownGuard, hoverStacking, deepLinkBack, pageBack };
+const result = { doubleBinding, nestedBinding, dropdownGuard, hoverStacking, deepLinkBack, accessibleBack, pageBack, holdingComposition, shellNavigation };
 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');
@@ -83,7 +128,45 @@ if (process.argv.includes('--assert')) {
   assert.deepEqual(hoverStacking, { stackedOpened: 1, plainOpened: 1 }, 'hover styling must not reorder either overlapping or ordinary actions');
   assert.equal(afterLength, beforeLength + 1, 'same-page navigation must add one history entry');
   assert.equal(deepLinkBack.afterBack, historyStart, 'browser Back must return to the pre-anchor URL');
+  assert.deepEqual(accessibleBack, { roleCount: 1, focused: true }, 'Back must be a native focusable link that activates with Enter');
   assert.equal(pageBack.afterBack, historyStart, 'browser Back must return from a different prototype page');
+  assert.deepEqual(holdingComposition.bandOwnershipFire, [{ width: 390, failure: 'holding-surface-count' }], 'must fire: a visible responsive band without exactly one holding surface is gated');
+  assert.deepEqual(holdingComposition.bandOwnershipSilent, [], 'must stay silent: one holding surface in every responsive band passes');
+  assert.deepEqual(holdingComposition.shellIntersectionFire, [
+    { width: 1536, failure: 'shell-intersection' },
+    { width: 390, failure: 'shell-intersection' },
+  ], 'must fire: a base-state shell intersecting the holding rectangle is gated at both widths');
+  assert.deepEqual(holdingComposition.shellIntersectionSilent, [], 'must stay silent: a measured footer outside the holding rectangle passes at both widths');
+  assert.deepEqual(holdingComposition.positionedGroundFire, [
+    { width: 1536, failure: 'donor-ground-active' },
+    { width: 390, failure: 'donor-ground-active' },
+  ], 'must fire: an explicitly registered positioned-scene ground cannot paint on a holding route');
+  assert.deepEqual(holdingComposition.positionedGroundSilent, [], 'must stay silent: an undeclared ground fact is never inferred from paint or selector names');
+  assert.deepEqual(holdingComposition.declaredWidthFire, [
+    { width: 768, failure: 'holding-surface-count' },
+  ], 'must fire: every declared representative breakpoint is audited, including tablet');
+  assert.deepEqual(holdingComposition.declaredWidthSilent, [], 'must stay silent: a three-band holding with one surface per band passes');
+  assert.deepEqual(holdingComposition.groundRegistrationMismatchFire, [
+    { width: 1536, failure: 'ground-registration-mismatch' },
+    { width: 390, failure: 'ground-registration-mismatch' },
+  ], 'must fire: runtime cannot replace the emitted ground fact with config-only optimism');
+  assert.deepEqual(holdingComposition.groundRegistrationMismatchSilent, [], 'must stay silent: the emitted and inventoried positioned-scene fact agrees after neutralization');
+  assert.deepEqual(holdingComposition.shellGeometryFire, [
+    { width: 390, failure: 'shell-geometry-mismatch' },
+  ], 'must fire: freezing a nonzero desktop host origin at mobile width is gated');
+  assert.deepEqual(holdingComposition.shellGeometrySilent, [], 'must stay silent: viewport-specific measured host and shell geometry passes at both widths');
+  assert.deepEqual(holdingComposition.holdingContrastFire, [
+    { width: 1536, failure: 'holding-contrast' },
+    { width: 390, failure: 'holding-contrast' },
+  ], 'must fire: unreadable product copy on the selected neutral surface is gated');
+  assert.deepEqual(holdingComposition.holdingContrastSilent, [], 'must stay silent: readable holding copy passes at both widths');
+  assert.equal(shellNavigation.shellConsistencyFailures.length, 2, 'must fire: one structurally divergent member shell is gated at desktop and mobile widths');
+  assert.deepEqual(shellNavigation.shellConsistencyFailures.map((failure) => failure.group), [
+    '1536:native:header',
+    '390:native:header',
+  ], 'must stay silent: identical canonical shell members share one runtime fingerprint at each width');
+  assert.equal(shellNavigation.activeNavigationFailures.length, 2, 'must fire: a visible marker under the wrong linked nav item is gated at both widths');
+  assert.ok(shellNavigation.activeNavigationFailures.every((failure) => failure.file === 'active-fire.html'), 'must stay silent: already-correct and unlinked source ink produce no active-navigation failure');
 }
 const json = JSON.stringify(result, null, 2) + '\n';
 if (outFile) fs.writeFileSync(outFile, json);

package/prototype-kit/tests/fixtures/holding-runtime/PROVENANCE.md

@@ -0,0 +1,22 @@
+# Holding-composition paired fixtures
+
+These reduced fixtures freeze the exact three pairs named by the
+`ws2-prototype-holding-leak` population study. They deliberately keep only the
+DOM and paint needed to exercise the production runtime gate.
+
+| Guard | Must fire provenance | Must stay silent provenance | Reduced fixtures |
+|---|---|---|---|
+| Active band owns holding content | Salt Marsh `holding-our-story`, Field Notes `holding-journal`, and the 16 progress v2b/v2c holdings | worker-v189 Salt `holding-about`, plus both repaired r2 outputs | `band-ownership-fire.html` / `band-ownership-silent.html` |
+| Retained shell intersects holding | Salt Marsh `holding-our-story` base footer | Field Notes `holding-journal` absolute footer | `shell-intersection-fire.html` / `shell-intersection-silent.html` |
+| Declared positioned-scene ground survives | Field Notes `holding-journal` donor plate | Salt Marsh flat donor ground | `positioned-ground-fire.html` / `positioned-ground-silent.html` |
+
+The population and r2 replays exercise the named full artifacts. These fixtures
+are the deterministic suite form: each must-fire changes exactly one gate
+condition, and each must-stay-silent preserves the adjacent condition that the
+study requires the gate not to infer.
+
+The additional declared-width, ground-registration-mismatch, shell-geometry,
+and holding-contrast pairs protect the evidence chain itself: every measured
+band is visited, the runtime declaration agrees with the emitted producer fact,
+screen geometry is converted into the composition host's coordinate frame, and
+product copy remains readable on the selected neutral surface.

package/prototype-kit/tests/fixtures/holding-runtime/band-ownership-fire.html

@@ -0,0 +1,10 @@
+<!doctype html><html><head><style>
+html,body{margin:0}.ly-band{display:none;position:relative;height:1024px}.generated-screen{position:relative;height:1024px;background:#fff}.proto-holding-title,.proto-holding-sub{color:#111}
+@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}}
+[data-proto-holding-surface]{position:absolute;left:40px;top:180px;width:300px;height:240px}
+</style></head><body>
+<div class="ly-band" data-ly-band="mobile-390"><div class="generated-screen"></div></div>
+<div class="ly-band" data-ly-band="native"><div class="generated-screen"><main data-proto-holding-surface="true"><h1 class="proto-holding-title">Holding</h1><p class="proto-holding-sub">Planned destination.</p></main></div></div>
+<script id="proto-state" type="application/json">{"holding":true,"holdingBands":[{"key":"mobile-390","shellIds":[],"groundRegistration":null},{"key":"native","shellIds":[],"groundRegistration":null}]}</script>
+</body></html>

package/prototype-kit/tests/fixtures/holding-runtime/band-ownership-silent.html

@@ -0,0 +1,10 @@
+<!doctype html><html><head><style>
+html,body{margin:0}.ly-band{display:none;position:relative;height:1024px}.generated-screen{position:relative;height:1024px;background:#fff}.proto-holding-title,.proto-holding-sub{color:#111}
+@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}}
+[data-proto-holding-surface]{position:absolute;left:40px;top:180px;width:300px;height:240px}
+</style></head><body>
+<div class="ly-band" data-ly-band="mobile-390"><div class="generated-screen"><main data-proto-holding-surface="true"><h1 class="proto-holding-title">Holding</h1><p class="proto-holding-sub">Planned destination.</p></main></div></div>
+<div class="ly-band" data-ly-band="native"><div class="generated-screen"><main data-proto-holding-surface="true"><h1 class="proto-holding-title">Holding</h1><p class="proto-holding-sub">Planned destination.</p></main></div></div>
+<script id="proto-state" type="application/json">{"holding":true,"holdingBands":[{"key":"mobile-390","shellIds":[],"groundRegistration":null},{"key":"native","shellIds":[],"groundRegistration":null}]}</script>
+</body></html>

package/prototype-kit/tests/fixtures/holding-runtime/declared-width-fire.html

@@ -0,0 +1,11 @@
+<!doctype html><html><head><style>
+html,body{margin:0}.ly-band{display:none;height:1024px}.generated-screen{height:1024px;background:#fff}.proto-holding-title,.proto-holding-sub{color:#111}
+@media(max-width:600px){.ly-band[data-ly-band="mobile"]{display:block}}
+@media(min-width:601px) and (max-width:1000px){.ly-band[data-ly-band="tablet"]{display:block}}
+@media(min-width:1001px){.ly-band[data-ly-band="native"]{display:block}}
+</style></head><body>
+<div class="ly-band" data-ly-band="mobile"><div class="generated-screen"><main data-proto-holding-surface="true"><h1 class="proto-holding-title">Holding</h1><p class="proto-holding-sub">Planned destination.</p></main></div></div>
+<div class="ly-band" data-ly-band="tablet"><div class="generated-screen"></div></div>
+<div class="ly-band" data-ly-band="native"><div class="generated-screen"><main data-proto-holding-surface="true"><h1 class="proto-holding-title">Holding</h1><p class="proto-holding-sub">Planned destination.</p></main></div></div>
+<script id="proto-state" type="application/json">{"holding":true,"holdingBands":[{"key":"mobile","viewportWidth":390,"shellIds":[],"groundRegistration":null},{"key":"tablet","viewportWidth":768,"shellIds":[],"groundRegistration":null},{"key":"native","viewportWidth":1536,"shellIds":[],"groundRegistration":null}]}</script>
+</body></html>

package/prototype-kit/tests/fixtures/holding-runtime/declared-width-silent.html

@@ -0,0 +1,11 @@
+<!doctype html><html><head><style>
+html,body{margin:0}.ly-band{display:none;height:1024px}.generated-screen{height:1024px;background:#fff}.proto-holding-title,.proto-holding-sub{color:#111}
+@media(max-width:600px){.ly-band[data-ly-band="mobile"]{display:block}}
+@media(min-width:601px) and (max-width:1000px){.ly-band[data-ly-band="tablet"]{display:block}}
+@media(min-width:1001px){.ly-band[data-ly-band="native"]{display:block}}
+</style></head><body>
+<div class="ly-band" data-ly-band="mobile"><div class="generated-screen"><main data-proto-holding-surface="true"><h1 class="proto-holding-title">Holding</h1><p class="proto-holding-sub">Planned destination.</p></main></div></div>
+<div class="ly-band" data-ly-band="tablet"><div class="generated-screen"><main data-proto-holding-surface="true"><h1 class="proto-holding-title">Holding</h1><p class="proto-holding-sub">Planned destination.</p></main></div></div>
+<div class="ly-band" data-ly-band="native"><div class="generated-screen"><main data-proto-holding-surface="true"><h1 class="proto-holding-title">Holding</h1><p class="proto-holding-sub">Planned destination.</p></main></div></div>
+<script id="proto-state" type="application/json">{"holding":true,"holdingBands":[{"key":"mobile","viewportWidth":390,"shellIds":[],"groundRegistration":null},{"key":"tablet","viewportWidth":768,"shellIds":[],"groundRegistration":null},{"key":"native","viewportWidth":1536,"shellIds":[],"groundRegistration":null}]}</script>
+</body></html>

package/prototype-kit/tests/fixtures/holding-runtime/ground-registration-mismatch-fire.html

@@ -0,0 +1,5 @@
+<!doctype html><html><head><style>
+html,body{margin:0}.generated-screen{height:1024px;background:#fff}.proto-holding-title,.proto-holding-sub{color:#111}
+</style></head><body><div class="generated-screen"><main data-proto-holding-surface="true"><h1 class="proto-holding-title">Holding</h1><p class="proto-holding-sub">Planned destination.</p></main></div>
+<script id="proto-state" type="application/json">{"holding":true,"holdingBands":[{"key":"native","viewportWidth":1536,"shellIds":[],"groundRegistration":"positioned-scene"}]}</script>
+</body></html>

package/prototype-kit/tests/fixtures/holding-runtime/ground-registration-mismatch-silent.html

@@ -0,0 +1,5 @@
+<!doctype html><html><head><style>
+html,body{margin:0}.generated-screen{height:1024px;background:#fff}.proto-holding-title,.proto-holding-sub{color:#111}
+</style></head><body><div class="generated-screen" data-ly-ground-registration="positioned-scene"><main data-proto-holding-surface="true"><h1 class="proto-holding-title">Holding</h1><p class="proto-holding-sub">Planned destination.</p></main></div>
+<script id="proto-state" type="application/json">{"holding":true,"holdingBands":[{"key":"native","viewportWidth":1536,"shellIds":[],"groundRegistration":"positioned-scene"}]}</script>
+</body></html>

package/prototype-kit/tests/fixtures/holding-runtime/holding-contrast-fire.html

@@ -0,0 +1,5 @@
+<!doctype html><html><head><style>
+html,body{margin:0}.generated-screen{height:1024px;background:#fff}.proto-holding-title,.proto-holding-sub{color:#eee}
+</style></head><body><div class="generated-screen" data-ly-ground-registration="positioned-scene"><main data-proto-holding-surface="true"><h1 class="proto-holding-title">Holding</h1><p class="proto-holding-sub">Planned destination.</p></main></div>
+<script id="proto-state" type="application/json">{"holding":true,"holdingBands":[{"key":"native","viewportWidth":1536,"shellIds":[],"groundRegistration":"positioned-scene"}]}</script>
+</body></html>

package/prototype-kit/tests/fixtures/holding-runtime/holding-contrast-silent.html

@@ -0,0 +1,5 @@
+<!doctype html><html><head><style>
+html,body{margin:0}.generated-screen{height:1024px;background:#fff}.proto-holding-title,.proto-holding-sub{color:#111}
+</style></head><body><div class="generated-screen" data-ly-ground-registration="positioned-scene"><main data-proto-holding-surface="true"><h1 class="proto-holding-title">Holding</h1><p class="proto-holding-sub">Planned destination.</p></main></div>
+<script id="proto-state" type="application/json">{"holding":true,"holdingBands":[{"key":"native","viewportWidth":1536,"shellIds":[],"groundRegistration":"positioned-scene"}]}</script>
+</body></html>

package/prototype-kit/tests/fixtures/holding-runtime/positioned-ground-fire.html

@@ -0,0 +1,5 @@
+<!doctype html><html><head><style>
+html,body{margin:0;height:1024px}.generated-screen{position:relative;height:1024px;background-color:#fff;background-image:linear-gradient(#123,#456)}.holding{position:absolute;left:40px;top:120px;width:300px;height:240px}.proto-holding-title,.proto-holding-sub{color:#111}
+</style></head><body><div class="generated-screen" data-ly-ground-registration="positioned-scene"><main class="holding" data-proto-holding-surface="true"><h1 class="proto-holding-title">Holding</h1><p class="proto-holding-sub">Planned destination.</p></main></div>
+<script id="proto-state" type="application/json">{"holding":true,"holdingBands":[{"key":"native","shellIds":[],"groundRegistration":"positioned-scene"}]}</script>
+</body></html>

package/prototype-kit/tests/fixtures/holding-runtime/positioned-ground-silent.html

@@ -0,0 +1,5 @@
+<!doctype html><html><head><style>
+html,body{margin:0;height:1024px}.generated-screen{position:relative;height:1024px;background-color:#fff;background-image:linear-gradient(#123,#456)}.holding{position:absolute;left:40px;top:120px;width:300px;height:240px}.proto-holding-title,.proto-holding-sub{color:#111}
+</style></head><body><div class="generated-screen"><main class="holding" data-proto-holding-surface="true"><h1 class="proto-holding-title">Holding</h1><p class="proto-holding-sub">Planned destination.</p></main></div>
+<script id="proto-state" type="application/json">{"holding":true,"holdingBands":[{"key":"native","shellIds":[],"groundRegistration":null}]}</script>
+</body></html>

package/prototype-kit/tests/fixtures/holding-runtime/shell-geometry-fire.html

@@ -0,0 +1,5 @@
+<!doctype html><html><head><style>
+html,body{margin:0}.generated-screen{height:1024px;background:#fff}.host{position:relative;margin-left:max(0px,calc((100vw - 1000px)/2));width:1000px;height:1024px;zoom:min(1,calc(100vw / 1000px))}.shell{position:absolute;left:30px;top:100px;width:300px;height:50px}.holding{position:absolute;left:30px;top:300px}.proto-holding-title,.proto-holding-sub{color:#111}
+</style></head><body><div class="generated-screen"><div class="host" data-proto-holding-band="native"><header id="measured-header" class="shell"></header><main class="holding" data-proto-holding-surface="true"><h1 class="proto-holding-title">Holding</h1><p class="proto-holding-sub">Planned destination.</p></main></div></div>
+<script id="proto-state" type="application/json">{"holding":true,"holdingBands":[{"key":"native","viewportWidth":1536,"hostOrigins":[{"viewportWidth":1536,"origin":[268,0]},{"viewportWidth":390,"origin":[268,0]}],"shellIds":["measured-header"],"shellBoxes":[{"id":"measured-header","box":[30,100,300,50]}],"groundRegistration":null}]}</script>
+</body></html>

package/prototype-kit/tests/fixtures/holding-runtime/shell-geometry-silent.html

@@ -0,0 +1,5 @@
+<!doctype html><html><head><style>
+html,body{margin:0}.generated-screen{height:1024px;background:#fff}.host{position:relative;margin-left:max(0px,calc((100vw - 1000px)/2));width:1000px;height:1024px;zoom:min(1,calc(100vw / 1000px))}.shell{position:absolute;left:30px;top:100px;width:300px;height:50px}.holding{position:absolute;left:30px;top:300px}.proto-holding-title,.proto-holding-sub{color:#111}
+</style></head><body><div class="generated-screen"><div class="host" data-proto-holding-band="native"><header id="measured-header" class="shell"></header><main class="holding" data-proto-holding-surface="true"><h1 class="proto-holding-title">Holding</h1><p class="proto-holding-sub">Planned destination.</p></main></div></div>
+<script id="proto-state" type="application/json">{"holding":true,"holdingBands":[{"key":"native","viewportWidth":1536,"hostOrigins":[{"viewportWidth":1536,"origin":[268,0]},{"viewportWidth":390,"origin":[0,0]}],"shellIds":["measured-header"],"shellBoxes":[{"id":"measured-header","box":[30,100,300,50]}],"groundRegistration":null}]}</script>
+</body></html>

package/prototype-kit/tests/fixtures/holding-runtime/shell-intersection-fire.html

@@ -0,0 +1,5 @@
+<!doctype html><html><head><style>
+html,body{margin:0;height:1024px}.generated-screen{position:relative;height:1024px;background:#fff}.shell{position:absolute;left:0;top:0;width:100%;height:100px}.holding{position:absolute;left:40px;top:60px;width:300px;height:240px}.proto-holding-title,.proto-holding-sub{color:#111}
+</style></head><body><div class="generated-screen"><header id="base-header" class="shell"></header><main class="holding" data-proto-holding-surface="true"><h1 class="proto-holding-title">Holding</h1><p class="proto-holding-sub">Planned destination.</p></main></div>
+<script id="proto-state" type="application/json">{"holding":true,"holdingBands":[{"key":"native","shellIds":["base-header"],"groundRegistration":null}]}</script>
+</body></html>

package/prototype-kit/tests/fixtures/holding-runtime/shell-intersection-silent.html

@@ -0,0 +1,5 @@
+<!doctype html><html><head><style>
+html,body{margin:0;height:1024px}.generated-screen{position:relative;height:1024px;background:#fff}.shell{position:absolute;left:0;top:900px;width:100%;height:100px}.holding{position:absolute;left:40px;top:120px;width:300px;height:240px}.proto-holding-title,.proto-holding-sub{color:#111}
+</style></head><body><div class="generated-screen"><footer id="base-footer" class="shell"></footer><main class="holding" data-proto-holding-surface="true"><h1 class="proto-holding-title">Holding</h1><p class="proto-holding-sub">Planned destination.</p></main></div>
+<script id="proto-state" type="application/json">{"holding":true,"holdingBands":[{"key":"native","shellIds":["base-footer"],"groundRegistration":null}]}</script>
+</body></html>

package/prototype-kit/tests/fixtures/runtime/history.html

@@ -1,5 +1,5 @@
 <!doctype html><html><head><meta charset="utf-8"><style>body{margin:0}section{height:900px;padding:20px}</style></head><body>
-<section><button id="jump" data-proto-action="navigate" data-proto-target="history.html#target">Jump</button><button id="next" data-proto-action="navigate" data-proto-target="history-destination.html">Next page</button></section>
+<section><button id="jump" data-proto-action="navigate" data-proto-target="history.html#target">Jump</button><a id="next" href="history-destination.html" data-proto-action="navigate" data-proto-target="history-destination.html" aria-label="Back to destination">Back</a></section>
 <section id="target"><h1>Target</h1></section>
 <script id="proto-state" type="application/json">{"unit":"history","tokens":{},"contentFile":null}</script>
 <script src="../../../runtime/proto.js"></script>

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

@@ -0,0 +1,6 @@
+# Shell and navigation runtime fixture
+
+Reduced synthetic pair for the measured prototype runtime contract. The fire
+pages introduce one structural shell mismatch and one misplaced active marker;
+the silent pages keep identical shells, including one page with deliberately
+unlinked source ink.

package/prototype-kit/tests/fixtures/shell-nav-runtime/active-fire.html

@@ -0,0 +1,3 @@
+<!doctype html><html><head><meta charset="utf-8"><style>
+html,body{margin:0;width:100%;height:100%}.shell{position:relative;width:100%;height:72px;background:#fff}.nav{position:absolute;top:20px;font:16px Arial}.menu{left:30px}.journal{left:130px}.ink{position:absolute;left:130px;top:42px;width:40px;height:3px;background:#a43}
+</style></head><body><header id="active-fire-header" class="shell"><span id="active-fire-menu" class="nav menu">Menu</span><span id="active-fire-journal" class="nav journal">Journal</span><span id="active-fire-ink" class="ink"></span></header></body></html>

package/prototype-kit/tests/fixtures/shell-nav-runtime/proto-manifest.json

@@ -0,0 +1,20 @@
+{
+ "units": [
+  {
+   "id": "shell-silent",
+   "shellBands": [{"key":"native","regions":[{"region":"header","shellId":"shell-silent-header","canonicalSignature":"fixture","consistencyStatus":"canonical","activeMarkerIds":["shell-silent-ink"],"active":{"status":"linked","navText":"Menu","navId":"shell-silent-menu","markerId":"shell-silent-ink"}}]}]
+  },
+  {
+   "id": "unlinked-silent",
+   "shellBands": [{"key":"native","regions":[{"region":"header","shellId":"unlinked-silent-header","canonicalSignature":"fixture","consistencyStatus":"canonical","activeMarkerIds":["unlinked-silent-ink"],"active":{"status":"silent","navText":null,"navId":null,"markerId":null}}]}]
+  },
+  {
+   "id": "shell-fire",
+   "shellBands": [{"key":"native","regions":[{"region":"header","shellId":"shell-fire-header","canonicalSignature":"fixture","consistencyStatus":"canonical","activeMarkerIds":["shell-fire-ink"],"active":{"status":"linked","navText":"Menu","navId":"shell-fire-menu","markerId":"shell-fire-ink"}}]}]
+  },
+  {
+   "id": "active-fire",
+   "shellBands": [{"key":"native","regions":[{"region":"header","shellId":"active-fire-header","canonicalSignature":"fixture","consistencyStatus":"canonical","activeMarkerIds":["active-fire-ink"],"active":{"status":"linked","navText":"Menu","navId":"active-fire-menu","markerId":"active-fire-ink"}}]}]
+  }
+ ]
+}

package/prototype-kit/tests/fixtures/shell-nav-runtime/shell-fire.html

@@ -0,0 +1,3 @@
+<!doctype html><html><head><meta charset="utf-8"><style>
+html,body{margin:0;width:100%;height:100%}.shell{position:relative;width:100%;height:72px;background:#fff}.nav{position:absolute;top:20px;font:16px Arial}.menu{left:30px}.journal{left:130px}.extra{position:absolute;right:20px;top:20px;font:16px Arial}.ink{position:absolute;left:30px;top:42px;width:40px;height:3px;background:#a43}
+</style></head><body><header id="shell-fire-header" class="shell"><span id="shell-fire-menu" class="nav menu">Menu</span><span id="shell-fire-journal" class="nav journal">Journal</span><span id="shell-fire-extra" class="extra">Overflow</span><span id="shell-fire-ink" class="ink"></span></header></body></html>

package/prototype-kit/tests/fixtures/shell-nav-runtime/shell-silent.html

@@ -0,0 +1,3 @@
+<!doctype html><html><head><meta charset="utf-8"><style>
+html,body{margin:0;width:100%;height:100%}.shell{position:relative;width:100%;height:72px;background:#fff}.nav{position:absolute;top:20px;font:16px Arial}.menu{left:30px}.journal{left:130px}.ink{position:absolute;left:30px;top:42px;width:40px;height:3px;background:#a43}
+</style></head><body><header id="shell-silent-header" class="shell"><span id="shell-silent-menu" class="nav menu">Menu</span><span id="shell-silent-journal" class="nav journal">Journal</span><span id="shell-silent-ink" class="ink"></span></header></body></html>

package/prototype-kit/tests/fixtures/shell-nav-runtime/unlinked-silent.html

@@ -0,0 +1,3 @@
+<!doctype html><html><head><meta charset="utf-8"><style>
+html,body{margin:0;width:100%;height:100%}.shell{position:relative;width:100%;height:72px;background:#fff}.nav{position:absolute;top:20px;font:16px Arial}.menu{left:30px}.journal{left:130px}.ink{position:absolute;left:130px;top:42px;width:40px;height:3px;background:#a43}
+</style></head><body><header id="unlinked-silent-header" class="shell"><span id="unlinked-silent-menu" class="nav menu">Menu</span><span id="unlinked-silent-journal" class="nav journal">Journal</span><span id="unlinked-silent-ink" class="ink"></span></header></body></html>