@timbal-ai/timbal-react 0.5.4 → 0.6.0

package/dist/ui.d.cts

@@ -0,0 +1,74 @@
+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;
+
+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;
+declare function TooltipTrigger({ ...props }: React.ComponentProps<typeof Tooltip$1.Trigger>): react_jsx_runtime.JSX.Element;
+declare function TooltipContent({ className, sideOffset, children, ...props }: React.ComponentProps<typeof Tooltip$1.Content>): react_jsx_runtime.JSX.Element;
+
+declare function Avatar({ className, size, ...props }: React.ComponentProps<typeof Avatar$1.Root> & {
+    size?: "default" | "sm" | "lg";
+}): react_jsx_runtime.JSX.Element;
+declare function AvatarImage({ className, ...props }: React.ComponentProps<typeof Avatar$1.Image>): react_jsx_runtime.JSX.Element;
+declare function AvatarFallback({ className, ...props }: React.ComponentProps<typeof Avatar$1.Fallback>): react_jsx_runtime.JSX.Element;
+
+declare function Dialog({ ...props }: React.ComponentProps<typeof Dialog$1.Root>): react_jsx_runtime.JSX.Element;
+declare function DialogTrigger({ ...props }: React.ComponentProps<typeof Dialog$1.Trigger>): react_jsx_runtime.JSX.Element;
+declare function DialogPortal({ ...props }: React.ComponentProps<typeof Dialog$1.Portal>): react_jsx_runtime.JSX.Element;
+declare function DialogClose({ ...props }: React.ComponentProps<typeof Dialog$1.Close>): react_jsx_runtime.JSX.Element;
+declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof Dialog$1.Overlay>): react_jsx_runtime.JSX.Element;
+declare function DialogContent({ className, children, showCloseButton, ...props }: React.ComponentProps<typeof Dialog$1.Content> & {
+    showCloseButton?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof Dialog$1.Title>): react_jsx_runtime.JSX.Element;
+
+interface TextShimmerProps {
+    children: string;
+    as?: ElementType;
+    className?: string;
+    duration?: number;
+    spread?: number;
+}
+declare const Shimmer: React.MemoExoticComponent<({ children, as: Component, className, duration, spread, }: TextShimmerProps) => react_jsx_runtime.JSX.Element>;
+
+interface PillSegmentedTab {
+    key: string;
+    label: ReactNode;
+    disabled?: boolean;
+}
+interface PillSegmentedTabsProps {
+    value: string;
+    onChange: (key: string) => void;
+    tabs: PillSegmentedTab[];
+    className?: string;
+    /** `flush` — Studio topbar / dashboard tabs (Build/Manage). */
+    trackVariant?: "default" | "flush";
+    /** Unique per instance when multiple controls share a page (motion layout). */
+    layoutId?: string;
+    "aria-label"?: string;
+}
+/**
+ * Pill-in-pill segmented control — same visual language as timbal-platform
+ * `WorkshopPillSegmentedTabs` (Build/Manage, Home Builder tabs).
+ */
+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 };

package/dist/ui.d.ts

