@tulipfarm/sprout 0.4.0 → 0.5.0

package/README.md

@@ -98,7 +98,7 @@ for notes on each one.
 
 <!-- bundle-size:start -->
 
-Full library: **842.5 kB** gzip. Each component path is smaller. Sizes are minified, with React and other peer dependencies left out.
+Full library: **866.4 kB** gzip. Each component path is smaller. Sizes are minified, with React and other peer dependencies left out.
 
 <details>
 <summary>Size of each component</summary>
@@ -106,104 +106,105 @@ Full library: **842.5 kB** gzip. Each component path is smaller. Sizes are minif
 | 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 |
+| `agent-fanout`      | 260.7 kB |  86.6 kB |  74.5 kB |
+| `agent-avatar`      | 137.7 kB |  39.9 kB |  34.0 kB |
 | `alert`             |  35.2 kB |  11.5 kB |  10.1 kB |
-| `alert-dialog`      | 169.1 kB |  57.0 kB |  49.7 kB |
+| `alert-dialog`      | 168.8 kB |  56.9 kB |  49.7 kB |
 | `aspect-ratio`      |  30.2 kB |   9.7 kB |   8.5 kB |
-| `attachment`        | 352.1 kB | 118.4 kB |  97.9 kB |
-| `avatar`            |  45.5 kB |  15.4 kB |  13.6 kB |
+| `attachment`        | 351.9 kB | 118.6 kB |  97.8 kB |
+| `avatar`            |  44.0 kB |  14.6 kB |  12.9 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 |
+| `board`             | 452.2 kB | 148.3 kB | 125.3 kB |
+| `brand-icon`        | 195.1 kB |  70.2 kB |  61.3 kB |
 | `breadcrumb`        |  40.5 kB |  13.4 kB |  11.7 kB |
-| `button`            |  50.5 kB |  16.7 kB |  14.6 kB |
+| `button`            |  50.3 kB |  16.6 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 |
+| `calendar`          | 312.0 kB | 103.4 kB |  88.2 kB |
+| `canvas`            | 234.9 kB |  80.7 kB |  69.0 kB |
 | `card`              |  35.4 kB |  11.6 kB |  10.1 kB |
-| `carousel`          |  60.4 kB |  19.9 kB |  17.6 kB |
+| `carousel`          |  60.2 kB |  19.8 kB |  17.5 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 |
+| `timeline`          | 598.3 kB | 175.8 kB | 147.0 kB |
+| `chat-confirmation` |  76.5 kB |  26.2 kB |  22.4 kB |
 | `chat-plan`         |  42.3 kB |  13.4 kB |  11.7 kB |
-| `chat-sources`      | 206.2 kB |  70.5 kB |  60.5 kB |
-| `chat-input`        | 902.0 kB | 297.7 kB | 246.8 kB |
+| `chat-sources`      | 206.0 kB |  70.5 kB |  60.3 kB |
+| `chat-input`        | 901.7 kB | 297.5 kB | 246.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.5 kB |  26.1 kB |  22.3 kB |
+| `code-block`        |  74.3 kB |  26.0 kB |  22.3 kB |
 | `collapsible`       |  55.5 kB |  18.7 kB |  16.5 kB |
-| `combobox`          | 268.6 kB |  90.8 kB |  77.7 kB |
-| `command`           | 181.9 kB |  61.6 kB |  53.5 kB |
+| `combobox`          | 268.4 kB |  90.8 kB |  77.7 kB |
+| `command`           | 181.7 kB |  61.5 kB |  53.3 kB |
 | `context-menu`      | 242.8 kB |  81.0 kB |  70.0 kB |
-| `dialog`            | 170.7 kB |  57.5 kB |  50.2 kB |
+| `dialog`            | 170.5 kB |  57.4 kB |  50.1 kB |
 | `direction`         |   1.4 kB |   0.7 kB |   0.7 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 |
+| `file-explorer`     | 175.6 kB |  61.4 kB |  51.5 kB |
+| `file-viewer`       | 320.6 kB | 108.2 kB |  90.5 kB |
+| `form`              | 109.5 kB |  37.2 kB |  32.1 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.4 kB |
-| `input-group`       | 119.1 kB |  40.4 kB |  34.8 kB |
-| `input-otp`         |  65.3 kB |  22.9 kB |  20.3 kB |
+| `input-group`       | 118.9 kB |  40.3 kB |  34.6 kB |
+| `input-otp`         |  65.4 kB |  22.9 kB |  20.4 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 |
+| `mention-list`      |  52.4 kB |  17.2 kB |  15.1 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.8 kB |  74.3 kB |  64.2 kB |
-| `message-scroller`  |  69.0 kB |  22.1 kB |  19.6 kB |
+| `message-actions`   |  71.2 kB |  24.8 kB |  20.8 kB |
+| `message-response`  | 232.6 kB |  74.2 kB |  64.1 kB |
+| `message-scroller`  |  68.8 kB |  22.0 kB |  19.5 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 |
+| `page-header`       |  54.4 kB |  17.5 kB |  15.4 kB |
+| `pagination`        |  55.1 kB |  17.8 kB |  15.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 |
+| `prompt-list`       | 199.0 kB |  71.9 kB |  62.7 kB |
+| `questionnaire`     |  69.3 kB |  23.3 kB |  20.3 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 |
+| `record-list`       |  65.6 kB |  22.2 kB |  18.9 kB |
 | `resizable`         |  39.4 kB |  13.4 kB |  11.8 kB |
