@tulipfarm/sprout 0.3.1 → 0.5.0

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,7 +1,7 @@
-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"];
+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 ["md", "sm"];
 export type AlertDialogSize = (typeof alertDialogSizeNames)[number];
 export type AlertDialogProps = AlertDialogPrimitive.Root.Props;
 export declare function AlertDialog(props: AlertDialogProps): import("react").JSX.Element;
@@ -15,21 +15,21 @@ 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
+ * `sm` dialogs; from 640px an `md` dialog aligns it to the start with the
  * media beside the text.
  */
 export declare const AlertDialogHeader: ({ className, render, ref, ...props }: AlertDialogPartProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/components/alert-dialog.js

@@ -1,60 +1,60 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-import { cn, stateClassName } from "../internal/classes.js";
-import { Button, } from "./button.js";
-export const alertDialogSizeNames = ["default", "sm"];
+import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import { cn, stateClassName } from '../internal/classes.js';
+import { Button } from './button.js';
+export const alertDialogSizeNames = ['md', 'sm'];
 export function AlertDialog(props) {
     return _jsx(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...props });
 }
 export function AlertDialogTrigger(props) {
-    return (_jsx(AlertDialogPrimitive.Trigger, { "data-slot": "alert-dialog-trigger", ...props }));
+    return _jsx(AlertDialogPrimitive.Trigger, { "data-slot": "alert-dialog-trigger", ...props });
 }
 export function AlertDialogPortal(props) {
-    return (_jsx(AlertDialogPrimitive.Portal, { "data-slot": "alert-dialog-portal", ...props }));
+    return _jsx(AlertDialogPrimitive.Portal, { "data-slot": "alert-dialog-portal", ...props });
 }
 export function AlertDialogOverlay({ className, ...props }) {
-    return (_jsx(AlertDialogPrimitive.Backdrop, { "data-slot": "alert-dialog-overlay", ...props, className: stateClassName("sprout-alert-dialog-overlay", className) }));
+    return (_jsx(AlertDialogPrimitive.Backdrop, { "data-slot": "alert-dialog-overlay", ...props, className: stateClassName('sprout-alert-dialog-overlay', className) }));
 }
 /**
  * The alert dialog surface. It renders its own portal and overlay, so place
  * it directly inside `AlertDialog`.
  */
-export function AlertDialogContent({ className, size = "default", container, ...props }) {
-    return (_jsxs(AlertDialogPortal, { container: container, children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Popup, { "data-slot": "alert-dialog-content", "data-size": size, ...props, className: stateClassName("sprout-alert-dialog-content", className) })] }));
+export function AlertDialogContent({ className, size = 'md', container, ...props }) {
+    return (_jsxs(AlertDialogPortal, { container: container, children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Popup, { "data-slot": "alert-dialog-content", "data-size": size, ...props, className: stateClassName('sprout-alert-dialog-content', className) })] }));
 }
 function part(slot, base) {
     return function AlertDialogPart({ className, render, ref, ...props }) {
         return useRender({
-            defaultTagName: "div",
+            defaultTagName: 'div',
             ref,
             render,
-            props: mergeProps({ "data-slot": slot, className: cn(base, className) }, props),
+            props: mergeProps({ 'data-slot': slot, className: cn(base, className) }, props),
             state: { slot },
         });
     };
 }
 /**
  * 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
+ * `sm` dialogs; from 640px an `md` dialog aligns it to the start with the
  * media beside the text.
  */
-export const AlertDialogHeader = part("alert-dialog-header", "sprout-alert-dialog-header");
+export const AlertDialogHeader = part('alert-dialog-header', 'sprout-alert-dialog-header');
 /**
  * A tinted action bar pinned to the bottom edge. Actions stack in reverse
  * order on narrow screens and align right from 640px; `sm` dialogs always
  * split it into two equal columns.
  */
-export const AlertDialogFooter = part("alert-dialog-footer", "sprout-alert-dialog-footer");
+export const AlertDialogFooter = part('alert-dialog-footer', 'sprout-alert-dialog-footer');
 /** A 40px tile for an icon above or beside the title. */
