@ctrl-ui/react 0.8.0

package/dist/hooks/use-chat-message.d.ts

@@ -0,0 +1,28 @@
+import { ChatMessageKnobStyle } from "../knob-contracts/chat-message-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/hooks/use-chat-message.d.ts
+type ChatRole = "user" | "assistant" | "system" | "tool";
+type ChatDensity = "compact" | "comfortable";
+type ChatState = "idle" | "streaming" | "pending" | "error";
+type ChatMessageProps = ComponentProps<"article"> & {
+  from: ChatRole;
+  state?: ChatState;
+  density?: ChatDensity;
+} & {
+  style?: CSSProperties & ChatMessageKnobStyle;
+};
+type ChatMessageContext = {
+  from: ChatRole;
+  state: ChatState;
+  density: ChatDensity;
+  isUser: boolean;
+  isAssistant: boolean;
+  isSystem: boolean;
+  isTool: boolean;
+  isCompact: boolean;
+  isStreaming: boolean;
+  isError: boolean;
+};
+declare function useChatMessage({ from, state, density }: Pick<ChatMessageProps, "from" | "state" | "density">): ChatMessageContext;
+//#endregion
+export { ChatDensity, ChatMessageContext, ChatMessageProps, ChatRole, ChatState, useChatMessage };

package/dist/hooks/use-chat-message.js

@@ -0,0 +1,24 @@
+//#region src/hooks/use-chat-message.ts
+function getChatMessageContext({ from, state, density }) {
+	return {
+		from,
+		state,
+		density,
+		isUser: from === "user",
+		isAssistant: from === "assistant",
+		isSystem: from === "system",
+		isTool: from === "tool",
+		isCompact: density === "compact",
+		isStreaming: state === "streaming",
+		isError: state === "error"
+	};
+}
+function useChatMessage({ from, state = "idle", density = "comfortable" }) {
+	return getChatMessageContext({
+		from,
+		state,
+		density
+	});
+}
+//#endregion
+export { useChatMessage };

package/dist/hooks/use-color-area.d.ts

@@ -0,0 +1,18 @@
+import { PointerEvent, RefObject } from "react";
+//#region src/hooks/use-color-area.d.ts
+type ColorAreaOffset = {
+  x: number;
+  y: number;
+};
+type ColorAreaRect = {
+  width: number;
+  height: number;
+};
+type ColorAreaPointer = {
+  areaRef: RefObject<HTMLDivElement | null>;
+  dragging: boolean;
+  onPointerDown: (event: PointerEvent) => void;
+};
+declare function useColorArea(onChange: (offset: ColorAreaOffset, rect: ColorAreaRect) => void): ColorAreaPointer;
+//#endregion
+export { ColorAreaOffset, ColorAreaPointer, ColorAreaRect, useColorArea };

package/dist/hooks/use-color-area.js

@@ -0,0 +1,60 @@
+"use client";
+import { useEffect, useEffectEvent, useRef, useState } from "react";
+//#region src/hooks/use-color-area.ts
+function useColorArea(onChange) {
+	const areaRef = useRef(null);
+	const [dragging, setDragging] = useState(false);
+	const emitDragChange = useEffectEvent(onChange);
+	useEffect(() => {
+		if (!dragging) return;
+		function emit(clientX, clientY) {
+			const el = areaRef.current;
+			if (!el) return;
+			const rect = el.getBoundingClientRect();
+			emitDragChange({
+				x: clientX - rect.left,
+				y: clientY - rect.top
+			}, {
+				width: rect.width,
+				height: rect.height
+			});
+		}
+		function onMove(event) {
+			emit(event.clientX, event.clientY);
+		}
+		function onUp() {
+			setDragging(false);
+		}
+		const previousSelect = document.body.style.userSelect;
+		document.body.style.userSelect = "none";
+		window.addEventListener("pointermove", onMove);
+		window.addEventListener("pointerup", onUp);
+		return () => {
+			window.removeEventListener("pointermove", onMove);
+			window.removeEventListener("pointerup", onUp);
+			document.body.style.userSelect = previousSelect;
+		};
+	}, [dragging]);
+	function onPointerDown(event) {
+		const el = areaRef.current;
+		if (el) {
+			const rect = el.getBoundingClientRect();
+			onChange({
+				x: event.clientX - rect.left,
+				y: event.clientY - rect.top
+			}, {
+				width: rect.width,
+				height: rect.height
+			});
+		}
+		setDragging(true);
+		event.preventDefault();
+	}
+	return {
+		areaRef,
+		dragging,
+		onPointerDown
+	};
+}
+//#endregion
+export { useColorArea };

