forgebook 0.0.0-stage → 0.1.0

package/dist/src/namedValues.js

@@ -0,0 +1,48 @@
+import { isChoiceList, isNamedArg } from "./messages.js";
+/**
+ * The name of a value among the named ones, when it is one of them.
+ *
+ * @param value - a story's own arg.
+ * @param namedValues - the source's named values.
+ */
+export const nameOf = (value, namedValues) => {
+    for (const [of, values] of Object.entries(namedValues)) {
+        for (const [named, known] of Object.entries(values)) {
+            if (known === value)
+                return { of, named };
+        }
+    }
+    return undefined;
+};
+/**
+ * A story's own args as the panel can show them: texts, numbers, booleans, `null` and lists of texts and numbers (a
+ * multiple choice's) as they are, a named value by its name; anything else is left out.
+ *
+ * @param args - the story's args.
+ * @param namedValues - the source's named values; none by default.
+ */
+export const panelArgsOf = (args, namedValues = {}) => Object.fromEntries(Object.entries(args).flatMap(([name, value]) => {
+    if (value === null ||
+        typeof value === "string" ||
+        typeof value === "number" ||
+        typeof value === "boolean" ||
+        isChoiceList(value)) {
+        return [[name, value]];
+    }
+    const named = nameOf(value, namedValues);
+    return named === undefined ? [] : [[name, named]];
+}));
+/**
+ * The panel's values as the story takes them: a name turned back into its value; a name the source no longer offers
+ * is left out, so the story keeps its own.
+ *
+ * @param args - the panel's values.
+ * @param namedValues - the source's named values; none by default.
+ */
+export const storyArgsOf = (args, namedValues = {}) => Object.fromEntries(Object.entries(args).flatMap(([name, value]) => {
+    if (!isNamedArg(value))
+        return [[name, value]];
+    const known = namedValues[value.of]?.[value.named];
+    return known === undefined ? [] : [[name, known]];
+}));
+//# sourceMappingURL=namedValues.js.map

package/dist/src/namedValues.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"namedValues.js","sourceRoot":"","sources":["../../src/namedValues.ts"],"names":[],"mappings":"AAYA,OAAO,EAAiB,YAAY,EAAE,UAAU,EAAiC,MAAM,eAAe,CAAC;AAKvG;;;;;GAKG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAc,EAAE,WAAwB,EAAwB,EAAE;IACvF,KAAK,MAAM,CAAC,EAAE,EAAE,MAAM,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE,CAAC;QACvD,KAAK,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;YACpD,IAAI,KAAK,KAAK,KAAK;gBAAE,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC;QAC5C,CAAC;IACH,CAAC;IACD,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,IAAuC,EACvC,cAA2B,EAAE,EAClB,EAAE,CACb,MAAM,CAAC,WAAW,CAChB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAwB,EAAE;IACnE,IACE,KAAK,KAAK,IAAI;QACd,OAAO,KAAK,KAAK,QAAQ;QACzB,OAAO,KAAK,KAAK,QAAQ;QACzB,OAAO,KAAK,KAAK,SAAS;QAC1B,YAAY,CAAC,KAAK,CAAC,EACnB,CAAC;QACD,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;IACzB,CAAC;IACD,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;IACzC,OAAO,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;AACpD,CAAC,CAAC,CACH,CAAC;AAEJ;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,IAAe,EACf,cAA2B,EAAE,EACM,EAAE,CACrC,MAAM,CAAC,WAAW,CAChB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAuB,EAAE;IAClE,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;QAAE,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;IAC/C,MAAM,KAAK,GAAG,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACnD,OAAO,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;AACpD,CAAC,CAAC,CACH,CAAC"}

package/dist/src/pageConfig.d.ts

@@ -0,0 +1,23 @@
+/**
+ * What the shell and the frame pages read of a catalogue's configuration (`vite/config.ts`): data, as the plugin hands
+ * it to the generated pages through `virtual:forgebook/config`.
+ *
+ * @module
+ */
+import type { StoryLanguage } from "@forgebook/story-format/source";
+import type { CatalogueLists } from "./catalogue.ts";
+import type { ViewSwitch } from "./switches.ts";
+/** What the shell and the frame pages read of a configuration: data, as the plugin hands it to them. */
+export type PageConfig = {
+    /** The catalogue's name. */
+    readonly title: string;
+    /** The heights file's address, relative to the pages; none without one. */
+    readonly heights: string | undefined;
+    /** The switches, the presets' and the catalogue's merged. */
+    readonly switches: readonly ViewSwitch[] | undefined;
+    /** The languages, the presets' and the catalogue's merged. */
+    readonly languages: readonly StoryLanguage[];
+    /** The lists (widths, backgrounds, story groups, texts…), the presets' and the catalogue's merged. */
+    readonly lists: CatalogueLists;
+};
+//# sourceMappingURL=pageConfig.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pageConfig.d.ts","sourceRoot":"","sources":["../../src/pageConfig.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAEpE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,wGAAwG;AACxG,MAAM,MAAM,UAAU,GAAG;IACvB,4BAA4B;IAC5B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,2EAA2E;IAC3E,QAAQ,CAAC,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,6DAA6D;IAC7D,QAAQ,CAAC,QAAQ,EAAE,SAAS,UAAU,EAAE,GAAG,SAAS,CAAC;IACrD,8DAA8D;IAC9D,QAAQ,CAAC,SAAS,EAAE,SAAS,aAAa,EAAE,CAAC;IAC7C,sGAAsG;IACtG,QAAQ,CAAC,KAAK,EAAE,cAAc,CAAC;CAChC,CAAC"}

