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

package/dist/emit/svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ResolvedStory, Target } from '../lib/types.js';
+export interface SvelteWrapper {
+    fileName: string;
+    source: string;
+}
+/** One `<Name>.render.svelte` wrapper per component (always - keeps the registry
+ *  uniform; slotless components render `<Name {...rest} />`). */
+export declare function emitSvelteWrapper(model: ResolvedStory, moduleFor: (name: string, target: Target) => string, exportFor?: (name: string) => string): SvelteWrapper;
+export declare function emitSvelteRegistry(models: ResolvedStory[]): string;

package/dist/emit/svelte.js

@@ -0,0 +1,177 @@
+// Emit the Svelte render layer. Svelte content regions aren't props, so each
+// component gets a thin `<Name>.render.svelte` wrapper that forwards `props`
+// (one object whose props are each a signal of their own, keeping controls
+// live without remounting) and fills its regions. The registry maps component id → its wrapper
+// component. The generated components are runes components that expose
+// their regions as **named snippet props**, so the wrapper is a runes component
+// filling them with `{#snippet name()}...{/snippet}` (the default region stays the
+// implicit `children` snippet - loose content between the tags).
+import { effectiveDefaultSlot, namedSlots, serialize, svelteText, } from './common.js';
+import { storyRegistryId } from '../lib/scenario-story.js';
+import { collectParts } from '../lib/slot-fill.js';
+import { isVoidElement } from '../lib/void-elements.js';
+function svelteProps(props) {
+    return props
+        ? ' ' +
+            Object.entries(props)
+                .map(([name, value]) => typeof value === 'boolean' && value
+                ? name
+                : `${name}={${serialize(value)}}`)
+                .join(' ')
+        : '';
+}
+// Fill a component's named region: a runes named snippet prop, `{#snippet
+// name()}...{/snippet}` (the region name is the snippet prop the generated
+// component declares). Shared by nested elements and buildWrapper's top-level
+// named regions.
+function namedSlotMarkup(slots) {
+    return Object.entries(slots ?? {})
+        .map(([slot, fill]) => {
+        // A scoped fill becomes a snippet named per target (`fill.slot.svelte`) receiving
+        // the destructured scope - Svelte 5's render-prop analog; empty body omits it.
+        if (fill.kind === 'scoped')
+            return fill.svelte
+                ? `{#snippet ${fill.slot.svelte}({ ${fill.parameters.join(', ')} })}${fill.svelte}{/snippet}`
+                : '';
+        return `{#snippet ${slot}()}${slotSvelte(fill)}{/snippet}`;
+    })
+        .join('');
+}
+function elementSvelte(fill) {
+    const inner = `${fill.children ? slotSvelte(fill.children) : ''}${namedSlotMarkup(fill.slots)}`;
+    return `<${fill.component}${svelteProps(fill.props)}>${inner}</${fill.component}>`;
+}
+function htmlSvelte(fill) {
+    // A void element (img, input, br) takes no children and no closing tag.
+    if (isVoidElement(fill.tag))
+        return `<${fill.tag}${svelteProps(fill.props)} />`;
+    const inner = fill.children ? slotSvelte(fill.children) : '';
+    return `<${fill.tag}${svelteProps(fill.props)}>${inner}</${fill.tag}>`;
+}
+function slotSvelte(fill) {
+    if (fill.kind === 'text')
+        return svelteText(fill.value);
+    if (fill.kind === 'raw')
+        return fill.svelte;
+    // A call to a part: the snippet the wrapper declares at its top.
+    if (fill.kind === 'part')
+        return `{@render ${fill.name}(${serialize(fill.props ?? {})})}`;
+    // A scoped fill is only valid at a top-level named slot (namedSlotMarkup); ignored nested.
+    if (fill.kind === 'scoped')
+        return '';
+    if (fill.kind === 'fragment')
+        return fill.children.map(slotSvelte).join('');
+    if (fill.kind === 'html')
+        return htmlSvelte(fill);
+    return elementSvelte(fill);
+}
+function defaultSvelte(def) {
+    if (!def)
+        return '';
+    if (def.kind === 'propText')
+        return `{props[${JSON.stringify(def.prop)}]}`;
+    // Scoped content for the default slot is the `children` snippet.
+    if (def.kind === 'scoped')
+        return namedSlotMarkup({ default: def });
+    return slotSvelte(def);
+}
+function buildWrapper(model, def, named, moduleFor, exportFor) {
+    const imports = [model.name, ...model.slotComponents].filter((name, i, names) => names.indexOf(name) === i);
+    // Group imports by source module (insertion-ordered, the core source first) - a
+    // wrapper for another package's component imports it from that package's module and a core
+    // child from the core one.
+    const byModule = new Map();
+    for (const name of imports) {
+        const mod = moduleFor(name, 'svelte');
+        (byModule.get(mod) ?? byModule.set(mod, []).get(mod)).push(name);
+    }
+    // Alias another package's clean export to its unique preview name (`Toast as NoticeToast`).
+    const importSpecifier = (name) => exportFor(name) === name ? name : `${exportFor(name)} as ${name}`;
+    const importLines = [...byModule.entries()]
+        .map(([mod, names]) => `  import { ${names.map(importSpecifier).join(', ')} } from '${mod}';`)
+        .join('\n');
+    const stripsChild = def?.kind === 'propText';
+    // Runes wrapper: `props` is one object whose props are each a signal of
+    // their own, so the component reads each prop on its own and a change to
+    // one leaves the others as they are (a component's own two-way value
+    // among them). When the default region is a `propText` prop it is
+    // rendered as the child and left out of the spread by a view of `props`
+    // that still reads each prop on its own - a copy would read them all.
+    const reactive = stripsChild
+        ? `  const rest = $derived(\n` +
+            `    new Proxy(props, {\n` +
+            `      get: (target, key) => (key === ${JSON.stringify(def.prop)} ? undefined : Reflect.get(target, key)),\n` +
+            `      has: (target, key) => key !== ${JSON.stringify(def.prop)} && Reflect.has(target, key),\n` +
+            `      ownKeys: (target) => Reflect.ownKeys(target).filter((key) => key !== ${JSON.stringify(def.prop)}),\n` +
+            `    })\n` +
+            `  );`
+        : `  const rest = $derived(props);`;
+    const namedMarkup = namedSlotMarkup(named);
+    const defaultMarkup = defaultSvelte(def);
+    // Svelte 5 turns a whitespace-only component body into a real (empty)
+    // `children` snippet, which suppresses the component's default-slot fallback
+    // - the opposite of a bare consumer usage. React trims whitespace-only JSX
+    // children and Vue drops the whitespace-only slot, so to keep the three
+    // targets' stories equivalent the wrapper self-closes when there is nothing
+    // to fill, and emits only non-empty region lines otherwise.
+    const regionLines = [defaultMarkup, namedMarkup]
+        .filter((markup) => markup !== '')
+        .map((markup) => `  ${markup}\n`)
+        .join('');
+    const componentMarkup = regionLines
+        ? `<${model.name} {...rest}>\n${regionLines}</${model.name}>\n`
+        : `<${model.name} {...rest} />\n`;
+    // The content beside the component: its siblings, at the markup's top level.
+    const before = model.around?.before;
+    const after = model.around?.after;
+    const mountMarkup = (before ? `${slotSvelte(before)}\n` : '') +
+        componentMarkup +
+        (after ? `${slotSvelte(after)}\n` : '');
+    // The story's parts, snippets at the top of the markup: inside the
+    // component's tags a snippet would be a prop of the component's.
+    const partMarkup = [
+        ...collectParts([
+            before,
+            model.slots?.default,
+            ...Object.values(named),
+            after,
+        ]).values(),
+    ]
+        .map((part) => `{#snippet ${part.name}({ ${part.parameters.join(', ')} }: Record<string, any>)}${part.svelte}{/snippet}\n`)
+        .join('');
+    return (`<script lang="ts">\n` +
+        `${importLines}\n` +
+        `  let { props = {} }: { props?: Record<string, any> } = $props();\n` +
+        `${reactive}\n` +
+        `</script>\n\n` +
+        partMarkup +
+        mountMarkup);
+}
+/** The name a story's wrapper file and its import take: the component's,
+ *  or a scenario story's own. */
+function renderNameOf(model) {
+    return model.scenarioStory?.renderName ?? model.name;
+}
+/** One `<Name>.render.svelte` wrapper per component (always - keeps the registry
+ *  uniform; slotless components render `<Name {...rest} />`). */
+export function emitSvelteWrapper(model, moduleFor, exportFor = (name) => name) {
+    const def = effectiveDefaultSlot(model);
+    const named = namedSlots(model);
+    return {
+        fileName: `${renderNameOf(model)}.render.svelte`,
+        source: buildWrapper(model, def, named, moduleFor, exportFor),
+    };
+}
+export function emitSvelteRegistry(models) {
+    const imports = models
+        .map((model) => `import ${renderNameOf(model)}_render from './${renderNameOf(model)}.render.svelte';`)
+        .join('\n');
+    const entries = models
+        .map((model) => `  ${JSON.stringify(storyRegistryId(model))}: ${renderNameOf(model)}_render,`)
+        .join('\n');
+    return (`// Generated by scaffold-ui-kit-preview - do not edit.\n` +
+        `${imports}\n\n` +
+        `export const registry: Record<string, any> = {\n` +
+        entries +
+        `\n};\n`);
+}

