@timbal-ai/timbal-react 0.3.0 → 0.5.0

package/dist/index.cjs

@@ -32,11 +32,12 @@ var index_exports = {};
 __export(index_exports, {
   ARTIFACT_AGENT_INSTRUCTIONS: () => ARTIFACT_AGENT_INSTRUCTIONS,
   ARTIFACT_FENCE_LANGUAGES: () => ARTIFACT_FENCE_LANGUAGES,
-  ActionBarPrimitive: () => import_react26.ActionBarPrimitive,
+  ActionBarPrimitive: () => import_react45.ActionBarPrimitive,
   ArtifactCard: () => ArtifactCard,
   ArtifactRegistryProvider: () => ArtifactRegistryProvider,
   ArtifactView: () => ArtifactView,
-  AssistantRuntimeProvider: () => import_react26.AssistantRuntimeProvider,
+  AssistantRuntimeProvider: () => import_react45.AssistantRuntimeProvider,
+  AuiIf: () => import_react45.AuiIf,
   AuthGuard: () => AuthGuard,
   Avatar: () => Avatar,
   AvatarFallback: () => AvatarFallback,
@@ -44,9 +45,7 @@ __export(index_exports, {
   Button: () => Button,
   ChartArtifactView: () => ChartArtifactView,
   Composer: () => Composer,
-  ComposerAddAttachment: () => ComposerAddAttachment,
-  ComposerAttachments: () => ComposerAttachments,
-  ComposerPrimitive: () => import_react26.ComposerPrimitive,
+  ComposerPrimitive: () => import_react45.ComposerPrimitive,
   DEFAULT_UPLOAD_ACCEPT: () => DEFAULT_UPLOAD_ACCEPT,
   Dialog: () => Dialog,
   DialogClose: () => DialogClose,
@@ -58,18 +57,22 @@ __export(index_exports, {
   HtmlArtifactView: () => HtmlArtifactView,
   JsonArtifactView: () => JsonArtifactView,
   MarkdownText: () => MarkdownText,
-  MessagePrimitive: () => import_react26.MessagePrimitive,
+  MessagePrimitive: () => import_react45.MessagePrimitive,
+  ModeToggle: () => ModeToggle,
   QuestionArtifactView: () => QuestionArtifactView,
   SessionProvider: () => SessionProvider,
   Shimmer: () => Shimmer,
+  StudioSidebar: () => StudioSidebar,
+  StudioWelcome: () => StudioWelcome,
   Suggestions: () => Suggestions,
-  SyntaxHighlighter: () => syntax_highlighter_default,
   TableArtifactView: () => TableArtifactView,
   Thread: () => Thread,
-  ThreadPrimitive: () => import_react26.ThreadPrimitive,
+  ThreadPrimitive: () => import_react45.ThreadPrimitive,
   TimbalChat: () => TimbalChat,
   TimbalChatShell: () => TimbalChatShell,
+  TimbalMark: () => TimbalMark,
   TimbalRuntimeProvider: () => TimbalRuntimeProvider,
+  TimbalStudioShell: () => TimbalStudioShell,
   ToolArtifactFallback: () => ToolArtifactFallback,
   ToolFallback: () => ToolFallback,
   Tooltip: () => Tooltip,
@@ -81,10 +84,8 @@ __export(index_exports, {
   UiCustomNodeRegistryProvider: () => UiCustomNodeRegistryProvider,
   UiEventProvider: () => UiEventProvider,
   UiNodeView: () => UiNodeView,
-  UserMessageAttachments: () => UserMessageAttachments,
   WorkforceSelector: () => WorkforceSelector,
   authFetch: () => authFetch,
-  buttonVariants: () => buttonVariants,
   clearTokens: () => clearTokens,
   cn: () => cn,
   createDefaultAttachmentAdapter: () => createDefaultAttachmentAdapter,
@@ -108,14 +109,16 @@ __export(index_exports, {
   setRefreshToken: () => setRefreshToken,
   splitMarkdownByArtifacts: () => splitMarkdownByArtifacts,
   useArtifactRegistry: () => useArtifactRegistry,
-  useComposerRuntime: () => import_react26.useComposerRuntime,
-  useMessageRuntime: () => import_react26.useMessageRuntime,
+  useComposerRuntime: () => import_react45.useComposerRuntime,
+  useMessageRuntime: () => import_react45.useMessageRuntime,
+  useOptionalSession: () => useOptionalSession,
   useResolvedSuggestions: () => useResolvedSuggestions,
   useSession: () => useSession,
-  useThread: () => import_react26.useThread,
-  useThreadRuntime: () => import_react26.useThreadRuntime,
+  useThread: () => import_react45.useThread,
+  useThreadRuntime: () => import_react45.useThreadRuntime,
   useTimbalRuntime: () => useTimbalRuntime,
   useTimbalStream: () => useTimbalStream,
+  useToolRunning: () => useToolRunning,
   useUiCustomNodeRegistry: () => useUiCustomNodeRegistry,
   useUiDispatch: () => useUiDispatch,
   useUiEventEmitter: () => useUiEventEmitter,
@@ -982,6 +985,12 @@ function findParentIdFromAuiParent(messages, auiParentId) {
 // src/index.ts
 var import_timbal_sdk2 = require("@timbal-ai/timbal-sdk");
 
+// src/components/thread.tsx
+var import_react25 = require("react");
+var import_react26 = require("@assistant-ui/react");
+var import_lucide_react8 = require("lucide-react");
+var import_react27 = require("motion/react");
+
 // src/components/attachment.tsx
 var import_react4 = require("react");
 var import_lucide_react2 = require("lucide-react");
@@ -1189,83 +1198,166 @@ function AvatarFallback({
 
 // src/components/tooltip-icon-button.tsx
 var import_react3 = require("react");
-var import_react_slot = require("@radix-ui/react-slot");
 
-// src/ui/button.tsx
-var import_class_variance_authority = require("class-variance-authority");
+// src/ui/timbal-v2-button.tsx
+var React = __toESM(require("react"), 1);
 var import_radix_ui4 = require("radix-ui");
+
+// src/design/button-tokens.ts
+var TIMBAL_V2_SIZE_HEIGHT = {
+  xs: "min-h-8 h-8",
+  sm: "min-h-9 h-9",
+  md: "min-h-10 h-10",
+  lg: "min-h-11 h-11"
+};
+var TIMBAL_V2_SIZE_ICON = {
+  xs: "min-h-8 min-w-8 size-8",
+  sm: "min-h-8 min-w-8 size-8",
+  md: "min-h-10 min-w-10 size-10",
+  lg: "min-h-11 min-w-11 size-11"
+};
+var TIMBAL_V2_SIZE_LABEL_PX = {
+  xs: "px-3",
+  sm: "px-4",
+  md: "px-5",
+  lg: "px-6"
+};
+var TIMBAL_V2_FILL = {
+  primary: [
+    "bg-gradient-to-b from-primary-fill-from to-primary-fill-to",
+    "group-hover/tbv2:from-primary-fill-hover-from group-hover/tbv2:to-primary-fill-hover-to",
+    "group-active/tbv2:from-primary-fill-active-from group-active/tbv2:to-primary-fill-active-to"
+  ].join(" "),
+  informative: [
+    "bg-primary",
+    "group-active/tbv2:[background-image:linear-gradient(to_top,rgba(0,0,0,0.08),transparent_55%)]"
+  ].join(" "),
+  destructive: [
+    "bg-gradient-to-b from-elevated-from to-elevated-to",
+    "group-hover/tbv2:from-destructive-fill-hover-from group-hover/tbv2:to-destructive-fill-hover-to",
+    "group-active/tbv2:from-destructive-fill-active-from group-active/tbv2:to-destructive-fill-active-to"
+  ].join(" "),
+  secondary: [
+    "bg-gradient-to-b from-elevated-from to-elevated-to",
+    "group-hover/tbv2:from-secondary-fill-hover-from group-hover/tbv2:to-secondary-fill-hover-to",
+    "group-active/tbv2:from-secondary-fill-active-from group-active/tbv2:to-secondary-fill-active-to"
+  ].join(" "),
+  ghost: [
+    "bg-transparent",
+    "group-hover/tbv2:bg-ghost-fill-hover",
+    "group-active/tbv2:bg-ghost-fill-active"
+  ].join(" "),
+  link: "bg-transparent"
+};
+var TIMBAL_V2_LABEL = {
+  primary: "text-primary-foreground",
+  informative: "text-primary-foreground",
+  destructive: "text-destructive",
+  secondary: "text-foreground",
+  ghost: "text-foreground",
+  link: "text-foreground underline decoration-foreground/25 underline-offset-2 group-hover/tbv2:decoration-foreground/45"
+};
+var TIMBAL_V2_BORDER = {
+  primary: "",
+  informative: "border border-foreground/15",
+  destructive: "border border-destructive/45",
+  secondary: "border border-border",
+  ghost: "",
+  link: ""
+};
+var TIMBAL_V2_SHADOW = {
+  primary: "shadow-card",
+  informative: "shadow-card",
+  destructive: "shadow-card",
+  secondary: "shadow-card",
+  ghost: "",
+  link: ""
+};
+var TIMBAL_V2_SECONDARY_CHROME = [
+  "bg-gradient-to-b from-elevated-from to-elevated-to border border-border shadow-card",
+  "transition-[background-color,box-shadow,border-color] duration-200 ease-in-out",
+  "hover:from-secondary-fill-hover-from hover:to-secondary-fill-hover-to",
+  "active:from-secondary-fill-active-from active:to-secondary-fill-active-to"
+].join(" ");
+
+// src/ui/timbal-v2-button.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var buttonVariants = (0, import_class_variance_authority.cva)(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline"
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-function Button({
-  className,
-  variant = "default",
-  size = "default",
+var TimbalV2Button = React.forwardRef(function TimbalV2Button2({
+  variant = "secondary",
+  size = "sm",
+  isIconOnly = false,
+  isLoading = false,
+  fullWidth = false,
   asChild = false,
+  className,
+  disabled,
+  type = "button",
+  children,
   ...props
-}) {
+}, ref) {
+  const isDisabled = disabled || isLoading;
   const Comp = asChild ? import_radix_ui4.Slot.Root : "button";
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  const sizeClass = isIconOnly ? TIMBAL_V2_SIZE_ICON[size] : TIMBAL_V2_SIZE_HEIGHT[size];
+  const radiusClass = variant === "link" || variant === "ghost" ? "rounded-md" : "rounded-full";
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     Comp,
     {
-      "data-slot": "button",
+      ref,
+      type: asChild ? void 0 : type,
+      disabled: asChild ? void 0 : isDisabled,
+      "aria-disabled": asChild && isDisabled ? true : void 0,
+      "data-slot": "timbal-v2-button",
       "data-variant": variant,
-      "data-size": size,
-      className: cn(buttonVariants({ variant, size, className })),
-      ...props
+      className: cn(
+        "group/tbv2 relative box-border inline-flex flex-col items-stretch overflow-hidden border-0 bg-transparent p-0 text-sm font-normal shadow-none transition duration-200 ease-in-out",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+        sizeClass,
+        radiusClass,
+        TIMBAL_V2_BORDER[variant],
+        TIMBAL_V2_SHADOW[variant],
+        fullWidth && "w-full",
+        isDisabled && "pointer-events-none opacity-50",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn(
+              "pointer-events-none absolute inset-0 transition duration-200 ease-in-out",
+              TIMBAL_V2_FILL[variant]
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "span",
+          {
+            className: cn(
+              "relative z-10 flex min-h-0 flex-1 items-center justify-center gap-1 leading-tight",
+              !isIconOnly && TIMBAL_V2_SIZE_LABEL_PX[size],
+              TIMBAL_V2_LABEL[variant]
+            ),
+            children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "size-4 animate-spin rounded-full border-2 border-current border-t-transparent" }) : children
+          }
+        )
+      ]
     }
   );
-}
+});
 
 // src/components/tooltip-icon-button.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var TooltipIconButton = (0, import_react3.forwardRef)(({ children, tooltip, side = "bottom", className, ...rest }, ref) => {
+var TooltipIconButton = (0, import_react3.forwardRef)(function TooltipIconButton2({ tooltip, side = "bottom", variant = "secondary", children, ...props }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Tooltip, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-      Button,
-      {
-        variant: "ghost",
-        size: "icon",
-        ...rest,
-        className: cn("aui-button-icon size-6 p-1", className),
-        ref,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_slot.Slottable, { children }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "aui-sr-only sr-only", children: tooltip })
-        ]
-      }
-    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(TimbalV2Button, { ref, variant, size: "sm", isIconOnly: true, ...props, children: [
+      children,
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "sr-only", children: tooltip })
+    ] }) }),
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TooltipContent, { side, children: tooltip })
   ] });
 });
-TooltipIconButton.displayName = "TooltipIconButton";
 
 // src/components/attachment.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
@@ -1395,9 +1487,9 @@ var AttachmentRemove = () => {
     TooltipIconButton,
     {
       tooltip: "Remove file",
-      className: "aui-attachment-tile-remove absolute top-1.5 right-1.5 size-3.5 rounded-full bg-white text-muted-foreground opacity-100 shadow-sm hover:bg-white! [&_svg]:text-black hover:[&_svg]:text-destructive",
+      className: "aui-attachment-tile-remove absolute top-1.5 right-1.5 size-3.5 rounded-full bg-card text-foreground opacity-100 shadow-card hover:bg-card! [&_svg]:text-foreground hover:[&_svg]:text-destructive",
       side: "top",
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.XIcon, { className: "aui-attachment-remove-icon size-3 dark:stroke-[2.5px]" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.XIcon, { className: "aui-attachment-remove-icon size-3" })
     }
   ) });
 };
@@ -1418,11 +1510,10 @@ var ComposerAddAttachment = () => {
     {
       tooltip: "Add Attachment",
       side: "bottom",
-      variant: "ghost",
-      size: "icon",
-      className: "aui-composer-add-attachment size-8.5 rounded-full p-1 font-semibold text-xs hover:bg-muted-foreground/15 dark:border-muted-foreground/15 dark:hover:bg-muted-foreground/30",
+      variant: "secondary",
+      className: "aui-composer-add-attachment shrink-0 text-muted-foreground",
       "aria-label": "Add Attachment",
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.PlusIcon, { className: "aui-attachment-add-icon size-5 stroke-[1.5px]" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.PlusIcon, { className: "aui-attachment-add-icon size-4 stroke-[1.5]" })
     }
   ) });
 };
