forgebook 0.1.8 → 0.3.0

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

@@ -0,0 +1,37 @@
+/**
+ * Which palette the shell draws in: the reader's choice, the system's, or the story's colour scheme.
+ *
+ * @remarks
+ * Following the story is for a library whose catalogue should feel like one page with it: a dark story in a dark shell.
+ * While comparing, several themes share the stage and none is the story's, so the shell stays neutral on the system's.
+ * Pure, so the rule is tested apart from the page.
+ *
+ * @module
+ */
+import { type Appearance } from "../catalogue.ts";
+import { type ViewSwitch } from "../switches.ts";
+/** What decides the shell's palette. */
+export type SchemeQuestion = {
+    /** The appearance picked. */
+    readonly appearance: Appearance;
+    /** The view's switches, by id. */
+    readonly values: Readonly<Record<string, string>>;
+    /** The catalogue's switches. */
+    readonly switches: readonly ViewSwitch[];
+    /** Whether the system is dark. */
+    readonly isSystemDark: boolean;
+    /** Whether the stage compares a story across values. */
+    readonly isComparing: boolean;
+};
+/**
+ * Whether the shell draws in its dark palette.
+ *
+ * @param question - what decides it.
+ */
+export declare const shellIsDark: ({ appearance, values, switches, isSystemDark, isComparing }: SchemeQuestion) => boolean;
+/**
+ * The appearances a reader is offered: following the story only where a story has a colour scheme to follow.
+ *
+ * @param switches - the catalogue's switches.
+ */
+export declare const offeredAppearances: (switches: readonly ViewSwitch[]) => readonly Appearance[];

package/dist/src/shell/shellScheme.js

@@ -0,0 +1,32 @@
+/**
+ * Which palette the shell draws in: the reader's choice, the system's, or the story's colour scheme.
+ *
+ * @remarks
+ * Following the story is for a library whose catalogue should feel like one page with it: a dark story in a dark shell.
+ * While comparing, several themes share the stage and none is the story's, so the shell stays neutral on the system's.
+ * Pure, so the rule is tested apart from the page.
+ *
+ * @module
+ */
+import { APPEARANCES } from "../catalogue.js";
+import { switchValueOf, switchWithRole } from "../switches.js";
+/**
+ * Whether the shell draws in its dark palette.
+ *
+ * @param question - what decides it.
+ */
+export const shellIsDark = ({ appearance, values, switches, isSystemDark, isComparing }) => {
+    if (appearance === "light" || appearance === "dark")
+        return appearance === "dark";
+    const scheme = switchWithRole(switches, "colorScheme");
+    if (appearance === "system" || isComparing || scheme === undefined)
+        return isSystemDark;
+    const shown = switchValueOf(scheme, values[scheme.id] ?? scheme.default)?.scheme;
+    return shown === undefined || shown === "system" ? isSystemDark : shown === "dark";
+};
+/**
+ * The appearances a reader is offered: following the story only where a story has a colour scheme to follow.
+ *
+ * @param switches - the catalogue's switches.
+ */
+export const offeredAppearances = (switches) => APPEARANCES.filter((each) => each !== "story" || switchWithRole(switches, "colorScheme") !== undefined);

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

@@ -1,6 +1,7 @@
 /**
- * The touch of the stories marked for a phone (`parameters.touch`): each starts with a finger simulated, whatever
- * the toolbar's Touch switch says, until the user turns it off for that story (its example's toggle, or the Touch
+ * The touch of the stories marked for a phone (`parameters.touch`), and of those shown in a device frame unless their
+ * device says otherwise (`parameters.device.touch`): each starts with a finger simulated, whatever the toolbar's Touch
+ * switch says, until the user turns it off for that story (its example's toggle, or the Touch
  * switch on its own page).
  *
  * @remarks
@@ -9,6 +10,7 @@
  *
  * @module
  */
+import { type DeviceDefault, type DeviceView } from "../deviceView.ts";
 import type { TreeStory } from "../storyTree.ts";
 import type { TouchChoice } from "../switches.ts";
 import { type ViewState } from "../viewState.ts";
