efficient-easel 0.99.1 → 0.100.0

package/dist/{editor → easel}/index.d.ts

@@ -1,26 +1,33 @@
 import { DataInput } from '../data/index.js';
 import { N as NodeSelection } from '../plan-DChbUXdS.js';
 export { I as ItemSelector } from '../plan-DChbUXdS.js';
-import { E as EditorConfig, a as EditorView, b as EditorAction, P as Permissions, c as EditorCore, d as EditorUi } from '../types-Dy6oR6Z2.js';
-export { A as AppState, e as EditorHistory, H as HistoryEntry, S as SetDataPatch } from '../types-Dy6oR6Z2.js';
+import { E as EaselConfig, a as EaselView, b as EaselAction, P as Permissions, c as EaselCore, d as EaselUi } from '../types-E3HrTPg2.js';
+export { A as AppState, e as EaselHistory, H as HistoryEntry, S as SetDataPatch } from '../types-E3HrTPg2.js';
 import { S as SlotAddress, D as Data, P as Place } from '../types-41704JE4.js';
 import { c as ResolveTrigger, a as ResolveCache, R as ResolvableItem } from '../resolve-D68pb3Bx.js';
 import * as react from 'react';
 import { ReactNode, CSSProperties, ComponentType, ReactElement } from 'react';
 import { b as NodeOpsHost, C as ClipboardEntry } from '../useNodeOps-BF0fQsif.js';
-import { I as InspectorFields } from '../types-C7HFvdtk.js';
+import { I as InspectorFields } from '../types-VqL6t5HH.js';
 import '../buckets-CuLM47h9.js';
 
