@dungle-scrubs/admin-ui-soft 0.0.0-stage → 0.1.0

package/dist/components/assistant-ui/elements/assistant-modal.aui.js

@@ -0,0 +1,276 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { TooltipIconButton } from "./tooltip-icon-button.js";
+import { Thread } from "./thread.aui.js";
+import { ThreadListItems, ThreadListRoot, ThreadListSearch } from "./thread-list.aui.js";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { BotIcon, ChevronDownIcon, HistoryIcon, PlusIcon } from "lucide-react";
+import { Popover } from "@base-ui/react/popover";
+import { ThreadListPrimitive, useAuiEvent, useAuiState } from "@assistant-ui/react";
+//#region src/components/assistant-ui/elements/assistant-modal.aui.tsx
+var assistant_modal_aui_exports = /* @__PURE__ */ __exportAll({ AssistantModal: () => AssistantModal });
+const SIZE_STORAGE_KEY = "aui-modal-size";
+const MIN_SIZE = {
+	width: 320,
+	height: 400
+};
+const VIEWPORT_INSET = {
+	width: 32,
+	height: 96
+};
+const RESIZE_STEP = 16;
+const clampSize = ({ width, height }) => ({
+	width: Math.round(Math.max(MIN_SIZE.width, Math.min(width, window.innerWidth - VIEWPORT_INSET.width))),
+	height: Math.round(Math.max(MIN_SIZE.height, Math.min(height, window.innerHeight - VIEWPORT_INSET.height)))
+});
+const readStoredSize = () => {
+	if (typeof window === "undefined") return null;
+	try {
+		const stored = JSON.parse(window.localStorage.getItem(SIZE_STORAGE_KEY) ?? "null");
+		if (typeof stored !== "object" || stored === null) return null;
+		const { width, height } = stored;
+		if (typeof width !== "number" || typeof height !== "number") return null;
+		return clampSize({
+			width,
+			height
+		});
+	} catch {
+		return null;
+	}
+};
+const storeSize = (size) => {
+	try {
+		if (size) window.localStorage.setItem(SIZE_STORAGE_KEY, JSON.stringify(size));
+		else window.localStorage.removeItem(SIZE_STORAGE_KEY);
+	} catch {}
+};
+const isRtl = (element) => getComputedStyle(element).direction === "rtl";
+const useModalSize = (contentRef) => {
+	const [size, setSize] = useState(readStoredSize);
+	const dragRef = useRef(null);
+	const commitSize = (next) => {
+		setSize(next);
+		storeSize(next);
+	};
+	const sizeFromPointer = (drag, event) => clampSize({
+		width: drag.width - (event.clientX - drag.x) * drag.direction,
+		height: drag.height - (event.clientY - drag.y)
+	});
+	const takeDrag = (event) => {
+		const drag = dragRef.current;
+		if (!drag || drag.pointerId !== event.pointerId) return null;
+		dragRef.current = null;
+		return drag;
+	};
+	const reset = () => {
+		dragRef.current = null;
+		commitSize(null);
+	};
+	return {
+		size,
+		reset,
+		handleProps: {
+			onPointerDown: (event) => {
+				const content = contentRef.current;
+				if (event.button !== 0 || !content) return;
+				const rect = content.getBoundingClientRect();
+				dragRef.current = {
+					pointerId: event.pointerId,
+					x: event.clientX,
+					y: event.clientY,
+					width: rect.width,
+					height: rect.height,
+					direction: isRtl(content) ? -1 : 1,
+					last: null
+				};
+				event.currentTarget.setPointerCapture(event.pointerId);
+				event.preventDefault();
+			},
+			onPointerMove: (event) => {
+				const drag = dragRef.current;
+				if (!drag || drag.pointerId !== event.pointerId) return;
+				if (!drag.last && event.clientX === drag.x && event.clientY === drag.y) return;
+				drag.last = sizeFromPointer(drag, event);
+				setSize(drag.last);
+			},
+			onPointerUp: (event) => {
+				const drag = takeDrag(event);
+				if (!drag) return;
+				if (drag.last || event.clientX !== drag.x || event.clientY !== drag.y) commitSize(sizeFromPointer(drag, event));
+			},
+			onPointerCancel: (event) => {
+				const drag = takeDrag(event);
+				if (drag?.last) commitSize(drag.last);
+			},
+			onKeyDown: (event) => {
+				const content = contentRef.current;
+				if (!content) return;
+				if (event.key === "Enter" || event.key === " ") {
+					event.preventDefault();
+					reset();
+					return;
+				}
+				const step = event.shiftKey ? 64 : RESIZE_STEP;
+				const rtl = isRtl(content);
+				const change = {
+					ArrowUp: [0, step],
+					ArrowDown: [0, -step],
+					[rtl ? "ArrowRight" : "ArrowLeft"]: [step, 0],
+					[rtl ? "ArrowLeft" : "ArrowRight"]: [-step, 0]
+				}[event.key];
+				if (!change) return;
+				event.preventDefault();
+				const rect = content.getBoundingClientRect();
+				commitSize(clampSize({
+					width: rect.width + change[0],
+					height: rect.height + change[1]
+				}));
+			}
+		}
+	};
+};
+const AssistantModal = () => {
+	const [open, setOpen] = useState(false);
+	const [view, setView] = useState("thread");
+	const contentRef = useRef(null);
+	const { size, reset, handleProps } = useModalSize(contentRef);
+	const thread = useMemo(() => /* @__PURE__ */ jsx(Thread, {}), []);
+	useAuiEvent("thread.runStart", () => {
+		setView("thread");
+		setOpen(true);
+	});
+	return /* @__PURE__ */ jsxs(Popover.Root, {
+		open,
+		onOpenChange: (open, eventDetails) => {
+			if (!open && (eventDetails.reason === "outside-press" || eventDetails.reason === "focus-out")) eventDetails.cancel();
+			else {
+				if (open) setView("thread");
+				setOpen(open);
+			}
+		},
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "aui-root aui-modal-anchor fixed end-4 bottom-4 size-11",
+			children: /* @__PURE__ */ jsx(Popover.Trigger, { render: (props, state) => /* @__PURE__ */ jsx(AssistantModalButton, {
+				...props,
+				open: state.open
+			}) })
+		}), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+			side: "top",
+			align: "end",
+			sideOffset: 16,
+			positionMethod: "fixed",
+			className: "isolate z-50",
+			children: /* @__PURE__ */ jsxs(Popover.Popup, {
+				ref: contentRef,
+				style: size ?? void 0,
+				className: "group/modal aui-root aui-modal-content bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-open:slide-in-from-bottom-2 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-closed:slide-out-to-bottom-2 [&[data-open]_.aui-thread-viewport-footer]:animate-in [&[data-open]_.aui-thread-viewport-footer]:fade-in-0 [&[data-open]_.aui-thread-viewport-footer]:slide-in-from-bottom-2 [&[data-open]_.aui-thread-viewport-footer]:fill-mode-backwards [&_.aui-thread-viewport-footer]:bg-popover ring-foreground/10 z-50 flex h-125 max-h-(--available-height) w-100 max-w-[calc(100vw-2rem)] origin-(--transform-origin) flex-col gap-0 overflow-clip overscroll-contain rounded-xl p-0 text-base antialiased shadow-[0_16px_48px_-24px_rgb(0_0_0/0.25)] ring-1 transition-none ease-[cubic-bezier(0.32,0.72,0,1)] outline-none data-closed:duration-200 data-open:duration-300 motion-reduce:animate-none dark:shadow-[0_16px_48px_-24px_rgb(0_0_0/0.6)] [&_.aui-thread-root]:bg-inherit motion-reduce:[&_.aui-thread-viewport-footer]:animate-none [&_[data-slot=aui\\_thread-viewport]]:[scrollbar-gutter:stable_both-edges] [&[data-open]_.aui-thread-viewport-footer]:delay-100 [&[data-open]_.aui-thread-viewport-footer]:duration-300 [&[data-open]_.aui-thread-viewport-footer]:ease-[cubic-bezier(0.32,0.72,0,1)]",
+				children: [
+					/* @__PURE__ */ jsx(AssistantModalResizeHandle, {
+						...handleProps,
+						onDoubleClick: reset
+					}),
+					/* @__PURE__ */ jsx(AssistantModalHeader, {
+						view,
+						onViewChange: setView
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "aui-modal-body relative min-h-0 flex-1",
+						children: [/* @__PURE__ */ jsx("div", {
+							ref: (node) => {
+								if (node) node.inert = view === "list";
+							},
+							className: "aui-modal-thread h-full",
+							children: thread
+						}), view === "list" && /* @__PURE__ */ jsx(AssistantModalThreadList, { onSelect: () => setView("thread") })]
+					})
+				]
+			})
+		}) })]
+	});
+};
+const AssistantModalHeader = ({ view, onViewChange }) => {
+	const title = useAuiState((s) => s.threadListItem.title);
+	const hasThreads = useAuiState((s) => s.threads.threadIds.length > 0);
+	const titleRef = useRef(null);
+	const shownViewRef = useRef(view);
+	useEffect(() => {
+		if (shownViewRef.current === view) return;
+		shownViewRef.current = view;
+		const heading = titleRef.current;
+		const active = document.activeElement;
+		if (active === document.body || active === heading?.closest("[role='dialog']")) heading?.focus();
+	}, [view]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "aui-modal-header border-foreground/10 flex h-11 shrink-0 items-center gap-2 border-b ps-3.5 pe-2",
+		children: [/* @__PURE__ */ jsx(Popover.Title, {
+			ref: titleRef,
+			tabIndex: -1,
+			className: "aui-modal-title min-w-0 flex-1 truncate text-[13px] font-medium outline-none",
+			children: view === "list" ? "Threads" : title || "New Chat"
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex shrink-0 items-center gap-0.5",
+			children: [/* @__PURE__ */ jsx(TooltipIconButton, {
+				tooltip: "Threads",
+				side: "bottom",
+				"aria-pressed": view === "list",
+				disabled: !hasThreads && view === "thread",
+				className: "aui-modal-threads text-muted-foreground hover:text-foreground aria-pressed:bg-muted aria-pressed:text-foreground size-7 rounded-md p-0",
+				onClick: () => onViewChange(view === "list" ? "thread" : "list"),
+				children: /* @__PURE__ */ jsx(HistoryIcon, { className: "size-3.5" })
+			}), /* @__PURE__ */ jsx(ThreadListPrimitive.New, {
+				render: /* @__PURE__ */ jsx(TooltipIconButton, {
+					tooltip: "New Thread",
+					side: "bottom",
+					className: "aui-modal-new text-muted-foreground hover:text-foreground size-7 rounded-md p-0",
+					onClick: () => onViewChange("thread")
+				}),
+				children: /* @__PURE__ */ jsx(PlusIcon, { className: "size-3.5" })
+			})]
+		})]
+	});
+};
+const AssistantModalThreadList = ({ onSelect }) => {
+	const [search, setSearch] = useState("");
+	const hasThreads = useAuiState((s) => s.threads.threadIds.length > 0);
+	return /* @__PURE__ */ jsxs(ThreadListRoot, {
+		className: "aui-modal-thread-list bg-popover absolute inset-0 overflow-y-auto p-2",
+		onClick: (event) => {
+			if (event.target.closest("[data-slot='aui_thread-list-item-trigger']")) onSelect();
+		},
+		children: [hasThreads && /* @__PURE__ */ jsx(ThreadListSearch, {
+			value: search,
+			onValueChange: setSearch
+		}), /* @__PURE__ */ jsx(ThreadListItems, { searchQuery: hasThreads ? search : "" })]
+	});
+};
+const AssistantModalResizeHandle = (props) => {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": "Resize Assistant",
+		className: "aui-modal-resize-handle group-hover/modal:border-foreground/15 hover:border-foreground/40 focus-visible:border-ring absolute start-0 top-0 z-10 size-6 cursor-nwse-resize touch-none rounded-ss-xl border-s-2 border-t-2 border-transparent transition-colors outline-none [clip-path:polygon(0_0,100%_0,100%_6px,6px_6px,6px_100%,0_100%)] motion-reduce:transition-none rtl:cursor-nesw-resize rtl:[clip-path:polygon(0_0,100%_0,100%_100%,calc(100%_-_6px)_100%,calc(100%_-_6px)_6px,0_6px)]",
+		...props
+	});
+};
+const AssistantModalButton = forwardRef(({ open, ...rest }, ref) => {
+	return /* @__PURE__ */ jsxs(TooltipIconButton, {
+		variant: "ghost",
+		tooltip: open ? "Close Assistant" : "Open Assistant",
+		side: "left",
+		...rest,
+		className: "aui-modal-button bg-background text-foreground border-border/60 hover:border-border hover:bg-background size-full rounded-full border transition-[border-color,scale] duration-150 ease-out active:scale-96 motion-reduce:transition-none",
+		ref,
+		children: [/* @__PURE__ */ jsx(BotIcon, {
+			"data-open": open ? "" : void 0,
+			"data-closed": open ? void 0 : "",
+			className: "aui-modal-button-closed-icon absolute size-5 transition-[scale,opacity,filter] duration-200 ease-[cubic-bezier(0.2,0,0,1)] data-closed:scale-100 data-closed:opacity-100 data-closed:blur-[0px] data-open:scale-25 data-open:opacity-0 data-open:blur-[4px] motion-reduce:transition-none"
+		}), /* @__PURE__ */ jsx(ChevronDownIcon, {
+			"data-open": open ? "" : void 0,
+			"data-closed": open ? void 0 : "",
+			className: "aui-modal-button-open-icon absolute size-5 transition-[scale,opacity,filter] duration-200 ease-[cubic-bezier(0.2,0,0,1)] data-closed:scale-25 data-closed:opacity-0 data-closed:blur-[4px] data-open:scale-100 data-open:opacity-100 data-open:blur-[0px] motion-reduce:transition-none"
+		})]
+	});
+});
+AssistantModalButton.displayName = "AssistantModalButton";
+//#endregion
+export { AssistantModal, assistant_modal_aui_exports };

