@timbal-ai/timbal-react 0.6.1 → 0.7.1

package/dist/studio.d.cts

@@ -1,6 +1,6 @@
-export { M as ModeToggle, a as ModeToggleProps, b as ModeToggleTheme, S as STUDIO_NAV_MODE, c as StudioModeSwitch, d as StudioModeSwitchProps, e as StudioNavMode, f as StudioSidebar, g as StudioSidebarProps, h as StudioWelcome, i as StudioWelcomeProps, T as TimbalChatShell, j as TimbalChatShellProps, k as TimbalMark, l as TimbalMarkProps, m as TimbalStudioShell, n as TimbalStudioShellProps } from './welcome--80i_O0p.cjs';
+export { M as ModeToggle, a as ModeToggleProps, b as ModeToggleTheme, S as STUDIO_NAV_MODE, c as StudioModeSwitch, d as StudioModeSwitchProps, e as StudioNavMode, f as StudioSidebar, g as StudioSidebarProps, h as StudioWelcome, i as StudioWelcomeProps, T as TimbalChatShell, j as TimbalChatShellProps, k as TimbalMark, l as TimbalMarkProps, m as TimbalStudioShell, n as TimbalStudioShellProps } from './welcome-COOb05a5.cjs';
 import { FC } from 'react';
-import './chat-CWtQWDtJ.cjs';
+import './chat-Bed4FQSl.cjs';
 import 'react/jsx-runtime';
 import '@assistant-ui/react';
 import '@timbal-ai/timbal-sdk';

package/dist/studio.d.ts

@@ -1,6 +1,6 @@
-export { M as ModeToggle, a as ModeToggleProps, b as ModeToggleTheme, S as STUDIO_NAV_MODE, c as StudioModeSwitch, d as StudioModeSwitchProps, e as StudioNavMode, f as StudioSidebar, g as StudioSidebarProps, h as StudioWelcome, i as StudioWelcomeProps, T as TimbalChatShell, j as TimbalChatShellProps, k as TimbalMark, l as TimbalMarkProps, m as TimbalStudioShell, n as TimbalStudioShellProps } from './welcome-BOizSp5h.js';
+export { M as ModeToggle, a as ModeToggleProps, b as ModeToggleTheme, S as STUDIO_NAV_MODE, c as StudioModeSwitch, d as StudioModeSwitchProps, e as StudioNavMode, f as StudioSidebar, g as StudioSidebarProps, h as StudioWelcome, i as StudioWelcomeProps, T as TimbalChatShell, j as TimbalChatShellProps, k as TimbalMark, l as TimbalMarkProps, m as TimbalStudioShell, n as TimbalStudioShellProps } from './welcome-DE08m9ca.js';
 import { FC } from 'react';
-import './chat-CWtQWDtJ.js';
+import './chat-Bed4FQSl.js';
 import 'react/jsx-runtime';
 import '@assistant-ui/react';
 import '@timbal-ai/timbal-sdk';

package/dist/studio.esm.js

