@elabs-ai/components-ai 4.2.0 → 5.1.0

package/dist/chunk-FERYDFZA.js

@@ -0,0 +1,108 @@
+"use client";
+import {
+  getStatusBadge
+} from "./chunk-PTWCTSZL.js";
+
+// src/sandbox.tsx
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  Skeleton,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  useLocale
+} from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { ChevronDownIcon, Code } from "lucide-react";
+import { createContext, use, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SandboxContext = createContext({ loading: false });
+var Sandbox = ({ className, loading = false, children, ...props }) => {
+  const contextValue = useMemo(() => ({ loading }), [loading]);
+  return /* @__PURE__ */ jsx(SandboxContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    Collapsible,
+    {
+      className: cn("not-prose group mb-4 w-full overflow-hidden rounded-md border", className),
+      defaultOpen: true,
+      ...props,
+      children
+    }
+  ) });
+};
+var SandboxHeader = ({ className, title, state, ...props }) => /* @__PURE__ */ jsxs(
+  CollapsibleTrigger,
+  {
+    className: cn("flex w-full items-center justify-between gap-4 p-3", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Code, { className: "size-4 text-muted-foreground" }),
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-body", children: title }),
+        getStatusBadge(state)
+      ] }),
+      /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" })
+    ]
+  }
+);
+var SandboxContent = ({ className, children, ...props }) => {
+  const { loading } = use(SandboxContext);
+  const { t } = useLocale();
+  return /* @__PURE__ */ jsx(
+    CollapsibleContent,
+    {
+      className: cn(
+        "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+        className
+      ),
+      ...props,
+      children: loading ? /* @__PURE__ */ jsxs("div", { className: "space-y-2 p-3", role: "status", "aria-live": "polite", children: [
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("loading") }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/3" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-2/3" })
+      ] }) : children
+    }
+  );
+};
+var SandboxTabs = ({ className, ...props }) => /* @__PURE__ */ jsx(Tabs, { className: cn("w-full gap-0", className), ...props });
+var SandboxTabsBar = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("flex w-full items-center border-border border-t border-b", className),
+    ...props
+  }
+);
+var SandboxTabsList = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  TabsList,
+  {
+    className: cn("h-auto rounded-none border-0 bg-transparent p-0", className),
+    ...props
+  }
+);
+var SandboxTabsTrigger = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  TabsTrigger,
+  {
+    className: cn(
+      "rounded-none border-0 border-transparent border-b-2 px-4 py-2 font-medium text-muted-foreground text-body transition-colors data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none",
+      className
+    ),
+    ...props
+  }
+);
+var SandboxTabContent = ({ className, ...props }) => /* @__PURE__ */ jsx(TabsContent, { className: cn("mt-0 text-body", className), ...props });
+
+export {
+  Sandbox,
+  SandboxHeader,
+  SandboxContent,
+  SandboxTabs,
+  SandboxTabsBar,
+  SandboxTabsList,
+  SandboxTabsTrigger,
+  SandboxTabContent
+};
+//# sourceMappingURL=chunk-FERYDFZA.js.map