package/dist/emit/vue.d.ts

@@ -0,0 +1,2 @@
+import type { ResolvedStory, Target } from '../lib/types.js';
+export declare function emitVueRegistry(models: ResolvedStory[], moduleFor: (name: string, target: Target) => string, exportFor?: (name: string) => string): string;

package/dist/emit/vue.js

@@ -0,0 +1,152 @@
+// Emit the Vue render-registry: a map of component id → a render unit
+// `{ components, template }`. Slots aren't props in Vue, so slot content is
+// rendered through a template (default slot inline, named slots via
+// <template #name>); `props` flows via v-bind="props". The preview entry mounts
+// each unit with a reactive `props` and the unit's components exposed in
+// setup, so a template expression reads a component as a value
+// (`:as="Button"`), as a script-setup import is read in an SFC.
+import { effectiveDefaultSlot, joinVue, namedSlots, vueBoundAttribute, vueText, } from './common.js';
+import { storyRegistryId } from '../lib/scenario-story.js';
+import { collectParts } from '../lib/slot-fill.js';
+import { isVoidElement } from '../lib/void-elements.js';
+function vueProps(props) {
+    return props
+        ? ' ' +
+            Object.entries(props)
+                .map(([name, value]) => typeof value === 'boolean' && value
+                ? name
+                : `:${name}=${vueBoundAttribute(value)}`)
+                .join(' ')
+        : '';
+}
+function elementVue(fill) {
+    // Named slots → `<template #name>` inside the element, like vueEntry's namedTemplates;
+    // default content first, then the named templates.
+    const namedTemplates = Object.entries(fill.slots ?? {})
+        .map(([slot, slotFill]) => namedTemplateVue(slot, slotFill))
+        .join('');
+    const inner = `${fill.children ? slotVue(fill.children) : ''}${namedTemplates}`;
+    return `<${fill.component}${vueProps(fill.props)}>${inner}</${fill.component}>`;
+}
+function htmlVue(fill) {
+    // A void element (img, input, br) takes no children and no closing tag.
+    if (isVoidElement(fill.tag))
+        return `<${fill.tag}${vueProps(fill.props)} />`;
+    const inner = fill.children ? slotVue(fill.children) : '';
+    return `<${fill.tag}${vueProps(fill.props)}>${inner}</${fill.tag}>`;
+}
+function slotVue(fill) {
+    if (fill.kind === 'text')
+        return vueText(fill.value);
+    if (fill.kind === 'raw')
+        return fill.vue;
+    // A call to a part: a component among the story's own.
+    if (fill.kind === 'part')
+        return `<${fill.name}${vueProps(fill.props)} />`;
+    // A scoped fill is only valid at a top-level named slot (vueEntry); ignored nested.
+    if (fill.kind === 'scoped')
+        return '';
+    if (fill.kind === 'fragment')
+        return joinVue(fill.children.map(slotVue));
+    if (fill.kind === 'html')
+        return htmlVue(fill);
+    return elementVue(fill);
+}
+/** A named-slot `<template>` - a scoped fill binds the slot's scope
+ *  (`#name="{ args }"`), a plain fill renders inline. Empty scoped bodies omit the
+ *  template. Shared by vueEntry and elementVue's nested named slots. */
+function namedTemplateVue(slot, fill) {
+    if (fill.kind === 'scoped')
+        return fill.vue
+            ? `<template #${fill.slot.vue}="{ ${fill.parameters.join(', ')} }">${fill.vue}</template>`
+            : '';
+    return `<template #${slot}>${slotVue(fill)}</template>`;
+}
+function defaultVue(def) {
+    if (!def)
+        return '';
+    if (def.kind === 'propText')
+        return `{{ props.${def.prop} }}`;
+    // Scoped content for the default slot binds its scope on `#default`.
+    if (def.kind === 'scoped')
+        return namedTemplateVue('default', def);
+    return slotVue(def);
+}
+// The `import * as` namespace per referenced module: the first module seen (the
+// kit's own source - story order puts it first) keeps the terse `d`; every other
+// module gets `d_<sanitized>`. First-seen assignment bakes in no kit name.
+function vueNamespaces(models, moduleFor) {
+    const namespaces = new Map();
+    for (const model of models) {
+        for (const name of [model.name, ...model.slotComponents]) {
+            const mod = moduleFor(name, 'vue');
+            if (!namespaces.has(mod)) {
+                namespaces.set(mod, namespaces.size === 0
+                    ? 'd'
+                    : 'd_' +
+                        mod
+                            .replace(/\/(vue)$/, '')
+                            .replace(/[^a-z0-9]+/gi, '_')
+                            .replace(/^_+|_+$/g, ''));
+            }
+        }
+    }
+    return namespaces;
+}
+function vueEntry(model, moduleFor, exportFor, namespaces) {
+    const def = effectiveDefaultSlot(model);
+    const named = namedSlots(model);
+    const namedTemplates = Object.entries(named)
+        .map(([slot, fill]) => namedTemplateVue(slot, fill))
+        .join('');
+    const inner = `${defaultVue(def)}${namedTemplates}`;
+    // The placeholder text is the default slot's content. Bound too, a prop the
+    // component doesn't declare falls through to its root element, where Vue
+    // sets it as a DOM property (`children` is read-only there), so it's left
+    // out of the binding; a declared prop of that name stays bound.
+    const bound = def?.kind === 'propText' &&
+        !model.propTypes.some((propType) => propType.name === def.prop)
+        ? `(({ ${def.prop}: _, ...rest }) => rest)(props)`
+        : 'props';
+    const component = inner
+        ? `<${model.name} v-bind="${bound}">${inner}</${model.name}>`
+        : `<${model.name} v-bind="${bound}" />`;
+    // The content beside the component: its siblings, as the template's other
+    // roots.
+    const before = model.around?.before;
+    const after = model.around?.after;
+    const template = `${before ? slotVue(before) : ''}${component}${after ? slotVue(after) : ''}`;
+    const comps = [model.name, ...model.slotComponents].filter((name, i, names) => names.indexOf(name) === i);
+    // Local template name → the module's exported member (aliased when they differ).
+    const componentMap = comps
+        .map((component) => `${component}: ${namespaces.get(moduleFor(component, 'vue'))}.${exportFor(component)}`)
+        .join(', ');
+    // A part is a component of the story's, named so its template can call
+    // itself, with the story's components in reach: as tags, and as values its
+    // expressions read (`:as="Button"`), as a script-setup import is in an SFC.
+    const parts = [
+        ...collectParts([
+            before,
+            model.slots?.default,
+            ...Object.values(named),
+            after,
+        ]).values(),
+    ].map((part) => `, ${part.name}: { name: ${JSON.stringify(part.name)}, props: ${JSON.stringify(part.parameters)}, components: { ${componentMap} }, setup: () => ({ ${componentMap} }), template: ${JSON.stringify(part.vue)} }`);
+    return `  ${JSON.stringify(storyRegistryId(model))}: { components: { ${componentMap}${parts.join('')} }, template: ${JSON.stringify(template)} },`;
+}
+export function emitVueRegistry(models, moduleFor, exportFor = (name) => name) {
+    // One `import * as <ns>` per referenced module, insertion-ordered (the kit's
+    // own source first).
+    const namespaces = vueNamespaces(models, moduleFor);
+    const importLines = [...namespaces.entries()]
+        .map(([mod, ns]) => `import * as ${ns} from '${mod}';`)
+        .join('\n');
+    return (`// Generated by scaffold-ui-kit-preview - do not edit.\n` +
+        `${importLines}\n\n` +
+        `export interface VueUnit { components: Record<string, any>; template: string; }\n\n` +
+        `export const registry: Record<string, VueUnit> = {\n` +
+        models
+            .map((model) => vueEntry(model, moduleFor, exportFor, namespaces))
+            .join('\n') +
+        `\n};\n`);
+}

