autoui-react 0.0.4-alpha → 0.1.0

package/README.md

@@ -1,4 +1,4 @@
-# autoui-react
+# @autoui/react
 
 A React + TypeScript runtime that **generates goal-oriented UIs in real-time** using an LLM + your data schema.
 
@@ -27,13 +27,13 @@ This library implements this approach, using LLMs to interpret a goal and schema
 ## Installation
 
 ```bash
-npm install autoui-react
+npm install @autoui/react
 ```
 
 ## Quick Start
 
 ```jsx
-import { AutoUI } from 'autoui-react';
+import { AutoUI } from '@autoui/react';
 import { emailsTable, usersTable } from './schema';
 
 function App() {
@@ -124,7 +124,7 @@ AutoUI supports different ways to provide your data schema:
 #### 2. Using Drizzle Adapter
 
 ```jsx
-import { AutoUI } from 'autoui-react';
+import { AutoUI } from '@autoui/react';
 import { db } from './db';  // Your Drizzle instance
 import { users, posts } from './schema';  // Drizzle schema
 
@@ -177,7 +177,7 @@ function MyApp() {
 AutoUI provides hooks into its internal planning and rendering process through system events. You can subscribe to these events to monitor or extend the functionality.
 
 ```jsx
-import { AutoUI, SystemEventType } from 'autoui-react';
+import { AutoUI, SystemEventType } from '@autoui/react';
 
 function MyApp() {
   return (
@@ -241,50 +241,4 @@ MIT
 
 ## Contributing
 
-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.
+Contributions are welcome! Please feel free to submit a Pull Request.

package/dist/index.css

@@ -53,14 +53,4 @@
 .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}\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":[]}
+{"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":[]}

package/dist/index.d.mts

@@ -12,77 +12,80 @@ 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.ZodNullable<z.ZodNumber>;
-    payload: z.ZodNullable<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+    timestamp: z.ZodOptional<z.ZodNumber>;
+    payload: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodAny>>;
 }, "strip", z.ZodTypeAny, {
     type: "CLICK" | "CHANGE" | "SUBMIT" | "MOUSEOVER" | "MOUSEOUT" | "FOCUS" | "BLUR";
     nodeId: string;
-    timestamp: number | null;
-    payload: Record<string, unknown> | null;
+    timestamp?: number | undefined;
+    payload?: Record<string, any> | undefined;
 }, {
     type: "CLICK" | "CHANGE" | "SUBMIT" | "MOUSEOVER" | "MOUSEOUT" | "FOCUS" | "BLUR";
     nodeId: string;
-    timestamp: number | null;
-    payload: Record<string, unknown> | null;
+    timestamp?: number | undefined;
+    payload?: Record<string, any> | undefined;
 }>;
 type UIEvent = z.infer<typeof uiEvent>;
-interface UISpecNodeInterface {
+/**
+ * Core UI specification node
+ * Represents a single element in the UI tree
+ */
+declare const uiSpecNode: z.ZodType<UISpecNode>;
+type UISpecNode = {
     id: string;
-    node_type: string;
-    props: Record<string, any> | null;
-    bindings: Record<string, any> | null;
-    events: Record<string, {
+    type: string;
+    props?: Record<string, any> | undefined;
+    bindings?: Record<string, any> | undefined;
+    events?: Record<string, {
         action: string;
-        target: string;
-        payload: Record<string, any> | null;
-    }> | null;
-    children: UISpecNodeInterface[] | null;
-}
-declare const uiSpecNode: z.ZodType<UISpecNodeInterface>;
-type UISpecNode = z.infer<typeof uiSpecNode>;
+        target?: string | undefined;
+        payload?: Record<string, any> | undefined;
+    }> | undefined;
+    children?: UISpecNode[] | undefined;
+};
 /**
  * Application state for the UI engine
  */
 declare const uiState: z.ZodObject<{
-    layout: z.ZodNullable<z.ZodType<UISpecNodeInterface, z.ZodTypeDef, UISpecNodeInterface>>;
+    layout: z.ZodOptional<z.ZodType<UISpecNode, z.ZodTypeDef, UISpecNode>>;
     loading: z.ZodBoolean;
     history: z.ZodArray<z.ZodObject<{
         type: z.ZodEnum<["CLICK", "CHANGE", "SUBMIT", "MOUSEOVER", "MOUSEOUT", "FOCUS", "BLUR"]>;
         nodeId: z.ZodString;
-        timestamp: z.ZodNullable<z.ZodNumber>;
-        payload: z.ZodNullable<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+        timestamp: z.ZodOptional<z.ZodNumber>;
+        payload: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodAny>>;
     }, "strip", z.ZodTypeAny, {
         type: "CLICK" | "CHANGE" | "SUBMIT" | "MOUSEOVER" | "MOUSEOUT" | "FOCUS" | "BLUR";
         nodeId: string;
-        timestamp: number | null;
-        payload: Record<string, unknown> | null;
+        timestamp?: number | undefined;
+        payload?: Record<string, any> | undefined;
     }, {
         type: "CLICK" | "CHANGE" | "SUBMIT" | "MOUSEOVER" | "MOUSEOUT" | "FOCUS" | "BLUR";
         nodeId: string;
-        timestamp: number | null;
-        payload: Record<string, unknown> | null;
+        timestamp?: number | undefined;
+        payload?: Record<string, any> | undefined;
     }>, "many">;
-    error: z.ZodNullable<z.ZodString>;
+    error: z.ZodOptional<z.ZodString>;
 }, "strip", z.ZodTypeAny, {
-    layout: UISpecNodeInterface | null;
     loading: boolean;
     history: {
         type: "CLICK" | "CHANGE" | "SUBMIT" | "MOUSEOVER" | "MOUSEOUT" | "FOCUS" | "BLUR";
         nodeId: string;
-        timestamp: number | null;
-        payload: Record<string, unknown> | null;
+        timestamp?: number | undefined;
+        payload?: Record<string, any> | undefined;
     }[];
-    error: string | null;
+    layout?: UISpecNode | undefined;
+    error?: string | undefined;
 }, {
-    layout: UISpecNodeInterface | null;
     loading: boolean;
     history: {
         type: "CLICK" | "CHANGE" | "SUBMIT" | "MOUSEOVER" | "MOUSEOUT" | "FOCUS" | "BLUR";
         nodeId: string;
-        timestamp: number | null;
-        payload: Record<string, unknown> | null;
+        timestamp?: number | undefined;
+        payload?: Record<string, any> | undefined;
     }[];
-    error: string | null;
+    layout?: UISpecNode | undefined;
+    error?: string | undefined;
 }>;
 type UIState = z.infer<typeof uiState>;
 /**
@@ -91,43 +94,43 @@ type UIState = z.infer<typeof uiState>;
 declare const plannerInput: z.ZodObject<{
     schema: z.ZodRecord<z.ZodString, z.ZodUnknown>;
     goal: z.ZodString;
-    history: z.ZodNullable<z.ZodArray<z.ZodObject<{
+    history: z.ZodOptional<z.ZodArray<z.ZodObject<{
         type: z.ZodEnum<["CLICK", "CHANGE", "SUBMIT", "MOUSEOVER", "MOUSEOUT", "FOCUS", "BLUR"]>;
         nodeId: z.ZodString;
-        timestamp: z.ZodNullable<z.ZodNumber>;
-        payload: z.ZodNullable<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+        timestamp: z.ZodOptional<z.ZodNumber>;
+        payload: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodAny>>;
     }, "strip", z.ZodTypeAny, {
         type: "CLICK" | "CHANGE" | "SUBMIT" | "MOUSEOVER" | "MOUSEOUT" | "FOCUS" | "BLUR";
         nodeId: string;
-        timestamp: number | null;
-        payload: Record<string, unknown> | null;
+        timestamp?: number | undefined;
+        payload?: Record<string, any> | undefined;
     }, {
         type: "CLICK" | "CHANGE" | "SUBMIT" | "MOUSEOVER" | "MOUSEOUT" | "FOCUS" | "BLUR";
         nodeId: string;
-        timestamp: number | null;
-        payload: Record<string, unknown> | null;
+        timestamp?: number | undefined;
+        payload?: Record<string, any> | undefined;
     }>, "many">>;
-    userContext: z.ZodOptional<z.ZodNullable<z.ZodRecord<z.ZodString, z.ZodUnknown>>>;
+    userContext: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
 }, "strip", z.ZodTypeAny, {
-    history: {
-        type: "CLICK" | "CHANGE" | "SUBMIT" | "MOUSEOVER" | "MOUSEOUT" | "FOCUS" | "BLUR";
-        nodeId: string;
-        timestamp: number | null;
-        payload: Record<string, unknown> | null;
-    }[] | null;
     schema: Record<string, unknown>;
     goal: string;
-    userContext?: Record<string, unknown> | null | undefined;
-}, {
-    history: {
+    history?: {
         type: "CLICK" | "CHANGE" | "SUBMIT" | "MOUSEOVER" | "MOUSEOUT" | "FOCUS" | "BLUR";
         nodeId: string;
-        timestamp: number | null;
-        payload: Record<string, unknown> | null;
-    }[] | null;
+        timestamp?: number | undefined;
+        payload?: Record<string, any> | undefined;
+    }[] | undefined;
+    userContext?: Record<string, unknown> | undefined;
+}, {
     schema: Record<string, unknown>;
     goal: string;
-    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;
 }>;
 type PlannerInput = z.infer<typeof plannerInput>;
 
@@ -187,7 +190,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 | null, dataContext: DataContext, goal: string, userContext?: Record<string, unknown>): RouteResolution | null;
+    resolveRoute(event: UIEvent, schema: Record<string, unknown>, layout: UISpecNode | undefined, dataContext: DataContext, goal: string, userContext?: Record<string, unknown>): RouteResolution | null;
     /**
      * Process a prompt template with variables
      * @param template - Template string with ${var} placeholders
@@ -226,7 +229,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
@@ -367,7 +370,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;
 }>;
 
@@ -450,10 +453,10 @@ interface SchemaAdapter {
  * Schema adapter options union type
  */
 type SchemaAdapterOptions = {
-    type: "drizzle";
+    type: 'drizzle';
     options: DrizzleAdapterOptions$1;
 } | {
-    type: "custom";
+    type: 'custom';
     adapter: SchemaAdapter;
 };
 /**
@@ -466,14 +469,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?: {
@@ -491,13 +494,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;
@@ -514,7 +517,7 @@ interface AutoUIProps {
  *
  * @example
  * ```tsx
- * import { AutoUI } from 'autoui-react';
+ * import { AutoUI } from '@autoui/react';
  * import { emailsTable, usersTable } from './schema';
  *
  * function MyApp() {
@@ -529,40 +532,4 @@ interface AutoUIProps {
  */
 declare const AutoUI: React.FC<AutoUIProps>;
 
-/**
- * AI Utilities for AutoUI React
- * Provides AI-powered UI generation functionality
- */
-/**
- * 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>;
-
-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, usePlanner };
+export { type ActionRouteConfig, ActionRouter, ActionType, type AnySystemEvent, AutoUI, type AutoUIProps, DrizzleAdapter, type DrizzleAdapterOptions$1 as DrizzleAdapterOptions, type EventHook, type EventHookContext, type EventHookOptions, type PlannerInput, type SchemaAdapter, type SchemaAdapterOptions, type SystemEventHook, SystemEventType, type UIEvent, type UIEventType, type UISpecNode, type UIState, createDefaultRouter, createEventHook, createSchemaAdapter, createSystemEvent, systemEvents, uiEvent, uiEventType, uiSpecNode };