@@ -16,13 +18,24 @@ import { type ViewState } from "../viewState.ts";
 export type TouchOverrides = ReadonlyMap<string, boolean>;
 /** Whether each story marked for a phone is touched with a finger, by its id; the other stories are left out. */
 export type StoryTouches = ReadonlyMap<string, boolean>;
+/** Whether a story is meant for a phone: marked so, or shown in a device that is touched. */
+export type IsPhoneStory = (story: Pick<TreeStory, "isTouch" | "device">) => boolean;
 /**
- * Whether each of some stories marked for a phone is touched with a finger: as the user chose, a finger otherwise.
+ * Whether a story is meant for a phone in a view: marked so, or shown in a device frame whose device is touched (a
+ * phone behaves as one).
+ *
+ * @param view - the view's device.
+ * @param catalogueDevice - the catalogue's default device, under each story's.
+ */
+export declare const phoneStories: (view: DeviceView, catalogueDevice: DeviceDefault) => IsPhoneStory;
+/**
+ * Whether each of some stories meant for a phone is touched with a finger: as the user chose, a finger otherwise.
  *
  * @param stories - the stories.
  * @param overrides - the user's choices.
+ * @param isPhone - whether a story is meant for a phone; marked so (`parameters.touch`) by default.
  */
-export declare const storyTouchesOf: (stories: readonly TreeStory[], overrides: TouchOverrides) => StoryTouches;
+export declare const storyTouchesOf: (stories: readonly TreeStory[], overrides: TouchOverrides, isPhone?: IsPhoneStory) => StoryTouches;
 /**
  * The view a story is drawn with: the view, with a finger or the mouse for a story marked for a phone.
  *
@@ -47,6 +60,6 @@ export type StoryViewChange = {
  * @param addressView - the address's view.
  * @param story - the shown story.
  * @param choice - the catalogue's touch switch.
+ * @param isPhone - whether the story is meant for a phone; marked so by default.
  */
-export declare const storyViewChange: (next: ViewState, addressView: ViewState, story: TreeStory, choice: TouchChoice | undefined) => StoryViewChange;
-//# sourceMappingURL=storyTouch.d.ts.map
+export declare const storyViewChange: (next: ViewState, addressView: ViewState, story: TreeStory, choice: TouchChoice | undefined, isPhone?: boolean) => StoryViewChange;

package/dist/src/shell/storyTouch.js

@@ -1,11 +1,33 @@
+/**
+ * The touch of the stories marked for a phone (`parameters.touch`), and of those shown in a device frame unless their
+ * device says otherwise (`parameters.device.touch`): each starts with a finger simulated, whatever the toolbar's Touch
+ * switch says, until the user turns it off for that story (its example's toggle, or the Touch
+ * switch on its own page).
+ *
+ * @remarks
+ * The user's choice for a story lasts while the catalogue is open and is kept apart from the address: the address's
+ * Touch switch stays the one the other stories follow, and a story's link opens it with its finger again.
+ *
+ * @module
+ */
+import { deviceDefaultOf, shownDevice } from "../deviceView.js";
 import { isTouchView, withTouch, withTouchOf } from "../viewState.js";
 /**
- * Whether each of some stories marked for a phone is touched with a finger: as the user chose, a finger otherwise.
+ * Whether a story is meant for a phone in a view: marked so, or shown in a device frame whose device is touched (a
+ * phone behaves as one).
+ *
+ * @param view - the view's device.
+ * @param catalogueDevice - the catalogue's default device, under each story's.
+ */
+export const phoneStories = (view, catalogueDevice) => (story) => story.isTouch || shownDevice(view, deviceDefaultOf(catalogueDevice, story.device))?.isTouch === true;
+/**
+ * Whether each of some stories meant for a phone is touched with a finger: as the user chose, a finger otherwise.
  *
  * @param stories - the stories.
  * @param overrides - the user's choices.
+ * @param isPhone - whether a story is meant for a phone; marked so (`parameters.touch`) by default.
  */
-export const storyTouchesOf = (stories, overrides) => new Map(stories.filter((story) => story.isTouch).map((story) => [story.id, overrides.get(story.id) ?? true]));
+export const storyTouchesOf = (stories, overrides, isPhone = (story) => story.isTouch) => new Map(stories.filter(isPhone).map((story) => [story.id, overrides.get(story.id) ?? true]));
 /**
  * The view a story is drawn with: the view, with a finger or the mouse for a story marked for a phone.
  *
@@ -26,8 +48,8 @@ export const touchedView = (view, storyId, touches, choice) => {
  * @param addressView - the address's view.
  * @param story - the shown story.
  * @param choice - the catalogue's touch switch.
+ * @param isPhone - whether the story is meant for a phone; marked so by default.
  */
