@tulipfarm/sprout 0.0.0-stage → 0.2.0

package/dist/components/tool-activity.js

@@ -0,0 +1,226 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState, } from "react";
+import { Check } from "reicon-react/icons/Check";
+import { ChevronDown } from "reicon-react/icons/ChevronDown";
+import { Command } from "reicon-react/icons/Command";
+import { Danger } from "reicon-react/icons/Danger";
+import { Globe } from "reicon-react/icons/Globe";
+import { Stop3 } from "reicon-react/icons/Stop3";
+import { cn } from "../internal/classes.js";
+import { Button } from "./button.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "./collapsible.js";
+import { Spinner } from "./spinner.js";
+export const toolActivityStatusNames = [
+    "queued",
+    "running",
+    "waiting",
+    "completed",
+    "blocked",
+    "failed",
+    "cancelled",
+    "unknown",
+];
+export const toolActivityVariantNames = [
+    "collapsible",
+    "stepper",
+    "transcript",
+];
+const statusText = {
+    queued: "Pending",
+    running: "In progress",
+    waiting: "Waiting",
+    completed: "Completed",
+    blocked: "Access denied",
+    failed: "Failed",
+    cancelled: "Cancelled",
+    unknown: "Outcome unknown",
+};
+const visibleSourceCount = 4;
+/**
+ * A collapsible frame for live agent work. It holds a scrolling timeline,
+ * usually a stepper `ToolActivity`, and is at most 40% of its parent's height.
+ */
+export function ActivityPanel({ working, activityLabel, hasResult = false, collapseWhenDone = false, className, children, }) {
+    const [scrolled, setScrolled] = useState(false);
+    const [open, setOpen] = useState(true);
+    const settled = useRef(false);
+    useEffect(() => {
+        if (working) {
+            if (settled.current)
+                setOpen(true);
+            settled.current = false;
+        }
+        else if (!settled.current && collapseWhenDone) {
+            settled.current = true;
+            setOpen(false);
+        }
+    }, [working, collapseWhenDone]);
+    return (_jsxs(Collapsible, { open: open, onOpenChange: setOpen, "data-slot": "activity-panel", "data-has-result": hasResult || undefined, role: "region", "aria-label": "Chat activity", className: cn("sprout-activity-panel", className), children: [_jsxs(CollapsibleTrigger, { "aria-label": working
+                    ? `Working…${activityLabel ? ` ${activityLabel}` : ""}`
+                    : "Worked", className: "sprout-activity-panel-trigger", children: [working && _jsx(Spinner, { "aria-hidden": "true" }), _jsx("span", { role: "status", className: "sprout-activity-panel-status", children: working ? "Working…" : "Worked" }), working && activityLabel && (_jsx("span", { className: "sprout-activity-panel-label", children: activityLabel })), _jsx(ChevronDown, { size: 14, "aria-hidden": "true", "data-slot": "collapsible-indicator" })] }), _jsx(CollapsibleContent, { keepMounted: true, className: "sprout-activity-panel-content", children: _jsx("div", { className: "sprout-activity-panel-frame", "data-scrolled": scrolled || undefined, children: _jsx("div", { "data-slot": "activity-viewport", role: "region", "aria-label": "Activity timeline", tabIndex: 0, className: "sprout-activity-panel-viewport", onScroll: (event) => setScrolled(event.currentTarget.scrollTop > 0), children: children }) }) })] }));
+}
+function webUrl(url) {
+    try {
+        const parsed = new URL(url);
+        return parsed.protocol === "https:" || parsed.protocol === "http:"
+            ? parsed.href
+            : null;
+    }
+    catch {
+        return null;
+    }
+}
+function SourceFavicon({ url, sourceIcon, }) {
+    const src = (webUrl(url) && sourceIcon?.(url)) || null;
+    const [state, setState] = useState({ src, status: "loading" });
+    const status = state.src === src ? state.status : "loading";
+    return (_jsxs("span", { "data-slot": "source-favicon", "data-status": src ? status : "failed", "aria-hidden": "true", className: "sprout-tool-activity-favicon", children: [status !== "loaded" && _jsx(Globe, { size: 18 }), src && status !== "failed" && (_jsx("img", { src: src, alt: "", width: 20, height: 20, referrerPolicy: "no-referrer", onLoad: () => setState({ src, status: "loaded" }), onError: () => setState({ src, status: "failed" }) }))] }));
+}
+function ToolSources({ item, sourceIcon, }) {
+    const [expanded, setExpanded] = useState(false);
+    const urls = [...new Set([...(item.urls ?? []), ...(item.failedUrls ?? [])])];
+    if (!urls.length)
+        return null;
+    const titles = new Map(item.sources?.map((source) => [source.url, source.title.trim()]));
+    const visible = expanded ? urls : urls.slice(0, visibleSourceCount);
+    return (_jsxs("div", { "data-slot": "tool-sources", className: "sprout-tool-activity-sources", children: [_jsx("ul", { "aria-label": "Web sources", className: "sprout-tool-activity-source-list", children: visible.map((url) => {
+                    const failed = item.failedUrls?.includes(url) ?? false;
+                    const title = titles.get(url) || url.replace(/^https?:\/\/(?:www\.)?/, "");
+                    const href = webUrl(url);
+                    const chip = (_jsxs(_Fragment, { children: [_jsx(SourceFavicon, { url: url, sourceIcon: sourceIcon }), _jsx("span", { className: "sprout-tool-activity-source-title", children: title }), failed && (_jsxs(_Fragment, { children: [_jsx(Danger, { size: 14, "aria-hidden": "true", className: "sprout-tool-activity-source-failed" }), _jsx("span", { className: "sprout-tool-activity-sr-only", children: "Page unavailable. Retry or paste the text." })] }))] }));
+                    return (_jsx("li", { className: "sprout-tool-activity-source", children: href ? (_jsx("a", { "data-slot": "source-chip", "data-failed": failed || undefined, href: href, title: `${title}\n${url}`, target: "_blank", rel: "noopener noreferrer", className: "sprout-tool-activity-source-chip", children: chip })) : (_jsx("span", { "data-slot": "source-chip", "data-failed": failed || undefined, title: `${title}\n${url}`, className: "sprout-tool-activity-source-chip", children: chip })) }, url));
+                }) }), urls.length > visibleSourceCount && (_jsx(Button, { variant: "ghost", size: "sm", "aria-expanded": expanded, onClick: () => setExpanded((value) => !value), className: "sprout-tool-activity-more", children: expanded
+                    ? "Show fewer sources"
+                    : `${urls.length - visibleSourceCount} more` }))] }));
+}
+function StatusMark({ status }) {
+    if (status === "running")
+        return (_jsxs("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", className: "sprout-tool-activity-mark-running", children: [_jsx("circle", { cx: "8", cy: "8", r: "6", className: "sprout-tool-activity-mark-track" }), _jsx("circle", { cx: "8", cy: "8", r: "6", strokeLinecap: "round", strokeDasharray: "14 24", className: "sprout-tool-activity-mark-arc" })] }));
+    if (status === "completed")
+        return (_jsx("span", { className: "sprout-tool-activity-mark-completed", children: _jsx(Check, { size: 12, "aria-hidden": "true" }) }));
+    if (status === "waiting")
+        return (_jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", className: "sprout-tool-activity-mark-waiting", children: _jsx("circle", { cx: "8", cy: "8", r: "6", strokeDasharray: "3 2" }) }));
+    if (status === "queued")
+        return (_jsx("span", { "aria-hidden": "true", className: "sprout-tool-activity-mark-queued" }));
+    if (status === "cancelled")
+        return (_jsx(Stop3, { size: 14, "aria-hidden": "true", className: "sprout-tool-activity-mark-cancelled" }));
+    return (_jsx(Danger, { size: 14, "aria-hidden": "true", className: "sprout-tool-activity-mark-problem" }));
+}
+/**
+ * A timeline of the tools an agent used, with a status mark per row,
+ * web sources, and a summary trigger that counts problems.
+ */
+export function ToolActivity({ items, active = false, label = "Tool activity", activityLabel, onToggle, variant = "collapsible", onLoadOlder, onRetryOlder, hasOlder = false, loadingOlder = false, olderError = false, sourceIcon, className, }) {
+    const visible = variant === "stepper" ? items.slice().reverse() : items;
+    const list = useRef(null);
+    const olderSentinel = useRef(null);
+    const latestId = variant === "stepper" ? visible.at(-1)?.id : undefined;
+    useLayoutEffect(() => {
+        if (!latestId)
+            return;
+        const activity = list.current?.closest('[data-slot="activity-viewport"]');
+        if (activity)
+            activity.scrollTop = activity.scrollHeight;
+    }, [latestId]);
+    useEffect(() => {
+        if (variant !== "stepper" ||
+            !hasOlder ||
+            loadingOlder ||
+            olderError ||
+            !onLoadOlder)
+            return;
+        const target = olderSentinel.current;
+        if (!target)
+            return;
+        let mutationObserver;
+        let stopObserving;
+        const attach = () => {
+            const root = list.current?.closest('[data-slot="activity-viewport"]');
+            if (!root)
+                return false;
+            if (typeof IntersectionObserver === "undefined") {
+                const checkTop = () => {
+                    if (root.scrollTop <= 40)
+                        onLoadOlder();
+                };
+                root.addEventListener("scroll", checkTop, { passive: true });
+                stopObserving = () => root.removeEventListener("scroll", checkTop);
+            }
+            else {
+                const observer = new IntersectionObserver((entries) => {
+                    if (entries.some((entry) => entry.isIntersecting)) {
+                        observer.disconnect();
+                        onLoadOlder();
+                    }
+                }, { root, rootMargin: "40px 0px 0px" });
+                observer.observe(target);
+                stopObserving = () => observer.disconnect();
+            }
+            mutationObserver?.disconnect();
+            return true;
+        };
+        if (!attach()) {
+            mutationObserver = new MutationObserver(() => {
+                attach();
+            });
+            mutationObserver.observe(document.body, {
+                childList: true,
+                subtree: true,
+            });
+        }
+        return () => {
+            mutationObserver?.disconnect();
+            stopObserving?.();
+        };
+    }, [variant, hasOlder, loadingOlder, olderError, onLoadOlder, items.length]);
+    const running = items.some((item) => item.status === "running");
+    const working = active || running;
+    const pending = working ||
+        items.some((item) => item.status === "queued" ||
+            item.status === "waiting" ||
+            item.status === "unknown");
+    const [expansion, setExpansion] = useState({
+        pending,
+        open: variant === "transcript" ? false : pending,
+    });
+    if (variant !== "transcript" && expansion.pending !== pending)
+        setExpansion({ pending, open: pending });
+    const open = variant === "transcript" || expansion.pending === pending
+        ? expansion.open
+        : pending;
+    if (items.length === 0)
+        return active && variant === "transcript" ? (_jsxs("div", { "data-slot": "reply-progress", role: "status", className: cn("sprout-tool-activity-progress", className), children: [_jsx(Spinner, { "aria-hidden": "true" }), activityLabel || "Thinking…"] })) : null;
+    const problems = items.filter((item) => item.status === "blocked" ||
+        item.status === "failed" ||
+        item.status === "unknown").length;
+    const count = `${items.length} ${items.length === 1 ? "tool" : "tools"}`;
+    const attention = items.some((item) => item.status === "unknown")
+        ? "Outcome unconfirmed"
+        : items.some((item) => item.status === "failed")
+            ? "Some work failed"
+            : items.some((item) => item.status === "blocked")
+                ? "Access denied"
+                : items.some((item) => item.status === "waiting")
+                    ? "Waiting for input"
+                    : !working && items.some((item) => item.status === "cancelled")
+                        ? "Work cancelled"
+                        : null;
+    const title = variant === "transcript"
+        ? `${working
+            ? `Working… ${activityLabel || items.find((item) => item.status === "running")?.label || ""}`.trim()
+            : pending
+                ? "Work pending"
+                : `Tool activity · ${count}`}${attention ? ` · ${attention}` : ""}`
+        : `${working ? `Using ${count}` : pending ? `${count} waiting` : `Used ${count}`}${problems
+            ? ` · ${problems} need${problems === 1 ? "s" : ""} attention`
+            : ""}`;
+    return (_jsxs(Collapsible, { "data-slot": "tool-activity", "data-variant": variant, open: variant === "stepper" || open, onOpenChange: (next) => {
+            onToggle?.();
+            setExpansion({ pending, open: next });
+        }, className: cn("sprout-tool-activity", className), children: [variant !== "stepper" && (_jsxs(CollapsibleTrigger, { "aria-label": title, className: "sprout-tool-activity-trigger", children: [working ? (_jsx(Spinner, { "aria-hidden": "true" })) : (_jsx(Command, { size: 14, "aria-hidden": "true" })), _jsx("span", { role: "status", className: "sprout-tool-activity-title", children: title }), _jsx(ChevronDown, { size: 14, "aria-hidden": "true", "data-slot": "collapsible-indicator" })] })), _jsxs(CollapsibleContent, { children: [variant === "stepper" && loadingOlder && (_jsxs("div", { role: "status", className: "sprout-tool-activity-older", children: [_jsx(Spinner, { "aria-hidden": "true" }), "Loading earlier activity\u2026"] })), variant === "stepper" && olderError && (_jsxs("div", { role: "alert", className: "sprout-tool-activity-older", "data-tone": "danger", children: [_jsx("span", { children: "Earlier activity didn\u2019t load." }), _jsx(Button, { variant: "link", size: "sm", disabled: !onRetryOlder, onClick: onRetryOlder, children: "Retry loading" })] })), _jsxs("ol", { ref: list, "aria-label": label, className: "sprout-tool-activity-list", children: [variant === "stepper" && hasOlder && (_jsx("li", { ref: olderSentinel, "aria-hidden": "true", className: "sprout-tool-activity-sentinel" })), visible.map((item, index) => (_jsxs("li", { "data-tool-id": item.id, "data-status": item.status, className: "sprout-tool-activity-row", children: [index < visible.length - 1 && (_jsx("span", { "data-slot": "timeline-connector", "aria-hidden": "true", className: "sprout-tool-activity-connector" })), _jsxs("div", { className: "sprout-tool-activity-head", children: [_jsx("span", { "data-slot": "tool-status-mark", className: "sprout-tool-activity-mark", children: _jsx(StatusMark, { status: item.status }) }), _jsx("span", { "aria-hidden": "true", className: "sprout-tool-activity-visual", children: item.visual }), _jsxs("span", { "data-slot": "tool-row-label", className: "sprout-tool-activity-label", children: [_jsx("span", { className: "sprout-tool-activity-label-text", children: item.label }), _jsx("span", { "data-slot": "tool-status-label", role: item.status === "running" && variant !== "transcript"
+                                                            ? "status"
+                                                            : undefined, className: "sprout-tool-activity-sr-only", children: statusText[item.status] })] })] }), item.query && (_jsx("p", { "data-slot": "web-search-query", className: "sprout-tool-activity-query", children: item.query })), item.detail && (_jsx("p", { "data-slot": "tool-detail", "data-tone": item.status === "failed" || item.status === "blocked"
+                                            ? "danger"
+                                            : undefined, className: "sprout-tool-activity-detail", children: item.detail })), item.details != null && item.details !== false && (_jsx("div", { "data-slot": "tool-details", className: "sprout-tool-activity-details", children: item.details })), _jsx(ToolSources, { item: item, sourceIcon: sourceIcon })] }, item.id)))] })] })] }));
+}

