autoui-react 0.0.5-alpha → 0.1.1-alpha

package/dist/index.mjs

@@ -3,10 +3,10 @@ import { twMerge } from 'tailwind-merge';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React, { useState, useEffect, useRef, useCallback, useReducer } from 'react';
-import { createOpenAI } from '@ai-sdk/openai';
+import { createAnthropic } from '@ai-sdk/anthropic';
 import { generateObject } from 'ai';
 import { z } from 'zod';
+import React, { useState, useRef, useEffect, useCallback, useReducer } from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { XIcon, ChevronDownIcon, CheckIcon, ChevronUpIcon, CircleIcon } from 'lucide-react';
 import * as SelectPrimitive from '@radix-ui/react-select';
@@ -193,6 +193,10 @@ function removeNodeById(tree, nodeId) {
 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,
@@ -288,276 +292,105 @@ function uiReducer(state, action) {
         loading: action.isLoading
       };
     }
+    case "SET_DATA_CONTEXT": {
+      return {
+        ...state,
+        dataContext: action.payload
+      };
+    }
     default:
       return state;
   }
 }
 var initialState = {
   layout: null,
-  loading: false,
+  loading: true,
+  error: null,
   history: [],
-  error: null
+  dataContext: {}
 };
 
-// src/core/action-router.ts
-var UI_GUIDANCE_BASE = `
-UI Guidance:
-1. Create a focused interface that directly addresses the goal
-2. Use appropriate UI patterns (lists, forms, details, etc.)
-3. Include navigation between related views when needed
-4. Keep the interface simple and intuitive
-5. Bind to schema data where appropriate
-6. Provide event handlers for user interactions - make sure to always include both action and target properties`;
-var LIST_BINDING_GUIDANCE = `7. **CRITICAL:** For \`ListView\` or \`Table\` nodes, the \`data\` binding key **MUST** point to the *exact path* of the data *array* within the context.`;
-var LIST_BINDING_EXAMPLE = `Example: If the context has \`{ tasks: { data: [...] } }\`, the binding **MUST** be \`{ "bindings": { "data": "tasks.data" } }\`. If the context has \`{ userList: [...] }\`, the binding **MUST** be \`{ "bindings": { "data": "userList" } }\`. **NEVER** bind to the parent object containing the array (e.g., DO NOT USE \`{ "bindings": { "data": "tasks" } }\`).`;
-var COMMON_UI_GUIDANCE = UI_GUIDANCE_BASE + "\n" + // Add a newline separator
-LIST_BINDING_GUIDANCE + // Add the specific list binding rule
-"\n" + // Add a newline separator
-LIST_BINDING_EXAMPLE;
-function processTemplate(template, values) {
-  return template.replace(/\${(.*?)}/g, (match, key) => {
-    const trimmedKey = key.trim();
-    return trimmedKey in values ? String(values[trimmedKey]) : match;
-  });
-}
-function buildPrompt(input, promptTemplate, templateValues) {
-  const { schema, goal, history, userContext } = input;
-  const schemaInfo = Object.entries(schema).map(([tableName, tableSchema]) => {
-    const schemaString = typeof tableSchema === "object" && tableSchema !== null ? JSON.stringify(tableSchema) : String(tableSchema);
-    return `Table: ${tableName}
-Schema: ${schemaString}`;
-  }).join("\n\n");
-  const recentEvents = history && history.length > 0 ? history.slice(-5).map(
-    (event) => `Event: ${event.type} on node ${event.nodeId}${event.payload ? ` with payload ${JSON.stringify(event.payload)}` : ""}`
-  ).join("\n") : "No recent events";
-  const userContextSection = userContext ? `
-
-User Context:
-${JSON.stringify(userContext)}` : "";
-  if (promptTemplate && templateValues) {
-    const fullTemplateValues = {
-      ...templateValues,
-      schemaInfo,
-      recentEvents,
-      userContextString: userContextSection.trim(),
-      // Use trimmed version
-      commonUIGuidance: COMMON_UI_GUIDANCE,
-      goal
-      // Ensure goal is always available to templates
-    };
-    return processTemplate(promptTemplate, fullTemplateValues);
-  }
-  const interactionDescription = history && history.length > 0 ? `The user's last action was: ${history[history.length - 1].type} on node ${history[history.length - 1].nodeId}` : "The user initiated the session for the goal";
-  return `
-You are an expert UI generator.
-Create a user interface that achieves the following goal: "${goal}".
-${interactionDescription}.
-
-Available data schema:
-${schemaInfo}
-
-Recent user interactions:
-${recentEvents}${userContextSection}
-
-Generate a complete UI specification in JSON format that matches the following TypeScript type:
-type UISpecNode = { id: string; node_type: string; props?: Record<string, unknown>; bindings?: Record<string, unknown>; events?: Record<string, { action: string; target: string; payload?: Record<string, unknown>; }>; children?: UISpecNode[]; };
-${COMMON_UI_GUIDANCE}
-
-Respond ONLY with the JSON UI specification and no other text.
-  `;
-}
+// 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 {
+
+// src/core/system-events.ts
+var SystemEventType = /* @__PURE__ */ ((SystemEventType2) => {
+  SystemEventType2["PLAN_START"] = "PLAN_START";
+  SystemEventType2["PLAN_PROMPT_CREATED"] = "PLAN_PROMPT_CREATED";
+  SystemEventType2["PLAN_RESPONSE_CHUNK"] = "PLAN_RESPONSE_CHUNK";
+  SystemEventType2["PLAN_COMPLETE"] = "PLAN_COMPLETE";
+  SystemEventType2["PLAN_ERROR"] = "PLAN_ERROR";
+  SystemEventType2["BINDING_RESOLUTION_START"] = "BINDING_RESOLUTION_START";
+  SystemEventType2["BINDING_RESOLUTION_COMPLETE"] = "BINDING_RESOLUTION_COMPLETE";
+  SystemEventType2["DATA_FETCH_START"] = "DATA_FETCH_START";
+  SystemEventType2["DATA_FETCH_COMPLETE"] = "DATA_FETCH_COMPLETE";
+  SystemEventType2["RENDER_START"] = "RENDER_START";
+  SystemEventType2["RENDER_COMPLETE"] = "RENDER_COMPLETE";
+  SystemEventType2["PREFETCH_START"] = "PREFETCH_START";
+  SystemEventType2["PREFETCH_COMPLETE"] = "PREFETCH_COMPLETE";
+  return SystemEventType2;
+})(SystemEventType || {});
+var SystemEventManager = 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);
+    this.listeners = {};
   }
   /**
-   * 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
+   * 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
    */
