efficient-easel 18.2.0 → 19.0.0

package/dist/screen/lib/media-panel.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ComponentType, ReactNode } from 'react';
-import { H as HostPickedMedia, E as EaselHost } from '../../host-epHo7r8P.js';
+import { H as HostPickedMedia, E as EaselHost } from '../../ScreenDocumentContext-D55vIrG3.js';
 import '../../blocks/index.js';
 import '../../types-Cq53lL8d.js';
 import '../../data/index.js';
@@ -8,9 +8,12 @@ import '../../types-41704JE4.js';
 import '../../resolve-D68pb3Bx.js';
 import '../../plan-CZS902DV.js';
 import './document-contract.js';
+import './document-switch.js';
+import '../../engine-CvXpFE86.js';
+import '../../edit-lock/index.js';
+import './admin-bridge.js';
 import './session.js';
 import './backend-error.js';
-import '../../edit-lock/index.js';
 import './host-chrome.js';
 import './links/link-filters.js';
 import 'efficient-shell/ui';
@@ -18,42 +21,41 @@ import './document-hooks.js';
 import './section-template-types.js';
 import './puck/content-tree.js';
 import './shared-section-types.js';
-import './document-switch.js';
-import '../../engine-CvXpFE86.js';
-import './admin-bridge.js';
 
 /**
- * The editor's MEDIA PANEL — the host's media library, drawn in the editor's own
- * left panel beside Pages, Layers and Site styles.
+ * The editor's MEDIA POPUP — the host's media library, opened from the editor
+ * as one large popup (harness UI-20, owner decision Lewis 2026-10-23).
  *
  * The editor owns no media library and never will: the library is the host's
  * (the admin portal's Media Library, one component wherever it is shown). What
- * the editor owns is the PLACE it shows — a left-panel view its rail opens — and
- * the request that turns that view into a chooser for one field.
+ * the editor owns is WHEN it shows and for whom: the request that turns it into
+ * a chooser for one field, and the rail's browse. `components/MediaPopup`
+ * draws the host's component ONCE, at the screen's root, and the host draws it
+ * as its popup (the shell's `Dialog`). The names here still say "panel": the
+ * library sat in the editor's left panel until 2026-10-23, and the hosts import
+ * these names.
  *
- * It replaces a window. The rail button and every image field used to ask the
- * host to open a separate "Media library" picker window over the editor
- * (`storefront-editor:open-media-picker`), which floated beside the host's own
- * Media Library window under the same name, built from different code, and could
- * be sent behind the editor while the field that asked waited on it (harness
- * UI-20, UI-21). A host that supplies a panel gets this instead; a host that
- * does not keeps the message, so nothing it relies on changes underneath it.
+ *   • BROWSING — the rail's Media opens it with no field (`browsing`): look,
+ *     upload, tidy, drag a file onto the canvas. `onClose` ends it.
+ *   • PICKING — a field calls `requestMediaPick` (lib/media-picker). With a
+ *     popup here, that becomes a request to THIS provider's pick store: the
+ *     popup opens for that field (`pick`), the host calls `onPick`, and the
+ *     field gets the media. `onClose` settles it `null`. A field asking while
+ *     the merchant browses turns the popup into its chooser, and its answer
+ *     ends the browse with it.
  *
- *   • BROWSING — the rail opens the "media" left view. The host's panel shows
- *     the library to look through, upload to, tidy. `pick` is null.
- *   • PICKING — a field calls `requestMediaPick` (lib/media-picker). With
- *     a panel here, that becomes a request to THIS provider's pick store: the
- *     chrome lays the panel over the left panel in pick mode, the host's panel
- *     calls `onPick`, and the field gets the media. Leaving pick mode any other
- *     way (the panel's Cancel, a rail button, closing the panel) settles it
- *     `null`.
+ * It replaced a window, and then a panel. The rail button and every image
+ * field once asked the host to open a separate "Media library" window over the
+ * editor (`storefront-editor:open-media-picker`, harness UI-20, UI-21); a host
+ * that supplies no popup still gets that message, so nothing it relies on
+ * changes underneath it.
  *
  * ONE PENDING PICK PER PROVIDER (0.103.0). Until then the pending pick was
  * module state, one for the page — right while one editor is mounted, and
  * wrong the moment two are (the admin's website editor and campaign designer):
- * a field in one laid the other's panel over its own left panel too, and a
- * Cancel in either settled the other's field. Each provider now keeps its own
- * {@link MediaPickStore}; the chrome under it reads that one, and a field's
+ * a field in one opened the other's library too, and a Cancel in either
+ * settled the other's field. Each provider now keeps its own
+ * {@link MediaPickStore}; the screen under it reads that one, and a field's
  * request finds it by the HOST the field asks through (`requestMediaPick(host,
  * …)` — one host per mounted editor, lib/host), so no prop or context has to
  * reach the field's click handler. A request whose host no provider sits under
@@ -78,15 +80,36 @@ interface MediaPickRequest {
      */
     options?: Record<string, unknown>;
 }
-/** The props the host's panel component is drawn with. */
+/** The props the host's popup component is drawn with. It is drawn always; it
+ *  is OPEN while `pick` or `browsing` is set. */
 interface MediaPanelProps {
-    /** The field choosing right now, or null while the merchant is browsing. */
+    /** The field choosing right now, or null. Wins over `browsing`. */
     pick: MediaPickRequest | null;
-    /** Answer the field. Ignored while browsing. */
+    /** The rail opened the library with no field. */
+    browsing: boolean;
+    /** Answer the field. Ignored while only browsing. */
     onPick: (media: HostPickedMedia) => void;
+    /** Close it: the field (if any) gets no choice, and the browse ends. */
+    onClose: () => void;
 }
-/** The host's media library, as a component the editor draws in its panel. */
+/** The host's media library, as the component the editor draws as its popup. */
 type MediaPanelComponent = ComponentType<MediaPanelProps>;
