@tulipfarm/sprout 0.3.0 → 0.4.0

package/dist/components/attachment.js

@@ -1,90 +1,65 @@
-"use client";
+'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"];
+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 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 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 }));
+    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 }));
+    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 }));
+    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 }));
+    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 }));
+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",
+        defaultTagName: 'button',
         render,
         props: mergeProps({
-            type: render ? type : (type ?? "button"),
-            className: cn("sprout-attachment-trigger", className),
-        }, { "data-slot": "attachment-trigger" }, props),
+            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;
+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());
@@ -104,29 +79,27 @@ function SharedFileViewer({ children }) {
             }))
                 .filter((item) => item.file !== null)
                 .sort(byDocumentOrder);
-            const index = ordered.findIndex((item) => item.id === id);
+            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),
+                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 }))] }));
+    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")
+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 }));
+    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 }) {
@@ -139,7 +112,7 @@ function AttachmentCarousel({ className, children, onKeyDownCapture, ...props })
         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 });
+        setEdges(current => (current.start === start && current.end === end ? current : { start, end }));
     }, []);
     useEffect(() => {
         const node = viewport.current;
@@ -163,55 +136,49 @@ function AttachmentCarousel({ className, children, onKeyDownCapture, ...props })
             return;
         if (event.target.closest(typing))
             return;
-        if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+        if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
             event.preventDefault();
-            scroll(event.key === "ArrowLeft" ? -1 : 1);
+            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" }) }) }))] }));
+    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)
-        : "";
+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 })] }))] }));
+    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);
+    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"
+    return file.state === 'ready'
         ? file.size
-        : file.state === "error"
-            ? "Upload failed"
-            : file.state === "uploading"
-                ? "Uploading…"
-                : "Processing…";
+        : 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, }) {
+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 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 peek = preview && target !== null && file.state !== 'error' && isPreviewableFile(target);
     const latest = useRef(target);
     latest.current = inViewer ? target : null;
     useEffect(() => shared && inViewer
@@ -223,21 +190,21 @@ export function FileAttachment({ file, variant = "list", onRemove, onRetry, onOp
     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",
+        type: 'button',
         disabled: !!onOpen && busy,
-        onClick: () => onOpen ? onOpen() : shared ? shared.open(id) : setOpen(true),
+        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 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 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] }));
+        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 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] }));
+    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, }) {
@@ -245,29 +212,29 @@ export function AttachmentDropzone({ onFiles, disabled = false, accept = default
     const input = useRef(null);
     const over = (event) => {
         event.preventDefault();
-        event.dataTransfer.dropEffect = disabled ? "none" : "copy";
+        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) => {
+    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) => {
+        }, 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) => {
+        }, 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 = "";
+                    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, }) {
+export function LocalFileAttachment({ file, onRemove, onOpen, viewable, preview }) {
     const [url, setUrl] = useState();
-    const source = useMemo(() => ({ kind: "local", file }), [file]);
+    const source = useMemo(() => ({ kind: 'local', file }), [file]);
     useEffect(() => {
-        if (fileKind(file.name, file.type) !== "image")
+        if (fileKind(file.name, file.type) !== 'image')
             return;
         const next = URL.createObjectURL(file);
         setUrl(next);
@@ -278,7 +245,7 @@ export function LocalFileAttachment({ file, onRemove, onOpen, viewable, preview,
             name: file.name,
             mediaType: file.type,
             size: formatFileSize(file.size),
-            state: "ready",
+            state: 'ready',
             source,
             url,
         }, onRemove: onRemove, onOpen: onOpen, viewable: viewable, preview: preview }));

package/dist/components/avatar.d.ts

@@ -1,8 +1,8 @@
-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";
+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;
 }
@@ -11,18 +11,18 @@ 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 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"> {
+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"> {
+export interface EntityAvatarProps extends Omit<AvatarPrimitive.Root.Props, 'children'> {
     seed: string;
     name: string;
     image?: string | null | undefined;

package/dist/components/avatar.js

@@ -1,24 +1,24 @@
-"use client";
+'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) }));
+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) }));
+    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) }));
+    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) }));
+    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) }));
+    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) }));
+    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) {
@@ -49,14 +49,14 @@ const agentObjects = [
 ];
 // prettier-ignore
 const agentColors = ["pink", "coral", "orange", "yellow", "green", "teal", "blue", "purple"];
-export function agentAvatarSrc(agentId, baseUrl = "https://avatars.tulipfarm.ai/avatar") {
+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() || "?";
+    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) })] }));
@@ -68,6 +68,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 }) {
-    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) })] }));
+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

@@ -1,4 +1,4 @@
-import { useRender } from "@base-ui/react/use-render";
+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];
@@ -8,13 +8,13 @@ export interface BadgeVariantOptions {
     size?: BadgeSize | null;
     className?: string;
 }
-export declare function badgeVariants({ variant, size, className, }?: BadgeVariantOptions): string;
+export declare function badgeVariants({ variant, size, className }?: BadgeVariantOptions): string;
 export interface BadgeState extends Record<string, unknown> {
-    slot: "badge";
+    slot: 'badge';
     variant: BadgeVariant;
     size: BadgeSize;
 }
-export interface BadgeProps extends useRender.ComponentProps<"span", BadgeState> {
+export interface BadgeProps extends useRender.ComponentProps<'span', BadgeState> {
     variant?: BadgeVariant;
     size?: BadgeSize;
 }

package/dist/components/badge.js

@@ -1,27 +1,27 @@
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-import { cn } from "../internal/classes.js";
+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",
+    '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 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 }) {
+export function Badge({ className, variant = 'default', size = 'default', render, ref, ...props }) {
     return useRender({
-        defaultTagName: "span",
+        defaultTagName: 'span',
         ref,
         render,
         props: mergeProps({ className: badgeVariants({ variant, size, className }) }, props),
-        state: { slot: "badge", variant, size },
+        state: { slot: 'badge', variant, size },
     });
 }