@timbal-ai/timbal-react 1.6.0 → 1.7.0

package/dist/studio.cjs

@@ -5466,9 +5466,9 @@ var TimbalChatShell = ({
 };
 
 // src/studio/shell/studio-shell.tsx
-var import_react49 = require("react");
+var import_react50 = require("react");
 var import_lucide_react14 = require("lucide-react");
-var import_react50 = require("motion/react");
+var import_react51 = require("motion/react");
 
 // src/design/sidebar-motion.ts
 var STUDIO_SIDEBAR_EASE_ENTER = [0, 0, 0.2, 1];
@@ -5651,11 +5651,19 @@ function useStudioSidebarLayout() {
 }
 
 // src/studio/sidebar/sidebar.tsx
-var import_react43 = require("react");
-var import_react44 = require("motion/react");
+var import_react44 = require("react");
+var import_react45 = require("motion/react");
+
+// src/layout/shell-nav-context.tsx
+var import_react37 = require("react");
+var ShellNavContext = (0, import_react37.createContext)(null);
+var ShellNavProvider = ShellNavContext.Provider;
+function useOptionalShellNav() {
+  return (0, import_react37.useContext)(ShellNavContext);
+}
 
 // src/studio/sidebar/sidebar-entries.tsx
-var import_react37 = require("motion/react");
+var import_react38 = require("motion/react");
 var import_jsx_runtime41 = require("react/jsx-runtime");
 var StudioSidebarEntries = ({
   visible,
@@ -5663,12 +5671,12 @@ var StudioSidebarEntries = ({
   children,
   className
 }) => {
-  const reducedMotion = (0, import_react37.useReducedMotion)();
+  const reducedMotion = (0, import_react38.useReducedMotion)();
   if (reducedMotion) {
     return visible ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: cn("flex min-h-0 flex-1 flex-col", className), children }) : null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-    import_react37.motion.div,
+    import_react38.motion.div,
     {
       className: cn("flex min-h-0 flex-1 flex-col", className),
       initial: false,
@@ -5688,15 +5696,15 @@ var StudioSidebarEntries = ({
 };
 
 // src/studio/sidebar/sidebar-footer.tsx
-var import_react40 = require("react");
+var import_react41 = require("react");
 var import_lucide_react11 = require("lucide-react");
 
 // src/auth/provider.tsx
-var import_react38 = require("react");
+var import_react39 = require("react");
 var import_jsx_runtime42 = require("react/jsx-runtime");
-var SessionContext = (0, import_react38.createContext)(void 0);
+var SessionContext = (0, import_react39.createContext)(void 0);
 var useOptionalSession = () => {
-  const context = (0, import_react38.useContext)(SessionContext);
+  const context = (0, import_react39.useContext)(SessionContext);
   return context ?? null;
 };
 
@@ -5723,17 +5731,17 @@ function studioSidebarNavItemClasses(iconOnly, isActive) {
 }
 
 // src/studio/sidebar/sidebar-entry-motion.tsx
-var import_react39 = require("motion/react");
+var import_react40 = require("motion/react");
 var import_jsx_runtime43 = require("react/jsx-runtime");
 var StudioSidebarEntryMotion = ({
   children,
   className
 }) => {
-  const reducedMotion = (0, import_react39.useReducedMotion)();
+  const reducedMotion = (0, import_react40.useReducedMotion)();
   if (reducedMotion) {
     return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className, children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react39.motion.div, { variants: studioSidebarEntryItemVariants, className: cn(className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react40.motion.div, { variants: studioSidebarEntryItemVariants, className: cn(className), children });
 };
 
 // src/studio/sidebar/sidebar-tooltip.tsx
@@ -5857,8 +5865,8 @@ var StudioSidebarFooter = ({
 }) => {
   const session = useOptionalSession();
   const user = session?.user ?? null;
-  const [isDark, setIsDark] = (0, import_react40.useState)(false);
-  (0, import_react40.useEffect)(() => {
+  const [isDark, setIsDark] = (0, import_react41.useState)(false);
+  (0, import_react41.useEffect)(() => {
     if (typeof window === "undefined" || typeof document === "undefined") return;
     const stored = window.localStorage.getItem(STORAGE_KEYS.theme);
     if (stored) {
@@ -6210,14 +6218,14 @@ function TimbalMark({
 }
 
 // src/studio/sidebar/shell-inset-bridge-context.tsx
-var import_react42 = require("react");
+var import_react43 = require("react");
 
 // src/layout/shell-inset-context.tsx
-var import_react41 = require("react");
-var ShellInsetContext = (0, import_react41.createContext)(null);
+var import_react42 = require("react");
+var ShellInsetContext = (0, import_react42.createContext)(null);
 var ShellInsetProvider = ShellInsetContext.Provider;
 function useShellInsetReporter() {
-  return (0, import_react41.useContext)(ShellInsetContext);
+  return (0, import_react42.useContext)(ShellInsetContext);
 }
 
 // src/studio/sidebar/shell-inset-bridge-context.tsx
@@ -6226,7 +6234,7 @@ var StudioSidebarShellInsetBridge = ({
 }) => {
   const reportInset = useShellInsetReporter();
   const { isMobile, isCollapsedRail } = useStudioSidebarLayout();
-  (0, import_react42.useLayoutEffect)(() => {
+  (0, import_react43.useLayoutEffect)(() => {
     const insetPx = isMobile ? 0 : isCollapsedRail ? SIDEBAR_INSET_PX_COLLAPSED : SIDEBAR_INSET_PX_EXPANDED;
     reportInset?.(insetPx);
     onInsetChange?.(insetPx);
@@ -6269,7 +6277,7 @@ var StudioSidebarPanel = ({
   logo,
   emptyCaption = null
 }) => {
-  const reducedMotion = (0, import_react44.useReducedMotion)();
+  const reducedMotion = (0, import_react45.useReducedMotion)();
   const isCollapsedRail = widthCollapsed && !isMobile;
   const iconOnlyLayout = studioSidebarIconOnlyLayout(isMobile, isCollapsedRail);
   const isDrawerOpen = isMobile && mobileOpen;
@@ -6291,7 +6299,7 @@ var StudioSidebarPanel = ({
   const brandNode = brand ?? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(TimbalMark, { size: 32 });
   const logoNode = logo ?? (isCustomBrand ? null : brandNode);
   const panel = /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
-    import_react44.motion.div,
+    import_react45.motion.div,
     {
       "data-sidebar-collapsed": isCollapsedRail ? "" : void 0,
       className: cn(
@@ -6361,7 +6369,7 @@ var StudioSidebarPanel = ({
   );
   if (isMobile) {
     return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-      import_react44.motion.aside,
+      import_react45.motion.aside,
       {
         className: "fixed inset-y-0 left-0 z-[60] flex",
         "aria-label": "Studio navigation",
@@ -6399,51 +6407,62 @@ var StudioSidebar = ({
   onMobileOpenChange: onMobileOpenChangeProp,
   onInsetChange
 }) => {
-  const reducedMotion = (0, import_react44.useReducedMotion)();
+  const reducedMotion = (0, import_react45.useReducedMotion)();
   const fetched = useWorkforces({ enabled: workforcesProp === void 0 });
   const workforces = workforcesProp ?? fetched.workforces;
-  const [internalSelected, setInternalSelected] = (0, import_react43.useState)(
+  const [internalSelected, setInternalSelected] = (0, import_react44.useState)(
     selectedIdProp ?? ""
   );
-  (0, import_react43.useEffect)(() => {
+  (0, import_react44.useEffect)(() => {
     if (selectedIdProp !== void 0) return;
     if (internalSelected) return;
     const first = workforces[0]?.id ?? workforces[0]?.uid ?? workforces[0]?.name;
     if (first) setInternalSelected(first);
   }, [workforces, selectedIdProp, internalSelected]);
   const selectedId = selectedIdProp ?? internalSelected ?? workforces[0]?.id ?? workforces[0]?.uid ?? workforces[0]?.name ?? "";
-  const [collapsed, setCollapsed] = (0, import_react43.useState)(() => {
+  const [collapsed, setCollapsed] = (0, import_react44.useState)(() => {
     const persisted = readPersistedCollapsed(persistKey);
     return persisted || defaultCollapsed;
   });
-  const handleCollapsedChange = (0, import_react43.useCallback)(
+  const handleCollapsedChange = (0, import_react44.useCallback)(
     (next) => {
       setCollapsed(next);
       writePersistedCollapsed(persistKey, next);
     },
     [persistKey]
   );
-  const [isMobile, setIsMobile] = (0, import_react43.useState)(() => {
+  const [isMobile, setIsMobile] = (0, import_react44.useState)(() => {
     if (typeof window === "undefined") return false;
     return window.innerWidth < mobileBreakpointPx;
   });
-  (0, import_react43.useEffect)(() => {
+  (0, import_react44.useEffect)(() => {
     if (typeof window === "undefined") return;
     const onResize = () => setIsMobile(window.innerWidth < mobileBreakpointPx);
     onResize();
     window.addEventListener("resize", onResize);
     return () => window.removeEventListener("resize", onResize);
   }, [mobileBreakpointPx]);
-  const [internalMobileOpen, setInternalMobileOpen] = (0, import_react43.useState)(false);
-  const mobileOpen = mobileOpenProp ?? internalMobileOpen;
-  const setMobileOpen = (0, import_react43.useCallback)(
+  const shellNav = useOptionalShellNav();
+  const isControlled = mobileOpenProp !== void 0;
+  const usingShellNav = !isControlled && shellNav !== null;
+  const [internalMobileOpen, setInternalMobileOpen] = (0, import_react44.useState)(false);
+  const mobileOpen = isControlled ? mobileOpenProp : usingShellNav ? shellNav.open : internalMobileOpen;
+  const setMobileOpen = (0, import_react44.useCallback)(
     (next) => {
-      if (mobileOpenProp === void 0) setInternalMobileOpen(next);
+      if (isControlled) {
+        onMobileOpenChangeProp?.(next);
+        return;
+      }
+      if (usingShellNav) {
+        shellNav.setOpen(next);
+      } else {
+        setInternalMobileOpen(next);
+      }
       onMobileOpenChangeProp?.(next);
     },
-    [mobileOpenProp, onMobileOpenChangeProp]
+    [isControlled, usingShellNav, shellNav, onMobileOpenChangeProp]
   );
-  const handleSelect = (0, import_react43.useCallback)(
+  const handleSelect = (0, import_react44.useCallback)(
     (id) => {
       if (selectedIdProp === void 0) setInternalSelected(id);
       onSelect?.(id);
@@ -6451,10 +6470,10 @@ var StudioSidebar = ({
     },
     [selectedIdProp, onSelect, isMobile, setMobileOpen]
   );
-  (0, import_react43.useEffect)(() => {
+  (0, import_react44.useEffect)(() => {
     if (!isMobile && mobileOpen) setMobileOpen(false);
   }, [isMobile, mobileOpen, setMobileOpen]);
-  (0, import_react43.useEffect)(() => {
+  (0, import_react44.useEffect)(() => {
     if (!isMobile || !mobileOpen) return;
     const onKeyDown = (e) => {
       if (e.key === "Escape") setMobileOpen(false);
@@ -6472,7 +6491,7 @@ var StudioSidebar = ({
   const entriesVisible = isMobile || phaseEntriesVisible;
   const isCollapsedRail = widthCollapsed && !isMobile;
   const iconOnlyLayout = studioSidebarIconOnlyLayout(isMobile, isCollapsedRail);
-  const contextValue = (0, import_react43.useMemo)(
+  const contextValue = (0, import_react44.useMemo)(
     () => ({
       collapsed: effectiveCollapsed,
       isMobile,
@@ -6508,23 +6527,23 @@ var StudioSidebar = ({
 };
 
 // src/studio/sidebar/sidebar-runtime-portal.tsx
-var import_react45 = require("react");
+var import_react46 = require("react");
 var import_react_dom = require("react-dom");
 var import_lucide_react13 = require("lucide-react");
-var import_react46 = require("@assistant-ui/react");
+var import_react47 = require("@assistant-ui/react");
 var import_jsx_runtime51 = require("react/jsx-runtime");
 var StudioSidebarRuntimePortal = ({
   label = "New chat"
 }) => {
   const { iconOnlyLayout, isMobile, closeMobile } = useStudioSidebarLayout();
-  const hasMessages = (0, import_react46.useThread)((s) => s.messages.length > 0);
+  const hasMessages = (0, import_react47.useThread)((s) => s.messages.length > 0);
   const { clear } = useTimbalRuntime();
-  const [anchor, setAnchor] = (0, import_react45.useState)(null);
-  const startNewChat = (0, import_react45.useCallback)(() => {
+  const [anchor, setAnchor] = (0, import_react46.useState)(null);
+  const startNewChat = (0, import_react46.useCallback)(() => {
     clear();
     if (isMobile) closeMobile?.();
   }, [clear, isMobile, closeMobile]);
-  (0, import_react45.useLayoutEffect)(() => {
+  (0, import_react46.useLayoutEffect)(() => {
     setAnchor(document.getElementById(DOM_IDS.sidebarRuntimeAnchor));
   }, []);
   if (!anchor || !hasMessages) return null;
@@ -6551,8 +6570,8 @@ var StudioSidebarRuntimePortal = ({
 };
 
 // src/studio/sidebar/welcome.tsx
-var import_react47 = require("motion/react");
-var import_react48 = require("@assistant-ui/react");
+var import_react48 = require("motion/react");
+var import_react49 = require("@assistant-ui/react");
 var import_jsx_runtime52 = require("react/jsx-runtime");
 var welcomeStagger2 = {
   initial: {},
@@ -6578,7 +6597,7 @@ var welcomeIcon2 = {
   }
 };
 var StudioWelcome = ({ config, icon }) => {
-  const isEmpty = (0, import_react48.useThread)((s) => s.messages.length === 0);
+  const isEmpty = (0, import_react49.useThread)((s) => s.messages.length === 0);
   if (!isEmpty) return null;
   const iconNode = icon ?? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     TimbalMark,
@@ -6588,16 +6607,16 @@ var StudioWelcome = ({ config, icon }) => {
     }
   );
   return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "aui-thread-welcome-root mx-auto my-auto flex w-full max-w-(--thread-max-width) grow flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "aui-thread-welcome-center flex w-full grow flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
-    import_react47.motion.div,
+    import_react48.motion.div,
     {
       className: "aui-thread-welcome-message flex flex-col items-center justify-center px-2 text-center sm:px-4",
       variants: welcomeStagger2,
       initial: "initial",
       animate: "animate",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_react47.motion.div, { variants: welcomeIcon2, className: "mb-4 md:mb-5", children: iconNode }),
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_react48.motion.div, { variants: welcomeIcon2, className: "mb-4 md:mb-5", children: iconNode }),
         /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-          import_react47.motion.h1,
+          import_react48.motion.h1,
           {
             variants: welcomeItem2,
             className: "aui-thread-welcome-message-inner text-xl font-semibold sm:text-2xl",
@@ -6605,7 +6624,7 @@ var StudioWelcome = ({ config, icon }) => {
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-          import_react47.motion.p,
+          import_react48.motion.p,
           {
             variants: welcomeItem2,
             className: "aui-thread-welcome-message-inner mt-2 text-muted-foreground",
@@ -6619,7 +6638,7 @@ var StudioWelcome = ({ config, icon }) => {
 
 // src/studio/shell/studio-shell.tsx
 var import_jsx_runtime53 = require("react/jsx-runtime");
-var import_react51 = require("react");
+var import_react52 = require("react");
 var DEFAULT_BREAKPOINT_PX2 = 768;
 function readPersistedCollapsed2(key) {
   if (!key || typeof window === "undefined") return false;
@@ -6662,7 +6681,7 @@ var TimbalStudioShell = ({
   components,
   ...chatProps
 }) => {
-  const reducedMotion = (0, import_react50.useReducedMotion)();
+  const reducedMotion = (0, import_react51.useReducedMotion)();
   const shouldFetchWorkforces = !workforceId && workforcesProp === void 0;
   const fetched = useWorkforces({
     enabled: shouldFetchWorkforces,
@@ -6670,36 +6689,36 @@ var TimbalStudioShell = ({
     baseUrl: workforcesBaseUrl
   });
   const workforces = workforcesProp ?? fetched.workforces;
-  const [internalSelected, setInternalSelected] = (0, import_react49.useState)(
+  const [internalSelected, setInternalSelected] = (0, import_react50.useState)(
     workforceId ?? ""
   );
-  (0, import_react49.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     if (workforceId) return;
     if (internalSelected) return;
     const first = workforces[0]?.id ?? workforces[0]?.uid ?? workforces[0]?.name;
     if (first) setInternalSelected(first);
   }, [workforces, workforceId, internalSelected]);
   const activeWorkforceId = workforceId ?? internalSelected ?? fetched.selectedId ?? "";
-  const [collapsed, setCollapsed] = (0, import_react49.useState)(() => {
+  const [collapsed, setCollapsed] = (0, import_react50.useState)(() => {
     const persisted = readPersistedCollapsed2(persistKey);
     return persisted || defaultCollapsed;
   });
-  const [isMobile, setIsMobile] = (0, import_react49.useState)(() => {
+  const [isMobile, setIsMobile] = (0, import_react50.useState)(() => {
     if (typeof window === "undefined") return false;
     return window.innerWidth < mobileBreakpointPx;
   });
-  const [mobileSidebarOpen, setMobileSidebarOpen] = (0, import_react49.useState)(false);
-  (0, import_react49.useEffect)(() => {
+  const [mobileSidebarOpen, setMobileSidebarOpen] = (0, import_react50.useState)(false);
+  (0, import_react50.useEffect)(() => {
     if (typeof window === "undefined") return;
     const onResize = () => setIsMobile(window.innerWidth < mobileBreakpointPx);
     onResize();
     window.addEventListener("resize", onResize);
     return () => window.removeEventListener("resize", onResize);
   }, [mobileBreakpointPx]);
-  (0, import_react49.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     if (!isMobile) setMobileSidebarOpen(false);
   }, [isMobile]);
-  (0, import_react49.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     if (!mobileSidebarOpen) return;
     const onKeyDown = (e) => {
       if (e.key === "Escape") setMobileSidebarOpen(false);
@@ -6723,21 +6742,21 @@ var TimbalStudioShell = ({
     layoutDirection
   );
   const desktopInsetPx = widthCollapsed ? SIDEBAR_INSET_PX_COLLAPSED : SIDEBAR_INSET_PX_EXPANDED;
-  const onCollapsedChange = (0, import_react49.useCallback)(
+  const onCollapsedChange = (0, import_react50.useCallback)(
     (next) => {
       setCollapsed(next);
       writePersistedCollapsed2(persistKey, next);
     },
     [persistKey]
   );
-  const handleSelectWorkforce = (0, import_react49.useCallback)(
+  const handleSelectWorkforce = (0, import_react50.useCallback)(
     (id) => {
       if (!workforceId) setInternalSelected(id);
       if (isMobile) setMobileSidebarOpen(false);
     },
     [workforceId, isMobile]
   );
-  const sidebarContext = (0, import_react49.useMemo)(
+  const sidebarContext = (0, import_react50.useMemo)(
     () => ({
       collapsed: effectiveCollapsed,
       isMobile,
@@ -6747,7 +6766,7 @@ var TimbalStudioShell = ({
     }),
     [effectiveCollapsed, isMobile, isCollapsedRail, iconOnlyLayout]
   );
-  const resolvedComponents = (0, import_react49.useMemo)(() => {
+  const resolvedComponents = (0, import_react50.useMemo)(() => {
     const next = { Welcome: StudioWelcome, ...components };
     next.Composer = makeComposerWithPortal(components?.Composer);
     return next;
@@ -6806,7 +6825,7 @@ var TimbalStudioShell = ({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
-          import_react50.motion.header,
+          import_react51.motion.header,
           {
             className: cn(
               "absolute top-0 right-0 z-40 flex items-start justify-between gap-2",
@@ -6847,7 +6866,7 @@ var TimbalStudioShell = ({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-          import_react50.motion.main,
+          import_react51.motion.main,
           {
             className: cn(
               "relative z-10 flex h-full min-w-0 flex-col",
@@ -6857,7 +6876,7 @@ var TimbalStudioShell = ({
             initial: false,
             animate: { paddingLeft: isMobile ? 12 : desktopInsetPx },
             transition: layoutTransition,
-            children: activeWorkforceId ? /* @__PURE__ */ (0, import_react51.createElement)(
+            children: activeWorkforceId ? /* @__PURE__ */ (0, import_react52.createElement)(
               TimbalChat,
               {
                 ...chatProps,
@@ -6876,7 +6895,7 @@ var TimbalStudioShell = ({
 };
 
 // src/studio/sidebar/mode-toggle.tsx
-var import_react52 = require("react");
+var import_react53 = require("react");
 var import_lucide_react15 = require("lucide-react");
 var import_jsx_runtime54 = require("react/jsx-runtime");
 function readStoredTheme() {
@@ -6906,8 +6925,8 @@ var ModeToggle = ({
   label = "Toggle theme"
 }) => {
   const isControlled = theme !== void 0;
-  const [internalIsDark, setInternalIsDark] = (0, import_react52.useState)(false);
-  (0, import_react52.useLayoutEffect)(() => {
+  const [internalIsDark, setInternalIsDark] = (0, import_react53.useState)(false);
+  (0, import_react53.useLayoutEffect)(() => {
     if (isControlled) return;
     const stored = readStoredTheme();
     if (stored) {
@@ -6919,7 +6938,7 @@ var ModeToggle = ({
     setInternalIsDark(document.documentElement.classList.contains("dark"));
   }, [isControlled]);
   const isDark = isControlled ? theme === "dark" : internalIsDark;
-  const onClick = (0, import_react52.useCallback)(() => {
+  const onClick = (0, import_react53.useCallback)(() => {
     const next = isDark ? "light" : "dark";
     if (setTheme) {
       setTheme(next);
@@ -6955,11 +6974,11 @@ var ModeToggle = ({
 };
 
 // src/studio/mode-switch.tsx
-var import_react55 = require("react");
+var import_react56 = require("react");
 
 // src/ui/pill-segmented-tabs.tsx
-var import_react53 = require("react");
-var import_react54 = require("motion/react");
+var import_react54 = require("react");
+var import_react55 = require("motion/react");
 
 // src/design/pill-segmented-classes.ts
 var pillSegmentedTrackBase = "inline-flex w-fit max-w-max shrink-0 self-start items-center rounded-full";
@@ -7003,7 +7022,7 @@ var PillTab = ({
   segmentClassName,
   animateIndicator
 }) => {
-  const handlePress = (0, import_react53.useCallback)(() => {
+  const handlePress = (0, import_react54.useCallback)(() => {
     if (!disabled) onSelect(tabKey);
   }, [disabled, onSelect, tabKey]);
   return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
@@ -7020,7 +7039,7 @@ var PillTab = ({
       ),
       children: [
         isActive && animateIndicator ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-          import_react54.motion.div,
+          import_react55.motion.div,
           {
             layoutId,
             className: pillSegmentedActiveIndicatorClass,
@@ -7041,9 +7060,9 @@ var PillSegmentedTabs = ({
   layoutId: layoutIdProp,
   "aria-label": ariaLabel
 }) => {
-  const reactId = (0, import_react53.useId)();
+  const reactId = (0, import_react54.useId)();
   const layoutId = layoutIdProp ?? `pill-segmented-${reactId.replace(/:/g, "")}`;
-  const reducedMotion = (0, import_react54.useReducedMotion)();
+  const reducedMotion = (0, import_react55.useReducedMotion)();
   const isFlush = trackVariant === "flush";
   const trackClass = isFlush ? pillSegmentedTrackFlushClass : pillSegmentedTrackClass;
   const segmentClassName = isFlush ? pillSegmentedFlushSegmentClass : pillSegmentedSegmentClass;
@@ -7062,7 +7081,7 @@ var PillSegmentedTabs = ({
     tab.key
   )) });
 };
-var MemoPillSegmentedTabs = (0, import_react53.memo)(PillSegmentedTabs);
+var MemoPillSegmentedTabs = (0, import_react54.memo)(PillSegmentedTabs);
 
 // src/studio/mode-switch.tsx
 var import_jsx_runtime56 = require("react/jsx-runtime");
@@ -7070,7 +7089,7 @@ var STUDIO_NAV_MODE = {
   BUILD: "build",
   OPERATE: "operate"
 };
-var StudioModeSwitch = (0, import_react55.memo)(
+var StudioModeSwitch = (0, import_react56.memo)(
   function StudioModeSwitch2({
     value,
     onChange,
@@ -7079,14 +7098,14 @@ var StudioModeSwitch = (0, import_react55.memo)(
     manageLabel = "Manage",
     "aria-label": ariaLabel = "Studio mode"
   }) {
-    const tabs = (0, import_react55.useMemo)(
+    const tabs = (0, import_react56.useMemo)(
       () => [
         { key: STUDIO_NAV_MODE.BUILD, label: buildLabel },
         { key: STUDIO_NAV_MODE.OPERATE, label: manageLabel }
       ],
       [buildLabel, manageLabel]
     );
-    const handleChange = (0, import_react55.useCallback)(
+    const handleChange = (0, import_react56.useCallback)(
       (key) => {
         if (key === STUDIO_NAV_MODE.BUILD || key === STUDIO_NAV_MODE.OPERATE) {
           onChange(key);

package/dist/studio.esm.js

@@ -8,13 +8,13 @@ import {
   TimbalChatShell,
   TimbalMark,
   TimbalStudioShell
-} from "./chunk-HSL36SJ4.esm.js";
-import "./chunk-ELEY66OH.esm.js";
-import "./chunk-TMP7RIA7.esm.js";
-import "./chunk-WQIQW7EM.esm.js";
-import "./chunk-24B4I4XC.esm.js";
+} from "./chunk-PMMI7LBV.esm.js";
+import "./chunk-XOCOZU7J.esm.js";
+import "./chunk-VKXOHVDE.esm.js";
+import "./chunk-7AGIAQE6.esm.js";
+import "./chunk-64RHAJVG.esm.js";
 import "./chunk-R4RQT2XQ.esm.js";
-import "./chunk-MBS7XHV2.esm.js";
+import "./chunk-45NXD3IG.esm.js";
 import "./chunk-EDEKQYSU.esm.js";
 export {
   ModeToggle,

package/dist/ui.cjs

@@ -1035,14 +1035,14 @@ function DialogDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    import_radix_ui5.Dialog.Description,
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_radix_ui5.Dialog.Description, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "div",
     {
       "data-slot": "dialog-description",
       className: cn("text-sm text-muted-foreground", className),
       ...props
     }
-  );
+  ) });
 }
 function DialogHeader({ className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -3444,14 +3444,14 @@ function SheetDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-    import_radix_ui25.Dialog.Description,
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_radix_ui25.Dialog.Description, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    "div",
     {
       "data-slot": "sheet-description",
       className: cn("text-sm text-muted-foreground", className),
       ...props
     }
-  );
+  ) });
 }
 
 // src/ui/alert-dialog.tsx

package/dist/ui.d.cts

@@ -1,4 +1,4 @@
-export { A as AVATAR_PRIMARY_FALLBACK_CLASS, a as Avatar, b as AvatarFallback, c as AvatarImage, B as Banner, d as BannerProps, e as BannerSize, f as BannerTone, g as BannerVariant, h as Button, i as ButtonColor, K as Kanban, j as KanbanCardData, k as KanbanCardVariant, l as KanbanColumnData, m as KanbanDensity, n as KanbanDragHandleProps, o as KanbanLocation, p as KanbanMoveEvent, q as KanbanProps, r as KanbanRenderCardContext, s as KanbanTone, T as Timeline, t as TimelineItem, u as TimelineProps, v as TimelineSize, U as UntitledButton, w as UntitledButtonColor, x as UntitledButtonProps, y as UntitledButtonSize, z as avatarChartVariantClass, C as untitledButtonVariants } from './kanban-FFBeaZPS.cjs';
+export { A as AVATAR_PRIMARY_FALLBACK_CLASS, a as Avatar, b as AvatarFallback, c as AvatarImage, B as Banner, d as BannerProps, e as BannerSize, f as BannerTone, g as BannerVariant, h as Button, i as ButtonColor, K as Kanban, j as KanbanCardData, k as KanbanCardVariant, l as KanbanColumnData, m as KanbanDensity, n as KanbanDragHandleProps, o as KanbanLocation, p as KanbanMoveEvent, q as KanbanProps, r as KanbanRenderCardContext, s as KanbanTone, T as Timeline, t as TimelineItem, u as TimelineProps, v as TimelineSize, U as UntitledButton, w as UntitledButtonColor, x as UntitledButtonProps, y as UntitledButtonSize, z as avatarChartVariantClass, C as untitledButtonVariants } from './kanban-BQxWliCS.cjs';
 export { A as Accordion, a as AccordionContent, b as AccordionItem, c as AccordionTrigger, d as Alert, e as AlertDescription, f as AlertDialog, g as AlertDialogAction, h as AlertDialogCancel, i as AlertDialogContent, j as AlertDialogDescription, k as AlertDialogFooter, l as AlertDialogHeader, m as AlertDialogOverlay, n as AlertDialogPortal, o as AlertDialogTitle, p as AlertDialogTrigger, q as AlertTitle, r as AspectRatio, s as AvatarGroup, t as AvatarGroupProps, B as Badge, u as Breadcrumb, v as BreadcrumbEllipsis, w as BreadcrumbItem, x as BreadcrumbLink, y as BreadcrumbList, z as BreadcrumbPage, C as BreadcrumbSeparator, D as CONTROL_SIZE, E as Calendar, F as CalendarDayButton, G as Card, H as CardContent, I as CardDescription, J as CardFooter, K as CardHeader, L as CardTitle, M as Checkbox, N as CircularProgress, O as CircularProgressProps, P as Collapsible, Q as CollapsibleContent, R as CollapsibleTrigger, S as Combobox, T as ComboboxAnchor, U as ComboboxCommand, V as ComboboxContent, W as ComboboxEmpty, X as ComboboxGroup, Y as ComboboxInput, Z as ComboboxItem, _ as ComboboxList, $ as ComboboxSeparator, a0 as ComboboxShortcut, a1 as ComboboxTrigger, a2 as Command, a3 as CommandDialog, a4 as CommandEmpty, a5 as CommandGroup, a6 as CommandInput, a7 as CommandItem, a8 as CommandList, a9 as CommandSeparator, aa as CommandShortcut, ab as ContextMenu, ac as ContextMenuCheckboxItem, ad as ContextMenuContent, ae as ContextMenuGroup, af as ContextMenuItem, ag as ContextMenuLabel, ah as ContextMenuRadioGroup, ai as ContextMenuRadioItem, aj as ContextMenuSeparator, ak as ContextMenuShortcut, al as ContextMenuSub, am as ContextMenuSubContent, an as ContextMenuSubTrigger, ao as ContextMenuTrigger, ap as ControlClassOptions, aq as ControlShape, ar as ControlSize, as as CopyButton, at as CopyButtonProps, au as DatePicker, av as DatePickerButton, aw as DatePickerCalendar, ax as DatePickerContent, ay as DatePickerTrigger, az as Dialog, aA as DialogClose, aB as DialogContent, aC as DialogDescription, aD as DialogFooter, aE as DialogHeader, aF as DialogOverlay, aG as DialogPortal, aH as DialogTitle, aI as DialogTrigger, aJ as DropdownMenu, aK as DropdownMenuCheckboxItem, aL as DropdownMenuContent, aM as DropdownMenuGroup, aN as DropdownMenuItem, aO as DropdownMenuLabel, aP as DropdownMenuRadioGroup, aQ as DropdownMenuRadioItem, aR as DropdownMenuSeparator, aS as DropdownMenuShortcut, aT as DropdownMenuSub, aU as DropdownMenuSubContent, aV as DropdownMenuSubTrigger, aW as DropdownMenuTrigger, aX as Form, aY as FormControl, aZ as FormField, a_ as FormItem, a$ as FormLabel, b0 as FormMessage, b1 as FormSubmit, b2 as HoverCard, b3 as HoverCardContent, b4 as HoverCardTrigger, b5 as Input, b6 as InputGroup, b7 as InputGroupAddon, b8 as InputGroupInput, b9 as InputGroupText, ba as InputOTP, bb as InputOTPGroup, bc as InputOTPHiddenInput, bd as InputOTPSeparator, be as InputOTPSlot, bf as Kbd, bg as KbdGroup, bh as Label, bi as MemoPillSegmentedTabs, bj as Menubar, bk as MenubarCheckboxItem, bl as MenubarContent, bm as MenubarItem, bn as MenubarLabel, bo as MenubarMenu, bp as MenubarRadioGroup, bq as MenubarRadioItem, br as MenubarSeparator, bs as MenubarShortcut, bt as MenubarSub, bu as MenubarSubContent, bv as MenubarSubTrigger, bw as MenubarTrigger, bx as NavigationMenu, by as NavigationMenuContent, bz as NavigationMenuIndicator, bA as NavigationMenuItem, bB as NavigationMenuLink, bC as NavigationMenuList, bD as NavigationMenuTrigger, bE as NavigationMenuViewport, bF as NumberField, bG as NumberFieldProps, bH as Pagination, bI as PaginationContent, bJ as PaginationEllipsis, bK as PaginationItem, bL as PaginationLink, bM as PaginationNext, bN as PaginationPrevious, bO as PillSegmentedTab, bP as PillSegmentedTabs, bQ as PillSegmentedTabsProps, bR as Popover, bS as PopoverAnchor, bT as PopoverContent, bU as PopoverTrigger, bV as Progress, bW as RadioGroup, bX as RadioGroupItem, bY as Rating, bZ as RatingProps, b_ as RatingTone, b$ as ScrollArea, c0 as ScrollBar, c1 as Select, c2 as SelectContent, c3 as SelectGroup, c4 as SelectItem, c5 as SelectLabel, c6 as SelectScrollDownButton, c7 as SelectScrollUpButton, c8 as SelectSeparator, c9 as SelectTrigger, ca as SelectValue, cb as Separator, cc as Sheet, cd as SheetClose, ce as SheetContent, cf as SheetDescription, cg as SheetFooter, ch as SheetHeader, ci as SheetTitle, cj as SheetTrigger, ck as Shimmer, cl as Skeleton, cm as Slider, cn as Snippet, co as SnippetProps, cp as SnippetSize, cq as SnippetVariant, cr as Spinner, cs as Stepper, ct as StepperProps, cu as StepperStep, cv as Switch, cw as Table, cx as TableBody, cy as TableCaption, cz as TableCell, cA as TableFooter, cB as TableHead, cC as TableHeader, cD as TableRow, cE as TagInput, cF as TagInputProps, cG as TagInputSize, cH as TextShimmerProps, cI as Textarea, cJ as Toast, cK as ToastAction, cL as ToastClose, cM as ToastDescription, cN as ToastProps, cO as ToastProvider, cP as ToastTitle, cQ as ToastViewport, cR as Toaster, cS as Toggle, cT as ToggleGroup, cU as ToggleGroupItem, cV as Toolbar, cW as ToolbarButton, cX as ToolbarLink, cY as ToolbarSeparator, cZ as ToolbarToggleGroup, c_ as ToolbarToggleItem, c$ as Tooltip, d0 as TooltipContent, d1 as TooltipProvider, d2 as TooltipTrigger, d3 as alertVariants, d4 as badgeVariants, d5 as controlClass, d6 as controlSurfaceClass, d7 as formatPickerDate, d8 as navigationMenuTriggerStyle, d9 as overlayAnimationClass, da as overlayItemClass, db as overlayListPanelClass, dc as overlaySurfaceClass, dd as toast, de as toggleVariants, df as useToast } from './circular-progress-B9nnwzCu.cjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';

package/dist/ui.d.ts

@@ -1,4 +1,4 @@
-export { A as AVATAR_PRIMARY_FALLBACK_CLASS, a as Avatar, b as AvatarFallback, c as AvatarImage, B as Banner, d as BannerProps, e as BannerSize, f as BannerTone, g as BannerVariant, h as Button, i as ButtonColor, K as Kanban, j as KanbanCardData, k as KanbanCardVariant, l as KanbanColumnData, m as KanbanDensity, n as KanbanDragHandleProps, o as KanbanLocation, p as KanbanMoveEvent, q as KanbanProps, r as KanbanRenderCardContext, s as KanbanTone, T as Timeline, t as TimelineItem, u as TimelineProps, v as TimelineSize, U as UntitledButton, w as UntitledButtonColor, x as UntitledButtonProps, y as UntitledButtonSize, z as avatarChartVariantClass, C as untitledButtonVariants } from './kanban-FFBeaZPS.js';
+export { A as AVATAR_PRIMARY_FALLBACK_CLASS, a as Avatar, b as AvatarFallback, c as AvatarImage, B as Banner, d as BannerProps, e as BannerSize, f as BannerTone, g as BannerVariant, h as Button, i as ButtonColor, K as Kanban, j as KanbanCardData, k as KanbanCardVariant, l as KanbanColumnData, m as KanbanDensity, n as KanbanDragHandleProps, o as KanbanLocation, p as KanbanMoveEvent, q as KanbanProps, r as KanbanRenderCardContext, s as KanbanTone, T as Timeline, t as TimelineItem, u as TimelineProps, v as TimelineSize, U as UntitledButton, w as UntitledButtonColor, x as UntitledButtonProps, y as UntitledButtonSize, z as avatarChartVariantClass, C as untitledButtonVariants } from './kanban-BQxWliCS.js';
 export { A as Accordion, a as AccordionContent, b as AccordionItem, c as AccordionTrigger, d as Alert, e as AlertDescription, f as AlertDialog, g as AlertDialogAction, h as AlertDialogCancel, i as AlertDialogContent, j as AlertDialogDescription, k as AlertDialogFooter, l as AlertDialogHeader, m as AlertDialogOverlay, n as AlertDialogPortal, o as AlertDialogTitle, p as AlertDialogTrigger, q as AlertTitle, r as AspectRatio, s as AvatarGroup, t as AvatarGroupProps, B as Badge, u as Breadcrumb, v as BreadcrumbEllipsis, w as BreadcrumbItem, x as BreadcrumbLink, y as BreadcrumbList, z as BreadcrumbPage, C as BreadcrumbSeparator, D as CONTROL_SIZE, E as Calendar, F as CalendarDayButton, G as Card, H as CardContent, I as CardDescription, J as CardFooter, K as CardHeader, L as CardTitle, M as Checkbox, N as CircularProgress, O as CircularProgressProps, P as Collapsible, Q as CollapsibleContent, R as CollapsibleTrigger, S as Combobox, T as ComboboxAnchor, U as ComboboxCommand, V as ComboboxContent, W as ComboboxEmpty, X as ComboboxGroup, Y as ComboboxInput, Z as ComboboxItem, _ as ComboboxList, $ as ComboboxSeparator, a0 as ComboboxShortcut, a1 as ComboboxTrigger, a2 as Command, a3 as CommandDialog, a4 as CommandEmpty, a5 as CommandGroup, a6 as CommandInput, a7 as CommandItem, a8 as CommandList, a9 as CommandSeparator, aa as CommandShortcut, ab as ContextMenu, ac as ContextMenuCheckboxItem, ad as ContextMenuContent, ae as ContextMenuGroup, af as ContextMenuItem, ag as ContextMenuLabel, ah as ContextMenuRadioGroup, ai as ContextMenuRadioItem, aj as ContextMenuSeparator, ak as ContextMenuShortcut, al as ContextMenuSub, am as ContextMenuSubContent, an as ContextMenuSubTrigger, ao as ContextMenuTrigger, ap as ControlClassOptions, aq as ControlShape, ar as ControlSize, as as CopyButton, at as CopyButtonProps, au as DatePicker, av as DatePickerButton, aw as DatePickerCalendar, ax as DatePickerContent, ay as DatePickerTrigger, az as Dialog, aA as DialogClose, aB as DialogContent, aC as DialogDescription, aD as DialogFooter, aE as DialogHeader, aF as DialogOverlay, aG as DialogPortal, aH as DialogTitle, aI as DialogTrigger, aJ as DropdownMenu, aK as DropdownMenuCheckboxItem, aL as DropdownMenuContent, aM as DropdownMenuGroup, aN as DropdownMenuItem, aO as DropdownMenuLabel, aP as DropdownMenuRadioGroup, aQ as DropdownMenuRadioItem, aR as DropdownMenuSeparator, aS as DropdownMenuShortcut, aT as DropdownMenuSub, aU as DropdownMenuSubContent, aV as DropdownMenuSubTrigger, aW as DropdownMenuTrigger, aX as Form, aY as FormControl, aZ as FormField, a_ as FormItem, a$ as FormLabel, b0 as FormMessage, b1 as FormSubmit, b2 as HoverCard, b3 as HoverCardContent, b4 as HoverCardTrigger, b5 as Input, b6 as InputGroup, b7 as InputGroupAddon, b8 as InputGroupInput, b9 as InputGroupText, ba as InputOTP, bb as InputOTPGroup, bc as InputOTPHiddenInput, bd as InputOTPSeparator, be as InputOTPSlot, bf as Kbd, bg as KbdGroup, bh as Label, bi as MemoPillSegmentedTabs, bj as Menubar, bk as MenubarCheckboxItem, bl as MenubarContent, bm as MenubarItem, bn as MenubarLabel, bo as MenubarMenu, bp as MenubarRadioGroup, bq as MenubarRadioItem, br as MenubarSeparator, bs as MenubarShortcut, bt as MenubarSub, bu as MenubarSubContent, bv as MenubarSubTrigger, bw as MenubarTrigger, bx as NavigationMenu, by as NavigationMenuContent, bz as NavigationMenuIndicator, bA as NavigationMenuItem, bB as NavigationMenuLink, bC as NavigationMenuList, bD as NavigationMenuTrigger, bE as NavigationMenuViewport, bF as NumberField, bG as NumberFieldProps, bH as Pagination, bI as PaginationContent, bJ as PaginationEllipsis, bK as PaginationItem, bL as PaginationLink, bM as PaginationNext, bN as PaginationPrevious, bO as PillSegmentedTab, bP as PillSegmentedTabs, bQ as PillSegmentedTabsProps, bR as Popover, bS as PopoverAnchor, bT as PopoverContent, bU as PopoverTrigger, bV as Progress, bW as RadioGroup, bX as RadioGroupItem, bY as Rating, bZ as RatingProps, b_ as RatingTone, b$ as ScrollArea, c0 as ScrollBar, c1 as Select, c2 as SelectContent, c3 as SelectGroup, c4 as SelectItem, c5 as SelectLabel, c6 as SelectScrollDownButton, c7 as SelectScrollUpButton, c8 as SelectSeparator, c9 as SelectTrigger, ca as SelectValue, cb as Separator, cc as Sheet, cd as SheetClose, ce as SheetContent, cf as SheetDescription, cg as SheetFooter, ch as SheetHeader, ci as SheetTitle, cj as SheetTrigger, ck as Shimmer, cl as Skeleton, cm as Slider, cn as Snippet, co as SnippetProps, cp as SnippetSize, cq as SnippetVariant, cr as Spinner, cs as Stepper, ct as StepperProps, cu as StepperStep, cv as Switch, cw as Table, cx as TableBody, cy as TableCaption, cz as TableCell, cA as TableFooter, cB as TableHead, cC as TableHeader, cD as TableRow, cE as TagInput, cF as TagInputProps, cG as TagInputSize, cH as TextShimmerProps, cI as Textarea, cJ as Toast, cK as ToastAction, cL as ToastClose, cM as ToastDescription, cN as ToastProps, cO as ToastProvider, cP as ToastTitle, cQ as ToastViewport, cR as Toaster, cS as Toggle, cT as ToggleGroup, cU as ToggleGroupItem, cV as Toolbar, cW as ToolbarButton, cX as ToolbarLink, cY as ToolbarSeparator, cZ as ToolbarToggleGroup, c_ as ToolbarToggleItem, c$ as Tooltip, d0 as TooltipContent, d1 as TooltipProvider, d2 as TooltipTrigger, d3 as alertVariants, d4 as badgeVariants, d5 as controlClass, d6 as controlSurfaceClass, d7 as formatPickerDate, d8 as navigationMenuTriggerStyle, d9 as overlayAnimationClass, da as overlayItemClass, db as overlayListPanelClass, dc as overlaySurfaceClass, dd as toast, de as toggleVariants, df as useToast } from './circular-progress-B9nnwzCu.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';