forgebook 0.0.0-stage → 0.1.0

package/dist/src/frame/checkStory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkStory.js","sourceRoot":"","sources":["../../../src/frame/checkStory.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAKH;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,EAAE,QAAkB,EAAE,KAAmB,EAAwB,EAAE;IAChG,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,MAAM,MAAM,CAAC,UAAU,CAAC,CAAC;IAClD,MAAM,OAAO,GAAG,MAAM,GAAG,CAAC,GAAG,CAAC,QAAQ,EAAE;QACtC,OAAO,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE;QACjD,KAAK,EAAE,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;KACzF,CAAC,CAAC;IACH,OAAO,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;QAC5C,EAAE,EAAE,SAAS,CAAC,EAAE;QAChB,IAAI,EAAE,SAAS,CAAC,IAAI;QACpB,MAAM,EAAE,SAAS,CAAC,MAAM,IAAI,SAAS;QACrC,OAAO,EAAE,SAAS,CAAC,OAAO;QAC1B,OAAO,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC1E,CAAC,CAAC,CAAC;AACN,CAAC,CAAC"}

package/dist/src/frame/frame.css

@@ -0,0 +1,51 @@
+@layer catalogue {
+  body {
+    margin: 0;
+  }
+  .forgebook-frame {
+    box-sizing: border-box;
+  }
+  .forgebook-frame[data-layout=padded] {
+    padding: 1.5rem;
+  }
+  .forgebook-frame[data-layout=centered] {
+    display: grid;
+    place-items: center;
+    min-height: 12rem;
+    padding: 1.5rem;
+  }
+  .forgebook-frame[data-layout=fullscreen] {
+    min-height: 100vh;
+  }
+  .forgebook-matrix__table {
+    border-collapse: collapse;
+  }
+  .forgebook-matrix__corner,
+  .forgebook-matrix__name {
+    padding: 0.5rem 0.75rem;
+    font: 400 0.6875rem/1.6 "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
+    text-align: start;
+    white-space: nowrap;
+    opacity: 0.7;
+  }
+  .forgebook-matrix__cell {
+    padding: 0.75rem;
+    vertical-align: middle;
+  }
+  .forgebook-frame-error {
+    margin: 1.5rem;
+    font: 400 0.8125rem/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
+    color: #bc1f16;
+  }
+  .forgebook-frame-error__message {
+    margin: 0;
+    font-weight: 600;
+  }
+  .forgebook-frame-error__stack {
+    margin: 0.75rem 0 0;
+    overflow-x: auto;
+    font: 400 0.6875rem/1.6 "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
+    color: #56565d;
+    white-space: pre;
+  }
+}

package/dist/src/frame/frameClock.d.ts

@@ -0,0 +1,53 @@
+/**
+ * The story clock a frame runs for its story: it starts at the story's moment and then moves with real time, at the
+ * speed the shell's controls set, or stays held (D-504).
+ *
+ * @remarks
+ * The clock is stepped: it ticks every `TICK_MS` of real time while it runs, and `now()` is the moment of its last
+ * tick, so a render reads one moment throughout and React can subscribe to it (`useStoryNow`, D-627). Pausing keeps the
+ * moment; Restart brings it back to the start (the frame mounts the story again with it); `advance` jumps at once,
+ * held or not. Listeners hear every tick and every jump. The clock names no date library: the library shown turns
+ * the milliseconds into its own time type (D-67).
+ *
+ * @module
+ */
+import type { StoryClock } from "@forgebook/story-format/clock";
+import { type ClockState } from "../storyClock.ts";
+/** The clock a frame runs: the story's clock, and what the shell's controls do to it. */
+export type FrameClock = StoryClock & {
+    /** Sets whether it runs and how fast, from its moment now. */
+    readonly setState: (state: ClockState) => void;
+    /** Brings it back to its start, keeping whether it runs and how fast. */
+    readonly restart: () => void;
+};
+/** What a frame clock starts from. */
+export type FrameClockOptions = {
+    /** The story's start, in ms since the Unix epoch. */
+    readonly start: number;
+    /** Whether it runs, and how fast, from the start. */
+    readonly state: ClockState;
+};
+/**
+ * Starts a story's clock.
+ *
+ * @param options - its start, and whether it runs and how fast.
+ * @returns the clock.
+ */
+export declare const createFrameClock: ({ start, state: initial }: FrameClockOptions) => FrameClock;
+/**
+ * The clock a frame runs for its story: a Live story's from its start, held there when the frame's address says so;
+ * a still's held at the epoch.
+ *
+ * @param clockStart - the story's clock start, in ms since the Unix epoch; none for a still.
+ * @param isHeld - whether the frame's address holds the clock (`clock=held`, what the tests open).
+ * @returns the clock.
+ */
+export declare const storyFrameClock: (clockStart: number | undefined, isHeld: boolean) => FrameClock;
+/**
+ * A story's clock held at its start: what a still, a test frame and the server render read.
+ *
+ * @param start - the start, in ms since the Unix epoch.
+ * @returns the clock, held until the controls run it or a play advances it.
+ */
+export declare const heldFrameClock: (start: number) => FrameClock;
+//# sourceMappingURL=frameClock.d.ts.map

