forgebook 0.1.3 → 0.1.5

package/dist/src/shell/useWorstCase.js

@@ -0,0 +1,42 @@
+/**
+ * The stage's worst case: the args the Props tab's button sets, whether the values shown are those, and the spills the
+ * story's frames count while they are.
+ *
+ * @remarks
+ * The frames are asked to outline their spills only while the worst case is on (`forgebook:spills`), so a story shown
+ * with its own data never pays for the measure; a frame that loads again is asked again when it is ready (`sendTo`).
+ * The count is kept by story: in the compare view each frame measures its own, and the last to report is shown.
+ *
+ * @module
+ */
+import { useEffect, useMemo, useState } from "react";
+import { tellFrames } from "./FrameView.js";
+import { isWorstCase, worstArgs } from "./worstArgs.js";
+/**
+ * The stage's worst case.
+ *
+ * @param input - the frames, the story, its settable props and its values.
+ */
+export const useWorstCase = ({ storyRef, storyId, settable, values, panelArgs, onPanelArgsChange }) => {
+    const args = useMemo(() => worstArgs(settable), [settable]);
+    const isOn = isWorstCase(args, values);
+    const [counts, setCounts] = useState(new Map());
+    useEffect(() => {
+        const message = { type: "forgebook:spills", isOn };
+        tellFrames(storyRef.current, message);
+    }, [storyRef, isOn]);
+    return {
+        state: {
+            canApply: Object.keys(args).length > 0,
+            isOn,
+            spillCount: isOn ? counts.get(storyId) : undefined,
+            onApply: () => onPanelArgsChange({ ...panelArgs, ...args })
+        },
+        sendTo: (frame) => {
+            const message = { type: "forgebook:spills", isOn };
+            frame.postMessage(message, window.location.origin);
+        },
+        receive: (reported, count) => setCounts((current) => new Map(current).set(reported, count))
+    };
+};
+//# sourceMappingURL=useWorstCase.js.map

package/dist/src/shell/useWorstCase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWorstCase.js","sourceRoot":"","sources":["../../../src/shell/useWorstCase.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,EAAkB,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAIrE,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAiB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAuB,SAAS,EAAE,MAAM,gBAAgB,CAAC;AA4B7E;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,iBAAiB,EACF,EAAa,EAAE;IAC9B,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC5D,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;IACvC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAA8B,IAAI,GAAG,EAAE,CAAC,CAAC;IAC7E,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAiB,EAAE,IAAI,EAAE,kBAAkB,EAAE,IAAI,EAAE,CAAC;QACjE,UAAU,CAAC,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IACxC,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC;IACrB,OAAO;QACL,KAAK,EAAE;YACL,QAAQ,EAAE,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,MAAM,GAAG,CAAC;YACtC,IAAI;YACJ,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS;YAClD,OAAO,EAAE,GAAS,EAAE,CAAC,iBAAiB,CAAC,EAAE,GAAG,SAAS,EAAE,GAAG,IAAI,EAAE,CAAC;SAClE;QACD,MAAM,EAAE,CAAC,KAAa,EAAQ,EAAE;YAC9B,MAAM,OAAO,GAAiB,EAAE,IAAI,EAAE,kBAAkB,EAAE,IAAI,EAAE,CAAC;YACjE,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;QACrD,CAAC;QACD,OAAO,EAAE,CAAC,QAAgB,EAAE,KAAa,EAAQ,EAAE,CACjD,SAAS,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,IAAI,GAAG,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;KAChE,CAAC;AACJ,CAAC,CAAC"}

package/dist/src/shell/worstArgs.d.ts

