autoui-react 0.0.4-alpha → 0.1.0

package/dist/index.js

@@ -1,111 +1,26 @@
 'use strict';
 
-var clsx = require('clsx');
-var tailwindMerge = require('tailwind-merge');
-var reactSlot = require('@radix-ui/react-slot');
-var classVarianceAuthority = require('class-variance-authority');
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var openai = require('@ai-sdk/openai');
-var ai = require('ai');
+var react = require('react');
 var zod = require('zod');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-
-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 tailwindMerge.twMerge(clsx.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 ? reactSlot.Slot : "button";
-  return /* @__PURE__ */ jsxRuntime.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 = classVarianceAuthority.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"
-        }
-      }
-    );
-  }
-});
+var jsxRuntime = require('react/jsx-runtime');
 
 // src/core/reducer.ts
 function cloneNode(node) {
   return {
     ...node,
-    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
+    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))
   };
 }
 function findNodeById(tree, nodeId) {
-  if (!tree)
-    return void 0;
-  if (tree.id === nodeId)
-    return tree;
+  if (!tree) return void 0;
+  if (tree.id === nodeId) return tree;
   if (tree.children) {
     for (const child of tree.children) {
       const found = findNodeById(child, nodeId);
-      if (found)
-        return found;
+      if (found) return found;
     }
   }
   return void 0;
@@ -120,15 +35,13 @@ function updateNodeById(tree, nodeId, updater) {
     if (node.children) {
       for (const child of node.children) {
         const path2 = findPath(child, id, newPath);
-        if (path2)
-          return path2;
+        if (path2) return path2;
       }
     }
     return null;
   }
   const path = findPath(result, nodeId);
-  if (!path)
-    return result;
+  if (!path) return result;
   const nodeToUpdate = path[path.length - 1];
   const updatedNode = updater(nodeToUpdate);
   if (path.length === 1) {
@@ -137,14 +50,18 @@ function updateNodeById(tree, nodeId, updater) {
   const parent = path[path.length - 2];
   const updatedParent = {
     ...parent,
-    children: parent.children ? parent.children.map(
+    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);
@@ -171,8 +88,7 @@ function removeNodeById(tree, nodeId) {
       }
       for (const child of node.children) {
         const parent2 = findParent(child, id);
-        if (parent2)
-          return parent2;
+        if (parent2) return parent2;
       }
     }
     return null;
@@ -182,11 +98,10 @@ function removeNodeById(tree, nodeId) {
     throw new Error("Cannot remove root node");
   }
   const parent = findParent(result, nodeId);
-  if (!parent)
-    return result;
+  if (!parent) return result;
   return updateNodeById(result, parent.id, (node) => ({
     ...node,
-    children: node.children ? node.children.filter((child) => child.id !== nodeId) : null
+    children: node.children?.filter((child) => child.id !== nodeId)
   }));
 }
 function uiReducer(state, action) {
@@ -203,7 +118,7 @@ function uiReducer(state, action) {
         ...state,
         layout: action.node,
         loading: false,
-        error: null
+        error: void 0
       };
     }
     case "PARTIAL_UPDATE": {
@@ -212,7 +127,7 @@ function uiReducer(state, action) {
           ...state,
           layout: action.node,
           loading: false,
-          error: null
+          error: void 0
         };
       }
       if (action.nodeId === "root" || action.nodeId === state.layout.id) {
@@ -220,23 +135,19 @@ function uiReducer(state, action) {
           ...state,
           layout: action.node,
           loading: false,
-          error: null
+          error: void 0
         };
       }
       return {
         ...state,
         layout: replaceNodeById(state.layout, action.nodeId, action.node),
         loading: false,
-        error: null
+        error: void 0
       };
     }
     case "ADD_NODE": {
       if (!state.layout) {
-        return {
-          ...state,
-          error: "Cannot add node: Layout is empty.",
-          loading: false
-        };
+        return state;
       }
       return {
         ...state,
@@ -244,41 +155,21 @@ function uiReducer(state, action) {
           state.layout,
           action.parentId,
           action.node,
-          action.index === null ? void 0 : action.index
+          action.index
         ),
         loading: false,
-        error: null
+        error: void 0
       };
     }
     case "REMOVE_NODE": {
       if (!state.layout) {
-        return {
-          ...state,
-          error: "Cannot remove node: Layout is empty.",
-          loading: false
-        };
+        return state;
       }
-      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,
-        error: action.message,
-        loading: false
+        layout: removeNodeById(state.layout, action.nodeId),
+        loading: false,
+        error: void 0
       };
     }
     case "LOADING": {
@@ -287,15 +178,20 @@ function uiReducer(state, action) {
         loading: action.isLoading
       };
     }
