efficient-easel 0.101.1 → 0.103.0

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

@@ -0,0 +1,748 @@
+import * as react from 'react';
+import { ReactNode, MouseEvent, ComponentType } from 'react';
+import { Data } from '../../blocks/index.js';
+import { D as DeviceOption } from '../../types-CqY85foL.js';
+import { a as EaselRailItem } from '../../types-DWS-s9z-.js';
+import { HostProduct } from './host-chrome.js';
+import { EaselSession } from './session.js';
+import { AddTarget } from './puck/add-target-types.js';
+import '../../types-E3HrTPg2.js';
+import '../../data/index.js';
+import '../../types-41704JE4.js';
+import '../../resolve-D68pb3Bx.js';
+import '../../plan-DChbUXdS.js';
+import '../../edit-lock/index.js';
+import '../../panelWidths-D9hTLR25.js';
+import '../../wordFit-D4S36PvB.js';
+import './links/link-filters.js';
+import '../../LinkPicker-W2Rtxetz.js';
+import './document-contract.js';
+import './document-hooks.js';
+import './section-template-types.js';
+import './puck/content-tree.js';
+import './puck/block-choice.js';
+import './puck/slot-section-spec.js';
+
+/**
+ * WHAT THE WEBSITE HANDS THE EDITOR'S SCREEN — the parts of the screen that
+ * know there is a website, given to it instead of imported by it
+ * (doc/adr/0003).
+ *
+ * The screen — the frame, the panels, the tree, the add panel, the inspector —
+ * is being made to hold nothing a website has that an email does not: no page,
+ * no site theme, no pinned header, no chat bubble. What it used to import and
+ * wire itself, the website layer now wires and hands over here, and a screen
+ * mounted with no layer above it draws none of it.
+ *
+ * This is NOT `EaselChrome` (lib/host-chrome): that is what a HOST stands
+ * round the editor — the storefront's cart, its header's settings — built in
+ * the host and absent on the ambient session. These parts are the builder's
+ * own website layer, the same for every host, and present on every mount of
+ * the screen (`ScreenStoreProvider` supplies them, from whoever mounts it).
+ *
+ * Fixed for the life of a mount, like the session: `useBridges`,
+ * `useStandaloneBridges`, `useDocumentPass` and `blockLook.useProducts` are
+ * called as hooks, and `Canvas` and `Inspector` are rendered as element types,
+ * so the provider's value must not change while the screen is mounted.
+ */
+/** A node of the document as the screen hands it to a layer: its type and its
+ *  props, its id among them. */
+interface ScreenNode {
+    type: string;
+    props: {
+        id: string;
+        [key: string]: unknown;
+    };
+}
+/**
+ * A panel of the layer's own, as the screen holds it: a kind, and whatever
+ * else the layer put beside it to say WHICH one (the node a panel is about).
+ * The screen stores it and hands it back, and reads no further into it than
+ * `kind`.
+ */
+type ScreenInspectorMode = {
+    kind: string;
+};
+/**
+ * THE SELECTION'S OWN PANEL — the one mode the screen names for itself. In it
+ * the inspector follows the selection: a node's settings, or the document's
+ * with nothing selected. Every other mode is a panel of a layer's, which the
+ * screen stores and hands back; this is the one it puts the inspector back to
+ * when the selection changes, and on every press of a row of its own.
+ *
+ * ONE object for the module's life, so setting it while it is the mode already
+ * bails out of the state update. A layer whose inspector names this mode names
+ * THIS object (the website's `PUCK_MODE`, components/SectionEditor, is it), so
+ * "is the panel showing the selection's own?" has one answer on both sides.
+ * The kind keeps the spelling the website's inspector has always tested for.
+ */
+declare const SELECTION_MODE: {
+    readonly kind: "puck";
+};
+/** The inspector drilled into one PART of a node (lib/puck/part-id): the mode
+ *  the screen's part bridge (components/usePartBridge) opens and closes. The
+ *  website's inspector modes include it (components/SectionEditor
+ *  `InspectorMode`). */
+type ScreenPartMode = {
+    kind: "part";
+    nodeId: string;
+    propKey: string;
+};
+/** Are two panels the same panel: the same kind, about the same thing? Asked
+ *  member by member, so the screen can answer without knowing what a layer
+ *  keeps beside the kind. */
+declare function sameInspectorMode(a: ScreenInspectorMode, b: ScreenInspectorMode): boolean;
+/** The inspector, as far as a layer needs it: which panel it shows, and how to
+ *  show one of the layer's own. */
+interface ScreenInspector {
+    /** The kind of panel showing now. */
+    kind: string;
+    /** The panel showing now, whole: what `open` was handed, given back. */
+    mode: ScreenInspectorMode;
+    /** Show a panel of the layer's own and reveal the inspector, leaving the
+     *  selection where it is. The same panel already showing stays, as the
+     *  object it was (`sameInspectorMode`). */
+    open: (mode: ScreenInspectorMode) => void;
+    /**
+     * Put a panel of the layer's own in the inspector and leave the inspector as
+     * it stands, in view or hidden: with `reveal` after it, what a press on one
+     * of the screen's own rows does. `open` is for a handler registered once: it
+     * never changes identity, so it cannot ask whether the inspector is hidden
+     * and brings it out every time.
+     */
+    show: (mode: ScreenInspectorMode) => void;
+    /** Bring the inspector into view if it is hidden. What it shows stays. */
+    reveal: () => void;
+}
+/**
+ * What the screen hands THE INSPECTOR it mounts in its right panel
+ * (`ScreenParts.Inspector`): the panel to show, the ways out of a panel,
+ * and what the screen's own furniture offers one. The names are the ones the
+ * screen has always passed, two of them in a website's words: they are the
+ * doors the bridges hand back (`openSettings`, `openStyles`).
+ */
+interface ScreenInspectorPanelProps {
+    /** The panel to show: the selection's own (`SELECTION_MODE`), or one of the
+     *  layer's, handed back as the screen was handed it. */
+    mode: ScreenInspectorMode;
+    /** The way to the settings of the whole document, from a panel that edits
+     *  one part of it (`ScreenBridges.openSettings`). */
+    onOpenWebsiteSettings: () => void;
+    /** The way to the styles a part of a block can follow, from that part's own
+     *  panel (`ScreenBridges.openStyles`). Omitted where there is nowhere to
+     *  keep them, and the panel draws no door. */
+    onOpenSiteStyles?: () => void;
+    /** Select a node and show ITS OWN settings: the way out of a panel that was
+     *  scoped down to part of that node. */
+    onSelectNode: (nodeId: string) => void;
+    /** Withhold the head's duplicate and remove. Set by the screen whose
+     *  document is ONE node, which a second node or none would break. */
+    hideNodeActions?: boolean;
+    /** Say one line through the screen's toast. Omitted by a screen with none. */
+    onNotify?: (msg: string, tone?: "success" | "error") => void;
+    /** Hide the panel: the last button of its head. Omitted by a screen whose
+     *  inspector is always in view. */
+    onHidePanel?: () => void;
+}
+/**
+ * The document and its tree of rows, as far as a layer needs them to wire and
+ * draw the parts of ONE block that are not nodes of their own: what is
+ * selected, where a node sits, and the three things a press on such a part's
+ * row does to the node it belongs to. Handed to the bridges on every render,
+ * so each member is that render's.
+ */
+interface ScreenTree {
+    /** The document, as the rules are handed it. */
+    data: unknown;
+    /** The node selected now, or null. */
+    selected: ScreenNode | null;
+    /** The key of the list a node sits in, by the node's id. */
+    zoneOf: (id: string) => string | undefined;
+    /** Somebody else holds the document: nothing may be moved. */
+    readOnly: boolean;
+    /** Select the top-level node at `index` the way a press on its row does: the
+     *  inspector goes back to the selection's own panel, then the selection
+     *  moves. */
+    select: (index: number) => void;
+    /** Write the top-level node at `index` back, whole. */
+    replace: (index: number, node: ScreenNode) => void;
+    /** Bring the canvas to a node, as selecting its row does. */
+    scrollTo: (id: string) => void;
+}
+/**
+ * The canvas, as far as a layer needs it: which device it is being looked at
+ * on, and how often its frame has been rebuilt. The switch, its state and the
+ * Refresh are the screen's; a layer whose own fields or preview ask "which
+ * view is this?", or which puts the canvas somewhere of its own accord, is
+ * told here. Handed to the bridges on every render.
+ */
+interface ScreenCanvas {
+    /** The id of the device the switch is on: one of the layer's own
+     *  (`ScreenDevices.options`). */
+    device: string;
+    /** How many times the screen has rebuilt the canvas's frame (its Refresh).
+     *  It changes with each one and with nothing else: a layer that put the
+     *  canvas somewhere as the document opened lists it as a dependency, and
+     *  puts it there again in the fresh frame. */
+    refreshes: number;
+}
+/**
+ * The left panel, as far as a layer needs it: to put it on a view and to bring
+ * it out. Which view it is on, whether it is open and what a press on the rail
+ * does to either are the screen's. Handed to the bridges on every render.
+ */
+interface ScreenLeftPanel {
+    /** Put the panel on a view, by its id: one of the layer's own
+     *  (`ScreenLeftView`) or one of the screen's. Whether the panel is in view
+     *  stays, and the screen keeps the choice as it keeps any other. */
+    setView: (view: string) => void;
+    /** Bring the panel into view if it is hidden. What it shows stays. */
+    reveal: () => void;
+}
+/** What a view of the layer's is handed when the left panel draws it: what the
+ *  screen hands the heads of its own views. */
+interface ScreenLeftViewFrame {
+    /** Hide the whole left panel: the last button of every view's head. */
+    onHide: () => void;
+    /** Say one line through the screen's toast. */
+    notify: (msg: string, tone?: "success" | "error") => void;
+}
+/**
+ * A VIEW of the left panel that is the layer's own: a button in the rail, and
+ * what the panel shows while the view is the one it is on. The screen lights
+ * the button and switches to the view exactly as it does for its own Layers,
+ * and draws no frame round what `panel` returns: a view draws its own head.
+ */
+interface ScreenLeftView {
+    /** The view's id: what the screen holds as the view the panel is on, and
+     *  what is kept between mounts (`ScreenLeftViewRules`), so one in use is
+     *  never renamed. The rail button's id as well. */
+    id: string;
+    /** The rail button's name. */
+    label: string;
+    /** …and its glyph. */
+    icon: ReactNode;
+    /** The view, for the screen to place in the left panel as it comes back. A
+     *  function called where the panel is drawn and not a component of its own:
+     *  what it returns is mounted in the screen's place, with nothing between. */
+    panel: (frame: ScreenLeftViewFrame) => ReactNode;
+}
+/**
+ * What a layer stands in the rail: a view of its own, or a button that is NOT
+ * a view of the left panel — one that opens something of the layer's
+ * elsewhere. That one is the engine's own rail item (efficient-easel/rail),
+ * drawn as it is handed: the layer says whether it is lit and what a press
+ * does.
+ */
+type ScreenRailItem = ScreenLeftView | EaselRailItem;
+/**
+ * The screen's own writes of the document, as far as a layer's pass over a
+ * document needs them. They are the writes every surface of the screen makes
+ * (lib/puck/use-section-ops), refused the same way while somebody else holds
+ * the document, and ONE object from render to render until that changes — so a
+ * pass may list it as a dependency and run no oftener for it.
+ */
+interface ScreenDocumentOps {
+    /** Replace the whole working document, unrecorded. */
+    setDocument: (data: Data) => void;
+    /** Insert a node of `type`, as its own defaults, into the top-level list;
+     *  returns the id it was given. */
+    insertSection: (type: string, index: number) => string;
+    /** Insert a FULL node — its type and its props, slot children inline — into
+     *  the list `zone` names; returns the id it was given. */
+    insertNode: (zone: string, index: number, node: ScreenNode) => string;
+    /** Write the node at a place back, whole. */
+    replaceComponent: (zone: string, index: number, node: ScreenNode) => void;
+}
+/** What the tree lends a layer that draws a row in it: the row's own click,
+ *  for a pointer landing outside its name. */
+interface ScreenTreeRows {
+    rowClick: (select: () => void) => (e: MouseEvent<HTMLElement>) => void;
+}
+/** …and, for a layer that draws rows which fold, the tree's own fold state.
+ *  The ids are the layer's to make; the tree keeps them with its own. */
+interface ScreenTreeFolds extends ScreenTreeRows {
+    isCollapsed: (id: string) => boolean;
+    toggleCollapse: (id: string) => void;
+}
+/** What a layer's bridges give back for the screen to place. */
+interface ScreenBridges {
+    /** A row under the Add panel's tiles, for something that is not a block.
+     *  Handed the way to leave Add, for a row that opens a panel. */
+    addPanelRow?: (leaveAdd: () => void) => ReactNode;
+    /**
+     * Rows at the END of a top-level node's own children, for a part of that
+     * block which is not a node: "layer, do you draw anything under this row?".
+     * Asked only where the node's child rows are drawn, and what comes back is
+     * placed as it is — the layer draws with the tree's own row.
+     */
+    partRows?: (node: ScreenNode, rows: ScreenTreeRows) => ReactNode;
+    /**
+     * Does the layer draw a subtree of its OWN under this top-level node — rows
+     * for things the block keeps in its props and not in a slot? Such a row
+     * folds like any other, so the screen asks before it draws the caret.
+     */
+    hasOwnRows?: (node: ScreenNode) => boolean;
+    /** That subtree's rows, for the node at `index`. Asked only when
+     *  `hasOwnRows` said yes and the row is unfolded. */
+    ownRows?: (node: ScreenNode, index: number, rows: ScreenTreeFolds) => ReactNode;
+    /**
+     * The row of a top-level node was pressed, and the screen has selected it:
+     * a layer that keeps a focus of its own INSIDE one block puts it back to the
+     * block. Called between the selection and the canvas's scroll. The node is
+     * the one at the pressed index, if there is one.
+     */
+    sectionPressed?: (node: ScreenNode | undefined) => void;
+    /**
+     * The layer's own controls in the top bar's right cluster. The screen draws
+     * that cluster as the save state, Refresh and the main button; a layer has
+     * two places in it. `barLead` stands FIRST among the actions, between the
+     * save state and Refresh: something done with the whole document that only
+     * the layer has. What comes back is placed as it is, and a layer with
+     * nothing to offer just now returns nothing.
+     */
+    barLead?: () => ReactNode;
+    /** …and `barTrail` stands between Refresh and the main button: a way out to
+     *  where the document is read. */
+    barTrail?: () => ReactNode;
+    /**
+     * …and `barMain` IS the main button, in its place at the end of the cluster
+     * (0.103.0): the layer's own way to finish with the document — the campaign
+     * designer's Done — where the screen draws Publish (a document that
+     * publishes) or Save. What comes back is placed as it is, nothing round it,
+     * and returning nothing leaves the place empty. Absent, the screen draws its
+     * own button, as it always has.
+     */
+    barMain?: () => ReactNode;
+    /**
+     * The layer's own buttons in the rail. The screen draws the rail as Add, its
+     * own Layers and the host's Media library; a layer has two places in it.
+     * `railLead` stands between Add and Layers. Each list is the buttons THIS
+     * document has, in the order they are drawn: one it does not have is left
+     * out, and a view left out is a view the panel cannot be on.
+     */
+    railLead?: ReadonlyArray<ScreenRailItem>;
+    /** …and `railTrail` stands between Layers and Media. */
+    railTrail?: ReadonlyArray<ScreenRailItem>;
+    /**
+     * Which view the left panel ACTUALLY shows, given the one it is set to: the
+     * 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.
+     */
+    resolveLeftView?: (view: string, hasMedia: boolean) => 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.
+     * Placed as it comes back.
+     */
+    treeFoot?: () => ReactNode;
+    /**
+     * Two doors out of the inspector's panels, onto wherever the layer keeps what
+     * they lead to: a view of its own in the left panel, a panel of its own in
+     * the inspector. The screen hands them to the inspector it mounts and does
+     * not know where they go. `openSettings` is the way to the settings of the
+     * whole document, from a panel that edits one part of it. The inspector
+     * cannot do without it, so with no layer it is handed one that leads nowhere.
+     */
+    openSettings?: () => void;
+    /** …and `openStyles` the way to the styles a part of a block can follow,
+     *  from that part's own panel. A layer with nowhere to keep them hands none,
+     *  and the panel draws no door. */
+    openStyles?: () => void;
+    /**
+     * The open document is the one that STORES what the layer pins: the node
+     * every other document shows pinned and does not hold (the website's: the
+     * page that keeps the site's one footer). It is edited there in place, so
+     * the screen draws that document's tree without the rows an ordinary one has
+     * round its own sections, and without the row that leads to it. Absent, the
+     * document is an ordinary one.
+     */
+    pinnedSource?: boolean;
+    /** …and the way to edit what is pinned from a document that only shows it:
+     *  what a press on its row in the tree does. Where it leads is the layer's
+     *  (the website opens its footer's editor over the page). */
+    editPinnedSource?: () => void;
+    /**
+     * The layer's own way to bring the canvas to a node the screen has selected,
+     * for a document where the screen's plain scroll does not hold: one the
+     * layer draws something above, which reflows and takes the scroll back (the
+     * website's footer, edited under the page it was opened from). Handed back
+     * only for such a document, and the screen then calls it in place of its
+     * scroll; absent, the screen scrolls.
+     */
+    holdCanvasOn?: (id: string) => void;
+    /** The layer's own context, stood round the whole screen. What it is handed
+     *  is the screen; what it returns is rendered in the screen's place. */
+    wrap?: (screen: ReactNode) => ReactNode;
+}
+/** A block type's own default props, read off the config the screen holds.
+ *  The screen's to look up and a layer's to be lent: a layer that reached into
+ *  the config for itself would be holding a second copy of it. */
+type NodeDefaults = (type: string) => Record<string, unknown>;
+/** What the screen lends a rule that builds a node. All four are the screen's
+ *  own and none is a block's: the rule states the node, the screen says what a
+ *  type defaults to, what its next id is, what it is called and whether the
+ *  host offers it. */
+interface ScreenNodeMaker {
+    /** A type's default props, from the config. */
+    nodeDefaults: NodeDefaults;
+    /** A fresh id for one node of a type. Called once per node, in the order the
+     *  nodes are written. */
+    newNodeId: (type: string) => string;
+    /** What a top-level node of a type is called, as the tree and the toast say
+     *  it. */
+    sectionLabel: (type: string) => string;
+    /** Does this editor's host offer the type? A rule that would lay down a block
+     *  the host left out asks first. */
+    blockIsOffered: (type: string) => boolean;
+}
+/** A node as a rule hands it back: a type and its props, slot children inline
+ *  in them. The screen inserts it whole. */
+interface ScreenNewNode {
+    type: string;
+    props: Record<string, unknown>;
+}
+/**
+ * The rules of particular blocks, asked by the screen and never stated in it:
+ * the screen is handed nodes and is not told which blocks exist. Plain
+ * functions of what they are passed, and the same object for the life of a
+ * mount, so the screen may call them anywhere without listing them as a
+ * dependency.
+ */
+interface ScreenBlockRules {
+    /** A block that is what its section IS: it may be selected and edited, and
+     *  never removed, hidden, duplicated or dragged. */
+    isLockedBlock: (type: string | undefined) => boolean;
+    /** Why a second one of this node cannot be made in this document, or null —
+     *  a rule of the block's own. */
+    duplicateBlocked: (data: unknown, node: unknown) => string | null;
+    /**
+     * How many nodes of its own kind the node with `id` already sits inside, for
+     * a block that limits its own nesting; 0 for every other. It is the depth the
+     * add lookup is asked at, so every surface that adds into one node offers the
+     * same list.
+     */
+    nestDepth: (data: unknown, type: string, id: string) => number;
+    /**
+     * What a new top-level section of `type` STARTS AS, when that is more than
+     * its own defaults — an arrangement of several blocks, or a prop no default
+     * carries — as ONE node for the screen to insert in one step; or null, and
+     * the screen inserts the type by itself. Where it goes, selecting it and
+     * announcing it stay the screen's.
+     */
+    newSectionNode: (type: string, make: ScreenNodeMaker) => ScreenNewNode | null;
+    /**
+     * What can go in a node of `nodeType`, sitting `nestDepth` nodes of its own
+     * kind deep (0 when not said): the slot its children are kept on, and the
+     * menu's rows or the one child type a button adds — or null for a node that
+     * takes no children. THE ONE ANSWER every add surface of the screen asks (the
+     * tree, the panel, the menu, the Add panel), so no two of them can come to
+     * offer one node different lists; what each of the layer's blocks takes is
+     * the layer's catalogue, and the screen is not told it.
+     */
+    canAddTo: (nodeType: string, nestDepth?: number) => AddTarget | null;
+    /**
+     * Does the host of this editor offer the type? Asked of the editor's own
+     * session where the screen holds it, else of the editor on the page. Where
+     * no host chose its blocks, every type is.
+     */
+    blockIsOffered: (type: string, session?: EaselSession) => boolean;
+}
+/** The tier a node is NAMED at: a node at the top of the document is a section,
+ *  a node inside another is a block. */
+type ScreenNodeLevel = "section" | "block";
+/**
+ * How the layer's blocks are NAMED AND DRAWN in the screen: the tree's rows and
+ * the Add panel's tiles put a word, a glyph and a cover on a block, and which
+ * word and which drawing is known only to the layer that knows every block it
+ * has. The screen is handed a type and asks.
+ *
+ * The same object for the life of a mount, and its two components the same two
+ * functions throughout: the screen renders them as element types, and a type
+ * that changed identity would remount every row and tile that wears one.
+ */
+interface ScreenBlockLook {
+    /**
+     * What a node of `type` is called at a level, given `base` — the label the
+     * config holds for the type, which is the name of every node the layer does
+     * not name by where it sits.
+     */
+    labelAtLevel: (type: string, level: ScreenNodeLevel, base: string) => string;
+    /** The Add panel's one-line blurb for a section, by type. A type with none
+     *  has no entry. */
+    descriptions: Record<string, string>;
+    /** The Add panel's short heading for a group of sections, by the group's
+     *  key, where the layer has one; undefined, and the registry's own title for
+     *  the group is its heading. */
+    categoryLabel: (id: string) => string | undefined;
+    /** The section the Add panel offers FIRST, by itself, ahead of every group
+     *  and taken out of its own; null, and every section stands in its group. */
+    firstSection: string | null;
+    /**
+     * What the row of a block says when the block is named by its own content
+     * and not by the slot-child rule (lib/puck/slot-child-name): the layer reads
+     * the content, and `compLabel` — the config's label for a type, lent by the
+     * screen — is the word for a block it has no rule for.
+     */
+    blockRowName: (child: {
+        type: string;
+        props: Record<string, unknown>;
+    }, compLabel: (type: string) => string) => string;
+    /**
+     * The plain words of a block's stored copy, every mark of the layer's markup
+     * unwrapped: what a tree row prints of a name the author typed, where no mark
+     * can be drawn (lib/puck/slot-child-name `slotChildRowName`). Which marks
+     * there are is the layer's grammar — a website's is not an email's.
+     */
+    plainText: (copy: string) => string;
+    /** The glyph of a block or section type, as a tree row and a block tile wear
+     *  it. */
+    Icon: ComponentType<{
+        type: string;
+        size?: number;
+        className?: string;
+    }>;
+    /** The cover picture of a section type, filling the Add panel's card. */
+    Thumbnail: ComponentType<{
+        type: string;
+    }>;
+    /**
+     * The products a row may be named after when its block holds only a
+     * product's handle: null until they arrive, and for good when there are
+     * none. A HOOK — the one member here that is — called once per render where
+     * the screen read the products itself, so its effect keeps its place.
+     */
+    useProducts: () => readonly HostProduct[] | null;
+}
+/**
+ * THE DEVICES the canvas can be looked at on. That the top bar has a switch,
+ * and that the canvas is fitted to the pane and framed, is the screen's: any
+ * editor's canvas is looked at on more than one. WHICH devices there are, what
+ * each is called and how wide it is drawn is the layer's — a website has three
+ * view tiers where an email has two.
+ *
+ * The same object for the life of a mount: the screen reads the device it
+ * starts on from it once, and draws the switch from it on every render.
+ */
+interface ScreenDevices {
+    /** What the switch offers, in the order it draws them: an id, a name and a
+     *  glyph each (efficient-easel/chrome `DeviceSwitch`). */
+    options: ReadonlyArray<DeviceOption>;
+    /** The device a mount starts on. */
+    initial: string;
+    /**
+     * The ONE device with no width of its own: the canvas draws it at the
+     * pane's width, so it reflows as the pane is dragged, where every other is
+     * a fixed width scaled to fit the pane. Its frame is the plain one; every
+     * other device's wears a class named for its id.
+     */
+    fluid: string;
+    /** The width each device is drawn at, in CSS px, by id. For `fluid` it is
+     *  only the width of the frame before the pane has been measured. */
+    widths: Readonly<Record<string, number>>;
+}
+/**
+ * WHAT IS PINNED in the document's top-level list. That the list has a BAND
+ * its sections keep to — one node pinned ahead of it at most, and one behind —
+ * is the screen's: where a new section lands, where a dragged one may be put
+ * down, which nodes the canvas offers a handle on and what the menu withholds
+ * are all read off that band, and the arithmetic of it is written once, in the
+ * screen. WHICH types are pinned is the layer's: a website pins its Header
+ * first and its Footer last, where an email pins nothing.
+ *
+ * And the layer's GROUPS OF SECTIONS, if it has them: a pinned top-level node
+ * whose one list holds ordinary sections, which move among the groups' lists
+ * and nowhere else. The screen draws a group's row and keeps its sections to
+ * those lists; which types are groups, and what a group's list is keyed by,
+ * it asks.
+ *
+ * And THE PANEL A PINNED NODE IS EDITED IN, where that is not the selection's
+ * own: a node the layer pins may carry no fields, the layer keeping its
+ * settings and showing them in a panel of the layer's. Which node, and which
+ * panel, is the layer's to say; the screen asks by type where a node is
+ * selected and where a pinned node's row is pressed, and shows what it is
+ * handed.
+ *
+ * The same object for the life of a mount, its three functions plain functions
+ * of what they are passed: the screen reads it anywhere, inside the callbacks
+ * and effects it does not rebuild for it.
+ */
+interface ScreenPinnedNodes {
+    /** The type of the node pinned FIRST: the band starts after it. Null when
+     *  the layer pins none. */
+    first: string | null;
+    /** The type of the node pinned LAST: the band ends at it. */
+    last: string | null;
+    /** The type of the group of sections pinned first, ahead of everything. */
+    firstGroup: string | null;
+    /** …and of the one pinned last. */
+    lastGroup: string | null;
+    /** Is a node of this type a group of sections? */
+    isSectionGroup: (type: string | undefined) => boolean;
+    /** The key of the list a group keeps its sections in, by the group's id. */
+    sectionGroupZone: (groupId: string) => string;
+    /**
+     * The panel of the layer's own that a node of this type is edited in, or
+     * null: the node is edited by its own fields, in the selection's own panel
+     * (`SELECTION_MODE`). What comes back is what the screen stores, so it is
+     * the SAME object every time the same type is asked about. Asked with no
+     * type where nothing is selected, and answered null.
+     */
+    panelOf: (type: string | null | undefined) => ScreenInspectorMode | null;
+}
+/**
+ * THE VIEW THE LEFT PANEL IS ON, from one mount to the next. That the panel
+ * has views, that one of them is current and that the choice is kept is the
+ * screen's: it holds the view in state and mirrors it from ONE effect, the
+ * only writer. WHERE it is kept, which view a first mount opens on and what a
+ * selection does to it are the layer's — a website opens on its page list,
+ * and keeps the choice under a key of its own.
+ *
+ * The same object for the life of a mount: the screen seeds its state from
+ * `read` once, and calls the other two from an effect and a callback it does
+ * not rebuild for them.
+ */
+interface ScreenLeftViewRules {
+    /** The view a mount opens on: the one kept, or the layer's first. */
+    read: () => string;
+    /** Keep the view for the next mount. */
+    write: (view: string) => void;
+    /** What a change of the selection does to the view: handed the id of the
+     *  node selected, if one is, and the view the panel is on, it answers the
+     *  view to be on. */
+    forSelection: (selectedId: string | null | undefined, current: string) => string;
+}
+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`.
+     */
+    useOwnerName?: () => string;
+    /**
+     * The layer's wiring between the inspector and what the layer draws in the
+     * canvas, as ONE hook the screen calls where it used to hold that wiring: a
+     * click on the layer's furniture in the canvas opens its panel, and the open
+     * panel outlines the furniture. And its wiring for the parts of one block
+     * that are not nodes: what selecting one does, and the rows it has in the
+     * tree. And its own controls in the top bar, with whatever they run on. And
+     * its buttons in the rail, with the views of the left panel they open.
+     */
+    useBridges?: (inspector: ScreenInspector, tree: ScreenTree, canvas: ScreenCanvas, left: ScreenLeftPanel) => ScreenBridges;
+    /**
+     * The same, for the screen that holds ONE node as its whole document
+     * (SectionScreenShell). A hook of its own and not `useBridges` with less
+     * handed in: that screen wired less — no site-wide furniture, no tree of
+     * sections — and a hook cannot leave out half of itself by what it is
+     * passed.
+     */
+    useStandaloneBridges?: (inspector: ScreenInspector) => ScreenBridges;
+    /**
+     * The layer's own pass over a document as it opens: what it lays down in one
+     * that lacks it, and takes out of one that holds it twice. A hook of its own
+     * and not one more thing the bridges run, because of WHERE it must run: the
+     * bridges stand early among the screen's hooks, and this pass writes the
+     * document, so it is called LAST of the screen's own passes over it — after
+     * the slot seeding and the duplicate-id heal, which address top-level nodes
+     * by index and would be thrown out by a node laid down ahead of them. Lent
+     * the screen's writes and the config it holds, for the engine's node maker.
+     */
+    useDocumentPass?: (ops: ScreenDocumentOps, config: unknown) => void;
+    /**
+     * The layer's block rules. Handed here and NOT registered at import: what a
+     * registry holds depends on which modules have loaded, and that order is not
+     * the same in the app and in a script that loads one file, so a rule could
+     * answer in one and be absent in the other.
+     */
+    blockRules?: ScreenBlockRules;
+    /** How the layer's blocks are named and drawn. Handed here for the reason
+     *  the rules are. */
+    blockLook?: ScreenBlockLook;
+    /** The devices the layer's canvas is looked at on. Data, and handed here
+     *  for the reason the rules are. */
+    devices?: ScreenDevices;
+    /** Where the left panel's view is kept, and which one a mount opens on.
+     *  Plain functions, and handed here for the reason the rules are. */
+    leftView?: ScreenLeftViewRules;
+    /** Which node types are pinned in the top-level list, which are groups of
+     *  sections, and which are edited in a panel of the layer's. Data and three
+     *  plain functions, and handed here for the reason the rules are. */
+    pinned?: ScreenPinnedNodes;
+    /**
+     * Is the save pill also the autosave's on / off switch (0.103.0)? The screen
+     * draws the pill as a button that pauses the autosave and resumes it; a
+     * layer whose editor always saves (the campaign designer) says false, and the
+     * pill is the same words and the same dot with nothing to press. "Retry now"
+     * stays beside a failed save either way. Absent, true: the switch, as the
+     * website has it.
+     */
+    saveSwitch?: boolean;
+    /**
+     * THE CANVAS the screen frames: the engine's, as the layer dresses it — the
+     * layer's own sheet and theme in the frame, its own say over the outline
+     * round a block. The screen places it in the pane it has measured, hands it
+     * nothing, and remounts it by key to rebuild the frame; where the frame
+     * stands, how it is fitted and what is laid over it are the screen's.
+     *
+     * ONE function for the life of a mount: the screen renders it as an element
+     * type, and a type that changed identity would remount the whole canvas.
+     */
+    Canvas?: ComponentType;
+    /**
+     * THE INSPECTOR the screen mounts in its right panel: the panel of whatever
+     * is selected and, in its place, each panel of the layer's own — frame, head
+     * and body, since the screen draws nothing round it. The screen holds WHICH
+     * panel is showing and hands it over (`mode`), with the ways out of a panel
+     * and its own toast and Hide button; what a mode draws is the layer's.
+     *
+     * ONE function for the life of a mount: the screen renders it as an element
+     * type, and a type that changed identity would remount the panel and drop
+     * what a merchant has open in it.
+     */
+    Inspector?: ComponentType<ScreenInspectorPanelProps>;
+}
+declare function ScreenPartsProvider({ parts, children }: {
+    parts: ScreenParts;
+    children?: ReactNode;
+}): react.JSX.Element;
+/** The layer's parts; none when the screen stands by itself. */
+declare function useScreenParts(): ScreenParts;
+/** The layer's bridges, run in the screen. With no layer, nothing runs. */
+/** The name a panel's head gives what is being edited (`useOwnerName`). */
+declare function useScreenOwnerName(): string;
+declare function useScreenBridges(inspector: ScreenInspector, tree: ScreenTree, canvas: ScreenCanvas, left: ScreenLeftPanel): ScreenBridges;
+/** The layer's bridges for the screen that holds one node by itself. With no
+ *  layer, nothing runs. */
+declare function useStandaloneScreenBridges(inspector: ScreenInspector): ScreenBridges;
+/** The layer's pass over a document as it opens, run in the screen. With no
+ *  layer, nothing runs. */
+declare function useScreenDocumentPass(ops: ScreenDocumentOps, config: unknown): void;
+/** The layer's block rules. With no layer, the rules of an editor that has no
+ *  blocks of its own. */
+declare function useScreenBlockRules(): ScreenBlockRules;
+/** How the layer's blocks are named and drawn. With no layer, by what the
+ *  config says of them and with no drawing. */
+declare function useScreenBlockLook(): ScreenBlockLook;
+/** The devices the layer's canvas is looked at on. With no layer, the one that
+ *  fills the pane. */
+declare function useScreenDevices(): ScreenDevices;
+/** Where the layer keeps the left panel's view. With no layer, nowhere: every
+ *  mount opens on the Layers tree. */
+declare function useScreenLeftView(): ScreenLeftViewRules;
+/** Which node types the layer pins in the top-level list, and which are its
+ *  groups of sections. With no layer, none. */
+declare function useScreenPinned(): ScreenPinnedNodes;
+/** Whether the save pill is the autosave's switch. With no layer, it is, as
+ *  the screen has always drawn it. */
+declare function useScreenSaveSwitch(): boolean;
+/** The canvas the layer dresses for the screen to frame. With no layer, the
+ *  engine's plain one. */
+declare function useScreenCanvasFrame(): ComponentType;
+/** The inspector the layer draws for the screen to mount. With no layer, the
+ *  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 ScreenDevices, type ScreenDocumentOps, type ScreenInspector, type ScreenInspectorMode, type ScreenInspectorPanelProps, type ScreenLeftPanel, type ScreenLeftView, type ScreenLeftViewFrame, type ScreenLeftViewRules, type ScreenNewNode, type ScreenNode, type ScreenNodeLevel, type ScreenNodeMaker, type ScreenPartMode, type ScreenParts, ScreenPartsProvider, type ScreenPinnedNodes, type ScreenRailItem, type ScreenTree, type ScreenTreeFolds, type ScreenTreeRows, sameInspectorMode, useScreenBlockLook, useScreenBlockRules, useScreenBridges, useScreenCanvasFrame, useScreenDevices, useScreenDocumentPass, useScreenInspectorPanel, useScreenLeftView, useScreenOwnerName, useScreenParts, useScreenPinned, useScreenSaveSwitch, useStandaloneScreenBridges };