@ciridae/ui-agent 0.3.0 → 0.3.5

package/README.md

@@ -16,4 +16,10 @@ Install with the base UI package:
 npm install @ciridae/ui @ciridae/ui-agent
 ```
 
-Import base theme CSS from @ciridae/ui before rendering agentic components.
+Import Tailwind and both package stylesheets from your global CSS entry:
+
+```css
+@import "tailwindcss";
+@import "@ciridae/ui/styles.css";
+@import "@ciridae/ui-agent/styles.css";
+```

package/dist/components/agentic/agent-card.d.ts

@@ -0,0 +1,28 @@
+import type * as React from "react";
+import { Accordion, AccordionItem } from "@ciridae/ui/accordion";
+type AgentProps = React.ComponentProps<"div">;
+type AgentHeaderProps = React.ComponentProps<"div"> & {
+    status?: string;
+};
+type AgentContentProps = React.ComponentProps<"div">;
+type AgentInstructionsProps = React.ComponentProps<"div">;
+type AgentToolsProps = Omit<React.ComponentProps<typeof Accordion>, "collapsible" | "defaultValue" | "onValueChange" | "type" | "value"> & {
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    value?: string;
+};
+type AgentToolProps = Omit<React.ComponentProps<typeof AccordionItem>, "value"> & {
+    description?: string;
+    name: string;
+    value?: string;
+};
+type AgentOutputProps = React.ComponentProps<"div">;
+declare function Agent({ className, ...props }: AgentProps): React.JSX.Element;
+declare function AgentHeader({ children, className, status, ...props }: AgentHeaderProps): React.JSX.Element;
+declare function AgentContent({ className, ...props }: AgentContentProps): React.JSX.Element;
+declare function AgentInstructions({ className, ...props }: AgentInstructionsProps): React.JSX.Element;
+declare function AgentTools(props: AgentToolsProps): React.JSX.Element;
+declare function AgentTool({ children, description, name, value, ...props }: AgentToolProps): React.JSX.Element;
+declare function AgentOutput({ className, ...props }: AgentOutputProps): React.JSX.Element;
+export { Agent, AgentContent, AgentHeader, AgentInstructions, AgentOutput, AgentTool, AgentTools };
+export type { AgentContentProps, AgentHeaderProps, AgentInstructionsProps, AgentOutputProps, AgentProps, AgentToolProps, AgentToolsProps, };

package/dist/components/agentic/agent-card.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BotIcon } from "lucide-react";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from "@ciridae/ui/accordion";
+import { Badge } from "@ciridae/ui/badge";
+import { cn } from "@ciridae/ui/utils";
+function Agent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "agent", className: cn("grid gap-3 rounded-lg border bg-card p-4", className), ...props }));
+}
+function AgentHeader({ children, className, status, ...props }) {
+    return (_jsxs("div", { "data-slot": "agent-header", className: cn("flex min-w-0 items-start justify-between gap-3", className), ...props, children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx(BotIcon, { "aria-hidden": "true", className: "size-4 shrink-0 text-muted-foreground" }), _jsx("div", { className: "min-w-0", children: children })] }), status ? _jsx(Badge, { variant: "outline", children: status }) : null] }));
+}
+function AgentContent({ className, ...props }) {
+    return _jsx("div", { "data-slot": "agent-content", className: cn("grid gap-3", className), ...props });
+}
+function AgentInstructions({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "agent-instructions", className: cn("rounded-md bg-muted/40 p-3 text-sm text-muted-foreground", className), ...props }));
+}
+function AgentTools(props) {
+    return _jsx(Accordion, { "data-slot": "agent-tools", type: "single", collapsible: true, ...props });
+}
+function AgentTool({ children, description, name, value, ...props }) {
+    return (_jsxs(AccordionItem, { "data-slot": "agent-tool", value: value ?? name, ...props, children: [_jsx(AccordionTrigger, { children: name }), _jsxs(AccordionContent, { children: [description ? _jsx("p", { className: "mb-2 text-sm text-muted-foreground", children: description }) : null, children] })] }));
+}
+function AgentOutput({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "agent-output", className: cn("rounded-md border bg-muted/30 p-3 text-sm", className), ...props }));
+}
+export { Agent, AgentContent, AgentHeader, AgentInstructions, AgentOutput, AgentTool, AgentTools };

package/dist/components/agentic/agent-composer.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+import { type AgenticAttachment, type AttachmentError } from "@ciridae/ui-agent/attachments";
+import { type EffortSelectorValue } from "@ciridae/ui-agent/effort-selector";
+import { type PromptInputMessage } from "@ciridae/ui-agent/prompt-input";
+import type { AgenticChatStatus } from "@ciridae/ui-agent/types";
+type AgentComposerModel = {
+    description?: string;
+    group?: string;
+    id: string;
+    label: string;
+    provider: string;
+    shortcut?: string;
+    src?: string;
+};
+type AgentComposerProps = Omit<React.ComponentProps<"div">, "onSubmit"> & {
+    accept?: string;
+    attachments?: AgenticAttachment[];
+    defaultAttachments?: AgenticAttachment[];
+    defaultValue?: string;
+    disabled?: boolean;
+    effort: EffortSelectorValue;
+    focusHint?: React.ReactNode;
+    globalDrop?: boolean;
+    maxAttachmentSizeMb?: number;
+    maxAttachments?: number;
+    model: string;
+    models: AgentComposerModel[];
+    multiple?: boolean;
+    onAttachmentError?: (error: AttachmentError) => void;
+    onAttachmentsChange?: (attachments: AgenticAttachment[]) => void;
+    onEffortChange: (value: EffortSelectorValue) => void;
+    onModelChange: (modelId: string) => void;
+    onStop?: () => void;
+    onSubmit?: (message: PromptInputMessage) => void | Promise<void>;
+    onValueChange?: (value: string) => void;
+    placeholder?: string;
+    status?: AgenticChatStatus;
+    value?: string;
+};
+declare function AgentComposer({ accept, attachments, className, defaultAttachments, defaultValue, disabled, effort, focusHint, globalDrop, maxAttachmentSizeMb, maxAttachments, model, models, multiple, onAttachmentError, onAttachmentsChange, onEffortChange, onModelChange, onStop, onSubmit, onValueChange, placeholder, status, value, ...props }: AgentComposerProps): React.JSX.Element;
+export { AgentComposer };
+export type { AgentComposerModel, AgentComposerProps };

package/dist/components/agentic/agent-composer.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* eslint-disable max-lines, max-lines-per-function, react/jsx-max-depth */
+import { CheckIcon, ChevronsUpDownIcon } from "lucide-react";
+import * as React from "react";
+import { AttachmentList, useAttachments, } from "@ciridae/ui-agent/attachments";
+import { EffortSelector } from "@ciridae/ui-agent/effort-selector";
+import { ModelSelector, ModelSelectorContent, ModelSelectorEmpty, ModelSelectorGroup, ModelSelectorInput, ModelSelectorItem, ModelSelectorList, ModelSelectorLogo, ModelSelectorName, ModelSelectorShortcut, ModelSelectorTrigger, } from "@ciridae/ui-agent/model-selector";
+import { PromptInput, PromptInputActionAddAttachments, PromptInputBody, PromptInputProvider, PromptInputSubmit, PromptInputTextarea, PromptInputTools, } from "@ciridae/ui-agent/prompt-input";
+import { Button } from "@ciridae/ui/button";
+import { cn } from "@ciridae/ui/utils";
+function AgentComposer({ accept, attachments, className, defaultAttachments, defaultValue, disabled, effort, focusHint, globalDrop, maxAttachmentSizeMb = 25, maxAttachments = 4, model, models, multiple = true, onAttachmentError, onAttachmentsChange, onEffortChange, onModelChange, onStop, onSubmit, onValueChange, placeholder = "Ask anything", status = "idle", value, ...props }) {
+    const containerRef = React.useRef(null);
+    const [localValue, setLocalValue] = React.useState(defaultValue ?? "");
+    const resolvedValue = value ?? localValue;
+    const dropHandlers = useAgentComposerDropHandlers();
+    const selectedModel = getSelectedModel(models, model);
+    const hasInput = resolvedValue.length > 0;
+    const isRunning = status === "submitted" || status === "streaming";
+    useComposerFocusShortcut(containerRef);
+    return (_jsx("div", { ref: containerRef, className: cn("w-full", className), ...props, children: _jsx(PromptInputProvider, { accept: accept, attachments: attachments, defaultAttachments: defaultAttachments, maxAttachmentSizeMb: maxAttachmentSizeMb, maxAttachments: maxAttachments, multiple: multiple, onAttachmentError: onAttachmentError, onAttachmentsChange: onAttachmentsChange, onValueChange: (nextValue) => {
+                if (value === undefined)
+                    setLocalValue(nextValue);
+                onValueChange?.(nextValue);
+            }, value: resolvedValue, children: _jsx(PromptInput, { disabled: disabled, globalDrop: globalDrop, maxAttachments: maxAttachments, onSubmit: onSubmit, status: status, ...dropHandlers, children: _jsxs(PromptInputBody, { className: "min-h-0!", children: [_jsx(AgentComposerPromptArea, { focusHint: focusHint, hasInput: hasInput, placeholder: placeholder }), _jsxs(PromptInputTools, { children: [_jsxs("div", { className: "flex min-w-0 items-center gap-1", children: [_jsx(AgentComposerModelSelector, { disabled: disabled || isRunning, model: selectedModel, models: models, onModelChange: onModelChange }), _jsx(EffortSelector, { disabled: disabled || isRunning, value: effort, onValueChange: onEffortChange })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(PromptInputActionAddAttachments, { disabled: disabled || isRunning, tooltip: "Add files" }), _jsx(PromptInputSubmit, { disabled: disabled, onStop: onStop, status: status })] })] })] }) }) }) }));
+}
+function AgentComposerPromptArea({ focusHint, hasInput, placeholder, }) {
+    const attachments = useAttachments();
+    const hasAttachments = attachments.files.length > 0;
+    const isExpanded = hasAttachments || hasInput;
+    const showFocusHint = !hasAttachments && !hasInput;
+    return (_jsxs("div", { "data-expanded": isExpanded ? "true" : undefined, className: cn("grid min-w-0 content-start px-3", isExpanded ? "gap-2 py-2.5" : "py-1.5"), children: [hasAttachments ? (_jsx(AttachmentList, { className: cn("w-full max-w-full flex-nowrap! overflow-x-auto pb-0.5", "[&_[data-slot=attachment]]:h-[1.375rem] [&_[data-slot=attachment]]:max-w-full [&_[data-slot=attachment]]:gap-1 [&_[data-slot=attachment]]:rounded-[0.25rem] [&_[data-slot=attachment]]:px-1 [&_[data-slot=attachment]]:pr-1.5", "[&_[data-slot=attachment-info]]:gap-0 [&_[data-slot=attachment-info]>span]:text-[0.75rem] [&_[data-slot=attachment-info]>span]:leading-none", "[&_[data-slot=attachment-preview]]:size-4 [&_[data-slot=attachment-status]]:size-3.5") })) : null, _jsxs("div", { className: "flex min-w-0 items-center justify-between gap-2", children: [_jsx(PromptInputTextarea, { placeholder: placeholder, rows: isExpanded ? 2 : 1, className: cn("field-sizing-content! !w-full !px-0 !py-0 text-base leading-6 md:text-sm", isExpanded ? "max-h-36 !min-h-12" : "max-h-6 !min-h-6") }), showFocusHint ? (_jsx("div", { "aria-hidden": "true", "data-slot": "agent-composer-focus-hint", className: "pointer-events-none flex shrink-0 items-center gap-1 px-1.5 py-0.5 text-xs text-muted-foreground/70 transition-opacity group-focus-within/prompt-input:opacity-0", children: focusHint ?? (_jsxs(_Fragment, { children: [_jsx("kbd", { className: "font-sans", children: "\u2318L" }), _jsx("span", { children: "to focus" })] })) })) : null] })] }));
+}
+function AgentComposerModelSelector({ disabled, model, models, onModelChange, }) {
+    return (_jsxs(ModelSelector, { children: [_jsx(ModelSelectorTrigger, { asChild: true, children: _jsxs(Button, { className: "h-7 max-w-44 justify-start gap-1.5 rounded-md px-1.5 text-xs", disabled: disabled, type: "button", variant: "ghost", children: [_jsx(ModelSelectorLogo, { provider: model.provider, src: model.src }), _jsx(ModelSelectorName, { className: "max-w-32 flex-none", children: model.label }), _jsx(ChevronsUpDownIcon, { className: "size-3.5 shrink-0 text-muted-foreground" })] }) }), _jsxs(ModelSelectorContent, { title: "Select model", children: [_jsx(ModelSelectorInput, { placeholder: "Search models..." }), _jsxs(ModelSelectorList, { children: [_jsx(ModelSelectorEmpty, { children: "No models found." }), groupModels(models).map(([group, groupModels]) => (_jsx(ModelSelectorGroup, { heading: group, children: groupModels.map((option) => (_jsxs(ModelSelectorItem, { value: `${option.label} ${option.id} ${option.provider}`, onSelect: () => onModelChange(option.id), children: [_jsx(ModelSelectorLogo, { className: "size-8 rounded-md p-1", provider: option.provider, src: option.src }), _jsxs(ModelSelectorName, { children: [_jsx("span", { className: "block truncate", children: option.label }), option.description ? (_jsx("span", { className: "block truncate text-xs text-muted-foreground", children: option.description })) : null] }), option.shortcut ? (_jsx(ModelSelectorShortcut, { children: option.shortcut })) : null, model.id === option.id ? _jsx(CheckIcon, {}) : null] }, option.id))) }, group)))] })] })] }));
+}
+function useComposerFocusShortcut(containerRef) {
+    React.useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (!(event.metaKey || event.ctrlKey) || event.key.toLowerCase() !== "l")
+                return;
+            const textarea = containerRef.current?.querySelector('[data-slot="prompt-input-textarea"]');
+            if (!textarea)
+                return;
+            event.preventDefault();
+            textarea.focus();
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [containerRef]);
+}
+function useAgentComposerDropHandlers() {
+    const [dragDepth, setDragDepth] = React.useState(0);
+    const handleDragEnter = React.useCallback((event) => {
+        if (!event.dataTransfer.types.includes("Files"))
+            return;
+        setDragDepth((depth) => depth + 1);
+    }, []);
+    const handleDragLeave = React.useCallback((event) => {
+        if (!event.dataTransfer.types.includes("Files"))
+            return;
+        setDragDepth((depth) => Math.max(0, depth - 1));
+    }, []);
+    const handleDrop = React.useCallback(() => setDragDepth(0), []);
+    const handleDragEnd = React.useCallback(() => setDragDepth(0), []);
+    return React.useMemo(() => ({
+        "data-drag-over": dragDepth > 0 ? "true" : undefined,
+        onDragEnd: handleDragEnd,
+        onDragEnter: handleDragEnter,
+        onDragLeave: handleDragLeave,
+        onDrop: handleDrop,
+    }), [dragDepth, handleDragEnd, handleDragEnter, handleDragLeave, handleDrop]);
+}
+function getSelectedModel(models, modelId) {
+    return models.find((model) => model.id === modelId) ?? models[0] ?? fallbackModel;
+}
+function groupModels(models) {
+    const groups = new Map();
+    for (const model of models) {
+        const group = model.group ?? "Models";
+        groups.set(group, [...(groups.get(group) ?? []), model]);
+    }
+    return Array.from(groups.entries());
+}
+const fallbackModel = {
+    id: "model",
+    label: "Model",
+    provider: "openai",
+};
+export { AgentComposer };

package/dist/components/agentic/agent-context.d.ts

@@ -0,0 +1,28 @@
+import type * as React from "react";
+import type { AgenticContextUsage } from "@ciridae/ui-agent/types";
+import { Button } from "@ciridae/ui/button";
+import { HoverCard, HoverCardContent } from "@ciridae/ui/hover-card";
+type AgentContextProps = React.ComponentProps<typeof HoverCard> & AgenticContextUsage;
+type AgentContextTriggerProps = React.ComponentProps<typeof Button>;
+type AgentContextContentProps = React.ComponentProps<typeof HoverCardContent>;
+type AgentContextContentHeaderProps = React.ComponentProps<"div">;
+type AgentContextContentBodyProps = React.ComponentProps<"div">;
+type AgentContextContentFooterProps = React.ComponentProps<"div">;
+type AgentContextUsageRowProps = React.ComponentProps<"div"> & {
+    costText?: string;
+    label: string;
+    tokens?: number;
+};
+declare function AgentContext({ cacheCostText, cachedInputTokens, children, inputCostText, inputTokens, maxTokens, outputCostText, outputTokens, reasoningCostText, reasoningTokens, totalCostText, usedTokens, ...props }: AgentContextProps): React.JSX.Element;
+declare function AgentContextTrigger({ children, ...props }: AgentContextTriggerProps): React.JSX.Element;
+declare function AgentContextContent({ className, ...props }: AgentContextContentProps): React.JSX.Element;
+declare function AgentContextContentHeader({ children, className, ...props }: AgentContextContentHeaderProps): React.JSX.Element;
+declare function AgentContextContentBody({ className, ...props }: AgentContextContentBodyProps): React.JSX.Element;
+declare function AgentContextContentFooter({ children, className, ...props }: AgentContextContentFooterProps): React.JSX.Element;
+declare function AgentContextUsageRow({ className, costText, label, tokens, ...props }: AgentContextUsageRowProps): React.JSX.Element | null;
+declare function AgentContextInputUsage(props: Omit<AgentContextUsageRowProps, "label" | "tokens">): React.JSX.Element;
+declare function AgentContextOutputUsage(props: Omit<AgentContextUsageRowProps, "label" | "tokens">): React.JSX.Element;
+declare function AgentContextReasoningUsage(props: Omit<AgentContextUsageRowProps, "label" | "tokens">): React.JSX.Element;
+declare function AgentContextCacheUsage(props: Omit<AgentContextUsageRowProps, "label" | "tokens">): React.JSX.Element;
+export { AgentContext, AgentContextCacheUsage, AgentContextContent, AgentContextContentBody, AgentContextContentFooter, AgentContextContentHeader, AgentContextInputUsage, AgentContextOutputUsage, AgentContextReasoningUsage, AgentContextTrigger, AgentContextUsageRow, };
+export type { AgentContextContentBodyProps, AgentContextContentFooterProps, AgentContextContentHeaderProps, AgentContextContentProps, AgentContextProps, AgentContextTriggerProps, AgentContextUsageRowProps, };

package/dist/components/agentic/agent-context.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from "react";
+import { Button } from "@ciridae/ui/button";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "@ciridae/ui/hover-card";
+import { Progress } from "@ciridae/ui/progress";
+import { cn } from "@ciridae/ui/utils";
+const PERCENT_MAX = 100;
+const AgentContextContext = createContext(null);
+function useAgentContext() {
+    const context = useContext(AgentContextContext);
+    if (!context)
+        throw new Error("AgentContext components must be used within AgentContext");
+    return context;
+}
+function AgentContext({ cacheCostText, cachedInputTokens, children, inputCostText, inputTokens, maxTokens, outputCostText, outputTokens, reasoningCostText, reasoningTokens, totalCostText, usedTokens, ...props }) {
+    const { closeDelay = 0, openDelay = 0, ...hoverCardProps } = props;
+    const contextValue = useMemo(() => ({
+        cacheCostText,
+        cachedInputTokens,
+        inputCostText,
+        inputTokens,
+        maxTokens,
+        outputCostText,
+        outputTokens,
+        reasoningCostText,
+        reasoningTokens,
+        totalCostText,
+        usedTokens,
+    }), [
+        cacheCostText,
+        cachedInputTokens,
+        inputCostText,
+        inputTokens,
+        maxTokens,
+        outputCostText,
+        outputTokens,
+        reasoningCostText,
+        reasoningTokens,
+        totalCostText,
+        usedTokens,
+    ]);
+    return (_jsx(AgentContextContext.Provider, { value: contextValue, children: _jsx(HoverCard, { closeDelay: closeDelay, openDelay: openDelay, ...hoverCardProps, children: children }) }));
+}
+function AgentContextTrigger({ children, ...props }) {
+    const { maxTokens, usedTokens } = useAgentContext();
+    const usedPercent = getUsagePercent(usedTokens, maxTokens);
+    return (_jsx(HoverCardTrigger, { asChild: true, children: children ? (_jsx(Button, { "data-slot": "agent-context-trigger", type: "button", variant: "ghost", ...props, asChild: true, children: children })) : (_jsxs(Button, { "data-slot": "agent-context-trigger", type: "button", variant: "ghost", ...props, children: [_jsx("span", { className: "font-medium text-muted-foreground", children: formatPercent(usedPercent) }), _jsx(AgentContextIcon, { usedPercent: usedPercent })] })) }));
+}
+function AgentContextIcon({ usedPercent }) {
+    const radius = 10;
+    const circumference = 2 * Math.PI * radius;
+    const dashOffset = circumference * (1 - usedPercent);
+    return (_jsxs("svg", { "aria-label": "Context usage", className: "size-5", role: "img", viewBox: "0 0 24 24", children: [_jsx("circle", { cx: "12", cy: "12", fill: "none", opacity: "0.25", r: radius, stroke: "currentColor", strokeWidth: "2" }), _jsx("circle", { cx: "12", cy: "12", fill: "none", opacity: "0.75", r: radius, stroke: "currentColor", strokeDasharray: `${circumference} ${circumference}`, strokeDashoffset: dashOffset, strokeLinecap: "round", strokeWidth: "2", style: { transform: "rotate(-90deg)", transformOrigin: "center" } })] }));
+}
+function AgentContextContent({ className, ...props }) {
+    return (_jsx(HoverCardContent, { "data-slot": "agent-context-content", className: cn("w-72 divide-y overflow-hidden p-0", className), ...props }));
+}
+function AgentContextContentHeader({ children, className, ...props }) {
+    const { maxTokens, usedTokens } = useAgentContext();
+    const usedPercent = getUsagePercent(usedTokens, maxTokens);
+    return (_jsx("div", { "data-slot": "agent-context-content-header", className: cn("grid gap-2 p-3", className), ...props, children: children ?? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center justify-between gap-3 text-xs", children: [_jsx("span", { children: formatPercent(usedPercent) }), _jsxs("span", { className: "font-mono text-muted-foreground", children: [formatCompact(usedTokens), " / ", formatCompact(maxTokens)] })] }), _jsx(Progress, { value: usedPercent * PERCENT_MAX })] })) }));
+}
+function AgentContextContentBody({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "agent-context-content-body", className: cn("grid gap-2 p-3", className), ...props }));
+}
+function AgentContextContentFooter({ children, className, ...props }) {
+    const { totalCostText } = useAgentContext();
+    return (_jsx("div", { "data-slot": "agent-context-content-footer", className: cn("flex items-center justify-between gap-3 bg-secondary p-3 text-xs", className), ...props, children: children ?? (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-muted-foreground", children: "Total cost" }), _jsx("span", { children: totalCostText ?? "Provided by host" })] })) }));
+}
+function AgentContextUsageRow({ className, costText, label, tokens, ...props }) {
+    if (tokens === undefined)
+        return null;
+    return (_jsxs("div", { "data-slot": "agent-context-usage-row", className: cn("flex items-center justify-between gap-3 text-xs", className), ...props, children: [_jsx("span", { className: "text-muted-foreground", children: label }), _jsxs("span", { className: "font-mono", children: [formatCompact(tokens), costText ? _jsx("span", { className: "ml-2 font-sans text-muted-foreground", children: costText }) : null] })] }));
+}
+function AgentContextInputUsage(props) {
+    const { inputCostText, inputTokens } = useAgentContext();
+    return (_jsx(AgentContextUsageRow, { costText: inputCostText, label: "Input", tokens: inputTokens, ...props }));
+}
+function AgentContextOutputUsage(props) {
+    const { outputCostText, outputTokens } = useAgentContext();
+    return (_jsx(AgentContextUsageRow, { costText: outputCostText, label: "Output", tokens: outputTokens, ...props }));
+}
+function AgentContextReasoningUsage(props) {
+    const { reasoningCostText, reasoningTokens } = useAgentContext();
+    return (_jsx(AgentContextUsageRow, { costText: reasoningCostText, label: "Reasoning", tokens: reasoningTokens, ...props }));
+}
+function AgentContextCacheUsage(props) {
+    const { cacheCostText, cachedInputTokens } = useAgentContext();
+    return (_jsx(AgentContextUsageRow, { costText: cacheCostText, label: "Cache", tokens: cachedInputTokens, ...props }));
+}
+function getUsagePercent(usedTokens, maxTokens) {
+    if (maxTokens <= 0)
+        return 0;
+    return Math.min(1, Math.max(0, usedTokens / maxTokens));
+}
+function formatPercent(value) {
+    return new Intl.NumberFormat("en-US", { maximumFractionDigits: 1, style: "percent" }).format(value);
+}
+function formatCompact(value) {
+    return new Intl.NumberFormat("en-US", { notation: "compact" }).format(value);
+}
+export { AgentContext, AgentContextCacheUsage, AgentContextContent, AgentContextContentBody, AgentContextContentFooter, AgentContextContentHeader, AgentContextInputUsage, AgentContextOutputUsage, AgentContextReasoningUsage, AgentContextTrigger, AgentContextUsageRow, };

package/dist/components/agentic/agent-queue.js

@@ -39,7 +39,7 @@ function AgentQueueItemActions({ className, ...props }) {
     return (_jsx("div", { "data-slot": "agent-queue-item-actions", className: cn("flex gap-1", className), ...props }));
 }
 function AgentQueueItemAction({ className, type = "button", ...props }) {
-    return (_jsx(Button, { className: cn("size-7 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100", className), size: "icon-sm", type: type, variant: "ghost", ...props }));
+    return (_jsx(Button, { className: cn("size-7 opacity-0 group-focus-within:opacity-100 group-hover:opacity-100 focus-visible:opacity-100", className), size: "icon-sm", type: type, variant: "ghost", ...props }));
 }
 function AgentQueueItemAttachment({ className, ...props }) {
     return (_jsx("div", { "data-slot": "agent-queue-item-attachment", className: cn("ml-6 flex flex-wrap gap-2", className), ...props }));

package/dist/components/agentic/artifact.js

@@ -25,11 +25,11 @@ const artifactHeaderClassName = css({
     borderBottomStyle: "solid",
     borderBottomWidth: "default",
     display: "flex",
-    gap: "gap.3",
+    gap: "3",
     justifyContent: "space-between",
     minWidth: 0,
-    paddingBlock: "spacing.3",
-    paddingInline: "spacing.4",
+    paddingBlock: "3",
+    paddingInline: "4",
 });
 const artifactTitleClassName = css({
     fontSize: "sm",
@@ -52,7 +52,7 @@ const artifactContentClassName = css({
     flex: 1,
     minHeight: 0,
     overflow: "auto",
-    padding: "spacing.4",
+    padding: "4",
 });
 function Artifact({ className, ...props }) {
     return _jsx("div", { "data-slot": "artifact", className: cn(artifactClassName, className), ...props });

package/dist/components/agentic/assistant-mark-icon.d.ts

@@ -0,0 +1,9 @@
+import type { AriaAttributes, ComponentProps } from "react";
+type AssistantMarkIconProps = Omit<ComponentProps<"svg">, "children" | "dangerouslySetInnerHTML" | "role" | keyof AriaAttributes>;
+/**
+ * The path data is frozen from the Ciridae constellation mark. Regenerate it
+ * from the design source rather than hand-editing individual points.
+ */
+declare function AssistantMarkIcon({ className, ...props }: AssistantMarkIconProps): import("react").JSX.Element;
+export { AssistantMarkIcon };
+export type { AssistantMarkIconProps };

package/dist/components/agentic/assistant-mark-icon.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { cn } from "@ciridae/ui/utils";
+/**
+ * The path data is frozen from the Ciridae constellation mark. Regenerate it
+ * from the design source rather than hand-editing individual points.
+ */
+function AssistantMarkIcon({ className, ...props }) {
+    const gradientId = `assistant-mark-${useId().replace(/:/g, "")}`;
+    return (_jsxs("svg", { ...props, "aria-hidden": "true", className: cn("size-4 shrink-0", className), "data-slot": "assistant-mark-icon", viewBox: "0 0 24 24", children: [_jsx("defs", { children: _jsxs("linearGradient", { id: gradientId, x1: "0", x2: "1", y1: "0", y2: "1", children: [_jsx("stop", { offset: "0", stopColor: "var(--assistant-mark-foreground, var(--muted-foreground))" }), _jsx("stop", { offset: "1", stopColor: "var(--assistant-mark-foreground-accent, var(--foreground))" })] }) }), _jsx("rect", { fill: "var(--assistant-mark-surface, var(--background))", height: "22.5", rx: "5.25", stroke: "var(--assistant-mark-surface-border, var(--border))", strokeWidth: "0.7", width: "22.5", x: "0.75", y: "0.75" }), _jsxs("g", { fill: `url(#${gradientId})`, children: [_jsx("path", { d: "M10.56 5.10 L 10.73 4.88 L 10.88 4.66 L 11.03 4.44 L 11.17 4.22 L 11.29 4.01 L 11.41 3.79 L 11.52 3.57 L 11.61 3.35 L 11.70 3.13 L 11.78 2.91 L 11.84 2.69 L 11.90 2.47 L 11.94 2.26 L 11.97 2.04 L 11.99 1.82 L 12.00 1.60 L 12.00 1.60 L 12.01 1.82 L 12.03 2.04 L 12.06 2.26 L 12.10 2.47 L 12.16 2.69 L 12.22 2.91 L 12.30 3.13 L 12.39 3.35 L 12.48 3.57 L 12.59 3.79 L 12.71 4.01 L 12.83 4.22 L 12.97 4.44 L 13.12 4.66 L 13.27 4.88 L 13.44 5.10 Z" }), _jsx("path", { d: "M12.50 4.16 L 12.74 4.33 L 12.99 4.48 L 13.23 4.63 L 13.47 4.77 L 13.72 4.89 L 13.96 5.01 L 14.21 5.12 L 14.45 5.21 L 14.69 5.30 L 14.94 5.38 L 15.18 5.44 L 15.42 5.50 L 15.67 5.54 L 15.91 5.57 L 16.16 5.59 L 16.40 5.60 L 16.40 5.60 L 16.16 5.61 L 15.91 5.63 L 15.67 5.66 L 15.42 5.70 L 15.18 5.76 L 14.94 5.82 L 14.69 5.90 L 14.45 5.99 L 14.21 6.08 L 13.96 6.19 L 13.72 6.31 L 13.47 6.43 L 13.23 6.57 L 12.99 6.72 L 12.74 6.87 L 12.50 7.04 Z" }), _jsx("path", { d: "M13.44 6.10 L 13.27 6.33 L 13.12 6.56 L 12.97 6.79 L 12.83 7.03 L 12.71 7.26 L 12.59 7.49 L 12.48 7.72 L 12.39 7.95 L 12.30 8.18 L 12.22 8.41 L 12.16 8.64 L 12.10 8.88 L 12.06 9.11 L 12.03 9.34 L 12.01 9.57 L 12.00 9.80 L 12.00 9.80 L 11.99 9.57 L 11.97 9.34 L 11.94 9.11 L 11.90 8.88 L 11.84 8.64 L 11.78 8.41 L 11.70 8.18 L 11.61 7.95 L 11.52 7.72 L 11.41 7.49 L 11.29 7.26 L 11.17 7.03 L 11.03 6.79 L 10.88 6.56 L 10.73 6.33 L 10.56 6.10 Z" }), _jsx("path", { d: "M11.50 7.04 L 11.26 6.87 L 11.01 6.72 L 10.77 6.57 L 10.53 6.43 L 10.28 6.31 L 10.04 6.19 L 9.79 6.08 L 9.55 5.99 L 9.31 5.90 L 9.06 5.82 L 8.82 5.76 L 8.57 5.70 L 8.33 5.66 L 8.09 5.63 L 7.84 5.61 L 7.60 5.60 L 7.60 5.60 L 7.84 5.59 L 8.09 5.57 L 8.33 5.54 L 8.57 5.50 L 8.82 5.44 L 9.06 5.38 L 9.31 5.30 L 9.55 5.21 L 9.79 5.12 L 10.04 5.01 L 10.28 4.89 L 10.53 4.77 L 10.77 4.63 L 11.01 4.48 L 11.26 4.33 L 11.50 4.16 Z" }), _jsx("path", { d: "M4.64 11.20 L 4.87 11.07 L 5.09 10.94 L 5.31 10.80 L 5.52 10.66 L 5.72 10.51 L 5.91 10.36 L 6.09 10.20 L 6.27 10.04 L 6.44 9.88 L 6.60 9.71 L 6.75 9.53 L 6.90 9.36 L 7.04 9.17 L 7.16 8.99 L 7.29 8.80 L 7.40 8.60 L 7.40 8.60 L 7.29 8.80 L 7.20 9.00 L 7.11 9.21 L 7.02 9.43 L 6.95 9.64 L 6.88 9.86 L 6.82 10.09 L 6.77 10.32 L 6.73 10.56 L 6.69 10.79 L 6.67 11.04 L 6.65 11.29 L 6.64 11.54 L 6.63 11.80 L 6.64 12.06 L 6.65 12.32 Z" }), _jsx("path", { d: "M4.47 13.04 L 4.29 12.81 L 4.11 12.58 L 3.93 12.37 L 3.74 12.16 L 3.55 11.96 L 3.36 11.77 L 3.16 11.58 L 2.95 11.41 L 2.75 11.24 L 2.54 11.08 L 2.32 10.93 L 2.11 10.79 L 1.89 10.65 L 1.66 10.53 L 1.43 10.41 L 1.20 10.30 L 1.20 10.30 L 1.44 10.40 L 1.68 10.50 L 1.92 10.58 L 2.17 10.66 L 2.42 10.73 L 2.67 10.79 L 2.93 10.84 L 3.19 10.89 L 3.46 10.92 L 3.73 10.95 L 4.00 10.97 L 4.27 10.98 L 4.56 10.98 L 4.84 10.98 L 5.13 10.97 L 5.42 10.95 Z" }), _jsx("path", { d: "M5.86 13.37 L 5.58 13.45 L 5.31 13.53 L 5.05 13.62 L 4.79 13.72 L 4.54 13.83 L 4.30 13.94 L 4.06 14.06 L 3.83 14.18 L 3.60 14.31 L 3.38 14.45 L 3.17 14.59 L 2.96 14.74 L 2.76 14.89 L 2.57 15.06 L 2.38 15.23 L 2.20 15.40 L 2.20 15.40 L 2.37 15.22 L 2.54 15.03 L 2.71 14.84 L 2.86 14.64 L 3.01 14.43 L 3.15 14.22 L 3.29 14.00 L 3.42 13.77 L 3.54 13.54 L 3.66 13.30 L 3.77 13.06 L 3.88 12.81 L 3.98 12.55 L 4.07 12.29 L 4.15 12.02 L 4.23 11.74 Z" }), _jsx("path", { d: "M17.35 12.32 L 17.36 12.06 L 17.37 11.80 L 17.36 11.54 L 17.35 11.29 L 17.33 11.04 L 17.31 10.79 L 17.27 10.56 L 17.23 10.32 L 17.18 10.09 L 17.12 9.86 L 17.05 9.64 L 16.98 9.43 L 16.89 9.21 L 16.80 9.00 L 16.71 8.80 L 16.60 8.60 L 16.60 8.60 L 16.71 8.80 L 16.84 8.99 L 16.96 9.17 L 17.10 9.36 L 17.25 9.53 L 17.40 9.71 L 17.56 9.88 L 17.73 10.04 L 17.91 10.20 L 18.09 10.36 L 18.28 10.51 L 18.48 10.66 L 18.69 10.80 L 18.91 10.94 L 19.13 11.07 L 19.36 11.20 Z" }), _jsx("path", { d: "M18.58 10.95 L 18.87 10.97 L 19.16 10.98 L 19.44 10.98 L 19.73 10.98 L 20.00 10.97 L 20.27 10.95 L 20.54 10.92 L 20.81 10.89 L 21.07 10.84 L 21.33 10.79 L 21.58 10.73 L 21.83 10.66 L 22.08 10.58 L 22.32 10.50 L 22.56 10.40 L 22.80 10.30 L 22.80 10.30 L 22.57 10.41 L 22.34 10.53 L 22.11 10.65 L 21.89 10.79 L 21.68 10.93 L 21.46 11.08 L 21.25 11.24 L 21.05 11.41 L 20.84 11.58 L 20.64 11.77 L 20.45 11.96 L 20.26 12.16 L 20.07 12.37 L 19.89 12.58 L 19.71 12.81 L 19.53 13.04 Z" }), _jsx("path", { d: "M19.77 11.74 L 19.85 12.02 L 19.93 12.29 L 20.02 12.55 L 20.12 12.81 L 20.23 13.06 L 20.34 13.30 L 20.46 13.54 L 20.58 13.77 L 20.71 14.00 L 20.85 14.22 L 20.99 14.43 L 21.14 14.64 L 21.29 14.84 L 21.46 15.03 L 21.63 15.22 L 21.80 15.40 L 21.80 15.40 L 21.62 15.23 L 21.43 15.06 L 21.24 14.89 L 21.04 14.74 L 20.83 14.59 L 20.62 14.45 L 20.40 14.31 L 20.17 14.18 L 19.94 14.06 L 19.70 13.94 L 19.46 13.83 L 19.21 13.72 L 18.95 13.62 L 18.69 13.53 L 18.42 13.45 L 18.14 13.37 Z" }), _jsx("path", { d: "M13.15 15.90 L 13.01 16.14 L 12.88 16.39 L 12.76 16.63 L 12.65 16.88 L 12.54 17.12 L 12.45 17.36 L 12.36 17.61 L 12.29 17.85 L 12.22 18.09 L 12.16 18.34 L 12.11 18.58 L 12.07 18.82 L 12.04 19.07 L 12.02 19.31 L 12.00 19.56 L 12.00 19.80 L 12.00 19.80 L 12.00 19.56 L 11.98 19.31 L 11.96 19.07 L 11.93 18.82 L 11.89 18.58 L 11.84 18.34 L 11.78 18.09 L 11.71 17.85 L 11.64 17.61 L 11.55 17.36 L 11.46 17.12 L 11.35 16.88 L 11.24 16.63 L 11.12 16.39 L 10.99 16.14 L 10.85 15.90 Z" }), _jsx("path", { d: "M6.35 11.38 L 6.49 11.60 L 6.62 11.81 L 6.77 12.02 L 6.91 12.21 L 7.06 12.40 L 7.21 12.58 L 7.37 12.75 L 7.53 12.91 L 7.70 13.07 L 7.87 13.22 L 8.04 13.36 L 8.22 13.49 L 8.40 13.61 L 8.58 13.72 L 8.77 13.83 L 8.96 13.93 L 8.96 13.93 L 8.77 13.84 L 8.57 13.76 L 8.36 13.68 L 8.15 13.62 L 7.94 13.56 L 7.73 13.51 L 7.51 13.47 L 7.28 13.43 L 7.05 13.41 L 6.82 13.39 L 6.59 13.38 L 6.35 13.38 L 6.10 13.38 L 5.86 13.40 L 5.60 13.42 L 5.35 13.45 Z" }), _jsx("path", { d: "M11.05 16.22 L 10.91 16.00 L 10.78 15.79 L 10.63 15.58 L 10.49 15.39 L 10.34 15.20 L 10.19 15.02 L 10.03 14.85 L 9.87 14.69 L 9.70 14.53 L 9.53 14.38 L 9.36 14.24 L 9.18 14.11 L 9.00 13.99 L 8.82 13.88 L 8.63 13.77 L 8.44 13.67 L 8.44 13.67 L 8.63 13.76 L 8.83 13.84 L 9.04 13.92 L 9.25 13.98 L 9.46 14.04 L 9.67 14.09 L 9.89 14.13 L 10.12 14.17 L 10.35 14.19 L 10.58 14.21 L 10.81 14.22 L 11.05 14.22 L 11.30 14.22 L 11.54 14.20 L 11.80 14.18 L 12.05 14.15 Z" }), _jsx("path", { d: "M18.65 13.45 L 18.40 13.42 L 18.14 13.40 L 17.90 13.38 L 17.65 13.38 L 17.41 13.38 L 17.18 13.39 L 16.95 13.41 L 16.72 13.43 L 16.49 13.47 L 16.27 13.51 L 16.06 13.56 L 15.85 13.62 L 15.64 13.68 L 15.43 13.76 L 15.23 13.84 L 15.04 13.93 L 15.04 13.93 L 15.23 13.83 L 15.42 13.72 L 15.60 13.61 L 15.78 13.49 L 15.96 13.36 L 16.13 13.22 L 16.30 13.07 L 16.47 12.91 L 16.63 12.75 L 16.79 12.58 L 16.94 12.40 L 17.09 12.21 L 17.23 12.02 L 17.38 11.81 L 17.51 11.60 L 17.65 11.38 Z" }), _jsx("path", { d: "M11.95 14.15 L 12.20 14.18 L 12.46 14.20 L 12.70 14.22 L 12.95 14.22 L 13.19 14.22 L 13.42 14.21 L 13.65 14.19 L 13.88 14.17 L 14.11 14.13 L 14.33 14.09 L 14.54 14.04 L 14.75 13.98 L 14.96 13.92 L 15.17 13.84 L 15.37 13.76 L 15.56 13.67 L 15.56 13.67 L 15.37 13.77 L 15.18 13.88 L 15.00 13.99 L 14.82 14.11 L 14.64 14.24 L 14.47 14.38 L 14.30 14.53 L 14.13 14.69 L 13.97 14.85 L 13.81 15.02 L 13.66 15.20 L 13.51 15.39 L 13.37 15.58 L 13.22 15.79 L 13.09 16.00 L 12.95 16.22 Z" }), _jsx("circle", { cx: "5.40", cy: "12.20", r: "0.98" }), _jsx("circle", { cx: "18.60", cy: "12.20", r: "0.98" }), _jsx("circle", { cx: "12.00", cy: "15.40", r: "0.98" }), _jsx("circle", { cx: "12", cy: "5.6", r: "0.72" })] })] }));
+}
+export { AssistantMarkIcon };

