efficient-web-builder 41.1.0 → 42.0.0

package/dist/editor/components/storefront-editor.css

@@ -2,10 +2,10 @@
  * Storefront editor chrome — themed to the efficient-shell design system.
  *
  * The editor is efficient-easel's engine (`efficient-easel/easel`), hosted by
- * StorefrontEditorChrome. Until blueprint 6.3 (2026-10-02) it was Puck
- * (@measured/puck) driven through its composition API, and much of the
- * reasoning below was measured against Puck's sheets; where a note names a
- * Puck class or `puck.css`, read it as history unless it says otherwise.
+ * StorefrontEditorChrome. Until blueprint 6.3 (2026-10-02) it was the old editor library
+ * (the old editor library) driven through its composition API, and much of the
+ * reasoning below was measured against the old editor library's sheets; where a note names a
+ * The old editor library class or the old editor library's stylesheet, read it as history unless it says otherwise.
  * This file:
  *   1. Tunes the canvas's own marks — the engine's lists, outlines and drop
  *      cells (`efficient-easel/easel.css`, `drag.css`) — to the storefront's
@@ -144,7 +144,7 @@
   background: var(--sf-hover);
 }
 
-/* ── Left panel: section tree (wraps Puck.Outline) ────────────────────── */
+/* ── Left panel: section tree (wraps the old editor library's outline part) ────────────────────── */
 
 /* `.sf-row`, its states and the `.sf-tree > .sf-row + …` seam WERE HERE. The
    Layers rows became the shell's `TreeRow` in redesign 2b and the seam matched
@@ -477,7 +477,7 @@
   color: var(--sf-text);
 }
 
-/* ── Center: device-framed preview (wraps Puck.Preview) ──────────────── */
+/* ── Center: device-framed preview (wraps the old editor library's preview part) ──────────────── */
 .sf-frame--tablet,
 .sf-frame--mobile {
   /* device frames don't stretch to full width but still fill height */
@@ -502,7 +502,7 @@
 }
 
 /* The Cart / Checkout surfaces are previewed in-canvas by rendering the real
-   components inside the Puck preview iframe (same-document, no nested `<iframe
+   components inside the old editor library preview iframe (same-document, no nested `<iframe
    src>`) — see components/EditorPreviewSurface. No editor-side frame CSS is
    needed; the ribbon is styled inline in that component. */
 
@@ -517,7 +517,7 @@
    The owner, 2026-09-01: hovering a section shows too many dashed lines. He
    wants to find the hover target directly, and ONE is enough.
 
-   He was right, and the hover outline was never the cause. Puck draws FIVE
+   He was right, and the hover outline was never the cause. The old editor library draws FIVE
    dashed outlines and four of them are STATES -- they paint only while a
    merchant is hovering, selecting or dragging. The fifth has no state in its
    selector at all:
@@ -530,30 +530,30 @@
    hero. Hovering added the fifth, and his eye had to find it among the four
    that were already there.
 
-   So the standing one goes and the four states stay. Puck set
-   `[data-puck-dragging]` on `[data-easel-entry]` for the length of a drag, so
-   scoping to `:not([data-puck-dragging])` left every drag affordance exactly
-   as Puck shipped it -- a merchant still sees where a block can land, which is
+   So the standing one goes and the four states stay. The old editor library set
+   `[data-old-dragging]` on `[data-easel-entry]` for the length of a drag, so
+   scoping to `:not([data-old-dragging])` left every drag affordance exactly
+   as the old editor library shipped it -- a merchant still sees where a block can land, which is
    the one thing that must not be traded away for this. (The engine sets no
    such attribute and draws its drop targets over the frame, not in it, so the
    scope is gone; the note on the rule below says why that is safe.)
 
-   ONLY the outline. Puck's rule paints a background tint as well, and that is
+   ONLY the outline. The old editor library's rule paints a background tint as well, and that is
    left alone: an empty slot stays a visible block, so nothing becomes
    unfindable -- it just stops drawing a line round itself.
 
-   SPECIFICITY, NOT `!important`. Ours was (0,4,0) against Puck's (0,2,0), and
-   `storefront-editor.css` was imported after `puck.css` at every call site so
+   SPECIFICITY, NOT `!important`. Ours was (0,4,0) against the old editor library's (0,2,0), and
+   `storefront-editor.css` was imported after the old editor library's stylesheet at every call site so
    source order settled any tie (it is imported after the engine's
    `efficient-easel/easel.css` now; guard §9). An `!important` here would also beat
    `._DropZone--isDestination_`, which IS `!important`, and blind the merchant
    mid-drag.
 
-   `[class*=]`, NOT the literal class. Puck's CSS-module names carry a build
+   `[class*=]`, NOT the literal class. The old editor library's CSS-module names carry a build
    hash (`_DropZone_1i2sv_1`); a literal one would stop matching on the next
-   Puck bump with no error at all, and the field of outlines would come back
+   the old editor library bump with no error at all, and the field of outlines would come back
    silently. `scripts/test-one-hover-outline.tsx` asserts all of this, and
-   asserts Puck still draws the rule we are overriding -- if it ever stops,
+   asserts the old editor library still draws the rule we are overriding -- if it ever stops,
    this becomes dead code and the guard turns that into a red rather than
    leaving something that looks load-bearing.
 
@@ -562,11 +562,11 @@
    The paragraph above is right about the standing box and wrong about what
    else it took. `:empty` does not stop being true while a slot is HOVERED or
    SELECTED -- it only says the slot holds nothing -- and this selector is
-   LONGER than the Puck rules that paint those two states:
+   LONGER than the old editor library rules that paint those two states:
 
-       ours  [data-easel-entry]:not([data-puck-dragging]) …:empty     (0,4,0)
-       Puck  --hoveringOverArea_:not(--isRootZone_)                  (0,2,0)
-       Puck  --isAreaSelected_                                       (0,1,0)
+       ours  [data-easel-entry]:not([data-old-dragging]) …:empty     (0,4,0)
+       the old editor library  --hoveringOverArea_:not(--isRootZone_)                  (0,2,0)
+       the old editor library  --isAreaSelected_                                       (0,1,0)
 
    So on an empty slot this rule won everywhere instead of only at rest.
    Measured in the real editor on the `sharpen` homepage, merged main
@@ -580,20 +580,20 @@
    background tint the paragraph above relies on is true while nothing is
    happening -- and something IS happening here.
 