+/** A file dragged out of the host's popup onto the canvas, as the shell's
+ *  `readMediaFileDrag` reads it. */
+interface MediaPlacedFile {
+    id: string;
+    url: string;
+    kind: "image" | "video";
+    name: string;
+}
+/**
+ * What a file dropped on the canvas becomes in this host, before the layer
+ * places it: the host's pick path, the same answer a pick of that file gives
+ * (a website takes a file another website holds by copying it in, as it always
+ * has; owner 2026-10-23, the files may be copied per website). Null: the file
+ * cannot be used here, and nothing is placed. Absent: the file as it came.
+ */
+type MediaPlace = (file: MediaPlacedFile) => Promise<HostPickedMedia | null>;
 /**
  * One editor's pending pick (0.103.0): what its panel is choosing for, and who
  * waits on the answer. A {@link MediaPanelProvider} makes one for itself.
@@ -105,6 +128,12 @@ interface MediaPickStore {
     settle(requestId: string, media: HostPickedMedia | null): void;
     /** Leave pick mode without a choice, whatever is being chosen. */
     cancel(): void;
+    /** Whether the rail opened the library with no field. */
+    browsing(): boolean;
+    /** Open the library with no field (the rail's Media). */
+    browse(): void;
+    /** Close it: cancel the pick, end the browse. */
+    close(): void;
     subscribe(listener: () => void): () => void;
 }
 declare function createMediaPickStore(): MediaPickStore;
@@ -112,10 +141,15 @@ declare function createMediaPickStore(): MediaPickStore;
  *  window: fields ask the host with `open-media-picker`. Sit it under the
  *  editor's `EaselHostProvider`, as the website's frame does: that host is
  *  how a field's request finds this provider among several. */
