@tulipfarm/sprout 0.0.0-stage → 0.2.0

package/dist/components/attachment.js

@@ -0,0 +1,285 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Children, createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, } from "react";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { ChevronLeft } from "reicon-react/icons/ChevronLeft";
+import { ChevronRight } from "reicon-react/icons/ChevronRight";
+import { Image } from "reicon-react/icons/Image";
+import { Upload } from "reicon-react/icons/Upload";
+import { X } from "reicon-react/icons/X";
+import { cn } from "../internal/classes.js";
+import { defaultFileAccept, fileKind, formatFileSize, } from "../internal/file-kind.js";
+import { Button } from "./button.js";
+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 attachmentOrientationNames = ["horizontal", "vertical"];
+export const attachmentMediaVariantNames = ["icon", "image"];
+export const attachmentGroupVariantNames = [
+    "carousel",
+    "grid",
+    "inline",
+    "list",
+];
+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 }) {
+    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 }) {
+    return (_jsx("div", { "data-slot": "attachment-media", "data-variant": variant, className: cn("sprout-attachment-media", className), ...props }));
+}
+export function AttachmentContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "attachment-content", className: cn("sprout-attachment-content", className), ...props }));
+}
+/** A single-line name. It shimmers while the attachment uploads or processes. */
+export function AttachmentTitle({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "attachment-title", className: cn("sprout-attachment-title", className), ...props }));
+}
+export function AttachmentDescription({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "attachment-description", className: cn("sprout-attachment-description", className), ...props }));
+}
+/** Sits above the trigger. Vertical attachments float it over the media corner. */
+export function AttachmentActions({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "attachment-actions", className: cn("sprout-attachment-actions", className), ...props }));
+}
+/** A ghost `icon-xs` Button. Give icon-only actions an `aria-label`. */
+export function AttachmentAction({ variant, size = "icon-xs", ...props }) {
+    return (_jsx(Button, { "data-slot": "attachment-action", variant: variant ?? "ghost", size: size, ...props }));
+}
+/** Stretches over the whole attachment so a click anywhere opens it. Name it with `aria-label`. */
+export function AttachmentTrigger({ className, render, type, ...props }) {
+    return useRender({
+        defaultTagName: "button",
+        render,
+        props: mergeProps({
+            type: render ? type : (type ?? "button"),
+            className: cn("sprout-attachment-trigger", className),
+        }, { "data-slot": "attachment-trigger" }, props),
+    });
+}
+const SharedViewerContext = createContext(null);
+const byDocumentOrder = (a, b) => a.node &&
+    b.node &&
+    a.node.compareDocumentPosition(b.node) & Node.DOCUMENT_POSITION_PRECEDING
+    ? 1
+    : -1;
+/** One FileViewer for every viewable attachment in a group, stepping through them in page order. */
+function SharedFileViewer({ children }) {
+    const entries = useRef(new Map());
+    const [set, setSet] = useState(null);
+    const [open, setOpen] = useState(false);
+    const shared = useMemo(() => ({
+        register(id, entry) {
+            entries.current.set(id, entry);
+            return () => entries.current.delete(id);
+        },
+        open(id) {
+            const ordered = [...entries.current]
+                .map(([key, entry]) => ({
+                id: key,
+                file: entry.file(),
+                node: entry.node(),
+            }))
+                .filter((item) => item.file !== null)
+                .sort(byDocumentOrder);
+            const index = ordered.findIndex((item) => item.id === id);
+            if (index < 0)
+                return;
+            setSet({
+                ids: ordered.map((item) => item.id),
+                files: ordered.map((item) => item.file),
+                index,
+            });
+            setOpen(true);
+        },
+    }), []);
+    const current = set && entries.current.get(set.ids[set.index] ?? "");
+    return (_jsxs(SharedViewerContext.Provider, { value: shared, children: [children, set && (_jsx(FileViewer, { files: set.files, index: set.index, onIndexChange: (index) => setSet({ ...set, index }), open: open, onOpenChange: setOpen, finalFocus: () => current
+                    ?.node()
+                    ?.querySelector("button.sprout-file-attachment-open") ?? true }))] }));
+}
+export function AttachmentGroup(props) {
+    return (_jsx(SharedFileViewer, { children: _jsx(AttachmentGroupFrame, { ...props }) }));
+}
+function AttachmentGroupFrame({ className, variant = "carousel", children, ...props }) {
+    if (variant === "carousel")
+        return (_jsx(AttachmentCarousel, { className: className, ...props, children: children }));
+    return (_jsx("div", { "data-slot": "attachment-group", "data-variant": variant, role: props["aria-label"] || props["aria-labelledby"] ? "group" : undefined, className: cn("sprout-attachment-group", `sprout-attachment-group-${variant}`, className), ...props, children: children }));
+}
+const typing = 'input, textarea, select, [contenteditable="true"]';
+function AttachmentCarousel({ className, children, onKeyDownCapture, ...props }) {
+    const viewport = useRef(null);
+    const [edges, setEdges] = useState({ start: false, end: false });
+    const measure = useCallback(() => {
+        const node = viewport.current;
+        if (!node)
+            return;
+        const max = node.scrollWidth - node.clientWidth;
+        const start = node.scrollLeft > 1;
+        const end = node.scrollLeft < max - 1;
+        setEdges((current) => current.start === start && current.end === end ? current : { start, end });
+    }, []);
+    useEffect(() => {
+        const node = viewport.current;
+        if (!node)
+            return;
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(node);
+        if (node.firstElementChild)
+            observer.observe(node.firstElementChild);
+        return () => observer.disconnect();
+    }, [measure]);
+    const scroll = (direction) => {
+        const node = viewport.current;
+        if (node)
+            node.scrollBy({ left: direction * node.clientWidth * 0.8 });
+    };
+    const handleKeyDown = (event) => {
+        onKeyDownCapture?.(event);
+        if (event.defaultPrevented)
+            return;
+        if (event.target.closest(typing))
+            return;
+        if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+            event.preventDefault();
+            scroll(event.key === "ArrowLeft" ? -1 : 1);
+        }
+    };
+    return (_jsxs("div", { "data-slot": "attachment-group", "data-variant": "carousel", role: "region", "aria-roledescription": "carousel", className: cn("sprout-attachment-group", "sprout-attachment-group-carousel", className), onKeyDownCapture: handleKeyDown, ...props, children: [_jsx("div", { ref: viewport, className: "sprout-attachment-carousel-viewport", onScroll: measure, children: _jsx("div", { className: "sprout-attachment-carousel-track", children: Children.map(children, (child) => child == null || child === false ? null : (_jsx("div", { role: "group", "aria-roledescription": "slide", className: "sprout-attachment-carousel-item", children: child }))) }) }), edges.start && (_jsx("span", { className: "sprout-attachment-carousel-edge", "data-side": "start", children: _jsx(Button, { variant: "outline", size: "icon-xs", "aria-label": "Previous attachments", tabIndex: -1, className: "sprout-attachment-carousel-arrow", onClick: () => scroll(-1), children: _jsx(ChevronLeft, { "aria-hidden": "true" }) }) })), edges.end && (_jsx("span", { className: "sprout-attachment-carousel-edge", "data-side": "end", children: _jsx(Button, { variant: "outline", size: "icon-xs", "aria-label": "Next attachments", tabIndex: -1, className: "sprout-attachment-carousel-arrow", onClick: () => scroll(1), children: _jsx(ChevronRight, { "aria-hidden": "true" }) }) }))] }));
+}
+/** A paper glyph with a colored extension badge, such as PDF or XLSX. Decorative. */
+export function FileTypeIcon({ name, mediaType, size = "sm", className, ...props }) {
+    const label = name.includes(".")
+        ? (name.split(".").at(-1) ?? "").toUpperCase().slice(0, 4)
+        : "";
+    const badgeWidth = label.length > 3 ? 13 : 11;
+    return (_jsxs("svg", { viewBox: "0 0 20 24", "aria-hidden": "true", focusable: "false", "data-slot": "file-type-icon", "data-size": size, "data-kind": fileKind(name, mediaType), className: cn("sprout-file-type-icon", `sprout-file-type-icon-size-${size}`, className), ...props, children: [_jsx("path", { d: "M3.5 1.5h9l4.5 4.5v16a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-20a.5.5 0 0 1 .5-.5Z", className: "sprout-file-type-icon-paper", strokeLinejoin: "round" }), _jsx("path", { d: "M12.5 1.5v4a.5.5 0 0 0 .5.5h4", className: "sprout-file-type-icon-fold", strokeLinejoin: "round" }), _jsx("path", { d: "M6 15h8M6 17.5h8M6 20h5", className: "sprout-file-type-icon-lines", strokeLinecap: "round" }), label && (_jsxs(_Fragment, { children: [_jsx("rect", { x: "1", y: "6", width: badgeWidth, height: "6", rx: "1.5", className: "sprout-file-type-icon-badge" }), _jsx("text", { x: 1 + badgeWidth / 2, y: "10.4", textAnchor: "middle", fontSize: "4.2", fontWeight: "700", className: "sprout-file-type-icon-label", children: label })] }))] }));
+}
+function AttachmentImage({ src, name }) {
+    const [failed, setFailed] = useState(false);
+    return failed ? (_jsxs("span", { className: "sprout-attachment-image-failed", children: [_jsx(Image, { size: 16, "aria-hidden": "true" }), "Image unavailable"] })) : (_jsx("img", { src: src, alt: name, onError: () => setFailed(true), className: "sprout-attachment-image" }));
+}
+function viewableFile(file) {
+    const source = file.source ??
+        (file.url ? { kind: "remote", url: file.url } : null);
+    return source && { name: file.name, mediaType: file.mediaType, source };
+}
+function stateLabelFor(file) {
+    return file.state === "ready"
+        ? file.size
+        : file.state === "error"
+            ? "Upload failed"
+            : file.state === "uploading"
+                ? "Uploading…"
+                : "Processing…";
+}
+/** A ready-made file row, card, inline mention, or chip with upload states, retry, and remove. */
+export function FileAttachment({ file, variant = "list", onRemove, onRetry, onOpen, viewable = false, preview = false, actionLabel = "Inspect", className, }) {
+    const [open, setOpen] = useState(false);
+    const shared = useContext(SharedViewerContext);
+    const id = useId();
+    const root = useRef(null);
+    const image = fileKind(file.name, file.mediaType) === "image";
+    const busy = file.state === "uploading" || file.state === "processing";
+    const stateLabel = stateLabelFor(file);
+    const target = viewable || preview ? viewableFile(file) : null;
+    const inViewer = !onOpen && viewable && target !== null;
+    const openable = !!onOpen || inViewer;
+    const peek = preview &&
+        target !== null &&
+        file.state !== "error" &&
+        isPreviewableFile(target);
+    const latest = useRef(target);
+    latest.current = inViewer ? target : null;
+    useEffect(() => shared && inViewer
+        ? shared.register(id, {
+            file: () => latest.current,
+            node: () => root.current,
+        })
+        : undefined, [shared, inViewer, id]);
+    const withPreview = (trigger) => peek ? (_jsxs(HoverCard, { children: [_jsx(HoverCardTrigger, { delay: 400, closeDelay: 150, render: trigger }), _jsx(HoverCardContent, { side: "top", align: "start", className: "sprout-file-attachment-peek", children: _jsx(FilePreview, { file: target }) })] })) : (trigger);
+    const openLabel = `${actionLabel} ${file.name}`;
+    const openProps = {
+        type: "button",
+        disabled: !!onOpen && busy,
+        onClick: () => onOpen ? onOpen() : shared ? shared.open(id) : setOpen(true),
+    };
+    const retry = file.state === "error" && onRetry && (_jsx(Button, { variant: "ghost", size: "sm", onClick: onRetry, "aria-label": `Retry ${file.name}`, children: "Retry" }));
+    const remove = (size) => onRemove && (_jsx(Button, { variant: "ghost", size: size, "aria-label": `Remove ${file.name}`, onClick: onRemove, children: _jsx(X, { size: 14, "aria-hidden": "true" }) }));
+    const viewer = inViewer && !shared && (_jsx(FileViewer, { file: target, open: open, onOpenChange: setOpen }));
+    if (variant === "chip") {
+        const inner = (_jsxs(_Fragment, { children: [image && file.url ? (_jsx("span", { className: "sprout-file-attachment-thumb", children: _jsx(AttachmentImage, { src: file.url, name: file.name }, file.url) })) : (_jsx(FileTypeIcon, { name: file.name, mediaType: file.mediaType })), _jsx("span", { className: "sprout-file-attachment-name", children: file.name })] }));
+        return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: root, "data-slot": "file-attachment", "data-variant": "chip", "data-state": file.state, "data-removable": onRemove ? "" : undefined, className: cn("sprout-file-attachment", className), title: openable ? undefined : `${file.name} · ${stateLabel}`, children: [withPreview(openable ? (_jsx("button", { ...openProps, "aria-label": openLabel, title: peek ? undefined : `${file.name} · ${stateLabel}`, className: "sprout-file-attachment-open", children: inner })) : (_jsx("span", { className: "sprout-file-attachment-open", children: inner }))), busy && _jsx(Spinner, { "aria-label": stateLabel }), retry, remove("icon-xs")] }), viewer] }));
+    }
+    const name = (_jsxs(_Fragment, { children: [_jsx("span", { className: "sprout-file-attachment-name", title: file.name, children: file.name }), variant !== "inline" && (_jsxs("span", { className: "sprout-file-attachment-status", children: [busy && _jsx(Spinner, { size: "sm", "aria-hidden": "true" }), stateLabel] }))] }));
+    const thumbnail = image && file.url ? (_jsx(AttachmentImage, { src: file.url, name: file.name }, file.url)) : (_jsx(FileTypeIcon, { name: file.name, mediaType: file.mediaType, size: "lg" }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: root, "data-slot": "file-attachment", "data-variant": variant, "data-state": file.state, className: cn("sprout-file-attachment", className), children: [variant === "grid" &&
+                        (openable ? (_jsx("button", { ...openProps, tabIndex: -1, "aria-hidden": "true", className: "sprout-file-attachment-preview", children: thumbnail })) : (_jsx("span", { className: "sprout-file-attachment-preview", children: thumbnail }))), variant !== "grid" && (_jsx("span", { className: "sprout-file-attachment-media", children: image && file.url && variant === "list" ? (_jsx(AttachmentImage, { src: file.url, name: file.name }, file.url)) : (_jsx(FileTypeIcon, { name: file.name, mediaType: file.mediaType })) })), withPreview(openable ? (_jsx("button", { ...openProps, "aria-label": openLabel, className: "sprout-file-attachment-open", children: name })) : (_jsx("span", { className: "sprout-file-attachment-open", children: name }))), variant === "inline" && busy && _jsx(Spinner, { "aria-label": stateLabel }), variant === "inline" && file.state === "error" && (_jsx("span", { className: "sprout-file-attachment-failed", children: "Failed" })), (retry || onRemove) && (_jsxs("div", { className: "sprout-file-attachment-actions", children: [retry, remove("icon-sm")] }))] }), viewer] }));
+}
+/** A dashed drop target with a “Choose files” button. Files are handed to `onFiles`; nothing is uploaded. */
+export function AttachmentDropzone({ onFiles, disabled = false, accept = defaultFileAccept, className, }) {
+    const [dragging, setDragging] = useState(false);
+    const input = useRef(null);
+    const over = (event) => {
+        event.preventDefault();
+        event.dataTransfer.dropEffect = disabled ? "none" : "copy";
+        if (!disabled)
+            setDragging(true);
+    };
+    return (_jsxs("div", { "data-slot": "attachment-dropzone", "data-dragging": dragging ? "" : undefined, "data-disabled": disabled ? "" : undefined, className: cn("sprout-attachment-dropzone", className), onDragEnter: over, onDragOver: over, onDragLeave: (event) => {
+            if (!event.currentTarget.contains(event.relatedTarget))
+                setDragging(false);
+        }, onDrop: (event) => {
+            event.preventDefault();
+            setDragging(false);
+            if (!disabled)
+                onFiles(Array.from(event.dataTransfer.files));
+        }, children: [_jsx("input", { ref: input, type: "file", accept: accept, multiple: true, hidden: true, disabled: disabled, onChange: (event) => {
+                    onFiles(Array.from(event.target.files ?? []));
+                    event.target.value = "";
+                } }), _jsx(Upload, { size: 20, "aria-hidden": "true", className: "sprout-attachment-dropzone-icon" }), _jsx("p", { className: "sprout-attachment-dropzone-text", children: "Drop files here, or choose them from your device." }), _jsx(Button, { variant: "outline", disabled: disabled, onClick: () => input.current?.click(), children: "Choose files" })] }));
+}
+/** A chip for a `File` still in browser memory, with a live image preview. */
+export function LocalFileAttachment({ file, onRemove, onOpen, viewable, preview, }) {
+    const [url, setUrl] = useState();
+    const source = useMemo(() => ({ kind: "local", file }), [file]);
+    useEffect(() => {
+        if (fileKind(file.name, file.type) !== "image")
+            return;
+        const next = URL.createObjectURL(file);
+        setUrl(next);
+        return () => URL.revokeObjectURL(next);
+    }, [file]);
+    return (_jsx(FileAttachment, { variant: "chip", file: {
+            id: `${file.name}-${file.lastModified}`,
+            name: file.name,
+            mediaType: file.type,
+            size: formatFileSize(file.size),
+            state: "ready",
+            source,
+            url,
+        }, onRemove: onRemove, onOpen: onOpen, viewable: viewable, preview: preview }));
+}