@@ -0,0 +1,74 @@
+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;
+
+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;
+declare function TooltipTrigger({ ...props }: React.ComponentProps<typeof Tooltip$1.Trigger>): react_jsx_runtime.JSX.Element;
+declare function TooltipContent({ className, sideOffset, children, ...props }: React.ComponentProps<typeof Tooltip$1.Content>): react_jsx_runtime.JSX.Element;
+
+declare function Avatar({ className, size, ...props }: React.ComponentProps<typeof Avatar$1.Root> & {
+    size?: "default" | "sm" | "lg";
+}): react_jsx_runtime.JSX.Element;
+declare function AvatarImage({ className, ...props }: React.ComponentProps<typeof Avatar$1.Image>): react_jsx_runtime.JSX.Element;
+declare function AvatarFallback({ className, ...props }: React.ComponentProps<typeof Avatar$1.Fallback>): react_jsx_runtime.JSX.Element;
+
+declare function Dialog({ ...props }: React.ComponentProps<typeof Dialog$1.Root>): react_jsx_runtime.JSX.Element;
+declare function DialogTrigger({ ...props }: React.ComponentProps<typeof Dialog$1.Trigger>): react_jsx_runtime.JSX.Element;
+declare function DialogPortal({ ...props }: React.ComponentProps<typeof Dialog$1.Portal>): react_jsx_runtime.JSX.Element;
+declare function DialogClose({ ...props }: React.ComponentProps<typeof Dialog$1.Close>): react_jsx_runtime.JSX.Element;
+declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof Dialog$1.Overlay>): react_jsx_runtime.JSX.Element;
+declare function DialogContent({ className, children, showCloseButton, ...props }: React.ComponentProps<typeof Dialog$1.Content> & {
+    showCloseButton?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof Dialog$1.Title>): react_jsx_runtime.JSX.Element;
+
+interface TextShimmerProps {
+    children: string;
+    as?: ElementType;
+    className?: string;
+    duration?: number;
+    spread?: number;
+}
+declare const Shimmer: React.MemoExoticComponent<({ children, as: Component, className, duration, spread, }: TextShimmerProps) => react_jsx_runtime.JSX.Element>;
+
+interface PillSegmentedTab {
+    key: string;
+    label: ReactNode;
+    disabled?: boolean;
+}
+interface PillSegmentedTabsProps {
+    value: string;
+    onChange: (key: string) => void;
+    tabs: PillSegmentedTab[];
+    className?: string;
+    /** `flush` — Studio topbar / dashboard tabs (Build/Manage). */
+    trackVariant?: "default" | "flush";
+    /** Unique per instance when multiple controls share a page (motion layout). */
+    layoutId?: string;
+    "aria-label"?: string;
+}
+/**
+ * Pill-in-pill segmented control — same visual language as timbal-platform
+ * `WorkshopPillSegmentedTabs` (Build/Manage, Home Builder tabs).
+ */
+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 };

package/dist/ui.esm.js

@@ -0,0 +1,44 @@
+import {
+  MemoPillSegmentedTabs,
+  PillSegmentedTabs
+} from "./chunk-IYENDIRY.esm.js";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Button,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+  Shimmer,
+  TimbalV2Button,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "./chunk-4TCJQSIX.esm.js";
+export {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Button,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+  MemoPillSegmentedTabs,
+  PillSegmentedTabs,
+  Shimmer,
+  TimbalV2Button,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+};

package/dist/welcome--80i_O0p.d.cts

