@timbal-ai/timbal-react 0.4.0 → 0.5.0

package/dist/index.esm.js

@@ -868,6 +868,7 @@ function findParentIdFromAuiParent(messages, auiParentId) {
 import { parseSSELine as parseSSELine2 } from "@timbal-ai/timbal-sdk";
 
 // src/components/thread.tsx
+import { useEffect as useEffect5 } from "react";
 import {
   ActionBarMorePrimitive,
   ActionBarPrimitive,
@@ -1108,7 +1109,7 @@ import { forwardRef as forwardRef2 } from "react";
 import * as React from "react";
 import { Slot } from "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",
@@ -1128,39 +1129,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
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -1192,7 +1216,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],
@@ -1369,9 +1393,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__ */ jsx7(XIcon2, { className: "aui-attachment-remove-icon size-3 dark:stroke-[2.5px]" })
+      children: /* @__PURE__ */ jsx7(XIcon2, { className: "aui-attachment-remove-icon size-3" })
     }
   ) });
 };
@@ -1393,7 +1417,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__ */ jsx7(PlusIcon, { className: "aui-attachment-add-icon size-4 stroke-[1.5]" })
     }
@@ -1747,30 +1771,19 @@ import { useCallback as useCallback2, useState as useState3 } from "react";
 import { useThreadRuntime } from "@assistant-ui/react";
 import { CheckIcon } from "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,
