{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"ai-sidebar","type":"registry:component","title":"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.","author":"Saurabh ","dependencies":["clsx","lucide-react","motion","tailwind-merge"],"registryDependencies":[],"files":[{"path":"components/agents/ai-sidebar.tsx","type":"registry:component","target":"@components/agents/ai-sidebar.tsx","content":"\"use client\";\n// beui.dev/components/agents/ai-sidebar\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/motion/popover-morph.tsx","type":"registry:component","target":"@components/motion/popover-morph.tsx","content":"\"use client\";\n\nimport { AnimatePresence, motion, useReducedMotion } 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 triggerRef: React.MutableRefObject;\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 rootRef = useRef(null);\n const triggerRef = useRef(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 useEffect(() => {\n if (!open) return;\n const onKey = (e: KeyboardEvent) => e.key === \"Escape\" && setOpen(false);\n const onPointer = (e: PointerEvent) => {\n const target = e.target as Node;\n if (\n rootRef.current &&\n !rootRef.current.contains(target) &&\n !contentRef.current?.contains(target)\n )\n setOpen(false);\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, setOpen]);\n\n const ctx = useMemo(\n () => ({\n open,\n setOpen,\n toggle,\n triggerId: `${baseId}-trigger`,\n contentId: `${baseId}-content`,\n triggerRef,\n contentRef,\n }),\n [open, setOpen, toggle, baseId],\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 if (!isValidElement(children)) return children;\n\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 }).ref;\n\n return cloneElement(child, {\n id: ctx.triggerId,\n ref: mergeRefs(childRef, (node: HTMLElement | null) => {\n ctx.triggerRef.current = node;\n }),\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 clipHidden(side: Side, align: Align, radius: number) {\n const top = side === \"bottom\" ? \"0%\" : \"92%\";\n const bottom = side === \"bottom\" ? \"92%\" : \"0%\";\n const right = align === \"end\" ? \"0%\" : \"92%\";\n const left = align === \"end\" ? \"92%\" : \"0%\";\n return `inset(${top} ${right} ${bottom} ${left} round ${radius}px)`;\n}\nconst clipShown = (radius: number) => `inset(0% 0% 0% 0% round ${radius}px)`;\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({\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 [portalReady, setPortalReady] = useState(false);\n const layout = usePopoverPortalPosition(\n ctx.triggerRef,\n ctx.contentRef,\n portalReady && ctx.open,\n );\n\n useEffect(() => setPortalReady(true), []);\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: { opacity: 0, scale: 0.96, transition: SPRING_PANEL },\n show: { opacity: 1, scale: 1, transition: SPRING_PANEL },\n };\n const clip = reduce\n ? undefined\n : {\n hidden: {\n clipPath: clipHidden(side, align, radius),\n transition: MORPH_CLIP_TRANSITION,\n },\n show: {\n clipPath: clipShown(radius),\n transition: MORPH_CLIP_TRANSITION,\n },\n };\n\n // Keep the server and first client render identical, then mount the portal.\n if (!portalReady) return null;\n\n return createPortal(\n \n {ctx.open ? (\n \n \n {children}\n \n \n ) : null}\n ,\n document.body,\n );\n}\n"},{"path":"lib/ease.ts","type":"registry:lib","target":"@lib/ease.ts","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/utils.ts","type":"registry:lib","target":"@lib/utils.ts","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":"registry:component","target":"@components/motion/popover-position.ts","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"}]}