@scaffold-ui-kit/preview 0.0.0-stage → 2.3.0

package/dist/lib/types.js

@@ -0,0 +1,13 @@
+// Shared data shapes for the story generator. Everything here is
+// framework-agnostic - the emitters (emit/<target>.ts) translate these into
+// each framework's own syntax.
+/** The default: a component renders in every target unless it narrows the set. */
+export const ALL_TARGETS = ['react', 'vue', 'svelte'];
+/** The keys of the preview block its pages read, which must be JSON. */
+export const PREVIEW_BROWSER_KEYS = [
+    'options',
+    'canvas',
+    'themes',
+    'mount',
+    'viewCanvas',
+];

package/dist/lib/void-elements.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Whether a tag is an HTML void element.
+ *
+ * @param tag - The tag name, as an html fill writes it.
+ * @returns True for a void element (`img`, `input`, `br`, ...).
+ */
+export declare function isVoidElement(tag: string): boolean;

package/dist/lib/void-elements.js

@@ -0,0 +1,13 @@
+// HTML void elements: an html slot fill with one of these tags renders
+// self-closed and takes no children. The list is the engine core's, so the
+// preview and the templates' own output agree on it.
+import { VOID_ELEMENTS } from '@js-template-engine/core';
+/**
+ * Whether a tag is an HTML void element.
+ *
+ * @param tag - The tag name, as an html fill writes it.
+ * @returns True for a void element (`img`, `input`, `br`, ...).
+ */
+export function isVoidElement(tag) {
+    return VOID_ELEMENTS.has(tag.toLowerCase());
+}

package/dist/load.d.ts

@@ -0,0 +1,37 @@
+import { type PreviewContext, type ResolvedSource } from './context.js';
+import type { EnumeratedComponent, PreviewPaneWidth, Story } from './lib/types.js';
+/** The pane widths the kit offers and what is wrong with them. */
+export interface KitPaneWidths {
+    /** The widths: the preview block's `paneWidths`, else none (the
+     *  preview's own). */
+    paneWidths?: PreviewPaneWidth[];
+    /** What makes the kit's widths unusable. */
+    errors: string[];
+}
+/**
+ * The pane widths a kit offers: its preview block's `paneWidths`, which a
+ * kit can derive from its own breakpoints.
+ *
+ * @param context - The kit's preview context.
+ * @returns The widths and the errors.
+ */
+export declare function kitPaneWidths(context: PreviewContext): KitPaneWidths;
+/** One component with its source and story file. */
+export interface LoadedComponent {
+    component: EnumeratedComponent;
+    story: Story | undefined;
+    source: ResolvedSource;
+}
+export interface LoadedKit {
+    /** Every source's components, each source sorted by name, sources in order. */
+    components: LoadedComponent[];
+    /**
+     * Each compound part, by name, with the root that lists it: in its
+     * template's `parts`, or, for a root with no template, in the kit
+     * configuration's. A listed part is not standalone, whatever its story
+     * file says.
+     */
+    parts: Map<string, string>;
+}
+/** Loads every source's components and story files. */
+export declare function loadKit(context: PreviewContext): Promise<LoadedKit>;

package/dist/load.js

