@timbal-ai/timbal-react 0.5.0 → 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"
@@ -3510,7 +3510,7 @@ var ComposerInput = ({
     import_react22.ComposerPrimitive.Input,
     {
       placeholder,
-      className: "aui-composer-input max-h-60 min-h-14 w-full resize-none bg-transparent px-3 pt-3 pb-1 text-sm outline-none placeholder:text-muted-foreground/70 focus-visible:ring-0",
+      className: "aui-composer-input max-h-60 min-h-14 w-full resize-none bg-composer-bg px-3 pt-3 pb-1 text-sm outline-none placeholder:text-muted-foreground/70 focus-visible:ring-0",
       rows: 1,
       autoFocus,
       "aria-label": "Message input",
@@ -3520,7 +3520,7 @@ var ComposerInput = ({
   );
 };
 var ComposerToolbar = ({ showAttachments, toolbar, sendTooltip }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "aui-composer-action-wrapper flex items-center justify-between gap-1 px-2.5 pb-2.5", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "aui-composer-action-wrapper relative z-[1] flex items-center justify-between gap-1 bg-composer-bg px-2.5 pb-2.5", children: [
     /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center gap-1", children: [
       showAttachments && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ComposerAddAttachment, {}),
       toolbar
@@ -3736,7 +3736,7 @@ var Thread = ({
             import_react26.ThreadPrimitive.Viewport,
             {
               turnAnchor: "bottom",
-              className: "aui-thread-viewport relative flex flex-1 flex-col overflow-x-auto overflow-y-scroll px-4 pt-4",
+              className: "aui-thread-viewport relative flex flex-1 flex-col overflow-x-auto overflow-y-scroll scroll-pb-4 px-4 pt-4",
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   WelcomeSlot,
@@ -3756,7 +3756,7 @@ var Thread = ({
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react26.ThreadPrimitive.ViewportFooter, { className: "aui-thread-viewport-footer sticky bottom-0 mx-auto mt-auto flex w-full max-w-(--thread-max-width) flex-col gap-4 overflow-visible bg-transparent 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 })
                 ] })
@@ -3865,7 +3865,7 @@ var AssistantMessage = () => {
           ),
           /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MessageError, {})
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "aui-assistant-message-footer mt-0 ml-1 flex", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(AssistantActionBar, {}) })
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "aui-assistant-message-footer mt-1 mb-3 ml-1 flex", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(AssistantActionBar, {}) })
       ]
     }
   );
@@ -3882,7 +3882,7 @@ var AssistantActionBar = () => {
     import_react26.ActionBarPrimitive.Root,
     {
       hideWhenRunning: true,
-      autohide: "not-last",
+      autohide: "never",
       className: "aui-assistant-action-bar-root flex items-center gap-0 bg-transparent px-0 py-0.5 text-muted-foreground/60",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react26.ActionBarPrimitive.Copy, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
@@ -3969,7 +3969,7 @@ var UserActionBar = () => {
     import_react26.ActionBarPrimitive.Root,
     {
       hideWhenRunning: true,
-      autohide: "not-last",
+      autohide: "never",
       className: "aui-user-action-bar-root flex flex-col items-end",
       children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react26.ActionBarPrimitive.Edit, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         TooltipIconButton,
@@ -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"
@@ -3432,7 +3432,7 @@ var ComposerInput = ({
     ComposerPrimitive2.Input,
     {
       placeholder,
-      className: "aui-composer-input max-h-60 min-h-14 w-full resize-none bg-transparent px-3 pt-3 pb-1 text-sm outline-none placeholder:text-muted-foreground/70 focus-visible:ring-0",
+      className: "aui-composer-input max-h-60 min-h-14 w-full resize-none bg-composer-bg px-3 pt-3 pb-1 text-sm outline-none placeholder:text-muted-foreground/70 focus-visible:ring-0",
       rows: 1,
       autoFocus,
       "aria-label": "Message input",
@@ -3442,7 +3442,7 @@ var ComposerInput = ({
   );
 };
 var ComposerToolbar = ({ showAttachments, toolbar, sendTooltip }) => {
-  return /* @__PURE__ */ jsxs13("div", { className: "aui-composer-action-wrapper flex items-center justify-between gap-1 px-2.5 pb-2.5", children: [
+  return /* @__PURE__ */ jsxs13("div", { className: "aui-composer-action-wrapper relative z-[1] flex items-center justify-between gap-1 bg-composer-bg px-2.5 pb-2.5", children: [
     /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-1", children: [
       showAttachments && /* @__PURE__ */ jsx25(ComposerAddAttachment, {}),
       toolbar
@@ -3662,7 +3662,7 @@ var Thread = ({
             ThreadPrimitive.Viewport,
             {
               turnAnchor: "bottom",
-              className: "aui-thread-viewport relative flex flex-1 flex-col overflow-x-auto overflow-y-scroll px-4 pt-4",
+              className: "aui-thread-viewport relative flex flex-1 flex-col overflow-x-auto overflow-y-scroll scroll-pb-4 px-4 pt-4",
               children: [
                 /* @__PURE__ */ jsx27(
                   WelcomeSlot,
@@ -3682,7 +3682,7 @@ var Thread = ({
                     }
                   }
                 ),
-                /* @__PURE__ */ jsxs15(ThreadPrimitive.ViewportFooter, { className: "aui-thread-viewport-footer sticky bottom-0 mx-auto mt-auto flex w-full max-w-(--thread-max-width) flex-col gap-4 overflow-visible bg-transparent 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 })
                 ] })
@@ -3791,7 +3791,7 @@ var AssistantMessage = () => {
           ),
           /* @__PURE__ */ jsx27(MessageError, {})
         ] }),
-        /* @__PURE__ */ jsx27("div", { className: "aui-assistant-message-footer mt-0 ml-1 flex", children: /* @__PURE__ */ jsx27(AssistantActionBar, {}) })
+        /* @__PURE__ */ jsx27("div", { className: "aui-assistant-message-footer mt-1 mb-3 ml-1 flex", children: /* @__PURE__ */ jsx27(AssistantActionBar, {}) })
       ]
     }
   );
@@ -3808,7 +3808,7 @@ var AssistantActionBar = () => {
     ActionBarPrimitive.Root,
     {
       hideWhenRunning: true,
-      autohide: "not-last",
+      autohide: "never",
       className: "aui-assistant-action-bar-root flex items-center gap-0 bg-transparent px-0 py-0.5 text-muted-foreground/60",
       children: [
         /* @__PURE__ */ jsx27(ActionBarPrimitive.Copy, { asChild: true, children: /* @__PURE__ */ jsxs15(
@@ -3895,7 +3895,7 @@ var UserActionBar = () => {
     ActionBarPrimitive.Root,
     {
       hideWhenRunning: true,
-      autohide: "not-last",
+      autohide: "never",
       className: "aui-user-action-bar-root flex flex-col items-end",
       children: /* @__PURE__ */ jsx27(ActionBarPrimitive.Edit, { asChild: true, children: /* @__PURE__ */ jsx27(
         TooltipIconButton,
@@ -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,11 +460,18 @@
  * 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.0",
+  "version": "0.5.2",
   "description": "React components and runtime for building Timbal chat UIs",
   "type": "module",
   "main": "dist/index.cjs",