autoui-react 0.0.3-alpha → 0.0.4-alpha

package/dist/index.mjs

@@ -1,17 +1,93 @@
-import { useState, useEffect, useRef, useCallback, useReducer } from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { useState, useEffect, useRef, useCallback, useReducer } from 'react';
+import { createOpenAI } from '@ai-sdk/openai';
+import { generateObject } from 'ai';
 import { z } from 'zod';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { generateText } from 'ai';
-import { openai } from '@ai-sdk/openai';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var init_utils = __esm({
+  "src/lib/utils.ts"() {
+  }
+});
+
+// components/ui/button.tsx
+var button_exports = {};
+__export(button_exports, {
+  Button: () => Button2,
+  buttonVariants: () => buttonVariants
+});
+function Button2({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+var buttonVariants;
+var init_button = __esm({
+  "components/ui/button.tsx"() {
+    init_utils();
+    buttonVariants = cva(
+      "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+      {
+        variants: {
+          variant: {
+            default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+            destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+            outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+            secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+            ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+            link: "text-primary underline-offset-4 hover:underline"
+          },
+          size: {
+            default: "h-9 px-4 py-2 has-[>svg]:px-3",
+            sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+            lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+            icon: "size-9"
+          }
+        },
+        defaultVariants: {
+          variant: "default",
+          size: "default"
+        }
+      }
+    );
+  }
+});
 
 // src/core/reducer.ts
 function cloneNode(node) {
   return {
     ...node,
-    props: node.props ? { ...node.props } : void 0,
-    bindings: node.bindings ? { ...node.bindings } : void 0,
-    events: node.events ? { ...node.events } : void 0,
-    children: node.children?.map((child) => cloneNode(child))
+    props: node.props ? { ...node.props } : null,
+    bindings: node.bindings ? { ...node.bindings } : null,
+    events: node.events ? { ...node.events } : null,
+    children: node.children ? node.children.map((child) => cloneNode(child)) : null
   };
 }
 function findNodeById(tree, nodeId) {
@@ -55,18 +131,14 @@ function updateNodeById(tree, nodeId, updater) {
   const parent = path[path.length - 2];
   const updatedParent = {
     ...parent,
-    children: parent.children?.map(
+    children: parent.children ? parent.children.map(
       (child) => child.id === nodeId ? updatedNode : child
-    )
+    ) : null
   };
   if (path.length === 2) {
     return updatedParent;
   }
-  return updateNodeById(
-    result,
-    parent.id,
-    () => updatedParent
-  );
+  return updateNodeById(result, parent.id, () => updatedParent);
 }
 function replaceNodeById(tree, nodeId, newNode) {
   return updateNodeById(tree, nodeId, () => newNode);
@@ -108,7 +180,7 @@ function removeNodeById(tree, nodeId) {
     return result;
   return updateNodeById(result, parent.id, (node) => ({
     ...node,
-    children: node.children?.filter((child) => child.id !== nodeId)
+    children: node.children ? node.children.filter((child) => child.id !== nodeId) : null
   }));
 }
 function uiReducer(state, action) {
@@ -125,7 +197,7 @@ function uiReducer(state, action) {
         ...state,
         layout: action.node,
         loading: false,
-        error: void 0
+        error: null
       };
     }
     case "PARTIAL_UPDATE": {
@@ -134,7 +206,7 @@ function uiReducer(state, action) {
           ...state,
           layout: action.node,
           loading: false,
-          error: void 0
+          error: null
         };
       }
       if (action.nodeId === "root" || action.nodeId === state.layout.id) {
@@ -142,19 +214,23 @@ function uiReducer(state, action) {
           ...state,
           layout: action.node,
           loading: false,
-          error: void 0
+          error: null
         };
       }
       return {
         ...state,
         layout: replaceNodeById(state.layout, action.nodeId, action.node),
         loading: false,
-        error: void 0
+        error: null
       };
     }
     case "ADD_NODE": {
       if (!state.layout) {
-        return state;
+        return {
+          ...state,
+          error: "Cannot add node: Layout is empty.",
+          loading: false
+        };
       }
       return {
         ...state,
@@ -162,21 +238,41 @@ function uiReducer(state, action) {
           state.layout,
           action.parentId,
           action.node,
-          action.index
+          action.index === null ? void 0 : action.index
         ),
         loading: false,
-        error: void 0
+        error: null
       };
     }
     case "REMOVE_NODE": {
       if (!state.layout) {
-        return state;
+        return {
+          ...state,
+          error: "Cannot remove node: Layout is empty.",
+          loading: false
+        };
+      }
+      try {
+        return {
+          ...state,
+          layout: removeNodeById(state.layout, action.nodeId),
+          loading: false,
+          error: null
+        };
+      } catch (e) {
+        const errorMessage = e instanceof Error ? e.message : "Failed to remove node.";
+        return {
+          ...state,
+          error: errorMessage,
+          loading: false
+        };
       }
+    }
+    case "ERROR": {
       return {
         ...state,
-        layout: removeNodeById(state.layout, action.nodeId),
-        loading: false,
-        error: void 0
+        error: action.message,
+        loading: false
       };
     }
     case "LOADING": {
@@ -185,20 +281,15 @@ function uiReducer(state, action) {
         loading: action.isLoading
       };
     }
-    case "ERROR": {
-      return {
-        ...state,
-        error: action.message,
-        loading: false
-      };
-    }
     default:
       return state;
   }
 }
 var initialState = {
-  loading: true,
-  history: []
+  layout: null,
+  loading: false,
+  history: [],
+  error: null
 };
 
 // src/core/action-router.ts
@@ -245,7 +336,7 @@ var ActionRouter = class {
           schema,
           goal,
           history: [event],
-          userContext
+          userContext: userContext || null
         },
         prompt: `Generate a new UI for the goal: "${goal}". The user just triggered: ${event.type} on node ${event.nodeId}`
       };
@@ -294,16 +385,20 @@ var ActionRouter = class {
         ...additionalContext
       }
     };
