efficient-easel 0.99.0 → 0.99.2

package/README.md

@@ -21,7 +21,7 @@ it since 0.93.0.
 The storefront editor (`efficient-storefront`, Next 16 + Puck) and the campaign
 designer (`efficient-admin-portal`, Vite/React) each hand-rolled their own narrow
 left icon-rail. They had already drifted — button 34px vs 36px, icon 18px vs
-20px, radius 9 vs 8, a CSS-var accent vs a Tailwind one. `EditorRail` is the one
+20px, radius 9 vs 8, a CSS-var accent vs a Tailwind one. `EaselRail` is the one
 rail they converge on.
 
 ## The leaf
@@ -36,14 +36,14 @@ it.
 // A client component in any editor:
 'use client';
 import {
-  EditorRail,
+  EaselRail,
   PagesIcon, LayersIcon, StylesIcon, MediaIcon, SitemapIcon, AddIcon,
 } from 'efficient-easel/rail';
 import 'efficient-easel/rail.css'; // once, from a client/global entry
 
 export function LeftRail({ view, onView, onAdd }) {
   return (
-    <EditorRail
+    <EaselRail
       ariaLabel="Left panel views"
       items={[
         { id: 'pages',  label: 'Pages',  icon: <PagesIcon />,  active: view === 'pages',  onSelect: () => onView('pages') },
@@ -59,14 +59,14 @@ export function LeftRail({ view, onView, onAdd }) {
 
 ## API
 
-### `<EditorRail items ariaLabel? className? orientation? />`
+### `<EaselRail items ariaLabel? className? orientation? />`
 
 A **pure presentational** toolbar. It owns the look, never the app state — you
 decide which item is `active` and what each `onSelect` does.
 
 | prop | type | default | notes |
 |---|---|---|---|
-| `items` | `EditorRailItem[]` | — | buttons, in render order |
+| `items` | `EaselRailItem[]` | — | buttons, in render order |
 | `ariaLabel` | `string` | `"Editor"` | names the toolbar for assistive tech |
 | `className` | `string` | — | merged onto `.es-rail` |
 | `orientation` | `'column' \| 'row'` | `'column'` | which way the buttons run |
@@ -85,17 +85,17 @@ changes. A row is 34px tall, so a 52px bar centres it with 9px to spare.
 
 ```tsx
 // The same rail, in the top bar's empty middle.
-<EditorRail orientation="row" ariaLabel="Editor views" items={items} />
+<EaselRail orientation="row" ariaLabel="Editor views" items={items} />
 ```
 
 `aria-orientation` follows the layout (`vertical` / `horizontal`); the `toolbar`
 role does not change, because a rail that mixes view toggles with plain actions
 is a toolbar whichever way it runs.
 
-### `EditorRailItem`
+### `EaselRailItem`
 
 ```ts
-interface EditorRailItem {
+interface EaselRailItem {
   id: string;            // React key + selection correlation
   label: string;         // aria-label + hover title
   icon: React.ReactNode; // an 18px currentColor glyph — use the shipped icons
@@ -109,7 +109,7 @@ A **view item** passes `active: true | false` and renders as a toggle
 (`aria-pressed`, `.is-active` highlight). An **action item** (the quick-add "+")
 omits `active` and renders as a plain button.
 
-`EditorRailButton` — the single-button building block `EditorRail` maps to — is
+`EaselRailButton` — the single-button building block `EaselRail` maps to — is
 exported too, for bespoke layouts.
 
 ## Tokens
@@ -263,7 +263,7 @@ export const pageEditLock = createEditLock({
 
 The plain half needs no binding: `canWriteDocument`, `holderOf`,
 `readLockHolder`, `accessForNewDocument`, `documentPermissions`, `describeAge`,
-`nameOrSomeone`, `newEditorClientId`, `shouldReleaseHeldWrite`,
+`nameOrSomeone`, `newEaselClientId`, `shouldReleaseHeldWrite`,
 `shouldReloadAfterTakeover`, `documentVersionMoved`, `reloadIfVersionMoved`.
 The bound half —
 `accessAfterClaimFailure`, `accessAfterTakeoverFailure`,
@@ -296,16 +296,16 @@ the editor owns the device, the save status, the widths and which panels are ope
 
 ```tsx
 import {
-  EditorTopBar, TopBarCluster, TopBarDivider, EditorIconButton, DeviceSwitch,
+  EaselTopBar, TopBarCluster, TopBarDivider, EaselIconButton, DeviceSwitch,
   SaveState, PanelResizeHandle, InspectorHead, DEFAULT_PANEL_W, panelWidthVars,
 } from 'efficient-easel/chrome';
 import 'efficient-easel/chrome.css'; // once, after shell.css
 
 <div className="es-editor" style={panelWidthVars(widths)}>   {/* the vars go on the ROOT */}
-  <EditorTopBar>
-    <TopBarCluster kind="rail"><EditorRail orientation="row" items={items} /></TopBarCluster>
+  <EaselTopBar>
+    <TopBarCluster kind="rail"><EaselRail orientation="row" items={items} /></TopBarCluster>
     <TopBarCluster>
-      <EditorIconButton label="Undo" onClick={undo}><UndoIcon /></EditorIconButton>
+      <EaselIconButton label="Undo" onClick={undo}><UndoIcon /></EaselIconButton>
       <TopBarDivider />
       <DeviceSwitch devices={devices} value={device} onChange={setDevice} />
     </TopBarCluster>
@@ -313,7 +313,7 @@ import 'efficient-easel/chrome.css'; // once, after shell.css
       <SaveState tone="saved" label="" />
       <button className="es-btn-primary">Done</button>
     </TopBarCluster>
-  </EditorTopBar>
+  </EaselTopBar>
   …
 </div>
 ```
@@ -754,24 +754,24 @@ typed catalogue, so a host in another language can translate it. A host that
 does nothing sees the English it always saw.
 
 ```tsx
-import { EditorStringsProvider, useEditorStrings, type DeepPartial, type EditorStrings } from 'efficient-easel/strings';
+import { EaselStringsProvider, useEaselStrings, type DeepPartial, type EaselStrings } from 'efficient-easel/strings';
 
-const german: DeepPartial<EditorStrings> = {
+const german: DeepPartial<EaselStrings> = {
   save: { failed: 'Speichern fehlgeschlagen' },
   lock: { minutesAgo: ({ count }) => `vor ${count} Min.` },   // a value or a plural: a function
 };
 
-<EditorStringsProvider value={german} locale="de">
+<EaselStringsProvider value={german} locale="de">
   <Editor />
-</EditorStringsProvider>;
+</EaselStringsProvider>;
 ```
 
-- **`EditorStrings`** is grouped by the module that says the word (`notice`,
+- **`EaselStrings`** is grouped by the module that says the word (`notice`,
   `lock`, `save`, `chrome`, `rail`, `tree`, `panel`, `fields`, `pick`, `drag`,
   `menu`, `styleClipboard`, `copy`, `canvas`). A plain word is a `string`;
   anything with a value in it is a function, so the host places the value and
-  does its own plural. `DEFAULT_EDITOR_STRINGS` is the English.
-- **What is left out falls back** (`mergeEditorStrings`), and a provider inside
+  does its own plural. `DEFAULT_EASEL_STRINGS` is the English.
+- **What is left out falls back** (`mergeEaselStrings`), and a provider inside
   another lays its words over the outer one's.
 - **The provider reaches the parts that have hooks:** the edit notice, the device
   switch, "up one level", the panel grip and the top-bar rail; the copy box, its
@@ -784,9 +784,9 @@ const german: DeepPartial<EditorStrings> = {
   argument:
 
   ```tsx
-  const strings = useEditorStrings();
+  const strings = useEaselStrings();
 
-  <EditorRail items={items} ariaLabel={strings.rail.label} />
+  <EaselRail items={items} ariaLabel={strings.rail.label} />
   <TreeRow … words={strings.tree} />
   <ColourPicker … words={strings.pick.colour} />
   <ImageBox … words={strings.pick.image} />
@@ -799,17 +799,46 @@ const german: DeepPartial<EditorStrings> = {
   styleMenuItems({ …, words: strings.styleClipboard });
   pasteMessage(plan, source, target, strings.styleClipboard);
   ```
-- **`useEditorLocale()`** is the provider's `locale` (`'en'` with none), for a
+- **`useEaselLocale()`** is the provider's `locale` (`'en'` with none), for a
   host's own blocks and fields. The engine does not read it.
 - **A server file may import it.** Importing the entry runs nothing — the React
   context is made on first use. `efficient-easel/strings/catalogue` is the
-  catalogue, its types and `mergeEditorStrings` with no React in its graph at
+  catalogue, its types and `mergeEaselStrings` with no React in its graph at
   all: what a host's own test imports to check its languages against the
   engine's keys.
 
 What a host supplies was never the engine's and is not in the catalogue: a
 block's name, a field's label, a tile's caption, the document's `noun`.
 
+## The names before the Easel rename
+
+The package took the name `efficient-easel` at 0.96.0. Its exports followed:
+every `Editor…` name is an `Easel…` one, and the store's subpath is
+`efficient-easel/easel`. **Every old name still works**, deprecated, and is the
+same value as its new name, so an app moves file by file.
+
+| Subpath | Was | Is |
+| --- | --- | --- |
+| `efficient-easel/editor` | the subpath itself, and `editor.css` | `efficient-easel/easel`, `easel.css` |
+| `/easel` | `createEditor`, `Editor`, `EditorOptions` | `createEasel`, `Easel`, `EaselOptions` |
+| `/easel` | `EditorProvider` (prop `editor`) | `EaselProvider` (prop `easel`) |
+| `/easel` | `useEditor`, `useEditorApi`, `createUseEditor`, `useEditorNodeOps` | `useEasel`, `useEaselApi`, `createUseEasel`, `useEaselNodeOps` |
+| `/easel` | `EditorCanvas`, `EditorCanvasProps` | `EaselCanvas`, `EaselCanvasProps` |
+| `/easel` | `EditorConfig`, `EditorView`, `EditorUi`, `EditorAction`, `EditorCore`, `EditorHistory` | `EaselConfig`, `EaselView`, `EaselUi`, `EaselAction`, `EaselCore`, `EaselHistory` |
+| `/rail` | `EditorRail`, `EditorRailButton`, `EditorRailItem`, `EditorRailProps`, `EditorRailButtonProps`, `EditorRailOrientation` | `EaselRail`, `EaselRailButton`, `EaselRailItem`, `EaselRailProps`, `EaselRailButtonProps`, `EaselRailOrientation` |
+| `/menu` | `EditorContextMenu`, `EditorContextMenuItem`, `EditorContextMenuProps`, `EditorContextMenuSkin` | `EaselContextMenu`, `EaselContextMenuItem`, `EaselContextMenuProps`, `EaselContextMenuSkin` |
+| `/chrome` | `EditorTopBar`, `EditorIconButton`, `EditorIconButtonProps` | `EaselTopBar`, `EaselIconButton`, `EaselIconButtonProps` |
+| `/strings` | `EditorStrings`, `DEFAULT_EDITOR_STRINGS`, `mergeEditorStrings`, `EditorStringsProvider`, `EditorStringsProviderProps`, `useEditorStrings`, `useEditorLocale` | `EaselStrings`, `DEFAULT_EASEL_STRINGS`, `mergeEaselStrings`, `EaselStringsProvider`, `EaselStringsProviderProps`, `useEaselStrings`, `useEaselLocale` |
+| `/edit-lock` | `newEditorClientId` | `newEaselClientId` |
+
+`efficient-easel/editor` and `efficient-easel/easel` are built on one chunk, so
+a provider imported from one is read by a hook imported from the other.
+
+Not renamed, because other code holds them: the `.es-editor` class and every
+other `es-` class, the `--es-*` variables, the `editor-shell:style-clipboard`
+storage key, and the rail's default label, the word "Editor", which a screen
+reader says to the person using a host's editor.
+
 ## Develop
 
 Node is native on the dev Mac (v26.8.1) — run these in your own worktree; a

package/dist/autosave/index.d.ts

@@ -1,8 +1,8 @@
-import { A as Autosave, a as AutosaveSnapshot, b as SaveIndicator, c as AutosaveOptions } from '../words-Cqmyey0s.js';
-export { d as AutosaveClock, S as SaveWords, e as createAutosave, s as saveIndicator } from '../words-Cqmyey0s.js';
-import '../types-CnRzp9oc.js';
-import '../types-DNrn_w4V.js';
-import '../wordFit-9B9nqyf3.js';
+import { A as Autosave, a as AutosaveSnapshot, b as SaveIndicator, c as AutosaveOptions } from '../words-c-3h9xQQ.js';
+export { d as AutosaveClock, S as SaveWords, e as createAutosave, s as saveIndicator } from '../words-c-3h9xQQ.js';
+import '../types-p9j2Fac7.js';
+import '../types-Bs_gVkVI.js';
+import '../wordFit-D4S36PvB.js';
 import 'react';
 import '../edit-lock/index.js';
 

package/dist/blocks/index.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement, FC, CSSProperties, ReactNode, JSX } from 'react';
-import { P as Permissions, A as AppState } from '../types-Dy6oR6Z2.js';
+import { P as Permissions, A as AppState } from '../types-BOSGNvil.js';
 import '../data/index.js';
 import '../types-41704JE4.js';
 import '../resolve-D68pb3Bx.js';
@@ -21,7 +21,7 @@ import '../plan-DChbUXdS.js';
  *   - the `ConfigParams` form of `Config<{ components, root, fields }>` and the
  *     user field-type extension it carries (neither app uses it);
  *   - everything about Puck's own editor — its store, overrides, plugins and
- *     history. Those are the engine's now (`efficient-easel/editor`).
+ *     history. Those are the engine's now (`efficient-easel/easel`).
  *
  * The `puck` prop keeps its name: it is what every block's `render` destructures
  * (`puck.isEditing`, `puck.renderDropZone`), and renaming it is the block rewrite

package/dist/canvas/index.d.ts

@@ -1,6 +1,6 @@
 import { RefObject } from 'react';
-import { C as CanvasTarget, W as WatchOptions } from '../watch-DmasQA61.js';
-export { B as BLOCK_SELECTOR, a as CANVAS_SELECTOR, i as isFrameReady, w as watchCanvasFrame } from '../watch-DmasQA61.js';
+import { C as CanvasTarget, W as WatchOptions } from '../watch-B5RTR-WX.js';
+export { B as BLOCK_SELECTOR, a as CANVAS_SELECTOR, i as isFrameReady, w as watchCanvasFrame } from '../watch-B5RTR-WX.js';
 
 /**
  * The small facts every canvas surface needs, written once — pure DOM, no
@@ -103,7 +103,7 @@ declare function fitCanvas({ available, width, maxScale, }: {
  * 'nonce-…'`), where a `<style>` without it is refused. Every sheet
  * `upsertCanvasStyle` / `useCanvasStyle` creates in `doc` afterwards wears it.
  *
- * `CanvasFrame` (`efficient-easel/editor`) calls this with its `nonce` prop as
+ * `CanvasFrame` (`efficient-easel/easel`) calls this with its `nonce` prop as
  * it builds the frame, so a host says it once; a host that builds its own
  * frame calls it itself. `undefined` (or `''`) forgets it.
  */

package/dist/chrome/index.d.ts

@@ -1,11 +1,11 @@
 import * as react from 'react';
-import { T as TopBarProps, a as TopBarClusterProps, b as TopBarRailProps, E as EditorIconButtonProps, D as DeviceSwitchProps, c as SaveStateProps, d as SaveStateToggleProps, P as PanelResizeHandleProps, I as InspectorHeadProps, e as InspectorIconButtonProps, f as InspectorUpLevelProps, g as EditNoticeProps } from '../types-CnRzp9oc.js';
-export { h as DEFAULT_PANEL_W, i as DeviceOption, M as MAX_PANEL_W, j as MIN_PANEL_W, k as PanelSide, l as PanelWidths, S as SaveTone, m as clampPanelWidth, p as panelWidthVars } from '../types-CnRzp9oc.js';
+import { T as TopBarProps, a as TopBarClusterProps, b as TopBarRailProps, E as EaselIconButtonProps, D as DeviceSwitchProps, c as SaveStateProps, d as SaveStateToggleProps, P as PanelResizeHandleProps, I as InspectorHeadProps, e as InspectorIconButtonProps, f as InspectorUpLevelProps, g as EditNoticeProps } from '../types-p9j2Fac7.js';
+export { h as DEFAULT_PANEL_W, i as DeviceOption, j as EditorIconButtonProps, M as MAX_PANEL_W, k as MIN_PANEL_W, l as PanelSide, m as PanelWidths, S as SaveTone, n as clampPanelWidth, p as panelWidthVars } from '../types-p9j2Fac7.js';
 import { LockWords, EditAccess, SaveConflict } from '../edit-lock/index.js';
 import { N as NoticeWords } from '../words-DagJdwIA.js';
 export { C as ChromeWords } from '../words-DagJdwIA.js';
-import '../types-DNrn_w4V.js';
-import '../wordFit-9B9nqyf3.js';
+import '../types-Bs_gVkVI.js';
+import '../wordFit-D4S36PvB.js';
 
 /**
  * The editor's top bar — 52px, white, a soft shadow, three clusters.
@@ -21,17 +21,19 @@ import '../wordFit-9B9nqyf3.js';
  *
  * Hook-free, directive-free: a server component may import it.
  */
-declare function EditorTopBar({ children }: TopBarProps): react.JSX.Element;
+declare function EaselTopBar({ children }: TopBarProps): react.JSX.Element;
 declare function TopBarCluster({ kind, style, children }: TopBarClusterProps): react.JSX.Element;
 /**
  * The bar's ONE divider: between what you did (undo / redo) and what you are
  * looking at (device, panels). A second one splits the very run this order makes.
  */
 declare function TopBarDivider(): react.JSX.Element;
+/** @deprecated The name before the Easel rename: `EaselTopBar`. */
+declare const EditorTopBar: typeof EaselTopBar;
 
 /**
  * The rail in the top bar: the left column of the bar (exactly the left panel's
- * width, carrying its hairline — `.es-cluster--rail`) holding an `EditorRail` in
+ * width, carrying its hairline — `.es-cluster--rail`) holding an `EaselRail` in
  * `orientation="row"`, wearing its words by THE SETTINGS TABS' RULE (owner,
  * 2026-09-18: "the rule must be the same as the top tabs of the right settings
  * panel"):
@@ -62,7 +64,9 @@ declare function TopBarRail({ items, ariaLabel }: TopBarRailProps): react.JSX.El
  * icon-only button has no other name, and "button" is all a screen reader would
  * say. `state` is for a toggle; a plain action leaves it off.
  */
-declare function EditorIconButton({ label, onClick, disabled, state, buttonRef, children }: EditorIconButtonProps): react.JSX.Element;
+declare function EaselIconButton({ label, onClick, disabled, state, buttonRef, children }: EaselIconButtonProps): react.JSX.Element;
+/** @deprecated The name before the Easel rename: `EaselIconButton`. */
+declare const EditorIconButton: typeof EaselIconButton;
 
 /**
  * Which device the canvas previews — icon-only, one button held down.
@@ -201,7 +205,7 @@ type EditNoticeContent = {
 /**
  * The two groups of words a notice is written in: its own sentences, and the
  * edit lock's "2 minutes ago" / "Someone else". The whole catalogue fits —
- * `editNotice(access, conflict, noun, useEditorStrings())`.
+ * `editNotice(access, conflict, noun, useEaselStrings())`.
  */
 type EditNoticeWords = {
     notice: NoticeWords;
@@ -216,4 +220,4 @@ type EditNoticeWords = {
  */
 declare function editNotice(access: EditAccess, conflict: SaveConflict | null, noun: string, words?: EditNoticeWords): EditNoticeContent | null;
 
-export { DeviceSwitch, DeviceSwitchProps, EditNotice, type EditNoticeAction, type EditNoticeContent, EditNoticeProps, type EditNoticeWords, EditorIconButton, EditorIconButtonProps, EditorTopBar, InspectorHead, InspectorHeadProps, InspectorIconButton, InspectorIconButtonProps, InspectorUpLevel, InspectorUpLevelProps, NoticeWords, PanelResizeHandle, PanelResizeHandleProps, SaveState, SaveStateProps, SaveStateToggle, SaveStateToggleProps, TopBarCluster, TopBarClusterProps, TopBarDivider, TopBarProps, TopBarRail, editNotice };
+export { DeviceSwitch, DeviceSwitchProps, EaselIconButton, EaselIconButtonProps, EaselTopBar, EditNotice, type EditNoticeAction, type EditNoticeContent, EditNoticeProps, type EditNoticeWords, EditorIconButton, EditorTopBar, InspectorHead, InspectorHeadProps, InspectorIconButton, InspectorIconButtonProps, InspectorUpLevel, InspectorUpLevelProps, NoticeWords, PanelResizeHandle, PanelResizeHandleProps, SaveState, SaveStateProps, SaveStateToggle, SaveStateToggleProps, TopBarCluster, TopBarClusterProps, TopBarDivider, TopBarProps, TopBarRail, editNotice };

package/dist/chrome/index.js

@@ -1,21 +1,21 @@
-import{DEFAULT_NOTICE_WORDS as e,DEFAULT_CHROME_WORDS as n}from"../chunk-KDIVA6WD.js";import{holderOf as t,describeAge as i,nameOrSomeone as a}from"../chunk-TDA4HH54.js";import{DEFAULT_LOCK_WORDS as r}from"../chunk-RE4LP46F.js";import{railTokens as o,EditorRail as s}from"../chunk-IBOFSS56.js";import{DEFAULT_RAIL_WORDS as l}from"../chunk-2OAZYSWJ.js";import{useWords as c}from"../chunk-MFIRYGHW.js";import"../chunk-BZ5ASXOL.js";import{jsx as d,jsxs as u}from"react/jsx-runtime";import{useRef as m,useState as p,useCallback as v,useEffect as h,useLayoutEffect as b}from"react";function f({children:e}){/* @__PURE__ */
+import{DEFAULT_NOTICE_WORDS as e,DEFAULT_CHROME_WORDS as n}from"../chunk-KDIVA6WD.js";import{holderOf as t,describeAge as i,nameOrSomeone as a}from"../chunk-672FAEKU.js";import{DEFAULT_LOCK_WORDS as r}from"../chunk-RE4LP46F.js";import{railTokens as o,EaselRail as s}from"../chunk-XUE5O62R.js";import{DEFAULT_RAIL_WORDS as l}from"../chunk-2OAZYSWJ.js";import{useWords as c}from"../chunk-MFIRYGHW.js";import"../chunk-BZ5ASXOL.js";import{jsx as d,jsxs as u}from"react/jsx-runtime";import{useRef as m,useState as p,useCallback as v,useEffect as h,useLayoutEffect as b}from"react";function f({children:e}){/* @__PURE__ */
 return d("div",{className:"es-topbar",children:e})}function k({kind:e,style:n,children:t}){/* @__PURE__ */
 return d("div",{className:e?`es-cluster es-cluster--${e}`:"es-cluster",style:n,children:t})}function g(){/* @__PURE__ */
-return d("div",{className:"es-divider-v","aria-hidden":"true"})}var y="undefined"==typeof window?h:b;function w({items:e,ariaLabel:n}){const t=c("rail",l),i=m(null),[a,r]=p(void 0),u=JSON.stringify(e.map(e=>e.label));return y(()=>{const n=i.current?.querySelector(".es-rail");if(!n)return;const t=document.createElement("canvas").getContext?.("2d")??null,a=()=>{if(!t)return r(void 0);const i=function(e,n,t){const i=parseFloat(getComputedStyle(e).getPropertyValue(n));return Number.isFinite(i)?i:t}(n,"--es-rail-word-size",o.wordFontSize),a=getComputedStyle(n).getPropertyValue("--es-rail-word-weight").trim()||String(o.wordFontWeight),s=getComputedStyle(n.querySelector(".es-rail-btn")??n).fontFamily;t.font=`${a} ${i}px ${s}`;const l=e.map(e=>t.measureText(e.label).width),c=e=>Math.ceil(4*e)/4;r({labelsPx:c(l.reduce((e,n)=>e+n,0)),widestLabelPx:c(Math.max(0,...l))})};a();let s=!0;return document.fonts?.ready.then(()=>s&&a()),()=>{s=!1}},[u]),/* @__PURE__ */d("div",{ref:i,className:"es-cluster es-cluster--rail es-rail-fit",children:/* @__PURE__ */d(s,{items:e,ariaLabel:n??t.label,orientation:"row",wordFit:a})})}function N({label:e,onClick:n,disabled:t,state:i,buttonRef:a,children:r}){/* @__PURE__ */
-return d("button",{ref:a,type:"button",className:i?`es-iconbtn es-iconbtn--${i}`:"es-iconbtn",title:e,"aria-label":e,disabled:t,onClick:n,children:r})}function x({devices:e,value:t,onChange:i,ariaLabel:a}){const r=c("chrome",n);/* @__PURE__ */
+return d("div",{className:"es-divider-v","aria-hidden":"true"})}var y=f,w="undefined"==typeof window?h:b;function N({items:e,ariaLabel:n}){const t=c("rail",l),i=m(null),[a,r]=p(void 0),u=JSON.stringify(e.map(e=>e.label));return w(()=>{const n=i.current?.querySelector(".es-rail");if(!n)return;const t=document.createElement("canvas").getContext?.("2d")??null,a=()=>{if(!t)return r(void 0);const i=function(e,n,t){const i=parseFloat(getComputedStyle(e).getPropertyValue(n));return Number.isFinite(i)?i:t}(n,"--es-rail-word-size",o.wordFontSize),a=getComputedStyle(n).getPropertyValue("--es-rail-word-weight").trim()||String(o.wordFontWeight),s=getComputedStyle(n.querySelector(".es-rail-btn")??n).fontFamily;t.font=`${a} ${i}px ${s}`;const l=e.map(e=>t.measureText(e.label).width),c=e=>Math.ceil(4*e)/4;r({labelsPx:c(l.reduce((e,n)=>e+n,0)),widestLabelPx:c(Math.max(0,...l))})};a();let s=!0;return document.fonts?.ready.then(()=>s&&a()),()=>{s=!1}},[u]),/* @__PURE__ */d("div",{ref:i,className:"es-cluster es-cluster--rail es-rail-fit",children:/* @__PURE__ */d(s,{items:e,ariaLabel:n??t.label,orientation:"row",wordFit:a})})}function x({label:e,onClick:n,disabled:t,state:i,buttonRef:a,children:r}){/* @__PURE__ */
+return d("button",{ref:a,type:"button",className:i?`es-iconbtn es-iconbtn--${i}`:"es-iconbtn",title:e,"aria-label":e,disabled:t,onClick:n,children:r})}var C=x;function O({devices:e,value:t,onChange:i,ariaLabel:a}){const r=c("chrome",n);/* @__PURE__ */
 return d("div",{className:"es-devseg",role:"group","aria-label":a??r.device,children:e.map(e=>{const n=e.id===t;/* @__PURE__ */
-return d("button",{type:"button",title:e.label,"aria-label":e.label,"aria-pressed":n,className:n?"is-active":void 0,onClick:()=>{n||i(e.id)},children:e.icon},e.id)})})}var C={idle:"is-quiet",saved:"is-quiet is-saved",saving:"is-saving",error:"is-error",off:"is-off","off-unsaved":"is-off is-unsaved"};function O({tone:e,label:n,counting:t,waitMs:i,ringRef:a,role:r}){/* @__PURE__ */
-return u("span",{className:`es-savestate ${C[e]}`,role:r,"aria-live":"polite",children:[/* @__PURE__ */d("span",t?{ref:a,className:"es-savestate-ring is-counting",style:void 0!==i?{"--es-savewait":`${i}ms`}:void 0,"aria-hidden":"true"}:{className:"es-savestate-dot","aria-hidden":"true"}),n]})}function S({pressed:e,title:n,onToggle:t,children:i}){/* @__PURE__ */
-return d("button",{type:"button",className:"es-savestate-toggle","aria-pressed":e,title:n,onClick:t,children:i})}var P="es-col-resizing";function L({side:e,width:t,min:i,max:a,defaultWidth:r,label:o,onResize:s}){const l=c("chrome",n),u=m(null),p=v((n,t)=>{const r="left"===e?n+t:n-t;return Math.round(Math.min(a,Math.max(i,r)))},[e,i,a]),b=v(e=>{u.current&&(u.current=null,document.body.classList.remove(P),e.currentTarget.hasPointerCapture(e.pointerId)&&e.currentTarget.releasePointerCapture(e.pointerId))},[]),f=v(e=>{0===e.button&&(u.current={x:e.clientX,w:t,moved:!1},e.currentTarget.setPointerCapture(e.pointerId),document.body.classList.add(P))},[t]),k=v(e=>{const n=u.current;if(!n)return;if(0===e.buttons)return void b(e);const t=e.clientX-n.x;if(!n.moved){if(Math.abs(t)<3)return;n.moved=!0}s(p(n.w,t))},[s,p,b]),g=v(e=>{"ArrowLeft"===e.key?(e.preventDefault(),s(e=>p(e,-16))):"ArrowRight"===e.key?(e.preventDefault(),s(e=>p(e,16))):"Home"===e.key&&(e.preventDefault(),s(r))},[s,p,r]);return h(()=>()=>document.body.classList.remove(P),[]),/* @__PURE__ */d("div",{className:`es-resizer es-resizer--${e}`,role:"separator",tabIndex:0,"aria-orientation":"vertical","aria-label":o,"aria-valuenow":t,"aria-valuemin":i,"aria-valuemax":a,title:l.resize,onPointerDown:f,onPointerMove:k,onPointerUp:b,onPointerCancel:b,onLostPointerCapture:b,onDoubleClick:()=>s(r),onKeyDown:g,children:/* @__PURE__ */d("span",{className:"es-resizer-bar","aria-hidden":"true"})})}function M({icon:e,name:n,kind:t,actions:i}){/* @__PURE__ */
+return d("button",{type:"button",title:e.label,"aria-label":e.label,"aria-pressed":n,className:n?"is-active":void 0,onClick:()=>{n||i(e.id)},children:e.icon},e.id)})})}var P={idle:"is-quiet",saved:"is-quiet is-saved",saving:"is-saving",error:"is-error",off:"is-off","off-unsaved":"is-off is-unsaved"};function S({tone:e,label:n,counting:t,waitMs:i,ringRef:a,role:r}){/* @__PURE__ */
+return u("span",{className:`es-savestate ${P[e]}`,role:r,"aria-live":"polite",children:[/* @__PURE__ */d("span",t?{ref:a,className:"es-savestate-ring is-counting",style:void 0!==i?{"--es-savewait":`${i}ms`}:void 0,"aria-hidden":"true"}:{className:"es-savestate-dot","aria-hidden":"true"}),n]})}function L({pressed:e,title:n,onToggle:t,children:i}){/* @__PURE__ */
+return d("button",{type:"button",className:"es-savestate-toggle","aria-pressed":e,title:n,onClick:t,children:i})}var M="es-col-resizing";function R({side:e,width:t,min:i,max:a,defaultWidth:r,label:o,onResize:s}){const l=c("chrome",n),u=m(null),p=v((n,t)=>{const r="left"===e?n+t:n-t;return Math.round(Math.min(a,Math.max(i,r)))},[e,i,a]),b=v(e=>{u.current&&(u.current=null,document.body.classList.remove(M),e.currentTarget.hasPointerCapture(e.pointerId)&&e.currentTarget.releasePointerCapture(e.pointerId))},[]),f=v(e=>{0===e.button&&(u.current={x:e.clientX,w:t,moved:!1},e.currentTarget.setPointerCapture(e.pointerId),document.body.classList.add(M))},[t]),k=v(e=>{const n=u.current;if(!n)return;if(0===e.buttons)return void b(e);const t=e.clientX-n.x;if(!n.moved){if(Math.abs(t)<3)return;n.moved=!0}s(p(n.w,t))},[s,p,b]),g=v(e=>{"ArrowLeft"===e.key?(e.preventDefault(),s(e=>p(e,-16))):"ArrowRight"===e.key?(e.preventDefault(),s(e=>p(e,16))):"Home"===e.key&&(e.preventDefault(),s(r))},[s,p,r]);return h(()=>()=>document.body.classList.remove(M),[]),/* @__PURE__ */d("div",{className:`es-resizer es-resizer--${e}`,role:"separator",tabIndex:0,"aria-orientation":"vertical","aria-label":o,"aria-valuenow":t,"aria-valuemin":i,"aria-valuemax":a,title:l.resize,onPointerDown:f,onPointerMove:k,onPointerUp:b,onPointerCancel:b,onLostPointerCapture:b,onDoubleClick:()=>s(r),onKeyDown:g,children:/* @__PURE__ */d("span",{className:"es-resizer-bar","aria-hidden":"true"})})}function $({icon:e,name:n,kind:t,actions:i}){/* @__PURE__ */
 return u("div",{className:"es-insp-head",children:[
 /* @__PURE__ */d("span",{className:"es-insp-chip","aria-hidden":"true",children:e}),
 /* @__PURE__ */u("div",{className:"es-insp-titles",children:[
 /* @__PURE__ */d("h2",{className:"es-insp-name",children:n}),
 /* @__PURE__ */d("div",{className:"es-insp-kind",children:t})]}),i?/* @__PURE__ */d("div",{className:"es-insp-actions",children:i}):null]})}function B({label:e,title:n,hasPopup:t,onClick:i,disabled:a,danger:r,expanded:o,buttonRef:s,children:l}){/* @__PURE__ */
-return d("button",{ref:s,type:"button",className:r?"es-insp-iconbtn es-insp-iconbtn--danger":"es-insp-iconbtn",title:n??e,"aria-label":e,"aria-haspopup":t,"aria-expanded":o,disabled:a,onClick:i,children:l})}function $({name:e,onSelect:t,icon:i,label:a}){const r=c("chrome",n),o=a??r.upLevel;/* @__PURE__ */
+return d("button",{ref:s,type:"button",className:r?"es-insp-iconbtn es-insp-iconbtn--danger":"es-insp-iconbtn",title:n??e,"aria-label":e,"aria-haspopup":t,"aria-expanded":o,disabled:a,onClick:i,children:l})}function D({name:e,onSelect:t,icon:i,label:a}){const r=c("chrome",n),o=a??r.upLevel;/* @__PURE__ */
 return d("div",{className:"es-insp-up",children:/* @__PURE__ */u("button",{type:"button",className:"es-insp-up-btn",title:o,"aria-label":r.upLevelTo({label:o,name:e}),onClick:t,children:[i?/* @__PURE__ */d("span",{className:"es-insp-up-icon","aria-hidden":"true",children:i}):null,
-/* @__PURE__ */d("span",{className:"es-insp-up-name",children:e})]})})}var D={notice:e,lock:r};function R(e,n,r,o=D){const s=o.notice,l=t(e),c={kind:"reload",label:s.reload};if(n){const e=i(n.secondsAgo,o.lock);return{tone:"warning",urgent:!0,lead:n.savedByYou?s.savedByYou({noun:r,when:e}):s.savedByOther({name:a(n.savedBy,o.lock),noun:r,when:e}),body:s.conflictBody,actions:l?[c,{kind:"take-over",label:s.takeOver,title:s.takeOverWhileDeciding}]:[c]}}if(!l)return null;const d=a(l.name,o.lock),u=i(l.secondsSinceSeen,o.lock);switch(e.kind){case"takenover":return{tone:"warning",urgent:!0,lead:s.tookOver({name:d,noun:r,when:i(l.secondsSinceHeld,o.lock)}),body:s.tookOverBody,actions:[{kind:"take-back",label:s.takeBack},c]};case"readonly":return{tone:"neutral",urgent:!1,lead:s.viewingOnly,body:s.viewingOnlyBody({name:d,noun:r,seen:u}),actions:[{kind:"take-over",label:s.takeOver}]};default:return{tone:"warning",urgent:!1,lead:s.editing({name:d,noun:r}),body:s.editingBody({seen:u}),actions:[{kind:"view-read-only",label:s.viewReadOnly},{kind:"take-over",label:s.takeOver,title:s.takeOverTold}]}}}function F({access:n,conflict:t,noun:i,onTakeOver:a,onViewReadOnly:o,onReload:s}){const l=R(n,t,i,{notice:c("notice",e),lock:c("lock",r)});if(!l)return null;const m={reload:s,"take-over":a,"take-back":a,"view-read-only":o};/* @__PURE__ */
+/* @__PURE__ */d("span",{className:"es-insp-up-name",children:e})]})})}var F={notice:e,lock:r};function j(e,n,r,o=F){const s=o.notice,l=t(e),c={kind:"reload",label:s.reload};if(n){const e=i(n.secondsAgo,o.lock);return{tone:"warning",urgent:!0,lead:n.savedByYou?s.savedByYou({noun:r,when:e}):s.savedByOther({name:a(n.savedBy,o.lock),noun:r,when:e}),body:s.conflictBody,actions:l?[c,{kind:"take-over",label:s.takeOver,title:s.takeOverWhileDeciding}]:[c]}}if(!l)return null;const d=a(l.name,o.lock),u=i(l.secondsSinceSeen,o.lock);switch(e.kind){case"takenover":return{tone:"warning",urgent:!0,lead:s.tookOver({name:d,noun:r,when:i(l.secondsSinceHeld,o.lock)}),body:s.tookOverBody,actions:[{kind:"take-back",label:s.takeBack},c]};case"readonly":return{tone:"neutral",urgent:!1,lead:s.viewingOnly,body:s.viewingOnlyBody({name:d,noun:r,seen:u}),actions:[{kind:"take-over",label:s.takeOver}]};default:return{tone:"warning",urgent:!1,lead:s.editing({name:d,noun:r}),body:s.editingBody({seen:u}),actions:[{kind:"view-read-only",label:s.viewReadOnly},{kind:"take-over",label:s.takeOver,title:s.takeOverTold}]}}}function z({access:n,conflict:t,noun:i,onTakeOver:a,onViewReadOnly:o,onReload:s}){const l=j(n,t,i,{notice:c("notice",e),lock:c("lock",r)});if(!l)return null;const m={reload:s,"take-over":a,"take-back":a,"view-read-only":o};/* @__PURE__ */
 return u("div",{className:`es-notice is-${l.tone}`,role:l.urgent?"alert":"status",children:[
 /* @__PURE__ */u("span",{className:"es-notice-text",children:[
 /* @__PURE__ */d("strong",{children:l.lead})," ",l.body]}),
-/* @__PURE__ */d("span",{className:"es-notice-actions",children:l.actions.map(e=>/* @__PURE__ */d("button",{type:"button",className:"es-notice-btn",title:e.title,onClick:m[e.kind],children:e.label},e.kind))})]})}var T={left:288,right:320},j=220,z=560;function A(e){return Math.min(560,Math.max(220,Math.round(e)))}function I(e){return{"--es-left-w":`${e.left}px`,"--es-right-w":`${e.right}px`}}export{T as DEFAULT_PANEL_W,x as DeviceSwitch,F as EditNotice,N as EditorIconButton,f as EditorTopBar,M as InspectorHead,B as InspectorIconButton,$ as InspectorUpLevel,z as MAX_PANEL_W,j as MIN_PANEL_W,L as PanelResizeHandle,O as SaveState,S as SaveStateToggle,k as TopBarCluster,g as TopBarDivider,w as TopBarRail,A as clampPanelWidth,R as editNotice,I as panelWidthVars};
+/* @__PURE__ */d("span",{className:"es-notice-actions",children:l.actions.map(e=>/* @__PURE__ */d("button",{type:"button",className:"es-notice-btn",title:e.title,onClick:m[e.kind],children:e.label},e.kind))})]})}var T={left:288,right:320},A=220,I=560;function W(e){return Math.min(560,Math.max(220,Math.round(e)))}function q(e){return{"--es-left-w":`${e.left}px`,"--es-right-w":`${e.right}px`}}export{T as DEFAULT_PANEL_W,O as DeviceSwitch,x as EaselIconButton,f as EaselTopBar,z as EditNotice,C as EditorIconButton,y as EditorTopBar,$ as InspectorHead,B as InspectorIconButton,D as InspectorUpLevel,I as MAX_PANEL_W,A as MIN_PANEL_W,R as PanelResizeHandle,S as SaveState,L as SaveStateToggle,k as TopBarCluster,g as TopBarDivider,N as TopBarRail,W as clampPanelWidth,j as editNotice,q as panelWidthVars};

