forgebook 0.1.8 → 0.2.0

package/dist/src/shell/asideStory.js

@@ -0,0 +1,55 @@
+/**
+ * A story's second frame, for a plugin's tab: the story beside what the tab shows, as the stage has it now.
+ *
+ * @remarks
+ * The tab answers this frame itself, with the panel's values and the view, and the stage leaves it alone
+ * (`FRAME_ASIDE_ATTRIBUTE`), so the messages stay private to the shell.
+ *
+ * @module
+ */
+import { isFrameMessage } from "../messages.js";
+import { framesOrigin, isFromFrames, storyFrameAttributes } from "./framesOrigin.js";
+import { FRAME_ASIDE_ATTRIBUTE } from "./useFrameMessages.js";
+/**
+ * Draws a story's second frame in an element.
+ *
+ * @param target - the element.
+ * @param title - the frame's accessible name.
+ * @param aside - how the story is drawn.
+ * @returns what takes it away.
+ */
+export const showAsideStory = (target, title, aside) => {
+    const frame = target.ownerDocument.createElement("iframe");
+    frame.title = title;
+    // as the stage's frame: on the frames' own origin, with the features a story may use
+    const { allow, sandbox } = storyFrameAttributes();
+    frame.allow = allow;
+    if (sandbox !== undefined)
+        frame.setAttribute("sandbox", sandbox);
+    frame.setAttribute(FRAME_ASIDE_ATTRIBUTE, "");
+    // a width set on the stage holds as far as the room allows
+    frame.style.cssText = "display:block;max-width:100%;height:100%;margin-inline:auto;border:0";
+    frame.style.width = aside.width === "fill" ? "100%" : `${aside.width}px`;
+    if (aside.background !== undefined)
+        target.style.backgroundColor = aside.background;
+    const answer = (event) => {
+        const story = frame.contentWindow;
+        if (!isFromFrames(event) || event.source !== story || story === null)
+            return;
+        if (!isFrameMessage(event.data) || event.data.type !== "forgebook:ready")
+            return;
+        const send = (message) => story.postMessage(message, framesOrigin());
+        send({ type: "forgebook:args", args: aside.args });
+        if (aside.view !== undefined)
+            send({ type: "forgebook:view", view: aside.view });
+    };
+    window.addEventListener("message", answer);
+    frame.src = aside.address;
+    target.append(frame);
+    return {
+        remove: () => {
+            window.removeEventListener("message", answer);
+            frame.remove();
+        }
+    };
+};

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

@@ -0,0 +1,39 @@
+/**
+ * Which sections a component's page drawn for one audience shows, and where around its frames. Each audience is one row
+ * of a table, the same page reordered and filtered.
+ *
+ * @remarks
+ * The sections sit in three places around the frames, because the frames must never move: an `iframe` moved in the
+ * document loads again, losing its story's state and costing a load per story for a change of reading. So the demo
+ * and the examples stay where they are, and only what goes around them changes. `everyone` is not here: its page is
+ * `ComponentPage.tsx`'s own. The table is apart from the sections' texts and code (`audiencePage.ts`), which load with
+ * the first page drawn for someone else: the page reads it before that chunk comes, to start loading what the
+ * audience's sections read alongside it rather than after it.
+ *
+ * @module
+ */
+import type { AudienceId } from "../audiences.ts";
+/** A part of the page around its frames. */
+export type PageSection = "lead" | "guidance" | "prose" | "api" | "parts" | "pages" | "tokens" | "coverage" | "usedIn";
+/** What of the documentation file an audience sees: all of it, without what is about code, or what testing reads. */
+export type ProseReading = "whole" | "design" | "testing";
+/** An audience's page. */
+export type AudiencePage = {
+    /** The sections above the demo, in their order. */
+    readonly beforeDemo: readonly PageSection[];
+    /** The sections between the demo and the examples. */
+    readonly afterDemo: readonly PageSection[];
+    /** The sections after the examples. */
+    readonly afterExamples: readonly PageSection[];
+    /** What of the documentation file it sees. */
+    readonly prose: ProseReading;
+};
+/** Each audience's page. */
+export declare const AUDIENCE_PAGES: Readonly<Record<Exclude<AudienceId, "everyone">, AudiencePage>>;
+/**
+ * Whether a page drawn for an audience shows a section, in any of its places.
+ *
+ * @param audience - who the page is drawn for; `everyone`'s page shows none of the table's sections.
+ * @param section - the section.
+ */
+export declare const showsSection: (audience: AudienceId, section: PageSection) => boolean;