package/dist/components/toolbar-status.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from "react";
+export interface ToolbarStatusProps {
+    /** Short outcome on the trigger and the popover title, like "Exported". */
+    label: string;
+    /** Full explanation. It is announced when it changes and shown in the popover. */
+    message: string;
+    /**
+     * Shows a destructive trigger and announces the message with
+     * `role="alert"`. Otherwise the trigger is outline and uses `role="status"`.
+     */
+    error?: boolean;
+    /** Follow-up actions under the message, like "Retry export". */
+    children?: ReactNode;
+    /** Opens the details once on mount, for an outcome people must read. */
+    defaultOpen?: boolean;
+}
+/**
+ * A compact toolbar button that reports the result of an action and opens its
+ * details. It replaces the action button until the person acts again.
+ */
+export declare function ToolbarStatus({ label, message, error, children, defaultOpen, }: ToolbarStatusProps): import("react").JSX.Element;

package/dist/components/toolbar-status.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children } from "react";
+import { Button } from "./button.js";
+import { Popover, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger, } from "./popover.js";
+/**
+ * A compact toolbar button that reports the result of an action and opens its
+ * details. It replaces the action button until the person acts again.
+ */
+export function ToolbarStatus({ label, message, error = false, children, defaultOpen = false, }) {
+    const tone = error ? "error" : "success";
+    const hasActions = Children.toArray(children).length > 0;
+    return (_jsxs(Popover, { defaultOpen: defaultOpen, children: [_jsx("span", { "data-slot": "toolbar-status-message", role: error ? "alert" : "status", className: "sprout-toolbar-status-message", children: message }), _jsx(PopoverTrigger, { "data-slot": "toolbar-status-trigger", "data-status": tone, className: "sprout-toolbar-status-trigger", render: _jsx(Button, { variant: error ? "destructive" : "outline", size: "sm" }), children: _jsx("span", { className: "sprout-toolbar-status-label", children: label }) }), _jsxs(PopoverContent, { "data-slot": "toolbar-status-content", "data-status": tone, align: "end", className: "sprout-toolbar-status-content", children: [_jsxs("div", { className: "sprout-toolbar-status-header", children: [_jsx(PopoverTitle, { className: "sprout-toolbar-status-title", children: label }), _jsx(PopoverDescription, { children: message })] }), hasActions && (_jsx("div", { "data-slot": "toolbar-status-actions", className: "sprout-toolbar-status-actions", children: children }))] })] }));
+}

