{"version":3,"file":"LLM2UI.cjs","sources":["../../../../../../src/sdk/vue/LLM2UI.ts"],"sourcesContent":["/**\r\n * LLM2UI Vue Component Wrapper\r\n * \r\n * Vue 3 component wrapper for the LLM2UI JSON Renderer SDK.\r\n * Provides a declarative way to render UISchema in Vue applications.\r\n * \r\n * Note: This module requires Vue 3 as a peer dependency.\r\n * Install Vue 3 to use this wrapper: npm install vue\r\n * \r\n * @module @llm2ui/renderer/vue\r\n * @see Requirements 14.3, 14.5\r\n * \r\n * @example\r\n * ```vue\r\n * <template>\r\n *   <LLM2UI \r\n *     :schema=\"schema\"\r\n *     :data=\"{ user: { name: 'John' } }\"\r\n *     @event=\"handleEvent\"\r\n *   />\r\n * </template>\r\n * \r\n * <script setup lang=\"ts\">\r\n * import { LLM2UI } from '@llm2ui/renderer/vue';\r\n * import type { LLM2UIEvent } from '@llm2ui/renderer/vue';\r\n * \r\n * const schema = { ... };\r\n * \r\n * function handleEvent(event: LLM2UIEvent) {\r\n *   console.log('Event:', event);\r\n * }\r\n * </script>\r\n * ```\r\n */\r\n\r\nimport type { UISchema, DataContext, EventAction } from '../../types';\r\nimport type { PlatformType } from '../../lib/component-registry';\r\nimport { LLM2UIRenderer, createRenderer, type RendererOptions } from '../index';\r\n\r\n/**\r\n * UI Event emitted by the LLM2UI Vue component\r\n */\r\nexport interface LLM2UIEvent {\r\n  /** Event type */\r\n  type: string;\r\n  /** Component ID that triggered the event */\r\n  componentId: string;\r\n  /** Event action payload */\r\n  action: EventAction;\r\n  /** Original DOM event */\r\n  originalEvent?: Event;\r\n}\r\n\r\n/**\r\n * Custom component definition for SDK registration\r\n * Simplified version of ComponentDefinition for external use\r\n */\r\nexport interface CustomComponentDefinition {\r\n  /** Component name/type identifier */\r\n  name: string;\r\n  /** The actual React component */\r\n  component: unknown; // React.ComponentType\r\n  /** Component description */\r\n  description?: string;\r\n  /** Component category for organization */\r\n  category?: 'input' | 'layout' | 'display' | 'feedback' | 'navigation' | string;\r\n  /** Props schema for validation */\r\n  propsSchema?: Record<string, {\r\n    type: 'string' | 'number' | 'boolean' | 'object' | 'array' | 'function';\r\n    required?: boolean;\r\n    default?: unknown;\r\n    description?: string;\r\n    enum?: string[];\r\n  }>;\r\n  /** Searchable tags */\r\n  tags?: string[];\r\n  /** Icon name */\r\n  icon?: string;\r\n}\r\n\r\n/**\r\n * LLM2UI Vue Component Props\r\n */\r\nexport interface LLM2UIProps {\r\n  /** The UISchema to render */\r\n  schema: UISchema;\r\n  /** Additional data context to merge with schema.data */\r\n  data?: DataContext;\r\n  /** Target platform for rendering */\r\n  platform?: PlatformType;\r\n  /** Theme mode */\r\n  theme?: 'light' | 'dark';\r\n  /** Custom CSS class name */\r\n  class?: string;\r\n  /** Whether to show error boundaries for component errors */\r\n  showErrors?: boolean;\r\n  /** Custom component definitions with full metadata */\r\n  customComponentDefinitions?: CustomComponentDefinition[];\r\n}\r\n\r\n/**\r\n * LLM2UI Vue Component Emits\r\n */\r\nexport interface LLM2UIEmits {\r\n  /** Emitted when a UI event occurs */\r\n  (e: 'event', event: LLM2UIEvent): void;\r\n  /** Emitted when rendering is complete */\r\n  (e: 'render'): void;\r\n  /** Emitted when an error occurs */\r\n  (e: 'error', error: Error): void;\r\n}\r\n\r\n/**\r\n * Check if Vue is available at runtime\r\n */\r\nfunction checkVueAvailable(): boolean {\r\n  try {\r\n    // Check if Vue is available in the global scope or as a module\r\n    return typeof window !== 'undefined' && 'Vue' in window;\r\n  } catch {\r\n    return false;\r\n  }\r\n}\r\n\r\n/**\r\n * Vue 3 Component Definition Interface\r\n */\r\ninterface VueComponentDefinition {\r\n  name: string;\r\n  props: Record<string, unknown>;\r\n  emits: string[];\r\n  setup: (props: LLM2UIProps, context: { emit: (event: string, ...args: unknown[]) => void }) => VueSetupReturn;\r\n}\r\n\r\n/**\r\n * Vue setup function return type\r\n */\r\ninterface VueSetupReturn {\r\n  containerRef: HTMLElement | null;\r\n  renderSchema: () => void;\r\n  cleanup: () => void;\r\n  onMounted: () => void;\r\n  onUpdated: () => void;\r\n  onBeforeUnmount: () => void;\r\n  setContainerRef: (el: HTMLElement | null) => void;\r\n}\r\n\r\n\r\n/**\r\n * Create the LLM2UI Vue component definition\r\n * \r\n * This function returns a Vue 3 component definition that can be used\r\n * with the Composition API. It uses the LLM2UIRenderer internally.\r\n * \r\n * @returns Vue component definition object\r\n * \r\n * @example\r\n * ```typescript\r\n * import { createLLM2UIComponent } from '@llm2ui/renderer/vue';\r\n * \r\n * const LLM2UI = createLLM2UIComponent();\r\n * \r\n * // Register globally\r\n * app.component('LLM2UI', LLM2UI);\r\n * \r\n * // Or use locally\r\n * export default {\r\n *   components: { LLM2UI }\r\n * }\r\n * ```\r\n */\r\nexport function createLLM2UIComponent(): VueComponentDefinition {\r\n  return {\r\n    name: 'LLM2UI',\r\n    \r\n    props: {\r\n      schema: {\r\n        type: Object as unknown as () => UISchema,\r\n        required: true,\r\n      },\r\n      data: {\r\n        type: Object as unknown as () => DataContext,\r\n        default: undefined,\r\n      },\r\n      platform: {\r\n        type: String as unknown as () => PlatformType,\r\n        default: undefined,\r\n      },\r\n      theme: {\r\n        type: String as unknown as () => 'light' | 'dark',\r\n        default: undefined,\r\n      },\r\n      showErrors: {\r\n        type: Boolean,\r\n        default: false,\r\n      },\r\n      customComponentDefinitions: {\r\n        type: Array as unknown as () => CustomComponentDefinition[],\r\n        default: undefined,\r\n      },\r\n    },\r\n    \r\n    emits: ['event', 'render', 'error'],\r\n    \r\n    setup(props: LLM2UIProps, { emit }: { emit: (event: string, ...args: unknown[]) => void }): VueSetupReturn {\r\n      let renderer: LLM2UIRenderer | null = null;\r\n      let containerRef: HTMLElement | null = null;\r\n      \r\n      /**\r\n       * Merge schema data with additional data prop\r\n       */\r\n      function getMergedSchema(): UISchema {\r\n        if (!props.data) return props.schema;\r\n        \r\n        return {\r\n          ...props.schema,\r\n          data: {\r\n            ...props.schema.data,\r\n            ...props.data,\r\n          },\r\n        };\r\n      }\r\n      \r\n      /**\r\n       * Create renderer options from props\r\n       */\r\n      function getRendererOptions(): RendererOptions {\r\n        return {\r\n          platform: props.platform,\r\n          theme: props.theme,\r\n          showErrors: props.showErrors,\r\n          onEvent: (action, event, componentId) => {\r\n            const llm2uiEvent: LLM2UIEvent = {\r\n              type: action.type,\r\n              componentId,\r\n              action,\r\n              originalEvent: event.nativeEvent,\r\n            };\r\n            \r\n            try {\r\n              emit('event', llm2uiEvent);\r\n            } catch (error) {\r\n              console.error('Error in LLM2UI event handler:', error);\r\n              if (error instanceof Error) {\r\n                emit('error', error);\r\n              }\r\n            }\r\n          },\r\n        };\r\n      }\r\n      \r\n      /**\r\n       * Initialize or update the renderer\r\n       */\r\n      function renderSchema(): void {\r\n        if (!containerRef) return;\r\n        \r\n        try {\r\n          const mergedSchema = getMergedSchema();\r\n          \r\n          if (!renderer) {\r\n            renderer = createRenderer(getRendererOptions());\r\n            renderer.render(mergedSchema, containerRef);\r\n          } else {\r\n            renderer.update(mergedSchema);\r\n          }\r\n          \r\n          emit('render');\r\n        } catch (error) {\r\n          console.error('LLM2UI render error:', error);\r\n          if (error instanceof Error) {\r\n            emit('error', error);\r\n          }\r\n        }\r\n      }\r\n      \r\n      /**\r\n       * Cleanup renderer on unmount\r\n       */\r\n      function cleanup(): void {\r\n        if (renderer) {\r\n          renderer.destroy();\r\n          renderer = null;\r\n        }\r\n      }\r\n      \r\n      return {\r\n        containerRef,\r\n        renderSchema,\r\n        cleanup,\r\n        onMounted: () => renderSchema(),\r\n        onUpdated: () => renderSchema(),\r\n        onBeforeUnmount: () => cleanup(),\r\n        setContainerRef: (el: HTMLElement | null) => {\r\n          containerRef = el;\r\n        },\r\n      };\r\n    },\r\n  };\r\n}\r\n\r\n/**\r\n * Pre-created LLM2UI Vue component\r\n * \r\n * Use this directly if you don't need to customize the component creation.\r\n * \r\n * @example\r\n * ```vue\r\n * <template>\r\n *   <LLM2UI :schema=\"schema\" @event=\"handleEvent\" />\r\n * </template>\r\n * \r\n * <script setup>\r\n * import { LLM2UI } from '@llm2ui/renderer/vue';\r\n * </script>\r\n * ```\r\n */\r\nexport const LLM2UI = createLLM2UIComponent();\r\n\r\n/**\r\n * Default export for convenience\r\n */\r\nexport default LLM2UI;\r\n\r\n/**\r\n * Vue 3 Composable for LLM2UI\r\n * \r\n * Provides a composable function for more flexible integration\r\n * with Vue 3's Composition API.\r\n * \r\n * @example\r\n * ```vue\r\n * <template>\r\n *   <div ref=\"containerRef\"></div>\r\n * </template>\r\n * \r\n * <script setup lang=\"ts\">\r\n * import { ref, onMounted, onUnmounted, watch } from 'vue';\r\n * import { useLLM2UI } from '@llm2ui/renderer/vue';\r\n * \r\n * const containerRef = ref<HTMLElement | null>(null);\r\n * const schema = ref({ ... });\r\n * \r\n * const { render, update, destroy, on, off } = useLLM2UI({\r\n *   theme: 'dark',\r\n *   onEvent: (event) => console.log(event),\r\n * });\r\n * \r\n * onMounted(() => {\r\n *   if (containerRef.value) {\r\n *     render(schema.value, containerRef.value);\r\n *   }\r\n * });\r\n * \r\n * watch(schema, (newSchema) => {\r\n *   update(newSchema);\r\n * });\r\n * \r\n * onUnmounted(() => {\r\n *   destroy();\r\n * });\r\n * </script>\r\n * ```\r\n */\r\nexport function useLLM2UI(options: RendererOptions = {}) {\r\n  let renderer: LLM2UIRenderer | null = null;\r\n  \r\n  /**\r\n   * Render a schema to a container\r\n   */\r\n  function render(schema: UISchema, container: HTMLElement): void {\r\n    if (renderer) {\r\n      renderer.destroy();\r\n    }\r\n    renderer = createRenderer(options);\r\n    renderer.render(schema, container);\r\n  }\r\n  \r\n  /**\r\n   * Update the current schema\r\n   */\r\n  function update(schema: UISchema): void {\r\n    if (!renderer) {\r\n      throw new Error('Renderer not initialized. Call render() first.');\r\n    }\r\n    renderer.update(schema);\r\n  }\r\n  \r\n  /**\r\n   * Destroy the renderer\r\n   */\r\n  function destroy(): void {\r\n    if (renderer) {\r\n      renderer.destroy();\r\n      renderer = null;\r\n    }\r\n  }\r\n  \r\n  /**\r\n   * Add an event listener\r\n   */\r\n  function on(event: string, handler: (event: LLM2UIEvent) => void): void {\r\n    if (renderer) {\r\n      renderer.on(event, handler as unknown as (event: { type: string; componentId: string; payload?: unknown; originalEvent?: Event }) => void);\r\n    }\r\n  }\r\n  \r\n  /**\r\n   * Remove an event listener\r\n   */\r\n  function off(event: string, handler?: (event: LLM2UIEvent) => void): void {\r\n    if (renderer) {\r\n      renderer.off(event, handler as unknown as (event: { type: string; componentId: string; payload?: unknown; originalEvent?: Event }) => void);\r\n    }\r\n  }\r\n  \r\n  /**\r\n   * Check if renderer is mounted\r\n   */\r\n  function isMounted(): boolean {\r\n    return renderer?.isMounted() ?? false;\r\n  }\r\n  \r\n  /**\r\n   * Get current schema\r\n   */\r\n  function getSchema(): UISchema | null {\r\n    return renderer?.getSchema() ?? null;\r\n  }\r\n  \r\n  return {\r\n    render,\r\n    update,\r\n    destroy,\r\n    on,\r\n    off,\r\n    isMounted,\r\n    getSchema,\r\n  };\r\n}\r\n\r\n/**\r\n * Type guard to check if Vue is available at runtime\r\n */\r\nexport function isVueAvailable(): boolean {\r\n  return checkVueAvailable();\r\n}\r\n"],"names":["checkVueAvailable","createLLM2UIComponent","props","emit","renderer","containerRef","getMergedSchema","getRendererOptions","action","event","componentId","llm2uiEvent","error","renderSchema","mergedSchema","createRenderer","cleanup","el","LLM2UI","useLLM2UI","options","render","schema","container","update","destroy","on","handler","off","isMounted","getSchema","isVueAvailable"],"mappings":"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"}