efficient-easel 0.106.0 → 1.0.0

package/dist/fields/fields.css

@@ -11,140 +11,24 @@
  * file.
  */
 
-/* ── the box: one line, several lines, the dropdown's button ──────────────── */
-
-.es-fin {
-  box-sizing: border-box;
-  width: 100%;
-  min-width: 0;
-  height: 32px;
-  padding: 0 12px;
-  border: 1px solid var(--es-input-border);
-  border-radius: var(--es-field-radius);
-  background: var(--es-field-bg);
-  color: var(--es-field-text);
-  font: inherit;
-  font-size: 12px;
-  line-height: 1.4;
-}
-.es-fin::placeholder { color: var(--es-field-placeholder); }
-.es-fin:hover:not(:disabled):not([readonly]) { border-color: var(--es-muted); }
-.es-fin:focus-visible,
-.es-fin:focus {
-  outline: none;
-  border-color: var(--es-accent);
-  box-shadow: 0 0 0 3px var(--es-accent-ring);
-}
-/* A value nobody may change is still a value somebody has to READ: the grey
-   ground says the state, and the ink stays legible on it. It was `--es-muted`,
-   4.39:1 on this ground at 12px — a hair under the 4.5:1 WCAG AA asks (second
-   host, axe-core, 2026-10-07). The number cell's read-only state below is the
-   same rule. Held by ratio in tests/contrast-small-text.test.ts. */
-.es-fin[readonly],
-.es-fin:disabled { background: var(--es-track-bg); color: var(--es-text-secondary); }
-
-.es-fin--area {
-  height: auto;
-  min-height: 64px;
-  padding: 8px 12px;
-  resize: vertical;
-}
-
-/* ── a number: the cell (plan step E4) ─────────────────────────────────────
-   icon · number · unit · two stacked arrows, in ONE box with react-os-shell's
-   Input look (32px tall, the shell's border and radius, 14px text). The ring
-   is on the whole cell while the number inside has focus, as the design draws
-   it: react-os-shell's blue-400 line and a 2px ring at 30%.
-
-   SPACING IS THE SCALE ONLY (2 / 4 / 8 / 12 / 16 / 32), read from the
-   `--es-space-*` tokens. The fallback after each is the same step, for a host
-   whose sheet is older than the scale. */
-
-.es-fnum {
-  box-sizing: border-box;
-  display: flex;
-  align-items: stretch;
-  gap: var(--es-space-4, 4px);
-  width: 100%;
-  min-width: 0;
-  height: 32px;
-  padding-inline: var(--es-space-8, 8px);
-  border: 1px solid var(--es-input-border);
-  border-radius: var(--es-field-radius);
-  background: var(--es-field-bg);
-  color: var(--es-field-text);
-}
-.es-fnum--arrows { padding-inline-end: 0; }
-.es-fnum:hover:not(.is-readonly):not(:focus-within) { border-color: var(--es-muted); }
-.es-fnum:focus-within {
-  border-color: var(--es-focus-line, #60a5fa);
-  box-shadow: 0 0 0 2px var(--es-focus-ring, rgba(96, 165, 250, 0.3));
-}
-.es-fnum.is-readonly { background: var(--es-track-bg); color: var(--es-text-secondary); }
-
-.es-fnum-icon { display: flex; align-items: center; flex: none; color: var(--es-field-placeholder); }
+/* ── the box: one line, several lines, a number ─────────────────────────────
+   The shell's Input / Textarea / InputNumber (harness UI-24): their border,
+   ground, ink, focus ring, read-only look, arrows and the grey of a number
+   that follows the style are the kit's, at its small rung, since
+   efficient-shell 4.164.0 — the read-only ground this sheet painted as a
+   SHELL GAP is gone. What stays is how a cell sits in its row. */
+
+/* A NUMBER (the cell, plan step E4): fills its share of the row; a cell with a
+   `title` stands in the shell Tooltip's wrapper, and fills that. */
+.es-fnum { flex: 1 1 auto; min-width: 0; }
+span:has(> .es-fnum) { display: flex; min-width: 0; }
+.es-fnum-icon { display: flex; align-items: center; }
 .es-fnum-icon svg { width: 14px; height: 14px; }
 
-.es-fnum-box {
-  flex: 1 1 auto;
-  min-width: 0;
-  width: 100%;
-  padding: 0;
-  border: 0;
-  outline: none;
-  background: none;
-  color: inherit;
-  font: inherit;
-  font-size: 14px;
-  font-variant-numeric: tabular-nums;
-}
-.es-fnum-box::placeholder { color: var(--es-field-placeholder); opacity: 1; }
-/* A grey number follows the style: what shows is the style's, not the cell's. */
-.es-fnum.is-style .es-fnum-box { color: var(--es-field-placeholder); }
-
-.es-fnum-unit { align-self: center; flex: none; font-size: 12px; color: var(--es-muted); white-space: nowrap; }
-
-.es-fnum-arrows {
-  display: flex;
-  flex-direction: column;
-  flex: none;
-  width: 18px;
-  border-left: 1px solid var(--es-line);
-}
-.es-fnum-arrow {
-  flex: 1 1 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 0;
-  padding: 0;
-  border: 0;
-  background: none;
-  color: var(--es-icon);
-  cursor: pointer;
-  touch-action: none;
-}
-.es-fnum-arrow--up {
-  border-bottom: 1px solid var(--es-line);
-  border-top-right-radius: calc(var(--es-field-radius) - 1px);
-}
-.es-fnum-arrow--down { border-bottom-right-radius: calc(var(--es-field-radius) - 1px); }
-.es-fnum-arrow:hover:not(:disabled) { background: var(--es-hover); color: var(--es-text); }
-.es-fnum-arrow:disabled { color: var(--es-disabled); cursor: default; }
-.es-fnum-arrow svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
-
 /* ── a slider row (Site styles, Email styles; plan step E4) ────────────────
-   The name left and the value right on one line, the slider under them. The
-   value is a quiet box until it is hovered or has focus. */
+   The name over the shell's `Slider` (its range and its typed box, UI-24). */
 
 .es-fslider { display: flex; flex-direction: column; gap: var(--es-space-4, 4px); min-width: 0; }
-.es-fslider-top {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: var(--es-space-8, 8px);
-  min-width: 0;
-}
 .es-fslider-name {
   min-width: 0;
   overflow: hidden;
@@ -154,114 +38,16 @@
   font-weight: 500;
   color: var(--es-text-secondary);
 }
-.es-fslider-read { display: inline-flex; align-items: baseline; gap: var(--es-space-2, 2px); flex: none; }
-.es-fslider-value {
-  box-sizing: content-box;
-  width: 5ch;
-  padding: var(--es-space-2, 2px) var(--es-space-4, 4px);
-  border: 0;
-  border-radius: 4px;
-  outline: none;
-  background: none;
-  color: var(--es-field-text);
-  font: inherit;
-  font-size: 12.5px;
-  font-variant-numeric: tabular-nums;
-  text-align: right;
-  cursor: text;
-}
-.es-fslider-value:hover { background: var(--es-hover); }
-.es-fslider-value:focus { background: var(--es-field-bg); box-shadow: inset 0 0 0 1px var(--es-focus-line, #60a5fa); }
-.es-fslider-value::placeholder { color: var(--es-field-placeholder); opacity: 1; }
-.es-fslider.is-style .es-fslider-value { color: var(--es-field-placeholder); }
-.es-fslider-unit { font-size: 12px; color: var(--es-field-placeholder); }
-.es-fslider-range { width: 100%; height: 18px; margin: 0; accent-color: var(--es-accent); }
+/* A row with no number of its own (Auto, or the style's number) is the shell's
+   empty box: the word or the number is its placeholder, grey. */
 
-.es-fbtn {
-  height: 28px;
-  min-width: 28px;
-  padding: 0 8px;
-  border: 1px solid var(--es-btn-border);
-  border-radius: var(--es-field-radius);
-  background: var(--es-raised);
-  color: var(--es-btn-text);
-  font: inherit;
-  font-size: 12px;
-  cursor: pointer;
-}
-.es-fbtn:hover:not(:disabled) { background: var(--es-hover); }
-.es-fbtn:disabled { color: var(--es-disabled); cursor: default; }
-.es-fbtn:focus-visible { outline: 2px solid var(--es-accent); outline-offset: 1px; }
-
-/* ── one of a set: the button and its list ────────────────────────────────── */
+/* ── one of a set: the shell's Select / SearchableSelect ────────────────────
+   The box, the list, its groups, its ticks and its search are the shell's
+   (harness UI-24, efficient-shell 4.164.0). What stays is the row a host's
+   options draw inside the shell's row: a picture column and a quiet fact. */
 
 .es-fsel { position: relative; width: 100%; min-width: 0; }
-.es-fsel-button {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  text-align: left;
-  cursor: pointer;
-}
-.es-fsel-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.es-fsel-value.is-empty { color: var(--es-field-placeholder); }
-/* The chevron is drawn, not a glyph, so it sits on the same stroke as the
-   panel's other chevrons whatever the font. */
-.es-fsel-chev {
-  flex: none;
-  width: 7px;
-  height: 7px;
-  margin: -3px 2px 0 0;
-  border-right: 1.6px solid var(--es-icon);
-  border-bottom: 1.6px solid var(--es-icon);
-  transform: rotate(45deg);
-}
-.es-fsel-list {
-  position: absolute;
-  z-index: 20;
-  top: calc(100% + 4px);
-  left: 0;
-  right: 0;
-  max-height: 240px;
-  overflow-y: auto;
-  margin: 0;
-  padding: 4px;
-  list-style: none;
-  border: 1px solid var(--es-line);
-  border-radius: var(--es-row-radius);
-  background: var(--es-raised);
-  box-shadow: var(--es-panel-shadow);
-}
-.es-fsel-list:focus { outline: none; }
-.es-fsel-option {
-  padding: 8px;
-  border-radius: var(--es-field-radius);
-  font-size: 12px;
-  color: var(--es-text);
-  cursor: pointer;
-}
-.es-fsel-option.is-active { background: var(--es-hover); }
-.es-fsel-option.is-chosen { color: var(--es-accent-text); font-weight: 600; }
-.es-fsel-option[aria-disabled='true'] { color: var(--es-disabled); cursor: default; }
-/* A heading over a run of options (`FieldOption.group`): a quiet label above
-   its options, and not an option itself — no hover, no pointer. */
-.es-fsel-group-list { margin: 0; padding: 0; list-style: none; }
-.es-fsel-group + .es-fsel-group,
-.es-fsel-option + .es-fsel-group { margin-top: 4px; }
-.es-fsel-group-head {
-  padding: 8px 8px 4px;
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--es-muted);
-  cursor: default;
-}
-.es-fsel-group-count { margin-left: 4px; font-weight: 400; }
-
-/* The editor's one pop-up list (card [MERGE] One Pop-up List For Editor And
-   One For Shoppers): what the website editor's own lists drew, here once.
-   A row with more than its label lays its parts out in a line. */
-.es-fsel-option--rich { display: flex; align-items: center; gap: 8px; }
+.es-fsel-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
 .es-fsel-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .es-fsel-meta { flex: none; font-size: 11px; font-weight: 400; color: var(--es-muted); }
 .es-fsel-thumb {
@@ -273,61 +59,6 @@
   background: var(--es-track-bg);
 }
 .es-fsel-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
-/* `multiple`: a tick box per row, drawn (the row is the option, not an <input>). */
-.es-fsel-tick {
-  flex: none;
-  position: relative;
-  box-sizing: border-box;
-  width: 14px;
-  height: 14px;
-  border: 1.5px solid var(--es-input-border);
-  border-radius: 3px;
-  background: var(--es-field-bg);
-}
-.es-fsel-tick.is-on { border-color: var(--es-accent); background: var(--es-accent); }
-.es-fsel-tick.is-on::after {
-  content: '';
-  position: absolute;
-  left: 3.5px;
-  top: 0.5px;
-  width: 3.5px;
-  height: 7px;
-  border-right: 1.6px solid var(--es-on-accent);
-  border-bottom: 1.6px solid var(--es-on-accent);
-  transform: rotate(45deg);
-}
-/* A tick box says "on" itself, so a ticked row keeps the ordinary ink. */
-.es-fsel-option--rich.is-chosen:has(.es-fsel-tick) { color: var(--es-text); font-weight: 400; }
-/* `searchable`: the box and the list float together; the list inside is plain. */
-.es-fsel-pop {
-  position: absolute;
-  z-index: 20;
-  top: calc(100% + 4px);
-  left: 0;
-  right: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  padding: 4px;
-  border: 1px solid var(--es-line);
-  border-radius: var(--es-row-radius);
-  background: var(--es-raised);
-  box-shadow: var(--es-panel-shadow);
-}
-.es-fsel-pop .es-fsel-list {
-  position: static;
-  padding: 0;
-  border: 0;
-  border-radius: 0;
-  background: none;
-  box-shadow: none;
-}
-.es-fsel-empty { padding: 8px; font-size: 12px; color: var(--es-muted); }
-/* `inline`: the list opens in flow and pushes the rows below it down, so a
-   panel that scrolls never clips it. */
-.es-fsel--inline .es-fsel-list { position: static; margin-top: 4px; }
-.es-fsel--inline .es-fsel-pop { position: static; margin-top: 4px; }
-.es-fsel--inline .es-fsel-pop .es-fsel-list { margin-top: 0; }
 
 /* ── the panel body: the tab strip and the rows (Inspector) ───────────────── */
 
@@ -368,13 +99,18 @@
 /* A host's bar for the row in use, between the name and the rows. */
 .es-list-above { min-width: 0; }
 
-/* The rows: a column with no gap of its own, because the seams between rows
-   are the gap (tree.css `.es-tree-seam`, one rule for both). NOT a scroll box,
+/* The rows: 8px apart, and the gap between two is a place — the shell's
+   `TreeSeam` (efficient-shell 4.165.0) in an `.es-list-gap`. NOT a scroll box,
    and not Layers' `.es-tree` (which is one): the panel around the list scrolls.
    Inside a scroll box of its own the drag hint under the last row was clipped
    and the list scrolled by itself under a wheel (second host, 2026-10-07). */
-.es-list-rows { display: flex; flex-direction: column; min-width: 0; --es-rhythm-between: 8px; }
-.es-list-rows > .es-tree-seam:last-child { margin-top: -8px; }
+.es-list-rows { display: flex; flex-direction: column; min-width: 0; }
+/* The 8px between two rows, holding the shell's seam centred in it: the seam
+   hands back its own height, so a column that centres it puts its 4px line
+   box in the middle of the 8. */
+.es-list-gap { display: flex; flex-direction: column; justify-content: center; height: 8px; flex: none; }
+/* The place after the last row takes no room: it lies over the row's end. */
+.es-list-rows > .es-list-gap:last-child { margin-top: -8px; }
 .es-list-entry { display: flex; flex-direction: column; min-width: 0; }
 
 .es-list-row {
@@ -395,7 +131,7 @@
 .es-list-row.is-item:hover,
 .es-list-row.is-open { --es-row-scrim: var(--es-hover); background: var(--es-row-scrim); }
 .es-list-row.is-dragging { opacity: 0.4; }
-.es-list-row.is-lifting { background: var(--es-raised); box-shadow: 0 8px 20px rgba(16, 24, 40, 0.16), 0 2px 6px rgba(16, 24, 40, 0.1); }
+.es-list-row.is-lifting { background: var(--es-raised); box-shadow: var(--rosh-glass-solid-shadow); }
 .es-list-row:focus-visible { outline: 2px solid var(--es-accent); outline-offset: 1px; }
 /* The one drop line, in the middle of the 8px gap — where a seam draws its own. */
 .es-list-row.is-drop-before::before,
@@ -405,7 +141,7 @@
   left: 8px;
   right: 8px;
   height: 2px;
-  border-radius: 2px;
+  border-radius: var(--radius-sm);
   background: var(--es-accent);
   pointer-events: none;
 }
@@ -433,7 +169,7 @@
   text-align: left;
   cursor: inherit;
 }
-.es-list-open:focus-visible { outline: 2px solid var(--es-accent); outline-offset: 1px; border-radius: 4px; }
+.es-list-open:focus-visible { outline: 2px solid var(--es-accent); outline-offset: 1px; border-radius: var(--radius-sm); }
 .es-list-thumb { flex: none; display: inline-flex; align-items: center; }
 .es-list-row-name { flex: none; font-weight: 600; white-space: nowrap; }
 .es-list-row-summary { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--es-muted); }
