efficient-easel 0.100.0 → 0.101.0

package/dist/panel/panel.css

@@ -330,61 +330,38 @@
   box-shadow: 0 0 0 3px var(--es-accent-ring);
 }
 
-/* THE CHOSEN CHIP IS THE DARKEST THING IN THE ROW (card 66302).
-
-   IT WAS A RAISED WHITE CHIP, AND THAT WAS NOT A MISTAKE. Card 66138 put white
-   on the grey track with a soft lift, and Lewis picked that look himself from
-   six treatments. He picked it BY EYE, AT A WIDTH WHERE THE WORDS WERE STILL
-   THERE — which is the whole reason this is a revision and not a correction.
-
-   WHAT CHANGED IS THE CONDITION, TWICE.
-
-   First the words went. A four-tab strip is already wordless below 200px, and
-   the panel's drag band bottoms out at 181px, so that state is live in the
-   editor today; card 66246 then made the shop's Weight row show one word of
-   four at the DEFAULT panel and none at the narrow end. A chip that used to sit
-   beside a word became the only thing saying which option is set.
-
-   Then the second mark went, and nobody noticed. Card 66248 moved the strip
-   into this package and the quiet label darkened from the muted grey to
-   `--es-text-secondary`. That darkening is right on its own terms — it is card
-   66138's AA fix, 4.39:1 to 9.37:1 on the track — but it also cut the
-   chosen-vs-quiet GLYPH contrast from 3.67:1 to 1.72:1. The strip lost the one
-   state cue that was already above 3:1, and the change was described as
-   cosmetic when it merged.
-
-   So the raised white chip was left carrying the whole message alone, at
-   1.10:1 against its own track, where WCAG 1.4.11 asks 3:1 of anything
-   identifying a control's STATE.
-
-   WHY DARK AND NOT A RING. Four treatments were drawn and measured for Lewis;
-   two of the routes were closed by arithmetic before he saw them (darkening the
-   track drops the quiet label to 3.40:1 and fails AA; pushing the glyph delta
-   only reaches 3:1 by putting that label back where 66138 moved it FROM). Of
-   what was left, this is the one that survives the DISABLED state:
-   `.es-segs[data-disabled]` fades the strip to 0.5 over the panel, and a ring
-   at 4.39:1 composites down to 1.89:1 while this holds 3.24:1. A cue that only
-   works while the control is live is a cue with a hole in it.
-
-   ⚠️ THE LIFT STAYS, AND IT IS NO LONGER THE MESSAGE. `--es-raised-shadow`
-   still seats the chip on the track. What it must not go back to being is the
-   thing telling the two states apart — a shadow is not a colour, so no
-   contrast ratio can score it, and that is exactly how this got to 1.10:1
-   without any guard noticing. `tests/panel-chip-contrast.test.ts` pins the
-   RATIO and not this colour, so a better answer is free to replace it. */
+/* THE CHOSEN CHIP IS BLUE (Lewis, 2026-10-06): 「用蓝色的背景, 不要黑色的了」.
+
+   Said while the shop's hand-built "pick one of 2-3" rungs were merged into
+   this control. It was `--es-text`, near-black, since card 66302; before that a
+   raised white chip (card 66138). Both editors draw every segmented control and
+   the settings tab strip from this one rule, so this is the whole change.
+
+   THE NUMBERS STILL HOLD, which is why the colour could move at all. Card 66302
+   made the chip the ONLY state cue once the words drop at the narrow end, and
+   WCAG 1.4.11 asks 3:1 of it: `--es-accent` on `--es-track-bg` is
+   4.70:1, and the white word on it is 5.17:1 (1.4.3 asks 4.5:1 at 12px).
+
+   ⚠️ THE LIFT STAYS, AND IT IS NOT THE MESSAGE. `--es-raised-shadow` seats the
+   chip on the track; the colour is what tells the states apart, because a
+   shadow cannot be scored and that is how this once sat at 1.10:1 unnoticed.
+   `tests/panel-chip-contrast.test.ts` pins the ratios AND, since the ruling,
+   the colour itself. */
 .es-tab.is-active,
 .es-seg.is-active {
-  background: var(--es-text);
+  background: var(--es-accent);
   color: var(--es-on-accent);
   box-shadow: var(--es-raised-shadow);
   border-radius: 6px;
 }
 