package/dist/components/tooltip.d.ts

@@ -0,0 +1,31 @@
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+export type TooltipProviderProps = TooltipPrimitive.Provider.Props;
+/**
+ * Shares one open delay across a group of tooltips. Once one tooltip is open,
+ * moving to a neighbour opens it instantly. Defaults to no delay.
+ */
+export declare function TooltipProvider({ delay, ...props }: TooltipProviderProps): import("react").JSX.Element;
+export type TooltipProps = TooltipPrimitive.Root.Props;
+export declare function Tooltip({ onOpenChange, actionsRef, ...props }: TooltipProps): import("react").JSX.Element;
+export type TooltipTriggerProps = TooltipPrimitive.Trigger.Props;
+/**
+ * The element that opens the tooltip on hover and keyboard focus. Pass a
+ * `Button`, a link, or another component's trigger through `render`. While the
+ * tooltip shows, the trigger is described by it.
+ */
+export declare function TooltipTrigger({ render, "aria-describedby": ownDescribedBy, ...props }: TooltipTriggerProps): import("react").JSX.Element;
+type PositionerProps = Pick<TooltipPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" | "anchor" | "collisionPadding" | "collisionAvoidance" | "sticky" | "positionMethod">;
+export interface TooltipContentProps extends TooltipPrimitive.Popup.Props, PositionerProps {
+    /** Keep the tooltip in the DOM while closed. */
+    keepMounted?: TooltipPrimitive.Portal.Props["keepMounted"];
+    /** Where the portal renders. Defaults to `document.body`. */
+    container?: TooltipPrimitive.Portal.Props["container"];
+    /** Render nothing, for example while a sidebar is expanded and its labels show. */
+    hidden?: boolean;
+}
+/**
+ * The tooltip label. It renders its own portal, positioner, and arrow, so
+ * place it directly inside `Tooltip`.
+ */
+export declare function TooltipContent({ side, sideOffset, align, alignOffset, collisionPadding, collisionAvoidance, sticky, positionMethod, anchor, keepMounted, container, hidden, id, className, children, ...props }: TooltipContentProps): import("react").JSX.Element | null;
+export {};