package/dist/src/frame/frameClock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"frameClock.d.ts","sourceRoot":"","sources":["../../../src/frame/frameClock.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAEhE,OAAO,EAAqB,KAAK,UAAU,EAAkC,MAAM,kBAAkB,CAAC;AAKtG,yFAAyF;AACzF,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG;IACpC,8DAA8D;IAC9D,QAAQ,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IAC/C,yEAAyE;IACzE,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;CAC9B,CAAC;AAEF,sCAAsC;AACtC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,qDAAqD;IACrD,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,qDAAqD;IACrD,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;CAC5B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAAI,2BAA2B,iBAAiB,KAAG,UA4C/E,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,GAAI,YAAY,MAAM,GAAG,SAAS,EAAE,QAAQ,OAAO,KAAG,UAKjF,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,cAAc,GAAI,OAAO,MAAM,KAAG,UACmC,CAAC"}

package/dist/src/frame/frameClock.js

@@ -0,0 +1,80 @@
+import { DEFAULT_CLOCK_STATE, readClock } from "../storyClock.js";
+/** How often a running clock ticks, in ms of real time: often enough for a stream's words, a ring's sweep. */
+const TICK_MS = 50;
+/**
+ * Starts a story's clock.
+ *
+ * @param options - its start, and whether it runs and how fast.
+ * @returns the clock.
+ */
+export const createFrameClock = ({ start, state: initial }) => {
+    let state = initial;
+    let reading = { moment: start, at: performance.now() };
+    let timer;
+    const listeners = new Set();
+    const notify = () => {
+        for (const listener of listeners)
+            listener();
+    };
+    const tick = () => {
+        reading = readClock(reading, state, performance.now());
+        notify();
+    };
+    // a held clock needs no timer: nothing moves it but a jump, which notifies on its own
+    const schedule = () => {
+        if (timer !== undefined)
+            window.clearInterval(timer);
+        timer = state.isRunning ? window.setInterval(tick, TICK_MS) : undefined;
+    };
+    schedule();
+    return {
+        // whole milliseconds, as the story clock promises: the reading itself keeps the fractions, so nothing drifts
+        now: () => Math.floor(reading.moment),
+        subscribe: (onTick) => {
+            listeners.add(onTick);
+            return () => {
+                listeners.delete(onTick);
+            };
+        },
+        advance: (ms) => {
+            if (!Number.isFinite(ms) || ms <= 0)
+                return;
+            const now = readClock(reading, state, performance.now());
+            reading = { moment: now.moment + ms, at: now.at };
+            notify();
+        },
+        setState: (next) => {
+            reading = readClock(reading, state, performance.now());
+            state = next;
+            schedule();
+            notify();
+        },
+        restart: () => {
+            reading = { moment: start, at: performance.now() };
+            notify();
+        }
+    };
+};
+/**
+ * The clock a frame runs for its story: a Live story's from its start, held there when the frame's address says so;
+ * a still's held at the epoch.
+ *
+ * @param clockStart - the story's clock start, in ms since the Unix epoch; none for a still.
+ * @param isHeld - whether the frame's address holds the clock (`clock=held`, what the tests open).
+ * @returns the clock.
+ */
+export const storyFrameClock = (clockStart, isHeld) => {
+    if (clockStart === undefined)
+        return heldFrameClock(0);
+    return isHeld
+        ? heldFrameClock(clockStart)
+        : createFrameClock({ start: clockStart, state: DEFAULT_CLOCK_STATE });
+};
+/**
+ * A story's clock held at its start: what a still, a test frame and the server render read.
+ *
+ * @param start - the start, in ms since the Unix epoch.
+ * @returns the clock, held until the controls run it or a play advances it.
+ */
+export const heldFrameClock = (start) => createFrameClock({ start, state: { ...DEFAULT_CLOCK_STATE, isRunning: false } });
+//# sourceMappingURL=frameClock.js.map