@@ -0,0 +1,42 @@
+/**
+ * The worst case the Props tab sets with one button: every prop that takes a text given a long one with a word too
+ * long to break in it, every number given a huge one, from the component's docs.
+ *
+ * @remarks
+ * The values are the ones `forgebook new` writes in a story's worst case (`worstCase.ts`). The text joins the long text
+ * and the unbreakable word, so one value shows both a box that must wrap and one that must cut or scroll. A colour, a
+ * date and a prop whose `argTypes` give it a list keep their values: a long text there is not a case, only an invalid
+ * value. A number with a highest value takes that value, the largest the story says it accepts.
+ *
+ * @module
+ */
+import { type PanelProp } from "../argTypes.ts";
+import type { PanelArgs } from "../messages.ts";
+/** The worst text: a long one, with a word that cannot break. */
+export declare const WORST_ARG_TEXT = "A label long enough to wrap onto several lines in any box it is given, with words of every length in it Supercalifragilisticexpialidocious_with_no_place_to_break_it_at_all_1234567890";
+/**
+ * The worst-case args for the props the panel can set.
+ *
+ * @param props - the props the panel can set.
+ * @returns the args, by prop name; empty when no prop takes a text or a number.
+ */
+export declare const worstArgs: (props: readonly PanelProp[]) => PanelArgs;
+/**
+ * Whether the values shown are the worst case: every worst-case arg is set to its worst value.
+ *
+ * @param worst - the worst-case args.
+ * @param values - the values shown.
+ */
+export declare const isWorstCase: (worst: PanelArgs, values: PanelArgs) => boolean;
+/** The worst case as the Props tab shows it. */
+export type WorstCaseState = {
+    /** Whether a prop the panel can set takes a text or a number: the button is shown only then. */
+    readonly canApply: boolean;
+    /** Whether the values shown are the worst case: the frame then outlines the spills. */
+    readonly isOn: boolean;
+    /** How many elements spill, as the frame last measured them while the worst case is on; none before. */
+    readonly spillCount: number | undefined;
+    /** Sets the worst case over the panel's values. */
+    readonly onApply: () => void;
+};
+//# sourceMappingURL=worstArgs.d.ts.map

package/dist/src/shell/worstArgs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"worstArgs.d.ts","sourceRoot":"","sources":["../../../src/shell/worstArgs.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,EAAe,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAGhD,iEAAiE;AACjE,eAAO,MAAM,cAAc,2LAAgC,CAAC;AAa5D;;;;;GAKG;AACH,eAAO,MAAM,SAAS,GAAI,OAAO,SAAS,SAAS,EAAE,KAAG,SAOrD,CAAC;AAEJ;;;;;GAKG;AACH,eAAO,MAAM,WAAW,GAAI,OAAO,SAAS,EAAE,QAAQ,SAAS,KAAG,OAGjE,CAAC;AAEF,gDAAgD;AAChD,MAAM,MAAM,cAAc,GAAG;IAC3B,gGAAgG;IAChG,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,uFAAuF;IACvF,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB,wGAAwG;IACxG,QAAQ,CAAC,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,mDAAmD;IACnD,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;CAC9B,CAAC"}

package/dist/src/shell/worstArgs.js

@@ -0,0 +1,47 @@
+/**
+ * The worst case the Props tab sets with one button: every prop that takes a text given a long one with a word too
+ * long to break in it, every number given a huge one, from the component's docs.
+ *
+ * @remarks
+ * The values are the ones `forgebook new` writes in a story's worst case (`worstCase.ts`). The text joins the long text
+ * and the unbreakable word, so one value shows both a box that must wrap and one that must cut or scroll. A colour, a
+ * date and a prop whose `argTypes` give it a list keep their values: a long text there is not a case, only an invalid
+ * value. A number with a highest value takes that value, the largest the story says it accepts.
+ *
+ * @module
+ */
+import { isColorProp } from "../argTypes.js";
+import { WORST_NUMBER, WORST_TEXT, WORST_WORD } from "../worstCase.js";
+/** The worst text: a long one, with a word that cannot break. */
+export const WORST_ARG_TEXT = `${WORST_TEXT} ${WORST_WORD}`;
+/** Whether a prop is set as a text: of kind text, or a node that takes one, with no other control named. */
+const isText = (prop) => (prop.kind === "text" || (prop.kind === "other" && prop.canTakeText === true)) &&
+    (prop.control === undefined || prop.control === "text") &&
+    !isColorProp(prop);
+/** Whether a prop is set as a number, with no other control named. */
+const isNumber = (prop) => prop.kind === "number" &&
+    (prop.control === undefined || prop.control === "number" || prop.control === "range");
+/**
+ * The worst-case args for the props the panel can set.
+ *
+ * @param props - the props the panel can set.
+ * @returns the args, by prop name; empty when no prop takes a text or a number.
+ */
+export const worstArgs = (props) => Object.fromEntries(props.flatMap((prop) => {
+    if (isText(prop))
+        return [[prop.name, WORST_ARG_TEXT]];
+    if (isNumber(prop))
+        return [[prop.name, prop.max ?? WORST_NUMBER]];
+    return [];
+}));
+/**
+ * Whether the values shown are the worst case: every worst-case arg is set to its worst value.
+ *
+ * @param worst - the worst-case args.
+ * @param values - the values shown.
+ */
+export const isWorstCase = (worst, values) => {
+    const entries = Object.entries(worst);
+    return entries.length > 0 && entries.every(([name, value]) => values[name] === value);
+};
+//# sourceMappingURL=worstArgs.js.map

