efficient-easel 0.105.1 → 1.0.0

package/dist/screen/lib/puck/style-clipboard.d.ts

@@ -1,7 +1,7 @@
 import { StyleRow } from '../../../style-clipboard/index.js';
 import { ScreenStyleDocument, ScreenNode, ScreenStylePastePlan, ScreenStyleClipboard } from '../screen-parts.js';
 import { panelFieldsOf } from './panel-fields.js';
-import '../../../types-Djdq6Xkd.js';
+import '../../../types-BsyPh6EW.js';
 import 'react';
 import '../../../words-CnnHb9jo.js';
 import '../../../blocks/index.js';
@@ -11,27 +11,27 @@ import '../../../types-41704JE4.js';
 import '../../../resolve-D68pb3Bx.js';
 import '../../../plan-DChbUXdS.js';
 import '../../../watch-BTYOJpQU.js';
-import '../../../types-CqY85foL.js';
-import '../../../types-DWS-s9z-.js';
-import '../../../wordFit-D4S36PvB.js';
+import '../../../types-Dt1CFR1S.js';
+import '../../../types-CsgMwHHa.js';
+import '../../../wordFit-7XpmhcaW.js';
 import '../../../edit-lock/index.js';
 import '../../../panelWidths-D9hTLR25.js';
 import '../../../CanvasDragLayer-zgYT1xwY.js';
 import '../../../session-DSQFmIvx.js';
 import '../../../words-BDignMl_.js';
-import '../../../types-DJDBtdB2.js';
-import '../../../words-DgHcY5qB.js';
+import '../../../types-BqGnUVX5.js';
+import '../../../words-Cl9xMUYY.js';
 import '../../components/AddSidePanel.js';
 import '../section-template-types.js';
 import './content-tree.js';
 import './block-choice.js';
-import '../../../host-BQ_b9Qzk.js';
+import '../../../host-CiuzZJXj.js';
 import '../document-contract.js';
 import '../session.js';
 import '../backend-error.js';
 import '../host-chrome.js';
 import '../links/link-filters.js';
-import '../../../LinkPicker-W2Rtxetz.js';
+import '../../../LinkPicker-hPEr1MJx.js';
 import '../document-hooks.js';
 import '../document-switch.js';
 import '../../../engine-DBxp_v6B.js';

package/dist/screen/lib/puck/use-section-ops.js

@@ -1 +1 @@
-export{useSectionOps}from"../../../chunk-NWIW7AWH.js";import"../../../chunk-VSHV6KJQ.js";import"../../../chunk-PLVEGYK6.js";import"../../../chunk-R6WTQWAC.js";import"../../../chunk-U3JP4VGF.js";import"../../../chunk-P67FP7PG.js";import"../../../chunk-AELNNAFM.js";import"../../../chunk-BXZ6WLHC.js";import"../../../chunk-EOJNJCMJ.js";import"../../../chunk-ZFDCDJNZ.js";import"../../../chunk-ZNS7727Y.js";import"../../../chunk-3EDSDPIP.js";import"../../../chunk-QTLAVDJE.js";import"../../../chunk-YRLPFZW3.js";import"../../../chunk-KTVH2ZRL.js";import"../../../chunk-D2BCHTQR.js";import"../../../chunk-EWVJSRRY.js";import"../../../chunk-P6O363EE.js";import"../../../chunk-FPOKPNO4.js";import"../../../chunk-MFIRYGHW.js";import"../../../chunk-BZ5ASXOL.js";import"../../../chunk-67GNT6PF.js";import"../../../chunk-ZNCEOSXO.js";import"../../../chunk-L5KW4HG5.js";import"../../../chunk-KRXQM65X.js";import"../../../chunk-NKB3KVAB.js";
+export{useSectionOps}from"../../../chunk-QMNML7XH.js";import"../../../chunk-OJAJVH7S.js";import"../../../chunk-PLVEGYK6.js";import"../../../chunk-R6WTQWAC.js";import"../../../chunk-U3JP4VGF.js";import"../../../chunk-PYCLHOSA.js";import"../../../chunk-AELNNAFM.js";import"../../../chunk-JMGPPXNQ.js";import"../../../chunk-NLRW4BGG.js";import"../../../chunk-XWR5YVA7.js";import"../../../chunk-Q27BB5ZC.js";import"../../../chunk-K56YDHYQ.js";import"../../../chunk-QTLAVDJE.js";import"../../../chunk-YRLPFZW3.js";import"../../../chunk-EA2HTX37.js";import"../../../chunk-D2BCHTQR.js";import"../../../chunk-7SQF6LZL.js";import"../../../chunk-QLD57GBB.js";import"../../../chunk-FPOKPNO4.js";import"../../../chunk-MFIRYGHW.js";import"../../../chunk-67GNT6PF.js";import"../../../chunk-ZNCEOSXO.js";import"../../../chunk-P2VEMZH5.js";import"../../../chunk-L5KW4HG5.js";import"../../../chunk-KRXQM65X.js";import"../../../chunk-NKB3KVAB.js";

