efficient-easel 0.0.0 → 0.97.0

package/dist/editor/index.d.ts

@@ -0,0 +1,361 @@
+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 { 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-CEqUFH2j.js';
+import '../buckets-1vRlQceY.js';
+
+interface EditorOptions<C extends EditorConfig = EditorConfig> {
+    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`. */
+    onChange?: (data: Data) => void;
+    /** Editor-wide permissions, under each block's own (Puck's `permissions`). */
+    permissions?: Partial<Permissions>;
+    /**
+     * Changes recorded closer together than this collapse into ONE undo step —
+     * Puck's 250 ms history debounce, so a word typed into a field is undone as
+     * a word and not as letters. A `batch` is never collapsed into its
+     * neighbours. 0 records every change on its own.
+     */
+    historyCoalesceMs?: number;
+    /** 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>;
+    subscribe: (listener: () => void) => () => void;
+    /** One Puck action. Outside a `batch`, one undo step when it records. */
+    dispatch: (action: EditorAction) => void;
+    /**
+     * Run several changes as ONE: one undo step, one `onChange`, and one
+     * notification to subscribers. Each dispatch inside sees the ones before it.
+     * Throwing inside puts everything back. Batches nest; only the outer one
+     * records.
+     */
+    batch: (fn: () => void) => void;
+    /** Select a node by id, or nothing. Selection is not an undo step. */
+    select: (id: string | null) => void;
+    /** Select a slot — a column — or nothing. */
+    selectSlot: (address: SlotAddress | null) => void;
+    /** Apply a node-ops plan (`{ data, select }`) as one change. */
+    run: (plan: {
+        data: Data;
+        select?: NodeSelection | undefined;
+    }) => void;
+    /**
+     * Put a different document in WITHOUT remounting anything — Puck needed a
+     * new `key` on `<Puck>` for that, which threw away every subscriber's state.
+     * The history starts again at this document unless `keepHistory`.
+     */
+    load: (data: DataInput | Data, options?: {
+        keepHistory?: boolean;
+        selection?: NodeSelection;
+    }) => void;
+    undo: () => void;
+    redo: () => void;
+    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
+     * 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 —
+     *  Puck kept one per editor, shared by every write that resolves. */
+    readonly resolveCache: ResolveCache;
+    /**
+     * Swap the config in place — `<Puck>` took a new `config` prop live. The
+     * website editor rebuilds a few blocks' fields when the site's gap moves; the
+     * document, the selection and the history are untouched.
+     */
+    setConfig: (config: C) => void;
+    /** The config in force now. */
+    readonly config: C;
+}
+/**
+ * Puck 0.20's UI at mount (`defaultAppState.ui`), less the selection, which
+ * the store holds by id. A host's chrome reads these — the website editor
+ * opens its side panels from `leftSideBarVisible` / `rightSideBarVisible` — so
+ * a host moving off `<Puck>` finds them where they were.
+ */
+declare const DEFAULT_UI: Record<string, unknown>;
+/**
+ * THE EDITOR 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.
+ */
+declare function createEditor<C extends EditorConfig>(options: EditorOptions<C>): Editor<C>;
+
+/**
+ * Puck 0.20's reducer, on `efficient-easel/data` — blueprint step 5.1.
+ *
+ * Each action means what it meant to Puck, so the apps' `dispatch` calls move
+ * over unchanged (`reorder`'s and `move`'s indexes, `replaceRoot` MERGING
+ * props, `duplicate` selecting the copy, `insert` leaving the selection where
+ * it was). Two things differ, on purpose:
+ *
+ *   - THE SELECTION IS BY ID. Puck held `itemSelector` — a place — so a node
+ *     inserted or removed above the selected one silently moved the selection
+ *     onto its neighbour, and both editors carried patches for exactly that.
+ *     Here `itemSelector` is derived from the id on every read, and a
+ *     selection whose node is gone becomes nothing rather than whatever now
+ *     sits in its place.
+ *   - A SLOT CAN BE SELECTED (a column): `ui.selectedSlot`, which Puck had no
+ *     way to say.
+ */
+/** Whether Puck records an action in history when the action does not say:
+ *  everything but the state-setters. */
+declare function recordsByDefault(action: EditorAction): boolean;
+/** The UI as Puck shows it: the host's keys, with the selection translated. */
+declare function uiView(core: EditorCore, config: EditorConfig): EditorUi;
+/** A selection that still points at something; otherwise nothing. */
+declare function validSelection(data: Data, config: EditorConfig, 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;
+
+/** 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;
+    hotkeys?: boolean;
+    /** Run every block's `resolveData` once the editor mounts, as `<Puck>` did
+     *  (`editor.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
+ *  (`useGetPuck`'s job) and for `dispatch` / `batch` / `select`. */
+declare function useEditorApi<C extends EditorConfig = EditorConfig>(): Editor<C>;
+/**
+ * Read a slice of the editor 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.
+ *
+ * A selector may return a fresh object; the snapshot is cached per state and
+ * 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;
+/**
+ * A typed `useEditor` 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;
+
+/** What a slot component accepts — Puck's. */
+interface CanvasSlotProps {
+    className?: string;
+    style?: CSSProperties;
+    allow?: string[];
+    disallow?: string[];
+    minEmptyHeight?: number;
+    collisionAxis?: unknown;
+}
+interface CanvasFrameProps {
+    children?: ReactNode;
+    /** `preview-frame` by default — the id the apps' canvas watchers look for. */
+    id?: string;
+    /**
+     * The frame's accessible name. Default "Canvas", in the strings provider's
+     * language (`EditorStrings.canvas.frame`).
+     */
+    title?: string;
+    className?: string;
+    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. */
+    mirrorStyles?: boolean;
+    /** Called with the frame's document once it is ready, and null when it goes. */
+    onDocument?: (doc: Document | null) => void;
+    /**
+     * `'auto'` (the default, Puck's): the frame is as tall as its content, and
+     * the host's pane scrolls it — so the canvas reads like the page it is.
+     * `'fill'`: the frame fills its parent and scrolls itself.
+     */
+    height?: 'auto' | 'fill';
+    /**
+     * The page's CSP nonce, for a host whose policy allows styles by nonce
+     * (`style-src 'nonce-…'`). The frame is the host page's own document, so the
+     * same policy applies in it, and a stylesheet without the nonce is refused.
+     * Given, it is set on every stylesheet the canvas puts in the frame: each
+     * `<style>` and `<link rel="stylesheet">` copied in from the host
+     * (`mirrorStyles`), and each sheet `useCanvasStyle` / `upsertCanvasStyle`
+     * (`efficient-easel/canvas`) creates there. Left out, nothing changes.
+     *
+     * Read when the frame is built, like `mirrorStyles`: a nonce is the page's
+     * for as long as the page lives.
+     */
+    nonce?: string;
+}
+/**
+ * An iframe of the editor'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
+ * arriving late, a dev reload).
+ *
+ * ⚠️ THAT FIRST DOCUMENT HAS NO DOCTYPE, SO IT RENDERS IN QUIRKS MODE, and it
+ * is rewritten with one before anything is drawn. Puck's frame was a
+ * `<!DOCTYPE html>` srcdoc, so every block was written against standards mode;
+ * in quirks mode a `height: 100%` resolves through auto-height ancestors (an
+ * 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.)
+ */
+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 —
+ * under each block's own — every block's (see the header).
+ */
+declare function EditDocument({ metadata }: {
+    metadata?: Record<string, unknown>;
+}): react.JSX.Element;
+/** What a host may wrap an outline in — Puck's `componentOverlay`: render
+ *  `children` to draw it, or nothing to hide it (a text part open on the
+ *  block, say). */
+type CanvasOverlay = ComponentType<{
+    componentId: string;
+    kind: 'selected' | 'hover';
+    children: ReactNode;
+}>;
+interface EditorCanvasProps {
+    /** Draw in an iframe of the editor'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
+     * `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
+     * the document or the undo history.
+     */
+    metadata?: Record<string, unknown>;
+    /** Copy the host's stylesheets into the frame (default true). */
+    mirrorStyles?: boolean;
+    /** The frame's height: as tall as its content (default, Puck's), or filling its parent. */
+    height?: 'auto' | 'fill';
+    /**
+     * The frame's accessible name — an iframe with none is announced as "frame".
+     * Default "Canvas", in the strings provider's language. Unused with
+     * `frame={false}`, where there is no frame to name.
+     */
+    title?: string;
+    /** The page's CSP nonce for the frame's stylesheets — see `CanvasFrameProps.nonce`. Unused with `frame={false}`. */
+    nonce?: string;
+    onDocument?: (doc: Document | null) => void;
+    /**
+     * Wraps everything drawn in the frame, and is handed the frame's document —
+     * Puck's `overrides.iframe`: where a host syncs its theme onto the frame's
+     * `<html>` or adds frame-only CSS.
+     */
+    frameWrapper?: ComponentType<{
+        document?: Document;
+        children: ReactNode;
+    }>;
+    /** Wraps each outline — Puck's `componentOverlay`; see `CanvasOverlay`. */
+    overlay?: CanvasOverlay;
+    /** Drawn inside the frame, after the document — a host's canvas-only layer. */
+    children?: ReactNode;
+}
+/**
+ * `<Puck.Preview>`, ours: the document for editing, its outlines, and the
+ * clicks that select. Must sit under an `EditorProvider`.
+ */
+declare function EditorCanvas({ frame, className, style, metadata, mirrorStyles, onDocument, height, title, nonce, frameWrapper: FrameWrapper, overlay, children, }: EditorCanvasProps): ReactElement;
+
+/**
+ * THE PARTS, ON THE STORE (blueprint step 5.2).
+ *
+ * Every part built in steps 2.1–4.9 takes a HOST — what to read, how to write
+ * — so it never knew Puck. Until now each app wrote that host twice, once per
+ * editor, against Puck's store: `EmailFields` and `SiteFields` for the settings
+ * panel, the node-ops host for the menus. These are the hosts, written ONCE,
+ * against the engine's store; the parts' own APIs do not change.
+ */
+/** `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'>): {
+    held: ClipboardEntry | null;
+    remove: (id: string) => boolean;
+    duplicate: (id: string) => boolean;
+    move: (id: string, to: Place) => boolean;
+    step: (id: string, dir: -1 | 1) => boolean;
+    canStep: (id: string, dir: -1 | 1) => boolean;
+    setProps: (id: string, patch: Record<string, unknown>) => boolean;
+    copy: (id: string, label: string) => boolean;
+    cut: (id: string, label: string) => boolean;
+    paste: (at: Place) => boolean;
+    parentOf: (selection: NodeSelection) => NodeSelection;
+};
+interface SelectedFields {
+    /** The selected node's id, or `"root"` with nothing selected. */
+    id: string;
+    /** The node the fields are for — the selected one, or the root as `{ type: 'root', props }`. */
+    node: ResolvableItem;
+    /** Its fields, resolved as Puck resolved them (`resolveFields` with Puck's params, parent included). */
+    fields: InspectorFields;
+    /** What the fields show. */
+    values: Record<string, unknown>;
+    /** The block's (or the root's) `edit` permission is off. */
+    readOnly: boolean;
+    /** Write one field: `resolveData` as Puck ran it, then ONE replace — one undo step. */
+    onChange: (name: string, value: unknown) => void;
+}
+/**
+ * The settings panel's host: the selected node's fields and the write that
+ * changes one — what `EmailFields` and `SiteFields` each did against Puck,
+ * here once:
+ *   - 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
+ *     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
+ * a resolver is still running writes onto what is current, never onto what was
+ * selected when the change began.
+ */
+declare function useSelectedFields(): SelectedFields;
+
+/**
+ * UNDO AND REDO ON THE KEYBOARD — Puck's own six bindings, which both editors
+ * relied on without writing any: ⌘Z / Ctrl+Z undo; ⇧⌘Z, ⌘Y, Ctrl+Shift+Z and
+ * Ctrl+Y redo.
+ *
+ * Exact combinations, read off the physical key (`code`, as Puck read it), so
+ * 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
+ * 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.
+ */
+declare function bindUndoKeys(doc: Document, editor: Pick<Editor, 'undo' | 'redo'>): () => 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 };

package/dist/editor/index.js

@@ -0,0 +1,9 @@
+import{DEFAULT_CANVAS_WORDS as e}from"../chunk-GGTPNGFJ.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 i}from"../chunk-MFIRYGHW.js";import{setCanvasNonce as a}from"../chunk-ZNCEOSXO.js";import{find as s,ROOT_ID as l,getList as d,remove as c,parseZoneKey as u,move as p,duplicate as h,replaceNode as f,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 x,useContext as O,useRef as D,useSyncExternalStore as E,useState as A,useLayoutEffect as z,useMemo as M,useCallback as Z}from"react";import{jsx as $,jsxs as R}from"react/jsx-runtime";import{createPortal as N}from"react-dom";function B(e){return!["setData","setUi","set"].includes(e.type)}var P=(e,t,n,o)=>{const r=d(e,t,u(n));return r?.[o]??null},j=(e,t,n,o,r)=>{const i=P(e,t,n,o);if(!i)throw new Error(`${r}: nothing at ${n}[${o}]`);return i};function K(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 L(e,t,n){return n?"node"===n.kind?s(e,t,n.id)?n:null:n.parentId===l?d(e,t,n)?n:null:s(e,t,n.parentId)&&d(e,t,n)?n:null:null}function F(e,t,n,r=!1){const{itemSelector:i,selectedSlot:a,...s}=n;let l=e.selection;var d;return"itemSelector"in n&&(l=o(e.data,t,i??null)),"selectedSlot"in n&&(a?l=(d=a)?{kind:"slot",parentId:d.parentId,slot:d.slot}:null:"slot"===l?.kind&&(l=null)),{...e,selection:l,ui:r?s:{...e.ui,...s}}}function H(e,t,n){const o=V(e,t,n);if(o===e)return e;const r=L(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(K(e,n)):t.ui);case"set":{const r={data:o,ui:K(e,n)},i="function"==typeof t.state?t.state(r):t.state;let a=i.data?{...e,data:i.data}:e;return i.ui&&(a=F(a,n,i.ui,!0)),a}case"insert":{const r={...u(t.destinationZone),index:t.destinationIndex},i=m(n,t.componentType,{},t.id?{id:t.id}:{});return{...e,data:v(o,n,r,i)}}case"replace":{const r=j(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:f(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=j(o,n,t.sourceZone,t.sourceIndex,"duplicate"),i=h(o,n,r.props.id),a=P(i,n,t.sourceZone,t.sourceIndex+1);return{...e,data:i,selection:a?{kind:"node",id:a.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=P(o,n,t.sourceZone,t.sourceIndex);if(!r)return e;const i={...u(t.destinationZone),index:t.destinationIndex};return{...e,data:p(o,n,r.props.id,i)}}case"remove":{const r=j(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}},G=0,Y=()=>`history-${G+=1}`;function U(e){let t=e.config;const r=e.now??(()=>Date.now()),i=e.historyCoalesceMs??250;let a=e.permissions??{};const l=y(e.data,t);let c={data:l,selection:null,ui:{...q}};if(e.ui){const{itemSelector:n,selectedSlot:r,...i}=e.ui;c={data:l,selection:r?{kind:"slot",...r}:o(l,t,n??null),ui:{...q,...i}}}let u=[{core:c,at:-1/0,sealed:!0,id:Y()}],p=0;const h=e=>{const t=u[p],n=r();!e&&p===u.length-1&&p>0&&!t.sealed&&n-t.at<i?u=[...u.slice(0,p),{...t,core:c,at:n}]:(u=[...u.slice(0,p+1),{core:c,at:n,sealed:e,id:Y()}],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()},x=()=>{u=[...u.slice(0,p),{...u[p],core:c},...u.slice(p+1)]},O=(t,n)=>{w>0?I=I||n:(n?h(!1):c!==t&&x(),c.data!==t.data&&e.onChange?.(c.data),c!==t&&C())},D=e=>{const n=c;if(c=H(c,e,t),c===n)return;const o=e.recordHistory??B(e);O(n,o&&c.data!==n.data)},E=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?h(!0):c!==n&&x(),c.data!==n.data&&e.onChange?.(c.data),c!==n&&C()},A=e=>{const n=c,o=L(c.data,t,e);var r,i;(r=o,i=c.selection,r===i||r&&i&&r.kind===i.kind&&("node"===r.kind&&"node"===i.kind?r.id===i.id:"slot"===r.kind&&"slot"===i.kind&&r.parentId===i.parentId&&r.slot===i.slot))||(c={...c,selection:o},O(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,...a,...n}},Z=g(),$={resolveCache:Z,async resolveAll({trigger:e="load",metadata:n}={}){const o=c.data,r={type:"root",props:{...o.root.props??{}}},i=[...o.content,...Object.values(o.zones??{}).flat()],[a,...l]=await Promise.all([k(r,t,{cache:Z,trigger:e,metadata:n}),...i.map(o=>k(o,t,{cache:Z,trigger:e,metadata:n}))]);E(()=>{const e=c;let n=c.data;l.forEach((e,r)=>{if(!e.didChange)return;const a=i[r].props.id,l=s(n,t,a)?.node;l&&l===s(o,t,a)?.node&&(n=f(n,t,a,e.node))}),a.didChange&&n.root===o.root&&(n={...n,root:{...n.root,props:a.node.props,readOnly:a.node.readOnly??n.root.readOnly}}),n!==c.data&&(c={...c,data:n,selection:L(n,t,c.selection)},O(e,!1))})},get config(){return t},getState(){if(v&&b===c)return v;const e=c,o={data:e.data,ui:K(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:D,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:K(e.core,t)}})),index:p,setHistoryIndex:e=>{e>=0&&e<u.length&&e!==p&&z(e)}},getPermissions:M,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 d(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:D,batch:E,select:e=>A(e?{kind:"node",id:e}:null),selectSlot:e=>A(e?{kind:"slot",parentId:e.parentId,slot:e.slot}:null),run(e){E(()=>{const n=c,o=void 0===e.select?c.selection:e.select;c={...c,data:e.data,selection:L(e.data,t,o)},O(n,e.data!==n.data)})},load(e,n={}){const o=c,r=y(e,t);c={...c,data:r,selection:L(r,t,n.selection??c.selection)},n.keepHistory||(u=[{core:c,at:-1/0,sealed:!0,id:Y()}],p=0),c!==o&&C()},undo(){p>0&&z(p-1)},redo(){p<u.length-1&&z(p+1)},setPermissions(e){a=e,v=null,C()},setConfig(e){e!==t&&(t=e,v=null,C())}};return $}function W(e,t){const n=e=>{if(e.altKey)return;e.metaKey!==e.ctrlKey&&("KeyZ"===e.code?(e.preventDefault(),e.shiftKey?t.redo():t.undo()):"KeyY"!==e.code||e.shiftKey||(e.preventDefault(),t.redo()))};return e.addEventListener("keydown",n),()=>e.removeEventListener("keydown",n)}var X=C(null);function Q({editor:e,hotkeys:t=!0,resolveOnMount:n=!0,children:o}){return x(()=>{n&&e.resolveAll()},[e,n]),x(()=>{if(t&&"undefined"!=typeof document)return W(document,e)},[e,t]),/* @__PURE__ */$(X.Provider,{value:e,children:o})}function J(){const e=O(X);if(!e)throw new Error("useEditor: no <EditorProvider> above this component");return e}function _(e){const t=J(),n=D({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 i=e(o);return r.has&&Object.is(r.value,i)?(n.current={view:o,selector:e,value:r.value,has:!0},r.value):(n.current={view:o,selector:e,value:i,has:!0},i)};return E(t.subscribe,o,o)}function ee(){return function(e){return _(e)}}var te="data-puck-component",ne="data-puck-dropzone",oe={},re="data-es-mirror";function ie(e,t,n){for(const e of Array.from(t.head.querySelectorAll(`[${re}]`)))e.remove();for(const o of Array.from(e.head.querySelectorAll('style, link[rel="stylesheet"]'))){const e=o.cloneNode(!0);e.setAttribute(re,""),n&&e.setAttribute("nonce",n),t.head.appendChild(e)}}function ae({children:t,id:n="preview-frame",title:o,className:r,style:s,mirrorStyles:l=!0,onDocument:d,height:c="auto",nonce:u}){const p=i("canvas",e),h=D(null),[f,m]=A(null);return z(()=>{const e=h.current,t=f?.ownerDocument.defaultView;if("auto"!==c||!e||!f||!t)return;const n=()=>{e.style.height=`${Math.ceil(f.getBoundingClientRect().height)}px`};n();const o=t.ResizeObserver,r=o?new o(n):null;return r?.observe(f),()=>r?.disconnect()},[f,c]),z(()=>{let e=h.current?.contentDocument;if(!e)return;"CSS1Compat"!==e.compatMode&&(e.open(),e.write("<!DOCTYPE html><html><head></head><body></body></html>"),e.close(),e=h.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),a(e,u),m(t),d?.(e);let n=null;const o=h.current?.ownerDocument;if(l&&o){ie(o,e,u);const t=o.defaultView;t&&"MutationObserver"in t&&(n=new t.MutationObserver(()=>ie(o,e,u)),n.observe(o.head,{childList:!0,subtree:!0,characterData:!0}))}return()=>{n?.disconnect(),t.remove(),m(null),d?.(null)}},[]),/* @__PURE__ */$("iframe",{ref:h,id:n,title:o??p.frame,className:r,style:{border:0,width:"100%",display:"block",..."fill"===c?{height:"100%"}:null,...s},children:f?N(t,f):null})}var se=C(null),le=C(oe),de=[];function ce({parentId:e,slot:t,className:n,style:o,minEmptyHeight:r=128}){const i=J(),a=_(n=>d(n.appState.data,i.config,{parentId:e,slot:t})??de),s=_(t=>"node"===t.selection?.kind&&t.selection.id===e&&e!==l),c=_(n=>"slot"===n.selection?.kind&&n.selection.parentId===e&&n.selection.slot===t),u=O(se),p=["es-zone"];return a.length&&p.push("has-children"),e===l&&p.push("is-root"),(s||c)&&p.push("is-area-selected"),null!==u&&u===e&&e!==l&&p.push("is-hovering-area"),n&&p.push(n),/* @__PURE__ */$("div",{className:p.join(" "),[ne]:`${e}:${t}`,style:{...o,"--min-empty-height":`${r}px`},children:a.map(e=>/* @__PURE__ */$(he,{node:e},e.props.id))})}function ue(e,t,n,o){const r="root"===t?e.root:e.components[t],i={...o};for(const e of w(S(r)))i[e]=function(t={}){/* @__PURE__ */
+return $(ce,{parentId:n,slot:e,...t})};return i}function pe(e){return function({zone:t,...n}){/* @__PURE__ */
+return $(ce,{parentId:e,slot:t,...n})}}function he({node:e}){const t=J().config,n=t.components[e.type],o=e.props.id,r=function(e){const t=D(null);return M(()=>n=>{const o=t.current;o&&o!==n&&(o.removeAttribute(te),o.removeAttribute("data-puck-dnd")),t.current=n,n&&(n.setAttribute(te,e),n.setAttribute("data-puck-dnd",e),n.style.position="relative")},[e])}(o),i=O(le);if(!n?.render)return null;const a=n.render,s=ue(t,e.type,o,{...I(n),...e.props}),l={renderDropZone:pe(o),isEditing:!0,dragRef:n.inline?r:null,metadata:{...i,...n.metadata}};return n.inline?/* @__PURE__ */$(a,{...s,puck:l,editMode:!0}):/* @__PURE__ */$("div",{[te]:o,"data-puck-dnd":o,style:{position:"relative"},children:/* @__PURE__ */$(a,{...s,puck:l,editMode:!0})})}function fe({metadata:e}){const t=_(e=>e.config),n=_(e=>e.appState.data.root).props??{},o=t.root?.render,r=/* @__PURE__ */$(ce,{parentId:l,slot:b}),i=o?/* @__PURE__ */$(o,{id:"puck-root",...ue(t,"root",l,n),puck:{renderDropZone:pe(l),isEditing:!0,dragRef:null,metadata:e??{}},editMode:!0,children:r}):r;/* @__PURE__ */
+return $(le.Provider,{value:e??oe,children:i})}function me({id:e,kind:t,overlay:n}){const o=D(null),[r,i]=A(null);z(()=>{const t=o.current?.ownerDocument,n=t?.defaultView;if(!t||!n||!e)return void i(null);let r=0;const a=()=>{r=0;const a=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(`[${te}="${n.CSS?.escape?n.CSS.escape(e):e}"]`),o.current?.parentElement??null);i(e=>{return(t=e)===(n=a)||t&&n&&t.top===n.top&&t.left===n.left&&t.width===n.width&&t.height===n.height?e:a;var t,n})},s=()=>{r||(r=(n.requestAnimationFrame??(e=>n.setTimeout(e,16)))(a))};a();const l="MutationObserver"in n?new n.MutationObserver(s):null;l?.observe(t.body,{childList:!0,subtree:!0,attributes:!0,characterData:!0});const d="ResizeObserver"in n?new n.ResizeObserver(s):null;return d?.observe(t.documentElement),n.addEventListener("resize",s),()=>{l?.disconnect(),d?.disconnect(),n.removeEventListener("resize",s),r&&(n.cancelAnimationFrame??n.clearTimeout)(r)}},[e]);const a=/* @__PURE__ */$("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,{componentId:e,kind:t,children:a}):a}function ve({frame:e=!0,className:t,style:n,metadata:o,mirrorStyles:r,onDocument:i,height:a,title:s,nonce:l,frameWrapper:d,overlay:c,children:u}){const p=J(),[h,f]=A(void 0),m=_(e=>"node"===e.selection?.kind?e.selection.id:null),[v,y]=A(null),g=/* @__PURE__ */R("div",{className:"es-canvas-content",style:{position:"relative"},onClick:e=>{const t=e.target;t.closest?.("a[href]")&&e.preventDefault();const n=t.closest?.(`[${te}]`);n?p.select(n.getAttribute(te)):t.hasAttribute?.(ne)||p.select(null)},onMouseOver:e=>{const t=e.target.closest?.(`[${te}]`),n=t?.getAttribute(te)??null;n!==v&&y(n)},onMouseLeave:()=>y(null),children:[
+/* @__PURE__ */$(se.Provider,{value:v,children:/* @__PURE__ */$(fe,{metadata:o})}),
+/* @__PURE__ */R("div",{className:"es-canvas-outlines",style:{position:"absolute",top:0,left:0,pointerEvents:"none"},children:[
+/* @__PURE__ */$(me,{id:v&&v!==m?v:null,kind:"hover",overlay:c}),
+/* @__PURE__ */$(me,{id:m,kind:"selected",overlay:c})]}),u]}),k=d?/* @__PURE__ */$(d,{document:h,children:g}):g,b=D(null);/* @__PURE__ */
+return $("div",{className:"es-canvas"+(t?` ${t}`:""),style:n,"data-puck-preview":"",children:e?/* @__PURE__ */$(ae,{mirrorStyles:r,onDocument:e=>{b.current?.(),b.current=e?W(e,p):null,f(e??void 0),i?.(e)},height:a,title:s,nonce:l,children:k}):/* @__PURE__ */$("div",{id:"preview-frame","data-puck-entry":"",children:k})})}function ye(e={}){const t=J(),n=_(e=>e.appState.data);return r({...e,data:n,config:t.config,commit:(e,{select:n})=>t.run({data:e,select:n})})}function ge(){const e=J(),n=_(e=>e.config),o=e.resolveCache,r=_(e=>e.selectedItem),i=_(e=>e.appState.data.root),a=r?r.props.id:"root",l=i.props??{},d=M(()=>r||{type:"root",props:l},[r,l]),c=r?n.components[r.type]:n.root,u=e.getState(),p=r?s(u.appState.data,n,a):null,h=p&&"root"!==p.place.parentId?p.place.parentId:null,f=h?u.getItemById(h)??null:null,{fields:m}=t({id:a,node:d,block:c,parent:f,appState:u.appState}),v=u.getPermissions(r?{item:r}:{root:!0}),y=Z((t,r)=>{(async()=>{const i=e.getState();if("root"!==a){const s=i.getItemById(a),l=i.getSelectorForId(a);if(!s||!l)return;const d={...s,props:{...s.props,[t]:r}},{node:c}=await k(d,n,{cache:o,trigger:"replace"}),u=e.getState().getSelectorForId(a);if(!u)return;return void e.dispatch({type:"replace",destinationZone:u.zone??"root:default-zone",destinationIndex:u.index,data:c})}const s=i.appState.data.root.props??{},{node:l}=await k({type:"root",props:{...s,[t]:r}},n,{cache:o,trigger:"replace"});e.dispatch({type:"replaceRoot",root:{props:l.props,readOnly:l.readOnly},recordHistory:!0})})()},[e,n,o,a]);return{id:a,node:d,fields:m,values:d.props,readOnly:!1===v.edit,onChange:y}}export{ae as CanvasFrame,q as DEFAULT_UI,fe as EditDocument,ve as EditorCanvas,Q as EditorProvider,W as bindUndoKeys,U as createEditor,ee as createUseEditor,B as recordsByDefault,H as reduce,K as uiView,_ as useEditor,J as useEditorApi,ye as useEditorNodeOps,ge as useSelectedFields,L as validSelection};

