efficient-web-builder 44.0.1 → 45.0.0

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

@@ -110,7 +110,8 @@
 /* The site's name sits in the shell's Tooltip (harness UI-24), which carries
    the whole name and where to change it. Its wrapper is block-level and gives
    way like the name did, so the name still ellipsises inside it rather than
-   the wrapper's inline box ending the ellipsis. */
+   the wrapper's inline box ending the ellipsis. The one such wrapper: the
+   Coordinates result line (lib/document/controls CoordsField) takes it too. */
 .sf-name-tip {
   position: relative;
   display: block;
@@ -802,6 +803,21 @@
   flex: 1;
   overflow-y: auto;
   scrollbar-gutter: stable;
+  /* THE STANDARD THIN SCROLLBAR, NOT A FORCED ONE (Lewis 2026-10-28, section
+     panel rule plan §3 1f, option 1). A sized `::-webkit-scrollbar` here forced
+     a CLASSIC lane, also on a Mac, and the gutter above held it whether or not
+     anything scrolled: the lane sits outside the padding box, where content is
+     clipped, so the full-bleed group band stopped 8px short of the panel edge.
+     With the standard properties Chrome ignores every `::-webkit-scrollbar`
+     rule on this body (easel's 11px `.sf-scroll` one too), and an OVERLAY
+     system scrollbar (a Mac on its default setting) takes no lane: the band
+     reaches the edge and the strip keeps one width. Where the system scrollbar
+     takes space (Windows, "always show"), the gutter still holds a thin lane so
+     the strip never moves (`scripts/test-panel-strip-width-stable.ts`); an
+     overlay there needs a shell scroll area (a follow-up for the shell). The
+     thumb is easel's `--sf-scrollbar`, on a clear track. */
+  scrollbar-width: thin;
+  scrollbar-color: var(--sf-scrollbar) transparent;
   /* THE SIDE PADDING, ONCE. It was the literal `14px` below and a second
      literal `8px` in the container query further down, and the module rule this
      card adds needed a THIRD copy to cancel it — which is exactly how that rule
@@ -814,16 +830,11 @@
      This sheet keeps no alias of its own; the rules below that reach the
      panel's edge read easel's token. */
   padding-block: var(--space-4) var(--space-20);
-  /* THE RIGHT INSET COUNTS THE SCROLLBAR'S LANE (2026-10-20). The gutter above
-     is held whether or not the scrollbar is drawn, so the rows' right side was
-     the inset PLUS the lane: 16 + 11 at a 320px panel, against 16 on the left
-     and 16 in the head. Now the lane is part of the inset: the end padding is
-     the inset less the lane, so both sides and the head read one number — 16,
-     and 12 under a 260px panel. The lane is 8px for that reason: the narrow
-     inset must hold all of it (`@supports` below). A browser that draws its
-     own scrollbar (Firefox) keeps a 0px lane here and the full inset. */
-  --sf-insp-bar-w: 0px;
-  --es-insp-pad-end: calc(var(--es-insp-pad-x) - var(--sf-insp-bar-w));
+  /* THE RIGHT INSET IS THE INSET (2026-10-28). From 2026-10-20 it was the inset
+     less a forced 8px lane; with an overlay scrollbar there is no lane, so the
+     end padding is the same 16 (12 under a 260px panel) as the left and the
+     head. The band reads this token to cancel exactly it. */
+  --es-insp-pad-end: var(--es-insp-pad-x);
   padding-inline-end: var(--es-insp-pad-end);
 
   /* THE DROPDOWN ARROW, WRITTEN ONCE — card 66399.c.
@@ -898,16 +909,6 @@
 /* The narrow inset (12px under a 260px panel) is easel's, on the side panel
    (`--es-insp-pad-x`, 14.1.0); every reader here narrows with it. */
 
-/* The lane the right inset counts (see `.sf-insp-body`): the body's own
-   scrollbar, 8px where this sheet can size it. easel's `.sf-scroll` draws 11px,
-   which the 8px narrow inset could not hold. The thumb keeps its transparent
-   frame, 2px a side instead of 3. */
-@supports selector(::-webkit-scrollbar) {
-  .sf-insp-body { --sf-insp-bar-w: var(--space-8); }
-  .sf-insp-body::-webkit-scrollbar { width: var(--sf-insp-bar-w); }
-  .sf-insp-body::-webkit-scrollbar-thumb { border-width: var(--space-2); }
-}
-
 /* 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
@@ -1058,7 +1059,7 @@
    what this looks like is his call, not a later card's.
 
    RULE ZERO, ONE GRAMMAR: `--sf-hover` is already what `.sf-row`, `.sf-chooser`,
-   `.sf-rung`, `.sf-seg2 button` and the shell's own `.es-drill` do on hover. The
+   `.sf-seg2 button` and the shell's own `.es-drill` do on hover. The
    dropdowns join that vocabulary instead of inventing a fifth one — which is
    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.
@@ -1123,7 +1124,6 @@
   box-shadow: 0 0 0 3px var(--sf-accent-ring);
 }
 .sf-multi-caret {
-  font-size: var(--text-2xs);
   color: var(--sf-text-secondary);
   flex: none;
 }
@@ -1343,8 +1343,7 @@
   background: var(--sf-accent-ring);
   font-weight: 600;
 }
-.sf-secttheme-item:focus-visible,
-.sf-secttheme-done:focus-visible {
+.sf-secttheme-item:focus-visible {
   outline: 2px solid var(--sf-accent);
   outline-offset: -2px;
   border-radius: var(--radius-sm);
@@ -1371,15 +1370,9 @@
   font-weight: 600;
   color: var(--sf-field-text);
 }
+/* The shell's `Button` (harness UI-24); placement only. */
 .sf-secttheme-done {
   margin-left: auto;
-  padding: 2px 4px;
-  border: 0;
-  background: transparent;
-  color: var(--sf-text-secondary);
-  font-size: var(--text-2xs);
-  font-family: var(--sf-font);
-  cursor: pointer;
 }
 /* ⚠️ THE SHEET'S FIVE COLOUR ROWS ARE `ThemeColourRow` SINCE CARD 66503 — the
    shell's `SettingsField` wearing the shop's picker, the same row the Site
@@ -1903,19 +1896,6 @@
   white-space: nowrap;
 }
 
-/* The Position boxes with no row of their own (the Hero Box, Lewis 2026-10-21):
-   the two boxes, then the shared ↺ reset at the end of the same line — the
-   band above already names them, so there is no label row to hold the reset. */
-.sf-position-line {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.sf-position-line > :first-child {
-  flex: 1;
-  min-width: 0;
-}
-
 /* Text field with a visibility eye: leading type glyph · label · trailing eye.
    The eye flips a stored `hidden` flag that drops the element from the slide
    render — see controls.tsx. The input stays editable (dimmed) while hidden. */
@@ -1932,26 +1912,6 @@
   min-width: 0;
   margin-bottom: 0;
 }
-.sf-field-eye {
-  flex: none;
-  width: 22px;
-  height: 22px;
-  border: none;
-  background: transparent;
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  color: var(--sf-muted);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 0.6;
-  transition: background 0.12s, color 0.12s, opacity 0.12s;
-}
-.sf-field-eye:hover {
-  background: var(--sf-hover);
-  opacity: 1;
-  color: var(--sf-text-secondary);
-}
 /* Hidden: the element is dropped from the slide, but the input stays so the copy
    is preserved and editable. Strike the label + dim the input + light the eye —
    mirroring the section tree's hidden-row cue. */
@@ -1959,10 +1919,6 @@
   color: var(--sf-muted);
   text-decoration: line-through;
 }
