@timbal-ai/timbal-react 1.4.0 → 1.5.0

package/dist/{chunk-THBA27QY.esm.js → chunk-WMKPT5BV.esm.js}

@@ -20,7 +20,7 @@ import {
 } from "./chunk-QIABF4KB.esm.js";
 import {
   WorkforceSelector
-} from "./chunk-OFWC4MIY.esm.js";
+} from "./chunk-JYDJRGDE.esm.js";
 import {
   Composer,
   TimbalChat,
@@ -43,10 +43,18 @@ import {
   studioTopbarIconPillClass,
   studioTopbarPillHeightClass,
   useTimbalRuntime
-} from "./chunk-GQBYZRD7.esm.js";
+} from "./chunk-IGHBLJV3.esm.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from "./chunk-TZI3ID3C.esm.js";
 import {
   PillSegmentedTabs
-} from "./chunk-VXMM2HX7.esm.js";
+} from "./chunk-ZNYAETFD.esm.js";
 import {
   Avatar,
   AvatarFallback,
@@ -54,9 +62,11 @@ import {
   TimbalV2Button,
   Tooltip,
   TooltipContent,
-  TooltipTrigger,
+  TooltipTrigger
+} from "./chunk-AZL2WANO.esm.js";
+import {
   cn
-} from "./chunk-QU7ET55D.esm.js";
+} from "./chunk-EDEKQYSU.esm.js";
 
 // src/hooks/use-workforces.ts
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -394,9 +404,9 @@ function TimbalMark({
 // src/studio/sidebar/sidebar.tsx
 import {
   useCallback as useCallback3,
-  useEffect as useEffect4,
+  useEffect as useEffect5,
   useMemo as useMemo2,
-  useState as useState4
+  useState as useState5
 } from "react";
 import { motion as motion4, useReducedMotion as useReducedMotion4 } from "motion/react";
 
@@ -523,7 +533,8 @@ var StudioSidebarEntries = ({
 };
 
 // src/studio/sidebar/sidebar-footer.tsx
-import { LogOut } from "lucide-react";
+import { useState as useState4, useEffect as useEffect4 } from "react";
+import { LogOut, Sun, Moon } from "lucide-react";
 
 // src/studio/sidebar/sidebar-layout.ts
 function studioSidebarIconOnlyLayout(isMobile, isCollapsedRail) {
@@ -576,7 +587,7 @@ var StudioSidebarTooltip = ({
 };
 
 // src/studio/sidebar/sidebar-footer.tsx
-import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs3 } 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;
@@ -590,10 +601,75 @@ var StudioSidebarFooter = ({
 }) => {
   const session = useOptionalSession();
   const user = session?.user ?? null;
+  const [isDark, setIsDark] = useState4(false);
+  useEffect4(() => {
+    if (typeof window === "undefined" || typeof document === "undefined") return;
+    const stored = window.localStorage.getItem(STORAGE_KEYS.theme);
+    if (stored) {
+      setIsDark(stored === "dark");
+    } else {
+      setIsDark(document.documentElement.classList.contains("dark"));
+    }
+    const observer = new MutationObserver(() => {
+      setIsDark(document.documentElement.classList.contains("dark"));
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"]
+    });
+    return () => observer.disconnect();
+  }, []);
+  const handleToggleTheme = () => {
+    const nextIsDark = !isDark;
+    setIsDark(nextIsDark);
+    if (typeof document !== "undefined") {
+      document.documentElement.classList.toggle("dark", nextIsDark);
+    }
+    if (typeof window !== "undefined") {
+      try {
+        window.localStorage.setItem(STORAGE_KEYS.theme, nextIsDark ? "dark" : "light");
+      } catch {
+      }
+    }
+  };
   const handleSignOut = () => {
     session?.logout();
     onSignOut?.();
   };
+  const dropdownContent = user ? /* @__PURE__ */ jsxs3(
+    DropdownMenuContent,
+    {
+      side: iconOnlyLayout ? "right" : "top",
+      align: iconOnlyLayout ? "end" : "start",
+      className: "w-56 z-[70]",
+      children: [
+        /* @__PURE__ */ jsx8(DropdownMenuLabel, { className: "font-normal", children: /* @__PURE__ */ jsxs3("div", { className: "flex flex-col space-y-1", children: [
+          /* @__PURE__ */ jsx8("p", { className: "truncate text-sm font-medium leading-none text-foreground", children: user.user_name }),
+          /* @__PURE__ */ jsx8("p", { className: "truncate text-xs leading-none text-muted-foreground", children: user.user_email })
+        ] }) }),
+        /* @__PURE__ */ jsx8(DropdownMenuSeparator, {}),
+        /* @__PURE__ */ jsx8(DropdownMenuItem, { onClick: handleToggleTheme, className: "cursor-pointer", children: isDark ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
+          /* @__PURE__ */ jsx8(Sun, { className: "mr-2 size-3.5 shrink-0 text-muted-foreground" }),
+          /* @__PURE__ */ jsx8("span", { children: "Light mode" })
+        ] }) : /* @__PURE__ */ jsxs3(Fragment2, { children: [
+          /* @__PURE__ */ jsx8(Moon, { className: "mr-2 size-3.5 shrink-0 text-muted-foreground" }),
+          /* @__PURE__ */ jsx8("span", { children: "Dark mode" })
+        ] }) }),
+        /* @__PURE__ */ jsx8(DropdownMenuSeparator, {}),
+        /* @__PURE__ */ jsxs3(
+          DropdownMenuItem,
+          {
+            onClick: handleSignOut,
+            className: "cursor-pointer text-destructive focus:text-destructive focus:bg-destructive/10",
+            children: [
+              /* @__PURE__ */ jsx8(LogOut, { className: "mr-2 size-3.5 shrink-0" }),
+              /* @__PURE__ */ jsx8("span", { children: "Sign out" })
+            ]
+          }
+        )
+      ]
+    }
+  ) : null;
   return /* @__PURE__ */ jsx8(StudioSidebarEntryMotion, { children: /* @__PURE__ */ jsx8(
     "footer",
     {
@@ -601,42 +677,36 @@ var StudioSidebarFooter = ({
         "mt-auto w-full shrink-0 py-2.5",
         iconOnlyLayout ? studioSidebarCollapsedRailInsetClass : "px-2.5"
       ),
-      children: user ? /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-2", children: [
-        iconOnlyLayout ? /* @__PURE__ */ jsx8("div", { className: studioSidebarCollapsedRailChipRowClass, children: /* @__PURE__ */ jsxs3(Avatar, { size: "sm", className: "size-8", children: [
-          user.user_photo_url ? /* @__PURE__ */ jsx8(AvatarImage, { src: user.user_photo_url, alt: user.user_name }) : null,
-          /* @__PURE__ */ jsx8(AvatarFallback, { className: "text-[10px]", children: userInitials(user.user_name, user.user_email) })
-        ] }) }) : /* @__PURE__ */ jsxs3("div", { className: "flex min-w-0 items-center gap-2.5", children: [
-          /* @__PURE__ */ jsxs3(Avatar, { size: "sm", children: [
-            user.user_photo_url ? /* @__PURE__ */ jsx8(AvatarImage, { src: user.user_photo_url, alt: user.user_name }) : null,
-            /* @__PURE__ */ jsx8(AvatarFallback, { children: userInitials(user.user_name, user.user_email) })
-          ] }),
-          /* @__PURE__ */ jsxs3("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ jsx8("p", { className: "truncate text-sm font-medium text-foreground", children: user.user_name }),
-            /* @__PURE__ */ jsx8("p", { className: "truncate text-xs text-muted-foreground", children: user.user_email })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx8(
-          "div",
+      children: user ? /* @__PURE__ */ jsxs3(DropdownMenu, { children: [
+        /* @__PURE__ */ jsx8("div", { className: cn(iconOnlyLayout && studioSidebarCollapsedRailChipRowClass), children: /* @__PURE__ */ jsx8(StudioSidebarTooltip, { label: iconOnlyLayout ? user.user_name : "User menu", enabled: showTooltips, children: /* @__PURE__ */ jsx8(DropdownMenuTrigger, { asChild: true, children: iconOnlyLayout ? /* @__PURE__ */ jsx8(
+          "button",
           {
-            className: iconOnlyLayout ? studioSidebarCollapsedRailChipRowClass : void 0,
-            children: /* @__PURE__ */ jsx8(StudioSidebarTooltip, { label: "Sign out", enabled: showTooltips, children: /* @__PURE__ */ jsxs3(
-              "button",
-              {
-                type: "button",
-                onClick: handleSignOut,
-                className: cn(
-                  studioSidebarNavItemClasses(iconOnlyLayout, false),
-                  iconOnlyLayout && "inline-flex"
-                ),
-                "aria-label": "Sign out",
-                children: [
-                  /* @__PURE__ */ jsx8(LogOut, { className: "size-3.5 shrink-0" }),
-                  !iconOnlyLayout ? "Sign out" : null
-                ]
-              }
-            ) })
+            type: "button",
+            className: "rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 transition-colors hover:bg-accent/50 p-0.5",
+            "aria-label": "User menu",
+            children: /* @__PURE__ */ jsxs3(Avatar, { size: "sm", className: "size-8", children: [
+              user.user_photo_url ? /* @__PURE__ */ jsx8(AvatarImage, { src: user.user_photo_url, alt: user.user_name }) : null,
+              /* @__PURE__ */ jsx8(AvatarFallback, { className: "text-[10px]", children: userInitials(user.user_name, user.user_email) })
+            ] })
           }
-        )
+        ) : /* @__PURE__ */ jsxs3(
+          "button",
+          {
+            type: "button",
+            className: "flex w-full min-w-0 items-center gap-2.5 rounded-lg p-2 hover:bg-accent/50 outline-none focus-visible:ring-2 focus-visible:ring-ring transition-colors text-left",
+            children: [
+              /* @__PURE__ */ jsxs3(Avatar, { size: "sm", className: "shrink-0", children: [
+                user.user_photo_url ? /* @__PURE__ */ jsx8(AvatarImage, { src: user.user_photo_url, alt: user.user_name }) : null,
+                /* @__PURE__ */ jsx8(AvatarFallback, { children: userInitials(user.user_name, user.user_email) })
+              ] }),
+              /* @__PURE__ */ jsxs3("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx8("p", { className: "truncate text-sm font-medium text-foreground", children: user.user_name }),
+                /* @__PURE__ */ jsx8("p", { className: "truncate text-xs text-muted-foreground", children: user.user_email })
+              ] })
+            ]
+          }
+        ) }) }) }),
+        dropdownContent
       ] }) : !iconOnlyLayout && emptyCaption ? /* @__PURE__ */ jsx8("p", { className: "px-1 text-xs text-muted-foreground", children: emptyCaption }) : null
     }
   ) });
@@ -662,53 +732,70 @@ var SidebarToggleButton = ({ ariaLabel, expanded, onClick, children }) => /* @__
     children
   }
 );
-var CollapsedBrandToggle = ({
-  onExpand,
-  brand
-}) => /* @__PURE__ */ jsx9("div", { className: studioSidebarCollapsedRailChipRowClass, children: /* @__PURE__ */ jsx9(StudioSidebarTooltip, { label: "Expand sidebar", enabled: true, children: /* @__PURE__ */ jsxs4(
-  "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__ */ jsx9(
-        "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__ */ jsx9(
-        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 CollapsedBrandToggle = ({ onExpand, logo, fallbackToChevron }) => {
+  if (fallbackToChevron || !logo) {
+    return /* @__PURE__ */ jsx9("div", { className: studioSidebarCollapsedRailChipRowClass, children: /* @__PURE__ */ jsx9(StudioSidebarTooltip, { label: "Expand sidebar", enabled: true, children: /* @__PURE__ */ jsx9(
+      "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__ */ jsx9(ChevronRight, { "aria-hidden": true, className: "size-4" })
+      }
+    ) }) });
   }
-) }) });
+  return /* @__PURE__ */ jsx9("div", { className: studioSidebarCollapsedRailChipRowClass, children: /* @__PURE__ */ jsx9(StudioSidebarTooltip, { label: "Expand sidebar", enabled: true, children: /* @__PURE__ */ jsxs4(
+    "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__ */ jsx9(
+          "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: logo
+          }
+        ),
+        /* @__PURE__ */ jsx9(
+          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
+  brand,
+  logo,
+  fallbackToChevron
 }) => {
   if (isMobile) {
     return /* @__PURE__ */ jsxs4("header", { className: cn(sidebarHeaderClass, "justify-between gap-2 pr-2"), children: [
@@ -732,7 +819,14 @@ var StudioSidebarHeader = ({
           "flex h-12 shrink-0 items-center",
           studioSidebarCollapsedRailInsetClass
         ),
-        children: /* @__PURE__ */ jsx9(CollapsedBrandToggle, { onExpand: onToggle, brand })
+        children: /* @__PURE__ */ jsx9(
+          CollapsedBrandToggle,
+          {
+            onExpand: onToggle,
+            logo,
+            fallbackToChevron
+          }
+        )
       }
     );
   }
@@ -857,6 +951,7 @@ var StudioSidebarPanel = ({
   onEntriesBlurOutComplete,
   onPanelWidthComplete,
   brand,
+  logo,
   emptyCaption = null
 }) => {
   const reducedMotion = useReducedMotion4();
@@ -876,7 +971,10 @@ var StudioSidebarPanel = ({
     onCollapsedChange(!collapsed);
   };
   const panelWidthPx = isMobile ? SIDEBAR_MOBILE_PX : widthCollapsed ? SIDEBAR_WIDTH_COLLAPSED_PX : SIDEBAR_WIDTH_PX;
+  const isCustomBrand = brand !== void 0;
+  const fallbackToChevron = isCustomBrand && !logo;
   const brandNode = brand ?? /* @__PURE__ */ jsx11(TimbalMark, { size: 32 });
+  const logoNode = logo ?? (isCustomBrand ? null : brandNode);
   const panel = /* @__PURE__ */ jsxs5(
     motion4.div,
     {
@@ -899,7 +997,9 @@ var StudioSidebarPanel = ({
             isMobile,
             mobileOpen,
             onToggle: handleToggle,
-            brand: brandNode
+            brand: brandNode,
+            logo: logoNode,
+            fallbackToChevron
           }
         ),
         /* @__PURE__ */ jsxs5(
@@ -978,6 +1078,7 @@ var StudioSidebar = ({
   persistKey = STORAGE_KEYS.sidebarCollapsed,
   mobileBreakpointPx = DEFAULT_BREAKPOINT_PX,
   brand,
+  logo,
   emptyCaption,
   mobileOpen: mobileOpenProp,
   onMobileOpenChange: onMobileOpenChangeProp,
@@ -986,24 +1087,17 @@ var StudioSidebar = ({
   const reducedMotion = useReducedMotion4();
   const fetched = useWorkforces({ enabled: workforcesProp === void 0 });
   const workforces = workforcesProp ?? fetched.workforces;
-  const [internalSelected, setInternalSelected] = useState4(
+  const [internalSelected, setInternalSelected] = useState5(
     selectedIdProp ?? ""
   );
-  useEffect4(() => {
+  useEffect5(() => {
     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 = useCallback3(
-    (id) => {
-      if (selectedIdProp === void 0) setInternalSelected(id);
-      onSelect?.(id);
-    },
-    [selectedIdProp, onSelect]
-  );
-  const [collapsed, setCollapsed] = useState4(() => {
+  const [collapsed, setCollapsed] = useState5(() => {
     const persisted = readPersistedCollapsed(persistKey);
     return persisted || defaultCollapsed;
   });
@@ -1014,18 +1108,18 @@ var StudioSidebar = ({
     },
     [persistKey]
   );
-  const [isMobile, setIsMobile] = useState4(() => {
+  const [isMobile, setIsMobile] = useState5(() => {
     if (typeof window === "undefined") return false;
     return window.innerWidth < mobileBreakpointPx;
   });
-  useEffect4(() => {
+  useEffect5(() => {
     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] = useState4(false);
+  const [internalMobileOpen, setInternalMobileOpen] = useState5(false);
   const mobileOpen = mobileOpenProp ?? internalMobileOpen;
   const setMobileOpen = useCallback3(
     (next) => {
@@ -1034,6 +1128,25 @@ var StudioSidebar = ({
     },
     [mobileOpenProp, onMobileOpenChangeProp]
   );
+  const handleSelect = useCallback3(
+    (id) => {
+      if (selectedIdProp === void 0) setInternalSelected(id);
+      onSelect?.(id);
+      if (isMobile) setMobileOpen(false);
+    },
+    [selectedIdProp, onSelect, isMobile, setMobileOpen]
+  );
+  useEffect5(() => {
+    if (!isMobile && mobileOpen) setMobileOpen(false);
+  }, [isMobile, mobileOpen, setMobileOpen]);
+  useEffect5(() => {
+    if (!isMobile || !mobileOpen) return;
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") setMobileOpen(false);
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [isMobile, mobileOpen, setMobileOpen]);
   const effectiveCollapsed = isMobile ? false : collapsed;
   const {
     widthCollapsed,
@@ -1049,9 +1162,10 @@ var StudioSidebar = ({
       collapsed: effectiveCollapsed,
       isMobile,
       isCollapsedRail,
-      iconOnlyLayout
+      iconOnlyLayout,
+      closeMobile: () => setMobileOpen(false)
     }),
-    [effectiveCollapsed, isMobile, isCollapsedRail, iconOnlyLayout]
+    [effectiveCollapsed, isMobile, isCollapsedRail, iconOnlyLayout, setMobileOpen]
   );
   return /* @__PURE__ */ jsxs5(StudioSidebarContext.Provider, { value: contextValue, children: [
     /* @__PURE__ */ jsx11(StudioSidebarShellInsetBridge, { onInsetChange }),
@@ -1071,6 +1185,7 @@ var StudioSidebar = ({
         onEntriesBlurOutComplete,
         onPanelWidthComplete,
         brand,
+        logo,
         emptyCaption
       }
     )
@@ -1147,15 +1262,15 @@ var StudioWelcome = ({ config, icon }) => {
 // src/studio/shell/studio-shell.tsx
 import {
   useCallback as useCallback5,
-  useEffect as useEffect5,
+  useEffect as useEffect6,
   useMemo as useMemo3,
-  useState as useState6
+  useState as useState7
 } from "react";
 import { Menu } from "lucide-react";
 import { motion as motion6, useReducedMotion as useReducedMotion5 } from "motion/react";
 
 // src/studio/sidebar/sidebar-runtime-portal.tsx
-import { useCallback as useCallback4, useLayoutEffect as useLayoutEffect2, useState as useState5 } from "react";
+import { useCallback as useCallback4, useLayoutEffect as useLayoutEffect2, useState as useState6 } from "react";
 import { createPortal } from "react-dom";
 import { MessageSquarePlus } from "lucide-react";
 import { useThread as useThread2 } from "@assistant-ui/react";
@@ -1163,13 +1278,14 @@ import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 var StudioSidebarRuntimePortal = ({
   label = "New chat"
 }) => {
-  const { iconOnlyLayout } = useStudioSidebarLayout();
+  const { iconOnlyLayout, isMobile, closeMobile } = useStudioSidebarLayout();
   const hasMessages = useThread2((s) => s.messages.length > 0);
   const { clear } = useTimbalRuntime();
-  const [anchor, setAnchor] = useState5(null);
+  const [anchor, setAnchor] = useState6(null);
   const startNewChat = useCallback4(() => {
     clear();
-  }, [clear]);
+    if (isMobile) closeMobile?.();
+  }, [clear, isMobile, closeMobile]);
   useLayoutEffect2(() => {
     setAnchor(document.getElementById(DOM_IDS.sidebarRuntimeAnchor));
   }, []);
@@ -1197,7 +1313,7 @@ var StudioSidebarRuntimePortal = ({
 };
 
 // src/studio/shell/studio-shell.tsx
-import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 import { createElement } from "react";
 var DEFAULT_BREAKPOINT_PX2 = 768;
 function readPersistedCollapsed2(key) {
@@ -1218,7 +1334,7 @@ function writePersistedCollapsed2(key, collapsed) {
 function makeComposerWithPortal(BaseComposer) {
   const Resolved = BaseComposer ?? Composer;
   return function StudioComposerWithSidebar(props) {
-    return /* @__PURE__ */ jsxs8(Fragment2, { children: [
+    return /* @__PURE__ */ jsxs8(Fragment3, { children: [
       /* @__PURE__ */ jsx14(StudioSidebarRuntimePortal, {}),
       /* @__PURE__ */ jsx14(Resolved, { ...props })
     ] });
@@ -1230,6 +1346,7 @@ var TimbalStudioShell = ({
   workforcesFetch,
   workforcesBaseUrl,
   brand,
+  logo,
   headerActions,
   headerStart,
   defaultCollapsed = false,
@@ -1248,36 +1365,36 @@ var TimbalStudioShell = ({
     baseUrl: workforcesBaseUrl
   });
   const workforces = workforcesProp ?? fetched.workforces;
-  const [internalSelected, setInternalSelected] = useState6(
+  const [internalSelected, setInternalSelected] = useState7(
     workforceId ?? ""
   );
-  useEffect5(() => {
+  useEffect6(() => {
     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] = useState6(() => {
+  const [collapsed, setCollapsed] = useState7(() => {
     const persisted = readPersistedCollapsed2(persistKey);
     return persisted || defaultCollapsed;
   });
-  const [isMobile, setIsMobile] = useState6(() => {
+  const [isMobile, setIsMobile] = useState7(() => {
     if (typeof window === "undefined") return false;
     return window.innerWidth < mobileBreakpointPx;
   });
-  const [mobileSidebarOpen, setMobileSidebarOpen] = useState6(false);
-  useEffect5(() => {
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState7(false);
+  useEffect6(() => {
     if (typeof window === "undefined") return;
     const onResize = () => setIsMobile(window.innerWidth < mobileBreakpointPx);
     onResize();
     window.addEventListener("resize", onResize);
     return () => window.removeEventListener("resize", onResize);
   }, [mobileBreakpointPx]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!isMobile) setMobileSidebarOpen(false);
   }, [isMobile]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!mobileSidebarOpen) return;
     const onKeyDown = (e) => {
       if (e.key === "Escape") setMobileSidebarOpen(false);
@@ -1320,7 +1437,8 @@ var TimbalStudioShell = ({
       collapsed: effectiveCollapsed,
       isMobile,
       isCollapsedRail,
-      iconOnlyLayout
+      iconOnlyLayout,
+      closeMobile: () => setMobileSidebarOpen(false)
     }),
     [effectiveCollapsed, isMobile, isCollapsedRail, iconOnlyLayout]
   );
@@ -1378,6 +1496,7 @@ var TimbalStudioShell = ({
             onEntriesBlurOutComplete,
             onPanelWidthComplete,
             brand,
+            logo,
             emptyCaption: sidebarEmptyCaption
           }
         ),
@@ -1452,8 +1571,8 @@ var TimbalStudioShell = ({
 };
 
 // src/studio/sidebar/mode-toggle.tsx
-import { useCallback as useCallback6, useLayoutEffect as useLayoutEffect3, useState as useState7 } from "react";
-import { Moon, Sun } from "lucide-react";
+import { useCallback as useCallback6, useLayoutEffect as useLayoutEffect3, useState as useState8 } from "react";
+import { Moon as Moon2, Sun as Sun2 } from "lucide-react";
 import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 function readStoredTheme() {
   if (typeof window === "undefined") return null;
@@ -1482,7 +1601,7 @@ var ModeToggle = ({
   label = "Toggle theme"
 }) => {
   const isControlled = theme !== void 0;
-  const [internalIsDark, setInternalIsDark] = useState7(false);
+  const [internalIsDark, setInternalIsDark] = useState8(false);
   useLayoutEffect3(() => {
     if (isControlled) return;
     const stored = readStoredTheme();
@@ -1522,8 +1641,8 @@ var ModeToggle = ({
       "aria-label": label,
       title: label,
       children: [
-        /* @__PURE__ */ jsx15(Sun, { className: "size-3.5 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" }),
-        /* @__PURE__ */ jsx15(Moon, { className: "absolute size-3.5 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" }),
+        /* @__PURE__ */ jsx15(Sun2, { className: "size-3.5 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" }),
+        /* @__PURE__ */ jsx15(Moon2, { className: "absolute size-3.5 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" }),
         /* @__PURE__ */ jsx15("span", { className: "sr-only", children: label })
       ]
     }

package/dist/{chunk-VXMM2HX7.esm.js → chunk-ZNYAETFD.esm.js}

@@ -1,6 +1,6 @@
 import {
   cn
-} from "./chunk-QU7ET55D.esm.js";
+} from "./chunk-EDEKQYSU.esm.js";
 
 // src/ui/pill-segmented-tabs.tsx
 import {