editor-shell 0.21.0 → 0.22.0

package/dist/panel/panel.css

@@ -7,11 +7,13 @@
  * dark mode.
  *
  * Two details are deliberate and were decided by measurement, not taste:
- *   · rows sit 28px apart while a label sits 7px from its own control, so a
- *     setting reads as ONE thing with air around it. The 7px is the ONLY thing
- *     saying which label owns which control — widening the rows widened the
- *     air BETWEEN settings and left that gap exactly where it was (card
- *     8802.d, approved from mockups/8802e-settings-spacing-mockup.html);
+ *   · rows sit 38px apart while a label sits 11px from its own control, so a
+ *     setting reads as ONE thing with air around it. That inside gap is the
+ *     ONLY thing saying which label owns which control, and the two are a
+ *     RATIO rather than a pair of numbers: measured at 28 and 7 (card 8802.d,
+ *     approved from mockups/8802e-settings-spacing-mockup.html) and re-scaled
+ *     together to 38 and 11 (card 66301), which keeps the gap between settings
+ *     3.5x the gap inside one;
  *   · the label is small and grey, the value is larger and dark. Before that
  *     contrast existed, a merchant could not tell a name from a number.
  */
@@ -63,23 +65,38 @@
      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. */
+   is the floor doing exactly what it was built to do.
+
+   NOW 20, AND THE RHYTHMS MOVED WITH IT (card 66301). Lewis, 2026-08-31: the
+   vertical spacing is too tight, open it up, roughly 10px more. Asked whether
+   the tightest gap should take the full 10 as well he handed the numbers over —
+   "you decide, whatever feels comfortable" — so the six values below are this
+   desk's, made under that.
+
+   NOT A FLAT +10 ON EVERY TOKEN, which is what was first asked for. A flat rise
+   takes the widest gap against the tightest from 36:7 to 46:17 — 5.1x down to
+   2.7x — so it opens the panel and FLATTENS it at the same time, and "these
+   belong together" stops reading differently from "these are separate". The six
+   values keep it at 4.4x while every seam still grows visibly. */
 /* ── 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
+   whole problem. `--es-row-gap` answers 20 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
+   is the RHYTHM — 38 between two settings against 11 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.
+   THE VALUES DID NOT CHANGE WHEN THEY WERE NAMED. Every one was the number
+   that was there before, moved and named; (g) asserted each still resolved to
+   what it resolved to, and (a) still read the scale off the sheet. Card 66301
+   is the first card to turn them, and it turned all six at once — which is what
+   naming them was for.
 
    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
+   38 was measured and then re-scaled (cards 8802.d, 66301), it is not "20 plus
+   18" and never was "16 plus 12". `calc()` off the floor
    would claim a relationship nobody decided; a name states the value and the
    job it does.
 
@@ -87,28 +104,29 @@
    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. */
