efficient-easel 0.99.1 → 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-BK-npta-.js';
+import { T as TreeWords } from '../words-DgHcY5qB.js';
 
 type LayersTreeProps = {
     /** Extra classes — a host's scroll-bar class, for instance. */
@@ -86,7 +86,7 @@ type TreeRowProps = {
     rowProps?: HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string | number | undefined>;
     /**
      * The row's own words — the drag hint and the caret's — in the host's
-     * language: `useEditorStrings().tree` (0.95.0). Left out, English. `dragHint`
+     * language: `useEaselStrings().tree` (0.95.0). Left out, English. `dragHint`
      * above still wins for its one line.
      */
     words?: TreeWords;
@@ -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-CnRzp9oc.d.ts → types-DGcCsxs8.d.ts}

@@ -1,4 +1,4 @@
-import { a as EditorRailItem } from './types-DNrn_w4V.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;
@@ -51,7 +72,7 @@ type TopBarClusterProps = {
     /**
      * `rail`   — the LEFT column: exactly the left panel's width (`--es-left-w`),
      *            carrying the panel's hairline up through the bar. Holds the
-     *            `EditorRail` in `orientation="row"` and nothing else.
+     *            `EaselRail` in `orientation="row"` and nothing else.
      * `right`  — the actions a person takes: save state, ghost buttons, the one
      *            primary button.
      * omitted  — the centre: undo / redo, a divider, the device switch, the panel
@@ -61,7 +82,7 @@ type TopBarClusterProps = {
     style?: CSSProperties;
     children?: ReactNode;
 };
-type EditorIconButtonProps = {
+type EaselIconButtonProps = {
     /** Tooltip AND accessible name. An icon-only button has no other. */
     label: string;
     onClick?: () => void;
@@ -87,7 +108,7 @@ type DeviceSwitchProps<Id extends string = string> = {
     value: Id;
     /** Asked for a different device. Never called for the current one. */
     onChange: (next: Id) => void;
-    /** The strip's own name. Defaults to "Preview device" (`EditorStrings.chrome.device`). */
+    /** The strip's own name. Defaults to "Preview device" (`EaselStrings.chrome.device`). */
     ariaLabel?: string;
 };
 /**
@@ -146,19 +167,49 @@ 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
-     * "Go up one level" (`EditorStrings.chrome.upLevel`); how the two are joined
-     * is `EditorStrings.chrome.upLevelTo`.
+     * "Go up one level" (`EaselStrings.chrome.upLevel`); how the two are joined
+     * 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 (`EditorRail` items). */
-    items: EditorRailItem[];
+    /** 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`). */
@@ -201,4 +268,4 @@ type EditNoticeProps = {
     onReload: () => void;
 };
 
-export { type DeviceSwitchProps as D, type EditorIconButtonProps 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, MIN_PANEL_W as j, type PanelSide as k, type PanelWidths as l, clampPanelWidth as m, 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-DNrn_w4V.d.ts → types-DWS-s9z-.d.ts}

@@ -1,4 +1,4 @@
-import { W as WordFit } from './wordFit-9B9nqyf3.js';
+import { W as WordFit } from './wordFit-D4S36PvB.js';
 import { ReactNode } from 'react';
 
 /**
@@ -14,7 +14,7 @@ import { ReactNode } from 'react';
  * The rail is purely presentational: it owns the LOOK, never the app state. The
  * host decides which item is `active` and what each `onSelect` does.
  */
-interface EditorRailItem {
+interface EaselRailItem {
     /** Stable identity — used as the React key and to correlate selection. */
     id: string;
     /** Accessible name; becomes both the `aria-label` and the hover `title`. */
@@ -48,11 +48,11 @@ interface EditorRailItem {
  * and active look are the same in both directions — the row re-points three
  * existing `--es-rail-*` custom properties and touches nothing else.
  */
-type EditorRailOrientation = 'column' | 'row';
-interface EditorRailProps {
+type EaselRailOrientation = 'column' | 'row';
+interface EaselRailProps {
     /** The buttons, top to bottom, in render order (place the "+" where you want it). */
-    items: EditorRailItem[];
-    /** Names the toolbar for assistive tech. Defaults to `"Editor"` (`EditorStrings.rail.label`). */
+    items: EaselRailItem[];
+    /** Names the toolbar for assistive tech. Defaults to `"Editor"` (`EaselStrings.rail.label`). */
     ariaLabel?: string;
     /** Extra class(es) merged onto the rail container. */
     className?: string;
@@ -61,7 +61,7 @@ interface EditorRailProps {
      * what every editor draws today — adding this prop changed no existing
      * output. Pass `'row'` to lay the rail into a top bar.
      */
-    orientation?: EditorRailOrientation;
+    orientation?: EaselRailOrientation;
     /**
      * A ROW rail's words, measured: the sum of every label's width and the widest
      * one, in the rail's own type (`WordFit`). Given, every button carries its
@@ -74,9 +74,9 @@ interface EditorRailProps {
      */
     wordFit?: WordFit;
 }
-interface EditorRailButtonProps {
+interface EaselRailButtonProps {
     label: string;
-    /** Put the label beside the icon, for the stylesheet to show or clip (see `EditorRail`). */
+    /** Put the label beside the icon, for the stylesheet to show or clip (see `EaselRail`). */
     worded?: boolean;
     icon: ReactNode;
     active?: boolean;
@@ -85,4 +85,4 @@ interface EditorRailButtonProps {
     className?: string;
 }
 
-export type { EditorRailButtonProps as E, EditorRailItem as a, EditorRailOrientation as b, EditorRailProps as c };
+export type { EaselRailButtonProps as E, EaselRailItem as a, EaselRailOrientation as b, EaselRailProps as c };