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[544296,["/_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"],"ItemStyles"] 52:I[34002,["/_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"],"CodeEditor"] 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:T330d,// Hairline UI · morphing-nav · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components "use client"; import * as React from "react"; /* ───────────────────────────────────────────────────────── * MORPHING NAV: one dropdown that follows you along the menu * * hover a soft highlight slides under the item you point at * open a single panel drops in under the item, sized to its * content * move going to another item, the same panel glides over * and resizes to the new content while the content * slides in from the side you moved toward * close leave the menu (or press Escape) and it fades away * * Items with content open the panel; items with only an href * are plain links. Arrow keys move between items; Enter or Down * opens one and moves into it. * ───────────────────────────────────────────────────────── */ export interface NavItem { id: string; label: string; /** A plain link. */ href?: string; /** What the panel shows for this item; give it its own width. */ content?: React.ReactNode; } export interface MorphingNavProps extends React.HTMLAttributes { items: NavItem[]; /** Space to keep from the screen edges. */ collisionPadding?: number; } type Shown = { id: string; dir: number; key: number }; const EASE = "cubic-bezier(0.16,1,0.3,1)"; const MORPH = 380; const FOCUS = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"; const reducedQuery = "(prefers-reduced-motion: reduce)"; const subscribeReduced = (onChange: () => void) => { const query = window.matchMedia(reducedQuery); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); }; const useReducedMotion = () => React.useSyncExternalStore(subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false); /** A panel's content, sliding in from one side and out to the other. */ function Slide({ children, dir, leaving, reduced, measureRef }: { children: React.ReactNode; dir: number; leaving: boolean; reduced: boolean; measureRef?: React.Ref }) { const ref = React.useRef(null); React.useLayoutEffect(() => { const el = ref.current; if (!el || reduced || dir === 0) return; const shift = 28 * dir; const animation = leaving ? el.animate([{ opacity: 1, transform: "none" }, { opacity: 0, transform: `translateX(${-shift}px)` }], { duration: MORPH * 0.7, easing: EASE, fill: "forwards" }) : el.animate([{ opacity: 0, transform: `translateX(${shift}px)` }, { opacity: 1, transform: "none" }], { duration: MORPH, easing: EASE }); return () => animation.cancel(); }, [dir, leaving, reduced]); return (

