50: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"] 51: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"] 52:T2019,"use client" import * as React from "react" import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip" import { cn } from "@/lib/utils" // The macOS Dock: a Liquid Glass shelf of app icons along the bottom of the // screen. `size` is the size of a tile, as set in Desktop & Dock settings; // the icon artwork fills 80.5% of it, like Apple's icon grid. // `magnification` grows tiles near the pointer, and `autoHide` slides the // Dock away until the pointer reaches the bottom edge of its container. // Position it yourself, e.g. `absolute bottom-2 left-1/2 -translate-x-1/2`. function Dock({ className, style, ref, size = 51, magnification, autoHide = false, revealed = false, children, onPointerMove, onPointerLeave, ...props }: React.ComponentProps<"div"> & { size?: number magnification?: number autoHide?: boolean revealed?: boolean }) { const element = React.useRef(null) const centers = React.useRef(null) const [nearEdge, setNearEdge] = React.useState(false) const shown = !autoHide || revealed || nearEdge // Auto-hide: show the Dock when the pointer touches the bottom edge of the // Dock's container, hide it again when the pointer moves well above it. React.useEffect(() => { if (!autoHide) return function onMove(event: PointerEvent) { const node = element.current if (!node) return const area = (node.offsetParent ?? document.documentElement).getBoundingClientRect() const dock = node.getBoundingClientRect() const insideX = event.clientX >= area.left && event.clientX <= area.right if (insideX && event.clientY >= area.bottom - 6 && event.clientY <= area.bottom) { setNearEdge(true) } else if (event.clientY < area.bottom - dock.height - 48 || !insideX) { setNearEdge(false) } } window.addEventListener("pointermove", onMove) return () => window.removeEventListener("pointermove", onMove) }, [autoHide]) // Magnification: icons grow with their distance to the pointer. Centers are // measured once when the pointer enters, so growing icons don't feed back. function items() { return Array.from( element.current?.querySelectorAll('[data-slot="dock-item"]') ?? [] ) } function magnify(clientX: number) { const node = element.current if (!node || !magnification) return const scale = node.getBoundingClientRect().width / node.offsetWidth || 1 const list = items() centers.current ??= list.map((item) => { const rect = item.getBoundingClientRect() return rect.left + rect.width / 2 }) // Tiles up to four places away grow. const range = size * 4 list.forEach((item, index) => { const distance = Math.abs(clientX - (centers.current?.[index] ?? 0)) / scale const curve = distance >= range ? 0 : (1 + Math.cos((Math.PI * distance) / range)) / 2 item.style.setProperty("--dock-item-size", `${size + (magnification - size) * curve}px`) }) } function reset() { centers.current = null for (const item of items()) item.style.removeProperty("--dock-item-size") } return (

{ element.current = node if (typeof ref === "function") return ref(node) if (ref) ref.current = node }} data-slot="dock" data-state={shown ? "visible" : "hidden"} role="toolbar" aria-label="Dock" className={cn( // The shelf keeps its height; magnified icons rise above it. "flex h-[calc(var(--dock-size)+18px)] w-fit items-end gap-0.5 rounded-[24px] p-[9px] text-mac-label shadow-mac-dock mac-material-dock transition-[translate,opacity] duration-300 ease-out data-[state=hidden]:pointer-events-none data-[state=hidden]:translate-y-[calc(100%+24px)] data-[state=hidden]:opacity-0", className )} style={{ "--dock-size": `${size}px`, ...style } as React.CSSProperties} onPointerMove={(event) => { onPointerMove?.(event) magnify(event.clientX) }} onPointerLeave={(event) => { onPointerLeave?.(event) reset() }} {...props} > {children}

) } // One tile in the Dock. `label` is shown above it on hover, `running` adds // the dot below it and `badge` a red count. Pass a ref to use the item as // the target that a // window minimizes into. The button is laid over the icon rather than // wrapped around it, so an item can show live content, such as a // miniature of a minimized window, that has buttons of its own. function DockItem({ className, style, label, running = false, badge, children, ...props }: React.ComponentProps<"button"> & { label?: React.ReactNode running?: boolean badge?: React.ReactNode }) { const button = (