forgebook 0.1.3 → 0.1.5

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":";AAcA,OAAO,EAAmC,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE1F,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAG7C,OAAO,EAAE,cAAc,EAAE,SAAS,EAAsC,MAAM,iBAAiB,CAAC;AAEhG,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAkB,MAAM,iBAAiB,CAAC;AACzE,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,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAiB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,YAAa,CAAC;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAmB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAqB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAwB,aAAa,EAAE,MAAM,qBAAsB,CAAC;AAC3F,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,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;AAEjD,yEAAyE;AACzE,MAAM,eAAe,GAAG,GAAG,CAAC;AAE5B,iHAAiH;AACjH,MAAM,oBAAoB,GAAG,GAAG,CAAC;AAoDjC,0FAA0F;AAC1F,MAAM,SAAS,GAAG,CAAC,EACjB,KAAK,EACL,MAAM,EACN,MAAM,EACN,SAAS,EACT,QAAQ,EAKT,EAAa,EAAE,CAAC,CACf,YACE,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,EACnB,OAAO,EAAE,CAAC,KAAoC,EAAQ,EAAE;QACtD,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QACnF,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,MAAM,CAAC,KAAK,CAAC,CAAC;IAChB,CAAC,YAEA,QAAQ,GACP,CACL,CAAC;AAEF;;;;GAIG;AACH,MAAM,WAAW,GAAG,CAAC,EACnB,EAAE,EACF,MAAM,EACN,OAAO,EAKR,EAAa,EAAE;IACd,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,OAAO,EAAE,CAAC;IACrC,MAAM,KAAK,GAAG,aAAa,EAAE,CAAC;IAC9B,OAAO,CAGL,cAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAC,yBAAyB,eAAY,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,KAAK,EAAE,CAAC,OAAO,YACnG,eAAK,SAAS,EAAC,+BAA+B,aAC5C,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,yBAAyB,EACnC,OAAO,EAAE,GAAS,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,eAC7C,QAAQ,YAEjB,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,GAClC,EACT,KAAC,cAAc,OAAK,MAAM,GAAI,IAC1B,GACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,OAAO,GAAG,CAAC,EACf,KAAK,EACL,MAAM,EACN,SAAS,EACT,OAAO,EACP,GAAG,OAAO,EAMX,EAAa,EAAE;IACd,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,MAAM,GAAG,KAAK,EAAE,CAAC;IACvB,oHAAoH;IACpH,kDAAkD;IAClD,MAAM,cAAc,GAAG,IAAI,CAAC,GAAG,CAC7B,KAAK,CAAC,MAAM,IAAI,CAAC,EACjB,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,eAAe,CAAC,CAChF,CAAC;IACF,MAAM,MAAM,GACV,OAAO,CAAC,IAAI,CAAC,MAAM,KAAK,OAAO;QAC7B,CAAC,CAAC;YACE,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK;YACxB,UAAU,EAAE,KAAK,CAAC,UAAU;YAC5B,aAAa,EAAE,OAAO,CAAC,aAAa;YACpC,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC;SAC/B;QACH,CAAC,CAAC,SAAS,CAAC;IAChB,OAAO,CACL,mBACE,GAAG,EAAE,OAAO,EACZ,SAAS,EAAC,mBAAmB,eAClB,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,gBACtB,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,aAEvF,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACf,kBAAQ,SAAS,EAAC,yBAAyB,aACzC,aAAI,SAAS,EAAC,0BAA0B,YACtC,KAAC,SAAS,IACR,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,CAAC,MAAM,EACtB,MAAM,EAAE,OAAO,CAAC,MAAM,EACtB,SAAS,EAAC,gBAAgB,YAEzB,KAAK,CAAC,IAAI,GACD,GACT,EACJ,KAAK,CAAC,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACxC,YAAG,SAAS,EAAC,gCAAgC,YAC3C,KAAC,QAAQ,IAAC,IAAI,EAAE,KAAK,CAAC,WAAW,GAAI,GACnC,CACL,IACM,CACV,EACD,eAAK,SAAS,EAAC,wBAAwB,aACrC,cAAK,SAAS,EAAC,0BAA0B,YACvC,KAAC,aAAa,IAAC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,UAAU,EAAE,OAAO,CAAC,UAAU,YACrE,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,SAAS,IACR,KAAK,EAAE,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,EAC7D,OAAO,EAAE,YAAY,CAAC,OAAO,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,CAAC,QAAQ,CAAC,EACtF,OAAO,EAAE,OAAO,CAAC,OAAO,EACxB,OAAO,EAAE,OAAO,CAAC,OAAO,EACxB,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,KAAK,CAAC,MAAM,GACzB,CACH,CAAC,CAAC,CAAC,CAEF,cAAK,SAAS,EAAC,6BAA6B,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,cAAc,EAAE,GAAI,CACnF,GACa,GACZ,EACN,eAAK,SAAS,EAAC,wBAAwB,aACpC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC7B,kBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,2BAA2B,mBACtB,WAAW,mBACX,MAAM,EACrB,OAAO,EAAE,GAAS,EAAE,CAAC,cAAc,CAAC,CAAC,WAAW,CAAC,aAEjD,KAAC,IAAI,IAAC,IAAI,EAAC,cAAc,EAAC,IAAI,EAAE,EAAE,GAAI,EACrC,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,IAC3C,CACV,EACA,MAAM,CAAC,CAAC,CAAC,CACR,MAAC,SAAS,IACR,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,CAAC,MAAM,EACtB,MAAM,EAAE,OAAO,CAAC,MAAM,EACtB,SAAS,EAAC,yBAAyB,aAElC,OAAO,CAAC,SAAS,EAClB,KAAC,IAAI,IAAC,IAAI,EAAC,UAAU,EAAC,IAAI,EAAE,EAAE,GAAI,IACxB,CACb,CAAC,CAAC,CAAC,IAAI,IACJ,EACL,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAC,WAAW,IAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,GAAI,IAC5F,IACE,CACX,CAAC;AACJ,CAAC,CAAC;AAEF;;;;;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,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,KAjCO,GAAG,SAAS,CAAC,IAAI,IAAI,SAAS,CAAC,KAAK,EAAE,CAkC1C,GACF,IACF,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"ComponentPage.js","sourceRoot":"","sources":["../../../src/shell/ComponentPage.tsx"],"names":[],"mappings":"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"}

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"}

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

