@12ui/design 0.2.51 → 0.2.52

package/prototype-kit/polish/tests/breathing-check.mjs

@@ -1,9 +1,13 @@
 #!/usr/bin/env node
-// section-breathing: floor + background-integrity pairs.
+// section-breathing: declared floor + background-integrity pairs.
 //   floor    three solid sections, gaps ~42 / ~102 → target ceil8(median+32) = 104: seam 1 gets +62, seam 2 (+2) is DECLINED
 //   probe    on the fire fixture the pixel probe accepts the accepted seam (9/9 probes in the owner's colour, document
 //            grew by exactly the addition); with a deliberately wrong owner colour it must fail with 'coverage'
+//   rhythm   a semantic seam's amount is the page's own scale T = min(largest, 2 x median) structural gap, measured
+//            from the page's real air line; nested seams ride the enclosing painter; drawings are never opened
 import path from 'node:path';
+import fs from 'node:fs';
+import crypto from 'node:crypto';
 import { chromium } from '@playwright/test';
 import * as rule from '../rules/section-breathing.mjs';
 import { applyOverridesScript, overridesToCss, mergeOverrides } from '../overrides.mjs';
@@ -35,43 +39,87 @@ check('probe accepts a solid seam (9 probes, height +32)', good.ok && good.probe
 const bad = await probeSeams(page, seamMeta(fire).map((s) => ({ ...s, color: 'rgb(0, 90, 200)' })), base);
 check('probe rejects a seam whose pixels are not the declared ground', !bad.ok && bad.failures.every((f) => f.kind === 'coverage' || f.kind === 'floor-exposure') && bad.failures.length === 9, JSON.stringify({ ok: bad.ok, n: bad.failures.length, kinds: [...new Set(bad.failures.map((f) => f.kind))] }));
 
-// attachment pair: only a declared decoration touching the seam travels with the following section
-await page.goto('file://' + path.join(here, 'fixtures/section-breathing/attachment-fire.html'), { waitUntil: 'load' });
-const attachmentBase = await page.evaluate(() => document.documentElement.scrollHeight);
-const attachmentFire = await page.evaluate(rule.browserFn(), { metrics: {}, params: rule.params });
-const attachmentMove = attachmentFire.find((o) => o.id === 'viewport-1-a-fruit');
-await page.evaluate(applyOverridesScript(), overridesToCss(mergeOverrides(attachmentFire)));
-const attachmentProbe = await probeSeams(page, seamMeta(attachmentFire), attachmentBase);
-check('boundary-hugging decoration travels and keeps its seam attachment', attachmentMove?.dy === 32 && seamMeta(attachmentFire)[0]?.attachments?.[0]?.id === 'viewport-1-a-fruit' && attachmentProbe.ok, JSON.stringify({ move: attachmentMove, ground: attachmentProbe }));
-await page.goto('file://' + path.join(here, 'fixtures/section-breathing/attachment-silent.html'), { waitUntil: 'load' });
-const attachmentSilent = await page.evaluate(rule.browserFn(), { metrics: {}, params: rule.params });
-check('ordinary boundary image is not reclassified as decoration', !attachmentSilent.some((o) => o.id === 'viewport-1-a-product-image'), JSON.stringify(attachmentSilent.filter((o) => o.id === 'viewport-1-a-product-image')));
-
-// semantic pair: direct declared FAQ/footer boundaries breathe; a dense dashboard boundary stays silent
+// semantic pair: model-declared FAQ/footer boundaries breathe; a model-declared
+// content-bearing dashboard boundary refuses and the fixture bytes stay exact.
 await page.goto('file://' + path.join(here, 'fixtures/section-breathing/semantic-fire.html'), { waitUntil: 'load' });
 const semanticBase = await page.evaluate(() => document.documentElement.scrollHeight);
 const semantic = await page.evaluate(rule.browserFn(), { metrics: {}, params: rule.params });
+const semanticCensus = await page.evaluate(rule.browserFn(), { metrics: {}, params: { ...rule.params, census: true } });
 const semanticMerged = mergeOverrides(semantic);
 await page.evaluate(applyOverridesScript(), overridesToCss(semanticMerged));
 const semanticProbe = await probeSeams(page, seamMeta(semantic), semanticBase);
 const faq = semanticMerged.find((o) => o.id === 'viewport-1-a-faq');
 const footer = semanticMerged.find((o) => o.id === 'viewport-1-a-footer');
 const section = semanticMerged.find((o) => o.id === 'viewport-1-a');
-check('declared FAQ and footer boundaries each gain 32 px', faq?.dy === 32 && footer?.dy === 64 && section?.h === 1088 && faq?.meta?.seam?.beforePeers?.includes('viewport-1-a-comparison-aside') && semanticProbe.ok, JSON.stringify({ faq, footer, section, ground: semanticProbe }));
-await page.goto('file://' + path.join(here, 'fixtures/section-breathing/semantic-silent.html'), { waitUntil: 'load' });
+// page scale: structural gaps 40 (comparison) and 24 (faq) → median 32, largest 40, T = min(40, 64) = 40.
+// Both seams sit at 16 px, so each is brought up to 40 (+24) and never past it.
+check('declared FAQ and footer boundaries each rise to the 40 px page scale',
+  faq?.dy === 24 && footer?.dy === 48 && section?.h === 1072
+  && semanticCensus.every((row) => row.pageScale?.target === 40 && row.gap === 16 && row.addition === 24)
+  && faq?.meta?.seam?.beforePeers?.includes('viewport-1-a-comparison-aside') && semanticProbe.ok,
+  JSON.stringify({ faq, footer, section, scale: semanticCensus.map((r) => r.pageScale), ground: semanticProbe }));
+const silentFile = path.join(here, 'fixtures/section-breathing/semantic-silent.html');
+const silentBefore = fs.readFileSync(silentFile);
+await page.goto('file://' + silentFile, { waitUntil: 'load' });
 const semanticSilent = await page.evaluate(rule.browserFn(), { metrics: {}, params: rule.params });
-check('dense dashboard footer boundary stays tight', semanticSilent.length === 0, JSON.stringify(semanticSilent));
+const silentCensus = await page.evaluate(rule.browserFn(), { metrics: {}, params: { ...rule.params, census: true } });
+const silentAfter = fs.readFileSync(silentFile);
+const sha = (bytes) => crypto.createHash('sha256').update(bytes).digest('hex');
+check('declared content-bearing boundary stays byte-identical', semanticSilent.length === 0
+  && silentCensus[0]?.declined === 'declared-not-openable'
+  && sha(silentBefore) === sha(silentAfter), JSON.stringify({ census: silentCensus, sha256: sha(silentAfter) }));
+
+// rhythm model: a nested seam, measured from the page's real air line, painted by the enclosing panel.
+// Pairwise the declared intro→details pair reads 200 px of air and would propose nothing; the page
+// actually shows 40 px because the floating note card outlives intro inside the seam.
+await page.goto('file://' + path.join(here, 'fixtures/section-breathing/rhythm-nested.html'), { waitUntil: 'load' });
+const nestedBase = await page.evaluate(() => document.documentElement.scrollHeight);
+const nestedCensus = await page.evaluate(rule.browserFn(), { metrics: {}, params: { ...rule.params, census: true } });
+const nestedRow = nestedCensus[0];
+const nested = await page.evaluate(rule.browserFn(), { metrics: {}, params: rule.params });
+const nestedMerged = mergeOverrides(nested);
+const pairwiseGap = await page.evaluate(() => (
+  document.getElementById('viewport-1-a-panel-details').getBoundingClientRect().top
+  - document.getElementById('viewport-1-a-panel-intro').getBoundingClientRect().bottom));
+check('nested seam measures the real air line, not the declared pair',
+  nestedRow?.gap === 40 && pairwiseGap === 200 && nestedRow?.airAnchor === 'viewport-1-a-panel-note'
+  && nestedRow?.before === 'viewport-1-a-panel-intro' && nestedRow?.group === 'viewport-1-a-panel',
+  JSON.stringify({ realAir: nestedRow?.gap, pairwiseGap, anchor: nestedRow?.airAnchor }));
+check('nested seam rises to the page scale and grows every container it sits in',
+  nestedRow?.addition === 40 && nestedRow?.pageScale?.target === 80 && nestedRow?.declined === null
+  && nestedRow?.ground?.execution === 'group-shift'
+  && nestedMerged.find((o) => o.id === 'viewport-1-a-panel-details')?.dy === 40
+  && nestedMerged.find((o) => o.id === 'viewport-1-a-panel')?.h === 840
+  && nestedMerged.find((o) => o.id === 'viewport-1-a')?.h === 1064,
+  JSON.stringify({ addition: nestedRow?.addition, scale: nestedRow?.pageScale, overrides: nestedMerged.map((o) => ({ id: o.id, dy: o.dy, h: o.h })) }));
+await page.evaluate(applyOverridesScript(), overridesToCss(nestedMerged));
+const nestedProbe = await probeSeams(page, seamMeta(nested), nestedBase);
+check('the enclosing panel really paints the nested air (9 real-pixel probes)',
+  nestedProbe.ok && nestedProbe.probes === 9 && nestedProbe.documentHeight === nestedBase + 40,
+  JSON.stringify({ ok: nestedProbe.ok, probes: nestedProbe.probes, h: [nestedBase, nestedProbe.documentHeight], failures: nestedProbe.failures.slice(0, 2) }));
+
+// do-not-touch: same shape, but the panel's children share no common edge and vary wildly in width,
+// so vertical position is carrying meaning. This is the metro-diagram geometry; it is never opened.
+const diagramFile = path.join(here, 'fixtures/section-breathing/diagram-silent.html');
+const diagramBefore = fs.readFileSync(diagramFile);
+await page.goto('file://' + diagramFile, { waitUntil: 'load' });
+const diagram = await page.evaluate(rule.browserFn(), { metrics: {}, params: rule.params });
+const diagramCensus = await page.evaluate(rule.browserFn(), { metrics: {}, params: { ...rule.params, census: true } });
+check('a declared seam inside a drawing is refused and the fixture stays byte-identical',
+  diagram.length === 0 && diagramCensus[0]?.declined === 'declared-inside-diagram-group'
+  && sha(diagramBefore) === sha(fs.readFileSync(diagramFile)),
+  JSON.stringify({ census: diagramCensus, sha256: sha(diagramBefore) }));
 
-// shadow-gradient pair: the measured neutral monotone fade is tolerated; a hard coloured band still fails
-for (const [fixture, expected] of [['shadow-fire.html', true], ['shadow-silent.html', false]]) {
-  await page.goto('file://' + path.join(here, 'fixtures/section-breathing', fixture), { waitUntil: 'load' });
-  const shadowBase = await page.evaluate(() => document.documentElement.scrollHeight);
-  const shadow = await page.evaluate(rule.browserFn(), { metrics: {}, params: rule.params });
-  await page.evaluate(applyOverridesScript(), overridesToCss(mergeOverrides(shadow)));
-  const verdict = await probeSeams(page, seamMeta(shadow), shadowBase);
-  const ok = expected ? verdict.ok && verdict.toleratedShadowGradients > 0 : !verdict.ok && verdict.failures.some((f) => f.kind === 'coverage');
-  check(expected ? 'neutral monotone shadow fade is tolerated' : 'hard coloured seam band stays rejected', ok, JSON.stringify(verdict));
-}
+// stays silent: a page with no structural gap has no scale, so the model proposes nothing rather
+// than falling back to a constant.
+await page.goto('file://' + path.join(here, 'fixtures/section-breathing/no-scale-silent.html'), { waitUntil: 'load' });
+const noScale = await page.evaluate(rule.browserFn(), { metrics: {}, params: rule.params });
+const noScaleCensus = await page.evaluate(rule.browserFn(), { metrics: {}, params: { ...rule.params, census: true } });
+check('a page with no structural gap proposes nothing',
+  noScale.length === 0 && noScaleCensus.length === 2
+  && noScaleCensus.every((row) => row.addition === 0 && row.pageScale === null
+    && row.declined === 'page has no structural gap to set a scale from'),
+  JSON.stringify(noScaleCensus.map((r) => ({ after: r.after, addition: r.addition, declined: r.declined }))));
 await browser.close();
 if (failures) { console.log(`${failures} failure(s)`); process.exit(1); }
 console.log('section-breathing pairs green');

package/prototype-kit/polish/tests/fixtures/section-breathing/diagram-silent.html

@@ -0,0 +1,20 @@
+<!doctype html><meta charset="utf-8"><style>*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui}.generated-screen{position:relative}#page-flow{position:relative;width:1536px;height:1024px}section{position:absolute;left:0;width:1536px}.text{position:absolute;white-space:nowrap}</style>
+<!--
+  Do-not-touch: a drawing, not a stack.
+  Same shape as rhythm-nested.html — a declared seam between two children of a painted panel — but
+  the panel's children share no common left, right or centre edge and their widths vary wildly.
+  Vertical position carries meaning here (this is the geometry of the metro-line diagram on
+  r4-b13-kinetic--network-map), so the seam is refused as declared-inside-diagram-group.
+-->
+<div class="generated-screen"><div class="ly-anchor-canvas" style="position:relative;height:1024px"><div id="page-flow">
+  <section id="viewport-1-a" style="top:0;height:1024px">
+    <div id="viewport-1-a-page" data-ly-section-ground-owner="diagram-ground" style="position:absolute;inset:0;background:#ffffff"></div>
+    <div id="viewport-1-a-map" style="position:absolute;left:120px;top:120px;width:1296px;height:800px;background:#eef2f6">
+      <div id="viewport-1-a-map-westgate" style="position:absolute;left:0;top:0;width:200px;height:60px"><p class="text" id="viewport-1-a-map-westgate-name" style="left:0;top:0">Westgate</p><p class="text" id="viewport-1-a-map-westgate-time" style="left:0;top:30px">4 min</p></div>
+      <div id="viewport-1-a-map-harbourfront" style="position:absolute;left:320px;top:120px;width:60px;height:60px"><p class="text" id="viewport-1-a-map-harbourfront-name" style="left:0;top:0">Harbour</p><p class="text" id="viewport-1-a-map-harbourfront-time" style="left:0;top:30px">7</p></div>
+      <div id="viewport-1-a-map-riverside" style="position:absolute;left:140px;top:240px;width:480px;height:60px"><p class="text" id="viewport-1-a-map-riverside-name" style="left:0;top:0">Riverside Interchange</p><p class="text" id="viewport-1-a-map-riverside-time" style="left:0;top:30px">11 min</p></div>
+      <div id="viewport-1-a-map-oakwood" style="position:absolute;left:600px;top:360px;width:110px;height:60px"><p class="text" id="viewport-1-a-map-oakwood-name" style="left:0;top:0">Oakwood</p><p class="text" id="viewport-1-a-map-oakwood-time" style="left:0;top:30px">15</p></div>
+      <div id="viewport-1-a-map-hillcrest" data-ly-section-boundary="before" data-ly-section-boundary-revision="section-boundary-v1" data-ly-section-before="viewport-1-a-map-oakwood" data-ly-section-owner="diagram-ground" data-ly-section-openability="openable" data-ly-section-continuation="owner-fill" data-ly-section-fact="terminus" style="position:absolute;left:260px;top:480px;width:300px;height:60px"><p class="text" id="viewport-1-a-map-hillcrest-name" style="left:0;top:0">Hillcrest</p><p class="text" id="viewport-1-a-map-hillcrest-time" style="left:0;top:30px">22 min</p></div>
+    </div>
+  </section>
+</div></div></div>