-| `result-card`       | 240.3 kB |  85.3 kB |  72.4 kB |
+| `result-card`       | 240.0 kB |  85.2 kB |  72.2 kB |
 | `result-notice`     |  34.3 kB |  11.3 kB |   9.9 kB |
-| `review-card`       |  61.6 kB |  21.2 kB |  18.5 kB |
+| `review-card`       |  61.6 kB |  21.2 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.3 kB |
-| `sql-viewer`        | 265.6 kB |  89.1 kB |  76.3 kB |
+| `schema-diagram`    | 247.7 kB |  82.8 kB |  71.1 kB |
+| `sql-viewer`        | 265.4 kB |  89.1 kB |  76.2 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 |
+| `search-dialog`     | 190.0 kB |  64.5 kB |  55.3 kB |
+| `search-field`      | 122.0 kB |  41.3 kB |  35.5 kB |
+| `select`            | 230.4 kB |  79.3 kB |  67.9 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 |
+| `sheet`             | 213.2 kB |  72.9 kB |  63.1 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`       | 460.5 kB | 155.8 kB | 128.5 kB |
+| `slider`            |  83.6 kB |  29.5 kB |  26.0 kB |
+| `spinner`           |  36.5 kB |  11.6 kB |  10.2 kB |
+| `state-panel`       | 552.5 kB | 180.4 kB | 149.2 kB |
 | `state-sample`      |  33.5 kB |  10.5 kB |   9.2 kB |
-| `switch`            |  50.3 kB |  17.3 kB |  15.3 kB |
-| `table`             | 541.3 kB | 173.3 kB | 145.8 kB |
+| `switch`            |  50.2 kB |  17.3 kB |  15.4 kB |
+| `table`             | 541.1 kB | 173.1 kB | 145.7 kB |
 | `table-nuqs`        |   2.1 kB |   1.1 kB |   1.0 kB |
-| `tabs`              |  80.3 kB |  27.6 kB |  24.5 kB |
+| `tabs`              |  80.3 kB |  27.6 kB |  24.4 kB |
 | `textarea`          |  98.2 kB |  34.2 kB |  29.6 kB |
-| `toast`             | 189.5 kB |  65.2 kB |  56.6 kB |
+| `toast`             | 189.3 kB |  65.1 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.5 kB |
+| `toggle-group`      |  67.1 kB |  23.0 kB |  20.4 kB |
+| `tool-activity`     |  86.5 kB |  29.1 kB |  25.1 kB |
+| `toolbar-status`    | 189.1 kB |  64.2 kB |  55.4 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 |
+| `view-switcher`     | 270.0 kB |  90.6 kB |  77.0 kB |
 
 </details>
 <!-- bundle-size:end -->
@@ -217,7 +218,7 @@ CI compares sizes on each pull request. Run `pnpm size` to see them locally.
 | **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 · 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                                                                                                                     |
+| **Data display**        | Table · Chart · Code Block · File Viewer · Schema Diagram · Avatar · Agent 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                                                                        |
 
 ## Theming
@@ -253,6 +254,7 @@ pnpm dev        # docs and live examples at http://localhost:4321
 ```
 
 After you change package code, run `pnpm --filter @tulipfarm/sprout build`.