package/dist/src/shell/worstArgs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"worstArgs.js","sourceRoot":"","sources":["../../../src/shell/worstArgs.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,EAAE,WAAW,EAAkB,MAAM,gBAAgB,CAAC;AAE7D,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAEvE,iEAAiE;AACjE,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,UAAU,IAAI,UAAU,EAAE,CAAC;AAE5D,4GAA4G;AAC5G,MAAM,MAAM,GAAG,CAAC,IAAe,EAAW,EAAE,CAC1C,CAAC,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,CAAC;IAC9E,CAAC,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM,CAAC;IACvD,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;AAErB,sEAAsE;AACtE,MAAM,QAAQ,GAAG,CAAC,IAAe,EAAW,EAAE,CAC5C,IAAI,CAAC,IAAI,KAAK,QAAQ;IACtB,CAAC,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,CAAC,CAAC;AAExF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAA2B,EAAa,EAAE,CAClE,MAAM,CAAC,WAAW,CAChB,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAA+B,EAAE;IAClD,IAAI,MAAM,CAAC,IAAI,CAAC;QAAE,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC;IACvD,IAAI,QAAQ,CAAC,IAAI,CAAC;QAAE,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,IAAI,YAAY,CAAC,CAAC,CAAC;IACnE,OAAO,EAAE,CAAC;AACZ,CAAC,CAAC,CACH,CAAC;AAEJ;;;;;GAKG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAgB,EAAE,MAAiB,EAAW,EAAE;IAC1E,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IACtC,OAAO,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,KAAK,CAAC,CAAC;AACxF,CAAC,CAAC"}

package/dist/src/spills.d.ts

@@ -0,0 +1,31 @@
+/**
+ * The elements of a story that spill out of their parent: what overlaps a neighbour or runs off the frame when the
+ * story is narrower than it was drawn for.
+ *
+ * @remarks
+ * Runs in the story's page (`page.evaluate`), so it takes no import. An element spills when its box reaches past its
+ * parent's box by more than a pixel, sideways, and the parent shows its overflow: a parent that clips or scrolls
+ * (`overflow` other than `visible`) and an element taken out of the flow (`absolute`, `fixed`) are left out, as is
+ * anything inside a frame-level layer (`data-forgebook-allow-spill`, for a story that shows a spill on purpose). The
+ * same finder serves the browser tests (`@forgebook/testing`) and the frame's outline of a worst case, so both find the
+ * same spills; the frame passes an attribute to mark the elements with, which a style sheet outlines.
+ *
+ * @module
+ */
+/** One spill: the element, its parent, and by how many pixels it reaches past. */
+export type Spill = {
+    /** The element, as a short CSS path (`div.story-settings`). */
+    readonly element: string;
+    /** Its parent, the same way. */
+    readonly parent: string;
+    /** How far it reaches past the parent, in CSS px. */
+    readonly by: number;
+};
+/**
+ * The spills inside a root, measured in the page.
+ *
+ * @param rootSelector - the story's root (`.forgebook-frame`).
+ * @param markAttribute - an attribute set on each element that spills, taken off the others first; none marks nothing.
+ */
+export declare const findSpills: (rootSelector: string, markAttribute?: string) => Spill[];
+//# sourceMappingURL=spills.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spills.d.ts","sourceRoot":"","sources":["../../src/spills.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,kFAAkF;AAClF,MAAM,MAAM,KAAK,GAAG;IAClB,+DAA+D;IAC/D,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,gCAAgC;IAChC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,UAAU,GAAI,cAAc,MAAM,EAAE,gBAAgB,MAAM,KAAG,KAAK,EAqC9E,CAAC"}