package/prototype-kit/polish/tests/fixtures/section-breathing/fire.html

@@ -1,6 +1,6 @@
 <!doctype html><meta charset="utf-8"><style>*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui}.generated-screen{position:relative}#page-flow{position:relative;width:1536px;height:1400px}section{position:absolute;left:0;width:1536px}.text{position:absolute;white-space:nowrap}</style>
-<div class="generated-screen"><div class="ly-anchor-canvas" style="position:relative;height:1400px"><div id="page-flow">
+<div class="generated-screen" data-ly-section-ground-owner="page-ground" style="background:#fbf6ee"><div class="ly-anchor-canvas" style="position:relative;height:1400px"><div id="page-flow">
   <!-- solid → solid: the hero's own cream section is the full-band ground; ink gap 24 px → one seam → +32 -->
   <section id="viewport-1-a" style="top:0;height:700px;background:#fbf6ee"><h1 id="viewport-1-a-heading" class="text" style="left:80px;top:200px;font-size:48px">Give your time.</h1><p id="viewport-1-a-text" class="text" style="left:80px;top:660px;font-size:16px">Join neighbors helping pack food.</p></section>
-  <section id="viewport-2-a" style="top:700px;height:700px;background:#fbf6ee"><p id="viewport-2-a-eyebrow" class="text" style="left:80px;top:20px;font-size:12px">UPCOMING OPPORTUNITIES</p><h2 id="viewport-2-a-heading" class="text" style="left:80px;top:60px;font-size:32px">This week</h2></section>
+  <section id="viewport-2-a" data-ly-section-boundary="before" data-ly-section-boundary-revision="section-boundary-v1" data-ly-section-before="viewport-1-a" data-ly-section-owner="page-ground" data-ly-section-openability="openable" data-ly-section-continuation="owner-fill" data-ly-section-fact="page" style="top:700px;height:700px;background:#fbf6ee"><p id="viewport-2-a-eyebrow" class="text" style="left:80px;top:20px;font-size:12px">UPCOMING OPPORTUNITIES</p><h2 id="viewport-2-a-heading" class="text" style="left:80px;top:60px;font-size:32px">This week</h2></section>
 </div></div></div>

