forgebook 0.1.3 → 0.1.4

package/dist/src/namedViews.d.ts

@@ -0,0 +1,80 @@
+/**
+ * Named views: the View menu's values saved under a name ("Dark, Italian, 360") and picked again. A reader's, kept in
+ * their browser, and the catalogue's own (`views` in its configuration), offered to the whole team.
+ *
+ * @remarks
+ * A named view holds values, never an arrangement: the switches, the background, the style sheets, the text size and
+ * the width. Picking one sets them as choosing each would, so the address carries the values; a name never goes in the
+ * address, since another reader may not have it. Pure: views in, views out.
+ *
+ * @module
+ */
+import type { ViewState } from "./viewState.ts";
+/** The values a named view holds: the View menu's. */
+export type ViewValues = Pick<ViewState, "switches" | "backdrop" | "sheets" | "text" | "width">;
+/** A view saved under a name. */
+export type NamedView = {
+    /** Its name, as the reader or the catalogue wrote it. */
+    readonly name: string;
+    /** Its values. */
+    readonly values: ViewValues;
+};
+/** A view the catalogue declares, as its configuration writes it. */
+export type CatalogueView = {
+    /** Its name. */
+    readonly name: string;
+    /** Its values, in the address's form (`theme=dark&width=360`) or as words (`"dark it 360"`). */
+    readonly view: string;
+};
+/**
+ * The values of a view that a named view holds.
+ *
+ * @param view - the view.
+ */
+export declare const viewValues: (view: ViewState) => ViewValues;
+/**
+ * The view with a named view's values set.
+ *
+ * @param view - the view shown.
+ * @param values - the named view's values.
+ */
+export declare const withViewValues: (view: ViewState, values: ViewValues) => ViewState;
+/**
+ * The reader's views with one saved: a view of the same name is replaced where it was, a new one goes last.
+ *
+ * @param views - the reader's views.
+ * @param saved - the view saved; its name trimmed.
+ * @returns the views; the same ones for an empty name.
+ */
+export declare const withSavedView: (views: readonly NamedView[], saved: NamedView) => NamedView[];
+/**
+ * The reader's views without one.
+ *
+ * @param views - the reader's views.
+ * @param name - the removed view's name.
+ */
+export declare const withoutView: (views: readonly NamedView[], name: string) => NamedView[];
+/**
+ * The reader's views a stored text holds; the ones this module did not write are left out.
+ *
+ * @param stored - the stored text, or none.
+ */
+export declare const readNamedViews: (stored: string | null) => NamedView[];
+/**
+ * The text the reader's views are stored as; empty for none.
+ *
+ * @param views - the reader's views.
+ */
+export declare const namedViewsText: (views: readonly NamedView[]) => string;
+/**
+ * Whether two sets of values draw the same view: a switch left at its default and one set to it are the same.
+ *
+ * @param first - one set.
+ * @param second - the other.
+ * @param switches - the catalogue's switches, for their defaults.
+ */
+export declare const isSameView: (first: ViewValues, second: ViewValues, switches: readonly {
+    readonly id: string;
+    readonly default: string;
+}[]) => boolean;
+//# sourceMappingURL=namedViews.d.ts.map

package/dist/src/namedViews.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"namedViews.d.ts","sourceRoot":"","sources":["../../src/namedViews.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAEhD,sDAAsD;AACtD,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;AAEhG,iCAAiC;AACjC,MAAM,MAAM,SAAS,GAAG;IACtB,yDAAyD;IACzD,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,kBAAkB;IAClB,QAAQ,CAAC,MAAM,EAAE,UAAU,CAAC;CAC7B,CAAC;AAEF,qEAAqE;AACrE,MAAM,MAAM,aAAa,GAAG;IAC1B,gBAAgB;IAChB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,gGAAgG;IAChG,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,UAAU,GAAI,MAAM,SAAS,KAAG,UAM3C,CAAC;AAEH;;;;;GAKG;AACH,eAAO,MAAM,cAAc,GAAI,MAAM,SAAS,EAAE,QAAQ,UAAU,KAAG,SAAqC,CAAC;AAE3G;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,GAAI,OAAO,SAAS,SAAS,EAAE,EAAE,OAAO,SAAS,KAAG,SAAS,EAOtF,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,WAAW,GAAI,OAAO,SAAS,SAAS,EAAE,EAAE,MAAM,MAAM,KAAG,SAAS,EACrC,CAAC;AAgB7C;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,QAAQ,MAAM,GAAG,IAAI,KAAG,SAAS,EAY/D,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,OAAO,SAAS,SAAS,EAAE,KAAG,MACZ,CAAC;AAElD;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,GACrB,OAAO,UAAU,EACjB,QAAQ,UAAU,EAClB,UAAU,SAAS;IAAE,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;CAAE,EAAE,KACrE,OAO2B,CAAC"}

package/dist/src/namedViews.js