package/dist/src/spills.js

@@ -0,0 +1,65 @@
+/**
+ * The elements of a story that spill out of their parent: what overlaps a neighbour or runs off the frame when the
+ * story is narrower than it was drawn for.
+ *
+ * @remarks
+ * Runs in the story's page (`page.evaluate`), so it takes no import. An element spills when its box reaches past its
+ * parent's box by more than a pixel, sideways, and the parent shows its overflow: a parent that clips or scrolls
+ * (`overflow` other than `visible`) and an element taken out of the flow (`absolute`, `fixed`) are left out, as is
+ * anything inside a frame-level layer (`data-forgebook-allow-spill`, for a story that shows a spill on purpose). The
+ * same finder serves the browser tests (`@forgebook/testing`) and the frame's outline of a worst case, so both find the
+ * same spills; the frame passes an attribute to mark the elements with, which a style sheet outlines.
+ *
+ * @module
+ */
+/**
+ * The spills inside a root, measured in the page.
+ *
+ * @param rootSelector - the story's root (`.forgebook-frame`).
+ * @param markAttribute - an attribute set on each element that spills, taken off the others first; none marks nothing.
+ */
+export const findSpills = (rootSelector, markAttribute) => {
+    const pathOf = (element) => {
+        const classes = [...element.classList].slice(0, 2).join(".");
+        return classes === "" ? element.tagName.toLowerCase() : `${element.tagName.toLowerCase()}.${classes}`;
+    };
+    // an element out of the flow, a parent that clips or scrolls, and an allowed spill are not measured
+    const isMeasured = (element, parent) => {
+        if (element.closest("[data-forgebook-allow-spill]") !== null)
+            return false;
+        const style = getComputedStyle(element);
+        const parentStyle = getComputedStyle(parent);
+        return (style.position !== "absolute" &&
+            style.position !== "fixed" &&
+            style.display !== "contents" &&
+            parentStyle.display !== "contents" &&
+            parentStyle.overflowX === "visible");
+    };
+    const overreach = (element, parent) => {
+        const box = element.getBoundingClientRect();
+        const parentBox = parent.getBoundingClientRect();
+        if (box.width === 0 || box.height === 0)
+            return 0;
+        return Math.max(box.right - parentBox.right, parentBox.left - box.left);
+    };
+    const root = document.querySelector(rootSelector);
+    if (root === null)
+        return [];
+    const elements = [...root.querySelectorAll("*")];
+    // the marks of the last measure come off first, so an element that no longer spills loses its outline
+    if (markAttribute !== undefined)
+        for (const element of elements)
+            element.removeAttribute(markAttribute);
+    return elements.flatMap((element) => {
+        const parent = element.parentElement;
+        if (parent === null || !isMeasured(element, parent))
+            return [];
+        const by = overreach(element, parent);
+        if (by <= 1)
+            return [];
+        if (markAttribute !== undefined)
+            element.setAttribute(markAttribute, "");
+        return [{ element: pathOf(element), parent: pathOf(parent), by: Math.round(by) }];
+    });
+};
+//# sourceMappingURL=spills.js.map

package/dist/src/spills.js.map

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

package/dist/src/storyCheck.d.ts

