52: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"] 53: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"] 54:T435f,"use client"; import { Children, type ComponentProps, type CSSProperties, type KeyboardEvent, type ReactNode, type Ref, useCallback, useId, useRef, useState, } from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; const EASE_OUT = [0.22, 1, 0.36, 1] as const; const DEFAULT_CONTENT_MAX_WIDTH = "min(32rem, calc(100vw - 2rem))"; const TOOLBAR_TRANSITION = { width: { duration: 0.2, ease: EASE_OUT }, opacity: { duration: 0.14, ease: EASE_OUT }, } as const; const TRIGGER_SURFACE_TRANSITION = { duration: 0.18, ease: EASE_OUT } as const; // An icon swap is a tiny state change, so keep it snappy: ease-out, well // under 150ms — the copy button's copy → check treatment, trimmed a touch // because the swap runs exit-then-enter and the perceived time is doubled. const TRIGGER_ICON_TRANSITION = { duration: 0.1, ease: [0.215, 0.61, 0.355, 1], } as const; const TRIGGER_ICON_VARIANTS = { hidden: { opacity: 0, scale: 0.5 }, visible: { opacity: 1, scale: 1 }, } as const; const TOOLBAR_PADDING = 2; /** Must match the toolbar surface's `border` class. */ const TOOLBAR_BORDER_WIDTH = 1; const TRIGGER_RADIUS_OPEN = 8; const TRIGGER_RADIUS_CLOSED = TRIGGER_RADIUS_OPEN + TOOLBAR_PADDING; type ExpandableToolbarSide = "start" | "end" | "center"; type ExpandableToolbarAnchor = "toolbar" | "trigger"; type ExpandableToolbarTriggerProps = ComponentProps<"button"> & { "data-state": "open" | "closed"; }; export type ExpandableToolbarClassNames = { triggerWrapper?: string; trigger?: string; triggerSeparator?: string; panel?: string; content?: string; }; export type ExpandableToolbarTriggerRenderProps = { open: boolean; disabled: boolean; label: string; controlsId: string; triggerProps: ExpandableToolbarTriggerProps; }; type ExpandableToolbarBaseProps = Omit< ComponentProps<"div">, "children" | "defaultValue" | "onChange" > & { /** Controlled open state. */ open?: boolean; /** Initial open state for uncontrolled usage. */ defaultOpen?: boolean; /** Called whenever the toolbar requests an open-state change. */ onOpenChange?: (open: boolean) => void; /** * Which side of the trigger the content should expand into. `center` splits * the children into two panels flanking the trigger, so the toolbar grows * symmetrically while the trigger stays put. */ side?: ExpandableToolbarSide; /** Whether the full toolbar or only the trigger participates in layout. */ anchor?: ExpandableToolbarAnchor; expandLabel?: string; collapseLabel?: string; controlsId?: string; disabled?: boolean; /** Close the toolbar when Escape is pressed inside it. */ closeOnEscape?: boolean; contentMaxWidth?: CSSProperties["maxWidth"]; classNames?: ExpandableToolbarClassNames; children: ReactNode; }; type ExpandableToolbarDefaultTriggerProps = { /** Icon used by the default trigger when the toolbar is closed. */ expandIcon: ReactNode; /** Icon used by the default trigger when the toolbar is open. */ collapseIcon?: ReactNode; renderTrigger?: never; }; type ExpandableToolbarCustomTriggerProps = { expandIcon?: ReactNode; collapseIcon?: ReactNode; /** * Replace the default icon button trigger while keeping the measured panel, * ARIA attributes, and open-state plumbing. */ renderTrigger: (props: ExpandableToolbarTriggerRenderProps) => ReactNode; }; export type ExpandableToolbarProps = ExpandableToolbarBaseProps & (ExpandableToolbarDefaultTriggerProps | ExpandableToolbarCustomTriggerProps); export function ExpandableToolbar({ open, defaultOpen = false, onOpenChange, side = "start", anchor = "toolbar", expandIcon, collapseIcon, expandLabel = "Expand toolbar", collapseLabel = "Collapse toolbar", controlsId, disabled = false, closeOnEscape = true, contentMaxWidth = DEFAULT_CONTENT_MAX_WIDTH, className, classNames, renderTrigger, children, role, "aria-label": ariaLabel = "Expandable toolbar", onKeyDown, style, ...props }: ExpandableToolbarProps) { const generatedId = useId(); const panelId = controlsId ?? `${generatedId}-panel`; const triggerRef = useRef(null); const triggerWrapperRef = useRef(null); const [startContentRef, startContentWidth] = useMeasuredWidth(); const [endContentRef, endContentWidth] = useMeasuredWidth(); const [internalOpen, setInternalOpen] = useState(defaultOpen); const shouldReduceMotion = useReducedMotion(); const controlled = open !== undefined; const isOpen = controlled ? open : internalOpen; const currentLabel = isOpen ? collapseLabel : expandLabel; // `center` flanks the trigger with two panels: the first half of the // children expands into the start side, the rest into the end side. const childArray = Children.toArray(children); const splitIndex = Math.ceil(childArray.length / 2); const startChildren = side === "start" ? childArray : side === "center" ? childArray.slice(0, splitIndex) : []; const endChildren = side === "end" ? childArray : side === "center" ? childArray.slice(splitIndex) : []; const startPanelId = side === "center" ? `${panelId}-start` : panelId; const endPanelId = side === "center" ? `${panelId}-end` : panelId; const startPanelWidth = isOpen ? startContentWidth : 0; const focusTrigger = useCallback(() => { const trigger = triggerRef.current ?? getFirstFocusableElement(triggerWrapperRef.current); trigger?.focus(); }, []); const setOpen = useCallback( (nextOpen: boolean) => { if (disabled) return; if (!controlled) { setInternalOpen(nextOpen); } onOpenChange?.(nextOpen); }, [controlled, disabled, onOpenChange], ); const toggleOpen = useCallback(() => { setOpen(!isOpen); }, [isOpen, setOpen]); const handleKeyDown = useCallback( (event: KeyboardEvent) => { onKeyDown?.(event); if (event.defaultPrevented) return; if (closeOnEscape && isOpen && event.key === "Escape") { event.stopPropagation(); setOpen(false); focusTrigger(); return; } // `role="toolbar"` promises horizontal arrow-key navigation (ARIA APG), // so move focus between the visible controls. Text-entry controls keep // the arrows for caret movement. if (!TOOLBAR_NAV_KEYS.includes(event.key)) return; const activeElement = document.activeElement; if (activeElement instanceof HTMLElement && isTextEntry(activeElement)) { return; } // Collapsed panels carry `inert` + `aria-hidden`, so filter on that // rather than on layout: `offsetParent` is also null for `position: // fixed` elements that are perfectly visible. const focusables = Array.from( event.currentTarget.querySelectorAll(FOCUSABLE_SELECTOR), ).filter( (element) => !element.closest("[inert],[hidden],[aria-hidden='true']"), ); if (focusables.length === 0) return; const currentIndex = focusables.indexOf(activeElement as HTMLElement); const lastIndex = focusables.length - 1; let nextIndex: number; if (event.key === "Home") { nextIndex = 0; } else if (event.key === "End") { nextIndex = lastIndex; } else if (event.key === "ArrowRight") { nextIndex = currentIndex < 0 ? 0 : (currentIndex + 1) % focusables.length; } else { nextIndex = currentIndex < 0 ? lastIndex : (currentIndex - 1 + focusables.length) % focusables.length; } event.preventDefault(); focusables[nextIndex]?.focus(); }, [closeOnEscape, focusTrigger, isOpen, onKeyDown, setOpen], ); const triggerRadius = isOpen ? TRIGGER_RADIUS_OPEN : TRIGGER_RADIUS_CLOSED; const triggerTransition = shouldReduceMotion ? { duration: 0 } : TRIGGER_SURFACE_TRANSITION; const transition = shouldReduceMotion ? { duration: 0 } : TOOLBAR_TRANSITION; const triggerProps = { type: "button", disabled, "aria-label": currentLabel, "aria-expanded": isOpen, "aria-controls": side === "center" ? `${startPanelId} ${endPanelId}` : panelId, "data-state": isOpen ? "open" : "closed", className: classNames?.trigger, onClick: toggleOpen, } satisfies ExpandableToolbarTriggerProps; const trigger = ( {!renderTrigger ? ( ); const separator = ( ); const renderPanel = ( position: "start" | "end", id: string, content: ReactNode[], contentRef: Ref, contentWidth: number, ) => (

