4e: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"] 4f: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"] 50:T1b59,// Hairline UI · drop-zone · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components 'use client'; import * as React from 'react'; import { ArrowUp, CircleAlert, X } from 'lucide-react'; import { DropZoneFileRow } from './drop-zone-file-row'; import type { DropZoneProps } from './drop-zone-types'; import { selectionHint } from './drop-zone-utils'; import { useDropZone } from './use-drop-zone'; import { TextMorph } from './text-morph'; import { INTERACTION_FOCUS } from './ui-interaction-motion'; export type { DropZoneStatus, DropZoneFile, DropZoneUpload, DropZoneRejection, DropZoneHandle, DropZoneProps } from './drop-zone-types'; export { formatBytes } from './drop-zone-utils'; const carriesFiles = (data: DataTransfer) => Array.from(data.types).includes('Files'); export function DropZone({ onUpload, onFilesChange, onFilesRejected, accept, maxSize, maxFiles, multiple = true, title = 'Drop files here', hint, disabled = false, ref, className = '', onPaste, ...props }: DropZoneProps) { const input = React.useRef(null); const area = React.useRef(null); const depth = React.useRef(0); const [dragging, setDragging] = React.useState(false); const id = React.useId(); const { rows, rejections, announcement, add, remove, retry, dismissRejections } = useDropZone({ onUpload, onFilesChange, onFilesRejected, accept, maxSize, maxFiles, multiple, disabled, }); const description = hint ?? selectionHint(accept, maxSize, multiple ? maxFiles : 1); const cancel = React.useCallback(() => { depth.current = 0; setDragging(false); }, []); const browse = React.useCallback(() => { if (!disabled) input.current?.click(); }, [disabled]); const contains = React.useCallback((x: number, y: number) => { const rect = area.current?.getBoundingClientRect(); return !!rect && rect.width > 0 && rect.height > 0 && x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom; }, []); React.useEffect(() => { if (disabled) cancel(); }, [disabled, cancel]); React.useImperativeHandle(ref, () => ({ browse, cancel, drag: (x, y) => { const inside = !disabled && contains(x, y); setDragging(inside); return inside; }, drop: (files, at) => { cancel(); if (!at || contains(at.x, at.y)) add(files); }, }), [browse, cancel, disabled, contains, add]); return (

{ onPaste?.(event); if (event.defaultPrevented || disabled) return; const files = Array.from(event.clipboardData.files); if (files.length) { event.preventDefault(); cancel(); add(files); } }} > { const files = Array.from(event.currentTarget.files ?? []); event.currentTarget.value = ''; cancel(); add(files); }} /> {rejections.length > 0 && (

)} {rows.length > 0 && (

remove(row.id)} onRetry={() => retry(row.id)} />)}

)}