package/dist/hooks/use-copy-to-clipboard.d.ts

@@ -0,0 +1,22 @@
+//#region src/hooks/use-copy-to-clipboard.d.ts
+type UseCopyToClipboardOptions = {
+  text?: string;
+  copiedDuration?: number;
+  onCopy?: (value: string) => void;
+  onCopyError?: (error: unknown) => void;
+};
+type UseCopyToClipboardResult = {
+  isCopied: boolean;
+  copyToClipboard: (value: string) => Promise<boolean>;
+  resetCopied: () => void;
+};
+type UseCopyToClipboardConfiguredResult = UseCopyToClipboardResult & {
+  handleCopy: () => Promise<boolean>;
+};
+declare function copyTextToClipboard(value: string): Promise<boolean>;
+declare function useCopyToClipboard(options: UseCopyToClipboardOptions & {
+  text: string;
+}): UseCopyToClipboardConfiguredResult;
+declare function useCopyToClipboard(options?: UseCopyToClipboardOptions): UseCopyToClipboardResult;
+//#endregion
+export { UseCopyToClipboardConfiguredResult, UseCopyToClipboardOptions, UseCopyToClipboardResult, copyTextToClipboard, useCopyToClipboard };

package/dist/hooks/use-copy-to-clipboard.js

@@ -0,0 +1,90 @@
+import { useEffect, useRef, useState } from "react";
+//#region src/hooks/use-copy-to-clipboard.ts
+async function copyViaClipboardApi(value) {
+	if (typeof navigator === "undefined" || !navigator.clipboard?.writeText) return false;
+	try {
+		await navigator.clipboard.writeText(value);
+		return true;
+	} catch {
+		return false;
+	}
+}
+function copyViaSelection(value) {
+	if (typeof document === "undefined" || typeof document.execCommand !== "function" || !document.body) return false;
+	const activeElement = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+	const textarea = document.createElement("textarea");
+	textarea.value = value;
+	textarea.setAttribute("readonly", "");
+	textarea.setAttribute("aria-hidden", "true");
+	textarea.style.position = "fixed";
+	textarea.style.top = "0";
+	textarea.style.left = "0";
+	textarea.style.width = "1px";
+	textarea.style.height = "1px";
+	textarea.style.opacity = "0";
+	textarea.style.pointerEvents = "none";
+	document.body.appendChild(textarea);
+	try {
+		textarea.focus();
+		textarea.select();
+		textarea.setSelectionRange(0, value.length);
+		return document.execCommand("copy");
+	} catch {
+		return false;
+	} finally {
+		textarea.remove();
+		activeElement?.focus({ preventScroll: true });
+	}
+}
+async function copyTextToClipboard(value) {
+	if (await copyViaClipboardApi(value)) return true;
+	return copyViaSelection(value);
+}
+function useCopyToClipboard({ text, copiedDuration = 1200, onCopy, onCopyError } = {}) {
+	const [isCopied, setIsCopied] = useState(false);
+	const resetTimeout = useRef(null);
+	useEffect(() => {
+		const timeoutRef = resetTimeout;
+		return () => {
+			if (timeoutRef.current) window.clearTimeout(timeoutRef.current);
+		};
+	}, []);
+	function resetCopied() {
+		if (resetTimeout.current) window.clearTimeout(resetTimeout.current);
+		resetTimeout.current = null;
+		setIsCopied(false);
+	}
+	async function copyToClipboard(value) {
+		if (!await copyTextToClipboard(value)) {
+			onCopyError?.(/* @__PURE__ */ new Error("Unable to copy text"));
+			setIsCopied(false);
+			return false;
+		}
+		try {
+			onCopy?.(value);
+		} catch (error) {
+			onCopyError?.(error);
+			setIsCopied(false);
+			return false;
+		}
+		setIsCopied(true);
+		if (resetTimeout.current) window.clearTimeout(resetTimeout.current);
+		resetTimeout.current = window.setTimeout(() => setIsCopied(false), copiedDuration);
+		return true;
+	}
+	function handleCopy() {
+		return text !== void 0 ? copyToClipboard(text) : Promise.resolve(false);
+	}
+	return text === void 0 ? {
+		isCopied,
+		copyToClipboard,
+		resetCopied
+	} : {
+		isCopied,
+		copyToClipboard,
+		handleCopy,
+		resetCopied
+	};
+}
+//#endregion
+export { copyTextToClipboard, useCopyToClipboard };

