forgebook 0.1.7 → 0.2.0

package/dist/src/shell/ViewMenu.js

@@ -1,31 +1,26 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * The View menu: every control the person did not hide in it, in their order, each with its value, a handle to move
- * it, a pin that puts it on the toolbar and a button that hides it here (a pinned one stays on the toolbar); at its
- * foot the hidden controls, the wrap choice, the values' reset and the toolbar's reset.
+ * The View menu: its button, with a dot when one of its values is changed, and its panel (`ViewMenuPanel`): every
+ * control the person did not hide in it, in their order, each with its value, a handle to move it, a pin that puts it
+ * on the toolbar and a button that hides it here (a pinned one stays on the toolbar); at its foot the hidden controls,
+ * the wrap choice, the values' reset and the toolbar's reset.
  *
  * @remarks
- * The order is set here only, and the toolbar shows the pinned controls in it: nothing is dragged on the toolbar. A row
- * follows the pointer one to one while it is dragged, and the others move out of its way animated; with the keyboard,
- * the handle moves its row with the arrow keys and the new position is announced.
+ * The button is on every page and the panel only once asked for, so the panel's module loads the first time the menu
+ * opens, fetched already when the pointer comes over the button or the focus reaches it. The popover opens at once as
+ * before, and its content is drawn as soon as the module is there, the focus then going to its chosen option.
  *
  * @module
  */
-import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
-import { DEFAULT_VIEW, hasViewChanges } from "../viewState.js";
-import { ControlRow } from "./ControlRow.js";
+import { useEffect, useLayoutEffect, useState } from "react";
+import { hasViewChanges } from "../viewState.js";
 import { useCatalogue } from "./catalogueContext.js";
 import { Icon } from "./icons.js";
-import { NamedViews } from "./NamedViews.js";
 import { STRINGS } from "./strings.js";
-import { controlLabel, ToolbarControl } from "./ToolbarControl.js";
+import { ToolbarControl } from "./ToolbarControl.js";
 import { usePopover } from "./usePopover.js";
 /** The room the menu keeps from the window's right edge, in CSS px. */
 const EDGE_PX = 12;
