forgebook 0.1.8 → 0.3.0

package/dist/src/hotModules.js

@@ -0,0 +1,53 @@
+/**
+ * How an edited module reaches the open pages of a dev server without a reload: the module accepts its own edit and
+ * hands its successor to the page, which swaps what it drew from the one before.
+ *
+ * @remarks
+ * A story file accepts its edit and asks, with a cancelable event, whether a frame draws its stories; the frame that
+ * does draws them anew in place, and the reader keeps what they did in the story (a typed field, an open menu). A file
+ * no frame draws hands its edit on to the files that import it: a story file that re-exports its stories draws them.
+ * A story file's docs, code and page modules hand their successor to the shell, which shows the new value. The frame's
+ * entry takes the edits of its previews and of what they import (a library's whole index, often): the frame draws its
+ * story anew with the new previews instead of the page reloading. The code each module runs is written by the plugin
+ * (`vite/hotSnippets.ts`); the events are read here, by the frame and the shell.
+ *
+ * @module
+ */
+/** The event a story file sends when it was edited, cancelled by the frame that draws its stories. */
+export const STORY_FILE_EVENT = "forgebook:story-file";
+/** The event a story file's docs, code or page module sends when it was renewed. */
+export const RENEWED_MODULE_EVENT = "forgebook:module-renewed";
+/**
+ * The event the frame's entry sends when a preview, or a module one imports, was edited: the previews that changed,
+ * by their place in the list, in a `CustomEvent` whose detail is `PreviewsRenewal`.
+ */
+export const PREVIEWS_EVENT = "forgebook:previews";
+/**
+ * The previews an event carries, when it is the previews' event.
+ *
+ * @param event - the event.
+ */
+export const previewsRenewalOf = (event) => {
+    if (!(event instanceof CustomEvent))
+        return undefined;
+    const detail = event.detail;
+    if (typeof detail !== "object" || detail === null || !("next" in detail) || !Array.isArray(detail.next))
+        return undefined;
+    const next = detail.next;
+    return { next };
+};
+/**
+ * The module and its successor an event carries, when it is one of these events.
+ *
+ * @param event - the event.
+ */
+export const successionOf = (event) => {
+    if (!(event instanceof CustomEvent))
+        return undefined;
+    const detail = event.detail;
+    if (typeof detail !== "object" || detail === null)
+        return undefined;
+    if (!("previous" in detail) || !("next" in detail))
+        return undefined;
+    return { previous: detail.previous, next: detail.next };
+};

package/dist/src/jsxCode.d.ts

@@ -0,0 +1,22 @@
+/**
+ * The JSX of a story drawn from its args: the component with the values the story and the props panel set, as a
+ * developer would write it, for the Code card. The code writer of every framework written in JSX (React, Preact,
+ * Solid): each one's `./code` module hands it to the shell.
+ *
+ * @remarks
+ * A text is an attribute in quotes (in braces when it holds a quote), a number or `null` in braces, `true` the bare
+ * name, `false` in braces, a named value by its name (`icon={IconFolder}`), a list as an array literal
+ * (`options={["weekly", "monthly"]}`); `children` goes between the tags. Only the values that cross from the frame are
+ * known (texts, numbers, booleans, `null`, lists of texts and numbers, named values): a function or an element the
+ * story passes is left out. Pure.
+ *
+ * @module
+ */
+import type { StoryCodeWriter } from "./frame/renderer.ts";
+/**
+ * A component's JSX with these args.
+ *
+ * @param component - the component's name (`IconTile`).
+ * @param args - the values, in the order they are written.
+ */
+export declare const jsxCode: StoryCodeWriter;

package/dist/src/jsxCode.js