@@ -0,0 +1,105 @@
+/**
+ * The shapes of a story check and of a story's pictures, shared by `forgebook check` and `forgebook shot` (which ask)
+ * and `@forgebook/testing/check` and `/shot` (which run them in a browser): the stories and views, and the problems
+ * found in each or the pictures taken.
+ *
+ * @remarks
+ * The command builds the request from the catalogue it runs against, loads the testing package from the project only
+ * when it runs (the core has no browser), and reads the report back through `isStoryCheckReport`, since it crossed a
+ * dynamic import. The problems are those the catalogue's browser tests fail on, with the same messages: a frame that
+ * could not show its story, axe's rules, spills, overlays past the frame, and the page's errors (a failed play among
+ * them: its rejection reaches the page). Pure.
+ *
+ * @module
+ */
+import type { CatalogueLists } from "./catalogue.ts";
+import type { ViewSwitch } from "./switches.ts";
+/** What kind of check found a problem. */
+export type StoryProblemKind = "frame" | "axe" | "spill" | "overlay" | "error";
+/** One problem a check found. */
+export type StoryProblem = {
+    /** The check that found it. */
+    readonly kind: StoryProblemKind;
+    /** The rule broken, for axe (`color-contrast`). */
+    readonly rule?: string;
+    /** The element at fault, as a selector, when the check names one. */
+    readonly element?: string;
+    /** What is wrong, as the catalogue's tests say it. */
+    readonly message: string;
+};
+/** A story to check: its id, and the height its scene declares. */
+export type StoryCheckStory = {
+    /** The story's id. */
+    readonly id: string;
+    /** Its `parameters.height`, in CSS px, when it declares one: an overlay inside it is not a problem. */
+    readonly height?: number;
+};
+/** What a check is asked to do. */
+export type StoryCheckRequest = {
+    /** The frame page's absolute address (`http://localhost:5173/frame.html`). */
+    readonly frameUrl: string;
+    /** The stories. */
+    readonly stories: readonly StoryCheckStory[];
+    /** The catalogue's switches, as its configuration gives them. */
+    readonly switches: readonly ViewSwitch[];
+    /** The catalogue's lists: its accessibility rules, backgrounds, text sizes. */
+    readonly lists: CatalogueLists;
+    /** The views, each in the address's form (`theme=dark&lang=it`); none for the default view alone. */
+    readonly views: readonly string[];
+    /** Check every variant the catalogue's browser tests check instead of the views given. */
+    readonly isAllVariants: boolean;
+};
+/** One story in one view, and its problems. */
+export type StoryCheckResult = {
+    /** The story's id. */
+    readonly storyId: string;
+    /** The view, as asked (`theme=dark`), or the variant's name; empty for the default view. */
+    readonly view: string;
+    /** Where it was opened: its frame in that view. */
+    readonly frame: string;
+    /** The problems; none when it passes. */
+    readonly problems: readonly StoryProblem[];
+};
+/** What a check found. */
+export type StoryCheckReport = {
+    /** The shape's version. */
+    readonly schema: 1;
+    /** One result per story and view. */
+    readonly results: readonly StoryCheckResult[];
+};
+/**
+ * Whether what the testing package answered is a check's report.
+ *
+ * @param value - the answer.
+ */
+export declare const isStoryCheckReport: (value: unknown) => value is StoryCheckReport;
+/** What a picture run is asked to do: a check's stories and views, and where the pictures go. */
+export type StoryShotRequest = StoryCheckRequest & {
+    /** The folder the pictures are written in, absolute; made when missing. */
+    readonly outDir: string;
+};
+/** One story's picture in one view. */
+export type StoryShot = {
+    /** The story's id. */
+    readonly storyId: string;
+    /** The view, as asked, or the variant's name; empty for the default view. */
+    readonly view: string;
+    /** Where it was opened. */
+    readonly frame: string;
+    /** The picture, a PNG file's absolute path. */
+    readonly file: string;
+};
+/** The pictures taken. */
+export type StoryShotReport = {
+    /** The shape's version. */
+    readonly schema: 1;
+    /** One picture per story and view. */
+    readonly shots: readonly StoryShot[];
+};
+/**
+ * Whether what the testing package answered is a picture run's report.
+ *
+ * @param value - the answer.
+ */
+export declare const isStoryShotReport: (value: unknown) => value is StoryShotReport;
+//# sourceMappingURL=storyCheck.d.ts.map

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

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

package/dist/src/storyCheck.js

