autoui-react 0.0.3-alpha → 0.0.5-alpha

package/dist/index.mjs

@@ -1,17 +1,100 @@
-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';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { XIcon, ChevronDownIcon, CheckIcon, ChevronUpIcon, CircleIcon } from 'lucide-react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import * as LabelPrimitive from '@radix-ui/react-label';
+
+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 +138,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 +187,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 +204,7 @@ function uiReducer(state, action) {
         ...state,
         layout: action.node,
         loading: false,
-        error: void 0
+        error: null
       };
     }
     case "PARTIAL_UPDATE": {
@@ -134,7 +213,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 +221,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 +245,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,23 +288,84 @@ 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
+var UI_GUIDANCE_BASE = `
+UI Guidance:
+1. Create a focused interface that directly addresses the goal
+2. Use appropriate UI patterns (lists, forms, details, etc.)
+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`;
+var LIST_BINDING_GUIDANCE = `7. **CRITICAL:** For \`ListView\` or \`Table\` nodes, the \`data\` binding key **MUST** point to the *exact path* of the data *array* within the context.`;
+var LIST_BINDING_EXAMPLE = `Example: If the context has \`{ tasks: { data: [...] } }\`, the binding **MUST** be \`{ "bindings": { "data": "tasks.data" } }\`. If the context has \`{ userList: [...] }\`, the binding **MUST** be \`{ "bindings": { "data": "userList" } }\`. **NEVER** bind to the parent object containing the array (e.g., DO NOT USE \`{ "bindings": { "data": "tasks" } }\`).`;
+var COMMON_UI_GUIDANCE = UI_GUIDANCE_BASE + "\n" + // Add a newline separator
+LIST_BINDING_GUIDANCE + // Add the specific list binding rule
+"\n" + // Add a newline separator
+LIST_BINDING_EXAMPLE;
+function processTemplate(template, values) {
+  return template.replace(/\${(.*?)}/g, (match, key) => {
+    const trimmedKey = key.trim();
+    return trimmedKey in values ? String(values[trimmedKey]) : match;
+  });
+}
+function buildPrompt(input, promptTemplate, templateValues) {
+  const { schema, goal, history, userContext } = input;
+  const schemaInfo = Object.entries(schema).map(([tableName, tableSchema]) => {
+    const schemaString = typeof tableSchema === "object" && tableSchema !== null ? JSON.stringify(tableSchema) : String(tableSchema);
+    return `Table: ${tableName}
+Schema: ${schemaString}`;
+  }).join("\n\n");
+  const recentEvents = history && history.length > 0 ? history.slice(-5).map(
+    (event) => `Event: ${event.type} on node ${event.nodeId}${event.payload ? ` with payload ${JSON.stringify(event.payload)}` : ""}`
+  ).join("\n") : "No recent events";
+  const userContextSection = userContext ? `
+
+User Context:
+${JSON.stringify(userContext)}` : "";
+  if (promptTemplate && templateValues) {
+    const fullTemplateValues = {
+      ...templateValues,
+      schemaInfo,
+      recentEvents,
+      userContextString: userContextSection.trim(),
+      // Use trimmed version
+      commonUIGuidance: COMMON_UI_GUIDANCE,
+      goal
+      // Ensure goal is always available to templates
+    };
+    return processTemplate(promptTemplate, fullTemplateValues);
+  }
+  const interactionDescription = history && history.length > 0 ? `The user's last action was: ${history[history.length - 1].type} on node ${history[history.length - 1].nodeId}` : "The user initiated the session for the goal";
+  return `
+You are an expert UI generator.
+Create a user interface that achieves the following goal: "${goal}".
+${interactionDescription}.
+
+Available data schema:
+${schemaInfo}
+
+Recent user interactions:
+${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>; }>; children?: UISpecNode[]; };
+${COMMON_UI_GUIDANCE}
+
+Respond ONLY with the JSON UI specification and no other text.
+  `;
+}
 var ActionType = /* @__PURE__ */ ((ActionType2) => {
   ActionType2["FULL_REFRESH"] = "FULL_REFRESH";
   ActionType2["UPDATE_NODE"] = "UPDATE_NODE";
@@ -236,19 +400,39 @@ var ActionRouter = class {
    * @returns Route resolution or null if no match
    */
   resolveRoute(event, schema, layout, dataContext, goal, userContext) {
+    console.log(
+      `[ActionRouter Debug] resolveRoute called for event type: ${event.type}`
+    );
     const routes = this.routes[event.type] || [];
+    console.log(
+      `[ActionRouter Debug] Found ${routes.length} routes for ${event.type}`
+    );
     if (routes.length === 0) {
-      return {
+      console.log(
+        `[ActionRouter Debug] No specific route found for ${event.type}, using default FULL_REFRESH.`
+      );
+      const defaultPlannerInput = {
+        schema,
+        goal,
+        history: [event],
+        userContext: userContext || null
+      };
+      const defaultPrompt = buildPrompt(
+        defaultPlannerInput,
+        void 0,
+        void 0
+      );
+      const defaultResolution = {
         actionType: "FULL_REFRESH" /* FULL_REFRESH */,
         targetNodeId: layout?.id || "root",
-        plannerInput: {
-          schema,
-          goal,
-          history: [event],
-          userContext
-        },
-        prompt: `Generate a new UI for the goal: "${goal}". The user just triggered: ${event.type} on node ${event.nodeId}`
+        plannerInput: defaultPlannerInput,
+        prompt: defaultPrompt
       };
+      console.log(
+        "[ActionRouter Debug] Default Resolution:",
+        defaultResolution
+      );
+      return defaultResolution;
     }
     const sourceNode = layout ? findNodeById(layout, event.nodeId) : void 0;
     const nodeConfig = sourceNode?.events?.[event.type];
@@ -261,6 +445,7 @@ var ActionRouter = class {
     if (!matchingRoute) {
       matchingRoute = routes[0];
     }
+    console.log("[ActionRouter Debug] Matching Route Config:", matchingRoute);
     const targetNodeId = nodeConfig?.target || matchingRoute.targetNodeId || event.nodeId;
     const additionalContext = {};
     if (matchingRoute.contextKeys) {
@@ -294,23 +479,35 @@ var ActionRouter = class {
         ...additionalContext
       }
     };
-    const prompt = this.processTemplate(
+    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)
+    };
+    console.log("[ActionRouter Debug] Template Values:", templateValues);
+    const finalPrompt = buildPrompt(
+      plannerInput2,
       matchingRoute.promptTemplate,
-      {
-        goal,
-        eventType: event.type,
-        nodeId: event.nodeId,
-        targetNodeId,
-        actionType: matchingRoute.actionType,
-        ...additionalContext
-      }
+      // Pass template if it exists (can be undefined)
+      templateValues
+      // Pass templateValues (used only if promptTemplate exists)
     );
-    return {
+    console.log("[ActionRouter Debug] Generated Prompt:", finalPrompt);
+    const finalResolution = {
       actionType: matchingRoute.actionType,
       targetNodeId,
       plannerInput: plannerInput2,
-      prompt
+      prompt: finalPrompt
+      // Use the generated prompt
     };
+    console.log("[ActionRouter Debug] Final Resolution:", finalResolution);
+    return finalResolution;
   }
   /**
    * Process a prompt template with variables
@@ -328,8 +525,11 @@ function createDefaultRouter() {
   const router = new ActionRouter();
   router.registerRoute("CLICK", {
     actionType: "FULL_REFRESH" /* FULL_REFRESH */,
-    targetNodeId: "root",
-    promptTemplate: 'Generate a new UI for the goal: "${goal}". The user just clicked on node ${nodeId}'
+    targetNodeId: "root"
+  });
+  router.registerRoute("INIT", {
+    actionType: "FULL_REFRESH" /* FULL_REFRESH */,
+    targetNodeId: "root"
   });
   router.registerRoute("CLICK", {
     actionType: "SHOW_DETAIL" /* SHOW_DETAIL */,
@@ -359,7 +559,31 @@ function createDefaultRouter() {
   });
   return router;
 }
+var componentType = 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"
+]);
+
+// src/schema/ui.ts
 var uiEventType = z.enum([
+  "INIT",
   "CLICK",
   "CHANGE",
   "SUBMIT",
@@ -371,27 +595,62 @@ 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().describe("Unique identifier for the UI node."),
+  node_type: componentType.describe(
+    "The type of UI component (e.g., Container, Text, Button, ListView)."
+  ),
+  props: openAIRecordSimplifiedNullable.describe(
+    'Component-specific properties (attributes). Values should be strings or null. E.g., for Header use { "title": "My Title" }; for Text use { "text": "My Text" }.'
+  ),
+  bindings: openAIRecordSimplifiedNullable.describe(
+    'Data bindings map context paths to component props. Values are paths (e.g., "user.name") or templates (e.g., "{{item.title}}"). **CRITICAL for ListView/Table:** the `data` key MUST point to the *exact array path* (e.g., { "data": "tasks.data" } or { "data": "userList" }), NOT the parent object.'
+  ),
+  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 +669,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 +685,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 +720,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 +740,7 @@ var SystemEventManager = class {
   }
   /**
    * Emit a system event to all registered listeners
-   * 
+   *
    * @param event - The system event to emit
    */
   async emit(event) {
@@ -501,268 +760,917 @@ 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 env = {
+  MOCK_PLANNER: process.env.VITE_MOCK_PLANNER || "0",
+  // Simplified MOCK_PLANNER assignment
+  NODE_ENV: process.env.VITE_NODE_ENV || "production",
+  // Simplified NODE_ENV assignment
+  OPENAI_API_KEY: rawApiKeyFromEnv || ""
+};
 
 // src/core/planner.ts
-function buildPrompt(input, targetNodeId, customPrompt) {
-  const { schema, goal, history, userContext } = input;
-  const schemaInfo = Object.entries(schema).map(([tableName, tableSchema]) => {
-    return `Table: ${tableName}
-Schema: ${JSON.stringify(tableSchema)}`;
-  }).join("\n\n");
-  const recentEvents = history?.slice(-5).map(
-    (event) => `Event: ${event.type} on node ${event.nodeId}${event.payload ? ` with payload ${JSON.stringify(event.payload)}` : ""}`
-  ).join("\n") || "No recent events";
-  const userContextSection = userContext ? `
-
-User Context:
-${JSON.stringify(userContext)}` : "";
-  return `
-You are an expert UI generator. 
-Create a user interface that achieves the following goal: "${goal}"
-
-Available data schema:
-${schemaInfo}
-
-Recent user interactions:
-${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>; }>;
-  children?: UISpecNode[];
+var getOpenAIClient = (apiKey) => {
+  return createOpenAI({
+    apiKey,
+    // Use the provided key directly
+    compatibility: "strict"
+  });
 };
-
-UI Guidance:
-1. Create a focused interface that directly addresses the goal
-2. Use appropriate UI patterns (lists, forms, details, etc.)
-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
-
-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: {
+                  data: "tasks.data",
+                  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, openaiApiKey, routeResolution) {
+  await systemEvents.emit(
+    createSystemEvent("PLAN_START" /* PLAN_START */, { plannerInput: input })
+  );
+  if (env.MOCK_PLANNER === "1") {
+    console.warn(
+      `Using mock planner because MOCK_PLANNER environment variable is set to "1".`
+    );
+    return mockPlanner(input);
+  }
+  if (!openaiApiKey) {
+    console.warn(
+      `OpenAI API key was not provided to callPlannerLLM. Falling back to mock planner.`
+    );
+    return mockPlanner(input);
+  }
+  const startTime = Date.now();
+  const prompt = routeResolution?.prompt;
+  if (!prompt) {
+    throw new Error("ActionRouter did not provide a prompt to callPlannerLLM.");
+  }
+  await systemEvents.emit(
+    createSystemEvent("PLAN_PROMPT_CREATED" /* PLAN_PROMPT_CREATED */, { prompt })
+  );
+  try {
+    const { object: uiSpec } = await generateObject({
+      model: getOpenAIClient(openaiApiKey)("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, openaiApiKey) {
+  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,
+    openaiApiKey || "",
+    routeResolution
+  );
+  return newLayout;
+}
 
 // src/core/state.ts
-var useChat = (config) => ({
-  append: async (message) => {
-  },
-  data: { content: "{}" },
-  isLoading: false,
-  error: null,
-  stop: () => {
-  }
-});
 function useUIStateEngine({
   schema,
   goal,
+  openaiApiKey,
   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,
+                openaiApiKey || "",
+                route
+              );
+            }
+          } else {
+            const input = {
+              schema,
+              goal,
+              history: [...state.history, event],
+              userContext
+            };
+            if (mockMode) {
+              resolvedNode = mockPlanner(input);
+            } else {
+              resolvedNode = await callPlannerLLM(
+                input,
+                openaiApiKey || "",
+                void 0
+              );
+            }
           }
         } 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,
+              openaiApiKey || "",
+              void 0
+            );
+          }
         }
-        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,
+      openaiApiKey,
+      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: [],
+          // Initial history is empty
+          userContext
+        };
+        let node;
+        if (mockMode) {
+          node = mockPlanner(input);
         } else {
-          dispatch({ type: "AI_RESPONSE", node: validatedNode });
+          const initEvent = {
+            type: "INIT",
+            // Assuming "INIT" is your initial event type
+            nodeId: "system",
+            // Or some other appropriate initial nodeId
+            timestamp: Date.now(),
+            payload: null
+          };
+          const route = router.resolveRoute(
+            initEvent,
+            schema,
+            null,
+            // No existing layout on initial fetch
+            dataContext,
+            goal,
+            userContext
+          );
+          if (!route || !route.prompt) {
+            console.error(
+              "[UIStateEngine] Initial fetch: Failed to resolve route or get prompt for INIT event."
+            );
+            throw new Error("Failed to initialize UI due to routing error.");
+          }
+          systemEvents.emit(
+            createSystemEvent("PLAN_START" /* PLAN_START */, {
+              plannerInput: route.plannerInput
+            })
+          );
+          node = await callPlannerLLM(
+            route.plannerInput,
+            // Use plannerInput from the resolved route
+            openaiApiKey || "",
+            route
+            // Pass the entire route object
+          );
         }
+        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, openaiApiKey]);
   return {
     state,
     dispatch,
     handleEvent
   };
 }
+
+// src/adapters/shadcn.tsx
+init_utils();
+
+// components/ui/dialog.tsx
+init_utils();
+function Dialog({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Overlay,
+    {
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogContent({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      DialogPrimitive.Content,
+      {
+        "data-slot": "dialog-content",
+        className: cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", children: [
+            /* @__PURE__ */ jsx(XIcon, {}),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-lg leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+
+// components/ui/card.tsx
+init_utils();
+function Card({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card",
+      className: cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-content",
+      className: cn("px-6", className),
+      ...props
+    }
+  );
+}
+
+// components/ui/input.tsx
+init_utils();
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "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",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// components/ui/textarea.tsx
+init_utils();
+function Textarea({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      "data-slot": "textarea",
+      className: cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// components/ui/select.tsx
+init_utils();
+function Select({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
+}
+function SelectValue({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+}
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    SelectPrimitive.Trigger,
+    {
+      "data-slot": "select-trigger",
+      "data-size": size,
+      className: cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 opacity-50" }) })
+      ]
+    }
+  );
+}
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+    SelectPrimitive.Content,
+    {
+      "data-slot": "select-content",
+      className: cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+        position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      ),
+      position,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx(
+          SelectPrimitive.Viewport,
+          {
+            className: cn(
+              "p-1",
+              position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(SelectScrollDownButton, {})
+      ]
+    }
+  ) });
+}
+function SelectItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    SelectPrimitive.Item,
+    {
+      "data-slot": "select-item",
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) }) }),
+        /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
+      ]
+    }
+  );
+}
+function SelectScrollUpButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.ScrollUpButton,
+    {
+      "data-slot": "select-scroll-up-button",
+      className: cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: "size-4" })
+    }
+  );
+}
+function SelectScrollDownButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.ScrollDownButton,
+    {
+      "data-slot": "select-scroll-down-button",
+      className: cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4" })
+    }
+  );
+}
+
+// components/ui/checkbox.tsx
+init_utils();
+function Checkbox({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    CheckboxPrimitive.Root,
+    {
+      "data-slot": "checkbox",
+      className: cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        CheckboxPrimitive.Indicator,
+        {
+          "data-slot": "checkbox-indicator",
+          className: "flex items-center justify-center text-current transition-none",
+          children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5" })
+        }
+      )
+    }
+  );
+}
+
+// components/ui/radio-group.tsx
+init_utils();
+function RadioGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Root,
+    {
+      "data-slot": "radio-group",
+      className: cn("grid gap-3", className),
+      ...props
+    }
+  );
+}
+function RadioGroupItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Item,
+    {
+      "data-slot": "radio-group-item",
+      className: cn(
+        "border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        RadioGroupPrimitive.Indicator,
+        {
+          "data-slot": "radio-group-indicator",
+          className: "relative flex items-center justify-center",
+          children: /* @__PURE__ */ jsx(CircleIcon, { className: "fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" })
+        }
+      )
+    }
+  );
+}
+
+// components/ui/tabs.tsx
+init_utils();
+function Tabs({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Root,
+    {
+      "data-slot": "tabs",
+      className: cn("flex flex-col gap-2", className),
+      ...props
+    }
+  );
+}
+function TabsList({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.List,
+    {
+      "data-slot": "tabs-list",
+      className: cn(
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TabsTrigger({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Trigger,
+    {
+      "data-slot": "tabs-trigger",
+      className: cn(
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TabsContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Content,
+    {
+      "data-slot": "tabs-content",
+      className: cn("flex-1 outline-none", className),
+      ...props
+    }
+  );
+}
+
+// components/ui/label.tsx
+init_utils();
+function Label2({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    LabelPrimitive.Root,
+    {
+      "data-slot": "label",
+      className: cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var parseStyleString = (styleString) => {
+  if (typeof styleString !== "string") {
+    return typeof styleString === "object" ? styleString : {};
+  }
+  const style = {};
+  styleString.split(";").forEach((declaration) => {
+    const [property, value] = declaration.split(":");
+    if (property && value) {
+      const camelCasedProperty = property.trim().replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+      style[camelCasedProperty] = value.trim();
+    }
+  });
+  return style;
+};
+var isArrayOf = (guard) => (arr) => Array.isArray(arr) && arr.every(guard);
 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,119 +1684,696 @@ 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"}`,
-    onClick,
+    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: () => 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(
-    "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))
-    },
-    index
-  )) })
-] }) });
 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 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 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 isSelectOptionObject = (item) => isObject(item) && isString(item.value) && isString(item.label);