package/dist/chunk-672FAEKU.js

@@ -0,0 +1 @@
+import{DEFAULT_LOCK_WORDS as e}from"./chunk-RE4LP46F.js";var n=e=>"editing"===e.kind;function t(e){return e?{kind:"checking"}:{kind:"editing"}}var r=e=>"blocked"===e.kind||"readonly"===e.kind||"takenover"===e.kind?e.holder:null;function o(e){if(!e||"object"!=typeof e)return null;const n=e;return"string"!=typeof n.holder_name?null:{name:n.holder_name,secondsSinceSeen:"number"==typeof n.seconds_since_seen?n.seconds_since_seen:0,secondsSinceHeld:"number"==typeof n.seconds_since_held?n.seconds_since_held:0}}var a=e=>e?{edit:!0,insert:!0,delete:!0,duplicate:!0,drag:!1}:{edit:!1,insert:!1,delete:!1,duplicate:!1,drag:!1};function s(n,t=e){if(!Number.isFinite(n)||n<45)return t.justNow;const r=Math.round(n/60);if(r<60)return t.minutesAgo({count:r});const o=Math.round(r/60);return t.hoursAgo({count:o})}var c=(n,t=e)=>n.trim()||t.someone;function d(){return`tab-${"undefined"!=typeof crypto&&"randomUUID"in crypto?crypto.randomUUID():Math.random().toString(36).slice(2)}`.slice(0,64)}var i=d,u="edit_lock_taken";function l(e,t,r){return!(n(e)||!n(t))&&(r.pending&&r.autoSaveEnabled&&!r.saveConflict)}function f(e,t,o){return!(null===r(e)||!n(t))&&(!o.pending&&!o.saveConflict)}function k(e,n){return e!==n&&Date.parse(e)>=Date.parse(n)}async function h(e){if(!e.ours)return!1;const n=await e.stored().catch(()=>null);return!(!n||!k(n,e.ours)||e.hasPending())&&(e.reload(),!0)}function y(e){const{readFailure:n,conflictCode:t}=e,r=e=>{const t=n(e);return t&&409===t.status?o(t.data):null},a=e=>{const n=r(e);return n?{kind:"blocked",holder:n}:{kind:"editing"}},s=(e,n)=>{const t=r(e);return t?{kind:"blocked",holder:t}:n},c=(e,n)=>{const t=r(e);return t?{kind:"takenover",holder:t}:n},d=e=>{const t=n(e);return null!==t&&(401===t.status||403===t.status)};return{accessAfterClaimFailure:a,accessAfterTakeoverFailure:s,accessAfterHeartbeatFailure:c,isAuthRejection:d,readSaveConflict:e=>{const r=n(e);if(!r||409!==r.status)return null;if(!r.data||"object"!=typeof r.data)return null;const o=r.data;return o.code!==t?null:{savedBy:"string"==typeof o.saved_by?o.saved_by:"",savedByYou:!0===o.saved_by_you,secondsAgo:"number"==typeof o.seconds_ago?o.seconds_ago:0}},readLockTaken:e=>{const t=n(e);return t&&409===t.status&&t.data&&"object"==typeof t.data?t.data.code!==u?null:o(t.data)??{name:"",secondsSinceSeen:0,secondsSinceHeld:0}:null},makeClaimBeat:e=>{let n=!1;return async t=>{let r,o;try{const a=await e.claim(t);if(e.cancelled())return;r=e.currentAccess(),o={kind:"editing"},!n&&a.heartbeat_seconds>0&&(n=!0,e.startHeartbeat(1e3*a.heartbeat_seconds))}catch(n){if(e.cancelled())return;r=e.currentAccess(),o=t?s(n,r):"checking"===r.kind?a(n):c(n,r),d(n)&&e.stopHeartbeat()}e.setAccess(o);const i=e.heldWrite();l(r,o,i)?e.releaseHeldWrite():t&&f(r,o,i)&&e.reloadIfMoved?.()}}}}export{u as EDIT_LOCK_TAKEN,t as accessForNewDocument,n as canWriteDocument,y as createEditLock,s as describeAge,a as documentPermissions,k as documentVersionMoved,r as holderOf,c as nameOrSomeone,d as newEaselClientId,i as newEditorClientId,o as readLockHolder,h as reloadIfVersionMoved,l as shouldReleaseHeldWrite,f as shouldReloadAfterTakeover};

