forgebook 0.1.7 → 0.2.0

package/dist/src/embedCode.js

@@ -0,0 +1,88 @@
+/**
+ * The link a person pastes in a wiki and the HTML they paste in a page of their own to show a story: an iframe, and on
+ * request the few lines that keep it as tall as the story. Pure, and loaded only when the Embed panel opens.
+ *
+ * @remarks
+ * The link carries only what draws the story: compare, the matrix, the zoom and the panel are the stage's. The iframe
+ * alone is the default: a wiki keeps it and removes scripts, and it then simply stays at the height written in it. The
+ * script answers only its own iframe's window and only that window's origin, and sets nothing but a height.
+ *
+ * @module
+ */
+import { codeLiteral } from "./codeLiteral.js";
+import { EMBED_PARAMETER, EMBED_SIZE_TYPE } from "./embed.js";
+/** The parameters an embed does not read: they belong to the stage, so a link keeps none of them. */
+const STAGE_PARAMETERS = [
+    EMBED_PARAMETER,
+    "component",
+    "story",
+    "compare",
+    "audience",
+    "matrix",
+    "panel",
+    "tab",
+    "zoom",
+    "tools"
+];
+/** What ends or opens something in an HTML attribute, with what stands for it. */
+const ATTRIBUTE_ENTITIES = {
+    "&": "&",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;"
+};
+/**
+ * Text set in an HTML attribute: what could end it escaped.
+ *
+ * @param text - the text.
+ */
+const attribute = (text) => text.replace(/[&<>"]/g, (character) => ATTRIBUTE_ENTITIES[character] ?? character);
+/**
+ * The script that keeps the iframe before it as tall as its story.
+ *
+ * @param link - the story's address, whose origin is the only one answered.
+ */
+const followScript = (link) => {
+    // a link holds no `<` once read as a URL, but a script's text must never be able to close its element
+    const origin = codeLiteral(new URL(link).origin);
+    return [
+        "<script>",
+        "(() => {",
+        "  const frame = document.currentScript.previousElementSibling;",
+        '  addEventListener("message", ({ source, origin, data }) => {',
+        `    if (source !== frame.contentWindow || origin !== ${origin}) return;`,
+        `    if (data?.type === ${codeLiteral(EMBED_SIZE_TYPE)} && Number.isFinite(data.height)) frame.height = data.height;`,
+        "  });",
+        "})();",
+        "</script>"
+    ].join("\n");
+};
+/**
+ * The HTML that shows a story.
+ *
+ * @param input - the story's address, the iframe's title and height, and whether it follows the story.
+ */
+export const embedCode = ({ link, title, height, isFollowing }) => {
+    const frame = `<iframe src="${attribute(link)}" title="${attribute(title)}" width="100%" height="${Math.round(height)}" loading="lazy" style="border: 0"></iframe>`;
+    return isFollowing ? `${frame}\n${followScript(link)}` : frame;
+};
+/**
+ * The address of a story shown alone, the view kept as written.
+ *
+ * @param pageUrl - the catalogue's page (`https://ui.example.com/`).
+ * @param id - the story's id.
+ * @param search - the view's query (`theme=dark&lang=it`), with or without `?`.
+ */
+export const embedAddressOf = (pageUrl, id, search) => {
+    const params = new URLSearchParams(search);
+    for (const name of STAGE_PARAMETERS)
+        params.delete(name);
+    params.set("story", id);
+    return `${pageUrl}?${EMBED_PARAMETER}&${params.toString()}`;
+};
+/**
+ * Whether an address opens only on the computer it was copied on: a link from a dev server, which a wiki cannot reach.
+ *
+ * @param link - the address.
+ */
+export const isLocalAddress = (link) => ["localhost", "127.0.0.1", "[::1]", "0.0.0.0"].includes(new URL(link).hostname);

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

@@ -0,0 +1,29 @@
+/**
+ * Forgebook's backdrop pictures, and the style sheet that draws a backdrop behind a frame's story. Only the frame
+ * imports this module: the shell knows a backdrop by its id, its name and its colour (`backdrops.ts`), so its first
+ * load carries none of the pictures.
+ *
+ * @remarks
+ * Every picture is drawn here in CSS gradients and inline SVG: no image file, nothing fetched, nothing of the library
+ * the catalogue shows, invented words only. The sheet replaces the `body` background the story's source sets, so the
+ * story's own layout and colours are unchanged; with forced colours it draws nothing, and the system's palette decides
+ * the page. Pure.
+ *
+ * @module
+ */
+import { type Backdrop, type BuiltInBackdropId, type SchemePair } from "../backdrops.ts";
+/** The layers of each of Forgebook's pictures, in each scheme. */
+export declare const BUILT_IN_PICTURES: Readonly<Record<BuiltInBackdropId, SchemePair>>;
+/**
+ * The style sheet that draws a backdrop behind a frame's story.
+ *
+ * @remarks
+ * The rule sits on `body`, where the sources set their page colour, and wins over it with `!important`, so the
+ * story's own elements keep every colour they set. The dark look follows the scheme the view draws in (its colour
+ * scheme switch's, `switches.ts`), the system's preference for `system`; with forced colours the sheet draws nothing.
+ *
+ * @param backdrop - the backdrop; none for the page's own colour.
+ * @param scheme - the scheme the story is drawn in.
+ * @returns the CSS; empty for the page's own colour.
+ */
+export declare const backdropSheet: (backdrop: Backdrop | undefined, scheme: "light" | "dark" | "system") => string;

package/dist/src/frame/backdropPictures.js

@@ -0,0 +1,187 @@
+/**
+ * Forgebook's backdrop pictures, and the style sheet that draws a backdrop behind a frame's story. Only the frame
+ * imports this module: the shell knows a backdrop by its id, its name and its colour (`backdrops.ts`), so its first
+ * load carries none of the pictures.
+ *
+ * @remarks
+ * Every picture is drawn here in CSS gradients and inline SVG: no image file, nothing fetched, nothing of the library
+ * the catalogue shows, invented words only. The sheet replaces the `body` background the story's source sets, so the
+ * story's own layout and colours are unchanged; with forced colours it draws nothing, and the system's palette decides
+ * the page. Pure.
+ *
+ * @module
+ */
+import { BUILT_IN_COLORS } from "../backdrops.js";
+/**
+ * A text written inside an SVG document, with the characters XML reserves escaped.
+ *
+ * @param text - the text.
+ */
+const xmlText = (text) => text.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;");
+/**
+ * An SVG document as a CSS image.
+ *
+ * @param width - the picture's width, in its own units.
+ * @param height - the picture's height, in its own units.
+ * @param content - the SVG elements inside the root.
+ */
+const svgImage = (width, height, content) => {
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" ` +
+        `viewBox="0 0 ${width} ${height}" preserveAspectRatio="xMidYMid slice">${content}</svg>`;
+    return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+};
+/**
+ * The same layers in both themes: a picture that does not follow the theme.
+ *
+ * @param layers - the picture's layers.
+ */
+const fixed = (layers) => ({ light: layers, dark: layers });
+/** The checkerboard: grey and white squares of 8 px, the usual sign of a transparent picture. */
+const CHECKERBOARD = "repeating-conic-gradient(#d6d6d6 0% 25%, #ffffff 0% 50%) 0 0 / 16px 16px";
+/** The vivid picture's shapes, in its tile of 480 px. */
+const VIVID_SHAPES = svgImage(480, 480, '<circle cx="96" cy="104" r="64" fill="#ffd60a"/>' +
+    '<circle cx="372" cy="336" r="88" fill="#22d3ee"/>' +
+    '<rect x="248" y="56" width="176" height="56" rx="28" fill="#ffffff" fill-opacity="0.85"/>' +
+    '<rect x="40" y="300" width="56" height="140" rx="12" fill="#34d399"/>' +
+    '<path d="M150 240 L330 240 L240 420 Z" fill="#ff4d8d"/>' +
+    '<g stroke="#111827" stroke-width="10" stroke-opacity="0.55">' +
+    '<line x1="300" y1="160" x2="460" y2="160"/><line x1="300" y1="190" x2="460" y2="190"/>' +
+    '<line x1="300" y1="220" x2="460" y2="220"/></g>');
+/**
+ * The vivid picture: crisp circles, bars and stripes on a saturated gradient, the shapes repeated every 480 px, so a
+ * surface's blur shows on sharp edges wherever it sits.
+ */
+const GRADIENT = `${VIVID_SHAPES} 0 0 / 480px 480px repeat, linear-gradient(135deg, #5b21b6 0%, #db2777 55%, #f97316 100%)`;
+/**
+ * Rolling hills under a sky, the shape of a desktop picture.
+ *
+ * @param colors - the sky's two colours, top and bottom, a glow's colour, and the three hills', back to front.
+ */
+const hills = (colors) => svgImage(1600, 1000, '<defs><linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">' +
+    `<stop offset="0" stop-color="${colors.skyTop}"/><stop offset="1" stop-color="${colors.skyBottom}"/>` +
+    '</linearGradient><radialGradient id="glow" cx="0.72" cy="0.3" r="0.4">' +
+    `<stop offset="0" stop-color="${colors.glow}" stop-opacity="0.9"/>` +
+    `<stop offset="1" stop-color="${colors.glow}" stop-opacity="0"/></radialGradient></defs>` +
+    '<rect width="1600" height="1000" fill="url(#sky)"/>' +
+    '<rect width="1600" height="1000" fill="url(#glow)"/>' +
+    `<path d="M0 560 C260 470 520 640 820 560 S1360 430 1600 520 L1600 1000 L0 1000 Z" fill="${colors.hills[0]}"/>` +
+    `<path d="M0 700 C320 600 640 780 960 690 S1420 600 1600 660 L1600 1000 L0 1000 Z" fill="${colors.hills[1]}"/>` +
+    `<path d="M0 840 C360 760 700 900 1040 830 S1460 760 1600 800 L1600 1000 L0 1000 Z" fill="${colors.hills[2]}"/>`);
+/** The light desktop: pale hills under a morning sky. */
+const LIGHT_DESKTOP = `${hills({
+    skyTop: "#cfe0fa",
+    skyBottom: "#f8e6ee",
+    glow: "#fff4d6",
+    hills: ["#b7cdf0", "#e8b9cf", "#9fc9b4"]
+})} center / cover no-repeat`;
+/** The dark desktop: deep hills under a night sky with a violet glow. */
+const DARK_DESKTOP = `${hills({
+    skyTop: "#070b1a",
+    skyBottom: "#1d1547",
+    glow: "#7c3aed",
+    hills: ["#23306b", "#3b2a7a", "#0f3a55"]
+})} center / cover no-repeat`;
+/** A paragraph of the page, one line per entry: SVG text does not wrap. */
+const PARAGRAPH = [
+    "Start the tomatoes indoors six weeks before the last frost, then move",
+    "them out once the nights stay warm. Keep the herbs near the kitchen",
+    "door, where they are easy to reach, and the squash at the far end."
+];
+/** The rows of the page: a title, a line under it, a value at the end. */
+const ROWS = [
+    ["Seed trays", "Delivered on Tuesday", "12"],
+    ["Watering schedule", "Every other morning", "3 zones"],
+    ["Compost bins", "Turned last week", "2"],
+    ["Tool shed", "Needs a new hinge", "1 task"]
+];
+/** The font of the page's text: the system's, the only one a picture drawn as an image can use. */
+const PAGE_FONT = "system-ui, -apple-system, Segoe UI, sans-serif";
+/**
+ * A page of content as an app shows it, in a tile of 720 × 600 px repeated: a heading, a paragraph, a coloured
+ * picture and a list of rows.
+ *
+ * @param palette - the theme's colours.
+ */
+const contentPage = (palette) => {
+    const paragraph = PARAGRAPH.map((line, index) => `<text x="40" y="${104 + index * 24}" font-size="15" fill="${palette.text}">${xmlText(line)}</text>`).join("");
+    const rows = ROWS.map(([title, detail, value], index) => {
+        const top = 312 + index * 68;
+        const icon = palette.icons[index] ?? palette.secondary;
+        return (`<rect x="40" y="${top + 12}" width="36" height="36" rx="8" fill="${icon}"/>` +
+            `<text x="92" y="${top + 27}" font-size="15" font-weight="600" fill="${palette.text}">${xmlText(title)}</text>` +
+            `<text x="92" y="${top + 47}" font-size="13" fill="${palette.secondary}">${xmlText(detail)}</text>` +
+            `<text x="680" y="${top + 36}" font-size="14" text-anchor="end" fill="${palette.secondary}">` +
+            `${xmlText(value)}</text>` +
+            `<line x1="40" y1="${top + 64}" x2="680" y2="${top + 64}" stroke="${palette.divider}"/>`);
+    }).join("");
+    return `${svgImage(720, 600, `<rect width="720" height="600" fill="${palette.page}"/>` +
+        `<g font-family="${PAGE_FONT}">` +
+        `<text x="40" y="64" font-size="26" font-weight="700" fill="${palette.text}">Spring garden plan</text>` +
+        paragraph +
+        '<defs><linearGradient id="picture" x1="0" y1="0" x2="1" y2="1">' +
+        '<stop offset="0" stop-color="#4f7cff"/><stop offset="0.5" stop-color="#a855f7"/>' +
+        '<stop offset="1" stop-color="#f97316"/></linearGradient></defs>' +
+        '<rect x="40" y="184" width="640" height="104" rx="12" fill="url(#picture)"/>' +
+        '<circle cx="600" cy="236" r="30" fill="#ffd60a"/>' +
+        rows +
+        "</g>")} 0 0 / 720px 600px repeat`;
+};
+/** The page of content, in both schemes, on the page's colour for each. */
+const CONTENT = {
+    light: contentPage({
+        page: BUILT_IN_COLORS.content.light,
+        text: "#1f2328",
+        secondary: "#656d76",
+        divider: "#d8dee4",
+        icons: ["#4f7cff", "#22c55e", "#f59e0b", "#ec4899"]
+    }),
+    dark: contentPage({
+        page: BUILT_IN_COLORS.content.dark,
+        text: "#e6e8eb",
+        secondary: "#9aa1ab",
+        divider: "#2d3139",
+        icons: ["#6b8cff", "#34d399", "#fbbf24", "#f472b6"]
+    })
+};
+/** The layers of each of Forgebook's pictures, in each scheme. */
+export const BUILT_IN_PICTURES = {
+    checkerboard: fixed(CHECKERBOARD),
+    gradient: fixed(GRADIENT),
+    lightDesktop: fixed(LIGHT_DESKTOP),
+    darkDesktop: fixed(DARK_DESKTOP),
+    content: CONTENT
+};
+/**
+ * A `body` rule that draws a backdrop's layers on its colour over whatever background the source's sheets set.
+ *
+ * @param layers - the layers.
+ * @param color - the colour under them.
+ */
+const bodyRule = (layers, color) => `body { background: ${layers}, ${color} !important; }`;
+/**
+ * The style sheet that draws a backdrop behind a frame's story.
+ *
+ * @remarks
+ * The rule sits on `body`, where the sources set their page colour, and wins over it with `!important`, so the
+ * story's own elements keep every colour they set. The dark look follows the scheme the view draws in (its colour
+ * scheme switch's, `switches.ts`), the system's preference for `system`; with forced colours the sheet draws nothing.
+ *
+ * @param backdrop - the backdrop; none for the page's own colour.
+ * @param scheme - the scheme the story is drawn in.
+ * @returns the CSS; empty for the page's own colour.
+ */
+export const backdropSheet = (backdrop, scheme) => {
+    if (backdrop === undefined)
+        return "";
+    const layers = backdrop.kind === "own" ? backdrop.layers : BUILT_IN_PICTURES[backdrop.id];
+    const light = bodyRule(layers.light, backdrop.colors.light);
+    const dark = bodyRule(layers.dark, backdrop.colors.dark);
+    if (light === dark || scheme === "light")
+        return `@media (forced-colors: none) { ${light} }`;
+    if (scheme === "dark")
+        return `@media (forced-colors: none) { ${dark} }`;
+    return [
+        `@media (forced-colors: none) { ${light} }`,
+        `@media (forced-colors: none) and (prefers-color-scheme: dark) { ${dark} }`
+    ].join("\n");
+};

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

@@ -3,7 +3,9 @@
  * dialog on `body`), with the rules the generated tests use.
  *
  * @remarks
- * axe is loaded only when the card asks: a frame that is never checked never downloads it.
+ * axe is loaded only when the card asks: a frame that is never checked never downloads it. It is loaded as a script,
+ * from the address the generated page gives (`axeScript.ts`), so it passes neither through Vite's pre-bundling nor
+ * through a build's minifier; a build keeps it gzipped (`.bin`), and the frame unpacks it.
  *
  * @module
  */
@@ -14,7 +16,8 @@ import type { A11ySettings } from "../catalogue.ts";
  *
  * @param document - the frame's document.
  * @param rules - the catalogue's accessibility rules: its tags and the rules it turns off.
+ * @param axeUrl - the address of axe's script, which the generated page gives; none for a page written by hand that
+ *   gives none, which cannot be checked.
  * @returns each broken rule with the elements that break it.
  */
-export declare const checkStory: (document: Document, rules: A11ySettings) => Promise<Violation[]>;
-//# sourceMappingURL=checkStory.d.ts.map
+export declare const checkStory: (document: Document, rules: A11ySettings, axeUrl: string | undefined) => Promise<Violation[]>;

package/dist/src/frame/checkStory.js

@@ -3,20 +3,92 @@
  * dialog on `body`), with the rules the generated tests use.
  *
  * @remarks
