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:T5a97,"use client"; import { AnimatePresence, animate, motion, useMotionValue, useTransform, type Variants, } from "motion/react"; import * as React from "react"; import { useReducedMotion } from "@/hooks/use-reduced-motion"; import { cn } from "@/lib/utils"; export interface PantographItem { /** Unique value identifying this trigger. */ value: string; /** Trigger label shown in the bar. */ label: React.ReactNode; /** * Flyout panel content for this trigger. Omit for a plain trigger that * navigates (via `href`) without opening a panel. */ content?: React.ReactNode; /** Optional href — renders the trigger as a link. */ href?: string; } export interface PantographProps extends Omit< React.ComponentPropsWithoutRef<"nav">, "onChange" | "value" | "defaultValue" > { /** Triggers to render, left to right. @default a small generic set */ items?: PantographItem[]; /** How a flyout opens on pointer devices. @default "hover" */ openOn?: "hover" | "click"; /** Show the caret that tracks the active trigger. @default true */ caret?: boolean; /** * Grace period in ms before the panel closes after the pointer leaves — * the hover-intent forgiveness that stops flicker on diagonal travel. * @default 150 */ closeDelay?: number; /** * Incoming content slides in from the direction of travel (`"directional"`) * or simply crossfades in place (`"crossfade"`). @default "directional" */ contentTransition?: "directional" | "crossfade"; /** Spring physics for the panel morph. */ spring?: { stiffness?: number; damping?: number; mass?: number }; /** Min panel width in px. @default 200 */ minWidth?: number; /** Max panel width in px. @default 560 */ maxWidth?: number; /** Controlled active trigger value; `null` means closed. */ value?: string | null; /** Initial active trigger when uncontrolled. @default null (closed) */ defaultValue?: string | null; /** Fires whenever the active trigger changes (a value, or `null` on close). */ onValueChange?: (value: string | null) => void; } const DEFAULT_SPRING = { stiffness: 440, damping: 40, mass: 0.9 }; const CONTENT_SHIFT = 22; const CARET_PAD = 20; function clamp(v: number, lo: number, hi: number): number { return Math.min(Math.max(v, lo), hi); } function LinkList({ links, }: { links: { label: string; hint?: string; href?: string }[]; }) { return (

{l.label} {l.hint ? ( {l.hint} ) : null}

); } const DEFAULT_ITEMS: PantographItem[] = [ { value: "products", label: "Products", content: ( ), }, { value: "pricing", label: "Pricing", content: ( ), }, { value: "company", label: "Company", content: ( ), }, ]; /** * Pantograph — a horizontal nav where hovering a trigger opens a single shared * flyout that *morphs* to the next trigger instead of closing and reopening: * the panel slides along the bar and resizes to fit each trigger's content * while the caret tracks the active trigger and the content crossfades in from * the direction of travel. The signature is an *anticipation stretch* — the * panel's leading edge extends toward the new trigger a beat before the body * follows and the trailing edge snaps in, so it reads as one window panning * over a continuous surface. Hover-intent grace prevents flicker on diagonal * travel. Full disclosure semantics: focus opens, Escape closes, arrow keys * move between triggers, `aria-expanded` reflects state. On coarse pointers it * opens on tap; under `prefers-reduced-motion` the panel repositions instantly * and the content simply crossfades. */ export function Pantograph({ items = DEFAULT_ITEMS, openOn = "hover", caret = true, closeDelay = 150, contentTransition = "directional", spring, minWidth = 200, maxWidth = 560, value, defaultValue = null, onValueChange, className, ...props }: PantographProps) { const reducedMotion = useReducedMotion(); const baseId = React.useId(); const panelId = `${baseId}-panel`; const rootRef = React.useRef(null); const barRef = React.useRef(null); const triggerRefs = React.useRef>(new Map()); const measureRefs = React.useRef>(new Map()); const closeTimer = React.useRef(null); const springCfg = { ...DEFAULT_SPRING, ...spring }; // ---- open / active state (controlled or not) ----------------------------- const [internalValue, setInternalValue] = React.useState( defaultValue ); const activeValue = value !== undefined ? value : internalValue; const [direction, setDirection] = React.useState(1); const [focusValue, setFocusValue] = React.useState( items[0]?.value ?? "" ); const [finePointer, setFinePointer] = React.useState(true); const activeItem = items.find( (i) => i.value === activeValue && i.content != null ); const open = activeItem != null; const setActive = React.useCallback( (next: string | null) => { if (next && activeValue && next !== activeValue) { const a = triggerCentersRef.current[activeValue]; const b = triggerCentersRef.current[next]; if (a != null && b != null) setDirection(b > a ? 1 : -1); } if (value === undefined) setInternalValue(next); onValueChange?.(next); }, [activeValue, value, onValueChange] ); // ---- layout measurement -------------------------------------------------- const [navWidth, setNavWidth] = React.useState(0); const [dims, setDims] = React.useState< Record >({}); const triggerCentersRef = React.useRef>({}); const measureTriggers = React.useCallback(() => { const bar = barRef.current; if (!bar) return; const barRect = bar.getBoundingClientRect(); setNavWidth(barRect.width); const centers: Record = {}; for (const item of items) { const el = triggerRefs.current.get(item.value); if (el) { const r = el.getBoundingClientRect(); centers[item.value] = r.left - barRect.left + r.width / 2; } } triggerCentersRef.current = centers; }, [items]); React.useLayoutEffect(() => { measureTriggers(); if (typeof ResizeObserver === "undefined") return; const ro = new ResizeObserver(() => measureTriggers()); if (barRef.current) ro.observe(barRef.current); return () => ro.disconnect(); }, [measureTriggers]); // Measure each trigger's natural content size (padding included). React.useLayoutEffect(() => { if (typeof ResizeObserver === "undefined") return; const ro = new ResizeObserver((entries) => { setDims((prev) => { let changed = false; const next = { ...prev }; for (const entry of entries) { const key = entry.target.getAttribute("data-measure-key"); if (!key) continue; const el = entry.target as HTMLElement; const w = el.offsetWidth; const h = el.offsetHeight; if (!next[key] || next[key].w !== w || next[key].h !== h) { next[key] = { w, h }; changed = true; } } return changed ? next : prev; }); }); for (const el of measureRefs.current.values()) ro.observe(el); return () => ro.disconnect(); }, [items]); // ---- morph motion values ------------------------------------------------- const leftMV = useMotionValue(0); const rightMV = useMotionValue(0); const heightMV = useMotionValue(0); const caretCenterMV = useMotionValue(0); const widthMV = useTransform([leftMV, rightMV], (latest: number[]) => Math.max(0, latest[1] - latest[0]) ); const caretX = useTransform( [caretCenterMV, leftMV, rightMV], (latest: number[]) => { const [c, l, r] = latest; return clamp(c - l, CARET_PAD, Math.max(CARET_PAD, r - l - CARET_PAD)); } ); const wasOpenRef = React.useRef(false); React.useEffect(() => { if (!open || !activeValue) { wasOpenRef.current = false; return; } const dim = dims[activeValue]; const center = triggerCentersRef.current[activeValue]; if (!dim || center == null || !navWidth) return; const w = clamp(dim.w, minWidth, maxWidth); const h = dim.h; let targetLeft: number; if (w >= navWidth) targetLeft = (navWidth - w) / 2; else targetLeft = clamp(center - w / 2, 0, navWidth - w); const targetRight = targetLeft + w; if (!wasOpenRef.current || reducedMotion) { // Fresh open or reduced motion: seat the panel with no morph theatrics. leftMV.set(targetLeft); rightMV.set(targetRight); heightMV.set(h); caretCenterMV.set(center); } else { // Anticipation stretch: the leading edge (toward the new trigger) springs // fast and arrives first; the trailing edge follows a beat behind, so the // panel visibly stretches before it settles. const movingRight = targetLeft > leftMV.get(); const lead = { type: "spring" as const, stiffness: springCfg.stiffness * 1.7, damping: springCfg.damping * 1.05, mass: springCfg.mass * 0.85, }; const trail = { type: "spring" as const, stiffness: springCfg.stiffness * 0.85, damping: springCfg.damping, mass: springCfg.mass, delay: 0.05, }; if (movingRight) { animate(rightMV, targetRight, lead); animate(leftMV, targetLeft, trail); } else { animate(leftMV, targetLeft, lead); animate(rightMV, targetRight, trail); } animate(heightMV, h, { type: "spring", stiffness: springCfg.stiffness, damping: springCfg.damping, mass: springCfg.mass, }); animate(caretCenterMV, center, { type: "spring", stiffness: 700, damping: 44, }); } wasOpenRef.current = true; // springCfg is derived each render; deps below cover its inputs via `spring`. // eslint-disable-next-line react-hooks/exhaustive-deps }, [open, activeValue, dims, navWidth, reducedMotion, minWidth, maxWidth]); // ---- pointer / focus intent --------------------------------------------- React.useEffect(() => { if (typeof window === "undefined" || !window.matchMedia) return; const mql = window.matchMedia("(pointer: fine)"); const sync = () => setFinePointer(mql.matches); sync(); mql.addEventListener("change", sync); return () => mql.removeEventListener("change", sync); }, []); React.useEffect( () => () => { if (closeTimer.current != null) window.clearTimeout(closeTimer.current); }, [] ); const cancelClose = React.useCallback(() => { if (closeTimer.current != null) { window.clearTimeout(closeTimer.current); closeTimer.current = null; } }, []); const scheduleClose = React.useCallback(() => { cancelClose(); closeTimer.current = window.setTimeout(() => setActive(null), closeDelay); }, [cancelClose, closeDelay, setActive]); const hoverMode = openOn === "hover" && finePointer; const handleTriggerEnter = (item: PantographItem) => { if (!hoverMode) return; cancelClose(); if (item.content != null) setActive(item.value); else setActive(null); }; const handleTriggerClick = (item: PantographItem) => { if (item.content == null) return; // let the link/button do its thing if (openOn === "click" || !finePointer) { setActive(activeValue === item.value ? null : item.value); } }; // Click-away for click / touch open. React.useEffect(() => { if (!open || hoverMode) return; const onDown = (e: PointerEvent) => { if (!rootRef.current?.contains(e.target as Node)) setActive(null); }; document.addEventListener("pointerdown", onDown); return () => document.removeEventListener("pointerdown", onDown); }, [open, hoverMode, setActive]); // ---- keyboard: roving focus across triggers ------------------------------ const enabledItems = items; const moveFocus = (fromValue: string, dir: 1 | -1 | "home" | "end") => { const count = enabledItems.length; if (count === 0) return; let idx = enabledItems.findIndex((i) => i.value === fromValue); if (idx < 0) idx = 0; let nextIdx: number; if (dir === "home") nextIdx = 0; else if (dir === "end") nextIdx = count - 1; else nextIdx = (idx + dir + count) % count; const next = enabledItems[nextIdx]; if (!next) return; setFocusValue(next.value); triggerRefs.current.get(next.value)?.focus(); if (open) { if (next.content != null) setActive(next.value); else setActive(null); } }; const handleBarKeyDown = (e: React.KeyboardEvent) => { const from = focusValue || items[0]?.value || ""; switch (e.key) { case "ArrowRight": e.preventDefault(); moveFocus(from, 1); break; case "ArrowLeft": e.preventDefault(); moveFocus(from, -1); break; case "Home": e.preventDefault(); moveFocus(from, "home"); break; case "End": e.preventDefault(); moveFocus(from, "end"); break; case "ArrowDown": { const item = items.find((i) => i.value === from); if (item?.content != null) { e.preventDefault(); setActive(from); } break; } case "Escape": if (open) { e.preventDefault(); setActive(null); } break; default: break; } }; const handleRootBlur = (e: React.FocusEvent) => { if (!rootRef.current?.contains(e.relatedTarget as Node)) { cancelClose(); setActive(null); } }; const directionalContent = contentTransition === "directional" && !reducedMotion; const contentVariants: Variants = { enter: (dir: number) => directionalContent ? { opacity: 0, x: dir * CONTENT_SHIFT, filter: "blur(5px)" } : { opacity: 0 }, center: { opacity: 1, x: 0, filter: "blur(0px)" }, exit: (dir: number) => directionalContent ? { opacity: 0, x: -dir * CONTENT_SHIFT, filter: "blur(5px)" } : { opacity: 0 }, }; return (

{/* The trigger bar. */}

{items.map((item) => { const isActive = item.value === activeValue && item.content != null; const hasPanel = item.content != null; const commonProps = { ref: (el: HTMLElement | null) => { if (el) triggerRefs.current.set(item.value, el); else triggerRefs.current.delete(item.value); }, // Disclosure pattern (not an ARIA menu — the panel holds plain // links): triggers expose aria-expanded / aria-controls only. tabIndex: item.value === (focusValue || items[0]?.value) ? 0 : -1, "aria-expanded": hasPanel ? isActive : undefined, "aria-controls": hasPanel && isActive ? panelId : undefined, onFocus: () => { setFocusValue(item.value); if (hasPanel) setActive(item.value); else setActive(null); }, onPointerEnter: () => handleTriggerEnter(item), className: cn( "relative rounded-full px-3.5 py-1.5 text-sm font-medium whitespace-nowrap transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-950", isActive ? "text-white" : "text-white/60 hover:text-white/90" ), }; const inner = ( <> {isActive && ( )} {item.label} ); return item.href ? ( { if (hasPanel && (openOn === "click" || !finePointer)) { e.preventDefault(); handleTriggerClick(item); } }} > {inner} ) : ( ); })}

{/* The single shared flyout that morphs between triggers. */} {open && activeItem && (

{/* Top hairline sheen. */}

{activeItem.content}

{/* Caret — slides to track the active trigger, never teleports. */} {caret && ( )} )}

{/* Hidden measurers — natural content size drives the morph target. */}

{items.map((item) => item.content != null ? (

{ if (el) measureRefs.current.set(item.value, el); else measureRefs.current.delete(item.value); }} className="absolute w-max p-3" > {item.content}

) : null )}

); } 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":[["$","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@crucible","registryDependencies":["https://crucibleui.com/r/use-reduced-motion.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/navigation/pantograph/pantograph.tsx","content":"$52","type":"registry:ui","target":"components/crucible/pantograph.tsx"}],"className":"h-[70svh] min-h-80"}]]}]