a2ui-react 0.2.1 → 0.4.0

package/dist/index.mjs

@@ -6,7 +6,7 @@ import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { X, ChevronDown, ChevronUp, Check, Copy, Trash, Edit, Minus, Plus, Menu, Search, Settings, Download, ThumbsUp, Bookmark, Share, Star, Heart, HelpCircle, Moon, Sun, Bell, Phone, Mail, User, Home, ChevronRight, ChevronLeft, Flame, Zap, Square, Pause, Play, Cloud, icons } from 'lucide-react';
+import { X, ChevronDown, ChevronUp, Check, Copy, Trash, Edit, Minus, Plus, Menu, Search, Settings, Download, ThumbsUp, Bookmark, Share, Star, Heart, HelpCircle, Moon, Sun, Bell, Phone, Mail, User, Home, ChevronRight, ChevronLeft, Flame, Zap, Square, Pause, Play, Cloud, icons, Loader2, Info, AlertCircle, XCircle, CheckCircle, Circle } from 'lucide-react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
@@ -16,6 +16,7 @@ import * as RechartsPrimitive from 'recharts';
 import { AreaChart, CartesianGrid, XAxis, YAxis, Area, BarChart, Bar, Cell, LineChart, Line, PieChart, Pie } from 'recharts';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import ReactMarkdown from 'react-markdown';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 
 // ../core/dist/index.mjs
@@ -139,6 +140,32 @@ var c = {
     ...props
   })
 };