package/dist/screen/lib/screen-parts.d.ts

@@ -2,15 +2,15 @@ import * as react from 'react';
 import { ReactNode, MouseEvent, ComponentType } from 'react';
 import { Data } from '../../blocks/index.js';
 import { C as CanvasTarget } from '../../watch-BTYOJpQU.js';
-import { D as DeviceOption } from '../../types-CqY85foL.js';
+import { D as DeviceOption } from '../../types-Dt1CFR1S.js';
 import { P as Place } from '../../types-41704JE4.js';
 import { M as MeasuredCanvas, C as CanvasDragModel } from '../../CanvasDragLayer-zgYT1xwY.js';
-import { E as EaselContextMenuItem } from '../../types-Djdq6Xkd.js';
-import { a as EaselRailItem } from '../../types-DWS-s9z-.js';
+import { E as EaselContextMenuItem } from '../../types-BsyPh6EW.js';
+import { a as EaselRailItem } from '../../types-CsgMwHHa.js';
 import { StyleRow } from '../../style-clipboard/index.js';
-import { T as TreeRowMark } from '../../types-DJDBtdB2.js';
+import { T as TreeRowMark } from '../../types-BqGnUVX5.js';
 import { AddKey } from '../components/AddSidePanel.js';
-import { k as AnyScreenTarget } from '../../host-BQ_b9Qzk.js';
+import { k as AnyScreenTarget } from '../../host-CiuzZJXj.js';
 import { HostProduct } from './host-chrome.js';
 import { EaselSession } from './session.js';
 import { AddTarget } from './puck/add-target-types.js';
@@ -23,9 +23,9 @@ import '../../edit-lock/index.js';
 import '../../panelWidths-D9hTLR25.js';
 import '../../session-DSQFmIvx.js';
 import '../../words-BDignMl_.js';
-import '../../wordFit-D4S36PvB.js';
+import '../../wordFit-7XpmhcaW.js';
 import '../../words-CnnHb9jo.js';
-import '../../words-DgHcY5qB.js';
+import '../../words-Cl9xMUYY.js';
 import './section-template-types.js';
 import './puck/block-choice.js';
 import './document-contract.js';
@@ -34,7 +34,7 @@ import '../../engine-DBxp_v6B.js';
 import './admin-bridge.js';
 import './backend-error.js';
 import './links/link-filters.js';
-import '../../LinkPicker-W2Rtxetz.js';
+import '../../LinkPicker-hPEr1MJx.js';
 import './document-hooks.js';
 import './puck/slot-section-spec.js';
 
@@ -585,6 +585,19 @@ interface ScreenBlockRules {
      * the website's never has.
      */
     resolveOnInsert?: boolean;
+    /**
+     * CLEAN A COPY (0.106.0): handed every node the screen COPIES into the
+     * document — the menu's Duplicate and Paste, ⌘V (a cut block pasted back
+     * too), a saved section put in from Add — one node at a time, a copied
+     * section's blocks each as well, and it answers the node as the copy should
+     * hold it: what only the original may hold taken out. The campaign
+     * designer's image block releases the hosted picture it baked (`bakedId`):
+     * the next bake deletes the asset that id names, so two blocks holding one
+     * would destroy each other's picture. It must keep the node's id (the copy's
+     * own, already fresh) and its type. Absent: a copy is its original, prop for
+     * prop, but its ids, as before.
+     */
+    stripCopy?: (node: ScreenNode) => ScreenNode;
 }
 /**
  * ONE SLOT OF A NODE, as the screen draws it (`ScreenBlockRules.slotsOf`,
@@ -947,6 +960,16 @@ interface ScreenPinnedNodes {
     isFirst?: (node: ScreenNode) => boolean;
     /** …and the one pinned last (the Footer). Absent: a node of type `last`. */
     isLast?: (node: ScreenNode) => boolean;
+    /**
+     * May a block cross into and out of the node pinned LAST (0.106.0) — dragged
+     * in the Layers tree or on the canvas, or pasted? Absent or false, the
+     * website's Footer: its blocks reorder within their own slot and nothing
+     * from the page's sections lands in it, nor leaves it. True, the campaign
+     * designer's Footer, a section whose columns hold any block: its slots are
+     * lists like every other's, asked what they take (the slot's own list, the
+     * depth, never into itself). The node itself stays pinned either way.
+     */
+    lastIsOpen?: boolean;
     /**
      * How the Layers tree draws the node pinned first (0.103.0). `"panel"`: a
      * row of its own that opens the layer's panel for it (`panelOf`), drawn
@@ -1203,6 +1226,16 @@ interface ScreenParts {
     /** Where Add puts what it adds, and whether it is a picker of blocks first
      *  (0.105.0; `ScreenAdd`). Absent: the screen's Add, as it always was. */
     add?: ScreenAdd;
