@timbal-ai/timbal-react 0.5.4 → 0.6.0

package/dist/chunk-OVHR7J3J.esm.js

@@ -0,0 +1,1574 @@
+import {
+  DOM_IDS,
+  SIDEBAR_INSET_PX_COLLAPSED,
+  SIDEBAR_INSET_PX_EXPANDED,
+  SIDEBAR_MOBILE_PX,
+  SIDEBAR_WIDTH_COLLAPSED_PX,
+  SIDEBAR_WIDTH_PX,
+  STORAGE_KEYS,
+  STUDIO_SIDEBAR_ENTRIES_OUT_S,
+  STUDIO_SIDEBAR_EXPAND_REVEAL_FRAC,
+  STUDIO_SIDEBAR_WIDTH_S,
+  studioChromeShellStyle,
+  studioSidebarBackdropTransition,
+  studioSidebarDrawerTransition,
+  studioSidebarEntriesContainerVariants,
+  studioSidebarEntriesTransition,
+  studioSidebarEntryItemVariants,
+  studioSidebarWidthTransition,
+  useShellInsetReporter
+} from "./chunk-OFHLFNJH.esm.js";
+import {
+  WorkforceSelector
+} from "./chunk-WLTW56MC.esm.js";
+import {
+  Composer,
+  TimbalChat,
+  authFetch,
+  clearTokens,
+  fetchCurrentUser,
+  getRefreshToken,
+  luxuryEase,
+  refreshAccessToken,
+  setAccessToken,
+  setRefreshToken,
+  studioPlaygroundGradientClass,
+  studioSidebarCollapsedRailItemActiveClass,
+  studioSidebarCollapsedRailItemIdleClass,
+  studioSidebarNavItemActiveClass,
+  studioSidebarNavItemClass,
+  studioSidebarNavItemIdleClass,
+  studioSidebarNavItemLayout,
+  studioSidebarPanelClass,
+  studioTopbarIconPillClass,
+  studioTopbarPillHeightClass,
+  useTimbalRuntime
+} from "./chunk-YJQLLFKP.esm.js";
+import {
+  PillSegmentedTabs
+} from "./chunk-IYENDIRY.esm.js";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  TimbalV2Button,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  cn
+} from "./chunk-4TCJQSIX.esm.js";
+
+// src/hooks/use-workforces.ts
+import { useEffect, useMemo, useRef, useState } from "react";
+function useWorkforces(options = {}) {
+  const { baseUrl = "/api", fetch: fetchFn, pickInitial, enabled = true } = options;
+  const [workforces, setWorkforces] = useState([]);
+  const [selectedId, setSelectedId] = useState("");
+  const [isLoading, setIsLoading] = useState(enabled);
+  const [error, setError] = useState(null);
+  const fetchFnRef = useRef(fetchFn ?? authFetch);
+  useEffect(() => {
+    fetchFnRef.current = fetchFn ?? authFetch;
+  }, [fetchFn]);
+  const pickInitialRef = useRef(pickInitial);
+  useEffect(() => {
+    pickInitialRef.current = pickInitial;
+  }, [pickInitial]);
+  const load = useMemo(() => {
+    return async () => {
+      if (!enabled) {
+        setIsLoading(false);
+        return;
+      }
+      setIsLoading(true);
+      setError(null);
+      try {
+        const res = await fetchFnRef.current(`${baseUrl}/workforce`);
+        if (!res.ok) throw new Error(`Failed to load workforces (${res.status})`);
+        const data = await res.json();
+        setWorkforces(data);
+        setSelectedId((current) => {
+          if (current && data.some((w) => 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, enabled]);
+  useEffect(() => {
+    load();
+  }, [load]);
+  const selected = useMemo(
+    () => workforces.find((w) => idOf(w) === selectedId),
+    [workforces, selectedId]
+  );
+  return {
+    workforces,
+    selectedId,
+    setSelectedId,
+    selected,
+    isLoading,
+    error,
+    refresh: load
+  };
+}
+function idOf(item) {
+  return item.id ?? item.uid ?? item.name ?? "";
+}
+
+// src/studio/shell/chat-shell.tsx
+import { jsx, jsxs } 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__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "aui-chat-shell relative flex h-dvh flex-col overflow-hidden bg-background",
+        className
+      ),
+      style: studioChromeShellStyle,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "pointer-events-none absolute inset-0 z-0",
+              studioPlaygroundGradientClass
+            ),
+            "aria-hidden": true
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "header",
+          {
+            className: cn(
+              "aui-chat-shell-header relative z-10 flex shrink-0 items-center justify-between bg-transparent px-4 pt-[var(--studio-topbar-gap)] pb-2",
+              headerClassName
+            ),
+            style: { minHeight: "var(--studio-topbar-height)" },
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+                brand,
+                showSelector && /* @__PURE__ */ jsx(
+                  WorkforceSelector,
+                  {
+                    workforces,
+                    value: selectedId,
+                    onChange: setSelectedId
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-1", children: headerActions })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TimbalChat,
+          {
+            workforceId: effectiveId,
+            baseUrl,
+            fetch: fetch2,
+            className: "relative z-10 min-h-0 flex-1",
+            ...chatProps
+          },
+          effectiveId
+        )
+      ]
+    }
+  );
+};
+
+// src/studio/sidebar/sidebar-backdrop.tsx
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var StudioSidebarBackdrop = ({
+  open,
+  onClose
+}) => {
+  const reducedMotion = useReducedMotion();
+  return /* @__PURE__ */ jsx2(AnimatePresence, { children: open ? /* @__PURE__ */ jsx2(
+    motion.button,
+    {
+      type: "button",
+      className: "fixed inset-0 z-40 bg-foreground/30 backdrop-blur-[2px] md:hidden",
+      "aria-label": "Close menu",
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      transition: studioSidebarBackdropTransition(!!reducedMotion),
+      onClick: onClose
+    }
+  ) : null });
+};
+
+// src/auth/provider.tsx
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect as useEffect2,
+  useState as useState2
+} from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function isInsideIframe() {
+  try {
+    return typeof window !== "undefined" && window.self !== window.top;
+  } catch {
+    return true;
+  }
+}
+var SessionContext = createContext(void 0);
+var useSession = () => {
+  const context = useContext(SessionContext);
+  if (context === void 0) {
+    throw new Error("useSession must be used within a SessionProvider");
+  }
+  return context;
+};
+var useOptionalSession = () => {
+  const context = useContext(SessionContext);
+  return context ?? null;
+};
+var SessionProvider = ({
+  children,
+  enabled = true
+}) => {
+  const [user, setUser] = useState2(null);
+  const [loading, setLoading] = useState2(enabled);
+  const [embedded] = useState2(isInsideIframe);
+  useEffect2(() => {
+    if (!enabled) {
+      setLoading(false);
+      return;
+    }
+    let ignore = false;
+    const restoreSession = async () => {
+      try {
+        const u = await fetchCurrentUser();
+        if (ignore) return;
+        if (u) {
+          setUser(u);
+          setLoading(false);
+          return;
+        }
+        if (getRefreshToken()) {
+          const ok = await refreshAccessToken();
+          if (ignore) return;
+          if (ok) {
+            const refreshedUser = await fetchCurrentUser();
+            if (ignore) return;
+            if (refreshedUser) {
+              setUser(refreshedUser);
+              setLoading(false);
+              return;
+            }
+          }
+        }
+      } catch {
+        if (ignore) return;
+        clearTokens();
+      }
+      if (!ignore && !embedded) {
+        setLoading(false);
+      }
+    };
+    restoreSession();
+    let messageCleanup;
+    if (embedded) {
+      const handleMessage = async (event) => {
+        if (ignore) return;
+        if (event.data?.type !== "timbal:auth" || !event.data.token) return;
+        setAccessToken(event.data.token);
+        if (event.data.refreshToken) {
+          setRefreshToken(event.data.refreshToken);
+        }
+        const u = await fetchCurrentUser();
+        if (!ignore) {
+          setUser(u);
+          setLoading(false);
+        }
+      };
+      window.addEventListener("message", handleMessage);
+      window.parent.postMessage({ type: "timbal:request-session" }, "*");
+      messageCleanup = () => window.removeEventListener("message", handleMessage);
+    }
+    return () => {
+      ignore = true;
+      messageCleanup?.();
+    };
+  }, [enabled, embedded]);
+  const logout = useCallback(() => {
+    clearTokens();
+    setUser(null);
+    const returnTo = encodeURIComponent(
+      window.location.pathname + window.location.search
+    );
+    fetch("/api/auth/logout", { method: "POST" }).finally(
+      () => window.location.href = `/api/auth/login?return_to=${returnTo}`
+    );
+  }, []);
+  return /* @__PURE__ */ jsx3(
+    SessionContext.Provider,
+    {
+      value: {
+        user,
+        loading,
+        isAuthenticated: !!user,
+        isEmbedded: embedded,
+        logout
+      },
+      children
+    }
+  );
+};
+
+// src/studio/sidebar/timbal-mark.tsx
+import { LiquidMetal } from "@paper-design/shaders-react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var DEFAULT_SIZE = 64;
+var TRANSPARENT_BACK = "#00000000";
+var TIMBAL_SYMBOL_DATA_URI = "data:image/png;base64,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";
+function TimbalMark({
+  className,
+  size = DEFAULT_SIZE,
+  src = TIMBAL_SYMBOL_DATA_URI
+}) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className: cn("relative shrink-0 bg-transparent", className),
+      style: { width: size, height: size },
+      role: "img",
+      "aria-label": "Timbal",
+      children: /* @__PURE__ */ jsx4(
+        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/studio/sidebar/sidebar.tsx
+import {
+  useCallback as useCallback3,
+  useEffect as useEffect4,
+  useMemo as useMemo2,
+  useState as useState4
+} from "react";
+import { motion as motion4, useReducedMotion as useReducedMotion4 } from "motion/react";
+
+// src/hooks/use-sidebar-collapse-phase.ts
+import { useCallback as useCallback2, useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
+var WIDTH_OVERLAP_FRAC = 0.7;
+function useSidebarCollapsePhase(collapsed, reducedMotion) {
+  const [widthCollapsed, setWidthCollapsed] = useState3(collapsed);
+  const [entriesVisible, setEntriesVisible] = useState3(true);
+  const collapsedTarget = useRef2(collapsed);
+  const isFirstRender = useRef2(true);
+  const widthTimerRef = useRef2(null);
+  const revealTimerRef = useRef2(null);
+  useEffect3(() => {
+    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 = useCallback2(() => {
+    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]);
+  useEffect3(() => {
+    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 = useCallback2(() => {
+    applyWidthTarget();
+  }, [applyWidthTarget]);
+  const onPanelWidthComplete = useCallback2(() => {
+    clearRevealTimer();
+    setEntriesVisible(true);
+  }, []);
+  const isCollapsedRail = widthCollapsed;
+  return {
+    widthCollapsed,
+    isCollapsedRail,
+    entriesVisible,
+    onEntriesBlurOutComplete,
+    onPanelWidthComplete
+  };
+}
+
+// src/studio/sidebar/sidebar-context.tsx
+import { createContext as createContext2, useContext as useContext2 } from "react";
+var StudioSidebarContext = createContext2({
+  collapsed: false,
+  isMobile: false,
+  isCollapsedRail: false,
+  iconOnlyLayout: false
+});
+function useStudioSidebarLayout() {
+  return useContext2(StudioSidebarContext);
+}
+
+// src/studio/sidebar/sidebar-entries.tsx
+import { motion as motion2, useReducedMotion as useReducedMotion2 } from "motion/react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var StudioSidebarEntries = ({
+  visible,
+  onBlurOutComplete,
+  children,
+  className
+}) => {
+  const reducedMotion = useReducedMotion2();
+  if (reducedMotion) {
+    return visible ? /* @__PURE__ */ jsx5("div", { className: cn("flex min-h-0 flex-1 flex-col", className), children }) : null;
+  }
+  return /* @__PURE__ */ jsx5(
+    motion2.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/studio/sidebar/sidebar-footer.tsx
+import { LogOut } from "lucide-react";
+
+// src/studio/sidebar/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/studio/sidebar/sidebar-entry-motion.tsx
+import { motion as motion3, useReducedMotion as useReducedMotion3 } from "motion/react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var StudioSidebarEntryMotion = ({
+  children,
+  className
+}) => {
+  const reducedMotion = useReducedMotion3();
+  if (reducedMotion) {
+    return /* @__PURE__ */ jsx6("div", { className, children });
+  }
+  return /* @__PURE__ */ jsx6(motion3.div, { variants: studioSidebarEntryItemVariants, className: cn(className), children });
+};
+
+// src/studio/sidebar/sidebar-tooltip.tsx
+import { Fragment, jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+var StudioSidebarTooltip = ({
+  label,
+  enabled,
+  children
+}) => {
+  if (!enabled) return /* @__PURE__ */ jsx7(Fragment, { children });
+  return /* @__PURE__ */ jsxs2(Tooltip, { children: [
+    /* @__PURE__ */ jsx7(TooltipTrigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx7(TooltipContent, { side: "right", className: "text-xs", children: label })
+  ] });
+};
+
+// src/studio/sidebar/sidebar-footer.tsx
+import { 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;
+  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__ */ jsx8(StudioSidebarEntryMotion, { children: /* @__PURE__ */ jsx8(
+    "footer",
+    {
+      className: cn(
+        "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",
+          {
+            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
+                ]
+              }
+            ) })
+          }
+        )
+      ] }) : !iconOnlyLayout && emptyCaption ? /* @__PURE__ */ jsx8("p", { className: "px-1 text-xs text-muted-foreground", children: emptyCaption }) : null
+    }
+  ) });
+};
+
+// src/studio/sidebar/sidebar-header.tsx
+import { ChevronLeft, ChevronRight, X } from "lucide-react";
+import { jsx as jsx9, jsxs as jsxs4 } 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__ */ jsx9(
+  "button",
+  {
+    type: "button",
+    onClick,
+    className: cn(toggleButtonClass, "size-7"),
+    "aria-label": ariaLabel,
+    "aria-expanded": expanded,
+    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 StudioSidebarHeader = ({
+  isCollapsedRail,
+  isMobile,
+  mobileOpen,
+  onToggle,
+  brand
+}) => {
+  if (isMobile) {
+    return /* @__PURE__ */ jsxs4("header", { className: cn(sidebarHeaderClass, "justify-between gap-2 pr-2"), children: [
+      brand,
+      /* @__PURE__ */ jsx9(
+        SidebarToggleButton,
+        {
+          ariaLabel: "Close menu",
+          expanded: mobileOpen,
+          onClick: onToggle,
+          children: /* @__PURE__ */ jsx9(X, { className: "size-3.5" })
+        }
+      )
+    ] });
+  }
+  if (isCollapsedRail) {
+    return /* @__PURE__ */ jsx9(
+      "header",
+      {
+        className: cn(
+          "flex h-12 shrink-0 items-center",
+          studioSidebarCollapsedRailInsetClass
+        ),
+        children: /* @__PURE__ */ jsx9(CollapsedBrandToggle, { onExpand: onToggle, brand })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs4("header", { className: cn(sidebarHeaderClass, "justify-between gap-1 pr-2"), children: [
+    brand,
+    /* @__PURE__ */ jsx9(
+      SidebarToggleButton,
+      {
+        ariaLabel: "Collapse sidebar",
+        expanded: true,
+        onClick: onToggle,
+        children: /* @__PURE__ */ jsx9(ChevronLeft, { className: "size-4" })
+      }
+    )
+  ] });
+};
+
+// src/studio/sidebar/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/studio/sidebar/sidebar-nav.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var StudioSidebarNav = ({
+  workforces,
+  selectedId,
+  onSelect,
+  iconOnlyLayout,
+  showTooltips
+}) => {
+  if (workforces.length === 0) return null;
+  return /* @__PURE__ */ jsx10(
+    "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__ */ jsx10(
+          StudioSidebarEntryMotion,
+          {
+            className: iconOnlyLayout ? studioSidebarCollapsedRailChipRowClass : void 0,
+            children: /* @__PURE__ */ jsx10(StudioSidebarTooltip, { label, enabled: showTooltips, children: /* @__PURE__ */ jsx10(
+              "button",
+              {
+                type: "button",
+                onClick: () => onSelect(id),
+                "aria-pressed": isActive,
+                "aria-label": label,
+                className: cn(
+                  studioSidebarNavItemClasses(iconOnlyLayout, isActive),
+                  iconOnlyLayout && "inline-flex"
+                ),
+                children: iconOnlyLayout ? /* @__PURE__ */ jsx10("span", { className: "text-xs font-semibold leading-none", children: workforceItemInitial(w) }) : /* @__PURE__ */ jsx10("span", { className: "min-w-0 truncate", children: label })
+              }
+            ) })
+          },
+          id
+        );
+      })
+    }
+  );
+};
+
+// src/studio/sidebar/shell-inset-bridge-context.tsx
+import { useLayoutEffect } from "react";
+var StudioSidebarShellInsetBridge = ({
+  onInsetChange
+}) => {
+  const reportInset = useShellInsetReporter();
+  const { isMobile, isCollapsedRail } = useStudioSidebarLayout();
+  useLayoutEffect(() => {
+    const insetPx = isMobile ? 0 : isCollapsedRail ? SIDEBAR_INSET_PX_COLLAPSED : SIDEBAR_INSET_PX_EXPANDED;
+    reportInset?.(insetPx);
+    onInsetChange?.(insetPx);
+  }, [reportInset, onInsetChange, isMobile, isCollapsedRail]);
+  return null;
+};
+
+// src/studio/sidebar/sidebar.tsx
+import { jsx as jsx11, jsxs as jsxs5 } 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 = useReducedMotion4();
+  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__ */ jsx11(TimbalMark, { size: 32 });
+  const panel = /* @__PURE__ */ jsxs5(
+    motion4.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__ */ jsx11(
+          StudioSidebarHeader,
+          {
+            isCollapsedRail,
+            isMobile,
+            mobileOpen,
+            onToggle: handleToggle,
+            brand: brandNode
+          }
+        ),
+        /* @__PURE__ */ jsxs5(
+          StudioSidebarEntries,
+          {
+            visible: entriesVisible,
+            onBlurOutComplete: onEntriesBlurOutComplete,
+            children: [
+              /* @__PURE__ */ jsx11(
+                "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__ */ jsx11(
+                StudioSidebarNav,
+                {
+                  workforces,
+                  selectedId,
+                  onSelect,
+                  iconOnlyLayout,
+                  showTooltips: isCollapsedRail
+                }
+              ),
+              workforces.length === 0 ? /* @__PURE__ */ jsx11("div", { className: "min-h-0 flex-1" }) : null,
+              /* @__PURE__ */ jsx11(
+                StudioSidebarFooter,
+                {
+                  iconOnlyLayout,
+                  showTooltips: isCollapsedRail,
+                  onSignOut: isMobile ? () => onMobileOpenChange(false) : void 0,
+                  emptyCaption
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+  if (isMobile) {
+    return /* @__PURE__ */ jsx11(
+      motion4.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__ */ jsx11(
+    "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,
+  onInsetChange
+}) => {
+  const reducedMotion = useReducedMotion4();
+  const fetched = useWorkforces({ enabled: workforcesProp === void 0 });
+  const workforces = workforcesProp ?? fetched.workforces;
+  const [internalSelected, setInternalSelected] = useState4(
+    selectedIdProp ?? ""
+  );
+  useEffect4(() => {
+    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 persisted = readPersistedCollapsed(persistKey);
+    return persisted || defaultCollapsed;
+  });
+  const handleCollapsedChange = useCallback3(
+    (next) => {
+      setCollapsed(next);
+      writePersistedCollapsed(persistKey, next);
+    },
+    [persistKey]
+  );
+  const [isMobile, setIsMobile] = useState4(() => {
+    if (typeof window === "undefined") return false;
+    return window.innerWidth < mobileBreakpointPx;
+  });
+  useEffect4(() => {
+    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 mobileOpen = mobileOpenProp ?? internalMobileOpen;
+  const setMobileOpen = useCallback3(
+    (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 = useMemo2(
+    () => ({
+      collapsed: effectiveCollapsed,
+      isMobile,
+      isCollapsedRail,
+      iconOnlyLayout
+    }),
+    [effectiveCollapsed, isMobile, isCollapsedRail, iconOnlyLayout]
+  );
+  return /* @__PURE__ */ jsxs5(StudioSidebarContext.Provider, { value: contextValue, children: [
+    /* @__PURE__ */ jsx11(StudioSidebarShellInsetBridge, { onInsetChange }),
+    /* @__PURE__ */ jsx11(
+      StudioSidebarPanel,
+      {
+        workforces,
+        selectedId,
+        onSelect: handleSelect,
+        collapsed: effectiveCollapsed,
+        onCollapsedChange: handleCollapsedChange,
+        isMobile,
+        mobileOpen,
+        onMobileOpenChange: setMobileOpen,
+        widthCollapsed,
+        entriesVisible,
+        onEntriesBlurOutComplete,
+        onPanelWidthComplete,
+        brand,
+        emptyCaption
+      }
+    )
+  ] });
+};
+
+// src/studio/sidebar/welcome.tsx
+import { motion as motion5 } from "motion/react";
+import { useThread } from "@assistant-ui/react";
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+var welcomeStagger = {
+  initial: {},
+  animate: {
+    transition: { staggerChildren: 0.16, delayChildren: 0.18 }
+  }
+};
+var welcomeItem = {
+  initial: { opacity: 0, y: 14 },
+  animate: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.9, ease: luxuryEase }
+  }
+};
+var welcomeIcon = {
+  initial: { opacity: 0, y: 10, scale: 0.96 },
+  animate: {
+    opacity: 1,
+    y: 0,
+    scale: 1,
+    transition: { duration: 1.1, ease: luxuryEase }
+  }
+};
+var StudioWelcome = ({ config, icon }) => {
+  const isEmpty = useThread((s) => s.messages.length === 0);
+  if (!isEmpty) return null;
+  const iconNode = icon ?? /* @__PURE__ */ jsx12(
+    TimbalMark,
+    {
+      size: 112,
+      className: "max-md:scale-[0.58] max-md:origin-center"
+    }
+  );
+  return /* @__PURE__ */ jsx12("div", { className: "aui-thread-welcome-root mx-auto my-auto flex w-full max-w-(--thread-max-width) grow flex-col", children: /* @__PURE__ */ jsx12("div", { className: "aui-thread-welcome-center flex w-full grow flex-col items-center justify-center", children: /* @__PURE__ */ jsxs6(
+    motion5.div,
+    {
+      className: "aui-thread-welcome-message flex flex-col items-center justify-center px-2 text-center sm:px-4",
+      variants: welcomeStagger,
+      initial: "initial",
+      animate: "animate",
+      children: [
+        /* @__PURE__ */ jsx12(motion5.div, { variants: welcomeIcon, className: "mb-4 md:mb-5", children: iconNode }),
+        /* @__PURE__ */ jsx12(
+          motion5.h1,
+          {
+            variants: welcomeItem,
+            className: "aui-thread-welcome-message-inner text-xl font-semibold sm:text-2xl",
+            children: config?.heading ?? "How can I help you today?"
+          }
+        ),
+        /* @__PURE__ */ jsx12(
+          motion5.p,
+          {
+            variants: welcomeItem,
+            className: "aui-thread-welcome-message-inner mt-2 text-muted-foreground",
+            children: config?.subheading ?? "Send a message to start a conversation."
+          }
+        )
+      ]
+    }
+  ) }) });
+};
+
+// src/studio/shell/studio-shell.tsx
+import {
+  useCallback as useCallback5,
+  useEffect as useEffect5,
+  useMemo as useMemo3,
+  useState as useState6
+} 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 { createPortal } from "react-dom";
+import { MessageSquarePlus } from "lucide-react";
+import { useThread as useThread2 } from "@assistant-ui/react";
+import { jsx as jsx13, jsxs as jsxs7 } 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] = useState5(null);
+  const startNewChat = useCallback4(() => {
+    clear();
+  }, [clear]);
+  useLayoutEffect2(() => {
+    setAnchor(document.getElementById(DOM_IDS.sidebarRuntimeAnchor));
+  }, []);
+  if (!anchor || !hasMessages) return null;
+  const button = /* @__PURE__ */ jsxs7(
+    "button",
+    {
+      type: "button",
+      onClick: startNewChat,
+      "aria-label": label,
+      className: studioSidebarNavItemClasses(iconOnlyLayout, false),
+      children: [
+        /* @__PURE__ */ jsx13(MessageSquarePlus, { className: "size-3.5 shrink-0" }),
+        !iconOnlyLayout ? /* @__PURE__ */ jsx13("span", { className: "min-w-0 truncate", children: label }) : null
+      ]
+    }
+  );
+  return createPortal(
+    iconOnlyLayout ? /* @__PURE__ */ jsxs7(Tooltip, { children: [
+      /* @__PURE__ */ jsx13(TooltipTrigger, { asChild: true, children: button }),
+      /* @__PURE__ */ jsx13(TooltipContent, { side: "right", className: "text-xs", children: label })
+    ] }) : button,
+    anchor
+  );
+};
+
+// src/studio/shell/studio-shell.tsx
+import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs8 } 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__ */ jsxs8(Fragment2, { children: [
+      /* @__PURE__ */ jsx14(StudioSidebarRuntimePortal, {}),
+      /* @__PURE__ */ jsx14(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 = useReducedMotion5();
+  const shouldFetchWorkforces = !workforceId && workforcesProp === void 0;
+  const fetched = useWorkforces({
+    enabled: shouldFetchWorkforces,
+    fetch: workforcesFetch,
+    baseUrl: workforcesBaseUrl
+  });
+  const workforces = workforcesProp ?? fetched.workforces;
+  const [internalSelected, setInternalSelected] = useState6(
+    workforceId ?? ""
+  );
+  useEffect5(() => {
+    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 persisted = readPersistedCollapsed2(persistKey);
+    return persisted || defaultCollapsed;
+  });
+  const [isMobile, setIsMobile] = useState6(() => {
+    if (typeof window === "undefined") return false;
+    return window.innerWidth < mobileBreakpointPx;
+  });
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState6(false);
+  useEffect5(() => {
+    if (typeof window === "undefined") return;
+    const onResize = () => setIsMobile(window.innerWidth < mobileBreakpointPx);
+    onResize();
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [mobileBreakpointPx]);
+  useEffect5(() => {
+    if (!isMobile) setMobileSidebarOpen(false);
+  }, [isMobile]);
+  useEffect5(() => {
+    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 = useCallback5(
+    (next) => {
+      setCollapsed(next);
+      writePersistedCollapsed2(persistKey, next);
+    },
+    [persistKey]
+  );
+  const handleSelectWorkforce = useCallback5(
+    (id) => {
+      if (!workforceId) setInternalSelected(id);
+      if (isMobile) setMobileSidebarOpen(false);
+    },
+    [workforceId, isMobile]
+  );
+  const sidebarContext = useMemo3(
+    () => ({
+      collapsed: effectiveCollapsed,
+      isMobile,
+      isCollapsedRail,
+      iconOnlyLayout
+    }),
+    [effectiveCollapsed, isMobile, isCollapsedRail, iconOnlyLayout]
+  );
+  const resolvedComponents = useMemo3(() => {
+    const next = { Welcome: StudioWelcome, ...components };
+    next.Composer = makeComposerWithPortal(components?.Composer);
+    return next;
+  }, [components]);
+  return /* @__PURE__ */ jsx14(StudioSidebarContext.Provider, { value: sidebarContext, children: /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      className: cn(
+        "relative h-dvh overflow-hidden bg-background",
+        isMobile && mobileSidebarOpen && "max-md:overflow-hidden"
+      ),
+      style: studioChromeShellStyle,
+      children: [
+        /* @__PURE__ */ jsx14(
+          "div",
+          {
+            className: "pointer-events-none absolute inset-0 z-0 bg-background",
+            "aria-hidden": true
+          }
+        ),
+        /* @__PURE__ */ jsx14(
+          "div",
+          {
+            className: cn(
+              "pointer-events-none absolute inset-0 z-0",
+              studioPlaygroundGradientClass
+            ),
+            "aria-hidden": true
+          }
+        ),
+        /* @__PURE__ */ jsx14(
+          StudioSidebarBackdrop,
+          {
+            open: isMobile && mobileSidebarOpen,
+            onClose: () => setMobileSidebarOpen(false)
+          }
+        ),
+        /* @__PURE__ */ jsx14(
+          StudioSidebarPanel,
+          {
+            workforces,
+            selectedId: activeWorkforceId,
+            onSelect: handleSelectWorkforce,
+            collapsed: effectiveCollapsed,
+            onCollapsedChange,
+            isMobile,
+            mobileOpen: mobileSidebarOpen,
+            onMobileOpenChange: setMobileSidebarOpen,
+            widthCollapsed,
+            entriesVisible,
+            onEntriesBlurOutComplete,
+            onPanelWidthComplete,
+            brand,
+            emptyCaption: sidebarEmptyCaption
+          }
+        ),
+        /* @__PURE__ */ jsxs8(
+          motion6.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__ */ jsxs8(
+                "div",
+                {
+                  className: cn(
+                    "flex min-w-0 flex-1 items-center gap-2",
+                    studioTopbarPillHeightClass
+                  ),
+                  children: [
+                    isMobile && !mobileSidebarOpen ? /* @__PURE__ */ jsx14(
+                      TimbalV2Button,
+                      {
+                        variant: "secondary",
+                        size: "sm",
+                        isIconOnly: true,
+                        className: studioTopbarIconPillClass,
+                        onClick: () => setMobileSidebarOpen(true),
+                        "aria-label": "Open menu",
+                        "aria-expanded": false,
+                        children: /* @__PURE__ */ jsx14(Menu, { className: "size-4" })
+                      }
+                    ) : null,
+                    headerStart
+                  ]
+                }
+              ),
+              headerActions ? /* @__PURE__ */ jsx14("div", { className: "flex shrink-0 items-center gap-1", children: headerActions }) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx14(
+          motion6.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", chatProps.className)
+              }
+            ) : null
+          }
+        )
+      ]
+    }
+  ) });
+};
+
+// src/studio/sidebar/mode-toggle.tsx
+import { useCallback as useCallback6, useEffect as useEffect6, useState as useState7 } from "react";
+import { Moon, Sun } from "lucide-react";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+var ModeToggle = ({
+  theme,
+  setTheme,
+  className,
+  label = "Toggle theme"
+}) => {
+  const isControlled = theme !== void 0;
+  const [internalIsDark, setInternalIsDark] = useState7(false);
+  useEffect6(() => {
+    if (isControlled) return;
+    if (typeof document === "undefined") return;
+    setInternalIsDark(document.documentElement.classList.contains("dark"));
+  }, [isControlled]);
+  const isDark = isControlled ? theme === "dark" : internalIsDark;
+  const onClick = useCallback6(() => {
+    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__ */ jsxs9(
+    TimbalV2Button,
+    {
+      variant: "secondary",
+      size: "sm",
+      isIconOnly: true,
+      onClick,
+      className: cn(
+        studioTopbarPillHeightClass,
+        studioTopbarIconPillClass,
+        "relative",
+        className
+      ),
+      "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("span", { className: "sr-only", children: label })
+      ]
+    }
+  );
+};
+
+// src/studio/mode-switch.tsx
+import { memo, useCallback as useCallback7, useMemo as useMemo4 } from "react";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var STUDIO_NAV_MODE = {
+  BUILD: "build",
+  OPERATE: "operate"
+};
+var StudioModeSwitch = memo(
+  function StudioModeSwitch2({
+    value,
+    onChange,
+    className,
+    buildLabel = "Build",
+    manageLabel = "Manage",
+    "aria-label": ariaLabel = "Studio mode"
+  }) {
+    const tabs = useMemo4(
+      () => [
+        { key: STUDIO_NAV_MODE.BUILD, label: buildLabel },
+        { key: STUDIO_NAV_MODE.OPERATE, label: manageLabel }
+      ],
+      [buildLabel, manageLabel]
+    );
+    const handleChange = useCallback7(
+      (key) => {
+        if (key === STUDIO_NAV_MODE.BUILD || key === STUDIO_NAV_MODE.OPERATE) {
+          onChange(key);
+        }
+      },
+      [onChange]
+    );
+    return /* @__PURE__ */ jsx16(
+      "div",
+      {
+        "data-tour": "studio-mode-switch",
+        "data-studio-chrome-align": "mode-switch",
+        id: "studio-chrome-mode-switch",
+        className,
+        children: /* @__PURE__ */ jsx16(
+          PillSegmentedTabs,
+          {
+            value,
+            onChange: handleChange,
+            tabs,
+            trackVariant: "flush",
+            layoutId: "studio-nav-mode-segmented",
+            "aria-label": ariaLabel
+          }
+        )
+      }
+    );
+  }
+);
+
+export {
+  useWorkforces,
+  TimbalChatShell,
+  StudioSidebarBackdrop,
+  useSession,
+  useOptionalSession,
+  SessionProvider,
+  TimbalMark,
+  StudioSidebar,
+  StudioWelcome,
+  TimbalStudioShell,
+  ModeToggle,
+  STUDIO_NAV_MODE,
+  StudioModeSwitch
+};