autoui-react 0.1.0 → 0.1.1-alpha

package/dist/index.js

@@ -1,26 +1,142 @@
 'use strict';
 
-var react = require('react');
-var zod = require('zod');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var reactSlot = require('@radix-ui/react-slot');
+var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
+var anthropic = require('@ai-sdk/anthropic');
+var ai = require('ai');
+var zod = require('zod');
+var React = require('react');
+var DialogPrimitive = require('@radix-ui/react-dialog');
+var lucideReact = require('lucide-react');
+var SelectPrimitive = require('@radix-ui/react-select');
+var CheckboxPrimitive = require('@radix-ui/react-checkbox');
+var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
+var TabsPrimitive = require('@radix-ui/react-tabs');
+var LabelPrimitive = require('@radix-ui/react-label');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
+var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
+var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
+var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
+var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
+var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
+
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var init_utils = __esm({
+  "src/lib/utils.ts"() {
+  }
+});
+
+// components/ui/button.tsx
+var button_exports = {};
+__export(button_exports, {
+  Button: () => Button2,
+  buttonVariants: () => buttonVariants
+});
+function Button2({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? reactSlot.Slot : "button";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+var buttonVariants;
+var init_button = __esm({
+  "components/ui/button.tsx"() {
+    init_utils();
+    buttonVariants = classVarianceAuthority.cva(
+      "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+      {
+        variants: {
+          variant: {
+            default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+            destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+            outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+            secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+            ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+            link: "text-primary underline-offset-4 hover:underline"
+          },
+          size: {
+            default: "h-9 px-4 py-2 has-[>svg]:px-3",
+            sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+            lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+            icon: "size-9"
+          }
+        },
+        defaultVariants: {
+          variant: "default",
+          size: "default"
+        }
+      }
+    );
+  }
+});
 
 // src/core/reducer.ts
 function cloneNode(node) {
   return {
     ...node,
-    props: node.props ? { ...node.props } : void 0,
-    bindings: node.bindings ? { ...node.bindings } : void 0,
-    events: node.events ? { ...node.events } : void 0,
-    children: node.children?.map((child) => cloneNode(child))
+    props: node.props ? { ...node.props } : null,
+    bindings: node.bindings ? { ...node.bindings } : null,
+    events: node.events ? { ...node.events } : null,
+    children: node.children ? node.children.map((child) => cloneNode(child)) : null
   };
 }
 function findNodeById(tree, nodeId) {
-  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;
@@ -35,13 +151,15 @@ 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) {
@@ -50,18 +168,14 @@ function updateNodeById(tree, nodeId, updater) {
   const parent = path[path.length - 2];
   const updatedParent = {
     ...parent,
-    children: parent.children?.map(
+    children: parent.children ? parent.children.map(
       (child) => child.id === nodeId ? updatedNode : child
-    )
+    ) : null
   };
   if (path.length === 2) {
     return updatedParent;
   }
-  return updateNodeById(
-    result,
-    parent.id,
-    () => updatedParent
-  );
+  return updateNodeById(result, parent.id, () => updatedParent);
 }
 function replaceNodeById(tree, nodeId, newNode) {
   return updateNodeById(tree, nodeId, () => newNode);
@@ -88,7 +202,8 @@ 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;
@@ -98,15 +213,20 @@ 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?.filter((child) => child.id !== nodeId)
+    children: node.children ? node.children.filter((child) => child.id !== nodeId) : null
   }));
 }
 function uiReducer(state, action) {
   switch (action.type) {
     case "UI_EVENT": {
+      if (action.event.type === "INIT" && state.history.some((e) => e.type === "INIT")) {
+        console.log("[AutoUI uiReducer] Ignoring duplicate INIT event");
+        return state;
+      }
       return {
         ...state,
         loading: true,
@@ -118,7 +238,7 @@ function uiReducer(state, action) {
         ...state,
         layout: action.node,
         loading: false,
-        error: void 0
+        error: null
       };
     }
     case "PARTIAL_UPDATE": {
@@ -127,7 +247,7 @@ function uiReducer(state, action) {
           ...state,
           layout: action.node,
           loading: false,
-          error: void 0
+          error: null
         };
       }
       if (action.nodeId === "root" || action.nodeId === state.layout.id) {
@@ -135,19 +255,23 @@ function uiReducer(state, action) {
           ...state,
           layout: action.node,
           loading: false,
-          error: void 0
+          error: null
         };
       }
       return {
         ...state,
         layout: replaceNodeById(state.layout, action.nodeId, action.node),
         loading: false,
-        error: void 0
+        error: null
       };
     }
     case "ADD_NODE": {
       if (!state.layout) {
-        return state;
+        return {
+          ...state,
+          error: "Cannot add node: Layout is empty.",
+          loading: false
+        };
       }
       return {
         ...state,
@@ -155,21 +279,41 @@ function uiReducer(state, action) {
           state.layout,
           action.parentId,
           action.node,
-          action.index
+          action.index === null ? void 0 : action.index
         ),
         loading: false,
-        error: void 0
+        error: null
       };
     }
     case "REMOVE_NODE": {
       if (!state.layout) {
-        return state;
+        return {
+          ...state,
+          error: "Cannot remove node: Layout is empty.",
+          loading: false
+        };
+      }
+      try {
+        return {
+          ...state,
+          layout: removeNodeById(state.layout, action.nodeId),
+          loading: false,
+          error: null
+        };
+      } catch (e) {
+        const errorMessage = e instanceof Error ? e.message : "Failed to remove node.";
+        return {
+          ...state,
+          error: errorMessage,
+          loading: false
+        };
       }
+    }
+    case "ERROR": {
       return {
         ...state,
-        layout: removeNodeById(state.layout, action.nodeId),
-        loading: false,
-        error: void 0
+        error: action.message,
+        loading: false
       };
     }
     case "LOADING": {
@@ -178,11 +322,10 @@ function uiReducer(state, action) {
         loading: action.isLoading
       };
     }
-    case "ERROR": {
+    case "SET_DATA_CONTEXT": {
       return {
         ...state,
-        error: action.message,
-        loading: false
+        dataContext: action.payload
       };
     }
     default:
@@ -190,246 +333,33 @@ function uiReducer(state, action) {
   }
 }
 var initialState = {
+  layout: null,
   loading: true,
-  history: []
+  error: null,
+  history: [],
+  dataContext: {}
 };
 
-// src/core/action-router.ts
+// src/schema/action-types.ts
 var ActionType = /* @__PURE__ */ ((ActionType2) => {
   ActionType2["FULL_REFRESH"] = "FULL_REFRESH";
   ActionType2["UPDATE_NODE"] = "UPDATE_NODE";
+  ActionType2["UPDATE_DATA"] = "UPDATE_DATA";
+  ActionType2["ADD_ITEM"] = "ADD_ITEM";
+  ActionType2["DELETE_ITEM"] = "DELETE_ITEM";
   ActionType2["ADD_DROPDOWN"] = "ADD_DROPDOWN";
   ActionType2["SHOW_DETAIL"] = "SHOW_DETAIL";
   ActionType2["HIDE_DETAIL"] = "HIDE_DETAIL";
+  ActionType2["HIDE_DIALOG"] = "HIDE_DIALOG";
+  ActionType2["SAVE_TASK_CHANGES"] = "SAVE_TASK_CHANGES";
   ActionType2["TOGGLE_STATE"] = "TOGGLE_STATE";
   ActionType2["UPDATE_FORM"] = "UPDATE_FORM";
   ActionType2["NAVIGATE"] = "NAVIGATE";
+  ActionType2["OPEN_DIALOG"] = "OPEN_DIALOG";
+  ActionType2["CLOSE_DIALOG"] = "CLOSE_DIALOG";
+  ActionType2["UPDATE_CONTEXT"] = "UPDATE_CONTEXT";
   return ActionType2;
 })(ActionType || {});
-var ActionRouter = class {
-  constructor() {
-    this.routes = {};
-  }
-  /**
-   * Register a new action route
-   * @param eventType - UI event type to route
-   * @param config - Route configuration
-   */
-  registerRoute(eventType, config) {
-    if (!this.routes[eventType]) {
-      this.routes[eventType] = [];
-    }
-    this.routes[eventType].push(config);
-  }
-  /**
-   * Find the appropriate route for an event
-   * @param event - UI event
-   * @param layout - Current UI layout
-   * @param dataContext - Current data context
-   * @returns Route resolution or null if no match
-   */
-  resolveRoute(event, schema, layout, dataContext, goal, userContext) {
-    const routes = this.routes[event.type] || [];
-    if (routes.length === 0) {
-      return {
-        actionType: "FULL_REFRESH" /* FULL_REFRESH */,
-        targetNodeId: layout?.id || "root",
-        plannerInput: {
-          schema,
-          goal,
-          history: [event],
-          userContext
-        },
-        prompt: `Generate a new UI for the goal: "${goal}". The user just triggered: ${event.type} on node ${event.nodeId}`
-      };
-    }
-    const sourceNode = layout ? findNodeById(layout, event.nodeId) : void 0;
-    const nodeConfig = sourceNode?.events?.[event.type];
-    let matchingRoute;
-    if (nodeConfig) {
-      matchingRoute = routes.find(
-        (route) => route.actionType.toString() === nodeConfig.action
-      );
-    }
-    if (!matchingRoute) {
-      matchingRoute = routes[0];
-    }
-    const targetNodeId = nodeConfig?.target || matchingRoute.targetNodeId || event.nodeId;
-    const additionalContext = {};
-    if (matchingRoute.contextKeys) {
-      matchingRoute.contextKeys.forEach((key) => {
-        additionalContext[key] = dataContext[key];
-      });
-    }
-    if (sourceNode) {
-      additionalContext.sourceNode = sourceNode;
-    }
-    if (layout) {
-      const targetNode = findNodeById(layout, targetNodeId);
-      if (targetNode) {
-        additionalContext.targetNode = targetNode;
-      }
-    }
-    if (event.payload) {
-      additionalContext.eventPayload = event.payload;
-    }
-    if (nodeConfig?.payload) {
-      Object.entries(nodeConfig.payload).forEach(([key, value]) => {
-        additionalContext[key] = value;
-      });
-    }
-    const plannerInput2 = {
-      schema,
-      goal,
-      history: [event],
-      userContext: {
-        ...userContext,
-        ...additionalContext
-      }
-    };
-    const prompt = this.processTemplate(
-      matchingRoute.promptTemplate,
-      {
-        goal,
-        eventType: event.type,
-        nodeId: event.nodeId,
-        targetNodeId,
-        actionType: matchingRoute.actionType,
-        ...additionalContext
-      }
-    );
-    return {
-      actionType: matchingRoute.actionType,
-      targetNodeId,
-      plannerInput: plannerInput2,
-      prompt
-    };
-  }
-  /**
-   * Process a prompt template with variables
-   * @param template - Template string with ${var} placeholders
-   * @param values - Values to substitute
-   * @returns Processed string
-   */
-  processTemplate(template, values) {
-    return template.replace(/\${(\w+)}/g, (_, key) => {
-      return values[key] !== void 0 ? String(values[key]) : `\${${key}}`;
-    });
-  }
-};
-function createDefaultRouter() {
-  const router = new ActionRouter();
-  router.registerRoute("CLICK", {
-    actionType: "FULL_REFRESH" /* FULL_REFRESH */,
-    targetNodeId: "root",
-    promptTemplate: 'Generate a new UI for the goal: "${goal}". The user just clicked on node ${nodeId}'
-  });
-  router.registerRoute("CLICK", {
-    actionType: "SHOW_DETAIL" /* SHOW_DETAIL */,
-    targetNodeId: "${targetNodeId}",
-    promptTemplate: "Update the UI to show details for the selected item. Current node: ${nodeId}, Target node: ${targetNodeId}",
-    contextKeys: ["selected"]
-  });
-  router.registerRoute("CLICK", {
-    actionType: "NAVIGATE" /* NAVIGATE */,
-    targetNodeId: "root",
-    promptTemplate: "Navigate to a new view based on the user clicking ${nodeId}. Current goal: ${goal}"
-  });
-  router.registerRoute("CLICK", {
-    actionType: "ADD_DROPDOWN" /* ADD_DROPDOWN */,
-    targetNodeId: "${targetNodeId}",
-    promptTemplate: "Add a dropdown menu to node ${targetNodeId} with options relevant to the clicked element ${nodeId}"
-  });
-  router.registerRoute("CLICK", {
-    actionType: "TOGGLE_STATE" /* TOGGLE_STATE */,
-    targetNodeId: "${nodeId}",
-    promptTemplate: "Toggle the state of node ${nodeId} (e.g., expanded/collapsed, selected/unselected)"
-  });
-  router.registerRoute("CHANGE", {
-    actionType: "UPDATE_FORM" /* UPDATE_FORM */,
-    targetNodeId: "${targetNodeId}",
-    promptTemplate: "Update the form based on the user changing the value of ${nodeId}"
-  });
-  return router;
-}
-var uiEventType = zod.z.enum([
-  "CLICK",
-  "CHANGE",
-  "SUBMIT",
-  "MOUSEOVER",
-  "MOUSEOUT",
-  "FOCUS",
-  "BLUR"
-]);
-var uiEvent = zod.z.object({
-  type: uiEventType,
-  nodeId: zod.z.string(),
-  timestamp: zod.z.number().optional(),
-  payload: zod.z.record(zod.z.any()).optional()
-});
-zod.z.enum([
-  "AI_RESPONSE",
-  "ERROR"
-]);
-var uiSpecNode = zod.z.lazy(() => zod.z.object({
-  id: zod.z.string(),
-  type: zod.z.string(),
-  // e.g., "ListView", "Button", "TextField"
-  props: zod.z.record(zod.z.any()).optional(),
-  bindings: zod.z.record(zod.z.any()).optional(),
-  // Data bindings
-  events: zod.z.record(zod.z.string(), zod.z.object({
-    action: zod.z.string(),
-    target: zod.z.string().optional(),
-    payload: zod.z.record(zod.z.any()).optional()
-  })).optional(),
-  children: zod.z.array(uiSpecNode).optional()
-}));
-zod.z.discriminatedUnion("type", [
-  zod.z.object({
-    type: zod.z.literal("UI_EVENT"),
-    event: uiEvent
-  }),
-  zod.z.object({
-    type: zod.z.literal("AI_RESPONSE"),
-    node: uiSpecNode
-  }),
-  zod.z.object({
-    type: zod.z.literal("PARTIAL_UPDATE"),
-    nodeId: zod.z.string(),
-    node: uiSpecNode
-  }),
-  zod.z.object({
-    type: zod.z.literal("ADD_NODE"),
-    parentId: zod.z.string(),
-    node: uiSpecNode,
-    index: zod.z.number().optional()
-  }),
-  zod.z.object({
-    type: zod.z.literal("REMOVE_NODE"),
-    nodeId: zod.z.string()
-  }),
-  zod.z.object({
-    type: zod.z.literal("ERROR"),
-    message: zod.z.string()
-  }),
-  zod.z.object({
-    type: zod.z.literal("LOADING"),
-    isLoading: zod.z.boolean()
-  })
-]);
-zod.z.object({
-  layout: uiSpecNode.optional(),
-  loading: zod.z.boolean(),
-  history: zod.z.array(uiEvent),
-  error: zod.z.string().optional()
-});
-zod.z.object({
-  schema: zod.z.record(zod.z.unknown()),
-  goal: zod.z.string(),
-  history: zod.z.array(uiEvent).optional(),
-  userContext: zod.z.record(zod.z.unknown()).optional()
-});
 
 // src/core/system-events.ts
 var SystemEventType = /* @__PURE__ */ ((SystemEventType2) => {
@@ -454,7 +384,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
@@ -474,7 +404,7 @@ var SystemEventManager = class {
   }
   /**
    * Emit a system event to all registered listeners
-   * 
+   *
    * @param event - The system event to emit
    */
   async emit(event) {
@@ -492,259 +422,1711 @@ function createSystemEvent(type, data) {
     ...data
   };
 }
+var componentType = zod.z.enum([
+  // Layout components
+  "Container",
+  "Card",
+  "Header",
+  // Input components
+  "Button",
+  "Input",
+  "Select",
+  "Textarea",
+  "Checkbox",
+  "RadioGroup",
+  // Data display components
+  "ListView",
+  "Detail",
+  "Tabs",
+  "Dialog",
+  "Badge",
+  // Typography
+  "Heading",
+  "Text"
+]);
 
-// src/env.ts
-({
-  MOCK_PLANNER: undefined?.VITE_MOCK_PLANNER || "1",
-  NODE_ENV: undefined?.MODE || "development"
-  // Add other environment variables as needed
+// src/schema/openai-ui-spec.ts
+var actionTypeEnum = zod.z.enum([
+  "FULL_REFRESH",
+  "UPDATE_NODE",
+  "UPDATE_DATA",
+  "ADD_DROPDOWN",
+  "SHOW_DETAIL",
+  "HIDE_DETAIL",
+  "HIDE_DIALOG",
+  "SAVE_TASK_CHANGES",
+  "TOGGLE_STATE",
+  "UPDATE_FORM",
+  "NAVIGATE",
+  "OPEN_DIALOG",
+  "CLOSE_DIALOG",
+  "UPDATE_CONTEXT"
+]);
+var openAISimplifiedValue = zod.z.string().nullable();
+var openAIRecordSimplifiedNullable = zod.z.record(openAISimplifiedValue).nullable();
+var openAIEventPayloadSimplifiedNullable = zod.z.record(openAISimplifiedValue).nullable();
+var openAIBaseNode = zod.z.object({
+  id: zod.z.string().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" }; for Button use { "label": "My Button Label" }.'
+  ),
+  bindings: openAIRecordSimplifiedNullable.describe(
+    'Data bindings map context paths to component props. Values are paths (e.g., "user.name") or templates (e.g., "{{item.title}}")...'
+  ),
+  events: zod.z.record(
+    zod.z.string(),
+    zod.z.object({
+      action: actionTypeEnum.describe(
+        'Action identifier (e.g., "UPDATE_DATA", "ADD_ITEM", "DELETE_ITEM", "VIEW_DETAIL", "HIDE_DETAIL"). Defines what operation to perform when the event occurs.'
+      ),
+      target: zod.z.string().describe("Target identifier."),
+      payload: openAIEventPayloadSimplifiedNullable.describe(
+        "Static payload to merge with the event's runtime payload."
+      )
+    })
+  ).nullable().describe(
+    'Defines event handlers mapped from UIEventType (e.g., "CLICK", "CHANGE") to an action configuration.'
+  ),
+  children: zod.z.null()
+});
+var openAINodeL4 = openAIBaseNode;
+var openAINodeL3 = openAIBaseNode.extend({
+  children: zod.z.array(openAINodeL4).nullable()
+});
+var openAINodeL2 = openAIBaseNode.extend({
+  children: zod.z.array(openAINodeL3).nullable()
+});
+var openAIUISpec = openAIBaseNode.extend({
+  children: zod.z.array(openAINodeL2).nullable()
 });
 
 // src/core/planner.ts
-function buildPrompt(input, targetNodeId, customPrompt) {
-  const { schema, goal, history, userContext } = input;
-  const schemaInfo = Object.entries(schema).map(([tableName, tableSchema]) => {
-    return `Table: ${tableName}
-Schema: ${JSON.stringify(tableSchema)}`;
-  }).join("\n\n");
-  const recentEvents = history?.slice(-5).map(
-    (event) => `Event: ${event.type} on node ${event.nodeId}${event.payload ? ` with payload ${JSON.stringify(event.payload)}` : ""}`
-  ).join("\n") || "No recent events";
-  const userContextSection = userContext ? `
-
-User Context:
-${JSON.stringify(userContext)}` : "";
-  return `
-You are an expert UI generator. 
-Create a user interface that achieves the following goal: "${goal}"
-
-Available data schema:
-${schemaInfo}
-
-Recent user interactions:
-${recentEvents}${userContextSection}
-
-Generate a complete UI specification in JSON format that matches the following TypeScript type:
-type UISpecNode = {
-  id: string;
-  type: string;
-  props?: Record<string, any>;
-  bindings?: Record<string, any>;
-  events?: Record<string, { action: string; target?: string; payload?: Record<string, any>; }>;
-  children?: UISpecNode[];
+var getAnthropicClient = (apiKey) => {
+  return anthropic.createAnthropic({
+    apiKey
+  });
 };
-
-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) {
-  const mockNode = {
-    id: targetNodeId || "root",
-    type: "Container",
-    props: { title: "Mock UI" },
+function mockPlanner(_input) {
+  return {
+    id: "task-dashboard",
+    node_type: "Container",
+    props: { className: "p-4 space-y-4" },
+    bindings: null,
+    events: null,
     children: [
       {
-        id: "text-1",
-        type: "Text",
-        props: { text: "This is a mock UI for testing" }
+        id: "header",
+        node_type: "Container",
+        props: { className: "flex justify-between items-center mb-4" },
+        bindings: null,
+        events: null,
+        children: [
+          {
+            id: "title",
+            node_type: "Text",
+            props: { text: "Task Dashboard", className: "text-2xl font-bold" },
+            bindings: null,
+            events: null,
+            children: null
+          },
+          {
+            id: "add-task-button",
+            node_type: "Button",
+            props: { label: "Add Task", variant: "default" },
+            bindings: null,
+            events: {
+              CLICK: { action: "SHOW_DETAIL", target: "new-task-form" }
+            },
+            children: null
+          }
+        ]
+      },
+      {
+        id: "main-content",
+        node_type: "Container",
+        props: { className: "flex gap-4" },
+        bindings: null,
+        events: null,
+        children: [
+          {
+            id: "tasks-container",
+            node_type: "Container",
+            props: { className: "flex-1" },
+            bindings: null,
+            events: null,
+            children: [
+              {
+                id: "task-list",
+                node_type: "ListView",
+                props: { className: "space-y-2" },
+                bindings: { data: "tasks.data" },
+                events: null,
+                children: [
+                  {
+                    id: "task-item-{{index}}",
+                    node_type: "Card",
+                    props: { className: "p-3 border rounded" },
+                    bindings: null,
+                    events: null,
+                    children: [
+                      {
+                        id: "task-title-{{index}}",
+                        node_type: "Text",
+                        props: { className: "font-medium" },
+                        bindings: { text: "item.title" },
+                        events: null,
+                        children: null
+                      },
+                      {
+                        id: "task-status-{{index}}",
+                        node_type: "Badge",
+                        props: {},
+                        bindings: { text: "item.status" },
+                        events: null,
+                        children: null
+                      },
+                      {
+                        id: "view-details-button-{{index}}",
+                        node_type: "Button",
+                        props: { label: "View Details", variant: "outline", size: "sm" },
+                        bindings: null,
+                        events: {
+                          CLICK: { action: "SHOW_DETAIL", target: "task-detail" }
+                        },
+                        children: null
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            id: "task-detail",
+            node_type: "Container",
+            props: { className: "w-1/3 border-l pl-4", visible: false },
+            bindings: null,
+            events: null,
+            children: [
+              {
+                id: "detail-title",
+                node_type: "Text",
+                props: { text: "Task Details", className: "text-lg font-bold mb-2" },
+                bindings: null,
+                events: null,
+                children: null
+              },
+              {
+                id: "detail-content",
+                node_type: "Text",
+                props: {},
+                bindings: { text: "tasks.selected.description" },
+                events: null,
+                children: null
+              },
+              {
+                id: "close-detail-button",
+                node_type: "Button",
+                props: { label: "Close", variant: "ghost" },
+                bindings: null,
+                events: {
+                  CLICK: { action: "HIDE_DETAIL", target: "task-detail" }
+                },
+                children: null
+              }
+            ]
+          }
+        ]
       }
     ]
   };
-  return mockNode;
 }
-
-// src/core/state.ts
-var useChat = (config) => ({
-  append: async (message) => {
-  },
-  data: { content: "{}" },
-  isLoading: false,
-  error: null,
-  stop: () => {
+async function callPlannerLLM(input, apiKey, useMock) {
+  await systemEvents.emit(
+    createSystemEvent("PLAN_START" /* PLAN_START */, { plannerInput: input })
+  );
+  if (useMock || typeof window !== "undefined" && window.__USE_MOCK_PLANNER) {
+    console.log("[Mock Planner] Using mock planner for testing");
+    const mockLayout = mockPlanner();
+    await systemEvents.emit(
+      createSystemEvent("PLAN_COMPLETE" /* PLAN_COMPLETE */, {
+        layout: mockLayout,
+        executionTimeMs: 0
+      })
+    );
+    return mockLayout;
   }
-});
-function useUIStateEngine({
-  schema,
-  goal,
-  userContext,
-  mockMode = false,
-  planningConfig = {},
-  router = createDefaultRouter(),
-  dataContext = {},
-  enablePartialUpdates = false
-}) {
-  const [state, dispatch] = react.useReducer(uiReducer, initialState);
-  const { append, data, isLoading, error, stop } = useChat();
-  const handleEvent = react.useCallback((event) => {
-    dispatch({ type: "UI_EVENT", event });
-    if (enablePartialUpdates) {
-      const route = router.resolveRoute(
-        event,
-        schema,
-        state.layout,
-        dataContext,
-        goal,
-        userContext
-      );
-      if (route) {
-        console.log("Resolved route:", route);
-        systemEvents.emit(
-          createSystemEvent("PLAN_START" /* PLAN_START */, {
-            plannerInput: route.plannerInput
-          })
-        );
-        if (mockMode) {
-          const node = mockPlanner(route.plannerInput, route.targetNodeId, route.prompt);
-          switch (route.actionType) {
-            case "FULL_REFRESH" /* FULL_REFRESH */:
-              dispatch({ type: "AI_RESPONSE", node });
-              break;
-            case "UPDATE_NODE" /* UPDATE_NODE */:
-            case "SHOW_DETAIL" /* SHOW_DETAIL */:
-            case "HIDE_DETAIL" /* HIDE_DETAIL */:
-            case "TOGGLE_STATE" /* TOGGLE_STATE */:
-            case "ADD_DROPDOWN" /* ADD_DROPDOWN */:
-            case "UPDATE_FORM" /* UPDATE_FORM */:
-            case "NAVIGATE" /* NAVIGATE */:
-              dispatch({
-                type: "PARTIAL_UPDATE",
-                nodeId: route.targetNodeId,
-                node
-              });
-              break;
-          }
-        } 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
-          }));
+  if (!apiKey) {
+    console.warn(
+      `Anthropic API key was not provided to callPlannerLLM. Returning a placeholder UI.`
+    );
+    return {
+      id: "root-no-api-key",
+      node_type: "Container",
+      props: {
+        className: "p-4 flex flex-col items-center justify-center h-full"
+      },
+      bindings: null,
+      events: null,
+      children: [
+        {
+          id: "no-api-key-message",
+          node_type: "Text",
+          props: {
+            text: "Anthropic API Key is required to generate the UI. Please provide one in your environment configuration.",
+            className: "text-red-500 text-center"
+          },
+          bindings: null,
+          events: null,
+          children: null
         }
-        return;
-      }
-    }
-    const input = {
-      schema,
-      goal,
-      history: [...state.history, event],
-      userContext
+      ]
     };
-    if (mockMode) {
-      const node = mockPlanner();
-      dispatch({ type: "AI_RESPONSE", node });
+  }
+  const startTime = Date.now();
+  const templateValuesForPrompt = input.userContext ? { ...input.userContext } : void 0;
+  const promptTemplateFromInput = typeof input.userContext?.promptTemplate === "string" ? input.userContext.promptTemplate : void 0;
+  const prompt = buildPrompt(
+    input,
+    promptTemplateFromInput,
+    // Use template from input.userContext
+    templateValuesForPrompt
+    // Use values from input.userContext
+  );
+  await systemEvents.emit(
+    createSystemEvent("PLAN_PROMPT_CREATED" /* PLAN_PROMPT_CREATED */, { prompt })
+  );
+  try {
+    let uiSpec;
+    if (typeof window !== "undefined") {
+      const response = await fetch("/api/generate-ui", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({ prompt, apiKey })
+      });
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
+      }
+      const data = await response.json();
+      uiSpec = data.uiSpec;
     } else {
-      const prompt = buildPrompt(input);
-      append({
-        content: prompt,
-        role: "user"
+      const { object } = await ai.generateObject({
+        model: getAnthropicClient(apiKey)("claude-haiku-4-5"),
+        schema: openAIUISpec,
+        mode: "tool",
+        messages: [{ role: "user", content: prompt }],
+        temperature: 0.2,
+        maxTokens: 4e3
       });
+      uiSpec = object;
+    }
+    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;
+  }
+}
+
+// src/core/bindings.ts
+function getValueByPath(context, path) {
+  const parts = path.split(".");
+  let current = context;
+  for (const part of parts) {
+    if (current === null || current === void 0) {
+      return void 0;
+    }
+    if (typeof current !== "object") {
+      return void 0;
+    }
+    current = current[part];
+  }
+  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;
+    }
+    const currentAsObject = current;
+    const nextPartValue = currentAsObject[part];
+    if (nextPartValue === void 0 || nextPartValue === null) {
+      currentAsObject[part] = {};
+    } else if (typeof nextPartValue !== "object") {
+      console.warn(
+        `setValueByPath: Cannot create nested path "${path}". Segment "${part}" is not an object.`
+      );
+      return context;
+    } else {
+      currentAsObject[part] = { ...nextPartValue };
+    }
+    current = currentAsObject[part];
+  }
+  const lastPart = parts[parts.length - 1];
+  if (typeof current === "object" && current !== null) {
+    current[lastPart] = value;
+  } else {
+    console.warn(
+      `setValueByPath: Could not set value for path "${path}". Final segment parent is not an object.`
+    );
+    return context;
+  }
+  return result;
+}
+function processBinding(binding, context, itemData) {
+  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;
+      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("}}")) {
+      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;
+      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));
+        }
+        if (resolvedValue !== void 0) {
+          return resolvedValue;
+        }
+      }
+      if (itemData && !pathToResolve.includes(".") && pathToResolve in itemData) {
+        resolvedValue = getValueByPath(itemData, pathToResolve);
+      }
+      if (resolvedValue === void 0) {
+        resolvedValue = getValueByPath(context, pathToResolve);
+      }
+      return resolvedValue;
+    }
+  }
+  if (Array.isArray(binding)) {
+    return binding.map((item) => processBinding(item, context, itemData));
+  }
+  if (binding !== null && typeof binding === "object") {
+    const result = {};
+    for (const [key, value] of Object.entries(binding)) {
+      result[key] = processBinding(value, context, itemData);
+    }
+    return result;
+  }
+  return binding;
+}
+async function resolveBindings(node, context, itemData) {
+  if (node.id === "task-detail") {
+    console.log(
+      `[resolveBindings task-detail SPECIFIC CHECK] Context for task-detail:`,
+      JSON.stringify(context)
+    );
+    console.log(
+      `[resolveBindings task-detail SPECIFIC CHECK] context.isTaskDetailDialogVisible = ${context.isTaskDetailDialogVisible}`
+    );
+    console.log(
+      `[resolveBindings task-detail SPECIFIC CHECK] context.selectedTask = ${JSON.stringify(
+        context.selectedTask
+      )}`
+    );
+  }
+  console.log(
+    `[resolveBindings ENTRY] Node ID: ${node.id}, Type: ${node.node_type}, Has itemData: ${!!itemData}, Context keys: ${Object.keys(
+      context || {}
+      // Ensure context is not null before Object.keys
+    ).join(", ")}`
+  );
+  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
+  };
+  let mergedProps = node.props ? { ...JSON.parse(JSON.stringify(node.props)) } : null;
+  const PROP_KEYS_TO_RESOLVE = /* @__PURE__ */ new Set([
+    "text",
+    "label",
+    "title",
+    "placeholder",
+    "value"
+  ]);
+  if (node.props) {
+    for (const [key, value] of Object.entries(node.props)) {
+      if (!mergedProps)
+        mergedProps = {};
+      if (PROP_KEYS_TO_RESOLVE.has(key)) {
+        const resolvedPropValue = processBinding(
+          value,
+          context,
+          itemData ?? void 0
+        );
+        if (resolvedPropValue !== void 0) {
+          mergedProps[key] = resolvedPropValue;
+        } else {
+          if (typeof value === "string" && (value.includes("{{") || value.includes("."))) {
+            mergedProps[key] = "";
+          } else {
+            mergedProps[key] = value;
+          }
+        }
+      } else if (value !== void 0) {
+        mergedProps[key] = value;
+      } else {
+        delete mergedProps[key];
+      }
+    }
+  }
+  result.props = mergedProps;
+  if (node.bindings) {
+    for (const [key, bindingValue] of Object.entries(node.bindings)) {
+      const resolvedValue = processBinding(
+        bindingValue,
+        context,
+        itemData ?? void 0
+      );
+      if (node.id === "task-detail") {
+        console.log(
+          `[resolveBindings - ${node.id}] Binding for '${key}': '${String(
+            bindingValue
+          )}' -> Resolved:`,
+          resolvedValue
+        );
+      }
+      if (resolvedValue !== void 0) {
+        if (!result.props)
+          result.props = {};
+        result.props[key] = resolvedValue;
+        if (node.id === "task-detail") {
+          console.log(
+            `[resolveBindings - ${node.id}] Set result.props.${key} =`,
+            resolvedValue
+          );
+        }
+      } else {
+        if (node.id === "task-detail") {
+          console.log(
+            `[resolveBindings - ${node.id}] Binding for '${key}' ('${String(
+              bindingValue
+            )}') resolved to undefined. Not setting prop.`
+          );
+        }
+      }
+    }
+  }
+  if (node.events) {
+    const processedEvents = {};
+    for (const eventType in node.events) {
+      const eventConfig = node.events[eventType];
+      processedEvents[eventType] = {
+        ...eventConfig,
+        payload: eventConfig.payload ? processBinding(
+          eventConfig.payload,
+          context,
+          itemData ?? void 0
+        ) : null
+      };
+    }
+    result.events = processedEvents;
+  } else {
+    result.events = null;
+  }
+  const dataBindingValue = result.props?.data ?? result.props?.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 looksLikeTemplate = node.children.length === 1 && (templateChild.id.includes("{{") || templateChild.id.includes("-template"));
+    const isAlreadyExpanded = !looksLikeTemplate && node.children.length > 1;
+    if (isAlreadyExpanded) {
+      result.children = await Promise.all(
+        node.children.map(
+          (existingChild) => resolveBindings(existingChild, context, itemData)
+        )
+        // itemData is tricky here, should it be from parent or is it irrelevant?
+        // For now, assume itemData is not applicable for re-resolving top-level list items this way.
+      );
+    } else {
+      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;
+            makeChildIdsUniqueInInstance(
+              childNodeInstance,
+              instanceId,
+              templateChild.id
+            );
+            const resolvedChild = await resolveBindings(
+              childNodeInstance,
+              context,
+              currentItemAsRecord
+            );
+            if (resolvedChild && !resolvedChild.props)
+              resolvedChild.props = {};
+            if (resolvedChild && 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 = [];
+  }
+  return result;
+}
+function executeAction(action, target, payload, context = {}) {
+  let newContext = { ...context };
+  switch (action) {
+    case "SHOW_DETAIL" /* SHOW_DETAIL */: {
+      const taskId = payload?.taskId;
+      const dialogNodeId = target;
+      if (taskId && dialogNodeId) {
+        const tasksData = getValueByPath(context, "tasks.data");
+        if (Array.isArray(tasksData)) {
+          const foundTask = tasksData.find(
+            (t) => t.id === taskId
+          );
+          if (foundTask) {
+            newContext = setValueByPath(newContext, "selectedTask", foundTask);
+          } else {
+            console.warn(
+              `[executeAction] ${"SHOW_DETAIL" /* SHOW_DETAIL */}: Task with id "${taskId}" not found in tasks.data.`
+            );
+            newContext = setValueByPath(newContext, "selectedTask", null);
+          }
+        } else {
+          console.warn(
+            `[executeAction] ${"SHOW_DETAIL" /* SHOW_DETAIL */}: context.tasks.data is not an array or not found.`
+          );
+          newContext = setValueByPath(newContext, "selectedTask", null);
+        }
+      } else {
+        console.warn(
+          `[executeAction] ${"SHOW_DETAIL" /* SHOW_DETAIL */}: payload.taskId or target (dialogNodeId) was missing. Dialog will be shown without a selected task.`
+        );
+        newContext = setValueByPath(newContext, "selectedTask", null);
+      }
+      newContext = setValueByPath(
+        newContext,
+        // Use the potentially modified newContext (with selectedTask set or cleared)
+        "isTaskDetailDialogVisible",
+        true
+      );
+      break;
+    }
+    case "HIDE_DIALOG" /* HIDE_DIALOG */: {
+      newContext = setValueByPath(newContext, "selectedTask", null);
+      newContext = setValueByPath(
+        newContext,
+        "isTaskDetailDialogVisible",
+        false
+      );
+      break;
+    }
+    case "HIDE_DETAIL" /* HIDE_DETAIL */: {
+      newContext = setValueByPath(newContext, "selectedItemForDetail", null);
+      newContext = setValueByPath(newContext, "isDetailViewOpen", false);
+      break;
+    }
+    case "OPEN_DIALOG" /* OPEN_DIALOG */: {
+      const dialogId = target || payload?.dialogId;
+      if (dialogId === "taskDetailDialogNodeId" || !dialogId) {
+        newContext = setValueByPath(
+          newContext,
+          "isTaskDetailDialogVisible",
+          true
+        );
+      } else {
+        console.warn(
+          `[executeAction] ${"OPEN_DIALOG" /* OPEN_DIALOG */}: Unhandled dialogId: ${dialogId}.`
+        );
+      }
+      break;
+    }
+    case "CLOSE_DIALOG" /* CLOSE_DIALOG */: {
+      const dialogId = target || payload?.dialogId;
+      if (dialogId === "taskDetailDialogNodeId" || !dialogId) {
+        newContext = setValueByPath(
+          newContext,
+          "isTaskDetailDialogVisible",
+          false
+        );
+        newContext = setValueByPath(newContext, "selectedTask", null);
+      } else {
+        console.warn(
+          `[executeAction] ${"CLOSE_DIALOG" /* CLOSE_DIALOG */}: Unhandled dialogId: ${dialogId}.`
+        );
+      }
+      break;
+    }
+    case "UPDATE_DATA" /* UPDATE_DATA */: {
+      let updatedContext = context;
+      if (target && payload && "value" in payload) {
+        updatedContext = setValueByPath(context, target, payload.value);
+      } else {
+        console.warn(
+          `[executeAction] ${"UPDATE_DATA" /* UPDATE_DATA */} requires targetPath (data path) and payload with 'value' property.`
+        );
+      }
+      newContext = updatedContext;
+      break;
+    }
+    case "ADD_ITEM" /* ADD_ITEM */: {
+      if (!target) {
+        console.warn(`[executeAction] ADD_ITEM requires target path.`);
+        break;
+      }
+      if (!payload?.item) {
+        console.warn(
+          `[executeAction] ADD_ITEM requires payload with item property.`
+        );
+        break;
+      }
+      const list = getValueByPath(newContext, target);
+      if (!Array.isArray(list)) {
+        console.warn(
+          `[executeAction] ADD_ITEM failed: target path "${target}" does not resolve to an array.`
+        );
+        break;
+      }
+      const newItem = payload.item;
+      const position = payload.position;
+      let newList;
+      if (position === "start") {
+        newList = [newItem, ...list];
+      } else {
+        newList = [...list, newItem];
+      }
+      newContext = setValueByPath(newContext, target, newList);
+      break;
+    }
+    case "DELETE_ITEM" /* DELETE_ITEM */: {
+      if (!target) {
+        console.warn(`[executeAction] DELETE_ITEM requires target path.`);
+        break;
+      }
+      const itemId = payload?.id;
+      if (itemId === void 0 || itemId === null) {
+        console.warn(
+          `[executeAction] DELETE_ITEM requires payload with id property.`
+        );
+        break;
+      }
+      const list = getValueByPath(newContext, target);
+      if (!Array.isArray(list)) {
+        console.warn(
+          `[executeAction] DELETE_ITEM failed: target path "${target}" does not resolve to an array.`
+        );
+        break;
+      }
+      const newList = list.filter(
+        (item) => item?.id !== itemId
+      );
+      if (newList.length !== list.length) {
+        newContext = setValueByPath(newContext, target, newList);
+      } else {
+        console.warn(
+          `[executeAction] DELETE_ITEM: Item with id "${itemId}" not found in list at path "${target}".`
+        );
+      }
+      break;
+    }
+    case "SAVE_TASK_CHANGES" /* SAVE_TASK_CHANGES */: {
+      if (!target) {
+        console.warn(
+          "[executeAction] SAVE_TASK_CHANGES requires target (task ID)."
+        );
+        break;
+      }
+      const taskIdToSave = target;
+      const currentTasks = getValueByPath(newContext, "tasks.data");
+      const selectedTaskData = getValueByPath(newContext, "selectedTask");
+      if (currentTasks && selectedTaskData && selectedTaskData.id === taskIdToSave) {
+        const updatedTasks = currentTasks.map(
+          (task) => task.id === taskIdToSave ? { ...task, ...selectedTaskData, ...payload } : task
+          // Merge selectedTaskData and any direct payload changes
+        );
+        newContext = setValueByPath(newContext, "tasks.data", updatedTasks);
+        newContext = setValueByPath(newContext, "selectedTask", null);
+        newContext = setValueByPath(
+          newContext,
+          "isTaskDetailDialogVisible",
+          false
+        );
+      } else {
+        console.warn(
+          "[executeAction] SAVE_TASK_CHANGES: Could not save. Task list, selected task, or ID mismatch.",
+          {
+            taskIdToSave,
+            selectedTaskDataId: selectedTaskData?.id,
+            currentTasksExists: !!currentTasks
+          }
+        );
+      }
+      break;
+    }
+    default:
+      console.warn(`[executeAction] Unhandled action type: ${action}`);
+  }
+  return newContext;
+}
+function makeChildIdsUniqueInInstance(parentNode, baseInstanceId, originalTemplateRootId) {
+  if (parentNode.children) {
+    parentNode.children = parentNode.children.map((child) => {
+      let originalChildId = child.id;
+      if (child.id.startsWith(originalTemplateRootId + "-")) {
+        const parts = child.id.split("-");
+        if (parts.length > 1) {
+          originalChildId = parts[parts.length - 1];
+        }
+      }
+      const newChildId = `${baseInstanceId}-${originalChildId}`;
+      const newChild = {
+        ...JSON.parse(JSON.stringify(child)),
+        // Deep clone child
+        id: newChildId
+      };
+      makeChildIdsUniqueInInstance(
+        newChild,
+        baseInstanceId,
+        originalTemplateRootId
+      );
+      return newChild;
+    });
+  }
+}
+
+// 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. **CRITICAL for Buttons:** All \`Button\` nodes **MUST** include a \`label\` property in their \`props\` (e.g., \`{ "props": { "label": "Click Me" } }\`).
+7. Provide event handlers for user interactions - make sure to always include both action and target properties`;
+var LIST_BINDING_GUIDANCE = `8. **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 ActionRouter = class {
+  constructor(apiKey, planningConfig) {
+    this.apiKey = apiKey;
+    this.planningConfig = planningConfig || {
+      prefetchDepth: 1,
+      temperature: 0.5,
+      streaming: false
+    };
+  }
+  /**
+   * Find the appropriate route for an event
+   * @param event - UI event
+   * @param layout - Current UI layout
+   * @param dataContext - Current data context
+   * @returns Route resolution or null if no match
+   */
+  async resolveRoute(event, schema, layout, dataContext, goal, apiKey, userContext) {
+    console.log(
+      `[ActionRouter Debug] resolveRoute called for event type: ${event.type}, nodeId: ${event.nodeId}`
+    );
+    const sourceNode = layout ? findNodeById(layout, event.nodeId) : void 0;
+    const nodeConfig = sourceNode?.events?.[event.type];
+    let actionType;
+    let determinedTargetNodeId;
+    let determinedNodeConfigPayload = null;
+    if (nodeConfig?.action) {
+      actionType = nodeConfig.action;
+      determinedTargetNodeId = nodeConfig.target || sourceNode?.id || "root";
+      determinedNodeConfigPayload = nodeConfig.payload ? { ...nodeConfig.payload } : null;
+    } else {
+      switch (event.type) {
+        case "INIT":
+          actionType = "FULL_REFRESH" /* FULL_REFRESH */;
+          determinedTargetNodeId = "root";
+          break;
+        case "CLICK":
+          actionType = "FULL_REFRESH" /* FULL_REFRESH */;
+          determinedTargetNodeId = "root";
+          break;
+        case "CHANGE":
+          if (sourceNode && ["Input", "Select", "Textarea", "Checkbox", "RadioGroup"].includes(sourceNode.node_type)) {
+            actionType = "UPDATE_DATA" /* UPDATE_DATA */;
+            determinedTargetNodeId = sourceNode.id;
+          } else {
+            actionType = "FULL_REFRESH" /* FULL_REFRESH */;
+            determinedTargetNodeId = "root";
+          }
+          break;
+        default:
+          actionType = "FULL_REFRESH" /* FULL_REFRESH */;
+          determinedTargetNodeId = "root";
+          break;
+      }
+    }
+    if (!Object.values(ActionType).includes(actionType)) {
+      throw new Error(`Invalid action type: ${actionType}`);
+    }
+    const additionalContext = {};
+    if (sourceNode) {
+      additionalContext.sourceNode = sourceNode;
+    }
+    const targetNode = layout ? findNodeById(layout, determinedTargetNodeId) : void 0;
+    if (targetNode) {
+      additionalContext.targetNode = targetNode;
+    }
+    let finalEventPayload = event.payload && Object.keys(event.payload).length > 0 ? { ...event.payload } : null;
+    if (determinedNodeConfigPayload) {
+      finalEventPayload = { ...finalEventPayload || {}, ...determinedNodeConfigPayload };
+    }
+    if (finalEventPayload) {
+      additionalContext.eventPayload = finalEventPayload;
+    }
+    const plannerInput2 = {
+      schema,
+      goal,
+      history: [event],
+      userContext: { ...userContext || {}, ...additionalContext }
+    };
+    if (actionType === "SHOW_DETAIL" /* SHOW_DETAIL */) {
+      const itemData = dataContext.tasks?.data?.find(
+        (task) => task.id === (event.payload?.itemId || event.payload?.taskId)
+      );
+      const updatedDataContext = {
+        ...dataContext,
+        selectedTask: itemData,
+        isTaskDetailDialogVisible: true
+      };
+      const layoutFromLLM = await callPlannerLLM(plannerInput2, apiKey);
+      return {
+        actionType: "UPDATE_CONTEXT" /* UPDATE_CONTEXT */,
+        targetNodeId: determinedTargetNodeId,
+        updatedDataContext,
+        updatedNode: layoutFromLLM
+      };
+    }
+    if (actionType === "HIDE_DIALOG" /* HIDE_DIALOG */) {
+      if (!layout) {
+        throw new Error("Layout cannot be null when handling HIDE_DIALOG");
+      }
+      return {
+        actionType: "UPDATE_CONTEXT" /* UPDATE_CONTEXT */,
+        targetNodeId: determinedTargetNodeId,
+        updatedDataContext: {
+          ...dataContext,
+          selectedTask: null,
+          isTaskDetailDialogVisible: false
+        },
+        updatedNode: layout
+      };
+    }
+    if (["UPDATE_DATA" /* UPDATE_DATA */, "ADD_ITEM" /* ADD_ITEM */, "DELETE_ITEM" /* DELETE_ITEM */, "SAVE_TASK_CHANGES" /* SAVE_TASK_CHANGES */].includes(actionType)) {
+      if (!layout) {
+        throw new Error("Layout cannot be null when handling data update actions");
+      }
+      const targetPathOrId = actionType === "UPDATE_DATA" /* UPDATE_DATA */ ? sourceNode?.bindings?.value || determinedTargetNodeId : determinedTargetNodeId;
+      return {
+        actionType,
+        targetNodeId: determinedTargetNodeId,
+        updatedNode: layout,
+        updatedDataContext: executeAction(actionType, targetPathOrId, finalEventPayload || {}, dataContext)
+      };
+    }
+    if ([
+      "FULL_REFRESH" /* FULL_REFRESH */,
+      "UPDATE_NODE" /* UPDATE_NODE */,
+      "ADD_DROPDOWN" /* ADD_DROPDOWN */,
+      "TOGGLE_STATE" /* TOGGLE_STATE */,
+      "UPDATE_FORM" /* UPDATE_FORM */,
+      "NAVIGATE" /* NAVIGATE */,
+      "UPDATE_CONTEXT" /* UPDATE_CONTEXT */
+    ].includes(actionType)) {
+      const layoutFromLLM = await callPlannerLLM(plannerInput2, apiKey);
+      return {
+        actionType,
+        targetNodeId: determinedTargetNodeId,
+        updatedNode: layoutFromLLM,
+        updatedDataContext: dataContext
+      };
+    }
+    throw new Error(`Unhandled action type: ${actionType}`);
+  }
+};
+function useUIStateEngine({
+  schema,
+  goal,
+  apiKey = "",
+  userContext,
+  planningConfig,
+  dataContext = {},
+  enablePartialUpdates = true
+}) {
+  if (userContext === null) {
+    console.warn(
+      "useUIStateEngine: userContext was explicitly set to null. This is an allowed but discouraged value. Consider using undefined if you intend to omit the user context."
+    );
+  }
+  const [state, dispatch] = React.useReducer(uiReducer, initialState);
+  const stateRef = React.useRef(state);
+  const router = new ActionRouter(apiKey, planningConfig);
+  React.useEffect(() => {
+    stateRef.current = state;
+  }, [state]);
+  const handleEvent = React.useCallback(
+    async (event, currentResolvedLayout, updatedDataContext) => {
+      dispatch({ type: "UI_EVENT", event });
+      dispatch({ type: "LOADING", isLoading: true });
+      try {
+        let resolvedNode;
+        let actionTypeForDispatch = "FULL_REFRESH" /* FULL_REFRESH */;
+        let targetNodeIdForDispatch = "root";
+        const layoutForRouting = currentResolvedLayout || stateRef.current.layout;
+        const contextForRouting = updatedDataContext || dataContext;
+        console.log(
+          "[state.ts handleEvent] About to call router.resolveRoute. enablePartialUpdates:",
+          enablePartialUpdates
+        );
+        console.log(
+          "[state.ts handleEvent] layoutForRouting ID (if exists):",
+          layoutForRouting?.id
+        );
+        console.log(
+          "[state.ts handleEvent] contextForRouting:",
+          JSON.stringify(contextForRouting, null, 2)
+        );
+        const route = await router.resolveRoute(
+          event,
+          schema,
+          layoutForRouting,
+          contextForRouting,
+          goal,
+          apiKey,
+          userContext
+        );
+        console.log(
+          "[state.ts handleEvent] router.resolveRoute returned:",
+          route
+        );
+        if (route) {
+          console.log("Resolved route:", route);
+          actionTypeForDispatch = route.actionType;
+          targetNodeIdForDispatch = route.targetNodeId;
+          if (route.updatedDataContext) {
+            dispatch({
+              type: "SET_DATA_CONTEXT",
+              payload: route.updatedDataContext
+            });
+          }
+          if (!route.updatedNode) {
+            throw new Error(
+              "No updatedNode returned from router.resolveRoute. This should not happen."
+            );
+          }
+          resolvedNode = route.updatedNode;
+        } else {
+          throw new Error("No route returned from router.resolveRoute");
+        }
+        switch (actionTypeForDispatch) {
+          case "UPDATE_NODE" /* UPDATE_NODE */:
+          case "SHOW_DETAIL" /* SHOW_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 "HIDE_DIALOG" /* HIDE_DIALOG */:
+            dispatch({
+              type: "PARTIAL_UPDATE",
+              nodeId: targetNodeIdForDispatch,
+              node: resolvedNode
+            });
+            break;
+          case "SAVE_TASK_CHANGES" /* SAVE_TASK_CHANGES */:
+            dispatch({ type: "AI_RESPONSE", node: resolvedNode });
+            break;
+          case "FULL_REFRESH" /* FULL_REFRESH */:
+          default:
+            dispatch({ type: "AI_RESPONSE", node: resolvedNode });
+            break;
+        }
+      } catch (e) {
+        const errorMessage = e instanceof Error ? e.message : String(e);
+        dispatch({ type: "ERROR", message: errorMessage });
+        systemEvents.emit(
+          createSystemEvent("PLAN_ERROR" /* PLAN_ERROR */, {
+            error: e instanceof Error ? e : new Error(String(e))
+          })
+        );
+      } finally {
+        dispatch({ type: "LOADING", isLoading: false });
+      }
+    },
+    [
+      goal,
+      schema,
+      userContext,
+      dataContext,
+      apiKey,
+      enablePartialUpdates,
+      dispatch
+    ]
+  );
+  React.useEffect(() => {
+    const initialFetch = async () => {
+      dispatch({ type: "LOADING", isLoading: true });
+      try {
+        const initEvent = {
+          type: "INIT",
+          nodeId: "system",
+          timestamp: Date.now(),
+          payload: null
+        };
+        const route = await router.resolveRoute(
+          initEvent,
+          schema,
+          stateRef.current.layout,
+          dataContext,
+          goal,
+          apiKey,
+          userContext
+        );
+        if (!route) {
+          console.error(
+            "[UIStateEngine] Initial fetch: Failed to resolve route for INIT event."
+          );
+          throw new Error("Failed to initialize UI due to routing error.");
+        }
+        if (route.updatedDataContext) {
+          dispatch({
+            type: "SET_DATA_CONTEXT",
+            payload: route.updatedDataContext
+          });
+        }
+        if (!route.updatedNode) {
+          throw new Error(
+            "No updatedNode returned from router.resolveRoute on initial fetch. This should not happen."
+          );
+        }
+        const node = route.updatedNode;
+        dispatch({ type: "AI_RESPONSE", node });
+      } catch (e) {
+        const errorMessage = e instanceof Error ? e.message : String(e);
+        dispatch({ type: "ERROR", message: errorMessage });
+        systemEvents.emit(
+          createSystemEvent("PLAN_ERROR" /* PLAN_ERROR */, {
+            error: e instanceof Error ? e : new Error(String(e))
+          })
+        );
+      } finally {
+        dispatch({ type: "LOADING", isLoading: false });
+      }
+    };
+    initialFetch();
+  }, [goal, schema, dispatch]);
+  return {
+    state,
+    dispatch,
+    handleEvent
+  };
+}
+
+// src/adapters/shadcn.tsx
+init_utils();
+
+// components/ui/dialog.tsx
+init_utils();
+function Dialog({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { "data-slot": "dialog", ...props });
+}
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DialogPrimitive__namespace.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__ */ jsxRuntime.jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      DialogPrimitive__namespace.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__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.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__ */ jsxRuntime.jsx(lucideReact.XIcon, {}),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    DialogPrimitive__namespace.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-lg leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DialogPrimitive__namespace.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
     }