+    case "ERROR": {
+      return {
+        ...state,
+        error: action.message,
+        loading: false
+      };
+    }
     default:
       return state;
   }
 }
 var initialState = {
-  layout: null,
-  loading: false,
-  history: [],
-  error: null
+  loading: true,
+  history: []
 };
 
 // src/core/action-router.ts
@@ -342,7 +238,7 @@ var ActionRouter = class {
           schema,
           goal,
           history: [event],
-          userContext: userContext || null
+          userContext
         },
         prompt: `Generate a new UI for the goal: "${goal}". The user just triggered: ${event.type} on node ${event.nodeId}`
       };
@@ -391,20 +287,16 @@ 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,
-      templateValues
+      {
+        goal,
+        eventType: event.type,
+        nodeId: event.nodeId,
+        targetNodeId,
+        actionType: matchingRoute.actionType,
+        ...additionalContext
+      }
     );
     return {
       actionType: matchingRoute.actionType,
@@ -472,58 +364,27 @@ var uiEventType = zod.z.enum([
 var uiEvent = zod.z.object({
   type: uiEventType,
   nodeId: zod.z.string(),
-  timestamp: zod.z.number().nullable(),
-  payload: zod.z.record(zod.z.unknown()).nullable()
-});
-zod.z.enum(["AI_RESPONSE", "ERROR"]);
-var runtimeRecord = zod.z.record(zod.z.any()).nullable();
-var openAISimplifiedValue = zod.z.string().nullable();
-var openAIRecordSimplifiedNullable = zod.z.record(openAISimplifiedValue).nullable();
-var openAIEventPayloadSimplifiedNullable = zod.z.record(openAISimplifiedValue).nullable();
-var openAIBaseNode = zod.z.object({
-  id: zod.z.string(),
-  node_type: zod.z.string(),
-  props: openAIRecordSimplifiedNullable,
-  // Nullable record
-  bindings: openAIRecordSimplifiedNullable,
-  // Nullable record
-  events: zod.z.record(
-    zod.z.string(),
-    zod.z.object({
-      action: zod.z.string(),
-      target: zod.z.string(),
-      payload: openAIEventPayloadSimplifiedNullable
-    })
-  ).nullable(),
-  // Entire events object is nullable
-  children: zod.z.null()
-  // Base children are null. When extended, it will be an array or null.
-});
-var openAINodeL4 = openAIBaseNode;
-var openAINodeL3 = openAIBaseNode.extend({
-  children: zod.z.array(openAINodeL4).nullable()
+  timestamp: zod.z.number().optional(),
+  payload: zod.z.record(zod.z.any()).optional()
 });
-var openAINodeL2 = openAIBaseNode.extend({
-  children: zod.z.array(openAINodeL3).nullable()
-});
-var openAIUISpec = openAIBaseNode.extend({
-  children: zod.z.array(openAINodeL2).nullable()
-});
-var uiSpecNode = zod.z.object({
+zod.z.enum([
+  "AI_RESPONSE",
+  "ERROR"
+]);
+var uiSpecNode = zod.z.lazy(() => zod.z.object({
   id: zod.z.string(),
-  node_type: zod.z.string(),
-  props: runtimeRecord,
-  bindings: runtimeRecord,
-  events: zod.z.record(
-    zod.z.string(),
-    zod.z.object({
-      action: zod.z.string(),
-      target: zod.z.string(),
-      payload: runtimeRecord
-    })
-  ).nullable(),
-  children: zod.z.lazy(() => zod.z.array(uiSpecNode)).nullable()
-});
+  type: zod.z.string(),
+  // e.g., "ListView", "Button", "TextField"
+  props: zod.z.record(zod.z.any()).optional(),
+  bindings: zod.z.record(zod.z.any()).optional(),
+  // Data bindings
+  events: zod.z.record(zod.z.string(), zod.z.object({
+    action: zod.z.string(),
+    target: zod.z.string().optional(),
+    payload: zod.z.record(zod.z.any()).optional()
+  })).optional(),
+  children: zod.z.array(uiSpecNode).optional()
+}));
 zod.z.discriminatedUnion("type", [
   zod.z.object({
     type: zod.z.literal("UI_EVENT"),
@@ -542,7 +403,7 @@ zod.z.discriminatedUnion("type", [
     type: zod.z.literal("ADD_NODE"),
     parentId: zod.z.string(),
     node: uiSpecNode,
-    index: zod.z.number().nullable()
+    index: zod.z.number().optional()
   }),
   zod.z.object({
     type: zod.z.literal("REMOVE_NODE"),
@@ -558,16 +419,16 @@ zod.z.discriminatedUnion("type", [
   })
 ]);
 zod.z.object({
-  layout: uiSpecNode.nullable(),
+  layout: uiSpecNode.optional(),
   loading: zod.z.boolean(),
   history: zod.z.array(uiEvent),
-  error: zod.z.string().nullable()
+  error: zod.z.string().optional()
 });
 zod.z.object({
   schema: zod.z.record(zod.z.unknown()),
   goal: zod.z.string(),
-  history: zod.z.array(uiEvent).nullable(),
-  userContext: zod.z.record(zod.z.unknown()).nullable().optional()
+  history: zod.z.array(uiEvent).optional(),
+  userContext: zod.z.record(zod.z.unknown()).optional()
 });
 
 // src/core/system-events.ts
@@ -593,7 +454,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
@@ -613,7 +474,7 @@ var SystemEventManager = class {
   }
   /**
    * Emit a system event to all registered listeners
-   *
+   * 
    * @param event - The system event to emit
    */
   async emit(event) {
@@ -633,22 +494,14 @@ function createSystemEvent(type, data) {
 }
 
 // src/env.ts
-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
-};
+({
+  MOCK_PLANNER: undefined?.VITE_MOCK_PLANNER || "1",
+  NODE_ENV: undefined?.MODE || "development"
+  // Add other environment variables as needed
+});
 
 // src/core/planner.ts
-var strictOpenAI = openai.createOpenAI({
-  compatibility: "strict"
-  // Required for structured outputs with OpenAI API
-});
-function buildPrompt(input, customPrompt) {
+function buildPrompt(input, targetNodeId, customPrompt) {
   const { schema, goal, history, userContext } = input;
   const schemaInfo = Object.entries(schema).map(([tableName, tableSchema]) => {
     return `Table: ${tableName}
@@ -661,9 +514,6 @@ 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}"
@@ -677,10 +527,10 @@ ${recentEvents}${userContextSection}
 Generate a complete UI specification in JSON format that matches the following TypeScript type:
 type UISpecNode = {
   id: string;
-  node_type: string;
-  props?: Record<string, unknown>;
-  bindings?: Record<string, unknown>;
-  events?: Record<string, { action: string; target: string; payload?: Record<string, unknown>; }>;
+  type: string;
+  props?: Record<string, any>;
+  bindings?: Record<string, any>;
+  events?: Record<string, { action: string; target?: string; payload?: Record<string, any>; }>;
   children?: UISpecNode[];
 };
 
@@ -690,419 +540,211 @@ 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 - make sure to always include both action and target properties
+6. Provide event handlers for user interactions
 
 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",
-    node_type: "Container",
-    props: {
-      className: "p-4 space-y-6"
-    },
-    bindings: null,
-    events: null,
+    type: "Container",
+    props: { title: "Mock UI" },
     children: [
       {
-        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
-          }
-        ]
+        id: "text-1",
+        type: "Text",
+        props: { text: "This is a mock UI for testing" }
       }
     ]
   };
   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 ai.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] = React.useReducer(uiReducer, initialState);
-  const handleEvent = React.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 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);
-          }
-        }
-        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 });
+  const [state, dispatch] = react.useReducer(uiReducer, initialState);
+  const { append, data, isLoading, error, stop } = useChat();
+  const handleEvent = react.useCallback((event) => {
+    dispatch({ type: "UI_EVENT", event });
+    if (enablePartialUpdates) {
+      const route = router.resolveRoute(
+        event,
+        schema,
+        state.layout,
+        dataContext,
+        goal,
+        userContext
+      );
+      if (route) {
+        console.log("Resolved route:", route);
         systemEvents.emit(
-          createSystemEvent("PLAN_ERROR" /* PLAN_ERROR */, {
-            error: e instanceof Error ? e : new Error(String(e))
+          createSystemEvent("PLAN_START" /* PLAN_START */, {
+            plannerInput: route.plannerInput
           })
         );
-      } finally {
-        dispatch({ type: "LOADING", isLoading: false });
+        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;
+          }
+        } 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
+          }));
+        }
+        return;
       }
-    },
-    [
-      // append, // REMOVE
-      goal,
+    }
+    const input = {
       schema,
-      state.history,
-      // Keep state.history if input preparation needs it
-      state.layout,
-      // stop, // REMOVE
-      userContext,
-      router,
-      mockMode,
-      dataContext,
-      enablePartialUpdates,
-      dispatch
-      // Add dispatch
-    ]
-  );
-  React.useEffect(() => {
-    const initialFetch = async () => {
-      dispatch({ type: "LOADING", isLoading: true });
+      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]);
+  react.useEffect(() => {
+    {
       try {
-        const input = {
-          schema,
-          goal,
-          history: [],
-          userContext
-        };
-        let node;
-        if (mockMode) {
-          node = mockPlanner(input);
+        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 });
+          }
         } else {
-          node = await callPlannerLLM(input);
+          dispatch({ type: "AI_RESPONSE", node: validatedNode });
         }
-        dispatch({ type: "AI_RESPONSE", node });
-      } catch (e) {
-        const errorMessage = e instanceof Error ? e.message : String(e);
-        dispatch({ type: "ERROR", message: errorMessage });
         systemEvents.emit(
-          // Also emit system event for initial load error
+          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(
           createSystemEvent("PLAN_ERROR" /* PLAN_ERROR */, {
-            error: e instanceof Error ? e : new Error(String(e))
+            error: parseError instanceof Error ? parseError : new Error("Parse error")
           })
         );
-      } finally {
-        dispatch({ type: "LOADING", isLoading: false });
       }
+    }
+  }, [data.content, error, isLoading, enablePartialUpdates]);
+  react.useEffect(() => {
+    const input = {
+      schema,
+      goal,
+      history: [],
+      userContext
     };
-    initialFetch();
-  }, [goal, schema, userContext, mockMode, dispatch]);
+    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]);
   return {
     state,
     dispatch,
     handleEvent
   };
 }
-zod.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__ */ jsxRuntime.jsx("div", { className: "w-full h-8 bg-gray-200 animate-pulse rounded" });
 var ShimmerTable = ({ rows = 3 }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full space-y-2", children: [
   /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-10 bg-gray-200 animate-pulse rounded" }),
@@ -1116,259 +758,117 @@ var ShimmerCard = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-f
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-5/6 h-4 bg-gray-200 animate-pulse rounded" })
   ] })
 ] });
-var Container = (props) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: `autoui-mock-container ${props.className || ""}`, children: props.children });
-var Header = ({
-  title,
-  className
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  "header",
-  {
-    className: `py-4 px-6 border-b border-gray-300 mb-4 bg-gray-50 dark:bg-gray-800 ${className || ""}`,
-    children: /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl font-semibold text-gray-800 dark:text-white", children: title })
-  }
-);
+var Container = (props) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-full ${props.className || ""}`, style: props.style, children: props.children });
+var Header = ({ title }) => /* @__PURE__ */ jsxRuntime.jsx("header", { className: "py-4 px-6 border-b mb-4", children: /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl font-semibold", children: title }) });
 var Button = ({ onClick, children, variant = "default" }) => /* @__PURE__ */ jsxRuntime.jsx(
   "button",
   {
-    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"}`,
+    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"}`,
     onClick,
     children
   }
 );
-var Table = ({ items = [], fields = [], onSelect, selectable }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full border border-gray-300 dark:border-gray-700 rounded-lg overflow-hidden shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full", children: [
-  /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "bg-gray-100 dark:bg-gray-800 border-b border-gray-300 dark:border-gray-700", children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: fields.map((field) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("tbody", { className: "bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700", children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+var Table = ({ items = [], fields = [], onSelect, selectable }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full border rounded-lg overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "bg-gray-50", children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: fields.map((field) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("tbody", { className: "bg-white divide-y divide-gray-200", children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
     "tr",
     {
       onClick: () => selectable && onSelect && onSelect(item),
-      className: selectable ? "cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800" : "",
-      children: fields.map((field) => /* @__PURE__ */ jsxRuntime.jsx(
-        "td",
-        {
-          className: "px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-300",
-          children: item[field.key] ?? ""
-        },
-        field.key
-      ))
+      className: selectable ? "cursor-pointer hover:bg-gray-50" : "",
+      children: fields.map((field) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-500", children: item[field.key] }, field.key))
     },
     index
   )) })
 ] }) });
 var Detail = ({ data, fields = [], title, visible = true, onBack }) => {
-  if (!visible)
-    return null;
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center border-b border-gray-200 dark:border-gray-700 pb-3", children: [
-      title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-medium text-gray-800 dark:text-white", children: title }),
+  if (!visible) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full border rounded-lg p-6 space-y-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [
+      title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-medium", children: title }),
       onBack && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", onClick: onBack, children: "Back" })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: fields.map((field) => {
       if (field.type === "heading") {
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          "h3",
-          {
-            className: "text-xl font-semibold text-gray-800 dark:text-white",
-            children: data?.[field.key] ?? ""
-          },
-          field.key
-        );
+        return /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-semibold", children: data?.[field.key] }, field.key);
       }
       if (field.type === "content") {
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: "text-sm text-gray-700 dark:text-gray-300",
-            children: data?.[field.key] ?? ""
-          },
-          field.key
-        );
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-gray-700", children: data?.[field.key] }, field.key);
       }
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: "flex flex-col border-b border-gray-100 dark:border-gray-800 py-2",
-          children: [
-            field.label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-600 dark:text-gray-400 font-medium", children: field.label }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-800 dark:text-gray-200", children: data?.[field.key] ?? "" })
-          ]
-        },
-        field.key
-      );
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+        field.label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-500", children: field.label }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: data?.[field.key] })
+      ] }, field.key);
     }) })
   ] });
 };