-  resolveRoute(event, schema, layout, dataContext, goal, userContext) {
-    console.log(
-      `[ActionRouter Debug] resolveRoute called for event type: ${event.type}`
-    );
-    const routes = this.routes[event.type] || [];
-    console.log(
-      `[ActionRouter Debug] Found ${routes.length} routes for ${event.type}`
-    );
-    if (routes.length === 0) {
-      console.log(
-        `[ActionRouter Debug] No specific route found for ${event.type}, using default FULL_REFRESH.`
-      );
-      const defaultPlannerInput = {
-        schema,
-        goal,
-        history: [event],
-        userContext: userContext || null
-      };
-      const defaultPrompt = buildPrompt(
-        defaultPlannerInput,
-        void 0,
-        void 0
-      );
-      const defaultResolution = {
-        actionType: "FULL_REFRESH" /* FULL_REFRESH */,
-        targetNodeId: layout?.id || "root",
-        plannerInput: defaultPlannerInput,
-        prompt: defaultPrompt
-      };
-      console.log(
-        "[ActionRouter Debug] Default Resolution:",
-        defaultResolution
-      );
-      return defaultResolution;
-    }
-    const sourceNode = layout ? findNodeById(layout, event.nodeId) : void 0;
-    const nodeConfig = sourceNode?.events?.[event.type];
-    let matchingRoute;
-    if (nodeConfig) {
-      matchingRoute = routes.find(
-        (route) => route.actionType.toString() === nodeConfig.action
-      );
-    }
-    if (!matchingRoute) {
-      matchingRoute = routes[0];
-    }
-    console.log("[ActionRouter Debug] Matching Route Config:", matchingRoute);
-    const targetNodeId = nodeConfig?.target || matchingRoute.targetNodeId || event.nodeId;
-    const additionalContext = {};
-    if (matchingRoute.contextKeys) {
-      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;
-      });
+  on(eventType, listener) {
+    if (!this.listeners[eventType]) {
+      this.listeners[eventType] = [];
     }
-    const plannerInput2 = {
-      schema,
-      goal,
-      history: [event],
-      userContext: {
-        ...userContext,
-        ...additionalContext
+    this.listeners[eventType]?.push(listener);
+    return () => {
+      if (this.listeners[eventType]) {
+        this.listeners[eventType] = this.listeners[eventType]?.filter(
+          (l) => l !== listener
+        );
       }
     };
-    const templateValues = {
-      goal,
-      eventType: event.type,
-      nodeId: event.nodeId,
-      targetNodeId,
-      actionType: matchingRoute.actionType,
-      ...userContext || {},
-      // Spread the original userContext (passed to resolveRoute)
-      ...additionalContext
-      // Spread additionalContext afterwards (can override userContext keys)
-    };
-    console.log("[ActionRouter Debug] Template Values:", templateValues);
-    const finalPrompt = buildPrompt(
-      plannerInput2,
-      matchingRoute.promptTemplate,
-      // Pass template if it exists (can be undefined)
-      templateValues
-      // Pass templateValues (used only if promptTemplate exists)
-    );
-    console.log("[ActionRouter Debug] Generated Prompt:", finalPrompt);
-    const finalResolution = {
-      actionType: matchingRoute.actionType,
-      targetNodeId,
-      plannerInput: plannerInput2,
-      prompt: finalPrompt
-      // Use the generated prompt
-    };
-    console.log("[ActionRouter Debug] Final Resolution:", finalResolution);
-    return finalResolution;
   }
   /**
-   * Process a prompt template with variables
-   * @param template - Template string with ${var} placeholders
-   * @param values - Values to substitute
-   * @returns Processed string
+   * Emit a system event to all registered listeners
+   *
+   * @param event - The system event to emit
    */
-  processTemplate(template, values) {
-    return template.replace(/\${(\w+)}/g, (_, key) => {
-      return values[key] !== void 0 ? String(values[key]) : `\${${key}}`;
-    });
+  async emit(event) {
+    const listeners = this.listeners[event.type] || [];
+    for (const listener of listeners) {
+      await listener(event);
+    }
   }
 };
-function createDefaultRouter() {
-  const router = new ActionRouter();
-  router.registerRoute("CLICK", {
-    actionType: "FULL_REFRESH" /* FULL_REFRESH */,
-    targetNodeId: "root"
-  });
-  router.registerRoute("INIT", {
-    actionType: "FULL_REFRESH" /* FULL_REFRESH */,
-    targetNodeId: "root"
-  });
-  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 systemEvents = new SystemEventManager();
+function createSystemEvent(type, data) {
+  return {
+    type,
+    timestamp: Date.now(),
+    ...data
+  };
 }
 var componentType = z.enum([
   // Layout components
@@ -576,30 +409,29 @@ var componentType = z.enum([
   "Detail",
   "Tabs",
   "Dialog",
+  "Badge",
   // Typography
   "Heading",
   "Text"
 ]);
 
-// src/schema/ui.ts
-var uiEventType = z.enum([
-  "INIT",
-  "CLICK",
-  "CHANGE",
-  "SUBMIT",
-  "MOUSEOVER",
-  "MOUSEOUT",
-  "FOCUS",
-  "BLUR"
+// src/schema/openai-ui-spec.ts
+var actionTypeEnum = 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 uiEvent = z.object({
-  type: uiEventType,
-  nodeId: z.string(),
-  timestamp: z.number().nullable(),
-  payload: z.record(z.unknown()).nullable()
-});
-z.enum(["AI_RESPONSE", "ERROR"]);
-var runtimeRecord = z.record(z.any()).nullable();
 var openAISimplifiedValue = z.string().nullable();
 var openAIRecordSimplifiedNullable = z.record(openAISimplifiedValue).nullable();
 var openAIEventPayloadSimplifiedNullable = z.record(openAISimplifiedValue).nullable();
@@ -609,22 +441,26 @@ var openAIBaseNode = z.object({
     "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" }.'
+    '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}}"). **CRITICAL for ListView/Table:** the `data` key MUST point to the *exact array path* (e.g., { "data": "tasks.data" } or { "data": "userList" }), NOT the parent object.'
+    'Data bindings map context paths to component props. Values are paths (e.g., "user.name") or templates (e.g., "{{item.title}}")...'
   ),
   events: z.record(
     z.string(),
     z.object({
-      action: z.string(),
-      target: z.string(),
-      payload: openAIEventPayloadSimplifiedNullable
+      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: z.string().describe("Target identifier."),
+      payload: openAIEventPayloadSimplifiedNullable.describe(
+        "Static payload to merge with the event's runtime payload."
+      )
     })
-  ).nullable(),
-  // Entire events object is nullable
+  ).nullable().describe(
+    'Defines event handlers mapped from UIEventType (e.g., "CLICK", "CHANGE") to an action configuration.'
+  ),
   children: z.null()
-  // Base children are null. When extended, it will be an array or null.
 });
 var openAINodeL4 = openAIBaseNode;
 var openAINodeL3 = openAIBaseNode.extend({
@@ -636,395 +472,1014 @@ var openAINodeL2 = openAIBaseNode.extend({
 var openAIUISpec = openAIBaseNode.extend({
   children: z.array(openAINodeL2).nullable()
 });
-var uiSpecNode = z.object({
-  id: z.string(),
-  node_type: z.string(),
-  props: runtimeRecord,
-  bindings: runtimeRecord,
-  events: z.record(
-    z.string(),
-    z.object({
-      action: z.string(),
-      target: z.string(),
-      payload: runtimeRecord
-    })
-  ).nullable(),
-  children: z.lazy(() => z.array(uiSpecNode)).nullable()
-});
-z.discriminatedUnion("type", [
-  z.object({
-    type: z.literal("UI_EVENT"),
-    event: uiEvent
-  }),
-  z.object({
-    type: z.literal("AI_RESPONSE"),
-    node: uiSpecNode
-  }),
-  z.object({
-    type: z.literal("PARTIAL_UPDATE"),
-    nodeId: z.string(),
-    node: uiSpecNode
-  }),
-  z.object({
-    type: z.literal("ADD_NODE"),
-    parentId: z.string(),
-    node: uiSpecNode,
-    index: z.number().nullable()
-  }),
-  z.object({
-    type: z.literal("REMOVE_NODE"),
-    nodeId: z.string()
-  }),
-  z.object({
-    type: z.literal("ERROR"),
-    message: z.string()
-  }),
-  z.object({
-    type: z.literal("LOADING"),
-    isLoading: z.boolean()
-  })
-]);
-z.object({
-  layout: uiSpecNode.nullable(),
-  loading: z.boolean(),
-  history: z.array(uiEvent),
-  error: z.string().nullable()
-});
-z.object({
-  schema: z.record(z.unknown()),
-  goal: z.string(),
-  history: z.array(uiEvent).nullable(),
-  userContext: z.record(z.unknown()).nullable().optional()
-});
-
-// src/core/system-events.ts
-var SystemEventType = /* @__PURE__ */ ((SystemEventType2) => {
-  SystemEventType2["PLAN_START"] = "PLAN_START";
-  SystemEventType2["PLAN_PROMPT_CREATED"] = "PLAN_PROMPT_CREATED";
-  SystemEventType2["PLAN_RESPONSE_CHUNK"] = "PLAN_RESPONSE_CHUNK";
-  SystemEventType2["PLAN_COMPLETE"] = "PLAN_COMPLETE";
-  SystemEventType2["PLAN_ERROR"] = "PLAN_ERROR";
-  SystemEventType2["BINDING_RESOLUTION_START"] = "BINDING_RESOLUTION_START";
-  SystemEventType2["BINDING_RESOLUTION_COMPLETE"] = "BINDING_RESOLUTION_COMPLETE";
-  SystemEventType2["DATA_FETCH_START"] = "DATA_FETCH_START";
-  SystemEventType2["DATA_FETCH_COMPLETE"] = "DATA_FETCH_COMPLETE";
-  SystemEventType2["RENDER_START"] = "RENDER_START";
-  SystemEventType2["RENDER_COMPLETE"] = "RENDER_COMPLETE";
-  SystemEventType2["PREFETCH_START"] = "PREFETCH_START";
-  SystemEventType2["PREFETCH_COMPLETE"] = "PREFETCH_COMPLETE";
-  return SystemEventType2;
-})(SystemEventType || {});
-var SystemEventManager = class {
-  constructor() {
-    this.listeners = {};
-  }
-  /**
-   * 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
-   */
-  on(eventType, listener) {
-    if (!this.listeners[eventType]) {
-      this.listeners[eventType] = [];
-    }
-    this.listeners[eventType]?.push(listener);
-    return () => {
-      if (this.listeners[eventType]) {
-        this.listeners[eventType] = this.listeners[eventType]?.filter(
-          (l) => l !== listener
-        );
-      }
-    };
-  }
-  /**
-   * Emit a system event to all registered listeners
-   *
-   * @param event - The system event to emit
-   */
-  async emit(event) {
-    const listeners = this.listeners[event.type] || [];
-    for (const listener of listeners) {
-      await listener(event);
-    }
-  }
-};
-var systemEvents = new SystemEventManager();
-function createSystemEvent(type, data) {
-  return {
-    type,
-    timestamp: Date.now(),
-    ...data
-  };
-}
-
-// src/env.ts
-var rawApiKeyFromEnv = process.env.VITE_OPENAI_API_KEY;
-var env = {
-  MOCK_PLANNER: process.env.VITE_MOCK_PLANNER || "0",
-  // Simplified MOCK_PLANNER assignment
-  NODE_ENV: process.env.VITE_NODE_ENV || "production",
-  // Simplified NODE_ENV assignment
-  OPENAI_API_KEY: rawApiKeyFromEnv || ""
-};
 
 // src/core/planner.ts
-var getOpenAIClient = (apiKey) => {
-  return createOpenAI({
-    apiKey,
-    // Use the provided key directly
-    compatibility: "strict"
+var getAnthropicClient = (apiKey) => {
+  return createAnthropic({
+    apiKey
   });
 };
-function mockPlanner(input, targetNodeId, customPrompt) {
-  if (customPrompt) {
-    console.log("mockPlanner received customPrompt:", customPrompt);
-  }
-  const taskSchema = input.schema.tasks;
-  const taskData = taskSchema?.sampleData || [
-    {
-      id: "1",
-      title: "Example Task 1",
-      description: "This is a sample task",
-      status: "pending",
-      priority: "medium"
-    },
-    {
-      id: "2",
-      title: "Example Task 2",
-      description: "Another sample task",
-      status: "completed",
-      priority: "high"
-    }
-  ];
-  const mockNode = {
-    id: targetNodeId || "root",
+function mockPlanner(_input) {
+  return {
+    id: "task-dashboard",
     node_type: "Container",
-    props: {
-      className: "p-4 space-y-6"
-    },
+    props: { className: "p-4 space-y-4" },
     bindings: null,
     events: null,
     children: [
       {
-        id: "header-1",
-        node_type: "Header",
-        props: {
-          title: "Task Management Dashboard",
-          className: "mb-4"
-        },
+        id: "header",
+        node_type: "Container",
+        props: { className: "flex justify-between items-center mb-4" },
         bindings: null,
         events: null,
-        children: 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: "grid grid-cols-1 gap-6 md:grid-cols-3"
-        },
+        props: { className: "flex gap-4" },
         bindings: null,
         events: null,
         children: [
           {
             id: "tasks-container",
             node_type: "Container",
-            props: {
-              className: "md:col-span-2"
-            },
+            props: { className: "flex-1" },
             bindings: null,
             events: null,
             children: [
               {
-                id: "list-heading",
-                node_type: "Container",
-                props: {
-                  className: "flex justify-between items-center mb-4"
-                },
-                bindings: null,
+                id: "task-list",
+                node_type: "ListView",
+                props: { className: "space-y-2" },
+                bindings: { data: "tasks.data" },
                 events: null,
                 children: [
                   {
-                    id: "list-title",
-                    node_type: "Header",
-                    props: {
-                      title: "Tasks",
-                      className: "border-none p-0 m-0"
-                    },
+                    id: "task-item-{{index}}",
+                    node_type: "Card",
+                    props: { className: "p-3 border rounded" },
                     bindings: null,
                     events: null,
-                    children: null
-                  },
-                  {
-                    id: "add-task-button",
-                    node_type: "Button",
-                    props: {
-                      label: "Add Task",
-                      variant: "default"
-                    },
-                    bindings: null,
-                    events: {
-                      onClick: {
-                        action: "ADD_TASK",
-                        target: "tasks-container",
-                        payload: {}
+                    children: [
+                      {
+                        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
                       }
-                    },
-                    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: "task-list",
-                node_type: "ListView",
-                props: {
-                  selectable: "true"
-                },
-                bindings: {
-                  data: "tasks.data",
-                  fields: JSON.stringify([
-                    { key: "id", label: "ID" },
-                    { key: "title", label: "Title" },
-                    { key: "status", label: "Status" },
-                    { key: "priority", label: "Priority" }
-                  ])
-                },
+                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: {
-                  onSelect: {
-                    action: "SELECT_TASK",
-                    target: "task-detail",
-                    payload: {
-                      source: "task-list"
-                    }
-                  }
+                  CLICK: { action: "HIDE_DETAIL", target: "task-detail" }
                 },
                 children: null
               }
             ]
+          }
+        ]
+      }
+    ]
+  };
+}
+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;
+  }
+  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"
           },
-          {
-            id: "task-detail",
-            node_type: "Detail",
-            props: {
-              title: "Task Details",
-              visible: "true"
-            },
-            bindings: {
-              data: JSON.stringify(taskData[0]),
-              fields: JSON.stringify([
-                { key: "title", label: "Title", type: "heading" },
-                { key: "description", label: "Description", type: "content" },
-                { key: "status", label: "Status" },
-                { key: "priority", label: "Priority" },
-                { key: "dueDate", label: "Due Date" }
-              ])
-            },
-            events: {
-              onBack: {
-                action: "CLOSE_DETAIL",
-                target: "task-detail",
-                payload: {}
-              }
-            },
-            children: null
+          bindings: null,
+          events: null,
+          children: null
+        }
+      ]
+    };
+  }
+  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 { object } = await 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
           }
-        ]
+        );
       }
-    ]
-  };
-  return mockNode;
-}
-async function callPlannerLLM(input, openaiApiKey, routeResolution) {
-  await systemEvents.emit(
-    createSystemEvent("PLAN_START" /* PLAN_START */, { plannerInput: input })
-  );
-  if (env.MOCK_PLANNER === "1") {
-    console.warn(
-      `Using mock planner because MOCK_PLANNER environment variable is set to "1".`
-    );
-    return mockPlanner(input);
-  }
-  if (!openaiApiKey) {
-    console.warn(
-      `OpenAI API key was not provided to callPlannerLLM. Falling back to mock planner.`
-    );
-    return mockPlanner(input);
-  }
-  const startTime = Date.now();
-  const prompt = routeResolution?.prompt;
-  if (!prompt) {
-    throw new Error("ActionRouter did not provide a prompt to callPlannerLLM.");
+      break;
+    }
+    default:
+      console.warn(`[executeAction] Unhandled action type: ${action}`);
   }
-  await systemEvents.emit(
-    createSystemEvent("PLAN_PROMPT_CREATED" /* PLAN_PROMPT_CREATED */, { prompt })
-  );
-  try {
-    const { object: uiSpec } = await generateObject({
-      model: getOpenAIClient(openaiApiKey)("gpt-4o", {
-        structuredOutputs: true
-      }),
-      schema: openAIUISpec,
-      messages: [{ role: "user", content: prompt }],
-      temperature: 0.2,
-      maxTokens: 4e3
+  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;
     });
-    await systemEvents.emit(
-      createSystemEvent("PLAN_COMPLETE" /* PLAN_COMPLETE */, {
-        layout: uiSpec,
-        executionTimeMs: Date.now() - startTime
-      })
-    );
-    return uiSpec;
-  } catch (error) {
-    console.error("Error calling LLM planner:", error);
-    await systemEvents.emit(
-      createSystemEvent("PLAN_ERROR" /* PLAN_ERROR */, {
-        error: error instanceof Error ? error : new Error(String(error))
-      })
-    );
-    throw error;
   }
 }
-async function processEvent(event, router, schema, layout, dataContext, goal, userContext, openaiApiKey) {
-  const routeResolution = await router.resolveRoute(
-    event,
-    schema,
-    layout || null,
-    dataContext,
-    goal,
-    userContext
-  );
-  if (!routeResolution) {
-    throw new Error(
-      `No route found for event type: ${event.type}, node: ${event.nodeId}`
-    );
-  }
-  if (routeResolution.actionType.toString() === "NoOp") {
-    if (!layout)
-      throw new Error("Layout is undefined and action is NoOp");
-    return layout;
-  }
-  const plannerInputForLLM = routeResolution.plannerInput;
-  const newLayout = await callPlannerLLM(
-    plannerInputForLLM,
-    openaiApiKey || "",
-    routeResolution
-  );
-  return newLayout;
+
+// src/core/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}
 
-// src/core/state.ts
+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,
-  openaiApiKey,
+  apiKey = "",
   userContext,
-  mockMode = false,
   planningConfig,
-  router = createDefaultRouter(),
   dataContext = {},
-  enablePartialUpdates = false
+  enablePartialUpdates = true
 }) {
   if (userContext === null) {
     console.warn(
@@ -1032,84 +1487,68 @@ function useUIStateEngine({
     );
   }
   const [state, dispatch] = useReducer(uiReducer, initialState);
+  const stateRef = useRef(state);
+  const router = new ActionRouter(apiKey, planningConfig);
+  useEffect(() => {
+    stateRef.current = state;
+  }, [state]);
   const handleEvent = useCallback(
-    async (event) => {
+    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";
-        if (enablePartialUpdates) {
-          const route = router.resolveRoute(
-            event,
-            schema,
-            state.layout,
-            dataContext,
-            goal,
-            userContext
-          );
-          if (route) {
-            console.log("Resolved route:", route);
-            actionTypeForDispatch = route.actionType;
-            targetNodeIdForDispatch = route.targetNodeId;
-            systemEvents.emit(
-              createSystemEvent("PLAN_START" /* PLAN_START */, {
-                plannerInput: route.plannerInput
-              })
-            );
-            if (mockMode) {
-              resolvedNode = mockPlanner(
-                route.plannerInput,
-                route.targetNodeId,
-                route.prompt
-              );
-            } else {
-              resolvedNode = await callPlannerLLM(
-                route.plannerInput,
-                openaiApiKey || "",
-                route
-              );
-            }
-          } else {
-            const input = {
-              schema,
-              goal,
-              history: [...state.history, event],
-              userContext
-            };
-            if (mockMode) {
-              resolvedNode = mockPlanner(input);
-            } else {
-              resolvedNode = await callPlannerLLM(
-                input,
-                openaiApiKey || "",
-                void 0
-              );
-            }
+        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
+            });
           }
-        } else {
-          const input = {
-            schema,
-            goal,
-            history: [...state.history, event],
-            // event is already in history from UI_EVENT dispatch
-            userContext
-          };
-          if (mockMode) {
-            resolvedNode = mockPlanner(input);
-          } else {
-            resolvedNode = await callPlannerLLM(
-              input,
-              openaiApiKey || "",
-              void 0
+          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 "HIDE_DETAIL" /* HIDE_DETAIL */:
           case "TOGGLE_STATE" /* TOGGLE_STATE */:
           case "ADD_DROPDOWN" /* ADD_DROPDOWN */:
           case "UPDATE_FORM" /* UPDATE_FORM */:
@@ -1120,6 +1559,16 @@ function useUIStateEngine({
               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 });
@@ -1138,80 +1587,57 @@ function useUIStateEngine({
       }
     },
     [
-      // append, // REMOVE
       goal,
       schema,
-      state.history,
-      // Keep state.history if input preparation needs it
-      state.layout,
-      // stop, // REMOVE
       userContext,
-      router,
-      mockMode,
       dataContext,
-      openaiApiKey,
+      apiKey,
       enablePartialUpdates,
       dispatch
-      // Add dispatch
     ]
   );
   useEffect(() => {
     const initialFetch = async () => {
       dispatch({ type: "LOADING", isLoading: true });
       try {
-        const input = {
+        const initEvent = {
+          type: "INIT",
+          nodeId: "system",
+          timestamp: Date.now(),
+          payload: null
+        };
+        const route = await router.resolveRoute(
+          initEvent,
           schema,
+          stateRef.current.layout,
+          dataContext,
           goal,
-          history: [],
-          // Initial history is empty
+          apiKey,
           userContext
-        };
-        let node;
-        if (mockMode) {
-          node = mockPlanner(input);
-        } else {
-          const initEvent = {
-            type: "INIT",
-            // Assuming "INIT" is your initial event type
-            nodeId: "system",
-            // Or some other appropriate initial nodeId
-            timestamp: Date.now(),
-            payload: null
-          };
-          const route = router.resolveRoute(
-            initEvent,
-            schema,
-            null,
-            // No existing layout on initial fetch
-            dataContext,
-            goal,
-            userContext
-          );
-          if (!route || !route.prompt) {
-            console.error(
-              "[UIStateEngine] Initial fetch: Failed to resolve route or get prompt for INIT event."
-            );
-            throw new Error("Failed to initialize UI due to routing error.");
-          }
-          systemEvents.emit(
-            createSystemEvent("PLAN_START" /* PLAN_START */, {
-              plannerInput: route.plannerInput
-            })
+        );
+        if (!route) {
+          console.error(
+            "[UIStateEngine] Initial fetch: Failed to resolve route for INIT event."
           );
-          node = await callPlannerLLM(
-            route.plannerInput,
-            // Use plannerInput from the resolved route
-            openaiApiKey || "",
-            route
-            // Pass the entire route object
+          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(
-          // Also emit system event for initial load error
           createSystemEvent("PLAN_ERROR" /* PLAN_ERROR */, {
             error: e instanceof Error ? e : new Error(String(e))
           })
@@ -1221,7 +1647,7 @@ function useUIStateEngine({
       }
     };
     initialFetch();
-  }, [goal, schema, userContext, mockMode, dispatch, openaiApiKey]);
+  }, [goal, schema, dispatch]);
   return {
     state,
     dispatch,
@@ -1704,45 +2130,67 @@ var Button = ({ onClick, children, variant = "default" }) => /* @__PURE__ */ jsx
   }
 );
 var Detail = ({ data, fields = [], title, visible = true, onBack }) => {
-  if (!visible)
+  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__ */ jsxs("div", { className: "w-full border border-gray-300 dark:border-gray-700 rounded-lg p-6 space-y-4 bg-white dark:bg-gray-900 shadow-sm", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center border-b border-gray-200 dark:border-gray-700 pb-3", children: [
       title && /* @__PURE__ */ jsx("h2", { className: "text-lg font-medium text-gray-800 dark:text-white", children: title }),
       onBack && /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: onBack, children: "Back" })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "space-y-4", children: fields.map((field) => {
-      if (field.type === "heading") {
-        return /* @__PURE__ */ jsx(
-          "h3",
-          {
-            className: "text-xl font-semibold text-gray-800 dark:text-white",
-            children: data?.[field.key] ?? ""
-          },
-          field.key
-        );
-      }
-      if (field.type === "content") {
-        return /* @__PURE__ */ jsx(
+      try {
+        if (field.type === "heading") {
+          return /* @__PURE__ */ jsx(
+            "h3",
+            {
+              className: "text-xl font-semibold text-gray-800 dark:text-white",
+              children: data?.[field.key] ?? ""
+            },
+            field.key
+          );
+        }
+        if (field.type === "content") {
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "text-sm text-gray-700 dark:text-gray-300",
+              children: data?.[field.key] ?? ""
+            },
+            field.key
+          );
+        }
+        return /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "text-sm text-gray-700 dark:text-gray-300",
-            children: data?.[field.key] ?? ""
+            className: "flex flex-col border-b border-gray-100 dark:border-gray-800 py-2",
+            children: [
+              field.label && /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-600 dark:text-gray-400 font-medium", children: field.label }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-800 dark:text-gray-200", children: data?.[field.key] ?? "" })
+            ]
           },
           field.key
         );
+      } catch (e) {
+        console.error(
+          `[Detail Component Internal] Error rendering field: ${field?.key}`,
+          e,
+          "Field data:",
+          field,
+          "Full data object:",
+          data
+        );
+        return /* @__PURE__ */ jsxs("div", { children: [
+          "Error rendering field: ",
+          field?.key
+        ] }, field?.key || "error-field");
       }
-      return /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: "flex flex-col border-b border-gray-100 dark:border-gray-800 py-2",
-          children: [
-            field.label && /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-600 dark:text-gray-400 font-medium", children: field.label }),
-            /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-800 dark:text-gray-200", children: data?.[field.key] ?? "" })
-          ]
-        },
-        field.key
-      );
     }) })
   ] });
 };