+    /**
+     * WHERE A PERSON'S PANEL WIDTHS AND TREE FOLDS ARE KEPT (0.106.0): the
+     * first part of the two `localStorage` keys, `<namespace>-panel-widths` and
+     * `<namespace>-collapsed-sections`, so an editor beside the website's keeps
+     * its own — the campaign designer's panels and folds are not the website
+     * editor's. Read once, as the screen mounts. Absent (or empty): the website
+     * editor's keys, `sf-editor-panel-widths` and
+     * `sf-editor-collapsed-sections`, so a website's layout is what it was.
+     */
+    storageNamespace?: string;
     /** Copy style / Paste style's scope and a node's look, where they are the
      *  layer's (0.105.0; `ScreenStyleClipboard`). Absent: the website's. */
     styleClipboard?: ScreenStyleClipboard;
@@ -1229,7 +1262,8 @@ interface ScreenParts {
      * rest; and the screen draws no toast of its own. The campaign designer
      * hands the admin portal's toast, so the designer's lines stand where every
      * other window's do. Called as each line is said, so it may change between
-     * renders. Absent: the screen's own toast (`.sf-toast`), as before.
+     * renders. Absent: the shell's `toast` (efficient-shell/ui, harness UI-24;
+     * up to 0.106.0 the screen drew a toast of its own, `.sf-toast`).
      */
     notify?: (message: string, tone: "info" | "error") => void;
     /**
@@ -1323,6 +1357,9 @@ declare function useScreenPickFollowsSelection(selection: unknown): void;
 /** Where Add puts what it adds (`add`). With no layer's, nothing: the
  *  screen's own Add. */
 declare function useScreenAdd(): ScreenAdd;
+/** Where widths and folds are kept (`storageNamespace`), or undefined: the
+ *  website editor's keys. */
+declare function useScreenStorageNamespace(): string | undefined;
 /** The layer's style clipboard (`styleClipboard`), or null: the website's. */
 declare function useScreenStyleClipboard(): ScreenStyleClipboard | null;
 /** Whether ⌘C / ⌘X / ⌘V reach the selected block (`nodeKeys`). They do
@@ -1354,4 +1391,4 @@ declare function useScreenCanvasTarget(): CanvasTarget | null;
  *  engine's plain rows for the selection. */
 declare function useScreenInspectorPanel(): ComponentType<ScreenInspectorPanelProps>;
 
-export { type NodeDefaults, SELECTION_MODE, type ScreenAdd, type ScreenBlockLook, type ScreenBlockRules, type ScreenBridges, type ScreenCanvas, type ScreenCanvasDrag, type ScreenCanvasDragContext, type ScreenCanvasHeadProps, ScreenCanvasTargetProvider, type ScreenDevices, type ScreenDocumentOps, type ScreenDragItem, type ScreenInspector, type ScreenInspectorMode, type ScreenInspectorPanelProps, type ScreenLeftPanel, type ScreenLeftView, type ScreenLeftViewFrame, type ScreenLeftViewRules, type ScreenMenuRows, type ScreenNewNode, type ScreenNode, type ScreenNodeActions, type ScreenNodeLevel, type ScreenNodeMaker, type ScreenPartMode, type ScreenParts, ScreenPartsProvider, type ScreenPinnedBand, type ScreenPinnedNodes, type ScreenRailItem, type ScreenSelection, type ScreenSelector, type ScreenSlot, type ScreenSlotAction, type ScreenSlotMode, type ScreenStyleClipboard, type ScreenStyleDocument, type ScreenStylePastePlan, type ScreenTree, type ScreenTreeFolds, type ScreenTreeRows, isPinnedFirst, isPinnedLast, isSlotMode, sameInspectorMode, screenSlotsOf, useScreenAdd, useScreenBlockLook, useScreenBlockRules, useScreenBridges, useScreenCanvasDrag, useScreenCanvasFrame, useScreenCanvasHead, useScreenCanvasTarget, useScreenDevices, useScreenDocumentLabel, useScreenDocumentPass, useScreenInspectorPanel, useScreenLeftView, useScreenNodeKeys, useScreenNotify, useScreenOwnerName, useScreenParts, useScreenPickFollowsSelection, useScreenPinned, useScreenSaveSwitch, useScreenStyleClipboard, useStandaloneScreenBridges };
+export { type NodeDefaults, SELECTION_MODE, type ScreenAdd, type ScreenBlockLook, type ScreenBlockRules, type ScreenBridges, type ScreenCanvas, type ScreenCanvasDrag, type ScreenCanvasDragContext, type ScreenCanvasHeadProps, ScreenCanvasTargetProvider, type ScreenDevices, type ScreenDocumentOps, type ScreenDragItem, type ScreenInspector, type ScreenInspectorMode, type ScreenInspectorPanelProps, type ScreenLeftPanel, type ScreenLeftView, type ScreenLeftViewFrame, type ScreenLeftViewRules, type ScreenMenuRows, type ScreenNewNode, type ScreenNode, type ScreenNodeActions, type ScreenNodeLevel, type ScreenNodeMaker, type ScreenPartMode, type ScreenParts, ScreenPartsProvider, type ScreenPinnedBand, type ScreenPinnedNodes, type ScreenRailItem, type ScreenSelection, type ScreenSelector, type ScreenSlot, type ScreenSlotAction, type ScreenSlotMode, type ScreenStyleClipboard, type ScreenStyleDocument, type ScreenStylePastePlan, type ScreenTree, type ScreenTreeFolds, type ScreenTreeRows, isPinnedFirst, isPinnedLast, isSlotMode, sameInspectorMode, screenSlotsOf, useScreenAdd, useScreenBlockLook, useScreenBlockRules, useScreenBridges, useScreenCanvasDrag, useScreenCanvasFrame, useScreenCanvasHead, useScreenCanvasTarget, useScreenDevices, useScreenDocumentLabel, useScreenDocumentPass, useScreenInspectorPanel, useScreenLeftView, useScreenNodeKeys, useScreenNotify, useScreenOwnerName, useScreenParts, useScreenPickFollowsSelection, useScreenPinned, useScreenSaveSwitch, useScreenStorageNamespace, useScreenStyleClipboard, useStandaloneScreenBridges };