package/dist/components/tooltip.js

@@ -0,0 +1,99 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, createContext, isValidElement, useContext, useEffect, useId, useImperativeHandle, useRef, useState, } from "react";
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+import { stateClassName } from "../internal/classes.js";
+const TooltipContext = createContext(null);
+function joinIds(...ids) {
+    return ids.filter(Boolean).join(" ") || undefined;
+}
+/**
+ * Shares one open delay across a group of tooltips. Once one tooltip is open,
+ * moving to a neighbour opens it instantly. Defaults to no delay.
+ */
+export function TooltipProvider({ delay = 0, ...props }) {
+    return _jsx(TooltipPrimitive.Provider, { delay: delay, ...props });
+}
+/**
+ * Open tooltips across the page. Base UI closes a focus-opened tooltip on blur
+ * one task late, after the next trigger has already opened its own, so opening
+ * a tooltip closes the others right away and only one ever shows.
+ */
+const openTooltips = new Set();
+export function Tooltip({ onOpenChange, actionsRef, ...props }) {
+    const id = useId();
+    const actions = useRef(null);
+    const [registered, setDescribedBy] = useState();
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(props.defaultOpen ?? false);
+    const open = props.open ?? uncontrolledOpen;
+    // A kept-mounted popup stays in the DOM while closed; only describe while open.
+    const describedBy = open ? registered : undefined;
+    useImperativeHandle(actionsRef, () => ({
+        close: () => actions.current?.close(),
+        unmount: () => actions.current?.unmount(),
+    }));
+    useEffect(() => {
+        if (!open)
+            return;
+        openTooltips.add(actions);
+        return () => {
+            openTooltips.delete(actions);
+        };
+    }, [open]);
+    return (_jsx(TooltipContext, { value: { id, describedBy, setDescribedBy }, children: _jsx(TooltipPrimitive.Root, { ...props, actionsRef: actions, onOpenChange: (next, details) => {
+                onOpenChange?.(next, details);
+                if (details.isCanceled)
+                    return;
+                if (next) {
+                    for (const other of [...openTooltips]) {
+                        if (other === actions)
+                            continue;
+                        openTooltips.delete(other);
+                        other.current?.close();
+                    }
+                    openTooltips.add(actions);
+                }
+                setUncontrolledOpen(next);
+            } }) }));
+}
+/**
+ * The element that opens the tooltip on hover and keyboard focus. Pass a
+ * `Button`, a link, or another component's trigger through `render`. While the
+ * tooltip shows, the trigger is described by it.
+ */
+export function TooltipTrigger({ render, "aria-describedby": ownDescribedBy, ...props }) {
+    const context = useContext(TooltipContext);
+    const tooltipId = context?.describedBy;
+    // Base UI lets props on the render element win, so merge the id into it.
+    const element = render;
+    const merged = tooltipId && isValidElement(element)
+        ? cloneElement(element, {
+            "aria-describedby": joinIds(element.props["aria-describedby"], ownDescribedBy, tooltipId),
+        })
+        : typeof render === "function" && tooltipId
+            ? ((renderProps, state) => render({
+                ...renderProps,
+                "aria-describedby": joinIds(renderProps["aria-describedby"], tooltipId),
+            }, state))
+            : render;
+    return (_jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props, "aria-describedby": joinIds(ownDescribedBy, tooltipId), render: merged }));
+}
+function Describe({ id }) {
+    const setDescribedBy = useContext(TooltipContext)?.setDescribedBy;
+    useEffect(() => {
+        setDescribedBy?.(id);
+        return () => setDescribedBy?.(undefined);
+    }, [id, setDescribedBy]);
+    return null;
+}
+/**
+ * The tooltip label. It renders its own portal, positioner, and arrow, so
+ * place it directly inside `Tooltip`.
+ */
+export function TooltipContent({ side = "top", sideOffset = 4, align = "center", alignOffset = 0, collisionPadding = 8, collisionAvoidance, sticky, positionMethod, anchor, keepMounted = false, container, hidden = false, id, className, children, ...props }) {
+    const context = useContext(TooltipContext);
+    if (hidden)
+        return null;
+    const popupId = id ?? context?.id;
+    return (_jsx(TooltipPrimitive.Portal, { keepMounted: keepMounted, container: container, children: _jsx(TooltipPrimitive.Positioner, { className: "sprout-tooltip-positioner", anchor: anchor, align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, collisionPadding: collisionPadding, collisionAvoidance: collisionAvoidance, sticky: sticky, positionMethod: positionMethod, children: _jsxs(TooltipPrimitive.Popup, { "data-slot": "tooltip-content", role: "tooltip", id: popupId, ...props, className: stateClassName("sprout-tooltip-content", className), children: [popupId && _jsx(Describe, { id: popupId }), children, _jsx(TooltipPrimitive.Arrow, { "data-slot": "tooltip-arrow", className: "sprout-tooltip-arrow" })] }) }) }));
+}