-export const storyViewChange = (next, addressView, story, choice) => !story.isTouch || choice === undefined
+export const storyViewChange = (next, addressView, story, choice, isPhone = story.isTouch) => !isPhone || choice === undefined
     ? { view: next }
     : { view: withTouchOf(next, addressView, choice), isTouch: isTouchView(next, choice) };
-//# sourceMappingURL=storyTouch.js.map

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

@@ -1,11 +1,16 @@
 /**
- * Every text the catalogue's shell shows, in one place: the catalogue is a development tool in English, and keeping
- * its words together keeps them consistent and ready for a translation.
+ * The texts of the catalogue's shell: the catalogue is a development tool in English, and keeping its words together
+ * keeps them consistent and ready for a translation.
  *
  * @remarks
- * A catalogue may replace any plain text by its name (`strings: { props: "Controls", "tabs.props": "Controls" }` in
- * its configuration): the shell applies the replacements once, before it draws (`configureStrings`), as a translation
- * is set up, so every module keeps reading `STRINGS`. A text that takes values (`allStories(count)`) stays the shell's.
+ * `STRINGS` holds the texts of what a first load draws; the texts of the parts that load later live beside it and
+ * load with those parts, so a first load carries none of them: the home and the docs pages (`pageStrings.ts`),
+ * the other pages, tabs and panels opened on demand (`laterStrings.ts`), the search's results (`searchStrings.ts`),
+ * the audiences' sections (`audiencePage.ts`). A
+ * catalogue may replace any plain text by its name (`strings: { props: "Controls", "tabs.props": "Controls" }` in
+ * its configuration), wherever the text lives: the shell applies the replacements once, before it draws
+ * (`configureStrings`), as a translation is set up, and the later texts take them when they load
+ * (`lateStrings`, `textsOfGroup`). A text that takes values (`allStories(count)`) stays the shell's.
  *
  * @module
  */