@@ -0,0 +1,36 @@
+import { isNamedArg } from "./messages.js";
+/** One attribute as JSX writes it. */
+const attribute = (name, value) => {
+    if (value === true)
+        return name;
+    if (typeof value === "string")
+        return value.includes('"') ? `${name}={${JSON.stringify(value)}}` : `${name}="${value}"`;
+    // a named value is written by its name, as the source's module exports it (`icon={IconFolder}`)
+    if (isNamedArg(value))
+        return `${name}={${value.named}}`;
+    // a multiple choice's values, as the source writes a list
+    if (Array.isArray(value))
+        return `${name}={[${value.map((item) => JSON.stringify(item)).join(", ")}]}`;
+    return `${name}={${String(value)}}`;
+};
+/** The longest line the attributes stay on one line for, in characters. */
+const ONE_LINE = 80;
+/**
+ * A component's JSX with these args.
+ *
+ * @param component - the component's name (`IconTile`).
+ * @param args - the values, in the order they are written.
+ */
+export const jsxCode = (component, args) => {
+    const { children, ...rest } = args;
+    const attributes = Object.entries(rest).map(([name, value]) => attribute(name, value));
+    const inner = children === undefined || children === null || children === false ? undefined : String(children);
+    const oneLine = [component, ...attributes].join(" ");
+    const isOneLine = oneLine.length + 2 <= ONE_LINE;
+    const opening = isOneLine
+        ? `<${oneLine}`
+        : `<${component}\n${attributes.map((text) => `  ${text}`).join("\n")}\n`;
+    if (inner === undefined)
+        return `${opening}${isOneLine ? " " : ""}/>`;
+    return `${opening}>${inner}</${component}>`;
+};

package/dist/src/languages.d.ts

@@ -12,4 +12,3 @@ import type { StoryLanguage } from "@forgebook/story-format/source";
  * @param id - the view's language id; empty for the stories' own text.
  */
 export declare const shownLanguage: (languages: readonly StoryLanguage[], id: string) => StoryLanguage | undefined;
-//# sourceMappingURL=languages.d.ts.map

package/dist/src/languages.js

@@ -5,4 +5,3 @@
  * @param id - the view's language id; empty for the stories' own text.
  */
 export const shownLanguage = (languages, id) => languages.find((language) => language.id === id);
-//# sourceMappingURL=languages.js.map

package/dist/src/liveErrors.d.ts

@@ -54,4 +54,3 @@ export declare const isLiveErrorReport: (value: unknown) => value is LiveErrorRe
  * @param limit - how many it keeps; a hundred by default.
  */
 export declare const createLiveErrors: (limit?: number) => LiveErrors;
-//# sourceMappingURL=liveErrors.d.ts.map

package/dist/src/liveErrors.js

@@ -49,4 +49,3 @@ export const createLiveErrors = (limit = 100) => {
         last: () => last
     };
 };
-//# sourceMappingURL=liveErrors.js.map

package/dist/src/matrix.d.ts

@@ -53,4 +53,3 @@ export declare const matrixOf: (props: readonly PropDocs[], names: readonly stri
  * @param value - the message's matrix.
  */
 export declare const isMatrix: (value: unknown) => value is Matrix;
-//# sourceMappingURL=matrix.d.ts.map

package/dist/src/matrix.js

@@ -58,4 +58,3 @@ export const isMatrix = (value) => {
     const record = { ...value };
     return isAxis(record["rows"]) && (record["columns"] === undefined || isAxis(record["columns"]));
 };
-//# sourceMappingURL=matrix.js.map

package/dist/src/messages.d.ts

@@ -3,7 +3,8 @@
  *
  * @remarks
  * The frame tells the shell what the loaded story can do (Replay, a story clock, its args), how tall it is (the shell sizes the frame
- * to it, so a story never scrolls inside a box), every call of an event, or why it failed. The shell asks the frame to
+ * to it, so a story never scrolls inside a box), every call of an event, the args the story changed itself, or why it
+ * failed. The shell asks the frame to
  * replay, sends the props panel's values, names the events to record, and runs, holds, speeds up or restarts the
  * story clock. Every message is checked on arrival
  * (`isFrameMessage`, `isShellMessage`): a page may receive messages from anything it embeds or is embedded in.
@@ -15,6 +16,7 @@ import { type Violation } from "./a11y.ts";
 import { type PanelArgTypes } from "./argTypes.ts";
 import { type Matrix } from "./matrix.ts";
 import { type PlayTrace } from "./playTrace.ts";
+import type { JsonValue } from "./plugin.ts";
 import { type ClockState } from "./storyClock.ts";
 import { type FixedView } from "./storyGlobals.ts";
 import { type LiveView, type MeasureTool } from "./viewState.ts";
