@mastra/playground-ui 68.0.0 → 69.0.0-alpha.1

package/dist/src/ds/components/AgentIndicator/poses.d.ts

@@ -1,5 +1,5 @@
 import type { Frame } from './shapes';
-export declare const agentIndicatorStates: readonly ['idle', 'memory', 'thinking', 'reading', 'searching', 'finding', 'browsing', 'editing', 'running', 'deleting', 'skill', 'tool', 'waiting', 'done', 'error', 'context', 'notice'];
+export declare const agentIndicatorStates: readonly ['idle', 'memory', 'thinking', 'reading', 'searching', 'finding', 'browsing', 'editing', 'writing', 'creating', 'knowledge', 'listing', 'inspecting', 'stopping', 'output', 'fetching', 'clicking', 'typing', 'screenshot', 'asking', 'inbox', 'scheduling', 'noting', 'pinning', 'unpinning', 'moving', 'merging', 'delegating', 'workflow', 'connecting', 'planning', 'messaging', 'branching', 'running', 'deleting', 'skill', 'skill-searching', 'skill-reading', 'tool', 'waiting', 'done', 'error', 'context', 'notice'];
 export type AgentIndicatorState = (typeof agentIndicatorStates)[number];
 export type Pose = (clock: number, sinceEntered: number) => Frame;
 export declare const MORPH_SECONDS = 0.52;

package/dist/src/ds/components/AgentIndicator/shapes.d.ts

@@ -4,19 +4,23 @@ export type Inside = (p: Point) => boolean;
 export type Segment = [number, number, number, number, number];
 export type TrailPoint = [number, number, number, number];
 type Ball = [number, number, number];
+type Ring = [number, number, number, number];
 export declare const TAU: number;
 export declare const RAYS = 64;
 export declare const BALLS = 2;
 export declare const LINES = 2;
+export declare const RINGS = 1;
 export declare const TRAIL = 64;
 export declare const BODY: number;
 export declare const KIT: number;
 export declare const FRAME: number;
 export declare const clamp01: (x: number) => number;
 export declare const range: (n: number) => number[];
+export declare const RAY_DIRECTIONS: Point[];
 export declare function once<T>(make: () => T): () => T;
 export declare const lerpFrame: (a: Frame, b: Frame, w: number) => Frame;
 export declare function sstep(a: number, b: number, x: number): number;
+export declare function loopPulse(clock: number, periodSeconds: number): number;
 export declare function cubicBezier(x1: number, y1: number, x2: number, y2: number): (x: number) => number;
 export declare const inCirc: (cx: number, cy: number, r: number) => Inside;
 export declare const inCap: (a: Point, b: Point, r: number) => Inside;
@@ -35,7 +39,9 @@ export interface KitParts {
     balls?: Ball[];
     cuts?: Segment[];
     inks?: Segment[];
+    rings?: Ring[];
 }
-export declare function kit(outer: Inside, c: Point, { hole, holeCenter, balls, cuts, inks }?: KitParts): number[];
+export declare function kit(outer: Inside, c: Point, { hole, holeCenter, balls, cuts, inks, rings }?: KitParts): number[];
 export declare function withTrail(kitFrame: Frame, points?: TrailPoint[]): Frame;
+export declare const polyline: (points: Point[], ink: number, cut: number) => TrailPoint[];
 export {};

package/dist/src/ds/components/Breadcrumb/Breadcrumb.d.ts