@@ -0,0 +1,31 @@
+/**
+ * A row of the View menu: a handle to move the control (dragged, or with the arrow keys, the new position announced),
+ * its name with a dot when its value is changed, its value, its key, a pin that puts it on the toolbar and a button that
+ * hides it in the menu.
+ *
+ * @module
+ */
+import type { PointerEvent, ReactNode } from "react";
+import type { PlacedControl } from "../toolbarLayout.ts";
+import { type ControlContext } from "./ToolbarControl.tsx";
+import type { ToolbarLayout } from "./useToolbarLayout.ts";
+/**
+ * One control's row: its handle, its name, its value, its key, its pin and its hide button.
+ *
+ * @param props - the placed control, its position, what moving and placing it do, and what every control shares.
+ */
+export declare const ControlRow: ({ each, index, count, isDragged, isMoved, isChanged, layout, hintId, onGrab, onAnnounce, ...context }: ControlContext & {
+    readonly each: PlacedControl;
+    readonly index: number;
+    readonly count: number;
+    readonly isDragged: boolean;
+    /** Whether it is pinned but the bar has no room for it now. */
+    readonly isMoved: boolean;
+    /** Whether the person set a value that is not its default. */
+    readonly isChanged: boolean;
+    readonly layout: ToolbarLayout;
+    readonly hintId: string;
+    readonly onGrab: (event: PointerEvent<HTMLButtonElement>, id: string) => void;
+    readonly onAnnounce: (text: string) => void;
+}) => ReactNode;
+//# sourceMappingURL=ControlRow.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ControlRow.d.ts","sourceRoot":"","sources":["../../../src/shell/ControlRow.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,KAAK,EAAiB,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAKzD,OAAO,EAAE,KAAK,cAAc,EAAgC,MAAM,sBAAsB,CAAC;AACzF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAK3D;;;;GAIG;AACH,eAAO,MAAM,UAAU,GAAI,uGAYxB,cAAc,GAAG;IAClB,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAC;IAC7B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAC5B,+DAA+D;IAC/D,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,8DAA8D;IAC9D,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,MAAM,EAAE,aAAa,CAAC;IAC/B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,iBAAiB,CAAC,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9E,QAAQ,CAAC,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C,KAAG,SAmEH,CAAC"}