-/** How long the rows take to move out of a dragged row's way, in ms: the shell's `$duration-quick`. */
-const SHIFT_MS = 150;
-/** How they move: the shell's `$ease-out`, decelerating. */
-const SHIFT_EASING = "cubic-bezier(0.22, 1, 0.36, 1)";
 /**
  * The ids of the controls whose values the View menu answers for: those not on the toolbar (in it, or hidden, whose
  * value still applies, or pinned but moved into it for want of room), the stage's width aside, which is not a view
@@ -37,74 +32,20 @@ const SHIFT_EASING = "cubic-bezier(0.22, 1, 0.36, 1)";
 export const menuControlIds = (placed, movedIds = []) => placed
     .filter((each) => (!each.isPinned || movedIds.includes(each.control.id)) && each.control.id !== "width")
     .map((each) => each.control.id);
-/**
- * The view with the given controls' values back at their defaults.
- *
- * @param view - the view.
- * @param switches - the catalogue's switches.
- * @param ids - the controls' ids.
- */
-const withDefaults = (view, switches, ids) => ({
-    ...view,
-    switches: {
-        ...view.switches,
-        ...Object.fromEntries(switches.filter((each) => ids.includes(each.id)).map((each) => [each.id, each.default]))
-    },
-    backdrop: ids.includes("backdrop") ? DEFAULT_VIEW.backdrop : view.backdrop,
-    sheets: ids.includes("sheets") ? DEFAULT_VIEW.sheets : view.sheets,
-    text: ids.includes("text") ? DEFAULT_VIEW.text : view.text
-});
-/**
- * Moves the rows out of the way animated when the order changes: each row starts from where it was drawn and slides
- * to its new place (the dragged row aside, which follows the pointer); without motion they jump.
- *
- * @param list - the list.
- * @param order - the rows' ids in their order.
- * @param draggedId - the dragged row's id, if one is dragged.
- */
-const useShiftedRows = (list, order, draggedId) => {
-    const tops = useRef(new Map());
-    // biome-ignore lint/correctness/useExhaustiveDependencies: the rows are measured again whenever their order changes
-    useLayoutEffect(() => {
-        const rows = [...(list.current?.querySelectorAll("[data-control]") ?? [])];
-        const isReduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-        for (const row of rows) {
-            const id = row.dataset["control"] ?? "";
-            const before = tops.current.get(id);
-            tops.current.set(id, row.offsetTop);
-            if (before === undefined || id === draggedId || isReduced)
-                continue;
-            // where the row is drawn now: its last place plus what a running move still shifts it by
-            const shift = new DOMMatrixReadOnly(getComputedStyle(row).transform).m42;
-            const start = before + shift - row.offsetTop;
-            for (const running of row.getAnimations())
-                running.cancel();
-            if (start === 0)
-                continue;
-            row.animate([{ transform: `translateY(${start}px)` }, { transform: "translateY(0)" }], {
-                duration: SHIFT_MS,
-                easing: SHIFT_EASING
-            });
-        }
-    }, [order]);
-};
-/**
- * The controls hidden in the menu, at its foot: their count, which opens them as rows like the others, each one usable
- * while it stays hidden, with its pin (a hidden control may still sit on the toolbar) and a button that shows it
- * again in its place.
- *
- * @param props - the hidden controls, the arrangement, and what every control shares.
- */
-const HiddenControls = ({ hidden, layout, ...context }) => {
-    const [isOpen, setIsOpen] = useState(false);
-    const listId = useId();
-    if (hidden.length === 0)
-        return null;
-    return (_jsxs("div", { className: "forgebook-hidden-controls", children: [_jsxs("button", { type: "button", className: "forgebook-text-button", "aria-expanded": isOpen, "aria-controls": listId, onClick: () => setIsOpen(!isOpen), children: [STRINGS.hiddenControls(hidden.length, hidden.filter((each) => each.isPinned).length), _jsx(Icon, { name: isOpen ? "chevronDown" : "chevronRight", size: 12 })] }), isOpen ? (_jsx("ul", { id: listId, className: "forgebook-arrange-list", children: hidden.map(({ control, isPinned }) => {
-                    const label = controlLabel(control);
-                    return (_jsxs("li", { className: "forgebook-arrange", "data-control": control.id, "data-hidden": "", children: [_jsx("span", { className: "forgebook-arrange__no-handle" }), _jsx("span", { className: "forgebook-popover__label", children: label }), _jsx("div", { className: "forgebook-arrange__control", children: _jsx(ToolbarControl, { control: control, form: "row", ...context }) }), _jsx("button", { type: "button", className: "forgebook-icon-button", "aria-label": STRINGS.pinControl(label), title: STRINGS.pinControl(label), "aria-pressed": isPinned, onClick: () => layout.pin(control.id, !isPinned), children: _jsx(Icon, { name: "pin", size: 14 }) }), _jsx("button", { type: "button", className: "forgebook-icon-button", "aria-label": STRINGS.showControl(label), title: STRINGS.showControl(label), onClick: () => layout.hide(control.id, false), children: _jsx(Icon, { name: "eye", size: 14 }) })] }, control.id));
-                }) })) : null] }));
+/** The panel, once its module is there: a menu drawn after the first draws it at once. */
+let loadedPanel;
+/** The panel's module, fetched once: a second call while it loads, or after, gets the same answer. */
+let panelModule;
+/** Loads the panel's module, or gives the load already asked for. */
+const loadPanel = () => {
+    panelModule ??= import("./ViewMenuPanel.js").then((module) => {
+        loadedPanel = module.ViewMenuPanel;
+        return module.ViewMenuPanel;
+    });
+    return panelModule;
 };
+/** The panel as the menu first finds it: there when an earlier menu loaded it. */
+const initialPanel = () => loadedPanel === undefined ? { status: "loading" } : { status: "ready", value: loadedPanel };
 /**
  * The View menu.
  *
@@ -112,112 +53,56 @@ const HiddenControls = ({ hidden, layout, ...context }) => {
  */
 export const ViewMenu = ({ layout, ownView, movedIds, ...context }) => {
     const { isOpen, isDrawn, setIsOpen, buttonRef, panelRef, panelId } = usePopover();
-    const { switches } = useCatalogue();
-    const listRef = useRef(null);
-    const drag = useRef(undefined);
-    const [draggedId, setDraggedId] = useState(undefined);
-    const [announced, setAnnounced] = useState("");
-    const hintId = useId();
-    const shown = layout.placed.filter((each) => !each.isHidden);
-    const hidden = layout.placed.filter((each) => each.isHidden);
+    const catalogue = useCatalogue();
+    const { switches } = catalogue;
+    const [panel, setPanel] = useState(initialPanel);
     const ids = menuControlIds(layout.placed, movedIds);
-    const order = shown.map((each) => each.control.id).join(",");
-    useShiftedRows(listRef, order, draggedId);
     // the menu never runs past the window's edges: a narrow window keeps it inside, its widest values then scroll; a
     // short one scrolls its rows, the foot staying in sight
     useLayoutEffect(() => {
-        const panel = panelRef.current;
-        if (!isDrawn || panel === null)
+        const drawn = panelRef.current;
+        if (!isDrawn || drawn === null)
             return;
         const keepInside = () => {
-            const box = panel.getBoundingClientRect();
-            panel.style.maxWidth = `${window.innerWidth - box.left - EDGE_PX}px`;
-            panel.style.maxHeight = `${window.innerHeight - box.top - EDGE_PX}px`;
+            const box = drawn.getBoundingClientRect();
+            drawn.style.maxWidth = `${window.innerWidth - box.left - EDGE_PX}px`;
+            drawn.style.maxHeight = `${window.innerHeight - box.top - EDGE_PX}px`;
         };
         keepInside();
         window.addEventListener("resize", keepInside);
         return () => window.removeEventListener("resize", keepInside);
     }, [isDrawn, panelRef]);
-    /** Keeps the dragged row under the pointer, from where its row is drawn now. */
-    const follow = () => {
-        const current = drag.current;
-        const row = listRef.current?.querySelector(`[data-control="${current?.id}"]`);
-        if (current === undefined || row === null || row === undefined)
-            return;
-        const offset = current.pointerY - current.startY - (row.offsetTop - current.startTop);
-        row.style.transform = `translateY(${offset}px)`;
-    };
-    // after a move, the dragged row is drawn at its new place: it stays under the pointer
-    // biome-ignore lint/correctness/useExhaustiveDependencies: follows each new order while a row is dragged
-    useLayoutEffect(follow, [order]);
-    /** The list's rows as they are drawn now. */
-    const rowsNow = () => [
-        ...(listRef.current?.querySelectorAll("[data-control]") ?? [])
-    ];
-    /**
-     * Where the dragged row goes: past every other row whose middle its own middle passed, both read from the layout
-     * (never from how a running move draws them, which would move the target under the pointer and back).
-     *
-     * @param id - the dragged row's id.
-     * @param current - the drag.
-     */
-    const targetIndex = (id, current) => {
-        const rows = rowsNow();
-        const row = rows.find((each) => each.dataset["control"] === id);
-        if (row === undefined)
-            return 0;
-        const center = current.startTop + (current.pointerY - current.startY) + row.offsetHeight / 2;
-        return rows.filter((each) => each !== row && center > each.offsetTop + each.offsetHeight / 2).length;
-    };
-    // a menu closed while a row is dragged ends the drag
-    const stopDrag = useRef(undefined);
-    useEffect(() => () => stopDrag.current?.(), []);
-    const grab = (event, id) => {
-        const row = event.currentTarget.closest("[data-control]");
-        if (row === null || event.button !== 0)
+    // the panel's module loads when the menu is first drawn, if the pointer or the focus did not ask for it already
+    useEffect(() => {
+        if (!isDrawn || panel.status !== "loading")
             return;
-        // no text selection while dragging; the handle still takes the focus, so the arrow keys move its row next
-        event.preventDefault();
-        event.currentTarget.focus();
-        window.getSelection()?.removeAllRanges();
-        drag.current = { id, startY: event.clientY, startTop: row.offsetTop, pointerY: event.clientY };
-        setDraggedId(id);
-        // the window, not the handle, follows the pointer: moving the row in the page takes the handle's pointer capture
-        // away, and the release would never arrive
-        const moveTo = (moved) => {
-            const current = drag.current;
-            if (current === undefined)
-                return;
-            current.pointerY = moved.clientY;
-            follow();
-            const index = targetIndex(id, current);
-            if (index !== rowsNow().findIndex((each) => each.dataset["control"] === id))
-                layout.move(id, index);
-        };
-        const drop = () => {
-            window.removeEventListener("pointermove", moveTo);
-            window.removeEventListener("pointerup", drop);
-            window.removeEventListener("pointercancel", drop);
-            stopDrag.current = undefined;
-            drag.current = undefined;
-            setDraggedId(undefined);
-            // the row settles into its place from where the pointer left it
-            const dropped = rowsNow().find((each) => each.dataset["control"] === id);
-            if (dropped === undefined)
-                return;
-            const from = dropped.style.transform;
-            dropped.style.transform = "";
-            if (from !== "" && !window.matchMedia("(prefers-reduced-motion: reduce)").matches)
-                dropped.animate([{ transform: from }, { transform: "translateY(0)" }], {
-                    duration: SHIFT_MS,
-                    easing: SHIFT_EASING
-                });
+        let isCurrent = true;
+        loadPanel()
+            .then((value) => {
+            if (isCurrent)
+                setPanel({ status: "ready", value });
+        })
+            .catch((error) => {
+            if (isCurrent)
+                setPanel({ status: "error", message: error instanceof Error ? error.message : String(error) });
+        });
+        return () => {
+            isCurrent = false;
         };
-        stopDrag.current = drop;
-        window.addEventListener("pointermove", moveTo);
-        window.addEventListener("pointerup", drop);
-        window.addEventListener("pointercancel", drop);
+    }, [isDrawn, panel.status]);
+    // a panel drawn after the menu opened takes the focus to its chosen option, as the popover does for one drawn with it
+    // biome-ignore lint/correctness/useExhaustiveDependencies: only the panel's arrival moves the focus
+    useEffect(() => {
+        if (panel.status !== "ready" || !isOpen)
+            return;
+        const panelElement = panelRef.current;
+        if (panelElement === null || panelElement.contains(document.activeElement))
+            return;
+        panelElement.querySelector("input:checked")?.focus();
+    }, [panel.status]);
+    /** Fetches the panel ahead of a press, so the menu draws it at once. */
+    const preload = () => {
+        loadPanel().catch(() => undefined);
     };
-    return (_jsxs("div", { className: "forgebook-view-menu", children: [_jsxs("button", { ref: buttonRef, type: "button", className: "forgebook-button", "aria-expanded": isOpen, "aria-controls": panelId, onClick: (event) => setIsOpen(!isOpen, event), children: [_jsx(Icon, { name: "sliders", size: 14 }), STRINGS.view, hasViewChanges(ownView, switches, ids) ? (_jsx("span", { className: "forgebook-dot", role: "img", "aria-label": STRINGS.viewChanged })) : null, _jsx(Icon, { name: "chevronDown", size: 12 })] }), isDrawn ? (_jsxs("div", { ref: panelRef, id: panelId, className: "forgebook-popover forgebook-popover--arrange", role: "dialog", "aria-label": STRINGS.view, children: [_jsxs("div", { className: "forgebook-popover__body", children: [_jsx(NamedViews, { view: context.view, ownView: ownView, onViewChange: context.onViewChange }), _jsx("ol", { ref: listRef, className: "forgebook-arrange-list", "data-dragging": draggedId === undefined ? undefined : "", children: shown.map((each, index) => (_jsx(ControlRow, { each: each, index: index, count: shown.length, isDragged: each.control.id === draggedId, isMoved: movedIds.includes(each.control.id), isChanged: hasViewChanges(ownView, switches, [each.control.id]), layout: layout, hintId: hintId, onGrab: grab, onAnnounce: setAnnounced, ...context }, each.control.id))) }), _jsx("span", { id: hintId, className: "forgebook-visually-hidden", children: STRINGS.moveControlHint }), _jsx("span", { className: "forgebook-visually-hidden", "aria-live": "polite", children: announced }), _jsx(HiddenControls, { hidden: hidden, layout: layout, ...context }), _jsxs("label", { className: "forgebook-wrap-choice", children: [_jsx("input", { type: "checkbox", role: "switch", "aria-checked": layout.isWrapped, className: "forgebook-switch", checked: layout.isWrapped, onChange: (event) => layout.setIsWrapped(event.currentTarget.checked) }), STRINGS.wrapToolbar] })] }), _jsxs("div", { className: "forgebook-popover__foot", children: [_jsx("button", { type: "button", className: "forgebook-text-button", onClick: () => context.onViewChange(withDefaults(context.view, switches, ids)), children: STRINGS.resetView }), _jsx("button", { type: "button", className: "forgebook-text-button", title: STRINGS.toolbarInBrowser, disabled: !layout.isArranged, onClick: layout.reset, children: STRINGS.resetToolbar }), _jsx("span", { className: "forgebook-popover__note", children: STRINGS.viewInAddress })] })] })) : null] }));
+    return (_jsxs("div", { className: "forgebook-view-menu", children: [_jsxs("button", { ref: buttonRef, type: "button", className: "forgebook-button", "aria-expanded": isOpen, "aria-controls": panelId, onPointerEnter: preload, onFocus: preload, onClick: (event) => setIsOpen(!isOpen, event), children: [_jsx(Icon, { name: "sliders", size: 14 }), STRINGS.view, hasViewChanges(ownView, switches, ids, catalogue.audience) ? (_jsx("span", { className: "forgebook-dot", role: "img", "aria-label": STRINGS.viewChanged })) : null, _jsx(Icon, { name: "chevronDown", size: 12 })] }), isDrawn ? (_jsxs("div", { ref: panelRef, id: panelId, className: "forgebook-popover forgebook-popover--arrange", role: "dialog", "aria-label": STRINGS.view, children: [panel.status === "ready" ? (_jsx(panel.value, { layout: layout, ownView: ownView, movedIds: movedIds, ids: ids, drawControl: (control) => (_jsx(ToolbarControl, { control: control, form: "row", ...context })), ...context })) : null, panel.status === "error" ? (_jsxs("p", { className: "forgebook-problems", role: "alert", children: [STRINGS.viewMenuError, ": ", panel.message] })) : null] })) : null] }));
 };
-//# sourceMappingURL=ViewMenu.js.map

package/dist/src/shell/ViewMenuPanel.d.ts

@@ -0,0 +1,41 @@
+/**
+ * The View menu's panel: the named views, the controls in their order with their handles, pins and buttons, the hidden
+ * controls, the wrap choice and the resets.
+ *
+ * @remarks
+ * Loaded the first time the menu opens (`ViewMenu`): the menu's button is on every page, its panel only once asked
+ * for. The order is set here only, and the toolbar shows the pinned controls in it: nothing is dragged on the toolbar.
+ * A row follows the pointer one to one while it is dragged, and the others move out of its way animated; with the
+ * keyboard, the handle moves its row with the arrow keys and the new position is announced.
+ *
+ * @module
+ */
+import { type ReactNode } from "react";
+import type { ToolbarControl as Control } from "../toolbarLayout.ts";
+import { type ViewState } from "../viewState.ts";
+import type { ControlContext } from "./ToolbarControl.tsx";
+import type { ToolbarLayout } from "./useToolbarLayout.ts";
+/** The View menu panel's props. */
+export type ViewMenuPanelProps = ControlContext & {
+    /** The toolbar's arrangement. */
+    readonly layout: ToolbarLayout;
+    /** The pinned controls the bar has no room for now: listed here as pinned, shown here until there is room. */
+    readonly movedIds: readonly string[];
+    /** The person's own view, without what the story fixes: a value the story fixes is not a change of theirs. */
+    readonly ownView: ViewState;
+    /** The ids of the controls whose values the menu answers for (`menuControlIds`), which its reset puts back. */
+    readonly ids: readonly string[];
+    /**
+     * Draws a control in a row's form. The menu hands in the toolbar's own controls, which the page already has: imported
+     * here, they would take the modules they share with the page into chunks of their own, and the first load would grow
+     * by more than the panel saves.
+     */
+    readonly drawControl: (control: Control) => ReactNode;
+};
+/**
+ * The View menu's panel.
+ *
+ * @param props - the arrangement, the person's own view, the controls the menu answers for, and what every control
+ * shares.
+ */
+export declare const ViewMenuPanel: ({ layout, ownView, movedIds, ids, drawControl, ...context }: ViewMenuPanelProps) => ReactNode;

package/dist/src/shell/ViewMenuPanel.js

@@ -0,0 +1,199 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * The View menu's panel: the named views, the controls in their order with their handles, pins and buttons, the hidden
+ * controls, the wrap choice and the resets.
+ *
+ * @remarks
+ * Loaded the first time the menu opens (`ViewMenu`): the menu's button is on every page, its panel only once asked
+ * for. The order is set here only, and the toolbar shows the pinned controls in it: nothing is dragged on the toolbar.
+ * A row follows the pointer one to one while it is dragged, and the others move out of its way animated; with the
+ * keyboard, the handle moves its row with the arrow keys and the new position is announced.
+ *
+ * @module
+ */
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { DEVICE_PARAMETER } from "../deviceView.js";
+import { DEFAULT_VIEW, hasViewChanges } from "../viewState.js";
+import { ControlRow } from "./ControlRow.js";
+import { useCatalogue } from "./catalogueContext.js";
+import { controlLabel } from "./controlLabel.js";
+import { Icon } from "./icons.js";
+import { LATER_STRINGS } from "./laterStrings.js";
+import { NamedViews } from "./NamedViews.js";
+/** How long the rows take to move out of a dragged row's way, in ms: the shell's `$duration-quick`. */
+const SHIFT_MS = 150;
+/** How they move: the shell's `$ease-out`, decelerating. */
+const SHIFT_EASING = "cubic-bezier(0.22, 1, 0.36, 1)";
+/**
+ * The view with the given controls' values back at their defaults.
+ *
+ * @param view - the view.
+ * @param switches - the catalogue's switches.
+ * @param ids - the controls' ids.
+ * @param defaultAudience - the audience the catalogue starts with.
+ */
+const withDefaults = (view, switches, ids, defaultAudience) => ({
+    ...view,
+    switches: {
+        ...view.switches,
+        ...Object.fromEntries(switches.filter((each) => ids.includes(each.id)).map((each) => [each.id, each.default]))
+    },
+    backdrop: ids.includes("backdrop") ? DEFAULT_VIEW.backdrop : view.backdrop,
+    sheets: ids.includes("sheets") ? DEFAULT_VIEW.sheets : view.sheets,
+    text: ids.includes("text") ? DEFAULT_VIEW.text : view.text,
+    audience: ids.includes("audience") ? defaultAudience : view.audience,
+    ...(ids.includes(DEVICE_PARAMETER)
+        ? { device: DEFAULT_VIEW.device, orientation: DEFAULT_VIEW.orientation }
+        : {})
+});
+/**
+ * Moves the rows out of the way animated when the order changes: each row starts from where it was drawn and slides
+ * to its new place (the dragged row aside, which follows the pointer); without motion they jump.
+ *
+ * @param list - the list.
+ * @param order - the rows' ids in their order.
+ * @param draggedId - the dragged row's id, if one is dragged.
+ */
+const useShiftedRows = (list, order, draggedId) => {
+    const tops = useRef(new Map());
+    // biome-ignore lint/correctness/useExhaustiveDependencies: the rows are measured again whenever their order changes
+    useLayoutEffect(() => {
+        const rows = [...(list.current?.querySelectorAll("[data-control]") ?? [])];
+        const isReduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+        for (const row of rows) {
+            const id = row.dataset["control"] ?? "";
+            const before = tops.current.get(id);
+            tops.current.set(id, row.offsetTop);
+            if (before === undefined || id === draggedId || isReduced)
+                continue;
+            // where the row is drawn now: its last place plus what a running move still shifts it by
+            const shift = new DOMMatrixReadOnly(getComputedStyle(row).transform).m42;
+            const start = before + shift - row.offsetTop;
+            for (const running of row.getAnimations())
+                running.cancel();
+            if (start === 0)
+                continue;
+            row.animate([{ transform: `translateY(${start}px)` }, { transform: "translateY(0)" }], {
+                duration: SHIFT_MS,
+                easing: SHIFT_EASING
+            });
+        }
+    }, [order]);
+};
+/**
+ * The controls hidden in the menu, at its foot: their count, which opens them as rows like the others, each one usable
+ * while it stays hidden, with its pin (a hidden control may still sit on the toolbar) and a button that shows it
+ * again in its place.
+ *
+ * @param props - the hidden controls, the arrangement, and how a control is drawn.
+ */
+const HiddenControls = ({ hidden, layout, drawControl }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const listId = useId();
+    if (hidden.length === 0)
+        return null;
+    return (_jsxs("div", { className: "forgebook-hidden-controls", children: [_jsxs("button", { type: "button", className: "forgebook-text-button", "aria-expanded": isOpen, "aria-controls": listId, onClick: () => setIsOpen(!isOpen), children: [LATER_STRINGS.hiddenControls(hidden.length, hidden.filter((each) => each.isPinned).length), _jsx(Icon, { name: isOpen ? "chevronDown" : "chevronRight", size: 12 })] }), isOpen ? (_jsx("ul", { id: listId, className: "forgebook-arrange-list", children: hidden.map(({ control, isPinned }) => {
+                    const label = controlLabel(control);
+                    return (_jsxs("li", { className: "forgebook-arrange", "data-control": control.id, "data-hidden": "", children: [_jsx("span", { className: "forgebook-arrange__no-handle" }), _jsx("span", { className: "forgebook-popover__label", children: label }), _jsx("div", { className: "forgebook-arrange__control", children: drawControl(control) }), _jsx("button", { type: "button", className: "forgebook-icon-button", "aria-label": LATER_STRINGS.pinControl(label), title: LATER_STRINGS.pinControl(label), "aria-pressed": isPinned, onClick: () => layout.pin(control.id, !isPinned), children: _jsx(Icon, { name: "pin", size: 14 }) }), _jsx("button", { type: "button", className: "forgebook-icon-button", "aria-label": LATER_STRINGS.showControl(label), title: LATER_STRINGS.showControl(label), onClick: () => layout.hide(control.id, false), children: _jsx(Icon, { name: "eye", size: 14 }) })] }, control.id));
+                }) })) : null] }));
+};
+/**
+ * The View menu's panel.
+ *
+ * @param props - the arrangement, the person's own view, the controls the menu answers for, and what every control
+ * shares.
+ */
+export const ViewMenuPanel = ({ layout, ownView, movedIds, ids, drawControl, ...context }) => {
+    const catalogue = useCatalogue();
+    const { switches } = catalogue;
+    const listRef = useRef(null);
+    const drag = useRef(undefined);
+    const [draggedId, setDraggedId] = useState(undefined);
+    const [announced, setAnnounced] = useState("");
+    const hintId = useId();
+    const shown = layout.placed.filter((each) => !each.isHidden);
+    const hidden = layout.placed.filter((each) => each.isHidden);
+    const order = shown.map((each) => each.control.id).join(",");
+    useShiftedRows(listRef, order, draggedId);
+    /** Keeps the dragged row under the pointer, from where its row is drawn now. */
+    const follow = () => {
+        const current = drag.current;
+        const row = listRef.current?.querySelector(`[data-control="${current?.id}"]`);
+        if (current === undefined || row === null || row === undefined)
+            return;
+        const offset = current.pointerY - current.startY - (row.offsetTop - current.startTop);
+        row.style.transform = `translateY(${offset}px)`;
+    };
+    // after a move, the dragged row is drawn at its new place: it stays under the pointer
+    // biome-ignore lint/correctness/useExhaustiveDependencies: follows each new order while a row is dragged
+    useLayoutEffect(follow, [order]);
+    /** The list's rows as they are drawn now. */
+    const rowsNow = () => [
+        ...(listRef.current?.querySelectorAll("[data-control]") ?? [])
+    ];
+    /**
+     * Where the dragged row goes: past every other row whose middle its own middle passed, both read from the layout
+     * (never from how a running move draws them, which would move the target under the pointer and back).
+     *
+     * @param id - the dragged row's id.
+     * @param current - the drag.
+     */
+    const targetIndex = (id, current) => {
+        const rows = rowsNow();
+        const row = rows.find((each) => each.dataset["control"] === id);
+        if (row === undefined)
+            return 0;
+        const center = current.startTop + (current.pointerY - current.startY) + row.offsetHeight / 2;
+        return rows.filter((each) => each !== row && center > each.offsetTop + each.offsetHeight / 2).length;
+    };
+    // a menu closed while a row is dragged ends the drag
+    const stopDrag = useRef(undefined);
+    useEffect(() => () => stopDrag.current?.(), []);
+    const grab = (event, id) => {
+        const row = event.currentTarget.closest("[data-control]");
+        if (row === null || event.button !== 0)
+            return;
+        // no text selection while dragging; the handle still takes the focus, so the arrow keys move its row next
+        event.preventDefault();
+        event.currentTarget.focus();
+        window.getSelection()?.removeAllRanges();
+        drag.current = { id, startY: event.clientY, startTop: row.offsetTop, pointerY: event.clientY };
+        setDraggedId(id);
+        // the window, not the handle, follows the pointer: moving the row in the page takes the handle's pointer capture
+        // away, and the release would never arrive
+        const moveTo = (moved) => {
+            const current = drag.current;
+            if (current === undefined)
+                return;
+            current.pointerY = moved.clientY;
+            follow();
+            const index = targetIndex(id, current);
+            if (index !== rowsNow().findIndex((each) => each.dataset["control"] === id))
+                layout.move(id, index);
+        };
+        const drop = () => {
+            window.removeEventListener("pointermove", moveTo);
+            window.removeEventListener("pointerup", drop);
+            window.removeEventListener("pointercancel", drop);
+            stopDrag.current = undefined;
+            drag.current = undefined;
+            setDraggedId(undefined);
+            // the row settles into its place from where the pointer left it
+            const dropped = rowsNow().find((each) => each.dataset["control"] === id);
+            if (dropped === undefined)
+                return;
+            const from = dropped.style.transform;
+            dropped.style.transform = "";
+            if (from !== "" && !window.matchMedia("(prefers-reduced-motion: reduce)").matches)
+                dropped.animate([{ transform: from }, { transform: "translateY(0)" }], {
+                    duration: SHIFT_MS,
+                    easing: SHIFT_EASING
+                });
+        };
+        stopDrag.current = drop;
+        window.addEventListener("pointermove", moveTo);
+        window.addEventListener("pointerup", drop);
+        window.addEventListener("pointercancel", drop);
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "forgebook-popover__body", children: [_jsx(NamedViews, { view: context.view, ownView: ownView, onViewChange: context.onViewChange }), _jsx("ol", { ref: listRef, className: "forgebook-arrange-list", "data-dragging": draggedId === undefined ? undefined : "", children: shown.map((each, index) => (_jsx(ControlRow, { each: each, index: index, count: shown.length, isDragged: each.control.id === draggedId, isMoved: movedIds.includes(each.control.id), isChanged: hasViewChanges(ownView, switches, [each.control.id], catalogue.audience), layout: layout, hintId: hintId, onGrab: grab, onAnnounce: setAnnounced, drawControl: drawControl }, each.control.id))) }), _jsx("span", { id: hintId, className: "forgebook-visually-hidden", children: LATER_STRINGS.moveControlHint }), _jsx("span", { className: "forgebook-visually-hidden", "aria-live": "polite", children: announced }), _jsx(HiddenControls, { hidden: hidden, layout: layout, drawControl: drawControl }), _jsxs("label", { className: "forgebook-wrap-choice", children: [_jsx("input", { type: "checkbox", role: "switch", "aria-checked": layout.isWrapped, className: "forgebook-switch", checked: layout.isWrapped, onChange: (event) => layout.setIsWrapped(event.currentTarget.checked) }), LATER_STRINGS.wrapToolbar] })] }), _jsxs("div", { className: "forgebook-popover__foot", children: [_jsx("button", { type: "button", className: "forgebook-text-button", onClick: () => context.onViewChange(withDefaults(context.view, switches, ids, catalogue.audience)), children: LATER_STRINGS.resetView }), _jsx("button", { type: "button", className: "forgebook-text-button", title: LATER_STRINGS.toolbarInBrowser, disabled: !layout.isArranged, onClick: layout.reset, children: LATER_STRINGS.resetToolbar }), _jsx("span", { className: "forgebook-popover__note", children: LATER_STRINGS.viewInAddress })] })] }));
+};