-declare function MediaPanelProvider({ panel, children }: {
+declare function MediaPanelProvider({ panel, place, children, }: {
     panel: MediaPanelComponent | null;
+    /** What a file dropped from the popup becomes in this host (`MediaPlace`). */
+    place?: MediaPlace | null;
     children: ReactNode;
 }): react.JSX.Element;
+/** What a file dropped from the popup becomes in this editor's host, or null
+ *  (the file as it came). */
+declare function useMediaPlace(): MediaPlace | null;
 /** The host's panel for the editor this renders in, or null. */
 declare function useMediaPanel(): MediaPanelComponent | null;
 /**
@@ -139,14 +173,17 @@ declare function requestPanelPick(request: MediaPickRequest): Promise<HostPicked
  *  stale id — an answer for a request already superseded — does nothing. */
 declare function settlePanelPick(requestId: string, media: HostPickedMedia | null): void;
 /** Leave the page's pick mode without a choice, whatever is being chosen.
- *  Under a provider, `useCancelPanelPick` leaves that editor's. */
+ *  Under a provider, `useCloseMediaPopup` closes that editor's. */
 declare function cancelPanelPick(): void;
 /** The field the panel is choosing for, or null while nothing is — in the
  *  editor this renders in. */
 declare function usePanelPick(): MediaPickRequest | null;
-/** Leave THIS editor's pick mode without a choice (0.103.0): a stable
- *  function, for the chrome's Escape, rail and panel-closed paths. */
-declare function useCancelPanelPick(): () => void;
+/** Whether THIS editor's library is open with no field (the rail's browse). */
+declare function useMediaBrowsing(): boolean;
+/** Open THIS editor's library with no field: the rail's Media. A stable function. */
+declare function useOpenMediaBrowse(): () => void;
+/** Close THIS editor's library: the field gets no choice, the browse ends. */
+declare function useCloseMediaPopup(): () => void;
 /**
  * A change of selection leaves pick mode (0.103.0, `ScreenParts
  * .pickFollowsSelection`): with `follows`, the field still waiting when
@@ -156,4 +193,4 @@ declare function useCancelPanelPick(): () => void;
  */
 declare function usePickFollowsSelection(follows: boolean, selection: unknown): void;
 
-export { type MediaPanelComponent, type MediaPanelProps, MediaPanelProvider, type MediaPickRequest, type MediaPickStore, cancelPanelPick, createMediaPickStore, hasMediaPanel, mediaPickStoreFor, requestPanelPick, settlePanelPick, useCancelPanelPick, useMediaPanel, usePanelPick, usePickFollowsSelection };
+export { type MediaPanelComponent, type MediaPanelProps, MediaPanelProvider, type MediaPickRequest, type MediaPickStore, type MediaPlace, type MediaPlacedFile, cancelPanelPick, createMediaPickStore, hasMediaPanel, mediaPickStoreFor, requestPanelPick, settlePanelPick, useCloseMediaPopup, useMediaBrowsing, useMediaPanel, useMediaPlace, useOpenMediaBrowse, usePanelPick, usePickFollowsSelection };

package/dist/screen/lib/media-panel.js

@@ -1 +1 @@
-export{MediaPanelProvider,cancelPanelPick,createMediaPickStore,hasMediaPanel,mediaPickStoreFor,requestPanelPick,settlePanelPick,useCancelPanelPick,useMediaPanel,usePanelPick,usePickFollowsSelection}from"../../chunk-R6WTQWAC.js";import"../../chunk-U3JP4VGF.js";
+export{MediaPanelProvider,cancelPanelPick,createMediaPickStore,hasMediaPanel,mediaPickStoreFor,requestPanelPick,settlePanelPick,useCloseMediaPopup,useMediaBrowsing,useMediaPanel,useMediaPlace,useOpenMediaBrowse,usePanelPick,usePickFollowsSelection}from"../../chunk-LNHT2KPX.js";import"../../chunk-U3JP4VGF.js";

package/dist/screen/lib/media-picker.d.ts

@@ -1,4 +1,4 @@
-import { H as HostPickedMedia, E as EaselHost } from '../../host-epHo7r8P.js';
+import { H as HostPickedMedia, E as EaselHost } from '../../ScreenDocumentContext-D55vIrG3.js';
 import 'react';
 import '../../blocks/index.js';
 import '../../types-Cq53lL8d.js';
@@ -7,9 +7,12 @@ import '../../types-41704JE4.js';
 import '../../resolve-D68pb3Bx.js';
 import '../../plan-CZS902DV.js';
 import './document-contract.js';
+import './document-switch.js';
+import '../../engine-CvXpFE86.js';
+import '../../edit-lock/index.js';
+import './admin-bridge.js';
 import './session.js';
 import './backend-error.js';
-import '../../edit-lock/index.js';
 import './host-chrome.js';
 import './links/link-filters.js';
 import 'efficient-shell/ui';
@@ -17,9 +20,6 @@ import './document-hooks.js';
 import './section-template-types.js';
 import './puck/content-tree.js';
 import './shared-section-types.js';
-import './document-switch.js';
-import '../../engine-CvXpFE86.js';
-import './admin-bridge.js';
 
 /**
  * Editor media-picker bridge — the one call every media slot makes to choose an

package/dist/screen/lib/media-picker.js

@@ -1 +1 @@
-export{requestMediaPick,resolveMediaPick}from"../../chunk-KG7RJWOK.js";import"../../chunk-R6WTQWAC.js";import"../../chunk-U3JP4VGF.js";
+export{requestMediaPick,resolveMediaPick}from"../../chunk-RYNBSKE7.js";import"../../chunk-LNHT2KPX.js";import"../../chunk-U3JP4VGF.js";

package/dist/screen/lib/puck/device-fields.js

@@ -1 +1 @@
-export{DEVICE_FIELD_MARKER,DEVICE_HIDDEN_ATTR,DEVICE_NOTE,deviceField,deviceMetaOf,deviceNote,shownTier,withoutDeviceGate}from"../../../chunk-XHHVMAGM.js";import"../../../chunk-7F52SZOI.js";import"../../../chunk-C2RHV42O.js";import"../../../chunk-MFIRYGHW.js";import"../../../chunk-BSPCSC45.js";
+export{DEVICE_FIELD_MARKER,DEVICE_HIDDEN_ATTR,DEVICE_NOTE,deviceField,deviceMetaOf,deviceNote,shownTier,withoutDeviceGate}from"../../../chunk-FGYJ5DJY.js";import"../../../chunk-7F52SZOI.js";import"../../../chunk-23DYNW6S.js";import"../../../chunk-MFIRYGHW.js";import"../../../chunk-BSPCSC45.js";

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

@@ -11,12 +11,12 @@ import '../../../types-41704JE4.js';
 import '../../../resolve-D68pb3Bx.js';
 import '../../../plan-CZS902DV.js';
 import '../../../watch-BTYOJpQU.js';
-import '../../../types-DT8ywrFQ.js';
+import '../../../types-B3iSHX-w.js';
 import '../../../types-Cy7rdmXt.js';
 import '../../../wordFit-7XpmhcaW.js';
 import '../../../edit-lock/index.js';
-import '../../../panelWidths-D9hTLR25.js';
-import '../../../CanvasDragLayer-dZCPbQCP.js';
+import '../../../panelWidths-DgQXiPXU.js';
+import '../../../CanvasDragLayer-ARfaivCu.js';
 import '../../../session-DSQFmIvx.js';
 import '../../../words-CvwYvkJm.js';
 import '../../../types-Bqq6ya0y.js';
@@ -27,16 +27,16 @@ import '../section-template-types.js';
 import './content-tree.js';
 import '../shared-section-types.js';
 import './block-choice.js';
-import '../../../host-epHo7r8P.js';
+import '../../../ScreenDocumentContext-D55vIrG3.js';
 import '../document-contract.js';
+import '../document-switch.js';
+import '../../../engine-CvXpFE86.js';
+import '../admin-bridge.js';
 import '../session.js';
 import '../backend-error.js';
 import '../host-chrome.js';
 import '../links/link-filters.js';
 import '../document-hooks.js';
-import '../document-switch.js';
-import '../../../engine-CvXpFE86.js';
-import '../admin-bridge.js';
 import './add-target-types.js';
 import './slot-section-spec.js';
 

package/dist/screen/lib/puck/style-clipboard.js

@@ -1 +1 @@
-export{copyNodeStyle,nodeStyleRows,planNodePaste,shopFieldKind,siteStyleScope,styleClipboardOf}from"../../../chunk-VEZPDGDQ.js";import"../../../chunk-LER7RKTO.js";import"../../../chunk-XHHVMAGM.js";import"../../../chunk-7F52SZOI.js";import"../../../chunk-MQNBD6AB.js";import"../../../chunk-C2RHV42O.js";import"../../../chunk-V7U33NF2.js";import"../../../chunk-6WY6ZXJG.js";import"../../../chunk-DUVRZ456.js";import"../../../chunk-BPXEFVSQ.js";import"../../../chunk-MFIRYGHW.js";import"../../../chunk-BSPCSC45.js";
+export{copyNodeStyle,nodeStyleRows,planNodePaste,shopFieldKind,siteStyleScope,styleClipboardOf}from"../../../chunk-JBOSEHIX.js";import"../../../chunk-LER7RKTO.js";import"../../../chunk-FGYJ5DJY.js";import"../../../chunk-7F52SZOI.js";import"../../../chunk-MQNBD6AB.js";import"../../../chunk-V7U33NF2.js";import"../../../chunk-6WY6ZXJG.js";import"../../../chunk-23DYNW6S.js";import"../../../chunk-DUVRZ456.js";import"../../../chunk-BPXEFVSQ.js";import"../../../chunk-MFIRYGHW.js";import"../../../chunk-BSPCSC45.js";

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

@@ -1 +1 @@
-export{useSectionOps}from"../../../chunk-SNB4LQMK.js";import"../../../chunk-W6SDWCOL.js";import"../../../chunk-R6WTQWAC.js";import"../../../chunk-U3JP4VGF.js";import"../../../chunk-PLVEGYK6.js";import"../../../chunk-QEAUF632.js";import"../../../chunk-TBY3DFKS.js";import"../../../chunk-5ZBV5RA6.js";import"../../../chunk-BPXEFVSQ.js";import"../../../chunk-A6Z4SD3I.js";import"../../../chunk-K56YDHYQ.js";import"../../../chunk-XWFH2NHZ.js";import"../../../chunk-YRLPFZW3.js";import"../../../chunk-X3TYRF5V.js";import"../../../chunk-BALFHI3G.js";import"../../../chunk-RC25EGHD.js";import"../../../chunk-KFV7N2DJ.js";import"../../../chunk-23VM4PMV.js";import"../../../chunk-B4JN227A.js";import"../../../chunk-2XMHLXMA.js";import"../../../chunk-G3GWAP5R.js";import"../../../chunk-WRFD4EXD.js";import"../../../chunk-36LVP5WD.js";import"../../../chunk-MFIRYGHW.js";import"../../../chunk-67GNT6PF.js";import"../../../chunk-P2VEMZH5.js";import"../../../chunk-X4T6JT3M.js";import"../../../chunk-KRXQM65X.js";import"../../../chunk-NKB3KVAB.js";
+export{useSectionOps}from"../../../chunk-LUBJKUVV.js";import"../../../chunk-J4MHNAED.js";import"../../../chunk-LNHT2KPX.js";import"../../../chunk-U3JP4VGF.js";import"../../../chunk-PLVEGYK6.js";import"../../../chunk-CPFDJMFD.js";import"../../../chunk-TBY3DFKS.js";import"../../../chunk-5ZBV5RA6.js";import"../../../chunk-BPXEFVSQ.js";import"../../../chunk-A6Z4SD3I.js";import"../../../chunk-K56YDHYQ.js";import"../../../chunk-XWFH2NHZ.js";import"../../../chunk-YRLPFZW3.js";import"../../../chunk-BALFHI3G.js";import"../../../chunk-X3TYRF5V.js";import"../../../chunk-RC25EGHD.js";import"../../../chunk-KFV7N2DJ.js";import"../../../chunk-23VM4PMV.js";import"../../../chunk-KRL3IUV3.js";import"../../../chunk-2XMHLXMA.js";import"../../../chunk-G3GWAP5R.js";import"../../../chunk-WRFD4EXD.js";import"../../../chunk-36LVP5WD.js";import"../../../chunk-MFIRYGHW.js";import"../../../chunk-67GNT6PF.js";import"../../../chunk-P2VEMZH5.js";import"../../../chunk-X4T6JT3M.js";import"../../../chunk-KRXQM65X.js";import"../../../chunk-NKB3KVAB.js";

package/dist/screen/lib/save-status.d.ts

@@ -1,11 +1,11 @@
 import { A as AutosaveSnapshot } from '../../engine-CvXpFE86.js';
-import { a as SaveIconState } from '../../types-DT8ywrFQ.js';
+import { a as SaveIconState } from '../../types-B3iSHX-w.js';
 import { ScreenSaveStatusWords } from '../words.js';
 import '../../types-Cy7rdmXt.js';
 import '../../wordFit-7XpmhcaW.js';
 import 'react';
 import '../../edit-lock/index.js';
-import '../../panelWidths-D9hTLR25.js';
+import '../../panelWidths-DgQXiPXU.js';
 
 /**
  * WHAT THE SAVE IS DOING, AS ONE ANSWER (8.0.0, card [DESIGN] A Clearer Save

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-DT8ywrFQ.js';
+import { D as DeviceOption } from '../../types-B3iSHX-w.js';
 import { P as Place } from '../../types-41704JE4.js';
-import { M as MeasuredCanvas, C as CanvasDragModel } from '../../CanvasDragLayer-dZCPbQCP.js';
+import { M as MeasuredCanvas, C as CanvasDragModel } from '../../CanvasDragLayer-ARfaivCu.js';
 import { E as EaselContextMenuItem } from '../../types-BsyPh6EW.js';
 import { E as EaselRailItem } from '../../types-Cy7rdmXt.js';
 import { StyleRow } from '../../style-clipboard/index.js';
 import { T as TreeRowMark } from '../../types-Bqq6ya0y.js';
 import { AddKey } from '../components/AddSidePanel.js';
-import { k as AnyScreenTarget } from '../../host-epHo7r8P.js';
+import { k as AnyScreenTarget } from '../../ScreenDocumentContext-D55vIrG3.js';
 import { HostProduct } from './host-chrome.js';
 import { EaselSession } from './session.js';
 import { SharedSectionUse, SharedSection } from './shared-section-types.js';
@@ -21,7 +21,7 @@ import '../../data/index.js';
 import '../../resolve-D68pb3Bx.js';
 import '../../plan-CZS902DV.js';
 import '../../edit-lock/index.js';
-import '../../panelWidths-D9hTLR25.js';
+import '../../panelWidths-DgQXiPXU.js';
 import '../../session-DSQFmIvx.js';
 import '../../words-CvwYvkJm.js';
 import '../../wordFit-7XpmhcaW.js';
@@ -34,8 +34,8 @@ import './document-contract.js';
 import './document-switch.js';
 import '../../engine-CvXpFE86.js';
 import './admin-bridge.js';
-import './backend-error.js';
 import './links/link-filters.js';
+import './backend-error.js';
 import './document-hooks.js';
 import './puck/slot-section-spec.js';
 
@@ -496,10 +496,11 @@ interface ScreenBridges {
      * view kept from another document may be one this document does not have,
      * and the panel then shows the screen's Layers. The layer answers, because
      * some of the views are its own and which of them a document has is its to
-     * know; the screen says whether its Media view is there to show
-     * (`hasMedia`), so there is ONE fallback and not one on each side.
+     * know. The screen has no media view (the media library is a popup,
+     * harness UI-20): a stored "media" view resolves to Layers like any other
+     * view this document does not have.
      */
-    resolveLeftView?: (view: string, hasMedia: boolean) => string;
+    resolveLeftView?: (view: string) => string;
     /**
      * A tool of the layer's own at the foot of the Layers tree, under the last
      * row: something that reads the whole document and is not a row of it.
@@ -947,6 +948,44 @@ interface ScreenDragItem {
         nodeId: string;
         slot: string;
     };
+    /** A file carried out of the host's media popup (`ScreenCanvasDrag.media`):
+     *  `add` is what it becomes between things, and a drop on a thing that
+     *  takes it puts it there instead. */
+    media?: true;
+}
+/** A file from the host's media library, dropped on the canvas (harness
+ *  UI-20, 2026-10-23), as the host's pick path gave it back (`MediaPlace`):
+ *  `url` is what draws. */
+interface ScreenMediaFile {
+    id: string;
+    url: string;
+    kind: "image" | "video";
+    name: string;
+}
+/**
+ * A FILE FROM THE MEDIA POPUP, DROPPED ON THE CANVAS (`ScreenCanvasDrag.media`,
+ * harness UI-20, owner decision Lewis 2026-10-23). The drag is the screen's:
+ * it hears a file carried out of the host's popup, offers the places a new
+ * picture may go — the lines Add's tiles get — and outlines a thing the file
+ * may land ON. What a picture IS in this document is the layer's; what the
+ * file becomes in the host first is the host's (`MediaPanelProvider` `place`,
+ * its pick path: a website copies in a file another website holds).
+ */
+interface ScreenMediaDrop {
+    /** What a file dropped BETWEEN things becomes: Add's entry for the layer's
+     *  picture block, offered at exactly the places Add would offer it. */
+    adds: {
+        kind: "section" | "block";
+        type: string;
+    };
+    /** May a file land ON this node, its picture replaced by it? */
+    takes: (node: ScreenNode) => boolean;
+    /** The node's props with the file as its picture. */
+    replace: (node: ScreenNode, file: ScreenMediaFile) => Record<string, unknown>;
+    /** A new node of `adds` holding the file, for a drop between things, made
+     *  with what the screen lends a rule that builds a node (its defaults, its
+     *  ids). */
+    create: (file: ScreenMediaFile, maker: ScreenNodeMaker) => ScreenNode;
 }
 /**
  * What the screen tells a layer's canvas drag each time it asks
@@ -1014,6 +1053,9 @@ interface ScreenCanvasDrag {
     /** A handle CLICKED, not dragged: select what it names. Handed the screen's
      *  own (`base`: the node, as a press on its row selects it). Absent: `base`. */
     pick?: (item: ScreenDragItem, base: (item: ScreenDragItem) => void, context: ScreenCanvasDragContext) => void;
+    /** A file carried out of the host's media popup lands on the canvas
+     *  (`ScreenMediaDrop`). Absent: the canvas takes no such file. */
+    media?: ScreenMediaDrop;
 }
 /** What a layer's head over the canvas is handed (`ScreenParts.CanvasHead`,
  *  0.105.0): the device the canvas is drawn as, so it can say what is the
@@ -1280,8 +1322,7 @@ interface ScreenStyleClipboard {
 interface ScreenParts {
     /**
      * The name a panel's head gives what is being edited — the website's name,
-     * a campaign's — as the hook the head calls. The media panel's context line
-     * reads it (components/MediaSidePanel), through `useScreenOwnerName`.
+     * a campaign's — as the hook the head calls, through `useScreenOwnerName`.
      */
     useOwnerName?: () => string;
     /**
@@ -1519,4 +1560,4 @@ declare function useScreenCanvasTarget(): CanvasTarget | null;
  *  engine's plain rows for the selection. */
 declare function useScreenInspectorPanel(): ComponentType<ScreenInspectorPanelProps>;
 