package/dist/src/shell/ControlRow.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ControlKeyField } from "./ControlKeyField.js";
+import { InfoTip } from "./InfoTip.js";
+import { Icon } from "./icons.js";
+import { STRINGS } from "./strings.js";
+import { controlLabel, ToolbarControl } from "./ToolbarControl.js";
+/** The arrow keys that move a row, and by how much. */
+const ARROW_STEPS = { ArrowUp: -1, ArrowDown: 1 };
+/**
+ * One control's row: its handle, its name, its value, its key, its pin and its hide button.
+ *
+ * @param props - the placed control, its position, what moving and placing it do, and what every control shares.
+ */
+export const ControlRow = ({ each, index, count, isDragged, isMoved, isChanged, layout, hintId, onGrab, onAnnounce, ...context }) => {
+    const { control, isPinned } = each;
+    const label = controlLabel(control);
+    const step = (event) => {
+        const offset = ARROW_STEPS[event.key] ?? 0;
+        const target = index + offset;
+        if (offset === 0 || target < 0 || target >= count)
+            return;
+        event.preventDefault();
+        layout.move(control.id, target);
+        onAnnounce(STRINGS.controlMoved(label, target + 1, count));
+    };
+    // a switch's note (the touch simulation's limits): an info button beside its value
+    const description = control.kind === "switch" ? control.switch.description : undefined;
+    return (_jsxs("li", { className: "forgebook-arrange", "data-control": control.id, "data-pinned": isPinned ? "" : undefined, "data-dragged": isDragged ? "" : undefined, "data-moved": isMoved ? "" : undefined, children: [_jsx("button", { type: "button", className: "forgebook-arrange__handle", "aria-label": STRINGS.moveControl(label), "aria-describedby": hintId, onPointerDown: (event) => onGrab(event, control.id), onKeyDown: step, children: _jsx(Icon, { name: "grip", size: 14 }) }), _jsxs("span", { className: "forgebook-popover__label", children: [label, isChanged ? (_jsx("span", { className: "forgebook-dot", role: "img", "aria-label": STRINGS.controlChanged(label) })) : null] }), _jsxs("div", { className: "forgebook-arrange__control", children: [_jsx(ToolbarControl, { control: control, form: "row", ...context }), description === undefined ? null : _jsx(InfoTip, { note: description, about: label })] }), _jsx(ControlKeyField, { label: label, shortcut: layout.keys[control.id], onKeyChange: (key) => layout.setKey(control.id, key) }), _jsx("button", { type: "button", className: "forgebook-icon-button", "aria-label": STRINGS.pinControl(label), title: isMoved ? STRINGS.pinnedNoRoom : STRINGS.pinControl(label), "aria-pressed": isPinned, onClick: () => layout.pin(control.id, !isPinned), children: _jsx(Icon, { name: "pin", size: 14 }) }), _jsx("button", { type: "button", className: "forgebook-icon-button", "aria-label": STRINGS.hideControl(label), title: STRINGS.hideControl(label), onClick: () => layout.hide(control.id, true), children: _jsx(Icon, { name: "eyeOff", size: 14 }) })] }));
+};
+//# sourceMappingURL=ControlRow.js.map

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

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

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

