forgebook 0.0.0-stage → 0.1.2

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

@@ -0,0 +1,54 @@
+import type { Violation } from "../a11y.ts";
+import { type FrameMessage } from "../messages.ts";
+import type { PlayTrace } from "../playTrace.ts";
+/** A message of a frame that the stage answers. */
+export type ReadyMessage = Extract<FrameMessage, {
+    type: "forgebook:ready";
+}>;
+/** A call of an event, as the log shows it. */
+export type EventCall = Omit<Extract<FrameMessage, {
+    type: "forgebook:call";
+}>, "type"> & {
+    /** When it arrived, in ms since the epoch. */
+    readonly time: number;
+};
+/** What the frames have reported. */
+export type FrameReports = {
+    /** The id of the last story that said it can replay. */
+    readonly replayable: string | undefined;
+    /** The id of the last story that said it reads the story clock (a Live story). */
+    readonly clocked: string | undefined;
+    /** Each frame's content height in CSS px, by its address. */
+    readonly heights: ReadonlyMap<string, number>;
+    /** The addresses of the frames that finished loading: their story is shown, or why it could not be. */
+    readonly settled: ReadonlySet<string>;
+};
+/** What the stage does when a frame reports. */
+export type FrameHandlers = {
+    /** A frame rendered its story: the stage sends it the panel's values and the events to record. */
+    readonly onReady: (frame: Window, message: ReadyMessage) => void;
+    /** An event was called. */
+    readonly onCall: (call: EventCall) => void;
+    /** A frame could not show its story; none where nothing waits for it. */
+    readonly onFailed?: (storyId: string) => void;
+    /** A story's play function reported its trace; none where nothing shows it. */
+    readonly onPlay?: (storyId: string, trace: PlayTrace) => void;
+    /** An accessibility check is over: the rules broken, or why it could not run; none where nothing asks for one. */
+    readonly onChecked?: (result: CheckResult) => void;
+};
+/** An accessibility check's result, as a frame reported it. */
+export type CheckResult = {
+    readonly storyId: string;
+    readonly violations: readonly Violation[];
+} | {
+    readonly storyId: string;
+    readonly error: string;
+};
+/**
+ * Listens to the frames of the page.
+ *
+ * @param handlers - what to do when a frame is ready or an event is called.
+ * @returns what they reported.
+ */
+export declare const useFrameMessages: (handlers: FrameHandlers) => FrameReports;
+//# sourceMappingURL=useFrameMessages.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFrameMessages.d.ts","sourceRoot":"","sources":["../../../src/shell/useFrameMessages.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,KAAK,YAAY,EAAkB,MAAM,gBAAgB,CAAC;AACnE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAEjD,mDAAmD;AACnD,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC,YAAY,EAAE;IAAE,IAAI,EAAE,iBAAiB,CAAA;CAAE,CAAC,CAAC;AAE9E,+CAA+C;AAC/C,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,EAAE;IAAE,IAAI,EAAE,gBAAgB,CAAA;CAAE,CAAC,EAAE,MAAM,CAAC,GAAG;IACxF,8CAA8C;IAC9C,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,qCAAqC;AACrC,MAAM,MAAM,YAAY,GAAG;IACzB,wDAAwD;IACxD,QAAQ,CAAC,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,kFAAkF;IAClF,QAAQ,CAAC,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,6DAA6D;IAC7D,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9C,uGAAuG;IACvG,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CACvC,CAAC;AAEF,gDAAgD;AAChD,MAAM,MAAM,aAAa,GAAG;IAC1B,kGAAkG;IAClG,QAAQ,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IACjE,2BAA2B;IAC3B,QAAQ,CAAC,MAAM,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IAC3C,yEAAyE;IACzE,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,+EAA+E;IAC/E,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC9D,kHAAkH;IAClH,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CACpD,CAAC;AAEF,+DAA+D;AAC/D,MAAM,MAAM,WAAW,GACnB;IAAE,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,UAAU,EAAE,SAAS,SAAS,EAAE,CAAA;CAAE,GACvE;IAAE,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAsEzD;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAAI,UAAU,aAAa,KAAG,YA2B1D,CAAC"}

