efficient-easel 10.1.0 → 10.2.0

package/README.md

@@ -453,6 +453,12 @@ import 'efficient-easel/copy.css';
 An empty value (`''`, or `undefined` for Italic) follows the style. Pressing
 the answer that is already pressed goes back to the style.
 
+Since 10.2.0: `readOnly` shows every row disabled and writes nothing;
+`keptHint` is one line under the kept box; and with no `font`, `italic` is a
+row of its own named Italic, where the Font row stands (a phone view, which has
+no font of its own). Capitalization's Capitalized is also a text style's
+`letterCase: 'capitalize'` in `efficient-easel/text-styles`.
+
 ## Copy style, paste style — one rule for both editors
 
 `efficient-easel/style-clipboard` (added in 0.50.0) is the right-click menu's

package/dist/canvas-typing-CJodefPO.d.ts

@@ -0,0 +1,478 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { MarkStyle, MarkupTool, WrapResult, InlineRule } from './markup/index.js';
+import { C as CopyWords, a as CopyAlign } from './words-dsex49Jh.js';
+import { TextToolbarCase, TextToolbarMark } from 'efficient-shell/ui';
+
+type CellWords = NonNullable<CopyWords['cells']>;
+interface CopyCell {
+    /** Which cell this is — a stable key for the grid. */
+    key: string;
+    /** The cell's name, from the copy words (the four the design draws)… */
+    nameKey?: Exclude<keyof CellWords, 'tip'>;
+    /** …or the host's own (a cell the package does not know). */
+    name?: string;
+    icon?: ReactNode;
+    unit?: string;
+    /** What an arrow or ↑↓ moves by, in SHOWN units. */
+    step?: number;
+    /** What Shift moves by. Default ten steps. */
+    shiftStep?: number;
+    /** Bounds, in SHOWN units. */
+    min?: number;
+    max?: number;
+    /** Shown = stored × scale (100 for a multiple shown in %). Default 1. */
+    scale?: number;
+    /** The STORED value, or `undefined` while the cell follows the style. */
+    value: number | undefined;
+    /** The style's STORED value, shown grey while the cell is empty. */
+    styleValue?: number;
+    /** A STORED value, or `undefined` when the cell is emptied. */
+    onChange: (value: number | undefined) => void;
+}
+/** A cell's preset: everything but its value and its write. */
+type CopyCellPreset = Omit<CopyCell, 'value' | 'styleValue' | 'onChange'>;
+/** The four cells the final design draws, with its steps and ranges
+ *  (the campaign page's "三个框的规则" table, read 2026-10-06). */
+declare const COPY_CELLS: {
+    fontSize: CopyCellPreset;
+    lineHeight: CopyCellPreset;
+    letterSpacing: CopyCellPreset;
+    paragraphSpacing: CopyCellPreset;
+};
+declare function CopyCells({ cells, words, readOnly }: {
+    cells: readonly CopyCell[];
+    words?: CellWords;
+    readOnly?: boolean;
+}): react.JSX.Element;
+
+interface CopyThemeColor {
+    name: string;
+    label: string;
+    value: string;
+}
+declare function ColorWindow({ colors, current, words, onPick, }: {
+    colors: readonly CopyThemeColor[];
+    /** The colour the selection wears — a theme name or a hex — or null. */
+    current: string | null;
+    words: NonNullable<CopyWords['colors']>;
+    /** A theme name, a lowercase `#rrggbb`, or null to take the colour off. */
+    onPick: (color: string | null) => void;
+}): react.JSX.Element;
+
+/** `'b'` → `Meta+B`, `'shift+x'` → `Meta+Shift+X` — the ARIA spelling of a
+ *  shortcut. Meta is what the tooltips promise (⌘); Ctrl works too. */
+declare function ariaShortcut(shortcut: string | undefined): string | undefined;
+interface MarkBarProps {
+    /**
+     * Which buttons to show.
+     *
+     * TWO FORMS, and the second is not a convenience — it is the only way a
+     * product with marks of its OWN can use this bar at all.
+     *
+     *   `MarkStyle[]`   resolved against the shared grammar's `MARKUP_TOOLS`, in
+     *                   that order. What the campaign designer passes.
+     *   `MarkupTool[]`  used verbatim. What `efficient-storefront` passes.
+     *
+     * ⚠️ WHY VERBATIM DESCRIPTORS HAD TO EXIST. The storefront offered SEVEN
+     * marks: the grammar's four, plus its three word styles (`@@`, `++`, `^^`),
+     * which then lived only in the shop because the grammar was
+     * `efficient-shell/markup`. Resolving through `markupTools` can only ever
+     * return marks the grammar knows, so it silently DROPPED all three — the bar
+     * rendered four buttons where the panel had seven, and nothing failed to
+     * compile. Since 2026-09-28 the grammar is ours and holds Quiet (`^^`) and
+     * reads `@@` / `++` as Emphasis and Strong, but a host may still hand in
+     * marks of its own.
+     *
+     * So a host that has its own marks builds its own descriptors (the shop
+     * already did: `shopMarkupTools()`) and hands them over whole. The bar's job
+     * is the ROW — the buttons, the focus guard, the naming, the group — and that
+     * job does not depend on who defined the mark.
+     */
+    tools: readonly MarkStyle[] | readonly MarkupTool[];
+    onApply: (style: MarkStyle) => void;
+    disabled?: boolean;
+    /** Buttons that write no mark, after a divider — see `CopyBoxProps.actions`. */
+    actions?: ReactNode;
+    /** The alignment strip, already built by the control. */
+    align?: ReactNode;
+    /**
+     * WHAT A BUTTON IS DRAWN AS, per style. Default: the grammar's own letter —
+     * `B`, `I`, `S`, `◆` — which is what the campaign designer has always shown.
+     *
+     * ⚠️ THIS IS NOT A THEME KNOB, AND IT IS NOT OPTIONAL POLISH. This package
+     * already says that WHICH buttons and WHAT they write are the grammar's, while
+     * how they LOOK is the host's, "because this bar has to belong to the
+     * storefront inspector's chrome and the campaign designer's bar has to belong
+     * to the portal's". Colour was delegated by tokens on day one; the DRAWING was
+     * not, and a letter is a drawing. `efficient-storefront` renders each mark as a 14px
+     * stroked SVG at the weight of its other inspector glyphs, on the stated
+     * ground that the row should read "as part of the field rather than as
+     * pasted-in icons" — so without this it could not adopt the bar without losing
+     * that, which is a regression dressed as a refactor.
+     *
+     * The set now HAS a glyph for every mark (0.94.0: bold, italic, strike,
+     * emphasis, quiet, clear-marks — the owner's call, made 2026-10-02), and they
+     * are the default. This map stays so a host can still draw its own.
+     *
+     * A style the map does not name falls back to the icon set's glyph for it
+     * (`SET_GLYPH`, 0.94.0, when the owner added the mark glyphs to the set) and
+     * then to the letter, so a host may override one button and leave the rest.
+     */
+    glyphs?: Partial<Record<MarkStyle, ReactNode>>;
+    /**
+     * What the group is CALLED. Defaults to "Formatting" (`EaselStrings.copy.formatting`).
+     *
+     * A bar bound to one box needs nothing more. A bar SHARED by several rows has
+     * to say which row it is aimed at, because the visible cue — the marked row —
+     * is not readable. `efficient-storefront` has that case today.
+     */
+    ariaLabel?: string;
+    /**
+     * The marks the selection already wears — a button drawn pressed is one
+     * whose press takes the mark OFF (`markedAt`, the same test `applyMark`
+     * unwraps by), so the two cannot disagree. A style not named is not pressed;
+     * with no map at all no button says either way (`aria-pressed` is left off),
+     * which is what every host that does not track the selection still gets.
+     */
+    pressed?: Partial<Record<MarkStyle, boolean>>;
+    /** The style whose own window is open — the link button while its "Link
+     *  to" window is showing. Drawn pressed, and named as expanded. */
+    open?: MarkStyle | null;
+}
+declare function MarkBar({ tools, onApply, disabled, actions, align, glyphs, ariaLabel, pressed, open, }: MarkBarProps): react.JSX.Element | null;
+
+/**
+ * Just enough of a text control to read a selection off it. Narrowed to these
+ * two fields so a caller may hand in a plain object in a test.
+ *
+ * A `<textarea>` OR an `<input>` (blueprint 4.9). An input's selection is
+ * `number | null` where a textarea's is `number`, so the type had to be the
+ * wider of the two: typed to the textarea, every one-line row in the website
+ * editor needed a cast or a copy of this file, and the shop kept a copy.
+ */
+type SelectionSource = {
+    readonly selectionStart: number | null;
+    readonly selectionEnd: number | null;
+} | null;
+/**
+ * How a mark is written. Defaults to the shared grammar's own `applyMark`.
+ *
+ * INJECTED RATHER THAN ASSUMED, because the storefront legitimately writes marks
+ * the shell's grammar does not know: its three word styles (`@@`, `++`, `^^`)
+ * go through `applyShopMark`, which delegates here for everything else. Making
+ * the writer a parameter is what lets one control serve both products without
+ * this package learning a vocabulary that belongs to one of them.
+ */
+type MarkWriter = (text: string, start: number, end: number, style: MarkStyle) => WrapResult;
+/** Apply a style to whatever the field has selected. */
+declare function markSelection(value: string, style: MarkStyle, el: SelectionSource, write?: MarkWriter): WrapResult;
+/**
+ * Put a literal string where the caret is.
+ *
+ * The caret lands AFTER the inserted text and selects nothing, because the thing
+ * inserted is finished — a merge tag is not a placeholder to type over, and
+ * leaving it selected invites the next keystroke to delete it.
+ */
+declare function insertSelection(value: string, text: string, el: SelectionSource): WrapResult;
+
+/** A letter case the toolbar sets on the host's field: the shell toolbar's. */
+type CopyCase = TextToolbarCase;
+/** The marks row 1 of the toolbar carries: the shell toolbar's. */
+type ToolbarMark = TextToolbarMark;
+/**
+ * A handle on the box's textarea.
+ *
+ * DECLARED STRUCTURALLY rather than as React's `RefObject`, and the reason is
+ * the package's `react >=18` peer range. React 18 types read `RefObject<T>` as
+ * `{ readonly current: T | null }`, React 19's `useRef<T>(null)` produces
+ * `RefObject<T | null>`, and the interface is covariant in `T` — so the two
+ * spellings of the same object do not assign to each other, and a package that
+ * has to compile against both cannot name either one. The shape is the whole
+ * contract; naming it here costs one line and no version branch.
+ */
+type TextAreaHandle = {
+    current: HTMLTextAreaElement | null;
+};
+/**
+ * A handle on ANY text control the caret machinery can drive — a `<textarea>`
+ * or a one-line `<input>` (blueprint 4.9). `useCaretEdit` takes this, so a host
+ * with its own input rows (the website editor's list lines) uses the same
+ * twelve lines instead of a copy of them. A {@link TextAreaHandle} is one.
+ */
+type TextBoxHandle = {
+    current: HTMLInputElement | HTMLTextAreaElement | null;
+};
+/**
+ * What a host may put UNDER the box, and what it needs to draw it.
+ *
+ * A render prop rather than a plain node, for one reason that is not style: the
+ * campaign's merge-tag chips have to insert at the caret, and only this control
+ * knows where the caret is. Handing the host `insert` is what lets the chips
+ * live in the app — where the tag list, the audience call and the product's
+ * vocabulary belong — while the caret machinery stays here, written once.
+ *
+ * `focused` is passed for the same reason the portal tracked it locally: the row
+ * appears while the merchant is typing in THIS box and not in its neighbour.
+ */
+interface CopyBoxFooter {
+    focused: boolean;
+    /** Put a literal string where the caret is, replacing any selection. */
+    insert: (text: string) => void;
+}
+/**
+ * What a host needs to draw its OWN control in row 1's 9th cell of the final
+ * toolbar ({@link CopyBoxProps.lastTool}) — the campaign designer's Insert
+ * (merge tags), owner ruling 2026-10-07. The website editor passes nothing.
+ *
+ * `className` makes it a cell that looks like its neighbours; `keepCaret` on
+ * its mousedown keeps the caret and the selection in the box; `insert` writes
+ * at the caret, as {@link CopyBoxFooter.insert} does.
+ */
+interface CopyBoxLastTool {
+    className: string;
+    /** The box is read-only. */
+    disabled: boolean;
+    /** Words are selected (not just a caret). */
+    selected: boolean;
+    keepCaret: (e: {
+        preventDefault(): void;
+    }) => void;
+    /** Put a literal string where the caret is, replacing any selection. */
+    insert: (text: string) => void;
+}
+/**
+ * The alignment strip, when the host has an alignment to offer.
+ *
+ * GENERIC IN THE DIRECTIONS IT ALLOWS, so `onChange` RECEIVES only what the
+ * host said it could honour. Before this it received the whole union, and a
+ * host allowing three directions had to narrow a `justify` it had just
+ * declared impossible before storing. Raised by the strip's first consumer,
+ * which did write that narrowing; the next one might not.
+ *
+ * `A` is inferred from `allow`, so nothing has to be spelled at the call site.
+ *
+ * ⚠️ IT DOES NOT FORBID A WIDER HANDLER, and cannot: a function taking the
+ * whole `CopyAlign` is assignable where one taking three is wanted, because
+ * parameters are contravariant — and that direction is SAFE, since only the
+ * three can ever arrive. What this buys is that the narrow handler now
+ * type-checks without a cast, which is what makes writing the safe one the
+ * path of least resistance.
+ */
+interface CopyBoxAlign<A extends CopyAlign = CopyAlign> {
+    value: A | '';
+    onChange: (next: A) => void;
+    /**
+     * Which directions this host can honour. Required and with no default: a
+     * renderer that cannot justify must not be given a Justify button because a
+     * default handed it one, which is the shape of mistake this whole card exists
+     * to stop. It is also what `A` above is inferred from.
+     */
+    allow: readonly A[];
+    /** The strip exists but cannot apply right now. Distinct from the whole
+     *  control being read-only. */
+    disabled?: boolean;
+}
+interface CopyBoxProps {
+    /** The authored string, delimiters and all. The single source of truth. */
+    value: string;
+    /** Every keystroke, and every button press. */
+    onChange: (value: string) => void;
+    /** The edit is finished and may be written: on blur, and on Enter when
+     *  {@link multiline} is false. */
+    onCommit?: (value: string) => void;
+    /** Escape. The argument is the value the box was given when it gained focus;
+     *  the HOST puts it back, because the host owns the string. */
+    onCancel?: (restored: string) => void;
+    /** What Enter means — NOT how the text wraps. Both modes soft-wrap. */
+    multiline?: boolean;
+    placeholder?: string;
+    /** Accessible name for the box. */
+    ariaLabel?: string;
+    className?: string;
+    /** Nothing may be typed or pressed. */
+    readOnly?: boolean;
+    /**
+     * The grammar's rule set — `CAMPAIGN_MARKUP` in the designer,
+     * `STOREFRONT_MARKUP` in the shop, both from `efficient-easel/markup`. It
+     * decides what the LAYER paints; {@link tools} decides what the BAR offers,
+     * and a host that lets those two disagree gets a button whose mark draws as
+     * plain text.
+     */
+    rules?: readonly InlineRule[];
+    /**
+     * Which mark buttons to show — styles resolved against the shared grammar, or
+     * the host's own descriptors used verbatim. See `MarkBarProps.tools`. Empty
+     * draws no bar.
+     */
+    tools?: MarkBarProps['tools'];
+    /**
+     * How a mark is written. Defaults to the shared grammar's `applyMark`; the
+     * storefront passes its own so its three word styles reach the same bar.
+     */
+    writeMark?: MarkWriter;
+    /**
+     * Buttons that are NOT marks, drawn after a divider at the end of the bar.
+     *
+     * The storefront's "Clear formatting" is the one that exists: it writes no
+     * mark at all, so it is not in the grammar's tool list and must not be added
+     * to it. Drawing it here keeps `MARKUP_TOOLS` meaning "what a mark MEANS".
+     */
+    actions?: ReactNode;
+    /** The alignment strip. Omitted = no strip. */
+    align?: CopyBoxAlign<CopyAlign>;
+    /** What each mark button is DRAWN as — see `MarkBarProps.glyphs`. Default is
+     *  the grammar's own letter. */
+    glyphs?: MarkBarProps['glyphs'];
+    /** What the formatting group is CALLED — see `MarkBarProps.ariaLabel`. */
+    barLabel?: string;
+    /** What goes under the box — see {@link CopyBoxFooter}. */
+    renderFooter?: (ctx: CopyBoxFooter) => ReactNode;
+    /**
+     * When the bar is drawn. `'always'` (the default) keeps it over the box at
+     * rest. `'focus'` draws it only while this box is being typed in — the text
+     * box design for 4.9: a column of text settings at rest is a column of
+     * words, not a column of toolbars.
+     */
+    barShows?: 'always' | 'focus';
+    /**
+     * Show the EFFECT, not the marks (0.95.0, rulings B + C — the default). A
+     * many-line box gets a "Show marks" switch under it that flips to the raw
+     * text with its marks and back; a one-line box is always the effect.
+     * `false` keeps the 0.94 box (the raw text, painted) with no switch.
+     *
+     * ⚠️ In the rich view there is no textarea, so {@link inputRef} holds null.
+     * Insert at the caret through `renderFooter`'s `insert`, which works in both.
+     */
+    richText?: boolean;
+    /** A many-line box opens with its marks shown. Default false. */
+    defaultShowMarks?: boolean;
+    /**
+     * Which toolbar (E5b). `'final'` — the default — is the design made final
+     * on 2026-10-06: two rows on one 9-column grid, B · I · U · S · Color ·
+     * Link · Superscript · Subscript · the host's {@link lastTool} (Undo until
+     * 2026-10-07) over Left · Center · Right · Justify
+     * · Bulleted · Numbered · Aa · AA · aa, with the number {@link cells}
+     * between it and the box. `'classic'` is the bar before it (`MarkBar` and
+     * the alignment strip), for a host not moved over yet.
+     */
+    toolbar?: 'final' | 'classic';
+    /**
+     * The theme colours the colour window offers (final toolbar): the NAME
+     * saved in `[words]{color=name}`, what it is called, and its value. The box
+     * paints a coloured word with the value (`--es-color-<name>`). The window
+     * also offers Any color, saved as a hex (`[words]{color=#rrggbb}`). No colours:
+     * no colour button, and no blank where it was (Lewis 2026-10-13).
+     */
+    colors?: readonly CopyThemeColor[];
+    /** The number cells between the toolbar and the box (final toolbar), each
+     *  the host's value — see `COPY_CELLS`. None: no cells. */
+    cells?: readonly CopyCell[];
+    /**
+     * The host's letter-case field, set by Aa · AA · aa (final toolbar). The
+     * lit one pressed again writes `''`: no case of its own, the style decides.
+     * Left out: no case buttons, and no blanks where they were (Lewis
+     * 2026-10-13). A row with no tool at all is not drawn.
+     */
+    letterCase?: {
+        value: CopyCase | '';
+        onChange: (next: CopyCase | '') => void;
+        disabled?: boolean;
+    };
+    /**
+     * Row 1's 9th cell of the final toolbar, drawn by the host (owner ruling
+     * 2026-10-07: Undo left that cell). Return one control; it is placed in the
+     * cell as given; one that draws nothing (`null`) leaves no blank. Left
+     * out, row 1 is eight buttons spread over the row. See
+     * {@link CopyBoxLastTool}.
+     */
+    lastTool?: (slot: CopyBoxLastTool) => ReactNode;
+    /** A handle on the textarea, for a host that needs one — and the SAME object
+     *  the control uses, so there is never a second ref to reconcile. A plain prop
+     *  rather than `ref`, for the reason `GoldLayer.layerRef` gives. */
+    inputRef?: TextAreaHandle;
+}
+
+interface TextMap {
+    /** The words as drawn: text in order, a `<br>` or a new block line as `\n`. */
+    text: string;
+    /** The visible offset of a DOM point inside the root. */
+    at: (node: Node, offset: number) => number;
+    /** The DOM point of a visible offset. */
+    dom: (v: number) => [Node, number];
+}
+/**
+ * Read the words a renderer drew, whatever its markup: text nodes in order;
+ * a `<br>` is a line break, and so is the start of a block-level child after
+ * some words (a line the renderer drew as its own block). An element matching
+ * `skip` is drawn among the words but is not words (the email's paragraph
+ * gap): it adds nothing, and a caret inside it reads as the place it stands.
+ */
+declare function textMap(root: HTMLElement, skip?: string): TextMap;
+/** Why typing ended. */
+type CanvasTypingEnd = 'escape' | 'enter' | 'blur' | 'outside' | 'stop';
+interface CanvasTypingOptions {
+    /** The element the page drew the words in. Read again after every redraw:
+     *  a host that draws them afresh may hand back a new one. */
+    element: () => HTMLElement | null;
+    /** The saved string. */
+    value: string;
+    rules: readonly InlineRule[];
+    /** The field has lines: Shift+Enter makes one. */
+    multiline: boolean;
+    /** A selector for elements drawn among the words that are not words (a
+     *  paragraph's gap): {@link textMap} leaves them out. */
+    skip?: string;
+    /** The visible selection to start with. */
+    caret: [number, number];
+    /** The host's ONE writer — the same the panel's text box writes through. */
+    write: (next: string) => void;
+    /** Typing ended; the words are what was last written. */
+    end: (why: CanvasTypingEnd) => void;
+    /** The browser wrote into the words (a composition): draw them afresh. */
+    remount?: () => void;
+    /** What the toolbar shows may have changed (the selection moved, a press, a
+     *  write): a host draws its buttons again from `pressed()`. */
+    onSelect?: () => void;
+    now?: () => number;
+}
+interface CanvasTypingSession {
+    /** The string as the session last wrote or was told. */
+    readonly value: string;
+    /** The host wrote the string from elsewhere (the panel's text box). */
+    update: (next: string) => void;
+    /** End typing. Once: a second call does nothing. */
+    stop: (why?: CanvasTypingEnd) => void;
+    /** What the selection wears, for the toolbar's pressed buttons (a pending
+     *  press included), the list its lines are in, and whether words (not just
+     *  a caret) are selected. */
+    pressed: () => {
+        marks: Partial<Record<string, boolean>>;
+        list: 'bullet' | 'number' | null;
+        selected: boolean;
+    };
+    /** A mark button pressed (B, I, U, S, superscript, subscript): on the
+     *  selected words, or for the words typed next — `markPress`, as the panel
+     *  box presses. */
+    press: (style: MarkStyle) => void;
+    /** A list button pressed: the selection's lines become that list, or stop being one. */
+    list: (kind: 'bullet' | 'number') => void;
+    /**
+     * Put a literal string where the caret is, replacing the selected words —
+     * the host tool's write (the email's merge-tag Insert), as `CopyBox`'s
+     * `lastTool` slot does in the panel's box. One edit step; the caret lands
+     * after the words; typing goes on.
+     */
+    insert: (text: string) => void;
+    /**
+     * A host tool on the toolbar is taking focus (its menu opens): the words
+     * losing focus to it is not leaving them. Held until the words have focus
+     * again or the tool writes (`insert`); a click outside the words still ends
+     * typing (the canvas's `stop('outside')`).
+     */
+    hold: () => void;
+}
+/** Start typing in the words `element()` drew, or `null` where they are not the string's. */
+declare function startCanvasTyping(o: CanvasTypingOptions): CanvasTypingSession | null;
+
+export { type CopyBoxLastTool as C, MarkBar as M, type SelectionSource as S, type TextBoxHandle as T, type CanvasTypingEnd as a, type CopyBoxProps as b, type CopyCell as c, COPY_CELLS as d, type CanvasTypingOptions as e, type CanvasTypingSession as f, ColorWindow as g, type CopyBoxAlign as h, type CopyBoxFooter as i, type CopyCase as j, type CopyCellPreset as k, CopyCells as l, type CopyThemeColor as m, type MarkBarProps as n, type MarkWriter as o, type TextAreaHandle as p, type TextMap as q, type ToolbarMark as r, ariaShortcut as s, insertSelection as t, markSelection as u, startCanvasTyping as v, textMap as w };