package/dist/chunk-FERYDFZA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/sandbox.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n  Skeleton,\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n  useLocale,\n} from \"@elabs-ai/components-ui\";\nimport { cn } from \"@elabs-ai/components-ui/lib/cn\";\nimport type { ToolUIPart } from \"ai\";\nimport { ChevronDownIcon, Code } from \"lucide-react\";\nimport type { ComponentProps } from \"react\";\nimport { createContext, use, useMemo } from \"react\";\n\nimport { getStatusBadge } from \"./tool\";\n\n/**\n * Shared loading state (composition-patterns — lifted into the provider),\n * mirroring Artifact: Sandbox is the only place that knows whether the run\n * body has arrived; SandboxContent reads the interface and renders a\n * skeleton, while SandboxHeader (an ordinary child of Sandbox) keeps\n * rendering as passed.\n */\nconst SandboxContext = createContext<{ loading: boolean }>({ loading: false });\n\nexport type SandboxProps = ComponentProps<typeof Collapsible> & {\n  /**\n   * The run output has not arrived yet (loading-states.md loading signal).\n   * SandboxContent renders a layout-shaped skeleton instead of its children;\n   * SandboxHeader keeps rendering as passed.\n   * @default false\n   */\n  loading?: boolean;\n};\n\n/** @deprecated Renamed to `SandboxProps`. */\nexport type SandboxRootProps = SandboxProps;\n\nexport const Sandbox = ({ className, loading = false, children, ...props }: SandboxProps) => {\n  const contextValue = useMemo(() => ({ loading }), [loading]);\n\n  return (\n    <SandboxContext.Provider value={contextValue}>\n      <Collapsible\n        className={cn(\"not-prose group mb-4 w-full overflow-hidden rounded-md border\", className)}\n        defaultOpen\n        {...props}\n      >\n        {children}\n      </Collapsible>\n    </SandboxContext.Provider>\n  );\n};\n\nexport interface SandboxHeaderProps {\n  title?: string;\n  state: ToolUIPart[\"state\"];\n  className?: string;\n}\n\nexport const SandboxHeader = ({ className, title, state, ...props }: SandboxHeaderProps) => (\n  <CollapsibleTrigger\n    className={cn(\"flex w-full items-center justify-between gap-4 p-3\", className)}\n    {...props}\n  >\n    <div className=\"flex items-center gap-2\">\n      <Code className=\"size-4 text-muted-foreground\" />\n      <span className=\"font-medium text-body\">{title}</span>\n      {getStatusBadge(state)}\n    </div>\n    <ChevronDownIcon className=\"size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180\" />\n  </CollapsibleTrigger>\n);\n\nexport type SandboxContentProps = ComponentProps<typeof CollapsibleContent>;\n\nexport const SandboxContent = ({ className, children, ...props }: SandboxContentProps) => {\n  const { loading } = use(SandboxContext);\n  const { t } = useLocale();\n\n  return (\n    <CollapsibleContent\n      className={cn(\n        \"data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in\",\n        className,\n      )}\n      {...props}\n    >\n      {loading ? (\n        <div className=\"space-y-2 p-3\" role=\"status\" aria-live=\"polite\">\n          <span className=\"sr-only\">{t(\"loading\")}</span>\n          <Skeleton className=\"h-4 w-1/3\" />\n          <Skeleton className=\"h-4 w-full\" />\n          <Skeleton className=\"h-4 w-full\" />\n          <Skeleton className=\"h-4 w-2/3\" />\n        </div>\n      ) : (\n        children\n      )}\n    </CollapsibleContent>\n  );\n};\n\nexport type SandboxTabsProps = ComponentProps<typeof Tabs>;\n\nexport const SandboxTabs = ({ className, ...props }: SandboxTabsProps) => (\n  <Tabs className={cn(\"w-full gap-0\", className)} {...props} />\n);\n\nexport type SandboxTabsBarProps = ComponentProps<\"div\">;\n\nexport const SandboxTabsBar = ({ className, ...props }: SandboxTabsBarProps) => (\n  <div\n    className={cn(\"flex w-full items-center border-border border-t border-b\", className)}\n    {...props}\n  />\n);\n\nexport type SandboxTabsListProps = ComponentProps<typeof TabsList>;\n\nexport const SandboxTabsList = ({ className, ...props }: SandboxTabsListProps) => (\n  <TabsList\n    className={cn(\"h-auto rounded-none border-0 bg-transparent p-0\", className)}\n    {...props}\n  />\n);\n\nexport type SandboxTabsTriggerProps = ComponentProps<typeof TabsTrigger>;\n\nexport const SandboxTabsTrigger = ({ className, ...props }: SandboxTabsTriggerProps) => (\n  <TabsTrigger\n    className={cn(\n      \"rounded-none border-0 border-transparent border-b-2 px-4 py-2 font-medium text-muted-foreground text-body transition-colors data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none\",\n      className,\n    )}\n    {...props}\n  />\n);\n\nexport type SandboxTabContentProps = ComponentProps<typeof TabsContent>;\n\nexport const SandboxTabContent = ({ className, ...props }: SandboxTabContentProps) => (\n  <TabsContent className={cn(\"mt-0 text-body\", className)} {...props} />\n);\n"],"mappings":";;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,UAAU;AAEnB,SAAS,iBAAiB,YAAY;AAEtC,SAAS,eAAe,KAAK,eAAe;AA+BtC,cAsBF,YAtBE;AApBN,IAAM,iBAAiB,cAAoC,EAAE,SAAS,MAAM,CAAC;AAetE,IAAM,UAAU,CAAC,EAAE,WAAW,UAAU,OAAO,UAAU,GAAG,MAAM,MAAoB;AAC3F,QAAM,eAAe,QAAQ,OAAO,EAAE,QAAQ,IAAI,CAAC,OAAO,CAAC;AAE3D,SACE,oBAAC,eAAe,UAAf,EAAwB,OAAO,cAC9B;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,iEAAiE,SAAS;AAAA,MACxF,aAAW;AAAA,MACV,GAAG;AAAA,MAEH;AAAA;AAAA,EACH,GACF;AAEJ;AAQO,IAAM,gBAAgB,CAAC,EAAE,WAAW,OAAO,OAAO,GAAG,MAAM,MAChE;AAAA,EAAC;AAAA;AAAA,IACC,WAAW,GAAG,sDAAsD,SAAS;AAAA,IAC5E,GAAG;AAAA,IAEJ;AAAA,2BAAC,SAAI,WAAU,2BACb;AAAA,4BAAC,QAAK,WAAU,gCAA+B;AAAA,QAC/C,oBAAC,UAAK,WAAU,yBAAyB,iBAAM;AAAA,QAC9C,eAAe,KAAK;AAAA,SACvB;AAAA,MACA,oBAAC,mBAAgB,WAAU,wFAAuF;AAAA;AAAA;AACpH;AAKK,IAAM,iBAAiB,CAAC,EAAE,WAAW,UAAU,GAAG,MAAM,MAA2B;AACxF,QAAM,EAAE,QAAQ,IAAI,IAAI,cAAc;AACtC,QAAM,EAAE,EAAE,IAAI,UAAU;AAExB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,oBACC,qBAAC,SAAI,WAAU,iBAAgB,MAAK,UAAS,aAAU,UACrD;AAAA,4BAAC,UAAK,WAAU,WAAW,YAAE,SAAS,GAAE;AAAA,QACxC,oBAAC,YAAS,WAAU,aAAY;AAAA,QAChC,oBAAC,YAAS,WAAU,cAAa;AAAA,QACjC,oBAAC,YAAS,WAAU,cAAa;AAAA,QACjC,oBAAC,YAAS,WAAU,aAAY;AAAA,SAClC,IAEA;AAAA;AAAA,EAEJ;AAEJ;AAIO,IAAM,cAAc,CAAC,EAAE,WAAW,GAAG,MAAM,MAChD,oBAAC,QAAK,WAAW,GAAG,gBAAgB,SAAS,GAAI,GAAG,OAAO;AAKtD,IAAM,iBAAiB,CAAC,EAAE,WAAW,GAAG,MAAM,MACnD;AAAA,EAAC;AAAA;AAAA,IACC,WAAW,GAAG,4DAA4D,SAAS;AAAA,IAClF,GAAG;AAAA;AACN;AAKK,IAAM,kBAAkB,CAAC,EAAE,WAAW,GAAG,MAAM,MACpD;AAAA,EAAC;AAAA;AAAA,IACC,WAAW,GAAG,mDAAmD,SAAS;AAAA,IACzE,GAAG;AAAA;AACN;AAKK,IAAM,qBAAqB,CAAC,EAAE,WAAW,GAAG,MAAM,MACvD;AAAA,EAAC;AAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN;AAKK,IAAM,oBAAoB,CAAC,EAAE,WAAW,GAAG,MAAM,MACtD,oBAAC,eAAY,WAAW,GAAG,kBAAkB,SAAS,GAAI,GAAG,OAAO;","names":[]}

package/dist/chunk-FUIYG2DS.js