@@ -0,0 +1,58 @@
+/**
+ * One example of a component's page: its title and description, its story in a frame, and a bar that shows its code,
+ * fills the page with its box (with the story's width set there) and opens its story on its own page.
+ *
+ * @module
+ */
+import type { StoryFileCode } from "@forgebook/story-format/source";
+import { type ReactNode } from "react";
+import type { PanelArgs } from "../messages.ts";
+import type { TreeComponent, TreeStory } from "../storyTree.ts";
+import type { ViewSwitch } from "../switches.ts";
+import { type ViewState } from "../viewState.ts";
+import type { Loaded } from "./useLoaded.ts";
+/** What every example of the page shares: the frames' address, view and reports, the code, how to open a story. */
+export type ExampleContext = {
+    /** The component. */
+    readonly component: TreeComponent;
+    /** The view. */
+    readonly view: ViewState;
+    /** The frame page's address. */
+    readonly frameUrl: string;
+    /** The address of a story's page, for its link. */
+    readonly hrefOf: (story: TreeStory) => string;
+    /** Opens a story's page. */
+    readonly onOpen: (story: TreeStory) => void;
+    /** The view the frames loaded with. */
+    readonly frameView: ViewState;
+    /** The catalogue's switches, for the frames' addresses. */
+    readonly switches: readonly ViewSwitch[];
+    /** Each frame's reported height, by its address. */
+    readonly heights: ReadonlyMap<string, number>;
+    /** The addresses of the frames that finished loading. */
+    readonly settled: ReadonlySet<string>;
+    /** The story file's code. */
+    readonly code: Loaded<StoryFileCode>;
+    /** The component's name, for the JSX of a story drawn from its args. */
+    readonly componentName: string;
+    /** A story's own args, as its frame reported them; none before it loads. */
+    readonly argsOf: (storyId: string) => PanelArgs;
+    /** A story's measured height, for its box while it loads. */
+    readonly heightOf: (storyId: string) => number | undefined;
+    /** The colour the stories' page has, which each box waits on. */
+    readonly background: string | undefined;
+};
+/**
+ * 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 and opens the story on its own page.
+ *
+ * @param props - the story, whether it is the demo, whether its frame may load, where the queue watches it, and what
+ * every example shares.
+ */
+export declare const Example: ({ story, isDemo, isMounted, observe, ...context }: ExampleContext & {
+    readonly story: TreeStory;
+    readonly isDemo: boolean;
+    readonly isMounted: boolean;
+    readonly observe?: (element: HTMLElement | null) => void;
+}) => ReactNode;
+//# sourceMappingURL=Example.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Example.d.ts","sourceRoot":"","sources":["../../../src/shell/Example.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAmB,KAAK,SAAS,EAAmB,MAAM,OAAO,CAAC;AAEzE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAChE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAgB,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAW/D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAQ7C,mHAAmH;AACnH,MAAM,MAAM,cAAc,GAAG;IAC3B,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,uCAAuC;IACvC,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAC;IAC9B,2DAA2D;IAC3D,QAAQ,CAAC,QAAQ,EAAE,SAAS,UAAU,EAAE,CAAC;IACzC,oDAAoD;IACpD,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9C,yDAAyD;IACzD,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACtC,6BAA6B;IAC7B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC,aAAa,CAAC,CAAC;IACrC,wEAAwE;IACxE,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,4EAA4E;IAC5E,QAAQ,CAAC,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,SAAS,CAAC;IAChD,6DAA6D;IAC7D,QAAQ,CAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IAC3D,iEAAiE;IACjE,QAAQ,CAAC,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;CACzC,CAAC;AAqLF;;;;;;GAMG;AACH,eAAO,MAAM,OAAO,GAAI,mDAMrB,cAAc,GAAG;IAClB,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;CAC1D,KAAG,SAyEH,CAAC"}