package/dist/components/agentic/attachments-actions.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import type { AttachmentActionAddFilesProps, AttachmentActionAddScreenshotProps, AttachmentRemoveProps } from "@ciridae/ui-agent/attachments-types";
+declare function AttachmentRemove({ attachmentId, children, className, label, onClick, size, type, variant: buttonVariant, ...props }: AttachmentRemoveProps): React.JSX.Element | null;
+declare function AttachmentActionAddFiles({ children, className, label, onClick, renderAs, size, tooltip, type, variant, ...props }: AttachmentActionAddFilesProps): React.JSX.Element;
+declare function AttachmentActionAddScreenshot({ children, className, disabled, label, onClick, renderAs, size, status, tooltip, type, variant, ...props }: AttachmentActionAddScreenshotProps): React.JSX.Element;
+declare function useAttachmentDropTarget({ global, ref, }: {
+    global?: boolean;
+    ref: React.RefObject<HTMLElement | null>;
+}): void;
+export { AttachmentActionAddFiles, AttachmentActionAddScreenshot, AttachmentRemove, useAttachmentDropTarget, };

package/dist/components/agentic/attachments-actions.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable react-refresh/only-export-components */
+import { CameraIcon, PaperclipIcon, XIcon } from "lucide-react";
+import * as React from "react";
+import { AttachmentItemContext, useAttachments, useOptionalAttachments, } from "@ciridae/ui-agent/attachments-context";
+import { getAttachmentRemoveSize, getScreenshotLabel } from "@ciridae/ui-agent/attachments-model";
+import { Button } from "@ciridae/ui/button";
+import { DropdownMenuItem } from "@ciridae/ui/dropdown-menu";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@ciridae/ui/tooltip";
+import { cn } from "@ciridae/ui/utils";
+const attachmentRemoveClassNames = {
+    grid: [
+        "absolute top-2 right-2 size-6 rounded-full bg-background/90 p-0 opacity-0 shadow-sm transition-opacity",
+        "group-focus-within/attachment:opacity-100 group-hover/attachment:opacity-100",
+        "hover:bg-background [&>svg]:size-3",
+    ],
+    inline: [
+        "absolute top-1/2 right-0.5 size-4 -translate-y-1/2 rounded p-0 opacity-0 transition-opacity",
+        "group-focus-within/attachment:opacity-100 group-hover/attachment:opacity-100",
+        "[&>svg]:size-2.5",
+    ],
+    list: "size-8 shrink-0 rounded p-0 [&>svg]:size-4",
+};
+function getResolvedAttachmentId(attachmentId, item) {
+    return attachmentId ?? item?.data.id;
+}
+function getResolvedAttachmentVariant(item) {
+    return item?.variant ?? "inline";
+}
+function hasAttachmentRemoveAction(item, resolvedAttachmentId, onClick) {
+    return Boolean(item?.onRemove || resolvedAttachmentId || onClick);
+}
+function handleAttachmentRemove({ controller, event, item, onClick, resolvedAttachmentId, }) {
+    event.stopPropagation();
+    onClick?.(event);
+    if (event.defaultPrevented)
+        return;
+    if (item?.onRemove) {
+        item.onRemove();
+        return;
+    }
+    if (resolvedAttachmentId)
+        controller?.remove(resolvedAttachmentId);
+}
+function getResolvedScreenshotStatus(status, contextStatus) {
+    return status ?? contextStatus ?? "idle";
+}
+function getResolvedScreenshotLabel(label, status) {
+    return label ?? getScreenshotLabel(status);
+}
+function isScreenshotActionDisabled(disabled, status) {
+    return disabled ?? status === "unavailable";
+}
+function AttachmentRemove({ attachmentId, children, className, label = "Remove", onClick, size, type = "button", variant: buttonVariant = "ghost", ...props }) {
+    const controller = useOptionalAttachments();
+    const item = React.useContext(AttachmentItemContext);
+    const resolvedAttachmentId = getResolvedAttachmentId(attachmentId, item);
+    const attachmentVariant = getResolvedAttachmentVariant(item);
+    const handleClick = React.useCallback((event) => {
+        handleAttachmentRemove({ controller, event, item, onClick, resolvedAttachmentId });
+    }, [controller, item, onClick, resolvedAttachmentId]);
+    if (!hasAttachmentRemoveAction(item, resolvedAttachmentId, onClick))
+        return null;
+    return (_jsxs(Button, { "aria-label": label, "data-slot": "attachment-remove", onClick: handleClick, size: size ?? getAttachmentRemoveSize(attachmentVariant), type: type, variant: buttonVariant, className: cn(attachmentRemoveClassNames[attachmentVariant], className), ...props, children: [children ?? _jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: label })] }));
+}
+function AttachmentActionAddFiles({ children, className, label = "Add attachments", onClick, renderAs = "button", size = "icon-sm", tooltip = "Add attachments", type = "button", variant = "ghost", ...props }) {
+    const attachments = useOptionalAttachments();
+    const handleAction = React.useCallback(() => {
+        attachments?.openFileDialog();
+    }, [attachments]);
+    if (renderAs === "menu-item") {
+        return (_jsxs(DropdownMenuItem, { "data-slot": "attachment-action-add-files", onSelect: (event) => {
+                event.preventDefault();
+                handleAction();
+            }, className: cn("gap-2", className), children: [children ?? _jsx(PaperclipIcon, {}), label] }));
+    }
+    const button = (_jsx(Button, { "aria-label": label, "data-slot": "attachment-action-add-files", onClick: (event) => {
+            onClick?.(event);
+            if (event.defaultPrevented)
+                return;
+            handleAction();
+        }, size: size, type: type, variant: variant, className: cn("shrink-0 text-muted-foreground", className), ...props, children: children ?? _jsx(PaperclipIcon, {}) }));
+    return withOptionalTooltip(button, tooltip);
+}
+function AttachmentActionAddScreenshot({ children, className, disabled, label, onClick, renderAs = "button", size = "icon-sm", status, tooltip, type = "button", variant = "ghost", ...props }) {
+    const attachments = useOptionalAttachments();
+    const resolvedStatus = getResolvedScreenshotStatus(status, attachments?.screenshotStatus);
+    const resolvedLabel = getResolvedScreenshotLabel(label, resolvedStatus);
+    const isDisabled = isScreenshotActionDisabled(disabled, resolvedStatus);
+    const content = children ?? _jsx(CameraIcon, {});
+    const handleAction = React.useCallback(() => {
+        void attachments?.takeScreenshot();
+    }, [attachments]);
+    if (renderAs === "menu-item") {
+        return (_jsxs(DropdownMenuItem, { "data-slot": "attachment-action-add-screenshot", "data-status": resolvedStatus, disabled: isDisabled, onSelect: (event) => {
+                event.preventDefault();
+                handleAction();
+            }, className: cn("gap-2", className), children: [content, resolvedLabel] }));
+    }
+    const button = (_jsx(Button, { "aria-label": resolvedLabel, "data-slot": "attachment-action-add-screenshot", "data-status": resolvedStatus, disabled: isDisabled, loading: resolvedStatus === "capturing", loadingLabel: "Capturing screenshot", onClick: (event) => {
+            onClick?.(event);
+            if (event.defaultPrevented)
+                return;
+            handleAction();
+        }, size: size, type: type, variant: variant, className: cn("shrink-0 text-muted-foreground", className), ...props, children: content }));
+    return withOptionalTooltip(button, tooltip ?? resolvedLabel);
+}
+function useAttachmentDropTarget({ global, ref, }) {
+    const { add } = useAttachments();
+    React.useEffect(() => {
+        const target = global ? document : ref.current;
+        if (!target)
+            return;
+        const handleDragOver = (event) => {
+            if (!(event instanceof DragEvent))
+                return;
+            if (event.dataTransfer?.types.includes("Files"))
+                event.preventDefault();
+        };
+        const handleDrop = (event) => {
+            if (!(event instanceof DragEvent))
+                return;
+            if (!event.dataTransfer?.types.includes("Files"))
+                return;
+            event.preventDefault();
+            if (event.dataTransfer.files.length > 0)
+                add(event.dataTransfer.files);
+        };
+        target.addEventListener("dragover", handleDragOver);
+        target.addEventListener("drop", handleDrop);
+        return () => {
+            target.removeEventListener("dragover", handleDragOver);
+            target.removeEventListener("drop", handleDrop);
+        };
+    }, [add, global, ref]);
+}
+function withOptionalTooltip(button, tooltip) {
+    if (!tooltip)
+        return button;
+    return (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: button }), _jsx(TooltipContent, { children: tooltip })] }) }));
+}
+export { AttachmentActionAddFiles, AttachmentActionAddScreenshot, AttachmentRemove, useAttachmentDropTarget, };

