autoui-react 0.0.5-alpha → 0.1.0

package/dist/index.mjs

@@ -1,112 +1,24 @@
-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 { useState, useEffect, useRef, useCallback, useReducer } from 'react';
 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;
-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"
-        }
-      }
-    );
-  }
-});
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/core/reducer.ts
 function cloneNode(node) {
   return {
     ...node,
-    props: node.props ? { ...node.props } : null,
-    bindings: node.bindings ? { ...node.bindings } : null,
-    events: node.events ? { ...node.events } : null,
-    children: node.children ? node.children.map((child) => cloneNode(child)) : null
+    props: node.props ? { ...node.props } : void 0,
+    bindings: node.bindings ? { ...node.bindings } : void 0,
+    events: node.events ? { ...node.events } : void 0,
+    children: node.children?.map((child) => cloneNode(child))
   };
 }
 function findNodeById(tree, nodeId) {
-  if (!tree)
-    return void 0;
-  if (tree.id === nodeId)
-    return tree;
+  if (!tree) return void 0;
+  if (tree.id === nodeId) return tree;
   if (tree.children) {
     for (const child of tree.children) {
       const found = findNodeById(child, nodeId);
-      if (found)
-        return found;
+      if (found) return found;
     }
   }
   return void 0;
@@ -121,15 +33,13 @@ function updateNodeById(tree, nodeId, updater) {
     if (node.children) {
       for (const child of node.children) {
         const path2 = findPath(child, id, newPath);
-        if (path2)
-          return path2;
+        if (path2) return path2;
       }
     }
     return null;
   }
   const path = findPath(result, nodeId);
-  if (!path)
-    return result;
+  if (!path) return result;
   const nodeToUpdate = path[path.length - 1];
   const updatedNode = updater(nodeToUpdate);
   if (path.length === 1) {
@@ -138,14 +48,18 @@ function updateNodeById(tree, nodeId, updater) {
   const parent = path[path.length - 2];
   const updatedParent = {
     ...parent,
-    children: parent.children ? parent.children.map(
+    children: parent.children?.map(
       (child) => child.id === nodeId ? updatedNode : child
-    ) : null
+    )
   };
   if (path.length === 2) {
     return updatedParent;
   }
-  return updateNodeById(result, parent.id, () => updatedParent);
+  return updateNodeById(
+    result,
+    parent.id,
+    () => updatedParent
+  );
 }
 function replaceNodeById(tree, nodeId, newNode) {
   return updateNodeById(tree, nodeId, () => newNode);
@@ -172,8 +86,7 @@ function removeNodeById(tree, nodeId) {
       }
       for (const child of node.children) {
         const parent2 = findParent(child, id);
-        if (parent2)
-          return parent2;
+        if (parent2) return parent2;
       }
     }
     return null;
@@ -183,11 +96,10 @@ function removeNodeById(tree, nodeId) {
     throw new Error("Cannot remove root node");
   }
   const parent = findParent(result, nodeId);
-  if (!parent)
-    return result;
+  if (!parent) return result;
   return updateNodeById(result, parent.id, (node) => ({
     ...node,
-    children: node.children ? node.children.filter((child) => child.id !== nodeId) : null
+    children: node.children?.filter((child) => child.id !== nodeId)
   }));
 }
 function uiReducer(state, action) {
@@ -204,7 +116,7 @@ function uiReducer(state, action) {
         ...state,
         layout: action.node,
         loading: false,
-        error: null
+        error: void 0
       };
     }
     case "PARTIAL_UPDATE": {
@@ -213,7 +125,7 @@ function uiReducer(state, action) {
           ...state,
           layout: action.node,
           loading: false,
-          error: null
+          error: void 0
         };
       }
       if (action.nodeId === "root" || action.nodeId === state.layout.id) {
@@ -221,23 +133,19 @@ function uiReducer(state, action) {
           ...state,
           layout: action.node,
           loading: false,
-          error: null
+          error: void 0
         };
       }
       return {
         ...state,
         layout: replaceNodeById(state.layout, action.nodeId, action.node),
         loading: false,
-        error: null
+        error: void 0
       };
     }
     case "ADD_NODE": {
       if (!state.layout) {
-        return {
-          ...state,
-          error: "Cannot add node: Layout is empty.",
-          loading: false
-        };
+        return state;
       }
       return {
         ...state,
@@ -245,41 +153,21 @@ function uiReducer(state, action) {
           state.layout,
           action.parentId,
           action.node,
-          action.index === null ? void 0 : action.index
+          action.index
         ),
         loading: false,
-        error: null
+        error: void 0
       };
     }
     case "REMOVE_NODE": {
       if (!state.layout) {
-        return {
-          ...state,
-          error: "Cannot remove node: Layout is empty.",
-          loading: false
-        };
-      }
-      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
-        };
+        return state;
       }