package/prototype-kit/polish/tests/fixtures/section-breathing/floor.html

@@ -1,7 +1,7 @@
 <!doctype html><meta charset="utf-8"><style>*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui}.generated-screen{position:relative}#page-flow{position:relative;width:1536px;height:1400px}section{position:absolute;left:0;width:1536px}.text{position:absolute;white-space:nowrap}</style>
-<div class="generated-screen"><div class="ly-anchor-canvas" style="position:relative;height:2100px"><div id="page-flow">
+<div class="generated-screen" data-ly-section-ground-owner="page-ground" style="background:#fff"><div class="ly-anchor-canvas" style="position:relative;height:2100px"><div id="page-flow">
   <!-- three solid sections, ink gaps 40 / 100: median 70 → target ceil8(102)=104 → additions 64 (cap) and 4 (declined: below the floor) -->
   <section id="viewport-1-a" style="top:0;height:700px;background:#fff"><h1 id="viewport-1-a-heading" class="text" style="left:80px;top:200px;font-size:48px">One</h1><p id="viewport-1-a-text" class="text" style="left:80px;top:660px;font-size:16px">end of one</p></section>
-  <section id="viewport-2-a" style="top:700px;height:700px;background:#fff"><p id="viewport-2-a-top" class="text" style="left:80px;top:20px;font-size:16px">start of two</p><p id="viewport-2-a-text" class="text" style="left:80px;top:600px;font-size:16px">end of two</p></section>
-  <section id="viewport-3-a" style="top:1400px;height:700px;background:#fff"><p id="viewport-3-a-top" class="text" style="left:80px;top:20px;font-size:16px">start of three</p></section>
+  <section id="viewport-2-a" data-ly-section-boundary="before" data-ly-section-boundary-revision="section-boundary-v1" data-ly-section-before="viewport-1-a" data-ly-section-owner="page-ground" data-ly-section-openability="openable" data-ly-section-continuation="owner-fill" data-ly-section-fact="page" style="top:700px;height:700px;background:#fff"><p id="viewport-2-a-top" class="text" style="left:80px;top:20px;font-size:16px">start of two</p><p id="viewport-2-a-text" class="text" style="left:80px;top:600px;font-size:16px">end of two</p></section>
+  <section id="viewport-3-a" data-ly-section-boundary="before" data-ly-section-boundary-revision="section-boundary-v1" data-ly-section-before="viewport-2-a" data-ly-section-owner="page-ground" data-ly-section-openability="openable" data-ly-section-continuation="owner-fill" data-ly-section-fact="page" style="top:1400px;height:700px;background:#fff"><p id="viewport-3-a-top" class="text" style="left:80px;top:20px;font-size:16px">start of three</p></section>
 </div></div></div>

