forgebook 0.1.8 → 0.2.0

package/dist/src/addressArgs.js

@@ -0,0 +1,109 @@
+import { panelProps, settableProps } from "./argTypes.js";
+import { isChoiceList, isNamedArg } from "./messages.js";
+import { namedValueOf } from "./namedValues.js";
+/** A prop made from one of the story's own args, for an arg neither the types nor the `argTypes` name. */
+const propOfStoryArg = (name, value) => {
+    const prop = { name, type: "", description: "", isRequired: false };
+    if (typeof value === "string")
+        return { ...prop, kind: "text" };
+    if (typeof value === "number")
+        return { ...prop, kind: "number" };
+    if (typeof value === "boolean")
+        return { ...prop, kind: "toggle" };
+    // a named value keeps the type it is offered for, so only another value named for it is taken
+    if (isNamedArg(value))
+        return { ...prop, kind: "other", type: value.of };
+    // a list's options and a `null`'s type are not known: nothing the address names is taken for them
+    return undefined;
+};
+/**
+ * The props the panel sets for a story, whatever the address says: the component's props with the `argTypes` over
+ * them and the args only the `argTypes` name, then the story's own args the two leave out, each kept only when the
+ * story's controls let the panel set it.
+ *
+ * @param declaration - what the story declares.
+ */
+export const declaredArgProps = (declaration) => {
+    const { props, argTypes, controls, storyArgs, namedValues } = declaration;
+    const named = new Set([...props.map((prop) => prop.name), ...Object.keys(argTypes)]);
+    const ownProps = Object.entries(storyArgs).flatMap(([name, value]) => {
+        if (named.has(name))
+            return [];
+        const prop = propOfStoryArg(name, value);
+        return prop === undefined ? [] : [prop];
+    });
+    return settableProps([...panelProps(props, argTypes), ...ownProps], controls, namedValues);
+};
+/** Whether a value is a finite number: what a number field sets (an address's JSON has no `NaN` anyway). */
+const isFiniteNumber = (value) => typeof value === "number" && Number.isFinite(value);
+/** Whether a value is one of a choice's options. */
+const isOption = (prop, value) => (typeof value === "string" || typeof value === "number") && (prop.choices ?? []).includes(value);
+/**
+ * Whether a value is one the panel could set for a prop: of the control the `argTypes` name, otherwise of the prop's
+ * kind.
+ *
+ * @param prop - a prop the panel sets.
+ * @param value - the address's value.
+ * @param namedValues - the source's named values.
+ */
+export const isValueOfProp = (prop, value, namedValues) => {
+    switch (prop.control) {
+        case "select":
+        case "radio":
+            return isOption(prop, value);
+        case "check":
+        case "multi-select":
+            return isChoiceList(value) && value.every((item) => isOption(prop, item));
+        case "boolean":
+            return typeof value === "boolean";
+        case "text":
+        case "color":
+            return typeof value === "string";
+        case "number":
+        case "range":
+        case "date":
+            return isFiniteNumber(value);
+        case "none":
+            return false;
+        case undefined:
+            break;
+    }
+    switch (prop.kind) {
+        case "choice":
+            return isOption(prop, value);
+        case "text":
+            return typeof value === "string";
+        case "number":
+            return isFiniteNumber(value);
+        case "toggle":
+            return typeof value === "boolean";
+        case "other":
+            if (isNamedArg(value)) {
+                return value.of === prop.type && namedValueOf(namedValues, value.of, value.named) !== undefined;
+            }
+            return prop.canTakeText === true && typeof value === "string";
+        case "event":
+            return false;
+    }
+};
+/**
+ * The address's values the story receives, and those left out with the reason.
+ *
+ * @param args - the values the address names.
+ * @param declaration - what the story declares.
+ */
+export const checkedAddressArgs = (args, declaration) => {
+    const declared = declaredArgProps(declaration);
+    const accepted = [];
+    const dropped = [];
+    for (const [name, value] of Object.entries(args)) {
+        const prop = declared.find((each) => each.name === name);
+        if (prop === undefined)
+            dropped.push({ name, reason: "undeclared" });
+        else if (!isValueOfProp(prop, value, declaration.namedValues))
+            dropped.push({ name, reason: "type" });
+        else
+            accepted.push([name, value]);
+    }
+    return { accepted: Object.fromEntries(accepted), dropped };
+};