-    }
-    case "ERROR": {
       return {
         ...state,
-        error: action.message,
-        loading: false
+        layout: removeNodeById(state.layout, action.nodeId),
+        loading: false,
+        error: void 0
       };
     }
     case "LOADING": {
@@ -288,84 +176,23 @@ function uiReducer(state, action) {
         loading: action.isLoading
       };
     }
+    case "ERROR": {
+      return {
+        ...state,
+        error: action.message,
+        loading: false
+      };
+    }
     default:
       return state;
   }
 }
 var initialState = {
-  layout: null,
-  loading: false,
-  history: [],
-  error: null
+  loading: true,
+  history: []
 };
 
 // src/core/action-router.ts
-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";
@@ -400,39 +227,19 @@ 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) {
-      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 = {
+      return {
         actionType: "FULL_REFRESH" /* FULL_REFRESH */,
         targetNodeId: layout?.id || "root",
-        plannerInput: defaultPlannerInput,
-        prompt: defaultPrompt
+        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}`
       };
-      console.log(
-        "[ActionRouter Debug] Default Resolution:",
-        defaultResolution
-      );
-      return defaultResolution;
     }
     const sourceNode = layout ? findNodeById(layout, event.nodeId) : void 0;
     const nodeConfig = sourceNode?.events?.[event.type];
@@ -445,7 +252,6 @@ 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) {
@@ -479,35 +285,23 @@ var ActionRouter = class {
         ...additionalContext
       }
     };
-    const templateValues = {
-      goal,
-      eventType: event.type,
-      nodeId: event.nodeId,
-      targetNodeId,
-      actionType: matchingRoute.actionType,
-      ...userContext || {},
-      // Spread the original userContext (passed to resolveRoute)
-      ...additionalContext
-      // Spread additionalContext afterwards (can override userContext keys)
-    };
-    console.log("[ActionRouter Debug] Template Values:", templateValues);
-    const finalPrompt = buildPrompt(
-      plannerInput2,
+    const prompt = this.processTemplate(
       matchingRoute.promptTemplate,
-      // Pass template if it exists (can be undefined)
-      templateValues
-      // Pass templateValues (used only if promptTemplate exists)
+      {
+        goal,
+        eventType: event.type,
+        nodeId: event.nodeId,
+        targetNodeId,
+        actionType: matchingRoute.actionType,
+        ...additionalContext
+      }
     );
-    console.log("[ActionRouter Debug] Generated Prompt:", finalPrompt);
-    const finalResolution = {
+    return {
       actionType: matchingRoute.actionType,
       targetNodeId,
       plannerInput: plannerInput2,
-      prompt: finalPrompt
-      // Use the generated prompt
+      prompt
     };
-    console.log("[ActionRouter Debug] Final Resolution:", finalResolution);
-    return finalResolution;
   }
   /**
    * Process a prompt template with variables
@@ -525,11 +319,8 @@ function createDefaultRouter() {
   const router = new ActionRouter();
   router.registerRoute("CLICK", {
     actionType: "FULL_REFRESH" /* FULL_REFRESH */,
-    targetNodeId: "root"
-  });
-  router.registerRoute("INIT", {
-    actionType: "FULL_REFRESH" /* FULL_REFRESH */,
-    targetNodeId: "root"
+    targetNodeId: "root",
+    promptTemplate: 'Generate a new UI for the goal: "${goal}". The user just clicked on node ${nodeId}'
   });
   router.registerRoute("CLICK", {
     actionType: "SHOW_DETAIL" /* SHOW_DETAIL */,
@@ -559,31 +350,7 @@ 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",
@@ -595,62 +362,27 @@ var uiEventType = z.enum([
 var uiEvent = z.object({
   type: uiEventType,
   nodeId: z.string(),
-  timestamp: z.number().nullable(),
-  payload: z.record(z.unknown()).nullable()
-});
-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.
+  timestamp: z.number().optional(),
+  payload: z.record(z.any()).optional()
 });
-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({
+z.enum([
+  "AI_RESPONSE",
+  "ERROR"
+]);
+var uiSpecNode = z.lazy(() => z.object({
   id: z.string(),
-  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()
-});
+  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()
+}));
 z.discriminatedUnion("type", [
   z.object({
     type: z.literal("UI_EVENT"),
@@ -669,7 +401,7 @@ z.discriminatedUnion("type", [
     type: z.literal("ADD_NODE"),
     parentId: z.string(),
     node: uiSpecNode,
-    index: z.number().nullable()
+    index: z.number().optional()
   }),
   z.object({
     type: z.literal("REMOVE_NODE"),
@@ -685,16 +417,16 @@ z.discriminatedUnion("type", [
   })
 ]);
 z.object({
-  layout: uiSpecNode.nullable(),
+  layout: uiSpecNode.optional(),
   loading: z.boolean(),
   history: z.array(uiEvent),
-  error: z.string().nullable()
+  error: z.string().optional()
 });
 z.object({
   schema: z.record(z.unknown()),
   goal: z.string(),
-  history: z.array(uiEvent).nullable(),
-  userContext: z.record(z.unknown()).nullable().optional()
+  history: z.array(uiEvent).optional(),
+  userContext: z.record(z.unknown()).optional()
 });
 
 // src/core/system-events.ts
@@ -720,7 +452,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
@@ -740,7 +472,7 @@ var SystemEventManager = class {
   }
   /**
    * Emit a system event to all registered listeners
-   *
+   * 
    * @param event - The system event to emit
    */
   async emit(event) {
@@ -760,917 +492,257 @@ function createSystemEvent(type, data) {
 }
 
 // src/env.ts
-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 || ""
-};
+({
+  MOCK_PLANNER: import.meta.env?.VITE_MOCK_PLANNER || "1",
+  NODE_ENV: import.meta.env?.MODE || "development"
+  // Add other environment variables as needed
+});
 
 // src/core/planner.ts
-var getOpenAIClient = (apiKey) => {
-  return createOpenAI({
-    apiKey,
-    // Use the provided key directly
-    compatibility: "strict"
-  });
+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[];
 };
+
+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",
-    node_type: "Container",
-    props: {
-      className: "p-4 space-y-6"
-    },
-    bindings: null,
-    events: null,
+    type: "Container",
+    props: { title: "Mock UI" },
     children: [
       {
-        id: "header-1",
-        node_type: "Header",
-        props: {
-          title: "Task Management Dashboard",
-          className: "mb-4"
-        },
-        bindings: null,
-        events: null,
-        children: null
-      },
-      {
-        id: "main-content",
-        node_type: "Container",
-        props: {
-          className: "grid grid-cols-1 gap-6 md:grid-cols-3"
-        },
-        bindings: null,
-        events: null,
-        children: [
-          {
-            id: "tasks-container",
-            node_type: "Container",
-            props: {
-              className: "md:col-span-2"
-            },
-            bindings: null,
-            events: null,
-            children: [
-              {
-                id: "list-heading",
-                node_type: "Container",
-                props: {
-                  className: "flex justify-between items-center mb-4"
-                },
-                bindings: null,
-                events: null,
-                children: [
-                  {
-                    id: "list-title",
-                    node_type: "Header",
-                    props: {
-                      title: "Tasks",
-                      className: "border-none p-0 m-0"
-                    },
-                    bindings: null,
-                    events: null,
-                    children: null
-                  },
-                  {
-                    id: "add-task-button",
-                    node_type: "Button",
-                    props: {
-                      label: "Add Task",
-                      variant: "default"
-                    },
-                    bindings: null,
-                    events: {
-                      onClick: {
-                        action: "ADD_TASK",
-                        target: "tasks-container",
-                        payload: {}
-                      }
-                    },
-                    children: null
-                  }
-                ]
-              },
-              {
-                id: "task-list",
-                node_type: "ListView",
-                props: {
-                  selectable: "true"
-                },
-                bindings: {
-                  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
-          }
-        ]
+        id: "text-1",
+        type: "Text",
+        props: { text: "This is a mock UI for testing" }
       }
     ]
   };
   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 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 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
-            );
-          }
-        }
-        switch (actionTypeForDispatch) {
-          case "UPDATE_NODE" /* UPDATE_NODE */:
-          case "SHOW_DETAIL" /* SHOW_DETAIL */:
-          case "HIDE_DETAIL" /* HIDE_DETAIL */:
-          case "TOGGLE_STATE" /* TOGGLE_STATE */:
-          case "ADD_DROPDOWN" /* ADD_DROPDOWN */:
-          case "UPDATE_FORM" /* UPDATE_FORM */:
-          case "NAVIGATE" /* NAVIGATE */:
-            dispatch({
-              type: "PARTIAL_UPDATE",
-              nodeId: targetNodeIdForDispatch,
-              node: resolvedNode
-            });
-            break;
-          case "FULL_REFRESH" /* FULL_REFRESH */:
-          default:
-            dispatch({ type: "AI_RESPONSE", node: resolvedNode });
-            break;
-        }
-      } catch (e) {
-        const errorMessage = e instanceof Error ? e.message : String(e);
-        dispatch({ type: "ERROR", message: errorMessage });
+  const { append, data, isLoading, error, stop } = useChat();
+  const handleEvent = useCallback((event) => {
+    dispatch({ type: "UI_EVENT", event });
+    if (enablePartialUpdates) {
+      const route = router.resolveRoute(
+        event,
+        schema,
+        state.layout,
+        dataContext,
+        goal,
+        userContext
+      );
+      if (route) {
+        console.log("Resolved route:", route);
         systemEvents.emit(
-          createSystemEvent("PLAN_ERROR" /* PLAN_ERROR */, {
-            error: e instanceof Error ? e : new Error(String(e))
+          createSystemEvent("PLAN_START" /* PLAN_START */, {
+            plannerInput: route.plannerInput
           })
         );
-      } finally {
-        dispatch({ type: "LOADING", isLoading: false });
+        if (mockMode) {
+          const node = mockPlanner(route.plannerInput, route.targetNodeId, route.prompt);
+          switch (route.actionType) {
+            case "FULL_REFRESH" /* FULL_REFRESH */:
+              dispatch({ type: "AI_RESPONSE", node });
+              break;
+            case "UPDATE_NODE" /* UPDATE_NODE */:
+            case "SHOW_DETAIL" /* SHOW_DETAIL */:
+            case "HIDE_DETAIL" /* HIDE_DETAIL */:
+            case "TOGGLE_STATE" /* TOGGLE_STATE */:
+            case "ADD_DROPDOWN" /* ADD_DROPDOWN */:
+            case "UPDATE_FORM" /* UPDATE_FORM */:
+            case "NAVIGATE" /* NAVIGATE */:
+              dispatch({
+                type: "PARTIAL_UPDATE",
+                nodeId: route.targetNodeId,
+                node
+              });
+              break;
+          }
+        } else {
+          const prompt = route.prompt;
+          systemEvents.emit(
+            createSystemEvent("PLAN_PROMPT_CREATED" /* PLAN_PROMPT_CREATED */, { prompt })
+          );
+          append({
+            content: prompt,
+            role: "user"
+          });
+          sessionStorage.setItem("currentRoute", JSON.stringify({
+            actionType: route.actionType,
+            targetNodeId: route.targetNodeId
+          }));
+        }
+        return;
       }
-    },
-    [
-      // append, // REMOVE
-      goal,
+    }
+    const input = {
       schema,
-      state.history,
-      // Keep state.history if input preparation needs it
-      state.layout,
-      // stop, // REMOVE
-      userContext,
-      router,
-      mockMode,
-      dataContext,
-      openaiApiKey,
-      enablePartialUpdates,
-      dispatch
-      // Add dispatch
-    ]
-  );
+      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]);
   useEffect(() => {
-    const initialFetch = async () => {
-      dispatch({ type: "LOADING", isLoading: true });
+    {
       try {
-        const input = {
-          schema,
-          goal,
-          history: [],
-          // Initial history is empty
-          userContext
-        };
-        let node;
-        if (mockMode) {
-          node = mockPlanner(input);
-        } else {
-          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_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 });
           }
-          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
-          );
+        } else {
+          dispatch({ type: "AI_RESPONSE", node: validatedNode });
         }
-        dispatch({ type: "AI_RESPONSE", node });
-      } catch (e) {
-        const errorMessage = e instanceof Error ? e.message : String(e);
-        dispatch({ type: "ERROR", message: errorMessage });
         systemEvents.emit(
-          // Also emit system event for initial load error
+          createSystemEvent("PLAN_COMPLETE" /* PLAN_COMPLETE */, {
+            layout: validatedNode,
+            executionTimeMs: 0
+            // Not available here
+          })
+        );
+      } catch (parseError) {
+        console.error("Failed to parse LLM response:", parseError);
+        dispatch({
+          type: "ERROR",
+          message: "Failed to parse LLM response"
+        });
+        systemEvents.emit(
           createSystemEvent("PLAN_ERROR" /* PLAN_ERROR */, {
-            error: e instanceof Error ? e : new Error(String(e))
+            error: parseError instanceof Error ? parseError : new Error("Parse error")
           })
         );
-      } finally {
-        dispatch({ type: "LOADING", isLoading: false });
       }
+    }
+  }, [data.content, error, isLoading, enablePartialUpdates]);
+  useEffect(() => {
+    const input = {
+      schema,
+      goal,
+      history: [],
+      userContext
     };
-    initialFetch();
-  }, [goal, schema, userContext, mockMode, dispatch, openaiApiKey]);
-  return {
-    state,
+    if (mockMode) {
+      const node = mockPlanner();
+      dispatch({ type: "AI_RESPONSE", node });
+    } else {
+      const prompt = buildPrompt(input);
+      append({
+        content: prompt,
+        role: "user"
+      });
+    }
+  }, [append, goal, schema, userContext, mockMode]);
+  return {
+    state,
     dispatch,
     handleEvent
   };
 }
-
-// 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" }),
@@ -1684,696 +756,117 @@ 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: `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 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 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?.(),
+    className: `px-4 py-2 rounded font-medium ${variant === "default" ? "bg-blue-600 text-white" : variant === "outline" ? "border border-gray-300 text-gray-700" : "bg-red-600 text-white"}`,
+    onClick,
     children
   }
 );