@@ -1783,9 +2231,9 @@ var isUISpecNode = (value) => {
   return isString(value.id) && isString(value.node_type);
 };
 var isDetailFieldObject = (item) => isObject(item) && isString(item.key) && isString(item.label) && (item.type === void 0 || isString(item.type));
-var createEventHandler = (node, eventName, uiEventType2, processEvent2) => {
+var createEventHandler = (node, eventName, uiEventType2, processEvent) => {
   const eventConfig = node.events?.[uiEventType2];
-  if (!processEvent2 || !eventConfig)
+  if (!processEvent || !eventConfig)
     return void 0;
   return (eventPayload) => {
     const fullEvent = {
@@ -1797,16 +2245,16 @@ var createEventHandler = (node, eventName, uiEventType2, processEvent2) => {
         ...eventPayload || {}
       }
     };
-    processEvent2(fullEvent);
+    processEvent(fullEvent);
   };
 };
 var adapterMap = {
-  Container: (node, processEvent2) => {
+  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.cloneElement(renderNode(child, processEvent2), { key: child.id })
+        React.cloneElement(renderNode(child, processEvent), { key: child.id })
       )
     );
     const style = typeof styleProp === "string" ? parseStyleString(styleProp) : styleProp;
@@ -1838,23 +2286,31 @@ var adapterMap = {
       className: getSafeProp(node.props, "className", isString, "")
     }
   ),