package/dist/hooks/use-dropzone.d.ts

@@ -0,0 +1,59 @@
+import { DropzoneFileRejection, DropzonePolicy } from "../lib/dropzone-validation.js";
+import { ChangeEvent, ComponentProps, DragEvent, RefObject } from "react";
+//#region src/hooks/use-dropzone.d.ts
+type DropzoneVisualState = "idle" | "accept" | "reject" | "unknown" | "processing";
+type DropzoneValueChangeReason = "drop" | "input" | "remove" | "clear";
+type DropzoneEvent = DragEvent<HTMLElement> | ChangeEvent<HTMLInputElement>;
+type DropzoneGetFilesFromEvent = (event: DropzoneEvent, signal: AbortSignal) => readonly File[] | Promise<readonly File[]>;
+type DropzoneValueChangeDetails = {
+  reason: DropzoneValueChangeReason;
+  addedFiles: readonly File[];
+  removedFiles: readonly File[];
+};
+type DropzoneDropDetails = {
+  acceptedFiles: readonly File[];
+  fileRejections: readonly DropzoneFileRejection[];
+  event: DropzoneEvent;
+};
+type UseDropzoneOptions = {
+  value?: readonly File[];
+  defaultValue?: readonly File[];
+  onValueChange?: (value: readonly File[], details: DropzoneValueChangeDetails) => void;
+  policy?: DropzonePolicy;
+  disabled?: boolean;
+  drag?: boolean;
+  preventDropOnDocument?: boolean;
+  trackDocumentDrag?: boolean;
+  getFilesFromEvent?: DropzoneGetFilesFromEvent;
+  onDrop?: (details: DropzoneDropDetails) => void;
+  onError?: (error: Error) => void;
+};
+type UseDropzoneReturn = {
+  value: readonly File[];
+  fileRejections: readonly DropzoneFileRejection[];
+  accept: string | undefined;
+  multiple: boolean;
+  disabled: boolean;
+  dragEnabled: boolean;
+  visualState: DropzoneVisualState;
+  isDragActive: boolean;
+  isDragAccept: boolean;
+  isDragReject: boolean;
+  isDragUnknown: boolean;
+  isDragGlobal: boolean;
+  isFileDialogActive: boolean;
+  isProcessing: boolean;
+  rootRef: RefObject<HTMLDivElement | null>;
+  inputRef: RefObject<HTMLInputElement | null>;
+  open: () => void;
+  removeFile: (file: File) => void;
+  clearFiles: () => void;
+  clearRejections: () => void;
+  reset: () => void;
+  getRootProps: (props?: ComponentProps<"div">) => ComponentProps<"div">;
+  getInputProps: (props?: ComponentProps<"input">) => ComponentProps<"input">;
+};
+declare function useDropzone({ value: controlledValue, defaultValue, onValueChange, policy, disabled, drag, preventDropOnDocument, trackDocumentDrag, getFilesFromEvent, onDrop, onError }?: UseDropzoneOptions): UseDropzoneReturn;
+declare function defaultGetFilesFromEvent(event: DropzoneEvent): readonly File[];
+//#endregion
+export { DropzoneDropDetails, DropzoneEvent, DropzoneGetFilesFromEvent, DropzoneValueChangeDetails, DropzoneValueChangeReason, DropzoneVisualState, UseDropzoneOptions, UseDropzoneReturn, defaultGetFilesFromEvent, useDropzone };