@@ -0,0 +1,82 @@
+// Load what the generator and the check both read from a kit: every source's
+// components (globbed templates plus resolved manual specs),
+// each paired with its story file. One loader, so the check sees exactly what
+// generation renders.
+import { enumerateComponents } from './enumerate.js';
+import { resolveManualComponent } from './props-from.js';
+import { loadStory } from './story.js';
+import { paneWidthsProblem, } from './context.js';
+/**
+ * The pane widths a kit offers: its preview block's `paneWidths`, which a
+ * kit can derive from its own breakpoints.
+ *
+ * @param context - The kit's preview context.
+ * @returns The widths and the errors.
+ */
+export function kitPaneWidths(context) {
+    const paneWidths = context.configuration.paneWidths;
+    if (paneWidths === undefined)
+        return { errors: [] };
+    const problem = paneWidthsProblem(paneWidths, 'preview.paneWidths');
+    return problem ? { errors: [problem] } : { paneWidths, errors: [] };
+}
+/** Loads every source's components and story files. */
+export async function loadKit(context) {
+    const { sources, importModule } = context;
+    // Every source's templates first, so a manual component's `propsFrom` can
+    // build on a template from any source - its own source's first.
+    const templatesBySource = new Map();
+    for (const source of sources) {
+        templatesBySource.set(source, source.templatesDirectoryAbsolute
+            ? await enumerateComponents(source.templatesDirectoryAbsolute, importModule)
+            : []);
+    }
+    // A compound's root names its parts, in its template or, with no template,
+    // in the kit configuration; none is standalone, as a story file's
+    // `standalone: false` also marks one.
+    const parts = new Map();
+    for (const [root, rootParts] of Object.entries(context.parts ?? {})) {
+        for (const part of rootParts)
+            parts.set(part, root);
+    }
+    for (const templates of templatesBySource.values()) {
+        for (const { name, template } of templates) {
+            if (template && !Array.isArray(template)) {
+                for (const part of template.parts ?? [])
+                    parts.set(part, name);
+            }
+        }
+    }
+    const components = [];
+    for (const source of sources) {
+        const templates = templatesBySource.get(source) ?? [];
+        const visibleTemplates = [
+            ...templates,
+            ...sources
+                .filter((other) => other !== source)
+                .flatMap((other) => templatesBySource.get(other) ?? []),
+        ];
+        const manual = source.manualModuleAbsolute
+            ? (await importModule(source.manualModuleAbsolute))
+            : undefined;
+        if (source.manualModuleAbsolute && typeof manual?.default !== 'function') {
+            throw new Error(`[preview] ${source.manualModule} must default-export a () => ManualComponentSpecification[]`);
+        }
+        const sourceComponents = [
+            ...templates,
+            ...(manual?.default
+                ? manual
+                    .default()
+                    .map((specification) => resolveManualComponent(specification, context.kitRoot, visibleTemplates))
+                : []),
+        ].sort((a, b) => a.name.localeCompare(b.name));
+        for (const listed of sourceComponents) {
+            const component = parts.has(listed.name)
+                ? { ...listed, standalone: false }
+                : listed;
+            const story = await loadStory(component.name, source.storiesDirectoryAbsolute, importModule);
+            components.push({ component, story, source });
+        }
+    }
+    return { components, parts };
+}

package/dist/model.d.ts

@@ -0,0 +1,44 @@
+import type { PropTypeSpecification, EnumeratedComponent, JsonValue, Story, PreviewBinding, ResolvedStory, PreviewControlHints, PreviewLabels, Target } from './lib/types.js';
+/** The category a component without a story file `category` sits in. */
+export declare const DEFAULT_CATEGORY = "Components";
+/**
+ * The two-way props a component's template declares, in prop order: each
+ * `bindable` object's prop, copy form or relayed, the props it names, and
+ * whether a Vue consumer binds it with a bare `v-model`. A component written
+ * by hand declares none.
+ *
+ * @param component - The enumerated component.
+ * @returns The bindings.
+ */
+export declare function bindingsOf(component: EnumeratedComponent): PreviewBinding[];
+/**
+ * The values a prop's scenarios should cover: each select option and each
+ * boolean value other than the prop's default (a select's `false` too only
+ * when the prop has one), for every included select and
+ * boolean control. Shared by scenario generation and the check's coverage.
+ */
+export declare function scenarioValues(propTypes: readonly PropTypeSpecification[], defaultProps: Record<string, JsonValue>): Array<{
+    prop: string;
+    value: string | boolean;
+}>;
+/** Whether a story file's `generate` lets this prop generate scenarios. */
+export declare function generatesProp(generate: Story['generate'], prop: string): boolean;
+/** The id a generated scenario takes: `<prop>-<value>`, or the prop for a
+ *  boolean turned on, unless that is the preview's own Empty scenario's id,
+ *  which a boolean named `empty` takes as `empty-true`. A curated scenario
+ *  with this id replaces it. */
+export declare function generatedScenarioId(prop: string, value: string | boolean): string;
+/**
+ * Resolve the story of one component: its controls, default props,
+ * scenarios, slot content and the targets it renders in.
+ *
+ * @param component - The enumerated component.
+ * @param story - The component's story file, when it has one.
+ * @param hints - The kit's control hints.
+ * @param labels - The kit's preview labels.
+ * @param omitPattern - Component names matching it get no story.
+ * @param kitTargets - The scripted targets the kit builds; the component's own
+ *   targets are narrowed to them.
+ * @returns The resolved story.
+ */
+export declare function resolveStory(component: EnumeratedComponent, story: Story | undefined, hints?: PreviewControlHints, labels?: PreviewLabels, omitPattern?: RegExp, kitTargets?: readonly Target[]): ResolvedStory;