package/dist/src/shell/useFrameMessages.js

@@ -0,0 +1,90 @@
+/**
+ * What the frames tell the shell: which story can replay, which reads the story clock, each frame's content height, which frames finished loading, its story's own args, the
+ * calls of its events, its play function's trace, and the result of an accessibility check.
+ *
+ * @module
+ */
+import { useEffect, useRef, useState } from "react";
+import { isFrameMessage } from "../messages.js";
+/** The frame element a message came from. */
+const frameOf = (source) => source === null
+    ? undefined
+    : [...document.querySelectorAll("iframe")].find((element) => element.contentWindow === source);
+/** Whether a message ends a frame's loading: its story is shown, or why it could not be. */
+const isSettling = (message) => message.type === "forgebook:ready" || message.type === "forgebook:error";
+/** Acts on one message of a frame. */
+const onFrameMessage = (message, frame, targets) => {
+    const address = frame?.getAttribute("src") ?? undefined;
+    if (isSettling(message) && address !== undefined)
+        targets.markSettled(address);
+    const { handlers } = targets;
+    switch (message.type) {
+        case "forgebook:ready":
+            if (message.canReplay)
+                targets.setReplayable(message.storyId);
+            if (message.hasClock)
+                targets.setClocked(message.storyId);
+            if (frame?.contentWindow)
+                handlers.onReady(frame.contentWindow, message);
+            return;
+        case "forgebook:size":
+            if (address !== undefined)
+                targets.setHeight(address, message.height);
+            return;
+        case "forgebook:error":
+            handlers.onFailed?.(message.storyId);
+            return;
+        case "forgebook:play":
+            handlers.onPlay?.(message.storyId, message.trace);
+            return;
+        case "forgebook:checked":
+            handlers.onChecked?.({ storyId: message.storyId, violations: message.violations });
+            return;
+        case "forgebook:check-error":
+            handlers.onChecked?.({ storyId: message.storyId, error: message.message });
+            return;
+        case "forgebook:call":
+            handlers.onCall({
+                storyId: message.storyId,
+                name: message.name,
+                values: message.values,
+                details: message.details,
+                time: Date.now()
+            });
+            return;
+        default:
+            return;
+    }
+};
+/**
+ * Listens to the frames of the page.
+ *
+ * @param handlers - what to do when a frame is ready or an event is called.
+ * @returns what they reported.
+ */
+export const useFrameMessages = (handlers) => {
+    const [replayable, setReplayable] = useState(undefined);
+    const [clocked, setClocked] = useState(undefined);
+    const [heights, setHeights] = useState(new Map());
+    const [settled, setSettled] = useState(new Set());
+    // the latest handlers, without listening again on every render
+    const handlersRef = useRef(handlers);
+    handlersRef.current = handlers;
+    useEffect(() => {
+        const listen = (event) => {
+            if (event.origin !== window.location.origin || !isFrameMessage(event.data))
+                return;
+            onFrameMessage(event.data, frameOf(event.source), {
+                handlers: handlersRef.current,
+                setReplayable,
+                setClocked,
+                setHeight: (address, height) => setHeights((current) => new Map(current).set(address, height)),
+                markSettled: (address) => setSettled((current) => (current.has(address) ? current : new Set(current).add(address)))
+            });
+        };
+        window.addEventListener("message", listen);
+        return () => window.removeEventListener("message", listen);
+    }, []);
+    return { replayable, clocked, heights, settled };
+};
+//# sourceMappingURL=useFrameMessages.js.map

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

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

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

