efficient-easel 0.99.2 → 0.101.0

package/dist/fields/fields.css

@@ -35,8 +35,13 @@
   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-muted); }
+.es-fin:disabled { background: var(--es-track-bg); color: var(--es-text-secondary); }
 
 .es-fin--area {
   height: auto;
@@ -75,7 +80,7 @@
   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-muted); }
+.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); }
 .es-fnum-icon svg { width: 14px; height: 14px; }
@@ -239,6 +244,90 @@
 .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-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 {
+  flex: none;
+  width: 26px;
+  height: 26px;
+  overflow: hidden;
+  border-radius: var(--es-field-radius);
+  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) ───────────────── */
 
@@ -260,9 +349,13 @@
 .es-insp-row:empty,
 .es-insp-row[hidden] { display: none; }
 
-/* ── a list (ListField, 4.2): Layers' own rows, an add button, an open item ── */
+/* ── a list (ListField): ONE look in both editors (owner, 2026-10-06) ────────
+   The website ticker's rows: one row per item, a × at its end, "+ Add <noun>"
+   under the last. The whole row drags (no grip); a many-field item opens under
+   its own row. Sizes from the ticker (.sf-textlist): a 32px row, a 28 × 32 ×.
+   Gaps are the spacing scale: 8 between rows (the seam IS the gap), 4 inside. */
 
-.es-list { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin-top: max(var(--es-row-gap), var(--es-rhythm-between)); }
+.es-list { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; margin-top: max(var(--es-row-gap), var(--es-rhythm-between)); }
 .es-list-head {
   display: flex;
   align-items: baseline;
@@ -270,52 +363,191 @@
   gap: 8px;
 }
 .es-list-label { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--es-text); }
-.es-list-count { font-size: 11px; color: var(--es-muted); }
-/* The rows are Layers' rows (tree.css); the list lets them reach the panel's
-   edges the way Layers' do, so a row's hover reads as the same row. */
-.es-list-tree { margin: 0 -8px; }
+.es-list-count { font-size: 11px; color: var(--es-muted); font-variant-numeric: tabular-nums; }
 
-.es-list-add {
+/* 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,
+   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-entry { display: flex; flex-direction: column; min-width: 0; }
+
+.es-list-row {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  min-height: 32px;
+  border-radius: var(--es-row-radius);
+  --es-row-scrim: var(--es-panel);
+}
+.es-list-row.is-draggable { cursor: grab; }
+.es-list-row.is-item { padding-left: 8px; }
+/* A row whose own control is not a text box (a name, a picture) reads as a row. */
+.es-list-row.is-inline:not(:has(input, textarea, [contenteditable])) { padding-left: 8px; }
+.es-list-row.is-inline:not(:has(input, textarea, [contenteditable])):hover { --es-row-scrim: var(--es-hover); background: var(--es-row-scrim); }
+.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: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,
+.es-list-row.is-drop-after::after {
+  content: "";
+  position: absolute;
+  left: 8px;
+  right: 8px;
+  height: 2px;
+  border-radius: 2px;
+  background: var(--es-accent);
+  pointer-events: none;
+}
+.es-list-row.is-drop-before::before { top: -5px; }
+.es-list-row.is-drop-after::after { bottom: -5px; }
+
+/* The row's own control (renderRow): it fills the row up to the ×. */
+.es-list-row-main { flex: 1 1 auto; min-width: 0; min-height: 32px; display: flex; align-items: center; font-size: 12px; color: var(--es-text); }
+.es-list-row-main > * { flex: 1 1 auto; min-width: 0; }
+
+/* A many-field item: its name, its summary, a chevron that turns when open. */
+.es-list-open {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 4px;
   height: 32px;
-  border: 1px dashed var(--es-btn-border);
-  border-radius: var(--es-field-radius);
+  padding: 0;
+  border: 0;
   background: none;
-  color: var(--es-text-secondary);
+  color: var(--es-text);
   font: inherit;
   font-size: 12px;
-  cursor: pointer;
+  text-align: left;
+  cursor: inherit;
 }
-.es-list-add:hover:not(:disabled) { background: var(--es-hover); }
-.es-list-add:disabled { color: var(--es-disabled); cursor: default; }
-.es-list-add:focus-visible { outline: 2px solid var(--es-accent); outline-offset: 1px; }
+.es-list-open:focus-visible { outline: 2px solid var(--es-accent); outline-offset: 1px; border-radius: 4px; }
+.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); }
+.es-list-chev { flex: none; color: var(--es-icon); transition: transform 0.12s; }
+.es-list-row.is-open .es-list-chev { transform: rotate(90deg); }
 