{ ref.current = el; if (typeof measureRef === "function") measureRef(el); else if (measureRef) (measureRef as React.MutableRefObject).current = el; }} aria-hidden={leaving || undefined} inert={leaving} className={`absolute left-0 top-0 w-max max-w-[calc(100vw-32px)] ${leaving ? "pointer-events-none" : ""}`} > {children}

); } export function MorphingNav({ items, collisionPadding = 16, className = "", ...props }: MorphingNavProps) { const reduced = useReducedMotion(); const id = React.useId(); const rootRef = React.useRef(null); const triggerRefs = React.useRef(new Map()); const contentRef = React.useRef(null); const panelRef = React.useRef(null); const closeTimer = React.useRef(0); const keyCounter = React.useRef(0); const viaKeyboard = React.useRef(false); const [open, setOpen] = React.useState(null); const [shown, setShown] = React.useState(null); const [leaving, setLeaving] = React.useState([]); const [visible, setVisible] = React.useState(false); const [box, setBox] = React.useState({ left: 0, width: 0, height: 0, ready: false }); const [hover, setHover] = React.useState<{ left: number; width: number } | null>(null); const index = (itemId: string | null) => items.findIndex((i) => i.id === itemId); const show = (itemId: string) => { window.clearTimeout(closeTimer.current); const item = items.find((i) => i.id === itemId); if (!item?.content) return; if (open === itemId) return; const dir = open ? Math.sign(index(itemId) - index(open)) : 0; if (shown && open) setLeaving((l) => [...l, { ...shown, dir }]); setShown({ id: itemId, dir, key: ++keyCounter.current }); setOpen(itemId); setVisible(true); }; const close = React.useCallback((delay = 0) => { window.clearTimeout(closeTimer.current); closeTimer.current = window.setTimeout(() => { setOpen(null); setVisible(false); setHover(null); }, delay); }, []); React.useEffect(() => () => window.clearTimeout(closeTimer.current), []); // Once it has faded, forget the panel so the next open starts fresh. React.useEffect(() => { if (visible) return; const timer = window.setTimeout( () => { setShown(null); setLeaving([]); setBox((b) => ({ ...b, ready: false })); }, reduced ? 0 : 220 ); return () => window.clearTimeout(timer); }, [visible, reduced]); React.useEffect(() => { if (!leaving.length) return; const timer = window.setTimeout(() => setLeaving([]), MORPH); return () => window.clearTimeout(timer); }, [leaving]); // Size and place the panel for the content now showing: under its item, inside the screen. React.useLayoutEffect(() => { const content = contentRef.current; const root = rootRef.current; const trigger = open ? triggerRefs.current.get(open) : null; if (!content || !root || !trigger) return; const measure = () => { const r = root.getBoundingClientRect(); const t = trigger.getBoundingClientRect(); const width = content.offsetWidth; const height = content.offsetHeight; const viewport = document.documentElement.clientWidth; const center = t.left + t.width / 2; const left = Math.min(Math.max(center - width / 2, collisionPadding), viewport - collisionPadding - width) - r.left; setBox((b) => (b.left === left && b.width === width && b.height === height && b.ready ? b : { left, width, height, ready: b.width > 0 })); }; measure(); const observer = new ResizeObserver(measure); observer.observe(content); return () => observer.disconnect(); }, [open, shown?.key, collisionPadding]); // Opened from the keyboard: move focus into the panel. React.useEffect(() => { if (!open || !viaKeyboard.current) return; viaKeyboard.current = false; const first = panelRef.current?.querySelector("a[href], button:not([disabled]), [tabindex]:not([tabindex='-1'])"); first?.focus(); }, [open, shown?.key]); // Escape closes and hands focus back; clicking elsewhere closes. React.useEffect(() => { if (!open) return; const onKey = (e: KeyboardEvent) => { if (e.key !== "Escape") return; triggerRefs.current.get(open)?.focus(); close(); }; const onDown = (e: PointerEvent) => { if (!rootRef.current?.contains(e.target as Node)) close(); }; document.addEventListener("keydown", onKey); document.addEventListener("pointerdown", onDown); return () => { document.removeEventListener("keydown", onKey); document.removeEventListener("pointerdown", onDown); }; }, [open, close]); const point = (itemId: string) => { const el = triggerRefs.current.get(itemId); if (el) setHover({ left: el.offsetLeft, width: el.offsetWidth }); }; const onTriggerKey = (e: React.KeyboardEvent, item: NavItem) => { const i = index(item.id); if (e.key === "ArrowRight" || e.key === "ArrowLeft") { e.preventDefault(); const next = items[(i + (e.key === "ArrowRight" ? 1 : -1) + items.length) % items.length]; triggerRefs.current.get(next.id)?.focus(); if (open && next.content) show(next.id); } else if (item.content && (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ")) { e.preventDefault(); viaKeyboard.current = true; if (open === item.id) { const first = panelRef.current?.querySelector("a[href], button:not([disabled])"); first?.focus(); } else show(item.id); } }; const content = shown ? items.find((i) => i.id === shown.id)?.content : null; const size = reduced || !box.ready ? "none" : `left ${MORPH}ms ${EASE}, width ${MORPH}ms ${EASE}, height ${MORPH}ms ${EASE}`; return (

window.clearTimeout(closeTimer.current)} onPointerLeave={(e) => e.pointerType === "mouse" && close(140)} onBlur={(e) => { if (!rootRef.current?.contains(e.relatedTarget as Node)) close(); }} {...props} >

{items.map((item) => { const isOpen = open === item.id; const common = { ref: (el: HTMLElement | null) => { if (el) triggerRefs.current.set(item.id, el); else triggerRefs.current.delete(item.id); }, onPointerEnter: (e: React.PointerEvent) => { point(item.id); if (e.pointerType === "mouse") { if (item.content) show(item.id); else if (open) close(140); } }, onFocus: () => point(item.id), className: `relative flex h-9 cursor-pointer items-center gap-1 rounded-full px-3.5 text-[13.5px] transition-colors duration-200 ${FOCUS} ${ isOpen ? "text-foreground" : "text-muted-foreground hover:text-foreground" }`, }; return (

{item.content ? ( ) : ( onTriggerKey(e, item)}> {item.label} )}

); })}

{shown && (

{leaving.map((l) => ( {items.find((i) => i.id === l.id)?.content} ))} {content}

)}

); } 4f:["$","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":[null,["$","$L50",null,{"namespace":"@hairline","registryDependencies":[]}]]}],["$","$L51",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L52",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@keyframes ui-pop-in {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(-4px) scale(0.96);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: none;\n\t}\n}"}]}]]}]]}]}]}]]}],["$","$L53",null,{"files":[{"path":"registry/morphing-nav.tsx","content":"$54","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]