-.es-field.is-hidden .sf-field-eye {
-  opacity: 1;
-  color: var(--sf-text-secondary);
-}
 .es-field.is-hidden input,
 .es-field.is-hidden textarea {
   opacity: 0.5;
@@ -2066,18 +2022,7 @@
   align-items: center;
   gap: var(--space-12);
 }
-.sf-swatch {
-  width: 26px;
-  height: 26px;
-  border-radius: var(--radius-lg);
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  box-shadow: inset 0 0 0 1px var(--line-strong);
-}
-.sf-swatch.is-active {
-  box-shadow: 0 0 0 2px var(--sf-panel), 0 0 0 4px var(--sf-accent);
-}
+/* Each swatch is the shell's `ColorSwatch` (harness UI-24). */
 .sf-swatch-hex {
   font-size: var(--text-2xs);
   color: var(--sf-muted);
@@ -2244,59 +2189,21 @@
   background: var(--sf-hover);
 }
 
-/* The choice rungs: two or three buttons in a row, one of them held down.
-
-   ⏳ LEAVING. Every pick-one row draws efficient-easel's SettingsSegmented since
-   [MERGE] One Pick-One Control (2026-10-06); no row draws this strip of its own
-   any more (W1b-1, 2026-10-16, retired TextStylesField; the Accent row's B · I
-   are the shell's IconButton, laid out in a `.sf-rungs` row), and `.sf-rung`
-   alone is the hints switch's base. `test-segmented-controls` §8 stops a new strip. Delete
-   these rules when the last of those two moves.
-
-   `--sf-disabled` on the pressed border is not a disabled state -- it is the one
-   token on the gray ramp that lands where `zinc-400` did, a mid-grey a step
-   darker than a field border. */
-.sf-rungs {
-  display: flex;
-  width: 100%;
-  gap: 4px;
-}
-.sf-rung {
-  flex: 1;
-  padding: 4px 8px;
-  border: 1px solid var(--sf-input-border);
-  border-radius: var(--sf-field-radius);
-  background: var(--sf-field-bg);
-  color: var(--sf-text-secondary);
-  font-size: var(--text-xs);
-  cursor: pointer;
-}
-.sf-rung:hover:not(.is-active) {
-  background: var(--sf-hover);
-}
-.sf-rung.is-active {
-  border-color: var(--sf-disabled);
-  background: var(--sf-chip-bg);
-  color: var(--sf-text);
-  font-weight: 600;
-}
-/* The Card shadow miniature: a tiny card showing the shadow each option casts,
-   drawn in the package's segmented-control glyph slot beside the word (it was
-   `.sf-rung-chip` in the hand-built `.sf-rung--inline` strip until [MERGE] One
-   Pick-One Control, 2026-10-06). Its shadow is set inline, per option, because
-   that IS what the option is showing.
+/* The Card shadow miniature: a tiny card showing the shadow each option casts, drawn as the glyph of each
+   cell of the shell's IconPicker (it was in a segmented strip's glyph slot, and before that the hand-built
+   `.sf-rung--inline` strip). Its shadow is set inline, per option, because that IS what the option is showing.
+   Its border and fill are the shell's tokens, written as classes on the element (`border-line bg-surface`),
+   NOT this sheet's `--sf-*` variables: the picker's popup is drawn outside the editor, where those variables
+   are not defined, and the "None" cell turned blank.
 
-   16px wide to sit inside the slot (`--es-chip-icon`). Small, but it only has
-   to answer "none, a little, or a lot", and the 1px border keeps all three
-   legible at this size. */
+   16px wide to sit in a cell. Small, but it only has to answer "none, a little, or a lot", and the 1px
+   border keeps all three legible at this size. */
 .sf-shadow-chip {
   display: block;
   flex: none;
   box-sizing: border-box;
   width: 16px;
   height: 11px;
-  border: 1px solid var(--sf-disabled);
-  background: var(--sf-field-bg);
 }
 
 /* The one control that folds the Basics tab's five explanations (card 66177).
@@ -2307,19 +2214,6 @@
   display: flex;
   margin-top: var(--space-32);
 }
-/* A rung that is not part of a strip: it sizes to its own word rather than
-   sharing a row, so the `flex: 1` every rung takes has to come back off. */
-.sf-hints-toggle {
-  display: inline-flex;
-  flex: none;
-  align-items: center;
-  gap: var(--space-8);
-  color: var(--sf-muted);
-}
-.sf-hints-toggle svg {
-  flex: none;
-}
-
 /* A heading INSIDE one control, below the row's own label: "Dark surfaces",
    "Light surfaces". Deliberately not `.sf-field-group`, which heads a group of
    settings -- these head a group of colours inside ONE setting. */