-  Button: (node, processEvent2) => /* @__PURE__ */ jsx(
+  Button: (node, processEvent) => /* @__PURE__ */ jsx(
     Button,
     {
       variant: getSafeProp(node.props, "variant", isButtonVariant, "default"),
-      onClick: createEventHandler(node, "onClick", "CLICK", processEvent2),
+      onClick: createEventHandler(node, "onClick", "CLICK", processEvent),
       children: getSafeProp(node.props, "label", isString, "Button")
     }
   ),
-  ListView: (node, processEvent2) => {
-    const { className, style: styleProp, key, ...restProps } = node.props || {};
+  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.cloneElement(renderNode(child, processEvent2), { key: child.id })
+      (child) => React.cloneElement(renderNode(child, processEvent), { key: child.id })
     );
     return /* @__PURE__ */ jsx(
       "div",
@@ -1871,21 +2327,28 @@ var adapterMap = {
       key
     );
   },
-  Detail: (node, processEvent2) => {
-    const data = getSafeBinding(
-      node.bindings,
+  Detail: (node, processEvent) => {
+    const data = getSafeProp(
+      node.props,
       "data",
       isRecordWithReactNodeValues,
       {}
     );
-    const fields = getSafeBinding(
-      node.bindings,
+    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__ */ jsx(
       Detail,
       {
@@ -1893,14 +2356,14 @@ var adapterMap = {
         fields,
         title,
         visible,
-        onBack: createEventHandler(node, "onBack", "CLICK", processEvent2)
+        onBack: createEventHandler(node, "onBack", "CLICK", processEvent)
       }
     );
   },
-  Card: (node, processEvent2) => {
+  Card: (node, processEvent) => {
     const { className, style: styleProp, key, ...restProps } = node.props || {};
     const children = node.children?.map(
-      (child) => React.cloneElement(renderNode(child, processEvent2), { key: child.id })
+      (child) => React.cloneElement(renderNode(child, processEvent), { key: child.id })
     );
     const style = typeof styleProp === "string" ? parseStyleString(styleProp) : styleProp;
     return /* @__PURE__ */ jsx(
@@ -1918,7 +2381,7 @@ var adapterMap = {
       key
     );
   },
-  Input: (node, processEvent2) => {
+  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, "");
@@ -1930,7 +2393,7 @@ var adapterMap = {
         node,
         "onChange",
         "CHANGE",
-        processEvent2
+        processEvent
       );
       if (handler)
         handler({ value: e.target.value });
@@ -1940,13 +2403,13 @@ var adapterMap = {
         node,
         "onFocus",
         "FOCUS",
-        processEvent2
+        processEvent
       );
       if (handler)
         handler({});
     };
     const handleBlur = () => {
-      const handler = createEventHandler(node, "onBlur", "BLUR", processEvent2);
+      const handler = createEventHandler(node, "onBlur", "BLUR", processEvent);
       if (handler)
         handler({});
     };
@@ -1968,7 +2431,7 @@ var adapterMap = {
       )
     ] });
   },
-  Select: (node, processEvent2) => {
+  Select: (node, processEvent) => {
     const name = getSafeProp(node.props, "name", isString, "selectName");
     const label = getSafeProp(node.props, "label", isString, "");
     const placeholder = getSafeProp(
@@ -1991,7 +2454,7 @@ var adapterMap = {
         node,
         "onValueChange",
         "CHANGE",
-        processEvent2
+        processEvent
       );
       if (handler)
         handler({ value: selectedValue });
@@ -2019,7 +2482,7 @@ var adapterMap = {
       }
     );
   },
-  Textarea: (node, processEvent2) => {
+  Textarea: (node, processEvent) => {
     const { key, ...propsWithoutKey } = node.props || {};
     const name = getSafeProp(propsWithoutKey, "name", isString, "textareaName");
     const label = getSafeProp(propsWithoutKey, "label", isString, "");
@@ -2043,7 +2506,7 @@ var adapterMap = {
         node,
         "onChange",
         "CHANGE",
-        processEvent2
+        processEvent
       );
       if (handler)
         handler({ value: e.target.value });
@@ -2053,13 +2516,13 @@ var adapterMap = {
         node,
         "onFocus",
         "FOCUS",
-        processEvent2
+        processEvent
       );
       if (handler)
         handler({});
     };
     const handleBlur = () => {
-      const handler = createEventHandler(node, "onBlur", "BLUR", processEvent2);
+      const handler = createEventHandler(node, "onBlur", "BLUR", processEvent);
       if (handler)
         handler({});
     };
@@ -2082,7 +2545,7 @@ var adapterMap = {
       )
     ] }, key);
   },