package/dist/components/typed-text.d.ts

@@ -0,0 +1,17 @@
+import { type ComponentProps } from "react";
+/** Milliseconds per character while typing. */
+export declare const typedTextCharacterDuration = 25;
+/** The longest a change takes to type, however long the text. */
+export declare const typedTextMaxDuration = 800;
+export interface TypedTextProps extends Omit<ComponentProps<"span">, "children"> {
+    /** The full text. A change types the new text in; the first render shows it at once. */
+    text: string;
+    /** Set `false` to show changes at once, such as a title someone renamed by hand. */
+    animate?: boolean | undefined;
+}
+/**
+ * Text that types itself in when it changes, such as a chat title an agent
+ * renamed. Screen readers get the full text at once; reduced motion skips
+ * the typing.
+ */
+export declare function TypedText({ text, animate, className, ...rest }: TypedTextProps): import("react").JSX.Element;

package/dist/components/typed-text.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from "react";
+import { cn } from "../internal/classes.js";
+/** Milliseconds per character while typing. */
+export const typedTextCharacterDuration = 25;
+/** The longest a change takes to type, however long the text. */
+export const typedTextMaxDuration = 800;
+let segmenter;
+function graphemes(text) {
+    segmenter ??= new Intl.Segmenter("und", { granularity: "grapheme" });
+    return Array.from(segmenter.segment(text), (item) => item.segment);
+}
+/**
+ * Text that types itself in when it changes, such as a chat title an agent
+ * renamed. Screen readers get the full text at once; reduced motion skips
+ * the typing.
+ */
+export function TypedText({ text, animate = true, className, ...rest }) {
+    const previous = useRef(text);
+    const [visible, setVisible] = useState(text);
+    useLayoutEffect(() => {
+        const changed = previous.current !== text;
+        previous.current = text;
+        const motion = window.matchMedia("(prefers-reduced-motion: reduce)");
+        if (!changed || !animate || motion.matches) {
+            setVisible(text);
+            return;
+        }
+        const characters = graphemes(text);
+        const start = performance.now();
+        const duration = Math.min(typedTextMaxDuration, characters.length * typedTextCharacterDuration);
+        let frame = 0;
+        setVisible(characters[0] ?? "");
+        function tick(now) {
+            const progress = duration ? Math.min(1, (now - start) / duration) : 1;
+            setVisible(characters
+                .slice(0, Math.max(1, Math.ceil(progress * characters.length)))
+                .join(""));
+            if (progress < 1)
+                frame = requestAnimationFrame(tick);
+        }
+        function reduceMotion() {
+            if (!motion.matches)
+                return;
+            cancelAnimationFrame(frame);
+            setVisible(text);
+        }
+        frame = requestAnimationFrame(tick);
+        motion.addEventListener("change", reduceMotion);
+        return () => {
+            cancelAnimationFrame(frame);
+            motion.removeEventListener("change", reduceMotion);
+        };
+    }, [text, animate]);
+    return (_jsxs("span", { "data-slot": "typed-text", "data-state": visible === text ? "idle" : "typing", className: cn("sprout-typed-text", className), ...rest, children: [_jsx("span", { className: "sprout-typed-text-sr-only", children: text }), _jsx("span", { "aria-hidden": "true", children: visible })] }));
+}

