efficient-web-builder 1.0.0 → 2.1.0

package/dist/components/storefront-editor.css

@@ -48,192 +48,6 @@
   height: 100%;
 }
 
-.sf-editor {
-  /* ── Accent (efficient-shell blue) ───────────────────────────────────── */
-  --sf-accent: var(--es-accent);
-  --sf-accent-tint: var(--es-accent-tint);
-  --sf-accent-tint-strong: var(--es-accent-tint-strong);
-  --sf-accent-text: var(--es-accent-text);
-  --sf-accent-ring: var(--es-accent-ring);
-  --sf-accent-shadow: var(--es-accent-shadow);
-  --sf-on-accent: var(--es-on-accent);
-
-  /* ── Surfaces (cool gray ramp) ──────────────────────────────────────── */
-  --sf-app-bg: var(--es-app-bg);
-  --sf-preview-bg: var(--es-preview-bg);
-  --sf-panel: var(--es-panel);
-  --sf-raised: var(--es-raised);
-  --sf-frame-bg: var(--es-frame-bg);
-  --sf-hover: var(--es-hover);
-  --sf-hatch: var(--es-hatch);
-  --sf-addcard-veil: var(--es-addcard-veil);
-
-  /* ── Fields ─────────────────────────────────────────────────────────── */
-  --sf-field-bg: var(--es-field-bg);
-  --sf-track-bg: var(--es-track-bg);
-  --sf-input-border: var(--es-input-border);
-  --sf-field-text: var(--es-field-text);
-  --sf-field-placeholder: var(--es-field-placeholder);
-  --sf-knob: var(--es-knob);
-
-  /* ── Text ───────────────────────────────────────────────────────────── */
-  --sf-text: var(--es-text);
-  --sf-text-strong: var(--es-text-strong);
-  --sf-text-secondary: var(--es-text-secondary);
-  --sf-muted: var(--es-muted);
-  --sf-icon: var(--es-icon);
-  --sf-disabled: var(--es-disabled);
-
-  /* ── Lines / chips / buttons ────────────────────────────────────────── */
-  --sf-divider: var(--es-divider);
-  --sf-line: var(--es-line);
-  --sf-btn-border: var(--es-btn-border);
-  --sf-btn-text: var(--es-btn-text);
-  --sf-chip-bg: var(--es-chip-bg);
-  --sf-chip-fg: var(--es-chip-fg);
-
-  /* ── Named chrome literals ──────────────────────────────────────────── */
-  --sf-device-border: var(--es-device-border);
-  --sf-toast-bg: var(--es-toast-bg);
-  --sf-scrollbar: var(--es-scrollbar);
-  --sf-scrollbar-hover: var(--es-scrollbar-hover);
-
-  /* ── Danger / warning / success (shell red / amber / green) ─────────── */
-  --sf-danger: var(--es-danger);
-  --sf-danger-strong: var(--es-danger-strong);
-  --sf-danger-tint: var(--es-danger-tint);
-  --sf-warning: var(--es-warning);
-  --sf-preview-tint: var(--es-preview-tint);
-
-  /* ── Radii / shape (tighter, shell-like) ────────────────────────────── */
-  /*
-   * ┌─ FLAT CHROME (card 66161) — these three do NOT alias the shell. ─────────
-   * │
-   * │ The panels used to be floating cards: rounded, drop-shadowed, sitting on
-   * │ the grey app background with a 10px gap between each pair and a 10px frame
-   * │ padding around the lot. The owner asked for lines instead. On a 1280px
-   * │ laptop that gave the website preview 50px back — 576px to 626px — because
-   * │ gaps, corners and shadows hold nothing. No panel got narrower and no
-   * │ vertical measurement changed.
-   * │
-   * │ WHY THESE STOPPED ALIASING, AND EXACTLY WHAT ENDS IT
-   * │
-   * │ The `--sf-*` block exists exactly so the shop can pick its own values off
-   * │ the shared `--es-*` layer. Flat is the SHOP's decision, not the shell's.
-   * │
-   * │ Note the ORIGINAL reason is already gone, so do not go looking for it:
-   * │ when this was written, card 66160 was mid-release on editor-shell and two
-   * │ windows bumping one package version would have collided. That released as
-   * │ `editor-shell@0.13.0` the same day, and the shop still declares `^0.12.0`.
-   * │ The values stayed local anyway, for a reason that has nothing to do with
-   * │ release timing:
-   * │
-   * │   THE OWNER DECIDED FLAT FOR THE STOREFRONT EDITOR ONLY.
-   * │
-   * │ Putting these in the shell's defaults would make the campaign editor flat
-   * │ too, which nobody has asked for. The campaign editor is also still pinned
-   * │ to `editor-shell@0.2.0` and cannot receive shell changes at all until it
-   * │ comes off that pin.
-   * │
-   * │ So this is NOT a half-finished alias block, and it is NOT drift. Do not
-   * │ "fix" these back into `var(--es-…)`.
-   * │
-   * │ IT ENDS WHEN BOTH ARE TRUE:
-   * │   1. the campaign editor comes off its `editor-shell@0.2.0` pin, AND
-   * │   2. the owner decides the campaign editor should go flat as well.
-   * │ Then promote the three values into the shell defaults, delete these three
-   * │ lines, and drop the matching waiver in `scripts/test-inspector-inherit.tsx`
-   * │ in the same change. Either one alone is not enough.
-   * │
-   * │ `scripts/test-editor-flat-chrome.ts` fails if they are re-aliased.
-   * └──────────────────────────────────────────────────────────────────────────
-   */
-  --sf-panel-radius: 0;
-  --sf-row-radius: var(--es-row-radius);
-  --sf-field-radius: var(--es-field-radius);
-  /* The editor "frame" gap: the space between the panels and the preview, and
-     the padding around the whole framed area (top/bottom + outer left/right).
-     One token so the frame tightens in ONE place — .sf-body drives it, and the
-     Add-section picker + section-editor top strip track it.
-     Flat since 66161 (see the note above). It MUST stay a length rather than a
-     bare `0`: it is spent inside calc() below and in the picker's width, and
-     `calc(0 + 46px)` is invalid CSS — the whole declaration would be dropped and
-     the left grip would land at the frame's edge instead of on its seam. */
-  --sf-panel-gap: 0px;
-  /* Side-panel widths ride in as editor-shell's --es-left-w / --es-right-w, set
-     on the editor ROOT by BOTH editors through components/panel-widths.ts (the
-     page chrome per drag; the standalone section editor at the fixed defaults).
-     The literal widths deliberately do NOT live here — see that module. */
-  /* Top-bar height. ONE source for both the chrome that draws it AND the
-     working-area overlay (the Add-section picker) that must clear
-     it to sit inside the frame, not cover it.
-     Storefront-LOCAL geometry: the top bar is this editor's own chrome
-     dimension, not part of the shared token layer. */
-  --sf-topbar-h: 52px;
-  /* There is no `--sf-rail-w`. Card 66198 moved the icon rail into the top bar,
-     where editor-shell's row variant is `width: auto` — the rail is as wide as
-     its buttons, so no element has a width for that token to name. It was NOT
-     set to 0: a 0 would leave every calc() below arithmetically correct while
-     keeping a token still aimed at the content column, so restoring a
-     non-zero value would move it. Deleting it means the
-     next person has to write the term back on purpose.
-
-     Where the content column BEGINS. Now the frame padding and nothing else:
-     the left panel is `.sf-body`'s first in-flow child, so its box starts at the
-     padding edge. Everything drawn against that box — the left resize grip — and
-     every overlay framed in the working area reads this one name.
-
-     Card 66149 is why the name exists: the left grip spent
-     `--sf-panel-gap + --es-left-w` while a rail really was in front of the
-     panel, and landed 56px inside it where no merchant could reach it. This
-     card is the mirror image — the danger now is a pin that keeps PAYING for a
-     rail nobody renders — and the guard is the same, because
-     `scripts/test-editor-rail-in-topbar.ts` evaluates this at probe values with
-     no `--sf-rail-w` in the table at all: a restored rail term throws by name
-     rather than quietly reserving 46px of website.
-
-     Still written as `var(--sf-panel-gap)` and not a bare `0`, for the reason
-     given at that token above: it is spent inside calc() and `calc(0 + 288px)`
-     is invalid CSS — the whole declaration would be dropped and the left grip
-     would land at the frame's edge instead of on its seam. */
-  --sf-content-x: var(--sf-panel-gap);
-  /* Flat since 66161 — see the note at --sf-panel-radius above. */
-  --sf-panel-shadow: none;
-  --sf-font: var(--es-font);
-
-  /* No `--puck-*` names here. Puck read its `--puck-color-azure-*` ramp and
-     `--puck-font-family` from editor-shell's shell.css on this same root, and
-     they were deliberately never re-declared in this file — one blue is the
-     point. Puck and those names left with blueprint 6.1/6.3; the blue is the
-     `--es-*` set in efficient-easel/shell.css. */
-
-  /*
-   * Fill the iframe viewport. `100dvh` resolves against the viewport directly,
-   * so the editor always fills the embedding iframe with no flex/min-height
-   * dependency (percentage heights don't resolve against the app shell's
-   * min-height, which otherwise left a gap below the editor). Mounted inside
-   * another app's window it fills that window instead — `.sf-embedded`, below.
-   */
-  width: 100%;
-  height: 100vh;
-  height: 100dvh;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  position: relative; /* positioning context for the floating add-section modal + toast */
-  background: var(--sf-app-bg);
-  color: var(--sf-text);
-  font-family: var(--sf-font);
-  font-size: 14px;
-  -webkit-font-smoothing: antialiased;
-}
-
-.sf-editor *,
-.sf-editor *::before,
-.sf-editor *::after {
-  box-sizing: border-box;
-}
-
 /* Visually-hidden, screen-reader-only (e.g. the live search-result count). */
 .sf-sr-only {
   position: absolute;
@@ -247,25 +61,6 @@
   white-space: nowrap;
 }
 
