@tulipfarm/sprout 0.3.0 → 0.4.0

package/README.md

@@ -62,21 +62,21 @@ The package is also on GitHub Packages. It needs a GitHub token with
 Add the styles to your CSS entry:
 
 ```css
-@import "tailwindcss";
-@import "@tulipfarm/sprout/styles.css";
+@import 'tailwindcss';
+@import '@tulipfarm/sprout/styles.css';
 ```
 
 Use a component:
 
 ```tsx
-import { Button } from "@tulipfarm/sprout/button";
-import { Badge } from "@tulipfarm/sprout/badge";
+import { Button } from '@tulipfarm/sprout/button';
+import { Badge } from '@tulipfarm/sprout/badge';
 
 export function Status() {
   return (
     <>
       <Badge variant="success">Connected</Badge>
-      <Button state={{ kind: "busy" }} pendingLabel="Saving…">
+      <Button state={{ kind: 'busy' }} pendingLabel="Saving…">
         Save
       </Button>
     </>
@@ -98,7 +98,7 @@ for notes on each one.
 
 <!-- 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.
+Full library: **842.5 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>
@@ -108,11 +108,12 @@ Full library: **786.3 kB** gzip. Each component path is smaller. Sizes are minif
 | `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 |
+| `alert-dialog`      | 169.1 kB |  57.0 kB |  49.7 kB |
 | `aspect-ratio`      |  30.2 kB |   9.7 kB |   8.5 kB |
-| `attachment`        | 459.9 kB | 155.6 kB | 128.6 kB |
+| `attachment`        | 352.1 kB | 118.4 kB |  97.9 kB |
 | `avatar`            |  45.5 kB |  15.4 kB |  13.6 kB |
 | `badge`             |  34.9 kB |  11.4 kB |  10.0 kB |
+| `board`             | 452.5 kB | 148.5 kB | 125.3 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 |
@@ -121,30 +122,31 @@ Full library: **786.3 kB** gzip. Each component path is smaller. Sizes are minif
 | `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 |
+| `chart`             | 540.1 kB | 155.5 kB | 129.9 kB |
+| `timeline`          | 598.5 kB | 175.9 kB | 147.1 kB |
+| `chat-confirmation` |  76.7 kB |  26.3 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 |
+| `chat-sources`      | 206.2 kB |  70.5 kB |  60.5 kB |
+| `chat-input`        | 902.0 kB | 297.7 kB | 246.8 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 |
+| `code-block`        |  74.5 kB |  26.1 kB |  22.3 kB |
 | `collapsible`       |  55.5 kB |  18.7 kB |  16.5 kB |
-| `combobox`          | 268.6 kB |  90.9 kB |  77.7 kB |
+| `combobox`          | 268.6 kB |  90.8 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 |
+| `context-menu`      | 242.8 kB |  81.0 kB |  70.0 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 |
+| `dropdown-menu`     | 239.6 kB |  80.0 kB |  69.1 kB |
+| `field`             |  97.9 kB |  34.1 kB |  29.6 kB |
+| `file-explorer`     | 175.8 kB |  61.5 kB |  51.5 kB |
+| `file-viewer`       | 320.8 kB | 108.3 kB |  90.7 kB |
+| `form`              | 109.7 kB |  37.2 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`             | 108.2 kB |  37.4 kB |  32.4 kB |
+| `input-group`       | 119.1 kB |  40.4 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 |
@@ -152,26 +154,28 @@ Full library: **786.3 kB** gzip. Each component path is smaller. Sizes are minif
 | `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-response`  | 232.8 kB |  74.3 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 |
+| `navigation-menu`   | 182.3 kB |  63.0 kB |  54.8 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 |
+| `plan-outline`      |  79.9 kB |  26.8 kB |  22.9 kB |
+| `popover`           | 178.0 kB |  60.7 kB |  52.7 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 |
+| `radio-group`       |  80.8 kB |  27.9 kB |  24.8 kB |
 | `reasoning-effort`  |  35.5 kB |  12.0 kB |  10.5 kB |
+| `record-list`       |  65.8 kB |  22.3 kB |  19.0 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 |
+| `result-card`       | 240.3 kB |  85.3 kB |  72.4 kB |
+| `result-notice`     |  34.3 kB |  11.3 kB |   9.9 kB |
+| `review-card`       |  61.6 kB |  21.2 kB |  18.5 kB |
 | `rich-text-editor`  | 442.5 kB | 140.2 kB | 119.8 kB |
