veryfront 0.1.997 → 0.1.999

package/esm/src/react/components/chat/chat/components/attachment-pill.d.ts

@@ -1,18 +1,140 @@
 import * as React from "../../../../../../react/react.js";
+/** Upload lifecycle state (shadcn-style). Drives the icon, label, and treatment. */
+export type AttachmentState = "selected" | "uploading" | "processing" | "uploaded" | "error";
 /** Public API contract for attachment info. */
 export interface AttachmentInfo {
     id: string;
     name: string;
+    /** Legacy two-value status; prefer `state` for the full lifecycle. */
     status?: "uploading" | "ready";
+    /** Upload lifecycle state — sets the icon, label, and container treatment. */
+    state?: AttachmentState;
+    /** Upload progress (0–100), shown in the `uploading` label. */
+    progress?: number;
     type?: string;
     size?: number;
     preview?: string;
+    /** Resolved URL once the file has finished uploading. */
+    url?: string;
+}
+/** Icon overrides for {@link AttachmentPill}. Each defaults to its glyph. */
+export interface AttachmentPillIcons {
+    /** Override the remove (✕) glyph. */
+    remove?: React.ReactNode;
+    /** Override the retry glyph. */
+    retry?: React.ReactNode;
 }
 /** Props accepted by attachment pill. */
-export interface AttachmentPillProps {
+export interface AttachmentPillProps extends React.HTMLAttributes<HTMLDivElement> {
     attachment: AttachmentInfo;
     onRemove?: (id: string) => void;
+    /** Retry handler — surfaces a retry button in the `error` state. */
+    onRetry?: (id: string) => void;
+    /** Override the remove / retry button icons. */
+    icons?: AttachmentPillIcons;
+    /**
+     * Draw the outline + surrounding box. `false` gives a flat, borderless row
+     * (e.g. `AttachmentsPanel`, where the pills are a plain list). @default true
+     */
+    bordered?: boolean;
+    /** Compose your own pill; when omitted, the default anatomy is rendered. */
+    children?: React.ReactNode;
+}
+/** Derived per-pill view state shared with `AttachmentPill.*` sub-parts. */
+export interface AttachmentPillContextValue {
+    attachment: AttachmentInfo;
+    onRemove?: (id: string) => void;
+    onRetry?: (id: string) => void;
+    icons?: AttachmentPillIcons;
+    /** File extension (from the name, falling back to the media type). */
+    ext: string;
+    /** Tailwind color pair for the default (no-state) icon box. */
+    colorClass: string;
+    /** Whether the attachment resolves to an image. */
+    isImage: boolean;
+    /** The image `src` to show in the thumbnail (preview → url). */
+    imageSrc?: string;
+    /** Whether the current state is `error`. */
+    isError: boolean;
+    /** Whether a spinner overlay should show (uploading / processing). */
+    isBusy: boolean;
+    /** Whether the title should shimmer (uploading / processing). */
+    shimmerTitle: boolean;
+    /** The secondary label line for the current state. */
+    label: string;
+    /** Legacy dimming for the old `status="uploading"` API. */
+    legacyUploading: boolean;
+    /** Whether the remove control should render. */
+    showRemove: boolean;
+    /** The state glyph for the icon box (null → render the extension text). */
+    stateGlyph: React.ReactNode;
+    /** Tailwind classes for the icon box background/foreground. */
+    boxClass: string;
+}
+/**
+ * Read the enclosing `AttachmentPill` state. Throws when used outside an
+ * `AttachmentPill`.
+ */
+export declare function useAttachmentPill(): AttachmentPillContextValue;
+/**
+ * `AttachmentPill.Thumbnail` — the image square (with a busy overlay). Renders
+ * only when the attachment resolves to a non-error image with a source.
+ */
+declare function AttachmentPillThumbnail({ className }: {
+    className?: string;
+}): React.JSX.Element | null;
+declare namespace AttachmentPillThumbnail {
+    var displayName: string;
+}
+/**
+ * `AttachmentPill.Icon` — the state-glyph / file-extension square shown when
+ * there is no image thumbnail.
+ */
+declare function AttachmentPillIcon({ className }: {
+    className?: string;
+}): React.JSX.Element;
+declare namespace AttachmentPillIcon {
+    var displayName: string;
+}
+/** `AttachmentPill.Label` — the name + secondary state-line column. */
+declare function AttachmentPillLabel({ className }: {
+    className?: string;
+}): React.JSX.Element;
+declare namespace AttachmentPillLabel {
+    var displayName: string;
+}
+/**
+ * `AttachmentPill.Retry` — the retry control. Renders only in the `error` state
+ * when an `onRetry` handler is provided.
+ */
+declare function AttachmentPillRetry({ className }: {
+    className?: string;
+}): React.JSX.Element | null;
+declare namespace AttachmentPillRetry {
+    var displayName: string;
+}
+/**
+ * `AttachmentPill.Remove` — the remove (✕) control. Renders only when an
+ * `onRemove` handler is provided and the pill isn't a legacy uploading pill.
+ */
+declare function AttachmentPillRemove({ className }: {
+    className?: string;
+}): React.JSX.Element | null;
+declare namespace AttachmentPillRemove {
+    var displayName: string;
 }
-/** Render attachment pill. */
-export declare function AttachmentPill({ attachment, onRemove, }: AttachmentPillProps): React.ReactElement;
+/**
+ * AttachmentPill — render `<AttachmentPill attachment={…} />` for the default
+ * chip, or compose `AttachmentPill.Root` + `.Thumbnail` / `.Icon` / `.Label` /
+ * `.Retry` / `.Remove` for a custom layout. Publicly aliased as `Attachment`.
+ */
+export declare const AttachmentPill: React.ForwardRefExoticComponent<AttachmentPillProps & React.RefAttributes<HTMLDivElement>> & {
+    Root: React.ForwardRefExoticComponent<AttachmentPillProps & React.RefAttributes<HTMLDivElement>>;
+    Thumbnail: typeof AttachmentPillThumbnail;
+    Icon: typeof AttachmentPillIcon;
+    Label: typeof AttachmentPillLabel;
+    Retry: typeof AttachmentPillRetry;
+    Remove: typeof AttachmentPillRemove;
+};
+export {};
 //# sourceMappingURL=attachment-pill.d.ts.map

package/esm/src/react/components/chat/chat/components/attachment-pill.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"attachment-pill.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/chat/chat/components/attachment-pill.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,kCAAkC,CAAC;AAG1D,+CAA+C;AAC/C,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,yCAAyC;AACzC,MAAM,WAAW,mBAAmB;IAClC,UAAU,EAAE,cAAc,CAAC;IAC3B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAsBD,8BAA8B;AAC9B,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,QAAQ,GACT,EAAE,mBAAmB,GAAG,KAAK,CAAC,YAAY,CAqE1C"}
+{"version":3,"file":"attachment-pill.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/chat/chat/components/attachment-pill.tsx"],"names":[],"mappings":"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"}