@@ -0,0 +1,166 @@
+"use client";
+import {
+  Shimmer
+} from "./chunk-3YPT3V7L.js";
+
+// src/plan.tsx
+import { Button } from "@elabs-ai/components-ui";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from "@elabs-ai/components-ui";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@elabs-ai/components-ui";
+import { StatusBadge } from "@elabs-ai/components-ui";
+import { useLocale } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { CheckCircle2, ChevronsUpDownIcon, Clock, PencilLine } from "lucide-react";
+import { createContext, useContext, useId, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PlanContext = createContext(null);
+var usePlan = () => {
+  const context = useContext(PlanContext);
+  if (!context) {
+    throw new Error("Plan components must be used within Plan");
+  }
+  return context;
+};
+var Plan = ({
+  className,
+  isStreaming = false,
+  status,
+  role,
+  children,
+  ...props
+}) => {
+  const titleId = useId();
+  const hasStatus = status !== void 0;
+  const resolvedIsStreaming = hasStatus ? status === "streaming" : isStreaming;
+  const isPending = status === "awaiting";
+  const isSettled = status === "approved" || status === "changes-requested";
+  const resolvedRole = hasStatus ? isPending ? "group" : isSettled ? "alert" : void 0 : void 0;
+  const railClass = !hasStatus ? void 0 : status === "approved" ? "border-s-4 border-s-success" : status === "changes-requested" ? "border-s-4 border-s-warning" : isPending ? "border-s-4 border-s-border-strong" : void 0;
+  const contextValue = useMemo(
+    () => ({
+      isStreaming: resolvedIsStreaming,
+      status: hasStatus ? status : void 0,
+      titleId: hasStatus ? titleId : void 0
+    }),
+    [resolvedIsStreaming, hasStatus, status, titleId]
+  );
+  return /* @__PURE__ */ jsx(PlanContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(Collapsible, { asChild: true, "data-slot": "plan", ...props, children: /* @__PURE__ */ jsx(
+    Card,
+    {
+      role: role ?? resolvedRole,
+      "aria-labelledby": isPending ? titleId : void 0,
+      className: cn("shadow-none", railClass, className),
+      children
+    }
+  ) }) });
+};
+var PlanHeader = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  CardHeader,
+  {
+    className: cn("flex items-start justify-between", className),
+    "data-slot": "plan-header",
+    ...props
+  }
+);
+var PlanTitle = ({ id, children, ...props }) => {
+  const { isStreaming, titleId } = usePlan();
+  return /* @__PURE__ */ jsx(CardTitle, { id: id ?? titleId, "data-slot": "plan-title", ...props, children: isStreaming ? /* @__PURE__ */ jsx(Shimmer, { children }) : children });
+};
+var PlanDescription = ({ className, children, ...props }) => {
+  const { isStreaming } = usePlan();
+  return /* @__PURE__ */ jsx(
+    CardDescription,
+    {
+      className: cn("text-balance", className),
+      "data-slot": "plan-description",
+      ...props,
+      children: isStreaming ? /* @__PURE__ */ jsx(Shimmer, { children }) : children
+    }
+  );
+};
+var PlanAction = (props) => /* @__PURE__ */ jsx(CardAction, { "data-slot": "plan-action", ...props });
+var PlanContent = ({ className, ...props }) => /* @__PURE__ */ jsx(CollapsibleContent, { asChild: true, children: /* @__PURE__ */ jsx(
+  CardContent,
+  {
+    className: cn(
+      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:slide-in-from-top-2 data-[state=closed]:slide-out-to-top-2 data-[state=closed]:fade-out-0 data-[state=open]:[--tw-ease:var(--ease-entrance)] data-[state=closed]:[--tw-ease:var(--ease-exit)] outline-none",
+      className
+    ),
+    "data-slot": "plan-content",
+    ...props
+  }
+) });
+var PlanFooter = (props) => /* @__PURE__ */ jsx(CardFooter, { "data-slot": "plan-footer", ...props });
+var PlanTrigger = ({ className, ...props }) => {
+  const { t } = useLocale();
+  return /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+    Button,
+    {
+      className: cn("size-8", className),
+      "data-slot": "plan-trigger",
+      size: "icon",
+      variant: "ghost",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ChevronsUpDownIcon, { className: "size-4" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("ai.plan.togglePlan") })
+      ]
+    }
+  ) });
+};
+var PLAN_STATUS_CONTENT = {
+  awaiting: { label: "Waiting on plan approval", tone: "warning", icon: Clock },
+  approved: { label: "Approved", tone: "success", icon: CheckCircle2 },
+  "changes-requested": { label: "Changes requested", tone: "warning", icon: PencilLine }
+};
+var PlanStatusLine = ({ className, children, ...props }) => {
+  const { status } = usePlan();
+  if (!status || status === "streaming") {
+    return null;
+  }
+  const { label, tone, icon } = PLAN_STATUS_CONTENT[status];
+  return /* @__PURE__ */ jsx(
+    StatusBadge,
+    {
+      "data-slot": "plan-status-line",
+      className: cn("self-start", className),
+      status: { label, tone, icon },
+      ...props,
+      children
+    }
+  );
+};
+var PlanDecisionAction = ({ className, ...props }) => {
+  const { status } = usePlan();
+  if (status !== "awaiting") {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Button, { className: cn("h-8 px-3 text-body", className), type: "button", ...props });
+};
+var PlanApprove = (props) => /* @__PURE__ */ jsx(PlanDecisionAction, { "data-slot": "plan-approve", variant: "default", ...props });
+var PlanRequestChanges = (props) => /* @__PURE__ */ jsx(PlanDecisionAction, { "data-slot": "plan-request-changes", variant: "outline", ...props });
+var PlanComment = (props) => /* @__PURE__ */ jsx(PlanDecisionAction, { "data-slot": "plan-comment", variant: "ghost", ...props });
+
+export {
+  Plan,
+  PlanHeader,
+  PlanTitle,
+  PlanDescription,
+  PlanAction,
+  PlanContent,
+  PlanFooter,
+  PlanTrigger,
+  PlanStatusLine,
+  PlanApprove,
+  PlanRequestChanges,
+  PlanComment
+};
+//# sourceMappingURL=chunk-FUIYG2DS.js.map