@@ -0,0 +1,29 @@
+/**
+ * Which frames of a page of many stories may load: those near the visible part of the page, a few at a time, so the
+ * browser is never asked for thousands of modules at once.
+ *
+ * @remarks
+ * In development every frame loads its sources' modules one by one (a few hundred requests); twenty frames at once
+ * exhaust the browser ("insufficient resources") and stories stay blank. A frame loads once its story is near the
+ * visible part of the scrolling page and fewer than `MAX_LOADING` frames are still loading; once loaded it stays.
+ *
+ * @module
+ */
+import { type RefObject } from "react";
+/** What the queue gives a page. */
+export type FrameQueue = {
+    /** The stories whose frames may be mounted. */
+    readonly mounted: ReadonlySet<string>;
+    /** Registers the element that holds a story's frame, to know when it is near; `null` when it goes away. */
+    readonly observe: (storyId: string, element: HTMLElement | null) => void;
+    /** Records a story whose frame finished loading. */
+    readonly markReady: (storyId: string) => void;
+};
+/**
+ * The queue of a page's frames.
+ *
+ * @param storyIds - the stories, in the page's order.
+ * @param root - the element that scrolls the page.
+ */
+export declare const useFrameQueue: (storyIds: readonly string[], root: RefObject<HTMLElement | null>) => FrameQueue;
+//# sourceMappingURL=useFrameQueue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFrameQueue.d.ts","sourceRoot":"","sources":["../../../src/shell/useFrameQueue.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,EAAE,KAAK,SAAS,EAA4C,MAAM,OAAO,CAAC;AAQjF,mCAAmC;AACnC,MAAM,MAAM,UAAU,GAAG;IACvB,+CAA+C;IAC/C,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACtC,2GAA2G;IAC3G,QAAQ,CAAC,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IACzE,oDAAoD;IACpD,QAAQ,CAAC,SAAS,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,aAAa,GACxB,UAAU,SAAS,MAAM,EAAE,EAC3B,MAAM,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,KAClC,UAuDF,CAAC"}

package/dist/src/shell/useFrameQueue.js