@@ -0,0 +1,190 @@
+import { FC, ReactNode } from 'react';
+import { b as TimbalChatProps, u as ThreadWelcomeProps } from './chat-CWtQWDtJ.cjs';
+import { WorkforceItem } from '@timbal-ai/timbal-sdk';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface TimbalChatShellProps extends Omit<TimbalChatProps, "workforceId"> {
+    /**
+     * Pre-selected workforce id. When omitted, the shell fetches the workforce
+     * list from `{baseUrl}/workforce` and picks the first agent automatically.
+     */
+    workforceId?: string;
+    /** Branding rendered at the start of the header (logo, etc). */
+    brand?: ReactNode;
+    /** Extra content rendered at the end of the header (theme toggle, logout). */
+    headerActions?: ReactNode;
+    /** Hide the built-in workforce selector. Default: false. */
+    hideWorkforceSelector?: boolean;
+    /** Class for the outer flex container. */
+    className?: string;
+    /** Class for the header bar. */
+    headerClassName?: string;
+}
+/**
+ * Drop-in shell that wraps `TimbalChat` with the Studio playground chrome:
+ * floating topbar with brand + workforce selector + actions, soft gradient
+ * background, and the chat thread filling the remaining vertical space.
+ *
+ * Falls back to picking the first available workforce when `workforceId`
+ * isn't supplied.
+ */
+declare const TimbalChatShell: FC<TimbalChatShellProps>;
+
+interface TimbalStudioShellProps extends Omit<TimbalChatProps, "workforceId"> {
+    /**
+     * Pin the chat to a specific workforce. When omitted, the shell fetches
+     * the workforce list via `useWorkforces()` and lets the sidebar drive
+     * selection.
+     */
+    workforceId?: string;
+    /**
+     * Pre-loaded workforce list. When omitted, the shell fetches it.
+     * Useful for stories / SSR / preview environments.
+     */
+    workforces?: WorkforceItem[];
+    /** Custom fetch for the workforce list (mock fetch in preview mode). */
+    workforcesFetch?: (url: string, options?: RequestInit) => Promise<Response>;
+    /** Base URL for the workforce list. Default: `/api`. */
+    workforcesBaseUrl?: string;
+    /** Brand mark rendered in the sidebar header. Default: `<TimbalMark />`. */
+    brand?: ReactNode;
+    /** Extra actions rendered at the right of the floating top bar. */
+    headerActions?: ReactNode;
+    /** Nodes rendered at the left of the floating top bar (after the menu button). */
+    headerStart?: ReactNode;
+    /** Initial collapse state when no persisted value exists. Default: false. */
+    defaultCollapsed?: boolean;
+    /** localStorage key for persisting the collapse state. Default set. */
+    persistKey?: string | null;
+    /** Pixel breakpoint below which the sidebar becomes a drawer. Default 768. */
+    mobileBreakpointPx?: number;
+    /** Caption shown in the sidebar footer when no user is signed in. */
+    sidebarEmptyCaption?: string | null;
+}
+/**
+ * Opinionated Timbal studio layout — floating sidebar with workforce picker,
+ * top bar with optional mode toggle / actions, and a `<TimbalChat />` filling
+ * the rest. Manages collapse state, mobile drawer, and workforce selection
+ * out of the box. For more control compose `StudioSidebar` + `TimbalChat`
+ * directly.
+ */
+declare const TimbalStudioShell: FC<TimbalStudioShellProps>;
+
+interface StudioSidebarProps {
+    /**
+     * Workforces to display. When omitted, the sidebar fetches them via the
+     * shared `useWorkforces()` hook.
+     */
+    workforces?: WorkforceItem[];
+    selectedId?: string;
+    onSelect?: (id: string) => void;
+    /** Initial collapse state when no persisted value exists. Default: false. */
+    defaultCollapsed?: boolean;
+    /**
+     * localStorage key for persisting the collapse state. Pass `null` to
+     * disable persistence. Default: `"timbal-studio-sidebar-collapsed"`.
+     */
+    persistKey?: string | null;
+    /**
+     * Pixel breakpoint below which the sidebar becomes a drawer.
+     * Default: 768.
+     */
+    mobileBreakpointPx?: number;
+    /** Brand element rendered in the sidebar header. Default: `<TimbalMark />`. */
+    brand?: ReactNode;
+    /** Caption shown in the footer when no user is signed in. */
+    emptyCaption?: string | null;
+    /** External control over the mobile drawer (used by `TimbalStudioShell`). */
+    mobileOpen?: boolean;
+    onMobileOpenChange?: (open: boolean) => void;
+    /**
+     * Notified with the sidebar inset width (px) whenever collapse state changes.
+     * Use to inset a sibling main column. `AppShell` wires this automatically.
+     */
+    onInsetChange?: (insetPx: number) => void;
+}
+/**
+ * Floating, collapsible workforce sidebar. Manages its own collapse state
+ * (persisted to localStorage by default) and mobile drawer behaviour. For
+ * a fully composed shell with the chat already wired use
+ * `TimbalStudioShell`.
+ */
+declare const StudioSidebar: FC<StudioSidebarProps>;
+
+interface TimbalMarkProps {
+    className?: string;
+    /** Square size in CSS pixels (matches `--studio-chrome-pill-height` at 40). */
+    size?: number;
+    /**
+     * Override the symbol shown inside the shader. Defaults to the embedded
+     * Timbal mark — pass any image URL or data URI to brand the chat with
+     * your own logo while keeping the liquid-metal motion.
+     */
+    src?: string;
+}
+/**
+ * Timbal mark rendered with the Paper Design LiquidMetal shader.
+ *
+ * The Timbal symbol is embedded as a data URI so the library works without
+ * the consumer having to host the asset. Pass `src` to use a custom logo.
+ */
+declare function TimbalMark({ className, size, src, }: TimbalMarkProps): react_jsx_runtime.JSX.Element;
+
+type ModeToggleTheme = "light" | "dark" | "system";
+interface ModeToggleProps {
+    /**
+     * Current theme. When omitted, the toggle reads from / writes to the
+     * `.dark` class on `<html>` directly — useful for apps that don't have
+     * a theme manager yet.
+     */
+    theme?: ModeToggleTheme | string;
+    /** Called when the user clicks the toggle. */
+    setTheme?: (theme: ModeToggleTheme) => void;
+    className?: string;
+    /** ARIA label / tooltip. Default: "Toggle theme". */
+    label?: string;
+}
+/**
+ * Sun/moon theme toggle styled to sit in the studio top bar.
+ *
+ * Two integration modes:
+ *
+ * 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.
+ */
+declare const ModeToggle: FC<ModeToggleProps>;
+
+/** Studio navigation mode — mirrors timbal-platform `STUDIO_NAV_MODE`. */
+declare const STUDIO_NAV_MODE: {
+    readonly BUILD: "build";
+    readonly OPERATE: "operate";
+};
+type StudioNavMode = (typeof STUDIO_NAV_MODE)[keyof typeof STUDIO_NAV_MODE];
+interface StudioModeSwitchProps {
+    value: StudioNavMode;
+    onChange: (mode: StudioNavMode) => void;
+    className?: string;
+    buildLabel?: string;
+    manageLabel?: string;
+    "aria-label"?: string;
+}
+/**
+ * Build / Manage pill switch — same control as timbal-platform `StudioModeSwitch`.
+ */
+declare const StudioModeSwitch: FC<StudioModeSwitchProps>;
+
+interface StudioWelcomeProps extends ThreadWelcomeProps {
+    /** Override the brand mark rendered above the heading. */
+    icon?: ReactNode;
+}
+/**
+ * Welcome screen with the staggered Timbal mark + heading + subheading.
+ * Drop in as the `components.Welcome` slot of `<Thread />` /
+ * `<TimbalChat />` to replace the default sparkle illustration.
+ */
+declare const StudioWelcome: FC<StudioWelcomeProps>;
+
+export { ModeToggle as M, STUDIO_NAV_MODE as S, TimbalChatShell as T, type ModeToggleProps as a, type ModeToggleTheme as b, StudioModeSwitch as c, type StudioModeSwitchProps as d, type StudioNavMode as e, StudioSidebar as f, type StudioSidebarProps as g, StudioWelcome as h, type StudioWelcomeProps as i, type TimbalChatShellProps as j, TimbalMark as k, type TimbalMarkProps as l, TimbalStudioShell as m, type TimbalStudioShellProps as n };