-export { type NodeDefaults, SELECTION_MODE, 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 ScreenMainAction, type ScreenMenuItem, type ScreenMenuRows, type ScreenNewNode, type ScreenNode, type ScreenNodeActions, type ScreenNodeLevel, type ScreenNodeMaker, type ScreenPartMode, type ScreenParts, ScreenPartsProvider, type ScreenPinnedBand, type ScreenPinnedNodes, type ScreenRailItem, type ScreenSelector, type ScreenSharedSections, type ScreenSlot, type ScreenSlotAction, type ScreenSlotMode, type ScreenStyleClipboard, type ScreenStyleDocument, type ScreenStylePastePlan, type ScreenToastExtra, type ScreenTree, type ScreenTreeFolds, type ScreenTreeRows, isPinnedFirst, isPinnedLast, isSlotMode, sameInspectorMode, screenSlotsOf, useScreenBlockLook, useScreenBlockRules, useScreenBridges, useScreenCanvasDrag, useScreenCanvasFrame, useScreenCanvasHead, useScreenCanvasTarget, useScreenDevices, useScreenDocumentLabel, useScreenDocumentPass, useScreenInspectorPanel, useScreenLeftView, useScreenNodeKeys, useScreenNotify, useScreenOwnerName, useScreenParts, useScreenPickFollowsSelection, useScreenPinned, useScreenSaveSwitch, useScreenStorageNamespace, useScreenStyleClipboard, useStandaloneScreenBridges };
+export { type NodeDefaults, SELECTION_MODE, 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 ScreenMainAction, type ScreenMediaDrop, type ScreenMediaFile, type ScreenMenuItem, type ScreenMenuRows, type ScreenNewNode, type ScreenNode, type ScreenNodeActions, type ScreenNodeLevel, type ScreenNodeMaker, type ScreenPartMode, type ScreenParts, ScreenPartsProvider, type ScreenPinnedBand, type ScreenPinnedNodes, type ScreenRailItem, type ScreenSelector, type ScreenSharedSections, type ScreenSlot, type ScreenSlotAction, type ScreenSlotMode, type ScreenStyleClipboard, type ScreenStyleDocument, type ScreenStylePastePlan, type ScreenToastExtra, type ScreenTree, type ScreenTreeFolds, type ScreenTreeRows, isPinnedFirst, isPinnedLast, isSlotMode, sameInspectorMode, screenSlotsOf, 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,useScreenBlockLook,useScreenBlockRules,useScreenBridges,useScreenCanvasDrag,useScreenCanvasFrame,useScreenCanvasHead,useScreenCanvasTarget,useScreenDevices,useScreenDocumentLabel,useScreenDocumentPass,useScreenInspectorPanel,useScreenLeftView,useScreenNodeKeys,useScreenNotify,useScreenOwnerName,useScreenParts,useScreenPickFollowsSelection,useScreenPinned,useScreenSaveSwitch,useScreenStorageNamespace,useScreenStyleClipboard,useStandaloneScreenBridges}from"../../chunk-W6SDWCOL.js";import"../../chunk-R6WTQWAC.js";import"../../chunk-U3JP4VGF.js";import"../../chunk-PLVEGYK6.js";import"../../chunk-QEAUF632.js";import"../../chunk-TBY3DFKS.js";import"../../chunk-5ZBV5RA6.js";import"../../chunk-BPXEFVSQ.js";import"../../chunk-A6Z4SD3I.js";import"../../chunk-K56YDHYQ.js";import"../../chunk-XWFH2NHZ.js";import"../../chunk-YRLPFZW3.js";import"../../chunk-X3TYRF5V.js";import"../../chunk-BALFHI3G.js";import"../../chunk-RC25EGHD.js";import"../../chunk-KFV7N2DJ.js";import"../../chunk-23VM4PMV.js";import"../../chunk-B4JN227A.js";import"../../chunk-2XMHLXMA.js";import"../../chunk-G3GWAP5R.js";import"../../chunk-WRFD4EXD.js";import"../../chunk-36LVP5WD.js";import"../../chunk-MFIRYGHW.js";import"../../chunk-67GNT6PF.js";import"../../chunk-P2VEMZH5.js";import"../../chunk-X4T6JT3M.js";import"../../chunk-KRXQM65X.js";import"../../chunk-NKB3KVAB.js";
+export{SELECTION_MODE,ScreenCanvasTargetProvider,ScreenPartsProvider,isPinnedFirst,isPinnedLast,isSlotMode,sameInspectorMode,screenSlotsOf,useScreenBlockLook,useScreenBlockRules,useScreenBridges,useScreenCanvasDrag,useScreenCanvasFrame,useScreenCanvasHead,useScreenCanvasTarget,useScreenDevices,useScreenDocumentLabel,useScreenDocumentPass,useScreenInspectorPanel,useScreenLeftView,useScreenNodeKeys,useScreenNotify,useScreenOwnerName,useScreenParts,useScreenPickFollowsSelection,useScreenPinned,useScreenSaveSwitch,useScreenStorageNamespace,useScreenStyleClipboard,useStandaloneScreenBridges}from"../../chunk-J4MHNAED.js";import"../../chunk-LNHT2KPX.js";import"../../chunk-U3JP4VGF.js";import"../../chunk-PLVEGYK6.js";import"../../chunk-CPFDJMFD.js";import"../../chunk-TBY3DFKS.js";import"../../chunk-5ZBV5RA6.js";import"../../chunk-BPXEFVSQ.js";import"../../chunk-A6Z4SD3I.js";import"../../chunk-K56YDHYQ.js";import"../../chunk-XWFH2NHZ.js";import"../../chunk-YRLPFZW3.js";import"../../chunk-BALFHI3G.js";import"../../chunk-X3TYRF5V.js";import"../../chunk-RC25EGHD.js";import"../../chunk-KFV7N2DJ.js";import"../../chunk-23VM4PMV.js";import"../../chunk-KRL3IUV3.js";import"../../chunk-2XMHLXMA.js";import"../../chunk-G3GWAP5R.js";import"../../chunk-WRFD4EXD.js";import"../../chunk-36LVP5WD.js";import"../../chunk-MFIRYGHW.js";import"../../chunk-67GNT6PF.js";import"../../chunk-P2VEMZH5.js";import"../../chunk-X4T6JT3M.js";import"../../chunk-KRXQM65X.js";import"../../chunk-NKB3KVAB.js";