@@ -0,0 +1,72 @@
+/**
+ * Which frames of a page of many stories may load: those near the visible part of the page, a few at a time, so the
+ * browser is never asked for thousands of modules at once.
+ *
+ * @remarks
+ * In development every frame loads its sources' modules one by one (a few hundred requests); twenty frames at once
+ * exhaust the browser ("insufficient resources") and stories stay blank. A frame loads once its story is near the
+ * visible part of the scrolling page and fewer than `MAX_LOADING` frames are still loading; once loaded it stays.
+ *
+ * @module
+ */
+import { useCallback, useEffect, useRef, useState } from "react";
+/** The most frames loading at once. */
+const MAX_LOADING = 2;
+/** How far beyond the visible part a story counts as near, as an IntersectionObserver margin. */
+const NEAR_MARGIN = "600px 0px";
+/**
+ * The queue of a page's frames.
+ *
+ * @param storyIds - the stories, in the page's order.
+ * @param root - the element that scrolls the page.
+ */
+export const useFrameQueue = (storyIds, root) => {
+    const [near, setNear] = useState(new Set());
+    const [ready, setReady] = useState(new Set());
+    const [mounted, setMounted] = useState(new Set());
+    const observerRef = useRef(undefined);
+    const elements = useRef(new Map());
+    useEffect(() => {
+        const observer = new IntersectionObserver((entries) => setNear((current) => {
+            const next = new Set(current);
+            for (const entry of entries) {
+                const id = elements.current.get(entry.target);
+                if (id === undefined)
+                    continue;
+                if (entry.isIntersecting)
+                    next.add(id);
+                else
+                    next.delete(id);
+            }
+            return next;
+        }), { root: root.current, rootMargin: NEAR_MARGIN });
+        for (const element of elements.current.keys())
+            observer.observe(element);
+        observerRef.current = observer;
+        return () => observer.disconnect();
+    }, [root]);
+    // a few more frames whenever a story comes near or a frame finishes loading
+    useEffect(() => {
+        setMounted((current) => {
+            const loading = [...current].filter((id) => !ready.has(id)).length;
+            const waiting = storyIds.filter((id) => near.has(id) && !current.has(id));
+            const next = waiting.slice(0, Math.max(0, MAX_LOADING - loading));
+            return next.length === 0 ? current : new Set([...current, ...next]);
+        });
+    }, [storyIds, near, ready]);
+    const observe = useCallback((storyId, element) => {
+        for (const [known, id] of elements.current) {
+            if (id !== storyId)
+                continue;
+            observerRef.current?.unobserve(known);
+            elements.current.delete(known);
+        }
+        if (element === null)
+            return;
+        elements.current.set(element, storyId);
+        observerRef.current?.observe(element);
+    }, []);
+    const markReady = useCallback((storyId) => setReady((current) => (current.has(storyId) ? current : new Set(current).add(storyId))), []);
+    return { mounted, observe, markReady };
+};
+//# sourceMappingURL=useFrameQueue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFrameQueue.js","sourceRoot":"","sources":["../../../src/shell/useFrameQueue.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,EAAkB,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjF,uCAAuC;AACvC,MAAM,WAAW,GAAG,CAAC,CAAC;AAEtB,iGAAiG;AACjG,MAAM,WAAW,GAAG,WAAW,CAAC;AAYhC;;;;;GAKG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAC3B,QAA2B,EAC3B,IAAmC,EACvB,EAAE;IACd,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAsB,IAAI,GAAG,EAAE,CAAC,CAAC;IACjE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAsB,IAAI,GAAG,EAAE,CAAC,CAAC;IACnE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAsB,IAAI,GAAG,EAAE,CAAC,CAAC;IACvE,MAAM,WAAW,GAAG,MAAM,CAAmC,SAAS,CAAC,CAAC;IACxE,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,GAAG,EAAmB,CAAC,CAAC;IAEpD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CACvC,CAAC,OAAO,EAAE,EAAE,CACV,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YAClB,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,OAAO,CAAC,CAAC;YAC9B,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE,CAAC;gBAC5B,MAAM,EAAE,GAAG,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;gBAC9C,IAAI,EAAE,KAAK,SAAS;oBAAE,SAAS;gBAC/B,IAAI,KAAK,CAAC,cAAc;oBAAE,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;;oBAClC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;YACvB,CAAC;YACD,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,EACJ,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,CAChD,CAAC;QACF,KAAK,MAAM,OAAO,IAAI,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE;YAAE,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACzE,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;QAC/B,OAAO,GAAS,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;IAC3C,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,4EAA4E;IAC5E,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,CAAC,CAAC,OAAO,EAAE,EAAE;YACrB,MAAM,OAAO,GAAG,CAAC,GAAG,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC;YACnE,MAAM,OAAO,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;YAC1E,MAAM,IAAI,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC,CAAC,CAAC;YAClE,OAAO,IAAI,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG,OAAO,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC;QACtE,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;IAE5B,MAAM,OAAO,GAAG,WAAW,CAAC,CAAC,OAAe,EAAE,OAA2B,EAAQ,EAAE;QACjF,KAAK,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;YAC3C,IAAI,EAAE,KAAK,OAAO;gBAAE,SAAS;YAC7B,WAAW,CAAC,OAAO,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC;YACtC,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACjC,CAAC;QACD,IAAI,OAAO,KAAK,IAAI;YAAE,OAAO;QAC7B,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;QACvC,WAAW,CAAC,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;IACxC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,OAAe,EAAQ,EAAE,CACxB,QAAQ,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,EACzF,EAAE,CACH,CAAC;IAEF,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC;AACzC,CAAC,CAAC"}

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