package/dist/chunk-FUIYG2DS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/plan.tsx"],"sourcesContent":["\"use client\";\n\nimport { Button } from \"@elabs-ai/components-ui\";\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@elabs-ai/components-ui\";\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"@elabs-ai/components-ui\";\nimport { StatusBadge, type StatusTone } from \"@elabs-ai/components-ui\";\nimport { useLocale } from \"@elabs-ai/components-ui\";\nimport { cn } from \"@elabs-ai/components-ui/lib/cn\";\nimport { CheckCircle2, ChevronsUpDownIcon, Clock, PencilLine, type LucideIcon } from \"lucide-react\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { createContext, useContext, useId, useMemo } from \"react\";\n\nimport { Shimmer } from \"./shimmer\";\n\n/**\n * The plan's decision status (#108). Additive: a `Plan` rendered with no\n * `status` behaves exactly as before (no ARIA region, no rail, no status\n * line) — every prop below this point is opt-in.\n */\nexport type PlanStatus = \"streaming\" | \"awaiting\" | \"approved\" | \"changes-requested\";\n\ninterface PlanContextValue {\n  isStreaming: boolean;\n  /** `undefined` when the plan is rendered via the legacy `isStreaming`-only API. */\n  status?: PlanStatus;\n  /** Wired to `PlanTitle` so the awaiting region can be labelled by it. */\n  titleId?: string;\n}\n\nconst PlanContext = createContext<PlanContextValue | null>(null);\n\nconst usePlan = () => {\n  const context = useContext(PlanContext);\n  if (!context) {\n    throw new Error(\"Plan components must be used within Plan\");\n  }\n  return context;\n};\n\nexport type PlanProps = ComponentProps<typeof Collapsible> & {\n  isStreaming?: boolean;\n  /**\n   * The plan's decision status. Omit it to keep today's display-only\n   * behaviour. When both `status` and `isStreaming` are given, `status`\n   * wins (a `status=\"approved\"` plan never shimmers, even if `isStreaming`\n   * is still `true`).\n   */\n  status?: PlanStatus;\n};\n\nexport const Plan = ({\n  className,\n  isStreaming = false,\n  status,\n  role,\n  children,\n  ...props\n}: PlanProps) => {\n  const titleId = useId();\n  const hasStatus = status !== undefined;\n  const resolvedIsStreaming = hasStatus ? status === \"streaming\" : isStreaming;\n\n  // A pending decision containing focusable controls is a labelled region,\n  // NOT an assertive live region; a settled outcome is `role=\"alert\"` — the\n  // same convention `Confirmation` already proves (packages/ai/src/confirmation.tsx:100-101).\n  const isPending = status === \"awaiting\";\n  const isSettled = status === \"approved\" || status === \"changes-requested\";\n  const resolvedRole = hasStatus\n    ? isPending\n      ? \"group\"\n      : isSettled\n        ? \"alert\"\n        : undefined\n    : undefined;\n\n  // Quiet structural rail per outcome — the outcome itself is always ALSO\n  // carried in text + glyph via `PlanStatusLine` (WCAG 1.4.1), the rail is a\n  // redundant, hue-independent cue on top of it.\n  const railClass = !hasStatus\n    ? undefined\n    : status === \"approved\"\n      ? \"border-s-4 border-s-success\"\n      : status === \"changes-requested\"\n        ? \"border-s-4 border-s-warning\"\n        : isPending\n          ? \"border-s-4 border-s-border-strong\"\n          : undefined;\n\n  const contextValue = useMemo<PlanContextValue>(\n    () => ({\n      isStreaming: resolvedIsStreaming,\n      status: hasStatus ? status : undefined,\n      titleId: hasStatus ? titleId : undefined,\n    }),\n    [resolvedIsStreaming, hasStatus, status, titleId],\n  );\n\n  return (\n    <PlanContext.Provider value={contextValue}>\n      <Collapsible asChild data-slot=\"plan\" {...props}>\n        <Card\n          role={role ?? resolvedRole}\n          aria-labelledby={isPending ? titleId : undefined}\n          className={cn(\"shadow-none\", railClass, className)}\n        >\n          {children}\n        </Card>\n      </Collapsible>\n    </PlanContext.Provider>\n  );\n};\n\nexport type PlanHeaderProps = ComponentProps<typeof CardHeader>;\n\nexport const PlanHeader = ({ className, ...props }: PlanHeaderProps) => (\n  <CardHeader\n    className={cn(\"flex items-start justify-between\", className)}\n    data-slot=\"plan-header\"\n    {...props}\n  />\n);\n\nexport type PlanTitleProps = Omit<ComponentProps<typeof CardTitle>, \"children\"> & {\n  children: string;\n};\n\nexport const PlanTitle = ({ id, children, ...props }: PlanTitleProps) => {\n  const { isStreaming, titleId } = usePlan();\n\n  return (\n    <CardTitle id={id ?? titleId} data-slot=\"plan-title\" {...props}>\n      {isStreaming ? <Shimmer>{children}</Shimmer> : children}\n    </CardTitle>\n  );\n};\n\nexport type PlanDescriptionProps = Omit<ComponentProps<typeof CardDescription>, \"children\"> & {\n  children: string;\n};\n\nexport const PlanDescription = ({ className, children, ...props }: PlanDescriptionProps) => {\n  const { isStreaming } = usePlan();\n\n  return (\n    <CardDescription\n      className={cn(\"text-balance\", className)}\n      data-slot=\"plan-description\"\n      {...props}\n    >\n      {isStreaming ? <Shimmer>{children}</Shimmer> : children}\n    </CardDescription>\n  );\n};\n\nexport type PlanActionProps = ComponentProps<typeof CardAction>;\n\n/** The header's layout slot (e.g. a menu trigger) — unrelated to the decision actions below. */\nexport const PlanAction = (props: PlanActionProps) => (\n  <CardAction data-slot=\"plan-action\" {...props} />\n);\n\nexport type PlanContentProps = ComponentProps<typeof CardContent>;\n\nexport const PlanContent = ({ className, ...props }: PlanContentProps) => (\n  <CollapsibleContent asChild>\n    <CardContent\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:slide-in-from-top-2 data-[state=closed]:slide-out-to-top-2 data-[state=closed]:fade-out-0 data-[state=open]:[--tw-ease:var(--ease-entrance)] data-[state=closed]:[--tw-ease:var(--ease-exit)] outline-none\",\n        className,\n      )}\n      data-slot=\"plan-content\"\n      {...props}\n    />\n  </CollapsibleContent>\n);\n\nexport type PlanFooterProps = ComponentProps<\"div\">;\n\nexport const PlanFooter = (props: PlanFooterProps) => (\n  <CardFooter data-slot=\"plan-footer\" {...props} />\n);\n\nexport type PlanTriggerProps = ComponentProps<typeof CollapsibleTrigger>;\n\nexport const PlanTrigger = ({ className, ...props }: PlanTriggerProps) => {\n  const { t } = useLocale();\n  return (\n    <CollapsibleTrigger asChild>\n      <Button\n        className={cn(\"size-8\", className)}\n        data-slot=\"plan-trigger\"\n        size=\"icon\"\n        variant=\"ghost\"\n        {...props}\n      >\n        <ChevronsUpDownIcon className=\"size-4\" />\n        <span className=\"sr-only\">{t(\"ai.plan.togglePlan\")}</span>\n      </Button>\n    </CollapsibleTrigger>\n  );\n};\n\ntype PlanOutcomeStatus = Exclude<PlanStatus, \"streaming\">;\n\n/**\n * Default label/tone/glyph per non-streaming status (#108). Every entry is a\n * CALM tone (the `StatusBadge` out-of-vocabulary escape hatch, #363) — the\n * decision is carried in text + glyph, never by rail colour alone (WCAG 1.4.1).\n */\nconst PLAN_STATUS_CONTENT: Record<\n  PlanOutcomeStatus,\n  { label: string; tone: StatusTone; icon: LucideIcon }\n> = {\n  awaiting: { label: \"Waiting on plan approval\", tone: \"warning\", icon: Clock },\n  approved: { label: \"Approved\", tone: \"success\", icon: CheckCircle2 },\n  \"changes-requested\": { label: \"Changes requested\", tone: \"warning\", icon: PencilLine },\n};\n\nexport type PlanStatusLineProps = Omit<ComponentProps<typeof StatusBadge>, \"status\"> & {\n  children?: ReactNode;\n};\n\n/**\n * The decision status line (#108) — text + glyph, never rail colour alone.\n * Renders nothing while `status` is unset or `\"streaming\"` (nothing has been\n * decided yet); shows the outcome once the plan is awaiting a decision or\n * settled.\n */\nexport const PlanStatusLine = ({ className, children, ...props }: PlanStatusLineProps) => {\n  const { status } = usePlan();\n\n  if (!status || status === \"streaming\") {\n    return null;\n  }\n\n  const { label, tone, icon } = PLAN_STATUS_CONTENT[status];\n\n  return (\n    <StatusBadge\n      data-slot=\"plan-status-line\"\n      className={cn(\"self-start\", className)}\n      status={{ label, tone, icon }}\n      {...props}\n    >\n      {children}\n    </StatusBadge>\n  );\n};\n\nexport type PlanDecisionActionProps = ComponentProps<typeof Button>;\n\n/**\n * Shared decision-button primitive. Renders only while `status === \"awaiting\"`\n * — mirrors the gating `ConfirmationActions` uses (packages/ai/src/confirmation.tsx)\n * — so a settled or still-streaming plan never shows stale controls.\n */\nconst PlanDecisionAction = ({ className, ...props }: PlanDecisionActionProps) => {\n  const { status } = usePlan();\n\n  if (status !== \"awaiting\") {\n    return null;\n  }\n\n  return <Button className={cn(\"h-8 px-3 text-body\", className)} type=\"button\" {...props} />;\n};\n\nexport type PlanApproveProps = PlanDecisionActionProps;\n\n/**\n * The proceed action — presets the filled primary variant so the primary path\n * can't drift to a quieter variant (same reasoning as `ConfirmationApprove`).\n */\nexport const PlanApprove = (props: PlanApproveProps) => (\n  <PlanDecisionAction data-slot=\"plan-approve\" variant=\"default\" {...props} />\n);\n\nexport type PlanRequestChangesProps = PlanDecisionActionProps;\n\n/** Sends the plan back for revision — a quieter, non-primary action. */\nexport const PlanRequestChanges = (props: PlanRequestChangesProps) => (\n  <PlanDecisionAction data-slot=\"plan-request-changes\" variant=\"outline\" {...props} />\n);\n\nexport type PlanCommentProps = PlanDecisionActionProps;\n\n/** Leaves feedback without settling the decision — the quietest action. */\nexport const PlanComment = (props: PlanCommentProps) => (\n  <PlanDecisionAction data-slot=\"plan-comment\" variant=\"ghost\" {...props} />\n);\n"],"mappings":"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","names":[]}

