4e: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"] 4f: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"] 50:T33aa,"use client"; // beui.dev/components/motion/file-tree import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { ChevronRight, File, Folder, FolderOpen } from "lucide-react"; import { Children, Fragment, useCallback, isValidElement, useMemo, useRef, useState, type KeyboardEvent, type ReactNode, } from "react"; import { SharedLayoutBg } from "@/components/motion/shared-layout-bg"; import { EASE_OUT, SPRING_LAYOUT, SPRING_SWAP } from "@/lib/ease"; import { cn } from "@/lib/utils"; type FileTreeItem = { value: string; name: string; type: "file" | "folder"; children?: FileTreeItem[]; icon?: ReactNode; disabled?: boolean; className?: string; }; export interface FileTreeFolderProps { value: string; name: string; icon?: ReactNode; disabled?: boolean; children?: ReactNode; className?: string; } export interface FileTreeFileProps { value: string; name: string; icon?: ReactNode; disabled?: boolean; className?: string; } export type FileTreeClassNames = { tree?: string; item?: string; icon?: string; label?: string; }; export interface FileTreeProps { children: ReactNode; value?: string | null; defaultValue?: string | null; onValueChange?: (value: string) => void; expandedIds?: string[]; defaultExpandedIds?: string[]; onExpandedChange?: (expandedIds: string[]) => void; ariaLabel?: string; indent?: number; className?: string; classNames?: FileTreeClassNames; } type FlatFileTreeItem = { item: FileTreeItem; depth: number; parentId: string | null; position: number; setSize: number; }; // These declarative parts are read by FileTree and turned into one flattened, // keyboard-navigable collection. They intentionally render nothing alone. export function FileTreeFolder(_props: FileTreeFolderProps) { return null; } export function FileTreeFile(_props: FileTreeFileProps) { return null; } const ROW_ENTER = { duration: 0.22, ease: EASE_OUT } as const; const BRANCH_DRAW = { duration: 0.3, ease: EASE_OUT } as const; function flattenItems( items: FileTreeItem[], expanded: ReadonlySet, depth = 0, parentId: string | null = null, ): FlatFileTreeItem[] { return items.flatMap((item, index) => { const row = { item, depth, parentId, position: index + 1, setSize: items.length, }; if ( item.type !== "folder" || !expanded.has(item.value) || !item.children?.length ) { return [row]; } return [ row, ...flattenItems(item.children, expanded, depth + 1, item.value), ]; }); } function itemsFromChildren(children: ReactNode): FileTreeItem[] { const items: FileTreeItem[] = []; Children.forEach(children, (child) => { if (!isValidElement(child)) return; if (child.type === Fragment) { const props = child.props as { children?: ReactNode }; items.push(...itemsFromChildren(props.children)); return; } if (child.type === FileTreeFolder) { const props = child.props as FileTreeFolderProps; items.push({ value: props.value, name: props.name, type: "folder", icon: props.icon, disabled: props.disabled, className: props.className, children: itemsFromChildren(props.children), }); return; } if (child.type === FileTreeFile) { const props = child.props as FileTreeFileProps; items.push({ value: props.value, name: props.name, type: "file", icon: props.icon, disabled: props.disabled, className: props.className, }); } }); return items; } function DefaultIcon({ item, open, reduce, }: { item: FileTreeItem; open: boolean; reduce: boolean; }) { if (item.type === "file") return ; if (reduce) { return open ? ( ) : ( ); } return ( {open ? ( ) : ( )} ); } export function FileTree({ children, value, defaultValue = null, onValueChange, expandedIds, defaultExpandedIds = [], onExpandedChange, ariaLabel = "Files", indent = 18, className, classNames, }: FileTreeProps) { const reduce = useReducedMotion() ?? false; const [internalValue, setInternalValue] = useState(defaultValue); const [internalExpandedIds, setInternalExpandedIds] = useState( defaultExpandedIds, ); const [focusedId, setFocusedId] = useState( value ?? defaultValue, ); const rowRefs = useRef(new Map()); const selectedId = value === undefined ? internalValue : value; const currentExpandedIds = expandedIds ?? internalExpandedIds; const expanded = useMemo( () => new Set(currentExpandedIds), [currentExpandedIds], ); const items = useMemo(() => itemsFromChildren(children), [children]); const rows = useMemo(() => flattenItems(items, expanded), [expanded, items]); // Keep a real row tabbable in the first commit and immediately after a // collapse removes the previously focused descendant. const focusedRow = focusedId !== null && rows.some(({ item }) => item.value === focusedId) ? focusedId : (rows[0]?.item.value ?? null); if (focusedId !== focusedRow) setFocusedId(focusedRow); const focusRow = useCallback((id: string) => { setFocusedId(id); const row = rowRefs.current.get(id); if (row) row.focus(); else requestAnimationFrame(() => rowRefs.current.get(id)?.focus()); }, []); const selectItem = useCallback( (item: FileTreeItem) => { if (item.disabled) return; if (value === undefined) setInternalValue(item.value); onValueChange?.(item.value); }, [onValueChange, value], ); const setExpanded = useCallback( (next: string[]) => { if (expandedIds === undefined) setInternalExpandedIds(next); onExpandedChange?.(next); }, [expandedIds, onExpandedChange], ); const toggleFolder = useCallback( (id: string) => { const next = new Set(currentExpandedIds); if (next.has(id)) next.delete(id); else next.add(id); setExpanded(Array.from(next)); }, [currentExpandedIds, setExpanded], ); const handleKeyDown = useCallback( (event: KeyboardEvent, row: FlatFileTreeItem) => { const index = rows.findIndex(({ item }) => item.value === row.item.value); const previous = rows[index - 1]; const next = rows[index + 1]; const isFolder = row.item.type === "folder"; const isOpen = expanded.has(row.item.value); if (event.key === "ArrowDown" && next) { event.preventDefault(); focusRow(next.item.value); } else if (event.key === "ArrowUp" && previous) { event.preventDefault(); focusRow(previous.item.value); } else if (event.key === "Home" && rows[0]) { event.preventDefault(); focusRow(rows[0].item.value); } else if (event.key === "End" && rows.at(-1)) { event.preventDefault(); focusRow(rows.at(-1)?.item.value ?? row.item.value); } else if (event.key === "ArrowRight" && isFolder) { event.preventDefault(); if (!isOpen && !row.item.disabled) toggleFolder(row.item.value); else if (next?.parentId === row.item.value) focusRow(next.item.value); } else if (event.key === "ArrowLeft") { event.preventDefault(); if (isFolder && isOpen && !row.item.disabled) toggleFolder(row.item.value); else if (row.parentId) focusRow(row.parentId); } else if (event.key === "Enter" || event.key === " ") { event.preventDefault(); if (row.item.disabled) return; selectItem(row.item); if (isFolder) toggleFolder(row.item.value); } }, [expanded, focusRow, rows, selectItem, toggleFolder], ); return ( {rows.map((row) => { const isFolder = row.item.type === "folder"; const isOpen = isFolder && expanded.has(row.item.value); const isSelected = selectedId === row.item.value; return ( ); })} ); } 51:T1179,"use client"; import { AnimatePresence, type HTMLMotionProps, motion, useReducedMotion, type Variants, } from "motion/react"; import { Children, cloneElement, forwardRef, type HTMLAttributes, isValidElement, type MouseEvent, type ReactElement, type ReactNode, type Ref, useId, useState, } from "react"; import { SPRING_LAYOUT } from "@/lib/ease"; import { cn } from "@/lib/utils"; export interface SharedLayoutBgProps extends Omit, "children"> { children: ReactNode; /** Semantic container used for the children. */ as?: "div" | "ul"; /** Tailwind class applied to the moving pill. Defaults to a subtle foreground tint. */ pillClassName?: string; /** Horizontal inset of the pill relative to each row (px). Default 20. */ inset?: number; /** Optional positioning override for the pill wrapper inside each item. */ pillContainerClassName?: string; } const variants: Variants = { initial: { opacity: 0, filter: "blur(6px)" }, animate: { opacity: 1, filter: "blur(0px)" }, exit: (isActive: boolean) => !isActive ? { opacity: 0, filter: "blur(6px)" } : {}, }; const reducedVariants: Variants = { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: (isActive: boolean) => (!isActive ? { opacity: 0 } : {}), }; export const SharedLayoutBg = forwardRef( function SharedLayoutBg( { children, as = "div", className, onMouseLeave, pillClassName, pillContainerClassName, inset = 20, ...props }, forwardedRef, ) { const [activeId, setActiveId] = useState(null); const uid = useId(); const reduce = useReducedMotion(); const renderedChildren = Children.toArray(children) .filter(isValidElement) .map((child, index) => { const el = child as ReactElement<{ className?: string; onMouseEnter?: () => void; children?: ReactNode; }>; const childKey = el.key ? String(el.key) : `item-${index}`; return cloneElement( el, { key: childKey, className: cn("relative", el.props.className), onMouseEnter: () => { el.props.onMouseEnter?.(); setActiveId(childKey); }, }, <> {activeId !== null ? ( {activeId === childKey ? ( ) : null} ) : null}