package/prototype-kit/polish/tests/fixtures/section-breathing/no-scale-silent.html

@@ -0,0 +1,18 @@
+<!doctype html><meta charset="utf-8"><style>*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui}.generated-screen{position:relative}#page-flow{position:relative;width:1536px;height:1024px}section{position:absolute;left:0;width:1536px}.text{position:absolute;white-space:nowrap}</style>
+<!--
+  Stays silent: a page with nothing to measure a scale from.
+  Both declarations are valid and openable, but every group carries a single ink leaf, so the page
+  has no structural gap anywhere and no page scale exists. The rhythm model can only redistribute
+  air a page already contains somewhere; with no scale it proposes nothing rather than inventing a
+  constant. (This is the pre-rhythm semantic-fire fixture, kept for exactly that property.)
+-->
+<div class="generated-screen"><div class="ly-anchor-canvas" style="position:relative;height:1024px"><div id="page-flow">
+  <section id="viewport-1-a" style="top:0;height:1024px">
+    <div id="viewport-1-a-page" data-ly-section-ground-owner="semantic-ground" style="position:absolute;inset:0;background:#fefefe"></div>
+    <div id="viewport-1-a-comparison" style="position:absolute;left:120px;top:200px;width:1296px;height:400px;border:1px solid #ddd"><p class="text" id="viewport-1-a-comparison-text" style="left:20px;top:20px">Comparison</p></div>
+    <div id="viewport-1-a-comparison-aside" style="position:absolute;left:816px;top:240px;width:600px;height:320px"></div>
+    <div style="position:absolute;left:0;top:600px;width:1536px;height:16px;background:#eee8e2"></div>
+    <div id="viewport-1-a-faq" data-ly-section-boundary="before" data-ly-section-boundary-revision="section-boundary-v1" data-ly-section-before="viewport-1-a-comparison" data-ly-section-owner="semantic-ground" data-ly-section-openability="openable" data-ly-section-continuation="owner-fill" data-ly-section-fact="questions" style="position:absolute;left:120px;top:616px;width:1296px;height:120px"><p class="text" id="viewport-1-a-faq-text" style="left:0;top:0">Common purchase questions</p></div>
+    <footer id="viewport-1-a-footer" data-ly-section-boundary="before" data-ly-section-boundary-revision="section-boundary-v1" data-ly-section-before="viewport-1-a-faq" data-ly-section-owner="semantic-ground" data-ly-section-openability="openable" data-ly-section-continuation="owner-fill" data-ly-section-fact="footer" style="position:absolute;left:0;top:752px;width:1536px;height:272px;background:#f8f8f8"><p class="text" id="viewport-1-a-footer-text" style="left:120px;top:40px">Footer</p></footer>
+  </section>
+</div></div></div>

