51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T230b,"use client"; import { ChevronsUpDown } from "lucide-react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import * as React from "react"; import { cn } from "@/lib/utils"; const PANEL_TRANSITION = { type: "spring", duration: 0.24, bounce: 0, } as const; const CONTENT_TRANSITION = { duration: 0.2, ease: [0.16, 1, 0.3, 1], } as const; const REDUCED_TRANSITION = { duration: 0 } as const; // Single source of truth for the panel's height cap. Applied to the content // region so consumers can add a scroll area / pinned footer without knowing it. const CONTENT_MAX_HEIGHT = "var(--expandable-panel-max-height, min(15.5rem, calc(100dvh - 8rem)))"; type ExpandablePanelContextValue = { open: boolean; setOpen: (open: boolean) => void; }; const ExpandablePanelContext = React.createContext(null); /** * Access the expanding panel's open state from within its `children`, e.g. to * collapse the panel after an action. Throws when used outside the component. */ export function useExpandablePanel() { const context = React.useContext(ExpandablePanelContext); if (!context) { throw new Error( "useExpandablePanel must be used within an .", ); } return context; } export type ExpandablePanelClassNames = { panel?: string; content?: string; trigger?: string; }; export type ExpandablePanelProps = Omit< React.ComponentProps<"aside">, "children" > & { open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; triggerIcon?: React.ReactNode; openLabel?: string; closeLabel?: string; closeOnEscape?: boolean; /** * Collapse when a pointer goes down outside the panel. Content that portals * outside the panel's subtree (Select, Popover, Dialog) registers as * "outside"; set this to false and close manually in that case. */ closeOnOutsideClick?: boolean; classNames?: ExpandablePanelClassNames; children?: React.ReactNode; }; /** * A floating panel that grows in width and height from a compact icon trigger * in its top-right corner. It is intentionally content-agnostic. * * The panel is bounded by `--expandable-panel-width` and * `--expandable-panel-max-height` and clips overflow, so the morph never runs * off-screen. The content region is a flex column capped at that height, so * tall content can add a `flex-1` scroll area (and, e.g., a `shrink-0` pinned * footer) without re-declaring the cap. * * The trigger overlays the top-right corner; content that reaches it should * clear it with `pr-[var(--expandable-panel-trigger-inset)]` (defaults to the * 2rem trigger size). */ export function ExpandablePanel({ open, defaultOpen = false, onOpenChange, triggerIcon, openLabel = "Expand", closeLabel = "Collapse", closeOnEscape = true, closeOnOutsideClick = true, className, classNames, children, "aria-label": ariaLabel = "Expanding panel", onKeyDown, ref, ...props }: ExpandablePanelProps) { const generatedId = React.useId(); const panelId = `${generatedId}-panel`; const rootRef = React.useRef(null); const triggerRef = React.useRef(null); const shouldReduceMotion = useReducedMotion(); const openControlled = open !== undefined; const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen); const isOpen = openControlled ? open : uncontrolledOpen; const panelTransition = shouldReduceMotion ? REDUCED_TRANSITION : PANEL_TRANSITION; const contentTransition = shouldReduceMotion ? REDUCED_TRANSITION : CONTENT_TRANSITION; const setOpen = React.useCallback( (nextOpen: boolean) => { if (!openControlled) { setUncontrolledOpen(nextOpen); } onOpenChange?.(nextOpen); }, [onOpenChange, openControlled], ); React.useEffect(() => { if (!isOpen || !closeOnOutsideClick) { return; } function handlePointerDown(event: PointerEvent) { const root = rootRef.current; if ( !root || !(event.target instanceof Node) || // A target detached by the very interaction being handled (e.g. a // removed list row) can no longer prove it was outside the panel. !event.target.isConnected || root.contains(event.target) ) { return; } setOpen(false); } document.addEventListener("pointerdown", handlePointerDown, true); return () => document.removeEventListener("pointerdown", handlePointerDown, true); }, [closeOnOutsideClick, isOpen, setOpen]); const handleKeyDown = React.useCallback( (event: React.KeyboardEvent) => { onKeyDown?.(event); if ( event.defaultPrevented || !closeOnEscape || !isOpen || event.key !== "Escape" ) { return; } event.stopPropagation(); setOpen(false); triggerRef.current?.focus(); }, [closeOnEscape, isOpen, onKeyDown, setOpen], ); const contextValue = React.useMemo( () => ({ open: isOpen, setOpen }), [isOpen, setOpen], ); // The root node is needed internally (outside-click detection) *and* by // consumers, so the consumer's ref is merged in rather than overwritten. const setRootRef = React.useCallback( (node: HTMLElement | null) => { rootRef.current = node; if (typeof ref === "function") { ref(node); } else if (ref) { ref.current = node; } }, [ref], ); return ( ); } 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L51",null,{"namespace":"@ericts","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/base/ui/expandable-panel.tsx","content":"$53","type":"registry:ui","target":"@ui/expandable-panel.tsx"}],"className":"h-[70svh] min-h-80"}]]}]