efficient-web-builder 2.1.0 → 4.0.0

package/dist/components/storefront-editor.css

@@ -14,11 +14,24 @@
  *      left/right panels, device frame, inspector).
  *
  * Everything is scoped under `.sf-editor` so it can never leak into the public
- * storefront. Colour is driven entirely by the `--sf-*` tokens below so the
- * chrome themes in ONE place. The editor is deliberately light-only — it does
- * NOT follow the admin portal's active theme. The admin still bridges its theme
- * into the iframe, but lib/editor-theme.ts pins the editor to the light base
- * regardless (see that file), so there is no dark block.
+ * storefront. Colour is driven entirely by tokens so the chrome themes in ONE
+ * place — and that place is efficient-shell (harness UI-24,
+ * Efficient-Pty-Ltd/efficient-easel#199). Every chrome rule reads a `--sf-*`
+ * (aliased by efficient-easel's `screen.css` onto `--es-*`, which easel aliases
+ * onto the shell's tokens), an `--es-*`, or a shell token directly
+ * (`--line-strong`, `--status-*`, `--radius-*`), so the chrome FOLLOWS THE
+ * SHELL'S THEME, dark included, with no dark block of its own: the shell swaps
+ * its tokens under `<html data-theme="dark">`. The theme reaches that attribute
+ * through efficient-easel's `chrome-theme` (re-exported as lib/editor-theme.ts),
+ * which pinned the editor light up to easel 0.106.0 and stamps the bridged
+ * theme from easel #200 on. Hosts load `efficient-shell/ui.css` before this
+ * sheet, or the shell's tokens resolve to nothing.
+ *
+ * NO COLOUR LITERAL AND NO LITERAL RADIUS IN A CHROME RULE
+ * (`scripts/test-editor-css-tokens.ts`). Two regions are not chrome and are
+ * marked `@tokens canvas-begin/end` and `@tokens output-begin/end`: rules that
+ * paint inside the canvas frame (the website being edited, where no token is
+ * defined), and the section covers' palette (a miniature of a section, output).
  *
  * WHERE THE VALUES LIVE (card 66034). They no longer live here. Every `--sf-*`
  * colour, radius, shadow and font below is now an ALIAS onto the `--es-*` shell
@@ -62,28 +75,10 @@
 }
 
 /* ── 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,
-   `.es-topbar` and friends), lifted from this sheet and shared with the
-   campaign editor (redesign PR 2a). Only the website's own additions follow. */
-
-/* Reuse-component buttons in the top bar inherit the ghost look */
-.sf-actions-slot > button {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 7px 12px;
-  border: 1px solid var(--sf-btn-border);
-  background: var(--sf-panel);
-  border-radius: 8px;
-  cursor: pointer;
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--sf-btn-text);
-}
-.sf-actions-slot > button:hover {
-  background: var(--sf-hover);
-}
+   The bar and its clusters are efficient-easel's (chrome.css, `.es-topbar` and
+   friends), shared with the campaign editor (redesign PR 2a); its buttons and
+   device switch are efficient-shell's since easel 1.0 (UI-24).
+   Only the website's own additions follow. */
 
 /* ── Body / floating panels ───────────────────────────────────────────── */
 /* The panel's title and, beside it, WHICH SITE it is styling (card 66167).
@@ -102,6 +97,7 @@
    wrapping, because a two-line head would move every row in the panel below it;
    the whole name is on the `title`, along with where to change it. */
 .sf-panel-site {
+  display: block;
   margin: 0;
   min-width: 0;
   overflow: hidden;
@@ -111,6 +107,22 @@
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+/* 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. */
+.sf-name-tip {
+  position: relative;
+  display: block;
+  min-width: 0;
+  max-width: 100%;
+}
+.sf-name-text {
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 .sf-panel-site::before {
   content: "·";
   margin-right: 6px;
@@ -120,7 +132,7 @@
   height: 24px;
   border: none;
   background: transparent;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   cursor: pointer;
   color: var(--sf-muted);
   display: flex;
@@ -238,7 +250,7 @@
   top: 50%;
   height: 2px;
   transform: translateY(-50%);
-  border-radius: 2px;
+  border-radius: calc(var(--radius-sm) / 2);
   background: var(--sf-accent);
   opacity: 0;
   transition: opacity 0.12s;
@@ -252,7 +264,7 @@
   height: 18px;
   border-radius: 50%;
   background: var(--sf-accent);
-  color: #fff;
+  color: var(--sf-on-accent);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -322,7 +334,7 @@
   margin-top: 16px;
   padding: 10px;
   border: 1px solid var(--sf-divider);
-  border-radius: 10px;
+  border-radius: var(--radius-xl);
 }
 .sf-addside-sitewide-glyph {
   flex: none;
@@ -330,7 +342,7 @@
   place-items: center;
   width: 28px;
   height: 28px;
-  border-radius: 7px;
+  border-radius: var(--radius-lg);
   background: var(--sf-hover);
   color: var(--sf-muted);
 }
@@ -369,7 +381,7 @@
   margin: 18px 0 6px;
   padding: 12px;
   border: 1px solid var(--sf-divider);
-  border-radius: 10px;
+  border-radius: var(--radius-xl);
 }
 .sf-box-footer-switch-text {
   margin: 0;
@@ -387,6 +399,12 @@
  * colour literal lives in the .tsx (doc/no-hardcoding.md R3); the admin mirror
  * defines the same block in src/index.css. Light-only: the picker + the console
  * catalog both sit on a light surface. */
+/* @tokens output-begin — the section COVERS' palette. A cover is a miniature
+   picture of a kind of SECTION (output), drawn the same in every tenant and in
+   the admin's catalog; it is not chrome and does not follow the shell theme,
+   exactly as the canvas paper stays white (UI-24 leaves rendered output its own
+   look). The card around a cover is easel's `.es-add-*` chrome, on shell tokens.
+   `scripts/test-editor-css-tokens.ts` skips this region. */
 .sf-thumb {
   --sf-thumb-card: #ffffff;
   --sf-thumb-thumb-bg: #fcfdff;
@@ -448,6 +466,7 @@
      colour here rather than an `rgba()` sitting in the component. */
   --sf-thumb-scrim: rgba(0, 0, 0, 0.55);
 }
+/* @tokens output-end */
 /* Drives the Ticker cover's scrolling strip. */
 @keyframes sf-thumb-marquee {
   from {
@@ -480,8 +499,8 @@
   align-items: center;
   gap: 6px;
   background: var(--sf-accent);
-  color: #fff;
-  border-radius: 9px;
+  color: var(--sf-on-accent);
+  border-radius: var(--radius-lg);
   padding: 8px 14px;
   font-size: 12.5px;
   font-weight: 600;
@@ -566,6 +585,13 @@
    src>`) — see components/EditorPreviewSurface. No editor-side frame CSS is
    needed; the ribbon is styled inline in that component. */
 
+/* @tokens canvas-begin — the rules from here to `@tokens canvas-end` paint
+   INSIDE the canvas frame, on the website being edited: that document has no
+   `.es-editor` root, so no shell or `--es-*` token is defined there, and each
+   colour carries its own fallback (see the note at B below). Harness UI-24
+   leaves the canvas to the page; `scripts/test-editor-css-tokens.ts` skips
+   this region and counts everything else. */
+
 /* ── One dashed outline on hover, not a field of them (card 66395) ─────────
    The owner, 2026-09-01: hovering a section shows too many dashed lines. He
    wants to find the hover target directly, and ONE is enough.
@@ -843,6 +869,8 @@
   outline: none;
 }
 
+/* @tokens canvas-end */
+
 /* ── Canvas "Add section" seams (overlay between preview sections) ──────────
    Absolutely positioned over .sf-preview-host (the iframe's box), one band per
    seam between top-level sections, placed at the boundary Y measured from the
@@ -1269,10 +1297,11 @@
   flex: none;
   display: flex;
   overflow: hidden;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   /* A hairline of the merchant's own ink would vanish on a theme whose paper is
-     that ink. A translucent black keeps the chip's edge on every palette. */
-  border: 1px solid rgba(0, 0, 0, 0.14);
+     that ink. The shell's strong line keeps the chip's edge on every palette,
+     against the panel it sits on in either theme. */
+  border: 1px solid var(--line-strong);
 }
 .sf-secttheme-chip i {
   display: block;
@@ -1384,7 +1413,7 @@
 .sf-secttheme-done:focus-visible {
   outline: 2px solid var(--sf-accent);
   outline-offset: -2px;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
 }
 .sf-secttheme-sep {
   height: 1px;
@@ -1503,7 +1532,7 @@
   margin: 0 12px 8px;
   padding: 7px 10px;
   background: var(--sf-track-bg);
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   color: var(--sf-muted);
 }
 .sf-pages-search-input {
@@ -1604,8 +1633,9 @@
   background: var(--sf-accent-tint);
 }
 .sf-badge-lightbox {
-  color: #047857; /* emerald-700 — matches the Console's Lightbox pill */
-  background: #ecfdf5; /* emerald-50 */
+  /* The shell's success wash — the green the Console's Lightbox pill wears. */
+  color: var(--status-success-soft-ink);
+  background: var(--status-success-soft);
 }
 .sf-page-edit {
   flex: none;
@@ -1613,7 +1643,7 @@
   height: 24px;
   border: none;
   background: transparent;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   color: var(--sf-muted);
   display: none;
   align-items: center;
@@ -1687,7 +1717,7 @@
   height: 22px;
   border: none;
   background: transparent;
-  border-radius: 5px;
+  border-radius: var(--radius-md);
   cursor: pointer;
   color: var(--sf-danger);
   display: flex;
@@ -2147,7 +2177,7 @@
   height: 22px;
   border: none;
   background: transparent;
-  border-radius: 5px;
+  border-radius: var(--radius-md);
   cursor: pointer;
   color: var(--sf-muted);
   display: flex;
@@ -2244,35 +2274,12 @@
   line-height: 1;
   white-space: nowrap;
 }
+/* A mark is the shell's IconButton since efficient-easel 1.0 (UI-24): its
+   ground, ink, hover, press, pressed (`aria-pressed`) and disabled looks are
+   the shell's. Only its height is this row's: the bar is 22px tall. */
 .sf-copybox .es-copy-mark,
 .es-list-above .es-copy-mark {
   height: 22px;
-  border: none;
-  background: transparent;
-  border-radius: 5px;
-  cursor: pointer;
-  color: var(--sf-icon);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 0.75;
-  transition: background 0.12s, color 0.12s, opacity 0.12s;
-}
-.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-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-copybox .es-copy-mark:disabled,
-.es-list-above .es-copy-mark:disabled {
-  color: var(--sf-disabled);
-  cursor: default;
 }
 /* The fifth button — clear formatting (card 8809) — pushed away from the four.
    The four ADD a mark to a selection; this one TAKES every mark off the whole
@@ -2367,16 +2374,6 @@
 .sf-copybox:not(:focus-within) > .es-copy-bar {
   display: none;
 }
-/* PRESSED: the selection already wears this mark, so a press takes it off. The
-   same tint as the :active press above, held — under the pointer too, which is
-   where it is right after the press (the hover rule would otherwise win). */
-.sf-copybox .es-copy-mark.is-active,
-.sf-copybox .es-copy-mark.is-active:hover:not(:disabled),
-.es-list-above .es-copy-mark.is-active,
-.es-list-above .es-copy-mark.is-active:hover:not(:disabled) {
-  background: var(--sf-accent-tint);
-  color: var(--sf-accent-text);
-}
 /* The input gives up its own frame to the wrapper. The `.sf-insp-body` +
    attribute selectors are not decoration: the base control rule near the top of
    this file is `.sf-insp-body input[type="text"]`, which ties on specificity
@@ -2412,11 +2409,11 @@
 .sf-swatch {
   width: 26px;
   height: 26px;
-  border-radius: 7px;
+  border-radius: var(--radius-lg);
   border: none;
   cursor: pointer;
   padding: 0;
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
+  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);
@@ -2428,69 +2425,59 @@
   margin-left: 2px;
 }
 
-/* ── THE colour control — efficient-easel's `ColourPicker` (blueprint 4.8) ──
-   One swatch, one typeable hex, and — pressing the swatch — the package's own
-   window under the row: the site's theme colours, a saturation square, a hue
-   strip and the hex. Its look is `efficient-easel/pick.css`; what is here is
-   only how the shop's rows hold it. There used to be two colour controls in
-   this file's rows, then one on `<input type="color">`, whose window was the
-   operating system's. See lib/puck/ColourControl.tsx.
+/* ── THE colour control — efficient-shell's `ColorPicker` (harness UI-24) ──
+   One swatch, one typeable hex (the shell's `HexInput`), and — pressing the
+   swatch — the shell's picker in a popover: the site's theme colours as its
+   presets, a saturation square, a hue strip and the hex. Its look is the
+   shell's; what is here is only how the shop's rows hold it. Before UI-24 it
+   was efficient-easel's `ColourPicker` (blueprint 4.8), and before that
+   `<input type="color">`, whose window was the operating system's. See
+   lib/puck/ColourControl.tsx.
 
    THE ROW HOLDS THE PICKER IN ITS LABEL LINE — `SettingsField`'s `action`
-   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) {
-  flex-wrap: wrap;
-}
-.es-field-head > .es-pick-colour {
-  display: contents;
+   slot — and the swatch and hex sit at the end of that line (`margin-left:
+   auto`, which the shell gives `.es-field-value` and nothing else). The window
+   is a popover now, so the line no longer wraps to make room for it. */
+.sf-colour {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
 }
-.es-field-head > .es-pick-colour > .es-pick-colour-row {
+.es-field-head > .sf-colour {
   margin-left: auto;
 }
-.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
-   input[type="text"]` (0,2,1) is `width: 100%`, `padding: 8px 11px`,
-   `font-size: 13px` — a full-width form field — and it beats the package's
-   one-class rule. Inherited here it would eat the row and shove the swatch out
-   of it, and at 13px `#DDDDDD` rendered `#DDDDD`, one digit short, on a control
-   whose whole job is to show a hex exactly (the 2026-09-04 drawing). So EVERY
-   property the shared rule sets is restated, at the package's own values, on
-   a selector that wins on specificity (0,3,1) and not on source order. */
-.sf-insp-body input[type="text"].es-pick-hex {
-  width: var(--es-pick-readout-w);
-  border: 1px solid transparent;
-  background: transparent;
-  border-radius: 6px;
-  padding: 4px 6px;
-  font-size: 12px;
-  color: var(--es-text);
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+/* Seven monospaced characters and the box's padding — no wider, so a two-word
+   label keeps its line beside the swatch. */
+.sf-colour-hexwrap {
   flex: none;
+  width: 4.75rem;
 }
-.sf-insp-body input[type="text"].es-pick-hex:hover {
-  border-color: var(--es-input-border);
-}
-.sf-insp-body input[type="text"].es-pick-hex:focus {
-  outline: none;
-  border-color: var(--es-accent);
-  box-shadow: none;
-  background: var(--es-panel);
+.sf-colour-caption {
+  font-size: 12px;
+  color: var(--sf-muted);
+  white-space: nowrap;
 }
 
+/* ⚠️ THE SHELL'S FIELDS MUST NOT WEAR THE INSPECTOR'S OLD INPUT RULE.
+   `.sf-insp-body input[type="text"]` (0,2,1, below the shell in no layer) is
+   `width: 100%`, `padding: 8px 11px`, `font-size: 13px` — the box Puck's native
+   fields were given — and an unlayered rule beats every shell utility whatever
+   its specificity. Inside the shell's own controls it is rolled back to the
+   shell's layer, so the hex box and the slider's number look as the shell
+   draws them everywhere else. */
+.sf-editor .sf-insp-body :is(.sf-slider, .sf-colour) input[type="text"],
+.sf-editor .sf-insp-body :is(.sf-slider, .sf-colour) input[type="text"]:focus,
+.sf-editor .sf-insp-body :is(.sf-slider, .sf-colour) input::placeholder {
+  all: revert-layer;
+}
+/* The colour a row FOLLOWS, shown in its box in grey (option E): the grey is
+   what says the setting has no colour of its own. After the roll-back above,
+   and more specific than it, so the roll-back does not take the grey away. */
+.sf-editor .sf-colour input.sf-colour-hex.is-inherited,
+.sf-editor .sf-insp-body .sf-colour input[type="text"].sf-colour-hex.is-inherited {
+  color: var(--sf-muted);
+}
 
 /* ── Site styles' own controls (card 66148) ───────────────────────────────────
    These three shapes -- a dropdown, a strip of choice rungs, and the small text
@@ -2570,7 +2557,7 @@
   border: 1px solid var(--sf-divider);
   border-radius: var(--sf-field-radius);
   background: var(--sf-panel);
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--es-menu-shadow);
 }
 /* The font menu is long enough to need its own ceiling; the theme menu is not. */
 .sf-chooser-menu--tall {
@@ -2759,7 +2746,7 @@
    ON THE TAB PANEL'S FIRST CHILD, whatever that child is. A rule per tab would
    be three statements of one fact, and would go stale the first time a tab's
    opening control changes — which is precisely how these three drifted apart. */
-#sf-site-styles-tabpanel > :first-child {
+.sf-site-styles-tabpanel > :first-child {
   margin-top: var(--es-rhythm-group-first);
 }
 
@@ -2826,6 +2813,14 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+/* The sample in the shell's Tooltip (UI-24): the wrapper takes the sample's
+   place at the end of the line and gives way, and the sample ellipsises in it. */
+.sf-style-sample-tip {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  margin-left: auto;
+}
 /* Where Done used to sit. The editor autosaves, so the thing to say here is
    "stored", and it says it once and goes quiet again. */
 .sf-style-slot {
@@ -2895,6 +2890,35 @@
 .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
+   itself through the shell's Tooltip. */
+.sf-tip-disabled {
+  display: inline-flex;
+}
+.sf-rung-tip > .sf-tip-disabled {
+  flex: 1;
+}
+.sf-tip-disabled > button:disabled {
+  pointer-events: none;
+}
+.sf-tip-disabled:focus-visible {
+  outline: 2px solid var(--sf-accent);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
 /* One theme's swatch in the preset dropdown, and one colour row's chip. */
 /* ── The theme list: one card per theme, each a small page in its own palette ──
    Card 66304. Sized against the RIGHT panel's real widths — 320px default and
@@ -2922,7 +2946,7 @@
 .sf-theme-card,
 .sf-secttheme-btn {
   border: 1px solid var(--sf-input-border);
-  border-radius: 9px;
+  border-radius: var(--radius-lg);
   overflow: hidden;
   background: var(--sf-panel);
 }
@@ -2991,7 +3015,7 @@
   font-weight: 700;
   letter-spacing: 0.02em;
   padding: 5px 11px;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   white-space: nowrap;
   flex: none;
 }
@@ -2999,7 +3023,7 @@
   flex: 1;
   min-width: 0;
   height: 22px;
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   border: 1px solid;
   display: flex;
   align-items: center;
@@ -3036,7 +3060,7 @@
   margin-left: auto;
   font-size: 10px;
   font-weight: 700;
-  color: #b45309;
+  color: var(--status-warning-soft-ink);
   white-space: nowrap;
 }
 .sf-theme-warn + .sf-theme-edit { margin-left: 8px; }
@@ -3220,8 +3244,8 @@
   width: 9px;
   height: 9px;
   flex: none;
-  border-radius: 2px;
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
+  border-radius: calc(var(--radius-sm) / 2);
+  box-shadow: inset 0 0 0 1px var(--line-strong);
 }
 
 /* The nine-square grid moved into `efficient-easel/panel` as `SettingsPlacement`
@@ -3271,68 +3295,14 @@
   flex: 1;
   min-width: 0;
 }
-/* The range was the one control still drawn entirely by the browser — a native
-   track and thumb tinted with `accent-color`, sitting beside a panel of bespoke
-   toggles, segmenteds and swatches. It read as an unstyled leftover at every OS,
-   and each OS drew it differently. Drawn explicitly here instead, off the same
-   tokens as its neighbours: a 4px rail on the field track colour, and a white
-   thumb ringed in the accent (the shell's control shape — cf. `.es-switch`).
-
-   `accent-color` is deliberately dropped: with an explicit thumb + track it only
-   fights the rules below. The two vendor thumb selectors CANNOT be combined into
-   one rule — a selector list is discarded wholesale by any browser that doesn't
-   recognise one member, which would leave the thumb unstyled. */
-.sf-slider input[type="range"] {
+/* 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;
-  height: 18px;
-  margin: 0;
-  padding: 0;
-  background: transparent;
-  cursor: pointer;
-  -webkit-appearance: none;
-  appearance: none;
-}
-.sf-slider input[type="range"]::-webkit-slider-runnable-track {
-  height: 4px;
-  border-radius: 999px;
-  background: var(--sf-track-bg);
-  box-shadow: inset 0 0 0 1px var(--sf-input-border);
-}
-.sf-slider input[type="range"]::-moz-range-track {
-  height: 4px;
-  border-radius: 999px;
-  background: var(--sf-track-bg);
-  box-shadow: inset 0 0 0 1px var(--sf-input-border);
-}
-.sf-slider input[type="range"]::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 14px;
-  height: 14px;
-  /* Centre the thumb on a 4px track: (4 - 14) / 2. Webkit lays the thumb out
-     from the track's top edge, so without this it hangs below the rail. */
-  margin-top: -5px;
-  border-radius: 50%;
-  background: var(--sf-knob);
-  border: 2px solid var(--sf-accent);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
-  transition: transform 0.12s;
-}
-.sf-slider input[type="range"]::-moz-range-thumb {
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  background: var(--sf-knob);
-  border: 2px solid var(--sf-accent);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
-  transition: transform 0.12s;
-}
-.sf-slider input[type="range"]:hover::-webkit-slider-thumb {
-  transform: scale(1.12);
-}
-.sf-slider input[type="range"]:hover::-moz-range-thumb {
-  transform: scale(1.12);
 }
 /* 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
@@ -3353,57 +3323,11 @@
   width: 2px;
   height: 10px;
   margin-top: -5px;
-  border-radius: 1px;
+  border-radius: calc(var(--radius-sm) / 2);
   background: var(--sf-input-border);
   pointer-events: none;
 }
 
-/* THE NUMBER, AND IT IS A BUTTON (card 66275). A track that runs 200–900 in
-   tens has seventy stops on it, and 380 is one of them — reachable by dragging
-   only if the merchant lands the thumb on exactly the right pixel. So the
-   readout is pressed to type into, which means it is a real <button> and needs
-   the browser's own button drawing taken off it: everything below the first
-   five declarations is undoing an appearance, not adding one. It must measure
-   exactly what the <span> measured, because `.es-field-value` and this box sit
-   in the same 42px column and a merchant reads down it. */
-.sf-slider-val {
-  font-size: 12px;
-  color: var(--sf-icon);
-  font-variant-numeric: tabular-nums;
-  min-width: 42px;
-  text-align: right;
-  padding: 0;
-  border: none;
-  background: none;
-  font-family: inherit;
-  line-height: inherit;
-}
-button.sf-slider-val {
-  cursor: text;
-  border-radius: 4px;
-}
-button.sf-slider-val:hover {
-  color: var(--sf-text);
-  box-shadow: inset 0 0 0 1px var(--sf-input-border);
-}
-/* The same box, being typed into. It keeps the readout's own width and
-   alignment so the row does not shift under the merchant's caret the moment
-   they click it — a number that jumps sideways as it becomes editable reads as
-   two different controls. */
-input.sf-slider-typed {
-  width: 42px;
-  color: var(--sf-text);
-  box-shadow: inset 0 0 0 1px var(--sf-accent);
-  border-radius: 4px;
-  padding: 1px 3px;
-  /* iOS zooms a focused input under 16px unless the page says otherwise; the
-     editor is desktop-first but the panel is reachable on a tablet. */
-  touch-action: manipulation;
-}
-input.sf-slider-typed:focus {
-  outline: none;
-}
-
 /* Pinned editor-only toggle bar — sits BETWEEN the inspector head and the
    scrolling body (SectionEditor), so an aid like "Preview hover state" stays
    put at the top while the fields below it scroll. `flex: none` keeps it from
@@ -3434,34 +3358,14 @@ input.sf-slider-typed:focus {
 }
 
 /* Columns-per-line stepper — a compact − N + shown for the view the footer's
-   "Columns per line" control is currently editing (the top-bar device). */
+   "Columns per line" control is currently editing (the top-bar device). The −
+   and + are the shell's `IconButton` (harness UI-24); this only lines the three
+   parts up and sets the number. */
 .sf-colstep {
   display: flex;
   align-items: center;
   gap: 6px;
 }
-.sf-colstep-btn {
-  width: 22px;
-  height: 22px;
-  padding: 0;
-  border: 1px solid var(--sf-line);
-  border-radius: 6px;
-  background: transparent;
-  color: var(--sf-text);
-  font-size: 15px;
-  line-height: 1;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.sf-colstep-btn:hover:not(:disabled) {
-  border-color: var(--sf-accent);
-}
-.sf-colstep-btn:disabled {
-  opacity: 0.4;
-  cursor: default;
-}
 .sf-colstep-value {
   min-width: 14px;
   text-align: center;
@@ -3494,13 +3398,13 @@ input.sf-slider-typed:focus {
 
    `:focus-visible`, not `:focus`, so a mouse click never paints a ring — the
    reason the outline was dropped in the first place. Same 2px accent ring as
-   the top bar's `.es-btn-ghost` (editor-shell) / `.sf-addcard`, so focus reads identically across the whole
-   editor rather than per-control. */
+   `.sf-addcard`, so focus reads identically across the whole editor rather
+   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-slider input[type="range"]:focus-visible,
 .sf-insp-body select:focus-visible {
   outline: 2px solid var(--sf-accent);
   outline-offset: 2px;
@@ -3520,14 +3424,14 @@ input.sf-slider-typed:focus {
   gap: 3px;
   background: var(--sf-track-bg);
   border: 1px solid var(--sf-input-border);
-  border-radius: 9px;
+  border-radius: var(--radius-lg);
   padding: 3px;
 }
 .sf-seg2 button {
   flex: 1;
   border: none;
   background: transparent;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   padding: 6px 8px;
   font-size: 12px;
   font-weight: 500;
@@ -3621,7 +3525,7 @@ input.sf-slider-typed:focus {
   color: var(--sf-text-strong);
   /* Softer and shorter than the old flat 0.14 drop: the active segment should
      look lifted off the track, not outlined against it. */
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.04);
+  box-shadow: var(--es-raised-shadow);
 }
 /* ─── A control the panel has taken out of force (card 66216) ─────────────
    The setting still exists and still shows the merchant's saved answer; another
@@ -3630,11 +3534,9 @@ input.sf-slider-typed:focus {
    Background. DIMMED, NEVER HIDDEN: a control that disappears reads as a feature
    that was removed, and leaves the merchant no way to see what to change.
 
-   `--sf-disabled` is the panel's existing token for exactly this — the same dim
-   the top bar's icon and ghost buttons wear (editor-shell's `.es-iconbtn` /
-   `.es-btn-ghost`, lifted from this sheet); this is the same state on
-   the control that had no rule for it (the switch is efficient-easel's
-   `.es-switch`, which dims itself). The track keeps its border and the
+   `--sf-disabled` is the panel's existing token for exactly this; this is the
+   same state on the control that had no rule for it (the switch is the
+   shell's `Switch` since efficient-easel 1.0, which dims itself). The track keeps its border and the
    pressed segment keeps its lift, so the strip still READS as a strip with an
    answer in it — it is quieter, not broken. */
 .sf-seg2[data-disabled] {
@@ -3704,8 +3606,8 @@ input.sf-list-marking {
 /* The "Open" control inside a source note — the route the sentence names.
    [ADD] Source Note Opens The Record, 2026-09-06.
 
-   AN INLINE BUTTON, NOT A BLOCK ONE (`.sf-blogsource-btn` is the block form on
-   the product inspector). This one sits INSIDE the sentence, at the end, so it
+   AN INLINE BUTTON, NOT A BLOCK ONE (the shell's `Button` beside the status is
+   the block form, `SourceStatus`). This one sits INSIDE the sentence, at the end, so it
    inherits the caption's 11px and only its colour and underline say it is
    pressable — a 12px pill on the end of an 11px line would be a second control
    grammar for the same act.
@@ -3728,33 +3630,7 @@ input.sf-list-marking {
 .sf-source-open:focus-visible {
   outline: 2px solid var(--sf-accent);
   outline-offset: 2px;
-  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;
-  border: 1px solid var(--sf-input-border);
-  border-radius: 8px;
-  background: transparent;
-  color: var(--sf-text-secondary);
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: border-color 0.12s, color 0.12s, background 0.12s;
-}
-.sf-blogsource-btn:hover:not(:disabled) {
-  border-color: var(--sf-accent);
-  color: var(--sf-accent);
-}
-.sf-blogsource-btn:disabled {
-  opacity: 0.55;
-  cursor: default;
+  border-radius: calc(var(--radius-sm) / 2);
 }
 
 /* Form picker — the "which form does this section show" control. Reuses the
@@ -3800,7 +3676,7 @@ input.sf-list-marking {
   border: 1px solid var(--sf-btn-border);
   background: var(--sf-panel);
   color: var(--sf-btn-text);
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   padding: 4px 10px;
   font-size: 12px;
   font-weight: 500;
@@ -3842,7 +3718,7 @@ ul.sf-image-status {
    because of its old name, `.sf-media-note` (card 66121). */
 .sf-image-slot-inert {
   border: 1.5px dashed var(--sf-input-border);
-  border-radius: 9px;
+  border-radius: var(--radius-lg);
   padding: 12px 14px;
   font-size: 12px;
   line-height: 1.5;
@@ -3879,7 +3755,7 @@ ul.sf-image-status {
   min-height: 150px;
   padding: 0;
   border: 1px solid var(--sf-line);
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   background: var(--sf-preview-bg);
   cursor: crosshair;
   touch-action: none;
@@ -3909,7 +3785,7 @@ ul.sf-image-status {
 }
 .sf-focus-cross {
   position: absolute;
-  background: rgb(255 255 255 / 45%);
+  background: color-mix(in srgb, var(--status-on-solid) 45%, transparent);
   pointer-events: none;
 }
 .sf-focus-cross--h {
@@ -3924,14 +3800,16 @@ ul.sf-image-status {
 }
 /* Drawn in white with a dark ring rather than in a panel token: it sits on a
    merchant's own photograph, which can be any colour, and a token that read
-   correctly against the panel would vanish against half of them. */
+   correctly against the panel would vanish against half of them. White and the
+   ring are the shell's own on-media pair (`--status-on-solid`, the media
+   scrim), which do not change with the theme for the same reason. */
 .sf-focus-marker {
   position: absolute;
   width: 18px;
   height: 18px;
-  border: 2px solid #fff;
+  border: 2px solid var(--status-on-solid);
   border-radius: 50%;
-  box-shadow: 0 0 0 1.5px rgb(0 0 0 / 55%), 0 1px 5px rgb(0 0 0 / 50%);
+  box-shadow: 0 0 0 1.5px var(--rosh-media-scrim-button), 0 1px 5px var(--rosh-media-scrim-button);
   transform: translate(-50%, -50%);
   pointer-events: none;
 }
@@ -4011,7 +3889,7 @@ ul.sf-image-status {
 .sf-note--error {
   color: var(--sf-danger);
   background: var(--sf-danger-tint);
-  border-radius: 6px;
+  border-radius: var(--radius-md);
 }
 /* Where this section's words come from, when they are not the merchant's to
    type (card 66089, owner ruling 7). A MODIFIER rather than a second note
@@ -4044,7 +3922,7 @@ ul.sf-image-status {
   margin: 0 0 4px;
   padding: 11px 13px;
   border: 1px solid var(--sf-divider);
-  border-radius: 12px;
+  border-radius: var(--radius-xl);
   background: var(--sf-track-bg);
 }
 /* Marked only once something has actually been overridden, so the card is quiet
@@ -4063,7 +3941,7 @@ ul.sf-image-status {
   /* Rounds ITSELF against the card's left corners, so the card no longer needs
      `overflow: hidden` to hide the square ends. Left radii only — the right side
      is a straight edge into the card. */
-  border-radius: 12px 0 0 12px;
+  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
 }
 /* The card's own caption — the panel's small-label voice, so it reads as a
    heading for the name below rather than as another name. */
@@ -4144,7 +4022,7 @@ ul.sf-image-status {
 .sf-part-style-trigger:focus-visible {
   outline: 2px solid var(--sf-accent);
   outline-offset: 2px;
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
 }
 /* Sits over the card's own content rather than pushing it down: the card is a
    summary and a menu that grew it would move the controls under it while a
@@ -4154,7 +4032,7 @@ ul.sf-image-status {
   z-index: 30;
   left: 0;
   right: 0;
-  box-shadow: 0 8px 24px rgb(0 0 0 / 0.18);
+  box-shadow: var(--es-menu-shadow);
 }
 .sf-part-style-option {
   display: flex;
@@ -4321,8 +4199,7 @@ ul.sf-image-status {
    slot now holds — without it the row keeps drawing `style` at full strength
    and the one visual difference between "set" and "following the style"
    disappears. */
-.sf-part-field.is-style-value > .es-field-head > .es-field-value,
-.sf-part-field.is-style-value > .es-field-head > .es-field-value > .sf-slider-val {
+.sf-part-field.is-style-value > .es-field-head > .es-field-value {
   color: var(--sf-muted);
 }
 
@@ -4352,10 +4229,29 @@ ul.sf-image-status {
   gap: 8px;
   min-width: 0;
 }
-/* In this column the picker keeps its own box: the window opens under the
-   dropdown at the column's width, and the swatch and hex sit at its end. */
-.sf-part-ink > .es-pick-colour > .es-pick-colour-row {
-  align-self: flex-end;
+/* The part panel's Color row: its name and what it holds on one line, the
+   theme's swatches and Any color under it — the shell's swatches and picker. */
+.sf-part-ink-top {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+.sf-part-ink-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--sf-muted);
+}
+.sf-part-ink-read {
+  margin-left: auto;
+  font-size: 12px;
+  color: var(--sf-text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+.sf-part-ink-swatches {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
 }
 
 /* The override mark, half two — and it IS the reset button, which is why it is
@@ -4586,10 +4482,21 @@ ul.sf-image-status {
   flex: 1 1 auto;
   min-width: 0;
 }
+/* Each tile sits in the shell's Tooltip (harness UI-24); its wrapper is the
+   grid item now, and the tile fills it. */
+.sf-tile-tip {
+  position: relative;
+  display: flex;
+  min-width: 0;
+}
+.sf-tile-tip > button {
+  flex: 1;
+  min-width: 0;
+}
 .sf-gallery-layouts button {
   border: 1px solid var(--sf-input-border);
   background: var(--sf-field-bg);
-  border-radius: 7px;
+  border-radius: var(--radius-lg);
   padding: 5px;
   cursor: pointer;
   transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
@@ -4615,7 +4522,7 @@ ul.sf-image-status {
 .sf-gallery-pic i {
   display: block;
   background: var(--sf-track-bg);
-  border-radius: 1.5px;
+  border-radius: calc(var(--radius-sm) / 2);
 }
 .sf-gallery-layouts button[aria-pressed="true"] .sf-gallery-pic i {
   background: var(--sf-accent);