autoui-react 0.0.3-alpha

package/dist/index.d.ts

@@ -0,0 +1,546 @@
+import { z } from 'zod';
+import React from 'react';
+
+/**
+ * Event types that can be triggered by UI elements
+ */
+declare const uiEventType: z.ZodEnum<["CLICK", "CHANGE", "SUBMIT", "MOUSEOVER", "MOUSEOUT", "FOCUS", "BLUR"]>;
+type UIEventType = z.infer<typeof uiEventType>;
+/**
+ * Event payload schema
+ */
+declare const uiEvent: z.ZodObject<{
+    type: z.ZodEnum<["CLICK", "CHANGE", "SUBMIT", "MOUSEOVER", "MOUSEOUT", "FOCUS", "BLUR"]>;
+    nodeId: z.ZodString;
+    timestamp: z.ZodOptional<z.ZodNumber>;
+    payload: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodAny>>;
+}, "strip", z.ZodTypeAny, {
+    type: "CLICK" | "CHANGE" | "SUBMIT" | "MOUSEOVER" | "MOUSEOUT" | "FOCUS" | "BLUR";
+    nodeId: string;
+    timestamp?: number | undefined;
+    payload?: Record<string, any> | undefined;
+}, {
+    type: "CLICK" | "CHANGE" | "SUBMIT" | "MOUSEOVER" | "MOUSEOUT" | "FOCUS" | "BLUR";
+    nodeId: string;
+    timestamp?: number | undefined;
+    payload?: Record<string, any> | undefined;
+}>;
+type UIEvent = z.infer<typeof uiEvent>;
+/**
+ * Core UI specification node
+ * Represents a single element in the UI tree
+ */
+declare const uiSpecNode: z.ZodType<UISpecNode>;
+type UISpecNode = {
+    id: string;
+    type: string;
+    props?: Record<string, any> | undefined;
+    bindings?: Record<string, any> | undefined;
+    events?: Record<string, {
+        action: string;
+        target?: string | undefined;
+        payload?: Record<string, any> | undefined;
+    }> | undefined;
+    children?: UISpecNode[] | undefined;
+};
+/**
+ * Application state for the UI engine
+ */
+declare const uiState: z.ZodObject<{
+    layout: z.ZodOptional<z.ZodType<UISpecNode, z.ZodTypeDef, UISpecNode>>;
+    loading: z.ZodBoolean;
+    history: z.ZodArray<z.ZodObject<{
+        type: z.ZodEnum<["CLICK", "CHANGE", "SUBMIT", "MOUSEOVER", "MOUSEOUT", "FOCUS", "BLUR"]>;
+        nodeId: z.ZodString;
+        timestamp: z.ZodOptional<z.ZodNumber>;
+        payload: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodAny>>;
+    }, "strip", z.ZodTypeAny, {
+        type: "CLICK" | "CHANGE" | "SUBMIT" | "MOUSEOVER" | "MOUSEOUT" | "FOCUS" | "BLUR";
+        nodeId: string;
+        timestamp?: number | undefined;
+        payload?: Record<string, any> | undefined;
+    }, {
+        type: "CLICK" | "CHANGE" | "SUBMIT" | "MOUSEOVER" | "MOUSEOUT" | "FOCUS" | "BLUR";
+        nodeId: string;
+        timestamp?: number | undefined;
+        payload?: Record<string, any> | undefined;
+    }>, "many">;
+    error: z.ZodOptional<z.ZodString>;
+}, "strip", z.ZodTypeAny, {
+    loading: boolean;
+    history: {
+        type: "CLICK" | "CHANGE" | "SUBMIT" | "MOUSEOVER" | "MOUSEOUT" | "FOCUS" | "BLUR";
+        nodeId: string;
+        timestamp?: number | undefined;
+        payload?: Record<string, any> | undefined;
+    }[];
+    layout?: UISpecNode | undefined;
+    error?: string | undefined;
+}, {
+    loading: boolean;
+    history: {
+        type: "CLICK" | "CHANGE" | "SUBMIT" | "MOUSEOVER" | "MOUSEOUT" | "FOCUS" | "BLUR";
+        nodeId: string;
+        timestamp?: number | undefined;
+        payload?: Record<string, any> | undefined;
+    }[];
+    layout?: UISpecNode | undefined;
+    error?: string | undefined;
+}>;
+type UIState = z.infer<typeof uiState>;
+/**
+ * Input for the AI planner
+ */
+declare const plannerInput: z.ZodObject<{
+    schema: z.ZodRecord<z.ZodString, z.ZodUnknown>;
+    goal: z.ZodString;
+    history: z.ZodOptional<z.ZodArray<z.ZodObject<{
+        type: z.ZodEnum<["CLICK", "CHANGE", "SUBMIT", "MOUSEOVER", "MOUSEOUT", "FOCUS", "BLUR"]>;
+        nodeId: z.ZodString;
+        timestamp: z.ZodOptional<z.ZodNumber>;
+        payload: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodAny>>;
+    }, "strip", z.ZodTypeAny, {
+        type: "CLICK" | "CHANGE" | "SUBMIT" | "MOUSEOVER" | "MOUSEOUT" | "FOCUS" | "BLUR";
+        nodeId: string;
+        timestamp?: number | undefined;
+        payload?: Record<string, any> | undefined;
+    }, {
+        type: "CLICK" | "CHANGE" | "SUBMIT" | "MOUSEOVER" | "MOUSEOUT" | "FOCUS" | "BLUR";
+        nodeId: string;
+        timestamp?: number | undefined;
+        payload?: Record<string, any> | undefined;
+    }>, "many">>;
+    userContext: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+}, "strip", z.ZodTypeAny, {
+    schema: Record<string, unknown>;
+    goal: string;
+    history?: {
+        type: "CLICK" | "CHANGE" | "SUBMIT" | "MOUSEOVER" | "MOUSEOUT" | "FOCUS" | "BLUR";
+        nodeId: string;
+        timestamp?: number | undefined;
+        payload?: Record<string, any> | undefined;
+    }[] | undefined;
+    userContext?: Record<string, unknown> | undefined;
+}, {
+    schema: Record<string, unknown>;
+    goal: string;
+    history?: {
+        type: "CLICK" | "CHANGE" | "SUBMIT" | "MOUSEOVER" | "MOUSEOUT" | "FOCUS" | "BLUR";
+        nodeId: string;
+        timestamp?: number | undefined;
+        payload?: Record<string, any> | undefined;
+    }[] | undefined;
+    userContext?: Record<string, unknown> | undefined;
+}>;
+type PlannerInput = z.infer<typeof plannerInput>;
+
+/**
+ * Interface for the runtime data context
+ */
+interface DataContext {
+    [key: string]: unknown;
+}
+
+/**
+ * Action types supported by the router
+ */
+declare enum ActionType {
+    FULL_REFRESH = "FULL_REFRESH",// Generate a completely new UI
+    UPDATE_NODE = "UPDATE_NODE",// Update a specific node
+    ADD_DROPDOWN = "ADD_DROPDOWN",// Add a dropdown to a specific node
+    SHOW_DETAIL = "SHOW_DETAIL",// Show a detail view
+    HIDE_DETAIL = "HIDE_DETAIL",// Hide a detail view
+    TOGGLE_STATE = "TOGGLE_STATE",// Toggle a boolean state (expanded, selected, etc.)
+    UPDATE_FORM = "UPDATE_FORM",// Update a form based on selections
+    NAVIGATE = "NAVIGATE"
+}
+/**
+ * Routing configuration for an action
+ */
+interface ActionRouteConfig {
+    actionType: ActionType;
+    targetNodeId: string;
+    promptTemplate: string;
+    contextKeys?: string[];
+}
+/**
+ * Interface for route resolution
+ */
+interface RouteResolution {
+    actionType: ActionType;
+    targetNodeId: string;
+    plannerInput: PlannerInput;
+    prompt: string;
+}
+/**
+ * Action router class - handles determining what part of the UI to update
+ */
+declare class ActionRouter {
+    private routes;
+    /**
+     * Register a new action route
+     * @param eventType - UI event type to route
+     * @param config - Route configuration
+     */
+    registerRoute(eventType: string, config: ActionRouteConfig): void;
+    /**
+     * Find the appropriate route for an event
+     * @param event - UI event
+     * @param layout - Current UI layout
+     * @param dataContext - Current data context
+     * @returns Route resolution or null if no match
+     */
+    resolveRoute(event: UIEvent, schema: Record<string, unknown>, layout: UISpecNode | undefined, dataContext: DataContext, goal: string, userContext?: Record<string, unknown>): RouteResolution | null;
+    /**
+     * Process a prompt template with variables
+     * @param template - Template string with ${var} placeholders
+     * @param values - Values to substitute
+     * @returns Processed string
+     */
+    private processTemplate;
+}
+declare function createDefaultRouter(): ActionRouter;
+
+interface EventHookOptions {
+    preventDefault?: boolean;
+    stopPropagation?: boolean;
+}
+interface EventHookContext {
+    originalEvent: UIEvent;
+    preventDefault: () => void;
+    stopPropagation: () => void;
+    isDefaultPrevented: () => boolean;
+    isPropagationStopped: () => boolean;
+}
+type EventHook = (context: EventHookContext) => void | Promise<void>;
+/**
+ * Create a hook to intercept specific events
+ *
+ * @example
+ * ```tsx
+ * const unregister = useEventHook(['CLICK'], (ctx) => {
+ *   if (ctx.originalEvent.nodeId === 'deleteButton') {
+ *     // Show confirmation dialog
+ *     const confirmed = window.confirm('Are you sure?');
+ *     if (!confirmed) {
+ *       ctx.preventDefault();
+ *     }
+ *   }
+ * });
+ * ```
+ */
+declare function createEventHook(eventTypes: UIEventType[] | 'all', hook: EventHook, options?: EventHookOptions): EventHook;
+
+/**
+ * System event types that represent the internal AutoUI lifecycle
+ */
+declare enum SystemEventType {
+    PLAN_START = "PLAN_START",// Before AI planning begins
+    PLAN_PROMPT_CREATED = "PLAN_PROMPT_CREATED",// After prompt is built
+    PLAN_RESPONSE_CHUNK = "PLAN_RESPONSE_CHUNK",// For each AI response chunk
+    PLAN_COMPLETE = "PLAN_COMPLETE",// After planning is complete
+    PLAN_ERROR = "PLAN_ERROR",// Planning error occurred
+    BINDING_RESOLUTION_START = "BINDING_RESOLUTION_START",// Before bindings are resolved
+    BINDING_RESOLUTION_COMPLETE = "BINDING_RESOLUTION_COMPLETE",// After bindings are resolved
+    DATA_FETCH_START = "DATA_FETCH_START",// Before data is fetched
+    DATA_FETCH_COMPLETE = "DATA_FETCH_COMPLETE",// After data is fetched
+    RENDER_START = "RENDER_START",// Before layout is rendered
+    RENDER_COMPLETE = "RENDER_COMPLETE",// After layout is rendered
+    PREFETCH_START = "PREFETCH_START",// Before prefetching begins
+    PREFETCH_COMPLETE = "PREFETCH_COMPLETE"
+}
+/**
+ * Base system event interface
+ */
+interface SystemEvent {
+    type: SystemEventType;
+    timestamp: number;
+}
+/**
+ * Planning events
+ */
+interface PlanStartEvent extends SystemEvent {
+    type: SystemEventType.PLAN_START;
+    plannerInput: PlannerInput;
+}
+interface PlanPromptCreatedEvent extends SystemEvent {
+    type: SystemEventType.PLAN_PROMPT_CREATED;
+    prompt: string;
+}
+interface PlanResponseChunkEvent extends SystemEvent {
+    type: SystemEventType.PLAN_RESPONSE_CHUNK;
+    chunk: string;
+    isComplete: boolean;
+}
+interface PlanCompleteEvent extends SystemEvent {
+    type: SystemEventType.PLAN_COMPLETE;
+    layout: UISpecNode;
+    executionTimeMs: number;
+}
+interface PlanErrorEvent extends SystemEvent {
+    type: SystemEventType.PLAN_ERROR;
+    error: Error;
+}
+/**
+ * Binding events
+ */
+interface BindingResolutionStartEvent extends SystemEvent {
+    type: SystemEventType.BINDING_RESOLUTION_START;
+    layout: UISpecNode;
+}
+interface BindingResolutionCompleteEvent extends SystemEvent {
+    type: SystemEventType.BINDING_RESOLUTION_COMPLETE;
+    originalLayout: UISpecNode;
+    resolvedLayout: UISpecNode;
+}
+/**
+ * Data events
+ */
+interface DataFetchStartEvent extends SystemEvent {
+    type: SystemEventType.DATA_FETCH_START;
+    tableName: string;
+    query: unknown;
+}
+interface DataFetchCompleteEvent extends SystemEvent {
+    type: SystemEventType.DATA_FETCH_COMPLETE;
+    tableName: string;
+    results: unknown[];
+    executionTimeMs: number;
+}
+/**
+ * Rendering events
+ */
+interface RenderStartEvent extends SystemEvent {
+    type: SystemEventType.RENDER_START;
+    layout: UISpecNode;
+}
+interface RenderCompleteEvent extends SystemEvent {
+    type: SystemEventType.RENDER_COMPLETE;
+    layout: UISpecNode;
+    renderTimeMs: number;
+}
+/**
+ * Prefetch events
+ */
+interface PrefetchStartEvent extends SystemEvent {
+    type: SystemEventType.PREFETCH_START;
+    depth: number;
+}
+interface PrefetchCompleteEvent extends SystemEvent {
+    type: SystemEventType.PREFETCH_COMPLETE;
+    prefetchedLayouts: Record<string, UISpecNode>;
+}
+/**
+ * Union type of all system events
+ */
+type AnySystemEvent = PlanStartEvent | PlanPromptCreatedEvent | PlanResponseChunkEvent | PlanCompleteEvent | PlanErrorEvent | BindingResolutionStartEvent | BindingResolutionCompleteEvent | DataFetchStartEvent | DataFetchCompleteEvent | RenderStartEvent | RenderCompleteEvent | PrefetchStartEvent | PrefetchCompleteEvent;
+/**
+ * System event hook type
+ */
+type SystemEventHook<T extends SystemEvent = AnySystemEvent> = (event: T) => void | Promise<void>;
+/**
+ * System event manager
+ */
+declare class SystemEventManager {
+    private listeners;
+    /**
+     * Register a listener for a specific system event type
+     *
+     * @param eventType - The system event type to listen for
+     * @param listener - The listener function
+     * @returns Function to unregister the listener
+     */
+    on<T extends SystemEventType>(eventType: T, listener: SystemEventHook<Extract<AnySystemEvent, {
+        type: T;
+    }>>): () => void;
+    /**
+     * Emit a system event to all registered listeners
+     *
+     * @param event - The system event to emit
+     */
+    emit<T extends AnySystemEvent>(event: T): Promise<void>;
+}
+declare const systemEvents: SystemEventManager;
+/**
+ * Helper to create a typed system event
+ *
+ * @param type - The system event type
+ * @param data - Additional event data
+ * @returns A system event object
+ */
+declare function createSystemEvent<T extends SystemEventType>(type: T, data: Omit<Extract<AnySystemEvent, {
+    type: T;
+}>, 'type' | 'timestamp'>): Extract<AnySystemEvent, {
+    type: T;
+}>;
+
+/**
+ * Drizzle schema adapter types
+ */
+interface DrizzleColumn {
+    name: string;
+    dataType: string;
+    notNull?: boolean;
+    defaultValue?: unknown;
+    primaryKey?: boolean;
+    unique?: boolean;
+    references?: {
+        table: string;
+        column: string;
+    };
+}
+interface DrizzleTable {
+    name: string;
+    schema: string;
+    columns: Record<string, DrizzleColumn>;
+}
+interface DrizzleSchema {
+    [tableName: string]: DrizzleTable;
+}
+interface DrizzleClientConfig {
+    connectionString?: string | undefined;
+    client?: unknown | undefined;
+    queryFn?: ((tableName: string, query: any) => Promise<unknown[]>) | undefined;
+}
+interface DrizzleAdapterOptions$1 {
+    schema: DrizzleSchema;
+    client?: DrizzleClientConfig | undefined;
+    useMockData?: boolean | undefined;
+    mockData?: Record<string, unknown[]> | undefined;
+}
+/**
+ * Adapter for Drizzle ORM schemas
+ * Handles converting Drizzle schema to AutoUI schema format
+ * and optionally connects to a database
+ */
+declare class DrizzleAdapter {
+    private schema;
+    private client;
+    private useMockData;
+    private mockData;
+    constructor(options: DrizzleAdapterOptions$1);
+    /**
+     * Convert Drizzle schema to AutoUI schema format
+     */
+    getSchema(): Record<string, unknown>;
+    /**
+     * Convert Drizzle columns to AutoUI column format
+     */
+    private convertColumns;
+    /**
+     * Map Drizzle data types to standard types
+     */
+    private mapDataType;
+    /**
+     * Execute a query against the database
+     */
+    query(tableName: string, query: any): Promise<unknown[]>;
+    /**
+     * Initialize the data context with schema information and optional mock data
+     */
+    initializeDataContext(): Promise<DataContext>;
+}
+
+/**
+ * Generic schema adapter interface
+ */
+interface SchemaAdapter {
+    getSchema(): Record<string, unknown>;
+    query(tableName: string, query: any): Promise<unknown[]>;
+    initializeDataContext(): Promise<DataContext>;
+}
+/**
+ * Schema adapter options union type
+ */
+type SchemaAdapterOptions = {
+    type: 'drizzle';
+    options: DrizzleAdapterOptions$1;
+} | {
+    type: 'custom';
+    adapter: SchemaAdapter;
+};
+/**
+ * Factory function to create the appropriate schema adapter
+ */
+declare function createSchemaAdapter(options: SchemaAdapterOptions): SchemaAdapter;
+
+interface DrizzleAdapterOptions {
+    schema: Record<string, unknown>;
+}
+interface AutoUIProps {
+    schema: Record<string, unknown> | {
+        type: 'drizzle';
+        options: DrizzleAdapterOptions;
+    } | {
+        type: 'custom';
+        adapter: SchemaAdapter;
+    };
+    goal: string;
+    componentAdapter?: 'shadcn';
+    userContext?: Record<string, unknown>;
+    onEvent?: (evt: UIEvent) => void;
+    eventHooks?: {
+        all?: EventHook[];
+        [key: string]: EventHook[] | undefined;
+    };
+    systemEventHooks?: {
+        [key: string]: SystemEventHook[] | undefined;
+    };
+    enablePartialUpdates?: boolean;
+    updatePatterns?: {
+        enableDropdowns?: boolean;
+        enableDetailViews?: boolean;
+        enableExpandCollapse?: boolean;
+        enableFormNavigation?: boolean;
+    };
+    integration?: {
+        mode?: 'standalone' | 'component';
+        className?: string;
+        style?: React.CSSProperties;
+        id?: string;
+    };
+    scope?: {
+        type?: 'form' | 'list' | 'detail' | 'dashboard' | 'full-page' | 'card';
+        focus?: string;
+    };
+    debugMode?: boolean;
+    mockMode?: boolean;
+    databaseConfig?: Record<string, unknown>;
+    planningConfig?: {
+        prefetchDepth?: number;
+        temperature?: number;
+        streaming?: boolean;
+    };
+}
+/**
+ * AutoUI - Main component for generating goal-oriented UIs
+ *
+ * @example
+ * ```tsx
+ * import { AutoUI } from 'autoui-react';
+ * import { emailsTable, usersTable } from './schema';
+ *
+ * function MyApp() {
+ *   return (
+ *     <AutoUI
+ *       schema={{ emails: emailsTable, users: usersTable }}
+ *       goal="Create an inbox view with email list and detail view"
+ *     />
+ *   );
+ * }
+ * ```
+ */
+declare const AutoUI: React.FC<AutoUIProps>;
+
+/**
+ * Example function to generate text using the AI SDK
+ *
+ * Note: You need to set OPENAI_API_KEY environment variable
+ * or use another supported provider
+ */
+declare function generateComponent(schema: any): Promise<string>;
+
+declare function generateUIDescription(schema: any): Promise<string>;
+declare function generateUIComponent(schema: any): Promise<string>;
+
+export { ActionRouteConfig, ActionRouter, ActionType, AnySystemEvent, AutoUI, AutoUIProps, DrizzleAdapter, DrizzleAdapterOptions$1 as DrizzleAdapterOptions, EventHook, EventHookContext, EventHookOptions, PlannerInput, SchemaAdapter, SchemaAdapterOptions, SystemEventHook, SystemEventType, UIEvent, UIEventType, UISpecNode, UIState, createDefaultRouter, createEventHook, createSchemaAdapter, createSystemEvent, generateComponent, generateUIComponent, generateUIDescription, systemEvents, uiEvent, uiEventType, uiSpecNode };