efficient-easel 0.99.2 → 0.100.0

package/dist/text-styles/text-styles.css

@@ -0,0 +1,309 @@
+/*
+ * efficient-easel/text-styles.css — the text-styles list (plan step E6).
+ *
+ * Email styles → Text and Site styles → Text, drawn once. The numbers are the
+ * design's (both pages, final 2026-10-06) and every gap is one of the six
+ * spacing tokens (2/4/8/12/16/32, owner ruling 2026-10-02):
+ *
+ *   a row             12 above and below; name → grey line 4
+ *   an open style     its settings 12 apart, name → control 4 (the slider
+ *                     row's own), 16 below the last; indented to line up
+ *                     with the name (the 12 px chevron + 8), none under 260 px
+ *   group → group     32;  group heading → first row 4;  "+ Add" 12 above
+ *
+ * No divider line between rows: this package draws none (card 66350,
+ * tests/panel-no-divider-lines.test.ts). The design's hairline under each
+ * row is the one thing on the page not drawn here; the 12 px padding
+ * separates them.
+ *
+ * Builds on fields.css (the sliders, the dropdown) and pick.css (the colour
+ * window). Light only, like the rest of the editor.
+ */
+
+.es-ts {
+  container-type: inline-size;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.es-ts-section {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.es-ts-section + .es-ts-section { margin-top: var(--es-space-32, 32px); }
+
+.es-ts-group {
+  margin: 0 0 var(--es-space-4, 4px);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--es-muted, #6b7280);
+}
+
+/* ── a style's row: the chevron, its name in its own face, the grey line ── */
+
+/* The row and, over its end, its actions: Delete on an added style
+   (`onRemove`), then the host's own (`rowActions`). As the Layers row's
+   (tree.css `.es-tree-actions`): they LIE OVER the end of the row and hold
+   no width, so a row with Delete keeps the same room for its name as one
+   without; they show on hover AND on focus, over a fade the grey line
+   dissolves into. They sit beside the button that opens the row, never
+   inside it (a button may not hold a button). */
+.es-ts-item {
+  position: relative;
+  min-width: 0;
+}
+.es-ts-actions {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--es-space-2, 2px);
+  padding-left: var(--es-space-16, 16px);
+  background: linear-gradient(to right, transparent 0, var(--es-panel, #ffffff) 16px);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.12s;
+}
+.es-ts-item:hover .es-ts-actions,
+.es-ts-item:focus-within .es-ts-actions {
+  opacity: 1;
+}
+/* The strip never takes the pointer; only the buttons in it do, once shown,
+   so a press on the faded name still opens the row. */
+.es-ts-item:hover .es-ts-actions > *,
+.es-ts-item:focus-within .es-ts-actions > * {
+  pointer-events: auto;
+}
+@media (prefers-reduced-motion: reduce) { .es-ts-actions { transition: none; } }
+
+/* Delete: the Layers trash (tree.css `.es-tree-del`) — 22 px, the glyph 14,
+   red at 0.7, full with a red tint under the pointer. */
+.es-ts-del {
+  all: unset;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 5px;
+  color: var(--es-danger, #dc2626);
+  opacity: 0.7;
+  cursor: pointer;
+  transition: opacity 0.12s, background 0.12s, color 0.12s;
+}
+.es-ts-del svg { width: 14px; height: 14px; }
+.es-ts-del:hover,
+.es-ts-del:focus-visible {
+  opacity: 1;
+  background: var(--es-danger-tint, #fef2f2);
+  color: var(--es-danger-strong, #b91c1c);
+}
+.es-ts-del:focus-visible { outline: 2px solid var(--es-accent, #2563eb); outline-offset: 0; }
+@media (prefers-reduced-motion: reduce) { .es-ts-del { transition: none; } }
+
+.es-ts-row {
+  all: unset;
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: 12px minmax(0, 1fr);
+  column-gap: var(--es-space-8, 8px);
+  row-gap: var(--es-space-4, 4px);
+  align-items: center;
+  width: 100%;
+  padding: var(--es-space-12, 12px) 0;
+  cursor: pointer;
+}
+.es-ts-row:focus-visible { outline: 2px solid var(--es-accent, #2563eb); outline-offset: 2px; border-radius: 4px; }
+.es-ts-row[aria-expanded='true'] { padding-bottom: var(--es-space-8, 8px); }
+
+.es-ts-chev {
+  display: flex;
+  grid-row: 1;
+  width: 12px;
+  height: 12px;
+  color: var(--es-field-placeholder, #9ca3af);
+  transition: transform 0.12s ease;
+}
+.es-ts-row[aria-expanded='true'] .es-ts-chev { transform: rotate(90deg); }
+@media (prefers-reduced-motion: reduce) { .es-ts-chev { transition: none; } }
+
+.es-ts-name {
+  grid-column: 2;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 1.2;
+  color: var(--es-text, #111827);
+}
+.es-ts-meta {
+  grid-column: 2;
+  grid-row: 2;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--es-muted, #6b7280);
+}
+
+/* ── an open style ────────────────────────────────────────────────────────── */
+
+.es-ts-open {
+  display: flex;
+  flex-direction: column;
+  gap: var(--es-space-12, 12px);
+  min-width: 0;
+  padding: var(--es-space-4, 4px) 0 var(--es-space-16, 16px) calc(var(--es-space-12, 12px) + var(--es-space-8, 8px));
+}
+@container (width < 260px) {
+  .es-ts-open { padding-left: 0; }
+}
+
+/* One line in the style itself; a long one fades out on the right instead of
+   making the panel taller. */
+.es-ts-preview {
+  box-sizing: border-box;
+  overflow: hidden;
+  padding: var(--es-space-12, 12px);
+  border: 1px solid var(--es-line, #e5e7eb);
+  border-radius: var(--es-row-radius, 8px);
+  background: var(--es-panel, #ffffff);
+  color: var(--es-text, #111827);
+  white-space: nowrap;
+  -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
+  mask-image: linear-gradient(to right, #000 85%, transparent);
+}
+
+.es-ts-set {
+  display: flex;
+  flex-direction: column;
+  gap: var(--es-space-4, 4px);
+  min-width: 0;
+}
+/* A setting's name: the slider row's name, so every name in the list is one. */
+.es-ts-sub {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--es-text-secondary, #374151);
+}
+.es-ts-top {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--es-space-8, 8px);
+  min-width: 0;
+}
+.es-ts-colour-read {
+  flex: none;
+  font: 500 12px ui-monospace, SFMono-Regular, Menlo, monospace;
+  color: var(--es-muted, #6b7280);
+}
+
+/* The theme's colours in a row, then Any color — the colour window's swatches. */
+.es-ts-swatches {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--es-space-8, 8px);
+}
+/* Under 260 px the step down the scale keeps a six-colour theme and Any color
+   on one line (7 × 22 + 6 × 4 = 178 of the 196 px a 220 px panel has). */
+@container (width < 260px) {
+  .es-ts-swatches { gap: var(--es-space-4, 4px); }
+}
+.es-ts-swatch {
+  box-sizing: border-box;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 0;
+  border-radius: 6px;
+  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1);
+  cursor: pointer;
+}
+.es-ts-swatch[aria-pressed='true'] {
+  box-shadow:
+    inset 0 0 0 1px rgb(0 0 0 / 0.1),
+    0 0 0 2px var(--es-panel, #ffffff),
+    0 0 0 4px var(--es-accent, #2563eb);
+}
+.es-ts-swatch:focus-visible { outline: 2px solid var(--es-accent, #2563eb); outline-offset: 2px; }
+.es-ts-swatch:disabled { cursor: default; opacity: 0.6; }
+.es-ts-swatch--any { background: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
+
+/* B · I and Letter case: the text box's 32 px buttons (react-os-shell
+   IconButton md); pressed = the light blue the toolbar's pressed marks wear. */
+.es-ts-icons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--es-space-2, 2px);
+}
+.es-ts-icon {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--es-text-secondary, #374151);
+  font: inherit;
+  cursor: pointer;
+}
+.es-ts-icon--word {
+  width: auto;
+  padding: 0 var(--es-space-8, 8px);
+  font-size: 13px;
+  font-weight: 500;
+}
+.es-ts-icon:hover:not(:disabled) { background: var(--es-hover, #f3f4f6); color: var(--es-text, #111827); }
+.es-ts-icon[aria-pressed='true'],
+.es-ts-icon[aria-checked='true'],
+.es-ts-icon[aria-pressed='true']:hover:not(:disabled),
+.es-ts-icon[aria-checked='true']:hover:not(:disabled) {
+  background: var(--es-accent-tint, #eff6ff);
+  color: var(--es-accent-text, #1d4ed8);
+}
+.es-ts-icon:focus-visible { outline: 2px solid var(--es-accent, #2563eb); outline-offset: 1px; }
+.es-ts-icon:disabled { opacity: 0.6; cursor: not-allowed; }
+
+/* The window Any color opens: under the row, in the panel's flow. */
+.es-ts-set > .es-pick-window { margin-top: var(--es-space-4, 4px); }
+
+/* ── "+ Add heading" · 3 / 7 ──────────────────────────────────────────────── */
+
+.es-ts-add {
+  all: unset;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--es-space-8, 8px);
+  padding: var(--es-space-12, 12px) 0 0;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--es-accent, #2563eb);
+  cursor: pointer;
+}
+.es-ts-add:focus-visible { outline: 2px solid var(--es-accent, #2563eb); outline-offset: 2px; border-radius: 4px; }
+.es-ts-add:disabled { color: var(--es-disabled, #9ca3af); cursor: not-allowed; }
+.es-ts-count {
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--es-field-placeholder, #9ca3af);
+}

package/dist/tree/index.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode, HTMLAttributes, ButtonHTMLAttributes } from 'react';
-import { T as TreeWords } from '../words-N4ebT88_.js';
+import { T as TreeWords } from '../words-DgHcY5qB.js';
 
 type LayersTreeProps = {
     /** Extra classes — a host's scroll-bar class, for instance. */
@@ -111,6 +111,25 @@ type TreeRowActionProps = {
     onClick: () => void;
     children: ReactNode;
 };
+type TreeEmptySlotProps = {
+    /** A drag is over the slot and may land in it: it lights up and says "Drop here". */
+    drop?: boolean;
+    /** Present: the box is a button that adds here (it opens the Add panel at this place). */
+    onAdd?: () => void;
+    /**
+     * What the box says at rest. Default `words.addBlock` ("Add a block") with
+     * `onAdd`, `words.emptySlot` ("No blocks yet") without.
+     */
+    label?: string;
+    /**
+     * The drag handlers — `efficient-easel/drag`'s
+     * `seam({ place: { ...list, index: 0 } }).seamProps`: an empty list has one
+     * place, its start.
+     */
+    seamProps?: HTMLAttributes<HTMLDivElement>;
+    /** The box's own words in the host's language: `useEaselStrings().tree`. Left out, English. */
+    words?: TreeWords;
+};
 type TreeSeamProps = {
     /** A drag is over this gap and may land in it: draw the drop line. */
     drop?: boolean;
@@ -167,7 +186,29 @@ declare function TreeRowAction({ kind, label, onClick, pressed, disabled, childr
  * The gap between two rows, as a place (0.74.0): a drop between them lands here,
  * and — when the host offers it — a "+" adds here. It takes exactly the space
  * the gap already had, so a list reads the same with seams or without.
+ *
+ * ⚠️ NOT FOR AN EMPTY LIST. A seam hands its height back to the rows either
+ * side of it; alone in a list there are none, and what is left is a strip a
+ * few pixels tall with nothing drawn in it. Draw `TreeEmptySlot` there.
  */
 declare function TreeSeam({ drop, onAdd, label, seamProps }: TreeSeamProps): react.JSX.Element;
+/**
+ * AN EMPTY LIST, AS A PLACE (second host, 2026-10-06): where a slot holds
+ * nothing yet — a column with no blocks — a dashed box the size of a row. A
+ * drop on it lands in the slot, and when the host offers it the box is a
+ * button that adds there. While a drag may land it lights up and says so.
+ *
+ * Until then an empty list was drawn as its one seam, and a seam is a gap: a
+ * drop aimed at "into this empty column" missed its few pixels and landed on
+ * whatever row or seam was really under the pointer. The canvas has always
+ * drawn the same idea as its "+ Add block" cell (`efficient-easel/drag`).
+ *
+ * Lifted from the campaign designer's `.cd-tree-add` (efficient-admin-portal
+ * `EmailOutline`), which had drawn one of its own. Hook-free and controlled,
+ * like every part of the tree: the drag is `efficient-easel/drag`'s —
+ *
+ *     <TreeEmptySlot {...drag.seam({ place: { ...list, index: 0 } })} onAdd={…} />
+ */
+declare function TreeEmptySlot({ drop, onAdd, label, seamProps, words }: TreeEmptySlotProps): react.JSX.Element;
 
-export { LayersTree, type LayersTreeProps, Subtree, type SubtreeProps, TREE_DRAG_HINT, TreeGroupLabel, type TreeGroupLabelProps, TreeRow, TreeRowAction, type TreeRowActionProps, type TreeRowFold, type TreeRowMark, type TreeRowProps, TreeSeam, type TreeSeamProps, TreeWords };
+export { LayersTree, type LayersTreeProps, Subtree, type SubtreeProps, TREE_DRAG_HINT, TreeEmptySlot, type TreeEmptySlotProps, TreeGroupLabel, type TreeGroupLabelProps, TreeRow, TreeRowAction, type TreeRowActionProps, type TreeRowFold, type TreeRowMark, type TreeRowProps, TreeSeam, type TreeSeamProps, TreeWords };

package/dist/tree/index.js

@@ -1 +1 @@
-export{LayersTree,Subtree,TREE_DRAG_HINT,TreeGroupLabel,TreeRow,TreeRowAction,TreeSeam}from"../chunk-66CKSTXP.js";import"../chunk-H4B72XCJ.js";import"../chunk-PI26YXYD.js";
+export{LayersTree,Subtree,TREE_DRAG_HINT,TreeEmptySlot,TreeGroupLabel,TreeRow,TreeRowAction,TreeSeam}from"../chunk-V7GIIXFB.js";import"../chunk-3EDSDPIP.js";import"../chunk-6EIVTKZZ.js";

package/dist/tree/tree.css

@@ -616,3 +616,74 @@
 .es-subtree > .es-tree-seam:last-child {
   margin-bottom: calc(-1 * var(--es-rhythm-between));
 }
+
+/* ── An empty list, as a place (second host, 2026-10-06) ───────────────────
+   Where a slot holds nothing yet: a box the size of a row, that takes a drop
+   and — when the host offers it — adds there. NOT a seam: a seam is the gap
+   between two rows and takes back the space it adds (above), so alone in a
+   list it was a strip 8px tall with nothing drawn in it, and a drop aimed at
+   "into this empty column" landed on whatever was really under the pointer.
+
+   Dashed, because the thing is not there yet — the canvas says the same with
+   its "+ Add block" cell (`.es-canvas-empty`, drag.css). Read off the campaign
+   designer's `.cd-tree-add` (efficient-admin-portal), which drew one of its
+   own; 34px is a row's height (8 + 18 + 8). */
+.es-tree-empty {
+  box-sizing: border-box;
+  flex: none;
+  min-height: 34px;
+  display: flex;
+  align-items: stretch;
+  border: 1px dashed var(--es-line);
+  border-radius: var(--es-row-radius);
+  color: var(--es-text-secondary);
+  font: 500 12px/1.3 var(--es-font);
+  transition: border-color 0.12s, color 0.12s, background 0.12s;
+}
+.es-tree-empty-add,
+.es-tree-empty-note {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 12px;
+}
+/* The whole box is the button. A bare one: a native button ignores an author's
+   background and border on some platforms, so the box draws them. */
+.es-tree-empty-add {
+  border: none;
+  border-radius: inherit;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.es-tree-empty-add:focus-visible {
+  outline: 2px solid var(--es-accent);
+  outline-offset: -2px;
+}
+/* Nothing to do here: the list is empty, and that is all it says. It SAYS it,
+   so it is a grey that can be read: it was `--es-disabled` (#9ca3af), 2.5:1 on
+   the panel, which axe-core failed on a read-only tree (2026-10-07). Held by
+   ratio in tests/contrast-small-text.test.ts. */
+.es-tree-empty-note {
+  color: var(--es-muted);
+}
+.es-tree-empty.has-add:hover,
+.es-tree-empty.is-drop {
+  border-color: var(--es-accent);
+  color: var(--es-accent-text);
+}
+.es-tree-empty.is-drop {
+  background: var(--es-accent-tint);
+}
+.es-tree-empty.is-drop .es-tree-empty-note {
+  color: inherit;
+}
+/* At the top level rows stack as blocks: keep the row's own distance from one above. */
+.es-tree > .es-tree-row + .es-tree-empty,
+.es-tree > .es-subtree + .es-tree-empty {
+  margin-top: var(--es-rhythm-between);
+}

package/dist/{types-p9j2Fac7.d.ts → types-DGcCsxs8.d.ts}

@@ -1,4 +1,4 @@
-import { a as EaselRailItem } from './types-Bs_gVkVI.js';
+import { a as EaselRailItem } from './types-DWS-s9z-.js';
 import { CSSProperties, ReactNode, Ref } from 'react';
 import { EditAccess, SaveConflict } from './edit-lock/index.js';
 
@@ -40,9 +40,30 @@ declare function clampPanelWidth(width: number): number;
  * it. The website editor learned this on 2026-09-04: the vars sat on the panel
  * row, the top bar is that row's SIBLING, and the rail column read a width with
  * no declaration in scope — which is not an error, it silently falls back to
- * `auto` and the column shrinks to its buttons.
+ * `auto` and the column shrinks to its buttons. (Since 2026-10-06 chrome.css
+ * falls back to `DEFAULT_PANEL_W` instead: the column keeps its width and
+ * simply stops following the grip.)
+ *
+ * ⚠️ A SERVER RENDERS THIS AS A `style=""` ATTRIBUTE, and a
+ * Content-Security-Policy without `'unsafe-inline'` for styles refuses those.
+ * A client render is not affected: React writes a `style` prop through the
+ * CSSOM. A server-rendered editor under such a policy uses
+ * {@link setPanelWidthVars} instead.
  */
 declare function panelWidthVars(widths: PanelWidths): CSSProperties;
+/**
+ * The same two variables, written onto the editor root through the CSSOM
+ * (second host, 2026-10-06) — so the server's HTML carries no `style` attribute for a strict
+ * Content-Security-Policy to refuse:
+ *
+ *     <div className="es-editor" ref={(el) => { if (el) setPanelWidthVars(el, widths); }}>
+ *
+ * A ref runs on the client only, before the browser paints, and again on each
+ * render — so it follows the widths as a grip is dragged. Until it runs (the
+ * server's HTML, before hydration) chrome.css draws the panels at
+ * `DEFAULT_PANEL_W`. Touches nothing but the element it is handed.
+ */
+declare function setPanelWidthVars(el: HTMLElement, widths: PanelWidths): void;
 
 type TopBarProps = {
     children?: ReactNode;
@@ -146,12 +167,36 @@ type InspectorHeadProps = {
     /** `InspectorIconButton`s, right-aligned. Omit when the thing has no actions. */
     actions?: ReactNode;
 };
+/** What a field can hold, as `MediaPanelHead` says it (`ChromeWords.mediaKinds`). */
+type MediaPickKind = 'image' | 'video' | 'svg';
+type MediaPanelHeadProps = {
+    /** The line under "Media library": which website or campaign the panel is
+     *  open in. Also the line under "Choose …" when the field has no name. */
+    context: ReactNode;
+    /** The field choosing right now, or null while browsing. `field` is the
+     *  host's label for it ("Background image"). */
+    pick: {
+        kind: MediaPickKind;
+        field?: string;
+    } | null;
+    /** Leave choosing: the field keeps what it had. */
+    onCancel: () => void;
+    /** Hide the panel. Omitted where the panel cannot be hidden, and then no
+     *  Hide button is drawn. */
+    onHide?: () => void;
+    /** Which side panel the head is on; picks the Hide glyph and its name. */
+    side?: 'left' | 'right';
+};
 type InspectorUpLevelProps = {
-    /** What the level above is called — the section, the column, the group. */
+    /** What the level above is called — the section, the column, the group. The link's words. */
     name: string;
     /** Select the level above. */
     onSelect: () => void;
-    /** The glyph before the name. The host's own until the icon set carries one. */
+    /**
+     * @deprecated Ignored since the one up-level look (Lewis, 2026-10-06): the
+     * link draws its own ← and a host glyph is a second look. Kept so a host
+     * that still passes one compiles; drop it from your call.
+     */
     icon?: ReactNode;
     /**
      * The tooltip, and the start of the accessible name ("… to ‹name›"). Default
@@ -159,6 +204,12 @@ type InspectorUpLevelProps = {
      * is `EaselStrings.chrome.upLevelTo`.
      */
     label?: string;
+    /**
+     * Draw the link alone, without the panel-top inset — for a level inside the
+     * panel body (an open list item, a sub-panel). Default: the panel-top place,
+     * above the inspector head.
+     */
+    inline?: boolean;
 };
 type InspectorIconButtonProps = {
     /** Accessible name, and the tooltip unless `title` says something else. */
@@ -180,11 +231,27 @@ type InspectorIconButtonProps = {
     buttonRef?: Ref<HTMLButtonElement>;
     children: ReactNode;
 };
+/**
+ * Which of its words a top-bar rail is drawing — the settings tabs' three
+ * states: `'all'` every button with its word, `'chosen'` the glyphs plus the
+ * word of the button whose panel is open, `'none'` glyphs only.
+ */
+type RailWordsShown = 'all' | 'chosen' | 'none';
 type TopBarRailProps = {
     /** The rail's buttons (`EaselRail` items). */
     items: EaselRailItem[];
     /** The toolbar's own name, e.g. "Left panel views". */
     ariaLabel?: string;
+    /**
+     * Told which words the rail is drawing, once they are measured and again
+     * whenever that changes (the panel dragged, a longer language, another panel
+     * opened). The width decides in CSS; this is that answer read back, for a
+     * host that has to know — to shorten a word, widen its panel's floor, or
+     * note that "Zurück" and "Ebenen" fold where "Back" and "Layers" do not.
+     * Every button keeps its name as `title` and `aria-label` in all three.
+     * Left out, nothing is observed.
+     */
+    onWords?: (shown: RailWordsShown) => void;
 };
 type EditNoticeProps = {
     /** Who may write the document now (`efficient-easel/edit-lock`). */
@@ -200,7 +267,5 @@ type EditNoticeProps = {
     /** Throw this screen away and load what is saved — the only action that discards work. */
     onReload: () => void;
 };
-/** @deprecated The name before the Easel rename: `EaselIconButtonProps`. */
-type EditorIconButtonProps = EaselIconButtonProps;
 
-export { type DeviceSwitchProps as D, type EaselIconButtonProps as E, type InspectorHeadProps as I, MAX_PANEL_W as M, type PanelResizeHandleProps as P, type SaveTone as S, type TopBarProps as T, type TopBarClusterProps as a, type TopBarRailProps as b, type SaveStateProps as c, type SaveStateToggleProps as d, type InspectorIconButtonProps as e, type InspectorUpLevelProps as f, type EditNoticeProps as g, DEFAULT_PANEL_W as h, type DeviceOption as i, type EditorIconButtonProps as j, MIN_PANEL_W as k, type PanelSide as l, type PanelWidths as m, clampPanelWidth as n, panelWidthVars as p };
+export { type DeviceSwitchProps as D, type EaselIconButtonProps as E, type InspectorHeadProps as I, type MediaPanelHeadProps as M, type PanelResizeHandleProps as P, type RailWordsShown as R, type SaveTone as S, type TopBarProps as T, type TopBarClusterProps as a, type TopBarRailProps as b, type SaveStateProps as c, type SaveStateToggleProps as d, type InspectorIconButtonProps as e, type InspectorUpLevelProps as f, type MediaPickKind as g, type EditNoticeProps as h, DEFAULT_PANEL_W as i, type DeviceOption as j, MAX_PANEL_W as k, MIN_PANEL_W as l, type PanelSide as m, type PanelWidths as n, clampPanelWidth as o, panelWidthVars as p, setPanelWidthVars as s };

package/dist/{types-Bs_gVkVI.d.ts → types-DWS-s9z-.d.ts}

@@ -84,13 +84,5 @@ interface EaselRailButtonProps {
     onSelect?: () => void;
     className?: string;
 }
-/** @deprecated The name before the Easel rename: `EaselRailItem`. */
-type EditorRailItem = EaselRailItem;
-/** @deprecated The name before the Easel rename: `EaselRailOrientation`. */
-type EditorRailOrientation = EaselRailOrientation;
-/** @deprecated The name before the Easel rename: `EaselRailProps`. */
-type EditorRailProps = EaselRailProps;
-/** @deprecated The name before the Easel rename: `EaselRailButtonProps`. */
-type EditorRailButtonProps = EaselRailButtonProps;
 
-export type { EaselRailButtonProps as E, EaselRailItem as a, EaselRailOrientation as b, EaselRailProps as c, EditorRailButtonProps as d, EditorRailItem as e, EditorRailOrientation as f, EditorRailProps as g };
+export type { EaselRailButtonProps as E, EaselRailItem as a, EaselRailOrientation as b, EaselRailProps as c };

package/dist/{types-DO-b0LNj.d.ts → types-Djdq6Xkd.d.ts}

@@ -118,20 +118,21 @@ interface EaselContextMenuProps {
     /** Defaults to {@link ES_MENU_SKIN}, the storefront editor's approved look. */
     skin?: EaselContextMenuSkin;
     /**
-     * Where to portal to. Defaults to `document.body`.
+     * Where to portal to. Defaults to `document.body` (`null` means the default).
      *
      * A host that OVERRIDES `--es-*` on its own editor root should pass that root
      * instead: the default skin re-declares the token defaults on the box (see the
      * component's note), which is right for a box hanging off `<body>` and wrong
      * for one that should inherit a re-themed editor's values.
+     *
+     * So should a host that wants the box INSIDE ITS LANDMARKS (on the body it
+     * is page content outside every landmark: axe-core's `region`) — through
+     * `menuPortalTarget(root)`, never the bare root: the box is `position:
+     * fixed`, and a transformed, filtered or contained ancestor places and clips
+     * it. `menuPortalTarget` answers the root only when none does. The decision
+     * is recorded in `./portal`.
      */
     portalTo?: HTMLElement | null;
 }
-/** @deprecated The name before the Easel rename: `EaselContextMenuItem`. */
-type EditorContextMenuItem = EaselContextMenuItem;
-/** @deprecated The name before the Easel rename: `EaselContextMenuSkin`. */
-type EditorContextMenuSkin = EaselContextMenuSkin;
-/** @deprecated The name before the Easel rename: `EaselContextMenuProps`. */
-type EditorContextMenuProps = EaselContextMenuProps;
 
-export type { EaselContextMenuItem as E, EaselContextMenuProps as a, EaselContextMenuSkin as b, EditorContextMenuItem as c, EditorContextMenuProps as d, EditorContextMenuSkin as e };
+export type { EaselContextMenuItem as E, EaselContextMenuProps as a, EaselContextMenuSkin as b };

package/dist/{types-BOSGNvil.d.ts → types-E3HrTPg2.d.ts}

@@ -34,6 +34,12 @@ type SetDataPatch = Partial<Data> | DataInput;
 /**
  * The actions the apps dispatch today — Puck 0.20's, with Puck's meaning. Zone
  * keys are `"<parentId>:<slot>"`; `root:default-zone` is the page's own list.
+ *
+ * `insert` puts the block in with its `defaultProps` and runs NO resolver, as
+ * Puck's reducer did not. What ran a new block's `resolveData` in Puck was its
+ * own drop from the component list; here that is `easel.resolveNode(id, {
+ * trigger: 'insert' })`, called by the host after the insert (pass the action
+ * an `id` so there is one to name).
  */
 type EaselAction = ({
     type: 'setData';
@@ -149,17 +155,5 @@ interface EaselView<C extends EaselConfig = EaselConfig> {
      *  did, across a data swap, which the website editor wrapped. */
     getSelectorForId: (id: string) => Required<ItemSelector> | undefined;
 }
-/** @deprecated The name before the Easel rename: `EaselUi`. */
-type EditorUi = EaselUi;
-/** @deprecated The name before the Easel rename: `EaselAction`. */
-type EditorAction = EaselAction;
-/** @deprecated The name before the Easel rename: `EaselConfig`. */
-type EditorConfig = EaselConfig;
-/** @deprecated The name before the Easel rename: `EaselCore`. */
-type EditorCore = EaselCore;
-/** @deprecated The name before the Easel rename: `EaselHistory`. */
-type EditorHistory = EaselHistory;
-/** @deprecated The name before the Easel rename: `EaselView`. */
-type EditorView<C extends EaselConfig = EaselConfig> = EaselView<C>;
 
-export type { AppState as A, EaselConfig as E, HistoryEntry as H, Permissions as P, SetDataPatch as S, EaselView as a, EaselAction as b, EaselCore as c, EaselUi as d, EaselHistory as e, EditorAction as f, EditorConfig as g, EditorCore as h, EditorHistory as i, EditorUi as j, EditorView as k };
+export type { AppState as A, EaselConfig as E, HistoryEntry as H, Permissions as P, SetDataPatch as S, EaselView as a, EaselAction as b, EaselCore as c, EaselUi as d, EaselHistory as e };