@@ -2523,33 +2417,6 @@
   font-size: var(--text-xs);
   cursor: pointer;
 }
-/* A rung showing a LETTERFORM rather than a word -- the B and the I. It is the
-   letter's own shape that carries the meaning, so it is sized to be read as a
-   glyph and it keeps its accessible name in `aria-label`. */
-.sf-rung--glyph {
-  flex: 0 0 34px;
-  font-size: var(--text-sm);
-  line-height: 18px;
-  text-align: center;
-}
-.sf-rung--glyph:disabled {
-  color: var(--sf-disabled);
-  cursor: not-allowed;
-}
-.sf-rung--glyph:disabled:hover {
-  background: var(--sf-field-bg);
-}
-/* The B and the I each sit in the shell's Tooltip (harness UI-24), whose
-   wrapper is the strip's flex item now: it takes the glyph's 34px and the
-   rung fills it. */
-.sf-rung-tip {
-  position: relative;
-  display: inline-flex;
-  flex: 0 0 34px;
-}
-.sf-rung-tip .sf-rung--glyph {
-  flex: 1;
-}
 /* A DISABLED BUTTON GETS NO HOVER AND NO FOCUS, so a reason written on it is
    never shown. The reason sits on a focusable wrapper instead, and the button
    lets the pointer through to it. Used wherever a disabled control explains
@@ -2557,9 +2424,6 @@
 .sf-tip-disabled {
   display: inline-flex;
 }
-.sf-rung-tip > .sf-tip-disabled {
-  flex: 1;
-}
 .sf-tip-disabled > button:disabled {
   pointer-events: none;
 }
@@ -2736,21 +2600,10 @@
   margin-top: var(--es-rhythm-between-tight);
 }
 
+/* The shell's secondary `Button` (harness UI-24); placement only. */
 .sf-theme-add {
-  display: flex;
-  align-items: center;
-  gap: var(--space-8);
-  margin-top: 8px;
-  border: 0;
-  background: none;
-  font: inherit;
-  font-size: var(--text-xs);
-  font-weight: 600;
-  color: var(--sf-accent-text);
-  padding: 4px 0;
-  cursor: pointer;
+  margin-top: var(--space-8);
 }