package/dist/welcome-BOizSp5h.d.ts

@@ -0,0 +1,190 @@
+import { FC, ReactNode } from 'react';
+import { b as TimbalChatProps, u as ThreadWelcomeProps } from './chat-CWtQWDtJ.js';
+import { WorkforceItem } from '@timbal-ai/timbal-sdk';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface TimbalChatShellProps extends Omit<TimbalChatProps, "workforceId"> {
+    /**
+     * Pre-selected workforce id. When omitted, the shell fetches the workforce
+     * list from `{baseUrl}/workforce` and picks the first agent automatically.
+     */
+    workforceId?: string;
+    /** Branding rendered at the start of the header (logo, etc). */
+    brand?: ReactNode;
+    /** Extra content rendered at the end of the header (theme toggle, logout). */
+    headerActions?: ReactNode;
+    /** Hide the built-in workforce selector. Default: false. */
+    hideWorkforceSelector?: boolean;
+    /** Class for the outer flex container. */
+    className?: string;
+    /** Class for the header bar. */
+    headerClassName?: string;
+}
+/**
+ * Drop-in shell that wraps `TimbalChat` with the Studio playground chrome:
+ * floating topbar with brand + workforce selector + actions, soft gradient
+ * background, and the chat thread filling the remaining vertical space.
+ *
+ * Falls back to picking the first available workforce when `workforceId`
+ * isn't supplied.
+ */
+declare const TimbalChatShell: FC<TimbalChatShellProps>;
+
+interface TimbalStudioShellProps extends Omit<TimbalChatProps, "workforceId"> {
+    /**
+     * Pin the chat to a specific workforce. When omitted, the shell fetches
+     * the workforce list via `useWorkforces()` and lets the sidebar drive
+     * selection.
+     */
+    workforceId?: string;
+    /**
+     * Pre-loaded workforce list. When omitted, the shell fetches it.
+     * Useful for stories / SSR / preview environments.
+     */
+    workforces?: WorkforceItem[];
+    /** Custom fetch for the workforce list (mock fetch in preview mode). */
+    workforcesFetch?: (url: string, options?: RequestInit) => Promise<Response>;
+    /** Base URL for the workforce list. Default: `/api`. */
+    workforcesBaseUrl?: string;
+    /** Brand mark rendered in the sidebar header. Default: `<TimbalMark />`. */
+    brand?: ReactNode;
+    /** Extra actions rendered at the right of the floating top bar. */
+    headerActions?: ReactNode;
+    /** Nodes rendered at the left of the floating top bar (after the menu button). */
+    headerStart?: ReactNode;
+    /** Initial collapse state when no persisted value exists. Default: false. */
+    defaultCollapsed?: boolean;
+    /** localStorage key for persisting the collapse state. Default set. */
+    persistKey?: string | null;
+    /** Pixel breakpoint below which the sidebar becomes a drawer. Default 768. */
+    mobileBreakpointPx?: number;
+    /** Caption shown in the sidebar footer when no user is signed in. */
+    sidebarEmptyCaption?: string | null;
+}
+/**
+ * Opinionated Timbal studio layout — floating sidebar with workforce picker,
+ * top bar with optional mode toggle / actions, and a `<TimbalChat />` filling
+ * the rest. Manages collapse state, mobile drawer, and workforce selection
+ * out of the box. For more control compose `StudioSidebar` + `TimbalChat`
+ * directly.
+ */
+declare const TimbalStudioShell: FC<TimbalStudioShellProps>;
+
+interface StudioSidebarProps {
+    /**
+     * Workforces to display. When omitted, the sidebar fetches them via the
+     * shared `useWorkforces()` hook.
+     */
+    workforces?: WorkforceItem[];
+    selectedId?: string;
+    onSelect?: (id: string) => void;
+    /** Initial collapse state when no persisted value exists. Default: false. */
+    defaultCollapsed?: boolean;
+    /**
+     * localStorage key for persisting the collapse state. Pass `null` to
+     * disable persistence. Default: `"timbal-studio-sidebar-collapsed"`.
+     */
+    persistKey?: string | null;
+    /**
+     * Pixel breakpoint below which the sidebar becomes a drawer.
+     * Default: 768.
+     */
+    mobileBreakpointPx?: number;
+    /** Brand element rendered in the sidebar header. Default: `<TimbalMark />`. */
+    brand?: ReactNode;
+    /** Caption shown in the footer when no user is signed in. */
+    emptyCaption?: string | null;
+    /** External control over the mobile drawer (used by `TimbalStudioShell`). */
+    mobileOpen?: boolean;
+    onMobileOpenChange?: (open: boolean) => void;
+    /**
+     * Notified with the sidebar inset width (px) whenever collapse state changes.
+     * Use to inset a sibling main column. `AppShell` wires this automatically.
+     */
+    onInsetChange?: (insetPx: number) => void;
+}
+/**
+ * Floating, collapsible workforce sidebar. Manages its own collapse state
+ * (persisted to localStorage by default) and mobile drawer behaviour. For
+ * a fully composed shell with the chat already wired use
+ * `TimbalStudioShell`.
+ */
+declare const StudioSidebar: FC<StudioSidebarProps>;
+
+interface TimbalMarkProps {
+    className?: string;
+    /** Square size in CSS pixels (matches `--studio-chrome-pill-height` at 40). */
+    size?: number;
+    /**
+     * Override the symbol shown inside the shader. Defaults to the embedded
+     * Timbal mark — pass any image URL or data URI to brand the chat with
+     * your own logo while keeping the liquid-metal motion.
+     */
+    src?: string;
+}
+/**
+ * Timbal mark rendered with the Paper Design LiquidMetal shader.
+ *
+ * The Timbal symbol is embedded as a data URI so the library works without
+ * the consumer having to host the asset. Pass `src` to use a custom logo.
+ */
+declare function TimbalMark({ className, size, src, }: TimbalMarkProps): react_jsx_runtime.JSX.Element;
+
+type ModeToggleTheme = "light" | "dark" | "system";
+interface ModeToggleProps {
+    /**
+     * Current theme. When omitted, the toggle reads from / writes to the
+     * `.dark` class on `<html>` directly — useful for apps that don't have
+     * a theme manager yet.
+     */
+    theme?: ModeToggleTheme | string;
+    /** Called when the user clicks the toggle. */
+    setTheme?: (theme: ModeToggleTheme) => void;
+    className?: string;
+    /** ARIA label / tooltip. Default: "Toggle theme". */
+    label?: string;
+}
+/**
+ * Sun/moon theme toggle styled to sit in the studio top bar.
+ *
+ * Two integration modes:
+ *
+ * 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.
+ */
+declare const ModeToggle: FC<ModeToggleProps>;
+
+/** Studio navigation mode — mirrors timbal-platform `STUDIO_NAV_MODE`. */
+declare const STUDIO_NAV_MODE: {
+    readonly BUILD: "build";
+    readonly OPERATE: "operate";
+};
+type StudioNavMode = (typeof STUDIO_NAV_MODE)[keyof typeof STUDIO_NAV_MODE];
+interface StudioModeSwitchProps {
+    value: StudioNavMode;
+    onChange: (mode: StudioNavMode) => void;
+    className?: string;
+    buildLabel?: string;
+    manageLabel?: string;
+    "aria-label"?: string;
+}
+/**
+ * Build / Manage pill switch — same control as timbal-platform `StudioModeSwitch`.
+ */
+declare const StudioModeSwitch: FC<StudioModeSwitchProps>;
+
+interface StudioWelcomeProps extends ThreadWelcomeProps {
+    /** Override the brand mark rendered above the heading. */
+    icon?: ReactNode;
+}
+/**
+ * Welcome screen with the staggered Timbal mark + heading + subheading.
+ * Drop in as the `components.Welcome` slot of `<Thread />` /
+ * `<TimbalChat />` to replace the default sparkle illustration.
+ */
+declare const StudioWelcome: FC<StudioWelcomeProps>;
+
+export { ModeToggle as M, STUDIO_NAV_MODE as S, TimbalChatShell as T, type ModeToggleProps as a, type ModeToggleTheme as b, StudioModeSwitch as c, type StudioModeSwitchProps as d, type StudioNavMode as e, StudioSidebar as f, type StudioSidebarProps as g, StudioWelcome as h, type StudioWelcomeProps as i, type TimbalChatShellProps as j, TimbalMark as k, type TimbalMarkProps as l, TimbalStudioShell as m, type TimbalStudioShellProps as n };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@timbal-ai/timbal-react",
-  "version": "0.5.4",
-  "description": "React components and runtime for building Timbal chat UIs",
+  "version": "0.6.0",
+  "description": "React components and runtime for building Timbal chat and studio apps",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.esm.js",
@@ -12,10 +12,36 @@
       "import": "./dist/index.esm.js",
       "require": "./dist/index.cjs"
     },