-  }, [append, goal, schema, state.history, state.layout, stop, userContext, router, mockMode, dataContext, enablePartialUpdates]);
-  react.useEffect(() => {
+  );
+}
+
+// components/ui/card.tsx
+init_utils();
+function Card({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
     {
-      try {
-        systemEvents.emit(
-          createSystemEvent("PLAN_RESPONSE_CHUNK" /* PLAN_RESPONSE_CHUNK */, {
-            chunk: data.content,
-            isComplete: true
-          })
-        );
-        const jsonMatch = data.content.match(/```(?:json)?\s*([\s\S]*?)\s*```/) || [null, data.content];
-        const jsonStr = jsonMatch[1].trim();
-        const parsedJson = JSON.parse(jsonStr);
-        const validatedNode = uiSpecNode.parse(parsedJson);
-        const routeInfoStr = sessionStorage.getItem("currentRoute");
-        if (routeInfoStr && enablePartialUpdates) {
-          try {
-            const routeInfo = JSON.parse(routeInfoStr);
-            switch (routeInfo.actionType) {
-              case "FULL_REFRESH" /* FULL_REFRESH */:
-                dispatch({ type: "AI_RESPONSE", node: validatedNode });
-                break;
-              case "UPDATE_NODE" /* UPDATE_NODE */:
-              case "SHOW_DETAIL" /* SHOW_DETAIL */:
-              case "HIDE_DETAIL" /* HIDE_DETAIL */:
-              case "TOGGLE_STATE" /* TOGGLE_STATE */:
-              case "ADD_DROPDOWN" /* ADD_DROPDOWN */:
-              case "UPDATE_FORM" /* UPDATE_FORM */:
-              case "NAVIGATE" /* NAVIGATE */:
-                dispatch({
-                  type: "PARTIAL_UPDATE",
-                  nodeId: routeInfo.targetNodeId,
-                  node: validatedNode
-                });
-                break;
-              default:
-                dispatch({ type: "AI_RESPONSE", node: validatedNode });
-            }
-            sessionStorage.removeItem("currentRoute");
-          } catch (e) {
-            console.error("Error parsing route info:", e);
-            dispatch({ type: "AI_RESPONSE", node: validatedNode });
+      "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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Root, { "data-slot": "select", ...props });
+}
+function SelectValue({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Value, { "data-slot": "select-value", ...props });
+}
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    SelectPrimitive__namespace.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__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, { className: "size-4 opacity-50" }) })
+      ]
+    }
+  );
+}
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    SelectPrimitive__namespace.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__ */ jsxRuntime.jsx(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SelectPrimitive__namespace.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
           }
