@timbal-ai/timbal-react 0.6.0 → 0.7.0

package/dist/studio.d.cts

@@ -1,4 +1,4 @@
-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-C89Mgdaw.cjs';
 import { FC } from 'react';
 import './chat-CWtQWDtJ.cjs';
 import 'react/jsx-runtime';

package/dist/studio.d.ts

@@ -1,4 +1,4 @@
-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-BBmB3tl7.js';
 import { FC } from 'react';
 import './chat-CWtQWDtJ.js';
 import 'react/jsx-runtime';

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-7O5VY3TP.esm.js";
+import "./chunk-Z27GBSOT.esm.js";
+import "./chunk-N3PYVTY5.esm.js";
+import "./chunk-TLUF2RUL.esm.js";
+import "./chunk-TDIJHV4I.esm.js";
+import "./chunk-2XZ3S4OP.esm.js";
 export {
   ModeToggle,
   STUDIO_NAV_MODE,

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-BOizSp5h.d.ts → welcome-BBmB3tl7.d.ts}

@@ -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--80i_O0p.d.cts → welcome-C89Mgdaw.d.cts}

@@ -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.0",
+  "version": "0.7.0",
   "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

@@ -3,10 +3,17 @@
  *
  * - Skips pre-bundling so `dist/` updates are not stuck in `node_modules/.vite/deps`
  * - Watches the linked package `dist/` and triggers a full reload when it changes
+ *
+ * IMPORTANT: this is a no-op for normal npm installs. Excluding the package from
+ * `optimizeDeps` only makes sense when it is `file:`-linked (a symlink in
+ * `node_modules`). For published installs Vite must pre-bundle the package so its
+ * CJS-only transitive deps (e.g. `use-sync-external-store/shim` reached via
+ * `radix-ui` -> `@radix-ui/react-use-is-hydrated`) are converted to ESM instead of
+ * leaking to the browser.
  */
 import { createRequire } from "node:module";
+import fs from "node:fs";
 import path from "node:path";
-import { fileURLToPath } from "node:url";
 
 const TIMBAL_REACT_EXPORTS = [
   "@timbal-ai/timbal-react",
@@ -16,6 +23,36 @@ 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.
+ */
+const CJS_INTEROP_DEPS = [
+  "radix-ui",
+  "@radix-ui/react-use-is-hydrated",
+  "use-sync-external-store/shim",
+  "use-sync-external-store/shim/with-selector",
+  "zustand",
+];
+
 function resolveLinkedPackageRoot() {
   try {
     const require = createRequire(import.meta.url);
@@ -26,6 +63,28 @@ function resolveLinkedPackageRoot() {
   }
 }
 
+/**
+ * Only treat the install as "linked" when the `node_modules` entry is a symlink,
+ * i.e. installed via `file:../timbal-react` (or a workspace link). Normal npm
+ * installs are real directories and must be left to Vite's pre-bundler.
+ *
+ * @param {string} [root] consuming project root
+ */
+function isLinkedInstall(root) {
+  const base = root || process.cwd();
+  const entry = path.join(
+    base,
+    "node_modules",
+    "@timbal-ai",
+    "timbal-react",
+  );
+  try {
+    return fs.lstatSync(entry).isSymbolicLink();
+  } catch {
+    return false;
+  }
+}
+
 /** @returns {import('vite').Plugin} */
 export function timbalReactLocalDev() {
   /** @type {string | null} */
@@ -34,26 +93,53 @@ export function timbalReactLocalDev() {
   return {
     name: "timbal-react-local-dev",
     enforce: "pre",
-    config() {
+    config(config) {
+      if (!isLinkedInstall(config.root)) return {};
+
       const pkgRoot = resolveLinkedPackageRoot();
       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 (