-    "./styles.css": "./dist/styles.css"
+    "./chat": {
+      "types": "./dist/chat.d.ts",
+      "import": "./dist/chat.esm.js",
+      "require": "./dist/chat.cjs"
+    },
+    "./studio": {
+      "types": "./dist/studio.d.ts",
+      "import": "./dist/studio.esm.js",
+      "require": "./dist/studio.cjs"
+    },
+    "./ui": {
+      "types": "./dist/ui.d.ts",
+      "import": "./dist/ui.esm.js",
+      "require": "./dist/ui.cjs"
+    },
+    "./app": {
+      "types": "./dist/app.d.ts",
+      "import": "./dist/app.esm.js",
+      "require": "./dist/app.cjs"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./vite": {
+      "types": "./vite/local-dev.d.ts",
+      "import": "./vite/local-dev.mjs"
+    }
   },
   "files": [
     "dist",
+    "vite",
+    "scripts/dev-linked.mjs",
     "README.md",
     "LICENSE"
   ],
@@ -26,6 +52,11 @@
     "test": "bun test",
     "test:watch": "bun test --watch",
     "typecheck": "tsc --noEmit",
+    "check:boundaries": "depcruise src --config .dependency-cruiser.cjs",
+    "check:bundle": "bun run build && node scripts/check-bundle-sizes.mjs",
+    "example:install": "npm install --prefix examples/mock-ui && npm install --prefix examples/app-kit",
+    "example:mock": "node scripts/dev-linked.mjs examples/mock-ui vite",
+    "example:app": "node scripts/dev-linked.mjs examples/app-kit vite",
     "prepublishOnly": "bun run build && bun run typecheck"
   },
   "peerDependencies": {
@@ -65,6 +96,7 @@
     "happy-dom": "^20.8.9",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "dependency-cruiser": "^16.10.4",
     "tsup": "^8.5.0",
     "typescript": "~5.8.3"
   },