-   THE TWO EXCLUSIONS ARE PUCK'S OWN CONDITIONS, NEGATED, NOT NEW ONES. Puck
+   THE TWO EXCLUSIONS ARE THE OLD EDITOR LIBRARY'S OWN CONDITIONS, NEGATED, NOT NEW ONES. The old editor library
    paints a non-drag dashed outline on a zone in exactly two cases:
 
        ._DropZone--isAreaSelected_
        ._DropZone--hoveringOverArea_:not(._DropZone--isRootZone_)
 
    and this rule now stands aside for each, character for character. §6 of
-   the guard BUILDS those two exclusions out of Puck's stylesheet and fails if
-   ours do not match, so a sixth state upstream becomes a red on the day Puck
+   the guard BUILDS those two exclusions out of the old editor library's stylesheet and fails if
+   ours do not match, so a sixth state upstream becomes a red on the day the old editor library
    ships it rather than a silent hole like this one.
 
-   ⚠️ WHY THE HOVER EXCLUSION KEEPS ITS `:not(--isRootZone_)`, AND MUST. Puck
+   ⚠️ WHY THE HOVER EXCLUSION KEEPS ITS `:not(--isRootZone_)`, AND MUST. The old editor library
    computes `hoveringOverArea = inNextDeepestArea || isRootZone`, so THE ROOT
-   ZONE CARRIES IT AT ALL TIMES -- that is why Puck's own rule qualifies it.
+   ZONE CARRIES IT AT ALL TIMES -- that is why the old editor library's own rule qualifies it.
    A bare `:not(--hoveringOverArea_)` here would therefore stop neutralising
    the root zone, and an empty page would get its standing dashed box back:
    half of the defect this rule exists to remove, restored quietly by a fix
@@ -609,17 +609,17 @@
 
    Whether any of this is really PAINTED is not a question CSS text can
    answer. `scripts/probe-empty-slot-outline.mjs` rendered these states in a
-   browser over Puck's classes; it went with Puck (blueprint 6.3), so measure
+   browser over the old editor library's classes; it went with the old editor library (blueprint 6.3), so measure
    the engine's canvas in the live editor. */
 /* Since blueprint 5.5 the lists are efficient-easel's `.es-zone`, and the
-   states this section answers are its classes: `.is-area-selected` (Puck's
+   states this section answers are its classes: `.is-area-selected` (the old editor library's
    `--isAreaSelected_`), `.is-hovering-area` (`--hoveringOverArea_`) and
    `.is-root` (`--isRootZone_`). The reasoning above is unchanged; only the
-   names moved, from Puck's hashed modules to classes this repo can spell.
+   names moved, from the old editor library's hashed modules to classes this repo can spell.
 
    ⚠️ NO DRAG SCOPE ANY MORE, AND A DRAG STILL SHOWS WHERE A BLOCK CAN LAND.
-   This rule and A/B below were scoped to `:not([data-puck-dragging])` so a
-   drag kept Puck's in-frame drop targets (`--isDestination_`). Nothing has
+   This rule and A/B below were scoped to `:not([data-old-dragging])` so a
+   drag kept the old editor library's in-frame drop targets (`--isDestination_`). Nothing has
    set that attribute since 5.5 — the engine has no such state — so the
    `:not()` matched every time and only added specificity: dead code that
    looked load-bearing. The engine draws a drag's targets in the HOST page,
@@ -662,13 +662,13 @@
        the block you are POINTING AT        [data-easel-overlay-portal]:hover
 
    MEASURED, not inferred, by scripts/probe-hover-outline-count.mjs (retired
-   with Puck in blueprint 6.3) against both stylesheets in the app's own import
+   with the old editor library in blueprint 6.3) against both stylesheets in the app's own import
    order, with a real pointer:
 
        pointing at a block                       2 dashed boxes
        pointing at a block you have clicked      3 dashed boxes   <- his picture
 
-   ⚠️ THE ROOT ZONE IS THE THIRD ONE, AND IT SURPRISES PEOPLE. Puck's
+   ⚠️ THE ROOT ZONE IS THE THIRD ONE, AND IT SURPRISES PEOPLE. The old editor library's
    `isAreaSelected` rule carries no `:not(--isRootZone_)`, unlike its hover
    rule, so selecting a top-level section outlines the whole page as well as
    the section. That is why the count goes 2 -> 3 on a click rather than
@@ -686,14 +686,14 @@
    has no block in it and therefore no overlay to carry the line, so rule B
    below gives it one of its own. Solid, like everything else here.
 
-   ⚠️ A DRAG IS NOT TOUCHED, AND MUST NOT BE. Under Puck every rule here sat
-   inside `:not([data-puck-dragging])`, so `--isDestination_` and
-   `--isEnabled_` shipped exactly as Puck wrote them. Dashed means something
+   ⚠️ A DRAG IS NOT TOUCHED, AND MUST NOT BE. Under the old editor library every rule here sat
+   inside `:not([data-old-dragging])`, so `--isDestination_` and
+   `--isEnabled_` shipped exactly as the old editor library wrote them. Dashed means something
    during a drag — it is where a block can land — and that is the one
    affordance card 66395 said must never be traded away for this. It still
    holds, by other means: the engine draws a drag's targets over the frame
    (the drop line, the `.es-canvas-empty` cell), where nothing here reaches,
-   so the scope went with Puck — see the note on the empty-slot rule above.
+   so the scope went with the old editor library — see the note on the empty-slot rule above.
 
    SPECIFICITY, NOT `!important`, the same as the rule above. A is (0,4,0)
    against the engine's (0,3,0) state rules; its first selector carries
@@ -702,11 +702,11 @@
    source order. Nothing is lost on the root: the engine never outlines a
    selected root list, and an EMPTY selected root still gets B. B is (0,5,0)
    so it wins over A on an empty zone. C has no upstream rule left to answer
-   (Puck's overlay-portal sheet went in 5.5). Ours is imported after the
+   (the old editor library's overlay-portal sheet went in 5.5). Ours is imported after the
    engine's sheet at every call site all the same (guard §9).
 
-   `[class*=]`, NOT the literal class names — Puck's CSS-module names carry a
-   build hash, and a literal one would stop matching on the next Puck bump with
+   `[class*=]`, NOT the literal class names — the old editor library's CSS-module names carry a
+   build hash, and a literal one would stop matching on the next old editor library bump with
    no error at all, silently putting all three boxes back. */
 
 /* A · a zone draws no line while you point at it or after you click it. */