-/* An item opened: the way back, its name, its own settings, its two actions. */
-.es-list.is-open { gap: 12px; }
-.es-list-back {
-  align-self: flex-start;
+.es-list-x {
+  flex: none;
+  width: 28px;
+  height: 32px;
+  border: 0;
+  border-radius: var(--es-row-radius);
+  background: transparent;
+  color: var(--es-muted);
+  font: inherit;
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+}
+.es-list-x:hover:not(:disabled) { background: var(--es-danger-tint); color: var(--es-danger); }
+.es-list-x:disabled { color: var(--es-disabled); cursor: default; }
+.es-list-x:focus-visible { outline: 2px solid var(--es-accent); outline-offset: 2px; }
+.es-list-lock {
+  flex: none;
+  width: 28px;
+  height: 32px;
   display: inline-flex;
   align-items: center;
-  gap: 8px;
-  height: 28px;
-  padding: 0 8px;
+  justify-content: center;
+  color: var(--es-disabled);
+}
+
+/* What a draggable row says after 0.7 s on it — Layers' hint, never over a text box. */
+.es-list-hint {
+  position: absolute;
+  left: 8px;
+  top: calc(100% + 4px);
+  z-index: 5;
+  padding: 4px 8px;
+  border-radius: 6px;
+  background: var(--es-toast-bg);
+  color: var(--es-on-accent);
+  font-size: 11px;
+  line-height: 1.3;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.1s;
+}
+.es-list-row.is-draggable:hover:not(:has(input:hover, textarea:hover, [contenteditable]:hover)) .es-list-hint {
+  opacity: 1;
+  transition-delay: 0.7s;
+}
+.es-list-row.is-dragging .es-list-hint,
+.es-list-row.is-lifting .es-list-hint { display: none; }
+
+/* The open item, under its row: its own settings, indented on a hairline. */
+.es-list-item {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  margin: 4px 0 8px 8px;
+  padding: 0 8px 4px 12px;
+  border-left: 2px solid var(--es-line);
+}
+.es-list-item > :first-child { margin-top: 0; }
+
+.es-list-add {
+  align-self: flex-start;
+  padding: 4px 2px;
   border: 0;
-  border-radius: var(--es-field-radius);
-  background: var(--es-hover);
-  color: var(--es-text-secondary);
+  background: none;
+  color: var(--es-accent);
   font: inherit;
   font-size: 12px;
+  font-weight: 500;
   cursor: pointer;
 }
-.es-list-back:focus-visible { outline: 2px solid var(--es-accent); outline-offset: 1px; }
-.es-list-back-chev {
-  width: 6px;
-  height: 6px;
-  border-left: 1.6px solid currentColor;
-  border-bottom: 1.6px solid currentColor;
-  transform: rotate(45deg);
-}
-.es-list-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
-.es-list-name { font-size: 14px; font-weight: 600; color: var(--es-text); }
-.es-list-item { min-width: 0; }
-.es-list-item-actions { display: flex; gap: 8px; margin-top: 8px; }
+.es-list-add:hover:not(:disabled) { text-decoration: underline; }
+.es-list-add:disabled { color: var(--es-disabled); cursor: default; }
+.es-list-add:focus-visible { outline: 2px solid var(--es-accent); outline-offset: 2px; }
+
+/* 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. */
+.es-flink {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+}
+/* Inside a SettingsField the slot is a flex ROW, and a column box written for
+   a block row sizes to its own content there (291px became 117px in the shop
+   when its link stack sat in the slot). Fill the slot instead. */
+.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;
+  font-size: 11px;
+  line-height: 1.45;
+}
+.es-flink-error { color: var(--es-danger); }
+.es-flink-hint { color: var(--es-muted); }

package/dist/fields/index.d.ts

@@ -1,10 +1,10 @@
 import * as react from 'react';
 import { ReactNode, KeyboardEvent } 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 FieldSelectProps, f as FieldOption } from '../types-C7HFvdtk.js';