@@ -8,12 +8,12 @@ import {
   TimbalChatShell,
   TimbalMark,
   TimbalStudioShell
-} from "./chunk-OVHR7J3J.esm.js";
-import "./chunk-OFHLFNJH.esm.js";
-import "./chunk-WLTW56MC.esm.js";
-import "./chunk-YJQLLFKP.esm.js";
-import "./chunk-IYENDIRY.esm.js";
-import "./chunk-4TCJQSIX.esm.js";
+} from "./chunk-EQC5JEDZ.esm.js";
+import "./chunk-Z27GBSOT.esm.js";
+import "./chunk-3WCG6ZRL.esm.js";
+import "./chunk-RY3LB3JN.esm.js";
+import "./chunk-TDIJHV4I.esm.js";
+import "./chunk-2XZ3S4OP.esm.js";
 export {
   ModeToggle,
   STUDIO_NAV_MODE,

package/dist/styles.css

@@ -58,9 +58,11 @@
 
   /* Timbal extension tokens — keep light + dark in sync below */
 
-  /* Elevated surface gradient (cards, sidebar panel, secondary chrome). */
+  /* Elevated surface gradient (cards, sidebar panel, secondary chrome).
+     Opaque stops — keeps the signature vertical gradient with no alpha
+     bleed-through, so whatever sits behind the surface never shows through. */
   --elevated-from: oklch(1 0 0);
-  --elevated-to: oklch(0.985 0.002 260 / 0.7);
+  --elevated-to: oklch(0.985 0.002 260);
 
   /* Opaque modal/dialog gradient — same hue as elevated, no alpha bleed-through. */
   --modal-from: oklch(1 0 0);
@@ -181,8 +183,10 @@
   --sidebar-border: oklch(1 0 0 / 0.10);
   --sidebar-ring: oklch(0.55 0.01 260);
 
-  --elevated-from: oklch(1 0 0 / 0.05);
-  --elevated-to: oklch(1 0 0 / 0.025);
+  /* Opaque equivalents of the translucent white wash — preserves the elevated
+     gradient look while keeping the surface fully opaque (no bleed-through). */
+  --elevated-from: oklch(0.205 0.004 260);
+  --elevated-to: oklch(0.185 0.004 260);
 
   --modal-from: oklch(0.22 0.005 260);
   --modal-to: oklch(0.19 0.005 260);

package/dist/{timbal-v2-button-F4-z7m33.d.ts → timbal-v2-button-CNfdwGq4.d.cts}

@@ -22,7 +22,7 @@ interface TimbalV2ButtonProps extends React.ComponentProps<"button"> {
     isIconOnly?: boolean;
     isLoading?: boolean;
     fullWidth?: boolean;
-    /** `pill` (default) — full rounding; `rect` — `rounded-md` for shadcn-style buttons. */
+    /** Kept for API compatibility — all shapes render fully rounded (`rounded-full`). */
     shape?: "pill" | "rect";
     /**
      * When true, merges props onto the single child element (Radix Slot).

package/dist/{timbal-v2-button-F4-z7m33.d.cts → timbal-v2-button-CNfdwGq4.d.ts}

@@ -22,7 +22,7 @@ interface TimbalV2ButtonProps extends React.ComponentProps<"button"> {
     isIconOnly?: boolean;
     isLoading?: boolean;
     fullWidth?: boolean;
-    /** `pill` (default) — full rounding; `rect` — `rounded-md` for shadcn-style buttons. */
+    /** Kept for API compatibility — all shapes render fully rounded (`rounded-full`). */
     shape?: "pill" | "rect";
     /**
      * When true, merges props onto the single child element (Radix Slot).

package/dist/ui.cjs

@@ -156,6 +156,10 @@ var TIMBAL_V2_SWITCH_THUMB = cn(
   TIMBAL_V2_ELEVATED_GRADIENT,
   "border border-border/80 shadow-sm"
 );
+var TIMBAL_V2_ELEVATED_SURFACE = cn(
+  TIMBAL_V2_ELEVATED_GRADIENT,
+  "border border-border shadow-card"
+);
 var TIMBAL_V2_SECONDARY_CHROME = [
   TIMBAL_V2_ELEVATED_GRADIENT,
   "border border-border shadow-card",
@@ -163,6 +167,11 @@ var TIMBAL_V2_SECONDARY_CHROME = [
   "hover:from-secondary-fill-hover-from hover:to-secondary-fill-hover-to",
   "active:from-secondary-fill-active-from active:to-secondary-fill-active-to"
 ].join(" ");
+var TIMBAL_V2_LOGO_TILE = cn(
+  "bg-gradient-to-b from-white to-neutral-100",
+  "border border-neutral-200",
+  "shadow-[0_1px_2px_-0.5px_rgba(0,0,0,0.08)]"
+);
 
 // src/ui/timbal-v2-button.tsx
 var React = __toESM(require("react"), 1);
@@ -207,7 +216,7 @@ var TimbalV2Button = React.forwardRef(function TimbalV2Button2({
   isIconOnly = false,
   isLoading = false,
   fullWidth = false,
-  shape = "pill",
+  shape: _shape = "pill",
   asChild = false,
   className,
   disabled,
@@ -217,7 +226,7 @@ var TimbalV2Button = React.forwardRef(function TimbalV2Button2({
 }, ref) {
   const isDisabled = disabled || isLoading;
   const sizeClass = isIconOnly ? TIMBAL_V2_SIZE_ICON[size] : TIMBAL_V2_SIZE_HEIGHT[size];
-  const radiusClass = variant === "link" || variant === "ghost" ? "rounded-md" : shape === "rect" ? "rounded-md" : "rounded-full";
+  const radiusClass = "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",
@@ -347,7 +356,7 @@ function Button({
       "data-size": size,
       variant: v2Variant,
       size: v2Size,
-      shape: "rect",
+      shape: "pill",
       isIconOnly,
       asChild,
       className: cn(buttonVariants({ variant, size, className })),

package/dist/ui.d.cts

@@ -1,22 +1,11 @@
+export { B as Button } from './button-CIKzUrJI.cjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as React from 'react';
 import { ElementType, ReactNode, FC } from 'react';
-import { VariantProps } from 'class-variance-authority';
 import { Tooltip as Tooltip$1, Avatar as Avatar$1, Dialog as Dialog$1 } from 'radix-ui';
-export { a as TimbalV2Button } from './timbal-v2-button-F4-z7m33.cjs';
-
-/**
- * Layout-only variants for consumers that compose `buttonVariants` directly.
- * Fill / border / shadow come from `button-tokens` via `TimbalV2Button`.
- */
-declare const buttonVariants: (props?: ({
-    variant?: "secondary" | "ghost" | "destructive" | "link" | "default" | "outline" | null | undefined;
-    size?: "xs" | "sm" | "lg" | "default" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-}): react_jsx_runtime.JSX.Element;
+export { a as TimbalV2Button } from './timbal-v2-button-CNfdwGq4.cjs';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
 
 declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof Tooltip$1.Provider>): react_jsx_runtime.JSX.Element;
 declare function Tooltip({ ...props }: React.ComponentProps<typeof Tooltip$1.Root>): react_jsx_runtime.JSX.Element;
@@ -71,4 +60,4 @@ interface PillSegmentedTabsProps {
 declare const PillSegmentedTabs: FC<PillSegmentedTabsProps>;
 declare const MemoPillSegmentedTabs: React.NamedExoticComponent<PillSegmentedTabsProps>;
 
-export { Avatar, AvatarFallback, AvatarImage, Button, Dialog, DialogClose, DialogContent, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, MemoPillSegmentedTabs, type PillSegmentedTab, PillSegmentedTabs, type PillSegmentedTabsProps, Shimmer, type TextShimmerProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
+export { Avatar, AvatarFallback, AvatarImage, Dialog, DialogClose, DialogContent, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, MemoPillSegmentedTabs, type PillSegmentedTab, PillSegmentedTabs, type PillSegmentedTabsProps, Shimmer, type TextShimmerProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/ui.d.ts

@@ -1,22 +1,11 @@
+export { B as Button } from './button-CIKzUrJI.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as React from 'react';
 import { ElementType, ReactNode, FC } from 'react';
-import { VariantProps } from 'class-variance-authority';
 import { Tooltip as Tooltip$1, Avatar as Avatar$1, Dialog as Dialog$1 } from 'radix-ui';
-export { a as TimbalV2Button } from './timbal-v2-button-F4-z7m33.js';
-
-/**
- * Layout-only variants for consumers that compose `buttonVariants` directly.
- * Fill / border / shadow come from `button-tokens` via `TimbalV2Button`.
- */
-declare const buttonVariants: (props?: ({
-    variant?: "secondary" | "ghost" | "destructive" | "link" | "default" | "outline" | null | undefined;
-    size?: "xs" | "sm" | "lg" | "default" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-}): react_jsx_runtime.JSX.Element;
+export { a as TimbalV2Button } from './timbal-v2-button-CNfdwGq4.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
 
 declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof Tooltip$1.Provider>): react_jsx_runtime.JSX.Element;
 declare function Tooltip({ ...props }: React.ComponentProps<typeof Tooltip$1.Root>): react_jsx_runtime.JSX.Element;
@@ -71,4 +60,4 @@ interface PillSegmentedTabsProps {
 declare const PillSegmentedTabs: FC<PillSegmentedTabsProps>;
 declare const MemoPillSegmentedTabs: React.NamedExoticComponent<PillSegmentedTabsProps>;
 
-export { Avatar, AvatarFallback, AvatarImage, Button, Dialog, DialogClose, DialogContent, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, MemoPillSegmentedTabs, type PillSegmentedTab, PillSegmentedTabs, type PillSegmentedTabsProps, Shimmer, type TextShimmerProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
+export { Avatar, AvatarFallback, AvatarImage, Dialog, DialogClose, DialogContent, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, MemoPillSegmentedTabs, type PillSegmentedTab, PillSegmentedTabs, type PillSegmentedTabsProps, Shimmer, type TextShimmerProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/ui.esm.js

@@ -1,7 +1,7 @@
 import {
   MemoPillSegmentedTabs,
   PillSegmentedTabs
-} from "./chunk-IYENDIRY.esm.js";
+} from "./chunk-TDIJHV4I.esm.js";
 import {
   Avatar,
   AvatarFallback,
@@ -20,7 +20,7 @@ import {
   TooltipContent,
   TooltipProvider,
   TooltipTrigger
-} from "./chunk-4TCJQSIX.esm.js";
+} from "./chunk-2XZ3S4OP.esm.js";
 export {
   Avatar,
   AvatarFallback,

package/dist/{welcome--80i_O0p.d.cts → welcome-COOb05a5.d.cts}

@@ -1,5 +1,5 @@
 import { FC, ReactNode } from 'react';
-import { b as TimbalChatProps, u as ThreadWelcomeProps } from './chat-CWtQWDtJ.cjs';
+import { b as TimbalChatProps, u as ThreadWelcomeProps } from './chat-Bed4FQSl.cjs';
 import { WorkforceItem } from '@timbal-ai/timbal-sdk';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
@@ -151,9 +151,10 @@ interface ModeToggleProps {
  *
  * 1. Pass `theme` + `setTheme` (e.g. from `next-themes`'s `useTheme`).
  *    The component is then fully controlled.
- * 2. Omit both. The toggle reads the current state from `.dark` on
- *    `<html>` and flips it on click. Good enough for prototypes and
- *    cases where there is no theme manager.
+ * 2. Omit both. The toggle reads/writes `.dark` on `<html>` and persists
+ *    the choice to `localStorage` under `STORAGE_KEYS.theme`. For SSR or
+ *    zero flash on first paint, mirror that key in a blocking `<script>` in
+ *    `index.html` before your bundle loads.
  */
 declare const ModeToggle: FC<ModeToggleProps>;
 

package/dist/{welcome-BOizSp5h.d.ts → welcome-DE08m9ca.d.ts}

@@ -1,5 +1,5 @@
 import { FC, ReactNode } from 'react';
-import { b as TimbalChatProps, u as ThreadWelcomeProps } from './chat-CWtQWDtJ.js';
+import { b as TimbalChatProps, u as ThreadWelcomeProps } from './chat-Bed4FQSl.js';
 import { WorkforceItem } from '@timbal-ai/timbal-sdk';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
@@ -151,9 +151,10 @@ interface ModeToggleProps {
  *
  * 1. Pass `theme` + `setTheme` (e.g. from `next-themes`'s `useTheme`).
  *    The component is then fully controlled.
- * 2. Omit both. The toggle reads the current state from `.dark` on
- *    `<html>` and flips it on click. Good enough for prototypes and
- *    cases where there is no theme manager.
+ * 2. Omit both. The toggle reads/writes `.dark` on `<html>` and persists
+ *    the choice to `localStorage` under `STORAGE_KEYS.theme`. For SSR or
+ *    zero flash on first paint, mirror that key in a blocking `<script>` in
+ *    `index.html` before your bundle loads.
  */
 declare const ModeToggle: FC<ModeToggleProps>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@timbal-ai/timbal-react",
-  "version": "0.6.1",
+  "version": "0.7.1",
   "description": "React components and runtime for building Timbal chat and studio apps",
   "type": "module",
   "main": "dist/index.cjs",
@@ -43,6 +43,7 @@
     "vite",
     "scripts/dev-linked.mjs",
     "README.md",
+    "CHANGELOG.md",
     "LICENSE"
   ],
   "scripts": {

package/vite/local-dev.mjs

@@ -23,6 +23,24 @@ const TIMBAL_REACT_EXPORTS = [
   "@timbal-ai/timbal-react/app",
 ];
 
+/** Subpath → source entry (used when `dist/*.esm.js` is missing). */
+const SOURCE_ENTRIES = {
+  "@timbal-ai/timbal-react": "src/index.ts",
+  "@timbal-ai/timbal-react/chat": "src/chat.ts",
+  "@timbal-ai/timbal-react/studio": "src/studio.ts",
+  "@timbal-ai/timbal-react/ui": "src/ui.ts",
+  "@timbal-ai/timbal-react/app": "src/app.ts",
+  "@timbal-ai/timbal-react/styles.css": "src/styles.css",
+};
+
+function distIsBuilt(distDir) {
+  try {
+    return fs.statSync(path.join(distDir, "index.esm.js")).isFile();
+  } catch {
+    return false;
+  }
+}
+
 /**
  * CJS-only transitive deps that must be pre-bundled even when the package itself
  * is excluded, so their `useSyncExternalStore` named imports resolve as ESM.
@@ -82,22 +100,46 @@ export function timbalReactLocalDev() {
       if (!pkgRoot) return {};
 
       distDir = path.join(pkgRoot, "dist");
-      const distGlob = `${distDir.replace(/\\/g, "/")}/**`;
+      const built = distIsBuilt(distDir);
+      const srcDir = path.join(pkgRoot, "src");
+      const watchGlob = built
+        ? `${distDir.replace(/\\/g, "/")}/**`
+        : `${srcDir.replace(/\\/g, "/")}/**`;
+
+      if (!built) {
+        console.warn(
+          "[timbal-react] dist/ is missing (404 on *.esm.js) — aliasing to src/. " +
+            "Run `bun run build` in timbal-react for production-like dev, or `bun run example:app` from the repo root.",
+        );
+      }
+
+      /** @type {Record<string, string>} */
+      const alias = {};
+      if (!built) {
+        for (const [pkg, rel] of Object.entries(SOURCE_ENTRIES)) {
+          alias[pkg] = path.join(pkgRoot, rel);
+        }
+      }
 
       return {
+        resolve: Object.keys(alias).length ? { alias } : undefined,
         optimizeDeps: {
           exclude: TIMBAL_REACT_EXPORTS,
           include: CJS_INTEROP_DEPS,
         },
         server: {
           watch: {
-            ignored: ["**/.git/**", "**/node_modules/**", `!${distGlob}`],
+            ignored: ["**/.git/**", "**/node_modules/**", `!${watchGlob}`],
           },
         },
       };
     },
     handleHotUpdate({ file, server }) {
-      if (!distDir || !file.startsWith(distDir)) return;
+      if (!distDir) return;
+      const srcDir = path.join(path.dirname(distDir), "src");
+      const isDist = file.startsWith(distDir);
+      const isSrc = file.startsWith(srcDir);
+      if (!isDist && !isSrc) return;
 
       for (const mod of server.moduleGraph.idToModuleMap.values()) {
         if (