@@ -718,13 +718,12 @@
 /* ⚠️ EVERY COLOUR BELOW CARRIES ITS OWN FALLBACK, AND THAT IS NOT DECORATION.
    These rules paint inside the canvas FRAME, whose document has no `.es-editor`
    root, so no `--es-*` token is defined there (efficient-easel/easel.css
-   falls back the same way). Until blueprint 5.5 they leaned on Puck's
-   `puck.css`, which declared its `--puck-color-azure-*` ramp on the frame's
+   falls back the same way). Until blueprint 5.5 they leaned on the old editor library's stylesheet, which declared its `--old-azure-*` ramp on the frame's
    `:root` and drew the pointed-at block's colour and offset itself. 5.5 took
-   that sheet off the canvas: a bare `var(--puck-color-azure-08)` then resolved
+   that sheet off the canvas: a bare `var(--old-azure-08)` then resolved
    to nothing, and an `outline` with an unresolvable colour is no outline at all
    — the empty slot stopped answering when pointed at, silently. The colours are
-   Puck's ramp as the shell re-tints it (`--es-accent-line` = azure-08,
+   the old editor library's ramp as the shell re-tints it (`--es-accent-line` = azure-08,
    `--es-accent-tint-strong` = azure-09). */
 
 /* B · …except an EMPTY one, which has no block to carry the line for it. */
@@ -734,11 +733,11 @@
 }
 
 /* C · the block you are pointing at: one line, solid, 1px, 2px off the words.
-   Puck's own overlay-portal sheet drew it 2px dashed and this file narrowed it;
+   the old editor library's own overlay-portal sheet drew it 2px dashed and this file narrowed it;
    since that sheet left with 5.5 the whole line is declared here.
    ITS COLOUR IS THE ENGINE'S HOVER COLOUR (2026-10-16): the accent at 60%, as
    `.es-canvas-outline.is-hover` draws it in efficient-easel easel.css, so a
-   pointed-at word and a pointed-at block look the same. It was Puck's azure-09
+   pointed-at word and a pointed-at block look the same. It was the old editor library's azure-09
    (#dbeafe), a tint of white: next to the engine's box it read as a second,
    lighter box, and once E below took that box away it was all but invisible
    on a light page. */
@@ -747,7 +746,7 @@
   outline-offset: 2px;
 }
 
-/* …and the rest of what Puck's overlay-portal sheet (lib/overlay-portal/
+/* …and the rest of what the old editor library's overlay-portal sheet (lib/overlay-portal/
    styles.css) gave a text-part anchor, carried here for the same reason: the
    anchor takes the pointer, and draws a ring while the caret is in it. The
    OPEN part's own hairline (PART_PICK_CSS, (0,3,0)) still outranks the ring
@@ -763,7 +762,7 @@
 
 /* D · …and ONLY the innermost one.
    ⚠️ FOUND IN THE REAL EDITOR, NOT ON THE BOARD, AND IT IS THE HALF THE BOARD
-   COULD NOT SEE. Puck nests an overlay per component, and `:hover` matches
+   COULD NOT SEE. The old editor library nests an overlay per component, and `:hover` matches
    every ancestor in that chain — so pointing at the heading of a section put
    FOUR overlays in `:hover` at once. Measured at /edit/preview-footer with a
    real pointer: 4 hovered overlays, 4 painted lines. Rules A-C removed every
@@ -816,25 +815,6 @@
 
 /* @tokens canvas-end */
 
-/* ── A Gap only Box on the canvas draws what the page draws ───────────────────
-   A Box set to "Gap only" (`sf-box-gap-only`, lib/content/box-layout) takes
-   away its blocks' own top and bottom padding; the host's unlayered rules are
-   `.sf-box-gap-only > *` and `.sf-box-gap-only > .sf-section-pad > *`. On the
-   canvas two elements stand between the Box and each block's root: the
-   editor's item (`[data-easel-block]`) and the part host
-   (`[data-sf-part-host]`, components/PreviewPartAnchors, `display: contents`).
-   A child selector stops at the item, so on the canvas every block kept its
-   frame (a Heading +48px, a Text +32px) and the Box was taller than on the
-   page. These are the host's two rules again, through the two elements.
-   Unlayered, for the host's reason: it must beat the `py-4` / `py-6` utility.
-   `scripts/test-gap-only-canvas.tsx` compares the canvas with the page.
-   Outside the canvas region above, whose rules may name only `[data-puck-…]`
-   (`scripts/test-editor-css-tokens.ts`); it holds no colour, radius or face. */
-.sf-box-gap-only > [data-easel-block] > [data-sf-part-host] > *,
-.sf-box-gap-only > [data-easel-block] > [data-sf-part-host] > .sf-section-pad > * {
-  padding-block: 0;
-}
-
 /* ── Canvas "Add section" seams (overlay between preview sections) ──────────
    Absolutely positioned over .sf-preview-host (the iframe's box), one band per
    seam between top-level sections, placed at the boundary Y measured from the
@@ -843,7 +823,7 @@
    insertion line + a dark "Add section" pill; clicking opens the picker targeted
    at that seam. It sits inside the scaled device frame, so it tracks the zoom. */
 
-/* ── Right panel: inspector (wraps Puck.Fields) ──────────────────────── */
+/* ── Right panel: inspector (wraps the old editor library's fields part) ──────────────────────── */
 /* The head — chip, the panel's name as its h2 (card 66127), the kind line and
    the Duplicate / Copy-to-page / Remove buttons — is editor-shell's
    `.es-insp-head` (efficient-easel/chrome.css), lifted from this sheet (redesign 2a). */