package/dist/model.js

@@ -0,0 +1,464 @@
+// Build the framework-agnostic ResolvedStory for one component: merge prop-derived
+// propTypes with the story file (controls, prop defaults, slots, scenarios, omit).
+import { isEventType, relayedBindingsOf, twoWayBindingsOf, } from '@js-template-engine/core';
+import { propTypeForProp, defaultPropForProp } from './prop-types.js';
+import { isStructurallyOmitted } from './story.js';
+import { collectSlotComponents } from './lib/slot-fill.js';
+import { EMPTY_SCENARIO_ID } from './lib/naming.js';
+import { isVoidElement } from './lib/void-elements.js';
+import { ALL_TARGETS } from './lib/types.js';
+/** The category a component without a story file `category` sits in. */
+export const DEFAULT_CATEGORY = 'Components';
+/**
+ * The two-way props a component's template declares, in prop order: each
+ * `bindable` object's prop, copy form or relayed, the props it names, and
+ * whether a Vue consumer binds it with a bare `v-model`. A component written
+ * by hand declares none.
+ *
+ * @param component - The enumerated component.
+ * @returns The bindings.
+ */
+export function bindingsOf(component) {
+    const template = component.template;
+    if (!template || Array.isArray(template) || !template.props)
+        return [];
+    const vue = template.extensions?.['vue'];
+    const vueModel = typeof vue === 'object' && vue !== null
+        ? vue.model
+        : undefined;
+    const order = Object.keys(template.props);
+    return [
+        ...twoWayBindingsOf(template.props).map((binding) => ({
+            prop: binding.prop,
+            ...(binding.defaultProp !== undefined
+                ? { defaultProp: binding.defaultProp }
+                : {}),
+            changeProp: binding.changeProp,
+        })),
+        ...relayedBindingsOf(template.props).map((binding) => ({
+            prop: binding.prop,
+            changeProp: binding.changeProp,
+        })),
+    ]
+        .sort((first, second) => order.indexOf(first.prop) - order.indexOf(second.prop))
+        .map(({ changeProp, ...binding }) => ({
+        ...binding,
+        ...(changeProp !== undefined ? { changeProp } : {}),
+        ...(vueModel === binding.prop ? { vueModel: true } : {}),
+        ...(template.typeParameters?.length ? { generic: true } : {}),
+    }));
+}
+/**
+ * The values a prop's scenarios should cover: each select option and each
+ * boolean value other than the prop's default (a select's `false` too only
+ * when the prop has one), for every included select and
+ * boolean control. Shared by scenario generation and the check's coverage.
+ */
+export function scenarioValues(propTypes, defaultProps) {
+    const values = [];
+    for (const propType of propTypes) {
+        if (!propType.include)
+            continue;
+        const current = defaultProps[propType.name];
+        if (propType.control === 'boolean') {
+            values.push({ prop: propType.name, value: current !== true });
+        }
+        else if (propType.control === 'select') {
+            for (const option of propType.options ?? []) {
+                // As for a toggle, `false` is no departure from a prop left unset.
+                if (option !== undefined &&
+                    option !== current &&
+                    !(option === false && current === undefined))
+                    values.push({ prop: propType.name, value: option });
+            }
+        }
+    }
+    return values;
+}
+/** Whether a story file's `generate` lets this prop generate scenarios. */
+export function generatesProp(generate, prop) {
+    if (generate === undefined)
+        return true;
+    if (generate === false)
+        return false;
+    if (Array.isArray(generate))
+        return generate.includes(prop);
+    return !generate.exclude.includes(prop);
+}
+/** The keys a story file sets. */
+const STORY_KEYS = [
+    'omit',
+    'standalone',
+    'unlisted',
+    'category',
+    'label',
+    'defaultProps',
+    'controls',
+    'fixed',
+    'generate',
+    'slots',
+    'around',
+    'scenarios',
+    'options',
+];
+/** What to write for a key a story file does not take, where one thing is meant. */
+const STORY_KEY_REPLACEMENTS = new Map([
+    ['partial', 'standalone: false'],
+    ['description', 'description on the template'],
+]);
+/** The keys a curated scenario may set. */
+const CURATED_SCENARIO_KEYS = new Set([
+    'id',
+    'label',
+    'description',
+    'props',
+    'slots',
+    'options',
+    'default',
+]);
+/**
+ * The component of the first element fill, at any depth of a fill tree,
+ * that fills its default slot through `slots.default` rather than
+ * `children`, or `undefined` when none does.
+ */
+function elementFillSettingDefaultSlot(fill) {
+    if (!fill || typeof fill !== 'object' || Array.isArray(fill))
+        return undefined;
+    if (fill.kind === 'element') {
+        if (fill.slots && 'default' in fill.slots)
+            return fill.component;
+        for (const nested of [...Object.values(fill.slots ?? {}), fill.children]) {
+            const found = elementFillSettingDefaultSlot(nested);
+            if (found !== undefined)
+                return found;
+        }
+    }
+    else if (fill.kind === 'html') {
+        return elementFillSettingDefaultSlot(fill.children);
+    }
+    else if (fill.kind === 'fragment') {
+        for (const child of fill.children ?? []) {
+            const found = elementFillSettingDefaultSlot(child);
+            if (found !== undefined)
+                return found;
+        }
+    }
+    return undefined;
+}
+/**
+ * The tag of the first html fill, at any depth of a fill tree, that gives a
+ * void element (img, input, br) children, or `undefined` when none does.
+ */
+function voidElementWithChildren(fill) {
+    if (!fill || typeof fill !== 'object' || Array.isArray(fill))
+        return undefined;
+    if (fill.kind === 'html') {
+        if (fill.children !== undefined && isVoidElement(fill.tag))
+            return fill.tag;
+        return voidElementWithChildren(fill.children);
+    }
+    if (fill.kind === 'element') {
+        for (const nested of [...Object.values(fill.slots ?? {}), fill.children]) {
+            const found = voidElementWithChildren(nested);
+            if (found !== undefined)
+                return found;
+        }
+    }
+    else if (fill.kind === 'fragment') {
+        for (const child of fill.children ?? []) {
+            const found = voidElementWithChildren(child);
+            if (found !== undefined)
+                return found;
+        }
+    }
+    return undefined;
+}
+/** The id a generated scenario takes: `<prop>-<value>`, or the prop for a
+ *  boolean turned on, unless that is the preview's own Empty scenario's id,
+ *  which a boolean named `empty` takes as `empty-true`. A curated scenario
+ *  with this id replaces it. */
+export function generatedScenarioId(prop, value) {
+    if (value === true)
+        return prop === EMPTY_SCENARIO_ID ? `${prop}-true` : prop;
+    return `${prop}-${String(value)}`;
+}
+/** The default label of a generated scenario: `prop: value`, or the bare prop
+ *  for a boolean turned on. */
+function defaultGeneratedLabel(prop, value) {
+    return value === true ? prop : `${prop}: ${String(value)}`;
+}
+/** Whether a scenario sets exactly one prop, to this value. */
+function setsOnly(scenario, prop, value) {
+    const entries = Object.entries(scenario.props ?? {});
+    return (entries.length === 1 && entries[0][0] === prop && entries[0][1] === value);
+}
+/**
+ * One scenario per value `scenarioValues` lists, narrowed by the story file's
+ * `generate`, skipping a value a curated scenario already sets alone, and any
+ * id a curated scenario already uses: that scenario replaces the generated one.
+ * Labeled by the kit's `generatedScenario`, or `prop: value` and the bare prop
+ * for a boolean turned on.
+ */
+function generateScenarios(propTypes, defaultProps, story, labels) {
+    const generate = story?.generate;
+    if (generate === false)
+        return [];
+    const curated = story?.scenarios ?? [];
+    const takenIds = new Set(curated.map((scenario) => scenario.id));
+    const label = labels.generatedScenario ?? defaultGeneratedLabel;
+    const scenarios = [];
+    for (const { prop, value } of scenarioValues(propTypes, defaultProps)) {
+        if (!generatesProp(generate, prop))
+            continue;
+        if (curated.some((scenario) => setsOnly(scenario, prop, value)))
+            continue;
+        const id = generatedScenarioId(prop, value);
+        if (takenIds.has(id))
+            continue;
+        takenIds.add(id);
+        scenarios.push({
+            id,
+            label: label(prop, value),
+            props: { [prop]: value },
+            generated: true,
+        });
+    }
+    return scenarios;
+}
+/**
+ * Resolve the story of one component: its controls, default props,
+ * scenarios, slot content and the targets it renders in.
+ *
+ * @param component - The enumerated component.
+ * @param story - The component's story file, when it has one.
+ * @param hints - The kit's control hints.
+ * @param labels - The kit's preview labels.
+ * @param omitPattern - Component names matching it get no story.
+ * @param kitTargets - The scripted targets the kit builds; the component's own
+ *   targets are narrowed to them.
+ * @returns The resolved story.
+ */
+export function resolveStory(component, story, hints = {}, labels = {}, omitPattern, kitTargets = ALL_TARGETS) {
+    const omit = (story?.omit ?? false) ||
+        isStructurallyOmitted(component.name, omitPattern);
+    // A component that is not standalone (a compound's part, a shared building
+    // block) stays in the manifest for the editor but gets no story - set on the
+    // story file (templates) or the manual spec (hand-written components).
+    const standalone = (story?.standalone ?? true) && (component.standalone ?? true);
+    // An unlisted story is generated as any other, only left out of what a
+    // reader browses; a component with no story of its own has nothing to hide.
+    const unlisted = ((story?.unlisted ?? false) || (component.unlisted ?? false)) &&
+        !omit &&
+        standalone;
+    // propTypes from props, then story file control overrides (false disables).
+    const propTypes = [];
+    for (const [propName, def] of Object.entries(component.props)) {
+        let propType = propTypeForProp(component.name, propName, def, hints);
+        if (def.description)
+            propType = { ...propType, description: def.description };
+        const override = story?.controls?.[propName];
+        if (override === false)
+            propType = { ...propType, include: false };
+        else if (override)
+            propType = { ...propType, ...override };
+        // A fixed prop is always passed and never shown.
+        if (story?.fixed && propName in story.fixed)
+            propType = { ...propType, include: false };
+        propTypes.push({
+            ...propType,
+            declaredType: def.type,
+            required: def.required === true,
+            ...(def.default !== undefined ? { declaredDefault: def.default } : {}),
+            ...(def.documentedDefault !== undefined
+                ? { documentedDefault: def.documentedDefault }
+                : {}),
+        });
+    }
+    // default props: template defaults + size config, then story file defaultProps.
+    const defaultProps = {};
+    // The values the preview starts a prop from that a consumer never writes:
+    // a hint's, for a prop the component gives no default and the story file
+    // leaves alone.
+    const previewDefaults = {};
+    for (const [propName, def] of Object.entries(component.props)) {
+        const value = defaultPropForProp(component.name, propName, def, hints);
+        if (value !== undefined)
+            defaultProps[propName] = value;
+        if (value !== undefined &&
+            def.default === undefined &&
+            !(propName in (story?.defaultProps ?? {})) &&
+            !(propName in (story?.fixed ?? {})))
+            previewDefaults[propName] = value;
+    }
+    // A component with a default slot gets visible placeholder text - but only
+    // when the story file declares no slot plan at all. A story file that curates any
+    // slot (a named fill, an explicit default) owns the slot story: injecting
+    // children beside a named fill fabricates a mount no consumer writes.
+    // `slots: {}` forces a genuinely slotless mount. A default slot that
+    // exposes values gets none either: its content is a function of those
+    // values (React calls `children(scope)`), so text there is a mount no
+    // consumer writes, and the slot's fallback renders instead.
+    if (component.hasDefaultSlot &&
+        !component.defaultSlotScoped &&
+        !story?.slots &&
+        defaultProps.children === undefined) {
+        defaultProps.children = component.name;
+        // The preview's own, which a consumer's source leaves out, unless the
+        // story file gives the slot text of its own.
+        if (!('children' in (story?.defaultProps ?? {})) &&
+            !('children' in (story?.fixed ?? {})))
+            previewDefaults.children = component.name;
+    }
+    Object.assign(defaultProps, story?.defaultProps ?? {}, story?.fixed ?? {});
+    // A named slot spelled flat (`slots: { header: ... }` instead of
+    // `slots: { named: { header: ... } }`) would silently never render - the
+    // emitters read only `default` and `named`. Fail loudly instead. A
+    // scenario's own slots are a plan of the same shape.
+    const slotPlans = [
+        ['', story?.slots],
+        ...(story?.scenarios ?? [])
+            .filter((scenario) => scenario.generated !== true)
+            .map((scenario) => [
+            `scenario '${scenario.id}': `,
+            scenario.slots,
+        ]),
+    ];
+    for (const [where, plan] of slotPlans) {
+        if (plan === undefined)
+            continue;
+        if (typeof plan !== 'object' || plan === null || Array.isArray(plan)) {
+            throw new Error(`${component.name}: ${where}slots must be a slot plan, { default, named }`);
+        }
+        const unknownSlotKeys = Object.keys(plan).filter((key) => key !== 'default' && key !== 'named');
+        if (unknownSlotKeys.length > 0) {
+            throw new Error(`${component.name}: ${where}unknown slot-plan key(s) ${unknownSlotKeys.join(', ')} - ` +
+                `named slots go under "named": { slots: { named: { ... } } }.`);
+        }
+    }
+    const planFills = slotPlans.flatMap(([, plan]) => [
+        plan?.default,
+        ...Object.values(plan?.named ?? {}),
+    ]);
+    // `around` holds the content before and after the component, and a scoped
+    // fill has no slot there to give it values.
+    const around = story?.around;
+    if (around !== undefined) {
+        if (typeof around !== 'object' || around === null || Array.isArray(around))
+            throw new Error(`${component.name}: around must be { before, after }, each a fill`);
+        const unknownAroundKeys = Object.keys(around).filter((key) => key !== 'before' && key !== 'after');
+        if (unknownAroundKeys.length > 0)
+            throw new Error(`${component.name}: unknown around key(s) ${unknownAroundKeys.join(', ')} - around takes before and after`);
+        for (const [where, fill] of Object.entries(around)) {
+            if (fill?.kind === 'scoped')
+                throw new Error(`${component.name}: around.${where} is a scoped fill, which takes values from a slot; beside the component there is none`);
+        }
+    }
+    const aroundFills = [story?.around?.before, story?.around?.after];
+    // The composed component's default slot takes an element fill's
+    // `children`; `slots` names its named slots only. A `default` there would
+    // otherwise reach the emitters as a slot named `default`, which Svelte
+    // refuses as a reserved word.
+    for (const fill of [...planFills, ...aroundFills]) {
+        const filled = elementFillSettingDefaultSlot(fill);
+        if (filled !== undefined) {
+            throw new Error(`${component.name}: the element fill of '${filled}' sets slots.default - its default slot takes children`);
+        }
+    }
+    // A void element renders self-closed, so children on one would be dropped
+    // in one framework and refused by another's compiler.
+    for (const fill of [...planFills, ...aroundFills]) {
+        const tag = voidElementWithChildren(fill);
+        if (tag !== undefined) {
+            throw new Error(`${component.name}: the html fill <${tag}> has children - ${tag} is a void element and takes none`);
+        }
+    }
+    // A story file sets only what a story holds; a key the preview does not
+    // read would otherwise change nothing without a word.
+    const unknownStoryKey = Object.keys(story ?? {}).find((key) => !STORY_KEYS.includes(key));
+    if (unknownStoryKey !== undefined) {
+        const replacement = STORY_KEY_REPLACEMENTS.get(unknownStoryKey);
+        throw new Error(`${component.name}: story sets unknown key '${unknownStoryKey}' - ${replacement === undefined
+            ? `a story sets ${STORY_KEYS.join(', ')}`
+            : `use ${replacement}`}`);
+    }
+    // A curated scenario sets only what a scenario holds. The scenarios the
+    // preview generates itself reach the model beside them, marked
+    // `generated`, and are not the story file's to check.
+    for (const scenario of story?.scenarios ?? []) {
+        if (scenario.generated === true)
+            continue;
+        if (scenario.id === EMPTY_SCENARIO_ID)
+            throw new Error(`${component.name}: scenario id '${EMPTY_SCENARIO_ID}' is the preview's own Empty scenario's; give the scenario another id`);
+        const unknownKey = Object.keys(scenario).find((key) => !CURATED_SCENARIO_KEYS.has(key));
+        if (unknownKey !== undefined) {
+            throw new Error(`${component.name}: scenario '${scenario.id}' sets unknown key '${unknownKey}' - a scenario sets ${[...CURATED_SCENARIO_KEYS].join(', ')}`);
+        }
+    }
+    // A scenario's description is text for a shell to show, and its options
+    // are option values by id; anything else is a story file mistake that would
+    // otherwise reach the catalog unnoticed. Whether each names one of the
+    // kit's options is the check's to say, which reads the kit's options.
+    for (const scenario of story?.scenarios ?? []) {
+        if (scenario.description !== undefined &&
+            typeof scenario.description !== 'string') {
+            throw new Error(`${component.name}: scenario '${scenario.id}' has a description that is not a string.`);
+        }
+        const options = scenario.options;
+        if (options !== undefined &&
+            (typeof options !== 'object' ||
+                options === null ||
+                Array.isArray(options) ||
+                Object.values(options).some((value) => typeof value !== 'string' && typeof value !== 'boolean'))) {
+            throw new Error(`${component.name}: scenario '${scenario.id}' has options that are not option values by id, each a string or a boolean.`);
+        }
+    }
+    // slot components to import
+    const slotComponentSet = new Set();
+    try {
+        // A scenario's own content is imported with the story's: one module
+        // per target holds them all.
+        for (const fill of planFills)
+            collectSlotComponents(fill, slotComponentSet);
+        for (const fill of aroundFills)
+            collectSlotComponents(fill, slotComponentSet);
+    }
+    catch (error) {
+        // Name the component so a bad story file is findable without a bisect.
+        throw new Error(`${component.name}: ${error.message}`, {
+            cause: error,
+        });
+    }
+    return {
+        name: component.name,
+        ...(component.description !== undefined
+            ? { description: component.description }
+            : {}),
+        title: `${story?.category ?? labels.category ?? DEFAULT_CATEGORY}/${story?.label ?? component.name}`,
+        omit,
+        standalone,
+        unlisted,
+        propTypes,
+        events: propTypes
+            .filter((propType) => isEventType(propType.declaredType))
+            .map((propType) => propType.name),
+        bindings: bindingsOf(component),
+        defaultProps,
+        ...(Object.keys(previewDefaults).length > 0 ? { previewDefaults } : {}),
+        slots: story?.slots,
+        ...(story?.around ? { around: story.around } : {}),
+        scenarios: [
+            ...(story?.scenarios ?? []),
+            ...generateScenarios(propTypes, defaultProps, story, labels),
+        ],
+        slotComponents: [...slotComponentSet],
+        contentSlots: {
+            default: component.hasDefaultSlot,
+            named: component.slotNames,
+            ...(component.scopeRequiredSlots?.length
+                ? { scopeRequired: component.scopeRequiredSlots }
+                : {}),
+        },
+        options: story?.options,
+        targets: (component.targets ?? ALL_TARGETS).filter((target) => kitTargets.includes(target)),
+    };
+}