package/dist/src/addressTexts.d.ts

@@ -0,0 +1,35 @@
+/**
+ * The texts a catalogue's address may hand a story whose framework writes texts into markup: plain words only.
+ *
+ * @remarks
+ * A link shares the props panel's values in its address (`?args=`), so whoever writes the link chooses them, and the
+ * frame runs on the catalogue's own origin. React and Vue put a text into the page as text; a plain HTML story
+ * writes it into an HTML string (`<button class="${tone}">${label}</button>` in a template literal), where `<`, a
+ * quote or a `javascript:` address becomes markup or code. So for a framework that says its texts may become markup
+ * (`FrameworkAdapter.addressTexts`), a value the address carries reaches the story only when its name and its texts
+ * are plain: letters and digits of any script, spaces and a few marks that close no tag, attribute or address. The
+ * panel's own edits are the person's and are not checked; a link, or a reload of an edit with markup, falls back to
+ * the story's own value, as Storybook's address does. Pure.
+ *
+ * @module
+ */
+import { type PanelArgs } from "./messages.ts";
+/**
+ * How a framework's stories take the texts an address carries: `any` where a text stays text (React, Vue), `plain`
+ * where a story may write it into markup (an HTML string).
+ */
+export type AddressTexts = "any" | "plain";
+/**
+ * Whether a text can become nothing but text wherever an HTML string puts it: between tags, inside a quoted or bare
+ * attribute, as an address.
+ *
+ * @param text - the text.
+ */
+export declare const isPlainText: (text: string) => boolean;
+/**
+ * The address's values a story receives under a framework's rule: all of them, or only those whose texts are plain.
+ *
+ * @param args - the values the address names.
+ * @param addressTexts - the framework's rule.
+ */
+export declare const addressArgsFor: (args: PanelArgs, addressTexts: AddressTexts) => PanelArgs;

package/dist/src/addressTexts.js

