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