@@ -1769,86 +1860,205 @@ function formatTick(v, unit) {
 var import_react7 = require("react");
 var import_react8 = require("@assistant-ui/react");
 var import_lucide_react3 = require("lucide-react");
+
+// src/design/classes.ts
+var studioTopbarPillHeightClass = "h-[var(--studio-chrome-pill-height)] min-h-[var(--studio-chrome-pill-height)]";
+var studioTopbarIconPillClass = "shrink-0 flex-none size-[var(--studio-chrome-pill-height)] min-h-[var(--studio-chrome-pill-height)] min-w-[var(--studio-chrome-pill-height)]";
+var studioPlaygroundGradientClass = "bg-gradient-to-b from-playground-from via-playground-via to-playground-to";
+var studioComposeInputShellClass = cn(
+  "flex w-full flex-col rounded-2xl bg-composer-bg shadow-card-elevated outline-none",
+  "border border-composer-border",
+  "transition-[box-shadow,border-color]",
+  "focus-within:border-composer-border-focus focus-within:ring-2 focus-within:ring-foreground/5"
+);
+var studioSecondaryChromeClass = TIMBAL_V2_SECONDARY_CHROME;
+var studioIntegrationSurfaceSolid = "bg-gradient-to-b from-elevated-from to-elevated-to shadow-card";
+var studioIntegrationBorder = "border border-border";
+var studioIntegrationCardClass = cn(
+  "rounded-xl",
+  studioIntegrationSurfaceSolid,
+  studioIntegrationBorder
+);
+var studioIntegrationIconTileClass = cn(
+  "flex size-9 shrink-0 items-center justify-center rounded-lg",
+  studioIntegrationSurfaceSolid,
+  studioIntegrationBorder
+);
+var studioListRowButtonClass = cn(
+  "flex w-full cursor-pointer items-center gap-3 rounded-xl px-3 py-2.5 text-left",
+  studioIntegrationCardClass,
+  "transition-[background-color,box-shadow,border-color] duration-200 ease-in-out",
+  "hover:border-foreground/20",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/15 focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+);
+var studioComposerIoWellClass = cn(
+  "rounded-lg",
+  studioIntegrationSurfaceSolid,
+  studioIntegrationBorder
+);
+var studioToolCardShellClass = cn(
+  studioIntegrationCardClass,
+  "my-2 min-h-0 overflow-hidden"
+);
+var studioSidebarPanelClass = cn(
+  "bg-sidebar text-sidebar-foreground",
+  "border border-sidebar-border",
+  "shadow-card-elevated"
+);
+var studioSidebarNavItemClass = cn(
+  "flex items-center rounded-lg text-sm",
+  "transition-[color,background-color,box-shadow,border-color] duration-200 ease-in-out",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/15 focus-visible:ring-offset-2"
+);
+function studioSidebarNavItemLayout(iconOnly) {
+  return iconOnly ? "box-border size-8 min-h-8 min-w-8 shrink-0 justify-center rounded-lg p-0 focus-visible:ring-offset-0" : "w-full gap-2 px-2.5 py-2";
+}
+var studioSidebarNavItemSurfaceClass = cn(
+  "bg-gradient-to-b from-elevated-from to-elevated-to text-foreground",
+  "border border-border",
+  "shadow-card"
+);
+var studioSidebarNavItemIdleClass = cn(
+  "border border-transparent text-muted-foreground shadow-none",
+  "hover:text-foreground",
+  "hover:bg-gradient-to-b hover:from-elevated-from hover:to-elevated-to",
+  "hover:border-border hover:shadow-card"
+);
+var studioSidebarCollapsedRailItemClass = cn(
+  "border border-border shadow-card bg-sidebar-accent"
+);
+var studioSidebarCollapsedRailItemIdleClass = cn(
+  studioSidebarCollapsedRailItemClass,
+  "text-muted-foreground hover:text-foreground"
+);
+var studioSidebarCollapsedRailItemActiveClass = cn(
+  studioSidebarCollapsedRailItemClass,
+  studioSidebarNavItemSurfaceClass,
+  "text-foreground"
+);
+var studioSidebarNavItemActiveClass = studioSidebarNavItemSurfaceClass;
+var studioTimelineRowButtonClass = "group flex w-full min-w-0 cursor-pointer items-center justify-start rounded-md border-0 bg-transparent py-1 text-left shadow-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/15 focus-visible:ring-offset-2";
+var studioTimelineTextClass = "text-xs font-normal leading-snug";
+var studioTimelineActionClass = cn(
+  studioTimelineTextClass,
+  "shrink-0 text-foreground/70 transition-colors duration-150 group-hover:text-foreground/80"
+);
+var studioTimelineShimmerActionClass = cn(
+  studioTimelineTextClass,
+  "shrink-0"
+);
+var studioTimelineDetailClass = cn(
+  studioTimelineTextClass,
+  "min-w-0 truncate text-muted-foreground transition-colors duration-150"
+);
+function studioTimelineChevronClass(expanded) {
+  return cn(
+    "ml-0.5 size-3 min-h-3 min-w-3 shrink-0 transition-all duration-150",
+    expanded ? "rotate-90 text-foreground opacity-60" : "text-muted-foreground opacity-0 group-hover:opacity-70"
+  );
+}
+var studioTimelineBodyPadClass = "flex flex-col gap-2 pt-0.5 pb-0.5";
+var studioArtifactShellClass = cn(
+  studioIntegrationCardClass,
+  "my-2 w-full min-w-0 overflow-hidden"
+);
+var studioQuestionOptionClass = "flex w-full items-center gap-2 rounded-lg border border-transparent px-2 py-1.5 text-left text-sm transition-[background-color,border-color,box-shadow] duration-200 hover:bg-muted/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/15 focus-visible:ring-offset-2";
+var studioQuestionOptionSelectedClass = cn(
+  studioQuestionOptionClass,
+  "border-border bg-accent ring-1 ring-foreground/10"
+);
+
+// src/artifacts/question-artifact.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
+function optionKey(option, index) {
+  const id = option.id?.trim();
+  return id ? id : `__option-${index}`;
+}
+var OptionRadio = ({ selected }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  "span",
+  {
+    className: cn(
+      "flex size-4 shrink-0 items-center justify-center rounded-full border-2 transition-colors",
+      selected ? "border-foreground bg-foreground text-background" : "border-border bg-background"
+    ),
+    "aria-hidden": true,
+    children: selected ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.CheckIcon, { className: "size-2.5 stroke-[3]" }) : null
+  }
+);
 var QuestionArtifactView = ({
   artifact
 }) => {
   const runtime = (0, import_react8.useThreadRuntime)();
   const [selected, setSelected] = (0, import_react7.useState)([]);
-  const [submitted, setSubmitted] = (0, import_react7.useState)(null);
+  const [submittedIds, setSubmittedIds] = (0, import_react7.useState)(null);
   const isMulti = artifact.multi === true;
-  const send = (labels) => {
-    if (labels.length === 0) return;
-    const text = labels.join(", ");
-    setSubmitted(text);
-    runtime.append({ role: "user", content: [{ type: "text", text }] });
-  };
-  const onPick = (option) => {
-    if (submitted) return;
-    if (!isMulti) {
-      send([option.label]);
-      return;
-    }
-    setSelected(
-      (prev) => prev.includes(option.id) ? prev.filter((id) => id !== option.id) : [...prev, option.id]
-    );
-  };
-  const onConfirm = () => {
-    const labels = artifact.options.filter((o) => selected.includes(o.id)).map((o) => o.label);
-    send(labels);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ArtifactCard, { kind: "question", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "aui-artifact-question p-3", children: [
-    artifact.prompt && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "aui-artifact-question-prompt mb-2 text-sm text-foreground/85", children: artifact.prompt }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "aui-artifact-question-options flex flex-col gap-1.5", children: artifact.options.map((option) => {
-      const isSelected = isMulti && selected.includes(option.id);
-      const isDisabled = Boolean(submitted);
+  const isDisabled = submittedIds !== null;
+  const send = (0, import_react7.useCallback)(
+    (keys) => {
+      if (keys.length === 0) return;
+      const labels = artifact.options.map((option, index) => ({ option, key: optionKey(option, index) })).filter(({ key }) => keys.includes(key)).map(({ option }) => option.label);
+      setSubmittedIds(keys);
+      runtime.append({
+        role: "user",
+        content: [{ type: "text", text: labels.join(", ") }]
+      });
+    },
+    [artifact.options, runtime]
+  );
+  const onPick = (0, import_react7.useCallback)(
+    (key) => {
+      if (isDisabled) return;
+      if (!isMulti) {
+        send([key]);
+        return;
+      }
+      setSelected(
+        (prev) => prev.includes(key) ? prev.filter((id) => id !== key) : [...prev, key]
+      );
+    },
+    [isDisabled, isMulti, send]
+  );
+  const onConfirm = (0, import_react7.useCallback)(() => {
+    send(selected);
+  }, [selected, send]);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: studioArtifactShellClass, "data-artifact-kind": "question", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "px-2.5 py-2", children: [
+    artifact.prompt ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "mb-2 text-sm font-normal leading-snug text-foreground", children: artifact.prompt }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-col gap-0.5", role: "list", children: artifact.options.map((option, index) => {
+      const key = optionKey(option, index);
+      const isSelected = submittedIds ? submittedIds.includes(key) : isMulti && selected.includes(key);
       return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
         "button",
         {
           type: "button",
+          role: "listitem",
           disabled: isDisabled,
-          onClick: () => onPick(option),
+          onClick: () => onPick(key),
           className: cn(
-            "aui-artifact-question-option flex items-center gap-2 rounded-lg border px-3 py-2 text-left text-sm transition-colors",
-            "border-border/60 hover:border-primary/40 hover:bg-muted/40",
-            isSelected && "border-primary/60 bg-primary/5",
-            isDisabled && "cursor-not-allowed opacity-60 hover:border-border/60 hover:bg-transparent"
+            isSelected ? studioQuestionOptionSelectedClass : studioQuestionOptionClass,
+            isDisabled && (isSelected ? "cursor-default" : "cursor-not-allowed opacity-50")
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-              "span",
-              {
-                className: cn(
-                  "flex size-4 shrink-0 items-center justify-center rounded-full border",
-                  isSelected ? "border-primary bg-primary text-primary-foreground" : "border-border"
-                ),
-                "aria-hidden": true,
-                children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.CheckIcon, { className: "size-3" })
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "aui-artifact-question-option-text flex-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "font-medium text-foreground/90", children: option.label }),
-              option.description && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-xs text-muted-foreground", children: option.description })
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(OptionRadio, { selected: isSelected }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "min-w-0 flex-1 text-left", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "block font-normal text-foreground", children: option.label }),
+              option.description ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: option.description }) : null
             ] })
           ]
         },
-        option.id
+        key
       );
     }) }),
-    isMulti && !submitted && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-2 flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      Button,
+    isMulti && !submittedIds ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-2 flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      TimbalV2Button,
       {
         type: "button",
+        variant: "primary",
         size: "sm",
         disabled: selected.length === 0,
         onClick: onConfirm,
         children: "Confirm"
       }
-    ) }),
-    submitted && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("p", { className: "aui-artifact-question-submitted mt-2 text-xs text-muted-foreground", children: [
-      "Sent: ",
-      submitted
-    ] })
+    ) }) : null
   ] }) });
 };
 
@@ -2019,29 +2229,84 @@ function useUiCustomNodeRegistry() {
 var import_react10 = require("react");
 var import_react11 = require("motion/react");
 var import_react12 = require("@assistant-ui/react");
+
+// src/ui/button.tsx
+var import_class_variance_authority = require("class-variance-authority");
+var import_radix_ui5 = require("radix-ui");
 var import_jsx_runtime15 = require("react/jsx-runtime");
+var buttonVariants = (0, import_class_variance_authority.cva)(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/30 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/30",
+        outline: "border border-border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? import_radix_ui5.Slot.Root : "button";
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    Comp,
+    {
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
+// src/artifacts/ui/nodes.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var UiNodeView = ({ node }) => {
   switch (node.kind) {
     case "box":
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BoxNode, { node });
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(BoxNode, { node });
     case "text":
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TextNode, { node });
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TextNode, { node });
     case "heading":
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(HeadingNode, { node });
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(HeadingNode, { node });
     case "badge":
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BadgeNode, { node });
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(BadgeNode, { node });
     case "button":
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ButtonNode, { node });
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ButtonNode, { node });
     case "toggle":
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ToggleNode, { node });
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ToggleNode, { node });
     case "slider":
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SliderNode, { node });
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SliderNode, { node });
     case "tooltip":
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TooltipNode, { node });
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TooltipNode, { node });
     case "draggable":
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DraggableNode, { node });
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DraggableNode, { node });
     case "custom":
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CustomNode, { node });
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CustomNode, { node });
     default:
       return null;
   }
@@ -2101,7 +2366,7 @@ var JUSTIFY_CLS = {
 };
 var BoxNode = ({ node }) => {
   const dir = node.direction ?? "col";
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "div",
     {
       className: cn(
@@ -2116,7 +2381,7 @@ var BoxNode = ({ node }) => {
         gap: node.gap !== void 0 ? `${node.gap * 0.25}rem` : void 0,
         padding: node.padding !== void 0 ? `${node.padding * 0.25}rem` : void 0
       },
-      children: node.children?.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(UiNodeView, { node: child }, child.id ?? i))
+      children: node.children?.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(UiNodeView, { node: child }, child.id ?? i))
     }
   );
 };
@@ -2135,7 +2400,7 @@ var TEXT_WEIGHT = {
 var TextNode = ({ node }) => {
   const state = useUiState();
   const value = resolveBindable(node.value, state);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "span",
     {
       className: cn(
@@ -2166,13 +2431,13 @@ var HeadingNode = ({ node }) => {
   );
   switch (level) {
     case 1:
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h1", { className: cls, children: value });
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h1", { className: cls, children: value });
     case 2:
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h2", { className: cls, children: value });
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h2", { className: cls, children: value });
     case 3:
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h3", { className: cls, children: value });
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { className: cls, children: value });
     case 4:
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h4", { className: cls, children: value });
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h4", { className: cls, children: value });
   }
 };
 var BADGE_TONE = {
@@ -2185,7 +2450,7 @@ var BADGE_TONE = {
 var BadgeNode = ({ node }) => {
   const state = useUiState();
   const value = String(resolveBindable(node.value, state) ?? "");
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "span",
     {
       className: cn(
@@ -2202,7 +2467,7 @@ var ButtonNode = ({ node }) => {
   const run = useActionRunner();
   const label = String(resolveBindable(node.label, state) ?? "");
   const disabled = node.disabled !== void 0 ? Boolean(resolveBindable(node.disabled, state)) : false;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     Button,
     {
       variant: node.variant ?? "default",
@@ -2224,7 +2489,7 @@ var ToggleNode = ({ node }) => {
     dispatch({ type: "toggle", path: node.binding });
     run(node.onChange);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     "label",
     {
       className: cn(
@@ -2232,7 +2497,7 @@ var ToggleNode = ({ node }) => {
         node.className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           "button",
           {
             type: "button",
@@ -2243,7 +2508,7 @@ var ToggleNode = ({ node }) => {
               "relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border transition-colors",
               value ? "border-primary bg-primary" : "border-border bg-muted hover:bg-muted/80"
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
               "span",
               {
                 className: cn(
@@ -2255,7 +2520,7 @@ var ToggleNode = ({ node }) => {
             )
           }
         ),
-        label && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-foreground/85", children: label })
+        label && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-foreground/85", children: label })
       ]
     }
   );
@@ -2275,12 +2540,12 @@ var SliderNode = ({ node }) => {
     const next = Number(e.target.value);
     dispatch({ type: "set", path: node.binding, value: next });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: cn("aui-ui-slider flex flex-col gap-1", node.className), children: [
-    (label || showValue) && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center justify-between text-xs text-muted-foreground", children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: label }),
-      showValue && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "font-mono", children: value })
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: cn("aui-ui-slider flex flex-col gap-1", node.className), children: [
+    (label || showValue) && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center justify-between text-xs text-muted-foreground", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: label }),
+      showValue && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "font-mono", children: value })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "input",
       {
         type: "range",
@@ -2302,9 +2567,9 @@ var SliderNode = ({ node }) => {
 var TooltipNode = ({ node }) => {
   const state = useUiState();
   const content = String(resolveBindable(node.content, state) ?? "");
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Tooltip, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: cn("aui-ui-tooltip-trigger inline-flex", node.className), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(UiNodeView, { node: node.child }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TooltipContent, { side: node.side ?? "top", children: content })
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: cn("aui-ui-tooltip-trigger inline-flex", node.className), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(UiNodeView, { node: node.child }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TooltipContent, { side: node.side ?? "top", children: content })
   ] }) });
 };
 var DraggableNode = ({ node }) => {
@@ -2312,7 +2577,7 @@ var DraggableNode = ({ node }) => {
   const snapBack = node.snapBack ?? true;
   const axis = node.axis ?? "both";
   const dragProp = axis === "both" ? true : axis;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     import_react11.motion.div,
     {
       drag: dragProp,
@@ -2324,7 +2589,7 @@ var DraggableNode = ({ node }) => {
         "aui-ui-draggable inline-block cursor-grab touch-none",
         node.className
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(UiNodeView, { node: node.child })
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(UiNodeView, { node: node.child })
     }
   );
 };
@@ -2334,8 +2599,8 @@ var CustomNode = ({ node }) => {
   const Renderer = registry[node.name];
   if (!Renderer) return null;
   const resolvedProps = resolveProps(node.props ?? {}, state);
-  const children = node.children?.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(UiNodeView, { node: child }, child.id ?? i));
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Renderer, { props: resolvedProps, children });
+  const children = node.children?.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(UiNodeView, { node: child }, child.id ?? i));
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Renderer, { props: resolvedProps, children });
 };
 function resolveProps(props, state) {
   const out = {};
@@ -2346,17 +2611,17 @@ function resolveProps(props, state) {
 }
 
 // src/artifacts/ui/ui-artifact.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var UiArtifactView = ({ artifact }) => {
   const [state, dispatch] = (0, import_react13.useReducer)(
     uiStateReducer,
     artifact.initialState ?? {}
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ArtifactCard, { title: artifact.title, kind: "ui", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(UiStateProvider, { state, dispatch, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "aui-ui-root p-3", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(UiNodeView, { node: artifact.root }) }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ArtifactCard, { title: artifact.title, kind: "ui", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(UiStateProvider, { state, dispatch, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "aui-ui-root p-3", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(UiNodeView, { node: artifact.root }) }) }) });
 };
 
 // src/artifacts/registry.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var defaultArtifactRenderers = {
   chart: ChartArtifactView,
   question: QuestionArtifactView,
@@ -2374,7 +2639,7 @@ var ArtifactRegistryProvider = ({ renderers, override, children }) => {
     if (override) return renderers;
     return { ...defaultArtifactRenderers, ...renderers };
   }, [renderers, override]);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ArtifactRegistryContext.Provider, { value: merged, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ArtifactRegistryContext.Provider, { value: merged, children });
 };
 function useArtifactRegistry() {
   return (0, import_react14.useContext)(ArtifactRegistryContext);
@@ -2383,7 +2648,7 @@ var ArtifactView = ({ artifact }) => {
   const registry = useArtifactRegistry();
   const Renderer = registry[artifact.type] ?? registry.json;
   if (!Renderer) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Renderer, { artifact });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Renderer, { artifact });
 };
 
 // src/artifacts/parse.ts
@@ -2499,7 +2764,7 @@ var import_c = __toESM(require("shiki/langs/c.mjs"), 1);
 var import_cpp = __toESM(require("shiki/langs/cpp.mjs"), 1);
 var import_vitesse_dark = __toESM(require("shiki/themes/vitesse-dark.mjs"), 1);
 var import_vitesse_light = __toESM(require("shiki/themes/vitesse-light.mjs"), 1);
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var SHIKI_THEME_DARK = "vitesse-dark";
 var SHIKI_THEME_LIGHT = "vitesse-light";
 var highlighterPromise = null;
@@ -2568,13 +2833,13 @@ var ShikiSyntaxHighlighter = ({
     try {
       const parsed = JSON.parse(code);
       if (isArtifact(parsed)) {
-        return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ArtifactView, { artifact: parsed });
+        return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ArtifactView, { artifact: parsed });
       }
     } catch {
     }
   }
   if (html) {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "div",
       {
         className: "shiki-wrapper [&>pre]:!m-0 [&>pre]:!rounded-t-none [&>pre]:!rounded-b-lg [&>pre]:!border [&>pre]:!border-t-0 [&>pre]:!border-border/50 [&>pre]:!p-3 [&>pre]:!text-xs [&>pre]:!leading-relaxed [&>pre]:overflow-x-auto",
@@ -2582,14 +2847,14 @@ var ShikiSyntaxHighlighter = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pre, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Code2, { children: code }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Pre, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Code2, { children: code }) });
 };
 var syntax_highlighter_default = ShikiSyntaxHighlighter;
 
 // src/components/markdown-text.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var MarkdownTextImpl = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     import_react_markdown.MarkdownTextPrimitive,
     {
       remarkPlugins: [import_remark_gfm.default, import_remark_math.default],
@@ -2610,20 +2875,20 @@ var CodeHeader = ({ language, code }) => {
     if (!code || isCopied) return;
     copyToClipboard(code);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "aui-code-header flex items-center justify-between rounded-t-lg border border-b-0 border-border/50 bg-zinc-100 px-4 py-2 dark:bg-zinc-800/80", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "flex items-center gap-2 text-xs font-semibold tracking-wide text-muted-foreground/80 uppercase", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "inline-block h-2 w-2 rounded-full bg-primary/40" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "aui-code-header flex items-center justify-between rounded-t-lg border border-b-0 border-border/50 bg-code-header-bg px-4 py-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "flex items-center gap-2 text-xs font-semibold tracking-wide text-muted-foreground/80 uppercase", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "inline-block h-2 w-2 rounded-full bg-primary/40" }),
       language
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       TooltipIconButton,
       {
         tooltip: isCopied ? "Copied!" : "Copy",
         onClick: onCopy,
         className: "transition-colors hover:text-foreground",
         children: [
-          !isCopied && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react4.CopyIcon, { className: "h-3.5 w-3.5" }),
-          isCopied && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react4.CheckIcon, { className: "h-3.5 w-3.5 text-emerald-500" })
+          !isCopied && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react4.CopyIcon, { className: "h-3.5 w-3.5" }),
+          isCopied && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react4.CheckIcon, { className: "h-3.5 w-3.5 text-emerald-500" })
         ]
       }
     )