@@ -0,0 +1,29 @@
+/**
+ * The view's live part on the frames of a page: the frames load once with the view they need, and a change of the
+ * theme, contrast, motion, speed, press feedback, backdrop or text size is sent to them, so their stories keep their
+ * state.
+ *
+ * @remarks
+ * Only another story, other style sheets or another language load a frame again: those change its document. The
+ * story page and the component page use both hooks.
+ *
+ * @module
+ */
+import { type RefObject } from "react";
+import { type ViewState } from "../viewState.ts";
+/**
+ * The view the frames load with: the current one when the load key changes, otherwise the one they loaded with.
+ *
+ * @param loadKey - what loads the frames again (the story, the style sheets, the language), as one text.
+ * @param view - the current view.
+ */
+export declare const useLoadedView: (loadKey: string, view: ViewState) => ViewState;
+/**
+ * Sends the view's live part to every frame in a container whenever it changes, and the tools drawn over them.
+ *
+ * @param container - the element that holds the frames.
+ * @param view - the current view.
+ * @param isEnabled - whether the frames follow the view (the compare view's frames fix their own theme).
+ */
+export declare const useLiveView: (container: RefObject<HTMLElement | null>, view: ViewState, isEnabled: boolean) => void;
+//# sourceMappingURL=useLiveView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useLiveView.d.ts","sourceRoot":"","sources":["../../../src/shell/useLiveView.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAE5D,OAAO,EAAmC,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAOlF;;;;;GAKG;AACH,eAAO,MAAM,aAAa,GAAI,SAAS,MAAM,EAAE,MAAM,SAAS,KAAG,SAKhE,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,GACtB,WAAW,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACxC,MAAM,SAAS,EACf,WAAW,OAAO,KACjB,IAYF,CAAC"}

package/dist/src/shell/useLiveView.js

@@ -0,0 +1,51 @@
+/**
+ * The view's live part on the frames of a page: the frames load once with the view they need, and a change of the
+ * theme, contrast, motion, speed, press feedback, backdrop or text size is sent to them, so their stories keep their
+ * state.
+ *
+ * @remarks
+ * Only another story, other style sheets or another language load a frame again: those change its document. The
+ * story page and the component page use both hooks.
+ *
+ * @module
+ */
+import { useEffect, useState } from "react";
+import { MEASURE_TOOLS } from "../viewState.js";
+import { tellFrames } from "./FrameView.js";
+/** The tools a joined list names, back as a list (the effect depends on the text, not on a new list each render). */
+const toolsOf = (joined) => MEASURE_TOOLS.filter((tool) => joined.split(",").includes(tool));
+/**
+ * The view the frames load with: the current one when the load key changes, otherwise the one they loaded with.
+ *
+ * @param loadKey - what loads the frames again (the story, the style sheets, the language), as one text.
+ * @param view - the current view.
+ */
+export const useLoadedView = (loadKey, view) => {
+    const [loaded, setLoaded] = useState({ key: loadKey, view });
+    // set while rendering, as React allows for a value derived from props: the frames never get a stale address
+    if (loaded.key !== loadKey)
+        setLoaded({ key: loadKey, view });
+    return loaded.key === loadKey ? loaded.view : view;
+};
+/**
+ * Sends the view's live part to every frame in a container whenever it changes, and the tools drawn over them.
+ *
+ * @param container - the element that holds the frames.
+ * @param view - the current view.
+ * @param isEnabled - whether the frames follow the view (the compare view's frames fix their own theme).
+ */
+export const useLiveView = (container, view, isEnabled) => {
+    // a view changed elsewhere (the width, the panel) keeps its switches' object, so it sends nothing
+    const { switches, backdrop, text } = view;
+    useEffect(() => {
+        if (!isEnabled)
+            return;
+        tellFrames(container.current, { type: "forgebook:view", view: { switches, backdrop, text } });
+    }, [container, switches, backdrop, text, isEnabled]);
+    // the tools draw over every frame, the compare view's too
+    const tools = view.tools.join(",");
+    useEffect(() => {
+        tellFrames(container.current, { type: "forgebook:tools", tools: toolsOf(tools) });
+    }, [container, tools]);
+};
+//# sourceMappingURL=useLiveView.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useLiveView.js","sourceRoot":"","sources":["../../../src/shell/useLiveView.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,EAAkB,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,EAAE,aAAa,EAAoC,MAAM,iBAAiB,CAAC;AAClF,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAiB,CAAC;AAE7C,qHAAqH;AACrH,MAAM,OAAO,GAAG,CAAC,MAAc,EAAiB,EAAE,CAChD,aAAa,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;AAEnE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,OAAe,EAAE,IAAe,EAAa,EAAE;IAC3E,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IAC7D,4GAA4G;IAC5G,IAAI,MAAM,CAAC,GAAG,KAAK,OAAO;QAAE,SAAS,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IAC9D,OAAO,MAAM,CAAC,GAAG,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;AACrD,CAAC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,SAAwC,EACxC,IAAe,EACf,SAAkB,EACZ,EAAE;IACR,kGAAkG;IAClG,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;IAC1C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,SAAS;YAAE,OAAO;QACvB,UAAU,CAAC,SAAS,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC;IAChG,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;IACrD,0DAA0D;IAC1D,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACnC,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,CAAC,SAAS,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACpF,CAAC,EAAE,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;AACzB,CAAC,CAAC"}

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