@@ -0,0 +1,51 @@
+/**
+ * The texts a catalogue's address may hand a story whose framework writes texts into markup: plain words only.
+ *
+ * @remarks
+ * A link shares the props panel's values in its address (`?args=`), so whoever writes the link chooses them, and the
+ * frame runs on the catalogue's own origin. React and Vue put a text into the page as text; a plain HTML story
+ * writes it into an HTML string (`<button class="${tone}">${label}</button>` in a template literal), where `<`, a
+ * quote or a `javascript:` address becomes markup or code. So for a framework that says its texts may become markup
+ * (`FrameworkAdapter.addressTexts`), a value the address carries reaches the story only when its name and its texts
+ * are plain: letters and digits of any script, spaces and a few marks that close no tag, attribute or address. The
+ * panel's own edits are the person's and are not checked; a link, or a reload of an edit with markup, falls back to
+ * the story's own value, as Storybook's address does. Pure.
+ *
+ * @module
+ */
+import { isNamedArg } from "./messages.js";
+/** A plain text: letters, marks and digits of any script, spaces, and `_ . , ! ? # % + -`. */
+const PLAIN_TEXT = /^[\p{L}\p{M}\p{N} _.,!?#%+-]*$/u;
+/** A plain name: what a script and an attribute both write bare (`label`, `item-count`, `$size`). */
+const PLAIN_NAME = /^[A-Za-z_$][\w$-]*$/;
+/**
+ * Whether a text can become nothing but text wherever an HTML string puts it: between tags, inside a quoted or bare
+ * attribute, as an address.
+ *
+ * @param text - the text.
+ */
+export const isPlainText = (text) => PLAIN_TEXT.test(text);
+/**
+ * Whether an address's value can reach a story whose texts may become markup: every text in it plain. A named value is
+ * looked up among the source's own values, so its name is never written into the page.
+ *
+ * @param value - the value.
+ */
+const isPlainValue = (value) => {
+    if (typeof value === "string")
+        return isPlainText(value);
+    if (Array.isArray(value))
+        return value.every((item) => typeof item !== "string" || isPlainText(item));
+    return value === null || isNamedArg(value) || typeof value !== "object";
+};
+/**
+ * The address's values a story receives under a framework's rule: all of them, or only those whose texts are plain.
+ *
+ * @param args - the values the address names.
+ * @param addressTexts - the framework's rule.
+ */
+export const addressArgsFor = (args, addressTexts) => addressTexts === "any"
+    ? args
+    : Object.fromEntries(
+    // a name is checked too: a story that spreads its args into attributes writes it into the markup
+    Object.entries(args).filter(([name, value]) => PLAIN_NAME.test(name) && isPlainValue(value)));

package/dist/src/argTypes.d.ts

@@ -134,4 +134,3 @@ export declare const isPanelArgTypes: (value: unknown) => value is PanelArgTypes
  * @param argTypes - the merged `argTypes`.
  */
 export declare const actionNames: (args: Readonly<Record<string, unknown>>, argTypes: Readonly<Record<string, Readonly<Record<string, unknown>>>>) => readonly string[];
-//# sourceMappingURL=argTypes.d.ts.map

package/dist/src/argTypes.js

@@ -166,7 +166,8 @@ export const mappedArgs = (args, argTypes) => Object.fromEntries(Object.entries(
     if (!isRecord(mapping) || (typeof value !== "string" && typeof value !== "number"))
         return [name, value];
     const key = String(value);
-    return [name, key in mapping ? mapping[key] : value];
+    // the mapping's own keys only: a value a shared link chose (`constructor`) never reaches its prototype
+    return [name, Object.hasOwn(mapping, key) ? mapping[key] : value];
 }));
 /** The prop kind a control sets, for the panel's groups. */
 const KIND_OF_CONTROL = {
@@ -278,4 +279,3 @@ export const actionNames = (args, argTypes) => [
         ...Object.entries(argTypes).flatMap(([name, entry]) => typeof entry["action"] === "string" || entry["action"] === true ? [name] : [])
     ])
 ];
-//# sourceMappingURL=argTypes.js.map

package/dist/src/audiences.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Who a component's page is read by: the address's `audience` and a catalogue's default. Each audience is the same page
+ * reordered and filtered (`shell/audienceLayout.ts`), never a page of its own.
+ *
+ * @remarks
+ * `everyone` is the page as a catalogue that sets nothing has always drawn it. The list is short on purpose: each
+ * audience answers a different question of the page, and a catalogue renames one with `strings`. Pure, and read by the
+ * frame's `parseView` too, so it holds the ids and nothing else.
+ *
+ * @module
+ */
+/** Every audience, in the order the control lists them. */
+export declare const AUDIENCE_IDS: readonly ["everyone", "designer", "coder", "tester"];
+/** Who a component's page is read by. */
+export type AudienceId = (typeof AUDIENCE_IDS)[number];
+/** The audience of a catalogue that names none. */
+export declare const DEFAULT_AUDIENCE: AudienceId;

package/dist/src/audiences.js

@@ -0,0 +1,15 @@
+/**
+ * Who a component's page is read by: the address's `audience` and a catalogue's default. Each audience is the same page
+ * reordered and filtered (`shell/audienceLayout.ts`), never a page of its own.
+ *
+ * @remarks
+ * `everyone` is the page as a catalogue that sets nothing has always drawn it. The list is short on purpose: each
+ * audience answers a different question of the page, and a catalogue renames one with `strings`. Pure, and read by the
+ * frame's `parseView` too, so it holds the ids and nothing else.
+ *
+ * @module
+ */
+/** Every audience, in the order the control lists them. */
+export const AUDIENCE_IDS = ["everyone", "designer", "coder", "tester"];
+/** The audience of a catalogue that names none. */
+export const DEFAULT_AUDIENCE = "everyone";