package/dist/src/pageConfig.js

@@ -0,0 +1 @@
+//# sourceMappingURL=pageConfig.js.map

package/dist/src/pageConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pageConfig.js","sourceRoot":"","sources":["../../src/pageConfig.ts"],"names":[],"mappings":""}

package/dist/src/playTrace.d.ts

@@ -0,0 +1,41 @@
+/**
+ * The trace of a story's play function: whether it is running, passed or failed, how long it took, and each step the
+ * play named with `step(label, run)`, so the panel's Interactions tab shows where a play stopped.
+ *
+ * @remarks
+ * A play is a test: it throws when the story does not behave. The trace records the throw's message; the frame still
+ * lets it reach the page, where the generated tests record it as an error.
+ *
+ * @module
+ */
+/** Where a play or one of its steps is. */
+export type PlayStatus = "running" | "passed" | "failed";
+/** One step a play named. */
+export type PlayStep = {
+    /** What the step does, as the play named it. */
+    readonly label: string;
+    /** Where it is. */
+    readonly status: PlayStatus;
+    /** How long it took, in ms, once over. */
+    readonly ms?: number;
+    /** Why it failed. */
+    readonly error?: string;
+};
+/** A play's trace. */
+export type PlayTrace = {
+    /** Where the play is. */
+    readonly status: PlayStatus;
+    /** Its named steps, in order. */
+    readonly steps: readonly PlayStep[];
+    /** How long it took, in ms, once over. */
+    readonly ms?: number;
+    /** Why it failed. */
+    readonly error?: string;
+};
+/**
+ * Whether a value is a play's trace, as it arrives in a message.
+ *
+ * @param value - the message's trace.
+ */
+export declare const isPlayTrace: (value: unknown) => value is PlayTrace;
+//# sourceMappingURL=playTrace.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"playTrace.d.ts","sourceRoot":"","sources":["../../src/playTrace.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,2CAA2C;AAC3C,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEzD,6BAA6B;AAC7B,MAAM,MAAM,QAAQ,GAAG;IACrB,gDAAgD;IAChD,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,mBAAmB;IACnB,QAAQ,CAAC,MAAM,EAAE,UAAU,CAAC;IAC5B,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB;IACrB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,sBAAsB;AACtB,MAAM,MAAM,SAAS,GAAG;IACtB,yBAAyB;IACzB,QAAQ,CAAC,MAAM,EAAE,UAAU,CAAC;IAC5B,iCAAiC;IACjC,QAAQ,CAAC,KAAK,EAAE,SAAS,QAAQ,EAAE,CAAC;IACpC,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB;IACrB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAkBF;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,OAAO,OAAO,KAAG,KAAK,IAAI,SAKrD,CAAC"}

package/dist/src/playTrace.js

@@ -0,0 +1,35 @@
+/**
+ * The trace of a story's play function: whether it is running, passed or failed, how long it took, and each step the
+ * play named with `step(label, run)`, so the panel's Interactions tab shows where a play stopped.
+ *
+ * @remarks
+ * A play is a test: it throws when the story does not behave. The trace records the throw's message; the frame still
+ * lets it reach the page, where the generated tests record it as an error.
+ *
+ * @module
+ */
+/** Whether a value is a status. */
+const isStatus = (value) => value === "running" || value === "passed" || value === "failed";
+/** Whether a record's optional `ms` and `error` have their types. */
+const hasOptionalEnd = (record) => (record["ms"] === undefined || typeof record["ms"] === "number") &&
+    (record["error"] === undefined || typeof record["error"] === "string");
+/** Whether a value is a step, as it arrives in a message. */
+const isStep = (value) => {
+    if (typeof value !== "object" || value === null)
+        return false;
+    const record = { ...value };
+    return typeof record["label"] === "string" && isStatus(record["status"]) && hasOptionalEnd(record);
+};
+/**
+ * Whether a value is a play's trace, as it arrives in a message.
+ *
+ * @param value - the message's trace.
+ */
+export const isPlayTrace = (value) => {
+    if (typeof value !== "object" || value === null)
+        return false;
+    const record = { ...value };
+    const steps = record["steps"];
+    return isStatus(record["status"]) && Array.isArray(steps) && steps.every(isStep) && hasOptionalEnd(record);
+};
+//# sourceMappingURL=playTrace.js.map

