53: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"] 54: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"] 55:T2cb5,"use client"; import { useCallback, useMemo, useRef, useState, type PointerEvent as ReactPointerEvent, } from "react"; import { useDropzone } from "react-dropzone"; import { Check, ImageUp, RotateCw, Upload, ZoomIn } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Card, CardContent } from "@/components/ui/card"; import { Slider } from "@/components/ui/slider"; import { cn } from "@/lib/utils"; const FRAME_SIZE = 208; const OUTPUT_SIZE = 320; const BUTTON_CLASS = "h-8 rounded-lg px-3 cursor-pointer"; const ENTRANCE_ANIMATION = "animate-in fade-in zoom-in-95 duration-300"; type Stage = "idle" | "editing" | "done"; const loadImage = (src: string) => new Promise((resolve, reject) => { const img = new Image(); img.onload = () => resolve(img); img.onerror = reject; img.src = src; }); const FileUpload = () => { const [stage, setStage] = useState("idle"); const [imageUrl, setImageUrl] = useState(null); const [resultUrl, setResultUrl] = useState(null); const [zoom, setZoom] = useState([1]); const [rotation, setRotation] = useState(0); const [offset, setOffset] = useState({ x: 0, y: 0 }); const [naturalSize, setNaturalSize] = useState({ width: 0, height: 0 }); const dragState = useRef<{ startX: number; startY: number; originX: number; originY: number; } | null>(null); const [isDragging, setIsDragging] = useState(false); const resetEditor = () => { setZoom([1]); setRotation(0); setOffset({ x: 0, y: 0 }); }; const loadFile = useCallback((file: File | undefined) => { if (!file || !file.type.startsWith("image/")) return; const url = URL.createObjectURL(file); loadImage(url).then((img) => { setNaturalSize({ width: img.naturalWidth, height: img.naturalHeight }); setImageUrl(url); setResultUrl(null); resetEditor(); setStage("editing"); }); }, []); const onDrop = useCallback( (acceptedFiles: File[]) => loadFile(acceptedFiles[0]), [loadFile], ); const { getRootProps, getInputProps, isDragActive, open } = useDropzone({ onDrop, multiple: false, accept: { "image/*": [".jpeg", ".jpg", ".png", ".webp"] }, disabled: stage === "editing", noClick: stage !== "idle", }); const handlePointerDown = (e: ReactPointerEvent) => { dragState.current = { startX: e.clientX, startY: e.clientY, originX: offset.x, originY: offset.y, }; setIsDragging(true); (e.target as HTMLElement).setPointerCapture(e.pointerId); }; const handlePointerMove = (e: ReactPointerEvent) => { if (!dragState.current) return; const dx = e.clientX - dragState.current.startX; const dy = e.clientY - dragState.current.startY; setOffset({ x: dragState.current.originX + dx, y: dragState.current.originY + dy, }); }; const handlePointerUp = () => { dragState.current = null; setIsDragging(false); }; const displayScale = useMemo(() => { const { width, height } = naturalSize; if (!width || !height) return 1; return FRAME_SIZE / Math.min(width, height); }, [naturalSize]); const displaySize = useMemo( () => ({ width: naturalSize.width * displayScale * zoom[0], height: naturalSize.height * displayScale * zoom[0], }), [naturalSize, displayScale, zoom], ); const confirmCrop = () => { if (!imageUrl) return; loadImage(imageUrl).then((img) => { const canvas = document.createElement("canvas"); canvas.width = OUTPUT_SIZE; canvas.height = OUTPUT_SIZE; const ctx = canvas.getContext("2d"); if (!ctx) return; const outputScale = OUTPUT_SIZE / FRAME_SIZE; ctx.save(); ctx.beginPath(); ctx.arc( OUTPUT_SIZE / 2, OUTPUT_SIZE / 2, OUTPUT_SIZE / 2, 0, Math.PI * 2, ); ctx.clip(); ctx.translate(OUTPUT_SIZE / 2, OUTPUT_SIZE / 2); ctx.rotate((rotation * Math.PI) / 180); ctx.translate(offset.x * outputScale, offset.y * outputScale); const scale = displayScale * zoom[0] * outputScale; ctx.scale(scale, scale); ctx.drawImage(img, -naturalSize.width / 2, -naturalSize.height / 2); ctx.restore(); setResultUrl(canvas.toDataURL("image/png")); setStage("done"); }); }; const startOver = () => { setStage("idle"); setImageUrl(null); setResultUrl(null); resetEditor(); }; return (

{stage === "idle" && (

{isDragActive ? "Drop it here" : "Drag & drop an image"}

You'll be able to zoom, pan and rotate before uploading.

)} {stage === "editing" && imageUrl && (

{/* grid overlay for framing feedback */}

setZoom(Array.isArray(val) ? val : [val]) } min={1} max={3} step={0.01} aria-label="Zoom" />

)} {stage === "done" && resultUrl && (

Photo ready

Cropped and optimized for upload.

)}

); }; export default FileUpload; 52:["$","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","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}],["$","li","react-dropzone",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-dropzone","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":"react-dropzone"}]]}]}]]}],["$","$L53",null,{"namespace":"@shadcn-space","registryDependencies":["button","card","slider"]}]]}],null]}],["$","$L54",null,{"files":[{"path":"src/components/shadcn-space/file-upload/file-upload-05.tsx","content":"$55","type":"registry:component","target":"components/shadcn-space/file-upload/file-upload-05.tsx"}],"className":"h-[70svh] min-h-80"}]]}]