package/dist/src/backdrops.d.ts

@@ -4,38 +4,49 @@
  * surface (a menu's or a popover's glass, its blur) does, which the page's plain colour hides.
  *
  * @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 frame turns the chosen backdrop into a style sheet of its
- * own (`backdropSheet`) that replaces the `body` background its source sets, so the story's own layout and colours
- * are unchanged; the shell reads the backdrop's colour (`backdropColor`) for the box a story waits in while it loads.
- * The desktop pictures are fixed whatever the theme; the page of content follows the theme, as an app's page would.
- * With forced colours nothing is drawn: the system's palette decides the page. Pure.
+ * What the shell needs of a backdrop lives here: its id, its name and the colour under its picture, which the box a
+ * story waits in takes while it loads (`backdropColor`). Forgebook's own pictures are drawn by the frame alone
+ * (`backdropPictures.ts`, with the style sheet that puts them behind the story), so the shell's first load carries
+ * none of them. The desktop pictures are fixed whatever the theme; the page of content follows the theme, as an app's
+ * page would. Pure.
  *
  * @module
  */
-/** A backdrop as CSS, for one colour scheme. */
-export type BackdropLook = {
-    /** The colour under the pictures, which the box of a loading story waits on. */
-    readonly color: string;
-    /** The picture's layers, as the `background` shorthand writes them (image, position, size, repeat), top first. */
-    readonly layers: string;
+/** A value for each colour scheme: the light one's and the dark one's, the same when it does not follow the theme. */
+export type SchemePair = {
+    /** The value in the light scheme. */
+    readonly light: string;
+    /** The value in the dark scheme. */
+    readonly dark: string;
 };
-/** A drawn backdrop: its look in a light and a dark theme, the same look when it does not follow the theme. */
-export type DrawnBackdrop = {
-    /** The look in the light theme. */
-    readonly light: BackdropLook;
-    /** The look in the dark theme. */
-    readonly dark: BackdropLook;
-};
-/** A backdrop the View menu offers: its id (the address's `backdrop`), its name, its look. */
-export type Backdrop = {
+/** The ids of the backdrops Forgebook draws, as the address writes them. */
+export type BuiltInBackdropId = "checkerboard" | "gradient" | "lightDesktop" | "darkDesktop" | "content";
+/** One of Forgebook's backdrops: the frame draws its picture (`backdropPictures.ts`). */
+export type BuiltInBackdrop = {
+    /** Forgebook's own. */
+    readonly kind: "builtIn";
     /** Its id, as the address writes it (`checkerboard`). */
+    readonly id: BuiltInBackdropId;
+    /** Its name in the View menu. */
+    readonly label: string;
+    /** The colour under its picture, in each scheme. */
+    readonly colors: SchemePair;
+};
+/** A catalogue's own backdrop: a colour and the CSS layers over it, in each scheme. */
+export type OwnBackdrop = {
+    /** The catalogue's. */
+    readonly kind: "own";
+    /** Its id, as the address writes it. */
     readonly id: string;
     /** Its name in the View menu. */
     readonly label: string;
-    /** Its look in each scheme. */
-    readonly drawn: DrawnBackdrop;
+    /** The colour under its layers, in each scheme. */
+    readonly colors: SchemePair;
+    /** Its layers, as the `background` shorthand writes them (image, position, size, repeat), top first; `none` for none. */
+    readonly layers: SchemePair;
 };
+/** A backdrop the View menu offers. */
+export type Backdrop = BuiltInBackdrop | OwnBackdrop;
 /**
  * A catalogue's own backdrop, as its configuration writes it: a colour and, optionally, CSS layers over it, for the
  * light scheme and, when it differs, the dark one.
@@ -56,14 +67,16 @@ export type CustomBackdrop = {
         readonly layers?: string;
     };
 };
+/** The colour under each of Forgebook's pictures: the page of content's follows the theme, the others' do not. */
+export declare const BUILT_IN_COLORS: Readonly<Record<BuiltInBackdropId, SchemePair>>;
 /** The backdrops Forgebook draws, in the View menu's order: every one but the page's own colour. */
-export declare const BUILT_IN_BACKDROPS: readonly Backdrop[];
+export declare const BUILT_IN_BACKDROPS: readonly BuiltInBackdrop[];
 /**
- * A catalogue's own backdrop, drawn as the built-in ones are.
+ * A catalogue's own backdrop, offered as the built-in ones are.
  *
  * @param custom - the backdrop as the configuration writes it.
  */
-export declare const customBackdrop: (custom: CustomBackdrop) => Backdrop;
+export declare const customBackdrop: (custom: CustomBackdrop) => OwnBackdrop;
 /**
  * The colour a backdrop is drawn on, which the box of a loading story waits on.
  *
@@ -72,17 +85,3 @@ export declare const customBackdrop: (custom: CustomBackdrop) => Backdrop;
  * @returns the CSS colour; none for the page's own colour.
  */
 export declare const backdropColor: (backdrop: Backdrop | undefined, isDark: boolean) => string | undefined;
-/**
- * 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;
-//# sourceMappingURL=backdrops.d.ts.map

package/dist/src/backdrops.js

@@ -1,167 +1,58 @@
 /**
- * A text written inside an SVG document, with the characters XML reserves escaped.
+ * The backdrops Forgebook draws behind a story in place of its page's colour: a checkerboard, a vivid
+ * abstract picture, a light and a dark desktop-like picture, a page of content, and a catalogue's own. They show what a translucent
+ * surface (a menu's or a popover's glass, its blur) does, which the page's plain colour hides.
  *
- * @param text - the text.
- */
-const xmlText = (text) => text.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;");
-/**
- * An SVG document as a CSS image.
+ * @remarks
+ * What the shell needs of a backdrop lives here: its id, its name and the colour under its picture, which the box a
+ * story waits in takes while it loads (`backdropColor`). Forgebook's own pictures are drawn by the frame alone
+ * (`backdropPictures.ts`, with the style sheet that puts them behind the story), so the shell's first load carries
+ * none of them. The desktop pictures are fixed whatever the theme; the page of content follows the theme, as an app's
+ * page would. Pure.
  *
- * @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 look in both themes: a backdrop that does not follow the theme. */
-const fixed = (look) => ({ light: look, dark: look });
-/** The checkerboard: grey and white squares of 8 px, the usual sign of a transparent picture. */
-const CHECKERBOARD = {
-    color: "#ffffff",
-    layers: "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.
+ * @module
  */
-const GRADIENT = {
-    color: "#7c3aed",
-    layers: `${VIVID_SHAPES} 0 0 / 480px 480px repeat, linear-gradient(135deg, #5b21b6 0%, #db2777 55%, #f97316 100%)`
+/** The colour under each of Forgebook's pictures: the page of content's follows the theme, the others' do not. */
+export const BUILT_IN_COLORS = {
+    checkerboard: { light: "#ffffff", dark: "#ffffff" },
+    gradient: { light: "#7c3aed", dark: "#7c3aed" },
+    lightDesktop: { light: "#e4ecf8", dark: "#e4ecf8" },
+    darkDesktop: { light: "#0d1226", dark: "#0d1226" },
+    content: { light: "#ffffff", dark: "#16181d" }
 };
 /**
- * Rolling hills under a sky, the shape of a desktop picture.
+ * One of Forgebook's backdrops.
  *
- * @param colors - the sky's two colours, top and bottom, a glow's colour, and the three hills', back to front.
+ * @param id - its id.
+ * @param label - its name in the View menu.
  */
-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 = {
-    color: "#e4ecf8",
-    layers: `${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 = {
-    color: "#0d1226",
-    layers: `${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 {
-        color: palette.page,
-        layers: `${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. */
-const CONTENT = {
-    light: contentPage({
-        page: "#ffffff",
-        text: "#1f2328",
-        secondary: "#656d76",
-        divider: "#d8dee4",
-        icons: ["#4f7cff", "#22c55e", "#f59e0b", "#ec4899"]
-    }),
-    dark: contentPage({
-        page: "#16181d",
-        text: "#e6e8eb",
-        secondary: "#9aa1ab",
-        divider: "#2d3139",
-        icons: ["#6b8cff", "#34d399", "#fbbf24", "#f472b6"]
-    })
-};
+const builtIn = (id, label) => ({
+    kind: "builtIn",
+    id,
+    label,
+    colors: BUILT_IN_COLORS[id]
+});
 /** The backdrops Forgebook draws, in the View menu's order: every one but the page's own colour. */
 export const BUILT_IN_BACKDROPS = [
-    { id: "checkerboard", label: "Checkerboard", drawn: fixed(CHECKERBOARD) },
-    { id: "gradient", label: "Vivid picture", drawn: fixed(GRADIENT) },
-    { id: "lightDesktop", label: "Light desktop", drawn: fixed(LIGHT_DESKTOP) },
-    { id: "darkDesktop", label: "Dark desktop", drawn: fixed(DARK_DESKTOP) },
-    { id: "content", label: "Page of content", drawn: CONTENT }
+    builtIn("checkerboard", "Checkerboard"),
+    builtIn("gradient", "Vivid picture"),
+    builtIn("lightDesktop", "Light desktop"),
+    builtIn("darkDesktop", "Dark desktop"),
+    builtIn("content", "Page of content")
 ];
 /**
- * A catalogue's own backdrop, drawn as the built-in ones are.
+ * A catalogue's own backdrop, offered as the built-in ones are.
  *
  * @param custom - the backdrop as the configuration writes it.
  */
 export const customBackdrop = (custom) => {
-    const look = (written) => ({
-        color: written.color,
-        layers: written.layers ?? "none"
-    });
+    const dark = custom.dark ?? custom.light;
     return {
+        kind: "own",
         id: custom.id,
         label: custom.label,
-        drawn: { light: look(custom.light), dark: look(custom.dark ?? custom.light) }
+        colors: { light: custom.light.color, dark: dark.color },
+        layers: { light: custom.light.layers ?? "none", dark: dark.layers ?? "none" }
     };
 };
 /**
@@ -171,32 +62,4 @@ export const customBackdrop = (custom) => {
  * @param isDark - whether the story is drawn in the dark scheme (a backdrop may follow it).
  * @returns the CSS colour; none for the page's own colour.
  */
-export const backdropColor = (backdrop, isDark) => backdrop === undefined ? undefined : (isDark ? backdrop.drawn.dark : backdrop.drawn.light).color;
-/** A `body` rule that draws a look over whatever background the source's sheets set. */
-const bodyRule = (selector, look) => `${selector} { background: ${look.layers}, ${look.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 { light, dark } = backdrop.drawn;
-    if (light === dark || scheme === "light")
-        return `@media (forced-colors: none) { ${bodyRule("body", light)} }`;
-    if (scheme === "dark")
-        return `@media (forced-colors: none) { ${bodyRule("body", dark)} }`;
-    return [
-        `@media (forced-colors: none) { ${bodyRule("body", light)} }`,
-        `@media (forced-colors: none) and (prefers-color-scheme: dark) { ${bodyRule("body", dark)} }`
-    ].join("\n");
-};
-//# sourceMappingURL=backdrops.js.map
+export const backdropColor = (backdrop, isDark) => backdrop?.colors[isDark ? "dark" : "light"];