@@ -910,16 +890,16 @@
   /* THE DROPDOWN ARROW, WRITTEN ONCE — card 66399.c.
      Read by `.sf-insp-body select` at rest AND by the hover rule beside it. The
      hover rule HAS to restate the image (overriding without `!important`
-     replaces only the properties you name, and Puck's hover repaints the arrow
+     replaces only the properties you name, and the old editor library's hover repaints the arrow
      darker), so without this token the glyph would be spelled out twice —
      putting back the second copy card 66399 had just removed, and leaving the
-     two to drift apart on the next Puck bump.
+     two to drift apart on the next old editor library bump.
 
      ⚠️ NOT AN `--es-*` ALIAS, and deliberately not one. Every other `--sf-*`
      above is a design value we choose, so it belongs in the shell. This is
-     PUCK'S OWN GLYPH, matched to the package polygon for polygon so the six
-     rows Puck drew and the 55 the panel drew could not look different. Since
-     Puck left (blueprint 6.3) it is the panel's one arrow, declared here once;
+     THE OLD EDITOR LIBRARY'S OWN GLYPH, matched to the package polygon for polygon so the six
+     rows the old editor library drew and the 55 the panel drew could not look different. Since
+     the old editor library left (blueprint 6.3) it is the panel's one arrow, declared here once;
      `scripts/test-panel-one-arrow.tsx` §4 fails if a second copy appears or a
      select resolves to anything else. */
   --sf-select-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23c3c3c3'><polygon points='0,0 100,0 50,50'/></svg>");
@@ -947,7 +927,7 @@
    its minimum width.
 
    WHY 280, WHICH IS NOT A ROUND NUMBER AND NOT AN OPINION. All 88 registered
-   sections were rendered as real inspector panels — the live Puck config's own
+   sections were rendered as real inspector panels — the live the old editor library config's own
    fields, each field's own `render()`, over this sheet and the shell's two — and
    swept across the resizable band in Chromium, counting elements whose
    `scrollWidth` exceeds their `clientWidth`:
@@ -989,7 +969,7 @@
   .sf-insp-body::-webkit-scrollbar-thumb { border-width: var(--space-2); }
 }
 
-/* Floating-styled form controls for Puck's native fields — and ONLY those.
+/* Floating-styled form controls for the old editor library's native fields — and ONLY those.
 
    ⚠️ A FIELD THE SHELL DRAWS IS SKIPPED: `:not(:where(.rosh-focus-ring))` on
    every selector of this rule, its placeholder, its textarea and its focus
@@ -1050,31 +1030,31 @@
 .sf-insp-body select {
   width: 100%;
   border: 1px solid var(--sf-input-border);
-  /* ⚠️ LONGHAND, NEVER `background:` — card 66397. Puck draws this control's
+  /* ⚠️ LONGHAND, NEVER `background:` — card 66397. The old editor library draws this control's
      dropdown arrow as a 100x100 SVG polygon and then shrinks it with longhands
      (`background-size: 12px`, `background-repeat: no-repeat`). The shorthand
      that used to sit here reset every longhand it did not name, so on hover —
-     where Puck re-declares only the IMAGE — the full-size tile repeated 2.48
+     where the old editor library re-declares only the IMAGE — the full-size tile repeated 2.48
      times across the 248px row and drew a dark bar with three triangles. That
      is what Lewis filed. It shipped in 486bf97fd and was never a regression.
 
-     Setting only the colour leaves Puck's own geometry alone, which is why this
-     needs no override of the package's rules and no hashed Puck class name to
+     Setting only the colour leaves the old editor library's own geometry alone, which is why this
+     needs no override of the package's rules and no hashed the old editor library class name to
      rot on the next bump. `scripts/test-panel-one-arrow.tsx` §3 holds the
-     invariant (moved there when Puck left): the arrow is drawn ONCE or not at
+     invariant (moved there when the old editor library left): the arrow is drawn ONCE or not at
      all, never tiled, at rest or on hover.
 
      🎨 THE ARROW COMING BACK IS THE OWNER'S OWN RULING, not a side effect. It
-     puts a visible arrow into the panel's six Puck selects, which have not had
+     puts a visible arrow into the panel's six the old editor library selects, which have not had
      one since the editor shipped. He was shown the row as it is today, this,
      and an arrow-less alternative — three shots of the real panel at its own
      320px — and on 2026-09-01 he chose this one: "the little arrow is fine."
      Do not quietly take it away again; it is a decision, with a date.
 
      🎯 AND IT IS THE SAME ARROW ON EVERY ROW — card 66399. That ruling put an
-     arrow on the SIX selects Puck draws. The panel draws 55 more from its own
+     arrow on the SIX selects the old editor library draws. The panel draws 55 more from its own
      markup (the `select()` helper's custom field, and the `<select>`s panel
-     components write themselves), and Puck never styles those: nothing set
+     components write themselves), and the old editor library never styles those: nothing set
      `appearance`, so each one drew whatever arrow the merchant's own browser
      draws. Measured on origin/main at 320px and again at the 220px minimum, the
      Divider block's "Style" row and its "Spacing" row — three rows apart in one
@@ -1082,15 +1062,15 @@
      the 12px triangle. A merchant could ask why two rows look different and the
      only true answer was "because of which library declared them".
 
-     So the five declarations below repeat Puck's OWN geometry, exactly, onto
+     So the five declarations below repeat the old editor library's OWN geometry, exactly, onto
      every select the panel draws. Two things follow from that, and both are the
      point rather than a side effect:
 
-       • THE SIX DO NOT MOVE. Puck's `select._Input-input_…` is (0,1,1) and this
+       • THE SIX DO NOT MOVE. The old editor library's `select._Input-input_…` is (0,1,1) and this
          rule is (0,1,1) too, so the two collide at equal weight and source order
          decides — but they now declare the SAME values, so it does not matter
          which wins. Nothing here has to out-specify the package, and no hashed
-         Puck class is named where it would rot on the next bump.
+         the old editor library class is named where it would rot on the next bump.
        • NEITHER TRAP IS SPRUNG. `appearance: none` alone leaves a row with NO
          arrow, which looks exactly like a stylesheet that failed to load; the
          image alone leaves the browser's arrow beside ours, TWO on one row.
@@ -1100,9 +1080,9 @@
      that would break if that were forgotten, because it is the rule that holds
      the image. `scripts/test-panel-one-arrow.tsx` resolves the whole cascade per
      markup shape and fails if any shape's arrow differs from any other's, and if
-     this image ever stops matching the one Puck ships.
+     this image ever stops matching the one the old editor library ships.
 
-     ✅ NOW UNIFIED, one state along — card 66399.c. Puck darkens its own arrow on
+     ✅ NOW UNIFIED, one state along — card 66399.c. The old editor library darkens its own arrow on
      HOVER at (0,4,1), and that rule can reach only its six. This card's rule
      below holds it off at (0,5,1) so all 61 rows answer the pointer the same
      way; `scripts/test-panel-one-hover.tsx` is the guard for it.
@@ -1110,7 +1090,7 @@
      ⚠️ THAT NUMBER WAS WRONG HERE UNTIL 66399.c. It read (0,4,2), and so did the
      arrow guard's header and sh#1024's body. `:has(> select)` counts in the
      ELEMENT column, not the class one — and one column out is exactly the
-     difference between three of our classes tying with Puck and losing to it. */
+     difference between three of our classes tying with the old editor library and losing to it. */
   background-color: var(--sf-field-bg);
   appearance: none;
   -webkit-appearance: none;