-/* Focused AND chosen: keep the lift, or the chip drops flat the moment a
-   keyboard reaches it. */
+/* Focused AND chosen. The quiet chip's ring is a translucent accent wash, and
+   laid against a chip that is itself the accent it reads as the chip growing,
+   not as focus. So this ring stands OFF the chip: a 2px gap in the panel
+   colour, then a solid accent ring — the blue chip, a white gap, a blue line. */
 .es-tab.is-active:focus-visible,
 .es-seg.is-active:focus-visible {
-  box-shadow: var(--es-raised-shadow), 0 0 0 3px var(--es-accent-ring);
+  box-shadow: 0 0 0 2px var(--es-panel), 0 0 0 4px var(--es-accent);
 }
 
 .es-tab-badge {
@@ -689,26 +666,36 @@
    merchant's answer — a pressed chip faded to the same grey as the ones beside
    it stops saying which answer that was.
 
-   ⚠️ THIS COLOUR BELONGS TO THE CHIP'S GROUND, NOT TO THE TRACK (card 66302).
-   It was `--es-text-secondary`, which was right while the chip was white:
-   10.31:1 on it. The moment the chip went dark that same rule drew
-   `--es-text-secondary` on `--es-text` — 1.72:1, an unreadable label on a
-   control that had just been made MORE visible. Nothing about the rule changed; what it sat on moved underneath
-   it. So it reads `--es-on-accent` for the same reason the enabled chip does,
-   and the strip says which option is out of force through the track's fade and
-   its quiet siblings rather than by dimming the one word still worth reading. */
-.es-seg:disabled.is-active { color: var(--es-on-accent); }
+   GREY, NOT BLUE, AND NOT FADED (2026-10-06). The live chip is the accent now,
+   and blue is the colour that says "this is in force" — so an answer out of
+   force drops to `--es-muted`. The arithmetic decided the rest: the blue chip
+   faded to half over the panel is 2.04:1 against its faded track, under the
+   3:1 a state cue needs. `--es-muted` with no fade is 4.39:1 on the track and
+   its white word 4.83:1. That is why the whole strip no longer fades (below):
+   any fade took this chip under 3:1 again.
+
+   ⚠️ THE WORD COLOUR BELONGS TO THE CHIP'S GROUND, NOT TO THE TRACK (card
+   66302): a label written for one ground went unreadable when the ground moved
+   under it. So the ground and the word are declared together, here. */
+.es-seg:disabled.is-active {
+  background: var(--es-muted);
+  color: var(--es-on-accent);
+}
 
 /* And none of them answers the pointer any more: the hover rule above would
    otherwise keep lighting a segment that cannot be chosen. */
 .es-seg:disabled:hover:not(.is-active) { color: var(--es-disabled); }
 
-/* THE WHOLE CONTROL, when every option went at once — one statement instead of
-   three identically faded chips. The track is the part that says "these buttons
-   are one control", so it is the right place to say the control is not in force.
-   A single option out of force leaves the track alone, because the strip still
-   is. */
-.es-segs[data-disabled] { opacity: 0.5; cursor: not-allowed; }
+/* THE WHOLE CONTROL, when every option went at once. Every button is then
+   `:disabled`, so the quiet words are already `--es-disabled` and the chosen
+   chip is already grey — the strip says "out of force" through them.
+
+   IT USED TO FADE TO 0.5, and that fade is gone on purpose (2026-10-06). An
+   opacity on the track composites the chosen chip with it, and no chip colour
+   the ruling allows survives that above 3:1: blue faded is 2.04:1, the grey
+   above faded is about 2:1. The chip is the one thing a disabled strip must
+   still say clearly, so the fade went rather than the chip. */
+.es-segs[data-disabled] { cursor: not-allowed; }
 
 /* ── a group: the soft pill row that folds ─────────────────────────────────── */
 
@@ -897,9 +884,23 @@ button.es-group-head:hover { background: var(--es-chip-bg); }
 
 .es-field.is-changed .es-field-label { color: var(--es-accent-text); }
 
+/* The same cue, read off the row itself: a row whose Default / Reset part says
+   Reset is changed, whether or not its host passed `changed`. A host that draws
+   the part inside a component of its own (it reads a live value through a
+   hook) is invisible to SettingsField, and without this its label stayed grey
+   beside a Reset — measured on the website's section Width row. */
+.es-field:has(> .es-field-head > .es-default-reset.is-changed) > .es-field-head .es-field-label {
+  color: var(--es-accent-text);
+}
+
 .es-field-value {
   margin-left: auto;
   font-size: 12px;
+  /* The part's own 16px, and the head's min-height: so a row is one height
+     whether its value is drawn or not. Left to the host's line-height (18px in
+     the website editor) a press on Reset, which empties the value, moved every
+     row below it by 1.5px. */
+  line-height: 16px;
   color: var(--es-text);
   font-variant-numeric: tabular-nums;
 }