-export const AlertDialogMedia = part("alert-dialog-media", "sprout-alert-dialog-media");
+export const AlertDialogMedia = part('alert-dialog-media', 'sprout-alert-dialog-media');
 export function AlertDialogTitle({ className, ...props }) {
-    return (_jsx(AlertDialogPrimitive.Title, { "data-slot": "alert-dialog-title", ...props, className: stateClassName("sprout-alert-dialog-title", className) }));
+    return (_jsx(AlertDialogPrimitive.Title, { "data-slot": "alert-dialog-title", ...props, className: stateClassName('sprout-alert-dialog-title', className) }));
 }
 export function AlertDialogDescription({ className, ...props }) {
-    return (_jsx(AlertDialogPrimitive.Description, { "data-slot": "alert-dialog-description", ...props, className: stateClassName("sprout-alert-dialog-description", className) }));
+    return (_jsx(AlertDialogPrimitive.Description, { "data-slot": "alert-dialog-description", ...props, className: stateClassName('sprout-alert-dialog-description', className) }));
 }
 /**
  * The confirming button. It does not close the dialog by itself, so the
@@ -64,6 +64,6 @@ export function AlertDialogAction(props) {
     return _jsx(Button, { "data-slot": "alert-dialog-action", ...props });
 }
 /** Closes the dialog. An outline button unless `variant` says otherwise. */