package/dist/screen/lib/screen-parts.js

@@ -1 +1 @@
-export{SELECTION_MODE,ScreenCanvasTargetProvider,ScreenPartsProvider,isPinnedFirst,isPinnedLast,isSlotMode,sameInspectorMode,screenSlotsOf,useScreenAdd,useScreenBlockLook,useScreenBlockRules,useScreenBridges,useScreenCanvasDrag,useScreenCanvasFrame,useScreenCanvasHead,useScreenCanvasTarget,useScreenDevices,useScreenDocumentLabel,useScreenDocumentPass,useScreenInspectorPanel,useScreenLeftView,useScreenNodeKeys,useScreenNotify,useScreenOwnerName,useScreenParts,useScreenPickFollowsSelection,useScreenPinned,useScreenSaveSwitch,useScreenStyleClipboard,useStandaloneScreenBridges}from"../../chunk-VSHV6KJQ.js";import"../../chunk-PLVEGYK6.js";import"../../chunk-R6WTQWAC.js";import"../../chunk-U3JP4VGF.js";import"../../chunk-P67FP7PG.js";import"../../chunk-AELNNAFM.js";import"../../chunk-BXZ6WLHC.js";import"../../chunk-EOJNJCMJ.js";import"../../chunk-ZFDCDJNZ.js";import"../../chunk-ZNS7727Y.js";import"../../chunk-3EDSDPIP.js";import"../../chunk-QTLAVDJE.js";import"../../chunk-YRLPFZW3.js";import"../../chunk-KTVH2ZRL.js";import"../../chunk-D2BCHTQR.js";import"../../chunk-EWVJSRRY.js";import"../../chunk-P6O363EE.js";import"../../chunk-FPOKPNO4.js";import"../../chunk-MFIRYGHW.js";import"../../chunk-BZ5ASXOL.js";import"../../chunk-67GNT6PF.js";import"../../chunk-ZNCEOSXO.js";import"../../chunk-L5KW4HG5.js";import"../../chunk-KRXQM65X.js";import"../../chunk-NKB3KVAB.js";
+export{SELECTION_MODE,ScreenCanvasTargetProvider,ScreenPartsProvider,isPinnedFirst,isPinnedLast,isSlotMode,sameInspectorMode,screenSlotsOf,useScreenAdd,useScreenBlockLook,useScreenBlockRules,useScreenBridges,useScreenCanvasDrag,useScreenCanvasFrame,useScreenCanvasHead,useScreenCanvasTarget,useScreenDevices,useScreenDocumentLabel,useScreenDocumentPass,useScreenInspectorPanel,useScreenLeftView,useScreenNodeKeys,useScreenNotify,useScreenOwnerName,useScreenParts,useScreenPickFollowsSelection,useScreenPinned,useScreenSaveSwitch,useScreenStorageNamespace,useScreenStyleClipboard,useStandaloneScreenBridges}from"../../chunk-OJAJVH7S.js";import"../../chunk-PLVEGYK6.js";import"../../chunk-R6WTQWAC.js";import"../../chunk-U3JP4VGF.js";import"../../chunk-PYCLHOSA.js";import"../../chunk-AELNNAFM.js";import"../../chunk-JMGPPXNQ.js";import"../../chunk-NLRW4BGG.js";import"../../chunk-XWR5YVA7.js";import"../../chunk-Q27BB5ZC.js";import"../../chunk-K56YDHYQ.js";import"../../chunk-QTLAVDJE.js";import"../../chunk-YRLPFZW3.js";import"../../chunk-EA2HTX37.js";import"../../chunk-D2BCHTQR.js";import"../../chunk-7SQF6LZL.js";import"../../chunk-QLD57GBB.js";import"../../chunk-FPOKPNO4.js";import"../../chunk-MFIRYGHW.js";import"../../chunk-67GNT6PF.js";import"../../chunk-ZNCEOSXO.js";import"../../chunk-P2VEMZH5.js";import"../../chunk-L5KW4HG5.js";import"../../chunk-KRXQM65X.js";import"../../chunk-NKB3KVAB.js";