@@ -0,0 +1,20 @@
+/** A lazily loaded value: loading, read, none (the source has no loader for the file), or why it failed. */
+export type Loaded<TValue> = {
+    readonly status: "loading";
+} | {
+    readonly status: "ready";
+    readonly value: TValue;
+} | {
+    readonly status: "none";
+} | {
+    readonly status: "error";
+    readonly message: string;
+};
+/**
+ * Loads a value when its loader changes, and reads it.
+ *
+ * @param load - the source's loader for the file; `undefined` when it has none.
+ * @param read - turns what the loader gave into the state: the module's default export is unchecked data.
+ */
+export declare const useLoaded: <TValue>(load: (() => Promise<unknown>) | undefined, read: (value: unknown) => Loaded<TValue>) => Loaded<TValue>;
+//# sourceMappingURL=useLoaded.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useLoaded.d.ts","sourceRoot":"","sources":["../../../src/shell/useLoaded.ts"],"names":[],"mappings":"AAQA,4GAA4G;AAC5G,MAAM,MAAM,MAAM,CAAC,MAAM,IACrB;IAAE,QAAQ,CAAC,MAAM,EAAE,SAAS,CAAA;CAAE,GAC9B;IAAE,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GACpD;IAAE,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAC3B;IAAE,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC;AAE3D;;;;;GAKG;AACH,eAAO,MAAM,SAAS,GAAI,MAAM,EAC9B,MAAM,CAAC,MAAM,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,SAAS,EAC1C,MAAM,CAAC,KAAK,EAAE,OAAO,KAAK,MAAM,CAAC,MAAM,CAAC,KACvC,MAAM,CAAC,MAAM,CAwBf,CAAC"}

package/dist/src/shell/useLoaded.js

@@ -0,0 +1,40 @@
+/**
+ * A value a source loads lazily (a story file's docs or code), read into a state the shell can show: loading, the
+ * value, nothing to load, or why it failed.
+ *
+ * @module
+ */
+import { useEffect, useState } from "react";
+/**
+ * Loads a value when its loader changes, and reads it.
+ *
+ * @param load - the source's loader for the file; `undefined` when it has none.
+ * @param read - turns what the loader gave into the state: the module's default export is unchecked data.
+ */
+export const useLoaded = (load, read) => {
+    const [state, setState] = useState({ status: "loading" });
+    // the reader of the first render: a reader written inline must not load the value again on every render
+    const [reader] = useState(() => read);
+    useEffect(() => {
+        if (load === undefined) {
+            setState({ status: "none" });
+            return;
+        }
+        let isCurrent = true;
+        setState({ status: "loading" });
+        load()
+            .then((value) => {
+            if (isCurrent)
+                setState(reader(value));
+        })
+            .catch((error) => {
+            if (isCurrent)
+                setState({ status: "error", message: error instanceof Error ? error.message : String(error) });
+        });
+        return () => {
+            isCurrent = false;
+        };
+    }, [load, reader]);
+    return state;
+};
+//# sourceMappingURL=useLoaded.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useLoaded.js","sourceRoot":"","sources":["../../../src/shell/useLoaded.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAS5C;;;;;GAKG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CACvB,IAA0C,EAC1C,IAAwC,EACxB,EAAE;IAClB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAiB,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC;IAC1E,wGAAwG;IACxG,MAAM,CAAC,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,CAAC;IACtC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;YACvB,QAAQ,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;YAC7B,OAAO;QACT,CAAC;QACD,IAAI,SAAS,GAAG,IAAI,CAAC;QACrB,QAAQ,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC;QAChC,IAAI,EAAE;aACH,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE;YACd,IAAI,SAAS;gBAAE,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;QACzC,CAAC,CAAC;aACD,KAAK,CAAC,CAAC,KAAc,EAAE,EAAE;YACxB,IAAI,SAAS;gBACX,QAAQ,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;QACnG,CAAC,CAAC,CAAC;QACL,OAAO,GAAS,EAAE;YAChB,SAAS,GAAG,KAAK,CAAC;QACpB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC;IACnB,OAAO,KAAK,CAAC;AACf,CAAC,CAAC"}

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

