64: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 65: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 66:T2603,'use client'; import * as React from 'react'; import { ImagePlus, Loader2, Plus, UploadCloud } from 'lucide-react'; import { validateFile } from '@/lib/browser-utils'; import { cn } from '@/registry/localmode/lib/utils'; /** A file rejected by {@link MediaDropzone}'s accept-list / max-size validation. */ export interface MediaDropzoneRejection { /** The rejected file. */ file: File; /** Human-readable reason from the `validateFile` helper. */ reason: string; } /** Props for {@link MediaDropzone}. */ export interface MediaDropzoneProps { /** * Called with the files that pass the accept-list + max-size validation. * Always receives only valid files. */ onFiles: (files: File[]) => void; /** * Called with files that fail validation, paired with the reason. Optional — * use it to surface an inline error. */ onReject?: (rejections: MediaDropzoneRejection[]) => void; /** * Accepted MIME types, e.g. `['image/png', 'image/jpeg', 'image/webp']`. * When omitted, any file type is accepted. * @default ["image/png","image/jpeg","image/webp","image/gif"] */ accept?: string[]; /** * Maximum file size in bytes. When omitted, no size limit is enforced. * @default 10000000 */ maxSize?: number; /** * Allow selecting / dropping more than one file at a time. * @default true */ multiple?: boolean; /** * When true, render a spinner + label overlay (e.g. while a model processes * the dropped image). The zone stops accepting input while processing. * @default false */ processing?: boolean; /** Label shown while `processing` is true. @default "Processing…" */ processingLabel?: string; /** * When true, render the compact "add another" variant — a short, inline tile * instead of the full hero zone. Use it once images already exist. * @default false */ addAnother?: boolean; /** Title shown in the idle state. @default "Drop an image here" */ title?: string; /** Subtitle shown in the idle state. @default "or click to browse" */ subtitle?: string; /** Disable all interaction. @default false */ disabled?: boolean; /** Additional class names merged onto the root element. */ className?: string; } /** Proper-cased labels for common subtypes so "webp" renders "WebP", not "WEBP". */ const FORMAT_LABELS: Record = { png: 'PNG', jpeg: 'JPEG', jpg: 'JPG', webp: 'WebP', gif: 'GIF', avif: 'AVIF', bmp: 'BMP', 'svg+xml': 'SVG', }; /** Pretty-print the accept-list (MIME types) as a formats hint, e.g. "PNG · JPEG · WebP". */ function formatAcceptHint(accept?: string[]) { if (!accept || accept.length === 0) return 'Any file type'; return accept .map((type) => { const subtype = type.split('/')[1]; if (!subtype) return type; return FORMAT_LABELS[subtype.toLowerCase()] ?? subtype.toUpperCase(); }) .join(' · '); } /** * A drag-and-drop + click-to-browse upload zone for image/media files. * * Renders idle (icon + title + subtitle + accepted-formats hint), drag-over * (highlight + tint + scale), and processing (spinner + label) states, plus a * compact `addAnother` variant for adding more files once some exist. Files are * validated with the copy-owned `validateFile` (from `@/lib/browser-utils`) against `accept` + `maxSize`; * valid files are emitted via `onFiles`, rejected ones via `onReject`. * * Presentational + stateless: it owns no async/model state — wire `processing` * to a vision hook's `isLoading` and read the emitted files yourself. * * @example * ```tsx * setImages(files)} * /> * ``` */ export function MediaDropzone({ onFiles, onReject, accept = ['image/png', 'image/jpeg', 'image/webp', 'image/gif'], maxSize = 10_000_000, multiple = true, processing = false, processingLabel = 'Processing…', addAnother = false, title = 'Drop an image here', subtitle = 'or click to browse', disabled = false, className, }: MediaDropzoneProps) { const inputRef = React.useRef(null); const [isDragOver, setIsDragOver] = React.useState(false); const dragDepth = React.useRef(0); const interactive = !disabled && !processing; /** Validate a list of files, splitting into accepted / rejected. */ function partition(fileList: FileList | File[]) { const files = Array.from(fileList); const valid: File[] = []; const rejected: MediaDropzoneRejection[] = []; for (const file of files) { const error = validateFile({ file, accept, maxSize }); if (error) rejected.push({ file, reason: error.message }); else valid.push(file); } return { valid, rejected }; } function emit(fileList: FileList | File[]) { const { valid, rejected } = partition(fileList); if (rejected.length > 0) onReject?.(rejected); if (valid.length > 0) onFiles(multiple ? valid : valid.slice(0, 1)); } function handleDrop(event: React.DragEvent) { event.preventDefault(); dragDepth.current = 0; setIsDragOver(false); if (!interactive) return; if (event.dataTransfer.files.length > 0) emit(event.dataTransfer.files); } function handleDragEnter(event: React.DragEvent) { event.preventDefault(); if (!interactive) return; dragDepth.current += 1; setIsDragOver(true); } function handleDragLeave(event: React.DragEvent) { event.preventDefault(); dragDepth.current -= 1; if (dragDepth.current <= 0) { dragDepth.current = 0; setIsDragOver(false); } } function handleInputChange(event: React.ChangeEvent) { if (event.target.files && event.target.files.length > 0) { emit(event.target.files); } // Reset so selecting the same file again re-fires onChange. event.target.value = ''; } function openPicker() { if (interactive) inputRef.current?.click(); } const hiddenInput = ( ); if (addAnother) { return ( <> {hiddenInput} ); } return (

{ if (interactive && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); openPicker(); } }} onDrop={handleDrop} onDragOver={(e) => e.preventDefault()} onDragEnter={handleDragEnter} onDragLeave={handleDragLeave} className={cn( 'relative flex min-h-48 w-full flex-col items-center justify-center gap-3 rounded-xl border-2 border-dashed border-border bg-card p-8 text-center outline-none transition-all', interactive && 'cursor-pointer hover:border-primary/50 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50', isDragOver && 'scale-[1.01] border-primary bg-primary/5', !interactive && 'cursor-not-allowed', className, )} >

{isDragOver ? 'Drop to upload' : title}

{subtitle}

{formatAcceptHint(accept)} {maxSize ? ` · up to ${(maxSize / 1_000_000).toFixed(0)} MB` : ''}

{hiddenInput} {processing && (

)}

); } export default MediaDropzone; 63:["$","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"}]]}]}]]}],["$","$L64",null,{"namespace":"@registrydirectory","registryDependencies":["https://localmode.ai/r/ui/lib/utils.json","https://localmode.ai/r/ui/lib/browser-utils.json"]}]]}],null]}],["$","$L65",null,{"files":[{"path":"registry/localmode/media-vision/media-dropzone/media-dropzone.tsx","content":"$66","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]