package/dist/screen/lib/section-templates.d.ts

@@ -12,7 +12,7 @@ import './backend-error.js';
 import '../../edit-lock/index.js';
 import './host-chrome.js';
 import './links/link-filters.js';
-import '../../LinkPicker-W2Rtxetz.js';
+import '../../LinkPicker-hPEr1MJx.js';
 import './document-contract.js';
 import './document-hooks.js';
 

package/dist/screen/lib/session-context.d.ts

@@ -11,7 +11,7 @@ import './backend-error.js';
 import '../../edit-lock/index.js';
 import './host-chrome.js';
 import './links/link-filters.js';
-import '../../LinkPicker-W2Rtxetz.js';
+import '../../LinkPicker-hPEr1MJx.js';
 import './document-contract.js';
 import './document-hooks.js';
 import './section-template-types.js';

package/dist/screen/lib/session.d.ts

@@ -12,7 +12,7 @@ import '../../resolve-D68pb3Bx.js';
 import '../../plan-DChbUXdS.js';
 import '../../edit-lock/index.js';
 import './links/link-filters.js';
-import '../../LinkPicker-W2Rtxetz.js';
+import '../../LinkPicker-hPEr1MJx.js';
 import './puck/content-tree.js';
 
 /**

package/dist/screen/screen.css

@@ -15,13 +15,19 @@
  * draws to a rule in them.
  * The `sf-` names are kept: the hosts' sheets and their guards address them.
  *
+ * The `--sf-*` aliases below stay (hosts read them), but they resolve through
+ * `--es-*` to efficient-shell's tokens since UI-24 (efficient-harness#117):
+ * a host that loads the shell's CSS first gets the shell's theme, dark
+ * included, in every `--sf-*` name too. `--sf-frame-bg` is the canvas's
+ * paper — output, not chrome — and stays the page's white.
+ *
  * Load it after the other easel sheets and before a host's own sheet, which is
  * where these rules sat in the builder's; that order is the one the cascade
  * was measured in.
  */
 
 .sf-editor {
-  /* ── Accent (efficient-shell blue) ───────────────────────────────────── */
+  /* ── Accent (efficient-shell's) ──────────────────────────────────────── */
   --sf-accent: var(--es-accent);
   --sf-accent-tint: var(--es-accent-tint);
   --sf-accent-tint-strong: var(--es-accent-tint-strong);
@@ -30,7 +36,7 @@
   --sf-accent-shadow: var(--es-accent-shadow);
   --sf-on-accent: var(--es-on-accent);
 
-  /* ── Surfaces (cool gray ramp) ──────────────────────────────────────── */
+  /* ── Surfaces (shell ramp) ──────────────────────────────────────────── */
   --sf-app-bg: var(--es-app-bg);
   --sf-preview-bg: var(--es-preview-bg);
   --sf-panel: var(--es-panel);
@@ -70,7 +76,7 @@
   --sf-scrollbar: var(--es-scrollbar);
   --sf-scrollbar-hover: var(--es-scrollbar-hover);
 
-  /* ── Danger / warning / success (shell red / amber / green) ─────────── */
+  /* ── Danger / warning / success (shell status tiers) ───────────────── */
   --sf-danger: var(--es-danger);
   --sf-danger-strong: var(--es-danger-strong);
   --sf-danger-tint: var(--es-danger-tint);
@@ -206,6 +212,14 @@
   box-sizing: border-box;
 }
 
