forgebook 0.0.0-stage → 0.1.0

package/dist/src/backdrops.js

@@ -0,0 +1,202 @@
+/**
+ * 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 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.
+ */
+const GRADIENT = {
+    color: "#7c3aed",
+    layers: `${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 = {
+    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"]
+    })
+};
+/** 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 }
+];
+/**
+ * A catalogue's own backdrop, drawn 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"
+    });
+    return {
+        id: custom.id,
+        label: custom.label,
+        drawn: { light: look(custom.light), dark: look(custom.dark ?? custom.light) }
+    };
+};
+/**
+ * The colour a backdrop is drawn on, which the box of a loading story waits on.
+ *
+ * @param backdrop - the backdrop; none for the page's own colour.
+ * @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

package/dist/src/backdrops.js.map

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

package/dist/src/catalogue.d.ts

@@ -0,0 +1,120 @@
+/**
+ * The lists a catalogue sets besides its switches (its widths, zoom steps, text sizes, backgrounds, story groups,
+ * panel tabs, accessibility rules, grid step, storage name and shell texts), as its configuration writes them, and
+ * as the shell and the frame read them, today's defaults filled in.
+ *
+ * @remarks
+ * Every list is optional: a catalogue that sets none looks as Forgebook always did. 100 % stays a zoom step and a text
+ * size, since it is the view without change. A preset may give any list; the catalogue's own wins (`configFile.ts`).
+ * Pure.
+ *
+ * @module
+ */
+import { type Backdrop, type CustomBackdrop } from "./backdrops.ts";
+import type { ViewSwitch } from "./switches.ts";
+/** A preset width of the toolbar. */
+export type StageWidthPreset = {
+    /** The width, in CSS px. */
+    readonly width: number;
+    /** Its name in the toolbar; the number by default. */
+    readonly label?: string;
+};
+/** A group of stories in the sidebar, as a catalogue names it. */
+export type StoryGroupSetting = {
+    /** The group's id, as a story's `parameters.group` writes it (`states`). */
+    readonly id: string;
+    /** Its heading in the sidebar (`States`). */
+    readonly label: string;
+};
+/** The tabs of the panel under a story. */
+export declare const PANEL_TAB_IDS: readonly ["props", "events", "play", "parts", "code", "a11y"];
+/** A tab of the panel under a story. */
+export type PanelTabId = (typeof PANEL_TAB_IDS)[number];
+/** The accessibility rules the Accessibility tab and the generated tests check. */
+export type A11ySettings = {
+    /** The axe tags whose rules apply. */
+    readonly tags: readonly string[];
+    /** Rules turned off by id (`color-contrast`). */
+    readonly disabledRules: readonly string[];
+};
+/** The lists a configuration may set, every one optional. */
+export type CatalogueLists = {
+    /** The catalogue's id, the prefix of what the browser stores for it; from its title by default. */
+    readonly id?: string;
+    /** The toolbar's preset widths. */
+    readonly widths?: readonly StageWidthPreset[];
+    /** The narrowest and widest a story may be set, in CSS px. */
+    readonly widthRange?: {
+        readonly min: number;
+        readonly max: number;
+    };
+    /** The zoom steps, in percent; 100 among them. */
+    readonly zooms?: readonly number[];
+    /** The text sizes, in percent of the browser's; 100 among them. */
+    readonly textSizes?: readonly number[];
+    /** The backgrounds: which built-in ones (`false` for none) and the catalogue's own. */
+    readonly backgrounds?: {
+        /** The built-in backgrounds offered, by id, or none; all of them by default. */
+        readonly builtIn?: false | readonly string[];
+        /** The catalogue's own, after the built-in ones. */
+        readonly custom?: readonly CustomBackdrop[];
+    };
+    /** The story groups, in the sidebar's order, with their headings. */
+    readonly storyGroups?: readonly StoryGroupSetting[];
+    /** The panel's tabs turned off (`{ a11y: false }`). */
+    readonly tabs?: Readonly<Partial<Record<PanelTabId, false>>>;
+    /** The accessibility rules. */
+    readonly a11y?: Partial<A11ySettings>;
+    /** The measuring grid's step, in CSS px. */
+    readonly gridStep?: number;
+    /** Texts of the shell replaced, by their name in `STRINGS` (a translation, another word). */
+    readonly strings?: Readonly<Record<string, string>>;
+};
+/** A catalogue's lists with the defaults filled in, and its switches: what the shell and the frame read. */
+export type CatalogueSettings = {
+    /** The prefix of what the browser stores for the catalogue. */
+    readonly id: string;
+    /** The switches of the toolbar and the View menu. */
+    readonly switches: readonly ViewSwitch[];
+    /** The toolbar's preset widths. */
+    readonly widths: readonly StageWidthPreset[];
+    /** The narrowest and widest a story may be set, in CSS px. */
+    readonly widthRange: {
+        readonly min: number;
+        readonly max: number;
+    };
+    /** The zoom steps, in percent. */
+    readonly zooms: readonly number[];
+    /** The text sizes, in percent. */
+    readonly textSizes: readonly number[];
+    /** The backgrounds the View menu offers besides the page's own colour. */
+    readonly backdrops: readonly Backdrop[];
+    /** The named story groups, in their order. */
+    readonly storyGroups: readonly StoryGroupSetting[];
+    /** The panel's tabs shown, in their order. */
+    readonly tabs: readonly PanelTabId[];
+    /** The accessibility rules. */
+    readonly a11y: A11ySettings;
+    /** The measuring grid's step, in CSS px. */
+    readonly gridStep: number;
+    /** The shell's texts replaced, by name. */
+    readonly strings: Readonly<Record<string, string>>;
+};
+/** WCAG 2.2 at levels A and AA: the rules every story passes by default. */
+export declare const DEFAULT_A11Y_TAGS: readonly string[];
+/**
+ * A catalogue's settings, its lists' defaults filled in.
+ *
+ * @param title - the catalogue's title, for its storage's id.
+ * @param switches - its switches.
+ * @param lists - the lists its configuration sets.
+ */
+export declare const catalogueSettings: (title: string, switches: readonly ViewSwitch[], lists?: CatalogueLists) => CatalogueSettings;
+/**
+ * A story group's heading: the catalogue's name for it, or its id when it names none.
+ *
+ * @param groups - the catalogue's named groups.
+ * @param id - the group's id.
+ */
+export declare const groupLabel: (groups: readonly StoryGroupSetting[], id: string) => string;
+//# sourceMappingURL=catalogue.d.ts.map

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

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

package/dist/src/catalogue.js

@@ -0,0 +1,80 @@
+/**
+ * The lists a catalogue sets besides its switches (its widths, zoom steps, text sizes, backgrounds, story groups,
+ * panel tabs, accessibility rules, grid step, storage name and shell texts), as its configuration writes them, and
+ * as the shell and the frame read them, today's defaults filled in.
+ *
+ * @remarks
+ * Every list is optional: a catalogue that sets none looks as Forgebook always did. 100 % stays a zoom step and a text
+ * size, since it is the view without change. A preset may give any list; the catalogue's own wins (`configFile.ts`).
+ * Pure.
+ *
+ * @module
+ */
+import { BUILT_IN_BACKDROPS, customBackdrop } from "./backdrops.js";
+/** The tabs of the panel under a story. */
+export const PANEL_TAB_IDS = ["props", "events", "play", "parts", "code", "a11y"];
+/** WCAG 2.2 at levels A and AA: the rules every story passes by default. */
+export const DEFAULT_A11Y_TAGS = ["wcag2a", "wcag2aa", "wcag21a", "wcag21aa", "wcag22aa"];
+/** The toolbar's widths by default: a phone, the stage beside the props panel (the tests' narrow variant), a tablet, a laptop. */
+const DEFAULT_WIDTHS = [
+    { width: 360 },
+    { width: 560 },
+    { width: 768 },
+    { width: 1024 }
+];
+/**
+ * An id for the browser's storage from a catalogue's title: lower case, words joined by hyphens.
+ *
+ * @param title - the title.
+ */
+const idOf = (title) => title
+    .toLowerCase()
+    .normalize("NFKD")
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-|-$/g, "") || "catalogue";
+/**
+ * A list of percents with 100 in it, in order: the configured one when it has 100, the default otherwise.
+ *
+ * @param list - the configured list.
+ * @param fallback - the default.
+ */
+const withHundred = (list, fallback) => list?.includes(100) ? [...list].sort((first, second) => first - second) : fallback;
+/**
+ * A catalogue's settings, its lists' defaults filled in.
+ *
+ * @param title - the catalogue's title, for its storage's id.
+ * @param switches - its switches.
+ * @param lists - the lists its configuration sets.
+ */
+export const catalogueSettings = (title, switches, lists = {}) => {
+    const builtIn = lists.backgrounds?.builtIn;
+    const offered = builtIn === false
+        ? []
+        : BUILT_IN_BACKDROPS.filter((backdrop) => builtIn === undefined || builtIn.includes(backdrop.id));
+    const tabsOff = lists.tabs ?? {};
+    return {
+        id: lists.id ?? idOf(title),
+        switches,
+        widths: lists.widths ?? DEFAULT_WIDTHS,
+        widthRange: lists.widthRange ?? { min: 240, max: 2560 },
+        zooms: withHundred(lists.zooms, [50, 75, 100, 125, 150, 200]),
+        textSizes: withHundred(lists.textSizes, [100, 125, 150]),
+        backdrops: [...offered, ...(lists.backgrounds?.custom ?? []).map(customBackdrop)],
+        storyGroups: lists.storyGroups ?? [],
+        tabs: PANEL_TAB_IDS.filter((tab) => tabsOff[tab] !== false),
+        a11y: {
+            tags: lists.a11y?.tags ?? DEFAULT_A11Y_TAGS,
+            disabledRules: lists.a11y?.disabledRules ?? []
+        },
+        gridStep: lists.gridStep ?? 8,
+        strings: lists.strings ?? {}
+    };
+};
+/**
+ * A story group's heading: the catalogue's name for it, or its id when it names none.
+ *
+ * @param groups - the catalogue's named groups.
+ * @param id - the group's id.
+ */
+export const groupLabel = (groups, id) => groups.find((group) => group.id === id)?.label ?? id;
+//# sourceMappingURL=catalogue.js.map

package/dist/src/catalogue.js.map

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

package/dist/src/componentDocs.d.ts

@@ -0,0 +1,98 @@
+/**
+ * What the catalogue knows about a story file's component, read from its types and TSDoc: the props panel's data,
+ * shared by the plugin that extracts it (Node) and the shell that shows it (the page).
+ *
+ * @remarks
+ * Every prop has a kind, decided from its type, which is the panel's group and control (D-58, D-64): a union of
+ * literals is a choice, `string` text, `number` a number, `boolean` a toggle, a function named `on<Something>` an
+ * event; anything else cannot be set from the panel. The data crosses from the plugin to the page as JSON, so the
+ * shell checks it on arrival (`isComponentDocs`).
+ *
+ * @module
+ */
+/** How a prop is set from the panel, and the group it is listed in. */
+export type PropKind = "choice" | "text" | "number" | "toggle" | "event" | "other";
+/** One parameter of an event's signature. */
+export type SignatureParameter = {
+    /** The parameter's name. */
+    readonly name: string;
+    /** Its type, as the source writes it. */
+    readonly type: string;
+};
+/** An event's signature: what the callback receives and returns. */
+export type EventSignature = {
+    /** The parameters, in order. */
+    readonly parameters: readonly SignatureParameter[];
+    /** The return type, as the source writes it. */
+    readonly returns: string;
+};
+/** One prop of a component. */
+export type PropDocs = {
+    /** The prop's name. */
+    readonly name: string;
+    /** How it is set, and its group. */
+    readonly kind: PropKind;
+    /**
+     * Its type as the source writes it (`ReactNode`, `Ref<HTMLElement>`), without `undefined`, `null` and the `never` of
+     * a branch that forbids it; a choice's values in the order the source writes them. The checker's own text orders a
+     * union by the types it happened to meet first, so it changed between reads of a program kept in memory.
+     */
+    readonly type: string;
+    /** The first paragraph of its TSDoc; empty when it has none. */
+    readonly description: string;
+    /** Its `@defaultValue`, when the TSDoc gives one. */
+    readonly defaultValue?: string;
+    /** Whether the prop must be passed. */
+    readonly isRequired: boolean;
+    /** For a choice, its values in the order of the type. */
+    readonly choices?: readonly (string | number)[];
+    /** For an event, its signature. */
+    readonly signature?: EventSignature;
+    /**
+     * For a prop of kind `other` (a node, a union), whether a plain text can be passed: the panel then offers a text
+     * field for it. Left out when `false`.
+     */
+    readonly canTakeText?: boolean;
+};
+/** A part the component is used with, named in the meta's `subcomponents`: listed under it on its page. */
+export type SubcomponentDocs = {
+    /** The name the meta gives it: its key in `subcomponents`. */
+    readonly name: string;
+    /** The first paragraph of its TSDoc. */
+    readonly description: string;
+    /** Its props declared in the package, in the same order as the component's. */
+    readonly props: readonly PropDocs[];
+};
+/** A story file's component. */
+export type ComponentDocs = {
+    /** The component's name. */
+    readonly name: string;
+    /** The first paragraph of its TSDoc. */
+    readonly description: string;
+    /**
+     * The first paragraph of its file's `@module` comment: what it is and does, the component page's lead. Empty when
+     * the file has none.
+     */
+    readonly summary: string;
+    /**
+     * Its props declared in the package (the HTML attributes it passes on are left out), in declaration order: those of
+     * the component's own folder first, then the ones it takes from elsewhere, each by file and position.
+     */
+    readonly props: readonly PropDocs[];
+    /** Its parts: the keys of its `classNames`, `styles` and `refs` maps. */
+    readonly parts: readonly string[];
+    /** The parts the meta names in `subcomponents`, in the order it writes them; empty when it names none. */
+    readonly subcomponents: readonly SubcomponentDocs[];
+};
+/** What the plugin answers for a story file whose meta names no component (a foundations page). */
+export type NoComponentDocs = {
+    /** No component. */
+    readonly name: null;
+};
+/**
+ * Whether a value received from the plugin is a component's docs.
+ *
+ * @param value - the module's default export.
+ */
+export declare const isComponentDocs: (value: unknown) => value is ComponentDocs;
+//# sourceMappingURL=componentDocs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"componentDocs.d.ts","sourceRoot":"","sources":["../../src/componentDocs.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,uEAAuE;AACvE,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAC;AAEnF,6CAA6C;AAC7C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,4BAA4B;IAC5B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,yCAAyC;IACzC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,oEAAoE;AACpE,MAAM,MAAM,cAAc,GAAG;IAC3B,gCAAgC;IAChC,QAAQ,CAAC,UAAU,EAAE,SAAS,kBAAkB,EAAE,CAAC;IACnD,gDAAgD;IAChD,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,+BAA+B;AAC/B,MAAM,MAAM,QAAQ,GAAG;IACrB,uBAAuB;IACvB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,oCAAoC;IACpC,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC;IACxB;;;;OAIG;IACH,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,gEAAgE;IAChE,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,qDAAqD;IACrD,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IAC/B,uCAAuC;IACvC,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAC7B,yDAAyD;IACzD,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAChD,mCAAmC;IACnC,QAAQ,CAAC,SAAS,CAAC,EAAE,cAAc,CAAC;IACpC;;;OAGG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC;AAEF,2GAA2G;AAC3G,MAAM,MAAM,gBAAgB,GAAG;IAC7B,8DAA8D;IAC9D,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,wCAAwC;IACxC,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,+EAA+E;IAC/E,QAAQ,CAAC,KAAK,EAAE,SAAS,QAAQ,EAAE,CAAC;CACrC,CAAC;AAEF,gCAAgC;AAChC,MAAM,MAAM,aAAa,GAAG;IAC1B,4BAA4B;IAC5B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,wCAAwC;IACxC,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,QAAQ,CAAC,KAAK,EAAE,SAAS,QAAQ,EAAE,CAAC;IACpC,yEAAyE;IACzE,QAAQ,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IAClC,0GAA0G;IAC1G,QAAQ,CAAC,aAAa,EAAE,SAAS,gBAAgB,EAAE,CAAC;CACrD,CAAC;AAEF,mGAAmG;AACnG,MAAM,MAAM,eAAe,GAAG;IAC5B,oBAAoB;IACpB,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC;CACrB,CAAC;AA+BF;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,OAAO,OAAO,KAAG,KAAK,IAAI,aASR,CAAC"}

package/dist/src/componentDocs.js

@@ -0,0 +1,47 @@
+/**
+ * What the catalogue knows about a story file's component, read from its types and TSDoc: the props panel's data,
+ * shared by the plugin that extracts it (Node) and the shell that shows it (the page).
+ *
+ * @remarks
+ * Every prop has a kind, decided from its type, which is the panel's group and control (D-58, D-64): a union of
+ * literals is a choice, `string` text, `number` a number, `boolean` a toggle, a function named `on<Something>` an
+ * event; anything else cannot be set from the panel. The data crosses from the plugin to the page as JSON, so the
+ * shell checks it on arrival (`isComponentDocs`).
+ *
+ * @module
+ */
+/** Whether a value is a plain object. */
+const isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+/** Whether a value is a list of strings. */
+const isStringList = (value) => Array.isArray(value) && value.every((item) => typeof item === "string");
+/** The prop kinds, for the check. */
+const PROP_KINDS = ["choice", "text", "number", "toggle", "event", "other"];
+/** Whether a value is one prop's docs. */
+const isPropDocs = (value) => isRecord(value) &&
+    typeof value["name"] === "string" &&
+    PROP_KINDS.some((kind) => kind === value["kind"]) &&
+    typeof value["type"] === "string" &&
+    typeof value["description"] === "string" &&
+    typeof value["isRequired"] === "boolean" &&
+    (value["canTakeText"] === undefined || typeof value["canTakeText"] === "boolean");
+/** Whether a value is a subcomponent's docs. */
+const isSubcomponentDocs = (value) => isRecord(value) &&
+    typeof value["name"] === "string" &&
+    typeof value["description"] === "string" &&
+    Array.isArray(value["props"]) &&
+    value["props"].every(isPropDocs);
+/**
+ * Whether a value received from the plugin is a component's docs.
+ *
+ * @param value - the module's default export.
+ */
+export const isComponentDocs = (value) => isRecord(value) &&
+    typeof value["name"] === "string" &&
+    typeof value["description"] === "string" &&
+    typeof value["summary"] === "string" &&
+    Array.isArray(value["props"]) &&
+    value["props"].every(isPropDocs) &&
+    isStringList(value["parts"]) &&
+    Array.isArray(value["subcomponents"]) &&
+    value["subcomponents"].every(isSubcomponentDocs);
+//# sourceMappingURL=componentDocs.js.map

package/dist/src/componentDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"componentDocs.js","sourceRoot":"","sources":["../../src/componentDocs.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAwFH,yCAAyC;AACzC,MAAM,QAAQ,GAAG,CAAC,KAAc,EAA8C,EAAE,CAC9E,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;AAEvE,4CAA4C;AAC5C,MAAM,YAAY,GAAG,CAAC,KAAc,EAA8B,EAAE,CAClE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC;AAE1E,qCAAqC;AACrC,MAAM,UAAU,GAAwB,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;AAEjG,0CAA0C;AAC1C,MAAM,UAAU,GAAG,CAAC,KAAc,EAAqB,EAAE,CACvD,QAAQ,CAAC,KAAK,CAAC;IACf,OAAO,KAAK,CAAC,MAAM,CAAC,KAAK,QAAQ;IACjC,UAAU,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,KAAK,CAAC,MAAM,CAAC,CAAC;IACjD,OAAO,KAAK,CAAC,MAAM,CAAC,KAAK,QAAQ;IACjC,OAAO,KAAK,CAAC,aAAa,CAAC,KAAK,QAAQ;IACxC,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,SAAS;IACxC,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,SAAS,IAAI,OAAO,KAAK,CAAC,aAAa,CAAC,KAAK,SAAS,CAAC,CAAC;AAEpF,gDAAgD;AAChD,MAAM,kBAAkB,GAAG,CAAC,KAAc,EAA6B,EAAE,CACvE,QAAQ,CAAC,KAAK,CAAC;IACf,OAAO,KAAK,CAAC,MAAM,CAAC,KAAK,QAAQ;IACjC,OAAO,KAAK,CAAC,aAAa,CAAC,KAAK,QAAQ;IACxC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC7B,KAAK,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;AAEnC;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAAc,EAA0B,EAAE,CACxE,QAAQ,CAAC,KAAK,CAAC;IACf,OAAO,KAAK,CAAC,MAAM,CAAC,KAAK,QAAQ;IACjC,OAAO,KAAK,CAAC,aAAa,CAAC,KAAK,QAAQ;IACxC,OAAO,KAAK,CAAC,SAAS,CAAC,KAAK,QAAQ;IACpC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC7B,KAAK,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC;IAChC,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC5B,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;IACrC,KAAK,CAAC,eAAe,CAAC,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAAC"}

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

@@ -0,0 +1,20 @@
+/**
+ * The Accessibility card's check, run in a story's frame: axe on the whole document (a story may put a menu or a
+ * 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.
+ *
+ * @module
+ */
+import type { Violation } from "../a11y.ts";
+import type { A11ySettings } from "../catalogue.ts";
+/**
+ * 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.
+ * @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

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkStory.d.ts","sourceRoot":"","sources":["../../../src/frame/checkStory.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,GAAU,UAAU,QAAQ,EAAE,OAAO,YAAY,KAAG,OAAO,CAAC,SAAS,EAAE,CAa7F,CAAC"}

package/dist/src/frame/checkStory.js

@@ -0,0 +1,31 @@
+/**
+ * The Accessibility card's check, run in a story's frame: axe on the whole document (a story may put a menu or a
+ * 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.
+ *
+ * @module
+ */
+/**
+ * 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.
+ * @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, {
+        runOnly: { type: "tag", values: [...rules.tags] },
+        rules: Object.fromEntries(rules.disabledRules.map((rule) => [rule, { enabled: false }]))
+    });
+    return results.violations.map((violation) => ({
+        id: violation.id,
+        help: violation.help,
+        impact: violation.impact ?? undefined,
+        helpUrl: violation.helpUrl,
+        targets: violation.nodes.map((node) => node.target.map(String).join(" "))
+    }));
+};
+//# sourceMappingURL=checkStory.js.map