efficient-easel 14.0.0 → 14.1.0

package/README.md

@@ -365,9 +365,11 @@ const { name, kind } = headWords({ name: 'At zero', tier: 'part', of: 'Countdown
 <div className="es-insp-body">{/* the panel's rows */}</div>
 ```
 
-`es-insp-body` is the settings body's side inset, owned here: 16px, and 8px
-under a 284px panel. It is opt-in, so a host adds the class and deletes its own
-side padding.
+`es-insp-body` gives the settings body the panel's side inset, owned here:
+16px, and 12px under a 260px panel. The heads read the same value, the
+`--es-insp-pad-x` token (one home since 14.1.0); a host that must line up
+with the panel's edge reads it too. It is opt-in, so a host adds the class
+and deletes its own side padding.
 
 ## The Layers tree — one row at every depth
 

package/dist/chrome/chrome.css

@@ -252,6 +252,22 @@
      ask the panel's width, never the screen's. */
   container-type: inline-size;
 }
+/* THE PANEL'S SIDE INSET, ONE HOME: 16, AND 12 UNDER A 260px PANEL (one
+   spacing scale, owner ruling 2026-10-02). Every panel head and the settings
+   body read `--es-insp-pad-x` and set no side padding of their own
+   (`tests/panel-one-inset.test.ts`). Until 14.1.0 the heads wrote 16 and 12
+   as literals and the body had its own token, 16 and 8 under 284, so a head
+   and its rows could sit 4px apart. On the editor root too, so a head drawn
+   outside a side panel still has the inset. The narrow value is set on the
+   panel's CHILDREN: a size query answers for the elements inside a container,
+   never for the container itself, and the children hand it down. */
+.es-editor,
+.es-sidepanel {
+  --es-insp-pad-x: var(--es-space-16, 16px);
+}
+@container (width < 260px) {
+  .es-sidepanel > * { --es-insp-pad-x: var(--es-space-12, 12px); }
+}
 .es-sidepanel--left {
   width: var(--es-left-w, 288px);
   border-right: 1px solid var(--es-line);
@@ -264,7 +280,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 12px 16px;
+  padding: 12px var(--es-insp-pad-x);
   flex: none;
 }
 /* A panel's own name. States the margin an h2 would otherwise bring. */
@@ -307,7 +323,7 @@
   display: flex;
   flex: none;
   min-width: 0;
-  padding: 12px 16px 0;
+  padding: 12px var(--es-insp-pad-x) 0;
 }
 /* The link is the shell's Button (`link`) in its Tooltip's wrapper; only its
    truncation is laid out here — a long name is cut inside the panel. */
@@ -334,37 +350,23 @@ span:has(> .es-insp-up-btn) {
   flex-wrap: wrap;
   align-items: center;
   gap: 8px 12px;
-  padding: 12px 16px;
+  padding: 12px var(--es-insp-pad-x);
   flex: none;
 }
-/* THE PANEL'S OWN PADDING IS 16, AND 12 UNDER 260px (one spacing scale, owner
-   ruling 2026-10-02). The side panel is the size container (above), so this
-   asks the panel's width — a panel is dragged between 220 and 560 — and never
-   the screen's. Only the heads are padded here: the settings body's padding
-   is the host's. */
-@container (width < 260px) {
-  .es-panel-head,
-  .es-insp-head,
-  .es-insp-up { padding-inline: 12px; }
-}
 
 /* THE SETTINGS BODY'S ROW INSET, OWNED HERE AND OPT-IN (one text panel v3,
    wave 2 · E1). Each editor padded its own body — the website 16px and 8px
    under a 284px panel (`storefront-editor.css` `.sf-insp-body`, card 66212's
    measured line), the email designer `p-3` plus 16px sides of its own — so the
    same text panel sat at two insets and the email one cut Alignment at 220.
-   A host that puts `es-insp-body` on its panel body gets the website's numbers
+   A host that puts `es-insp-body` on its panel body gets the panel's inset
    and deletes its own; a host that does not is unchanged (no breaking change).
-   ONLY THE SIDES: the room above and below stays the host's. The inset is ONE
-   name, so anything that must line up with it reads the same value. The side
-   panel is the size container (`.es-sidepanel`), so this asks the panel. */
+   ONLY THE SIDES: the room above and below stays the host's. Since 14.1.0 the
+   body reads the panel's ONE inset (above), the same value as the heads: it
+   had its own, 8 under 284. */
 .es-insp-body {
-  --es-insp-pad-x: var(--es-space-16, 16px);
   padding-inline: var(--es-insp-pad-x);
 }
-@container (width < 284px) {
-  .es-insp-body { --es-insp-pad-x: var(--es-space-8, 8px); }
-}
 /* A HEAD WITH A WAY-OUT WORD, UNDER 260px (card [MERGE] One Media Panel Head
    For Both Editors, GG 2026-10-06). At a 220px panel the chip, Cancel, the
    hairline and Hide left the titles about 38px: "Choose image" drew "Ch…" in

package/dist/screen/screen.css

@@ -292,7 +292,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--space-16, 16px) var(--space-16, 16px) var(--space-12, 12px);
+  padding: var(--space-16, 16px) var(--es-insp-pad-x) var(--space-12, 12px);
   flex: none;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "efficient-easel",
-  "version": "14.0.0",
+  "version": "14.1.0",
   "description": "Efficient Easel: the EFFICIENT editors' shared engine and chrome: the saved document as pure functions, the published renderer, and the editor frame, panels, Layers tree, text grammar and type-in-place box. Published as editor-shell up to 0.66.0 and as efficient-editor up to 0.95.0.",
   "license": "UNLICENSED",
   "author": "Efficient Pty Ltd",