@tulipfarm/sprout 0.3.1 → 0.4.0

package/dist/components/tool-activity.js

@@ -1,40 +1,36 @@
-"use client";
+'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";
+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",
+    '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",
+    queued: 'Pending',
+    running: 'In progress',
+    waiting: 'Waiting',
+    completed: 'Completed',
+    blocked: 'Access denied',
+    failed: 'Failed',
+    cancelled: 'Cancelled',
+    unknown: 'Outcome unknown',
 };
 const visibleSourceCount = 4;
 /**
@@ -56,66 +52,60 @@ export function ActivityPanel({ working, activityLabel, hasResult = false, colla
             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 }) }) })] }));
+    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;
+        return parsed.protocol === 'https:' || parsed.protocol === 'http:' ? parsed.href : null;
     }
     catch {
         return null;
     }
 }
-function SourceFavicon({ url, sourceIcon, }) {
+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" }) }))] }));
+    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, }) {
+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 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) => {
+    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 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` }))] }));
+                }) }), 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")
+    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")
+    if (status === 'completed')
         return (_jsx("span", { className: "sprout-tool-activity-mark-completed", children: _jsx(Check, { size: 12, "aria-hidden": "true" }) }));
-    if (status === "waiting")
+    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" }));
+    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;
+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;
+    const latestId = variant === 'stepper' ? visible.at(-1)?.id : undefined;
     useLayoutEffect(() => {
         if (!latestId)
             return;
@@ -124,11 +114,7 @@ export function ToolActivity({ items, active = false, label = "Tool activity", a
             activity.scrollTop = activity.scrollHeight;
     }, [latestId]);
     useEffect(() => {
-        if (variant !== "stepper" ||
-            !hasOlder ||
-            loadingOlder ||
-            olderError ||
-            !onLoadOlder)
+        if (variant !== 'stepper' || !hasOlder || loadingOlder || olderError || !onLoadOlder)
             return;
         const target = olderSentinel.current;
         if (!target)
@@ -139,21 +125,21 @@ export function ToolActivity({ items, active = false, label = "Tool activity", a
             const root = list.current?.closest('[data-slot="activity-viewport"]');
             if (!root)
                 return false;
-            if (typeof IntersectionObserver === "undefined") {
+            if (typeof IntersectionObserver === 'undefined') {
                 const checkTop = () => {
                     if (root.scrollTop <= 40)
                         onLoadOlder();
                 };
-                root.addEventListener("scroll", checkTop, { passive: true });
-                stopObserving = () => root.removeEventListener("scroll", checkTop);
+                root.addEventListener('scroll', checkTop, { passive: true });
+                stopObserving = () => root.removeEventListener('scroll', checkTop);
             }
             else {
-                const observer = new IntersectionObserver((entries) => {
-                    if (entries.some((entry) => entry.isIntersecting)) {
+                const observer = new IntersectionObserver(entries => {
+                    if (entries.some(entry => entry.isIntersecting)) {
                         observer.disconnect();
                         onLoadOlder();
                     }
-                }, { root, rootMargin: "40px 0px 0px" });
+                }, { root, rootMargin: '40px 0px 0px' });
                 observer.observe(target);
                 stopObserving = () => observer.disconnect();
             }
@@ -174,53 +160,40 @@ export function ToolActivity({ items, active = false, label = "Tool activity", a
             stopObserving?.();
         };
     }, [variant, hasOlder, loadingOlder, olderError, onLoadOlder, items.length]);
-    const running = items.some((item) => item.status === "running");
+    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 pending = working || items.some(item => item.status === 'queued' || item.status === 'waiting' || item.status === 'unknown');
     const [expansion, setExpansion] = useState({
         pending,
-        open: variant === "transcript" ? false : pending,
+        open: variant === 'transcript' ? false : pending,
     });
-    if (variant !== "transcript" && expansion.pending !== pending)
+    if (variant !== 'transcript' && expansion.pending !== pending)
         setExpansion({ pending, open: pending });
-    const open = variant === "transcript" || expansion.pending === pending
-        ? expansion.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"
+        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"
+    const title = variant === 'transcript'
         ? `${working
-            ? `Working… ${activityLabel || items.find((item) => item.status === "running")?.label || ""}`.trim()
+            ? `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) => {
+                ? '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)))] })] })] }));
+        }, 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

@@ -1,4 +1,4 @@
-import { type ReactNode } from "react";
+import { type ReactNode } from 'react';
 export interface ToolbarStatusProps {
     /** Short outcome on the trigger and the popover title, like "Exported". */
     label: string;
@@ -18,4 +18,4 @@ export interface ToolbarStatusProps {
  * 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;
+export declare function ToolbarStatus({ label, message, error, children, defaultOpen }: ToolbarStatusProps): import("react").JSX.Element;

package/dist/components/toolbar-status.js

@@ -1,14 +1,14 @@
-"use client";
+'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";
+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";
+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 }))] })] }));
+    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