package/dist/{chunk-CQGCGRDI.js → chunk-74ZFATLG.js}

@@ -1 +1 @@
-import{useEaselHost as n}from"./chunk-U3JP4VGF.js";import{useEaselApi as e,bindUndoKeys as t}from"./chunk-ACUQNEHP.js";import{useState as r,useEffect as o,useRef as u}from"react";function c(e){const t=n(),[u,c]=r(null);return o(()=>c(e.current),[e]),t.ownsDocument?"undefined"==typeof document?null:document:u}function i(r,u){const i=n(),s=e(),f=c(r);o(()=>{if(!i.ownsDocument&&f)return t(f,s,{leaveTyping:!0})},[i,s,f]);const m=u?.document??null;o(()=>{if(!i.ownsDocument&&m)return t(m,s,{leaveTyping:!0})},[i,s,m])}function s(n){return n.ownsDocument?{}:{tabIndex:-1}}function f(n){return!n.altKey&&!n.shiftKey&&(!(!n.metaKey&&!n.ctrlKey)&&("s"===n.key||"S"===n.key||"KeyS"===n.code))}function m(n,e,t){const r=c(n),i=u(t);o(()=>{i.current=t}),o(()=>{if(!r)return;const n=n=>{f(n)&&(n.preventDefault(),i.current())};return r.addEventListener("keydown",n),()=>r.removeEventListener("keydown",n)},[r]);const s=e?.document??null;o(()=>{if(!s)return;const n=n=>{f(n)&&(n.preventDefault(),i.current())};return s.addEventListener("keydown",n),()=>s.removeEventListener("keydown",n)},[s])}export{s as editorRootFocus,f as isSaveShortcut,c as useEaselKeyTarget,m as useEaselSaveKey,i as useEaselUndoKeys};
+import{useEaselHost as n}from"./chunk-U3JP4VGF.js";import{useEaselApi as e,bindUndoKeys as t}from"./chunk-M32O2WRM.js";import{useState as r,useEffect as o,useRef as u}from"react";function c(e){const t=n(),[u,c]=r(null);return o(()=>c(e.current),[e]),t.ownsDocument?"undefined"==typeof document?null:document:u}function i(r,u){const i=n(),s=e(),f=c(r);o(()=>{if(!i.ownsDocument&&f)return t(f,s,{leaveTyping:!0})},[i,s,f]);const m=u?.document??null;o(()=>{if(!i.ownsDocument&&m)return t(m,s,{leaveTyping:!0})},[i,s,m])}function s(n){return n.ownsDocument?{}:{tabIndex:-1}}function f(n){return!n.altKey&&!n.shiftKey&&(!(!n.metaKey&&!n.ctrlKey)&&("s"===n.key||"S"===n.key||"KeyS"===n.code))}function m(n,e,t){const r=c(n),i=u(t);o(()=>{i.current=t}),o(()=>{if(!r)return;const n=n=>{f(n)&&(n.preventDefault(),i.current())};return r.addEventListener("keydown",n),()=>r.removeEventListener("keydown",n)},[r]);const s=e?.document??null;o(()=>{if(!s)return;const n=n=>{f(n)&&(n.preventDefault(),i.current())};return s.addEventListener("keydown",n),()=>s.removeEventListener("keydown",n)},[s])}export{s as editorRootFocus,f as isSaveShortcut,c as useEaselKeyTarget,m as useEaselSaveKey,i as useEaselUndoKeys};