@@ -1785,8 +1798,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",
@@ -1797,6 +1810,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(
@@ -1822,10 +1872,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
@@ -1839,7 +1889,7 @@ var OptionRadio = ({ selected }) => /* @__PURE__ */ jsx10(
   {
     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__ */ jsx10(CheckIcon, { className: "size-2.5 stroke-[3]" }) : null
@@ -2098,15 +2148,15 @@ import { cva } from "class-variance-authority";
 import { Slot as Slot2 } from "radix-ui";
 import { jsx as jsx15 } from "react/jsx-runtime";
 var buttonVariants = 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: {
@@ -2738,7 +2788,7 @@ var CodeHeader = ({ language, code }) => {
     if (!code || isCopied) return;
     copyToClipboard(code);
   };
-  return /* @__PURE__ */ jsxs11("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__ */ jsxs11("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__ */ jsxs11("span", { className: "flex items-center gap-2 text-xs font-semibold tracking-wide text-muted-foreground/80 uppercase", children: [
       /* @__PURE__ */ jsx20("span", { className: "inline-block h-2 w-2 rounded-full bg-primary/40" }),
       language
@@ -2945,7 +2995,7 @@ var defaultComponents = memoizeMarkdownComponents({
     "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
@@ -2957,7 +3007,7 @@ var defaultComponents = memoizeMarkdownComponents({
       "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
@@ -3382,7 +3432,7 @@ var ComposerInput = ({
     ComposerPrimitive2.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",
@@ -3468,9 +3518,9 @@ var SuggestionRow = ({ suggestion }) => {
       onClick,
       className: cn("aui-thread-suggestion", studioListRowButtonClass),
       children: [
-        /* @__PURE__ */ jsx26("span", { className: "aui-thread-suggestion-icon shrink-0 text-neutral-500 dark:text-muted-foreground", children: suggestion.icon ?? /* @__PURE__ */ jsx26(ArrowUpIcon2, { className: "size-4", strokeWidth: 1.75, "aria-hidden": true }) }),
+        /* @__PURE__ */ jsx26("span", { className: "aui-thread-suggestion-icon shrink-0 text-muted-foreground", children: suggestion.icon ?? /* @__PURE__ */ jsx26(ArrowUpIcon2, { className: "size-4", strokeWidth: 1.75, "aria-hidden": true }) }),
         /* @__PURE__ */ jsxs14("span", { className: "aui-thread-suggestion-text min-w-0 flex-1 text-left", children: [
-          /* @__PURE__ */ jsx26("span", { className: "aui-thread-suggestion-text-1 block truncate text-sm font-normal text-foreground dark:text-foreground/95", children: suggestion.title }),
+          /* @__PURE__ */ jsx26("span", { className: "aui-thread-suggestion-text-1 block truncate text-sm font-normal text-foreground", children: suggestion.title }),
           suggestion.description && /* @__PURE__ */ jsx26("span", { className: "aui-thread-suggestion-text-2 mt-0.5 block truncate text-xs text-muted-foreground", children: suggestion.description })
         ] })
       ]
@@ -3503,6 +3553,75 @@ function useResolvedSuggestions(source) {
   return useMemo6(() => 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
 import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
 var Thread = ({
@@ -3522,6 +3641,9 @@ var Thread = ({
   const EditComposerSlot = components?.EditComposer ?? EditComposer;
   const ScrollToBottomSlot = components?.ScrollToBottom ?? ThreadScrollToBottom;
   const SuggestionsSlot = components?.Suggestions ?? Suggestions;
+  useEffect5(() => {
+    scheduleThemeSanityCheck();
+  }, []);
   return /* @__PURE__ */ jsx27(
     ArtifactRegistryProvider,
     {
@@ -3560,7 +3682,7 @@ var Thread = ({
                     }
                   }
                 ),
-                /* @__PURE__ */ jsxs15(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__ */ jsxs15(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__ */ jsx27(ScrollToBottomSlot, {}),
                   /* @__PURE__ */ jsx27(ComposerSlot, { placeholder: composerPlaceholder })
                 ] })
@@ -3646,7 +3768,7 @@ var ThreadWelcome = ({
   ] });
 };
 var MessageError = () => {
-  return /* @__PURE__ */ jsx27(MessagePrimitive2.Error, { children: /* @__PURE__ */ jsx27(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__ */ jsx27(ErrorPrimitive.Message, { className: "aui-message-error-message line-clamp-2" }) }) });
+  return /* @__PURE__ */ jsx27(MessagePrimitive2.Error, { children: /* @__PURE__ */ jsx27(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__ */ jsx27(ErrorPrimitive.Message, { className: "aui-message-error-message line-clamp-2" }) }) });
 };
 var AssistantMessage = () => {
   return /* @__PURE__ */ jsxs15(
@@ -3679,8 +3801,7 @@ 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__ */ jsxs15(
@@ -3729,8 +3850,8 @@ var AssistantActionBar = () => {
             {
               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__ */ jsx27(ActionBarPrimitive.ExportMarkdown, { asChild: true, children: /* @__PURE__ */ jsxs15(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__ */ jsx27(ActionBarPrimitive.ExportMarkdown, { asChild: true, children: /* @__PURE__ */ jsxs15(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__ */ jsx27(DownloadIcon, { className: "size-4 shrink-0" }),
                 "Export as Markdown"
               ] }) })
@@ -3755,7 +3876,7 @@ var UserMessage = () => {
         /* @__PURE__ */ jsxs15(
           motion4.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 },
@@ -3831,208 +3952,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
-import {
-  ThreadPrimitive as ThreadPrimitive2,
-  MessagePrimitive as MessagePrimitive3,
-  MessagePartPrimitive as MessagePartPrimitive2,
-  ComposerPrimitive as ComposerPrimitive4,
-  ActionBarPrimitive as ActionBarPrimitive2,
-  ActionBarMorePrimitive as ActionBarMorePrimitive2,
-  ErrorPrimitive as ErrorPrimitive2,
-  AuiIf as AuiIf3,
-  AssistantRuntimeProvider as AssistantRuntimeProvider2,
-  useThread as useThread2,
-  useThreadRuntime as useThreadRuntime4,
-  useMessageRuntime,
-  useComposerRuntime as useComposerRuntime2,
-  useAuiState as useAuiState3
-} from "@assistant-ui/react";
-
-// src/hooks/use-workforces.ts
-import { useEffect as useEffect5, useMemo as useMemo7, useRef as useRef2, useState as useState8 } from "react";
-function useWorkforces(options = {}) {
-  const { baseUrl = "/api", fetch: fetchFn, pickInitial } = options;
-  const [workforces, setWorkforces] = useState8([]);
-  const [selectedId, setSelectedId] = useState8("");
-  const [isLoading, setIsLoading] = useState8(true);
-  const [error, setError] = useState8(null);
-  const fetchFnRef = useRef2(fetchFn ?? authFetch);
-  useEffect5(() => {
-    fetchFnRef.current = fetchFn ?? authFetch;
-  }, [fetchFn]);
-  const pickInitialRef = useRef2(pickInitial);
-  useEffect5(() => {
-    pickInitialRef.current = pickInitial;
-  }, [pickInitial]);
-  const load = useMemo7(() => {
-    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]);
-  useEffect5(() => {
-    load();
-  }, [load]);
-  const selected = useMemo7(
-    () => 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
 import { ChevronDownIcon } from "lucide-react";
 import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
@@ -4067,7 +3986,7 @@ var WorkforceSelector = ({
             children: [
               !value && /* @__PURE__ */ jsx29("option", { value: "", children: placeholder }),
               workforces.map((w) => {
-                const id = idOf2(w);
+                const id = idOf(w);
                 return /* @__PURE__ */ jsx29("option", { value: id, children: w.name ?? id }, id);
               })
             ]
@@ -4084,43 +4003,146 @@ var WorkforceSelector = ({
     }
   );
 };
-function idOf2(item) {
+function idOf(item) {
   return item.id ?? item.uid ?? item.name ?? "";
 }
 
-// src/components/chat-shell.tsx
-import { jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
-var TimbalChatShell = ({
-  workforceId,
-  brand,
-  headerActions,
-  hideWorkforceSelector,
-  className,
-  headerClassName,
-  baseUrl,
-  fetch: fetch2,
-  ...chatProps
-}) => {
-  const { workforces, selectedId, setSelectedId } = useWorkforces({
-    baseUrl,
-    fetch: fetch2
-  });
-  const effectiveId = workforceId ?? selectedId;
-  const showSelector = !hideWorkforceSelector && !workforceId && workforces.length > 0;
-  return /* @__PURE__ */ jsxs17(
-    "div",
-    {
-      className: cn(
-        "aui-chat-shell relative flex h-dvh flex-col overflow-hidden bg-background",
-        className
-      ),
-      style: studioChromeShellStyle,
-      children: [
-        /* @__PURE__ */ jsx30(
-          "div",
-          {
-            className: cn(
-              "pointer-events-none absolute inset-0 z-0",
+// src/hooks/use-workforces.ts
+import { useEffect as useEffect6, useMemo as useMemo7, useRef as useRef2, useState as useState8 } from "react";
+function useWorkforces(options = {}) {
+  const { baseUrl = "/api", fetch: fetchFn, pickInitial, enabled = true } = options;
+  const [workforces, setWorkforces] = useState8([]);
+  const [selectedId, setSelectedId] = useState8("");
+  const [isLoading, setIsLoading] = useState8(enabled);
+  const [error, setError] = useState8(null);
+  const fetchFnRef = useRef2(fetchFn ?? authFetch);
+  useEffect6(() => {
+    fetchFnRef.current = fetchFn ?? authFetch;
+  }, [fetchFn]);
+  const pickInitialRef = useRef2(pickInitial);
+  useEffect6(() => {
+    pickInitialRef.current = pickInitial;
+  }, [pickInitial]);
+  const load = useMemo7(() => {
+    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]);
+  useEffect6(() => {
+    load();
+  }, [load]);
+  const selected = useMemo7(
+    () => 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
+import { jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
+var TimbalChatShell = ({
+  workforceId,
+  brand,
+  headerActions,
+  hideWorkforceSelector,
+  className,
+  headerClassName,
+  baseUrl,
+  fetch: fetch2,
+  ...chatProps
+}) => {
+  const { workforces, selectedId, setSelectedId } = useWorkforces({
+    baseUrl,
+    fetch: fetch2
+  });
+  const effectiveId = workforceId ?? selectedId;
+  const showSelector = !hideWorkforceSelector && !workforceId && workforces.length > 0;
+  return /* @__PURE__ */ jsxs17(
+    "div",
+    {
+      className: cn(
+        "aui-chat-shell relative flex h-dvh flex-col overflow-hidden bg-background",
+        className
+      ),
+      style: studioChromeShellStyle,
+      children: [
+        /* @__PURE__ */ jsx30(
+          "div",
+          {
+            className: cn(
+              "pointer-events-none absolute inset-0 z-0",
               studioPlaygroundGradientClass
             ),
             "aria-hidden": true
@@ -4166,15 +4188,250 @@ var TimbalChatShell = ({
   );
 };
 
-// src/auth/provider.tsx
+// src/components/studio/studio-shell.tsx
 import {
-  createContext as createContext4,
-  useCallback as useCallback4,
-  useContext as useContext4,
-  useEffect as useEffect6,
-  useState as useState9
+  useCallback as useCallback8,
+  useEffect as useEffect10,
+  useMemo as useMemo9,
+  useState as useState13
 } from "react";
+import { Menu } from "lucide-react";
+import { motion as motion10, useReducedMotion as useReducedMotion6 } from "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
+import { useCallback as useCallback4, useEffect as useEffect7, useRef as useRef3, useState as useState9 } from "react";
+var WIDTH_OVERLAP_FRAC = 0.7;
+function useSidebarCollapsePhase(collapsed, reducedMotion) {
+  const [widthCollapsed, setWidthCollapsed] = useState9(collapsed);
+  const [entriesVisible, setEntriesVisible] = useState9(true);
+  const collapsedTarget = useRef3(collapsed);
+  const isFirstRender = useRef3(true);
+  const widthTimerRef = useRef3(null);
+  const revealTimerRef = useRef3(null);
+  useEffect7(() => {
+    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 = useCallback4(() => {
+    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]);
+  useEffect7(() => {
+    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 = useCallback4(() => {
+    applyWidthTarget();
+  }, [applyWidthTarget]);
+  const onPanelWidthComplete = useCallback4(() => {
+    clearRevealTimer();
+    setEntriesVisible(true);
+  }, []);
+  const isCollapsedRail = widthCollapsed;
+  return {
+    widthCollapsed,
+    isCollapsedRail,
+    entriesVisible,
+    onEntriesBlurOutComplete,
+    onPanelWidthComplete
+  };
+}
+
+// src/components/studio/sidebar-backdrop.tsx
+import { AnimatePresence as AnimatePresence2, motion as motion5, useReducedMotion as useReducedMotion2 } from "motion/react";
 import { jsx as jsx31 } from "react/jsx-runtime";
+var StudioSidebarBackdrop = ({
+  open,
+  onClose
+}) => {
+  const reducedMotion = useReducedMotion2();
+  return /* @__PURE__ */ jsx31(AnimatePresence2, { children: open ? /* @__PURE__ */ jsx31(
+    motion5.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
+import { createContext as createContext4, useContext as useContext4 } from "react";
+var StudioSidebarContext = createContext4({
+  collapsed: false,
+  isMobile: false,
+  isCollapsedRail: false,
+  iconOnlyLayout: false
+});
+function useStudioSidebarLayout() {
+  return useContext4(StudioSidebarContext);
+}
+
+// src/components/studio/sidebar.tsx
+import {
+  useCallback as useCallback6,
+  useEffect as useEffect9,
+  useMemo as useMemo8,
+  useState as useState11
+} from "react";
+import { motion as motion8, useReducedMotion as useReducedMotion5 } from "motion/react";
+
+// src/components/studio/sidebar-entries.tsx
+import { motion as motion6, useReducedMotion as useReducedMotion3 } from "motion/react";
+import { jsx as jsx32 } from "react/jsx-runtime";
+var StudioSidebarEntries = ({
+  visible,
+  onBlurOutComplete,
+  children,
+  className
+}) => {
+  const reducedMotion = useReducedMotion3();
+  if (reducedMotion) {
+    return visible ? /* @__PURE__ */ jsx32("div", { className: cn("flex min-h-0 flex-1 flex-col", className), children }) : null;
+  }
+  return /* @__PURE__ */ jsx32(
+    motion6.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
+import { LogOut } from "lucide-react";
+
+// src/auth/provider.tsx
+import {
+  createContext as createContext5,
+  useCallback as useCallback5,
+  useContext as useContext5,
+  useEffect as useEffect8,
+  useState as useState10
+} from "react";
+import { jsx as jsx33 } from "react/jsx-runtime";
 function isInsideIframe() {
   try {
     return typeof window !== "undefined" && window.self !== window.top;
@@ -4182,22 +4439,26 @@ function isInsideIframe() {
     return true;
   }
 }
-var SessionContext = createContext4(void 0);
+var SessionContext = createContext5(void 0);
 var useSession = () => {
-  const context = useContext4(SessionContext);
+  const context = useContext5(SessionContext);
   if (context === void 0) {
     throw new Error("useSession must be used within a SessionProvider");
   }
   return context;
 };
+var useOptionalSession = () => {
+  const context = useContext5(SessionContext);
+  return context ?? null;
+};
 var SessionProvider = ({
   children,
   enabled = true
 }) => {
-  const [user, setUser] = useState9(null);
-  const [loading, setLoading] = useState9(enabled);
-  const [embedded] = useState9(isInsideIframe);
-  useEffect6(() => {
+  const [user, setUser] = useState10(null);
+  const [loading, setLoading] = useState10(enabled);
+  const [embedded] = useState10(isInsideIframe);
+  useEffect8(() => {
     if (!enabled) {
       setLoading(false);
       return;
@@ -4258,7 +4519,7 @@ var SessionProvider = ({
       messageCleanup?.();
     };
   }, [enabled, embedded]);
-  const logout = useCallback4(() => {
+  const logout = useCallback5(() => {
     clearTokens();
     setUser(null);
     const returnTo = encodeURIComponent(
@@ -4268,7 +4529,7 @@ var SessionProvider = ({
       () => window.location.href = `/api/auth/login?return_to=${returnTo}`
     );
   }, []);
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx33(
     SessionContext.Provider,
     {
       value: {
@@ -4283,49 +4544,1185 @@ var SessionProvider = ({
   );
 };
 
-// src/auth/guard.tsx
-import { Loader2 } from "lucide-react";
-import { jsx as jsx32 } from "react/jsx-runtime";
-var AuthGuard = ({
+// 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
+import { motion as motion7, useReducedMotion as useReducedMotion4 } from "motion/react";
+import { jsx as jsx34 } from "react/jsx-runtime";
+var StudioSidebarEntryMotion = ({
   children,
-  requireAuth = false,
-  enabled = true
+  className
 }) => {
-  const { isAuthenticated, loading, isEmbedded } = useSession();
-  if (!enabled) {
-    return children;
+  const reducedMotion = useReducedMotion4();
+  if (reducedMotion) {
+    return /* @__PURE__ */ jsx34("div", { className, children });
   }
-  if (loading) {
-    return /* @__PURE__ */ jsx32("div", { className: "flex items-center justify-center h-screen", children: /* @__PURE__ */ jsx32(Loader2, { className: "w-8 h-8 animate-spin" }) });
+  return /* @__PURE__ */ jsx34(motion7.div, { variants: studioSidebarEntryItemVariants, className: cn(className), children });
+};
+
+// src/components/studio/sidebar-tooltip.tsx
+import { Fragment as Fragment3, jsx as jsx35, jsxs as jsxs18 } from "react/jsx-runtime";
+var StudioSidebarTooltip = ({
+  label,
+  enabled,
+  children
+}) => {
+  if (!enabled) return /* @__PURE__ */ jsx35(Fragment3, { children });
+  return /* @__PURE__ */ jsxs18(Tooltip, { children: [
+    /* @__PURE__ */ jsx35(TooltipTrigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx35(TooltipContent, { side: "right", className: "text-xs", children: label })
+  ] });
+};
+
+// src/components/studio/sidebar-footer.tsx
+import { jsx as jsx36, jsxs as jsxs19 } from "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__ */ jsx36(StudioSidebarEntryMotion, { children: /* @__PURE__ */ jsx36(
+    "footer",
+    {
+      className: cn(
+        "mt-auto w-full shrink-0 py-2.5",
+        iconOnlyLayout ? studioSidebarCollapsedRailInsetClass : "px-2.5"
+      ),
+      children: user ? /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-2", children: [
+        iconOnlyLayout ? /* @__PURE__ */ jsx36("div", { className: studioSidebarCollapsedRailChipRowClass, children: /* @__PURE__ */ jsxs19(Avatar, { size: "sm", className: "size-8", children: [
+          user.user_photo_url ? /* @__PURE__ */ jsx36(AvatarImage, { src: user.user_photo_url, alt: user.user_name }) : null,
+          /* @__PURE__ */ jsx36(AvatarFallback, { className: "text-[10px]", children: userInitials(user.user_name, user.user_email) })
+        ] }) }) : /* @__PURE__ */ jsxs19("div", { className: "flex min-w-0 items-center gap-2.5", children: [
+          /* @__PURE__ */ jsxs19(Avatar, { size: "sm", children: [
+            user.user_photo_url ? /* @__PURE__ */ jsx36(AvatarImage, { src: user.user_photo_url, alt: user.user_name }) : null,
+            /* @__PURE__ */ jsx36(AvatarFallback, { children: userInitials(user.user_name, user.user_email) })
+          ] }),
+          /* @__PURE__ */ jsxs19("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx36("p", { className: "truncate text-sm font-medium text-foreground", children: user.user_name }),
+            /* @__PURE__ */ jsx36("p", { className: "truncate text-xs text-muted-foreground", children: user.user_email })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx36(
+          "div",
+          {
+            className: iconOnlyLayout ? studioSidebarCollapsedRailChipRowClass : void 0,
+            children: /* @__PURE__ */ jsx36(StudioSidebarTooltip, { label: "Sign out", enabled: showTooltips, children: /* @__PURE__ */ jsxs19(
+              "button",
+              {
+                type: "button",
+                onClick: handleSignOut,
+                className: cn(
+                  studioSidebarNavItemClasses(iconOnlyLayout, false),
+                  iconOnlyLayout && "inline-flex"
+                ),
+                "aria-label": "Sign out",
+                children: [
+                  /* @__PURE__ */ jsx36(LogOut, { className: "size-3.5 shrink-0" }),
+                  !iconOnlyLayout ? "Sign out" : null
+                ]
+              }
+            ) })
+          }
+        )
+      ] }) : !iconOnlyLayout && emptyCaption ? /* @__PURE__ */ jsx36("p", { className: "px-1 text-xs text-muted-foreground", children: emptyCaption }) : null
+    }
+  ) });
+};
+
+// src/components/studio/sidebar-header.tsx
+import { ChevronLeft, ChevronRight, X } from "lucide-react";
+import { jsx as jsx37, jsxs as jsxs20 } from "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__ */ jsx37(
+  "button",
+  {
+    type: "button",
+    onClick,
+    className: cn(toggleButtonClass, "size-7"),
+    "aria-label": ariaLabel,
+    "aria-expanded": expanded,
+    children
   }
-  if (requireAuth && !isAuthenticated && !isEmbedded) {
-    const returnTo = encodeURIComponent(
-      window.location.pathname + window.location.search
+);
+var CollapsedBrandToggle = ({
+  onExpand,
+  brand
+}) => /* @__PURE__ */ jsx37("div", { className: studioSidebarCollapsedRailChipRowClass, children: /* @__PURE__ */ jsx37(StudioSidebarTooltip, { label: "Expand sidebar", enabled: true, children: /* @__PURE__ */ jsxs20(
+  "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__ */ jsx37(
+        "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__ */ jsx37(
+        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__ */ jsxs20("header", { className: cn(sidebarHeaderClass, "justify-between gap-2 pr-2"), children: [
+      brand,
+      /* @__PURE__ */ jsx37(
+        SidebarToggleButton,
+        {
+          ariaLabel: "Close menu",
+          expanded: mobileOpen,
+          onClick: onToggle,
+          children: /* @__PURE__ */ jsx37(X, { className: "size-3.5" })
+        }
+      )
+    ] });
+  }
+  if (isCollapsedRail) {
+    return /* @__PURE__ */ jsx37(
+      "header",
+      {
+        className: cn(
+          "flex h-12 shrink-0 items-center",
+          studioSidebarCollapsedRailInsetClass
+        ),
+        children: /* @__PURE__ */ jsx37(CollapsedBrandToggle, { onExpand: onToggle, brand })
+      }
     );
-    window.location.href = `/api/auth/login?return_to=${returnTo}`;
-    return null;
   }
-  return children;
+  return /* @__PURE__ */ jsxs20("header", { className: cn(sidebarHeaderClass, "justify-between gap-1 pr-2"), children: [
+    brand,
+    /* @__PURE__ */ jsx37(
+      SidebarToggleButton,
+      {
+        ariaLabel: "Collapse sidebar",
+        expanded: true,
+        onClick: onToggle,
+        children: /* @__PURE__ */ jsx37(ChevronLeft, { className: "size-4" })
+      }
+    )
+  ] });
 };
-export {
-  ARTIFACT_AGENT_INSTRUCTIONS,
-  ARTIFACT_FENCE_LANGUAGES,
-  ActionBarMorePrimitive2 as ActionBarMorePrimitive,
-  ActionBarPrimitive2 as ActionBarPrimitive,
-  ArtifactCard,
-  ArtifactRegistryProvider,
-  ArtifactView,
-  AssistantRuntimeProvider2 as AssistantRuntimeProvider,
-  AuiIf3 as AuiIf,
-  AuthGuard,
-  Avatar,
+
+// 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
+import { jsx as jsx38 } from "react/jsx-runtime";
+var StudioSidebarNav = ({
+  workforces,
+  selectedId,
+  onSelect,
+  iconOnlyLayout,
+  showTooltips
+}) => {
+  if (workforces.length === 0) return null;
+  return /* @__PURE__ */ jsx38(
+    "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__ */ jsx38(
+          StudioSidebarEntryMotion,
+          {
+            className: iconOnlyLayout ? studioSidebarCollapsedRailChipRowClass : void 0,
+            children: /* @__PURE__ */ jsx38(StudioSidebarTooltip, { label, enabled: showTooltips, children: /* @__PURE__ */ jsx38(
+              "button",
+              {
+                type: "button",
+                onClick: () => onSelect(id),
+                "aria-pressed": isActive,
+                "aria-label": label,
+                className: cn(
+                  studioSidebarNavItemClasses(iconOnlyLayout, isActive),
+                  iconOnlyLayout && "inline-flex"
+                ),
+                children: iconOnlyLayout ? /* @__PURE__ */ jsx38("span", { className: "text-xs font-semibold leading-none", children: workforceItemInitial(w) }) : /* @__PURE__ */ jsx38("span", { className: "min-w-0 truncate", children: label })
+              }
+            ) })
+          },
+          id
+        );
+      })
+    }
+  );
+};
+
+// src/components/studio/timbal-mark.tsx
+import { LiquidMetal } from "@paper-design/shaders-react";
+import { jsx as jsx39 } from "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__ */ jsx39(
+    "div",
+    {
+      className: cn("relative shrink-0 bg-transparent", className),
+      style: { width: size, height: size },
+      role: "img",
+      "aria-label": "Timbal",
+      children: /* @__PURE__ */ jsx39(
+        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
+import { jsx as jsx40, jsxs as jsxs21 } from "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 = useReducedMotion5();
+  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__ */ jsx40(TimbalMark, { size: 32 });
+  const panel = /* @__PURE__ */ jsxs21(
+    motion8.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__ */ jsx40(
+          StudioSidebarHeader,
+          {
+            isCollapsedRail,
+            isMobile,
+            mobileOpen,
+            onToggle: handleToggle,
+            brand: brandNode
+          }
+        ),
+        /* @__PURE__ */ jsxs21(
+          StudioSidebarEntries,
+          {
+            visible: entriesVisible,
+            onBlurOutComplete: onEntriesBlurOutComplete,
+            children: [
+              /* @__PURE__ */ jsx40(
+                "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__ */ jsx40(
+                StudioSidebarNav,
+                {
+                  workforces,
+                  selectedId,
+                  onSelect,
+                  iconOnlyLayout,
+                  showTooltips: isCollapsedRail
+                }
+              ),
+              workforces.length === 0 ? /* @__PURE__ */ jsx40("div", { className: "min-h-0 flex-1" }) : null,
+              /* @__PURE__ */ jsx40(
+                StudioSidebarFooter,
+                {
+                  iconOnlyLayout,
+                  showTooltips: isCollapsedRail,
+                  onSignOut: isMobile ? () => onMobileOpenChange(false) : void 0,
+                  emptyCaption
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+  if (isMobile) {
+    return /* @__PURE__ */ jsx40(
+      motion8.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__ */ jsx40(
+    "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 = useReducedMotion5();
+  const fetched = useWorkforces({ enabled: workforcesProp === void 0 });
+  const workforces = workforcesProp ?? fetched.workforces;
+  const [internalSelected, setInternalSelected] = useState11(
+    selectedIdProp ?? ""
+  );
+  useEffect9(() => {
+    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 = useCallback6(
+    (id) => {
+      if (selectedIdProp === void 0) setInternalSelected(id);
+      onSelect?.(id);
+    },
+    [selectedIdProp, onSelect]
+  );
+  const [collapsed, setCollapsed] = useState11(() => {
+    const persisted = readPersistedCollapsed(persistKey);
+    return persisted || defaultCollapsed;
+  });
+  const handleCollapsedChange = useCallback6(
+    (next) => {
+      setCollapsed(next);
+      writePersistedCollapsed(persistKey, next);
+    },
+    [persistKey]
+  );
+  const [isMobile, setIsMobile] = useState11(() => {
+    if (typeof window === "undefined") return false;
+    return window.innerWidth < mobileBreakpointPx;
+  });
+  useEffect9(() => {
+    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] = useState11(false);
+  const mobileOpen = mobileOpenProp ?? internalMobileOpen;
+  const setMobileOpen = useCallback6(
+    (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 = useMemo8(
+    () => ({
+      collapsed: effectiveCollapsed,
+      isMobile,
+      isCollapsedRail,
+      iconOnlyLayout
+    }),
+    [effectiveCollapsed, isMobile, isCollapsedRail, iconOnlyLayout]
+  );
+  return /* @__PURE__ */ jsx40(StudioSidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx40(
+    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
+import { useCallback as useCallback7, useLayoutEffect, useState as useState12 } from "react";
+import { createPortal } from "react-dom";
+import { MessageSquarePlus } from "lucide-react";
+import { useThread as useThread2 } from "@assistant-ui/react";
+import { jsx as jsx41, jsxs as jsxs22 } from "react/jsx-runtime";
+var StudioSidebarRuntimePortal = ({
+  label = "New chat"
+}) => {
+  const { iconOnlyLayout } = useStudioSidebarLayout();
+  const hasMessages = useThread2((s) => s.messages.length > 0);
+  const { clear } = useTimbalRuntime();
+  const [anchor, setAnchor] = useState12(null);
+  const startNewChat = useCallback7(() => {
+    clear();
+  }, [clear]);
+  useLayoutEffect(() => {
+    setAnchor(document.getElementById(DOM_IDS.sidebarRuntimeAnchor));
+  }, []);
+  if (!anchor || !hasMessages) return null;
+  const button = /* @__PURE__ */ jsxs22(
+    "button",
+    {
+      type: "button",
+      onClick: startNewChat,
+      "aria-label": label,
+      className: studioSidebarNavItemClasses(iconOnlyLayout, false),
+      children: [
+        /* @__PURE__ */ jsx41(MessageSquarePlus, { className: "size-3.5 shrink-0" }),
+        !iconOnlyLayout ? /* @__PURE__ */ jsx41("span", { className: "min-w-0 truncate", children: label }) : null
+      ]
+    }
+  );
+  return createPortal(
+    iconOnlyLayout ? /* @__PURE__ */ jsxs22(Tooltip, { children: [
+      /* @__PURE__ */ jsx41(TooltipTrigger, { asChild: true, children: button }),
+      /* @__PURE__ */ jsx41(TooltipContent, { side: "right", className: "text-xs", children: label })
+    ] }) : button,
+    anchor
+  );
+};
+
+// src/components/studio/welcome.tsx
+import { motion as motion9 } from "motion/react";
+import { useThread as useThread3 } from "@assistant-ui/react";
+import { jsx as jsx42, jsxs as jsxs23 } from "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 = useThread3((s) => s.messages.length === 0);
+  if (!isEmpty) return null;
+  const iconNode = icon ?? /* @__PURE__ */ jsx42(
+    TimbalMark,
+    {
+      size: 112,
+      className: "max-md:scale-[0.58] max-md:origin-center"
+    }
+  );
+  return /* @__PURE__ */ jsx42("div", { className: "aui-thread-welcome-root mx-auto my-auto flex w-full max-w-(--thread-max-width) grow flex-col", children: /* @__PURE__ */ jsx42("div", { className: "aui-thread-welcome-center flex w-full grow flex-col items-center justify-center", children: /* @__PURE__ */ jsxs23(
+    motion9.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__ */ jsx42(motion9.div, { variants: welcomeIcon2, className: "mb-4 md:mb-5", children: iconNode }),
+        /* @__PURE__ */ jsx42(
+          motion9.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__ */ jsx42(
+          motion9.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
+import { Fragment as Fragment4, jsx as jsx43, jsxs as jsxs24 } from "react/jsx-runtime";
+import { createElement } from "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__ */ jsxs24(Fragment4, { children: [
+      /* @__PURE__ */ jsx43(StudioSidebarRuntimePortal, {}),
+      /* @__PURE__ */ jsx43(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 = useReducedMotion6();
+  const shouldFetchWorkforces = !workforceId && workforcesProp === void 0;
+  const fetched = useWorkforces({
+    enabled: shouldFetchWorkforces,
+    fetch: workforcesFetch,
+    baseUrl: workforcesBaseUrl
+  });
+  const workforces = workforcesProp ?? fetched.workforces;
+  const [internalSelected, setInternalSelected] = useState13(
+    workforceId ?? ""
+  );
+  useEffect10(() => {
+    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] = useState13(() => {
+    const persisted = readPersistedCollapsed2(persistKey);
+    return persisted || defaultCollapsed;
+  });
+  const [isMobile, setIsMobile] = useState13(() => {
+    if (typeof window === "undefined") return false;
+    return window.innerWidth < mobileBreakpointPx;
+  });
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState13(false);
+  useEffect10(() => {
+    if (typeof window === "undefined") return;
+    const onResize = () => setIsMobile(window.innerWidth < mobileBreakpointPx);
+    onResize();
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [mobileBreakpointPx]);
+  useEffect10(() => {
+    if (!isMobile) setMobileSidebarOpen(false);
+  }, [isMobile]);
+  useEffect10(() => {
+    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 = useCallback8(
+    (next) => {
+      setCollapsed(next);
+      writePersistedCollapsed2(persistKey, next);
+    },
+    [persistKey]
+  );
+  const handleSelectWorkforce = useCallback8(
+    (id) => {
+      if (!workforceId) setInternalSelected(id);
+      if (isMobile) setMobileSidebarOpen(false);
+    },
+    [workforceId, isMobile]
+  );
+  const sidebarContext = useMemo9(
+    () => ({
+      collapsed: effectiveCollapsed,
+      isMobile,
+      isCollapsedRail,
+      iconOnlyLayout
+    }),
+    [effectiveCollapsed, isMobile, isCollapsedRail, iconOnlyLayout]
+  );
+  const resolvedComponents = useMemo9(() => {
+    const next = { Welcome: StudioWelcome, ...components };
+    next.Composer = makeComposerWithPortal(components?.Composer);
+    return next;
+  }, [components]);
+  return /* @__PURE__ */ jsx43(StudioSidebarContext.Provider, { value: sidebarContext, children: /* @__PURE__ */ jsxs24(
+    "div",
+    {
+      className: cn(
+        "relative h-dvh overflow-hidden bg-background",
+        isMobile && mobileSidebarOpen && "max-md:overflow-hidden"
+      ),
+      style: studioChromeShellStyle,
+      children: [
+        /* @__PURE__ */ jsx43(
+          "div",
+          {
+            className: "pointer-events-none absolute inset-0 z-0 bg-background",
+            "aria-hidden": true
+          }
+        ),
+        /* @__PURE__ */ jsx43(
+          "div",
+          {
+            className: cn(
+              "pointer-events-none absolute inset-0 z-0",
+              studioPlaygroundGradientClass
+            ),
+            "aria-hidden": true
+          }
+        ),
+        /* @__PURE__ */ jsx43(
+          StudioSidebarBackdrop,
+          {
+            open: isMobile && mobileSidebarOpen,
+            onClose: () => setMobileSidebarOpen(false)
+          }
+        ),
+        /* @__PURE__ */ jsx43(
+          StudioSidebarPanel,
+          {
+            workforces,
+            selectedId: activeWorkforceId,
+            onSelect: handleSelectWorkforce,
+            collapsed: effectiveCollapsed,
+            onCollapsedChange,
+            isMobile,
+            mobileOpen: mobileSidebarOpen,
+            onMobileOpenChange: setMobileSidebarOpen,
+            widthCollapsed,
+            entriesVisible,
+            onEntriesBlurOutComplete,
+            onPanelWidthComplete,
+            brand,
+            emptyCaption: sidebarEmptyCaption
+          }
+        ),
+        /* @__PURE__ */ jsxs24(
+          motion10.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__ */ jsxs24(
+                "div",
+                {
+                  className: cn(
+                    "flex min-w-0 flex-1 items-center gap-2",
+                    studioTopbarPillHeightClass
+                  ),
+                  children: [
+                    isMobile && !mobileSidebarOpen ? /* @__PURE__ */ jsx43(
+                      TimbalV2Button,
+                      {
+                        variant: "secondary",
+                        size: "sm",
+                        isIconOnly: true,
+                        className: studioTopbarIconPillClass,
+                        onClick: () => setMobileSidebarOpen(true),
+                        "aria-label": "Open menu",
+                        "aria-expanded": false,
+                        children: /* @__PURE__ */ jsx43(Menu, { className: "size-4" })
+                      }
+                    ) : null,
+                    headerStart
+                  ]
+                }
+              ),
+              headerActions ? /* @__PURE__ */ jsx43("div", { className: "flex shrink-0 items-center gap-1", children: headerActions }) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx43(
+          motion10.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__ */ 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
+import { useCallback as useCallback9, useEffect as useEffect11, useState as useState14 } from "react";
+import { Moon, Sun } from "lucide-react";
+import { jsx as jsx44, jsxs as jsxs25 } from "react/jsx-runtime";
+var ModeToggle = ({
+  theme,
+  setTheme,
+  className,
+  label = "Toggle theme"
+}) => {
+  const isControlled = theme !== void 0;
+  const [internalIsDark, setInternalIsDark] = useState14(false);
+  useEffect11(() => {
+    if (isControlled) return;
+    if (typeof document === "undefined") return;
+    setInternalIsDark(document.documentElement.classList.contains("dark"));
+  }, [isControlled]);
+  const isDark = isControlled ? theme === "dark" : internalIsDark;
+  const onClick = useCallback9(() => {
+    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__ */ jsxs25(
+    TimbalV2Button,
+    {
+      variant: "secondary",
+      size: "sm",
+      isIconOnly: true,
+      onClick,
+      className: cn(
+        studioTopbarPillHeightClass,
+        studioTopbarIconPillClass,
+        "relative",
+        className
+      ),
+      "aria-label": label,
+      title: label,
+      children: [
+        /* @__PURE__ */ jsx44(Sun, { className: "size-3.5 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" }),
+        /* @__PURE__ */ jsx44(Moon, { className: "absolute size-3.5 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" }),
+        /* @__PURE__ */ jsx44("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
+import { Loader2 } from "lucide-react";
+import { jsx as jsx45 } from "react/jsx-runtime";
+var AuthGuard = ({
+  children,
+  requireAuth = false,
+  enabled = true
+}) => {
+  const { isAuthenticated, loading, isEmbedded } = useSession();
+  if (!enabled) {
+    return children;
+  }
+  if (loading) {
+    return /* @__PURE__ */ jsx45("div", { className: "flex items-center justify-center h-screen", children: /* @__PURE__ */ jsx45(Loader2, { className: "w-8 h-8 animate-spin" }) });
+  }
+  if (requireAuth && !isAuthenticated && !isEmbedded) {
+    const returnTo = encodeURIComponent(
+      window.location.pathname + window.location.search
+    );
+    window.location.href = `/api/auth/login?return_to=${returnTo}`;
+    return null;
+  }
+  return children;
+};
+
+// src/index.ts
+import {
+  ThreadPrimitive as ThreadPrimitive2,
+  MessagePrimitive as MessagePrimitive3,
+  ComposerPrimitive as ComposerPrimitive4,
+  ActionBarPrimitive as ActionBarPrimitive2,
+  AuiIf as AuiIf3,
+  AssistantRuntimeProvider as AssistantRuntimeProvider2,
+  useThread as useThread4,
+  useThreadRuntime as useThreadRuntime4,
+  useMessageRuntime,
+  useComposerRuntime as useComposerRuntime2
+} from "@assistant-ui/react";
+export {
+  ARTIFACT_AGENT_INSTRUCTIONS,
+  ARTIFACT_FENCE_LANGUAGES,
+  ActionBarPrimitive2 as ActionBarPrimitive,
+  ArtifactCard,
+  ArtifactRegistryProvider,
+  ArtifactView,
+  AssistantRuntimeProvider2 as AssistantRuntimeProvider,
+  AuiIf3 as AuiIf,
+  AuthGuard,
+  Avatar,
   AvatarFallback,
   AvatarImage,
   Button,
   ChartArtifactView,
   Composer,
-  ComposerAddAttachment,
-  ComposerAttachments,
   ComposerPrimitive4 as ComposerPrimitive,
   DEFAULT_UPLOAD_ACCEPT,
   Dialog,
@@ -4335,44 +5732,27 @@ export {
   DialogPortal,
   DialogTitle,
   DialogTrigger,
-  ErrorPrimitive2 as ErrorPrimitive,
   HtmlArtifactView,
   JsonArtifactView,
   MarkdownText,
-  MessagePartPrimitive2 as MessagePartPrimitive,
   MessagePrimitive3 as 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,
-  syntax_highlighter_default as 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,
   ThreadPrimitive2 as ThreadPrimitive,
   TimbalChat,
   TimbalChatShell,
+  TimbalMark,
   TimbalRuntimeProvider,
-  TimbalV2Button,
+  TimbalStudioShell,
   ToolArtifactFallback,
-  ToolBodyPresence,
   ToolFallback,
-  ToolMotion,
-  ToolPresence,
   Tooltip,
   TooltipContent,
   TooltipIconButton,
@@ -4382,10 +5762,8 @@ export {
   UiCustomNodeRegistryProvider,
   UiEventProvider,
   UiNodeView,
-  UserMessageAttachments,
   WorkforceSelector,
   authFetch,
-  buttonVariants,
   clearTokens,
   cn,
   createDefaultAttachmentAdapter,
@@ -4399,7 +5777,6 @@ export {
   isArtifact,
   isArtifactFenceLanguage,
   isUiBinding,
-  luxuryEase,
   parseArtifactFromToolResult,
   parseSSELine2 as parseSSELine,
   refreshAccessToken,
@@ -4409,38 +5786,13 @@ export {
   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,
-  useAuiState3 as useAuiState,
   useComposerRuntime2 as useComposerRuntime,
   useMessageRuntime,
+  useOptionalSession,
   useResolvedSuggestions,
   useSession,
-  useThread2 as useThread,
+  useThread4 as useThread,
   useThreadRuntime4 as useThreadRuntime,
   useTimbalRuntime,
   useTimbalStream,