forgebook 0.3.3 → 0.4.1

package/dist/src/shell/catalogueContext.js

@@ -14,4 +14,9 @@ export const NO_PLUGINS = [];
  *
  * @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]);
+export const useConfiguredCatalogue = ({ title, switches, languages = NO_LANGUAGES, lists, plugins = NO_PLUGINS }, readStored) => useMemo(() => {
+    const settings = catalogueSettings(title, catalogueSwitches(switches, languages, lists?.controls), lists, plugins.flatMap((plugin) => plugin.tabs.map((tab) => tab.id)));
+    // a reader's choice stands in for the catalogue's default on their own pages; an address that names one comes first
+    const remembered = readStored?.(`${settings.id}:play`);
+    return remembered === "on" || remembered === "off" ? { ...settings, readerPlay: remembered } : settings;
+}, [title, switches, languages, lists, plugins, readStored]);

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

@@ -0,0 +1,27 @@
+/**
+ * A sentence's code spans, read as CommonMark reads them: a run of backticks opens a span that the next run of the same
+ * length closes, so a span holding a backtick is written with a longer run of them. Used by `CodeText.tsx`, and by
+ * what writes a sentence around a type that may hold backticks (a template literal type).
+ *
+ * @module
+ */
+/** One piece of a sentence: text, or code. */
+export type SentencePiece = {
+    /** The piece's text, a code span's without its backticks. */
+    readonly text: string;
+    /** Whether it is code. */
+    readonly isCode: boolean;
+};
+/**
+ * A sentence split into text and code spans. A run of backticks no run of the same length closes stays text.
+ *
+ * @param sentence - the sentence.
+ */
+export declare const sentencePieces: (sentence: string) => SentencePiece[];
+/**
+ * A text written as one code span, whatever backticks it holds: a run longer than any inside, with a space each side
+ * when the text starts or ends with a backtick.
+ *
+ * @param text - the code.
+ */
+export declare const codeSpan: (text: string) => string;

package/dist/src/shell/codeSpans.js