package/dist/src/playTrace.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"playTrace.js","sourceRoot":"","sources":["../../src/playTrace.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AA6BH,mCAAmC;AACnC,MAAM,QAAQ,GAAG,CAAC,KAAc,EAAuB,EAAE,CACvD,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,QAAQ,CAAC;AAElE,qEAAqE;AACrE,MAAM,cAAc,GAAG,CAAC,MAAyC,EAAW,EAAE,CAC5E,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,SAAS,IAAI,OAAO,MAAM,CAAC,IAAI,CAAC,KAAK,QAAQ,CAAC;IAChE,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,SAAS,IAAI,OAAO,MAAM,CAAC,OAAO,CAAC,KAAK,QAAQ,CAAC,CAAC;AAEzE,6DAA6D;AAC7D,MAAM,MAAM,GAAG,CAAC,KAAc,EAAqB,EAAE;IACnD,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI;QAAE,OAAO,KAAK,CAAC;IAC9D,MAAM,MAAM,GAAsC,EAAE,GAAG,KAAK,EAAE,CAAC;IAC/D,OAAO,OAAO,MAAM,CAAC,OAAO,CAAC,KAAK,QAAQ,IAAI,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,IAAI,cAAc,CAAC,MAAM,CAAC,CAAC;AACrG,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAc,EAAsB,EAAE;IAChE,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI;QAAE,OAAO,KAAK,CAAC;IAC9D,MAAM,MAAM,GAAsC,EAAE,GAAG,KAAK,EAAE,CAAC;IAC/D,MAAM,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAC9B,OAAO,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,cAAc,CAAC,MAAM,CAAC,CAAC;AAC7G,CAAC,CAAC"}

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

@@ -0,0 +1,44 @@
+/**
+ * The panel's Accessibility tab: checks the story as it is now (after a click, in the dark theme) with the rules of
+ * the generated tests, and lists each rule it breaks with the elements that break it.
+ *
+ * @remarks
+ * A result belongs to the story and the view it was taken in: the stage clears it when either changes, so an old
+ * result never shows over a new story.
+ *
+ * @module
+ */
+import type { ReactNode } from "react";
+import type { Violation } from "../a11y.ts";
+/** The check's state: not run, running, its violations, or why it could not run. */
+export type CheckState = {
+    readonly status: "idle";
+} | {
+    readonly status: "running";
+} | {
+    readonly status: "done";
+    readonly violations: readonly Violation[];
+} | {
+    readonly status: "error";
+    readonly message: string;
+};
+/** The tab's props. */
+export type A11yTabProps = {
+    /** The check's state. */
+    readonly check: CheckState;
+    /** Runs the check; none when it cannot run (the compare view). */
+    readonly onCheck: (() => void) | undefined;
+};
+/**
+ * The tab's hint: how many rules are broken once checked.
+ *
+ * @param check - the check's state.
+ */
+export declare const a11yHint: (check: CheckState) => string | undefined;
+/**
+ * The Accessibility tab.
+ *
+ * @param props - the check's state and how to run it.
+ */
+export declare const A11yTab: ({ check, onCheck }: A11yTabProps) => ReactNode;
+//# sourceMappingURL=A11yTab.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"A11yTab.d.ts","sourceRoot":"","sources":["../../../src/shell/A11yTab.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAG5C,oFAAoF;AACpF,MAAM,MAAM,UAAU,GAClB;IAAE,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAC3B;IAAE,QAAQ,CAAC,MAAM,EAAE,SAAS,CAAA;CAAE,GAC9B;IAAE,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,UAAU,EAAE,SAAS,SAAS,EAAE,CAAA;CAAE,GACtE;IAAE,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC;AAE3D,uBAAuB;AACvB,MAAM,MAAM,YAAY,GAAG;IACzB,yBAAyB;IACzB,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;IAC3B,kEAAkE;IAClE,QAAQ,CAAC,OAAO,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;CAC5C,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,QAAQ,GAAI,OAAO,UAAU,KAAG,MAAM,GAAG,SAGrD,CAAC;AAuCF;;;;GAIG;AACH,eAAO,MAAM,OAAO,GAAI,oBAAoB,YAAY,KAAG,SAmB1D,CAAC"}

package/dist/src/shell/A11yTab.js