+function isV09Format(update) {
+  return typeof update.component === "string";
+}
+function normalizeComponentUpdate(update) {
+  if (isV09Format(update)) {
+    const { id, component: type, ...rest } = update;
+    return { id, type, ...rest };
+  }
+  const component = update.component;
+  if (!component.id) {
+    component.id = update.id;
+  }
+  if (component.type === "Text") {
+    const textComponent = component;
+    if (textComponent.content && !textComponent.text) {
+      textComponent.text = textComponent.content;
+    }
+  }
+  return component;
+}
+function getTextContent(component) {
+  return component.text ?? component.content ?? "";
+}
+function getComponentsArray(msg) {
+  return msg.components ?? msg.updates ?? [];
+}
 var MessageParseError = class extends Error {
   constructor(message) {
     super(message);
@@ -171,6 +198,17 @@ function validateBeginRendering(msg) {
     throw new MessageParseError("beginRendering.style must be an object if provided");
   }
 }
+function validateComponentUpdate(update, context) {
+  if (!isObject(update)) {
+    throw new MessageParseError(`${context}[] must be objects`);
+  }
+  if (!isNonEmptyString(update.id)) {
+    throw new MessageParseError(`${context}[].id must be a non-empty string`);
+  }
+  if (typeof update.component !== "string" && !isObject(update.component)) {
+    throw new MessageParseError(`${context}[].component must be a string (v0.9) or object (legacy)`);
+  }
+}
 function validateSurfaceUpdate(msg) {
   if (!isObject(msg)) {
     throw new MessageParseError("surfaceUpdate must be an object");
@@ -178,19 +216,12 @@ function validateSurfaceUpdate(msg) {
   if (!isNonEmptyString(msg.surfaceId)) {
     throw new MessageParseError("surfaceUpdate.surfaceId must be a non-empty string");
   }
-  if (!isArray(msg.updates)) {
-    throw new MessageParseError("surfaceUpdate.updates must be an array");
+  const components = msg.updates ?? msg.components;
+  if (!isArray(components)) {
+    throw new MessageParseError("surfaceUpdate.updates (or .components) must be an array");
   }
-  for (const update of msg.updates) {
-    if (!isObject(update)) {
-      throw new MessageParseError("surfaceUpdate.updates[] must be objects");
-    }
-    if (!isNonEmptyString(update.id)) {
-      throw new MessageParseError("surfaceUpdate.updates[].id must be a non-empty string");
-    }
-    if (!isObject(update.component)) {
-      throw new MessageParseError("surfaceUpdate.updates[].component must be an object");
-    }
+  for (const update of components) {
+    validateComponentUpdate(update, "surfaceUpdate.updates");
   }
 }
 function validateDataModelUpdate(msg) {
@@ -254,15 +285,7 @@ function validateUpdateComponents(msg) {
     throw new MessageParseError("updateComponents.components must be an array");
   }
   for (const component of msg.components) {
-    if (!isObject(component)) {
-      throw new MessageParseError("updateComponents.components[] must be objects");
-    }
-    if (!isNonEmptyString(component.id)) {
-      throw new MessageParseError("updateComponents.components[].id must be a non-empty string");
-    }
-    if (!isObject(component.component)) {
-      throw new MessageParseError("updateComponents.components[].component must be an object");
-    }
+    validateComponentUpdate(component, "updateComponents.components");
   }
 }
 function validateUpdateDataModel(msg) {
@@ -593,15 +616,9 @@ function processMessage(message, store) {
       data: {}
     });
   } else if (isUpdateComponentsMessage(message) || isSurfaceUpdateMessage(message)) {
-    let surfaceId;
-    let componentUpdates;
-    if (isUpdateComponentsMessage(message)) {
-      surfaceId = message.updateComponents.surfaceId;
-      componentUpdates = message.updateComponents.components;
-    } else {
-      surfaceId = message.surfaceUpdate.surfaceId;
-      componentUpdates = message.surfaceUpdate.updates;
-    }
+    const payload = isUpdateComponentsMessage(message) ? message.updateComponents : message.surfaceUpdate;
+    const surfaceId = payload.surfaceId;
+    const componentUpdates = getComponentsArray(payload);
     const surface = store.getSurface(surfaceId);
     if (!surface) {
       console.warn(`Surface not found for update: ${surfaceId}`);
@@ -609,7 +626,8 @@ function processMessage(message, store) {
     }
     const updatedComponents = { ...surface.components };
     for (const update of componentUpdates) {
-      updatedComponents[update.id] = update.component;
+      const component = normalizeComponentUpdate(update);
+      updatedComponents[update.id] = component;
     }
     surface.components = updatedComponents;
     store.setSurface(surfaceId, { ...surface });
@@ -1051,10 +1069,10 @@ function useReducedMotion() {
   return prefersReducedMotion;
 }
 var variantStyles = {
-  info: "bg-blue-50 border-blue-200 text-blue-900 dark:bg-blue-950 dark:border-blue-800 dark:text-blue-100",
-  warning: "bg-yellow-50 border-yellow-200 text-yellow-900 dark:bg-yellow-950 dark:border-yellow-800 dark:text-yellow-100",
-  error: "bg-red-50 border-red-200 text-red-900 dark:bg-red-950 dark:border-red-800 dark:text-red-100",
-  success: "bg-green-50 border-green-200 text-green-900 dark:bg-green-950 dark:border-green-800 dark:text-green-100"
+  info: "bg-info border-info-border text-info-foreground",
+  warning: "bg-warning border-warning-border text-warning-foreground",
+  error: "bg-error border-error-border text-error-foreground",
+  success: "bg-success border-success-border text-success-foreground"
 };
 var variantIcons = {
   info: "\u{1F4A1}",
@@ -1070,6 +1088,7 @@ var AlertRenderer = {
       "div",
       {
         id,
+        "data-a2ui-component": "Alert",
         role: "alert",
         className: cn("relative rounded-lg border p-4", variantStyles[variant]),
         children: /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
@@ -1085,7 +1104,7 @@ var AlertRenderer = {
   example: {
     name: "Alert",
     description: "Accessible alert component with screen reader announcement",
-    category: "a11y",
+    category: "display",
     messages: [
       { createSurface: { surfaceId: "alert-example", root: "col-1" } },
       {
@@ -1581,7 +1600,7 @@ var ProgressRenderer = {
     const value = component.value;
     const isIndeterminate = value === void 0;
     const percentage = isIndeterminate ? 0 : Math.min(100, Math.max(0, value / max * 100));
-    return /* @__PURE__ */ jsxs("div", { className: "w-full space-y-1", children: [
+    return /* @__PURE__ */ jsxs("div", { "data-a2ui-component": "Progress", className: "w-full space-y-1", children: [
       component.label && /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm", children: [
         /* @__PURE__ */ jsx("span", { children: component.label }),
         !isIndeterminate && /* @__PURE__ */ jsxs("span", { children: [
@@ -1617,7 +1636,7 @@ var ProgressRenderer = {
   example: {
     name: "Progress",
     description: "Accessible progress indicator with determinate and indeterminate states",
-    category: "a11y",
+    category: "display",
     messages: [
       { createSurface: { surfaceId: "progress-example", root: "col-1" } },
       {
@@ -6025,7 +6044,7 @@ var AnimatedTextOverride = {
   type: "Text",
   render: ({ component, data }) => {
     const className = styleClasses6[component.style || "body"] || styleClasses6.body;
-    let content = component.content;
+    let content = getTextContent(component);
     if (component.dataPath) {
       const value = data.get(component.dataPath);
       if (value !== void 0) {
@@ -6991,6 +7010,155 @@ var ModalRenderer = {
     ]
   }
 };
+var StepperRenderer = {
+  type: "Stepper",
+  render: ({ component, id }) => {
+    const orientation = component.orientation || "horizontal";
+    const activeStep = component.activeStep ?? 0;
+    const getStepStatus = (index, step) => {
+      if (step.status) return step.status;
+      if (index < activeStep) return "completed";
+      if (index === activeStep) return "current";
+      return "pending";
+    };
+    const statusStyles = {
+      pending: "border-muted-foreground/30 bg-background text-muted-foreground",
+      current: "border-primary bg-primary text-primary-foreground",
+      completed: "border-primary bg-primary text-primary-foreground",
+      error: "border-destructive bg-destructive text-destructive-foreground"
+    };
+    const StatusIcon = ({ status }) => {
+      switch (status) {
+        case "completed":
+          return /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" });
+        case "error":
+          return /* @__PURE__ */ jsx(X, { className: "h-4 w-4" });
+        default:
+          return /* @__PURE__ */ jsx(Circle, { className: "h-2 w-2 fill-current" });
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        id,
+        "data-a2ui-component": "Stepper",
+        className: cn(
+          "flex",
+          orientation === "horizontal" ? "flex-row items-start" : "flex-col"
+        ),
+        role: "list",
+        "aria-label": "Progress steps",
+        children: component.steps.map((step, index) => {
+          const status = getStepStatus(index, step);
+          const isLast = index === component.steps.length - 1;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex",
+                orientation === "horizontal" ? "flex-1 flex-col items-center" : "flex-row items-start"
+              ),
+              role: "listitem",
+              "aria-current": status === "current" ? "step" : void 0,
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "flex items-center",
+                      orientation === "horizontal" ? "flex-col" : "flex-row"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: cn(
+                            "flex h-8 w-8 items-center justify-center rounded-full border-2 transition-colors",
+                            statusStyles[status]
+                          ),
+                          children: /* @__PURE__ */ jsx(StatusIcon, { status })
+                        }
+                      ),
+                      !isLast && /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: cn(
+                            "transition-colors",
+                            orientation === "horizontal" ? "mt-4 h-0.5 w-full min-w-[40px]" : "ml-4 h-full min-h-[40px] w-0.5",
+                            index < activeStep ? "bg-primary" : "bg-muted-foreground/30"
+                          )
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "text-center",
+                      orientation === "horizontal" ? "mt-2" : "ml-4"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: cn(
+                            "text-sm font-medium",
+                            status === "current" ? "text-foreground" : "text-muted-foreground"
+                          ),
+                          children: step.label
+                        }
+                      ),
+                      step.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground mt-0.5", children: step.description })
+                    ]
+                  }
+                )
+              ]
+            },
+            step.id
+          );
+        })
+      }
+    );
+  },
+  example: {
+    name: "Stepper",
+    description: "Step-by-step progress indicator for wizards and multi-step forms",
+    category: "container",
+    messages: [
+      { createSurface: { surfaceId: "stepper-demo", root: "root" } },
+      {
+        updateComponents: {
+          surfaceId: "stepper-demo",
+          components: [
+            {
+              id: "root",
+              component: {
+                type: "Column",
+                id: "root",
+                children: ["stepper"]
+              }
+            },
+            {
+              id: "stepper",
+              component: {
+                type: "Stepper",
+                id: "stepper",
+                activeStep: 1,
+                steps: [
+                  { id: "step1", label: "Account", description: "Create your account" },
+                  { id: "step2", label: "Profile", description: "Set up your profile" },
+                  { id: "step3", label: "Review", description: "Review and submit" }
+                ]
+              }
+            }
+          ]
+        }
+      }
+    ]
+  }
+};
 var TabsRenderer = {
   type: "Tabs",
   render: ({ component, children }) => {
@@ -7509,11 +7677,273 @@ var ImageRenderer = {
     ]
   }
 };
+var MarkdownRenderer = {
+  type: "Markdown",
+  render: ({ component, data }) => {
+    const content = component.dataPath ? data.get(component.dataPath) ?? component.text : component.text;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-a2ui-component": "Markdown",
+        className: cn(
+          "prose prose-sm dark:prose-invert max-w-none",
+          // Headings
+          "prose-headings:font-semibold prose-headings:tracking-tight",
+          "prose-h1:text-3xl prose-h2:text-2xl prose-h3:text-xl",
+          // Links
+          "prose-a:text-primary prose-a:no-underline hover:prose-a:underline",
+          // Code
+          "prose-code:bg-muted prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:text-sm",
+          "prose-pre:bg-muted prose-pre:border prose-pre:border-border",
+          // Lists
+          "prose-ul:my-2 prose-ol:my-2 prose-li:my-0",
+          // Blockquotes
+          "prose-blockquote:border-l-primary prose-blockquote:text-muted-foreground"
+        ),
+        children: /* @__PURE__ */ jsx(ReactMarkdown, { children: content || "" })
+      }
+    );
+  },
+  example: {
+    name: "Markdown",
+    description: "Renders markdown content with full formatting support",
+    category: "display",
+    messages: [
+      { createSurface: { surfaceId: "markdown-demo", root: "root" } },
+      {
+        updateComponents: {
+          surfaceId: "markdown-demo",
+          components: [
+            {
+              id: "root",
+              component: {
+                type: "Column",
+                id: "root",
+                children: ["md"]
+              }
+            },
+            {
+              id: "md",
+              component: {
+                type: "Markdown",
+                id: "md",
+                text: `# Markdown Demo
+
+This is a **bold** and *italic* text example.
+
+## Features
+
+- Headings (h1-h6)
+- **Bold** and *italic* text
+- [Links](https://example.com)
+- Lists (ordered and unordered)
+
+### Code
+
+Inline \`code\` and code blocks:
+
+\`\`\`javascript
+const hello = "world";
+\`\`\`
+
+> Blockquotes are also supported!
+`
+              }
+            }
+          ]
+        }
+      }
+    ]
+  }
+};
+var SkeletonRenderer = {
+  type: "Skeleton",
+  render: ({ component, id }) => {
+    const variant = component.variant || "rectangular";
+    const variantClasses = {
+      text: "rounded",
+      circular: "rounded-full",
+      rectangular: "rounded-md"
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        id,
+        "data-a2ui-component": "Skeleton",
+        role: "status",
+        "aria-label": "Loading content",
+        className: cn(
+          "animate-pulse bg-muted",
+          variantClasses[variant]
+        ),
+        style: {
+          width: component.width || "100%",
+          height: component.height || (variant === "text" ? "1rem" : "100px")
+        },
+        children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading..." })
+      }
+    );
+  },
+  example: {
+    name: "Skeleton",
+    description: "Content placeholder while loading",
+    category: "display",
+    messages: [
+      { createSurface: { surfaceId: "skeleton-demo", root: "root" } },
+      {
+        updateComponents: {
+          surfaceId: "skeleton-demo",
+          components: [
+            {
+              id: "root",
+              component: {
+                type: "Column",
+                id: "root",
+                children: ["card-skeleton"]
+              }
+            },
+            {
+              id: "card-skeleton",
+              component: {
+                type: "Row",
+                id: "card-skeleton",
+                children: ["avatar", "content"],
+                alignment: "start"
+              }
+            },
+            {
+              id: "avatar",
+              component: {
+                type: "Skeleton",
+                id: "avatar",
+                variant: "circular",
+                width: "48px",
+                height: "48px"
+              }
+            },
+            {
+              id: "content",
+              component: {
+                type: "Column",
+                id: "content",
+                children: ["line1", "line2"]
+              }
+            },
+            {
+              id: "line1",
+              component: {
+                type: "Skeleton",
+                id: "line1",
+                variant: "text",
+                width: "200px",
+                height: "1rem"
+              }
+            },
+            {
+              id: "line2",
+              component: {
+                type: "Skeleton",
+                id: "line2",
+                variant: "text",
+                width: "150px",
+                height: "1rem"
+              }
+            }
+          ]
+        }
+      }
+    ]
+  }
+};
+var sizeClasses = {
+  sm: "h-4 w-4",
+  md: "h-6 w-6",
+  lg: "h-10 w-10"
+};
+var SpinnerRenderer = {
+  type: "Spinner",
+  render: ({ component, id }) => {
+    const size = component.size || "md";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        id,
+        "data-a2ui-component": "Spinner",
+        role: "status",
+        "aria-label": component.label || "Loading",
+        className: "inline-flex items-center justify-center",
+        children: [
+          /* @__PURE__ */ jsx(
+            Loader2,
+            {
+              className: cn("animate-spin text-muted-foreground", sizeClasses[size]),
+              "aria-hidden": "true"
+            }
+          ),
+          component.label && /* @__PURE__ */ jsx("span", { className: "sr-only", children: component.label })
+        ]
+      }
+    );
+  },
+  example: {
+    name: "Spinner",
+    description: "Loading indicator with different sizes",
+    category: "display",
+    messages: [
+      { createSurface: { surfaceId: "spinner-demo", root: "root" } },
+      {
+        updateComponents: {
+          surfaceId: "spinner-demo",
+          components: [
+            {
+              id: "root",
+              component: {
+                type: "Row",
+                id: "root",
+                children: ["spinner-sm", "spinner-md", "spinner-lg"],
+                distribution: "spaceAround",
+                alignment: "center"
+              }
+            },
+            {
+              id: "spinner-sm",
+              component: {
+                type: "Spinner",
+                id: "spinner-sm",
+                size: "sm",
+                label: "Loading small"
+              }
+            },
+            {
+              id: "spinner-md",
+              component: {
+                type: "Spinner",
+                id: "spinner-md",
+                size: "md",
+                label: "Loading medium"
+              }
+            },
+            {
+              id: "spinner-lg",
+              component: {
+                type: "Spinner",
+                id: "spinner-lg",
+                size: "lg",
+                label: "Loading large"
+              }
+            }
+          ]
+        }
+      }
+    ]
+  }
+};
 var TextRenderer = {
   type: "Text",
   render: ({ component, data }) => {
-    const { content, style = "body", dataPath } = component;
-    const displayContent = dataPath ? data.get(dataPath) ?? content : content;
+    const { style = "body", dataPath } = component;
+    const textContent = getTextContent(component);
+    const displayContent = dataPath ? data.get(dataPath) ?? textContent : textContent;
     const styleMap = {
       h1: { tag: "h1", className: "text-4xl font-bold" },
       h2: { tag: "h2", className: "text-3xl font-semibold" },
@@ -7557,7 +7987,7 @@ var TextRenderer = {
               component: {
                 type: "Text",
                 id: "h1",
-                content: "Heading 1 - Large Title",
+                text: "Heading 1 - Large Title",
                 style: "h1"
               }
             },
@@ -7566,7 +7996,7 @@ var TextRenderer = {
               component: {
                 type: "Text",
                 id: "h2",
-                content: "Heading 2 - Section Title",
+                text: "Heading 2 - Section Title",
                 style: "h2"
               }
             },
@@ -7575,7 +8005,7 @@ var TextRenderer = {
               component: {
                 type: "Text",
                 id: "h3",
-                content: "Heading 3 - Subsection",
+                text: "Heading 3 - Subsection",
                 style: "h3"
               }
             },
@@ -7584,7 +8014,7 @@ var TextRenderer = {
               component: {
                 type: "Text",
                 id: "h4",
-                content: "Heading 4 - Component Title",
+                text: "Heading 4 - Component Title",
                 style: "h4"
               }
             },
@@ -7593,7 +8023,7 @@ var TextRenderer = {
               component: {
                 type: "Text",
                 id: "h5",
-                content: "Heading 5 - Small Title",
+                text: "Heading 5 - Small Title",
                 style: "h5"
               }
             },
@@ -7602,7 +8032,7 @@ var TextRenderer = {
               component: {
                 type: "Text",
                 id: "body",
-                content: "Body text paragraph with regular content and default styling.",
+                text: "Body text paragraph with regular content and default styling.",
                 style: "body"
               }
             },
@@ -7611,7 +8041,7 @@ var TextRenderer = {
               component: {
                 type: "Text",
                 id: "caption",
-                content: "Caption text - muted and small",
+                text: "Caption text - muted and small",
                 style: "caption"
               }
             }
@@ -7621,6 +8051,122 @@ var TextRenderer = {
     ]
   }
 };
+var variantStyles2 = {
+  default: "bg-background border-border",
+  success: "bg-success border-success-border text-success-foreground",
+  error: "bg-error border-error-border text-error-foreground",
+  warning: "bg-warning border-warning-border text-warning-foreground",
+  info: "bg-info border-info-border text-info-foreground"
+};
+var variantIcons2 = {
+  default: null,
+  success: CheckCircle,
+  error: XCircle,
+  warning: AlertCircle,
+  info: Info
+};
+var ToastRenderer = {
+  type: "Toast",
+  render: ({ component, id, onAction }) => {
+    const variant = component.variant || "default";
+    const Icon2 = variantIcons2[variant];
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        id,
+        "data-a2ui-component": "Toast",
+        role: "alert",
+        "aria-live": "polite",
+        className: cn(
+          "pointer-events-auto relative flex w-full max-w-sm items-start gap-3 rounded-lg border p-4 shadow-lg",
+          variantStyles2[variant]
+        ),
+        children: [
+          Icon2 && /* @__PURE__ */ jsx(Icon2, { className: "h-5 w-5 flex-shrink-0 mt-0.5", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-1", children: [
+            component.title && /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-foreground", children: component.title }),
+            /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: component.message }),
+            component.actionLabel && component.action && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => onAction?.({ type: component.action, payload: { id: component.id } }),
+                className: "text-sm font-medium text-primary hover:underline mt-2",
+                children: component.actionLabel
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onAction?.({ type: "toast.dismiss", payload: { id: component.id } }),
+              className: "absolute right-2 top-2 rounded-md p-1 text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring",
+              "aria-label": "Dismiss",
+              children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+            }
+          )
+        ]
+      }
+    );
+  },
+  example: {
+    name: "Toast",
+    description: "Notification toast with variants and optional action",
+    category: "display",
+    messages: [
+      { createSurface: { surfaceId: "toast-demo", root: "root" } },
+      {
+        updateComponents: {
+          surfaceId: "toast-demo",
+          components: [
+            {
+              id: "root",
+              component: {
+                type: "Column",
+                id: "root",
+                children: ["toast-success", "toast-error", "toast-info"]
+              }
+            },
+            {
+              id: "toast-success",
+              component: {
+                type: "Toast",
+                id: "toast-success",
+                variant: "success",
+                title: "Success!",
+                message: "Your changes have been saved."
+              }
+            },
+            {
+              id: "toast-error",
+              component: {
+                type: "Toast",
+                id: "toast-error",
+                variant: "error",
+                title: "Error",
+                message: "Something went wrong. Please try again.",
+                actionLabel: "Retry",
+                action: "retry"
+              }
+            },
+            {
+              id: "toast-info",
+              component: {
+                type: "Toast",
+                id: "toast-info",
+                variant: "info",
+                message: "New version available!",
+                actionLabel: "Update",
+                action: "update"
+              }
+            }
+          ]
+        }
+      }
+    ]
+  }
+};
 var VideoRenderer = {
   type: "Video",
   render: ({ component }) => {
@@ -8901,6 +9447,12 @@ var shadcnRenderers = [
   ColumnRenderer,
   // Display
   TextRenderer,
+  MarkdownRenderer,
+  SpinnerRenderer,
+  SkeletonRenderer,
+  ToastRenderer,
+  AlertRenderer,
+  ProgressRenderer,
   ImageRenderer,
   IconRenderer,
   DividerRenderer,
@@ -8919,6 +9471,7 @@ var shadcnRenderers = [
   CardRenderer,
   ModalRenderer,
   TabsRenderer,
+  StepperRenderer,
   ListRenderer,
   // Charts
   PieChartRenderer,
@@ -9054,6 +9607,6 @@ function createCompleteRegistry() {
 // src/index.ts
 var version = "0.1.0";
 
-export { A2UIContext, A2UIProvider, A2UISurface, AlertRenderer, AnimatedAccordionRenderer, AnimatedAvatarGroupRenderer, AnimatedButtonOverride, AnimatedCardOverride, AnimatedCardRenderer, AnimatedCheckboxOverride, AnimatedDialogRenderer, AnimatedModalOverride, AnimatedSelectOverride, AnimatedTabsOverride, AnimatedTabsRenderer, AnimatedTextOverride, AnimatedTooltipRenderer, AreaChartRenderer, ArticleRenderer, AsideRenderer, AuroraBackgroundRenderer, BarChartRenderer, BlurRevealTextRenderer, BubbleBackgroundRenderer, Button, Checkbox, ComponentRenderer, CopyButtonRenderer, CountUpRenderer, CursorRenderer, DEFAULT_CHART_COLORS, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, FireworksBackgroundRenderer, FlipButtonRenderer, FlipCardRenderer, FooterRenderer, GlowButtonRenderer, GradientBackgroundRenderer, GradientTextRenderer, GravityStarsBackgroundRenderer, HeaderRenderer, HexagonBackgroundRenderer, HoleBackgroundRenderer, IconButtonRenderer, Input, Label, LineChartRenderer, LiquidButtonRenderer, LiveRegionRenderer, MagneticButtonRenderer, MainRenderer, MessageParseError, MorphingIconRenderer, NavRenderer, ParticlesBackgroundRenderer, PieChartRenderer, ProgressRenderer, RippleButtonRenderer, SectionRenderer, ShimmerButtonRenderer, SkipLinkRenderer, SpotlightRenderer, StarsBackgroundRenderer, Tabs, TabsContent, TabsList, TabsTrigger, TextScrambleRenderer, Textarea, ThemeTogglerButtonRenderer, TypewriterTextRenderer, a11yRenderers, allAnimatedRenderers, allRenderers, animatedOverrides, animatedRenderers, buildChartConfig, buildMessages, buttonVariants, c, chartRenderers, cn, createAccessibleRegistry, createAnimatedRegistry, createCompleteRegistry, createFullyAnimatedRegistry, createRegistry, createShadcnRegistry, createStore, createStreamParser, getChartColor, getChartData, getDataByPath, isBeginRenderingMessage, isDataModelUpdateMessage, isDeleteSurfaceMessage, isSurfaceUpdateMessage, parseJSONL, parseMessage, setDataByPath, shadcnRenderers, transformToRechartsData, useA2UI, useAction, useContainerDimensions, useDataBinding, useReducedMotion, useSurface, version };
+export { A2UIContext, A2UIProvider, A2UISurface, AlertRenderer, AnimatedAccordionRenderer, AnimatedAvatarGroupRenderer, AnimatedButtonOverride, AnimatedCardOverride, AnimatedCardRenderer, AnimatedCheckboxOverride, AnimatedDialogRenderer, AnimatedModalOverride, AnimatedSelectOverride, AnimatedTabsOverride, AnimatedTabsRenderer, AnimatedTextOverride, AnimatedTooltipRenderer, AreaChartRenderer, ArticleRenderer, AsideRenderer, AudioPlayerRenderer, AuroraBackgroundRenderer, BarChartRenderer, BlurRevealTextRenderer, BubbleBackgroundRenderer, Button, CardRenderer, Checkbox, ComponentRenderer, CopyButtonRenderer, CountUpRenderer, CursorRenderer, DEFAULT_CHART_COLORS, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DividerRenderer, FireworksBackgroundRenderer, FlipButtonRenderer, FlipCardRenderer, FooterRenderer, GlowButtonRenderer, GradientBackgroundRenderer, GradientTextRenderer, GravityStarsBackgroundRenderer, HeaderRenderer, HexagonBackgroundRenderer, HoleBackgroundRenderer, IconButtonRenderer, IconRenderer, ImageRenderer, Input, Label, LineChartRenderer, LiquidButtonRenderer, ListRenderer, LiveRegionRenderer, MagneticButtonRenderer, MainRenderer, MarkdownRenderer, MessageParseError, ModalRenderer, MorphingIconRenderer, NavRenderer, ParticlesBackgroundRenderer, PieChartRenderer, ProgressRenderer, RippleButtonRenderer, SectionRenderer, ShimmerButtonRenderer, SkeletonRenderer, SkipLinkRenderer, SpinnerRenderer, SpotlightRenderer, StarsBackgroundRenderer, StepperRenderer, Tabs, TabsContent, TabsList, TabsRenderer, TabsTrigger, TextRenderer, TextScrambleRenderer, Textarea, ThemeTogglerButtonRenderer, ToastRenderer, TypewriterTextRenderer, VideoRenderer, a11yRenderers, allAnimatedRenderers, allRenderers, animatedOverrides, animatedRenderers, buildChartConfig, buildMessages, buttonVariants, c, chartRenderers, cn, createAccessibleRegistry, createAnimatedRegistry, createCompleteRegistry, createFullyAnimatedRegistry, createRegistry, createShadcnRegistry, createStore, createStreamParser, getChartColor, getChartData, getDataByPath, isBeginRenderingMessage, isDataModelUpdateMessage, isDeleteSurfaceMessage, isSurfaceUpdateMessage, parseJSONL, parseMessage, setDataByPath, shadcnRenderers, transformToRechartsData, useA2UI, useAction, useContainerDimensions, useDataBinding, useReducedMotion, useSurface, version };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map