-| `schema-diagram`    | 247.9 kB |  82.9 kB |  71.2 kB |
+| `schema-diagram`    | 247.9 kB |  82.9 kB |  71.3 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 |
@@ -181,24 +185,25 @@ Full library: **786.3 kB** gzip. Each component path is smaller. Sizes are minif
 | `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 |
+| `sidebar`           | 251.1 kB |  85.7 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-panel`       | 460.5 kB | 155.8 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`             | 541.3 kB | 173.3 kB | 145.8 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 |
+| `tabs`              |  80.3 kB |  27.6 kB |  24.5 kB |
+| `textarea`          |  98.2 kB |  34.2 kB |  29.6 kB |
+| `toast`             | 189.5 kB |  65.2 kB |  56.6 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 |
+| `toolbar-status`    | 189.3 kB |  64.3 kB |  55.5 kB |
 | `tooltip`           | 164.7 kB |  56.7 kB |  49.4 kB |
 | `typed-text`        |  31.2 kB |  10.1 kB |   8.8 kB |
+| `view-switcher`     | 270.2 kB |  90.6 kB |  77.1 kB |
 
 </details>
 <!-- bundle-size:end -->
@@ -210,7 +215,7 @@ CI compares sizes on each pull request. Run `pnpm size` to see them locally.
 | **Actions**             | Button · Button Group · Toggle · Toggle Group · Toolbar Status · Kbd                                                                                                                                                                                           |
 | **Forms**               | Field · Form · Label · Input · Input Group · Input OTP · Textarea · Checkbox · Radio Group · Switch · Slider · Select · Combobox · Choice List · Calendar · Search Field · Rich Text Editor · Mention List · Questionnaire · Selection Slot · Reasoning Effort |
 | **Overlays**            | Dialog · Alert Dialog · Sheet · Popover · Hover Card · Tooltip · Dropdown Menu · Context Menu · Menubar · Command · Search Dialog · Toast                                                                                                                      |
-| **Layout & navigation** | Sidebar · Navigation Menu · Breadcrumb · Pagination · Tabs · Accordion · Collapsible · Page Header · Page Content · Settings List · Card · Carousel · Resizable · Scroll Area · Separator · Aspect Ratio · Direction · Canvas                                  |
+| **Layout & navigation** | Sidebar · Navigation Menu · Breadcrumb · Pagination · Tabs · View Switcher · Accordion · Collapsible · Page Header · Page Content · Settings List · Card · Carousel · Resizable · Scroll Area · Separator · Aspect Ratio · Direction · Canvas                  |
 | **Feedback**            | Alert · Notice Banner · Badge · Progress · Spinner · Skeleton · State Panel · State Sample                                                                                                                                                                     |
 | **Data display**        | Table · Chart · Code Block · File Viewer · Schema Diagram · Avatar · Brand Icon · Attachment · Typed Text · Gradient Banner · Glass Banner                                                                                                                     |
 | **Agents & chat**       | Message · Message Actions · Message Response · Message Scroller · Chat Confirmation · Chat Plan · Chat Sources · Plan Outline · Prompt List · Result Card · Review Card · Tool Activity                                                                        |
@@ -229,7 +234,7 @@ Presets live in `@tulipfarm/sprout/themes/*`: `neutral`, `tulipfarm`, `github`,
 `linear`, `vercel`, `stripe`, `notion`, and more.
 
 ```css
-@import "@tulipfarm/sprout/themes/tulipfarm.css";
+@import '@tulipfarm/sprout/themes/tulipfarm.css';
 ```
 
 ### shadcn
@@ -252,7 +257,7 @@ After you change package code, run `pnpm --filter @tulipfarm/sprout build`.
 ```sh
 pnpm build
 pnpm typecheck
-pnpm format:check
+pnpm lint       # Oxfmt check and Oxlint; `pnpm format` fixes formatting
 pnpm test
 pnpm exec playwright install chromium
 pnpm test:browser

package/dist/components/accordion.d.ts

@@ -1,4 +1,4 @@
-import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
+import { Accordion as BaseAccordion } from '@base-ui/react/accordion';
 export declare const accordionTriggerVariantNames: readonly ["default", "quiet"];
 export type AccordionTriggerVariant = (typeof accordionTriggerVariantNames)[number];
 export type AccordionProps<Value = any> = BaseAccordion.Root.Props<Value>;
@@ -20,7 +20,7 @@ export interface AccordionTriggerProps extends BaseAccordion.Trigger.Props {
 }
 /** The heading button that opens and closes its section. */
 export declare function AccordionTrigger({ className, children, variant, ...props }: AccordionTriggerProps): import("react").JSX.Element;