package/dist/src/shell/audienceLayout.js

@@ -0,0 +1,33 @@
+/** Each audience's page. */
+export const AUDIENCE_PAGES = {
+    designer: {
+        beforeDemo: ["lead", "guidance"],
+        afterDemo: ["prose", "pages", "tokens"],
+        afterExamples: ["usedIn"],
+        prose: "design"
+    },
+    coder: {
+        beforeDemo: ["lead", "api", "parts"],
+        afterDemo: ["prose"],
+        afterExamples: ["usedIn"],
+        prose: "whole"
+    },
+    tester: {
+        beforeDemo: ["lead", "coverage"],
+        afterDemo: ["prose", "parts"],
+        afterExamples: [],
+        prose: "testing"
+    }
+};
+/**
+ * Whether a page drawn for an audience shows a section, in any of its places.
+ *
+ * @param audience - who the page is drawn for; `everyone`'s page shows none of the table's sections.
+ * @param section - the section.
+ */
+export const showsSection = (audience, section) => {
+    if (audience === "everyone")
+        return false;
+    const { beforeDemo, afterDemo, afterExamples } = AUDIENCE_PAGES[audience];
+    return [...beforeDemo, ...afterDemo, ...afterExamples].includes(section);
+};

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

@@ -0,0 +1,113 @@
+/**
+ * What a page drawn for one audience reads, beside which sections it shows (`audienceLayout.ts`): the part of the
+ * documentation file it shows, the docs pages and the tokens named after its component, and its texts.
+ *
+ * @remarks
+ * All of this loads with the first page drawn for someone else. Nothing records which tokens a component's styles use,
+ * so a token belongs to a component by its name, the way a tokens file groups them: `select.border` and
+ * `component.select.height` are the Select's. Pure, the texts aside.
+ *
+ * @module
+ */
+import type { TreePage } from "../pageTree.ts";
+import type { StoryTree } from "../storyTree.ts";
+import type { ProseReading } from "./audienceLayout.ts";
+/** A section of a documentation file: its heading, empty for what comes before the first one, and its HTML. */
+export type ProsePart = {
+    /** Its `##` heading as written, lower case. */
+    readonly heading: string;
+    /** Its HTML, the heading's included. */
+    readonly html: string;
+};
+/**
+ * A documentation file's HTML in its `##` sections.
+ *
+ * @param html - the file's HTML.
+ */
+export declare const proseParts: (html: string) => ProsePart[];
+/**
+ * What of a documentation file an audience sees. Its sections are told apart by their headings, in the English words
+ * the conventional sections use. A section with another name stays for a designer; a tester gets the sections the
+ * words find, and all of the file when they find none, since a file in another language must not read as empty.
+ *
+ * @param html - the file's HTML.
+ * @param reading - what the audience sees.
+ * @returns the HTML; empty when nothing is left.
+ */
+export declare const proseFor: (html: string, reading: ProseReading) => string;
+/** A token as the plugin's module gives it: what a person reads. */
+export type ShellToken = {
+    /** Its name, the groups joined by dots. */
+    readonly name: string;
+    /** Its type (`color`, `dimension`…). */
+    readonly type: string;
+    /** Its value, as CSS writes it. */
+    readonly value: string;
+    /** Its value in each theme where it differs, by theme. */
+    readonly modes: Readonly<Record<string, string>>;
+    /** Why not to use it, when it is deprecated. */
+    readonly deprecated?: string;
+};
+/** What the plugin's module exports. */
+export type ShellTokens = {
+    /** The tokens, in the files' order. */
+    readonly tokens: readonly ShellToken[];
+    /** What could not be used, one line each. */
+    readonly problems: readonly string[];
+};
+/**
+ * Whether a value is what the plugin's module exports.
+ *
+ * @param value - the module's default export, unchecked.
+ */
+export declare const isShellTokens: (value: unknown) => value is ShellTokens;
+/**
+ * The tokens named after a component: a segment of the name is its name, in any case, or in kebab case.
+ *
+ * @param tokens - the tokens.
+ * @param name - the component's name (`BottomSheet`).
+ */
+export declare const tokensAbout: <TToken extends Pick<ShellToken, "name">>(tokens: readonly TToken[], name: string) => TToken[];
+/** The texts, as shown. */
+export declare const AUDIENCE_TEXTS: {
+    audienceNote: (audience: string) => string;
+    audienceShowAll: string;
+    guidance: string;
+    guidanceUse: string;
+    guidanceAvoid: string;
+    guidanceAlternatives: string;
+    guidanceDeprecated: string;
+    guidanceReplacedBy: string;
+    aboutPages: string;
+    tokens: string;
+    tokenName: string;
+    tokenValue: string;
+    tokensOther: (count: number) => string;
+    tokensMore: (count: number) => string;
+    tokensError: string;
+    partsTitle: string;
+    coverage: string;
+    coverageSummary: (stories: number, played: number, untested: number) => string;
+    coverageStory: string;
+    coverageGroup: string;
+    coveragePlay: string;
+    coverageTests: string;
+    coverageA11y: string;
+    coverageHasPlay: string;
+    coverageNoPlay: string;
+    coverageTested: string;
+    coverageUntested: string;
+    coverageNotChecked: string;
+    coverageChecking: string;
+    coverageFailed: string;
+    coverageCheckAll: string;
+    coverageChecked: (done: number, total: number) => string;
+};
+/**
+ * The docs pages that show a component: one of its stories, or its API table.
+ *
+ * @param tree - the tree.
+ * @param id - the component's id.
+ * @param storyIds - its stories' ids.
+ */
+export declare const pagesAbout: (tree: StoryTree, id: string, storyIds: readonly string[]) => TreePage[];