-export function AlertDialogCancel({ variant = "outline", size = "default", ...props }) {
+export function AlertDialogCancel({ variant = 'outline', size = 'md', ...props }) {
     return (_jsx(AlertDialogPrimitive.Close, { "data-slot": "alert-dialog-cancel", render: _jsx(Button, { variant: variant, size: size }), ...props }));
 }

package/dist/components/alert.d.ts

@@ -1,16 +1,16 @@
-import { useRender } from "@base-ui/react/use-render";
+import { useRender } from '@base-ui/react/use-render';
 export declare const alertVariantNames: readonly ["default", "destructive"];
 export type AlertVariant = (typeof alertVariantNames)[number];
 export interface AlertVariantOptions {
     variant?: AlertVariant | null;
     className?: string;
 }
-export declare function alertVariants({ variant, className, }?: AlertVariantOptions): string;
+export declare function alertVariants({ variant, className }?: AlertVariantOptions): string;
 export interface AlertState extends Record<string, unknown> {
-    slot: "alert";
+    slot: 'alert';
     variant: AlertVariant;
 }
-export interface AlertProps extends useRender.ComponentProps<"div", AlertState> {
+export interface AlertProps extends useRender.ComponentProps<'div', AlertState> {
     variant?: AlertVariant;
 }
 /**
@@ -18,11 +18,11 @@ export interface AlertProps extends useRender.ComponentProps<"div", AlertState>
  * pass `role="status"` or `role="note"` for messages that should not interrupt.
  */
 export declare function Alert({ className, variant, render, ref, role, ...props }: AlertProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-type PartSlot = "alert-title" | "alert-description" | "alert-action";
+type PartSlot = 'alert-title' | 'alert-description' | 'alert-action';
 export interface AlertPartState extends Record<string, unknown> {
     slot: PartSlot;
 }
-export type AlertPartProps = useRender.ComponentProps<"div", AlertPartState>;
+export type AlertPartProps = useRender.ComponentProps<'div', AlertPartState>;
 export declare const AlertTitle: ({ className, render, ref, ...props }: AlertPartProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare const AlertDescription: ({ className, render, ref, ...props }: AlertPartProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 /** Pins a compact control, such as an Undo button, to the top-right corner. */

package/dist/components/alert.js

@@ -1,27 +1,27 @@
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-import { cn } from "../internal/classes.js";
-export const alertVariantNames = ["default", "destructive"];
-export function alertVariants({ variant, className, } = {}) {
-    return cn("sprout-alert", `sprout-alert-${variant ?? "default"}`, className);
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import { cn } from '../internal/classes.js';
+export const alertVariantNames = ['default', 'destructive'];
+export function alertVariants({ variant, className } = {}) {
+    return cn('sprout-alert', `sprout-alert-${variant ?? 'default'}`, className);
 }
 /**
  * A static message block. It announces itself with `role="alert"` by default;
  * pass `role="status"` or `role="note"` for messages that should not interrupt.
  */
-export function Alert({ className, variant = "default", render, ref, role = "alert", ...props }) {
+export function Alert({ className, variant = 'default', render, ref, role = 'alert', ...props }) {
     return useRender({
-        defaultTagName: "div",
+        defaultTagName: 'div',
         ref,
         render,
         props: mergeProps({ role, className: alertVariants({ variant, className }) }, props),
-        state: { slot: "alert", variant },
+        state: { slot: 'alert', variant },
     });
 }
 function part(slot, base) {
     return function AlertPart({ className, render, ref, ...props }) {
         return useRender({
-            defaultTagName: "div",
+            defaultTagName: 'div',
             ref,
             render,
             props: mergeProps({ className: cn(base, className) }, props),
@@ -29,7 +29,7 @@ function part(slot, base) {
         });
     };
 }
-export const AlertTitle = part("alert-title", "sprout-alert-title");
-export const AlertDescription = part("alert-description", "sprout-alert-description");
+export const AlertTitle = part('alert-title', 'sprout-alert-title');
+export const AlertDescription = part('alert-description', 'sprout-alert-description');
 /** Pins a compact control, such as an Undo button, to the top-right corner. */
-export const AlertAction = part("alert-action", "sprout-alert-action");
+export const AlertAction = part('alert-action', 'sprout-alert-action');

package/dist/components/aspect-ratio.d.ts

@@ -1,5 +1,5 @@
-import type { ComponentProps } from "react";
-export interface AspectRatioProps extends ComponentProps<"div"> {
+import type { ComponentProps } from 'react';
+export interface AspectRatioProps extends ComponentProps<'div'> {
     /** Width divided by height, such as `16 / 9`, `4 / 3`, or `1`. */
     ratio: number;
 }

package/dist/components/aspect-ratio.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "../internal/classes.js";
+import { cn } from '../internal/classes.js';
 /** Keeps its content at a fixed width-to-height ratio as its width changes. */
 export function AspectRatio({ ratio, className, style, ...props }) {
-    return (_jsx("div", { "data-slot": "aspect-ratio", className: cn("sprout-aspect-ratio", className), style: { ...style, "--sprout-aspect-ratio": ratio }, ...props }));
+    return (_jsx("div", { "data-slot": "aspect-ratio", className: cn('sprout-aspect-ratio', className), style: { ...style, '--sprout-aspect-ratio': ratio }, ...props }));
 }

package/dist/components/attachment.d.ts

@@ -1,9 +1,9 @@
-import { type ComponentProps, type ReactElement } from "react";
-import { useRender } from "@base-ui/react/use-render";
-import { type FileKind } from "../internal/file-kind.js";
-import { type ButtonProps } from "./button.js";
+import { type ComponentProps, type ReactElement } from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { type FileKind } from '../internal/file-kind.js';
+import { type ButtonProps } from './button.js';
 export declare const attachmentStateNames: readonly ["idle", "uploading", "processing", "error", "done"];
-export declare const attachmentSizeNames: readonly ["default", "sm", "xs"];
+export declare const attachmentSizeNames: readonly ["lg", "md", "sm"];
 export declare const attachmentOrientationNames: readonly ["horizontal", "vertical"];
 export declare const attachmentMediaVariantNames: readonly ["icon", "image"];
 export declare const attachmentGroupVariantNames: readonly ["carousel", "grid", "inline", "list"];
@@ -19,7 +19,7 @@ export type FileAttachmentVariant = (typeof fileAttachmentVariantNames)[number];
 export type FileAttachmentState = (typeof fileAttachmentStateNames)[number];
 export type FileTypeIconSize = (typeof fileTypeIconSizeNames)[number];
 export type { FileKind };
-export interface AttachmentProps extends ComponentProps<"div"> {
+export interface AttachmentProps extends ComponentProps<'div'> {
     /** `idle` dashes the border, `uploading` and `processing` shimmer the title and dim image media, `error` turns it red. */
     state?: AttachmentState | undefined;
     size?: AttachmentSize | undefined;
@@ -27,23 +27,23 @@ export interface AttachmentProps extends ComponentProps<"div"> {
 }
 /** A file card built from media, content, and actions. */
 export declare function Attachment({ className, state, size, orientation, ...props }: AttachmentProps): import("react").JSX.Element;
-export interface AttachmentMediaProps extends ComponentProps<"div"> {
+export interface AttachmentMediaProps extends ComponentProps<'div'> {
     /** `icon` centers an icon or spinner; `image` crops an `img` to the square. */
     variant?: AttachmentMediaVariant | undefined;
 }
 export declare function AttachmentMedia({ className, variant, ...props }: AttachmentMediaProps): import("react").JSX.Element;
-export declare function AttachmentContent({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function AttachmentContent({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
 /** A single-line name. It shimmers while the attachment uploads or processes. */
-export declare function AttachmentTitle({ className, ...props }: ComponentProps<"span">): import("react").JSX.Element;
-export declare function AttachmentDescription({ className, ...props }: ComponentProps<"span">): import("react").JSX.Element;
+export declare function AttachmentTitle({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
+export declare function AttachmentDescription({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
 /** Sits above the trigger. Vertical attachments float it over the media corner. */
-export declare function AttachmentActions({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function AttachmentActions({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
 /** A ghost `icon-xs` Button. Give icon-only actions an `aria-label`. */
 export declare function AttachmentAction({ variant, size, ...props }: ButtonProps): import("react").JSX.Element;
-export type AttachmentTriggerProps = useRender.ComponentProps<"button">;
+export type AttachmentTriggerProps = useRender.ComponentProps<'button'>;
 /** Stretches over the whole attachment so a click anywhere opens it. Name it with `aria-label`. */
 export declare function AttachmentTrigger({ className, render, type, ...props }: AttachmentTriggerProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-export interface AttachmentGroupProps extends ComponentProps<"div"> {
+export interface AttachmentGroupProps extends ComponentProps<'div'> {
     /**
      * `carousel` scrolls one row sideways with edge arrows, `grid` makes two
      * columns (three from 640px), `inline` wraps, and `list` stacks.
@@ -51,7 +51,7 @@ export interface AttachmentGroupProps extends ComponentProps<"div"> {
     variant?: AttachmentGroupVariant | undefined;
 }
 export declare function AttachmentGroup(props: AttachmentGroupProps): import("react").JSX.Element;
-export interface FileTypeIconProps extends Omit<ComponentProps<"svg">, "children"> {
+export interface FileTypeIconProps extends Omit<ComponentProps<'svg'>, 'children'> {
     name: string;
     mediaType: string;
     /** `sm` is 20 × 24px for rows and chips; `lg` is 30 × 36px for grid previews. */
@@ -60,10 +60,10 @@ export interface FileTypeIconProps extends Omit<ComponentProps<"svg">, "children
 /** A paper glyph with a colored extension badge, such as PDF or XLSX. Decorative. */
 export declare function FileTypeIcon({ name, mediaType, size, className, ...props }: FileTypeIconProps): import("react").JSX.Element;
 export type AttachmentFileSource = {
-    kind: "local";
+    kind: 'local';
     file: File;
 } | {
-    kind: "remote";
+    kind: 'remote';
     url: string;
 };
 export interface AttachmentFile {
@@ -93,7 +93,7 @@ export interface FileAttachmentProps {
     /** Peeks at images, text, code, JSON, and Markdown in a card on hover or focus. Needs a `source` or `url`. */
     preview?: boolean | undefined;
     /** The verb in the open button's name, such as “Download report.pdf”. */
-    actionLabel?: "Inspect" | "Download" | undefined;
+    actionLabel?: 'Inspect' | 'Download' | undefined;
     className?: string | undefined;
 }
 /** A ready-made file row, card, inline mention, or chip with upload states, retry, and remove. */
@@ -115,4 +115,4 @@ export interface LocalFileAttachmentProps {
     preview?: boolean | undefined;
 }
 /** A chip for a `File` still in browser memory, with a live image preview. */
-export declare function LocalFileAttachment({ file, onRemove, onOpen, viewable, preview, }: LocalFileAttachmentProps): import("react").JSX.Element;
+export declare function LocalFileAttachment({ file, onRemove, onOpen, viewable, preview }: LocalFileAttachmentProps): import("react").JSX.Element;