@tulipfarm/sprout 0.1.0 → 0.3.0

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.3 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.1 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/attachment.js

@@ -168,7 +168,7 @@ function AttachmentCarousel({ className, children, onKeyDownCapture, ...props })
             scroll(event.key === "ArrowLeft" ? -1 : 1);
         }
     };
-    return (_jsxs("div", { "data-slot": "attachment-group", "data-variant": "carousel", role: "region", "aria-roledescription": "carousel", className: cn("sprout-attachment-group", "sprout-attachment-group-carousel", className), onKeyDownCapture: handleKeyDown, ...props, children: [_jsx("div", { ref: viewport, className: "sprout-attachment-carousel-viewport", onScroll: measure, children: _jsx("div", { className: "sprout-attachment-carousel-track", children: Children.map(children, (child) => child == null || child === false ? null : (_jsx("div", { role: "group", "aria-roledescription": "slide", className: "sprout-attachment-carousel-item", children: child }))) }) }), edges.start && (_jsx("span", { className: "sprout-attachment-carousel-edge", "data-side": "start", children: _jsx("button", { type: "button", "aria-label": "Previous attachments", tabIndex: -1, className: "sprout-attachment-carousel-arrow", onClick: () => scroll(-1), children: _jsx(ChevronLeft, { size: 12, "aria-hidden": "true" }) }) })), edges.end && (_jsx("span", { className: "sprout-attachment-carousel-edge", "data-side": "end", children: _jsx("button", { type: "button", "aria-label": "Next attachments", tabIndex: -1, className: "sprout-attachment-carousel-arrow", onClick: () => scroll(1), children: _jsx(ChevronRight, { size: 12, "aria-hidden": "true" }) }) }))] }));
+    return (_jsxs("div", { "data-slot": "attachment-group", "data-variant": "carousel", role: "region", "aria-roledescription": "carousel", className: cn("sprout-attachment-group", "sprout-attachment-group-carousel", className), onKeyDownCapture: handleKeyDown, ...props, children: [_jsx("div", { ref: viewport, className: "sprout-attachment-carousel-viewport", onScroll: measure, children: _jsx("div", { className: "sprout-attachment-carousel-track", children: Children.map(children, (child) => child == null || child === false ? null : (_jsx("div", { role: "group", "aria-roledescription": "slide", className: "sprout-attachment-carousel-item", children: child }))) }) }), edges.start && (_jsx("span", { className: "sprout-attachment-carousel-edge", "data-side": "start", children: _jsx(Button, { variant: "outline", size: "icon-xs", "aria-label": "Previous attachments", tabIndex: -1, className: "sprout-attachment-carousel-arrow", onClick: () => scroll(-1), children: _jsx(ChevronLeft, { "aria-hidden": "true" }) }) })), edges.end && (_jsx("span", { className: "sprout-attachment-carousel-edge", "data-side": "end", children: _jsx(Button, { variant: "outline", size: "icon-xs", "aria-label": "Next attachments", tabIndex: -1, className: "sprout-attachment-carousel-arrow", onClick: () => scroll(1), children: _jsx(ChevronRight, { "aria-hidden": "true" }) }) }))] }));
 }
 /** A paper glyph with a colored extension badge, such as PDF or XLSX. Decorative. */
 export function FileTypeIcon({ name, mediaType, size = "sm", className, ...props }) {
@@ -231,7 +231,7 @@ export function FileAttachment({ file, variant = "list", onRemove, onRetry, onOp
     const remove = (size) => onRemove && (_jsx(Button, { variant: "ghost", size: size, "aria-label": `Remove ${file.name}`, onClick: onRemove, children: _jsx(X, { size: 14, "aria-hidden": "true" }) }));
     const viewer = inViewer && !shared && (_jsx(FileViewer, { file: target, open: open, onOpenChange: setOpen }));
     if (variant === "chip") {
-        const inner = (_jsxs(_Fragment, { children: [image ? (_jsx("span", { className: "sprout-file-attachment-thumb", children: file.url && (_jsx(AttachmentImage, { src: file.url, name: file.name }, file.url)) })) : (_jsx(FileTypeIcon, { name: file.name, mediaType: file.mediaType })), _jsx("span", { className: "sprout-file-attachment-name", children: file.name })] }));
+        const inner = (_jsxs(_Fragment, { children: [image && file.url ? (_jsx("span", { className: "sprout-file-attachment-thumb", children: _jsx(AttachmentImage, { src: file.url, name: file.name }, file.url) })) : (_jsx(FileTypeIcon, { name: file.name, mediaType: file.mediaType })), _jsx("span", { className: "sprout-file-attachment-name", children: file.name })] }));
         return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: root, "data-slot": "file-attachment", "data-variant": "chip", "data-state": file.state, "data-removable": onRemove ? "" : undefined, className: cn("sprout-file-attachment", className), title: openable ? undefined : `${file.name} · ${stateLabel}`, children: [withPreview(openable ? (_jsx("button", { ...openProps, "aria-label": openLabel, title: peek ? undefined : `${file.name} · ${stateLabel}`, className: "sprout-file-attachment-open", children: inner })) : (_jsx("span", { className: "sprout-file-attachment-open", children: inner }))), busy && _jsx(Spinner, { "aria-label": stateLabel }), retry, remove("icon-xs")] }), viewer] }));
     }
     const name = (_jsxs(_Fragment, { children: [_jsx("span", { className: "sprout-file-attachment-name", title: file.name, children: file.name }), variant !== "inline" && (_jsxs("span", { className: "sprout-file-attachment-status", children: [busy && _jsx(Spinner, { size: "sm", "aria-hidden": "true" }), stateLabel] }))] }));

