forgebook 0.3.2 → 0.4.0

package/dist/src/shell/valueEditors/valueEditors.css

@@ -0,0 +1,153 @@
+@layer catalogue {
+  .forgebook-value-object,
+  .forgebook-value-list,
+  .forgebook-value-tuple,
+  .forgebook-value-union,
+  .forgebook-value-json,
+  .forgebook-value-search {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    min-width: 0;
+  }
+  .forgebook-value-object[data-depth]:not([data-depth="0"]) {
+    padding-inline-start: 0.5rem;
+    box-shadow: inset 2px 0 0 0 var(--forgebook-separator);
+  }
+  .forgebook-value-tuple {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+  .forgebook-value-tuple > * {
+    flex: 1 1 5rem;
+    min-width: 0;
+  }
+  .forgebook-value-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    min-width: 0;
+  }
+  .forgebook-value-field > input[type=checkbox] {
+    align-self: flex-start;
+  }
+  .forgebook-value-field__head {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+  }
+  .forgebook-value-field__name {
+    font: var(--forgebook-text-mono-small);
+    color: var(--forgebook-text-secondary);
+  }
+  .forgebook-value-list__item {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.375rem;
+    padding: 0.375rem;
+    border-radius: var(--forgebook-radius-control);
+    box-shadow: inset 0 0 0 1px var(--forgebook-edge-field);
+  }
+  .forgebook-value-list__field {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 0.375rem;
+    min-width: 0;
+  }
+  .forgebook-value-list__buttons {
+    display: flex;
+    flex: none;
+    gap: 0.125rem;
+  }
+  .forgebook-value-record__entry {
+    display: flex;
+    flex: 1;
+    flex-wrap: wrap;
+    gap: 0.375rem;
+    min-width: 0;
+  }
+  .forgebook-value-record__entry > * {
+    flex: 1 1 7rem;
+  }
+  .forgebook-value-record__name {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    min-width: 0;
+  }
+  .forgebook-value-add {
+    display: inline-flex;
+    align-self: flex-start;
+    align-items: center;
+    gap: 0.25rem;
+  }
+  .forgebook-value-switch {
+    display: flex;
+    justify-content: flex-end;
+  }
+  .forgebook-value-note {
+    margin: 0;
+    font: var(--forgebook-text-caption);
+    color: var(--forgebook-text-secondary);
+  }
+  .forgebook-value-note[data-tone=problem] {
+    color: var(--forgebook-danger-text);
+  }
+  .forgebook-value-json__text {
+    font: var(--forgebook-text-mono-small);
+    white-space: pre;
+    overflow: auto;
+  }
+  .forgebook-value-search__list {
+    display: flex;
+    flex-direction: column;
+    max-height: 13rem;
+    padding: 0.25rem;
+    overflow-y: auto;
+    border-radius: var(--forgebook-radius-control);
+    background: var(--forgebook-surface);
+    box-shadow: inset 0 0 0 1px var(--forgebook-edge-field);
+  }
+  .forgebook-value-search__option {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    min-height: 1.5rem;
+    padding: 0.125rem 0.375rem;
+    border-radius: var(--forgebook-radius-control-small);
+    font: var(--forgebook-text-row-compact);
+    color: var(--forgebook-text);
+    cursor: pointer;
+  }
+  .forgebook-value-search__option[aria-selected=true] {
+    font-weight: 600;
+  }
+  .forgebook-value-search__option[data-active], .forgebook-value-search__option:hover {
+    background: var(--forgebook-hover);
+  }
+  .forgebook-value-search__swatch {
+    flex: none;
+    width: 0.75rem;
+    height: 0.75rem;
+    border-radius: 50%;
+    box-shadow: inset 0 0 0 1px var(--forgebook-edge-field);
+  }
+  .forgebook-value-search__name {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    min-width: 0;
+    flex: 1 1 auto;
+  }
+  .forgebook-value-search__hint {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    min-width: 0;
+    flex: 0 1 45%;
+    font: var(--forgebook-text-mono-small);
+    color: var(--forgebook-text-secondary);
+    text-align: end;
+  }
+}

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