@@ -0,0 +1,88 @@
+/**
+ * The values of a view that a named view holds.
+ *
+ * @param view - the view.
+ */
+export const viewValues = (view) => ({
+    switches: view.switches,
+    backdrop: view.backdrop,
+    sheets: view.sheets,
+    text: view.text,
+    width: view.width
+});
+/**
+ * The view with a named view's values set.
+ *
+ * @param view - the view shown.
+ * @param values - the named view's values.
+ */
+export const withViewValues = (view, values) => ({ ...view, ...values });
+/**
+ * The reader's views with one saved: a view of the same name is replaced where it was, a new one goes last.
+ *
+ * @param views - the reader's views.
+ * @param saved - the view saved; its name trimmed.
+ * @returns the views; the same ones for an empty name.
+ */
+export const withSavedView = (views, saved) => {
+    const name = saved.name.trim();
+    if (name === "")
+        return [...views];
+    const view = { ...saved, name };
+    return views.some((each) => each.name === name)
+        ? views.map((each) => (each.name === name ? view : each))
+        : [...views, view];
+};
+/**
+ * The reader's views without one.
+ *
+ * @param views - the reader's views.
+ * @param name - the removed view's name.
+ */
+export const withoutView = (views, name) => views.filter((each) => each.name !== name);
+/** Whether a value is a plain object. */
+const isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+/** Whether a value is a named view's values, as this module stores them. */
+const isViewValues = (value) => isRecord(value) &&
+    isRecord(value["switches"]) &&
+    Object.values(value["switches"]).every((each) => typeof each === "string") &&
+    typeof value["backdrop"] === "string" &&
+    (value["sheets"] === "full" || value["sheets"] === "structure" || value["sheets"] === "restyled") &&
+    typeof value["text"] === "number" &&
+    (value["width"] === "fill" || typeof value["width"] === "number");
+/**
+ * The reader's views a stored text holds; the ones this module did not write are left out.
+ *
+ * @param stored - the stored text, or none.
+ */
+export const readNamedViews = (stored) => {
+    if (stored === null || stored === "")
+        return [];
+    let parsed;
+    try {
+        parsed = JSON.parse(stored);
+    }
+    catch {
+        return [];
+    }
+    return (Array.isArray(parsed) ? parsed : []).filter((each) => isRecord(each) && typeof each["name"] === "string" && isViewValues(each["values"]));
+};
+/**
+ * The text the reader's views are stored as; empty for none.
+ *
+ * @param views - the reader's views.
+ */
+export const namedViewsText = (views) => views.length === 0 ? "" : JSON.stringify(views);
+/**
+ * Whether two sets of values draw the same view: a switch left at its default and one set to it are the same.
+ *
+ * @param first - one set.
+ * @param second - the other.
+ * @param switches - the catalogue's switches, for their defaults.
+ */
+export const isSameView = (first, second, switches) => switches.every((each) => (first.switches[each.id] ?? each.default) === (second.switches[each.id] ?? each.default)) &&
+    first.backdrop === second.backdrop &&
+    first.sheets === second.sheets &&
+    first.text === second.text &&
+    first.width === second.width;
+//# sourceMappingURL=namedViews.js.map

package/dist/src/namedViews.js.map

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

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

@@ -0,0 +1,15 @@
+/**
+ * The shell's appearance menu, at the sidebar's foot: a button showing the appearance picked, which opens Light, Dark
+ * and System. A preference about the tool, not the story, so it sits outside the View menu.
+ *
+ * @module
+ */
+import { type ReactNode } from "react";
+import type { AppearanceState } from "./useAppearance.ts";
+/**
+ * The appearance menu.
+ *
+ * @param props - the appearance shown and its setter.
+ */
+export declare const AppearanceMenu: ({ appearance, setAppearance }: AppearanceState) => ReactNode;
+//# sourceMappingURL=AppearanceMenu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppearanceMenu.d.ts","sourceRoot":"","sources":["../../../src/shell/AppearanceMenu.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAmB,KAAK,SAAS,EAAS,MAAM,OAAO,CAAC;AAK/D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAM1D;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,+BAA+B,eAAe,KAAG,SA8C/E,CAAC"}

package/dist/src/shell/AppearanceMenu.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The shell's appearance menu, at the sidebar's foot: a button showing the appearance picked, which opens Light, Dark
+ * and System. A preference about the tool, not the story, so it sits outside the View menu.
+ *
+ * @module
+ */
+import { useId } from "react";
+import { APPEARANCES } from "../catalogue.js";
+import { Icon } from "./icons.js";
+import { STRINGS } from "./strings.js";
+import { usePopover } from "./usePopover.js";
+/** Each appearance's icon. */
+const ICONS = { light: "sun", dark: "moon", system: "monitor" };
+/**
+ * The appearance menu.
+ *
+ * @param props - the appearance shown and its setter.
+ */
+export const AppearanceMenu = ({ appearance, setAppearance }) => {
+    const { isOpen, isDrawn, setIsOpen, buttonRef, panelRef, panelId } = usePopover();
+    const name = useId();
+    return (_jsxs("div", { className: "forgebook-appearance", children: [_jsxs("button", { ref: buttonRef, type: "button", className: "forgebook-button forgebook-button--quiet", "aria-expanded": isOpen, "aria-controls": panelId, onClick: (event) => setIsOpen(!isOpen, event), children: [_jsx(Icon, { name: ICONS[appearance], size: 14 }), STRINGS.appearanceOf(STRINGS.appearances[appearance])] }), isDrawn ? (_jsx("div", { ref: panelRef, id: panelId, className: "forgebook-popover forgebook-popover--up", role: "dialog", "aria-label": STRINGS.appearance, children: _jsxs("fieldset", { className: "forgebook-choices", children: [_jsx("legend", { className: "forgebook-visually-hidden", children: STRINGS.appearance }), APPEARANCES.map((each) => (_jsxs("label", { className: "forgebook-choice", children: [_jsx("input", { type: "radio", name: name, checked: each === appearance, onChange: () => {
+                                        setAppearance(each);
+                                        setIsOpen(false);
+                                    } }), _jsx(Icon, { name: ICONS[each], size: 14 }), STRINGS.appearances[each]] }, each)))] }) })) : null] }));
+};
+//# sourceMappingURL=AppearanceMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppearanceMenu.js","sourceRoot":"","sources":["../../../src/shell/AppearanceMenu.tsx"],"names":[],"mappings":";AAAA;;;;;GAKG;AACH,OAAO,EAAmC,KAAK,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,WAAW,EAAmB,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,IAAI,EAAiB,MAAM,YAAa,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,8BAA8B;AAC9B,MAAM,KAAK,GAA2C,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC;AAExG;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,UAAU,EAAE,aAAa,EAAmB,EAAa,EAAE;IAC1F,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,UAAU,EAAE,CAAC;IAClF,MAAM,IAAI,GAAG,KAAK,EAAE,CAAC;IACrB,OAAO,CACL,eAAK,SAAS,EAAC,sBAAsB,aACnC,kBACE,GAAG,EAAE,SAAS,EACd,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,0CAA0C,mBACrC,MAAM,mBACN,OAAO,EACtB,OAAO,EAAE,CAAC,KAAoC,EAAQ,EAAE,CAAC,SAAS,CAAC,CAAC,MAAM,EAAE,KAAK,CAAC,aAElF,KAAC,IAAI,IAAC,IAAI,EAAE,KAAK,CAAC,UAAU,CAAC,EAAE,IAAI,EAAE,EAAE,GAAI,EAC1C,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,IAC/C,EACR,OAAO,CAAC,CAAC,CAAC,CACT,cACE,GAAG,EAAE,QAAQ,EACb,EAAE,EAAE,OAAO,EACX,SAAS,EAAC,yCAAyC,EACnD,IAAI,EAAC,QAAQ,gBACD,OAAO,CAAC,UAAU,YAE9B,oBAAU,SAAS,EAAC,mBAAmB,aACrC,iBAAQ,SAAS,EAAC,2BAA2B,YAAE,OAAO,CAAC,UAAU,GAAU,EAC1E,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACzB,iBAAkB,SAAS,EAAC,kBAAkB,aAC5C,gBACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,IAAI,KAAK,UAAU,EAC5B,QAAQ,EAAE,GAAS,EAAE;wCACnB,aAAa,CAAC,IAAI,CAAC,CAAC;wCACpB,SAAS,CAAC,KAAK,CAAC,CAAC;oCACnB,CAAC,GACD,EACF,KAAC,IAAI,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,EAAE,GAAI,EACpC,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,KAXhB,IAAI,CAYR,CACT,CAAC,IACO,GACP,CACP,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,CAAC,CAAC"}

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

