@timbal-ai/timbal-react 0.3.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.cts CHANGED
@@ -1,13 +1,13 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import * as React from 'react';
3
- import React__default, { ReactNode, FC, ComponentType, Dispatch, ComponentPropsWithRef, ElementType } from 'react';
3
+ import React__default, { ReactNode, FC, ComponentType, Dispatch, CSSProperties, ElementType } from 'react';
4
4
  import { AttachmentAdapter, ToolCallMessagePartComponent } from '@assistant-ui/react';
5
- export { ActionBarPrimitive, AssistantRuntimeProvider, AttachmentAdapter, ComposerPrimitive, MessagePrimitive, ThreadPrimitive, useComposerRuntime, useMessageRuntime, useThread, useThreadRuntime } from '@assistant-ui/react';
5
+ export { ActionBarMorePrimitive, ActionBarPrimitive, AssistantRuntimeProvider, AttachmentAdapter, AuiIf, ComposerPrimitive, ErrorPrimitive, MessagePartPrimitive, MessagePrimitive, ThreadPrimitive, ToolCallMessagePartComponent, useAuiState, useComposerRuntime, useMessageRuntime, useThread, useThreadRuntime } from '@assistant-ui/react';
6
6
  import { WorkforceItem, Session } from '@timbal-ai/timbal-sdk';
7
7
  export { parseSSELine } from '@timbal-ai/timbal-sdk';
8
+ import { SyntaxHighlighterProps } from '@assistant-ui/react-markdown';
8
9
  import * as class_variance_authority_types from 'class-variance-authority/types';
9
10
  import { VariantProps } from 'class-variance-authority';
10
- import { SyntaxHighlighterProps } from '@assistant-ui/react-markdown';
11
11
  import { Tooltip as Tooltip$1, Avatar as Avatar$1, Dialog as Dialog$1 } from 'radix-ui';
12
12
  import { ClassValue } from 'clsx';
13
13
 
@@ -217,41 +217,36 @@ interface ComposerProps {
217
217
  /** Placeholder shown in the textarea. Default: "Send a message..." */
218
218
  placeholder?: string;
219
219
  /**
220
- * Show the file-attach button. Default: true. Disable when the agent has
221
- * no use for attachments to keep the UI clean.
220
+ * Show the file-attach button. Default: true. Disable when the agent has no
221
+ * use for attachments to keep the toolbar clean.
222
222
  */
223
223
  showAttachments?: boolean;
224
- /**
225
- * Extra content rendered inside the toolbar, to the left of the send
226
- * button. Use for custom buttons (voice, model picker, etc).
227
- */
224
+ /** Extra content rendered inside the toolbar, left of the send button. */
228
225
  toolbar?: ReactNode;
229
- /**
230
- * Tooltip on the send button. Default: "Send message".
231
- */
226
+ /** Tooltip shown on the send button. Default: "Send message". */
232
227
  sendTooltip?: string;
233
- /** Disable autofocus on mount. Default: false (autofocused). */
228
+ /** Disable autofocus on mount. Default: false. */
234
229
  noAutoFocus?: boolean;
235
230
  /** Extra className applied to the outer composer wrapper. */
236
231
  className?: string;
237
232
  }
238
233
  /**
239
- * Composer v2 — auto-resizing textarea, Enter-to-send / Shift+Enter newline,
240
- * attach button on the left, send/stop on the right. Use as a top-level
241
- * component inside `<TimbalRuntimeProvider>` (or via `<Thread components={{
242
- * Composer }}>`).
234
+ * Default chat composer — auto-resizing textarea with Enter-to-send,
235
+ * Shift+Enter for newline, attach pill on the left, and a circular send /
236
+ * cancel button on the right. Wraps `ComposerPrimitive` so consumers can
237
+ * override individual slots without losing the Studio chrome.
243
238
  */
244
239
  declare const Composer: FC<ComposerProps>;
245
240
 
