editor-shell 0.17.0 → 0.19.0

package/dist/panel/panel.css

@@ -43,9 +43,72 @@
    `calc()` off it, which would claim an arithmetic relationship that does not
    exist: 28 was measured, it is not "10 plus 18". The max() is what makes this a
    FLOOR rather than a default — raise the token past a rhythm and that row rises
-   with it instead of quietly staying tighter than everything around it. */
+   with it instead of quietly staying tighter than everything around it.
+
+   NOW 16, AND 10 WAS WORTH NOTHING ON SCREEN (card 66206). 66203 shipped the
+   token at 10 and Lewis could see no change at all, which is not a bug in it —
+   it is what a floor of 10 was always going to do here. Four of the six gaps
+   (36, 28, 16, 14) were already above it, and of the two that were not, one is
+   the dead `.es-group + .es-group` rule below. So 10 could only ever reach the
+   drill list, and there it landed on the number that list already had.
+
+   16 is Lewis's own, picked on 2026-08-28 once that was shown to him, and it is
+   the first value that moves anything a merchant looks at. MEASURED in Chromium
+   against these stylesheets (`tests/fixtures/panel-row-spacing.html`):
+
+     one drill row to the next, word to word    23.40px → 35.40px
+     a group head to its first setting          14px    → 16px
+     one setting to the next                    28px      unchanged
+     a one-line boolean row                     16px      unchanged
+     a heading, after the row above it          36px      unchanged
+
+   The three measured rhythms do not move because 16 is still under them, which
+   is the floor doing exactly what it was built to do. */
+/* ── the rhythms: the numbers under the floor, given names (card 66228) ────── */
+
+/* THE FLOOR ABOVE IS NOT THE RHYTHM, and handing a consumer the floor was the
+   whole problem. `--es-row-gap` answers 16 for all five gaps below alike; what
+   the storefront's Layers tree needs in order to "follow the shell's spacing"
+   is the RHYTHM — 28 between two settings against 7 inside one. Under the floor
+   those were bare literals, so the only way to follow them was to COPY them
+   into `efficient-shop/components/storefront-editor.css`: a second source of
+   truth for numbers this sheet was already the source of.
+
+   THE VALUES DID NOT CHANGE. Every one is the number that was there before,
+   moved and named; `tests/panel-layout.test.ts` (g) asserts each still resolves
+   to what it resolved to, and (a) still reads the scale off the sheet.
+
+   NAMES, NOT ARITHMETIC, for the reason this sheet already gives one rule down:
+   28 was measured (card 8802.d), it is not "16 plus 12". `calc()` off the floor
+   would claim a relationship nobody decided; a name states the value and the
+   job it does.
+
+   WHAT A CONSUMER IS ACTUALLY BUYING is the pair at the end. `--es-rhythm-between`
+   and `--es-rhythm-within` are the two halves of the one rule that has to
+   survive being re-scaled: the gap INSIDE a thing stays plainly smaller than
+   the gap BETWEEN things, because that inside gap is the ONLY thing saying
+   which label owns which control. A tree at 28px a row would scroll forever, so
+   a consumer is expected to scale these — and (g) is what stops the two from
+   drifting together while it does. */
 .es-editor {
-  --es-row-gap: 10px;
+  /* THE FLOOR (card 66206) — no row-to-row gap on this panel resolves below it. */
+  --es-row-gap: 16px;
+
+  /* THE RHYTHMS. All five are declared in THIS rule and not a second
+     `.es-editor` block: the panel has ONE root, and a second block would put
+     half the panel's spacing somewhere a reader — and the spec, which reads the
+     root by selector — would not look. */
+  /* between one group heading and whatever is above it */
+  --es-rhythm-group: 36px;
+  /* between a group heading and the first setting under it — closer, because
+     that setting belongs to that heading */
+  --es-rhythm-group-first: 14px;
+  /* BETWEEN two settings */
+  --es-rhythm-between: 28px;
+  /* between two one-line rows, which are one line tall and need less air */
+  --es-rhythm-between-tight: 16px;
+  /* WITHIN one setting: its label to its own control */
+  --es-rhythm-within: 7px;
 }
 
 /* ── the tab strip: a segmented control ────────────────────────────────────── */