@@ -2643,7 +2908,7 @@ var useCopyToClipboard = ({
   return { isCopied, copyToClipboard };
 };
 var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownComponents)({
-  h1: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  h1: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "h1",
     {
       className: cn(
@@ -2653,7 +2918,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  h2: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  h2: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "h2",
     {
       className: cn(
@@ -2663,7 +2928,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  h3: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  h3: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "h3",
     {
       className: cn(
@@ -2673,7 +2938,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  h4: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  h4: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "h4",
     {
       className: cn(
@@ -2683,7 +2948,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  h5: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  h5: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "h5",
     {
       className: cn(
@@ -2693,7 +2958,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  h6: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  h6: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "h6",
     {
       className: cn(
@@ -2703,7 +2968,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  p: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  p: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "p",
     {
       className: cn(
@@ -2713,7 +2978,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  a: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  a: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "a",
     {
       className: cn(
@@ -2725,7 +2990,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  blockquote: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  blockquote: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "blockquote",
     {
       className: cn(
@@ -2735,7 +3000,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  ul: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  ul: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "ul",
     {
       className: cn(
@@ -2745,7 +3010,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  ol: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  ol: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "ol",
     {
       className: cn(
@@ -2755,7 +3020,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  hr: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  hr: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "hr",
     {
       className: cn(
@@ -2765,14 +3030,14 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  table: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "my-4 w-full overflow-x-auto rounded-lg border border-border/50", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  table: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "my-4 w-full overflow-x-auto rounded-lg border border-border/50", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "table",
     {
       className: cn("aui-md-table w-full border-collapse text-sm", className),
       ...props
     }
   ) }),
-  th: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  th: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "th",
     {
       className: cn(
@@ -2782,7 +3047,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  td: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  td: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "td",
     {
       className: cn(
@@ -2792,7 +3057,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  tr: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  tr: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "tr",
     {
       className: cn(
@@ -2802,8 +3067,8 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  li: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("li", { className: cn("aui-md-li leading-[1.7]", className), ...props }),
-  sup: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  li: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("li", { className: cn("aui-md-li leading-[1.7]", className), ...props }),
+  sup: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "sup",
     {
       className: cn(
@@ -2813,11 +3078,11 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  pre: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  pre: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "pre",
     {
       className: cn(
-        "aui-md-pre overflow-x-auto rounded-t-none rounded-b-lg border border-t-0 border-border/50 bg-zinc-50 p-4 text-[13px] leading-relaxed dark:bg-zinc-900/80",
+        "aui-md-pre overflow-x-auto rounded-t-none rounded-b-lg border border-t-0 border-border/50 bg-code-block-bg p-4 text-[13px] leading-relaxed",
         className
       ),
       ...props
@@ -2825,30 +3090,31 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
   ),
   code: function Code({ className, ...props }) {
     const isCodeBlock = (0, import_react_markdown.useIsMarkdownCodeBlock)();
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "code",
       {
         className: cn(
-          !isCodeBlock && "aui-md-inline-code rounded-[5px] border border-border/60 bg-muted/60 px-[0.4em] py-[0.15em] font-mono text-[0.85em] font-medium text-foreground/90 dark:bg-muted/40",
+          !isCodeBlock && "aui-md-inline-code rounded-[5px] border border-border/60 bg-muted/60 px-[0.4em] py-[0.15em] font-mono text-[0.85em] font-medium text-foreground/90",
           className
         ),
         ...props
       }
     );
   },
-  strong: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("strong", { className: cn("font-semibold text-foreground", className), ...props }),
-  em: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("em", { className: cn("italic", className), ...props }),
+  strong: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("strong", { className: cn("font-semibold text-foreground", className), ...props }),
+  em: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("em", { className: cn("italic", className), ...props }),
   CodeHeader
 });
 
 // src/components/tool-fallback.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_lucide_react5 = require("lucide-react");
+var import_react21 = require("@assistant-ui/react");
 
 // src/ui/shimmer.tsx
 var import_react17 = require("motion/react");
 var import_react18 = require("react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var ShimmerComponent = ({
   children,
   as: Component = "p",
@@ -2863,7 +3129,7 @@ var ShimmerComponent = ({
     () => (children?.length ?? 0) * spread,
     [children, spread]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     MotionComponent,
     {
       animate: { backgroundPosition: "0% center" },
@@ -2888,78 +3154,130 @@ var ShimmerComponent = ({
 };
 var Shimmer = (0, import_react18.memo)(ShimmerComponent);
 
-// src/components/tool-fallback.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var ToolFallbackImpl = ({
-  toolName,
-  argsText,
-  result,
-  status
-}) => {
-  const isRunning = status?.type === "running";
-  const isError = status?.type === "incomplete" && status.reason !== "cancelled";
-  if (isRunning) {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "aui-tool-fallback-running flex items-center gap-2 py-1 text-sm text-muted-foreground", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react5.WrenchIcon, { className: "size-4" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Shimmer, { as: "span", duration: 1.8, spread: 2.5, children: `Using tool: ${toolName}` })
-    ] });
+// src/components/motion.tsx
+var import_react19 = require("motion/react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var luxuryEase = [0.16, 1, 0.3, 1];
+var TOOL_ENTER_MS = 0.78;
+var TOOL_EXIT_MS = 0.28;
+function toolPresenceTransition(reduced) {
+  return {
+    enter: {
+      duration: reduced ? 0.35 : TOOL_ENTER_MS,
+      ease: luxuryEase
+    },
+    exit: {
+      duration: reduced ? 0.2 : TOOL_EXIT_MS,
+      ease: [0.4, 0, 1, 1]
+    }
+  };
+}
+function toolMotionState(reduced, entering, variant) {
+  if (reduced) {
+    return entering ? { opacity: 0, y: variant === "executing" ? 8 : 10 } : { opacity: 1, y: 0 };
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-    ToolPanel,
+  if (variant === "executing") {
+    return entering ? { opacity: 0, y: 12 } : { opacity: 1, y: 0 };
+  }
+  return entering ? { opacity: 0, y: 14, filter: "blur(10px)" } : { opacity: 1, y: 0, filter: "blur(0px)" };
+}
+function ToolMotion({ children, className, motionKey }) {
+  const reduced = (0, import_react19.useReducedMotion)() ?? false;
+  const { enter, exit } = toolPresenceTransition(reduced);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    import_react19.motion.div,
     {
-      toolName,
-      argsText,
-      result,
-      isError
-    }
+      className: cn("aui-tool-motion w-full min-w-0", className),
+      initial: toolMotionState(reduced, true, "settled"),
+      animate: toolMotionState(reduced, false, "settled"),
+      exit: reduced ? { opacity: 0, y: 6, transition: exit } : { opacity: 0, y: 8, filter: "blur(6px)", transition: exit },
+      transition: enter,
+      style: { willChange: "opacity, transform, filter" },
+      children
+    },
+    motionKey
   );
-};
-var ToolPanel = ({ toolName, argsText, result, isError }) => {
-  const [open, setOpen] = (0, import_react19.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+}
+function ToolPresence({
+  presenceKey,
+  children,
+  className,
+  variant = "settled"
+}) {
+  const reduced = (0, import_react19.useReducedMotion)() ?? false;
+  const { enter, exit } = toolPresenceTransition(reduced);
+  const enterTransition = variant === "executing" ? { duration: reduced ? 0.3 : 0.52, ease: luxuryEase } : enter;
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react19.AnimatePresence, { mode: "wait", initial: true, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    import_react19.motion.div,
+    {
+      className: cn("aui-tool-presence w-full min-w-0", className),
+      initial: toolMotionState(reduced, true, variant),
+      animate: toolMotionState(reduced, false, variant),
+      exit: reduced ? { opacity: 0, y: 6, transition: exit } : { opacity: 0, y: 8, filter: "blur(6px)", transition: exit },
+      transition: enterTransition,
+      style: {
+        willChange: variant === "executing" ? "opacity, transform" : "opacity, transform, filter"
+      },
+      children
+    },
+    presenceKey
+  ) });
+}
+function ToolBodyPresence({
+  open,
+  children,
+  className
+}) {
+  const reduced = (0, import_react19.useReducedMotion)() ?? false;
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "div",
     {
       className: cn(
-        "aui-tool-fallback-root my-2 overflow-hidden rounded-lg border border-border/60 bg-muted/30 text-sm",
-        isError && "border-destructive/50 bg-destructive/5"
+        "aui-tool-body grid min-h-0 transition-[grid-template-rows]",
+        open ? reduced ? "duration-200 ease-out" : "duration-[340ms] ease-[cubic-bezier(0.16,1,0.3,1)]" : reduced ? "duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]" : "duration-200 ease-[cubic-bezier(0.4,0,0.2,1)]"
       ),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-          "button",
-          {
-            type: "button",
-            onClick: () => setOpen((v) => !v),
-            className: "aui-tool-fallback-header flex w-full items-center gap-2 px-3 py-2 text-left text-muted-foreground transition-colors hover:bg-muted/50",
-            "aria-expanded": open,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react5.WrenchIcon, { className: "size-3.5" }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "aui-tool-fallback-name flex-1 truncate font-mono text-xs font-medium text-foreground/80", children: toolName }),
-              isError && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "aui-tool-fallback-status text-xs font-medium text-destructive", children: "error" }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                import_lucide_react5.ChevronDownIcon,
-                {
-                  className: cn(
-                    "size-3.5 shrink-0 transition-transform",
-                    open && "rotate-180"
-                  )
-                }
-              )
-            ]
-          }
-        ),
-        open && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "aui-tool-fallback-body grid gap-2 border-t border-border/40 bg-background/50 px-3 py-2.5 text-xs", children: [
-          argsText && argsText !== "{}" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Section, { label: "Input", value: argsText }),
-          result !== void 0 && result !== null && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Section, { label: "Output", value: formatResult(result) })
-        ] })
-      ]
+      style: { gridTemplateRows: open ? "1fr" : "0fr" },
+      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        "div",
+        {
+          className: cn(
+            className,
+            "transition-opacity",
+            open ? reduced ? "opacity-100 duration-200 ease-out" : "opacity-100 duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] delay-75" : reduced ? "opacity-0 duration-100 ease-in" : "opacity-0 duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]"
+          ),
+          children
+        }
+      ) })
     }
   );
-};
-var Section = ({ label, value }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "aui-tool-fallback-section", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "aui-tool-fallback-section-label mb-0.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: label }),
-  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("pre", { className: "aui-tool-fallback-section-value overflow-x-auto whitespace-pre-wrap break-words font-mono text-[11px] leading-relaxed text-foreground/85", children: value })
-] });
-function formatResult(result) {
+}
+
+// src/components/tool-fallback.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function detectRunning({
+  status,
+  result,
+  streamRunning
+}) {
+  const isError = status?.type === "incomplete" && status.reason !== "cancelled";
+  if (isError) return false;
+  if (status?.type === "running") return true;
+  if (status?.type === "complete") return false;
+  return streamRunning && result === void 0;
+}
+function useToolRunning(props) {
+  const { isRunning: streamRunning } = useTimbalRuntime();
+  const partStatus = (0, import_react21.useAuiState)((s) => s.part.status);
+  return detectRunning({
+    status: partStatus ?? props.status,
+    result: props.result,
+    streamRunning
+  });
+}
+function formatToolLabel(toolName) {
+  return toolName.replace(/_/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").toLowerCase();
+}
+function formatToolResult(result) {
   if (typeof result === "string") return result;
   try {
     return JSON.stringify(result, null, 2);
@@ -2967,32 +3285,172 @@ function formatResult(result) {
     return String(result);
   }
 }
-var ToolFallback = (0, import_react19.memo)(
+var TimelineActionLabel = ({ action, detail, shimmer = false }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "inline-flex min-w-0 max-w-full items-baseline gap-1", children: [
+  action ? shimmer ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    Shimmer,
+    {
+      as: "span",
+      className: cn(studioTimelineShimmerActionClass, "aui-tool-shimmer"),
+      duration: 1.8,
+      spread: 2.5,
+      children: action
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: studioTimelineActionClass, children: action }) : null,
+  detail ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: studioTimelineDetailClass, children: detail }) : null
+] });
+var TimelineHoverChevron = ({ expanded }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  import_lucide_react5.ChevronRightIcon,
+  {
+    className: studioTimelineChevronClass(expanded),
+    "aria-hidden": true
+  }
+);
+var ToolPanel = ({ toolName, argsText, result, isError }) => {
+  const [open, setOpen] = (0, import_react20.useState)(false);
+  const detail = formatToolLabel(toolName);
+  const formattedArgs = (0, import_react20.useMemo)(() => {
+    if (!argsText || argsText === "{}") return null;
+    try {
+      return JSON.stringify(JSON.parse(argsText), null, 2);
+    } catch {
+      return argsText;
+    }
+  }, [argsText]);
+  const formattedResult = (0, import_react20.useMemo)(() => {
+    if (result === void 0 || result === null) return null;
+    return formatToolResult(result);
+  }, [result]);
+  const hasBody = Boolean(formattedArgs || formattedResult);
+  const action = isError ? "Failed" : "Used";
+  if (!hasBody) {
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "aui-tool-row w-full min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TimelineActionLabel, { action, detail }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "aui-tool-row w-full min-w-0", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((v) => !v),
+        "aria-expanded": open,
+        "aria-label": `${action} ${detail}`,
+        className: studioTimelineRowButtonClass,
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+          "span",
+          {
+            className: cn(
+              "inline-flex min-w-0 max-w-full items-center gap-0.5",
+              studioTimelineTextClass,
+              "text-foreground"
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TimelineActionLabel, { action, detail }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TimelineHoverChevron, { expanded: open })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+      ToolBodyPresence,
+      {
+        open,
+        className: cn(studioTimelineBodyPadClass, "gap-2"),
+        children: [
+          formattedArgs ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            "div",
+            {
+              className: cn(
+                studioComposerIoWellClass,
+                "max-h-48 overflow-auto px-2.5 py-2"
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("pre", { className: "whitespace-pre-wrap break-words font-mono text-[11px] font-normal leading-relaxed text-foreground", children: formattedArgs })
+            }
+          ) : null,
+          formattedResult ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            "div",
+            {
+              className: cn(
+                studioComposerIoWellClass,
+                "max-h-48 overflow-auto px-2.5 py-2"
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("pre", { className: "whitespace-pre-wrap break-words font-mono text-[11px] font-normal leading-relaxed text-foreground", children: formattedResult })
+            }
+          ) : null
+        ]
+      }
+    )
+  ] });
+};
+var ToolFallbackImpl = ({
+  toolName,
+  argsText,
+  result,
+  status
+}) => {
+  const isRunning = useToolRunning({ status, result });
+  const isError = status?.type === "incomplete" && status.reason !== "cancelled";
+  const presenceKey = isRunning ? "running" : isError ? "error" : "complete";
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    ToolPresence,
+    {
+      presenceKey,
+      variant: isRunning ? "executing" : "settled",
+      className: "py-0.5",
+      children: isRunning ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "aui-tool-running", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        TimelineActionLabel,
+        {
+          action: "Using",
+          detail: formatToolLabel(toolName),
+          shimmer: true
+        }
+      ) }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        ToolPanel,
+        {
+          toolName,
+          argsText,
+          result,
+          isError
+        }
+      )
+    }
+  );
+};
+var ToolFallback = (0, import_react20.memo)(
   ToolFallbackImpl
 );
 ToolFallback.displayName = "ToolFallback";
 
 // src/artifacts/tool-artifact.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var ToolArtifactFallback = (props) => {
   const registry = useArtifactRegistry();
-  const isRunning = props.status?.type === "running";
+  const isRunning = useToolRunning({
+    status: props.status,
+    result: props.result
+  });
   if (!isRunning) {
     const artifact = parseArtifactFromToolResult(props.result);
     if (artifact) {
       const Renderer = registry[artifact.type];
       if (Renderer) {
-        return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Renderer, { artifact });
+        return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          ToolMotion,
+          {
+            motionKey: `artifact-${artifact.type}`,
+            className: "aui-tool-artifact",
+            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Renderer, { artifact })
+          }
+        );
       }
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ToolFallback, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ToolFallback, { ...props });
 };
 
 // src/components/composer.tsx
-var import_react20 = require("@assistant-ui/react");
+var import_react22 = require("@assistant-ui/react");
 var import_lucide_react6 = require("lucide-react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var Composer = ({
   placeholder = "Send a message...",
   showAttachments = true,
@@ -3001,21 +3459,24 @@ var Composer = ({
   noAutoFocus,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-    import_react20.ComposerPrimitive.Root,
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    import_react22.ComposerPrimitive.Root,
     {
       className: cn(
-        "aui-composer-root relative mt-3 flex w-full flex-col",
+        "aui-composer-root relative flex w-full flex-col",
         className
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
-        import_react20.ComposerPrimitive.AttachmentDropzone,
+      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+        import_react22.ComposerPrimitive.AttachmentDropzone,
         {
-          className: "aui-composer-attachment-dropzone flex w-full flex-col rounded-2xl border border-input bg-background px-1 pt-2 outline-none transition-shadow has-[textarea:focus-visible]:border-ring has-[textarea:focus-visible]:ring-2 has-[textarea:focus-visible]:ring-ring/20 data-[dragging=true]:border-ring data-[dragging=true]:border-dashed data-[dragging=true]:bg-accent/50",
+          className: cn(
+            studioComposeInputShellClass,
+            "data-[dragging=true]:border-2 data-[dragging=true]:border-dashed data-[dragging=true]:border-primary data-[dragging=true]:bg-accent/50"
+          ),
           children: [
-            showAttachments && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ComposerAttachments, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ComposerInput, { placeholder, autoFocus: !noAutoFocus }),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            showAttachments && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ComposerAttachments, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ComposerInput, { placeholder, autoFocus: !noAutoFocus }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
               ComposerToolbar,
               {
                 showAttachments,
@@ -3033,7 +3494,7 @@ var ComposerInput = ({
   placeholder,
   autoFocus
 }) => {
-  const composer = (0, import_react20.useComposerRuntime)();
+  const composer = (0, import_react22.useComposerRuntime)();
   const onKeyDown = (e) => {
     if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
       e.preventDefault();
@@ -3045,11 +3506,11 @@ var ComposerInput = ({
     el.style.height = "auto";
     el.style.height = `${Math.min(el.scrollHeight, 240)}px`;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-    import_react20.ComposerPrimitive.Input,
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    import_react22.ComposerPrimitive.Input,
     {
       placeholder,
-      className: "aui-composer-input mb-1 max-h-60 min-h-12 w-full resize-none bg-transparent px-4 pt-2 pb-3 text-sm outline-none placeholder:text-muted-foreground focus-visible:ring-0",
+      className: "aui-composer-input max-h-60 min-h-14 w-full resize-none bg-transparent px-3 pt-3 pb-1 text-sm outline-none placeholder:text-muted-foreground/70 focus-visible:ring-0",
       rows: 1,
       autoFocus,
       "aria-label": "Message input",
@@ -3059,96 +3520,92 @@ var ComposerInput = ({
   );
 };
 var ComposerToolbar = ({ showAttachments, toolbar, sendTooltip }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "aui-composer-action-wrapper relative mx-2 mb-2 flex items-center gap-1", children: [
-    showAttachments && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ComposerAddAttachment, {}),
-    toolbar,
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex-1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ComposerSendOrCancel, { sendTooltip })
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "aui-composer-action-wrapper flex items-center justify-between gap-1 px-2.5 pb-2.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center gap-1", children: [
+      showAttachments && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ComposerAddAttachment, {}),
+      toolbar
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ComposerSendOrCancel, { sendTooltip })
   ] });
 };
 var ComposerSendOrCancel = ({ sendTooltip }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react20.AuiIf, { condition: (s) => !s.thread.isRunning, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react20.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react22.AuiIf, { condition: (s) => !s.thread.isRunning, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react22.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       TooltipIconButton,
       {
         tooltip: sendTooltip,
-        side: "bottom",
+        variant: "primary",
         type: "submit",
-        variant: "default",
-        size: "icon",
-        className: "aui-composer-send size-8 rounded-full",
+        className: "aui-composer-send shrink-0 disabled:opacity-30",
         "aria-label": "Send message",
-        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react6.ArrowUpIcon, { className: "aui-composer-send-icon size-4" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react6.ArrowUpIcon, { className: "aui-composer-send-icon size-4" })
       }
     ) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react20.AuiIf, { condition: (s) => s.thread.isRunning, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react20.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-      Button,
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react22.AuiIf, { condition: (s) => s.thread.isRunning, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react22.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      TooltipIconButton,
       {
-        type: "button",
-        variant: "default",
-        size: "icon",
-        className: "aui-composer-cancel size-8 rounded-full",
+        tooltip: "Stop generating",
+        variant: "primary",
+        className: "aui-composer-cancel shrink-0",
         "aria-label": "Stop generating",
-        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react6.SquareIcon, { className: "aui-composer-cancel-icon size-3 fill-current" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react6.SquareIcon, { className: "aui-composer-cancel-icon size-3 fill-current" })
       }
     ) }) })
   ] });
 };
 
 // src/components/suggestions.tsx
-var import_react21 = require("react");
-var import_react22 = require("@assistant-ui/react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_react23 = require("react");
+var import_react24 = require("@assistant-ui/react");
+var import_lucide_react7 = require("lucide-react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var Suggestions = ({
   suggestions,
-  layout = "grid",
   className
 }) => {
   const items = useResolvedSuggestions(suggestions);
   if (!items || items.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "div",
     {
       className: cn(
-        "aui-thread-suggestions w-full pb-4",
-        layout === "grid" ? "grid gap-2 @md:grid-cols-2" : "flex gap-2 overflow-x-auto pb-1 [&::-webkit-scrollbar]:hidden",
+        "aui-thread-suggestions flex w-full flex-col gap-2 pb-2.5",
         className
       ),
-      children: items.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SuggestionChip, { suggestion: s, compact: layout === "row" }, s.title + i))
+      role: "list",
+      "aria-label": "Suggested prompts",
+      children: items.map((suggestion, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SuggestionRow, { suggestion }, (suggestion.prompt ?? suggestion.title) + i))
     }
   );
 };