@@ -0,0 +1,30 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { STRINGS } from "./strings.js";
+/**
+ * The tab's hint: how many rules are broken once checked.
+ *
+ * @param check - the check's state.
+ */
+export const a11yHint = (check) => {
+    if (check.status !== "done")
+        return undefined;
+    return check.violations.length === 0 ? STRINGS.a11yPasses : STRINGS.a11yCount(check.violations.length);
+};
+/** What the check found. */
+const CheckResult = ({ check }) => {
+    if (check.status === "error") {
+        return (_jsxs("p", { className: "forgebook-problems", role: "alert", children: [STRINGS.a11yError, ": ", check.message] }));
+    }
+    if (check.status !== "done")
+        return null;
+    if (check.violations.length === 0)
+        return _jsx("p", { className: "forgebook-prop__description", children: STRINGS.a11yNone });
+    return (_jsx("ul", { className: "forgebook-violations", children: check.violations.map((violation) => (_jsxs("li", { className: "forgebook-violation", "data-impact": violation.impact, children: [_jsxs("div", { className: "forgebook-violation__head", children: [_jsx("a", { className: "forgebook-violation__rule", href: violation.helpUrl, target: "_blank", rel: "noopener", children: violation.id }), violation.impact === undefined ? null : (_jsx("span", { className: "forgebook-violation__impact", children: violation.impact }))] }), _jsx("p", { className: "forgebook-prop__description", children: violation.help }), _jsx("ul", { className: "forgebook-violation__targets", children: violation.targets.map((target) => (_jsx("li", { children: _jsx("code", { children: target }) }, target))) })] }, violation.id))) }));
+};
+/**
+ * The Accessibility tab.
+ *
+ * @param props - the check's state and how to run it.
+ */
+export const A11yTab = ({ check, onCheck }) => (_jsxs("div", { className: "forgebook-prop-group", children: [_jsxs("div", { className: "forgebook-calls__head", children: [_jsx("button", { type: "button", className: "forgebook-button", disabled: onCheck === undefined || check.status === "running", onClick: onCheck, children: check.status === "running" ? STRINGS.a11yRunning : STRINGS.a11yCheck }), onCheck === undefined ? (_jsx("span", { className: "forgebook-popover__note", children: STRINGS.a11yNotInCompare })) : null] }), _jsx("div", { "aria-live": "polite", children: _jsx(CheckResult, { check: check }) })] }));
+//# sourceMappingURL=A11yTab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"A11yTab.js","sourceRoot":"","sources":["../../../src/shell/A11yTab.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAiBvC;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAiB,EAAsB,EAAE;IAChE,IAAI,KAAK,CAAC,MAAM,KAAK,MAAM;QAAE,OAAO,SAAS,CAAC;IAC9C,OAAO,KAAK,CAAC,UAAU,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;AACzG,CAAC,CAAC;AAEF,4BAA4B;AAC5B,MAAM,WAAW,GAAG,CAAC,EAAE,KAAK,EAAkC,EAAa,EAAE;IAC3E,IAAI,KAAK,CAAC,MAAM,KAAK,OAAO,EAAE,CAAC;QAC7B,OAAO,CACL,aAAG,SAAS,EAAC,oBAAoB,EAAC,IAAI,EAAC,OAAO,aAC3C,OAAO,CAAC,SAAS,QAAI,KAAK,CAAC,OAAO,IACjC,CACL,CAAC;IACJ,CAAC;IACD,IAAI,KAAK,CAAC,MAAM,KAAK,MAAM;QAAE,OAAO,IAAI,CAAC;IACzC,IAAI,KAAK,CAAC,UAAU,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,YAAG,SAAS,EAAC,6BAA6B,YAAE,OAAO,CAAC,QAAQ,GAAK,CAAC;IAC5G,OAAO,CACL,aAAI,SAAS,EAAC,sBAAsB,YACjC,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CACnC,cAAuB,SAAS,EAAC,qBAAqB,iBAAc,SAAS,CAAC,MAAM,aAClF,eAAK,SAAS,EAAC,2BAA2B,aACxC,YAAG,SAAS,EAAC,2BAA2B,EAAC,IAAI,EAAE,SAAS,CAAC,OAAO,EAAE,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,UAAU,YAC7F,SAAS,CAAC,EAAE,GACX,EACH,SAAS,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACvC,eAAM,SAAS,EAAC,6BAA6B,YAAE,SAAS,CAAC,MAAM,GAAQ,CACxE,IACG,EACN,YAAG,SAAS,EAAC,6BAA6B,YAAE,SAAS,CAAC,IAAI,GAAK,EAC/D,aAAI,SAAS,EAAC,8BAA8B,YACzC,SAAS,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACjC,uBACE,yBAAO,MAAM,GAAQ,IADd,MAAM,CAEV,CACN,CAAC,GACC,KAhBE,SAAS,CAAC,EAAE,CAiBhB,CACN,CAAC,GACC,CACN,CAAC;AACJ,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAgB,EAAa,EAAE,CAAC,CACtE,eAAK,SAAS,EAAC,sBAAsB,aACnC,eAAK,SAAS,EAAC,uBAAuB,aACpC,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,kBAAkB,EAC5B,QAAQ,EAAE,OAAO,KAAK,SAAS,IAAI,KAAK,CAAC,MAAM,KAAK,SAAS,EAC7D,OAAO,EAAE,OAAO,YAEf,KAAK,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,GAC9D,EACR,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,CACvB,eAAM,SAAS,EAAC,yBAAyB,YAAE,OAAO,CAAC,gBAAgB,GAAQ,CAC5E,CAAC,CAAC,CAAC,IAAI,IACJ,EACN,2BAAe,QAAQ,YACrB,KAAC,WAAW,IAAC,KAAK,EAAE,KAAK,GAAI,GACzB,IACF,CACP,CAAC"}

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

@@ -0,0 +1,18 @@
+/**
+ * The API reference on a component's page: its props and its events, drawn from its types and TSDoc, as a table
+ * (prop, type, default, what it does), never written by hand, then the same for each part the meta names in
+ * `subcomponents`. The table scrolls sideways on its own when the page is narrower than it.
+ *
+ * @module
+ */
+import type { ReactNode } from "react";
+import type { ComponentDocs } from "../componentDocs.ts";
+/**
+ * The API reference.
+ *
+ * @param props - the component's docs.
+ */
+export declare const ApiReference: ({ docs }: {
+    readonly docs: ComponentDocs;
+}) => ReactNode;
+//# sourceMappingURL=ApiReference.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ApiReference.d.ts","sourceRoot":"","sources":["../../../src/shell/ApiReference.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,aAAa,EAA8B,MAAM,qBAAqB,CAAC;AAqHrF;;;;GAIG;AACH,eAAO,MAAM,YAAY,GAAI,UAAU;IAAE,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAA;CAAE,KAAG,SAQzE,CAAC"}

