@timbal-ai/timbal-react 0.5.2 → 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(
-  "aui-composer-shell 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 },
@@ -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-background 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-transparent pt-2 pb-4 md:pb-6", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ScrollToBottomSlot, {}),
                   /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ComposerSlot, { placeholder: composerPlaceholder })
                 ] })
@@ -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)" },

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(
-  "aui-composer-shell 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 },
@@ -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-background 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-transparent pt-2 pb-4 md:pb-6", children: [
                   /* @__PURE__ */ jsx27(ScrollToBottomSlot, {}),
                   /* @__PURE__ */ jsx27(ComposerSlot, { placeholder: composerPlaceholder })
                 ] })
@@ -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)" },

package/dist/styles.css

@@ -460,11 +460,8 @@
  * Component fixes — baked in so consumers don't need overrides    *
  * =============================================================== */
 
-/* Opaque sticky footer so scrolled messages and the playground gradient do
-   not bleed through the composer. */
+/* Sticky footer stacks above scrolling messages; composer shell is opaque. */
 .aui-thread-viewport-footer {
-  background-color: var(--background) !important;
-  border-radius: 0 !important;
   isolation: isolate;
   z-index: 10;
 }

package/package.json

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