forgebook 0.1.3 → 0.1.4

package/dist/src/shell/useFullPage.js

@@ -0,0 +1,149 @@
+/**
+ * An example's box opened to fill the page, over it, without leaving it: the box grows from where it sits to the
+ * page's size and shrinks back into its place, animated; Escape, a press on the shade or its button brings it back.
+ *
+ * @remarks
+ * The box is never moved in the page: an iframe moved to another parent loads again, and the story would lose its
+ * state. It is drawn fixed over the page instead, and a slot of its height keeps its place in the list, so nothing
+ * under it moves. Its size and place are animated (not scaled), so the story lays itself out at each size as it would
+ * in a window being resized. A reduced-motion preference opens and closes it at once. The address does not remember
+ * it: it is a moment's look, not a page.
+ *
+ * @module
+ */
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+/** How long the box takes to fill the page, in ms: the shell's `$duration-medium`. */
+const OPEN_MS = 260;
+/** How long it takes to go back to its place, in ms. */
+const CLOSE_MS = 200;
+/** The page's easing for a thing that moves and settles: the shell's `$ease-slide`. */
+const EASING = "cubic-bezier(0.32, 0.72, 0, 1)";
+/** A rectangle as the keyframes of a fixed box write it. */
+const frameOf = (rect) => ({
+    top: `${rect.top}px`,
+    left: `${rect.left}px`,
+    width: `${rect.width}px`,
+    height: `${rect.height}px`
+});
+/** Whether the person asked for less motion. */
+const isReduced = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+/** An example's box opened to fill the page. */
+export const useFullPage = () => {
+    const [isFull, setIsFull] = useState(false);
+    const [isOver, setIsOver] = useState(false);
+    const [slotHeight, setSlotHeight] = useState(0);
+    const boxRef = useRef(null);
+    const slotRef = useRef(null);
+    const shadeRef = useRef(null);
+    const stageRef = useRef(null);
+    const [stageHeight, setStageHeight] = useState(undefined);
+    // where the box was before it filled the page, for its growing in
+    const from = useRef(undefined);
+    // the move back to its place, kept to its end so the box is never drawn full for a frame before it is put back
+    const closing = useRef(undefined);
+    // opened by the pointer: Escape, a key, would otherwise light the focused button's ring as if the keyboard moved
+    const isByPointer = useRef(false);
+    const open = () => {
+        const box = boxRef.current;
+        if (box === null)
+            return;
+        closing.current?.cancel();
+        closing.current = undefined;
+        const rect = box.getBoundingClientRect();
+        from.current = rect;
+        setSlotHeight(rect.height);
+        setIsFull(true);
+        setIsOver(true);
+    };
+    const close = () => {
+        const box = boxRef.current;
+        const slot = slotRef.current;
+        setIsFull(false);
+        if (box === null || slot === null || isReduced()) {
+            setIsOver(false);
+            return;
+        }
+        const animation = box.animate([frameOf(box.getBoundingClientRect()), frameOf(slot.getBoundingClientRect())], {
+            duration: CLOSE_MS,
+            easing: EASING,
+            fill: "forwards"
+        });
+        shadeRef.current?.animate([{ opacity: 1 }, { opacity: 0 }], { duration: CLOSE_MS, fill: "forwards" });
+        closing.current = animation;
+        animation.finished
+            .then(() => {
+            if (closing.current === animation)
+                setIsOver(false);
+        })
+            // opened again while it went back: the opening takes over
+            .catch(() => undefined);
+    };
+    // it grows from where it sat to the page's size as it is first drawn over the page
+    useLayoutEffect(() => {
+        const box = boxRef.current;
+        const start = from.current;
+        if (!isFull || box === null || start === undefined || isReduced())
+            return;
+        box.animate([frameOf(start), frameOf(box.getBoundingClientRect())], {
+            duration: OPEN_MS,
+            easing: EASING
+        });
+        shadeRef.current?.animate([{ opacity: 0 }, { opacity: 1 }], { duration: OPEN_MS });
+    }, [isFull]);
+    // back in its place: the move that put it there is let go before the page is drawn
+    useLayoutEffect(() => {
+        if (isOver)
+            return;
+        closing.current?.cancel();
+        closing.current = undefined;
+    }, [isOver]);
+    // the room the story has over the page, followed as the box grows, shrinks and the window changes
+    useLayoutEffect(() => {
+        const stage = stageRef.current;
+        if (!isOver || stage === null) {
+            setStageHeight(undefined);
+            return;
+        }
+        const measure = () => setStageHeight(stage.clientHeight);
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(stage);
+        return () => observer.disconnect();
+    }, [isOver]);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: close reads only refs and the states' setters
+    useEffect(() => {
+        if (!isFull)
+            return;
+        const closeOnEscape = (event) => {
+            if (event.key !== "Escape")
+                return;
+            close();
+            const focused = document.activeElement;
+            if (isByPointer.current && focused instanceof HTMLElement && boxRef.current?.contains(focused)) {
+                focused.blur();
+                focused.focus({ focusVisible: false });
+            }
+        };
+        document.addEventListener("keydown", closeOnEscape);
+        return () => document.removeEventListener("keydown", closeOnEscape);
+    }, [isFull]);
+    return {
+        isFull,
+        isOver,
+        slotHeight,
+        boxRef,
+        slotRef,
+        shadeRef,
+        stageRef,
+        stageHeight,
+        toggle: (press) => {
+            if (isFull) {
+                close();
+                return;
+            }
+            isByPointer.current = (press?.detail ?? 0) > 0;
+            open();
+        }
+    };
+};
+//# sourceMappingURL=useFullPage.js.map