-/* Scrollbars inside the editor panels */
-.sf-scroll::-webkit-scrollbar {
-  width: 11px;
-  height: 11px;
-}
-.sf-scroll::-webkit-scrollbar-thumb {
-  background: var(--sf-scrollbar);
-  border-radius: 8px;
-  border: 3px solid transparent;
-  background-clip: content-box;
-}
-.sf-scroll::-webkit-scrollbar-thumb:hover {
-  background: var(--sf-scrollbar-hover);
-  background-clip: content-box;
-}
-.sf-scroll::-webkit-scrollbar-track {
-  background: transparent;
-}
-
 /* ── Top bar ─────────────────────────────────────────────────────────────
    The bar, its clusters, the icon buttons, the divider, the device switch and
    the ghost / primary buttons are editor-shell's (efficient-easel/chrome.css,
@@ -290,69 +85,7 @@
   background: var(--sf-hover);
 }
 
-/* Standalone section editor — a slim top strip carrying the "Preview mode"
-   switch (left) and the autosave pill (right), above the reused sf-body
-   (canvas + inspector). */
-.sf-section-bar {
-  flex: none;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  /* PINNED at 10px by card 66161, which took `--sf-panel-gap` to 0 to flatten
-     the PAGE chrome. This strip belongs to the standalone SECTION editor — a
-     different surface — and the 10px here is real padding holding the
-     "Preview mode" switch and the autosave pill off the window edge, not a gap
-     that existed so a card could float. Following the token to 0 would have
-     changed a surface this card was never about, so it is spelled out instead.
-     Deliberately its own literal rather than a shared "inset" token: one token
-     quietly deciding the padding of a dialog AND a different editor's strip is
-     the coupling that made this a question at all. Whether this strip should go
-     flat too is its own decision, on its own card. */
-  padding: 8px 10px;
-}
-
-/* The save pill (dot, ring, words, the autosave switch around it) is
-   editor-shell's `.es-savestate` (efficient-easel/chrome.css), lifted from this
-   sheet with its card-66103 quiet state and the countdown ring (redesign 2a). */
-
 /* ── Body / floating panels ───────────────────────────────────────────── */
-.sf-body {
-  flex: 1;
-  display: flex;
-  gap: var(--sf-panel-gap);
-  padding: var(--sf-panel-gap);
-  min-height: 0;
-  /* Positioning context for the absolutely-placed resize grips (editor-shell's .es-resizer),
-     which the chrome pins over each panel↔preview seam. */
-  position: relative;
-}
-/* THE SIDE PANELS AND THEIR GRIPS ARE editor-shell's (efficient-easel/chrome.css):
-   `.es-sidepanel` — flush, a hairline on the SEAM side only (card 66161: draw the
-   seams, leave the outer edges alone), the size-container context every
-   `@container` rule in this sheet asks (card 66212) — and `.es-resizer`, pinned
-   over each seam from `--es-left-w` / `--es-right-w`, with the drag's
-   `body.es-col-resizing`. Lifted from this sheet (redesign 2a). The panels keep
-   `.sf-panel` / `.sf-panel--left|right` as well, which is what this sheet's own
-   descendant rules (`.sf-panel--right .sf-insp-body`, …) hang on. */
-.sf-panel-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 13px 14px 11px;
-  flex: none;
-}
-/* A panel's own name. It is an `h2` in the views that own their title
-   (StylesPanel), so the rule states the three properties a heading element
-   would otherwise inherit from the UA sheet — `margin` above all, which is
-   `0.83em 0` on an h2 and would push the whole head open. The `--btn` variant
-   below re-states its own margin and wins by source order. */
-.sf-panel-title {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--sf-text);
-  margin: 0;
-}
 /* The panel's title and, beside it, WHICH SITE it is styling (card 66167).
    `min-width: 0` on both so the name — which is a merchant's own words and can
    be any length — is what gives way when the panel is dragged narrow, rather
@@ -382,31 +115,6 @@
   content: "·";
   margin-right: 6px;
 }
-/* In the standalone section editor the title doubles as the SELECT-ROOT control
-   (clicking the section name selects the section node → its section-level
-   fields), so it renders as a <button>. Reset the UA button chrome back to the
-   heading it replaces, then add row-style hover / selected affordance so it
-   reads as interactive and shows when the root is the active selection. */
-.sf-panel-title--btn {
-  appearance: none;
-  border: 0;
-  background: transparent;
-  font-family: inherit;
-  cursor: pointer;
-  text-align: left;
-  padding: 5px 8px;
-  margin: -5px -8px;
-  border-radius: var(--sf-row-radius);
-  transition: background 0.12s;
-}
-.sf-panel-title--btn:hover {
-  background: var(--sf-hover);
-}
-.sf-panel-title--btn.is-selected {
-  color: var(--sf-accent-text);
-  background: var(--sf-accent-tint);
-  box-shadow: inset 2px 0 0 var(--sf-accent);
-}
 .sf-x {
   width: 24px;
   height: 24px;
@@ -425,51 +133,6 @@
 }
 
 /* ── Left panel: section tree (wraps Puck.Outline) ────────────────────── */