package/dist/src/shell/audiencePage.js

@@ -0,0 +1,144 @@
+import { textsOfGroup } from "./strings.js";
+/** Where a `##` heading starts. The plugin escapes code blocks, so a real one is all this finds. */
+const SECTION_START = /(?=<h2[\s>])/;
+/** The heading inside a section's HTML. */
+const HEADING = /^<h2[^>]*>(.*?)<\/h2>/s;
+/**
+ * A heading's words, lower case: every other piece around `<` and `>` is a tag, so a link's address reads as no word.
+ *
+ * @param html - the heading's HTML.
+ */
+const headingText = (html) => html
+    .split(/[<>]/)
+    .filter((_piece, index) => index % 2 === 0)
+    .join("")
+    .toLowerCase();
+/**
+ * A documentation file's HTML in its `##` sections.
+ *
+ * @param html - the file's HTML.
+ */
+export const proseParts = (html) => html
+    .split(SECTION_START)
+    .filter((part) => part.trim() !== "")
+    .map((part) => ({
+    heading: headingText(HEADING.exec(part)?.[1] ?? ""),
+    html: part
+}));
+/** The headings of the sections written for whoever codes: what a designer leaves out. */
+const CODE_HEADINGS = /\b(parts|styling|test[ -]?ids?|hooks?|api|props)\b/;
+/** The headings of the sections a tester reads. */
+const TEST_HEADINGS = /\b(accessibility|a11y|keyboard|states?|test[ -]?ids?|testing)\b/;
+/** Where a code block starts. */
+const CODE_START = /(?=<pre[\s>])/;
+/** The end of a code block: `pre` holds no other. */
+const CODE_END = "</pre>";
+/**
+ * A section's HTML without its code blocks; nothing when only its heading is left.
+ *
+ * @param html - the section's HTML.
+ */
+const withoutCode = (html) => {
+    const text = html
+        .split(CODE_START)
+        .map((piece) => piece.startsWith("<pre") ? piece.slice(piece.indexOf(CODE_END) + CODE_END.length) : piece)
+        .join("");
+    return text.replace(HEADING, "").trim() === "" ? "" : text;
+};
+/**
+ * What of a documentation file an audience sees. Its sections are told apart by their headings, in the English words
+ * the conventional sections use. A section with another name stays for a designer; a tester gets the sections the
+ * words find, and all of the file when they find none, since a file in another language must not read as empty.
+ *
+ * @param html - the file's HTML.
+ * @param reading - what the audience sees.
+ * @returns the HTML; empty when nothing is left.
+ */
+export const proseFor = (html, reading) => {
+    if (reading === "whole")
+        return html;
+    const parts = proseParts(html);
+    if (reading === "testing") {
+        const tested = parts.filter((part) => TEST_HEADINGS.test(part.heading));
+        return tested.length === 0 ? html : tested.map((part) => part.html).join("");
+    }
+    return parts
+        .filter((part) => !CODE_HEADINGS.test(part.heading))
+        .map((part) => withoutCode(part.html))
+        .join("");
+};
+/** Whether a value is a plain object. */
+const isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+/** Whether a value is one token. */
+const isShellToken = (value) => isRecord(value) &&
+    typeof value["name"] === "string" &&
+    typeof value["type"] === "string" &&
+    typeof value["value"] === "string" &&
+    isRecord(value["modes"]) &&
+    (value["deprecated"] === undefined || typeof value["deprecated"] === "string");
+/**
+ * Whether a value is what the plugin's module exports.
+ *
+ * @param value - the module's default export, unchecked.
+ */
+export const isShellTokens = (value) => isRecord(value) &&
+    Array.isArray(value["tokens"]) &&
+    value["tokens"].every(isShellToken) &&
+    Array.isArray(value["problems"]) &&
+    value["problems"].every((problem) => typeof problem === "string");
+/**
+ * The tokens named after a component: a segment of the name is its name, in any case, or in kebab case.
+ *
+ * @param tokens - the tokens.
+ * @param name - the component's name (`BottomSheet`).
+ */
+export const tokensAbout = (tokens, name) => {
+    const names = [name.toLowerCase(), name.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase()];
+    return tokens.filter((token) => token.name
+        .toLowerCase()
+        .split(".")
+        .some((segment) => names.includes(segment)));
+};
+/** The texts, as shown. */
+export const AUDIENCE_TEXTS = textsOfGroup("audienceTexts", {
+    audienceNote: (audience) => `Reading for ${audience.toLowerCase()}: this page shows part of what it holds.`,
+    audienceShowAll: "Show everything",
+    guidance: "When to use it",
+    guidanceUse: "Use it when",
+    guidanceAvoid: "Avoid it when",
+    guidanceAlternatives: "Alternatives",
+    guidanceDeprecated: "Deprecated",
+    guidanceReplacedBy: "Use instead",
+    aboutPages: "Read more",
+    tokens: "Design tokens",
+    tokenName: "Token",
+    tokenValue: "Value",
+    tokensOther: (count) => `${count === 1 ? "1 token" : `${count} tokens`} of the whole catalogue`,
+    tokensMore: (count) => `And ${count} more: \`forgebook tokens\` lists them.`,
+    tokensError: "The tokens could not be read",
+    partsTitle: "Parts and styling",
+    coverage: "What the stories cover",
+    coverageSummary: (stories, played, untested) => `${stories === 1 ? "1 story" : `${stories} stories`}: ${played} with a play function, ${untested} left out of the generated tests.`,
+    coverageStory: "Story",
+    coverageGroup: "Group",
+    coveragePlay: "Play",
+    coverageTests: "Generated tests",
+    coverageA11y: "Accessibility",
+    coverageHasPlay: "Plays",
+    coverageNoPlay: "None",
+    coverageTested: "Included",
+    coverageUntested: "Left out",
+    coverageNotChecked: "Not checked",
+    coverageChecking: "Checking",
+    coverageFailed: "Could not load",
+    coverageCheckAll: "Check every story",
+    coverageChecked: (done, total) => `${done} of ${total} checked`
+});
+/**
+ * The docs pages that show a component: one of its stories, or its API table.
+ *
+ * @param tree - the tree.
+ * @param id - the component's id.
+ * @param storyIds - its stories' ids.
+ */
+export const pagesAbout = (tree, id, storyIds) => tree.sources.flatMap((source) => source.pages.filter((page) => page.components.includes(id) || page.stories.some((story) => storyIds.includes(story))));