-var SuggestionChip = ({
-  suggestion,
-  compact
-}) => {
-  const runtime = (0, import_react22.useThreadRuntime)();
+var SuggestionRow = ({ suggestion }) => {
+  const runtime = (0, import_react24.useThreadRuntime)();
   const onClick = () => {
     const text = suggestion.prompt ?? suggestion.title;
     runtime.append({ role: "user", content: [{ type: "text", text }] });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "aui-thread-suggestion-display fade-in slide-in-from-bottom-2 animate-in fill-mode-both duration-200", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-    Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+    "button",
     {
-      variant: "ghost",
+      type: "button",
+      role: "listitem",
       onClick,
-      className: cn(
-        "aui-thread-suggestion h-auto rounded-2xl border text-left text-sm transition-colors hover:bg-muted",
-        compact ? "shrink-0 flex-row items-center gap-2 whitespace-nowrap px-3 py-2" : "w-full flex-wrap items-start justify-start gap-1 px-4 py-3 @md:flex-col"
-      ),
+      className: cn("aui-thread-suggestion", studioListRowButtonClass),
       children: [
-        suggestion.icon && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "aui-thread-suggestion-icon shrink-0 text-muted-foreground", children: suggestion.icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "aui-thread-suggestion-text-1 font-medium", children: suggestion.title }),
-        suggestion.description && !compact && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "aui-thread-suggestion-text-2 text-muted-foreground", children: suggestion.description })
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "aui-thread-suggestion-icon shrink-0 text-muted-foreground", children: suggestion.icon ?? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react7.ArrowUpIcon, { className: "size-4", strokeWidth: 1.75, "aria-hidden": true }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "aui-thread-suggestion-text min-w-0 flex-1 text-left", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "aui-thread-suggestion-text-1 block truncate text-sm font-normal text-foreground", children: suggestion.title }),
+          suggestion.description && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "aui-thread-suggestion-text-2 mt-0.5 block truncate text-xs text-muted-foreground", children: suggestion.description })
+        ] })
       ]
     }
-  ) });
+  );
 };
 function useResolvedSuggestions(source) {
-  const [resolved, setResolved] = (0, import_react21.useState)(
+  const [resolved, setResolved] = (0, import_react23.useState)(
     () => Array.isArray(source) ? source : void 0
   );
-  (0, import_react21.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (!source) {
       setResolved(void 0);
       return;
@@ -3167,13 +3624,80 @@ function useResolvedSuggestions(source) {
       cancelled = true;
     };
   }, [source]);
-  return (0, import_react21.useMemo)(() => resolved, [resolved]);
+  return (0, import_react23.useMemo)(() => resolved, [resolved]);
+}
+
+// src/design/theme-sanity.ts
+var scheduled = false;
+var warned = false;
+function isDev() {
+  if (typeof process !== "undefined" && process.env?.NODE_ENV === "production") {
+    return false;
+  }
+  return true;
+}
+function parseLuminance(color) {
+  const value = color.trim();
+  if (!value) return null;
+  const oklch = value.match(/oklch\(\s*([0-9.]+)/i);
+  if (oklch) {
+    const lightness = Number.parseFloat(oklch[1]);
+    if (Number.isFinite(lightness)) return lightness;
+  }
+  const rgb = value.match(/rgba?\(\s*([0-9.]+)[\s,]+([0-9.]+)[\s,]+([0-9.]+)/i);
+  if (rgb) {
+    const r = Number.parseFloat(rgb[1]) / 255;
+    const g = Number.parseFloat(rgb[2]) / 255;
+    const b = Number.parseFloat(rgb[3]) / 255;
+    if ([r, g, b].every(Number.isFinite)) {
+      return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+    }
+  }
+  const hsl = value.match(/hsla?\(\s*[0-9.]+[\s,]+[0-9.]+%[\s,]+([0-9.]+)%/i);
+  if (hsl) {
+    const lightness = Number.parseFloat(hsl[1]) / 100;
+    if (Number.isFinite(lightness)) return lightness;
+  }
+  return null;
+}
+function runCheck() {
+  if (warned) return;
+  if (typeof window === "undefined" || typeof document === "undefined") return;
+  const root = document.documentElement;
+  const styles = window.getComputedStyle(root);
+  const background = styles.getPropertyValue("--background").trim();
+  if (!background) {
+    warned = true;
+    console.warn(
+      '[@timbal-ai/timbal-react] No `--background` CSS variable found on `<html>`. Did you `import "@timbal-ai/timbal-react/styles.css"` in your app entry? Components rely on semantic tokens (bg-background, text-foreground, \u2026) and will fall back to browser defaults.'
+    );
+    return;
+  }
+  const luminance = parseLuminance(background);
+  if (luminance === null) return;
+  const hasDarkClass = root.classList.contains("dark");
+  const looksDark = luminance < 0.5;
+  if (hasDarkClass !== looksDark) {
+    warned = true;
+    console.warn(
+      `[@timbal-ai/timbal-react] Theme mismatch detected. \`<html>\` has${hasDarkClass ? "" : " no"} \`.dark\` class but the resolved \`--background\` is ${looksDark ? "dark" : "light"} (${background}). This usually means the consumer's CSS overrides \`--background\` only in one mode. Import \`@timbal-ai/timbal-react/styles.css\` for a complete light + dark token set, or declare matching \`:root\` AND \`.dark\` blocks in your own CSS.`
+    );
+  }
+}
+function scheduleThemeSanityCheck() {
+  if (scheduled) return;
+  if (!isDev()) return;
+  if (typeof window === "undefined") return;
+  scheduled = true;
+  if (typeof queueMicrotask === "function") {
+    queueMicrotask(() => setTimeout(runCheck, 0));
+  } else {
+    setTimeout(runCheck, 0);
+  }
 }
 
 // src/components/thread.tsx
-var import_react23 = require("@assistant-ui/react");
-var import_lucide_react7 = require("lucide-react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var Thread = ({
   className,
   maxWidth = "44rem",
@@ -3191,27 +3715,30 @@ var Thread = ({
   const EditComposerSlot = components?.EditComposer ?? EditComposer;
   const ScrollToBottomSlot = components?.ScrollToBottom ?? ThreadScrollToBottom;
   const SuggestionsSlot = components?.Suggestions ?? Suggestions;
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  (0, import_react25.useEffect)(() => {
+    scheduleThemeSanityCheck();
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     ArtifactRegistryProvider,
     {
       renderers: artifacts?.renderers,
       override: artifacts?.override,
-      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(UiEventProvider, { onEvent: onArtifactEvent ?? (() => {
-      }), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-        import_react23.ThreadPrimitive.Root,
+      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(UiEventProvider, { onEvent: onArtifactEvent ?? (() => {
+      }), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        import_react26.ThreadPrimitive.Root,
         {
           className: cn(
             "aui-root aui-thread-root @container flex h-full flex-col bg-background",
             className
           ),
           style: { ["--thread-max-width"]: maxWidth },
-          children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
-            import_react23.ThreadPrimitive.Viewport,
+          children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+            import_react26.ThreadPrimitive.Viewport,
             {
               turnAnchor: "bottom",
               className: "aui-thread-viewport relative flex flex-1 flex-col overflow-x-auto overflow-y-scroll px-4 pt-4",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   WelcomeSlot,
                   {
                     config: welcome,
@@ -3219,8 +3746,8 @@ var Thread = ({
                     Suggestions: SuggestionsSlot
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-                  import_react23.ThreadPrimitive.Messages,
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  import_react26.ThreadPrimitive.Messages,
                   {
                     components: {
                       UserMessage: UserMessageSlot,
@@ -3229,9 +3756,9 @@ var Thread = ({
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react23.ThreadPrimitive.ViewportFooter, { className: "aui-thread-viewport-footer sticky bottom-0 mx-auto mt-auto flex w-full max-w-(--thread-max-width) flex-col gap-4 overflow-visible rounded-t-3xl bg-background pb-4 md:pb-6", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ScrollToBottomSlot, {}),
-                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ComposerSlot, { placeholder: composerPlaceholder })
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react26.ThreadPrimitive.ViewportFooter, { className: "aui-thread-viewport-footer sticky bottom-0 mx-auto mt-auto flex w-full max-w-(--thread-max-width) flex-col gap-4 overflow-visible bg-transparent pb-4 md:pb-6", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ScrollToBottomSlot, {}),
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ComposerSlot, { placeholder: composerPlaceholder })
                 ] })
               ]
             }
@@ -3242,105 +3769,164 @@ var Thread = ({
   );
 };
 var ThreadScrollToBottom = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react23.ThreadPrimitive.ScrollToBottom, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react26.ThreadPrimitive.ScrollToBottom, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     TooltipIconButton,
     {
       tooltip: "Scroll to bottom",
-      variant: "outline",
-      className: "aui-thread-scroll-to-bottom absolute -top-12 z-10 self-center rounded-full p-4 disabled:invisible dark:bg-background dark:hover:bg-accent",
-      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react7.ArrowDownIcon, {})
+      variant: "secondary",
+      className: "aui-thread-scroll-to-bottom absolute -top-12 z-10 self-center disabled:invisible",
+      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react8.ArrowDownIcon, { className: "size-4" })
     }
   ) });
 };
+var welcomeStagger = {
+  initial: {},
+  animate: {
+    transition: { staggerChildren: 0.16, delayChildren: 0.12 }
+  }
+};
+var welcomeItem = {
+  initial: { opacity: 0, y: 14 },
+  animate: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.9, ease: luxuryEase }
+  }
+};
+var welcomeIcon = {
+  initial: { opacity: 0, y: 10, scale: 0.96 },
+  animate: {
+    opacity: 1,
+    y: 0,
+    scale: 1,
+    transition: { duration: 1.1, ease: luxuryEase }
+  }
+};
 var ThreadWelcome = ({
   config,
   suggestions,
   Suggestions: SuggestionsSlot = Suggestions
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react23.AuiIf, { condition: (s) => s.thread.isEmpty, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "aui-thread-welcome-root mx-auto my-auto flex w-full max-w-(--thread-max-width) grow flex-col", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "aui-thread-welcome-center flex w-full grow flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "aui-thread-welcome-message flex size-full flex-col items-center justify-center px-4 text-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "fade-in animate-in fill-mode-both relative mb-6 flex size-14 items-center justify-center duration-300", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "animate-ai-ring-glow absolute inset-0 rounded-2xl bg-gradient-to-br from-primary/15 to-primary/5 ring-1 ring-primary/15" }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "animate-ai-pulse-ring absolute inset-0" }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-          "svg",
-          {
-            xmlns: "http://www.w3.org/2000/svg",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "1.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            className: "animate-ai-breathe relative size-7 text-primary/75",
-            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h1", { className: "aui-thread-welcome-message-inner fade-in slide-in-from-bottom-1 animate-in fill-mode-both font-semibold text-2xl duration-200", children: config?.heading ?? "How can I help you today?" }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "aui-thread-welcome-message-inner fade-in slide-in-from-bottom-1 animate-in fill-mode-both text-muted-foreground mt-2 delay-75 duration-200", children: config?.subheading ?? "Send a message to start a conversation." })
-    ] }) }),
-    suggestions && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SuggestionsSlot, { suggestions })
-  ] }) });
+  const isEmpty = (0, import_react26.useThread)((s) => s.messages.length === 0);
+  if (!isEmpty) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "aui-thread-welcome-root mx-auto my-auto flex w-full max-w-(--thread-max-width) grow flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "aui-thread-welcome-center flex w-full grow flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+      import_react27.motion.div,
+      {
+        className: "aui-thread-welcome-message flex flex-col items-center justify-center px-4 text-center",
+        variants: welcomeStagger,
+        initial: "initial",
+        animate: "animate",
+        children: [
+          config?.icon && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react27.motion.div, { variants: welcomeIcon, className: "mb-5", children: config.icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            import_react27.motion.h1,
+            {
+              variants: welcomeItem,
+              className: "aui-thread-welcome-message-inner font-semibold text-2xl",
+              children: config?.heading ?? "How can I help you today?"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            import_react27.motion.p,
+            {
+              variants: welcomeItem,
+              className: "aui-thread-welcome-message-inner mt-2 text-muted-foreground",
+              children: config?.subheading ?? "Send a message to start a conversation."
+            }
+          )
+        ]
+      }
+    ) }),
+    suggestions && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "aui-thread-welcome-suggestions mx-auto w-full max-w-(--thread-max-width) px-2", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SuggestionsSlot, { suggestions }) })
+  ] });
 };
 var MessageError = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react23.MessagePrimitive.Error, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react23.ErrorPrimitive.Root, { className: "aui-message-error-root mt-2 rounded-md border border-destructive bg-destructive/10 p-3 text-destructive text-sm dark:bg-destructive/5 dark:text-red-200", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react23.ErrorPrimitive.Message, { className: "aui-message-error-message line-clamp-2" }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react26.MessagePrimitive.Error, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react26.ErrorPrimitive.Root, { className: "aui-message-error-root mt-2 rounded-md border border-destructive bg-destructive/10 p-3 text-destructive text-sm", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react26.ErrorPrimitive.Message, { className: "aui-message-error-message line-clamp-2" }) }) });
 };
 var AssistantMessage = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
-    import_react23.MessagePrimitive.Root,
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    import_react26.MessagePrimitive.Root,
     {
       className: "aui-assistant-message-root fade-in slide-in-from-bottom-1 relative mx-auto w-full max-w-(--thread-max-width) animate-in py-3 duration-150",
       "data-role": "assistant",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "aui-assistant-message-content wrap-break-word px-2 text-foreground leading-relaxed", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-            import_react23.MessagePrimitive.Parts,
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "aui-assistant-message-content wrap-break-word px-2 text-foreground leading-relaxed", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            import_react26.MessagePrimitive.Parts,
             {
               components: {
                 Text: MarkdownText,
-                tools: { Fallback: ToolArtifactFallback }
+                // `Override` (not `Fallback`) replaces the default tool renderer
+                // entirely so we never fall back to the assistant-ui boilerplate.
+                tools: { Override: ToolArtifactFallback }
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(MessageError, {})
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MessageError, {})
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "aui-assistant-message-footer mt-1 ml-2 flex", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(AssistantActionBar, {}) })
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "aui-assistant-message-footer mt-0 ml-1 flex", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(AssistantActionBar, {}) })
       ]
     }
   );
 };
+var ASSISTANT_ACTION_ICON_CLASS = cn(
+  "size-6 min-h-6 min-w-6 text-muted-foreground/45 hover:text-muted-foreground/80",
+  // The v2 fill span sits inside `group/tbv2 > span:first-child`. We mute it
+  // here so action-bar buttons read as subtle icons rather than full pills.
+  "[&>span:first-child]:bg-transparent",
+  "[&>span:first-child]:group-hover/tbv2:bg-muted/70"
+);
 var AssistantActionBar = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
-    import_react23.ActionBarPrimitive.Root,
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    import_react26.ActionBarPrimitive.Root,
     {
       hideWhenRunning: true,
       autohide: "not-last",
-      autohideFloat: "single-branch",
-      className: "aui-assistant-action-bar-root col-start-3 row-start-2 -ml-1 flex gap-1 text-muted-foreground data-floating:absolute data-floating:rounded-md data-floating:border data-floating:bg-background data-floating:p-1 data-floating:shadow-sm",
+      className: "aui-assistant-action-bar-root flex items-center gap-0 bg-transparent px-0 py-0.5 text-muted-foreground/60",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react23.ActionBarPrimitive.Copy, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(TooltipIconButton, { tooltip: "Copy", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react23.AuiIf, { condition: (s) => s.message.isCopied, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react7.CheckIcon, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react23.AuiIf, { condition: (s) => !s.message.isCopied, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react7.CopyIcon, {}) })
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react23.ActionBarPrimitive.Reload, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipIconButton, { tooltip: "Refresh", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react7.RefreshCwIcon, {}) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react23.ActionBarMorePrimitive.Root, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react23.ActionBarMorePrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react26.ActionBarPrimitive.Copy, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+          TooltipIconButton,
+          {
+            tooltip: "Copy",
+            variant: "ghost",
+            className: ASSISTANT_ACTION_ICON_CLASS,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react26.AuiIf, { condition: (s) => s.message.isCopied, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react8.CheckIcon, { className: "size-3" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react26.AuiIf, { condition: (s) => !s.message.isCopied, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react8.CopyIcon, { className: "size-3" }) })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react26.ActionBarPrimitive.Reload, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          TooltipIconButton,
+          {
+            tooltip: "Regenerate",
+            variant: "ghost",
+            className: ASSISTANT_ACTION_ICON_CLASS,
+            children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react8.RefreshCwIcon, { className: "size-3" })
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react26.ActionBarMorePrimitive.Root, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react26.ActionBarMorePrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             TooltipIconButton,
             {
               tooltip: "More",
-              className: "data-[state=open]:bg-accent",
-              children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react7.MoreHorizontalIcon, {})
+              variant: "ghost",
+              className: cn(
+                ASSISTANT_ACTION_ICON_CLASS,
+                "data-[state=open]:text-muted-foreground/80"
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react8.MoreHorizontalIcon, { className: "size-3" })
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-            import_react23.ActionBarMorePrimitive.Content,
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            import_react26.ActionBarMorePrimitive.Content,
             {
               side: "bottom",
               align: "start",
-              className: "aui-action-bar-more-content z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
-              children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react23.ActionBarPrimitive.ExportMarkdown, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react23.ActionBarMorePrimitive.Item, { className: "aui-action-bar-more-item flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react7.DownloadIcon, { className: "size-4" }),
+              className: "aui-action-bar-more-content z-50 min-w-36 overflow-hidden rounded-lg border border-border bg-popover p-1 text-popover-foreground shadow-card-elevated",
+              children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react26.ActionBarPrimitive.ExportMarkdown, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react26.ActionBarMorePrimitive.Item, { className: "aui-action-bar-more-item flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none hover:bg-muted focus:bg-muted", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react8.DownloadIcon, { className: "size-4 shrink-0" }),
                 "Export as Markdown"
               ] }) })
             }