package/dist/components/brand-icon.js

@@ -11,6 +11,10 @@ export const brandNames = {
     deepseek: "DeepSeek",
     grok: "Grok",
     kimi: "Kimi",
+    gemini: "Gemini",
+    mistral: "Mistral",
+    meta: "Meta",
+    qwen: "Qwen",
     google: "Google Workspace",
     gmail: "Gmail",
     "google-calendar": "Google Calendar",

package/dist/components/canvas.js

@@ -3,11 +3,11 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { createContext, useContext, useEffect, useId, useLayoutEffect, useRef, useState, useSyncExternalStore, } from "react";
 import { createPortal } from "react-dom";
 import { ArrowLeft } from "reicon-react/icons/ArrowLeft";
-import { Loader } from "reicon-react/icons/Loader";
 import { SidebarRight } from "reicon-react/icons/SidebarRight";
 import { X } from "reicon-react/icons/X";
 import { cn } from "../internal/classes.js";
 import { Button } from "./button.js";
+import { Spinner } from "./spinner.js";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup, useResizableLayout, } from "./resizable.js";
 import { Sheet, SheetContent, SheetDescription, SheetTitle } from "./sheet.js";
 /** Below this split width (px), the canvas opens as a full-screen sheet. */
@@ -153,7 +153,7 @@ export function CanvasPanel({ tabs, activeId, onSelect, onCloseTab, onClose, chi
                                                 tabButtons.current.set(tab.id, node);
                                             else
                                                 tabButtons.current.delete(tab.id);
-                                        }, "data-slot": "canvas-tab", "data-active": active ? "" : undefined, "data-busy": tab.busy ? "" : undefined, "data-hover": hovered === tab.id ? "" : undefined, "aria-label": tab.busy ? `${tab.title}, loading` : undefined, "aria-selected": active, "aria-controls": bodyId, tabIndex: active || (activeIndex === -1 && index === 0) ? 0 : -1, style: { order: index * 2 }, onClick: () => onSelect(tab.id), onKeyDown: (event) => onTabKeyDown(event, index), onPointerEnter: () => setHovered(tab.id), onPointerLeave: () => setHovered(null), className: "sprout-canvas-tab", children: [tab.busy ? (_jsx(Loader, { size: 14, "aria-hidden": "true", className: "sprout-canvas-tab-spinner" })) : (Icon && (_jsx("span", { "aria-hidden": "true", className: "sprout-canvas-tab-icon", children: _jsx(Icon, { size: 14 }) }))), _jsx("span", { className: "sprout-canvas-tab-title", children: tab.title })] }, tab.id));
+                                        }, "data-slot": "canvas-tab", "data-active": active ? "" : undefined, "data-busy": tab.busy ? "" : undefined, "data-hover": hovered === tab.id ? "" : undefined, "aria-label": tab.busy ? `${tab.title}, loading` : undefined, "aria-selected": active, "aria-controls": bodyId, tabIndex: active || (activeIndex === -1 && index === 0) ? 0 : -1, style: { order: index * 2 }, onClick: () => onSelect(tab.id), onKeyDown: (event) => onTabKeyDown(event, index), onPointerEnter: () => setHovered(tab.id), onPointerLeave: () => setHovered(null), className: "sprout-canvas-tab", children: [tab.busy ? (_jsx(Spinner, { size: "sm", "aria-hidden": "true" })) : (Icon && (_jsx("span", { "aria-hidden": "true", className: "sprout-canvas-tab-icon", children: _jsx(Icon, { size: 14 }) }))), _jsx("span", { className: "sprout-canvas-tab-title", children: tab.title })] }, tab.id));
                                 }) }), tabs.map((tab, index) => {
                                 const active = index === activeIndex;
                                 return (_jsx("button", { type: "button", "aria-label": `Close ${tab.title}`, "data-active": active ? "" : undefined, "data-hover": hovered === tab.id ? "" : undefined, tabIndex: active ? 0 : -1, style: { order: index * 2 + 1 }, onClick: () => closeTab(index), onPointerEnter: () => setHovered(tab.id), onPointerLeave: () => setHovered(null), className: "sprout-canvas-tab-close", children: _jsx(X, { size: 12, "aria-hidden": "true" }) }, tab.id));

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

@@ -0,0 +1,94 @@
+import { type ReactNode } from "react";
+import { type AttachmentFile } from "./attachment.js";
+import { type Brand } from "./brand-icon.js";
+import { type RichTextValue } from "./rich-text-editor.js";
+export declare const chatInputReferenceKindNames: readonly ["agent", "skill", "file"];
+export declare const chatInputStatusNames: readonly ["idle", "streaming"];
+export type ChatInputReferenceKind = (typeof chatInputReferenceKindNames)[number];
+export type ChatInputStatus = (typeof chatInputStatusNames)[number];
+/** One row in the `@`, `/`, or `#` panel. Picking it drops a chip into the message. */
+export interface ChatInputSuggestion {
+    id: string;
+    label: string;
+    description?: string | undefined;
+    /** A 16px icon, file icon, brand glyph, or small avatar. */
+    media?: ReactNode;
+}
+/** Returns the rows that match what follows the trigger. It may be async. */
+export type ChatInputSource = (query: string) => ChatInputSuggestion[] | Promise<ChatInputSuggestion[]>;
+export interface ChatInputAction {
+    id: string;
+    label: string;
+    description?: string | undefined;
+    icon?: ReactNode;
+    onSelect: () => void;
+}
+export interface ChatInputOption {
+    id: string;
+    label: string;
+    description?: string | undefined;
+    icon?: ReactNode;
+    /** Modes only. Any CSS color; tints the box border, chip, and menu icon while on. */
+    color?: string | undefined;
+}
+export interface ChatInputModel {
+    id: string;
+    label: string;
+    description?: string | undefined;
+    /** Draws the vendor logo. Use `icon` for a mark that isn't a `Brand`. */
+    brand?: Brand | undefined;
+    icon?: ReactNode;
+    disabled?: boolean | undefined;
+}
+export interface ChatInputPrompt {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    /** The text put in the message. Defaults to `label`. */
+    prompt?: string | undefined;
+}
+export interface ChatInputProps {
+    value: RichTextValue;
+    onValueChange: (value: RichTextValue) => void;
+    /** Runs on Enter, Cmd or Ctrl+Enter, and the send button, only when the message has content. */
+    onSend: () => void;
+    /** Shown in place of send while `status` is `streaming`. */
+    onStop?: (() => void) | undefined;
+    /** `streaming` swaps send for stop and shows `streamingPlaceholder`. */
+    status?: ChatInputStatus | undefined;
+    placeholder?: string | undefined;
+    streamingPlaceholder?: string | undefined;
+    disabled?: boolean | undefined;
+    /** Accessible name of the form. Defaults to `Message`. */
+    label?: string | undefined;
+    /** `@` opens these. Leave unset to turn the trigger off. */
+    agents?: ChatInputSource | undefined;
+    /** `/` opens these. */
+    skills?: ChatInputSource | undefined;
+    /** `#` opens these. */
+    files?: ChatInputSource | undefined;
+    attachments?: AttachmentFile[] | undefined;
+    onRemoveAttachment?: ((id: string) => void) | undefined;
+    /** The `+` menu, such as upload from computer, Google Drive, or a URL. */
+    attachActions?: ChatInputAction[] | undefined;
+    /** The modes menu, such as Plan, Deep research, or Learning. One mode at a time. */
+    modes?: ChatInputOption[] | undefined;
+    mode?: string | null | undefined;
+    onModeChange?: ((mode: string | null) => void) | undefined;
+    projects?: ChatInputOption[] | undefined;
+    project?: string | undefined;
+    onProjectChange?: ((project: string) => void) | undefined;
+    models?: ChatInputModel[] | undefined;
+    model?: string | undefined;
+    onModelChange?: ((model: string) => void) | undefined;
+    /** Starter chips under an empty message. A click fills the message. */
+    prompts?: ChatInputPrompt[] | undefined;
+    onPromptSelect?: ((prompt: ChatInputPrompt) => void) | undefined;
+    className?: string | undefined;
+}
+/**
+ * A chat message box on `RichTextEditor`. `@` tags agents, `/` adds skills,
+ * and `#` adds files. The bar holds attach and mode menus, a project picker,
+ * a model picker, and send or stop. Starter prompts sit under an empty box.
+ */
+export declare function ChatInput({ value, onValueChange, onSend, onStop, status, placeholder, streamingPlaceholder, disabled, label, agents, skills, files, attachments, onRemoveAttachment, attachActions, modes, mode, onModeChange, projects, project, onProjectChange, models, model, onModelChange, prompts, onPromptSelect, className, }: ChatInputProps): import("react").JSX.Element;