+/* The root takes focus without a tab stop inside another app's page (0.106.0,
+   lib/key-scope `editorRootFocus`), so a click on its ground keeps its keys in
+   hearing. It is never a place a person tabs to, so it draws no ring of its own:
+   the ring belongs to the control focus lands on. */
+.sf-editor[tabindex="-1"]:focus {
+  outline: none;
+}
+
 /* Scrollbars inside the editor panels */
 .sf-scroll::-webkit-scrollbar {
   width: 11px;
@@ -214,7 +228,7 @@
 
 .sf-scroll::-webkit-scrollbar-thumb {
   background: var(--sf-scrollbar);
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   border: 3px solid transparent;
   background-clip: content-box;
 }
@@ -269,9 +283,9 @@
 /* THE SIDE PANELS AND THEIR GRIPS ARE editor-shell's (efficient-easel/chrome.css):
    `.es-sidepanel` — flush, a hairline on the SEAM side only (card 66161: draw the
    seams, leave the outer edges alone), the size-container context every
-   `@container` rule in this sheet asks (card 66212) — and `.es-resizer`, pinned
-   over each seam from `--es-left-w` / `--es-right-w`, with the drag's
-   `body.es-col-resizing`. Lifted from this sheet (redesign 2a). The panels keep
+   `@container` rule in this sheet asks (card 66212) — and `.es-resizer` (the
+   shell's `ResizeHandle` since 1.0.0), pinned over each seam from
+   `--es-left-w` / `--es-right-w`. Lifted from this sheet (redesign 2a). The panels keep
    `.sf-panel` / `.sf-panel--left|right` as well, which is what this sheet's own
    descendant rules (`.sf-panel--right .sf-insp-body`, …) hang on. */
 .sf-panel-head {
@@ -373,7 +387,7 @@
 .sf-chip {
   width: 18px;
   height: 18px;
-  border-radius: 5px;
+  border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -426,21 +440,28 @@
   padding: 6px 9px;
   border: none;
   background: transparent;
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   cursor: pointer;
   color: var(--sf-accent);
   font-size: 12px;
   font-weight: 500;
 }
 
-.sf-add-card:hover {
+.sf-add-card:hover:not([aria-disabled='true']) {
   background: var(--sf-accent-tint);
 }
 
+/* Off with a reason (`aria-disabled`, so the keyboard reaches it and hears
+   why): the shell's own disabled fade, which only `:disabled` would draw. */
+.sf-add-card[aria-disabled='true'] {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
 .sf-add-card .sf-plus {
   width: 18px;
   height: 18px;
-  border-radius: 5px;
+  border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -449,81 +470,10 @@
   background: var(--sf-accent-tint);
 }
 
-/* ── Footer "Add block" menu — heterogeneous block-type picker ──────────── */
-.sf-blockmenu {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-  margin: 2px 0 4px;
-  padding: 4px;
-  border: 1px solid var(--sf-line);
-  border-radius: 8px;
-  background: var(--sf-panel);
-  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
-}
-
-/* ── Footer "Add block" menu — heterogeneous block-type picker ──────────── */
-.sf-blockmenu-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 7px 9px;
-  border: none;
-  background: transparent;
-  border-radius: 6px;
-  cursor: pointer;
-  color: var(--sf-text, var(--sf-text));
-  font-size: 12.5px;
-  text-align: left;
-}
-
-/* ── Footer "Add block" menu — heterogeneous block-type picker ──────────── */
-.sf-blockmenu-item:hover {
-  background: var(--sf-accent-tint);
-  color: var(--sf-accent);
-}
-
-/* ── Footer "Add block" menu — heterogeneous block-type picker ──────────── */
-/* A group heading inside that menu — drawn only where a choice list carries
-   groups (a Box's does; the Footer's and the Slide box's do not, and render
-   exactly as before).
-
-   ⚠️ THE SAME TYPE AS `.sf-addgroup-title` BELOW, and deliberately not a second
-   look: that is the heading the Add-section panel puts over every one of its
-   categories, and this menu is the OTHER door a merchant adds something
-   through. One grammar for "these belong together" (rule zero). It is not the
-   same CLASS because the two live in different boxes — a 4px-padded floating
-   menu and a 20px panel column — so only the spacing differs, and it differs
-   because the container does.
-
-   `role="presentation"` on the row: it is a label, not a menuitem, and a
-   keyboard user arrowing through the menu must not land on it. */
-.sf-menugroup-head {
-  display: flex;
-  align-items: baseline;
-  gap: 8px;
-  padding: 9px 9px 5px;
-}
-
-/* ── Footer "Add block" menu — heterogeneous block-type picker ──────────── */
-/* No top padding on the first heading — the menu's own 4px inset already sets
-   it in, and a second inset would leave the first group sitting lower than the
-   rows it names. */
-.sf-menugroup-head:first-child {
-  padding-top: 4px;
-}
-
-/* ── Footer "Add block" menu — heterogeneous block-type picker ──────────── */
-.sf-menugroup-title {
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.07em;
-  text-transform: uppercase;
-  color: var(--sf-muted);
-}
-
-/* ── Footer "Add block" menu — heterogeneous block-type picker ──────────── */
+/* ── Footer "Add block" menu — the shell's DropdownMenu (easel issue 199, step 4) ────── */
+/* The menu, its rows and its group headings are efficient-shell's; the row
+   that opens it is the add card (`.sf-add-card`, the trigger's own look). What
+   stays is a heading's count, quieter than its word. */
 .sf-menugroup-count {
   font-size: 11px;
   color: var(--sf-field-placeholder);
@@ -555,7 +505,7 @@
    the engine itself since efficient-easel 0.80.1: a scene drawn to fill it
    painted over the whole panel before. */
 .sf-addside .es-add-tile-cover {
-  border: 1px solid #edeff4;
+  border: 1px solid var(--sf-line);
 }
 
 /* ── Footer "Add block" menu — heterogeneous block-type picker ──────────── */
@@ -576,42 +526,6 @@
   overflow: hidden;
 }
 
-/* Toast — transient confirmation (e.g. after adding a section) */
-.sf-toast {
-  position: absolute;
-  left: 50%;
-  bottom: 34px;
-  transform: translateX(-50%);
-  z-index: 60;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 11px 17px;
-  border-radius: 11px;
-  background: var(--sf-toast-bg);
-  color: #fff;
-  font-size: 13px;
-  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.3);
-}
-
-.sf-toast-check {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  background: var(--sf-accent);
-  color: #fff;
-  font-size: 11px;
-  flex: none;
-}
-
-/* Error variant — same dark pill, red mark instead of the green check. */
-.sf-toast--error .sf-toast-check {
-  background: var(--sf-danger);
-}
-
 /* ── Center: device-framed preview (wraps Puck.Preview) ──────────────── */
 .sf-center {
   flex: 1;
@@ -766,6 +680,19 @@
   pointer-events: none;
 }
 
+/* A band CUT TO THE ROOM between two blocks (0.106.0): where the gap two
+   sections leave is narrower than the pill, the chrome sizes the band to it
+   (ScreenChrome `previewGapAt`), and the band clips the pill at rest — so the
+   pill, hidden but still taking the pointer, never lies over a block. Hovered,
+   it is drawn whole. */
+.sf-preview-gap--tight {
+  overflow: hidden;
+}
+
+.sf-preview-gap--tight:hover {
+  overflow: visible;
+}
+
 /* ── Canvas "Add section" seams (overlay between preview sections) ──────────
    Absolutely positioned over .sf-preview-host (the iframe's box), one band per
    seam between top-level sections, placed at the boundary Y measured from the
@@ -805,7 +732,7 @@
   padding: 4px;
   border-radius: 999px;
   background: var(--sf-toast-bg);
-  color: #fff;
+  color: var(--sf-on-accent);
   font-family: var(--sf-font);
   font-size: 12px;
   font-weight: 500;
@@ -844,7 +771,7 @@
   height: 18px;
   border-radius: 50%;
   background: var(--sf-accent);
-  color: #fff;
+  color: var(--sf-on-accent);
   font-size: 13px;
   line-height: 1;
   flex: none;
@@ -900,64 +827,6 @@
   color: var(--sf-danger);
 }
 
-/* ── The icon rail: the shared editor-shell EaselRail (`.es-rail`) ───────────
-   The rail markup + base styles live in the `efficient-easel` package (imported via
-   `efficient-easel/rail.css`); the storefront no longer hand-rolls `.sf-rail`.
-   editor-shell ships its own defaults, so we remap the themeable `--es-rail-*`
-   custom properties onto the storefront's own `--sf-*` tokens, which is what
-   keeps the shared rail reading as this editor's chrome rather than as the
-   package's. (One mode only — the editor is deliberately light-only; see the
-   note at the top of this file.)
-   Scoped `.sf-editor .es-rail` (specificity 0,2,0) so it always beats rail.css's
-   base `.es-rail` (0,1,0) whatever order the two stylesheets load in.
-
-   THREE TOKENS ARE DELIBERATELY NOT REMAPPED HERE, and each absence is load-
-   bearing since card 66198 laid the rail into the top bar as a row:
-
-     --es-rail-w        only the COLUMN reads it (`.es-rail { width:
-                        var(--es-rail-w) }`); the row is `width: auto` and sizes
-                        to its buttons, so a remap would be config nothing reads.
-     --es-rail-bg       the row variant re-points these to transparent / none / 0
-     --es-rail-shadow   ON PURPOSE: the bar already has its own surface, and a
-     --es-rail-radius   second white card floating inside it is the bug. This
-                        rule ties with `.es-rail.es-rail-row` on specificity
-                        (0,2,0 both), so setting them here would silently WIN
-                        and put that card back. The rail's surface is the bar's.
-
-   Everything left below is colour the row variant does not touch. */
-.sf-editor .es-rail {
-  --es-rail-fg: var(--sf-muted);
-  --es-rail-hover-bg: var(--sf-hover);
-  --es-rail-hover-fg: var(--sf-text);
-  --es-rail-accent: var(--sf-accent);
-  --es-rail-accent-tint: var(--sf-accent-tint);
-}
-
-/* ── The icon rail: the shared editor-shell EaselRail (`.es-rail`) ───────────
-   The rail markup + base styles live in the `efficient-easel` package (imported via
-   `efficient-easel/rail.css`); the storefront no longer hand-rolls `.sf-rail`.
-   editor-shell ships its own defaults, so we remap the themeable `--es-rail-*`
-   custom properties onto the storefront's own `--sf-*` tokens, which is what
-   keeps the shared rail reading as this editor's chrome rather than as the
-   package's. (One mode only — the editor is deliberately light-only; see the
-   note at the top of this file.)
-   Scoped `.sf-editor .es-rail` (specificity 0,2,0) so it always beats rail.css's
-   base `.es-rail` (0,1,0) whatever order the two stylesheets load in.
-
-   THREE TOKENS ARE DELIBERATELY NOT REMAPPED HERE, and each absence is load-
-   bearing since card 66198 laid the rail into the top bar as a row:
-
-     --es-rail-w        only the COLUMN reads it (`.es-rail { width:
-                        var(--es-rail-w) }`); the row is `width: auto` and sizes
-                        to its buttons, so a remap would be config nothing reads.
-     --es-rail-bg       the row variant re-points these to transparent / none / 0
-     --es-rail-shadow   ON PURPOSE: the bar already has its own surface, and a
-     --es-rail-radius   second white card floating inside it is the bug. This
-                        rule ties with `.es-rail.es-rail-row` on specificity
-                        (0,2,0 both), so setting them here would silently WIN
-                        and put that card back. The rail's surface is the bar's.
-
-   Everything left below is colour the row variant does not touch. */
 /* THE RAIL COLUMN (owner, 2026-09-04: "the top control panel and the panel
    below it" must read as one) — the cluster exactly the left panel's width,
    carrying its hairline up through the bar, the buttons spread across it (his
@@ -1029,7 +898,7 @@
 .sf-device-scope {
   margin: 8px 0 2px;
   padding: 7px 10px;
-  border-radius: 7px;
+  border-radius: var(--radius-md);
   background: var(--sf-chip-bg);
   font-size: 11.5px;
   line-height: 1.35;
@@ -1078,8 +947,7 @@
    Every side panel's head is efficient-easel's `InspectorHead`; these two
    are the pieces the website editor adds to it. The hairline parts a panel's
    own tools from the hide button that ends every head, and a mode's way out
-   is a word ("Done", "Cancel") on the engine's ghost button, drawn to the
-   28px of the head's icon buttons so the row keeps one height. */
+   is a word ("Done", "Cancel") on the shell's small Button. */
 .sf-head-divider {
   width: 1px;
   height: 16px;
@@ -1088,26 +956,6 @@
   flex: none;
 }
 
-/* ── Side panel heads (components/SidePanelHead) ─────────────────────────
-   Every side panel's head is efficient-easel's `InspectorHead`; these two
-   are the pieces the website editor adds to it. The hairline parts a panel's
-   own tools from the hide button that ends every head, and a mode's way out
-   is a word ("Done", "Cancel") on the engine's ghost button, drawn to the
-   28px of the head's icon buttons so the row keeps one height. */
-.es-btn-ghost.sf-head-textbtn {
-  height: 28px;
-  padding: 0 10px;
-  font-size: 12.5px;
-  border-radius: 7px;
-  white-space: nowrap;
-}
-
-/* ── Side panel heads (components/SidePanelHead) ─────────────────────────
-   Every side panel's head is efficient-easel's `InspectorHead`; these two
-   are the pieces the website editor adds to it. The hairline parts a panel's
-   own tools from the hide button that ends every head, and a mode's way out
-   is a word ("Done", "Cancel") on the engine's ghost button, drawn to the
-   28px of the head's icon buttons so the row keeps one height. */
 /* A hidden side panel's strip (components/SidePanelHead `PanelShowStrip`):
    one Show panel button where the panel was. It IS a side panel — the
    engine's `.es-sidepanel--left|right` gives it the panels' ground and the

package/dist/screen/words.d.ts

@@ -5,7 +5,9 @@
  * the Layers tree's frame round the document's nodes (0.103.0): its first
  * row, the pinned groups, the band of sections and the band's "+". And
  * (0.105.0) the Add panel's words (`add`), the main button's, and what the
- * block keys say when a block is copied or will not paste.
+ * block keys say when a block is copied or will not paste. And (0.106.0) the
+ * canvas's empty-slot cell, the rail's Media button, and the left panel's
+ * accessible name and its grip's.
  *
  * They came with the screen from the website editor, written into the
  * provider, the mount and the notice; a second host (the campaign designer)
@@ -130,6 +132,20 @@ type ScreenWords = {
     }) => string;
     /** The Add panel's words (0.105.0). */
     add: ScreenAddWords;
+    /** The cell over an EMPTY slot on the canvas, after its "+" (0.106.0): the
+     *  campaign designer's "Add a block". */
+    canvasAddBlock: string;
+    /** The rail's button to the media library (0.106.0). Owner ruling R21
+     *  (Victor Mau, 2026-10-09): the campaign designer's rail reads Add,
+     *  Layers, Email styles, Media. The panel's own head keeps its word
+     *  (`EaselStrings.chrome.mediaLibrary`). */
+    railMedia: string;
+    /** The left panel's accessible name (0.106.0): the panel is a labelled
+     *  `<aside>`, whichever view it shows. */
+    leftPanel: string;
+    /** The left panel's resize grip's accessible name (0.106.0). It said
+     *  "Resize Sections panel", from when the tree was the panel's one view. */
+    resizeLeftPanel: string;
 };
 declare const DEFAULT_SCREEN_WORDS: ScreenWords;
 

package/dist/screen/words.js

@@ -1 +1 @@
-export{DEFAULT_SCREEN_ADD_WORDS,DEFAULT_SCREEN_WORDS}from"../chunk-PQXIFBDY.js";
+export{DEFAULT_SCREEN_ADD_WORDS,DEFAULT_SCREEN_WORDS}from"../chunk-E2O2MRZR.js";