package/dist/{chunk-76YU5ZS7.js → chunk-7O6MDCDU.js}

@@ -1,5 +1,5 @@
-import{slotFieldsOf as n}from"./chunk-PLVEGYK6.js";import{usePickFollowsSelection as e}from"./chunk-R6WTQWAC.js";import{EaselCanvas as t,useSelectedFields as r}from"./chunk-ACUQNEHP.js";import{Inspector as i}from"./chunk-26GHWMNN.js";import{createContext as o,useContext as u}from"react";import{DesktopIcon as l}from"efficient-shell/icons/efficient";import{jsx as s}from"react/jsx-runtime";var c={kind:"puck"};function f(n,e){const t=n,r=e,i=Object.keys(t);return i.length===Object.keys(r).length&&i.every(n=>Object.is(t[n],r[n]))}function a(n){const e=n;return"string"==typeof e.nodeId&&"string"==typeof e.slot}function d(e,t,r){const i=e.slotsOf?.(r);return i||n(t,r.type).map(n=>({slot:n,label:n,rung:!1}))}function p(n,e){return n.isFirst?n.isFirst(e):e.type===n.first}function m(n,e){return n.isLast?n.isLast(e):e.type===n.last}var k={},h={},v=()=>k,g=()=>"",y=()=>null,b=()=>{},O={isLockedBlock:()=>!1,duplicateBlocked:()=>null,nestDepth:()=>0,newSectionNode:()=>null,canAddTo:()=>null,blockIsOffered:()=>!0},j={labelAtLevel:(n,e,t)=>t,descriptions:{},categoryLabel:()=>{},firstSection:null,blockRowName:(n,e)=>e(n.type),plainText:n=>n,Icon:()=>null,Thumbnail:()=>null,useProducts:()=>null},w={options:[{id:"desktop",label:"Desktop",icon:/* @__PURE__ */s(l,{})}],initial:"desktop",fluid:"desktop",widths:{desktop:2e3}},L={read:()=>"sections",write:()=>{},forSelection:(n,e)=>n?"sections":e},N={first:null,last:null,firstGroup:null,lastGroup:null,isSectionGroup:()=>!1,sectionGroupZone:()=>"",panelOf:()=>null};function C(){/* @__PURE__ */
-return s(t,{height:"fill"})}function P(){const{id:n,fields:e,values:t,readOnly:o,onChange:u}=r();/* @__PURE__ */
-return s("div",{className:"es-sidepanel es-sidepanel--right",children:/* @__PURE__ */s(i,{fields:e,values:t,onChange:u,readOnly:o,idPrefix:n})})}var S=o({});function G({parts:n,children:e}){/* @__PURE__ */
-return s(S.Provider,{value:n,children:e})}function D(){return u(S)}function x(){return(D().useOwnerName??g)()}function A(){return(D().useDocumentLabel??y)()}function B(n,e,t,r){return(D().useBridges??v)(n,e,t,r)}function I(n){return(D().useStandaloneBridges??v)(n)}function T(n,e){(D().useDocumentPass??b)(n,e)}function F(){return D().blockRules??O}function H(){return D().blockLook??j}function R(){return D().devices??w}function W(){return D().leftView??L}function E(){return D().pinned??N}function K(){return D().saveSwitch??!0}function Q(n){e(!0===D().pickFollowsSelection,n)}function V(){return D().add??h}function M(){return D().storageNamespace||void 0}function U(){return D().styleClipboard??null}function Y(){return D().nodeKeys??!0}function Z(){return D().notify??null}function q(){return D().Canvas??C}function z(){return D().CanvasHead??null}function J(){return D().canvasDrag??null}var X=o(null);function $({target:n,children:e}){/* @__PURE__ */
-return s(X.Provider,{value:n,children:e})}function _(){return u(X)}function nn(){return D().Inspector??P}export{c as SELECTION_MODE,$ as ScreenCanvasTargetProvider,G as ScreenPartsProvider,p as isPinnedFirst,m as isPinnedLast,a as isSlotMode,f as sameInspectorMode,d as screenSlotsOf,V as useScreenAdd,H as useScreenBlockLook,F as useScreenBlockRules,B as useScreenBridges,J as useScreenCanvasDrag,q as useScreenCanvasFrame,z as useScreenCanvasHead,_ as useScreenCanvasTarget,R as useScreenDevices,A as useScreenDocumentLabel,T as useScreenDocumentPass,nn as useScreenInspectorPanel,W as useScreenLeftView,Y as useScreenNodeKeys,Z as useScreenNotify,x as useScreenOwnerName,D as useScreenParts,Q as useScreenPickFollowsSelection,E as useScreenPinned,K as useScreenSaveSwitch,M as useScreenStorageNamespace,U as useScreenStyleClipboard,I as useStandaloneScreenBridges};
+import{slotFieldsOf as n}from"./chunk-PLVEGYK6.js";import{usePickFollowsSelection as e}from"./chunk-R6WTQWAC.js";import{EaselCanvas as t,useSelectedFields as r}from"./chunk-M32O2WRM.js";import{Inspector as i}from"./chunk-26GHWMNN.js";import{createContext as o,useContext as u}from"react";import{DesktopIcon as l}from"efficient-shell/icons/efficient";import{jsx as s}from"react/jsx-runtime";var c={kind:"puck"};function f(n,e){const t=n,r=e,i=Object.keys(t);return i.length===Object.keys(r).length&&i.every(n=>Object.is(t[n],r[n]))}function a(n){const e=n;return"string"==typeof e.nodeId&&"string"==typeof e.slot}function d(e,t,r){const i=e.slotsOf?.(r);return i||n(t,r.type).map(n=>({slot:n,label:n,rung:!1}))}function p(n,e){return n.isFirst?n.isFirst(e):e.type===n.first}function m(n,e){return n.isLast?n.isLast(e):e.type===n.last}var k={},h={},v=()=>k,g=()=>"",y=()=>null,b=()=>{},O={isLockedBlock:()=>!1,duplicateBlocked:()=>null,nestDepth:()=>0,newSectionNode:()=>null,canAddTo:()=>null,blockIsOffered:()=>!0},j={labelAtLevel:(n,e,t)=>t,descriptions:{},categoryLabel:()=>{},firstSection:null,blockRowName:(n,e)=>e(n.type),plainText:n=>n,Icon:()=>null,Thumbnail:()=>null,useProducts:()=>null},w={options:[{id:"desktop",label:"Desktop",icon:/* @__PURE__ */s(l,{})}],initial:"desktop",fluid:"desktop",widths:{desktop:2e3}},L={read:()=>"sections",write:()=>{},forSelection:(n,e)=>n?"sections":e},N={first:null,last:null,firstGroup:null,lastGroup:null,isSectionGroup:()=>!1,sectionGroupZone:()=>"",panelOf:()=>null};function S(){/* @__PURE__ */
+return s(t,{height:"fill"})}function C(){const{id:n,fields:e,values:t,readOnly:o,onChange:u}=r();/* @__PURE__ */
+return s("div",{className:"es-sidepanel es-sidepanel--right",children:/* @__PURE__ */s(i,{fields:e,values:t,onChange:u,readOnly:o,idPrefix:n})})}var G=o({});function P({parts:n,children:e}){/* @__PURE__ */
+return s(G.Provider,{value:n,children:e})}function D(){return u(G)}function x(){return(D().useOwnerName??g)()}function B(){return(D().useDocumentLabel??y)()}function I(n,e,t,r){return(D().useBridges??v)(n,e,t,r)}function R(n){return(D().useStandaloneBridges??v)(n)}function T(n,e){(D().useDocumentPass??b)(n,e)}function W(){return D().blockRules??O}function A(){return D().blockLook??j}function F(){return D().devices??w}function M(){return D().leftView??L}function H(){return D().pinned??N}function K(){return D().saveSwitch??!0}function V(n){e(!0===D().pickFollowsSelection,n)}function E(){return D().add??h}function Q(){return D().storageNamespace||void 0}function Y(){return D().styleClipboard??null}function Z(){return D().nodeKeys??!0}function q(){return D().notify??null}function z(){return D().Canvas??S}function J(){return D().CanvasHead??null}function U(){return D().canvasDrag??null}var X=o(null);function $({target:n,children:e}){/* @__PURE__ */
+return s(X.Provider,{value:n,children:e})}function _(){return u(X)}function nn(){return D().Inspector??C}export{c as SELECTION_MODE,$ as ScreenCanvasTargetProvider,P as ScreenPartsProvider,p as isPinnedFirst,m as isPinnedLast,a as isSlotMode,f as sameInspectorMode,d as screenSlotsOf,E as useScreenAdd,A as useScreenBlockLook,W as useScreenBlockRules,I as useScreenBridges,U as useScreenCanvasDrag,z as useScreenCanvasFrame,J as useScreenCanvasHead,_ as useScreenCanvasTarget,F as useScreenDevices,B as useScreenDocumentLabel,T as useScreenDocumentPass,nn as useScreenInspectorPanel,M as useScreenLeftView,Z as useScreenNodeKeys,q as useScreenNotify,x as useScreenOwnerName,D as useScreenParts,V as useScreenPickFollowsSelection,H as useScreenPinned,K as useScreenSaveSwitch,Q as useScreenStorageNamespace,Y as useScreenStyleClipboard,R as useStandaloneScreenBridges};