@@ -0,0 +1,63 @@
+/** Every kind, for reading a report back. */
+const KINDS = ["frame", "axe", "spill", "overlay", "error"];
+/**
+ * Whether a value is a problem.
+ *
+ * @param value - the value.
+ */
+const isProblem = (value) => typeof value === "object" &&
+    value !== null &&
+    "kind" in value &&
+    KINDS.some((kind) => kind === value.kind) &&
+    "message" in value &&
+    typeof value.message === "string";
+/**
+ * Whether a value is a result.
+ *
+ * @param value - the value.
+ */
+const isResult = (value) => typeof value === "object" &&
+    value !== null &&
+    "storyId" in value &&
+    typeof value.storyId === "string" &&
+    "view" in value &&
+    typeof value.view === "string" &&
+    "frame" in value &&
+    typeof value.frame === "string" &&
+    "problems" in value &&
+    Array.isArray(value.problems) &&
+    value.problems.every(isProblem);
+/**
+ * Whether what the testing package answered is a check's report.
+ *
+ * @param value - the answer.
+ */
+export const isStoryCheckReport = (value) => typeof value === "object" &&
+    value !== null &&
+    "schema" in value &&
+    value.schema === 1 &&
+    "results" in value &&
+    Array.isArray(value.results) &&
+    value.results.every(isResult);
+/**
+ * Whether what the testing package answered is a picture run's report.
+ *
+ * @param value - the answer.
+ */
+export const isStoryShotReport = (value) => typeof value === "object" &&
+    value !== null &&
+    "schema" in value &&
+    value.schema === 1 &&
+    "shots" in value &&
+    Array.isArray(value.shots) &&
+    value.shots.every((shot) => typeof shot === "object" &&
+        shot !== null &&
+        "storyId" in shot &&
+        typeof shot.storyId === "string" &&
+        "view" in shot &&
+        typeof shot.view === "string" &&
+        "frame" in shot &&
+        typeof shot.frame === "string" &&
+        "file" in shot &&
+        typeof shot.file === "string");
+//# sourceMappingURL=storyCheck.js.map

package/dist/src/storyCheck.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"storyCheck.js","sourceRoot":"","sources":["../../src/storyCheck.ts"],"names":[],"mappings":"AA4EA,6CAA6C;AAC7C,MAAM,KAAK,GAAgC,CAAC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC;AAEzF;;;;GAIG;AACH,MAAM,SAAS,GAAG,CAAC,KAAc,EAAyB,EAAE,CAC1D,OAAO,KAAK,KAAK,QAAQ;IACzB,KAAK,KAAK,IAAI;IACd,MAAM,IAAI,KAAK;IACf,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,KAAK,CAAC,IAAI,CAAC;IACzC,SAAS,IAAI,KAAK;IAClB,OAAO,KAAK,CAAC,OAAO,KAAK,QAAQ,CAAC;AAEpC;;;;GAIG;AACH,MAAM,QAAQ,GAAG,CAAC,KAAc,EAA6B,EAAE,CAC7D,OAAO,KAAK,KAAK,QAAQ;IACzB,KAAK,KAAK,IAAI;IACd,SAAS,IAAI,KAAK;IAClB,OAAO,KAAK,CAAC,OAAO,KAAK,QAAQ;IACjC,MAAM,IAAI,KAAK;IACf,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ;IAC9B,OAAO,IAAI,KAAK;IAChB,OAAO,KAAK,CAAC,KAAK,KAAK,QAAQ;IAC/B,UAAU,IAAI,KAAK;IACnB,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC;IAC7B,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;AAElC;;;;GAIG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAAc,EAA6B,EAAE,CAC9E,OAAO,KAAK,KAAK,QAAQ;IACzB,KAAK,KAAK,IAAI;IACd,QAAQ,IAAI,KAAK;IACjB,KAAK,CAAC,MAAM,KAAK,CAAC;IAClB,SAAS,IAAI,KAAK;IAClB,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC;IAC5B,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;AA4BhC;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAAc,EAA4B,EAAE,CAC5E,OAAO,KAAK,KAAK,QAAQ;IACzB,KAAK,KAAK,IAAI;IACd,QAAQ,IAAI,KAAK;IACjB,KAAK,CAAC,MAAM,KAAK,CAAC;IAClB,OAAO,IAAI,KAAK;IAChB,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC;IAC1B,KAAK,CAAC,KAAK,CAAC,KAAK,CACf,CAAC,IAAa,EAAE,EAAE,CAChB,OAAO,IAAI,KAAK,QAAQ;QACxB,IAAI,KAAK,IAAI;QACb,SAAS,IAAI,IAAI;QACjB,OAAO,IAAI,CAAC,OAAO,KAAK,QAAQ;QAChC,MAAM,IAAI,IAAI;QACd,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ;QAC7B,OAAO,IAAI,IAAI;QACf,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ;QAC9B,MAAM,IAAI,IAAI;QACd,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,CAChC,CAAC"}

