npm - @timbal-ai/timbal-react - Versions diffs - 0.4.0 → 0.5.1 - Mend

@timbal-ai/timbal-react 0.4.0 → 0.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/index.cjs CHANGED Viewed

@@ -32,13 +32,12 @@ var index_exports = {};
 __export(index_exports, {
   ARTIFACT_AGENT_INSTRUCTIONS: () => ARTIFACT_AGENT_INSTRUCTIONS,
   ARTIFACT_FENCE_LANGUAGES: () => ARTIFACT_FENCE_LANGUAGES,
-  ActionBarMorePrimitive: () => import_react29.ActionBarMorePrimitive,
-  ActionBarPrimitive: () => import_react29.ActionBarPrimitive,
+  ActionBarPrimitive: () => import_react45.ActionBarPrimitive,
   ArtifactCard: () => ArtifactCard,
   ArtifactRegistryProvider: () => ArtifactRegistryProvider,
   ArtifactView: () => ArtifactView,
-  AssistantRuntimeProvider: () => import_react29.AssistantRuntimeProvider,
-  AuiIf: () => import_react29.AuiIf,
+  AssistantRuntimeProvider: () => import_react45.AssistantRuntimeProvider,
+  AuiIf: () => import_react45.AuiIf,
   AuthGuard: () => AuthGuard,
   Avatar: () => Avatar,
   AvatarFallback: () => AvatarFallback,
@@ -46,9 +45,7 @@ __export(index_exports, {
   Button: () => Button,
   ChartArtifactView: () => ChartArtifactView,
   Composer: () => Composer,
-  ComposerAddAttachment: () => ComposerAddAttachment,
-  ComposerAttachments: () => ComposerAttachments,
-  ComposerPrimitive: () => import_react29.ComposerPrimitive,
+  ComposerPrimitive: () => import_react45.ComposerPrimitive,
   DEFAULT_UPLOAD_ACCEPT: () => DEFAULT_UPLOAD_ACCEPT,
   Dialog: () => Dialog,
   DialogClose: () => DialogClose,
@@ -57,44 +54,27 @@ __export(index_exports, {
   DialogPortal: () => DialogPortal,
   DialogTitle: () => DialogTitle,
   DialogTrigger: () => DialogTrigger,
-  ErrorPrimitive: () => import_react29.ErrorPrimitive,
   HtmlArtifactView: () => HtmlArtifactView,
   JsonArtifactView: () => JsonArtifactView,
   MarkdownText: () => MarkdownText,
-  MessagePartPrimitive: () => import_react29.MessagePartPrimitive,
-  MessagePrimitive: () => import_react29.MessagePrimitive,
+  MessagePrimitive: () => import_react45.MessagePrimitive,
+  ModeToggle: () => ModeToggle,
   QuestionArtifactView: () => QuestionArtifactView,
-  STUDIO_INSET_LEFT: () => STUDIO_INSET_LEFT,
-  STUDIO_PILL_HEIGHT: () => STUDIO_PILL_HEIGHT,
-  STUDIO_SIDEBAR_GAP: () => STUDIO_SIDEBAR_GAP,
-  STUDIO_SIDEBAR_WIDTH: () => STUDIO_SIDEBAR_WIDTH,
-  STUDIO_TOPBAR_GAP: () => STUDIO_TOPBAR_GAP,
-  STUDIO_TOPBAR_HEIGHT: () => STUDIO_TOPBAR_HEIGHT,
   SessionProvider: () => SessionProvider,
   Shimmer: () => Shimmer,
+  StudioSidebar: () => StudioSidebar,
+  StudioWelcome: () => StudioWelcome,
   Suggestions: () => Suggestions,
-  SyntaxHighlighter: () => syntax_highlighter_default,
-  TIMBAL_V2_BORDER: () => TIMBAL_V2_BORDER,
-  TIMBAL_V2_FILL: () => TIMBAL_V2_FILL,
-  TIMBAL_V2_LABEL: () => TIMBAL_V2_LABEL,
-  TIMBAL_V2_PILL_SURFACE: () => TIMBAL_V2_PILL_SURFACE,
-  TIMBAL_V2_SECONDARY_CHROME: () => TIMBAL_V2_SECONDARY_CHROME,
-  TIMBAL_V2_SHADOW: () => TIMBAL_V2_SHADOW,
-  TIMBAL_V2_SIZE_HEIGHT: () => TIMBAL_V2_SIZE_HEIGHT,
-  TIMBAL_V2_SIZE_ICON: () => TIMBAL_V2_SIZE_ICON,
-  TIMBAL_V2_SIZE_LABEL_PX: () => TIMBAL_V2_SIZE_LABEL_PX,
   TableArtifactView: () => TableArtifactView,
   Thread: () => Thread,
-  ThreadPrimitive: () => import_react29.ThreadPrimitive,
+  ThreadPrimitive: () => import_react45.ThreadPrimitive,
   TimbalChat: () => TimbalChat,
   TimbalChatShell: () => TimbalChatShell,
+  TimbalMark: () => TimbalMark,
   TimbalRuntimeProvider: () => TimbalRuntimeProvider,
-  TimbalV2Button: () => TimbalV2Button,
+  TimbalStudioShell: () => TimbalStudioShell,
   ToolArtifactFallback: () => ToolArtifactFallback,
-  ToolBodyPresence: () => ToolBodyPresence,
   ToolFallback: () => ToolFallback,
-  ToolMotion: () => ToolMotion,
-  ToolPresence: () => ToolPresence,
   Tooltip: () => Tooltip,
   TooltipContent: () => TooltipContent,
   TooltipIconButton: () => TooltipIconButton,
@@ -104,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,
@@ -121,7 +99,6 @@ __export(index_exports, {
   isArtifact: () => isArtifact,
   isArtifactFenceLanguage: () => isArtifactFenceLanguage,
   isUiBinding: () => isUiBinding,
-  luxuryEase: () => luxuryEase,
   parseArtifactFromToolResult: () => parseArtifactFromToolResult,
   parseSSELine: () => import_timbal_sdk2.parseSSELine,
   refreshAccessToken: () => refreshAccessToken,
@@ -131,39 +108,14 @@ __export(index_exports, {
   setPath: () => setPath,
   setRefreshToken: () => setRefreshToken,
   splitMarkdownByArtifacts: () => splitMarkdownByArtifacts,
-  studioArtifactShellClass: () => studioArtifactShellClass,
-  studioChromeShellStyle: () => studioChromeShellStyle,
-  studioComposeInputShellClass: () => studioComposeInputShellClass,
-  studioComposerIoWellClass: () => studioComposerIoWellClass,
-  studioIntegrationBorder: () => studioIntegrationBorder,
-  studioIntegrationCardClass: () => studioIntegrationCardClass,
-  studioIntegrationIconTileClass: () => studioIntegrationIconTileClass,
-  studioIntegrationSurfaceSolid: () => studioIntegrationSurfaceSolid,
-  studioListRowButtonClass: () => studioListRowButtonClass,
-  studioPillSurfaceClass: () => studioPillSurfaceClass,
-  studioPlaygroundGradientClass: () => studioPlaygroundGradientClass,
-  studioQuestionOptionClass: () => studioQuestionOptionClass,
-  studioQuestionOptionSelectedClass: () => studioQuestionOptionSelectedClass,
-  studioSecondaryChromeClass: () => studioSecondaryChromeClass,
-  studioTimelineActionClass: () => studioTimelineActionClass,
-  studioTimelineBodyPadClass: () => studioTimelineBodyPadClass,
-  studioTimelineChevronClass: () => studioTimelineChevronClass,
-  studioTimelineDetailClass: () => studioTimelineDetailClass,
-  studioTimelineRowButtonClass: () => studioTimelineRowButtonClass,
-  studioTimelineShimmerActionClass: () => studioTimelineShimmerActionClass,
-  studioTimelineTextClass: () => studioTimelineTextClass,
-  studioToolCardShellClass: () => studioToolCardShellClass,
-  studioTopbarIconPillClass: () => studioTopbarIconPillClass,
-  studioTopbarPillHeightClass: () => studioTopbarPillHeightClass,
-  toolPresenceTransition: () => toolPresenceTransition,
   useArtifactRegistry: () => useArtifactRegistry,
-  useAuiState: () => import_react29.useAuiState,
-  useComposerRuntime: () => import_react29.useComposerRuntime,
-  useMessageRuntime: () => import_react29.useMessageRuntime,
+  useComposerRuntime: () => import_react45.useComposerRuntime,
+  useMessageRuntime: () => import_react45.useMessageRuntime,
+  useOptionalSession: () => useOptionalSession,
   useResolvedSuggestions: () => useResolvedSuggestions,
   useSession: () => useSession,
-  useThread: () => import_react29.useThread,
-  useThreadRuntime: () => import_react29.useThreadRuntime,
+  useThread: () => import_react45.useThread,
+  useThreadRuntime: () => import_react45.useThreadRuntime,
   useTimbalRuntime: () => useTimbalRuntime,
   useTimbalStream: () => useTimbalStream,
   useToolRunning: () => useToolRunning,
@@ -1034,9 +986,10 @@ function findParentIdFromAuiParent(messages, auiParentId) {
 var import_timbal_sdk2 = require("@timbal-ai/timbal-sdk");
 // src/components/thread.tsx
-var import_react25 = require("@assistant-ui/react");
+var import_react25 = require("react");
+var import_react26 = require("@assistant-ui/react");
 var import_lucide_react8 = require("lucide-react");
-var import_react26 = require("motion/react");
+var import_react27 = require("motion/react");
 // src/components/attachment.tsx
 var import_react4 = require("react");
@@ -1250,7 +1203,7 @@ var import_react3 = require("react");
 var React = __toESM(require("react"), 1);
 var import_radix_ui4 = require("radix-ui");
-// src/ui/timbal-v2-button-tokens.ts
+// src/design/button-tokens.ts
 var TIMBAL_V2_SIZE_HEIGHT = {
   xs: "min-h-8 h-8",
   sm: "min-h-9 h-9",
@@ -1270,39 +1223,62 @@ var TIMBAL_V2_SIZE_LABEL_PX = {
   lg: "px-6"
 };
 var TIMBAL_V2_FILL = {
-  primary: "bg-gradient-to-b from-neutral-800 to-black group-hover/tbv2:from-neutral-700 group-hover/tbv2:to-neutral-900 group-active/tbv2:from-black group-active/tbv2:to-black dark:from-white dark:to-neutral-200 dark:group-hover/tbv2:from-white dark:group-hover/tbv2:to-neutral-100 dark:group-active/tbv2:from-neutral-200 dark:group-active/tbv2:to-neutral-400",
-  informative: "bg-blue-600 group-active/tbv2:[background-image:linear-gradient(to_top,rgba(0,0,0,0.08),transparent_55%)]",
-  destructive: "bg-gradient-to-b from-white to-neutral-50/75 group-hover/tbv2:from-red-50/90 group-hover/tbv2:to-red-100/70 group-active/tbv2:from-red-100/90 group-active/tbv2:to-red-200/65 dark:from-white/[0.05] dark:to-white/[0.025] dark:group-hover/tbv2:from-red-500/12 dark:group-hover/tbv2:to-red-500/8 dark:group-active/tbv2:from-red-500/20 dark:group-active/tbv2:to-red-500/12",
-  secondary: "bg-gradient-to-b from-white to-neutral-50/70 group-hover/tbv2:from-neutral-50/50 group-hover/tbv2:to-neutral-100/65 group-active/tbv2:from-neutral-100/70 group-active/tbv2:to-neutral-200/65 dark:from-white/[0.05] dark:to-white/[0.025] dark:group-hover/tbv2:from-white/[0.07] dark:group-hover/tbv2:to-white/[0.045] dark:group-active/tbv2:from-white/[0.10] dark:group-active/tbv2:to-white/[0.07]",
-  ghost: "bg-transparent group-hover/tbv2:bg-neutral-100/70 group-active/tbv2:bg-neutral-200/70 dark:group-hover/tbv2:bg-white/10 dark:group-active/tbv2:bg-white/15",
+  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-white dark:text-neutral-900",
-  informative: "text-white",
-  destructive: "text-destructive dark:text-red-400",
+  primary: "text-primary-foreground",
+  informative: "text-primary-foreground",
+  destructive: "text-destructive",
   secondary: "text-foreground",
   ghost: "text-foreground",
-  link: "text-foreground underline decoration-black/25 underline-offset-2 group-hover/tbv2:decoration-black/45 dark:decoration-white/25 dark:group-hover/tbv2:decoration-white/45"
+  link: "text-foreground underline decoration-foreground/25 underline-offset-2 group-hover/tbv2:decoration-foreground/45"
 };
 var TIMBAL_V2_BORDER = {
   primary: "",
-  informative: "border border-white/15 dark:border-white/10",
-  destructive: "border border-destructive/45 dark:border-red-500/55",
-  secondary: "border border-neutral-200/80 dark:border-white/[0.08]",
+  informative: "border border-foreground/15",
+  destructive: "border border-destructive/45",
+  secondary: "border border-border",
   ghost: "",
   link: ""
 };
 var TIMBAL_V2_SHADOW = {
-  primary: "shadow-sm shadow-black/15 dark:shadow-black/40",
-  informative: "shadow-sm shadow-blue-900/20 dark:shadow-black/40",
-  destructive: "shadow-[0_1px_2px_-0.5px_rgba(0,0,0,0.05)] dark:shadow-[0_1px_3px_rgba(0,0,0,0.22)]",
-  secondary: "shadow-[0_1px_2px_-0.5px_rgba(0,0,0,0.05)] dark:shadow-[0_1px_3px_rgba(0,0,0,0.22)]",
+  primary: "shadow-card",
+  informative: "shadow-card",
+  destructive: "shadow-card",
+  secondary: "shadow-card",
   ghost: "",
   link: ""
 };
-var TIMBAL_V2_PILL_SURFACE = "bg-gradient-to-b from-white to-neutral-50/70 border border-neutral-200/80 shadow-[0_1px_2px_-0.5px_rgba(0,0,0,0.05)] dark:from-white/[0.05] dark:to-white/[0.025] dark:border-white/[0.08] dark:shadow-[0_1px_3px_rgba(0,0,0,0.22)]";
-var TIMBAL_V2_SECONDARY_CHROME = "bg-gradient-to-b from-white to-neutral-50/70 border border-neutral-200/80 shadow-[0_1px_2px_-0.5px_rgba(0,0,0,0.05)] transition-[background-color,box-shadow,border-color] duration-200 ease-in-out hover:from-neutral-50/40 hover:to-neutral-100/60 active:from-neutral-100/65 active:to-neutral-200/65 dark:from-white/[0.05] dark:to-white/[0.025] dark:border-white/[0.08] dark:shadow-[0_1px_3px_rgba(0,0,0,0.22)] dark:hover:from-white/[0.07] dark:hover:to-white/[0.045] dark:active:from-white/[0.10] dark:active:to-white/[0.07]";
+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");
@@ -1334,7 +1310,7 @@ var TimbalV2Button = React.forwardRef(function TimbalV2Button2({
       "data-variant": variant,
       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-neutral-400/60 focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+        "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],
@@ -1511,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" })
     }
   ) });
 };
@@ -1535,7 +1511,7 @@ var ComposerAddAttachment = () => {
       tooltip: "Add Attachment",
       side: "bottom",
       variant: "secondary",
-      className: "aui-composer-add-attachment shrink-0 text-neutral-500 dark:text-muted-foreground",
+      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-4 stroke-[1.5]" })
     }
@@ -1885,30 +1861,19 @@ var import_react7 = require("react");
 var import_react8 = require("@assistant-ui/react");
 var import_lucide_react3 = require("lucide-react");
-// src/ui/chrome.ts
-var STUDIO_TOPBAR_GAP = "0.5rem";
-var STUDIO_TOPBAR_HEIGHT = "3rem";
-var STUDIO_PILL_HEIGHT = "2.5rem";
-var STUDIO_SIDEBAR_GAP = "0.5rem";
-var STUDIO_SIDEBAR_WIDTH = "3rem";
-var STUDIO_INSET_LEFT = `calc(${STUDIO_SIDEBAR_GAP} + ${STUDIO_SIDEBAR_WIDTH})`;
-var studioChromeShellStyle = {
-  "--studio-topbar-gap": STUDIO_TOPBAR_GAP,
-  "--studio-topbar-height": STUDIO_TOPBAR_HEIGHT,
-  "--studio-chrome-pill-height": STUDIO_PILL_HEIGHT,
-  "--studio-inset-top": `calc(${STUDIO_TOPBAR_GAP} + ${STUDIO_TOPBAR_HEIGHT})`,
-  "--studio-sidebar-gap": STUDIO_SIDEBAR_GAP,
-  "--studio-sidebar-width": STUDIO_SIDEBAR_WIDTH,
-  "--studio-inset-left": STUDIO_INSET_LEFT
-};
+// 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-neutral-200/60 via-neutral-100/30 to-background dark:from-zinc-800 dark:via-zinc-900 dark:to-zinc-950";
-var studioComposeInputShellClass = "flex w-full flex-col rounded-2xl border border-neutral-200/60 bg-background shadow-lg shadow-black/5 outline-none transition-[box-shadow,border-color] focus-within:border-neutral-400/80 focus-within:ring-2 focus-within:ring-foreground/5 focus-within:shadow-xl focus-within:shadow-black/10 dark:border-white/12 dark:bg-zinc-900 dark:shadow-black/20 dark:focus-within:border-white/22 dark:focus-within:ring-0";
-var studioPillSurfaceClass = TIMBAL_V2_PILL_SURFACE;
+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-white bg-gradient-to-b from-white to-neutral-50/70 shadow-[0_1px_2px_-0.5px_rgba(0,0,0,0.05)] dark:bg-zinc-900 dark:from-white/[0.05] dark:to-white/[0.025] dark:shadow-[0_1px_3px_rgba(0,0,0,0.22)]";
-var studioIntegrationBorder = "border border-neutral-200/80 dark:border-white/[0.08]";
+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,
@@ -1923,8 +1888,8 @@ 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-neutral-300 dark:hover:border-white/15",
-  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/15 focus-visible:ring-offset-2 focus-visible:ring-offset-background dark:focus-visible:ring-white/20"
+  "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",
@@ -1935,6 +1900,43 @@ 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(
@@ -1960,10 +1962,10 @@ 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-neutral-100/80 dark:hover:bg-white/[0.05] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/15 focus-visible:ring-offset-2";
+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-neutral-200/80 bg-neutral-50/90 ring-1 ring-foreground/10 dark:border-white/[0.12] dark:bg-white/[0.06] dark:ring-white/10"
+  "border-border bg-accent ring-1 ring-foreground/10"
 );
 // src/artifacts/question-artifact.tsx
@@ -1977,7 +1979,7 @@ var OptionRadio = ({ selected }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx
   {
     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-neutral-300 bg-background dark:border-white/20"
+      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
@@ -2233,15 +2235,15 @@ 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/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "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-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",
+        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 dark:hover:bg-accent/50",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline"
       },
       size: {
@@ -2873,7 +2875,7 @@ var CodeHeader = ({ language, code }) => {
     if (!code || isCopied) return;
     copyToClipboard(code);
   };
-  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-zinc-100 px-4 py-2 dark:bg-zinc-800/80", children: [
+  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
@@ -3080,7 +3082,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
     "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
@@ -3092,7 +3094,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       "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
@@ -3508,7 +3510,7 @@ var ComposerInput = ({
     import_react22.ComposerPrimitive.Input,
     {
       placeholder,
-      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-neutral-400 focus-visible:ring-0 dark:placeholder:text-neutral-500",
+      className: "aui-composer-input max-h-60 min-h-14 w-full resize-none bg-composer-bg 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",
@@ -3518,7 +3520,7 @@ var ComposerInput = ({
   );
 };
 var ComposerToolbar = ({ showAttachments, toolbar, 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: [
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "aui-composer-action-wrapper relative z-[1] flex items-center justify-between gap-1 bg-composer-bg 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
@@ -3590,9 +3592,9 @@ var SuggestionRow = ({ suggestion }) => {
       onClick,
       className: cn("aui-thread-suggestion", studioListRowButtonClass),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "aui-thread-suggestion-icon shrink-0 text-neutral-500 dark: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.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 dark:text-foreground/95", children: suggestion.title }),
+          /* @__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 })
         ] })
       ]
@@ -3625,6 +3627,75 @@ function useResolvedSuggestions(source) {
   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_jsx_runtime27 = require("react/jsx-runtime");
 var Thread = ({
@@ -3644,6 +3715,9 @@ var Thread = ({
   const EditComposerSlot = components?.EditComposer ?? EditComposer;
   const ScrollToBottomSlot = components?.ScrollToBottom ?? ThreadScrollToBottom;
   const SuggestionsSlot = components?.Suggestions ?? Suggestions;
+  (0, import_react25.useEffect)(() => {
+    scheduleThemeSanityCheck();
+  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     ArtifactRegistryProvider,
     {
@@ -3651,7 +3725,7 @@ var Thread = ({
       override: artifacts?.override,
       children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(UiEventProvider, { onEvent: onArtifactEvent ?? (() => {
       }), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-        import_react25.ThreadPrimitive.Root,
+        import_react26.ThreadPrimitive.Root,
         {
           className: cn(
             "aui-root aui-thread-root @container flex h-full flex-col bg-background",
@@ -3659,10 +3733,10 @@ var Thread = ({
           ),
           style: { ["--thread-max-width"]: maxWidth },
           children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
-            import_react25.ThreadPrimitive.Viewport,
+            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",
+              className: "aui-thread-viewport relative flex flex-1 flex-col overflow-x-auto overflow-y-scroll scroll-pb-4 px-4 pt-4",
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   WelcomeSlot,
@@ -3673,7 +3747,7 @@ var Thread = ({
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-                  import_react25.ThreadPrimitive.Messages,
+                  import_react26.ThreadPrimitive.Messages,
                   {
                     components: {
                       UserMessage: UserMessageSlot,
@@ -3682,7 +3756,7 @@ var Thread = ({
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react25.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_runtime27.jsxs)(import_react26.ThreadPrimitive.ViewportFooter, { className: "aui-thread-viewport-footer sticky bottom-0 z-10 mx-auto mt-auto flex w-full max-w-(--thread-max-width) isolate flex-col gap-4 bg-transparent pt-2 pb-4 md:pb-6", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ScrollToBottomSlot, {}),
                   /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ComposerSlot, { placeholder: composerPlaceholder })
                 ] })
@@ -3695,7 +3769,7 @@ var Thread = ({
   );
 };
 var ThreadScrollToBottom = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react25.ThreadPrimitive.ScrollToBottom, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.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",
@@ -3733,20 +3807,20 @@ var ThreadWelcome = ({
   suggestions,
   Suggestions: SuggestionsSlot = Suggestions
 }) => {
-  const isEmpty = (0, import_react25.useThread)((s) => s.messages.length === 0);
+  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_react26.motion.div,
+      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_react26.motion.div, { variants: welcomeIcon, className: "mb-5", children: config.icon }),
+          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_react26.motion.h1,
+            import_react27.motion.h1,
             {
               variants: welcomeItem,
               className: "aui-thread-welcome-message-inner font-semibold text-2xl",
@@ -3754,7 +3828,7 @@ var ThreadWelcome = ({
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-            import_react26.motion.p,
+            import_react27.motion.p,
             {
               variants: welcomeItem,
               className: "aui-thread-welcome-message-inner mt-2 text-muted-foreground",
@@ -3768,18 +3842,18 @@ var ThreadWelcome = ({
   ] });
 };
 var MessageError = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react25.MessagePrimitive.Error, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react25.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_runtime27.jsx)(import_react25.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_runtime27.jsxs)(
-    import_react25.MessagePrimitive.Root,
+    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_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_react25.MessagePrimitive.Parts,
+            import_react26.MessagePrimitive.Parts,
             {
               components: {
                 Text: MarkdownText,
@@ -3791,7 +3865,7 @@ var AssistantMessage = () => {
           ),
           /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MessageError, {})
         ] }),
-        /* @__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, {}) })
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "aui-assistant-message-footer mt-1 mb-3 ml-1 flex", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(AssistantActionBar, {}) })
       ]
     }
   );
@@ -3801,30 +3875,29 @@ var ASSISTANT_ACTION_ICON_CLASS = cn(
   // 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-neutral-100/50",
-  "dark:[&>span:first-child]:group-hover/tbv2:bg-white/8"
+  "[&>span:first-child]:group-hover/tbv2:bg-muted/70"
 );
 var AssistantActionBar = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
-    import_react25.ActionBarPrimitive.Root,
+    import_react26.ActionBarPrimitive.Root,
     {
       hideWhenRunning: true,
-      autohide: "not-last",
+      autohide: "never",
       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_runtime27.jsx)(import_react25.ActionBarPrimitive.Copy, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+        /* @__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_react25.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_react25.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.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_react25.ActionBarPrimitive.Reload, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react26.ActionBarPrimitive.Reload, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           TooltipIconButton,
           {
             tooltip: "Regenerate",
@@ -3833,8 +3906,8 @@ var AssistantActionBar = () => {
             children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react8.RefreshCwIcon, { className: "size-3" })
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react25.ActionBarMorePrimitive.Root, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react25.ActionBarMorePrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        /* @__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",
@@ -3847,12 +3920,12 @@ var AssistantActionBar = () => {
             }
           ) }),
           /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-            import_react25.ActionBarMorePrimitive.Content,
+            import_react26.ActionBarMorePrimitive.Content,
             {
               side: "bottom",
               align: "start",
-              className: "aui-action-bar-more-content z-50 min-w-36 overflow-hidden rounded-lg border border-neutral-200 bg-white p-1 text-foreground shadow-md dark:border-white/10 dark:bg-zinc-900",
-              children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react25.ActionBarPrimitive.ExportMarkdown, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react25.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-neutral-100 focus:bg-neutral-100 dark:hover:bg-zinc-800 dark:focus:bg-zinc-800", children: [
+              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"
               ] }) })
@@ -3864,25 +3937,25 @@ var AssistantActionBar = () => {
   );
 };
 var UserMessageText = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "whitespace-pre-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react25.MessagePartPrimitive.Text, { smooth: false }) });
+  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_runtime27.jsxs)(
-    import_react25.MessagePrimitive.Root,
+    import_react26.MessagePrimitive.Root,
     {
       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_runtime27.jsx)(UserMessageAttachments, {}),
         /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
-          import_react26.motion.div,
+          import_react27.motion.div,
           {
-            className: "aui-user-message-content relative inline-block max-w-[80%] rounded-2xl bg-neutral-200 px-4 py-2.5 text-foreground dark:bg-neutral-700",
+            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_react25.MessagePrimitive.Parts, { components: { Text: UserMessageText } }),
+              /* @__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, {}) })
             ]
           }
@@ -3893,12 +3966,12 @@ var UserMessage = () => {
 };
 var UserActionBar = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-    import_react25.ActionBarPrimitive.Root,
+    import_react26.ActionBarPrimitive.Root,
     {
       hideWhenRunning: true,
-      autohide: "not-last",
+      autohide: "never",
       className: "aui-user-action-bar-root flex flex-col items-end",
-      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react25.ActionBarPrimitive.Edit, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react26.ActionBarPrimitive.Edit, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         TooltipIconButton,
         {
           tooltip: "Edit",
@@ -3911,17 +3984,17 @@ var UserActionBar = () => {
   );
 };
 var EditComposer = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react25.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_react25.ComposerPrimitive.Root, { className: "aui-edit-composer-root ml-auto flex w-full max-w-[85%] flex-col rounded-2xl bg-muted", children: [
+  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_react25.ComposerPrimitive.Input,
+      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_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_react25.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_react25.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TimbalV2Button, { variant: "primary", size: "sm", children: "Update" }) })
+      /* @__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" }) })
     ] })
   ] }) });
 };
@@ -3953,193 +4026,6 @@ function TimbalChat({
   );
 }
-// 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}]}
-\`\`\`
-The alias \`\`\`timbal\`\`\` is also accepted.
-### Built-in artifact types
-| \`type\` | Use for |
-|---|---|
-| \`chart\` | Bar, line, area, or pie charts. Fields: \`data\`, optional \`chartType\`, \`xKey\`, \`dataKey\`, \`title\`, \`unit\`. |
-| \`table\` | Tabular data. Fields: \`rows\`, optional \`columns\`, \`title\`. |
-| \`question\` | In-thread multiple choice. Fields: \`options: [{ id, label, description? }]\`, optional \`prompt\`, \`multi\`. User replies are sent back as a normal user message. |
-| \`html\` | Custom HTML/CSS/JS in an iframe. Fields: \`content\` (HTML document or fragment), optional \`title\`, \`height\`, \`sandboxed\` (default \`true\`; set \`false\` for unrestricted scripts/CDN). |
-| \`json\` | Fallback structured view. Fields: \`data\`, optional \`title\`. |
-| \`ui\` | **Interactive UI** composed from a fixed node palette (hover, click, drag). See below. |
-### When to use \`type: "html"\`
-Use \`html\` when the user wants a **rich visual or interactive page** that does not fit the \`ui\` palette \u2014 e.g. styled layouts, SVG graphics, CSS animations, canvas, small games, calculators, or multi-section mockups. Pass a full HTML document or a body fragment in \`content\`.
-- Inline \`<style>\`, \`<script>\`, SVG, and canvas are supported.
-- Default \`sandboxed: true\` runs in an isolated iframe with scripts enabled.
-- Set \`sandboxed: false\` only for trusted content that needs external CDN scripts/styles or full DOM freedom.
-- Prefer \`ui\` when controls should send chat messages or host events; prefer \`html\` for self-contained mini-apps and visual demos.
-### When to use \`type: "ui"\`
-Use a \`ui\` artifact when the user should **hover, click, drag, or adjust controls** in-thread and those actions should integrate with the chat runtime (messages, \`onArtifactEvent\`). For standalone visual/interactive HTML, use \`html\` instead.
-Each \`ui\` artifact has:
-- \`initialState\` \u2014 optional object seeding local state (per widget instance).
-- \`root\` \u2014 a single node tree (see node kinds below).
-- optional \`title\` \u2014 card heading.
-**Bindings:** anywhere a primitive is accepted, you may use \`{ "$bind": "dotted.path" }\` to read from \`initialState\` / local state (e.g. \`{ "$bind": "qty" }\`).
-**Actions:** nodes may attach \`onClick\`, \`onChange\`, or \`onDragEnd\` with one action or an array:
-| Action | Shape | Effect |
-|---|---|---|
-| User message | \`{ "kind": "message", "text": "..." }\` or \`{ "kind": "message", "text": { "$bind": "path" } }\` | Sends text as the next user message. |
-| Set state | \`{ "kind": "set", "path": "foo", "value": 1 }\` | Writes local widget state. |
-| Toggle boolean | \`{ "kind": "toggle", "path": "enabled" }\` | Flips a boolean at \`path\`. |
-| Host event | \`{ "kind": "emit", "name": "event-name", "payload": { ... } }\` | Bubbles to the host app (\`onArtifactEvent\` on \`<Thread>\`). |
-### \`ui\` node palette (\`root.kind\`)
-| \`kind\` | Purpose | Key fields |
-|---|---|---|
-| \`box\` | Layout container | \`children\`, \`direction\` (\`row\`/\`col\`), \`gap\`, \`padding\`, \`align\`, \`justify\`, \`wrap\` |
-| \`text\` | Body text | \`value\`, optional \`muted\`, \`size\`, \`weight\` |
-| \`heading\` | Heading | \`value\`, optional \`level\` (1\u20134) |
-| \`badge\` | Pill label | \`value\`, optional \`tone\` (\`default\`, \`primary\`, \`success\`, \`warn\`, \`danger\`) |
-| \`button\` | Clickable button | \`label\`, optional \`variant\`, \`size\`, \`disabled\`, \`onClick\` |
-| \`toggle\` | Boolean switch | \`binding\` (state path), optional \`label\`, \`onChange\` |
-| \`slider\` | Numeric range | \`binding\`, optional \`min\`, \`max\`, \`step\`, \`label\`, \`showValue\`, \`onChange\` |
-| \`tooltip\` | Hover tooltip | \`content\`, \`child\` (single node), optional \`side\` |
-| \`draggable\` | Drag gesture | \`child\`, optional \`axis\` (\`x\`/\`y\`/\`both\`), \`snapBack\`, \`onDragEnd\` |
-| \`custom\` | Host-registered widget | \`name\`, optional \`props\`, \`children\` \u2014 only if the app registered that name |
-### Example \`ui\` artifact
-\`\`\`json
-{
-  "type": "ui",
-  "title": "Configure plan",
-  "initialState": { "qty": 1, "premium": false },
-  "root": {
-    "kind": "box",
-    "direction": "col",
-    "gap": 3,
-    "children": [
-      { "kind": "heading", "value": "Choose quantity", "level": 3 },
-      {
-        "kind": "tooltip",
-        "content": "Drag to adjust quantity",
-        "child": {
-          "kind": "slider",
-          "binding": "qty",
-          "min": 1,
-          "max": 50,
-          "label": "Quantity",
-          "onChange": { "kind": "emit", "name": "qty-changed" }
-        }
-      },
-      { "kind": "toggle", "binding": "premium", "label": "Premium support" },
-      {
-        "kind": "button",
-        "label": "Confirm",
-        "onClick": { "kind": "message", "text": { "$bind": "qty" } }
-      }
-    ]
-  }
-}
-\`\`\`
-### Rules
-- Always set \`type\` to a built-in value above unless the app documented a custom type.
-- Prefer \`ui\` over \`html\` when actions must bubble to the host chat (\`message\`, \`emit\`).
-- Prefer \`question\` for simple A/B/C choices; use \`ui\` when you need sliders, toggles, drag, or multi-control layouts.
-- Keep \`data\` arrays reasonably small (charts/tables).
-### After calling an artifact tool (critical)
-When you call a tool that returns an artifact (\`make_chart\`, \`ask_question\`, \`show_table\`, \`show_html\`, \`make_ui_demo\`, etc.):
-1. **Do not** paste, quote, paraphrase as JSON, or fence the tool return value in your assistant message. The chat UI already renders it from the tool result.
-2. **Do not** emit a matching \`\`\`timbal-artifact\`\`\` block for the same payload \u2014 pick **one** channel (tool result only).
-3. Your follow-up text should be **empty**, or at most **one short sentence** (e.g. "Pick an option above." / "Try the controls."). Never include \`type\`, \`options\`, \`data\`, or dict/JSON syntax.
-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_react29 = require("@assistant-ui/react");
-// src/hooks/use-workforces.ts
-var import_react27 = require("react");
-function useWorkforces(options = {}) {
-  const { baseUrl = "/api", fetch: fetchFn, pickInitial } = options;
-  const [workforces, setWorkforces] = (0, import_react27.useState)([]);
-  const [selectedId, setSelectedId] = (0, import_react27.useState)("");
-  const [isLoading, setIsLoading] = (0, import_react27.useState)(true);
-  const [error, setError] = (0, import_react27.useState)(null);
-  const fetchFnRef = (0, import_react27.useRef)(fetchFn ?? authFetch);
-  (0, import_react27.useEffect)(() => {
-    fetchFnRef.current = fetchFn ?? authFetch;
-  }, [fetchFn]);
-  const pickInitialRef = (0, import_react27.useRef)(pickInitial);
-  (0, import_react27.useEffect)(() => {
-    pickInitialRef.current = pickInitial;
-  }, [pickInitial]);
-  const load = (0, import_react27.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_react27.useEffect)(() => {
-    load();
-  }, [load]);
-  const selected = (0, import_react27.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_react9 = require("lucide-react");
 var import_jsx_runtime29 = require("react/jsx-runtime");
@@ -4174,7 +4060,7 @@ var WorkforceSelector = ({
             children: [
               !value && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("option", { value: "", children: placeholder }),
               workforces.map((w) => {
-                const id = idOf2(w);
+                const id = idOf(w);
                 return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("option", { value: id, children: w.name ?? id }, id);
               })
             ]
@@ -4191,10 +4077,113 @@ var WorkforceSelector = ({
     }
   );
 };
+function idOf(item) {
+  return item.id ?? item.uid ?? item.name ?? "";
+}
+// 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 ?? "";
 }
+// 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"
+};
 // src/components/chat-shell.tsx
 var import_jsx_runtime30 = require("react/jsx-runtime");
 var TimbalChatShell = ({
@@ -4273,9 +4262,234 @@ var TimbalChatShell = ({
   );
 };
-// src/auth/provider.tsx
-var import_react28 = require("react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+// 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;
@@ -4283,22 +4497,26 @@ function isInsideIframe() {
     return true;
   }
 }
-var SessionContext = (0, import_react28.createContext)(void 0);
+var SessionContext = (0, import_react33.createContext)(void 0);
 var useSession = () => {
-  const context = (0, import_react28.useContext)(SessionContext);
+  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_react28.useState)(null);
-  const [loading, setLoading] = (0, import_react28.useState)(enabled);
-  const [embedded] = (0, import_react28.useState)(isInsideIframe);
-  (0, import_react28.useEffect)(() => {
+  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;
@@ -4359,7 +4577,7 @@ var SessionProvider = ({
       messageCleanup?.();
     };
   }, [enabled, embedded]);
-  const logout = (0, import_react28.useCallback)(() => {
+  const logout = (0, import_react33.useCallback)(() => {
     clearTokens();
     setUser(null);
     const returnTo = encodeURIComponent(
@@ -4369,7 +4587,7 @@ var SessionProvider = ({
       () => window.location.href = `/api/auth/login?return_to=${returnTo}`
     );
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     SessionContext.Provider,
     {
       value: {
@@ -4384,9 +4602,1134 @@ var SessionProvider = ({
   );
 };
+// 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}]}
+\`\`\`
+The alias \`\`\`timbal\`\`\` is also accepted.
+### Built-in artifact types
+| \`type\` | Use for |
+|---|---|
+| \`chart\` | Bar, line, area, or pie charts. Fields: \`data\`, optional \`chartType\`, \`xKey\`, \`dataKey\`, \`title\`, \`unit\`. |
+| \`table\` | Tabular data. Fields: \`rows\`, optional \`columns\`, \`title\`. |
+| \`question\` | In-thread multiple choice. Fields: \`options: [{ id, label, description? }]\`, optional \`prompt\`, \`multi\`. User replies are sent back as a normal user message. |
+| \`html\` | Custom HTML/CSS/JS in an iframe. Fields: \`content\` (HTML document or fragment), optional \`title\`, \`height\`, \`sandboxed\` (default \`true\`; set \`false\` for unrestricted scripts/CDN). |
+| \`json\` | Fallback structured view. Fields: \`data\`, optional \`title\`. |
+| \`ui\` | **Interactive UI** composed from a fixed node palette (hover, click, drag). See below. |
+### When to use \`type: "html"\`
+Use \`html\` when the user wants a **rich visual or interactive page** that does not fit the \`ui\` palette \u2014 e.g. styled layouts, SVG graphics, CSS animations, canvas, small games, calculators, or multi-section mockups. Pass a full HTML document or a body fragment in \`content\`.
+- Inline \`<style>\`, \`<script>\`, SVG, and canvas are supported.
+- Default \`sandboxed: true\` runs in an isolated iframe with scripts enabled.
+- Set \`sandboxed: false\` only for trusted content that needs external CDN scripts/styles or full DOM freedom.
+- Prefer \`ui\` when controls should send chat messages or host events; prefer \`html\` for self-contained mini-apps and visual demos.
+### When to use \`type: "ui"\`
+Use a \`ui\` artifact when the user should **hover, click, drag, or adjust controls** in-thread and those actions should integrate with the chat runtime (messages, \`onArtifactEvent\`). For standalone visual/interactive HTML, use \`html\` instead.
+Each \`ui\` artifact has:
+- \`initialState\` \u2014 optional object seeding local state (per widget instance).
+- \`root\` \u2014 a single node tree (see node kinds below).
+- optional \`title\` \u2014 card heading.
+**Bindings:** anywhere a primitive is accepted, you may use \`{ "$bind": "dotted.path" }\` to read from \`initialState\` / local state (e.g. \`{ "$bind": "qty" }\`).
+**Actions:** nodes may attach \`onClick\`, \`onChange\`, or \`onDragEnd\` with one action or an array:
+| Action | Shape | Effect |
+|---|---|---|
+| User message | \`{ "kind": "message", "text": "..." }\` or \`{ "kind": "message", "text": { "$bind": "path" } }\` | Sends text as the next user message. |
+| Set state | \`{ "kind": "set", "path": "foo", "value": 1 }\` | Writes local widget state. |
+| Toggle boolean | \`{ "kind": "toggle", "path": "enabled" }\` | Flips a boolean at \`path\`. |
+| Host event | \`{ "kind": "emit", "name": "event-name", "payload": { ... } }\` | Bubbles to the host app (\`onArtifactEvent\` on \`<Thread>\`). |
+### \`ui\` node palette (\`root.kind\`)
+| \`kind\` | Purpose | Key fields |
+|---|---|---|
+| \`box\` | Layout container | \`children\`, \`direction\` (\`row\`/\`col\`), \`gap\`, \`padding\`, \`align\`, \`justify\`, \`wrap\` |
+| \`text\` | Body text | \`value\`, optional \`muted\`, \`size\`, \`weight\` |
+| \`heading\` | Heading | \`value\`, optional \`level\` (1\u20134) |
+| \`badge\` | Pill label | \`value\`, optional \`tone\` (\`default\`, \`primary\`, \`success\`, \`warn\`, \`danger\`) |
+| \`button\` | Clickable button | \`label\`, optional \`variant\`, \`size\`, \`disabled\`, \`onClick\` |
+| \`toggle\` | Boolean switch | \`binding\` (state path), optional \`label\`, \`onChange\` |
+| \`slider\` | Numeric range | \`binding\`, optional \`min\`, \`max\`, \`step\`, \`label\`, \`showValue\`, \`onChange\` |
+| \`tooltip\` | Hover tooltip | \`content\`, \`child\` (single node), optional \`side\` |
+| \`draggable\` | Drag gesture | \`child\`, optional \`axis\` (\`x\`/\`y\`/\`both\`), \`snapBack\`, \`onDragEnd\` |
+| \`custom\` | Host-registered widget | \`name\`, optional \`props\`, \`children\` \u2014 only if the app registered that name |
+### Example \`ui\` artifact
+\`\`\`json
+{
+  "type": "ui",
+  "title": "Configure plan",
+  "initialState": { "qty": 1, "premium": false },
+  "root": {
+    "kind": "box",
+    "direction": "col",
+    "gap": 3,
+    "children": [
+      { "kind": "heading", "value": "Choose quantity", "level": 3 },
+      {
+        "kind": "tooltip",
+        "content": "Drag to adjust quantity",
+        "child": {
+          "kind": "slider",
+          "binding": "qty",
+          "min": 1,
+          "max": 50,
+          "label": "Quantity",
+          "onChange": { "kind": "emit", "name": "qty-changed" }
+        }
+      },
+      { "kind": "toggle", "binding": "premium", "label": "Premium support" },
+      {
+        "kind": "button",
+        "label": "Confirm",
+        "onClick": { "kind": "message", "text": { "$bind": "qty" } }
+      }
+    ]
+  }
+}
+\`\`\`
+### Rules
+- Always set \`type\` to a built-in value above unless the app documented a custom type.
+- Prefer \`ui\` over \`html\` when actions must bubble to the host chat (\`message\`, \`emit\`).
+- Prefer \`question\` for simple A/B/C choices; use \`ui\` when you need sliders, toggles, drag, or multi-control layouts.
+- Keep \`data\` arrays reasonably small (charts/tables).
+### After calling an artifact tool (critical)
+When you call a tool that returns an artifact (\`make_chart\`, \`ask_question\`, \`show_table\`, \`show_html\`, \`make_ui_demo\`, etc.):
+1. **Do not** paste, quote, paraphrase as JSON, or fence the tool return value in your assistant message. The chat UI already renders it from the tool result.
+2. **Do not** emit a matching \`\`\`timbal-artifact\`\`\` block for the same payload \u2014 pick **one** channel (tool result only).
+3. Your follow-up text should be **empty**, or at most **one short sentence** (e.g. "Pick an option above." / "Try the controls."). Never include \`type\`, \`options\`, \`data\`, or dict/JSON syntax.
+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/auth/guard.tsx
-var import_lucide_react10 = require("lucide-react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_lucide_react15 = require("lucide-react");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var AuthGuard = ({
   children,
   requireAuth = false,
@@ -4397,7 +5740,7 @@ var AuthGuard = ({
     return children;
   }
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex items-center justify-center h-screen", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react10.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(
@@ -4408,11 +5751,13 @@ 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,
   ARTIFACT_FENCE_LANGUAGES,
-  ActionBarMorePrimitive,
   ActionBarPrimitive,
   ArtifactCard,
   ArtifactRegistryProvider,
@@ -4426,8 +5771,6 @@ var AuthGuard = ({
   Button,
   ChartArtifactView,
   Composer,
-  ComposerAddAttachment,
-  ComposerAttachments,
   ComposerPrimitive,
   DEFAULT_UPLOAD_ACCEPT,
   Dialog,
@@ -4437,44 +5780,27 @@ var AuthGuard = ({
   DialogPortal,
   DialogTitle,
   DialogTrigger,
-  ErrorPrimitive,
   HtmlArtifactView,
   JsonArtifactView,
   MarkdownText,
-  MessagePartPrimitive,
   MessagePrimitive,
+  ModeToggle,
   QuestionArtifactView,
-  STUDIO_INSET_LEFT,
-  STUDIO_PILL_HEIGHT,
-  STUDIO_SIDEBAR_GAP,
-  STUDIO_SIDEBAR_WIDTH,
-  STUDIO_TOPBAR_GAP,
-  STUDIO_TOPBAR_HEIGHT,
   SessionProvider,
   Shimmer,
+  StudioSidebar,
+  StudioWelcome,
   Suggestions,
-  SyntaxHighlighter,
-  TIMBAL_V2_BORDER,
-  TIMBAL_V2_FILL,
-  TIMBAL_V2_LABEL,
-  TIMBAL_V2_PILL_SURFACE,
-  TIMBAL_V2_SECONDARY_CHROME,
-  TIMBAL_V2_SHADOW,
-  TIMBAL_V2_SIZE_HEIGHT,
-  TIMBAL_V2_SIZE_ICON,
-  TIMBAL_V2_SIZE_LABEL_PX,
   TableArtifactView,
   Thread,
   ThreadPrimitive,
   TimbalChat,
   TimbalChatShell,
+  TimbalMark,
   TimbalRuntimeProvider,
-  TimbalV2Button,
+  TimbalStudioShell,
   ToolArtifactFallback,
-  ToolBodyPresence,
   ToolFallback,
-  ToolMotion,
-  ToolPresence,
   Tooltip,
   TooltipContent,
   TooltipIconButton,
@@ -4484,10 +5810,8 @@ var AuthGuard = ({
   UiCustomNodeRegistryProvider,
   UiEventProvider,
   UiNodeView,
-  UserMessageAttachments,
   WorkforceSelector,
   authFetch,
-  buttonVariants,
   clearTokens,
   cn,
   createDefaultAttachmentAdapter,
@@ -4501,7 +5825,6 @@ var AuthGuard = ({
   isArtifact,
   isArtifactFenceLanguage,
   isUiBinding,
-  luxuryEase,
   parseArtifactFromToolResult,
   parseSSELine,
   refreshAccessToken,
@@ -4511,35 +5834,10 @@ var AuthGuard = ({
   setPath,
   setRefreshToken,
   splitMarkdownByArtifacts,
-  studioArtifactShellClass,
-  studioChromeShellStyle,
-  studioComposeInputShellClass,
-  studioComposerIoWellClass,
-  studioIntegrationBorder,
-  studioIntegrationCardClass,
-  studioIntegrationIconTileClass,
-  studioIntegrationSurfaceSolid,
-  studioListRowButtonClass,
-  studioPillSurfaceClass,
-  studioPlaygroundGradientClass,
-  studioQuestionOptionClass,
-  studioQuestionOptionSelectedClass,
-  studioSecondaryChromeClass,
-  studioTimelineActionClass,
-  studioTimelineBodyPadClass,
-  studioTimelineChevronClass,
-  studioTimelineDetailClass,
-  studioTimelineRowButtonClass,
-  studioTimelineShimmerActionClass,
-  studioTimelineTextClass,
-  studioToolCardShellClass,
-  studioTopbarIconPillClass,
-  studioTopbarPillHeightClass,
-  toolPresenceTransition,
   useArtifactRegistry,
-  useAuiState,
   useComposerRuntime,
   useMessageRuntime,
+  useOptionalSession,
   useResolvedSuggestions,
   useSession,
   useThread,