-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 (eventPayload) => {
-    const fullEvent = {
-      type: uiEventType2,
-      nodeId: node.id,
-      timestamp: Date.now(),
-      payload: {
-        ...eventConfig.payload || {},
-        ...eventPayload || {}
-      }
-    };
-    processEvent2(fullEvent);
+var createEventHandler = (node, eventName) => {
+  const eventConfig = node.events?.[eventName];
+  if (!eventConfig) return void 0;
+  return () => {
+    console.log(`Event triggered: ${eventName} on node ${node.id}`, {
+      action: eventConfig.action,
+      target: eventConfig.target,
+      payload: eventConfig.payload
+    });
   };
 };
 var adapterMap = {
-  Container: (node, processEvent2) => /* @__PURE__ */ jsxRuntime.jsx(
-    Container,
+  Container: (node) => /* @__PURE__ */ jsxRuntime.jsx(Container, { style: node.props?.style, className: node.props?.className, children: node.children?.map((child) => renderNode(child)) }),
+  Header: (node) => /* @__PURE__ */ jsxRuntime.jsx(Header, { title: node.props?.title || "Untitled" }),
+  Button: (node) => /* @__PURE__ */ jsxRuntime.jsx(
+    Button,
     {
-      style: getSafeProp(node.props, "style", isCSSProperties, {}),
-      className: getSafeProp(node.props, "className", isString, ""),
-      children: node.children?.map((child) => renderNode(child, processEvent2))
+      variant: node.props?.variant,
+      onClick: createEventHandler(node, "onClick"),
+      children: node.props?.label || "Button"
     }
   ),
-  Header: (node) => /* @__PURE__ */ jsxRuntime.jsx(
-    Header,
+  ListView: (node) => /* @__PURE__ */ jsxRuntime.jsx(
+    Table,
     {
-      title: getSafeProp(node.props, "title", isString, "Untitled"),
-      className: getSafeProp(node.props, "className", isString, "")
+      items: node.bindings?.items || [],
+      fields: node.bindings?.fields || [],
+      selectable: node.props?.selectable,
+      onSelect: createEventHandler(node, "onSelect")
     }
   ),
-  Button: (node, processEvent2) => /* @__PURE__ */ jsxRuntime.jsx(
-    Button,
+  Detail: (node) => /* @__PURE__ */ jsxRuntime.jsx(
+    Detail,
     {
-      variant: getSafeProp(node.props, "variant", isButtonVariant, "default"),
-      onClick: createEventHandler(node, "onClick", "CLICK", processEvent2),
-      children: getSafeProp(node.props, "label", isString, "Button")
+      data: node.bindings?.data,
+      fields: node.bindings?.fields || [],
+      title: node.props?.title,
+      visible: node.props?.visible !== false,
+      onBack: createEventHandler(node, "onBack")
     }
-  ),
-  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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-      Detail,
-      {
-        data,
-        fields,
-        title,
-        visible,
-        onBack: createEventHandler(node, "onBack", "CLICK", processEvent2)
-      }
-    );
-  }
+  )
 };
-function renderNode(node, processEvent2) {
-  const mappedComponent = adapterMap[node.node_type];
-  if (mappedComponent) {
-    return mappedComponent(node, processEvent2);
+function renderNode(node) {
+  const Component = adapterMap[node.type];
+  if (Component) {
+    return Component(node);
   }
-  console.warn(`Unknown node type: ${node.node_type}`);
-  return React__default.default.createElement(
-    Container,
-    {},
-    `Unknown node type: ${node.node_type}`
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2 border border-red-300 rounded", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-red-500", children: [
+      "Unsupported component: ",
+      node.type
+    ] }),
+    node.children?.map((child) => renderNode(child))
+  ] });
 }