package/dist/src/frame/frameClock.js.map

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

package/dist/src/frame/frameStatus.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The attribute on a frame's root that says whether its story is shown: what the tests wait for, never a delay.
+ *
+ * @module
+ */
+/** `ready` once the story rendered and its play function is over, `error` when it could not render. */
+export declare const STATUS_ATTRIBUTE = "data-forgebook-status";
+//# sourceMappingURL=frameStatus.d.ts.map

package/dist/src/frame/frameStatus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"frameStatus.d.ts","sourceRoot":"","sources":["../../../src/frame/frameStatus.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,uGAAuG;AACvG,eAAO,MAAM,gBAAgB,0BAA0B,CAAC"}

package/dist/src/frame/frameStatus.js

@@ -0,0 +1,8 @@
+/**
+ * The attribute on a frame's root that says whether its story is shown: what the tests wait for, never a delay.
+ *
+ * @module
+ */
+/** `ready` once the story rendered and its play function is over, `error` when it could not render. */
+export const STATUS_ATTRIBUTE = "data-forgebook-status";
+//# sourceMappingURL=frameStatus.js.map

package/dist/src/frame/frameStatus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"frameStatus.js","sourceRoot":"","sources":["../../../src/frame/frameStatus.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,uGAAuG;AACvG,MAAM,CAAC,MAAM,gBAAgB,GAAG,uBAAuB,CAAC"}

package/dist/src/frame/frameView.d.ts

@@ -0,0 +1,33 @@
+/**
+ * The view applied to a frame's document: the declared switches that apply on the root (`switches.ts`), the root
+ * font size, the backdrop drawn behind the story and the style sheets for the Styles setting.
+ *
+ * @module
+ */
+import type { StorySheets } from "@forgebook/story-format/source";
+import type { CatalogueSettings } from "../catalogue.ts";
+import { type LiveView, type ViewState } from "../viewState.ts";
+/**
+ * Applies the view's live part on a document's root: each declared switch that applies there, the font size, and the
+ * backdrop behind the story in the view's scheme.
+ *
+ * @param root - the document's root element.
+ * @param view - the view's live part: the frame applies it again whenever the shell sends a change.
+ * @param catalogue - the catalogue's switches and backdrops.
+ */
+export declare const applyView: (root: HTMLElement, view: LiveView, catalogue: Pick<CatalogueSettings, "switches" | "backdrops">) => void;
+/**
+ * The style sheets a view loads, in order: the required ones, then the theme or the restyled look.
+ *
+ * @param sheets - the source's sheets.
+ * @param view - the view.
+ */
+export declare const viewSheets: (sheets: StorySheets, view: ViewState) => string[];
+/**
+ * Loads style sheets into a document and waits for them, so the story never shows unstyled.
+ *
+ * @param document - the frame's document.
+ * @param urls - the sheets, in order.
+ */
+export declare const loadSheets: (document: Document, urls: readonly string[]) => Promise<void>;
+//# sourceMappingURL=frameView.d.ts.map

package/dist/src/frame/frameView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"frameView.d.ts","sourceRoot":"","sources":["../../../src/frame/frameView.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAGlE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,OAAO,EAAE,KAAK,QAAQ,EAAY,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC;AA8E1E;;;;;;;GAOG;AACH,eAAO,MAAM,SAAS,GACpB,MAAM,WAAW,EACjB,MAAM,QAAQ,EACd,WAAW,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,WAAW,CAAC,KAC3D,IAKF,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,UAAU,GAAI,QAAQ,WAAW,EAAE,MAAM,SAAS,KAAG,MAAM,EAIvE,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,UAAU,GAAU,UAAU,QAAQ,EAAE,MAAM,SAAS,MAAM,EAAE,KAAG,OAAO,CAAC,IAAI,CAc1F,CAAC"}