246
241
  interface ThreadSuggestion {
247
- /** Title shown on the chip. Also sent verbatim as the user message. */
242
+ /** Title shown on the row. Also sent verbatim as the user message. */
248
243
  title: string;
249
244
  /** Optional secondary line. */
250
245
  description?: string;
251
246
  /** Optional leading icon. */
252
247
  icon?: ReactNode;
253
248
  /**
254
- * Override the prompt sent when the chip is clicked. Useful when the chip
249
+ * Override the prompt sent when the row is clicked. Useful when the row
255
250
  * label is short ("Weekly recap") but the prompt should be longer.
256
251
  */
257
252
  prompt?: string;
@@ -263,18 +258,14 @@ interface ThreadSuggestion {
263
258
  type SuggestionsSource = ThreadSuggestion[] | (() => ThreadSuggestion[] | Promise<ThreadSuggestion[]>);
264
259
  interface ThreadSuggestionsProps {
265
260
  suggestions?: SuggestionsSource;
266
- /**
267
- * Compact layout: single row, horizontally scrollable, smaller chips. Use
268
- * inline (e.g. above the composer or after a message) where vertical
269
- * space is tight.
270
- */
271
- layout?: "grid" | "row";
272
261
  className?: string;
273
262
  }
274
263
  /**
275
- * Render suggestion chips. Resolves both static arrays and async sources.
276
- * On click, appends the suggestion's `prompt` (or `title` if no prompt) as
277
- * a user message via the thread runtime.
264
+ * Render suggestions as a stacked column of full-width rows. Each row reads
265
+ * like a list item rather than a chip, matching the Studio playground.
266
+ *
267
+ * On click the row's `prompt` (or `title` if no prompt) is appended as a
268
+ * user message via the thread runtime.
278
269
  */
279
270
  declare const Suggestions: FC<ThreadSuggestionsProps>;
280
271
  /**
@@ -283,12 +274,9 @@ declare const Suggestions: FC<ThreadSuggestionsProps>;
283
274
  * async functions stream in once the promise settles.
284
275
  */
285
276
  declare function useResolvedSuggestions(source?: SuggestionsSource): ThreadSuggestion[] | undefined;
286
- /**
287
- * Props passed to a custom `Suggestions` slot component. Replace the default
288
- * via `<Thread components={{ Suggestions: MySuggestions }}>`.
289
- */
290
277
  interface SuggestionsSlotProps {
291
278
  suggestions?: SuggestionsSource;
279
+ className?: string;
292
280
  }
293
281
  type SuggestionsComponent = ComponentType<SuggestionsSlotProps>;
294
282
 
@@ -584,6 +572,12 @@ declare function useUiCustomNodeRegistry(): Record<string, UiCustomNodeRenderer>
584
572
  interface ThreadWelcomeConfig {
585
573
  heading?: string;
586
574
  subheading?: string;
575
+ /**
576
+ * Optional brand icon rendered above the heading. Pass any ReactNode — the
577
+ * SDK no longer ships a default sparkle icon so apps can drop in their
578
+ * own logo or stay minimal.
579
+ */
580
+ icon?: ReactNode;
587
581
  }
588
582
  interface ThreadWelcomeProps {
589
583
  config?: ThreadWelcomeConfig;
@@ -596,17 +590,17 @@ interface ThreadWelcomeProps {
596
590
  Suggestions?: SuggestionsComponent;
597
591
  }
598
592
  interface ThreadComponents {
599
- /** Replace the user message bubble. Access message content via `MessagePrimitive.Parts`. */
593
+ /** Replace the user message bubble. Access content via `MessagePrimitive.Parts`. */
600
594
  UserMessage?: ComponentType;
601
- /** Replace the assistant message bubble. Access message content via `MessagePrimitive.Parts`. */
595
+ /** Replace the assistant message bubble. Access content via `MessagePrimitive.Parts`. */
602
596
  AssistantMessage?: ComponentType;
603
597
  /** Replace the inline edit composer. */
604
598
  EditComposer?: ComponentType;
605
599
  /** Replace the composer (input bar). Receives all `ComposerProps` from the parent. */
606
600
  Composer?: ComponentType<ComposerProps>;
607
- /** Replace the welcome / empty state. Receives `config` and `suggestions` props. Controls its own visibility — use `useThread(s => s.isEmpty)` to replicate the default behaviour. */
601
+ /** Replace the welcome / empty state. Renders only while the thread is empty. */
608
602
  Welcome?: ComponentType<ThreadWelcomeProps>;
609
- /** Replace the suggestion chip block (rendered inside Welcome and inline). */
603
+ /** Replace the suggestion list (rendered inside Welcome). */
610
604
  Suggestions?: SuggestionsComponent;
611
605
  /** Replace the scroll-to-bottom button. */
612
606
  ScrollToBottom?: ComponentType;
@@ -620,16 +614,16 @@ interface ThreadArtifactsConfig {
620
614
 
621
615
  interface ThreadProps {
622
616
  className?: string;
623
- /** Max width of the message column. Default: "44rem" */
617
+ /** Max width of the message column. Default: "44rem". */
624
618
  maxWidth?: string;
625
- /** Welcome screen text */
619
+ /** Welcome screen text + optional brand icon. */
626
620
  welcome?: ThreadWelcomeConfig;
627
621
  /**
628
- * Welcome-screen suggestion chips. Accepts a static array, a thunk, or an
622
+ * Welcome-screen suggestion rows. Accepts a static array, a thunk, or an
629
623
  * async function for per-user suggestions.
630
624
  */
631
625
  suggestions?: SuggestionsSource;
632
- /** Composer input placeholder. Default: "Send a message..." */
626
+ /** Composer input placeholder. Default: "Send a message...". */
633
627
  composerPlaceholder?: string;
634
628
  /** Override individual UI slots while keeping the rest as defaults. */
635
629
  components?: ThreadComponents;
@@ -642,8 +636,9 @@ interface ThreadProps {
642
636
  artifacts?: ThreadArtifactsConfig;
643
637
  /**
644
638
  * Called when a `ui` artifact fires an `{ kind: "emit" }` action. Use this
645
- * to react to slider commits, drag gestures, or other host-side logic beyond
646
- * the built-in `message` action (which already appends a user message).
639
+ * to react to slider commits, drag gestures, or other host-side logic
640
+ * beyond the built-in `message` action (which already appends a user
641
+ * message).
647
642
  */
648
643
  onArtifactEvent?: (event: UiEventEnvelope) => void;
649
644
  }
@@ -655,8 +650,64 @@ declare function TimbalChat({ workforceId, baseUrl, fetch, attachments, attachme
655
650
 
656
651
  declare const MarkdownText: React.MemoExoticComponent<() => react_jsx_runtime.JSX.Element>;
657
652
 
653
+ interface ToolStatus {
654
+ type: string;
655
+ reason?: string;
656
+ }
657
+ declare function useToolRunning(props: {
658
+ status?: ToolStatus;
659
+ result?: unknown;
660
+ }): boolean;
658
661
  declare const ToolFallback: ToolCallMessagePartComponent;
659
662
 
663
+ /**
664
+ * Tool-row presence motion shared across the chat surface.
665
+ *
666
+ * Mirrors `timbal-platform` `StudioToolMotion.js` — a soft "luxury" ease in
667
+ * with optional blur, fast exit, and a grid-row collapsible body. Exit
668
+ * durations stay short so the layout doesn't feel sticky when tools resolve
669
+ * quickly.
670
+ */
671
+ declare const luxuryEase: readonly [0.16, 1, 0.3, 1];
672
+ declare function toolPresenceTransition(reduced: boolean): {
673
+ enter: {
674
+ duration: number;
675
+ ease: readonly [0.16, 1, 0.3, 1];
676
+ };
677
+ exit: {
678
+ duration: number;
679
+ ease: readonly [0.4, 0, 1, 1];
680
+ };
681
+ };
682
+ type ToolMotionVariant = "executing" | "settled";
683
+ interface ToolMotionProps {
684
+ children: ReactNode;
685
+ className?: string;
686
+ /** Stable key for AnimatePresence swaps (e.g. `running` → `complete`). */
687
+ motionKey: string;
688
+ }
689
+ /** Single-shot rise-from-below for tool / artifact rows. */
690
+ declare function ToolMotion({ children, className, motionKey }: ToolMotionProps): react_jsx_runtime.JSX.Element;
691
+ interface ToolPresenceProps {
692
+ presenceKey: string;
693
+ children: ReactNode;
694
+ className?: string;
695
+ /** Executing rows skip blur so the shimmer stays readable. */
696
+ variant?: ToolMotionVariant;
697
+ }
698
+ /** Wraps running ↔ complete (or other) tool states with a short crossfade. */
699
+ declare function ToolPresence({ presenceKey, children, className, variant, }: ToolPresenceProps): react_jsx_runtime.JSX.Element;
700
+ interface ToolBodyPresenceProps {
701
+ open: boolean;
702
+ children: ReactNode;
703
+ className?: string;
704
+ }
705
+ /**
706
+ * Expanded tool trace — CSS grid row collapse for smooth contract + opacity.
707
+ * Avoids `AnimatePresence` exit lag when the body closes.
708
+ */
709
+ declare function ToolBodyPresence({ open, children, className, }: ToolBodyPresenceProps): react_jsx_runtime.JSX.Element;
710
+
660
711
  /**
661
712
  * Copy-paste this into a workforce agent system prompt (or append it to your
662
713
  * blueprint's tool-result instructions) so the model knows which artifact
@@ -737,13 +788,12 @@ type MarkdownSegment = {
737
788
  declare function splitMarkdownByArtifacts(markdown: string): MarkdownSegment[];
738
789
 
739
790
  /**
740
- * Drop-in replacement for `ToolFallback` that first tries to render the tool
741
- * result as an artifact via the registry. Falls back to the standard tool
742
- * panel when the result isn't artifact-shaped (or while the tool is still
743
- * running).
791
+ * Default `tools.Override` for assistant messages.
744
792
  *
745
- * Use this as the `tools.Fallback` in `MessagePrimitive.Parts` to enable
746
- * artifact rendering for any tool the agent calls.
793
+ * Renders the tool result as a registered artifact when possible; otherwise
794
+ * falls back to the timeline `ToolFallback`. Wraps the artifact in
795
+ * `ToolMotion` so it shares the same rise-from-below polish as the rest of
796
+ * the chat surface.
747
797
  */
748
798
  declare const ToolArtifactFallback: ToolCallMessagePartComponent;
749
799
 
@@ -773,10 +823,10 @@ declare const ChartArtifactView: FC<{
773
823
  }>;
774
824
 
775
825
  /**
776
- * Inline choice widget. Single-select submits immediately on click;
777
- * multi-select shows a confirm button. The answer is sent as a regular user
778
- * message via the assistant-ui runtime, so the agent treats it like any
779
- * other reply.
826
+ * In-thread choice widget. Single-select submits immediately on click;
827
+ * multi-select shows a confirm button. The answer is sent as a regular
828
+ * user message via the assistant-ui runtime so the agent treats it like
829
+ * any other reply.
780
830
  */
781
831
  declare const QuestionArtifactView: FC<{
782
832
  artifact: QuestionArtifact;
@@ -808,18 +858,63 @@ declare const UserMessageAttachments: FC;
808
858
  declare const ComposerAttachments: FC;
809
859
  declare const ComposerAddAttachment: FC;
810
860
 
811
- declare const buttonVariants: (props?: ({
812
- variant?: "default" | "outline" | "ghost" | "secondary" | "destructive" | "link" | null | undefined;
813
- size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
814
- } & class_variance_authority_types.ClassProp) | undefined) => string;
815
- declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
861
+ /**
862
+ * Timbal V2 button design tokens.
863
+ *
864
+ * Mirrors the `timbal-platform` design language (`TimbalV2Button`) so chat
865
+ * surfaces built with the SDK feel identical to the Timbal Studio. Each record
866
+ * is keyed by variant or size and ships only Tailwind utility classes — no
867
+ * runtime JS — so consumers can compose them with `cn(...)` and add their own
868
+ * overrides without ejecting.
869
+ */
870
+ type TimbalV2Variant = "primary" | "secondary" | "ghost" | "informative" | "destructive" | "link";
871
+ type TimbalV2Size = "xs" | "sm" | "md" | "lg";
872
+ declare const TIMBAL_V2_SIZE_HEIGHT: Record<TimbalV2Size, string>;
873
+ declare const TIMBAL_V2_SIZE_ICON: Record<TimbalV2Size, string>;
874
+ declare const TIMBAL_V2_SIZE_LABEL_PX: Record<TimbalV2Size, string>;
875
+ /**
876
+ * Absolute gradient fill layer — scoped to the `group/tbv2` group so the
877
+ * hover/active states can be triggered without wrapping each button in
878
+ * dedicated state classes.
879
+ */
880
+ declare const TIMBAL_V2_FILL: Record<TimbalV2Variant, string>;
881
+ declare const TIMBAL_V2_LABEL: Record<TimbalV2Variant, string>;
882
+ declare const TIMBAL_V2_BORDER: Record<TimbalV2Variant, string>;
883
+ declare const TIMBAL_V2_SHADOW: Record<TimbalV2Variant, string>;
884
+ /** Static pill surface — sidebars, badges, anywhere a button shape is needed without interaction. */
885
+ declare const TIMBAL_V2_PILL_SURFACE = "bg-gradient-to-b from-white to-neutral-50/70 border border-neutral-200/80 shadow-[0_1px_2px_-0.5px_rgba(0,0,0,0.05)] dark:from-white/[0.05] dark:to-white/[0.025] dark:border-white/[0.08] dark:shadow-[0_1px_3px_rgba(0,0,0,0.22)]";
886
+ /** Interactive secondary chrome for native controls beside v2 buttons (selects, search inputs). */
887
+ declare const TIMBAL_V2_SECONDARY_CHROME = "bg-gradient-to-b from-white to-neutral-50/70 border border-neutral-200/80 shadow-[0_1px_2px_-0.5px_rgba(0,0,0,0.05)] transition-[background-color,box-shadow,border-color] duration-200 ease-in-out hover:from-neutral-50/40 hover:to-neutral-100/60 active:from-neutral-100/65 active:to-neutral-200/65 dark:from-white/[0.05] dark:to-white/[0.025] dark:border-white/[0.08] dark:shadow-[0_1px_3px_rgba(0,0,0,0.22)] dark:hover:from-white/[0.07] dark:hover:to-white/[0.045] dark:active:from-white/[0.10] dark:active:to-white/[0.07]";
888
+
889
+ interface TimbalV2ButtonProps extends React.ComponentProps<"button"> {
890
+ variant?: TimbalV2Variant;
891
+ size?: TimbalV2Size;
892
+ isIconOnly?: boolean;
893
+ isLoading?: boolean;
894
+ fullWidth?: boolean;
895
+ /** When true, renders children as the underlying element (Radix Slot pattern). */
816
896
  asChild?: boolean;
817
- }): react_jsx_runtime.JSX.Element;
897
+ }
898
+ /**
899
+ * Canonical Timbal pill button — layered absolute-fill span + relative label
900
+ * row scoped to `group/tbv2`. Mirrors `timbal-platform` `TimbalV2Button` so
901
+ * chat UIs built with the SDK feel identical to the Studio.
902
+ */
903
+ declare const TimbalV2Button: React.ForwardRefExoticComponent<Omit<TimbalV2ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
818
904
 
819
- type TooltipIconButtonProps = ComponentPropsWithRef<typeof Button> & {
905
+ interface TooltipIconButtonProps extends Omit<TimbalV2ButtonProps, "isIconOnly"> {
906
+ /** Visible tooltip + accessible label. Always required. */
820
907
  tooltip: string;
908
+ /** Tooltip placement. Default: "bottom". */
821
909
  side?: "top" | "bottom" | "left" | "right";
822
- };
910
+ }
911
+ /**
912
+ * Icon-only Timbal pill button with a tooltip. Used by every chat-surface
913
+ * toolbar (composer send/cancel, message action bar, scroll-to-bottom).
914
+ *
915
+ * Defaults to a soft `secondary` variant so it sits cleanly inside composers,
916
+ * message bubbles, and the action bar. Override via `variant`.
917
+ */
823
918
  declare const TooltipIconButton: React.ForwardRefExoticComponent<Omit<TooltipIconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
824
919
 
825
920
  declare const ShikiSyntaxHighlighter: FC<SyntaxHighlighterProps>;
@@ -869,10 +964,12 @@ interface WorkforceSelectorProps {
869
964
  placeholder?: string;
870
965
  }
871
966
  /**
872
- * Minimal headless workforce picker wraps a styled native `<select>` so
873
- * `timbal-react` doesn't need a Radix dropdown dependency. Apps that want a
874
- * richer UI (search, descriptions) can build their own using
875
- * `useWorkforces()`.
967
+ * Minimal headless workforce picker. Wraps a styled native `<select>` so
968
+ * the SDK doesn't need to depend on `@radix-ui/react-select`, while still
969
+ * matching the Studio chrome (gradient pill, soft border, chevron).
970
+ *
971
+ * Apps that want a richer UI (search, descriptions, agent icons) can build
972
+ * their own using `useWorkforces()`.
876
973
  */
877
974
  declare const WorkforceSelector: FC<WorkforceSelectorProps>;
878
975
 
@@ -894,10 +991,12 @@ interface TimbalChatShellProps extends Omit<TimbalChatProps, "workforceId"> {
894
991
  headerClassName?: string;
895
992
  }
896
993
  /**
897
- * Drop-in shell that combines the most common blueprint patterns: a header
898
- * with brand + workforce selector + actions, plus the chat thread occupying
899
- * the remaining vertical space. Falls back to `<TimbalChat>` directly when
900
- * `workforceId` is provided.
994
+ * Drop-in shell that wraps `TimbalChat` with the Studio playground chrome:
995
+ * floating topbar with brand + workforce selector + actions, soft gradient
996
+ * background, and the chat thread filling the remaining vertical space.
997
+ *
998
+ * Falls back to picking the first available workforce when `workforceId`
999
+ * isn't supplied.
901
1000
  */
902
1001
  declare const TimbalChatShell: FC<TimbalChatShellProps>;
903
1002
 
@@ -933,6 +1032,73 @@ declare const refreshAccessToken: () => Promise<boolean>;
933
1032
  declare const authFetch: (url: string, options?: RequestInit) => Promise<Response>;
934
1033
  declare const fetchCurrentUser: () => Promise<Session | null>;
935
1034
 
1035
+ /**
1036
+ * Shared chrome class names + CSS variables for Timbal chat surfaces.
1037
+ *
1038
+ * These mirror `timbal-platform` `studioChrome.js` so the SDK ships the same
1039
+ * design language out of the box. Class consts are pure strings (no runtime
1040
+ * cost) and can be composed with `cn(...)` from `../utils`.
1041
+ */
1042
+
1043
+ declare const STUDIO_TOPBAR_GAP = "0.5rem";
1044
+ declare const STUDIO_TOPBAR_HEIGHT = "3rem";
1045
+ declare const STUDIO_PILL_HEIGHT = "2.5rem";
1046
+ declare const STUDIO_SIDEBAR_GAP = "0.5rem";
1047
+ declare const STUDIO_SIDEBAR_WIDTH = "3rem";
1048
+ declare const STUDIO_INSET_LEFT = "calc(0.5rem + 3rem)";
1049
+ /**
1050
+ * Style object to spread on the chat shell root. Exposes the CSS variables
1051
+ * referenced by topbar/sidebar helper classes so layouts stay self-contained.
1052
+ */
1053
+ declare const studioChromeShellStyle: CSSProperties;
1054
+ declare const studioTopbarPillHeightClass = "h-[var(--studio-chrome-pill-height)] min-h-[var(--studio-chrome-pill-height)]";
1055
+ declare const 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)]";
1056
+ /** Soft playground gradient behind the message column. */
1057
+ declare const studioPlaygroundGradientClass = "bg-gradient-to-b from-neutral-200/60 via-neutral-100/30 to-background dark:from-zinc-800 dark:via-zinc-900 dark:to-zinc-950";
1058
+ /** Composer outer shell — rounded surface with focus-within affordances. */
1059
+ declare const studioComposeInputShellClass = "flex w-full flex-col rounded-2xl border border-neutral-200/60 bg-background shadow-lg shadow-black/5 outline-none transition-[box-shadow,border-color] focus-within:border-neutral-400/80 focus-within:ring-2 focus-within:ring-foreground/5 focus-within:shadow-xl focus-within:shadow-black/10 dark:border-white/12 dark:bg-zinc-900 dark:shadow-black/20 dark:focus-within:border-white/22 dark:focus-within:ring-0";
1060
+ /** Resting pill surface — sidebars, badges. */
1061
+ declare const studioPillSurfaceClass = "bg-gradient-to-b from-white to-neutral-50/70 border border-neutral-200/80 shadow-[0_1px_2px_-0.5px_rgba(0,0,0,0.05)] dark:from-white/[0.05] dark:to-white/[0.025] dark:border-white/[0.08] dark:shadow-[0_1px_3px_rgba(0,0,0,0.22)]";
1062
+ /** Interactive secondary chrome — select triggers, search shells. */
1063
+ declare const studioSecondaryChromeClass = "bg-gradient-to-b from-white to-neutral-50/70 border border-neutral-200/80 shadow-[0_1px_2px_-0.5px_rgba(0,0,0,0.05)] transition-[background-color,box-shadow,border-color] duration-200 ease-in-out hover:from-neutral-50/40 hover:to-neutral-100/60 active:from-neutral-100/65 active:to-neutral-200/65 dark:from-white/[0.05] dark:to-white/[0.025] dark:border-white/[0.08] dark:shadow-[0_1px_3px_rgba(0,0,0,0.22)] dark:hover:from-white/[0.07] dark:hover:to-white/[0.045] dark:active:from-white/[0.10] dark:active:to-white/[0.07]";
1064
+ /**
1065
+ * Solid integration-card surface — used for in-thread tool / artifact cards
1066
+ * so they read on the playground gradient.
1067
+ */
1068
+ declare const studioIntegrationSurfaceSolid = "bg-white bg-gradient-to-b from-white to-neutral-50/70 shadow-[0_1px_2px_-0.5px_rgba(0,0,0,0.05)] dark:bg-zinc-900 dark:from-white/[0.05] dark:to-white/[0.025] dark:shadow-[0_1px_3px_rgba(0,0,0,0.22)]";
1069
+ declare const studioIntegrationBorder = "border border-neutral-200/80 dark:border-white/[0.08]";
1070
+ declare const studioIntegrationCardClass: string;
1071
+ declare const studioIntegrationIconTileClass: string;
1072
+ /**
1073
+ * Full-width selectable row — used by `Suggestions` and any settings-style
1074
+ * list cards. Mirrors `roleListRowSurfaceClass` in timbal-platform.
1075
+ */
1076
+ declare const studioListRowButtonClass: string;
1077
+ /** Compose tool drawer / trace payload well — opaque so JSON reads on the gradient. */
1078
+ declare const studioComposerIoWellClass: string;
1079
+ /** Collapsible tool-call card shell. */
1080
+ declare const studioToolCardShellClass: string;
1081
+ declare const studioTimelineRowButtonClass = "group flex w-full min-w-0 cursor-pointer items-center justify-start rounded-md border-0 bg-transparent py-1 text-left shadow-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/15 focus-visible:ring-offset-2";
1082
+ declare const studioTimelineTextClass = "text-xs font-normal leading-snug";
1083
+ declare const studioTimelineActionClass: string;
1084
+ /** Shimmer action word — text-transparent inherits its colour from the bg clip. */
1085
+ declare const studioTimelineShimmerActionClass: string;
1086
+ declare const studioTimelineDetailClass: string;
1087
+ declare function studioTimelineChevronClass(expanded: boolean): string;
1088
+ /** Padding for the expanded payload under a timeline toggle. */
1089
+ declare const studioTimelineBodyPadClass = "flex flex-col gap-2 pt-0.5 pb-0.5";
1090
+ declare const studioArtifactShellClass: string;
1091
+ declare const studioQuestionOptionClass = "flex w-full items-center gap-2 rounded-lg border border-transparent px-2 py-1.5 text-left text-sm transition-[background-color,border-color,box-shadow] duration-200 hover:bg-neutral-100/80 dark:hover:bg-white/[0.05] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/15 focus-visible:ring-offset-2";
1092
+ declare const studioQuestionOptionSelectedClass: string;
1093
+
1094
+ declare const buttonVariants: (props?: ({
1095
+ variant?: "default" | "outline" | "ghost" | "secondary" | "destructive" | "link" | null | undefined;
1096
+ size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
1097
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
1098
+ declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
1099
+ asChild?: boolean;
1100
+ }): react_jsx_runtime.JSX.Element;
1101
+
936
1102
  declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof Tooltip$1.Provider>): react_jsx_runtime.JSX.Element;
937
1103
  declare function Tooltip({ ...props }: React.ComponentProps<typeof Tooltip$1.Root>): react_jsx_runtime.JSX.Element;
938
1104
  declare function TooltipTrigger({ ...props }: React.ComponentProps<typeof Tooltip$1.Trigger>): react_jsx_runtime.JSX.Element;
@@ -965,4 +1131,4 @@ declare const Shimmer: React.MemoExoticComponent<({ children, as: Component, cla
965
1131
 
966
1132
  declare function cn(...inputs: ClassValue[]): string;
967
1133
 
968
- export { ARTIFACT_AGENT_INSTRUCTIONS, ARTIFACT_FENCE_LANGUAGES, type AnyArtifact, ArtifactCard, type ArtifactRegistry, ArtifactRegistryProvider, type ArtifactRenderer, type ArtifactRendererProps, ArtifactView, AuthGuard, Avatar, AvatarFallback, AvatarImage, Button, type ChartArtifact, ChartArtifactView, type ChatAttachment, type ChatMessage, Composer, ComposerAddAttachment, ComposerAttachments, type ComposerProps, type ContentPart, type CreateDefaultAttachmentAdapterOptions, type CreateUploadAttachmentAdapterOptions, DEFAULT_UPLOAD_ACCEPT, Dialog, DialogClose, DialogContent, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, type HtmlArtifact, HtmlArtifactView, type JsonArtifact, JsonArtifactView, type MarkdownArtifactMatch, type MarkdownSegment, MarkdownText, type QuestionArtifact, QuestionArtifactView, type QuestionOption, type ResolveAttachmentAdapterOptions, type SendOptions, SessionProvider, Shimmer, Suggestions, type SuggestionsComponent, type SuggestionsSlotProps, type SuggestionsSource, ShikiSyntaxHighlighter as SyntaxHighlighter, type TableArtifact, TableArtifactView, type TextContentPart, type TextShimmerProps, type ThinkingContentPart, Thread, type ThreadArtifactsConfig, type ThreadComponents, type ThreadProps, type ThreadSuggestion, type ThreadSuggestionsProps, type ThreadWelcomeConfig, type ThreadWelcomeProps, type TimbalArtifact, type TimbalAttachmentsConfig, type TimbalAttachmentsProp, TimbalChat, type TimbalChatProps, TimbalChatShell, type TimbalChatShellProps, TimbalRuntimeProvider, type TimbalRuntimeProviderProps, type TimbalStreamApi, ToolArtifactFallback, type ToolCallContentPart, ToolFallback, Tooltip, TooltipContent, TooltipIconButton, type TooltipIconButtonProps, TooltipProvider, TooltipTrigger, type UiAction, type UiArtifact, UiArtifactView, UiCustomNodeRegistryProvider, type UiEventEnvelope, UiEventProvider, type UiNode, UiNodeView, type UploadFetchFn, type UseTimbalStreamOptions, type UseWorkforcesOptions, type UseWorkforcesResult, UserMessageAttachments, WorkforceSelector, type WorkforceSelectorProps, authFetch, buttonVariants, clearTokens, cn, createDefaultAttachmentAdapter, createUploadAttachmentAdapter, defaultArtifactRenderers, fetchCurrentUser, findMarkdownArtifacts, getAccessToken, getPath, getRefreshToken, isArtifact, isArtifactFenceLanguage, isUiBinding, parseArtifactFromToolResult, refreshAccessToken, resolveAttachmentAdapter, resolveBindable, setAccessToken, setPath, setRefreshToken, splitMarkdownByArtifacts, useArtifactRegistry, useResolvedSuggestions, useSession, useTimbalRuntime, useTimbalStream, useUiCustomNodeRegistry, useUiDispatch, useUiEventEmitter, useUiState, useWorkforces };
1134
+ export { ARTIFACT_AGENT_INSTRUCTIONS, ARTIFACT_FENCE_LANGUAGES, type AnyArtifact, ArtifactCard, type ArtifactRegistry, ArtifactRegistryProvider, type ArtifactRenderer, type ArtifactRendererProps, ArtifactView, AuthGuard, Avatar, AvatarFallback, AvatarImage, Button, type ChartArtifact, ChartArtifactView, type ChatAttachment, type ChatMessage, Composer, ComposerAddAttachment, ComposerAttachments, type ComposerProps, type ContentPart, type CreateDefaultAttachmentAdapterOptions, type CreateUploadAttachmentAdapterOptions, DEFAULT_UPLOAD_ACCEPT, Dialog, DialogClose, DialogContent, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, type HtmlArtifact, HtmlArtifactView, type JsonArtifact, JsonArtifactView, type MarkdownArtifactMatch, type MarkdownSegment, MarkdownText, type QuestionArtifact, QuestionArtifactView, type QuestionOption, type ResolveAttachmentAdapterOptions, STUDIO_INSET_LEFT, STUDIO_PILL_HEIGHT, STUDIO_SIDEBAR_GAP, STUDIO_SIDEBAR_WIDTH, STUDIO_TOPBAR_GAP, STUDIO_TOPBAR_HEIGHT, type SendOptions, SessionProvider, Shimmer, Suggestions, type SuggestionsComponent, type SuggestionsSlotProps, type SuggestionsSource, ShikiSyntaxHighlighter as SyntaxHighlighter, TIMBAL_V2_BORDER, TIMBAL_V2_FILL, TIMBAL_V2_LABEL, TIMBAL_V2_PILL_SURFACE, TIMBAL_V2_SECONDARY_CHROME, TIMBAL_V2_SHADOW, TIMBAL_V2_SIZE_HEIGHT, TIMBAL_V2_SIZE_ICON, TIMBAL_V2_SIZE_LABEL_PX, type TableArtifact, TableArtifactView, type TextContentPart, type TextShimmerProps, type ThinkingContentPart, Thread, type ThreadArtifactsConfig, type ThreadComponents, type ThreadProps, type ThreadSuggestion, type ThreadSuggestionsProps, type ThreadWelcomeConfig, type ThreadWelcomeProps, type TimbalArtifact, type TimbalAttachmentsConfig, type TimbalAttachmentsProp, TimbalChat, type TimbalChatProps, TimbalChatShell, type TimbalChatShellProps, TimbalRuntimeProvider, type TimbalRuntimeProviderProps, type TimbalStreamApi, TimbalV2Button, type TimbalV2ButtonProps, type TimbalV2Size, type TimbalV2Variant, ToolArtifactFallback, ToolBodyPresence, type ToolCallContentPart, ToolFallback, ToolMotion, type ToolMotionVariant, ToolPresence, Tooltip, TooltipContent, TooltipIconButton, type TooltipIconButtonProps, TooltipProvider, TooltipTrigger, type UiAction, type UiArtifact, UiArtifactView, UiCustomNodeRegistryProvider, type UiEventEnvelope, UiEventProvider, type UiNode, UiNodeView, type UploadFetchFn, type UseTimbalStreamOptions, type UseWorkforcesOptions, type UseWorkforcesResult, UserMessageAttachments, WorkforceSelector, type WorkforceSelectorProps, authFetch, buttonVariants, clearTokens, cn, createDefaultAttachmentAdapter, createUploadAttachmentAdapter, defaultArtifactRenderers, fetchCurrentUser, findMarkdownArtifacts, getAccessToken, getPath, getRefreshToken, isArtifact, isArtifactFenceLanguage, isUiBinding, luxuryEase, parseArtifactFromToolResult, refreshAccessToken, resolveAttachmentAdapter, resolveBindable, setAccessToken, setPath, setRefreshToken, splitMarkdownByArtifacts, studioArtifactShellClass, studioChromeShellStyle, studioComposeInputShellClass, studioComposerIoWellClass, studioIntegrationBorder, studioIntegrationCardClass, studioIntegrationIconTileClass, studioIntegrationSurfaceSolid, studioListRowButtonClass, studioPillSurfaceClass, studioPlaygroundGradientClass, studioQuestionOptionClass, studioQuestionOptionSelectedClass, studioSecondaryChromeClass, studioTimelineActionClass, studioTimelineBodyPadClass, studioTimelineChevronClass, studioTimelineDetailClass, studioTimelineRowButtonClass, studioTimelineShimmerActionClass, studioTimelineTextClass, studioToolCardShellClass, studioTopbarIconPillClass, studioTopbarPillHeightClass, toolPresenceTransition, useArtifactRegistry, useResolvedSuggestions, useSession, useTimbalRuntime, useTimbalStream, useToolRunning, useUiCustomNodeRegistry, useUiDispatch, useUiEventEmitter, useUiState, useWorkforces };