package/dist/components/assistant-ui/elements/assistant-sidebar.aui.d.ts

@@ -0,0 +1,7 @@
+import { FC, PropsWithChildren } from "react";
+declare namespace assistant_sidebar_aui_d_exports {
+  export { AssistantSidebar };
+}
+export declare const AssistantSidebar: FC<PropsWithChildren>;
+//#endregion
+export { assistant_sidebar_aui_d_exports };

package/dist/components/assistant-ui/elements/assistant-sidebar.aui.js

@@ -0,0 +1,18 @@
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "../../ui/resizable.js";
+import { Thread } from "./thread.aui.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/assistant-ui/elements/assistant-sidebar.aui.tsx
+var assistant_sidebar_aui_exports = /* @__PURE__ */ __exportAll({ AssistantSidebar: () => AssistantSidebar });
+const AssistantSidebar = ({ children }) => {
+	return /* @__PURE__ */ jsxs(ResizablePanelGroup, {
+		orientation: "horizontal",
+		children: [
+			/* @__PURE__ */ jsx(ResizablePanel, { children }),
+			/* @__PURE__ */ jsx(ResizableHandle, {}),
+			/* @__PURE__ */ jsx(ResizablePanel, { children: /* @__PURE__ */ jsx(Thread, {}) })
+		]
+	});
+};
+//#endregion
+export { AssistantSidebar, assistant_sidebar_aui_exports };