@@ -15,6 +20,7 @@ declare const shellStrings: {
     searchPlaceholder: string;
     searchLabel: string;
     componentsNav: string;
+    docsNav: string;
     sidebarWidth: string;
     hideSidebar: string;
     showSidebar: string;
@@ -27,16 +33,11 @@ declare const shellStrings: {
     related: string;
     view: string;
     viewChanged: string;
+    viewMenuError: string;
+    compareError: string;
     controlChanged: (control: string) => string;
-    controlKey: (control: string, key: string | undefined) => string;
     cycleKey: (control: string, key: string) => string;
-    changeKey: string;
-    pressAKey: string;
     aboutControl: (control: string) => string;
-    namedViews: string;
-    saveView: string;
-    viewName: string;
-    removeView: (name: string) => string;
     backdrop: string;
     backdropPlain: string;
     sheets: string;
@@ -47,33 +48,22 @@ declare const shellStrings: {
     };
     text: string;
     textScale: (scale: TextScale) => string;
-    resetView: string;
-    viewInAddress: string;
-    pinControl: (label: string) => string;
-    hideControl: (label: string) => string;
-    showControl: (label: string) => string;
-    moveControl: (label: string) => string;
-    moveControlHint: string;
-    controlMoved: (label: string, position: number, count: number) => string;
     controlMenu: (label: string) => string;
     unpinControl: string;
     hideInView: string;
     showInView: string;
-    pinnedNoRoom: string;
-    resetToolbar: string;
-    wrapToolbar: string;
-    hiddenControls: (count: number, pinned: number) => string;
-    toolbarInBrowser: string;
     compare: string;
     compareOff: string;
     compareText: string;
     compareSheets: string;
     compareOf: (labels: readonly string[]) => string;
-    compareCell: (labels: readonly string[]) => string;
     width: string;
     widthFill: string;
     widthPx: (width: number) => string;
     copyStoryId: string;
+    embedStory: string;
+    embedFailed: string;
+    embedPanelFailed: string;
     clearSearch: string;
     fromTexts: string;
     backToText: string;
@@ -94,6 +84,13 @@ declare const shellStrings: {
     heightHandle: string;
     heightHandleHint: string;
     widthFillNote: string;
+    device: string;
+    deviceNone: string;
+    devicePhones: string;
+    deviceGeneric: string;
+    deviceTablets: string;
+    deviceTurn: string;
+    setByDevice: string;
     panel: string;
     panelHeight: string;
     closePanel: string;
@@ -106,82 +103,48 @@ declare const shellStrings: {
         a11y: string;
         signature: string;
     };
+    openInFigma: string;
     logic: string;
     logicHint: string;
     signatureParameter: string;
     signatureReturns: string;
     signatureNone: string;
-    playTitle: string;
     playStatus: {
         running: string;
         passed: string;
         failed: string;
     };
-    playTime: (ms: number) => string;
-    playAgain: string;
-    playNoSteps: string;
     fixedExamples: string;
     allProps: string;
     openFrame: string;
     code: string;
-    codeFromArgs: string;
-    codeRender: string;
+    codeLoading: string;
     codeError: string;
-    copy: string;
     copied: string;
     matrix: string;
     matrixNone: string;
     matrixColumns: string;
     a11y: string;
-    a11yCheck: string;
-    a11yRunning: string;
     a11yPasses: string;
     a11yCount: (count: number) => string;
-    a11yNone: string;
-    a11yError: string;
-    a11yNotInCompare: string;
     replay: string;
-    clockLabel: string;
-    clockPause: string;
-    clockResume: string;
-    clockRestart: string;
-    clockSpeed: string;
-    clockRate: (rate: number) => string;
     loadingStory: string;
-    apiReference: string;
-    apiProp: string;
-    apiEvent: string;
     apiType: string;
-    apiSignature: string;
-    apiDefault: string;
     apiWhat: string;
-    showCode: string;
-    hideCode: string;
-    openStory: string;
-    usedIn: string;
-    usedInThrough: string;
-    usedInMore: (count: number) => string;
-    usedInStories: (count: number) => string;
-    openStoryNamed: (name: string) => string;
-    touch: string;
-    touchNamed: (name: string) => string;
-    fillPage: string;
-    fillPageNamed: (name: string) => string;
-    backToPlace: string;
-    backToPlaceNamed: (name: string) => string;
-    examples: string;
-    pageError: string;
+    propCount: (count: number) => string;
+    audience: string;
+    audiences: {
+        everyone: string;
+        designer: string;
+        coder: string;
+        tester: string;
+    };
+    audienceElsewhere: string;
     storyLabel: string;
     frameTitle: (component: string, story: string) => string;
     home: string;
-    homeEmpty: string;
-    homeSummary: (components: number, sources: number) => string;
-    homeIntroError: string;
-    recentlyOpened: string;
-    componentsCount: (count: number) => string;
-    showAll: (count: number) => string;
-    showFewer: string;
     unknownStory: (id: string) => string;
+    unknownPage: (id: string) => string;
     unknownComponent: (id: string) => string;
     props: string;
     propGroups: {
@@ -197,6 +160,8 @@ declare const shellStrings: {
     rangeValue: (prop: string) => string;
     setByStory: string;
     required: string;
+    requiredFirst: string;
+    requiredFirstHint: string;
     resetArgs: string;
     appearance: string;
     appearanceOf: (name: string) => string;
@@ -204,21 +169,18 @@ declare const shellStrings: {
         light: string;
         dark: string;
         system: string;
+        story: string;
     };
     worstCase: string;
     worstCaseHint: string;
     spills: (count: number) => string;
-    events: string;
-    calls: string;
-    noCalls: string;
-    clearCalls: string;
     parts: string;
     partCount: (count: number) => string;
-    partsList: string;
-    styleHooks: string;
-    testIds: string;
     noProps: string;
     docsLoading: string;
+    tabLoading: string;
+    tabError: string;
+    pageLoadError: string;
     docsError: string;
     indexProblems: string;
 };
@@ -232,5 +194,21 @@ export declare const STRINGS: ShellStrings;
  * @param replacements - the new texts, by their path (`tabs.props`).
  */
 export declare const configureStrings: (replacements: Readonly<Record<string, string>>) => void;
+/**
+ * The texts of a part of the shell loaded on first use (the docs pages), with the catalogue's replacements applied as
+ * they load: they live with their part, so the first load does not carry them, and keep their names among the shell's
+ * texts, so a catalogue replaces them as any other.
+ *
+ * @param texts - the part's texts, as Forgebook writes them.
+ * @returns the same texts, replaced where the catalogue asks.
+ */
+export declare const lateStrings: <TTexts extends Record<string, unknown>>(texts: TTexts) => TTexts;
+/**
+ * Texts kept out of the first load, with the catalogue's replacements applied as those of `STRINGS` are.
+ *
+ * @param group - their name among the texts (`audienceTexts`): a replacement's path starts with it.
+ * @param texts - the texts.
+ * @returns the same texts, changed in place.
+ */
+export declare const textsOfGroup: <TTexts extends Record<string, unknown>>(group: string, texts: TTexts) => TTexts;
 export {};
-//# sourceMappingURL=strings.d.ts.map

package/dist/src/shell/strings.js

@@ -2,63 +2,48 @@
 // biome-ignore lint/nursery/useExplicitType: the texts' type is their own shape (`ShellStrings`); a written one would repeat every key
 const shellStrings = {
     searchPlaceholder: "Search",
-    searchLabel: "Search components and stories",
+    searchLabel: "Search components, stories, props and docs",
     componentsNav: "Components",
+    docsNav: "Docs",
     sidebarWidth: "Sidebar width",
     hideSidebar: "Hide the sidebar",
     showSidebar: "Show the sidebar",
     storiesNav: "Stories",
     allStories: (count) => `All ${count} stories`,
-    noMatch: "No component matches",
+    noMatch: "No name matches",
     aliasPlace: (family) => `in ${family}`,
     aliasHint: (place) => `Lives in ${place}: listed here too`,
     alsoIn: (places) => `also listed in ${places}`,
     related: "Related",
     view: "View",
     viewChanged: "A view setting is changed",
+    viewMenuError: "The View menu could not be loaded",
+    compareError: "The comparison could not be loaded",
     controlChanged: (control) => `${control}: changed`,
-    controlKey: (control, key) => key === undefined ? `${control}: no key` : `${control}: key ${key.toUpperCase()}`,
     cycleKey: (control, key) => `${control}: press ${key} for the next value, Shift+${key} for the one before`,
-    changeKey: "Change the key: press it, then the new key; Backspace takes it away",
-    pressAKey: "Press a key",
     aboutControl: (control) => `About ${control}`,
-    namedViews: "Views",
-    saveView: "Save view…",
-    viewName: "View name",
-    removeView: (name) => `Remove the view ${name}`,
     backdrop: "Background",
     backdropPlain: "Plain",
     sheets: "Styles",
     sheetChoices: { full: "Full", structure: "Structure only", restyled: "Restyled" },
     text: "Text",
     textScale: (scale) => `${scale}%`,
-    resetView: "Reset to defaults",
-    viewInAddress: "Saved in the address",
-    pinControl: (label) => `Pin ${label} to the toolbar`,
-    hideControl: (label) => `Hide ${label} in View`,
-    showControl: (label) => `Show ${label}`,
-    moveControl: (label) => `Move ${label}`,
-    moveControlHint: "Drag, or press the arrow keys",
-    controlMoved: (label, position, count) => `${label}, ${position} of ${count}`,
     controlMenu: (label) => `${label} on the toolbar`,
     unpinControl: "Remove from the toolbar",
     hideInView: "Hide in View",
     showInView: "Show in View",
-    pinnedNoRoom: "Pinned: back on the toolbar when there is room",
-    resetToolbar: "Reset toolbar",
-    wrapToolbar: "Wrap the toolbar onto more lines when it is full",
-    hiddenControls: (count, pinned) => pinned === 0 ? `${count} hidden` : `${count} hidden · ${pinned} on the toolbar`,
-    toolbarInBrowser: "The toolbar is kept in this browser",
     compare: "Compare",
     compareOff: "Off",
     compareText: "Text sizes",
     compareSheets: "Styles",
     compareOf: (labels) => labels.join(" × "),
-    compareCell: (labels) => labels.join(" · "),
     width: "Width",
     widthFill: "Fill",
     widthPx: (width) => `${width}`,
     copyStoryId: "Copy the story's id",
+    embedStory: "Embed this story",
+    embedFailed: "This story could not be shown.",
+    embedPanelFailed: "This could not load: reload the page to try again.",
     clearSearch: "Clear the search",
     fromTexts: "From the story's texts:",
     backToText: "Back to the text",
@@ -79,6 +64,13 @@ const shellStrings = {
     heightHandle: "Story height",
     heightHandleHint: "Drag to change the story's height; double-click for its own",
     widthFillNote: "Fill: the story takes the whole stage",
+    device: "Device",
+    deviceNone: "No frame",
+    devicePhones: "Phones",
+    deviceGeneric: "Generic phone",
+    deviceTablets: "Tablets",
+    deviceTurn: "Turn the device",
+    setByDevice: "Set by the device frame",
     panel: "Panel",
     panelHeight: "Panel height",
     closePanel: "Close the panel",
@@ -91,78 +83,39 @@ const shellStrings = {
         a11y: "Accessibility",
         signature: "Signature"
     },
+    openInFigma: "Open in Figma",
     logic: "Logic",
     logicHint: "About logic, not looks: a scene that uses the hook or the function",
     signatureParameter: "Parameter",
     signatureReturns: "Returns",
     signatureNone: "It takes no parameters.",
-    playTitle: "Play function",
     playStatus: { running: "running", passed: "passed", failed: "failed" },
-    playTime: (ms) => `${ms} ms`,
-    playAgain: "Run again",
-    playNoSteps: "The play names no steps: wrap its parts in step(label, run) to see them here.",
     fixedExamples: "This story draws fixed examples: its props are not set from here. Every prop, for reading:",
     allProps: "Props",
     openFrame: "Open in a new tab",
     code: "Code",
-    codeFromArgs: "from the args",
-    codeRender: "the story's render",
+    codeLoading: "Reading the story's code…",
     codeError: "The story's code could not be read",
-    copy: "Copy",
     copied: "Copied",
     matrix: "Matrix",
     matrixNone: "—",
     matrixColumns: "Matrix columns",
     a11y: "Accessibility",
-    a11yCheck: "Check the story",
-    a11yRunning: "Checking…",
     a11yPasses: "passes",
     a11yCount: (count) => `${count} ${count === 1 ? "problem" : "problems"}`,
-    a11yNone: "No WCAG 2.2 A or AA rule is broken in the story as it is now.",
-    a11yError: "The check could not run",
-    a11yNotInCompare: "One story at a time: leave Compare to check it",
     replay: "Replay",
-    clockLabel: "Story clock",
-    clockPause: "Pause the clock",
-    clockResume: "Resume the clock",
-    clockRestart: "Restart",
-    clockSpeed: "Clock speed",
-    clockRate: (rate) => `×${rate}`,
     loadingStory: "Loading the story…",
-    apiReference: "API reference",
-    apiProp: "Prop",
-    apiEvent: "Event",
     apiType: "Type",
-    apiSignature: "Signature",
-    apiDefault: "Default",
     apiWhat: "What it does",
-    showCode: "Show code",
-    hideCode: "Hide code",
-    openStory: "Open the story",
-    usedIn: "Used in",
-    usedInThrough: "through another component",
-    usedInMore: (count) => `and ${count} more`,
-    usedInStories: (count) => (count === 1 ? "1 story" : `${count} stories`),
-    openStoryNamed: (name) => `Open the story ${name}`,
-    touch: "Touch",
-    touchNamed: (name) => `Touch ${name} with a finger`,
-    fillPage: "Fill the page",
-    fillPageNamed: (name) => `Fill the page with ${name}`,
-    backToPlace: "Back to its place",
-    backToPlaceNamed: (name) => `Put ${name} back in its place`,
-    examples: "Examples",
-    pageError: "The component's page could not be read",
+    propCount: (count) => `${count} ${count === 1 ? "prop" : "props"}`,
+    audience: "Reading for",
+    audiences: { everyone: "Everyone", designer: "Designers", coder: "Coders", tester: "Testers" },
+    audienceElsewhere: "Changes a component's page",
     storyLabel: "Story",
     frameTitle: (component, story) => `${component}: ${story}`,
     home: "Home",
-    homeEmpty: "No stories yet: a source with story files shows its families here.",
-    homeSummary: (components, sources) => `${components} ${components === 1 ? "component" : "components"} in ${sources} ${sources === 1 ? "library" : "libraries"}.`,
-    homeIntroError: "The library's introduction could not be read",
-    recentlyOpened: "Recently opened",
-    componentsCount: (count) => `${count} ${count === 1 ? "component" : "components"}`,
-    showAll: (count) => `Show all ${count}`,
-    showFewer: "Show fewer",
     unknownStory: (id) => `No story "${id}": it may have been renamed. Pick one in the sidebar.`,
+    unknownPage: (id) => `No page "${id}": it may have been renamed. Pick one in the sidebar.`,
     unknownComponent: (id) => `No component "${id}": it may have been renamed. Pick one in the sidebar.`,
     props: "Props",
     propGroups: { choice: "Choices", text: "Text and numbers", toggle: "Toggles" },
@@ -174,10 +127,12 @@ const shellStrings = {
     rangeValue: (prop) => `${prop}: value`,
     setByStory: "Set by the story",
     required: "Required",
+    requiredFirst: "Required first",
+    requiredFirstHint: "Every component's required props before the others; kept in this browser",
     resetArgs: "Reset",
     appearance: "Appearance",
     appearanceOf: (name) => `Appearance: ${name}`,
-    appearances: { light: "Light", dark: "Dark", system: "System" },
+    appearances: { light: "Light", dark: "Dark", system: "System", story: "Follow the story" },
     worstCase: "Worst case",
     worstCaseHint: "Long texts with a word too long to break, huge numbers: the elements that spill are outlined",
     spills: (count) => {
@@ -185,22 +140,20 @@ const shellStrings = {
             return "Nothing spills";
         return count === 1 ? "1 element spills" : `${count} elements spill`;
     },
-    events: "Events",
-    calls: "Calls",
-    noCalls: "No call yet",
-    clearCalls: "Clear",
     parts: "Parts and styling",
     partCount: (count) => `${count} ${count === 1 ? "part" : "parts"}`,
-    partsList: "Parts",
-    styleHooks: "Styling attributes",
-    testIds: "Test ids",
     noProps: "This page has no props",
     docsLoading: "Reading the component…",
+    tabLoading: "Loading the tab…",
+    tabError: "The tab could not be loaded",
+    pageLoadError: "The page could not be loaded",
     docsError: "The component could not be read",
     indexProblems: "Some story files could not be placed"
 };
 /** The shell's texts, as shown. */
 export const STRINGS = shellStrings;
+/** The catalogue's replacements, for the texts that load after it set them. */
+let catalogueReplacements = {};
 /**
  * Whether a value is a group of texts (`tabs`), whose members a path can name.
  *
@@ -234,7 +187,31 @@ const replaceText = (texts, path, text) => {
  * @param replacements - the new texts, by their path (`tabs.props`).
  */
 export const configureStrings = (replacements) => {
+    catalogueReplacements = replacements;
     for (const [path, text] of Object.entries(replacements))
         replaceText(STRINGS, path.split("."), text);
 };
-//# sourceMappingURL=strings.js.map
+/**
+ * The texts of a part of the shell loaded on first use (the docs pages), with the catalogue's replacements applied as
+ * they load: they live with their part, so the first load does not carry them, and keep their names among the shell's
+ * texts, so a catalogue replaces them as any other.
+ *
+ * @param texts - the part's texts, as Forgebook writes them.
+ * @returns the same texts, replaced where the catalogue asks.
+ */
+export const lateStrings = (texts) => {
+    for (const [path, text] of Object.entries(catalogueReplacements))
+        replaceText(texts, path.split("."), text);
+    return texts;
+};
+/**
+ * Texts kept out of the first load, with the catalogue's replacements applied as those of `STRINGS` are.
+ *
+ * @param group - their name among the texts (`audienceTexts`): a replacement's path starts with it.
+ * @param texts - the texts.
+ * @returns the same texts, changed in place.
+ */
+export const textsOfGroup = (group, texts) => {
+    lateStrings({ [group]: texts });
+    return texts;
+};