-export { A as ArrayFieldDef, C as CustomFieldDef, g as CustomFieldRenderProps, N as NumberFieldDef, O as ObjectFieldDef, R as RadioFieldDef, S as SelectFieldDef, h as SlotFieldDef, T as TextFieldDef, i as TextareaFieldDef } from '../types-C7HFvdtk.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-CD3WADyb.js';
+export { F as FieldsWords } from '../words-D8kf071T.js';
 import '../types-41704JE4.js';
 
 interface InspectorProps {
@@ -98,7 +98,14 @@ interface PlannedRow {
     bucket: SettingsBucket;
 }
 interface FieldPlan {
-    /** Every field that draws, in the order declared. */
+    /**
+     * Every field that is not a marker and not hidden, in the order declared.
+     *
+     * ⚠️ A `slot` field is among them and draws NOTHING: it is here so its name
+     * has a bucket (`bucketsOf`), and `Inspector` leaves it mounted but empty.
+     * A host that draws rows of its own, or counts them ("3 settings"), filters
+     * `row.field.type !== 'slot'` first. `buckets` already leaves slots out.
+     */
     rows: PlannedRow[];
     /** The tabs to offer: the buckets that hold a row, in the owner's order. */
     buckets: SettingsBucket[];
@@ -171,26 +178,37 @@ declare function useResolvedFields({ id, node, block, parent, appState }: Resolv
 };
 
 /**
- * A LIST VALUE (blueprint step 4.2) — slides, buttons, links, any `array`
- * field — drawn the way Layers draws a page: one row per item, the same rows,
- * the same drag (the whole row picks up), the same ⌥↑ / ⌥↓, and a "+" between
- * two rows that adds one there. Pressing a row opens that item in the panel,
- * with a way back at the top.
+ * A LIST VALUE — slides, buttons, links, lines of copy, any `array` field —
+ * drawn ONE way in both editors (owner, 2026-10-06: "the ticker look"). One row
+ * per item with a × at its end, and "+ Add <noun>" under the last row.
+ *
+ *   one field   `renderRow` puts the host's own control IN the row (the
+ *               ticker's text box): nothing to open, the item is edited where
+ *               it stands;
+ *   many fields the row is the item's name and summary; pressing it opens the
+ *               item IN PLACE, under its row, one at a time (the owner's pick
+ *               A of the 2026-10-06 mockup — the drill-in page is gone).
  *
- * It replaces Puck's ArrayField, which drew its own look and ran its own drag.
- * THE DATA DOES NOT CHANGE: a list is the array Puck stored, and every write is
- * that array with an item added, moved, copied or taken out. No id is added to
- * an item (Puck's `_arrayId` lived in its UI state, never in the data, and so
- * does a row's key here — its position).
+ * REORDER IS NEVER CUT TO FIT THE LOOK. The WHOLE ROW drags — no grip (owner,
+ * 2026-09-29) — a text box in it too, until the caret is in that box: from
+ * then on a press there selects text. Alt+↑ /
+ * Alt+↓ move it from the keyboard, the caret in the text box included, and the
+ * caret goes with the item. The right-click menu (or Shift+F10) offers Move up,
+ * Move down, Duplicate and Delete, and only what the row can do. The count, the
+ * "+" between two rows and Duplicate stay, as Layers keeps them.
  *
- * CONTROLLED, both the list and which item is open: the Inspector holds them,
- * so an editor can keep the open item across a re-render of the panel.
+ * THE DATA DOES NOT CHANGE: a list is the array the document stored, and every
+ * write is that array with an item added, moved, copied, changed or taken out.
+ * No id is added to an item; a row's key is its position.
  *
- * Its words ("Add slide", "2 of 5", the rows' drag hint) are the strings
- * provider's — `EaselStrings.fields.list` and `.tree` — English with none.
+ * CONTROLLED, the list and which item is open: the Inspector holds them, so an
+ * editor can keep the open item across a re-render of the panel.
+ *
+ * Its words are the strings provider's — `EaselStrings.fields.list` and
+ * `.tree` — English with none.
  */
 interface ListFieldProps<T> {
-    /** The list's name, e.g. "Slides". Also the back button's word. */
+    /** The list's name, e.g. "Slides". */
     label: string;
     /** A glyph before the name, as a settings row wears one. */
     icon?: ReactNode;
@@ -209,11 +227,37 @@ interface ListFieldProps<T> {
     min?: number;
     max?: number;
     readOnly?: boolean;
-    /** The item open in the panel, by position, or null for the list. */
+    /** The item open under its row, by position, or null. */
     open: number | null;
     onOpen: (index: number | null) => void;
-    /** The open item's own settings. `change` writes the item. */
+    /** The open item's own settings, drawn under its row. `change` writes the item. */
     renderItem: (item: T, index: number, change: (next: T) => void) => ReactNode;
+    /**
+     * The row's own control, for an item that is ONE value (a line of copy): the
+     * row holds it, and nothing opens. `change` writes the item.
+     */
+    renderRow?: (item: T, index: number, change: (next: T) => void) => ReactNode;
+    /** May this item be taken out? False: no ×, a lock, no Delete — it still moves (the email's Unsubscribe). */
+    canRemove?: (item: T, index: number) => boolean;
+    /** Why a locked item cannot be taken out — the lock's tooltip. Default `fields.list.locked`. */
+    lockedReason?: (item: T, index: number) => string;
+    /** A set that is never added to or taken from (the phone column order): it only moves. */
+    fixed?: boolean;
+    /**
+     * False: an item is deleted INSIDE (its own page, as a Locations group is),
+     * never from its row — no ×, no lock, no Delete in the menu. Default true.
+     */
+    removeOnRow?: boolean;
+    /** May this item be copied? False: no Duplicate in the menu (a copy that would merge with its original). Default: yes. */
+    canDuplicate?: (item: T, index: number) => boolean;
+    /** Drawn once, under the list's name and above its rows — a bar that acts on the row in use (the ticker's formatting bar). */
+    above?: ReactNode;
+    /**
+     * False: no head of the list's own — the host draws the list inside a
+     * settings row that already names it (a `SettingsField` with its glyph and
+     * hint), and shows the count in that row's `value`. Default true.
+     */
+    head?: boolean;
 }
 /** The list with `item` put at `index`. */
 declare function insertAt<T>(items: readonly T[], index: number, item: T): T[];
@@ -226,7 +270,7 @@ declare function removeAt<T>(items: readonly T[], index: number): T[];
  * writes through to the original (a list item is JSON — Puck stored it so).
  */
 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, }: ListFieldProps<T>): react.JSX.Element;
+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,
@@ -290,7 +334,7 @@ declare function useNumberEntry({ value, onChange, min, max, step, shiftStep, st
  * small stacked arrows. What the typing, the keys and the arrows do is
  * {@link useNumberEntry}'s.
  */
-declare function FieldNumber({ id, value, onChange, min, max, step, shiftStep, styleValue, icon, unit, steppers, placeholder, readOnly, ariaLabel, ariaLabelledBy, }: FieldNumberProps): react.JSX.Element;
+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
@@ -300,8 +344,14 @@ declare function FieldNumber({ id, value, onChange, min, max, step, shiftStep, s
  * 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.
+ *
+ * `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.
  */
-declare function FieldSlider({ id, label, value, onChange, min, max, step, shiftStep, styleValue, unit, sliderMin, sliderMax, readOnly, }: FieldSliderProps): react.JSX.Element;
+declare function FieldSlider({ id, label, value, onChange, min, max, step, shiftStep, 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;
@@ -315,7 +365,140 @@ declare function optionFor<V>(options: readonly FieldOption<V>[], value: V | und
  * 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.
+ *
+ * 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:
+ *
+ *   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.
+ *
+ * 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.
+ */
+declare function FieldSelect<V>(props: FieldSelectManyProps<V>): ReactNode;
+declare function FieldSelect<V>(props: FieldSelectOneProps<V>): ReactNode;
+
+/** One thing a link can point at: the URL it writes and the name it shows. */
+type LinkOption = {
+    value: string;
+    label: string;
+};
+/** Options under one heading — the anchors of one page. */
+type LinkOptionGroup = {
+    label: string;
+    options: readonly LinkOption[];
+};
+/** One filter on a link onto the product listing, or none. */
+type LinkFilter = {
+    param: string;
+    value: string;
+} | null;
+/** A filter a listing link may offer, with the values it may take. */
+type LinkFilterField = {
+    param: string;
+    label: string;
+    values: readonly LinkOption[];
+};
+/** What a kind's target box is: a list, a list in groups, or a typed address. */
+type LinkTarget = {
+    type: 'select';
+    options: readonly LinkOption[];
+    placeholder: string;
+} | {
+    type: 'groups';
+    groups: readonly LinkOptionGroup[];
+    placeholder: string;
+} | {
+    type: 'text';
+};
+/** One entry of the Link type list, with everything its target box offers. */
+type LinkKindChoice = {
+    /** The kind's key — what `rules.kindOf` answers. */
+    value: string;
+    /** Its name in the list ("Page", "Blog post"), and its target box's name. */
+    label: string;
+    target: LinkTarget;
+    /** A quiet line under the boxes while this kind is chosen. */
+    hint?: string;
+    /** Left out of the list while its target has nothing to pick — unless the
+     *  saved link is this kind, so a link is never shown as something it is not. */
+    hideWhenEmpty?: boolean;
+};
+/**
+ * Everything the picker needs to know about a URL — and it knows nothing else.
+ * A host hands in its own rules (the storefront's come from
+ * `efficient-web-builder/links`), so a new kind or a new filter never changes
+ * this file.
+ */
+type LinkRules = {
+    /** Which kind a saved URL is. */
+    kindOf: (url: string) => string;
+    /** The target a URL points at, with any listing filter taken off. */
+    targetOf: (url: string) => string;
+    /** The filter a URL carries onto the listing, or null. */
+    readFilter: (url: string) => LinkFilter;
+    /** The URL of a target with this filter written on (or cleared). */
+    withFilter: (url: string, filter: LinkFilter) => string;
+    /** May this typed address be saved? */
+    isSafe: (url: string) => boolean;
+};
+type LinkPickerProps = {
+    /** The saved link, or `''`. */
+    value: string;
+    /**
+     * The new link, and — when a thing was PICKED — its name, so a host can fill
+     * its own label with it (the admin's menu item does). No name when the link
+     * was typed or cleared.
+     */
+    onChange: (url: string, name?: string) => void;
+    /** The Link type list, in order, each with what its target box offers. */
+    kinds: readonly LinkKindChoice[];
+    rules: LinkRules;
+    /**
+     * The filters a link onto this target may carry, or null when the target is
+     * not the product listing. Asked only for a kind whose target is a list.
+     */
+    filtersFor?: (target: string) => readonly LinkFilterField[] | null;
+    /** The whole control's accessible name — "Button link", "Where “Wheels” goes". */
+    label?: string;
+    readOnly?: boolean;
+};
+/**
+ * ONE LINK PICKER ([MERGE] One Link Picker For Both Editors, owner
+ * 2026-10-06; mockup https://claude.ai/artifact/6mVmY5787gnXdSWP3syqhu v4): a
+ * type — Page / Anchor / Blog post / Product / Custom URL — then which one; on
+ * the product listing a Filter and then a Value. The website editor's Link
+ * field and the admin's menu item draw this same control.
+ *
+ * IT HOLDS NO URL RULE. Which kind a link is, which page it points at, what
+ * filter it carries and how one is written, which typed address is unsafe —
+ * all of it is `rules`, and every option and every name is the host's. Only
+ * the order of the boxes and how they answer each other is decided here.
+ *
+ * It never writes on its own. Opening a saved link writes nothing; a target,
+ * filter or value the host no longer offers is shown as "(unavailable)" and
+ * kept, never silently replaced.
+ *
+ * Every list is `FieldSelect`, the editor's one pop-up list — the anchors
+ * under one heading per page (`FieldOption.group`), a long list with a search
+ * box — never the browser's `<select>`. The boxes stack, one under the next,
+ * at every panel width.
  */
-declare function FieldSelect<V>({ id, value, options, onChange, placeholder, readOnly, ariaLabel, ariaLabelledBy, }: FieldSelectProps<V>): react.JSX.Element;
+declare function LinkPicker({ value, onChange, kinds, rules, filtersFor, label, readOnly }: LinkPickerProps): react.JSX.Element | null;
 
-export { FieldNumber, FieldNumberProps, FieldOption, type FieldPlan, FieldRenderer, FieldSelect, FieldSelectProps, 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, type LinkFilter, type LinkFilterField, type LinkKindChoice, type LinkOption, type LinkOptionGroup, LinkPicker, type LinkPickerProps, type LinkRules, type LinkTarget, ListField, type ListFieldProps, type NumberEntryOptions, type PlannedRow, type ResolvedFieldsInput, SettingsBucket, bucketsOf, clampNumber, copyItem, insertAt, labelOf, moveTo, optionFor, parseTyped, planFields, removeAt, useNumberEntry, useResolvedFields };