@@ -3350,51 +3936,71 @@ var AssistantActionBar = () => {
     }
   );
 };
+var UserMessageText = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "whitespace-pre-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react26.MessagePartPrimitive.Text, { smooth: false }) });
+};
 var UserMessage = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
-    import_react23.MessagePrimitive.Root,
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    import_react26.MessagePrimitive.Root,
     {
-      className: "aui-user-message-root fade-in slide-in-from-bottom-1 mx-auto grid w-full max-w-(--thread-max-width) animate-in auto-rows-auto grid-cols-[minmax(72px,1fr)_auto] content-start gap-y-2 px-2 py-3 duration-150 [&:where(>*)]:col-start-2",
+      className: "aui-user-message-root mx-auto flex w-full max-w-(--thread-max-width) flex-col items-end gap-2 px-2 py-3",
       "data-role": "user",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(UserMessageAttachments, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "aui-user-message-content-wrapper relative col-start-2 min-w-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "aui-user-message-content wrap-break-word rounded-2xl bg-muted px-4 py-2.5 text-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react23.MessagePrimitive.Parts, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "aui-user-action-bar-wrapper absolute top-1/2 left-0 -translate-x-full -translate-y-1/2 pr-2", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(UserActionBar, {}) })
-        ] })
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(UserMessageAttachments, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+          import_react27.motion.div,
+          {
+            className: "aui-user-message-content relative inline-block max-w-[80%] rounded-2xl bg-bubble-user px-4 py-2.5 text-bubble-user-foreground",
+            initial: { opacity: 0, y: 8, scale: 0.99 },
+            animate: { opacity: 1, y: 0, scale: 1 },
+            transition: { duration: 0.65, ease: luxuryEase },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react26.MessagePrimitive.Parts, { components: { Text: UserMessageText } }),
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "aui-user-action-bar-wrapper absolute top-1/2 left-0 -translate-x-full -translate-y-1/2 pr-2", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(UserActionBar, {}) })
+            ]
+          }
+        )
       ]
     }
   );
 };
 var UserActionBar = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-    import_react23.ActionBarPrimitive.Root,
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    import_react26.ActionBarPrimitive.Root,
     {
       hideWhenRunning: true,
       autohide: "not-last",
       className: "aui-user-action-bar-root flex flex-col items-end",
-      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react23.ActionBarPrimitive.Edit, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipIconButton, { tooltip: "Edit", className: "aui-user-action-edit p-4", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react7.PencilIcon, {}) }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react26.ActionBarPrimitive.Edit, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        TooltipIconButton,
+        {
+          tooltip: "Edit",
+          variant: "ghost",
+          className: ASSISTANT_ACTION_ICON_CLASS,
+          children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react8.PencilIcon, { className: "size-3" })
+        }
+      ) })
     }
   );
 };
 var EditComposer = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react23.MessagePrimitive.Root, { className: "aui-edit-composer-wrapper mx-auto flex w-full max-w-(--thread-max-width) flex-col px-2 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react23.ComposerPrimitive.Root, { className: "aui-edit-composer-root ml-auto flex w-full max-w-[85%] flex-col rounded-2xl bg-muted", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-      import_react23.ComposerPrimitive.Input,
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react26.MessagePrimitive.Root, { className: "aui-edit-composer-wrapper mx-auto flex w-full max-w-(--thread-max-width) flex-col px-2 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react26.ComposerPrimitive.Root, { className: "aui-edit-composer-root ml-auto flex w-full max-w-[85%] flex-col rounded-2xl bg-muted", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      import_react26.ComposerPrimitive.Input,
       {
         className: "aui-edit-composer-input min-h-14 w-full resize-none bg-transparent p-4 text-foreground text-sm outline-none",
         autoFocus: true
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "aui-edit-composer-footer mx-3 mb-3 flex items-center gap-2 self-end", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react23.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Button, { variant: "ghost", size: "sm", children: "Cancel" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react23.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Button, { size: "sm", children: "Update" }) })
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "aui-edit-composer-footer mx-3 mb-3 flex items-center gap-2 self-end", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react26.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TimbalV2Button, { variant: "ghost", size: "sm", children: "Cancel" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react26.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TimbalV2Button, { variant: "primary", size: "sm", children: "Update" }) })
     ] })
   ] }) });
 };
 
 // src/components/chat.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function TimbalChat({
   workforceId,
   baseUrl,
@@ -3405,7 +4011,7 @@ function TimbalChat({
   debug,
   ...threadProps
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     TimbalRuntimeProvider,
     {
       workforceId,
@@ -3415,23 +4021,1598 @@ function TimbalChat({
       attachmentsUploadUrl,
       attachmentsAccept,
       debug,
-      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Thread, { ...threadProps })
+      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Thread, { ...threadProps })
     }
   );
 }
 