package/prototype-kit/polish/tests/fixtures/section-breathing/rhythm-nested.html

@@ -0,0 +1,21 @@
+<!doctype html><meta charset="utf-8"><style>*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui}.generated-screen{position:relative}#page-flow{position:relative;width:1536px;height:1024px}section{position:absolute;left:0;width:1536px}.text{position:absolute;white-space:nowrap}</style>
+<!--
+  Nested seam + real air line.
+  The declared pair is intro -> details, two children of a panel that is NOT a direct child of the
+  section. The panel's own solid ground paints the cut, so no new ownership proof is needed.
+  Pairwise, intro->details reads 200 px of air; the page actually shows 40 px, because the floating
+  note card outlives intro inside the seam. Page scale: panel gaps 80 / 40 / 40 -> median 40,
+  largest 80, T = min(80, 2*40) = 80. Addition = 80 - 40 = 40. Measured pairwise it would be
+  max(0, 80 - 200) = 0, so this fixture fires only when the air line is read correctly.
+-->
+<div class="generated-screen"><div class="ly-anchor-canvas" style="position:relative;height:1024px"><div id="page-flow">
+  <section id="viewport-1-a" style="top:0;height:1024px">
+    <div id="viewport-1-a-page" data-ly-section-ground-owner="nested-ground" style="position:absolute;inset:0;background:#ffffff"></div>
+    <div id="viewport-1-a-panel" style="position:absolute;left:120px;top:120px;width:1296px;height:800px;background:#f2efe9">
+      <div id="viewport-1-a-panel-heading" style="position:absolute;left:20px;top:0;width:1256px;height:40px"><p class="text" id="viewport-1-a-panel-heading-title" style="left:0;top:0">Release notes</p><p class="text" id="viewport-1-a-panel-heading-date" style="left:600px;top:0">March</p></div>
+      <div id="viewport-1-a-panel-intro" style="position:absolute;left:20px;top:120px;width:1256px;height:120px"><p class="text" id="viewport-1-a-panel-intro-lead" style="left:0;top:0">What changed this month</p><p class="text" id="viewport-1-a-panel-intro-body" style="left:0;top:60px">Faster exports and a calmer inbox.</p></div>
+      <div id="viewport-1-a-panel-note" style="position:absolute;left:900px;top:280px;width:300px;height:120px;background:#e6e0d4"><p class="text" id="viewport-1-a-panel-note-label" style="left:16px;top:16px">Note</p><p class="text" id="viewport-1-a-panel-note-body" style="left:16px;top:56px">Rolling out slowly.</p></div>
+      <div id="viewport-1-a-panel-details" data-ly-section-boundary="before" data-ly-section-boundary-revision="section-boundary-v1" data-ly-section-before="viewport-1-a-panel-intro" data-ly-section-owner="nested-ground" data-ly-section-openability="openable" data-ly-section-continuation="owner-fill" data-ly-section-fact="details" style="position:absolute;left:20px;top:440px;width:1256px;height:320px"><p class="text" id="viewport-1-a-panel-details-title" style="left:0;top:0">Every change</p><p class="text" id="viewport-1-a-panel-details-body" style="left:0;top:60px">Twelve fixes and two new panels.</p></div>
+    </div>
+  </section>
+</div></div></div>