package/dist/chunk-7JTL3P6P.js

@@ -0,0 +1 @@
+import{DEFAULT_STYLE_CLIPBOARD_WORDS as o}from"./chunk-6WY6ZXJG.js";import{DEFAULT_NODE_MENU_WORDS as r}from"./chunk-WK3AFPXY.js";import{DEFAULT_PICK_WORDS as t}from"./chunk-ZAOM6PFH.js";import{DEFAULT_CANVAS_WORDS as m}from"./chunk-AELNNAFM.js";import{DEFAULT_FIELDS_WORDS as n}from"./chunk-SUO5627P.js";import{DEFAULT_TREE_WORDS as c}from"./chunk-H4B72XCJ.js";import{DEFAULT_PANEL_WORDS as f}from"./chunk-7A7O2JWQ.js";import{DEFAULT_SAVE_WORDS as p}from"./chunk-H6DDIBQ4.js";import{DEFAULT_CHROME_WORDS as s,DEFAULT_NOTICE_WORDS as i}from"./chunk-KDIVA6WD.js";import{DEFAULT_LOCK_WORDS as u}from"./chunk-RE4LP46F.js";import{DEFAULT_RAIL_WORDS as e}from"./chunk-2OAZYSWJ.js";import{DEFAULT_COPY_WORDS as k}from"./chunk-ZT7M24XD.js";import{DEFAULT_DRAG_WORDS as j}from"./chunk-O2NLQBFX.js";var h={notice:i,lock:u,save:p,chrome:s,rail:e,tree:c,panel:f,fields:n,pick:t,drag:j,menu:r,styleClipboard:o,copy:k,canvas:m},l=o=>"object"==typeof o&&null!==o;function a(o,r){const t={};for(const m of Object.keys(o)){const n=o[m],c=r[m];null==c?t[m]=n:l(n)?t[m]=l(c)?a(n,c):n:t[m]=typeof c==typeof n?c:n}return t}function A(o,r){return r?a(o,r):o}var y=h,O=A;export{h as DEFAULT_EASEL_STRINGS,y as DEFAULT_EDITOR_STRINGS,A as mergeEaselStrings,O as mergeEditorStrings};

