a2ui-react 0.2.1 → 0.4.0

package/dist/index.js

@@ -16,8 +16,11 @@ var SelectPrimitive = require('@radix-ui/react-select');
 var RechartsPrimitive = require('recharts');
 var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
 var SeparatorPrimitive = require('@radix-ui/react-separator');
+var ReactMarkdown = require('react-markdown');
 var SliderPrimitive = require('@radix-ui/react-slider');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   var n = Object.create(null);
@@ -45,6 +48,7 @@ var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive)
 var RechartsPrimitive__namespace = /*#__PURE__*/_interopNamespace(RechartsPrimitive);
 var ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespace(ScrollAreaPrimitive);
 var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);
+var ReactMarkdown__default = /*#__PURE__*/_interopDefault(ReactMarkdown);
 var SliderPrimitive__namespace = /*#__PURE__*/_interopNamespace(SliderPrimitive);
 
 // ../core/dist/index.mjs
@@ -168,6 +172,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);
@@ -200,6 +230,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");
@@ -207,19 +248,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) {
@@ -283,15 +317,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) {
@@ -622,15 +648,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}`);
@@ -638,7 +658,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 });
@@ -1080,10 +1101,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}",
@@ -1099,6 +1120,7 @@ var AlertRenderer = {
       "div",
       {
         id,
+        "data-a2ui-component": "Alert",
         role: "alert",
         className: cn("relative rounded-lg border p-4", variantStyles[variant]),
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3", children: [
@@ -1114,7 +1136,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" } },
       {
@@ -1610,7 +1632,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__ */ jsxRuntime.jsxs("div", { className: "w-full space-y-1", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-a2ui-component": "Progress", className: "w-full space-y-1", children: [
       component.label && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between text-sm", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: component.label }),
         !isIndeterminate && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
@@ -1646,7 +1668,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" } },
       {
@@ -6054,7 +6076,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) {
@@ -7020,6 +7042,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__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" });
+        case "error":
+          return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" });
+        default:
+          return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Circle, { className: "h-2 w-2 fill-current" });
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "flex items-center",
+                      orientation === "horizontal" ? "flex-col" : "flex-row"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          className: cn(
+                            "flex h-8 w-8 items-center justify-center rounded-full border-2 transition-colors",
+                            statusStyles[status]
+                          ),
+                          children: /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { status })
+                        }
+                      ),
+                      !isLast && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "text-center",
+                      orientation === "horizontal" ? "mt-2" : "ml-4"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          className: cn(
+                            "text-sm font-medium",
+                            status === "current" ? "text-foreground" : "text-muted-foreground"
+                          ),
+                          children: step.label
+                        }
+                      ),
+                      step.description && /* @__PURE__ */ jsxRuntime.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 }) => {
@@ -7538,11 +7709,273 @@ var ImageRenderer = {
     ]
   }
 };
+var MarkdownRenderer = {
+  type: "Markdown",
+  render: ({ component, data }) => {
+    const content = component.dataPath ? data.get(component.dataPath) ?? component.text : component.text;
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ReactMarkdown__default.default, { 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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        id,
+        "data-a2ui-component": "Spinner",
+        role: "status",
+        "aria-label": component.label || "Loading",
+        className: "inline-flex items-center justify-center",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.Loader2,
+            {
+              className: cn("animate-spin text-muted-foreground", sizeClasses[size]),
+              "aria-hidden": "true"
+            }
+          ),
+          component.label && /* @__PURE__ */ jsxRuntime.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" },
@@ -7586,7 +8019,7 @@ var TextRenderer = {
               component: {
                 type: "Text",
                 id: "h1",
-                content: "Heading 1 - Large Title",
+                text: "Heading 1 - Large Title",
                 style: "h1"
               }
             },
@@ -7595,7 +8028,7 @@ var TextRenderer = {
               component: {
                 type: "Text",
                 id: "h2",
-                content: "Heading 2 - Section Title",
+                text: "Heading 2 - Section Title",
                 style: "h2"
               }
             },
@@ -7604,7 +8037,7 @@ var TextRenderer = {
               component: {
                 type: "Text",
                 id: "h3",
-                content: "Heading 3 - Subsection",
+                text: "Heading 3 - Subsection",
                 style: "h3"
               }
             },
@@ -7613,7 +8046,7 @@ var TextRenderer = {
               component: {
                 type: "Text",
                 id: "h4",
-                content: "Heading 4 - Component Title",
+                text: "Heading 4 - Component Title",
                 style: "h4"
               }
             },
@@ -7622,7 +8055,7 @@ var TextRenderer = {
               component: {
                 type: "Text",
                 id: "h5",
-                content: "Heading 5 - Small Title",
+                text: "Heading 5 - Small Title",
                 style: "h5"
               }
             },
@@ -7631,7 +8064,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"
               }
             },
@@ -7640,7 +8073,7 @@ var TextRenderer = {
               component: {
                 type: "Text",
                 id: "caption",
-                content: "Caption text - muted and small",
+                text: "Caption text - muted and small",
                 style: "caption"
               }
             }
@@ -7650,6 +8083,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: lucideReact.CheckCircle,
+  error: lucideReact.XCircle,
+  warning: lucideReact.AlertCircle,
+  info: lucideReact.Info
+};
+var ToastRenderer = {
+  type: "Toast",
+  render: ({ component, id, onAction }) => {
+    const variant = component.variant || "default";
+    const Icon2 = variantIcons2[variant];
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon2, { className: "h-5 w-5 flex-shrink-0 mt-0.5", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-1", children: [
+            component.title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-foreground", children: component.title }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: component.message }),
+            component.actionLabel && component.action && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.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 }) => {
@@ -8930,6 +9479,12 @@ var shadcnRenderers = [
   ColumnRenderer,
   // Display
   TextRenderer,
+  MarkdownRenderer,
+  SpinnerRenderer,
+  SkeletonRenderer,
+  ToastRenderer,
+  AlertRenderer,
+  ProgressRenderer,
   ImageRenderer,
   IconRenderer,
   DividerRenderer,
@@ -8948,6 +9503,7 @@ var shadcnRenderers = [
   CardRenderer,
   ModalRenderer,
   TabsRenderer,
+  StepperRenderer,
   ListRenderer,
   // Charts
   PieChartRenderer,
@@ -9103,11 +9659,13 @@ exports.AnimatedTooltipRenderer = AnimatedTooltipRenderer;
 exports.AreaChartRenderer = AreaChartRenderer;
 exports.ArticleRenderer = ArticleRenderer;
 exports.AsideRenderer = AsideRenderer;
+exports.AudioPlayerRenderer = AudioPlayerRenderer;
 exports.AuroraBackgroundRenderer = AuroraBackgroundRenderer;
 exports.BarChartRenderer = BarChartRenderer;
 exports.BlurRevealTextRenderer = BlurRevealTextRenderer;
 exports.BubbleBackgroundRenderer = BubbleBackgroundRenderer;
 exports.Button = Button;
+exports.CardRenderer = CardRenderer;
 exports.Checkbox = Checkbox;
 exports.ComponentRenderer = ComponentRenderer;
 exports.CopyButtonRenderer = CopyButtonRenderer;
@@ -9124,6 +9682,7 @@ exports.DialogOverlay = DialogOverlay;
 exports.DialogPortal = DialogPortal;
 exports.DialogTitle = DialogTitle;
 exports.DialogTrigger = DialogTrigger;
+exports.DividerRenderer = DividerRenderer;
 exports.FireworksBackgroundRenderer = FireworksBackgroundRenderer;
 exports.FlipButtonRenderer = FlipButtonRenderer;
 exports.FlipCardRenderer = FlipCardRenderer;
@@ -9136,14 +9695,19 @@ exports.HeaderRenderer = HeaderRenderer;
 exports.HexagonBackgroundRenderer = HexagonBackgroundRenderer;
 exports.HoleBackgroundRenderer = HoleBackgroundRenderer;
 exports.IconButtonRenderer = IconButtonRenderer;
+exports.IconRenderer = IconRenderer;
+exports.ImageRenderer = ImageRenderer;
 exports.Input = Input;
 exports.Label = Label;
 exports.LineChartRenderer = LineChartRenderer;
 exports.LiquidButtonRenderer = LiquidButtonRenderer;
+exports.ListRenderer = ListRenderer;
 exports.LiveRegionRenderer = LiveRegionRenderer;
 exports.MagneticButtonRenderer = MagneticButtonRenderer;
 exports.MainRenderer = MainRenderer;
+exports.MarkdownRenderer = MarkdownRenderer;
 exports.MessageParseError = MessageParseError;
+exports.ModalRenderer = ModalRenderer;
 exports.MorphingIconRenderer = MorphingIconRenderer;
 exports.NavRenderer = NavRenderer;
 exports.ParticlesBackgroundRenderer = ParticlesBackgroundRenderer;
@@ -9152,17 +9716,24 @@ exports.ProgressRenderer = ProgressRenderer;
 exports.RippleButtonRenderer = RippleButtonRenderer;
 exports.SectionRenderer = SectionRenderer;
 exports.ShimmerButtonRenderer = ShimmerButtonRenderer;
+exports.SkeletonRenderer = SkeletonRenderer;
 exports.SkipLinkRenderer = SkipLinkRenderer;
+exports.SpinnerRenderer = SpinnerRenderer;
 exports.SpotlightRenderer = SpotlightRenderer;
 exports.StarsBackgroundRenderer = StarsBackgroundRenderer;
+exports.StepperRenderer = StepperRenderer;
 exports.Tabs = Tabs;
 exports.TabsContent = TabsContent;
 exports.TabsList = TabsList;
+exports.TabsRenderer = TabsRenderer;
 exports.TabsTrigger = TabsTrigger;
+exports.TextRenderer = TextRenderer;
 exports.TextScrambleRenderer = TextScrambleRenderer;
 exports.Textarea = Textarea;
 exports.ThemeTogglerButtonRenderer = ThemeTogglerButtonRenderer;
+exports.ToastRenderer = ToastRenderer;
 exports.TypewriterTextRenderer = TypewriterTextRenderer;
+exports.VideoRenderer = VideoRenderer;
 exports.a11yRenderers = a11yRenderers;
 exports.allAnimatedRenderers = allAnimatedRenderers;
 exports.allRenderers = allRenderers;