@@ -1127,7 +1107,7 @@
 
 /* ── EVERY DROPDOWN ANSWERS THE POINTER THE SAME WAY — card 66399.c ─────────
    Card 66399 gave all 61 panel dropdowns the same arrow AT REST. Under the
-   pointer they still split: Puck repaints its own six — ground, arrow AND
+   pointer they still split: the old editor library repaints its own six — ground, arrow AND
    border — from a rule the other 55 have no equivalent of, so one row lights up
    and the row three above it does nothing.
 
@@ -1144,27 +1124,27 @@
    also why nothing needs to change in `efficient-easel`: the shell already owns the
    VALUE (`--es-hover`), and this is the shop agreeing with it.
 
-   ⚠️ WHY FOUR CLASSES, AND WHY THAT IS NOT COSMETIC. Puck's hover rule is
+   ⚠️ WHY FOUR CLASSES, AND WHY THAT IS NOT COSMETIC. The old editor library's hover rule is
    (0,4,1) — `._Input_`(class) + `:has(> select)`(ELEMENT: `:has()` takes its
    argument's specificity) + `:hover`(class) + `._Input-input_`(class) +
    `:not([disabled])`(attribute). Measured, three of our classes TIES it and then
-   wins only because `storefront-editor.css` is imported after `puck.css` at
+   wins only because `storefront-editor.css` is imported after the old editor library's stylesheet at
    every editor entry; move an import anywhere and the six rows silently revert
-   to Puck's azure with nothing going red. The fourth class buys independence
-   from load order. No `!important`, and no hashed Puck class name that would rot
+   to the old editor library's azure with nothing going red. The fourth class buys independence
+   from load order. No `!important`, and no hashed the old editor library class name that would rot
    on the next bump.
 
    ⚠️ ALL THREE DECLARATIONS ARE LOAD-BEARING. Overriding without `!important`
    replaces only the properties you NAME, so the arrow and the border are
-   restated at their RESTING values purely to hold Puck's darker pair off. They
+   restated at their RESTING values purely to hold the old editor library's darker pair off. They
    are not a second opinion about how the row should look.
 
    AND IT STANDS ASIDE EVERYWHERE ELSE. It needs `:hover`, so it cannot touch the
    row at rest; it is inside `.sf-insp-body`, so it cannot reach the storefront's
-   own selects; and carrying no `!important` is what keeps Puck's drag paint
+   own selects; and carrying no `!important` is what keeps the old editor library's drag paint
    (`[data-dnd-placeholder]`, which IS `!important`) out of its reach. Card 66395
    §6 is the precedent for getting that wrong — a shop rule that out-specified
-   Puck the same way went on to win states it should have stood aside for, and
+   the old editor library the same way went on to win states it should have stood aside for, and
    every guard stayed green. `scripts/test-panel-one-hover.tsx` resolves the
    whole cascade per markup shape and asserts what must NOT move as well as what
    must. */
@@ -1488,7 +1468,7 @@
   color: var(--sf-text-secondary);
 }
 
-/* Collapsed-panel state hook (when Puck's UI flags hide a side) */
+/* Collapsed-panel state hook (when the old editor library's UI flags hide a side) */
 .sf-panel--hidden {
   display: none;
 }
@@ -1586,12 +1566,12 @@
    Deleted rather than left dead: a rule nobody renders is a rule the next person
    edits and watches do nothing.
    CARD 66300.a FINISHED THE JOB. The last selector that named `.sf-field-section`
-   went with them: a `[class*="_PuckFields-field_"]:first-child` descendant that
+   went with them: a `[class*="_OldFields-field_"]:first-child` descendant that
    pulled the first header flush to the panel top. It had matched nothing since the
    rule above was deleted in this same pull request. The two comments that described
    the pair went with it, and so did the section header that had nothing left under
    it — the real "floating custom controls" rules live further up, at
-   `Floating-styled form controls for Puck's native fields`.
+   `Floating-styled form controls for the old editor library's native fields`.
    MEASURED BEFORE CUTTING, with controls in the same sweep, so the zero is a
    measurement and not a query that finds nothing: `.sf-field-section` and
    `.sf-field-group` return ZERO renders across app/, components/, lib/ AND the