package/dist/src/shell/Example.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { frameAddress } from "../viewState.js";
+import { BoxWidthControl, useBoxWidth } from "./BoxWidth.js";
+import { CodeText } from "./CodeText.js";
+import { useCodeWriter } from "./codeWriter.js";
+import { FrameView } from "./FrameView.js";
+import { Icon } from "./icons.js";
+import { StageViewport } from "./StageViewport.js";
+import { StoryCodeBlock, storyCodeText } from "./StoryCodeBlock.js";
+import { STRINGS } from "./strings.js";
+import { useCopy } from "./useCopy.js";
+import { useFullPage } from "./useFullPage.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, label, children }) => (_jsx("a", { className: className, "aria-label": label, 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 })] }) }));
+};
+/**
+ * The height an example's story is drawn at least at: its scene's, and over the page the room its stage has.
+ *
+ * @param story - the story.
+ * @param stageHeight - the stage's height while the box is over the page, in CSS px; none in the list.
+ */
+const sceneHeightOf = (story, stageHeight) => stageHeight === undefined ? story.height : Math.max(story.height ?? 0, stageHeight);
+/**
+ * An example's title, a link to its story's page, and its description.
+ *
+ * @param props - the story and how its link opens it.
+ */
+const ExampleHead = ({ story, context }) => (_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 }) }))] }));
+/**
+ * What keeps an example's place while its box is over the page: a slot of its height in the list, and the shade
+ * under the box, a press on which brings it back.
+ *
+ * @param props - the box's state over the page.
+ */
+const FullPageSlot = ({ full }) => (_jsxs(_Fragment, { children: [_jsx("div", { ref: full.slotRef, className: "forgebook-example__slot", style: { height: full.slotHeight } }), _jsx("div", { ref: full.shadeRef, className: "forgebook-full-shade", "aria-hidden": "true", onClick: () => full.toggle() })] }));
+/**
+ * An example's bar: its code shown or hidden, the story's width while its box fills the page, its box filling the page
+ * or back in its place, and its story opened on its own page.
+ *
+ * @param props - the story, what every example shares, its code's state and its box's state over the page.
+ */
+const ExampleBar = ({ story, context, hasCode, isCodeShown, onCodeShownChange, codeId, full, boxWidth }) => (_jsxs("div", { className: "forgebook-example__bar", children: [hasCode ? (_jsxs("button", { type: "button", className: "forgebook-example__toggle", "aria-expanded": isCodeShown, "aria-controls": codeId, onClick: () => onCodeShownChange(!isCodeShown), children: [_jsx(Icon, { name: "chevronRight", size: 12 }), isCodeShown ? STRINGS.hideCode : STRINGS.showCode] })) : null, _jsx(BoxWidthControl, { boxWidth: boxWidth }), _jsxs("button", { type: "button", className: "forgebook-example__full", "aria-label": full.isFull ? STRINGS.backToPlaceNamed(story.name) : STRINGS.fillPageNamed(story.name), onClick: (event) => full.toggle(event), children: [_jsx(Icon, { name: full.isFull ? "collapse" : "expand", size: 12 }), full.isFull ? STRINGS.backToPlace : STRINGS.fillPage] }), _jsxs(StoryLink, { story: story, hrefOf: context.hrefOf, onOpen: context.onOpen, className: "forgebook-example__open", label: STRINGS.openStoryNamed(story.name), children: [STRINGS.openStory, _jsx(Icon, { name: "external", size: 12 })] })] }));
+/**
+ * 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 and opens the story on its own page.
+ *
+ * @param props - the story, whether it is the demo, whether its frame may load, where the queue watches it, and what
+ * every example shares.
+ */
+export const Example = ({ story, isDemo, isMounted, observe, ...context }) => {
+    const [isCodeShown, setIsCodeShown] = useState(false);
+    const codeId = useId();
+    const full = useFullPage();
+    const boxWidth = useBoxWidth(full.isOver, context.view.width);
+    // 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 : _jsx(ExampleHead, { story: story, context: context }), full.isOver ? _jsx(FullPageSlot, { full: full }) : null, _jsxs("div", { ref: full.boxRef, className: "forgebook-example__box", "data-full": full.isOver ? "" : undefined, ...(full.isFull ? { role: "dialog", "aria-label": story.name } : {}), children: [_jsx("div", { ref: full.stageRef, className: "forgebook-example__stage", children: _jsx(StageViewport, { width: boxWidth.width, onWidthChange: boxWidth.onWidthChange, onShownWidthChange: boxWidth.onShownWidthChange, 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, 
+                                // over the page, the story fills the room it has
+                                sceneHeight: sceneHeightOf(story, full.stageHeight) })) : (_jsx("div", { className: "forgebook-frame-placeholder", style: { height: fallbackHeight } })) }) }), _jsx(ExampleBar, { story: story, context: context, hasCode: source !== undefined, isCodeShown: isCodeShown, onCodeShownChange: setIsCodeShown, codeId: codeId, full: full, boxWidth: boxWidth }), source === undefined ? null : _jsx(ExampleCode, { id: codeId, source: source, isShown: isCodeShown })] })] }));
+};
+//# sourceMappingURL=Example.js.map

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

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

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