package/dist/src/switches.d.ts

@@ -24,6 +24,8 @@ export type SwitchValue = {
     readonly scheme?: "light" | "dark" | "system";
     /** For a `contrast` switch: whether the value is the higher contrast. */
     readonly isMore?: boolean;
+    /** For a `language` switch: whether the language reads right to left, which draws the story right to left. */
+    readonly isRightToLeft?: boolean;
 };
 /** Where a switch applies. */
 export type SwitchApply = 
@@ -53,9 +55,9 @@ export type SwitchApply =
 /**
  * What the catalogue itself reads of a switch: the colour scheme (the loading boxes' and backgrounds' colours, the
  * tests' themes), the contrast (the source's more-contrast colours, the tests' variants), the language (the stories'
- * texts and the language's provider).
+ * texts and the language's provider), the direction (a catalogue's own switch in place of the ready-made one).
  */
-export type SwitchRole = "colorScheme" | "contrast" | "language";
+export type SwitchRole = "colorScheme" | "contrast" | "language" | "direction" | "touch";
 /** A switch of the toolbar or the View menu. */
 export type ViewSwitch = {
     /** A stable id, the address's parameter (`theme`). */
@@ -72,6 +74,8 @@ export type ViewSwitch = {
     readonly role?: SwitchRole;
     /** How the View menu offers it: a row of segments (by default, up to six values) or a list. */
     readonly control?: "segments" | "list";
+    /** What a reader should know of it, in a sentence or two: under its row in the View menu and in its tooltip. */
+    readonly description?: string;
 };
 /**
  * Why a list of switches cannot be used, or none: ids unique and not the address's own, a default among the values,
@@ -97,7 +101,22 @@ export declare const LANGUAGE_SWITCH_ID = "lang";
 export declare const languageSwitch: (languages: readonly {
     readonly id: string;
     readonly label: string;
+    readonly dir?: "rtl";
 }[]) => ViewSwitch;
+/**
+ * The direction the stories are drawn in: left to right (the root's own, no attribute) or right to left, as `dir` on
+ * the frame's root, so a library sees every component mirrored as a right-to-left page shows it.
+ */
+export declare const directionSwitch: () => ViewSwitch;
+/**
+ * How the stories are touched: with the mouse (no attribute), or as a finger, simulated in the frame
+ * (`data-forgebook-touch` on its root: the frame's touch layer and the catalogue's CSS rewrite read it). A simulation:
+ * events made by a page are not trusted, so native scrolling, focus, a virtual keyboard and real Safari stay a
+ * device's, or `forgebook dev --touch`'s.
+ */
+export declare const touchSwitch: () => ViewSwitch;
+/** The ready-made switches a catalogue may turn off (`controls: { direction: false }`). */
+export type ReadySwitchesOff = Readonly<Partial<Record<"direction" | "touch", false>>>;
 /**
  * The switch with a role, among a catalogue's.
  *
@@ -120,16 +139,19 @@ export declare const switchValueOf: (each: ViewSwitch, value: string | undefined
 export declare const switchControl: (each: ViewSwitch) => "segments" | "list";
 /**
  * A catalogue's switches: the ones it declares (the theme and the contrast when it declares none), then, when it or a
- * source offers languages, the language switch over all of them.
+ * source offers languages, the language switch over all of them, then the ready-made direction and touch switches,
+ * each unless the catalogue declares its own (the `direction` or `touch` role) or turned it off.
  *
  * @param declared - the switches the catalogue declares; none for the default ones.
  * @param languages - every language the catalogue and its sources offer, by id and name; the first of an id wins.
+ * @param turnedOff - the ready-made switches the catalogue turned off (its `controls`); none by default.
  * @throws when the switches cannot be used (`switchesProblem`): a catalogue's configuration error, shown at once.
  */
 export declare const catalogueSwitches: (declared: readonly ViewSwitch[] | undefined, languages: readonly {
     readonly id: string;
     readonly label: string;
-}[]) => readonly ViewSwitch[];
+    readonly dir?: "rtl";
+}[], turnedOff?: ReadySwitchesOff) => readonly ViewSwitch[];
 /** What a switch made from a `globalType` may take besides it: where it applies, what the catalogue reads of it. */
 export type GlobalTypeSwitchOverride = Partial<Pick<ViewSwitch, "label" | "apply" | "role" | "control">>;
 /** How `switchesFromGlobalTypes` reads Storybook's preview. */

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

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

