@timbal-ai/timbal-react 0.5.1 → 0.5.2

package/dist/index.cjs

@@ -1866,7 +1866,7 @@ var studioTopbarPillHeightClass = "h-[var(--studio-chrome-pill-height)] min-h-[v
 var studioTopbarIconPillClass = "shrink-0 flex-none size-[var(--studio-chrome-pill-height)] min-h-[var(--studio-chrome-pill-height)] min-w-[var(--studio-chrome-pill-height)]";
 var studioPlaygroundGradientClass = "bg-gradient-to-b from-playground-from via-playground-via to-playground-to";
 var studioComposeInputShellClass = cn(
-  "flex w-full flex-col rounded-2xl bg-composer-bg shadow-card-elevated outline-none",
+  "aui-composer-shell flex w-full flex-col rounded-2xl bg-composer-bg shadow-card-elevated outline-none",
   "border border-composer-border",
   "transition-[box-shadow,border-color]",
   "focus-within:border-composer-border-focus focus-within:ring-2 focus-within:ring-foreground/5"
@@ -3756,7 +3756,7 @@ var Thread = ({
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react26.ThreadPrimitive.ViewportFooter, { className: "aui-thread-viewport-footer sticky bottom-0 z-10 mx-auto mt-auto flex w-full max-w-(--thread-max-width) isolate flex-col gap-4 bg-transparent pt-2 pb-4 md:pb-6", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react26.ThreadPrimitive.ViewportFooter, { className: "aui-thread-viewport-footer sticky bottom-0 z-10 mx-auto mt-auto flex w-full max-w-(--thread-max-width) isolate flex-col gap-4 bg-background pt-2 pb-4 md:pb-6", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ScrollToBottomSlot, {}),
                   /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ComposerSlot, { placeholder: composerPlaceholder })
                 ] })
@@ -4252,7 +4252,7 @@ var TimbalChatShell = ({
             workforceId: effectiveId,
             baseUrl,
             fetch: fetch2,
-            className: "relative z-10 min-h-0 flex-1 bg-transparent",
+            className: "relative z-10 min-h-0 flex-1",
             ...chatProps
           },
           effectiveId
@@ -5539,7 +5539,7 @@ var TimbalStudioShell = ({
                 key: activeWorkforceId,
                 welcome,
                 components: resolvedComponents,
-                className: cn("min-h-0 flex-1 bg-transparent", chatProps.className)
+                className: cn("min-h-0 flex-1", chatProps.className)
               }
             ) : null
           }

package/dist/index.esm.js

@@ -1776,7 +1776,7 @@ var studioTopbarPillHeightClass = "h-[var(--studio-chrome-pill-height)] min-h-[v
 var studioTopbarIconPillClass = "shrink-0 flex-none size-[var(--studio-chrome-pill-height)] min-h-[var(--studio-chrome-pill-height)] min-w-[var(--studio-chrome-pill-height)]";
 var studioPlaygroundGradientClass = "bg-gradient-to-b from-playground-from via-playground-via to-playground-to";
 var studioComposeInputShellClass = cn(
-  "flex w-full flex-col rounded-2xl bg-composer-bg shadow-card-elevated outline-none",
+  "aui-composer-shell flex w-full flex-col rounded-2xl bg-composer-bg shadow-card-elevated outline-none",
   "border border-composer-border",
   "transition-[box-shadow,border-color]",
   "focus-within:border-composer-border-focus focus-within:ring-2 focus-within:ring-foreground/5"
@@ -3682,7 +3682,7 @@ var Thread = ({
                     }
                   }
                 ),
-                /* @__PURE__ */ jsxs15(ThreadPrimitive.ViewportFooter, { className: "aui-thread-viewport-footer sticky bottom-0 z-10 mx-auto mt-auto flex w-full max-w-(--thread-max-width) isolate flex-col gap-4 bg-transparent pt-2 pb-4 md:pb-6", children: [
+                /* @__PURE__ */ jsxs15(ThreadPrimitive.ViewportFooter, { className: "aui-thread-viewport-footer sticky bottom-0 z-10 mx-auto mt-auto flex w-full max-w-(--thread-max-width) isolate flex-col gap-4 bg-background pt-2 pb-4 md:pb-6", children: [
                   /* @__PURE__ */ jsx27(ScrollToBottomSlot, {}),
                   /* @__PURE__ */ jsx27(ComposerSlot, { placeholder: composerPlaceholder })
                 ] })
@@ -4178,7 +4178,7 @@ var TimbalChatShell = ({
             workforceId: effectiveId,
             baseUrl,
             fetch: fetch2,
-            className: "relative z-10 min-h-0 flex-1 bg-transparent",
+            className: "relative z-10 min-h-0 flex-1",
             ...chatProps
           },
           effectiveId
@@ -5481,7 +5481,7 @@ var TimbalStudioShell = ({
                 key: activeWorkforceId,
                 welcome,
                 components: resolvedComponents,
-                className: cn("min-h-0 flex-1 bg-transparent", chatProps.className)
+                className: cn("min-h-0 flex-1", chatProps.className)
               }
             ) : null
           }

package/dist/styles.css

@@ -69,8 +69,8 @@
 
   /* Composer shell — opaque card with stronger focus border. */
   --composer-bg: oklch(1 0 0);
-  --composer-border: oklch(0.91 0.004 260 / 0.6);
-  --composer-border-focus: oklch(0.62 0.005 260 / 0.8);
+  --composer-border: oklch(0.91 0.004 260);
+  --composer-border-focus: oklch(0.62 0.005 260);
 
   /* User message bubble — neutral-200 on light, neutral-700 on dark. */
   --bubble-user: oklch(0.922 0 0);
@@ -460,18 +460,17 @@
  * Component fixes — baked in so consumers don't need overrides    *
  * =============================================================== */
 
-/* The thread viewport footer no longer paints its own background. The
-   thread root already paints bg-background, so the sticky footer must
-   stay transparent — otherwise a token mismatch surfaces as a coloured
-   strip behind the composer. */
+/* Opaque sticky footer so scrolled messages and the playground gradient do
+   not bleed through the composer. */
 .aui-thread-viewport-footer {
-  background: transparent !important;
+  background-color: var(--background) !important;
   border-radius: 0 !important;
   isolation: isolate;
   z-index: 10;
 }
 
 /* Scrolled assistant action bars must not show through the composer shell. */
+.aui-composer-shell,
 .aui-composer-input,
 .aui-composer-action-wrapper {
   background-color: var(--composer-bg);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@timbal-ai/timbal-react",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "React components and runtime for building Timbal chat UIs",
   "type": "module",
   "main": "dist/index.cjs",