package/dist/screen/screen.css

@@ -678,10 +678,11 @@
    carrying its hairline up through the bar, the buttons spread across it (his
    option A, spread evenly), and the arrow under the open panel's icon — is editor-shell's
    `.es-cluster--rail` (efficient-easel/chrome.css), lifted from this sheet with its
-   `flex: none` and its clip-path triangle (redesign 2a). ⚠️ `MIN_PANEL_W` 220 is
-   still load-bearing on it: six 34px buttons fill 204 exactly, and a SEVENTH
-   rail button does not fit at 220. `scripts/test-editor-rail-in-topbar.ts`
-   holds that arithmetic. */
+   `flex: none` and its clip-path triangle (redesign 2a). ⚠️ The LEFT panel's
+   floor (`MIN_PANEL_W_BY_SIDE.left`, 240 since ruling A4g; it was the shared
+   220) is still load-bearing on it: six 34px buttons fill 204, and a SEVENTH
+   (238) only just fits at 240. `scripts/test-editor-rail-in-topbar.ts` (in
+   efficient-web-builder) holds that arithmetic. */
 /* The rail's "+" (`.sf-rail-plus`) went in 11.0.0: Add opens from the Layers
    head's "+" and a canvas ➕ (owner ruling A1, amended 2026-10-14). */
 