@@ -0,0 +1,76 @@
+/**
+ * A sentence's code spans, read as CommonMark reads them: a run of backticks opens a span that the next run of the same
+ * length closes, so a span holding a backtick is written with a longer run of them. Used by `CodeText.tsx`, and by
+ * what writes a sentence around a type that may hold backticks (a template literal type).
+ *
+ * @module
+ */
+/** A code span's text as CommonMark trims it: one space each side, when both are there and it is not only spaces. */
+const trimmedSpan = (text) => text.length >= 2 && text.startsWith(" ") && text.endsWith(" ") && text.trim() !== ""
+    ? text.slice(1, -1)
+    : text;
+/**
+ * A sentence split into text and code spans. A run of backticks no run of the same length closes stays text.
+ *
+ * @param sentence - the sentence.
+ */
+export const sentencePieces = (sentence) => {
+    const pieces = [];
+    let text = "";
+    let at = 0;
+    while (at < sentence.length) {
+        const open = sentence.indexOf("`", at);
+        if (open === -1)
+            break;
+        let length = 1;
+        while (sentence[open + length] === "`")
+            length += 1;
+        const close = closingRun(sentence, open + length, length);
+        if (close === -1) {
+            text += sentence.slice(at, open + length);
+            at = open + length;
+            continue;
+        }
+        text += sentence.slice(at, open);
+        if (text !== "")
+            pieces.push({ text, isCode: false });
+        text = "";
+        pieces.push({ text: trimmedSpan(sentence.slice(open + length, close)), isCode: true });
+        at = close + length;
+    }
+    text += sentence.slice(at);
+    if (text !== "")
+        pieces.push({ text, isCode: false });
+    return pieces;
+};
+/**
+ * Where the run of exactly `length` backticks that closes a span starts, or -1.
+ *
+ * @param sentence - the sentence.
+ * @param from - where the span's text starts.
+ * @param length - the opening run's length.
+ */
+const closingRun = (sentence, from, length) => {
+    let at = sentence.indexOf("`", from);
+    while (at !== -1) {
+        let run = 1;
+        while (sentence[at + run] === "`")
+            run += 1;
+        if (run === length)
+            return at;
+        at = sentence.indexOf("`", at + run);
+    }
+    return -1;
+};
+/**
+ * A text written as one code span, whatever backticks it holds: a run longer than any inside, with a space each side
+ * when the text starts or ends with a backtick.
+ *
+ * @param text - the code.
+ */
+export const codeSpan = (text) => {
+    const longest = Math.max(0, ...(text.match(/`+/g) ?? []).map((run) => run.length));
+    const fence = "`".repeat(longest + 1);
+    const padding = text.startsWith("`") || text.endsWith("`") ? " " : "";
+    return `${fence}${padding}${text}${padding}${fence}`;
+};

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

@@ -6,7 +6,8 @@
  * Every value of a switch is drawn, its default too, so the frames show where the story starts; only the colour
  * scheme's system value is left out, since it draws as light or as dark, one of the others. A value that writes
  * nothing on the root (`isUnset`: the stories' own text, left to right, the mouse) is a value like the rest. In a pair, a cell's label leaves out the second switch's default (`Light`, `Light · More contrast`), so the familiar
- * value reads alone. Pure.
+ * value reads alone. A cell another switch's value contradicts is left out (a look drawn only for dark, at light): it
+ * would draw the same as the cell of the implied value, under a name that is not what it shows. Pure.
  *
  * @module
  */
@@ -31,5 +32,6 @@ export type CompareVariant = {
  *
  * @param axes - the compared axes.
  * @param catalogue - the catalogue's switches and text sizes.
+ * @param view - the stage's view, whose other switches may imply a compared one.
  */
-export declare const compareVariants: (axes: CompareAxes, catalogue: CompareCatalogue) => CompareVariant[];
+export declare const compareVariants: (axes: CompareAxes, catalogue: CompareCatalogue, view: ViewState) => CompareVariant[];

package/dist/src/shell/compareVariants.js

@@ -6,10 +6,12 @@
  * Every value of a switch is drawn, its default too, so the frames show where the story starts; only the colour
  * scheme's system value is left out, since it draws as light or as dark, one of the others. A value that writes
  * nothing on the root (`isUnset`: the stories' own text, left to right, the mouse) is a value like the rest. In a pair, a cell's label leaves out the second switch's default (`Light`, `Light · More contrast`), so the familiar
- * value reads alone. Pure.
+ * value reads alone. A cell another switch's value contradicts is left out (a look drawn only for dark, at light): it
+ * would draw the same as the cell of the implied value, under a name that is not what it shows. Pure.
  *
  * @module
  */
+import { shownSwitches } from "../switches.js";
 import { SHEETS_CHOICES } from "../viewState.js";
 import { LATER_STRINGS } from "./laterStrings.js";
 import { STRINGS } from "./strings.js";
@@ -54,16 +56,22 @@ const axisVariants = (axis, catalogue) => {
  *
  * @param axes - the compared axes.
  * @param catalogue - the catalogue's switches and text sizes.
+ * @param view - the stage's view, whose other switches may imply a compared one.
  */
-export const compareVariants = (axes, catalogue) => {
+export const compareVariants = (axes, catalogue, view) => {
     const [first, second] = axes;
     if (first === undefined)
         return [];
     const firsts = axisVariants(first, catalogue);
-    if (second === undefined)
-        return firsts;
-    return axisVariants(second, catalogue).flatMap((outer) => firsts.map((inner) => ({
-        label: LATER_STRINGS.compareCell(outer.isDefault ? [inner.label] : [inner.label, outer.label]),
-        viewOf: (view) => outer.viewOf(inner.viewOf(view))
-    })));
+    const cells = second === undefined
+        ? firsts
+        : axisVariants(second, catalogue).flatMap((outer) => firsts.map((inner) => ({
+            label: LATER_STRINGS.compareCell(outer.isDefault ? [inner.label] : [inner.label, outer.label]),
+            viewOf: (stage) => outer.viewOf(inner.viewOf(stage))
+        })));
+    return cells.filter((cell) => {
+        const { switches } = cell.viewOf(view);
+        const shown = shownSwitches(switches, catalogue.switches);
+        return axes.every((axis) => shown[axis] === switches[axis]);
+    });
 };

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

@@ -0,0 +1,23 @@
+/**
+ * Whether this catalogue composes others (`refs`): a constant the plugin writes into the build (`define`), so a
+ * catalogue that composes none has every part of composition removed from its shell, and its first load carries none of
+ * it. And the composed catalogues themselves, set by `mountShell` behind that constant: a page holds one shell, so they
+ * are a fact of the page, as the frames' origin is, and a shell that composes none keeps not even their name.
+ *
+ * @remarks
+ * Read as a value that may be missing, so a shell bundled by something other than Forgebook's plugin (a test) runs with
+ * composition off rather than failing on a name nobody defined.
+ *
+ * @module
+ */
+import type { ShellRefs } from "./refParts.tsx";
+/** Whether this catalogue composes others. */
+export declare const HAS_REFS: boolean;
+/**
+ * Sets the composed catalogues, before the shell renders.
+ *
+ * @param refs - the composed catalogues, if the generated page gives any.
+ */
+export declare const setShellRefs: (refs: ShellRefs | undefined) => void;
+/** The composed catalogues; none until `mountShell` set them, or for a catalogue that composes none. */
+export declare const shellRefs: () => ShellRefs | undefined;

package/dist/src/shell/composition.js

@@ -0,0 +1,26 @@
+/**
+ * Whether this catalogue composes others (`refs`): a constant the plugin writes into the build (`define`), so a
+ * catalogue that composes none has every part of composition removed from its shell, and its first load carries none of
+ * it. And the composed catalogues themselves, set by `mountShell` behind that constant: a page holds one shell, so they
+ * are a fact of the page, as the frames' origin is, and a shell that composes none keeps not even their name.
+ *
+ * @remarks
+ * Read as a value that may be missing, so a shell bundled by something other than Forgebook's plugin (a test) runs with
+ * composition off rather than failing on a name nobody defined.
+ *
+ * @module
+ */
+/** Whether this catalogue composes others. */
+export const HAS_REFS = typeof __FORGEBOOK_REFS__ !== "undefined" && __FORGEBOOK_REFS__ === true;
+/** The composed catalogues, once `mountShell` set them. */
+let pageRefs;
+/**
+ * Sets the composed catalogues, before the shell renders.
+ *
+ * @param refs - the composed catalogues, if the generated page gives any.
+ */
+export const setShellRefs = (refs) => {
+    pageRefs = refs;
+};
+/** The composed catalogues; none until `mountShell` set them, or for a catalogue that composes none. */
+export const shellRefs = () => pageRefs;

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

@@ -4,7 +4,7 @@
  *
  * @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.
+ * fixes (or a width), a switch another switch's value implies, and a control the compare view draws side by side.
  *
  * @module
  */

package/dist/src/shell/controlCycle.js

@@ -4,12 +4,13 @@
  *
  * @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.
+ * fixes (or a width), a switch another switch's value implies, and a control the compare view draws side by side.
  *
  * @module
  */
 import { AUDIENCE_IDS } from "../audiences.js";
 import { cycledValue, switchValues } from "../controlKeys.js";
+import { impliedSwitches } from "../switches.js";
 import { isComparing, PLAIN_BACKDROP, SHEETS_CHOICES } from "../viewState.js";
 import { withSwitch } from "./switchView.js";
 /**
@@ -52,7 +53,7 @@ export const cycledView = (view, id, step, catalogue, fixed, isStoryPage) => {
         return undefined;
     const each = catalogue.switches.find((candidate) => candidate.id === id);
     if (each !== undefined) {
-        if (fixed.switches[id] !== undefined)
+        if (fixed.switches[id] !== undefined || impliedSwitches(view.switches, catalogue.switches).has(id))
             return undefined;
         const current = view.switches[id] ?? each.default;
         return withSwitch(view, each, cycledValue(switchValues(each), current, step));

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

@@ -0,0 +1,62 @@
+/**
+ * The custom controls of a catalogue, as the shell loads them: a module's check on arrival, and the check of a value before
+ * it reaches the story. Loaded with the first story that names such a control, so a catalogue with none never asks for it.
+ *
+ * @remarks
+ * A module is the catalogue's own code, run with a plugin's trust, and it can be wrong in every way: named by no one, gone,
+ * throwing as it loads, exporting something else. Each ends in a sentence beside the field; none reaches the panel as an
+ * exception.
+ *
+ * @module
+ */
+import type { ArgControlModule } from "../argControl.ts";
+import type { ArgValue } from "../messages.ts";
+/** The texts of the custom controls' host. */
+export declare const CONTROL_STRINGS: {
+    controlUnknown: (name: string) => string;
+    controlFailed: (name: string, reason: string) => string;
+    controlMalformed: (name: string) => string;
+    controlThrew: (name: string, reason: string) => string;
+    controlValue: (name: string, reason: string) => string;
+    controlUnsafe: string;
+};
+/** A catalogue's custom controls: how to load each, by name. */
+export type ArgControlLoaders = Readonly<Record<string, () => Promise<unknown>>>;
+/** A control as loading it ended. */
+export type LoadedControl = {
+    readonly status: "ready";
+    readonly module: ArgControlModule;
+} | {
+    readonly status: "failed";
+    readonly message: string;
+};
+/**
+ * A control, loaded.
+ *
+ * @param name - its name.
+ * @param loaders - the catalogue's custom controls.
+ */
+export declare const loadControl: (name: string, loaders: ArgControlLoaders) => Promise<LoadedControl>;
+/**
+ * What is wrong with a value for a control: its schema's word, or that it holds what would run if a component spread it on
+ * an element, which no schema's author is asked to think of.
+ *
+ * @param module - the control's module.
+ * @param value - the value.
+ * @returns the sentence; none when it fits.
+ */
+export declare const controlValueProblem: (module: ArgControlModule, value: ArgValue) => string | undefined;
+/**
+ * The checks of a story's custom controls, by name; a control that cannot load has none, which refuses its values.
+ *
+ * @param names - the controls the story names.
+ * @param loaders - the catalogue's custom controls.
+ */
+export declare const customChecksOf: (names: readonly string[], loaders: ArgControlLoaders) => Promise<Readonly<Record<string, (value: ArgValue) => string | undefined>>>;
+/**
+ * A control's texts as the catalogue words them: its `strings` under `argControls.<name>.`, by the rest of the key.
+ *
+ * @param strings - the catalogue's replaced texts.
+ * @param name - the control's name.
+ */
+export declare const controlStringsOf: (strings: Readonly<Record<string, string>>, name: string) => Readonly<Record<string, string>>;

package/dist/src/shell/customControls.js

@@ -0,0 +1,81 @@
+import { holdsUnsafePart } from "../shapeValues.js";
+import { isValueSchema, schemaProblem } from "../valueSchema.js";
+import { lateStrings } from "./strings.js";
+/** The texts of the custom controls' host. */
+export const CONTROL_STRINGS = lateStrings({
+    controlUnknown: (name) => `No control is registered as "${name}": add it to argControls in forgebook.config`,
+    controlFailed: (name, reason) => `The control "${name}" could not be loaded: ${reason}`,
+    controlMalformed: (name) => `The control "${name}" must export mount, a function, and schema, of JSON Schema's keywords Forgebook reads`,
+    controlThrew: (name, reason) => `The control "${name}" failed: ${reason}`,
+    controlValue: (name, reason) => `The control "${name}" was given a value it refuses: ${reason}`,
+    controlUnsafe: "It holds what a link may not give"
+});
+/** Whether a value is a plain object with a function `mount`. */
+const isControlModule = (value) => typeof value === "object" &&
+    value !== null &&
+    "mount" in value &&
+    typeof value.mount === "function" &&
+    "schema" in value &&
+    isValueSchema(value.schema) &&
+    (!("toCode" in value) || value.toCode === undefined || typeof value.toCode === "function");
+/** Each control's load, kept: every field and check of a page share one. */
+const loads = new Map();
+/** Loads one control's module, once, and reads what it exports. */
+const readControl = async (name, load) => {
+    try {
+        const module = await load();
+        return isControlModule(module)
+            ? { status: "ready", module }
+            : { status: "failed", message: CONTROL_STRINGS.controlMalformed(name) };
+    }
+    catch (error) {
+        const reason = error instanceof Error ? error.message : String(error);
+        return { status: "failed", message: CONTROL_STRINGS.controlFailed(name, reason) };
+    }
+};
+/**
+ * A control, loaded.
+ *
+ * @param name - its name.
+ * @param loaders - the catalogue's custom controls.
+ */
+export const loadControl = (name, loaders) => {
+    const load = Object.hasOwn(loaders, name) ? loaders[name] : undefined;
+    if (load === undefined)
+        return Promise.resolve({ status: "failed", message: CONTROL_STRINGS.controlUnknown(name) });
+    const started = loads.get(load) ?? readControl(name, load);
+    loads.set(load, started);
+    return started;
+};
+/**
+ * What is wrong with a value for a control: its schema's word, or that it holds what would run if a component spread it on
+ * an element, which no schema's author is asked to think of.
+ *
+ * @param module - the control's module.
+ * @param value - the value.
+ * @returns the sentence; none when it fits.
+ */
+export const controlValueProblem = (module, value) => schemaProblem(module.schema, value) ??
+    (holdsUnsafePart(value, true) ? CONTROL_STRINGS.controlUnsafe : undefined);
+/**
+ * The checks of a story's custom controls, by name; a control that cannot load has none, which refuses its values.
+ *
+ * @param names - the controls the story names.
+ * @param loaders - the catalogue's custom controls.
+ */
+export const customChecksOf = async (names, loaders) => {
+    const controls = await Promise.all(names.map(async (name) => [name, await loadControl(name, loaders)]));
+    return Object.fromEntries(controls.flatMap(([name, control]) => control.status === "ready"
+        ? [[name, (value) => controlValueProblem(control.module, value)]]
+        : []));
+};
+/**
+ * A control's texts as the catalogue words them: its `strings` under `argControls.<name>.`, by the rest of the key.
+ *
+ * @param strings - the catalogue's replaced texts.
+ * @param name - the control's name.
+ */
+export const controlStringsOf = (strings, name) => {
+    const prefix = `argControls.${name}.`;
+    return Object.fromEntries(Object.entries(strings).flatMap(([key, text]) => key.startsWith(prefix) && key.length > prefix.length ? [[key.slice(prefix.length), text]] : []));
+};

package/dist/src/shell/docPage.css

@@ -92,9 +92,9 @@
     opacity: 1;
   }
   .forgebook-anchor:focus-visible {
-    outline: 2px solid color-mix(in srgb, var(--forgebook-accent) 35%, transparent);
+    outline: 2px solid var(--forgebook-focus-halo);
     outline-offset: 0;
-    box-shadow: inset 0 0 0 1px var(--forgebook-accent);
+    box-shadow: var(--forgebook-focus-edge);
   }
   .forgebook-docs__code {
     position: relative;
@@ -118,7 +118,7 @@
     margin: 0;
     padding: 0.5rem 1rem;
     box-shadow: inset 0 -1px 0 var(--forgebook-separator);
-    font: 400 0.6875rem/1.6 var(--forgebook-font-mono);
+    font: var(--forgebook-text-mono-small);
     color: var(--forgebook-text-secondary);
     padding-inline-end: 5rem;
     overflow: hidden;
@@ -194,7 +194,7 @@
   }
   .forgebook-aside__title {
     margin: 0;
-    font: 500 0.8125rem/1.35 var(--forgebook-font-sans);
+    font: var(--forgebook-text-row-label);
     font-weight: 600;
     color: var(--forgebook-tone);
   }
@@ -217,7 +217,7 @@
     border-radius: var(--forgebook-radius-control-small) var(--forgebook-radius-control-small) 0 0;
     background: none;
     box-shadow: inset 0 -2px 0 transparent;
-    font: 500 0.8125rem/1.35 var(--forgebook-font-sans);
+    font: var(--forgebook-text-row-label);
     color: var(--forgebook-text-secondary);
     cursor: pointer;
     transition: color 150ms ease-out, box-shadow 150ms ease-out;
@@ -230,9 +230,9 @@
     box-shadow: inset 0 -2px 0 var(--forgebook-accent);
   }
   .forgebook-tabs__tab:focus-visible {
-    outline: 2px solid color-mix(in srgb, var(--forgebook-accent) 35%, transparent);
+    outline: 2px solid var(--forgebook-focus-halo);
     outline-offset: -2px;
-    box-shadow: inset 0 0 0 1px var(--forgebook-accent);
+    box-shadow: var(--forgebook-focus-edge);
   }
   .forgebook-tabs__panel {
     display: grid;
@@ -273,7 +273,7 @@
     border-radius: 50%;
     background: var(--forgebook-surface);
     box-shadow: inset 0 0 0 1px var(--forgebook-edge);
-    font: 500 0.8125rem/1.35 var(--forgebook-font-sans);
+    font: var(--forgebook-text-row-label);
     font-weight: 600;
     color: var(--forgebook-text-secondary);
   }
@@ -311,7 +311,7 @@
     align-items: center;
     gap: 0.25rem;
     margin: 0;
-    font: 600 0.875rem/1.3 var(--forgebook-font-sans);
+    font: var(--forgebook-text-card-title);
   }
   .forgebook-card--link {
     text-decoration: none;
@@ -324,12 +324,12 @@
     box-shadow: 0 0 0 1px var(--forgebook-card-edge-hover), 0 4px 14px var(--forgebook-shadow-lift);
   }
   .forgebook-card--link:focus-visible {
-    outline: 2px solid color-mix(in srgb, var(--forgebook-accent) 35%, transparent);
+    outline: 2px solid var(--forgebook-focus-halo);
     outline-offset: 0;
-    box-shadow: inset 0 0 0 1px var(--forgebook-accent), 0 0 0 1px var(--forgebook-card-edge), 0 1px 3px var(--forgebook-shadow-soft);
+    box-shadow: var(--forgebook-focus-edge), 0 0 0 1px var(--forgebook-card-edge), 0 1px 3px var(--forgebook-shadow-soft);
   }
   .forgebook-card__description {
-    font: 400 0.8125rem/1.4 var(--forgebook-font-sans);
+    font: var(--forgebook-text-body);
     color: var(--forgebook-text-secondary);
   }
   .forgebook-docs__foot {
@@ -357,24 +357,24 @@
     box-shadow: 0 0 0 1px var(--forgebook-card-edge-hover), 0 4px 14px var(--forgebook-shadow-lift);
   }
   .forgebook-docs__around:focus-visible {
-    outline: 2px solid color-mix(in srgb, var(--forgebook-accent) 35%, transparent);
+    outline: 2px solid var(--forgebook-focus-halo);
     outline-offset: 0;
-    box-shadow: inset 0 0 0 1px var(--forgebook-accent), 0 0 0 1px var(--forgebook-card-edge), 0 1px 3px var(--forgebook-shadow-soft);
+    box-shadow: var(--forgebook-focus-edge), 0 0 0 1px var(--forgebook-card-edge), 0 1px 3px var(--forgebook-shadow-soft);
   }
   .forgebook-docs__around-label {
-    font: 400 0.6875rem/1.35 var(--forgebook-font-sans);
+    font: var(--forgebook-text-caption);
     color: var(--forgebook-text-tertiary);
   }
   .forgebook-docs__around-name {
     display: inline-flex;
     align-items: center;
     gap: 0.25rem;
-    font: 500 0.8125rem/1.35 var(--forgebook-font-sans);
+    font: var(--forgebook-text-row-label);
     color: var(--forgebook-accent-text);
   }
   .forgebook-contents__title {
     margin: 0;
-    font: 600 0.6875rem/1.3 var(--forgebook-font-sans);
+    font: var(--forgebook-text-label);
     color: var(--forgebook-text-tertiary);
   }
   .forgebook-contents__list {
@@ -392,7 +392,7 @@
     padding: 0.25rem 0.5rem;
     border-radius: var(--forgebook-radius-control-small);
     box-shadow: inset 2px 0 0 transparent;
-    font: 400 0.78125rem/1.4 var(--forgebook-font-sans);
+    font: var(--forgebook-text-row-compact);
     color: var(--forgebook-text-secondary);
     text-decoration: none;
     transition: color 150ms ease-out, background-color 150ms ease-out;
@@ -406,9 +406,9 @@
     font-weight: 500;
   }
   .forgebook-contents__link:focus-visible {
-    outline: 2px solid color-mix(in srgb, var(--forgebook-accent) 35%, transparent);
+    outline: 2px solid var(--forgebook-focus-halo);
     outline-offset: -2px;
-    box-shadow: inset 0 0 0 1px var(--forgebook-accent);
+    box-shadow: var(--forgebook-focus-edge);
   }
   .forgebook-contents--column {
     position: sticky;
@@ -433,9 +433,9 @@
     border-radius: var(--forgebook-radius-control-small);
   }
   .forgebook-contents--fold > summary:focus-visible {
-    outline: 2px solid color-mix(in srgb, var(--forgebook-accent) 35%, transparent);
+    outline: 2px solid var(--forgebook-focus-halo);
     outline-offset: 0;
-    box-shadow: inset 0 0 0 1px var(--forgebook-accent);
+    box-shadow: var(--forgebook-focus-edge);
   }
   .forgebook-contents--fold > nav {
     margin-top: 0.5rem;

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

@@ -13,11 +13,13 @@
 import type { StoryControlsSetting, StoryFileCode } from "@forgebook/story-format/source";
 import { type PanelArgTypes } from "../argTypes.ts";
 import { type ComponentDocs } from "../componentDocs.ts";
-import type { ArgValue, PanelArgs } from "../messages.ts";
+import type { ArgValue, PanelArgs, PlayStepCommand } from "../messages.ts";
 import type { NamedValues } from "../namedValues.ts";
 import type { PlayTrace } from "../playTrace.ts";
 import type { TreeStory } from "../storyTree.ts";
+import type { ViewState } from "../viewState.ts";
 import type { CheckState } from "./A11yTab.tsx";
+import type { ArgControlLoaders } from "./customControls.ts";
 import type { DockTab } from "./Dock.tsx";
 import type { TextArgNote } from "./PropRows.tsx";
 import type { EventCall } from "./useFrameMessages.ts";
@@ -44,6 +46,16 @@ export type DockTabsInput = {
     readonly actions: readonly string[];
     /** The values of the moment: the story's args with the panel's over them. */
     readonly values: PanelArgs;
+    /** The panel's own values, for what can go back to the story's. */
+    readonly panelArgs: PanelArgs;
+    /** The story's own args, for a control no type describes. */
+    readonly storyArgs: PanelArgs;
+    /** Loads the catalogue's design tokens; none when it has none. */
+    readonly loadTokens: (() => Promise<unknown>) | undefined;
+    /** Loads each custom control the catalogue registers, by name; none when it registers none. */
+    readonly argControls?: ArgControlLoaders | undefined;
+    /** The switches' values of the moment, for the args whose `argTypes.if` reads a global. */
+    readonly globals: Readonly<Record<string, unknown>>;
     /** Called with a changed value; `undefined` removes the panel's value. */
     readonly onValueChange: (name: string, value: ArgValue | undefined) => void;
     /** Removes every value the panel set. */
@@ -62,8 +74,12 @@ export type DockTabsInput = {
     readonly onClearCalls: () => void;
     /** The play function's trace; none for a story without a play (or before it ran). */
     readonly trace: PlayTrace | undefined;
-    /** Runs the play again. */
-    readonly onPlayAgain: () => void;
+    /** Runs the play again, or steps through it. */
+    readonly onPlayStep: (command: PlayStepCommand) => void;
+    /** The view, whose play switch the Interactions tab shows. */
+    readonly view: ViewState;
+    /** Changes the view. */
+    readonly onViewChange: (view: ViewState) => void;
     /** The accessibility check. */
     readonly check: CheckState;
     /** Runs it; none when it cannot run. */