-  Checkbox: (node, processEvent2) => {
+  Checkbox: (node, processEvent) => {
     const { key, ...propsWithoutKey } = node.props || {};
     const name = getSafeProp(propsWithoutKey, "name", isString, "checkboxName");
     const label = getSafeProp(propsWithoutKey, "label", isString, "");
@@ -2095,7 +2558,7 @@ var adapterMap = {
           node,
           "onCheckedChange",
           "CHANGE",
-          processEvent2
+          processEvent
         );
         if (handler)
           handler({ checked: isChecked });
@@ -2122,7 +2585,7 @@ var adapterMap = {
       key
     );
   },
-  RadioGroup: (node, processEvent2) => {
+  RadioGroup: (node, processEvent) => {
     const { key, ...propsWithoutKey } = node.props || {};
     const name = getSafeProp(
       propsWithoutKey,
@@ -2145,7 +2608,7 @@ var adapterMap = {
         node,
         "onValueChange",
         "CHANGE",
-        processEvent2
+        processEvent
       );
       if (handler)
         handler({ value: selectedValue });
@@ -2188,7 +2651,7 @@ var adapterMap = {
       key
     );
   },
-  Tabs: (node, processEvent2) => {
+  Tabs: (node, processEvent) => {
     const { key, ...propsWithoutKey } = node.props || {};
     const rawTabs = getSafeBinding(
       node.bindings,
@@ -2208,7 +2671,7 @@ var adapterMap = {
         node,
         "onValueChange",
         "CHANGE",
-        processEvent2
+        processEvent
       );
       if (handler)
         handler({ value });
@@ -2222,18 +2685,26 @@ var adapterMap = {
         "data-id": node.id,
         children: [
           /* @__PURE__ */ jsx(TabsList, { children: rawTabs.map((tab) => /* @__PURE__ */ jsx(TabsTrigger, { value: tab.value, children: tab.label }, tab.value)) }),
-          rawTabs.map((tab) => /* @__PURE__ */ jsx(TabsContent, { value: tab.value, children: tab.content ? renderNode(tab.content, processEvent2) : null }, tab.value))
+          rawTabs.map((tab) => /* @__PURE__ */ jsx(TabsContent, { value: tab.value, children: tab.content ? renderNode(tab.content, processEvent) : null }, tab.value))
         ]
       },
       key
     );
   },
-  Dialog: (node, processEvent2) => {
+  Dialog: (node, processEvent) => {
     const isOpen = getSafeBinding(
       node.bindings,
-      "open",
+      "visible",
       isBoolean,
-      getSafeProp(node.props, "open", isBoolean, false)
+      // 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,
@@ -2244,10 +2715,13 @@ var adapterMap = {
       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.cloneElement(renderNode(child, processEvent2), { key: child.id })
+      (child) => React.cloneElement(renderNode(child, processEvent), { key: child.id })
     );
     const handleOpenChange = (open) => {
       if (!open) {
@@ -2257,7 +2731,7 @@ var adapterMap = {
           // Assumed event name in UISpec
           "CLICK",
           // Use CLICK as the event type for closing dialogs
-          processEvent2
+          processEvent
         );
         if (handler) {
           handler({});
@@ -2339,12 +2813,30 @@ var adapterMap = {
       },
       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__ */ 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, processEvent2) {
+function renderNode(node, processEvent) {
   const mappedComponent = adapterMap[node.node_type];
   if (mappedComponent) {
-    return mappedComponent(node, processEvent2);
+    return mappedComponent(node, processEvent);
   }
   console.warn(`Unknown node type: ${node.node_type}`);
   return React.createElement(
@@ -2356,370 +2848,141 @@ function renderNode(node, processEvent2) {
 var renderedNodesCache = /* @__PURE__ */ new Map();
 var MAX_CACHE_SIZE = 10;
 var CACHE_TTL = 5e3;
-async function renderNode2(node, adapter = "shadcn", processEvent2) {
-  const startTime = Date.now();
-  const nodeId = node.id;
-  const cachedItem = renderedNodesCache.get(nodeId);
-  if (cachedItem && startTime - cachedItem.timestamp < CACHE_TTL) {
-    return cachedItem.element;
-  }
-  await systemEvents.emit(
-    createSystemEvent("RENDER_START" /* RENDER_START */, { layout: node })
-  );
-  let result;
-  switch (adapter) {
-    case "shadcn":
-      result = renderNode(node, processEvent2);
-      break;
-    default:
-      console.warn(`Unsupported adapter: ${adapter}, falling back to shadcn`);
-      result = renderNode(node, processEvent2);
-  }
-  await systemEvents.emit(
-    createSystemEvent("RENDER_COMPLETE" /* RENDER_COMPLETE */, {
-      layout: node,
-      renderTimeMs: Date.now() - startTime
-    })
-  );
-  renderedNodesCache.set(nodeId, {
-    element: result,
-    timestamp: startTime
-  });
-  if (renderedNodesCache.size > MAX_CACHE_SIZE) {
-    const oldestKey = [...renderedNodesCache.entries()].sort(
-      ([, a], [, b]) => a.timestamp - b.timestamp
-    )[0][0];
-    renderedNodesCache.delete(oldestKey);
-  }
-  return result;
-}
-function renderShimmer(node, adapter = "shadcn") {
-  if (!node) {
-    return /* @__PURE__ */ jsx(ShimmerBlock, {});
-  }
-  switch (node.node_type) {
-    case "ListView":
-      return /* @__PURE__ */ jsx(ShimmerTable, { rows: 3 });
-    case "Detail":
-      return /* @__PURE__ */ jsx(ShimmerCard, {});
-    case "Container":
-      return /* @__PURE__ */ jsx("div", { className: "space-y-4", children: node.children?.map((child, index) => /* @__PURE__ */ jsx("div", { children: renderShimmer(child, adapter) }, index)) });
-    default:
-      return /* @__PURE__ */ jsx(ShimmerBlock, {});
-  }
-}
-
-// src/core/bindings.ts
-var bindingsCache = /* @__PURE__ */ new Map();
-var MAX_CACHE_SIZE2 = 50;
-var CACHE_TTL2 = 2e3;
-var nodeCacheTimestamps = /* @__PURE__ */ new Map();
-function hashDataContext(context) {
-  return JSON.stringify(context);
-}
-function createCacheKey(nodeId, context) {
-  return `${nodeId}:${hashDataContext(context)}`;
-}
-function getValueByPath(context, path) {
-  const parts = path.split(".");
-  let current = context;
-  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;
-      console.log(
-        `[processBinding Debug] Processing EXACT template: "${binding}", Path: "${pathToResolve}", Has itemData: ${!!itemData}`
-      );
-      if (itemData) {
-        try {
-          console.log(
-            `[processBinding Debug] itemData content (EXACT):`,
-            JSON.parse(JSON.stringify(itemData))
-          );
-        } catch {
-        }
-      }
-      if ((pathToResolve.startsWith("item.") || pathToResolve.startsWith("row.")) && itemData) {
-        if (pathToResolve.startsWith("item.")) {
-          resolvedValue = getValueByPath(itemData, pathToResolve.substring(5));
-        } else {
-          resolvedValue = getValueByPath(itemData, pathToResolve.substring(4));
-        }
-      } else if (itemData && pathToResolve in itemData) {
-        resolvedValue = getValueByPath(itemData, pathToResolve);
-      }
-      if (resolvedValue === void 0) {
-        resolvedValue = getValueByPath(context, pathToResolve);
-      }
-      return resolvedValue;
-    } else if (binding.includes("{{") && binding.includes("}}")) {
-      console.log(
-        `[processBinding Debug] Processing EMBEDDED templates: "${binding}", Has itemData: ${!!itemData}`
-      );
-      if (itemData) {
-        try {
-          console.log(
-            `[processBinding Debug] itemData content (EMBEDDED):`,
-            JSON.parse(JSON.stringify(itemData))
-          );
-        } catch {
-        }
-      }
-      const resolvedString = binding.replaceAll(
-        /{{(.*?)}}/g,
-        // Non-greedy match inside braces
-        (match, path) => {
-          const trimmedPath = path.trim();
-          let resolvedValue = void 0;
-          if ((trimmedPath.startsWith("item.") || trimmedPath.startsWith("row.")) && itemData) {
-            if (trimmedPath.startsWith("item.")) {
-              resolvedValue = getValueByPath(
-                itemData,
-                trimmedPath.substring(5)
-              );
-            } else {
-              resolvedValue = getValueByPath(
-                itemData,
-                trimmedPath.substring(4)
-              );
-            }
-          } else if (itemData && trimmedPath in itemData) {
-            resolvedValue = getValueByPath(itemData, trimmedPath);
-          }
-          if (resolvedValue === void 0) {
-            resolvedValue = getValueByPath(context, trimmedPath);
-          }
-          return resolvedValue === null || resolvedValue === void 0 ? "" : String(resolvedValue);
-        }
-      );
-      return resolvedString;
-    } else {
-      const pathToResolve = binding;
-      let resolvedValue = void 0;
-      console.log(
-        `[processBinding Debug] Processing PATH string: "${pathToResolve}", Has itemData: ${!!itemData}`
-      );
-      if (itemData && !pathToResolve.includes(".") && pathToResolve in itemData) {
-        resolvedValue = getValueByPath(itemData, pathToResolve);
-      }
-      if (resolvedValue === void 0) {
-        resolvedValue = getValueByPath(context, pathToResolve);
-      }
-      return resolvedValue;
-    }
-  }
-  if (Array.isArray(binding)) {
-    return binding.map((item) => processBinding(item, context, 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) {
-  const effectiveContext = itemData ? { ...context, item: itemData } : context;
-  const currentTime = Date.now();
-  const cacheKey = createCacheKey(node.id, effectiveContext);
-  const cachedNode = bindingsCache.get(cacheKey);
-  const cachedTimestamp = nodeCacheTimestamps.get(cacheKey);
-  if (cachedNode && cachedTimestamp && currentTime - cachedTimestamp < CACHE_TTL2) {
-    return cachedNode;
-  }
-  if (!itemData) {
-    await systemEvents.emit(
-      createSystemEvent("BINDING_RESOLUTION_START" /* BINDING_RESOLUTION_START */, {
-        layout: node
-      })
-    );
-  }
-  const result = {
-    ...node,
-    props: node.props ? JSON.parse(JSON.stringify(node.props)) : null,
-    events: node.events ? JSON.parse(JSON.stringify(node.events)) : null,
-    bindings: node.bindings ? JSON.parse(JSON.stringify(node.bindings)) : null,
-    children: null
-    // Initialize children to null
-  };
-  const resolvedBindings = {};
-  if (node.bindings) {
-    for (const [key, bindingValue] of Object.entries(node.bindings)) {
-      const resolvedValue = processBinding(bindingValue, context, itemData);
-      resolvedBindings[key] = resolvedValue;
-      if (resolvedValue !== void 0) {
-        if (!result.props)
-          result.props = {};
-        result.props[key] = resolvedValue;
-      }
-    }
-  }
-  result.bindings = null;
-  if (node.events) {
-    result.events = processBinding(
-      node.events,
-      context,
-      itemData
-    );
-  } else {
-    result.events = null;
+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"}`;
   }
-  const dataBindingValue = resolvedBindings["data"] ?? resolvedBindings["items"];
-  if ((node.node_type === "ListView" || node.node_type === "Table") && Array.isArray(dataBindingValue) && node.children && node.children.length > 0) {
-    const templateChild = node.children[0];
-    const mappedChildren = await Promise.all(
-      dataBindingValue.map(async (currentItemData, index) => {
-        try {
-          if (typeof currentItemData !== "object" || currentItemData === null) {
-            console.warn(
-              `List item at index ${index} for node ${node.id} is not an object:`,
-              currentItemData
-            );
-            return null;
-          }
-          const currentItemAsRecord = currentItemData;
-          const itemId = currentItemAsRecord.id;
-          const instanceId = `${templateChild.id}-${itemId || index}`;
-          const childNodeInstance = JSON.parse(
-            JSON.stringify(templateChild)
-          );
-          childNodeInstance.id = instanceId;
-          const resolvedChild = await resolveBindings(
-            childNodeInstance,
-            context,
-            currentItemAsRecord
-          );
-          if (!resolvedChild.props)
-            resolvedChild.props = {};
-          resolvedChild.props.key = itemId || `${node.id}-item-${index}`;
-          return resolvedChild;
-        } catch (error) {
-          console.error(
-            `[resolveBindings Error] Error processing item at index ${index} for node ${node.id}:`,
-            error,
-            "Item Data:",
-            currentItemData
-          );
-          return null;
-        }
-      })
-    );
-    result.children = mappedChildren.filter(
-      (child) => child !== null
-    );
-  } else if (node.children && node.children.length > 0) {
-    result.children = await Promise.all(
-      node.children.map((child) => resolveBindings(child, context, itemData))
+  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.`
     );
-  } else {
-    result.children = [];
   }
-  if (!itemData) {
-    await systemEvents.emit(
-      createSystemEvent("BINDING_RESOLUTION_COMPLETE" /* BINDING_RESOLUTION_COMPLETE */, {
-        originalLayout: node,
-        resolvedLayout: result
-      })
+  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.`
     );
   }
-  bindingsCache.set(cacheKey, result);
-  nodeCacheTimestamps.set(cacheKey, currentTime);
-  if (bindingsCache.size > MAX_CACHE_SIZE2) {
-    let oldestKey = null;
-    let oldestTimestamp = currentTime;
-    for (const [key, timestamp] of nodeCacheTimestamps.entries()) {
-      if (timestamp < oldestTimestamp) {
-        oldestTimestamp = timestamp;
-        oldestKey = key;
-      }
-    }
-    if (oldestKey) {
-      bindingsCache.delete(oldestKey);
-      nodeCacheTimestamps.delete(oldestKey);
-    }
+  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;
   }
-  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);
+  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)`;
       }
-      break;
+      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";
     }
-    case "HIDE_DETAIL": {
-      newContext = setValueByPath(newContext, "selected", 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, processEvent);
       break;
-    }
-    case "SET_VALUE": {
-      if (payload?.path && "value" in payload) {
-        const path = String(payload.path);
-        newContext = setValueByPath(newContext, path, payload.value);
+    default:
+      console.warn(`Unsupported adapter: ${adapter}, falling back to shadcn`);
+      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;
       }
-      break;
     }
+    console.log(
+      `[Renderer renderNode] Adapter for task-detail returned element. Element type:`,
+      elementType
+    );
+  }
+  await systemEvents.emit(
+    createSystemEvent("RENDER_COMPLETE" /* RENDER_COMPLETE */, {
+      layout: node,
+      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__ */ jsx(ShimmerBlock, {});
+  }
+  switch (node.node_type) {
+    case "ListView":
+      return /* @__PURE__ */ jsx(ShimmerTable, { rows: 3 });
+    case "Detail":
+      return /* @__PURE__ */ jsx(ShimmerCard, {});
+    case "Container":
+      return /* @__PURE__ */ jsx("div", { className: "space-y-4", children: node.children?.map((child, index) => /* @__PURE__ */ jsx("div", { children: renderShimmer(child, adapter) }, index)) });
     default:
-      console.warn(`Unknown action: ${action}`);
+      return /* @__PURE__ */ jsx(ShimmerBlock, {});
   }
-  return newContext;
 }
 
 // src/core/events.ts
@@ -2856,18 +3119,26 @@ var AutoUI = ({
   eventHooks,
   systemEventHooks,
   debugMode = false,
-  mockMode = false,
   planningConfig,
   integration = {},
-  scope = {},
-  enablePartialUpdates = false,
-  openaiApiKey
+  enablePartialUpdates = true,
+  apiKey
 }) => {
+  const stableGoal = React.useMemo(() => goal, [goal]);
+  const schemaStringified = React.useMemo(() => JSON.stringify(schema), [schema]);
+  const stableSchemaProp = React.useMemo(() => schema, [schemaStringified]);
   const [schemaAdapterInstance] = useState(null);
   const [dataContext, setDataContext] = useState({});
   const [componentsAvailable, setComponentsAvailable] = useState(true);
-  const effectiveSchema = schema;
-  const scopedGoal = goal;
+  const [uiStatus, setUiStatus] = useState("initializing");
+  const [currentResolvedLayoutForRender, setCurrentResolvedLayoutForRender] = useState(null);
+  const [isResolvingBindings, setIsResolvingBindings] = useState(false);
+  const [renderedNode, setRenderedNode] = useState(
+    null
+  );
+  const currentResolvedLayoutRef = useRef(null);
+  const effectiveSchema = stableSchemaProp;
+  const scopedGoal = stableGoal;
   useEffect(() => {
     if (componentAdapter === "shadcn") {
       setComponentsAvailable(areShadcnComponentsAvailable());
@@ -2912,7 +3183,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
           };
@@ -2929,12 +3199,11 @@ var AutoUI = ({
     schema: effectiveSchema,
     goal: scopedGoal,
     userContext,
-    mockMode,
     planningConfig,
-    router: void 0,
     dataContext,
+    // Pass the local dataContext here, engine will use it if its own is empty initially
     enablePartialUpdates,
-    openaiApiKey
+    apiKey
   });
   const eventManagerRef = useRef(new EventManager());
   useEffect(() => {
@@ -2973,161 +3242,344 @@ var AutoUI = ({
       unregisters.forEach((unregister) => unregister());
     };
   }, [eventHooks]);
-  const processEvent2 = useCallback(
+  useEffect(() => {
+    currentResolvedLayoutRef.current = currentResolvedLayoutForRender;
+  }, [currentResolvedLayoutForRender]);
+  const processEvent = useCallback(
     async (event) => {
+      setUiStatus("event_processing");
+      const layoutAtEventTime = currentResolvedLayoutRef.current;
       const shouldProceed = await eventManagerRef.current.processEvent(event);
-      if (onEvent) {
+      if (onEvent)
         onEvent(event);
-      }
       if (!shouldProceed) {
-        console.info("Event processing was prevented by hooks", event);
-        return;
-      }
-      const findNodeById2 = (node, id) => {
-        if (!node)
-          return void 0;
-        if (node.id === id)
-          return node;
-        if (node.children) {
-          for (const child of node.children) {
-            const found = findNodeById2(child, id);
-            if (found)
-              return found;
-          }
-        }
-        return void 0;
-      };
-      const sourceNode = findNodeById2(state.layout, event.nodeId);
-      if (!sourceNode) {
-        console.warn(`Node not found for event: ${event.nodeId}`);
-        handleEvent(event);
+        console.info(
+          "[AutoUI.processEvent] Event processing stopped by local hooks",
+          event
+        );
+        setUiStatus("idle");
         return;
       }
-      const eventConfig = sourceNode.events?.[event.type];
-      if (!eventConfig) {
-        console.warn(
-          `No event config found for ${event.type} on node ${event.nodeId}`
+      if (event.type === "CLICK" && layoutAtEventTime && event.nodeId.includes("view-details-button")) {
+        const mainContent = layoutAtEventTime.children?.find(
+          (c) => c.id === "main-content"
         );
-        handleEvent(event);
-        return;
+        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}`
+          );
+        }
       }
-      const newContext = executeAction(
-        eventConfig.action,
-        eventConfig.target || "",
-        // Provide empty string as fallback if target is null
-        {
-          ...eventConfig.payload,
-          ...event.payload
-        },
-        dataContext,
-        state.layout || void 0
-      );
-      setDataContext(newContext);
-      handleEvent(event);
-    },
-    [dataContext, handleEvent, onEvent, state.layout]
-  );
-  const [resolvedLayout, setResolvedLayout] = useState(
-    void 0
-  );
-  const [renderedNode, setRenderedNode] = useState(
-    null
-  );
-  const resolveLayoutBindings = useCallback(async () => {
-    if (state.layout && dataContext) {
-      console.log(
-        "[AutoUI Debug] DataContext before resolving bindings:",
-        JSON.stringify(dataContext, null, 2)
-      );
       console.log(
-        "[AutoUI Debug] Raw layout before resolving (from planner):",
-        JSON.stringify(state.layout, null, 2)
-      );
-      const correctedLayout = correctListBindingsRecursive(
-        state.layout,
-        dataContext
+        "[AutoUI.processEvent] Forwarding event to engine:",
+        JSON.stringify(event, null, 2)
       );
       console.log(
-        "[AutoUI Debug] Layout after binding correction (before resolving):",
-        JSON.stringify(correctedLayout, null, 2)
+        "[AutoUI.processEvent] Passing currentLayout ID (at event time):",
+        layoutAtEventTime?.id
       );
-      const resolved = await resolveBindings(correctedLayout, dataContext);
-      setResolvedLayout(resolved);
       console.log(
-        "[AutoUI Debug] Resolved layout after bindings:",
-        JSON.stringify(resolved, null, 2)
+        "[AutoUI.processEvent] Passing dataContext keys to engine:",
+        Object.keys(dataContext)
       );
-    } else {
-      setResolvedLayout(void 0);
+      handleEvent(event, layoutAtEventTime, dataContext);
+    },
+    [
+      dataContext,
+      handleEvent,
+      onEvent,
+      eventManagerRef
+      // currentResolvedLayoutForRender removed - using ref instead to prevent infinite loops
+      // setUiStatus is implicitly available
+    ]
+  );
+  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);
+      }
     }
+  }, [state.dataContext, dataContext]);
+  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");
+      }
+    };
+    resolveAndSetLayout();
   }, [state.layout, dataContext]);
   useEffect(() => {
-    resolveLayoutBindings();
-  }, [resolveLayoutBindings]);
-  const renderResolvedLayout = useCallback(async () => {
-    if (resolvedLayout) {
-      try {
-        const rendered = await renderNode2(
-          resolvedLayout,
-          componentAdapter,
-          processEvent2
+    const renderLayout = async () => {
+      if (currentResolvedLayoutForRender && !isResolvingBindings) {
+        setUiStatus("rendering");
+        console.log(
+          "[AutoUI Debug] Rendering with currentResolvedLayoutForRender:",
+          JSON.stringify(currentResolvedLayoutForRender, null, 2)
         );
-        setRenderedNode(rendered);
-      } catch (err) {
-        console.error("Error rendering node:", err);
+        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
+  ]);
+  useEffect(() => {
+    if (uiStatus !== "error") {
+      setUiStatus("initializing");
+    }
+  }, []);
+  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");
+        }
       }
-    } else {
-      setRenderedNode(null);
     }
-  }, [resolvedLayout, componentAdapter, processEvent2]);
+  }, [state.loading, state.layout, state.error, uiStatus, isResolvingBindings]);
   useEffect(() => {
-    renderResolvedLayout();
-  }, [renderResolvedLayout]);
+    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));
+    }
+  }, [
+    debugMode,
+    uiStatus,
+    state.layout,
+    state.loading,
+    state.error,
+    currentResolvedLayoutForRender,
+    renderedNode,
+    isResolvingBindings,
+    dataContext
+  ]);
   if (!componentsAvailable) {
     return /* @__PURE__ */ jsxs("div", { className: "autoui-error p-4 border border-red-300 bg-red-50 text-red-700 rounded", children: [
       /* @__PURE__ */ jsx("p", { className: "font-medium", children: "Component Library Not Found" }),
       /* @__PURE__ */ jsx("p", { className: "text-sm whitespace-pre-line", children: getMissingComponentsMessage() })
     ] });
   }