package/dist/src/frame/frameView.js

@@ -0,0 +1,134 @@
+/**
+ * The view applied to a frame's document: the declared switches that apply on the root (`switches.ts`), the root
+ * font size, the backdrop drawn behind the story and the style sheets for the Styles setting.
+ *
+ * @module
+ */
+import { backdropSheet } from "../backdrops.js";
+import { switchValueOf } from "../switches.js";
+import { schemeOf } from "../viewState.js";
+/** The id of the style sheet that draws the backdrop. */
+const BACKDROP_STYLE_ID = "forgebook-backdrop-style";
+/**
+ * Draws a backdrop behind the story (D-644): its own style sheet in the document's head, made once and rewritten on
+ * every change, empty for the page's own colour.
+ *
+ * @param document - the frame's document.
+ * @param sheet - the backdrop's CSS.
+ */
+const applyBackdrop = (document, sheet) => {
+    const existing = document.getElementById(BACKDROP_STYLE_ID);
+    const style = existing ?? document.createElement("style");
+    if (existing === null) {
+        style.id = BACKDROP_STYLE_ID;
+        document.head.append(style);
+    }
+    style.textContent = sheet;
+};
+/**
+ * Sets or removes an attribute.
+ *
+ * @param root - the document's root element.
+ * @param name - the attribute.
+ * @param value - its value; none removes it.
+ */
+const setAttribute = (root, name, value) => {
+    if (value === undefined)
+        root.removeAttribute(name);
+    else
+        root.setAttribute(name, value);
+};
+/**
+ * Sets the class of a switch's value, removing its other values' classes.
+ *
+ * @param root - the document's root element.
+ * @param prefix - the classes' prefix.
+ * @param each - the switch.
+ * @param value - the value; none leaves no class.
+ */
+const setClass = (root, prefix, each, value) => {
+    for (const candidate of each.values)
+        root.classList.remove(`${prefix}${candidate.value}`);
+    if (value !== undefined)
+        root.classList.add(`${prefix}${value}`);
+};
+/**
+ * Sets or removes a custom property.
+ *
+ * @param root - the document's root element.
+ * @param name - the property (`--density`).
+ * @param value - its value; none removes it.
+ */
+const setProperty = (root, name, value) => {
+    if (value === undefined)
+        root.style.removeProperty(name);
+    else
+        root.style.setProperty(name, value);
+};
+/**
+ * Applies one declared switch on the root, when it applies there: its attribute, class, colour scheme or custom
+ * property; a value marked unset writes nothing, so the library's own default shows. A switch applied by code reaches
+ * the story instead (`context.globals`).
+ *
+ * @param root - the document's root element.
+ * @param each - the switch.
+ * @param value - its value in the view; none for its default.
+ */
+const applySwitch = (root, each, value) => {
+    const shown = switchValueOf(each, value);
+    const written = shown === undefined || shown.isUnset === true ? undefined : shown.value;
+    const { apply } = each;
+    if (apply.kind === "attribute")
+        setAttribute(root, apply.name, written);
+    if (apply.kind === "class")
+        setClass(root, apply.prefix, each, written);
+    if (apply.kind === "colorScheme")
+        root.style.colorScheme = written ?? "";
+    if (apply.kind === "cssVariable")
+        setProperty(root, apply.name, written);
+};
+/**
+ * Applies the view's live part on a document's root: each declared switch that applies there, the font size, and the
+ * backdrop behind the story in the view's scheme.
+ *
+ * @param root - the document's root element.
+ * @param view - the view's live part: the frame applies it again whenever the shell sends a change.
+ * @param catalogue - the catalogue's switches and backdrops.
+ */
+export const applyView = (root, view, catalogue) => {
+    for (const each of catalogue.switches)
+        applySwitch(root, each, view.switches[each.id]);
+    root.style.fontSize = `${view.text}%`;
+    const backdrop = catalogue.backdrops.find((each) => each.id === view.backdrop);
+    applyBackdrop(root.ownerDocument, backdropSheet(backdrop, schemeOf(view, catalogue.switches)));
+};
+/**
+ * The style sheets a view loads, in order: the required ones, then the theme or the restyled look.
+ *
+ * @param sheets - the source's sheets.
+ * @param view - the view.
+ */
+export const viewSheets = (sheets, view) => {
+    if (view.sheets === "structure")
+        return [...sheets.required];
+    if (view.sheets === "restyled")
+        return [...sheets.required, ...sheets.restyled];
+    return [...sheets.required, ...sheets.theme];
+};
+/**
+ * Loads style sheets into a document and waits for them, so the story never shows unstyled.
+ *
+ * @param document - the frame's document.
+ * @param urls - the sheets, in order.
+ */
+export const loadSheets = async (document, urls) => {
+    await Promise.all(urls.map((url) => new Promise((resolve, reject) => {
+        const link = document.createElement("link");
+        link.rel = "stylesheet";
+        link.href = url;
+        link.addEventListener("load", () => resolve());
+        link.addEventListener("error", () => reject(new Error(`The style sheet ${url} did not load`)));
+        document.head.append(link);
+    })));
+};
+//# sourceMappingURL=frameView.js.map