-.sf-tree {
-  flex: 1;
-  overflow-y: auto;
-  /* THE TWO SIDES PAY FOR DIFFERENT THINGS, and they always did.
-       LEFT 8 — the inset a rounded row needs. The reason WAS "a rounded bar
-       cannot bleed to a panel edge"; the bars are gone (One Ladder, 2026-09-04)
-       and the reason survives them unchanged, because every row in the tree is
-       still a rounded control and an inset control is simply a control.
-       RIGHT 11 — this element also carries `.sf-scroll`, and
-       `.sf-scroll::-webkit-scrollbar` is `width: 11px` of REAL, space-taking
-       gutter, not an overlay. This tree scrolls on almost every page. What used
-       to live at the row's right end was the caret; it is the count pill now,
-       and a count sitting under a scrollbar thumb is the same defect wearing a
-       different glyph.
-     Everything inside still starts on the same 11px text column, which is what
-     keeps the words aligned down the panel. */
-  padding: 0 11px 10px 8px;
-
-  /* ── THE TREE'S RHYTHM — the shell's names, the tree's own density ─────────
-     `efficient-easel` 0.19.0 stopped hiding its spacing inside literals and gave
-     each rhythm a name (card 66228, `efficient-easel/panel.css`). The tree reads
-     those names. It does NOT read the panel's VALUES and does not compute them:
-
-       · Copying 28/7 in would be a second source of truth for numbers the shell
-         is already the source of — the one rule that sits above a green suite.
-       · A scale FACTOR off them would be a lie. Lewis picked the tree's two
-         numbers by eye on 2026-08-31 (`mockups/layers-panel-v9-left-only-and-drag.html`
-         and `editor-add-and-context-v1.html`): 10 between bars, 6 between rows.
-         Against the panel that is 10/36 = 0.28 and 6/28 = 0.21 — TWO factors,
-         not one, so there is no single number to scale by. `panel.css` already
-         refuses this shape for the same reason, in its own words: 28 was
-         measured, it is not "10 plus 18".
-
-     So what is shared is the VOCABULARY and the RULE, not the values: `-group`
-     means "a heading, from what is above it" in both panels and `-between`
-     means "one row, from the next" in both, each stated once at its own
-     density. A tree at the panel's 28px a row would scroll forever.
-
-     Declared HERE rather than on `.sf-editor` deliberately — the settings panel
-     is a sibling reading the same names from the shell, and an override at the
-     editor root would re-rhythm IT too. `scripts/test-tree-rhythm-tokens.ts` is
-     the gate. */
-  --es-rhythm-group: 10px;
-  --es-rhythm-between: 6px;
-}
 
 /* EVERY SEAM THE TREE STACKS, and no bare number among them.
    The pairs are spelled out rather than written `> * + *` because the tree
@@ -530,36 +193,6 @@
   color: var(--sf-accent-text);
   font-weight: 600;
 }
-.sf-chip {
-  width: 18px;
-  height: 18px;
-  border-radius: 5px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  flex: none;
-  /* NO GROUND AND NO RULE. Every row carries a glyph now, so a filled tile on
-     each one is 40 tiles down a page — the chip was a way of picking the icon
-     row out of a list that mostly had none, and there is no such list any more.
-     The glyph itself is the mark; `--sf-icon` is the same grey the top bar's
-     icons wear. */
-  background: transparent;
-  color: var(--sf-icon);
-}
-.sf-row-name {
-  flex: 1;
-  /* One size at every depth — the tree's three (11 / 10.5 / 11.5) were a second
-     way of saying the indent already says. 12px/500 is `.es-group-head`'s size
-     at a row's weight, so the tree and the inspector's headings agree on how big
-     a name in this editor is. */
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--sf-text);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
 /* `.sf-add-section` WAS HERE, and it is gone on purpose (card 66228). Lewis
    ruled on 2026-08-31 that ONE `+` in the top bar replaces every other add door
    — the drawing is `editor-add-and-context-v1.html` in the SHARED `mockups/`
@@ -672,119 +305,7 @@
   gap: var(--es-rhythm-between);
 }
 
-/* THE TWO BAR TIERS ARE GONE (One Ladder, 2026-09-04).
-
-   `.sf-row--bar` (a 1px outline, 11px/600) and `.sf-row--bar-nested` (a
-   `color-mix` ground one shade off the panel, 10.5px/600) were how this tree
-   said "a level". Both are deleted, and with them the whole question of which
-   tier a row belongs to.
-
-   THE NESTED BAR IS THE ONE WORTH RECORDING. Its own note said it: at ~2% off
-   white the fill alone disappears on a cheap panel, so it needed a hairline
-   beside the fill to survive. A difference that has to be said twice to be seen
-   once is not carrying its weight — and the indent and the subtree's guide line
-   were already saying the same thing, legibly, for free.
-
-   What replaced them is `.sf-subtree` below: an indent and a 1px rule. Nothing
-   in this tree is told apart by a fill any more except the SELECTED row, which
-   is the one place a fill is not competing with anything. */
-.sf-add-card {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 6px 9px;
-  border: none;
-  background: transparent;
-  border-radius: 8px;
-  cursor: pointer;
-  color: var(--sf-accent);
-  font-size: 12px;
-  font-weight: 500;
-}
-.sf-add-card:hover {
-  background: var(--sf-accent-tint);
-}
-.sf-add-card .sf-plus {
-  width: 18px;
-  height: 18px;
-  border-radius: 5px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 13px;
-  flex: none;
-  background: var(--sf-accent-tint);
-}
-
 /* ── Footer "Add block" menu — heterogeneous block-type picker ──────────── */
-.sf-blockmenu {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-  margin: 2px 0 4px;
-  padding: 4px;
-  border: 1px solid var(--sf-line);
-  border-radius: 8px;
-  background: var(--sf-panel);
-  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
-}
-.sf-blockmenu-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 7px 9px;
-  border: none;
-  background: transparent;
-  border-radius: 6px;
-  cursor: pointer;
-  color: var(--sf-text, var(--sf-text));
-  font-size: 12.5px;
-  text-align: left;
-}
-.sf-blockmenu-item:hover {
-  background: var(--sf-accent-tint);
-  color: var(--sf-accent);
-}
-
-/* A group heading inside that menu — drawn only where a choice list carries
-   groups (a Box's does; the Footer's and the Slide box's do not, and render
-   exactly as before).
-
-   ⚠️ THE SAME TYPE AS `.sf-addgroup-title` BELOW, and deliberately not a second
-   look: that is the heading the Add-section panel puts over every one of its
-   categories, and this menu is the OTHER door a merchant adds something
-   through. One grammar for "these belong together" (rule zero). It is not the
-   same CLASS because the two live in different boxes — a 4px-padded floating
-   menu and a 20px panel column — so only the spacing differs, and it differs
-   because the container does.
-
-   `role="presentation"` on the row: it is a label, not a menuitem, and a
-   keyboard user arrowing through the menu must not land on it. */
-.sf-menugroup-head {
-  display: flex;
-  align-items: baseline;
-  gap: 8px;
-  padding: 9px 9px 5px;
-}
-/* No top padding on the first heading — the menu's own 4px inset already sets
-   it in, and a second inset would leave the first group sitting lower than the
-   rows it names. */
-.sf-menugroup-head:first-child {
-  padding-top: 4px;
-}
-.sf-menugroup-title {
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.07em;
-  text-transform: uppercase;
-  color: var(--sf-muted);
-}
-.sf-menugroup-count {
-  font-size: 11px;
-  color: var(--sf-field-placeholder);
-}
 
 /* ── Add — a mode over the left panel (components/AddSidePanel) ────────────
    Blueprint step 3.7: the floating `.sf-picker` dialog is gone, and Add is the
@@ -792,29 +313,6 @@
    tiles are efficient-easel/drag's `AddPanel` (drag.css); a section is a CARD
    with its cover there (`.es-add-grid.is-cards`). What is the website's alone
    is the panel's inset and the Live chat row under the groups. */
-.sf-addside {
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-  padding: 0 14px 16px;
-}
-/* The hairline round a section's cover — the one the dialog's cards wore
-   (`--sf-thumb-thumb-border`'s value). The cover box is a containing block in
-   the engine itself since efficient-easel 0.80.1: a scene drawn to fill it
-   painted over the whole panel before. */
-.sf-addside .es-add-tile-cover {
-  border: 1px solid #edeff4;
-}
-/* The Media view's body — the HOST's library (lib/editor-media-panel), drawn
-   in whatever the panel leaves under the head. It scrolls itself (its grid
-   keeps its own toolbar pinned), so this box only hands it the height. */
-.sf-media-panel {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
 /* The Live chat bubble: site-wide and not a section, so a switch on a row
    rather than a tile. The name opens its settings; the switch turns it on. */
 .sf-addside-sitewide {
@@ -960,90 +458,6 @@
   }
 }
 
-/* ── The one destructive confirm in the panel (Reset color) ─────────────────
-   [ADD] Reset On Every Site Style. Every other reset on Site styles clears a
-   number or a rung; this one deletes a merchant's authored palettes, so it asks
-   first (owner's ruling 2026-09-05, option B).
-
-   THE COLOURS LIVE HERE RATHER THAN ON THE COMPONENT, and that is the rule
-   rather than a preference. `test-panel-colour-tokens` sweeps `components/` for
-   literals — "a literal there is a private copy of one step of that scale: it
-   does not move when the scale moves". The older `LeaveConfirmDialog` spells its
-   palette in Tailwind literals and predates that sweep; a second dialog copying
-   it would have passed review and failed the gate.
-
-   The destructive button takes the `--sf-danger*` family that already exists,
-   not a red of its own. The radius is the 9px the theme cards and the add-card
-   button already wear, so the dialog reads as the same object as the rest of the
-   panel rather than a new shape. */
-.sf-cleardlg-veil {
-  position: fixed;
-  inset: 0;
-  z-index: 200;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 16px;
-  background: var(--sf-addcard-veil);
-}
-.sf-cleardlg {
-  width: 100%;
-  max-width: 360px;
-  box-sizing: border-box;
-  padding: 20px;
-  border: 1px solid var(--sf-line);
-  border-radius: 9px;
-  background: var(--sf-panel);
-  color: var(--sf-text);
-  box-shadow: 0 20px 50px var(--sf-accent-shadow);
-}
-.sf-cleardlg-title {
-  margin: 0;
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--sf-text);
-}
-.sf-cleardlg-body {
-  margin: 8px 0 0;
-  font-size: 13px;
-  line-height: 1.6;
-  color: var(--sf-muted);
-}
-/* The one line a merchant must not skim. NOT red — the button already carries
-   the danger colour, and a red sentence over a red button is the panel shouting
-   twice. Full-strength ink and a heavier weight instead. */
-.sf-cleardlg-final {
-  margin: 8px 0 0;
-  font-size: 13px;
-  line-height: 1.6;
-  font-weight: 500;
-  color: var(--sf-text);
-}
-.sf-cleardlg-btns {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  margin-top: 18px;
-}
-.sf-cleardlg-btn {
-  font-family: var(--sf-font);
-  font-size: 13px;
-  padding: 7px 14px;
-  border-radius: var(--sf-field-radius);
-  border: 1px solid var(--sf-btn-border);
-  background: var(--sf-panel);
-  color: var(--sf-btn-text);
-  cursor: pointer;
-}
-.sf-cleardlg-btn:hover { background: var(--sf-hover); }
-.sf-cleardlg-btn--danger {
-  font-weight: 600;
-  border-color: var(--sf-danger-strong);
-  background: var(--sf-danger-strong);
-  color: var(--sf-on-accent);
-}
-.sf-cleardlg-btn--danger:hover { filter: brightness(0.94); }
-
 .sf-addcard-overlay {
   position: absolute;
   inset: 0;
@@ -1123,90 +537,7 @@
   font-size: 12.5px;
 }
 