package/dist/src/switches.js

@@ -99,7 +99,46 @@ export const languageSwitch = (languages) => ({
     default: "",
     values: [
         { value: "", label: "Stories' own", isUnset: true },
-        ...languages.map((language) => ({ value: language.id, label: language.label }))
+        ...languages.map((language) => ({
+            value: language.id,
+            label: language.label,
+            ...(language.dir === "rtl" ? { isRightToLeft: true } : {})
+        }))
+    ]
+});
+/**
+ * The direction the stories are drawn in: left to right (the root's own, no attribute) or right to left, as `dir` on
+ * the frame's root, so a library sees every component mirrored as a right-to-left page shows it.
+ */
+export const directionSwitch = () => ({
+    id: "dir",
+    label: "Direction",
+    role: "direction",
+    apply: { kind: "attribute", name: "dir" },
+    default: "ltr",
+    values: [
+        { value: "ltr", label: "Left to right", isUnset: true },
+        { value: "rtl", label: "Right to left" }
+    ]
+});
+/**
+ * How the stories are touched: with the mouse (no attribute), or as a finger, simulated in the frame
+ * (`data-forgebook-touch` on its root: the frame's touch layer and the catalogue's CSS rewrite read it). A simulation:
+ * events made by a page are not trusted, so native scrolling, focus, a virtual keyboard and real Safari stay a
+ * device's, or `forgebook dev --touch`'s.
+ */
+export const touchSwitch = () => ({
+    id: "touch",
+    label: "Touch",
+    role: "touch",
+    description: "Simulated: the story receives a finger's events and a phone's hover and pointer media, Shift for two fingers. " +
+        "Native scrolling, focus from a touch, the virtual keyboard and real Safari still need a device, or " +
+        "forgebook dev --touch for Chromium's real touch.",
+    apply: { kind: "attribute", name: "data-forgebook-touch" },
+    default: "mouse",
+    values: [
+        { value: "mouse", label: "Mouse", isUnset: true },
+        { value: "touch", label: "Touch" }
     ]
 });
 /**
@@ -124,17 +163,23 @@ export const switchValueOf = (each, value) => each.values.find((candidate) => ca
 export const switchControl = (each) => each.control ?? (each.values.length <= 6 ? "segments" : "list");
 /**
  * A catalogue's switches: the ones it declares (the theme and the contrast when it declares none), then, when it or a
- * source offers languages, the language switch over all of them.
+ * source offers languages, the language switch over all of them, then the ready-made direction and touch switches,
+ * each unless the catalogue declares its own (the `direction` or `touch` role) or turned it off.
  *
  * @param declared - the switches the catalogue declares; none for the default ones.
  * @param languages - every language the catalogue and its sources offer, by id and name; the first of an id wins.
+ * @param turnedOff - the ready-made switches the catalogue turned off (its `controls`); none by default.
  * @throws when the switches cannot be used (`switchesProblem`): a catalogue's configuration error, shown at once.
  */
-export const catalogueSwitches = (declared, languages) => {
+export const catalogueSwitches = (declared, languages, turnedOff = {}) => {
     const unique = languages.filter((language, index) => languages.findIndex((other) => other.id === language.id) === index);
+    const own = declared ?? DEFAULT_SWITCHES;
+    const isOffered = (role) => turnedOff[role] !== false && switchWithRole(own, role) === undefined;
     const switches = [
-        ...(declared ?? DEFAULT_SWITCHES),
-        ...(unique.length > 0 ? [languageSwitch(unique)] : [])
+        ...own,
+        ...(unique.length > 0 ? [languageSwitch(unique)] : []),
+        ...(isOffered("direction") ? [directionSwitch()] : []),
+        ...(isOffered("touch") ? [touchSwitch()] : [])
     ];
     const problem = switchesProblem(switches);
     if (problem !== undefined)