@@ -0,0 +1,40 @@
+/**
+ * The width of an example's story while its box fills the page: set by the stage's handles or by the presets and the
+ * field in the box's bar, for that box only.
+ *
+ * @remarks
+ * The page's width (the toolbar's, in the address) is not changed: the box over the page is a moment's look, and the
+ * other examples keep the width they have. The box starts at the page's width and takes it again when it goes back
+ * to its place.
+ *
+ * @module
+ */
+import { type ReactNode } from "react";
+import type { StageWidth } from "../viewState.ts";
+/** An example box's width over the page, and what sets it. */
+export type BoxWidth = {
+    /** The story's width: the box's own over the page, the page's otherwise. */
+    readonly width: StageWidth;
+    /** Sets the box's own width; none in the list, where the stage shows no handles. */
+    readonly onWidthChange: ((width: StageWidth) => void) | undefined;
+    /** The width the story really has, in CSS px, for the field. */
+    readonly shownWidth: number | undefined;
+    /** Called with the width the story really has; none in the list. */
+    readonly onShownWidthChange: ((width: number | undefined) => void) | undefined;
+};
+/**
+ * An example box's width over the page.
+ *
+ * @param isOver - whether the box is over the page.
+ * @param pageWidth - the page's width, the toolbar's.
+ */
+export declare const useBoxWidth: (isOver: boolean, pageWidth: StageWidth) => BoxWidth;
+/**
+ * The width's presets and field in the bar of a box over the page.
+ *
+ * @param props - the box's width and what sets it.
+ */
+export declare const BoxWidthControl: ({ boxWidth }: {
+    readonly boxWidth: BoxWidth;
+}) => ReactNode;
+//# sourceMappingURL=BoxWidth.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BoxWidth.d.ts","sourceRoot":"","sources":["../../../src/shell/BoxWidth.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAEjD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAOlD,8DAA8D;AAC9D,MAAM,MAAM,QAAQ,GAAG;IACrB,4EAA4E;IAC5E,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;IAC3B,oFAAoF;IACpF,QAAQ,CAAC,aAAa,EAAE,CAAC,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAClE,gEAAgE;IAChE,QAAQ,CAAC,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,oEAAoE;IACpE,QAAQ,CAAC,kBAAkB,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CAChF,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,WAAW,GAAI,QAAQ,OAAO,EAAE,WAAW,UAAU,KAAG,QAWpE,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,cAAc;IAAE,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAA;CAAE,KAAG,SAwB/E,CAAC"}

package/dist/src/shell/BoxWidth.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The width of an example's story while its box fills the page: set by the stage's handles or by the presets and the
+ * field in the box's bar, for that box only.
+ *
+ * @remarks
+ * The page's width (the toolbar's, in the address) is not changed: the box over the page is a moment's look, and the
+ * other examples keep the width they have. The box starts at the page's width and takes it again when it goes back
+ * to its place.
+ *
+ * @module
+ */
+import { useState } from "react";
+import { useCatalogue } from "./catalogueContext.js";
+import { Icon } from "./icons.js";
+import { Segmented } from "./Segmented.js";
+import { STRINGS } from "./strings.js";
+import { WidthField } from "./WidthField.js";
+/**
+ * An example box's width over the page.
+ *
+ * @param isOver - whether the box is over the page.
+ * @param pageWidth - the page's width, the toolbar's.
+ */
+export const useBoxWidth = (isOver, pageWidth) => {
+    const [own, setOwn] = useState(undefined);
+    const [shownWidth, setShownWidth] = useState(undefined);
+    // back in its place, the box forgets its own width, so it opens at the page's next time
+    if (!isOver && own !== undefined)
+        setOwn(undefined);
+    return {
+        width: isOver ? (own ?? pageWidth) : pageWidth,
+        onWidthChange: isOver ? setOwn : undefined,
+        shownWidth,
+        onShownWidthChange: isOver ? setShownWidth : undefined
+    };
+};
+/**
+ * The width's presets and field in the bar of a box over the page.
+ *
+ * @param props - the box's width and what sets it.
+ */
+export const BoxWidthControl = ({ boxWidth }) => {
+    const { widths } = useCatalogue();
+    const { width, onWidthChange, shownWidth } = boxWidth;
+    if (onWidthChange === undefined)
+        return null;
+    return (_jsxs("div", { className: "forgebook-example__width", children: [_jsx("span", { className: "forgebook-toolbar__icon", title: STRINGS.width, children: _jsx(Icon, { name: "width", size: 14 }) }), _jsx(Segmented, { label: STRINGS.width, options: [
+                    { value: "fill", label: STRINGS.widthFill },
+                    ...widths.map((preset) => ({
+                        value: preset.width,
+                        label: preset.label ?? STRINGS.widthPx(preset.width)
+                    }))
+                ], value: width, onValueChange: onWidthChange, after: _jsx(WidthField, { width: width, shownWidth: shownWidth, onWidthChange: onWidthChange }) })] }));
+};
+//# sourceMappingURL=BoxWidth.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BoxWidth.js","sourceRoot":"","sources":["../../../src/shell/BoxWidth.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;GAUG;AACH,OAAO,EAAkB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjD,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,YAAa,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAiB,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAkB,CAAC;AAc9C;;;;;GAKG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,MAAe,EAAE,SAAqB,EAAY,EAAE;IAC9E,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAyB,SAAS,CAAC,CAAC;IAClE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAqB,SAAS,CAAC,CAAC;IAC5E,wFAAwF;IACxF,IAAI,CAAC,MAAM,IAAI,GAAG,KAAK,SAAS;QAAE,MAAM,CAAC,SAAS,CAAC,CAAC;IACpD,OAAO;QACL,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS;QAC9C,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;QAC1C,UAAU;QACV,kBAAkB,EAAE,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS;KACvD,CAAC;AACJ,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAmC,EAAa,EAAE;IAC1F,MAAM,EAAE,MAAM,EAAE,GAAG,YAAY,EAAE,CAAC;IAClC,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,QAAQ,CAAC;IACtD,IAAI,aAAa,KAAK,SAAS;QAAE,OAAO,IAAI,CAAC;IAC7C,OAAO,CACL,eAAK,SAAS,EAAC,0BAA0B,aACvC,eAAM,SAAS,EAAC,yBAAyB,EAAC,KAAK,EAAE,OAAO,CAAC,KAAK,YAC5D,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAE,EAAE,GAAI,GAC1B,EACP,KAAC,SAAS,IACR,KAAK,EAAE,OAAO,CAAC,KAAK,EACpB,OAAO,EAAE;oBACP,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,CAAC,SAAS,EAAE;oBAC3C,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;wBACzB,KAAK,EAAE,MAAM,CAAC,KAAK;wBACnB,KAAK,EAAE,MAAM,CAAC,KAAK,IAAI,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC;qBACrD,CAAC,CAAC;iBACJ,EACD,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,KAAC,UAAU,IAAC,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,aAAa,GAAI,GACzF,IACE,CACP,CAAC;AACJ,CAAC,CAAC"}

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