-var renderedNodesCache = /* @__PURE__ */ new Map();
-var MAX_CACHE_SIZE = 10;
-var CACHE_TTL = 5e3;
-async function renderNode2(node, adapter = "shadcn", processEvent2) {
+async function renderNode2(node, adapter = "shadcn") {
   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, processEvent2);
+      result = renderNode(node);
       break;
     default:
       console.warn(`Unsupported adapter: ${adapter}, falling back to shadcn`);
-      result = renderNode(node, processEvent2);
+      result = renderNode(node);
   }
   await systemEvents.emit(
     createSystemEvent("RENDER_COMPLETE" /* RENDER_COMPLETE */, {
@@ -1376,23 +876,13 @@ async function renderNode2(node, adapter = "shadcn", processEvent2) {
       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__ */ jsxRuntime.jsx(ShimmerBlock, {});
   }
-  switch (node.node_type) {
+  switch (node.type) {
     case "ListView":
       return /* @__PURE__ */ jsxRuntime.jsx(ShimmerTable, { rows: 3 });
     case "Detail":
@@ -1405,16 +895,6 @@ 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;
@@ -1432,32 +912,19 @@ 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 (typeof current !== "object" || current === null) {
-      console.error("setValueByPath: Cannot create path in a non-object.");
-      return context;
+    if (!(part in current) || current[part] === null || current[part] === void 0) {
+      current[part] = {};
     }
-    const currentAsObject = current;
-    if (!(part in currentAsObject) || typeof currentAsObject[part] !== "object" || currentAsObject[part] === null) {
-      currentAsObject[part] = {};
+    current = current[part];
+    if (typeof current !== "object") {
+      current = {};
     }
-    current = currentAsObject[part];
   }
   const lastPart = parts[parts.length - 1];
-  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;
-  }
+  current[lastPart] = value;
   return result;
 }
 function processBinding(binding, context) {
@@ -1477,27 +944,18 @@ 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 } : null,
-    events: node.events ? { ...node.events } : null
+    props: node.props ? { ...node.props } : void 0,
+    events: node.events ? { ...node.events } : void 0
   };
   if (node.bindings) {
     for (const [key, binding] of Object.entries(node.bindings)) {
       const value = processBinding(binding, context);
-      if (value !== void 0 && typeof value === "string") {
+      if (value !== void 0) {
         if (!result.props) {
           result.props = {};
         }
@@ -1506,9 +964,7 @@ 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 */, {
@@ -1516,17 +972,6 @@ 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) {
@@ -1549,6 +994,7 @@ function executeAction(action, targetId, payload, context = {}, layoutTree) {
       }
       break;
     }
+    // Add more actions as needed
     default:
       console.warn(`Unknown action: ${action}`);
   }
@@ -1562,7 +1008,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
@@ -1595,7 +1041,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
    */
@@ -1616,15 +1062,13 @@ var EventManager = class {
     if (this.hooks.all) {
       for (const hook of this.hooks.all) {
         await hook(context);
-        if (propagationStopped)
-          break;
+        if (propagationStopped) break;
       }
     }
     if (!propagationStopped && this.hooks[event.type]) {
       for (const hook of this.hooks[event.type] || []) {
         await hook(context);
-        if (propagationStopped)
-          break;
+        if (propagationStopped) break;
       }
     }
     return !defaultPrevented;
@@ -1641,20 +1085,6 @@ 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,
@@ -1665,32 +1095,23 @@ var AutoUI = ({
   systemEventHooks,
   debugMode = false,
   mockMode = true,
+  databaseConfig,
   planningConfig,
   integration = {},
   scope = {},
   enablePartialUpdates = false
 }) => {
-  const [schemaAdapterInstance] = React.useState(null);
-  const [dataContext, setDataContext] = React.useState({});
-  const [componentsAvailable, setComponentsAvailable] = React.useState(true);
+  const [schemaAdapterInstance, setSchemaAdapterInstance] = react.useState(null);
+  const [dataContext, setDataContext] = react.useState({});
   const effectiveSchema = schema;
   const scopedGoal = goal;
-  React.useEffect(() => {
-    if (componentAdapter === "shadcn") {
-      setComponentsAvailable(areShadcnComponentsAvailable());
-    }
-  }, [componentAdapter]);
-  React.useEffect(() => {
+  react.useEffect(() => {
     const unregisters = [];
     if (systemEventHooks) {
       Object.entries(systemEventHooks).forEach(([eventType, hooks]) => {
-        if (!hooks)
-          return;
+        if (!hooks) return;
         hooks.forEach((hook) => {
-          const unregister = systemEvents.on(
-            eventType,
-            hook
-          );
+          const unregister = systemEvents.on(eventType, hook);
           unregisters.push(unregister);
         });
       });
@@ -1699,9 +1120,7 @@ var AutoUI = ({
       const debugHook = (event) => {
         console.debug(`[AutoUI Debug] System Event:`, event);
       };
-      Object.values(SystemEventType).filter(
-        (eventType) => eventType !== "RENDER_START" /* RENDER_START */ && eventType !== "BINDING_RESOLUTION_START" /* BINDING_RESOLUTION_START */
-      ).forEach((eventType) => {
+      Object.values(SystemEventType).forEach((eventType) => {
         const unregister = systemEvents.on(eventType, debugHook);
         unregisters.push(unregister);
       });
@@ -1710,7 +1129,7 @@ var AutoUI = ({
       unregisters.forEach((unregister) => unregister());
     };
   }, [systemEventHooks, debugMode]);
-  React.useEffect(() => {
+  react.useEffect(() => {
     const initializeDataContext = async () => {
       let initialData = {};
       if (schemaAdapterInstance) {
@@ -1742,143 +1161,86 @@ var AutoUI = ({
     dataContext,
     enablePartialUpdates
   });
-  const eventManagerRef = React.useRef(new EventManager());
-  React.useEffect(() => {
-    if (!eventHooks)
-      return;
+  const eventManagerRef = react.useRef(new EventManager());
+  react.useEffect(() => {
+    if (!eventHooks) 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;
-          }
+      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;
         }
-      );
+      });
       unregisters.push(unregister);
     });
     return () => {
       unregisters.forEach((unregister) => unregister());
     };
   }, [eventHooks]);
-  const processEvent2 = React.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;
-          }
+  react.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;
-      }
-      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);
+      return void 0;
+    };
+    const sourceNode = findNodeById2(state.layout, event.nodeId);
+    if (!sourceNode) {
+      console.warn(`Node not found for event: ${event.nodeId}`);
       handleEvent(event);
-    },
-    [dataContext, handleEvent, onEvent, state.layout]
-  );
-  const [resolvedLayout, setResolvedLayout] = React.useState(
-    void 0
-  );
-  const [renderedNode, setRenderedNode] = React.useState(
-    null
-  );
-  const resolveLayoutBindings = React.useCallback(async () => {
+      return;
+    }
+    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,
+      {
+        ...eventConfig.payload,
+        ...event.payload
+      },
+      dataContext,
+      state.layout
+    );
+    setDataContext(newContext);
+    handleEvent(event);
+  }, [dataContext, handleEvent, onEvent, state.layout]);
+  const [resolvedLayout, setResolvedLayout] = react.useState(void 0);
+  react.useEffect(() => {
     if (state.layout) {
-      try {
-        const resolved = await resolveBindings(state.layout, dataContext);
-        setResolvedLayout(resolved);
-      } catch (err) {
-        console.error("Error resolving bindings:", err);
-      }
+      resolveBindings(state.layout, dataContext).then((resolved) => setResolvedLayout(resolved)).catch((err) => console.error("Error resolving bindings:", err));
     } else {
       setResolvedLayout(void 0);
     }
   }, [state.layout, dataContext]);
-  React.useEffect(() => {
-    resolveLayoutBindings();
-  }, [resolveLayoutBindings]);
-  const renderResolvedLayout = React.useCallback(async () => {
-    if (resolvedLayout) {
-      try {
-        const rendered = await renderNode2(
-          resolvedLayout,
-          componentAdapter,
-          processEvent2
-        );
-        setRenderedNode(rendered);
-      } catch (err) {
-        console.error("Error rendering node:", err);
-      }
-    } else {
-      setRenderedNode(null);
-    }
-  }, [resolvedLayout, componentAdapter, processEvent2]);
-  React.useEffect(() => {
-    renderResolvedLayout();
-  }, [renderResolvedLayout]);
-  if (!componentsAvailable) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "autoui-error p-4 border border-red-300 bg-red-50 text-red-700 rounded", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: "Component Library Not Found" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm whitespace-pre-line", children: getMissingComponentsMessage() })
-    ] });
-  }
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -1895,24 +1257,11 @@ var AutoUI = ({
           ] }) })
         ) : (
           // Render the resolved layout
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "autoui-content", children: renderedNode })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "autoui-content", children: renderNode2(resolvedLayout, componentAdapter) })
         ),