package/dist/components/assistant-ui/elements/attachment.aui.d.ts

@@ -0,0 +1,9 @@
+import { FC } from "react";
+declare namespace attachment_aui_d_exports {
+  export { ComposerAddAttachment, ComposerAttachments, UserMessageAttachments };
+}
+export declare const UserMessageAttachments: FC;
+export declare const ComposerAttachments: FC;
+export declare const ComposerAddAttachment: FC;
+//#endregion
+export { attachment_aui_d_exports };

package/dist/components/assistant-ui/elements/attachment.aui.js

@@ -0,0 +1,143 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { Avatar, AvatarFallback, AvatarImage } from "../../ui/avatar.js";
+import { Dialog, DialogContent, DialogTitle, DialogTrigger } from "../../ui/dialog.js";
+import { cn } from "../../../lib/utils.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../ui/tooltip.js";
+import { TooltipIconButton } from "./tooltip-icon-button.js";
+import { useAttachmentSrc } from "../../../hooks/use-attachment-src.js";
+import { isValidElement, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertCircleIcon, FileText, Loader2Icon, PlusIcon, XIcon } from "lucide-react";
+import { AttachmentPrimitive, ComposerPrimitive, MessagePrimitive, useAui, useAuiState } from "@assistant-ui/react";
+//#region src/components/assistant-ui/elements/attachment.aui.tsx
+var attachment_aui_exports = /* @__PURE__ */ __exportAll({
+	ComposerAddAttachment: () => ComposerAddAttachment,
+	ComposerAttachments: () => ComposerAttachments,
+	UserMessageAttachments: () => UserMessageAttachments
+});
+const AttachmentPreview = ({ src }) => {
+	const [isLoaded, setIsLoaded] = useState(false);
+	return /* @__PURE__ */ jsx("img", {
+		src,
+		alt: "Attachment preview",
+		className: cn("block h-auto max-h-[80vh] w-auto max-w-full rounded-sm object-contain transition-opacity duration-300 motion-reduce:transition-none", isLoaded ? "aui-attachment-preview-image-loaded opacity-100" : "aui-attachment-preview-image-loading opacity-0"),
+		onLoad: () => setIsLoaded(true)
+	});
+};
+const AttachmentPreviewDialog = ({ children }) => {
+	const src = useAttachmentSrc();
+	if (!src) return children;
+	return /* @__PURE__ */ jsxs(Dialog, { children: [/* @__PURE__ */ jsx(DialogTrigger, {
+		nativeButton: false,
+		className: "aui-attachment-preview-trigger cursor-zoom-in",
+		render: isValidElement(children) ? children : /* @__PURE__ */ jsx("button", {
+			type: "button",
+			children
+		})
+	}), /* @__PURE__ */ jsxs(DialogContent, {
+		className: "aui-attachment-preview-dialog-content [&>button]:bg-foreground/60 [&>button]:hover:bg-foreground/80 [&_svg]:text-background p-2 sm:max-w-3xl [&>button]:rounded-full [&>button]:p-1 [&>button]:opacity-100 [&>button]:ring-0!",
+		children: [/* @__PURE__ */ jsx(DialogTitle, {
+			className: "aui-sr-only sr-only",
+			children: "Image Attachment Preview"
+		}), /* @__PURE__ */ jsx("div", {
+			className: "aui-attachment-preview bg-background relative mx-auto flex max-h-[80dvh] w-full items-center justify-center overflow-hidden rounded-sm",
+			children: /* @__PURE__ */ jsx(AttachmentPreview, { src })
+		})]
+	})] });
+};
+const AttachmentThumb = () => {
+	const src = useAttachmentSrc();
+	return /* @__PURE__ */ jsxs(Avatar, {
+		className: "aui-attachment-tile-avatar h-full w-full rounded-none after:hidden",
+		children: [/* @__PURE__ */ jsx(AvatarImage, {
+			src,
+			alt: "Attachment preview",
+			className: "aui-attachment-tile-image rounded-none object-cover"
+		}), /* @__PURE__ */ jsx(AvatarFallback, { children: /* @__PURE__ */ jsx(FileText, { className: "aui-attachment-tile-fallback-icon text-muted-foreground/80 size-6 stroke-[1.5]" }) })]
+	});
+};
+const AttachmentUI = () => {
+	const isComposer = useAui().attachment.source !== "message";
+	const isImage = useAuiState((s) => s.attachment.type === "image");
+	const typeLabel = useAuiState((s) => {
+		const type = s.attachment.type;
+		switch (type) {
+			case "image": return "Image";
+			case "document": return "Document";
+			case "file": return "File";
+			default: return type;
+		}
+	});
+	const uploadState = useAuiState((s) => s.attachment.status.type === "incomplete" && s.attachment.status.reason === "error" ? "error" : s.attachment.status.type === "running" || s.optional.message?.submission !== void 0 && s.attachment.status.type !== "complete" ? "uploading" : void 0);
+	const isUploading = uploadState === "uploading";
+	const isError = uploadState === "error";
+	const errorMessage = useAuiState((s) => s.attachment.status.type === "incomplete" && s.attachment.status.reason === "error" ? s.attachment.status.message ?? "Upload failed" : void 0);
+	return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsxs(AttachmentPrimitive.Root, {
+		className: cn("aui-attachment-root relative", isComposer && "animate-in fade-in-0 zoom-in-95 duration-200 motion-reduce:animate-none", isImage && !isComposer && "aui-attachment-root-message only:*:first:size-24"),
+		children: [/* @__PURE__ */ jsx(AttachmentPreviewDialog, { children: /* @__PURE__ */ jsxs(TooltipTrigger, {
+			render: /* @__PURE__ */ jsx("div", {
+				className: cn("aui-attachment-tile bg-muted hover:after:bg-foreground/10 focus-visible:ring-ring/50 relative size-14 cursor-pointer overflow-hidden rounded-[calc(var(--composer-radius,1rem)-var(--composer-padding,8px))] transition-transform outline-none after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:ring-1 after:ring-black/10 after:transition-colors after:ring-inset focus-visible:ring-1 active:scale-[0.96] motion-reduce:transition-none dark:after:ring-white/10", isError && "after:ring-destructive/60 dark:after:ring-destructive/60"),
+				role: "button",
+				tabIndex: 0,
+				"aria-label": `${typeLabel} attachment${isError ? ", upload failed" : isUploading ? ", uploading" : ""}`
+			}),
+			children: [
+				/* @__PURE__ */ jsx(AttachmentThumb, {}),
+				isUploading && /* @__PURE__ */ jsx("div", {
+					"aria-hidden": "true",
+					className: "aui-attachment-tile-uploading bg-background/60 animate-in fade-in-0 absolute inset-0 flex items-center justify-center backdrop-blur-[2px] motion-reduce:animate-none",
+					children: /* @__PURE__ */ jsx(Loader2Icon, { className: "text-muted-foreground size-4 animate-spin" })
+				}),
+				isError && /* @__PURE__ */ jsx("div", {
+					"aria-hidden": "true",
+					className: "aui-attachment-tile-error bg-background/70 animate-in fade-in-0 absolute inset-0 flex items-center justify-center backdrop-blur-[2px] motion-reduce:animate-none",
+					children: /* @__PURE__ */ jsx(AlertCircleIcon, { className: "text-destructive size-4" })
+				})
+			]
+		}) }), isComposer && /* @__PURE__ */ jsx(AttachmentRemove, {})]
+	}), /* @__PURE__ */ jsxs(TooltipContent, {
+		side: "top",
+		children: [/* @__PURE__ */ jsx(AttachmentPrimitive.Name, {}), errorMessage && /* @__PURE__ */ jsx("p", {
+			className: "aui-attachment-error-message",
+			children: errorMessage
+		})]
+	})] }) });
+};
+const AttachmentRemove = () => {
+	return /* @__PURE__ */ jsx(AttachmentPrimitive.Remove, {
+		render: /* @__PURE__ */ jsx(TooltipIconButton, {
+			tooltip: "Remove file",
+			className: "aui-attachment-tile-remove absolute end-1 top-1 size-5 rounded-full bg-black/50! text-white after:absolute after:-inset-1.5 hover:bg-black/70! hover:text-white! active:scale-[0.96] motion-reduce:transition-none",
+			side: "top"
+		}),
+		children: /* @__PURE__ */ jsx(XIcon, { className: "aui-attachment-remove-icon size-3 stroke-[2.5]" })
+	});
+};
+const UserMessageAttachments = () => {
+	return /* @__PURE__ */ jsx("div", {
+		className: "aui-user-message-attachments-end col-span-full col-start-1 row-start-1 flex w-full flex-row justify-end gap-2 empty:hidden",
+		children: /* @__PURE__ */ jsx(MessagePrimitive.Attachments, { children: () => /* @__PURE__ */ jsx(AttachmentUI, {}) })
+	});
+};
+const ComposerAttachments = () => {
+	return /* @__PURE__ */ jsx("div", {
+		className: "aui-composer-attachments flex w-full flex-row items-center gap-2 overflow-x-auto empty:hidden",
+		children: /* @__PURE__ */ jsx(ComposerPrimitive.Attachments, { children: () => /* @__PURE__ */ jsx(AttachmentUI, {}) })
+	});
+};
+const ComposerAddAttachment = () => {
+	return /* @__PURE__ */ jsx(ComposerPrimitive.AddAttachment, {
+		render: /* @__PURE__ */ jsx(TooltipIconButton, {
+			tooltip: "Add Attachment",
+			side: "bottom",
+			variant: "ghost",
+			size: "icon",
+			className: "aui-composer-add-attachment text-muted-foreground hover:text-foreground hover:bg-muted-foreground/15 dark:hover:bg-muted-foreground/30 size-7 rounded-full active:scale-[0.96] motion-reduce:transition-none",
+			"aria-label": "Add Attachment"
+		}),
+		children: /* @__PURE__ */ jsx(PlusIcon, { className: "aui-attachment-add-icon size-4" })
+	});
+};
+//#endregion
+export { ComposerAddAttachment, ComposerAttachments, UserMessageAttachments, attachment_aui_exports };

