@timbal-ai/timbal-react 1.5.0 → 1.6.0

package/dist/site.esm.js

@@ -1,315 +1,15 @@
 import {
-  cn
-} from "./chunk-EDEKQYSU.esm.js";
-
-// src/site/Reveal.tsx
-import * as React from "react";
-import { motion, useReducedMotion } from "motion/react";
-
-// src/site/easing.ts
-var EASE = {
-  /** Strong slow-out — the workhorse for entrances and reveals. */
-  out: [0.16, 1, 0.3, 1],
-  /** Symmetric in-out for loops and continuous motion. */
-  inOut: [0.65, 0, 0.35, 1],
-  /** Gentle in-out, good for parallax / large translations. */
-  soft: [0.4, 0, 0.2, 1]
-};
-var DURATION = {
-  fast: 0.4,
-  base: 0.7,
-  slow: 1.1
-};
-var SPRING = {
-  /** Tight, responsive follow. */
-  snappy: { stiffness: 350, damping: 30, mass: 0.4 },
-  /** Looser, more elastic follow. */
-  smooth: { stiffness: 150, damping: 20, mass: 0.6 }
-};
-
-// src/site/Reveal.tsx
-import { jsx } from "react/jsx-runtime";
-function hidden(variant, distance) {
-  switch (variant) {
-    case "fade":
-      return { opacity: 0 };
-    case "fade-up":
-      return { opacity: 0, y: distance };
-    case "fade-down":
-      return { opacity: 0, y: -distance };
-    case "fade-left":
-      return { opacity: 0, x: distance };
-    case "fade-right":
-      return { opacity: 0, x: -distance };
-    case "blur":
-      return { opacity: 0, filter: "blur(12px)" };
-    case "scale":
-      return { opacity: 0, scale: 0.94 };
-    case "mask-up":
-      return { y: "110%" };
-  }
-}
-function shown(variant) {
-  if (variant === "mask-up") return { y: "0%" };
-  if (variant === "blur") return { opacity: 1, filter: "blur(0px)" };
-  if (variant === "scale") return { opacity: 1, scale: 1 };
-  return { opacity: 1, x: 0, y: 0 };
-}
-var Reveal = React.forwardRef(function Reveal2({
-  variant = "fade-up",
-  delay = 0,
-  duration = DURATION.base,
-  distance = 28,
-  amount = 0.3,
-  repeat = false,
-  as = "div",
-  className,
-  children,
-  ...rest
-}, ref) {
-  const reduce = useReducedMotion();
-  const isMask = variant === "mask-up";
-  if (reduce) {
-    const Tag = as;
-    return /* @__PURE__ */ jsx(Tag, { ref, className: cn(isMask && "overflow-hidden", className), ...rest, children });
-  }
-  const variants = {
-    hidden: hidden(variant, distance),
-    shown: shown(variant)
-  };
-  const MotionTag = motion[as] ?? motion.div;
-  const inner = /* @__PURE__ */ jsx(
-    MotionTag,
-    {
-      ref,
-      className,
-      variants,
-      initial: "hidden",
-      whileInView: "shown",
-      viewport: { once: !repeat, amount },
-      transition: { duration, delay, ease: EASE.out },
-      ...rest,
-      children
-    }
-  );
-  if (isMask) {
-    return /* @__PURE__ */ jsx("span", { className: "block overflow-hidden", children: inner });
-  }
-  return inner;
-});
-
-// src/site/TextReveal.tsx
-import * as React2 from "react";
-import { motion as motion2, useReducedMotion as useReducedMotion2 } from "motion/react";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var tokenVariants = {
-  hidden: { y: "115%" },
-  shown: { y: "0%" }
-};
-function TextReveal({
-  children,
-  splitBy = "words",
-  stagger = 0.06,
-  delay = 0,
-  duration = DURATION.base,
-  repeat = false,
-  amount = 0.4,
-  as = "span",
-  className,
-  ...rest
-}) {
-  const reduce = useReducedMotion2();
-  const Tag = as;
-  const tokens = React2.useMemo(() => {
-    if (splitBy === "lines") return children.split("\n");
-    return children.split(/(\s+)/).filter((t) => t.length > 0);
-  }, [children, splitBy]);
-  if (reduce) {
-    return /* @__PURE__ */ jsx2(Tag, { className, ...rest, children });
-  }
-  const containerVariants = {
-    hidden: {},
-    shown: { transition: { staggerChildren: stagger, delayChildren: delay } }
-  };
-  return /* @__PURE__ */ jsx2(
-    motion2.span,
-    {
-      variants: containerVariants,
-      initial: "hidden",
-      whileInView: "shown",
-      viewport: { once: !repeat, amount },
-      className: cn(as === "span" ? "inline" : "block", className),
-      ...rest,
-      children: /* @__PURE__ */ jsx2(Tag, { className: as === "span" ? "inline" : "block", children: tokens.map(
-        (token, i) => /^\s+$/.test(token) && splitBy === "words" ? /* @__PURE__ */ jsx2("span", { children: " " }, i) : /* @__PURE__ */ jsx2(
-          "span",
-          {
-            className: cn(
-              "overflow-hidden",
-              splitBy === "lines" ? "block" : "inline-block align-bottom"
-            ),
-            children: /* @__PURE__ */ jsx2(
-              motion2.span,
-              {
-                className: "inline-block",
-                variants: tokenVariants,
-                transition: { duration, ease: EASE.out },
-                children: token
-              }
-            )
-          },
-          i
-        )
-      ) })
-    }
-  );
-}
-
-// src/site/Parallax.tsx
-import * as React3 from "react";
-import {
-  motion as motion3,
-  useReducedMotion as useReducedMotion3,
-  useScroll,
-  useSpring,
-  useTransform
-} from "motion/react";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var Parallax = React3.forwardRef(function Parallax2({ speed = 0.2, axis = "y", smooth = true, className, children, style, ...rest }, forwardedRef) {
-  const reduce = useReducedMotion3();
-  const innerRef = React3.useRef(null);
-  React3.useImperativeHandle(forwardedRef, () => innerRef.current);
-  const { scrollYProgress } = useScroll({
-    target: innerRef,
-    offset: ["start end", "end start"]
-  });
-  const range = 100 * speed;
-  const raw = useTransform(scrollYProgress, [0, 1], [range, -range]);
-  const smoothed = useSpring(raw, { stiffness: 120, damping: 30, mass: 0.4 });
-  const value = smooth ? smoothed : raw;
-  if (reduce) {
-    return /* @__PURE__ */ jsx3("div", { ref: innerRef, className, style, ...rest, children });
-  }
-  return /* @__PURE__ */ jsx3(
-    motion3.div,
-    {
-      ref: innerRef,
-      className: cn("will-change-transform", className),
-      style: { ...style, [axis]: value },
-      ...rest,
-      children
-    }
-  );
-});
-
-// src/site/Marquee.tsx
-import * as React4 from "react";
-import {
-  motion as motion4,
-  useAnimationFrame,
-  useMotionValue,
-  useReducedMotion as useReducedMotion4
-} from "motion/react";
-import { jsx as jsx4, jsxs } from "react/jsx-runtime";
-var Marquee = React4.forwardRef(function Marquee2({ speed = 60, direction = "left", pauseOnHover = true, gap = "3rem", className, children, ...rest }, ref) {
-  const reduce = useReducedMotion4();
-  const x = useMotionValue(0);
-  const setWidthRef = React4.useRef(0);
-  const groupRef = React4.useRef(null);
-  const [paused, setPaused] = React4.useState(false);
-  React4.useEffect(() => {
-    const el = groupRef.current;
-    if (!el) return;
-    const measure = () => {
-      const gapPx = parseFloat(getComputedStyle(el.parentElement).columnGap || "0") || 0;
-      setWidthRef.current = el.offsetWidth + gapPx;
-    };
-    measure();
-    const ro = new ResizeObserver(measure);
-    ro.observe(el);
-    return () => ro.disconnect();
-  }, []);
-  useAnimationFrame((_, delta) => {
-    if (reduce || paused || setWidthRef.current === 0) return;
-    const dir = direction === "left" ? -1 : 1;
-    const moveBy = speed * delta / 1e3;
-    let next = x.get() + dir * moveBy;
-    const w = setWidthRef.current;
-    if (next <= -w) next += w;
-    else if (next >= w) next -= w;
-    x.set(next);
-  });
-  if (reduce) {
-    return /* @__PURE__ */ jsx4(
-      "div",
-      {
-        ref,
-        className: cn("flex w-full items-center overflow-x-auto", className),
-        style: { columnGap: gap },
-        ...rest,
-        children
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx4(
-    "div",
-    {
-      ref,
-      className: cn("w-full overflow-hidden", className),
-      onMouseEnter: pauseOnHover ? () => setPaused(true) : void 0,
-      onMouseLeave: pauseOnHover ? () => setPaused(false) : void 0,
-      ...rest,
-      children: /* @__PURE__ */ jsxs(motion4.div, { className: "flex w-max flex-nowrap items-center", style: { x, columnGap: gap }, children: [
-        /* @__PURE__ */ jsx4("div", { ref: groupRef, className: "flex flex-nowrap items-center", style: { columnGap: gap }, children }),
-        /* @__PURE__ */ jsx4("div", { className: "flex flex-nowrap items-center", style: { columnGap: gap }, "aria-hidden": true, children })
-      ] })
-    }
-  );
-});
-
-// src/site/Magnetic.tsx
-import * as React5 from "react";
-import { motion as motion5, useMotionValue as useMotionValue2, useReducedMotion as useReducedMotion5, useSpring as useSpring2 } from "motion/react";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var Magnetic = React5.forwardRef(function Magnetic2({ strength = 0.35, max = 24, spring = "snappy", className, children, ...rest }, forwardedRef) {
-  const reduce = useReducedMotion5();
-  const innerRef = React5.useRef(null);
-  React5.useImperativeHandle(forwardedRef, () => innerRef.current);
-  const mvx = useMotionValue2(0);
-  const mvy = useMotionValue2(0);
-  const x = useSpring2(mvx, SPRING[spring]);
-  const y = useSpring2(mvy, SPRING[spring]);
-  const clamp = (v) => Math.max(-max, Math.min(max, v));
-  function handleMove(e) {
-    if (reduce) return;
-    const el = innerRef.current;
-    if (!el) return;
-    const rect = el.getBoundingClientRect();
-    const cx = rect.left + rect.width / 2;
-    const cy = rect.top + rect.height / 2;
-    mvx.set(clamp((e.clientX - cx) * strength));
-    mvy.set(clamp((e.clientY - cy) * strength));
-  }
-  function reset() {
-    mvx.set(0);
-    mvy.set(0);
-  }
-  if (reduce) {
-    return /* @__PURE__ */ jsx5("div", { ref: innerRef, className: cn("inline-block", className), ...rest, children });
-  }
-  return /* @__PURE__ */ jsx5(
-    motion5.div,
-    {
-      ref: innerRef,
-      className: cn("inline-block", className),
-      style: { x, y },
-      onMouseMove: handleMove,
-      onMouseLeave: reset,
-      ...rest,
-      children
-    }
-  );
-});
+  DURATION,
+  EASE,
+  Magnetic,
+  Marquee,
+  Parallax,
+  Reveal,
+  SITE_AGENT_INSTRUCTIONS,
+  SPRING,
+  TextReveal
+} from "./chunk-JJOO4PR5.esm.js";
+import "./chunk-EDEKQYSU.esm.js";
 export {
   DURATION,
   EASE,
@@ -317,6 +17,7 @@ export {
   Marquee,
   Parallax,
   Reveal,
+  SITE_AGENT_INSTRUCTIONS,
   SPRING,
   TextReveal
 };

package/dist/studio.cjs

@@ -980,22 +980,22 @@ var TIMBAL_V2_MODAL_SURFACE = cn(
 );
 var TIMBAL_V2_PRIMARY_GRADIENT = "bg-gradient-to-b from-primary-fill-from to-primary-fill-to";
 var TIMBAL_V2_SIZE_HEIGHT = {
-  xs: "min-h-8 h-8",
-  sm: "min-h-9 h-9",
-  md: "min-h-10 h-10",
-  lg: "min-h-11 h-11"
+  xs: "min-h-7 h-7",
+  sm: "min-h-8 h-8",
+  md: "min-h-9 h-9",
+  lg: "min-h-10 h-10"
 };
 var TIMBAL_V2_SIZE_ICON = {
-  xs: "min-h-8 min-w-8 size-8",
+  xs: "min-h-7 min-w-7 size-7",
   sm: "min-h-8 min-w-8 size-8",
-  md: "min-h-10 min-w-10 size-10",
-  lg: "min-h-11 min-w-11 size-11"
+  md: "min-h-9 min-w-9 size-9",
+  lg: "min-h-10 min-w-10 size-10"
 };
 var TIMBAL_V2_SIZE_LABEL_PX = {
-  xs: "px-3",
-  sm: "px-4",
-  md: "px-5",
-  lg: "px-6"
+  xs: "px-2.5",
+  sm: "px-3",
+  md: "px-3.5",
+  lg: "px-4.5"
 };
 var TIMBAL_V2_FILL = {
   primary: [
@@ -1157,7 +1157,7 @@ function DialogContent({
         "data-slot": "dialog-content",
         className: cn(
           TIMBAL_V2_MODAL_SURFACE,
-          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-[70] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-xl p-6 duration-200 outline-none sm:max-w-lg",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-[70] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-xl p-5 duration-200 outline-none sm:max-w-lg",
           className
         ),
         ...props,
@@ -1215,9 +1215,9 @@ function isBrandedVariant(variant) {
   return variant === "secondary" || variant === "primary" || variant === "chart";
 }
 var AVATAR_SIZE_CLASS = {
-  default: "size-8",
-  sm: "size-6",
-  lg: "size-10"
+  default: "size-7",
+  sm: "size-5",
+  lg: "size-9"
 };
 function Avatar({
   className,
@@ -3332,16 +3332,16 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
         )
       },
       size: {
-        xs: "h-8 gap-1 rounded-md px-2.5 text-xs",
-        sm: "h-9 gap-1.5 rounded-lg px-3 text-sm",
-        md: "h-10 gap-1.5 rounded-lg px-3.5 text-sm",
-        lg: "h-11 gap-2 rounded-lg px-4 text-base",
-        xl: "h-12 gap-2 rounded-lg px-5 text-base",
-        default: "h-10 gap-1.5 rounded-lg px-3.5 text-sm",
-        icon: "h-10 w-10 rounded-lg",
-        "icon-xs": "h-8 w-8 rounded-md",
-        "icon-sm": "h-9 w-9 rounded-lg",
-        "icon-lg": "h-11 w-11 rounded-lg"
+        xs: "h-7 gap-1 rounded-md px-2 text-xs",
+        sm: "h-8 gap-1 rounded-md px-2.5 text-xs",
+        md: "h-9 gap-1.5 rounded-lg px-3 text-sm",
+        lg: "h-10 gap-1.5 rounded-lg px-3.5 text-sm",
+        xl: "h-11 gap-2 rounded-lg px-4 text-base",
+        default: "h-9 gap-1.5 rounded-lg px-3 text-sm",
+        icon: "h-9 w-9 rounded-lg",
+        "icon-xs": "h-7 w-7 rounded-md",
+        "icon-sm": "h-8 w-8 rounded-md",
+        "icon-lg": "h-10 w-10 rounded-lg"
       },
       shape: {
         pill: "rounded-full!",
@@ -3598,7 +3598,7 @@ var BadgeNode = ({ node }) => {
     "span",
     {
       className: cn(
-        "aui-ui-badge inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium",
+        "aui-ui-badge inline-flex w-fit shrink-0 items-center rounded-full px-2 py-0.5 text-xs font-medium",
         BADGE_TONE[node.tone ?? "default"],
         node.className
       ),
@@ -5224,7 +5224,7 @@ var overlayListPanelClass = cn(
   overlaySurfaceClass,
   "overflow-hidden rounded-lg p-0 outline-hidden"
 );
-var overlayItemClass = "relative flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground";
+var overlayItemClass = "relative flex cursor-default items-center gap-2 rounded-md px-2 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground";
 
 // src/chat/workforce-selector.tsx
 var import_jsx_runtime38 = require("react/jsx-runtime");
@@ -5349,8 +5349,8 @@ var SIDEBAR_MOBILE_PX = 272;
 var SIDEBAR_GAP_PX = 12;
 var SIDEBAR_CONTENT_GAP_PX = 8;
 var TOPBAR_GAP_PX = 8;
-var TOPBAR_HEIGHT_PX = 48;
-var PILL_HEIGHT_PX = 40;
+var TOPBAR_HEIGHT_PX = 44;
+var PILL_HEIGHT_PX = 36;
 var SIDEBAR_INSET_PX_EXPANDED = SIDEBAR_GAP_PX + SIDEBAR_WIDTH_PX + SIDEBAR_CONTENT_GAP_PX;
 var SIDEBAR_INSET_PX_COLLAPSED = SIDEBAR_GAP_PX + SIDEBAR_WIDTH_COLLAPSED_PX + SIDEBAR_CONTENT_GAP_PX;
 var px = (n) => `${n / 16}rem`;
@@ -6978,10 +6978,10 @@ var pillSegmentedTrackFlushClass = cn(
   "h-[var(--studio-chrome-pill-height)] items-center gap-0.5 overflow-visible p-0.5"
 );
 var pillSegmentedSegmentClass = cn(
-  "relative flex items-center gap-1.5 rounded-full px-4 py-1.5 text-xs font-normal transition-colors"
+  "relative flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-normal transition-colors"
 );
 var pillSegmentedFlushSegmentClass = cn(
-  "relative box-border inline-flex h-9 min-h-9 items-center justify-center gap-1.5 rounded-full px-3.5 py-0",
+  "relative box-border inline-flex h-8 min-h-8 items-center justify-center gap-1.5 rounded-full px-3 py-0",
   "text-sm font-normal leading-tight transition-colors"
 );
 var pillSegmentedActiveIndicatorClass = cn(

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-NXZlcihe.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-B00oH5Io.cjs';
 import { FC } from 'react';
-import './chat-ClmzWzCX.cjs';
+import './chat-DDsp-Vzz.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-DduQAC4K.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-DU-4NTjZ.js';
 import { FC } from 'react';
-import './chat-ClmzWzCX.js';
+import './chat-DDsp-Vzz.js';
 import 'react/jsx-runtime';
 import '@assistant-ui/react';
 import '@timbal-ai/timbal-sdk';

package/dist/studio.esm.js

@@ -8,13 +8,13 @@ import {
   TimbalChatShell,
   TimbalMark,
   TimbalStudioShell
-} from "./chunk-WMKPT5BV.esm.js";
-import "./chunk-QIABF4KB.esm.js";
-import "./chunk-JYDJRGDE.esm.js";
-import "./chunk-IGHBLJV3.esm.js";
-import "./chunk-TZI3ID3C.esm.js";
-import "./chunk-ZNYAETFD.esm.js";
-import "./chunk-AZL2WANO.esm.js";
+} from "./chunk-HSL36SJ4.esm.js";
+import "./chunk-ELEY66OH.esm.js";
+import "./chunk-TMP7RIA7.esm.js";
+import "./chunk-WQIQW7EM.esm.js";
+import "./chunk-24B4I4XC.esm.js";
+import "./chunk-R4RQT2XQ.esm.js";
+import "./chunk-MBS7XHV2.esm.js";
 import "./chunk-EDEKQYSU.esm.js";
 export {
   ModeToggle,

package/dist/{timbal-v2-button-B7vPs7gg.d.ts → timbal-v2-button-DCAZNyUx.d.cts}

@@ -37,4 +37,4 @@ interface TimbalV2ButtonProps extends React.ComponentProps<"button"> {
  */
 declare const TimbalV2Button: React.ForwardRefExoticComponent<Omit<TimbalV2ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
-export { type TimbalV2ButtonProps as T, TimbalV2Button as a };
+export { TimbalV2Button as T, type TimbalV2ButtonProps as a };

package/dist/{timbal-v2-button-B7vPs7gg.d.cts → timbal-v2-button-DCAZNyUx.d.ts}

@@ -37,4 +37,4 @@ interface TimbalV2ButtonProps extends React.ComponentProps<"button"> {
  */
 declare const TimbalV2Button: React.ForwardRefExoticComponent<Omit<TimbalV2ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
-export { type TimbalV2ButtonProps as T, TimbalV2Button as a };
+export { TimbalV2Button as T, type TimbalV2ButtonProps as a };