51: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"] 52: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"] 53:T1933,"use client"; import { useCallback, useEffect, useRef, useState } from "react"; import { motion, useReducedMotion } from "motion/react"; const PRESS = { type: "spring", stiffness: 520, damping: 34, mass: 0.45 } as const; export type UsePressDepthOptions = { disabled?: boolean; onPressStart?: () => void; onPressEnd?: () => void; }; export type PressOrigin = { x: number; y: number }; export type UsePressDepthResult = { pressed: boolean; origin: PressOrigin | null; ref: (node: HTMLElement | null) => void; bind: { onPointerDown: (event: React.PointerEvent) => void; onKeyDown: (event: React.KeyboardEvent) => void; onKeyUp: (event: React.KeyboardEvent) => void; onBlur: () => void; }; }; export function usePressDepth( options: UsePressDepthOptions = {}, ): UsePressDepthResult { const { disabled = false, onPressStart, onPressEnd } = options; const [pressed, setPressed] = useState(false); const [tracking, setTracking] = useState(false); const [origin, setOrigin] = useState(null); const node = useRef(null); const pointer = useRef(null); const down = useRef(false); const began = useRef(onPressStart); began.current = onPressStart; const ended = useRef(onPressEnd); ended.current = onPressEnd; const setDown = useCallback((next: boolean) => { if (down.current === next) return; down.current = next; setPressed(next); if (next) began.current?.(); else ended.current?.(); }, []); const stop = useCallback(() => { pointer.current = null; setTracking(false); setOrigin(null); setDown(false); }, [setDown]); useEffect(() => { if (!tracking) return; const contains = (event: PointerEvent) => { const el = node.current; if (!el) return false; const r = el.getBoundingClientRect(); return ( event.clientX >= r.left && event.clientX <= r.right && event.clientY >= r.top && event.clientY <= r.bottom ); }; const move = (event: PointerEvent) => { if (event.pointerId !== pointer.current) return; setDown(contains(event)); }; const lift = (event: PointerEvent) => { if (event.pointerId !== pointer.current) return; stop(); }; const bail = () => stop(); const hidden = () => { if (document.hidden) stop(); }; window.addEventListener("pointermove", move); window.addEventListener("pointerup", lift); window.addEventListener("pointercancel", lift); window.addEventListener("blur", bail); document.addEventListener("visibilitychange", hidden); return () => { window.removeEventListener("pointermove", move); window.removeEventListener("pointerup", lift); window.removeEventListener("pointercancel", lift); window.removeEventListener("blur", bail); document.removeEventListener("visibilitychange", hidden); }; }, [tracking, setDown, stop]); useEffect(() => { if (disabled) stop(); }, [disabled, stop]); const ref = useCallback((next: HTMLElement | null) => { node.current = next; }, []); const bind = { onPointerDown: (event: React.PointerEvent) => { if (disabled) return; if (event.pointerType === "mouse" && event.button !== 0) return; const r = event.currentTarget.getBoundingClientRect(); setOrigin({ x: Math.max(-1, Math.min(1, ((event.clientX - r.left) / r.width) * 2 - 1)), y: Math.max(-1, Math.min(1, ((event.clientY - r.top) / r.height) * 2 - 1)), }); pointer.current = event.pointerId; setTracking(true); setDown(true); }, onKeyDown: (event: React.KeyboardEvent) => { if (disabled || event.repeat) return; if (event.key === " " || event.key === "Enter") setDown(true); }, onKeyUp: (event: React.KeyboardEvent) => { if (event.key === " " || event.key === "Enter" || event.key === "Escape") { setDown(false); } }, onBlur: () => stop(), }; return { pressed, origin, ref, bind }; } export type PressDepthProps = { children: React.ReactNode; depth?: number; tilt?: number; disabled?: boolean; type?: "button" | "submit" | "reset"; onClick?: React.MouseEventHandler; className?: string; "aria-label"?: string; }; export function PressDepth({ children, depth = 4, tilt = 7, disabled = false, type = "button", onClick, className = "", "aria-label": ariaLabel, }: PressDepthProps) { const reduced = useReducedMotion(); const { pressed, origin, ref, bind } = usePressDepth({ disabled }); const lean = pressed && origin && !reduced ? origin : null; return ( ); } 50:["$","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"}]]}]}]]}],["$","$L51",null,{"namespace":"@interior","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/interior/press-depth.tsx","content":"$53","type":"registry:ui","target":"components/interior/press-depth.tsx"}],"className":"h-[70svh] min-h-80"}]]}]