@@ -1,6 +1,20 @@
+/**
+ * A component's page, as a library documents a component: what it is, its demo (the story marked `main`) with
+ * its code, the text of its documentation file, its API reference drawn from its types, then every other story as an
+ * example.
+ *
+ * @remarks
+ * The demo loads at once; the examples load as they come near the visible part of the page, a few at a time
+ * (`useFrameQueue`): a component may have twenty stories. The view's live part reaches every frame as a message, as
+ * on the story page; the props panel and Replay belong to a story's own page, which each story's name links to. The
+ * documentation file's HTML is the package's own, made at build time (`vite/componentPage.ts`).
+ *
+ * @module
+ */
 import { type ReactNode } from "react";
 import { type TreeComponent, type TreeStory } from "../storyTree.ts";
 import { type ViewState } from "../viewState.ts";
+import { type UsedInProps } from "./UsedIn.tsx";
 import { type PageScroll } from "./useScrollMemory.ts";
 /** The component page's props. */
 export type ComponentPageProps = {
@@ -28,11 +42,13 @@ export type ComponentPageProps = {
     readonly header: ReactNode;
     /** Where its scrolling part starts: the shell's visit of the page and every page's last position. */
     readonly scroll: PageScroll;
+    /** What "Used in" reads and opens; none when the catalogue turned it off. */
+    readonly usedIn?: Omit<UsedInProps, "title"> | undefined;
 };
 /**
  * A component's page.
  *
  * @param props - the component, the view, its loaders and how to open a story.
  */
-export declare const ComponentPage: ({ component, view, frameUrl, hrefOf, onOpen, loadDocs, loadCode, loadPage, heightOf, background, header, scroll }: ComponentPageProps) => ReactNode;
+export declare const ComponentPage: ({ component, view, frameUrl, hrefOf, onOpen, loadDocs, loadCode, loadPage, heightOf, background, header, scroll, usedIn }: ComponentPageProps) => ReactNode;
 //# sourceMappingURL=ComponentPage.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ComponentPage.d.ts","sourceRoot":"","sources":["../../../src/shell/ComponentPage.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAmB,KAAK,SAAS,EAAoC,MAAM,OAAO,CAAC;AAK1F,OAAO,EAA6B,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAEhG,OAAO,EAA0B,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAkBzE,OAAO,EAAE,KAAK,UAAU,EAAmB,MAAM,sBAAsB,CAAC;AASxE,kCAAkC;AAClC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,qBAAqB;IACrB,QAAQ,CAAC,SAAS,EAAE,aAAa,CAAC;IAClC,gBAAgB;IAChB,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC;IACzB,gCAAgC;IAChC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,mDAAmD;IACnD,QAAQ,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,MAAM,CAAC;IAC9C,4BAA4B;IAC5B,QAAQ,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC5C,4GAA4G;IAC5G,QAAQ,CAAC,QAAQ,EAAE,CAAC,MAAM,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,SAAS,CAAC;IACxD,8FAA8F;IAC9F,QAAQ,CAAC,QAAQ,EAAE,CAAC,MAAM,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,SAAS,CAAC;IACxD,8FAA8F;IAC9F,QAAQ,CAAC,QAAQ,EAAE,CAAC,MAAM,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,SAAS,CAAC;IACxD,wGAAwG;IACxG,QAAQ,CAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IAC3D,gHAAgH;IAChH,QAAQ,CAAC,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,0EAA0E;IAC1E,QAAQ,CAAC,MAAM,EAAE,SAAS,CAAC;IAC3B,qGAAqG;IACrG,QAAQ,CAAC,MAAM,EAAE,UAAU,CAAC;CAC7B,CAAC;AA0OF;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,mHAa3B,kBAAkB,KAAG,SA+FvB,CAAC"}
+{"version":3,"file":"ComponentPage.d.ts","sourceRoot":"","sources":["../../../src/shell/ComponentPage.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,EAAE,KAAK,SAAS,EAA6B,MAAM,OAAO,CAAC;AAKlE,OAAO,EAA6B,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAChG,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAO3D,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AAOxD,OAAO,EAAE,KAAK,UAAU,EAAmB,MAAM,sBAAsB,CAAC;AAGxE,kCAAkC;AAClC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,qBAAqB;IACrB,QAAQ,CAAC,SAAS,EAAE,aAAa,CAAC;IAClC,gBAAgB;IAChB,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC;IACzB,gCAAgC;IAChC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,mDAAmD;IACnD,QAAQ,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,MAAM,CAAC;IAC9C,4BAA4B;IAC5B,QAAQ,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC5C,4GAA4G;IAC5G,QAAQ,CAAC,QAAQ,EAAE,CAAC,MAAM,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,SAAS,CAAC;IACxD,8FAA8F;IAC9F,QAAQ,CAAC,QAAQ,EAAE,CAAC,MAAM,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,SAAS,CAAC;IACxD,8FAA8F;IAC9F,QAAQ,CAAC,QAAQ,EAAE,CAAC,MAAM,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,SAAS,CAAC;IACxD,wGAAwG;IACxG,QAAQ,CAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IAC3D,gHAAgH;IAChH,QAAQ,CAAC,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,0EAA0E;IAC1E,QAAQ,CAAC,MAAM,EAAE,SAAS,CAAC;IAC3B,qGAAqG;IACrG,QAAQ,CAAC,MAAM,EAAE,UAAU,CAAC;IAC5B,6EAA6E;IAC7E,QAAQ,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG,SAAS,CAAC;CAC1D,CAAC;AAyCF;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,2HAc3B,kBAAkB,KAAG,SAgGvB,CAAC"}

package/dist/src/shell/ComponentPage.js

@@ -1,70 +1,35 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId, useMemo, useRef, useState } from "react";
+/**
+ * A component's page, as a library documents a component: what it is, its demo (the story marked `main`) with
+ * its code, the text of its documentation file, its API reference drawn from its types, then every other story as an
+ * example.
+ *
+ * @remarks
+ * The demo loads at once; the examples load as they come near the visible part of the page, a few at a time
+ * (`useFrameQueue`): a component may have twenty stories. The view's live part reaches every frame as a message, as
+ * on the story page; the props panel and Replay belong to a story's own page, which each story's name links to. The
+ * documentation file's HTML is the package's own, made at build time (`vite/componentPage.ts`).
+ *
+ * @module
+ */
+import { useMemo, useRef, useState } from "react";
 import { groupLabel } from "../catalogue.js";
 import { groupedStories, mainStory } from "../storyTree.js";
-import { frameAddress, liveView } from "../viewState.js";
+import { liveView } from "../viewState.js";
 import { ApiReference } from "./ApiReference.js";
 import { CodeText } from "./CodeText.js";
 import { useCatalogue } from "./catalogueContext.js";
-import { useCodeWriter } from "./codeWriter.js";
-import { FrameView } from "./FrameView.js";
-import { Icon } from "./icons.js";
+import { Example } from "./Example.js";
 import { PackageHtml } from "./PackageHtml.js";
-import { StageViewport } from "./StageViewport.js";
-import { StoryCodeBlock, storyCodeText } from "./StoryCodeBlock.js";
 import { STRINGS } from "./strings.js";
+import { UsedIn } from "./UsedIn.js";
 import { useComponentDocs } from "./useComponentDocs.js";
-import { useCopy } from "./useCopy.js";
 import { useFrameMessages } from "./useFrameMessages.js";
 import { useFrameQueue } from "./useFrameQueue.js";
 import { useLiveView, useLoadedView } from "./useLiveView.js";
 import { usePageDoc } from "./usePageDoc.js";
 import { useScrollMemory } from "./useScrollMemory.js";
 import { useStoryCode } from "./useStoryCode.js";
-/** The height of a frame before its story reports its own, in CSS px. */
-const FALLBACK_HEIGHT = 160;
-/** The demo's height before its story reports its own, in CSS px: the demo is the page's first, larger frame. */
-const DEMO_FALLBACK_HEIGHT = 280;
-/** A link to a story's own page, opened in place unless the user asks for another tab. */
-const StoryLink = ({ story, hrefOf, onOpen, className, children }) => (_jsx("a", { className: className, href: hrefOf(story), onClick: (event) => {
-        if (event.metaKey || event.ctrlKey || event.shiftKey || event.button !== 0)
-            return;
-        event.preventDefault();
-        onOpen(story);
-    }, children: children }));
-/**
- * The code under an example: closed until asked for, then opened in place with a button that copies it.
- *
- * @param props - the story's code and whether it is shown.
- */
-const ExampleCode = ({ id, source, isShown }) => {
-    const { isCopied, copy } = useCopy();
-    const write = useCodeWriter();
-    return (_jsx("div", { id: id, className: "forgebook-example__code", "data-open": isShown ? "" : undefined, inert: !isShown, children: _jsxs("div", { className: "forgebook-example__code-inner", children: [_jsx("button", { type: "button", className: "forgebook-example__copy", onClick: () => copy(storyCodeText(source, write)), "aria-live": "polite", children: isCopied ? STRINGS.copied : STRINGS.copy }), _jsx(StoryCodeBlock, { ...source })] }) }));
-};
-/**
- * One example: its title and description (the demo has none: it opens the page), its story in a frame, and a bar
- * that shows its code.
- *
- * @param props - the story, whether it is the demo, whether its frame may load, where the queue watches it, and what
- * every example shares.
- */
-const Example = ({ story, isDemo, isMounted, observe, ...context }) => {
-    const [isCodeShown, setIsCodeShown] = useState(false);
-    const codeId = useId();
-    // the story's measured height when there is one; a guess otherwise, larger for the demo; never below the height its
-    // scene needs, which its frame has from the start
-    const fallbackHeight = Math.max(story.height ?? 0, context.heightOf(story.id) ?? (isDemo ? DEMO_FALLBACK_HEIGHT : FALLBACK_HEIGHT));
-    const source = context.code.status === "ready"
-        ? {
-            code: context.code.value,
-            exportName: story.exportName,
-            componentName: context.componentName,
-            args: context.argsOf(story.id)
-        }
-        : undefined;
-    return (_jsxs("article", { ref: observe, className: "forgebook-example", "data-demo": isDemo ? "" : undefined, "aria-label": isDemo ? STRINGS.frameTitle(context.component.name, story.name) : story.name, children: [isDemo ? null : (_jsxs("header", { className: "forgebook-example__head", children: [_jsx("h4", { className: "forgebook-example__title", children: _jsx(StoryLink, { story: story, hrefOf: context.hrefOf, onOpen: context.onOpen, className: "forgebook-link", children: story.name }) }), story.description === undefined ? null : (_jsx("p", { className: "forgebook-example__description", children: _jsx(CodeText, { text: story.description }) }))] })), _jsxs("div", { className: "forgebook-example__box", children: [_jsx("div", { className: "forgebook-example__stage", children: _jsx(StageViewport, { width: context.view.width, background: context.background, children: isMounted ? (_jsx(FrameView, { title: STRINGS.frameTitle(context.component.name, story.name), address: frameAddress(context.frameUrl, story.id, context.frameView, context.switches), heights: context.heights, settled: context.settled, fallbackHeight: fallbackHeight, sceneHeight: story.height })) : (_jsx("div", { className: "forgebook-frame-placeholder", style: { height: fallbackHeight } })) }) }), _jsxs("div", { className: "forgebook-example__bar", children: [source === undefined ? null : (_jsxs("button", { type: "button", className: "forgebook-example__toggle", "aria-expanded": isCodeShown, "aria-controls": codeId, onClick: () => setIsCodeShown(!isCodeShown), children: [_jsx(Icon, { name: "chevronRight", size: 12 }), isCodeShown ? STRINGS.hideCode : STRINGS.showCode] })), isDemo ? (_jsxs(StoryLink, { story: story, hrefOf: context.hrefOf, onOpen: context.onOpen, className: "forgebook-example__open", children: [STRINGS.openStory, _jsx(Icon, { name: "external", size: 12 })] })) : null] }), source === undefined ? null : _jsx(ExampleCode, { id: codeId, source: source, isShown: isCodeShown })] })] }));
-};
 /**
  * The page's lead: what the component is and does, from its file's `@module` comment (its own TSDoc is often a bare
  * name), read with the documentation file so it comes with the page; else its TSDoc summary, once the docs come.
@@ -94,7 +59,7 @@ const Prose = ({ page }) => {
  *
  * @param props - the component, the view, its loaders and how to open a story.
  */
-export const ComponentPage = ({ component, view, frameUrl, hrefOf, onOpen, loadDocs, loadCode, loadPage, heightOf, background, header, scroll }) => {
+export const ComponentPage = ({ component, view, frameUrl, hrefOf, onOpen, loadDocs, loadCode, loadPage, heightOf, background, header, scroll, usedIn }) => {
     const pageRef = useRef(null);
     const docs = useComponentDocs(loadDocs);
     const code = useStoryCode(loadCode);
@@ -141,6 +106,6 @@ export const ComponentPage = ({ component, view, frameUrl, hrefOf, onOpen, loadD
         heightOf,
         background
     };
-    return (_jsxs("div", { className: "forgebook-workspace", children: [header, _jsx("div", { ref: pageRef, className: "forgebook-scroll", children: _jsxs("div", { className: "forgebook-doc", children: [_jsx(Lead, { page: page, docs: componentDocs }), demo === undefined ? null : _jsx(Example, { ...context, story: demo, isDemo: true, isMounted: true }), _jsx(Prose, { page: page }), componentDocs === undefined || componentDocs.props.length === 0 ? null : (_jsx(ApiReference, { docs: componentDocs })), examples.length === 0 ? null : (_jsxs("section", { className: "forgebook-doc__section", "aria-labelledby": "forgebook-examples", children: [_jsx("h2", { id: "forgebook-examples", children: STRINGS.examples }), groupedStories(examples, catalogue.storyGroups.map((group) => group.id)).map((section) => (_jsxs("section", { className: "forgebook-doc__group", children: [section.group === undefined ? null : (_jsx("h3", { className: "forgebook-doc__group-name", children: groupLabel(catalogue.storyGroups, section.group) })), section.stories.map((story) => (_jsx(Example, { ...context, story: story, isDemo: false, isMounted: queue.mounted.has(story.id), observe: (element) => queue.observe(story.id, element) }, story.id)))] }, section.group ?? "")))] }))] }, `${component.file}|${component.title}`) })] }));
+    return (_jsxs("div", { className: "forgebook-workspace", children: [header, _jsx("div", { ref: pageRef, className: "forgebook-scroll", children: _jsxs("div", { className: "forgebook-doc", children: [_jsx(Lead, { page: page, docs: componentDocs }), demo === undefined ? null : _jsx(Example, { ...context, story: demo, isDemo: true, isMounted: true }), _jsx(Prose, { page: page }), componentDocs === undefined || componentDocs.props.length === 0 ? null : (_jsx(ApiReference, { docs: componentDocs })), examples.length === 0 ? null : (_jsxs("section", { className: "forgebook-doc__section", "aria-labelledby": "forgebook-examples", children: [_jsx("h2", { id: "forgebook-examples", children: STRINGS.examples }), groupedStories(examples, catalogue.storyGroups.map((group) => group.id)).map((section) => (_jsxs("section", { className: "forgebook-doc__group", children: [section.group === undefined ? null : (_jsx("h3", { className: "forgebook-doc__group-name", children: groupLabel(catalogue.storyGroups, section.group) })), section.stories.map((story) => (_jsx(Example, { ...context, story: story, isDemo: false, isMounted: queue.mounted.has(story.id), observe: (element) => queue.observe(story.id, element) }, story.id)))] }, section.group ?? "")))] })), usedIn === undefined ? null : _jsx(UsedIn, { title: component.title, ...usedIn })] }, `${component.file}|${component.title}`) })] }));
 };
 //# sourceMappingURL=ComponentPage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ComponentPage.js","sourceRoot":"","sources":["../../../src/shell/ComponentPage.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ComponentPage.js","sourceRoot":"","sources":["../../../src/shell/ComponentPage.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,EAAkB,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAElE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAG7C,OAAO,EAAE,cAAc,EAAE,SAAS,EAAsC,MAAM,iBAAiB,CAAC;AAChG,OAAO,EAAE,QAAQ,EAAkB,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAoB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAgB,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,OAAO,EAAuB,MAAM,cAAe,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAmB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,MAAM,EAAoB,MAAM,aAAc,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAqB,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAE9D,OAAO,EAAgB,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAmB,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAgCjD;;;;;GAKG;AACH,MAAM,IAAI,GAAG,CAAC,EACZ,IAAI,EACJ,IAAI,EAIL,EAAa,EAAE;IACd,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IAClE,MAAM,IAAI,GAAG,OAAO,IAAI,IAAI,EAAE,OAAO,IAAI,IAAI,EAAE,WAAW,IAAI,EAAE,CAAC;IACjE,OAAO,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC1B,YAAG,SAAS,EAAC,qBAAqB,YAChC,KAAC,QAAQ,IAAC,IAAI,EAAE,IAAI,GAAI,GACtB,CACL,CAAC;AACJ,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,KAAK,GAAG,CAAC,EAAE,IAAI,EAAsC,EAAa,EAAE;IACxE,IAAI,IAAI,CAAC,MAAM,KAAK,OAAO,EAAE,CAAC;QAC5B,OAAO,CACL,aAAG,SAAS,EAAC,oBAAoB,EAAC,IAAI,EAAC,OAAO,aAC3C,OAAO,CAAC,SAAS,QAAI,IAAI,CAAC,OAAO,IAChC,CACL,CAAC;IACJ,CAAC;IACD,IAAI,IAAI,CAAC,MAAM,KAAK,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,EAAE;QAAE,OAAO,IAAI,CAAC;IACnE,OAAO,KAAC,WAAW,IAAC,SAAS,EAAC,iBAAiB,EAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,GAAI,CAAC;AAC5E,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,MAAM,EACN,MAAM,EACN,MAAM,EACa,EAAa,EAAE;IAClC,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC7C,MAAM,IAAI,GAAG,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACxC,MAAM,IAAI,GAAG,YAAY,CAAC,QAAQ,CAAC,CAAC;IACpC,MAAM,IAAI,GAAG,UAAU,CAAC,QAAQ,CAAC,CAAC;IAClC,iHAAiH;IACjH,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAiC,IAAI,GAAG,EAAE,CAAC,CAAC;IACtF,MAAM,IAAI,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,MAAM,QAAQ,GAAG,OAAO,CACtB,GAAG,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,IAAI,EAAE,EAAE,CAAC,EAChE,CAAC,SAAS,EAAE,IAAI,CAAC,CAClB,CAAC;IACF,8GAA8G;IAC9G,0DAA0D;IAC1D,MAAM,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACnD,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAC;IAC/B,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAChF,MAAM,KAAK,GAAG,aAAa,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;IACjD,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,gBAAgB,CAAC;QAC5C,OAAO,EAAE,CAAC,KAAa,EAAE,OAAqB,EAAQ,EAAE;YACtD,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;YACjC,YAAY,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,IAAI,GAAG,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;YAC/E,MAAM,IAAI,GAAG,CAAC,YAA0B,EAAQ,EAAE,CAChD,KAAK,CAAC,WAAW,CAAC,YAAY,EAAE,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;YAC1D,IAAI,CAAC,EAAE,IAAI,EAAE,gBAAgB,EAAE,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YACvD,IAAI,CAAC,EAAE,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;QACvD,CAAC;QACD,MAAM,EAAE,GAAS,EAAE,CAAC,SAAS;QAC7B,+EAA+E;QAC/E,QAAQ,EAAE,KAAK,CAAC,SAAS;KAC1B,CAAC,CAAC;IACH,WAAW,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IACjC,eAAe,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IACjC,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;IACvE,MAAM,OAAO,GAAmB;QAC9B,SAAS;QACT,IAAI;QACJ,QAAQ;QACR,MAAM;QACN,MAAM;QACN,SAAS;QACT,QAAQ;QACR,OAAO;QACP,OAAO;QACP,IAAI;QACJ,aAAa,EAAE,aAAa,EAAE,IAAI,IAAI,SAAS,CAAC,IAAI;QACpD,MAAM,EAAE,CAAC,OAAe,EAAa,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,EAAE;QACpE,QAAQ;QACR,UAAU;KACX,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,qBAAqB,aACjC,MAAM,EACP,cAAK,GAAG,EAAE,OAAO,EAAE,SAAS,EAAC,kBAAkB,YAE7C,eAAkD,SAAS,EAAC,eAAe,aACzE,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,aAAa,GAAI,EACxC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAC,OAAO,OAAK,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,GAAI,EACjG,KAAC,KAAK,IAAC,IAAI,EAAE,IAAI,GAAI,EACpB,aAAa,KAAK,SAAS,IAAI,aAAa,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACxE,KAAC,YAAY,IAAC,IAAI,EAAE,aAAa,GAAI,CACtC,EACA,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC9B,mBAAS,SAAS,EAAC,wBAAwB,qBAAiB,oBAAoB,aAC9E,aAAI,EAAE,EAAC,oBAAoB,YAAE,OAAO,CAAC,QAAQ,GAAM,EAClD,cAAc,CACb,QAAQ,EACR,SAAS,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAC/C,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CACjB,mBAAmC,SAAS,EAAC,sBAAsB,aAChE,OAAO,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACpC,aAAI,SAAS,EAAC,2BAA2B,YACtC,UAAU,CAAC,SAAS,CAAC,WAAW,EAAE,OAAO,CAAC,KAAK,CAAC,GAC9C,CACN,EACA,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAC9B,KAAC,OAAO,OAEF,OAAO,EACX,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,KAAK,EACb,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,EACtC,OAAO,EAAE,CAAC,OAA2B,EAAQ,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,EAAE,OAAO,CAAC,IAL3E,KAAK,CAAC,EAAE,CAMb,CACH,CAAC,KAfU,OAAO,CAAC,KAAK,IAAI,EAAE,CAgBvB,CACX,CAAC,IACM,CACX,EACA,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAC,MAAM,IAAC,KAAK,EAAE,SAAS,CAAC,KAAK,KAAM,MAAM,GAAI,KAlCrE,GAAG,SAAS,CAAC,IAAI,IAAI,SAAS,CAAC,KAAK,EAAE,CAmC1C,GACF,IACF,CACP,CAAC;AACJ,CAAC,CAAC"}

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

@@ -0,0 +1,21 @@
+/**
+ * A control's key in its View row: the key shown, and a press on it records another (Backspace takes it away, Escape
+ * keeps it). A key the shell or another control has is refused, the reason said in place.
+ *
+ * @module
+ */
+import { type ReactNode } from "react";
+/**
+ * The key field.
+ *
+ * @param props - the control's name, its key, and what gives it another.
+ */
+export declare const ControlKeyField: ({ label, shortcut, onKeyChange }: {
+    /** The control's name, for the field's own. */
+    readonly label: string;
+    /** Its key; none when it has none. */
+    readonly shortcut: string | undefined;
+    /** Gives it another key (`null` takes it away); answers why a key cannot be given. */
+    readonly onKeyChange: (key: string | null) => string | undefined;
+}) => ReactNode;
+//# sourceMappingURL=ControlKeyField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ControlKeyField.d.ts","sourceRoot":"","sources":["../../../src/shell/ControlKeyField.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAsB,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAQrE;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,kCAI7B;IACD,+CAA+C;IAC/C,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,sCAAsC;IACtC,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IACtC,sFAAsF;IACtF,QAAQ,CAAC,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,MAAM,GAAG,SAAS,CAAC;CAClE,KAAG,SAyCH,CAAC"}

package/dist/src/shell/ControlKeyField.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A control's key in its View row: the key shown, and a press on it records another (Backspace takes it away, Escape
+ * keeps it). A key the shell or another control has is refused, the reason said in place.
+ *
+ * @module
+ */
+import { useState } from "react";
+import { keyOf } from "../controlKeys.js";
+import { STRINGS } from "./strings.js";
+/** The keys that take a control's key away while one is recorded. */
+const REMOVE_KEYS = ["Backspace", "Delete"];
+/**
+ * The key field.
+ *
+ * @param props - the control's name, its key, and what gives it another.
+ */
+export const ControlKeyField = ({ label, shortcut, onKeyChange }) => {
+    const [isRecording, setIsRecording] = useState(false);
+    const [problem, setProblem] = useState(undefined);
+    const record = (event) => {
+        if (!isRecording || event.key === "Tab")
+            return;
+        // the press is the field's: neither the controls' keys nor the menu's Escape see it
+        event.preventDefault();
+        event.stopPropagation();
+        if (event.key === "Escape") {
+            setIsRecording(false);
+            return;
+        }
+        if (event.metaKey || event.ctrlKey || event.altKey)
+            return;
+        const key = REMOVE_KEYS.includes(event.key) ? null : keyOf(event.key);
+        if (key === undefined)
+            return;
+        const refused = onKeyChange(key);
+        setProblem(refused);
+        if (refused === undefined)
+            setIsRecording(false);
+    };
+    return (_jsxs("span", { className: "forgebook-key-field", children: [_jsx("button", { type: "button", className: "forgebook-key-field__button", "aria-label": STRINGS.controlKey(label, shortcut), "aria-pressed": isRecording, title: isRecording ? STRINGS.pressAKey : STRINGS.changeKey, onClick: () => {
+                    setProblem(undefined);
+                    setIsRecording(!isRecording);
+                }, onBlur: () => setIsRecording(false), onKeyDown: record, children: isRecording ? STRINGS.pressAKey : _jsx("kbd", { children: shortcut?.toUpperCase() ?? "–" }) }), _jsx("span", { className: "forgebook-key-field__problem", role: "status", children: problem ?? "" })] }));
+};
+//# sourceMappingURL=ControlKeyField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ControlKeyField.js","sourceRoot":"","sources":["../../../src/shell/ControlKeyField.tsx"],"names":[],"mappings":";AAAA;;;;;GAKG;AACH,OAAO,EAAsC,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErE,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,qEAAqE;AACrE,MAAM,WAAW,GAAG,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;AAE5C;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAC9B,KAAK,EACL,QAAQ,EACR,WAAW,EAQZ,EAAa,EAAE;IACd,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAqB,SAAS,CAAC,CAAC;IACtE,MAAM,MAAM,GAAG,CAAC,KAAuC,EAAQ,EAAE;QAC/D,IAAI,CAAC,WAAW,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK;YAAE,OAAO;QAChD,oFAAoF;QACpF,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;YAC3B,cAAc,CAAC,KAAK,CAAC,CAAC;YACtB,OAAO;QACT,CAAC;QACD,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,MAAM;YAAE,OAAO;QAC3D,MAAM,GAAG,GAAG,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QACtE,IAAI,GAAG,KAAK,SAAS;YAAE,OAAO;QAC9B,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC;QACjC,UAAU,CAAC,OAAO,CAAC,CAAC;QACpB,IAAI,OAAO,KAAK,SAAS;YAAE,cAAc,CAAC,KAAK,CAAC,CAAC;IACnD,CAAC,CAAC;IACF,OAAO,CACL,gBAAM,SAAS,EAAC,qBAAqB,aACnC,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,6BAA6B,gBAC3B,OAAO,CAAC,UAAU,CAAC,KAAK,EAAE,QAAQ,CAAC,kBACjC,WAAW,EACzB,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,EAC1D,OAAO,EAAE,GAAS,EAAE;oBAClB,UAAU,CAAC,SAAS,CAAC,CAAC;oBACtB,cAAc,CAAC,CAAC,WAAW,CAAC,CAAC;gBAC/B,CAAC,EACD,MAAM,EAAE,GAAS,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,EACzC,SAAS,EAAE,MAAM,YAEhB,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,wBAAM,QAAQ,EAAE,WAAW,EAAE,IAAI,GAAG,GAAO,GACvE,EACT,eAAM,SAAS,EAAC,8BAA8B,EAAC,IAAI,EAAC,QAAQ,YACzD,OAAO,IAAI,EAAE,GACT,IACF,CACR,CAAC;AACJ,CAAC,CAAC"}