@@ -6,21 +6,24 @@
  * 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.
+ * value. A number with a highest value takes that value, the largest the story says it accepts. An object's fields take
+ * theirs, a list many items, a mixed union its first member that has a worst case: what the type allows at its fullest.
  *
  * @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";
+import type { ArgValue, PanelArgs } from "../messages.ts";
+import type { NamedValues } from "../namedValues.ts";
+import type { ValueShape } from "../valueShape.ts";
 /**
  * The worst-case args for the props the panel can set.
  *
  * @param props - the props the panel can set.
+ * @param namedValues - the source's named values; none by default.
+ * @param worstOfShape - gives a prop with a shape its worst value, once its module loaded; until then they keep theirs.
  * @returns the args, by prop name; empty when no prop takes a text or a number.
  */
-export declare const worstArgs: (props: readonly PanelProp[]) => PanelArgs;
+export declare const worstArgs: (props: readonly PanelProp[], namedValues?: NamedValues, worstOfShape?: (shape: ValueShape, namedValues: NamedValues) => ArgValue | undefined) => PanelArgs;
 /**
  * Whether the values shown are the worst case: every worst-case arg is set to its worst value.
  *

package/dist/src/shell/worstArgs.js

@@ -6,17 +6,16 @@
  * 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.
+ * value. A number with a highest value takes that value, the largest the story says it accepts. An object's fields take
+ * theirs, a list many items, a mixed union its first member that has a worst case: what the type allows at its fullest.
  *
  * @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}`;
+import { WORST_ARG_TEXT, WORST_NUMBER } from "../worstCase.js";
 /** 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") &&
+    (prop.control === undefined || prop.control === "text" || prop.control === "textarea") &&
     !isColorProp(prop);
 /** Whether a prop is set as a number, with no other control named. */
 const isNumber = (prop) => prop.kind === "number" &&
@@ -25,9 +24,15 @@ const isNumber = (prop) => prop.kind === "number" &&
  * The worst-case args for the props the panel can set.
  *
  * @param props - the props the panel can set.