-interface EditorOptions<C extends EditorConfig = EditorConfig> {
+interface EaselOptions<C extends EaselConfig = EaselConfig> {
     config: C;
     /** The document — Puck 0.20's shape, unchanged. */
     data: DataInput | Data;
     /** The host's own UI keys to start with (and an `itemSelector`, if any). */
     ui?: Record<string, unknown>;
-    /** Called with the new document after every change that changed it — once
-     *  per `batch`, once per undo / redo. Not called for `load`. */
+    /**
+     * Called with the new document after every change that changed it — once
+     * per `batch`, once per undo / redo. Not called for `load`.
+     *
+     * THIS is what feeds autosave (`autosave.push`), not `subscribe`: a
+     * subscriber is also told of a `load()`, a selection and a permission, and a
+     * host that pushed every notification would save the document it had just
+     * loaded as if it were an edit.
+     */
     onChange?: (data: Data) => void;
-    /** Editor-wide permissions, under each block's own (Puck's `permissions`). */
+    /** Easel-wide permissions, under each block's own (Puck's `permissions`). */
     permissions?: Partial<Permissions>;
     /**
      * Changes recorded closer together than this collapse into ONE undo step —
@@ -32,12 +39,22 @@ interface EditorOptions<C extends EditorConfig = EditorConfig> {
     /** The clock, for tests. */
     now?: () => number;
 }
-interface Editor<C extends EditorConfig = EditorConfig> {
-    /** What `useEditor` reads. The same object until the state changes. */
-    getState: () => EditorView<C>;
+/**
+ * `EaselProvider` takes an `Easel<EaselConfig>`, and `createEasel` infers `C`
+ * from the config it is handed. A config typed more narrowly than
+ * `EaselConfig` (a `Config<…>` from `efficient-easel/blocks`) therefore infers
+ * an `Easel<ThatConfig>`, which the provider does not accept (`setConfig`
+ * takes a `C`). Say the type: `createEasel<EaselConfig>({ config, … })`.
+ */
+interface Easel<C extends EaselConfig = EaselConfig> {
+    /** What `useEasel` reads. The same object until the state changes. */
+    getState: () => EaselView<C>;
     subscribe: (listener: () => void) => () => void;
-    /** One Puck action. Outside a `batch`, one undo step when it records. */
-    dispatch: (action: EditorAction) => void;
+    /**
+     * One Puck action. Outside a `batch`, one undo step when it records.
+     * Permissions are not checked here (see `setPermissions`).
+     */
+    dispatch: (action: EaselAction) => void;
     /**
      * Run several changes as ONE: one undo step, one `onChange`, and one
      * notification to subscribers. Each dispatch inside sees the ones before it.
@@ -65,20 +82,57 @@ interface Editor<C extends EditorConfig = EditorConfig> {
     }) => void;
     undo: () => void;
     redo: () => void;
+    /**
+     * Replace the easel-wide permissions (not merged over the last ones: name
+     * every key you mean). Subscribers are told, and `getPermissions` becomes a
+     * new function, so a reader of either re-renders — a settings panel reading
+     * `getPermissions().edit` follows an edit lock as it is claimed and lost.
+     * The same permissions again tell nobody, so it is safe in an effect.
+     *
+     * These are what the PARTS read (the settings panel, the menus, the undo
+     * keys). The store itself enforces none of them: `dispatch`, `run`, `undo`
+     * and `redo` write whatever they are asked to. A host that must not write —
+     * somebody else holds the document — gates its own calls.
+     */
     setPermissions: (permissions: Partial<Permissions>) => void;
     /**
      * Run every block's `resolveData` over the document, as `<Puck>` did when it
      * mounted (trigger `'load'`), and write what changed as ONE change folded
      * into the step it happens in — a resolver bringing a stale document up to
      * date is not an undo step (Puck made it one, which undid back to the stale
-     * document). `onChange` hears it, as Puck's did. `EditorProvider` runs this
+     * document). `onChange` hears it, as Puck's did. `EaselProvider` runs this
      * on mount; a node changed by hand while it ran is left as the hand left it.
      */
     resolveAll: (options?: {
         trigger?: ResolveTrigger;
         metadata?: Record<string, unknown>;
     }) => Promise<void>;
-    /** This editor's memory of the last change each node was resolved for —
+    /**
+     * Run ONE node's `resolveData`, and that of everything in its slots, and
+     * write what changed folded into the step it happens in — `resolveAll`, for
+     * one node. Resolves to whether anything was written.
+     *
+     * It is what Puck's own insert ran: a block dropped from its component list
+     * was resolved with trigger `'insert'` (`insertComponent`), which is how a
+     * block seeds its children or stamps a default the moment it arrives. The
+     * `insert` ACTION never did — Puck's reducer was pure, and so is this one —
+     * and the engine has no drop of its own: the Add list's click and the drag's
+     * drop are the host's. So a host that puts a new block in, by `dispatch` or
+     * by `run`, follows it with this (second host, 2026-10-07):
+     *
+     *     easel.dispatch({ type: 'insert', componentType, destinationZone, destinationIndex, id });
+     *     void easel.resolveNode(id, { trigger: 'insert' });
+     *
+     * ONE undo step with the insert (Puck made the resolver's write a second
+     * one, and a single undo left a block that had never been resolved). A node
+     * changed by hand, or taken out, while its resolver ran is left as it is.
+     * `trigger` is `'replace'` when not given, as `resolveNodeData`'s is.
+     */
+    resolveNode: (id: string, options?: {
+        trigger?: ResolveTrigger;
+        metadata?: Record<string, unknown>;
+    }) => Promise<boolean>;
+    /** This easel's memory of the last change each node was resolved for —
      *  Puck kept one per editor, shared by every write that resolves. */
     readonly resolveCache: ResolveCache;
     /**
@@ -98,11 +152,11 @@ interface Editor<C extends EditorConfig = EditorConfig> {
  */
 declare const DEFAULT_UI: Record<string, unknown>;
 /**
- * THE EDITOR STORE (blueprint step 5.1): the document, the selection by id and
+ * THE EASEL STORE (blueprint step 5.1): the document, the selection by id and
  * the host's UI keys, with Puck's actions, Puck's history and a `batch` Puck
- * never had. Framework-free — `useEditor` (./react) is the React binding.
+ * never had. Framework-free — `useEasel` (./react) is the React binding.
  */
-declare function createEditor<C extends EditorConfig>(options: EditorOptions<C>): Editor<C>;
+declare function createEasel<C extends EaselConfig>(options: EaselOptions<C>): Easel<C>;
 
 /**
  * Puck 0.20's reducer, on `efficient-easel/data` — blueprint step 5.1.
@@ -123,31 +177,39 @@ declare function createEditor<C extends EditorConfig>(options: EditorOptions<C>)
  */
 /** Whether Puck records an action in history when the action does not say:
  *  everything but the state-setters. */
-declare function recordsByDefault(action: EditorAction): boolean;
+declare function recordsByDefault(action: EaselAction): boolean;
 /** The UI as Puck shows it: the host's keys, with the selection translated. */
-declare function uiView(core: EditorCore, config: EditorConfig): EditorUi;
+declare function uiView(core: EaselCore, config: EaselConfig): EaselUi;
 /** A selection that still points at something; otherwise nothing. */
-declare function validSelection(data: Data, config: EditorConfig, selection: NodeSelection): NodeSelection;
+declare function validSelection(data: Data, config: EaselConfig, selection: NodeSelection): NodeSelection;
 /** One action, applied. Pure: the same core and action give the same core. */
-declare function reduce(core: EditorCore, action: EditorAction, config: EditorConfig): EditorCore;
+declare function reduce(core: EaselCore, action: EaselAction, config: EaselConfig): EaselCore;
 
-/** Puts one editor in reach of everything under it — `<Puck>`'s provider
- *  half — and, as `<Puck>` did, binds undo / redo to the page's keyboard
- *  (`hotkeys={false}` for a host that binds its own) and runs every block's
- *  `resolveData` once on mount (`resolveOnMount={false}` to skip). */
-declare function EditorProvider({ editor, hotkeys, resolveOnMount, children, }: {
-    editor: Editor;
+interface EaselProviderProps {
+    easel: Easel;
+    /**
+     * Bind undo / redo: to the page here, and in the canvas frame
+     * (`EaselCanvas`, whose own `hotkeys` can say otherwise for the frame
+     * alone). `false` binds NEITHER, for a host that binds its own. On by
+     * default. Whatever this says, the keys do nothing while the easel-wide
+     * `edit` permission is off (`bindUndoKeys`).
+     */
     hotkeys?: boolean;
-    /** Run every block's `resolveData` once the editor mounts, as `<Puck>` did
-     *  (`editor.resolveAll`). On by default. */
+    /** Run every block's `resolveData` once the easel mounts, as `<Puck>` did
+     *  (`easel.resolveAll`). On by default. */
     resolveOnMount?: boolean;
     children?: ReactNode;
-}): react.JSX.Element;
-/** The editor itself, for handlers that read the state at the moment they run
+}
+/** Puts one easel in reach of everything under it — `<Puck>`'s provider
+ *  half — and, as `<Puck>` did, binds undo / redo to the page's keyboard
+ *  (`hotkeys={false}` for a host that binds its own) and runs every block's
+ *  `resolveData` once on mount (`resolveOnMount={false}` to skip). */
+declare function EaselProvider({ easel, hotkeys, resolveOnMount, children }: EaselProviderProps): react.JSX.Element;
+/** The easel itself, for handlers that read the state at the moment they run
  *  (`useGetPuck`'s job) and for `dispatch` / `batch` / `select`. */
-declare function useEditorApi<C extends EditorConfig = EditorConfig>(): Editor<C>;
+declare function useEaselApi<C extends EaselConfig = EaselConfig>(): Easel<C>;
 /**
- * Read a slice of the editor and re-render when it changes — `usePuck` /
+ * Read a slice of the easel and re-render when it changes — `usePuck` /
  * `createUsePuck()`'s selector form, over the same state shape, so the apps'
  * selectors move over by renaming the hook.
  *
@@ -155,12 +217,12 @@ declare function useEditorApi<C extends EditorConfig = EditorConfig>(): Editor<C
  * per selector, so React sees the same value for the same state and does not
  * loop. A primitive or an unchanged reference does not re-render.
  */
-declare function useEditor<T, C extends EditorConfig = EditorConfig>(selector: (view: EditorView<C>) => T): T;
+declare function useEasel<T, C extends EaselConfig = EaselConfig>(selector: (view: EaselView<C>) => T): T;
 /**
- * A typed `useEditor` for one config — `createUsePuck<Config>()`'s shape, so
+ * A typed `useEasel` for one config — `createUsePuck<Config>()`'s shape, so
  * a file that made its own typed hook keeps the one line that made it.
  */
-declare function createUseEditor<C extends EditorConfig = EditorConfig>(): <T>(selector: (view: EditorView<C>) => T) => T;
+declare function createUseEasel<C extends EaselConfig = EaselConfig>(): <T>(selector: (view: EaselView<C>) => T) => T;
 
 /** What a slot component accepts — Puck's. */
 interface CanvasSlotProps {
@@ -177,10 +239,12 @@ interface CanvasFrameProps {
     id?: string;
     /**
      * The frame's accessible name. Default "Canvas", in the strings provider's
-     * language (`EditorStrings.canvas.frame`).
+     * language (`EaselStrings.canvas.frame`).
      */
     title?: string;
+    /** Added to the frame's own classes (`es-canvas-frame`, and `is-fill` when it fills). */
     className?: string;
+    /** The host's own style for the frame. The engine writes none: see the note on `CanvasFrame`. */
     style?: CSSProperties;
     /** Copy the host page's stylesheets into the frame, and keep them in step.
      *  On by default: the blocks are styled by the app's own CSS. */
@@ -208,7 +272,7 @@ interface CanvasFrameProps {
     nonce?: string;
 }
 /**
- * An iframe of the editor's own, with the content portalled in. No `src`: the
+ * An iframe of the easel's own, with the content portalled in. No `src`: the
  * frame's first document is used — there to write into at once, with no load
  * to wait for and nothing fetched. The host's stylesheets are copied into its
  * head and copied again whenever the host's head changes (a route's CSS
@@ -221,12 +285,21 @@ interface CanvasFrameProps {
  * empty slot grew to the frame's full height), tables stop inheriting the
  * page's font, and an image's line box changes. (0.89.0–0.92.0 shipped the
  * quirks-mode frame.)
+ *
+ * ── Its look is a CLASS, not a `style` (second host, 2026-10-06) ───────────
+ * No border, the pane's width, and the pane's height when it fills are rules
+ * in easel.css (`.es-canvas-frame`, `.is-fill`). They were a `style` prop,
+ * which a server renders as a `style=""` attribute — and a Content-Security-
+ * Policy without `'unsafe-inline'` for styles refuses those: a server-rendered
+ * editor showed a bordered 300×150 frame, and hydration does not put a refused
+ * attribute right. The measured height of an `auto` frame is still written to
+ * `style`, on the client, through the CSSOM, which no policy governs.
  */
 declare function CanvasFrame({ children, id, title, className, style, mirrorStyles, onDocument, height, nonce, }: CanvasFrameProps): react.JSX.Element;
 /**
  * The whole document, for editing. Works in a `CanvasFrame` or on its own.
  *
- * `metadata` is the editor-wide metadata: the root's `puck.metadata`, and —
+ * `metadata` is the easel-wide metadata: the root's `puck.metadata`, and —
  * under each block's own — every block's (see the header).
  */
 declare function EditDocument({ metadata }: {
@@ -240,13 +313,13 @@ type CanvasOverlay = ComponentType<{
     kind: 'selected' | 'hover';
     children: ReactNode;
 }>;
-interface EditorCanvasProps {
-    /** Draw in an iframe of the editor's own (default), or straight into the page. */
+interface EaselCanvasProps {
+    /** Draw in an iframe of the easel's own (default), or straight into the page. */
     frame?: boolean;
     className?: string;
     style?: CSSProperties;
     /**
-     * The editor-wide metadata — what the published page passes `Render` as
+     * The easel-wide metadata — what the published page passes `Render` as
      * `metadata`. Every block reads it as `puck.metadata` (its own `metadata`
      * laid over it) and the root as it is. Change it whenever the host's data
      * changes: the blocks redraw in place, nothing remounts, and it never enters
@@ -265,6 +338,16 @@ interface EditorCanvasProps {
     title?: string;
     /** The page's CSP nonce for the frame's stylesheets — see `CanvasFrameProps.nonce`. Unused with `frame={false}`. */
     nonce?: string;
+    /**
+     * Bind undo / redo in the frame's document — a key pressed in the frame
+     * never reaches the page. Left out, it follows `EaselProvider`'s `hotkeys`,
+     * so one switch turns the easel's keys off everywhere. Say `true` for a
+     * host that binds the PAGE's keys itself (to its own root, because the page
+     * is another app's) and still wants the frame's; `false` for the frame
+     * alone. Either way the keys do nothing while the easel-wide `edit`
+     * permission is off (`bindUndoKeys`). Unused with `frame={false}`.
+     */
+    hotkeys?: boolean;
     onDocument?: (doc: Document | null) => void;
     /**
      * Wraps everything drawn in the frame, and is handed the frame's document —
@@ -282,9 +365,9 @@ interface EditorCanvasProps {
 }
 /**
  * `<Puck.Preview>`, ours: the document for editing, its outlines, and the
- * clicks that select. Must sit under an `EditorProvider`.
+ * clicks that select. Must sit under an `EaselProvider`.
  */
-declare function EditorCanvas({ frame, className, style, metadata, mirrorStyles, onDocument, height, title, nonce, frameWrapper: FrameWrapper, overlay, children, }: EditorCanvasProps): ReactElement;
+declare function EaselCanvas({ frame, className, style, metadata, mirrorStyles, onDocument, height, title, nonce, hotkeys, frameWrapper: FrameWrapper, overlay, children, }: EaselCanvasProps): ReactElement;
 
 /**
  * THE PARTS, ON THE STORE (blueprint step 5.2).
@@ -297,7 +380,7 @@ declare function EditorCanvas({ frame, className, style, metadata, mirrorStyles,
  */
 /** `useNodeOps` with the store as its host: reads the document, and writes one
  *  `run` — one undo step, the selection travelling with it. */
-declare function useEditorNodeOps(options?: Omit<NodeOpsHost, 'data' | 'config' | 'commit'>): {
+declare function useEaselNodeOps(options?: Omit<NodeOpsHost, 'data' | 'config' | 'commit'>): {
     held: ClipboardEntry | null;
     remove: (id: string) => boolean;
     duplicate: (id: string) => boolean;
@@ -331,7 +414,7 @@ interface SelectedFields {
  *   - fields resolve through `useResolvedFields` (Puck's
  *     `useRegisterFieldsSlice`: `changed`, `lastFields`, `appState`, `parent`);
  *   - a change runs the block's `resolveData` (`resolveNodeData`, Puck's
- *     `resolveComponentData`, with this editor's own memory of the last
+ *     `resolveComponentData`, with this easel's own memory of the last
  *     change) and then writes ONE `replace` of the node, or ONE `replaceRoot`.
  *
  * The write reads the node AT THE MOMENT IT RUNS, by id: a field changed while
@@ -349,13 +432,25 @@ declare function useSelectedFields(): SelectedFields;
  * a layout that moves Z still undoes and ⌥⌘Z does nothing.
  *
  * ⚠️ PUCK FIRED THESE IN A TEXT FIELD TOO, and so does this: ⌘Z while typing
- * in a setting undoes the editor's last step — which, since a field writes as
+ * in a setting undoes the easel's last step — which, since a field writes as
  * it is typed, is the typing — and the browser's own text undo is prevented,
  * so there are never two undo histories answering one key.
  *
- * Bound per DOCUMENT: the host page (`EditorProvider`) and the canvas frame
- * (`EditorCanvas`), because a key pressed in the frame never reaches the page.
+ * Bound per DOCUMENT: the host page (`EaselProvider`) and the canvas frame
+ * (`EaselCanvas`), because a key pressed in the frame never reaches the page.
+ * ONE switch turns both off (`EaselProvider hotkeys={false}`); the frame's
+ * alone is `EaselCanvas hotkeys`.
+ *
+ * ── Held with editing (second host, 2026-10-06) ─────────────────────────────
+ * While the easel-wide `edit` permission is off — somebody else holds the
+ * document, a save was refused, a read-only view — the keys do NOTHING: an
+ * undo is a write, and the screen may be the only copy of what it would
+ * rewind. The key is not taken either (no `preventDefault`), so a text field
+ * outside the document keeps the browser's own undo. Read at each key press,
+ * so a binding made once follows `setPermissions`. A block's own
+ * `permissions.edit` is that block's fields and is not asked. Handed only
+ * `undo` / `redo` (no `getState`), there is nothing to ask and the keys work.
  */
-declare function bindUndoKeys(doc: Document, editor: Pick<Editor, 'undo' | 'redo'>): () => void;
+declare function bindUndoKeys(doc: Document, easel: Pick<Easel, 'undo' | 'redo'> & Partial<Pick<Easel, 'getState'>>): () => void;
 
-export { CanvasFrame, type CanvasFrameProps, type CanvasOverlay, type CanvasSlotProps, DEFAULT_UI, EditDocument, type Editor, EditorAction, EditorCanvas, type EditorCanvasProps, EditorConfig, EditorCore, type EditorOptions, EditorProvider, EditorUi, EditorView, NodeSelection, Permissions, type SelectedFields, bindUndoKeys, createEditor, createUseEditor, recordsByDefault, reduce, uiView, useEditor, useEditorApi, useEditorNodeOps, useSelectedFields, validSelection };
+export { CanvasFrame, type CanvasFrameProps, type CanvasOverlay, type CanvasSlotProps, DEFAULT_UI, type Easel, EaselAction, EaselCanvas, type EaselCanvasProps, EaselConfig, EaselCore, type EaselOptions, EaselProvider, type EaselProviderProps, EaselUi, EaselView, EditDocument, NodeSelection, Permissions, type SelectedFields, bindUndoKeys, createEasel, createUseEasel, recordsByDefault, reduce, uiView, useEasel, useEaselApi, useEaselNodeOps, useSelectedFields, validSelection };

package/dist/easel/index.js

@@ -0,0 +1,9 @@
+import{DEFAULT_CANVAS_WORDS as e}from"../chunk-AELNNAFM.js";import{useResolvedFields as t}from"../chunk-YRLPFZW3.js";import{toItemSelector as n,fromItemSelector as o,useNodeOps as r}from"../chunk-D2BCHTQR.js";import{useWords as a}from"../chunk-MFIRYGHW.js";import{setCanvasNonce as i}from"../chunk-ZNCEOSXO.js";import{find as s,ROOT_ID as d,getList as l,remove as c,parseZoneKey as u,move as p,duplicate as f,replaceNode as h,createNode as m,insert as v,normalizeData as y,createResolveCache as g,resolveNodeData as k,ROOT_SLOT as b}from"../chunk-KRXQM65X.js";import{topLevelSlotKeys as w,fieldsFrom as S,defaultsFrom as I}from"../chunk-NKB3KVAB.js";import{createContext as C,useEffect as O,useContext as x,useRef as E,useSyncExternalStore as A,useState as D,useMemo as z,useCallback as M,useLayoutEffect as Z}from"react";import{jsx as N,jsxs as $}from"react/jsx-runtime";import{createPortal as j}from"react-dom";function R(e){return!["setData","setUi","set"].includes(e.type)}var B=(e,t,n,o)=>{const r=l(e,t,u(n));return r?.[o]??null},P=(e,t,n,o,r)=>{const a=B(e,t,n,o);if(!a)throw new Error(`${r}: nothing at ${n}[${o}]`);return a};function L(e,t){const{selection:o}=e;return{...e.ui,itemSelector:n(e.data,t,o),selectedSlot:o&&"slot"===o.kind?{parentId:o.parentId,slot:o.slot}:null}}function K(e,t,n){return n?"node"===n.kind?s(e,t,n.id)?n:null:n.parentId===d?l(e,t,n)?n:null:s(e,t,n.parentId)&&l(e,t,n)?n:null:null}function F(e,t,n,r=!1){const{itemSelector:a,selectedSlot:i,...s}=n;let d=e.selection;var l;return"itemSelector"in n&&(d=o(e.data,t,a??null)),"selectedSlot"in n&&(i?d=(l=i)?{kind:"slot",parentId:l.parentId,slot:l.slot}:null:"slot"===d?.kind&&(d=null)),{...e,selection:d,ui:r?s:{...e.ui,...s}}}function H(e,t,n){const o=V(e,t,n);if(o===e)return e;const r=K(o.data,n,o.selection);return r===o.selection?o:{...o,selection:r}}function V(e,t,n){const{data:o}=e;switch(t.type){case"setData":{const n="function"==typeof t.data?t.data(o):t.data;return{...e,data:{...o,...n}}}case"setUi":return F(e,n,"function"==typeof t.ui?t.ui(L(e,n)):t.ui);case"set":{const r={data:o,ui:L(e,n)},a="function"==typeof t.state?t.state(r):t.state;let i=a.data?{...e,data:a.data}:e;return a.ui&&(i=F(i,n,a.ui,!0)),i}case"insert":{const r={...u(t.destinationZone),index:t.destinationIndex},a=m(n,t.componentType,{},t.id?{id:t.id}:{});return{...e,data:v(o,n,r,a)}}case"replace":{const r=P(o,n,t.destinationZone,t.destinationIndex,"replace");if(r.props.id!==t.data.props.id)throw new Error("Can't change the id during a replace action. Use remove and insert for a new node.");return{...e,data:h(o,n,r.props.id,t.data)}}case"replaceRoot":{const n={...o.root,props:{...o.root.props,...t.root.props},readOnly:t.root.readOnly};return{...e,data:{...o,root:n}}}case"duplicate":{const r=P(o,n,t.sourceZone,t.sourceIndex,"duplicate"),a=f(o,n,r.props.id),i=B(a,n,t.sourceZone,t.sourceIndex+1);return{...e,data:a,selection:i?{kind:"node",id:i.props.id}:e.selection}}case"reorder":return V(e,{...t,type:"move",sourceZone:t.destinationZone},n);case"move":{if(t.sourceZone===t.destinationZone&&t.sourceIndex===t.destinationIndex)return e;const r=B(o,n,t.sourceZone,t.sourceIndex);if(!r)return e;const a={...u(t.destinationZone),index:t.destinationIndex};return{...e,data:p(o,n,r.props.id,a)}}case"remove":{const r=P(o,n,t.zone,t.index,"remove");return{...e,data:c(o,n,r.props.id)}}default:return e}}var T={drag:!0,duplicate:!0,delete:!0,edit:!0,insert:!0},q={leftSideBarVisible:!0,rightSideBarVisible:!0,arrayState:{},componentList:{},isDragging:!1,previewMode:"edit",viewports:{current:{width:360,height:"auto"},options:[],controlsVisible:!0},field:{focus:null}},Y=0,U=()=>`history-${Y+=1}`;function W(e){let t=e.config;const r=e.now??(()=>Date.now()),a=e.historyCoalesceMs??250;let i=e.permissions??{};const d=y(e.data,t);let c={data:d,selection:null,ui:{...q}};if(e.ui){const{itemSelector:n,selectedSlot:r,...a}=e.ui;c={data:d,selection:r?{kind:"slot",...r}:o(d,t,n??null),ui:{...q,...a}}}let u=[{core:c,at:-1/0,sealed:!0,id:U()}],p=0;const f=e=>{const t=u[p],n=r();!e&&p===u.length-1&&p>0&&!t.sealed&&n-t.at<a?u=[...u.slice(0,p),{...t,core:c,at:n}]:(u=[...u.slice(0,p+1),{core:c,at:n,sealed:e,id:U()}],p=u.length-1)},m=/* @__PURE__ */new Set;let v=null,b=null,w=0,S=null,I=!1;const C=()=>{for(const e of[...m])e()},O=()=>{u=[...u.slice(0,p),{...u[p],core:c},...u.slice(p+1)]},x=(t,n)=>{w>0?I=I||n:(n?f(!1):c!==t&&O(),c.data!==t.data&&e.onChange?.(c.data),c!==t&&C())},E=e=>{const n=c;if(c=H(c,e,t),c===n)return;const o=e.recordHistory??R(e);x(n,o&&c.data!==n.data)},A=t=>{0===w&&(S=c,I=!1),w+=1;try{t()}catch(e){throw w-=1,0===w&&S&&(c=S,S=null),e}if(w-=1,w>0||!S)return;const n=S;S=null,I&&c.data!==n.data?f(!0):c!==n&&O(),c.data!==n.data&&e.onChange?.(c.data),c!==n&&C()},D=e=>{const n=c,o=K(c.data,t,e);var r,a;(r=o,a=c.selection,r===a||r&&a&&r.kind===a.kind&&("node"===r.kind&&"node"===a.kind?r.id===a.id:"slot"===r.kind&&"slot"===a.kind&&r.parentId===a.parentId&&r.slot===a.slot))||(c={...c,selection:o},x(n,!1))},z=t=>{const n=c;p=t,c=u[p].core,c.data!==n.data&&e.onChange?.(c.data),c!==n&&C()},M=()=>(e={})=>{const n=e.root?t.root?.permissions:t.components[e.item?.type??e.type??""]?.permissions;return{...T,...i,...n}};let Z=M();const N=g(),$={resolveCache:N,async resolveAll({trigger:e="load",metadata:n}={}){const o=c.data,r={type:"root",props:{...o.root.props??{}}},a=[...o.content,...Object.values(o.zones??{}).flat()],[i,...d]=await Promise.all([k(r,t,{cache:N,trigger:e,metadata:n}),...a.map(o=>k(o,t,{cache:N,trigger:e,metadata:n}))]);A(()=>{const e=c;let n=c.data;d.forEach((e,r)=>{if(!e.didChange)return;const i=a[r].props.id,d=s(n,t,i)?.node;d&&d===s(o,t,i)?.node&&(n=h(n,t,i,e.node))}),i.didChange&&n.root===o.root&&(n={...n,root:{...n.root,props:i.node.props,readOnly:i.node.readOnly??n.root.readOnly}}),n!==c.data&&(c={...c,data:n,selection:K(n,t,c.selection)},x(e,!1))})},async resolveNode(e,{trigger:n="replace",metadata:o}={}){const r=s(c.data,t,e)?.node;if(!r)return!1;const a=await k(r,t,{cache:N,trigger:n,metadata:o});if(!a.didChange)return!1;let i=!1;return A(()=>{const n=c;if(s(c.data,t,e)?.node!==r)return;const o=h(c.data,t,e,a.node);o!==c.data&&(c={...c,data:o,selection:K(o,t,c.selection)},x(n,!1),i=!0)}),i},get config(){return t},getState(){if(v&&b===c)return v;const e=c,o={data:e.data,ui:L(e,t)},r="node"===e.selection?.kind?s(e.data,t,e.selection.id)?.node??null:null;return v={appState:o,selection:e.selection,selectedItem:r,config:t,dispatch:E,history:{back:()=>$.undo(),forward:()=>$.redo(),hasPast:p>0,hasFuture:p<u.length-1,histories:u.map(e=>({id:e.id,state:{data:e.core.data,ui:L(e.core,t)}})),index:p,setHistoryIndex:e=>{e>=0&&e<u.length&&e!==p&&z(e)}},getPermissions:Z,getItemById:n=>s(e.data,t,n)?.node,getItemBySelector:n=>function(e,t,n){const[o,r]=(n.zone??"root:default-zone").split(/:(.*)/s);return l(e,t,{parentId:o,slot:r})?.[n.index]}(e.data,t,n),getSelectorForId:o=>{const r=n(e.data,t,{kind:"node",id:o});return r?{index:r.index,zone:r.zone??"root:default-zone"}:void 0}},b=e,v},subscribe:e=>(m.add(e),()=>{m.delete(e)}),dispatch:E,batch:A,select:e=>D(e?{kind:"node",id:e}:null),selectSlot:e=>D(e?{kind:"slot",parentId:e.parentId,slot:e.slot}:null),run(e){A(()=>{const n=c,o=void 0===e.select?c.selection:e.select;c={...c,data:e.data,selection:K(e.data,t,o)},x(n,e.data!==n.data)})},load(e,n={}){const o=c,r=y(e,t);c={...c,data:r,selection:K(r,t,n.selection??c.selection)},n.keepHistory||(u=[{core:c,at:-1/0,sealed:!0,id:U()}],p=0),c!==o&&C()},undo(){p>0&&z(p-1)},redo(){p<u.length-1&&z(p+1)},setPermissions(e){(function(e,t){if(e===t)return!0;const n=Object.keys(e);return n.length===Object.keys(t).length&&n.every(n=>e[n]===t[n])})(e,i)||(i=e,Z=M(),v=null,C())},setConfig(e){e!==t&&(t=e,Z=M(),v=null,C())}};return $}function X(e,t){const n=e=>{if(e.altKey)return;if(!(e.metaKey!==e.ctrlKey))return;const n="KeyZ"===e.code,o="KeyY"===e.code&&!e.shiftKey;(n||o)&&!1!==t.getState?.().getPermissions().edit&&(e.preventDefault(),o||e.shiftKey?t.redo():t.undo())};return e.addEventListener("keydown",n),()=>e.removeEventListener("keydown",n)}var Q=C(null),G=C(!0);function J({easel:e,hotkeys:t=!0,resolveOnMount:n=!0,children:o}){return O(()=>{n&&e.resolveAll()},[e,n]),O(()=>{if(t&&"undefined"!=typeof document)return X(document,e)},[e,t]),/* @__PURE__ */N(Q.Provider,{value:e,children:/* @__PURE__ */N(G.Provider,{value:t,children:o})})}function _(){const e=x(Q);if(!e)throw new Error("useEasel: no <EaselProvider> above this component");return e}function ee(e){const t=_(),n=E({view:null,selector:null,value:void 0,has:!1}),o=()=>{const o=t.getState(),r=n.current;if(r.has&&r.view===o&&r.selector===e)return r.value;const a=e(o);return r.has&&Object.is(r.value,a)?(n.current={view:o,selector:e,value:r.value,has:!0},r.value):(n.current={view:o,selector:e,value:a,has:!0},a)};return A(t.subscribe,o,o)}function te(){return function(e){return ee(e)}}var ne="data-puck-component",oe="data-puck-dropzone",re={},ae="data-es-mirror",ie="undefined"==typeof window?O:Z;function se(e,t,n){for(const e of Array.from(t.head.querySelectorAll(`[${ae}]`)))e.remove();for(const o of Array.from(e.head.querySelectorAll('style, link[rel="stylesheet"]'))){const e=o.cloneNode(!0);e.setAttribute(ae,""),n&&e.setAttribute("nonce",n),t.head.appendChild(e)}}function de({children:t,id:n="preview-frame",title:o,className:r,style:s,mirrorStyles:d=!0,onDocument:l,height:c="auto",nonce:u}){const p=a("canvas",e),f=E(null),[h,m]=D(null);return ie(()=>{const e=f.current,t=h?.ownerDocument.defaultView;if("auto"!==c||!e||!h||!t)return;const n=()=>{e.style.height=`${Math.ceil(h.getBoundingClientRect().height)}px`};n();const o=t.ResizeObserver,r=o?new o(n):null;return r?.observe(h),()=>r?.disconnect()},[h,c]),ie(()=>{let e=f.current?.contentDocument;if(!e)return;"CSS1Compat"!==e.compatMode&&(e.open(),e.write("<!DOCTYPE html><html><head></head><body></body></html>"),e.close(),e=f.current?.contentDocument??e),e.body||e.documentElement.appendChild(e.createElement("body")),e.body.style.margin="0";const t=e.createElement("div");t.setAttribute("data-puck-entry",""),t.id="frame-root","fill"===c&&t.classList.add("es-frame-fill"),e.body.appendChild(t),i(e,u),m(t),l?.(e);let n=null;const o=f.current?.ownerDocument;if(d&&o){se(o,e,u);const t=o.defaultView;t&&"MutationObserver"in t&&(n=new t.MutationObserver(()=>se(o,e,u)),n.observe(o.head,{childList:!0,subtree:!0,characterData:!0}))}return()=>{n?.disconnect(),t.remove(),m(null),l?.(null)}},[]),/* @__PURE__ */N("iframe",{ref:f,id:n,title:o??p.frame,className:["es-canvas-frame","fill"===c?"is-fill":"",r??""].filter(Boolean).join(" "),style:s,children:h?j(t,h):null})}var le=C(null),ce=C(re),ue=[];function pe({parentId:e,slot:t,className:n,style:o,minEmptyHeight:r=128}){const a=_(),i=ee(n=>l(n.appState.data,a.config,{parentId:e,slot:t})??ue),s=ee(t=>"node"===t.selection?.kind&&t.selection.id===e&&e!==d),c=ee(n=>"slot"===n.selection?.kind&&n.selection.parentId===e&&n.selection.slot===t),u=x(le),p=["es-zone"];return i.length&&p.push("has-children"),e===d&&p.push("is-root"),(s||c)&&p.push("is-area-selected"),null!==u&&u===e&&e!==d&&p.push("is-hovering-area"),n&&p.push(n),/* @__PURE__ */N("div",{className:p.join(" "),[oe]:`${e}:${t}`,style:{...o,"--min-empty-height":`${r}px`},children:i.map(e=>/* @__PURE__ */N(me,{node:e},e.props.id))})}function fe(e,t,n,o){const r="root"===t?e.root:e.components[t],a={...o};for(const e of w(S(r)))a[e]=function(t={}){/* @__PURE__ */
+return N(pe,{parentId:n,slot:e,...t})};return a}function he(e){return function({zone:t,...n}){/* @__PURE__ */
+return N(pe,{parentId:e,slot:t,...n})}}function me({node:e}){const t=_().config,n=t.components[e.type],o=e.props.id,r=function(e){const t=E(null);return z(()=>n=>{const o=t.current;o&&o!==n&&(o.removeAttribute(ne),o.removeAttribute("data-puck-dnd")),t.current=n,n&&(n.setAttribute(ne,e),n.setAttribute("data-puck-dnd",e),n.style.position="relative")},[e])}(o),a=x(ce);if(!n?.render)return null;const i=n.render,s=fe(t,e.type,o,{...I(n),...e.props}),d={renderDropZone:he(o),isEditing:!0,dragRef:n.inline?r:null,metadata:{...a,...n.metadata}};return n.inline?/* @__PURE__ */N(i,{...s,puck:d,editMode:!0}):/* @__PURE__ */N("div",{[ne]:o,"data-puck-dnd":o,style:{position:"relative"},children:/* @__PURE__ */N(i,{...s,puck:d,editMode:!0})})}function ve({metadata:e}){const t=ee(e=>e.config),n=ee(e=>e.appState.data.root).props??{},o=t.root?.render,r=/* @__PURE__ */N(pe,{parentId:d,slot:b}),a=o?/* @__PURE__ */N(o,{id:"puck-root",...fe(t,"root",d,n),puck:{renderDropZone:he(d),isEditing:!0,dragRef:null,metadata:e??{}},editMode:!0,children:r}):r;/* @__PURE__ */
+return N(ce.Provider,{value:e??re,children:a})}function ye({id:e,kind:t,overlay:n}){const o=E(null),[r,a]=D(null);ie(()=>{const t=o.current?.ownerDocument,n=t?.defaultView;if(!t||!n||!e)return void a(null);let r=0;const i=()=>{r=0;const i=function(e,t){if(!e||!t)return null;const n=e.getBoundingClientRect(),o=t.getBoundingClientRect();return{top:n.top-o.top,left:n.left-o.left,width:n.width,height:n.height}}(t.querySelector(`[${ne}="${n.CSS?.escape?n.CSS.escape(e):e}"]`),o.current?.parentElement??null);a(e=>{return(t=e)===(n=i)||t&&n&&t.top===n.top&&t.left===n.left&&t.width===n.width&&t.height===n.height?e:i;var t,n})},s=()=>{r||(r=(n.requestAnimationFrame??(e=>n.setTimeout(e,16)))(i))};i();const d="MutationObserver"in n?new n.MutationObserver(s):null;d?.observe(t.body,{childList:!0,subtree:!0,attributes:!0,characterData:!0});const l="ResizeObserver"in n?new n.ResizeObserver(s):null;return l?.observe(t.documentElement),n.addEventListener("resize",s),()=>{d?.disconnect(),l?.disconnect(),n.removeEventListener("resize",s),r&&(n.cancelAnimationFrame??n.clearTimeout)(r)}},[e]);const i=/* @__PURE__ */N("div",{ref:o,"aria-hidden":"true",className:`es-canvas-outline is-${t}`,style:r?{position:"absolute",top:r.top,left:r.left,width:r.width,height:r.height}:{display:"none"}});return n&&e?/* @__PURE__ */N(n,{componentId:e,kind:t,children:i}):i}function ge({frame:e=!0,className:t,style:n,metadata:o,mirrorStyles:r,onDocument:a,height:i,title:s,nonce:d,hotkeys:l,frameWrapper:c,overlay:u,children:p}){const f=_(),h=x(G),m=l??h,[v,y]=D(void 0),g=ee(e=>"node"===e.selection?.kind?e.selection.id:null),[k,b]=D(null),w=/* @__PURE__ */$("div",{className:"es-canvas-content",style:{position:"relative"},onClick:e=>{const t=e.target;t.closest?.("a[href]")&&e.preventDefault();const n=t.closest?.(`[${ne}]`);n?f.select(n.getAttribute(ne)):t.hasAttribute?.(oe)||f.select(null)},onMouseOver:e=>{const t=e.target.closest?.(`[${ne}]`),n=t?.getAttribute(ne)??null;n!==k&&b(n)},onMouseLeave:()=>b(null),children:[
+/* @__PURE__ */N(le.Provider,{value:k,children:/* @__PURE__ */N(ve,{metadata:o})}),
+/* @__PURE__ */$("div",{className:"es-canvas-outlines",style:{position:"absolute",top:0,left:0,pointerEvents:"none"},children:[
+/* @__PURE__ */N(ye,{id:k&&k!==g?k:null,kind:"hover",overlay:u}),
+/* @__PURE__ */N(ye,{id:g,kind:"selected",overlay:u})]}),p]}),S=c?/* @__PURE__ */N(c,{document:v,children:w}):w;O(()=>{if(v&&m)return X(v,f)},[v,m,f]);/* @__PURE__ */
+return N("div",{className:"es-canvas"+(t?` ${t}`:""),style:n,"data-puck-preview":"",children:e?/* @__PURE__ */N(de,{mirrorStyles:r,onDocument:e=>{y(e??void 0),a?.(e)},height:i,title:s,nonce:d,children:S}):/* @__PURE__ */N("div",{id:"preview-frame","data-puck-entry":"",children:S})})}function ke(e={}){const t=_(),n=ee(e=>e.appState.data);return r({...e,data:n,config:t.config,commit:(e,{select:n})=>t.run({data:e,select:n})})}function be(){const e=_(),n=ee(e=>e.config),o=e.resolveCache,r=ee(e=>e.selectedItem),a=ee(e=>e.appState.data.root),i=r?r.props.id:"root",d=a.props??{},l=z(()=>r||{type:"root",props:d},[r,d]),c=r?n.components[r.type]:n.root,u=e.getState(),p=r?s(u.appState.data,n,i):null,f=p&&"root"!==p.place.parentId?p.place.parentId:null,h=f?u.getItemById(f)??null:null,{fields:m}=t({id:i,node:l,block:c,parent:h,appState:u.appState}),v=ee(e=>!1===e.getPermissions(r?{item:r}:{root:!0}).edit),y=M((t,r)=>{(async()=>{const a=e.getState();if("root"!==i){const s=a.getItemById(i),d=a.getSelectorForId(i);if(!s||!d)return;const l={...s,props:{...s.props,[t]:r}},{node:c}=await k(l,n,{cache:o,trigger:"replace"}),u=e.getState().getSelectorForId(i);if(!u)return;return void e.dispatch({type:"replace",destinationZone:u.zone??"root:default-zone",destinationIndex:u.index,data:c})}const s=a.appState.data.root.props??{},{node:d}=await k({type:"root",props:{...s,[t]:r}},n,{cache:o,trigger:"replace"});e.dispatch({type:"replaceRoot",root:{props:d.props,readOnly:d.readOnly},recordHistory:!0})})()},[e,n,o,i]);return{id:i,node:l,fields:m,values:l.props,readOnly:v,onChange:y}}export{de as CanvasFrame,q as DEFAULT_UI,ge as EaselCanvas,J as EaselProvider,ve as EditDocument,X as bindUndoKeys,W as createEasel,te as createUseEasel,R as recordsByDefault,H as reduce,L as uiView,ee as useEasel,_ as useEaselApi,ke as useEaselNodeOps,be as useSelectedFields,K as validSelection};

package/dist/edit-lock/index.d.ts

@@ -177,7 +177,7 @@ declare const documentPermissions: (canEdit: boolean) => DocumentPermissions;
 /**
  * "just now" / "2 minutes ago" — one phrasing, shared by every notice.
  *
- * `words` is the host's language (`useEditorStrings().lock`, 0.95.0); left out,
+ * `words` is the host's language (`useEaselStrings().lock`, 0.95.0); left out,
  * it is the English it always was. The thresholds are not words and do not
  * move: under 45 seconds is "just now", then whole minutes, then whole hours.
  */
@@ -192,7 +192,7 @@ declare const nameOrSomeone: (name: string, words?: LockWords) => string;
  * a reload IS a new editor session, and a remembered id would let a closed tab's
  * claim look alive.
  */
-declare function newEditorClientId(): string;
+declare function newEaselClientId(): string;
 /**
  * The `code` of a document write refused because somebody else TOOK the
  * document from this tab (backend `efficient/editlock.py`,
@@ -351,4 +351,4 @@ type EditLock = {
 /** Bind the decisions to one editor's HTTP client and document type. */
 declare function createEditLock(adapter: EditLockAdapter): EditLock;
 
-export { type ClaimBeatDeps, type DocumentPermissions, EDIT_LOCK_TAKEN, type EditAccess, type EditLock, type EditLockAdapter, type EditLockBody, type EditLockFailure, type HeldWrite, type LockHolder, type LockWords, type SaveConflict, accessForNewDocument, canWriteDocument, createEditLock, describeAge, documentPermissions, documentVersionMoved, holderOf, nameOrSomeone, newEditorClientId, readLockHolder, reloadIfVersionMoved, shouldReleaseHeldWrite, shouldReloadAfterTakeover };
+export { type ClaimBeatDeps, type DocumentPermissions, EDIT_LOCK_TAKEN, type EditAccess, type EditLock, type EditLockAdapter, type EditLockBody, type EditLockFailure, type HeldWrite, type LockHolder, type LockWords, type SaveConflict, accessForNewDocument, canWriteDocument, createEditLock, describeAge, documentPermissions, documentVersionMoved, holderOf, nameOrSomeone, newEaselClientId, readLockHolder, reloadIfVersionMoved, shouldReleaseHeldWrite, shouldReloadAfterTakeover };

package/dist/edit-lock/index.js

@@ -1 +1 @@
-export{EDIT_LOCK_TAKEN,accessForNewDocument,canWriteDocument,createEditLock,describeAge,documentPermissions,documentVersionMoved,holderOf,nameOrSomeone,newEditorClientId,readLockHolder,reloadIfVersionMoved,shouldReleaseHeldWrite,shouldReloadAfterTakeover}from"../chunk-TDA4HH54.js";import"../chunk-RE4LP46F.js";
+export{EDIT_LOCK_TAKEN,accessForNewDocument,canWriteDocument,createEditLock,describeAge,documentPermissions,documentVersionMoved,holderOf,nameOrSomeone,newEaselClientId,readLockHolder,reloadIfVersionMoved,shouldReleaseHeldWrite,shouldReloadAfterTakeover}from"../chunk-JUQ6YJCG.js";import"../chunk-RE4LP46F.js";

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) ───────────────── */
 
@@ -274,6 +363,16 @@
 /* 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; }
+/* …but the list is NOT a scroll box, as Layers is (`.es-tree { overflow-y:
+   auto }`): the panel around it scrolls. A row's drag hint hangs 4px under the
+   row, 22px tall, and under the LAST row the tree has less room than that: it
+   clipped the hint to 8px (second host, 2026-10-07). What overflowed also
+   made the list a scroller of its own inside the panel: a wheel over it moved
+   the rows 14px, and it was the nearest box that scrolled, so a drag in the
+   list scrolled IT at its edges, not the panel. Measured in Chrome
+   (scripts/second-host-clickthrough.mjs). Two classes, so it wins whichever
+   sheet loads last. */
+.es-tree.es-list-tree { overflow: visible; }
 
 .es-list-add {
   height: 32px;
@@ -289,31 +388,9 @@
 .es-list-add:disabled { color: var(--es-disabled); cursor: default; }
 .es-list-add:focus-visible { outline: 2px solid var(--es-accent); outline-offset: 1px; }
 
-/* An item opened: the way back, its name, its own settings, its two actions. */
+/* An item opened: the way back (chrome's InspectorUpLevel, inline), its name,
+   its own settings, its two actions. */
 .es-list.is-open { gap: 12px; }
-.es-list-back {
-  align-self: flex-start;
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  height: 28px;
-  padding: 0 8px;
-  border: 0;
-  border-radius: var(--es-field-radius);
-  background: var(--es-hover);
-  color: var(--es-text-secondary);
-  font: inherit;
-  font-size: 12px;
-  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; }