@@ -27,6 +27,8 @@ export interface CrumbProps {
      * When the crumb doesn't navigate (current crumb, or no `to`), its hit area covers the whole crumb.
      */
     switcher?: React.ReactNode;
+    /** For a crumb that navigates in place (`as="button"`) rather than through a route. */
+    onClick?: React.MouseEventHandler;
     'data-testid'?: string;
 }
 export declare const CrumbSkeleton: (props: {

package/dist/src/ds/components/Breadcrumb/crumb-switcher.d.ts

@@ -1,4 +1,5 @@
 export declare const crumbSwitcherTriggerProps: {
     readonly variant: 'ghost';
     readonly size: 'icon-sm';
+    readonly popupWidth: 'md';
 };

package/dist/src/ds/components/ChatShell/chat-shell-context.d.ts

@@ -0,0 +1,9 @@
+import type { RefObject } from 'react';
+export interface ChatShellRegions {
+    transcriptRef: RefObject<HTMLDivElement | null>;
+    composerInputRef: RefObject<HTMLTextAreaElement | null>;
+}
+export declare const createChatShellRegions: () => ChatShellRegions;
+export declare const ChatShellRegionsContext: import("react").Context<ChatShellRegions | undefined>;
+export declare const ChatShellComposerInputContext: import("react").Context<RefObject<HTMLTextAreaElement | null> | undefined>;
+export declare function useChatShellRegions(): ChatShellRegions;

package/dist/src/ds/components/ChatShell/chat-shell.d.ts

@@ -39,6 +39,8 @@ export declare function ChatShellViewport({ className, children, ...props }: Mes
 export declare function ChatShellContent({ className, ...props }: MessageScrollerContentProps): import("react").JSX.Element;
 /** The shared reading column. Every chat region must go through it. */
 export declare function ChatShellColumn({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+/** The conversation's reading column. Positioned, so overlays such as `TranscriptAnnotations` travel with the text. */
+export declare function ChatShellTranscript({ className, ref, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
 export interface ChatShellTurnProps extends ComponentPropsWithoutRef<'div'> {
     /** Opened by a user message: the turn reserves room and releases it through a slow drift. */
     opensTurn?: boolean;
@@ -64,6 +66,9 @@ export declare function ChatShellTurn({ opensTurn, holdsRoom, restored, classNam
  * Behind it, one sheet of the page masked in over `--chat-fade` of air, reaching
  * `--chat-veil` at the dock's top edge. The transcript fades out above the
  * composer and nothing shows through around or under the card.
+ *
+ * Its `ComposerInput` is the conversation's composer, the one
+ * `TranscriptAnnotations` focuses.
  */
 export declare function ChatShellDock({ className, ...props }: ComponentPropsWithoutRef<'div'>): import("react").JSX.Element;
 /**

package/dist/src/ds/components/ChatShell/index.d.ts

@@ -1,4 +1,4 @@
-import { ChatShellBar, ChatShellColumn, ChatShellContent, ChatShellDock, ChatShellRoot, ChatShellScrollButton, ChatShellStage, ChatShellTurn, ChatShellViewport } from './chat-shell';
+import { ChatShellBar, ChatShellColumn, ChatShellContent, ChatShellDock, ChatShellRoot, ChatShellScrollButton, ChatShellStage, ChatShellTranscript, ChatShellTurn, ChatShellViewport } from './chat-shell';
 export type { ChatShellProps, ChatShellTurnProps } from './chat-shell';
 export declare const ChatShell: typeof ChatShellRoot & {
     Bar: typeof ChatShellBar;
@@ -7,6 +7,7 @@ export declare const ChatShell: typeof ChatShellRoot & {
     Dock: typeof ChatShellDock;
     ScrollButton: typeof ChatShellScrollButton;
     Stage: typeof ChatShellStage;
+    Transcript: typeof ChatShellTranscript;
     Turn: typeof ChatShellTurn;
     Viewport: typeof ChatShellViewport;
 };

package/dist/src/ds/components/Combobox/combobox-parts.d.ts

@@ -63,7 +63,8 @@ type ComboboxContentProps = BaseCombobox.Popup.Props & Pick<BaseCombobox.Positio
 /**
  * The popup. Under a field (ComboboxInput or ComboboxChips) it opens at the field's width; under a
  * compact ComboboxTrigger it takes the trigger's width, at least 11rem. Either way the width never
- * follows the filtered items, so it holds still while you type; long labels truncate.
+ * follows the filtered items, so it holds still while you type. (`Combobox`'s `popupWidth` picks a
+ * fixed, wider width for long options instead.)
  */
 declare function ComboboxContent({ className, side, sideOffset, align, alignOffset, anchor, container, ...props }: ComboboxContentProps): React.JSX.Element;
 /** The scrolling list. Children: a render function per item (or per group), like Base UI's List. */

package/dist/src/ds/components/Combobox/combobox-styles.d.ts

@@ -25,6 +25,9 @@ export declare function comboboxTriggerClass({ variant, size, className, }: {
 export declare const comboboxItemClass: (props?: ({
     multiple?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Fixed popup widths a call site can pick; without one the popup takes the trigger's width. Never narrower than the trigger or wider than the screen. */
+export type ComboboxPopupWidth = 'sm' | 'md' | 'lg' | 'xl';
+export declare const comboboxPopupWidthClass: Record<ComboboxPopupWidth, string>;
 export declare const comboboxStyles: {
     /** @deprecated A `Field` lays out the combobox and its error. */
     readonly root: 'flex flex-col gap-1.5';
@@ -52,6 +55,8 @@ export declare const comboboxStyles: {
     readonly listScroller: 'max-h-dropdown overflow-y-auto overflow-x-hidden';
     /** Option item base — rounded-lg sits concentrically inside rounded-xl + p-1. */
     readonly item: string;
+    /** An item's content beside its check: start slot, text, end slot. */
+    readonly itemContent: 'flex min-w-0 flex-1 items-center gap-2';
     /** Multi-select item — same item rhythm with a right-aligned selected check. */
     readonly itemMulti: string;
     /** Right-aligned slot grouping end content + selection check. */
@@ -62,10 +67,10 @@ export declare const comboboxStyles: {
     readonly checkIcon: 'size-full';
     /** Option label/description wrapper */
     readonly optionText: 'flex flex-col gap-0.5 min-w-0';
-    /** Option label */
-    readonly optionLabel: 'truncate';
-    /** Option description */
-    readonly optionDescription: 'text-caption text-muted-foreground truncate';
+    /** Option label: wraps (ids break anywhere) and clamps at two lines, so a long label stays readable without growing the row. */
+    readonly optionLabel: 'line-clamp-2 whitespace-normal wrap-anywhere';
+    /** Option description: same two-line clamp as the label. */
+    readonly optionDescription: 'text-caption text-muted-foreground line-clamp-2 whitespace-normal wrap-anywhere';
     /** Option end slot — `ml-auto` makes it push right inside flex containers (used by multi-select). */
     readonly optionEnd: 'ml-auto flex items-center shrink-0';
     /** @deprecated A `FieldError` colors the error. */

package/dist/src/ds/components/Combobox/combobox.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import type { ComboboxVariant } from './combobox-styles';
+import type { ComboboxPopupWidth, ComboboxVariant } from './combobox-styles';
 import type { ButtonSize } from '../Button/Button';
 import type { PortalContainer } from '../../primitives/portal-container';
-export type { ComboboxVariant } from './combobox-styles';
+export type { ComboboxPopupWidth, ComboboxVariant } from './combobox-styles';
 export type ComboboxOption = {
     label: string;
     value: string;
@@ -36,6 +36,8 @@ type ComboboxSharedProps = {
     'aria-describedby'?: string;
     /** Which edge of the trigger the popup lines up with. `end` opens it leftwards (e.g. an icon trigger at the end of a row). */
     align?: 'start' | 'center' | 'end';
+    /** A fixed popup width for long options (e.g. model ids). Without it the popup takes the trigger's width, at least 11rem. */
+    popupWidth?: ComboboxPopupWidth;
     showChevron?: boolean;
     iconOnlyValue?: boolean;
     allowCustomValue?: boolean;

package/dist/src/ds/components/CommandPalette/command-palette.d.ts

@@ -25,7 +25,7 @@ declare function CommandPaletteResults({ children, footer, ...props }: CommandPa
 type CommandPaletteItemProps = Omit<ComponentPropsWithoutRef<typeof CommandItem>, 'children'> & {
     icon: ReactNode;
     title: string;
-    subtitle?: string;
+    subtitle?: ReactNode;
     path?: string;
     badge?: string;
     shortcut?: ReactNode;

package/dist/src/ds/components/DateTimePicker/date-picker.d.ts

@@ -1,4 +1,9 @@
 import * as React from 'react';
 import { DayPicker } from 'react-day-picker';
 export type CalendarProps = React.ComponentProps<typeof DayPicker>;
-export declare function DatePicker({ className, classNames, showOutsideDays, ...props }: CalendarProps): React.JSX.Element;
+/**
+ * A month grid for picking a day or a range of days. Ranges read as one continuous band:
+ * the ends are solid inverse pills and the days between sit on a quiet fill that runs
+ * edge to edge, rounding off where a week starts or ends.
+ */
+export declare function DatePicker({ className, classNames, showOutsideDays, components, ...props }: CalendarProps): React.JSX.Element;

package/dist/src/ds/components/DateTimePicker/index.d.ts

@@ -1,3 +1,2 @@
 export * from './date-time-picker';
 export * from './date-picker';
-export * from './time-picker';

package/dist/src/ds/components/DateTimeRangePicker/custom-range-editor.d.ts

@@ -10,7 +10,8 @@ export interface CustomRangeEditorProps {
     onShowPresets: () => void;
 }
 /**
- * The custom range popover body. It mounts each time the popover opens, so its drafts
- * start from the current range without the picker resetting them.
+ * The custom range popover body: one two-month calendar where the first click picks the
+ * start and the second the end, with both ends and their times under it. It mounts each time the
+ * popover opens, so its drafts start from the current range.
  */
 export declare function CustomRangeEditor({ dateFrom, dateTo, disabled, maxRangeMs, minDate, onApply, onShowPresets, }: CustomRangeEditorProps): import("react").JSX.Element;

package/dist/src/ds/components/DropdownMenu/dropdown-menu.d.ts

@@ -37,6 +37,8 @@ type DropdownMenuItemProps = MenuPrimitive.Item.Props & {
     onSelect?: MenuPrimitive.Item.Props['onClick'];
 };
 declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/** A menu row that navigates. Pass `render` to route it through your framework's link. */
+declare const DropdownMenuLinkItem: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").MenuLinkItemProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
 declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").MenuCheckboxItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").MenuRadioItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuLabel: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
@@ -78,6 +80,7 @@ declare namespace DropdownMenu {
     export { DropdownMenuGroup as Group };
     export { DropdownMenuPortal as Portal };
     export { DropdownMenuItem as Item };
+    export { DropdownMenuLinkItem as LinkItem };
     export { DropdownMenuCheckboxItem as CheckboxItem };
     export { DropdownMenuRadioItem as RadioItem };
     export { DropdownMenuLabel as Label };

package/dist/src/ds/components/Message/message-timestamp.d.ts

@@ -1,3 +1,4 @@
+/** When a message was sent, as how long ago, kept current; the full date and time show on hover. */
 export declare function MessageTimestamp({ value }: {
     value: Date | string;
 }): import("react").JSX.Element | null;

package/dist/src/ds/components/MessageScroller/message-scroller-context.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { MessageScrollerVisibilityStore } from './message-scroller-visibility-store';
 export type MessageScrollerDefaultScrollPosition = 'start' | 'end' | 'last-anchor';
 export type MessageScrollerButtonDirection = 'start' | 'end';
 export type MessageScrollerScrollAlign = 'start' | 'center' | 'end' | 'nearest';
@@ -36,7 +37,7 @@ export declare const DEFAULT_REACH_START_THRESHOLD = 160;
 export declare const AUTO_SCROLL_ATTACH_THRESHOLD = 160;
 export declare const MessageScrollerActionsContext: React.Context<MessageScrollerActionsContextValue | null>;
 export declare const MessageScrollerScrollableContext: React.Context<MessageScrollerScrollable | null>;
-export declare const MessageScrollerVisibilityContext: React.Context<MessageScrollerVisibility | null>;
+export declare const MessageScrollerVisibilityContext: React.Context<MessageScrollerVisibilityStore | null>;
 export declare const useRequiredMessageScrollerActionsContext: (hookName: string) => MessageScrollerActionsContextValue;
 export declare const useRequiredMessageScrollerScrollableContext: (hookName: string) => MessageScrollerScrollable;
-export declare const useRequiredMessageScrollerVisibilityContext: (hookName: string) => MessageScrollerVisibility;
+export declare const useRequiredMessageScrollerVisibilityContext: (hookName: string) => MessageScrollerVisibilityStore;

package/dist/src/ds/components/MessageScroller/message-scroller-geometry.d.ts

@@ -26,7 +26,7 @@ export declare const getScrollTarget: ({ align, contentElement, element, scrollM
     viewportElement: HTMLElement;
 }) => number;
 /**
- * Where the reader must sit for the last row to rest at the end of the view.
+ * Where the reader must sit for the last drawn row to rest at the end of the view.
  *
  * Not the end of the scroll: a chat reserves room under a live turn so a reply
  * grows into empty space, and docks its composer in the flow. Both sit below the

package/dist/src/ds/components/MessageScroller/message-scroller-hooks.d.ts

@@ -16,11 +16,5 @@ export declare const useOptionalMessageScrollerScrollable: () => {
     start: boolean;
     end: boolean;
 } | undefined;
-export declare const useMessageScrollerVisibility: () => {
-    currentAnchorId: string | undefined;
-    visibleMessageIds: string[];
-};
-export declare const useOptionalMessageScrollerVisibility: () => {
-    currentAnchorId: string | undefined;
-    visibleMessageIds: string[];
-} | undefined;
+export declare const useMessageScrollerVisibility: () => import("./message-scroller-context").MessageScrollerVisibility;
+export declare const useOptionalMessageScrollerVisibility: () => import("./message-scroller-context").MessageScrollerVisibility | undefined;

package/dist/src/ds/components/MessageScroller/message-scroller-visibility-store.d.ts

@@ -0,0 +1,8 @@
+import type { MessageScrollerVisibility } from './message-scroller-context';
+/** Changes nearly every scroll frame: a context value would make React walk the whole transcript on each change. */
+export interface MessageScrollerVisibilityStore {
+    getSnapshot: () => MessageScrollerVisibility;
+    subscribe: (onChange: () => void) => () => void;
+    publish: (next: MessageScrollerVisibility) => void;
+}
+export declare function createVisibilityStore(): MessageScrollerVisibilityStore;

package/dist/src/ds/components/Metadata/index.d.ts

@@ -0,0 +1,2 @@
+export { Metadata } from './metadata';
+export type { MetadataProps } from './metadata';

package/dist/src/ds/components/Metadata/metadata.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentProps } from 'react';
+export type MetadataProps = ComponentProps<'span'> & {
+    singleLine?: boolean;
+};
+export declare function Metadata({ singleLine, className, ...props }: MetadataProps): import("react").JSX.Element;
+export declare namespace Metadata {
+    export { MetadataItem as Item };
+}
+declare function MetadataItem({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
+export {};

package/dist/src/ds/components/MetricsCard/index.d.ts

@@ -1,3 +1,4 @@
 export { MetricsCard } from './metrics-card';
+export type { MetricsCardDragHandleProps } from './metrics-card-drag-handle';
 export type { MetricsCardTitleMenuProps } from './metrics-card-title-menu';
 export type { MetricsCardTotalPart } from './metrics-card-total';

package/dist/src/ds/components/MetricsCard/metrics-card-drag-handle.d.ts

@@ -0,0 +1,12 @@
+import type { DragEventHandler } from 'react';
+/** What a host's layout hands a card so it can be dragged, e.g. to rearrange a dashboard. */
+export type MetricsCardDragHandleProps = {
+    /** What dragging does, e.g. "Move widget". */
+    'aria-label': string;
+    draggable?: boolean;
+    onDragStart?: DragEventHandler<HTMLElement>;
+    onDragEnd?: DragEventHandler<HTMLElement>;
+    className?: string;
+};
+/** The grip a card is dragged by, left of its title. Its negative margin keeps the top bar's height. */
+export declare function MetricsCardDragHandle({ className, ...props }: MetricsCardDragHandleProps): import("react").JSX.Element;

package/dist/src/ds/components/MetricsCard/metrics-card.d.ts

@@ -1,5 +1,6 @@
 import { MetricsCardActions } from './metrics-card-actions';
 import { MetricsCardContent } from './metrics-card-content';
+import { MetricsCardDragHandle } from './metrics-card-drag-handle';
 import { MetricsCardError } from './metrics-card-error';
 import { MetricsCardHeadline } from './metrics-card-headline';
 import { MetricsCardLoading } from './metrics-card-loading';
@@ -28,6 +29,7 @@ export declare const MetricsCard: typeof MetricsCardRoot & {
     TopBar: typeof MetricsCardTopBar;
     Toolbar: typeof MetricsCardToolbar;
     Actions: typeof MetricsCardActions;
+    DragHandle: typeof MetricsCardDragHandle;
     Title: typeof MetricsCardTitle;
     TitleMenu: typeof MetricsCardTitleMenu;
     Total: typeof MetricsCardTotal;

package/dist/src/ds/components/Steps/index.d.ts

@@ -2,3 +2,4 @@ export * from './process-step-list-item';
 export * from './process-step-list';
 export * from './process-step-progress-bar';
 export * from './shared';
+export * from './steps';

package/dist/src/ds/components/Steps/step.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+export type StepProps = {
+    title: ReactNode;
+    /** One or two lines under the title. */
+    description?: ReactNode;
+    /** Sits at the end of the title row: a docs link, a toggle. */
+    action?: ReactNode;
+    /** Swaps the number for a check. */
+    done?: boolean;
+    className?: string;
+    children?: ReactNode;
+};
+export declare function Step({ title, description, action, done, className, children }: StepProps): import("react").JSX.Element;

package/dist/src/ds/components/Steps/steps-context.d.ts

@@ -0,0 +1,2 @@
+export type StepsHeadingLevel = 2 | 3;
+export declare const StepsHeadingContext: import("react").Context<StepsHeadingLevel>;

package/dist/src/ds/components/Steps/steps-root.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+import type { StepsHeadingLevel } from './steps-context';
+export type StepsProps = {
+    /**
+     * Heading level for every step title. Pick the one that continues the page's outline: a page
+     * whose last heading is the `h1` title wants 2.
+     */
+    headingLevel?: StepsHeadingLevel;
+    className?: string;
+    children: ReactNode;
+};
+/**
+ * A numbered vertical rail for setup guides, like the steps in docs: a marker per step, a line to
+ * the next one, and the step's content to the right without a card around it. Steps number
+ * themselves in render order, so a caller can render them conditionally or compose them from
+ * several components without breaking the sequence.
+ */
+export declare function StepsRoot({ headingLevel, className, children }: StepsProps): import("react").JSX.Element;

package/dist/src/ds/components/Steps/steps.d.ts

@@ -0,0 +1,7 @@
+import { Step } from './step';
+import { StepsRoot } from './steps-root';
+export { type StepsProps } from './steps-root';
+export { type StepProps } from './step';
+export declare const Steps: typeof StepsRoot & {
+    Step: typeof Step;
+};

package/dist/src/ds/components/Tree/tree-label.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export interface TreeLabelProps {
+export interface TreeLabelProps extends React.HTMLAttributes<HTMLSpanElement> {
     className?: string;
     children: React.ReactNode;
 }

package/dist/src/ds/components/ai/annotations/annotatable-selection.d.ts

@@ -0,0 +1,25 @@
+export interface AnnotatablePart {
+    element: Element;
+    range: Range;
+    extendsPastContent: boolean;
+}
+export interface SelectionAnchor {
+    getBoundingClientRect: () => DOMRect;
+    /** Lets the positioner find the scroll containers it has to follow. */
+    contextElement: Element;
+}
+export declare function findAnnotatablePart(container: Element, range: Range): AnnotatablePart | undefined;
+export declare function clampSelection(selection: Selection, part: AnnotatablePart): void;
+export declare function selectionAnchor(part: AnnotatablePart): SelectionAnchor;
+/** Offsets rather than a `Range`, so the mark survives the message re-rendering its text nodes. */
+export interface AnnotationSource {
+    element: Element;
+    start: number;
+    end: number;
+    text: string;
+    textBefore: string;
+    textAfter: string;
+}
+export declare function annotationSource({ element, range }: AnnotatablePart): AnnotationSource;
+export declare function rangeFromSource(source: AnnotationSource): Range | undefined;
+export declare function passageEndRect(range: Range): DOMRect | undefined;

package/dist/src/ds/components/ai/annotations/annotation-comment-card.d.ts

@@ -0,0 +1,11 @@
+import type { Ref } from 'react';
+import type { ChatAnnotation } from './chat-annotations';
+export interface AnnotationCommentCardProps {
+    annotation: ChatAnnotation;
+    number: number;
+    commentRef?: Ref<HTMLTextAreaElement>;
+    onCommentChange: (comment: string) => void;
+    onRemove: () => void;
+    onDone: () => void;
+}
+export declare function AnnotationCommentCard({ annotation, number, commentRef, onCommentChange, onRemove, onDone, }: AnnotationCommentCardProps): import("react").JSX.Element;

package/dist/src/ds/components/ai/annotations/annotation-comment-popover.d.ts

@@ -0,0 +1,15 @@
+import type { ChatAnnotation } from './chat-annotations';
+export interface CommentCard {
+    id: string;
+    anchor: HTMLElement;
+    open: boolean;
+}
+export interface AnnotationCommentPopoverProps {
+    card: CommentCard;
+    annotation: ChatAnnotation;
+    number: number;
+    onCommentChange: (comment: string) => void;
+    onRemove: () => void;
+    onClose: () => void;
+}
+export declare function AnnotationCommentPopover({ card, annotation, number, onCommentChange, onRemove, onClose, }: AnnotationCommentPopoverProps): import("react").JSX.Element;

package/dist/src/ds/components/ai/annotations/annotation-highlights.d.ts

@@ -0,0 +1 @@
+export declare function paintHighlights(transcriptId: string, ranges: Range[], active: Range | undefined): void;

package/dist/src/ds/components/ai/annotations/annotation-marker.d.ts

@@ -0,0 +1,13 @@
+import type { Ref } from 'react';
+export interface AnnotationMarkerProps {
+    ref: Ref<HTMLButtonElement>;
+    commented: boolean;
+    number: number;
+    active: boolean;
+    expanded: boolean;
+    onHoverStart: () => void;
+    onHoverEnd: () => void;
+    onToggle: (anchor: HTMLElement) => void;
+}
+/** Starts hidden: `AnnotationMarkers` shows it once the passage is laid out. */
+export declare function AnnotationMarker({ ref, commented, number, active, expanded, onHoverStart, onHoverEnd, onToggle, }: AnnotationMarkerProps): import("react").JSX.Element;

package/dist/src/ds/components/ai/annotations/annotation-markers.d.ts

@@ -0,0 +1,9 @@
+import type { RefObject } from 'react';
+import type { ChatAnnotation } from './chat-annotations';
+export interface AnnotationMarkersProps {
+    containerRef: RefObject<Element | null>;
+    annotations: readonly ChatAnnotation[];
+    onCommentChange: (id: string, comment: string) => void;
+    onRemove: (id: string) => void;
+}
+export declare function AnnotationMarkers({ containerRef, annotations, onCommentChange, onRemove }: AnnotationMarkersProps): import("react").JSX.Element;

package/dist/src/ds/components/ai/annotations/annotation-number.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentPropsWithoutRef } from 'react';
+/** The square bottom-left corner is the bubble's tail: in the transcript it touches the end of its passage. */
+export declare const annotationBubbleStyle = "inline-flex h-4.5 min-w-4.5 shrink-0 items-center justify-center gap-0.5 rounded-full rounded-bl-xs bg-info-indicator px-1.25 text-column leading-none text-background tabular-nums";
+export declare function AnnotationNumber({ className, ...props }: ComponentPropsWithoutRef<'span'>): import("react").JSX.Element;

package/dist/src/ds/components/ai/annotations/annotation-selection-toolbar.d.ts

@@ -0,0 +1,7 @@
+import type { RefObject } from 'react';
+import type { NewChatAnnotation } from './chat-annotations';
+export interface AnnotationSelectionToolbarProps {
+    containerRef: RefObject<HTMLElement | null>;
+    onAnnotate: (annotation: NewChatAnnotation) => void;
+}
+export declare function AnnotationSelectionToolbar({ containerRef, onAnnotate }: AnnotationSelectionToolbarProps): import("react").JSX.Element;

package/dist/src/ds/components/ai/annotations/chat-annotations.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+import type { AnnotationSource } from './annotatable-selection';
+export interface ChatAnnotation {
+    id: string;
+    text: string;
+    source: AnnotationSource;
+    comment?: string;
+}
+export declare const visibleComment: (annotation: ChatAnnotation) => string | undefined;
+export type NewChatAnnotation = Pick<ChatAnnotation, 'text' | 'source'>;
+export interface ChatAnnotationsApi {
+    /** In the order they were added: an annotation's number is its position. */
+    annotations: ChatAnnotation[];
+    /** Ignores blank text and a passage already waiting. */
+    addAnnotation: (annotation: NewChatAnnotation) => void;
+    removeAnnotation: (id: string) => void;
+    setAnnotationComment: (id: string, comment: string) => void;
+    /** Hands every waiting annotation to the message being sent and clears them from the chat. */
+    takeAnnotations: () => ChatAnnotation[];
+    /** Puts the annotations of a message that failed to send back, ahead of any added since. */
+    restoreAnnotations: (annotations: readonly ChatAnnotation[]) => void;
+}
+/** Mount it below whatever remounts when the thread changes, so annotations stay with their thread. */
+export declare function ChatAnnotationsProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useChatAnnotations(): ChatAnnotationsApi;

package/dist/src/ds/components/ai/annotations/composer-annotation-list.d.ts

@@ -0,0 +1,6 @@
+import type { ChatAnnotation } from './chat-annotations';
+export interface ComposerAnnotationListProps {
+    annotations: readonly ChatAnnotation[];
+    onRemove: (id: string) => void;
+}
+export declare function ComposerAnnotationList({ annotations, onRemove }: ComposerAnnotationListProps): import("react").JSX.Element;

package/dist/src/ds/components/ai/annotations/composer-annotations.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The waiting annotations as one chip at the top of `ComposerBox`, wired to
+ * `ChatAnnotationsProvider`. Renders nothing while none is waiting.
+ */
+export declare function ComposerAnnotations(): import("react").JSX.Element | null;

package/dist/src/ds/components/ai/annotations/format-annotated-message.d.ts

@@ -0,0 +1,11 @@
+export declare function normalizeAnnotationText(text: string): string;
+export interface AnnotatedPassage {
+    text: string;
+    comment?: string;
+}
+/**
+ * The message the agent receives: the annotations as a numbered Markdown list, each holding its passage
+ * as a blockquote and any comment on it, then what the person typed. The list keeps a comment on the
+ * last passage apart from the typed message.
+ */
+export declare function formatAnnotatedMessage(text: string, annotations: readonly AnnotatedPassage[]): string;

package/dist/src/ds/components/ai/annotations/index.d.ts

@@ -0,0 +1,5 @@
+export { ChatAnnotationsProvider, useChatAnnotations } from './chat-annotations';
+export type { ChatAnnotation } from './chat-annotations';
+export { TranscriptAnnotations } from './transcript-annotations';
+export { ComposerAnnotations } from './composer-annotations';
+export { formatAnnotatedMessage } from './format-annotated-message';

package/dist/src/ds/components/ai/annotations/transcript-annotations.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Everything annotations add to a transcript, wired to `ChatAnnotationsProvider`: Add to chat over
+ * selected text, and the numbered comment bubbles of what was added. Render it inside
+ * `ChatShell.Transcript`; adding an annotation focuses the `ComposerInput` in `ChatShell.Dock`.
+ */
+export declare function TranscriptAnnotations(): import("react").JSX.Element;

package/dist/src/ds/components/ai/annotations/use-annotation-placement.d.ts

@@ -0,0 +1,11 @@
+import type { RefObject } from 'react';
+import type { ChatAnnotation } from './chat-annotations';
+export interface AnnotationPlacementOptions {
+    containerRef: RefObject<Element | null>;
+    annotations: readonly ChatAnnotation[];
+    emphasized: string | undefined;
+}
+export declare function useAnnotationPlacement({ containerRef, annotations, emphasized }: AnnotationPlacementOptions): {
+    layerRef: RefObject<HTMLDivElement | null>;
+    markerRef: (id: string) => (marker: HTMLButtonElement | null) => (() => void) | undefined;
+};

package/dist/src/ds/components/ai/annotations/use-annotation-selection.d.ts

@@ -0,0 +1,12 @@
+import type { RefObject } from 'react';
+import type { SelectionAnchor, AnnotationSource } from './annotatable-selection';
+export interface AnnotationSelection {
+    text: string;
+    source: AnnotationSource;
+    anchor: SelectionAnchor;
+}
+export declare function useAnnotationSelection(containerRef: RefObject<Element | null>, toolbarRef: RefObject<Element | null>): {
+    open: boolean;
+    selection: AnnotationSelection | undefined;
+    dismiss: () => void;
+};

package/dist/src/ds/components/ai/tool-call/index.d.ts

@@ -1,10 +1,13 @@
 export * from './ansi';
 export * from './group-consecutive';
 export * from './tool-call-mono';
+export * from './tool-call-body';
+export * from './tool-call-exit-status';
 export * from './tool-call-arguments';
 export * from './tool-call-edit';
 export * from './tool-call-group';
 export * from './tool-call-output';
+export * from './tool-call-view';
 export * from './tool-presentation';
 export * from './tool-phrases';
 export { ToolCallTime } from './tool-call-time';