@tulipfarm/sprout 0.3.1 → 0.5.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.4 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,99 +106,105 @@ Full library: **786.4 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.8 kB |
+| `alert-dialog`      | 168.8 kB |  56.9 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 |
-| `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 |
-| `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 |
-| `chart`             | 393.4 kB | 119.0 kB | 101.3 kB |
-| `chat-confirmation` |  76.7 kB |  25.8 kB |  22.4 kB |
+| `carousel`          |  60.2 kB |  19.8 kB |  17.5 kB |
+| `chart`             | 540.1 kB | 155.5 kB | 129.9 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.3 kB |
-| `chat-input`        | 962.4 kB | 317.0 kB | 261.5 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.4 kB |  25.9 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.9 kB |  77.7 kB |
-| `command`           | 181.9 kB |  61.6 kB |  53.5 kB |
-| `context-menu`      | 242.8 kB |  81.0 kB |  69.7 kB |
-| `dialog`            | 170.7 kB |  57.5 kB |  50.2 kB |
+| `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.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.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.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.3 kB |
-| `input-group`       | 119.1 kB |  40.5 kB |  34.8 kB |
-| `input-otp`         |  65.3 kB |  22.9 kB |  20.3 kB |
+| `input`             | 108.2 kB |  37.4 kB |  32.4 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.7 kB |  74.2 kB |  64.2 kB |
-| `message-scroller`  |  69.0 kB |  22.1 kB |  19.6 kB |
-| `navigation-menu`   | 182.3 kB |  63.0 kB |  54.7 kB |
+| `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 |
-| `plan-outline`      |  79.9 kB |  26.4 kB |  22.9 kB |
-| `popover`           | 178.0 kB |  60.7 kB |  52.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 |
-| `radio-group`       |  80.8 kB |  27.9 kB |  24.7 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.6 kB |  22.2 kB |  18.9 kB |
 | `resizable`         |  39.4 kB |  13.4 kB |  11.8 kB |
-| `result-card`       | 240.3 kB |  85.1 kB |  72.1 kB |
-| `review-card`       |  61.6 kB |  21.0 kB |  18.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.4 kB |
 | `rich-text-editor`  | 442.5 kB | 140.2 kB | 119.8 kB |
-| `schema-diagram`    | 247.9 kB |  82.9 kB |  71.2 kB |
-| `sql-viewer`        | 265.6 kB |  89.1 kB |  76.3 kB |
+| `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 |
-| `sidebar`           | 251.1 kB |  85.8 kB |  72.8 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`       | 459.7 kB | 155.6 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`             | 536.6 kB | 171.9 kB | 144.4 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.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.4 kB |
+| `textarea`          |  98.2 kB |  34.2 kB |  29.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.6 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.0 kB |  90.6 kB |  77.0 kB |
 
 </details>
 <!-- bundle-size:end -->
@@ -210,9 +216,9 @@ 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                                                                                                                     |
+| **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
@@ -229,7 +235,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
@@ -248,11 +254,12 @@ 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
 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-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/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;