-/* Toast — transient confirmation (e.g. after adding a section) */
-.sf-toast {
-  position: absolute;
-  left: 50%;
-  bottom: 34px;
-  transform: translateX(-50%);
-  z-index: 60;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 11px 17px;
-  border-radius: 11px;
-  background: var(--sf-toast-bg);
-  color: #fff;
-  font-size: 13px;
-  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.3);
-}
-.sf-toast-check {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  background: var(--sf-accent);
-  color: #fff;
-  font-size: 11px;
-  flex: none;
-}
-/* Error variant — same dark pill, red mark instead of the green check. */
-.sf-toast--error .sf-toast-check {
-  background: var(--sf-danger);
-}
-
 /* ── Center: device-framed preview (wraps Puck.Preview) ──────────────── */
-.sf-center {
-  flex: 1;
-  min-width: 0;
-  min-height: 0;
-  background: var(--sf-preview-bg);
-  border-radius: var(--sf-panel-radius);
-  box-shadow: var(--sf-panel-shadow);
-  overflow: hidden;
-  display: flex;
-  /* `safe center`: centre the device sizer when it fits, but fall back to
-     flex-start when a zoom makes it larger than the well, so the near edge
-     stays reachable while the well scrolls (overflow-x set inline per-zoom). */
-  justify-content: safe center;
-  align-items: safe center;
-  /* No inset: the preview frame fills the well so it flows flush with the panels
-     at exactly the --sf-panel-gap frame gap (the flex gap between panel and this
-     well). Any padding here would ADD to that gap. In tablet/mobile the fixed-width
-     device frame still centres, showing the well's tint down its sides. */
-  padding: 0;
-}
-.sf-frame {
-  width: 100%;
-  height: 100%;
-  max-height: 100%;
-  background: var(--sf-frame-bg);
-  /* SQUARE (owner, 2026-10-07: "the website should not have round corners").
-     The desktop frame fills the well edge to edge and meets the toolbar and the
-     panels directly, and those have been flat since 66161 (--sf-panel-radius:
-     0) — so a 10px radius here drew one rounded notch, top-left, where the
-     page meets the chrome, and clipped that corner of the website itself. The
-     tablet and phone frames below are square for the same reason (owner, the
-     same day): their 18px radius read as a device's edge, and it clipped all
-     four corners of the page inside. They are told apart from the well by their
-     width and their outline, not by a corner. */
-  border-radius: 0;
-  overflow: hidden;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 12px 36px rgba(0, 0, 0, 0.1);
-  transition: width 0.25s ease;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-/* Sizer box for the device frame: its layout size is the frame's *painted*
-   (scaled) size, so the .sf-center well centres it when it fits and scrolls it
-   when a zoom makes it larger. The frame inside is scaled from its top-left. */
-.sf-frame-scaler {
-  flex: none;
-  position: relative;
-}
 .sf-frame--tablet,
 .sf-frame--mobile {
   /* device frames don't stretch to full width but still fill height */
@@ -1229,44 +560,6 @@
   outline: 1px solid var(--sf-device-border);
   outline-offset: -1px;
 }
-/* The template editor's faux browser bar (dots · page switcher · URL ·
-   "Preview mode" toggle) is gone: pages switch from the shared left Pages
-   panel, the URL is drawn by the editor WINDOW's title bar (the admin console
-   owns that chrome; card 66159), and Preview mode was removed — the canvas
-   meets the toolbar directly in both modes. */
-.sf-preview-host {
-  flex: 1;
-  min-height: 0;
-  position: relative;
-}
-/* Puck.Preview fills the frame */
-.sf-preview-host > div,
-.sf-preview-host iframe {
-  width: 100% !important;
-  height: 100% !important;
-  border: 0;
-}
-/* …but `height: 100%` only means anything when the host's OWN height is
-   definite, and that depends on which shell mounted it.
-
-   The page editor wraps the host in `.sf-frame` — a column flex the chrome
-   sizes in pixels (`frameStyle`/`scalerStyle` in StorefrontEditorChrome) — so
-   the host's `flex: 1` above resolves against a real number and the rule works.
-
-   The SECTION editor has no device switch, so it drops the host straight into
-   the `.sf-center` well (SectionEditorShell). That well is a ROW flex with
-   `align-items: safe center`: the host is centred on the cross axis instead of
-   stretched, so its height stays `auto`. `height: 100%` then has no definite
-   containing block, the iframe falls back to its intrinsic 150px, and a
-   `100vh`/`h-screen` section inside the frame measures the viewport as 150px —
-   which is how a full-bleed Hero came out as a thin band floating mid-canvas.
-
-   Stretching the host restores a definite height, so the frame's viewport IS
-   the canvas. Scoped to the direct child so the page editor, whose host is a
-   child of `.sf-frame`, is untouched. */
-.sf-center > .sf-preview-host {
-  align-self: stretch;
-}
 
 /* The Cart / Checkout surfaces are previewed in-canvas by rendering the real
    components inside the Puck preview iframe (same-document, no nested `<iframe
@@ -1557,98 +850,6 @@
    interactive; only the slim bands are clickable. On hover a band shows an accent
    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. */
-.sf-preview-gaps {
-  position: absolute;
-  inset: 0;
-  overflow: hidden;
-  pointer-events: none;
-  z-index: 6;
-}
-/* The full-width band only POSITIONS the affordance over a seam — it is itself
-   click-through (pointer-events:none) so it never steals canvas clicks / Puck
-   selection near a section boundary. Only the centred pill is interactive. */
-.sf-preview-gap {
-  position: absolute;
-  left: 0;
-  right: 0;
-  height: 24px;
-  transform: translateY(-50%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  pointer-events: none;
-}
-.sf-preview-gap-line {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 50%;
-  height: 2px;
-  transform: translateY(-50%);
-  background: var(--sf-accent);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.12s;
-}
-/* The only clickable element: a compact "+" chip that is hidden at rest and
-   fades in on hover, expanding to the full "Add section" pill. Keeping it
-   invisible until hovered means the canvas carries no persistent affordance,
-   while the dead zone stays no larger than this small chip (opacity:0 still
-   hit-tests, so the seam remains hoverable). */
-.sf-preview-gap-pill {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  padding: 4px;
-  border-radius: 999px;
-  background: var(--sf-toast-bg);
-  color: #fff;
-  font-family: var(--sf-font);
-  font-size: 12px;
-  font-weight: 500;
-  white-space: nowrap;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
-  opacity: 0;
-  cursor: pointer;
-  pointer-events: auto;
-  transition: opacity 0.12s, padding 0.12s;
-}
-.sf-preview-gap-pill:hover {
-  opacity: 1;
-  padding: 4px 12px 4px 4px;
-}
-.sf-preview-gap-plus {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  background: var(--sf-accent);
-  color: #fff;
-  font-size: 13px;
-  line-height: 1;
-  flex: none;
-}
-/* Label collapsed until hover so the resting chip is just the "+". */
-.sf-preview-gap-label {
-  max-width: 0;
-  margin-left: 0;
-  overflow: hidden;
-  opacity: 0;
-  transition: max-width 0.14s, margin-left 0.14s, opacity 0.12s;
-}
-.sf-preview-gap-pill:hover .sf-preview-gap-label {
-  max-width: 140px;
-  margin-left: 6px;
-  opacity: 1;
-}
-.sf-preview-gap:has(.sf-preview-gap-pill:hover) .sf-preview-gap-line {
-  opacity: 1;
-}
 
 /* ── Right panel: inspector (wraps Puck.Fields) ──────────────────────── */
 /* The head — chip, the panel's name as its h2 (card 66127), the kind line and
@@ -1765,83 +966,6 @@
   }
 }
 
-/* "Duplicate to another page" dropdown — portalled to <body> and pinned under
-   the inspector button (see DuplicateToPageMenu), so it's position:fixed and
-   right-aligned. Shares the floating-menu language of .sf-blockmenu. */
-.sf-dupmenu-backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
-}
-.sf-dupmenu {
-  position: fixed;
-  z-index: 1001;
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-  min-width: 200px;
-  max-width: 280px;
-  max-height: 60vh;
-  overflow: auto;
-  padding: 4px;
-  border: 1px solid var(--sf-line);
-  border-radius: 8px;
-  background: var(--sf-panel);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
-}
-.sf-dupmenu-head {
-  padding: 6px 9px 4px;
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.02em;
-  color: var(--sf-muted);
-}
-.sf-dupmenu-empty {
-  padding: 8px 9px;
-  font-size: 13px;
-  color: var(--sf-muted);
-}
-.sf-dupmenu-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 7px 9px;
-  border: none;
-  background: transparent;
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 13px;
-  text-align: left;
-  color: var(--sf-text);
-}
-.sf-dupmenu-item:hover:not(:disabled) {
-  background: var(--sf-accent-tint);
-  color: var(--sf-accent);
-}
-.sf-dupmenu-item:disabled {
-  cursor: default;
-  opacity: 0.6;
-}
-.sf-dupmenu-name {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-/* Here the note is a word trailing a menu row ("draft", "Copying…"), not a
-   block: no inset of its own, and it takes the ROW's leading rather than the
-   note's, or a draft row would stand 4px taller than a published one and the
-   menu would lose its even rhythm. It stays quiet against the page name beside
-   it by COLOUR, which is the note's own and the whole reason one class can
-   serve both places. Placement only; the note style itself is .sf-note. */
-.sf-dupmenu-item > .sf-note {
-  padding: 0;
-  flex: none;
-  line-height: inherit;
-}
-
 /* Floating-styled form controls for Puck's native fields */
 .sf-insp-body input[type="text"],
 .sf-insp-body input[type="number"],
@@ -2320,15 +1444,6 @@
   color: var(--sf-text-secondary);
 }
 