{position === "end" ? separator : null} {content} {position === "start" ? separator : null}

); const toolbar = (

{startChildren.length > 0 ? renderPanel( "start", startPanelId, startChildren, startContentRef, startContentWidth, ) : null} {trigger} {endChildren.length > 0 ? renderPanel( "end", endPanelId, endChildren, endContentRef, endContentWidth, ) : null}

); if (anchor === "trigger") { return (

{toolbar}

); } return toolbar; } function DefaultExpandableToolbarTrigger({ open, expandIcon, collapseIcon, triggerProps, }: { open: boolean; expandIcon?: ReactNode; collapseIcon?: ReactNode; triggerProps: ExpandableToolbarTriggerProps; }) { const shouldReduceMotion = useReducedMotion(); const { className, ...buttonProps } = triggerProps; const icon = open ? (collapseIcon ?? expandIcon) : expandIcon; const swapsIcon = collapseIcon != null; const iconTransition = shouldReduceMotion ? { duration: 0 } : TRIGGER_ICON_TRANSITION; return ( ); } const FOCUSABLE_SELECTOR = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'; function getFirstFocusableElement(element: HTMLElement | null) { return element?.querySelector(FOCUSABLE_SELECTOR) ?? null; } const TOOLBAR_NAV_KEYS = ["ArrowLeft", "ArrowRight", "Home", "End"]; /** Controls where the arrow keys belong to the caret, not to toolbar nav. */ function isTextEntry(element: HTMLElement) { return ( element instanceof HTMLTextAreaElement || element.isContentEditable || (element instanceof HTMLInputElement && !["button", "checkbox", "radio", "range", "submit", "reset"].includes( element.type, )) ); } function useMeasuredWidth() { const [width, setWidth] = useState(0); const observerRef = useRef(null); // A callback ref (rather than a mount-only effect) so a panel that mounts // later — `side` flipping to "center", children growing past one — is still // measured and observed instead of animating open to width 0. const ref = useCallback((element: T | null) => { observerRef.current?.disconnect(); observerRef.current = null; if (!element) return; const updateWidth = (nextWidth: number) => { setWidth((currentWidth) => currentWidth === nextWidth ? currentWidth : nextWidth, ); }; updateWidth(readElementWidth(element)); if (typeof ResizeObserver === "undefined") return; const resizeObserver = new ResizeObserver((entries) => { updateWidth(readElementWidth(element, entries[0])); }); resizeObserver.observe(element); observerRef.current = resizeObserver; }, []); return [ref, width] as const; } function readElementWidth( element: HTMLElement, entry?: ResizeObserverEntry, ) { const borderBoxSize = Array.isArray(entry?.borderBoxSize) ? entry?.borderBoxSize[0] : entry?.borderBoxSize; if (borderBoxSize) { return Math.ceil(borderBoxSize.inlineSize); } return Math.ceil(element.getBoundingClientRect().width || element.scrollWidth); } 51:["$","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","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"}]]}]}]]}],["$","$L52",null,{"namespace":"@ericts","registryDependencies":["button"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/base/ui/expandable-toolbar.tsx","content":"$54","type":"registry:ui","target":"@ui/expandable-toolbar.tsx"}],"className":"h-[70svh] min-h-80"}]]}]