+  const showShimmer = (uiStatus === "initializing" || state.loading || isResolvingBindings) && !state.error;
   return /* @__PURE__ */ 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__ */ jsx("div", { className: "autoui-loading", children: state.layout ? renderShimmer(state.layout, componentAdapter) : /* @__PURE__ */ jsxs("div", { className: "autoui-shimmer-container", children: [
-            /* @__PURE__ */ jsx("div", { className: "autoui-shimmer-header" }),
-            /* @__PURE__ */ jsx("div", { className: "autoui-shimmer-content" })
-          ] }) })
-        ) : (
-          // Render the resolved layout
-          /* @__PURE__ */ jsx("div", { className: "autoui-content", children: renderedNode })
-        ),
-        state.error && /* @__PURE__ */ jsxs("div", { className: "autoui-error p-4 border border-red-300 bg-red-50 dark:bg-red-900 dark:border-red-700 rounded-md", children: [
-          /* @__PURE__ */ jsx("p", { className: "autoui-error-title text-lg font-semibold text-red-700 dark:text-red-300 mb-2", children: "Error generating UI" }),
-          /* @__PURE__ */ jsx("p", { className: "autoui-error-message text-sm text-red-600 dark:text-red-300", children: state.error }),
-          !mockMode && /* @__PURE__ */ jsxs("div", { className: "mt-4 text-sm text-red-600 dark:text-red-300", children: [
-            /* @__PURE__ */ jsx("p", { children: "This could be because:" }),
-            /* @__PURE__ */ jsxs("ul", { className: "list-disc pl-5 mt-2", children: [
-              /* @__PURE__ */ jsx("li", { children: "Your OpenAI API key is missing or invalid" }),
-              /* @__PURE__ */ jsx("li", { children: "The OpenAI service is experiencing issues" }),
-              /* @__PURE__ */ jsx("li", { children: "Your API rate limit has been exceeded" })
-            ] }),
-            /* @__PURE__ */ jsxs("p", { className: "mt-2", children: [
-              "Try setting ",
-              /* @__PURE__ */ jsx("code", { children: "mockMode=true" }),
-              " to use sample data instead."
-            ] })
-          ] })
+        /* @__PURE__ */ jsxs("div", { children: [
+          "Current Status: ",
+          uiStatus
+        ] }),
+        uiStatus === "idle" && !isResolvingBindings && renderedNode && /* @__PURE__ */ jsx("div", { className: "autoui-content", children: renderedNode }),
+        state.error && /* @__PURE__ */ jsxs("div", { className: "autoui-error", children: [
+          "Error: ",
+          state.error
+        ] }),
+        showShimmer && state.layout && // Show shimmer if we have a layout to base it on
+        /* @__PURE__ */ jsx("div", { className: "autoui-loading", children: renderShimmer(state.layout, componentAdapter) }),
+        showShimmer && !state.layout && // Fallback shimmer if no layout yet
+        /* @__PURE__ */ jsxs("div", { className: "autoui-loading p-4", children: [
+          /* @__PURE__ */ jsx("div", { className: "w-full h-20 bg-gray-200 animate-pulse rounded mb-4" }),
+          /* @__PURE__ */ jsx("div", { className: "w-full h-40 bg-gray-200 animate-pulse rounded" })
         ] })
       ]
     }
   );
 };