package/dist/fields/fields.css

@@ -0,0 +1,207 @@
+/*
+ * efficient-easel/fields.css — the Inspector's own controls (blueprint 4.1).
+ *
+ * The rows, the tabs and the groups are `panel.css`'s (SettingsField,
+ * SettingsTabs, SettingsGroup): the panel's rhythm is defined there ONCE
+ * (`--es-row-gap`, `--es-rhythm-*`), so this file adds no spacing between rows
+ * and no spacing between groups. What it adds is what a row HOLDS where Puck
+ * used to put the browser's own: a text box, a number box, a dropdown.
+ *
+ * Every colour is a shell token (`shell.css`), so the dark editor is the same
+ * 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 10px;
+  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);
+}
+.es-fin[readonly],
+.es-fin:disabled { background: var(--es-track-bg); color: var(--es-muted); }
+
+.es-fin--area {
+  height: auto;
+  min-height: 64px;
+  padding: 8px 10px;
+  resize: vertical;
+}
+
+/* ── a number: the box, its unit, − and + ─────────────────────────────────── */
+
+.es-fnum {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+}
+.es-fnum-box { flex: 0 1 96px; }
+.es-fnum-unit { font-size: 12px; color: var(--es-muted); }
+.es-fnum-steps { display: flex; gap: 4px; margin-left: auto; }
+
+.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 ────────────────────────────────── */
+
+.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: 7px 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; }
+
+/* ── the panel body: the tab strip and the rows (Inspector) ───────────────── */
+
+.es-insp { display: flex; flex-direction: column; min-width: 0; }
+
+/* The strip stays in view while the rows scroll under it, on the panel's own
+   ground so a row never shows through. */
+.es-insp-tabs {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: var(--es-panel);
+}
+
+/* A row adds NO spacing: the field inside it carries the panel's rhythm
+   (panel.css). A row that draws nothing takes no space at all, and a row on
+   another tab is out of the layout but still mounted. */
+.es-insp-row { min-width: 0; }
+.es-insp-row:empty,
+.es-insp-row[hidden] { display: none; }
+
+/* ── a list (ListField, 4.2): Layers' own rows, an add button, an open item ── */
+
+.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-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+}
+.es-list-label { display: inline-flex; align-items: center; gap: 6px; 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-add {
+  height: 32px;
+  border: 1px dashed var(--es-btn-border);
+  border-radius: var(--es-field-radius);
+  background: none;
+  color: var(--es-text-secondary);
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+.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; }
+
+/* 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;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 28px;
+  padding: 0 8px 0 6px;
+  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; }
+.es-list-item-actions { display: flex; gap: 8px; margin-top: 8px; }
+.es-fbtn--danger { color: var(--es-danger); }