{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"chat-app","type":"registry:component","title":"Chat App","description":"A complete agent conversation workspace composing navigation, messages, streaming, planning, approvals, tools, code, diffs, generated media, sources, and prompt input.","author":"Saurabh ","dependencies":["clsx","lucide-react","motion","shiki","tailwind-merge"],"registryDependencies":[],"files":[{"path":"components/agents/chat-app.tsx","type":"registry:component","target":"@components/agents/chat-app.tsx","content":"\"use client\";\n// beui.dev/components/agents/chat-app\n\nimport type { ComponentProps } from \"react\";\nimport { AnimatedSidebarProvider } from \"@/components/motion/animated-sidebar\";\nimport { cn } from \"@/lib/utils\";\n\nexport type ChatAppProps = ComponentProps & {\n sidebarWidth?: string;\n};\n\nexport function ChatApp({\n children,\n className,\n sidebarWidth = \"17rem\",\n style,\n ...props\n}: ChatAppProps) {\n return (\n \n {children}\n \n );\n}\n"},{"path":"components/agents/agent-activity/index.tsx","type":"registry:component","target":"@components/agents/agent-activity/index.tsx","content":"\"use client\";\n// beui.dev/components/agents/chat-app\n\nimport { ChevronDown } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport {\n type ReactNode,\n useCallback,\n useEffect,\n useId,\n useLayoutEffect,\n useRef,\n useState,\n} from \"react\";\nimport { ThinkingShimmer } from \"@/components/agents/loading-states/thinking-shimmer\";\nimport { AgentDisclosure } from \"@/components/agents/agent-disclosure\";\nimport {\n EASE_OUT,\n SPRING_LAYOUT,\n SPRING_SWAP,\n} from \"@/lib/ease\";\nimport { cn } from \"@/lib/utils\";\nimport { ActivityRow } from \"./activity-row\";\nimport type {\n AgentActivityContentType,\n AgentActivityItem,\n AgentActivityProps,\n} from \"./types\";\n\nexport type {\n AgentActivityContentType,\n AgentActivityItem,\n AgentActivityProps,\n AgentActivitySearch,\n AgentActivityStatus,\n AgentActivityStep,\n AgentActivityText,\n AgentActivityTool,\n AgentActivityTrace,\n AgentSearchResult,\n AgentStepStatus,\n AgentTraceKind,\n} from \"./types\";\n\nfunction formatDuration(duration: number) {\n const seconds = Math.max(0, Math.round(duration));\n if (seconds < 60) return `${seconds}s`;\n\n const minutes = Math.floor(seconds / 60);\n const remainder = seconds % 60;\n return remainder === 0 ? `${minutes}m` : `${minutes}m ${remainder}s`;\n}\n\nfunction useControllableOpen({\n open,\n defaultOpen,\n onOpenChange,\n}: {\n open?: boolean;\n defaultOpen: boolean;\n onOpenChange?: (open: boolean) => void;\n}) {\n const [internalOpen, setInternalOpen] = useState(defaultOpen);\n const controlled = open !== undefined;\n const currentOpen = open ?? internalOpen;\n\n const setOpen = useCallback(\n (next: boolean) => {\n if (!controlled) setInternalOpen(next);\n onOpenChange?.(next);\n },\n [controlled, onOpenChange],\n );\n\n return [currentOpen, setOpen] as const;\n}\n\nfunction getContentType(items: AgentActivityItem[]): AgentActivityContentType {\n const first = items[0]?.type;\n return first && items.every((item) => item.type === first) ? first : \"mixed\";\n}\n\nfunction getActiveLabel(type: AgentActivityContentType) {\n if (type === \"search\") return \"Searching the web…\";\n if (type === \"tool\") return \"Running tools…\";\n if (type === \"trace\") return \"Working through the run…\";\n if (type === \"mixed\") return \"Working through it…\";\n return \"Thinking…\";\n}\n\nfunction getSummary(\n type: AgentActivityContentType,\n items: AgentActivityItem[],\n duration: number,\n): ReactNode {\n if (type === \"step\" || type === \"text\") {\n return (\n <>\n Thought for {formatDuration(duration)}\n \n );\n }\n if (type === \"search\") return \"Searched the web\";\n if (type === \"tool\") {\n return `Ran ${items.length} ${items.length === 1 ? \"tool\" : \"tools\"}`;\n }\n if (type === \"trace\") {\n const messages = items.filter(\n (item) =>\n item.type === \"trace\" &&\n (item.kind === \"thinking\" || item.kind === \"message\"),\n ).length;\n const tools = items.length - messages;\n return `${tools} ${tools === 1 ? \"tool call\" : \"tool calls\"}, ${messages} ${messages === 1 ? \"message\" : \"messages\"}`;\n }\n return `Completed ${items.length} ${items.length === 1 ? \"step\" : \"steps\"}`;\n}\n\nexport function AgentActivity({\n items,\n contentType: initialContentType,\n status = \"working\",\n duration = 0,\n open,\n defaultOpen = false,\n onOpenChange,\n collapseOnComplete = true,\n activeLabel,\n summary,\n maxHeight = 208,\n className,\n contentClassName,\n}: AgentActivityProps) {\n const reduce = useReducedMotion() ?? false;\n const baseId = useId();\n const triggerId = `${baseId}-trigger`;\n const contentId = `${baseId}-content`;\n const contentRef = useRef(null);\n const viewportRef = useRef(null);\n const previousStatus = useRef(status);\n const [contentHeight, setContentHeight] = useState(0);\n const [currentOpen, setOpen] = useControllableOpen({\n open,\n defaultOpen,\n onOpenChange,\n });\n const working = status === \"working\";\n const expanded = working || currentOpen;\n const contentType = items.length\n ? getContentType(items)\n : (initialContentType ?? \"mixed\");\n const cappedHeight = Math.min(contentHeight, Math.max(0, maxHeight));\n const viewportHeight = working ? Math.max(0, maxHeight) : cappedHeight;\n const capped = contentHeight > maxHeight;\n const streamOffset = working\n ? Math.min(0, viewportHeight - contentHeight)\n : 0;\n\n useLayoutEffect(() => {\n const node = contentRef.current;\n if (!node) return;\n\n const measure = () => setContentHeight(node.offsetHeight);\n measure();\n\n if (typeof ResizeObserver === \"undefined\") return;\n const observer = new ResizeObserver(measure);\n observer.observe(node);\n return () => observer.disconnect();\n }, []);\n\n useEffect(() => {\n if (previousStatus.current === \"working\" && status === \"complete\") {\n setOpen(!collapseOnComplete);\n }\n previousStatus.current = status;\n }, [collapseOnComplete, setOpen, status]);\n\n const toggle = () => {\n const next = !currentOpen;\n setOpen(next);\n if (next) requestAnimationFrame(() => viewportRef.current?.scrollTo({ top: 0 }));\n };\n\n const liveLabel = activeLabel ?? getActiveLabel(contentType);\n const completedSummary = summary ?? getSummary(contentType, items, duration);\n const maskImage = capped\n ? working\n ? \"linear-gradient(to bottom, transparent, black 12px)\"\n : \"linear-gradient(to bottom, transparent, black 12px, black calc(100% - 12px), transparent)\"\n : undefined;\n\n return (\n \n {working ? (\n \n {liveLabel}\n \n ) : (\n \n {completedSummary}\n \n \n \n \n )}\n\n \n \n \n \n {items.map((item) => (\n \n \n \n ))}\n \n \n \n \n \n );\n}\n"},{"path":"components/agents/ai-sidebar.tsx","type":"registry:component","target":"@components/agents/ai-sidebar.tsx","content":"\"use client\";\n// beui.dev/components/agents/chat-app\n\nimport {\n Bookmark,\n FileText,\n Folder,\n FolderOpen,\n MoreHorizontal,\n Pencil,\n} from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport {\n type DragEvent,\n type KeyboardEvent,\n type ReactNode,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport {\n MorphPopover,\n MorphPopoverContent,\n MorphPopoverTrigger,\n} from \"@/components/motion/popover-morph\";\nimport { EASE_OUT, SPRING_LAYOUT } from \"@/lib/ease\";\nimport { cn } from \"@/lib/utils\";\n\nexport type SidebarResourceKind =\n | \"folder\"\n | \"project\"\n | \"file\"\n | \"bookmark\";\n\nexport interface SidebarResource {\n id: string;\n label: string;\n kind: SidebarResourceKind;\n children?: SidebarResource[];\n disabled?: boolean;\n}\n\nexport type SidebarResourceDropPosition = \"before\" | \"inside\" | \"after\";\n\nexport interface SidebarResourceMove {\n itemId: string;\n targetId: string | null;\n position: SidebarResourceDropPosition;\n}\n\nexport interface SidebarResourceMenuControls {\n close: () => void;\n rename: () => void;\n}\n\nexport interface AISidebarProps {\n items?: SidebarResource[];\n defaultItems?: SidebarResource[];\n onItemsChange?: (items: SidebarResource[]) => void;\n /** Reject the promise to roll the optimistic move back. */\n onMove?: (move: SidebarResourceMove) => void | Promise;\n onMoveError?: (error: unknown, move: SidebarResourceMove) => void;\n onRename?: (item: SidebarResource, label: string) => void | Promise;\n activeId?: string | null;\n defaultActiveId?: string | null;\n onActiveChange?: (id: string) => void;\n defaultExpandedIds?: string[];\n renderIcon?: (item: SidebarResource) => ReactNode;\n renderMenu?: (\n item: SidebarResource,\n controls: SidebarResourceMenuControls,\n ) => ReactNode;\n ariaLabel?: string;\n className?: string;\n}\n\ninterface FlatResource {\n item: SidebarResource;\n depth: number;\n parentId: string | null;\n}\n\ninterface DropTarget {\n id: string | null;\n position: SidebarResourceDropPosition;\n}\n\nconst ROW_REVEAL = {\n duration: 0.16,\n ease: EASE_OUT,\n} as const;\n\nfunction canContain(item: SidebarResource) {\n return item.kind === \"folder\" || item.kind === \"project\";\n}\n\nfunction flattenResources(\n items: SidebarResource[],\n expanded: Set,\n depth = 0,\n parentId: string | null = null,\n): FlatResource[] {\n return items.flatMap((item) => {\n const row = { item, depth, parentId };\n if (!item.children?.length || !expanded.has(item.id)) return [row];\n return [\n row,\n ...flattenResources(item.children, expanded, depth + 1, item.id),\n ];\n });\n}\n\nfunction findResource(\n items: SidebarResource[],\n id: string,\n): SidebarResource | undefined {\n for (const item of items) {\n if (item.id === id) return item;\n const child = item.children ? findResource(item.children, id) : undefined;\n if (child) return child;\n }\n}\n\nfunction containsResource(item: SidebarResource, id: string): boolean {\n return (\n item.id === id ||\n item.children?.some((child) => containsResource(child, id)) === true\n );\n}\n\nfunction removeResource(\n items: SidebarResource[],\n id: string,\n): { items: SidebarResource[]; removed?: SidebarResource } {\n let removed: SidebarResource | undefined;\n const next: SidebarResource[] = [];\n\n for (const item of items) {\n if (item.id === id) {\n removed = item;\n continue;\n }\n\n if (item.children?.length) {\n const childResult = removeResource(item.children, id);\n if (childResult.removed) {\n removed = childResult.removed;\n next.push({ ...item, children: childResult.items });\n continue;\n }\n }\n\n next.push(item);\n }\n\n return { items: next, removed };\n}\n\nfunction insertResource(\n items: SidebarResource[],\n resource: SidebarResource,\n targetId: string | null,\n position: SidebarResourceDropPosition,\n): SidebarResource[] {\n if (targetId === null) return [...items, resource];\n\n const next: SidebarResource[] = [];\n for (const item of items) {\n if (item.id === targetId) {\n if (position === \"before\") next.push(resource, item);\n else if (position === \"after\") next.push(item, resource);\n else next.push({ ...item, children: [...(item.children ?? []), resource] });\n continue;\n }\n\n if (item.children?.length) {\n next.push({\n ...item,\n children: insertResource(item.children, resource, targetId, position),\n });\n } else {\n next.push(item);\n }\n }\n return next;\n}\n\nfunction moveResource(\n items: SidebarResource[],\n move: SidebarResourceMove,\n): SidebarResource[] | null {\n const source = findResource(items, move.itemId);\n if (!source || source.disabled) return null;\n if (move.targetId && containsResource(source, move.targetId)) return null;\n\n const target = move.targetId ? findResource(items, move.targetId) : undefined;\n if (\n move.position === \"inside\" &&\n (!target || target.disabled || !canContain(target))\n )\n return null;\n\n const removed = removeResource(items, move.itemId);\n if (!removed.removed) return null;\n return insertResource(\n removed.items,\n removed.removed,\n move.targetId,\n move.position,\n );\n}\n\nfunction renameResource(\n items: SidebarResource[],\n id: string,\n label: string,\n): SidebarResource[] {\n return items.map((item) => ({\n ...item,\n label: item.id === id ? label : item.label,\n children: item.children\n ? renameResource(item.children, id, label)\n : undefined,\n }));\n}\n\nfunction defaultIcon(item: SidebarResource, expanded: boolean) {\n const Icon =\n item.kind === \"folder\" || item.kind === \"project\"\n ? expanded\n ? FolderOpen\n : Folder\n : item.kind === \"bookmark\"\n ? Bookmark\n : FileText;\n return ;\n}\n\nfunction MarqueeLabel({ active, children }: { active: boolean; children: string }) {\n const reduce = useReducedMotion() ?? false;\n const viewportRef = useRef(null);\n const labelRef = useRef(null);\n const [distance, setDistance] = useState(0);\n\n useEffect(() => {\n const measure = () => {\n const viewport = viewportRef.current;\n const label = labelRef.current;\n if (!viewport || !label) return;\n setDistance(label.scrollWidth > viewport.clientWidth ? label.scrollWidth + 24 : 0);\n };\n measure();\n const observer = new ResizeObserver(measure);\n if (viewportRef.current) observer.observe(viewportRef.current);\n if (labelRef.current) observer.observe(labelRef.current);\n return () => observer.disconnect();\n }, []);\n\n const running = active && distance > 0 && !reduce;\n\n return (\n \n \n {children}\n {running ? {children} : null}\n \n \n );\n}\n\ninterface ResourceRowProps {\n row: FlatResource;\n active: boolean;\n expanded: boolean;\n focused: boolean;\n draggingId: string | null;\n dropTarget: DropTarget | null;\n menuOpen: boolean;\n renaming: boolean;\n onDragEnd: () => void;\n onDragOver: (event: DragEvent, row: FlatResource) => void;\n onDragStart: (event: DragEvent, id: string) => void;\n onDrop: (event: DragEvent) => void;\n onFocus: () => void;\n onKeyDown: (event: KeyboardEvent) => void;\n onMenuOpenChange: (open: boolean) => void;\n onRenameCancel: () => void;\n onRenameCommit: (label: string) => void;\n onRenameStart: () => void;\n onSelect: () => void;\n onToggle: () => void;\n renderIcon?: (item: SidebarResource) => ReactNode;\n renderMenu?: AISidebarProps[\"renderMenu\"];\n setRef: (node: HTMLDivElement | null) => void;\n}\n\nfunction ResourceRow({\n row,\n active,\n expanded,\n focused,\n draggingId,\n dropTarget,\n menuOpen,\n renaming,\n onDragEnd,\n onDragOver,\n onDragStart,\n onDrop,\n onFocus,\n onKeyDown,\n onMenuOpenChange,\n onRenameCancel,\n onRenameCommit,\n onRenameStart,\n onSelect,\n onToggle,\n renderIcon,\n renderMenu,\n setRef,\n}: ResourceRowProps) {\n const reduce = useReducedMotion() ?? false;\n const [hovered, setHovered] = useState(false);\n const inputRef = useRef(null);\n const skipRenameBlurRef = useRef(false);\n const draggedRef = useRef(false);\n const [draft, setDraft] = useState(row.item.label);\n const acceptsChildren = canContain(row.item);\n const isDragging = draggingId === row.item.id;\n const dropPosition = dropTarget?.id === row.item.id ? dropTarget.position : null;\n\n useEffect(() => {\n if (!renaming) return;\n skipRenameBlurRef.current = false;\n setDraft(row.item.label);\n requestAnimationFrame(() => {\n inputRef.current?.focus();\n inputRef.current?.select();\n });\n }, [renaming, row.item.label]);\n\n const menu = renderMenu?.(row.item, {\n close: () => onMenuOpenChange(false),\n rename: () => {\n onMenuOpenChange(false);\n onRenameStart();\n },\n }) ?? (\n {\n onMenuOpenChange(false);\n onRenameStart();\n }}\n className=\"flex h-8 w-full items-center gap-2 rounded-lg px-2.5 text-left text-xs text-foreground outline-none transition-colors hover:bg-muted focus-visible:bg-muted focus-visible:ring-2 focus-visible:ring-ring\"\n >\n \n Rename\n \n );\n\n return (\n {\n if (\n event.defaultPrevented ||\n draggedRef.current ||\n renaming ||\n row.item.disabled\n )\n return;\n if (acceptsChildren) onToggle();\n else onSelect();\n }}\n onDoubleClick={(event) => {\n if (acceptsChildren || row.item.disabled) return;\n event.preventDefault();\n onRenameStart();\n }}\n onMouseEnter={() => setHovered(true)}\n onMouseLeave={() => setHovered(false)}\n onDragStartCapture={(event) => {\n draggedRef.current = true;\n onDragStart(event, row.item.id);\n }}\n onDragEndCapture={() => {\n onDragEnd();\n requestAnimationFrame(() => {\n draggedRef.current = false;\n });\n }}\n onDragOver={(event) => onDragOver(event, row)}\n onDrop={onDrop}\n className={cn(\n \"group/resource relative flex min-h-9 min-w-0 cursor-pointer items-center gap-2.5 rounded-xl pr-3 text-sm outline-none\",\n \"text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\",\n \"focus-visible:bg-muted/70 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset\",\n \"data-[menu-open=true]:bg-muted data-[menu-open=true]:text-foreground\",\n \"data-[dragging=true]:opacity-40\",\n \"data-[drop=inside]:bg-primary/10 data-[drop=inside]:ring-1 data-[drop=inside]:ring-primary/45\",\n \"data-[drop=before]:before:absolute data-[drop=before]:before:-top-0.5 data-[drop=before]:before:right-2 data-[drop=before]:before:left-2 data-[drop=before]:before:h-0.5 data-[drop=before]:before:rounded-full data-[drop=before]:before:bg-primary\",\n \"data-[drop=after]:after:absolute data-[drop=after]:after:-bottom-0.5 data-[drop=after]:after:right-2 data-[drop=after]:after:left-2 data-[drop=after]:after:h-0.5 data-[drop=after]:after:rounded-full data-[drop=after]:after:bg-primary\",\n !acceptsChildren && active && \"bg-muted text-foreground\",\n row.item.disabled && \"cursor-not-allowed opacity-45\",\n )}\n style={{ paddingLeft: `${12 + row.depth * 16}px` }}\n >\n \n {renderIcon?.(row.item) ?? defaultIcon(row.item, expanded)}\n \n\n {renaming ? (\n setDraft(event.target.value)}\n draggable={false}\n onClick={(event) => event.stopPropagation()}\n onDoubleClick={(event) => event.stopPropagation()}\n onBlur={() => {\n if (!skipRenameBlurRef.current) onRenameCommit(draft);\n }}\n onKeyDown={(event) => {\n event.stopPropagation();\n if (event.key === \"Enter\") {\n skipRenameBlurRef.current = true;\n onRenameCommit(draft);\n }\n if (event.key === \"Escape\") {\n skipRenameBlurRef.current = true;\n onRenameCancel();\n }\n }}\n className=\"mx-1 h-7 min-w-0 flex-1 rounded-md border border-border bg-background px-2 text-sm text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n />\n ) : (\n {row.item.label}\n )}\n\n {!renaming && !row.item.disabled ? (\n \n \n event.stopPropagation()}\n className=\"grid size-7 shrink-0 place-items-center rounded-lg opacity-0 outline-none transition-opacity hover:bg-foreground/5 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring group-hover/resource:opacity-100 group-data-[menu-open=true]/resource:opacity-100\"\n >\n \n \n \n \n
{menu}
\n \n \n ) : null}\n \n );\n}\n\nexport function AISidebar({\n items,\n defaultItems = [],\n onItemsChange,\n onMove,\n onMoveError,\n onRename,\n activeId,\n defaultActiveId = null,\n onActiveChange,\n defaultExpandedIds = [],\n renderIcon,\n renderMenu,\n ariaLabel = \"Resources\",\n className,\n}: AISidebarProps) {\n const [internalItems, setInternalItems] = useState(items ?? defaultItems);\n const [internalActiveId, setInternalActiveId] = useState(defaultActiveId);\n const [expandedIds, setExpandedIds] = useState(\n () => new Set(defaultExpandedIds),\n );\n const [focusedId, setFocusedId] = useState(\n activeId ?? defaultActiveId,\n );\n const [draggingId, setDraggingId] = useState(null);\n const [dropTarget, setDropTarget] = useState(null);\n const [menuOpenId, setMenuOpenId] = useState(null);\n const [renamingId, setRenamingId] = useState(null);\n const [announcement, setAnnouncement] = useState(\"\");\n const rowRefs = useRef(new Map());\n const movePendingRef = useRef(false);\n const renderedItems = internalItems;\n const selectedId = activeId ?? internalActiveId;\n\n useEffect(() => {\n if (items) setInternalItems(items);\n }, [items]);\n\n const flat = useMemo(\n () => flattenResources(renderedItems, expandedIds),\n [expandedIds, renderedItems],\n );\n\n useEffect(() => {\n if (focusedId && flat.some((row) => row.item.id === focusedId)) return;\n setFocusedId(flat[0]?.item.id ?? null);\n }, [flat, focusedId]);\n\n useEffect(() => {\n if (!menuOpenId) return;\n const frame = requestAnimationFrame(() => {\n const menus = Array.from(\n document.querySelectorAll(\"[data-sidebar-resource-menu]\"),\n );\n menus\n .find((menu) => menu.dataset.sidebarResourceMenu === menuOpenId)\n ?.querySelector(\"button, a[href]\")\n ?.focus();\n });\n return () => cancelAnimationFrame(frame);\n }, [menuOpenId]);\n\n const updateItems = useCallback(\n (next: SidebarResource[]) => {\n setInternalItems(next);\n onItemsChange?.(next);\n },\n [onItemsChange],\n );\n\n const performMove = useCallback(\n async (move: SidebarResourceMove) => {\n if (movePendingRef.current) {\n setAnnouncement(\"Wait for the current move to finish.\");\n return;\n }\n const before = renderedItems;\n const next = moveResource(before, move);\n if (!next || next === before) return;\n\n movePendingRef.current = true;\n updateItems(next);\n setDropTarget(null);\n setDraggingId(null);\n const moved = findResource(before, move.itemId);\n const target = move.targetId ? findResource(before, move.targetId) : null;\n setAnnouncement(\n target\n ? `Moved ${moved?.label ?? \"item\"} ${move.position} ${target.label}.`\n : `Moved ${moved?.label ?? \"item\"} to the top level.`,\n );\n\n try {\n await onMove?.(move);\n } catch (error) {\n updateItems(before);\n setAnnouncement(`Move failed. ${moved?.label ?? \"Item\"} was restored.`);\n onMoveError?.(error, move);\n } finally {\n movePendingRef.current = false;\n }\n },\n [onMove, onMoveError, renderedItems, updateItems],\n );\n\n const focusRow = useCallback((id: string) => {\n setFocusedId(id);\n requestAnimationFrame(() => rowRefs.current.get(id)?.focus());\n }, []);\n\n const select = useCallback(\n (id: string) => {\n if (activeId === undefined) setInternalActiveId(id);\n onActiveChange?.(id);\n },\n [activeId, onActiveChange],\n );\n\n const toggle = useCallback((id: string) => {\n setExpandedIds((current) => {\n const next = new Set(current);\n if (next.has(id)) next.delete(id);\n else next.add(id);\n return next;\n });\n }, []);\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent, row: FlatResource) => {\n const index = flat.findIndex(({ item }) => item.id === row.item.id);\n const previous = flat[index - 1];\n const next = flat[index + 1];\n const moveModifier = event.altKey && event.shiftKey;\n\n if (event.key === \"ArrowDown\" && !moveModifier && next) {\n event.preventDefault();\n focusRow(next.item.id);\n return;\n }\n if (event.key === \"ArrowUp\" && !moveModifier && previous) {\n event.preventDefault();\n focusRow(previous.item.id);\n return;\n }\n if (event.key === \"Home\" && flat[0]) {\n event.preventDefault();\n focusRow(flat[0].item.id);\n return;\n }\n if (event.key === \"End\" && flat.at(-1)) {\n event.preventDefault();\n focusRow(flat.at(-1)?.item.id ?? row.item.id);\n return;\n }\n\n if (row.item.disabled) {\n if (event.key === \"ArrowLeft\" && row.parentId) {\n event.preventDefault();\n focusRow(row.parentId);\n } else if (\n moveModifier ||\n [\"ArrowRight\", \"Enter\", \" \", \"F2\", \"ContextMenu\"].includes(\n event.key,\n ) ||\n (event.shiftKey && event.key === \"F10\")\n ) {\n event.preventDefault();\n }\n return;\n }\n\n if (moveModifier && event.key === \"ArrowUp\" && previous) {\n event.preventDefault();\n void performMove({ itemId: row.item.id, targetId: previous.item.id, position: \"before\" });\n return;\n }\n if (moveModifier && event.key === \"ArrowDown\" && next) {\n event.preventDefault();\n void performMove({ itemId: row.item.id, targetId: next.item.id, position: \"after\" });\n return;\n }\n if (moveModifier && event.key === \"ArrowRight\" && previous && canContain(previous.item)) {\n event.preventDefault();\n setExpandedIds((current) => new Set(current).add(previous.item.id));\n void performMove({ itemId: row.item.id, targetId: previous.item.id, position: \"inside\" });\n return;\n }\n if (moveModifier && event.key === \"ArrowLeft\" && row.parentId) {\n event.preventDefault();\n void performMove({ itemId: row.item.id, targetId: row.parentId, position: \"after\" });\n return;\n }\n\n if (event.key === \"ArrowRight\" && canContain(row.item)) {\n event.preventDefault();\n if (!expandedIds.has(row.item.id)) toggle(row.item.id);\n else if (next?.parentId === row.item.id) focusRow(next.item.id);\n } else if (event.key === \"ArrowLeft\") {\n event.preventDefault();\n if (expandedIds.has(row.item.id)) toggle(row.item.id);\n else if (row.parentId) focusRow(row.parentId);\n } else if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n if (canContain(row.item)) toggle(row.item.id);\n else select(row.item.id);\n } else if (event.key === \"F2\") {\n event.preventDefault();\n setRenamingId(row.item.id);\n } else if (event.key === \"ContextMenu\" || (event.shiftKey && event.key === \"F10\")) {\n event.preventDefault();\n setMenuOpenId(row.item.id);\n }\n },\n [expandedIds, flat, focusRow, performMove, select, toggle],\n );\n\n return (\n <>\n {\n if (!draggingId || event.target !== event.currentTarget) return;\n event.preventDefault();\n setDropTarget({ id: null, position: \"after\" });\n }}\n onDrop={(event) => {\n event.preventDefault();\n if (draggingId && dropTarget) {\n void performMove({\n itemId: draggingId,\n targetId: dropTarget.id,\n position: dropTarget.position,\n });\n }\n }}\n className={cn(\n \"relative flex min-w-0 flex-col gap-0.5 [overflow-anchor:none] group-data-[state=collapsed]/sidebar:hidden\",\n draggingId && \"select-none pb-9\",\n className,\n )}\n >\n \n {flat.map((row) => (\n setFocusedId(row.item.id)}\n onSelect={() => select(row.item.id)}\n onToggle={() => toggle(row.item.id)}\n onKeyDown={(event) => handleKeyDown(event, row)}\n onRenameStart={() => setRenamingId(row.item.id)}\n onRenameCancel={() => setRenamingId(null)}\n onRenameCommit={(label) => {\n const trimmed = label.trim();\n setRenamingId(null);\n if (!trimmed || trimmed === row.item.label) return;\n const before = renderedItems;\n updateItems(renameResource(before, row.item.id, trimmed));\n void Promise.resolve(onRename?.(row.item, trimmed)).catch(() => {\n updateItems(before);\n setAnnouncement(`Rename failed. ${row.item.label} was restored.`);\n });\n }}\n onMenuOpenChange={(open) => {\n setMenuOpenId(open ? row.item.id : null);\n if (!open) focusRow(row.item.id);\n }}\n onDragStart={(event, id) => {\n setDraggingId(id);\n event.dataTransfer.effectAllowed = \"move\";\n event.dataTransfer.setData(\"text/plain\", id);\n }}\n onDragEnd={() => {\n setDraggingId(null);\n setDropTarget(null);\n }}\n onDragOver={(event, targetRow) => {\n if (!draggingId || draggingId === targetRow.item.id) return;\n const source = findResource(renderedItems, draggingId);\n if (source && containsResource(source, targetRow.item.id)) return;\n event.preventDefault();\n event.stopPropagation();\n const rect = event.currentTarget.getBoundingClientRect();\n const ratio = (event.clientY - rect.top) / rect.height;\n const position =\n !targetRow.item.disabled &&\n canContain(targetRow.item) &&\n ratio >= 0.25 &&\n ratio <= 0.75\n ? \"inside\"\n : ratio < 0.5\n ? \"before\"\n : \"after\";\n setDropTarget({ id: targetRow.item.id, position });\n }}\n onDrop={(event) => {\n event.preventDefault();\n event.stopPropagation();\n if (draggingId && dropTarget) {\n void performMove({\n itemId: draggingId,\n targetId: dropTarget.id,\n position: dropTarget.position,\n });\n }\n }}\n renderIcon={renderIcon}\n renderMenu={renderMenu}\n setRef={(node) => {\n if (node) rowRefs.current.set(row.item.id, node);\n else rowRefs.current.delete(row.item.id);\n }}\n />\n ))}\n \n\n {draggingId ? (\n \n Move to top level\n \n ) : null}\n\n \n \n {announcement}\n \n \n );\n}\n"},{"path":"components/agents/approval-card/index.tsx","type":"registry:component","target":"@components/agents/approval-card/index.tsx","content":"\"use client\";\n// beui.dev/components/agents/chat-app\n\nimport {\n ArrowLeft,\n ArrowRight,\n Check,\n CircleHelp,\n LoaderCircle,\n MessageSquareText,\n X,\n} from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { AgentDisclosure } from \"@/components/agents/agent-disclosure\";\nimport { ActionSwapRollText } from \"@/components/motion/action-swap-roll\";\nimport { Button } from \"@/components/motion/button\";\nimport { Checkbox } from \"@/components/motion/checkbox\";\nimport { Input } from \"@/components/motion/input\";\nimport { RadioGroup, RadioGroupItem } from \"@/components/motion/radio\";\nimport { EASE_OUT, SPRING_SWAP } from \"@/lib/ease\";\nimport { cn } from \"@/lib/utils\";\nimport type {\n ApprovalCardAnswer,\n ApprovalCardAnswers,\n ApprovalCardProps,\n ApprovalCardQuestion,\n ApprovalCardStatus,\n} from \"./types\";\n\nexport type {\n ApprovalCardAnswer,\n ApprovalCardAnswers,\n ApprovalCardOption,\n ApprovalCardProps,\n ApprovalCardQuestion,\n ApprovalCardStatus,\n} from \"./types\";\n\nconst EMPTY_ANSWER: ApprovalCardAnswer = { selected: [], custom: \"\" };\n\nfunction getStatusLabel(status: ApprovalCardStatus) {\n if (status === \"submitting\") return \"Submitting\";\n if (status === \"approved\") return \"Approved\";\n if (status === \"rejected\") return \"Rejected\";\n if (status === \"changes-requested\") return \"Changes requested\";\n if (status === \"answered\") return \"Response submitted\";\n return \"Input required\";\n}\n\nfunction getStatusClass(status: ApprovalCardStatus) {\n if (status === \"approved\" || status === \"answered\") {\n return \"text-emerald-600 dark:text-emerald-400\";\n }\n if (status === \"rejected\") return \"text-rose-600 dark:text-rose-400\";\n if (status === \"changes-requested\") {\n return \"text-amber-600 dark:text-amber-400\";\n }\n return \"text-muted-foreground\";\n}\n\nfunction getStatusBadgeClass(status: ApprovalCardStatus) {\n if (status === \"pending\" || status === \"changes-requested\") {\n return \"border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400\";\n }\n if (status === \"submitting\") {\n return \"border-blue-500/30 bg-blue-500/10 text-blue-600 dark:text-blue-400\";\n }\n if (status === \"approved\" || status === \"answered\") {\n return \"border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400\";\n }\n return \"border-rose-500/30 bg-rose-500/10 text-rose-600 dark:text-rose-400\";\n}\n\nfunction isAnswered(answer: ApprovalCardAnswer) {\n return answer.selected.length > 0 || Boolean(answer.custom?.trim());\n}\n\nfunction QuestionOptions({\n question,\n answer,\n disabled,\n onChange,\n onSingleSelect,\n}: {\n question: ApprovalCardQuestion;\n answer: ApprovalCardAnswer;\n disabled: boolean;\n onChange: (answer: ApprovalCardAnswer) => void;\n onSingleSelect?: () => void;\n}) {\n const custom = answer.custom ?? \"\";\n\n return (\n
\n {question.options?.length ? (\n question.multiple ? (\n
\n {question.options.map((option) => (\n \n onChange({\n ...answer,\n selected: checked\n ? [...answer.selected, option.value]\n : answer.selected.filter((value) => value !== option.value),\n })\n }\n className=\"min-h-9 rounded-lg px-1.5 py-1\"\n />\n ))}\n
\n ) : (\n {\n onChange({ selected: [value], custom: \"\" });\n onSingleSelect?.();\n }}\n className=\"gap-0.5\"\n >\n {question.options.map((option) => (\n \n ))}\n \n )\n ) : null}\n\n {question.allowCustom ? (\n \n onChange({\n selected: question.multiple ? answer.selected : [],\n custom: value,\n })\n }\n className={cn(\"p-0.5\", question.options?.length && \"mt-1.5\")}\n classNames={{\n field:\n \"h-10 rounded-xl border-0 bg-background/70 focus-within:bg-background\",\n input: \"px-3 text-sm\",\n }}\n />\n ) : null}\n
\n );\n}\n\nfunction ProgressDots({ current, ids }: { current: number; ids: string[] }) {\n return (\n \n \n Question {current + 1} of {ids.length}\n \n {ids.map((id, index) => (\n \n ))}\n \n );\n}\n\nexport function ApprovalCard({\n title = \"Approval required\",\n description,\n children,\n questions = [],\n status = \"pending\",\n answers,\n defaultAnswers = {},\n onAnswersChange,\n step,\n defaultStep = 0,\n onStepChange,\n onSubmit,\n onApprove,\n onReject,\n onRequestChanges,\n onDismiss,\n approveLabel = \"Approve\",\n submitLabel = \"Submit response\",\n result,\n className,\n}: ApprovalCardProps) {\n const reduce = useReducedMotion() ?? false;\n const [internalAnswers, setInternalAnswers] =\n useState(defaultAnswers);\n const [internalStep, setInternalStep] = useState(defaultStep);\n const autoAdvanceTimer = useRef(undefined);\n const currentAnswers = answers ?? internalAnswers;\n const currentStep = Math.min(\n Math.max(0, step ?? internalStep),\n Math.max(0, questions.length - 1),\n );\n const question = questions[currentStep];\n const questionMode = questions.length > 0;\n const pending = status === \"pending\";\n const busy = status === \"submitting\";\n const interactive = pending || busy;\n const currentAnswer = question\n ? (currentAnswers[question.id] ?? EMPTY_ANSWER)\n : EMPTY_ANSWER;\n const displayTitle = question?.title ?? title;\n const titleKey = question?.id ?? String(status);\n const statusLabel = getStatusLabel(status);\n\n const clearAutoAdvance = useCallback(() => {\n if (autoAdvanceTimer.current === undefined) return;\n window.clearTimeout(autoAdvanceTimer.current);\n autoAdvanceTimer.current = undefined;\n }, []);\n\n useEffect(() => clearAutoAdvance, [clearAutoAdvance]);\n\n const setAnswers = useCallback(\n (next: ApprovalCardAnswers) => {\n if (answers === undefined) setInternalAnswers(next);\n onAnswersChange?.(next);\n },\n [answers, onAnswersChange],\n );\n\n const setStep = (next: number) => {\n clearAutoAdvance();\n if (step === undefined) setInternalStep(next);\n onStepChange?.(next);\n };\n\n const updateCurrentAnswer = (next: ApprovalCardAnswer) => {\n if (!question) return;\n setAnswers({ ...currentAnswers, [question.id]: next });\n };\n\n const continueQuestion = () => {\n if (currentStep < questions.length - 1) {\n setStep(currentStep + 1);\n return;\n }\n onSubmit?.(currentAnswers);\n };\n\n const queueAutoAdvance = () => {\n if (\n !question ||\n question.multiple ||\n question.autoAdvance === false ||\n currentStep >= questions.length - 1 ||\n busy\n ) {\n return;\n }\n\n clearAutoAdvance();\n autoAdvanceTimer.current = window.setTimeout(() => {\n setStep(currentStep + 1);\n }, 240);\n };\n\n return (\n \n
\n \n {busy ? (\n \n ) : interactive ? (\n questionMode ? (\n \n ) : (\n \n )\n ) : status === \"rejected\" ? (\n \n ) : (\n \n )}\n \n\n
\n
\n

\n \n {displayTitle}\n \n

\n {questionMode && interactive ? (\n \n {currentStep + 1}/{questions.length}\n \n ) : (\n \n {statusLabel}\n \n )}\n {onDismiss ? (\n \n \n \n ) : null}\n
\n\n \n {questionMode && question ? (\n \n \n {question.description ? (\n

\n {question.description}\n

\n ) : null}\n \n \n \n ) : (\n
\n {description ? (\n

\n {description}\n

\n ) : null}\n {children ?
{children}
: null}\n
\n )}\n\n {questionMode ? (\n
\n setStep(currentStep - 1)}\n className=\"rounded-full\"\n >\n \n \n item.id)}\n />\n \n {busy ? (\n \n ) : currentStep === questions.length - 1 ? (\n <>\n {submitLabel}\n \n \n ) : (\n \n )}\n \n
\n ) : (\n
\n \n {approveLabel}\n \n {onRequestChanges ? (\n \n Request changes\n \n ) : null}\n {onReject ? (\n \n Reject\n \n ) : null}\n
\n )}\n \n\n {!interactive ? (\n

\n {result ?? statusLabel}\n

\n ) : null}\n
\n
\n \n );\n}\n"},{"path":"components/agents/code-block.tsx","type":"registry:component","target":"@components/agents/code-block.tsx","content":"\"use client\";\n// beui.dev/components/agents/chat-app\n\nimport { Check, Copy, FileCode2, LoaderCircle } from \"lucide-react\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport {\n type ReactNode,\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport {\n type AgentCodeLanguage,\n AgentCodeLine,\n useAgentCodeTokens,\n} from \"@/components/agents/agent-code\";\nimport { SPRING_PRESS } from \"@/lib/ease\";\nimport { cn } from \"@/lib/utils\";\n\nexport type CodeBlockStatus = \"streaming\" | \"complete\";\n\nexport interface CodeBlockProps {\n code: string;\n language?: AgentCodeLanguage;\n filename?: ReactNode;\n status?: CodeBlockStatus;\n showLineNumbers?: boolean;\n highlightLines?: number[];\n maxHeight?: number;\n wrap?: boolean;\n copyable?: boolean;\n onCopy?: () => void | Promise;\n className?: string;\n}\n\nexport function CodeBlock({\n code,\n language = \"typescript\",\n filename,\n status = \"complete\",\n showLineNumbers = true,\n highlightLines = [],\n maxHeight = 280,\n wrap = false,\n copyable = true,\n onCopy,\n className,\n}: CodeBlockProps) {\n const reduce = useReducedMotion() ?? false;\n const viewportRef = useRef(null);\n const copyTimer = useRef(undefined);\n const [copied, setCopied] = useState(false);\n const streaming = status === \"streaming\";\n const tokens = useAgentCodeTokens(code, language);\n const highlighted = useMemo(\n () => new Set(highlightLines),\n [highlightLines],\n );\n let offset = 0;\n const lines = code.split(\"\\n\").map((content) => {\n const line = { content, offset };\n offset += content.length + 1;\n return line;\n });\n\n useEffect(\n () => () => {\n if (copyTimer.current) window.clearTimeout(copyTimer.current);\n },\n [],\n );\n\n useLayoutEffect(() => {\n const viewport = viewportRef.current;\n if (!viewport || !streaming) return;\n\n const frame = requestAnimationFrame(() => {\n if (viewport.scrollHeight <= viewport.clientHeight) return;\n if (typeof viewport.scrollTo === \"function\") {\n viewport.scrollTo({\n top: viewport.scrollHeight,\n behavior: reduce ? \"auto\" : \"smooth\",\n });\n } else {\n viewport.scrollTop = viewport.scrollHeight;\n }\n });\n return () => cancelAnimationFrame(frame);\n });\n\n const handleCopy = useCallback(async () => {\n if (onCopy) await onCopy();\n else await navigator.clipboard?.writeText(code);\n\n setCopied(true);\n if (copyTimer.current) window.clearTimeout(copyTimer.current);\n copyTimer.current = window.setTimeout(() => setCopied(false), 1600);\n }, [code, onCopy]);\n\n return (\n \n
\n \n {filename ? (\n \n {filename}\n \n ) : null}\n \n {language}\n \n \n {streaming ? (\n \n ) : (\n \n )}\n {streaming ? \"Writing\" : \"Ready\"}\n \n {copyable || onCopy ? (\n \n {copied ? (\n \n ) : (\n \n )}\n \n ) : null}\n
\n\n \n 
\n          \n            {lines.map((line, index) => {\n              const lineNumber = index + 1;\n              return (\n                \n                  {showLineNumbers ? (\n                    \n                      {lineNumber}\n                    \n                  ) : null}\n                  \n                \n              );\n            })}\n          \n
\n \n \n );\n}\n"},{"path":"components/agents/file-diff.tsx","type":"registry:component","target":"@components/agents/file-diff.tsx","content":"\"use client\";\n// beui.dev/components/agents/chat-app\n\nimport {\n Check,\n ChevronDown,\n Copy,\n FileCode2,\n LoaderCircle,\n} from \"lucide-react\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport {\n type ReactNode,\n useCallback,\n useEffect,\n useId,\n useLayoutEffect,\n useRef,\n useState,\n} from \"react\";\nimport {\n type AgentCodeLanguage,\n AgentCodeLine,\n useAgentCodeTokens,\n} from \"@/components/agents/agent-code\";\nimport { AgentDisclosure } from \"@/components/agents/agent-disclosure\";\nimport { SPRING_PRESS, SPRING_SWAP } from \"@/lib/ease\";\nimport { cn } from \"@/lib/utils\";\n\nexport type FileDiffStatus = \"streaming\" | \"complete\";\nexport type FileDiffLineType = \"added\" | \"removed\" | \"context\";\n\nexport interface FileDiffLine {\n id: string;\n type?: FileDiffLineType;\n oldLine?: number;\n newLine?: number;\n content: string;\n}\n\nexport interface FileDiffProps {\n file: ReactNode;\n lines: FileDiffLine[];\n status?: FileDiffStatus;\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n collapseOnComplete?: boolean;\n maxHeight?: number;\n language?: AgentCodeLanguage;\n copyText?: string;\n onCopy?: () => void | Promise;\n className?: string;\n}\n\nfunction ChangeCount({ value, type }: { value: number; type: \"added\" | \"removed\" }) {\n if (!value) return null;\n return (\n \n {type === \"added\" ? \"+\" : \"−\"}\n {value}\n \n );\n}\n\nexport function FileDiff({\n file,\n lines,\n status = \"streaming\",\n open,\n defaultOpen = true,\n onOpenChange,\n collapseOnComplete = true,\n maxHeight = 220,\n language = \"typescript\",\n copyText,\n onCopy,\n className,\n}: FileDiffProps) {\n const reduce = useReducedMotion() ?? false;\n const baseId = useId();\n const triggerId = `${baseId}-trigger`;\n const contentId = `${baseId}-content`;\n const viewportRef = useRef(null);\n const previousStatus = useRef(status);\n const copyTimer = useRef(undefined);\n const [copied, setCopied] = useState(false);\n const [internalOpen, setInternalOpen] = useState(defaultOpen);\n const currentOpen = open ?? internalOpen;\n const streaming = status === \"streaming\";\n const additions = lines.filter((line) => line.type === \"added\").length;\n const deletions = lines.filter((line) => line.type === \"removed\").length;\n const canCopy = Boolean(copyText || onCopy);\n const code = lines.map((line) => line.content).join(\"\\n\");\n const tokens = useAgentCodeTokens(code, language);\n\n const setOpen = useCallback(\n (next: boolean) => {\n if (open === undefined) setInternalOpen(next);\n onOpenChange?.(next);\n },\n [onOpenChange, open],\n );\n\n useEffect(() => {\n if (previousStatus.current !== \"streaming\" && status === \"streaming\") {\n setOpen(true);\n }\n if (\n previousStatus.current === \"streaming\" &&\n status === \"complete\" &&\n collapseOnComplete\n ) {\n setOpen(false);\n }\n previousStatus.current = status;\n }, [collapseOnComplete, setOpen, status]);\n\n useEffect(\n () => () => {\n if (copyTimer.current) window.clearTimeout(copyTimer.current);\n },\n [],\n );\n\n useLayoutEffect(() => {\n const viewport = viewportRef.current;\n if (!viewport || !currentOpen || !streaming) return;\n\n const frame = requestAnimationFrame(() => {\n if (viewport.scrollHeight <= viewport.clientHeight) return;\n if (typeof viewport.scrollTo === \"function\") {\n viewport.scrollTo({\n top: viewport.scrollHeight,\n behavior: reduce ? \"auto\" : \"smooth\",\n });\n } else {\n viewport.scrollTop = viewport.scrollHeight;\n }\n });\n return () => cancelAnimationFrame(frame);\n });\n\n const handleCopy = useCallback(async () => {\n if (onCopy) await onCopy();\n else if (copyText) await navigator.clipboard?.writeText(copyText);\n\n setCopied(true);\n if (copyTimer.current) window.clearTimeout(copyTimer.current);\n copyTimer.current = window.setTimeout(() => setCopied(false), 1600);\n }, [copyText, onCopy]);\n\n return (\n \n setOpen(!currentOpen)}\n className=\"group flex min-h-9 w-full items-center gap-2 rounded-md py-1 text-left outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n >\n \n \n {file}\n \n \n \n \n \n \n {streaming ? (\n \n ) : (\n \n )}\n \n \n \n \n \n\n \n
\n
\n \n
\n File changes\n {lines.map((line, index) => {\n const type = line.type ?? \"context\";\n return (\n \n \n {line.oldLine}\n \n \n {line.newLine}\n \n \n {type === \"added\"\n ? \"+\"\n : type === \"removed\"\n ? \"−\"\n : \"\"}\n \n \n
\n );\n })}\n
\n
\n\n {canCopy ? (\n
\n \n {copied ? (\n \n ) : (\n \n )}\n \n
\n ) : null}\n \n \n \n \n );\n}\n"},{"path":"components/agents/image-generation.tsx","type":"registry:component","target":"@components/agents/image-generation.tsx","content":"\"use client\";\n// beui.dev/components/agents/chat-app\n\nimport { Check, CircleAlert, RotateCcw } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { useEffect, useRef } from \"react\";\nimport { EASE_IN_OUT, EASE_OUT, SPRING_PRESS } from \"@/lib/ease\";\nimport { useHoverCapable } from \"@/lib/hooks/use-hover-capable\";\nimport { cn } from \"@/lib/utils\";\n\nexport type ImageGenerationStatus =\n | \"queued\"\n | \"generating\"\n | \"refining\"\n | \"complete\"\n | \"error\";\n\nexport interface ImageGenerationProps {\n /** The completed media. Pass an img, Next Image, canvas, video, or custom preview. */\n children?: ReactNode;\n status?: ImageGenerationStatus;\n /** Accessible description. Defaults to a description derived from prompt. */\n label?: string;\n prompt?: string;\n resolution?: string;\n /** CSS aspect ratio reserved before generated media is available. */\n aspectRatio?: CSSProperties[\"aspectRatio\"];\n size?: \"compact\" | \"fluid\";\n /** Lets the active dither cluster follow fine-pointer movement. */\n interactive?: boolean;\n statusText?: string;\n showStatus?: boolean;\n onRetry?: () => void;\n className?: string;\n mediaClassName?: string;\n statusClassName?: string;\n}\n\nconst STATUS_TEXT: Record = {\n queued: \"Waiting to generate\",\n generating: \"Generating image\",\n refining: \"Refining details\",\n complete: \"Image ready\",\n error: \"Generation failed\",\n};\n\nconst MEDIA_STATE: Record<\n ImageGenerationStatus,\n { filter: string; opacity: number; scale: number }\n> = {\n queued: { filter: \"blur(4px) saturate(0.75)\", opacity: 0, scale: 1.02 },\n generating: { filter: \"blur(3px) saturate(0.85)\", opacity: 0, scale: 1.015 },\n refining: { filter: \"blur(1.5px) saturate(0.95)\", opacity: 0.62, scale: 1.005 },\n complete: { filter: \"blur(0px) saturate(1)\", opacity: 1, scale: 1 },\n error: { filter: \"blur(2px) saturate(0.5)\", opacity: 0.28, scale: 1 },\n};\n\nconst OVERLAY_OPACITY: Record = {\n queued: 1,\n generating: 1,\n refining: 0.48,\n complete: 0,\n error: 0,\n};\n\nconst DOT_GAP = 10;\nconst TWO_PI = Math.PI * 2;\n\nfunction DitherMark({\n status,\n reduce,\n}: {\n status: ImageGenerationStatus;\n reduce: boolean;\n}) {\n if (status === \"complete\") {\n return ;\n }\n\n if (status === \"error\") {\n return ;\n }\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction DitherField({\n interactive,\n reduce,\n status,\n}: {\n interactive: boolean;\n reduce: boolean;\n status: ImageGenerationStatus;\n}) {\n const canHover = useHoverCapable();\n const canvasRef = useRef(null);\n\n useEffect(() => {\n const canvas = canvasRef.current;\n const context = canvas?.getContext(\"2d\");\n if (!canvas || !context) return;\n\n let frame = 0;\n let width = 0;\n let height = 0;\n let dotColor = \"currentColor\";\n const pointer = {\n x: 0,\n y: 0,\n targetX: 0,\n targetY: 0,\n inside: false,\n };\n const pointerEnabled = interactive && canHover && !reduce;\n\n const resize = () => {\n const rect = canvas.getBoundingClientRect();\n width = rect.width || canvas.clientWidth || 208;\n height = rect.height || canvas.clientHeight || 208;\n const dpr = Math.min(window.devicePixelRatio || 1, 2);\n\n canvas.width = Math.round(width * dpr);\n canvas.height = Math.round(height * dpr);\n context.setTransform(dpr, 0, 0, dpr, 0, 0);\n dotColor = window.getComputedStyle(canvas).color;\n pointer.x = width / 2;\n pointer.y = height / 2;\n pointer.targetX = pointer.x;\n pointer.targetY = pointer.y;\n };\n\n const draw = (time: number) => {\n context.clearRect(0, 0, width, height);\n\n if (!pointer.inside) {\n pointer.targetX =\n width / 2 + (reduce ? 0 : Math.sin(time / 1700) * width * 0.12);\n pointer.targetY =\n height / 2 + (reduce ? 0 : Math.cos(time / 2100) * height * 0.1);\n }\n\n const follow = reduce ? 1 : pointer.inside ? 0.16 : 0.045;\n pointer.x += (pointer.targetX - pointer.x) * follow;\n pointer.y += (pointer.targetY - pointer.y) * follow;\n\n const radius = Math.min(width, height) * 0.38;\n const columns = Math.ceil(width / DOT_GAP) + 1;\n const rows = Math.ceil(height / DOT_GAP) + 1;\n const offsetX = (width - (columns - 1) * DOT_GAP) / 2;\n const offsetY = (height - (rows - 1) * DOT_GAP) / 2;\n\n context.fillStyle = dotColor;\n\n for (let row = 0; row < rows; row += 1) {\n for (let column = 0; column < columns; column += 1) {\n const anchorX = offsetX + column * DOT_GAP;\n const anchorY = offsetY + row * DOT_GAP;\n const deltaX = anchorX - pointer.x;\n const deltaY = anchorY - pointer.y;\n const distance = Math.hypot(deltaX, deltaY);\n const proximity = Math.max(0, 1 - distance / radius);\n const influence = proximity * proximity * (3 - 2 * proximity);\n const displacement = influence * influence * 9;\n const directionX = distance > 0 ? deltaX / distance : 0;\n const directionY = distance > 0 ? deltaY / distance : 0;\n const x = anchorX + directionX * displacement;\n const y = anchorY + directionY * displacement;\n const dotRadius = 0.65 + influence * 0.85;\n\n context.globalAlpha = 0.17 + influence * 0.72;\n context.beginPath();\n context.arc(x, y, dotRadius, 0, TWO_PI);\n context.fill();\n }\n }\n\n context.globalAlpha = 1;\n if (!reduce) frame = window.requestAnimationFrame(draw);\n };\n\n const handlePointerMove = (event: PointerEvent) => {\n if (!pointerEnabled) return;\n const rect = canvas.getBoundingClientRect();\n pointer.inside = true;\n pointer.targetX = event.clientX - rect.left;\n pointer.targetY = event.clientY - rect.top;\n };\n\n const handlePointerLeave = () => {\n pointer.inside = false;\n };\n\n const resizeObserver =\n typeof ResizeObserver === \"undefined\"\n ? null\n : new ResizeObserver(resize);\n\n resize();\n resizeObserver?.observe(canvas);\n canvas.addEventListener(\"pointermove\", handlePointerMove, { passive: true });\n canvas.addEventListener(\"pointerleave\", handlePointerLeave);\n draw(0);\n\n return () => {\n if (frame) window.cancelAnimationFrame(frame);\n resizeObserver?.disconnect();\n canvas.removeEventListener(\"pointermove\", handlePointerMove);\n canvas.removeEventListener(\"pointerleave\", handlePointerLeave);\n };\n }, [canHover, interactive, reduce]);\n\n return (\n \n \n \n );\n}\n\nexport function ImageGeneration({\n children,\n status = \"generating\",\n label,\n prompt,\n resolution = \"1024 × 1024\",\n aspectRatio = \"1 / 1\",\n size = \"compact\",\n interactive = true,\n statusText,\n showStatus = true,\n onRetry,\n className,\n mediaClassName,\n statusClassName,\n}: ImageGenerationProps) {\n const reduce = useReducedMotion() ?? false;\n const active =\n status === \"queued\" || status === \"generating\" || status === \"refining\";\n const mediaState = MEDIA_STATE[status];\n const resolvedStatusText = statusText ?? STATUS_TEXT[status];\n const resolvedLabel =\n label ?? (prompt ? `${resolvedStatusText}: ${prompt}` : resolvedStatusText);\n\n return (\n \n \n \n *]:size-full [&>*]:object-cover [&_img]:size-full [&_img]:object-cover\",\n mediaClassName,\n )}\n >\n {children}\n \n\n \n {active ? (\n \n \n \n ) : null}\n \n\n {resolution ? (\n \n {resolution}\n \n ) : null}\n \n\n {showStatus || prompt ? (\n
\n {showStatus ? (\n \n \n \n \n {resolvedStatusText}\n \n \n
\n ) : null}\n {prompt ? (\n

\n “{prompt}”\n

\n ) : null}\n \n ) : null}\n\n {status === \"error\" && onRetry ? (\n \n \n Try again\n \n ) : null}\n \n \n );\n}\n"},{"path":"components/agents/loading-states/thinking-shimmer.tsx","type":"registry:component","target":"@components/agents/loading-states/thinking-shimmer.tsx","content":"// beui.dev/components/agents/chat-app\nimport type { ReactNode } from \"react\";\nimport { TextShimmer } from \"@/components/motion/text-shimmer\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface ThinkingShimmerProps {\n /** Loading message shown to the user. */\n children?: ReactNode;\n /** Seconds taken for one shimmer pass. */\n duration?: number;\n className?: string;\n}\n\nexport function ThinkingShimmer({\n children = \"Thinking…\",\n duration = 1.8,\n className,\n}: ThinkingShimmerProps) {\n return (\n \n {children}\n \n );\n}\n"},{"path":"components/agents/message.tsx","type":"registry:component","target":"@components/agents/message.tsx","content":"\"use client\";\n// beui.dev/components/agents/chat-app\n\nimport { motion, useReducedMotion } from \"motion/react\";\nimport {\n type ComponentPropsWithRef,\n createContext,\n type ReactNode,\n useContext,\n} from \"react\";\nimport { EASE_OUT } from \"@/lib/ease\";\nimport { cn } from \"@/lib/utils\";\nimport { MessageSideContext } from \"@/components/agents/message-context\";\n\nexport {\n MessageBubble,\n MessageBubbleCollapsible,\n MessageBubbleContent,\n MessageBubbleGroup,\n} from \"@/components/agents/message-bubble\";\nexport { MessageScroller } from \"@/components/agents/message-scroller\";\nexport type { MessageScrollerProps } from \"@/components/agents/message-scroller\";\n\nexport type MessageFrom = \"user\" | \"assistant\";\n\ninterface MessageContextValue {\n from: MessageFrom;\n}\n\nconst MessageContext = createContext({\n from: \"assistant\",\n});\n\nexport interface MessageProps\n extends Omit, \"children\"> {\n from: MessageFrom;\n /** Plays a trailing-edge pop-up once when this message row mounts. */\n animateIn?: boolean;\n children: ReactNode;\n}\n\nexport interface MessageGroupProps extends ComponentPropsWithRef<\"div\"> {\n spacing?: \"compact\" | \"default\";\n}\n\nexport interface MessageAvatarProps extends ComponentPropsWithRef<\"div\"> {\n /** Keep an empty avatar slot so grouped messages remain aligned. */\n placeholder?: boolean;\n}\n\nexport type MessageContentProps = ComponentPropsWithRef<\"div\">;\nexport type MessageHeaderProps = ComponentPropsWithRef<\"div\">;\nexport type MessageFooterProps = ComponentPropsWithRef<\"div\">;\n\nexport type MessageMarkerProps = ComponentPropsWithRef<\"div\">;\n\nexport interface MessageTypingProps extends ComponentPropsWithRef<\"span\"> {\n label?: string;\n}\n\n// A sent row should rise from the live edge without changing measured layout.\nconst MESSAGE_POP_UP = {\n type: \"spring\",\n stiffness: 480,\n damping: 32,\n mass: 0.62,\n} as const;\n\nexport function Message({\n from,\n animateIn = false,\n children,\n className,\n initial,\n animate,\n transition,\n exit,\n style,\n ...props\n}: MessageProps) {\n const reduce = useReducedMotion() ?? false;\n\n return (\n \n \n \n {children}\n \n \n \n );\n}\n\nexport function MessageGroup({\n spacing = \"compact\",\n className,\n ...props\n}: MessageGroupProps) {\n return (\n \n );\n}\n\nexport function MessageAvatar({\n placeholder = false,\n children,\n className,\n ...props\n}: MessageAvatarProps) {\n return (\n \n {children}\n \n );\n}\n\nexport function MessageContent({ className, ...props }: MessageContentProps) {\n const { from } = useContext(MessageContext);\n\n return (\n \n );\n}\n\nexport function MessageHeader({ className, ...props }: MessageHeaderProps) {\n const { from } = useContext(MessageContext);\n\n return (\n \n );\n}\n\nexport function MessageFooter({ className, ...props }: MessageFooterProps) {\n const { from } = useContext(MessageContext);\n\n return (\n \n );\n}\n\nexport function MessageMarker({ className, ...props }: MessageMarkerProps) {\n return (\n \n );\n}\n\nexport function MessageTyping({\n label = \"Responding\",\n className,\n ...props\n}: MessageTypingProps) {\n const reduce = useReducedMotion() ?? false;\n\n return (\n \n {label}\n {[0, 1, 2].map((index) => (\n \n ))}\n \n );\n}\n"},{"path":"components/agents/message-bubble.tsx","type":"registry:component","target":"@components/agents/message-bubble.tsx","content":"\"use client\";\n// beui.dev/components/agents/chat-app\n\nimport { ChevronDown } from \"lucide-react\";\nimport {\n type HTMLMotionProps,\n motion,\n useReducedMotion,\n} from \"motion/react\";\nimport {\n cloneElement,\n type ComponentPropsWithRef,\n createContext,\n type ReactElement,\n type ReactNode,\n type Ref,\n useCallback,\n useContext,\n useId,\n useState,\n} from \"react\";\nimport {\n EASE_OUT,\n SPRING_LAYOUT,\n SPRING_SWAP,\n} from \"@/lib/ease\";\nimport { cn } from \"@/lib/utils\";\nimport { MessageSideContext } from \"@/components/agents/message-context\";\n\nexport type MessageBubbleVariant =\n | \"solid\"\n | \"soft\"\n | \"tint\"\n | \"outline\"\n | \"ghost\"\n | \"danger\";\nexport type MessageBubbleAlign = \"start\" | \"end\";\n\ninterface MessageBubbleContextValue {\n align?: MessageBubbleAlign;\n animateIn: boolean;\n variant: MessageBubbleVariant;\n}\n\nconst MessageBubbleContext = createContext({\n animateIn: true,\n variant: \"soft\",\n});\nconst MessageBubbleLayoutContext = createContext<() => void>(() => {});\n\nexport interface MessageBubbleProps\n extends Omit, \"children\"> {\n variant?: MessageBubbleVariant;\n /** Defaults to the surrounding Message alignment when omitted. */\n align?: MessageBubbleAlign;\n /** Plays the bubble entrance once when this component mounts. */\n animateIn?: boolean;\n children?: ReactNode;\n}\n\nexport interface MessageBubbleContentProps\n extends ComponentPropsWithRef<\"div\"> {\n /** Replaces the content element while preserving bubble styling. */\n render?: ReactElement;\n}\n\nexport interface MessageBubbleGroupProps extends ComponentPropsWithRef<\"div\"> {\n spacing?: \"compact\" | \"default\";\n}\n\nexport interface MessageBubbleCollapsibleProps\n extends ComponentPropsWithRef<\"div\"> {\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n collapsedLines?: 2 | 3 | 4 | 5 | 6;\n moreLabel?: ReactNode;\n lessLabel?: ReactNode;\n contentClassName?: string;\n triggerClassName?: string;\n children?: ReactNode;\n}\n\nfunction mergeRefs(...refs: Array | undefined>) {\n return (node: T | null) => {\n for (const ref of refs) {\n if (typeof ref === \"function\") ref(node);\n else if (ref) ref.current = node;\n }\n };\n}\n\nconst BUBBLE_CONTENT_REVEAL = {\n duration: 0.12,\n ease: EASE_OUT,\n delay: 0.04,\n} as const;\n\n// Sent bubbles should pop into place quickly with one restrained overshoot.\nconst BUBBLE_POP = {\n type: \"spring\",\n stiffness: 520,\n damping: 27,\n mass: 0.52,\n} as const;\n\nexport function MessageBubble({\n variant = \"soft\",\n align,\n animateIn = false,\n className,\n children,\n initial,\n animate,\n exit,\n transition,\n layout,\n ...props\n}: MessageBubbleProps) {\n const reduce = useReducedMotion() ?? false;\n const messageSide = useContext(MessageSideContext);\n const resolvedAlign = align ?? messageSide ?? \"start\";\n\n return (\n \n \n {children}\n \n \n );\n}\n\nfunction bubbleContentClass(\n variant: MessageBubbleVariant,\n interactive: boolean,\n) {\n return cn(\n \"relative z-0 min-w-9 max-w-[82%] rounded-2xl px-3.5 py-2.5 text-sm leading-6 text-foreground\",\n \"[&_a]:font-medium [&_a]:underline [&_a]:underline-offset-4 [&_code]:rounded [&_code]:bg-background/60 [&_code]:px-1 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.9em] [&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-5 [&_p+p]:mt-2 [&_pre]:my-2 [&_pre]:overflow-x-auto [&_pre]:rounded-xl [&_pre]:bg-background/60 [&_pre]:p-3 [&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-5\",\n variant === \"solid\" && \"text-background\",\n variant === \"ghost\" && \"w-full max-w-none rounded-none px-0 py-0\",\n variant === \"danger\" && \"text-destructive\",\n interactive &&\n \"cursor-pointer text-left outline-none transition-[background-color,color,transform] duration-150 hover:brightness-[0.98] focus-visible:ring-2 focus-visible:ring-ring active:scale-[0.99]\",\n );\n}\n\nfunction bubbleSurfaceClass(\n variant: MessageBubbleVariant,\n align: MessageBubbleAlign,\n) {\n return cn(\n \"pointer-events-none absolute inset-0 -z-10 rounded-[inherit]\",\n align === \"end\" ? \"origin-bottom-right\" : \"origin-bottom-left\",\n variant === \"solid\" && \"bg-foreground\",\n variant === \"soft\" && \"bg-muted\",\n variant === \"tint\" && \"bg-primary/10\",\n variant === \"outline\" && \"border border-border/70 bg-background\",\n variant === \"danger\" && \"bg-destructive/10\",\n );\n}\n\nexport function MessageBubbleContent({\n render,\n className,\n children,\n ref,\n ...props\n}: MessageBubbleContentProps) {\n const reduce = useReducedMotion() ?? false;\n const { align = \"start\", animateIn, variant } =\n useContext(MessageBubbleContext);\n const [layoutVersion, setLayoutVersion] = useState(0);\n const notifyLayout = useCallback(\n () => setLayoutVersion((version) => version + 1),\n [],\n );\n const interactive =\n render?.type === \"button\" || render?.type === \"a\";\n const classes = cn(bubbleContentClass(variant, interactive), className);\n const composedChildren = (\n <>\n {variant !== \"ghost\" ? (\n \n ) : null}\n \n \n {children}\n \n \n \n );\n\n if (render) {\n const child = render as ReactElement<\n Record & { className?: string; ref?: Ref }\n >;\n\n return cloneElement(child, {\n ...props,\n ref: mergeRefs(child.props.ref, ref as Ref | undefined),\n className: cn(classes, child.props.className),\n children: composedChildren,\n \"data-slot\": \"message-bubble-content\",\n });\n }\n\n return (\n \n {composedChildren}\n \n );\n}\n\nexport function MessageBubbleGroup({\n spacing = \"compact\",\n className,\n ...props\n}: MessageBubbleGroupProps) {\n return (\n \n );\n}\n\nconst LINE_CLAMP_CLASS = {\n 2: \"line-clamp-2\",\n 3: \"line-clamp-3\",\n 4: \"line-clamp-4\",\n 5: \"line-clamp-5\",\n 6: \"line-clamp-6\",\n} as const;\n\nexport function MessageBubbleCollapsible({\n open,\n defaultOpen = false,\n onOpenChange,\n collapsedLines = 4,\n moreLabel = \"Show more\",\n lessLabel = \"Show less\",\n contentClassName,\n triggerClassName,\n className,\n children,\n ...props\n}: MessageBubbleCollapsibleProps) {\n const reduce = useReducedMotion() ?? false;\n const contentId = useId();\n const notifyLayout = useContext(MessageBubbleLayoutContext);\n const [internalOpen, setInternalOpen] = useState(defaultOpen);\n const currentOpen = open ?? internalOpen;\n\n const setOpen = useCallback(\n (next: boolean) => {\n notifyLayout();\n if (open === undefined) setInternalOpen(next);\n onOpenChange?.(next);\n },\n [notifyLayout, onOpenChange, open],\n );\n\n return (\n \n \n {children}\n \n setOpen(!currentOpen)}\n className={cn(\n \"mt-2 inline-flex h-7 items-center gap-1 rounded-full px-2 text-xs font-medium text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring\",\n triggerClassName,\n )}\n >\n {currentOpen ? lessLabel : moreLabel}\n \n \n \n \n \n );\n}\n"},{"path":"components/agents/message-scroller.tsx","type":"registry:component","target":"@components/agents/message-scroller.tsx","content":"\"use client\";\n// beui.dev/components/agents/chat-app\n\nimport { useReducedMotion } from \"motion/react\";\nimport {\n type ComponentPropsWithRef,\n type Ref,\n useCallback,\n useEffect,\n useLayoutEffect,\n useRef,\n useState,\n} from \"react\";\nimport {\n PreviewRail,\n type PreviewRailItem,\n} from \"@/components/motion/preview-rail\";\nimport { cn } from \"@/lib/utils\";\n\nconst PREVIEW_TITLE_LENGTH = 56;\nconst PREVIEW_DESCRIPTION_LENGTH = 88;\n\nfunction truncateMessageText(text: string, limit: number) {\n if (text.length <= limit) return text;\n const excerpt = text.slice(0, limit);\n const boundary = excerpt.lastIndexOf(\" \");\n return `${excerpt.slice(0, boundary > limit * 0.65 ? boundary : limit).trim()}…`;\n}\n\nfunction getMessageText(message: HTMLElement) {\n const surface =\n message.querySelector('[data-slot=\"message-bubble-content\"]') ??\n message.querySelector('[data-slot=\"message-content\"]') ??\n message;\n return (surface.textContent ?? \"\").replace(/\\s+/g, \" \").trim();\n}\n\nfunction getMessagePreview(\n message: HTMLElement,\n assistantResponse?: HTMLElement,\n) {\n const text = getMessageText(message);\n if (!text) {\n return { label: \"Message\", description: undefined };\n }\n\n if (text.length <= PREVIEW_TITLE_LENGTH) {\n const responseText = assistantResponse\n ? getMessageText(assistantResponse)\n : \"\";\n return {\n label: text,\n description: responseText\n ? truncateMessageText(responseText, PREVIEW_DESCRIPTION_LENGTH)\n : undefined,\n };\n }\n\n const titleExcerpt = text.slice(0, PREVIEW_TITLE_LENGTH);\n const titleBoundary = titleExcerpt.lastIndexOf(\" \");\n const titleEnd =\n titleBoundary > PREVIEW_TITLE_LENGTH * 0.65\n ? titleBoundary\n : PREVIEW_TITLE_LENGTH;\n const label = `${text.slice(0, titleEnd).trim()}…`;\n const responseText = assistantResponse\n ? getMessageText(assistantResponse)\n : text.slice(titleEnd).trim();\n return {\n label,\n description: responseText\n ? truncateMessageText(responseText, PREVIEW_DESCRIPTION_LENGTH)\n : undefined,\n };\n}\n\nexport interface MessageScrollerProps extends ComponentPropsWithRef<\"div\"> {\n /** Keep streamed output pinned while the reader remains near the end. */\n followOutput?: boolean;\n /** Distance from the end that still counts as following the output. */\n followThreshold?: number;\n /** Smoothly follow growing content. */\n smooth?: boolean;\n /** Reports when the reader leaves or returns to the live edge. */\n onFollowChange?: (following: boolean) => void;\n /** Accessible label for the scrollable transcript. */\n label?: string;\n /** Marks the transcript as waiting for more streamed content. */\n busy?: boolean;\n /** Adds a compact rail for navigating between rendered Message rows. */\n navigation?: \"rail\";\n /** Accessible label for the optional message navigation rail. */\n navigationLabel?: string;\n viewportClassName?: string;\n contentClassName?: string;\n railClassName?: string;\n viewportRef?: Ref;\n viewportProps?: Omit<\n ComponentPropsWithRef<\"section\">,\n \"children\" | \"className\" | \"ref\"\n >;\n contentProps?: Omit<\n ComponentPropsWithRef<\"div\">,\n \"children\" | \"className\" | \"ref\"\n >;\n}\n\nexport function MessageScroller({\n followOutput = true,\n followThreshold = 56,\n smooth = true,\n onFollowChange,\n label = \"Conversation\",\n busy,\n navigation,\n navigationLabel = \"Message navigation\",\n viewportClassName,\n contentClassName,\n railClassName,\n viewportRef: externalViewportRef,\n viewportProps,\n contentProps,\n className,\n children,\n ...props\n}: MessageScrollerProps) {\n const reduce = useReducedMotion() ?? false;\n const viewportRef = useRef(null);\n const contentRef = useRef(null);\n const followingRef = useRef(followOutput);\n const programmaticScrollRef = useRef(false);\n const scrollTimerRef = useRef(undefined);\n const frameRef = useRef(undefined);\n const railFrameRef = useRef(undefined);\n const railIdRef = useRef(new WeakMap());\n const railIdCounterRef = useRef(0);\n const railTargetsRef = useRef(new Map());\n const [railItems, setRailItems] = useState([]);\n const [activeRailId, setActiveRailId] = useState(\"\");\n const [railOverflowing, setRailOverflowing] = useState(false);\n const {\n onScroll: onViewportScroll,\n onWheel: onViewportWheel,\n onTouchStart: onViewportTouchStart,\n onKeyDown: onViewportKeyDown,\n ...restViewportProps\n } = viewportProps ?? {};\n\n const setViewportRef = useCallback(\n (node: HTMLElement | null) => {\n viewportRef.current = node;\n if (typeof externalViewportRef === \"function\") {\n externalViewportRef(node);\n } else if (externalViewportRef) {\n externalViewportRef.current = node;\n }\n },\n [externalViewportRef],\n );\n\n const setFollowing = useCallback(\n (next: boolean) => {\n if (followingRef.current === next) return;\n followingRef.current = next;\n onFollowChange?.(next);\n },\n [onFollowChange],\n );\n\n const updateActiveRailItem = useCallback(() => {\n if (navigation !== \"rail\") return;\n const viewport = viewportRef.current;\n const targets = [...railTargetsRef.current.entries()];\n if (!viewport || targets.length === 0) return;\n\n const viewportRect = viewport.getBoundingClientRect();\n if (viewport.scrollTop <= followThreshold) {\n const firstId = targets[0]?.[0] ?? \"\";\n setActiveRailId((current) => (current === firstId ? current : firstId));\n return;\n }\n\n const distanceFromEnd =\n viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight;\n if (distanceFromEnd <= followThreshold) {\n const lastId = targets.at(-1)?.[0] ?? \"\";\n setActiveRailId((current) => (current === lastId ? current : lastId));\n return;\n }\n\n const viewportCenter = viewportRect.top + viewportRect.height / 2;\n let nearestId = targets[0]?.[0] ?? \"\";\n let nearestDistance = Number.POSITIVE_INFINITY;\n\n for (const [id, element] of targets) {\n const rect = element.getBoundingClientRect();\n const messageCenter = rect.top + rect.height / 2;\n const distance = Math.abs(messageCenter - viewportCenter);\n if (distance < nearestDistance) {\n nearestDistance = distance;\n nearestId = id;\n }\n }\n\n setActiveRailId((current) =>\n current === nearestId ? current : nearestId,\n );\n }, [followThreshold, navigation]);\n\n const syncRailItems = useCallback(() => {\n if (navigation !== \"rail\") return;\n const content = contentRef.current;\n const viewport = viewportRef.current;\n if (!content || !viewport) return;\n\n const messages = Array.from(\n content.querySelectorAll('[data-slot=\"message\"]'),\n );\n const targets = new Map();\n const nextItems = messages.map((message, index) => {\n let id = railIdRef.current.get(message);\n if (!id) {\n railIdCounterRef.current += 1;\n id = `message-rail-${railIdCounterRef.current}`;\n railIdRef.current.set(message, id);\n }\n targets.set(id, message);\n const sender = message.dataset.from ?? \"conversation\";\n const assistantResponse =\n sender === \"user\"\n ? messages\n .slice(index + 1)\n .find((candidate) => candidate.dataset.from === \"assistant\")\n : undefined;\n const preview = getMessagePreview(message, assistantResponse);\n\n return {\n id,\n label: preview.label,\n description: preview.description,\n ariaLabel: `Go to ${sender} message ${index + 1} of ${messages.length}`,\n };\n });\n\n railTargetsRef.current = targets;\n setRailItems((current) => {\n const unchanged =\n current.length === nextItems.length &&\n current.every(\n (item, index) =>\n item.id === nextItems[index]?.id &&\n item.label === nextItems[index]?.label &&\n item.description === nextItems[index]?.description &&\n item.ariaLabel === nextItems[index]?.ariaLabel,\n );\n return unchanged ? current : nextItems;\n });\n setRailOverflowing(\n viewport.scrollHeight > viewport.clientHeight + 1 && messages.length > 1,\n );\n }, [navigation]);\n\n const scheduleRailSync = useCallback(() => {\n if (navigation !== \"rail\") return;\n if (railFrameRef.current) cancelAnimationFrame(railFrameRef.current);\n railFrameRef.current = requestAnimationFrame(() => {\n syncRailItems();\n updateActiveRailItem();\n });\n }, [navigation, syncRailItems, updateActiveRailItem]);\n\n const scrollToEnd = useCallback((behavior: ScrollBehavior) => {\n const viewport = viewportRef.current;\n if (!viewport) return;\n\n programmaticScrollRef.current = true;\n if (typeof viewport.scrollTo === \"function\") {\n viewport.scrollTo({ top: viewport.scrollHeight, behavior });\n } else {\n viewport.scrollTop = viewport.scrollHeight;\n }\n if (scrollTimerRef.current) window.clearTimeout(scrollTimerRef.current);\n scrollTimerRef.current = window.setTimeout(() => {\n programmaticScrollRef.current = false;\n }, behavior === \"smooth\" ? 320 : 0);\n }, []);\n\n const handleScroll = useCallback(() => {\n const viewport = viewportRef.current;\n if (!viewport || programmaticScrollRef.current) return;\n\n const distance =\n viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight;\n setFollowing(distance <= followThreshold);\n updateActiveRailItem();\n }, [followThreshold, setFollowing, updateActiveRailItem]);\n\n const leaveLiveEdge = useCallback(() => {\n programmaticScrollRef.current = false;\n }, []);\n\n useLayoutEffect(() => {\n followingRef.current = followOutput;\n if (!followOutput) return;\n\n frameRef.current = requestAnimationFrame(() => scrollToEnd(\"auto\"));\n return () => {\n if (frameRef.current) cancelAnimationFrame(frameRef.current);\n };\n }, [followOutput, scrollToEnd]);\n\n useEffect(() => {\n const content = contentRef.current;\n if (!content || typeof ResizeObserver === \"undefined\") return;\n\n const observer = new ResizeObserver(() => {\n scheduleRailSync();\n if (!followOutput || !followingRef.current) return;\n scrollToEnd(reduce || !smooth ? \"auto\" : \"smooth\");\n });\n observer.observe(content);\n\n return () => observer.disconnect();\n }, [followOutput, reduce, scheduleRailSync, scrollToEnd, smooth]);\n\n useEffect(() => {\n if (navigation !== \"rail\") {\n railTargetsRef.current.clear();\n setRailItems([]);\n setRailOverflowing(false);\n return;\n }\n\n const content = contentRef.current;\n const viewport = viewportRef.current;\n if (!content || !viewport) return;\n\n scheduleRailSync();\n const mutationObserver =\n typeof MutationObserver === \"undefined\"\n ? null\n : new MutationObserver(scheduleRailSync);\n mutationObserver?.observe(content, {\n childList: true,\n characterData: true,\n subtree: true,\n });\n\n const resizeObserver =\n typeof ResizeObserver === \"undefined\"\n ? null\n : new ResizeObserver(scheduleRailSync);\n resizeObserver?.observe(content);\n resizeObserver?.observe(viewport);\n\n return () => {\n mutationObserver?.disconnect();\n resizeObserver?.disconnect();\n };\n }, [navigation, scheduleRailSync]);\n\n useEffect(\n () => () => {\n if (scrollTimerRef.current) window.clearTimeout(scrollTimerRef.current);\n if (frameRef.current) cancelAnimationFrame(frameRef.current);\n if (railFrameRef.current) cancelAnimationFrame(railFrameRef.current);\n },\n [],\n );\n\n const scrollToRailItem = useCallback(\n (item: PreviewRailItem) => {\n const viewport = viewportRef.current;\n const target = railTargetsRef.current.get(item.id);\n if (!viewport || !target) return;\n\n const lastItem = railItems.at(-1)?.id === item.id;\n setActiveRailId(item.id);\n if (lastItem) {\n setFollowing(true);\n scrollToEnd(reduce || !smooth ? \"auto\" : \"smooth\");\n return;\n }\n\n setFollowing(false);\n programmaticScrollRef.current = true;\n const viewportRect = viewport.getBoundingClientRect();\n const targetRect = target.getBoundingClientRect();\n const top =\n viewport.scrollTop +\n targetRect.top -\n viewportRect.top -\n (viewport.clientHeight - targetRect.height) / 2;\n const behavior = reduce || !smooth ? \"auto\" : \"smooth\";\n\n if (typeof viewport.scrollTo === \"function\") {\n viewport.scrollTo({ top, behavior });\n } else {\n viewport.scrollTop = top;\n }\n if (scrollTimerRef.current) window.clearTimeout(scrollTimerRef.current);\n scrollTimerRef.current = window.setTimeout(() => {\n programmaticScrollRef.current = false;\n }, behavior === \"smooth\" ? 320 : 0);\n },\n [railItems, reduce, scrollToEnd, setFollowing, smooth],\n );\n\n const viewport = (\n {\n handleScroll();\n onViewportScroll?.(event);\n }}\n onWheel={(event) => {\n leaveLiveEdge();\n onViewportWheel?.(event);\n }}\n onTouchStart={(event) => {\n leaveLiveEdge();\n onViewportTouchStart?.(event);\n }}\n onKeyDown={(event) => {\n if ([\"ArrowUp\", \"PageUp\", \"Home\"].includes(event.key)) {\n leaveLiveEdge();\n }\n onViewportKeyDown?.(event);\n }}\n className={cn(\n \"h-full overflow-y-auto overscroll-contain outline-none [overflow-anchor:none] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring\",\n navigation === \"rail\"\n ? \"[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\"\n : \"[scrollbar-gutter:stable]\",\n viewportClassName,\n navigation === \"rail\" && railOverflowing && \"pr-10\",\n )}\n >\n \n {children}\n \n \n );\n\n return (\n \n {navigation === \"rail\" ? (\n \n {viewport}\n \n ) : (\n viewport\n )}\n \n );\n}\n"},{"path":"components/agents/prompt-input.tsx","type":"registry:component","target":"@components/agents/prompt-input.tsx","content":"\"use client\";\n// beui.dev/components/agents/chat-app\n\nimport { ArrowUp, Plus, Square } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport {\n type FormEvent,\n type KeyboardEvent,\n type ReactNode,\n type TextareaHTMLAttributes,\n useCallback,\n useEffect,\n useLayoutEffect,\n useRef,\n useState,\n} from \"react\";\nimport { Button } from \"@/components/motion/button\";\nimport {\n MorphPopover,\n MorphPopoverContent,\n MorphPopoverTrigger,\n} from \"@/components/motion/popover-morph\";\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n} from \"@/components/motion/select\";\nimport { SPRING_SWAP } from \"@/lib/ease\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface PromptModel {\n value: string;\n label: ReactNode;\n icon?: ReactNode;\n disabled?: boolean;\n}\n\nexport interface PromptAction {\n value: string;\n label: ReactNode;\n description?: ReactNode;\n icon?: ReactNode;\n disabled?: boolean;\n}\n\nexport interface PromptInputProps extends Omit<\n TextareaHTMLAttributes,\n \"value\" | \"defaultValue\" | \"onChange\" | \"onSubmit\" | \"children\"\n> {\n value?: string;\n defaultValue?: string;\n onValueChange?: (value: string) => void;\n models?: PromptModel[];\n model?: string;\n defaultModel?: string;\n onModelChange?: (model: string) => void;\n actions?: PromptAction[];\n onAction?: (action: string) => void;\n onSubmit?: (value: string, model?: string) => void | Promise;\n loading?: boolean;\n onStop?: () => void;\n minRows?: number;\n maxRows?: number;\n leadingAction?: ReactNode;\n className?: string;\n}\n\nexport function PromptInput({\n value,\n defaultValue = \"\",\n onValueChange,\n models = [],\n model,\n defaultModel,\n onModelChange,\n actions = [],\n onAction,\n onSubmit,\n loading = false,\n onStop,\n minRows = 2,\n maxRows = 8,\n leadingAction,\n className,\n disabled,\n placeholder = \"Ask the agent to do something…\",\n \"aria-label\": ariaLabel = \"Prompt\",\n onKeyDown,\n ...textareaProps\n}: PromptInputProps) {\n const reduce = useReducedMotion() ?? false;\n const textareaRef = useRef(null);\n const measurementRef = useRef(null);\n const [internalValue, setInternalValue] = useState(defaultValue);\n const [internalModel, setInternalModel] = useState(\n defaultModel ?? models[0]?.value,\n );\n const [actionsOpen, setActionsOpen] = useState(false);\n const currentValue = value ?? internalValue;\n const currentModelValue = model ?? internalModel;\n const currentModel = models.find(\n (option) => option.value === currentModelValue,\n );\n const canSubmit = Boolean(currentValue.trim()) && !disabled && !loading;\n\n const resizeTextarea = useCallback(() => {\n const textarea = textareaRef.current;\n const measurement = measurementRef.current;\n if (!textarea || !measurement || textarea.value !== currentValue) return;\n\n const lineHeight = 24;\n const nextHeight = Math.min(\n Math.max(measurement.scrollHeight, minRows * lineHeight),\n maxRows * lineHeight,\n );\n const height = `${nextHeight}px`;\n if (textarea.style.height !== height) textarea.style.height = height;\n }, [currentValue, maxRows, minRows]);\n\n useLayoutEffect(() => {\n resizeTextarea();\n }, [resizeTextarea]);\n\n useEffect(() => {\n const textarea = textareaRef.current;\n if (!textarea || typeof ResizeObserver === \"undefined\") return;\n const observer = new ResizeObserver(resizeTextarea);\n observer.observe(textarea);\n return () => observer.disconnect();\n }, [resizeTextarea]);\n\n const setValue = (next: string) => {\n if (value === undefined) setInternalValue(next);\n onValueChange?.(next);\n };\n\n const setModel = (next: string) => {\n if (model === undefined) setInternalModel(next);\n onModelChange?.(next);\n };\n\n const submit = (event?: FormEvent) => {\n event?.preventDefault();\n const prompt = currentValue.trim();\n if (!prompt || disabled || loading) return;\n\n onSubmit?.(prompt, currentModelValue);\n if (value === undefined) setInternalValue(\"\");\n textareaRef.current?.focus({ preventScroll: true });\n };\n\n const handleKeyDown = (event: KeyboardEvent) => {\n onKeyDown?.(event);\n if (\n event.defaultPrevented ||\n event.key !== \"Enter\" ||\n event.shiftKey ||\n event.nativeEvent.isComposing\n ) {\n return;\n }\n event.preventDefault();\n submit();\n };\n\n return (\n \n \n {`${currentValue}\\u200b`}\n \n setValue(event.target.value)}\n onKeyDown={handleKeyDown}\n className=\"scrollbar-hide block w-full resize-none overflow-y-auto bg-transparent px-2 pt-1.5 text-sm leading-6 text-foreground outline-none placeholder:text-muted-foreground/55\"\n />\n\n
\n {actions.length ? (\n \n \n \n \n \n \n \n \n\n \n {actions.map((action) => (\n {\n onAction?.(action.value);\n setActionsOpen(false);\n }}\n className=\"flex w-full items-start gap-2.5 rounded-lg px-2.5 py-2 text-left outline-none transition-colors hover:bg-muted focus-visible:bg-muted disabled:pointer-events-none disabled:opacity-50\"\n >\n {action.icon ? (\n \n {action.icon}\n \n ) : null}\n \n \n {action.label}\n \n {action.description ? (\n \n {action.description}\n \n ) : null}\n \n \n ))}\n \n \n ) : null}\n {leadingAction}\n {models.length ? (\n \n \n \n {currentModel?.icon ? (\n \n {currentModel.icon}\n \n ) : null}\n \n {currentModel?.label ?? \"Choose model\"}\n \n \n \n \n {models.map((option) => (\n \n \n {option.icon ? (\n \n {option.icon}\n \n ) : null}\n \n {option.label}\n \n \n \n ))}\n \n \n ) : null}\n\n \n \n \n {loading ? (\n \n ) : (\n \n )}\n \n \n \n
\n \n );\n}\n"},{"path":"components/agents/streaming-response.tsx","type":"registry:component","target":"@components/agents/streaming-response.tsx","content":"\"use client\";\n// beui.dev/components/agents/chat-app\n\nimport {\n Check,\n ChevronDown,\n Copy,\n RotateCcw,\n ThumbsDown,\n ThumbsUp,\n} from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport {\n type ReactNode,\n useCallback,\n useEffect,\n useId,\n useRef,\n useState,\n} from \"react\";\nimport {\n type CitationItem,\n CitationList,\n CitationStack,\n} from \"@/components/agents/citations\";\nimport { AgentDisclosure } from \"@/components/agents/agent-disclosure\";\nimport { EASE_OUT, SPRING_PRESS, SPRING_SWAP } from \"@/lib/ease\";\nimport { cn } from \"@/lib/utils\";\n\nexport type StreamingResponseStatus = \"streaming\" | \"complete\" | \"error\";\nexport type StreamingResponseFeedback = \"up\" | \"down\" | null;\n\nexport interface StreamingResponseProps {\n /** Rendered response content. Pass plain text or the output of a Markdown renderer. */\n children: ReactNode;\n status?: StreamingResponseStatus;\n /** Plain-text value copied by the built-in copy action. */\n copyText?: string;\n /** Overrides the built-in clipboard action. */\n onCopy?: () => void | Promise;\n onRetry?: () => void;\n /** Optional sources shown as a compact footer disclosure after streaming. */\n sources?: CitationItem[];\n sourcesOpen?: boolean;\n defaultSourcesOpen?: boolean;\n onSourcesOpenChange?: (open: boolean) => void;\n sourceIdPrefix?: string;\n feedback?: StreamingResponseFeedback;\n defaultFeedback?: StreamingResponseFeedback;\n onFeedbackChange?: (feedback: StreamingResponseFeedback) => void;\n /** Set false when a surrounding conversation log announces streamed text. */\n announce?: boolean;\n /** Hides the built-in completion actions without changing response status. */\n showActions?: boolean;\n className?: string;\n contentClassName?: string;\n actionsClassName?: string;\n}\n\nfunction ResponseAction({\n label,\n active = false,\n onClick,\n children,\n}: {\n label: string;\n active?: boolean;\n onClick: () => void;\n children: ReactNode;\n}) {\n const reduce = useReducedMotion() ?? false;\n\n return (\n \n {children}\n \n );\n}\n\nexport function StreamingResponse({\n children,\n status = \"streaming\",\n copyText,\n onCopy,\n onRetry,\n sources = [],\n sourcesOpen,\n defaultSourcesOpen = false,\n onSourcesOpenChange,\n sourceIdPrefix,\n feedback,\n defaultFeedback = null,\n onFeedbackChange,\n announce = true,\n showActions = true,\n className,\n contentClassName,\n actionsClassName,\n}: StreamingResponseProps) {\n const reduce = useReducedMotion() ?? false;\n const baseId = useId();\n const [copied, setCopied] = useState(false);\n const [internalFeedback, setInternalFeedback] =\n useState(defaultFeedback);\n const [internalSourcesOpen, setInternalSourcesOpen] =\n useState(defaultSourcesOpen);\n const copyTimer = useRef(undefined);\n const currentFeedback = feedback ?? internalFeedback;\n const currentSourcesOpen = sourcesOpen ?? internalSourcesOpen;\n const streaming = status === \"streaming\";\n const complete = status === \"complete\";\n const canCopy = Boolean(copyText || onCopy);\n const hasSources = sources.length > 0;\n const shouldShowActions =\n showActions && !streaming && (canCopy || onRetry || complete || hasSources);\n const sourcesContentId = `${baseId}-sources`;\n const resolvedSourcePrefix =\n sourceIdPrefix ?? `response-source-${baseId.replace(/:/g, \"\")}`;\n\n useEffect(\n () => () => {\n if (copyTimer.current) window.clearTimeout(copyTimer.current);\n },\n [],\n );\n\n const handleCopy = useCallback(async () => {\n if (onCopy) await onCopy();\n else if (copyText) await navigator.clipboard?.writeText(copyText);\n\n setCopied(true);\n if (copyTimer.current) window.clearTimeout(copyTimer.current);\n copyTimer.current = window.setTimeout(() => setCopied(false), 1600);\n }, [copyText, onCopy]);\n\n const setFeedback = (next: Exclude) => {\n const value = currentFeedback === next ? null : next;\n if (feedback === undefined) setInternalFeedback(value);\n onFeedbackChange?.(value);\n };\n\n const setSourcesOpen = useCallback(\n (next: boolean) => {\n if (sourcesOpen === undefined) setInternalSourcesOpen(next);\n onSourcesOpenChange?.(next);\n },\n [onSourcesOpenChange, sourcesOpen],\n );\n\n return (\n \n \n {children}\n \n\n \n {shouldShowActions ? (\n \n
\n {canCopy ? (\n \n {copied ? (\n \n ) : (\n \n )}\n \n ) : null}\n {onRetry ? (\n \n \n \n ) : null}\n {complete ? (\n <>\n setFeedback(\"up\")}\n >\n \n \n setFeedback(\"down\")}\n >\n \n \n \n ) : null}\n {hasSources ? (\n setSourcesOpen(!currentSourcesOpen)}\n className=\"group ml-1 inline-flex min-h-7 items-center gap-2 rounded-md px-1.5 text-xs text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring\"\n >\n \n \n {sources.length} {sources.length === 1 ? \"source\" : \"sources\"}\n \n \n \n \n \n ) : null}\n
\n\n {hasSources ? (\n \n \n \n ) : null}\n \n ) : null}\n \n \n );\n}\n"},{"path":"components/agents/todo-list.tsx","type":"registry:component","target":"@components/agents/todo-list.tsx","content":"\"use client\";\n// beui.dev/components/agents/chat-app\n\nimport { ChevronDown, ListTodo } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport {\n type ReactNode,\n useCallback,\n useEffect,\n useId,\n useLayoutEffect,\n useRef,\n useState,\n} from \"react\";\nimport { ActionSwapRollText } from \"@/components/motion/action-swap-roll\";\nimport { AgentDisclosure } from \"@/components/agents/agent-disclosure\";\nimport {\n EASE_OUT,\n SPRING_LAYOUT,\n SPRING_SWAP,\n} from \"@/lib/ease\";\nimport { cn } from \"@/lib/utils\";\n\nexport type TodoItemStatus =\n | \"pending\"\n | \"in-progress\"\n | \"completed\"\n | \"cancelled\";\n\nexport interface TodoItem {\n id: string;\n title: ReactNode;\n status?: TodoItemStatus;\n progress?: number;\n detail?: ReactNode;\n}\n\nexport interface TodoListProps {\n items: TodoItem[];\n title?: ReactNode;\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n collapseOnComplete?: boolean;\n maxHeight?: number;\n className?: string;\n}\n\nfunction statusLabel(status: TodoItemStatus) {\n if (status === \"in-progress\") return \"In progress\";\n if (status === \"completed\") return \"Completed\";\n if (status === \"cancelled\") return \"Cancelled\";\n return \"Pending\";\n}\n\nfunction TodoHeaderIcon({ complete }: { complete: boolean }) {\n const reduce = useReducedMotion() ?? false;\n\n return (\n \n \n {complete ? (\n \n \n \n \n ) : (\n \n \n \n )}\n \n \n );\n}\n\nfunction TodoStatusIcon({\n status,\n progress,\n}: {\n status: TodoItemStatus;\n progress?: number;\n}) {\n const reduce = useReducedMotion() ?? false;\n const normalizedProgress =\n progress === undefined ? 0.68 : Math.min(100, Math.max(0, progress)) / 100;\n\n return (\n \n \n \n \n \n \n );\n}\n\nexport function TodoList({\n items,\n title = \"To-dos\",\n open,\n defaultOpen = true,\n onOpenChange,\n collapseOnComplete = true,\n maxHeight = 248,\n className,\n}: TodoListProps) {\n const reduce = useReducedMotion() ?? false;\n const baseId = useId();\n const triggerId = `${baseId}-trigger`;\n const contentId = `${baseId}-content`;\n const viewportRef = useRef(null);\n const previousComplete = useRef(false);\n const [internalOpen, setInternalOpen] = useState(defaultOpen);\n const currentOpen = open ?? internalOpen;\n const completed = items.filter((item) => item.status === \"completed\").length;\n const allComplete = items.length > 0 && completed === items.length;\n const itemCount = items.length;\n\n const setOpen = useCallback(\n (next: boolean) => {\n if (open === undefined) setInternalOpen(next);\n onOpenChange?.(next);\n },\n [onOpenChange, open],\n );\n\n useEffect(() => {\n if (previousComplete.current && !allComplete) {\n setOpen(true);\n }\n if (!previousComplete.current && allComplete && collapseOnComplete) {\n setOpen(false);\n }\n previousComplete.current = allComplete;\n }, [allComplete, collapseOnComplete, setOpen]);\n\n useLayoutEffect(() => {\n const viewport = viewportRef.current;\n if (!viewport || itemCount === 0) return;\n\n const frame = requestAnimationFrame(() => {\n if (viewport.scrollHeight <= viewport.clientHeight) return;\n if (typeof viewport.scrollTo === \"function\") {\n viewport.scrollTo({\n top: viewport.scrollHeight,\n behavior: reduce ? \"auto\" : \"smooth\",\n });\n } else {\n viewport.scrollTop = viewport.scrollHeight;\n }\n });\n return () => cancelAnimationFrame(frame);\n }, [itemCount, reduce]);\n\n return (\n \n setOpen(!currentOpen)}\n className=\"group flex h-11 w-full items-center gap-2.5 rounded-2xl px-3.5 text-left outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n >\n \n

\n {title}\n

\n \n \n {completed} of {items.length} tasks completed\n \n \n \n {completed}\n \n /\n {items.length}\n \n \n \n \n \n \n\n \n \n {items.length ? (\n
    \n \n {items.map((item) => {\n const status = item.status ?? \"pending\";\n return (\n \n \n {statusLabel(status)}: \n \n \n {item.title}\n \n \n \n {item.detail ? (\n \n {item.detail}\n \n ) : null}\n \n );\n })}\n \n
\n ) : (\n

\n No tasks yet\n

\n )}\n \n \n \n );\n}\n"},{"path":"components/agents/tool-approval.tsx","type":"registry:component","target":"@components/agents/tool-approval.tsx","content":"\"use client\";\n// beui.dev/components/agents/chat-app\n\nimport {\n Check,\n ChevronDown,\n CircleAlert,\n LoaderCircle,\n ShieldCheck,\n X,\n} from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport {\n type ReactNode,\n useCallback,\n useEffect,\n useId,\n useRef,\n useState,\n} from \"react\";\nimport {\n AgentCode,\n type AgentCodeLanguage,\n} from \"@/components/agents/agent-code\";\nimport { AgentDisclosure } from \"@/components/agents/agent-disclosure\";\nimport { EASE_OUT, SPRING_PRESS, SPRING_SWAP } from \"@/lib/ease\";\nimport { cn } from \"@/lib/utils\";\n\nexport type ToolApprovalStatus =\n | \"pending\"\n | \"approving\"\n | \"approved\"\n | \"denied\"\n | \"running\"\n | \"complete\"\n | \"error\";\n\nexport interface ToolApprovalParameter {\n id: string;\n label: ReactNode;\n value: ReactNode;\n}\n\nexport interface ToolApprovalCodeProps {\n code: string;\n language?: AgentCodeLanguage;\n className?: string;\n}\n\nexport interface ToolApprovalProps {\n tool: ReactNode;\n title?: ReactNode;\n description?: ReactNode;\n parameters?: ToolApprovalParameter[];\n status?: ToolApprovalStatus;\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n onApprove?: () => void;\n onAlwaysAllow?: () => void;\n onDeny?: () => void;\n className?: string;\n}\n\nfunction getStatusCopy(status: ToolApprovalStatus) {\n if (status === \"approving\") return \"Approving\";\n if (status === \"approved\") return \"Approved\";\n if (status === \"denied\") return \"Denied\";\n if (status === \"running\") return \"Running\";\n if (status === \"complete\") return \"Completed\";\n if (status === \"error\") return \"Failed\";\n return \"Approval required\";\n}\n\nfunction getStatusBadgeClass(status: ToolApprovalStatus) {\n if (status === \"pending\") {\n return \"border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400\";\n }\n if (status === \"approving\" || status === \"running\") {\n return \"border-blue-500/30 bg-blue-500/10 text-blue-600 dark:text-blue-400\";\n }\n if (status === \"approved\" || status === \"complete\") {\n return \"border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400\";\n }\n return \"border-rose-500/30 bg-rose-500/10 text-rose-600 dark:text-rose-400\";\n}\n\nexport function ToolApprovalCode({\n code,\n language = \"bash\",\n className,\n}: ToolApprovalCodeProps) {\n return (\n \n );\n}\n\nexport function ToolApproval({\n tool,\n title = \"Allow this tool to run?\",\n description,\n parameters = [],\n status = \"pending\",\n open,\n defaultOpen = false,\n onOpenChange,\n onApprove,\n onAlwaysAllow,\n onDeny,\n className,\n}: ToolApprovalProps) {\n const reduce = useReducedMotion() ?? false;\n const baseId = useId();\n const detailsId = `${baseId}-details`;\n const previousStatus = useRef(status);\n const [internalOpen, setInternalOpen] = useState(defaultOpen);\n const currentOpen = open ?? internalOpen;\n const setOpen = useCallback(\n (next: boolean) => {\n if (open === undefined) setInternalOpen(next);\n onOpenChange?.(next);\n },\n [onOpenChange, open],\n );\n const busy = status === \"approving\" || status === \"running\";\n const pending = status === \"pending\";\n const error = status === \"error\";\n\n useEffect(() => {\n if (previousStatus.current === \"pending\" && status !== \"pending\") {\n setOpen(false);\n }\n previousStatus.current = status;\n }, [setOpen, status]);\n\n return (\n \n
\n \n {busy ? (\n \n ) : error ? (\n \n ) : status === \"denied\" ? (\n \n ) : status === \"approved\" || status === \"complete\" ? (\n \n ) : (\n \n )}\n \n\n
\n
\n
\n
{title}
\n
\n {tool}\n
\n
\n \n {getStatusCopy(status)}\n \n
\n {description ? (\n

{description}

\n ) : null}\n\n {parameters.length ? (\n setOpen(!currentOpen)}\n className=\"mt-2 inline-flex items-center gap-1 rounded-md text-xs font-medium text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring\"\n >\n View details\n \n \n \n \n ) : null}\n
\n
\n\n \n
\n {parameters.map((parameter) => (\n \n
{parameter.label}
\n
\n {parameter.value}\n
\n \n ))}\n
\n \n\n \n {pending ? (\n \n \n Allow once\n \n {onAlwaysAllow ? (\n \n Always allow\n \n ) : null}\n \n Deny\n \n \n ) : null}\n \n \n );\n}\n"},{"path":"components/agents/tool-result.tsx","type":"registry:component","target":"@components/agents/tool-result.tsx","content":"\"use client\";\n// beui.dev/components/agents/chat-app\n\nimport {\n Ban,\n Braces,\n Check,\n ChevronDown,\n CircleCheck,\n CircleX,\n Copy,\n LoaderCircle,\n RotateCcw,\n SquareTerminal,\n Wrench,\n} from \"lucide-react\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport {\n type ReactNode,\n useCallback,\n useEffect,\n useId,\n useLayoutEffect,\n useRef,\n useState,\n} from \"react\";\nimport {\n AgentCode,\n type AgentCodeLanguage,\n} from \"@/components/agents/agent-code\";\nimport { ActionSwapRollText } from \"@/components/motion/action-swap-roll\";\nimport { AgentDisclosure } from \"@/components/agents/agent-disclosure\";\nimport { SPRING_PRESS, SPRING_SWAP } from \"@/lib/ease\";\nimport { cn } from \"@/lib/utils\";\n\nexport type ToolResultStatus = \"running\" | \"success\" | \"error\" | \"cancelled\";\nexport type ToolResultKind = \"terminal\" | \"request\" | \"custom\";\n\nexport interface ToolResultProps {\n tool: ReactNode;\n title: ReactNode;\n children: ReactNode;\n status?: ToolResultStatus;\n kind?: ToolResultKind;\n meta?: ReactNode;\n icon?: ReactNode;\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n collapseOnComplete?: boolean;\n maxHeight?: number;\n copyText?: string;\n onCopy?: () => void | Promise;\n onRetry?: () => void;\n className?: string;\n contentClassName?: string;\n}\n\nexport interface ToolResultOutputProps {\n children: string;\n language?: AgentCodeLanguage;\n className?: string;\n}\n\nfunction getStatusLabel(status: ToolResultStatus) {\n if (status === \"running\") return \"Running\";\n if (status === \"success\") return \"Completed\";\n if (status === \"error\") return \"Failed\";\n return \"Cancelled\";\n}\n\nfunction getSwapKey(value: ReactNode, fallback: string) {\n return typeof value === \"string\" || typeof value === \"number\"\n ? String(value)\n : fallback;\n}\n\nfunction getStatusClass(status: ToolResultStatus) {\n if (status === \"running\") {\n return \"text-blue-600 dark:text-blue-400\";\n }\n if (status === \"success\") {\n return \"text-emerald-600 dark:text-emerald-400\";\n }\n if (status === \"error\") {\n return \"text-rose-600 dark:text-rose-400\";\n }\n return \"text-muted-foreground\";\n}\n\nfunction KindIcon({ kind }: { kind: ToolResultKind }) {\n if (kind === \"terminal\") return ;\n if (kind === \"request\") return ;\n return ;\n}\n\nfunction StatusIcon({\n status,\n reduce,\n}: {\n status: ToolResultStatus;\n reduce: boolean;\n}) {\n if (status === \"running\") {\n return ;\n }\n if (status === \"success\") return ;\n if (status === \"error\") return ;\n return ;\n}\n\nfunction ToolResultAction({\n label,\n onClick,\n children,\n}: {\n label: string;\n onClick: () => void;\n children: ReactNode;\n}) {\n const reduce = useReducedMotion() ?? false;\n\n return (\n \n {children}\n \n );\n}\n\nexport function ToolResultOutput({\n children,\n language = \"bash\",\n className,\n}: ToolResultOutputProps) {\n return (\n \n );\n}\n\nexport function ToolResult({\n tool,\n title,\n children,\n status = \"running\",\n kind = \"custom\",\n meta,\n icon,\n open,\n defaultOpen = true,\n onOpenChange,\n collapseOnComplete = true,\n maxHeight = 220,\n copyText,\n onCopy,\n onRetry,\n className,\n contentClassName,\n}: ToolResultProps) {\n const reduce = useReducedMotion() ?? false;\n const baseId = useId();\n const triggerId = `${baseId}-trigger`;\n const contentId = `${baseId}-content`;\n const viewportRef = useRef(null);\n const previousStatus = useRef(status);\n const copyTimer = useRef(undefined);\n const [copied, setCopied] = useState(false);\n const [internalOpen, setInternalOpen] = useState(defaultOpen);\n const currentOpen = open ?? internalOpen;\n const running = status === \"running\";\n const canCopy = Boolean(copyText || onCopy);\n const titleKey = getSwapKey(title, status);\n const metaKey = getSwapKey(meta, `${status}-meta`);\n const toolKey = getSwapKey(tool, `${status}-tool`);\n const statusLabel = getStatusLabel(status);\n\n const setOpen = useCallback(\n (next: boolean) => {\n if (open === undefined) setInternalOpen(next);\n onOpenChange?.(next);\n },\n [onOpenChange, open],\n );\n\n useEffect(() => {\n if (previousStatus.current !== \"running\" && status === \"running\") {\n setOpen(true);\n }\n if (\n previousStatus.current === \"running\" &&\n status !== \"running\" &&\n collapseOnComplete\n ) {\n setOpen(false);\n }\n previousStatus.current = status;\n }, [collapseOnComplete, setOpen, status]);\n\n useEffect(\n () => () => {\n if (copyTimer.current) window.clearTimeout(copyTimer.current);\n },\n [],\n );\n\n useLayoutEffect(() => {\n const viewport = viewportRef.current;\n if (!viewport || !currentOpen || !running) return;\n\n const frame = requestAnimationFrame(() => {\n if (typeof viewport.scrollTo === \"function\") {\n viewport.scrollTo({\n top: viewport.scrollHeight,\n behavior: reduce ? \"auto\" : \"smooth\",\n });\n } else {\n viewport.scrollTop = viewport.scrollHeight;\n }\n });\n return () => cancelAnimationFrame(frame);\n });\n\n const handleCopy = useCallback(async () => {\n if (onCopy) await onCopy();\n else if (copyText) await navigator.clipboard?.writeText(copyText);\n\n setCopied(true);\n if (copyTimer.current) window.clearTimeout(copyTimer.current);\n copyTimer.current = window.setTimeout(() => setCopied(false), 1600);\n }, [copyText, onCopy]);\n\n return (\n \n setOpen(!currentOpen)}\n className=\"group flex min-h-9 w-full items-center gap-2 rounded-md py-1 text-left outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n >\n \n {icon ?? }\n \n \n \n \n {title}\n \n \n {meta ? (\n \n \n {meta}\n \n \n ) : null}\n \n \n {tool}\n \n \n \n \n \n {statusLabel}\n \n \n \n \n \n\n \n
\n
\n \n
{children}
\n
\n\n {canCopy || onRetry ? (\n
\n {canCopy ? (\n \n {copied ? (\n \n ) : (\n \n )}\n \n ) : null}\n {onRetry ? (\n \n \n \n ) : null}\n \n \n {statusLabel}\n \n \n
\n ) : null}\n
\n \n \n \n );\n}\n"},{"path":"components/motion/animated-sidebar.tsx","type":"registry:component","target":"@components/motion/animated-sidebar.tsx","content":"\"use client\";\n\nimport { ChevronRight } from \"lucide-react\";\nimport {\n AnimatePresence,\n type HTMLMotionProps,\n motion,\n useReducedMotion,\n type Variants,\n} from \"motion/react\";\nimport {\n type ButtonHTMLAttributes,\n type CSSProperties,\n createContext,\n forwardRef,\n type HTMLAttributes,\n type ReactNode,\n useCallback,\n useContext,\n useEffect,\n useId,\n useRef,\n useState,\n useSyncExternalStore,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { SharedLayoutBg } from \"@/components/motion/shared-layout-bg\";\nimport {\n EASE_DRAWER,\n EASE_OUT,\n SPRING_LAYOUT,\n SPRING_PRESS,\n} from \"@/lib/ease\";\nimport { cn } from \"@/lib/utils\";\n\ntype SidebarState = \"expanded\" | \"collapsed\";\ntype SidebarSide = \"left\" | \"right\";\ntype SidebarVariant = \"sidebar\" | \"floating\" | \"inset\";\ntype SidebarCollapsible = \"offcanvas\" | \"icon\" | \"none\";\n\nconst MOBILE_QUERY = \"(max-width: 767px)\";\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\";\n\nconst PANEL_TRANSITION = {\n duration: 0.36,\n ease: EASE_DRAWER,\n} as const;\n\n// The desktop rail settles at a hard zero-width boundary. Keep the spring\n// critically damped so it cannot overshoot, pause against that boundary, and\n// then snap back during the final frame.\nconst SIDEBAR_MORPH_TRANSITION = {\n type: \"spring\",\n stiffness: 380,\n damping: 35,\n mass: 0.75,\n} as const;\n\nconst LABEL_ENTER_TRANSITION = {\n duration: 0.2,\n delay: 0.08,\n ease: EASE_OUT,\n} as const;\n\nconst LABEL_EXIT_TRANSITION = {\n duration: 0.12,\n ease: EASE_OUT,\n} as const;\n\nconst SUBMENU_TRANSITION = {\n duration: 0.18,\n ease: EASE_OUT,\n} as const;\n\nconst SUBMENU_VARIANTS: Variants = {\n closed: {\n opacity: 0,\n clipPath: \"inset(0 0 100% 0 round 8px)\",\n transition: {\n duration: 0.14,\n ease: EASE_OUT,\n staggerChildren: 0.025,\n staggerDirection: -1,\n },\n },\n open: {\n opacity: 1,\n clipPath: \"inset(0 0 0% 0 round 8px)\",\n transition: {\n duration: 0.2,\n delayChildren: 0.035,\n ease: EASE_OUT,\n staggerChildren: 0.045,\n },\n },\n};\n\nconst SUBMENU_ITEM_VARIANTS: Variants = {\n closed: {\n opacity: 0,\n y: -6,\n filter: \"blur(3px)\",\n },\n open: {\n opacity: 1,\n y: 0,\n filter: \"blur(0px)\",\n transition: SUBMENU_TRANSITION,\n },\n};\n\nconst REDUCED_TRANSITION = {\n duration: 0.16,\n ease: EASE_OUT,\n} as const;\n\nconst FOCUSABLE_SELECTOR = [\n \"a[href]\",\n \"button:not([disabled])\",\n \"input:not([disabled])\",\n \"select:not([disabled])\",\n \"textarea:not([disabled])\",\n \"[tabindex]:not([tabindex='-1'])\",\n].join(\",\");\n\nfunction subscribeToMobileQuery(callback: () => void) {\n const query = window.matchMedia(MOBILE_QUERY);\n query.addEventListener(\"change\", callback);\n return () => query.removeEventListener(\"change\", callback);\n}\n\nfunction getMobileSnapshot() {\n return window.matchMedia(MOBILE_QUERY).matches;\n}\n\nfunction getServerMobileSnapshot() {\n return false;\n}\n\nfunction useIsMobile() {\n return useSyncExternalStore(\n subscribeToMobileQuery,\n getMobileSnapshot,\n getServerMobileSnapshot,\n );\n}\n\ninterface AnimatedSidebarContextValue {\n isMobile: boolean;\n layoutId: string;\n open: boolean;\n openMobile: boolean;\n reduce: boolean;\n setOpen: (open: boolean) => void;\n setOpenMobile: (open: boolean) => void;\n state: SidebarState;\n toggleSidebar: () => void;\n triggerRef: React.RefObject;\n}\n\nconst AnimatedSidebarContext =\n createContext(null);\n\ninterface AnimatedSidebarPanelContextValue {\n collapsed: boolean;\n collapsible: SidebarCollapsible;\n side: SidebarSide;\n}\n\nconst AnimatedSidebarPanelContext =\n createContext(null);\n\nexport function useAnimatedSidebar() {\n const context = useContext(AnimatedSidebarContext);\n if (!context) {\n throw new Error(\n \"useAnimatedSidebar must be used inside AnimatedSidebarProvider.\",\n );\n }\n return context;\n}\n\nfunction useAnimatedSidebarPanel() {\n const context = useContext(AnimatedSidebarPanelContext);\n if (!context) {\n throw new Error(\n \"Animated Sidebar parts must be used inside AnimatedSidebar.\",\n );\n }\n return context;\n}\n\ntype SidebarProviderStyle = CSSProperties & {\n \"--sidebar-width\"?: string;\n \"--sidebar-width-icon\"?: string;\n \"--sidebar-width-mobile\"?: string;\n};\n\nexport interface AnimatedSidebarProviderProps\n extends HTMLAttributes {\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n openMobile?: boolean;\n defaultOpenMobile?: boolean;\n onOpenMobileChange?: (open: boolean) => void;\n style?: SidebarProviderStyle;\n}\n\nexport function AnimatedSidebarProvider({\n children,\n open,\n defaultOpen = true,\n onOpenChange,\n openMobile,\n defaultOpenMobile = false,\n onOpenMobileChange,\n className,\n style,\n ...props\n}: AnimatedSidebarProviderProps) {\n const [internalOpen, setInternalOpen] = useState(defaultOpen);\n const [internalOpenMobile, setInternalOpenMobile] =\n useState(defaultOpenMobile);\n const isMobile = useIsMobile();\n const reduce = useReducedMotion() ?? false;\n const generatedId = useId();\n const triggerRef = useRef(null);\n const desktopOpen = open ?? internalOpen;\n const mobileOpen = openMobile ?? internalOpenMobile;\n\n const setOpen = useCallback(\n (nextOpen: boolean) => {\n if (open === undefined) setInternalOpen(nextOpen);\n onOpenChange?.(nextOpen);\n },\n [onOpenChange, open],\n );\n\n const setOpenMobile = useCallback(\n (nextOpen: boolean) => {\n if (openMobile === undefined) setInternalOpenMobile(nextOpen);\n onOpenMobileChange?.(nextOpen);\n },\n [onOpenMobileChange, openMobile],\n );\n\n const toggleSidebar = useCallback(() => {\n if (isMobile) setOpenMobile(!mobileOpen);\n else setOpen(!desktopOpen);\n }, [desktopOpen, isMobile, mobileOpen, setOpen, setOpenMobile]);\n\n useEffect(() => {\n const handleShortcut = (event: KeyboardEvent) => {\n if (\n event.key.toLowerCase() === SIDEBAR_KEYBOARD_SHORTCUT &&\n (event.metaKey || event.ctrlKey)\n ) {\n event.preventDefault();\n toggleSidebar();\n }\n };\n\n window.addEventListener(\"keydown\", handleShortcut);\n return () => window.removeEventListener(\"keydown\", handleShortcut);\n }, [toggleSidebar]);\n\n return (\n \n \n {children}\n \n \n );\n}\n\nfunction MobileSidebar({\n ariaLabel,\n children,\n className,\n side,\n}: {\n ariaLabel: string;\n children: ReactNode;\n className?: string;\n side: SidebarSide;\n}) {\n const context = useAnimatedSidebar();\n const panelRef = useRef(null);\n const [mounted, setMounted] = useState(false);\n\n useEffect(() => setMounted(true), []);\n\n useEffect(() => {\n if (!context.openMobile) return;\n\n const body = document.body;\n const scrollY = window.scrollY;\n const previousBodyStyles = {\n left: body.style.left,\n overflow: body.style.overflow,\n position: body.style.position,\n right: body.style.right,\n top: body.style.top,\n };\n\n body.style.position = \"fixed\";\n body.style.top = `-${scrollY}px`;\n body.style.left = \"0\";\n body.style.right = \"0\";\n body.style.overflow = \"hidden\";\n\n const focusFrame = requestAnimationFrame(() => {\n const firstFocusable =\n panelRef.current?.querySelector(FOCUSABLE_SELECTOR);\n (firstFocusable ?? panelRef.current)?.focus({ preventScroll: true });\n });\n\n return () => {\n cancelAnimationFrame(focusFrame);\n body.style.position = previousBodyStyles.position;\n body.style.top = previousBodyStyles.top;\n body.style.left = previousBodyStyles.left;\n body.style.right = previousBodyStyles.right;\n body.style.overflow = previousBodyStyles.overflow;\n window.scrollTo(0, scrollY);\n context.triggerRef.current?.focus({ preventScroll: true });\n };\n }, [context.openMobile, context.triggerRef]);\n\n if (!mounted) return null;\n\n return createPortal(\n \n context.setOpenMobile(false)}\n className={cn(\n \"absolute inset-0 bg-black/40\",\n context.openMobile\n ? \"pointer-events-auto\"\n : \"pointer-events-none\",\n )}\n />\n\n {\n if (event.key === \"Escape\") {\n event.preventDefault();\n context.setOpenMobile(false);\n return;\n }\n\n if (event.key !== \"Tab\") return;\n const focusable = panelRef.current\n ? Array.from(\n panelRef.current.querySelectorAll(\n FOCUSABLE_SELECTOR,\n ),\n )\n : [];\n\n if (focusable.length === 0) {\n event.preventDefault();\n panelRef.current?.focus();\n return;\n }\n\n const first = focusable[0];\n const last = focusable[focusable.length - 1];\n if (event.shiftKey && document.activeElement === first) {\n event.preventDefault();\n last.focus();\n } else if (!event.shiftKey && document.activeElement === last) {\n event.preventDefault();\n first.focus();\n }\n }}\n className={cn(\n \"pointer-events-auto absolute inset-y-0 flex h-dvh w-(--sidebar-width-mobile) max-w-[88vw] flex-col overflow-hidden\",\n \"border-border bg-background shadow-2xl will-change-transform\",\n side === \"left\" ? \"left-0 border-r\" : \"right-0 border-l\",\n !context.openMobile && \"pointer-events-none\",\n className,\n )}\n >\n \n {children}\n \n \n ,\n document.body,\n );\n}\n\nexport interface AnimatedSidebarProps\n extends Omit, \"children\"> {\n children?: ReactNode;\n side?: SidebarSide;\n variant?: SidebarVariant;\n collapsible?: SidebarCollapsible;\n ariaLabel?: string;\n panelClassName?: string;\n}\n\nexport const AnimatedSidebar = forwardRef(\n function AnimatedSidebar(\n {\n side = \"left\",\n variant = \"sidebar\",\n collapsible = \"icon\",\n ariaLabel = \"Sidebar\",\n children,\n className,\n panelClassName,\n style,\n ...props\n },\n forwardedRef,\n ) {\n const context = useAnimatedSidebar();\n const collapsed = collapsible !== \"none\" && !context.open;\n const offcanvas = collapsed && collapsible === \"offcanvas\";\n const width = offcanvas\n ? \"0px\"\n : collapsed\n ? \"var(--sidebar-width-icon)\"\n : \"var(--sidebar-width)\";\n\n if (context.isMobile) {\n return (\n \n {children}\n \n );\n }\n\n return (\n