package/dist/components/agentic/attachments-context.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+import type { AttachmentControllerContextValue, AttachmentData, AttachmentMediaCategory, AttachmentProviderProps, AttachmentVariant } from "@ciridae/ui-agent/attachments-types";
+declare const AttachmentControllerContext: React.Context<AttachmentControllerContextValue | null>;
+declare const AttachmentsContext: React.Context<{
+    variant: AttachmentVariant;
+} | null>;
+declare const AttachmentItemContext: React.Context<{
+    data: AttachmentData;
+    mediaCategory: AttachmentMediaCategory;
+    onRemove?: () => void;
+    variant: AttachmentVariant;
+} | null>;
+declare function AttachmentProvider({ accept, attachments, children, defaultAttachments, maxAttachmentSizeMb, maxAttachments, multiple, onAttachmentError, onAttachmentsChange, onCaptureScreenshot, }: AttachmentProviderProps): React.JSX.Element;
+declare function useAttachments(): AttachmentControllerContextValue;
+declare function useOptionalAttachments(): AttachmentControllerContextValue | null;
+declare function useAttachmentsContext(): {
+    variant: AttachmentVariant;
+};
+declare function useAttachmentContext(): {
+    data: AttachmentData;
+    mediaCategory: AttachmentMediaCategory;
+    onRemove?: () => void;
+    variant: AttachmentVariant;
+};
+export { AttachmentControllerContext, AttachmentItemContext, AttachmentProvider, AttachmentsContext, useAttachmentContext, useAttachments, useAttachmentsContext, useOptionalAttachments, };