+var isTabObject = (item) => (
+  // Allow content to be optional initially
+  isObject(item) && isString(item.value) && isString(item.label) && (item.content === void 0 || isUISpecNode(item.content))
+);
+var isUISpecNode = (value) => {
+  if (!isObject(value))
+    return false;
+  return isString(value.id) && isString(value.node_type);
+};
+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) => {
+    const { className, style: styleProp, key, ...restProps } = node.props || {};
+    const children = node.children?.map(
+      (child) => (
+        // Use React.cloneElement to add the key prop to the element returned by renderNode
+        React.cloneElement(renderNode(child, processEvent2), { key: child.id })
+      )
+    );
+    const style = typeof styleProp === "string" ? parseStyleString(styleProp) : styleProp;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("autoui-container", className),
+        style,
+        ...restProps,
+        "data-id": node.id,
+        children: [
+          (() => {
+            console.log(
+              `[Adapter Debug] Rendering Container: id=${node.id}, props=`,
+              node.props
+            );
+            return null;
+          })(),
+          children
+        ]
+      },
+      key
+    );
+  },
+  Header: (node) => /* @__PURE__ */ jsx(
+    Header,
     {
-      variant: node.props?.variant,
-      onClick: createEventHandler(node, "onClick"),
-      children: node.props?.label || "Button"
+      title: getSafeProp(node.props, "title", isString, "Untitled"),
+      className: getSafeProp(node.props, "className", isString, "")
     }
   ),
