import { ComponentType } from 'react';
import { UISchema } from '../types';
import { PlatformType, ComponentRegistry } from '../lib/component-registry';
import { EventHandler } from '../lib/renderer';
/**
* LLM2UI SDK Entry Point
*
* Main entry point for the LLM2UI JSON Renderer SDK.
* Provides a simple API for rendering UI from JSON schemas,
* similar to amis low-code framework.
*
* @module @llm2ui/renderer
* @see Requirements 14.1, 14.2, 14.4
*
* @example
* ```typescript
* import { render, createRenderer, LLM2UI } from '@llm2ui/renderer';
*
* // Simple render
* render(schema, document.getElementById('app'));
*
* // With options
* const renderer = createRenderer({ theme: 'dark' });
* renderer.render(schema, container);
*
* // React component
*
* ```
*/
export type { UISchema, UIComponent, DataContext, EventBinding, EventAction, StyleProps, ValidationResult, ValidationError, } from '../types';
export type { PlatformType, ComponentCategory, ComponentDefinition, PropSchema, ComponentExample, } from '../lib/component-registry';
export type { EventHandler, RenderOptions, UIRendererProps, } from '../lib/renderer';
export { render as renderToReact, UIRenderer, useRenderer, } from '../lib/renderer';
export { ComponentRegistry, defaultRegistry, validateComponentDefinition, } from '../lib/component-registry';
export { SchemaGenerator, createSchemaGenerator, } from '../lib/schema-generator';
export type { SchemaGeneratorOptions, GeneratedSchema, } from '../lib/schema-generator';
export { TemplateManager, defaultTemplateManager, } from '../lib/template-manager';
export type { TemplateLayer, ComponentTemplate, } from '../lib/template-manager';
export { PlatformAdapter, createPlatformAdapter, } from '../lib/platform-adapter';
export type { PlatformMapping, } from '../lib/platform-adapter';
export { validateJSON, validateUISchema, } from '../lib/validation';
export { parseBindingExpression, resolveBindings, extractDataFields, } from '../lib/data-binding';
export { serialize, deserialize, schemasEqual, } from '../lib/serialization';
export { registerShadcnComponents, initializeDefaultRegistry, } from '../lib/shadcn-components';
/**
* Custom component definition for SDK registration
* Simplified version of ComponentDefinition for external use
*/
export interface CustomComponentDefinition {
/** Component name/type identifier */
name: string;
/** The actual React component */
component: ComponentType>;
/** Component description */
description?: string;
/** Component category for organization */
category?: 'input' | 'layout' | 'display' | 'feedback' | 'navigation' | string;
/** Props schema for validation */
propsSchema?: Record;
/** Searchable tags */
tags?: string[];
/** Icon name */
icon?: string;
}
/**
* SDK Renderer Options
* Configuration options for creating a renderer instance
*/
export interface RendererOptions {
/** Target platform for rendering */
platform?: PlatformType;
/** Theme mode */
theme?: 'light' | 'dark';
/** Locale for internationalization */
locale?: string;
/** Global event handler callback */
onEvent?: EventHandler;
/** Custom components to register (simple format) */
customComponents?: Record>>;
/** Custom component definitions with full metadata */
customComponentDefinitions?: CustomComponentDefinition[];
/** Component registry to use (defaults to defaultRegistry) */
registry?: ComponentRegistry;
/** Whether to show error boundaries */
showErrors?: boolean;
}
/**
* UI Event emitted by the renderer
*/
export interface UIEvent {
/** Event type */
type: string;
/** Component ID that triggered the event */
componentId: string;
/** Event payload */
payload?: unknown;
/** Original DOM event */
originalEvent?: Event;
}
/**
* Event listener function type
*/
export type EventListener = (event: UIEvent) => void;
/**
* LLM2UI Renderer Instance
* Main renderer class for managing UI lifecycle
*/
export declare class LLM2UIRenderer {
private root;
private container;
private currentSchema;
private options;
private eventListeners;
private registry;
private initialized;
private registeredCustomComponents;
constructor(options?: RendererOptions);
/**
* Initialize the renderer (register default components)
*/
private ensureInitialized;
/**
* Register a custom component
* @param definition - The custom component definition
* @throws Error if the component name is invalid
*
* @example
* ```typescript
* renderer.registerComponent({
* name: 'MyButton',
* component: MyButtonComponent,
* description: 'A custom button component',
* category: 'input',
* propsSchema: {
* variant: { type: 'string', enum: ['primary', 'secondary'] },
* disabled: { type: 'boolean', default: false }
* }
* });
* ```
*/
registerComponent(definition: CustomComponentDefinition): void;
/**
* Register multiple custom components at once
* @param definitions - Array of custom component definitions
*
* @example
* ```typescript
* renderer.registerComponents([
* { name: 'MyButton', component: MyButton },
* { name: 'MyInput', component: MyInput, category: 'input' }
* ]);
* ```
*/
registerComponents(definitions: CustomComponentDefinition[]): void;
/**
* Unregister a custom component
* @param name - The component name to unregister
* @returns True if the component was unregistered
*
* @example
* ```typescript
* renderer.unregisterComponent('MyButton');
* ```
*/
unregisterComponent(name: string): boolean;
/**
* Check if a custom component is registered
* @param name - The component name to check
* @returns True if the component is registered
*/
hasComponent(name: string): boolean;
/**
* Get all registered custom component names
* @returns Array of custom component names registered via this renderer
*/
getCustomComponentNames(): string[];
/**
* Get the component registry
* @returns The component registry instance
*/
getRegistry(): ComponentRegistry;
/**
* Render a UISchema to a container element
* @param schema - The UISchema to render
* @param container - Target DOM container
*/
render(schema: UISchema, container: HTMLElement): void;
/**
* Update the rendered UI with a new schema
* @param schema - New UISchema to render
*/
update(schema: UISchema): void;
/**
* Destroy the renderer and clean up resources
*/
destroy(): void;
/**
* Register an event listener
* @param event - Event type to listen for (or '*' for all events)
* @param handler - Event handler function
*/
on(event: string, handler: EventListener): void;
/**
* Remove an event listener
* @param event - Event type
* @param handler - Handler to remove (if omitted, removes all handlers for event)
*/
off(event: string, handler?: EventListener): void;
/**
* Emit an event to registered listeners
*/
private emit;
/**
* Get the current schema
*/
getSchema(): UISchema | null;
/**
* Get the container element
*/
getContainer(): HTMLElement | null;
/**
* Check if renderer is mounted
*/
isMounted(): boolean;
}
/**
* Create a new renderer instance with options
* @param options - Renderer configuration options
* @returns LLM2UIRenderer instance
*
* @example
* ```typescript
* const renderer = createRenderer({
* theme: 'dark',
* onEvent: (action, event, componentId) => {
* console.log('Event:', action.type, componentId);
* }
* });
*
* renderer.render(schema, document.getElementById('app'));
* renderer.on('click', (event) => console.log('Clicked:', event.componentId));
* ```
*/
export declare function createRenderer(options?: RendererOptions): LLM2UIRenderer;
/**
* Register a custom component globally to the default registry
* @param definition - The custom component definition
*
* @example
* ```typescript
* import { registerCustomComponent } from '@llm2ui/renderer';
*
* registerCustomComponent({
* name: 'MyButton',
* component: MyButtonComponent,
* description: 'A custom button component',
* category: 'input',
* propsSchema: {
* variant: { type: 'string', enum: ['primary', 'secondary'] }
* }
* });
* ```
*/
export declare function registerCustomComponent(definition: CustomComponentDefinition): void;
/**
* Register multiple custom components globally to the default registry
* @param definitions - Array of custom component definitions
*
* @example
* ```typescript
* import { registerCustomComponents } from '@llm2ui/renderer';
*
* registerCustomComponents([
* { name: 'MyButton', component: MyButton },
* { name: 'MyInput', component: MyInput, category: 'input' }
* ]);
* ```
*/
export declare function registerCustomComponents(definitions: CustomComponentDefinition[]): void;
/**
* Unregister a custom component from the default registry
* @param name - The component name to unregister
* @returns True if the component was unregistered
*/
export declare function unregisterCustomComponent(name: string): boolean;
/**
* Render a UISchema to a container element (convenience function)
* Creates a renderer instance and renders immediately
*
* @param schema - The UISchema to render
* @param container - Target DOM container
* @param options - Optional renderer options
* @returns LLM2UIRenderer instance for further control
*
* @example
* ```typescript
* const renderer = render(schema, document.getElementById('app'));
*
* // Later, update or destroy
* renderer.update(newSchema);
* renderer.destroy();
* ```
*/
export declare function render(schema: UISchema, container: HTMLElement, options?: RendererOptions): LLM2UIRenderer;
export { LLM2UI } from './react/LLM2UI';
export type { LLM2UIProps, LLM2UIEvent, LLM2UIEventCallback } from './react/LLM2UI';
export { LLM2UI as LLM2UIVue, createLLM2UIComponent, useLLM2UI, isVueAvailable, } from './vue/LLM2UI';
export type { LLM2UIProps as LLM2UIVueProps, LLM2UIEmits as LLM2UIVueEmits, LLM2UIEvent as LLM2UIVueEvent, } from './vue/LLM2UI';
//# sourceMappingURL=index.d.ts.map