-.sf-msg {
-  padding: 24px;
-  font-size: 13px;
-  color: var(--sf-icon);
-}
-.sf-msg--error {
-  color: var(--sf-danger);
-}
-
 /* Collapsed-panel state hook (when Puck's UI flags hide a side) */
 .sf-panel--hidden {
   display: none;
@@ -2359,32 +1474,6 @@
                         and put that card back. The rail's surface is the bar's.
 
    Everything left below is colour the row variant does not touch. */
-.sf-editor .es-rail {
-  --es-rail-fg: var(--sf-muted);
-  --es-rail-hover-bg: var(--sf-hover);
-  --es-rail-hover-fg: var(--sf-text);
-  --es-rail-accent: var(--sf-accent);
-  --es-rail-accent-tint: var(--sf-accent-tint);
-}
-
-/* THE RAIL COLUMN (owner, 2026-09-04: "the top control panel and the panel
-   below it" must read as one) — the cluster exactly the left panel's width,
-   carrying its hairline up through the bar, the buttons spread across it (his
-   option A, spread evenly), and the arrow under the open panel's icon — is editor-shell's
-   `.es-cluster--rail` (efficient-easel/chrome.css), lifted from this sheet with its
-   `flex: none` and its clip-path triangle (redesign 2a). ⚠️ `MIN_PANEL_W` 220 is
-   still load-bearing on it: six 34px buttons fill 204 exactly, and a SEVENTH
-   rail button does not fit at 220. `scripts/test-editor-rail-in-topbar.ts`
-   holds that arithmetic. */
-
-/* The "+" is a plain character in a rail button, the way it was a plain
-   character in the toolbar button it replaces — every other "+" affordance in
-   this editor is one (`.sf-gap-plus`, `.sf-addcard-plus`, `.sf-plus`). The rail
-   sizes SVGs and has nothing to say about text, so its one line is here. */
-.sf-rail-plus {
-  font-size: 20px;
-  line-height: 1;
-}
 
 /* ── Left panel: Pages view (Wix-style page list) ───────────────────────── */
 .sf-pages {
@@ -2877,17 +1966,6 @@
   margin-top: 0;
   padding-top: var(--es-rhythm-group-first);
 }
-/* A ONE-LINE row — label and control on the same line — needs less air than a
-   setting that stacks its control under its label. The shell makes the same
-   split with `.es-field.is-inline`; this is that rule, on this panel's own
-   class. */
-.sf-field--row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  margin-top: var(--es-rhythm-between-tight);
-}
 /* 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
@@ -2915,23 +1993,6 @@
 .sf-field-label--inline {
   margin-bottom: 0;
 }
-/* Small caption under a field — e.g. explaining a read-only/system-set value. */
-.sf-field-hint {
-  /* 6px is a RAW NUMBER and it is allow-listed in
-     `scripts/test-panel-spacing-tokens.ts` rather than tokenised, because there
-     is nothing to read: neither sheet names this gap, and `efficient-easel`'s own
-     `.es-field-hint` writes a bare `7px` for it. Inventing an `--es-rhythm-*`
-     for it belongs in that package, not here — a token declared in this file
-     would be the second source the rest of this block exists to remove. */
-  margin-top: 6px;
-  /* A `<p>`'s own bottom margin is the UA's, and `.sf-field` has no padding to
-     stop it collapsing straight out of the field — so a setting that carries a
-     hint stood 11px further from the next one than a setting that does not.
-     Measured at 61px against 50px before this line. */
-  margin-bottom: 0;
-  font-size: 11px;
-  color: var(--sf-muted);
-}
 /* A hint that answers a question you only have WHILE TYPING waits until the box
    is in use (card 8802.g). Which sentence is which — and why one waits and the
    other never does — is decided once, in `hintIsWhileTyping` in
@@ -2941,7 +2002,7 @@
    a repaint on focus drops the browser's text selection, and the formatting bar
    above the box exists to act on that selection.
 
-   SCOPED TO THE MODIFIER, NEVER TO .sf-field-hint ITSELF. The shared caption
+   SCOPED TO THE MODIFIER, NEVER TO .es-field-hint ITSELF. The shared caption
    class also carries the anchor sentence, which is on every section and is the
    only thing that says what the term of art "Anchor name" means. A rule written
    one class wider would take that explanation off all of them at once. */
@@ -2950,41 +2011,34 @@
    control the Basics tab has had since card 66177 — a section's Style tab was
    carrying two- and three-line explanations on rows a merchant has read once.
 