+var uiEventType = z.enum([
+  "INIT",
+  "CLICK",
+  "CHANGE",
+  "SUBMIT",
+  "MOUSEOVER",
+  "MOUSEOUT",
+  "FOCUS",
+  "BLUR"
+]);
+var uiEvent = z.object({
+  type: uiEventType,
+  nodeId: z.string(),
+  timestamp: z.number().nullable(),
+  payload: z.record(z.unknown()).nullable()
+});
+z.enum(["AI_RESPONSE", "ERROR"]);
+var runtimeRecord = z.record(z.unknown()).nullable();
+var uiSpecNode = z.object({
+  id: z.string(),
+  node_type: z.string(),
+  props: runtimeRecord,
+  bindings: runtimeRecord,
+  events: z.record(
+    z.string(),
+    z.object({
+      action: z.string(),
+      target: z.string(),
+      payload: runtimeRecord
+    })
+  ).nullable(),
+  children: z.lazy(() => z.array(uiSpecNode)).nullable()
+});
+z.discriminatedUnion("type", [
+  z.object({
+    type: z.literal("UI_EVENT"),
+    event: uiEvent
+  }),
+  z.object({
+    type: z.literal("AI_RESPONSE"),
+    node: uiSpecNode
+  }),
+  z.object({
+    type: z.literal("PARTIAL_UPDATE"),
+    nodeId: z.string(),
+    node: uiSpecNode
+  }),
+  z.object({
+    type: z.literal("ADD_NODE"),
+    parentId: z.string(),
+    node: uiSpecNode,
+    index: z.number().nullable()
+  }),
+  z.object({
+    type: z.literal("REMOVE_NODE"),
+    nodeId: z.string()
+  }),
+  z.object({
+    type: z.literal("ERROR"),
+    message: z.string()
+  }),
+  z.object({
+    type: z.literal("LOADING"),
+    isLoading: z.boolean()
+  }),
+  z.object({
+    type: z.literal("SET_DATA_CONTEXT"),
+    payload: z.record(z.string(), z.unknown())
+  })
+]);
+z.object({
+  layout: uiSpecNode.nullable(),
+  loading: z.boolean(),
+  history: z.array(uiEvent),
+  error: z.string().nullable(),
+  dataContext: z.record(z.string(), z.unknown())
+});
+z.object({
+  schema: z.record(z.unknown()),
+  goal: z.string(),
+  history: z.array(uiEvent).nullable(),
+  userContext: z.record(z.unknown()).nullable().optional()
+});
 
 // src/adapters/schema/drizzle.ts
 var DrizzleAdapter = class {
@@ -3262,97 +3714,7 @@ var generateUIComponent = async (prompt) => {
   );
   return `<div>Generated UI Component for: ${prompt}</div>`;
 };
