@timbal-ai/timbal-react 0.4.0 → 0.5.0

package/dist/index.cjs

@@ -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-transparent px-3 pt-3 pb-1 text-sm outline-none placeholder:text-muted-foreground/70 focus-visible:ring-0",
       rows: 1,
       autoFocus,
       "aria-label": "Message input",
@@ -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,7 +3733,7 @@ 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",
@@ -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 mx-auto mt-auto flex w-full max-w-(--thread-max-width) flex-col gap-4 overflow-visible bg-transparent pb-4 md:pb-6", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ScrollToBottomSlot, {}),
                   /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ComposerSlot, { placeholder: composerPlaceholder })
                 ] })
@@ -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,
@@ -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",
       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",
       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,