package/dist/enumerate.d.ts

@@ -0,0 +1,2 @@
+import type { EnumeratedComponent, ModuleImporter } from './lib/types.js';
+export declare function enumerateComponents(componentsDirectory: string, importModule: ModuleImporter): Promise<EnumeratedComponent[]>;

package/dist/enumerate.js

@@ -0,0 +1,162 @@
+// Discover component templates by reading a source's templates directory,
+// as the kit's build reads it, and importing each (default export = the
+// defineTemplate object, which is plain data - defineTemplate is identity).
+// Hand-written components live elsewhere, so they are naturally excluded.
+import { readdirSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { componentNameFromFile } from './lib/naming.js';
+import { isTemplateFile } from './lib/template-files.js';
+import { DeclarationResolver, resolveNamedType } from './props-from.js';
+import { partitionImports } from '@js-template-engine/core';
+/** Deep-walk a template tree collecting every `{ type: 'slot' }`: an unnamed one
+ *  sets the default flag, a named one is added to the set, and one whose content
+ *  must take its scope (`scopeRequired` beside `exposes`) is added, by name or as
+ *  `default`, to `scopeRequired`. Walks every object value, `children` included,
+ *  so slots projected through a `slots: { ... }` map on a composed element (e.g.
+ *  Button forwarding its `icon` slot into IconLabel) are found too. */
+function collectSlots(node, into) {
+    if (!node || typeof node !== 'object')
+        return;
+    if (Array.isArray(node)) {
+        for (const child of node)
+            collectSlots(child, into);
+        return;
+    }
+    const record = node;
+    if (record.type === 'slot') {
+        const exposes = record.exposes;
+        const scoped = Boolean(exposes && typeof exposes === 'object' && Object.keys(exposes).length > 0);
+        const named = typeof record.name === 'string' && record.name;
+        if (named)
+            into.named.add(named);
+        else {
+            into.default = true;
+            if (scoped)
+                into.defaultScoped = true;
+        }
+        if (scoped && record.scopeRequired === true)
+            into.scopeRequired.add(named || 'default');
+    }
+    for (const value of Object.values(record))
+        collectSlots(value, into);
+}
+/** Whether any element in a template tree sets `passthrough`. */
+function hasPassthrough(node) {
+    if (!node || typeof node !== 'object')
+        return false;
+    if (Array.isArray(node))
+        return node.some(hasPassthrough);
+    const record = node;
+    return (record.passthrough === true || Object.values(record).some(hasPassthrough));
+}
+/**
+ * The props a discriminated surface root's branches declare, merged into one
+ * definition per name: the branches' types joined (a `true` in one and a
+ * `false` in another read as `boolean`), required only when every branch
+ * requires it. Empty for any other root.
+ */
+function branchProps(children) {
+    const roots = Array.isArray(children) ? children : [children];
+    if (roots.length !== 1)
+        return {};
+    const [root] = roots;
+    if (root?.type !== 'conditional' || !Array.isArray(root.conditions))
+        return {};
+    const branches = root.conditions.map((condition) => condition.props ?? {});
+    const names = [...new Set(branches.flatMap((props) => Object.keys(props)))];
+    const merged = {};
+    for (const name of names) {
+        const definitions = branches.map((props) => props[name]);
+        const present = definitions.filter((definition) => definition !== undefined);
+        const types = [...new Set(present.map((definition) => definition.type))];
+        const type = types.includes('true') && types.includes('false')
+            ? [
+                'boolean',
+                ...types.filter((each) => each !== 'true' && each !== 'false'),
+            ].join(' | ')
+            : types.join(' | ');
+        const description = present.find((definition) => definition.description)?.description;
+        const documentedDefault = present.find((definition) => definition.documentedDefault)?.documentedDefault;
+        merged[name] = {
+            type,
+            ...(definitions.every((definition) => definition?.required === true)
+                ? { required: true }
+                : {}),
+            ...(description ? { description } : {}),
+            ...(documentedDefault ? { documentedDefault } : {}),
+        };
+    }
+    return merged;
+}
+/** A component's shared props followed by any branch prop it does not share. */
+function withBranchProps(shared, children) {
+    const props = { ...shared };
+    for (const [name, definition] of Object.entries(branchProps(children))) {
+        if (!(name in props))
+            props[name] = definition;
+    }
+    return props;
+}
+/** The import statements a template declares, from every target's
+ *  `extensions.<target>.imports`: the same names, from the same modules. */
+function templateImports(extensions) {
+    if (!extensions || typeof extensions !== 'object')
+        return [];
+    const entries = Object.values(extensions)
+        .flatMap((target) => target && typeof target === 'object'
+        ? (target.imports ?? [])
+        : [])
+        .filter((entry) => typeof entry === 'string');
+    return [...new Set(partitionImports(entries).importStatements)];
+}
+/** The props with each named type expanded through the template's imports, so
+ *  a prop typed by an alias from another module reads as its members. */
+function withResolvedTypes(props, templatePath, imports, resolver) {
+    if (imports.length === 0)
+        return props;
+    return Object.fromEntries(Object.entries(props).map(([name, definition]) => {
+        const resolvedType = resolveNamedType(definition.type, templatePath, imports, resolver);
+        return [
+            name,
+            resolvedType ? { ...definition, resolvedType } : definition,
+        ];
+    }));
+}
+export async function enumerateComponents(componentsDirectory, importModule) {
+    const files = readdirSync(componentsDirectory).filter(isTemplateFile).sort();
+    const resolver = new DeclarationResolver(componentsDirectory);
+    const out = [];
+    for (const file of files) {
+        const mod = (await importModule(resolve(componentsDirectory, file)));
+        const template = mod.default;
+        if (!template || typeof template !== 'object')
+            continue;
+        const slots = {
+            default: false,
+            defaultScoped: false,
+            named: new Set(),
+            scopeRequired: new Set(),
+        };
+        collectSlots(template.children, slots);
+        out.push({
+            name: template.name ?? componentNameFromFile(file),
+            file,
+            template: template,
+            ...(typeof template.description === 'string'
+                ? { description: template.description }
+                : {}),
+            props: withResolvedTypes(withBranchProps(template.props ?? {}, template.children), resolve(componentsDirectory, file), templateImports(template.extensions), resolver),
+            hasDefaultSlot: slots.default,
+            ...(slots.defaultScoped ? { defaultSlotScoped: true } : {}),
+            slotNames: [...slots.named],
+            ...(slots.scopeRequired.size > 0
+                ? { scopeRequiredSlots: [...slots.scopeRequired] }
+                : {}),
+            ...(hasPassthrough(template.children) ? { passthrough: true } : {}),
+            ...(typeof template.rest?.tag === 'string'
+                ? { rest: { tag: template.rest.tag } }
+                : {}),
+        });
+    }
+    return out;
+}

package/dist/generate.d.ts

@@ -0,0 +1,43 @@
+import type { PreviewContext } from './context.js';
+/** How `generatePreview` treats the generated tree already on disk. */
+export interface GeneratePreviewOptions {
+    /**
+     * Whether the generated tree is emptied before writing (the default). With
+     * `false`, as a running development server regenerates, the tree is kept:
+     * Vite's dependency cache and the scenario editor's story stay, a file is
+     * written only when its content changed, and a registry file no component
+     * produces any more is removed.
+     */
+    clean?: boolean;
+    /**
+     * Whether to print the html source of every story's scenarios into the
+     * served tree, one `html-source/<component id>.json` per component, as the
+     * static build reads it. Off by default: the development server prints
+     * html on request.
+     */
+    htmlSources?: boolean;
+}
+/** What `generatePreview` changed on disk. */
+export interface GeneratePreviewResult {
+    /** The absolute paths written, because they were new or their content changed. */
+    written: string[];
+    /** The absolute paths of registry files removed because nothing produces them. */
+    removed: string[];
+    /** The absolute paths of the kit's theme sources the generation copied:
+     *  each theme's stylesheet and its assets file or directory. */
+    themeSources: string[];
+}
+/**
+ * Generates the preview into `<kitRoot>/.preview-generated/`: a render
+ * registry per target, the Svelte wrappers, the module-resolution data the
+ * scenario editor reads, the host manifest, and the themes' stylesheets.
+ *
+ * @param context - The kit's preview context.
+ * @param options - Whether the generated tree is emptied first.
+ * @returns The files written and removed.
+ * @example
+ * ```ts
+ * await generatePreview(loadPreviewContext(kitRoot));
+ * ```
+ */
+export declare function generatePreview(context: PreviewContext, options?: GeneratePreviewOptions): Promise<GeneratePreviewResult>;