package/esm/src/react/components/chat/chat/components/attachment-pill.js

@@ -1,12 +1,16 @@
 import * as React from "../../../../../../react/react.js";
 import { cn } from "../../theme.js";
+import { CheckIcon, ClockIcon, FileTextIcon, RefreshCwIcon } from "../../icons/index.js";
+import { Button } from "../../ui/button.js";
+import { Shimmer } from "./animations.js";
+import { COMPONENT_ERROR } from "../../../../../errors/error-registry.js";
 const FILE_TYPE_COLORS = {
-    pdf: "text-red-500 bg-red-500/10",
-    docx: "text-blue-500 bg-blue-500/10",
-    csv: "text-emerald-500 bg-emerald-500/10",
-    txt: "text-neutral-500 bg-neutral-500/10",
-    md: "text-purple-500 bg-purple-500/10",
-    mdx: "text-purple-500 bg-purple-500/10",
+    pdf: "text-red-700 bg-red-100",
+    docx: "text-blue-700 bg-blue-100",
+    csv: "text-emerald-700 bg-emerald-100",
+    txt: "text-[var(--faint)] bg-[var(--tertiary)]",
+    md: "text-purple-700 bg-purple-100",
+    mdx: "text-purple-700 bg-purple-100",
 };
 function getExtension(name) {
     const dot = name.lastIndexOf(".");
@@ -19,23 +23,203 @@ function formatSize(bytes) {
         return `${(bytes / 1024).toFixed(0)} KB`;
     return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
-/** Render attachment pill. */
-export function AttachmentPill({ attachment, onRemove, }) {
-    const [showPreview, setShowPreview] = React.useState(false);
-    const ext = attachment.type ?? getExtension(attachment.name);
-    const colorClass = FILE_TYPE_COLORS[ext] ?? "text-neutral-400 bg-neutral-400/10";
-    return (React.createElement("span", { className: "relative inline-flex items-center gap-1.5 rounded-lg bg-[var(--card)] py-1 pl-2.5 pr-1.5 text-xs text-[var(--card-foreground)] shadow-sm", onMouseEnter: () => setShowPreview(true), onMouseLeave: () => setShowPreview(false) },
-        React.createElement("span", { className: cn("inline-flex items-center justify-center rounded px-1 py-0.5 text-[9px] font-bold uppercase leading-none", colorClass) }, ext || "?"),
-        React.createElement("span", { className: "truncate max-w-[120px]" }, attachment.name),
-        attachment.size != null && (React.createElement("span", { className: "text-[10px] text-[var(--input-placeholder)] shrink-0" }, formatSize(attachment.size))),
-        attachment.status === "uploading"
-            ? (React.createElement("span", { className: "size-3 shrink-0 rounded-full border-2 border-neutral-400 border-t-transparent animate-spin" }))
-            : onRemove && (React.createElement("button", { type: "button", onClick: () => onRemove(attachment.id), "aria-label": `Remove ${attachment.name}`, className: "size-4 shrink-0 flex items-center justify-center rounded-full hover:bg-[var(--accent)] text-[var(--input-placeholder)] hover:text-[var(--foreground)] transition-colors" },
-                React.createElement("svg", { className: "size-3", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" },
-                    React.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                    React.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" })))),
-        showPreview && attachment.preview && (React.createElement("div", { className: "absolute bottom-full left-0 mb-2 z-50 w-64 pointer-events-none" },
-            React.createElement("div", { className: "bg-[var(--card)] border border-[var(--border)] rounded-xl shadow-lg p-3 text-left" },
-                React.createElement("p", { className: "text-[10px] font-medium text-[var(--muted-foreground)] uppercase mb-1" }, "Preview"),
-                React.createElement("p", { className: "text-xs text-[var(--card-foreground)] line-clamp-4 whitespace-pre-wrap" }, attachment.preview))))));
+function getTypeLabel(attachment, ext, mediaType) {
+    if (attachment.status === "uploading")
+        return "Uploading";
+    if (attachment.size != null)
+        return formatSize(attachment.size);
+    return ext ? ext.toUpperCase() : (mediaType || "File");
 }
+/** Secondary line for the current lifecycle state. */
+function getStateLabel(attachment, ext, mediaType) {
+    switch (attachment.state) {
+        case "selected":
+            return "Ready to upload";
+        case "uploading":
+            return attachment.progress != null
+                ? `Uploading · ${Math.round(attachment.progress)}%`
+                : "Uploading";
+        case "processing":
+            return "Processing document";
+        case "uploaded":
+            return attachment.size != null ? `Uploaded · ${formatSize(attachment.size)}` : "Uploaded";
+        case "error":
+            return "Upload failed. Try again.";
+        default:
+            return getTypeLabel(attachment, ext, mediaType);
+    }
+}
+/** A rounded spinner used while uploading. */
+function Spinner() {
+    return (React.createElement("span", { className: "size-4.5 animate-spin rounded-full border-2 border-[var(--faint)] border-t-transparent" }));
+}
+/** Alert glyph for the error state (no dedicated icon in the barrel). */
+function AlertGlyph() {
+    return (React.createElement("svg", { viewBox: "0 0 24 24", className: "size-4.5", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true" },
+        React.createElement("circle", { cx: "12", cy: "12", r: "9" }),
+        React.createElement("line", { x1: "12", y1: "8", x2: "12", y2: "12.5" }),
+        React.createElement("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })));
+}
+const AttachmentPillContext = React.createContext(null);
+/**
+ * Read the enclosing `AttachmentPill` state. Throws when used outside an
+ * `AttachmentPill`.
+ */
+export function useAttachmentPill() {
+    const ctx = React.useContext(AttachmentPillContext);
+    if (!ctx) {
+        throw COMPONENT_ERROR.create({
+            detail: "useAttachmentPill must be used within a AttachmentPill",
+        });
+    }
+    return ctx;
+}
+/**
+ * `AttachmentPill.Root` — context provider + the chip wrapper. No children
+ * renders the default anatomy; pass children to recompose.
+ */
+const AttachmentPillRoot = React.forwardRef(function AttachmentPill({ attachment, onRemove, onRetry, icons, bordered = true, className, children, ...props }, ref) {
+    const mediaType = attachment.type ?? "";
+    const ext = getExtension(attachment.name) ||
+        mediaType.split("/").pop()?.toLowerCase() || "";
+    const colorClass = FILE_TYPE_COLORS[ext] ??
+        "text-[var(--faint)] bg-[var(--tertiary)]";
+    const isImage = mediaType.startsWith("image/") ||
+        /\.(avif|gif|jpe?g|png|webp)$/i.test(attachment.name);
+    const state = attachment.state;
+    const isError = state === "error";
+    // Prefer the local object-URL `preview`; fall back to the resolved `url`
+    // (set on sent-message pills) so an uploaded image still shows a thumbnail.
+    const imageSrc = isImage ? (attachment.preview ?? attachment.url) : undefined;
+    const isBusy = state === "uploading" || state === "processing" ||
+        attachment.status === "uploading";
+    const shimmerTitle = state === "uploading" || state === "processing";
+    const label = getStateLabel(attachment, ext, mediaType);
+    // Legacy dimming only applies to the old `status` API (new states stay solid).
+    const legacyUploading = !state && attachment.status === "uploading";
+    const showRemove = Boolean(onRemove) &&
+        (Boolean(state) || attachment.status !== "uploading");
+    // The left box shows a state glyph when a lifecycle `state` is set, otherwise
+    // the file-type extension badge (default behaviour).
+    const stateGlyph = state === "selected"
+        ? React.createElement(ClockIcon, { className: "size-4.5 text-[var(--faint)]" })
+        : state === "uploading"
+            ? React.createElement(Spinner, null)
+            : state === "processing"
+                ? React.createElement(FileTextIcon, { className: "size-4.5 text-[var(--faint)]" })
+                : state === "uploaded"
+                    ? React.createElement(CheckIcon, { className: "size-4.5 text-[var(--foreground)]" })
+                    : isError
+                        ? React.createElement(AlertGlyph, null)
+                        : null;
+    const boxClass = isError
+        ? "bg-[color-mix(in_oklch,var(--destructive),transparent_86%)] text-[var(--destructive)]"
+        : state
+            ? "bg-[var(--tertiary)] text-[var(--foreground)]"
+            : colorClass;
+    const context = {
+        attachment,
+        onRemove,
+        onRetry,
+        icons,
+        ext,
+        colorClass,
+        isImage,
+        imageSrc,
+        isError,
+        isBusy,
+        shimmerTitle,
+        label,
+        legacyUploading,
+        showRemove,
+        stateGlyph,
+        boxClass,
+    };
+    return (React.createElement(AttachmentPillContext.Provider, { value: context },
+        React.createElement("div", { ...props, ref: ref, className: cn(
+            // No width here on purpose — width is the container's decision
+            // (composer uses a fixed chip, AttachmentsPanel fills the row).
+            "group relative flex items-center gap-3 rounded-[var(--radius-md)] bg-[var(--secondary)] py-1 pl-1 pr-2 text-[var(--foreground)]", bordered && "border", bordered && (state === "selected"
+                ? "border-dashed border-[var(--edge-medium)]"
+                : isError
+                    ? "border-[var(--destructive)] bg-[color-mix(in_oklch,var(--destructive),transparent_94%)]"
+                    : "border-[var(--edge-medium)]"), legacyUploading && "opacity-70", className) }, children ?? (React.createElement(React.Fragment, null,
+            imageSrc && !isError ? React.createElement(AttachmentPillThumbnail, null) : React.createElement(AttachmentPillIcon, null),
+            React.createElement(AttachmentPillLabel, null),
+            React.createElement(AttachmentPillRetry, null),
+            React.createElement(AttachmentPillRemove, null))))));
+});
+AttachmentPillRoot.displayName = "AttachmentPill.Root";
+/**
+ * `AttachmentPill.Thumbnail` — the image square (with a busy overlay). Renders
+ * only when the attachment resolves to a non-error image with a source.
+ */
+function AttachmentPillThumbnail({ className }) {
+    const { imageSrc, isError, isBusy } = useAttachmentPill();
+    if (!imageSrc || isError)
+        return null;
+    return (React.createElement("div", { className: cn("relative size-10 shrink-0 overflow-hidden rounded-[var(--radius-sm)] bg-[var(--tertiary)]", className) },
+        React.createElement("img", { alt: "", className: "size-full object-cover", src: imageSrc }),
+        isBusy && (React.createElement("div", { className: "absolute inset-0 flex items-center justify-center rounded-[var(--radius-sm)] bg-[var(--overlay)]" },
+            React.createElement("span", { className: "size-4 animate-spin rounded-full border-2 border-white border-t-transparent" })))));
+}
+AttachmentPillThumbnail.displayName = "AttachmentPill.Thumbnail";
+/**
+ * `AttachmentPill.Icon` — the state-glyph / file-extension square shown when
+ * there is no image thumbnail.
+ */
+function AttachmentPillIcon({ className }) {
+    const { boxClass, stateGlyph, ext, legacyUploading } = useAttachmentPill();
+    return (React.createElement("div", { className: cn("relative flex size-10 shrink-0 items-center justify-center rounded-[var(--radius-sm)] text-[10px] font-medium uppercase leading-none", boxClass, className) },
+        stateGlyph ?? ext ?? "file",
+        legacyUploading && (React.createElement("div", { className: "absolute inset-0 flex items-center justify-center rounded-[var(--radius-sm)] bg-[var(--overlay)]" },
+            React.createElement("span", { className: "size-4 animate-spin rounded-full border-2 border-white border-t-transparent" })))));
+}
+AttachmentPillIcon.displayName = "AttachmentPill.Icon";
+/** `AttachmentPill.Label` — the name + secondary state-line column. */
+function AttachmentPillLabel({ className }) {
+    const { attachment, shimmerTitle, isError, label } = useAttachmentPill();
+    return (React.createElement("div", { className: cn("flex min-w-0 flex-1 flex-col gap-0.5", className) },
+        React.createElement("p", { className: "truncate text-sm font-medium leading-tight" }, shimmerTitle
+            ? React.createElement(Shimmer, null, attachment.name || "Attachment")
+            : (attachment.name || "Attachment")),
+        React.createElement("p", { className: cn("truncate text-xs leading-tight", isError ? "text-[var(--destructive)]" : "text-[var(--faint)]") }, label)));
+}
+AttachmentPillLabel.displayName = "AttachmentPill.Label";
+/**
+ * `AttachmentPill.Retry` — the retry control. Renders only in the `error` state
+ * when an `onRetry` handler is provided.
+ */
+function AttachmentPillRetry({ className }) {
+    const { attachment, isError, onRetry, icons } = useAttachmentPill();
+    if (!isError || !onRetry)
+        return null;
+    return (React.createElement(Button, { type: "button", variant: "icon-ghost", size: "icon-xs", on: "card", onClick: () => onRetry(attachment.id), "aria-label": `Retry ${attachment.name}`, className: cn("shrink-0", className) }, icons?.retry ?? React.createElement(RefreshCwIcon, null)));
+}
+AttachmentPillRetry.displayName = "AttachmentPill.Retry";
+/**
+ * `AttachmentPill.Remove` — the remove (✕) control. Renders only when an
+ * `onRemove` handler is provided and the pill isn't a legacy uploading pill.
+ */
+function AttachmentPillRemove({ className }) {
+    const { attachment, showRemove, onRemove, icons } = useAttachmentPill();
+    if (!showRemove)
+        return null;
+    return (React.createElement(Button, { type: "button", variant: "icon-ghost", size: "icon-xs", on: "card", onClick: () => onRemove?.(attachment.id), "aria-label": `Remove ${attachment.name}`, className: cn("shrink-0 opacity-100 md:opacity-0 md:group-hover:opacity-100", className) }, icons?.remove ?? (React.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" },
+        React.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        React.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" })))));
+}
+AttachmentPillRemove.displayName = "AttachmentPill.Remove";
+/**
+ * AttachmentPill — render `<AttachmentPill attachment={…} />` for the default
+ * chip, or compose `AttachmentPill.Root` + `.Thumbnail` / `.Icon` / `.Label` /
+ * `.Retry` / `.Remove` for a custom layout. Publicly aliased as `Attachment`.
+ */
+export const AttachmentPill = Object.assign(AttachmentPillRoot, {
+    Root: AttachmentPillRoot,
+    Thumbnail: AttachmentPillThumbnail,
+    Icon: AttachmentPillIcon,
+    Label: AttachmentPillLabel,
+    Retry: AttachmentPillRetry,
+    Remove: AttachmentPillRemove,
+});

package/esm/src/react/components/chat/chat/components/attachments-panel.d.ts

@@ -0,0 +1,149 @@
+import * as React from "../../../../../../react/react.js";
+/** Public API contract for uploaded file. */
+export interface UploadedFile {
+    id: string;
+    name: string;
+    size?: number;
+    type?: string;
+    url?: string;
+}
+/** Per-panel state shared with `AttachmentsPanel.*` sub-parts. */
+export interface AttachmentsPanelContextValue {
+    uploads: UploadedFile[];
+    /** `true` while the initial list is loading; shows the placeholder state. */
+    loading?: boolean;
+    onRemoveUpload?: (id: string) => void;
+    onAttach?: (files: FileList) => void;
+    attachAccept?: string;
+    /** Dismisses the panel; enables the close button when set. */
+    onClose?: () => void;
+    /** Opens the native file picker (wired to the hidden input in `Root`). */
+    triggerAttach: () => void;
+}
+/**
+ * Read the enclosing `AttachmentsPanel` state. Throws when used outside an
+ * `AttachmentsPanel`.
+ */
+export declare function useAttachmentsPanel(): AttachmentsPanelContextValue;
+/** Props accepted by `AttachmentsPanel` / `AttachmentsPanel.Root`. */
+export interface AttachmentsPanelProps {
+    uploads?: UploadedFile[];
+    /**
+     * `true` while the initial list is still loading. When set and there are no
+     * uploads yet, the panel shows the `Loading` placeholder instead of `Empty`.
+     */
+    loading?: boolean;
+    onRemoveUpload?: (id: string) => void;
+    onAttach?: (files: FileList) => void;
+    attachAccept?: string;
+    /** Called to dismiss the panel; renders the header close button when set. */
+    onClose?: () => void;
+    className?: string;
+    /** Compose your own panel; when omitted, the default anatomy is rendered. */
+    children?: React.ReactNode;
+}
+/** Props for `AttachmentsPanel.Header` — the title row + close button. */
+export interface AttachmentsPanelHeaderProps {
+    className?: string;
+    /** Compose your own header; when omitted, the "Attachments" title + close. */
+    children?: React.ReactNode;
+}
+/**
+ * The panel header: an "Attachments" title with a close `Button` on the right.
+ * The close button only appears when `onClose` is set on the panel.
+ */
+declare function AttachmentsPanelHeader({ className, children }: AttachmentsPanelHeaderProps): React.JSX.Element;
+declare namespace AttachmentsPanelHeader {
+    var displayName: string;
+}
+/** Props for `AttachmentsPanel.List` — the scrollable list of file rows. */
+export interface AttachmentsPanelListProps {
+    className?: string;
+    /** Compose your own rows; when omitted, one `AttachmentsPanel.Item` per upload. */
+    children?: React.ReactNode;
+}
+/**
+ * The attachment list — a flex-gap column of `AttachmentsPanel.Item` cards
+ * (one per upload) plus the "Upload files" `AttachmentsPanel.Action` underneath
+ * when `onAttach` is set.
+ */
+declare function AttachmentsPanelList({ className, children }: AttachmentsPanelListProps): React.JSX.Element;
+declare namespace AttachmentsPanelList {
+    var displayName: string;
+}
+/** Props accepted by an individual `AttachmentsPanel.Item` (attachment card). */
+export interface AttachmentsPanelItemProps {
+    file: UploadedFile;
+    className?: string;
+}
+/**
+ * A single attachment row — the shared `Attachment` (`AttachmentPill`) card,
+ * stretched full-width. This *composes* `AttachmentPill` (rather than rendering
+ * its default anatomy) to swap the trailing remove (✕) for an overflow (⋯) menu
+ * with Open / Delete — a live test of how composable `Attachment` is.
+ */
+declare function AttachmentsPanelItem({ file: doc, className }: AttachmentsPanelItemProps): React.JSX.Element;
+declare namespace AttachmentsPanelItem {
+    var displayName: string;
+}
+/** Props for `AttachmentsPanel.Loading` — the initial-fetch placeholder. */
+export interface AttachmentsPanelLoadingProps {
+    className?: string;
+    /** How many skeleton rows to render. Default `3`. */
+    count?: number;
+}
+/**
+ * The loading state: skeleton rows shaped like `AttachmentsPanel.Item` cards,
+ * shown while the initial list is fetched so the panel doesn't flash `Empty`.
+ */
+declare function AttachmentsPanelLoading({ className, count }: AttachmentsPanelLoadingProps): React.JSX.Element;
+declare namespace AttachmentsPanelLoading {
+    var displayName: string;
+}
+/** Props for `AttachmentsPanel.Empty` — the no-files state. */
+export interface AttachmentsPanelEmptyProps {
+    className?: string;
+    /** Compose your own empty state; when omitted, the default copy + action. */
+    children?: React.ReactNode;
+}
+/** The empty state: heading, hint, and the upload `AttachmentsPanel.Action`. */
+declare function AttachmentsPanelEmpty({ className, children }: AttachmentsPanelEmptyProps): React.JSX.Element;
+declare namespace AttachmentsPanelEmpty {
+    var displayName: string;
+}
+/** Props for `AttachmentsPanel.Action` — the upload/attach button. */
+export interface AttachmentsPanelActionProps {
+    /**
+     * Presentation only: `empty` is the pill button in the empty state, `more` is
+     * the centered "add more" button below the list. Both render a `<Button>`
+     * labelled "Upload files". Defaults to `empty`.
+     */
+    variant?: "empty" | "more";
+    className?: string;
+    /** Button contents; defaults to "Upload files". */
+    children?: React.ReactNode;
+    /** Called after opening the native picker. */
+    onClick?: () => void;
+}
+/** The upload/attach button. Opens the native file picker wired in `Root`. */
+declare function AttachmentsPanelAction({ variant, className, children, onClick }: AttachmentsPanelActionProps): React.JSX.Element;
+declare namespace AttachmentsPanelAction {
+    var displayName: string;
+}
+/**
+ * AttachmentsPanel — render `<AttachmentsPanel uploads={…} />` for the default panel, or
+ * compose `AttachmentsPanel.Root` + `List` / `Item` / `Empty` / `Action` for a
+ * custom layout. Mirrors the `ToolCall` / `Sources` compounds: render it, or
+ * compose it.
+ */
+export declare const AttachmentsPanel: React.ForwardRefExoticComponent<AttachmentsPanelProps & React.RefAttributes<HTMLDivElement>> & {
+    Root: React.ForwardRefExoticComponent<AttachmentsPanelProps & React.RefAttributes<HTMLDivElement>>;
+    Header: typeof AttachmentsPanelHeader;
+    List: typeof AttachmentsPanelList;
+    Item: typeof AttachmentsPanelItem;
+    Loading: typeof AttachmentsPanelLoading;
+    Empty: typeof AttachmentsPanelEmpty;
+    Action: typeof AttachmentsPanelAction;
+};
+export {};
+//# sourceMappingURL=attachments-panel.d.ts.map

package/esm/src/react/components/chat/chat/components/attachments-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"attachments-panel.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/chat/chat/components/attachments-panel.tsx"],"names":[],"mappings":"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"}