package/prototype-kit/polish/tests/fixtures/section-breathing/semantic-fire.html

@@ -1,11 +1,17 @@
 <!doctype html><meta charset="utf-8"><style>*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui}.generated-screen{position:relative}#page-flow{position:relative;width:1536px;height:1024px}section{position:absolute;left:0;width:1536px}.text{position:absolute;white-space:nowrap}</style>
 <div class="generated-screen"><div class="ly-anchor-canvas" style="position:relative;height:1024px"><div id="page-flow">
   <section id="viewport-1-a" style="top:0;height:1024px">
-    <div id="viewport-1-a-page" style="position:absolute;inset:0;background:#fefefe"></div>
-    <div id="viewport-1-a-comparison" style="position:absolute;left:120px;top:200px;width:1296px;height:400px;border:1px solid #ddd"><p class="text" id="viewport-1-a-comparison-text" style="left:20px;top:20px">Comparison</p></div>
+    <div id="viewport-1-a-page" data-ly-section-ground-owner="semantic-ground" style="position:absolute;inset:0;background:#fefefe"></div>
+    <div id="viewport-1-a-comparison" style="position:absolute;left:120px;top:200px;width:1296px;height:400px;border:1px solid #ddd">
+      <div id="viewport-1-a-comparison-plans" style="position:absolute;left:20px;top:20px;width:1256px;height:100px"><p class="text" id="viewport-1-a-comparison-plans-title" style="left:0;top:0">Compare plans</p><p class="text" id="viewport-1-a-comparison-plans-note" style="left:0;top:40px">Billed annually</p></div>
+      <div id="viewport-1-a-comparison-table" style="position:absolute;left:20px;top:160px;width:1256px;height:200px"><p class="text" id="viewport-1-a-comparison-table-head" style="left:0;top:0">Included</p><p class="text" id="viewport-1-a-comparison-table-body" style="left:0;top:40px">Unlimited seats</p></div>
+    </div>
     <div id="viewport-1-a-comparison-aside" style="position:absolute;left:816px;top:240px;width:600px;height:320px"></div>
     <div style="position:absolute;left:0;top:600px;width:1536px;height:16px;background:#eee8e2"></div>
-    <div id="viewport-1-a-faq" style="position:absolute;left:120px;top:616px;width:1296px;height:120px"><p class="text" id="viewport-1-a-faq-text" style="left:0;top:0">Common purchase questions</p></div>
-    <footer id="viewport-1-a-footer" style="position:absolute;left:0;top:752px;width:1536px;height:272px;background:#f8f8f8"><p class="text" id="viewport-1-a-footer-text" style="left:120px;top:40px">Footer</p></footer>
+    <div id="viewport-1-a-faq" data-ly-section-boundary="before" data-ly-section-boundary-revision="section-boundary-v1" data-ly-section-before="viewport-1-a-comparison" data-ly-section-owner="semantic-ground" data-ly-section-openability="openable" data-ly-section-continuation="owner-fill" data-ly-section-fact="questions" style="position:absolute;left:120px;top:616px;width:1296px;height:120px">
+      <div id="viewport-1-a-faq-lead" style="position:absolute;left:0;top:0;width:1296px;height:40px"><p class="text" id="viewport-1-a-faq-lead-title" style="left:0;top:0">Common purchase questions</p><p class="text" id="viewport-1-a-faq-lead-note" style="left:600px;top:0">Updated weekly</p></div>
+      <div id="viewport-1-a-faq-items" style="position:absolute;left:0;top:64px;width:1296px;height:56px"><p class="text" id="viewport-1-a-faq-items-one" style="left:0;top:0">Can I change plans?</p><p class="text" id="viewport-1-a-faq-items-two" style="left:0;top:28px">Do you offer refunds?</p></div>
+    </div>
+    <footer id="viewport-1-a-footer" data-ly-section-boundary="before" data-ly-section-boundary-revision="section-boundary-v1" data-ly-section-before="viewport-1-a-faq" data-ly-section-owner="semantic-ground" data-ly-section-openability="openable" data-ly-section-continuation="owner-fill" data-ly-section-fact="footer" style="position:absolute;left:0;top:752px;width:1536px;height:272px;background:#f8f8f8"><p class="text" id="viewport-1-a-footer-text" style="left:120px;top:40px">Footer</p></footer>
   </section>
 </div></div></div>

package/prototype-kit/polish/tests/fixtures/section-breathing/semantic-silent.html

@@ -1,8 +1,8 @@
 <!doctype html><meta charset="utf-8"><style>*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui}.generated-screen{position:relative}#page-flow{position:relative;width:1536px;height:1024px}section{position:absolute;left:0;width:1536px}.text{position:absolute;white-space:nowrap}</style>
 <div class="generated-screen"><div class="ly-anchor-canvas" style="position:relative;height:1024px"><div id="page-flow">
   <section id="viewport-1-a" style="top:0;height:1024px">
