@tulipfarm/sprout 0.2.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/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/schema-diagram.js

@@ -1,14 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Background, BaseEdge, EdgeLabelRenderer, getSmoothStepPath, Handle, Panel, Position, ReactFlow, ReactFlowProvider, useNodesInitialized, useReactFlow, useStore, } from "@xyflow/react";
-import { useEffect, useId, useMemo, useSyncExternalStore, } from "react";
-import { Add } from "reicon-react/icons/Add";
+import { Background, BaseEdge, EdgeLabelRenderer, getSmoothStepPath, Handle, Position, ReactFlow, ReactFlowProvider, } from "@xyflow/react";
+import { useId, useMemo } from "react";
 import { Key } from "reicon-react/icons/Key";
-import { Minus } from "reicon-react/icons/Minus";
-import { Scan } from "reicon-react/icons/Scan";
 import { cn } from "../internal/classes.js";
+import { FitOnResize, flowMaxZoom as maxZoom, flowMinZoom as minZoom, useKeyboardView, useViewportMobile, ZoomControls, } from "../internal/flow.js";
 import { Badge } from "./badge.js";
-import { Button } from "./button.js";
 export const schemaTableStateNames = [
     "new",
     "changed",
@@ -24,10 +21,7 @@ export const schemaDiagramLayoutNames = [
 const tableWidth = 264;
 const columnGap = 80;
 const rowGap = 48;
-const minZoom = 0.2;
-const maxZoom = 1.5;
 const fitOptions = { padding: 0.15, maxZoom: 1 };
-const panStep = 48;
 const tableHeight = (table) => 44 +
     (table.fields.length === 0
         ? 32
@@ -117,80 +111,13 @@ function LinkLine({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targ
 }
 const nodeTypes = { table: TableCard };
 const edgeTypes = { link: LinkLine };
-const mobileQuery = "(max-width: 767px)";
-const motionQuery = "(prefers-reduced-motion: reduce)";
-function subscribeMobile(callback) {
-    const media = window.matchMedia(mobileQuery);
-    media.addEventListener("change", callback);
-    return () => media.removeEventListener("change", callback);
-}
-function useViewportMobile() {
-    return useSyncExternalStore(subscribeMobile, () => window.matchMedia(mobileQuery).matches, () => false);
-}
-const motion = (ms) => typeof window !== "undefined" && window.matchMedia(motionQuery).matches
-    ? 0
-    : ms;
-// The canvas panel animates open, so the first fit sees a narrower pane than the final one.
-function FitOnResize({ nodes }) {
-    const { fitView } = useReactFlow();
-    const width = useStore((state) => state.width);
-    const height = useStore((state) => state.height);
-    const measured = useNodesInitialized();
-    useEffect(() => {
-        if (!measured)
-            return;
-        const frame = requestAnimationFrame(() => void fitView(fitOptions));
-        return () => cancelAnimationFrame(frame);
-    }, [fitView, width, height, measured, nodes]);
-    return null;
-}
-function ZoomControls({ position, }) {
-    const { zoomIn, zoomOut, fitView } = useReactFlow();
-    const zoom = useStore((state) => state.transform[2]);
-    return (_jsxs(Panel, { position: position, className: "sprout-schema-controls", "data-slot": "schema-diagram-controls", role: "toolbar", "aria-label": "Diagram view", "aria-orientation": "vertical", children: [_jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Zoom in", title: "Zoom in", disabled: zoom >= maxZoom, onClick: () => void zoomIn({ duration: motion(160) }), children: _jsx(Add, { size: 16, "aria-hidden": "true" }) }), _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Zoom out", title: "Zoom out", disabled: zoom <= minZoom, onClick: () => void zoomOut({ duration: motion(160) }), children: _jsx(Minus, { size: 16, "aria-hidden": "true" }) }), _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Fit to view", title: "Fit to view", onClick: () => void fitView({ ...fitOptions, duration: motion(180) }), children: _jsx(Scan, { size: 16, "aria-hidden": "true" }) })] }));
-}
-function useKeyboardView() {
-    const { getViewport, setViewport, zoomIn, zoomOut, fitView } = useReactFlow();
-    return (event) => {
-        const target = event.target;
-        if (event.altKey || event.ctrlKey || event.metaKey)
-            return;
-        if (target !== event.currentTarget &&
-            !target.classList.contains("react-flow__node"))
-            return;
-        const step = panStep * (event.shiftKey ? 4 : 1);
-        const pan = {
-            ArrowLeft: [step, 0],
-            ArrowRight: [-step, 0],
-            ArrowUp: [0, step],
-            ArrowDown: [0, -step],
-        };
-        const move = pan[event.key];
-        if (move) {
-            const { x, y, zoom } = getViewport();
-            void setViewport({ x: x + move[0], y: y + move[1], zoom }, { duration: motion(120) });
-        }
-        else if (event.key === "+" || event.key === "=") {
-            void zoomIn({ duration: motion(160) });
-        }
-        else if (event.key === "-" || event.key === "_") {
-            void zoomOut({ duration: motion(160) });
-        }
-        else if (event.key === "0") {
-            void fitView({ ...fitOptions, duration: motion(180) });
-        }
-        else
-            return;
-        event.preventDefault();
-    };
-}
 const keyboardHint = "Arrow keys pan, plus and minus zoom, and 0 fits the diagram. Tab moves between tables.";
 function DiagramFlow({ nodes, edges, direction, label, hintId, }) {
-    const onKeyDown = useKeyboardView();
+    const onKeyDown = useKeyboardView(fitOptions);
     return (_jsxs(ReactFlow, { className: "sprout-schema-flow", "data-slot": "schema-diagram-viewport", "aria-label": label, "aria-describedby": hintId, tabIndex: 0, onKeyDown: onKeyDown, nodes: nodes, edges: edges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, fitView: true, fitViewOptions: fitOptions, minZoom: minZoom, maxZoom: maxZoom, nodesConnectable: false, elementsSelectable: false, edgesFocusable: false, ariaLabelConfig: {
             "node.a11yDescription.default": keyboardHint,
             "node.a11yDescription.keyboardDisabled": keyboardHint,
-        }, proOptions: { hideAttribution: true }, children: [_jsx(Background, { gap: 16, size: 1 }), _jsx(FitOnResize, { nodes: nodes }), _jsx(ZoomControls, { position: direction === "vertical" ? "top-right" : "bottom-right" })] }));
+        }, proOptions: { hideAttribution: true }, children: [_jsx(Background, { gap: 16, size: 1 }), _jsx(FitOnResize, { nodes: nodes, fit: fitOptions }), _jsx(ZoomControls, { position: direction === "vertical" ? "top-right" : "bottom-right", fit: fitOptions, className: "sprout-schema-controls", slot: "schema-diagram-controls" })] }));
 }
 /**
  * A pan-and-zoom diagram of tables, their fields, and the links between them,

package/dist/components/sql-viewer.d.ts

@@ -0,0 +1,76 @@
+import { type HTMLAttributes } from "react";
+export declare const sqlViewerLayoutNames: readonly ["auto", "horizontal", "vertical"];
+export type SqlViewerLayout = (typeof sqlViewerLayoutNames)[number];
+export type SqlViewerCardinality = "one" | "many";
+export interface SqlViewerOption {
+    id: string;
+    label: string;
+    retired: boolean;
+}
+/** One field of a TulipFarm table definition (format 2) or table document (format 3). */
+export type SqlViewerField = {
+    id: string;
+    label: string;
+    required: boolean;
+} & ({
+    kind: "text";
+    maxLength: number;
+} | {
+    kind: "numeric";
+    precision: number;
+    scale: number;
+} | {
+    kind: "boolean";
+} | {
+    kind: "date";
+} | {
+    kind: "timestamp";
+    timezone?: "UTC";
+} | {
+    kind: "single-select" | "multi-select";
+    options: readonly SqlViewerOption[];
+} | {
+    kind: "relationship";
+    /** A table name (format 3) or table UUID (format 2), matching a table's `id`. */
+    targetTableId: string;
+    cardinality: SqlViewerCardinality;
+    inverseCardinality: SqlViewerCardinality;
+    reverse?: {
+        fieldId: string;
+        label: string;
+    } | null;
+    onDelete?: "restrict";
+} | {
+    kind: "file";
+    cardinality: SqlViewerCardinality;
+    access?: "independent";
+});
+export interface SqlViewerUniqueKey {
+    id: string;
+    fieldIds: readonly string[];
+}
+/** A TulipFarm table definition or table document. Extra keys are ignored. */
+export interface SqlViewerTable {
+    id: string;
+    label: string;
+    owningTeamId?: string;
+    fields: readonly SqlViewerField[];
+    uniqueKeys?: readonly SqlViewerUniqueKey[];
+}
+export interface SqlViewerProps extends Omit<HTMLAttributes<HTMLDivElement>, "role" | "children"> {
+    /** TulipFarm table definitions or table documents, in display order. */
+    tables: readonly SqlViewerTable[];
+    /** Names the diagram for assistive tech, such as “Tables in Sales”. */
+    label: string;
+    /** Team names by `owningTeamId`. Tables of a named team sit in one tinted group. */
+    groups?: Readonly<Record<string, string>> | undefined;
+    /** Tables shown before the rest collapse into one “+N tables” card. Default 4. */
+    maxVisible?: number | undefined;
+    /** `auto` stacks tables under 768px and uses columns otherwise. */
+    layout?: SqlViewerLayout | undefined;
+}
+/**
+ * A pan-and-zoom map of SQL tables, their columns and keys, and the joins
+ * between them. Hover or pin a table or a foreign key to trace its joins.
+ */
+export declare function SqlViewer({ tables, label, groups, maxVisible, layout, className, ...props }: SqlViewerProps): import("react").JSX.Element;