veryfront 0.1.997 → 0.1.998

package/esm/src/react/components/chat/agent-picker.js

@@ -0,0 +1,183 @@
+/**
+ * AgentPicker — Popover + Command combobox for switching the active agent.
+ * Forked dependency-light 1:1 from Veryfront Studio's `AgentPicker`: a Pill (or
+ * input-style) trigger opens a searchable list of agent rows (Avatar + name),
+ * a Check marks the selection, and optional "Create Agent" / "Manage Agents"
+ * affordances sit at the bottom. Studio's mobile `Drawer`/`ResponsiveSwitch`
+ * branch is dropped (Studio-only deps) — the overlay always portals via our
+ * `Floating` (through `PopoverContent`) so it never clips in the iframe.
+ *
+ * Semantic Studio classes remapped to veryfront's `[var(--token)]` vocabulary;
+ * icons inherit the Command row's sizing. Composes the private chat/ui
+ * primitives (Popover, Command, Avatar) — no radix / cva / `@/` imports.
+ *
+ * @module react/components/chat/agent-picker
+ */
+import * as React from "../../../../react/react.js";
+import { cn } from "./theme.js";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "./ui/command.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover.js";
+import { Pill } from "./ui/pill.js";
+import { Avatar } from "./ui/avatar.js";
+import { CheckIcon, ChevronDownIcon, PlusIcon, SparklesIcon } from "./icons/index.js";
+import { COMPONENT_ERROR } from "../../../errors/error-registry.js";
+/** Search box appears once the combined agent count crosses this. */
+const SEARCH_THRESHOLD = 5;
+const LOADING_ROW_WIDTHS = ["w-3/5", "w-3/4", "w-2/3"];
+function totalAgentCount(agents, sections) {
+    return agents.length +
+        sections.reduce((acc, section) => acc + section.agents.length, 0);
+}
+function findAgent(id, agents, sections) {
+    if (id === undefined)
+        return undefined;
+    const top = agents.find((agent) => agent.id === id);
+    if (top)
+        return top;
+    for (const section of sections) {
+        const hit = section.agents.find((agent) => agent.id === id);
+        if (hit)
+            return hit;
+    }
+    return undefined;
+}
+function AgentPickerLoadingRows() {
+    return (React.createElement("output", { "aria-label": "Loading agents", className: "block px-1 py-1" },
+        React.createElement("span", { className: "sr-only" }, "Loading agents"),
+        LOADING_ROW_WIDTHS.map((widthClass, index) => (React.createElement("div", { key: `${index}-${widthClass}`, "aria-hidden": "true", className: "flex items-center gap-3 px-3 py-2" },
+            React.createElement("div", { className: "size-5 shrink-0 rounded-full bg-[var(--accent)] animate-pulse" }),
+            React.createElement("div", { className: cn("h-3 rounded-md bg-[var(--accent)] animate-pulse", widthClass) }))))));
+}
+const AgentPickerContext = React.createContext(null);
+/**
+ * Read the enclosing `AgentPicker` selection + open state. Throws when used
+ * outside an `<AgentPicker>`.
+ */
+export function useAgentPicker() {
+    const ctx = React.useContext(AgentPickerContext);
+    if (!ctx) {
+        throw COMPONENT_ERROR.create({
+            detail: "useAgentPicker must be used within a AgentPicker",
+        });
+    }
+    return ctx;
+}
+/** The pill (or input-style) combobox trigger. Toggles the popover. */
+function AgentPickerTrigger({ inputStyle = false, invalid = false, children, className }) {
+    const { value, icons } = useAgentPicker();
+    const sections = React.useContext(AgentDataContext);
+    const selected = sections ? findAgent(value, sections.agents, sections.sections) : undefined;
+    const triggerLabel = selected?.name ?? "Select agent";
+    const content = children ?? (React.createElement(React.Fragment, null,
+        selected && (React.createElement(Avatar, { name: selected.name, avatarSrc: selected.avatarSrc, tone: "muted", "aria-hidden": "true", className: "size-5! bg-[var(--background)]" })),
+        React.createElement("span", { className: "min-w-0 truncate" }, triggerLabel),
+        inputStyle
+            ? (icons?.chevron ??
+                React.createElement(ChevronDownIcon, { className: "ml-auto size-3.5 opacity-50" }))
+            : (icons?.chevron ?? React.createElement(ChevronDownIcon, { className: "ml-auto" }))));
+    const trigger = inputStyle
+        ? (React.createElement("button", { type: "button", "data-invalid": invalid || undefined, className: cn("flex w-full items-center gap-2.5 rounded-md border border-[var(--input-border)] bg-[var(--input-bg)] h-[50px] px-3 text-base text-[var(--foreground)]", "data-[invalid=true]:border-[var(--status-error)]", className) }, content))
+        : (React.createElement(Pill, { className: cn("min-w-0 max-w-full", className) }, content));
+    return React.createElement(PopoverTrigger, { asChild: true }, trigger);
+}
+AgentPickerTrigger.displayName = "AgentPicker.Trigger";
+/** The popover surface wrapping a `Command` (search + list region). */
+function AgentPickerContent({ showSearch = false, searchPlaceholder = "Search agents...", children, className, }) {
+    return (React.createElement(PopoverContent, { align: "start", className: cn("min-w-[280px] p-0! rounded-lg", className) },
+        React.createElement(Command, { className: "bg-transparent" },
+            showSearch && React.createElement(CommandInput, { placeholder: searchPlaceholder }),
+            children)));
+}
+AgentPickerContent.displayName = "AgentPicker.Content";
+/** The scrollable `Command` list region. */
+function AgentPickerList({ children, className }) {
+    return (React.createElement(CommandList, { className: cn("max-h-[320px]", className) }, children));
+}
+AgentPickerList.displayName = "AgentPicker.List";
+/** A single agent row (Avatar + name + selection check). */
+function AgentPickerItem({ agent, selected, className }) {
+    const { value, onSelect, icons } = useAgentPicker();
+    const isSelected = selected ?? agent.id === value;
+    return (React.createElement(CommandItem, { value: agent.name, disabled: agent.disabled, onSelect: () => onSelect(agent.id), className: className },
+        React.createElement(Avatar, { name: agent.name, avatarSrc: agent.avatarSrc, tone: "muted", "aria-hidden": "true", className: "size-5! bg-[var(--background)]" }),
+        React.createElement("span", { className: "min-w-0 flex-1 truncate" }, agent.name),
+        isSelected &&
+            (icons?.check ?? React.createElement(CheckIcon, { className: "ml-auto opacity-70" }))));
+}
+AgentPickerItem.displayName = "AgentPicker.Item";
+/**
+ * Data passed down so the default `Trigger` can resolve the selected label from
+ * the preset `agents` / `sections`. Only populated on the preset (childless)
+ * path; a fully-composed tree supplies its own trigger contents.
+ */
+const AgentDataContext = React.createContext(null);
+/** The default preset body — the data-driven groups + action rows. */
+function AgentPickerPresetBody({ agents, value, sections, onManage, onCreate, isLoading, icons, }) {
+    const hasSectionAgents = sections.some((section) => section.agents.length > 0);
+    const showLoading = isLoading && !hasSectionAgents;
+    return (React.createElement(React.Fragment, null,
+        !showLoading && React.createElement(CommandEmpty, null, "No agents found."),
+        agents.length > 0 && (React.createElement(CommandGroup, null, agents.map((agent) => (React.createElement(AgentPickerItem, { key: agent.id, agent: agent, selected: agent.id === value }))))),
+        showLoading && React.createElement(AgentPickerLoadingRows, null),
+        sections.map((section, index) => (React.createElement(CommandGroup, { key: section.label ?? `section-${index}`, heading: section.label }, section.agents.map((agent) => (React.createElement(AgentPickerItem, { key: agent.id, agent: agent, selected: agent.id === value })))))),
+        (onCreate || onManage) && (React.createElement(CommandGroup, null,
+            onCreate && (React.createElement(CommandItem, { value: "Create Agent", onSelect: onCreate },
+                icons?.create ?? React.createElement(PlusIcon, null),
+                "Create Agent")),
+            onManage && (React.createElement(CommandItem, { value: "Manage Agents", onSelect: onManage },
+                icons?.more ?? React.createElement(SparklesIcon, null),
+                "Manage Agents"))))));
+}
+/**
+ * `AgentPicker.Root` — context provider + the popover shell. No children
+ * renders the default data-driven preset; pass children to recompose from
+ * `AgentPicker.Trigger` / `Content` / `List` / `Item`.
+ */
+function AgentPickerRoot({ agents, value, onValueChange, sections = [], onManage, onCreate, onOpenChange, inputStyle = false, invalid = false, isLoading = false, className, icons, children, }) {
+    const [open, setOpen] = React.useState(false);
+    const showSearch = totalAgentCount(agents, sections) > SEARCH_THRESHOLD;
+    const handleOpenChange = React.useCallback((nextOpen) => {
+        setOpen(nextOpen);
+        onOpenChange?.(nextOpen);
+    }, [onOpenChange]);
+    const handleSelect = React.useCallback((id) => {
+        handleOpenChange(false);
+        onValueChange?.(id);
+    }, [handleOpenChange, onValueChange]);
+    const handleManage = () => {
+        handleOpenChange(false);
+        onManage?.();
+    };
+    const handleCreate = () => {
+        handleOpenChange(false);
+        onCreate?.();
+    };
+    const context = {
+        value,
+        onSelect: handleSelect,
+        open,
+        setOpen: handleOpenChange,
+        icons,
+    };
+    return (React.createElement(AgentPickerContext.Provider, { value: context },
+        React.createElement(AgentDataContext.Provider, { value: { agents, sections } },
+            React.createElement(Popover, { open: open, onOpenChange: handleOpenChange }, children ?? (React.createElement(React.Fragment, null,
+                React.createElement(AgentPickerTrigger, { inputStyle: inputStyle, invalid: invalid, className: className }),
+                React.createElement(AgentPickerContent, { showSearch: showSearch },
+                    React.createElement(AgentPickerList, null,
+                        React.createElement(AgentPickerPresetBody, { agents: agents, value: value, sections: sections, onManage: onManage ? handleManage : undefined, onCreate: onCreate ? handleCreate : undefined, isLoading: isLoading, icons: icons })))))))));
+}
+AgentPickerRoot.displayName = "AgentPicker.Root";
+/**
+ * AgentPicker — render `<AgentPicker agents={...} .../>` for the default
+ * data-driven combobox, or compose `AgentPicker.Trigger` / `Content` / `List` /
+ * `Item` for a custom menu. Mirrors the `ToolCall` compound: render it, or
+ * compose it.
+ */
+export const AgentPicker = Object.assign(AgentPickerRoot, {
+    Root: AgentPickerRoot,
+    Trigger: AgentPickerTrigger,
+    Content: AgentPickerContent,
+    List: AgentPickerList,
+    Item: AgentPickerItem,
+});

package/esm/src/react/components/chat/chat/components/animations.js

@@ -8,7 +8,7 @@ export function Shimmer({ children }) {
 /** Render loader. */
 export function Loader({ className, size = 16, }) {
     const dotSize = size / 4;
-    return (React.createElement("div", { className: cn("flex items-center gap-1", className) }, ["0ms", "150ms", "300ms"].map((animationDelay) => (React.createElement("span", { key: animationDelay, className: "animate-bounce rounded-full bg-[var(--muted-foreground)]", style: { width: dotSize, height: dotSize, animationDelay } })))));
+    return (React.createElement("div", { className: cn("flex items-center gap-1", className) }, ["0ms", "150ms", "300ms"].map((animationDelay) => (React.createElement("span", { key: animationDelay, className: "animate-bounce rounded-full bg-[var(--faint)]", style: { width: dotSize, height: dotSize, animationDelay } })))));
 }
 /** Render fade in. */
 export function FadeIn({ children, duration = 300, className, }) {

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,
+});