package/dist/hooks/use-dropzone.js

@@ -0,0 +1,372 @@
+"use client";
+import { compileDropzoneAccept, getDropzoneDragVerdict, processDropzoneFiles, toDropzoneError } from "../lib/dropzone-validation.js";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+//#region src/hooks/use-dropzone.ts
+const registeredDropzoneRoots = /* @__PURE__ */ new WeakSet();
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function useDropzone({ value: controlledValue, defaultValue = [], onValueChange, policy, disabled = false, drag = true, preventDropOnDocument = true, trackDocumentDrag = false, getFilesFromEvent, onDrop, onError } = {}) {
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+	const [fileRejections, setFileRejections] = useState([]);
+	const [isDragActive, setIsDragActive] = useState(false);
+	const [activeDragState, setActiveDragState] = useState("unknown");
+	const [isDragGlobal, setIsDragGlobal] = useState(false);
+	const [isFileDialogActive, setIsFileDialogActive] = useState(false);
+	const [isProcessing, setIsProcessing] = useState(false);
+	const rootRef = useRef(null);
+	const inputRef = useRef(null);
+	const mountedInput = useRef(null);
+	const localDragTargets = useRef(/* @__PURE__ */ new Set());
+	const globalDragTargets = useRef(/* @__PURE__ */ new Set());
+	const intakeController = useRef(null);
+	const fallbackDialogCleanup = useRef(null);
+	const processingRef = useRef(false);
+	const currentValue = controlledValue ?? uncontrolledValue;
+	const currentValueRef = useRef(currentValue);
+	const disabledRef = useRef(disabled);
+	const dragEnabled = drag && !disabled;
+	const dragEnabledRef = useRef(dragEnabled);
+	const policyRef = useRef(policy);
+	const customExtractionRef = useRef(Boolean(getFilesFromEvent));
+	useIsomorphicLayoutEffect(() => {
+		currentValueRef.current = currentValue;
+		disabledRef.current = disabled;
+		dragEnabledRef.current = dragEnabled;
+		policyRef.current = policy;
+		customExtractionRef.current = Boolean(getFilesFromEvent);
+	});
+	const [handleNativeCancel] = useState(() => () => {
+		fallbackDialogCleanup.current?.();
+		fallbackDialogCleanup.current = null;
+		setIsFileDialogActive(false);
+	});
+	function resetLocalDrag() {
+		localDragTargets.current.clear();
+		setIsDragActive(false);
+		setActiveDragState("unknown");
+	}
+	function resetGlobalDrag() {
+		globalDragTargets.current.clear();
+		setIsDragGlobal(false);
+	}
+	function resetDragState() {
+		resetLocalDrag();
+		resetGlobalDrag();
+	}
+	function commitValue(nextValue, details) {
+		if (areSameFiles(currentValueRef.current, nextValue)) return false;
+		currentValueRef.current = nextValue;
+		if (controlledValue === void 0) setUncontrolledValue(nextValue);
+		onValueChange?.(nextValue, details);
+		return true;
+	}
+	async function intake(event, reason) {
+		intakeController.current?.abort();
+		const controller = new AbortController();
+		intakeController.current = controller;
+		processingRef.current = true;
+		setIsProcessing(true);
+		let result;
+		let shouldCommit = false;
+		try {
+			const extractedFiles = await (getFilesFromEvent ?? defaultGetFilesFromEvent)(event, controller.signal);
+			controller.signal.throwIfAborted();
+			result = await processDropzoneFiles(extractedFiles, currentValueRef.current, policy, controller.signal);
+		} catch (error) {
+			if (!controller.signal.aborted && intakeController.current === controller) onError?.(toDropzoneError(error));
+			return;
+		} finally {
+			if (!controller.signal.aborted && intakeController.current === controller) {
+				shouldCommit = true;
+				intakeController.current = null;
+				processingRef.current = false;
+				setIsProcessing(false);
+			}
+		}
+		if (!shouldCommit || !result) return;
+		setFileRejections(result.fileRejections);
+		commitValue(result.value, {
+			reason,
+			addedFiles: result.acceptedFiles,
+			removedFiles: result.removedFiles
+		});
+		onDrop?.({
+			acceptedFiles: result.acceptedFiles,
+			fileRejections: result.fileRejections,
+			event
+		});
+	}
+	function open() {
+		if (disabledRef.current || processingRef.current) return;
+		const input = inputRef.current;
+		if (!input) return;
+		fallbackDialogCleanup.current?.();
+		fallbackDialogCleanup.current = null;
+		input.value = "";
+		setIsFileDialogActive(true);
+		if (input.oncancel === void 0) {
+			const view = input.ownerDocument.defaultView;
+			let timeout;
+			const handleFocus = () => {
+				timeout = setTimeout(() => setIsFileDialogActive(false), 300);
+			};
+			view?.addEventListener("focus", handleFocus, { once: true });
+			fallbackDialogCleanup.current = () => {
+				view?.removeEventListener("focus", handleFocus);
+				clearTimeout(timeout);
+			};
+		}
+		input.click();
+	}
+	function removeFile(file) {
+		if (disabledRef.current || processingRef.current) return;
+		const index = currentValueRef.current.indexOf(file);
+		if (index < 0) return;
+		commitValue(currentValueRef.current.filter((_, fileIndex) => fileIndex !== index), {
+			reason: "remove",
+			addedFiles: [],
+			removedFiles: [file]
+		});
+	}
+	function clearFiles() {
+		if (disabledRef.current || processingRef.current || currentValueRef.current.length === 0) return;
+		const removedFiles = currentValueRef.current;
+		commitValue([], {
+			reason: "clear",
+			addedFiles: [],
+			removedFiles
+		});
+	}
+	function clearRejections() {
+		if (disabledRef.current || processingRef.current || fileRejections.length === 0) return;
+		setFileRejections([]);
+	}
+	function reset() {
+		if (disabledRef.current || processingRef.current) return;
+		if (currentValueRef.current.length > 0) {
+			const removedFiles = currentValueRef.current;
+			commitValue([], {
+				reason: "clear",
+				addedFiles: [],
+				removedFiles
+			});
+		}
+		if (fileRejections.length > 0) setFileRejections([]);
+	}
+	function getRootProps(props = {}) {
+		const { onDragEnter, onDragOver, onDragLeave, onDragEnd, onDrop: callerOnDrop, ref, ...rootProps } = props;
+		return {
+			...rootProps,
+			ref: (node) => {
+				if (rootRef.current !== node) {
+					if (rootRef.current) registeredDropzoneRoots.delete(rootRef.current);
+					rootRef.current = node;
+					if (node) registeredDropzoneRoots.add(node);
+				}
+				assignRef(ref, node);
+			},
+			onDragEnter: (event) => {
+				onDragEnter?.(event);
+				if (!isFileDrag(event.dataTransfer)) return;
+				event.stopPropagation();
+				if (event.defaultPrevented || !dragEnabledRef.current) return;
+				event.preventDefault();
+				localDragTargets.current.add(event.target);
+				setActiveDragState(getDropzoneDragVerdict(getDragMetadata(event.dataTransfer), currentValueRef.current, policyRef.current, { customExtraction: customExtractionRef.current }));
+				setIsDragActive(true);
+			},
+			onDragOver: (event) => {
+				onDragOver?.(event);
+				if (!isFileDrag(event.dataTransfer)) return;
+				event.stopPropagation();
+				if (event.defaultPrevented || !dragEnabledRef.current) return;
+				event.preventDefault();
+				event.dataTransfer.dropEffect = "copy";
+				if (!isDragActive) {
+					setActiveDragState(getDropzoneDragVerdict(getDragMetadata(event.dataTransfer), currentValueRef.current, policyRef.current, { customExtraction: customExtractionRef.current }));
+					setIsDragActive(true);
+				}
+			},
+			onDragLeave: (event) => {
+				onDragLeave?.(event);
+				if (!isFileDrag(event.dataTransfer)) return;
+				event.stopPropagation();
+				localDragTargets.current.delete(event.target);
+				if (event.relatedTarget === null || localDragTargets.current.size === 0) resetLocalDrag();
+			},
+			onDragEnd: (event) => {
+				onDragEnd?.(event);
+				if (!isFileDrag(event.dataTransfer)) return;
+				event.stopPropagation();
+				resetDragState();
+			},
+			onDrop: (event) => {
+				callerOnDrop?.(event);
+				if (!isFileDrag(event.dataTransfer)) return;
+				event.stopPropagation();
+				resetDragState();
+				if (event.defaultPrevented || !dragEnabledRef.current) return;
+				event.preventDefault();
+				intake(event, "drop");
+			}
+		};
+	}
+	function getInputProps(props = {}) {
+		const { onChange, ref, ...inputProps } = props;
+		return {
+			...inputProps,
+			type: "file",
+			accept: compileDropzoneAccept(policy?.accept),
+			multiple: policy?.multiple ?? true,
+			disabled,
+			ref: (node) => {
+				if (mountedInput.current !== node) {
+					mountedInput.current?.removeEventListener("cancel", handleNativeCancel);
+					mountedInput.current = node;
+					node?.addEventListener("cancel", handleNativeCancel);
+				}
+				inputRef.current = node;
+				assignRef(ref, node);
+			},
+			onChange: (event) => {
+				onChange?.(event);
+				fallbackDialogCleanup.current?.();
+				fallbackDialogCleanup.current = null;
+				setIsFileDialogActive(false);
+				if (!event.defaultPrevented && !disabledRef.current) intake(event, "input");
+			}
+		};
+	}
+	useEffect(() => {
+		if (!disabled && drag) return;
+		if (disabled) {
+			intakeController.current?.abort();
+			intakeController.current = null;
+			processingRef.current = false;
+			setIsProcessing(false);
+			fallbackDialogCleanup.current?.();
+			fallbackDialogCleanup.current = null;
+			setIsFileDialogActive(false);
+		}
+		localDragTargets.current.clear();
+		globalDragTargets.current.clear();
+		setIsDragActive(false);
+		setActiveDragState("unknown");
+		setIsDragGlobal(false);
+	}, [disabled, drag]);
+	useEffect(() => {
+		const ownerDocument = rootRef.current?.ownerDocument ?? document;
+		const ownerWindow = ownerDocument.defaultView;
+		function resetDocumentGlobalDrag() {
+			globalDragTargets.current.clear();
+			setIsDragGlobal(false);
+		}
+		function resetDocumentDragState() {
+			localDragTargets.current.clear();
+			globalDragTargets.current.clear();
+			setIsDragActive(false);
+			setActiveDragState("unknown");
+			setIsDragGlobal(false);
+		}
+		function handleDocumentDragOver(event) {
+			if (preventDropOnDocument && isFileDrag(event.dataTransfer)) event.preventDefault();
+		}
+		function handleDocumentDrop(event) {
+			resetDocumentDragState();
+			if (preventDropOnDocument && isFileDrag(event.dataTransfer)) event.preventDefault();
+		}
+		function handleGlobalDragEnter(event) {
+			if (!trackDocumentDrag || !dragEnabledRef.current || !isFileDrag(event.dataTransfer)) return;
+			const dragOwner = getRegisteredDropzoneRoot(event);
+			if (dragOwner && dragOwner !== rootRef.current) {
+				resetDocumentGlobalDrag();
+				return;
+			}
+			globalDragTargets.current.add(event.target ?? ownerDocument);
+			setIsDragGlobal(true);
+		}
+		function handleGlobalDragLeave(event) {
+			if (!isFileDrag(event.dataTransfer)) return;
+			globalDragTargets.current.delete(event.target ?? ownerDocument);
+			if (event.relatedTarget === null || globalDragTargets.current.size === 0) resetDocumentGlobalDrag();
+		}
+		function handleTerminalDrag() {
+			resetDocumentDragState();
+		}
+		ownerDocument.addEventListener("dragover", handleDocumentDragOver);
+		ownerDocument.addEventListener("drop", handleDocumentDrop);
+		ownerDocument.addEventListener("dragenter", handleGlobalDragEnter, true);
+		ownerDocument.addEventListener("dragleave", handleGlobalDragLeave, true);
+		ownerDocument.addEventListener("drop", handleTerminalDrag, true);
+		ownerDocument.addEventListener("dragend", handleTerminalDrag, true);
+		ownerWindow?.addEventListener("blur", handleTerminalDrag);
+		return () => {
+			ownerDocument.removeEventListener("dragover", handleDocumentDragOver);
+			ownerDocument.removeEventListener("drop", handleDocumentDrop);
+			ownerDocument.removeEventListener("dragenter", handleGlobalDragEnter, true);
+			ownerDocument.removeEventListener("dragleave", handleGlobalDragLeave, true);
+			ownerDocument.removeEventListener("drop", handleTerminalDrag, true);
+			ownerDocument.removeEventListener("dragend", handleTerminalDrag, true);
+			ownerWindow?.removeEventListener("blur", handleTerminalDrag);
+		};
+	}, [preventDropOnDocument, trackDocumentDrag]);
+	useEffect(() => () => {
+		intakeController.current?.abort();
+		if (rootRef.current) registeredDropzoneRoots.delete(rootRef.current);
+		mountedInput.current?.removeEventListener("cancel", handleNativeCancel);
+		fallbackDialogCleanup.current?.();
+	}, [handleNativeCancel]);
+	let visualState = "idle";
+	if (isProcessing) visualState = "processing";
+	else if (isDragActive) visualState = activeDragState;
+	else if (isDragGlobal) visualState = "unknown";
+	return {
+		value: currentValue,
+		fileRejections,
+		accept: compileDropzoneAccept(policy?.accept),
+		multiple: policy?.multiple ?? true,
+		disabled,
+		dragEnabled,
+		visualState,
+		isDragActive,
+		isDragAccept: visualState === "accept",
+		isDragReject: visualState === "reject",
+		isDragUnknown: visualState === "unknown",
+		isDragGlobal,
+		isFileDialogActive,
+		isProcessing,
+		rootRef,
+		inputRef,
+		open,
+		removeFile,
+		clearFiles,
+		clearRejections,
+		reset,
+		getRootProps,
+		getInputProps
+	};
+}
+function defaultGetFilesFromEvent(event) {
+	return "dataTransfer" in event ? Array.from(event.dataTransfer.files) : Array.from(event.currentTarget.files ?? []);
+}
+function isFileDrag(dataTransfer) {
+	return dataTransfer ? Array.from(dataTransfer.types).includes("Files") : false;
+}
+function getRegisteredDropzoneRoot(event) {
+	for (const target of event.composedPath()) if (target && registeredDropzoneRoots.has(target)) return target;
+}
+function getDragMetadata(dataTransfer) {
+	const files = Array.from(dataTransfer.files);
+	if (files.length > 0) return files;
+	const fileItems = Array.from(dataTransfer.items).filter((item) => item.kind === "file");
+	if (fileItems.length === 0) return null;
+	return fileItems.map((item) => item.getAsFile() ?? { type: item.type || void 0 });
+}
+function areSameFiles(left, right) {
+	return left.length === right.length && left.every((file, index) => file === right[index]);
+}
+function assignRef(ref, value) {
+	if (typeof ref === "function") ref(value);
+	else if (ref) ref.current = value;
+}
+//#endregion
+export { defaultGetFilesFromEvent, useDropzone };