@timbal-ai/timbal-react 0.5.1 → 0.5.3

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 overflow-hidden 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"
@@ -3728,7 +3728,7 @@ var Thread = ({
         import_react26.ThreadPrimitive.Root,
         {
           className: cn(
-            "aui-root aui-thread-root @container flex h-full flex-col bg-background",
+            "aui-root aui-thread-root @container flex h-full flex-col bg-transparent",
             className
           ),
           style: { ["--thread-max-width"]: maxWidth },
@@ -4226,7 +4226,7 @@ var TimbalChatShell = ({
           "header",
           {
             className: cn(
-              "aui-chat-shell-header relative z-10 flex shrink-0 items-center justify-between px-4 pt-[var(--studio-topbar-gap)] pb-2",
+              "aui-chat-shell-header relative z-10 flex shrink-0 items-center justify-between bg-transparent px-4 pt-[var(--studio-topbar-gap)] pb-2",
               headerClassName
             ),
             style: { minHeight: "var(--studio-topbar-height)" },
@@ -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 overflow-hidden 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"
@@ -3654,7 +3654,7 @@ var Thread = ({
         ThreadPrimitive.Root,
         {
           className: cn(
-            "aui-root aui-thread-root @container flex h-full flex-col bg-background",
+            "aui-root aui-thread-root @container flex h-full flex-col bg-transparent",
             className
           ),
           style: { ["--thread-max-width"]: maxWidth },
@@ -4152,7 +4152,7 @@ var TimbalChatShell = ({
           "header",
           {
             className: cn(
-              "aui-chat-shell-header relative z-10 flex shrink-0 items-center justify-between px-4 pt-[var(--studio-topbar-gap)] pb-2",
+              "aui-chat-shell-header relative z-10 flex shrink-0 items-center justify-between bg-transparent px-4 pt-[var(--studio-topbar-gap)] pb-2",
               headerClassName
             ),
             style: { minHeight: "var(--studio-topbar-height)" },
@@ -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,14 @@
  * 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. */
+/* Sticky footer stacks above scrolling messages; composer shell is opaque. */
 .aui-thread-viewport-footer {
-  background: transparent !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.3",
   "description": "React components and runtime for building Timbal chat UIs",
   "type": "module",
   "main": "dist/index.cjs",