-    <div id="viewport-1-a-page" style="position:absolute;inset:0;background:#081018"></div>
+    <div id="viewport-1-a-page" data-ly-section-ground-owner="content-ground" style="position:absolute;inset:0;background:#081018"></div>
     <div id="viewport-1-a-dashboard" style="position:absolute;left:24px;top:100px;width:1488px;height:700px;border:1px solid #334"><p class="text" id="viewport-1-a-dashboard-text" style="left:20px;top:20px;color:white">Dense operations dashboard</p></div>
-    <footer id="viewport-1-a-footer" style="position:absolute;left:0;top:804px;width:1536px;height:220px;background:#0b141d"><p class="text" id="viewport-1-a-footer-text" style="left:24px;top:40px;color:white">Compact dashboard footer</p></footer>
+    <footer id="viewport-1-a-footer" data-ly-section-boundary="before" data-ly-section-boundary-revision="section-boundary-v1" data-ly-section-before="viewport-1-a-dashboard" data-ly-section-owner="content-ground" data-ly-section-openability="not-openable" data-ly-section-fact="footer" style="position:absolute;left:0;top:804px;width:1536px;height:220px;background:#0b141d"><p class="text" id="viewport-1-a-footer-text" style="left:24px;top:40px;color:white">Compact dashboard footer</p></footer>
   </section>
 </div></div></div>

package/prototype-kit/polish/tests/fixtures/section-breathing/silent.html

@@ -1,6 +1,6 @@
 <!doctype html><meta charset="utf-8"><style>*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui}.generated-screen{position:relative}#page-flow{position:relative;width:1536px;height:1400px}section{position:absolute;left:0;width:1536px}.text{position:absolute;white-space:nowrap}</style>
-<div class="generated-screen"><div class="ly-anchor-canvas" style="position:relative;height:1400px"><div id="page-flow">
+<div class="generated-screen" data-ly-section-ground-owner="content-ground"><div class="ly-anchor-canvas" style="position:relative;height:1400px"><div id="page-flow">
   <!-- gradient → image: both grounds are experimental classes; the seam's ink gap is narrow but the page must abstain -->
   <section id="viewport-1-a" style="top:0;height:700px;background-image:linear-gradient(#fbf6ee,#efe6d2)"><h1 id="viewport-1-a-heading" class="text" style="left:80px;top:200px;font-size:48px">Give your time.</h1><p id="viewport-1-a-text" class="text" style="left:80px;top:660px;font-size:16px">Join neighbors.</p></section>
-  <section id="viewport-2-a" style="top:700px;height:700px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==);background-size:cover;background-repeat:no-repeat"><p id="viewport-2-a-eyebrow" class="text" style="left:80px;top:20px;font-size:12px">UPCOMING</p></section>
+  <section id="viewport-2-a" data-ly-section-boundary="before" data-ly-section-boundary-revision="section-boundary-v1" data-ly-section-before="viewport-1-a" data-ly-section-owner="content-ground" data-ly-section-openability="not-openable" data-ly-section-fact="page" style="top:700px;height:700px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==);background-size:cover;background-repeat:no-repeat"><p id="viewport-2-a-eyebrow" class="text" style="left:80px;top:20px;font-size:12px">UPCOMING</p></section>
 </div></div></div>

package/prototype-kit/polish/tests/fixtures/section-breathing/tight.html

@@ -1,7 +1,7 @@
 <!doctype html><meta charset="utf-8"><style>*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui}.generated-screen{position:relative}#page-flow{position:relative;width:1536px;height:1600px}section{position:absolute;left:0;width:1536px;height:400px;background:#fff}.text{position:absolute;white-space:nowrap;font-size:16px;line-height:16px}</style>
-<div class="generated-screen"><div class="ly-anchor-canvas" style="position:relative;height:1600px"><div id="page-flow">
+<div class="generated-screen" data-ly-section-ground-owner="page-ground" style="background:#fff"><div class="ly-anchor-canvas" style="position:relative;height:1600px"><div id="page-flow">
   <section id="viewport-1-a" style="top:0"><p id="viewport-1-a-end" class="text" style="left:80px;top:376px">One</p></section>