package/dist/components/avatar.d.ts

@@ -0,0 +1,32 @@
+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 EntityAvatarShape = "circle" | "square";
+export interface AvatarProps extends AvatarPrimitive.Root.Props {
+    size?: AvatarSize;
+}
+export declare function Avatar({ className, size, ...props }: AvatarProps): import("react").JSX.Element;
+export type AvatarImageProps = AvatarPrimitive.Image.Props;
+export declare function AvatarImage({ className, ...props }: AvatarImageProps): import("react").JSX.Element;
+export type AvatarFallbackProps = AvatarPrimitive.Fallback.Props;
+export declare function AvatarFallback({ className, ...props }: AvatarFallbackProps): import("react").JSX.Element;
+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;
+    image?: string | null | undefined;
+    size?: EntityAvatarSize;
+    shape?: EntityAvatarShape;
+}
+export declare function EntityAvatar({ seed, name, image, size, shape, className, ...props }: EntityAvatarProps): import("react").JSX.Element;

package/dist/components/avatar.js

@@ -0,0 +1,73 @@
+"use client";
+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 }) {
+    return (_jsx(AvatarPrimitive.Root, { "data-slot": "avatar", "data-size": size, ...props, className: stateClassName("sprout-avatar", className) }));
+}
+export function AvatarImage({ className, ...props }) {
+    return (_jsx(AvatarPrimitive.Image, { "data-slot": "avatar-image", ...props, className: stateClassName("sprout-avatar-image", className) }));
+}
+export function AvatarFallback({ className, ...props }) {
+    return (_jsx(AvatarPrimitive.Fallback, { "data-slot": "avatar-fallback", ...props, className: stateClassName("sprout-avatar-fallback", className) }));
+}
+export function AvatarBadge({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "avatar-badge", ...props, className: cn("sprout-avatar-badge", className) }));
+}
+export function AvatarGroup({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "avatar-group", ...props, className: cn("sprout-avatar-group", className) }));
+}
+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);
+    const from = h % 360;
+    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 }) {
+    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/badge.d.ts

@@ -0,0 +1,21 @@
+import { useRender } from "@base-ui/react/use-render";
+export declare const badgeVariantNames: readonly ["default", "success", "warning", "info", "secondary", "destructive", "outline", "ghost", "link"];
+export declare const badgeSizeNames: readonly ["default", "chip"];
+export type BadgeVariant = (typeof badgeVariantNames)[number];
+export type BadgeSize = (typeof badgeSizeNames)[number];
+export interface BadgeVariantOptions {
+    variant?: BadgeVariant | null;
+    size?: BadgeSize | null;
+    className?: string;
+}
+export declare function badgeVariants({ variant, size, className, }?: BadgeVariantOptions): string;
+export interface BadgeState extends Record<string, unknown> {
+    slot: "badge";
+    variant: BadgeVariant;
+    size: BadgeSize;
+}
+export interface BadgeProps extends useRender.ComponentProps<"span", BadgeState> {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+}
+export declare function Badge({ className, variant, size, render, ref, ...props }: BadgeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/components/badge.js

@@ -0,0 +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 badgeVariantNames = [
+    "default",
+    "success",
+    "warning",
+    "info",
+    "secondary",
+    "destructive",
+    "outline",
+    "ghost",
+    "link",
+];
+export const badgeSizeNames = ["default", "chip"];
+export function badgeVariants({ variant, size, className, } = {}) {
+    return cn("sprout-badge", `sprout-badge-${variant ?? "default"}`, size === "chip" && "sprout-badge-chip", className);
+}
+export function Badge({ className, variant = "default", size = "default", render, ref, ...props }) {
+    return useRender({
+        defaultTagName: "span",
+        ref,
+        render,
+        props: mergeProps({ className: badgeVariants({ variant, size, className }) }, props),
+        state: { slot: "badge", variant, size },
+    });
+}

package/dist/components/brand-icon.d.ts

@@ -0,0 +1,28 @@
+import type { ComponentProps } from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { brandGlyphs } from "../internal/brand-glyphs.js";
+export type Brand = keyof typeof brandGlyphs;
+export declare const brandNames: Record<Brand, string>;
+export declare const brandTileSizeNames: readonly ["sm", "md", "lg", "xl", "action"];
+export declare const brandIconSizeNames: readonly ["inline", "glyph", "fill", "sm", "md", "lg", "xl"];
+export type BrandTileSize = (typeof brandTileSizeNames)[number];
+export type BrandIconSize = (typeof brandIconSizeNames)[number];
+export type BrandTileProps = useRender.ComponentProps<"span"> & {
+    size?: BrandTileSize;
+};
+export declare function BrandTile({ size, render, ref, className, ...props }: BrandTileProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export interface BrandIconProps extends Omit<ComponentProps<"span">, "children"> {
+    brand: Brand;
+    size?: BrandIconSize;
+}
+export declare function BrandIcon({ brand, size, className, ...props }: BrandIconProps): import("react").JSX.Element;
+export interface BrandStackItem {
+    brand: Brand;
+    name: string;
+}
+export interface BrandStackProps extends Omit<ComponentProps<"span">, "children" | "role"> {
+    brands: readonly BrandStackItem[];
+    /** Accessible name for the whole stack. Defaults to the brand names. */
+    label?: string;
+}
+export declare function BrandStack({ brands, label, className, ...props }: BrandStackProps): import("react").JSX.Element | null;

package/dist/components/brand-icon.js

@@ -0,0 +1,82 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { brandGlyphs } from "../internal/brand-glyphs.js";
+import { cn } from "../internal/classes.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "./tooltip.js";
+export const brandNames = {
+    claude: "Claude",
+    openai: "OpenAI",
+    deepseek: "DeepSeek",
+    grok: "Grok",
+    kimi: "Kimi",
+    gemini: "Gemini",
+    mistral: "Mistral",
+    meta: "Meta",
+    qwen: "Qwen",
+    google: "Google Workspace",
+    gmail: "Gmail",
+    "google-calendar": "Google Calendar",
+    "google-drive": "Google Drive",
+    "google-sheets": "Google Sheets",
+    "google-docs": "Google Docs",
+    "google-slides": "Google Slides",
+    "google-forms": "Google Forms",
+    slack: "Slack",
+    github: "GitHub",
+    jira: "Jira",
+    confluence: "Confluence",
+    trello: "Trello",
+    notion: "Notion",
+    hubspot: "HubSpot",
+    figma: "Figma",
+    microsoft: "Microsoft",
+    linear: "Linear",
+    stripe: "Stripe",
+    airtable: "Airtable",
+    asana: "Asana",
+    clickup: "ClickUp",
+    discord: "Discord",
+    shopify: "Shopify",
+    zendesk: "Zendesk",
+    dropbox: "Dropbox",
+    gitlab: "GitLab",
+    calendly: "Calendly",
+};
+export const brandTileSizeNames = ["sm", "md", "lg", "xl", "action"];
+export const brandIconSizeNames = [
+    "inline",
+    "glyph",
+    "fill",
+    "sm",
+    "md",
+    "lg",
+    "xl",
+];
+function Glyph({ brand }) {
+    const glyph = brandGlyphs[brand];
+    return (_jsx("svg", { viewBox: glyph.viewBox, className: "sprout-brand-glyph", "aria-hidden": "true", focusable: "false", children: glyph.paths.map((path, index) => (_jsx("path", { d: path.d, fill: "fill" in path ? path.fill : "currentColor", fillRule: "evenOdd" in path ? "evenodd" : undefined, clipRule: "evenOdd" in path ? "evenodd" : undefined }, index))) }));
+}
+export function BrandTile({ size = "md", render, ref, className, ...props }) {
+    return useRender({
+        defaultTagName: "span",
+        render,
+        ref,
+        props: mergeProps({
+            "data-slot": "brand-tile",
+            "data-size": size,
+            className: cn("sprout-brand-tile", className),
+        }, props),
+    });
+}
+export function BrandIcon({ brand, size = "md", className, ...props }) {
+    if (size === "inline" || size === "glyph" || size === "fill")
+        return (_jsx("span", { "data-slot": "brand-icon", "data-brand": brand, "data-size": size, ...props, className: cn("sprout-brand-icon", className), children: _jsx(Glyph, { brand: brand }) }));
+    return (_jsx(BrandTile, { "data-brand": brand, size: size, ...props, className: className, children: _jsx(Glyph, { brand: brand }) }));
+}
+export function BrandStack({ brands, label, className, ...props }) {
+    if (brands.length === 0)
+        return null;
+    return (_jsx(TooltipProvider, { delay: 200, children: _jsx("span", { "data-slot": "brand-stack", ...props, role: "img", "aria-label": label ?? brands.map((item) => item.name).join(", "), className: cn("sprout-brand-stack", className), children: brands.map((item) => (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(BrandTile, { size: "sm", "data-brand": item.brand }), children: _jsx(Glyph, { brand: item.brand }) }), _jsx(TooltipContent, { sideOffset: 6, className: "sprout-brand-tooltip", children: item.name })] }, item.brand))) }) }));
+}