package/dist/src/shell/audienceSections.css

@@ -0,0 +1,95 @@
+@layer catalogue {
+  .forgebook-guidance {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+    gap: 1rem;
+  }
+  .forgebook-guidance__list {
+    display: grid;
+    align-content: start;
+    gap: 0.5rem;
+    font: 400 0.8125rem/1.4 var(--forgebook-font-sans);
+  }
+  .forgebook-guidance__list h3 {
+    margin: 0;
+    font: 600 0.6875rem/1.3 var(--forgebook-font-sans);
+    color: var(--forgebook-text-tertiary);
+  }
+  .forgebook-guidance__list ul {
+    display: grid;
+    gap: 0.25rem;
+    margin: 0;
+    padding-inline-start: 1rem;
+  }
+  .forgebook-guidance__deprecated {
+    margin: 0;
+    font: 400 0.8125rem/1.4 var(--forgebook-font-sans);
+  }
+  .forgebook-about-pages {
+    display: grid;
+    gap: 0.5rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    font: 400 0.8125rem/1.4 var(--forgebook-font-sans);
+  }
+  .forgebook-about-pages li {
+    display: grid;
+    gap: 0.25rem;
+  }
+  .forgebook-about-pages__description {
+    font: 400 0.6875rem/1.35 var(--forgebook-font-sans);
+    color: var(--forgebook-text-secondary);
+  }
+  .forgebook-token {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font: 400 0.71875rem/1.4 var(--forgebook-font-mono);
+  }
+  .forgebook-token__swatch {
+    flex: none;
+    width: 0.875rem;
+    height: 0.875rem;
+    border-radius: 50%;
+    box-shadow: inset 0 0 0 1px var(--forgebook-hover);
+  }
+  .forgebook-tokens__others {
+    display: grid;
+    gap: 0.5rem;
+    font: 400 0.6875rem/1.35 var(--forgebook-font-sans);
+    color: var(--forgebook-text-secondary);
+  }
+  .forgebook-tokens__others > summary {
+    cursor: pointer;
+  }
+  .forgebook-coverage__head {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem 1rem;
+  }
+  .forgebook-coverage__summary {
+    margin: 0;
+    font: 400 0.8125rem/1.4 var(--forgebook-font-sans);
+    color: var(--forgebook-text-secondary);
+  }
+  .forgebook-coverage__progress {
+    margin: 0;
+    font: 400 0.6875rem/1.35 var(--forgebook-font-sans);
+    color: var(--forgebook-text-tertiary);
+  }
+  .forgebook-coverage__progress:empty {
+    display: none;
+  }
+  .forgebook-api__table tbody .forgebook-coverage__story {
+    min-width: 14rem;
+    white-space: normal;
+  }
+  .forgebook-coverage__covers {
+    display: block;
+    margin-block-start: 0.25rem;
+    color: var(--forgebook-text-secondary);
+  }
+}

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