-// src/artifacts/agent-instructions.ts
-var ARTIFACT_AGENT_INSTRUCTIONS = `
-## Rich artifacts (Timbal chat UI)
-
-When you need charts, tables, choice widgets, or interactive controls, return a **JSON artifact object** instead of plain prose. The chat UI renders these automatically.
+// src/components/workforce-selector.tsx
+var import_lucide_react9 = require("lucide-react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var WorkforceSelector = ({
+  workforces,
+  value,
+  onChange,
+  hideWhenSingle = true,
+  className,
+  placeholder = "Select agent"
+}) => {
+  if (workforces.length === 0) return null;
+  if (hideWhenSingle && workforces.length === 1) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    "div",
+    {
+      className: cn(
+        "aui-workforce-selector relative inline-flex items-center",
+        studioTopbarPillHeightClass,
+        studioSecondaryChromeClass,
+        "rounded-full",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+          "select",
+          {
+            className: "aui-workforce-selector-input h-full cursor-pointer appearance-none rounded-full border-none bg-transparent pr-8 pl-3.5 text-sm font-medium text-foreground outline-none focus:outline-none",
+            value,
+            onChange: (e) => onChange(e.target.value),
+            "aria-label": placeholder,
+            children: [
+              !value && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("option", { value: "", children: placeholder }),
+              workforces.map((w) => {
+                const id = idOf(w);
+                return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("option", { value: id, children: w.name ?? id }, id);
+              })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          import_lucide_react9.ChevronDownIcon,
+          {
+            className: "aui-workforce-selector-icon pointer-events-none absolute right-3 size-3.5 text-muted-foreground/70",
+            "aria-hidden": true
+          }
+        )
+      ]
+    }
+  );
+};
+function idOf(item) {
+  return item.id ?? item.uid ?? item.name ?? "";
+}
 
-### Delivery channels (either works)
+// src/hooks/use-workforces.ts
+var import_react28 = require("react");
+function useWorkforces(options = {}) {
+  const { baseUrl = "/api", fetch: fetchFn, pickInitial, enabled = true } = options;
+  const [workforces, setWorkforces] = (0, import_react28.useState)([]);
+  const [selectedId, setSelectedId] = (0, import_react28.useState)("");
+  const [isLoading, setIsLoading] = (0, import_react28.useState)(enabled);
+  const [error, setError] = (0, import_react28.useState)(null);
+  const fetchFnRef = (0, import_react28.useRef)(fetchFn ?? authFetch);
+  (0, import_react28.useEffect)(() => {
+    fetchFnRef.current = fetchFn ?? authFetch;
+  }, [fetchFn]);
+  const pickInitialRef = (0, import_react28.useRef)(pickInitial);
+  (0, import_react28.useEffect)(() => {
+    pickInitialRef.current = pickInitial;
+  }, [pickInitial]);
+  const load = (0, import_react28.useMemo)(() => {
+    return async () => {
+      if (!enabled) {
+        setIsLoading(false);
+        return;
+      }
+      setIsLoading(true);
+      setError(null);
+      try {
+        const res = await fetchFnRef.current(`${baseUrl}/workforce`);
+        if (!res.ok) throw new Error(`Failed to load workforces (${res.status})`);
+        const data = await res.json();
+        setWorkforces(data);
+        setSelectedId((current) => {
+          if (current && data.some((w) => idOf2(w) === current)) return current;
+          const initial = pickInitialRef.current?.(data) ?? data.find((w) => w.type === "agent") ?? data[0];
+          return initial ? idOf2(initial) : "";
+        });
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error(String(err)));
+      } finally {
+        setIsLoading(false);
+      }
+    };
+  }, [baseUrl, enabled]);
+  (0, import_react28.useEffect)(() => {
+    load();
+  }, [load]);
+  const selected = (0, import_react28.useMemo)(
+    () => workforces.find((w) => idOf2(w) === selectedId),
+    [workforces, selectedId]
+  );
+  return {
+    workforces,
+    selectedId,
+    setSelectedId,
+    selected,
+    isLoading,
+    error,
+    refresh: load
+  };
+}
+function idOf2(item) {
+  return item.id ?? item.uid ?? item.name ?? "";
+}
 
-1. **Tool result (preferred)** \u2014 return a single JSON object (or a JSON string) from a tool. The object must include a string \`type\` field.
-2. **Inline markdown fence** \u2014 embed the same JSON inside a fenced block:
+// src/design/tokens.ts
+var SIDEBAR_WIDTH_PX = 224;
+var SIDEBAR_WIDTH_COLLAPSED_PX = 52;
+var SIDEBAR_MOBILE_PX = 272;
+var SIDEBAR_GAP_PX = 12;
+var SIDEBAR_CONTENT_GAP_PX = 8;
+var TOPBAR_GAP_PX = 8;
+var TOPBAR_HEIGHT_PX = 48;
+var PILL_HEIGHT_PX = 40;
+var SIDEBAR_INSET_PX_EXPANDED = SIDEBAR_GAP_PX + SIDEBAR_WIDTH_PX + SIDEBAR_CONTENT_GAP_PX;
+var SIDEBAR_INSET_PX_COLLAPSED = SIDEBAR_GAP_PX + SIDEBAR_WIDTH_COLLAPSED_PX + SIDEBAR_CONTENT_GAP_PX;
+var px = (n) => `${n / 16}rem`;
+var SIDEBAR_WIDTH = px(SIDEBAR_WIDTH_PX);
+var SIDEBAR_WIDTH_COLLAPSED = px(SIDEBAR_WIDTH_COLLAPSED_PX);
+var SIDEBAR_GAP = px(SIDEBAR_GAP_PX);
+var SIDEBAR_CONTENT_GAP = px(SIDEBAR_CONTENT_GAP_PX);
+var TOPBAR_GAP = px(TOPBAR_GAP_PX);
+var TOPBAR_HEIGHT = px(TOPBAR_HEIGHT_PX);
+var PILL_HEIGHT = px(PILL_HEIGHT_PX);
+var SIDEBAR_INSET_EXPANDED = px(SIDEBAR_INSET_PX_EXPANDED);
+var SIDEBAR_INSET_COLLAPSED = px(SIDEBAR_INSET_PX_COLLAPSED);
+var studioChromeShellStyle = {
+  "--studio-topbar-gap": TOPBAR_GAP,
+  "--studio-topbar-height": TOPBAR_HEIGHT,
+  "--studio-chrome-pill-height": PILL_HEIGHT,
+  "--studio-inset-top": `calc(${TOPBAR_GAP} + ${TOPBAR_HEIGHT})`,
+  "--studio-sidebar-gap": SIDEBAR_GAP,
+  "--studio-sidebar-width": SIDEBAR_WIDTH,
+  "--studio-sidebar-width-collapsed": SIDEBAR_WIDTH_COLLAPSED,
+  "--studio-sidebar-content-gap": SIDEBAR_CONTENT_GAP,
+  "--studio-inset-left": SIDEBAR_INSET_EXPANDED,
+  "--studio-inset-left-collapsed": SIDEBAR_INSET_COLLAPSED
+};
+var STORAGE_KEYS = {
+  sidebarCollapsed: "timbal-studio-sidebar-collapsed"
+};
+var DOM_IDS = {
+  sidebarRuntimeAnchor: "timbal-studio-sidebar-runtime-anchor",
+  topbarBrandAnchor: "timbal-studio-topbar-brand-anchor"
+};
 
-\`\`\`timbal-artifact
+// src/components/chat-shell.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var TimbalChatShell = ({
+  workforceId,
+  brand,
+  headerActions,
+  hideWorkforceSelector,
+  className,
+  headerClassName,
+  baseUrl,
+  fetch: fetch2,
+  ...chatProps
+}) => {
+  const { workforces, selectedId, setSelectedId } = useWorkforces({
+    baseUrl,
+    fetch: fetch2
+  });
+  const effectiveId = workforceId ?? selectedId;
+  const showSelector = !hideWorkforceSelector && !workforceId && workforces.length > 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+    "div",
+    {
+      className: cn(
+        "aui-chat-shell relative flex h-dvh flex-col overflow-hidden bg-background",
+        className
+      ),
+      style: studioChromeShellStyle,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          "div",
+          {
+            className: cn(
+              "pointer-events-none absolute inset-0 z-0",
+              studioPlaygroundGradientClass
+            ),
+            "aria-hidden": true
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+          "header",
+          {
+            className: cn(
+              "aui-chat-shell-header relative z-10 flex shrink-0 items-center justify-between px-4 pt-[var(--studio-topbar-gap)] pb-2",
+              headerClassName
+            ),
+            style: { minHeight: "var(--studio-topbar-height)" },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex min-w-0 items-center gap-2", children: [
+                brand,
+                showSelector && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                  WorkforceSelector,
+                  {
+                    workforces,
+                    value: selectedId,
+                    onChange: setSelectedId
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex shrink-0 items-center gap-1", children: headerActions })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          TimbalChat,
+          {
+            workforceId: effectiveId,
+            baseUrl,
+            fetch: fetch2,
+            className: "relative z-10 min-h-0 flex-1 bg-transparent",
+            ...chatProps
+          },
+          effectiveId
+        )
+      ]
+    }
+  );
+};
+
+// src/components/studio/studio-shell.tsx
+var import_react41 = require("react");
+var import_lucide_react13 = require("lucide-react");
+var import_react42 = require("motion/react");
+
+// src/design/sidebar-motion.ts
+var STUDIO_SIDEBAR_EASE_ENTER = [0, 0, 0.2, 1];
+var STUDIO_SIDEBAR_EASE_EXIT = [0.4, 0, 1, 1];
+var STUDIO_SIDEBAR_EASE = [0.16, 1, 0.3, 1];
+var STUDIO_SIDEBAR_ENTRIES_OUT_S = 0.1;
+var STUDIO_SIDEBAR_WIDTH_S = 0.17;
+var STUDIO_SIDEBAR_ENTRY_ITEM_IN_S = 0.18;
+var STUDIO_SIDEBAR_STAGGER_S = 0.03;
+var STUDIO_SIDEBAR_EXPAND_REVEAL_FRAC = 0.5;
+var STUDIO_SIDEBAR_CONTENT_NUDGE_PX = 6;
+var studioSidebarEntriesContainerVariants = {
+  hidden: {
+    opacity: 0,
+    transition: {
+      duration: STUDIO_SIDEBAR_ENTRIES_OUT_S,
+      ease: STUDIO_SIDEBAR_EASE_EXIT,
+      staggerChildren: 0
+    }
+  },
+  visible: {
+    opacity: 1,
+    transition: {
+      duration: 0.06,
+      ease: STUDIO_SIDEBAR_EASE_ENTER,
+      staggerChildren: STUDIO_SIDEBAR_STAGGER_S,
+      delayChildren: 0.02
+    }
+  }
+};
+var studioSidebarEntryItemVariants = {
+  hidden: {
+    opacity: 0,
+    x: -STUDIO_SIDEBAR_CONTENT_NUDGE_PX,
+    scale: 0.99
+  },
+  visible: {
+    opacity: 1,
+    x: 0,
+    scale: 1,
+    transition: {
+      duration: STUDIO_SIDEBAR_ENTRY_ITEM_IN_S,
+      ease: STUDIO_SIDEBAR_EASE_ENTER
+    }
+  }
+};
+function studioSidebarEntriesTransition(visible, reduced) {
+  if (reduced) return { duration: 0.01 };
+  return visible ? { duration: 0.06, ease: STUDIO_SIDEBAR_EASE_ENTER } : { duration: STUDIO_SIDEBAR_ENTRIES_OUT_S, ease: STUDIO_SIDEBAR_EASE_EXIT };
+}
+function studioSidebarWidthTransition(reduced, direction = "collapse") {
+  if (reduced) return { duration: 0.01 };
+  return {
+    duration: direction === "expand" ? STUDIO_SIDEBAR_WIDTH_S : STUDIO_SIDEBAR_WIDTH_S * 0.94,
+    ease: direction === "expand" ? STUDIO_SIDEBAR_EASE_ENTER : STUDIO_SIDEBAR_EASE_EXIT
+  };
+}
+function studioSidebarDrawerTransition(reduced) {
+  if (reduced) return { duration: 0.01 };
+  return {
+    duration: 0.22,
+    ease: STUDIO_SIDEBAR_EASE
+  };
+}
+function studioSidebarBackdropTransition(reduced) {
+  if (reduced) return { duration: 0.01 };
+  return { duration: 0.16, ease: STUDIO_SIDEBAR_EASE_EXIT };
+}
+
+// src/hooks/use-sidebar-collapse-phase.ts
+var import_react29 = require("react");
+var WIDTH_OVERLAP_FRAC = 0.7;
+function useSidebarCollapsePhase(collapsed, reducedMotion) {
+  const [widthCollapsed, setWidthCollapsed] = (0, import_react29.useState)(collapsed);
+  const [entriesVisible, setEntriesVisible] = (0, import_react29.useState)(true);
+  const collapsedTarget = (0, import_react29.useRef)(collapsed);
+  const isFirstRender = (0, import_react29.useRef)(true);
+  const widthTimerRef = (0, import_react29.useRef)(null);
+  const revealTimerRef = (0, import_react29.useRef)(null);
+  (0, import_react29.useEffect)(() => {
+    collapsedTarget.current = collapsed;
+  }, [collapsed]);
+  const clearWidthTimer = () => {
+    if (widthTimerRef.current !== null) {
+      clearTimeout(widthTimerRef.current);
+      widthTimerRef.current = null;
+    }
+  };
+  const clearRevealTimer = () => {
+    if (revealTimerRef.current !== null) {
+      clearTimeout(revealTimerRef.current);
+      revealTimerRef.current = null;
+    }
+  };
+  const applyWidthTarget = (0, import_react29.useCallback)(() => {
+    const willExpand = !collapsedTarget.current;
+    setWidthCollapsed(collapsedTarget.current);
+    clearRevealTimer();
+    if (willExpand && !reducedMotion) {
+      revealTimerRef.current = setTimeout(
+        () => setEntriesVisible(true),
+        STUDIO_SIDEBAR_WIDTH_S * 1e3 * STUDIO_SIDEBAR_EXPAND_REVEAL_FRAC
+      );
+    }
+  }, [reducedMotion]);
+  (0, import_react29.useEffect)(() => {
+    clearWidthTimer();
+    clearRevealTimer();
+    if (reducedMotion) {
+      setWidthCollapsed(collapsed);
+      setEntriesVisible(true);
+      return;
+    }
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      setWidthCollapsed(collapsed);
+      setEntriesVisible(true);
+      return;
+    }
+    setEntriesVisible(false);
+    widthTimerRef.current = setTimeout(
+      applyWidthTarget,
+      STUDIO_SIDEBAR_ENTRIES_OUT_S * 1e3 * WIDTH_OVERLAP_FRAC
+    );
+    return () => {
+      clearWidthTimer();
+      clearRevealTimer();
+    };
+  }, [collapsed, reducedMotion, applyWidthTarget]);
+  const onEntriesBlurOutComplete = (0, import_react29.useCallback)(() => {
+    applyWidthTarget();
+  }, [applyWidthTarget]);
+  const onPanelWidthComplete = (0, import_react29.useCallback)(() => {
+    clearRevealTimer();
+    setEntriesVisible(true);
+  }, []);
+  const isCollapsedRail = widthCollapsed;
+  return {
+    widthCollapsed,
+    isCollapsedRail,
+    entriesVisible,
+    onEntriesBlurOutComplete,
+    onPanelWidthComplete
+  };
+}
+
+// src/components/studio/sidebar-backdrop.tsx
+var import_react30 = require("motion/react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var StudioSidebarBackdrop = ({
+  open,
+  onClose
+}) => {
+  const reducedMotion = (0, import_react30.useReducedMotion)();
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react30.AnimatePresence, { children: open ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    import_react30.motion.button,
+    {
+      type: "button",
+      className: "fixed inset-0 z-40 bg-foreground/30 backdrop-blur-[2px] md:hidden",
+      "aria-label": "Close menu",
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      transition: studioSidebarBackdropTransition(!!reducedMotion),
+      onClick: onClose
+    }
+  ) : null });
+};
+
+// src/components/studio/sidebar-context.tsx
+var import_react31 = require("react");
+var StudioSidebarContext = (0, import_react31.createContext)({
+  collapsed: false,
+  isMobile: false,
+  isCollapsedRail: false,
+  iconOnlyLayout: false
+});
+function useStudioSidebarLayout() {
+  return (0, import_react31.useContext)(StudioSidebarContext);
+}
+
+// src/components/studio/sidebar.tsx
+var import_react35 = require("react");
+var import_react36 = require("motion/react");
+
+// src/components/studio/sidebar-entries.tsx
+var import_react32 = require("motion/react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var StudioSidebarEntries = ({
+  visible,
+  onBlurOutComplete,
+  children,
+  className
+}) => {
+  const reducedMotion = (0, import_react32.useReducedMotion)();
+  if (reducedMotion) {
+    return visible ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cn("flex min-h-0 flex-1 flex-col", className), children }) : null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    import_react32.motion.div,
+    {
+      className: cn("flex min-h-0 flex-1 flex-col", className),
+      initial: false,
+      variants: studioSidebarEntriesContainerVariants,
+      animate: visible ? "visible" : "hidden",
+      transition: studioSidebarEntriesTransition(visible, false),
+      onAnimationComplete: (definition) => {
+        if (definition === "hidden") {
+          onBlurOutComplete();
+        }
+      },
+      style: { pointerEvents: visible ? "auto" : "none" },
+      "aria-hidden": !visible,
+      children
+    }
+  );
+};
+
+// src/components/studio/sidebar-footer.tsx
+var import_lucide_react10 = require("lucide-react");
+
+// src/auth/provider.tsx
+var import_react33 = require("react");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+function isInsideIframe() {
+  try {
+    return typeof window !== "undefined" && window.self !== window.top;
+  } catch {
+    return true;
+  }
+}
+var SessionContext = (0, import_react33.createContext)(void 0);
+var useSession = () => {
+  const context = (0, import_react33.useContext)(SessionContext);
+  if (context === void 0) {
+    throw new Error("useSession must be used within a SessionProvider");
+  }
+  return context;
+};
+var useOptionalSession = () => {
+  const context = (0, import_react33.useContext)(SessionContext);
+  return context ?? null;
+};
+var SessionProvider = ({
+  children,
+  enabled = true
+}) => {
+  const [user, setUser] = (0, import_react33.useState)(null);
+  const [loading, setLoading] = (0, import_react33.useState)(enabled);
+  const [embedded] = (0, import_react33.useState)(isInsideIframe);
+  (0, import_react33.useEffect)(() => {
+    if (!enabled) {
+      setLoading(false);
+      return;
+    }
+    let ignore = false;
+    const restoreSession = async () => {
+      try {
+        const u = await fetchCurrentUser();
+        if (ignore) return;
+        if (u) {
+          setUser(u);
+          setLoading(false);
+          return;
+        }
+        if (getRefreshToken()) {
+          const ok = await refreshAccessToken();
+          if (ignore) return;
+          if (ok) {
+            const refreshedUser = await fetchCurrentUser();
+            if (ignore) return;
+            if (refreshedUser) {
+              setUser(refreshedUser);
+              setLoading(false);
+              return;
+            }
+          }
+        }
+      } catch {
+        if (ignore) return;
+        clearTokens();
+      }
+      if (!ignore && !embedded) {
+        setLoading(false);
+      }
+    };
+    restoreSession();
+    let messageCleanup;
+    if (embedded) {
+      const handleMessage = async (event) => {
+        if (ignore) return;
+        if (event.data?.type !== "timbal:auth" || !event.data.token) return;
+        setAccessToken(event.data.token);
+        if (event.data.refreshToken) {
+          setRefreshToken(event.data.refreshToken);
+        }
+        const u = await fetchCurrentUser();
+        if (!ignore) {
+          setUser(u);
+          setLoading(false);
+        }
+      };
+      window.addEventListener("message", handleMessage);
+      window.parent.postMessage({ type: "timbal:request-session" }, "*");
+      messageCleanup = () => window.removeEventListener("message", handleMessage);
+    }
+    return () => {
+      ignore = true;
+      messageCleanup?.();
+    };
+  }, [enabled, embedded]);
+  const logout = (0, import_react33.useCallback)(() => {
+    clearTokens();
+    setUser(null);
+    const returnTo = encodeURIComponent(
+      window.location.pathname + window.location.search
+    );
+    fetch("/api/auth/logout", { method: "POST" }).finally(
+      () => window.location.href = `/api/auth/login?return_to=${returnTo}`
+    );
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    SessionContext.Provider,
+    {
+      value: {
+        user,
+        loading,
+        isAuthenticated: !!user,
+        isEmbedded: embedded,
+        logout
+      },
+      children
+    }
+  );
+};
+
+// src/components/studio/sidebar-layout.ts
+function studioSidebarIconOnlyLayout(isMobile, isCollapsedRail) {
+  if (isMobile) return false;
+  return isCollapsedRail;
+}
+var studioSidebarCollapsedRailInsetClass = "box-border w-full px-1.5";
+var studioSidebarCollapsedRailChipRowClass = "flex w-full justify-center";
+function studioSidebarNavItemClasses(iconOnly, isActive) {
+  if (iconOnly) {
+    return cn(
+      studioSidebarNavItemClass,
+      studioSidebarNavItemLayout(true),
+      isActive ? studioSidebarCollapsedRailItemActiveClass : studioSidebarCollapsedRailItemIdleClass
+    );
+  }
+  return cn(
+    studioSidebarNavItemClass,
+    studioSidebarNavItemLayout(false),
+    isActive ? studioSidebarNavItemActiveClass : studioSidebarNavItemIdleClass
+  );
+}
+
+// src/components/studio/sidebar-entry-motion.tsx
+var import_react34 = require("motion/react");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var StudioSidebarEntryMotion = ({
+  children,
+  className
+}) => {
+  const reducedMotion = (0, import_react34.useReducedMotion)();
+  if (reducedMotion) {
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className, children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react34.motion.div, { variants: studioSidebarEntryItemVariants, className: cn(className), children });
+};
+
+// src/components/studio/sidebar-tooltip.tsx
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var StudioSidebarTooltip = ({
+  label,
+  enabled,
+  children
+}) => {
+  if (!enabled) return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipTrigger, { asChild: true, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipContent, { side: "right", className: "text-xs", children: label })
+  ] });
+};
+
+// src/components/studio/sidebar-footer.tsx
+var import_jsx_runtime36 = require("react/jsx-runtime");
+function userInitials(name, email) {
+  const fromName = name.trim().split(/\s+/).map((part) => part.charAt(0)).join("").slice(0, 2).toUpperCase();
+  if (fromName) return fromName;
+  return email.charAt(0).toUpperCase() || "?";
+}
+var StudioSidebarFooter = ({
+  iconOnlyLayout,
+  showTooltips,
+  onSignOut,
+  emptyCaption = null
+}) => {
+  const session = useOptionalSession();
+  const user = session?.user ?? null;
+  const handleSignOut = () => {
+    session?.logout();
+    onSignOut?.();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(StudioSidebarEntryMotion, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    "footer",
+    {
+      className: cn(
+        "mt-auto w-full shrink-0 py-2.5",
+        iconOnlyLayout ? studioSidebarCollapsedRailInsetClass : "px-2.5"
+      ),
+      children: user ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex flex-col gap-2", children: [
+        iconOnlyLayout ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: studioSidebarCollapsedRailChipRowClass, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Avatar, { size: "sm", className: "size-8", children: [
+          user.user_photo_url ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(AvatarImage, { src: user.user_photo_url, alt: user.user_name }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(AvatarFallback, { className: "text-[10px]", children: userInitials(user.user_name, user.user_email) })
+        ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex min-w-0 items-center gap-2.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Avatar, { size: "sm", children: [
+            user.user_photo_url ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(AvatarImage, { src: user.user_photo_url, alt: user.user_name }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(AvatarFallback, { children: userInitials(user.user_name, user.user_email) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "truncate text-sm font-medium text-foreground", children: user.user_name }),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "truncate text-xs text-muted-foreground", children: user.user_email })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          "div",
+          {
+            className: iconOnlyLayout ? studioSidebarCollapsedRailChipRowClass : void 0,
+            children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(StudioSidebarTooltip, { label: "Sign out", enabled: showTooltips, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+              "button",
+              {
+                type: "button",
+                onClick: handleSignOut,
+                className: cn(
+                  studioSidebarNavItemClasses(iconOnlyLayout, false),
+                  iconOnlyLayout && "inline-flex"
+                ),
+                "aria-label": "Sign out",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react10.LogOut, { className: "size-3.5 shrink-0" }),
+                  !iconOnlyLayout ? "Sign out" : null
+                ]
+              }
+            ) })
+          }
+        )
+      ] }) : !iconOnlyLayout && emptyCaption ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "px-1 text-xs text-muted-foreground", children: emptyCaption }) : null
+    }
+  ) });
+};
+
+// src/components/studio/sidebar-header.tsx
+var import_lucide_react11 = require("lucide-react");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var sidebarHeaderClass = "flex h-12 shrink-0 items-center px-2";
+var toggleButtonClass = cn(
+  "flex shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors",
+  "hover:bg-muted hover:text-foreground",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/15"
+);
+var SidebarToggleButton = ({ ariaLabel, expanded, onClick, children }) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  "button",
+  {
+    type: "button",
+    onClick,
+    className: cn(toggleButtonClass, "size-7"),
+    "aria-label": ariaLabel,
+    "aria-expanded": expanded,
+    children
+  }
+);
+var CollapsedBrandToggle = ({
+  onExpand,
+  brand
+}) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: studioSidebarCollapsedRailChipRowClass, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(StudioSidebarTooltip, { label: "Expand sidebar", enabled: true, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+  "button",
+  {
+    type: "button",
+    onClick: onExpand,
+    "aria-label": "Expand sidebar",
+    "aria-expanded": false,
+    className: cn(
+      toggleButtonClass,
+      "group relative inline-flex size-8 items-center justify-center overflow-hidden rounded-lg"
+    ),
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        "span",
+        {
+          "aria-hidden": true,
+          className: cn(
+            "pointer-events-none flex items-center justify-center",
+            "transition-[opacity,transform] duration-200 ease-out",
+            "group-hover:scale-90 group-hover:opacity-0"
+          ),
+          children: brand
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        import_lucide_react11.ChevronRight,
+        {
+          "aria-hidden": true,
+          className: cn(
+            "pointer-events-none absolute inset-0 m-auto size-4",
+            "opacity-0 transition-[opacity,transform] duration-200 ease-out",
+            "group-hover:opacity-100"
+          )
+        }
+      )
+    ]
+  }
+) }) });
+var StudioSidebarHeader = ({
+  isCollapsedRail,
+  isMobile,
+  mobileOpen,
+  onToggle,
+  brand
+}) => {
+  if (isMobile) {
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("header", { className: cn(sidebarHeaderClass, "justify-between gap-2 pr-2"), children: [
+      brand,
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        SidebarToggleButton,
+        {
+          ariaLabel: "Close menu",
+          expanded: mobileOpen,
+          onClick: onToggle,
+          children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react11.X, { className: "size-3.5" })
+        }
+      )
+    ] });
+  }
+  if (isCollapsedRail) {
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      "header",
+      {
+        className: cn(
+          "flex h-12 shrink-0 items-center",
+          studioSidebarCollapsedRailInsetClass
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CollapsedBrandToggle, { onExpand: onToggle, brand })
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("header", { className: cn(sidebarHeaderClass, "justify-between gap-1 pr-2"), children: [
+    brand,
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      SidebarToggleButton,
+      {
+        ariaLabel: "Collapse sidebar",
+        expanded: true,
+        onClick: onToggle,
+        children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react11.ChevronLeft, { className: "size-4" })
+      }
+    )
+  ] });
+};
+
+// src/components/studio/sidebar-workforce.ts
+function workforceItemId(w) {
+  return w.id ?? w.uid ?? w.name ?? "";
+}
+function workforceItemLabel(w) {
+  return w.name ?? workforceItemId(w);
+}
+function workforceItemInitial(w) {
+  const label = workforceItemLabel(w);
+  return label.charAt(0).toUpperCase() || "?";
+}
+
+// src/components/studio/sidebar-nav.tsx
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var StudioSidebarNav = ({
+  workforces,
+  selectedId,
+  onSelect,
+  iconOnlyLayout,
+  showTooltips
+}) => {
+  if (workforces.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    "nav",
+    {
+      className: cn(
+        "flex min-h-0 flex-1 flex-col overflow-y-auto py-1",
+        iconOnlyLayout ? cn(studioSidebarCollapsedRailInsetClass, "gap-1") : "gap-0.5 px-2"
+      ),
+      "aria-label": "Agents",
+      children: workforces.map((w) => {
+        const id = workforceItemId(w);
+        const isActive = id === selectedId;
+        const label = workforceItemLabel(w);
+        return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          StudioSidebarEntryMotion,
+          {
+            className: iconOnlyLayout ? studioSidebarCollapsedRailChipRowClass : void 0,
+            children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(StudioSidebarTooltip, { label, enabled: showTooltips, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => onSelect(id),
+                "aria-pressed": isActive,
+                "aria-label": label,
+                className: cn(
+                  studioSidebarNavItemClasses(iconOnlyLayout, isActive),
+                  iconOnlyLayout && "inline-flex"
+                ),
+                children: iconOnlyLayout ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-xs font-semibold leading-none", children: workforceItemInitial(w) }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "min-w-0 truncate", children: label })
+              }
+            ) })
+          },
+          id
+        );
+      })
+    }
+  );
+};
+
+// src/components/studio/timbal-mark.tsx
+var import_shaders_react = require("@paper-design/shaders-react");
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var DEFAULT_SIZE = 64;
+var TRANSPARENT_BACK = "#00000000";
+var TIMBAL_SYMBOL_DATA_URI = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAYAAAA8AXHiAAAH6ElEQVR4Aeyci7EcNRBFFxIBIgEygUiASCATyASIBOa4rFrZntmPPq1W93218o5nZyTd26dbmnX5fX3TjxyY4IDAmmCqurzdBJYomOKAwJpiqzoVWGJgigMCa4qt6lRgZWHAWKfAMjY8y3ACK0ukjXUKLGPDswwnsLJE2linwDI2PMtwAitLpI11Cixjw+/DxT4SWLHju0ydwHrP+p/euzzE1T8cKr492lsvgfWaXZj733Hp90fL9Pr1EPvn0QTWYcLoF8bS6Pdf/kjQAAnNv7RqVcW6do4q9ffxMe/HW5oXy323boF1zkvzEnDe3RZnS5X6fcRsBdbdRY6oTl1LAJ1s2NDdXaVq3QLr7kapUph8Pxv/iESiDVUqsG63sgQ0b1Rve/6QQEOrVG1DdrCGbFRrQzc5Zh9FlSKppkw5M1gYi8FTjHXaaalSJNTUKWYEC3P5spP3qeY667zsIadVqVpvNrCoUrTag+jHgIRm0z2ka7AGRpzqNG2jOnCeo7uiSi3RnQEszCVjydzRgfPaH1rRbFqlajMig0WVWmpubbThMRvzJVWq1hgVrFKlgKvWG/2YRHLxpBsNrOVLwCJySSBXT7qRwHKxBCwAiypFWzD09ZARwCpVysUScG318E+oUsv3Uleq3gPrqpd1512bO9GWsockqSYO0971zmBR/mnt6ve7k0RC87KvEV61bEewMNftEvCq8Q3XlSqF/obbbW/ZDSz2UWSs2yVgQvjQimb3VarWvgtYZCnm8uRXzz/6MXq3rM47gLXVEjCI9FKlqNCDurTtxjNYxdytloAB4aM6r65S3TK8grXtEtAZEZZ7Wmc362/3BlapUtsuAY0hDVGlau2ewApnbm30g+OyhySpHly210dewKL80/Zyr2+2JBKaQ+4hV4OFudtvVBv4KlUK/Q23+79lJVjso8jYUEvAk5CjFc0hq1StfQVYZCnm8uRXzyX6MXqbq/Nu5liDFX4JOAGgVCkq9MnHMU9ZgVXMDb8EfIYJ1TlNlaq1W4BFlcpoLss9rfY7zfFMsFSl0mD0pdBZYKXaqFa2so+iSpFU1el8hzPAwlgMzuQmeyl0k1ARdf/zrqiRYGGuq/+C9K4Zb11/v5g9JFCh/342+dEosDCWlslOljs0Z3vSfSnGvWCRpRmf+KhSGXW/BBUX9YCFuWQsmUtfGdo3h0g0q0odRjx6tYAFSFnNZXNOlX7kqT47HGgB67jtJnNv+nnkQCtYj/rUZ3LgFggsRdOTAwLLUzQCzUVgBQqmJykCy1M0As1FYAUKpicpAstTNALNRWAFCqYnKTPB8qRTczF2QGAZG55lOIGVJdLGOgWWseFZhhNYWSJtrFNgGRueZTiBlSXSM3We9C2wTkzRqX4HBFa/h+rhxAGBdWKKTvU7ILD6PVQPJw4IrBNTdKrfAYHV76F6OHFAYJ2Ysv+p9QoE1voYhJyBwAoZ1vWiBNb6GIScgcAKGdb1ogTW+hiEnIHAChnW9aIElk0M0o0isNKF3EawwLLxOd0oAitdyN8W/Ndxx9LfmnyMH/aFuX+EVXct7Lfjox+P9vZLFeu5ZcXcf59fGuYKKhRA8Xtmm0QJrGvbqFJd5l537foTKvN3xwzRf7y1vdKC9cSuUqW6zH0yhsePSaSfR0xMYH3qYvcS8Gl32/yNBPrqmC3vx1v/S2DdPRyyBNy72+aIKkUbOuEWsPg970MnsbizUqWGLAGLtbwzPNWpey91NWALWFd97Xh+qrmODSl7SJJqyjQzg0X5p00x1mmnJBKam79GeFVXRrAwd9oS8KrxC64rVQr904f3A9Z0qR8GYB9Fxk5bAj6M4usPtKJ5epWqZWcBiyzFXJ78av3Rj9G7pDpnAMt0CXBCaqlSVOglU4oMVjHXdAlYEsVPB6U6L6lS9TSigkWVWm5ubbTRMcs9zWi462GigaUqdR1r008igbVso2oasS8HYx9FlSKpvvx00ZkHYC2aUduwGIvBbXfveRd7KXSTUO4U7A4W5g79V3l3ETqfEHtIoEL/+RWLz+4MFsbSFltoOjzLHZrdP+nuCBZZmvGJjyVvG927gVWWADLXtFQsHAytVKmt9pC7gEWVwlz3S8BgANG9TZWqte8AVqlSmFzPPfoxiUSbrnPGAJ7BKkuAqtSMyE/u0ytYW21UB8aIfRRViqQa2K19Vx7BwlgMtndj3Ygs8+gmodbNYuDInsDCXH3ZOTC4K7vyAhbZSlvphfXYLHdoDrmHXA0WVWrLx+lOCnnSDa17JViYS8aSuZ1x2uZ2tKL5cZXaRs71RFeARZVKYe5ntrMxD12lar3WYJUqBVz1PKIfk0ipnnStwEqzBHyWISRQxifdmwVYqZaACiyqFK06ledwJlilSqVaAg50qFJp9lKH3tPXLLCymlv2kCTVqeFZTs4Ai/JPC+ThUykkEprDf43w1ImPF4wEC3MzLgGlSqH/o616GwUW+ygyNtMSgFY0q0qd5FEvWGQp5vLkd9J92FPozVidXw5oD1hZlwASiQr9sskZL2wBK+sSgO6UX3a2JEYrWCyBLePtfA/L387zN517C1imE7wYTKedOyCwnAdo1+kJrF0j53zeAst5gHadnsDaNXLO5y2wnAdo1+kJrF0j53zew8ByrlPTM3ZAYBkbnmU4gZUl0sY6BZax4VmGE1hZIm2sU2AZG55lOIGVJdLDdL7W0f8AAAD//x3VUCQAAAAGSURBVAMArsj7LTb9pqMAAAAASUVORK5CYII=";
+function TimbalMark({
+  className,
+  size = DEFAULT_SIZE,
+  src = TIMBAL_SYMBOL_DATA_URI
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    "div",
+    {
+      className: cn("relative shrink-0 bg-transparent", className),
+      style: { width: size, height: size },
+      role: "img",
+      "aria-label": "Timbal",
+      children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        import_shaders_react.LiquidMetal,
+        {
+          width: size,
+          height: size,
+          image: src,
+          colorBack: TRANSPARENT_BACK,
+          colorTint: "#ffffff",
+          shape: "none",
+          repetition: 2,
+          softness: 0.1,
+          shiftRed: 0.3,
+          shiftBlue: 0.3,
+          distortion: 0.07,
+          contour: 0.4,
+          angle: 70,
+          speed: 1,
+          scale: 0.6,
+          fit: "contain",
+          className: "size-full bg-transparent",
+          style: { background: "transparent" },
+          webGlContextAttributes: {
+            alpha: true,
+            premultipliedAlpha: false
+          }
+        }
+      )
+    }
+  );
+}
+
+// src/components/studio/sidebar.tsx
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var DEFAULT_BREAKPOINT_PX = 768;
+function readPersistedCollapsed(key) {
+  if (!key || typeof window === "undefined") return false;
+  try {
+    return window.localStorage.getItem(key) === "1";
+  } catch {
+    return false;
+  }
+}
+function writePersistedCollapsed(key, collapsed) {
+  if (!key || typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(key, collapsed ? "1" : "0");
+  } catch {
+  }
+}
+var StudioSidebarPanel = ({
+  workforces,
+  selectedId,
+  onSelect,
+  collapsed,
+  onCollapsedChange,
+  isMobile,
+  mobileOpen,
+  onMobileOpenChange,
+  widthCollapsed,
+  entriesVisible,
+  onEntriesBlurOutComplete,
+  onPanelWidthComplete,
+  brand,
+  emptyCaption = null
+}) => {
+  const reducedMotion = (0, import_react36.useReducedMotion)();
+  const isCollapsedRail = widthCollapsed && !isMobile;
+  const iconOnlyLayout = studioSidebarIconOnlyLayout(isMobile, isCollapsedRail);
+  const isDrawerOpen = isMobile && mobileOpen;
+  const widthDirection = widthCollapsed ? "collapse" : "expand";
+  const widthTransition = studioSidebarWidthTransition(
+    !!reducedMotion,
+    widthDirection
+  );
+  const handleToggle = () => {
+    if (isMobile) {
+      onMobileOpenChange(false);
+      return;
+    }
+    onCollapsedChange(!collapsed);
+  };
+  const panelWidthPx = isMobile ? SIDEBAR_MOBILE_PX : widthCollapsed ? SIDEBAR_WIDTH_COLLAPSED_PX : SIDEBAR_WIDTH_PX;
+  const brandNode = brand ?? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TimbalMark, { size: 32 });
+  const panel = /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+    import_react36.motion.div,
+    {
+      "data-sidebar-collapsed": isCollapsedRail ? "" : void 0,
+      className: cn(
+        "flex h-full flex-col overflow-hidden",
+        studioSidebarPanelClass,
+        isMobile ? "rounded-none rounded-r-2xl" : "rounded-2xl"
+      ),
+      initial: false,
+      animate: { width: panelWidthPx },
+      transition: widthTransition,
+      style: { willChange: entriesVisible ? void 0 : "width" },
+      onAnimationComplete: isMobile || entriesVisible ? void 0 : () => onPanelWidthComplete(),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          StudioSidebarHeader,
+          {
+            isCollapsedRail,
+            isMobile,
+            mobileOpen,
+            onToggle: handleToggle,
+            brand: brandNode
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+          StudioSidebarEntries,
+          {
+            visible: entriesVisible,
+            onBlurOutComplete: onEntriesBlurOutComplete,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                "div",
+                {
+                  id: DOM_IDS.sidebarRuntimeAnchor,
+                  className: cn(
+                    "min-h-0 shrink-0 empty:hidden",
+                    iconOnlyLayout ? "px-1.5 pt-1.5" : "px-2 pt-1.5"
+                  )
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                StudioSidebarNav,
+                {
+                  workforces,
+                  selectedId,
+                  onSelect,
+                  iconOnlyLayout,
+                  showTooltips: isCollapsedRail
+                }
+              ),
+              workforces.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "min-h-0 flex-1" }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                StudioSidebarFooter,
+                {
+                  iconOnlyLayout,
+                  showTooltips: isCollapsedRail,
+                  onSignOut: isMobile ? () => onMobileOpenChange(false) : void 0,
+                  emptyCaption
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+  if (isMobile) {
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      import_react36.motion.aside,
+      {
+        className: "fixed inset-y-0 left-0 z-[60] flex",
+        "aria-label": "Studio navigation",
+        "aria-hidden": !mobileOpen,
+        initial: false,
+        animate: {
+          x: isDrawerOpen ? 0 : -(SIDEBAR_MOBILE_PX + 32)
+        },
+        transition: studioSidebarDrawerTransition(!!reducedMotion),
+        style: { pointerEvents: isDrawerOpen ? "auto" : "none" },
+        children: panel
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    "aside",
+    {
+      className: "absolute inset-y-0 left-0 z-[60] flex py-[var(--studio-sidebar-gap)] pl-[var(--studio-sidebar-gap)]",
+      "aria-label": "Studio navigation",
+      children: panel
+    }
+  );
+};
+var StudioSidebar = ({
+  workforces: workforcesProp,
+  selectedId: selectedIdProp,
+  onSelect,
+  defaultCollapsed = false,
+  persistKey = STORAGE_KEYS.sidebarCollapsed,
+  mobileBreakpointPx = DEFAULT_BREAKPOINT_PX,
+  brand,
+  emptyCaption,
+  mobileOpen: mobileOpenProp,
+  onMobileOpenChange: onMobileOpenChangeProp
+}) => {
+  const reducedMotion = (0, import_react36.useReducedMotion)();
+  const fetched = useWorkforces({ enabled: workforcesProp === void 0 });
+  const workforces = workforcesProp ?? fetched.workforces;
+  const [internalSelected, setInternalSelected] = (0, import_react35.useState)(
+    selectedIdProp ?? ""
+  );
+  (0, import_react35.useEffect)(() => {
+    if (selectedIdProp !== void 0) return;
+    if (internalSelected) return;
+    const first = workforces[0]?.id ?? workforces[0]?.uid ?? workforces[0]?.name;
+    if (first) setInternalSelected(first);
+  }, [workforces, selectedIdProp, internalSelected]);
+  const selectedId = selectedIdProp ?? internalSelected ?? workforces[0]?.id ?? workforces[0]?.uid ?? workforces[0]?.name ?? "";
+  const handleSelect = (0, import_react35.useCallback)(
+    (id) => {
+      if (selectedIdProp === void 0) setInternalSelected(id);
+      onSelect?.(id);
+    },
+    [selectedIdProp, onSelect]
+  );
+  const [collapsed, setCollapsed] = (0, import_react35.useState)(() => {
+    const persisted = readPersistedCollapsed(persistKey);
+    return persisted || defaultCollapsed;
+  });
+  const handleCollapsedChange = (0, import_react35.useCallback)(
+    (next) => {
+      setCollapsed(next);
+      writePersistedCollapsed(persistKey, next);
+    },
+    [persistKey]
+  );
+  const [isMobile, setIsMobile] = (0, import_react35.useState)(() => {
+    if (typeof window === "undefined") return false;
+    return window.innerWidth < mobileBreakpointPx;
+  });
+  (0, import_react35.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    const onResize = () => setIsMobile(window.innerWidth < mobileBreakpointPx);
+    onResize();
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [mobileBreakpointPx]);
+  const [internalMobileOpen, setInternalMobileOpen] = (0, import_react35.useState)(false);
+  const mobileOpen = mobileOpenProp ?? internalMobileOpen;
+  const setMobileOpen = (0, import_react35.useCallback)(
+    (next) => {
+      if (mobileOpenProp === void 0) setInternalMobileOpen(next);
+      onMobileOpenChangeProp?.(next);
+    },
+    [mobileOpenProp, onMobileOpenChangeProp]
+  );
+  const effectiveCollapsed = isMobile ? false : collapsed;
+  const {
+    widthCollapsed,
+    entriesVisible: phaseEntriesVisible,
+    onEntriesBlurOutComplete,
+    onPanelWidthComplete
+  } = useSidebarCollapsePhase(effectiveCollapsed, !!reducedMotion);
+  const entriesVisible = isMobile || phaseEntriesVisible;
+  const isCollapsedRail = widthCollapsed && !isMobile;
+  const iconOnlyLayout = studioSidebarIconOnlyLayout(isMobile, isCollapsedRail);
+  const contextValue = (0, import_react35.useMemo)(
+    () => ({
+      collapsed: effectiveCollapsed,
+      isMobile,
+      isCollapsedRail,
+      iconOnlyLayout
+    }),
+    [effectiveCollapsed, isMobile, isCollapsedRail, iconOnlyLayout]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(StudioSidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    StudioSidebarPanel,
+    {
+      workforces,
+      selectedId,
+      onSelect: handleSelect,
+      collapsed: effectiveCollapsed,
+      onCollapsedChange: handleCollapsedChange,
+      isMobile,
+      mobileOpen,
+      onMobileOpenChange: setMobileOpen,
+      widthCollapsed,
+      entriesVisible,
+      onEntriesBlurOutComplete,
+      onPanelWidthComplete,
+      brand,
+      emptyCaption
+    }
+  ) });
+};
+
+// src/components/studio/sidebar-runtime-portal.tsx
+var import_react37 = require("react");
+var import_react_dom = require("react-dom");
+var import_lucide_react12 = require("lucide-react");
+var import_react38 = require("@assistant-ui/react");
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var StudioSidebarRuntimePortal = ({
+  label = "New chat"
+}) => {
+  const { iconOnlyLayout } = useStudioSidebarLayout();
+  const hasMessages = (0, import_react38.useThread)((s) => s.messages.length > 0);
+  const { clear } = useTimbalRuntime();
+  const [anchor, setAnchor] = (0, import_react37.useState)(null);
+  const startNewChat = (0, import_react37.useCallback)(() => {
+    clear();
+  }, [clear]);
+  (0, import_react37.useLayoutEffect)(() => {
+    setAnchor(document.getElementById(DOM_IDS.sidebarRuntimeAnchor));
+  }, []);
+  if (!anchor || !hasMessages) return null;
+  const button = /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+    "button",
+    {
+      type: "button",
+      onClick: startNewChat,
+      "aria-label": label,
+      className: studioSidebarNavItemClasses(iconOnlyLayout, false),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react12.MessageSquarePlus, { className: "size-3.5 shrink-0" }),
+        !iconOnlyLayout ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "min-w-0 truncate", children: label }) : null
+      ]
+    }
+  );
+  return (0, import_react_dom.createPortal)(
+    iconOnlyLayout ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Tooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipTrigger, { asChild: true, children: button }),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipContent, { side: "right", className: "text-xs", children: label })
+    ] }) : button,
+    anchor
+  );
+};
+
+// src/components/studio/welcome.tsx
+var import_react39 = require("motion/react");
+var import_react40 = require("@assistant-ui/react");
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var luxuryEase2 = [0.16, 1, 0.3, 1];
+var welcomeStagger2 = {
+  initial: {},
+  animate: {
+    transition: { staggerChildren: 0.16, delayChildren: 0.18 }
+  }
+};
+var welcomeItem2 = {
+  initial: { opacity: 0, y: 14 },
+  animate: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.9, ease: luxuryEase2 }
+  }
+};
+var welcomeIcon2 = {
+  initial: { opacity: 0, y: 10, scale: 0.96 },
+  animate: {
+    opacity: 1,
+    y: 0,
+    scale: 1,
+    transition: { duration: 1.1, ease: luxuryEase2 }
+  }
+};
+var StudioWelcome = ({ config, icon }) => {
+  const isEmpty = (0, import_react40.useThread)((s) => s.messages.length === 0);
+  if (!isEmpty) return null;
+  const iconNode = icon ?? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    TimbalMark,
+    {
+      size: 112,
+      className: "max-md:scale-[0.58] max-md:origin-center"
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "aui-thread-welcome-root mx-auto my-auto flex w-full max-w-(--thread-max-width) grow flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "aui-thread-welcome-center flex w-full grow flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+    import_react39.motion.div,
+    {
+      className: "aui-thread-welcome-message flex flex-col items-center justify-center px-2 text-center sm:px-4",
+      variants: welcomeStagger2,
+      initial: "initial",
+      animate: "animate",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react39.motion.div, { variants: welcomeIcon2, className: "mb-4 md:mb-5", children: iconNode }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          import_react39.motion.h1,
+          {
+            variants: welcomeItem2,
+            className: "aui-thread-welcome-message-inner text-xl font-semibold sm:text-2xl",
+            children: config?.heading ?? "How can I help you today?"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          import_react39.motion.p,
+          {
+            variants: welcomeItem2,
+            className: "aui-thread-welcome-message-inner mt-2 text-muted-foreground",
+            children: config?.subheading ?? "Send a message to start a conversation."
+          }
+        )
+      ]
+    }
+  ) }) });
+};
+
+// src/components/studio/studio-shell.tsx
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_react43 = require("react");
+var DEFAULT_BREAKPOINT_PX2 = 768;
+function readPersistedCollapsed2(key) {
+  if (!key || typeof window === "undefined") return false;
+  try {
+    return window.localStorage.getItem(key) === "1";
+  } catch {
+    return false;
+  }
+}
+function writePersistedCollapsed2(key, collapsed) {
+  if (!key || typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(key, collapsed ? "1" : "0");
+  } catch {
+  }
+}
+function makeComposerWithPortal(BaseComposer) {
+  const Resolved = BaseComposer ?? Composer;
+  return function StudioComposerWithSidebar(props) {
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(StudioSidebarRuntimePortal, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Resolved, { ...props })
+    ] });
+  };
+}
+var TimbalStudioShell = ({
+  workforceId,
+  workforces: workforcesProp,
+  workforcesFetch,
+  workforcesBaseUrl,
+  brand,
+  headerActions,
+  headerStart,
+  defaultCollapsed = false,
+  persistKey = STORAGE_KEYS.sidebarCollapsed,
+  mobileBreakpointPx = DEFAULT_BREAKPOINT_PX2,
+  sidebarEmptyCaption = null,
+  welcome,
+  components,
+  ...chatProps
+}) => {
+  const reducedMotion = (0, import_react42.useReducedMotion)();
+  const shouldFetchWorkforces = !workforceId && workforcesProp === void 0;
+  const fetched = useWorkforces({
+    enabled: shouldFetchWorkforces,
+    fetch: workforcesFetch,
+    baseUrl: workforcesBaseUrl
+  });
+  const workforces = workforcesProp ?? fetched.workforces;
+  const [internalSelected, setInternalSelected] = (0, import_react41.useState)(
+    workforceId ?? ""
+  );
+  (0, import_react41.useEffect)(() => {
+    if (workforceId) return;
+    if (internalSelected) return;
+    const first = workforces[0]?.id ?? workforces[0]?.uid ?? workforces[0]?.name;
+    if (first) setInternalSelected(first);
+  }, [workforces, workforceId, internalSelected]);
+  const activeWorkforceId = workforceId ?? internalSelected ?? fetched.selectedId ?? "";
+  const [collapsed, setCollapsed] = (0, import_react41.useState)(() => {
+    const persisted = readPersistedCollapsed2(persistKey);
+    return persisted || defaultCollapsed;
+  });
+  const [isMobile, setIsMobile] = (0, import_react41.useState)(() => {
+    if (typeof window === "undefined") return false;
+    return window.innerWidth < mobileBreakpointPx;
+  });
+  const [mobileSidebarOpen, setMobileSidebarOpen] = (0, import_react41.useState)(false);
+  (0, import_react41.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    const onResize = () => setIsMobile(window.innerWidth < mobileBreakpointPx);
+    onResize();
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [mobileBreakpointPx]);
+  (0, import_react41.useEffect)(() => {
+    if (!isMobile) setMobileSidebarOpen(false);
+  }, [isMobile]);
+  (0, import_react41.useEffect)(() => {
+    if (!mobileSidebarOpen) return;
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") setMobileSidebarOpen(false);
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [mobileSidebarOpen]);
+  const effectiveCollapsed = isMobile ? false : collapsed;
+  const {
+    widthCollapsed,
+    entriesVisible: phaseEntriesVisible,
+    onEntriesBlurOutComplete,
+    onPanelWidthComplete
+  } = useSidebarCollapsePhase(effectiveCollapsed, !!reducedMotion);
+  const entriesVisible = isMobile || phaseEntriesVisible;
+  const isCollapsedRail = widthCollapsed && !isMobile;
+  const iconOnlyLayout = studioSidebarIconOnlyLayout(isMobile, isCollapsedRail);
+  const layoutDirection = widthCollapsed ? "collapse" : "expand";
+  const layoutTransition = studioSidebarWidthTransition(
+    !!reducedMotion,
+    layoutDirection
+  );
+  const desktopInsetPx = widthCollapsed ? SIDEBAR_INSET_PX_COLLAPSED : SIDEBAR_INSET_PX_EXPANDED;
+  const onCollapsedChange = (0, import_react41.useCallback)(
+    (next) => {
+      setCollapsed(next);
+      writePersistedCollapsed2(persistKey, next);
+    },
+    [persistKey]
+  );
+  const handleSelectWorkforce = (0, import_react41.useCallback)(
+    (id) => {
+      if (!workforceId) setInternalSelected(id);
+      if (isMobile) setMobileSidebarOpen(false);
+    },
+    [workforceId, isMobile]
+  );
+  const sidebarContext = (0, import_react41.useMemo)(
+    () => ({
+      collapsed: effectiveCollapsed,
+      isMobile,
+      isCollapsedRail,
+      iconOnlyLayout
+    }),
+    [effectiveCollapsed, isMobile, isCollapsedRail, iconOnlyLayout]
+  );
+  const resolvedComponents = (0, import_react41.useMemo)(() => {
+    const next = { Welcome: StudioWelcome, ...components };
+    next.Composer = makeComposerWithPortal(components?.Composer);
+    return next;
+  }, [components]);
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(StudioSidebarContext.Provider, { value: sidebarContext, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+    "div",
+    {
+      className: cn(
+        "relative h-dvh overflow-hidden bg-background",
+        isMobile && mobileSidebarOpen && "max-md:overflow-hidden"
+      ),
+      style: studioChromeShellStyle,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          "div",
+          {
+            className: "pointer-events-none absolute inset-0 z-0 bg-background",
+            "aria-hidden": true
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          "div",
+          {
+            className: cn(
+              "pointer-events-none absolute inset-0 z-0",
+              studioPlaygroundGradientClass
+            ),
+            "aria-hidden": true
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          StudioSidebarBackdrop,
+          {
+            open: isMobile && mobileSidebarOpen,
+            onClose: () => setMobileSidebarOpen(false)
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          StudioSidebarPanel,
+          {
+            workforces,
+            selectedId: activeWorkforceId,
+            onSelect: handleSelectWorkforce,
+            collapsed: effectiveCollapsed,
+            onCollapsedChange,
+            isMobile,
+            mobileOpen: mobileSidebarOpen,
+            onMobileOpenChange: setMobileSidebarOpen,
+            widthCollapsed,
+            entriesVisible,
+            onEntriesBlurOutComplete,
+            onPanelWidthComplete,
+            brand,
+            emptyCaption: sidebarEmptyCaption
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+          import_react42.motion.header,
+          {
+            className: cn(
+              "absolute top-0 right-0 z-40 flex items-start justify-between gap-2",
+              "px-3 pt-[var(--studio-topbar-gap)] md:px-4",
+              "left-0"
+            ),
+            initial: false,
+            animate: { left: isMobile ? 0 : desktopInsetPx },
+            transition: layoutTransition,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+                "div",
+                {
+                  className: cn(
+                    "flex min-w-0 flex-1 items-center gap-2",
+                    studioTopbarPillHeightClass
+                  ),
+                  children: [
+                    isMobile && !mobileSidebarOpen ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                      TimbalV2Button,
+                      {
+                        variant: "secondary",
+                        size: "sm",
+                        isIconOnly: true,
+                        className: studioTopbarIconPillClass,
+                        onClick: () => setMobileSidebarOpen(true),
+                        "aria-label": "Open menu",
+                        "aria-expanded": false,
+                        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react13.Menu, { className: "size-4" })
+                      }
+                    ) : null,
+                    headerStart
+                  ]
+                }
+              ),
+              headerActions ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex shrink-0 items-center gap-1", children: headerActions }) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          import_react42.motion.main,
+          {
+            className: cn(
+              "relative z-10 flex h-full min-w-0 flex-col",
+              "pt-[var(--studio-inset-top)]",
+              "px-3 md:px-0"
+            ),
+            initial: false,
+            animate: { paddingLeft: isMobile ? 12 : desktopInsetPx },
+            transition: layoutTransition,
+            children: activeWorkforceId ? /* @__PURE__ */ (0, import_react43.createElement)(
+              TimbalChat,
+              {
+                ...chatProps,
+                workforceId: activeWorkforceId,
+                key: activeWorkforceId,
+                welcome,
+                components: resolvedComponents,
+                className: cn("min-h-0 flex-1 bg-transparent", chatProps.className)
+              }
+            ) : null
+          }
+        )
+      ]
+    }
+  ) });
+};
+
+// src/components/studio/mode-toggle.tsx
+var import_react44 = require("react");
+var import_lucide_react14 = require("lucide-react");
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var ModeToggle = ({
+  theme,
+  setTheme,
+  className,
+  label = "Toggle theme"
+}) => {
+  const isControlled = theme !== void 0;
+  const [internalIsDark, setInternalIsDark] = (0, import_react44.useState)(false);
+  (0, import_react44.useEffect)(() => {
+    if (isControlled) return;
+    if (typeof document === "undefined") return;
+    setInternalIsDark(document.documentElement.classList.contains("dark"));
+  }, [isControlled]);
+  const isDark = isControlled ? theme === "dark" : internalIsDark;
+  const onClick = (0, import_react44.useCallback)(() => {
+    const next = isDark ? "light" : "dark";
+    if (setTheme) {
+      setTheme(next);
+      return;
+    }
+    if (typeof document === "undefined") return;
+    document.documentElement.classList.toggle("dark", next === "dark");
+    setInternalIsDark(next === "dark");
+  }, [isDark, setTheme]);
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+    TimbalV2Button,
+    {
+      variant: "secondary",
+      size: "sm",
+      isIconOnly: true,
+      onClick,
+      className: cn(
+        studioTopbarPillHeightClass,
+        studioTopbarIconPillClass,
+        "relative",
+        className
+      ),
+      "aria-label": label,
+      title: label,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react14.Sun, { className: "size-3.5 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react14.Moon, { className: "absolute size-3.5 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "sr-only", children: label })
+      ]
+    }
+  );
+};
+
+// src/artifacts/agent-instructions.ts
+var ARTIFACT_AGENT_INSTRUCTIONS = `
+## Rich artifacts (Timbal chat UI)
+
+When you need charts, tables, choice widgets, or interactive controls, return a **JSON artifact object** instead of plain prose. The chat UI renders these automatically.
+
+### Delivery channels (either works)
+
+1. **Tool result (preferred)** \u2014 return a single JSON object (or a JSON string) from a tool. The object must include a string \`type\` field.
+2. **Inline markdown fence** \u2014 embed the same JSON inside a fenced block:
+
+\`\`\`timbal-artifact
 {"type":"chart","data":[{"month":"Jan","sales":120}]}
 \`\`\`
 
@@ -3546,288 +5727,9 @@ When you call a tool that returns an artifact (\`make_chart\`, \`ask_question\`,
 4. Treat the widget as visible to the user; refer to it as "above" / "the chart" / "the choices" \u2014 never reproduce its contents.
 `.trim();
 