package/dist/chunk-GA7M34KU.js

@@ -0,0 +1,236 @@
+"use client";
+import {
+  parseSurfaceJson
+} from "./chunk-SKVG672B.js";
+import {
+  invalidNodePaths,
+  isA2uiElement,
+  validateA2uiSurface
+} from "./chunk-7FD5CZEU.js";
+import {
+  catalogSchema,
+  uiCatalog
+} from "./chunk-L4SU3QJV.js";
+
+// src/a2ui/a2ui-surface.tsx
+import { Skeleton, useLocale } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { AlertCircle } from "lucide-react";
+import { createElement, forwardRef, memo, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var GAP = {
+  none: "gap-0",
+  xs: "gap-1",
+  sm: "gap-2",
+  md: "gap-4",
+  lg: "gap-6"
+};
+var ALIGN = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch"
+};
+var JUSTIFY = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between"
+};
+var COLUMNS = {
+  1: "grid-cols-1",
+  2: "grid-cols-1 sm:grid-cols-2",
+  3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+  4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
+};
+function builtinClass(type, props) {
+  const gap = GAP[String(props.gap ?? "md")] ?? GAP.md;
+  if (type === "Grid") {
+    return cn("grid", COLUMNS[Number(props.columns ?? 2)] ?? COLUMNS[2], gap);
+  }
+  return cn(
+    "flex min-w-0",
+    props.direction === "row" ? "flex-row" : "flex-col",
+    props.wrap ? "flex-wrap" : "",
+    ALIGN[String(props.align ?? "stretch")],
+    JUSTIFY[String(props.justify ?? "start")],
+    gap
+  );
+}
+var isEvent = (v) => typeof v === "object" && v !== null && "nativeEvent" in v && "target" in v;
+function eventValue(args) {
+  const first = args[0];
+  if (isEvent(first)) {
+    const target = first.target;
+    if (target && typeof target.type === "string" && target.type === "checkbox")
+      return target.checked;
+    return target && "value" in target ? target.value : void 0;
+  }
+  return first;
+}
+function renderPropValue(value, path, ctx) {
+  if (Array.isArray(value) && value.some(isA2uiElement)) {
+    return value.map((item, i) => renderNode(item, `${path}[${i}]`, ctx));
+  }
+  if (isA2uiElement(value)) return renderNode(value, path, ctx);
+  return value;
+}
+function renderNode(node, path, ctx) {
+  if (typeof node === "string" || typeof node === "number") return node;
+  if (ctx.invalid.has(path)) return null;
+  const entry = ctx.catalog[node.type];
+  if (!entry) return null;
+  const props = {};
+  for (const [name, value] of Object.entries(node.props ?? {})) {
+    const schema = entry.schema.props[name];
+    props[name] = schema?.type === "node" ? renderPropValue(value, `${path}.props.${name}`, ctx) : value;
+  }
+  for (const [event, action] of Object.entries(node.on ?? {})) {
+    const handlerName = entry.schema.events[event];
+    if (!handlerName) continue;
+    props[handlerName] = (...args) => {
+      const value = event === "click" ? void 0 : eventValue(args);
+      ctx.onAction?.(action, { event, value, node, path });
+    };
+  }
+  const children = entry.schema.children ? (node.children ?? []).map((child, i) => renderNode(child, `${path}.children[${i}]`, ctx)) : void 0;
+  const key = path;
+  const dataAttrs = {
+    "data-a2ui-type": node.type,
+    ...node.id ? { "data-a2ui-id": node.id } : {}
+  };
+  if (entry.schema.builtin) {
+    return createElement(
+      "div",
+      { key, className: builtinClass(node.type, props), ...dataAttrs },
+      ...children ?? []
+    );
+  }
+  return createElement(
+    entry.component,
+    { key, ...props, ...dataAttrs },
+    ...children ?? []
+  );
+}
+var SurfaceTree = memo(function SurfaceTree2({
+  spec,
+  catalog,
+  invalid,
+  onAction
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: renderNode(spec.root, "root", { catalog, invalid, onAction }) });
+});
+var A2uiSurface = forwardRef(function A2uiSurface2({
+  surface,
+  catalog = uiCatalog,
+  onAction,
+  isStreaming = false,
+  loading = false,
+  onError,
+  skeleton,
+  className,
+  ...props
+}, ref) {
+  const { t } = useLocale();
+  const schema = useMemo(() => catalogSchema(catalog), [catalog]);
+  const parsed = useMemo(() => {
+    if (loading || surface == null) return { value: null, incomplete: false };
+    if (typeof surface !== "string") return { value: surface, incomplete: false };
+    const complete = parseSurfaceJson(surface, false);
+    if (complete !== null) return { value: complete, incomplete: false };
+    const partial = parseSurfaceJson(surface, true);
+    return { value: partial, incomplete: surface.trim() !== "" };
+  }, [surface, loading]);
+  const validation = useMemo(
+    () => parsed.value === null ? null : validateA2uiSurface(parsed.value, schema),
+    [parsed.value, schema]
+  );
+  const pending = loading || isStreaming || parsed.incomplete;
+  const empty = surface == null || typeof surface === "string" && surface.trim() === "";
+  const invalid = useMemo(
+    () => validation && !validation.ok && pending ? invalidNodePaths(validation.errors) : /* @__PURE__ */ new Set(),
+    [validation, pending]
+  );
+  const drawable = validation?.spec && (validation.ok || pending && !invalid.has("root")) ? validation.spec : null;
+  const lastGoodRef = useRef(null);
+  if (drawable) lastGoodRef.current = drawable;
+  const shown = drawable ?? (pending ? lastGoodRef.current : null);
+  const [hasRendered, setHasRendered] = useState(false);
+  useEffect(() => {
+    if (shown && !hasRendered) setHasRendered(true);
+  }, [shown, hasRendered]);
+  const status = loading ? "pending" : empty ? hasRendered ? "ready" : "idle" : pending ? "pending" : validation && !validation.ok ? "error" : "ready";
+  const reportedRef = useRef(null);
+  useEffect(() => {
+    if (status !== "error" || !validation || validation.ok) return;
+    const key = JSON.stringify(validation.errors);
+    if (reportedRef.current === key) return;
+    reportedRef.current = key;
+    onError?.(validation.errors);
+  }, [status, validation, onError]);
+  const showSkeleton = status === "pending" && !shown;
+  const title = shown?.title;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-slot": "a2ui-surface",
+      "data-status": status,
+      className: cn("relative min-w-0", className),
+      ...title ? { role: "group", "aria-label": title } : {},
+      ...props,
+      children: [
+        showSkeleton ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-slot": "a2ui-surface-skeleton",
+            role: "status",
+            "aria-live": "polite",
+            className: "space-y-2",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("ai.a2ui.loading") }),
+              skeleton ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-1/3" }),
+                /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-2", children: [
+                  /* @__PURE__ */ jsx(Skeleton, { className: "h-16" }),
+                  /* @__PURE__ */ jsx(Skeleton, { className: "h-16" }),
+                  /* @__PURE__ */ jsx(Skeleton, { className: "h-16" })
+                ] }),
+                /* @__PURE__ */ jsx(Skeleton, { className: "h-24 w-full" })
+              ] })
+            ]
+          }
+        ) : null,
+        shown ? /* @__PURE__ */ jsx(SurfaceTree, { spec: shown, catalog, invalid, onAction }) : null,
+        status === "error" && validation && !validation.ok ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-slot": "a2ui-surface-error",
+            role: "alert",
+            className: "flex gap-2 rounded-md bg-destructive/10 p-3 text-body text-destructive-text",
+            children: [
+              /* @__PURE__ */ jsx(AlertCircle, { className: "mt-0.5 size-4 shrink-0", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
+                /* @__PURE__ */ jsx("p", { className: "font-medium", children: t("ai.a2ui.invalid") }),
+                /* @__PURE__ */ jsxs("ul", { className: "space-y-0.5 text-caption", children: [
+                  validation.errors.slice(0, 8).map((e) => /* @__PURE__ */ jsxs("li", { className: "break-words", children: [
+                    /* @__PURE__ */ jsx("code", { className: "text-code", children: e.path || "root" }),
+                    " \u2014 ",
+                    e.message
+                  ] }, `${e.path}:${e.code}`)),
+                  validation.errors.length > 8 ? /* @__PURE__ */ jsx("li", { children: t("ai.a2ui.moreErrors", { count: validation.errors.length - 8 }) }) : null
+                ] })
+              ] })
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+});
+A2uiSurface.displayName = "A2uiSurface";
+
+export {
+  A2uiSurface
+};
+//# sourceMappingURL=chunk-GA7M34KU.js.map