-        } else {
-          dispatch({ type: "AI_RESPONSE", node: validatedNode });
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(SelectScrollDownButton, {})
+      ]
+    }
+  ) });
+}
+function SelectItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    SelectPrimitive__namespace.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__ */ jsxRuntime.jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, { className: "size-4" }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemText, { children })
+      ]
+    }
+  );
+}
+function SelectScrollUpButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SelectPrimitive__namespace.ScrollUpButton,
+    {
+      "data-slot": "select-scroll-up-button",
+      className: cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUpIcon, { className: "size-4" })
+    }
+  );
+}
+function SelectScrollDownButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SelectPrimitive__namespace.ScrollDownButton,
+    {
+      "data-slot": "select-scroll-down-button",
+      className: cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, { className: "size-4" })
+    }
+  );
+}
+
+// components/ui/checkbox.tsx
+init_utils();
+function Checkbox({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    CheckboxPrimitive__namespace.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__ */ jsxRuntime.jsx(
+        CheckboxPrimitive__namespace.Indicator,
+        {
+          "data-slot": "checkbox-indicator",
+          className: "flex items-center justify-center text-current transition-none",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, { className: "size-3.5" })
         }
-        systemEvents.emit(
-          createSystemEvent("PLAN_COMPLETE" /* PLAN_COMPLETE */, {
-            layout: validatedNode,
-            executionTimeMs: 0
-            // Not available here
-          })
-        );
-      } catch (parseError) {
-        console.error("Failed to parse LLM response:", parseError);
-        dispatch({
-          type: "ERROR",
-          message: "Failed to parse LLM response"
-        });
-        systemEvents.emit(
-          createSystemEvent("PLAN_ERROR" /* PLAN_ERROR */, {
-            error: parseError instanceof Error ? parseError : new Error("Parse error")
-          })
-        );
-      }
+      )
     }