+After you change agent avatar artwork in `packages/sprout/artwork/agent-avatars`, run `pnpm avatars`.
 
 ```sh
 pnpm build

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

@@ -0,0 +1,27 @@
+import { colors, objects } from '../internal/agent-avatar-artwork.js';
+import { type AvatarProps } from './avatar.js';
+export type AgentAvatarObject = (typeof objects)[number];
+export type AgentAvatarColor = (typeof colors)[number];
+export declare const agentAvatarObjects: readonly AgentAvatarObject[];
+export declare const agentAvatarColors: readonly AgentAvatarColor[];
+/** A `data:` URL for one object in one color. Needs no network. */
+export declare function agentAvatarArtwork(object: AgentAvatarObject, color: AgentAvatarColor): string;
+/** The stable object and color for an agent, and its artwork. */
+export declare function agentAvatar(agentId: string): {
+    object: "sprout" | "tulip" | "tulip-bouquet" | "cactus" | "sunflower" | "daisy" | "bonsai" | "monstera" | "fern" | "lavender" | "rose" | "poppy" | "daffodil" | "lily" | "bellflower" | "eucalyptus" | "ivy" | "succulent" | "acorn" | "pinecone" | "watering-can" | "hand-trowel" | "garden-fork" | "pruning-shears" | "gardening-gloves" | "rain-boots" | "wheelbarrow" | "seed-packet" | "flower-pot" | "plant-mister" | "spade" | "rake" | "hoe" | "garden-hose" | "seed-tray" | "garden-apron" | "plant-label" | "twine-spool" | "compost-bin" | "pruning-saw" | "mushroom" | "strawberry" | "carrot" | "pumpkin" | "apple" | "pear" | "lemon" | "corn-cob" | "honey-jar" | "harvest-basket" | "windmill" | "barn" | "tractor" | "wheat" | "pea-pod" | "beetroot" | "radish" | "eggplant" | "cherries" | "hay-bale" | "umbrella" | "mug" | "teapot" | "moka-pot" | "lantern" | "candle" | "picnic-basket" | "straw-hat" | "vase" | "jam-jar" | "birdhouse" | "rocking-chair" | "kettle" | "bread-loaf" | "croissant" | "milk-bottle" | "cookie" | "oven-mitt" | "thermos" | "yarn-ball" | "notebook" | "pencil" | "paintbrush" | "paint-palette" | "fountain-pen" | "camera" | "headphones" | "desk-lamp" | "book-stack" | "alarm-clock" | "scissors" | "ruler" | "stapler" | "paperclip" | "binder-clip" | "tape-dispenser" | "magnifying-glass" | "envelope" | "typewriter" | "globe";
+    color: "pink" | "coral" | "orange" | "yellow" | "green" | "teal" | "blue" | "purple";
+    src: string;
+};
+export declare function agentAvatarSrc(agentId: string): string;
+export interface AgentAvatarProps extends Omit<AvatarProps, 'children'> {
+    agentId: string;
+    /** The agent's name. Its first letter shows if a custom `src` fails. */
+    name: string;
+    /** Overrides the object derived from `agentId`. */
+    object?: AgentAvatarObject | undefined;
+    /** Overrides the color derived from `agentId`. */
+    color?: AgentAvatarColor | undefined;
+    /** Your own artwork instead of the built-in collection. */
+    src?: string | undefined;
+}
+export declare function AgentAvatar({ agentId, name, object, color, src, ...props }: AgentAvatarProps): import("react").JSX.Element;

package/dist/components/agent-avatar.js

@@ -0,0 +1,67 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { artwork, colors, objects, palettes } from '../internal/agent-avatar-artwork.js';
+import { hash } from '../internal/hash.js';
+import { Avatar, AvatarFallback, AvatarImage } from './avatar.js';
+export const agentAvatarObjects = objects;
+export const agentAvatarColors = colors;
+function grain(seed) {
+    let state = seed;
+    const coordinate = () => {
+        state = (Math.imul(state, 1664525) + 1013904223) >>> 0;
+        return ((state / 2 ** 32) * 31).toFixed(2);
+    };
+    return Array.from({ length: 96 }, () => `M${coordinate()} ${coordinate()}h.55v.55h-.55z`).join('');
+}
+let finish;
+// The circle with a faint diagonal wash and fixed-seed grain, shared by every object.
+function background() {
+    const circle = '<circle cx="128" cy="128" r="120"';
+    finish ??=
+        '<defs><linearGradient id="tf-background-wash" x2="1" y2="1">' +
+            '<stop stop-color="#0000a5" stop-opacity=".08"/><stop offset="1" stop-color="#0000a2" stop-opacity=".08"/>' +
+            '</linearGradient><pattern id="tf-background-grain" width="32" height="32" patternUnits="userSpaceOnUse">' +
+            `<path d="${grain(19)}" fill="#0000a2" opacity=".1"/><path d="${grain(73)}" fill="#0000a5" opacity=".09"/>` +
+            `</pattern></defs>${circle} fill="#0000a1"/>${circle} fill="url(#tf-background-wash)"/>` +
+            `${circle} fill="url(#tf-background-grain)"/>`;
+    return finish;
+}
+const cache = new Map();
+/** A `data:` URL for one object in one color. Needs no network. */
+export function agentAvatarArtwork(object, color) {
+    const key = `${object}/${color}`;
+    let src = cache.get(key);
+    if (src === undefined) {
+        const index = objects.indexOf(object);
+        const palette = palettes[colors.indexOf(color)];
+        if (index < 0 || palette === undefined)
+            throw new Error(`Unknown agent avatar: ${key}`);
+        const svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="256" height="256">' +
+            artwork[index].replace('$', background()).replace(/#0000a([1-7])/g, (_, role) => palette[Number(role) - 1]) +
+            '</svg>';
+        src = `data:image/svg+xml,${encodeURIComponent(svg)}`;
+        cache.set(key, src);
+    }
+    return src;
+}
+/** The stable object and color for an agent, and its artwork. */
+export function agentAvatar(agentId) {
+    const h = hash(agentId);
+    const object = objects[h % objects.length];
+    const color = colors[(h >>> 16) % colors.length];
+    return { object, color, src: agentAvatarArtwork(object, color) };
+}
+export function agentAvatarSrc(agentId) {
+    return agentAvatar(agentId).src;
+}
+function initial(name) {
+    return name.trim().charAt(0).toUpperCase() || '?';
+}
+export function AgentAvatar({ agentId, name, object, color, src, ...props }) {
+    let art;
+    if (src === undefined) {
+        const derived = agentAvatar(agentId);
+        art = agentAvatarArtwork(object ?? derived.object, color ?? derived.color);
+    }
+    return (_jsx(Avatar, { "data-agent-avatar": "", ...props, children: art === undefined ? (_jsxs(_Fragment, { children: [_jsx(AvatarImage, { src: src, alt: "" }), _jsx(AvatarFallback, { children: initial(name) })] })) : (_jsx("img", { "data-slot": "avatar-image", className: "sprout-avatar-image", src: art, alt: "", draggable: false })) }));
+}

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"];
+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;
@@ -29,7 +29,7 @@ export interface AlertDialogPartState extends Record<string, unknown> {
 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

@@ -5,7 +5,7 @@ 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'];
+export const alertDialogSizeNames = ['md', 'sm'];
 export function AlertDialog(props) {
     return _jsx(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...props });
 }
@@ -22,7 +22,7 @@ export function AlertDialogOverlay({ className, ...props }) {
  * 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 }) {
+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) {
@@ -38,7 +38,7 @@ function part(slot, base) {
 }
 /**
  * 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');
@@ -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/attachment.d.ts

@@ -3,7 +3,7 @@ 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"];

package/dist/components/attachment.js

@@ -15,7 +15,7 @@ import { FilePreview, FileViewer, isPreviewableFile } from './file-viewer.js';
 import { HoverCard, HoverCardContent, HoverCardTrigger } from './hover-card.js';
 import { Spinner } from './spinner.js';
 export const attachmentStateNames = ['idle', 'uploading', 'processing', 'error', 'done'];
-export const attachmentSizeNames = ['default', 'sm', 'xs'];
+export const attachmentSizeNames = ['lg', 'md', 'sm'];
 export const attachmentOrientationNames = ['horizontal', 'vertical'];
 export const attachmentMediaVariantNames = ['icon', 'image'];
 export const attachmentGroupVariantNames = ['carousel', 'grid', 'inline', 'list'];
@@ -23,7 +23,7 @@ export const fileAttachmentVariantNames = ['list', 'grid', 'inline', 'chip'];
 export const fileAttachmentStateNames = ['ready', 'uploading', 'processing', 'error'];
 export const fileTypeIconSizeNames = ['sm', 'lg'];
 /** A file card built from media, content, and actions. */
-export function Attachment({ className, state = 'done', size = 'default', orientation = 'horizontal', ...props }) {
+export function Attachment({ className, state = 'done', size = 'lg', orientation = 'horizontal', ...props }) {
     return (_jsx("div", { "data-slot": "attachment", "data-state": state, "data-size": size, "data-orientation": orientation, className: cn('sprout-attachment', `sprout-attachment-size-${size}`, `sprout-attachment-${orientation}`, className), ...props }));
 }
 export function AttachmentMedia({ className, variant = 'icon', ...props }) {

package/dist/components/avatar.d.ts

@@ -1,7 +1,7 @@
 import type { ComponentProps } from 'react';
 import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';
-export type AvatarSize = 'xs' | 'sm' | 'default' | 'lg';
-export type EntityAvatarSize = AvatarSize | 'xl';
+export type AvatarSize = 'sm' | 'md' | 'lg';
+export type EntityAvatarSize = AvatarSize;
 export type EntityAvatarShape = 'circle' | 'square';
 export interface AvatarProps extends AvatarPrimitive.Root.Props {
     size?: AvatarSize;
@@ -14,14 +14,6 @@ export declare function AvatarFallback({ className, ...props }: AvatarFallbackPr
 export declare function AvatarBadge({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
 export declare function AvatarGroup({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
 export declare function AvatarGroupCount({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-export declare function agentAvatarSrc(agentId: string, baseUrl?: string): string;
-export interface AgentAvatarProps extends Omit<AvatarProps, 'children'> {
-    agentId: string;
-    name: string;
-    /** Overrides the artwork derived from `agentId`. */
-    src?: string | undefined;
-}
-export declare function AgentAvatar({ agentId, name, src, ...props }: AgentAvatarProps): import("react").JSX.Element;
 export interface EntityAvatarProps extends Omit<AvatarPrimitive.Root.Props, 'children'> {
     seed: string;
     name: string;

package/dist/components/avatar.js

@@ -2,7 +2,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';
 import { cn, stateClassName } from '../internal/classes.js';
-export function Avatar({ className, size = 'default', ...props }) {
+import { hash } from '../internal/hash.js';
+export function Avatar({ className, size = 'md', ...props }) {
     return (_jsx(AvatarPrimitive.Root, { "data-slot": "avatar", "data-size": size, ...props, className: stateClassName('sprout-avatar', className) }));
 }
 export function AvatarImage({ className, ...props }) {
@@ -20,47 +21,9 @@ export function AvatarGroup({ className, ...props }) {
 export function AvatarGroupCount({ className, ...props }) {
     return _jsx("div", { "data-slot": "avatar-group-count", ...props, className: cn('sprout-avatar-group-count', className) });
 }
-// FNV-1a: small, stable, and spreads similar ids apart.
-function hash(value) {
-    let h = 0x811c9dc5;
-    for (let i = 0; i < value.length; i++) {
-        h ^= value.charCodeAt(i);
-        h = Math.imul(h, 0x01000193);
-    }
-    return h >>> 0;
-}
-// Frozen order: any edit, even appending, changes existing agent avatars.
-// prettier-ignore
-const agentObjects = [
-    "tulip", "tulip-bouquet", "cactus", "sunflower", "daisy", "sprout", "bonsai", "monstera", "fern",
-    "lavender", "rose", "poppy", "daffodil", "lily", "bellflower", "eucalyptus", "ivy", "succulent",
-    "acorn", "pinecone", "watering-can", "hand-trowel", "garden-fork", "pruning-shears",
-    "gardening-gloves", "rain-boots", "wheelbarrow", "seed-packet", "flower-pot", "plant-mister",
-    "spade", "rake", "hoe", "garden-hose", "seed-tray", "garden-apron", "plant-label", "twine-spool",
-    "compost-bin", "pruning-saw", "mushroom", "strawberry", "carrot", "pumpkin", "apple", "pear",
-    "lemon", "corn-cob", "honey-jar", "harvest-basket", "windmill", "barn", "tractor", "wheat",
-    "pea-pod", "beetroot", "radish", "eggplant", "cherries", "hay-bale", "umbrella", "mug", "teapot",
-    "moka-pot", "lantern", "candle", "picnic-basket", "straw-hat", "vase", "jam-jar", "birdhouse",
-    "rocking-chair", "kettle", "bread-loaf", "croissant", "milk-bottle", "cookie", "oven-mitt",
-    "thermos", "yarn-ball", "notebook", "pencil", "paintbrush", "paint-palette", "fountain-pen",
-    "camera", "headphones", "desk-lamp", "book-stack", "alarm-clock", "scissors", "ruler", "stapler",
-    "paperclip", "binder-clip", "tape-dispenser", "magnifying-glass", "envelope", "typewriter",
-    "globe",
-];
-// prettier-ignore
-const agentColors = ["pink", "coral", "orange", "yellow", "green", "teal", "blue", "purple"];
-export function agentAvatarSrc(agentId, baseUrl = 'https://avatars.tulipfarm.ai/avatar') {
-    const h = hash(agentId);
-    const object = agentObjects[h % agentObjects.length];
-    const color = agentColors[(h >>> 16) % agentColors.length];
-    return `${baseUrl}/${object}/${color}.svg`;
-}
 function initial(name) {
     return name.trim().charAt(0).toUpperCase() || '?';
 }
-export function AgentAvatar({ agentId, name, src, ...props }) {
-    return (_jsxs(Avatar, { "data-agent-avatar": "", ...props, children: [_jsx(AvatarImage, { src: src ?? agentAvatarSrc(agentId), alt: "" }), _jsx(AvatarFallback, { children: initial(name) })] }));
-}
 // Same seed, same gradient: the fallback never changes between visits.
 function gradientFor(seed) {
     const h = hash(seed);
@@ -68,6 +31,6 @@ function gradientFor(seed) {
     const to = (from + 40 + ((h >>> 9) % 60)) % 360;
     return `linear-gradient(135deg, oklch(0.62 0.15 ${from}), oklch(0.5 0.15 ${to}))`;
 }
-export function EntityAvatar({ seed, name, image, size = 'default', shape = 'circle', className, ...props }) {
+export function EntityAvatar({ seed, name, image, size = 'md', shape = 'circle', className, ...props }) {
     return (_jsxs(AvatarPrimitive.Root, { "data-slot": "entity-avatar", "data-size": size, "data-shape": shape, ...props, className: stateClassName('sprout-entity-avatar', className), children: [image && (_jsx(AvatarPrimitive.Image, { src: image, alt: "", referrerPolicy: "no-referrer", className: "sprout-avatar-image" })), _jsx(AvatarPrimitive.Fallback, { className: "sprout-entity-avatar-fallback", style: { backgroundImage: gradientFor(seed) }, children: initial(name) })] }));
 }

package/dist/components/board.js

@@ -427,7 +427,7 @@ export function Board({ columns, items, lanes, onItemsChange, onColumnsChange, o
     return (_jsxs("div", { "data-slot": "board", className: cn('sprout-board', className), onKeyDown: onBoardKeyDown, children: [toolbar && (_jsxs("div", { className: "sprout-board-toolbar", "data-slot": "board-toolbar", children: [searchable && (_jsx(SearchField, { label: "Search cards", value: query, onChange: setQuery, className: "sprout-board-search" })), laneBy && (_jsxs("span", { className: "sprout-board-lane-by", children: [_jsx("span", { children: laneBy.label ?? 'Lanes by' }), _jsxs(Select, { value: laneBy.value, onValueChange: value => {
                                     if (typeof value === 'string')
                                         laneBy.onChange(value);
-                                }, children: [_jsx(SelectTrigger, { size: "sm", "aria-label": laneBy.label ?? 'Lanes by', children: _jsx(SelectValue, { children: laneBy.options.find(o => o.value === laneBy.value)?.label }) }), _jsx(SelectContent, { children: laneBy.options.map(option => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value))) })] })] })), _jsx("span", { className: "sprout-board-status", role: "status", children: selected.size > 0 ? (_jsxs(_Fragment, { children: [selected.size, " selected", _jsx(Button, { variant: "ghost", size: "xs", onClick: () => setSelected(new Set()), children: "Clear" })] })) : needle ? (visibleCount ? (`${visibleCount.toLocaleString('en-US')} of ${items.length.toLocaleString('en-US')} cards`) : (`No cards match “${query.trim()}”`)) : (`${items.length.toLocaleString('en-US')} cards`) })] })), _jsxs(DndContext, { id: dndId, sensors: sensors, accessibility: { ...dndAccessibility, announcements }, collisionDetection: collide, onDragStart: onDragStart, onDragOver: onDragOver, onDragEnd: onDragEnd, onDragCancel: finish, children: [_jsx("div", { className: "sprout-board-frame", children: _jsx("div", { ref: viewportRef, role: "region", "aria-label": label, className: "sprout-board-viewport", "data-lanes": withLanes || undefined, children: _jsxs("div", { className: "sprout-board-canvas", children: [_jsxs("div", { className: "sprout-board-header", style: gridStyle, children: [_jsx(SortableContext, { items: columns.map(c => COLUMN + c.id), strategy: horizontalListSortingStrategy, children: columns.map(column => (_jsx(BoardColumnHeader, { column: column, loaded: loadedIn(column), collapsed: collapsedColumns.has(column.id), onCollapse: () => setCollapsedColumns(s => toggle(s, column.id)), onRename: onColumnsChange ? renameColumn : undefined, onDelete: onColumnsChange ? deleteColumn : undefined }, column.id))) }), onColumnAdd && _jsx(AddColumn, { onAdd: onColumnAdd }), laneNotices &&
+                                }, children: [_jsx(SelectTrigger, { size: "sm", "aria-label": laneBy.label ?? 'Lanes by', children: _jsx(SelectValue, { children: laneBy.options.find(o => o.value === laneBy.value)?.label }) }), _jsx(SelectContent, { children: laneBy.options.map(option => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value))) })] })] })), _jsx("span", { className: "sprout-board-status", role: "status", children: selected.size > 0 ? (_jsxs(_Fragment, { children: [selected.size, " selected", _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setSelected(new Set()), children: "Clear" })] })) : needle ? (visibleCount ? (`${visibleCount.toLocaleString('en-US')} of ${items.length.toLocaleString('en-US')} cards`) : (`No cards match “${query.trim()}”`)) : (`${items.length.toLocaleString('en-US')} cards`) })] })), _jsxs(DndContext, { id: dndId, sensors: sensors, accessibility: { ...dndAccessibility, announcements }, collisionDetection: collide, onDragStart: onDragStart, onDragOver: onDragOver, onDragEnd: onDragEnd, onDragCancel: finish, children: [_jsx("div", { className: "sprout-board-frame", children: _jsx("div", { ref: viewportRef, role: "region", "aria-label": label, className: "sprout-board-viewport", "data-lanes": withLanes || undefined, children: _jsxs("div", { className: "sprout-board-canvas", children: [_jsxs("div", { className: "sprout-board-header", style: gridStyle, children: [_jsx(SortableContext, { items: columns.map(c => COLUMN + c.id), strategy: horizontalListSortingStrategy, children: columns.map(column => (_jsx(BoardColumnHeader, { column: column, loaded: loadedIn(column), collapsed: collapsedColumns.has(column.id), onCollapse: () => setCollapsedColumns(s => toggle(s, column.id)), onRename: onColumnsChange ? renameColumn : undefined, onDelete: onColumnsChange ? deleteColumn : undefined }, column.id))) }), onColumnAdd && _jsx(AddColumn, { onAdd: onColumnAdd }), laneNotices &&
                                                 columns.map(column => (_jsx("div", { className: "sprout-board-column-notice", children: !collapsedColumns.has(column.id) && _jsx(ColumnNotice, { column: column, onRetry: onColumnRetry }) }, `notice:${column.id}`)))] }), withLanes ? (_jsx("div", { ref: bodyRef, className: "sprout-board-lanes", style: { height: laneVirtualizer.getTotalSize() }, children: laneRows.map(row => {
                                             const lane = laneList[row.index];
                                             if (!lane)
@@ -497,7 +497,7 @@ const BoardCell = memo(function BoardCell({ laneId, column, name, items, collaps
                         title,
                         columnId: cell.columnId,
                         laneId: fill ? undefined : cell.laneId,
-                    }), onClose: () => setAdding(false) })) : (_jsxs(Button, { variant: "ghost", size: "xs", className: "sprout-board-add", onClick: () => setAdding(true), "aria-label": `Add card to ${name}`, children: [_jsx(Plus, { "aria-hidden": "true", "data-icon": "inline-start" }), "Add card"] })))] }));
+                    }), onClose: () => setAdding(false) })) : (_jsxs(Button, { variant: "ghost", size: "sm", className: "sprout-board-add", onClick: () => setAdding(true), "aria-label": `Add card to ${name}`, children: [_jsx(Plus, { "aria-hidden": "true", "data-icon": "inline-start" }), "Add card"] })))] }));
 });
 const BoardCard = memo(function BoardCard({ item, movable, selected, onSelect, onRename, onOpen, look, }) {
     const [editing, setEditing] = useState(false);
@@ -590,13 +590,13 @@ function ColumnTitle({ column }) {
 /** The error or unavailable message of a column. Nothing for other states. */
 function ColumnNotice({ column, onRetry, }) {
     if (column.status === 'error')
-        return (_jsxs("div", { className: "sprout-board-notice", "data-kind": "error", children: [_jsx("p", { role: "alert", children: column.error ?? 'Couldn’t load this column.' }), onRetry && (_jsx(Button, { variant: "outline", size: "xs", "aria-label": `Try again to load ${column.title}`, onClick: () => onRetry(column), children: "Try again" }))] }));
+        return (_jsxs("div", { className: "sprout-board-notice", "data-kind": "error", children: [_jsx("p", { role: "alert", children: column.error ?? 'Couldn’t load this column.' }), onRetry && (_jsx(Button, { variant: "outline", size: "sm", "aria-label": `Try again to load ${column.title}`, onClick: () => onRetry(column), children: "Try again" }))] }));
     if (column.status === 'unavailable')
         return (_jsx("p", { className: "sprout-board-notice", "data-kind": "unavailable", children: column.error ?? 'Cards are unavailable.' }));
     return null;
 }
 function ShowAll({ column, count, onShowAll, text, }) {
-    return (_jsx(Button, { variant: "ghost", size: "xs", className: "sprout-board-show-all", "aria-label": text ? undefined : `Show all ${formatCount(count)} in ${column.title}`, onClick: () => onShowAll(column), children: text ? (_jsxs(_Fragment, { children: [text(count, column), _jsxs("span", { className: "sprout-board-sr-only", children: [", ", column.title] })] })) : (`Show all ${formatCount(count)}`) }));
+    return (_jsx(Button, { variant: "ghost", size: "sm", className: "sprout-board-show-all", "aria-label": text ? undefined : `Show all ${formatCount(count)} in ${column.title}`, onClick: () => onShowAll(column), children: text ? (_jsxs(_Fragment, { children: [text(count, column), _jsxs("span", { className: "sprout-board-sr-only", children: [", ", column.title] })] })) : (`Show all ${formatCount(count)}`) }));
 }
 function AddColumn({ onAdd }) {
     const [adding, setAdding] = useState(false);

package/dist/components/button.d.ts

@@ -1,7 +1,7 @@
 import type { Button as BaseButton } from '@base-ui/react/button';
 import { type ReactElement } from 'react';
-export declare const buttonVariantNames: readonly ["default", "outline", "secondary", "ghost", "destructive", "link", "scope"];
-export declare const buttonSizeNames: readonly ["default", "xs", "sm", "lg", "icon", "icon-xs", "icon-sm", "icon-lg", "back", "onboarding", "bud", "bud-labeled", "chat-row", "task-link", "card-title", "result-card", "calendar-title", "calendar", "calendar-icon", "nav", "column-header", "column-header-end", "table-link", "badge"];
+export declare const buttonVariantNames: readonly ["default", "outline", "secondary", "ghost", "destructive", "ghost-destructive", "link", "scope"];
+export declare const buttonSizeNames: readonly ["md", "sm", "lg", "icon", "icon-xs", "icon-sm", "icon-lg"];
 export type ButtonVariant = (typeof buttonVariantNames)[number];
 export type ButtonSize = (typeof buttonSizeNames)[number];
 export interface ButtonVariantOptions {

package/dist/components/button.js

@@ -4,41 +4,25 @@ import { useId } from 'react';
 import { cn, stateClassName } from '../internal/classes.js';
 import { Pressable } from '../internal/pressable.js';
 import { Spinner } from './spinner.js';
-export const buttonVariantNames = ['default', 'outline', 'secondary', 'ghost', 'destructive', 'link', 'scope'];
-export const buttonSizeNames = [
+export const buttonVariantNames = [
     'default',
-    'xs',
-    'sm',
-    'lg',
-    'icon',
-    'icon-xs',
-    'icon-sm',
-    'icon-lg',
-    'back',
-    'onboarding',
-    'bud',
-    'bud-labeled',
-    'chat-row',
-    'task-link',
-    'card-title',
-    'result-card',
-    'calendar-title',
-    'calendar',
-    'calendar-icon',
-    'nav',
-    'column-header',
-    'column-header-end',
-    'table-link',
-    'badge',
+    'outline',
+    'secondary',
+    'ghost',
+    'destructive',
+    'ghost-destructive',
+    'link',
+    'scope',
 ];
+export const buttonSizeNames = ['md', 'sm', 'lg', 'icon', 'icon-xs', 'icon-sm', 'icon-lg'];
 export function buttonVariants({ variant, size, className } = {}) {
-    return cn('sprout-button', `sprout-button-variant-${variant ?? 'default'}`, `sprout-button-size-${size ?? 'default'}`, className);
+    return cn('sprout-button', `sprout-button-variant-${variant ?? 'default'}`, `sprout-button-size-${size ?? 'md'}`, className);
 }
 export function Button({ state, pendingLabel, ...props }) {
     return state ? _jsx(StatefulButton, { state: state, pendingLabel: pendingLabel, ...props }) : _jsx(ButtonElement, { ...props });
 }
 function ButtonElement({ variant, size, className, ...props }) {
-    return (_jsx(Pressable, { "data-slot": "button", "data-variant": variant ?? 'default', "data-size": size ?? 'default', ...props, className: stateClassName(buttonVariants({ variant, size }), className) }));
+    return (_jsx(Pressable, { "data-slot": "button", "data-variant": variant ?? 'default', "data-size": size ?? 'md', ...props, className: stateClassName(buttonVariants({ variant, size }), className) }));
 }
 function StatefulButton({ state, pendingLabel, className, children, ...props }) {
     const action = useActionControl(state);
@@ -78,6 +62,6 @@ export function useActionControl(state) {
 }
 function FixButton({ fix }) {
     if (fix.kind === 'link')
-        return (_jsx(Button, { variant: "link", size: "xs", nativeButton: false, render: fix.link, children: fix.label }));
-    return (_jsx(Button, { variant: "link", size: "xs", onClick: fix.kind === 'jump' ? () => jumpTo(fix.target) : fix.onClick, children: fix.label }));
+        return (_jsx(Button, { variant: "link", size: "sm", nativeButton: false, render: fix.link, children: fix.label }));
+    return (_jsx(Button, { variant: "link", size: "sm", onClick: fix.kind === 'jump' ? () => jumpTo(fix.target) : fix.onClick, children: fix.label }));
 }

package/dist/components/card.d.ts

@@ -1,5 +1,5 @@
 import { useRender } from '@base-ui/react/use-render';
-export declare const cardSizeNames: readonly ["default", "sm"];
+export declare const cardSizeNames: readonly ["md", "sm"];
 export declare const cardSurfaceNames: readonly ["default", "raised"];
 export type CardSize = (typeof cardSizeNames)[number];
 export type CardSurface = (typeof cardSurfaceNames)[number];

package/dist/components/card.js

@@ -1,7 +1,7 @@
 import { mergeProps } from '@base-ui/react/merge-props';
 import { useRender } from '@base-ui/react/use-render';
 import { cn } from '../internal/classes.js';
-export const cardSizeNames = ['default', 'sm'];
+export const cardSizeNames = ['md', 'sm'];
 export const cardSurfaceNames = ['default', 'raised'];
 export function cardVariants({ size, surface, className } = {}) {
     return cn('sprout-card', size === 'sm' && 'sprout-card-sm', surface === 'raised' && 'sprout-card-raised', className);
@@ -10,7 +10,7 @@ export function cardVariants({ size, surface, className } = {}) {
  * A bordered panel that groups related content. Compose it with
  * `CardHeader`, `CardContent`, and `CardFooter`.
  */
-export function Card({ className, size = 'default', surface = 'default', render, ref, ...props }) {
+export function Card({ className, size = 'md', surface = 'default', render, ref, ...props }) {
     return useRender({
         defaultTagName: 'div',
         ref,