+var Table = ({ items = [], fields = [], onSelect, selectable }) => /* @__PURE__ */ 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 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 }),
+  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 }),
       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 text-gray-800 dark:text-white",
-            children: data?.[field.key] ?? ""
-          },
-          field.key
-        );
+        return /* @__PURE__ */ jsx("h3", { className: "text-xl font-semibold", children: data?.[field.key] }, field.key);
       }
       if (field.type === "content") {
-        return /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "text-sm text-gray-700 dark:text-gray-300",
-            children: data?.[field.key] ?? ""
-          },
-          field.key
-        );
+        return /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-700", 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
-      );
+      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);
     }) })
   ] });
 };
-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 (eventPayload) => {
-    const fullEvent = {
-      type: uiEventType2,
-      nodeId: node.id,
-      timestamp: Date.now(),
-      payload: {
-        ...eventConfig.payload || {},
-        ...eventPayload || {}
-      }
-    };
-    processEvent2(fullEvent);
+var createEventHandler = (node, eventName) => {
+  const eventConfig = node.events?.[eventName];
+  if (!eventConfig) return void 0;
+  return () => {
+    console.log(`Event triggered: ${eventName} on node ${node.id}`, {
+      action: eventConfig.action,
+      target: eventConfig.target,
+      payload: eventConfig.payload
+    });
   };
 };
 var adapterMap = {
-  Container: (node, processEvent2) => {
-    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,
+  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,
     {
-      title: getSafeProp(node.props, "title", isString, "Untitled"),
-      className: getSafeProp(node.props, "className", isString, "")
+      variant: node.props?.variant,
+      onClick: createEventHandler(node, "onClick"),
+      children: node.props?.label || "Button"
     }
   ),
-  Button: (node, processEvent2) => /* @__PURE__ */ jsx(
-    Button,
+  ListView: (node) => /* @__PURE__ */ jsx(
+    Table,
     {
-      variant: getSafeProp(node.props, "variant", isButtonVariant, "default"),
-      onClick: createEventHandler(node, "onClick", "CLICK", processEvent2),
-      children: getSafeProp(node.props, "label", isString, "Button")
+      items: node.bindings?.items || [],
+      fields: node.bindings?.fields || [],
+      selectable: node.props?.selectable,
+      onSelect: createEventHandler(node, "onSelect")
     }
   ),
-  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;
+  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")
     }
-    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) {
-  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}`
-  );
+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))
+  ] });
 }
-var renderedNodesCache = /* @__PURE__ */ new Map();
-var MAX_CACHE_SIZE = 10;
-var CACHE_TTL = 5e3;
-async function renderNode2(node, adapter = "shadcn", processEvent2) {
+async function renderNode2(node, adapter = "shadcn") {
   const startTime = Date.now();
-  const nodeId = node.id;
-  const cachedItem = renderedNodesCache.get(nodeId);
-  if (cachedItem && startTime - cachedItem.timestamp < CACHE_TTL) {
-    return cachedItem.element;
-  }
   await systemEvents.emit(
     createSystemEvent("RENDER_START" /* RENDER_START */, { layout: node })
   );
   let result;
   switch (adapter) {
     case "shadcn":
-      result = renderNode(node, processEvent2);
+      result = renderNode(node);
       break;
     default:
       console.warn(`Unsupported adapter: ${adapter}, falling back to shadcn`);
-      result = renderNode(node, processEvent2);
+      result = renderNode(node);
   }
   await systemEvents.emit(
     createSystemEvent("RENDER_COMPLETE" /* RENDER_COMPLETE */, {
@@ -2381,23 +874,13 @@ async function renderNode2(node, adapter = "shadcn", processEvent2) {
       renderTimeMs: Date.now() - startTime
     })
   );
-  renderedNodesCache.set(nodeId, {
-    element: result,
-    timestamp: startTime
-  });
-  if (renderedNodesCache.size > MAX_CACHE_SIZE) {
-    const oldestKey = [...renderedNodesCache.entries()].sort(
-      ([, a], [, b]) => a.timestamp - b.timestamp
-    )[0][0];
-    renderedNodesCache.delete(oldestKey);
-  }
   return result;
 }
 function renderShimmer(node, adapter = "shadcn") {
   if (!node) {
     return /* @__PURE__ */ jsx(ShimmerBlock, {});
   }
-  switch (node.node_type) {
+  switch (node.type) {
     case "ListView":
       return /* @__PURE__ */ jsx(ShimmerTable, { rows: 3 });
     case "Detail":
@@ -2410,16 +893,6 @@ function renderShimmer(node, adapter = "shadcn") {
 }
 
 // src/core/bindings.ts
-var bindingsCache = /* @__PURE__ */ new Map();
-var MAX_CACHE_SIZE2 = 50;
-var CACHE_TTL2 = 2e3;
-var nodeCacheTimestamps = /* @__PURE__ */ new Map();
-function hashDataContext(context) {
-  return JSON.stringify(context);
-}
-function createCacheKey(nodeId, context) {
-  return `${nodeId}:${hashDataContext(context)}`;
-}
 function getValueByPath(context, path) {
   const parts = path.split(".");
   let current = context;
@@ -2435,265 +908,68 @@ 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 (typeof current !== "object" || current === null) {
-      console.warn(
-        `setValueByPath: Cannot traverse path "${path}". Parent segment "${parts[i - 1] || "(root)"}" is not an object.`
-      );
-      return context;
+    if (!(part in current) || current[part] === null || current[part] === void 0) {
+      current[part] = {};
     }
-    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 = current[part];
+    if (typeof current !== "object") {
+      current = {};
     }
-    current = currentAsObject[part];
   }
   const lastPart = parts[parts.length - 1];
-  if (typeof current === "object" && current !== null) {
-    current[lastPart] = value;
-  } else {
-    console.warn(
-      `setValueByPath: Could not set value for path "${path}". Final segment parent is not an object.`
-    );
-    return context;
-  }
+  current[lastPart] = value;
   return result;
 }
-function processBinding(binding, context, itemData) {
+function processBinding(binding, context) {
   if (typeof binding === "string") {
-    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;
-    }
+    return getValueByPath(context, binding);
   }
   if (Array.isArray(binding)) {
-    return binding.map((item) => processBinding(item, context, itemData));
+    return binding.map((item) => processBinding(item, context));
   }
   if (binding !== null && typeof binding === "object") {
     const result = {};
     for (const [key, value] of Object.entries(binding)) {
-      result[key] = processBinding(value, context, itemData);
+      result[key] = processBinding(value, context);
     }
     return result;
   }
   return binding;
 }
-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
-      })
-    );
-  }
+async function resolveBindings(node, context) {
+  await systemEvents.emit(
+    createSystemEvent("BINDING_RESOLUTION_START" /* BINDING_RESOLUTION_START */, { layout: node })
+  );
   const result = {
     ...node,
-    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
+    props: node.props ? { ...node.props } : void 0,
+    events: node.events ? { ...node.events } : void 0
   };
-  const resolvedBindings = {};
   if (node.bindings) {
-    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)
+    for (const [key, binding] of Object.entries(node.bindings)) {
+      const value = processBinding(binding, context);
+      if (value !== void 0) {
+        if (!result.props) {
           result.props = {};
-        result.props[key] = resolvedValue;
-      }
-    }
-  }
-  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;
+        result.props[key] = value;
       }
     }
-    if (oldestKey) {
-      bindingsCache.delete(oldestKey);
-      nodeCacheTimestamps.delete(oldestKey);
-    }
   }
+  if (node.children) {
+    result.children = await Promise.all(node.children.map((child) => resolveBindings(child, context)));
+  }
+  await systemEvents.emit(
+    createSystemEvent("BINDING_RESOLUTION_COMPLETE" /* BINDING_RESOLUTION_COMPLETE */, {
+      originalLayout: node,
+      resolvedLayout: result
+    })
+  );
   return result;
 }
 function executeAction(action, targetId, payload, context = {}, layoutTree) {
@@ -2716,6 +992,7 @@ function executeAction(action, targetId, payload, context = {}, layoutTree) {
       }
       break;
     }
+    // Add more actions as needed
     default:
       console.warn(`Unknown action: ${action}`);
   }
@@ -2729,7 +1006,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
@@ -2762,7 +1039,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
    */
@@ -2783,15 +1060,13 @@ var EventManager = class {
     if (this.hooks.all) {
       for (const hook of this.hooks.all) {
         await hook(context);
-        if (propagationStopped)
-          break;
+        if (propagationStopped) break;
       }
     }
     if (!propagationStopped && this.hooks[event.type]) {
       for (const hook of this.hooks[event.type] || []) {
         await hook(context);
-        if (propagationStopped)
-          break;
+        if (propagationStopped) break;
       }
     }
     return !defaultPrevented;
@@ -2808,45 +1083,6 @@ function createEventHook(eventTypes, hook, options) {
     }
   };
 }
-
-// src/core/component-detection.ts
-function areShadcnComponentsAvailable() {
-  try {
-    init_button();
-    return true;
-  } catch (error) {
-    return false;
-  }
-}
-function getMissingComponentsMessage() {
-  return `Missing required shadcn components. Please run:
-> npm run setup-shadcn`;
-}
-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,
@@ -2856,34 +1092,24 @@ var AutoUI = ({
   eventHooks,
   systemEventHooks,
   debugMode = false,
-  mockMode = false,
+  mockMode = true,
+  databaseConfig,
   planningConfig,
   integration = {},
   scope = {},
-  enablePartialUpdates = false,
-  openaiApiKey
+  enablePartialUpdates = false
 }) => {
-  const [schemaAdapterInstance] = useState(null);
+  const [schemaAdapterInstance, setSchemaAdapterInstance] = 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) {
       Object.entries(systemEventHooks).forEach(([eventType, hooks]) => {
-        if (!hooks)
-          return;
+        if (!hooks) return;
         hooks.forEach((hook) => {
-          const unregister = systemEvents.on(
-            eventType,
-            hook
-          );
+          const unregister = systemEvents.on(eventType, hook);
           unregisters.push(unregister);
         });
       });
@@ -2892,9 +1118,7 @@ var AutoUI = ({
       const debugHook = (event) => {
         console.debug(`[AutoUI Debug] System Event:`, event);
       };
-      Object.values(SystemEventType).filter(
-        (eventType) => eventType !== "RENDER_START" /* RENDER_START */ && eventType !== "BINDING_RESOLUTION_START" /* BINDING_RESOLUTION_START */
-      ).forEach((eventType) => {
+      Object.values(SystemEventType).forEach((eventType) => {
         const unregister = systemEvents.on(eventType, debugHook);
         unregisters.push(unregister);
       });
@@ -2933,162 +1157,88 @@ var AutoUI = ({
     planningConfig,
     router: void 0,
     dataContext,
-    enablePartialUpdates,
-    openaiApiKey
+    enablePartialUpdates
   });
   const eventManagerRef = useRef(new EventManager());
   useEffect(() => {
-    if (!eventHooks)
-      return;
+    if (!eventHooks) return;
     const unregisters = [];
     if (eventHooks.all) {
-      const unregister = eventManagerRef.current.register(
-        "all",
-        async (ctx) => {
-          for (const hook of eventHooks.all || []) {
-            await hook(ctx);
-            if (ctx.isPropagationStopped())
-              break;
-          }
+      const unregister = eventManagerRef.current.register("all", async (ctx) => {
+        for (const hook of eventHooks.all || []) {
+          await hook(ctx);
+          if (ctx.isPropagationStopped()) break;
         }
-      );
+      });
       unregisters.push(unregister);
     }
     Object.entries(eventHooks).forEach(([type, hooks]) => {
-      if (type === "all" || !hooks)
-        return;
-      const unregister = eventManagerRef.current.register(
-        [type],
-        async (ctx) => {
-          for (const hook of hooks) {
-            await hook(ctx);
-            if (ctx.isPropagationStopped())
-              break;
-          }
+      if (type === "all" || !hooks) return;
+      const unregister = eventManagerRef.current.register([type], async (ctx) => {
+        for (const hook of hooks) {
+          await hook(ctx);
+          if (ctx.isPropagationStopped()) break;
         }
-      );
+      });
       unregisters.push(unregister);
     });
     return () => {
       unregisters.forEach((unregister) => unregister());
     };
   }, [eventHooks]);
-  const processEvent2 = 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;
-          }
+  useCallback(async (event) => {
+    const shouldProceed = await eventManagerRef.current.processEvent(event);
+    if (onEvent) {
+      onEvent(event);
+    }
+    if (!shouldProceed) {
+      console.info("Event processing was prevented by hooks", event);
+      return;
+    }
+    const findNodeById2 = (node, id) => {
+      if (!node) return void 0;
+      if (node.id === id) return node;
+      if (node.children) {
+        for (const child of node.children) {
+          const found = findNodeById2(child, id);
+          if (found) return found;
         }
-        return void 0;
-      };
-      const sourceNode = findNodeById2(state.layout, event.nodeId);
-      if (!sourceNode) {
-        console.warn(`Node not found for event: ${event.nodeId}`);
-        handleEvent(event);
-        return;
       }
-      const eventConfig = sourceNode.events?.[event.type];
-      if (!eventConfig) {
-        console.warn(
-          `No event config found for ${event.type} on node ${event.nodeId}`
-        );
-        handleEvent(event);
-        return;
-      }
-      const newContext = executeAction(
-        eventConfig.action,
-        eventConfig.target || "",
-        // Provide empty string as fallback if target is null
-        {
-          ...eventConfig.payload,
-          ...event.payload
-        },
-        dataContext,
-        state.layout || void 0
-      );
-      setDataContext(newContext);
+      return void 0;
+    };
+    const sourceNode = findNodeById2(state.layout, event.nodeId);
+    if (!sourceNode) {
+      console.warn(`Node not found for event: ${event.nodeId}`);
       handleEvent(event);
-    },
-    [dataContext, handleEvent, onEvent, state.layout]
-  );
-  const [resolvedLayout, setResolvedLayout] = 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);
+      return;
     }
-  }, [state.layout, dataContext]);
+    const eventConfig = sourceNode.events?.[event.type];
+    if (!eventConfig) {
+      console.warn(`No event config found for ${event.type} on node ${event.nodeId}`);
+      handleEvent(event);
+      return;
+    }
+    const newContext = executeAction(
+      eventConfig.action,
+      eventConfig.target,
+      {
+        ...eventConfig.payload,
+        ...event.payload
+      },
+      dataContext,
+      state.layout
+    );
+    setDataContext(newContext);
+    handleEvent(event);
+  }, [dataContext, handleEvent, onEvent, state.layout]);
+  const [resolvedLayout, setResolvedLayout] = useState(void 0);
   useEffect(() => {
-    resolveLayoutBindings();
-  }, [resolveLayoutBindings]);
-  const renderResolvedLayout = useCallback(async () => {
-    if (resolvedLayout) {
-      try {
-        const rendered = await renderNode2(
-          resolvedLayout,
-          componentAdapter,
-          processEvent2
-        );
-        setRenderedNode(rendered);
-      } catch (err) {
-        console.error("Error rendering node:", err);
-      }
+    if (state.layout) {
+      resolveBindings(state.layout, dataContext).then((resolved) => setResolvedLayout(resolved)).catch((err) => console.error("Error resolving bindings:", err));
     } else {
-      setRenderedNode(null);
+      setResolvedLayout(void 0);
     }
-  }, [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() })
-    ] });
-  }
+  }, [state.layout, dataContext]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -3105,24 +1255,11 @@ var AutoUI = ({
           ] }) })
         ) : (
           // Render the resolved layout
-          /* @__PURE__ */ jsx("div", { className: "autoui-content", children: renderedNode })
+          /* @__PURE__ */ jsx("div", { className: "autoui-content", children: renderNode2(resolvedLayout, componentAdapter) })
         ),
-        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."
-            ] })
-          ] })
+        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 })
         ] })
       ]
     }
@@ -3175,26 +1312,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";
   }
@@ -3237,122 +1374,10 @@ function createSchemaAdapter(options) {
     case "custom":
       return options.adapter;
     default:
-      throw new Error(
-        `Unsupported schema adapter type: ${options.type}`
-      );
+      throw new Error(`Unsupported schema adapter type: ${options.type}`);
   }
 }
 
-// src/ai-utils.ts
-var generateComponent = async (prompt) => {
-  console.warn(
-    "generateComponent is a placeholder and will be implemented in a future version"
-  );
-  return `<div>Generated Component for: ${prompt}</div>`;
-};
-var generateUIDescription = async (prompt) => {
-  console.warn(
-    "generateUIDescription is a placeholder and will be implemented in a future version"
-  );
-  return `Description for ${prompt}`;
-};
-var generateUIComponent = async (prompt) => {
-  console.warn(
-    "generateUIComponent is a placeholder and will be implemented in a future version"
-  );
-  return `<div>Generated UI Component for: ${prompt}</div>`;
-};
-function usePlanner(options) {
-  const {
-    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, usePlanner };
-//# sourceMappingURL=out.js.map
+export { ActionRouter, ActionType, AutoUI, DrizzleAdapter, SystemEventType, createDefaultRouter, createEventHook, createSchemaAdapter, createSystemEvent, systemEvents, uiEvent, uiEventType, uiSpecNode };
+//# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map