package/dist/{chunk-YHJDAJAD.js → chunk-A5OEGP7B.js}

@@ -1,7 +1,7 @@
-import{clientOnly as r}from"./chunk-GXQCZJOP.js";import{ScreenStoreProvider as n}from"./chunk-M3MCCGPN.js";import{ScreenChrome as e}from"./chunk-ZRNSJGUW.js";import{ScreenDocumentProvider as i,useScreenDocument as a}from"./chunk-THZ46DC5.js";import{DEFAULT_SCREEN_WORDS as o}from"./chunk-JTUUIVBZ.js";import{documentPermissions as s}from"./chunk-THWO5YVZ.js";import{useWords as c}from"./chunk-MFIRYGHW.js";import{useMemo as t,useState as d,useRef as l,useEffect as m,useCallback as g}from"react";import{Dialog as h,Button as f}from"efficient-shell/ui";import{jsx as u,jsxs as p,Fragment as v}from"react/jsx-runtime";var C=r(n),k=r(e);function N({onCancel:r,onDiscard:n,onSave:e}){const i=c("screen",o).leave,[a,s]=d(!1),t=l(!0);m(()=>(t.current=!0,()=>{t.current=!1}),[]);const C=g(async()=>{s(!0);try{await e()}finally{t.current&&s(!1)}},[e]);/* @__PURE__ */
+import{clientOnly as r}from"./chunk-GXQCZJOP.js";import{ScreenStoreProvider as n}from"./chunk-IZ2QRXSE.js";import{ScreenChrome as e}from"./chunk-FJ3ZJJ5Z.js";import{ScreenDocumentProvider as i,useScreenDocument as a}from"./chunk-THZ46DC5.js";import{DEFAULT_SCREEN_WORDS as o}from"./chunk-JTUUIVBZ.js";import{documentPermissions as s}from"./chunk-THWO5YVZ.js";import{useWords as c}from"./chunk-MFIRYGHW.js";import{useMemo as t,useState as d,useRef as l,useEffect as m,useCallback as g}from"react";import{Dialog as h,Button as f}from"efficient-shell/ui";import{jsx as u,jsxs as p,Fragment as v}from"react/jsx-runtime";var k=r(n),C=r(e);function j({onCancel:r,onDiscard:n,onSave:e}){const i=c("screen",o).leave,[a,s]=d(!1),t=l(!0);m(()=>(t.current=!0,()=>{t.current=!1}),[]);const k=g(async()=>{s(!0);try{await e()}finally{t.current&&s(!1)}},[e]);/* @__PURE__ */
 return u(h,{open:!0,role:"alertdialog",size:"sm",title:i.title,onClose:r,footer:/* @__PURE__ */p(v,{children:[
 /* @__PURE__ */u(f,{variant:"secondary",onClick:r,children:i.cancel}),
 /* @__PURE__ */u(f,{variant:"ghost-danger",onClick:n,children:i.discard}),
-/* @__PURE__ */u(f,{variant:"primary",loading:a,onClick:()=>{C()},children:i.save})]}),children:i.body})}function j({target:r,addressing:n,onHostMessage:e,children:a}){/* @__PURE__ */
-return u(i,{target:r,addressing:n,onHostMessage:e,children:a})}var y=(r,n)=>/* @__PURE__ */p(v,{children:[r,n]});function H({config:r,parts:n,wrap:e=y}){const{data:i,error:d,redirecting:l,ready:m,readOnly:g,onChange:h,pendingNav:f,cancelPendingNav:p,discardAndNavigate:v,saveAndNavigate:j}=a(),H=t(()=>s(!g),[g]),M=c("screen",o);return l?/* @__PURE__ */u("div",{className:"sf-msg",children:M.loading}):d?/* @__PURE__ */u("div",{className:"sf-msg sf-msg--error",children:d}):m?i?e(
-/* @__PURE__ */u(C,{config:r,data:i,onChange:h,permissions:H,parts:n,children:/* @__PURE__ */u(k,{})}),f&&/* @__PURE__ */u(N,{onCancel:p,onDiscard:v,onSave:j})):/* @__PURE__ */u("div",{className:"sf-msg",children:M.loading}):/* @__PURE__ */u("div",{className:"sf-msg",children:M.waitingForAuthorization})}export{H as DocumentScreen,j as ScreenMount};
+/* @__PURE__ */u(f,{variant:"primary",loading:a,onClick:()=>{k()},children:i.save})]}),children:i.body})}function y({target:r,addressing:n,onHostMessage:e,children:a}){/* @__PURE__ */
+return u(i,{target:r,addressing:n,onHostMessage:e,children:a})}var N=(r,n)=>/* @__PURE__ */p(v,{children:[r,n]});function Z({config:r,parts:n,wrap:e=N}){const{data:i,error:d,redirecting:l,ready:m,readOnly:g,onChange:h,pendingNav:f,cancelPendingNav:p,discardAndNavigate:v,saveAndNavigate:y}=a(),Z=t(()=>s(!g),[g]),H=c("screen",o);return l?/* @__PURE__ */u("div",{className:"sf-msg",children:H.loading}):d?/* @__PURE__ */u("div",{className:"sf-msg sf-msg--error",children:d}):m?i?e(
+/* @__PURE__ */u(k,{config:r,data:i,onChange:h,permissions:Z,parts:n,children:/* @__PURE__ */u(C,{})}),f&&/* @__PURE__ */u(j,{onCancel:p,onDiscard:v,onSave:y})):/* @__PURE__ */u("div",{className:"sf-msg",children:H.loading}):/* @__PURE__ */u("div",{className:"sf-msg",children:H.waitingForAuthorization})}export{Z as DocumentScreen,y as ScreenMount};