{el.props.children}

, ); }); const handleMouseLeave = (event: MouseEvent) => { setActiveId(null); onMouseLeave?.(event); }; // layoutRoot scopes the pill's layout projection to this list, so fixed or // scrolled ancestors can't smear scroll offsets into its movement. return as === "ul" ? ( )} ref={forwardedRef as Ref} layoutRoot onMouseLeave={handleMouseLeave} className={cn("flex w-full flex-col", className)} > {renderedChildren} ) : ( )} ref={forwardedRef as Ref} layoutRoot onMouseLeave={handleMouseLeave} className={cn("flex w-full flex-col", className)} > {renderedChildren} ); }, ); 52:T686,// Shared motion tokens. Easing curves mirror the CSS custom properties in // globals.css; springs are the canonical physics used across components. // Strong custom variants — defaults like `ease-in`/`ease-out` feel weak. export const EASE_OUT = [0.16, 1, 0.3, 1] as const; export const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const; export const EASE_DRAWER = [0.32, 0.72, 0, 1] as const; /** CSS string form of EASE_OUT for inline style transitions. */ export const EASE_OUT_CSS = "cubic-bezier(0.16, 1, 0.3, 1)"; /** Press feedback on buttons and other tappable surfaces. */ export const SPRING_PRESS = { type: "spring", stiffness: 500, damping: 30, mass: 0.6, } as const; /** Content swaps — label/icon slots trading places inside a control. */ export const SPRING_SWAP = { type: "spring", stiffness: 460, damping: 30, mass: 0.55, } as const; /** Overlay panel entrances — modals and sheets summoned by pointer. */ export const SPRING_PANEL = { type: "spring", stiffness: 420, damping: 40, mass: 0.5, } as const; /** Shared-layout glides — pills, indicators and panels morphing between positions. */ export const SPRING_LAYOUT = { type: "spring", stiffness: 360, damping: 32, mass: 0.6, } as const; /** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */ export const SPRING_MOUSE = { stiffness: 200, damping: 15, mass: 0.3, } as const; /** Dragged handles and fills (sliders) — critically damped `useSpring` config, * so the value follows the pointer butterily and never rebounds off an end. */ export const SPRING_GLIDE = { stiffness: 700, damping: 50, mass: 0.5, } as const; 4d:["$","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","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","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"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L4e",null,{"namespace":"@beui","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"components/motion/file-tree.tsx","content":"$50","type":"registry:component","target":"@components/motion/file-tree.tsx"},{"path":"components/motion/shared-layout-bg.tsx","content":"$51","type":"registry:component","target":"@components/motion/shared-layout-bg.tsx"},{"path":"lib/ease.ts","content":"$52","type":"registry:lib","target":"@lib/ease.ts"},{"path":"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","type":"registry:lib","target":"@lib/utils.ts"}],"className":"h-[70svh] min-h-80"}]]}]