@tulipfarm/sprout 0.2.0 → 0.3.1

package/README.md

@@ -94,6 +94,117 @@ Each component imports from `@tulipfarm/sprout/<name>`, for example
 `@tulipfarm/sprout/dialog`. See the [component reference](https://github.com/TulipFarm/sprout/blob/main/docs/components.md)
 for notes on each one.
 
+### Bundle size
+
+<!-- bundle-size:start -->
+
+Full library: **786.4 kB** gzip. Each component path is smaller. Sizes are minified, with React and other peer dependencies left out.
+
+<details>
+<summary>Size of each component</summary>
+
+| Component           |      Raw |     Gzip |   Brotli |
+| ------------------- | -------: | -------: | -------: |
+| `accordion`         |  64.1 kB |  21.9 kB |  19.3 kB |
+| `agent-fanout`      | 260.9 kB |  86.7 kB |  74.6 kB |
+| `alert`             |  35.2 kB |  11.5 kB |  10.1 kB |
+| `alert-dialog`      | 169.1 kB |  57.0 kB |  49.8 kB |
+| `aspect-ratio`      |  30.2 kB |   9.7 kB |   8.5 kB |
+| `attachment`        | 459.9 kB | 155.6 kB | 128.6 kB |
+| `avatar`            |  45.5 kB |  15.4 kB |  13.6 kB |
+| `badge`             |  34.9 kB |  11.4 kB |  10.0 kB |
+| `brand-icon`        | 195.1 kB |  70.2 kB |  61.2 kB |
+| `breadcrumb`        |  40.5 kB |  13.4 kB |  11.7 kB |
+| `button`            |  50.5 kB |  16.7 kB |  14.6 kB |
+| `button-group`      |  37.9 kB |  12.1 kB |  10.7 kB |
+| `calendar`          | 312.3 kB | 103.5 kB |  88.2 kB |
+| `canvas`            | 235.1 kB |  80.8 kB |  69.2 kB |
+| `card`              |  35.4 kB |  11.6 kB |  10.1 kB |
+| `carousel`          |  60.4 kB |  19.9 kB |  17.6 kB |
+| `chart`             | 393.4 kB | 119.0 kB | 101.3 kB |
+| `chat-confirmation` |  76.7 kB |  25.8 kB |  22.4 kB |
+| `chat-plan`         |  42.3 kB |  13.4 kB |  11.7 kB |
+| `chat-sources`      | 206.2 kB |  70.5 kB |  60.3 kB |
+| `chat-input`        | 962.4 kB | 317.0 kB | 261.5 kB |
+| `checkbox`          |  60.0 kB |  21.0 kB |  18.5 kB |
+| `choice-list`       |  43.0 kB |  14.5 kB |  12.6 kB |
+| `code-block`        |  74.4 kB |  25.9 kB |  22.3 kB |
+| `collapsible`       |  55.5 kB |  18.7 kB |  16.5 kB |
+| `combobox`          | 268.6 kB |  90.9 kB |  77.7 kB |
+| `command`           | 181.9 kB |  61.6 kB |  53.5 kB |
+| `context-menu`      | 242.8 kB |  81.0 kB |  69.7 kB |
+| `dialog`            | 170.7 kB |  57.5 kB |  50.2 kB |
+| `direction`         |   1.4 kB |   0.7 kB |   0.7 kB |
+| `dropdown-menu`     | 239.6 kB |  80.0 kB |  69.2 kB |
+| `field`             |  97.9 kB |  34.2 kB |  29.5 kB |
+| `file-explorer`     | 527.9 kB | 180.1 kB | 147.5 kB |
+| `file-viewer`       | 459.5 kB | 155.5 kB | 128.4 kB |
+| `form`              | 109.7 kB |  37.3 kB |  32.2 kB |
+| `glass-banner`      |  33.0 kB |  10.6 kB |   9.4 kB |
+| `gradient-banner`   |  32.2 kB |  10.3 kB |   9.1 kB |
+| `hover-card`        | 163.2 kB |  56.3 kB |  49.1 kB |
+| `input`             | 108.2 kB |  37.4 kB |  32.3 kB |
+| `input-group`       | 119.1 kB |  40.5 kB |  34.8 kB |
+| `input-otp`         |  65.3 kB |  22.9 kB |  20.3 kB |
+| `kbd`               |  30.4 kB |   9.7 kB |   8.5 kB |
+| `label`             |  30.2 kB |   9.6 kB |   8.4 kB |
+| `mention-list`      |  52.6 kB |  17.2 kB |  15.2 kB |
+| `menubar`           | 244.9 kB |  82.2 kB |  70.7 kB |
+| `message`           |  36.2 kB |  11.7 kB |  10.3 kB |
+| `message-actions`   |  71.4 kB |  24.9 kB |  20.8 kB |
+| `message-response`  | 232.7 kB |  74.2 kB |  64.2 kB |
+| `message-scroller`  |  69.0 kB |  22.1 kB |  19.6 kB |
+| `navigation-menu`   | 182.3 kB |  63.0 kB |  54.7 kB |
+| `notice-banner`     |  30.4 kB |   9.7 kB |   8.5 kB |
+| `page-content`      |  30.2 kB |   9.6 kB |   8.4 kB |
+| `page-header`       |  54.6 kB |  17.6 kB |  15.5 kB |
+| `pagination`        |  55.3 kB |  17.9 kB |  15.6 kB |
+| `plan-outline`      |  79.9 kB |  26.4 kB |  22.9 kB |
+| `popover`           | 178.0 kB |  60.7 kB |  52.6 kB |
+| `presence-cursor`   |  30.8 kB |   9.9 kB |   8.6 kB |
+| `progress`          |  39.8 kB |  13.2 kB |  11.6 kB |
+| `prompt-list`       | 199.0 kB |  71.9 kB |  62.6 kB |
+| `questionnaire`     |  69.5 kB |  23.3 kB |  20.4 kB |
+| `radio-group`       |  80.8 kB |  27.9 kB |  24.7 kB |
+| `reasoning-effort`  |  35.5 kB |  12.0 kB |  10.5 kB |
+| `resizable`         |  39.4 kB |  13.4 kB |  11.8 kB |
+| `result-card`       | 240.3 kB |  85.1 kB |  72.1 kB |
+| `review-card`       |  61.6 kB |  21.0 kB |  18.4 kB |
+| `rich-text-editor`  | 442.5 kB | 140.2 kB | 119.8 kB |
+| `schema-diagram`    | 247.9 kB |  82.9 kB |  71.2 kB |
+| `sql-viewer`        | 265.6 kB |  89.1 kB |  76.3 kB |
+| `scroll-area`       |  57.3 kB |  19.7 kB |  17.4 kB |
+| `search-dialog`     | 190.2 kB |  64.6 kB |  55.5 kB |
+| `search-field`      | 122.2 kB |  41.4 kB |  35.5 kB |
+| `select`            | 230.4 kB |  79.3 kB |  67.8 kB |
+| `selection-slot`    |  31.5 kB |  10.2 kB |   8.9 kB |
+| `separator`         |  36.9 kB |  11.9 kB |  10.5 kB |
+| `settings-list`     |  31.1 kB |   9.9 kB |   8.7 kB |
+| `sheet`             | 213.4 kB |  72.9 kB |  63.2 kB |
+| `sidebar`           | 251.1 kB |  85.8 kB |  72.8 kB |
+| `skeleton`          |  35.1 kB |  11.5 kB |  10.1 kB |
+| `slider`            |  83.6 kB |  29.5 kB |  25.9 kB |
+| `spinner`           |  36.5 kB |  11.6 kB |  10.1 kB |
+| `state-panel`       | 459.7 kB | 155.6 kB | 128.5 kB |
+| `state-sample`      |  33.5 kB |  10.5 kB |   9.2 kB |
+| `switch`            |  50.3 kB |  17.3 kB |  15.3 kB |
+| `table`             | 536.6 kB | 171.9 kB | 144.4 kB |
+| `table-nuqs`        |   2.1 kB |   1.1 kB |   1.0 kB |
+| `tabs`              |  80.2 kB |  27.6 kB |  24.4 kB |
+| `textarea`          |  98.2 kB |  34.2 kB |  29.5 kB |
+| `toast`             | 189.5 kB |  65.2 kB |  56.7 kB |
+| `toggle`            |  46.1 kB |  15.7 kB |  13.8 kB |
+| `toggle-group`      |  67.1 kB |  23.0 kB |  20.3 kB |
+| `tool-activity`     |  86.7 kB |  29.2 kB |  25.2 kB |
+| `toolbar-status`    | 189.3 kB |  64.3 kB |  55.6 kB |
+| `tooltip`           | 164.7 kB |  56.7 kB |  49.4 kB |
+| `typed-text`        |  31.2 kB |  10.1 kB |   8.8 kB |
+
+</details>
+<!-- bundle-size:end -->
+
+CI compares sizes on each pull request. Run `pnpm size` to see them locally.
+
 | Group                   | Components                                                                                                                                                                                                                                                     |
 | ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Actions**             | Button · Button Group · Toggle · Toggle Group · Toolbar Status · Kbd                                                                                                                                                                                           |

package/dist/components/agent-fanout.d.ts

@@ -0,0 +1,46 @@
+import { type ReactNode } from "react";
+export declare const agentFanoutStatusNames: readonly ["queued", "working", "done", "failed", "stopped"];
+export declare const agentFanoutStateNames: readonly ["running", "done", "stopped"];
+export type AgentFanoutStatus = (typeof agentFanoutStatusNames)[number];
+export type AgentFanoutState = (typeof agentFanoutStateNames)[number];
+export interface AgentFanoutAgent {
+    id: string;
+    name: string;
+    /** A 16px icon for the subagent's role. */
+    icon: ReactNode;
+    /** What the subagent was asked to do, such as “Web search”. */
+    task: string;
+    /** What it found. Replaces `task` once the subagent is done or failed. */
+    result?: string | undefined;
+    status: AgentFanoutStatus;
+    /** How long the subagent took, in ms. Shown once it is done. */
+    duration?: number | undefined;
+    /** Any CSS color. Defaults to the next of five `--sprout-chart-*` colors. */
+    color?: string | undefined;
+    /** Subagents this agent calls in turn. They take its color. */
+    agents?: AgentFanoutAgent[] | undefined;
+}
+export interface AgentFanoutProps {
+    /** The parent agent's task, shown above the graph. */
+    task: ReactNode;
+    agents: AgentFanoutAgent[];
+    /** The parent agent. `done` once it has merged the results into an answer. */
+    state?: AgentFanoutState | undefined;
+    /** Time since the parent started, in ms. */
+    elapsed?: number | undefined;
+    /** Replaces the footer text that names the current phase. */
+    label?: ReactNode;
+    /** Shows the per-agent list at first. It starts closed. */
+    defaultOpen?: boolean | undefined;
+    /** Shows a Stop button while the parent is running. */
+    onStop?: (() => void) | undefined;
+    /** Shows a Run again button once the parent is done or stopped. */
+    onRestart?: (() => void) | undefined;
+    className?: string | undefined;
+}
+/**
+ * A parent agent that hands one task to several subagents and merges what
+ * they find. Each status change sends a pulse along the subagent's line:
+ * down when it starts, back up when it finishes.
+ */
+export declare function AgentFanout({ task, agents, state, elapsed, label, defaultOpen, onStop, onRestart, className, }: AgentFanoutProps): import("react").JSX.Element;

package/dist/components/agent-fanout.js

@@ -0,0 +1,228 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { BaseEdge, EdgeLabelRenderer, Handle, Position, ReactFlow, } from "@xyflow/react";
+import { useLayoutEffect, useRef, useState, } from "react";
+import { Check } from "reicon-react/icons/Check";
+import { ChevronDown } from "reicon-react/icons/ChevronDown";
+import { Danger } from "reicon-react/icons/Danger";
+import { MinusCircle } from "reicon-react/icons/MinusCircle";
+import { RotateLeft } from "reicon-react/icons/RotateLeft";
+import { Sparkle } from "reicon-react/icons/Sparkle";
+import { cn } from "../internal/classes.js";
+import { Button } from "./button.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "./collapsible.js";
+export const agentFanoutStatusNames = [
+    "queued",
+    "working",
+    "done",
+    "failed",
+    "stopped",
+];
+export const agentFanoutStateNames = ["running", "done", "stopped"];
+const rootTop = 12;
+const rootSize = 44;
+const levelTop = 120;
+const levelGap = 108;
+const nodeLabel = 22;
+const bottomGap = 36;
+const colorCount = 5;
+const statusText = {
+    queued: "Queued",
+    working: "Working",
+    done: "Done",
+    failed: "Failed",
+    stopped: "Stopped",
+};
+const seconds = (ms) => `${(ms / 1000).toFixed(1)}s`;
+function phaseText(agents, state, elapsed) {
+    const time = elapsed === undefined ? "" : seconds(elapsed);
+    if (state === "done") {
+        const merged = agents.filter((agent) => agent.status === "done").length;
+        return {
+            text: `Merged ${merged} ${merged === 1 ? "result" : "results"}${time && ` in ${time}`}`,
+            time: "",
+        };
+    }
+    if (state === "stopped")
+        return { text: time ? `Stopped after ${time}` : "Stopped", time: "" };
+    const settled = agents.filter((agent) => agent.status === "done" || agent.status === "failed").length;
+    const text = agents.every((agent) => agent.status === "queued")
+        ? "Delegating work"
+        : settled === agents.length
+            ? "Composing answer"
+            : settled > 0
+                ? "Merging results"
+                : "Specialists working";
+    return { text, time };
+}
+function useWidth() {
+    const ref = useRef(null);
+    const [width, setWidth] = useState(0);
+    useLayoutEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        setWidth(element.clientWidth);
+        const observer = new ResizeObserver(() => setWidth(element.clientWidth));
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, []);
+    return [ref, width];
+}
+/** Every agent in tree order, with the parent it reports to. */
+function flatten(agents, initial, parent = rootId, depth = 1, color) {
+    return agents.flatMap((agent, index) => {
+        const own = agent.color ?? color ?? `var(--sprout-chart-${(index % colorCount) + 1})`;
+        const changed = initial.get(agent.id) !== agent.status;
+        const line = {
+            agent,
+            parent,
+            depth,
+            changed: changed || undefined,
+            trip: !changed
+                ? null
+                : agent.status === "working"
+                    ? "out"
+                    : agent.status === "done"
+                        ? "back"
+                        : null,
+            style: {
+                "--sprout-agent-fanout-color": own,
+                "--sprout-agent-fanout-index": index,
+                "--sprout-agent-fanout-depth": depth - 1,
+            },
+        };
+        return [
+            line,
+            ...flatten(agent.agents ?? [], initial, agent.id, depth + 1, own),
+        ];
+    });
+}
+const rootId = "agent-fanout-root";
+// Fresh node objects every render drop React Flow's measured handles, which
+// unmounts the edges and restarts their pulses. Declared handles survive.
+const handle = (type, x, y) => ({
+    type,
+    position: type === "source" ? Position.Bottom : Position.Top,
+    x,
+    y,
+    width: 0,
+    height: 0,
+});
+/** Leaves share the width; each parent sits over the middle of its children. */
+function layout(lines, width, state, rootChanged) {
+    const children = new Map();
+    for (const line of lines)
+        children.set(line.parent, [...(children.get(line.parent) ?? []), line]);
+    const leaves = lines.filter((line) => !children.has(line.agent.id)).length;
+    const column = width / Math.max(leaves, 1);
+    const centers = new Map();
+    let leaf = 0;
+    const place = (id) => {
+        const kids = children.get(id);
+        const xs = kids?.map((kid) => place(kid.agent.id));
+        const x = xs ? (xs[0] + xs.at(-1)) / 2 : (leaf++ + 0.5) * column;
+        centers.set(id, x);
+        return x;
+    };
+    place(rootId);
+    const depth = Math.max(0, ...lines.map((line) => line.depth));
+    const dot = width ? Math.min(40, Math.max(28, column - 12)) : 40;
+    const nodes = [
+        {
+            id: rootId,
+            type: "root",
+            position: { x: width / 2 - rootSize / 2, y: rootTop },
+            width: rootSize,
+            height: rootSize,
+            handles: [handle("source", rootSize / 2, rootSize)],
+            data: { state, changed: rootChanged },
+        },
+        ...lines.map((line) => ({
+            id: line.agent.id,
+            type: "agent",
+            position: {
+                x: centers.get(line.agent.id) - column / 2,
+                y: levelTop + (line.depth - 1) * levelGap,
+            },
+            width: column,
+            height: dot + nodeLabel,
+            handles: [
+                handle("target", column / 2, 0),
+                handle("source", column / 2, dot),
+            ],
+            data: line,
+        })),
+    ];
+    const edges = lines.map((line) => ({
+        id: `${line.parent}-${line.agent.id}`,
+        type: "trip",
+        source: line.parent,
+        target: line.agent.id,
+        data: { trip: line.trip, style: line.style },
+    }));
+    return {
+        nodes,
+        edges,
+        dot,
+        height: levelTop +
+            Math.max(depth - 1, 0) * levelGap +
+            dot +
+            nodeLabel +
+            bottomGap,
+    };
+}
+function RootMark({ data: { state, changed } }) {
+    return (_jsxs("span", { "data-slot": "agent-fanout-root", "data-state": state, "data-changed": changed, className: "sprout-agent-fanout-root", children: [state === "done" ? (_jsx(Check, { size: 18 })) : state === "stopped" ? (_jsx(MinusCircle, { size: 18 })) : (_jsx(Sparkle, { size: 18 })), _jsx(Handle, { type: "source", position: Position.Bottom, isConnectable: false, className: "sprout-agent-fanout-handle" })] }));
+}
+function AgentMark({ data: { agent, changed, style } }) {
+    return (_jsxs("div", { "data-slot": "agent-fanout-node", "data-status": agent.status, "data-changed": changed, className: "sprout-agent-fanout-node", style: style, children: [_jsxs("span", { className: "sprout-agent-fanout-dot", children: [_jsx(NodeMark, { agent: agent }), _jsx(Handle, { type: "target", position: Position.Top, isConnectable: false, className: "sprout-agent-fanout-handle" }), agent.agents && agent.agents.length > 0 && (_jsx(Handle, { type: "source", position: Position.Bottom, isConnectable: false, className: "sprout-agent-fanout-handle" }))] }), _jsx("span", { className: "sprout-agent-fanout-node-name", children: agent.name })] }));
+}
+function TripLine({ id, sourceX, sourceY, targetX, targetY, data, }) {
+    const drop = targetY - sourceY;
+    const d = `M ${sourceX} ${sourceY} C ${sourceX} ${sourceY + drop * 0.5}, ${targetX} ${sourceY + drop * 0.2}, ${targetX} ${targetY}`;
+    const trip = data?.trip;
+    return (_jsxs("g", { style: data?.style, children: [_jsx(BaseEdge, { id: id, path: d, className: "sprout-agent-fanout-edge" }), trip && (_jsxs(_Fragment, { children: [_jsx("path", { d: d, pathLength: 1, "data-trip": trip, className: "sprout-agent-fanout-trail" }, trip), _jsx(EdgeLabelRenderer, { children: _jsx("span", { "data-trip": trip, className: "sprout-agent-fanout-comet", style: { ...data.style, offsetPath: `path("${d}")` } }, trip) })] }))] }));
+}
+const nodeTypes = { root: RootMark, agent: AgentMark };
+const edgeTypes = { trip: TripLine };
+const viewport = { x: 0, y: 0, zoom: 1 };
+function NodeMark({ agent }) {
+    if (agent.status === "done")
+        return _jsx(Check, { size: 16, "aria-hidden": "true" });
+    if (agent.status === "failed")
+        return _jsx(Danger, { size: 16, "aria-hidden": "true" });
+    return _jsx("span", { "aria-hidden": "true", children: agent.icon });
+}
+function StatusMark({ agent }) {
+    if (agent.status === "done")
+        return (_jsxs(_Fragment, { children: [_jsx(Check, { size: 12, "aria-hidden": "true" }), agent.duration === undefined ? "Done" : seconds(agent.duration)] }));
+    if (agent.status === "working")
+        return (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: "sprout-agent-fanout-pulse" }), "Working"] }));
+    return _jsx(_Fragment, { children: statusText[agent.status] });
+}
+/**
+ * A parent agent that hands one task to several subagents and merges what
+ * they find. Each status change sends a pulse along the subagent's line:
+ * down when it starts, back up when it finishes.
+ */
+export function AgentFanout({ task, agents, state = "running", elapsed, label, defaultOpen = false, onStop, onRestart, className, }) {
+    const [graphRef, width] = useWidth();
+    // Only changes after the first render animate, so a finished fanout
+    // renders still instead of replaying every pulse.
+    const [initial] = useState(() => ({
+        state,
+        statuses: new Map(flatten(agents, new Map()).map(({ agent }) => [agent.id, agent.status])),
+    }));
+    const phase = phaseText(agents, state, elapsed);
+    const lines = flatten(agents, initial.statuses);
+    const graph = layout(lines, width, state, initial.state !== state || undefined);
+    const finished = lines.filter(({ agent }) => agent.status === "done" || agent.status === "failed").length;
+    return (_jsxs("section", { "data-slot": "agent-fanout", "data-state": state, "aria-label": "Subagents", className: cn("sprout-agent-fanout", className), children: [_jsxs("div", { className: "sprout-agent-fanout-panel", children: [_jsx("div", { className: "sprout-agent-fanout-task", children: _jsx("span", { className: "sprout-agent-fanout-task-text", children: task }) }), _jsx("div", { ref: graphRef, "aria-hidden": "true", "data-slot": "agent-fanout-graph", className: "sprout-agent-fanout-graph", style: {
+                            height: graph.height,
+                            "--sprout-agent-fanout-dot": `${graph.dot}px`,
+                        }, children: width > 0 && (_jsx(ReactFlow, { className: "sprout-agent-fanout-flow", nodes: graph.nodes, edges: graph.edges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, defaultViewport: viewport, minZoom: 1, maxZoom: 1, panOnDrag: false, panOnScroll: false, zoomOnScroll: false, zoomOnPinch: false, zoomOnDoubleClick: false, preventScrolling: false, nodesDraggable: false, nodesConnectable: false, nodesFocusable: false, edgesFocusable: false, elementsSelectable: false, proOptions: { hideAttribution: true } })) }), _jsxs(Collapsible, { defaultOpen: defaultOpen, className: "sprout-agent-fanout-details", children: [_jsxs(CollapsibleTrigger, { className: "sprout-agent-fanout-trigger", children: [_jsx("span", { className: "sprout-agent-fanout-trigger-label", children: "Details" }), _jsx("span", { className: "sprout-agent-fanout-trigger-count", children: `${finished} of ${lines.length} finished` }), _jsx(ChevronDown, { size: 14, "aria-hidden": "true", "data-slot": "collapsible-indicator" })] }), _jsx(CollapsibleContent, { keepMounted: true, children: _jsx("ul", { "aria-label": "Subagent status", className: "sprout-agent-fanout-rows", children: lines.map(({ agent, changed, style }) => {
+                                        const settled = agent.status === "done" || agent.status === "failed";
+                                        return (_jsxs("li", { "data-slot": "agent-fanout-row", "data-status": agent.status, className: "sprout-agent-fanout-row", style: style, children: [_jsx("span", { className: "sprout-agent-fanout-row-name", children: agent.name }), _jsx("span", { "data-changed": changed, className: "sprout-agent-fanout-row-detail", children: settled && agent.result ? agent.result : agent.task }, settled && agent.result ? "result" : "task"), _jsx("span", { "data-changed": changed, className: "sprout-agent-fanout-row-status", children: _jsx(StatusMark, { agent: agent }) }, agent.status)] }, agent.id));
+                                    }) }) })] })] }), _jsxs("div", { className: "sprout-agent-fanout-footer", children: [_jsxs("p", { className: "sprout-agent-fanout-phase", children: [_jsx("span", { role: "status", children: label ?? phase.text }), !label && phase.time && (_jsx("span", { className: "sprout-agent-fanout-time", children: phase.time }))] }), state === "running" && onStop && (_jsxs(Button, { variant: "outline", size: "sm", onClick: onStop, className: "sprout-agent-fanout-action", children: [_jsx(MinusCircle, { size: 14, "aria-hidden": "true" }), "Stop"] })), state !== "running" && onRestart && (_jsxs(Button, { variant: "outline", size: "sm", onClick: onRestart, className: "sprout-agent-fanout-action", children: [_jsx(RotateLeft, { size: 14, "aria-hidden": "true" }), "Run again"] }))] })] }));
+}