+   which label owns which control. Card 66301 re-scaled all six and is the proof
+   the pair travels: 28:7 became 38:11, both up, the ratio held. A tree at 38px 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 {
   /* THE FLOOR (card 66206) — no row-to-row gap on this panel resolves below it. */
-  --es-row-gap: 16px;
+  --es-row-gap: 20px;
 
   /* 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;
+  --es-rhythm-group: 48px;
   /* between a group heading and the first setting under it — closer, because
      that setting belongs to that heading */
-  --es-rhythm-group-first: 14px;
+  --es-rhythm-group-first: 24px;
   /* BETWEEN two settings */
-  --es-rhythm-between: 28px;
+  --es-rhythm-between: 38px;
   /* between two one-line rows, which are one line tall and need less air */
-  --es-rhythm-between-tight: 16px;
+  --es-rhythm-between-tight: 26px;
   /* WITHIN one setting: its label to its own control */
-  --es-rhythm-within: 7px;
+  --es-rhythm-within: 11px;
 
   /* ── THE CHIP'S OWN METRICS (card 66248) ───────────────────────────────────
 
@@ -551,7 +569,7 @@
   border-radius: var(--es-row-radius);
   padding: 8px 11px;
   /* 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
+     them (38px), 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), var(--es-rhythm-group)) 0 0;
 }
@@ -595,21 +613,31 @@ button.es-group-head:hover { background: var(--es-chip-bg); }
    overriding the attribute's own display:none. */
 .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. */
+   each other — it belongs to that head, and 38px would cut it loose.
+
+   AND IT IS LIVE FOR THE FIRST TIME (card 66301). It declared 14 against a 16px
+   floor, so it has never once been 14 on screen — the floor answered every
+   time, and card 66206 measured that very move (14 → 16) and wrote it down as
+   the floor working, which it was. At 24 over a 20px floor the declared number
+   is finally the visible one, so this seam grows 16 → 24 rather than the 14 →
+   24 the file appears to say. `tests/panel-layout.test.ts` (h) is what turns a
+   floored rhythm into a failure instead of a footnote. */
 .es-group-body > .es-field:first-child { margin-top: max(var(--es-row-gap), var(--es-rhythm-group-first)); }
 
 /* ── one setting ───────────────────────────────────────────────────────────── */
 
-/* 28 IS KEPT, AND IT IS NOT A THIRD OPINION ABOUT THE FLOOR. A setting is TWO
-   lines — a label row and its control — held together by the 7px between them,
-   and that 7px is the only thing saying which label owns which control. The gap
-   between settings has to be plainly larger than the gap inside one or the
-   panel stops being a list of settings and becomes a list of loose parts. It
-   was measured at 28 and approved from mockups (card 8802.d); 20 was tried and
-   was too tight.
-
-   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. */
+/* 38 IS NOT A THIRD OPINION ABOUT THE FLOOR. A setting is TWO lines — a label
+   row and its control — held together by the 11px between them, and that 11px
+   is the only thing saying which label owns which control. The gap between
+   settings has to be plainly larger than the gap inside one or the panel stops
+   being a list of settings and becomes a list of loose parts. The pair was
+   measured at 28 and 7 and approved from mockups (card 8802.d) — 20 was tried
+   there and was too tight — and re-scaled together to 38 and 11 (card 66301),
+   which is the same rule with more air, not a new one.
+
+   Floored, not replaced, and not `calc()`: 38 was measured and then re-scaled,
+   it is not "20 plus 18", so arithmetic off the token would claim a
+   relationship nobody decided. */
 .es-field { margin-top: max(var(--es-row-gap), var(--es-rhythm-between)); }
 
 .es-field-head {
@@ -677,8 +705,13 @@ button.es-group-head:hover { background: var(--es-chip-bg); }
    control row, the label line's 7px bottom margin would be a gap to nothing.
 
    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). */
+   two-line setting does — 26, not 38 — and it is floored on the token for the
+   same reason everything else here is (card 66203).
+
+   IT TIED WITH THE FLOOR UNTIL NOW (card 66301). At 16 against a 16px floor
+   nothing was wrong on screen, but the sheet could not tell you which of the
+   two numbers you were reading, and moving either one alone would have moved
+   nothing. 26 over 20 puts it plainly on its own number. */
 .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; }
 
@@ -780,11 +813,25 @@ 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`):
-     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).
+
+       token  above the rule  below it  word to word  recorded by
+         10px      11.40px     12.00px     23.40px      card 66203
+         16px      17.40px     18.00px     35.40px      card 66206
+         16px      17.39px     17.00px     34.39px      card 66301
+         20px      21.39px     21.00px     42.39px      card 66301
+
+     TWO ROWS FOR 16px, AND THEY DISAGREE BY A PIXEL. 66301's pair was taken in
+     one run of Chromium 124 (zenika/alpine-chrome) so its two rows compare; the
+     earlier rows are left as the cards recorded them rather than overwritten,
+     because the difference is the engine and the font it had, not this sheet.
+     Read a row against another row from the same card, never across cards.
+
+     THIS SEAM MOVES AT TWICE THE TOKEN'S RATE, and it is the only one that
+     does: both rows spend the gap, so +4 on the dial buys +8 of air. Under the
+     floor alone it was also the ONLY place raising the token moved a measured
+     distance rather than a declared one — every other seam was held by a bigger
+     rhythm — which is why it is the row Lewis was looking at when he asked for
+     card 66206. Card 66301 moves the rhythms too, so it is no longer alone.
 
      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.21.0",
+  "version": "0.22.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",