-export interface AccordionContentProps extends Omit<BaseAccordion.Panel.Props, "className"> {
+export interface AccordionContentProps extends Omit<BaseAccordion.Panel.Props, 'className'> {
     /** Classes for the padded inner box that holds the content. */
     className?: string;
 }

package/dist/components/accordion.js

@@ -1,26 +1,26 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
-import { ChevronDown } from "reicon-react/icons/ChevronDown";
-import { cn, stateClassName } from "../internal/classes.js";
-export const accordionTriggerVariantNames = ["default", "quiet"];
+import { Accordion as BaseAccordion } from '@base-ui/react/accordion';
+import { ChevronDown } from 'reicon-react/icons/ChevronDown';
+import { cn, stateClassName } from '../internal/classes.js';
+export const accordionTriggerVariantNames = ['default', 'quiet'];
 /**
  * A stack of sections that open in place. One section opens at a time unless
  * you pass `multiple`. Pass `value` and `onValueChange` to control which
  * sections are open, or `defaultValue` to let it manage itself.
  */
 export function Accordion({ className, ...props }) {
-    return (_jsx(BaseAccordion.Root, { "data-slot": "accordion", ...props, className: stateClassName("sprout-accordion", className) }));
+    return (_jsx(BaseAccordion.Root, { "data-slot": "accordion", ...props, className: stateClassName('sprout-accordion', className) }));
 }
 /** One section. Give it a `value` to open it by default or to control it. */
 export function AccordionItem({ className, ...props }) {
-    return (_jsx(BaseAccordion.Item, { "data-slot": "accordion-item", ...props, className: stateClassName("sprout-accordion-item", className) }));
+    return (_jsx(BaseAccordion.Item, { "data-slot": "accordion-item", ...props, className: stateClassName('sprout-accordion-item', className) }));
 }
 /** The heading button that opens and closes its section. */
-export function AccordionTrigger({ className, children, variant = "default", ...props }) {
+export function AccordionTrigger({ className, children, variant = 'default', ...props }) {
     return (_jsx(BaseAccordion.Header, { "data-slot": "accordion-header", className: "sprout-accordion-header", children: _jsxs(BaseAccordion.Trigger, { "data-slot": "accordion-trigger", "data-variant": variant, ...props, className: stateClassName(`sprout-accordion-trigger sprout-accordion-trigger-${variant}`, className), children: [children, _jsx(ChevronDown, { size: 16, "aria-hidden": "true", "data-slot": "accordion-trigger-icon", className: "sprout-accordion-trigger-icon" })] }) }));
 }
 /** The section body. It grows open and shrinks closed. */
 export function AccordionContent({ className, children, ...props }) {
-    return (_jsx(BaseAccordion.Panel, { "data-slot": "accordion-content", ...props, className: "sprout-accordion-content", children: _jsx("div", { className: cn("sprout-accordion-content-inner", className), children: children }) }));
+    return (_jsx(BaseAccordion.Panel, { "data-slot": "accordion-content", ...props, className: "sprout-accordion-content", children: _jsx("div", { className: cn('sprout-accordion-content-inner', className), children: children }) }));
 }

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

@@ -1,4 +1,4 @@
-import { type ReactNode } from "react";
+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];
@@ -15,7 +15,7 @@ export interface AgentFanoutAgent {
     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. */
+    /** Any CSS color. Defaults to the next of ten `--sprout-chart-*` colors. */
     color?: string | undefined;
     /** Subagents this agent calls in turn. They take its color. */
     agents?: AgentFanoutAgent[] | undefined;

package/dist/components/agent-fanout.js

@@ -1,58 +1,52 @@
-"use client";
+'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"];
+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 colorCount = 10;
 const statusText = {
-    queued: "Queued",
-    working: "Working",
-    done: "Done",
-    failed: "Failed",
-    stopped: "Stopped",
+    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;
+    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: "",
+            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"
+    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"
+            ? 'Composing answer'
             : settled > 0
-                ? "Merging results"
-                : "Specialists working";
+                ? 'Merging results'
+                : 'Specialists working';
     return { text, time };
 }
 function useWidth() {
@@ -79,31 +73,22 @@ function flatten(agents, initial, parent = rootId, depth = 1, color) {
             parent,
             depth,
             changed: changed || undefined,
-            trip: !changed
-                ? null
-                : agent.status === "working"
-                    ? "out"
-                    : agent.status === "done"
-                        ? "back"
-                        : null,
+            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,
+                '--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),
-        ];
+        return [line, ...flatten(agent.agents ?? [], initial, agent.id, depth + 1, own)];
     });
 }