-  ListView: (node) => /* @__PURE__ */ jsx(
-    Table,
+  Button: (node, processEvent2) => /* @__PURE__ */ jsx(
+    Button,
     {
-      items: node.bindings?.items || [],
-      fields: node.bindings?.fields || [],
-      selectable: node.props?.selectable,
-      onSelect: createEventHandler(node, "onSelect")
+      variant: getSafeProp(node.props, "variant", isButtonVariant, "default"),
+      onClick: createEventHandler(node, "onClick", "CLICK", processEvent2),
+      children: getSafeProp(node.props, "label", isString, "Button")
     }
   ),
-  Detail: (node) => /* @__PURE__ */ jsx(
-    Detail,
-    {
-      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 { className, style: styleProp, key, ...restProps } = node.props || {};
+    const style = typeof styleProp === "string" ? parseStyleString(styleProp) : styleProp;
+    console.log(
+      `[Adapter Debug] Rendering ListView: id=${node.id}, props=`,
+      node.props
+    );
+    const children = node.children?.map(
+      (child) => React.cloneElement(renderNode(child, processEvent2), { key: child.id })
+    );
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "autoui-listview-container space-y-2",
+          className
+        ),
+        style,
+        ...restProps,
+        "data-id": node.id,
+        children
+      },
+      key
+    );
+  },
+  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)
+      }
+    );
+  },
+  Card: (node, processEvent2) => {
+    const { className, style: styleProp, key, ...restProps } = node.props || {};
+    const children = node.children?.map(
+      (child) => React.cloneElement(renderNode(child, processEvent2), { key: child.id })
+    );
+    const style = typeof styleProp === "string" ? parseStyleString(styleProp) : styleProp;
+    return /* @__PURE__ */ jsx(
+      Card,
+      {
+        className: cn("autoui-card", className),
+        style,
+        ...restProps,
+        "data-id": node.id,
+        children: /* @__PURE__ */ jsxs(CardContent, { className: "p-0", children: [
+          " ",
+          children
+        ] })
+      },
+      key
+    );
+  },
+  Input: (node, processEvent2) => {
+    const name = getSafeProp(node.props, "name", isString, "inputName");
+    const label = getSafeProp(node.props, "label", isString, "");
+    const value = getSafeBinding(node.bindings, "value", isString, "");
+    const placeholder = getSafeProp(node.props, "placeholder", isString, "");
+    const disabled = getSafeProp(node.props, "disabled", isBoolean, false);
+    const className = getSafeProp(node.props, "className", isString, "");
+    const handleChange = (e) => {
+      const handler = createEventHandler(
+        node,
+        "onChange",
+        "CHANGE",
+        processEvent2
+      );
+      if (handler)
+        handler({ value: e.target.value });
+    };
+    const handleFocus = () => {
+      const handler = createEventHandler(
+        node,
+        "onFocus",
+        "FOCUS",
+        processEvent2
+      );
+      if (handler)
+        handler({});
+    };
+    const handleBlur = () => {
+      const handler = createEventHandler(node, "onBlur", "BLUR", processEvent2);
+      if (handler)
+        handler({});
+    };
+    return /* @__PURE__ */ jsxs("div", { className: "grid w-full max-w-sm items-center gap-1.5", children: [
+      label && /* @__PURE__ */ jsx(Label2, { htmlFor: name, children: label }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          id: name,
+          name,
+          placeholder,
+          disabled,
+          value,
+          onChange: handleChange,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          className
+        }
+      )
+    ] });
+  },
+  Select: (node, processEvent2) => {
+    const name = getSafeProp(node.props, "name", isString, "selectName");
+    const label = getSafeProp(node.props, "label", isString, "");
+    const placeholder = getSafeProp(
+      node.props,
+      "placeholder",
+      isString,
+      "Select..."
+    );
+    const disabled = getSafeProp(node.props, "disabled", isBoolean, false);
+    const value = getSafeBinding(node.bindings, "value", isString, "");
+    const options = getSafeBinding(
+      node.bindings,
+      "options",
+      isArrayOf(isSelectOptionObject),
+      []
+    );
+    const className = getSafeProp(node.props, "className", isString, "");
+    const handleValueChange = (selectedValue) => {
+      const handler = createEventHandler(
+        node,
+        "onValueChange",
+        "CHANGE",
+        processEvent2
+      );
+      if (handler)
+        handler({ value: selectedValue });
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("grid w-full max-w-sm items-center gap-1.5", className),
+        children: [
+          label && /* @__PURE__ */ jsx(Label2, { htmlFor: name, children: label }),
+          /* @__PURE__ */ jsxs(
+            Select,
+            {
+              name,
+              value,
+              onValueChange: handleValueChange,
+              disabled,
+              children: [
+                /* @__PURE__ */ jsx(SelectTrigger, { id: name, children: /* @__PURE__ */ jsx(SelectValue, { placeholder }) }),
+                /* @__PURE__ */ jsx(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  },
+  Textarea: (node, processEvent2) => {
+    const { key, ...propsWithoutKey } = node.props || {};
+    const name = getSafeProp(propsWithoutKey, "name", isString, "textareaName");
+    const label = getSafeProp(propsWithoutKey, "label", isString, "");
+    const placeholder = getSafeProp(
+      propsWithoutKey,
+      "placeholder",
+      isString,
+      ""
+    );
+    const disabled = getSafeProp(propsWithoutKey, "disabled", isBoolean, false);
+    const rows = getSafeProp(
+      propsWithoutKey,
+      "rows",
+      (v) => typeof v === "number",
+      3
+    );
+    const value = getSafeBinding(node.bindings, "value", isString, "");
+    const className = getSafeProp(propsWithoutKey, "className", isString, "");
+    const handleChange = (e) => {
+      const handler = createEventHandler(
+        node,
+        "onChange",
+        "CHANGE",
+        processEvent2
+      );
+      if (handler)
+        handler({ value: e.target.value });
+    };
+    const handleFocus = () => {
+      const handler = createEventHandler(
+        node,
+        "onFocus",
+        "FOCUS",
+        processEvent2
+      );
+      if (handler)
+        handler({});
+    };
+    const handleBlur = () => {
+      const handler = createEventHandler(node, "onBlur", "BLUR", processEvent2);
+      if (handler)
+        handler({});
+    };
+    return /* @__PURE__ */ jsxs("div", { className: "grid w-full gap-1.5", children: [
+      label && /* @__PURE__ */ jsx(Label2, { htmlFor: name, children: label }),
+      /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          id: name,
+          name,
+          placeholder,
+          disabled,
+          rows,
+          value,
+          onChange: handleChange,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          className
+        }
+      )
+    ] }, key);
+  },
+  Checkbox: (node, processEvent2) => {
+    const { key, ...propsWithoutKey } = node.props || {};
+    const name = getSafeProp(propsWithoutKey, "name", isString, "checkboxName");
+    const label = getSafeProp(propsWithoutKey, "label", isString, "");
+    const checked = getSafeBinding(node.bindings, "checked", isBoolean, false);
+    const disabled = getSafeProp(propsWithoutKey, "disabled", isBoolean, false);
+    const className = getSafeProp(propsWithoutKey, "className", isString, "");
+    const handleCheckedChange = (isChecked) => {
+      if (typeof isChecked === "boolean") {
+        const handler = createEventHandler(
+          node,
+          "onCheckedChange",
+          "CHANGE",
+          processEvent2
+        );
+        if (handler)
+          handler({ checked: isChecked });
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("flex items-center space-x-2", className),
+        children: [
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              id: name,
+              name,
+              checked,
+              disabled,
+              onCheckedChange: handleCheckedChange
+            }
+          ),
+          label && /* @__PURE__ */ jsx(Label2, { htmlFor: name, className: "cursor-pointer", children: label })
+        ]
+      },
+      key
+    );
+  },
+  RadioGroup: (node, processEvent2) => {
+    const { key, ...propsWithoutKey } = node.props || {};
+    const name = getSafeProp(
+      propsWithoutKey,
+      "name",
+      isString,
+      "radioGroupName"
+    );
+    const label = getSafeProp(propsWithoutKey, "label", isString, "");
+    const value = getSafeBinding(node.bindings, "value", isString, "");
+    const options = getSafeBinding(
+      node.bindings,
+      "options",
+      isArrayOf(isSelectOptionObject),
+      []
+    );
+    const disabled = getSafeProp(propsWithoutKey, "disabled", isBoolean, false);
+    const className = getSafeProp(propsWithoutKey, "className", isString, "");
+    const handleValueChange = (selectedValue) => {
+      const handler = createEventHandler(
+        node,
+        "onValueChange",
+        "CHANGE",
+        processEvent2
+      );
+      if (handler)
+        handler({ value: selectedValue });
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("grid gap-1.5", className),
+        children: [
+          label && /* @__PURE__ */ jsx(Label2, { className: "mb-1", children: label }),
+          /* @__PURE__ */ jsx(
+            RadioGroup,
+            {
+              name,
+              value,
+              onValueChange: handleValueChange,
+              disabled,
+              className: "flex flex-col space-y-1",
+              children: options.map((option) => /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+                /* @__PURE__ */ jsx(
+                  RadioGroupItem,
+                  {
+                    value: option.value,
+                    id: `${name}-${option.value}`
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Label2,
+                  {
+                    htmlFor: `${name}-${option.value}`,
+                    className: "cursor-pointer",
+                    children: option.label
+                  }
+                )
+              ] }, option.value))
+            }
+          )
+        ]
+      },
+      key
+    );
+  },
+  Tabs: (node, processEvent2) => {
+    const { key, ...propsWithoutKey } = node.props || {};
+    const rawTabs = getSafeBinding(
+      node.bindings,
+      "tabs",
+      isArrayOf(isTabObject),
+      []
+    );
+    const defaultValue = getSafeProp(
+      propsWithoutKey,
+      "defaultValue",
+      isString,
+      rawTabs[0]?.value || ""
+    );
+    const className = getSafeProp(propsWithoutKey, "className", isString, "");
+    const handleValueChange = (value) => {
+      const handler = createEventHandler(
+        node,
+        "onValueChange",
+        "CHANGE",
+        processEvent2
+      );
+      if (handler)
+        handler({ value });
+    };
+    return /* @__PURE__ */ jsxs(
+      Tabs,
+      {
+        defaultValue,
+        onValueChange: handleValueChange,
+        className: cn("autoui-tabs w-full", className),
+        "data-id": node.id,
+        children: [
+          /* @__PURE__ */ jsx(TabsList, { children: rawTabs.map((tab) => /* @__PURE__ */ jsx(TabsTrigger, { value: tab.value, children: tab.label }, tab.value)) }),
+          rawTabs.map((tab) => /* @__PURE__ */ jsx(TabsContent, { value: tab.value, children: tab.content ? renderNode(tab.content, processEvent2) : null }, tab.value))
+        ]
+      },
+      key
+    );
+  },
+  Dialog: (node, processEvent2) => {
+    const isOpen = getSafeBinding(
+      node.bindings,
+      "open",
+      isBoolean,
+      getSafeProp(node.props, "open", isBoolean, false)
+    );
+    const {
+      title,
+      description,
+      className,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      style: _styleProp,
+      key,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      open: _openProp,
+      ...restProps
+    } = node.props || {};
+    const children = node.children?.map(
+      (child) => React.cloneElement(renderNode(child, processEvent2), { key: child.id })
+    );
+    const handleOpenChange = (open) => {
+      if (!open) {
+        const handler = createEventHandler(
+          node,
+          "onClose",
+          // Assumed event name in UISpec
+          "CLICK",
+          // Use CLICK as the event type for closing dialogs
+          processEvent2
+        );
+        if (handler) {
+          handler({});
+        }
+      }
+    };
+    console.log(
+      `[Adapter Debug] Rendering Dialog: id=${node.id}, props=`,
+      node.props,
+      `isOpen=${isOpen}`
+    );
+    return /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open: isOpen,
+        onOpenChange: handleOpenChange,
+        children: /* @__PURE__ */ jsxs(
+          DialogContent,
+          {
+            className: cn("autoui-dialog-content", className),
+            ...restProps,
+            "data-id": node.id,
+            children: [
+              (title || description) && /* @__PURE__ */ jsxs(DialogHeader, { children: [
+                title && /* @__PURE__ */ jsx(DialogTitle, { children: title }),
+                description && /* @__PURE__ */ jsx(DialogDescription, { children: description })
+              ] }),
+              children
+            ]
+          }
+        )
+      },
+      key
+    );
+  },
+  Heading: (node) => {
+    const { className, style: styleProp, key, ...restProps } = node.props || {};
+    const text = getSafeProp(node.props, "text", isString, "Heading");
+    let level = getSafeProp(
+      node.props,
+      "level",
+      (v) => typeof v === "number" && v >= 1 && v <= 6,
+      2
+    );
+    if (typeof level !== "number" || level < 1 || level > 6) {
+      level = 2;
     }
-  )
+    const Tag = `h${level}`;
+    const style = typeof styleProp === "string" ? parseStyleString(styleProp) : styleProp;
+    const headingStyles = {
+      1: "scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl",
+      2: "scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0",
+      3: "scroll-m-20 text-2xl font-semibold tracking-tight",
+      4: "scroll-m-20 text-xl font-semibold tracking-tight"
+      // Add styles for h5, h6 if needed, using text-lg, text-base etc.
+    }[level] || "text-lg font-semibold";
+    return /* @__PURE__ */ jsx(
+      Tag,
+      {
+        className: cn(headingStyles, className),
+        style,
+        ...restProps,
+        children: text
+      },
+      key
+    );
+  },
+  Text: (node) => {
+    const { className, style: styleProp, key, ...restProps } = node.props || {};
+    const text = getSafeProp(node.props, "text", isString, "Some text");
+    const style = typeof styleProp === "string" ? parseStyleString(styleProp) : styleProp;
+    return /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: cn("leading-7", className),
+        style,
+        ...restProps,
+        children: text
+      },
+      key
+    );
+  }
 };
