Adom UI Design System

@@ -421,6 +421,18 @@     var cols = cs.gridTemplateColumns.split(' ').filter(Boolean).length;     rows.push({ what: 'columns at this width', want: panel.getBoundingClientRect().width >= TWO_COL_MIN ? '2' : '1',                 got: String(cols), pass: true });+    /* THE GUTTER ROW. Four 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 padding+     * around the mount point. 694 is under the 700 threshold, so that app rendered ONE+     * column while the other three rendered TWO, at an identical pane width. The panel was+     * conformant in all four; the PAGE around it was not. The fleet gutter is 16px a side,+     * so the panel's border box is the pane minus 32. */+    var vw = document.documentElement.clientWidth;+    var want32 = vw - 32, gotW = Math.round(panel.getBoundingClientRect().width);+    var gutterOk = Math.abs(gotW - want32) <= 2;+    if (!gutterOk) ok = false;+    rows.push({ what: 'panel gutter', want: want32 + 'px wide (16px a side)',+                got: gotW + 'px (' + Math.round((vw - gotW) / 2) + 'px a side)', pass: gutterOk });     var fam = getComputedStyle(panel.querySelector('.anp-phrase span') || panel).fontFamily;     var famOk = /Satoshi/.test(fam);     if (!famOk) ok = false;@@ -428,6 +440,6 @@     return { ok: ok, rows: rows };   } -  root.AdomNewbiePanel = { mount: mount, toast: toast, selfCheck: selfCheck, version: '2.1.2',+  root.AdomNewbiePanel = { mount: mount, toast: toast, selfCheck: selfCheck, version: '2.3.0',                            TWO_COL_MIN: TWO_COL_MIN, PHRASE_BUDGET: PHRASE_BUDGET }; })(typeof window !== 'undefined' ? window : this);

@@ -1,6 +1,6 @@ {   "slug": "adom-ui-design",-  "version": "2.2.1",+  "version": "2.3.0",   "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": {},

@@ -288,6 +288,29 @@ driving the same state from two places, which is what `onToggle(open, source)` e visible. The simplest safe position, and kicad's: **do not pass `onToggle` at all** unless you 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.++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+padding around the mount point: 9px, 10px, 42px and 50px a side. **694 is below the 700+threshold, so that app rendered ONE column while the other three rendered TWO, at an identical+pane width.** Every one of them passed selfCheck. The panels were conformant; the pages around+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.++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.++If your page needs a wider margin for its own content, put it on the app body BELOW the panel,+not on the container the panel mounts in. The panel is the full-width band at the top; the+app's own gutter is the app's business.+ ### Prove it in one call  ```js