package/dist/components/assistant-ui/elements/background-inbox.d.ts

@@ -0,0 +1,18 @@
+import { ComponentProps } from "react";
+declare namespace background_inbox_d_exports {
+  export { BackgroundInbox, BackgroundRun, BackgroundState };
+}
+export type BackgroundState = "running" | "ready" | "failed";
+export interface BackgroundRun {
+  id: string;
+  title: string;
+  state: BackgroundState;
+  elapsed: string;
+  summary?: string;
+}
+export declare function BackgroundInbox({ runs, onCollect, className, ...props }: Omit<ComponentProps<"div">, "children" | "runs" | "onCollect"> & {
+  runs: readonly BackgroundRun[];
+  onCollect?: (id: string) => void;
+}): import("react").JSX.Element;
+//#endregion
+export { background_inbox_d_exports };

package/dist/components/assistant-ui/elements/background-inbox.js

@@ -0,0 +1,65 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { mono, paper } from "./surfaces.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, Loader2Icon, XIcon } from "lucide-react";
+//#region src/components/assistant-ui/elements/background-inbox.tsx
+var background_inbox_exports = /* @__PURE__ */ __exportAll({ BackgroundInbox: () => BackgroundInbox });
+function BackgroundInbox({ runs, onCollect, className, ...props }) {
+	const ready = runs.filter((run) => run.state === "ready").length;
+	const running = runs.filter((run) => run.state === "running").length;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "background-inbox",
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-1 rounded-2xl p-3", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-baseline justify-between px-1 pb-1",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-[13.5px] font-medium",
+				children: "Running elsewhere"
+			}), /* @__PURE__ */ jsx("span", {
+				className: cn(mono, "tabular-nums", ready > 0 ? "text-info dark:text-info" : "text-muted-foreground"),
+				children: ready > 0 ? `${ready} ready` : `${running} in flight`
+			})]
+		}), runs.length === 0 ? /* @__PURE__ */ jsx("p", {
+			role: "status",
+			className: "text-muted-foreground px-1.5 py-3 text-center text-[13px]",
+			children: "Nothing running"
+		}) : runs.map((run) => {
+			const className = cn("flex items-center gap-2.5 rounded-xl px-1.5 py-2 text-start transition-colors", "focus-visible:ring-ring/40 outline-none focus-visible:ring-1 focus-visible:ring-inset", run.state === "running" ? "cursor-default" : onCollect ? "hover:bg-foreground/[0.04] focus-visible:bg-foreground/[0.04]" : void 0);
+			const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "flex size-3.5 shrink-0 items-center justify-center",
+					children: run.state === "running" ? /* @__PURE__ */ jsx(Loader2Icon, { className: "text-muted-foreground size-3 animate-spin motion-reduce:animate-none" }) : run.state === "failed" ? /* @__PURE__ */ jsx(XIcon, { className: "size-3 text-destructive" }) : /* @__PURE__ */ jsx(CheckIcon, { className: "size-3 text-success" })
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "flex min-w-0 flex-1 flex-col gap-0.5",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: cn("truncate text-[13px]", run.state === "running" ? "text-muted-foreground" : "text-foreground/90"),
+						children: run.title
+					}), run.summary && /* @__PURE__ */ jsx("span", {
+						className: cn("font-mono text-[11px] tracking-tight", "text-muted-foreground truncate"),
+						children: run.summary
+					})]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: cn(mono, "text-muted-foreground shrink-0 tabular-nums"),
+					children: run.elapsed
+				})
+			] });
+			return onCollect ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				disabled: run.state === "running",
+				onClick: () => onCollect(run.id),
+				className,
+				children: content
+			}, run.id) : /* @__PURE__ */ jsx("div", {
+				className,
+				children: content
+			}, run.id);
+		})]
+	});
+}
+//#endregion
+export { BackgroundInbox, background_inbox_exports };