@@ -1,6 +1,28 @@
-import { type CatalogueSettings } from "../catalogue.ts";
+/**
+ * The catalogue's settings, as the shell's components read them: its switches and its lists (`catalogue.ts`),
+ * computed once from the configuration, so the toolbar, the stage, the compare view and the pages agree.
+ *
+ * @module
+ */
+import type { StoryLanguage } from "@forgebook/story-format/source";
+import { type CatalogueLists, type CatalogueSettings } from "../catalogue.ts";
+import { type ViewSwitch } from "../switches.ts";
+import type { ShellPlugin } from "./pluginTabs.tsx";
 /** The catalogue's settings; the defaults until the shell provides its own. */
 export declare const CatalogueContext: import("react").Context<CatalogueSettings>;
 /** The catalogue's settings. */
 export declare const useCatalogue: () => CatalogueSettings;
-//# sourceMappingURL=catalogueContext.d.ts.map
+/** No plugins: a catalogue that lists none. */
+export declare const NO_PLUGINS: readonly ShellPlugin[];
+/**
+ * The catalogue's settings computed once from its configuration, for the page that provides them.
+ *
+ * @param config - its name, its switches, its languages, its lists and its plugins (whose tabs it may turn off).
+ */
+export declare const useConfiguredCatalogue: ({ title, switches, languages, lists, plugins }: {
+    readonly title: string;
+    readonly switches?: readonly ViewSwitch[];
+    readonly languages?: readonly StoryLanguage[];
+    readonly lists?: CatalogueLists;
+    readonly plugins?: readonly ShellPlugin[];
+}) => CatalogueSettings;