package/dist/components/breadcrumb.d.ts

@@ -0,0 +1,29 @@
+import type { ComponentProps } from "react";
+import { useRender } from "@base-ui/react/use-render";
+export type BreadcrumbProps = ComponentProps<"nav">;
+export declare function Breadcrumb({ className, "aria-label": label, ...props }: BreadcrumbProps): import("react").JSX.Element;
+export interface BreadcrumbListProps extends ComponentProps<"ol"> {
+    /** Wrap long paths onto more lines. Set `false` to keep one line and let the current page shrink. */
+    wrap?: boolean;
+}
+export declare function BreadcrumbList({ className, wrap, ...props }: BreadcrumbListProps): import("react").JSX.Element;
+export type BreadcrumbItemProps = ComponentProps<"li">;
+export declare function BreadcrumbItem({ className, ...props }: BreadcrumbItemProps): import("react").JSX.Element;
+export interface BreadcrumbLinkState extends Record<string, unknown> {
+    slot: "breadcrumb-link";
+}
+export interface BreadcrumbLinkProps extends useRender.ComponentProps<"a", BreadcrumbLinkState> {
+    /** Cut a long name to one line with an ellipsis. String names also get a `title`. */
+    truncate?: boolean;
+}
+export declare function BreadcrumbLink({ className, render, ref, truncate, children, ...props }: BreadcrumbLinkProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export interface BreadcrumbPageProps extends ComponentProps<"span"> {
+    /** Cut a long name to one line with an ellipsis. String names also get a `title`. */
+    truncate?: boolean;
+}
+export declare function BreadcrumbPage({ className, truncate, children, ...props }: BreadcrumbPageProps): import("react").JSX.Element;
+export type BreadcrumbSeparatorProps = ComponentProps<"li">;
+export declare function BreadcrumbSeparator({ children, className, ...props }: BreadcrumbSeparatorProps): import("react").JSX.Element;
+export type BreadcrumbEllipsisProps = ComponentProps<"span">;
+/** Marks hidden folders. It is hidden from screen readers, so put the reason in a visually hidden sibling. */
+export declare function BreadcrumbEllipsis({ className, ...props }: BreadcrumbEllipsisProps): import("react").JSX.Element;

package/dist/components/breadcrumb.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { ChevronRight } from "reicon-react/icons/ChevronRight";
+import { MoreH } from "reicon-react/icons/MoreH";
+import { cn } from "../internal/classes.js";
+export function Breadcrumb({ className, "aria-label": label = "Breadcrumb", ...props }) {
+    return (_jsx("nav", { "aria-label": label, "data-slot": "breadcrumb", className: cn("sprout-breadcrumb", className), ...props }));
+}
+export function BreadcrumbList({ className, wrap = true, ...props }) {
+    return (_jsx("ol", { "data-slot": "breadcrumb-list", "data-wrap": wrap ? "true" : "false", className: cn("sprout-breadcrumb-list", className), ...props }));
+}
+export function BreadcrumbItem({ className, ...props }) {
+    return (_jsx("li", { "data-slot": "breadcrumb-item", className: cn("sprout-breadcrumb-item", className), ...props }));
+}
+function label(children, truncate) {
+    if (!truncate)
+        return children;
+    return (_jsx("span", { "data-slot": "breadcrumb-label", className: "sprout-breadcrumb-label", title: typeof children === "string" || typeof children === "number"
+            ? String(children)
+            : undefined, children: children }));
+}
+export function BreadcrumbLink({ className, render, ref, truncate, children, ...props }) {
+    return useRender({
+        defaultTagName: "a",
+        ref,
+        render,
+        props: mergeProps({
+            className: cn("sprout-breadcrumb-link", className),
+            children: label(children, truncate),
+        }, props),
+        state: { slot: "breadcrumb-link" },
+    });
+}
+export function BreadcrumbPage({ className, truncate, children, ...props }) {
+    return (_jsx("span", { "data-slot": "breadcrumb-page", role: "link", "aria-disabled": "true", "aria-current": "page", className: cn("sprout-breadcrumb-page", className), ...props, children: label(children, truncate) }));
+}
+export function BreadcrumbSeparator({ children, className, ...props }) {
+    return (_jsx("li", { "data-slot": "breadcrumb-separator", role: "presentation", "aria-hidden": "true", className: cn("sprout-breadcrumb-separator", className), ...props, children: children ?? _jsx(ChevronRight, {}) }));
+}
+/** Marks hidden folders. It is hidden from screen readers, so put the reason in a visually hidden sibling. */
+export function BreadcrumbEllipsis({ className, ...props }) {
+    return (_jsxs("span", { "data-slot": "breadcrumb-ellipsis", role: "presentation", "aria-hidden": "true", className: cn("sprout-breadcrumb-ellipsis", className), ...props, children: [_jsx(MoreH, {}), _jsx("span", { className: "sprout-breadcrumb-sr-only", children: "More" })] }));
+}