@@ -1603,7 +1583,7 @@
 
 /* ── The settings TABS (card 8802; the Inspector's since blueprint 4.4) ───────
    The strip is `.es-tabs` from `efficient-easel/panel.css`, drawn by
-   efficient-easel's `Inspector` (components/SiteFields) above its rows. Puck's
+   efficient-easel's `Inspector` (components/SiteFields) above its rows. The old editor library's
    flat list of hashed wrappers, which made `lib/document/controls.tsx` mark each
    bucket and hide the others' rows with a DOM pass, is gone: a row on another
    tab is `hidden` by the Inspector itself, and a bucket header is a marker
@@ -1703,10 +1683,10 @@
      one setting to the next                  50px
      the last setting to the next heading      74px
 
-   36px OF EVERY ONE OF THOSE WAS NEVER A DECISION. Puck wraps each field in
-   `._PuckFields-field_` and gives it `padding: 16px 16px 12px` plus an 8px
+   36px OF EVERY ONE OF THOSE WAS NEVER A DECISION. The old editor library wraps each field in
+   `._OldFields-field_` and gives it `padding: 16px 16px 12px` plus an 8px
    `margin-top` between wrappers. That padding was the air around a RULED cell
-   — Puck draws a `border-top` between fields. Card 66334 deleted every one of
+   — the old editor library draws a `border-top` between fields. Card 66334 deleted every one of
    those lines, on the owner's word, and left the padding behind. It has been
    dead air stacked on top of the shell's rhythm ever since, and it is why a
    panel that reads as "too loose" measures as one nobody has loosened.
@@ -1782,7 +1762,7 @@
    Since 2026-10-14 the sheet has NO heading there (Lewis: one kind of group
    heading per panel, the folding band): it draws an empty
    `.sf-theme-module-break` where `SURFACES` stood, and these two selectors
-   carry the rule to it. The sheet does not draw Puck field wrappers: it renders
+   carry the rule to it. The sheet does not draw the old editor library field wrappers: it renders
    its rows as bare `SettingsField`s inside its own container. Same 30px, same full
    bleed, same token-read cancel — one block, because a second copy of his
    number is the thing that goes stale.
@@ -1827,7 +1807,7 @@
 }
 /* A HEADING OWNS ITS FIRST SETTING, so that setting sits closer to it than to
    the settings below it. The shell says this as
-   `.es-group-body > .es-field:first-child`, which cannot fire here: Puck's
+   `.es-group-body > .es-field:first-child`, which cannot fire here: the old editor library's
    inspector is a FLAT sibling list, so a heading never wraps the rows it heads
    and there is no `:first-child` to select. Same rule, said the only way this
    DOM can say it — the row after the heading's wrapper. Without it the
@@ -1899,7 +1879,7 @@
    needs the rule, and this sheet goes to one of them. It loads before this
    sheet, where the rule stood; no rule here meets it on `display !important`. */
 /* ── A field that draws NO CONTROL here (card 66178) ──────────────────────────
-   Puck owned the wrapper around every top-level field and ruled the gap between
+   the old editor library owned the wrapper around every top-level field and ruled the gap between
    two of them, so a field whose render returned nothing still took its
    `16px 16px 12px` and still drew the line: a hairline with only blank space on
    one side. (Since blueprint 4.4 the row is efficient-easel's `.es-insp-row`.) It was three of
@@ -1926,7 +1906,7 @@
    it: the rule below is drawn by a PACKAGE, it is the majority of what is
    actually on screen, and it cannot be deleted from here.
 
-   Puck rules the gap between every pair of top-level fields, so it draws once
+   the old editor library rules the gap between every pair of top-level fields, so it draws once
    per field for the whole panel — 28 lines in a single section panel, measured.
    That is most of the panel's lines on its own, which is why removing the shop's
    own two heading rules (card 66300) did not change what he saw.
@@ -1936,21 +1916,21 @@
    text parts. It was held here under a written expiry, because a rule that lives
    in another repo could not be reached from this one. editor-shell 0.29.0 (card
    66350) deleted it AT SOURCE and card 66351 deleted this repo's copy with it —
-   the ending the Puck rule below cannot have, since `@measured/puck` is not ours
+   the ending the old editor library rule below cannot have, since `The old editor library` is not ours
    to change. That seam is now held from both ends by
    `scripts/test-drill-rows-separated-by-air.ts`: it fails if the shell starts
    drawing on it again, and it fails if a local override for it reappears here.
 
-   ⚠️ SPECIFICITY, NOT `!important`. Puck's rule is (0,3,0) —
+   ⚠️ SPECIFICITY, NOT `!important`. The old editor library's rule is (0,3,0) —
    `wrapFields field + field` — so this restates all three parts to match it, and
-   wins on order: `storefront-editor.css` is imported after `puck.css` and after
+   wins on order: `storefront-editor.css` is imported after the old editor library's stylesheet and after
    `panel.css` at every call site. The `[class*=]` form is this file's existing
-   idiom for Puck's hashed module names (see the three rules above); a bare class
-   would break on the next Puck bump, silently, by putting the lines back.
+   idiom for the old editor library's hashed module names (see the three rules above); a bare class
+   would break on the next old editor library bump, silently, by putting the lines back.
 
    This is an override of a live upstream rule, not dead code:
    `scripts/test-panel-no-divider-lines.tsx` §2 asserts the upstream rule still
-   exists before checking it, so if Puck ever drops its own line, the guard says
+   exists before checking it, so if the old editor library ever drops its own line, the guard says
    to delete the override rather than leave it lying here — which is exactly what
    happened to the drill one above. */
 
@@ -2463,7 +2443,7 @@
 
    ⚠️ NOT CAUSED BY THE PANEL-SPACING CARD. Checked rather than assumed: the
    same three tabs measure 38 / 38 / 0 on `ad353cf60`, the commit before that
-   card's three PRs. Those changed `.sf-field` and Puck's field wrappers; this
+   card's three PRs. Those changed `.sf-field` and the old editor library's field wrappers; this
    panel draws the shell's `.es-field`, whose 38 has stood since card 66301 —
    the owner's own re-scale on 2026-08-31.
 