package/dist/chunk-F2PIG3AA.js

@@ -0,0 +1,10 @@
+import{toItemSelector as e,fromItemSelector as t,useNodeOps as n}from"./chunk-D2BCHTQR.js";import{DEFAULT_CANVAS_WORDS as o}from"./chunk-AELNNAFM.js";import{useResolvedFields as r}from"./chunk-YRLPFZW3.js";import{useWords as a}from"./chunk-MFIRYGHW.js";import{setCanvasNonce as i}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 E,useRef as O,useSyncExternalStore as A,useState as D,useLayoutEffect as z,useMemo as M,useCallback as Z}from"react";import{jsx as $,jsxs as N}from"react/jsx-runtime";import{createPortal as R}from"react-dom";function B(e){return!["setData","setUi","set"].includes(e.type)}var j=(e,t,n,o)=>{const r=d(e,t,u(n));return r?.[o]??null},L=(e,t,n,o,r)=>{const a=j(e,t,n,o);if(!a)throw new Error(`${r}: nothing at ${n}[${o}]`);return a};function P(t,n){const{selection:o}=t;return{...t.ui,itemSelector:e(t.data,n,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===l?d(e,t,n)?n:null:s(e,t,n.parentId)&&d(e,t,n)?n:null:null}function F(e,n,o,r=!1){const{itemSelector:a,selectedSlot:i,...s}=o;let l=e.selection;var d;return"itemSelector"in o&&(l=t(e.data,n,a??null)),"selectedSlot"in o&&(i?l=(d=i)?{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=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(P(e,n)):t.ui);case"set":{const r={data:o,ui:P(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=L(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=L(o,n,t.sourceZone,t.sourceIndex,"duplicate"),a=h(o,n,r.props.id),i=j(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=j(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=L(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(n){let o=n.config;const r=n.now??(()=>Date.now()),a=n.historyCoalesceMs??250;let i=n.permissions??{};const l=y(n.data,o);let c={data:l,selection:null,ui:{...q}};if(n.ui){const{itemSelector:e,selectedSlot:r,...a}=n.ui;c={data:l,selection:r?{kind:"slot",...r}:t(l,o,e??null),ui:{...q,...a}}}let u=[{core:c,at:-1/0,sealed:!0,id:U()}],p=0;const h=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()},x=()=>{u=[...u.slice(0,p),{...u[p],core:c},...u.slice(p+1)]},E=(e,t)=>{w>0?I=I||t:(t?h(!1):c!==e&&x(),c.data!==e.data&&n.onChange?.(c.data),c!==e&&C())},O=e=>{const t=c;if(c=H(c,e,o),c===t)return;const n=e.recordHistory??B(e);E(t,n&&c.data!==t.data)},A=e=>{0===w&&(S=c,I=!1),w+=1;try{e()}catch(e){throw w-=1,0===w&&S&&(c=S,S=null),e}if(w-=1,w>0||!S)return;const t=S;S=null,I&&c.data!==t.data?h(!0):c!==t&&x(),c.data!==t.data&&n.onChange?.(c.data),c!==t&&C()},D=e=>{const t=c,n=K(c.data,o,e);var r,a;(r=n,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:n},E(t,!1))},z=e=>{const t=c;p=e,c=u[p].core,c.data!==t.data&&n.onChange?.(c.data),c!==t&&C()},M=(e={})=>{const t=e.root?o.root?.permissions:o.components[e.item?.type??e.type??""]?.permissions;return{...T,...i,...t}},Z=g(),$={resolveCache:Z,async resolveAll({trigger:e="load",metadata:t}={}){const n=c.data,r={type:"root",props:{...n.root.props??{}}},a=[...n.content,...Object.values(n.zones??{}).flat()],[i,...l]=await Promise.all([k(r,o,{cache:Z,trigger:e,metadata:t}),...a.map(n=>k(n,o,{cache:Z,trigger:e,metadata:t}))]);A(()=>{const e=c;let t=c.data;l.forEach((e,r)=>{if(!e.didChange)return;const i=a[r].props.id,l=s(t,o,i)?.node;l&&l===s(n,o,i)?.node&&(t=f(t,o,i,e.node))}),i.didChange&&t.root===n.root&&(t={...t,root:{...t.root,props:i.node.props,readOnly:i.node.readOnly??t.root.readOnly}}),t!==c.data&&(c={...c,data:t,selection:K(t,o,c.selection)},E(e,!1))})},get config(){return o},getState(){if(v&&b===c)return v;const t=c,n={data:t.data,ui:P(t,o)},r="node"===t.selection?.kind?s(t.data,o,t.selection.id)?.node??null:null;return v={appState:n,selection:t.selection,selectedItem:r,config:o,dispatch:O,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:P(e.core,o)}})),index:p,setHistoryIndex:e=>{e>=0&&e<u.length&&e!==p&&z(e)}},getPermissions:M,getItemById:e=>s(t.data,o,e)?.node,getItemBySelector:e=>function(e,t,n){const[o,r]=(n.zone??"root:default-zone").split(/:(.*)/s);return d(e,t,{parentId:o,slot:r})?.[n.index]}(t.data,o,e),getSelectorForId:n=>{const r=e(t.data,o,{kind:"node",id:n});return r?{index:r.index,zone:r.zone??"root:default-zone"}:void 0}},b=t,v},subscribe:e=>(m.add(e),()=>{m.delete(e)}),dispatch:O,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 t=c,n=void 0===e.select?c.selection:e.select;c={...c,data:e.data,selection:K(e.data,o,n)},E(t,e.data!==t.data)})},load(e,t={}){const n=c,r=y(e,o);c={...c,data:r,selection:K(r,o,t.selection??c.selection)},t.keepHistory||(u=[{core:c,at:-1/0,sealed:!0,id:U()}],p=0),c!==n&&C()},undo(){p>0&&z(p-1)},redo(){p<u.length-1&&z(p+1)},setPermissions(e){i=e,v=null,C()},setConfig(e){e!==o&&(o=e,v=null,C())}};return $}var X=W;function Q(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 G=C(null);function J({easel:e,hotkeys:t=!0,resolveOnMount:n=!0,children:o}){return x(()=>{n&&e.resolveAll()},[e,n]),x(()=>{if(t&&"undefined"!=typeof document)return Q(document,e)},[e,t]),/* @__PURE__ */$(G.Provider,{value:e,children:o})}function _(){const e=E(G);if(!e)throw new Error("useEasel: no <EaselProvider> above this component");return e}function ee(e){const t=_(),n=O({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)}}function ne({editor:e,...t}){/* @__PURE__ */
+return $(J,{easel:e,...t})}var oe=_,re=ee,ae=te,ie="data-puck-component",se="data-puck-dropzone",le={},de="data-es-mirror";function ce(e,t,n){for(const e of Array.from(t.head.querySelectorAll(`[${de}]`)))e.remove();for(const o of Array.from(e.head.querySelectorAll('style, link[rel="stylesheet"]'))){const e=o.cloneNode(!0);e.setAttribute(de,""),n&&e.setAttribute("nonce",n),t.head.appendChild(e)}}function ue({children:e,id:t="preview-frame",title:n,className:r,style:s,mirrorStyles:l=!0,onDocument:d,height:c="auto",nonce:u}){const p=a("canvas",o),h=O(null),[f,m]=D(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),i(e,u),m(t),d?.(e);let n=null;const o=h.current?.ownerDocument;if(l&&o){ce(o,e,u);const t=o.defaultView;t&&"MutationObserver"in t&&(n=new t.MutationObserver(()=>ce(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:t,title:n??p.frame,className:r,style:{border:0,width:"100%",display:"block",..."fill"===c?{height:"100%"}:null,...s},children:f?R(e,f):null})}var pe=C(null),he=C(le),fe=[];function me({parentId:e,slot:t,className:n,style:o,minEmptyHeight:r=128}){const a=_(),i=ee(n=>d(n.appState.data,a.config,{parentId:e,slot:t})??fe),s=ee(t=>"node"===t.selection?.kind&&t.selection.id===e&&e!==l),c=ee(n=>"slot"===n.selection?.kind&&n.selection.parentId===e&&n.selection.slot===t),u=E(pe),p=["es-zone"];return i.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(" "),[se]:`${e}:${t}`,style:{...o,"--min-empty-height":`${r}px`},children:i.map(e=>/* @__PURE__ */$(ge,{node:e},e.props.id))})}function ve(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 $(me,{parentId:n,slot:e,...t})};return a}function ye(e){return function({zone:t,...n}){/* @__PURE__ */
+return $(me,{parentId:e,slot:t,...n})}}function ge({node:e}){const t=_().config,n=t.components[e.type],o=e.props.id,r=function(e){const t=O(null);return M(()=>n=>{const o=t.current;o&&o!==n&&(o.removeAttribute(ie),o.removeAttribute("data-puck-dnd")),t.current=n,n&&(n.setAttribute(ie,e),n.setAttribute("data-puck-dnd",e),n.style.position="relative")},[e])}(o),a=E(he);if(!n?.render)return null;const i=n.render,s=ve(t,e.type,o,{...I(n),...e.props}),l={renderDropZone:ye(o),isEditing:!0,dragRef:n.inline?r:null,metadata:{...a,...n.metadata}};return n.inline?/* @__PURE__ */$(i,{...s,puck:l,editMode:!0}):/* @__PURE__ */$("div",{[ie]:o,"data-puck-dnd":o,style:{position:"relative"},children:/* @__PURE__ */$(i,{...s,puck:l,editMode:!0})})}function ke({metadata:e}){const t=ee(e=>e.config),n=ee(e=>e.appState.data.root).props??{},o=t.root?.render,r=/* @__PURE__ */$(me,{parentId:l,slot:b}),a=o?/* @__PURE__ */$(o,{id:"puck-root",...ve(t,"root",l,n),puck:{renderDropZone:ye(l),isEditing:!0,dragRef:null,metadata:e??{}},editMode:!0,children:r}):r;/* @__PURE__ */
+return $(he.Provider,{value:e??le,children:a})}function be({id:e,kind:t,overlay:n}){const o=O(null),[r,a]=D(null);z(()=>{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(`[${ie}="${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 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 i=/* @__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:i}):i}function we({frame:e=!0,className:t,style:n,metadata:o,mirrorStyles:r,onDocument:a,height:i,title:s,nonce:l,frameWrapper:d,overlay:c,children:u}){const p=_(),[h,f]=D(void 0),m=ee(e=>"node"===e.selection?.kind?e.selection.id:null),[v,y]=D(null),g=/* @__PURE__ */N("div",{className:"es-canvas-content",style:{position:"relative"},onClick:e=>{const t=e.target;t.closest?.("a[href]")&&e.preventDefault();const n=t.closest?.(`[${ie}]`);n?p.select(n.getAttribute(ie)):t.hasAttribute?.(se)||p.select(null)},onMouseOver:e=>{const t=e.target.closest?.(`[${ie}]`),n=t?.getAttribute(ie)??null;n!==v&&y(n)},onMouseLeave:()=>y(null),children:[
+/* @__PURE__ */$(pe.Provider,{value:v,children:/* @__PURE__ */$(ke,{metadata:o})}),
+/* @__PURE__ */N("div",{className:"es-canvas-outlines",style:{position:"absolute",top:0,left:0,pointerEvents:"none"},children:[
+/* @__PURE__ */$(be,{id:v&&v!==m?v:null,kind:"hover",overlay:c}),
+/* @__PURE__ */$(be,{id:m,kind:"selected",overlay:c})]}),u]}),k=d?/* @__PURE__ */$(d,{document:h,children:g}):g,b=O(null);/* @__PURE__ */
+return $("div",{className:"es-canvas"+(t?` ${t}`:""),style:n,"data-puck-preview":"",children:e?/* @__PURE__ */$(ue,{mirrorStyles:r,onDocument:e=>{b.current?.(),b.current=e?Q(e,p):null,f(e??void 0),a?.(e)},height:i,title:s,nonce:l,children:k}):/* @__PURE__ */$("div",{id:"preview-frame","data-puck-entry":"",children:k})})}var Se=we;function Ie(e={}){const t=_(),o=ee(e=>e.appState.data);return n({...e,data:o,config:t.config,commit:(e,{select:n})=>t.run({data:e,select:n})})}function Ce(){const e=_(),t=ee(e=>e.config),n=e.resolveCache,o=ee(e=>e.selectedItem),a=ee(e=>e.appState.data.root),i=o?o.props.id:"root",l=a.props??{},d=M(()=>o||{type:"root",props:l},[o,l]),c=o?t.components[o.type]:t.root,u=e.getState(),p=o?s(u.appState.data,t,i):null,h=p&&"root"!==p.place.parentId?p.place.parentId:null,f=h?u.getItemById(h)??null:null,{fields:m}=r({id:i,node:d,block:c,parent:f,appState:u.appState}),v=u.getPermissions(o?{item:o}:{root:!0}),y=Z((o,r)=>{(async()=>{const a=e.getState();if("root"!==i){const s=a.getItemById(i),l=a.getSelectorForId(i);if(!s||!l)return;const d={...s,props:{...s.props,[o]:r}},{node:c}=await k(d,t,{cache:n,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:l}=await k({type:"root",props:{...s,[o]:r}},t,{cache:n,trigger:"replace"});e.dispatch({type:"replaceRoot",root:{props:l.props,readOnly:l.readOnly},recordHistory:!0})})()},[e,t,n,i]);return{id:i,node:d,fields:m,values:d.props,readOnly:!1===v.edit,onChange:y}}var xe=Ie;export{ue as CanvasFrame,q as DEFAULT_UI,we as EaselCanvas,J as EaselProvider,ke as EditDocument,Se as EditorCanvas,ne as EditorProvider,Q as bindUndoKeys,W as createEasel,X as createEditor,te as createUseEasel,ae as createUseEditor,B as recordsByDefault,H as reduce,P as uiView,ee as useEasel,_ as useEaselApi,Ie as useEaselNodeOps,re as useEditor,oe as useEditorApi,xe as useEditorNodeOps,Ce as useSelectedFields,K as validSelection};

package/dist/chunk-XUE5O62R.js

@@ -0,0 +1,3 @@
+import{DEFAULT_RAIL_WORDS as a}from"./chunk-2OAZYSWJ.js";import{wordFitVars as i}from"./chunk-BZ5ASXOL.js";import{jsxs as e,jsx as r}from"react/jsx-runtime";function o({label:a,worded:i,icon:o,active:l,disabled:t,onSelect:n,className:d}){const s=["es-rail-btn",l?"is-active":"",d??""].filter(Boolean).join(" ");/* @__PURE__ */
+return e("button",{type:"button",className:s,title:a,"aria-label":a,"aria-pressed":"boolean"==typeof l?l:void 0,disabled:t,onClick:t?void 0:n,children:[o,i?/* @__PURE__ */r("span",{className:"es-rail-word","aria-hidden":"true",children:a}):null]})}var l=o;function t({items:e,ariaLabel:l=a.label,className:t,orientation:n="column",wordFit:d}){const s="row"===n,c=s&&d?d:void 0;/* @__PURE__ */
+return r("div",{className:["es-rail",s?"es-rail-row":"",c?"is-measured":"",t??""].filter(Boolean).join(" "),role:"toolbar","aria-orientation":s?"horizontal":"vertical","aria-label":l,style:c&&i(e.length,c),children:e.map(a=>/* @__PURE__ */r(o,{label:a.label,worded:Boolean(c),icon:a.icon,active:a.active,disabled:a.disabled,onSelect:a.onSelect},a.id))})}var n=t,d={railWidth:46,railPaddingY:8,railGap:4,railRadius:12,buttonSize:34,buttonRadius:9,iconSize:18,wordPaddingX:8,wordGap:8,wordFontSize:12,wordFontWeight:500,transition:"background 0.12s, color 0.12s",disabledOpacity:.35,color:{background:"#ffffff",shadow:"0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 30px rgba(0, 0, 0, 0.06)",idle:"#6b7280",hoverBg:"#f3f4f6",hoverFg:"#111827",accent:"#2563eb",accentTint:"#eff6ff"}},s={railWidth:"--es-rail-w",railPaddingY:"--es-rail-pad-y",railGap:"--es-rail-gap",railRadius:"--es-rail-radius",buttonSize:"--es-rail-btn-size",buttonRadius:"--es-rail-btn-radius",iconSize:"--es-rail-icon-size",wordPaddingX:"--es-rail-word-pad-x",wordGap:"--es-rail-word-gap",wordFontSize:"--es-rail-word-size",wordFontWeight:"--es-rail-word-weight",background:"--es-rail-bg",shadow:"--es-rail-shadow",idle:"--es-rail-fg",hoverBg:"--es-rail-hover-bg",hoverFg:"--es-rail-hover-fg",accent:"--es-rail-accent",accentTint:"--es-rail-accent-tint"};export{t as EaselRail,o as EaselRailButton,n as EditorRail,l as EditorRailButton,s as railCssVars,d as railTokens};

package/dist/copy/index.d.ts

@@ -1,8 +1,8 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
 import { MarkStyle, MarkupTool, WrapResult, InlineRule } from '../markup/index.js';
-import { a as CopyAlign } from '../words-bOMsUJk9.js';
-export { b as COPY_ALIGNS, c as COPY_ALIGN_FIT, d as COPY_ALIGN_GLYPHS, e as COPY_ALIGN_LABELS, C as CopyWords, f as copyAlignOptions } from '../words-bOMsUJk9.js';
+import { a as CopyAlign } from '../words-C74EUpFr.js';
+export { b as COPY_ALIGNS, c as COPY_ALIGN_FIT, d as COPY_ALIGN_GLYPHS, e as COPY_ALIGN_LABELS, C as CopyWords, f as copyAlignOptions } from '../words-C74EUpFr.js';
 
 /** `'b'` → `Meta+B`, `'shift+x'` → `Meta+Shift+X` — the ARIA spelling of a
  *  shortcut. Meta is what the tooltips promise (⌘); Ctrl works too. */
@@ -65,7 +65,7 @@ interface MarkBarProps {
      */
     glyphs?: Partial<Record<MarkStyle, ReactNode>>;
     /**
-     * What the group is CALLED. Defaults to "Formatting" (`EditorStrings.copy.formatting`).
+     * 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 —
@@ -286,10 +286,10 @@ declare function pasteToMarkup(data: PasteData, opts: PasteOptions): string;
  *
  * A browser's own text undo cannot do it: it forgets everything the moment a
  * value is set from script, and every mark, link, clear and paste is set from
- * script. And the editor's undo (`efficient-easel/editor` `bindUndoKeys`)
+ * script. And the easel's undo (`efficient-easel/easel` `bindUndoKeys`)
  * steps the whole document, a keystroke at a time. So the box keeps the steps
  * IT made, with the selection each one started from, and answers ⌘Z itself —
- * the key never reaches the editor while the caret is in the box, so one key
+ * the key never reaches the easel while the caret is in the box, so one key
  * is never answered twice.
  *
  * Typing is one step per burst: keystrokes less than a second apart are one

package/dist/data/index.d.ts

@@ -199,12 +199,12 @@ declare function copyTranslation(overlay: TranslationOverlay | null | undefined,
  * The Ground Up For Efficient Editor", 2026-09-29, step 1.1). Every function
  * takes a document and returns a new one; nothing here holds state, knows
  * about React, or touches a browser global, so a server component, a Node
- * script, a test and the editor's store all call the same code.
+ * script, a test and the easel's store all call the same code.
  *
  *   find · walk · slotsOf              read
  *   insert · move · remove · duplicate change the tree
  *   setProps · setRoot                 change one node's props, or the root's
- *   normalizeData                      what the editor does to a document it opens
+ *   normalizeData                      what the easel does to a document it opens
  *   createNode · newId                 make a block the way the Add panel does
  *   applyTranslation · …               a page's other languages, kept beside it (./translate)
  *
@@ -232,7 +232,7 @@ declare function copyTranslation(overlay: TranslationOverlay | null | undefined,
  * ERRORS. An edit that names a node or slot that is not there, an index off the
  * end of a list, a move into the node's own subtree, or an insert that would
  * put a second copy of an id into the document throws a `DataError`. The
- * editor's store decides what an operator sees; this layer never guesses.
+ * easel's store decides what an operator sees; this layer never guesses.
  *
  * LEAF DISCIPLINE: no imports outside this folder, no dependency at all.
  * `crypto` is read inside `newId`, never at module evaluation.
@@ -294,7 +294,7 @@ declare function find(data: Data, config: DataConfig, id: string): Found | null;
 /** The list at an address, or `null` when no such slot exists. */
 declare function getList(data: Data, config: DataConfig, address: SlotAddress): Node[] | null;
 /**
- * What the editor does to a document when it opens it — the same result Puck
+ * What the easel does to a document when it opens it — the same result Puck
  * reaches on load, with the older formats converted (rule 4):
  *
  *   - `root` holding its props directly becomes `{ props: { …those keys } }`;

package/dist/drag/drag.css

@@ -113,28 +113,48 @@
   transform: scale(1);
 }
 
-/* An empty slot: a faint dashed cell that adds a block there, and takes a drop. */
+/* An empty slot: a cell that adds a block there, and takes a drop. At rest it
+   draws NOTHING — no fill, no border, no label — so what is under it shows as
+   on the live page (owner, option B, 2026-10-06: a HeroSlide's empty "groups"
+   slot covers the whole slide, and the old pale fill hid the picture). On hover
+   and on keyboard focus: the dashed outline and "+ Add block", and still no
+   fill on the cell — the label carries the tint, so it reads over a picture.
+   A drag over it lights the whole cell, as before. Touch has no hover: there
+   the slot is added to from Layers' "Add" rows. */
 .es-canvas-empty {
   position: absolute;
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 1.5px dashed var(--es-input-border);
+  border: 1.5px dashed transparent;
   border-radius: 6px;
-  background: color-mix(in srgb, var(--es-app-bg) 60%, transparent);
-  color: var(--es-muted);
+  background: transparent;
+  color: var(--es-accent-text);
   font: 500 12px/1.3 var(--es-font);
   cursor: pointer;
   pointer-events: auto;
-  transition: border-color 0.12s, background 0.12s, color 0.12s;
+  transition: border-color 0.12s, background 0.12s;
+}
+.es-canvas-empty-add {
+  padding: 2px 12px;
+  border-radius: 999px;
+  background: var(--es-accent-tint);
+  opacity: 0;
+  transition: opacity 0.12s;
 }
 .es-canvas-empty:hover,
 .es-canvas-empty:focus-visible,
 .es-canvas-empty.is-over {
   border-color: var(--es-accent);
+}
+.es-canvas-empty.is-over {
   background: var(--es-accent-tint);
-  color: var(--es-accent-text);
+}
+.es-canvas-empty:hover .es-canvas-empty-add,
+.es-canvas-empty:focus-visible .es-canvas-empty-add,
+.es-canvas-empty.is-over .es-canvas-empty-add {
+  opacity: 1;
 }
 
 /* ── The Add panel's shell ───────────────────────────────────────────────────

package/dist/drag/index.d.ts

@@ -1,8 +1,8 @@
 import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
 import { P as Place, S as SlotAddress } from '../types-41704JE4.js';
-import { C as CanvasTarget$1 } from '../watch-DmasQA61.js';
-import { D as DragWords } from '../words-D9ChvbNC.js';
+import { C as CanvasTarget$1 } from '../watch-B5RTR-WX.js';
+import { D as DragWords } from '../words-BDignMl_.js';
 
 /**
  * The one drag in flight, shared by every surface of an editor — the Layers
@@ -286,7 +286,7 @@ type CanvasDragLayerProps<I> = {
     measure?: (canvas: CanvasTarget$1, layer: Element) => MeasuredCanvas;
     /**
      * The layer's own words in the host's language:
-     * `useEditorStrings().drag.canvas` (0.95.0). Left out, English. `seamLabel`
+     * `useEaselStrings().drag.canvas` (0.95.0). Left out, English. `seamLabel`
      * and `zoneAddLabel` above still win for their one word. A prop, not the
      * strings provider: drag imports only its own lane.
      */
@@ -334,7 +334,7 @@ type AddPanelProps<I> = {
     readOnly?: boolean;
     /**
      * The shell's own words in the host's language:
-     * `useEditorStrings().drag.add` (0.95.0). Left out, English. `hint` and
+     * `useEaselStrings().drag.add` (0.95.0). Left out, English. `hint` and
      * `searchLabel` above still win for their one line. A prop, not the strings
      * provider: drag imports only its own lane.
      */