package/dist/src/shell/catalogueContext.js

@@ -1,14 +1,17 @@
-/**
- * The catalogue's settings, as the shell's components read them: its switches and its lists (`catalogue.ts`),
- * computed once from the configuration, so the toolbar, the stage, the compare view and the pages agree.
- *
- * @module
- */
-import { createContext, useContext } from "react";
+import { createContext, useContext, useMemo } from "react";
 import { catalogueSettings } from "../catalogue.js";
-import { DEFAULT_SWITCHES } from "../switches.js";
+import { catalogueSwitches, DEFAULT_SWITCHES } from "../switches.js";
 /** The catalogue's settings; the defaults until the shell provides its own. */
 export const CatalogueContext = createContext(catalogueSettings("", DEFAULT_SWITCHES));
 /** The catalogue's settings. */
 export const useCatalogue = () => useContext(CatalogueContext);
-//# sourceMappingURL=catalogueContext.js.map
+/** No languages: a catalogue that offers none. */
+const NO_LANGUAGES = [];
+/** No plugins: a catalogue that lists none. */
+export const NO_PLUGINS = [];
+/**
+ * The catalogue's settings computed once from its configuration, for the page that provides them.
+ *
+ * @param config - its name, its switches, its languages, its lists and its plugins (whose tabs it may turn off).
+ */
+export const useConfiguredCatalogue = ({ title, switches, languages = NO_LANGUAGES, lists, plugins = NO_PLUGINS }) => useMemo(() => catalogueSettings(title, catalogueSwitches(switches, languages, lists?.controls), lists, plugins.flatMap((plugin) => plugin.tabs.map((tab) => tab.id))), [title, switches, languages, lists, plugins]);

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

@@ -20,4 +20,3 @@ export type CodeToken = {
  * @param names - identifiers to colour as names (the parameters, the event); other capitalised words are types.
  */
 export declare const codeTokens: (text: string, names?: ReadonlySet<string>) => CodeToken[];
-//# sourceMappingURL=codeTokens.d.ts.map

package/dist/src/shell/codeTokens.js

@@ -45,4 +45,3 @@ export const codeTokens = (text, names = new Set()) => [...text.matchAll(PIECES)
         return { kind: "keyword", text: piece };
     return { kind: names.has(word) ? "name" : "type", text: piece };
 });
-//# sourceMappingURL=codeTokens.js.map

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

@@ -3,4 +3,3 @@ import type { StoryCodeWriter } from "../frame/renderer.ts";
 export declare const CodeWriterContext: import("react").Context<StoryCodeWriter>;
 /** The framework's code writer, as the app gave it. */
 export declare const useCodeWriter: () => StoryCodeWriter;
-//# sourceMappingURL=codeWriter.d.ts.map

package/dist/src/shell/codeWriter.js

@@ -11,4 +11,3 @@ const NO_WRITER = () => "";
 export const CodeWriterContext = createContext(NO_WRITER);
 /** The framework's code writer, as the app gave it. */
 export const useCodeWriter = () => useContext(CodeWriterContext);
-//# sourceMappingURL=codeWriter.js.map

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