-function renderNode(node) {
-  const Component = adapterMap[node.type];
-  if (Component) {
-    return Component(node);
-  }
-  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))
-  ] });
+function renderNode(node, processEvent2) {
+  const mappedComponent = adapterMap[node.node_type];
+  if (mappedComponent) {
+    return mappedComponent(node, processEvent2);
+  }
+  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 +2381,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 +2410,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;
@@ -930,68 +2435,265 @@ function getValueByPath(context, path) {
   return current;
 }
 function setValueByPath(context, path, value) {
+  if (!path) {
+    return context;
+  }
   const result = { ...context };
   const parts = path.split(".");
   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.warn(
+        `setValueByPath: Cannot traverse path "${path}". Parent segment "${parts[i - 1] || "(root)"}" is not an object.`
+      );
+      return context;
     }
-    current = current[part];
-    if (typeof current !== "object") {
-      current = {};
+    const currentAsObject = current;
+    const nextPartValue = currentAsObject[part];
+    if (nextPartValue === void 0 || nextPartValue === null) {
+      currentAsObject[part] = {};
+    } else if (typeof nextPartValue !== "object") {
+      console.warn(
+        `setValueByPath: Cannot create nested path "${path}". Segment "${part}" is not an object.`
+      );
+      return context;
+    } else {
+      currentAsObject[part] = { ...nextPartValue };
     }
+    current = currentAsObject[part];
   }
   const lastPart = parts[parts.length - 1];
-  current[lastPart] = value;
+  if (typeof current === "object" && current !== null) {
+    current[lastPart] = value;
+  } else {
+    console.warn(
+      `setValueByPath: Could not set value for path "${path}". Final segment parent is not an object.`
+    );
+    return context;
+  }
   return result;
 }