package/dist/chunk-GA7M34KU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/a2ui/a2ui-surface.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * A2uiSurface — render an agent-DESIGNED screen from data (D2's safe generative\n * path). The agent emits an `A2uiSurfaceSpec` (JSON: a tree of catalog nodes);\n * this component validates it against the catalog and draws it with the real\n * components — never `eval`, never arbitrary tags, never agent styling.\n *\n * Readiness follows the house model (loading-states): `loading` → skeleton;\n * `isStreaming` (or a string surface that is still incomplete JSON) → build up,\n * pruning only the nodes that do not validate YET and suppressing errors; a\n * settled surface that fails validation → `role=\"alert\"` with every problem and\n * `onError`. Interaction is data too: a node's `on.<event>` names a host action\n * that arrives at `onAction` — the app decides what \"approve\" means (D5).\n */\nimport { Skeleton, useLocale } from \"@elabs-ai/components-ui\";\nimport { cn } from \"@elabs-ai/components-ui/lib/cn\";\nimport { AlertCircle } from \"lucide-react\";\nimport type { ComponentProps, ReactNode, SyntheticEvent } from \"react\";\nimport { createElement, forwardRef, memo, useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { completeJson, parseSurfaceJson } from \"./core/complete-json\";\nimport type {\n  A2uiAction,\n  A2uiElement,\n  A2uiError,\n  A2uiNode,\n  A2uiPropValue,\n  A2uiSurfaceSpec,\n} from \"./core/spec\";\nimport { invalidNodePaths, isA2uiElement, validateA2uiSurface } from \"./core/validate\";\nimport { catalogSchema, uiCatalog, type A2uiCatalog } from \"./ui-catalog\";\n\nexport type A2uiSurfaceStatus = \"idle\" | \"pending\" | \"ready\" | \"error\";\n\n/** What `onAction` receives besides the action the agent named. */\nexport interface A2uiActionContext {\n  /** The catalog event that fired (`click`, `change`, …). */\n  event: string;\n  /** The control's value for `change` events (text, checked, selected value…). */\n  value?: unknown;\n  /** The node that carried the binding, and its path in the spec. */\n  node: A2uiElement;\n  path: string;\n}\n\nexport type A2uiActionHandler = (action: A2uiAction, context: A2uiActionContext) => void;\n\nexport type A2uiSurfaceProps = Omit<ComponentProps<\"div\">, \"children\" | \"onError\"> & {\n  /** The agent's surface: a parsed spec, or its JSON text (may be a streaming prefix). */\n  surface: A2uiSurfaceSpec | string | null | undefined;\n  /** Which types render, and how. Defaults to the shipped `uiCatalog`. */\n  catalog?: A2uiCatalog;\n  /** Receives every `on.<event>` binding the user triggers. */\n  onAction?: A2uiActionHandler;\n  /** Content is arriving incrementally — build up, suppress transient errors. */\n  isStreaming?: boolean;\n  /** No surface yet (fetch-then-show) — forces the skeleton. */\n  loading?: boolean;\n  /** Fires once per settled, invalid surface with the validation errors. */\n  onError?: (errors: A2uiError[]) => void;\n  /** Replace the default skeleton (shown before the first paint while pending). */\n  skeleton?: ReactNode;\n};\n\n// ---------------------------------------------------------------------------\n// Builtins — the two layout nodes the surface draws itself, on tokens only.\n// ---------------------------------------------------------------------------\nconst GAP: Record<string, string> = {\n  none: \"gap-0\",\n  xs: \"gap-1\",\n  sm: \"gap-2\",\n  md: \"gap-4\",\n  lg: \"gap-6\",\n};\nconst ALIGN: Record<string, string> = {\n  start: \"items-start\",\n  center: \"items-center\",\n  end: \"items-end\",\n  stretch: \"items-stretch\",\n};\nconst JUSTIFY: Record<string, string> = {\n  start: \"justify-start\",\n  center: \"justify-center\",\n  end: \"justify-end\",\n  between: \"justify-between\",\n};\nconst COLUMNS: Record<number, string> = {\n  1: \"grid-cols-1\",\n  2: \"grid-cols-1 sm:grid-cols-2\",\n  3: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-3\",\n  4: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-4\",\n};\n\nfunction builtinClass(type: string, props: Record<string, unknown>): string {\n  const gap = GAP[String(props.gap ?? \"md\")] ?? GAP.md;\n  if (type === \"Grid\") {\n    return cn(\"grid\", COLUMNS[Number(props.columns ?? 2)] ?? COLUMNS[2], gap);\n  }\n  return cn(\n    \"flex min-w-0\",\n    props.direction === \"row\" ? \"flex-row\" : \"flex-col\",\n    props.wrap ? \"flex-wrap\" : \"\",\n    ALIGN[String(props.align ?? \"stretch\")],\n    JUSTIFY[String(props.justify ?? \"start\")],\n    gap,\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Tree rendering\n// ---------------------------------------------------------------------------\ninterface RenderCtx {\n  catalog: A2uiCatalog;\n  invalid: Set<string>;\n  onAction?: A2uiActionHandler;\n}\n\nconst isEvent = (v: unknown): v is SyntheticEvent =>\n  typeof v === \"object\" && v !== null && \"nativeEvent\" in v && \"target\" in v;\n\n/** The value a `change`-style handler carries: the control's value, or the handler's first arg. */\nfunction eventValue(args: unknown[]): unknown {\n  const first = args[0];\n  if (isEvent(first)) {\n    const target = first.target as HTMLInputElement | null;\n    if (target && typeof target.type === \"string\" && target.type === \"checkbox\")\n      return target.checked;\n    return target && \"value\" in target ? target.value : undefined;\n  }\n  return first;\n}\n\nfunction renderPropValue(value: A2uiPropValue, path: string, ctx: RenderCtx): unknown {\n  if (Array.isArray(value) && value.some(isA2uiElement)) {\n    return value.map((item, i) => renderNode(item as A2uiNode, `${path}[${i}]`, ctx));\n  }\n  if (isA2uiElement(value)) return renderNode(value, path, ctx);\n  return value;\n}\n\nfunction renderNode(node: A2uiNode, path: string, ctx: RenderCtx): ReactNode {\n  if (typeof node === \"string\" || typeof node === \"number\") return node;\n  if (ctx.invalid.has(path)) return null;\n  const entry = ctx.catalog[node.type];\n  if (!entry) return null;\n  const props: Record<string, unknown> = {};\n  for (const [name, value] of Object.entries(node.props ?? {})) {\n    const schema = entry.schema.props[name];\n    props[name] =\n      schema?.type === \"node\" ? renderPropValue(value, `${path}.props.${name}`, ctx) : value;\n  }\n  for (const [event, action] of Object.entries(node.on ?? {})) {\n    const handlerName = entry.schema.events[event];\n    if (!handlerName) continue;\n    props[handlerName] = (...args: unknown[]) => {\n      // A control's value travels only with `change`-style events; a click\n      // carries no value (a button's `target.value` is an empty string).\n      const value = event === \"click\" ? undefined : eventValue(args);\n      ctx.onAction?.(action, { event, value, node, path });\n    };\n  }\n  const children = entry.schema.children\n    ? (node.children ?? []).map((child, i) => renderNode(child, `${path}.children[${i}]`, ctx))\n    : undefined;\n  const key = path;\n  const dataAttrs = {\n    \"data-a2ui-type\": node.type,\n    ...(node.id ? { \"data-a2ui-id\": node.id } : {}),\n  };\n  if (entry.schema.builtin) {\n    return createElement(\n      \"div\",\n      { key, className: builtinClass(node.type, props), ...dataAttrs },\n      ...(children ?? []),\n    );\n  }\n  return createElement(\n    entry.component as never,\n    { key, ...props, ...dataAttrs },\n    ...(children ?? []),\n  );\n}\n\n/** A memoised subtree so a streaming parent re-render does not redraw settled siblings. */\nconst SurfaceTree = memo(function SurfaceTree({\n  spec,\n  catalog,\n  invalid,\n  onAction,\n}: {\n  spec: A2uiSurfaceSpec;\n  catalog: A2uiCatalog;\n  invalid: Set<string>;\n  onAction?: A2uiActionHandler;\n}) {\n  return <>{renderNode(spec.root, \"root\", { catalog, invalid, onAction })}</>;\n});\n\n// ---------------------------------------------------------------------------\n// The surface\n// ---------------------------------------------------------------------------\nexport const A2uiSurface = forwardRef<HTMLDivElement, A2uiSurfaceProps>(function A2uiSurface(\n  {\n    surface,\n    catalog = uiCatalog,\n    onAction,\n    isStreaming = false,\n    loading = false,\n    onError,\n    skeleton,\n    className,\n    ...props\n  },\n  ref,\n) {\n  const { t } = useLocale();\n  const schema = useMemo(() => catalogSchema(catalog), [catalog]);\n\n  // Parse (completing a streaming prefix), then validate. A string that is not\n  // yet valid JSON even after completion is \"incomplete\", not invalid.\n  const parsed = useMemo(() => {\n    if (loading || surface == null) return { value: null, incomplete: false };\n    if (typeof surface !== \"string\") return { value: surface, incomplete: false };\n    const complete = parseSurfaceJson(surface, false);\n    if (complete !== null) return { value: complete, incomplete: false };\n    const partial = parseSurfaceJson(surface, true);\n    return { value: partial, incomplete: surface.trim() !== \"\" };\n  }, [surface, loading]);\n\n  const validation = useMemo(\n    () => (parsed.value === null ? null : validateA2uiSurface(parsed.value, schema)),\n    [parsed.value, schema],\n  );\n\n  const pending = loading || isStreaming || parsed.incomplete;\n  const empty = surface == null || (typeof surface === \"string\" && surface.trim() === \"\");\n\n  // While pending, prune the failing subtrees and draw the rest; a settled\n  // surface is all-or-nothing.\n  const invalid = useMemo(\n    () =>\n      validation && !validation.ok && pending\n        ? invalidNodePaths(validation.errors)\n        : new Set<string>(),\n    [validation, pending],\n  );\n  const drawable =\n    validation?.spec && (validation.ok || (pending && !invalid.has(\"root\")))\n      ? validation.spec\n      : null;\n\n  // The last tree that painted, so an unparsable streaming chunk (mid-token) or\n  // a momentarily root-invalid prefix keeps the previous frame on screen.\n  const lastGoodRef = useRef<A2uiSurfaceSpec | null>(null);\n  if (drawable) lastGoodRef.current = drawable;\n  const shown = drawable ?? (pending ? lastGoodRef.current : null);\n  const [hasRendered, setHasRendered] = useState(false);\n  useEffect(() => {\n    if (shown && !hasRendered) setHasRendered(true);\n  }, [shown, hasRendered]);\n\n  const status: A2uiSurfaceStatus = loading\n    ? \"pending\"\n    : empty\n      ? hasRendered\n        ? \"ready\"\n        : \"idle\"\n      : pending\n        ? \"pending\"\n        : validation && !validation.ok\n          ? \"error\"\n          : \"ready\";\n\n  // Terminal errors only — once per settled, invalid surface.\n  // Keyed by the error LIST, not the input's identity, so a parent re-render\n  // that passes an equal object literal does not report the same failure twice.\n  const reportedRef = useRef<string | null>(null);\n  useEffect(() => {\n    if (status !== \"error\" || !validation || validation.ok) return;\n    const key = JSON.stringify(validation.errors);\n    if (reportedRef.current === key) return;\n    reportedRef.current = key;\n    onError?.(validation.errors);\n  }, [status, validation, onError]);\n\n  const showSkeleton = status === \"pending\" && !shown;\n  const title = shown?.title;\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"a2ui-surface\"\n      data-status={status}\n      className={cn(\"relative min-w-0\", className)}\n      {...(title ? { role: \"group\", \"aria-label\": title } : {})}\n      {...props}\n    >\n      {showSkeleton ? (\n        <div\n          data-slot=\"a2ui-surface-skeleton\"\n          role=\"status\"\n          aria-live=\"polite\"\n          className=\"space-y-2\"\n        >\n          <span className=\"sr-only\">{t(\"ai.a2ui.loading\")}</span>\n          {skeleton ?? (\n            <>\n              <Skeleton className=\"h-6 w-1/3\" />\n              <div className=\"grid grid-cols-3 gap-2\">\n                <Skeleton className=\"h-16\" />\n                <Skeleton className=\"h-16\" />\n                <Skeleton className=\"h-16\" />\n              </div>\n              <Skeleton className=\"h-24 w-full\" />\n            </>\n          )}\n        </div>\n      ) : null}\n      {shown ? (\n        <SurfaceTree spec={shown} catalog={catalog} invalid={invalid} onAction={onAction} />\n      ) : null}\n      {status === \"error\" && validation && !validation.ok ? (\n        <div\n          data-slot=\"a2ui-surface-error\"\n          role=\"alert\"\n          // The status wash is the one separation gesture (surface-separation);\n          // `-text` is the AA ink rung on a wash (status-rung).\n          className=\"flex gap-2 rounded-md bg-destructive/10 p-3 text-body text-destructive-text\"\n        >\n          <AlertCircle className=\"mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\n          <div className=\"min-w-0 space-y-1\">\n            <p className=\"font-medium\">{t(\"ai.a2ui.invalid\")}</p>\n            <ul className=\"space-y-0.5 text-caption\">\n              {validation.errors.slice(0, 8).map((e) => (\n                <li key={`${e.path}:${e.code}`} className=\"break-words\">\n                  <code className=\"text-code\">{e.path || \"root\"}</code> — {e.message}\n                </li>\n              ))}\n              {validation.errors.length > 8 ? (\n                <li>{t(\"ai.a2ui.moreErrors\", { count: validation.errors.length - 8 })}</li>\n              ) : null}\n            </ul>\n          </div>\n        </div>\n      ) : null}\n    </div>\n  );\n});\n\nA2uiSurface.displayName = \"A2uiSurface\";\n\n/** Re-exported so a host can pre-complete a streaming prefix itself (e.g. for a raw-JSON view). */\nexport { completeJson };\n"],"mappings":"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","names":["SurfaceTree","A2uiSurface"]}