4a: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4b:T2db8,"use client" import { motion } from "motion/react" import { useId, useState } from "react" const spring = { type: "spring" as const, stiffness: 500, damping: 45, mass: 1 } const floatingCardVariants = { hidden: { y: 0, x: "-50%", rotate: 0, opacity: 0, pointerEvents: "none" as const, }, left: { y: -40, x: "-85%", rotate: -18, opacity: 1, pointerEvents: "auto" as const, }, center: { y: -48, x: "-50%", rotate: 5, opacity: 1, pointerEvents: "auto" as const, }, right: { y: -35, x: "-15%", rotate: 22, opacity: 1, pointerEvents: "auto" as const, }, } const DEFAULT_SIZE = 80 // ─── Color Themes ──────────────────────────────────────────────────────────── type ColorTheme = { front: [string, string, string, string, string] back: [string, string, string, string, string] } const colorThemes = { black: { front: ["#4A4A4A", "#2C2C2C", "#1A1A1A", "#0D0D0D", "#1F1F1F"], back: ["#525252", "#3D3D3D", "#252525", "#181818", "#0E0E0E"], }, green: { front: ["#7A8B6F", "#657A58", "#566B4A", "#465A3C", "#526645"], back: ["#5C6B50", "#4F5E44", "#435139", "#38452F", "#2E3926"], }, blue: { front: ["#6B8DB5", "#4A7099", "#3A5F85", "#2B4D6E", "#35587A"], back: ["#4A6A8A", "#3D5A78", "#314B65", "#263D53", "#1E3244"], }, purple: { front: ["#8B7AAF", "#7460A0", "#604D8D", "#4D3B78", "#5A4585"], back: ["#6B5A8A", "#5C4D78", "#4D4065", "#3E3353", "#322944"], }, } satisfies Record export type OpenFolderColor = keyof typeof colorThemes // ─── SVG Paths ─────────────────────────────────────────────────────────────── const BACK_PATH = "M4.95238 36H39.6834H40.5288C42.7478 36 44.5467 34.2011 44.5467 31.9821V31.8154L44.5714 15.399V10.2488L44.5659 9.09706C44.5553 6.88562 42.7595 5.09852 40.5481 5.09852H39.619H23.2092C21.8597 5.09852 20.6004 4.42108 19.8567 3.29507L18.8714 1.80344C18.1277 0.677438 16.8683 0 15.5189 0H4.01786C1.79886 0 0 1.79886 0 4.01786V30.8498V31.9821C0 34.2011 1.79886 36 4.01786 36H4.95238Z" const FRONT_PATH = "M4.95238 35.9983H39.6834H40.6003C42.7798 35.9983 44.5467 34.2315 44.5467 32.0519L44.5714 16.5699V11.7128L44.567 10.853C44.5558 8.64207 42.7602 6.85567 40.5492 6.85567H39.619H21.0479L4.0179 6.85551C1.79888 6.85549 0 8.65435 0 10.8734V31.1412V31.9805C0 34.1995 1.79886 35.9983 4.01786 35.9983H4.95238Z" // ─── Component ─────────────────────────────────────────────────────────────── export const OpenFolder = ({ size = DEFAULT_SIZE, color = "black", content = [], }: { size?: number color?: OpenFolderColor content?: string[] }) => { return (

) } const Folder2Back = ({ size, color = "black" }: { size: number; color?: OpenFolderColor }) => { const svgWidth = size const svgHeight = size * (36 / 45) const uid = useId() const theme = colorThemes[color] ?? colorThemes.black const backId = `f2Back-${uid}` const shineId = `f2BackShine-${uid}` const edgeId = `f2BackEdge-${uid}` const vignetteId = `f2BackVignette-${uid}` return (

) } const Folder2Front = ({ hovered, size, color = "black" }: { hovered: boolean; size: number; color?: OpenFolderColor }) => { const svgWidth = size const svgHeight = size * (36 / 45) const uid = useId() const theme = colorThemes[color] ?? colorThemes.black const frontId = `f2Front-${uid}` const frontShineId = `f2FrontShine-${uid}` const frontEdgeId = `f2FrontEdge-${uid}` const frontVignetteId = `f2FrontVignette-${uid}` return ( ) } const Folder2Floating = ({ hovered, variant, delay = 0, size, content = "" }: { hovered: boolean; variant: "left" | "center" | "right"; delay?: number; size: number; content?: string }) => { const scale = size / DEFAULT_SIZE const cardWidth = 40 * scale const cardHeight = 50 * scale return (

{content}

) } const FolderPreview = ({ size = DEFAULT_SIZE, color = "black", content = [] }: { size?: number; color?: OpenFolderColor; content?: string[] }) => { const [hovered, setHovered] = useState(false) return ( setHovered(true)} onHoverEnd={() => setHovered(false)} > {/* Back Folder */} {/* Floating Cards - fan out on hover */} {/* Front Folder - opens on hover */} ) }49:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4a",null,{"files":[{"path":"components/library/open-folder.tsx","content":"$4b","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]