package/dist/src/shell/WidthField.d.ts

@@ -14,11 +14,12 @@ export type WidthFieldProps = {
     readonly shownWidth: number | undefined;
     /** Called with a typed width, kept within the catalogue's range. */
     readonly onWidthChange: (width: StageWidth) => void;
+    /** Why the width cannot be typed (a device sets it), shown as the field's tooltip; none while it can. */
+    readonly disabledNote?: string | undefined;
 };
 /**
  * The width field.
  *
  * @param props - the set and the shown width, and what a typed width does.
  */
-export declare const WidthField: ({ width, shownWidth, onWidthChange }: WidthFieldProps) => ReactNode;
-//# sourceMappingURL=WidthField.d.ts.map
+export declare const WidthField: ({ width, shownWidth, onWidthChange, disabledNote }: WidthFieldProps) => ReactNode;

package/dist/src/shell/WidthField.js

@@ -14,7 +14,7 @@ import { STRINGS } from "./strings.js";
  *
  * @param props - the set and the shown width, and what a typed width does.
  */
-export const WidthField = ({ width, shownWidth, onWidthChange }) => {
+export const WidthField = ({ width, shownWidth, onWidthChange, disabledNote }) => {
     // the field's text while it is being typed in
     const [draft, setDraft] = useState(undefined);
     const { widths, widthRange } = useCatalogue();
@@ -30,11 +30,10 @@ export const WidthField = ({ width, shownWidth, onWidthChange }) => {
     };
     return (_jsxs("span", { className: "forgebook-width-field", "data-custom": isCustom ? "" : undefined, children: [_jsx("input", { className: "forgebook-width-field__input", 
                 // a text field with the numeric keyboard: a number field draws spin buttons the presets already do better
-                type: "text", inputMode: "numeric", pattern: "[0-9]*", "aria-label": STRINGS.widthTyped, title: width === "fill" ? STRINGS.widthFillNote : undefined, placeholder: STRINGS.widthAuto, value: draft ?? (shown === undefined ? "" : String(shown)), onChange: (event) => setDraft(event.currentTarget.value), onBlur: commit, onKeyDown: (event) => {
+                type: "text", inputMode: "numeric", pattern: "[0-9]*", "aria-label": STRINGS.widthTyped, disabled: disabledNote !== undefined, title: disabledNote ?? (width === "fill" ? STRINGS.widthFillNote : undefined), placeholder: STRINGS.widthAuto, value: draft ?? (shown === undefined ? "" : String(shown)), onChange: (event) => setDraft(event.currentTarget.value), onBlur: commit, onKeyDown: (event) => {
                     if (event.key === "Enter")
                         commit();
                     if (event.key === "Escape")
                         setDraft(undefined);
                 } }), _jsx("span", { className: "forgebook-width-field__unit", "aria-hidden": "true", children: "px" })] }));
 };
-//# sourceMappingURL=WidthField.js.map

package/dist/src/shell/asideStory.d.ts

@@ -0,0 +1,34 @@
+/**
+ * A story's second frame, for a plugin's tab: the story beside what the tab shows, as the stage has it now.
+ *
+ * @remarks
+ * The tab answers this frame itself, with the panel's values and the view, and the stage leaves it alone
+ * (`FRAME_ASIDE_ATTRIBUTE`), so the messages stay private to the shell.
+ *
+ * @module
+ */
+import { type PanelArgs } from "../messages.ts";
+import type { PluginStoryFrame } from "../plugin.ts";
+import type { LiveView, StageWidth } from "../viewState.ts";
+/** How the story is drawn again. */
+export type AsideStory = {
+    /** The frame's address, in the view shown. */
+    readonly address: string;
+    /** Its width on the stage. */
+    readonly width: StageWidth;
+    /** The colour its page has in the view; none without one. */
+    readonly background: string | undefined;
+    /** The values set in the panel, sent once it is ready. */
+    readonly args: PanelArgs;
+    /** The view's live part, sent once it is ready; none when the address already says it all (the compare view). */
+    readonly view: LiveView | undefined;
+};
+/**
+ * Draws a story's second frame in an element.
+ *
+ * @param target - the element.
+ * @param title - the frame's accessible name.
+ * @param aside - how the story is drawn.
+ * @returns what takes it away.
+ */
+export declare const showAsideStory: (target: HTMLElement, title: string, aside: AsideStory) => PluginStoryFrame;