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:T3d57,"use client"; import { AnimatePresence, motion, useMotionValue, useSpring, useTransform, useVelocity, } from "motion/react"; import * as React from "react"; import { createPortal } from "react-dom"; import { useReducedMotion } from "@/hooks/use-reduced-motion"; import { cn } from "@/lib/utils"; type Placement = "top" | "bottom" | "left" | "right"; export interface PlacardSpring { /** @default 300 */ stiffness?: number; /** @default 26 */ damping?: number; /** @default 0.7 */ mass?: number; } export interface PlacardProps { /** * The trigger — a single focusable React element (button, link, avatar). * Hovering or focusing it reveals the card. It receives `aria-describedby` * wiring automatically. */ children: React.ReactElement; /** Content rendered inside the floating card — name/role, rich preview, etc. */ content: React.ReactNode; /** * Preferred side of the trigger/pointer the card opens toward. Flips to the * opposite side automatically when it would collide with the viewport edge. * @default "top" */ placement?: Placement; /** * When true the card follows the pointer while hovering (with a subtle * velocity-keyed tilt). Keyboard focus always anchors to the trigger instead. * @default true */ follow?: boolean; /** * Peak 3D lean, in degrees, applied from pointer velocity while following. * Dialed low so the card reads as a physical surface catching light. * @default 8 */ tilt?: number; /** Spring driving position, scale, and tilt. @default { stiffness: 300, damping: 26, mass: 0.7 } */ spring?: PlacardSpring; /** Delay before opening, in ms. @default 120 */ openDelay?: number; /** Delay before closing, in ms. @default 120 */ closeDelay?: number; /** Render the little pointing arrow on the anchored edge. @default true */ arrow?: boolean; /** Minimum gap kept between the card and the viewport edge, in px. @default 8 */ collisionPadding?: number; /** Color of the single cool accent hairline at the card's top edge. @default "#38bdf8" */ accentColor?: string; /** Classes merged onto the floating card. */ className?: string; } const DEFAULT_SPRING = { stiffness: 300, damping: 26, mass: 0.7 } as const; const GAP = 10; const ARROW = 7; const TILT_FACTOR = 0.008; interface Rect { left: number; right: number; top: number; bottom: number; cx: number; cy: number; } interface Solved { x: number; y: number; place: Placement; arrow: number; } const clamp = (v: number, lo: number, hi: number) => Math.min(Math.max(v, lo), hi); function solve( rect: Rect, w: number, h: number, placement: Placement, hasArrow: boolean, pad: number ): Solved { const vw = window.innerWidth; const vh = window.innerHeight; const gap = GAP + (hasArrow ? ARROW : 0); let place = placement; // Collision flip toward the opposite side when there isn't room. if (place === "top" && rect.top - gap - h < pad && rect.bottom + gap + h + pad <= vh) { place = "bottom"; } else if (place === "bottom" && rect.bottom + gap + h > vh - pad && rect.top - gap - h >= pad) { place = "top"; } else if (place === "left" && rect.left - gap - w < pad && rect.right + gap + w + pad <= vw) { place = "right"; } else if (place === "right" && rect.right + gap + w > vw - pad && rect.left - gap - w >= pad) { place = "left"; } let x: number; let y: number; if (place === "top") { x = rect.cx - w / 2; y = rect.top - gap - h; } else if (place === "bottom") { x = rect.cx - w / 2; y = rect.bottom + gap; } else if (place === "left") { x = rect.left - gap - w; y = rect.cy - h / 2; } else { x = rect.right + gap; y = rect.cy - h / 2; } // Keep fully on screen. x = clamp(x, pad, Math.max(pad, vw - w - pad)); y = clamp(y, pad, Math.max(pad, vh - h - pad)); // Arrow slides along the anchored edge so it keeps pointing at the anchor // even after the card is clamped. const arrow = place === "top" || place === "bottom" ? clamp(rect.cx - x, 14, w - 14) : clamp(rect.cy - y, 14, h - 14); return { x, y, place, arrow }; } const ORIGIN: Record = { top: "center bottom", bottom: "center top", left: "right center", right: "left center", }; /** * Placard — an animated tooltip / hover-card. Hovering or focusing the trigger * springs up a neutral dark-glass card with a hairline border and a single cool * accent line along its top edge. While the pointer moves, the card follows it * and leans in 3D by an amount keyed to cursor velocity, so it reads as a * physical card catching light; it settles flat and scales in from 90%. * * Fully accessible: opens on focus as well as hover, exposes `role="tooltip"` * with `aria-describedby` wiring on the trigger, and dismisses on blur or * Escape. Idle-silent — no listeners, portal, or animation frames run until the * trigger is engaged. Under reduced motion it becomes a plain anchored fade * with no follow and no tilt. */ export function Placard({ children, content, placement = "top", follow = true, tilt = 8, spring, openDelay = 120, closeDelay = 120, arrow = true, collisionPadding = 8, accentColor = "#38bdf8", className, }: PlacardProps) { const reducedMotion = useReducedMotion(); const springConfig = { ...DEFAULT_SPRING, ...spring }; const [mounted, setMounted] = React.useState(false); const [open, setOpen] = React.useState(false); const [place, setPlace] = React.useState(placement); const triggerRef = React.useRef(null); const cardRef = React.useRef(null); const hoverRef = React.useRef(false); const focusRef = React.useRef(false); const escapedRef = React.useRef(false); const openRef = React.useRef(false); const placeRef = React.useRef(placement); const pointerRef = React.useRef({ x: 0, y: 0 }); const openTimer = React.useRef | undefined>(undefined); const closeTimer = React.useRef | undefined>(undefined); const tooltipId = React.useId(); // Target position; the springs below chase it for a subtle follow lag. const xt = useMotionValue(0); const yt = useMotionValue(0); const xs = useSpring(xt, springConfig); const ys = useSpring(yt, springConfig); const arrowPos = useMotionValue(0); // Pointer position feeds velocity, which drives the tilt. const px = useMotionValue(0); const py = useMotionValue(0); const vx = useVelocity(px); const vy = useVelocity(py); const rotYTarget = useTransform(vx, (v) => clamp(v * TILT_FACTOR, -tilt, tilt)); const rotXTarget = useTransform(vy, (v) => clamp(-v * TILT_FACTOR, -tilt, tilt)); const rotateY = useSpring(rotYTarget, springConfig); const rotateX = useSpring(rotXTarget, springConfig); React.useEffect(() => setMounted(true), []); React.useEffect(() => { openRef.current = open; }, [open]); const isFollowing = React.useCallback( () => follow && hoverRef.current && !reducedMotion, [follow, reducedMotion] ); const reposition = React.useCallback(() => { const card = cardRef.current; if (!card) return; const w = card.offsetWidth; const h = card.offsetHeight; let rect: Rect; if (isFollowing()) { const p = pointerRef.current; rect = { left: p.x, right: p.x, top: p.y, bottom: p.y, cx: p.x, cy: p.y }; } else { const t = triggerRef.current?.getBoundingClientRect(); if (!t) return; rect = { left: t.left, right: t.right, top: t.top, bottom: t.bottom, cx: t.left + t.width / 2, cy: t.top + t.height / 2, }; } const r = solve(rect, w, h, placement, arrow, collisionPadding); xt.set(r.x); yt.set(r.y); arrowPos.set(r.arrow); if (r.place !== placeRef.current) { placeRef.current = r.place; setPlace(r.place); } }, [isFollowing, placement, arrow, collisionPadding, xt, yt, arrowPos]); const sync = React.useCallback(() => { if (openTimer.current) clearTimeout(openTimer.current); if (closeTimer.current) clearTimeout(closeTimer.current); const wantOpen = (hoverRef.current || focusRef.current) && !escapedRef.current; if (wantOpen) { openTimer.current = setTimeout(() => setOpen(true), openDelay); } else { closeTimer.current = setTimeout(() => setOpen(false), closeDelay); } }, [openDelay, closeDelay]); // Position instantly (no spring travel) the first frame the card mounts. // Re-place on the next frame too: on the very first open the card ref/layout // may not be measurable yet, so reposition() bails and the springs would sit // at the stale (0,0) — which is what stranded keyboard-focus opens in the // corner (no pointer-move to correct them). The card fades in from opacity 0, // so the one-frame correction isn't visible. React.useLayoutEffect(() => { if (!open) return; const place = () => { reposition(); xs.jump(xt.get()); ys.jump(yt.get()); }; place(); const id = requestAnimationFrame(place); return () => cancelAnimationFrame(id); }, [open, reposition, xs, ys, xt, yt]); // Reposition on scroll/resize while open (only work when engaged). React.useEffect(() => { if (!open) return; const onScroll = () => reposition(); window.addEventListener("scroll", onScroll, true); window.addEventListener("resize", onScroll); const card = cardRef.current; const ro = card && typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => reposition()) : null; if (ro && card) ro.observe(card); return () => { window.removeEventListener("scroll", onScroll, true); window.removeEventListener("resize", onScroll); ro?.disconnect(); }; }, [open, reposition]); // Escape dismisses from anywhere while open — a hover-opened card must be // dismissable without moving the pointer or focusing the trigger. React.useEffect(() => { if (!open) return; const onKey = (e: KeyboardEvent) => { if (e.key !== "Escape") return; escapedRef.current = true; if (openTimer.current) clearTimeout(openTimer.current); setOpen(false); }; document.addEventListener("keydown", onKey); return () => document.removeEventListener("keydown", onKey); }, [open]); React.useEffect( () => () => { if (openTimer.current) clearTimeout(openTimer.current); if (closeTimer.current) clearTimeout(closeTimer.current); }, [] ); const handlePointerEnter = (e: React.PointerEvent) => { if (e.pointerType === "touch") return; hoverRef.current = true; escapedRef.current = false; pointerRef.current = { x: e.clientX, y: e.clientY }; // Seat the velocity sources at the entry point — otherwise the first move // reads as a jump from (0,0) and the card lurches to full tilt. px.jump(e.clientX); py.jump(e.clientY); sync(); }; const handlePointerMove = (e: React.PointerEvent) => { if (e.pointerType === "touch") return; pointerRef.current = { x: e.clientX, y: e.clientY }; if (isFollowing()) { px.set(e.clientX); py.set(e.clientY); if (openRef.current) reposition(); } }; const handlePointerLeave = () => { hoverRef.current = false; escapedRef.current = false; sync(); if (openRef.current) reposition(); }; const handleFocus = () => { focusRef.current = true; escapedRef.current = false; sync(); if (openRef.current) reposition(); }; const handleBlur = () => { focusRef.current = false; escapedRef.current = false; sync(); }; const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Escape" && openRef.current) { escapedRef.current = true; if (openTimer.current) clearTimeout(openTimer.current); setOpen(false); } }; const childProps = children.props as { "aria-describedby"?: string }; const describedBy = [childProps["aria-describedby"], open ? tooltipId : null].filter(Boolean).join(" ") || undefined; const trigger = ( { triggerRef.current = node; }} className="inline-flex" onPointerEnter={handlePointerEnter} onPointerMove={handlePointerMove} onPointerLeave={handlePointerLeave} onFocus={handleFocus} onBlur={handleBlur} onKeyDown={handleKeyDown} > {React.cloneElement(children as React.ReactElement<{ "aria-describedby"?: string }>, { "aria-describedby": describedBy, })} ); const arrowSideClass = place === "top" ? "left-0 bottom-0 translate-y-1/2 border-b border-r" : place === "bottom" ? "left-0 top-0 -translate-y-1/2 border-t border-l" : place === "left" ? "top-0 right-0 translate-x-1/2 border-t border-r" : "top-0 left-0 -translate-x-1/2 border-b border-l"; const overlay = open ? ( ) : null; return ( <> {trigger} {mounted ? createPortal({overlay}, document.body) : 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/utility/placard/placard.tsx","content":"$52","type":"registry:ui","target":"components/crucible/placard.tsx"}],"className":"h-[70svh] min-h-80"}]]}]