@@ -0,0 +1,20 @@
+/**
+ * A component's page text for its page: its documentation file as HTML, loaded from the source's `pages`.
+ *
+ * @module
+ */
+import { type Loaded } from "./useLoaded.ts";
+/** A component's page text: its documentation file's HTML and its file's summary. */
+export type PageDoc = {
+    /** The documentation file as HTML, its title and its generated sections left out; empty without one. */
+    readonly html: string;
+    /** The first paragraph of the component file's `@module` comment, the page's lead; empty without one. */
+    readonly summary: string;
+};
+/**
+ * The page text of a story file's component.
+ *
+ * @param load - the source's loader for the file; `undefined` when it has none.
+ */
+export declare const usePageDoc: (load: (() => Promise<unknown>) | undefined) => Loaded<PageDoc>;
+//# sourceMappingURL=usePageDoc.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePageDoc.d.ts","sourceRoot":"","sources":["../../../src/shell/usePageDoc.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAAE,KAAK,MAAM,EAAa,MAAM,gBAAgB,CAAC;AAExD,qFAAqF;AACrF,MAAM,MAAM,OAAO,GAAG;IACpB,wGAAwG;IACxG,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,yGAAyG;IACzG,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;CAC1B,CAAC;AAWF;;;;GAIG;AACH,eAAO,MAAM,UAAU,GAAI,MAAM,CAAC,MAAM,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,SAAS,KAAG,MAAM,CAAC,OAAO,CAC1D,CAAC"}

package/dist/src/shell/usePageDoc.js

@@ -0,0 +1,21 @@
+/**
+ * A component's page text for its page: its documentation file as HTML, loaded from the source's `pages`.
+ *
+ * @module
+ */
+import { useLoaded } from "./useLoaded.js";
+/** What the plugin answered, as a state: the HTML and the summary, or why it failed. */
+const pageState = (value) => {
+    if (typeof value === "object" && value !== null && "html" in value && typeof value.html === "string") {
+        const summary = "summary" in value && typeof value.summary === "string" ? value.summary : "";
+        return { status: "ready", value: { html: value.html, summary } };
+    }
+    return { status: "error", message: "The component's page has an unexpected shape" };
+};
+/**
+ * The page text of a story file's component.
+ *
+ * @param load - the source's loader for the file; `undefined` when it has none.
+ */
+export const usePageDoc = (load) => useLoaded(load, pageState);
+//# sourceMappingURL=usePageDoc.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePageDoc.js","sourceRoot":"","sources":["../../../src/shell/usePageDoc.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAAe,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAUxD,wFAAwF;AACxF,MAAM,SAAS,GAAG,CAAC,KAAc,EAAmB,EAAE;IACpD,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,MAAM,IAAI,KAAK,IAAI,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;QACrG,MAAM,OAAO,GAAG,SAAS,IAAI,KAAK,IAAI,OAAO,KAAK,CAAC,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;QAC7F,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE,CAAC;IACnE,CAAC;IACD,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,8CAA8C,EAAE,CAAC;AACtF,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,IAA0C,EAAmB,EAAE,CACxF,SAAS,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC"}

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