@@ -57,6 +59,18 @@ export type FrameMessage = {
     readonly actions: readonly string[];
     /** What the story fixes of the view (its `globals`, Storybook's backgrounds and viewport). */
     readonly fixed: FixedView;
+    /** The names of the story's parameters, which decide the plugins' tabs. */
+    readonly parameters: readonly string[];
+} | {
+    /**
+     * The story changed its own args (Storybook's `useArgs`): the panel takes these values, as if the reader had set
+     * them. All of them, the story's change applied, so the last of two changes in a row holds both.
+     */
+    readonly type: "forgebook:story-args";
+    /** The story's id. */
+    readonly storyId: string;
+    /** The panel's values after the change, those the panel can show: another value is the frame's alone. */
+    readonly args: PanelArgs;
 } | {
     /** The story's height changed. */
     readonly type: "forgebook:size";
@@ -110,6 +124,19 @@ export type FrameMessage = {
     readonly storyId: string;
     /** How many elements spill out of their parents. */
     readonly count: number;
+} | {
+    /** A plugin's frame module told its tab about the story. */
+    readonly type: "forgebook:plugin";
+    /** The story's id. */
+    readonly storyId: string;
+    /** The plugin's id. */
+    readonly plugin: string;
+    /** What its tabs receive. */
+    readonly value: JsonValue;
+    /** A short note beside a tab's name; none shows nothing. */
+    readonly hint: string | null;
+    /** The tab the note is for; none for the plugin's first. */
+    readonly tab: string | null;
 };
 /** From the shell to a frame. */
 export type ShellMessage = {
@@ -212,4 +239,3 @@ export declare const panelArgsParam: (args: PanelArgs) => string;
  * @param param - the `args` parameter.
  */
 export declare const parsePanelArgsParam: (param: string | null) => PanelArgs;
-//# sourceMappingURL=messages.d.ts.map

package/dist/src/messages.js

@@ -3,7 +3,8 @@
  *
  * @remarks
  * The frame tells the shell what the loaded story can do (Replay, a story clock, its args), how tall it is (the shell sizes the frame
- * to it, so a story never scrolls inside a box), every call of an event, or why it failed. The shell asks the frame to
+ * to it, so a story never scrolls inside a box), every call of an event, the args the story changed itself, or why it
+ * failed. The shell asks the frame to
  * replay, sends the props panel's values, names the events to record, and runs, holds, speeds up or restarts the
  * story clock. Every message is checked on arrival
  * (`isFrameMessage`, `isShellMessage`): a page may receive messages from anything it embeds or is embedded in.
@@ -53,6 +54,19 @@ const isStringList = (value) => Array.isArray(value) && value.every((item) => ty
 const isControlsSetting = (value) => value === "all" || isStringList(value);
 /** Whether a value is the text keys of a story's args: names to keys. */
 const isTextKeys = (value) => isRecord(value) && Object.values(value).every((key) => typeof key === "string");
+/** Whether a value stays what it is as JSON. */
+const isJsonValue = (value) => {
+    if (value === null || typeof value === "string" || typeof value === "boolean")
+        return true;
+    if (typeof value === "number")
+        return Number.isFinite(value);
+    if (Array.isArray(value))
+        return value.every(isJsonValue);
+    // a date or a map crosses between the documents as it is, and would not be what a tab reads as JSON
+    return (isRecord(value) &&
+        Object.getPrototypeOf(value) === Object.prototype &&
+        Object.values(value).every(isJsonValue));
+};
 /**
  * Whether a received message is one a frame sends.
  *
@@ -70,7 +84,10 @@ export const isFrameMessage = (value) => {
                 isPanelArgTypes(value["argTypes"]) &&
                 isControlsSetting(value["controls"]) &&
                 isStringList(value["actions"]) &&
-                isFixedView(value["fixed"]));
+                isFixedView(value["fixed"]) &&
+                isStringList(value["parameters"]));
+        case "forgebook:story-args":
+            return isPanelArgs(value["args"]);
         case "forgebook:size":
             return typeof value["height"] === "number";
         case "forgebook:spills":
@@ -87,6 +104,11 @@ export const isFrameMessage = (value) => {
             return isPlayTrace(value["trace"]);
         case "forgebook:checked":
             return Array.isArray(value["violations"]) && value["violations"].every(isViolation);
+        case "forgebook:plugin":
+            return (typeof value["plugin"] === "string" &&
+                isJsonValue(value["value"]) &&
+                (value["hint"] === null || typeof value["hint"] === "string") &&
+                (value["tab"] === null || typeof value["tab"] === "string"));
         default:
             return false;
     }
@@ -194,4 +216,3 @@ export const parsePanelArgsParam = (param) => {
         return {};
     }
 };
-//# sourceMappingURL=messages.js.map

package/dist/src/namedValues.d.ts

@@ -12,6 +12,17 @@ import type { StorySource } from "@forgebook/story-format/source";
 import { type NamedArg, type PanelArgs } from "./messages.ts";
 /** A source's named values: by the type as the props write it, then by name. */
 export type NamedValues = NonNullable<StorySource["namedValues"]>;
+/**
+ * The value a named value stands for, from the source's own entries only: a name the panel sent, or an address wrote,
+ * never reaches a value through an object's prototype, so `{ of: "constructor", named: "constructor" }` is not
+ * `Function`.
+ *
+ * @param namedValues - the source's named values.
+ * @param of - the type the value is offered for.
+ * @param named - the value's name.
+ * @returns the value; none when the source does not name it.
+ */
+export declare const namedValueOf: (namedValues: NamedValues, of: string, named: string) => unknown;
 /**
  * The name of a value among the named ones, when it is one of them.
  *
@@ -35,4 +46,3 @@ export declare const panelArgsOf: (args: Readonly<Record<string, unknown>>, name
  * @param namedValues - the source's named values; none by default.
  */
 export declare const storyArgsOf: (args: PanelArgs, namedValues?: NamedValues) => Readonly<Record<string, unknown>>;
-//# sourceMappingURL=namedValues.d.ts.map

package/dist/src/namedValues.js

@@ -1,4 +1,28 @@
 import { isChoiceList, isNamedArg } from "./messages.js";
+/**
+ * Whether a record holds a key itself, not through its prototype: `{}`'s `constructor` is `Object`, whose own
+ * `constructor` is `Function`.
+ *
+ * @param record - the record.
+ * @param key - the key.
+ */
+const hasOwn = (record, key) => Object.hasOwn(record, key);
+/**
+ * The value a named value stands for, from the source's own entries only: a name the panel sent, or an address wrote,
+ * never reaches a value through an object's prototype, so `{ of: "constructor", named: "constructor" }` is not
+ * `Function`.
+ *
+ * @param namedValues - the source's named values.
+ * @param of - the type the value is offered for.
+ * @param named - the value's name.
+ * @returns the value; none when the source does not name it.
+ */
+export const namedValueOf = (namedValues, of, named) => {
+    if (!hasOwn(namedValues, of))
+        return undefined;
+    const values = namedValues[of];
+    return values !== undefined && hasOwn(values, named) ? values[named] : undefined;
+};
 /**
  * The name of a value among the named ones, when it is one of them.
  *
@@ -42,7 +66,6 @@ export const panelArgsOf = (args, namedValues = {}) => Object.fromEntries(Object
 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];
+    const known = namedValueOf(namedValues, value.of, value.named);
     return known === undefined ? [] : [[name, known]];
 }));
-//# sourceMappingURL=namedValues.js.map

package/dist/src/namedViews.d.ts

@@ -1,17 +1,6 @@
-/**
- * Named views: the View menu's values saved under a name ("Dark, Italian, 360") and picked again. A reader's, kept in
- * their browser, and the catalogue's own (`views` in its configuration), offered to the whole team.
- *
- * @remarks
- * A named view holds values, never an arrangement: the switches, the background, the style sheets, the text size and
- * the width. Picking one sets them as choosing each would, so the address carries the values; a name never goes in the
- * address, since another reader may not have it. Pure: views in, views out.
- *
- * @module
- */
 import { type ViewCatalogue, type ViewState } from "./viewState.ts";
 /** The values a named view holds: the View menu's. */
-export type ViewValues = Pick<ViewState, "switches" | "backdrop" | "sheets" | "text" | "width">;
+export type ViewValues = Pick<ViewState, "switches" | "backdrop" | "sheets" | "text" | "width" | "device" | "orientation">;
 /** A view saved under a name. */
 export type NamedView = {
     /** Its name, as the reader or the catalogue wrote it. */
@@ -86,4 +75,3 @@ export declare const isSameView: (first: ViewValues, second: ViewValues, switche
  * @param catalogue - the catalogue's switches and lists.
  */
 export declare const checkedView: (view: ViewState, catalogue: ViewCatalogue) => ViewState;
-//# sourceMappingURL=namedViews.d.ts.map

package/dist/src/namedViews.js

@@ -3,12 +3,13 @@
  * their browser, and the catalogue's own (`views` in its configuration), offered to the whole team.
  *
  * @remarks
- * A named view holds values, never an arrangement: the switches, the background, the style sheets, the text size and
- * the width. Picking one sets them as choosing each would, so the address carries the values; a name never goes in the
+ * A named view holds values, never an arrangement: the switches, the background, the style sheets, the text size, the
+ * width and the device. Picking one sets them as choosing each would, so the address carries the values; a name never goes in the
  * address, since another reader may not have it. Pure: views in, views out.
  *
  * @module
  */
+import { isDeviceId, isDeviceOrientation } from "./deviceView.js";
 import { parseView, viewParams } from "./viewState.js";
 /**
  * The values of a view that a named view holds.
@@ -20,7 +21,9 @@ export const viewValues = (view) => ({
     backdrop: view.backdrop,
     sheets: view.sheets,
     text: view.text,
-    width: view.width
+    width: view.width,
+    device: view.device,
+    orientation: view.orientation
 });
 /**
  * The view with a named view's values set.
@@ -54,7 +57,7 @@ export const withSavedView = (views, saved) => {
 export const withoutView = (views, name) => views.filter((each) => each.name !== name);
 /** Whether a value is a plain object. */
 const isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
-/** Whether a value is a named view's values, as this module stores them. */
+/** Whether a value is a named view's values, as this module stores them; the device may be missing. */
 const isViewValues = (value) => isRecord(value) &&
     isRecord(value["switches"]) &&
     Object.values(value["switches"]).every((each) => typeof each === "string") &&
@@ -77,7 +80,26 @@ export const readNamedViews = (stored) => {
     catch {
         return [];
     }
-    return (Array.isArray(parsed) ? parsed : []).filter((each) => isRecord(each) && typeof each["name"] === "string" && isViewValues(each["values"]));
+    // a view saved before views held the device has none: it follows the story's
+    return (Array.isArray(parsed) ? parsed : []).flatMap((each) => {
+        if (!isRecord(each) || typeof each["name"] !== "string")
+            return [];
+        const values = each["values"];
+        const device = isRecord(values) ? values["device"] : undefined;
+        const orientation = isRecord(values) ? values["orientation"] : undefined;
+        if (!isViewValues(values))
+            return [];
+        return [
+            {
+                name: each["name"],
+                values: {
+                    ...values,
+                    device: device === "off" || isDeviceId(device) ? device : "auto",
+                    orientation: isDeviceOrientation(orientation) ? orientation : "auto"
+                }
+            }
+        ];
+    });
 };
 /**
  * The text the reader's views are stored as; empty for none.
@@ -96,7 +118,9 @@ export const isSameView = (first, second, switches) => switches.every((each) =>
     first.backdrop === second.backdrop &&
     first.sheets === second.sheets &&
     first.text === second.text &&
-    first.width === second.width;
+    first.width === second.width &&
+    first.device === second.device &&
+    first.orientation === second.orientation;
 /**
  * A view with a named view's values read back as an address is: what the catalogue no longer offers (a background, a
  * text size, a control it turned off) falls back to its default, so a view saved before the catalogue changed never
@@ -109,4 +133,3 @@ export const checkedView = (view, catalogue) => ({
     ...view,
     ...viewValues(parseView(viewParams(view, catalogue.switches).toString(), catalogue))
 });
-//# sourceMappingURL=namedViews.js.map

package/dist/src/packedText.d.ts

@@ -0,0 +1,21 @@
+/**
+ * What a build keeps gzipped, unpacked in the page when it is asked for: what a static catalogue weighs most and reads
+ * least (axe's script, "Used in"). A build names such files `.bin`, since `.gz` makes some hosts send them with
+ * `Content-Encoding: gzip`, which the browser would unpack before the page does.
+ *
+ * @module
+ */
+/**
+ * A gzipped script, at an address a script element can load: a blob URL, which its loader revokes once it ran.
+ *
+ * @param address - the file's address.
+ * @throws when it cannot be fetched.
+ */
+export declare const unpackedScript: (address: string) => Promise<string>;
+/**
+ * A gzipped JSON document, parsed.
+ *
+ * @param address - the file's address.
+ * @throws when it cannot be fetched, or is not JSON.
+ */
+export declare const packedJson: (address: string) => Promise<unknown>;

package/dist/src/packedText.js

@@ -0,0 +1,36 @@
+/**
+ * What a build keeps gzipped, unpacked in the page when it is asked for: what a static catalogue weighs most and reads
+ * least (axe's script, "Used in"). A build names such files `.bin`, since `.gz` makes some hosts send them with
+ * `Content-Encoding: gzip`, which the browser would unpack before the page does.
+ *
+ * @module
+ */
+/**
+ * A gzipped file's content, unpacked.
+ *
+ * @param address - the file's address.
+ * @throws when it cannot be fetched.
+ */
+const unpacked = async (address) => {
+    const response = await fetch(address);
+    if (!response.ok || response.body === null)
+        throw new Error(`${address} could not be loaded (${response.status})`);
+    return new Response(response.body.pipeThrough(new DecompressionStream("gzip")));
+};
+/**
+ * A gzipped script, at an address a script element can load: a blob URL, which its loader revokes once it ran.
+ *
+ * @param address - the file's address.
+ * @throws when it cannot be fetched.
+ */
+export const unpackedScript = async (address) => {
+    const script = await (await unpacked(address)).arrayBuffer();
+    return URL.createObjectURL(new Blob([script], { type: "text/javascript" }));
+};
+/**
+ * A gzipped JSON document, parsed.
+ *
+ * @param address - the file's address.
+ * @throws when it cannot be fetched, or is not JSON.
+ */
+export const packedJson = async (address) => (await unpacked(address)).json();

package/dist/src/pageAddress.d.ts

@@ -0,0 +1,26 @@
+/**
+ * How a docs page is named in an address: its slug and a heading's anchor.
+ *
+ * @remarks
+ * Apart from the rest of what the plugin and the shell share (`docPages.ts`) because the tree and the address need these
+ * on every catalogue's first load, and a catalogue that opens no page must not pay for the rest. Pure.
+ *
+ * @module
+ */
+/**
+ * A fragment read back as a heading's anchor: a `%` that encodes nothing stays as written.
+ *
+ * @param fragment - the fragment, without its `#`; none when there is none.
+ * @returns the anchor; none for an empty fragment.
+ */
+export declare const anchorOf: (fragment: string | undefined) => string | undefined;
+/**
+ * A page's slug: the part of its id after the source's, from its title.
+ *
+ * @remarks
+ * As CSF writes ids (`kebab`), keeping every language's letters: a title in Japanese would otherwise have no slug at
+ * all, and two such pages would collide. For a Latin title the two agree.
+ *
+ * @param title - the page's title.
+ */
+export declare const pageSlug: (title: string) => string;

package/dist/src/pageAddress.js

@@ -0,0 +1,39 @@
+/**
+ * How a docs page is named in an address: its slug and a heading's anchor.
+ *
+ * @remarks
+ * Apart from the rest of what the plugin and the shell share (`docPages.ts`) because the tree and the address need these
+ * on every catalogue's first load, and a catalogue that opens no page must not pay for the rest. Pure.
+ *
+ * @module
+ */
+/**
+ * A fragment read back as a heading's anchor: a `%` that encodes nothing stays as written.
+ *
+ * @param fragment - the fragment, without its `#`; none when there is none.
+ * @returns the anchor; none for an empty fragment.
+ */
+export const anchorOf = (fragment) => {
+    if (fragment === undefined || fragment === "")
+        return undefined;
+    try {
+        return decodeURIComponent(fragment);
+    }
+    catch {
+        return fragment;
+    }
+};
+/**
+ * A page's slug: the part of its id after the source's, from its title.
+ *
+ * @remarks
+ * As CSF writes ids (`kebab`), keeping every language's letters: a title in Japanese would otherwise have no slug at
+ * all, and two such pages would collide. For a Latin title the two agree.
+ *
+ * @param title - the page's title.
+ */
+export const pageSlug = (title) => title
+    .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
+    .toLowerCase()
+    .replace(/[^\p{L}\p{N}]+/gu, "-")
+    .replace(/^-|-$/g, "");

package/dist/src/pageConfig.d.ts

@@ -6,6 +6,7 @@
  */
 import type { StoryLanguage } from "@forgebook/story-format/source";
 import type { CatalogueLists } from "./catalogue.ts";
+import type { FramesPlacement } from "./frameOrigins.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 = {
@@ -19,5 +20,6 @@ export type PageConfig = {
     readonly languages: readonly StoryLanguage[];
     /** The lists (widths, backgrounds, story groups, texts…), the presets' and the catalogue's merged. */
     readonly lists: CatalogueLists;
+    /** Where the frames run: the shell loads them there, and each side hears only the other's origin. */
+    readonly frames: FramesPlacement;
 };
-//# sourceMappingURL=pageConfig.d.ts.map

package/dist/src/pageConfig.js

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