@@ -922,31 +923,42 @@ button.es-group-head:hover { background: var(--es-chip-bg); }
 }
 
 /* ── Default / Reset: the end of a label line ─────────────────────────────────
-   Owner 2026-10-06: a value that follows its default says "Default", and a
-   changed one offers a "Reset" button, in the same place. ONE element in both
-   states (see SettingsDefaultReset.tsx), so both states share the box: same
-   font, same padding, same height. Only the colour and the press change, and
-   the row does not jump when a press turns one into the other.
-
-   It sits at the END of the label line. With a value on the row, the value's
-   own `margin-left: auto` has already pushed both right, and the gap between
-   them is the head's own 8px; with no value, the part pushes itself. */
+   Owner 2026-10-06: ONE part puts a changed setting back. Option E, final
+   2026-10-07: a ↺ icon button while the setting is changed, NOTHING while it is
+   not (the row's grey value already says it is the default).
+
+   ONE FIXED 22px SLOT IN BOTH STATES. The unchanged state is an empty span of
+   the same box, so every row's end lines up whether it can be reset or not.
+   It replaced PR 154's two hidden words, which sized the box to the wider of
+   "Default" and "Reset": there is no word to size for now.
+
+   Straight after the label the slot pushes itself to the row's end. After a
+   value it sits 4px from it (the head's 8px gap less 4, option E). After
+   anything else on the line — a colour row's readout — that thing has already
+   been pushed right; pick.css sets the gap there. A second `auto` would split
+   the free space and strand the slot mid-row (PR 163: 295px apart). */
 .es-default-reset {
   appearance: none;
   -webkit-appearance: none;
+  box-sizing: border-box;
   flex: none;
-  margin: 0 -4px 0 0;
-  padding: 2px 4px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  margin: 0;
+  padding: 0;
   border: 0;
-  border-radius: 4px;
+  border-radius: 6px;
   background: transparent;
-  font: inherit;
-  font-size: 11px;
-  font-weight: 500;
-  line-height: 12px;
   color: var(--es-muted);
-  white-space: nowrap;
-  cursor: default;
+}
+
+.es-default-reset svg {
+  display: block;
+  width: 15px;
+  height: 15px;
 }
 
 .es-default-reset.is-changed {
@@ -971,8 +983,14 @@ button.es-group-head:hover { background: var(--es-chip-bg); }
   outline-offset: 1px;
 }
 
-.es-field-head > .es-default-reset { margin-left: auto; }
-.es-field-value + .es-default-reset { margin-left: 0; }
+.es-field-name + .es-default-reset { margin-left: auto; }
+
+/* THE GREY VALUE IS THE "DEFAULT" WORD NOW (option E): a row whose slot is
+   empty draws its value grey, and the value takes the text colour once the
+   setting is changed. Scoped to rows that carry the part, so a value on a row
+   with nothing to reset keeps its colour. */
+.es-field:has(> .es-field-head > span.es-default-reset) .es-field-value { color: var(--es-muted); }
+.es-field-value + .es-default-reset { margin-left: -4px; }
 
 /* A boolean row is ONE line (card 8801, Option A). The switch rides the label
    line in the `action` slot, so there is no control row under it — and with no

package/dist/pick/index.d.ts

@@ -1,4 +1,5 @@
 import * as react from 'react';
+import { ReactNode } from 'react';
 import { P as PickWords } from '../words-is_Vy6hn.js';
 
 /** One colour the site's theme names — offered first, by name. */
@@ -24,6 +25,28 @@ type ColourPickerProps = {
      * caption that IS the value's hex is no word, and the row's hex box stays.
      */
     caption?: string;
+    /**
+     * The colour IN FORCE while `value` is `''`: the setting has none of its own
+     * and follows a style (the email's body text, `#333333`). The swatch paints
+     * it (`is-inherited`, not the not-set look), the row prints `caption` or
+     * else that colour's hex in grey (no word: the row's Default part already
+     * says the state, one idea one word, GG 2026-10-07) — in the hex BOX, so a
+     * press selects it all for copying (GG for Lewis, 2026-10-07: the colour a
+     * row follows is the one most often copied); and the window starts
+     * from it with its hex as a placeholder. ⚠️ Nothing is written until the merchant moves something:
+     * showing the colour a setting follows must not pin it. Left out, or `''`,
+     * an empty value is "Not set", exactly as before.
+     */
+    inherited?: string;
+    /**
+     * A control drawn at the END of the row, after the hex: the panel's Default /
+     * Reset part (`SettingsDefaultReset`, Lewis 2026-10-06). ⚠️ INSIDE the row,
+     * not after the picker: a line that holds the picker wraps item by item, and
+     * a part beside the picker could drop onto a line of its own at a narrow
+     * panel (measured at 220px on a short label) while the swatch stayed above.
+     * In the row, the swatch, the hex and the part wrap as one.
+     */
+    after?: ReactNode;
     /** The swatch's DOM id, for a row whose own `<label for>` points at it. */
     id?: string;
     readOnly?: boolean;
@@ -52,8 +75,21 @@ type ColourPickerProps = {
  * The hex box is always a box you can type into — pasting a brand colour
  * costs no clicks — live on the keystroke that makes it a colour, and put back
  * to what is stored on Enter, Escape or leaving it.
+ *
+ * ONE LINE (Lewis, 2026-10-07, option E, final v9). In a line that holds it
+ * (`.es-field-head`, `.es-pick-line`) the label, the swatch, the hex and the
+ * host's `after` never wrap: short of room the label fades at its end (it
+ * keeps 56px), then the hex (it keeps 36px) — pick.css. What is cut is
+ * MEASURED here (`data-clipped` turns the fade on; text that fits is never
+ * faded), and over a cut label or hex a small dark tag shows the whole text.
+ * A press on the hex edits it IN PLACE: pick.css widens it to seven
+ * characters from its own left edge, never past the row's end
+ * (`--es-pick-edit-room`, measured here), and the `after` part steps aside
+ * only when that box reaches it (`data-editing="over"`). The swatch and the
+ * label never move. The accessible names are whole throughout: the fade and
+ * the tag are for the eye.
  */
-declare function ColourPicker({ value, onChange, label, theme, caption, id: swatchId, readOnly, words, }: ColourPickerProps): react.JSX.Element;
+declare function ColourPicker({ value, onChange, label, theme, caption, inherited, after, id: swatchId, readOnly, words, }: ColourPickerProps): react.JSX.Element;
 type ColourWindowProps = {
     /** The colour, `#rrggbb`, or `''` while there is none. */
     value: string;
@@ -67,6 +103,8 @@ type ColourWindowProps = {
     onClose?: () => void;
     /** The window's DOM id, for the opener's `aria-controls`. */
     id?: string;
+    /** The colour in force while `value` is `''` (see `ColourPicker`): the window starts from it, its hex a placeholder. */
+    inherited?: string;
     readOnly?: boolean;
     words?: PickWords['colour'];
     /**
@@ -91,7 +129,7 @@ type ColourWindowProps = {
  * color, plan step E6) opens the same one, so there is one window, not two.
  * The opener owns when it is open and puts it in the panel's own flow.
  */
-declare function ColourWindow({ value, onChange, label, theme, onClose, id, readOnly, words, swatch, dragWrites, }: ColourWindowProps): react.JSX.Element;
+declare function ColourWindow({ value, onChange, label, theme, onClose, id, inherited, readOnly, words, swatch, dragWrites, }: ColourWindowProps): react.JSX.Element;
 
 type ImageBoxProps = {
     /** The file's URL, or `''` while the setting has none. */

package/dist/pick/index.js

@@ -1,4 +1,4 @@
-import{mediaName as e}from"../chunk-AZT7V4UM.js";export{ColourPicker,ColourWindow,HEX_MAX_LENGTH,hexReadout,hexToHsv,hsvToHex,hueFromPoint,mediaName,svFromPoint,typedHex}from"../chunk-AZT7V4UM.js";import{DEFAULT_PICK_WORDS as a}from"../chunk-ZAOM6PFH.js";import{useState as i}from"react";import{jsx as l,jsxs as s}from"react/jsx-runtime";function c({value:c,onChange:n,label:o,openLibrary:r,kind:t="image",placeholder:m,readOnly:d,words:p=a.image}){const[u,h]=i(!1),[b,g]=i(!1),k=Boolean(r)&&!d,N=async()=>{if(r&&!u&&!d){h(!0),g(!1);try{const e=await r();e&&n(e)}catch{g(!0)}finally{h(!1)}}},f=u?/* @__PURE__ */l("p",{className:"es-pick-image-status",role:"status",children:p.choosing}):b?/* @__PURE__ */l("p",{className:"es-pick-image-status is-error",role:"alert",children:p.failed}):null;if(!c)/* @__PURE__ */
+import{mediaName as e}from"../chunk-H24N5TMZ.js";export{ColourPicker,ColourWindow,HEX_MAX_LENGTH,hexReadout,hexToHsv,hsvToHex,hueFromPoint,mediaName,svFromPoint,typedHex}from"../chunk-H24N5TMZ.js";import{DEFAULT_PICK_WORDS as a}from"../chunk-ZAOM6PFH.js";import{useState as i}from"react";import{jsx as l,jsxs as s}from"react/jsx-runtime";function c({value:c,onChange:n,label:o,openLibrary:r,kind:t="image",placeholder:m,readOnly:d,words:p=a.image}){const[u,h]=i(!1),[b,g]=i(!1),k=Boolean(r)&&!d,N=async()=>{if(r&&!u&&!d){h(!0),g(!1);try{const e=await r();e&&n(e)}catch{g(!0)}finally{h(!1)}}},f=u?/* @__PURE__ */l("p",{className:"es-pick-image-status",role:"status",children:p.choosing}):b?/* @__PURE__ */l("p",{className:"es-pick-image-status is-error",role:"alert",children:p.failed}):null;if(!c)/* @__PURE__ */
 return s("div",{className:"es-pick-image",children:[
 /* @__PURE__ */s("button",{type:"button",className:"es-pick-image-slot",onClick:N,disabled:!k||u,"aria-label":p.empty({label:o,kind:t,placeholder:m}),children:[
 /* @__PURE__ */l("span",{className:"es-pick-image-slot-name",children:m??("video"===t?p.chooseVideo:p.chooseImage)}),k?/* @__PURE__ */l("span",{className:"es-pick-image-slot-hint",children:p.hint}):null]}),f]});const v=e(c),y=v?p.named({label:o,name:v}):o;/* @__PURE__ */

package/dist/pick/pick.css

@@ -7,12 +7,14 @@
   /* The hex box and the word that stands in for it ("Auto", "Not set") are
      ONE width. A row is right-aligned as a unit, so a word narrower than a hex
      pushes its swatch out of line down a column of colour rows. */
-  --es-pick-readout-w: 80px;
+  --es-pick-readout-w: 68px;
   display: flex;
   flex-direction: column;
   gap: 12px;
 }
 .es-pick-colour-row {
+  /* The tag is placed against the row. */
+  position: relative;
   display: flex;
   align-items: center;
   gap: 8px;
@@ -46,16 +48,27 @@
 .es-pick-swatch:disabled {
   cursor: default;
 }
+/* THE HEX'S SLOT (Lewis 2026-10-07, option E): 68px, and down to 36px when
+   the line is short of room — after the label has given way to its 56px. The
+   hex or the word that stands in for it fills it. */
+.es-pick-hexwrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex: 0 1 var(--es-pick-readout-w);
+  max-width: var(--es-pick-readout-w);
+  min-width: 36px;
+}
 .es-pick-hex {
   box-sizing: border-box;
-  width: var(--es-pick-readout-w);
+  width: 100%;
   min-width: 0;
   padding: 4px 8px;
   border: 1px solid transparent;
   border-radius: 6px;
   background: transparent;
   color: var(--es-text);
-  font: 500 12px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
+  font: 500 11px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
   letter-spacing: 0.02em;
 }
 .es-pick-hex:hover {
@@ -66,13 +79,171 @@
   border-color: var(--es-accent);
   background: var(--es-panel);
 }
+/* The hex a row FOLLOWS, in the row's box: grey at rest, so it does not read
+   as a value of its own; normal ink while it is edited (GG for Lewis,
+   2026-10-07: pressed to copy it, or to paste over it). */
+.es-pick-hex.is-inherited {
+  color: var(--es-muted);
+}
+.es-pick-hex.is-inherited:focus {
+  color: var(--es-text);
+}
+/* The inherited hex, while nothing is stored: grey, so it does not read as a
+   value. */
+.es-pick-hex::placeholder {
+  color: var(--es-muted);
+  opacity: 1;
+}
 .es-pick-caption {
   box-sizing: border-box;
-  width: var(--es-pick-readout-w);
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
   padding: 0 8px;
+  white-space: nowrap;
   font-size: 12px;
   color: var(--es-muted);
 }
+/* Cut text fades at its end, never cut hard. `data-clipped` is MEASURED
+   (ColourPicker): text that fits is never faded. */
+.es-pick-hex[data-clipped],
+.es-pick-caption[data-clipped] {
+  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent);
+  mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent);
+}
+/* EDITED IN PLACE: a press widens the hex to seven characters (`#RRGGBB`
+   with its letter-spacing, the 8px insets and the 1px border), from its own
+   left edge, so the text does not jump and the swatch and the label do not
+   move; never past the row's end (`--es-pick-edit-room`, measured). */
+.es-pick-colour-row .es-pick-hex:focus {
+  position: absolute;
+  z-index: 2;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: calc(7ch + 0.14em + 18px);
+  max-width: var(--es-pick-edit-room, none);
+  -webkit-mask-image: none;
+  mask-image: none;
+  box-shadow: 0 0 0 2px var(--es-accent-tint);
+}
+/* 4px from the hex to the part after it (the reset): the row's 8px, less 4. */
+.es-pick-colour-row > .es-pick-hexwrap + * {
+  margin-left: -4px;
+}
+/* The part after the hex steps aside ONLY when the edit box reaches it. */
+.es-pick-colour-row[data-editing='over'] > .es-pick-hexwrap ~ * {
+  visibility: hidden;
+}
+/* The tag over a cut label or hex: the whole text, small and dark, above it. */
+.es-pick-tag {
+  position: absolute;
+  z-index: 3;
+  transform: translateY(calc(-100% - 6px));
+  padding: 4px 8px;
+  border-radius: 6px;
+  background: #111827;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.3;
+  white-space: nowrap;
+  pointer-events: none;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 0.2);
+}
+/* `.es-pick-swatch.is-inherited` (no rule of its own): the swatch is painted
+   with the colour the setting follows, like any colour. The class is there
+   for a host that wants to mark it. */
+
+/* ── A line that holds the picker ───────────────────────────────────────── */
+/* BOTH EDITORS HOLD THE PICKER IN A LINE: `SettingsField`'s `action` slot
+   (`.es-field-head`, this package's own class), or a colour SUB-row inside one
+   setting (the email's Logo "Color 1" / "Color 2", a button's Fill / Border /
+   Text), which is not a SettingsField and takes `.es-pick-line`: the host's
+   label first, then the picker.
+
+   The picker's own box steps aside (`display: contents`), so its two halves
+   become items of that line: the swatch and hex at the line's end
+   (`margin-left: auto`), and the window wrapping onto a line of its own at the
+   FULL width. Left in the picker's box, the window opens in the few pixels the
+   action slot has.
+
+   Moved here from the storefront's stylesheet (2026-10-06), so the email does
+   not copy it: one rule for both editors. The shop's `.sf-field--row` can move
+   onto `.es-pick-line` later. */
+.es-pick-line {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+/* The sub-row's label. A host may use its own instead. */
+.es-pick-line-label {
+  min-width: 0;
+  font-size: 12px;
+  color: var(--es-text-secondary);
+}
+.es-field-head:has(> .es-pick-colour),
+.es-pick-line:has(> .es-pick-colour) {
+  flex-wrap: wrap;
+}
+.es-field-head > .es-pick-colour,
+.es-pick-line > .es-pick-colour {
+  display: contents;
+}
+/* ONE LINE (Lewis 2026-10-07, option E). The row steps aside too, so the
+   label, the swatch, the hex's slot and the part after it are items of ONE
+   line, sized by rule and never by how wide their text is:
+   - the hex's slot is laid out at its 36px (so the line never wraps) and
+     grows FIRST, to its 68px;
+   - the label takes what is left, never under 56px, so it gives way first;
+   - the swatch is pushed to the end with what follows it, so a column of
+     rows lines up. The tag is placed against the line. */
+.es-field-head:has(> .es-pick-colour),
+.es-pick-line:has(> .es-pick-colour) {
+  position: relative;
+}
+.es-field-head > .es-pick-colour > .es-pick-colour-row,
+.es-pick-line > .es-pick-colour > .es-pick-colour-row {
+  display: contents;
+}
+.es-field-head > .es-pick-colour > .es-pick-colour-row > .es-pick-swatch,
+.es-pick-line > .es-pick-colour > .es-pick-colour-row > .es-pick-swatch {
+  margin-left: auto;
+}
+.es-field-head > .es-pick-colour > .es-pick-colour-row > .es-pick-hexwrap,
+.es-pick-line > .es-pick-colour > .es-pick-colour-row > .es-pick-hexwrap {
+  flex: 1000 1 0;
+}
+/* The label: whatever is left, never under 56px, fading at its end when cut. */
+.es-field-head:has(> .es-pick-colour) > .es-field-name,
+.es-pick-line:has(> .es-pick-colour) > .es-pick-line-label {
+  flex: 1 1 0;
+  min-width: 56px;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.es-field-head:has(> .es-pick-colour) .es-field-label {
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.es-field-head:has(> .es-pick-colour) .es-field-label[data-clipped],
+.es-pick-line > .es-pick-line-label[data-clipped] {
+  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
+  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
+}
+.es-field-head > .es-pick-colour > .es-pick-window,
+.es-pick-line > .es-pick-colour > .es-pick-window {
+  flex: 1 0 100%;
+  min-width: 0;
+  /* ⚠️ What a host puts AFTER the picker on the same line (the panel's
+     Default / Reset part, `SettingsDefaultReset`) comes after the window in
+     DOM order once the picker's box is `contents`, and the window's 100%
+     basis would push it onto a line of its own UNDER the open window. Ordered
+     last, the window keeps that control beside the swatch. */
+  order: 1;
+}
 
 /* ── The window under the row ───────────────────────────────────────────── */
 .es-pick-window {
@@ -84,10 +255,13 @@
   border-radius: 10px;
   background: var(--es-panel);
 }
+/* ONE theme row, for the colour picker and the text box's colour window
+   (Lewis 2026-10-07). The swatches are one group: the scale's step for the
+   cells of one group. */
 .es-pick-theme {
   display: flex;
   flex-wrap: wrap;
-  gap: 8px;
+  gap: 4px;
 }
 .es-pick-theme-swatch {
   width: 22px;
@@ -98,11 +272,11 @@
   box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1);
   cursor: pointer;
 }
+/* The chosen one: the ring INSIDE the swatch (Lewis 2026-10-07, option A) —
+   2px of accent, then 2px of panel before the colour. Outside, it touched the
+   next swatch. Focus is the outline, outside it, so both show at once. */
 .es-pick-theme-swatch[aria-pressed='true'] {
-  box-shadow:
-    inset 0 0 0 1px rgb(0 0 0 / 0.1),
-    0 0 0 2px var(--es-panel),
-    0 0 0 4px var(--es-accent);
+  box-shadow: inset 0 0 0 2px var(--es-accent), inset 0 0 0 4px var(--es-panel);
 }
 /* The square: the hue at full strength, washed to white left-to-right and to
    black top-to-bottom — which is what saturation and brightness ARE. */
@@ -152,7 +326,6 @@
   border-radius: 6px;
   box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1);
 }
-
 /* ── The image box ──────────────────────────────────────────────────────── */
 .es-pick-image {
   display: flex;

package/dist/rail/index.js

@@ -1 +1 @@
-import"../chunk-OWBO4WKA.js";export{EaselRail,EaselRailButton,railCssVars,railTokens}from"../chunk-WZ7TGAAT.js";import"../chunk-2OAZYSWJ.js";import"../chunk-BZ5ASXOL.js";export{AddIcon,LayersIcon,MediaIcon,PageIcon as PagesIcon,SitemapIcon,StylesIcon}from"../chunk-6EIVTKZZ.js";
+import"../chunk-OWBO4WKA.js";export{EaselRail,EaselRailButton,railCssVars,railTokens}from"../chunk-WZ7TGAAT.js";import"../chunk-2OAZYSWJ.js";import"../chunk-BZ5ASXOL.js";export{AddIcon,LayersIcon,MediaIcon,PageIcon as PagesIcon,SitemapIcon,StylesIcon}from"../chunk-L5KW4HG5.js";

package/dist/strings/catalogue.d.ts

@@ -1,11 +1,11 @@
 import { S as SaveWords } from '../words-BMzV04b1.js';
 import { N as NoticeWords, C as ChromeWords } from '../words-AHHfiaRY.js';
-import { C as CopyWords } from '../words-DBq7vfHy.js';
+import { C as CopyWords } from '../words-XH0TvZPg.js';
 import { D as DragWords } from '../words-BDignMl_.js';
 import { LockWords } from '../edit-lock/index.js';
-import { F as FieldsWords } from '../words-CzoyDNHm.js';
+import { F as FieldsWords } from '../words-D8kf071T.js';
 import { N as NodeMenuWords } from '../words-DMG4dYq2.js';
-import { P as PanelWords } from '../words-CJjUKcV5.js';
+import { P as PanelWords } from '../words-BGrHZAJJ.js';
 import { P as PickWords } from '../words-is_Vy6hn.js';
 import { S as StyleClipboardWords } from '../words-CnnHb9jo.js';
 import { T as TextStylesWords } from '../words-CRYvAiHX.js';

package/dist/strings/catalogue.js

@@ -1 +1 @@
-export{DEFAULT_EASEL_STRINGS,mergeEaselStrings}from"../chunk-SAJUCHOX.js";import"../chunk-M6F6LS3H.js";import"../chunk-6WY6ZXJG.js";import"../chunk-AELNNAFM.js";import"../chunk-3EDSDPIP.js";import"../chunk-TRVZ7C23.js";import"../chunk-WK3AFPXY.js";import"../chunk-H6DDIBQ4.js";import"../chunk-RE4LP46F.js";import"../chunk-ZJEBF4NB.js";import"../chunk-2OAZYSWJ.js";import"../chunk-JQM3V7XQ.js";import"../chunk-ZAOM6PFH.js";import"../chunk-LA54QLP5.js";import"../chunk-HDVD27VB.js";import"../chunk-O2NLQBFX.js";
+export{DEFAULT_EASEL_STRINGS,mergeEaselStrings}from"../chunk-IG3U5NWJ.js";import"../chunk-M6F6LS3H.js";import"../chunk-6WY6ZXJG.js";import"../chunk-AELNNAFM.js";import"../chunk-3EDSDPIP.js";import"../chunk-QTLAVDJE.js";import"../chunk-WK3AFPXY.js";import"../chunk-H6DDIBQ4.js";import"../chunk-ZJEBF4NB.js";import"../chunk-RE4LP46F.js";import"../chunk-2OAZYSWJ.js";import"../chunk-UH7IGZKF.js";import"../chunk-ZAOM6PFH.js";import"../chunk-FPOKPNO4.js";import"../chunk-546BBOPE.js";import"../chunk-O2NLQBFX.js";

package/dist/strings/index.d.ts

@@ -3,12 +3,12 @@ export { CanvasWords, DEFAULT_EASEL_STRINGS, RailWords, mergeEaselStrings } from
 import * as react from 'react';
 import { ReactNode } from 'react';
 export { C as ChromeWords, N as NoticeWords } from '../words-AHHfiaRY.js';
-export { C as CopyWords } from '../words-DBq7vfHy.js';
+export { C as CopyWords } from '../words-XH0TvZPg.js';
 export { D as DragWords } from '../words-BDignMl_.js';
-export { F as FieldsWords } from '../words-CzoyDNHm.js';
+export { F as FieldsWords } from '../words-D8kf071T.js';
 export { LockWords } from '../edit-lock/index.js';
 export { N as NodeMenuWords } from '../words-DMG4dYq2.js';
-export { P as PanelWords } from '../words-CJjUKcV5.js';
+export { P as PanelWords } from '../words-BGrHZAJJ.js';
 export { P as PickWords } from '../words-is_Vy6hn.js';
 export { S as SaveWords } from '../words-BMzV04b1.js';
 export { S as StyleClipboardWords } from '../words-CnnHb9jo.js';

package/dist/strings/index.js

@@ -1,2 +1,2 @@
-import{DEFAULT_EASEL_STRINGS as r,mergeEaselStrings as n}from"../chunk-SAJUCHOX.js";export{DEFAULT_EASEL_STRINGS,mergeEaselStrings}from"../chunk-SAJUCHOX.js";import"../chunk-M6F6LS3H.js";import"../chunk-6WY6ZXJG.js";import"../chunk-AELNNAFM.js";import"../chunk-3EDSDPIP.js";import"../chunk-TRVZ7C23.js";import"../chunk-WK3AFPXY.js";import"../chunk-H6DDIBQ4.js";import"../chunk-RE4LP46F.js";import"../chunk-ZJEBF4NB.js";import"../chunk-2OAZYSWJ.js";import"../chunk-JQM3V7XQ.js";import"../chunk-ZAOM6PFH.js";import"../chunk-LA54QLP5.js";import"../chunk-HDVD27VB.js";import{stringsContext as o}from"../chunk-MFIRYGHW.js";import"../chunk-O2NLQBFX.js";import{useContext as t,useMemo as c}from"react";import{jsx as i}from"react/jsx-runtime";function s({value:s,locale:u,children:m}){const e=o(),p=t(e),h=p?.strings??r,j=u??p?.locale??"en",k=c(()=>({strings:n(h,s),locale:j}),[h,s,j]);/* @__PURE__ */
+import{DEFAULT_EASEL_STRINGS as r,mergeEaselStrings as n}from"../chunk-IG3U5NWJ.js";export{DEFAULT_EASEL_STRINGS,mergeEaselStrings}from"../chunk-IG3U5NWJ.js";import"../chunk-M6F6LS3H.js";import"../chunk-6WY6ZXJG.js";import"../chunk-AELNNAFM.js";import"../chunk-3EDSDPIP.js";import"../chunk-QTLAVDJE.js";import"../chunk-WK3AFPXY.js";import"../chunk-H6DDIBQ4.js";import"../chunk-ZJEBF4NB.js";import"../chunk-RE4LP46F.js";import"../chunk-2OAZYSWJ.js";import"../chunk-UH7IGZKF.js";import"../chunk-ZAOM6PFH.js";import"../chunk-FPOKPNO4.js";import"../chunk-546BBOPE.js";import{stringsContext as o}from"../chunk-MFIRYGHW.js";import"../chunk-O2NLQBFX.js";import{useContext as t,useMemo as c}from"react";import{jsx as i}from"react/jsx-runtime";function s({value:s,locale:u,children:m}){const e=o(),p=t(e),h=p?.strings??r,j=u??p?.locale??"en",k=c(()=>({strings:n(h,s),locale:j}),[h,s,j]);/* @__PURE__ */
 return i(e.Provider,{value:k,children:m})}function u(){return t(o())?.strings??r}function m(){return t(o())?.locale??"en"}export{s as EaselStringsProvider,m as useEaselLocale,u as useEaselStrings};