{"slug":"ai-sidebar","name":"AI Sidebar","description":"A collapsible AI workspace sidebar for folders, projects, files, and bookmarks with keyboard navigation, optimistic moves, inline rename, and overflow-aware labels.","category":"agents","source_url":"https://beui.dev/r/ai-sidebar/raw","detail_url":"https://beui.dev/r/ai-sidebar","raw_url":"https://beui.dev/r/ai-sidebar/raw","page_url":"https://beui.dev/components/agents/ai-sidebar","markdown_url":"https://beui.dev/components/agents/ai-sidebar.md","published_at":"2026-08-02","updated_at":"2026-09-26","dependencies":["clsx","lucide-react","motion","react","react-dom","tailwind-merge"],"internal":["@/components/agents/ai-sidebar","@/components/motion/animated-sidebar","@/components/motion/popover-morph","@/components/motion/popover-position","@/components/motion/shared-layout-bg","@/lib/ease","@/lib/hooks/use-touch-capable","@/lib/utils"],"files":[{"path":"components/agents/ai-sidebar.tsx","type":"component","content":"\"use client\";\n// beui.dev/components/agents/ai-sidebar\n\nimport {\n ArrowDown,\n ArrowUp,\n Bookmark,\n FileText,\n Folder,\n FolderInput,\n FolderOpen,\n type LucideIcon,\n MoreHorizontal,\n Pencil,\n Undo2,\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 { useTouchCapable } from \"@/lib/hooks/use-touch-capable\";\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\n/**\n * The moves this row can make right now, the same four the keyboard offers on\n * `Alt+Shift+Arrow`. A pointer drag is the fast path for them; a finger has no\n * drag to give, so the row menu carries them too. Absent keys are moves this\n * row cannot make from where it sits.\n */\nexport interface SidebarResourceMoveCommands {\n up?: () => void;\n down?: () => void;\n into?: { label: string; run: () => void };\n out?: () => void;\n}\n\nexport interface SidebarResourceMenuControls {\n close: () => void;\n rename: () => void;\n moves: SidebarResourceMoveCommands;\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\nfunction ResourceMenuAction({\n icon: Icon,\n onSelect,\n children,\n}: {\n icon: LucideIcon;\n onSelect: () => void;\n children: ReactNode;\n}) {\n return (\n \n \n {children}\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 moves: SidebarResourceMoveCommands;\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 moves,\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 canTouch = useTouchCapable();\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 runFromMenu = (action: () => void) => () => {\n onMenuOpenChange(false);\n action();\n };\n\n const menu = renderMenu?.(row.item, {\n close: () => onMenuOpenChange(false),\n rename: () => {\n onMenuOpenChange(false);\n onRenameStart();\n },\n moves,\n }) ?? (\n <>\n \n Rename\n \n {moves.up || moves.down || moves.into || moves.out ? (\n
\n ) : null}\n {moves.up ? (\n \n Move up\n \n ) : null}\n {moves.down ? (\n \n Move down\n \n ) : null}\n {moves.into ? (\n \n Move into {moves.into.label}\n \n ) : null}\n {moves.out ? (\n \n Move out\n \n ) : null}\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-muted 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={cn(\n \"grid size-7 shrink-0 place-items-center rounded-lg 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 // A finger never hovers, and this menu is the only path to\n // rename and move without a drag — keep it on screen there.\n canTouch ? \"opacity-100\" : \"opacity-0\",\n )}\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 // Which row carries the roving tabindex is resolved during render, never in\n // a passive effect: an effect lands after the browser paints, so the first\n // commit — and, on a server-rendered page, the markup itself — would have no\n // tabbable row and Tab would skip the whole tree. The same hole opens again\n // whenever a collapse or a rolled-back move takes the focused row out of it.\n const focusedRow =\n focusedId !== null && flat.some((row) => row.item.id === focusedId)\n ? focusedId\n : (flat[0]?.item.id ?? null);\n if (focusedId !== focusedRow) setFocusedId(focusedRow);\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 // The same four moves `Alt+Shift+Arrow` performs, handed to the row menu so\n // they survive on a device with no drag and no modifier keys.\n const moveCommands = useCallback(\n (row: FlatResource): SidebarResourceMoveCommands => {\n if (row.item.disabled) return {};\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 parentId = row.parentId;\n const commands: SidebarResourceMoveCommands = {};\n\n if (previous) {\n commands.up = () =>\n void performMove({\n itemId: row.item.id,\n targetId: previous.item.id,\n position: \"before\",\n });\n }\n if (next) {\n commands.down = () =>\n void performMove({\n itemId: row.item.id,\n targetId: next.item.id,\n position: \"after\",\n });\n }\n // Only offer the reparent when it lands somewhere new — the row above a\n // folder's first child is the folder it already lives in.\n if (previous && canContain(previous.item) && previous.item.id !== parentId) {\n commands.into = {\n label: previous.item.label,\n run: () => {\n setExpandedIds((current) => new Set(current).add(previous.item.id));\n void performMove({\n itemId: row.item.id,\n targetId: previous.item.id,\n position: \"inside\",\n });\n },\n };\n }\n if (parentId) {\n commands.out = () =>\n void performMove({\n itemId: row.item.id,\n targetId: parentId,\n position: \"after\",\n });\n }\n\n return commands;\n },\n [flat, performMove],\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/motion/popover-morph.tsx","type":"util","content":"\"use client\";\n\nimport {\n AnimatePresence,\n motion,\n animate,\n useMotionValue,\n usePresence,\n useReducedMotion,\n} from \"motion/react\";\nimport {\n cloneElement,\n createContext,\n isValidElement,\n type ReactElement,\n type ReactNode,\n type Ref,\n useCallback,\n useContext,\n useEffect,\n useId,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { usePopoverPortalPosition } from \"@/components/motion/popover-position\";\nimport { EASE_OUT, SPRING_PANEL } from \"@/lib/ease\";\nimport { cn } from \"@/lib/utils\";\n\ntype Side = \"top\" | \"bottom\";\ntype Align = \"start\" | \"end\";\n\ntype MorphContextValue = {\n open: boolean;\n setOpen: (open: boolean) => void;\n toggle: () => void;\n triggerId: string;\n contentId: string;\n /** The element the panel measures against — see `registerTrigger`. */\n triggerRef: React.MutableRefObject;\n registerTrigger: (node: HTMLElement | null) => void;\n contentRef: React.MutableRefObject;\n};\n\nconst MorphContext = createContext(null);\n\nfunction useMorphContext(component: string) {\n const ctx = useContext(MorphContext);\n if (!ctx) throw new Error(`${component} must be used within `);\n return ctx;\n}\n\nexport interface MorphPopoverProps {\n children: ReactNode;\n /** Controlled open state. */\n open?: boolean;\n /** Uncontrolled initial open state. */\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n className?: string;\n}\n\n/**\n * A popover whose panel morphs open from the trigger corner: it's laid out at\n * full size but clipped to the corner nearest the trigger, then unclips as one\n * piece. Closes on outside pointer / Escape. Controlled or uncontrolled.\n */\nexport function MorphPopover({\n children,\n open: controlledOpen,\n defaultOpen = false,\n onOpenChange,\n className,\n}: MorphPopoverProps) {\n const baseId = useId();\n const [root, setRoot] = useState(null);\n const [trigger, setTrigger] = useState(null);\n const contentRef = useRef(null);\n const [internalOpen, setInternalOpen] = useState(defaultOpen);\n const controlled = controlledOpen !== undefined;\n const open = controlled ? controlledOpen : internalOpen;\n\n const setOpen = useCallback(\n (next: boolean) => {\n if (!controlled) setInternalOpen(next);\n onOpenChange?.(next);\n },\n [controlled, onOpenChange],\n );\n const toggle = useCallback(() => setOpen(!open), [setOpen, open]);\n\n // A trigger normally registers itself through MorphPopoverTrigger. It can't\n // when something else already clones the element — a Tooltip wrapping the\n // button, say — and an unregistered trigger leaves the panel with nothing to\n // measure against, so it renders permanently invisible. The root boxes the\n // trigger exactly (the content portals out of it), so it stands in until a\n // real trigger registers, and stands in again if that one unmounts. Both are\n // state, so a trigger arriving while the panel is open re-anchors it.\n const anchorRef = useMemo>(\n () => ({ current: trigger ?? root }),\n [root, trigger],\n );\n\n // The panel is a `role=\"dialog\"` and goes inert the moment it closes, so\n // focus cannot be left sitting inside it: a dismissal hands it back to the\n // trigger, the way the ARIA dialog pattern asks. A pointer dismissal takes\n // the focus onward itself when it lands on something focusable — this only\n // catches the case where it would otherwise be stranded. When no trigger has\n // registered, the root anchor stands in only if it can actually hold focus;\n // there is nowhere better than where the keyboard already is, so leave it.\n const close = useCallback(() => {\n setOpen(false);\n const focused = document.activeElement;\n const inPanel =\n focused instanceof HTMLElement && contentRef.current?.contains(focused);\n if (!inPanel) return;\n const restore = trigger ?? (root && root.tabIndex >= 0 ? root : null);\n restore?.focus();\n }, [root, setOpen, trigger]);\n\n useEffect(() => {\n if (!open) return;\n const onKey = (e: KeyboardEvent) => e.key === \"Escape\" && close();\n const onPointer = (e: PointerEvent) => {\n const target = e.target as Node;\n if (\n root &&\n !root.contains(target) &&\n !contentRef.current?.contains(target)\n )\n close();\n };\n window.addEventListener(\"keydown\", onKey);\n window.addEventListener(\"pointerdown\", onPointer);\n return () => {\n window.removeEventListener(\"keydown\", onKey);\n window.removeEventListener(\"pointerdown\", onPointer);\n };\n }, [open, root, close]);\n\n const ctx = useMemo(\n () => ({\n open,\n setOpen,\n toggle,\n triggerId: `${baseId}-trigger`,\n contentId: `${baseId}-content`,\n triggerRef: anchorRef,\n registerTrigger: setTrigger,\n contentRef,\n }),\n [open, setOpen, toggle, baseId, anchorRef],\n );\n\n return (\n \n
\n {children}\n
\n \n );\n}\n\nexport interface MorphPopoverTriggerProps {\n children: ReactElement;\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 && typeof ref === \"object\")\n (ref as React.MutableRefObject).current = node;\n }\n };\n}\n\n/** Wraps a single element, toggling the popover on click. */\nexport function MorphPopoverTrigger({ children }: MorphPopoverTriggerProps) {\n const ctx = useMorphContext(\"MorphPopoverTrigger\");\n const child = children as ReactElement>;\n const childOnClick = child?.props?.onClick as\n | ((e: unknown) => void)\n | undefined;\n const childRef = (child?.props as { ref?: Ref } | undefined)\n ?.ref;\n // Register once per actual ref change, not once per open-state render.\n const mergedRef = useMemo(\n () => mergeRefs(childRef, ctx.registerTrigger),\n [childRef, ctx.registerTrigger],\n );\n if (!isValidElement(children)) return children;\n\n return cloneElement(child, {\n id: ctx.triggerId,\n ref: mergedRef,\n onClick: (e: unknown) => {\n childOnClick?.(e);\n ctx.toggle();\n },\n \"aria-haspopup\": \"dialog\",\n \"aria-expanded\": ctx.open,\n \"aria-controls\": ctx.open ? ctx.contentId : undefined,\n });\n}\n\nconst originFor = (side: Side, align: Align) =>\n `${side === \"bottom\" ? \"top\" : \"bottom\"} ${align === \"end\" ? \"right\" : \"left\"}`;\n\n// A clip that hides everything but the corner nearest the trigger, so the\n// panel appears to grow out of it. inset(top right bottom left).\nfunction clipAt(side: Side, align: Align, radius: number, inset: number) {\n const top = side === \"bottom\" ? \"0%\" : `${inset}%`;\n const bottom = side === \"bottom\" ? `${inset}%` : \"0%\";\n const right = align === \"end\" ? \"0%\" : `${inset}%`;\n const left = align === \"end\" ? `${inset}%` : \"0%\";\n return `inset(${top} ${right} ${bottom} ${left} round ${radius}px)`;\n}\n\n// Preserve the original spring character on the wrapper, but tween the complex\n// clip-path so it cannot snap when the spring resolves its final distance.\nconst MORPH_CLIP_TRANSITION = { duration: 0.32, ease: EASE_OUT } as const;\n\nexport interface MorphPopoverContentProps {\n children: ReactNode;\n side?: Side;\n align?: Align;\n /** Gap between trigger and panel, in px. Default 8. */\n sideOffset?: number;\n /** Panel corner radius, in px. Default 16. */\n radius?: number;\n className?: string;\n}\n\nexport function MorphPopoverContent(props: MorphPopoverContentProps) {\n const ctx = useMorphContext(\"MorphPopoverContent\");\n const [portalReady, setPortalReady] = useState(false);\n useEffect(() => setPortalReady(true), []);\n if (!portalReady) return null;\n return createPortal(\n \n {ctx.open && }\n ,\n document.body,\n );\n}\n\n// Measurement belongs to the mounted portal session: reopening must not start\n// an entrance at the previous session's coordinates before measuring this one.\nfunction MorphPopoverSurface({\n children,\n side = \"bottom\",\n align = \"end\",\n sideOffset = 8,\n radius = 16,\n className,\n}: MorphPopoverContentProps) {\n const ctx = useMorphContext(\"MorphPopoverContent\");\n const reduce = useReducedMotion() ?? false;\n const [isPresent, safeToRemove] = usePresence();\n const layout = usePopoverPortalPosition(\n ctx.triggerRef,\n ctx.contentRef,\n isPresent,\n );\n\n const left = layout\n ? align === \"end\"\n ? layout.trigger.left + layout.trigger.width - layout.content.width\n : layout.trigger.left\n : 0;\n const top = layout\n ? side === \"bottom\"\n ? layout.trigger.top + layout.trigger.height + sideOffset\n : layout.trigger.top - layout.content.height - sideOffset\n : 0;\n\n // Both directions travel between the exact same hidden/show states. Exit\n // targets \"hidden\" directly instead of introducing separate choreography.\n const wrap = reduce\n ? undefined\n : {\n hidden: { scale: 0.96, transition: SPRING_PANEL },\n show: { scale: 1, transition: SPRING_PANEL },\n };\n const clip = reduce\n ? undefined\n : {\n hidden: {\n clipPath: clipAt(side, align, radius, 92),\n transition: MORPH_CLIP_TRANSITION,\n },\n show: {\n clipPath: clipAt(side, align, radius, 0),\n transition: MORPH_CLIP_TRANSITION,\n },\n };\n // Animate the value directly so opacity stays in the inline style throughout\n // the entrance. A native opacity animation can expose the initial inline 0\n // for a frame when it finishes, before Motion writes the final value.\n const opacity = useMotionValue(0);\n const ready = layout !== null;\n useEffect(() => {\n if (!ready) {\n if (!isPresent) safeToRemove?.();\n return;\n }\n const animation = animate(opacity, isPresent ? 1 : 0, {\n ...(reduce ? { duration: 0.12 } : SPRING_PANEL),\n onComplete: () => {\n if (!isPresent) safeToRemove?.();\n },\n });\n return () => animation.stop();\n }, [opacity, ready, isPresent, reduce, safeToRemove]);\n\n return (\n \n \n {children}\n \n \n );\n}\n"},{"path":"lib/ease.ts","type":"util","content":"// Shared motion tokens. Easing curves mirror the CSS custom properties in\n// globals.css; springs are the canonical physics used across components.\n// Strong custom variants — defaults like `ease-in`/`ease-out` feel weak.\n\nexport const EASE_OUT = [0.16, 1, 0.3, 1] as const;\nexport const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const;\nexport const EASE_DRAWER = [0.32, 0.72, 0, 1] as const;\n\n/** CSS string form of EASE_OUT for inline style transitions. */\nexport const EASE_OUT_CSS = \"cubic-bezier(0.16, 1, 0.3, 1)\";\n\n/** Press feedback on buttons and other tappable surfaces. */\nexport const SPRING_PRESS = {\n type: \"spring\",\n stiffness: 500,\n damping: 30,\n mass: 0.6,\n} as const;\n\n/** Content swaps — label/icon slots trading places inside a control. */\nexport const SPRING_SWAP = {\n type: \"spring\",\n stiffness: 460,\n damping: 30,\n mass: 0.55,\n} as const;\n\n/** Overlay panel entrances — modals and sheets summoned by pointer. */\nexport const SPRING_PANEL = {\n type: \"spring\",\n stiffness: 420,\n damping: 40,\n mass: 0.5,\n} as const;\n\n/** Shared-layout glides — pills, indicators and panels morphing between positions. */\nexport const SPRING_LAYOUT = {\n type: \"spring\",\n stiffness: 360,\n damping: 32,\n mass: 0.6,\n} as const;\n\n/** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */\nexport const SPRING_MOUSE = {\n stiffness: 200,\n damping: 15,\n mass: 0.3,\n} as const;\n\n/** Dragged handles and fills (sliders) — critically damped `useSpring` config,\n * so the value follows the pointer butterily and never rebounds off an end. */\nexport const SPRING_GLIDE = {\n stiffness: 700,\n damping: 50,\n mass: 0.5,\n} as const;\n"},{"path":"lib/hooks/use-touch-capable.ts","type":"util","content":"\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\n/**\n * Returns true on devices that can be touched, whatever else they claim.\n *\n * This is not the inverse of `useHoverCapable`: iPadOS Safari browses\n * desktop-class and answers `(hover: hover) and (pointer: fine)` with true\n * while a finger is the only input there is, so anything that treats\n * hover-capable as \"no touch here\" strands every iPad. Gate the *touch path*\n * of an interaction on this hook and leave hover-only polish on\n * `useHoverCapable`, so a component that opens on hover also opens on tap.\n */\nexport function useTouchCapable() {\n const [canTouch, setCanTouch] = useState(false);\n\n useEffect(() => {\n if (typeof window === \"undefined\") return;\n const mq = window.matchMedia?.(\"(any-pointer: coarse)\");\n // iPadOS disguises its pointer media queries; maxTouchPoints it reports\n // honestly, which is what makes it the standard iPad tell.\n const update = () =>\n setCanTouch(Boolean(mq?.matches) || navigator.maxTouchPoints > 0);\n update();\n mq?.addEventListener?.(\"change\", update);\n return () => mq?.removeEventListener?.(\"change\", update);\n }, []);\n\n return canTouch;\n}\n"},{"path":"lib/utils.ts","type":"util","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n"},{"path":"components/motion/popover-position.ts","type":"util","content":"\"use client\";\n\nimport {\n type MutableRefObject,\n useCallback,\n useLayoutEffect,\n useState,\n} from \"react\";\n\nexport type PortalLayout = {\n trigger: {\n left: number;\n top: number;\n width: number;\n height: number;\n };\n content: {\n width: number;\n height: number;\n };\n};\n\nfunction sameLayout(a: PortalLayout | null, b: PortalLayout) {\n return (\n a?.trigger.left === b.trigger.left &&\n a.trigger.top === b.trigger.top &&\n a.trigger.width === b.trigger.width &&\n a.trigger.height === b.trigger.height &&\n a.content.width === b.content.width &&\n a.content.height === b.content.height\n );\n}\n\n/** Measures a trigger and portalled panel in viewport coordinates. */\nexport function usePopoverPortalPosition<\n TriggerElement extends HTMLElement,\n ContentElement extends HTMLElement,\n>(\n triggerRef: MutableRefObject,\n contentRef: MutableRefObject,\n active: boolean,\n) {\n const [layout, setLayout] = useState(null);\n\n const update = useCallback(() => {\n const trigger = triggerRef.current;\n const content = contentRef.current;\n if (!trigger || !content) return;\n\n const rect = trigger.getBoundingClientRect();\n const next: PortalLayout = {\n trigger: {\n left: rect.left,\n top: rect.top,\n width: rect.width,\n height: rect.height,\n },\n content: {\n width: content.offsetWidth,\n height: content.offsetHeight,\n },\n };\n setLayout((current) => (sameLayout(current, next) ? current : next));\n }, [contentRef, triggerRef]);\n\n useLayoutEffect(() => {\n update();\n if (!active) return;\n\n const trigger = triggerRef.current;\n const content = contentRef.current;\n const observer = new ResizeObserver(update);\n if (trigger) observer.observe(trigger);\n if (content) observer.observe(content);\n\n window.addEventListener(\"scroll\", update, true);\n window.addEventListener(\"resize\", update);\n return () => {\n observer.disconnect();\n window.removeEventListener(\"scroll\", update, true);\n window.removeEventListener(\"resize\", update);\n };\n }, [active, contentRef, triggerRef, update]);\n\n return layout;\n}\n"},{"path":"components/previews/agents/ai-sidebar.preview.tsx","type":"preview","content":"\"use client\";\n\nimport {\n Clock3,\n GitPullRequest,\n LayoutGrid,\n PanelLeft,\n Plug,\n SquarePen,\n} from \"lucide-react\";\nimport { useState } from \"react\";\nimport {\n AnimatedSidebar,\n AnimatedSidebarContent,\n AnimatedSidebarGroup,\n AnimatedSidebarGroupContent,\n AnimatedSidebarGroupLabel,\n AnimatedSidebarInset,\n AnimatedSidebarMenu,\n AnimatedSidebarMenuButton,\n AnimatedSidebarMenuItem,\n AnimatedSidebarProvider,\n AnimatedSidebarRail,\n AnimatedSidebarTrigger,\n} from \"@/components/motion/animated-sidebar\";\nimport {\n AISidebar,\n type SidebarResource,\n type SidebarResourceMove,\n} from \"@/components/agents/ai-sidebar\";\n\nconst resources: SidebarResource[] = [\n {\n id: \"design-system\",\n label: \"Design system\",\n kind: \"project\",\n },\n {\n id: \"client-portal\",\n label: \"Client portal\",\n kind: \"project\",\n },\n {\n id: \"marketing-site\",\n label: \"Marketing website\",\n kind: \"project\",\n },\n {\n id: \"platform\",\n label: \"Platform\",\n kind: \"project\",\n children: [\n { id: \"api\", label: \"API migration\", kind: \"file\" },\n { id: \"billing\", label: \"Billing states\", kind: \"file\" },\n { id: \"docs\", label: \"Read platform docs\", kind: \"bookmark\" },\n ],\n },\n {\n id: \"mobile-app\",\n label: \"Mobile app\",\n kind: \"project\",\n },\n {\n id: \"research-lab\",\n label: \"Research lab\",\n kind: \"folder\",\n },\n {\n id: \"agent-workspace\",\n label: \"Agent workspace\",\n kind: \"project\",\n children: [\n {\n id: \"resource-review\",\n label: \"Review resource sidebar interaction details\",\n kind: \"file\",\n },\n {\n id: \"release-offer\",\n label: \"Prepare release announcement\",\n kind: \"file\",\n },\n {\n id: \"haptics\",\n label: \"Explore interaction feedback\",\n kind: \"bookmark\",\n },\n {\n id: \"promotion\",\n label: \"Plan launch distribution\",\n kind: \"file\",\n },\n {\n id: \"motion-research\",\n label: \"Research motion implementation patterns\",\n kind: \"bookmark\",\n },\n ],\n },\n {\n id: \"release-notes\",\n label: \"Release notes\",\n kind: \"file\",\n },\n];\n\nconst actions = [\n { label: \"New workspace\", icon: SquarePen },\n { label: \"Pull requests\", icon: GitPullRequest },\n { label: \"Sites\", icon: LayoutGrid },\n { label: \"Scheduled\", icon: Clock3 },\n { label: \"Extensions\", icon: Plug },\n] as const;\n\nfunction findLabel(items: SidebarResource[], id: string): string | undefined {\n for (const item of items) {\n if (item.id === id) return item.label;\n const child = item.children ? findLabel(item.children, id) : undefined;\n if (child) return child;\n }\n}\n\nexport function AISidebarPreview() {\n const [active, setActive] = useState(\"resource-review\");\n const [items, setItems] = useState(resources);\n const activeLabel = findLabel(items, active) ?? active;\n\n const move = async (_event: SidebarResourceMove) => {\n await new Promise((resolve) => window.setTimeout(resolve, 450));\n };\n\n return (\n
\n \n \n \n \n \n \n {actions.map(({ label, icon: Icon }) => (\n \n }\n onSelect={() => {}}\n className=\"font-normal text-foreground\"\n >\n {label}\n \n \n ))}\n \n \n \n\n \n \n Projects\n \n \n
\n \n
\n \n \n \n \n \n \n\n \n
\n
\n \n \n \n
\n

\n Workspace\n

\n

\n Agent workspace\n

\n
\n
\n \n Draft\n \n
\n\n
\n
\n

Selected resource

\n

\n {activeLabel}\n

\n

\n Keep the resource tree predictable while files move between\n projects, labels overflow, and folders expand around the\n current selection.\n

\n\n
\n

\n Interaction notes\n

\n
    \n
  • Folders only reveal their contents.
    • \n
  • Files can be selected, moved, or renamed.
    • \n
  • Rejected moves return to their previous location.
    • \n
\n
\n
\n
\n \n \n
\n );\n}\n"},{"path":"components/motion/animated-sidebar.tsx","type":"util","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 // The sheet is mounted for as long as the viewport is mobile, so it hides\n // itself while closed rather than sitting there transparent and interactive.\n // Opening shows it in the same commit that starts the slide — a delayed show\n // would run the focus effect below against a still-hidden panel, and focus()\n // on a hidden element is ignored. Closing waits for the slide to finish, and\n // the panel's own exit tells us when that is: no duration to keep in sync.\n const [hidden, setHidden] = useState(!context.openMobile);\n // The completion callback fires for the open slide too, and it reads state\n // from whenever motion settles: a ref keeps it on the current one.\n const openMobileRef = useRef(context.openMobile);\n\n useEffect(() => setMounted(true), []);\n\n useEffect(() => {\n openMobileRef.current = context.openMobile;\n if (context.openMobile) setHidden(false);\n }, [context.openMobile]);\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 // This container groups the sheet for hiding and the z-index and carries no\n // box: both children are `fixed` and resolve against the viewport themselves.\n // The scrim spans the viewport edges but paints a colour, and the panel is\n // inset off one side and paints its own surface, so no layer here is a\n // transparent edge-spanning one.\n return createPortal(\n