@@ -1,4 +1,4 @@
-import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+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,
@@ -13,13 +13,13 @@ export type TooltipTriggerProps = TooltipPrimitive.Trigger.Props;
  * `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 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"];
+    keepMounted?: TooltipPrimitive.Portal.Props['keepMounted'];
     /** Where the portal renders. Defaults to `document.body`. */
-    container?: TooltipPrimitive.Portal.Props["container"];
+    container?: TooltipPrimitive.Portal.Props['container'];
     /** Render nothing, for example while a sidebar is expanded and its labels show. */
     hidden?: boolean;
 }

package/dist/components/tooltip.js

@@ -1,11 +1,11 @@
-"use client";
+'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";
+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;
+    return ids.filter(Boolean).join(' ') || undefined;
 }
 /**
  * Shares one open delay across a group of tooltips. Once one tooltip is open,
@@ -45,6 +45,7 @@ export function Tooltip({ onOpenChange, actionsRef, ...props }) {
                 if (details.isCanceled)
                     return;
                 if (next) {
+                    // oxlint-disable-next-line unicorn/no-useless-spread -- copy first: the loop deletes from the set.
                     for (const other of [...openTooltips]) {
                         if (other === actions)
                             continue;
@@ -61,19 +62,19 @@ export function Tooltip({ onOpenChange, actionsRef, ...props }) {
  * `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 }) {
+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),
+            'aria-describedby': joinIds(element.props['aria-describedby'], ownDescribedBy, tooltipId),
         })
-        : typeof render === "function" && tooltipId
+        : typeof render === 'function' && tooltipId
             ? ((renderProps, state) => render({
                 ...renderProps,
-                "aria-describedby": joinIds(renderProps["aria-describedby"], tooltipId),
+                '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 }));
@@ -90,10 +91,10 @@ function Describe({ id }) {
  * 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 }) {
+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" })] }) }) }));
+    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

@@ -1,9 +1,9 @@
-import { type ComponentProps } from "react";
+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"> {
+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. */

package/dist/components/typed-text.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useLayoutEffect, useRef, useState } from "react";
-import { cn } from "../internal/classes.js";
+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);
+    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
@@ -21,7 +21,7 @@ export function TypedText({ text, animate = true, className, ...rest }) {
     useLayoutEffect(() => {
         const changed = previous.current !== text;
         previous.current = text;
-        const motion = window.matchMedia("(prefers-reduced-motion: reduce)");
+        const motion = window.matchMedia('(prefers-reduced-motion: reduce)');
         if (!changed || !animate || motion.matches) {
             setVisible(text);
             return;
@@ -30,12 +30,10 @@ export function TypedText({ text, animate = true, className, ...rest }) {
         const start = performance.now();
         const duration = Math.min(typedTextMaxDuration, characters.length * typedTextCharacterDuration);
         let frame = 0;
-        setVisible(characters[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(""));
+            setVisible(characters.slice(0, Math.max(1, Math.ceil(progress * characters.length))).join(''));
             if (progress < 1)
                 frame = requestAnimationFrame(tick);
         }
@@ -46,11 +44,11 @@ export function TypedText({ text, animate = true, className, ...rest }) {
             setVisible(text);
         }
         frame = requestAnimationFrame(tick);
-        motion.addEventListener("change", reduceMotion);
+        motion.addEventListener('change', reduceMotion);
         return () => {
             cancelAnimationFrame(frame);
-            motion.removeEventListener("change", reduceMotion);
+            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 })] }));
+    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/components/view-switcher.d.ts

@@ -0,0 +1,51 @@
+import { type ComponentType, type ReactNode } from 'react';
+export interface ViewSwitcherView {
+    /** Passed back in `onValueChange`, `onAdd`, and `onClose`. */
+    id: string;
+    label: string;
+    /** Drawn at 14px in the tab and 16px in the menu. */
+    icon: ComponentType<{
+        size?: number;
+    }>;
+    /** Shows a close control on the tab. The app decides. It needs `onClose`. */
+    closable?: boolean | undefined;
+}
+export interface ViewSwitcherOption extends ViewSwitcherView {
+    /** One line about what the view is for. */
+    description: string;
+    /** Why the view cannot be added. When set, the option is disabled and shows this instead of the description. */
+    unavailable?: string | undefined;
+}
+export interface ViewSwitcherProps {
+    /** The tabs in the bar, in order. Sprout shows exactly these. */
+    views: ViewSwitcherView[];
+    /** The `id` of the active view. */
+    value: string;
+    /** Called when a tab is chosen by click or arrow keys. */
+    onValueChange: (id: string) => void;
+    /** The views in the "Add view" menu, in order. Leave out to hide the menu. */
+    options?: ViewSwitcherOption[] | undefined;
+    /**
+     * Called with the chosen option. Options that are already in `views` show a
+     * check; the app decides what choosing one does, usually switching to it.
+     */
+    onAdd?: ((id: string) => void) | undefined;
+    /** Called by a tab's close control or the Delete key. The app removes the view from `views`. */
+    onClose?: ((id: string) => void) | undefined;
+    /** Accessible name of the tab list. Defaults to "Views". */
+    label?: string | undefined;
+    /** Text of the menu button. Defaults to "Add view". */
+    addLabel?: string | undefined;
+    /** Controls at the end of the bar, such as a settings button. */
+    actions?: ReactNode;
+    /** The `id` of the panel that shows the active view. Every tab points to it with `aria-controls`. */
+    panelId?: string | undefined;
+    className?: string | undefined;
+}
+/** The `id` of a view's tab, for the panel's `aria-labelledby`. Needs the same `panelId` as the switcher. */
+export declare function viewSwitcherTabId(panelId: string, viewId: string): string;
+/**
+ * The bar of a table's open views, with an "Add view" menu. It is fully
+ * controlled: the app owns which views exist, are open, or can close.
+ */
+export declare function ViewSwitcher({ views, value, onValueChange, options, onAdd, onClose, label, addLabel, actions, panelId, className, }: ViewSwitcherProps): import("react").JSX.Element;