@@ -3919,7 +3899,7 @@ input.sf-list-marking {
 }
 
 /* ── A slot section's children, listed in its OWN panel (card 66186) ──────────
-   The Hero Slideshow's Content tab was empty: `slides` is a slot, and Puck draws
+   The Hero Slideshow's Content tab was empty: `slides` is a slot, and the old editor library draws
    a slot as nothing in the inspector, so the slides were reachable only from the
    Sections tree. The rows are the shell's `.es-drill` (single source, as in
    `.sf-entries` above) and the heading is the panel's own `.sf-field-group`, so

package/dist/editor/components/usePinnedChromeSeed.js

@@ -1 +1 @@
-"use client";import{useEffect as j,useRef as q}from"react";import{createNode as T,newId as I}from"efficient-easel/data";import{useEaselApi as J}from"efficient-easel/easel";import{useScreenDocument as K}from"efficient-easel/screen/components/ScreenDocumentContext";import{useEaselSession as M}from"efficient-easel/screen/lib/session-context";import{SITE_FOOTER_SLUG as L}from"../../format/lib/content/footer.js";import{boxFooterFromFooter as U}from"../../format/lib/document/box-footer.js";import{useSectionToBoxPass as Q}from"./useSectionToBoxPass.js";import{ROOT_ZONE as l,missingPinnedTypes as V,pinnedDuplicateIds as O}from"efficient-easel/draw";import{FOOTER_TYPE as a,HEADER_TYPE as E,buildDefaultFooterBlocks as b,buildDefaultHeaderNode as N}from"../lib/document/footer-blocks.js";import{canSeedPinnedChrome as W}from"../../format/lib/document/pinned-seed-gate.js";import{siteFooterDocChrome as X,SITE_FOOTER_TYPE as f}from"../../format/lib/document/section-groups.js";import{inPlaceSeedPlan as $}from"../lib/document/pinned-in-place-seed.js";import{seedNewSiteHeader as ee}from"../../format/lib/document/new-site-header-seed.js";import{SITE_HEADER_TYPE as R}from"../../format/lib/document/section-groups.js";import{blocksOf as te}from"../lib/website-session.js";function De(t,D){const{adapter:_,capabilities:y,currentSlug:w,docId:S,data:C,saveStatus:H,siteId:v,tokenRef:x}=K(),z=M(),{hasSiteSettings:B,hasPinnedChrome:Y}=y;Q(t);const A=!!y.editsPinnedInPlace&&w!==L,P=w===L,h=J().getState,g=q(null);j(()=>{if(!W({docId:S,saveStatus:H,seededDocId:g.current})||(g.current=S,!Y))return;const p=h().appState.data,n=p.content,d=C?.content??[],r=(e,s)=>e.some(i=>i?.type===s);if(!B){const e=new Set(O(n)),s=e.size?n.filter(c=>!e.has(c.props.id)):n;if(e.size&&t.setDocument({...p,content:s}),P)return;const i=V(s,d);if(i.includes(a)){const c=s.length,o=t.insertSection(a,c);t.replaceComponent(l,c,{type:a,props:{id:o,blocks:b()}})}i.includes(E)&&t.insertNode(l,0,N());return}if(P){const e=X(n);if(e!==n&&t.setDocument({...p,content:[...e]}),!e.find(i=>i.type===a)&&!r(d,a)&&!r(e,f)&&!r(d,f)){const i=(o,m)=>T(D,o,m),c={type:a,props:{blocks:b()}};t.insertNode(l,e.length,U(c,i,I(f)))}return}if(A){const e=!!_?.pinnedChrome?.state().docId,s=$(n,{hasChromeDoc:e}),i=new Set([...s.remove,...O(n.filter(o=>!s.remove.includes(String(o.props.id))))]),c=i.size?n.filter(o=>!i.has(String(o.props.id))):n;if(c.length!==n.length&&t.setDocument({...p,content:c}),s.seedFooter&&!r(d,a)&&!r(d,f)){const o=(u,Z)=>T(D,u,Z),m={type:a,props:{blocks:b()}};t.insertNode(l,c.length,U(m,o,I(f)))}if(s.seedHeader&&!r(d,E)){const o=c[0]?.type===R?1:0;t.insertNode(l,o,N())}if(s.seedSiteHeader&&!r(d,R)&&!r(d,a)&&!r(d,f)){const o=S;ee({blocks:te(z),make:(m,u)=>T(D,m,u),id:I(R),siteId:v??null,token:x.current,latest:()=>h().appState.data.content,stillOpen:()=>g.current===o,write:m=>{const u=h().appState.data;t.setDocument({...u,content:[...m]})}})}return}const k=n.filter(e=>e.type!==a),G=new Set(O(k)),F=G.size?k.filter(e=>!G.has(e.props.id)):k;F.length!==n.length&&t.setDocument({...p,content:F}),!r(F,E)&&!r(d,E)&&t.insertNode(l,0,N())},[S,H,C,h,t,B,Y,P,A,_,z,v,x])}export{De as usePinnedChromeSeed};
+"use client";import{useEffect as j,useRef as q}from"react";import{createNode as T,newId as I}from"efficient-easel/data";import{useEaselApi as J}from"efficient-easel/easel";import{useScreenDocument as K}from"efficient-easel/screen/components/ScreenDocumentContext";import{useEaselSession as M}from"efficient-easel/screen/lib/session-context";import{SITE_FOOTER_SLUG as L}from"../../format/lib/content/footer.js";import{boxFooterFromFooter as U}from"../../format/lib/document/box-footer.js";import{useSectionToBoxPass as Q}from"./useSectionToBoxPass.js";import{ROOT_ZONE as l,missingPinnedTypes as V,pinnedDuplicateIds as O}from"efficient-easel/draw";import{FOOTER_TYPE as a,HEADER_TYPE as E,buildDefaultFooterBlocks as b,buildDefaultHeaderNode as N}from"../lib/document/footer-blocks.js";import{canSeedPinnedChrome as W}from"../../format/lib/document/pinned-seed-gate.js";import{siteFooterDocChrome as X,SITE_FOOTER_TYPE as f}from"../../format/lib/document/section-groups.js";import{inPlaceSeedPlan as $}from"../lib/document/pinned-in-place-seed.js";import{seedNewSiteHeader as ee}from"../../format/lib/document/new-site-header-seed.js";import{SITE_HEADER_TYPE as R}from"../../format/lib/document/section-groups.js";import{blocksOf as te}from"../lib/website-session.js";function De(t,D){const{adapter:_,capabilities:y,currentSlug:w,docId:S,data:C,saveStatus:H,siteId:v,tokenRef:x}=K(),z=M(),{hasSiteSettings:B,hasPinnedChrome:Y}=y;Q(t);const A=!!y.editsPinnedInPlace&&w!==L,g=w===L,h=J().getState,P=q(null);j(()=>{if(!W({docId:S,saveStatus:H,seededDocId:P.current})||(P.current=S,!Y))return;const p=h().appState.data,n=p.content,d=C?.content??[],r=(e,s)=>e.some(i=>i?.type===s);if(!B){const e=new Set(O(n)),s=e.size?n.filter(c=>!e.has(c.props.id)):n;if(e.size&&t.setDocument({...p,content:s}),g)return;const i=V(s,d);if(i.includes(a)){const c=s.length,o=t.insertSection(a,c);t.replaceComponent(l,c,{type:a,props:{id:o,blocks:b()}})}i.includes(E)&&t.insertNode(l,0,N());return}if(g){const e=X(n);if(e!==n&&t.setDocument({...p,content:[...e]}),!e.find(i=>i.type===a)&&!r(d,a)&&!r(e,f)&&!r(d,f)){const i=(o,m)=>T(D,o,m),c={type:a,props:{blocks:b()}};t.insertNode(l,e.length,U(c,i,I(f)))}return}if(A){const e=!!_?.pinnedChrome?.state().docId,s=$(n,{hasChromeDoc:e}),i=new Set([...s.remove,...O(n.filter(o=>!s.remove.includes(String(o.props.id))))]),c=i.size?n.filter(o=>!i.has(String(o.props.id))):n;if(c.length!==n.length&&t.setDocument({...p,content:c}),s.seedFooter&&!r(d,a)&&!r(d,f)){const o=(u,Z)=>T(D,u,Z),m={type:a,props:{blocks:b()}};t.insertNode(l,c.length,U(m,o,I(f)))}if(s.seedHeader&&!r(d,E)){const o=c[0]?.type===R?1:0;t.insertNode(l,o,N())}if(s.seedSiteHeader&&!r(d,R)&&!r(d,a)&&!r(d,f)){const o=S;ee({blocks:te(z),make:(m,u)=>T(D,m,u),id:I(R),siteId:v??null,token:x.current,latest:()=>h().appState.data.content,stillOpen:()=>P.current===o,write:m=>{const u=h().appState.data;t.setDocument({...u,content:[...m]})}})}return}const k=n.filter(e=>e.type!==a),G=new Set(O(k)),F=G.size?k.filter(e=>!G.has(e.props.id)):k;F.length!==n.length&&t.setDocument({...p,content:F}),!r(F,E)&&!r(d,E)&&t.insertNode(l,0,N())},[S,H,C,h,t,B,Y,g,A,_,z,v,x])}export{De as usePinnedChromeSeed};

package/dist/editor/components/useSectionToBoxPass.d.ts

@@ -1,2 +1,4 @@
 import type { ScreenDocumentOps } from "efficient-easel/screen/lib/screen-parts";
+import { type SectionToBoxEdit } from "../../render/lib/sections/section-to-box.js";
 export declare function useSectionToBoxPass(ops: ScreenDocumentOps): void;
+export declare function applySectionToBoxEdits(edits: readonly SectionToBoxEdit[], ops: Pick<ScreenDocumentOps, "replaceComponent" | "insertNode">, done: Set<string>): void;

package/dist/editor/components/useSectionToBoxPass.js

@@ -1 +1 @@
-"use client";import{useEffect as s,useRef as i}from"react";import{useEasel as f}from"efficient-easel/easel";import{ROOT_ZONE as d}from"efficient-easel/draw";import{sectionToBoxEdits as p}from"../../render/lib/sections/section-to-box.js";function x(e){const t=f(o=>o.appState.data.content),n=i(new Set);s(()=>{for(const{index:o,node:c}of p(t)){const r=String(t[o]?.props.id??"");n.current.has(r)||(n.current.add(r),e.replaceComponent(d,o,c))}},[t,e])}export{x as useSectionToBoxPass};
+"use client";import{useEffect as p,useRef as d}from"react";import{useEasel as f}from"efficient-easel/easel";import{ROOT_ZONE as s}from"efficient-easel/draw";import{usePreviewHeader as m}from"../../render/components/PreviewHeaderContext.js";import{siteCardThemeMetadata as u}from"../../format/lib/content/section-width.js";import{pageConvertContextOf as x,sectionToBoxEdits as l}from"../../render/lib/sections/section-to-box.js";function B(n){const o=f(e=>e.appState.data.content),r=d(new Set),{cardThemeIndex:t}=m();p(()=>{const e=x(u(t));E(l(o,e),n,r.current)},[o,n,t])}function E(n,o,r){for(const{index:t,nodes:e}of[...n].sort((i,c)=>c.index-i.index)){const i=String(e[0].props.id);r.has(i)||(r.add(i),o.replaceComponent(s,t,e[0]),e.slice(1).forEach((c,a)=>{o.insertNode(s,t+1+a,c),o.replaceComponent(s,t+1+a,c)}))}}export{E as applySectionToBoxEdits,B as useSectionToBoxPass};

package/dist/editor/lib/document/blocks/general/Divider/fields.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{EyeOffIcon as s,StylesIcon as t,WeightIcon as o,WidthIcon as m}from"efficient-easel/icons";import{deviceField as r}from"efficient-easel/screen/lib/document/device-fields";import{select as n,slider as l,toggle as c}from"../../../controls.js";import{DEFAULT_DIVIDER_STYLE as i,DIVIDER_STYLE_OPTIONS as a}from"../../../../../../format/lib/sections/divider-style.js";import{withRowRules as d}from"../../../../../../render/lib/document/show-when.js";const f={any:[{field:"style",set:!1},{field:"style",is:i}]},D={fields:d({style:n("Style",e(t,{}),a,i),spacing:{type:"select",options:[{label:"Small",value:"sm"},{label:"Medium",value:"md"},{label:"Large",value:"lg"}]},thickness:l("Thickness",e(o,{}),1,8,1,1,"px"),lengthPct:l("Length",e(m,{}),10,100,1,100,"%"),hideOnMobile:r("mobile",c("Hide",!1,e(s,{})))},[[["thickness"],f]])};export{D as DividerFields};
+import{jsx as e}from"react/jsx-runtime";import{EyeOffIcon as r,StylesIcon as d,WeightIcon as c,WidthIcon as p}from"efficient-easel/icons";import{deviceField as a}from"efficient-easel/screen/lib/document/device-fields";import{NoControlMark as m,noControlField as f}from"efficient-easel/screen/lib/document/panel-no-control-mark";import{select as g,sidesPaddingFields as I,slider as i,swapPadding as h,toggle as y}from"../../../controls.js";import{DEFAULT_DIVIDER_STYLE as s,DIVIDER_SPACE_PX as D,DIVIDER_STYLE_OPTIONS as E,parseDividerSpacing as _}from"../../../../../../format/lib/sections/divider-style.js";import{withRowRules as S}from"../../../../../../render/lib/document/show-when.js";const P={any:[{field:"style",set:!1},{field:"style",is:s}]},R={not:{field:"style",is:"none"}},v={fields:S({style:g("Style",e(d,{}),E,s),spacing:{...f({type:"custom",render:()=>e(m,{})},"always"),reachedBy:"sectionPaddingTop"},thickness:i("Thickness",e(c,{}),1,8,1,1,"px"),lengthPct:i("Length",e(p,{}),10,100,1,100,"%"),hideOnMobile:a("mobile",y("Hide",!1,e(r,{})))},[[["thickness"],P],[["lengthPct"],R]]),resolveFields:(t,{fields:n})=>{const o=D[_(t.props.spacing)],l=I({fallback:{top:o,bottom:o}});return h(n,l)}};export{v as DividerFields};