- * axe is loaded only when the card asks: a frame that is never checked never downloads it.
+ * axe is loaded only when the card asks: a frame that is never checked never downloads it. It is loaded as a script,
+ * from the address the generated page gives (`axeScript.ts`), so it passes neither through Vite's pre-bundling nor
+ * through a build's minifier; a build keeps it gzipped (`.bin`), and the frame unpacks it.
  *
  * @module
  */
+import { unpackedScript } from "../packedText.js";
+/**
+ * Whether a value is axe: the global its script sets.
+ *
+ * @param value - the window's `axe`.
+ */
+const isAxe = (value) => typeof value === "object" && value !== null && "run" in value && typeof value.run === "function";
+/**
+ * The address a script element can load: the script's own, or a build's gzipped copy, unpacked into a blob.
+ *
+ * @param axeUrl - the script's address.
+ */
+const scriptAddress = async (axeUrl) => new URL(axeUrl, document.baseURI).pathname.endsWith(".bin") ? unpackedScript(axeUrl) : axeUrl;
+/**
+ * Adds axe's script to the frame and waits for it to run.
+ *
+ * @param document - the frame's document.
+ * @param axeUrl - the script's address.
+ */
+const addScript = async (document, axeUrl) => {
+    const address = await scriptAddress(axeUrl);
+    try {
+        await new Promise((resolve, reject) => {
+            const script = document.createElement("script");
+            script.src = address;
+            script.onload = resolve;
+            // a build's copy runs from a blob, which a page's Content-Security-Policy may not allow
+            script.onerror = () => reject(new Error(address === axeUrl
+                ? `${axeUrl} could not be loaded`
+                : `${axeUrl} could not run: does a Content-Security-Policy leave out blob: from script-src?`));
+            document.head.append(script);
+        });
+    }
+    finally {
+        if (address !== axeUrl)
+            URL.revokeObjectURL(address);
+    }
+};
+/** The script being added to each frame's window: a second check while it loads waits for the same one. */
+const loading = new WeakMap();
+/**
+ * axe, from its script: added to the frame once, then read from the window.
+ *
+ * @param document - the frame's document.
+ * @param axeUrl - the script's address.
+ */
+const loadAxe = async (document, axeUrl) => {
+    const view = document.defaultView;
+    if (view === null)
+        throw new Error("The frame's document has no window to check");
+    const known = Reflect.get(view, "axe");
+    if (isAxe(known))
+        return known;
+    const added = loading.get(view) ?? addScript(document, axeUrl);
+    loading.set(view, added);
+    try {
+        await added;
+    }
+    finally {
+        loading.delete(view);
+    }
+    const loaded = Reflect.get(view, "axe");
+    if (!isAxe(loaded))
+        throw new Error(`${axeUrl} did not set axe`);
+    return loaded;
+};
 /**
  * The rules the document breaks now.
  *
  * @param document - the frame's document.
  * @param rules - the catalogue's accessibility rules: its tags and the rules it turns off.
+ * @param axeUrl - the address of axe's script, which the generated page gives; none for a page written by hand that
+ *   gives none, which cannot be checked.
  * @returns each broken rule with the elements that break it.
  */
