4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4f:T29f7,"use client" import * as React from "react" import { ChevronDown } from "lucide-react" import { AnimatePresence, motion, useReducedMotion } from "motion/react" import { cn } from "@/lib/utils" export type FloatingIndexPosition = "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right" /** Where it sits. Anything else is a matter of className. */ const POSITIONS: Record = { top: "top-6 left-1/2 -translate-x-1/2", bottom: "bottom-6 left-1/2 -translate-x-1/2", "top-left": "top-6 left-6", "top-right": "top-6 right-6", "bottom-left": "bottom-6 left-6", "bottom-right": "bottom-6 right-6", } export interface FloatingIndexItem { id: string label: string icon?: React.ReactNode } export interface FloatingIndexProps extends Omit< React.ComponentPropsWithoutRef<"nav">, "onChange" > { items: FloatingIndexItem[] label?: string /** * Once the reader is into the page, the trigger says which section they are * in rather than repeating the label. On by default. */ showActiveLabel?: boolean /** * Which corner it floats in. Defaults to the top, centred. Moving it should * not mean undoing the default's utilities one at a time. */ position?: FloatingIndexPosition activeId?: string defaultActiveId?: string onActiveChange?: (id: string) => void container?: HTMLElement | null containerRef?: React.RefObject } export const FloatingIndex = React.forwardRef( function FloatingIndex( { items, label = "Index", showActiveLabel = true, position = "top", activeId: controlledActiveId, defaultActiveId, onActiveChange, container, containerRef, className, "aria-label": ariaLabel, ...navProps }, forwardedRef ) { const [open, setOpen] = React.useState(false) const [progress, setProgress] = React.useState(0) const [uncontrolledActiveId, setUncontrolledActiveId] = React.useState( defaultActiveId ?? items[0]?.id ?? "" ) const contentId = React.useId() const prefersReducedMotion = useReducedMotion() const activeId = controlledActiveId ?? uncontrolledActiveId const activeIdRef = React.useRef(activeId) React.useEffect(() => { activeIdRef.current = activeId }, [activeId]) const updateActiveId = React.useCallback( (id: string) => { if (activeIdRef.current === id) return activeIdRef.current = id if (controlledActiveId === undefined) setUncontrolledActiveId(id) onActiveChange?.(id) }, [controlledActiveId, onActiveChange] ) React.useEffect(() => { const root = container ?? containerRef?.current ?? null const targets = items .map((item) => document.getElementById(item.id)) .filter((target): target is HTMLElement => target !== null) if (targets.length === 0) return const observer = new IntersectionObserver( (entries) => { const visibleEntry = entries .filter((entry) => entry.isIntersecting) .sort( (first, second) => first.boundingClientRect.top - second.boundingClientRect.top )[0] if (visibleEntry) updateActiveId(visibleEntry.target.id) }, { root, rootMargin: "-20% 0px -70% 0px", threshold: 0, } ) targets.forEach((target) => observer.observe(target)) return () => observer.disconnect() }, [container, containerRef, items, updateActiveId]) React.useEffect(() => { const root = container ?? containerRef?.current ?? null const scrollTarget: HTMLElement | Window = root ?? window let frame = 0 function readProgress() { const scrollTop = root ? root.scrollTop : window.scrollY const scrollHeight = root ? root.scrollHeight - root.clientHeight : document.documentElement.scrollHeight - window.innerHeight const nextProgress = scrollHeight > 0 ? Math.min(scrollTop / scrollHeight, 1) : 0 setProgress(nextProgress) if (nextProgress > 0.995 && items.at(-1)?.id) { updateActiveId(items.at(-1)!.id) } } function scheduleRead() { window.cancelAnimationFrame(frame) frame = window.requestAnimationFrame(readProgress) } readProgress() scrollTarget.addEventListener("scroll", scheduleRead, { passive: true }) window.addEventListener("resize", scheduleRead) const resizeObserver = new ResizeObserver(scheduleRead) resizeObserver.observe(root ?? document.documentElement) return () => { window.cancelAnimationFrame(frame) scrollTarget.removeEventListener("scroll", scheduleRead) window.removeEventListener("resize", scheduleRead) resizeObserver.disconnect() } }, [container, containerRef, items, updateActiveId]) function navigateTo(item: FloatingIndexItem) { const target = document.getElementById(item.id) if (!target) return updateActiveId(item.id) if (prefersReducedMotion) { target.scrollIntoView({ behavior: "auto", block: "start" }) setOpen(false) return } target.scrollIntoView({ behavior: "smooth", block: "start" }) // Collapsing the panel while the scroll is in flight cancels it, and the // reader stays where they were having asked to be somewhere else. So the // panel closes once the scroll has landed instead. let settled = false const close = () => { if (settled) return settled = true window.removeEventListener("scrollend", close) window.clearTimeout(timer) setOpen(false) } const timer = window.setTimeout(close, 700) window.addEventListener("scrollend", close, { once: true }) } const activeItem = items.find((item) => item.id === activeId) // At the top there is no section to be in yet, so the label stands. const triggerLabel = showActiveLabel && !open && progress > 0 && activeItem ? activeItem.label : label return (

{ if (event.key === "Escape") { setOpen(false) event.currentTarget.querySelector("button")?.focus() } }} > {open && (

{items.map((item) => ( ))}

)}

) } ) 4c:["$","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@^1.31.0",{"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@^1.31.0"}]]}]}],["$","li","motion@^13.1.0",{"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@^13.1.0"}]]}]}]]}],["$","$L4d",null,{"namespace":"@mischief","registryDependencies":["utils"]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"registry/default/floating-index/floating-index.tsx","content":"$4f","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]