-.sf-theme-add:hover { text-decoration: underline; }
 
 /* `.sf-ink-row` / `.sf-ink-hex` RETIRED — the second colour control.
    It drew Page settings' Background, the five rows a theme carries and Theme
@@ -2865,22 +2718,9 @@
   gap: var(--space-8);
   margin-top: 8px;
 }
+/* The shell's secondary `Button`, medium (32) (harness UI-24); the ratios line up. */
 .sf-readability-suggestion {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-8);
-  height: 26px;
-  padding: 0 var(--space-12);
-  border: 1px solid var(--sf-input-border);
-  border-radius: var(--sf-field-radius);
-  background: var(--sf-field-bg);
-  color: var(--sf-btn-text);
-  font-size: var(--text-2xs);
   font-variant-numeric: tabular-nums;
-  cursor: pointer;
-}
-.sf-readability-suggestion:hover {
-  background: var(--sf-hover);
 }
 .sf-readability-chip {
   width: 9px;
@@ -2898,55 +2738,11 @@
    being the darkest in the row on a grey track (66138 / 66302), and its suite
    bans the tint token package-wide, so the retired look could not travel. */
 
-/* Slider */
-.sf-slider {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-/* …AND IT TAKES THE WHOLE ROW WHEREVER THE SHELL STACKS IT (card 66247, owner
-   2026-08-31: the slider fills the row).
-
-   `efficient-easel`'s `SettingsField` puts a control on its own line for one stated
-   reason — its own comment, `src/panel/SettingsField.tsx`: "The row is stacked
-   rather than side-by-side so the control gets the panel's full width — a 308px
-   panel cannot afford a label column AND a usable slider." The slot it stacks
-   into is `.es-field-ctl`, and that slot is `display: flex`.
-
-   A block-level `.sf-slider` fills its parent, which is why the sliders in this
-   panel's OWN `.sf-field` rows always looked right. As a flex ITEM it does not:
-   with no `flex` and no `width` it is `flex: 0 1 auto` and sizes to its content,
-   a bare `input[type=range]` — 129px in Chromium, and 129px whatever the panel
-   is dragged to. Measured before this rule existed (scripts/harness/part-slider-width.tsx):
-
-       panel 220 (MIN_PANEL_W)   field content 192   track 129   67% of the row
-       panel 320 (the default)   field content 280   track 129   46% of the row
-       panel 560 (MAX_PANEL_W)   field content 520   track 129   25% of the row
-
-   So the slot fills the row and the track inside it did not, and the wider a
-   merchant dragged the panel the smaller a fraction of it the control took.
-
-   `flex: 1`, not `width: 100%`, and that is the same call the rule ten lines
-   below already made for the range input inside this box: a percentage width is
-   right only while the slider is alone in the slot, and would overflow the row
-   the day a second thing joined it. Written against `.es-field-ctl` rather than
-   against this panel or that one, because the promise being kept is the SHELL's
-   and every row it stacks is owed it — `PartSettingsPanel`'s Size / Line
-   spacing / Letter spacing and the Site styles Content number are the four this
-   reaches today. Guarded by `scripts/test-part-slider-fills-row.ts`. */
-.es-field-ctl > .sf-slider {
-  flex: 1;
-  min-width: 0;
-}
-/* The track and the typed number are efficient-shell's `Slider` (harness
-   UI-24); until it had one, this sheet drew a 4px rail and a ringed thumb on a
-   native range here, and a readout that was pressed to type into (card
-   66275). The shell's control does both, so those rules went with them. Its
-   box fills `.sf-slider` like the input did. */
-.sf-slider > .sf-slider-track {
-  flex: 1;
-  min-width: 0;
-}
+/* Slider. The box the shell's `Slider` sits in (`.sf-slider`), and the rule that
+   lets it fill the row `SettingsField` stacks it into (card 66247), are
+   efficient-easel's since 24.0.0 (`screen.css`), with the Box rows that draw it
+   (Banner PR 2, 2026-10-28). The notch below stays: it is the website's.
+   Guarded by `scripts/test-part-slider-fills-row.ts`. */
 /* THE NOTCH — where the style is, on a track that overrides it (card 66116).
    Drag away from it to override; land on it and the override is cleared, so the
    way back is on the control the merchant is already holding.
@@ -3045,9 +2841,6 @@
    than per-control. (The top bar's buttons are the shell's `Button` since
    efficient-easel 1.0 and ring themselves.) */
 .sf-seg2 button:focus-visible,
-.sf-readability-suggestion:focus-visible,
-.sf-swatch:focus-visible,
-.sf-field-eye:focus-visible,
 .sf-insp-body select:focus-visible {
   outline: 2px solid var(--sf-accent);
   outline-offset: 2px;
@@ -3248,6 +3041,13 @@ input.sf-list-marking {
 .sf-blogsource-status[data-state="error"] {
   color: var(--sf-danger);
 }
+/* SourceStatus compact: the status words and their text links (Refresh now, and
+   the edit action where there is one) on ONE line. The links keep the shell's
+   look; this only lets them sit inside the sentence. */
+.sf-blogsource-link {
+  display: inline;
+  vertical-align: baseline;
+}
 /* The "Open" control inside a source note — the route the sentence names.
    [ADD] Source Note Opens The Record, 2026-09-06.
 
@@ -3260,23 +3060,6 @@ input.sf-list-marking {
    It is a real <button> and not an <a>: the editor is embedded and reaches the
    admin over postMessage, so there is no href to give. Styled as a link because
    that is what it does, named as a button because that is what it is. */
-.sf-source-open {
-  display: inline;
-  padding: 0;
-  border: 0;
-  background: none;
-  font: inherit;
-  color: var(--sf-accent-text);
-  text-decoration: underline;
-  text-underline-offset: 2px;
-  cursor: pointer;
-}
-.sf-source-open:hover { color: var(--sf-accent); }
-.sf-source-open:focus-visible {
-  outline: 2px solid var(--sf-accent);
-  outline-offset: 2px;
-  border-radius: calc(var(--radius-sm) / 2);
-}
 
 /* Form picker — the "which form does this section show" control. Reuses the
    blog-source card for its frame, buttons and hint, and adds the read-only
@@ -3749,47 +3532,6 @@ input.sf-list-marking {
   gap: var(--space-8);
 }
 
-/* The override mark, half two — and it IS the reset button, which is why it is
-   a real <button> with a name and not a painted dot. The dot shrinks away under
-   the pointer and the reset arrow takes its place, so the affordance is
-   discovered by hovering the only new thing on the row. */
-.sf-part-mark {
-  width: 18px;
-  height: 18px;
-  flex: none;
-  display: grid;
-  place-items: center;
-  padding: 0;
-  border: 0;
-  border-radius: 50%;
-  background: none;
-  color: var(--sf-accent);
-  cursor: pointer;
-}
-.sf-part-mark-dot {
-  transform-origin: center;
-  transition: transform 0.15s ease, opacity 0.15s ease;
-}
-.sf-part-mark-arrow {
-  opacity: 0;
-  transition: opacity 0.15s ease;
-}
-.sf-part-mark:hover .sf-part-mark-dot,
-.sf-part-mark:focus-visible .sf-part-mark-dot {
-  transform: scale(0);
-  opacity: 0;
-}
-.sf-part-mark:hover .sf-part-mark-arrow,
-.sf-part-mark:focus-visible .sf-part-mark-arrow {
-  opacity: 1;
-}
-@media (prefers-reduced-motion: reduce) {
-  .sf-part-mark-dot,
-  .sf-part-mark-arrow {
-    transition: none;
-  }
-}
-
 /* The copy box at the TOP of the drill (card 8819). Clicking a word drills
    straight to its editor, so the box is the first thing on the part screen —
    right under the way back, above the style it follows. It is the plain copy box
@@ -3873,31 +3615,6 @@ input.sf-list-marking {
    THE STRIP FILLS BY TILE WIDTH, NOT BY A COLUMN COUNT. `auto-fill` with a 58px
    minimum gives four across the 320px panel and three at the 220px minimum, so
    nothing is cut off and nothing scrolls sideways at either width. */
-.sf-gallery-filter {
-  display: flex;
-  gap: var(--space-8);
-  flex-wrap: wrap;
-}
-.sf-gallery-filter button {
-  border: 1px solid var(--sf-input-border);
-  background: var(--sf-field-bg);
-  border-radius: 999px;
-  padding: var(--space-4) var(--space-12);
-  font-size: var(--text-xs);
-  font-weight: 600;
-  color: var(--sf-icon);
-  cursor: pointer;
-  transition: background 0.12s, color 0.12s, border-color 0.12s;
-}
-.sf-gallery-filter button:hover {
-  background: var(--sf-hover);
-}
-.sf-gallery-filter button[aria-pressed="true"] {
-  background: var(--sf-accent);
-  border-color: var(--sf-accent);
-  color: var(--sf-on-accent);
-}
-
 /* The strip itself — the grid, the tiles, the chosen tile's edge and ring, each
    tile's hover name — is efficient-shell's `PictureTiles` (one copy since the
    header's country picker became its third row). What stays here is where the
@@ -3926,27 +3643,12 @@ input.sf-list-marking {
    or a second control beside the strip. `min-width: 0` because a flex item's
    automatic minimum is its content size, which is what stops it shrinking.
 
-   ⚠️ BOTH GALLERY CONTROLS ARE NAMED, and the second one is why this is a rule
-   and not a patch. `.sf-gallery-filter` — the `Photos in a row` chips — is the
-   same shape, and it did NOT look broken: measured 291px before and 185px after
-   at a 320px panel, with the row a pixel and a half SHORTER, because the chips
-   simply stopped stretching. Nothing wrapped at the two widths that were
-   measured, so every height check passed. What it had was a smaller box to wrap
-   inside at any width nobody happened to measure.
-
-   ⚠️ SO THIS IS A DEFECT A HEIGHT RULE CANNOT CATCH, AND THAT IS THE POINT.
-   The card that made this change stops at a row moving more than about 6px
-   (GG, 2026-09-22). This row moved 1.5px, in the RIGHT direction, and was
-   wrong. Measuring how tall a row stands cannot see a control that quietly
-   stopped filling it — only asking the width can, which is why
-   `scripts/probe-settings-rows-shared.mjs` now asks it of every row on both
-   sides, and why that question found both of these on its first run.
-
-   A rule that fixed the strip and left the chips would be a trap wearing a fix
-   — which is exactly what the shell says about naming both of its own `-fit`
-   wrappers. This is the FOURTH instance of this collapse in this repo:
-   `.sf-slider` carries the same two lines from card 66247, and the shell
-   carries them for `.es-tabs-fit` and `.es-segs-fit`.
+   The `Photos in a row` chips were the second control on this list until they
+   became the shared `SettingsSegmented`, whose own `.es-segs-fit` carries the
+   same two lines; they now sit inside the Gallery Layout popup, and only the
+   Block widths strip still uses this selector. Measuring how tall a row stands
+   cannot see a control that quietly stopped filling it — only asking the width
+   can, which is what `scripts/probe-settings-rows-shared.mjs` does.
 
    `.sf-linkstack` was on this list until the link field became the shared
    picker ([MERGE] One Link Picker For Both Editors): its stack is now the
@@ -3954,8 +3656,7 @@ input.sf-list-marking {
    Every consumer control that is a flex or grid box written for a block row
    belongs on this selector; the day one is fixed somewhere else instead, the
    list stops being the place to look. */
-.es-field-ctl > .sf-gallery-layouts,
-.es-field-ctl > .sf-gallery-filter {
+.es-field-ctl > .sf-gallery-layouts {
   flex: 1 1 auto;
   min-width: 0;
 }
@@ -3980,11 +3681,41 @@ input.sf-list-marking {
   background: var(--sf-accent);
 }
 
-/* How many the filter left. Without it an empty-looking strip is a mystery. */
-.sf-gallery-count {
+/* The Entrance kinds (lib/animation/entrance-fields): the shell's IconPicker, three
+   across. Each picture is the approved drawing of its kind, and it plays that kind
+   when the mouse rests on its cell, by the page's engine and keyframes
+   (efficient-shell/motion.css). The word under a drawing shows in the popup only;
+   the closed button names the kind beside it, so there it is hidden (the closed
+   button is inside the panel's control slot, the popup is not). */
+.sf-entrance-pic {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+}
+.sf-entrance-stage {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  overflow: hidden;
+}
+.sf-entrance-stage > i {
+  display: block;
+  line-height: 0;
+}
+.sf-entrance-cap {
   font-size: var(--text-2xs);
-  color: var(--sf-disabled);
-  margin-top: var(--space-8);
+  line-height: 1;
+}
+.es-field-ctl .sf-entrance-cap {
+  display: none;
+}
+.es-field-ctl .sf-entrance-stage {
+  width: auto;
+  height: auto;
+  overflow: visible;
 }
 
 /* ── Side panel heads (components/SidePanelHead) ─────────────────────────

package/dist/editor/components/useHostDocumentBridge.js

@@ -1 +1 @@
-"use client";import{useEffect as b,useMemo as w,useRef as k}from"react";import{useEasel as O}from"efficient-easel/easel";import{useEaselHost as B}from"efficient-easel/screen/lib/host";import{applyPageEdits as D,describeBlocks as H,describeSelection as J}from"../../format/lib/host-document-bridge.js";import{nonEmptyString as N}from"../../format/lib/non-empty-string.js";const p=t=>N(t.requestId)??null;function $(){const t=B(),{appState:n,selectedItem:I,dispatch:l,history:f,config:S}=O(s=>s),i=S,g=k({appState:n,dispatch:l,history:f,blockConfig:i});g.current={appState:n,dispatch:l,history:f,blockConfig:i};const c=k(new Map),h=I?.props?.id,a=w(()=>J(i,n.data,h),[i,n.data,h]),q=a?JSON.stringify(a):"";b(()=>{t.connected&&t.send("storefront-editor:selection",{selection:a})},[t,q]),b(()=>t.subscribe(s=>{const{appState:d,dispatch:y,history:u,blockConfig:m}=g.current;switch(s.type){case"storefront-editor:request-document":{const e=p(s);if(!e)return;t.send("storefront-editor:document",{requestId:e,document:d.data,blocks:H(m)});return}case"storefront-editor:apply-page-edits":{const e=p(s);if(!e)return;const r=Array.isArray(s.ops)?s.ops:[],o=r.length?D(m,d.data,r,E=>`${E}-${crypto.randomUUID()}`):{ok:!1,reason:"no changes"};o.ok&&(y({type:"setData",data:o.document,recordHistory:!0}),c.current.set(e,JSON.stringify(o.document.content??[]))),t.send("storefront-editor:page-edits-result",{requestId:e,applied:o.ok,reason:o.ok?null:o.reason});return}case"storefront-editor:undo-page-edits":{const e=p(s);if(!e)return;const r=c.current.get(e),o=r!==void 0&&r===JSON.stringify(d.data.content??[]);o&&u.hasPast&&(u.back(),c.current.delete(e)),t.send("storefront-editor:page-edits-result",{requestId:e,applied:o&&u.hasPast,reason:o?null:"the page has changed since"});return}case"storefront-editor:set-right-panel":typeof s.shown=="boolean"&&y({type:"setUi",ui:{rightSideBarVisible:s.shown}});return;default:return}}),[t])}export{$ as useHostDocumentBridge};
+"use client";import{useEffect as b,useMemo as w,useRef as k}from"react";import{useEasel as O}from"efficient-easel/easel";import{useEaselHost as B}from"efficient-easel/screen/lib/host";import{applyPageEdits as D,describeBlocks as H,describeSelection as J}from"../lib/host-document-bridge.js";import{nonEmptyString as N}from"../../format/lib/non-empty-string.js";const p=t=>N(t.requestId)??null;function $(){const t=B(),{appState:n,selectedItem:I,dispatch:l,history:f,config:S}=O(s=>s),i=S,g=k({appState:n,dispatch:l,history:f,blockConfig:i});g.current={appState:n,dispatch:l,history:f,blockConfig:i};const c=k(new Map),h=I?.props?.id,a=w(()=>J(i,n.data,h),[i,n.data,h]),q=a?JSON.stringify(a):"";b(()=>{t.connected&&t.send("storefront-editor:selection",{selection:a})},[t,q]),b(()=>t.subscribe(s=>{const{appState:d,dispatch:y,history:u,blockConfig:m}=g.current;switch(s.type){case"storefront-editor:request-document":{const e=p(s);if(!e)return;t.send("storefront-editor:document",{requestId:e,document:d.data,blocks:H(m)});return}case"storefront-editor:apply-page-edits":{const e=p(s);if(!e)return;const r=Array.isArray(s.ops)?s.ops:[],o=r.length?D(m,d.data,r,E=>`${E}-${crypto.randomUUID()}`):{ok:!1,reason:"no changes"};o.ok&&(y({type:"setData",data:o.document,recordHistory:!0}),c.current.set(e,JSON.stringify(o.document.content??[]))),t.send("storefront-editor:page-edits-result",{requestId:e,applied:o.ok,reason:o.ok?null:o.reason});return}case"storefront-editor:undo-page-edits":{const e=p(s);if(!e)return;const r=c.current.get(e),o=r!==void 0&&r===JSON.stringify(d.data.content??[]);o&&u.hasPast&&(u.back(),c.current.delete(e)),t.send("storefront-editor:page-edits-result",{requestId:e,applied:o&&u.hasPast,reason:o?null:"the page has changed since"});return}case"storefront-editor:set-right-panel":typeof s.shown=="boolean"&&y({type:"setUi",ui:{rightSideBarVisible:s.shown}});return;default:return}}),[t])}export{$ as useHostDocumentBridge};