import { UISchema, DataContext, EventAction } from '../../types';
import { PlatformType } from '../../lib/component-registry';
import { RendererOptions } from '../index';
/**
 * UI Event emitted by the LLM2UI Vue component
 */
export interface LLM2UIEvent {
    /** Event type */
    type: string;
    /** Component ID that triggered the event */
    componentId: string;
    /** Event action payload */
    action: EventAction;
    /** Original DOM event */
    originalEvent?: Event;
}
/**
 * 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: unknown;
    /** Component description */
    description?: string;
    /** Component category for organization */
    category?: 'input' | 'layout' | 'display' | 'feedback' | 'navigation' | string;
    /** Props schema for validation */
    propsSchema?: Record<string, {
        type: 'string' | 'number' | 'boolean' | 'object' | 'array' | 'function';
        required?: boolean;
        default?: unknown;
        description?: string;
        enum?: string[];
    }>;
    /** Searchable tags */
    tags?: string[];
    /** Icon name */
    icon?: string;
}
/**
 * LLM2UI Vue Component Props
 */
export interface LLM2UIProps {
    /** The UISchema to render */
    schema: UISchema;
    /** Additional data context to merge with schema.data */
    data?: DataContext;
    /** Target platform for rendering */
    platform?: PlatformType;
    /** Theme mode */
    theme?: 'light' | 'dark';
    /** Custom CSS class name */
    class?: string;
    /** Whether to show error boundaries for component errors */
    showErrors?: boolean;
    /** Custom component definitions with full metadata */
    customComponentDefinitions?: CustomComponentDefinition[];
}
/**
 * LLM2UI Vue Component Emits
 */
export interface LLM2UIEmits {
    /** Emitted when a UI event occurs */
    (e: 'event', event: LLM2UIEvent): void;
    /** Emitted when rendering is complete */
    (e: 'render'): void;
    /** Emitted when an error occurs */
    (e: 'error', error: Error): void;
}
/**
 * Vue 3 Component Definition Interface
 */
interface VueComponentDefinition {
    name: string;
    props: Record<string, unknown>;
    emits: string[];
    setup: (props: LLM2UIProps, context: {
        emit: (event: string, ...args: unknown[]) => void;
    }) => VueSetupReturn;
}
/**
 * Vue setup function return type
 */
interface VueSetupReturn {
    containerRef: HTMLElement | null;
    renderSchema: () => void;
    cleanup: () => void;
    onMounted: () => void;
    onUpdated: () => void;
    onBeforeUnmount: () => void;
    setContainerRef: (el: HTMLElement | null) => void;
}
/**
 * Create the LLM2UI Vue component definition
 *
 * This function returns a Vue 3 component definition that can be used
 * with the Composition API. It uses the LLM2UIRenderer internally.
 *
 * @returns Vue component definition object
 *
 * @example
 * ```typescript
 * import { createLLM2UIComponent } from '@llm2ui/renderer/vue';
 *
 * const LLM2UI = createLLM2UIComponent();
 *
 * // Register globally
 * app.component('LLM2UI', LLM2UI);
 *
 * // Or use locally
 * export default {
 *   components: { LLM2UI }
 * }
 * ```
 */
export declare function createLLM2UIComponent(): VueComponentDefinition;
/**
 * Pre-created LLM2UI Vue component
 *
 * Use this directly if you don't need to customize the component creation.
 *
 * @example
 * ```vue
 * <template>
 *   <LLM2UI :schema="schema" @event="handleEvent" />
 * </template>
 *
 * <script setup>
 * import { LLM2UI } from '@llm2ui/renderer/vue';
 * </script>
 * ```
 */
export declare const LLM2UI: VueComponentDefinition;
/**
 * Default export for convenience
 */
export default LLM2UI;
/**
 * Vue 3 Composable for LLM2UI
 *
 * Provides a composable function for more flexible integration
 * with Vue 3's Composition API.
 *
 * @example
 * ```vue
 * <template>
 *   <div ref="containerRef"></div>
 * </template>
 *
 * <script setup lang="ts">
 * import { ref, onMounted, onUnmounted, watch } from 'vue';
 * import { useLLM2UI } from '@llm2ui/renderer/vue';
 *
 * const containerRef = ref<HTMLElement | null>(null);
 * const schema = ref({ ... });
 *
 * const { render, update, destroy, on, off } = useLLM2UI({
 *   theme: 'dark',
 *   onEvent: (event) => console.log(event),
 * });
 *
 * onMounted(() => {
 *   if (containerRef.value) {
 *     render(schema.value, containerRef.value);
 *   }
 * });
 *
 * watch(schema, (newSchema) => {
 *   update(newSchema);
 * });
 *
 * onUnmounted(() => {
 *   destroy();
 * });
 * </script>
 * ```
 */
export declare function useLLM2UI(options?: RendererOptions): {
    render: (schema: UISchema, container: HTMLElement) => void;
    update: (schema: UISchema) => void;
    destroy: () => void;
    on: (event: string, handler: (event: LLM2UIEvent) => void) => void;
    off: (event: string, handler?: (event: LLM2UIEvent) => void) => void;
    isMounted: () => boolean;
    getSchema: () => UISchema | null;
};
/**
 * Type guard to check if Vue is available at runtime
 */
export declare function isVueAvailable(): boolean;
//# sourceMappingURL=LLM2UI.d.ts.map