package/dist/screen/words.d.ts

@@ -296,6 +296,9 @@ type ScreenWords = {
     /** The cell over an EMPTY slot on the canvas, after its "+" (0.106.0): the
      *  campaign designer's "Add a block". */
     canvasAddBlock: string;
+    /** What a picture from the media popup does when it is held over an image
+     *  on the canvas (harness UI-20, 2026-10-23). */
+    canvasReplaceImage: 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

package/dist/screen/words.js

@@ -1 +1 @@
-export{DEFAULT_SCREEN_ADD_WORDS,DEFAULT_SCREEN_SAVE_STATUS_WORDS,DEFAULT_SCREEN_SHARED_WORDS,DEFAULT_SCREEN_WORDS}from"../chunk-C2RHV42O.js";
+export{DEFAULT_SCREEN_ADD_WORDS,DEFAULT_SCREEN_SAVE_STATUS_WORDS,DEFAULT_SCREEN_SHARED_WORDS,DEFAULT_SCREEN_WORDS}from"../chunk-23DYNW6S.js";

package/dist/strings/index.d.ts

@@ -1,11 +1,11 @@
-import { a as SaveWords } from '../words-DkWcK1rh.js';
-import { N as NoticeWords, C as ChromeWords } from '../words-BpiVrsW5.js';
-import { C as CopyWords } from '../words-D-yhjdOg.js';
+import { a as SaveWords } from '../words-Cm8PMYn0.js';
+import { N as NoticeWords, C as ChromeWords } from '../words-DYu4iBrR.js';
+import { C as CopyWords } from '../words-BpTjCfqO.js';
 import { D as DragWords } from '../words-CvwYvkJm.js';
 import { LockWords } from '../edit-lock/index.js';
 import { F as FieldsWords } from '../words-vhnV8sM7.js';
 import { N as NodeMenuWords } from '../words-DMG4dYq2.js';
-import { P as PanelWords } from '../words-zH1H0WFw.js';
+import { P as PanelWords } from '../words-BeX5eGq7.js';
 import { P as PickWords } from '../words-DWvCJXwR.js';
 import { ScreenWords } from '../screen/words.js';
 export { ScreenAddWords, ScreenSharedWords } from '../screen/words.js';
@@ -14,10 +14,10 @@ import { T as TextStylesWords } from '../words-gIDCeRv3.js';
 import { T as TreeWords } from '../words-Cl9xMUYY.js';
 import * as react from 'react';
 import { ReactNode } from 'react';
-import '../types-DT8ywrFQ.js';
+import '../types-B3iSHX-w.js';
 import '../types-Cy7rdmXt.js';
 import '../wordFit-7XpmhcaW.js';
-import '../panelWidths-D9hTLR25.js';
+import '../panelWidths-DgQXiPXU.js';
 import '../engine-CvXpFE86.js';
 import 'efficient-shell/markup';
 import '../buckets-Tj-nkBpg.js';

package/dist/strings/index.js

@@ -1,2 +1,2 @@
-import{DEFAULT_SCREEN_WORDS as r}from"../chunk-C2RHV42O.js";import{DEFAULT_STYLE_CLIPBOARD_WORDS as o}from"../chunk-6WY6ZXJG.js";import{DEFAULT_TEXT_STYLES_WORDS as n}from"../chunk-OGH6CC3E.js";import{DEFAULT_PICK_WORDS as t}from"../chunk-OFBZOI6W.js";import{DEFAULT_CANVAS_WORDS as c}from"../chunk-TBY3DFKS.js";import{DEFAULT_TREE_WORDS as e}from"../chunk-K56YDHYQ.js";import{DEFAULT_NODE_MENU_WORDS as m}from"../chunk-WK3AFPXY.js";import{DEFAULT_PANEL_WORDS as i}from"../chunk-KFV7N2DJ.js";import{DEFAULT_SAVE_WORDS as s}from"../chunk-H6DDIBQ4.js";import{DEFAULT_CHROME_WORDS as u,DEFAULT_NOTICE_WORDS as f}from"../chunk-Z6PVRXVY.js";import{DEFAULT_RAIL_WORDS as p}from"../chunk-2OAZYSWJ.js";import{DEFAULT_LOCK_WORDS as l}from"../chunk-RE4LP46F.js";import{DEFAULT_COPY_WORDS as h}from"../chunk-B4JN227A.js";import{DEFAULT_FIELDS_WORDS as j}from"../chunk-WRFD4EXD.js";import{stringsContext as k}from"../chunk-MFIRYGHW.js";import{DEFAULT_DRAG_WORDS as a}from"../chunk-KAML3KQH.js";import{useContext as Y,useMemo as y}from"react";import{jsx as D}from"react/jsx-runtime";var F={notice:f,lock:l,save:s,chrome:u,rail:p,tree:e,panel:i,fields:j,pick:t,drag:a,menu:m,styleClipboard:o,copy:h,canvas:c,textStyles:n,screen:r},d=r=>"object"==typeof r&&null!==r;function v(r,o){const n={};for(const t of Object.keys(r)){const c=r[t],e=o[t];null==e?n[t]=c:d(c)?n[t]=d(e)?v(c,e):c:n[t]=typeof e==typeof c?e:c}return n}function H(r,o){return o?v(r,o):r}function K({value:r,locale:o,children:n}){const t=k(),c=Y(t),e=c?.strings??F,m=o??c?.locale??"en",i=y(()=>({strings:H(e,r),locale:m}),[e,r,m]);/* @__PURE__ */
-return D(t.Provider,{value:i,children:n})}function O(){return Y(k())?.strings??F}function W(){return Y(k())?.locale??"en"}export{F as DEFAULT_EASEL_STRINGS,K as EaselStringsProvider,H as mergeEaselStrings,W as useEaselLocale,O as useEaselStrings};
+import{DEFAULT_STYLE_CLIPBOARD_WORDS as r}from"../chunk-6WY6ZXJG.js";import{DEFAULT_SCREEN_WORDS as o}from"../chunk-23DYNW6S.js";import{DEFAULT_TEXT_STYLES_WORDS as n}from"../chunk-OGH6CC3E.js";import{DEFAULT_PICK_WORDS as t}from"../chunk-OFBZOI6W.js";import{DEFAULT_CANVAS_WORDS as c}from"../chunk-TBY3DFKS.js";import{DEFAULT_TREE_WORDS as e}from"../chunk-K56YDHYQ.js";import{DEFAULT_NODE_MENU_WORDS as m}from"../chunk-WK3AFPXY.js";import{DEFAULT_PANEL_WORDS as i}from"../chunk-KFV7N2DJ.js";import{DEFAULT_SAVE_WORDS as s}from"../chunk-H6DDIBQ4.js";import{DEFAULT_CHROME_WORDS as u,DEFAULT_NOTICE_WORDS as f}from"../chunk-AJSDWWJW.js";import{DEFAULT_RAIL_WORDS as p}from"../chunk-2OAZYSWJ.js";import{DEFAULT_LOCK_WORDS as l}from"../chunk-RE4LP46F.js";import{DEFAULT_COPY_WORDS as h}from"../chunk-KRL3IUV3.js";import{DEFAULT_FIELDS_WORDS as j}from"../chunk-WRFD4EXD.js";import{stringsContext as k}from"../chunk-MFIRYGHW.js";import{DEFAULT_DRAG_WORDS as a}from"../chunk-KAML3KQH.js";import{useContext as W,useMemo as D}from"react";import{jsx as Y}from"react/jsx-runtime";var y={notice:f,lock:l,save:s,chrome:u,rail:p,tree:e,panel:i,fields:j,pick:t,drag:a,menu:m,styleClipboard:r,copy:h,canvas:c,textStyles:n,screen:o},F=r=>"object"==typeof r&&null!==r;function K(r,o){const n={};for(const t of Object.keys(r)){const c=r[t],e=o[t];null==e?n[t]=c:F(c)?n[t]=F(e)?K(c,e):c:n[t]=typeof e==typeof c?e:c}return n}function d(r,o){return o?K(r,o):r}function v({value:r,locale:o,children:n}){const t=k(),c=W(t),e=c?.strings??y,m=o??c?.locale??"en",i=D(()=>({strings:d(e,r),locale:m}),[e,r,m]);/* @__PURE__ */
+return Y(t.Provider,{value:i,children:n})}function H(){return W(k())?.strings??y}function J(){return W(k())?.locale??"en"}export{y as DEFAULT_EASEL_STRINGS,v as EaselStringsProvider,d as mergeEaselStrings,J as useEaselLocale,H as useEaselStrings};

package/dist/{types-DT8ywrFQ.d.ts → types-B3iSHX-w.d.ts}

@@ -1,7 +1,7 @@
 import { E as EaselRailItem } from './types-Cy7rdmXt.js';
 import { ReactNode, Ref, CSSProperties } from 'react';
 import { EditAccess, SaveConflict } from './edit-lock/index.js';
-import { P as PanelSide } from './panelWidths-D9hTLR25.js';
+import { P as PanelSide } from './panelWidths-DgQXiPXU.js';
 
 type TopBarProps = {
     children?: ReactNode;
@@ -110,26 +110,6 @@ 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. The link's words. */
     name: string;
@@ -220,4 +200,4 @@ type SaveIconProps = {
     label: string;
 };
 
-export type { DeviceOption as D, EaselIconButtonProps as E, InspectorHeadProps as I, MediaPanelHeadProps as M, PanelResizeHandleProps as P, RailWordsShown as R, SaveTone as S, TopBarProps as T, SaveIconState as a, TopBarClusterProps as b, TopBarRailProps as c, DeviceSwitchProps as d, SaveStateProps as e, SaveStateToggleProps as f, SaveIconProps as g, SaveIconTone as h, InspectorIconButtonProps as i, InspectorUpLevelProps as j, MediaPickKind as k, EditNoticeProps as l };
+export type { DeviceOption as D, EaselIconButtonProps as E, InspectorHeadProps as I, PanelResizeHandleProps as P, RailWordsShown as R, SaveTone as S, TopBarProps as T, SaveIconState as a, TopBarClusterProps as b, TopBarRailProps as c, DeviceSwitchProps as d, SaveStateProps as e, SaveStateToggleProps as f, SaveIconProps as g, SaveIconTone as h, InspectorIconButtonProps as i, InspectorUpLevelProps as j, EditNoticeProps as k };

package/dist/{words-zH1H0WFw.d.ts → words-BeX5eGq7.d.ts}

@@ -10,8 +10,8 @@ import { S as SettingsBucket, D as DesignGroup } from './buckets-Tj-nkBpg.js';
  * group's key (`DESIGN_GROUPS`) is the same: `designGroups` is its word.
  *
  * The panel is hook-free, so nothing here is read from the strings provider:
- * `SettingsTabs` takes its name as `ariaLabel` and each tab's word as the
- * item's `label`, and `Inspector` (which has hooks) passes both.
+ * `Inspector` (which has hooks) reads them and hands the shell's `Tabs` the
+ * strip's name and each tab's word.
  * `SettingsDefaultReset` takes `words`, and a host passes the four from
  * `useWords('panel', …)`.
  */