-        state.error && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: "autoui-error-title text-lg font-semibold text-red-700 dark:text-red-300 mb-2", children: "Error generating UI" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "autoui-error-message text-sm text-red-600 dark:text-red-300", children: state.error }),
-          !mockMode && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 text-sm text-red-600 dark:text-red-300", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { children: "This could be because:" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "list-disc pl-5 mt-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("li", { children: "Your OpenAI API key is missing or invalid" }),
-              /* @__PURE__ */ jsxRuntime.jsx("li", { children: "The OpenAI service is experiencing issues" }),
-              /* @__PURE__ */ jsxRuntime.jsx("li", { children: "Your API rate limit has been exceeded" })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-2", children: [
-              "Try setting ",
-              /* @__PURE__ */ jsxRuntime.jsx("code", { children: "mockMode=true" }),
-              " to use sample data instead."
-            ] })
-          ] })
+        state.error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "autoui-error", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "autoui-error-title", children: "Error generating UI" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "autoui-error-message", children: state.error })
         ] })
       ]
     }
@@ -1965,26 +1314,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";
   }
@@ -2027,92 +1376,10 @@ function createSchemaAdapter(options) {
     case "custom":
       return options.adapter;
     default:
-      throw new Error(
-        `Unsupported schema adapter type: ${options.type}`
-      );
+      throw new Error(`Unsupported schema adapter type: ${options.type}`);
   }
 }
 
-// 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] = React.useState(void 0);
-  const [loading, setLoading] = React.useState(false);
-  const [error, setError] = React.useState(null);
-  const router = customRouter || createDefaultRouter();
-  const dataContext = {};
-  const generateInitialLayout = React.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 = React.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
-  };
-}
-
 exports.ActionRouter = ActionRouter;
 exports.ActionType = ActionType;
 exports.AutoUI = AutoUI;
@@ -2122,13 +1389,9 @@ exports.createDefaultRouter = createDefaultRouter;
 exports.createEventHook = createEventHook;
 exports.createSchemaAdapter = createSchemaAdapter;
 exports.createSystemEvent = createSystemEvent;
-exports.generateComponent = generateComponent;
-exports.generateUIComponent = generateUIComponent;
-exports.generateUIDescription = generateUIDescription;
 exports.systemEvents = systemEvents;
 exports.uiEvent = uiEvent;
 exports.uiEventType = uiEventType;
 exports.uiSpecNode = uiSpecNode;
-exports.usePlanner = usePlanner;
-//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map