-// src/index.ts
-var import_react26 = require("@assistant-ui/react");
-
-// src/hooks/use-workforces.ts
-var import_react24 = require("react");
-function useWorkforces(options = {}) {
-  const { baseUrl = "/api", fetch: fetchFn, pickInitial } = options;
-  const [workforces, setWorkforces] = (0, import_react24.useState)([]);
-  const [selectedId, setSelectedId] = (0, import_react24.useState)("");
-  const [isLoading, setIsLoading] = (0, import_react24.useState)(true);
-  const [error, setError] = (0, import_react24.useState)(null);
-  const fetchFnRef = (0, import_react24.useRef)(fetchFn ?? authFetch);
-  (0, import_react24.useEffect)(() => {
-    fetchFnRef.current = fetchFn ?? authFetch;
-  }, [fetchFn]);
-  const pickInitialRef = (0, import_react24.useRef)(pickInitial);
-  (0, import_react24.useEffect)(() => {
-    pickInitialRef.current = pickInitial;
-  }, [pickInitial]);
-  const load = (0, import_react24.useMemo)(() => {
-    return async () => {
-      setIsLoading(true);
-      setError(null);
-      try {
-        const res = await fetchFnRef.current(`${baseUrl}/workforce`);
-        if (!res.ok) throw new Error(`Failed to load workforces (${res.status})`);
-        const data = await res.json();
-        setWorkforces(data);
-        setSelectedId((current) => {
-          if (current && data.some((w) => idOf(w) === current)) return current;
-          const initial = pickInitialRef.current?.(data) ?? data.find((w) => w.type === "agent") ?? data[0];
-          return initial ? idOf(initial) : "";
-        });
-      } catch (err) {
-        setError(err instanceof Error ? err : new Error(String(err)));
-      } finally {
-        setIsLoading(false);
-      }
-    };
-  }, [baseUrl]);
-  (0, import_react24.useEffect)(() => {
-    load();
-  }, [load]);
-  const selected = (0, import_react24.useMemo)(
-    () => workforces.find((w) => idOf(w) === selectedId),
-    [workforces, selectedId]
-  );
-  return {
-    workforces,
-    selectedId,
-    setSelectedId,
-    selected,
-    isLoading,
-    error,
-    refresh: load
-  };
-}
-function idOf(item) {
-  return item.id ?? item.uid ?? item.name ?? "";
-}
-
-// src/components/workforce-selector.tsx
-var import_lucide_react8 = require("lucide-react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var WorkforceSelector = ({
-  workforces,
-  value,
-  onChange,
-  hideWhenSingle = true,
-  className,
-  placeholder = "Select agent"
-}) => {
-  if (workforces.length === 0) return null;
-  if (hideWhenSingle && workforces.length === 1) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: cn("aui-workforce-selector relative inline-flex items-center", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
-      "select",
-      {
-        className: "aui-workforce-selector-input h-7 cursor-pointer appearance-none rounded-md border-none bg-transparent pr-5 pl-1.5 text-xs font-medium text-muted-foreground shadow-none outline-none ring-0 transition-colors hover:text-foreground focus:ring-0",
-        value,
-        onChange: (e) => onChange(e.target.value),
-        "aria-label": placeholder,
-        children: [
-          !value && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("option", { value: "", children: placeholder }),
-          workforces.map((w) => {
-            const id = idOf2(w);
-            return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("option", { value: id, children: w.name ?? id }, id);
-          })
-        ]
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react8.ChevronDownIcon, { className: "aui-workforce-selector-icon pointer-events-none absolute right-1 size-3 text-muted-foreground" })
-  ] });
-};
-function idOf2(item) {
-  return item.id ?? item.uid ?? item.name ?? "";
-}
-
-// src/components/chat-shell.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var TimbalChatShell = ({
-  workforceId,
-  brand,
-  headerActions,
-  hideWorkforceSelector,
-  className,
-  headerClassName,
-  baseUrl,
-  fetch: fetch2,
-  ...chatProps
-}) => {
-  const {
-    workforces,
-    selectedId,
-    setSelectedId
-  } = useWorkforces({ baseUrl, fetch: fetch2 });
-  const effectiveId = workforceId ?? selectedId;
-  const showSelector = !hideWorkforceSelector && !workforceId && workforces.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
-    "div",
-    {
-      className: cn(
-        "aui-chat-shell flex h-screen flex-col overflow-hidden",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
-          "header",
-          {
-            className: cn(
-              "aui-chat-shell-header flex shrink-0 items-center justify-between border-b border-border/50 bg-background/90 px-5 py-2 backdrop-blur-md",
-              headerClassName
-            ),
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center", children: [
-                brand,
-                showSelector && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "mx-3.5 h-3.5 w-px bg-border" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                    WorkforceSelector,
-                    {
-                      workforces,
-                      value: selectedId,
-                      onChange: setSelectedId
-                    }
-                  )
-                ] })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex items-center gap-0.5", children: headerActions })
-            ]
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-          TimbalChat,
-          {
-            workforceId: effectiveId,
-            baseUrl,
-            fetch: fetch2,
-            className: "min-h-0 flex-1",
-            ...chatProps
-          },
-          effectiveId
-        )
-      ]
-    }
-  );
-};
-
-// src/auth/provider.tsx
-var import_react25 = require("react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
-function isInsideIframe() {
-  try {
-    return typeof window !== "undefined" && window.self !== window.top;
-  } catch {
-    return true;
-  }
-}
-var SessionContext = (0, import_react25.createContext)(void 0);
-var useSession = () => {
-  const context = (0, import_react25.useContext)(SessionContext);
-  if (context === void 0) {
-    throw new Error("useSession must be used within a SessionProvider");
-  }
-  return context;
-};
-var SessionProvider = ({
-  children,
-  enabled = true
-}) => {
-  const [user, setUser] = (0, import_react25.useState)(null);
-  const [loading, setLoading] = (0, import_react25.useState)(enabled);
-  const [embedded] = (0, import_react25.useState)(isInsideIframe);
-  (0, import_react25.useEffect)(() => {
-    if (!enabled) {
-      setLoading(false);
-      return;
-    }
-    let ignore = false;
-    const restoreSession = async () => {
-      try {
-        const u = await fetchCurrentUser();
-        if (ignore) return;
-        if (u) {
-          setUser(u);
-          setLoading(false);
-          return;
-        }
-        if (getRefreshToken()) {
-          const ok = await refreshAccessToken();
-          if (ignore) return;
-          if (ok) {
-            const refreshedUser = await fetchCurrentUser();
-            if (ignore) return;
-            if (refreshedUser) {
-              setUser(refreshedUser);
-              setLoading(false);
-              return;
-            }
-          }
-        }
-      } catch {
-        if (ignore) return;
-        clearTokens();
-      }
-      if (!ignore && !embedded) {
-        setLoading(false);
-      }
-    };
-    restoreSession();
-    let messageCleanup;
-    if (embedded) {
-      const handleMessage = async (event) => {
-        if (ignore) return;
-        if (event.data?.type !== "timbal:auth" || !event.data.token) return;
-        setAccessToken(event.data.token);
-        if (event.data.refreshToken) {
-          setRefreshToken(event.data.refreshToken);
-        }
-        const u = await fetchCurrentUser();
-        if (!ignore) {
-          setUser(u);
-          setLoading(false);
-        }
-      };
-      window.addEventListener("message", handleMessage);
-      window.parent.postMessage({ type: "timbal:request-session" }, "*");
-      messageCleanup = () => window.removeEventListener("message", handleMessage);
-    }
-    return () => {
-      ignore = true;
-      messageCleanup?.();
-    };
-  }, [enabled, embedded]);
-  const logout = (0, import_react25.useCallback)(() => {
-    clearTokens();
-    setUser(null);
-    const returnTo = encodeURIComponent(
-      window.location.pathname + window.location.search
-    );
-    fetch("/api/auth/logout", { method: "POST" }).finally(
-      () => window.location.href = `/api/auth/login?return_to=${returnTo}`
-    );
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-    SessionContext.Provider,
-    {
-      value: {
-        user,
-        loading,
-        isAuthenticated: !!user,
-        isEmbedded: embedded,
-        logout
-      },
-      children
-    }
-  );
-};
-
 // src/auth/guard.tsx
-var import_lucide_react9 = require("lucide-react");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_lucide_react15 = require("lucide-react");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var AuthGuard = ({
   children,
   requireAuth = false,
@@ -3838,7 +5740,7 @@ var AuthGuard = ({
     return children;
   }
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex items-center justify-center h-screen", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react9.Loader2, { className: "w-8 h-8 animate-spin" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex items-center justify-center h-screen", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react15.Loader2, { className: "w-8 h-8 animate-spin" }) });
   }
   if (requireAuth && !isAuthenticated && !isEmbedded) {
     const returnTo = encodeURIComponent(
@@ -3849,6 +5751,9 @@ var AuthGuard = ({
   }
   return children;
 };
+
+// src/index.ts
+var import_react45 = require("@assistant-ui/react");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ARTIFACT_AGENT_INSTRUCTIONS,
@@ -3858,6 +5763,7 @@ var AuthGuard = ({
   ArtifactRegistryProvider,
   ArtifactView,
   AssistantRuntimeProvider,
+  AuiIf,
   AuthGuard,
   Avatar,
   AvatarFallback,
@@ -3865,8 +5771,6 @@ var AuthGuard = ({
   Button,
   ChartArtifactView,
   Composer,
-  ComposerAddAttachment,
-  ComposerAttachments,
   ComposerPrimitive,
   DEFAULT_UPLOAD_ACCEPT,
   Dialog,
@@ -3880,17 +5784,21 @@ var AuthGuard = ({
   JsonArtifactView,
   MarkdownText,
   MessagePrimitive,
+  ModeToggle,
   QuestionArtifactView,
   SessionProvider,
   Shimmer,
+  StudioSidebar,
+  StudioWelcome,
   Suggestions,
-  SyntaxHighlighter,
   TableArtifactView,
   Thread,
   ThreadPrimitive,
   TimbalChat,
   TimbalChatShell,
+  TimbalMark,
   TimbalRuntimeProvider,
+  TimbalStudioShell,
   ToolArtifactFallback,
   ToolFallback,
   Tooltip,
@@ -3902,10 +5810,8 @@ var AuthGuard = ({
   UiCustomNodeRegistryProvider,
   UiEventProvider,
   UiNodeView,
-  UserMessageAttachments,
   WorkforceSelector,
   authFetch,
-  buttonVariants,
   clearTokens,
   cn,
   createDefaultAttachmentAdapter,
@@ -3931,12 +5837,14 @@ var AuthGuard = ({
   useArtifactRegistry,
   useComposerRuntime,
   useMessageRuntime,
+  useOptionalSession,
   useResolvedSuggestions,
   useSession,
   useThread,
   useThreadRuntime,
   useTimbalRuntime,
   useTimbalStream,
+  useToolRunning,
   useUiCustomNodeRegistry,
   useUiDispatch,
   useUiEventEmitter,