@@ -33,4 +33,3 @@ export type CompareVariant = {
  * @param catalogue - the catalogue's switches and text sizes.
  */
 export declare const compareVariants: (axes: CompareAxes, catalogue: CompareCatalogue) => CompareVariant[];
-//# sourceMappingURL=compareVariants.d.ts.map

package/dist/src/shell/compareVariants.js

@@ -11,6 +11,7 @@
  * @module
  */
 import { SHEETS_CHOICES } from "../viewState.js";
+import { LATER_STRINGS } from "./laterStrings.js";
 import { STRINGS } from "./strings.js";
 /**
  * The values one axis sets, each with its label.
@@ -62,8 +63,7 @@ export const compareVariants = (axes, catalogue) => {
     if (second === undefined)
         return firsts;
     return axisVariants(second, catalogue).flatMap((outer) => firsts.map((inner) => ({
-        label: STRINGS.compareCell(outer.isDefault ? [inner.label] : [inner.label, outer.label]),
+        label: LATER_STRINGS.compareCell(outer.isDefault ? [inner.label] : [inner.label, outer.label]),
         viewOf: (view) => outer.viewOf(inner.viewOf(view))
     })));
 };
-//# sourceMappingURL=compareVariants.js.map

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

@@ -25,4 +25,3 @@ type CycledCatalogue = Pick<CatalogueSettings, "switches" | "backdrops" | "textS
  */
 export declare const cycledView: (view: ViewState, id: string, step: 1 | -1, catalogue: CycledCatalogue, fixed: FixedView, isStoryPage: boolean) => ViewState | undefined;
 export {};
-//# sourceMappingURL=controlCycle.d.ts.map

package/dist/src/shell/controlCycle.js

@@ -1,3 +1,14 @@
+/**
+ * A control's next value, for its key: the view with one control moved on by a step through its values, as its
+ * toolbar control would set it.
+ *
+ * @remarks
+ * Pure. A control its toolbar control leaves disabled is left as it is here too: a switch or a background the story
+ * fixes (or a width), and a control the compare view draws side by side.
+ *
+ * @module
+ */
+import { AUDIENCE_IDS } from "../audiences.js";
 import { cycledValue, switchValues } from "../controlKeys.js";
 import { isComparing, PLAIN_BACKDROP, SHEETS_CHOICES } from "../viewState.js";
 import { withSwitch } from "./switchView.js";
@@ -18,6 +29,8 @@ const cycledOwn = (view, id, step, catalogue) => {
         return { ...view, sheets: cycledValue(SHEETS_CHOICES, view.sheets, step) };
     if (id === "text")
         return { ...view, text: cycledValue(catalogue.textSizes, view.text, step) };
+    if (id === "audience")
+        return { ...view, audience: cycledValue(AUDIENCE_IDS, view.audience, step) };
     if (id !== "width")
         return undefined;
     const widths = ["fill", ...catalogue.widths.map((preset) => preset.width)];
@@ -49,4 +62,3 @@ export const cycledView = (view, id, step, catalogue, fixed, isStoryPage) => {
         return undefined;
     return cycledOwn(view, id, step, catalogue);
 };
-//# sourceMappingURL=controlCycle.js.map

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

@@ -0,0 +1,7 @@
+import type { ToolbarControl as Control } from "../toolbarLayout.ts";
+/**
+ * A control's name, as its row, its menu and its buttons' names write it.
+ *
+ * @param control - the control.
+ */
+export declare const controlLabel: (control: Control) => string;

package/dist/src/shell/controlLabel.js

@@ -0,0 +1,17 @@
+import { DEVICE_PARAMETER } from "../deviceView.js";
+import { STRINGS } from "./strings.js";
+/** The name of each of Forgebook's own controls. */
+const OWN_LABELS = {
+    backdrop: () => STRINGS.backdrop,
+    sheets: () => STRINGS.sheets,
+    text: () => STRINGS.text,
+    width: () => STRINGS.width,
+    audience: () => STRINGS.audience,
+    [DEVICE_PARAMETER]: () => STRINGS.device
+};
+/**
+ * A control's name, as its row, its menu and its buttons' names write it.
+ *
+ * @param control - the control.
+ */
+export const controlLabel = (control) => control.kind === "switch" ? control.switch.label : OWN_LABELS[control.id]();