@timbal-ai/timbal-react 1.4.0 → 1.5.0

package/dist/studio.cjs

@@ -956,7 +956,7 @@ function TooltipContent({
       "data-slot": "tooltip-content",
       sideOffset,
       className: cn(
-        "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+        "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-2.5 py-1 text-xs text-balance",
         className
       ),
       ...props,
@@ -979,14 +979,6 @@ var TIMBAL_V2_MODAL_SURFACE = cn(
   "border border-border shadow-card-elevated"
 );
 var TIMBAL_V2_PRIMARY_GRADIENT = "bg-gradient-to-b from-primary-fill-from to-primary-fill-to";
-var TIMBAL_V2_FROM_LEGACY_BUTTON = {
-  default: "primary",
-  destructive: "destructive",
-  outline: "secondary",
-  secondary: "secondary",
-  ghost: "ghost",
-  link: "link"
-};
 var TIMBAL_V2_SIZE_HEIGHT = {
   xs: "min-h-8 h-8",
   sm: "min-h-9 h-9",
@@ -1022,6 +1014,11 @@ var TIMBAL_V2_FILL = {
     "group-hover/tbv2:from-destructive-fill-hover-from group-hover/tbv2:to-destructive-fill-hover-to",
     "group-active/tbv2:from-destructive-fill-active-from group-active/tbv2:to-destructive-fill-active-to"
   ].join(" "),
+  "destructive-solid": [
+    "bg-gradient-to-b from-destructive-solid-from to-destructive-solid-to",
+    "group-hover/tbv2:from-destructive-solid-hover-from group-hover/tbv2:to-destructive-solid-hover-to",
+    "group-active/tbv2:from-destructive-solid-active-from group-active/tbv2:to-destructive-solid-active-to"
+  ].join(" "),
   secondary: [
     TIMBAL_V2_ELEVATED_GRADIENT,
     "group-hover/tbv2:from-secondary-fill-hover-from group-hover/tbv2:to-secondary-fill-hover-to",
@@ -1038,6 +1035,7 @@ var TIMBAL_V2_LABEL = {
   primary: "text-primary-foreground",
   informative: "text-primary-foreground",
   destructive: "text-destructive",
+  "destructive-solid": "text-destructive-foreground",
   secondary: "text-foreground",
   ghost: "text-foreground",
   link: "text-foreground underline decoration-foreground/25 underline-offset-2 group-hover/tbv2:decoration-foreground/45"
@@ -1046,6 +1044,7 @@ var TIMBAL_V2_BORDER = {
   primary: "",
   informative: "border border-foreground/15",
   destructive: "border border-destructive/45",
+  "destructive-solid": "",
   secondary: "border border-border",
   ghost: "",
   link: ""
@@ -1054,6 +1053,7 @@ var TIMBAL_V2_SHADOW = {
   primary: "shadow-card",
   informative: "shadow-card",
   destructive: "shadow-card",
+  "destructive-solid": "shadow-card",
   secondary: "shadow-card",
   ghost: "",
   link: ""
@@ -1299,8 +1299,8 @@ function AvatarFallback({
         branded ? cn(
           "bg-transparent font-medium",
           TIMBAL_V2_LABEL.secondary,
-          "text-sm group-data-[size=sm]/avatar:text-xs"
-        ) : "bg-muted font-normal text-muted-foreground text-sm group-data-[size=sm]/avatar:text-xs",
+          "text-xs group-data-[size=sm]/avatar:text-[10px]"
+        ) : "bg-muted font-normal text-muted-foreground text-xs group-data-[size=sm]/avatar:text-[10px]",
         className
       ),
       style,
@@ -1334,6 +1334,11 @@ var TIMBAL_V2_FILL_AS_CHILD = {
     "hover:from-destructive-fill-hover-from hover:to-destructive-fill-hover-to",
     "active:from-destructive-fill-active-from active:to-destructive-fill-active-to"
   ].join(" "),
+  "destructive-solid": [
+    "bg-gradient-to-b from-destructive-solid-from to-destructive-solid-to",
+    "hover:from-destructive-solid-hover-from hover:to-destructive-solid-hover-to",
+    "active:from-destructive-solid-active-from active:to-destructive-solid-active-to"
+  ].join(" "),
   secondary: [
     TIMBAL_V2_ELEVATED_GRADIENT,
     "hover:from-secondary-fill-hover-from hover:to-secondary-fill-hover-to",
@@ -1356,7 +1361,7 @@ var TimbalV2Button = React2.forwardRef(function TimbalV2Button2({
   isIconOnly = false,
   isLoading = false,
   fullWidth = false,
-  shape: _shape = "pill",
+  shape = "pill",
   asChild = false,
   className,
   disabled,
@@ -1366,7 +1371,7 @@ var TimbalV2Button = React2.forwardRef(function TimbalV2Button2({
 }, ref) {
   const isDisabled = disabled || isLoading;
   const sizeClass = isIconOnly ? TIMBAL_V2_SIZE_ICON[size] : TIMBAL_V2_SIZE_HEIGHT[size];
-  const radiusClass = "rounded-full";
+  const radiusClass = shape === "rect" ? "rounded-lg" : "rounded-full";
   const sharedRootClass = cn(
     "relative box-border inline-flex items-center justify-center gap-2 whitespace-nowrap border-0 text-sm font-normal shadow-none transition duration-200 ease-in-out",
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 focus-visible:ring-offset-1 focus-visible:ring-offset-background",
@@ -1667,7 +1672,7 @@ function ChartContainer({
       ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChartStyle, { id: chartId, config }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RechartsPrimitive.ResponsiveContainer, { children })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RechartsPrimitive.ResponsiveContainer, { width: "100%", height: "100%", children })
       ]
     }
   ) });
@@ -1698,6 +1703,36 @@ ${colorConfig.map(([key, itemConfig]) => {
   );
 };
 var ChartTooltip = RechartsPrimitive.Tooltip;
+var CHART_TOOLTIP_SURFACE = "rounded-xl border px-5 py-4 text-left text-[11px] leading-snug shadow-[0_12px_40px_-10px_rgba(0,0,0,0.55)] border-white/10 bg-gradient-to-b from-neutral-800 to-neutral-950 text-white dark:border-black/10 dark:from-white dark:to-neutral-100 dark:text-neutral-900";
+var CHART_TOOLTIP_TEXT = "text-white dark:text-neutral-900";
+var CHART_TOOLTIP_MUTED = "text-neutral-300 dark:text-neutral-600";
+function isCssColor(value) {
+  return typeof value === "string" && value.length > 0 && !value.startsWith("url(");
+}
+function resolvePayloadConfigKey(payload, key) {
+  if (typeof payload !== "object" || payload === null) {
+    return key;
+  }
+  const row = payload;
+  const nested = "payload" in row && typeof row.payload === "object" && row.payload !== null ? row.payload : void 0;
+  if (key in row && typeof row[key] === "string") {
+    return row[key];
+  }
+  if (nested && key in nested && typeof nested[key] === "string") {
+    return nested[key];
+  }
+  if (typeof row.value === "string") {
+    return row.value;
+  }
+  return key;
+}
+function resolveSwatchColor(itemConfig, configKey, ...candidates) {
+  for (const candidate of candidates) {
+    if (isCssColor(candidate)) return candidate;
+  }
+  if (isCssColor(itemConfig?.color)) return itemConfig.color;
+  return `var(--color-${configKey})`;
+}
 function ChartTooltipContent({
   active,
   payload,
@@ -1709,6 +1744,7 @@ function ChartTooltipContent({
   labelFormatter,
   labelClassName,
   formatter,
+  valueFormatter,
   color,
   nameKey,
   labelKey
@@ -1723,12 +1759,12 @@ function ChartTooltipContent({
     const itemConfig = getPayloadConfigFromPayload(config, item, key);
     const value = !labelKey && typeof label === "string" ? config[label]?.label || label : itemConfig?.label;
     if (labelFormatter) {
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: cn("font-medium", labelClassName), children: labelFormatter(value, payload) });
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: cn("font-medium leading-none", labelClassName), children: labelFormatter(value, payload) });
     }
     if (!value) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: cn("font-medium", labelClassName), children: value });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: cn("font-medium leading-none", labelClassName), children: value });
   }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
   if (!active || !payload?.length) {
     return null;
@@ -1738,7 +1774,8 @@ function ChartTooltipContent({
     "div",
     {
       className: cn(
-        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+        "grid min-w-[8rem] items-start gap-1.5",
+        CHART_TOOLTIP_SURFACE,
         "animate-in fade-in-0 zoom-in-95 duration-150",
         className
       ),
@@ -1746,31 +1783,35 @@ function ChartTooltipContent({
         !nestLabel ? tooltipLabel : null,
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "grid gap-1.5", children: payload.filter((item) => item.type !== "none").map((item, index) => {
           const key = `${nameKey || item.name || item.dataKey || "value"}`;
+          const configKey = resolvePayloadConfigKey(item, key);
           const itemConfig = getPayloadConfigFromPayload(config, item, key);
-          const indicatorColor = color || item.payload?.fill || item.color;
+          const indicatorColor = resolveSwatchColor(
+            itemConfig,
+            configKey,
+            color,
+            item.payload?.fill,
+            item.color
+          );
           return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             "div",
             {
               className: cn(
-                "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-neutral-500 dark:[&>svg]:text-neutral-400",
                 indicator === "dot" && "items-center"
               ),
               children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
                 itemConfig?.icon ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   "div",
                   {
-                    className: cn(
-                      "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
-                      {
-                        "h-2.5 w-2.5": indicator === "dot",
-                        "w-1": indicator === "line",
-                        "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
-                        "my-0.5": nestLabel && indicator === "dashed"
-                      }
-                    ),
+                    className: cn("shrink-0 rounded-[2px]", {
+                      "h-2.5 w-2.5": indicator === "dot",
+                      "w-1": indicator === "line",
+                      "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+                      "my-0.5": nestLabel && indicator === "dashed"
+                    }),
                     style: {
-                      "--color-bg": indicatorColor,
-                      "--color-border": indicatorColor
+                      backgroundColor: indicator === "dashed" ? void 0 : indicatorColor,
+                      borderColor: indicatorColor
                     }
                   }
                 ),
@@ -1778,15 +1819,15 @@ function ChartTooltipContent({
                   "div",
                   {
                     className: cn(
-                      "flex flex-1 justify-between leading-none",
+                      "flex flex-1 justify-between gap-3 leading-none",
                       nestLabel ? "items-end" : "items-center"
                     ),
                     children: [
                       /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "grid gap-1.5", children: [
                         nestLabel ? tooltipLabel : null,
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-muted-foreground", children: itemConfig?.label || item.name })
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: CHART_TOOLTIP_MUTED, children: itemConfig?.label || item.name })
                       ] }),
-                      item.value != null && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-foreground font-mono font-medium tabular-nums", children: typeof item.value === "number" ? item.value.toLocaleString() : String(item.value) })
+                      item.value != null && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: cn("font-medium tabular-nums", CHART_TOOLTIP_TEXT), children: valueFormatter ? valueFormatter(item.value, item) : typeof item.value === "number" ? item.value.toLocaleString() : String(item.value) })
                     ]
                   }
                 )
@@ -1821,7 +1862,9 @@ function ChartLegendContent({
       ),
       children: payload.filter((item) => item.type !== "none").map((item, index) => {
         const key = `${nameKey || item.dataKey || "value"}`;
+        const configKey = resolvePayloadConfigKey(item, key);
         const itemConfig = getPayloadConfigFromPayload(config, item, key);
+        const swatchColor = resolveSwatchColor(itemConfig, configKey, item.color);
         return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
           "div",
           {
@@ -1831,7 +1874,7 @@ function ChartLegendContent({
                 "div",
                 {
                   className: "h-2 w-2 shrink-0 rounded-[2px]",
-                  style: { backgroundColor: item.color }
+                  style: { backgroundColor: swatchColor }
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "min-w-0 truncate", children: itemConfig?.label ?? (item.value != null ? String(item.value) : null) })
@@ -1847,13 +1890,7 @@ function getPayloadConfigFromPayload(config, payload, key) {
   if (typeof payload !== "object" || payload === null) {
     return void 0;
   }
-  const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
-  let configLabelKey = key;
-  if (key in payload && typeof payload[key] === "string") {
-    configLabelKey = payload[key];
-  } else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === "string") {
-    configLabelKey = payloadPayload[key];
-  }
+  const configLabelKey = resolvePayloadConfigKey(payload, key);
   return configLabelKey in config ? config[configLabelKey] : config[key];
 }
 
@@ -1959,13 +1996,13 @@ function resolveChartMargin(options) {
   }
   const anyAxis = showXAxis || showYAxis;
   if (!anyAxis) {
-    return { top: 8, right: 12, bottom: 8, left: 12 };
+    return { top: 8, right: 0, bottom: 0, left: 0 };
   }
   return {
     top: 8,
-    right: 12,
-    bottom: showXAxis ? 24 : 8,
-    left: showYAxis ? 8 : 12
+    right: showYAxis ? 12 : 0,
+    bottom: showXAxis ? 24 : 0,
+    left: showYAxis ? 8 : 0
   };
 }
 function flushBarCategoryGap(flush, showCategoryAxis) {
@@ -2013,7 +2050,7 @@ var LineAreaChart = ({
   barRadius = 4,
   gridLines,
   layout = "default",
-  showGrid = true,
+  showGrid: showGridProp,
   showXAxis: showXAxisProp,
   showYAxis: showYAxisProp,
   showLegend: showLegendProp,
@@ -2029,6 +2066,7 @@ var LineAreaChart = ({
   const xKey = xKeyProp ?? inferXKey(data);
   const series = resolveSeries(seriesProp, data, xKey);
   const flush = layout === "flush";
+  const showGrid = showGridProp ?? !flush;
   const horizontal = orientation === "horizontal" && variant === "bar";
   const showXAxis = showXAxisProp ?? !flush;
   const showYAxis = showYAxisProp ?? !flush;
@@ -2069,14 +2107,7 @@ var LineAreaChart = ({
             const category = resolveTooltipCategory(label, items, xKey, data, xFmt);
             return category || null;
           },
-          formatter: (value, name, item) => {
-            const key = String(item.dataKey ?? name ?? "value");
-            const seriesLabel = config[key]?.label ?? name;
-            return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-1 items-center justify-between leading-none", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-muted-foreground", children: seriesLabel }),
-              value != null ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-foreground font-mono font-medium tabular-nums", children: valueFmt(value) }) : null
-            ] });
-          }
+          valueFormatter: (value) => value != null ? valueFmt(value) : null
         }
       )
     }
@@ -2087,13 +2118,27 @@ var LineAreaChart = ({
   if (variant === "bar") {
     const dataKeys = series.map((s) => s.dataKey);
     const barDefs = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(BarGradientDefs, { scopeId: gradientScopeId, dataKeys, horizontal });
-    const bars = series.map((s) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    const bars = stacked ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      import_recharts.BarStack,
+      {
+        radius: barCornerRadius(barRadius, horizontal, false),
+        stackId: "stack",
+        children: series.map((s) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          import_recharts.Bar,
+          {
+            dataKey: s.dataKey,
+            fill: `url(#${barGradientId(gradientScopeId, s.dataKey)})`,
+            isAnimationActive: true
+          },
+          s.dataKey
+        ))
+      }
+    ) : series.map((s) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       import_recharts.Bar,
       {
         dataKey: s.dataKey,
         fill: `url(#${barGradientId(gradientScopeId, s.dataKey)})`,
-        radius: barCornerRadius(barRadius, horizontal, stacked),
-        stackId: stacked ? "stack" : void 0,
+        radius: barCornerRadius(barRadius, horizontal, false),
         isAnimationActive: true
       },
       s.dataKey
@@ -2166,7 +2211,7 @@ var LineAreaChart = ({
               tick: categoryTick("middle"),
               ...flushCategoryXAxisProps
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_recharts.XAxis, { dataKey: xKey, hide: true }),
+          ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_recharts.XAxis, { dataKey: xKey, hide: true, height: 0 }),
           showYAxis ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             import_recharts.YAxis,
             {
@@ -2177,7 +2222,7 @@ var LineAreaChart = ({
               tickFormatter: (v) => valueFmt(v),
               domain: yDomain
             }
-          ) : null,
+          ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_recharts.YAxis, { hide: true, width: 0, domain: yDomain }),
           tooltipEl,
           legendEl,
           bars
@@ -2213,7 +2258,7 @@ var LineAreaChart = ({
         tickFormatter: (v, i) => xFmt(v, i),
         ...flushCategoryXAxisProps
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_recharts.XAxis, { dataKey: chartXKey, hide: true }),
+    ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_recharts.XAxis, { dataKey: chartXKey, hide: true, height: 0 }),
     showYAxis ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       import_recharts.YAxis,
       {
@@ -2224,7 +2269,7 @@ var LineAreaChart = ({
         tickFormatter: (v) => valueFmt(v),
         domain: yDomain
       }
-    ) : null
+    ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_recharts.YAxis, { hide: true, width: 0, domain: yDomain })
   ] });
   const chartA11y = flush ? {} : { accessibilityLayer: true };
   if (variant === "area") {
@@ -2403,7 +2448,7 @@ var PieChart = ({
     fill: palette[i % palette.length]
   }));
   const config = {};
-  for (const s of slices) config[s.name] = { label: s.name };
+  for (const s of slices) config[s.name] = { label: s.name, color: s.fill };
   const innerPct = innerRadius > 0 ? `${Math.round(innerRadius * 75)}%` : 0;
   const hasCenter = innerRadius > 0 && (centerValue != null || centerLabel != null);
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
@@ -2523,7 +2568,7 @@ var RadialChart = ({
   }));
   const max = maxValue ?? Math.max(...rows.map((r) => r.value), 1);
   const config = {};
-  for (const r of rows) config[r.name] = { label: r.name };
+  for (const r of rows) config[r.name] = { label: r.name, color: r.fill };
   const hasCenter = centerValue != null || centerLabel != null;
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: cn("flex w-full flex-col items-center gap-3", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
@@ -3203,69 +3248,181 @@ var import_react16 = require("@assistant-ui/react");
 
 // src/ui/button.tsx
 var import_class_variance_authority = require("class-variance-authority");
+var import_radix_ui5 = require("radix-ui");
 var import_jsx_runtime24 = require("react/jsx-runtime");
-var LEGACY_SIZE_TO_V2 = {
-  default: "md",
-  xs: "xs",
-  sm: "sm",
-  lg: "lg",
-  icon: "sm",
-  "icon-xs": "xs",
-  "icon-sm": "sm",
-  "icon-lg": "lg"
-};
+var SOLID_SKEUOMORPHIC_SHADOW = "shadow-skeuomorphic-solid";
+var BORDERED_SKEUOMORPHIC_SHADOW = "shadow-skeuomorphic-bordered";
 var buttonVariants = (0, import_class_variance_authority.cva)(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0",
+  cn(
+    "relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center whitespace-nowrap font-medium",
+    "transition-all duration-300 ease-in-out outline-none border",
+    "focus-visible:ring-4 focus-visible:ring-primary/20 focus-visible:ring-offset-0",
+    "disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:pointer-events-none",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5",
+    // Overflow hidden can clip out-of-bounds shadow, so we use precise overflow management and rounded-[inherit] on pseudo overlays
+    "after:absolute after:inset-0 after:rounded-[inherit] after:pointer-events-none after:transition-opacity after:duration-300 after:ease-in-out after:opacity-0"
+  ),
   {
     variants: {
-      variant: {
-        default: "",
-        destructive: "",
-        outline: "",
-        secondary: "",
-        ghost: "",
-        link: ""
+      color: {
+        primary: cn(
+          // Exact Premium Untitled UI primary BLACK / dark charcoal: gradient + borders
+          "bg-gradient-to-b from-[#344054] to-[#0F1117] text-white border-[#1A1E29]",
+          "hover:border-[#181C26]",
+          "active:border-[#0A0D14]",
+          SOLID_SKEUOMORPHIC_SHADOW,
+          // Hover/active overlays for beautiful animation (the gradient is static, the overlay opacity is transitioned)
+          "after:bg-white/[0.08] hover:after:opacity-100 active:after:bg-black/[0.12]",
+          // Premium Dark Mode inversion: Primary becomes white, popping out elegantly
+          "dark:bg-gradient-to-b dark:from-white dark:to-[#F9FAFB] dark:text-[#10121C] dark:border-white",
+          "dark:hover:border-[#D0D5DD] dark:hover:text-[#10121C]",
+          "dark:shadow-skeuomorphic-bordered",
+          "dark:after:bg-black/[0.04] dark:active:after:bg-black/[0.08]"
+        ),
+        secondary: cn(
+          // Exact Untitled UI secondary: premium white/gray gradient + borders
+          "bg-gradient-to-b from-white to-[#F9FAFB] text-[#344054] border-[#D0D5DD]",
+          "hover:text-[#1D2939] hover:border-[#D0D5DD]",
+          BORDERED_SKEUOMORPHIC_SHADOW,
+          // Hover/active overlays for white/gray gradient
+          "after:bg-black/[0.03] hover:after:opacity-100 active:after:bg-black/[0.08]",
+          // Premium Dark Mode inversion: Secondary becomes dark charcoal/gray, merging into the background
+          "dark:bg-gradient-to-b dark:from-[#1F242F] dark:to-[#10121C] dark:text-[#D1D5DB] dark:border-[#344054]",
+          "dark:hover:border-[#475467] dark:hover:text-white",
+          "dark:shadow-skeuomorphic-solid",
+          "dark:after:bg-white/[0.06] dark:active:after:bg-black/[0.15]"
+        ),
+        tertiary: cn(
+          "bg-transparent text-[#475467] border-transparent",
+          "hover:bg-[#F9FAFB] hover:text-[#344054]",
+          "active:bg-[#F2F4F7] active:text-[#1D2939]",
+          "after:hidden",
+          // No overlay needed for transparent surfaces
+          // Dark Mode
+          "dark:text-[#9CA3AF] dark:hover:bg-[#1F242F] dark:hover:text-white dark:active:bg-[#11131A]"
+        ),
+        link: cn(
+          "h-auto! bg-transparent p-0! border-transparent text-[#1F242F] hover:text-[#10121C]",
+          "hover:underline",
+          "after:hidden",
+          // Dark Mode
+          "dark:text-[#9CA3AF] dark:hover:text-white"
+        ),
+        "primary-destructive": cn(
+          // Exact Untitled UI primary destructive: premium red gradient + borders (vibrant and subtle, not too dark)
+          "bg-gradient-to-b from-[#D92D20] to-[#B42318] text-white border-[#B42318]",
+          "hover:border-[#9E1B12]",
+          "active:border-[#84140D]",
+          SOLID_SKEUOMORPHIC_SHADOW,
+          // Destructive red hover/active overlays
+          "after:bg-white/[0.12] hover:after:opacity-100 active:after:bg-black/[0.15]"
+        ),
+        "secondary-destructive": cn(
+          // Exact Untitled UI secondary destructive: soft red bordered
+          "bg-gradient-to-b from-white to-[#F9FAFB] text-[#B42318] border-[#FDA29B]",
+          "hover:text-[#9E1B12] hover:border-[#FDA29B]",
+          BORDERED_SKEUOMORPHIC_SHADOW,
+          // Hover overlay
+          "after:bg-red-500/[0.04] hover:after:opacity-100 active:after:bg-red-950/[0.08]",
+          // Dark Mode Secondary Destructive: Charcoal fill with red borders and label
+          "dark:bg-gradient-to-b dark:from-[#1F242F] dark:to-[#10121C] dark:text-[#F87171] dark:border-[#9E1B12]/50",
+          "dark:hover:border-[#F87171]/40",
+          "dark:shadow-skeuomorphic-solid",
+          "dark:after:bg-white/[0.06] dark:active:after:bg-black/[0.15]"
+        )
       },
       size: {
-        default: "",
-        xs: "",
-        sm: "",
-        lg: "",
-        icon: "",
-        "icon-xs": "",
-        "icon-sm": "",
-        "icon-lg": ""
+        xs: "h-8 gap-1 rounded-md px-2.5 text-xs",
+        sm: "h-9 gap-1.5 rounded-lg px-3 text-sm",
+        md: "h-10 gap-1.5 rounded-lg px-3.5 text-sm",
+        lg: "h-11 gap-2 rounded-lg px-4 text-base",
+        xl: "h-12 gap-2 rounded-lg px-5 text-base",
+        default: "h-10 gap-1.5 rounded-lg px-3.5 text-sm",
+        icon: "h-10 w-10 rounded-lg",
+        "icon-xs": "h-8 w-8 rounded-md",
+        "icon-sm": "h-9 w-9 rounded-lg",
+        "icon-lg": "h-11 w-11 rounded-lg"
+      },
+      shape: {
+        pill: "rounded-full!",
+        rounded: ""
+        // defaults to the size variant's standard rounded-lg
       }
     },
     defaultVariants: {
-      variant: "default",
-      size: "default"
+      color: "primary",
+      size: "default",
+      shape: "rounded"
     }
   }
 );
 function Button({
   className,
-  variant = "default",
-  size = "default",
+  variant,
+  color,
+  size,
+  shape,
+  iconLeading,
+  iconTrailing,
+  isLoading = false,
   asChild = false,
+  disabled,
+  type = "button",
+  children,
   ...props
 }) {
-  const v2Variant = TIMBAL_V2_FROM_LEGACY_BUTTON[variant ?? "default"];
-  const v2Size = LEGACY_SIZE_TO_V2[size ?? "default"];
-  const isIconOnly = typeof size === "string" && size.startsWith("icon");
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-    TimbalV2Button,
+  const isDisabled = disabled || isLoading;
+  let resolvedColor = "primary";
+  if (color) {
+    resolvedColor = color;
+  } else if (variant) {
+    if (variant === "default" || variant === "informative") resolvedColor = "primary";
+    else if (variant === "secondary" || variant === "outline") resolvedColor = "secondary";
+    else if (variant === "destructive") resolvedColor = "primary-destructive";
+    else if (variant === "ghost") resolvedColor = "tertiary";
+    else if (variant === "link") resolvedColor = "link";
+  }
+  const classes = cn(
+    buttonVariants({
+      color: resolvedColor,
+      size: size ?? "default",
+      shape: shape ?? "rounded"
+    }),
+    className
+  );
+  if (asChild) {
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      import_radix_ui5.Slot.Root,
+      {
+        className: classes,
+        "aria-disabled": isDisabled ? true : void 0,
+        "data-slot": "button",
+        "data-variant": resolvedColor,
+        ...props,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+    "button",
     {
+      type,
+      disabled: isDisabled,
       "data-slot": "button",
-      "data-variant": variant,
-      "data-size": size,
-      variant: v2Variant,
-      size: v2Size,
-      shape: "pill",
-      isIconOnly,
-      asChild,
-      className: cn(buttonVariants({ variant, size, className })),
-      ...props
+      "data-variant": resolvedColor,
+      className: classes,
+      ...props,
+      children: [
+        isLoading ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "size-4 animate-spin rounded-full border-2 border-current border-t-transparent"
+          }
+        ) : iconLeading,
+        children,
+        !isLoading ? iconTrailing : null
+      ]
     }
   );
 }
@@ -5067,6 +5224,7 @@ var overlayListPanelClass = cn(
   overlaySurfaceClass,
   "overflow-hidden rounded-lg p-0 outline-hidden"
 );
+var overlayItemClass = "relative flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground";
 
 // src/chat/workforce-selector.tsx
 var import_jsx_runtime38 = require("react/jsx-runtime");
@@ -5308,9 +5466,9 @@ var TimbalChatShell = ({
 };
 
 // src/studio/shell/studio-shell.tsx
-var import_react48 = require("react");
-var import_lucide_react13 = require("lucide-react");
-var import_react49 = require("motion/react");
+var import_react49 = require("react");
+var import_lucide_react14 = require("lucide-react");
+var import_react50 = require("motion/react");
 
 // src/design/sidebar-motion.ts
 var STUDIO_SIDEBAR_EASE_ENTER = [0, 0, 0.2, 1];
@@ -5493,8 +5651,8 @@ function useStudioSidebarLayout() {
 }
 
 // src/studio/sidebar/sidebar.tsx
-var import_react42 = require("react");
-var import_react43 = require("motion/react");
+var import_react43 = require("react");
+var import_react44 = require("motion/react");
 
 // src/studio/sidebar/sidebar-entries.tsx
 var import_react37 = require("motion/react");
@@ -5530,7 +5688,8 @@ var StudioSidebarEntries = ({
 };
 
 // src/studio/sidebar/sidebar-footer.tsx
-var import_lucide_react10 = require("lucide-react");
+var import_react40 = require("react");
+var import_lucide_react11 = require("lucide-react");
 
 // src/auth/provider.tsx
 var import_react38 = require("react");
@@ -5591,8 +5750,100 @@ var StudioSidebarTooltip = ({
   ] });
 };
 
-// src/studio/sidebar/sidebar-footer.tsx
+// src/ui/dropdown-menu.tsx
+var import_radix_ui6 = require("radix-ui");
+var import_lucide_react10 = require("lucide-react");
 var import_jsx_runtime45 = require("react/jsx-runtime");
+function DropdownMenu({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_radix_ui6.DropdownMenu.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    import_radix_ui6.DropdownMenu.Trigger,
+    {
+      "data-slot": "dropdown-menu-trigger",
+      ...props
+    }
+  );
+}
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_radix_ui6.DropdownMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    import_radix_ui6.DropdownMenu.Content,
+    {
+      "data-slot": "dropdown-menu-content",
+      sideOffset,
+      className: cn(
+        overlayListPanelClass,
+        "max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] origin-[var(--radix-dropdown-menu-content-transform-origin)] overflow-x-hidden overflow-y-auto p-1",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    import_radix_ui6.DropdownMenu.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      className: cn(
+        overlayItemClass,
+        "data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    import_radix_ui6.DropdownMenu.Label,
+    {
+      "data-slot": "dropdown-menu-label",
+      "data-inset": inset,
+      className: cn(
+        "px-2 py-1.5 text-xs font-medium text-muted-foreground data-[inset]:pl-8",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    import_radix_ui6.DropdownMenu.Separator,
+    {
+      "data-slot": "dropdown-menu-separator",
+      className: cn("-mx-1 my-1 h-px bg-border", className),
+      ...props
+    }
+  );
+}
+
+// src/studio/sidebar/sidebar-footer.tsx
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function userInitials(name, email) {
   const fromName = name.trim().split(/\s+/).map((part) => part.charAt(0)).join("").slice(0, 2).toUpperCase();
   if (fromName) return fromName;
@@ -5606,68 +5857,127 @@ var StudioSidebarFooter = ({
 }) => {
   const session = useOptionalSession();
   const user = session?.user ?? null;
+  const [isDark, setIsDark] = (0, import_react40.useState)(false);
+  (0, import_react40.useEffect)(() => {
+    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?.();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(StudioSidebarEntryMotion, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  const dropdownContent = user ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+    DropdownMenuContent,
+    {
+      side: iconOnlyLayout ? "right" : "top",
+      align: iconOnlyLayout ? "end" : "start",
+      className: "w-56 z-[70]",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DropdownMenuLabel, { className: "font-normal", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex flex-col space-y-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: "truncate text-sm font-medium leading-none text-foreground", children: user.user_name }),
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: "truncate text-xs leading-none text-muted-foreground", children: user.user_email })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DropdownMenuSeparator, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DropdownMenuItem, { onClick: handleToggleTheme, className: "cursor-pointer", children: isDark ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react11.Sun, { className: "mr-2 size-3.5 shrink-0 text-muted-foreground" }),
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { children: "Light mode" })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react11.Moon, { className: "mr-2 size-3.5 shrink-0 text-muted-foreground" }),
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { children: "Dark mode" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DropdownMenuSeparator, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+          DropdownMenuItem,
+          {
+            onClick: handleSignOut,
+            className: "cursor-pointer text-destructive focus:text-destructive focus:bg-destructive/10",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react11.LogOut, { className: "mr-2 size-3.5 shrink-0" }),
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { children: "Sign out" })
+            ]
+          }
+        )
+      ]
+    }
+  ) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(StudioSidebarEntryMotion, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     "footer",
     {
       className: cn(
         "mt-auto w-full shrink-0 py-2.5",
         iconOnlyLayout ? studioSidebarCollapsedRailInsetClass : "px-2.5"
       ),
-      children: user ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex flex-col gap-2", children: [
-        iconOnlyLayout ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: studioSidebarCollapsedRailChipRowClass, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Avatar, { size: "sm", className: "size-8", children: [
-          user.user_photo_url ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(AvatarImage, { src: user.user_photo_url, alt: user.user_name }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(AvatarFallback, { className: "text-[10px]", children: userInitials(user.user_name, user.user_email) })
-        ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex min-w-0 items-center gap-2.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Avatar, { size: "sm", children: [
-            user.user_photo_url ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(AvatarImage, { src: user.user_photo_url, alt: user.user_name }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(AvatarFallback, { children: userInitials(user.user_name, user.user_email) })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "truncate text-sm font-medium text-foreground", children: user.user_name }),
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "truncate text-xs text-muted-foreground", children: user.user_email })
-          ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-          "div",
+      children: user ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(DropdownMenu, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: cn(iconOnlyLayout && studioSidebarCollapsedRailChipRowClass), children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(StudioSidebarTooltip, { label: iconOnlyLayout ? user.user_name : "User menu", enabled: showTooltips, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DropdownMenuTrigger, { asChild: true, children: iconOnlyLayout ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          "button",
           {
-            className: iconOnlyLayout ? studioSidebarCollapsedRailChipRowClass : void 0,
-            children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(StudioSidebarTooltip, { label: "Sign out", enabled: showTooltips, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
-              "button",
-              {
-                type: "button",
-                onClick: handleSignOut,
-                className: cn(
-                  studioSidebarNavItemClasses(iconOnlyLayout, false),
-                  iconOnlyLayout && "inline-flex"
-                ),
-                "aria-label": "Sign out",
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react10.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__ */ (0, import_jsx_runtime46.jsxs)(Avatar, { size: "sm", className: "size-8", children: [
+              user.user_photo_url ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AvatarImage, { src: user.user_photo_url, alt: user.user_name }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AvatarFallback, { className: "text-[10px]", children: userInitials(user.user_name, user.user_email) })
+            ] })
           }
-        )
-      ] }) : !iconOnlyLayout && emptyCaption ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "px-1 text-xs text-muted-foreground", children: emptyCaption }) : null
+        ) : /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+          "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__ */ (0, import_jsx_runtime46.jsxs)(Avatar, { size: "sm", className: "shrink-0", children: [
+                user.user_photo_url ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AvatarImage, { src: user.user_photo_url, alt: user.user_name }) : null,
+                /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AvatarFallback, { children: userInitials(user.user_name, user.user_email) })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: "truncate text-sm font-medium text-foreground", children: user.user_name }),
+                /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: "truncate text-xs text-muted-foreground", children: user.user_email })
+              ] })
+            ]
+          }
+        ) }) }) }),
+        dropdownContent
+      ] }) : !iconOnlyLayout && emptyCaption ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: "px-1 text-xs text-muted-foreground", children: emptyCaption }) : null
     }
   ) });
 };
 
 // src/studio/sidebar/sidebar-header.tsx
