@adieyal/catalogue-core 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,1958 @@
+import { z } from 'zod';
+
+/**
+ * Apply a RenderNode's configuration to an existing element.
+ * Useful for playground where we update rather than recreate.
+ */
+export declare function applyNodeToElement(element: Element, node: RenderNode): void;
+
+export declare type BooleanControl = z.infer<typeof BooleanControlSchema>;
+
+declare const BooleanControlSchema: z.ZodObject<{
+    type: z.ZodLiteral<"boolean">;
+    label: z.ZodOptional<z.ZodString>;
+    defaultValue: z.ZodOptional<z.ZodBoolean>;
+}, "strip", z.ZodTypeAny, {
+    type: "boolean";
+    label?: string | undefined;
+    defaultValue?: boolean | undefined;
+}, {
+    type: "boolean";
+    label?: string | undefined;
+    defaultValue?: boolean | undefined;
+}>;
+
+export declare interface Breakpoint {
+    name: string;
+    width: number;
+    height: number;
+    /** If true, this breakpoint fills available space */
+    fullScreen?: boolean;
+}
+
+export declare interface CatalogueApp {
+    /** The router instance */
+    router: Router;
+    /** Start the application */
+    start: () => void;
+    /** Navigate to a path */
+    navigate: (path: string) => void;
+    /** Current registry */
+    registry: Registry;
+}
+
+export declare interface CatalogueAppOptions {
+    /** Container element to render into */
+    container: HTMLElement;
+    /** Registry data */
+    registry: Registry;
+    /** Optional base path for deployment */
+    basePath?: string;
+}
+
+export declare interface CategoriesConfig {
+    /** Category definitions */
+    items: CategoryDefinition[];
+    /** Label for uncategorised components */
+    uncategorisedLabel: string;
+}
+
+/**
+ * Registry types for the component catalogue.
+ */
+export declare interface CategoryDefinition {
+    /** Unique category identifier (kebab-case) */
+    id: string;
+    /** Human-readable label */
+    label: string;
+    /** Optional description */
+    description?: string;
+}
+
+export declare interface CodegenOptions {
+    /** Indentation string (default: 2 spaces) */
+    indent?: string;
+    /** Include script tag for complex props */
+    includeScript?: boolean;
+    /** ID to use for element reference in script */
+    elementId?: string;
+}
+
+export declare interface CodePanelElements {
+    wrapper: HTMLDivElement;
+    header: HTMLDivElement;
+    content: HTMLPreElement;
+    copyButton: HTMLButtonElement;
+}
+
+/**
+ * Code panel component for displaying and copying HTML snippets.
+ */
+export declare interface CodePanelOptions {
+    /** Code content to display */
+    code: string;
+    /** Language for syntax highlighting hints */
+    language?: 'html' | 'javascript' | 'json';
+    /** Whether the panel is collapsible */
+    collapsible?: boolean;
+    /** Initial collapsed state */
+    collapsed?: boolean;
+    /** Title for the panel */
+    title?: string;
+}
+
+export declare type ColorControl = z.infer<typeof ColorControlSchema>;
+
+declare const ColorControlSchema: z.ZodObject<{
+    type: z.ZodLiteral<"color">;
+    label: z.ZodOptional<z.ZodString>;
+    defaultValue: z.ZodOptional<z.ZodString>;
+}, "strip", z.ZodTypeAny, {
+    type: "color";
+    label?: string | undefined;
+    defaultValue?: string | undefined;
+}, {
+    type: "color";
+    label?: string | undefined;
+    defaultValue?: string | undefined;
+}>;
+
+export declare type Component = z.infer<typeof ComponentSchema>;
+
+export declare type ComponentExports = z.infer<typeof ComponentExportsSchema>;
+
+export declare const ComponentExportsSchema: z.ZodObject<{
+    /** Custom element tag name (must be kebab-case with at least one hyphen) */
+    customElement: z.ZodString;
+    /** npm package name (optional, defaults to consumer's package) */
+    package: z.ZodOptional<z.ZodString>;
+    /** Entry point path (optional, defaults to main entry) */
+    entry: z.ZodOptional<z.ZodString>;
+}, "strip", z.ZodTypeAny, {
+    customElement: string;
+    package?: string | undefined;
+    entry?: string | undefined;
+}, {
+    customElement: string;
+    package?: string | undefined;
+    entry?: string | undefined;
+}>;
+
+export declare type ComponentKind = z.infer<typeof ComponentKindSchema>;
+
+export declare const ComponentKindSchema: z.ZodEnum<["standalone", "subcomponent", "feature"]>;
+
+export declare interface ComponentPageElements {
+    root: HTMLDivElement;
+    header: HTMLElement;
+    variantsGrid: HTMLDivElement;
+    docsSection: HTMLDivElement | null;
+}
+
+export declare interface ComponentPageOptions {
+    registry: Registry;
+    componentId: string;
+    onNavigate: (path: string) => void;
+}
+
+export declare const ComponentSchema: z.ZodEffects<z.ZodObject<{
+    /** Unique identifier for the component (kebab-case) */
+    id: z.ZodString;
+    /** Human-readable title */
+    title: z.ZodString;
+    /** Component maturity status */
+    status: z.ZodEnum<["stable", "beta", "deprecated"]>;
+    /** Component kind */
+    kind: z.ZodEnum<["standalone", "subcomponent", "feature"]>;
+    /** Optional description */
+    description: z.ZodOptional<z.ZodString>;
+    /** Tags for search and filtering */
+    tags: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
+    /** Category ID (must match a category defined in config) */
+    category: z.ZodOptional<z.ZodString>;
+    /** Export configuration */
+    exports: z.ZodObject<{
+        /** Custom element tag name (must be kebab-case with at least one hyphen) */
+        customElement: z.ZodString;
+        /** npm package name (optional, defaults to consumer's package) */
+        package: z.ZodOptional<z.ZodString>;
+        /** Entry point path (optional, defaults to main entry) */
+        entry: z.ZodOptional<z.ZodString>;
+    }, "strip", z.ZodTypeAny, {
+        customElement: string;
+        package?: string | undefined;
+        entry?: string | undefined;
+    }, {
+        customElement: string;
+        package?: string | undefined;
+        entry?: string | undefined;
+    }>;
+    /** Playground configuration */
+    playground: z.ZodObject<{
+        /** ID of the primary scenario to use as default in playground */
+        primaryScenarioId: z.ZodString;
+        /** Control definitions keyed by property name */
+        controls: z.ZodRecord<z.ZodString, z.ZodDiscriminatedUnion<"type", [z.ZodObject<{
+            type: z.ZodLiteral<"text">;
+            label: z.ZodOptional<z.ZodString>;
+            defaultValue: z.ZodOptional<z.ZodString>;
+            placeholder: z.ZodOptional<z.ZodString>;
+        }, "strip", z.ZodTypeAny, {
+            type: "text";
+            label?: string | undefined;
+            defaultValue?: string | undefined;
+            placeholder?: string | undefined;
+        }, {
+            type: "text";
+            label?: string | undefined;
+            defaultValue?: string | undefined;
+            placeholder?: string | undefined;
+        }>, z.ZodObject<{
+            type: z.ZodLiteral<"number">;
+            label: z.ZodOptional<z.ZodString>;
+            defaultValue: z.ZodOptional<z.ZodNumber>;
+            min: z.ZodOptional<z.ZodNumber>;
+            max: z.ZodOptional<z.ZodNumber>;
+            step: z.ZodOptional<z.ZodNumber>;
+        }, "strip", z.ZodTypeAny, {
+            type: "number";
+            label?: string | undefined;
+            defaultValue?: number | undefined;
+            min?: number | undefined;
+            max?: number | undefined;
+            step?: number | undefined;
+        }, {
+            type: "number";
+            label?: string | undefined;
+            defaultValue?: number | undefined;
+            min?: number | undefined;
+            max?: number | undefined;
+            step?: number | undefined;
+        }>, z.ZodObject<{
+            type: z.ZodLiteral<"boolean">;
+            label: z.ZodOptional<z.ZodString>;
+            defaultValue: z.ZodOptional<z.ZodBoolean>;
+        }, "strip", z.ZodTypeAny, {
+            type: "boolean";
+            label?: string | undefined;
+            defaultValue?: boolean | undefined;
+        }, {
+            type: "boolean";
+            label?: string | undefined;
+            defaultValue?: boolean | undefined;
+        }>, z.ZodObject<{
+            type: z.ZodLiteral<"select">;
+            label: z.ZodOptional<z.ZodString>;
+            defaultValue: z.ZodOptional<z.ZodString>;
+            options: z.ZodArray<z.ZodUnion<[z.ZodString, z.ZodObject<{
+                label: z.ZodString;
+                value: z.ZodString;
+            }, "strip", z.ZodTypeAny, {
+                value: string;
+                label: string;
+            }, {
+                value: string;
+                label: string;
+            }>]>, "many">;
+        }, "strip", z.ZodTypeAny, {
+            options: (string | {
+                value: string;
+                label: string;
+            })[];
+            type: "select";
+            label?: string | undefined;
+            defaultValue?: string | undefined;
+        }, {
+            options: (string | {
+                value: string;
+                label: string;
+            })[];
+            type: "select";
+            label?: string | undefined;
+            defaultValue?: string | undefined;
+        }>, z.ZodObject<{
+            type: z.ZodLiteral<"radio">;
+            label: z.ZodOptional<z.ZodString>;
+            defaultValue: z.ZodOptional<z.ZodString>;
+            options: z.ZodArray<z.ZodUnion<[z.ZodString, z.ZodObject<{
+                label: z.ZodString;
+                value: z.ZodString;
+            }, "strip", z.ZodTypeAny, {
+                value: string;
+                label: string;
+            }, {
+                value: string;
+                label: string;
+            }>]>, "many">;
+        }, "strip", z.ZodTypeAny, {
+            options: (string | {
+                value: string;
+                label: string;
+            })[];
+            type: "radio";
+            label?: string | undefined;
+            defaultValue?: string | undefined;
+        }, {
+            options: (string | {
+                value: string;
+                label: string;
+            })[];
+            type: "radio";
+            label?: string | undefined;
+            defaultValue?: string | undefined;
+        }>, z.ZodObject<{
+            type: z.ZodLiteral<"color">;
+            label: z.ZodOptional<z.ZodString>;
+            defaultValue: z.ZodOptional<z.ZodString>;
+        }, "strip", z.ZodTypeAny, {
+            type: "color";
+            label?: string | undefined;
+            defaultValue?: string | undefined;
+        }, {
+            type: "color";
+            label?: string | undefined;
+            defaultValue?: string | undefined;
+        }>, z.ZodObject<{
+            type: z.ZodLiteral<"range">;
+            label: z.ZodOptional<z.ZodString>;
+            defaultValue: z.ZodOptional<z.ZodNumber>;
+            min: z.ZodNumber;
+            max: z.ZodNumber;
+            step: z.ZodOptional<z.ZodNumber>;
+        }, "strip", z.ZodTypeAny, {
+            type: "range";
+            min: number;
+            max: number;
+            label?: string | undefined;
+            defaultValue?: number | undefined;
+            step?: number | undefined;
+        }, {
+            type: "range";
+            min: number;
+            max: number;
+            label?: string | undefined;
+            defaultValue?: number | undefined;
+            step?: number | undefined;
+        }>, z.ZodObject<{
+            type: z.ZodLiteral<"json">;
+            label: z.ZodOptional<z.ZodString>;
+            defaultValue: z.ZodOptional<z.ZodUnknown>;
+        }, "strip", z.ZodTypeAny, {
+            type: "json";
+            label?: string | undefined;
+            defaultValue?: unknown;
+        }, {
+            type: "json";
+            label?: string | undefined;
+            defaultValue?: unknown;
+        }>]>>;
+    }, "strip", z.ZodTypeAny, {
+        primaryScenarioId: string;
+        controls: Record<string, {
+            type: "text";
+            label?: string | undefined;
+            defaultValue?: string | undefined;
+            placeholder?: string | undefined;
+        } | {
+            type: "number";
+            label?: string | undefined;
+            defaultValue?: number | undefined;
+            min?: number | undefined;
+            max?: number | undefined;
+            step?: number | undefined;
+        } | {
+            type: "boolean";
+            label?: string | undefined;
+            defaultValue?: boolean | undefined;
+        } | {
+            options: (string | {
+                value: string;
+                label: string;
+            })[];
+            type: "select";
+            label?: string | undefined;
+            defaultValue?: string | undefined;
+        } | {
+            options: (string | {
+                value: string;
+                label: string;
+            })[];
+            type: "radio";
+            label?: string | undefined;
+            defaultValue?: string | undefined;
+        } | {
+            type: "color";
+            label?: string | undefined;
+            defaultValue?: string | undefined;
+        } | {
+            type: "range";
+            min: number;
+            max: number;
+            label?: string | undefined;
+            defaultValue?: number | undefined;
+            step?: number | undefined;
+        } | {
+            type: "json";
+            label?: string | undefined;
+            defaultValue?: unknown;
+        }>;
+    }, {
+        primaryScenarioId: string;
+        controls: Record<string, {
+            type: "text";
+            label?: string | undefined;
+            defaultValue?: string | undefined;
+            placeholder?: string | undefined;
+        } | {
+            type: "number";
+            label?: string | undefined;
+            defaultValue?: number | undefined;
+            min?: number | undefined;
+            max?: number | undefined;
+            step?: number | undefined;
+        } | {
+            type: "boolean";
+            label?: string | undefined;
+            defaultValue?: boolean | undefined;
+        } | {
+            options: (string | {
+                value: string;
+                label: string;
+            })[];
+            type: "select";
+            label?: string | undefined;
+            defaultValue?: string | undefined;
+        } | {
+            options: (string | {
+                value: string;
+                label: string;
+            })[];
+            type: "radio";
+            label?: string | undefined;
+            defaultValue?: string | undefined;
+        } | {
+            type: "color";
+            label?: string | undefined;
+            defaultValue?: string | undefined;
+        } | {
+            type: "range";
+            min: number;
+            max: number;
+            label?: string | undefined;
+            defaultValue?: number | undefined;
+            step?: number | undefined;
+        } | {
+            type: "json";
+            label?: string | undefined;
+            defaultValue?: unknown;
+        }>;
+    }>;
+    /** Parent component ID (required when kind is 'subcomponent') */
+    parentId: z.ZodOptional<z.ZodString>;
+    /** List of subcomponent IDs */
+    subcomponents: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
+}, "strip", z.ZodTypeAny, {
+    status: "stable" | "beta" | "deprecated";
+    id: string;
+    title: string;
+    kind: "standalone" | "subcomponent" | "feature";
+    exports: {
+        customElement: string;
+        package?: string | undefined;
+        entry?: string | undefined;
+    };
+    playground: {
+        primaryScenarioId: string;
+        controls: Record<string, {
+            type: "text";
+            label?: string | undefined;
+            defaultValue?: string | undefined;
+            placeholder?: string | undefined;
+        } | {
+            type: "number";
+            label?: string | undefined;
+            defaultValue?: number | undefined;
+            min?: number | undefined;
+            max?: number | undefined;
+            step?: number | undefined;
+        } | {
+            type: "boolean";
+            label?: string | undefined;
+            defaultValue?: boolean | undefined;
+        } | {
+            options: (string | {
+                value: string;
+                label: string;
+            })[];
+            type: "select";
+            label?: string | undefined;
+            defaultValue?: string | undefined;
+        } | {
+            options: (string | {
+                value: string;
+                label: string;
+            })[];
+            type: "radio";
+            label?: string | undefined;
+            defaultValue?: string | undefined;
+        } | {
+            type: "color";
+            label?: string | undefined;
+            defaultValue?: string | undefined;
+        } | {
+            type: "range";
+            min: number;
+            max: number;
+            label?: string | undefined;
+            defaultValue?: number | undefined;
+            step?: number | undefined;
+        } | {
+            type: "json";
+            label?: string | undefined;
+            defaultValue?: unknown;
+        }>;
+    };
+    description?: string | undefined;
+    tags?: string[] | undefined;
+    category?: string | undefined;
+    parentId?: string | undefined;
+    subcomponents?: string[] | undefined;
+}, {
+    status: "stable" | "beta" | "deprecated";
+    id: string;
+    title: string;
+    kind: "standalone" | "subcomponent" | "feature";
+    exports: {
+        customElement: string;
+        package?: string | undefined;
+        entry?: string | undefined;
+    };
+    playground: {
+        primaryScenarioId: string;
+        controls: Record<string, {
+            type: "text";
+            label?: string | undefined;
+            defaultValue?: string | undefined;
+            placeholder?: string | undefined;
+        } | {
+            type: "number";
+            label?: string | undefined;
+            defaultValue?: number | undefined;
+            min?: number | undefined;
+            max?: number | undefined;
+            step?: number | undefined;
+        } | {
+            type: "boolean";
+            label?: string | undefined;
+            defaultValue?: boolean | undefined;
+        } | {
+            options: (string | {
+                value: string;
+                label: string;
+            })[];
+            type: "select";
+            label?: string | undefined;
+            defaultValue?: string | undefined;
+        } | {
+            options: (string | {
+                value: string;
+                label: string;
+            })[];
+            type: "radio";
+            label?: string | undefined;
+            defaultValue?: string | undefined;
+        } | {
+            type: "color";
+            label?: string | undefined;
+            defaultValue?: string | undefined;
+        } | {
+            type: "range";
+            min: number;
+            max: number;
+            label?: string | undefined;
+            defaultValue?: number | undefined;
+            step?: number | undefined;
+        } | {
+            type: "json";
+            label?: string | undefined;
+            defaultValue?: unknown;
+        }>;
+    };
+    description?: string | undefined;
+    tags?: string[] | undefined;
+    category?: string | undefined;
+    parentId?: string | undefined;
+    subcomponents?: string[] | undefined;
+}>, {
+    status: "stable" | "beta" | "deprecated";
+    id: string;
+    title: string;
+    kind: "standalone" | "subcomponent" | "feature";
+    exports: {
+        customElement: string;
+        package?: string | undefined;
+        entry?: string | undefined;
+    };
+    playground: {
+        primaryScenarioId: string;
+        controls: Record<string, {
+            type: "text";
+            label?: string | undefined;
+            defaultValue?: string | undefined;
+            placeholder?: string | undefined;
+        } | {
+            type: "number";
+            label?: string | undefined;
+            defaultValue?: number | undefined;
+            min?: number | undefined;
+            max?: number | undefined;
+            step?: number | undefined;
+        } | {
+            type: "boolean";
+            label?: string | undefined;
+            defaultValue?: boolean | undefined;
+        } | {
+            options: (string | {
+                value: string;
+                label: string;
+            })[];
+            type: "select";
+            label?: string | undefined;
+            defaultValue?: string | undefined;
+        } | {
+            options: (string | {
+                value: string;
+                label: string;
+            })[];
+            type: "radio";
+            label?: string | undefined;
+            defaultValue?: string | undefined;
+        } | {
+            type: "color";
+            label?: string | undefined;
+            defaultValue?: string | undefined;
+        } | {
+            type: "range";
+            min: number;
+            max: number;
+            label?: string | undefined;
+            defaultValue?: number | undefined;
+            step?: number | undefined;
+        } | {
+            type: "json";
+            label?: string | undefined;
+            defaultValue?: unknown;
+        }>;
+    };
+    description?: string | undefined;
+    tags?: string[] | undefined;
+    category?: string | undefined;
+    parentId?: string | undefined;
+    subcomponents?: string[] | undefined;
+}, {
+    status: "stable" | "beta" | "deprecated";
+    id: string;
+    title: string;
+    kind: "standalone" | "subcomponent" | "feature";
+    exports: {
+        customElement: string;
+        package?: string | undefined;
+        entry?: string | undefined;
+    };
+    playground: {
+        primaryScenarioId: string;
+        controls: Record<string, {
+            type: "text";
+            label?: string | undefined;
+            defaultValue?: string | undefined;
+            placeholder?: string | undefined;
+        } | {
+            type: "number";
+            label?: string | undefined;
+            defaultValue?: number | undefined;
+            min?: number | undefined;
+            max?: number | undefined;
+            step?: number | undefined;
+        } | {
+            type: "boolean";
+            label?: string | undefined;
+            defaultValue?: boolean | undefined;
+        } | {
+            options: (string | {
+                value: string;
+                label: string;
+            })[];
+            type: "select";
+            label?: string | undefined;
+            defaultValue?: string | undefined;
+        } | {
+            options: (string | {
+                value: string;
+                label: string;
+            })[];
+            type: "radio";
+            label?: string | undefined;
+            defaultValue?: string | undefined;
+        } | {
+            type: "color";
+            label?: string | undefined;
+            defaultValue?: string | undefined;
+        } | {
+            type: "range";
+            min: number;
+            max: number;
+            label?: string | undefined;
+            defaultValue?: number | undefined;
+            step?: number | undefined;
+        } | {
+            type: "json";
+            label?: string | undefined;
+            defaultValue?: unknown;
+        }>;
+    };
+    description?: string | undefined;
+    tags?: string[] | undefined;
+    category?: string | undefined;
+    parentId?: string | undefined;
+    subcomponents?: string[] | undefined;
+}>;
+
+export declare type ComponentStatus = z.infer<typeof ComponentStatusSchema>;
+
+/**
+ * Component schema defines the structure of a component.json file
+ * in the registry. Each component has metadata, exports, and playground config.
+ */
+export declare const ComponentStatusSchema: z.ZodEnum<["stable", "beta", "deprecated"]>;
+
+export declare interface ComponentValidationResult {
+    success: boolean;
+    data?: Component;
+    errors?: Array<{
+        path: string;
+        message: string;
+    }>;
+}
+
+export declare interface ControlsElements {
+    container: HTMLDivElement;
+    controls: Map<string, HTMLElement>;
+}
+
+export declare interface ControlsOptions {
+    component: RegistryComponent;
+    values: Record<string, unknown>;
+    onChange: (propName: string, value: unknown) => void;
+}
+
+export declare type ControlSpec = z.infer<typeof ControlSpecSchema>;
+
+export declare const ControlSpecSchema: z.ZodDiscriminatedUnion<"type", [z.ZodObject<{
+    type: z.ZodLiteral<"text">;
+    label: z.ZodOptional<z.ZodString>;
+    defaultValue: z.ZodOptional<z.ZodString>;
+    placeholder: z.ZodOptional<z.ZodString>;
+}, "strip", z.ZodTypeAny, {
+    type: "text";
+    label?: string | undefined;
+    defaultValue?: string | undefined;
+    placeholder?: string | undefined;
+}, {
+    type: "text";
+    label?: string | undefined;
+    defaultValue?: string | undefined;
+    placeholder?: string | undefined;
+}>, z.ZodObject<{
+    type: z.ZodLiteral<"number">;
+    label: z.ZodOptional<z.ZodString>;
+    defaultValue: z.ZodOptional<z.ZodNumber>;
+    min: z.ZodOptional<z.ZodNumber>;
+    max: z.ZodOptional<z.ZodNumber>;
+    step: z.ZodOptional<z.ZodNumber>;
+}, "strip", z.ZodTypeAny, {
+    type: "number";
+    label?: string | undefined;
+    defaultValue?: number | undefined;
+    min?: number | undefined;
+    max?: number | undefined;
+    step?: number | undefined;
+}, {
+    type: "number";
+    label?: string | undefined;
+    defaultValue?: number | undefined;
+    min?: number | undefined;
+    max?: number | undefined;
+    step?: number | undefined;
+}>, z.ZodObject<{
+    type: z.ZodLiteral<"boolean">;
+    label: z.ZodOptional<z.ZodString>;
+    defaultValue: z.ZodOptional<z.ZodBoolean>;
+}, "strip", z.ZodTypeAny, {
+    type: "boolean";
+    label?: string | undefined;
+    defaultValue?: boolean | undefined;
+}, {
+    type: "boolean";
+    label?: string | undefined;
+    defaultValue?: boolean | undefined;
+}>, z.ZodObject<{
+    type: z.ZodLiteral<"select">;
+    label: z.ZodOptional<z.ZodString>;
+    defaultValue: z.ZodOptional<z.ZodString>;
+    options: z.ZodArray<z.ZodUnion<[z.ZodString, z.ZodObject<{
+        label: z.ZodString;
+        value: z.ZodString;
+    }, "strip", z.ZodTypeAny, {
+        value: string;
+        label: string;
+    }, {
+        value: string;
+        label: string;
+    }>]>, "many">;
+}, "strip", z.ZodTypeAny, {
+    options: (string | {
+        value: string;
+        label: string;
+    })[];
+    type: "select";
+    label?: string | undefined;
+    defaultValue?: string | undefined;
+}, {
+    options: (string | {
+        value: string;
+        label: string;
+    })[];
+    type: "select";
+    label?: string | undefined;
+    defaultValue?: string | undefined;
+}>, z.ZodObject<{
+    type: z.ZodLiteral<"radio">;
+    label: z.ZodOptional<z.ZodString>;
+    defaultValue: z.ZodOptional<z.ZodString>;
+    options: z.ZodArray<z.ZodUnion<[z.ZodString, z.ZodObject<{
+        label: z.ZodString;
+        value: z.ZodString;
+    }, "strip", z.ZodTypeAny, {
+        value: string;
+        label: string;
+    }, {
+        value: string;
+        label: string;
+    }>]>, "many">;
+}, "strip", z.ZodTypeAny, {
+    options: (string | {
+        value: string;
+        label: string;
+    })[];
+    type: "radio";
+    label?: string | undefined;
+    defaultValue?: string | undefined;
+}, {
+    options: (string | {
+        value: string;
+        label: string;
+    })[];
+    type: "radio";
+    label?: string | undefined;
+    defaultValue?: string | undefined;
+}>, z.ZodObject<{
+    type: z.ZodLiteral<"color">;
+    label: z.ZodOptional<z.ZodString>;
+    defaultValue: z.ZodOptional<z.ZodString>;
+}, "strip", z.ZodTypeAny, {
+    type: "color";
+    label?: string | undefined;
+    defaultValue?: string | undefined;
+}, {
+    type: "color";
+    label?: string | undefined;
+    defaultValue?: string | undefined;
+}>, z.ZodObject<{
+    type: z.ZodLiteral<"range">;
+    label: z.ZodOptional<z.ZodString>;
+    defaultValue: z.ZodOptional<z.ZodNumber>;
+    min: z.ZodNumber;
+    max: z.ZodNumber;
+    step: z.ZodOptional<z.ZodNumber>;
+}, "strip", z.ZodTypeAny, {
+    type: "range";
+    min: number;
+    max: number;
+    label?: string | undefined;
+    defaultValue?: number | undefined;
+    step?: number | undefined;
+}, {
+    type: "range";
+    min: number;
+    max: number;
+    label?: string | undefined;
+    defaultValue?: number | undefined;
+    step?: number | undefined;
+}>, z.ZodObject<{
+    type: z.ZodLiteral<"json">;
+    label: z.ZodOptional<z.ZodString>;
+    defaultValue: z.ZodOptional<z.ZodUnknown>;
+}, "strip", z.ZodTypeAny, {
+    type: "json";
+    label?: string | undefined;
+    defaultValue?: unknown;
+}, {
+    type: "json";
+    label?: string | undefined;
+    defaultValue?: unknown;
+}>]>;
+
+/**
+ * Create breakpoint preset buttons.
+ */
+export declare function createBreakpointPresets(resizer: ResizerElements, breakpoints?: Breakpoint[], onSelect?: (breakpoint: Breakpoint) => void): HTMLDivElement;
+
+/**
+ * Create and initialize the catalogue application.
+ */
+export declare function createCatalogueApp(options: CatalogueAppOptions): CatalogueApp;
+
+/**
+ * Create a code panel with copy functionality.
+ */
+export declare function createCodePanel(options: CodePanelOptions): CodePanelElements;
+
+/**
+ * Create the component detail page.
+ */
+export declare function createComponentPage(options: ComponentPageOptions): ComponentPageElements | null;
+
+/**
+ * Create the controls panel for a component.
+ */
+export declare function createControls(options: ControlsOptions): ControlsElements;
+
+/**
+ * Create an empty registry.
+ */
+export declare function createEmptyRegistry(): Registry;
+
+/**
+ * Create the harness page.
+ */
+export declare function createHarnessPage(options: HarnessPageOptions): HarnessPageElements | null;
+
+/**
+ * Create the landing page.
+ */
+export declare function createLandingPage(options: LandingPageOptions): LandingPageElements;
+
+/**
+ * Create a navigation link element.
+ */
+export declare function createNavLink(href: string, text: string, className?: string): HTMLAnchorElement;
+
+/**
+ * Create the playground page.
+ */
+export declare function createPlaygroundPage(options: PlaygroundPageOptions): PlaygroundPageElements | null;
+
+/**
+ * Create a resizable container.
+ */
+export declare function createResizer(options?: ResizerOptions): ResizerElements;
+
+/**
+ * Create a theme toggle button element.
+ */
+export declare function createThemeToggle(): HTMLButtonElement;
+
+export declare const DEFAULT_BREAKPOINTS: Breakpoint[];
+
+export declare type Example = Scenario;
+
+export declare const ExampleSchema: z.ZodObject<{
+    /** Unique identifier for the scenario (kebab-case) */
+    id: z.ZodString;
+    /** Human-readable title */
+    title: z.ZodString;
+    /** Optional description explaining the scenario */
+    description: z.ZodOptional<z.ZodString>;
+    /** Component ID this scenario belongs to */
+    componentId: z.ZodString;
+    /** Tags for search and filtering */
+    tags: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
+    /** The RenderNode tree that defines the DOM structure */
+    render: z.ZodType<RenderNode, z.ZodTypeDef, RenderNode>;
+    /** Optional viewport configuration for screenshots */
+    viewport: z.ZodOptional<z.ZodObject<{
+        width: z.ZodOptional<z.ZodNumber>;
+        height: z.ZodOptional<z.ZodNumber>;
+    }, "strip", z.ZodTypeAny, {
+        width?: number | undefined;
+        height?: number | undefined;
+    }, {
+        width?: number | undefined;
+        height?: number | undefined;
+    }>>;
+    /** Optional background color override */
+    background: z.ZodOptional<z.ZodString>;
+    /** Whether this is the primary scenario (shown first) */
+    primary: z.ZodOptional<z.ZodBoolean>;
+}, "strip", z.ZodTypeAny, {
+    id: string;
+    title: string;
+    componentId: string;
+    render: RenderNode;
+    description?: string | undefined;
+    tags?: string[] | undefined;
+    viewport?: {
+        width?: number | undefined;
+        height?: number | undefined;
+    } | undefined;
+    background?: string | undefined;
+    primary?: boolean | undefined;
+}, {
+    id: string;
+    title: string;
+    componentId: string;
+    render: RenderNode;
+    description?: string | undefined;
+    tags?: string[] | undefined;
+    viewport?: {
+        width?: number | undefined;
+        height?: number | undefined;
+    } | undefined;
+    background?: string | undefined;
+    primary?: boolean | undefined;
+}>;
+
+export declare function formatComponentErrors(errors: Array<{
+    path: string;
+    message: string;
+}>, filePath?: string): string;
+
+/**
+ * Format HTML code for display.
+ */
+export declare function formatHtml(html: string, indent?: number): string;
+
+export declare function formatScenarioErrors(errors: Array<{
+    path: string;
+    message: string;
+}>, filePath?: string): string;
+
+export declare function formatValidationErrors(result: ValidationResult): string;
+
+/**
+ * Generate HTML from a RenderNode.
+ */
+export declare function generateHtml(node: RenderNode, options?: CodegenOptions): string;
+
+/**
+ * Generate just the HTML without script tags.
+ */
+export declare function generateHtmlOnly(node: RenderNode, options?: Omit<CodegenOptions, 'includeScript'>): string;
+
+/**
+ * Generate JavaScript code for setting complex properties.
+ */
+export declare function generatePropsScript(node: RenderNode, selector: string, options?: {
+    indent?: string;
+}): string | null;
+
+/**
+ * Generate all harness URLs for a registry (for Playwright test generation).
+ */
+export declare function getAllHarnessUrls(registry: Registry, breakpoints?: Array<{
+    width: number;
+    height: number;
+}>): Array<{
+    scenarioId: string;
+    componentId: string;
+    url: string;
+    theme: Theme;
+    width?: number;
+    height?: number;
+}>;
+
+/**
+ * Group standalone components by category.
+ */
+export declare function getComponentsByCategory(registry: Registry): GroupedComponents[];
+
+/**
+ * Get harness URL for a scenario.
+ */
+export declare function getHarnessUrl(scenarioId: string, options?: {
+    theme?: Theme;
+    width?: number;
+    height?: number;
+    background?: string;
+}): string;
+
+/**
+ * Get the initial theme based on localStorage or system preference.
+ */
+export declare function getInitialTheme(): Theme;
+
+/**
+ * Get all standalone components (not subcomponents).
+ */
+export declare function getStandaloneComponents(registry: Registry): RegistryComponent[];
+
+/**
+ * Get subcomponents of a component.
+ */
+export declare function getSubcomponents(registry: Registry, parentId: string): RegistryComponent[];
+
+export declare interface GroupedComponents {
+    /** Category definition, or null for uncategorised */
+    category: CategoryDefinition | null;
+    /** Components in this category */
+    components: RegistryComponent[];
+}
+
+export declare interface HarnessPageElements {
+    root: HTMLDivElement;
+    container: HTMLDivElement;
+}
+
+export declare interface HarnessPageOptions {
+    registry: Registry;
+    scenarioId: string;
+    query: URLSearchParams;
+}
+
+/**
+ * Initialize the theme on page load.
+ */
+export declare function initTheme(): Theme;
+
+export declare type JsonControl = z.infer<typeof JsonControlSchema>;
+
+declare const JsonControlSchema: z.ZodObject<{
+    type: z.ZodLiteral<"json">;
+    label: z.ZodOptional<z.ZodString>;
+    defaultValue: z.ZodOptional<z.ZodUnknown>;
+}, "strip", z.ZodTypeAny, {
+    type: "json";
+    label?: string | undefined;
+    defaultValue?: unknown;
+}, {
+    type: "json";
+    label?: string | undefined;
+    defaultValue?: unknown;
+}>;
+
+export declare interface LandingPageElements {
+    root: HTMLDivElement;
+    searchInput: HTMLInputElement;
+    filterContainer: HTMLDivElement;
+    componentList: HTMLDivElement;
+}
+
+export declare interface LandingPageOptions {
+    registry: Registry;
+    onNavigate: (path: string) => void;
+}
+
+/**
+ * Parse and validate raw registry data into a typed Registry.
+ */
+export declare function loadRegistry(raw: RawRegistryData): LoadResult;
+
+export declare interface LoadResult {
+    registry: Registry;
+    errors: ValidationError[];
+}
+
+/**
+ * Mount the catalogue app to the DOM.
+ */
+export declare function mountCatalogueApp(selector: string, registry: Registry, options?: Partial<CatalogueAppOptions>): CatalogueApp;
+
+export declare type NumberControl = z.infer<typeof NumberControlSchema>;
+
+declare const NumberControlSchema: z.ZodObject<{
+    type: z.ZodLiteral<"number">;
+    label: z.ZodOptional<z.ZodString>;
+    defaultValue: z.ZodOptional<z.ZodNumber>;
+    min: z.ZodOptional<z.ZodNumber>;
+    max: z.ZodOptional<z.ZodNumber>;
+    step: z.ZodOptional<z.ZodNumber>;
+}, "strip", z.ZodTypeAny, {
+    type: "number";
+    label?: string | undefined;
+    defaultValue?: number | undefined;
+    min?: number | undefined;
+    max?: number | undefined;
+    step?: number | undefined;
+}, {
+    type: "number";
+    label?: string | undefined;
+    defaultValue?: number | undefined;
+    min?: number | undefined;
+    max?: number | undefined;
+    step?: number | undefined;
+}>;
+
+/**
+ * Parse route parameters from a URL pattern match.
+ */
+export declare function parseRouteParams(pattern: string, path: string): Record<string, string> | null;
+
+export declare type PlaygroundConfig = z.infer<typeof PlaygroundConfigSchema>;
+
+export declare const PlaygroundConfigSchema: z.ZodObject<{
+    /** ID of the primary scenario to use as default in playground */
+    primaryScenarioId: z.ZodString;
+    /** Control definitions keyed by property name */
+    controls: z.ZodRecord<z.ZodString, z.ZodDiscriminatedUnion<"type", [z.ZodObject<{
+        type: z.ZodLiteral<"text">;
+        label: z.ZodOptional<z.ZodString>;
+        defaultValue: z.ZodOptional<z.ZodString>;
+        placeholder: z.ZodOptional<z.ZodString>;
+    }, "strip", z.ZodTypeAny, {
+        type: "text";
+        label?: string | undefined;
+        defaultValue?: string | undefined;
+        placeholder?: string | undefined;
+    }, {
+        type: "text";
+        label?: string | undefined;
+        defaultValue?: string | undefined;
+        placeholder?: string | undefined;
+    }>, z.ZodObject<{
+        type: z.ZodLiteral<"number">;
+        label: z.ZodOptional<z.ZodString>;
+        defaultValue: z.ZodOptional<z.ZodNumber>;
+        min: z.ZodOptional<z.ZodNumber>;
+        max: z.ZodOptional<z.ZodNumber>;
+        step: z.ZodOptional<z.ZodNumber>;
+    }, "strip", z.ZodTypeAny, {
+        type: "number";
+        label?: string | undefined;
+        defaultValue?: number | undefined;
+        min?: number | undefined;
+        max?: number | undefined;
+        step?: number | undefined;
+    }, {
+        type: "number";
+        label?: string | undefined;
+        defaultValue?: number | undefined;
+        min?: number | undefined;
+        max?: number | undefined;
+        step?: number | undefined;
+    }>, z.ZodObject<{
+        type: z.ZodLiteral<"boolean">;
+        label: z.ZodOptional<z.ZodString>;
+        defaultValue: z.ZodOptional<z.ZodBoolean>;
+    }, "strip", z.ZodTypeAny, {
+        type: "boolean";
+        label?: string | undefined;
+        defaultValue?: boolean | undefined;
+    }, {
+        type: "boolean";
+        label?: string | undefined;
+        defaultValue?: boolean | undefined;
+    }>, z.ZodObject<{
+        type: z.ZodLiteral<"select">;
+        label: z.ZodOptional<z.ZodString>;
+        defaultValue: z.ZodOptional<z.ZodString>;
+        options: z.ZodArray<z.ZodUnion<[z.ZodString, z.ZodObject<{
+            label: z.ZodString;
+            value: z.ZodString;
+        }, "strip", z.ZodTypeAny, {
+            value: string;
+            label: string;
+        }, {
+            value: string;
+            label: string;
+        }>]>, "many">;
+    }, "strip", z.ZodTypeAny, {
+        options: (string | {
+            value: string;
+            label: string;
+        })[];
+        type: "select";
+        label?: string | undefined;
+        defaultValue?: string | undefined;
+    }, {
+        options: (string | {
+            value: string;
+            label: string;
+        })[];
+        type: "select";
+        label?: string | undefined;
+        defaultValue?: string | undefined;
+    }>, z.ZodObject<{
+        type: z.ZodLiteral<"radio">;
+        label: z.ZodOptional<z.ZodString>;
+        defaultValue: z.ZodOptional<z.ZodString>;
+        options: z.ZodArray<z.ZodUnion<[z.ZodString, z.ZodObject<{
+            label: z.ZodString;
+            value: z.ZodString;
+        }, "strip", z.ZodTypeAny, {
+            value: string;
+            label: string;
+        }, {
+            value: string;
+            label: string;
+        }>]>, "many">;
+    }, "strip", z.ZodTypeAny, {
+        options: (string | {
+            value: string;
+            label: string;
+        })[];
+        type: "radio";
+        label?: string | undefined;
+        defaultValue?: string | undefined;
+    }, {
+        options: (string | {
+            value: string;
+            label: string;
+        })[];
+        type: "radio";
+        label?: string | undefined;
+        defaultValue?: string | undefined;
+    }>, z.ZodObject<{
+        type: z.ZodLiteral<"color">;
+        label: z.ZodOptional<z.ZodString>;
+        defaultValue: z.ZodOptional<z.ZodString>;
+    }, "strip", z.ZodTypeAny, {
+        type: "color";
+        label?: string | undefined;
+        defaultValue?: string | undefined;
+    }, {
+        type: "color";
+        label?: string | undefined;
+        defaultValue?: string | undefined;
+    }>, z.ZodObject<{
+        type: z.ZodLiteral<"range">;
+        label: z.ZodOptional<z.ZodString>;
+        defaultValue: z.ZodOptional<z.ZodNumber>;
+        min: z.ZodNumber;
+        max: z.ZodNumber;
+        step: z.ZodOptional<z.ZodNumber>;
+    }, "strip", z.ZodTypeAny, {
+        type: "range";
+        min: number;
+        max: number;
+        label?: string | undefined;
+        defaultValue?: number | undefined;
+        step?: number | undefined;
+    }, {
+        type: "range";
+        min: number;
+        max: number;
+        label?: string | undefined;
+        defaultValue?: number | undefined;
+        step?: number | undefined;
+    }>, z.ZodObject<{
+        type: z.ZodLiteral<"json">;
+        label: z.ZodOptional<z.ZodString>;
+        defaultValue: z.ZodOptional<z.ZodUnknown>;
+    }, "strip", z.ZodTypeAny, {
+        type: "json";
+        label?: string | undefined;
+        defaultValue?: unknown;
+    }, {
+        type: "json";
+        label?: string | undefined;
+        defaultValue?: unknown;
+    }>]>>;
+}, "strip", z.ZodTypeAny, {
+    primaryScenarioId: string;
+    controls: Record<string, {
+        type: "text";
+        label?: string | undefined;
+        defaultValue?: string | undefined;
+        placeholder?: string | undefined;
+    } | {
+        type: "number";
+        label?: string | undefined;
+        defaultValue?: number | undefined;
+        min?: number | undefined;
+        max?: number | undefined;
+        step?: number | undefined;
+    } | {
+        type: "boolean";
+        label?: string | undefined;
+        defaultValue?: boolean | undefined;
+    } | {
+        options: (string | {
+            value: string;
+            label: string;
+        })[];
+        type: "select";
+        label?: string | undefined;
+        defaultValue?: string | undefined;
+    } | {
+        options: (string | {
+            value: string;
+            label: string;
+        })[];
+        type: "radio";
+        label?: string | undefined;
+        defaultValue?: string | undefined;
+    } | {
+        type: "color";
+        label?: string | undefined;
+        defaultValue?: string | undefined;
+    } | {
+        type: "range";
+        min: number;
+        max: number;
+        label?: string | undefined;
+        defaultValue?: number | undefined;
+        step?: number | undefined;
+    } | {
+        type: "json";
+        label?: string | undefined;
+        defaultValue?: unknown;
+    }>;
+}, {
+    primaryScenarioId: string;
+    controls: Record<string, {
+        type: "text";
+        label?: string | undefined;
+        defaultValue?: string | undefined;
+        placeholder?: string | undefined;
+    } | {
+        type: "number";
+        label?: string | undefined;
+        defaultValue?: number | undefined;
+        min?: number | undefined;
+        max?: number | undefined;
+        step?: number | undefined;
+    } | {
+        type: "boolean";
+        label?: string | undefined;
+        defaultValue?: boolean | undefined;
+    } | {
+        options: (string | {
+            value: string;
+            label: string;
+        })[];
+        type: "select";
+        label?: string | undefined;
+        defaultValue?: string | undefined;
+    } | {
+        options: (string | {
+            value: string;
+            label: string;
+        })[];
+        type: "radio";
+        label?: string | undefined;
+        defaultValue?: string | undefined;
+    } | {
+        type: "color";
+        label?: string | undefined;
+        defaultValue?: string | undefined;
+    } | {
+        type: "range";
+        min: number;
+        max: number;
+        label?: string | undefined;
+        defaultValue?: number | undefined;
+        step?: number | undefined;
+    } | {
+        type: "json";
+        label?: string | undefined;
+        defaultValue?: unknown;
+    }>;
+}>;
+
+export declare interface PlaygroundPageElements {
+    root: HTMLDivElement;
+    preview: HTMLDivElement;
+    controls: HTMLDivElement;
+    codePanel: HTMLDivElement;
+}
+
+export declare interface PlaygroundPageOptions {
+    registry: Registry;
+    componentId: string;
+    onNavigate: (path: string) => void;
+}
+
+export declare type RadioControl = z.infer<typeof RadioControlSchema>;
+
+declare const RadioControlSchema: z.ZodObject<{
+    type: z.ZodLiteral<"radio">;
+    label: z.ZodOptional<z.ZodString>;
+    defaultValue: z.ZodOptional<z.ZodString>;
+    options: z.ZodArray<z.ZodUnion<[z.ZodString, z.ZodObject<{
+        label: z.ZodString;
+        value: z.ZodString;
+    }, "strip", z.ZodTypeAny, {
+        value: string;
+        label: string;
+    }, {
+        value: string;
+        label: string;
+    }>]>, "many">;
+}, "strip", z.ZodTypeAny, {
+    options: (string | {
+        value: string;
+        label: string;
+    })[];
+    type: "radio";
+    label?: string | undefined;
+    defaultValue?: string | undefined;
+}, {
+    options: (string | {
+        value: string;
+        label: string;
+    })[];
+    type: "radio";
+    label?: string | undefined;
+    defaultValue?: string | undefined;
+}>;
+
+export declare type RangeControl = z.infer<typeof RangeControlSchema>;
+
+declare const RangeControlSchema: z.ZodObject<{
+    type: z.ZodLiteral<"range">;
+    label: z.ZodOptional<z.ZodString>;
+    defaultValue: z.ZodOptional<z.ZodNumber>;
+    min: z.ZodNumber;
+    max: z.ZodNumber;
+    step: z.ZodOptional<z.ZodNumber>;
+}, "strip", z.ZodTypeAny, {
+    type: "range";
+    min: number;
+    max: number;
+    label?: string | undefined;
+    defaultValue?: number | undefined;
+    step?: number | undefined;
+}, {
+    type: "range";
+    min: number;
+    max: number;
+    label?: string | undefined;
+    defaultValue?: number | undefined;
+    step?: number | undefined;
+}>;
+
+/**
+ * Registry loader for the component catalogue.
+ * Handles loading and parsing registry data in both dev and build modes.
+ */
+export declare interface RawRegistryData {
+    components: Array<{
+        filePath: string;
+        data: unknown;
+        docs?: string;
+    }>;
+    scenarios: Array<{
+        filePath: string;
+        data: unknown;
+    }>;
+    examples: Array<{
+        filePath: string;
+        data: unknown;
+    }>;
+    categories?: CategoriesConfig;
+}
+
+export declare interface Registry {
+    /** All components indexed by ID */
+    components: Map<string, RegistryComponent>;
+    /** All scenarios indexed by ID */
+    scenarios: Map<string, RegistryScenario>;
+    /** All examples indexed by ID */
+    examples: Map<string, RegistryExample>;
+    /** Category configuration */
+    categories: CategoriesConfig;
+}
+
+export declare interface RegistryComponent extends Component {
+    /** Path to the component.json file */
+    filePath: string;
+    /** Parsed docs.md content (if exists) */
+    docs?: string;
+    /** Scenarios for this component */
+    scenarios: RegistryScenario[];
+}
+
+export declare interface RegistryExample extends Scenario {
+    /** Path to the example.json file */
+    filePath: string;
+}
+
+export declare interface RegistryLoader {
+    load(): Promise<Registry>;
+}
+
+export declare interface RegistryScenario extends Scenario {
+    /** Path to the scenario.json file */
+    filePath: string;
+}
+
+/**
+ * Render a RenderNode tree into a container.
+ */
+export declare function render(node: RenderNode, options: RenderOptions): RenderResult;
+
+/**
+ * Render the component page into a container.
+ */
+export declare function renderComponentPage(container: HTMLElement, options: ComponentPageOptions): ComponentPageElements | null;
+
+/**
+ * Render the harness page into a container.
+ */
+export declare function renderHarnessPage(container: HTMLElement, options: HarnessPageOptions): HarnessPageElements | null;
+
+/**
+ * Render the landing page into a container.
+ */
+export declare function renderLandingPage(container: HTMLElement, options: LandingPageOptions): LandingPageElements;
+
+declare interface RenderNode {
+    element: string;
+    attrs?: Record<string, string | number | boolean | null>;
+    props?: Record<string, unknown>;
+    slots?: Record<string, string | RenderNode | RenderNode[]>;
+    children?: RenderNode[];
+    text?: string;
+}
+export { RenderNode }
+export { RenderNode as RenderNodeType }
+
+/**
+ * Render a single RenderNode to a DOM element.
+ */
+export declare function renderNode(node: RenderNode): Element;
+
+export declare const RenderNodeSchema: z.ZodType<RenderNode>;
+
+/**
+ * RenderNode → DOM renderer.
+ * Converts declarative RenderNode trees into actual DOM elements.
+ */
+export declare interface RenderOptions {
+    /** Container element to render into */
+    container: Element;
+    /** Whether to clear the container before rendering */
+    clear?: boolean;
+    /** Callback when an error occurs */
+    onError?: (error: Error, node: RenderNode) => void;
+}
+
+/**
+ * Render the playground page into a container.
+ */
+export declare function renderPlaygroundPage(container: HTMLElement, options: PlaygroundPageOptions): PlaygroundPageElements | null;
+
+export declare interface RenderResult {
+    /** The root element that was created */
+    element: Element;
+    /** Any errors that occurred during rendering */
+    errors: Array<{
+        node: RenderNode;
+        error: Error;
+    }>;
+}
+
+export declare interface ResizerElements {
+    wrapper: HTMLDivElement;
+    container: HTMLDivElement;
+    content: HTMLDivElement;
+    handleRight: HTMLDivElement;
+    handleBottom: HTMLDivElement;
+    handleCorner: HTMLDivElement;
+    dimensionLabel: HTMLDivElement;
+    /** Set dimensions with optional animation */
+    setSize: (width: number | 'full', height: number | 'full', animate?: boolean) => void;
+    /** Check if currently in full screen mode */
+    isFullScreen: () => boolean;
+}
+
+/**
+ * Resizable container component for playground and harness views.
+ * Supports drag-to-resize with dimension display and breakpoint presets.
+ */
+export declare interface ResizerOptions {
+    /** Initial width (CSS value) */
+    initialWidth?: string;
+    /** Initial height (CSS value) */
+    initialHeight?: string;
+    /** Minimum width in pixels */
+    minWidth?: number;
+    /** Minimum height in pixels */
+    minHeight?: number;
+    /** Maximum width in pixels */
+    maxWidth?: number;
+    /** Maximum height in pixels */
+    maxHeight?: number;
+    /** Callback when dimensions change */
+    onResize?: (width: number, height: number) => void;
+    /** Callback when full screen mode changes */
+    onFullScreenChange?: (isFullScreen: boolean) => void;
+    /** Enable smooth transitions for preset changes */
+    animatePresets?: boolean;
+}
+
+/**
+ * Client-side router for the catalogue app.
+ * Handles hash-based routing for simplicity and static hosting compatibility.
+ */
+export declare interface Route {
+    pattern: RegExp;
+    handler: (params: Record<string, string>, query: URLSearchParams) => void;
+}
+
+export declare class Router {
+    private routes;
+    private options;
+    constructor(options: RouterOptions);
+    /**
+     * Add a route.
+     */
+    route(pattern: string, handler: Route['handler']): this;
+    /**
+     * Navigate to a path.
+     */
+    navigate(path: string): void;
+    /**
+     * Get current path from hash.
+     */
+    getCurrentPath(): string;
+    /**
+     * Get query parameters from current URL.
+     */
+    getQueryParams(): URLSearchParams;
+    /**
+     * Resolve the current route.
+     */
+    resolve(): void;
+    /**
+     * Start listening for route changes.
+     */
+    private setupListeners;
+    /**
+     * Manually trigger route resolution.
+     */
+    start(): void;
+}
+
+export declare interface RouterOptions {
+    /** Base path for the application */
+    basePath?: string;
+    /** Root element to render into */
+    root: HTMLElement;
+    /** Called when no route matches */
+    onNotFound?: (path: string) => void;
+}
+
+export declare type Scenario = z.infer<typeof ScenarioSchema>;
+
+/**
+ * Scenario schema defines the structure of a scenario.json file.
+ * Scenarios define specific component configurations for documentation,
+ * testing, and the catalogue UI.
+ *
+ * This schema is also used for example.json files, which have identical structure.
+ */
+export declare const ScenarioSchema: z.ZodObject<{
+    /** Unique identifier for the scenario (kebab-case) */
+    id: z.ZodString;
+    /** Human-readable title */
+    title: z.ZodString;
+    /** Optional description explaining the scenario */
+    description: z.ZodOptional<z.ZodString>;
+    /** Component ID this scenario belongs to */
+    componentId: z.ZodString;
+    /** Tags for search and filtering */
+    tags: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
+    /** The RenderNode tree that defines the DOM structure */
+    render: z.ZodType<RenderNode, z.ZodTypeDef, RenderNode>;
+    /** Optional viewport configuration for screenshots */
+    viewport: z.ZodOptional<z.ZodObject<{
+        width: z.ZodOptional<z.ZodNumber>;
+        height: z.ZodOptional<z.ZodNumber>;
+    }, "strip", z.ZodTypeAny, {
+        width?: number | undefined;
+        height?: number | undefined;
+    }, {
+        width?: number | undefined;
+        height?: number | undefined;
+    }>>;
+    /** Optional background color override */
+    background: z.ZodOptional<z.ZodString>;
+    /** Whether this is the primary scenario (shown first) */
+    primary: z.ZodOptional<z.ZodBoolean>;
+}, "strip", z.ZodTypeAny, {
+    id: string;
+    title: string;
+    componentId: string;
+    render: RenderNode;
+    description?: string | undefined;
+    tags?: string[] | undefined;
+    viewport?: {
+        width?: number | undefined;
+        height?: number | undefined;
+    } | undefined;
+    background?: string | undefined;
+    primary?: boolean | undefined;
+}, {
+    id: string;
+    title: string;
+    componentId: string;
+    render: RenderNode;
+    description?: string | undefined;
+    tags?: string[] | undefined;
+    viewport?: {
+        width?: number | undefined;
+        height?: number | undefined;
+    } | undefined;
+    background?: string | undefined;
+    primary?: boolean | undefined;
+}>;
+
+export declare interface ScenarioValidationResult {
+    success: boolean;
+    data?: Scenario;
+    errors?: Array<{
+        path: string;
+        message: string;
+    }>;
+}
+
+/**
+ * Search components by query.
+ */
+export declare function searchComponents(registry: Registry, query: string, filters?: {
+    status?: string[];
+    kind?: string[];
+    tags?: string[];
+}): RegistryComponent[];
+
+export declare type SelectControl = z.infer<typeof SelectControlSchema>;
+
+declare const SelectControlSchema: z.ZodObject<{
+    type: z.ZodLiteral<"select">;
+    label: z.ZodOptional<z.ZodString>;
+    defaultValue: z.ZodOptional<z.ZodString>;
+    options: z.ZodArray<z.ZodUnion<[z.ZodString, z.ZodObject<{
+        label: z.ZodString;
+        value: z.ZodString;
+    }, "strip", z.ZodTypeAny, {
+        value: string;
+        label: string;
+    }, {
+        value: string;
+        label: string;
+    }>]>, "many">;
+}, "strip", z.ZodTypeAny, {
+    options: (string | {
+        value: string;
+        label: string;
+    })[];
+    type: "select";
+    label?: string | undefined;
+    defaultValue?: string | undefined;
+}, {
+    options: (string | {
+        value: string;
+        label: string;
+    })[];
+    type: "select";
+    label?: string | undefined;
+    defaultValue?: string | undefined;
+}>;
+
+/**
+ * Set specific dimensions on a resizer.
+ */
+export declare function setResizerDimensions(resizer: ResizerElements, width: number | 'full', height: number | 'full', animate?: boolean): void;
+
+/**
+ * Set the theme and persist to localStorage.
+ */
+export declare function setTheme(theme: Theme): void;
+
+export declare type TextControl = z.infer<typeof TextControlSchema>;
+
+/**
+ * ControlSpec defines the type and configuration of playground controls
+ * that allow users to interactively modify component properties.
+ */
+declare const TextControlSchema: z.ZodObject<{
+    type: z.ZodLiteral<"text">;
+    label: z.ZodOptional<z.ZodString>;
+    defaultValue: z.ZodOptional<z.ZodString>;
+    placeholder: z.ZodOptional<z.ZodString>;
+}, "strip", z.ZodTypeAny, {
+    type: "text";
+    label?: string | undefined;
+    defaultValue?: string | undefined;
+    placeholder?: string | undefined;
+}, {
+    type: "text";
+    label?: string | undefined;
+    defaultValue?: string | undefined;
+    placeholder?: string | undefined;
+}>;
+
+/**
+ * Theme toggle component for light/dark mode switching.
+ * Persists preference to localStorage and respects system preference.
+ */
+export declare type Theme = 'light' | 'dark';
+
+/**
+ * Toggle between light and dark themes.
+ */
+export declare function toggleTheme(): Theme;
+
+/**
+ * Update the code content in a code panel.
+ */
+export declare function updateCodePanel(panel: CodePanelElements, code: string): void;
+
+/**
+ * Update an existing element with new properties.
+ * Used for live playground updates.
+ */
+export declare function updateElement(element: Element, attrs?: Record<string, string | number | boolean | null>, props?: Record<string, unknown>): void;
+
+export declare function validateComponent(data: unknown): ComponentValidationResult;
+
+export declare function validateControlSpec(data: unknown): {
+    success: true;
+    data: ControlSpec;
+} | {
+    success: false;
+    errors: string[];
+};
+
+export declare function validateExample(data: unknown): ScenarioValidationResult;
+
+/**
+ * Cross-reference validator for the component registry.
+ * Validates relationships between components, scenarios, and examples.
+ */
+export declare function validateRegistry(registry: Registry): ValidationResult;
+
+export declare function validateRenderNode(data: unknown): {
+    success: true;
+    data: RenderNode;
+} | {
+    success: false;
+    errors: string[];
+};
+
+export declare function validateScenario(data: unknown): ScenarioValidationResult;
+
+export declare interface ValidationError {
+    file: string;
+    path: string;
+    message: string;
+}
+
+export declare interface ValidationResult {
+    valid: boolean;
+    errors: ValidationError[];
+    warnings: ValidationError[];
+}
+
+export { }