npm - @12ui/design - Versions diffs - 0.2.44 → 0.2.45 - Mend

@12ui/design 0.2.44 → 0.2.45

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (125) hide show

package/prototype-kit/polish/tests/fixtures/fit-text/silent.html ADDED Viewed

@@ -0,0 +1,33 @@
+<!doctype html><meta charset="utf-8"><style>
+*{margin:0;padding:0;box-sizing:border-box} body{font-family:Arial,Helvetica,sans-serif}
+section{position:relative;width:1536px;height:1024px;background:#fff}
+.fx-col{display:flex;flex-direction:column;align-items:flex-start}
+.text,h1,h2,h3{position:relative;display:block;white-space:pre;margin:0}
+.badge{position:relative;display:block;white-space:pre;background:#e8f0ff;border-radius:999px;color:#1d3f8f;text-align:center}
+.image{position:absolute;background:#7a8ba0}
+</style>
+<section id="viewport-1-a">
+  <!-- near-threshold: 3 px of spill is line-metric noise, not a defect -->
+  <div id="viewport-1-a-row" class="fx-col" style="position:absolute;left:80px;top:80px;width:183px;height:40px">
+    <p id="viewport-1-a-row-text" class="text" style="width:183px;height:19px;font-size:16px;line-height:19px">Monthly recurring revenue</p>
+  </div>
+  <!-- a display line deliberately bleeding out of its column on BOTH sides, over a photo panel -->
+  <div id="viewport-1-a-hero" style="position:absolute;left:400px;top:240px;width:520px;height:260px">
+    <div id="viewport-1-a-hero-image" class="image" style="left:0;top:0;width:520px;height:260px"></div>
+    <h1 id="viewport-1-a-hero-heading" style="position:absolute;left:110px;top:96px;width:300px;height:60px;font-size:52px;line-height:60px;color:#fff;text-indent:-90px">STAY OUT LATE</h1>
+  </div>
+  <!-- a pill whose label rightly fills it edge to edge -->
+  <div id="viewport-1-a-tags" class="fx-col" style="position:absolute;left:80px;top:620px;width:400px;height:40px">
+    <span id="viewport-1-a-tags-badge" class="badge" style="width:88px;height:22px;font-size:12px;line-height:22px">In review</span>
+  </div>
+  <!-- a label that renders wider than its measured slot but into 450px of open canvas: nothing is clipped,
+       covered or collided with, so there is nothing to repair (widening the box changes zero pixels) -->
+  <div id="viewport-1-a-panel" class="fx-col" style="position:absolute;left:80px;top:760px;width:600px;height:120px">
+    <p id="viewport-1-a-panel-text" class="text" style="width:150px;height:19px;font-size:16px;line-height:19px">Deployment health overview</p>
+  </div>
+</section>

package/prototype-kit/polish/tests/fixtures/harm/button-overlap.html ADDED Viewed

@@ -0,0 +1,10 @@
+<!doctype html><meta charset="utf-8"><style>*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui}section{position:relative;width:1536px;height:1024px;background:#fff}.band{position:absolute;left:60px;top:20px;width:1400px;height:60px}.btn{position:absolute;width:90px;height:40px;border:1px solid #333;border-radius:8px;background:#fff;font:14px system-ui}.text{position:absolute;font-size:12px}</style>
+<section id="viewport-1-a">
+  <div id="viewport-1-a-header" class="band"><button id="viewport-1-a-header-signin" class="btn" style="left:1280px;top:10px">Sign in</button><!-- fire: the header's wrapped sign-in landing on the hero eyebrow (different parents) --><button id="viewport-1-a-hero-stray" class="btn" style="left:20px;top:110px">Sign in</button></div>
+  <div id="viewport-1-a-hero" style="position:absolute;left:60px;top:100px;width:800px;height:300px">
+    <p id="viewport-1-a-hero-eyebrow" class="text" style="left:0;top:42px">VOLUNTEER WITH LANTERNFUND</p>
+    <!-- silent: a button beside its label (no intersection) -->
+    <button id="viewport-1-a-hero-cta" class="btn" style="left:0;top:200px">Give</button>
+    <p id="viewport-1-a-hero-note" class="text" style="left:110px;top:212px">No account needed</p>
+  </div>
+</section>

package/prototype-kit/polish/tests/fixtures/harm/declared-gap.html ADDED Viewed

@@ -0,0 +1,5 @@
+<!doctype html><meta charset="utf-8"><style>*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui}section{position:relative;width:1536px;height:1024px}.block{position:absolute;left:120px;width:1296px}.text{position:absolute;left:20px;top:20px}</style>
+<section id="viewport-1-a">
+  <div id="viewport-1-a-content" class="block" style="top:100px;height:400px;border:1px solid #ddd"><span id="viewport-1-a-content-text" class="text">Content</span></div>
+  <footer id="viewport-1-a-footer" class="block" style="top:516px;height:180px;background:#eee"><span id="viewport-1-a-footer-text" class="text">Footer</span></footer>
+</section>

package/prototype-kit/polish/tests/fixtures/harm/offcenter.html ADDED Viewed

@@ -0,0 +1,21 @@
+<!doctype html><meta charset="utf-8"><style>
+*{margin:0;padding:0;box-sizing:border-box} body{font-family:system-ui}
+section{position:relative;width:1536px;height:1024px;background:#fff}
+.rail{position:absolute;left:0;top:0;width:221px;height:1024px;background:#f6f4f0}
+.btn{position:absolute;left:23px;width:177px;height:43px;background:#245;border-radius:8px;display:inline-flex;align-items:center;justify-content:flex-start}
+.btn > span{font-size:15px;color:#fff;white-space:nowrap}
+.row{position:absolute;left:23px;width:180px;height:40px}
+.row .text{position:absolute;top:12px;font-size:15px}
+.row .icon{position:absolute;top:16px;width:12px;height:8px;background:#888}
+</style>
+<section id="viewport-1-a">
+  <div id="viewport-1-a-rail" class="rail" data-proto-shell="x">
+    <!-- off: donor-centered label left at its donor padding (80 px) in a 177 px box → insets 80 / ~27 -->
+    <button id="viewport-1-a-btn-off" class="btn" style="top:100px;border:0" data-proto-fit="centered"><span style="padding-left:80px">New study</span></button>
+    <!-- ok: the same label re-centred (padding 61 px) → insets ≈ 61 / 46 … within 8? no — use 53: text ≈ 70 px → 53 / 54 -->
+    <button id="viewport-1-a-btn-ok" class="btn" style="top:200px;border:0" data-proto-fit="centered"><span style="padding-left:53px">New study</span></button>
+    <!-- right-anchored chevron still inside (ok) vs one left at its donor offset past the box (off) -->
+    <div id="viewport-1-a-row-ok" class="row" style="top:300px" data-proto-fit="right"><span id="viewport-1-a-row-ok-text" class="text" style="left:0">Acme Team</span><span id="viewport-1-a-row-ok-icon" class="icon" style="left:160px"></span></div>
+    <div id="viewport-1-a-row-off" class="row" style="top:360px" data-proto-fit="right"><span id="viewport-1-a-row-off-text" class="text" style="left:0">Acme Team</span><span id="viewport-1-a-row-off-icon" class="icon" style="left:130px"></span></div>
+  </div>
+</section>

package/prototype-kit/polish/tests/fixtures/harm/page.html ADDED Viewed

@@ -0,0 +1,17 @@
+<!doctype html><meta charset="utf-8"><style>
+*{margin:0;padding:0;box-sizing:border-box} body{font-family:system-ui}
+section{position:relative;width:1536px;height:1024px;background:#fff}
+.rail{position:absolute;left:0;top:0;width:220px;height:1024px;background:#f6f4f0}
+.item{position:absolute;left:16px;width:180px;height:20px}
+.icon{position:absolute;left:0;top:2px;width:16px;height:16px;background:#888;border-radius:3px}
+.label{position:absolute;left:28px;top:0;font-size:15px}
+.content{position:absolute;left:271px;top:40px;width:1200px;height:900px;background:#fff;border:1px solid #ddd}
+</style>
+<section id="viewport-1-a">
+  <div id="viewport-1-a-rail" class="rail" data-proto-shell="viewport-1-c-nav">
+    <div id="viewport-1-a-nav-item-1" class="item" style="top:100px"><span id="viewport-1-a-nav-item-1-icon" class="icon"></span><span id="viewport-1-a-nav-item-1-text" class="text label">Overview</span></div>
+    <div id="viewport-1-a-nav-item-2" class="item" style="top:140px"><span id="viewport-1-a-nav-item-2-icon" class="icon"></span><span id="viewport-1-a-nav-item-2-text" class="text label">Proposals</span></div>
+    <div id="viewport-1-a-nav-item-3" class="item" style="top:180px"><span id="viewport-1-a-nav-item-3-icon" class="icon"></span><span id="viewport-1-a-nav-item-3-text" class="text label">Streams</span></div>
+  </div>
+  <div id="viewport-1-a-content" class="content"><span id="viewport-1-a-content-title" class="text" style="position:absolute;left:24px;top:24px;font-size:22px">Review</span></div>
+</section>

package/prototype-kit/polish/tests/fixtures/left-rail/expect.json ADDED Viewed

	@@ -0,0 +1 @@
1	+ [{"id":"viewport-1-a-nav-brand","dx":19.4},{"id":"viewport-1-a-catalog-results","dx":2},{"id":"viewport-1-a-catalog-filters","dx":8.2},{"id":"viewport-1-a-footer-brand","dx":-31.8},{"id":"viewport-1-a-footer-legal","dx":-42}]

package/prototype-kit/polish/tests/fixtures/left-rail/fire.html ADDED Viewed

@@ -0,0 +1,8 @@
+<!doctype html><meta charset="utf-8"><style>*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui}section{position:relative;width:1536px;height:1024px;background:#fafaf8}.blk{position:absolute;left:0;width:1536px}.text{position:absolute;white-space:nowrap}.panel{position:absolute;width:216px;height:300px;background:#fff;border:1px solid #ddd;border-radius:12px}.band{position:absolute;left:0;width:1536px;height:200px;background:#f0efe9}</style>
+<section id="viewport-1-a">
+  <!-- ragged rail: nav 67.6, hero 87, results 85, filter panel 78.8, footer 118.8 / legal 129 -->
+  <div id="viewport-1-a-nav" class="blk" style="top:0;height:40px"><div id="viewport-1-a-nav-brand" style="position:absolute;left:67.6px;top:8px;width:200px;height:24px"><p id="viewport-1-a-nav-brand-text" class="text" style="left:0;top:0;font-size:20px">Verdant Row</p></div></div>
+  <div id="viewport-1-a-hero" class="blk" style="top:60px;height:160px"><h1 id="viewport-1-a-hero-heading" class="text" style="left:87px;top:20px;font-size:48px">Hard-to-Kill Plants.</h1><p id="viewport-1-a-hero-text" class="text" style="left:87px;top:90px;font-size:16px">Tough, beautiful, and easy to care for.</p></div>
+  <div id="viewport-1-a-catalog" class="blk" style="top:230px;height:540px"><p id="viewport-1-a-catalog-results" class="text" style="left:85px;top:0;font-size:12px">6 results</p><div id="viewport-1-a-catalog-filters" class="panel" style="left:78.8px;top:40px"><p id="viewport-1-a-catalog-filters-title" class="text" style="left:16px;top:12px;font-size:13px">Filter by</p></div><div id="viewport-1-a-catalog-grid" style="position:absolute;left:325px;top:40px;width:1160px;height:420px"><p id="viewport-1-a-catalog-grid-text" class="text" style="left:0;top:0">Cast Iron Plant</p></div></div>
+  <div id="viewport-1-a-footer" class="band" style="top:800px"><div id="viewport-1-a-footer-brand" style="position:absolute;left:118.8px;top:16px;width:140px;height:70px"><p id="viewport-1-a-footer-brand-text" class="text" style="left:0;top:0">Verdant Row</p></div><div id="viewport-1-a-footer-legal" style="position:absolute;left:129px;top:170px;width:1256px;height:12px"><p id="viewport-1-a-footer-legal-text" class="text" style="left:0;top:0;font-size:10px">© 2024 Verdant Row</p></div></div>
+</section>

package/prototype-kit/polish/tests/fixtures/left-rail/silent.html ADDED Viewed

@@ -0,0 +1,8 @@
+<!doctype html><meta charset="utf-8"><style>*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui}section{position:relative;width:1536px;height:1024px;background:#fafaf8}.blk{position:absolute;left:0;width:1536px}.text{position:absolute;white-space:nowrap}</style>
+<section id="viewport-1-a">
+  <!-- everything already on one rail at 80; a centered hero; an indented sub-item (+24) under an on-rail block; a grid 245 px away -->
+  <div id="viewport-1-a-nav" class="blk" style="top:0;height:40px"><div id="viewport-1-a-nav-brand" style="position:absolute;left:80px;top:8px;width:200px;height:24px"><p id="viewport-1-a-nav-brand-text" class="text" style="left:0;top:0;font-size:20px">Verdant Row</p></div></div>
+  <div id="viewport-1-a-hero" class="blk" style="top:60px;height:160px"><h1 id="viewport-1-a-hero-heading" class="text" style="left:568px;top:20px;width:400px;text-align:center;font-size:40px">Centered hero title</h1></div>
+  <div id="viewport-1-a-list" class="blk" style="top:240px;height:300px"><p id="viewport-1-a-list-title" class="text" style="left:80px;top:0;font-size:16px">Plants</p><p id="viewport-1-a-list-item-1" class="text" style="left:104px;top:30px">— Cast Iron Plant</p><p id="viewport-1-a-list-item-2" class="text" style="left:104px;top:56px">— Snake Plant</p><div id="viewport-1-a-list-grid" style="position:absolute;left:325px;top:0;width:1100px;height:280px"><p id="viewport-1-a-list-grid-text" class="text" style="left:0;top:0">Grid</p></div></div>
+  <div id="viewport-1-a-footer" class="blk" style="top:800px;height:200px;background:#f0efe9"><p id="viewport-1-a-footer-text" class="text" style="left:80px;top:20px">© 2024</p></div>
+</section>

package/prototype-kit/polish/tests/fixtures/overlap/expect.json ADDED Viewed

@@ -0,0 +1,4 @@
+[
+ { "id": "viewport-1-a-intro-text", "dx": 0, "dy": 9 },
+ { "id": "viewport-1-a-note-text", "dx": 0, "dy": 9 }
+]

package/prototype-kit/polish/tests/fixtures/overlap/fire.html ADDED Viewed

@@ -0,0 +1,26 @@
+<!doctype html><meta charset="utf-8"><title>overlap/fire</title><style>
+*{margin:0;padding:0;box-sizing:border-box} body{font-family:Helvetica,Arial,sans-serif}
+section{position:relative;width:1000px;height:600px;background:#fff}
+.group{position:absolute}
+.panel{position:absolute;background:#fff;border:1px solid #e6e6e6;border-radius:12px}
+.text{position:absolute;left:0;top:0;font-size:24px;line-height:40px;color:#222;white-space:nowrap}
+.icon{position:absolute;left:0;top:0;width:24px;height:24px;background:#1f4d2b;border-radius:4px}
+</style>
+<section id="viewport-1-a">
+  <!-- text × text, different parents: the hero line and the panel's first line were laid out apart and
+       assembled 7 px into each other -->
+  <div id="viewport-1-a-hero" class="group" style="left:40px;top:40px;width:400px;height:60px">
+    <div id="viewport-1-a-hero-heading" class="text">Coastal flavours</div>
+  </div>
+  <div id="viewport-1-a-intro" class="panel" style="left:40px;top:60px;width:400px;height:200px">
+    <div id="viewport-1-a-intro-text" class="text" style="left:0;top:0;width:360px">Local heart, every night</div>
+  </div>
+  <!-- text × icon, different parents -->
+  <div id="viewport-1-a-badge" class="group" style="left:500px;top:300px;width:300px;height:40px">
+    <div id="viewport-1-a-badge-icon" class="icon"></div>
+  </div>
+  <div id="viewport-1-a-note" class="panel" style="left:500px;top:310px;width:300px;height:120px">
+    <div id="viewport-1-a-note-text" class="text" style="width:260px">Open until late</div>
+  </div>
+</section>

package/prototype-kit/polish/tests/fixtures/overlap/silent.html ADDED Viewed

@@ -0,0 +1,39 @@
+<!doctype html><meta charset="utf-8"><title>overlap/silent</title><style>
+*{margin:0;padding:0;box-sizing:border-box} body{font-family:Helvetica,Arial,sans-serif}
+section{position:relative;width:1000px;height:800px;background:#fff}
+.group{position:absolute}
+.panel{position:absolute;background:#fff;border:1px solid #e6e6e6;border-radius:12px}
+.text{position:absolute;left:0;top:0;font-size:24px;line-height:40px;color:#222;white-space:nowrap}
+.pill{position:absolute;background:#eef4ee;border-radius:999px}
+.icon{position:absolute;width:24px;height:24px;background:#1f4d2b;border-radius:4px}
+</style>
+<section id="viewport-1-a">
+  <!-- 1. two heading LINES under one parent: the overlap is the design's leading, not a collision -->
+  <div id="viewport-1-a-title" class="group" style="left:40px;top:40px;width:500px;height:90px">
+    <h2 id="viewport-1-a-title-line-1" class="text" style="font-size:44px;line-height:56px">AFTERGLOW</h2>
+    <h2 id="viewport-1-a-title-line-2" class="text" style="font-size:44px;line-height:56px;top:44px">NIGHT MARKET</h2>
+  </div>
+  <!-- 2. an icon and its label inside one pill -->
+  <div id="viewport-1-a-pill" class="pill" style="left:600px;top:40px;width:220px;height:40px">
+    <div id="viewport-1-a-pill-icon" class="icon" style="left:12px;top:8px"></div>
+    <div id="viewport-1-a-pill-label" class="text" style="left:28px;top:0;font-size:18px;line-height:40px">Live &amp; measuring</div>
+  </div>
+  <!-- 3. a 40 px overlap between different parents: that is a layout decision, not a nudge -->
+  <div id="viewport-1-a-slab" class="group" style="left:40px;top:300px;width:500px;height:80px">
+    <div id="viewport-1-a-slab-text" class="text" style="font-size:40px;line-height:60px">Deep overlap</div>
+  </div>
+  <div id="viewport-1-a-under" class="panel" style="left:40px;top:320px;width:500px;height:140px">
+    <div id="viewport-1-a-under-text" class="text" style="font-size:40px;line-height:60px;width:460px">Sits right through</div>
+  </div>
+  <!-- 4. a small overlap with no slack: the piece that would move has a line 2 px below it -->
+  <div id="viewport-1-a-tag" class="group" style="left:600px;top:520px;width:340px;height:40px">
+    <div id="viewport-1-a-tag-text" class="text">Sold out</div>
+  </div>
+  <div id="viewport-1-a-list" class="panel" style="left:600px;top:540px;width:340px;height:180px">
+    <div id="viewport-1-a-list-text-1" class="text" style="width:300px">First row label</div>
+    <div id="viewport-1-a-list-text-2" class="text" style="top:30px;width:300px">Second row label</div>
+  </div>
+</section>

package/prototype-kit/polish/tests/fixtures/page-cut/expect.json ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ [{"id":"viewport-1-a-sidebar-footer","dy":-64},
2	+ {"id":"viewport-1-b","h":515}]

package/prototype-kit/polish/tests/fixtures/page-cut/fire.html ADDED Viewed

@@ -0,0 +1,31 @@
+<!doctype html><meta charset="utf-8"><style>
+*{margin:0;padding:0;box-sizing:border-box} body{font-family:Arial,Helvetica,sans-serif}
+section{position:relative;width:1536px;background:#fff}
+.text,h1,h2,h3{position:relative;display:block;white-space:pre;margin:0}
+.image{position:absolute;background:#7a8ba0;border-radius:8px}
+</style>
+<!-- 1. transplanted shell: the canonical rail is 700px tall but its footer block keeps the donor page's y -->
+<section id="viewport-1-a" style="height:700px">
+  <aside id="viewport-1-a-sidebar" data-proto-shell style="position:absolute;left:0;top:0;width:220px;height:700px;background:#0a1928">
+    <div id="viewport-1-a-sidebar-nav" style="position:absolute;left:20px;top:80px;width:180px;height:220px">
+      <p id="viewport-1-a-sidebar-nav-text" class="text" style="position:absolute;left:0;top:0;width:120px;height:16px;font-size:13px;line-height:16px;color:#cdd8e4">Overview</p>
+    </div>
+    <footer id="viewport-1-a-sidebar-footer" style="position:absolute;left:20px;top:740px;width:150px;height:16px">
+      <p id="viewport-1-a-sidebar-footer-text" class="text" style="position:absolute;left:0;top:0;width:150px;height:16px;font-size:12px;line-height:16px;color:#7f93a8">Kestrel v2.14.0</p>
+    </footer>
+  </aside>
+  <div id="viewport-1-a-body" style="position:absolute;left:260px;top:60px;width:1200px;height:400px">
+    <h2 id="viewport-1-a-body-heading" style="width:600px;height:40px;font-size:32px;line-height:40px">Incident overview</h2>
+  </div>
+</section>
+<!-- 2. an in-flow stacked page: the last row of the section falls off the canvas → grow the canvas -->
+<section id="viewport-1-b" style="height:500px;background:#f7f8fa">
+  <div id="viewport-1-b-copy" style="position:absolute;left:80px;top:80px;width:900px;height:300px">
+    <h2 id="viewport-1-b-copy-heading" style="width:600px;height:40px;font-size:30px;line-height:40px">Everything in one place</h2>
+  </div>
+  <div id="viewport-1-b-legal" style="position:absolute;left:80px;top:492px;width:900px;height:16px">
+    <p id="viewport-1-b-legal-text" class="text" style="position:absolute;left:0;top:0;width:420px;height:16px;font-size:12px;line-height:16px;color:#5b6672">© 2024 Kestrel Systems. All rights reserved.</p>
+  </div>
+</section>

package/prototype-kit/polish/tests/fixtures/page-cut/silent.html ADDED Viewed

@@ -0,0 +1,22 @@
+<!doctype html><meta charset="utf-8"><style>
+*{margin:0;padding:0;box-sizing:border-box} body{font-family:Arial,Helvetica,sans-serif}
+section{position:relative;width:1536px;background:#fff}
+.text,h1,h2,h3{position:relative;display:block;white-space:pre;margin:0}
+.image{position:absolute;background:#7a8ba0;border-radius:8px}
+</style>
+<section id="viewport-1-a" style="height:400px">
+  <!-- a hero band that runs exactly to the canvas edge: nothing is cut -->
+  <div id="viewport-1-a-hero" class="image" style="left:260px;top:0;width:1276px;height:400px"></div>
+  <h1 id="viewport-1-a-hero-heading" style="position:absolute;left:300px;top:60px;width:600px;height:56px;font-size:44px;line-height:56px;color:#fff">Berth timeline</h1>
+  <!-- line-box overshoot of ~2px past the canvas: ascender space, no ink outside -->
+  <p id="viewport-1-a-tick-text" class="text" style="position:absolute;left:300px;top:390px;width:200px;height:12px;font-size:12px;line-height:12px;color:#fff">Updated 4 minutes ago</p>
+  <!-- a stranded shell block with NO room above it: lifting it would land on the panel → leave it alone -->
+  <aside id="viewport-1-a-sidebar" data-proto-shell style="position:absolute;left:0;top:0;width:220px;height:400px;background:#0a1928">
+    <div id="viewport-1-a-sidebar-panel" class="image" style="left:20px;top:300px;width:180px;height:125px"></div>
+    <footer id="viewport-1-a-sidebar-footer" style="position:absolute;left:20px;top:430px;width:150px;height:16px">
+      <p id="viewport-1-a-sidebar-footer-text" class="text" style="position:absolute;left:0;top:0;width:150px;height:16px;font-size:12px;line-height:16px;color:#7f93a8">Kestrel v2.14.0</p>
+    </footer>
+  </aside>
+</section>

package/prototype-kit/polish/tests/fixtures/photo-corners/expect.json ADDED Viewed

	@@ -0,0 +1 @@
1	+ [{"id":"viewport-1-a-card-1-photo","css":{"border-radius":"14px 14px 0px 0px"}}]

package/prototype-kit/polish/tests/fixtures/photo-corners/fire.html ADDED Viewed

@@ -0,0 +1,5 @@
+<!doctype html><meta charset="utf-8"><style>*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui}section{position:relative;width:1536px;height:1024px;background:#f6f4f0}.card{position:absolute;top:100px;width:180px;height:420px;background:#fff;border:1px solid #ddd;border-radius:14px}.photo{position:absolute;left:0;top:0;width:100%;height:224px;background:#8a9;display:block}.text{position:absolute;left:16px;top:250px}</style>
+<section id="viewport-1-a">
+  <!-- photo flush in the card's top corners, square → must take the card's top radii -->
+  <div id="viewport-1-a-card-1" class="card" style="left:300px"><div id="viewport-1-a-card-1-photo" class="image photo"></div><p id="viewport-1-a-card-1-text" class="text">Cast Iron Plant</p></div>
+</section>

package/prototype-kit/polish/tests/fixtures/photo-corners/silent.html ADDED Viewed

@@ -0,0 +1,9 @@
+<!doctype html><meta charset="utf-8"><style>*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui}section{position:relative;width:1536px;height:1024px;background:#f6f4f0}.card{position:absolute;top:100px;width:180px;height:420px;background:#fff;border:1px solid #ddd;border-radius:14px}.photo{position:absolute;display:block;background:#8a9}.text{position:absolute;left:16px;top:250px}</style>
+<section id="viewport-1-a">
+  <!-- a framed photo inset 12 px from the card edges: design, not a corner collision -->
+  <div id="viewport-1-a-card-1" class="card" style="left:300px"><div id="viewport-1-a-card-1-photo" class="image photo" style="left:12px;top:12px;width:154px;height:200px"></div><p id="viewport-1-a-card-1-text" class="text">Parlor Palm</p></div>
+  <!-- a flush photo whose card already clips -->
+  <div id="viewport-1-a-card-2" class="card" style="left:520px;overflow:hidden"><div id="viewport-1-a-card-2-photo" class="image photo" style="left:0;top:0;width:100%;height:224px"></div><p id="viewport-1-a-card-2-text" class="text">Snake Plant</p></div>
+  <!-- a flush photo that is already rounded -->
+  <div id="viewport-1-a-card-3" class="card" style="left:740px"><div id="viewport-1-a-card-3-photo" class="image photo" style="left:0;top:0;width:100%;height:224px;border-radius:14px 14px 0 0"></div><p id="viewport-1-a-card-3-text" class="text">ZZ Plant</p></div>
+</section>

package/prototype-kit/polish/tests/fixtures/rhythm/expect.json ADDED Viewed

@@ -0,0 +1,6 @@
+[
+ { "id": "viewport-1-a-nav-row-3", "dy": -4 },
+ { "id": "viewport-1-a-nav-row-4", "dy": -4 },
+ { "id": "viewport-1-a-cards-card-1", "h": 103 },
+ { "id": "viewport-1-a-cards-card-2", "h": 103 }
+]

package/prototype-kit/polish/tests/fixtures/rhythm/fire.html ADDED Viewed

@@ -0,0 +1,22 @@
+<!doctype html><meta charset="utf-8"><title>rhythm/fire</title><style>
+*{margin:0;padding:0;box-sizing:border-box} body{font-family:Helvetica,Arial,sans-serif}
+section{position:relative;width:1000px;height:800px;background:#fff}
+.panel{position:absolute;background:#fff;border:1px solid #e6e6e6}
+.row{position:absolute;background:#f4f4f4;border-radius:8px}
+.card{position:absolute;background:#fafafa;border:1px solid #e6e6e6;border-radius:10px}
+</style>
+<section id="viewport-1-a">
+  <!-- a nav column whose middle gap is 16 px where the rest are 12 px: the sidebar-nav mechanism -->
+  <div id="viewport-1-a-nav" class="panel" style="left:40px;top:40px;width:240px;height:400px">
+    <div id="viewport-1-a-nav-row-1" class="row" style="left:20px;top:20px;width:180px;height:40px"></div>
+    <div id="viewport-1-a-nav-row-2" class="row" style="left:20px;top:72px;width:180px;height:40px"></div>
+    <div id="viewport-1-a-nav-row-3" class="row" style="left:20px;top:128px;width:180px;height:40px"></div>
+    <div id="viewport-1-a-nav-row-4" class="row" style="left:20px;top:180px;width:180px;height:40px"></div>
+  </div>
+  <!-- three cards in a row, evenly spaced, whose heights are 3 px apart -->
+  <div id="viewport-1-a-cards" class="panel" style="left:340px;top:40px;width:600px;height:160px">
+    <div id="viewport-1-a-cards-card-1" class="card" style="left:20px;top:10px;width:170px;height:100px"></div>
+    <div id="viewport-1-a-cards-card-2" class="card" style="left:210px;top:10px;width:170px;height:102px"></div>
+    <div id="viewport-1-a-cards-card-3" class="card" style="left:400px;top:10px;width:170px;height:103px"></div>
+  </div>
+</section>

package/prototype-kit/polish/tests/fixtures/rhythm/silent.html ADDED Viewed

@@ -0,0 +1,27 @@
+<!doctype html><meta charset="utf-8"><title>rhythm/silent</title><style>
+*{margin:0;padding:0;box-sizing:border-box} body{font-family:Helvetica,Arial,sans-serif}
+section{position:relative;width:1000px;height:800px;background:#fff}
+.panel{position:absolute;left:40px;width:600px;background:#fff;border:1px solid #e6e6e6}
+.row{position:absolute;left:20px;width:500px;height:40px;background:#f4f4f4;border-radius:8px}
+</style>
+<section id="viewport-1-a">
+  <!-- deliberate step: gaps 20 / 20 / 44. The 24 px step is design (a group break) → the whole parent is off limits -->
+  <div id="viewport-1-a-steps" class="panel" style="top:20px;height:300px">
+    <div id="viewport-1-a-steps-row-1" class="row" style="top:20px"></div>
+    <div id="viewport-1-a-steps-row-2" class="row" style="top:80px"></div>
+    <div id="viewport-1-a-steps-row-3" class="row" style="top:140px"></div>
+    <div id="viewport-1-a-steps-row-4" class="row" style="top:224px"></div>
+  </div>
+  <!-- near threshold: gaps 20 / 26.5 — 6.5 px from the median, just outside the ±6 px snap band -->
+  <div id="viewport-1-a-near" class="panel" style="top:350px;height:200px">
+    <div id="viewport-1-a-near-row-1" class="row" style="top:20px"></div>
+    <div id="viewport-1-a-near-row-2" class="row" style="top:80px"></div>
+    <div id="viewport-1-a-near-row-3" class="row" style="top:146.5px"></div>
+  </div>
+  <!-- already regular: gaps 16 / 16, widths identical → nothing to snap and nothing to equalise -->
+  <div id="viewport-1-a-even" class="panel" style="top:580px;height:180px">
+    <div id="viewport-1-a-even-row-1" class="row" style="top:20px"></div>
+    <div id="viewport-1-a-even-row-2" class="row" style="top:76px"></div>
+    <div id="viewport-1-a-even-row-3" class="row" style="top:132px"></div>
+  </div>
+</section>

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

@@ -0,0 +1,5 @@
+<!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;overflow:visible}.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">
+  <section id="viewport-1-a" style="top:0;height:700px;background:#fbf6ee"><p id="viewport-1-a-text" class="text" style="left:300px;top:660px;font-size:16px">The market ends here.</p><div id="viewport-1-a-fruit" class="decoration" style="position:absolute;left:0;bottom:0;width:180px;height:150px;background:#df8b22;border-radius:100% 100% 0 0"></div></section>
+  <section id="viewport-2-a" style="top:700px;height:700px;background:#fbf6ee"><p id="viewport-2-a-text" class="text" style="left:300px;top:20px;font-size:16px">The next section starts here.</p></section>
+</div></div></div>

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

@@ -0,0 +1,5 @@
+<!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;overflow:visible}.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">
+  <section id="viewport-1-a" style="top:0;height:700px;background:#fbf6ee"><p id="viewport-1-a-text" class="text" style="left:300px;top:620px;font-size:16px">The market ends here.</p><div id="viewport-1-a-product-image" class="image" style="position:absolute;left:0;bottom:0;width:180px;height:40px;background:#925b24"></div></section>
+  <section id="viewport-2-a" style="top:700px;height:700px;background:#fbf6ee"><p id="viewport-2-a-text" class="text" style="left:300px;top:20px;font-size:16px">The next section starts here.</p></section>
+</div></div></div>

package/prototype-kit/polish/tests/fixtures/section-breathing/expect.json ADDED Viewed

	@@ -0,0 +1 @@
1	+ [{"id":"viewport-1-a","css":{"box-shadow":"0 32px 0 0 rgb(251, 246, 238)"}},{"id":"viewport-2-a","dy":32}]

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

@@ -0,0 +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">
+  <!-- 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>
+</div></div></div>

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

@@ -0,0 +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">
+  <!-- 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>
+</div></div></div>

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

@@ -0,0 +1,11 @@
+<!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-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>
+  </section>
+</div></div></div>

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

@@ -0,0 +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-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>
+  </section>
+</div></div></div>

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

@@ -0,0 +1,5 @@
+<!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;overflow:visible}.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">
+  <section id="viewport-1-a" style="top:0;height:700px;background:#fefefe"><div id="viewport-1-a-card" style="position:absolute;left:500px;top:500px;width:536px;height:200px;background:#fff;box-shadow:0 0 16px rgba(0,0,0,.05)"><p id="viewport-1-a-text" class="text" style="left:40px;top:80px">A card casts a soft shadow.</p></div></section>
+  <section id="viewport-2-a" style="top:700px;height:700px;background:#fefefe"><p id="viewport-2-a-text" class="text" style="left:80px;top:20px">The next section.</p></section>
+</div></div></div>

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

@@ -0,0 +1,5 @@
+<!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;overflow:visible}.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">
+  <section id="viewport-1-a" style="top:0;height:700px;background:#fefefe"><div id="viewport-1-a-card" style="position:absolute;left:500px;top:500px;width:536px;height:200px;background:#fff;box-shadow:0 8px 0 #c83b3b"><p id="viewport-1-a-text" class="text" style="left:40px;top:80px">A hard coloured band is not a shadow gradient.</p></div></section>
+  <section id="viewport-2-a" style="top:700px;height:700px;background:#fefefe"><p id="viewport-2-a-text" class="text" style="left:80px;top:20px">The next section.</p></section>
+</div></div></div>

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

@@ -0,0 +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">
+  <!-- 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>
+</div></div></div>

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

@@ -0,0 +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">
+  <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>
+</div></div></div>

package/prototype-kit/polish/tests/fixtures/shell-seam/expect.json ADDED Viewed

	@@ -0,0 +1 @@
1	+ [{"id":"viewport-1-c-nav-new-study","w":204},{"id":"viewport-1-c-nav-footer","dy":-38}]

package/prototype-kit/polish/tests/fixtures/shell-seam/fire.html ADDED Viewed

@@ -0,0 +1,20 @@
+<!doctype html><meta charset="utf-8"><style>
+*{margin:0;padding:0;box-sizing:border-box} body{font-family:system-ui}
+section{position:relative;width:1536px;height:1024px;background:#fff}
+.rail{position:absolute;left:0;top:0;width:220px;height:1024px;background:#f6f4f0;padding:24px 0 0 16px}
+.btn{position:relative;width:214px;height:43px;background:#245;border-radius:8px;margin-top:40px}
+.btn .text{position:absolute;left:0;top:12px;width:214px;text-align:center;color:#fff;font-size:15px}
+.nav{position:relative;margin-top:24px;font-size:15px;width:99px;height:18px}
+.foot{position:absolute;left:16px;top:1040px;width:120px;height:14px;font-size:11px;color:#666}
+.content{position:absolute;left:270px;top:40px;width:1200px;height:900px;background:#fff;border:1px solid #ddd}
+</style>
+<section id="viewport-1-a">
+  <!-- a 220 px host carrying canonical (258 px) children: the button spills 10 px past the rail, the footer 30 px below -->
+  <div id="viewport-1-a-rail" class="rail" data-proto-shell="viewport-1-c-nav">
+    <div id="viewport-1-c-nav-new-study" class="btn"><span id="viewport-1-c-nav-new-study-text" class="text">+ New study</span></div>
+    <div id="viewport-1-c-nav-item-overview" class="nav text">Overview</div>
+    <div id="viewport-1-c-nav-item-proposals" class="nav text">Proposals</div>
+    <div id="viewport-1-c-nav-footer" class="foot text">v2.14.0</div>
+  </div>
+  <div id="viewport-1-a-content" class="content"><span id="viewport-1-a-content-title" class="text" style="position:absolute;left:24px;top:24px;font-size:22px">Review</span></div>
+</section>

package/prototype-kit/polish/tests/fixtures/shell-seam/silent.html ADDED Viewed

@@ -0,0 +1,21 @@
+<!doctype html><meta charset="utf-8"><style>
+*{margin:0;padding:0;box-sizing:border-box} body{font-family:system-ui}
+section{position:relative;width:1536px;height:1024px;background:#fff}
+.rail{position:absolute;left:0;top:0;width:220px;height:1024px;background:#f6f4f0;padding:24px 0 0 16px}
+.btn{position:relative;width:180px;height:43px;background:#245;border-radius:8px;margin-top:40px}
+.btn .text{position:absolute;left:0;top:12px;width:180px;text-align:center;color:#fff;font-size:15px}
+.nav{position:relative;margin-top:24px;font-size:15px;width:99px;height:18px}
+.foot{position:absolute;left:16px;top:990px;width:120px;height:14px;font-size:11px;color:#666}
+.content{position:absolute;left:270px;top:40px;width:1200px;height:900px;background:#fff;border:1px solid #ddd}
+</style>
+<section id="viewport-1-a">
+  <!-- the upstream fit already happened: a 220 px host (canonical was 258) whose children all fit → nothing to do;
+       the rail must NOT be widened and the content gutter must NOT change -->
+  <div id="viewport-1-a-rail" class="rail" data-proto-shell="viewport-1-c-nav">
+    <div id="viewport-1-c-nav-new-study" class="btn"><span id="viewport-1-c-nav-new-study-text" class="text">+ New study</span></div>
+    <div id="viewport-1-c-nav-item-overview" class="nav text">Overview</div>
+    <div id="viewport-1-c-nav-item-proposals" class="nav text">Proposals</div>
+    <div id="viewport-1-c-nav-footer" class="foot text">v2.14.0</div>
+  </div>
+  <div id="viewport-1-a-content" class="content"><span id="viewport-1-a-content-title" class="text" style="position:absolute;left:24px;top:24px;font-size:22px">Review</span></div>
+</section>

package/prototype-kit/polish/tests/harm-check.mjs ADDED Viewed

@@ -0,0 +1,71 @@
+#!/usr/bin/env node
+// Paired cases for the structure harm guard (harm.mjs): a synthetic override that breaks an icon column or collapses
+// the rail/content gutter MUST be flagged; a rhythm-sized nudge (≤ 6 px) on a gap MUST NOT.
+import path from 'node:path';
+import { chromium } from '@playwright/test';
+import { measurePage } from '../measure.mjs';
+import { applyOverridesScript } from '../overrides.mjs';
+import { structureHarm } from '../harm.mjs';
+const here = path.dirname(new URL(import.meta.url).pathname);
+const browser = await chromium.launch();
+const page = await browser.newPage({ viewport: { width: 1536, height: 1024 } });
+await page.goto('file://' + path.join(here, 'fixtures/harm/page.html'), { waitUntil: 'load' });
+const before = await measurePage(page, {});
+let failures = 0;
+const check = async (name, css, expectMis, expectSp) => {
+  await page.evaluate(applyOverridesScript(), css);
+  const after = await measurePage(page, {});
+  const h = structureHarm(before, after);
+  const ok = (h.misaligned.length > 0) === expectMis && (h.spacing.length > 0) === expectSp;
+  if (!ok) failures++;
+  console.log(`${ok ? 'ok  ' : 'FAIL'} harm/${name}: misaligned=${h.misaligned.length} spacing=${h.spacing.length}`);
+};
+await check('fire-column (icon nudged 5px out of its column)', '#viewport-1-a-nav-item-2-icon{transform:translate(-5px,0)!important}', true, false);
+await check('fire-spacing (rail grown 37px into the gutter)', '#viewport-1-a-rail{width:257px!important}', false, true);
+await check('silent (rhythm-sized 3px nudge, column intact)', '#viewport-1-a-nav-item-3{transform:translate(0,-3px)!important}', false, false);
+// A large vertical gap change still fires unless the spacing rule declares that exact before->after seam.
+await page.goto('file://' + path.join(here, 'fixtures/harm/declared-gap.html'), { waitUntil: 'load' });
+const gapBefore = await measurePage(page, {});
+await page.evaluate(applyOverridesScript(), '#viewport-1-a-footer{transform:translate(0,32px)!important}');
+const gapAfter = await measurePage(page, {});
+const undeclaredGap = structureHarm(gapBefore, gapAfter);
+const declaredGap = structureHarm(gapBefore, gapAfter, new Set(), new Set(['viewport-1-a-content|viewport-1-a-footer']));
+const okDeclaredGap = undeclaredGap.spacing.length > 0 && declaredGap.spacing.length === 0;
+if (!okDeclaredGap) failures++;
+console.log(`${okDeclaredGap ? 'ok  ' : 'FAIL'} harm/declared-gap: undeclared=${undeclaredGap.spacing.length} declared=${declaredGap.spacing.length}`);
+// offcenter metric: fires on ink left at its donor offset inside a fitted box, silent on re-centred / still-anchored ink
+await page.goto('file://' + path.join(here, 'fixtures/harm/offcenter.html'), { waitUntil: 'load' });
+const m = await measurePage(page, {});
+const ids = m.offcenter.map((o) => o.id).sort();
+const okOff = ids.length === 2 && ids.includes('viewport-1-a-btn-off') && ids.includes('viewport-1-a-row-off');
+if (!okOff) failures++;
+console.log(`${okOff ? 'ok  ' : 'FAIL'} harm/offcenter: fires on ${ids.join(', ')} (expected btn-off, row-off only)`);
+// overlap instrument: a control (button) landing on text from another parent must count; a button beside text must not
+await page.goto('file://' + path.join(here, 'fixtures/harm/button-overlap.html'), { waitUntil: 'load' });
+const mo = await measurePage(page, {});
+const pairs = mo.overlap.map((o) => [o.a, o.b].sort().join('|'));
+const okBtn = pairs.length === 1 && pairs[0] === 'viewport-1-a-hero-eyebrow|viewport-1-a-hero-stray';
+if (!okBtn) failures++;
+console.log(`${okBtn ? 'ok  ' : 'FAIL'} overlap/button-over-text: ${JSON.stringify(pairs)} (expected eyebrow|stray only)`);
+// contrast refinement: declared brand colour keeps its hue (orange → readable orange, not black); readable declared
+// colour untouched; a hue that cannot reach the threshold falls back and records the fact
+{
+  const rule = await import('../rules/contrast.mjs');
+  const hue = (rgb) => { const m = rgb.match(/\d+/g).map(Number); const [r, g, b] = m.map((v) => v / 255); const mx = Math.max(r, g, b), mn = Math.min(r, g, b); const d = mx - mn; if (!d) return null; let h = mx === r ? ((g - b) / d + (g < b ? 6 : 0)) : mx === g ? ((b - r) / d + 2) : ((r - g) / d + 4); return Math.round(h * 60); };
+  await page.goto('file://' + path.join(here, 'fixtures/contrast/fire.html'), { waitUntil: 'load' });
+  const fire = await page.evaluate(rule.browserFn(), { metrics: {}, params: rule.params });
+  const o = fire.find((x) => x.id === 'viewport-1-a-orange');
+  const okFire = o && Math.abs(hue(o.css.color) - 33) <= 6 && /4\.[5-9]|[5-9]\./.test(o.reason) && !/fallback/.test(o.reason);
+  if (!okFire) failures++; console.log(`${okFire ? 'ok  ' : 'FAIL'} contrast/fire: orange keeps hue → ${o?.css.color} (${o?.reason})`);
+  await page.goto('file://' + path.join(here, 'fixtures/contrast/silent.html'), { waitUntil: 'load' });
+  const silent = await page.evaluate(rule.browserFn(), { metrics: {}, params: rule.params });
+  const okSilent = silent.length === 0;
+  if (!okSilent) failures++; console.log(`${okSilent ? 'ok  ' : 'FAIL'} contrast/silent: readable declared orange untouched (${silent.length} overrides)`);
+  await page.goto('file://' + path.join(here, 'fixtures/contrast/fallback.html'), { waitUntil: 'load' });
+  const fb = await page.evaluate(rule.browserFn(), { metrics: {}, params: rule.params });
+  const okFb = fb.length === 1 && /hue unreachable/.test(fb[0].reason);
+  if (!okFb) failures++; console.log(`${okFb ? 'ok  ' : 'FAIL'} contrast/fallback: yellow on mid grey → ${fb[0]?.css.color} (${fb[0]?.reason?.slice(0, 60)}…)`);
+}
+await browser.close();
+if (failures) { console.log(`${failures} failure(s)`); process.exit(1); }
+console.log('harm guard pairs green');