package/dist/src/shell/useFullPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFullPage.js","sourceRoot":"","sources":["../../../src/shell/useFullPage.ts"],"names":[],"mappings":"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"}

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

@@ -2,15 +2,29 @@
  * A button's popover: open and closed, closed by a press outside or Escape (the focus going back to the button), with
  * the focus on its chosen option when it opens. The View and Compare menus use it.
  *
+ * @remarks
+ * The panel grows in from its button's corner and shrinks back into it when it closes, whatever closes it: it stays
+ * drawn until its closing has played. A reduced-motion preference opens and closes it at once.
+ *
  * @module
  */
 import { type RefObject } from "react";
 /** What a menu wires to its button and panel. */
 export type Popover = {
-    /** Whether the panel is shown. */
+    /** Whether the panel is open: what its button's state and a press on it read. */
     readonly isOpen: boolean;
-    /** Opens or closes the panel. */
-    readonly setIsOpen: (isOpen: boolean) => void;
+    /** Whether the panel is drawn: open, or still closing. */
+    readonly isDrawn: boolean;
+    /**
+     * Opens or closes the panel.
+     *
+     * @param isOpen - whether it opens.
+     * @param press - the press that asked, when one did: opened by the pointer (`detail` above 0), Escape gives the
+     *   focus back to the button without its ring.
+     */
+    readonly setIsOpen: (isOpen: boolean, press?: {
+        readonly detail: number;
+    }) => void;
     /** The button. */
     readonly buttonRef: RefObject<HTMLButtonElement | null>;
     /** The panel. */

package/dist/src/shell/usePopover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePopover.d.ts","sourceRoot":"","sources":["../../../src/shell/usePopover.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,KAAK,SAAS,EAAsC,MAAM,OAAO,CAAC;AAE3E,iDAAiD;AACjD,MAAM,MAAM,OAAO,GAAG;IACpB,kCAAkC;IAClC,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB,iCAAiC;IACjC,QAAQ,CAAC,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C,kBAAkB;IAClB,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACxD,iBAAiB;IACjB,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACpD,wDAAwD;IACxD,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,0BAA0B;AAC1B,eAAO,MAAM,UAAU,QAAO,OA6B7B,CAAC"}
+{"version":3,"file":"usePopover.d.ts","sourceRoot":"","sources":["../../../src/shell/usePopover.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,EAAE,KAAK,SAAS,EAAuD,MAAM,OAAO,CAAC;AAE5F,iDAAiD;AACjD,MAAM,MAAM,OAAO,GAAG;IACpB,iFAAiF;IACjF,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB,0DAA0D;IAC1D,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B;;;;;;OAMG;IACH,QAAQ,CAAC,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE;QAAE,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACnF,kBAAkB;IAClB,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACxD,iBAAiB;IACjB,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACpD,wDAAwD;IACxD,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;CAC1B,CAAC;AAiBF,0BAA0B;AAC1B,eAAO,MAAM,UAAU,QAAO,OA4E7B,CAAC"}

package/dist/src/shell/usePopover.js

@@ -2,15 +2,75 @@
  * A button's popover: open and closed, closed by a press outside or Escape (the focus going back to the button), with
  * the focus on its chosen option when it opens. The View and Compare menus use it.
  *
+ * @remarks
+ * The panel grows in from its button's corner and shrinks back into it when it closes, whatever closes it: it stays
+ * drawn until its closing has played. A reduced-motion preference opens and closes it at once.
+ *
  * @module
  */
-import { useEffect, useId, useRef, useState } from "react";
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+/** How long the panel takes to open, in ms: the shell's `$duration-quick`. */
+const OPEN_MS = 150;
+/** How long it takes to close, in ms: shorter, as a thing going away. */
+const CLOSE_MS = 110;
+/** The panel's look when it is not open: faded, a little smaller and nearer its button. */
+const CLOSED_FRAME = { opacity: 0, transform: "translateY(-0.25rem) scale(0.97)" };
+/** Its look when open. */
+const OPEN_FRAME = { opacity: 1, transform: "none" };
+/** Whether the person asked for less motion. */
+const isReduced = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 /** A button's popover. */
 export const usePopover = () => {
-    const [isOpen, setIsOpen] = useState(false);
+    const [isOpen, setOpen] = useState(false);
+    const [isDrawn, setIsDrawn] = useState(false);
     const buttonRef = useRef(null);
     const panelRef = useRef(null);
+    const closing = useRef(undefined);
+    const isByPointer = useRef(false);
     const panelId = useId();
+    const setIsOpen = (isOpening, press) => {
+        const panel = panelRef.current;
+        if (isOpening) {
+            isByPointer.current = (press?.detail ?? 0) > 0;
+            // opened again while it closes: the closing stops and it grows in again
+            closing.current?.cancel();
+            closing.current = undefined;
+            setOpen(true);
+            setIsDrawn(true);
+            return;
+        }
+        setOpen(false);
+        if (panel === null || isReduced()) {
+            setIsDrawn(false);
+            return;
+        }
+        const animation = panel.animate([OPEN_FRAME, CLOSED_FRAME], {
+            duration: CLOSE_MS,
+            easing: "cubic-bezier(0.4, 0, 1, 1)",
+            fill: "forwards"
+        });
+        closing.current = animation;
+        animation.finished
+            .then(() => {
+            if (closing.current !== animation)
+                return;
+            closing.current = undefined;
+            setIsDrawn(false);
+        })
+            // a cancelled closing (opened again) leaves the panel open
+            .catch(() => undefined);
+    };
+    // it grows in from its button's corner as it is drawn
+    useLayoutEffect(() => {
+        const panel = panelRef.current;
+        if (!isOpen || panel === null || isReduced())
+            return;
+        panel.animate([CLOSED_FRAME, OPEN_FRAME], {
+            duration: OPEN_MS,
+            easing: "cubic-bezier(0.22, 1, 0.36, 1)"
+        });
+    }, [isOpen]);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: setIsOpen reads only refs and the state's setter
     useEffect(() => {
         if (!isOpen)
             return;
@@ -24,8 +84,9 @@ export const usePopover = () => {
             if (!isOutside && !isEscape)
                 return;
             setIsOpen(false);
+            // the focus goes back where it came from, its ring lit only for the keyboard that opened the panel
             if (isEscape)
-                buttonRef.current?.focus();
+                buttonRef.current?.focus({ focusVisible: !isByPointer.current });
         };
         document.addEventListener("pointerdown", close);
         document.addEventListener("keydown", close);
@@ -34,6 +95,6 @@ export const usePopover = () => {
             document.removeEventListener("keydown", close);
         };
     }, [isOpen]);
-    return { isOpen, setIsOpen, buttonRef, panelRef, panelId };
+    return { isOpen, isDrawn, setIsOpen, buttonRef, panelRef, panelId };
 };
 //# sourceMappingURL=usePopover.js.map

package/dist/src/shell/usePopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePopover.js","sourceRoot":"","sources":["../../../src/shell/usePopover.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAkB,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAgB3E,0BAA0B;AAC1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAY,EAAE;IACtC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAClD,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC9C,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IAExB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,MAAM;YAAE,OAAO;QACpB,QAAQ,CAAC,OAAO,EAAE,aAAa,CAAmB,eAAe,CAAC,EAAE,KAAK,EAAE,CAAC;QAC5E,MAAM,KAAK,GAAG,CAAC,KAAmC,EAAQ,EAAE;YAC1D,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,YAAY,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC;YAClE,MAAM,SAAS,GACb,KAAK,YAAY,YAAY;gBAC7B,CAAC,QAAQ,CAAC,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC;gBACnC,CAAC,SAAS,CAAC,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;YACvC,MAAM,QAAQ,GAAG,KAAK,YAAY,aAAa,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,CAAC;YAC1E,IAAI,CAAC,SAAS,IAAI,CAAC,QAAQ;gBAAE,OAAO;YACpC,SAAS,CAAC,KAAK,CAAC,CAAC;YACjB,IAAI,QAAQ;gBAAE,SAAS,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;QAC3C,CAAC,CAAC;QACF,QAAQ,CAAC,gBAAgB,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC;QAChD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;QAC5C,OAAO,GAAS,EAAE;YAChB,QAAQ,CAAC,mBAAmB,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC;YACnD,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;QACjD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC;AAC7D,CAAC,CAAC"}
+{"version":3,"file":"usePopover.js","sourceRoot":"","sources":["../../../src/shell/usePopover.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,EAAkB,SAAS,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAwB5F,8EAA8E;AAC9E,MAAM,OAAO,GAAG,GAAG,CAAC;AAEpB,yEAAyE;AACzE,MAAM,QAAQ,GAAG,GAAG,CAAC;AAErB,2FAA2F;AAC3F,MAAM,YAAY,GAAa,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,kCAAkC,EAAE,CAAC;AAE7F,0BAA0B;AAC1B,MAAM,UAAU,GAAa,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC;AAE/D,gDAAgD;AAChD,MAAM,SAAS,GAAG,GAAY,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,kCAAkC,CAAC,CAAC,OAAO,CAAC;AAE/F,0BAA0B;AAC1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAY,EAAE;IACtC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAClD,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC9C,MAAM,OAAO,GAAG,MAAM,CAAwB,SAAS,CAAC,CAAC;IACzD,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAClC,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IAExB,MAAM,SAAS,GAAG,CAAC,SAAkB,EAAE,KAAmC,EAAQ,EAAE;QAClF,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC;QAC/B,IAAI,SAAS,EAAE,CAAC;YACd,WAAW,CAAC,OAAO,GAAG,CAAC,KAAK,EAAE,MAAM,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;YAC/C,wEAAwE;YACxE,OAAO,CAAC,OAAO,EAAE,MAAM,EAAE,CAAC;YAC1B,OAAO,CAAC,OAAO,GAAG,SAAS,CAAC;YAC5B,OAAO,CAAC,IAAI,CAAC,CAAC;YACd,UAAU,CAAC,IAAI,CAAC,CAAC;YACjB,OAAO;QACT,CAAC;QACD,OAAO,CAAC,KAAK,CAAC,CAAC;QACf,IAAI,KAAK,KAAK,IAAI,IAAI,SAAS,EAAE,EAAE,CAAC;YAClC,UAAU,CAAC,KAAK,CAAC,CAAC;YAClB,OAAO;QACT,CAAC;QACD,MAAM,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,UAAU,EAAE,YAAY,CAAC,EAAE;YAC1D,QAAQ,EAAE,QAAQ;YAClB,MAAM,EAAE,4BAA4B;YACpC,IAAI,EAAE,UAAU;SACjB,CAAC,CAAC;QACH,OAAO,CAAC,OAAO,GAAG,SAAS,CAAC;QAC5B,SAAS,CAAC,QAAQ;aACf,IAAI,CAAC,GAAG,EAAE;YACT,IAAI,OAAO,CAAC,OAAO,KAAK,SAAS;gBAAE,OAAO;YAC1C,OAAO,CAAC,OAAO,GAAG,SAAS,CAAC;YAC5B,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC,CAAC;YACF,2DAA2D;aAC1D,KAAK,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,sDAAsD;IACtD,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC;QAC/B,IAAI,CAAC,MAAM,IAAI,KAAK,KAAK,IAAI,IAAI,SAAS,EAAE;YAAE,OAAO;QACrD,KAAK,CAAC,OAAO,CAAC,CAAC,YAAY,EAAE,UAAU,CAAC,EAAE;YACxC,QAAQ,EAAE,OAAO;YACjB,MAAM,EAAE,gCAAgC;SACzC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,4GAA4G;IAC5G,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,MAAM;YAAE,OAAO;QACpB,QAAQ,CAAC,OAAO,EAAE,aAAa,CAAmB,eAAe,CAAC,EAAE,KAAK,EAAE,CAAC;QAC5E,MAAM,KAAK,GAAG,CAAC,KAAmC,EAAQ,EAAE;YAC1D,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,YAAY,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC;YAClE,MAAM,SAAS,GACb,KAAK,YAAY,YAAY;gBAC7B,CAAC,QAAQ,CAAC,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC;gBACnC,CAAC,SAAS,CAAC,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;YACvC,MAAM,QAAQ,GAAG,KAAK,YAAY,aAAa,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,CAAC;YAC1E,IAAI,CAAC,SAAS,IAAI,CAAC,QAAQ;gBAAE,OAAO;YACpC,SAAS,CAAC,KAAK,CAAC,CAAC;YACjB,mGAAmG;YACnG,IAAI,QAAQ;gBAAE,SAAS,CAAC,OAAO,EAAE,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC,CAAC;QACjF,CAAC,CAAC;QACF,QAAQ,CAAC,gBAAgB,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC;QAChD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;QAC5C,OAAO,GAAS,EAAE;YAChB,QAAQ,CAAC,mBAAmB,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC;YACnD,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;QACjD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC;AACtE,CAAC,CAAC"}

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

@@ -1,3 +1,14 @@
+/**
+ * A value this browser keeps for the next visit (the panel's height, the sidebar's width): a convenience of the
+ * person, not part of the page an address shares.
+ *
+ * @remarks
+ * Storage may be missing or refused (a private window, blocked site data): the value then lives only as long as the
+ * page, and nothing fails.
+ *
+ * @module
+ */
+import { type Dispatch, type SetStateAction } from "react";
 /**
  * A value kept in this browser.
  *
@@ -5,7 +16,7 @@
  *   catalogues on one origin keep their own.
  * @param read - the value a stored text holds, or the default when it holds none.
  * @param write - the text a value is stored as.
- * @returns the value and its setter.
+ * @returns the value and its setter, which also takes a function of the current value.
  */
-export declare const useStored: <TValue>(name: string, read: (stored: string | null) => TValue, write: (value: TValue) => string) => [TValue, (value: TValue) => void];
+export declare const useStored: <TValue>(name: string, read: (stored: string | null) => TValue, write: (value: TValue) => string) => [TValue, Dispatch<SetStateAction<TValue>>];
 //# sourceMappingURL=useStored.d.ts.map

package/dist/src/shell/useStored.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useStored.d.ts","sourceRoot":"","sources":["../../../src/shell/useStored.ts"],"names":[],"mappings":"AAoDA;;;;;;;;GAQG;AACH,eAAO,MAAM,SAAS,GAAI,MAAM,EAC9B,MAAM,MAAM,EACZ,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,MAAM,EACvC,OAAO,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,KAC/B,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAMlC,CAAC"}
+{"version":3,"file":"useStored.d.ts","sourceRoot":"","sources":["../../../src/shell/useStored.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAuB,MAAM,OAAO,CAAC;AA0ChF;;;;;;;;GAQG;AACH,eAAO,MAAM,SAAS,GAAI,MAAM,EAC9B,MAAM,MAAM,EACZ,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,MAAM,EACvC,OAAO,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,KAC/B,CAAC,MAAM,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAM3C,CAAC"}

package/dist/src/shell/useStored.js

@@ -56,7 +56,7 @@ const movedStored = (name, key) => {
  *   catalogues on one origin keep their own.
  * @param read - the value a stored text holds, or the default when it holds none.
  * @param write - the text a value is stored as.
- * @returns the value and its setter.
+ * @returns the value and its setter, which also takes a function of the current value.
  */
 export const useStored = (name, read, write) => {
     const key = `${useCatalogue().id}:${name}`;

package/dist/src/shell/useStored.js.map

@@ -1 +1 @@
-{"version":3,"file":"useStored.js","sourceRoot":"","sources":["../../../src/shell/useStored.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD,qFAAqF;AACrF,MAAM,UAAU,GAAG,CAAC,GAAW,EAAiB,EAAE;IAChD,IAAI,CAAC;QACH,OAAO,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IAC1C,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,IAAI,CAAC;IACd,CAAC;AACH,CAAC,CAAC;AAEF,wDAAwD;AACxD,MAAM,WAAW,GAAG,CAAC,GAAW,EAAE,KAAa,EAAQ,EAAE;IACvD,IAAI,CAAC;QACH,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;IAC1C,CAAC;IAAC,MAAM,CAAC;QACP,+CAA+C;IACjD,CAAC;AACH,CAAC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,WAAW,GAAG,CAAC,IAAY,EAAE,GAAW,EAAiB,EAAE;IAC/D,MAAM,GAAG,GAAG,UAAU,CAAC,aAAa,IAAI,EAAE,CAAC,CAAC;IAC5C,IAAI,GAAG,KAAK,IAAI;QAAE,OAAO,IAAI,CAAC;IAC9B,WAAW,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;IACtB,IAAI,CAAC;QACH,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,aAAa,IAAI,EAAE,CAAC,CAAC;IACtD,CAAC;IAAC,MAAM,CAAC;QACP,0DAA0D;IAC5D,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CACvB,IAAY,EACZ,IAAuC,EACvC,KAAgC,EACG,EAAE;IACrC,MAAM,GAAG,GAAG,GAAG,YAAY,EAAE,CAAC,EAAE,IAAI,IAAI,EAAE,CAAC;IAC3C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,WAAW,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;IAC1F,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;IAC1B,SAAS,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,GAAG,EAAE,IAAI,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC;IACrD,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;AAC3B,CAAC,CAAC"}
+{"version":3,"file":"useStored.js","sourceRoot":"","sources":["../../../src/shell/useStored.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,EAAsC,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEhF,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD,qFAAqF;AACrF,MAAM,UAAU,GAAG,CAAC,GAAW,EAAiB,EAAE;IAChD,IAAI,CAAC;QACH,OAAO,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IAC1C,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,IAAI,CAAC;IACd,CAAC;AACH,CAAC,CAAC;AAEF,wDAAwD;AACxD,MAAM,WAAW,GAAG,CAAC,GAAW,EAAE,KAAa,EAAQ,EAAE;IACvD,IAAI,CAAC;QACH,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;IAC1C,CAAC;IAAC,MAAM,CAAC;QACP,+CAA+C;IACjD,CAAC;AACH,CAAC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,WAAW,GAAG,CAAC,IAAY,EAAE,GAAW,EAAiB,EAAE;IAC/D,MAAM,GAAG,GAAG,UAAU,CAAC,aAAa,IAAI,EAAE,CAAC,CAAC;IAC5C,IAAI,GAAG,KAAK,IAAI;QAAE,OAAO,IAAI,CAAC;IAC9B,WAAW,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;IACtB,IAAI,CAAC;QACH,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,aAAa,IAAI,EAAE,CAAC,CAAC;IACtD,CAAC;IAAC,MAAM,CAAC;QACP,0DAA0D;IAC5D,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CACvB,IAAY,EACZ,IAAuC,EACvC,KAAgC,EACY,EAAE;IAC9C,MAAM,GAAG,GAAG,GAAG,YAAY,EAAE,CAAC,EAAE,IAAI,IAAI,EAAE,CAAC;IAC3C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,WAAW,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;IAC1F,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;IAC1B,SAAS,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,GAAG,EAAE,IAAI,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC;IACrD,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;AAC3B,CAAC,CAAC"}

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

@@ -0,0 +1,39 @@
+/**
+ * The person's arrangement of the toolbar, kept in their browser per catalogue: where each control sits, in what
+ * order, whether a full bar wraps, the keys they gave the controls, and the changes the View menu and the toolbar's
+ * controls make to it.
+ *
+ * @module
+ */
+import { type ControlKeys } from "../controlKeys.ts";
+import { type PlacedControl } from "../toolbarLayout.ts";
+/** The arrangement and what changes it. */
+export type ToolbarLayout = {
+    /** Every control and where it sits, in the person's order. */
+    readonly placed: readonly PlacedControl[];
+    /** Whether the person arranged anything: "Reset toolbar" then brings the catalogue's back. */
+    readonly isArranged: boolean;
+    /** Pins a control on the toolbar or takes it off. */
+    readonly pin: (id: string, isPinned: boolean) => void;
+    /** Hides a control in the View menu or shows it there again. */
+    readonly hide: (id: string, isHidden: boolean) => void;
+    /** Moves a control to a position among the shown ones. */
+    readonly move: (id: string, index: number) => void;
+    /** Forgets the person's arrangement and their keys. */
+    readonly reset: () => void;
+    /** Whether the bar wraps onto more lines when its pinned controls do not fit, instead of moving them into View. */
+    readonly isWrapped: boolean;
+    /** Turns the wrapping on or off. */
+    readonly setIsWrapped: (isWrapped: boolean) => void;
+    /** The keys that cycle the controls: the catalogue's, with the person's own over them. */
+    readonly keys: ControlKeys;
+    /**
+     * Gives a control another key, or takes its key away (`null`).
+     *
+     * @returns why the key cannot be given; none when it was.
+     */
+    readonly setKey: (id: string, key: string | null) => string | undefined;
+};
+/** The person's arrangement of the toolbar. */
+export declare const useToolbarLayout: () => ToolbarLayout;
+//# sourceMappingURL=useToolbarLayout.d.ts.map

package/dist/src/shell/useToolbarLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToolbarLayout.d.ts","sourceRoot":"","sources":["../../../src/shell/useToolbarLayout.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,KAAK,WAAW,EAA6C,MAAM,mBAAmB,CAAC;AAChG,OAAO,EAGL,KAAK,aAAa,EAMnB,MAAM,qBAAqB,CAAC;AAI7B,2CAA2C;AAC3C,MAAM,MAAM,aAAa,GAAG;IAC1B,8DAA8D;IAC9D,QAAQ,CAAC,MAAM,EAAE,SAAS,aAAa,EAAE,CAAC;IAC1C,8FAA8F;IAC9F,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAC7B,qDAAqD;IACrD,QAAQ,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACtD,gEAAgE;IAChE,QAAQ,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvD,0DAA0D;IAC1D,QAAQ,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,uDAAuD;IACvD,QAAQ,CAAC,KAAK,EAAE,MAAM,IAAI,CAAC;IAC3B,mHAAmH;IACnH,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAC5B,oCAAoC;IACpC,QAAQ,CAAC,YAAY,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACpD,0FAA0F;IAC1F,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;IAC3B;;;;OAIG;IACH,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,MAAM,GAAG,SAAS,CAAC;CACzE,CAAC;AAqBF,+CAA+C;AAC/C,eAAO,MAAM,gBAAgB,QAAO,aAkCnC,CAAC"}

package/dist/src/shell/useToolbarLayout.js

@@ -0,0 +1,58 @@
+/**
+ * The person's arrangement of the toolbar, kept in their browser per catalogue: where each control sits, in what
+ * order, whether a full bar wraps, the keys they gave the controls, and the changes the View menu and the toolbar's
+ * controls make to it.
+ *
+ * @module
+ */
+import { shownKeys, withReaderKey } from "../controlKeys.js";
+import { arrangementOf, arrangementText, placedControls, readArrangement, withHidden, withPinned, withPosition } from "../toolbarLayout.js";
+import { useCatalogue } from "./catalogueContext.js";
+import { useStored } from "./useStored.js";
+/** The person's keys a stored text holds; none for anything else. */
+const readKeys = (stored) => {
+    if (stored === null || stored === "")
+        return {};
+    try {
+        const parsed = JSON.parse(stored);
+        if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed))
+            return {};
+        return Object.fromEntries(Object.entries(parsed).filter((entry) => typeof entry[1] === "string" || entry[1] === null));
+    }
+    catch {
+        return {};
+    }
+};
+/** The text the person's keys are stored as; empty for none. */
+const keysText = (keys) => (Object.keys(keys).length === 0 ? "" : JSON.stringify(keys));
+/** The person's arrangement of the toolbar. */
+export const useToolbarLayout = () => {
+    const catalogue = useCatalogue();
+    const [arrangement, setArrangement] = useStored("toolbar", readArrangement, arrangementText);
+    const [isWrapped, setIsWrapped] = useStored("toolbar-wrap", (stored) => stored === "true", String);
+    const [readerKeys, setReaderKeys] = useStored("toolbar-keys", readKeys, keysText);
+    const placed = placedControls(catalogue, arrangement);
+    return {
+        placed,
+        isArranged: arrangement !== undefined || Object.keys(readerKeys).length > 0,
+        // from the arrangement as it is when the change applies: a drag moves a row several times before a new render
+        pin: (id, isPinned) => setArrangement((current) => arrangementOf(withPinned(placedControls(catalogue, current), id, isPinned))),
+        hide: (id, isHidden) => setArrangement((current) => arrangementOf(withHidden(placedControls(catalogue, current), id, isHidden))),
+        move: (id, index) => setArrangement((current) => arrangementOf(withPosition(placedControls(catalogue, current), id, index))),
+        reset: () => {
+            setArrangement(undefined);
+            setReaderKeys({});
+        },
+        isWrapped,
+        setIsWrapped,
+        keys: shownKeys(catalogue.keys, readerKeys),
+        setKey: (id, key) => {
+            const changed = withReaderKey(catalogue.keys, readerKeys, id, key);
+            if (typeof changed === "string")
+                return changed;
+            setReaderKeys(changed);
+            return undefined;
+        }
+    };
+};
+//# sourceMappingURL=useToolbarLayout.js.map

package/dist/src/shell/useToolbarLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToolbarLayout.js","sourceRoot":"","sources":["../../../src/shell/useToolbarLayout.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,31 @@
+/**
+ * The pinned controls a narrow toolbar has no room for: they stay in the View menu for as long as the bar is narrow,
+ * the last pinned first, and come back when it widens, so the bar never wraps or squeezes a control.
+ *
+ * @remarks
+ * The pinned controls sit in a box that takes the room the rest of the bar leaves (the sidebar's button, View, the
+ * panel, Compare): that box's width is their room. Each pinned control's width is measured while it is drawn and
+ * remembered, so one moved out can be brought back when there is room for it again; a control pinned while the bar is
+ * narrow is drawn once, measured, then moved out if it does not fit.
+ *
+ * @module
+ */
+import { type RefObject } from "react";
+/**
+ * The ids of the pinned controls that do not fit, in their order: those from the first that passes the room on.
+ *
+ * @param pinned - the pinned controls' ids, in their order.
+ * @param widths - each one's measured width, in CSS px.
+ * @param room - the room they have, in CSS px.
+ * @param gap - the gap between two of them, in CSS px.
+ */
+export declare const overflowing: (pinned: readonly string[], widths: ReadonlyMap<string, number>, room: number, gap: number) => string[];
+/**
+ * The pinned controls the bar has no room for.
+ *
+ * @param box - the box the pinned controls sit in.
+ * @param pinned - the pinned controls' ids, in their order.
+ * @returns the ids of those moved into the View menu.
+ */
+export declare const useToolbarOverflow: (box: RefObject<HTMLElement | null>, pinned: readonly string[]) => string[];
+//# sourceMappingURL=useToolbarOverflow.d.ts.map

package/dist/src/shell/useToolbarOverflow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToolbarOverflow.d.ts","sourceRoot":"","sources":["../../../src/shell/useToolbarOverflow.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,EAAE,KAAK,SAAS,EAAqC,MAAM,OAAO,CAAC;AAE1E;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,GACtB,QAAQ,SAAS,MAAM,EAAE,EACzB,QAAQ,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,EACnC,MAAM,MAAM,EACZ,KAAK,MAAM,KACV,MAAM,EAOR,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,GAC7B,KAAK,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAClC,QAAQ,SAAS,MAAM,EAAE,KACxB,MAAM,EAuBR,CAAC"}

package/dist/src/shell/useToolbarOverflow.js

@@ -0,0 +1,62 @@
+/**
+ * The pinned controls a narrow toolbar has no room for: they stay in the View menu for as long as the bar is narrow,
+ * the last pinned first, and come back when it widens, so the bar never wraps or squeezes a control.
+ *
+ * @remarks
+ * The pinned controls sit in a box that takes the room the rest of the bar leaves (the sidebar's button, View, the
+ * panel, Compare): that box's width is their room. Each pinned control's width is measured while it is drawn and
+ * remembered, so one moved out can be brought back when there is room for it again; a control pinned while the bar is
+ * narrow is drawn once, measured, then moved out if it does not fit.
+ *
+ * @module
+ */
+import { useLayoutEffect, useRef, useState } from "react";
+/**
+ * The ids of the pinned controls that do not fit, in their order: those from the first that passes the room on.
+ *
+ * @param pinned - the pinned controls' ids, in their order.
+ * @param widths - each one's measured width, in CSS px.
+ * @param room - the room they have, in CSS px.
+ * @param gap - the gap between two of them, in CSS px.
+ */
+export const overflowing = (pinned, widths, room, gap) => {
+    let used = 0;
+    const first = pinned.findIndex((id, index) => {
+        used += (widths.get(id) ?? 0) + (index > 0 ? gap : 0);
+        return used > room;
+    });
+    return first === -1 ? [] : pinned.slice(first);
+};
+/**
+ * The pinned controls the bar has no room for.
+ *
+ * @param box - the box the pinned controls sit in.
+ * @param pinned - the pinned controls' ids, in their order.
+ * @returns the ids of those moved into the View menu.
+ */
+export const useToolbarOverflow = (box, pinned) => {
+    const widths = useRef(new Map());
+    const [moved, setMoved] = useState([]);
+    const key = pinned.join(",");
+    // biome-ignore lint/correctness/useExhaustiveDependencies: measured again whenever the pinned controls change
+    useLayoutEffect(() => {
+        const element = box.current;
+        if (element === null)
+            return;
+        const measure = () => {
+            for (const child of element.children) {
+                if (child instanceof HTMLElement)
+                    widths.current.set(child.dataset["control"] ?? "", child.offsetWidth);
+            }
+            const gap = Number.parseFloat(getComputedStyle(element).columnGap) || 0;
+            const next = overflowing(pinned, widths.current, element.clientWidth, gap);
+            setMoved((current) => (current.join(",") === next.join(",") ? current : next));
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [key]);
+    return moved.filter((id) => pinned.includes(id));
+};
+//# sourceMappingURL=useToolbarOverflow.js.map

package/dist/src/shell/useToolbarOverflow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToolbarOverflow.js","sourceRoot":"","sources":["../../../src/shell/useToolbarOverflow.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,EAAkB,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE1E;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,MAAyB,EACzB,MAAmC,EACnC,IAAY,EACZ,GAAW,EACD,EAAE;IACZ,IAAI,IAAI,GAAG,CAAC,CAAC;IACb,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE;QAC3C,IAAI,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACtD,OAAO,IAAI,GAAG,IAAI,CAAC;IACrB,CAAC,CAAC,CAAC;IACH,OAAO,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;AACjD,CAAC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAChC,GAAkC,EAClC,MAAyB,EACf,EAAE;IACZ,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,GAAG,EAAkB,CAAC,CAAC;IACjD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IACjD,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC7B,8GAA8G;IAC9G,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,OAAO,GAAG,GAAG,CAAC,OAAO,CAAC;QAC5B,IAAI,OAAO,KAAK,IAAI;YAAE,OAAO;QAC7B,MAAM,OAAO,GAAG,GAAS,EAAE;YACzB,KAAK,MAAM,KAAK,IAAI,OAAO,CAAC,QAAQ,EAAE,CAAC;gBACrC,IAAI,KAAK,YAAY,WAAW;oBAC9B,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,EAAE,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;YAC1E,CAAC;YACD,MAAM,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;YACxE,MAAM,IAAI,GAAG,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC;YAC3E,QAAQ,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;QACjF,CAAC,CAAC;QACF,OAAO,EAAE,CAAC;QACV,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,OAAO,CAAC,CAAC;QAC7C,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAC1B,OAAO,GAAS,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;IAC3C,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IACV,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;AACnD,CAAC,CAAC"}

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

@@ -0,0 +1,46 @@
+/**
+ * The stage's worst case: the args the Props tab's button sets, whether the values shown are those, and the spills the
+ * story's frames count while they are.
+ *
+ * @remarks
+ * The frames are asked to outline their spills only while the worst case is on (`forgebook:spills`), so a story shown
+ * with its own data never pays for the measure; a frame that loads again is asked again when it is ready (`sendTo`).
+ * The count is kept by story: in the compare view each frame measures its own, and the last to report is shown.
+ *
+ * @module
+ */
+import { type RefObject } from "react";
+import type { PanelProp } from "../argTypes.ts";
+import type { PanelArgs } from "../messages.ts";
+import { type WorstCaseState } from "./worstArgs.ts";
+/** What the hook reads. */
+export type WorstCaseInput = {
+    /** The element that holds the story's frames. */
+    readonly storyRef: RefObject<HTMLElement | null>;
+    /** The story's id. */
+    readonly storyId: string;
+    /** The props the panel can set; none before the docs arrive. */
+    readonly settable: readonly PanelProp[];
+    /** The values shown: the story's args with the panel's over them. */
+    readonly values: PanelArgs;
+    /** The panel's own values. */
+    readonly panelArgs: PanelArgs;
+    /** Sets the panel's values. */
+    readonly onPanelArgsChange: (args: PanelArgs) => void;
+};
+/** What the stage does with the worst case. */
+export type WorstCase = {
+    /** The state the Props tab shows. */
+    readonly state: WorstCaseState;
+    /** Tells a frame that is ready whether to outline its spills. */
+    readonly sendTo: (frame: Window) => void;
+    /** Keeps the count a frame reported. */
+    readonly receive: (storyId: string, count: number) => void;
+};
+/**
+ * The stage's worst case.
+ *
+ * @param input - the frames, the story, its settable props and its values.
+ */
+export declare const useWorstCase: ({ storyRef, storyId, settable, values, panelArgs, onPanelArgsChange }: WorstCaseInput) => WorstCase;
+//# sourceMappingURL=useWorstCase.d.ts.map

package/dist/src/shell/useWorstCase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWorstCase.d.ts","sourceRoot":"","sources":["../../../src/shell/useWorstCase.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,EAAE,KAAK,SAAS,EAAgC,MAAM,OAAO,CAAC;AAErE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAE,SAAS,EAAgB,MAAM,gBAAgB,CAAC;AAE9D,OAAO,EAAe,KAAK,cAAc,EAAa,MAAM,gBAAgB,CAAC;AAE7E,2BAA2B;AAC3B,MAAM,MAAM,cAAc,GAAG;IAC3B,iDAAiD;IACjD,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACjD,sBAAsB;IACtB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,gEAAgE;IAChE,QAAQ,CAAC,QAAQ,EAAE,SAAS,SAAS,EAAE,CAAC;IACxC,qEAAqE;IACrE,QAAQ,CAAC,MAAM,EAAE,SAAS,CAAC;IAC3B,8BAA8B;IAC9B,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAC;IAC9B,+BAA+B;IAC/B,QAAQ,CAAC,iBAAiB,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;CACvD,CAAC;AAEF,+CAA+C;AAC/C,MAAM,MAAM,SAAS,GAAG;IACtB,qCAAqC;IACrC,QAAQ,CAAC,KAAK,EAAE,cAAc,CAAC;IAC/B,iEAAiE;IACjE,QAAQ,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,wCAAwC;IACxC,QAAQ,CAAC,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5D,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,YAAY,GAAI,uEAO1B,cAAc,KAAG,SAsBnB,CAAC"}