Adom UI Design System

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

@@ -73,9 +73,23 @@ instead of the boxes around them. - `display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start;` - A `1px` vertical hairline (`var(--line)`) between the columns, drawn as a   `border-left` on the right column, so the split reads without a heavy divider.-- Below **760px**: `grid-template-columns: 1fr`, demo button first, full width, hairline+- Below **620px**: `grid-template-columns: 1fr`, demo button first, full width, hairline   becomes a `border-top`. +  ⚠ **This number was 760px and it was WRONG.** Measured in John's real dock pane on+  2026-08-25: `innerWidth` is **744px**, so a 760px breakpoint meant the two-column layout+  NEVER RENDERED in the pane it was designed for. Every app would have shipped a stacked+  panel and looked compliant. Observed dock panes run roughly **744px to 853px**, so the+  breakpoint has to sit well below that band; 620px leaves room for a narrower pane while+  still collapsing on a phone.++  The lesson is bigger than the number: **a breakpoint written without measuring the real+  surface is a guess.** Before you pick one, measure `window.innerWidth` inside the ah+  webview your card actually opens.++- At the narrow end of the band the left column may shrink to **180px** rather than+  collapsing; the demo button still fits on one line at that width.+ **Left column: the demo button** - The panel's ONLY filled button: `background: var(--teal)`, `color: var(--on-accent)`,   `border-radius: 8px`, `padding: 10px 18px`, Familjen Grotesk 600 **14px**,@@ -211,8 +225,8 @@ panel must not shift anything except the panel's own footprint.  ## Ralph-test -At 1400px AND at 2500px: panel spans the FULL width with no dead band on either side, two-columns with the hairline between them, every+At 744px (a real dock pane), at 1400px AND at 2500px: panel spans the FULL width with no+dead band on either side, two columns with the hairline between them, every row exactly 40px, phrases truncating rather than wrapping, one filled button on the page. At 390px: one column, demo first, icons still in a 44px target. Hover both icons and read the tooltips; click each and watch for the toast. Press `✕`, confirm the panel is GONE with no stub and the app UI moves up, reload, confirm