@@ -473,7 +209,7 @@
   top: calc(100% + 4px);
   z-index: 5;
   padding: 4px 8px;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   background: var(--es-toast-bg);
   color: var(--es-on-accent);
   font-size: 11px;
@@ -519,15 +255,13 @@
 /* Read out after a move; never seen. */
 .es-list-said { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
 
-.es-fbtn--danger { color: var(--es-danger); }
-
 /* ── the link picker (LinkPicker, [MERGE] One Link Picker For Both Editors) ──
    The mockup's stack (owner, 2026-10-06): Link type, the target, and on the
    listing Filter and Value — one box under the next, the whole width of the
    row, 8px apart (the spacing scale). The same stack at 320px and at 220px:
    nothing beside anything, so nothing is cut off mid-word in the narrow
-   panel. Every box is `FieldSelect` or `.es-fin`; this adds only the stack and
-   the two quiet lines under it. */
+   panel. Every box is the shell's Select, SearchableSelect or Input; this adds
+   only the stack and the two quiet lines under it. */
 .es-flink {
   display: flex;
   flex-direction: column;
@@ -540,9 +274,6 @@
 .es-field-ctl > .es-flink {
   flex: 1 1 auto;
 }
-.es-flink > .es-fin[aria-invalid='true'] {
-  border-color: var(--es-danger);
-}
 .es-flink-error,
 .es-flink-hint {
   margin: 0;

package/dist/fields/index.d.ts

@@ -1,11 +1,11 @@
 import * as react from 'react';
-import { ReactNode, KeyboardEvent } from 'react';
+import { ReactNode } from 'react';
 import { S as SettingsBucket } from '../buckets-CuLM47h9.js';
 import { I as InspectorFields, a as InspectorFieldDef, F as FieldRenderer, b as FieldTextProps, c as FieldNumberProps, d as FieldSliderProps, e as FieldSelectManyProps, f as FieldSelectOneProps, g as FieldOption } from '../types-VqL6t5HH.js';
 export { A as ArrayFieldDef, C as CustomFieldDef, h as CustomFieldRenderProps, i as FieldSelectProps, N as NumberFieldDef, O as ObjectFieldDef, R as RadioFieldDef, S as SelectFieldDef, j as SlotFieldDef, T as TextFieldDef, k as TextareaFieldDef } from '../types-VqL6t5HH.js';
 import { R as ResolvableItem } from '../resolve-D68pb3Bx.js';
 export { F as FieldsWords } from '../words-D8kf071T.js';
-export { b as LinkFilter, a as LinkFilterField, c as LinkKindChoice, L as LinkOption, d as LinkOptionGroup, e as LinkPicker, f as LinkPickerProps, g as LinkRules, h as LinkTarget } from '../LinkPicker-W2Rtxetz.js';
+export { b as LinkFilter, a as LinkFilterField, c as LinkKindChoice, L as LinkOption, d as LinkOptionGroup, e as LinkPicker, f as LinkPickerProps, g as LinkRules, h as LinkTarget } from '../LinkPicker-hPEr1MJx.js';
 import '../types-41704JE4.js';
 
 interface InspectorProps {
@@ -274,124 +274,116 @@ declare function copyItem<T>(item: T): T;
 declare function ListField<T>({ label, icon, noun: ownNoun, items, onChange, newItem, summary, itemName, thumb, min, max, readOnly, open, onOpen, renderItem, renderRow, canRemove: removable, lockedReason, fixed, removeOnRow, canDuplicate, above, head, }: ListFieldProps<T>): react.JSX.Element;
 
 /**
- * A text value: the shell's own box, one line or several (blueprint step 4.1,
- * "native inputs become shell controls"). The look is `fields.css`
- * (`.es-fin`), so a row in the email designer and a row in the website editor
- * are the same box instead of Puck's input under two sets of overrides.
+ * A text value, one line or several (blueprint step 4.1, "native inputs become
+ * shell controls"): the shell's `Input` / `Textarea` (harness UI-24,
+ * efficient-easel#199 step 4), at the kit's small rung, so a row in the email
+ * designer and a row in the website editor are the portal's own box.
  *
  * CONTROLLED: every keystroke goes to `onChange`; the host decides what a
  * keystroke costs (the editors write a draft and save on their own clock).
  */
 declare function FieldText({ id, value, onChange, placeholder, multiline, rows, readOnly, ariaLabel, ariaLabelledBy, }: FieldTextProps): react.JSX.Element;
 
-/** A number held to its bounds and, when a step is given, to the step's grid. */
-declare function clampNumber(n: number, min?: number, max?: number): number;
-/** What a typed string means as a number: null for nothing or not-a-number. */
-declare function parseTyped(text: string): number | null;
-interface NumberEntryOptions {
-    value: number | undefined;
-    onChange: (value: number | undefined) => void;
-    min?: number;
-    max?: number;
-    step?: number;
-    shiftStep?: number;
-    styleValue?: number;
-    readOnly?: boolean;
-}
 /**
- * What a typed number box does, shared by the number cell and the slider
- * row's value, so the two cannot drift.
+ * A number value (blueprint step 4.1; the cell, plan step E4): the shell's
+ * `InputNumber` (harness UI-24, efficient-easel#199), at its small rung, with
+ * an optional glyph in front, an optional unit and, with `steppers`, the
+ * shell's two arrows inside its end. A `title` is the shell's `Tooltip`.
  *
- * It keeps the TYPED TEXT while you type, so "1." and "-" are allowed on the way
- * to a number, and writes only when the text is a number. It writes as you type
- * (the canvas follows). Enter or leaving the box clamps to `min` / `max`; Esc
- * puts back the value the box had when you came in. ↑↓ move by `step`, Shift
- * by `shiftStep` (ten steps unless the host says). An empty box writes
- * `undefined`: the setting goes back to the style, whose number `styleValue`
- * then shows, grey, and is where a step starts from.
- */
-declare function useNumberEntry({ value, onChange, min, max, step, shiftStep, styleValue, readOnly }: NumberEntryOptions): {
-    inputProps: {
-        value: string;
-        readOnly: boolean;
-        placeholder: string | undefined;
-        onFocus: () => void;
-        onChange: (e: {
-            target: {
-                value: string;
-            };
-        }) => void;
-        onBlur: () => void;
-        onKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;
-    };
-    nudge: (dir: 1 | -1, big?: boolean) => void;
-    set: (n: number | undefined) => void;
-    /** Nothing of its own: the style's number shows, grey. */
-    isStyle: boolean;
-};
-/**
- * A number value (blueprint step 4.1; the cell, plan step E4): one box holding
- * an optional icon, the number, an optional unit and, with `steppers`, two
- * small stacked arrows. What the typing, the keys and the arrows do is
- * {@link useNumberEntry}'s.
+ * Everything a key, a typed character or an arrow does is the shell's since
+ * efficient-shell 4.164.0, which took in what this cell used to do itself:
+ * the half-typed text kept while it reports numbers, a comma read as the
+ * decimal point, ↑↓ by `step` and Shift by `shiftStep` (ten steps unless the
+ * host says), Enter and leaving the box settling the number — onto the
+ * `step` grid counted from `min` (`snap`), then held to `min` / `max` — Escape
+ * putting back the value the box had when it was entered, and the arrows'
+ * hold-to-repeat. The cell no longer keeps any of that logic.
+ *
+ * FOLLOWING THE STYLE. The cell's value is `undefined` while the setting
+ * follows the style: the shell's `null`, with the style's number as the
+ * `placeholder`, which the shell shows grey, announces (`aria-valuetext`) and
+ * steps from. Emptying the box writes `undefined`, back to the style
+ * (`allowEmpty`, the shell's default).
+ *
+ * THE ARROWS' NAMES are still the catalogue's (`fields.more` / `fields.less`),
+ * handed to the shell's `InputNumber` through its own strings provider round
+ * the box, so a host's `EaselStringsProvider` keeps naming them in its
+ * language.
  */
 declare function FieldNumber({ id, value, onChange, min, max, step, shiftStep, styleValue, icon, unit, steppers, placeholder, readOnly, ariaLabel, ariaLabelledBy, title, }: FieldNumberProps): react.JSX.Element;
 
 /**
- * A slider row (plan step E4), for Site styles and Email styles: the name on
- * the left and the value on the right on one line, the slider under them.
+ * A slider row (plan step E4), for Site styles and Email styles: the name over
+ * the shell's `Slider` — its range and its typed box beside it (harness UI-24;
+ * efficient-easel#199).
+ *
+ * The typed value may go past the slider's own travel (`sliderMin` /
+ * `sliderMax`); only `min` / `max` hold it, and the slider then rests at its
+ * end — the shell's `inputMin` / `inputMax`. A row that follows the style
+ * has no number of its own: the shell's `null`, with the style's number as
+ * the box's grey placeholder (`emptyLabel`), which the box steps from;
+ * emptying the box writes `undefined`, back to the style, and Escape after
+ * typing goes back to following it.
  *
- * The value is typed and takes ↑↓ (Shift = ten steps), exactly as the number
- * cell does — it is the same {@link useNumberEntry} — and may go past the
- * slider's own travel (`sliderMin` / `sliderMax`); only `min` / `max` hold it.
- * The slider then rests at its end. A grey value follows the style.
+ * SHELL GAP (named in efficient-easel#199 part C): the shell's Slider rests
+ * its range at `min` while the value is `null`, and has no "inherited" number
+ * for it to sit on, so a row that follows the style shows its number in the
+ * box but not on the range. Handing the shell the style's number AS the value
+ * would put the range right and make Escape write that number as the row's
+ * own — a document change nobody asked for — so the range waits for the
+ * shell.
  *
  * `auto` (plan step E6, Site styles) is the word for "no number: each section
  * draws its own". The design puts it ON the slider: one spot left of its
- * travel is Auto, and the value reads the word, grey, with no unit. Dragged there, the row
- * writes `undefined`; ↑ from Auto starts at `sliderMin` (one more than Auto is
- * the slider's first number, not `min`), ↓ stays; an emptied box is Auto too.
+ * travel is Auto, the box reads the word, grey, with no unit, and the slider
+ * announces the word. Dragged there, the row writes `undefined`; an emptied
+ * box is Auto too.
+ *
+ * THE BOX'S KEYS ARE THE SHELL'S (efficient-shell 4.164.0): ↑↓ step from the
+ * number shown, Shift by ten steps, Enter commits — snapped to `step` and held
+ * to `min` / `max` — and Escape puts back the value the box had when it was
+ * entered. The key-capture wrapper this row kept round the shell's box until
+ * then is gone; what differs from it is listed in the 1.0.0 notes.
  */
-declare function FieldSlider({ id, label, value, onChange, min, max, step, shiftStep, styleValue, unit, sliderMin, sliderMax, auto, readOnly, }: FieldSliderProps): react.JSX.Element;
+declare function FieldSlider({ id, label, value, onChange, min, max, step, styleValue, unit, sliderMin, sliderMax, auto, readOnly, }: FieldSliderProps): react.JSX.Element;
 
 /** The option a stored value names: equal by `Object.is`, so `0`, `false` and `''` are values too. */
 declare function optionFor<V>(options: readonly FieldOption<V>[], value: V | undefined): FieldOption<V> | undefined;
 /**
- * One of a fixed set (blueprint step 4.1): a button that shows the choice and
- * opens a list under it. The shell's control, not the browser's `<select>`, so
- * it is the same box and the same list in both editors and on every system.
- *
- * Keyboard as a listbox: ↓ / ↑ / Enter / Space open it on the button; in the
- * list ↓ ↑ Home End move, Enter or Space choose, Escape closes and gives the
- * button its focus back, a letter jumps to the next option that starts with it.
- * A click outside closes it (a CLICK, not a pointerdown: closing early moves the
- * row and loses the press — the colour row learned that in 4.6).
- *
- * Options may sit under headings (`FieldOption.group`, `<optgroup>`'s job): a
- * heading is a `role="group"`'s name, never an option, so the keys and a click
- * pass it by. Without groups the list is exactly the flat one it always was.
+ * One of a fixed set (blueprint step 4.1) — or several (`multiple`), or one of
+ * a long list with a search box (`searchable`). It is the SHELL's list
+ * (harness UI-24, efficient-easel#199): `Select` for a set, `SearchableSelect`
+ * for a searchable one. Since efficient-shell 4.164.0 `Select` takes option
+ * groups, several values and a drawn row, and names its open list, and
+ * `SearchableSelect` is named and walked as a listbox — the gaps this field
+ * drew its own list for until then. What is left here is the mapping from the
+ * editors' options to the shell's:
  *
- * THE EDITOR'S ONE POP-UP LIST (card [MERGE] One Pop-up List For Editor And One
- * For Shoppers, 2026-10-06). What the website editor's own lists did is here,
- * each optional, and a list that asks for none draws what it always drew:
+ *   group        each RUN of options with the same `group` is one
+ *                `SelectOptionGroup`, in the order the options come — what
+ *                `<optgroup>` did. `groupCount` puts the run's size after its
+ *                heading.
+ *   thumb, meta  drawn into the row by the shell's `renderOption`: a picture
+ *                column (one option with a `thumb` key gives every row one)
+ *                and a quiet fact at the end that a screen reader skips.
+ *   renderOption the host's drawing of a row (each style in its own face),
+ *                inside the same row.
+ *   readOnly     the shell's `disabled`: the list cannot open.
  *
- *   searchable   a search box at the top of the open list. It has the focus;
- *                letters go into it (no letter jump), ↓ ↑ walk what is left,
- *                Enter chooses, Escape closes. Home and End stay the box's.
- *   multiple     several values. Enter, Space or a click ticks one and the list
- *                STAYS open; the save is in the options' order.
- *   thumb, meta  a picture column and a quiet fact on the option.
- *   groupCount   a heading says how many of its options are showing.
- *   renderOption / renderValue   the host draws a row's or the button's content.
- *   inline       the list opens in flow, for a panel that scrolls.
+ * NAMES. `ariaLabelledBy`, else `ariaLabel`, names the control and its open
+ * list; with neither, the shell names the list by its trigger, which the row's
+ * `<label for>` names.
  *
- * THE OPEN LIST ALWAYS HAS A NAME (second host, 2026-10-07): the host's
- * `ariaLabelledBy`, else its `ariaLabel`, else the BUTTON that opened it —
- * which the row's `<label for>` names. Until then a list given neither was a
- * `role="listbox"` with no accessible name (axe `aria-input-field-name`), and
- * the engine's own settings row gave neither.
+ * WHAT THE SHELL'S LISTS DO NOT TAKE (named for efficient-shell, not drawn
+ * here): `SearchableSelect` has no option groups, no several values and no
+ * disabled options — a searchable list shows a group as its option's quiet
+ * second line, ticks are a plain `Select`'s, and a disabled option is left out
+ * of a searchable list; `Select` draws no closed value of the host's
+ * (`renderValue` is ignored: the chosen label shows); and neither list opens
+ * in the panel's flow (`inline` is ignored — the shell's list is placed over
+ * the page, so a panel that scrolls no longer clips it).
  */
 declare function FieldSelect<V>(props: FieldSelectManyProps<V>): ReactNode;
 declare function FieldSelect<V>(props: FieldSelectOneProps<V>): ReactNode;
 
-export { FieldNumber, FieldNumberProps, FieldOption, type FieldPlan, FieldRenderer, FieldSelect, FieldSelectManyProps, FieldSelectOneProps, FieldSlider, FieldSliderProps, FieldText, FieldTextProps, type FieldsBlock, Inspector, InspectorField, InspectorFieldDef, type InspectorFieldProps, InspectorFields, type InspectorProps, ListField, type ListFieldProps, type NumberEntryOptions, type PlannedRow, type ResolvedFieldsInput, SettingsBucket, bucketsOf, clampNumber, copyItem, insertAt, labelOf, moveTo, optionFor, parseTyped, planFields, removeAt, useNumberEntry, useResolvedFields };
+export { FieldNumber, FieldNumberProps, FieldOption, type FieldPlan, FieldRenderer, FieldSelect, FieldSelectManyProps, FieldSelectOneProps, FieldSlider, FieldSliderProps, FieldText, FieldTextProps, type FieldsBlock, Inspector, InspectorField, InspectorFieldDef, type InspectorFieldProps, InspectorFields, type InspectorProps, ListField, type ListFieldProps, type PlannedRow, type ResolvedFieldsInput, SettingsBucket, bucketsOf, copyItem, insertAt, labelOf, moveTo, optionFor, planFields, removeAt, useResolvedFields };