-  <section id="viewport-2-a" style="top:400px"><p id="viewport-2-a-start" class="text" style="left:80px;top:0">Two start</p><p id="viewport-2-a-end" class="text" style="left:80px;top:376px">Two end</p></section>
-  <section id="viewport-3-a" style="top:800px"><p id="viewport-3-a-start" class="text" style="left:80px;top:0">Three start</p><p id="viewport-3-a-end" class="text" style="left:80px;top:370px">Three end</p></section>
-  <section id="viewport-4-a" style="top:1200px"><p id="viewport-4-a-start" class="text" style="left:80px;top:16px">Four</p></section>
+  <section id="viewport-2-a" data-ly-section-boundary="before" data-ly-section-boundary-revision="section-boundary-v1" data-ly-section-before="viewport-1-a" data-ly-section-owner="page-ground" data-ly-section-openability="openable" data-ly-section-continuation="owner-fill" data-ly-section-fact="page" style="top:400px"><p id="viewport-2-a-start" class="text" style="left:80px;top:0">Two start</p><p id="viewport-2-a-end" class="text" style="left:80px;top:376px">Two end</p></section>
+  <section id="viewport-3-a" data-ly-section-boundary="before" data-ly-section-boundary-revision="section-boundary-v1" data-ly-section-before="viewport-2-a" data-ly-section-owner="page-ground" data-ly-section-openability="openable" data-ly-section-continuation="owner-fill" data-ly-section-fact="page" style="top:800px"><p id="viewport-3-a-start" class="text" style="left:80px;top:0">Three start</p><p id="viewport-3-a-end" class="text" style="left:80px;top:370px">Three end</p></section>
+  <section id="viewport-4-a" data-ly-section-boundary="before" data-ly-section-boundary-revision="section-boundary-v1" data-ly-section-before="viewport-3-a" data-ly-section-owner="page-ground" data-ly-section-openability="openable" data-ly-section-continuation="owner-fill" data-ly-section-fact="page" style="top:1200px"><p id="viewport-4-a-start" class="text" style="left:80px;top:16px">Four</p></section>
 </div></div></div>

package/prototype-kit/runtime/proto.js

@@ -111,12 +111,59 @@
     setTimeout(() => { t.classList.remove('proto-toast-in'); setTimeout(() => t.remove(), 300); }, 1800);
   }
 
+  // WAI-ARIA 1.2: aria-disabled="true" on an ancestor disables the element
+  // and ALL focusable descendants — a nearer descendant's own
+  // aria-disabled="false" does not cancel it. closest('[aria-disabled]')
+  // stops at the first match regardless of its value, so it can find a
+  // descendant's "false" and miss a "true" further up. Walk the whole
+  // ancestor chain instead.
+  function ariaDisabledAncestor(el) {
+    for (let node = el; node; node = node.parentElement) {
+      const value = node.getAttribute && node.getAttribute('aria-disabled');
+      if (value != null && value.trim().toLowerCase() === 'true') return node;
+    }
+    return null;
+  }
+
+  function sourceInertReason(el) {
+    if (el.closest('[disabled]')) return 'disabled';
+    if (el.closest('[inert]')) return 'inert';
+    if (el.closest('[hidden]')) return 'hidden';
+    if (el.closest('[data-proto-demoted]')) return 'demoted';
+    // The converter's own marker for a non-native control it deliberately
+    // left presentational — must be honored here too, or a real click can
+    // reactivate a control the source explicitly declared static.
+    if (el.closest('[data-12ui-presentational-control]')) return 'presentational-control';
+    if (ariaDisabledAncestor(el)) return 'aria-disabled';
+    return null;
+  }
+
+  function markBoundAction(el, action) {
+    const inertReason = sourceInertReason(el);
+    if (inertReason) {
+      el.dataset.protoSuppressed = `source-${inertReason}`;
+      return false;
+    }
+    // This must run in the real browser DOM. The build-time Linkedom CSSOM
+    // drops declaration priority, while an inline important declaration here
+    // outranks every selector-based rule, including #id!important.
+    el.style.setProperty('pointer-events', 'auto', 'important');
+    el.dataset.protoPointerRestored = 'true';
+    el.dataset.protoRuntimeBound = action;
+    el.classList.add('proto-clickable');
+    return true;
+  }
+
   // ---- bind actions
   const bound = { navigate: 0, dropdown: 0, modal: 0, field: 0 };
   for (const el of document.querySelectorAll('[data-proto-action]')) {
     const action = el.dataset.protoAction;
-    el.classList.add('proto-clickable');
     if (action === 'navigate') {
+      if (!el.dataset.protoTarget) {
+        el.dataset.protoSuppressed = 'unresolved-navigation';
+        continue;
+      }
+      if (!markBoundAction(el, action)) continue;
       bound.navigate++;
       el.addEventListener('click', (e) => {
         e.preventDefault(); e.stopPropagation();
@@ -131,10 +178,12 @@
         el.dataset.protoSuppressed = 'invalid-dropdown';
         continue;
       }
+      if (!markBoundAction(el, action)) continue;
       bound.dropdown++;
       const labelEl = el.dataset.protoLabel ? document.getElementById(el.dataset.protoLabel) : null;
       el.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); openDropdown(el, options, labelEl); });
     } else if (action === 'modal') {
+      if (!markBoundAction(el, action)) continue;
       bound.modal++;
       const modal = JSON.parse(el.dataset.protoModal || '{}');
       el.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); openModal(modal); });
@@ -145,6 +194,7 @@
   for (const el of document.querySelectorAll('[data-proto-field]')) {
     const textEl = el.dataset.protoField ? document.getElementById(el.dataset.protoField) : null;
     if (!textEl) continue;
+    if (!markBoundAction(el, 'field')) continue;
     bound.field++;
     const placeholder = textEl.textContent;
     const submitLabel = el.dataset.protoSubmit || 'Send';
@@ -164,7 +214,7 @@
     });
     el.addEventListener('click', (e) => { if (e.target !== textEl) { textEl.focus(); } });
     for (const btn of document.querySelectorAll(`[data-proto-submit-for="${textEl.id}"]`)) {
-      btn.classList.add('proto-clickable');
+      if (!markBoundAction(btn, 'field-submit')) continue;
       btn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); textEl.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })); });
     }
   }