-function processBinding(binding, context) {
+function processBinding(binding, context, itemData) {
   if (typeof binding === "string") {
-    return getValueByPath(context, binding);
+    const exactMatchArr = binding.match(/^{{(.*)}}$/);
+    const pathInsideExact = exactMatchArr ? exactMatchArr[1].trim() : null;
+    if (pathInsideExact !== null && !pathInsideExact.includes("{{") && !pathInsideExact.includes("}}")) {
+      const pathToResolve = pathInsideExact;
+      let resolvedValue = void 0;
+      console.log(
+        `[processBinding Debug] Processing EXACT template: "${binding}", Path: "${pathToResolve}", Has itemData: ${!!itemData}`
+      );
+      if (itemData) {
+        try {
+          console.log(
+            `[processBinding Debug] itemData content (EXACT):`,
+            JSON.parse(JSON.stringify(itemData))
+          );
+        } catch {
+        }
+      }
+      if ((pathToResolve.startsWith("item.") || pathToResolve.startsWith("row.")) && itemData) {
+        if (pathToResolve.startsWith("item.")) {
+          resolvedValue = getValueByPath(itemData, pathToResolve.substring(5));
+        } else {
+          resolvedValue = getValueByPath(itemData, pathToResolve.substring(4));
+        }
+      } else if (itemData && pathToResolve in itemData) {
+        resolvedValue = getValueByPath(itemData, pathToResolve);
+      }
+      if (resolvedValue === void 0) {
+        resolvedValue = getValueByPath(context, pathToResolve);
+      }
+      return resolvedValue;
+    } else if (binding.includes("{{") && binding.includes("}}")) {
+      console.log(
+        `[processBinding Debug] Processing EMBEDDED templates: "${binding}", Has itemData: ${!!itemData}`
+      );
+      if (itemData) {
+        try {
+          console.log(
+            `[processBinding Debug] itemData content (EMBEDDED):`,
+            JSON.parse(JSON.stringify(itemData))
+          );
+        } catch {
+        }
+      }
+      const resolvedString = binding.replaceAll(
+        /{{(.*?)}}/g,
+        // Non-greedy match inside braces
+        (match, path) => {
+          const trimmedPath = path.trim();
+          let resolvedValue = void 0;
+          if ((trimmedPath.startsWith("item.") || trimmedPath.startsWith("row.")) && itemData) {
+            if (trimmedPath.startsWith("item.")) {
+              resolvedValue = getValueByPath(
+                itemData,
+                trimmedPath.substring(5)
+              );
+            } else {
+              resolvedValue = getValueByPath(
+                itemData,
+                trimmedPath.substring(4)
+              );
+            }
+          } else if (itemData && trimmedPath in itemData) {
+            resolvedValue = getValueByPath(itemData, trimmedPath);
+          }
+          if (resolvedValue === void 0) {
+            resolvedValue = getValueByPath(context, trimmedPath);
+          }
+          return resolvedValue === null || resolvedValue === void 0 ? "" : String(resolvedValue);
+        }
+      );
+      return resolvedString;
+    } else {
+      const pathToResolve = binding;
+      let resolvedValue = void 0;
+      console.log(
+        `[processBinding Debug] Processing PATH string: "${pathToResolve}", Has itemData: ${!!itemData}`
+      );
+      if (itemData && !pathToResolve.includes(".") && pathToResolve in itemData) {
+        resolvedValue = getValueByPath(itemData, pathToResolve);
+      }
+      if (resolvedValue === void 0) {
+        resolvedValue = getValueByPath(context, pathToResolve);
+      }
+      return resolvedValue;
+    }
   }
   if (Array.isArray(binding)) {
-    return binding.map((item) => processBinding(item, context));
+    return binding.map((item) => processBinding(item, context, itemData));
   }
   if (binding !== null && typeof binding === "object") {
     const result = {};
     for (const [key, value] of Object.entries(binding)) {
-      result[key] = processBinding(value, context);
+      result[key] = processBinding(value, context, itemData);
     }
     return result;
   }
   return binding;
 }
-async function resolveBindings(node, context) {
-  await systemEvents.emit(
-    createSystemEvent("BINDING_RESOLUTION_START" /* BINDING_RESOLUTION_START */, { layout: node })
-  );
+async function resolveBindings(node, context, itemData) {
+  const effectiveContext = itemData ? { ...context, item: itemData } : context;
+  const currentTime = Date.now();
+  const cacheKey = createCacheKey(node.id, effectiveContext);
+  const cachedNode = bindingsCache.get(cacheKey);
+  const cachedTimestamp = nodeCacheTimestamps.get(cacheKey);
+  if (cachedNode && cachedTimestamp && currentTime - cachedTimestamp < CACHE_TTL2) {
+    return cachedNode;
+  }
+  if (!itemData) {
+    await systemEvents.emit(
+      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 ? JSON.parse(JSON.stringify(node.props)) : null,
+    events: node.events ? JSON.parse(JSON.stringify(node.events)) : null,
+    bindings: node.bindings ? JSON.parse(JSON.stringify(node.bindings)) : null,
+    children: null
+    // Initialize children to null
   };
+  const resolvedBindings = {};
   if (node.bindings) {
-    for (const [key, binding] of Object.entries(node.bindings)) {
-      const value = processBinding(binding, context);
-      if (value !== void 0) {
-        if (!result.props) {
+    for (const [key, bindingValue] of Object.entries(node.bindings)) {
+      const resolvedValue = processBinding(bindingValue, context, itemData);
+      resolvedBindings[key] = resolvedValue;
+      if (resolvedValue !== void 0) {
+        if (!result.props)
           result.props = {};
-        }
-        result.props[key] = value;
+        result.props[key] = resolvedValue;
       }
     }
   }
-  if (node.children) {
-    result.children = await Promise.all(node.children.map((child) => resolveBindings(child, context)));
+  result.bindings = null;
+  if (node.events) {
+    result.events = processBinding(
+      node.events,
+      context,
+      itemData
+    );
+  } else {
+    result.events = null;
+  }
+  const dataBindingValue = resolvedBindings["data"] ?? resolvedBindings["items"];
+  if ((node.node_type === "ListView" || node.node_type === "Table") && Array.isArray(dataBindingValue) && node.children && node.children.length > 0) {
+    const templateChild = node.children[0];
+    const mappedChildren = await Promise.all(
+      dataBindingValue.map(async (currentItemData, index) => {
+        try {
+          if (typeof currentItemData !== "object" || currentItemData === null) {
+            console.warn(
+              `List item at index ${index} for node ${node.id} is not an object:`,
+              currentItemData
+            );
+            return null;
+          }
+          const currentItemAsRecord = currentItemData;
+          const itemId = currentItemAsRecord.id;
+          const instanceId = `${templateChild.id}-${itemId || index}`;
+          const childNodeInstance = JSON.parse(
+            JSON.stringify(templateChild)
+          );
+          childNodeInstance.id = instanceId;
+          const resolvedChild = await resolveBindings(
+            childNodeInstance,
+            context,
+            currentItemAsRecord
+          );
+          if (!resolvedChild.props)
+            resolvedChild.props = {};
+          resolvedChild.props.key = itemId || `${node.id}-item-${index}`;
+          return resolvedChild;
+        } catch (error) {
+          console.error(
+            `[resolveBindings Error] Error processing item at index ${index} for node ${node.id}:`,
+            error,
+            "Item Data:",
+            currentItemData
+          );
+          return null;
+        }
+      })
+    );
+    result.children = mappedChildren.filter(
+      (child) => child !== null
+    );
+  } else if (node.children && node.children.length > 0) {
+    result.children = await Promise.all(
+      node.children.map((child) => resolveBindings(child, context, itemData))
+    );
+  } else {
+    result.children = [];
+  }
+  if (!itemData) {
+    await systemEvents.emit(
+      createSystemEvent("BINDING_RESOLUTION_COMPLETE" /* BINDING_RESOLUTION_COMPLETE */, {
+        originalLayout: node,
+        resolvedLayout: result
+      })
+    );
+  }
+  bindingsCache.set(cacheKey, result);
+  nodeCacheTimestamps.set(cacheKey, currentTime);
+  if (bindingsCache.size > MAX_CACHE_SIZE2) {
+    let oldestKey = null;
+    let oldestTimestamp = currentTime;
+    for (const [key, timestamp] of nodeCacheTimestamps.entries()) {
+      if (timestamp < oldestTimestamp) {
+        oldestTimestamp = timestamp;
+        oldestKey = key;
+      }
+    }
+    if (oldestKey) {
+      bindingsCache.delete(oldestKey);
+      nodeCacheTimestamps.delete(oldestKey);
+    }
   }
-  await systemEvents.emit(
-    createSystemEvent("BINDING_RESOLUTION_COMPLETE" /* BINDING_RESOLUTION_COMPLETE */, {
-      originalLayout: node,
-      resolvedLayout: result
-    })
-  );
   return result;
 }
 function executeAction(action, targetId, payload, context = {}, layoutTree) {
@@ -1027,7 +2729,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 +2762,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 +2808,45 @@ 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`;
+}
+function correctListBindingsRecursive(node, dataContext) {
+  const correctedNode = JSON.parse(JSON.stringify(node));
+  if ((correctedNode.node_type === "ListView" || correctedNode.node_type === "Table") && correctedNode.bindings?.data) {
+    const bindingPath = correctedNode.bindings.data;
+    if (typeof bindingPath === "string") {
+      const pathSegments = bindingPath.split(".");
+      const mainKey = pathSegments[0];
+      if (pathSegments.length === 1) {
+        const potentialDataContextEntry = dataContext[mainKey];
+        if (potentialDataContextEntry && typeof potentialDataContextEntry === "object" && potentialDataContextEntry !== null && "data" in potentialDataContextEntry && Array.isArray(potentialDataContextEntry.data)) {
+          correctedNode.bindings.data = `${mainKey}.data`;
+          console.log(
+            `[AutoUI Debug] Corrected list binding for node '${correctedNode.id}': from '${mainKey}' to '${mainKey}.data'`
+          );
+        }
+      }
+    }
+  }
+  if (correctedNode.children) {
+    correctedNode.children = correctedNode.children.map(
+      (child) => correctListBindingsRecursive(child, dataContext)
+    );
+  }
+  return correctedNode;
+}
 var AutoUI = ({
   schema,
   goal,
@@ -1115,17 +2856,23 @@ var AutoUI = ({
   eventHooks,
   systemEventHooks,
   debugMode = false,
-  mockMode = true,
-  databaseConfig,
+  mockMode = false,
   planningConfig,
   integration = {},
   scope = {},
-  enablePartialUpdates = false
+  enablePartialUpdates = false,
+  openaiApiKey
 }) => {
-  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 +2880,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 +2892,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);
       });
@@ -1181,7 +2933,8 @@ var AutoUI = ({
     planningConfig,
     router: void 0,
     dataContext,
-    enablePartialUpdates
+    enablePartialUpdates,
+    openaiApiKey
   });
   const eventManagerRef = useRef(new EventManager());
   useEffect(() => {
@@ -1189,95 +2942,153 @@ 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(() => {
-    if (state.layout) {
-      resolveBindings(state.layout, dataContext).then((resolved) => setResolvedLayout(resolved)).catch((err) => console.error("Error resolving bindings:", err));
+    },
+    [dataContext, handleEvent, onEvent, state.layout]
+  );
+  const [resolvedLayout, setResolvedLayout] = useState(
+    void 0
+  );
+  const [renderedNode, setRenderedNode] = useState(
+    null
+  );
+  const resolveLayoutBindings = useCallback(async () => {
+    if (state.layout && dataContext) {
+      console.log(
+        "[AutoUI Debug] DataContext before resolving bindings:",
+        JSON.stringify(dataContext, null, 2)
+      );
+      console.log(
+        "[AutoUI Debug] Raw layout before resolving (from planner):",
+        JSON.stringify(state.layout, null, 2)
+      );
+      const correctedLayout = correctListBindingsRecursive(
+        state.layout,
+        dataContext
+      );
+      console.log(
+        "[AutoUI Debug] Layout after binding correction (before resolving):",
+        JSON.stringify(correctedLayout, null, 2)
+      );
+      const resolved = await resolveBindings(correctedLayout, dataContext);
+      setResolvedLayout(resolved);
+      console.log(
+        "[AutoUI Debug] Resolved layout after bindings:",
+        JSON.stringify(resolved, null, 2)
+      );
     } 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 +3107,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 +3175,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 +3237,122 @@ 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 {
+    schema,
+    goal,
+    openaiApiKey,
+    userContext,
+    initialLayout,
+    mockMode: optionsMockMode
+  } = options;
+  const [layout, setLayout] = useState(
+    initialLayout || void 0
+  );
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const router = options.router || createDefaultRouter();
+  const dataContext = {};
+  const initialFetchAttempted = useRef(false);
+  const mockMode = optionsMockMode || !openaiApiKey;
+  const generateInitialLayout = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const plannerInput2 = {
+        schema,
+        goal,
+        userContext: userContext || null,
+        history: null
+      };
+      let generatedLayout;
+      if (mockMode) {
+        console.warn(
+          "Using mock planner in usePlanner hook (mockMode enabled or API key missing)."
+        );
+        generatedLayout = mockPlanner(plannerInput2);
+      } else {
+        generatedLayout = await callPlannerLLM(
+          plannerInput2,
+          openaiApiKey,
+          void 0
+        );
+      }
+      setLayout(generatedLayout);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error(String(err)));
+    } finally {
+      setLoading(false);
+    }
+  }, [schema, goal, userContext, openaiApiKey, mockMode]);
+  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,
+          openaiApiKey
+        );
+        setLayout(updatedLayout);
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error(String(err)));
+      } finally {
+        setLoading(false);
+      }
+    },
+    [layout, router, schema, dataContext, goal, userContext, openaiApiKey]
+  );
+  useEffect(() => {
+    if (options.initialLayout === void 0 && layout === void 0 && !initialFetchAttempted.current) {
+      initialFetchAttempted.current = true;
+      generateInitialLayout();
+    }
+  }, [options.initialLayout, layout, generateInitialLayout]);
+  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