autoui-react 0.0.4-alpha → 0.0.5-alpha

package/dist/index.mjs

@@ -7,6 +7,13 @@ import React, { useState, useEffect, useRef, useCallback, useReducer } from 'rea
 import { createOpenAI } from '@ai-sdk/openai';
 import { generateObject } from 'ai';
 import { z } from 'zod';
+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;
@@ -293,6 +300,72 @@ var initialState = {
 };
 
 // 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";
@@ -327,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: userContext || null
-        },
-        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];
@@ -352,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) {
@@ -396,16 +490,24 @@ var ActionRouter = class {
       ...additionalContext
       // Spread additionalContext afterwards (can override userContext keys)
     };
-    const prompt = this.processTemplate(
+    console.log("[ActionRouter Debug] Template Values:", templateValues);
+    const finalPrompt = buildPrompt(
+      plannerInput2,
       matchingRoute.promptTemplate,
+      // 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
@@ -423,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 */,
@@ -454,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",
@@ -475,12 +604,16 @@ var openAISimplifiedValue = z.string().nullable();
 var openAIRecordSimplifiedNullable = z.record(openAISimplifiedValue).nullable();
 var openAIEventPayloadSimplifiedNullable = z.record(openAISimplifiedValue).nullable();
 var openAIBaseNode = z.object({
-  id: z.string(),
-  node_type: z.string(),
-  props: openAIRecordSimplifiedNullable,
-  // Nullable record
-  bindings: openAIRecordSimplifiedNullable,
-  // Nullable record
+  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({
@@ -628,67 +761,22 @@ function createSystemEvent(type, data) {
 
 // src/env.ts
 var rawApiKeyFromEnv = process.env.VITE_OPENAI_API_KEY;
-var defaultApiKeyLiteral = "sk-proj-literal-default-for-debug-in-env-ts";
 var env = {
-  MOCK_PLANNER: process.env.VITE_MOCK_PLANNER || "1",
+  MOCK_PLANNER: process.env.VITE_MOCK_PLANNER || "0",
   // Simplified MOCK_PLANNER assignment
-  NODE_ENV: process.env.VITE_NODE_ENV || "development",
+  NODE_ENV: process.env.VITE_NODE_ENV || "production",
   // Simplified NODE_ENV assignment
-  OPENAI_API_KEY: rawApiKeyFromEnv === void 0 ? defaultApiKeyLiteral : rawApiKeyFromEnv
+  OPENAI_API_KEY: rawApiKeyFromEnv || ""
 };
 
 // src/core/planner.ts
-var strictOpenAI = createOpenAI({
-  compatibility: "strict"
-  // Required for structured outputs with OpenAI API
-});
-function buildPrompt(input, customPrompt) {
-  const { schema, goal, history, userContext } = input;
-  const schemaInfo = Object.entries(schema).map(([tableName, tableSchema]) => {
-    return `Table: ${tableName}
-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)}` : "";
-  if (customPrompt) {
-    return customPrompt;
-  }
-  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;
-  node_type: string;
-  props?: Record<string, unknown>;
-  bindings?: Record<string, unknown>;
-  events?: Record<string, { action: string; target: string; payload?: Record<string, unknown>; }>;
-  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 - make sure to always include both action and target properties
-
-Respond ONLY with the JSON UI specification and no other text.
-  `;
-}
 function mockPlanner(input, targetNodeId, customPrompt) {
   if (customPrompt) {
     console.log("mockPlanner received customPrompt:", customPrompt);
@@ -794,7 +882,7 @@ function mockPlanner(input, targetNodeId, customPrompt) {
                   selectable: "true"
                 },
                 bindings: {
-                  items: JSON.stringify(taskData),
+                  data: "tasks.data",
                   fields: JSON.stringify([
                     { key: "id", label: "ID" },
                     { key: "title", label: "Title" },
@@ -847,24 +935,35 @@ function mockPlanner(input, targetNodeId, customPrompt) {
   };
   return mockNode;
 }
-async function callPlannerLLM(input, routeResolution) {
+async function callPlannerLLM(input, openaiApiKey, routeResolution) {
   await systemEvents.emit(
     createSystemEvent("PLAN_START" /* PLAN_START */, { plannerInput: input })
   );
-  if (env.MOCK_PLANNER === "1" || !env.OPENAI_API_KEY) {
+  if (env.MOCK_PLANNER === "1") {
     console.warn(
-      "Using mock planner because MOCK_PLANNER is enabled or OPENAI_API_KEY is not available"
+      `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 || buildPrompt(input);
+  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: strictOpenAI("gpt-4o", { structuredOutputs: true }),
+      model: getOpenAIClient(openaiApiKey)("gpt-4o", {
+        structuredOutputs: true
+      }),
       schema: openAIUISpec,
       messages: [{ role: "user", content: prompt }],
       temperature: 0.2,
@@ -887,7 +986,7 @@ async function callPlannerLLM(input, routeResolution) {
     throw error;
   }
 }
-async function processEvent(event, router, schema, layout, dataContext, goal, userContext) {
+async function processEvent(event, router, schema, layout, dataContext, goal, userContext, openaiApiKey) {
   const routeResolution = await router.resolveRoute(
     event,
     schema,
@@ -907,7 +1006,11 @@ async function processEvent(event, router, schema, layout, dataContext, goal, us
     return layout;
   }
   const plannerInputForLLM = routeResolution.plannerInput;
-  const newLayout = await callPlannerLLM(plannerInputForLLM, routeResolution);
+  const newLayout = await callPlannerLLM(
+    plannerInputForLLM,
+    openaiApiKey || "",
+    routeResolution
+  );
   return newLayout;
 }
 
@@ -915,6 +1018,7 @@ async function processEvent(event, router, schema, layout, dataContext, goal, us
 function useUIStateEngine({
   schema,
   goal,
+  openaiApiKey,
   userContext,
   mockMode = false,
   planningConfig,
@@ -961,7 +1065,11 @@ function useUIStateEngine({
                 route.prompt
               );
             } else {
-              resolvedNode = await callPlannerLLM(route.plannerInput, route);
+              resolvedNode = await callPlannerLLM(
+                route.plannerInput,
+                openaiApiKey || "",
+                route
+              );
             }
           } else {
             const input = {
@@ -973,7 +1081,11 @@ function useUIStateEngine({
             if (mockMode) {
               resolvedNode = mockPlanner(input);
             } else {
-              resolvedNode = await callPlannerLLM(input);
+              resolvedNode = await callPlannerLLM(
+                input,
+                openaiApiKey || "",
+                void 0
+              );
             }
           }
         } else {
@@ -987,7 +1099,11 @@ function useUIStateEngine({
           if (mockMode) {
             resolvedNode = mockPlanner(input);
           } else {
-            resolvedNode = await callPlannerLLM(input);
+            resolvedNode = await callPlannerLLM(
+              input,
+              openaiApiKey || "",
+              void 0
+            );
           }
         }
         switch (actionTypeForDispatch) {
@@ -1033,6 +1149,7 @@ function useUIStateEngine({
       router,
       mockMode,
       dataContext,
+      openaiApiKey,
       enablePartialUpdates,
       dispatch
       // Add dispatch
@@ -1046,13 +1163,48 @@ function useUIStateEngine({
           schema,
           goal,
           history: [],
+          // Initial history is empty
           userContext
         };
         let node;
         if (mockMode) {
           node = mockPlanner(input);
         } else {
-          node = await callPlannerLLM(input);
+          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) {
@@ -1069,34 +1221,456 @@ function useUIStateEngine({
       }
     };
     initialFetch();
-  }, [goal, schema, userContext, mockMode, dispatch]);
+  }, [goal, schema, userContext, mockMode, dispatch, openaiApiKey]);
   return {
     state,
     dispatch,
     handleEvent
   };
 }
-z.enum([
-  // Layout components
-  "Container",
-  "Card",
-  "Header",
-  // Input components
-  "Button",
-  "Input",
-  "Select",
-  "Textarea",
-  "Checkbox",
-  "RadioGroup",
-  // Data display components
-  "ListView",
-  "Detail",
-  "Tabs",
-  "Dialog",
-  // Typography
-  "Heading",
-  "Text"
-]);
+
+// 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" }),
@@ -1125,36 +1699,10 @@ var Button = ({ onClick, children, variant = "default" }) => /* @__PURE__ */ jsx
   "button",
   {
     className: `px-4 py-2 rounded-md font-medium transition-colors ${variant === "default" ? "bg-blue-600 text-white hover:bg-blue-700" : variant === "outline" ? "border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800" : "bg-red-600 text-white hover:bg-red-700"}`,
-    onClick,
+    onClick: () => onClick?.(),
     children
   }
 );
-var Table = ({ items = [], fields = [], onSelect, selectable }) => /* @__PURE__ */ jsx("div", { className: "w-full border border-gray-300 dark:border-gray-700 rounded-lg overflow-hidden shadow-sm", children: /* @__PURE__ */ jsxs("table", { className: "w-full", children: [
-  /* @__PURE__ */ jsx("thead", { className: "bg-gray-100 dark:bg-gray-800 border-b border-gray-300 dark:border-gray-700", children: /* @__PURE__ */ jsx("tr", { children: fields.map((field) => /* @__PURE__ */ jsx(
-    "th",
-    {
-      className: "px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider",
-      children: field.label
-    },
-    field.key
-  )) }) }),
-  /* @__PURE__ */ jsx("tbody", { className: "bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700", children: items.map((item, index) => /* @__PURE__ */ jsx(
-    "tr",
-    {
-      onClick: () => selectable && onSelect && onSelect(item),
-      className: selectable ? "cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800" : "",
-      children: fields.map((field) => /* @__PURE__ */ jsx(
-        "td",
-        {
-          className: "px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-300",
-          children: item[field.key] ?? ""
-        },
-        field.key
-      ))
-    },
-    index
-  )) })
-] }) });
 var Detail = ({ data, fields = [], title, visible = true, onBack }) => {
   if (!visible)
     return null;
@@ -1210,7 +1758,6 @@ var getSafeProp = (props, key, validator, defaultValue) => {
 var isObject = (value) => typeof value === "object" && value !== null;
 var isString = (value) => typeof value === "string";
 var isBoolean = (value) => typeof value === "boolean";
-var isCSSProperties = (value) => isObject(value);
 var isButtonVariant = (value) => isString(value) && ["default", "outline", "destructive"].includes(value);
 var getSafeBinding = (bindings, key, validator, defaultValue) => {
   if (bindings && typeof bindings === "object" && key in bindings) {
@@ -1221,12 +1768,20 @@ var getSafeBinding = (bindings, key, validator, defaultValue) => {
   }
   return defaultValue;
 };
-var isArrayOf = (itemValidator) => (arr) => Array.isArray(arr) && arr.every(itemValidator);
 var isReactNode = (value) => {
   return typeof value === "string" || typeof value === "number" || typeof value === "boolean" || value === null || typeof value === "undefined" || typeof value === "object" && value !== null && "$$typeof" in value;
 };
 var isRecordWithReactNodeValues = (value) => isObject(value) && Object.values(value).every(isReactNode);
-var isFieldObject = (item) => isObject(item) && isString(item.key) && isString(item.label);
+var 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];
@@ -1246,14 +1801,36 @@ var createEventHandler = (node, eventName, uiEventType2, processEvent2) => {
   };
 };
 var adapterMap = {
-  Container: (node, processEvent2) => /* @__PURE__ */ jsx(
-    Container,
-    {
-      style: getSafeProp(node.props, "style", isCSSProperties, {}),
-      className: getSafeProp(node.props, "className", isString, ""),
-      children: node.children?.map((child) => renderNode(child, processEvent2))
-    }
-  ),
+  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,
     {
@@ -1270,37 +1847,28 @@ var adapterMap = {
     }
   ),
   ListView: (node, processEvent2) => {
-    const items = getSafeBinding(
-      node.bindings,
-      "items",
-      isArrayOf(isRecordWithReactNodeValues),
-      []
+    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 fields = getSafeBinding(
-      node.bindings,
-      "fields",
-      isArrayOf(isFieldObject),
-      []
+    const children = node.children?.map(
+      (child) => React.cloneElement(renderNode(child, processEvent2), { key: child.id })
     );
-    const selectable = getSafeProp(node.props, "selectable", isBoolean, false);
     return /* @__PURE__ */ jsx(
-      Table,
+      "div",
       {
-        items,
-        fields,
-        selectable,
-        onSelect: (item) => {
-          const handler = createEventHandler(
-            node,
-            "onSelect",
-            "CLICK",
-            processEvent2
-          );
-          if (handler) {
-            handler({ selectedItem: item });
-          }
-        }
-      }
+        className: cn(
+          "autoui-listview-container space-y-2",
+          className
+        ),
+        style,
+        ...restProps,
+        "data-id": node.id,
+        children
+      },
+      key
     );
   },
   Detail: (node, processEvent2) => {
@@ -1328,6 +1896,449 @@ var adapterMap = {
         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, processEvent2) {
@@ -1424,99 +2435,261 @@ function getValueByPath(context, path) {
   return current;
 }
 function setValueByPath(context, path, value) {
+  if (!path) {
+    return context;
+  }
   const result = { ...context };
   const parts = path.split(".");
-  if (parts.length === 0)
-    return result;
   let current = result;
   for (let i = 0; i < parts.length - 1; i++) {
     const part = parts[i];
     if (typeof current !== "object" || current === null) {
-      console.error("setValueByPath: Cannot create path in a non-object.");
+      console.warn(
+        `setValueByPath: Cannot traverse path "${path}". Parent segment "${parts[i - 1] || "(root)"}" is not an object.`
+      );
       return context;
     }
     const currentAsObject = current;
-    if (!(part in currentAsObject) || typeof currentAsObject[part] !== "object" || currentAsObject[part] === null) {
+    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];
   if (typeof current === "object" && current !== null) {
     current[lastPart] = value;
-  } else if (parts.length === 1 && typeof result === "object" && result !== null) {
-    result[lastPart] = value;
   } else {
     console.warn(
-      `setValueByPath: Could not set value for path "${path}". Final segment location is not an object.`
+      `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) {
+async function resolveBindings(node, context, itemData) {
+  const effectiveContext = itemData ? { ...context, item: itemData } : context;
   const currentTime = Date.now();
-  const cacheKey = createCacheKey(node.id, context);
+  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;
   }
-  await systemEvents.emit(
-    createSystemEvent("BINDING_RESOLUTION_START" /* BINDING_RESOLUTION_START */, {
-      layout: node
-    })
-  );
+  if (!itemData) {
+    await systemEvents.emit(
+      createSystemEvent("BINDING_RESOLUTION_START" /* BINDING_RESOLUTION_START */, {
+        layout: node
+      })
+    );
+  }
   const result = {
     ...node,
-    props: node.props ? { ...node.props } : null,
-    events: node.events ? { ...node.events } : null
+    props: node.props ? 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 && typeof value === "string") {
-        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.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))
+      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
+      })
     );
   }
-  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) {
-    const entries = [...nodeCacheTimestamps.entries()];
-    if (entries.length > 0) {
-      entries.sort((a, b) => a[1] - b[1]);
-      const oldestKey = entries[0][0];
+    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);
     }
@@ -1649,6 +2822,31 @@ 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,
@@ -1658,11 +2856,12 @@ var AutoUI = ({
   eventHooks,
   systemEventHooks,
   debugMode = false,
-  mockMode = true,
+  mockMode = false,
   planningConfig,
   integration = {},
   scope = {},
-  enablePartialUpdates = false
+  enablePartialUpdates = false,
+  openaiApiKey
 }) => {
   const [schemaAdapterInstance] = useState(null);
   const [dataContext, setDataContext] = useState({});
@@ -1734,7 +2933,8 @@ var AutoUI = ({
     planningConfig,
     router: void 0,
     dataContext,
-    enablePartialUpdates
+    enablePartialUpdates,
+    openaiApiKey
   });
   const eventManagerRef = useRef(new EventManager());
   useEffect(() => {
@@ -1834,13 +3034,29 @@ var AutoUI = ({
     null
   );
   const resolveLayoutBindings = useCallback(async () => {
-    if (state.layout) {
-      try {
-        const resolved = await resolveBindings(state.layout, dataContext);
-        setResolvedLayout(resolved);
-      } catch (err) {
-        console.error("Error resolving bindings:", err);
-      }
+    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);
     }
@@ -2047,12 +3263,23 @@ var generateUIComponent = async (prompt) => {
   return `<div>Generated UI Component for: ${prompt}</div>`;
 };
 function usePlanner(options) {
-  const { goal, schema, userContext, router: customRouter } = options;
-  const [layout, setLayout] = useState(void 0);
+  const {
+    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 = customRouter || createDefaultRouter();
+  const router = options.router || createDefaultRouter();
   const dataContext = {};
+  const initialFetchAttempted = useRef(false);
+  const mockMode = optionsMockMode || !openaiApiKey;
   const generateInitialLayout = useCallback(async () => {
     setLoading(true);
     setError(null);
@@ -2063,14 +3290,26 @@ function usePlanner(options) {
         userContext: userContext || null,
         history: null
       };
-      const generatedLayout = await callPlannerLLM(plannerInput2);
+      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]);
+  }, [schema, goal, userContext, openaiApiKey, mockMode]);
   const handleEvent = useCallback(
     async (event) => {
       if (!layout) {
@@ -2087,7 +3326,8 @@ function usePlanner(options) {
           layout,
           dataContext,
           goal,
-          userContext
+          userContext,
+          openaiApiKey
         );
         setLayout(updatedLayout);
       } catch (err) {
@@ -2096,8 +3336,14 @@ function usePlanner(options) {
         setLoading(false);
       }
     },
-    [layout, router, schema, dataContext, goal, userContext]
+    [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,