Adom UI Design System

@@ -1,6 +1,6 @@ {   "slug": "adom-ui-design",-  "version": "2.3.2",+  "version": "2.3.3",   "type": "skill",   "description": "The Adom UI Design System plus a bundle of focused UI skills (tooltips, floating-windows, toasts, responsive-ui, app-shell, ai-driven-apps, clickable-paths, dark-default, input-feedback, settings-layout). One install drops the whole set of skill files onto your container, plus shared icon assets (the settings cog) so every Adom app draws the same glyph.",   "dependencies": {},

@@ -314,7 +314,17 @@ genuinely need to react to it, and then branch on `source`. ### ⛔ THE PAGE GUTTER IS 16px A SIDE, AND IT IS PART OF THE CONTRACT  **Mount the panel in a container with exactly 16px of horizontal padding, and nothing else.**-The panel's border box must equal the pane width minus 32.++```+panel border-box  ==  document.documentElement.clientWidth - 32     (+/- 2)+```++**⛔ NEVER REASON FROM `innerWidth`, AND NEVER QUOTE AN ABSOLUTE TARGET.** On a scrolling+dashboard `innerWidth` includes the scrollbar and `clientWidth` does not. At John's pane those+are **744 and 734**, so the target there is **702, not 712**. I told three apps "712" by doing+the arithmetic against the wrong one; kicad read the implementation before acting and caught+it, and had it coded to my number it would have shipped a 10px miss and failed the very row it+was trying to pass. Compute from `clientWidth` at runtime, every time.  This is not cosmetic. Four conformant apps measured at the SAME 744px pane reported panel widths of **734, 735, 702 and 694**, because each page put a different amount of its own@@ -326,6 +336,22 @@ them were not, and the visible result is a fleet that still does not match. 702 is the other half of the warning: two pixels from flipping the other way on any change to its page chrome. +**And a full-bleed panel reads as "nearly right" when it is actually ungoverned.** pup's 735+looked like a 4px gutter against a 744 pane. It had **no gutter at all**: the panel was a+direct child of `body` with no padding, so it measured exactly `clientWidth`, and the whole+9px was the scrollbar. kicad's 734 was the same shape for a different reason: its+`main{padding:20px 16px 84px}` rule **did not exist**, having been collateral from an earlier+line-based CSS deletion, so the page had no horizontal padding anywhere. In both cases a+number a few pixels off the pane width was hiding a missing rule rather than a wrong one.++**THE GUTTER BELONGS TO EVERY REGION, NOT JUST THE PANEL.** kicad's missing rule was also+pushing its status pills and page content hard against the left edge, and pup's pill row lines+up with the new gutter by luck rather than by rule. If each app picks its own number for the+regions under the panel, the pills step in and out relative to the panel edge from app to app,+which is this same mismatch one region lower. Put the 16px on ONE container that holds the+mount point and everything below it, so they share an edge by construction rather than by two+values happening to match (project-manager's `#dash-top` is the pattern).+ So `selfCheck` now carries a **panel gutter** row, and it fails a panel that is correctly built inside a wrongly padded page. Negative-tested in both directions before shipping: 50px a side goes red, 0px a side goes red, 16px a side passes, and it returns to green when restored.