package/dist/{chunk-76DVL36A.js → chunk-ERA3XM2U.js}

@@ -1 +1 @@
-import{useScreenBlockRules as e}from"./chunk-76YU5ZS7.js";import{newNodeId as t,ROOT_ZONE as n}from"./chunk-PLVEGYK6.js";import{useEasel as o,useEaselApi as r}from"./chunk-ACUQNEHP.js";import{useMemo as s}from"react";function i(i={}){const{dispatch:p}=o(e=>e),d=r(),c=!0===i.readOnly,a=e().resolveOnInsert,l=!0===(i.resolveOnInsert??a),m=!0===i.foldIntoHistory;return s(()=>{const e=m?e=>p({...e,recordHistory:!1}):p,o=(n,o,r)=>{const s=t(o);return c||e({type:"insert",componentType:o,destinationZone:n,destinationIndex:r,id:s}),s},r=e=>(l&&!c&&d.resolveNode(e,{trigger:"insert"}),e),s=(t,n,o)=>{c||e({type:"replace",destinationZone:t,destinationIndex:n,data:o})},i=(e,t,n)=>r(o(e,t,n));return{insertComponent:i,insertSection:(e,t)=>i(n,e,t),replaceComponent:s,seedChild:(e,t,n,i)=>{const p=o(e,n,t);s(e,t,{type:n,props:{id:p,...i}}),r(p)},insertNode:(e,t,n)=>{const i=o(e,n.type,t);return s(e,t,{type:n.type,props:{...n.props,id:i}}),r(i)},removeComponent:(t,n)=>{c||e({type:"remove",index:n,zone:t})},reorderComponent:(t,n,o)=>{c||e({type:"reorder",sourceIndex:n,destinationIndex:o,destinationZone:t})},duplicateComponent:(t,n)=>{c||e({type:"duplicate",sourceIndex:n,sourceZone:t})},select:e=>p({type:"setUi",ui:{itemSelector:e}}),setDocument:t=>{c||e({type:"setData",data:t})},commitDocument:(t,n)=>{c||(m?d.batch(()=>{e({type:"setData",data:t}),void 0!==n&&("slot"===n?.kind?d.selectSlot({parentId:n.parentId,slot:n.slot}):d.select(n?n.id:null))}):d.run({data:t,select:n}))}}},[p,c,l,d,m])}export{i as useSectionOps};
+import{useScreenBlockRules as e}from"./chunk-7O6MDCDU.js";import{newNodeId as t,ROOT_ZONE as n}from"./chunk-PLVEGYK6.js";import{useEasel as o,useEaselApi as r}from"./chunk-M32O2WRM.js";import{useMemo as s}from"react";function i(i={}){const{dispatch:p}=o(e=>e),d=r(),c=!0===i.readOnly,a=e().resolveOnInsert,l=!0===(i.resolveOnInsert??a),m=!0===i.foldIntoHistory;return s(()=>{const e=m?e=>p({...e,recordHistory:!1}):p,o=(n,o,r)=>{const s=t(o);return c||e({type:"insert",componentType:o,destinationZone:n,destinationIndex:r,id:s}),s},r=e=>(l&&!c&&d.resolveNode(e,{trigger:"insert"}),e),s=(t,n,o)=>{c||e({type:"replace",destinationZone:t,destinationIndex:n,data:o})},i=(e,t,n)=>r(o(e,t,n));return{insertComponent:i,insertSection:(e,t)=>i(n,e,t),replaceComponent:s,seedChild:(e,t,n,i)=>{const p=o(e,n,t);s(e,t,{type:n,props:{id:p,...i}}),r(p)},insertNode:(e,t,n)=>{const i=o(e,n.type,t);return s(e,t,{type:n.type,props:{...n.props,id:i}}),r(i)},removeComponent:(t,n)=>{c||e({type:"remove",index:n,zone:t})},reorderComponent:(t,n,o)=>{c||e({type:"reorder",sourceIndex:n,destinationIndex:o,destinationZone:t})},duplicateComponent:(t,n)=>{c||e({type:"duplicate",sourceIndex:n,sourceZone:t})},select:e=>p({type:"setUi",ui:{itemSelector:e}}),setDocument:t=>{c||e({type:"setData",data:t})},commitDocument:(t,n)=>{c||(m?d.batch(()=>{e({type:"setData",data:t}),void 0!==n&&("slot"===n?.kind?d.selectSlot({parentId:n.parentId,slot:n.slot}):d.select(n?n.id:null))}):d.run({data:t,select:n}))}}},[p,c,l,d,m])}export{i as useSectionOps};