editor-shell 0.18.0 → 0.19.0

package/dist/panel/panel.css

@@ -64,8 +64,51 @@
 
    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 {
+  /* 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 ────────────────────────────────────── */
@@ -338,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 {
@@ -381,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 ───────────────────────────────────────────────────────────── */
 
@@ -395,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;
 }
 
@@ -461,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 ─────────────────────────── */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "editor-shell",
-  "version": "0.18.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",