package/dist/src/frame/frameView.js.map

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

package/dist/src/frame/matrixLayout.d.ts

@@ -0,0 +1,36 @@
+/**
+ * The layout of a story drawn as a matrix: a table with one cell per value of the rows' prop, and of the columns'
+ * when there are two, each value named at the head of its row and column.
+ *
+ * @remarks
+ * The frame mounts the story in each cell through the framework; the cells do not run the play function, since a play
+ * drives one story and twenty plays at once would fight over the focus. The names take the frame's own colours, so the
+ * matrix reads in every theme.
+ *
+ * @module
+ */
+import type { Matrix } from "../matrix.ts";
+import type { LoadedArgs, LoadedStory } from "./storyModule.ts";
+/** One cell of the matrix: where the story is drawn, and its values over the story's args. */
+export type MatrixCell = {
+    /** The cell's canvas. */
+    readonly canvas: HTMLElement;
+    /** The values of the cell's row and column. */
+    readonly values: LoadedArgs;
+};
+/** A matrix laid out: its element and its cells, in reading order. */
+export type MatrixLayout = {
+    /** The matrix's element, to put in the frame. */
+    readonly element: HTMLElement;
+    /** Its cells. */
+    readonly cells: readonly MatrixCell[];
+};
+/**
+ * Lays a story out as a matrix.
+ *
+ * @param document - the frame's document.
+ * @param story - the story, for the states it forces in every cell.
+ * @param matrix - the axes.
+ */
+export declare const matrixLayout: (document: Document, story: LoadedStory, matrix: Matrix) => MatrixLayout;
+//# sourceMappingURL=matrixLayout.d.ts.map

package/dist/src/frame/matrixLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"matrixLayout.d.ts","sourceRoot":"","sources":["../../../src/frame/matrixLayout.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,MAAM,EAAe,MAAM,cAAc,CAAC;AAExD,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEhE,8FAA8F;AAC9F,MAAM,MAAM,UAAU,GAAG;IACvB,yBAAyB;IACzB,QAAQ,CAAC,MAAM,EAAE,WAAW,CAAC;IAC7B,+CAA+C;IAC/C,QAAQ,CAAC,MAAM,EAAE,UAAU,CAAC;CAC7B,CAAC;AAEF,sEAAsE;AACtE,MAAM,MAAM,YAAY,GAAG;IACzB,iDAAiD;IACjD,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;IAC9B,iBAAiB;IACjB,QAAQ,CAAC,KAAK,EAAE,SAAS,UAAU,EAAE,CAAC;CACvC,CAAC;AAmCF;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,GAAI,UAAU,QAAQ,EAAE,OAAO,WAAW,EAAE,QAAQ,MAAM,KAAG,YA2CrF,CAAC"}

package/dist/src/frame/matrixLayout.js

