4f: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/1o6_421saitt-.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"] 50: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/1o6_421saitt-.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"] 51:T1d0a,"use client" import { forwardRef, ReactNode, useCallback, useEffect, useImperativeHandle, useRef, } from "react" import { motion, useMotionValue, useSpring, useTransform } from "motion/react" import { cn } from "@/lib/utils" interface FaceProps { transform: string className?: string showBackface?: boolean children?: ReactNode style?: React.CSSProperties } const CubeFace = ({ transform, className, showBackface, children, style, }: FaceProps) => (

{children}

) interface CubeFaces { front?: ReactNode back?: ReactNode right?: ReactNode left?: ReactNode top?: ReactNode bottom?: ReactNode } export interface CSSBoxRef { showFront: () => void showBack: () => void showLeft: () => void showRight: () => void showTop: () => void showBottom: () => void rotateTo: (x: number, y: number) => void getCurrentRotation: () => { x: number; y: number } } interface CSSBoxProps extends React.HTMLProps { width: number height: number depth: number className?: string perspective?: number stiffness?: number damping?: number showBackface?: boolean faces?: CubeFaces draggable?: boolean } const CSSBox = forwardRef( ( { width, height, depth, className, perspective = 600, stiffness = 100, damping = 30, showBackface = false, faces = {}, draggable = true, ...props }, ref ) => { const isDragging = useRef(false) const startPosition = useRef({ x: 0, y: 0 }) const startRotation = useRef({ x: 0, y: 0 }) const baseRotateX = useMotionValue(0) const baseRotateY = useMotionValue(0) const springRotateX = useSpring(baseRotateX, { stiffness, damping, ...(isDragging.current ? { stiffness: stiffness / 2 } : {}), }) const springRotateY = useSpring(baseRotateY, { stiffness, damping, ...(isDragging.current ? { stiffness: stiffness / 2 } : {}), }) const currentRotation = useRef({ x: 0, y: 0 }) useImperativeHandle( ref, () => ({ showFront: () => { baseRotateX.set(0) baseRotateY.set(0) }, showBack: () => { baseRotateX.set(0) baseRotateY.set(180) }, showLeft: () => { baseRotateX.set(0) baseRotateY.set(-90) }, showRight: () => { baseRotateX.set(0) baseRotateY.set(90) }, showTop: () => { baseRotateX.set(-90) baseRotateY.set(0) }, showBottom: () => { baseRotateX.set(90) baseRotateY.set(0) }, rotateTo: (x: number, y: number) => { baseRotateX.set(x) baseRotateY.set(y) }, getCurrentRotation: () => currentRotation.current, }), [] ) const transform = useTransform( [springRotateX, springRotateY], ([x, y]) => `translateZ(-${depth / 2}px) rotateX(${x}deg) rotateY(${y}deg)` ) const handleStart = useCallback( (e: React.MouseEvent | React.TouchEvent) => { if (!draggable) return isDragging.current = true const point = 'touches' in e ? e.touches[0] : e startPosition.current = { x: point.clientX, y: point.clientY } startRotation.current = { x: baseRotateX.get(), y: baseRotateY.get(), } }, [draggable] ) const handleMove = useCallback((e: MouseEvent | TouchEvent) => { if (!isDragging.current) return const point = 'touches' in e ? e.touches[0] : e const deltaX = point.clientX - startPosition.current.x const deltaY = point.clientY - startPosition.current.y baseRotateX.set(startRotation.current.x - deltaY / 2) baseRotateY.set(startRotation.current.y + deltaX / 2) }, []) const handleEnd = useCallback(() => { isDragging.current = false }, []) useEffect(() => { if (draggable) { window.addEventListener("mousemove", handleMove) window.addEventListener("mouseup", handleEnd) window.addEventListener("touchmove", handleMove) window.addEventListener("touchend", handleEnd) return () => { window.removeEventListener("mousemove", handleMove) window.removeEventListener("mouseup", handleEnd) window.removeEventListener("touchmove", handleMove) window.removeEventListener("touchend", handleEnd) } } }, [draggable, handleMove, handleEnd]) useEffect(() => { const unsubscribeX = baseRotateX.on("change", (v) => { currentRotation.current.x = v }) const unsubscribeY = baseRotateY.on("change", (v) => { currentRotation.current.y = v }) return () => { unsubscribeX() unsubscribeY() } }, []) return (

{/* Front and Back */} {faces.front} {faces.back} {/* Right and Left */} {faces.right} {faces.left} {/* Top and Bottom */} {faces.top} {faces.bottom}

) } ) CSSBox.displayName = "CSSBox" export default CSSBox 4e:["$","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"}]]}]}]]}],["$","$L4f",null,{"namespace":"@catalogs","registryDependencies":[]}]]}],null]}],["$","$L50",null,{"files":[{"path":"fancy/blocks/css-box.tsx","content":"$51","type":"registry:ui","target":"components/fancy/blocks/css-box.tsx"}],"className":"h-[70svh] min-h-80"}]]}]