+    const templateValues = {
+      goal,
+      eventType: event.type,
+      nodeId: event.nodeId,
+      targetNodeId,
+      actionType: matchingRoute.actionType,
+      ...userContext || {},
+      // Spread the original userContext (passed to resolveRoute)
+      ...additionalContext
+      // Spread additionalContext afterwards (can override userContext keys)
+    };
     const prompt = this.processTemplate(
       matchingRoute.promptTemplate,
-      {
-        goal,
-        eventType: event.type,
-        nodeId: event.nodeId,
-        targetNodeId,
-        actionType: matchingRoute.actionType,
-        ...additionalContext
-      }
+      templateValues
     );
     return {
       actionType: matchingRoute.actionType,
@@ -371,27 +466,58 @@ var uiEventType = z.enum([
 var uiEvent = z.object({
   type: uiEventType,
   nodeId: z.string(),
-  timestamp: z.number().optional(),
-  payload: z.record(z.any()).optional()
+  timestamp: z.number().nullable(),
+  payload: z.record(z.unknown()).nullable()
 });
-z.enum([
-  "AI_RESPONSE",
-  "ERROR"
-]);
-var uiSpecNode = z.lazy(() => z.object({
+z.enum(["AI_RESPONSE", "ERROR"]);
+var runtimeRecord = z.record(z.any()).nullable();
+var openAISimplifiedValue = z.string().nullable();
+var openAIRecordSimplifiedNullable = z.record(openAISimplifiedValue).nullable();
+var openAIEventPayloadSimplifiedNullable = z.record(openAISimplifiedValue).nullable();
+var openAIBaseNode = z.object({
+  id: z.string(),
+  node_type: z.string(),
+  props: openAIRecordSimplifiedNullable,
+  // Nullable record
+  bindings: openAIRecordSimplifiedNullable,
+  // Nullable record
+  events: z.record(
+    z.string(),
+    z.object({
+      action: z.string(),
+      target: z.string(),
+      payload: openAIEventPayloadSimplifiedNullable
+    })
+  ).nullable(),
+  // Entire events object is nullable
+  children: z.null()
+  // Base children are null. When extended, it will be an array or null.
+});
+var openAINodeL4 = openAIBaseNode;
+var openAINodeL3 = openAIBaseNode.extend({
+  children: z.array(openAINodeL4).nullable()
+});
+var openAINodeL2 = openAIBaseNode.extend({
+  children: z.array(openAINodeL3).nullable()
+});
+var openAIUISpec = openAIBaseNode.extend({
+  children: z.array(openAINodeL2).nullable()
+});
+var uiSpecNode = z.object({
   id: z.string(),
-  type: z.string(),
-  // e.g., "ListView", "Button", "TextField"
-  props: z.record(z.any()).optional(),
-  bindings: z.record(z.any()).optional(),
-  // Data bindings
-  events: z.record(z.string(), z.object({
-    action: z.string(),
-    target: z.string().optional(),
-    payload: z.record(z.any()).optional()
-  })).optional(),
-  children: z.array(uiSpecNode).optional()
-}));
+  node_type: z.string(),
+  props: runtimeRecord,
+  bindings: runtimeRecord,
+  events: z.record(
+    z.string(),
+    z.object({
+      action: z.string(),
+      target: z.string(),
+      payload: runtimeRecord
+    })
+  ).nullable(),
+  children: z.lazy(() => z.array(uiSpecNode)).nullable()
+});
 z.discriminatedUnion("type", [
   z.object({
     type: z.literal("UI_EVENT"),
@@ -410,7 +536,7 @@ z.discriminatedUnion("type", [
     type: z.literal("ADD_NODE"),
     parentId: z.string(),
     node: uiSpecNode,
-    index: z.number().optional()
+    index: z.number().nullable()
   }),
   z.object({
     type: z.literal("REMOVE_NODE"),
@@ -426,16 +552,16 @@ z.discriminatedUnion("type", [
   })
 ]);
 z.object({
-  layout: uiSpecNode.optional(),
+  layout: uiSpecNode.nullable(),
   loading: z.boolean(),
   history: z.array(uiEvent),
-  error: z.string().optional()
+  error: z.string().nullable()
 });
 z.object({
   schema: z.record(z.unknown()),
   goal: z.string(),
-  history: z.array(uiEvent).optional(),
-  userContext: z.record(z.unknown()).optional()
+  history: z.array(uiEvent).nullable(),
+  userContext: z.record(z.unknown()).nullable().optional()
 });
 
 // src/core/system-events.ts
@@ -461,7 +587,7 @@ var SystemEventManager = class {
   }
   /**
    * 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
@@ -481,7 +607,7 @@ var SystemEventManager = class {
   }
   /**
    * Emit a system event to all registered listeners
-   * 
+   *
    * @param event - The system event to emit
    */
   async emit(event) {
@@ -501,14 +627,22 @@ function createSystemEvent(type, data) {
 }
 
 // src/env.ts
-({
-  MOCK_PLANNER: import.meta.env?.VITE_MOCK_PLANNER || "1",
-  NODE_ENV: import.meta.env?.MODE || "development"
-  // Add other environment variables as needed
-});
+var rawApiKeyFromEnv = process.env.VITE_OPENAI_API_KEY;
+var defaultApiKeyLiteral = "sk-proj-literal-default-for-debug-in-env-ts";
+var env = {
+  MOCK_PLANNER: process.env.VITE_MOCK_PLANNER || "1",
+  // Simplified MOCK_PLANNER assignment
+  NODE_ENV: process.env.VITE_NODE_ENV || "development",
+  // Simplified NODE_ENV assignment
+  OPENAI_API_KEY: rawApiKeyFromEnv === void 0 ? defaultApiKeyLiteral : rawApiKeyFromEnv
+};
 
 // src/core/planner.ts
-function buildPrompt(input, targetNodeId, customPrompt) {
+var strictOpenAI = createOpenAI({
+  compatibility: "strict"
+  // Required for structured outputs with OpenAI API
+});
+function buildPrompt(input, customPrompt) {
   const { schema, goal, history, userContext } = input;
   const schemaInfo = Object.entries(schema).map(([tableName, tableSchema]) => {
     return `Table: ${tableName}
@@ -521,6 +655,9 @@ Schema: ${JSON.stringify(tableSchema)}`;
 
 User Context:
 ${JSON.stringify(userContext)}` : "";
+  if (customPrompt) {
+    return customPrompt;
+  }
   return `
 You are an expert UI generator. 
 Create a user interface that achieves the following goal: "${goal}"
@@ -534,10 +671,10 @@ ${recentEvents}${userContextSection}
 Generate a complete UI specification in JSON format that matches the following TypeScript type:
 type UISpecNode = {
   id: string;
-  type: string;
-  props?: Record<string, any>;
-  bindings?: Record<string, any>;
-  events?: Record<string, { action: string; target?: string; payload?: Record<string, any>; }>;
+  node_type: string;
+  props?: Record<string, unknown>;
+  bindings?: Record<string, unknown>;
+  events?: Record<string, { action: string; target: string; payload?: Record<string, unknown>; }>;
   children?: UISpecNode[];
 };
 
@@ -547,222 +684,419 @@ UI Guidance:
 3. Include navigation between related views when needed
 4. Keep the interface simple and intuitive
 5. Bind to schema data where appropriate
-6. Provide event handlers for user interactions
+6. Provide event handlers for user interactions - make sure to always include both action and target properties
 
 Respond ONLY with the JSON UI specification and no other text.
   `;
 }
 function mockPlanner(input, targetNodeId, customPrompt) {
+  if (customPrompt) {
+    console.log("mockPlanner received customPrompt:", customPrompt);
+  }
+  const taskSchema = input.schema.tasks;
+  const taskData = taskSchema?.sampleData || [
+    {
+      id: "1",
+      title: "Example Task 1",
+      description: "This is a sample task",
+      status: "pending",
+      priority: "medium"
+    },
+    {
+      id: "2",
+      title: "Example Task 2",
+      description: "Another sample task",
+      status: "completed",
+      priority: "high"
+    }
+  ];
   const mockNode = {
     id: targetNodeId || "root",
-    type: "Container",
-    props: { title: "Mock UI" },
+    node_type: "Container",
+    props: {
+      className: "p-4 space-y-6"
+    },
+    bindings: null,
+    events: null,
     children: [
       {
-        id: "text-1",
-        type: "Text",
-        props: { text: "This is a mock UI for testing" }
+        id: "header-1",
+        node_type: "Header",
+        props: {
+          title: "Task Management Dashboard",
+          className: "mb-4"
+        },
+        bindings: null,
+        events: null,
+        children: null
+      },
+      {
+        id: "main-content",
+        node_type: "Container",
+        props: {
+          className: "grid grid-cols-1 gap-6 md:grid-cols-3"
+        },
+        bindings: null,
+        events: null,
+        children: [
+          {
+            id: "tasks-container",
+            node_type: "Container",
+            props: {
+              className: "md:col-span-2"
+            },
+            bindings: null,
+            events: null,
+            children: [
+              {
+                id: "list-heading",
+                node_type: "Container",
+                props: {
+                  className: "flex justify-between items-center mb-4"
+                },
+                bindings: null,
+                events: null,
+                children: [
+                  {
+                    id: "list-title",
+                    node_type: "Header",
+                    props: {
+                      title: "Tasks",
+                      className: "border-none p-0 m-0"
+                    },
+                    bindings: null,
+                    events: null,
+                    children: null
+                  },
+                  {
+                    id: "add-task-button",
+                    node_type: "Button",
+                    props: {
+                      label: "Add Task",
+                      variant: "default"
+                    },
+                    bindings: null,
+                    events: {
+                      onClick: {
+                        action: "ADD_TASK",
+                        target: "tasks-container",
+                        payload: {}
+                      }
+                    },
+                    children: null
+                  }
+                ]
+              },
+              {
+                id: "task-list",
+                node_type: "ListView",
+                props: {
+                  selectable: "true"
+                },
+                bindings: {
+                  items: JSON.stringify(taskData),
+                  fields: JSON.stringify([
+                    { key: "id", label: "ID" },
+                    { key: "title", label: "Title" },
+                    { key: "status", label: "Status" },
+                    { key: "priority", label: "Priority" }
+                  ])
+                },
+                events: {
+                  onSelect: {
+                    action: "SELECT_TASK",
+                    target: "task-detail",
+                    payload: {
+                      source: "task-list"
+                    }
+                  }
+                },
+                children: null
+              }
+            ]
+          },
+          {
+            id: "task-detail",
+            node_type: "Detail",
+            props: {
+              title: "Task Details",
+              visible: "true"
+            },
+            bindings: {
+              data: JSON.stringify(taskData[0]),
+              fields: JSON.stringify([
+                { key: "title", label: "Title", type: "heading" },
+                { key: "description", label: "Description", type: "content" },
+                { key: "status", label: "Status" },
+                { key: "priority", label: "Priority" },
+                { key: "dueDate", label: "Due Date" }
+              ])
+            },
+            events: {
+              onBack: {
+                action: "CLOSE_DETAIL",
+                target: "task-detail",
+                payload: {}
+              }
+            },
+            children: null
+          }
+        ]
       }
     ]
   };
   return mockNode;
 }
+async function callPlannerLLM(input, routeResolution) {
+  await systemEvents.emit(
+    createSystemEvent("PLAN_START" /* PLAN_START */, { plannerInput: input })
+  );
+  if (env.MOCK_PLANNER === "1" || !env.OPENAI_API_KEY) {
+    console.warn(
+      "Using mock planner because MOCK_PLANNER is enabled or OPENAI_API_KEY is not available"
+    );
+    return mockPlanner(input);
+  }
+  const startTime = Date.now();
+  const prompt = routeResolution?.prompt || buildPrompt(input);
+  await systemEvents.emit(
+    createSystemEvent("PLAN_PROMPT_CREATED" /* PLAN_PROMPT_CREATED */, { prompt })
+  );
+  try {
+    const { object: uiSpec } = await generateObject({
+      model: strictOpenAI("gpt-4o", { structuredOutputs: true }),
+      schema: openAIUISpec,
+      messages: [{ role: "user", content: prompt }],
+      temperature: 0.2,
+      maxTokens: 4e3
+    });
+    await systemEvents.emit(
+      createSystemEvent("PLAN_COMPLETE" /* PLAN_COMPLETE */, {
+        layout: uiSpec,
+        executionTimeMs: Date.now() - startTime
+      })
+    );
+    return uiSpec;
+  } catch (error) {
+    console.error("Error calling LLM planner:", error);
+    await systemEvents.emit(
+      createSystemEvent("PLAN_ERROR" /* PLAN_ERROR */, {
+        error: error instanceof Error ? error : new Error(String(error))
+      })
+    );
+    throw error;
+  }
+}
+async function processEvent(event, router, schema, layout, dataContext, goal, userContext) {
+  const routeResolution = await router.resolveRoute(
+    event,
+    schema,
+    layout || null,
+    dataContext,
+    goal,
+    userContext
+  );
+  if (!routeResolution) {
+    throw new Error(
+      `No route found for event type: ${event.type}, node: ${event.nodeId}`
+    );
+  }
+  if (routeResolution.actionType.toString() === "NoOp") {
+    if (!layout)
+      throw new Error("Layout is undefined and action is NoOp");
+    return layout;
+  }
+  const plannerInputForLLM = routeResolution.plannerInput;
+  const newLayout = await callPlannerLLM(plannerInputForLLM, routeResolution);
+  return newLayout;
+}
 
 // src/core/state.ts
-var useChat = (config) => ({
-  append: async (message) => {
-  },
-  data: { content: "{}" },
-  isLoading: false,
-  error: null,
-  stop: () => {
-  }
-});
 function useUIStateEngine({
   schema,
   goal,
   userContext,
   mockMode = false,
-  planningConfig = {},
+  planningConfig,
   router = createDefaultRouter(),
   dataContext = {},
   enablePartialUpdates = false
 }) {
+  if (userContext === null) {
+    console.warn(
+      "useUIStateEngine: userContext was explicitly set to null. This is an allowed but discouraged value. Consider using undefined if you intend to omit the user context."
+    );
+  }
   const [state, dispatch] = useReducer(uiReducer, initialState);
-  const { append, data, isLoading, error, stop } = useChat();
-  const handleEvent = useCallback((event) => {
-    dispatch({ type: "UI_EVENT", event });
-    stop();
-    if (enablePartialUpdates) {
-      const route = router.resolveRoute(
-        event,
-        schema,
-        state.layout,
-        dataContext,
-        goal,
-        userContext
-      );
-      if (route) {
-        console.log("Resolved route:", route);
-        systemEvents.emit(
-          createSystemEvent("PLAN_START" /* PLAN_START */, {
-            plannerInput: route.plannerInput
-          })
-        );
-        if (mockMode) {
-          const node = mockPlanner(route.plannerInput, route.targetNodeId, route.prompt);
-          switch (route.actionType) {
-            case "FULL_REFRESH" /* FULL_REFRESH */:
-              dispatch({ type: "AI_RESPONSE", node });
-              break;
-            case "UPDATE_NODE" /* UPDATE_NODE */:
-            case "SHOW_DETAIL" /* SHOW_DETAIL */:
-            case "HIDE_DETAIL" /* HIDE_DETAIL */:
-            case "TOGGLE_STATE" /* TOGGLE_STATE */:
-            case "ADD_DROPDOWN" /* ADD_DROPDOWN */:
-            case "UPDATE_FORM" /* UPDATE_FORM */:
-            case "NAVIGATE" /* NAVIGATE */:
-              dispatch({
-                type: "PARTIAL_UPDATE",
-                nodeId: route.targetNodeId,
-                node
-              });
-              break;
+  const handleEvent = useCallback(
+    async (event) => {
+      dispatch({ type: "UI_EVENT", event });
+      dispatch({ type: "LOADING", isLoading: true });
+      try {
+        let resolvedNode;
+        let actionTypeForDispatch = "FULL_REFRESH" /* FULL_REFRESH */;
+        let targetNodeIdForDispatch = "root";
+        if (enablePartialUpdates) {
+          const route = router.resolveRoute(
+            event,
+            schema,
+            state.layout,
+            dataContext,
+            goal,
+            userContext
+          );
+          if (route) {
+            console.log("Resolved route:", route);
+            actionTypeForDispatch = route.actionType;
+            targetNodeIdForDispatch = route.targetNodeId;
+            systemEvents.emit(
+              createSystemEvent("PLAN_START" /* PLAN_START */, {
+                plannerInput: route.plannerInput
+              })
+            );
+            if (mockMode) {
+              resolvedNode = mockPlanner(
+                route.plannerInput,
+                route.targetNodeId,
+                route.prompt
+              );
+            } else {
+              resolvedNode = await callPlannerLLM(route.plannerInput, route);
+            }
+          } else {
+            const input = {
+              schema,
+              goal,
+              history: [...state.history, event],
+              userContext
+            };
+            if (mockMode) {
+              resolvedNode = mockPlanner(input);
+            } else {
+              resolvedNode = await callPlannerLLM(input);
+            }
           }
         } else {
-          const prompt = route.prompt;
-          systemEvents.emit(
-            createSystemEvent("PLAN_PROMPT_CREATED" /* PLAN_PROMPT_CREATED */, { prompt })
-          );
-          append({
-            content: prompt,
-            role: "user"
-          });
-          sessionStorage.setItem("currentRoute", JSON.stringify({
-            actionType: route.actionType,
-            targetNodeId: route.targetNodeId
-          }));
+          const input = {
+            schema,
+            goal,
+            history: [...state.history, event],
+            // event is already in history from UI_EVENT dispatch
+            userContext
+          };
+          if (mockMode) {
+            resolvedNode = mockPlanner(input);
+          } else {
+            resolvedNode = await callPlannerLLM(input);
+          }
         }
-        return;
+        switch (actionTypeForDispatch) {
+          case "UPDATE_NODE" /* UPDATE_NODE */:
+          case "SHOW_DETAIL" /* SHOW_DETAIL */:
+          case "HIDE_DETAIL" /* HIDE_DETAIL */:
+          case "TOGGLE_STATE" /* TOGGLE_STATE */:
+          case "ADD_DROPDOWN" /* ADD_DROPDOWN */:
+          case "UPDATE_FORM" /* UPDATE_FORM */:
+          case "NAVIGATE" /* NAVIGATE */:
+            dispatch({
+              type: "PARTIAL_UPDATE",
+              nodeId: targetNodeIdForDispatch,
+              node: resolvedNode
+            });
+            break;
+          case "FULL_REFRESH" /* FULL_REFRESH */:
+          default:
+            dispatch({ type: "AI_RESPONSE", node: resolvedNode });
+            break;
+        }
+      } catch (e) {
+        const errorMessage = e instanceof Error ? e.message : String(e);
+        dispatch({ type: "ERROR", message: errorMessage });
+        systemEvents.emit(
+          createSystemEvent("PLAN_ERROR" /* PLAN_ERROR */, {
+            error: e instanceof Error ? e : new Error(String(e))
+          })
+        );
+      } finally {
+        dispatch({ type: "LOADING", isLoading: false });
       }
-    }
-    const input = {
-      schema,
+    },
+    [
+      // append, // REMOVE
       goal,
-      history: [...state.history, event],
-      userContext
-    };
-    if (mockMode) {
-      const node = mockPlanner();
-      dispatch({ type: "AI_RESPONSE", node });
-    } else {
-      const prompt = buildPrompt(input);
-      append({
-        content: prompt,
-        role: "user"
-      });
-    }
-  }, [append, goal, schema, state.history, state.layout, stop, userContext, router, mockMode, dataContext, enablePartialUpdates]);
+      schema,
+      state.history,
+      // Keep state.history if input preparation needs it
+      state.layout,
+      // stop, // REMOVE
+      userContext,
+      router,
+      mockMode,
+      dataContext,
+      enablePartialUpdates,
+      dispatch
+      // Add dispatch
+    ]
+  );
   useEffect(() => {
-    if (isLoading) {
+    const initialFetch = async () => {
       dispatch({ type: "LOADING", isLoading: true });
-    } else if (error) {
-      const errorMessage = error instanceof Error ? error.message : String(error);
-      dispatch({ type: "ERROR", message: errorMessage });
-      systemEvents.emit(
-        createSystemEvent("PLAN_ERROR" /* PLAN_ERROR */, {
-          error: error instanceof Error ? error : new Error(String(error))
-        })
-      );
-    } else if (data.content) {
       try {
-        systemEvents.emit(
-          createSystemEvent("PLAN_RESPONSE_CHUNK" /* PLAN_RESPONSE_CHUNK */, {
-            chunk: data.content,
-            isComplete: true
-          })
-        );
-        const jsonMatch = data.content.match(/```(?:json)?\s*([\s\S]*?)\s*```/) || [null, data.content];
-        const jsonStr = jsonMatch[1].trim();
-        const parsedJson = JSON.parse(jsonStr);
-        const validatedNode = uiSpecNode.parse(parsedJson);
-        const routeInfoStr = sessionStorage.getItem("currentRoute");
-        if (routeInfoStr && enablePartialUpdates) {
-          try {
-            const routeInfo = JSON.parse(routeInfoStr);
-            switch (routeInfo.actionType) {
-              case "FULL_REFRESH" /* FULL_REFRESH */:
-                dispatch({ type: "AI_RESPONSE", node: validatedNode });
-                break;
-              case "UPDATE_NODE" /* UPDATE_NODE */:
-              case "SHOW_DETAIL" /* SHOW_DETAIL */:
-              case "HIDE_DETAIL" /* HIDE_DETAIL */:
-              case "TOGGLE_STATE" /* TOGGLE_STATE */:
-              case "ADD_DROPDOWN" /* ADD_DROPDOWN */:
-              case "UPDATE_FORM" /* UPDATE_FORM */:
-              case "NAVIGATE" /* NAVIGATE */:
-                dispatch({
-                  type: "PARTIAL_UPDATE",
-                  nodeId: routeInfo.targetNodeId,
-                  node: validatedNode
-                });
-                break;
-              default:
-                dispatch({ type: "AI_RESPONSE", node: validatedNode });
-            }
-            sessionStorage.removeItem("currentRoute");
-          } catch (e) {
-            console.error("Error parsing route info:", e);
-            dispatch({ type: "AI_RESPONSE", node: validatedNode });
-          }
+        const input = {
+          schema,
+          goal,
+          history: [],
+          userContext
+        };
+        let node;
+        if (mockMode) {
+          node = mockPlanner(input);
         } else {
-          dispatch({ type: "AI_RESPONSE", node: validatedNode });
+          node = await callPlannerLLM(input);
         }
+        dispatch({ type: "AI_RESPONSE", node });
+      } catch (e) {
+        const errorMessage = e instanceof Error ? e.message : String(e);
+        dispatch({ type: "ERROR", message: errorMessage });
         systemEvents.emit(
-          createSystemEvent("PLAN_COMPLETE" /* PLAN_COMPLETE */, {
-            layout: validatedNode,
-            executionTimeMs: 0
-            // Not available here
-          })
-        );
-      } catch (parseError) {
-        console.error("Failed to parse LLM response:", parseError);
-        dispatch({
-          type: "ERROR",
-          message: "Failed to parse LLM response"
-        });
-        systemEvents.emit(
+          // Also emit system event for initial load error
           createSystemEvent("PLAN_ERROR" /* PLAN_ERROR */, {
-            error: parseError instanceof Error ? parseError : new Error("Parse error")
+            error: e instanceof Error ? e : new Error(String(e))
           })
         );
+      } finally {
+        dispatch({ type: "LOADING", isLoading: false });
       }
-    }
-  }, [data.content, error, isLoading, enablePartialUpdates]);
-  useEffect(() => {
-    const input = {
-      schema,
-      goal,
-      history: [],
-      userContext
     };
-    if (mockMode) {
-      const node = mockPlanner();
-      dispatch({ type: "AI_RESPONSE", node });
-    } else {
-      const prompt = buildPrompt(input);
-      append({
-        content: prompt,
-        role: "user"
-      });
-    }
-  }, [append, goal, schema, userContext, mockMode]);
+    initialFetch();
+  }, [goal, schema, userContext, mockMode, dispatch]);
   return {
     state,
     dispatch,
     handleEvent
   };
 }
+z.enum([
+  // Layout components
+  "Container",
+  "Card",
+  "Header",
+  // Input components
+  "Button",
+  "Input",
+  "Select",
+  "Textarea",
+  "Checkbox",
+  "RadioGroup",
+  // Data display components
+  "ListView",
+  "Detail",
+  "Tabs",
+  "Dialog",
+  // Typography
+  "Heading",
+  "Text"
+]);
 var ShimmerBlock = () => /* @__PURE__ */ jsx("div", { className: "w-full h-8 bg-gray-200 animate-pulse rounded" });
 var ShimmerTable = ({ rows = 3 }) => /* @__PURE__ */ jsxs("div", { className: "w-full space-y-2", children: [
   /* @__PURE__ */ jsx("div", { className: "w-full h-10 bg-gray-200 animate-pulse rounded" }),
@@ -776,24 +1110,47 @@ var ShimmerCard = () => /* @__PURE__ */ jsxs("div", { className: "w-full p-4 spa
     /* @__PURE__ */ jsx("div", { className: "w-5/6 h-4 bg-gray-200 animate-pulse rounded" })
   ] })
 ] });
-var Container = (props) => /* @__PURE__ */ jsx("div", { className: `w-full ${props.className || ""}`, style: props.style, children: props.children });
-var Header = ({ title }) => /* @__PURE__ */ jsx("header", { className: "py-4 px-6 border-b mb-4", children: /* @__PURE__ */ jsx("h1", { className: "text-xl font-semibold", children: title }) });
+var Container = (props) => /* @__PURE__ */ jsx("div", { className: `autoui-mock-container ${props.className || ""}`, children: props.children });
+var Header = ({
+  title,
+  className
+}) => /* @__PURE__ */ jsx(
+  "header",
+  {
+    className: `py-4 px-6 border-b border-gray-300 mb-4 bg-gray-50 dark:bg-gray-800 ${className || ""}`,
+    children: /* @__PURE__ */ jsx("h1", { className: "text-xl font-semibold text-gray-800 dark:text-white", children: title })
+  }
+);
 var Button = ({ onClick, children, variant = "default" }) => /* @__PURE__ */ jsx(
   "button",
   {
-    className: `px-4 py-2 rounded font-medium ${variant === "default" ? "bg-blue-600 text-white" : variant === "outline" ? "border border-gray-300 text-gray-700" : "bg-red-600 text-white"}`,
+    className: `px-4 py-2 rounded-md font-medium transition-colors ${variant === "default" ? "bg-blue-600 text-white hover:bg-blue-700" : variant === "outline" ? "border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800" : "bg-red-600 text-white hover:bg-red-700"}`,
     onClick,
     children
   }
 );
-var Table = ({ items = [], fields = [], onSelect, selectable }) => /* @__PURE__ */ jsx("div", { className: "w-full border rounded-lg overflow-hidden", children: /* @__PURE__ */ jsxs("table", { className: "w-full", children: [
-  /* @__PURE__ */ jsx("thead", { className: "bg-gray-50", children: /* @__PURE__ */ jsx("tr", { children: fields.map((field) => /* @__PURE__ */ jsx("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: field.label }, field.key)) }) }),
-  /* @__PURE__ */ jsx("tbody", { className: "bg-white divide-y divide-gray-200", children: items.map((item, index) => /* @__PURE__ */ jsx(
+var Table = ({ items = [], fields = [], onSelect, selectable }) => /* @__PURE__ */ jsx("div", { className: "w-full border border-gray-300 dark:border-gray-700 rounded-lg overflow-hidden shadow-sm", children: /* @__PURE__ */ jsxs("table", { className: "w-full", children: [
+  /* @__PURE__ */ jsx("thead", { className: "bg-gray-100 dark:bg-gray-800 border-b border-gray-300 dark:border-gray-700", children: /* @__PURE__ */ jsx("tr", { children: fields.map((field) => /* @__PURE__ */ jsx(
+    "th",
+    {
+      className: "px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider",
+      children: field.label
+    },
+    field.key
+  )) }) }),
+  /* @__PURE__ */ jsx("tbody", { className: "bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700", children: items.map((item, index) => /* @__PURE__ */ jsx(
     "tr",
     {
       onClick: () => selectable && onSelect && onSelect(item),
-      className: selectable ? "cursor-pointer hover:bg-gray-50" : "",
-      children: fields.map((field) => /* @__PURE__ */ jsx("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-500", children: item[field.key] }, field.key))
+      className: selectable ? "cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800" : "",
+      children: fields.map((field) => /* @__PURE__ */ jsx(
+        "td",
+        {
+          className: "px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-300",
+          children: item[field.key] ?? ""
+        },
+        field.key
+      ))
     },
     index
   )) })
@@ -801,94 +1158,211 @@ var Table = ({ items = [], fields = [], onSelect, selectable }) => /* @__PURE__
 var Detail = ({ data, fields = [], title, visible = true, onBack }) => {
   if (!visible)
     return null;
-  return /* @__PURE__ */ jsxs("div", { className: "w-full border rounded-lg p-6 space-y-4", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
-      title && /* @__PURE__ */ jsx("h2", { className: "text-lg font-medium", children: title }),
+  return /* @__PURE__ */ jsxs("div", { className: "w-full border border-gray-300 dark:border-gray-700 rounded-lg p-6 space-y-4 bg-white dark:bg-gray-900 shadow-sm", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center border-b border-gray-200 dark:border-gray-700 pb-3", children: [
+      title && /* @__PURE__ */ jsx("h2", { className: "text-lg font-medium text-gray-800 dark:text-white", children: title }),
       onBack && /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: onBack, children: "Back" })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "space-y-4", children: fields.map((field) => {
       if (field.type === "heading") {
-        return /* @__PURE__ */ jsx("h3", { className: "text-xl font-semibold", children: data?.[field.key] }, field.key);
+        return /* @__PURE__ */ jsx(
+          "h3",
+          {
+            className: "text-xl font-semibold text-gray-800 dark:text-white",
+            children: data?.[field.key] ?? ""
+          },
+          field.key
+        );
       }
       if (field.type === "content") {
-        return /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-700", children: data?.[field.key] }, field.key);
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "text-sm text-gray-700 dark:text-gray-300",
+            children: data?.[field.key] ?? ""
+          },
+          field.key
+        );
       }
-      return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-        field.label && /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-500", children: field.label }),
-        /* @__PURE__ */ jsx("span", { className: "text-sm", children: data?.[field.key] })
-      ] }, field.key);
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex flex-col border-b border-gray-100 dark:border-gray-800 py-2",
+          children: [
+            field.label && /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-600 dark:text-gray-400 font-medium", children: field.label }),
+            /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-800 dark:text-gray-200", children: data?.[field.key] ?? "" })
+          ]
+        },
+        field.key
+      );
     }) })
   ] });
 };
-var createEventHandler = (node, eventName) => {
-  const eventConfig = node.events?.[eventName];
-  if (!eventConfig)
+var getSafeProp = (props, key, validator, defaultValue) => {
+  if (props && typeof props === "object" && key in props) {
+    const value = props[key];
+    if (validator(value)) {
+      return value;
+    }
+  }
+  return defaultValue;
+};
+var isObject = (value) => typeof value === "object" && value !== null;
+var isString = (value) => typeof value === "string";
+var isBoolean = (value) => typeof value === "boolean";
+var isCSSProperties = (value) => isObject(value);
+var isButtonVariant = (value) => isString(value) && ["default", "outline", "destructive"].includes(value);
+var getSafeBinding = (bindings, key, validator, defaultValue) => {
+  if (bindings && typeof bindings === "object" && key in bindings) {
+    const value = bindings[key];
+    if (validator(value)) {
+      return value;
+    }
+  }
+  return defaultValue;
+};
+var isArrayOf = (itemValidator) => (arr) => Array.isArray(arr) && arr.every(itemValidator);
+var isReactNode = (value) => {
+  return typeof value === "string" || typeof value === "number" || typeof value === "boolean" || value === null || typeof value === "undefined" || typeof value === "object" && value !== null && "$$typeof" in value;
+};
+var isRecordWithReactNodeValues = (value) => isObject(value) && Object.values(value).every(isReactNode);
+var isFieldObject = (item) => isObject(item) && isString(item.key) && isString(item.label);
+var isDetailFieldObject = (item) => isObject(item) && isString(item.key) && isString(item.label) && (item.type === void 0 || isString(item.type));
+var createEventHandler = (node, eventName, uiEventType2, processEvent2) => {
+  const eventConfig = node.events?.[uiEventType2];
+  if (!processEvent2 || !eventConfig)
     return void 0;
-  return () => {
-    console.log(`Event triggered: ${eventName} on node ${node.id}`, {
-      action: eventConfig.action,
-      target: eventConfig.target,
-      payload: eventConfig.payload
-    });
+  return (eventPayload) => {
+    const fullEvent = {
+      type: uiEventType2,
+      nodeId: node.id,
+      timestamp: Date.now(),
+      payload: {
+        ...eventConfig.payload || {},
+        ...eventPayload || {}
+      }
+    };
+    processEvent2(fullEvent);
   };
 };
 var adapterMap = {
-  Container: (node) => /* @__PURE__ */ jsx(Container, { style: node.props?.style, className: node.props?.className, children: node.children?.map((child) => renderNode(child)) }),
-  Header: (node) => /* @__PURE__ */ jsx(Header, { title: node.props?.title || "Untitled" }),
-  Button: (node) => /* @__PURE__ */ jsx(
-    Button,
+  Container: (node, processEvent2) => /* @__PURE__ */ jsx(
+    Container,
     {
-      variant: node.props?.variant,
-      onClick: createEventHandler(node, "onClick"),
-      children: node.props?.label || "Button"
+      style: getSafeProp(node.props, "style", isCSSProperties, {}),
+      className: getSafeProp(node.props, "className", isString, ""),
+      children: node.children?.map((child) => renderNode(child, processEvent2))
     }
   ),
-  ListView: (node) => /* @__PURE__ */ jsx(
-    Table,
+  Header: (node) => /* @__PURE__ */ jsx(
+    Header,
     {
-      items: node.bindings?.items || [],
-      fields: node.bindings?.fields || [],
-      selectable: node.props?.selectable,
-      onSelect: createEventHandler(node, "onSelect")
+      title: getSafeProp(node.props, "title", isString, "Untitled"),
+      className: getSafeProp(node.props, "className", isString, "")
     }
   ),
-  Detail: (node) => /* @__PURE__ */ jsx(
-    Detail,
+  Button: (node, processEvent2) => /* @__PURE__ */ jsx(
+    Button,
     {
-      data: node.bindings?.data,
-      fields: node.bindings?.fields || [],
-      title: node.props?.title,
-      visible: node.props?.visible !== false,
-      onBack: createEventHandler(node, "onBack")
+      variant: getSafeProp(node.props, "variant", isButtonVariant, "default"),
+      onClick: createEventHandler(node, "onClick", "CLICK", processEvent2),
+      children: getSafeProp(node.props, "label", isString, "Button")
     }
-  )
+  ),
+  ListView: (node, processEvent2) => {
+    const items = getSafeBinding(
+      node.bindings,
+      "items",
+      isArrayOf(isRecordWithReactNodeValues),
+      []
+    );
+    const fields = getSafeBinding(
+      node.bindings,
+      "fields",
+      isArrayOf(isFieldObject),
+      []
+    );
+    const selectable = getSafeProp(node.props, "selectable", isBoolean, false);
+    return /* @__PURE__ */ jsx(
+      Table,
+      {
+        items,
+        fields,
+        selectable,
+        onSelect: (item) => {
+          const handler = createEventHandler(
+            node,
+            "onSelect",
+            "CLICK",
+            processEvent2
+          );
+          if (handler) {
+            handler({ selectedItem: item });
+          }
+        }
+      }
+    );
+  },
+  Detail: (node, processEvent2) => {
+    const data = getSafeBinding(
+      node.bindings,
+      "data",
+      isRecordWithReactNodeValues,
+      {}
+    );
+    const fields = getSafeBinding(
+      node.bindings,
+      "fields",
+      isArrayOf(isDetailFieldObject),
+      []
+    );
+    const title = getSafeProp(node.props, "title", isString, "");
+    const visible = getSafeProp(node.props, "visible", isBoolean, true);
+    return /* @__PURE__ */ jsx(
+      Detail,
+      {
+        data,
+        fields,
+        title,
+        visible,
+        onBack: createEventHandler(node, "onBack", "CLICK", processEvent2)
+      }
+    );
+  }
 };
-function renderNode(node) {
-  const Component = adapterMap[node.type];
-  if (Component) {
-    return Component(node);
+function renderNode(node, processEvent2) {
+  const mappedComponent = adapterMap[node.node_type];
+  if (mappedComponent) {
+    return mappedComponent(node, processEvent2);
   }
-  return /* @__PURE__ */ jsxs("div", { className: "p-2 border border-red-300 rounded", children: [
-    /* @__PURE__ */ jsxs("p", { className: "text-sm text-red-500", children: [
-      "Unsupported component: ",
-      node.type
-    ] }),
-    node.children?.map((child) => renderNode(child))
-  ] });
+  console.warn(`Unknown node type: ${node.node_type}`);
+  return React.createElement(
+    Container,
+    {},
+    `Unknown node type: ${node.node_type}`
+  );
 }
-async function renderNode2(node, adapter = "shadcn") {
+var renderedNodesCache = /* @__PURE__ */ new Map();
+var MAX_CACHE_SIZE = 10;
+var CACHE_TTL = 5e3;
+async function renderNode2(node, adapter = "shadcn", processEvent2) {
   const startTime = Date.now();
+  const nodeId = node.id;
+  const cachedItem = renderedNodesCache.get(nodeId);
+  if (cachedItem && startTime - cachedItem.timestamp < CACHE_TTL) {
+    return cachedItem.element;
+  }
   await systemEvents.emit(
     createSystemEvent("RENDER_START" /* RENDER_START */, { layout: node })
   );
   let result;
   switch (adapter) {
     case "shadcn":
-      result = renderNode(node);
+      result = renderNode(node, processEvent2);
       break;
     default:
       console.warn(`Unsupported adapter: ${adapter}, falling back to shadcn`);
-      result = renderNode(node);
+      result = renderNode(node, processEvent2);
   }
   await systemEvents.emit(
     createSystemEvent("RENDER_COMPLETE" /* RENDER_COMPLETE */, {
@@ -896,13 +1370,23 @@ async function renderNode2(node, adapter = "shadcn") {
       renderTimeMs: Date.now() - startTime
     })
   );
+  renderedNodesCache.set(nodeId, {
+    element: result,
+    timestamp: startTime
+  });
+  if (renderedNodesCache.size > MAX_CACHE_SIZE) {
+    const oldestKey = [...renderedNodesCache.entries()].sort(
+      ([, a], [, b]) => a.timestamp - b.timestamp
+    )[0][0];
+    renderedNodesCache.delete(oldestKey);
+  }
   return result;
 }
 function renderShimmer(node, adapter = "shadcn") {
   if (!node) {
     return /* @__PURE__ */ jsx(ShimmerBlock, {});
   }
-  switch (node.type) {
+  switch (node.node_type) {
     case "ListView":
       return /* @__PURE__ */ jsx(ShimmerTable, { rows: 3 });
     case "Detail":
@@ -915,6 +1399,16 @@ function renderShimmer(node, adapter = "shadcn") {
 }
 
 // src/core/bindings.ts
+var bindingsCache = /* @__PURE__ */ new Map();
+var MAX_CACHE_SIZE2 = 50;
+var CACHE_TTL2 = 2e3;
+var nodeCacheTimestamps = /* @__PURE__ */ new Map();
+function hashDataContext(context) {
+  return JSON.stringify(context);
+}
+function createCacheKey(nodeId, context) {
+  return `${nodeId}:${hashDataContext(context)}`;
+}
 function getValueByPath(context, path) {
   const parts = path.split(".");
   let current = context;
@@ -932,19 +1426,32 @@ function getValueByPath(context, path) {
 function setValueByPath(context, path, value) {
   const result = { ...context };
   const parts = path.split(".");
+  if (parts.length === 0)
+    return result;
   let current = result;
   for (let i = 0; i < parts.length - 1; i++) {
     const part = parts[i];
-    if (!(part in current) || current[part] === null || current[part] === void 0) {
-      current[part] = {};
+    if (typeof current !== "object" || current === null) {
+      console.error("setValueByPath: Cannot create path in a non-object.");
+      return context;
     }
-    current = current[part];
-    if (typeof current !== "object") {
-      current = {};
+    const currentAsObject = current;
+    if (!(part in currentAsObject) || typeof currentAsObject[part] !== "object" || currentAsObject[part] === null) {
+      currentAsObject[part] = {};
     }
+    current = currentAsObject[part];
   }
   const lastPart = parts[parts.length - 1];
-  current[lastPart] = value;
+  if (typeof current === "object" && current !== null) {
+    current[lastPart] = value;
+  } else if (parts.length === 1 && typeof result === "object" && result !== null) {
+    result[lastPart] = value;
+  } else {
+    console.warn(
+      `setValueByPath: Could not set value for path "${path}". Final segment location is not an object.`
+    );
+    return context;
+  }
   return result;
 }
 function processBinding(binding, context) {
@@ -964,18 +1471,27 @@ function processBinding(binding, context) {
   return binding;
 }
 async function resolveBindings(node, context) {
+  const currentTime = Date.now();
+  const cacheKey = createCacheKey(node.id, context);
+  const cachedNode = bindingsCache.get(cacheKey);
+  const cachedTimestamp = nodeCacheTimestamps.get(cacheKey);
+  if (cachedNode && cachedTimestamp && currentTime - cachedTimestamp < CACHE_TTL2) {
+    return cachedNode;
+  }
   await systemEvents.emit(
-    createSystemEvent("BINDING_RESOLUTION_START" /* BINDING_RESOLUTION_START */, { layout: node })
+    createSystemEvent("BINDING_RESOLUTION_START" /* BINDING_RESOLUTION_START */, {
+      layout: node
+    })
   );
   const result = {
     ...node,
-    props: node.props ? { ...node.props } : void 0,
-    events: node.events ? { ...node.events } : void 0
+    props: node.props ? { ...node.props } : null,
+    events: node.events ? { ...node.events } : null
   };
   if (node.bindings) {
     for (const [key, binding] of Object.entries(node.bindings)) {
       const value = processBinding(binding, context);
-      if (value !== void 0) {
+      if (value !== void 0 && typeof value === "string") {
         if (!result.props) {
           result.props = {};
         }
@@ -984,7 +1500,9 @@ async function resolveBindings(node, context) {
     }
   }
   if (node.children) {
-    result.children = await Promise.all(node.children.map((child) => resolveBindings(child, context)));
+    result.children = await Promise.all(
+      node.children.map((child) => resolveBindings(child, context))
+    );
   }
   await systemEvents.emit(
     createSystemEvent("BINDING_RESOLUTION_COMPLETE" /* BINDING_RESOLUTION_COMPLETE */, {
@@ -992,6 +1510,17 @@ async function resolveBindings(node, context) {
       resolvedLayout: result
     })
   );
+  bindingsCache.set(cacheKey, result);
+  nodeCacheTimestamps.set(cacheKey, currentTime);
+  if (bindingsCache.size > MAX_CACHE_SIZE2) {
+    const entries = [...nodeCacheTimestamps.entries()];
+    if (entries.length > 0) {
+      entries.sort((a, b) => a[1] - b[1]);
+      const oldestKey = entries[0][0];
+      bindingsCache.delete(oldestKey);
+      nodeCacheTimestamps.delete(oldestKey);
+    }
+  }
   return result;
 }
 function executeAction(action, targetId, payload, context = {}, layoutTree) {
@@ -1027,7 +1556,7 @@ var EventManager = class {
   }
   /**
    * Register a hook for specific event types
-   * 
+   *
    * @param eventTypes - Event types to register for, or 'all' for all events
    * @param hook - Hook function to execute
    * @returns Unregister function
@@ -1060,7 +1589,7 @@ var EventManager = class {
   }
   /**
    * Process an event through all registered hooks
-   * 
+   *
    * @param event - The UI event to process
    * @returns Whether the default action should proceed
    */
@@ -1106,6 +1635,20 @@ function createEventHook(eventTypes, hook, options) {
     }
   };
 }
+
+// src/core/component-detection.ts
+function areShadcnComponentsAvailable() {
+  try {
+    init_button();
+    return true;
+  } catch (error) {
+    return false;
+  }
+}
+function getMissingComponentsMessage() {
+  return `Missing required shadcn components. Please run:
+> npm run setup-shadcn`;
+}
 var AutoUI = ({
   schema,
   goal,
@@ -1116,16 +1659,21 @@ var AutoUI = ({
   systemEventHooks,
   debugMode = false,
   mockMode = true,
-  databaseConfig,
   planningConfig,
   integration = {},
   scope = {},
   enablePartialUpdates = false
 }) => {
-  const [schemaAdapterInstance, setSchemaAdapterInstance] = useState(null);
+  const [schemaAdapterInstance] = useState(null);
   const [dataContext, setDataContext] = useState({});
+  const [componentsAvailable, setComponentsAvailable] = useState(true);
   const effectiveSchema = schema;
   const scopedGoal = goal;
+  useEffect(() => {
+    if (componentAdapter === "shadcn") {
+      setComponentsAvailable(areShadcnComponentsAvailable());
+    }
+  }, [componentAdapter]);
   useEffect(() => {
     const unregisters = [];
     if (systemEventHooks) {
@@ -1133,7 +1681,10 @@ var AutoUI = ({
         if (!hooks)
           return;
         hooks.forEach((hook) => {
-          const unregister = systemEvents.on(eventType, hook);
+          const unregister = systemEvents.on(
+            eventType,
+            hook
+          );
           unregisters.push(unregister);
         });
       });
@@ -1142,7 +1693,9 @@ var AutoUI = ({
       const debugHook = (event) => {
         console.debug(`[AutoUI Debug] System Event:`, event);
       };
-      Object.values(SystemEventType).forEach((eventType) => {
+      Object.values(SystemEventType).filter(
+        (eventType) => eventType !== "RENDER_START" /* RENDER_START */ && eventType !== "BINDING_RESOLUTION_START" /* BINDING_RESOLUTION_START */
+      ).forEach((eventType) => {
         const unregister = systemEvents.on(eventType, debugHook);
         unregisters.push(unregister);
       });
@@ -1189,95 +1742,137 @@ var AutoUI = ({
       return;
     const unregisters = [];
     if (eventHooks.all) {
-      const unregister = eventManagerRef.current.register("all", async (ctx) => {
-        for (const hook of eventHooks.all || []) {
-          await hook(ctx);
-          if (ctx.isPropagationStopped())
-            break;
+      const unregister = eventManagerRef.current.register(
+        "all",
+        async (ctx) => {
+          for (const hook of eventHooks.all || []) {
+            await hook(ctx);
+            if (ctx.isPropagationStopped())
+              break;
+          }
         }
-      });
+      );
       unregisters.push(unregister);
     }
     Object.entries(eventHooks).forEach(([type, hooks]) => {
       if (type === "all" || !hooks)
         return;
-      const unregister = eventManagerRef.current.register([type], async (ctx) => {
-        for (const hook of hooks) {
-          await hook(ctx);
-          if (ctx.isPropagationStopped())
-            break;
+      const unregister = eventManagerRef.current.register(
+        [type],
+        async (ctx) => {
+          for (const hook of hooks) {
+            await hook(ctx);
+            if (ctx.isPropagationStopped())
+              break;
+          }
         }
-      });
+      );
       unregisters.push(unregister);
     });
     return () => {
       unregisters.forEach((unregister) => unregister());
     };
   }, [eventHooks]);
-  useCallback(async (event) => {
-    const shouldProceed = await eventManagerRef.current.processEvent(event);
-    if (onEvent) {
-      onEvent(event);
-    }
-    if (!shouldProceed) {
-      console.info("Event processing was prevented by hooks", event);
-      return;
-    }
-    const findNodeById2 = (node, id) => {
-      if (!node)
-        return void 0;
-      if (node.id === id)
-        return node;
-      if (node.children) {
-        for (const child of node.children) {
-          const found = findNodeById2(child, id);
-          if (found)
-            return found;
+  const processEvent2 = useCallback(
+    async (event) => {
+      const shouldProceed = await eventManagerRef.current.processEvent(event);
+      if (onEvent) {
+        onEvent(event);
+      }
+      if (!shouldProceed) {
+        console.info("Event processing was prevented by hooks", event);
+        return;
+      }
+      const findNodeById2 = (node, id) => {
+        if (!node)
+          return void 0;
+        if (node.id === id)
+          return node;
+        if (node.children) {
+          for (const child of node.children) {
+            const found = findNodeById2(child, id);
+            if (found)
+              return found;
+          }
         }
+        return void 0;
+      };
+      const sourceNode = findNodeById2(state.layout, event.nodeId);
+      if (!sourceNode) {
+        console.warn(`Node not found for event: ${event.nodeId}`);
+        handleEvent(event);
+        return;
       }
-      return void 0;
-    };
-    const sourceNode = findNodeById2(state.layout, event.nodeId);
-    if (!sourceNode) {
-      console.warn(`Node not found for event: ${event.nodeId}`);
-      handleEvent(event);
-      return;
-    }
-    const eventConfig = sourceNode.events?.[event.type];
-    if (!eventConfig) {
-      console.warn(`No event config found for ${event.type} on node ${event.nodeId}`);
+      const eventConfig = sourceNode.events?.[event.type];
+      if (!eventConfig) {
+        console.warn(
+          `No event config found for ${event.type} on node ${event.nodeId}`
+        );
+        handleEvent(event);
+        return;
+      }
+      const newContext = executeAction(
+        eventConfig.action,
+        eventConfig.target || "",
+        // Provide empty string as fallback if target is null
+        {
+          ...eventConfig.payload,
+          ...event.payload
+        },
+        dataContext,
+        state.layout || void 0
+      );
+      setDataContext(newContext);
       handleEvent(event);
-      return;
-    }
-    const newContext = executeAction(
-      eventConfig.action,
-      eventConfig.target,
-      {
-        ...eventConfig.payload,
-        ...event.payload
-      },
-      dataContext,
-      state.layout
-    );
-    setDataContext(newContext);
-    handleEvent(event);
-  }, [dataContext, handleEvent, onEvent, state.layout]);
-  const [resolvedLayout, setResolvedLayout] = useState(void 0);
-  const [renderedNode, setRenderedNode] = useState(null);
-  useEffect(() => {
+    },
+    [dataContext, handleEvent, onEvent, state.layout]
+  );
+  const [resolvedLayout, setResolvedLayout] = useState(
+    void 0
+  );
+  const [renderedNode, setRenderedNode] = useState(
+    null
+  );
+  const resolveLayoutBindings = useCallback(async () => {
     if (state.layout) {
-      resolveBindings(state.layout, dataContext).then((resolved) => setResolvedLayout(resolved)).catch((err) => console.error("Error resolving bindings:", err));
+      try {
+        const resolved = await resolveBindings(state.layout, dataContext);
+        setResolvedLayout(resolved);
+      } catch (err) {
+        console.error("Error resolving bindings:", err);
+      }
     } else {
       setResolvedLayout(void 0);
     }
   }, [state.layout, dataContext]);
   useEffect(() => {
+    resolveLayoutBindings();
+  }, [resolveLayoutBindings]);
+  const renderResolvedLayout = useCallback(async () => {
     if (resolvedLayout) {
-      renderNode2(resolvedLayout, componentAdapter).then((rendered) => setRenderedNode(rendered)).catch((err) => console.error("Error rendering node:", err));
+      try {
+        const rendered = await renderNode2(
+          resolvedLayout,
+          componentAdapter,
+          processEvent2
+        );
+        setRenderedNode(rendered);
+      } catch (err) {
+        console.error("Error rendering node:", err);
+      }
     } else {
       setRenderedNode(null);
     }
-  }, [resolvedLayout, componentAdapter]);
+  }, [resolvedLayout, componentAdapter, processEvent2]);
+  useEffect(() => {
+    renderResolvedLayout();
+  }, [renderResolvedLayout]);
+  if (!componentsAvailable) {
+    return /* @__PURE__ */ jsxs("div", { className: "autoui-error p-4 border border-red-300 bg-red-50 text-red-700 rounded", children: [
+      /* @__PURE__ */ jsx("p", { className: "font-medium", children: "Component Library Not Found" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm whitespace-pre-line", children: getMissingComponentsMessage() })
+    ] });
+  }
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -1296,9 +1891,22 @@ var AutoUI = ({
           // Render the resolved layout
           /* @__PURE__ */ jsx("div", { className: "autoui-content", children: renderedNode })
         ),
-        state.error && /* @__PURE__ */ jsxs("div", { className: "autoui-error", children: [
-          /* @__PURE__ */ jsx("p", { className: "autoui-error-title", children: "Error generating UI" }),
-          /* @__PURE__ */ jsx("p", { className: "autoui-error-message", children: state.error })
+        state.error && /* @__PURE__ */ jsxs("div", { className: "autoui-error p-4 border border-red-300 bg-red-50 dark:bg-red-900 dark:border-red-700 rounded-md", children: [
+          /* @__PURE__ */ jsx("p", { className: "autoui-error-title text-lg font-semibold text-red-700 dark:text-red-300 mb-2", children: "Error generating UI" }),
+          /* @__PURE__ */ jsx("p", { className: "autoui-error-message text-sm text-red-600 dark:text-red-300", children: state.error }),
+          !mockMode && /* @__PURE__ */ jsxs("div", { className: "mt-4 text-sm text-red-600 dark:text-red-300", children: [
+            /* @__PURE__ */ jsx("p", { children: "This could be because:" }),
+            /* @__PURE__ */ jsxs("ul", { className: "list-disc pl-5 mt-2", children: [
+              /* @__PURE__ */ jsx("li", { children: "Your OpenAI API key is missing or invalid" }),
+              /* @__PURE__ */ jsx("li", { children: "The OpenAI service is experiencing issues" }),
+              /* @__PURE__ */ jsx("li", { children: "Your API rate limit has been exceeded" })
+            ] }),
+            /* @__PURE__ */ jsxs("p", { className: "mt-2", children: [
+              "Try setting ",
+              /* @__PURE__ */ jsx("code", { children: "mockMode=true" }),
+              " to use sample data instead."
+            ] })
+          ] })
         ] })
       ]
     }
@@ -1351,26 +1959,26 @@ var DrizzleAdapter = class {
    */
   mapDataType(drizzleType) {
     const typeMap = {
-      "serial": "integer",
-      "integer": "integer",
-      "int": "integer",
-      "bigint": "integer",
-      "text": "string",
-      "varchar": "string",
-      "char": "string",
-      "boolean": "boolean",
-      "bool": "boolean",
-      "timestamp": "datetime",
-      "timestamptz": "datetime",
-      "date": "date",
-      "time": "time",
-      "json": "object",
-      "jsonb": "object",
-      "real": "number",
-      "float": "number",
-      "double": "number",
-      "numeric": "number",
-      "decimal": "number"
+      serial: "integer",
+      integer: "integer",
+      int: "integer",
+      bigint: "integer",
+      text: "string",
+      varchar: "string",
+      char: "string",
+      boolean: "boolean",
+      bool: "boolean",
+      timestamp: "datetime",
+      timestamptz: "datetime",
+      date: "date",
+      time: "time",
+      json: "object",
+      jsonb: "object",
+      real: "number",
+      float: "number",
+      double: "number",
+      numeric: "number",
+      decimal: "number"
     };
     return typeMap[drizzleType.toLowerCase()] || "string";
   }
@@ -1413,37 +2021,92 @@ function createSchemaAdapter(options) {
     case "custom":
       return options.adapter;
     default:
-      throw new Error(`Unsupported schema adapter type: ${options.type}`);
-  }
-}
-async function generateComponent(schema) {
-  try {
-    const { text } = await generateText({
-      model: openai("gpt-4"),
-      prompt: `Generate a React component based on this data schema: ${JSON.stringify(schema)}`
-    });
-    return text;
-  } catch (error) {
-    console.error("Error generating component:", error);
-    throw error;
+      throw new Error(
+        `Unsupported schema adapter type: ${options.type}`
+      );
   }
 }
-async function generateUIDescription(schema) {
-  const { text } = await generateText({
-    model: openai("gpt-4"),
-    prompt: `Generate a React component description based on this data schema: ${JSON.stringify(schema)}. 
-    Include what fields should be displayed and what user interactions might be needed.`
-  });
-  return text;
-}
-async function generateUIComponent(schema) {
-  const { text } = await generateText({
-    model: openai("gpt-4"),
-    prompt: `Generate a basic React component based on this data schema: ${JSON.stringify(schema)}.`
-  });
-  return text;
+
+// src/ai-utils.ts
+var generateComponent = async (prompt) => {
+  console.warn(
+    "generateComponent is a placeholder and will be implemented in a future version"
+  );
+  return `<div>Generated Component for: ${prompt}</div>`;
+};
+var generateUIDescription = async (prompt) => {
+  console.warn(
+    "generateUIDescription is a placeholder and will be implemented in a future version"
+  );
+  return `Description for ${prompt}`;
+};
+var generateUIComponent = async (prompt) => {
+  console.warn(
+    "generateUIComponent is a placeholder and will be implemented in a future version"
+  );
+  return `<div>Generated UI Component for: ${prompt}</div>`;
+};
+function usePlanner(options) {
+  const { goal, schema, userContext, router: customRouter } = options;
+  const [layout, setLayout] = useState(void 0);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const router = customRouter || createDefaultRouter();
+  const dataContext = {};
+  const generateInitialLayout = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const plannerInput2 = {
+        schema,
+        goal,
+        userContext: userContext || null,
+        history: null
+      };
+      const generatedLayout = await callPlannerLLM(plannerInput2);
+      setLayout(generatedLayout);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error(String(err)));
+    } finally {
+      setLoading(false);
+    }
+  }, [schema, goal, userContext]);
+  const handleEvent = useCallback(
+    async (event) => {
+      if (!layout) {
+        setError(new Error("Cannot handle event - no layout exists"));
+        return;
+      }
+      setLoading(true);
+      setError(null);
+      try {
+        const updatedLayout = await processEvent(
+          event,
+          router,
+          schema,
+          layout,
+          dataContext,
+          goal,
+          userContext
+        );
+        setLayout(updatedLayout);
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error(String(err)));
+      } finally {
+        setLoading(false);
+      }
+    },
+    [layout, router, schema, dataContext, goal, userContext]
+  );
+  return {
+    layout,
+    loading,
+    error,
+    handleEvent,
+    generateInitialLayout
+  };
 }
 
-export { ActionRouter, ActionType, AutoUI, DrizzleAdapter, SystemEventType, createDefaultRouter, createEventHook, createSchemaAdapter, createSystemEvent, generateComponent, generateUIComponent, generateUIDescription, systemEvents, uiEvent, uiEventType, uiSpecNode };
+export { ActionRouter, ActionType, AutoUI, DrizzleAdapter, SystemEventType, createDefaultRouter, createEventHook, createSchemaAdapter, createSystemEvent, generateComponent, generateUIComponent, generateUIDescription, systemEvents, uiEvent, uiEventType, uiSpecNode, usePlanner };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.mjs.map