-var import_lucide_react11 = require("lucide-react");
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_lucide_react12 = require("lucide-react");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var sidebarHeaderClass = "flex h-12 shrink-0 items-center px-2";
 var toggleButtonClass = cn(
   "flex shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors",
   "hover:bg-muted hover:text-foreground",
   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/15"
 );
-var SidebarToggleButton = ({ ariaLabel, expanded, onClick, children }) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+var SidebarToggleButton = ({ ariaLabel, expanded, onClick, children }) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
   "button",
   {
     type: "button",
@@ -5678,89 +5988,113 @@ var SidebarToggleButton = ({ ariaLabel, expanded, onClick, children }) => /* @__
     children
   }
 );
-var CollapsedBrandToggle = ({
-  onExpand,
-  brand
-}) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: studioSidebarCollapsedRailChipRowClass, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(StudioSidebarTooltip, { label: "Expand sidebar", enabled: true, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
-  "button",
-  {
-    type: "button",
-    onClick: onExpand,
-    "aria-label": "Expand sidebar",
-    "aria-expanded": false,
-    className: cn(
-      toggleButtonClass,
-      "group relative inline-flex size-8 items-center justify-center overflow-hidden rounded-lg"
-    ),
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-        "span",
-        {
-          "aria-hidden": true,
-          className: cn(
-            "pointer-events-none flex items-center justify-center",
-            "transition-[opacity,transform] duration-200 ease-out",
-            "group-hover:scale-90 group-hover:opacity-0"
-          ),
-          children: brand
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-        import_lucide_react11.ChevronRight,
-        {
-          "aria-hidden": true,
-          className: cn(
-            "pointer-events-none absolute inset-0 m-auto size-4",
-            "opacity-0 transition-[opacity,transform] duration-200 ease-out",
-            "group-hover:opacity-100"
-          )
-        }
-      )
-    ]
+var CollapsedBrandToggle = ({ onExpand, logo, fallbackToChevron }) => {
+  if (fallbackToChevron || !logo) {
+    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: studioSidebarCollapsedRailChipRowClass, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(StudioSidebarTooltip, { label: "Expand sidebar", enabled: true, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: onExpand,
+        "aria-label": "Expand sidebar",
+        "aria-expanded": false,
+        className: cn(
+          toggleButtonClass,
+          "group relative inline-flex size-8 items-center justify-center overflow-hidden rounded-lg"
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react12.ChevronRight, { "aria-hidden": true, className: "size-4" })
+      }
+    ) }) });
   }
-) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: studioSidebarCollapsedRailChipRowClass, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(StudioSidebarTooltip, { label: "Expand sidebar", enabled: true, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+    "button",
+    {
+      type: "button",
+      onClick: onExpand,
+      "aria-label": "Expand sidebar",
+      "aria-expanded": false,
+      className: cn(
+        toggleButtonClass,
+        "group relative inline-flex size-8 items-center justify-center overflow-hidden rounded-lg"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn(
+              "pointer-events-none flex items-center justify-center",
+              "transition-[opacity,transform] duration-200 ease-out",
+              "group-hover:scale-90 group-hover:opacity-0"
+            ),
+            children: logo
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          import_lucide_react12.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__ */ (0, import_jsx_runtime46.jsxs)("header", { className: cn(sidebarHeaderClass, "justify-between gap-2 pr-2"), children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("header", { className: cn(sidebarHeaderClass, "justify-between gap-2 pr-2"), children: [
       brand,
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
         SidebarToggleButton,
         {
           ariaLabel: "Close menu",
           expanded: mobileOpen,
           onClick: onToggle,
-          children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react11.X, { className: "size-3.5" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react12.X, { className: "size-3.5" })
         }
       )
     ] });
   }
   if (isCollapsedRail) {
-    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       "header",
       {
         className: cn(
           "flex h-12 shrink-0 items-center",
           studioSidebarCollapsedRailInsetClass
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(CollapsedBrandToggle, { onExpand: onToggle, brand })
+        children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          CollapsedBrandToggle,
+          {
+            onExpand: onToggle,
+            logo,
+            fallbackToChevron
+          }
+        )
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("header", { className: cn(sidebarHeaderClass, "justify-between gap-1 pr-2"), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("header", { className: cn(sidebarHeaderClass, "justify-between gap-1 pr-2"), children: [
     brand,
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       SidebarToggleButton,
       {
         ariaLabel: "Collapse sidebar",
         expanded: true,
         onClick: onToggle,
-        children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react11.ChevronLeft, { className: "size-4" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react12.ChevronLeft, { className: "size-4" })
       }
     )
   ] });
@@ -5779,7 +6113,7 @@ function workforceItemInitial(w) {
 }
 
 // src/studio/sidebar/sidebar-nav.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var StudioSidebarNav = ({
   workforces,
   selectedId,
@@ -5788,7 +6122,7 @@ var StudioSidebarNav = ({
   showTooltips
 }) => {
   if (workforces.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     "nav",
     {
       className: cn(
@@ -5800,11 +6134,11 @@ var StudioSidebarNav = ({
         const id = workforceItemId(w);
         const isActive = id === selectedId;
         const label = workforceItemLabel(w);
-        return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
           StudioSidebarEntryMotion,
           {
             className: iconOnlyLayout ? studioSidebarCollapsedRailChipRowClass : void 0,
-            children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(StudioSidebarTooltip, { label, enabled: showTooltips, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(StudioSidebarTooltip, { label, enabled: showTooltips, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
               "button",
               {
                 type: "button",
@@ -5815,7 +6149,7 @@ var StudioSidebarNav = ({
                   studioSidebarNavItemClasses(iconOnlyLayout, isActive),
                   iconOnlyLayout && "inline-flex"
                 ),
-                children: iconOnlyLayout ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-xs font-semibold leading-none", children: workforceItemInitial(w) }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "min-w-0 truncate", children: label })
+                children: iconOnlyLayout ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "text-xs font-semibold leading-none", children: workforceItemInitial(w) }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "min-w-0 truncate", children: label })
               }
             ) })
           },
@@ -5828,7 +6162,7 @@ var StudioSidebarNav = ({
 
 // src/studio/sidebar/timbal-mark.tsx
 var import_shaders_react = require("@paper-design/shaders-react");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var DEFAULT_SIZE = 64;
 var TRANSPARENT_BACK = "#00000000";
 var TIMBAL_SYMBOL_DATA_URI = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAYAAAA8AXHiAAAH6ElEQVR4Aeyci7EcNRBFFxIBIgEygUiASCATyASIBOa4rFrZntmPPq1W93218o5nZyTd26dbmnX5fX3TjxyY4IDAmmCqurzdBJYomOKAwJpiqzoVWGJgigMCa4qt6lRgZWHAWKfAMjY8y3ACK0ukjXUKLGPDswwnsLJE2linwDI2PMtwAitLpI11Cixjw+/DxT4SWLHju0ydwHrP+p/euzzE1T8cKr492lsvgfWaXZj733Hp90fL9Pr1EPvn0QTWYcLoF8bS6Pdf/kjQAAnNv7RqVcW6do4q9ffxMe/HW5oXy323boF1zkvzEnDe3RZnS5X6fcRsBdbdRY6oTl1LAJ1s2NDdXaVq3QLr7kapUph8Pxv/iESiDVUqsG63sgQ0b1Rve/6QQEOrVG1DdrCGbFRrQzc5Zh9FlSKppkw5M1gYi8FTjHXaaalSJNTUKWYEC3P5spP3qeY667zsIadVqVpvNrCoUrTag+jHgIRm0z2ka7AGRpzqNG2jOnCeo7uiSi3RnQEszCVjydzRgfPaH1rRbFqlajMig0WVWmpubbThMRvzJVWq1hgVrFKlgKvWG/2YRHLxpBsNrOVLwCJySSBXT7qRwHKxBCwAiypFWzD09ZARwCpVysUScG318E+oUsv3Uleq3gPrqpd1512bO9GWsockqSYO0971zmBR/mnt6ve7k0RC87KvEV61bEewMNftEvCq8Q3XlSqF/obbbW/ZDSz2UWSs2yVgQvjQimb3VarWvgtYZCnm8uRXzz/6MXq3rM47gLXVEjCI9FKlqNCDurTtxjNYxdytloAB4aM6r65S3TK8grXtEtAZEZZ7Wmc362/3BlapUtsuAY0hDVGlau2ewApnbm30g+OyhySpHly210dewKL80/Zyr2+2JBKaQ+4hV4OFudtvVBv4KlUK/Q23+79lJVjso8jYUEvAk5CjFc0hq1StfQVYZCnm8uRXzyX6MXqbq/Nu5liDFX4JOAGgVCkq9MnHMU9ZgVXMDb8EfIYJ1TlNlaq1W4BFlcpoLss9rfY7zfFMsFSl0mD0pdBZYKXaqFa2so+iSpFU1el8hzPAwlgMzuQmeyl0k1ARdf/zrqiRYGGuq/+C9K4Zb11/v5g9JFCh/342+dEosDCWlslOljs0Z3vSfSnGvWCRpRmf+KhSGXW/BBUX9YCFuWQsmUtfGdo3h0g0q0odRjx6tYAFSFnNZXNOlX7kqT47HGgB67jtJnNv+nnkQCtYj/rUZ3LgFggsRdOTAwLLUzQCzUVgBQqmJykCy1M0As1FYAUKpicpAstTNALNRWAFCqYnKTPB8qRTczF2QGAZG55lOIGVJdLGOgWWseFZhhNYWSJtrFNgGRueZTiBlSXSM3We9C2wTkzRqX4HBFa/h+rhxAGBdWKKTvU7ILD6PVQPJw4IrBNTdKrfAYHV76F6OHFAYJ2Ysv+p9QoE1voYhJyBwAoZ1vWiBNb6GIScgcAKGdb1ogTW+hiEnIHAChnW9aIElk0M0o0isNKF3EawwLLxOd0oAitdyN8W/Ndxx9LfmnyMH/aFuX+EVXct7Lfjox+P9vZLFeu5ZcXcf59fGuYKKhRA8Xtmm0QJrGvbqFJd5l537foTKvN3xwzRf7y1vdKC9cSuUqW6zH0yhsePSaSfR0xMYH3qYvcS8Gl32/yNBPrqmC3vx1v/S2DdPRyyBNy72+aIKkUbOuEWsPg970MnsbizUqWGLAGLtbwzPNWpey91NWALWFd97Xh+qrmODSl7SJJqyjQzg0X5p00x1mmnJBKam79GeFVXRrAwd9oS8KrxC64rVQr904f3A9Z0qR8GYB9Fxk5bAj6M4usPtKJ5epWqZWcBiyzFXJ78av3Rj9G7pDpnAMt0CXBCaqlSVOglU4oMVjHXdAlYEsVPB6U6L6lS9TSigkWVWm5ubbTRMcs9zWi462GigaUqdR1r008igbVso2oasS8HYx9FlSKpvvx00ZkHYC2aUduwGIvBbXfveRd7KXSTUO4U7A4W5g79V3l3ETqfEHtIoEL/+RWLz+4MFsbSFltoOjzLHZrdP+nuCBZZmvGJjyVvG927gVWWADLXtFQsHAytVKmt9pC7gEWVwlz3S8BgANG9TZWqte8AVqlSmFzPPfoxiUSbrnPGAJ7BKkuAqtSMyE/u0ytYW21UB8aIfRRViqQa2K19Vx7BwlgMtndj3Ygs8+gmodbNYuDInsDCXH3ZOTC4K7vyAhbZSlvphfXYLHdoDrmHXA0WVWrLx+lOCnnSDa17JViYS8aSuZ1x2uZ2tKL5cZXaRs71RFeARZVKYe5ntrMxD12lar3WYJUqBVz1PKIfk0ipnnStwEqzBHyWISRQxifdmwVYqZaACiyqFK06ledwJlilSqVaAg50qFJp9lKH3tPXLLCymlv2kCTVqeFZTs4Ai/JPC+ThUykkEprDf43w1ImPF4wEC3MzLgGlSqH/o616GwUW+ygyNtMSgFY0q0qd5FEvWGQp5vLkd9J92FPozVidXw5oD1hZlwASiQr9sskZL2wBK+sSgO6UX3a2JEYrWCyBLePtfA/L387zN517C1imE7wYTKedOyCwnAdo1+kJrF0j53zeAst5gHadnsDaNXLO5y2wnAdo1+kJrF0j53zew8ByrlPTM3ZAYBkbnmU4gZUl0sY6BZax4VmGE1hZIm2sU2AZG55lOIGVJdLDdL7W0f8AAAD//x3VUCQAAAAGSURBVAMArsj7LTb9pqMAAAAASUVORK5CYII=";
@@ -5837,14 +6171,14 @@ function TimbalMark({
   size = DEFAULT_SIZE,
   src = TIMBAL_SYMBOL_DATA_URI
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     "div",
     {
       className: cn("relative shrink-0 bg-transparent", className),
       style: { width: size, height: size },
       role: "img",
       "aria-label": "Timbal",
-      children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
         import_shaders_react.LiquidMetal,
         {
           width: size,
@@ -5876,14 +6210,14 @@ function TimbalMark({
 }
 
 // src/studio/sidebar/shell-inset-bridge-context.tsx
-var import_react41 = require("react");
+var import_react42 = require("react");
 
 // src/layout/shell-inset-context.tsx
-var import_react40 = require("react");
-var ShellInsetContext = (0, import_react40.createContext)(null);
+var import_react41 = require("react");
+var ShellInsetContext = (0, import_react41.createContext)(null);
 var ShellInsetProvider = ShellInsetContext.Provider;
 function useShellInsetReporter() {
-  return (0, import_react40.useContext)(ShellInsetContext);
+  return (0, import_react41.useContext)(ShellInsetContext);
 }
 
 // src/studio/sidebar/shell-inset-bridge-context.tsx
@@ -5892,7 +6226,7 @@ var StudioSidebarShellInsetBridge = ({
 }) => {
   const reportInset = useShellInsetReporter();
   const { isMobile, isCollapsedRail } = useStudioSidebarLayout();
-  (0, import_react41.useLayoutEffect)(() => {
+  (0, import_react42.useLayoutEffect)(() => {
     const insetPx = isMobile ? 0 : isCollapsedRail ? SIDEBAR_INSET_PX_COLLAPSED : SIDEBAR_INSET_PX_EXPANDED;
     reportInset?.(insetPx);
     onInsetChange?.(insetPx);
@@ -5901,7 +6235,7 @@ var StudioSidebarShellInsetBridge = ({
 };
 
 // src/studio/sidebar/sidebar.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var DEFAULT_BREAKPOINT_PX = 768;
 function readPersistedCollapsed(key) {
   if (!key || typeof window === "undefined") return false;
@@ -5932,9 +6266,10 @@ var StudioSidebarPanel = ({
   onEntriesBlurOutComplete,
   onPanelWidthComplete,
   brand,
+  logo,
   emptyCaption = null
 }) => {
-  const reducedMotion = (0, import_react43.useReducedMotion)();
+  const reducedMotion = (0, import_react44.useReducedMotion)();
   const isCollapsedRail = widthCollapsed && !isMobile;
   const iconOnlyLayout = studioSidebarIconOnlyLayout(isMobile, isCollapsedRail);
   const isDrawerOpen = isMobile && mobileOpen;
@@ -5951,9 +6286,12 @@ var StudioSidebarPanel = ({
     onCollapsedChange(!collapsed);
   };
   const panelWidthPx = isMobile ? SIDEBAR_MOBILE_PX : widthCollapsed ? SIDEBAR_WIDTH_COLLAPSED_PX : SIDEBAR_WIDTH_PX;
-  const brandNode = brand ?? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(TimbalMark, { size: 32 });
-  const panel = /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
-    import_react43.motion.div,
+  const isCustomBrand = brand !== void 0;
+  const fallbackToChevron = isCustomBrand && !logo;
+  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,
     {
       "data-sidebar-collapsed": isCollapsedRail ? "" : void 0,
       className: cn(
@@ -5967,23 +6305,25 @@ var StudioSidebarPanel = ({
       style: { willChange: entriesVisible ? void 0 : "width" },
       onAnimationComplete: isMobile || entriesVisible ? void 0 : () => onPanelWidthComplete(),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           StudioSidebarHeader,
           {
             isCollapsedRail,
             isMobile,
             mobileOpen,
             onToggle: handleToggle,
-            brand: brandNode
+            brand: brandNode,
+            logo: logoNode,
+            fallbackToChevron
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
           StudioSidebarEntries,
           {
             visible: entriesVisible,
             onBlurOutComplete: onEntriesBlurOutComplete,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                 "div",
                 {
                   id: DOM_IDS.sidebarRuntimeAnchor,
@@ -5993,7 +6333,7 @@ var StudioSidebarPanel = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                 StudioSidebarNav,
                 {
                   workforces,
@@ -6003,8 +6343,8 @@ var StudioSidebarPanel = ({
                   showTooltips: isCollapsedRail
                 }
               ),
-              workforces.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "min-h-0 flex-1" }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+              workforces.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "min-h-0 flex-1" }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                 StudioSidebarFooter,
                 {
                   iconOnlyLayout,
@@ -6020,8 +6360,8 @@ var StudioSidebarPanel = ({
     }
   );
   if (isMobile) {
-    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-      import_react43.motion.aside,
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      import_react44.motion.aside,
       {
         className: "fixed inset-y-0 left-0 z-[60] flex",
         "aria-label": "Studio navigation",
@@ -6036,7 +6376,7 @@ var StudioSidebarPanel = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     "aside",
     {
       className: "absolute inset-y-0 left-0 z-[60] flex py-[var(--studio-sidebar-gap)] pl-[var(--studio-sidebar-gap)]",
@@ -6053,62 +6393,75 @@ var StudioSidebar = ({
   persistKey = STORAGE_KEYS.sidebarCollapsed,
   mobileBreakpointPx = DEFAULT_BREAKPOINT_PX,
   brand,
+  logo,
   emptyCaption,
   mobileOpen: mobileOpenProp,
   onMobileOpenChange: onMobileOpenChangeProp,
   onInsetChange
 }) => {
-  const reducedMotion = (0, import_react43.useReducedMotion)();
+  const reducedMotion = (0, import_react44.useReducedMotion)();
   const fetched = useWorkforces({ enabled: workforcesProp === void 0 });
   const workforces = workforcesProp ?? fetched.workforces;
-  const [internalSelected, setInternalSelected] = (0, import_react42.useState)(
+  const [internalSelected, setInternalSelected] = (0, import_react43.useState)(
     selectedIdProp ?? ""
   );
-  (0, import_react42.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     if (selectedIdProp !== void 0) return;
     if (internalSelected) return;
     const first = workforces[0]?.id ?? workforces[0]?.uid ?? workforces[0]?.name;
     if (first) setInternalSelected(first);
   }, [workforces, selectedIdProp, internalSelected]);
   const selectedId = selectedIdProp ?? internalSelected ?? workforces[0]?.id ?? workforces[0]?.uid ?? workforces[0]?.name ?? "";
-  const handleSelect = (0, import_react42.useCallback)(
-    (id) => {
-      if (selectedIdProp === void 0) setInternalSelected(id);
-      onSelect?.(id);
-    },
-    [selectedIdProp, onSelect]
-  );
-  const [collapsed, setCollapsed] = (0, import_react42.useState)(() => {
+  const [collapsed, setCollapsed] = (0, import_react43.useState)(() => {
     const persisted = readPersistedCollapsed(persistKey);
     return persisted || defaultCollapsed;
   });
-  const handleCollapsedChange = (0, import_react42.useCallback)(
+  const handleCollapsedChange = (0, import_react43.useCallback)(
     (next) => {
       setCollapsed(next);
       writePersistedCollapsed(persistKey, next);
     },
     [persistKey]
   );
-  const [isMobile, setIsMobile] = (0, import_react42.useState)(() => {
+  const [isMobile, setIsMobile] = (0, import_react43.useState)(() => {
     if (typeof window === "undefined") return false;
     return window.innerWidth < mobileBreakpointPx;
   });
-  (0, import_react42.useEffect)(() => {
+  (0, import_react43.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_react42.useState)(false);
+  const [internalMobileOpen, setInternalMobileOpen] = (0, import_react43.useState)(false);
   const mobileOpen = mobileOpenProp ?? internalMobileOpen;
-  const setMobileOpen = (0, import_react42.useCallback)(
+  const setMobileOpen = (0, import_react43.useCallback)(
     (next) => {
       if (mobileOpenProp === void 0) setInternalMobileOpen(next);
       onMobileOpenChangeProp?.(next);
     },
     [mobileOpenProp, onMobileOpenChangeProp]
   );
+  const handleSelect = (0, import_react43.useCallback)(
+    (id) => {
+      if (selectedIdProp === void 0) setInternalSelected(id);
+      onSelect?.(id);
+      if (isMobile) setMobileOpen(false);
+    },
+    [selectedIdProp, onSelect, isMobile, setMobileOpen]
+  );
+  (0, import_react43.useEffect)(() => {
+    if (!isMobile && mobileOpen) setMobileOpen(false);
+  }, [isMobile, mobileOpen, setMobileOpen]);
+  (0, import_react43.useEffect)(() => {
+    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,
@@ -6119,18 +6472,19 @@ var StudioSidebar = ({
   const entriesVisible = isMobile || phaseEntriesVisible;
   const isCollapsedRail = widthCollapsed && !isMobile;
   const iconOnlyLayout = studioSidebarIconOnlyLayout(isMobile, isCollapsedRail);
-  const contextValue = (0, import_react42.useMemo)(
+  const contextValue = (0, import_react43.useMemo)(
     () => ({
       collapsed: effectiveCollapsed,
       isMobile,
       isCollapsedRail,
-      iconOnlyLayout
+      iconOnlyLayout,
+      closeMobile: () => setMobileOpen(false)
     }),
-    [effectiveCollapsed, isMobile, isCollapsedRail, iconOnlyLayout]
+    [effectiveCollapsed, isMobile, isCollapsedRail, iconOnlyLayout, setMobileOpen]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(StudioSidebarContext.Provider, { value: contextValue, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(StudioSidebarShellInsetBridge, { onInsetChange }),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(StudioSidebarContext.Provider, { value: contextValue, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(StudioSidebarShellInsetBridge, { onInsetChange }),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       StudioSidebarPanel,
       {
         workforces,
@@ -6146,6 +6500,7 @@ var StudioSidebar = ({
         onEntriesBlurOutComplete,
         onPanelWidthComplete,
         brand,
+        logo,
         emptyCaption
       }
     )
@@ -6153,26 +6508,27 @@ var StudioSidebar = ({
 };
 
 // src/studio/sidebar/sidebar-runtime-portal.tsx
-var import_react44 = require("react");
+var import_react45 = require("react");
 var import_react_dom = require("react-dom");
-var import_lucide_react12 = require("lucide-react");
-var import_react45 = require("@assistant-ui/react");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_lucide_react13 = require("lucide-react");
+var import_react46 = require("@assistant-ui/react");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var StudioSidebarRuntimePortal = ({
   label = "New chat"
 }) => {
-  const { iconOnlyLayout } = useStudioSidebarLayout();
-  const hasMessages = (0, import_react45.useThread)((s) => s.messages.length > 0);
+  const { iconOnlyLayout, isMobile, closeMobile } = useStudioSidebarLayout();
+  const hasMessages = (0, import_react46.useThread)((s) => s.messages.length > 0);
   const { clear } = useTimbalRuntime();
-  const [anchor, setAnchor] = (0, import_react44.useState)(null);
-  const startNewChat = (0, import_react44.useCallback)(() => {
+  const [anchor, setAnchor] = (0, import_react45.useState)(null);
+  const startNewChat = (0, import_react45.useCallback)(() => {
     clear();
-  }, [clear]);
-  (0, import_react44.useLayoutEffect)(() => {
+    if (isMobile) closeMobile?.();
+  }, [clear, isMobile, closeMobile]);
+  (0, import_react45.useLayoutEffect)(() => {
     setAnchor(document.getElementById(DOM_IDS.sidebarRuntimeAnchor));
   }, []);
   if (!anchor || !hasMessages) return null;
-  const button = /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+  const button = /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
     "button",
     {
       type: "button",
@@ -6180,24 +6536,24 @@ var StudioSidebarRuntimePortal = ({
       "aria-label": label,
       className: studioSidebarNavItemClasses(iconOnlyLayout, false),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react12.MessageSquarePlus, { className: "size-3.5 shrink-0" }),
-        !iconOnlyLayout ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "min-w-0 truncate", children: label }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react13.MessageSquarePlus, { className: "size-3.5 shrink-0" }),
+        !iconOnlyLayout ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "min-w-0 truncate", children: label }) : null
       ]
     }
   );
   return (0, import_react_dom.createPortal)(
-    iconOnlyLayout ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Tooltip, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(TooltipTrigger, { asChild: true, children: button }),
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(TooltipContent, { side: "right", className: "text-xs", children: label })
+    iconOnlyLayout ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Tooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(TooltipTrigger, { asChild: true, children: button }),
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(TooltipContent, { side: "right", className: "text-xs", children: label })
     ] }) : button,
     anchor
   );
 };
 
 // src/studio/sidebar/welcome.tsx
-var import_react46 = require("motion/react");
-var import_react47 = require("@assistant-ui/react");
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_react47 = require("motion/react");
+var import_react48 = require("@assistant-ui/react");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var welcomeStagger2 = {
   initial: {},
   animate: {
@@ -6222,34 +6578,34 @@ var welcomeIcon2 = {
   }
 };
 var StudioWelcome = ({ config, icon }) => {
-  const isEmpty = (0, import_react47.useThread)((s) => s.messages.length === 0);
+  const isEmpty = (0, import_react48.useThread)((s) => s.messages.length === 0);
   if (!isEmpty) return null;
-  const iconNode = icon ?? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  const iconNode = icon ?? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     TimbalMark,
     {
       size: 112,
       className: "max-md:scale-[0.58] max-md:origin-center"
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime51.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_runtime51.jsx)("div", { className: "aui-thread-welcome-center flex w-full grow flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
-    import_react46.motion.div,
+  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,
     {
       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_runtime51.jsx)(import_react46.motion.div, { variants: welcomeIcon2, className: "mb-4 md:mb-5", children: iconNode }),
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-          import_react46.motion.h1,
+        /* @__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_react47.motion.h1,
           {
             variants: welcomeItem2,
             className: "aui-thread-welcome-message-inner text-xl font-semibold sm:text-2xl",
             children: config?.heading ?? "How can I help you today?"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-          import_react46.motion.p,
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+          import_react47.motion.p,
           {
             variants: welcomeItem2,
             className: "aui-thread-welcome-message-inner mt-2 text-muted-foreground",
@@ -6262,8 +6618,8 @@ var StudioWelcome = ({ config, icon }) => {
 };
 
 // src/studio/shell/studio-shell.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
-var import_react50 = require("react");
+var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_react51 = require("react");
 var DEFAULT_BREAKPOINT_PX2 = 768;
 function readPersistedCollapsed2(key) {
   if (!key || typeof window === "undefined") return false;
@@ -6283,9 +6639,9 @@ function writePersistedCollapsed2(key, collapsed) {
 function makeComposerWithPortal(BaseComposer) {
   const Resolved = BaseComposer ?? Composer;
   return function StudioComposerWithSidebar(props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(StudioSidebarRuntimePortal, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Resolved, { ...props })
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(StudioSidebarRuntimePortal, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Resolved, { ...props })
     ] });
   };
 }
@@ -6295,6 +6651,7 @@ var TimbalStudioShell = ({
   workforcesFetch,
   workforcesBaseUrl,
   brand,
+  logo,
   headerActions,
   headerStart,
   defaultCollapsed = false,
@@ -6305,7 +6662,7 @@ var TimbalStudioShell = ({
   components,
   ...chatProps
 }) => {
-  const reducedMotion = (0, import_react49.useReducedMotion)();
+  const reducedMotion = (0, import_react50.useReducedMotion)();
   const shouldFetchWorkforces = !workforceId && workforcesProp === void 0;
   const fetched = useWorkforces({
     enabled: shouldFetchWorkforces,
@@ -6313,36 +6670,36 @@ var TimbalStudioShell = ({
     baseUrl: workforcesBaseUrl
   });
   const workforces = workforcesProp ?? fetched.workforces;
-  const [internalSelected, setInternalSelected] = (0, import_react48.useState)(
+  const [internalSelected, setInternalSelected] = (0, import_react49.useState)(
     workforceId ?? ""
   );
-  (0, import_react48.useEffect)(() => {
+  (0, import_react49.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_react48.useState)(() => {
+  const [collapsed, setCollapsed] = (0, import_react49.useState)(() => {
     const persisted = readPersistedCollapsed2(persistKey);
     return persisted || defaultCollapsed;
   });
-  const [isMobile, setIsMobile] = (0, import_react48.useState)(() => {
+  const [isMobile, setIsMobile] = (0, import_react49.useState)(() => {
     if (typeof window === "undefined") return false;
     return window.innerWidth < mobileBreakpointPx;
   });
-  const [mobileSidebarOpen, setMobileSidebarOpen] = (0, import_react48.useState)(false);
-  (0, import_react48.useEffect)(() => {
+  const [mobileSidebarOpen, setMobileSidebarOpen] = (0, import_react49.useState)(false);
+  (0, import_react49.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_react48.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     if (!isMobile) setMobileSidebarOpen(false);
   }, [isMobile]);
-  (0, import_react48.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     if (!mobileSidebarOpen) return;
     const onKeyDown = (e) => {
       if (e.key === "Escape") setMobileSidebarOpen(false);
@@ -6366,35 +6723,36 @@ var TimbalStudioShell = ({
     layoutDirection
   );
   const desktopInsetPx = widthCollapsed ? SIDEBAR_INSET_PX_COLLAPSED : SIDEBAR_INSET_PX_EXPANDED;
-  const onCollapsedChange = (0, import_react48.useCallback)(
+  const onCollapsedChange = (0, import_react49.useCallback)(
     (next) => {
       setCollapsed(next);
       writePersistedCollapsed2(persistKey, next);
     },
     [persistKey]
   );
-  const handleSelectWorkforce = (0, import_react48.useCallback)(
+  const handleSelectWorkforce = (0, import_react49.useCallback)(
     (id) => {
       if (!workforceId) setInternalSelected(id);
       if (isMobile) setMobileSidebarOpen(false);
     },
     [workforceId, isMobile]
   );
-  const sidebarContext = (0, import_react48.useMemo)(
+  const sidebarContext = (0, import_react49.useMemo)(
     () => ({
       collapsed: effectiveCollapsed,
       isMobile,
       isCollapsedRail,
-      iconOnlyLayout
+      iconOnlyLayout,
+      closeMobile: () => setMobileSidebarOpen(false)
     }),
     [effectiveCollapsed, isMobile, isCollapsedRail, iconOnlyLayout]
   );
-  const resolvedComponents = (0, import_react48.useMemo)(() => {
+  const resolvedComponents = (0, import_react49.useMemo)(() => {
     const next = { Welcome: StudioWelcome, ...components };
     next.Composer = makeComposerWithPortal(components?.Composer);
     return next;
   }, [components]);
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(StudioSidebarContext.Provider, { value: sidebarContext, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(StudioSidebarContext.Provider, { value: sidebarContext, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
     "div",
     {
       className: cn(
@@ -6403,14 +6761,14 @@ var TimbalStudioShell = ({
       ),
       style: studioChromeShellStyle,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           "div",
           {
             className: "pointer-events-none absolute inset-0 z-0 bg-background",
             "aria-hidden": true
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           "div",
           {
             className: cn(
@@ -6420,14 +6778,14 @@ var TimbalStudioShell = ({
             "aria-hidden": true
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           StudioSidebarBackdrop,
           {
             open: isMobile && mobileSidebarOpen,
             onClose: () => setMobileSidebarOpen(false)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           StudioSidebarPanel,
           {
             workforces,
@@ -6443,11 +6801,12 @@ var TimbalStudioShell = ({
             onEntriesBlurOutComplete,
             onPanelWidthComplete,
             brand,
+            logo,
             emptyCaption: sidebarEmptyCaption
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
-          import_react49.motion.header,
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+          import_react50.motion.header,
           {
             className: cn(
               "absolute top-0 right-0 z-40 flex items-start justify-between gap-2",
@@ -6458,7 +6817,7 @@ var TimbalStudioShell = ({
             animate: { left: isMobile ? 0 : desktopInsetPx },
             transition: layoutTransition,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
                 "div",
                 {
                   className: cn(
@@ -6466,7 +6825,7 @@ var TimbalStudioShell = ({
                     studioTopbarPillHeightClass
                   ),
                   children: [
-                    isMobile && !mobileSidebarOpen ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                    isMobile && !mobileSidebarOpen ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                       TimbalV2Button,
                       {
                         variant: "secondary",
@@ -6476,19 +6835,19 @@ var TimbalStudioShell = ({
                         onClick: () => setMobileSidebarOpen(true),
                         "aria-label": "Open menu",
                         "aria-expanded": false,
-                        children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_lucide_react13.Menu, { className: "size-4" })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react14.Menu, { className: "size-4" })
                       }
                     ) : null,
                     headerStart
                   ]
                 }
               ),
-              headerActions ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "flex shrink-0 items-center gap-1", children: headerActions }) : null
+              headerActions ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "flex shrink-0 items-center gap-1", children: headerActions }) : null
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-          import_react49.motion.main,
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+          import_react50.motion.main,
           {
             className: cn(
               "relative z-10 flex h-full min-w-0 flex-col",
@@ -6498,7 +6857,7 @@ var TimbalStudioShell = ({
             initial: false,
             animate: { paddingLeft: isMobile ? 12 : desktopInsetPx },
             transition: layoutTransition,
-            children: activeWorkforceId ? /* @__PURE__ */ (0, import_react50.createElement)(
+            children: activeWorkforceId ? /* @__PURE__ */ (0, import_react51.createElement)(
               TimbalChat,
               {
                 ...chatProps,
@@ -6517,9 +6876,9 @@ var TimbalStudioShell = ({
 };
 
 // src/studio/sidebar/mode-toggle.tsx
-var import_react51 = require("react");
-var import_lucide_react14 = require("lucide-react");
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_react52 = require("react");
+var import_lucide_react15 = require("lucide-react");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 function readStoredTheme() {
   if (typeof window === "undefined") return null;
   try {
@@ -6547,8 +6906,8 @@ var ModeToggle = ({
   label = "Toggle theme"
 }) => {
   const isControlled = theme !== void 0;
-  const [internalIsDark, setInternalIsDark] = (0, import_react51.useState)(false);
-  (0, import_react51.useLayoutEffect)(() => {
+  const [internalIsDark, setInternalIsDark] = (0, import_react52.useState)(false);
+  (0, import_react52.useLayoutEffect)(() => {
     if (isControlled) return;
     const stored = readStoredTheme();
     if (stored) {
@@ -6560,7 +6919,7 @@ var ModeToggle = ({
     setInternalIsDark(document.documentElement.classList.contains("dark"));
   }, [isControlled]);
   const isDark = isControlled ? theme === "dark" : internalIsDark;
-  const onClick = (0, import_react51.useCallback)(() => {
+  const onClick = (0, import_react52.useCallback)(() => {
     const next = isDark ? "light" : "dark";
     if (setTheme) {
       setTheme(next);
@@ -6571,7 +6930,7 @@ var ModeToggle = ({
     writeStoredTheme(isDarkNext ? "dark" : "light");
     setInternalIsDark(isDarkNext);
   }, [isDark, setTheme]);
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
     TimbalV2Button,
     {
       variant: "secondary",
@@ -6587,20 +6946,20 @@ var ModeToggle = ({
       "aria-label": label,
       title: label,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react14.Sun, { className: "size-3.5 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" }),
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react14.Moon, { className: "absolute size-3.5 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" }),
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "sr-only", children: label })
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react15.Sun, { className: "size-3.5 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" }),
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react15.Moon, { className: "absolute size-3.5 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" }),
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "sr-only", children: label })
       ]
     }
   );
 };
 
 // src/studio/mode-switch.tsx
-var import_react54 = require("react");
+var import_react55 = require("react");
 
 // src/ui/pill-segmented-tabs.tsx
-var import_react52 = require("react");
-var import_react53 = require("motion/react");
+var import_react53 = require("react");
+var import_react54 = 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";
@@ -6633,7 +6992,7 @@ var pillSegmentedActiveIndicatorClass = cn(
 );
 
 // src/ui/pill-segmented-tabs.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var PillTab = ({
   tabKey,
   label,
@@ -6644,10 +7003,10 @@ var PillTab = ({
   segmentClassName,
   animateIndicator
 }) => {
-  const handlePress = (0, import_react52.useCallback)(() => {
+  const handlePress = (0, import_react53.useCallback)(() => {
     if (!disabled) onSelect(tabKey);
   }, [disabled, onSelect, tabKey]);
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
     "button",
     {
       type: "button",
@@ -6660,15 +7019,15 @@ var PillTab = ({
         !disabled && (isActive ? "text-foreground" : "text-muted-foreground hover:text-foreground")
       ),
       children: [
-        isActive && animateIndicator ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-          import_react53.motion.div,
+        isActive && animateIndicator ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+          import_react54.motion.div,
           {
             layoutId,
             className: pillSegmentedActiveIndicatorClass,
             transition: { type: "spring", duration: 0.3, bounce: 0.15 }
           }
-        ) : isActive ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: pillSegmentedActiveIndicatorClass, "aria-hidden": true }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "relative z-10 whitespace-nowrap", children: label })
+        ) : isActive ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: pillSegmentedActiveIndicatorClass, "aria-hidden": true }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "relative z-10 whitespace-nowrap", children: label })
       ]
     }
   );
@@ -6682,13 +7041,13 @@ var PillSegmentedTabs = ({
   layoutId: layoutIdProp,
   "aria-label": ariaLabel
 }) => {
-  const reactId = (0, import_react52.useId)();
+  const reactId = (0, import_react53.useId)();
   const layoutId = layoutIdProp ?? `pill-segmented-${reactId.replace(/:/g, "")}`;
-  const reducedMotion = (0, import_react53.useReducedMotion)();
+  const reducedMotion = (0, import_react54.useReducedMotion)();
   const isFlush = trackVariant === "flush";
   const trackClass = isFlush ? pillSegmentedTrackFlushClass : pillSegmentedTrackClass;
   const segmentClassName = isFlush ? pillSegmentedFlushSegmentClass : pillSegmentedSegmentClass;
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { role: "group", "aria-label": ariaLabel, className: cn(trackClass, className), children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { role: "group", "aria-label": ariaLabel, className: cn(trackClass, className), children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     PillTab,
     {
       tabKey: tab.key,
@@ -6703,15 +7062,15 @@ var PillSegmentedTabs = ({
     tab.key
   )) });
 };
-var MemoPillSegmentedTabs = (0, import_react52.memo)(PillSegmentedTabs);
+var MemoPillSegmentedTabs = (0, import_react53.memo)(PillSegmentedTabs);
 
 // src/studio/mode-switch.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var STUDIO_NAV_MODE = {
   BUILD: "build",
   OPERATE: "operate"
 };
-var StudioModeSwitch = (0, import_react54.memo)(
+var StudioModeSwitch = (0, import_react55.memo)(
   function StudioModeSwitch2({
     value,
     onChange,
@@ -6720,14 +7079,14 @@ var StudioModeSwitch = (0, import_react54.memo)(
     manageLabel = "Manage",
     "aria-label": ariaLabel = "Studio mode"
   }) {
-    const tabs = (0, import_react54.useMemo)(
+    const tabs = (0, import_react55.useMemo)(
       () => [
         { key: STUDIO_NAV_MODE.BUILD, label: buildLabel },
         { key: STUDIO_NAV_MODE.OPERATE, label: manageLabel }
       ],
       [buildLabel, manageLabel]
     );
-    const handleChange = (0, import_react54.useCallback)(
+    const handleChange = (0, import_react55.useCallback)(
       (key) => {
         if (key === STUDIO_NAV_MODE.BUILD || key === STUDIO_NAV_MODE.OPERATE) {
           onChange(key);
@@ -6735,14 +7094,14 @@ var StudioModeSwitch = (0, import_react54.memo)(
       },
       [onChange]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
       "div",
       {
         "data-tour": "studio-mode-switch",
         "data-studio-chrome-align": "mode-switch",
         id: "studio-chrome-mode-switch",
         className,
-        children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
           PillSegmentedTabs,
           {
             value,