-   ⚠️ `.es-field-hint` ONLY, AND NEVER `.sf-field-hint`. They look identical and
-   they are NOT the same sentence:
-
-     .es-field-hint  editor-shell draws it, from SettingsField's `hint` prop.
-                     This is a ROW'S EXPLANATION — "Follows Site styles ▸ Basics
-                     ▸ Corners until you set a number here." These fold.
-     .sf-field-hint  the SHOP draws it, for what a SettingsField cannot say. Two
-                     things live here and neither may fold: the "Anchor name"
-                     sentence, which is the only place that term of art is
-                     explained, and the source note, which tells a merchant why
-                     clicking a hydrated word gave them no caret — and now
-                     carries the control that opens the record.
-
-   A rule one class wider takes those off every section at once. The sheet
-   already carries this warning at `.sf-field-hint--while-typing`; this is the
-   second rule that had to obey it. */
-.sf-panel--right.sf-hints-folded .es-field-hint {
+   ⚠️ IT FOLDS A ROW'S EXPLANATION, NEVER A STATE. Every quiet line is
+   `.es-field-hint` now, and two kinds must stay on screen: the "Anchor name"
+   sentence, the only place that term of art is explained, and the source note,
+   which tells a merchant why clicking a hydrated word gave them no caret. Both
+   are marked `.sf-hint-keep`, and the rule below leaves them alone. */
+/* ⚠️ AND NEVER A HINT THAT HOLDS `.sf-hint-keep` ([MERGE] One Settings Row And
+   Hint In The Website Editor, 2026-10-06). The shop's own hint classes are
+   gone; every quiet line under a control is `SettingsField`'s `hint`. The few
+   that are a STATE rather than an explanation — loading, empty, why a control
+   is disabled — wrap their words in `components/KeepHint.tsx`, and a line under
+   no row wears `sf-hint-keep` itself; this rule leaves both on screen. `scripts/test-section-hints-fold.ts` holds both. */
+.sf-panel--right.sf-hints-folded .es-field-hint:not(.sf-hint-keep):not(:has(.sf-hint-keep)) {
   display: none;
 }
 
-.sf-field-hint--while-typing {
+.es-field-hint:has(.sf-hint-while-typing) {
   display: none;
 }
-.sf-field:focus-within > .sf-field-hint--while-typing {
+.es-field:focus-within > .es-field-hint:has(.sf-hint-while-typing) {
   display: block;
 }
 
 /* ── Device-aware fields (lib/puck/device-fields.tsx) ─────────────────────────
-   A control that belongs to a device the canvas is not showing paints a
-   zero-size marker instead of itself, and its row (efficient-easel's public
-   `.es-insp-row`, blueprint 4.4) collapses when it holds one, so no gap is left.
-   One declarative rule; the row's own "nothing drawn" case is `:empty`. */
-.es-insp-row:has(> [data-sf-device-hidden]) {
-  display: none !important;
-}
+   The rule that collapses a row holding the device gate's marker
+   (`[data-sf-device-hidden]`) is efficient-easel/screen.css's since 0.103.0:
+   the screen's own gate paints the marker, so every host that mounts the screen
+   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
    two of them, so a field whose render returned nothing still took its
@@ -2995,11 +2049,15 @@
 
    The field says so instead, and the wrapper goes — `display: none`, so the row
    leaves the accessibility tree with it rather than lingering as an unlabelled
-   blank a screen reader still walks through. Declarative, like the two rules
-   above and below it, so it cannot race the tab pass; and the attribute name is
-   stated once in `lib/puck/panel-no-control-mark`, which
-   `scripts/test-panel-no-empty-rows.tsx` §4 reads back to prove this rule is
-   really here. */
+   blank a screen reader still walks through. Declarative, like the device
+   gate's rule (efficient-easel/screen.css) and the one below, so it cannot race
+   the tab pass; and the attribute name is stated once in
+   `lib/puck/panel-no-control-mark`, which `scripts/test-panel-no-empty-rows.tsx`
+   §4 reads back to prove this rule is really here.
+   The marker is the screen's (efficient-easel paints it), so the rule belongs
+   in efficient-easel/screen.css too, and moves there once that storefront guard
+   reads both sheets (`editorSheet()`); easel's tests/screen-css-closure lists it
+   as open until then. */
 .es-insp-row:has(> [data-sf-no-control]) {
   display: none !important;
 }
@@ -3037,85 +2095,17 @@
    to delete the override rather than leave it lying here — which is exactly what
    happened to the drill one above. */
 
-/* The one line that says WHICH device's settings are on screen. Quiet on
-   purpose — it sits above every group, so it earns its space by being read once
-   and then ignored. Hidden entirely on desktop, the resting state.
-
-   It is a SCOPE banner, not a note (card 66121): it does not explain, it says
-   what the panel below it is showing, and it is tinted so it reads as a state.
-   Nor is it one of this file's chips — those are all small square glyph holders
-   (.sf-chip, .sf-insp-chip) or a colour swatch (.sf-readability-chip); this is
-   a full-width strip, so it keeps its own rule. */
-.sf-device-scope {
-  margin: 8px 0 2px;
-  padding: 7px 10px;
-  border-radius: 7px;
-  background: var(--sf-chip-bg);
-  font-size: 11.5px;
-  line-height: 1.35;
-  color: var(--sf-muted);
-}
-
-/* ── Inherit / overridden badge (card 66034) ──────────────────────────────────
-   The chip at the right of a field's label row saying whether the setting is
-   following the page/site value or has been pinned on this section. Two states,
-   deliberately different WEIGHTS rather than different hues:
-
-     • Inheriting — a quiet grey chip. This is the RESTING state of a tidy page,
-       so it must not draw the eye; it answers a question, it doesn't raise one.
-     • Overridden — a button, in the accent tint. It is the state that carries an
-       action (reset), and the one worth spotting when scanning a panel for "what
-       has this section pinned?".
+/* The header panel's px readouts (Size, Space from the logo, Height) follow
+   option E (Lewis, 2026-10-07): grey while the setting is unchanged — the grey
+   is what says "default" — and the text colour once it is set, beside the ↺. */
+.sf-header-value[data-changed] { color: var(--sf-text); }
 
-   Sized to sit on the label's line without changing the row's height (the label
-   is 11px/500; these are 10px), so adding the badge doesn't reflow any panel. */
-.sf-inherit {
-  flex: none;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  max-width: 55%;
-  padding: 2px 6px;
-  border: 1px solid transparent;
-  border-radius: 999px;
-  font-family: var(--sf-font);
-  font-size: 10px;
-  font-weight: 500;
-  line-height: 1.5;
-  letter-spacing: 0.01em;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  background: var(--sf-chip-bg);
-  color: var(--sf-chip-fg);
-}
-/* Inheriting, but with a way OUT — the type sizes, where the merchant cannot
-   retype the previous value because it was a responsive clamp. Stays the quiet
-   grey of the resting state (it is still the tidy state); only hover reveals that
-   it does something, so a panel full of inheriting fields still reads calm. */
-.sf-inherit--following {
-  cursor: pointer;
-  transition: background 0.12s, color 0.12s;
-}
-.sf-inherit--following:hover {
-  background: var(--sf-hover);
-  color: var(--sf-text-secondary);
-}
-/* Overridden: an actual button — pressing it resets the field to inheriting. */
-.sf-inherit--over {
-  background: var(--sf-accent-tint);
-  border-color: var(--sf-accent-tint-strong);
-  color: var(--sf-accent-text);
-  cursor: pointer;
-  transition: background 0.12s, border-color 0.12s;
-}
-.sf-inherit--over:hover {
-  background: var(--sf-accent-tint-strong);
-}
-.sf-inherit-revert {
-  font-size: 11px;
-  line-height: 1;
-}
+/* ── Inherit / overridden badge: GONE (owner 2026-10-06) ─────────────────────
+   The `.sf-inherit` chip ("Inherits · Site" / "Overridden ↺") was replaced by
+   easel's `SettingsDefaultReset` — the word "Default", and a "Reset" button —
+   which draws itself from `efficient-easel/panel.css`. One part, both editors;
+   no shop rule styles it. `scripts/test-one-default-reset.ts` fails on a new
+   `.sf-inherit` rule. */
 
 /* Read-only value display — same metrics as an inspector input, but styled as a
    system-set value the panel SHOWS rather than edits (e.g. the Website name,
@@ -3146,10 +2136,6 @@
      label, with a glyph and an eye beside it. */
   margin-bottom: var(--es-rhythm-within);
 }
-.sf-field-type {
-  flex: none;
-  color: var(--sf-muted);
-}
 .sf-field-head .sf-field-label {
   flex: 1;
   min-width: 0;
@@ -3178,16 +2164,16 @@
 /* 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. */
-.sf-field.is-hidden .sf-field-label {
+.es-field.is-hidden .es-field-label {
   color: var(--sf-muted);
   text-decoration: line-through;
 }
-.sf-field.is-hidden .sf-field-eye {
+.es-field.is-hidden .sf-field-eye {
   opacity: 1;
   color: var(--sf-text-secondary);
 }
-.sf-field.is-hidden input,
-.sf-field.is-hidden textarea {
+.es-field.is-hidden input,
+.es-field.is-hidden textarea {
   opacity: 0.5;
 }
 
@@ -3205,8 +2191,9 @@
 
    `.sf-markup` — the container class this repo's own bar carried — is GONE from
    these selectors, because nothing renders it any more (swept: no `"sf-markup"`
-   class in app / components / lib). `.sf-markup-btn` stays: the Clear button is
-   still the host's own and still takes its metrics from it. */
+   class in app / components / lib). `.sf-markup-btn` went too: the Clear
+   button is the shell's `IconButton` (harness UI-24), with the shell's own
+   metrics, hover and :disabled look. */
 .sf-copybox > .es-copy-bar,
 .es-list-above > .es-copy-bar {
   display: flex;
@@ -3244,7 +2231,6 @@
    wide as its word. `has-glyph` is the shell's own marker for the difference
    (editor-shell 0.62.0), so the two cases are told apart by what they hold
    rather than by a list of style names kept in step by hand. */
-.sf-markup-btn,
 .sf-copybox .es-copy-mark.has-glyph,
 .es-list-above .es-copy-mark.has-glyph {
   width: 24px;
@@ -3258,7 +2244,6 @@
   line-height: 1;
   white-space: nowrap;
 }
-.sf-markup-btn,
 .sf-copybox .es-copy-mark,
 .es-list-above .es-copy-mark {
   height: 22px;
@@ -3273,20 +2258,17 @@
   opacity: 0.75;
   transition: background 0.12s, color 0.12s, opacity 0.12s;
 }
-.sf-markup-btn:hover:not(:disabled),
 .sf-copybox .es-copy-mark:hover:not(:disabled),
 .es-list-above .es-copy-mark:hover:not(:disabled) {
   background: var(--sf-hover);
   color: var(--sf-text-secondary);
   opacity: 1;
 }
-.sf-markup-btn:active:not(:disabled),
 .sf-copybox .es-copy-mark:active:not(:disabled),
 .es-list-above .es-copy-mark:active:not(:disabled) {
   background: var(--sf-accent-tint);
   color: var(--sf-accent-text);
 }
-.sf-markup-btn:disabled,
 .sf-copybox .es-copy-mark:disabled,
 .es-list-above .es-copy-mark:disabled {
   color: var(--sf-disabled);
@@ -3298,8 +2280,8 @@
    the whole separation: `margin-left: auto` makes the bar's own `.es-divider-v`
    eat the free space, which IS the flexible spacer, and carries the button after
    it to the far end. No new class, no new line and no new colour — the divider
-   already draws itself in --sf-divider, and the button takes `.sf-markup-btn`
-   for its metrics, its hover and its :disabled look.
+   already draws itself in --sf-divider, and the button is the shell's
+   `IconButton`, with its metrics, its hover and its :disabled look.
 
    The height is the one adjustment: `.es-divider-v` is 22px for the 30px icon
    buttons of the top toolbar, which in a 22px row would run edge to edge and
@@ -3332,7 +2314,7 @@
 }
 /* A hidden element's copy is still editable, so the bar dims with the input
    rather than disappearing — same cue, same reason as the input's 0.5. */
-.sf-field.is-hidden .es-copy-bar {
+.es-field.is-hidden .es-copy-bar {
   opacity: 0.5;
 }
 
@@ -3455,28 +2437,29 @@
    operating system's. See lib/puck/ColourControl.tsx.
 
    THE ROW HOLDS THE PICKER IN ITS LABEL LINE — `SettingsField`'s `action`
-   slot, or a `.sf-field--row` — so the picker's own box steps aside
+   slot (`colorInput()` too, since [MERGE] One Settings Row And Hint) — so the picker's own box steps aside
    (`display: contents`) and its two halves become items of that line: the
    swatch and hex stay at the end of the label line (`margin-left: auto`, which
    the shell gives `.es-field-value` and nothing else), and the window wraps
    onto a line of its own at the row's FULL width. Left inside the picker's box
    it would open in the few pixels the action slot has. */
-.es-field-head:has(> .es-pick-colour),
-.sf-field--row:has(> .es-pick-colour) {
+.es-field-head:has(> .es-pick-colour) {
   flex-wrap: wrap;
 }
-.es-field-head > .es-pick-colour,
-.sf-field--row > .es-pick-colour {
+.es-field-head > .es-pick-colour {
   display: contents;
 }
-.es-field-head > .es-pick-colour > .es-pick-colour-row,
-.sf-field--row > .es-pick-colour > .es-pick-colour-row {
+.es-field-head > .es-pick-colour > .es-pick-colour-row {
   margin-left: auto;
 }
-.es-field-head > .es-pick-colour > .es-pick-window,
-.sf-field--row > .es-pick-colour > .es-pick-window {
+.es-field-head > .es-pick-colour > .es-pick-window {
   flex: 1 0 100%;
   min-width: 0;
+  /* LAST on the line, whatever follows it in the markup: the row's Default /
+     Reset part (easel's `SettingsDefaultReset`, owner 2026-10-06) comes after
+     the picker, and without this an open window pushed Reset onto a line of
+     its own UNDER the window, away from the swatch it belongs beside. */
+  order: 1;
 }
 
 /* ⚠️ THE HEX BOX MUST OUT-SPECIFY THE SHARED INSPECTOR INPUT. `.sf-insp-body
@@ -3862,7 +2845,7 @@
      scripts/test-inspector-inherit.tsx). Take the token; never invent the value.
 
      So this tick stays muted because of WHERE it is. It sits at the end of a
-     settings row, inches from `.sf-part-mark`, which is already an accent-blue
+     settings row, inches from the Reset button, which is already an accent-blue
      mark on the same line; a second coloured mark beside it would read as a
      second thing to act on. The top bar has no such neighbour — its dot is the
      only mark in the corner — which is why the same idea is allowed a colour
@@ -4060,25 +3043,11 @@
 /* With no warning beside it the Edit still sits hard right. */
 .sf-theme-name { margin-right: auto; }
 
+/* The Edit / Done button is efficient-shell's `Button` (harness UI-24): its
+   look is the shell's, `secondary` folded and `primary` open. This class only
+   keeps it from shrinking in the foot. */
 .sf-theme-edit {
   flex: none;
-  border: 1px solid var(--sf-input-border);
-  background: var(--sf-panel);
-  border-radius: 4px;
-  font: inherit;
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.03em;
-  color: var(--sf-text-secondary);
-  padding: 3px 8px;
-  line-height: 1.3;
-  cursor: pointer;
-}
-.sf-theme-edit:hover { border-color: var(--sf-muted); color: var(--sf-text); }
-.sf-theme-edit.is-open {
-  background: var(--sf-accent);
-  border-color: var(--sf-accent);
-  color: #fff;
 }
 
 /* This theme's own colours, inside this theme's own card. The first row carries
@@ -4088,20 +3057,10 @@
 .sf-theme-colours[hidden] { display: none; }
 .sf-theme-colours > .es-field:first-child { margin-top: var(--es-rhythm-group-first); }
 
+/* The shell's `link` Button (harness UI-24); placement only. */
 .sf-theme-reset {
-  width: 100%;
   margin-top: var(--es-rhythm-between-tight);
-  border: 0;
-  background: none;
-  font: inherit;
-  font-size: 10.5px;
-  font-weight: 600;
-  color: var(--sf-accent-text);
-  padding: 0;
-  cursor: pointer;
-  text-align: left;
 }
-.sf-theme-reset:disabled { color: var(--sf-muted); cursor: default; }
 
 .sf-theme-add {
   display: flex;
@@ -4511,18 +3470,13 @@ input.sf-slider-typed:focus {
   color: var(--sf-text);
 }
 
-/* Checkbox — a literal tick box tinted to the editor accent (label left, box
-   right via sf-field--row). The whole row is a <label>, so the text is clickable. */
+/* Checkbox — a literal tick box. The row is easel's SettingsField with the box
+   in its `action` slot (label left, box right); the label points at the box, so
+   the text is clickable. The box is efficient-shell's `Checkbox` (harness
+   UI-24), drawn and focus-ringed by the shell, so no rule here reaches it. */
 .sf-checkbox {
   cursor: pointer;
 }
-.sf-checkbox input[type="checkbox"] {
-  width: 17px;
-  height: 17px;
-  margin: 0;
-  accent-color: var(--sf-accent);
-  cursor: pointer;
-}
 
 /* A field group greyed out because a higher-level setting overrides it — e.g. the
    manual ProductPicker (Category + Product) when the Product Grid's Products
@@ -4546,11 +3500,8 @@ input.sf-slider-typed:focus {
 .sf-readability-suggestion:focus-visible,
 .sf-swatch:focus-visible,
 .sf-field-eye:focus-visible,
-.sf-inherit--over:focus-visible,
-.sf-inherit--following:focus-visible,
 .sf-slider input[type="range"]:focus-visible,
-.sf-insp-body select:focus-visible,
-.sf-checkbox input[type="checkbox"]:focus-visible {
+.sf-insp-body select:focus-visible {
   outline: 2px solid var(--sf-accent);
   outline-offset: 2px;
 }
@@ -4659,10 +3610,6 @@ input.sf-slider-typed:focus {
    and the strip takes the body's width. Scoped to `.sf-panel` because
    `.flex-shrink-0` is a Tailwind utility used in seven other files, and none of
    them is this panel. */
-.sf-panel .flex-shrink-0:has(.es-segs-fit) {
-  flex-basis: 100%;
-  min-width: 0;
-}
 /* An inactive segment gave no feedback at all before the click, so the strip read
    as static text until you hit it. */
 .sf-seg2 button:hover:not(.is-active) {
@@ -4741,6 +3688,11 @@ input.sf-list-marking {
   flex-direction: column;
   gap: 9px;
 }
+/* The shell's Button in the column (SourceStatus): its own width, not the
+   column's. Placement only; the look is the shell's (harness UI-24). */
+.sf-blogsource-action {
+  align-self: flex-start;
+}
 .sf-blogsource-status {
   margin: 0;
   font-size: 12px;
@@ -4779,6 +3731,11 @@ input.sf-list-marking {
   border-radius: 2px;
 }
 
+/* ⏳ DRAWN BY NO FILE OF THIS REPOSITORY'S. `SourceStatus` takes the shell's
+   `Button` (harness UI-24); this rule is kept for the panels
+   `efficient-storefront-blocks` still draws by hand (CollectionPicker,
+   EditProductLink, FormPicker), and is deleted when they move
+   (Efficient-Pty-Ltd/efficient-easel#199). */
 .sf-blogsource-btn {
   align-self: flex-start;
   padding: 7px 14px;
@@ -4799,12 +3756,6 @@ input.sf-list-marking {
   opacity: 0.55;
   cursor: default;
 }
-.sf-blogsource-hint {
-  margin: 0;
-  font-size: 11px;
-  line-height: 1.4;
-  color: var(--sf-muted);
-}
 
 /* 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
@@ -5010,8 +3961,7 @@ ul.sf-image-status {
    THE chrome's quiet sentence: what a panel says when it has something to tell
    the merchant and nothing to let them edit. A whole-panel stand-in for
    settings that belong to a website the open document does not have; "No pages
-   yet"; "Loading…"; the word "draft" trailing a row in the duplicate-to-page
-   menu. One voice, so it is one class.
+   yet"; "Loading…". One voice, so it is one class.
 
    It was six classes at five sizes — .sf-pages-note, .sf-sm-note,
    .sf-panel-note, .sf-dupmenu-note, and two more that were only counted as
@@ -5075,35 +4025,6 @@ ul.sf-image-status {
    is the panel's quietest thing on purpose; it explains, it does not warn. */
 
 /* ── Part panel: the inspector scoped to ONE clicked control ──────────── */
-/* The way back sits at the very top, before the control, so a merchant can see
-   the exit before they have read anything else — nobody is ever stuck inside a
-   sub-panel. Full-bleed out of the body's 14px inset so its hit area runs
-   the panel's whole width, like the inspector head's own. */
-.sf-part-back {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  width: calc(100% + 28px);
-  margin: 0 -14px 10px;
-  padding: 9px 14px;
-  background: none;
-  border: 0;
-  font: inherit;
-  font-size: 12px;
-  color: var(--sf-muted);
-  text-align: left;
-  cursor: pointer;
-}
-.sf-part-back:hover {
-  color: var(--sf-text);
-  background: var(--sf-chip-bg);
-}
-.sf-part-back span {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
 /* The style CARD: which site style this part follows, what that style actually
    looks like, and how far this part has been pulled away from it. Sits above
    every control because it is the thing the controls are relative TO — a
@@ -5276,6 +4197,23 @@ ul.sf-image-status {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+/* The text region's Style row is easel's FieldSelect (card [MERGE] One Pop-up
+   List For Editor And One For Shoppers). Its "No style" row draws its own note
+   so the NAME keeps its width and the NOTE gives way (owner 2026-09-06) — the
+   reverse of FieldSelect's meta, which is right for a price. */
+.es-fsel-label.sf-part-style-keep {
+  flex: none;
+}
+.sf-part-style-aside {
+  min-width: 0;
+  margin-left: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11px;
+  font-weight: 400;
+  color: var(--es-muted);
+}
 .sf-part-style-meta {
   margin-top: 1px;
   font-size: 11px;
@@ -5637,22 +4575,14 @@ ul.sf-image-status {
    `.sf-slider` carries the same two lines from card 66247, and the shell
    carries them for `.es-tabs-fit` and `.es-segs-fit`.
 
-   ⚠️ AND `.sf-linkstack` JOINED THEM, which is why this is one rule with a
-   growing list rather than a fix per control. The storefront link field's
-   stacked pickers were an INLINE `display:flex; flex-direction:column` — 291px
-   before, 117px inside the slot, both selects with it. An inline style cannot
-   be named here, so it got a class in order to join the list. 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. */
-.sf-linkstack {
-  display: flex;
-  flex-direction: column;
-  gap: 7px;
-}
+   `.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
+   shell's own `.es-flink`, and the shell carries the same two lines for it.
+   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-linkstack {
+.es-field-ctl > .sf-gallery-filter {
   flex: 1 1 auto;
   min-width: 0;
 }
@@ -5704,28 +4634,50 @@ ul.sf-image-status {
    own tools from the hide button that ends every head, and a mode's way out
    is a word ("Done", "Cancel") on the engine's ghost button, drawn to the
    28px of the head's icon buttons so the row keeps one height. */
-.sf-head-divider {
-  width: 1px;
-  height: 16px;
-  margin: 0 4px;
-  background: var(--sf-line);
-  flex: none;
+
+/* ── The Contact / Locations inspector's level views ────────────────────────
+   LocationsGroupedField shows ONE level at a time (section, group, city, its
+   image or map). Each level used to be wrapped in a bare `.sf-field`, which
+   made the whole view one "row" with rows inside it. The rows are
+   efficient-easel's `SettingsField` now ([MERGE] One Settings Row And Hint In
+   The Website Editor, 2026-10-06); this keeps the view's own top air, from the
+   shell's rhythm token like every row beside it. */
+.sf-locations-view {
+  margin-top: var(--es-rhythm-between);
 }
-.es-btn-ghost.sf-head-textbtn {
-  height: 28px;
-  padding: 0 10px;
-  font-size: 12.5px;
-  border-radius: 7px;
-  white-space: nowrap;
+
+/* ── A quiet line that belongs to no row ────────────────────────────────────
+   [MERGE] One Settings Row And Hint In The Website Editor, 2026-10-06. A line
+   UNDER A CONTROL is `SettingsField`'s own `hint`. A few lines sit under no
+   row — the caption inside a linked-source card, a panel's opening sentence,
+   the empty state of an open focus picker — and they wear the SAME class,
+   `<p class="es-field-hint sf-hint-keep">`: one hint line in the whole editor,
+   not a shop copy of its look. That replaces the shop's `.sf-field-hint` and
+   `.sf-blogsource-hint`, which drew this idea twice, slightly differently.
+
+   Not a NEW class, and not `.sf-note`: `test-editor-chrome-note` holds the
+   chrome to ONE note style, and these are hints, at the hint's size.
+   `sf-hint-keep` on the element keeps the hints switch off them — none is a
+   row's explanation.
+
+   Inside a source card the card's own gap spaces it. */
+.sf-blogsource > .es-field-hint,
+.sf-formsummary .es-field-hint {
+  margin: 0;
 }
 
-/* A hidden side panel's strip (components/SidePanelHead `PanelShowStrip`):
-   one Show panel button where the panel was. It IS a side panel — the
-   engine's `.es-sidepanel--left|right` gives it the panels' ground and the
-   hairline on the seam side — only 40px wide, its button level with the
-   heads' buttons (the head's 12px top padding, a 28px button). */
-.es-sidepanel.sf-panel-strip {
-  width: 40px;
-  align-items: center;
-  padding-top: 12px;
+/* The copy box sits in `SettingsField`'s control slot, which is
+   `display: flex` — the trap the Gallery layouts note above describes. Told to
+   fill the slot, or it shrinks to its own words. (The select fields need no
+   rule: easel's `.es-fsel` is `width: 100%` itself.) */
+.es-field-ctl > .sf-copybox {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* The focal-point picker's row is TextStyleRow's disclosure row, not a
+   SettingsField; this keeps the gap above it that its old bare `.sf-field`
+   wrapper gave, from the same rhythm token. */
+.sf-focal-row {
+  margin-top: var(--es-rhythm-between);
 }