package/dist/components/assistant-ui/elements/canvas-split.d.ts

@@ -0,0 +1,25 @@
+import { ComponentProps } from "react";
+declare namespace canvas_split_d_exports {
+  export { CanvasSplit, CanvasSplitBody, CanvasSplitDocument, CanvasSplitHeader, CanvasSplitLine, CanvasSplitMessage, CanvasSplitThread };
+}
+export declare function CanvasSplit({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function CanvasSplitThread({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function CanvasSplitMessage({ speaker, className, ...props }: ComponentProps<"div"> & {
+  speaker: "user" | "assistant";
+}): import("react").JSX.Element;
+export declare function CanvasSplitDocument({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function CanvasSplitHeader({ title, version, saved, onCopy, onClose, className, ...props }: Omit<ComponentProps<"div">, "children" | "title"> & {
+  title: string;
+  version: number;
+  saved: boolean;
+  onCopy?: () => void;
+  onClose?: () => void;
+}): import("react").JSX.Element;
+export declare function CanvasSplitBody({ writing, className, children, ...props }: ComponentProps<"div"> & {
+  writing?: boolean;
+}): import("react").JSX.Element;
+export declare function CanvasSplitLine({ heading, className, ...props }: ComponentProps<"p"> & {
+  heading?: boolean;
+}): import("react").JSX.Element;
+//#endregion
+export { canvas_split_d_exports };