@@ -0,0 +1,23 @@
+/**
+ * A small info button whose note shows while the pointer is over it or it has the focus: for a control that needs a
+ * word of warning (the touch simulation's limits) without a paragraph under it.
+ *
+ * @remarks
+ * The note is a manual popover in the top layer, placed under the button (above it near the window's foot), so no
+ * scrolling menu or toolbar clips it; it is the button's description for screen readers as well, and Escape hides it.
+ *
+ * @module
+ */
+import { type ReactNode } from "react";
+/**
+ * The info button.
+ *
+ * @param props - the note, and the name of what it is about.
+ */
+export declare const InfoTip: ({ note, about }: {
+    /** The note. */
+    readonly note: string;
+    /** What it is about, for the button's name (`Touch`). */
+    readonly about: string;
+}) => ReactNode;
+//# sourceMappingURL=InfoTip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InfoTip.d.ts","sourceRoot":"","sources":["../../../src/shell/InfoTip.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,EAAsB,KAAK,SAAS,EAAiB,MAAM,OAAO,CAAC;AAQ1E;;;;GAIG;AACH,eAAO,MAAM,OAAO,GAAI,iBAGrB;IACD,gBAAgB;IAChB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,yDAAyD;IACzD,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB,KAAG,SA6CH,CAAC"}