+ * @param namedValues - the source's named values; none by default.
+ * @param worstOfShape - gives a prop with a shape its worst value, once its module loaded; until then they keep theirs.
  * @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) => {
+export const worstArgs = (props, namedValues = {}, worstOfShape) => Object.fromEntries(props.flatMap((prop) => {
+    if (prop.shape !== undefined && (prop.control === undefined || prop.control === "object")) {
+        const worst = worstOfShape?.(prop.shape, namedValues);
+        return worst === undefined ? [] : [[prop.name, worst]];
+    }
     if (isText(prop))
         return [[prop.name, WORST_ARG_TEXT]];
     if (isNumber(prop))
@@ -42,5 +47,7 @@ export const worstArgs = (props) => Object.fromEntries(props.flatMap((prop) => {
  */
 export const isWorstCase = (worst, values) => {
     const entries = Object.entries(worst);
-    return entries.length > 0 && entries.every(([name, value]) => values[name] === value);
+    // compared as text: a list or an object comes back from the address as another one that reads the same
+    return (entries.length > 0 &&
+        entries.every(([name, value]) => JSON.stringify(values[name]) === JSON.stringify(value)));
 };

package/dist/src/shellTheme.d.ts

@@ -19,7 +19,7 @@ export declare const LIGHT_PALETTE: Palette;
 /** The shell's dark palette, every role. */
 export declare const DARK_PALETTE: Palette;
 /** The text roles, each read on every ground. */
-export declare const TEXT_ROLES: readonly ["text", "text-secondary", "text-tertiary", "accent-text", "danger-text"];
+export declare const TEXT_ROLES: readonly ["text", "text-secondary", "text-tertiary", "accent-text", "danger-text", "caution-text", "positive-text"];
 /** The grounds text is read on. */
 export declare const GROUND_ROLES: readonly ["window", "sidebar", "surface"];
 /** The code roles, read on the code background. */

package/dist/src/shellTheme.js

@@ -14,6 +14,8 @@ export const LIGHT_PALETTE = {
     "accent-text": "#0059d2",
     "on-accent": "#fff",
     "danger-text": "#bc1f16",
+    "caution-text": "#935200",
+    "positive-text": "#077229",
     "code-keyword": "#7036c4",
     "code-type": "#0059d2",
     "code-string": "#077229",
@@ -46,6 +48,8 @@ export const DARK_PALETTE = {
     "accent-text": "#7ab3ff",
     "on-accent": "#fff",
     "danger-text": "#ff8a80",
+    "caution-text": "#f2b46b",
+    "positive-text": "#7fdc8f",
     "code-keyword": "#c9a8ff",
     "code-type": "#7ab3ff",
     "code-string": "#7fdc8f",
@@ -75,6 +79,8 @@ const THEME_ROLES = [
     "accent",
     "accent-text",
     "danger-text",
+    "caution-text",
+    "positive-text",
     "code-keyword",
     "code-type",
     "code-string",
@@ -87,7 +93,15 @@ const TEXT_CONTRAST = 4.5;
 /** The contrast a focus ring needs against what it sits on, WCAG 2.1 AA for non-text. */
 const FOCUS_CONTRAST = 3;
 /** The text roles, each read on every ground. */
-export const TEXT_ROLES = ["text", "text-secondary", "text-tertiary", "accent-text", "danger-text"];
+export const TEXT_ROLES = [
+    "text",
+    "text-secondary",
+    "text-tertiary",
+    "accent-text",
+    "danger-text",
+    "caution-text",
+    "positive-text"
+];
 /** The grounds text is read on. */
 export const GROUND_ROLES = ["window", "sidebar", "surface"];
 /** The code roles, read on the code background. */

package/dist/src/shellTheme.types.d.ts

@@ -32,6 +32,10 @@ export type ShellPalette = {
     readonly "accent-text": string;
     /** Errors, as text. */
     readonly "danger-text": string;
+    /** A warning, as text: a status's badge in the `caution` tone. */
+    readonly "caution-text": string;
+    /** Something done or safe, as text: a status's badge in the `positive` tone. */
+    readonly "positive-text": string;
     /** Keywords in code. */
     readonly "code-keyword": string;
     /** Types in code. */

package/dist/src/shellWord.d.ts

@@ -0,0 +1,12 @@
+/**
+ * A file's name as one word of a command an agent will run: a name comes from a branch that may not be trusted, and
+ * `$(…)` in it must stay text. Shared by what `verify` and `visibility` tell an agent to run.
+ *
+ * @module
+ */
+/**
+ * The word.
+ *
+ * @param path - the file's name.
+ */
+export declare const shellWord: (path: string) => string;

package/dist/src/shellWord.js

@@ -0,0 +1,15 @@
+/**
+ * A file's name as one word of a command an agent will run: a name comes from a branch that may not be trusted, and
+ * `$(…)` in it must stay text. Shared by what `verify` and `visibility` tell an agent to run.
+ *
+ * @module
+ */
+/**
+ * The word.
+ *
+ * @param path - the file's name.
+ */
+export const shellWord = (path) => {
+    const named = path.startsWith("-") ? `./${path}` : path;
+    return /^[\w./@+-]+$/.test(named) ? named : `'${named.replaceAll("'", `'\\''`)}'`;
+};

package/dist/src/sourceFiles.js

@@ -14,7 +14,8 @@ export const sourceFiles = (source) => {
         stories: Object.assign({}, ...source.files.map((group) => group.stories)),
         docs: Object.assign({}, ...source.files.map((group) => group.docs)),
         code: Object.assign({}, ...source.files.map((group) => group.code)),
-        pages: Object.assign({}, ...source.files.map((group) => group.pages))
+        pages: Object.assign({}, ...source.files.map((group) => group.pages)),
+        problems: source.files.flatMap((group) => group.problems ?? [])
     };
     MERGED.set(source, merged);
     return merged;

package/dist/src/storyArgTypes.d.ts

@@ -0,0 +1,57 @@
+/**
+ * A story's `argTypes` as its module writes them (Storybook's): read in the frame into the form that crosses to the shell
+ * (`argTypes.ts`), and their `mapping` applied to the args the story receives. The commands read them the same way.
+ *
+ * @remarks
+ * Option values that cannot cross (a component, a function) are sent as their `mapping` keys, which the frame turns back
+ * into the values. Pure.
+ *
+ * @module
+ */
+import type { StoryControlsSetting } from "@forgebook/story-format/source";
+import type { PanelArgTypes, PanelControl } from "./argTypes.ts";
+/** Storybook's control names, as the panel draws them (the inline variants look the same here). */
+export declare const CONTROLS: Readonly<Record<string, PanelControl>>;
+/**
+ * The `argTypes` of the meta and the story, merged: each arg's entry from both, the story's fields over the meta's.
+ *
+ * @param meta - the meta's `argTypes`.
+ * @param story - the story's `argTypes`.
+ */
+export declare const mergedArgTypes: (meta: unknown, story: unknown) => Readonly<Record<string, Readonly<Record<string, unknown>>>>;
+/**
+ * The arg types the frame sends: each entry read, and the args `parameters.controls.exclude` names hidden.
+ *
+ * @param argTypes - the merged `argTypes`.
+ * @param excluded - the args `parameters.controls.exclude` names.
+ */
+export declare const panelArgTypesOf: (argTypes: Readonly<Record<string, Readonly<Record<string, unknown>>>>, excluded: readonly string[]) => PanelArgTypes;
+/**
+ * The args with each `mapping` applied: an arg whose value is a key of its entry's `mapping` receives the value the
+ * key stands for, as Storybook's (an arg written as the key in the story, or chosen in the panel).
+ *
+ * @param args - the args.
+ * @param argTypes - the merged `argTypes`.
+ */
+export declare const mappedArgs: (args: Readonly<Record<string, unknown>>, argTypes: Readonly<Record<string, Readonly<Record<string, unknown>>>>) => Readonly<Record<string, unknown>>;
+/**
+ * The props the panel can set, as the story's parameters say: `false` none, a list or `{ include }` those, anything
+ * else every one.
+ *
+ * @param value - `parameters.controls`.
+ */
+export declare const controlsOfParameter: (value: unknown) => StoryControlsSetting;
+/**
+ * The args `parameters.controls.exclude` hides.
+ *
+ * @param value - `parameters.controls`.
+ */
+export declare const excludedControls: (value: unknown) => readonly string[];
+/**
+ * The args whose calls the Events tab records as actions: those whose value is a spy, and those whose `argTypes`
+ * entry names an `action`. Explicit only: no arg is recorded for its name alone.
+ *
+ * @param args - the story's args.
+ * @param argTypes - the merged `argTypes`.
+ */
+export declare const actionNames: (args: Readonly<Record<string, unknown>>, argTypes: Readonly<Record<string, Readonly<Record<string, unknown>>>>) => readonly string[];

package/dist/src/storyArgTypes.js

@@ -0,0 +1,195 @@
+import { argConditionOf } from "./argConditions.js";
+import { isArgValue } from "./messages.js";
+/** Whether a value is a plain object. */
+const isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+/** Storybook's control names, as the panel draws them (the inline variants look the same here). */
+export const CONTROLS = {
+    select: "select",
+    radio: "radio",
+    "inline-radio": "radio",
+    check: "check",
+    "inline-check": "check",
+    "multi-select": "multi-select",
+    boolean: "boolean",
+    text: "text",
+    number: "number",
+    range: "range",
+    color: "color",
+    date: "date",
+    object: "object",
+    file: "file",
+    textarea: "textarea",
+    token: "token"
+};
+/** A number field of an object, when it is a finite number. */
+const numberOf = (part, name) => {
+    const value = part[name];
+    return typeof value === "number" && Number.isFinite(value) ? value : undefined;
+};
+/** The labels of a control, when every one is a text. */
+const labelsOf = (value) => isRecord(value) && Object.values(value).every((label) => typeof label === "string")
+    ? Object.fromEntries(Object.entries(value).map(([option, label]) => [option, String(label)]))
+    : undefined;
+/**
+ * The control an entry names: `false` and a disabled control are none, a name or `{ type }` is that control, and
+ * options without a control make a select.
+ */
+const controlOf = (entry) => {
+    const control = entry["control"];
+    if (control === false)
+        return "none";
+    if (typeof control === "string")
+        return Object.hasOwn(CONTROLS, control) ? CONTROLS[control] : undefined;
+    if (isRecord(control)) {
+        if (control["disable"] === true)
+            return "none";
+        const type = control["type"];
+        if (typeof type === "string")
+            return Object.hasOwn(CONTROLS, type) ? CONTROLS[type] : undefined;
+    }
+    return Array.isArray(entry["options"]) ? "select" : undefined;
+};
+/**
+ * The options as they cross: texts and numbers as they are; any other value only through `mapping`, whose keys are
+ * the options then.
+ */
+const optionsOf = (entry) => {
+    const options = entry["options"];
+    if (!Array.isArray(options))
+        return undefined;
+    return options.filter((option) => typeof option === "string" || typeof option === "number");
+};
+/** A name among the controls an entry writes that is none of the panel's: a custom control's. */
+const customControlOf = (control) => {
+    if (isRecord(control) && control["disable"] === true)
+        return undefined;
+    const name = isRecord(control) ? control["type"] : control;
+    return typeof name === "string" && !Object.hasOwn(CONTROLS, name) ? name : undefined;
+};
+/** What a `token`, a `file` and a custom control say of themselves. */
+const editorSettingsOf = (settings) => {
+    const { of, format, accept } = settings;
+    const own = settings["settings"];
+    return {
+        ...(own !== undefined && isArgValue(own) ? { settings: own } : {}),
+        ...(typeof of === "string" ? { tokens: { of, ...(typeof format === "string" ? { format } : {}) } } : {}),
+        ...(typeof accept === "string" ? { accept } : {})
+    };
+};
+/**
+ * One entry as the panel reads it.
+ *
+ * @param entry - the `argTypes` entry, the story's laid over the meta's.
+ * @param isExcluded - whether `parameters.controls.exclude` names the arg.
+ */
+const panelArgTypeOf = (entry, isExcluded) => {
+    const control = controlOf(entry);
+    const options = optionsOf(entry);
+    const settings = isRecord(entry["control"]) ? entry["control"] : {};
+    const table = entry["table"];
+    const name = entry["name"];
+    const description = entry["description"];
+    const labels = labelsOf(settings["labels"]);
+    const min = numberOf(settings, "min");
+    const max = numberOf(settings, "max");
+    const step = numberOf(settings, "step");
+    const condition = argConditionOf(entry["if"]);
+    const customControl = customControlOf(entry["control"]);
+    return {
+        isHidden: isExcluded || (isRecord(table) && table["disable"] === true),
+        ...(typeof name === "string" ? { label: name } : {}),
+        ...(typeof description === "string" ? { description } : {}),
+        ...(control === undefined ? {} : { control }),
+        ...(options === undefined ? {} : { options }),
+        ...(labels === undefined ? {} : { labels }),
+        ...(min === undefined ? {} : { min }),
+        ...(max === undefined ? {} : { max }),
+        ...(step === undefined ? {} : { step }),
+        ...(condition === undefined ? {} : { if: condition }),
+        ...editorSettingsOf(settings),
+        ...(customControl === undefined ? {} : { customControl })
+    };
+};
+/**
+ * The `argTypes` of the meta and the story, merged: each arg's entry from both, the story's fields over the meta's.
+ *
+ * @param meta - the meta's `argTypes`.
+ * @param story - the story's `argTypes`.
+ */
+export const mergedArgTypes = (meta, story) => {
+    const merged = {};
+    for (const part of [meta, story]) {
+        if (!isRecord(part))
+            continue;
+        for (const [name, entry] of Object.entries(part)) {
+            if (isRecord(entry))
+                merged[name] = { ...merged[name], ...entry };
+        }
+    }
+    return merged;
+};
+/**
+ * The arg types the frame sends: each entry read, and the args `parameters.controls.exclude` names hidden.
+ *
+ * @param argTypes - the merged `argTypes`.
+ * @param excluded - the args `parameters.controls.exclude` names.
+ */
+export const panelArgTypesOf = (argTypes, excluded) => {
+    const names = [...new Set([...Object.keys(argTypes), ...excluded])];
+    return Object.fromEntries(names.map((name) => [name, panelArgTypeOf(argTypes[name] ?? {}, excluded.includes(name))]));
+};
+/**
+ * The args with each `mapping` applied: an arg whose value is a key of its entry's `mapping` receives the value the
+ * key stands for, as Storybook's (an arg written as the key in the story, or chosen in the panel).
+ *
+ * @param args - the args.
+ * @param argTypes - the merged `argTypes`.
+ */
+export const mappedArgs = (args, argTypes) => Object.fromEntries(Object.entries(args).map(([name, value]) => {
+    const mapping = argTypes[name]?.["mapping"];
+    if (!isRecord(mapping) || (typeof value !== "string" && typeof value !== "number"))
+        return [name, value];
+    const key = String(value);
+    // the mapping's own keys only: a value a shared link chose (`constructor`) never reaches its prototype
+    return [name, Object.hasOwn(mapping, key) ? mapping[key] : value];
+}));
+/**
+ * The props the panel can set, as the story's parameters say: `false` none, a list or `{ include }` those, anything
+ * else every one.
+ *
+ * @param value - `parameters.controls`.
+ */
+export const controlsOfParameter = (value) => {
+    if (value === false)
+        return [];
+    if (Array.isArray(value) && value.every((name) => typeof name === "string"))
+        return value;
+    const include = isRecord(value) ? value["include"] : undefined;
+    if (Array.isArray(include) && include.every((name) => typeof name === "string"))
+        return include;
+    return "all";
+};
+/**
+ * The args `parameters.controls.exclude` hides.
+ *
+ * @param value - `parameters.controls`.
+ */
+export const excludedControls = (value) => {
+    const exclude = isRecord(value) ? value["exclude"] : undefined;
+    return Array.isArray(exclude) ? exclude.filter((name) => typeof name === "string") : [];
+};
+/** Whether a value is a spy (`fn()` of `storybook/test` or Vitest): a function with its calls under `mock`. */
+const isSpy = (value) => typeof value === "function" && "mock" in value;
+/**
+ * The args whose calls the Events tab records as actions: those whose value is a spy, and those whose `argTypes`
+ * entry names an `action`. Explicit only: no arg is recorded for its name alone.
+ *
+ * @param args - the story's args.
+ * @param argTypes - the merged `argTypes`.
+ */
+export const actionNames = (args, argTypes) => [
+    ...new Set([
+        ...Object.entries(args).flatMap(([name, value]) => (isSpy(value) ? [name] : [])),
+        ...Object.entries(argTypes).flatMap(([name, entry]) => typeof entry["action"] === "string" || entry["action"] === true ? [name] : [])
+    ])
+];

package/dist/src/storyBackground.js

@@ -1,4 +1,5 @@
 import { backdropColor } from "./backdrops.js";
+import { shownSwitches } from "./switches.js";
 import { isMoreContrastOf, schemeOf } from "./viewState.js";
 /**
  * A source's page colour for a view, or the colour of the view's backdrop.
@@ -20,7 +21,17 @@ export const storyBackground = (background, view, catalogue, isSystemDark) => {
         return backdrop;
     if (background === undefined)
         return undefined;
-    if (isDark)
-        return isMoreContrast ? (background.darkMore ?? background.dark) : background.dark;
-    return isMoreContrast ? (background.lightMore ?? background.light) : background.light;
+    const colourIn = (colours) => {
+        if (isDark)
+            return (isMoreContrast ? colours?.darkMore : undefined) ?? colours?.dark;
+        return (isMoreContrast ? colours?.lightMore : undefined) ?? colours?.light;
+    };
+    const values = shownSwitches(view.switches, switches);
+    // the first switch whose value gives this scheme's colour: a value that gives only `dark` leaves `light` to the next
+    for (const each of switches) {
+        const colour = colourIn(background.bySwitch?.[each.id]?.[values[each.id] ?? each.default]);
+        if (colour !== undefined)
+            return colour;
+    }
+    return colourIn(background);
 };