@@ -0,0 +1,87 @@
+/**
+ * The layout of a story drawn as a matrix: a table with one cell per value of the rows' prop, and of the columns'
+ * when there are two, each value named at the head of its row and column.
+ *
+ * @remarks
+ * The frame mounts the story in each cell through the framework; the cells do not run the play function, since a play
+ * drives one story and twenty plays at once would fight over the focus. The names take the frame's own colours, so the
+ * matrix reads in every theme.
+ *
+ * @module
+ */
+import { forceStates } from "./storyCanvas.js";
+/**
+ * An element with a class and, optionally, a text.
+ *
+ * @param document - the frame's document.
+ * @param tag - the element's tag.
+ * @param className - its class.
+ * @param text - its text; none by default.
+ */
+const element = (document, tag, className, text) => {
+    const created = document.createElement(tag);
+    if (className !== undefined)
+        created.className = className;
+    if (text !== undefined)
+        created.textContent = text;
+    return created;
+};
+/**
+ * A heading of a row or a column.
+ *
+ * @param document - the frame's document.
+ * @param scope - `row` or `col`.
+ * @param text - the value it names.
+ */
+const heading = (document, scope, text) => {
+    const cell = element(document, "th", "forgebook-matrix__name", text);
+    cell.scope = scope;
+    return cell;
+};
+/**
+ * Lays a story out as a matrix.
+ *
+ * @param document - the frame's document.
+ * @param story - the story, for the states it forces in every cell.
+ * @param matrix - the axes.
+ */
+export const matrixLayout = (document, story, matrix) => {
+    const { rows, columns } = matrix;
+    const columnValues = columns?.values ?? [undefined];
+    const root = element(document, "div", "forgebook-frame forgebook-matrix");
+    root.dataset["layout"] = "padded";
+    const table = element(document, "table", "forgebook-matrix__table");
+    const headRow = element(document, "tr", undefined);
+    const corner = element(document, "th", "forgebook-matrix__corner", columns === undefined ? rows.name : `${rows.name} \\ ${columns.name}`);
+    corner.scope = "col";
+    headRow.append(corner);
+    for (const column of columnValues)
+        headRow.append(heading(document, "col", column === undefined ? "" : String(column)));
+    const head = element(document, "thead", undefined);
+    head.append(headRow);
+    const body = element(document, "tbody", undefined);
+    const cells = [];
+    for (const row of rows.values) {
+        const tableRow = element(document, "tr", undefined);
+        tableRow.append(heading(document, "row", String(row)));
+        for (const column of columnValues) {
+            const cell = element(document, "td", "forgebook-matrix__cell");
+            const canvas = element(document, "div", "forgebook-matrix__story");
+            forceStates(canvas, story);
+            cell.append(canvas);
+            tableRow.append(cell);
+            cells.push({
+                canvas,
+                values: {
+                    [rows.name]: row,
+                    ...(columns === undefined || column === undefined ? {} : { [columns.name]: column })
+                }
+            });
+        }
+        body.append(tableRow);
+    }
+    table.append(head, body);
+    root.append(table);
+    return { element: root, cells };
+};
+//# sourceMappingURL=matrixLayout.js.map

package/dist/src/frame/matrixLayout.js.map

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

package/dist/src/frame/measureTools.d.ts

@@ -0,0 +1,24 @@
+/**
+ * The tools drawn over a story in its frame: every element's outline, a grid (8 px by default, the catalogue's step), and the box of the element under
+ * the pointer with its size, padding and margin.
+ *
+ * @remarks
+ * The tools sit on top of the story and never change its layout: the outlines are CSS outlines (they take no room),
+ * the grid and the measured box are overlays that let the pointer through. The outlines and the measure reach every
+ * element of the frame's body, not only the story's root: a popover, a menu or a dialog is mounted beside the root (a
+ * portal), and the catalogue does not know how each library names its container. The shell sends the tools as a message
+ * (`forgebook:tools`), so turning one on never loads the frame again. The overlay's colours are fixed, not the
+ * source's: it must read over any theme.
+ *
+ * @module
+ */
+import type { MeasureTool } from "../viewState.ts";
+/**
+ * Draws the tools over the story, replacing the ones drawn before.
+ *
+ * @param document - the frame's document.
+ * @param tools - the tools to draw; none removes them all.
+ * @param gridStep - the grid's step, in CSS px; 8 by default.
+ */
+export declare const applyTools: (document: Document, tools: readonly MeasureTool[], gridStep?: number) => void;
+//# sourceMappingURL=measureTools.d.ts.map

package/dist/src/frame/measureTools.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"measureTools.d.ts","sourceRoot":"","sources":["../../../src/frame/measureTools.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAuGnD;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,GAAI,UAAU,QAAQ,EAAE,OAAO,SAAS,WAAW,EAAE,EAAE,iBAAY,KAAG,IAsC5F,CAAC"}