package/dist/components/chat-confirmation.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentProps } from "react";
+import { type ComponentProps, type ReactNode } from "react";
 export declare const chatConfirmationStateNames: readonly ["pending", "submitting", "approved", "rejected", "expired", "cancelled", "error"];
 export type ChatConfirmationDecision = "approve" | "reject";
 export type ConfirmationState = {
@@ -33,10 +33,12 @@ export interface ChatConfirmationProps extends Omit<ComponentProps<"div">, "titl
     onDecision: (decision: ChatConfirmationDecision) => void;
     /** Locks both buttons, such as while the request is refreshing or cannot be verified. */
     disabled?: boolean | undefined;
+    /** Names the action on the approve button, such as “Approve 3 drafts”. */
+    approveLabel?: ReactNode;
 }
 /**
  * Asks someone in chat to approve or decline an action an agent proposed.
  * Built on `ReviewCard`: it folds once decided, and when the decision was
  * made from inside the card, focus moves to the outcome.
  */
-export declare function ChatConfirmation({ title, description, details, state, onDecision, disabled, className, ...props }: ChatConfirmationProps): import("react").JSX.Element;
+export declare function ChatConfirmation({ title, description, details, state, onDecision, disabled, approveLabel, className, ...props }: ChatConfirmationProps): import("react").JSX.Element;