-  }, [data.content, error, isLoading, enablePartialUpdates]);
-  react.useEffect(() => {
-    const input = {
-      schema,
-      goal,
-      history: [],
-      userContext
-    };
-    if (mockMode) {
-      const node = mockPlanner();
-      dispatch({ type: "AI_RESPONSE", node });
-    } else {
-      const prompt = buildPrompt(input);
-      append({
-        content: prompt,
-        role: "user"
-      });
+  );
+}
+
+// components/ui/radio-group.tsx
+init_utils();
+function RadioGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    RadioGroupPrimitive__namespace.Root,
+    {
+      "data-slot": "radio-group",
+      className: cn("grid gap-3", className),
+      ...props
     }
-  }, [append, goal, schema, userContext, mockMode]);
-  return {
-    state,
-    dispatch,
-    handleEvent
-  };
+  );
+}
+function RadioGroupItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    RadioGroupPrimitive__namespace.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__ */ jsxRuntime.jsx(
+        RadioGroupPrimitive__namespace.Indicator,
+        {
+          "data-slot": "radio-group-indicator",
+          className: "relative flex items-center justify-center",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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__ */ jsxRuntime.jsx(
+    TabsPrimitive__namespace.Root,
+    {
+      "data-slot": "tabs",
+      className: cn("flex flex-col gap-2", className),
+      ...props
+    }
+  );
+}
+function TabsList({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TabsPrimitive__namespace.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__ */ jsxRuntime.jsx(
+    TabsPrimitive__namespace.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__ */ jsxRuntime.jsx(
+    TabsPrimitive__namespace.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__ */ jsxRuntime.jsx(
+    LabelPrimitive__namespace.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__ */ jsxRuntime.jsx("div", { className: "w-full h-8 bg-gray-200 animate-pulse rounded" });
 var ShimmerTable = ({ rows = 3 }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full space-y-2", children: [
   /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-10 bg-gray-200 animate-pulse rounded" }),
@@ -758,117 +2140,846 @@ var ShimmerCard = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-f
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-5/6 h-4 bg-gray-200 animate-pulse rounded" })
   ] })
 ] });
-var Container = (props) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-full ${props.className || ""}`, style: props.style, children: props.children });
-var Header = ({ title }) => /* @__PURE__ */ jsxRuntime.jsx("header", { className: "py-4 px-6 border-b mb-4", children: /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl font-semibold", children: title }) });
+var Container = (props) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: `autoui-mock-container ${props.className || ""}`, children: props.children });
+var Header = ({
+  title,
+  className
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  "header",
+  {
+    className: `py-4 px-6 border-b border-gray-300 mb-4 bg-gray-50 dark:bg-gray-800 ${className || ""}`,
+    children: /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl font-semibold text-gray-800 dark:text-white", children: title })
+  }
+);
 var Button = ({ onClick, children, variant = "default" }) => /* @__PURE__ */ jsxRuntime.jsx(
   "button",
   {
-    className: `px-4 py-2 rounded font-medium ${variant === "default" ? "bg-blue-600 text-white" : variant === "outline" ? "border border-gray-300 text-gray-700" : "bg-red-600 text-white"}`,
-    onClick,
+    className: `px-4 py-2 rounded-md font-medium transition-colors ${variant === "default" ? "bg-blue-600 text-white hover:bg-blue-700" : variant === "outline" ? "border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800" : "bg-red-600 text-white hover:bg-red-700"}`,
+    onClick: () => onClick?.(),
     children
   }
 );
-var Table = ({ items = [], fields = [], onSelect, selectable }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full border rounded-lg overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full", children: [
-  /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "bg-gray-50", children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: fields.map((field) => /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: field.label }, field.key)) }) }),
-  /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "bg-white divide-y divide-gray-200", children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
-    "tr",
-    {
-      onClick: () => selectable && onSelect && onSelect(item),
-      className: selectable ? "cursor-pointer hover:bg-gray-50" : "",
-      children: fields.map((field) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-500", children: item[field.key] }, field.key))
-    },
-    index
-  )) })
-] }) });
 var Detail = ({ data, fields = [], title, visible = true, onBack }) => {
-  if (!visible) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full border rounded-lg p-6 space-y-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [
-      title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-medium", children: title }),
+  if (!visible) {
+    console.log(
+      `[Detail Component Internal] Detail component for node id: ${data?.id || title || "Unknown Detail"} is NOT RENDERING because visible is ${visible}.`
+    );
+    return null;
+  }
+  console.log(
+    `[Detail Component Internal] Detail component for node id: ${data?.id || title || "Unknown Detail"} IS RENDERING because visible is ${visible}.`
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full border border-gray-300 dark:border-gray-700 rounded-lg p-6 space-y-4 bg-white dark:bg-gray-900 shadow-sm", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center border-b border-gray-200 dark:border-gray-700 pb-3", children: [
+      title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-medium text-gray-800 dark:text-white", children: title }),
       onBack && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", onClick: onBack, children: "Back" })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: fields.map((field) => {
-      if (field.type === "heading") {
-        return /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-semibold", children: data?.[field.key] }, field.key);
-      }
-      if (field.type === "content") {
-        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-gray-700", children: data?.[field.key] }, field.key);
+      try {
+        if (field.type === "heading") {
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "h3",
+            {
+              className: "text-xl font-semibold text-gray-800 dark:text-white",
+              children: data?.[field.key] ?? ""
+            },
+            field.key
+          );
+        }
+        if (field.type === "content") {
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "text-sm text-gray-700 dark:text-gray-300",
+              children: data?.[field.key] ?? ""
+            },
+            field.key
+          );
+        }
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "flex flex-col border-b border-gray-100 dark:border-gray-800 py-2",
+            children: [
+              field.label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-600 dark:text-gray-400 font-medium", children: field.label }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-800 dark:text-gray-200", children: data?.[field.key] ?? "" })
+            ]
+          },
+          field.key
+        );
+      } catch (e) {
+        console.error(
+          `[Detail Component Internal] Error rendering field: ${field?.key}`,
+          e,
+          "Field data:",
+          field,
+          "Full data object:",
+          data
+        );
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          "Error rendering field: ",
+          field?.key
+        ] }, field?.key || "error-field");
       }
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-        field.label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-500", children: field.label }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: data?.[field.key] })
-      ] }, field.key);
     }) })
   ] });
 };
-var 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 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, processEvent) => {
+  const eventConfig = node.events?.[uiEventType2];
+  if (!processEvent || !eventConfig)
+    return void 0;
+  return (eventPayload) => {
+    const fullEvent = {
+      type: uiEventType2,
+      nodeId: node.id,
+      timestamp: Date.now(),
+      payload: {
+        ...eventConfig.payload || {},
+        ...eventPayload || {}
+      }
+    };
+    processEvent(fullEvent);
   };
 };
 var adapterMap = {
-  Container: (node) => /* @__PURE__ */ jsxRuntime.jsx(Container, { style: node.props?.style, className: node.props?.className, children: node.children?.map((child) => renderNode(child)) }),
-  Header: (node) => /* @__PURE__ */ jsxRuntime.jsx(Header, { title: node.props?.title || "Untitled" }),
-  Button: (node) => /* @__PURE__ */ jsxRuntime.jsx(
-    Button,
+  Container: (node, processEvent) => {
+    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__default.default.cloneElement(renderNode(child, processEvent), { key: child.id })
+      )
+    );
+    const style = typeof styleProp === "string" ? parseStyleString(styleProp) : styleProp;
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    Header,
     {
-      variant: node.props?.variant,
-      onClick: createEventHandler(node, "onClick"),
-      children: node.props?.label || "Button"
+      title: getSafeProp(node.props, "title", isString, "Untitled"),
+      className: getSafeProp(node.props, "className", isString, "")
     }
   ),
-  ListView: (node) => /* @__PURE__ */ jsxRuntime.jsx(
-    Table,
+  Button: (node, processEvent) => /* @__PURE__ */ jsxRuntime.jsx(
+    Button,
     {
-      items: node.bindings?.items || [],
-      fields: node.bindings?.fields || [],
-      selectable: node.props?.selectable,
-      onSelect: createEventHandler(node, "onSelect")
+      variant: getSafeProp(node.props, "variant", isButtonVariant, "default"),
+      onClick: createEventHandler(node, "onClick", "CLICK", processEvent),
+      children: getSafeProp(node.props, "label", isString, "Button")
     }
   ),
-  Detail: (node) => /* @__PURE__ */ jsxRuntime.jsx(
-    Detail,
-    {
-      data: node.bindings?.data,
-      fields: node.bindings?.fields || [],
-      title: node.props?.title,
-      visible: node.props?.visible !== false,
-      onBack: createEventHandler(node, "onBack")
+  ListView: (node, processEvent) => {
+    const {
+      className,
+      style: styleProp,
+      key,
+      // Exclude data prop (array) from being spread onto the DOM element
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      data: _data,
+      ...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__default.default.cloneElement(renderNode(child, processEvent), { key: child.id })
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "autoui-listview-container space-y-2",
+          className
+        ),
+        style,
+        ...restProps,
+        "data-id": node.id,
+        children
+      },
+      key
+    );
+  },
+  Detail: (node, processEvent) => {
+    const data = getSafeProp(
+      node.props,
+      "data",
+      isRecordWithReactNodeValues,
+      {}
+    );
+    const fields = getSafeProp(
+      node.props,
+      "fields",
+      isArrayOf(isDetailFieldObject),
+      []
+    );
+    const title = getSafeProp(node.props, "title", isString, "");
+    const visible = getSafeProp(node.props, "visible", isBoolean, true);
+    console.log(
+      `[Adapter Debug] Rendering Detail: id=${node.id}, props=`,
+      JSON.stringify(node.props),
+      `effective visible=${visible}`,
+      `typeof fields=${typeof fields}`,
+      `Array.isArray(fields)=${Array.isArray(fields)}`
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Detail,
+      {
+        data,
+        fields,
+        title,
+        visible,
+        onBack: createEventHandler(node, "onBack", "CLICK", processEvent)
+      }
+    );
+  },
+  Card: (node, processEvent) => {
+    const { className, style: styleProp, key, ...restProps } = node.props || {};
+    const children = node.children?.map(
+      (child) => React__default.default.cloneElement(renderNode(child, processEvent), { key: child.id })
+    );
+    const style = typeof styleProp === "string" ? parseStyleString(styleProp) : styleProp;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Card,
+      {
+        className: cn("autoui-card", className),
+        style,
+        ...restProps,
+        "data-id": node.id,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "p-0", children: [
+          " ",
+          children
+        ] })
+      },
+      key
+    );
+  },
+  Input: (node, processEvent) => {
+    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",
+        processEvent
+      );
+      if (handler)
+        handler({ value: e.target.value });
+    };
+    const handleFocus = () => {
+      const handler = createEventHandler(
+        node,
+        "onFocus",
+        "FOCUS",
+        processEvent
+      );
+      if (handler)
+        handler({});
+    };
+    const handleBlur = () => {
+      const handler = createEventHandler(node, "onBlur", "BLUR", processEvent);
+      if (handler)
+        handler({});
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid w-full max-w-sm items-center gap-1.5", children: [
+      label && /* @__PURE__ */ jsxRuntime.jsx(Label2, { htmlFor: name, children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Input,
+        {
+          id: name,
+          name,
+          placeholder,
+          disabled,
+          value,
+          onChange: handleChange,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          className
+        }
+      )
+    ] });
+  },
+  Select: (node, processEvent) => {
+    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",
+        processEvent
+      );
+      if (handler)
+        handler({ value: selectedValue });
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn("grid w-full max-w-sm items-center gap-1.5", className),
+        children: [
+          label && /* @__PURE__ */ jsxRuntime.jsx(Label2, { htmlFor: name, children: label }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Select,
+            {
+              name,
+              value,
+              onValueChange: handleValueChange,
+              disabled,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { id: name, children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  },
+  Textarea: (node, processEvent) => {
+    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",
+        processEvent
+      );
+      if (handler)
+        handler({ value: e.target.value });
+    };
+    const handleFocus = () => {
+      const handler = createEventHandler(
+        node,
+        "onFocus",
+        "FOCUS",
+        processEvent
+      );
+      if (handler)
+        handler({});
+    };
+    const handleBlur = () => {
+      const handler = createEventHandler(node, "onBlur", "BLUR", processEvent);
+      if (handler)
+        handler({});
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid w-full gap-1.5", children: [
+      label && /* @__PURE__ */ jsxRuntime.jsx(Label2, { htmlFor: name, children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Textarea,
+        {
+          id: name,
+          name,
+          placeholder,
+          disabled,
+          rows,
+          value,
+          onChange: handleChange,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          className
+        }
+      )
+    ] }, key);
+  },
+  Checkbox: (node, processEvent) => {
+    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",
+          processEvent
+        );
+        if (handler)
+          handler({ checked: isChecked });
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn("flex items-center space-x-2", className),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Checkbox,
+            {
+              id: name,
+              name,
+              checked,
+              disabled,
+              onCheckedChange: handleCheckedChange
+            }
+          ),
+          label && /* @__PURE__ */ jsxRuntime.jsx(Label2, { htmlFor: name, className: "cursor-pointer", children: label })
+        ]
+      },
+      key
+    );
+  },
+  RadioGroup: (node, processEvent) => {
+    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",
+        processEvent
+      );
+      if (handler)
+        handler({ value: selectedValue });
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn("grid gap-1.5", className),
+        children: [
+          label && /* @__PURE__ */ jsxRuntime.jsx(Label2, { className: "mb-1", children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            RadioGroup,
+            {
+              name,
+              value,
+              onValueChange: handleValueChange,
+              disabled,
+              className: "flex flex-col space-y-1",
+              children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  RadioGroupItem,
+                  {
+                    value: option.value,
+                    id: `${name}-${option.value}`
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Label2,
+                  {
+                    htmlFor: `${name}-${option.value}`,
+                    className: "cursor-pointer",
+                    children: option.label
+                  }
+                )
+              ] }, option.value))
+            }
+          )
+        ]
+      },
+      key
+    );
+  },
+  Tabs: (node, processEvent) => {
+    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",
+        processEvent
+      );
+      if (handler)
+        handler({ value });
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      Tabs,
+      {
+        defaultValue,
+        onValueChange: handleValueChange,
+        className: cn("autoui-tabs w-full", className),
+        "data-id": node.id,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TabsList, { children: rawTabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: tab.value, children: tab.label }, tab.value)) }),
+          rawTabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: tab.value, children: tab.content ? renderNode(tab.content, processEvent) : null }, tab.value))
+        ]
+      },
+      key
+    );
+  },
+  Dialog: (node, processEvent) => {
+    const isOpen = getSafeBinding(
+      node.bindings,
+      "visible",
+      isBoolean,
+      // Check bindings.visible (planner output)
+      getSafeProp(
+        node.props,
+        "open",
+        isBoolean,
+        // Then props.open (if binding resolution put it there)
+        getSafeProp(node.props, "visible", isBoolean, false)
+        // Then props.visible (if binding resolution put it there under 'visible')
+      )
+    );
+    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,
+      // ADD 'visible' to destructuring to prevent it from going into restProps
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      visible: _visibleProp,
+      ...restProps
+    } = node.props || {};
+    const children = node.children?.map(
+      (child) => React__default.default.cloneElement(renderNode(child, processEvent), { 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
+          processEvent
+        );
+        if (handler) {
+          handler({});
+        }
+      }
+    };
+    console.log(
+      `[Adapter Debug] Rendering Dialog: id=${node.id}, props=`,
+      node.props,
+      `isOpen=${isOpen}`
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Dialog,
+      {
+        open: isOpen,
+        onOpenChange: handleOpenChange,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          DialogContent,
+          {
+            className: cn("autoui-dialog-content", className),
+            ...restProps,
+            "data-id": node.id,
+            children: [
+              (title || description) && /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
+                title && /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: title }),
+                description && /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { children: description })
+              ] }),
+              children
+            ]
+          }
+        )
+      },
+      key
+    );
+  },
+  Heading: (node) => {
+    const { className, style: styleProp, key, ...restProps } = node.props || {};
+    const text = getSafeProp(node.props, "text", isString, "Heading");
+    let level = getSafeProp(
+      node.props,
+      "level",
+      (v) => typeof v === "number" && v >= 1 && v <= 6,
+      2
+    );
+    if (typeof level !== "number" || level < 1 || level > 6) {
+      level = 2;
     }
-  )
+    const Tag = `h${level}`;
+    const style = typeof styleProp === "string" ? parseStyleString(styleProp) : styleProp;
+    const headingStyles = {
+      1: "scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl",
+      2: "scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0",
+      3: "scroll-m-20 text-2xl font-semibold tracking-tight",
+      4: "scroll-m-20 text-xl font-semibold tracking-tight"
+      // Add styles for h5, h6 if needed, using text-lg, text-base etc.
+    }[level] || "text-lg font-semibold";
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+      "p",
+      {
+        className: cn("leading-7", className),
+        style,
+        ...restProps,
+        children: text
+      },
+      key
+    );
+  },
+  Badge: (node) => {
+    const { className, style: styleProp, key, ...restProps } = node.props || {};
+    const text = getSafeProp(node.props, "text", isString, "");
+    const style = typeof styleProp === "string" ? parseStyleString(styleProp) : styleProp;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: cn(
+          "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium bg-gray-100 text-gray-800",
+          className
+        ),
+        style,
+        ...restProps,
+        children: text
+      },
+      key
+    );
+  }
 };
-function renderNode(node) {
-  const Component = adapterMap[node.type];
-  if (Component) {
-    return Component(node);
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2 border border-red-300 rounded", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-red-500", children: [
-      "Unsupported component: ",
-      node.type
-    ] }),
-    node.children?.map((child) => renderNode(child))
-  ] });
+function renderNode(node, processEvent) {
+  const mappedComponent = adapterMap[node.node_type];
+  if (mappedComponent) {
+    return mappedComponent(node, processEvent);
+  }
+  console.warn(`Unknown node type: ${node.node_type}`);
+  return React__default.default.createElement(
+    Container,
+    {},
+    `Unknown node type: ${node.node_type}`
+  );
 }
-async function renderNode2(node, adapter = "shadcn") {
+var renderedNodesCache = /* @__PURE__ */ new Map();
+var MAX_CACHE_SIZE = 10;
+var CACHE_TTL = 5e3;
+var clearRenderedNodeCacheEntry = (cacheKey) => {
+  renderedNodesCache.delete(cacheKey);
+  console.log(`[Renderer Cache] Cleared entry FOR REAL for key: ${cacheKey}`);
+};
+var getRendererCacheKey = (node) => {
+  if (node.id === "task-detail") {
+    const dataId = node.props?.data?.id;
+    return `${node.id}:${node.props?.visible}:${dataId || "no-data-selected"}`;
+  }
+  let propsString = "null";
+  try {
+    propsString = JSON.stringify(node.props);
+  } catch (_e) {
+    console.warn(
+      `[Renderer Cache Key] Error stringifying node.props for ID ${node.id}, using 'null' for props part of key.`
+    );
+  }
+  let bindingsString = "null";
+  try {
+    bindingsString = JSON.stringify(node.bindings);
+  } catch (_e) {
+    console.warn(
+      `[Renderer Cache Key] Error stringifying node.bindings for ID ${node.id}, using 'null' for bindings part of key.`
+    );
+  }
+  return `${node.id}:${propsString}:${bindingsString}`;
+};
+async function renderNode2(node, adapter = "shadcn", processEvent) {
   const startTime = Date.now();
+  const cacheKey = getRendererCacheKey(node);
+  const cachedItem = renderedNodesCache.get(cacheKey);
+  if (cachedItem && startTime - cachedItem.timestamp < CACHE_TTL) {
+    return cachedItem.element;
+  }
+  if (node.id === "task-detail") {
+    let safeNodeString = "Error stringifying node for log";
+    let propsToLog = "{}";
+    try {
+      const clonedProps = node.props ? { ...node.props } : {};
+      if (clonedProps && clonedProps.data) {
+        clonedProps.data = `Data present (type: ${typeof clonedProps.data}, logging suppressed)`;
+      }
+      if (clonedProps && Array.isArray(clonedProps.fields)) {
+        clonedProps.fields = `Fields array (length: ${clonedProps.fields.length}, logging suppressed)`;
+      } else if (clonedProps && clonedProps.fields) {
+        clonedProps.fields = `Fields present (type: ${typeof clonedProps.fields}, logging suppressed)`;
+      }
+      propsToLog = JSON.stringify(clonedProps);
+      const nodeToLog = {
+        id: node.id,
+        node_type: node.node_type,
+        props: "See props above",
+        bindings: node.bindings,
+        events: node.events,
+        children: node.children ? `Children array (length: ${node.children.length}, logging suppressed)` : null
+      };
+      safeNodeString = JSON.stringify(nodeToLog);
+    } catch (e) {
+      if (e instanceof Error) {
+        safeNodeString = `Error stringifying node for log: ${e.message}`;
+      } else {
+        safeNodeString = `Error stringifying node for log: Unknown error`;
+      }
+      if (node.props === void 0)
+        propsToLog = "undefined";
+      else if (node.props === null)
+        propsToLog = "null";
+    }
+    console.log(
+      `[Renderer renderNode BEFORE RENDER_START event] About to call adapter for task-detail. ID: ${node.id}, Visible: ${node.props?.visible}, Props (safe): ${propsToLog}, Bindings: ${JSON.stringify(
+        node.bindings
+      )}, Node (safe): ${safeNodeString}`
+    );
+  }
   await systemEvents.emit(
     createSystemEvent("RENDER_START" /* RENDER_START */, { layout: node })
   );
   let result;
   switch (adapter) {
     case "shadcn":
-      result = renderNode(node);
+      result = renderNode(node, processEvent);
       break;
     default:
       console.warn(`Unsupported adapter: ${adapter}, falling back to shadcn`);
-      result = renderNode(node);
+      result = renderNode(node, processEvent);
+  }
+  if (node.id === "task-detail") {
+    let elementType = void 0;
+    if (result && typeof result.type === "function") {
+      elementType = result.type.name;
+    } else if (result && typeof result.type === "string") {
+      elementType = result.type;
+    } else if (result && typeof result.type === "object" && result.type !== null) {
+      const componentType2 = result.type;
+      if (typeof componentType2.displayName === "string") {
+        elementType = componentType2.displayName;
+      }
+    }
+    console.log(
+      `[Renderer renderNode] Adapter for task-detail returned element. Element type:`,
+      elementType
+    );
   }
   await systemEvents.emit(
     createSystemEvent("RENDER_COMPLETE" /* RENDER_COMPLETE */, {
@@ -876,13 +2987,23 @@ async function renderNode2(node, adapter = "shadcn") {
       renderTimeMs: Date.now() - startTime
     })
   );
+  renderedNodesCache.set(cacheKey, {
+    element: result,
+    timestamp: startTime
+  });
+  if (renderedNodesCache.size > MAX_CACHE_SIZE) {
+    const oldestEntry = renderedNodesCache.entries().next().value;
+    if (oldestEntry) {
+      renderedNodesCache.delete(oldestEntry[0]);
+    }
+  }
   return result;
 }
 function renderShimmer(node, adapter = "shadcn") {
   if (!node) {
     return /* @__PURE__ */ jsxRuntime.jsx(ShimmerBlock, {});
   }
-  switch (node.type) {
+  switch (node.node_type) {
     case "ListView":
       return /* @__PURE__ */ jsxRuntime.jsx(ShimmerTable, { rows: 3 });
     case "Detail":
@@ -894,113 +3015,6 @@ function renderShimmer(node, adapter = "shadcn") {
   }
 }
 
-// src/core/bindings.ts
-function getValueByPath(context, path) {
-  const parts = path.split(".");
-  let current = context;
-  for (const part of parts) {
-    if (current === null || current === void 0) {
-      return void 0;
-    }
-    if (typeof current !== "object") {
-      return void 0;
-    }
-    current = current[part];
-  }
-  return current;
-}
-function setValueByPath(context, path, value) {
-  const result = { ...context };
-  const parts = path.split(".");
-  let current = result;
-  for (let i = 0; i < parts.length - 1; i++) {
-    const part = parts[i];
-    if (!(part in current) || current[part] === null || current[part] === void 0) {
-      current[part] = {};
-    }
-    current = current[part];
-    if (typeof current !== "object") {
-      current = {};
-    }
-  }
-  const lastPart = parts[parts.length - 1];
-  current[lastPart] = value;
-  return result;
-}
-function processBinding(binding, context) {
-  if (typeof binding === "string") {
-    return getValueByPath(context, binding);
-  }
-  if (Array.isArray(binding)) {
-    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);
-    }
-    return result;
-  }
-  return binding;
-}
-async function resolveBindings(node, context) {
-  await systemEvents.emit(
-    createSystemEvent("BINDING_RESOLUTION_START" /* BINDING_RESOLUTION_START */, { layout: node })
-  );
-  const result = {
-    ...node,
-    props: node.props ? { ...node.props } : void 0,
-    events: node.events ? { ...node.events } : void 0
-  };
-  if (node.bindings) {
-    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] = value;
-      }
-    }
-  }
-  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) {
-  let newContext = { ...context };
-  switch (action) {
-    case "VIEW_DETAIL": {
-      if (payload?.item) {
-        newContext = setValueByPath(newContext, "selected", payload.item);
-      }
-      break;
-    }
-    case "HIDE_DETAIL": {
-      newContext = setValueByPath(newContext, "selected", null);
-      break;
-    }
-    case "SET_VALUE": {
-      if (payload?.path && "value" in payload) {
-        const path = String(payload.path);
-        newContext = setValueByPath(newContext, path, payload.value);
-      }
-      break;
-    }
-    // Add more actions as needed
-    default:
-      console.warn(`Unknown action: ${action}`);
-  }
-  return newContext;
-}
-
 // src/core/events.ts
 var EventManager = class {
   constructor() {
@@ -1008,7 +3022,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
@@ -1041,7 +3055,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
    */
@@ -1062,13 +3076,15 @@ 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;
@@ -1085,6 +3101,45 @@ function createEventHook(eventTypes, hook, options) {
     }
   };
 }
+
+// src/core/component-detection.ts
+function areShadcnComponentsAvailable() {
+  try {
+    init_button();
+    return true;
+  } catch (error) {
+    return false;
+  }
+}
+function getMissingComponentsMessage() {
+  return `Missing required shadcn components. Please run:
+> npm run setup-shadcn`;
+}
+function correctListBindingsRecursive(node, dataContext) {
+  const correctedNode = JSON.parse(JSON.stringify(node));
+  if ((correctedNode.node_type === "ListView" || correctedNode.node_type === "Table") && correctedNode.bindings?.data) {
+    const bindingPath = correctedNode.bindings.data;
+    if (typeof bindingPath === "string") {
+      const pathSegments = bindingPath.split(".");
+      const mainKey = pathSegments[0];
+      if (pathSegments.length === 1) {
+        const potentialDataContextEntry = dataContext[mainKey];
+        if (potentialDataContextEntry && typeof potentialDataContextEntry === "object" && potentialDataContextEntry !== null && "data" in potentialDataContextEntry && Array.isArray(potentialDataContextEntry.data)) {
+          correctedNode.bindings.data = `${mainKey}.data`;
+          console.log(
+            `[AutoUI Debug] Corrected list binding for node '${correctedNode.id}': from '${mainKey}' to '${mainKey}.data'`
+          );
+        }
+      }
+    }
+  }
+  if (correctedNode.children) {
+    correctedNode.children = correctedNode.children.map(
+      (child) => correctListBindingsRecursive(child, dataContext)
+    );
+  }
+  return correctedNode;
+}
 var AutoUI = ({
   schema,
   goal,
@@ -1094,24 +3149,42 @@ var AutoUI = ({
   eventHooks,
   systemEventHooks,
   debugMode = false,
-  mockMode = true,
-  databaseConfig,
   planningConfig,
   integration = {},
-  scope = {},
-  enablePartialUpdates = false
+  enablePartialUpdates = true,
+  apiKey
 }) => {
-  const [schemaAdapterInstance, setSchemaAdapterInstance] = react.useState(null);
-  const [dataContext, setDataContext] = react.useState({});
-  const effectiveSchema = schema;
-  const scopedGoal = goal;
-  react.useEffect(() => {
+  const stableGoal = React__default.default.useMemo(() => goal, [goal]);
+  const schemaStringified = React__default.default.useMemo(() => JSON.stringify(schema), [schema]);
+  const stableSchemaProp = React__default.default.useMemo(() => schema, [schemaStringified]);
+  const [schemaAdapterInstance] = React.useState(null);
+  const [dataContext, setDataContext] = React.useState({});
+  const [componentsAvailable, setComponentsAvailable] = React.useState(true);
+  const [uiStatus, setUiStatus] = React.useState("initializing");
+  const [currentResolvedLayoutForRender, setCurrentResolvedLayoutForRender] = React.useState(null);
+  const [isResolvingBindings, setIsResolvingBindings] = React.useState(false);
+  const [renderedNode, setRenderedNode] = React.useState(
+    null
+  );
+  const currentResolvedLayoutRef = React.useRef(null);
+  const effectiveSchema = stableSchemaProp;
+  const scopedGoal = stableGoal;
+  React.useEffect(() => {
+    if (componentAdapter === "shadcn") {
+      setComponentsAvailable(areShadcnComponentsAvailable());
+    }
+  }, [componentAdapter]);
+  React.useEffect(() => {
     const unregisters = [];
     if (systemEventHooks) {
       Object.entries(systemEventHooks).forEach(([eventType, hooks]) => {
-        if (!hooks) return;
+        if (!hooks)
+          return;
         hooks.forEach((hook) => {
-          const unregister = systemEvents.on(eventType, hook);
+          const unregister = systemEvents.on(
+            eventType,
+            hook
+          );
           unregisters.push(unregister);
         });
       });
@@ -1120,7 +3193,9 @@ var AutoUI = ({
       const debugHook = (event) => {
         console.debug(`[AutoUI Debug] System Event:`, event);
       };
-      Object.values(SystemEventType).forEach((eventType) => {
+      Object.values(SystemEventType).filter(
+        (eventType) => eventType !== "RENDER_START" /* RENDER_START */ && eventType !== "BINDING_RESOLUTION_START" /* BINDING_RESOLUTION_START */
+      ).forEach((eventType) => {
         const unregister = systemEvents.on(eventType, debugHook);
         unregisters.push(unregister);
       });
@@ -1129,7 +3204,7 @@ var AutoUI = ({
       unregisters.forEach((unregister) => unregister());
     };
   }, [systemEventHooks, debugMode]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     const initializeDataContext = async () => {
       let initialData = {};
       if (schemaAdapterInstance) {
@@ -1138,7 +3213,6 @@ var AutoUI = ({
         Object.entries(effectiveSchema).forEach(([key, tableSchema]) => {
           initialData[key] = {
             schema: tableSchema,
-            // For development, add sample data if available
             data: tableSchema?.sampleData || [],
             selected: null
           };
@@ -1155,118 +3229,387 @@ var AutoUI = ({
     schema: effectiveSchema,
     goal: scopedGoal,
     userContext,
-    mockMode,
     planningConfig,
-    router: void 0,
     dataContext,
-    enablePartialUpdates
+    // Pass the local dataContext here, engine will use it if its own is empty initially
+    enablePartialUpdates,
+    apiKey
   });
-  const eventManagerRef = react.useRef(new EventManager());
-  react.useEffect(() => {
-    if (!eventHooks) return;
+  const eventManagerRef = React.useRef(new EventManager());
+  React.useEffect(() => {
+    if (!eventHooks)
+      return;
     const unregisters = [];
     if (eventHooks.all) {
-      const unregister = eventManagerRef.current.register("all", async (ctx) => {
-        for (const hook of eventHooks.all || []) {
-          await hook(ctx);
-          if (ctx.isPropagationStopped()) break;
+      const unregister = eventManagerRef.current.register(
+        "all",
+        async (ctx) => {
+          for (const hook of eventHooks.all || []) {
+            await hook(ctx);
+            if (ctx.isPropagationStopped())
+              break;
+          }
         }
-      });
+      );
       unregisters.push(unregister);
     }
     Object.entries(eventHooks).forEach(([type, hooks]) => {
-      if (type === "all" || !hooks) return;
-      const unregister = eventManagerRef.current.register([type], async (ctx) => {
-        for (const hook of hooks) {
-          await hook(ctx);
-          if (ctx.isPropagationStopped()) break;
+      if (type === "all" || !hooks)
+        return;
+      const unregister = eventManagerRef.current.register(
+        [type],
+        async (ctx) => {
+          for (const hook of hooks) {
+            await hook(ctx);
+            if (ctx.isPropagationStopped())
+              break;
+          }
         }
-      });
+      );
       unregisters.push(unregister);
     });
     return () => {
       unregisters.forEach((unregister) => unregister());
     };
   }, [eventHooks]);
-  react.useCallback(async (event) => {
-    const shouldProceed = await eventManagerRef.current.processEvent(event);
-    if (onEvent) {
-      onEvent(event);
-    }
-    if (!shouldProceed) {
-      console.info("Event processing was prevented by hooks", event);
-      return;
+  React.useEffect(() => {
+    currentResolvedLayoutRef.current = currentResolvedLayoutForRender;
+  }, [currentResolvedLayoutForRender]);
+  const processEvent = React.useCallback(
+    async (event) => {
+      setUiStatus("event_processing");
+      const layoutAtEventTime = currentResolvedLayoutRef.current;
+      const shouldProceed = await eventManagerRef.current.processEvent(event);
+      if (onEvent)
+        onEvent(event);
+      if (!shouldProceed) {
+        console.info(
+          "[AutoUI.processEvent] Event processing stopped by local hooks",
+          event
+        );
+        setUiStatus("idle");
+        return;
+      }
+      if (event.type === "CLICK" && layoutAtEventTime && event.nodeId.includes("view-details-button")) {
+        const mainContent = layoutAtEventTime.children?.find(
+          (c) => c.id === "main-content"
+        );
+        const taskList = mainContent?.children?.find((c) => c.id === "tasks-container")?.children?.find((c) => c.id === "task-list");
+        const eventSourceListItemCard = taskList?.children?.find(
+          (item) => item.children?.some((btn) => btn.id === event.nodeId)
+        );
+        const buttonNode = eventSourceListItemCard?.children?.find(
+          (btn) => btn.id === event.nodeId
+        );
+        if (buttonNode?.events?.CLICK?.action === "SHOW_DETAIL" /* SHOW_DETAIL */ && buttonNode?.events?.CLICK?.target === "task-detail") {
+          const cacheKeyToClear = `task-detail:false:no-data-selected`;
+          clearRenderedNodeCacheEntry(cacheKeyToClear);
+          console.log(
+            `[AutoUI.processEvent] Attempted to clear cache for task-detail using simplified key: ${cacheKeyToClear}`
+          );
+        }
+      }
+      console.log(
+        "[AutoUI.processEvent] Forwarding event to engine:",
+        JSON.stringify(event, null, 2)
+      );
+      console.log(
+        "[AutoUI.processEvent] Passing currentLayout ID (at event time):",
+        layoutAtEventTime?.id
+      );
+      console.log(
+        "[AutoUI.processEvent] Passing dataContext keys to engine:",
+        Object.keys(dataContext)
+      );
+      handleEvent(event, layoutAtEventTime, dataContext);
+    },
+    [
+      dataContext,
+      handleEvent,
+      onEvent,
+      eventManagerRef
+      // currentResolvedLayoutForRender removed - using ref instead to prevent infinite loops
+      // setUiStatus is implicitly available
+    ]
+  );
+  React.useEffect(() => {
+    if (state.dataContext && Object.keys(state.dataContext).length > 0) {
+      if (JSON.stringify(dataContext) !== JSON.stringify(state.dataContext)) {
+        console.log(
+          "[AutoUI] Syncing local dataContext from engine state. New keys:",
+          Object.keys(state.dataContext),
+          "Old keys:",
+          Object.keys(dataContext)
+        );
+        setDataContext(state.dataContext);
+      }
     }
-    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;
+  }, [state.dataContext, dataContext]);
+  React.useEffect(() => {
+    const resolveAndSetLayout = async () => {
+      const hasMeaningfulDataContext = dataContext && Object.keys(dataContext).some(
+        (key) => key !== "user" || Object.keys(dataContext["user"]).length > 0
+      );
+      if (state.layout && hasMeaningfulDataContext) {
+        console.log(
+          `[AutoUI resolveAndSetLayout] Calling core resolveBindings for layout ID: ${state.layout.id}. DataContext keys: ${Object.keys(dataContext).join(", ")}`
+        );
+        setIsResolvingBindings(true);
+        setUiStatus("resolving_bindings");
+        try {
+          const correctedLayout = correctListBindingsRecursive(
+            state.layout,
+            dataContext
+          );
+          systemEvents.emit(
+            createSystemEvent("BINDING_RESOLUTION_START" /* BINDING_RESOLUTION_START */, {
+              layout: correctedLayout
+              // Log corrected layout before resolving
+            })
+          );
+          const resolved = await resolveBindings(correctedLayout, dataContext);
+          setCurrentResolvedLayoutForRender(resolved);
+          systemEvents.emit(
+            createSystemEvent("BINDING_RESOLUTION_COMPLETE" /* BINDING_RESOLUTION_COMPLETE */, {
+              originalLayout: correctedLayout,
+              // Log corrected layout
+              resolvedLayout: resolved
+            })
+          );
+        } catch (err) {
+          console.error("Error resolving bindings:", err);
+          setUiStatus("error");
+          setCurrentResolvedLayoutForRender(null);
+        } finally {
+          setIsResolvingBindings(false);
         }
+      } else {
+        if (!state.layout)
+          console.log(
+            "[AutoUI] Skipping resolveBindings: state.layout is null/undefined"
+          );
+        if (!hasMeaningfulDataContext)
+          console.log(
+            "[AutoUI] Skipping resolveBindings: dataContext is not meaningfully populated yet"
+          );
+        setCurrentResolvedLayoutForRender(null);
+        if (!state.loading && uiStatus !== "initializing" && !isResolvingBindings)
+          setUiStatus("idle");
       }
-      return void 0;
     };
-    const sourceNode = findNodeById2(state.layout, event.nodeId);
-    if (!sourceNode) {
-      console.warn(`Node not found for event: ${event.nodeId}`);
-      handleEvent(event);
-      return;
+    resolveAndSetLayout();
+  }, [state.layout, dataContext]);
+  React.useEffect(() => {
+    const renderLayout = async () => {
+      if (currentResolvedLayoutForRender && !isResolvingBindings) {
+        setUiStatus("rendering");
+        console.log(
+          "[AutoUI Debug] Rendering with currentResolvedLayoutForRender:",
+          JSON.stringify(currentResolvedLayoutForRender, null, 2)
+        );
+        try {
+          systemEvents.emit(
+            createSystemEvent("RENDER_START" /* RENDER_START */, {
+              layout: currentResolvedLayoutForRender
+            })
+          );
+          const rendered = await renderNode2(
+            currentResolvedLayoutForRender,
+            componentAdapter,
+            processEvent
+          );
+          setRenderedNode(rendered);
+          systemEvents.emit(
+            createSystemEvent("RENDER_COMPLETE" /* RENDER_COMPLETE */, {
+              layout: currentResolvedLayoutForRender,
+              renderTimeMs: 0
+              // Placeholder, actual timing would be more complex
+            })
+          );
+          setUiStatus("idle");
+        } catch (err) {
+          console.error("Error rendering node:", err);
+          setUiStatus("error");
+        }
+      } else if (!currentResolvedLayoutForRender && !state.loading && !isResolvingBindings && uiStatus !== "initializing") {
+        setRenderedNode(null);
+        setUiStatus("idle");
+      }
+    };
+    renderLayout();
+  }, [
+    currentResolvedLayoutForRender,
+    componentAdapter,
+    processEvent,
+    isResolvingBindings,
+    state.loading
+  ]);
+  React.useEffect(() => {
+    if (uiStatus !== "error") {
+      setUiStatus("initializing");
     }
-    const eventConfig = sourceNode.events?.[event.type];
-    if (!eventConfig) {
-      console.warn(`No event config found for ${event.type} on node ${event.nodeId}`);
-      handleEvent(event);
-      return;
+  }, []);
+  React.useEffect(() => {
+    if (uiStatus === "initializing") {
+      if (state.loading) ; else if (state.layout && !isResolvingBindings) ; else if (!state.layout && !state.loading && !isResolvingBindings) {
+        if (state.error) {
+          setUiStatus("error");
+        } else {
+          setUiStatus("idle");
+        }
+      }
     }
-    const newContext = executeAction(
-      eventConfig.action,
-      eventConfig.target,
-      {
-        ...eventConfig.payload,
-        ...event.payload
-      },
-      dataContext,
-      state.layout
-    );
-    setDataContext(newContext);
-    handleEvent(event);
-  }, [dataContext, handleEvent, onEvent, state.layout]);
-  const [resolvedLayout, setResolvedLayout] = react.useState(void 0);
-  react.useEffect(() => {
-    if (state.layout) {
-      resolveBindings(state.layout, dataContext).then((resolved) => setResolvedLayout(resolved)).catch((err) => console.error("Error resolving bindings:", err));
-    } else {
-      setResolvedLayout(void 0);
+  }, [state.loading, state.layout, state.error, uiStatus, isResolvingBindings]);
+  React.useEffect(() => {
+    if (!debugMode)
+      return;
+    const pipelineState = {
+      uiStatus,
+      hasLayout: !!state.layout,
+      layoutId: state.layout?.id || null,
+      hasResolvedLayout: !!currentResolvedLayoutForRender,
+      resolvedLayoutId: currentResolvedLayoutForRender?.id || null,
+      hasRenderedNode: !!renderedNode,
+      isResolvingBindings,
+      isLoading: state.loading,
+      hasError: !!state.error,
+      error: state.error || null,
+      dataContextKeys: Object.keys(dataContext),
+      timestamp: Date.now()
+    };
+    if (typeof window !== "undefined") {
+      window.__autoui_pipeline_state = pipelineState;
+      window.__autoui_pipeline_history = window.__autoui_pipeline_history || [];
+      window.__autoui_pipeline_history.push(pipelineState);
+      console.log("[PIPELINE_STATE]", JSON.stringify(pipelineState));
     }
-  }, [state.layout, dataContext]);
+  }, [
+    debugMode,
+    uiStatus,
+    state.layout,
+    state.loading,
+    state.error,
+    currentResolvedLayoutForRender,
+    renderedNode,
+    isResolvingBindings,
+    dataContext
+  ]);
+  if (!componentsAvailable) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "autoui-error p-4 border border-red-300 bg-red-50 text-red-700 rounded", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: "Component Library Not Found" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm whitespace-pre-line", children: getMissingComponentsMessage() })
+    ] });
+  }
+  const showShimmer = (uiStatus === "initializing" || state.loading || isResolvingBindings) && !state.error;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: `autoui-root ${integration.className || ""}`,
       id: integration.id,
-      "data-mode": integration.mode,
-      "data-scope": scope?.type || "full",
       children: [
-        state.loading || !resolvedLayout ? (
-          // Render shimmer loading state
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "autoui-loading", children: state.layout ? renderShimmer(state.layout, componentAdapter) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "autoui-shimmer-container", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "autoui-shimmer-header" }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "autoui-shimmer-content" })
-          ] }) })
-        ) : (
-          // Render the resolved layout
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "autoui-content", children: renderNode2(resolvedLayout, componentAdapter) })
-        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          "Current Status: ",
+          uiStatus
+        ] }),
+        uiStatus === "idle" && !isResolvingBindings && renderedNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "autoui-content", children: renderedNode }),
         state.error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "autoui-error", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "autoui-error-title", children: "Error generating UI" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "autoui-error-message", children: state.error })
+          "Error: ",
+          state.error
+        ] }),
+        showShimmer && state.layout && // Show shimmer if we have a layout to base it on
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "autoui-loading", children: renderShimmer(state.layout, componentAdapter) }),
+        showShimmer && !state.layout && // Fallback shimmer if no layout yet
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "autoui-loading p-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-20 bg-gray-200 animate-pulse rounded mb-4" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-40 bg-gray-200 animate-pulse rounded" })
         ] })
       ]
     }
   );
 };
+var uiEventType = zod.z.enum([
+  "INIT",
+  "CLICK",
+  "CHANGE",
+  "SUBMIT",
+  "MOUSEOVER",
+  "MOUSEOUT",
+  "FOCUS",
+  "BLUR"
+]);
+var uiEvent = zod.z.object({
+  type: uiEventType,
+  nodeId: zod.z.string(),
+  timestamp: zod.z.number().nullable(),
+  payload: zod.z.record(zod.z.unknown()).nullable()
+});
+zod.z.enum(["AI_RESPONSE", "ERROR"]);
+var runtimeRecord = zod.z.record(zod.z.unknown()).nullable();
+var uiSpecNode = zod.z.object({
+  id: zod.z.string(),
+  node_type: zod.z.string(),
+  props: runtimeRecord,
+  bindings: runtimeRecord,
+  events: zod.z.record(
+    zod.z.string(),
+    zod.z.object({
+      action: zod.z.string(),
+      target: zod.z.string(),
+      payload: runtimeRecord
+    })
+  ).nullable(),
+  children: zod.z.lazy(() => zod.z.array(uiSpecNode)).nullable()
+});
+zod.z.discriminatedUnion("type", [
+  zod.z.object({
+    type: zod.z.literal("UI_EVENT"),
+    event: uiEvent
+  }),
+  zod.z.object({
+    type: zod.z.literal("AI_RESPONSE"),
+    node: uiSpecNode
+  }),
+  zod.z.object({
+    type: zod.z.literal("PARTIAL_UPDATE"),
+    nodeId: zod.z.string(),
+    node: uiSpecNode
+  }),
+  zod.z.object({
+    type: zod.z.literal("ADD_NODE"),
+    parentId: zod.z.string(),
+    node: uiSpecNode,
+    index: zod.z.number().nullable()
+  }),
+  zod.z.object({
+    type: zod.z.literal("REMOVE_NODE"),
+    nodeId: zod.z.string()
+  }),
+  zod.z.object({
+    type: zod.z.literal("ERROR"),
+    message: zod.z.string()
+  }),
+  zod.z.object({
+    type: zod.z.literal("LOADING"),
+    isLoading: zod.z.boolean()
+  }),
+  zod.z.object({
+    type: zod.z.literal("SET_DATA_CONTEXT"),
+    payload: zod.z.record(zod.z.string(), zod.z.unknown())
+  })
+]);
+zod.z.object({
+  layout: uiSpecNode.nullable(),
+  loading: zod.z.boolean(),
+  history: zod.z.array(uiEvent),
+  error: zod.z.string().nullable(),
+  dataContext: zod.z.record(zod.z.string(), zod.z.unknown())
+});
+zod.z.object({
+  schema: zod.z.record(zod.z.unknown()),
+  goal: zod.z.string(),
+  history: zod.z.array(uiEvent).nullable(),
+  userContext: zod.z.record(zod.z.unknown()).nullable().optional()
+});
 
 // src/adapters/schema/drizzle.ts
 var DrizzleAdapter = class {
@@ -1314,26 +3657,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";
   }
@@ -1376,22 +3719,48 @@ 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>`;
+};
+
 exports.ActionRouter = ActionRouter;
 exports.ActionType = ActionType;
 exports.AutoUI = AutoUI;
 exports.DrizzleAdapter = DrizzleAdapter;
 exports.SystemEventType = SystemEventType;
-exports.createDefaultRouter = createDefaultRouter;
+exports.componentType = componentType;
 exports.createEventHook = createEventHook;
 exports.createSchemaAdapter = createSchemaAdapter;
 exports.createSystemEvent = createSystemEvent;
+exports.generateComponent = generateComponent;
+exports.generateUIComponent = generateUIComponent;
+exports.generateUIDescription = generateUIDescription;
+exports.openAIUISpec = openAIUISpec;
 exports.systemEvents = systemEvents;
 exports.uiEvent = uiEvent;
 exports.uiEventType = uiEventType;
 exports.uiSpecNode = uiSpecNode;
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map