@@ -0,0 +1,23 @@
+/**
+ * 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.
+ *
+ * @module
+ */
+import { type RefObject } from "react";
+/** What a menu wires to its button and panel. */
+export type Popover = {
+    /** Whether the panel is shown. */
+    readonly isOpen: boolean;
+    /** Opens or closes the panel. */
+    readonly setIsOpen: (isOpen: boolean) => void;
+    /** The button. */
+    readonly buttonRef: RefObject<HTMLButtonElement | null>;
+    /** The panel. */
+    readonly panelRef: RefObject<HTMLDivElement | null>;
+    /** The panel's id, for the button's `aria-controls`. */
+    readonly panelId: string;
+};
+/** A button's popover. */
+export declare const usePopover: () => Popover;
+//# sourceMappingURL=usePopover.d.ts.map

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

@@ -0,0 +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"}

package/dist/src/shell/usePopover.js

@@ -0,0 +1,39 @@
+/**
+ * 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.
+ *
+ * @module
+ */
+import { useEffect, useId, useRef, useState } from "react";
+/** A button's popover. */
+export const usePopover = () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const buttonRef = useRef(null);
+    const panelRef = useRef(null);
+    const panelId = useId();
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        panelRef.current?.querySelector("input:checked")?.focus();
+        const close = (event) => {
+            const target = event.target instanceof Node ? event.target : null;
+            const isOutside = event instanceof PointerEvent &&
+                !panelRef.current?.contains(target) &&
+                !buttonRef.current?.contains(target);
+            const isEscape = event instanceof KeyboardEvent && event.key === "Escape";
+            if (!isOutside && !isEscape)
+                return;
+            setIsOpen(false);
+            if (isEscape)
+                buttonRef.current?.focus();
+        };
+        document.addEventListener("pointerdown", close);
+        document.addEventListener("keydown", close);
+        return () => {
+            document.removeEventListener("pointerdown", close);
+            document.removeEventListener("keydown", close);
+        };
+    }, [isOpen]);
+    return { isOpen, setIsOpen, buttonRef, panelRef, panelId };
+};
+//# sourceMappingURL=usePopover.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,21 @@
+/** A page the home can list: a story's or a component's, by id. */
+export type RecentPage = {
+    /** Which kind of page. */
+    readonly kind: "story" | "component";
+    /** The story's or the component's id. */
+    readonly id: string;
+};
+/**
+ * The list with a page opened now: first, once, the oldest dropped past the limit.
+ *
+ * @param pages - the list.
+ * @param page - the page opened.
+ */
+export declare const withRecentPage: (pages: readonly RecentPage[], page: RecentPage) => readonly RecentPage[];
+/**
+ * The pages opened last, recording the shown one.
+ *
+ * @param shown - the page shown now; none on the home or a missing page.
+ */
+export declare const useRecentPages: (shown: RecentPage | undefined) => readonly RecentPage[];
+//# sourceMappingURL=useRecentPages.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useRecentPages.d.ts","sourceRoot":"","sources":["../../../src/shell/useRecentPages.ts"],"names":[],"mappings":"AAaA,mEAAmE;AACnE,MAAM,MAAM,UAAU,GAAG;IACvB,0BAA0B;IAC1B,QAAQ,CAAC,IAAI,EAAE,OAAO,GAAG,WAAW,CAAC;IACrC,yCAAyC;IACzC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;CACrB,CAAC;AA4BF;;;;;GAKG;AACH,eAAO,MAAM,cAAc,GAAI,OAAO,SAAS,UAAU,EAAE,EAAE,MAAM,UAAU,KAAG,SAAS,UAAU,EACS,CAAC;AAE7G;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,OAAO,UAAU,GAAG,SAAS,KAAG,SAAS,UAAU,EAYjF,CAAC"}