package/dist/components/chat-confirmation.js

@@ -41,7 +41,7 @@ const outcomes = {
  * Built on `ReviewCard`: it folds once decided, and when the decision was
  * made from inside the card, focus moves to the outcome.
  */
-export function ChatConfirmation({ title, description, details, state, onDecision, disabled = false, className, ...props }) {
+export function ChatConfirmation({ title, description, details, state, onDecision, disabled = false, approveLabel = "Approve action", className, ...props }) {
     const done = settledKinds.has(state.kind);
     const section = useRef(null);
     const result = useRef(null);
@@ -58,5 +58,5 @@ export function ChatConfirmation({ title, description, details, state, onDecisio
     const submitting = state.kind === "submitting";
     const busy = (decision) => state.kind === "submitting" && state.decision === decision;
     const outcome = outcomes[state.kind];
-    return (_jsx("div", { ref: section, "data-slot": "chat-confirmation", "data-state": state.kind, ...props, className: cn("sprout-chat-confirmation", className), children: _jsxs(ReviewCard, { icon: _jsx(ShieldUser, { size: 16 }), title: title, badge: badges[state.kind], settled: done, status: state.kind === "error" || outcome ? (_jsxs(_Fragment, { children: [state.kind === "error" && (_jsx("p", { role: "alert", className: "sprout-chat-confirmation-error", children: state.message })), outcome && (_jsx("p", { ref: result, tabIndex: -1, role: "status", className: "sprout-chat-confirmation-result", children: outcome }))] })) : undefined, actions: done ? undefined : (_jsxs(_Fragment, { children: [_jsxs(Button, { disabled: disabled || submitting, "aria-busy": busy("approve"), onClick: () => onDecision("approve"), children: [busy("approve") && _jsx(Spinner, { "aria-hidden": "true" }), "Approve action"] }), _jsxs(Button, { variant: "ghost", disabled: disabled || submitting, "aria-busy": busy("reject"), onClick: () => onDecision("reject"), children: [busy("reject") && _jsx(Spinner, { "aria-hidden": "true" }), "Decline"] })] })), children: [_jsx("p", { className: "sprout-chat-confirmation-description", children: description }), _jsx(ReviewRows, { children: details.map((detail) => (_jsx(ReviewRow, { label: detail.label, children: detail.value }, detail.label))) })] }) }));
+    return (_jsx("div", { ref: section, "data-slot": "chat-confirmation", "data-state": state.kind, ...props, className: cn("sprout-chat-confirmation", className), children: _jsxs(ReviewCard, { icon: _jsx(ShieldUser, { size: 16 }), title: title, badge: badges[state.kind], settled: done, status: state.kind === "error" || outcome ? (_jsxs(_Fragment, { children: [state.kind === "error" && (_jsx("p", { role: "alert", className: "sprout-chat-confirmation-error", children: state.message })), outcome && (_jsx("p", { ref: result, tabIndex: -1, role: "status", className: "sprout-chat-confirmation-result", children: outcome }))] })) : undefined, actions: done ? undefined : (_jsxs(_Fragment, { children: [_jsxs(Button, { disabled: disabled || submitting, "aria-busy": busy("approve"), onClick: () => onDecision("approve"), children: [busy("approve") && _jsx(Spinner, { "aria-hidden": "true" }), approveLabel] }), _jsxs(Button, { variant: "ghost", disabled: disabled || submitting, "aria-busy": busy("reject"), onClick: () => onDecision("reject"), children: [busy("reject") && _jsx(Spinner, { "aria-hidden": "true" }), "Decline"] })] })), children: [_jsx("p", { className: "sprout-chat-confirmation-description", children: description }), _jsx(ReviewRows, { children: details.map((detail) => (_jsx(ReviewRow, { label: detail.label, children: detail.value }, detail.label))) })] }) }));
 }

package/dist/components/chat-sources.js

@@ -53,9 +53,18 @@ export const citationStateKindNames = [
  */
 export function CheckedCitation({ label, state, onOpen, onRetry, }) {
     const popup = useRef(null);
-    return (_jsxs(Popover, { onOpenChange: (open) => {
-            if (open)
+    const openReason = useRef(undefined);
+    return (_jsxs(Popover, { onOpenChange: (open, details) => {
+            if (open) {
+                openReason.current = details.reason;
                 onOpen();
+                return;
+            }
+            // Base UI keeps a hover-close timer from before a reopen; a passage
+            // opened by click or keyboard closes only by click, Escape, or outside press.
+            if (details.reason === "trigger-hover" &&
+                openReason.current === "trigger-press")
+                details.cancel();
         }, children: [_jsx(PopoverTrigger, { openOnHover: true, delay: hoverDelay, closeDelay: hoverCloseDelay, "data-slot": "checked-citation", className: "sprout-chat-sources-checked", render: _jsx(Button, { variant: "link", size: "task-link", "aria-label": `Source: ${label}` }), children: label }), _jsx(PopoverContent, { ref: popup, "data-citation-state": state.kind, className: "sprout-chat-sources-preview", children: state.kind === "idle" || state.kind === "loading" ? (_jsxs("p", { role: "status", className: "sprout-chat-sources-checking", children: [_jsx(Spinner, { "aria-hidden": "true" }), "Checking access to this source\u2026"] })) : state.kind === "ready" ? (_jsxs("div", { "data-slot": "chat-source", className: "sprout-chat-sources-source", children: [_jsx("p", { className: "sprout-chat-sources-title", children: state.title }), _jsx("p", { className: "sprout-chat-sources-location", children: state.location }), _jsx("p", { className: "sprout-chat-sources-excerpt", "data-preserve-lines": "", children: state.excerpt })] })) : (_jsxs("div", { className: "sprout-chat-sources-source", children: [_jsx("p", { className: "sprout-chat-sources-title", children: state.kind === "unavailable"
                                 ? "Source unavailable"
                                 : "Couldn’t load this source" }), _jsx("p", { role: "alert", className: "sprout-chat-sources-excerpt", children: state.message }), state.kind === "error" && (_jsx(Button, { variant: "outline", size: "sm", className: "sprout-chat-sources-retry", onClick: () => {

package/dist/components/presence-cursor.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentProps, ReactNode } from "react";
+export interface PresenceCursorProps extends Omit<ComponentProps<"div">, "children" | "color"> {
+    /** The person's name or email. Shown in the tag, or read out with an avatar. */
+    name: string;
+    /** Left offset of the arrow tip in px, from the positioned parent. */
+    x: number;
+    /** Top offset of the arrow tip in px, from the positioned parent. */
+    y: number;
+    /** Any CSS color. White text sits on it, so keep 4.5:1 contrast. */
+    color: string;
+    /** Shows this, such as an `Avatar`, next to the arrow instead of the name tag. */
+    avatar?: ReactNode;
+}
+/**
+ * Another person's pointer on a shared surface, with a name tag or an avatar.
+ * Put it in a parent with `position: relative`. It ignores pointer events and
+ * glides between positions unless reduced motion is requested.
+ */
+export declare function PresenceCursor({ name, x, y, color, avatar, className, style, ...props }: PresenceCursorProps): import("react").JSX.Element;

package/dist/components/presence-cursor.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../internal/classes.js";
+/**
+ * Another person's pointer on a shared surface, with a name tag or an avatar.
+ * Put it in a parent with `position: relative`. It ignores pointer events and
+ * glides between positions unless reduced motion is requested.
+ */
+export function PresenceCursor({ name, x, y, color, avatar, className, style, ...props }) {
+    return (_jsxs("div", { "data-slot": "presence-cursor", role: "img", "aria-label": name, className: cn("sprout-presence-cursor", className), style: {
+            "--sprout-presence-color": color,
+            transform: `translate(${x}px, ${y}px)`,
+            ...style,
+        }, ...props, children: [_jsx("svg", { className: "sprout-presence-cursor-arrow", viewBox: "0 0 16 16", "aria-hidden": "true", children: _jsx("path", { d: "M1.5 1.5 14.5 6.6 8.4 8.4 6.6 14.5Z" }) }), avatar != null ? (_jsx("span", { "data-slot": "presence-cursor-avatar", className: "sprout-presence-cursor-avatar", "aria-hidden": "true", children: avatar })) : (_jsx("span", { "data-slot": "presence-cursor-label", className: "sprout-presence-cursor-label", "aria-hidden": "true", children: name }))] }));
+}

package/dist/components/result-card.d.ts

@@ -10,10 +10,15 @@ export type ResultAppAction = {
     label: string;
     state: ResultAppActionState;
 };
-/** One app that took part in a result. `brand: null` shows a generic plug. */
+/**
+ * One app that took part in a result. `brand: null` shows `icon`, or a
+ * generic plug when no icon is given.
+ */
 export type ResultApp = {
     brand: Brand | null;
     name: string;
+    /** Shown when `brand` is null, such as a table icon for your own data. */
+    icon?: ReactNode;
     actions: readonly ResultAppAction[];
 };
 export type ResultCardAction = {

package/dist/components/result-card.js

@@ -77,12 +77,12 @@ function AppActionsPopover({ apps, overflow = false, disabled, }) {
     const title = overflow
         ? `${apps.length} more ${apps.length === 1 ? "app" : "apps"}`
         : `${first.name} actions`;
-    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { openOnHover: true, delay: 800, closeDelay: 200, render: _jsx(BrandTile, { size: "action", render: _jsx(Button, { variant: "ghost", size: "icon", disabled: disabled }) }), "aria-label": title, children: overflow ? (_jsxs("span", { className: "sprout-result-card-overflow", children: ["+", apps.length] })) : first.brand ? (_jsx(BrandIcon, { brand: first.brand, size: "fill" })) : (_jsx(Plug, { size: 18, "aria-hidden": "true" })) }), _jsxs(PopoverContent, { size: "app-actions", align: "start", sideOffset: 8, initialFocus: (interaction) => interaction !== "mouse", children: [_jsx(PopoverTitle, { children: title }), _jsx(ResultAppActions, { apps: apps, showAppNames: overflow })] })] }));
+    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { openOnHover: true, delay: 800, closeDelay: 200, render: _jsx(BrandTile, { size: "action", render: _jsx(Button, { variant: "ghost", size: "icon", disabled: disabled }) }), "aria-label": title, children: overflow ? (_jsxs("span", { className: "sprout-result-card-overflow", children: ["+", apps.length] })) : first.brand ? (_jsx(BrandIcon, { brand: first.brand, size: "fill" })) : first.icon ? (_jsx("span", { "aria-hidden": "true", className: "sprout-result-app-icon", children: first.icon })) : (_jsx(Plug, { size: 18, "aria-hidden": "true" })) }), _jsxs(PopoverContent, { size: "app-actions", align: "start", sideOffset: 8, initialFocus: (interaction) => interaction !== "mouse", children: [_jsx(PopoverTitle, { children: title }), _jsx(ResultAppActions, { apps: apps, showAppNames: overflow })] })] }));
 }
 /**
  * The actions each app took, grouped by app. A check marks completed
  * actions; every other state is spelled out, such as “Unconfirmed:”.
  */
 export function ResultAppActions({ apps, showAppNames = true, className, ...props }) {
-    return (_jsx("div", { "data-slot": "result-app-actions", ...props, className: cn("sprout-result-app-actions", className), children: apps.map((app) => (_jsxs("section", { "aria-label": app.name, className: "sprout-result-app", children: [showAppNames && (_jsxs("div", { className: "sprout-result-app-name", children: [app.brand ? (_jsx(BrandIcon, { brand: app.brand, size: "glyph" })) : (_jsx(Plug, { size: 20, "aria-hidden": "true" })), _jsx("h4", { children: app.name })] })), app.actions.length === 0 ? (_jsx("p", { className: "sprout-result-app-empty", children: "No action details were recorded." })) : (_jsx("ul", { className: "sprout-result-app-list", children: app.actions.map((action, index) => (_jsxs("li", { "data-state": action.state, className: "sprout-result-app-action", children: [action.state === "completed" ? (_jsxs("span", { className: "sprout-result-app-check", children: [_jsx(Check, { size: 16, "aria-hidden": "true" }), _jsx("span", { className: "sprout-result-sr-only", children: "Completed:" })] })) : (_jsx("span", { className: "sprout-result-app-prefix", children: actionPrefixes[action.state] })), _jsx("span", { className: "sprout-result-app-label", children: action.label })] }, `${action.label}:${index}`))) }))] }, app.brand ?? app.name))) }));
+    return (_jsx("div", { "data-slot": "result-app-actions", ...props, className: cn("sprout-result-app-actions", className), children: apps.map((app) => (_jsxs("section", { "aria-label": app.name, className: "sprout-result-app", children: [showAppNames && (_jsxs("div", { className: "sprout-result-app-name", children: [app.brand ? (_jsx(BrandIcon, { brand: app.brand, size: "glyph" })) : app.icon ? (_jsx("span", { "aria-hidden": "true", className: "sprout-result-app-icon", children: app.icon })) : (_jsx(Plug, { size: 20, "aria-hidden": "true" })), _jsx("h4", { children: app.name })] })), app.actions.length === 0 ? (_jsx("p", { className: "sprout-result-app-empty", children: "No action details were recorded." })) : (_jsx("ul", { className: "sprout-result-app-list", children: app.actions.map((action, index) => (_jsxs("li", { "data-state": action.state, className: "sprout-result-app-action", children: [action.state === "completed" ? (_jsxs("span", { className: "sprout-result-app-check", children: [_jsx(Check, { size: 16, "aria-hidden": "true" }), _jsx("span", { className: "sprout-result-sr-only", children: "Completed:" })] })) : (_jsx("span", { className: "sprout-result-app-prefix", children: actionPrefixes[action.state] })), _jsx("span", { className: "sprout-result-app-label", children: action.label })] }, `${action.label}:${index}`))) }))] }, app.brand ?? app.name))) }));
 }