@@ -318,7 +381,7 @@
   /* A heading needs more air above it than the settings it heads have between
      them (28px), or it reads as one more row. Floored on `--es-row-gap` so it
      rises with the rest of the panel (card 66203). */
-  margin: max(var(--es-row-gap), 36px) 0 0;
+  margin: max(var(--es-row-gap), var(--es-rhythm-group)) 0 0;
 }
 
 button.es-group-head {
@@ -361,7 +424,7 @@ button.es-group-head:hover { background: var(--es-chip-bg); }
 .es-group-body[hidden] { display: none; }
 /* The first setting under a head sits CLOSER than the settings below it do to
    each other — it belongs to that head, and 28px would cut it loose. */
-.es-group-body > .es-field:first-child { margin-top: max(var(--es-row-gap), 14px); }
+.es-group-body > .es-field:first-child { margin-top: max(var(--es-row-gap), var(--es-rhythm-group-first)); }
 
 /* ── one setting ───────────────────────────────────────────────────────────── */
 
@@ -375,13 +438,16 @@ button.es-group-head:hover { background: var(--es-chip-bg); }
 
    Floored, not replaced, and not `calc()`: 28 was measured, it is not "10 plus
    18", so arithmetic off the token would claim a relationship nobody decided. */
-.es-field { margin-top: max(var(--es-row-gap), 28px); }
+.es-field { margin-top: max(var(--es-row-gap), var(--es-rhythm-between)); }
 
 .es-field-head {
   display: flex;
   align-items: center;
   gap: 8px;
-  margin-bottom: 7px;
+  /* THE ONE THAT SAYS WHICH LABEL OWNS WHICH CONTROL. Named so a consumer can
+     read it (card 66228) — it is half of the rule, and the half that is easiest
+     to lose when someone re-scales the other half. */
+  margin-bottom: var(--es-rhythm-within);
   min-height: 16px;
 }
 
@@ -441,7 +507,7 @@ button.es-group-head:hover { background: var(--es-chip-bg); }
    A one-line row is one line tall, so it needs less air above it than a
    two-line setting does — 16, not 28 — and it is floored on the token for the
    same reason everything else here is (card 66203). */
-.es-field.is-inline { margin-top: max(var(--es-row-gap), 16px); }
+.es-field.is-inline { margin-top: max(var(--es-row-gap), var(--es-rhythm-between-tight)); }
 .es-field.is-inline .es-field-head { margin-bottom: 0; }
 
 /* ── the switch: one yes-or-no shape, both editors ─────────────────────────── */
@@ -542,7 +608,11 @@ button.es-group-head:hover { background: var(--es-chip-bg); }
      hairline between them and adds no margin — so the air a merchant sees is
      each row's own vertical padding, on its own side of the line. MEASURED in
      Chromium against these stylesheets (`tests/fixtures/panel-row-spacing.html`):
-     11.40px above the rule, 12.00px below it, 23.40px between two rows' words.
+     17.40px above the rule, 18.00px below it, 35.40px between two rows' words.
+     At the 10px the token shipped with (card 66203) those were 11.40, 12.00 and
+     23.40 — this list is the ONLY place on the panel where raising the token to
+     16 moves a measured distance rather than a declared one, and it is the row
+     Lewis was looking at when he asked (card 66206).
 
      A MARGIN WOULD BE THE WRONG FIX. A border-top with space above it detaches
      from the row it belongs to and reads as a line floating in the panel rather

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "editor-shell",
-  "version": "0.17.0",
+  "version": "0.19.0",
   "description": "Shared editor-chrome primitives for the EFFICIENT editors: EditorRail (a Next-16-safe left icon-rail leaf), the shell token layer, and GoldTextInput — type in place and watch the markup formatting appear as you type.",
   "license": "MIT",
   "author": "Lewis Liu",