{announcement}

); } 51:T727,// Hairline UI · drop-zone · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components import type * as React from 'react'; export type DropZoneStatus = 'ready' | 'uploading' | 'done' | 'error'; export interface DropZoneFile { id: string; file: File; status: DropZoneStatus; /** A fraction from 0 to 1. */ progress: number; error?: string; } export type DropZoneUpload = ( file: File, context: { progress: (fraction: number) => void; signal: AbortSignal }, ) => void | Promise; export interface DropZoneRejection { file: File; code: 'type' | 'size' | 'count' | 'duplicate'; reason: string; } export interface DropZoneHandle { /** Tracks a drag from your app. Only coordinates inside the drop area return true. */ drag: (clientX: number, clientY: number, types?: string[]) => boolean; cancel: () => void; /** Adds files from your app; optional coordinates must be inside the drop area. */ drop: (files: File[], at?: { x: number; y: number }) => void; browse: () => void; } export interface DropZoneProps extends Omit, 'onDrop' | 'title'> { /** Resolve when uploaded, throw to offer Retry, and honour the abort signal. */ onUpload?: DropZoneUpload; /** Current selection after adding, replacing or removing files. */ onFilesChange?: (files: File[]) => void; onFilesRejected?: (rejections: DropZoneRejection[]) => void; /** Native input syntax: MIME types, wildcards or extensions, e.g. "image/*,.pdf". */ accept?: string; /** Maximum size of each file in bytes. */ maxSize?: number; maxFiles?: number; /** false replaces the current file when a valid new file is selected. */ multiple?: boolean; title?: string; hint?: string; disabled?: boolean; ref?: React.Ref; } 52:Tb6a,// Hairline UI · drop-zone · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components import type { DropZoneRejection } from './drop-zone-types'; export function formatBytes(bytes: number) { if (bytes < 1000) return `${bytes} B`; const unit = bytes < 1e6 ? 'KB' : bytes < 1e9 ? 'MB' : 'GB'; const value = bytes / (unit === 'KB' ? 1000 : unit === 'MB' ? 1e6 : 1e9); return `${Number(value.toFixed(1))} ${unit}`; } export const acceptRules = (accept = '') => accept.split(',').map((rule) => rule.trim().toLowerCase()).filter(Boolean); export function acceptsFile(file: File, rules: string[]) { const name = file.name.toLowerCase(); const type = file.type.toLowerCase(); return !rules.length || rules.some((rule) => rule.startsWith('.') ? name.endsWith(rule) : rule.endsWith('/*') ? type.startsWith(rule.slice(0, -1)) : type === rule, ); } export const sameFile = (a: File, b: File) => a.name === b.name && a.size === b.size && a.type === b.type && a.lastModified === b.lastModified; export function selectionHint(accept?: string, maxSize?: number, maxFiles?: number) { const types = acceptRules(accept).map((rule) => rule.startsWith('.') ? rule.slice(1).toUpperCase() : rule.endsWith('/*') ? `${rule.slice(0, -2)} files` : rule.split('/').pop(), ).join(', '); return [types || 'Any file type', maxSize === undefined ? '' : `Up to ${formatBytes(maxSize)} per file`, maxFiles === undefined ? '' : `${maxFiles} file${maxFiles === 1 ? '' : 's'} maximum`].filter(Boolean).join(' · '); } /** Validate a whole batch before replacing a single-file selection. */ export function selectFiles(files: File[], current: File[], options: { accept?: string; maxSize?: number; maxFiles?: number; multiple?: boolean; }) { const { maxSize, maxFiles, multiple = true } = options; const rules = acceptRules(options.accept); const limit = maxFiles === undefined ? Infinity : Math.max(0, Math.floor(maxFiles)); const room = multiple ? Math.max(0, limit - current.length) : Math.min(1, limit); const accepted: File[] = []; const rejected: DropZoneRejection[] = []; for (const file of files) { let problem: Omit | undefined; if (!acceptsFile(file, rules)) problem = { code: 'type', reason: 'This file type is not supported.' }; else if (maxSize !== undefined && file.size > maxSize) problem = { code: 'size', reason: `Exceeds the ${formatBytes(maxSize)} limit.` }; else if ([...current, ...accepted].some((other) => sameFile(file, other))) problem = { code: 'duplicate', reason: 'This file has already been added.' }; else if (accepted.length >= room) problem = { code: 'count', reason: multiple ? `You can add up to ${maxFiles} files.` : 'Choose one file at a time.' }; if (problem) rejected.push({ file, ...problem }); else accepted.push(file); } return { accepted, rejected }; } 53:Tef9,// Hairline UI · drop-zone · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components 'use client'; import { File as FileIcon, FileImage, FileText, RotateCcw, X } from 'lucide-react'; import type { DropZoneFile } from './drop-zone-types'; import { formatBytes } from './drop-zone-utils'; import { DropZoneStatusMark } from './drop-zone-status'; import { NumberRoll } from './number-roll'; import { TextMorph } from './text-morph'; import { INTERACTION_FOCUS } from './ui-interaction-motion'; const action = `flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:cursor-default disabled:opacity-40 motion-reduce:transition-none ${INTERACTION_FOCUS}`; export function DropZoneFileRow({ row, disabled, onRemove, onRetry }: { row: DropZoneFile; disabled: boolean; onRemove: () => void; onRetry: () => void; }) { const { file, status, progress, error } = row; const Icon = file.type.startsWith('image/') ? FileImage : file.type === 'application/pdf' || file.type.startsWith('text/') ? FileText : FileIcon; const uploading = status === 'uploading'; const errorId = `${row.id}-error`; return (

{status === 'error' ? Failed : ( <> {formatBytes(file.size)} {uploading && } )} {status === 'done' ? 'Uploaded' : status === 'ready' ? 'Ready' : uploading ? 'Uploading' : 'Upload failed'} {status === 'error' && ( )}