package/dist/src/shell/ApiReference.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Code } from "./Code.js";
+import { CodeText } from "./CodeText.js";
+import { STRINGS } from "./strings.js";
+/** A prop's or an event's type as one line of TypeScript: an event's signature as an arrow. */
+const typeText = (prop) => prop.signature === undefined
+    ? prop.type
+    : `(${prop.signature.parameters.map((parameter) => `${parameter.name}: ${parameter.type}`).join(", ")}) => ${prop.signature.returns}`;
+/**
+ * A table of props or events: the Default column only when one of them has a default.
+ *
+ * @param props - the props or the events, and which of the two they are.
+ */
+const PropTable = ({ props, isEvents }) => {
+    const hasDefaults = !isEvents && props.some((prop) => prop.defaultValue !== undefined);
+    return (_jsx("div", { className: "forgebook-api", children: _jsxs("table", { className: "forgebook-api__table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: isEvents ? STRINGS.apiEvent : STRINGS.apiProp }), _jsx("th", { scope: "col", children: isEvents ? STRINGS.apiSignature : STRINGS.apiType }), hasDefaults ? _jsx("th", { scope: "col", children: STRINGS.apiDefault }) : null, _jsx("th", { scope: "col", children: STRINGS.apiWhat })] }) }), _jsx("tbody", { children: props.map((prop) => (_jsxs("tr", { children: [_jsxs("th", { scope: "row", children: [_jsx("code", { className: "forgebook-api__name", children: prop.name }), prop.isRequired ? (_jsx("span", { className: "forgebook-prop__required", title: STRINGS.required, children: "*" })) : null] }), _jsx("td", { className: "forgebook-api__type", children: _jsx(Code, { text: typeText(prop), names: prop.signature?.parameters.map((parameter) => parameter.name) ?? [] }) }), hasDefaults ? (_jsx("td", { children: prop.defaultValue === undefined ? null : (_jsx("code", { className: "forgebook-inline-code", children: prop.defaultValue })) })) : null, _jsx("td", { children: _jsx(CodeText, { text: prop.description }) })] }, prop.name))) })] }) }));
+};
+/**
+ * A component's or a part's props, then its events under their own heading.
+ *
+ * @param props - the props, and the level of the events' heading: under the section's, or under a part's.
+ */
+const PropsAndEvents = ({ props, eventsLevel }) => {
+    const EventsHeading = eventsLevel === 3 ? "h3" : "h4";
+    const values = props.filter((prop) => prop.kind !== "event");
+    const events = props.filter((prop) => prop.kind === "event");
+    return (_jsxs(_Fragment, { children: [values.length === 0 ? null : _jsx(PropTable, { props: values, isEvents: false }), events.length === 0 ? null : (_jsxs(_Fragment, { children: [_jsx(EventsHeading, { children: STRINGS.events }), _jsx(PropTable, { props: events, isEvents: true })] }))] }));
+};
+/**
+ * A part's reference: its name, its summary, its props and events.
+ *
+ * @param props - the part's docs.
+ */
+const SubcomponentReference = ({ docs }) => (_jsxs("section", { className: "forgebook-api__subcomponent", "aria-label": docs.name, children: [_jsx("h3", { children: _jsx("code", { className: "forgebook-inline-code", children: docs.name }) }), docs.description === "" ? null : (_jsx("p", { children: _jsx(CodeText, { text: docs.description }) })), _jsx(PropsAndEvents, { props: docs.props, eventsLevel: 4 })] }));
+/**
+ * The API reference.
+ *
+ * @param props - the component's docs.
+ */
+export const ApiReference = ({ docs }) => (_jsxs("section", { className: "forgebook-doc__section", "aria-labelledby": "forgebook-api", children: [_jsx("h2", { id: "forgebook-api", children: STRINGS.apiReference }), _jsx(PropsAndEvents, { props: docs.props, eventsLevel: 3 }), docs.subcomponents.map((subcomponent) => (_jsx(SubcomponentReference, { docs: subcomponent }, subcomponent.name)))] }));
+//# sourceMappingURL=ApiReference.js.map

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

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

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

@@ -0,0 +1,43 @@
+/**
+ * The story clock's controls on the stage, for a Live story: pause and resume, restart, and the speed (D-504).
+ *
+ * @remarks
+ * The state lives in the shell, per shown story: a new story starts running at real time, and a frame that loads
+ * again (an edit, another language) receives the state it had. The frame runs the clock (`frame/frameClock.ts`);
+ * these controls only send it what to do, so the shell never reads the story's time.
+ *
+ * @module
+ */
+import { type ReactNode, type RefObject } from "react";
+import { type ClockState } from "../storyClock.ts";
+/** The clock's state for the shown story, and how to change it in its frame. */
+export type StoryClockControls = {
+    /** Whether the clock runs, and how fast. */
+    readonly state: ClockState;
+    /** Changes part of the state, over the latest one (two presses before a render both count), in the shell and in the frame. */
+    readonly change: (patch: Partial<ClockState>) => void;
+    /** Brings the clock back to its start, the story mounted again. */
+    readonly restart: () => void;
+    /** Sends the state to a frame that just loaded. */
+    readonly sendTo: (frame: Window) => void;
+};
+/**
+ * The clock controls' state for the shown story, started over for each story.
+ *
+ * @param frameRef - the story's frame.
+ * @param storyId - the shown story.
+ * @returns the state and what changes it.
+ */
+export declare const useStoryClockControls: (frameRef: RefObject<HTMLIFrameElement | null>, storyId: string) => StoryClockControls;
+/** The controls' props. */
+export type ClockControlsProps = {
+    /** The clock's state and what changes it. */
+    readonly controls: StoryClockControls;
+};
+/**
+ * The clock's controls: a pause or resume button, Restart, and the speed.
+ *
+ * @param props - the clock's state and what changes it.
+ */
+export declare const ClockControls: ({ controls }: ClockControlsProps) => ReactNode;
+//# sourceMappingURL=ClockControls.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ClockControls.d.ts","sourceRoot":"","sources":["../../../src/shell/ClockControls.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAG5E,OAAO,EAA+B,KAAK,UAAU,EAAuB,MAAM,kBAAkB,CAAC;AAKrG,gFAAgF;AAChF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,4CAA4C;IAC5C,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;IAC3B,8HAA8H;IAC9H,QAAQ,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;IACtD,mEAAmE;IACnE,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAC7B,mDAAmD;IACnD,QAAQ,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,GAChC,UAAU,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,EAC7C,SAAS,MAAM,KACd,kBAwBF,CAAC;AAEF,2BAA2B;AAC3B,MAAM,MAAM,kBAAkB,GAAG;IAC/B,6CAA6C;IAC7C,QAAQ,CAAC,QAAQ,EAAE,kBAAkB,CAAC;CACvC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,cAAc,kBAAkB,KAAG,SA2BhE,CAAC"}

package/dist/src/shell/ClockControls.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The story clock's controls on the stage, for a Live story: pause and resume, restart, and the speed (D-504).
+ *
+ * @remarks
+ * The state lives in the shell, per shown story: a new story starts running at real time, and a frame that loads
+ * again (an edit, another language) receives the state it had. The frame runs the clock (`frame/frameClock.ts`);
+ * these controls only send it what to do, so the shell never reads the story's time.
+ *
+ * @module
+ */
+import { useEffect, useState } from "react";
+import { CLOCK_RATES, DEFAULT_CLOCK_STATE } from "../storyClock.js";
+import { Icon } from "./icons.js";
+import { Segmented } from "./Segmented.js";
+import { STRINGS } from "./strings.js";
+/**
+ * The clock controls' state for the shown story, started over for each story.
+ *
+ * @param frameRef - the story's frame.
+ * @param storyId - the shown story.
+ * @returns the state and what changes it.
+ */
+export const useStoryClockControls = (frameRef, storyId) => {
+    const [state, setLocalState] = useState(DEFAULT_CLOCK_STATE);
+    const [shownId, setShownId] = useState(storyId);
+    if (shownId !== storyId) {
+        setShownId(storyId);
+        setLocalState(DEFAULT_CLOCK_STATE);
+    }
+    const send = (message) => frameRef.current?.contentWindow?.postMessage(message, window.location.origin);
+    // the frame hears every state once it is drawn, so a change builds on the latest state, never on a render's copy
+    useEffect(() => {
+        frameRef.current?.contentWindow?.postMessage({ type: "forgebook:clock", state }, window.location.origin);
+    }, [frameRef, state]);
+    return {
+        state,
+        change: (patch) => setLocalState((current) => ({ ...current, ...patch })),
+        restart: () => send({ type: "forgebook:clock-restart" }),
+        sendTo: (frame) => frame.postMessage({ type: "forgebook:clock", state }, window.location.origin)
+    };
+};
+/**
+ * The clock's controls: a pause or resume button, Restart, and the speed.
+ *
+ * @param props - the clock's state and what changes it.
+ */
+export const ClockControls = ({ controls }) => {
+    const { state, change, restart } = controls;
+    const toggleLabel = state.isRunning ? STRINGS.clockPause : STRINGS.clockResume;
+    return (_jsxs("fieldset", { className: "forgebook-clock", children: [_jsx("legend", { className: "forgebook-visually-hidden", children: STRINGS.clockLabel }), _jsx("button", { type: "button", className: "forgebook-button forgebook-button--icon", title: toggleLabel, "aria-label": toggleLabel, onClick: () => change({ isRunning: !state.isRunning }), children: _jsx(Icon, { name: state.isRunning ? "pause" : "play", size: 14 }) }), _jsxs("button", { type: "button", className: "forgebook-button", onClick: restart, children: [_jsx(Icon, { name: "restart", size: 14 }), STRINGS.clockRestart] }), _jsx(Segmented, { label: STRINGS.clockSpeed, options: CLOCK_RATES.map((rate) => ({ value: rate, label: STRINGS.clockRate(rate) })), value: state.rate, onValueChange: (rate) => change({ rate }) })] }));
+};
+//# sourceMappingURL=ClockControls.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ClockControls.js","sourceRoot":"","sources":["../../../src/shell/ClockControls.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;GASG;AACH,OAAO,EAAkC,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EAAE,WAAW,EAAmC,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACrG,OAAO,EAAE,IAAI,EAAE,MAAM,YAAa,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAiB,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAcvC;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CACnC,QAA6C,EAC7C,OAAe,EACK,EAAE;IACtB,MAAM,CAAC,KAAK,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAa,mBAAmB,CAAC,CAAC;IACzE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;IAChD,IAAI,OAAO,KAAK,OAAO,EAAE,CAAC;QACxB,UAAU,CAAC,OAAO,CAAC,CAAC;QACpB,aAAa,CAAC,mBAAmB,CAAC,CAAC;IACrC,CAAC;IACD,MAAM,IAAI,GAAG,CAAC,OAAqB,EAAQ,EAAE,CAC3C,QAAQ,CAAC,OAAO,EAAE,aAAa,EAAE,WAAW,CAAC,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;IAChF,iHAAiH;IACjH,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,OAAO,EAAE,aAAa,EAAE,WAAW,CAC1C,EAAE,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAyB,EACzD,MAAM,CAAC,QAAQ,CAAC,MAAM,CACvB,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC;IACtB,OAAO;QACL,KAAK;QACL,MAAM,EAAE,CAAC,KAA0B,EAAQ,EAAE,CAC3C,aAAa,CAAC,CAAC,OAAmB,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,OAAO,EAAE,GAAG,KAAK,EAAE,CAAC,CAAC;QACpE,OAAO,EAAE,GAAS,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,yBAAyB,EAAE,CAAC;QAC9D,MAAM,EAAE,CAAC,KAAa,EAAQ,EAAE,CAC9B,KAAK,CAAC,WAAW,CAAC,EAAE,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAyB,EAAE,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC;KACvG,CAAC;AACJ,CAAC,CAAC;AAQF;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAAsB,EAAa,EAAE;IAC3E,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,QAAQ,CAAC;IAC5C,MAAM,WAAW,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC;IAC/E,OAAO,CACL,oBAAU,SAAS,EAAC,iBAAiB,aACnC,iBAAQ,SAAS,EAAC,2BAA2B,YAAE,OAAO,CAAC,UAAU,GAAU,EAC3E,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,yCAAyC,EACnD,KAAK,EAAE,WAAW,gBACN,WAAW,EACvB,OAAO,EAAE,GAAS,EAAE,CAAC,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC,YAE5D,KAAC,IAAI,IAAC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE,IAAI,EAAE,EAAE,GAAI,GACrD,EACT,kBAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,kBAAkB,EAAC,OAAO,EAAE,OAAO,aACjE,KAAC,IAAI,IAAC,IAAI,EAAC,SAAS,EAAC,IAAI,EAAE,EAAE,GAAI,EAChC,OAAO,CAAC,YAAY,IACd,EACT,KAAC,SAAS,IACR,KAAK,EAAE,OAAO,CAAC,UAAU,EACzB,OAAO,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EACrF,KAAK,EAAE,KAAK,CAAC,IAAI,EACjB,aAAa,EAAE,CAAC,IAAe,EAAQ,EAAE,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,CAAC,GAC1D,IACO,CACZ,CAAC;AACJ,CAAC,CAAC"}

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

@@ -0,0 +1,16 @@
+/**
+ * Coloured code: an event's signature and calls in the props panel, a story's code in the Code card.
+ *
+ * @module
+ */
+import type { ReactNode } from "react";
+/**
+ * Coloured code.
+ *
+ * @param props - the text, and the names coloured as names (the event's parameters).
+ */
+export declare const Code: ({ text, names }: {
+    readonly text: string;
+    readonly names: readonly string[];
+}) => ReactNode;
+//# sourceMappingURL=Code.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Code.d.ts","sourceRoot":"","sources":["../../../src/shell/Code.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC;;;;GAIG;AACH,eAAO,MAAM,IAAI,GAAI,iBAGlB;IACD,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;CACnC,KAAG,SAUH,CAAC"}

package/dist/src/shell/Code.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { codeTokens } from "./codeTokens.js";
+/**
+ * Coloured code.
+ *
+ * @param props - the text, and the names coloured as names (the event's parameters).
+ */
+export const Code = ({ text, names }) => (_jsx("code", { className: "forgebook-code", children: codeTokens(text, new Set(names)).map((token, index) => (_jsx("span", { className: `forgebook-code__${token.kind}`, children: token.text }, index))) }));
+//# sourceMappingURL=Code.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Code.js","sourceRoot":"","sources":["../../../src/shell/Code.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C;;;;GAIG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EACnB,IAAI,EACJ,KAAK,EAIN,EAAa,EAAE,CAAC,CACf,eAAM,SAAS,EAAC,gBAAgB,YAC7B,UAAU,CAAC,IAAI,EAAE,IAAI,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAGtD,eAAkB,SAAS,EAAE,mBAAmB,KAAK,CAAC,IAAI,EAAE,YACzD,KAAK,CAAC,IAAI,IADF,KAAK,CAET,CACR,CAAC,GACG,CACR,CAAC"}

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

@@ -0,0 +1,17 @@
+/**
+ * The panel's Code tab: the story's `render` as written in its file, or, for a story drawn from its args, the
+ * component's JSX with the values of the moment (the story's and the Props tab's), with a button that copies it.
+ *
+ * @module
+ */
+import type { ReactNode } from "react";
+import { type StoryCodeSource } from "./StoryCodeBlock.tsx";
+/** The tab's props: the story whose code it shows. */
+export type CodeTabProps = StoryCodeSource;
+/**
+ * The Code tab.
+ *
+ * @param props - the file's code, the story, the component's name and the args.
+ */
+export declare const CodeTab: (props: CodeTabProps) => ReactNode;
+//# sourceMappingURL=CodeTab.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CodeTab.d.ts","sourceRoot":"","sources":["../../../src/shell/CodeTab.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAkB,KAAK,eAAe,EAAiB,MAAM,sBAAsB,CAAC;AAI3F,sDAAsD;AACtD,MAAM,MAAM,YAAY,GAAG,eAAe,CAAC;AAE3C;;;;GAIG;AACH,eAAO,MAAM,OAAO,GAAI,OAAO,YAAY,KAAG,SAsB7C,CAAC"}

package/dist/src/shell/CodeTab.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCodeWriter } from "./codeWriter.js";
+import { StoryCodeBlock, storyCodeText } from "./StoryCodeBlock.js";
+import { STRINGS } from "./strings.js";
+import { useCopy } from "./useCopy.js";
+/**
+ * The Code tab.
+ *
+ * @param props - the file's code, the story, the component's name and the args.
+ */
+export const CodeTab = (props) => {
+    const { isCopied, copy } = useCopy();
+    const write = useCodeWriter();
+    const hasRender = props.code[props.exportName] !== undefined;
+    return (_jsxs("div", { className: "forgebook-prop-group", children: [_jsxs("div", { className: "forgebook-calls__head", children: [_jsx("h3", { className: "forgebook-prop-group__title", children: hasRender ? STRINGS.codeRender : STRINGS.codeFromArgs }), _jsx("button", { type: "button", className: "forgebook-text-button", onClick: () => copy(storyCodeText(props, write)), "aria-live": "polite", children: isCopied ? STRINGS.copied : STRINGS.copy })] }), _jsx(StoryCodeBlock, { ...props })] }));
+};
+//# sourceMappingURL=CodeTab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CodeTab.js","sourceRoot":"","sources":["../../../src/shell/CodeTab.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAwB,aAAa,EAAE,MAAM,qBAAsB,CAAC;AAC3F,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAKvC;;;;GAIG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,KAAmB,EAAa,EAAE;IACxD,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,OAAO,EAAE,CAAC;IACrC,MAAM,KAAK,GAAG,aAAa,EAAE,CAAC;IAC9B,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK,SAAS,CAAC;IAC7D,OAAO,CACL,eAAK,SAAS,EAAC,sBAAsB,aACnC,eAAK,SAAS,EAAC,uBAAuB,aACpC,aAAI,SAAS,EAAC,6BAA6B,YACxC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,YAAY,GACnD,EACL,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,uBAAuB,EACjC,OAAO,EAAE,GAAS,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,eAC5C,QAAQ,YAEjB,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,GAClC,IACL,EACN,KAAC,cAAc,OAAK,KAAK,GAAI,IACzB,CACP,CAAC;AACJ,CAAC,CAAC"}

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

@@ -0,0 +1,16 @@
+/**
+ * A TSDoc or Markdown sentence with its code spans shown as code: what is between backticks (as `href` is written in
+ * a TSDoc) is set in the code face, the rest stays text.
+ *
+ * @module
+ */
+import type { ReactNode } from "react";
+/**
+ * A sentence, its backtick spans as code.
+ *
+ * @param props - the sentence.
+ */
+export declare const CodeText: ({ text }: {
+    readonly text: string;
+}) => ReactNode;
+//# sourceMappingURL=CodeText.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CodeText.d.ts","sourceRoot":"","sources":["../../../src/shell/CodeText.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;GAIG;AACH,eAAO,MAAM,QAAQ,GAAI,UAAU;IAAE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;CAAE,KAAG,SAY5D,CAAC"}

package/dist/src/shell/CodeText.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A sentence, its backtick spans as code.
+ *
+ * @param props - the sentence.
+ */
+export const CodeText = ({ text }) => 
+// a split on the backticks alternates text and code: the odd pieces were between backticks
+text.split("`").map((piece, index) => index % 2 === 1 ? (_jsx("code", { className: "forgebook-inline-code", children: piece }, index)) : (piece));
+//# sourceMappingURL=CodeText.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CodeText.js","sourceRoot":"","sources":["../../../src/shell/CodeText.tsx"],"names":[],"mappings":";AAQA;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAA6B,EAAa,EAAE;AACzE,2FAA2F;AAC3F,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CACnC,KAAK,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAGhB,eAAkB,SAAS,EAAC,uBAAuB,YAChD,KAAK,IADG,KAAK,CAET,CACR,CAAC,CAAC,CAAC,CACF,KAAK,CACN,CACF,CAAC"}

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

@@ -0,0 +1,38 @@
+import { type ReactNode } from "react";
+import { type TreeComponent, type TreeStory } from "../storyTree.ts";
+import { type ViewState } from "../viewState.ts";
+import { type PageScroll } from "./useScrollMemory.ts";
+/** The component page's props. */
+export type ComponentPageProps = {
+    /** 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;
+    /** Loads the component's docs, for its API reference; `undefined` when the source has none for the file. */
+    readonly loadDocs: (() => Promise<unknown>) | undefined;
+    /** Loads the story file's code, for the demo's code; `undefined` when the source has none. */
+    readonly loadCode: (() => Promise<unknown>) | undefined;
+    /** Loads the component's documentation file as HTML; `undefined` when the source has none. */
+    readonly loadPage: (() => Promise<unknown>) | undefined;
+    /** A story's measured height at about the width its example is drawn at, for its box while it loads. */
+    readonly heightOf: (storyId: string) => number | undefined;
+    /** The colour the stories' page has in the view (their source's), which each box waits on; none without one. */
+    readonly background: string | undefined;
+    /** What stays above the page while it scrolls: the component's header. */
+    readonly header: ReactNode;
+    /** Where its scrolling part starts: the shell's visit of the page and every page's last position. */
+    readonly scroll: PageScroll;
+};
+/**
+ * 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;
+//# sourceMappingURL=ComponentPage.d.ts.map

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

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