package/dist/src/shell/InfoTip.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A small info button whose note shows while the pointer is over it or it has the focus: for a control that needs a
+ * word of warning (the touch simulation's limits) without a paragraph under it.
+ *
+ * @remarks
+ * The note is a manual popover in the top layer, placed under the button (above it near the window's foot), so no
+ * scrolling menu or toolbar clips it; it is the button's description for screen readers as well, and Escape hides it.
+ *
+ * @module
+ */
+import { useId, useRef } from "react";
+import { Icon } from "./icons.js";
+import { STRINGS } from "./strings.js";
+/** The room kept between the note, its button and the window's edges, in CSS px. */
+const GAP_PX = 6;
+/**
+ * The info button.
+ *
+ * @param props - the note, and the name of what it is about.
+ */
+export const InfoTip = ({ note, about }) => {
+    const noteId = useId();
+    const buttonRef = useRef(null);
+    const noteRef = useRef(null);
+    const show = () => {
+        const button = buttonRef.current;
+        const tip = noteRef.current;
+        if (button === null || tip === null || tip.matches(":popover-open"))
+            return;
+        tip.showPopover();
+        const box = button.getBoundingClientRect();
+        const height = tip.offsetHeight;
+        const isAbove = box.bottom + GAP_PX + height > window.innerHeight;
+        const left = Math.min(Math.max(GAP_PX, box.left), window.innerWidth - tip.offsetWidth - GAP_PX);
+        tip.style.left = `${left}px`;
+        tip.style.top = `${isAbove ? box.top - GAP_PX - height : box.bottom + GAP_PX}px`;
+    };
+    const hide = () => {
+        if (noteRef.current?.matches(":popover-open") === true)
+            noteRef.current.hidePopover();
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("button", { ref: buttonRef, type: "button", className: "forgebook-info-tip", "aria-label": STRINGS.aboutControl(about), "aria-describedby": noteId, onPointerEnter: show, onPointerLeave: hide, onFocus: show, onBlur: hide, onKeyDown: (event) => {
+                    // an open note takes the first Escape; the menu around it, the next
+                    if (event.key !== "Escape" || noteRef.current?.matches(":popover-open") !== true)
+                        return;
+                    event.stopPropagation();
+                    hide();
+                }, children: _jsx(Icon, { name: "info", size: 14 }) }), _jsx("span", { ref: noteRef, id: noteId, className: "forgebook-info-tip__note", popover: "manual", role: "tooltip", children: note })] }));
+};
+//# sourceMappingURL=InfoTip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InfoTip.js","sourceRoot":"","sources":["../../../src/shell/InfoTip.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;GASG;AACH,OAAO,EAAsC,KAAK,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1E,OAAO,EAAE,IAAI,EAAE,MAAM,YAAa,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,oFAAoF;AACpF,MAAM,MAAM,GAAG,CAAC,CAAC;AAEjB;;;;GAIG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EACtB,IAAI,EACJ,KAAK,EAMN,EAAa,EAAE;IACd,MAAM,MAAM,GAAG,KAAK,EAAE,CAAC;IACvB,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAClD,MAAM,OAAO,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAC9C,MAAM,IAAI,GAAG,GAAS,EAAE;QACtB,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAC;QACjC,MAAM,GAAG,GAAG,OAAO,CAAC,OAAO,CAAC;QAC5B,IAAI,MAAM,KAAK,IAAI,IAAI,GAAG,KAAK,IAAI,IAAI,GAAG,CAAC,OAAO,CAAC,eAAe,CAAC;YAAE,OAAO;QAC5E,GAAG,CAAC,WAAW,EAAE,CAAC;QAClB,MAAM,GAAG,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC;QAC3C,MAAM,MAAM,GAAG,GAAG,CAAC,YAAY,CAAC;QAChC,MAAM,OAAO,GAAG,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC,WAAW,CAAC;QAClE,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,UAAU,GAAG,GAAG,CAAC,WAAW,GAAG,MAAM,CAAC,CAAC;QAChG,GAAG,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,IAAI,IAAI,CAAC;QAC7B,GAAG,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,GAAG,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,GAAG,MAAM,IAAI,CAAC;IACnF,CAAC,CAAC;IACF,MAAM,IAAI,GAAG,GAAS,EAAE;QACtB,IAAI,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,eAAe,CAAC,KAAK,IAAI;YAAE,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;IACxF,CAAC,CAAC;IACF,OAAO,CACL,8BACE,iBACE,GAAG,EAAE,SAAS,EACd,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,oBAAoB,gBAClB,OAAO,CAAC,YAAY,CAAC,KAAK,CAAC,sBACrB,MAAM,EACxB,cAAc,EAAE,IAAI,EACpB,cAAc,EAAE,IAAI,EACpB,OAAO,EAAE,IAAI,EACb,MAAM,EAAE,IAAI,EACZ,SAAS,EAAE,CAAC,KAAuC,EAAQ,EAAE;oBAC3D,oEAAoE;oBACpE,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,eAAe,CAAC,KAAK,IAAI;wBAAE,OAAO;oBACzF,KAAK,CAAC,eAAe,EAAE,CAAC;oBACxB,IAAI,EAAE,CAAC;gBACT,CAAC,YAED,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,EAAE,GAAI,GACvB,EACT,eAAM,GAAG,EAAE,OAAO,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAC,0BAA0B,EAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,SAAS,YACjG,IAAI,GACA,IACN,CACJ,CAAC;AACJ,CAAC,CAAC"}