{error &&

{error}

} {uploading && ( )}

); } 54:T756,// Hairline UI · drop-zone · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components 'use client'; import { CircleAlert } from 'lucide-react'; import type { DropZoneStatus } from './drop-zone-types'; import { interactionIcon, useInteractionReducedMotion } from './ui-interaction-motion'; /** The original row's progress ring and drawn check, without any flying-file effects. */ export function DropZoneStatusMark({ status, progress }: { status: DropZoneStatus; progress: number }) { const reduced = useInteractionReducedMotion(); return ( ); } 55:T1490,// Hairline UI · drop-zone · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components 'use client'; import * as React from 'react'; import type { DropZoneFile, DropZoneProps, DropZoneRejection } from './drop-zone-types'; import { selectFiles } from './drop-zone-utils'; type Options = Pick; export function useDropZone(options: Options) { const [rows, setRows] = React.useState([]); const [rejections, setRejections] = React.useState([]); const [announcement, setAnnouncement] = React.useState(''); const current = React.useRef(rows); const latest = React.useRef(options); latest.current = options; const controllers = React.useRef(new Map()); const sequence = React.useRef(0); const prefix = React.useId(); const mounted = React.useRef(true); React.useEffect(() => { mounted.current = true; const active = controllers.current; return () => { mounted.current = false; active.forEach((controller) => controller.abort()); active.clear(); }; }, []); const commit = React.useCallback((next: DropZoneFile[]) => { current.current = next; if (mounted.current) setRows(next); }, []); const patch = React.useCallback((id: string, next: Partial) => { if (mounted.current) commit(current.current.map((row) => row.id === id ? { ...row, ...next } : row)); }, [commit]); const start = React.useCallback((id: string, file: File) => { const upload = latest.current.onUpload; if (!upload) { patch(id, { status: 'ready', progress: 0, error: undefined }); return; } controllers.current.get(id)?.abort(); const controller = new AbortController(); controllers.current.set(id, controller); patch(id, { status: 'uploading', progress: 0, error: undefined }); const active = () => mounted.current && !controller.signal.aborted && controllers.current.get(id) === controller; let last = 0; Promise.resolve().then(() => { if (!active()) return; return upload(file, { signal: controller.signal, progress: (fraction) => { if (!active() || !Number.isFinite(fraction)) return; const value = Math.max(last, Math.min(1, Math.max(0, fraction))); if (value === last) return; last = value; patch(id, { progress: value }); }, }); }).then(() => { if (!active()) return; patch(id, { status: 'done', progress: 1 }); setAnnouncement(`${file.name} uploaded.`); }, (error: unknown) => { if (!active()) return; const message = error instanceof Error && error.message ? error.message : 'Upload failed. Please try again.'; patch(id, { status: 'error', error: message }); setAnnouncement(`${file.name}: ${message}`); }).finally(() => { if (controllers.current.get(id) === controller) controllers.current.delete(id); }); }, [patch]); const add = React.useCallback((files: File[]) => { const settings = latest.current; if (settings.disabled || !files.length) return; const { accepted, rejected } = selectFiles(files, current.current.map((row) => row.file), settings); setRejections(rejected); if (accepted.length) { const added: DropZoneFile[] = accepted.map((file) => ({ id: `${prefix}-${++sequence.current}`, file, status: settings.onUpload ? 'uploading' : 'ready', progress: 0, })); if (settings.multiple === false) { controllers.current.forEach((controller) => controller.abort()); controllers.current.clear(); } const next = [...(settings.multiple === false ? [] : current.current), ...added]; commit(next); added.forEach((row) => start(row.id, row.file)); settings.onFilesChange?.(next.map((row) => row.file)); } setAnnouncement([ accepted.length ? `Added ${accepted.map((file) => file.name).join(', ')}.` : '', rejected.length ? `${rejected.length} file${rejected.length === 1 ? '' : 's'} skipped. Check the file requirements.` : '', ].filter(Boolean).join(' ')); if (rejected.length) settings.onFilesRejected?.(rejected); }, [commit, prefix, start]); const remove = React.useCallback((id: string) => { if (latest.current.disabled) return; const row = current.current.find((entry) => entry.id === id); if (!row) return; controllers.current.get(id)?.abort(); controllers.current.delete(id); const next = current.current.filter((entry) => entry.id !== id); commit(next); setAnnouncement(`${row.file.name} ${row.status === 'uploading' ? 'cancelled' : 'removed'}.`); latest.current.onFilesChange?.(next.map((entry) => entry.file)); }, [commit]); const retry = React.useCallback((id: string) => { if (latest.current.disabled) return; const row = current.current.find((entry) => entry.id === id); if (row?.status === 'error') { start(id, row.file); setAnnouncement(`Retrying ${row.file.name}.`); } }, [start]); return { rows, rejections, announcement, add, remove, retry, dismissRejections: () => setRejections([]) }; } 56:Tc67,// Hairline UI · drop-zone · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components 'use client'; import * as React from 'react'; export const EASE_OUT = 'cubic-bezier(0.16, 1, 0.3, 1)'; export const EASE_SETTLE = 'cubic-bezier(0.22, 1.18, 0.36, 1)'; export const INTERACTION_FOCUS = 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background'; const query = '(prefers-reduced-motion: reduce)'; const subscribe = (notify: () => void) => { const media = window.matchMedia(query); media.addEventListener('change', notify); return () => media.removeEventListener('change', notify); }; export const useInteractionReducedMotion = () => React.useSyncExternalStore(subscribe, () => window.matchMedia(query).matches, () => false); export function useInteractionActivity() { const ref = React.useRef(null); const [visible, setVisible] = React.useState(false); const [hidden, setHidden] = React.useState(false); React.useEffect(() => { const el = ref.current; if (!el) return; const observer = new IntersectionObserver(([entry]) => setVisible(entry.isIntersecting)); observer.observe(el); const visibility = () => setHidden(document.hidden); visibility(); document.addEventListener('visibilitychange', visibility); return () => { observer.disconnect(); document.removeEventListener('visibilitychange', visibility); }; }, []); return { ref, active: visible && !hidden }; } export function interactionIcon(on: boolean, reduced: boolean): React.CSSProperties { return { opacity: on ? 1 : 0, transform: on ? 'none' : 'scale(0.6)', filter: on ? 'blur(0px)' : 'blur(3px)', transition: reduced ? 'none' : `opacity 220ms ${EASE_OUT}, transform 380ms ${EASE_OUT}, filter 220ms ${EASE_OUT}` }; } /** Sample recent movement rather than averaging a long drag and losing its release velocity. */ export type PointerSample = { x: number; time: number }; export function samplePointer(samples: PointerSample[], x: number, time: number) { samples.push({ x, time }); while (samples.length > 2 && time - samples[0].time > 100) samples.shift(); } export function releaseVelocity(samples: PointerSample[], now: number) { if (samples.length < 2 || now - samples[samples.length - 1].time > 100) return 0; const first = samples[0], last = samples[samples.length - 1]; return (last.x - first.x) / Math.max(1, last.time - first.time); } /** A damped spring sampled by WAAPI: no React renders or perpetual frame loop. */ export function springFrames(from: number, to: number, velocity = 0, duration = 520) { const omega = 20, damping = 0.82, damped = omega * Math.sqrt(1 - damping * damping); const displacement = from - to; const coefficient = (velocity * 1000 + damping * omega * displacement) / damped; return Array.from({ length: 33 }, (_, i) => { const t = (i / 32) * duration / 1000; const value = to + Math.exp(-damping * omega * t) * (displacement * Math.cos(damped * t) + coefficient * Math.sin(damped * t)); return { value: i === 32 ? to : value, offset: i / 32 }; }); } 4d:["$","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"}]]}]}]]}],["$","$L4e",null,{"namespace":"@hairline","registryDependencies":["https://hairlineui.com/r/text-morph.json?as=dependency","https://hairlineui.com/r/number-roll.json?as=dependency"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/drop-zone.tsx","content":"$50","type":"registry:component"},{"path":"registry/drop-zone-types.ts","content":"$51","type":"registry:component"},{"path":"registry/drop-zone-utils.ts","content":"$52","type":"registry:component"},{"path":"registry/drop-zone-file-row.tsx","content":"$53","type":"registry:component"},{"path":"registry/drop-zone-status.tsx","content":"$54","type":"registry:component"},{"path":"registry/use-drop-zone.ts","content":"$55","type":"registry:component"},{"path":"registry/ui-interaction-motion.ts","content":"$56","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]