-function usePlanner(options) {
-  const {
-    schema,
-    goal,
-    openaiApiKey,
-    userContext,
-    initialLayout,
-    mockMode: optionsMockMode
-  } = options;
-  const [layout, setLayout] = useState(
-    initialLayout || void 0
-  );
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
-  const router = options.router || createDefaultRouter();
-  const dataContext = {};
-  const initialFetchAttempted = useRef(false);
-  const mockMode = optionsMockMode || !openaiApiKey;
-  const generateInitialLayout = useCallback(async () => {
-    setLoading(true);
-    setError(null);
-    try {
-      const plannerInput2 = {
-        schema,
-        goal,
-        userContext: userContext || null,
-        history: null
-      };
-      let generatedLayout;
-      if (mockMode) {
-        console.warn(
-          "Using mock planner in usePlanner hook (mockMode enabled or API key missing)."
-        );
-        generatedLayout = mockPlanner(plannerInput2);
-      } else {
-        generatedLayout = await callPlannerLLM(
-          plannerInput2,
-          openaiApiKey,
-          void 0
-        );
-      }
-      setLayout(generatedLayout);
-    } catch (err) {
-      setError(err instanceof Error ? err : new Error(String(err)));
-    } finally {
-      setLoading(false);
-    }
-  }, [schema, goal, userContext, openaiApiKey, mockMode]);
-  const handleEvent = useCallback(
-    async (event) => {
-      if (!layout) {
-        setError(new Error("Cannot handle event - no layout exists"));
-        return;
-      }
-      setLoading(true);
-      setError(null);
-      try {
-        const updatedLayout = await processEvent(
-          event,
-          router,
-          schema,
-          layout,
-          dataContext,
-          goal,
-          userContext,
-          openaiApiKey
-        );
-        setLayout(updatedLayout);
-      } catch (err) {
-        setError(err instanceof Error ? err : new Error(String(err)));
-      } finally {
-        setLoading(false);
-      }
-    },
-    [layout, router, schema, dataContext, goal, userContext, openaiApiKey]
-  );
-  useEffect(() => {
-    if (options.initialLayout === void 0 && layout === void 0 && !initialFetchAttempted.current) {
-      initialFetchAttempted.current = true;
-      generateInitialLayout();
-    }
-  }, [options.initialLayout, layout, generateInitialLayout]);
-  return {
-    layout,
-    loading,
-    error,
-    handleEvent,
-    generateInitialLayout
-  };
-}
 
-export { ActionRouter, ActionType, AutoUI, DrizzleAdapter, SystemEventType, createDefaultRouter, createEventHook, createSchemaAdapter, createSystemEvent, generateComponent, generateUIComponent, generateUIDescription, systemEvents, uiEvent, uiEventType, uiSpecNode, usePlanner };
+export { ActionRouter, ActionType, AutoUI, DrizzleAdapter, SystemEventType, componentType, createEventHook, createSchemaAdapter, createSystemEvent, generateComponent, generateUIComponent, generateUIDescription, openAIUISpec, systemEvents, uiEvent, uiEventType, uiSpecNode };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.mjs.map