autoui-react 0.0.3-alpha → 0.0.4-alpha

package/README.md

@@ -241,4 +241,50 @@ MIT
 
 ## Contributing
 
-Contributions are welcome! Please feel free to submit a Pull Request.
+Contributions are welcome! Please feel free to submit a Pull Request.
+## Component Adapters
+
+### shadcn/ui (Default)
+
+This library uses [shadcn/ui](https://ui.shadcn.com/) components by default. To set up these components in your project:
+
+```bash
+# Run the setup script to install required shadcn components
+npm run setup-shadcn
+```
+
+This will:
+1. Install Tailwind CSS if not already installed
+2. Set up the necessary shadcn/ui components
+3. Configure your project to use them
+
+After setup, make sure to import the CSS in your application:
+
+```jsx
+// In your main entry file (e.g., main.tsx, index.tsx)
+import "./src/tailwind.css";
+```
+
+### Custom Component Adapters
+
+You can create custom adapters for other component libraries by implementing an adapter module:
+
+```jsx
+// Create a custom adapter (e.g., for Material UI)
+import { Button, Table, Card } from '@mui/material';
+
+const materialAdapter = {
+  Button: (props) => <Button {...props} />,
+  Table: (props) => <Table {...props} />,
+  // ...
+};
+
+// Use your custom adapter
+<AutoUI 
+  schema={mySchema}
+  goal="Create a user dashboard"
+  componentAdapter="material" // Not yet supported in v0.1
+/>
+```
+
+Support for custom component adapters is planned for future releases.

package/dist/index.css

@@ -53,4 +53,14 @@
 .autoui-error-message {
   font-size: 0.875rem;
 }
+.autoui-mock-container {
+  color: inherit;
+  width: 100%;
+  color: #1f2937;
+}
+@media (prefers-color-scheme: dark) {
+  .autoui-mock-container {
+    color: #f3f4f6;
+  }
+}
 /*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/styles/autoui.css"],"sourcesContent":["/* AutoUI Component Styles */\n\n.autoui-root {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n}\n\n/* Loading states */\n.autoui-loading {\n  width: 100%;\n  height: 100%;\n}\n\n.autoui-shimmer-container {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  padding: 1rem;\n}\n\n.autoui-shimmer-header {\n  height: 2.5rem;\n  background-color: #e5e7eb;\n  border-radius: 0.25rem;\n  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n.autoui-shimmer-content {\n  height: 16rem;\n  background-color: #e5e7eb;\n  border-radius: 0.25rem;\n  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n@keyframes pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}\n\n/* Content */\n.autoui-content {\n  flex: 1;\n  width: 100%;\n}\n\n/* Error states */\n.autoui-error {\n  padding: 1rem;\n  border: 1px solid #fca5a5;\n  background-color: #fee2e2;\n  color: #b91c1c;\n  border-radius: 0.25rem;\n  margin-top: 1rem;\n}\n\n.autoui-error-title {\n  font-weight: 600;\n}\n\n.autoui-error-message {\n  font-size: 0.875rem;\n} "],"mappings":";AAEA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,UAAQ;AACR,SAAO;AACT;AAGA,CAAC;AACC,SAAO;AACP,UAAQ;AACV;AAEA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,OAAK;AACL,WAAS;AACX;AAEA,CAAC;AACC,UAAQ;AACR,oBAAkB;AAClB,iBAAe;AACf,aAAW,MAAM,GAAG,aAAa,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG;AACnD;AAEA,CAAC;AACC,UAAQ;AACR,oBAAkB;AAClB,iBAAe;AACf,aAAW,MAAM,GAAG,aAAa,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG;AACnD;AAEA,WAVa;AAWX;AACE,aAAS;AACX;AACA;AACE,aAAS;AACX;AACF;AAGA,CAAC;AACC,QAAM;AACN,SAAO;AACT;AAGA,CAAC;AACC,WAAS;AACT,UAAQ,IAAI,MAAM;AAClB,oBAAkB;AAClB,SAAO;AACP,iBAAe;AACf,cAAY;AACd;AAEA,CAAC;AACC,eAAa;AACf;AAEA,CAAC;AACC,aAAW;AACb;","names":[]}
+{"version":3,"sources":["../src/styles/autoui.css"],"sourcesContent":["/* AutoUI Component Styles */\n\n.autoui-root {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n}\n\n/* Loading states */\n.autoui-loading {\n  width: 100%;\n  height: 100%;\n}\n\n.autoui-shimmer-container {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  padding: 1rem;\n}\n\n.autoui-shimmer-header {\n  height: 2.5rem;\n  background-color: #e5e7eb;\n  border-radius: 0.25rem;\n  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n.autoui-shimmer-content {\n  height: 16rem;\n  background-color: #e5e7eb;\n  border-radius: 0.25rem;\n  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n@keyframes pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}\n\n/* Content */\n.autoui-content {\n  flex: 1;\n  width: 100%;\n}\n\n/* Error states */\n.autoui-error {\n  padding: 1rem;\n  border: 1px solid #fca5a5;\n  background-color: #fee2e2;\n  color: #b91c1c;\n  border-radius: 0.25rem;\n  margin-top: 1rem;\n}\n\n.autoui-error-title {\n  font-weight: 600;\n}\n\n.autoui-error-message {\n  font-size: 0.875rem;\n}\n\n/* Style for the mock Container component in shadcn.tsx */\n.autoui-mock-container {\n  color: inherit;\n  width: 100%;\n  /* text-gray-800 */\n  color: #1f2937; \n}\n\n/* Dark mode styling for the mock Container */\n@media (prefers-color-scheme: dark) {\n  .autoui-mock-container {\n    /* dark:text-gray-100 */\n    color: #f3f4f6;\n  }\n} "],"mappings":";AAEA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,UAAQ;AACR,SAAO;AACT;AAGA,CAAC;AACC,SAAO;AACP,UAAQ;AACV;AAEA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,OAAK;AACL,WAAS;AACX;AAEA,CAAC;AACC,UAAQ;AACR,oBAAkB;AAClB,iBAAe;AACf,aAAW,MAAM,GAAG,aAAa,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG;AACnD;AAEA,CAAC;AACC,UAAQ;AACR,oBAAkB;AAClB,iBAAe;AACf,aAAW,MAAM,GAAG,aAAa,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG;AACnD;AAEA,WAVa;AAWX;AACE,aAAS;AACX;AACA;AACE,aAAS;AACX;AACF;AAGA,CAAC;AACC,QAAM;AACN,SAAO;AACT;AAGA,CAAC;AACC,WAAS;AACT,UAAQ,IAAI,MAAM;AAClB,oBAAkB;AAClB,SAAO;AACP,iBAAe;AACf,cAAY;AACd;AAEA,CAAC;AACC,eAAa;AACf;AAEA,CAAC;AACC,aAAW;AACb;AAGA,CAAC;AACC,SAAO;AACP,SAAO;AAEP,SAAO;AACT;AAGA,OAAO,CAAC,oBAAoB,EAAE;AAC5B,GATD;AAWG,WAAO;AACT;AACF;","names":[]}

package/dist/index.d.mts

@@ -12,80 +12,77 @@ type UIEventType = z.infer<typeof uiEventType>;
 declare const uiEvent: z.ZodObject<{
     type: z.ZodEnum<["CLICK", "CHANGE", "SUBMIT", "MOUSEOVER", "MOUSEOUT", "FOCUS", "BLUR"]>;
     nodeId: z.ZodString;
-    timestamp: z.ZodOptional<z.ZodNumber>;
-    payload: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodAny>>;
+    timestamp: z.ZodNullable<z.ZodNumber>;
+    payload: z.ZodNullable<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
 }, "strip", z.ZodTypeAny, {
     type: "CLICK" | "CHANGE" | "SUBMIT" | "MOUSEOVER" | "MOUSEOUT" | "FOCUS" | "BLUR";
     nodeId: string;
-    timestamp?: number | undefined;
-    payload?: Record<string, any> | undefined;
+    timestamp: number | null;
+    payload: Record<string, unknown> | null;
 }, {
     type: "CLICK" | "CHANGE" | "SUBMIT" | "MOUSEOVER" | "MOUSEOUT" | "FOCUS" | "BLUR";
     nodeId: string;
-    timestamp?: number | undefined;
-    payload?: Record<string, any> | undefined;
+    timestamp: number | null;
+    payload: Record<string, unknown> | null;
 }>;
 type UIEvent = z.infer<typeof uiEvent>;
-/**
- * Core UI specification node
- * Represents a single element in the UI tree
- */
-declare const uiSpecNode: z.ZodType<UISpecNode>;
-type UISpecNode = {
+interface UISpecNodeInterface {
     id: string;
-    type: string;
-    props?: Record<string, any> | undefined;
-    bindings?: Record<string, any> | undefined;
-    events?: Record<string, {
+    node_type: string;
+    props: Record<string, any> | null;
+    bindings: Record<string, any> | null;
+    events: Record<string, {
         action: string;
-        target?: string | undefined;
-        payload?: Record<string, any> | undefined;
-    }> | undefined;
-    children?: UISpecNode[] | undefined;
-};
+        target: string;
+        payload: Record<string, any> | null;
+    }> | null;
+    children: UISpecNodeInterface[] | null;
+}
+declare const uiSpecNode: z.ZodType<UISpecNodeInterface>;
+type UISpecNode = z.infer<typeof uiSpecNode>;
 /**
  * Application state for the UI engine
  */
 declare const uiState: z.ZodObject<{
-    layout: z.ZodOptional<z.ZodType<UISpecNode, z.ZodTypeDef, UISpecNode>>;
+    layout: z.ZodNullable<z.ZodType<UISpecNodeInterface, z.ZodTypeDef, UISpecNodeInterface>>;
     loading: z.ZodBoolean;
     history: z.ZodArray<z.ZodObject<{
         type: z.ZodEnum<["CLICK", "CHANGE", "SUBMIT", "MOUSEOVER", "MOUSEOUT", "FOCUS", "BLUR"]>;
         nodeId: z.ZodString;
-        timestamp: z.ZodOptional<z.ZodNumber>;
-        payload: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodAny>>;
+        timestamp: z.ZodNullable<z.ZodNumber>;
+        payload: z.ZodNullable<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
     }, "strip", z.ZodTypeAny, {
         type: "CLICK" | "CHANGE" | "SUBMIT" | "MOUSEOVER" | "MOUSEOUT" | "FOCUS" | "BLUR";
         nodeId: string;
-        timestamp?: number | undefined;
-        payload?: Record<string, any> | undefined;
+        timestamp: number | null;
+        payload: Record<string, unknown> | null;
     }, {
         type: "CLICK" | "CHANGE" | "SUBMIT" | "MOUSEOVER" | "MOUSEOUT" | "FOCUS" | "BLUR";
         nodeId: string;
-        timestamp?: number | undefined;
-        payload?: Record<string, any> | undefined;
+        timestamp: number | null;
+        payload: Record<string, unknown> | null;
     }>, "many">;
-    error: z.ZodOptional<z.ZodString>;
+    error: z.ZodNullable<z.ZodString>;
 }, "strip", z.ZodTypeAny, {
+    layout: UISpecNodeInterface | null;
     loading: boolean;
     history: {
         type: "CLICK" | "CHANGE" | "SUBMIT" | "MOUSEOVER" | "MOUSEOUT" | "FOCUS" | "BLUR";
         nodeId: string;
-        timestamp?: number | undefined;
-        payload?: Record<string, any> | undefined;
+        timestamp: number | null;
+        payload: Record<string, unknown> | null;
     }[];
-    layout?: UISpecNode | undefined;
-    error?: string | undefined;
+    error: string | null;
 }, {
+    layout: UISpecNodeInterface | null;
     loading: boolean;
     history: {
         type: "CLICK" | "CHANGE" | "SUBMIT" | "MOUSEOVER" | "MOUSEOUT" | "FOCUS" | "BLUR";
         nodeId: string;
-        timestamp?: number | undefined;
-        payload?: Record<string, any> | undefined;
+        timestamp: number | null;
+        payload: Record<string, unknown> | null;
     }[];
-    layout?: UISpecNode | undefined;
-    error?: string | undefined;
+    error: string | null;
 }>;
 type UIState = z.infer<typeof uiState>;
 /**
@@ -94,43 +91,43 @@ type UIState = z.infer<typeof uiState>;
 declare const plannerInput: z.ZodObject<{
     schema: z.ZodRecord<z.ZodString, z.ZodUnknown>;
     goal: z.ZodString;
-    history: z.ZodOptional<z.ZodArray<z.ZodObject<{
+    history: z.ZodNullable<z.ZodArray<z.ZodObject<{
         type: z.ZodEnum<["CLICK", "CHANGE", "SUBMIT", "MOUSEOVER", "MOUSEOUT", "FOCUS", "BLUR"]>;
         nodeId: z.ZodString;
-        timestamp: z.ZodOptional<z.ZodNumber>;
-        payload: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodAny>>;
+        timestamp: z.ZodNullable<z.ZodNumber>;
+        payload: z.ZodNullable<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
     }, "strip", z.ZodTypeAny, {
         type: "CLICK" | "CHANGE" | "SUBMIT" | "MOUSEOVER" | "MOUSEOUT" | "FOCUS" | "BLUR";
         nodeId: string;
-        timestamp?: number | undefined;
-        payload?: Record<string, any> | undefined;
+        timestamp: number | null;
+        payload: Record<string, unknown> | null;
     }, {
         type: "CLICK" | "CHANGE" | "SUBMIT" | "MOUSEOVER" | "MOUSEOUT" | "FOCUS" | "BLUR";
         nodeId: string;
-        timestamp?: number | undefined;
-        payload?: Record<string, any> | undefined;
+        timestamp: number | null;
+        payload: Record<string, unknown> | null;
     }>, "many">>;
-    userContext: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+    userContext: z.ZodOptional<z.ZodNullable<z.ZodRecord<z.ZodString, z.ZodUnknown>>>;
 }, "strip", z.ZodTypeAny, {
-    schema: Record<string, unknown>;
-    goal: string;
-    history?: {
+    history: {
         type: "CLICK" | "CHANGE" | "SUBMIT" | "MOUSEOVER" | "MOUSEOUT" | "FOCUS" | "BLUR";
         nodeId: string;
-        timestamp?: number | undefined;
-        payload?: Record<string, any> | undefined;
-    }[] | undefined;
-    userContext?: Record<string, unknown> | undefined;
-}, {
+        timestamp: number | null;
+        payload: Record<string, unknown> | null;
+    }[] | null;
     schema: Record<string, unknown>;
     goal: string;
-    history?: {
+    userContext?: Record<string, unknown> | null | undefined;
+}, {
+    history: {
         type: "CLICK" | "CHANGE" | "SUBMIT" | "MOUSEOVER" | "MOUSEOUT" | "FOCUS" | "BLUR";
         nodeId: string;
-        timestamp?: number | undefined;
-        payload?: Record<string, any> | undefined;
-    }[] | undefined;
-    userContext?: Record<string, unknown> | undefined;
+        timestamp: number | null;
+        payload: Record<string, unknown> | null;
+    }[] | null;
+    schema: Record<string, unknown>;
+    goal: string;
+    userContext?: Record<string, unknown> | null | undefined;
 }>;
 type PlannerInput = z.infer<typeof plannerInput>;
 
@@ -190,7 +187,7 @@ declare class ActionRouter {
      * @param dataContext - Current data context
      * @returns Route resolution or null if no match
      */
-    resolveRoute(event: UIEvent, schema: Record<string, unknown>, layout: UISpecNode | undefined, dataContext: DataContext, goal: string, userContext?: Record<string, unknown>): RouteResolution | null;
+    resolveRoute(event: UIEvent, schema: Record<string, unknown>, layout: UISpecNode | null, dataContext: DataContext, goal: string, userContext?: Record<string, unknown>): RouteResolution | null;
     /**
      * Process a prompt template with variables
      * @param template - Template string with ${var} placeholders
@@ -229,7 +226,7 @@ type EventHook = (context: EventHookContext) => void | Promise<void>;
  * });
  * ```
  */
-declare function createEventHook(eventTypes: UIEventType[] | 'all', hook: EventHook, options?: EventHookOptions): EventHook;
+declare function createEventHook(eventTypes: UIEventType[] | "all", hook: EventHook, options?: EventHookOptions): EventHook;
 
 /**
  * System event types that represent the internal AutoUI lifecycle
@@ -370,7 +367,7 @@ declare const systemEvents: SystemEventManager;
  */
 declare function createSystemEvent<T extends SystemEventType>(type: T, data: Omit<Extract<AnySystemEvent, {
     type: T;
-}>, 'type' | 'timestamp'>): Extract<AnySystemEvent, {
+}>, "type" | "timestamp">): Extract<AnySystemEvent, {
     type: T;
 }>;
 
@@ -453,10 +450,10 @@ interface SchemaAdapter {
  * Schema adapter options union type
  */
 type SchemaAdapterOptions = {
-    type: 'drizzle';
+    type: "drizzle";
     options: DrizzleAdapterOptions$1;
 } | {
-    type: 'custom';
+    type: "custom";
     adapter: SchemaAdapter;
 };
 /**
@@ -469,14 +466,14 @@ interface DrizzleAdapterOptions {
 }
 interface AutoUIProps {
     schema: Record<string, unknown> | {
-        type: 'drizzle';
+        type: "drizzle";
         options: DrizzleAdapterOptions;
     } | {
-        type: 'custom';
+        type: "custom";
         adapter: SchemaAdapter;
     };
     goal: string;
-    componentAdapter?: 'shadcn';
+    componentAdapter?: "shadcn";
     userContext?: Record<string, unknown>;
     onEvent?: (evt: UIEvent) => void;
     eventHooks?: {
@@ -494,13 +491,13 @@ interface AutoUIProps {
         enableFormNavigation?: boolean;
     };
     integration?: {
-        mode?: 'standalone' | 'component';
+        mode?: "standalone" | "component";
         className?: string;
         style?: React.CSSProperties;
         id?: string;
     };
     scope?: {
-        type?: 'form' | 'list' | 'detail' | 'dashboard' | 'full-page' | 'card';
+        type?: "form" | "list" | "detail" | "dashboard" | "full-page" | "card";
         focus?: string;
     };
     debugMode?: boolean;
@@ -533,14 +530,39 @@ interface AutoUIProps {
 declare const AutoUI: React.FC<AutoUIProps>;
 
 /**
- * Example function to generate text using the AI SDK
- *
- * Note: You need to set OPENAI_API_KEY environment variable
- * or use another supported provider
+ * AI Utilities for AutoUI React
+ * Provides AI-powered UI generation functionality
  */
-declare function generateComponent(schema: any): Promise<string>;
+/**
+ * Generates a component using AI
+ */
+declare const generateComponent: (prompt: string) => Promise<string>;
+/**
+ * Generates a UI description using AI
+ */
+declare const generateUIDescription: (prompt: string) => Promise<string>;
+/**
+ * Generates a UI component using AI
+ */
+declare const generateUIComponent: (prompt: string) => Promise<string>;
 
-declare function generateUIDescription(schema: any): Promise<string>;
-declare function generateUIComponent(schema: any): Promise<string>;
+interface UsePlannerOptions {
+    goal: string;
+    schema: Record<string, unknown>;
+    userContext?: Record<string, unknown>;
+    router?: ActionRouter;
+    modelProvider?: unknown;
+}
+interface UsePlannerResult {
+    layout: UISpecNode | undefined;
+    loading: boolean;
+    error: Error | null;
+    handleEvent: (event: UIEvent) => Promise<void>;
+    generateInitialLayout: () => Promise<void>;
+}
+/**
+ * React hook for utilizing the AI planner functionality
+ */
+declare function usePlanner(options: UsePlannerOptions): UsePlannerResult;
 
-export { ActionRouteConfig, ActionRouter, ActionType, AnySystemEvent, AutoUI, AutoUIProps, DrizzleAdapter, DrizzleAdapterOptions$1 as DrizzleAdapterOptions, EventHook, EventHookContext, EventHookOptions, PlannerInput, SchemaAdapter, SchemaAdapterOptions, SystemEventHook, SystemEventType, UIEvent, UIEventType, UISpecNode, UIState, createDefaultRouter, createEventHook, createSchemaAdapter, createSystemEvent, generateComponent, generateUIComponent, generateUIDescription, systemEvents, uiEvent, uiEventType, uiSpecNode };
+export { ActionRouteConfig, ActionRouter, ActionType, AnySystemEvent, AutoUI, AutoUIProps, DrizzleAdapter, DrizzleAdapterOptions$1 as DrizzleAdapterOptions, EventHook, EventHookContext, EventHookOptions, PlannerInput, SchemaAdapter, SchemaAdapterOptions, SystemEventHook, SystemEventType, UIEvent, UIEventType, UISpecNode, UIState, createDefaultRouter, createEventHook, createSchemaAdapter, createSystemEvent, generateComponent, generateUIComponent, generateUIDescription, systemEvents, uiEvent, uiEventType, uiSpecNode, usePlanner };