-const rootId = "agent-fanout-root";
+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,
+    position: type === 'source' ? Position.Bottom : Position.Top,
     x,
     y,
     width: 0,
@@ -114,49 +99,46 @@ 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 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 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 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",
+            type: 'root',
             position: { x: width / 2 - rootSize / 2, y: rootTop },
             width: rootSize,
             height: rootSize,
-            handles: [handle("source", rootSize / 2, rootSize)],
+            handles: [handle('source', rootSize / 2, rootSize)],
             data: { state, changed: rootChanged },
         },
         ...lines.map((line) => ({
             id: line.agent.id,
-            type: "agent",
+            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),
-            ],
+            handles: [handle('target', column / 2, 0), handle('source', column / 2, dot)],
             data: line,
         })),
     ];
-    const edges = lines.map((line) => ({
+    const edges = lines.map(line => ({
         id: `${line.parent}-${line.agent.id}`,
-        type: "trip",
+        type: 'trip',
         source: line.parent,
         target: line.agent.id,
         data: { trip: line.trip, style: line.style },
@@ -165,20 +147,16 @@ function layout(lines, width, state, rootChanged) {
         nodes,
         edges,
         dot,
-        height: levelTop +
-            Math.max(depth - 1, 0) * levelGap +
-            dot +
-            nodeLabel +
-            bottomGap,
+        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" })] }));
+    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, }) {
+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;
@@ -188,16 +166,16 @@ 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")
+    if (agent.status === 'done')
+        return _jsx(Check, { size: 16, strokeWidth: 2.5, "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")
+    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] });
 }
@@ -206,7 +184,7 @@ function StatusMark({ agent }) {
  * 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, }) {
+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.
@@ -217,12 +195,12 @@ export function AgentFanout({ task, agents, state = "running", elapsed, label, d
     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: {
+    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`,
+                            '--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"] }))] })] }));
+                                        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/alert-dialog.d.ts

@@ -1,6 +1,6 @@
-import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
-import { useRender } from "@base-ui/react/use-render";
-import { type ButtonProps, type ButtonSize, type ButtonVariant } from "./button.js";
+import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';
+import { useRender } from '@base-ui/react/use-render';
+import { type ButtonProps, type ButtonSize, type ButtonVariant } from './button.js';
 export declare const alertDialogSizeNames: readonly ["default", "sm"];
 export type AlertDialogSize = (typeof alertDialogSizeNames)[number];
 export type AlertDialogProps = AlertDialogPrimitive.Root.Props;
@@ -15,18 +15,18 @@ export interface AlertDialogContentProps extends AlertDialogPrimitive.Popup.Prop
     /** `sm` centers the header and splits the footer into two equal buttons. */
     size?: AlertDialogSize;
     /** Where the portal renders. Defaults to `document.body`. */
-    container?: AlertDialogPrimitive.Portal.Props["container"];
+    container?: AlertDialogPrimitive.Portal.Props['container'];
 }
 /**
  * The alert dialog surface. It renders its own portal and overlay, so place
  * it directly inside `AlertDialog`.
  */
 export declare function AlertDialogContent({ className, size, container, ...props }: AlertDialogContentProps): import("react").JSX.Element;
-type PartSlot = "alert-dialog-header" | "alert-dialog-footer" | "alert-dialog-media";
+type PartSlot = 'alert-dialog-header' | 'alert-dialog-footer' | 'alert-dialog-media';
 export interface AlertDialogPartState extends Record<string, unknown> {
     slot: PartSlot;
 }
-export type AlertDialogPartProps = useRender.ComponentProps<"div", AlertDialogPartState>;
+export type AlertDialogPartProps = useRender.ComponentProps<'div', AlertDialogPartState>;
 /**
  * Groups media, title, and description. Centered on narrow screens and in
  * `sm` dialogs; from 640px a `default` dialog aligns it to the start with the