-export const checkStory = async (document, rules) => {
-    const { default: axe } = await import("axe-core");
-    const results = await axe.run(document, {
+export const checkStory = async (document, rules, axeUrl) => {
+    if (axeUrl === undefined)
+        throw new Error("This frame was mounted without `axeUrl`, the address of axe's script");
+    const checker = await loadAxe(document, axeUrl);
+    const results = await checker.run(document, {
         runOnly: { type: "tag", values: [...rules.tags] },
         rules: Object.fromEntries(rules.disabledRules.map((rule) => [rule, { enabled: false }]))
     });
@@ -28,4 +100,3 @@ export const checkStory = async (document, rules) => {
         targets: violation.nodes.map((node) => node.target.map(String).join(" "))
     }));
 };
-//# sourceMappingURL=checkStory.js.map

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

@@ -0,0 +1,9 @@
+/**
+ * Follows the attribute from now on.
+ *
+ * @param document - the frame's document.
+ * @param onError - told when the simulation's module cannot load after the start, as the attribute changes.
+ * @returns a promise that settles once the simulation runs, when the attribute is already set; it rejects when the
+ * simulation's module cannot load then.
+ */
+export declare const followTouch: (document: Document, onError: (message: string) => void) => Promise<void>;

package/dist/src/frame/followTouch.js

@@ -0,0 +1,43 @@
+/**
+ * Follows the root's touch attribute: the simulation (`touchLayer.ts`) runs while it is set, and loads the first time
+ * it is, since a story's page without the Touch switch never uses it.
+ *
+ * @module
+ */
+import { isRealTouchWindow } from "../realTouch.js";
+/** The root's attribute that turns the simulation on. */
+const TOUCH_ATTRIBUTE = "data-forgebook-touch";
+/**
+ * Follows the attribute from now on.
+ *
+ * @param document - the frame's document.
+ * @param onError - told when the simulation's module cannot load after the start, as the attribute changes.
+ * @returns a promise that settles once the simulation runs, when the attribute is already set; it rejects when the
+ * simulation's module cannot load then.
+ */
+export const followTouch = async (document, onError) => {
+    let stop;
+    // in Chromium's real touch window the pages see real touch: simulating it on top would send every touch twice
+    const view = document.defaultView;
+    if (view !== null && isRealTouchWindow(view))
+        return;
+    const isOn = () => document.documentElement.hasAttribute(TOUCH_ATTRIBUTE);
+    const update = async () => {
+        if (isOn() && stop === undefined) {
+            const { startTouch } = await import("./touchLayer.js");
+            // the attribute may have gone, or another change started it, while the module loaded
+            if (isOn() && stop === undefined)
+                stop = startTouch(document);
+        }
+        else if (!isOn() && stop !== undefined) {
+            stop();
+            stop = undefined;
+        }
+    };
+    new MutationObserver(() => {
+        update().catch((error) => onError(error instanceof Error ? error.message : String(error)));
+    }).observe(document.documentElement, {
+        attributeFilter: [TOUCH_ATTRIBUTE]
+    });
+    await update();
+};

package/dist/src/frame/frame.css

@@ -1,5 +1,10 @@
 @layer catalogue {
   :root {
+    --forgebook-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
+    --forgebook-font-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
+    --forgebook-radius-control-small: 6px;
+    --forgebook-radius-control: 7px;
+    --forgebook-radius-card: 12px;
     --forgebook-window: #f6f6f8;
     --forgebook-sidebar: #ebebef;
     --forgebook-surface: #fff;
@@ -54,7 +59,7 @@
   .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;
+    font: 400 0.6875rem/1.6 var(--forgebook-font-mono);
     text-align: start;
     white-space: nowrap;
     opacity: 0.7;
@@ -65,7 +70,7 @@
   }
   .forgebook-frame-error {
     margin: 1.5rem;
-    font: 400 0.8125rem/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
+    font: 400 0.8125rem/1.4 var(--forgebook-font-sans);
     color: var(--forgebook-danger-text);
   }
   .forgebook-frame-error__message {
@@ -75,7 +80,7 @@
   .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;
+    font: 400 0.6875rem/1.6 var(--forgebook-font-mono);
     color: var(--forgebook-text-secondary);
     white-space: pre;
   }

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

@@ -50,4 +50,3 @@ export declare const storyFrameClock: (clockStart: number | undefined, isHeld: b
  * @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.js

@@ -77,4 +77,3 @@ export const storyFrameClock = (clockStart, isHeld) => {
  * @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/frameStatus.d.ts

@@ -5,4 +5,5 @@
  */
 /** `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
+/** The root's attribute set once the frame's code runs; the page's guard against code that fails earlier reads it. */
+export declare const FRAME_STARTED_ATTRIBUTE = "data-forgebook-started";

package/dist/src/frame/frameStatus.js

@@ -5,4 +5,5 @@
  */
 /** `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
+/** The root's attribute set once the frame's code runs; the page's guard against code that fails earlier reads it. */
+export const FRAME_STARTED_ATTRIBUTE = "data-forgebook-started";

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

@@ -30,4 +30,3 @@ export declare const viewSheets: (sheets: StorySheets, view: ViewState) => strin
  * @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.js

@@ -4,9 +4,9 @@
  *
  * @module
  */
-import { backdropSheet } from "../backdrops.js";
 import { switchValueOf, switchWithRole } from "../switches.js";
 import { schemeOf } from "../viewState.js";
+import { backdropSheet } from "./backdropPictures.js";
 /** The id of the style sheet that draws the backdrop. */
 const BACKDROP_STYLE_ID = "forgebook-backdrop-style";
 /**
@@ -140,4 +140,3 @@ export const loadSheets = async (document, urls) => {
         document.head.append(link);
     })));
 };
-//# sourceMappingURL=frameView.js.map

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

@@ -33,4 +33,3 @@ export type MatrixLayout = {
  * @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.js

@@ -84,4 +84,3 @@ export const matrixLayout = (document, story, matrix) => {
     root.append(table);
     return { element: root, cells };
 };
-//# sourceMappingURL=matrixLayout.js.map

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

@@ -21,4 +21,3 @@ import type { MeasureTool } from "../viewState.ts";
  * @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.js

@@ -138,4 +138,3 @@ export const applyTools = (document, tools, gridStep = 8) => {
         document.removeEventListener("pointerleave", hide);
     };
 };
-//# sourceMappingURL=measureTools.js.map

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

@@ -14,15 +14,19 @@
 import "./frame.scss";
 import type { StoryLanguage, StorySource } from "@forgebook/story-format/source";
 import { type CatalogueLists } from "../catalogue.ts";
+import { type FramesPlacement } from "../frameOrigins.ts";
 import { type ViewSwitch } from "../switches.ts";
 import type { PlayToolsLoader } from "./playStory.ts";
-import type { StoryRenderer } from "./renderer.ts";
+import { type FramePlugin } from "./pluginFrames.ts";
+import type { FrameRenderer } from "./renderer.ts";
 /** What an app passes to the frame. */
 export type FrameConfig = {
     /** The framework that draws the stories (`@forgebook/react` passes its own). */
-    readonly renderer: StoryRenderer;
+    readonly renderer: FrameRenderer;
     /** The sources the shell shows, in the same order. */
     readonly sources: readonly StorySource[];
+    /** The address of axe's script, for the Accessibility card; the generated page gives it. */
+    readonly axeUrl?: string;
     /** The languages every story can be drawn in, as the shell's configuration gives them; none turns them off. */
     readonly languages?: readonly StoryLanguage[];
     /**
@@ -36,6 +40,10 @@ export type FrameConfig = {
     readonly lists?: CatalogueLists;
     /** Loads the play tools, when the project installs Testing Library (the generated frame passes it then). */
     readonly playTools?: PlayToolsLoader;
+    /** The plugins with a frame module (the generated frame passes them); none by default. */
+    readonly plugins?: readonly FramePlugin[];
+    /** Where the frames run, so the frame hears only its shell: on the catalogue's own origin by default. */
+    readonly frames?: FramesPlacement;
 };
 /**
  * Shows the story the address names in the given element.
@@ -44,4 +52,3 @@ export type FrameConfig = {
  * @param config - the sources.
  */
 export declare const mountFrame: (container: HTMLElement, config: FrameConfig) => Promise<void>;
-//# sourceMappingURL=mountFrame.d.ts.map