autoui-react 0.0.3-alpha

package/dist/index.mjs

@@ -0,0 +1,1449 @@
+import { useState, useEffect, useRef, useCallback, useReducer } from 'react';
+import { z } from 'zod';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { generateText } from 'ai';
+import { openai } from '@ai-sdk/openai';
+
+// src/core/reducer.ts
+function cloneNode(node) {
+  return {
+    ...node,
+    props: node.props ? { ...node.props } : void 0,
+    bindings: node.bindings ? { ...node.bindings } : void 0,
+    events: node.events ? { ...node.events } : void 0,
+    children: node.children?.map((child) => cloneNode(child))
+  };
+}
+function findNodeById(tree, nodeId) {
+  if (!tree)
+    return void 0;
+  if (tree.id === nodeId)
+    return tree;
+  if (tree.children) {
+    for (const child of tree.children) {
+      const found = findNodeById(child, nodeId);
+      if (found)
+        return found;
+    }
+  }
+  return void 0;
+}
+function updateNodeById(tree, nodeId, updater) {
+  const result = cloneNode(tree);
+  function findPath(node, id, currentPath = []) {
+    const newPath = [...currentPath, node];
+    if (node.id === id) {
+      return newPath;
+    }
+    if (node.children) {
+      for (const child of node.children) {
+        const path2 = findPath(child, id, newPath);
+        if (path2)
+          return path2;
+      }
+    }
+    return null;
+  }
+  const path = findPath(result, nodeId);
+  if (!path)
+    return result;
+  const nodeToUpdate = path[path.length - 1];
+  const updatedNode = updater(nodeToUpdate);
+  if (path.length === 1) {
+    return updatedNode;
+  }
+  const parent = path[path.length - 2];
+  const updatedParent = {
+    ...parent,
+    children: parent.children?.map(
+      (child) => child.id === nodeId ? updatedNode : child
+    )
+  };
+  if (path.length === 2) {
+    return updatedParent;
+  }
+  return updateNodeById(
+    result,
+    parent.id,
+    () => updatedParent
+  );
+}
+function replaceNodeById(tree, nodeId, newNode) {
+  return updateNodeById(tree, nodeId, () => newNode);
+}
+function addChildNode(tree, parentId, newChild, index) {
+  return updateNodeById(tree, parentId, (node) => {
+    const children = node.children ? [...node.children] : [];
+    if (index !== void 0 && index >= 0 && index <= children.length) {
+      children.splice(index, 0, newChild);
+    } else {
+      children.push(newChild);
+    }
+    return {
+      ...node,
+      children
+    };
+  });
+}
+function removeNodeById(tree, nodeId) {
+  function findParent(node, id) {
+    if (node.children) {
+      if (node.children.some((child) => child.id === id)) {
+        return node;
+      }
+      for (const child of node.children) {
+        const parent2 = findParent(child, id);
+        if (parent2)
+          return parent2;
+      }
+    }
+    return null;
+  }
+  const result = cloneNode(tree);
+  if (result.id === nodeId) {
+    throw new Error("Cannot remove root node");
+  }
+  const parent = findParent(result, nodeId);
+  if (!parent)
+    return result;
+  return updateNodeById(result, parent.id, (node) => ({
+    ...node,
+    children: node.children?.filter((child) => child.id !== nodeId)
+  }));
+}
+function uiReducer(state, action) {
+  switch (action.type) {
+    case "UI_EVENT": {
+      return {
+        ...state,
+        loading: true,
+        history: [...state.history, action.event]
+      };
+    }
+    case "AI_RESPONSE": {
+      return {
+        ...state,
+        layout: action.node,
+        loading: false,
+        error: void 0
+      };
+    }
+    case "PARTIAL_UPDATE": {
+      if (!state.layout) {
+        return {
+          ...state,
+          layout: action.node,
+          loading: false,
+          error: void 0
+        };
+      }
+      if (action.nodeId === "root" || action.nodeId === state.layout.id) {
+        return {
+          ...state,
+          layout: action.node,
+          loading: false,
+          error: void 0
+        };
+      }
+      return {
+        ...state,
+        layout: replaceNodeById(state.layout, action.nodeId, action.node),
+        loading: false,
+        error: void 0
+      };
+    }
+    case "ADD_NODE": {
+      if (!state.layout) {
+        return state;
+      }
+      return {
+        ...state,
+        layout: addChildNode(
+          state.layout,
+          action.parentId,
+          action.node,
+          action.index
+        ),
+        loading: false,
+        error: void 0
+      };
+    }
+    case "REMOVE_NODE": {
+      if (!state.layout) {
+        return state;
+      }
+      return {
+        ...state,
+        layout: removeNodeById(state.layout, action.nodeId),
+        loading: false,
+        error: void 0
+      };
+    }
+    case "LOADING": {
+      return {
+        ...state,
+        loading: action.isLoading
+      };
+    }
+    case "ERROR": {
+      return {
+        ...state,
+        error: action.message,
+        loading: false
+      };
+    }
+    default:
+      return state;
+  }
+}
+var initialState = {
+  loading: true,
+  history: []
+};
+
+// src/core/action-router.ts
+var ActionType = /* @__PURE__ */ ((ActionType2) => {
+  ActionType2["FULL_REFRESH"] = "FULL_REFRESH";
+  ActionType2["UPDATE_NODE"] = "UPDATE_NODE";
+  ActionType2["ADD_DROPDOWN"] = "ADD_DROPDOWN";
+  ActionType2["SHOW_DETAIL"] = "SHOW_DETAIL";
+  ActionType2["HIDE_DETAIL"] = "HIDE_DETAIL";
+  ActionType2["TOGGLE_STATE"] = "TOGGLE_STATE";
+  ActionType2["UPDATE_FORM"] = "UPDATE_FORM";
+  ActionType2["NAVIGATE"] = "NAVIGATE";
+  return ActionType2;
+})(ActionType || {});
+var ActionRouter = class {
+  constructor() {
+    this.routes = {};
+  }
+  /**
+   * Register a new action route
+   * @param eventType - UI event type to route
+   * @param config - Route configuration
+   */
+  registerRoute(eventType, config) {
+    if (!this.routes[eventType]) {
+      this.routes[eventType] = [];
+    }
+    this.routes[eventType].push(config);
+  }
+  /**
+   * Find the appropriate route for an event
+   * @param event - UI event
+   * @param layout - Current UI layout
+   * @param dataContext - Current data context
+   * @returns Route resolution or null if no match
+   */
+  resolveRoute(event, schema, layout, dataContext, goal, userContext) {
+    const routes = this.routes[event.type] || [];
+    if (routes.length === 0) {
+      return {
+        actionType: "FULL_REFRESH" /* FULL_REFRESH */,
+        targetNodeId: layout?.id || "root",
+        plannerInput: {
+          schema,
+          goal,
+          history: [event],
+          userContext
+        },
+        prompt: `Generate a new UI for the goal: "${goal}". The user just triggered: ${event.type} on node ${event.nodeId}`
+      };
+    }
+    const sourceNode = layout ? findNodeById(layout, event.nodeId) : void 0;
+    const nodeConfig = sourceNode?.events?.[event.type];
+    let matchingRoute;
+    if (nodeConfig) {
+      matchingRoute = routes.find(
+        (route) => route.actionType.toString() === nodeConfig.action
+      );
+    }
+    if (!matchingRoute) {
+      matchingRoute = routes[0];
+    }
+    const targetNodeId = nodeConfig?.target || matchingRoute.targetNodeId || event.nodeId;
+    const additionalContext = {};
+    if (matchingRoute.contextKeys) {
+      matchingRoute.contextKeys.forEach((key) => {
+        additionalContext[key] = dataContext[key];
+      });
+    }
+    if (sourceNode) {
+      additionalContext.sourceNode = sourceNode;
+    }
+    if (layout) {
+      const targetNode = findNodeById(layout, targetNodeId);
+      if (targetNode) {
+        additionalContext.targetNode = targetNode;
+      }
+    }
+    if (event.payload) {
+      additionalContext.eventPayload = event.payload;
+    }
+    if (nodeConfig?.payload) {
+      Object.entries(nodeConfig.payload).forEach(([key, value]) => {
+        additionalContext[key] = value;
+      });
+    }
+    const plannerInput2 = {
+      schema,
+      goal,
+      history: [event],
+      userContext: {
+        ...userContext,
+        ...additionalContext
+      }
+    };
+    const prompt = this.processTemplate(
+      matchingRoute.promptTemplate,
+      {
+        goal,
+        eventType: event.type,
+        nodeId: event.nodeId,
+        targetNodeId,
+        actionType: matchingRoute.actionType,
+        ...additionalContext
+      }
+    );
+    return {
+      actionType: matchingRoute.actionType,
+      targetNodeId,
+      plannerInput: plannerInput2,
+      prompt
+    };
+  }
+  /**
+   * Process a prompt template with variables
+   * @param template - Template string with ${var} placeholders
+   * @param values - Values to substitute
+   * @returns Processed string
+   */
+  processTemplate(template, values) {
+    return template.replace(/\${(\w+)}/g, (_, key) => {
+      return values[key] !== void 0 ? String(values[key]) : `\${${key}}`;
+    });
+  }
+};
+function createDefaultRouter() {
+  const router = new ActionRouter();
+  router.registerRoute("CLICK", {
+    actionType: "FULL_REFRESH" /* FULL_REFRESH */,
+    targetNodeId: "root",
+    promptTemplate: 'Generate a new UI for the goal: "${goal}". The user just clicked on node ${nodeId}'
+  });
+  router.registerRoute("CLICK", {
+    actionType: "SHOW_DETAIL" /* SHOW_DETAIL */,
+    targetNodeId: "${targetNodeId}",
+    promptTemplate: "Update the UI to show details for the selected item. Current node: ${nodeId}, Target node: ${targetNodeId}",
+    contextKeys: ["selected"]
+  });
+  router.registerRoute("CLICK", {
+    actionType: "NAVIGATE" /* NAVIGATE */,
+    targetNodeId: "root",
+    promptTemplate: "Navigate to a new view based on the user clicking ${nodeId}. Current goal: ${goal}"
+  });
+  router.registerRoute("CLICK", {
+    actionType: "ADD_DROPDOWN" /* ADD_DROPDOWN */,
+    targetNodeId: "${targetNodeId}",
+    promptTemplate: "Add a dropdown menu to node ${targetNodeId} with options relevant to the clicked element ${nodeId}"
+  });
+  router.registerRoute("CLICK", {
+    actionType: "TOGGLE_STATE" /* TOGGLE_STATE */,
+    targetNodeId: "${nodeId}",
+    promptTemplate: "Toggle the state of node ${nodeId} (e.g., expanded/collapsed, selected/unselected)"
+  });
+  router.registerRoute("CHANGE", {
+    actionType: "UPDATE_FORM" /* UPDATE_FORM */,
+    targetNodeId: "${targetNodeId}",
+    promptTemplate: "Update the form based on the user changing the value of ${nodeId}"
+  });
+  return router;
+}
+var uiEventType = z.enum([
+  "CLICK",
+  "CHANGE",
+  "SUBMIT",
+  "MOUSEOVER",
+  "MOUSEOUT",
+  "FOCUS",
+  "BLUR"
+]);
+var uiEvent = z.object({
+  type: uiEventType,
+  nodeId: z.string(),
+  timestamp: z.number().optional(),
+  payload: z.record(z.any()).optional()
+});
+z.enum([
+  "AI_RESPONSE",
+  "ERROR"
+]);
+var uiSpecNode = z.lazy(() => z.object({
+  id: z.string(),
+  type: z.string(),
+  // e.g., "ListView", "Button", "TextField"
+  props: z.record(z.any()).optional(),
+  bindings: z.record(z.any()).optional(),
+  // Data bindings
+  events: z.record(z.string(), z.object({
+    action: z.string(),
+    target: z.string().optional(),
+    payload: z.record(z.any()).optional()
+  })).optional(),
+  children: z.array(uiSpecNode).optional()
+}));
+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().optional()
+  }),
+  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.optional(),
+  loading: z.boolean(),
+  history: z.array(uiEvent),
+  error: z.string().optional()
+});
+z.object({
+  schema: z.record(z.unknown()),
+  goal: z.string(),
+  history: z.array(uiEvent).optional(),
+  userContext: z.record(z.unknown()).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
+({
+  MOCK_PLANNER: import.meta.env?.VITE_MOCK_PLANNER || "1",
+  NODE_ENV: import.meta.env?.MODE || "development"
+  // Add other environment variables as needed
+});
+
+// src/core/planner.ts
+function buildPrompt(input, targetNodeId, customPrompt) {
+  const { schema, goal, history, userContext } = input;
+  const schemaInfo = Object.entries(schema).map(([tableName, tableSchema]) => {
+    return `Table: ${tableName}
+Schema: ${JSON.stringify(tableSchema)}`;
+  }).join("\n\n");
+  const recentEvents = history?.slice(-5).map(
+    (event) => `Event: ${event.type} on node ${event.nodeId}${event.payload ? ` with payload ${JSON.stringify(event.payload)}` : ""}`
+  ).join("\n") || "No recent events";
+  const userContextSection = userContext ? `
+
+User Context:
+${JSON.stringify(userContext)}` : "";
+  return `
+You are an expert UI generator. 
+Create a user interface that achieves the following goal: "${goal}"
+
+Available data schema:
+${schemaInfo}
+
+Recent user interactions:
+${recentEvents}${userContextSection}
+
+Generate a complete UI specification in JSON format that matches the following TypeScript type:
+type UISpecNode = {
+  id: string;
+  type: string;
+  props?: Record<string, any>;
+  bindings?: Record<string, any>;
+  events?: Record<string, { action: string; target?: string; payload?: Record<string, any>; }>;
+  children?: UISpecNode[];
+};
+
+UI Guidance:
+1. Create a focused interface that directly addresses the goal
+2. Use appropriate UI patterns (lists, forms, details, etc.)
+3. Include navigation between related views when needed
+4. Keep the interface simple and intuitive
+5. Bind to schema data where appropriate
+6. Provide event handlers for user interactions
+
+Respond ONLY with the JSON UI specification and no other text.
+  `;
+}
+function mockPlanner(input, targetNodeId, customPrompt) {
+  const mockNode = {
+    id: targetNodeId || "root",
+    type: "Container",
+    props: { title: "Mock UI" },
+    children: [
+      {
+        id: "text-1",
+        type: "Text",
+        props: { text: "This is a mock UI for testing" }
+      }
+    ]
+  };
+  return mockNode;
+}
+
+// src/core/state.ts
+var useChat = (config) => ({
+  append: async (message) => {
+  },
+  data: { content: "{}" },
+  isLoading: false,
+  error: null,
+  stop: () => {
+  }
+});
+function useUIStateEngine({
+  schema,
+  goal,
+  userContext,
+  mockMode = false,
+  planningConfig = {},
+  router = createDefaultRouter(),
+  dataContext = {},
+  enablePartialUpdates = false
+}) {
+  const [state, dispatch] = useReducer(uiReducer, initialState);
+  const { append, data, isLoading, error, stop } = useChat();
+  const handleEvent = useCallback((event) => {
+    dispatch({ type: "UI_EVENT", event });
+    stop();
+    if (enablePartialUpdates) {
+      const route = router.resolveRoute(
+        event,
+        schema,
+        state.layout,
+        dataContext,
+        goal,
+        userContext
+      );
+      if (route) {
+        console.log("Resolved route:", route);
+        systemEvents.emit(
+          createSystemEvent("PLAN_START" /* PLAN_START */, {
+            plannerInput: route.plannerInput
+          })
+        );
+        if (mockMode) {
+          const node = mockPlanner(route.plannerInput, route.targetNodeId, route.prompt);
+          switch (route.actionType) {
+            case "FULL_REFRESH" /* FULL_REFRESH */:
+              dispatch({ type: "AI_RESPONSE", node });
+              break;
+            case "UPDATE_NODE" /* UPDATE_NODE */:
+            case "SHOW_DETAIL" /* SHOW_DETAIL */:
+            case "HIDE_DETAIL" /* HIDE_DETAIL */:
+            case "TOGGLE_STATE" /* TOGGLE_STATE */:
+            case "ADD_DROPDOWN" /* ADD_DROPDOWN */:
+            case "UPDATE_FORM" /* UPDATE_FORM */:
+            case "NAVIGATE" /* NAVIGATE */:
+              dispatch({
+                type: "PARTIAL_UPDATE",
+                nodeId: route.targetNodeId,
+                node
+              });
+              break;
+          }
+        } else {
+          const prompt = route.prompt;
+          systemEvents.emit(
+            createSystemEvent("PLAN_PROMPT_CREATED" /* PLAN_PROMPT_CREATED */, { prompt })
+          );
+          append({
+            content: prompt,
+            role: "user"
+          });
+          sessionStorage.setItem("currentRoute", JSON.stringify({
+            actionType: route.actionType,
+            targetNodeId: route.targetNodeId
+          }));
+        }
+        return;
+      }
+    }
+    const input = {
+      schema,
+      goal,
+      history: [...state.history, event],
+      userContext
+    };
+    if (mockMode) {
+      const node = mockPlanner();
+      dispatch({ type: "AI_RESPONSE", node });
+    } else {
+      const prompt = buildPrompt(input);
+      append({
+        content: prompt,
+        role: "user"
+      });
+    }
+  }, [append, goal, schema, state.history, state.layout, stop, userContext, router, mockMode, dataContext, enablePartialUpdates]);
+  useEffect(() => {
+    if (isLoading) {
+      dispatch({ type: "LOADING", isLoading: true });
+    } else if (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error);
+      dispatch({ type: "ERROR", message: errorMessage });
+      systemEvents.emit(
+        createSystemEvent("PLAN_ERROR" /* PLAN_ERROR */, {
+          error: error instanceof Error ? error : new Error(String(error))
+        })
+      );
+    } else if (data.content) {
+      try {
+        systemEvents.emit(
+          createSystemEvent("PLAN_RESPONSE_CHUNK" /* PLAN_RESPONSE_CHUNK */, {
+            chunk: data.content,
+            isComplete: true
+          })
+        );
+        const jsonMatch = data.content.match(/```(?:json)?\s*([\s\S]*?)\s*```/) || [null, data.content];
+        const jsonStr = jsonMatch[1].trim();
+        const parsedJson = JSON.parse(jsonStr);
+        const validatedNode = uiSpecNode.parse(parsedJson);
+        const routeInfoStr = sessionStorage.getItem("currentRoute");
+        if (routeInfoStr && enablePartialUpdates) {
+          try {
+            const routeInfo = JSON.parse(routeInfoStr);
+            switch (routeInfo.actionType) {
+              case "FULL_REFRESH" /* FULL_REFRESH */:
+                dispatch({ type: "AI_RESPONSE", node: validatedNode });
+                break;
+              case "UPDATE_NODE" /* UPDATE_NODE */:
+              case "SHOW_DETAIL" /* SHOW_DETAIL */:
+              case "HIDE_DETAIL" /* HIDE_DETAIL */:
+              case "TOGGLE_STATE" /* TOGGLE_STATE */:
+              case "ADD_DROPDOWN" /* ADD_DROPDOWN */:
+              case "UPDATE_FORM" /* UPDATE_FORM */:
+              case "NAVIGATE" /* NAVIGATE */:
+                dispatch({
+                  type: "PARTIAL_UPDATE",
+                  nodeId: routeInfo.targetNodeId,
+                  node: validatedNode
+                });
+                break;
+              default:
+                dispatch({ type: "AI_RESPONSE", node: validatedNode });
+            }
+            sessionStorage.removeItem("currentRoute");
+          } catch (e) {
+            console.error("Error parsing route info:", e);
+            dispatch({ type: "AI_RESPONSE", node: validatedNode });
+          }
+        } else {
+          dispatch({ type: "AI_RESPONSE", node: validatedNode });
+        }
+        systemEvents.emit(
+          createSystemEvent("PLAN_COMPLETE" /* PLAN_COMPLETE */, {
+            layout: validatedNode,
+            executionTimeMs: 0
+            // Not available here
+          })
+        );
+      } catch (parseError) {
+        console.error("Failed to parse LLM response:", parseError);
+        dispatch({
+          type: "ERROR",
+          message: "Failed to parse LLM response"
+        });
+        systemEvents.emit(
+          createSystemEvent("PLAN_ERROR" /* PLAN_ERROR */, {
+            error: parseError instanceof Error ? parseError : new Error("Parse error")
+          })
+        );
+      }
+    }
+  }, [data.content, error, isLoading, enablePartialUpdates]);
+  useEffect(() => {
+    const input = {
+      schema,
+      goal,
+      history: [],
+      userContext
+    };
+    if (mockMode) {
+      const node = mockPlanner();
+      dispatch({ type: "AI_RESPONSE", node });
+    } else {
+      const prompt = buildPrompt(input);
+      append({
+        content: prompt,
+        role: "user"
+      });
+    }
+  }, [append, goal, schema, userContext, mockMode]);
+  return {
+    state,
+    dispatch,
+    handleEvent
+  };
+}
+var ShimmerBlock = () => /* @__PURE__ */ jsx("div", { className: "w-full h-8 bg-gray-200 animate-pulse rounded" });
+var ShimmerTable = ({ rows = 3 }) => /* @__PURE__ */ jsxs("div", { className: "w-full space-y-2", children: [
+  /* @__PURE__ */ jsx("div", { className: "w-full h-10 bg-gray-200 animate-pulse rounded" }),
+  Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "w-full h-12 bg-gray-200 animate-pulse rounded" }, i))
+] });
+var ShimmerCard = () => /* @__PURE__ */ jsxs("div", { className: "w-full p-4 space-y-4 border rounded-lg", children: [
+  /* @__PURE__ */ jsx("div", { className: "w-3/4 h-6 bg-gray-200 animate-pulse rounded" }),
+  /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx("div", { className: "w-full h-4 bg-gray-200 animate-pulse rounded" }),
+    /* @__PURE__ */ jsx("div", { className: "w-full h-4 bg-gray-200 animate-pulse rounded" }),
+    /* @__PURE__ */ jsx("div", { className: "w-5/6 h-4 bg-gray-200 animate-pulse rounded" })
+  ] })
+] });
+var Container = (props) => /* @__PURE__ */ jsx("div", { className: `w-full ${props.className || ""}`, style: props.style, children: props.children });
+var Header = ({ title }) => /* @__PURE__ */ jsx("header", { className: "py-4 px-6 border-b mb-4", children: /* @__PURE__ */ jsx("h1", { className: "text-xl font-semibold", children: title }) });
+var Button = ({ onClick, children, variant = "default" }) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    className: `px-4 py-2 rounded font-medium ${variant === "default" ? "bg-blue-600 text-white" : variant === "outline" ? "border border-gray-300 text-gray-700" : "bg-red-600 text-white"}`,
+    onClick,
+    children
+  }
+);
+var Table = ({ items = [], fields = [], onSelect, selectable }) => /* @__PURE__ */ jsx("div", { className: "w-full border rounded-lg overflow-hidden", children: /* @__PURE__ */ jsxs("table", { className: "w-full", children: [
+  /* @__PURE__ */ jsx("thead", { className: "bg-gray-50", children: /* @__PURE__ */ jsx("tr", { children: fields.map((field) => /* @__PURE__ */ jsx("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: field.label }, field.key)) }) }),
+  /* @__PURE__ */ jsx("tbody", { className: "bg-white divide-y divide-gray-200", children: items.map((item, index) => /* @__PURE__ */ jsx(
+    "tr",
+    {
+      onClick: () => selectable && onSelect && onSelect(item),
+      className: selectable ? "cursor-pointer hover:bg-gray-50" : "",
+      children: fields.map((field) => /* @__PURE__ */ jsx("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-500", children: item[field.key] }, field.key))
+    },
+    index
+  )) })
+] }) });
+var Detail = ({ data, fields = [], title, visible = true, onBack }) => {
+  if (!visible)
+    return null;
+  return /* @__PURE__ */ jsxs("div", { className: "w-full border rounded-lg p-6 space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
+      title && /* @__PURE__ */ jsx("h2", { className: "text-lg font-medium", children: title }),
+      onBack && /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: onBack, children: "Back" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-4", children: fields.map((field) => {
+      if (field.type === "heading") {
+        return /* @__PURE__ */ jsx("h3", { className: "text-xl font-semibold", children: data?.[field.key] }, field.key);
+      }
+      if (field.type === "content") {
+        return /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-700", children: data?.[field.key] }, field.key);
+      }
+      return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+        field.label && /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-500", children: field.label }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm", children: data?.[field.key] })
+      ] }, field.key);
+    }) })
+  ] });
+};
+var createEventHandler = (node, eventName) => {
+  const eventConfig = node.events?.[eventName];
+  if (!eventConfig)
+    return void 0;
+  return () => {
+    console.log(`Event triggered: ${eventName} on node ${node.id}`, {
+      action: eventConfig.action,
+      target: eventConfig.target,
+      payload: eventConfig.payload
+    });
+  };
+};
+var adapterMap = {
+  Container: (node) => /* @__PURE__ */ jsx(Container, { style: node.props?.style, className: node.props?.className, children: node.children?.map((child) => renderNode(child)) }),
+  Header: (node) => /* @__PURE__ */ jsx(Header, { title: node.props?.title || "Untitled" }),
+  Button: (node) => /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: node.props?.variant,
+      onClick: createEventHandler(node, "onClick"),
+      children: node.props?.label || "Button"
+    }
+  ),
+  ListView: (node) => /* @__PURE__ */ jsx(
+    Table,
+    {
+      items: node.bindings?.items || [],
+      fields: node.bindings?.fields || [],
+      selectable: node.props?.selectable,
+      onSelect: createEventHandler(node, "onSelect")
+    }
+  ),
+  Detail: (node) => /* @__PURE__ */ jsx(
+    Detail,
+    {
+      data: node.bindings?.data,
+      fields: node.bindings?.fields || [],
+      title: node.props?.title,
+      visible: node.props?.visible !== false,
+      onBack: createEventHandler(node, "onBack")
+    }
+  )
+};
+function renderNode(node) {
+  const Component = adapterMap[node.type];
+  if (Component) {
+    return Component(node);
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "p-2 border border-red-300 rounded", children: [
+    /* @__PURE__ */ jsxs("p", { className: "text-sm text-red-500", children: [
+      "Unsupported component: ",
+      node.type
+    ] }),
+    node.children?.map((child) => renderNode(child))
+  ] });
+}
+async function renderNode2(node, adapter = "shadcn") {
+  const startTime = Date.now();
+  await systemEvents.emit(
+    createSystemEvent("RENDER_START" /* RENDER_START */, { layout: node })
+  );
+  let result;
+  switch (adapter) {
+    case "shadcn":
+      result = renderNode(node);
+      break;
+    default:
+      console.warn(`Unsupported adapter: ${adapter}, falling back to shadcn`);
+      result = renderNode(node);
+  }
+  await systemEvents.emit(
+    createSystemEvent("RENDER_COMPLETE" /* RENDER_COMPLETE */, {
+      layout: node,
+      renderTimeMs: Date.now() - startTime
+    })
+  );
+  return result;
+}
+function renderShimmer(node, adapter = "shadcn") {
+  if (!node) {
+    return /* @__PURE__ */ jsx(ShimmerBlock, {});
+  }
+  switch (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
+function getValueByPath(context, path) {
+  const parts = path.split(".");
+  let current = context;
+  for (const part of parts) {
+    if (current === null || current === void 0) {
+      return void 0;
+    }
+    if (typeof current !== "object") {
+      return void 0;
+    }
+    current = current[part];
+  }
+  return current;
+}
+function setValueByPath(context, path, value) {
+  const result = { ...context };
+  const parts = path.split(".");
+  let current = result;
+  for (let i = 0; i < parts.length - 1; i++) {
+    const part = parts[i];
+    if (!(part in current) || current[part] === null || current[part] === void 0) {
+      current[part] = {};
+    }
+    current = current[part];
+    if (typeof current !== "object") {
+      current = {};
+    }
+  }
+  const lastPart = parts[parts.length - 1];
+  current[lastPart] = value;
+  return result;
+}
+function processBinding(binding, context) {
+  if (typeof binding === "string") {
+    return getValueByPath(context, binding);
+  }
+  if (Array.isArray(binding)) {
+    return binding.map((item) => processBinding(item, context));
+  }
+  if (binding !== null && typeof binding === "object") {
+    const result = {};
+    for (const [key, value] of Object.entries(binding)) {
+      result[key] = processBinding(value, context);
+    }
+    return result;
+  }
+  return binding;
+}
+async function resolveBindings(node, context) {
+  await systemEvents.emit(
+    createSystemEvent("BINDING_RESOLUTION_START" /* BINDING_RESOLUTION_START */, { layout: node })
+  );
+  const result = {
+    ...node,
+    props: node.props ? { ...node.props } : void 0,
+    events: node.events ? { ...node.events } : void 0
+  };
+  if (node.bindings) {
+    for (const [key, binding] of Object.entries(node.bindings)) {
+      const value = processBinding(binding, context);
+      if (value !== void 0) {
+        if (!result.props) {
+          result.props = {};
+        }
+        result.props[key] = value;
+      }
+    }
+  }
+  if (node.children) {
+    result.children = await Promise.all(node.children.map((child) => resolveBindings(child, context)));
+  }
+  await systemEvents.emit(
+    createSystemEvent("BINDING_RESOLUTION_COMPLETE" /* BINDING_RESOLUTION_COMPLETE */, {
+      originalLayout: node,
+      resolvedLayout: result
+    })
+  );
+  return result;
+}
+function executeAction(action, targetId, payload, context = {}, layoutTree) {
+  let newContext = { ...context };
+  switch (action) {
+    case "VIEW_DETAIL": {
+      if (payload?.item) {
+        newContext = setValueByPath(newContext, "selected", payload.item);
+      }
+      break;
+    }
+    case "HIDE_DETAIL": {
+      newContext = setValueByPath(newContext, "selected", null);
+      break;
+    }
+    case "SET_VALUE": {
+      if (payload?.path && "value" in payload) {
+        const path = String(payload.path);
+        newContext = setValueByPath(newContext, path, payload.value);
+      }
+      break;
+    }
+    default:
+      console.warn(`Unknown action: ${action}`);
+  }
+  return newContext;
+}
+
+// src/core/events.ts
+var EventManager = class {
+  constructor() {
+    this.hooks = {};
+  }
+  /**
+   * Register a hook for specific event types
+   * 
+   * @param eventTypes - Event types to register for, or 'all' for all events
+   * @param hook - Hook function to execute
+   * @returns Unregister function
+   */
+  register(eventTypes, hook) {
+    if (eventTypes === "all") {
+      if (!this.hooks.all) {
+        this.hooks.all = [];
+      }
+      this.hooks.all.push(hook);
+      return () => {
+        if (this.hooks.all) {
+          this.hooks.all = this.hooks.all.filter((h) => h !== hook);
+        }
+      };
+    }
+    eventTypes.forEach((type) => {
+      if (!this.hooks[type]) {
+        this.hooks[type] = [];
+      }
+      this.hooks[type]?.push(hook);
+    });
+    return () => {
+      eventTypes.forEach((type) => {
+        if (this.hooks[type]) {
+          this.hooks[type] = this.hooks[type]?.filter((h) => h !== hook);
+        }
+      });
+    };
+  }
+  /**
+   * Process an event through all registered hooks
+   * 
+   * @param event - The UI event to process
+   * @returns Whether the default action should proceed
+   */
+  async processEvent(event) {
+    let defaultPrevented = false;
+    let propagationStopped = false;
+    const context = {
+      originalEvent: event,
+      preventDefault: () => {
+        defaultPrevented = true;
+      },
+      stopPropagation: () => {
+        propagationStopped = true;
+      },
+      isDefaultPrevented: () => defaultPrevented,
+      isPropagationStopped: () => propagationStopped
+    };
+    if (this.hooks.all) {
+      for (const hook of this.hooks.all) {
+        await hook(context);
+        if (propagationStopped)
+          break;
+      }
+    }
+    if (!propagationStopped && this.hooks[event.type]) {
+      for (const hook of this.hooks[event.type] || []) {
+        await hook(context);
+        if (propagationStopped)
+          break;
+      }
+    }
+    return !defaultPrevented;
+  }
+};
+function createEventHook(eventTypes, hook, options) {
+  return async (context) => {
+    await hook(context);
+    if (options?.preventDefault) {
+      context.preventDefault();
+    }
+    if (options?.stopPropagation) {
+      context.stopPropagation();
+    }
+  };
+}
+var AutoUI = ({
+  schema,
+  goal,
+  componentAdapter = "shadcn",
+  userContext,
+  onEvent,
+  eventHooks,
+  systemEventHooks,
+  debugMode = false,
+  mockMode = true,
+  databaseConfig,
+  planningConfig,
+  integration = {},
+  scope = {},
+  enablePartialUpdates = false
+}) => {
+  const [schemaAdapterInstance, setSchemaAdapterInstance] = useState(null);
+  const [dataContext, setDataContext] = useState({});
+  const effectiveSchema = schema;
+  const scopedGoal = goal;
+  useEffect(() => {
+    const unregisters = [];
+    if (systemEventHooks) {
+      Object.entries(systemEventHooks).forEach(([eventType, hooks]) => {
+        if (!hooks)
+          return;
+        hooks.forEach((hook) => {
+          const unregister = systemEvents.on(eventType, hook);
+          unregisters.push(unregister);
+        });
+      });
+    }
+    if (debugMode) {
+      const debugHook = (event) => {
+        console.debug(`[AutoUI Debug] System Event:`, event);
+      };
+      Object.values(SystemEventType).forEach((eventType) => {
+        const unregister = systemEvents.on(eventType, debugHook);
+        unregisters.push(unregister);
+      });
+    }
+    return () => {
+      unregisters.forEach((unregister) => unregister());
+    };
+  }, [systemEventHooks, debugMode]);
+  useEffect(() => {
+    const initializeDataContext = async () => {
+      let initialData = {};
+      if (schemaAdapterInstance) {
+        initialData = await schemaAdapterInstance.initializeDataContext();
+      } else if (effectiveSchema) {
+        Object.entries(effectiveSchema).forEach(([key, tableSchema]) => {
+          initialData[key] = {
+            schema: tableSchema,
+            // For development, add sample data if available
+            data: tableSchema?.sampleData || [],
+            selected: null
+          };
+        });
+      }
+      if (userContext) {
+        initialData.user = userContext;
+      }
+      setDataContext(initialData);
+    };
+    initializeDataContext();
+  }, [effectiveSchema, schemaAdapterInstance, userContext]);
+  const { state, handleEvent } = useUIStateEngine({
+    schema: effectiveSchema,
+    goal: scopedGoal,
+    userContext,
+    mockMode,
+    planningConfig,
+    router: void 0,
+    dataContext,
+    enablePartialUpdates
+  });
+  const eventManagerRef = useRef(new EventManager());
+  useEffect(() => {
+    if (!eventHooks)
+      return;
+    const unregisters = [];
+    if (eventHooks.all) {
+      const unregister = eventManagerRef.current.register("all", async (ctx) => {
+        for (const hook of eventHooks.all || []) {
+          await hook(ctx);
+          if (ctx.isPropagationStopped())
+            break;
+        }
+      });
+      unregisters.push(unregister);
+    }
+    Object.entries(eventHooks).forEach(([type, hooks]) => {
+      if (type === "all" || !hooks)
+        return;
+      const unregister = eventManagerRef.current.register([type], async (ctx) => {
+        for (const hook of hooks) {
+          await hook(ctx);
+          if (ctx.isPropagationStopped())
+            break;
+        }
+      });
+      unregisters.push(unregister);
+    });
+    return () => {
+      unregisters.forEach((unregister) => unregister());
+    };
+  }, [eventHooks]);
+  useCallback(async (event) => {
+    const shouldProceed = await eventManagerRef.current.processEvent(event);
+    if (onEvent) {
+      onEvent(event);
+    }
+    if (!shouldProceed) {
+      console.info("Event processing was prevented by hooks", event);
+      return;
+    }
+    const findNodeById2 = (node, id) => {
+      if (!node)
+        return void 0;
+      if (node.id === id)
+        return node;
+      if (node.children) {
+        for (const child of node.children) {
+          const found = findNodeById2(child, id);
+          if (found)
+            return found;
+        }
+      }
+      return void 0;
+    };
+    const sourceNode = findNodeById2(state.layout, event.nodeId);
+    if (!sourceNode) {
+      console.warn(`Node not found for event: ${event.nodeId}`);
+      handleEvent(event);
+      return;
+    }
+    const eventConfig = sourceNode.events?.[event.type];
+    if (!eventConfig) {
+      console.warn(`No event config found for ${event.type} on node ${event.nodeId}`);
+      handleEvent(event);
+      return;
+    }
+    const newContext = executeAction(
+      eventConfig.action,
+      eventConfig.target,
+      {
+        ...eventConfig.payload,
+        ...event.payload
+      },
+      dataContext,
+      state.layout
+    );
+    setDataContext(newContext);
+    handleEvent(event);
+  }, [dataContext, handleEvent, onEvent, state.layout]);
+  const [resolvedLayout, setResolvedLayout] = useState(void 0);
+  const [renderedNode, setRenderedNode] = useState(null);
+  useEffect(() => {
+    if (state.layout) {
+      resolveBindings(state.layout, dataContext).then((resolved) => setResolvedLayout(resolved)).catch((err) => console.error("Error resolving bindings:", err));
+    } else {
+      setResolvedLayout(void 0);
+    }
+  }, [state.layout, dataContext]);
+  useEffect(() => {
+    if (resolvedLayout) {
+      renderNode2(resolvedLayout, componentAdapter).then((rendered) => setRenderedNode(rendered)).catch((err) => console.error("Error rendering node:", err));
+    } else {
+      setRenderedNode(null);
+    }
+  }, [resolvedLayout, componentAdapter]);
+  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", children: [
+          /* @__PURE__ */ jsx("p", { className: "autoui-error-title", children: "Error generating UI" }),
+          /* @__PURE__ */ jsx("p", { className: "autoui-error-message", children: state.error })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/adapters/schema/drizzle.ts
+var DrizzleAdapter = class {
+  constructor(options) {
+    this.schema = options.schema;
+    this.client = options.client;
+    this.useMockData = options.useMockData ?? !options.client;
+    this.mockData = options.mockData ?? {};
+  }
+  /**
+   * Convert Drizzle schema to AutoUI schema format
+   */
+  getSchema() {
+    const result = {};
+    Object.entries(this.schema).forEach(([tableName, table]) => {
+      result[tableName] = {
+        tableName: table.name,
+        schema: table.schema,
+        columns: this.convertColumns(table.columns),
+        // Include mock data if available and mock mode is enabled
+        ...this.useMockData && this.mockData[tableName] ? { sampleData: this.mockData[tableName] } : {}
+      };
+    });
+    return result;
+  }
+  /**
+   * Convert Drizzle columns to AutoUI column format
+   */
+  convertColumns(columns) {
+    const result = {};
+    Object.entries(columns).forEach(([columnName, column]) => {
+      result[columnName] = {
+        type: this.mapDataType(column.dataType),
+        notNull: column.notNull,
+        defaultValue: column.defaultValue,
+        primaryKey: column.primaryKey,
+        unique: column.unique,
+        references: column.references
+      };
+    });
+    return result;
+  }
+  /**
+   * Map Drizzle data types to standard types
+   */
+  mapDataType(drizzleType) {
+    const typeMap = {
+      "serial": "integer",
+      "integer": "integer",
+      "int": "integer",
+      "bigint": "integer",
+      "text": "string",
+      "varchar": "string",
+      "char": "string",
+      "boolean": "boolean",
+      "bool": "boolean",
+      "timestamp": "datetime",
+      "timestamptz": "datetime",
+      "date": "date",
+      "time": "time",
+      "json": "object",
+      "jsonb": "object",
+      "real": "number",
+      "float": "number",
+      "double": "number",
+      "numeric": "number",
+      "decimal": "number"
+    };
+    return typeMap[drizzleType.toLowerCase()] || "string";
+  }
+  /**
+   * Execute a query against the database
+   */
+  async query(tableName, query) {
+    if (this.useMockData) {
+      return this.mockData[tableName] || [];
+    }
+    if (!this.client) {
+      throw new Error("No database client provided and mock mode is disabled");
+    }
+    if (this.client.queryFn) {
+      return this.client.queryFn(tableName, query);
+    }
+    throw new Error("No query function provided in client config");
+  }
+  /**
+   * Initialize the data context with schema information and optional mock data
+   */
+  async initializeDataContext() {
+    const context = {};
+    for (const [tableName, table] of Object.entries(this.schema)) {
+      context[tableName] = {
+        schema: table,
+        data: this.useMockData ? this.mockData[tableName] || [] : [],
+        selected: null
+      };
+    }
+    return context;
+  }
+};
+
+// src/adapters/schema/index.ts
+function createSchemaAdapter(options) {
+  switch (options.type) {
+    case "drizzle":
+      return new DrizzleAdapter(options.options);
+    case "custom":
+      return options.adapter;
+    default:
+      throw new Error(`Unsupported schema adapter type: ${options.type}`);
+  }
+}
+async function generateComponent(schema) {
+  try {
+    const { text } = await generateText({
+      model: openai("gpt-4"),
+      prompt: `Generate a React component based on this data schema: ${JSON.stringify(schema)}`
+    });
+    return text;
+  } catch (error) {
+    console.error("Error generating component:", error);
+    throw error;
+  }
+}
+async function generateUIDescription(schema) {
+  const { text } = await generateText({
+    model: openai("gpt-4"),
+    prompt: `Generate a React component description based on this data schema: ${JSON.stringify(schema)}. 
+    Include what fields should be displayed and what user interactions might be needed.`
+  });
+  return text;
+}
+async function generateUIComponent(schema) {
+  const { text } = await generateText({
+    model: openai("gpt-4"),
+    prompt: `Generate a basic React component based on this data schema: ${JSON.stringify(schema)}.`
+  });
+  return text;
+}
+
+export { ActionRouter, ActionType, AutoUI, DrizzleAdapter, SystemEventType, createDefaultRouter, createEventHook, createSchemaAdapter, createSystemEvent, generateComponent, generateUIComponent, generateUIDescription, systemEvents, uiEvent, uiEventType, uiSpecNode };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.mjs.map