package/dist/index.d.ts

@@ -0,0 +1,90 @@
+export * from "./components/accordion.js";
+export * from "./components/alert.js";
+export * from "./components/alert-dialog.js";
+export * from "./components/aspect-ratio.js";
+export * from "./components/attachment.js";
+export * from "./components/avatar.js";
+export * from "./components/badge.js";
+export * from "./components/brand-icon.js";
+export * from "./components/breadcrumb.js";
+export * from "./components/button.js";
+export * from "./components/button-group.js";
+export * from "./components/calendar.js";
+export * from "./components/canvas.js";
+export * from "./components/card.js";
+export * from "./components/carousel.js";
+export * from "./components/chart.js";
+export * from "./components/chat-confirmation.js";
+export * from "./components/chat-input.js";
+export * from "./components/chat-plan.js";
+export * from "./components/chat-sources.js";
+export * from "./components/checkbox.js";
+export * from "./components/choice-list.js";
+export * from "./components/code-block.js";
+export * from "./components/collapsible.js";
+export * from "./components/combobox.js";
+export * from "./components/command.js";
+export * from "./components/context-menu.js";
+export * from "./components/dialog.js";
+export * from "./components/direction.js";
+export * from "./components/dropdown-menu.js";
+export * from "./components/field.js";
+export * from "./components/file-explorer.js";
+export * from "./components/file-viewer.js";
+export * from "./components/form.js";
+export * from "./components/glass-banner.js";
+export * from "./components/gradient-banner.js";
+export * from "./components/hover-card.js";
+export * from "./components/input.js";
+export * from "./components/input-group.js";
+export * from "./components/input-otp.js";
+export * from "./components/kbd.js";
+export * from "./components/label.js";
+export * from "./components/mention-list.js";
+export * from "./components/menubar.js";
+export * from "./components/message.js";
+export * from "./components/message-actions.js";
+export * from "./components/message-response.js";
+export * from "./components/message-scroller.js";
+export * from "./components/navigation-menu.js";
+export * from "./components/notice-banner.js";
+export * from "./components/page-content.js";
+export * from "./components/page-header.js";
+export * from "./components/pagination.js";
+export * from "./components/plan-outline.js";
+export * from "./components/popover.js";
+export * from "./components/progress.js";
+export * from "./components/prompt-list.js";
+export * from "./components/questionnaire.js";
+export * from "./components/radio-group.js";
+export * from "./components/reasoning-effort.js";
+export * from "./components/resizable.js";
+export * from "./components/result-card.js";
+export * from "./components/review-card.js";
+export * from "./components/rich-text-editor.js";
+export * from "./components/schema-diagram.js";
+export * from "./components/scroll-area.js";
+export * from "./components/search-dialog.js";
+export * from "./components/search-field.js";
+export * from "./components/select.js";
+export * from "./components/selection-slot.js";
+export * from "./components/separator.js";
+export * from "./components/settings-list.js";
+export * from "./components/sheet.js";
+export * from "./components/sidebar.js";
+export * from "./components/skeleton.js";
+export * from "./components/slider.js";
+export * from "./components/spinner.js";
+export * from "./components/state-panel.js";
+export * from "./components/state-sample.js";
+export * from "./components/switch.js";
+export * from "./components/table.js";
+export * from "./components/tabs.js";
+export * from "./components/textarea.js";
+export * from "./components/toast.js";
+export * from "./components/toggle.js";
+export * from "./components/toggle-group.js";
+export * from "./components/tool-activity.js";
+export * from "./components/toolbar-status.js";
+export * from "./components/tooltip.js";
+export * from "./components/typed-text.js";