@ctrl-ui/react 0.8.6 → 0.8.8

package/dist/hooks/use-audio-recorder.js

@@ -20,7 +20,7 @@ function formatAudioInputDeviceLabel(device, fallback = "Microphone") {
 	return `${label.replace(deviceIdRegex, "").trim() || fallback} (${id})`;
 }
 async function enumerateAudioInputDevices() {
-	if (typeof navigator === "undefined" || !navigator.mediaDevices?.enumerateDevices) throw new Error("Microphone device selection is not available in this browser.");
+	if (typeof navigator === "undefined" || !navigator.mediaDevices?.enumerateDevices) throw unsupportedRecordingError();
 	return (await navigator.mediaDevices.enumerateDevices()).filter((device) => device.kind === "audioinput");
 }
 function useAudioInputDevices() {
@@ -43,7 +43,7 @@ function useAudioInputDevices() {
 	}
 	async function requestPermission() {
 		if (typeof navigator === "undefined" || !navigator.mediaDevices?.getUserMedia) {
-			setError(/* @__PURE__ */ new Error("Microphone device selection is not available in this browser."));
+			setError(unsupportedRecordingError());
 			return;
 		}
 		setLoading(true);
@@ -96,10 +96,16 @@ function browserEnvironment() {
 function asError(error) {
 	return error instanceof Error ? error : new Error(String(error));
 }
+function namedError(name, message) {
+	return Object.assign(new Error(message), { name });
+}
+function unsupportedRecordingError() {
+	return namedError("NotSupportedError", "This browser can't record audio. Try a current version of Chrome, Safari or Firefox.");
+}
 function microphoneError(error) {
 	const nextError = asError(error);
-	if (nextError.name === "NotAllowedError" || nextError.name === "SecurityError") return /* @__PURE__ */ new Error("Microphone permission was denied.");
-	if (nextError.name === "NotFoundError" || nextError.name === "OverconstrainedError") return /* @__PURE__ */ new Error("Selected microphone is not available.");
+	if (nextError.name === "NotAllowedError" || nextError.name === "SecurityError") return namedError("NotAllowedError", "Microphone access is blocked. Allow it in your browser's site settings, then try again.");
+	if (nextError.name === "NotFoundError" || nextError.name === "OverconstrainedError") return namedError("NotFoundError", "Selected microphone isn't connected. Plug it in or choose another microphone.");
 	return nextError;
 }
 function clampLevel(value) {
@@ -351,7 +357,7 @@ function createControllerForEnvironment(initialOptions, environment) {
 	}
 	function beginRecording(nextStream) {
 		const MediaRecorderImpl = environment.MediaRecorder;
-		if (!MediaRecorderImpl) throw new Error("Microphone recording is not available in this browser.");
+		if (!MediaRecorderImpl) throw unsupportedRecordingError();
 		selectedMimeType = preferredAudioMimeType(MediaRecorderImpl) ?? "";
 		const nextRecorder = new MediaRecorderImpl(nextStream, selectedMimeType ? { mimeType: selectedMimeType } : void 0);
 		chunks = [];
@@ -388,7 +394,7 @@ function createControllerForEnvironment(initialOptions, environment) {
 		if (!environment.mediaDevices?.getUserMedia || !environment.MediaRecorder) {
 			setSnapshot({
 				state: "error",
-				error: /* @__PURE__ */ new Error("Microphone recording is not available in this browser.")
+				error: unsupportedRecordingError()
 			});
 			return false;
 		}

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

@@ -1,6 +1,6 @@
 import { FormSubmitEvent } from "../control-props.js";
-import { ChatComposerKnobStyle } from "../knob-contracts/chat-composer-knobs.js";
 import { ChatDensity } from "./use-chat-message.js";
+import { ChatComposerKnobStyle } from "../knob-contracts/chat-composer-knobs.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 //#region src/hooks/use-chat-composer.d.ts
 export type ChatComposerSubmitPayload = {
@@ -8,6 +8,7 @@ export type ChatComposerSubmitPayload = {
   clear: () => void;
   mentions?: MentionItem[];
 };
+export type ChatComposerSubmitKey = "enter" | "mod-enter";
 export type ChatComposerProps = Omit<ComponentProps<"form">, "onSubmit" | "style"> & {
   children?: ReactNode;
   value?: string;
@@ -17,6 +18,9 @@ export type ChatComposerProps = Omit<ComponentProps<"form">, "onSubmit" | "style
   state?: "idle" | "submitting" | "disabled";
   density?: ChatDensity;
   disabled?: boolean;
+  /** Let an empty message send, for composers where an attachment or recording carries the turn. */
+  allowEmptySubmit?: boolean;
+  submitKey?: ChatComposerSubmitKey;
   style?: CSSProperties & ChatComposerKnobStyle;
 };
 export type MentionItem = {
@@ -27,23 +31,27 @@ export type MentionItem = {
 type ComposerKeyEvent = {
   key: string;
   shiftKey: boolean;
+  metaKey: boolean;
+  ctrlKey: boolean;
   defaultPrevented: boolean;
   nativeEvent: {
     isComposing: boolean;
+    keyCode: number;
   };
   preventDefault: () => void;
 };
-export declare function useChatComposer({ value, defaultValue, onValueChange, onSubmit, state, density, disabled, trackSends }: Pick<ChatComposerProps, "value" | "defaultValue" | "onValueChange" | "onSubmit" | "state" | "density" | "disabled"> & {
-  /** Count successful submits — only enabled when something reads counter (send-layer anchor), so idle apps pay no extra state update. */
-  trackSends?: boolean;
-}): {
+type InsertText = (text: string) => void;
+export type RegisterInsertionTarget = (insert: InsertText) => () => void;
+export type ChatComposerController = {
   value: string;
-  setValue: (nextValue: string) => void;
+  setValue: (value: string) => void;
   normalizedValue: string;
-  state: "disabled" | "idle" | "submitting";
+  state: NonNullable<ChatComposerProps["state"]>;
   density: ChatDensity;
+  submitKey: ChatComposerSubmitKey;
   isCompact: boolean;
   isDisabled: boolean;
+  isLocked: boolean;
   canSubmit: boolean;
   rows: number;
   sendCount: number;
@@ -51,5 +59,11 @@ export declare function useChatComposer({ value, defaultValue, onValueChange, on
   submit: (extra?: Partial<ChatComposerSubmitPayload>) => void;
   handleSubmit: (event: FormSubmitEvent) => void;
   handleKeyDown: (event: ComposerKeyEvent) => void;
+  insertText: InsertText;
+  registerInsertionTarget: RegisterInsertionTarget;
 };
+export declare function useChatComposer({ value, defaultValue, onValueChange, onSubmit, state, density, disabled, allowEmptySubmit, submitKey, trackSends }: Pick<ChatComposerProps, "value" | "defaultValue" | "onValueChange" | "onSubmit" | "state" | "density" | "disabled" | "allowEmptySubmit" | "submitKey"> & {
+  /** Count successful submits — only enabled when something reads counter (send-layer anchor), so idle apps pay no extra state update. */
+  trackSends?: boolean;
+}): ChatComposerController;
 //#endregion

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

@@ -1,3 +1,4 @@
+import { isComposingKey } from "./use-trigger-menu.js";
 import { useState } from "react";
 //#region src/hooks/use-chat-composer.ts
 function useControllableText({ value, defaultValue = "", onValueChange }) {
@@ -10,16 +11,30 @@ function useControllableText({ value, defaultValue = "", onValueChange }) {
 	}
 	return [currentValue, setValue];
 }
-function useChatComposer({ value, defaultValue, onValueChange, onSubmit, state = "idle", density = "comfortable", disabled = false, trackSends = false }) {
+function useChatComposer({ value, defaultValue, onValueChange, onSubmit, state = "idle", density = "comfortable", disabled = false, allowEmptySubmit = false, submitKey = "enter", trackSends = false }) {
 	const [inputValue, setInputValue] = useControllableText({
 		value,
 		defaultValue,
 		onValueChange
 	});
 	const [sendCount, setSendCount] = useState(0);
+	const [insertion] = useState(() => {
+		let target = null;
+		const register = (insert) => {
+			target = insert;
+			return () => {
+				if (target === insert) target = null;
+			};
+		};
+		return {
+			register,
+			current: () => target
+		};
+	});
 	const normalizedValue = inputValue.trim();
-	const isDisabled = disabled || state === "disabled" || state === "submitting";
-	const canSubmit = normalizedValue.length > 0 && !isDisabled;
+	const isDisabled = disabled || state === "disabled";
+	const isLocked = state === "submitting";
+	const canSubmit = (normalizedValue.length > 0 || allowEmptySubmit) && !isDisabled && !isLocked;
 	const isCompact = density === "compact";
 	function clear() {
 		setInputValue("");
@@ -38,25 +53,37 @@ function useChatComposer({ value, defaultValue, onValueChange, onSubmit, state =
 		submit();
 	}
 	function handleKeyDown(event) {
-		if (event.defaultPrevented || event.key !== "Enter" || event.shiftKey || event.nativeEvent.isComposing) return;
+		if (event.defaultPrevented || event.key !== "Enter" || event.shiftKey || isComposingKey(event.nativeEvent)) return;
+		const modifierHeld = event.metaKey || event.ctrlKey;
+		if (submitKey === "mod-enter" && !modifierHeld) return;
 		event.preventDefault();
 		submit();
 	}
+	function insertText(text) {
+		if (isDisabled || isLocked) return;
+		const insertAtCaret = insertion.current();
+		if (insertAtCaret) insertAtCaret(text);
+		else setInputValue(`${inputValue}${text}`);
+	}
 	return {
 		value: inputValue,
 		setValue: setInputValue,
 		normalizedValue,
 		state,
 		density,
+		submitKey,
 		isCompact,
 		isDisabled,
+		isLocked,
 		canSubmit,
 		rows: isCompact ? 2 : 4,
 		sendCount,
 		clear,
 		submit,
 		handleSubmit,
-		handleKeyDown
+		handleKeyDown,
+		insertText,
+		registerInsertionTarget: insertion.register
 	};
 }
 //#endregion

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

@@ -1,13 +1,25 @@
 import { ChatMessageKnobStyle } from "../knob-contracts/chat-message-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/hooks/use-chat-message.d.ts
-export type ChatRole = "user" | "assistant" | "system" | "tool";
+export type ChatRole = "user" | "assistant" | "participant" | "system" | "tool";
 export type ChatDensity = "compact" | "comfortable";
 export type ChatState = "idle" | "streaming" | "pending" | "error";
+export type ChatMessageLayout = "bubble" | "flat";
+/** Transition announcements a message publishes to its thread. */
+export type ChatMessageStatusLabels = {
+  pending: string;
+  replied: string;
+  error: string;
+};
 export type ChatMessageProps = ComponentProps<"article"> & {
   from: ChatRole;
   state?: ChatState;
   density?: ChatDensity;
+  layout?: ChatMessageLayout;
+  continuation?: boolean;
+  /** Accessible name of the message, so the speaker isn't conveyed by alignment and colour alone. */
+  authorLabel?: string;
+  statusLabels?: Partial<ChatMessageStatusLabels>;
 } & {
   style?: CSSProperties & ChatMessageKnobStyle;
 };
@@ -15,14 +27,28 @@ export type ChatMessageContext = {
   from: ChatRole;
   state: ChatState;
   density: ChatDensity;
+  layout: ChatMessageLayout;
+  continuation: boolean;
   isUser: boolean;
   isAssistant: boolean;
+  isParticipant: boolean;
   isSystem: boolean;
   isTool: boolean;
   isCompact: boolean;
   isStreaming: boolean;
   isPending: boolean;
   isError: boolean;
+  isEndAligned: boolean;
+  isBubble: boolean;
 };
-export declare function useChatMessage({ from, state, density }: Pick<ChatMessageProps, "from" | "state" | "density">): ChatMessageContext;
+export declare const chatAuthorLabels: Record<ChatRole, string>;
+export declare const chatMessageStatusLabels: ChatMessageStatusLabels;
+export declare const ChatThreadAnnounceContext: import("react").Context<(message: string) => void>;
+/** Publishes a state transition (never streamed text) to the thread's one polite status region; a no-op outside `ChatThread`. */
+export declare function useChatThreadAnnounce(): (message: string) => void;
+export declare const ChatMessageStateProvider: import("react").Provider<ChatMessageContext | null>;
+export declare function useChatMessageContext(): ChatMessageContext;
+/** The announcement for a state change, or null when the change isn't worth announcing. */
+export declare function chatMessageTransition(previous: ChatState, next: ChatState, labels: ChatMessageStatusLabels): string | null;
+export declare function useChatMessage({ from, state, density, layout, continuation }: Pick<ChatMessageProps, "from" | "state" | "density" | "layout" | "continuation">): ChatMessageContext;
 //#endregion

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

@@ -1,25 +1,56 @@
+import { createContext, useContext } from "react";
 //#region src/hooks/use-chat-message.ts
-function getChatMessageContext({ from, state, density }) {
+const chatAuthorLabels = {
+	user: "You",
+	assistant: "Assistant",
+	participant: "Participant",
+	system: "System",
+	tool: "Tool"
+};
+const chatMessageStatusLabels = {
+	pending: "Assistant is replying",
+	replied: "Assistant replied",
+	error: "Reply failed"
+};
+const ChatThreadAnnounceContext = createContext(() => {});
+/** Publishes a state transition (never streamed text) to the thread's one polite status region; a no-op outside `ChatThread`. */
+function useChatThreadAnnounce() {
+	return useContext(ChatThreadAnnounceContext);
+}
+const ChatMessageStateContext = createContext(null);
+const ChatMessageStateProvider = ChatMessageStateContext.Provider;
+function useChatMessageContext() {
+	const context = useContext(ChatMessageStateContext);
+	if (!context) throw new Error("ChatMessage compound components must be rendered inside <ChatMessage>.");
+	return context;
+}
+/** The announcement for a state change, or null when the change isn't worth announcing. */
+function chatMessageTransition(previous, next, labels) {
+	if (previous === next) return null;
+	if (next === "pending") return labels.pending;
+	if (next === "error") return labels.error;
+	if (next === "idle" && (previous === "pending" || previous === "streaming")) return labels.replied;
+	return null;
+}
+function useChatMessage({ from, state = "idle", density = "comfortable", layout = "bubble", continuation = false }) {
 	return {
 		from,
 		state,
 		density,
+		layout,
+		continuation,
 		isUser: from === "user",
 		isAssistant: from === "assistant",
+		isParticipant: from === "participant",
 		isSystem: from === "system",
 		isTool: from === "tool",
 		isCompact: density === "compact",
 		isStreaming: state === "streaming",
 		isPending: state === "pending",
-		isError: state === "error"
+		isError: state === "error",
+		isEndAligned: from === "user" && layout === "bubble",
+		isBubble: layout === "bubble" && (from === "user" || from === "participant")
 	};
 }
-function useChatMessage({ from, state = "idle", density = "comfortable" }) {
-	return getChatMessageContext({
-		from,
-		state,
-		density
-	});
-}
 //#endregion
-export { useChatMessage };
+export { ChatMessageStateProvider, ChatThreadAnnounceContext, chatAuthorLabels, chatMessageStatusLabels, chatMessageTransition, useChatMessage, useChatMessageContext, useChatThreadAnnounce };

package/dist/hooks/use-chat-thread-scroll.js

@@ -1,14 +1,29 @@
+import { prefersReducedMotion } from "../lib/motion.js";
 import { useEffect, useRef, useState } from "react";
 //#region src/hooks/use-chat-thread-scroll.ts
 const BOTTOM_THRESHOLD = 24;
 const SETTLE_TIMEOUT = 700;
+function firstVisibleChild(list, viewportTop) {
+	const children = list.children;
+	let low = 0;
+	let high = children.length - 1;
+	let found;
+	while (low <= high) {
+		const middle = low + high >> 1;
+		if (children[middle].getBoundingClientRect().bottom > viewportTop) {
+			found = children[middle];
+			high = middle - 1;
+		} else low = middle + 1;
+	}
+	return found;
+}
 function useChatThreadScroll() {
 	const viewportRef = useRef(null);
 	const contentRef = useRef(null);
 	const pinnedRef = useRef(true);
 	const [atBottom, setAtBottom] = useState(true);
 	const settlingRef = useRef(void 0);
-	function scrollToBottom(behavior = "smooth") {
+	function scrollToBottom(behavior) {
 		const viewport = viewportRef.current;
 		if (!viewport) return;
 		pinnedRef.current = true;
@@ -19,13 +34,29 @@ function useChatThreadScroll() {
 		}, SETTLE_TIMEOUT);
 		viewport.scrollTo({
 			top: viewport.scrollHeight,
-			behavior
+			behavior: behavior ?? (prefersReducedMotion(viewport) ? "auto" : "smooth")
 		});
 	}
 	useEffect(() => {
 		const viewport = viewportRef.current;
 		const content = contentRef.current;
-		if (!viewport || !content) return;
+		const messageList = content?.firstElementChild;
+		if (!viewport || !content || !messageList) return;
+		let anchor;
+		function rememberAnchor() {
+			if (!viewport || !messageList) return;
+			const viewportTop = viewport.getBoundingClientRect().top;
+			const element = firstVisibleChild(messageList, viewportTop);
+			anchor = element ? {
+				element,
+				offset: element.getBoundingClientRect().top - viewportTop
+			} : void 0;
+		}
+		function keepAnchorInPlace() {
+			if (!viewport || !anchor?.element.isConnected) return;
+			const drift = anchor.element.getBoundingClientRect().top - viewport.getBoundingClientRect().top - anchor.offset;
+			if (drift !== 0) viewport.scrollTop += drift;
+		}
 		function settle() {
 			clearTimeout(settlingRef.current);
 			settlingRef.current = void 0;
@@ -37,21 +68,26 @@ function useChatThreadScroll() {
 			pinnedRef.current = distance <= BOTTOM_THRESHOLD;
 			setAtBottom(pinnedRef.current);
 		}
+		function handleScroll() {
+			rememberAnchor();
+			readPosition();
+		}
 		const observer = new ResizeObserver(() => {
 			if (!viewport) return;
 			if (pinnedRef.current) viewport.scrollTop = viewport.scrollHeight;
-			else readPosition();
+			else keepAnchorInPlace();
+			handleScroll();
 		});
 		observer.observe(content);
 		observer.observe(viewport);
-		viewport.addEventListener("scroll", readPosition, { passive: true });
+		viewport.addEventListener("scroll", handleScroll, { passive: true });
 		viewport.addEventListener("scrollend", settle);
 		viewport.scrollTop = viewport.scrollHeight;
-		readPosition();
+		handleScroll();
 		return () => {
 			observer.disconnect();
 			clearTimeout(settlingRef.current);
-			viewport.removeEventListener("scroll", readPosition);
+			viewport.removeEventListener("scroll", handleScroll);
 			viewport.removeEventListener("scrollend", settle);
 		};
 	}, []);

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

@@ -8,10 +8,10 @@ export type ColorAreaRect = {
   width: number;
   height: number;
 };
-export type ColorAreaPointer = {
-  areaRef: RefObject<HTMLDivElement | null>;
+export type ColorAreaPointer<Element extends HTMLElement> = {
+  areaRef: RefObject<Element | null>;
   dragging: boolean;
   onPointerDown: (event: PointerEvent) => void;
 };
-export declare function useColorArea(onChange: (offset: ColorAreaOffset, rect: ColorAreaRect) => void): ColorAreaPointer;
+export declare function useColorArea<Element extends HTMLElement = HTMLDivElement>(onChange: (offset: ColorAreaOffset, rect: ColorAreaRect) => void, targetRef?: RefObject<Element | null>): ColorAreaPointer<Element>;
 //#endregion

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

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

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

@@ -5,8 +5,9 @@ export type UseCopyToClipboardOptions = {
   onCopy?: (value: string) => void;
   onCopyError?: (error: unknown) => void;
 };
+export type CopyStatus = "idle" | "copied" | "failed";
 export type UseCopyToClipboardResult = {
-  isCopied: boolean;
+  status: CopyStatus;
   copyToClipboard: (value: string) => Promise<boolean>;
   resetCopied: () => void;
 };

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

@@ -17,15 +17,15 @@ function copyViaSelection(value) {
 	textarea.setAttribute("readonly", "");
 	textarea.setAttribute("aria-hidden", "true");
 	textarea.style.position = "fixed";
-	textarea.style.top = "0";
-	textarea.style.left = "0";
+	textarea.style.insetBlockStart = "0";
+	textarea.style.insetInlineStart = "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.focus({ preventScroll: true });
 		textarea.select();
 		textarea.setSelectionRange(0, value.length);
 		return document.execCommand("copy");
@@ -41,7 +41,7 @@ async function copyTextToClipboard(value) {
 	return copyViaSelection(value);
 }
 function useCopyToClipboard({ text, copiedDuration = 1200, onCopy, onCopyError } = {}) {
-	const [isCopied, setIsCopied] = useState(false);
+	const [status, setStatus] = useState("idle");
 	const resetTimeout = useRef(null);
 	useEffect(() => {
 		const timeoutRef = resetTimeout;
@@ -52,38 +52,38 @@ function useCopyToClipboard({ text, copiedDuration = 1200, onCopy, onCopyError }
 	function resetCopied() {
 		if (resetTimeout.current) window.clearTimeout(resetTimeout.current);
 		resetTimeout.current = null;
-		setIsCopied(false);
+		setStatus("idle");
+	}
+	function settle(next) {
+		setStatus(next);
+		if (resetTimeout.current) window.clearTimeout(resetTimeout.current);
+		resetTimeout.current = next === "copied" ? window.setTimeout(() => setStatus("idle"), copiedDuration) : null;
+		return next === "copied";
 	}
 	async function copyToClipboard(value) {
 		if (!await copyTextToClipboard(value)) {
 			onCopyError?.(/* @__PURE__ */ new Error("Unable to copy text"));
-			setIsCopied(false);
-			return false;
+			return settle("failed");
 		}
 		try {
 			onCopy?.(value);
 		} catch (error) {
 			onCopyError?.(error);
-			setIsCopied(false);
-			return false;
+			return settle("failed");
 		}
-		setIsCopied(true);
-		if (resetTimeout.current) window.clearTimeout(resetTimeout.current);
-		resetTimeout.current = window.setTimeout(() => setIsCopied(false), copiedDuration);
-		return true;
+		return settle("copied");
 	}
 	function handleCopy() {
 		return text !== void 0 ? copyToClipboard(text) : Promise.resolve(false);
 	}
-	return text === void 0 ? {
-		isCopied,
+	const state = {
+		status,
 		copyToClipboard,
 		resetCopied
-	} : {
-		isCopied,
-		copyToClipboard,
-		handleCopy,
-		resetCopied
+	};
+	return text === void 0 ? state : {
+		...state,
+		handleCopy
 	};
 }
 //#endregion

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

@@ -1,9 +1,9 @@
 import { DropzoneFileRejection, DropzonePolicy } from "../lib/dropzone-validation.js";
-import { ChangeEvent, ComponentProps, DragEvent, RefObject } from "react";
+import { ChangeEvent, ClipboardEvent, ComponentProps, DragEvent, RefObject } from "react";
 //#region src/hooks/use-dropzone.d.ts
 export type DropzoneVisualState = "idle" | "accept" | "reject" | "unknown" | "processing";
-export type DropzoneValueChangeReason = "drop" | "input" | "remove" | "clear";
-export type DropzoneEvent = DragEvent<HTMLElement> | ChangeEvent<HTMLInputElement>;
+export type DropzoneValueChangeReason = "drop" | "input" | "paste" | "remove" | "clear";
+export type DropzoneEvent = DragEvent<HTMLElement> | ClipboardEvent<HTMLElement> | ChangeEvent<HTMLInputElement>;
 export type DropzoneGetFilesFromEvent = (event: DropzoneEvent, signal: AbortSignal) => readonly File[] | Promise<readonly File[]>;
 export type DropzoneValueChangeDetails = {
   reason: DropzoneValueChangeReason;
@@ -22,6 +22,7 @@ export type UseDropzoneOptions = {
   policy?: DropzonePolicy;
   disabled?: boolean;
   drag?: boolean;
+  paste?: boolean;
   preventDropOnDocument?: boolean;
   trackDocumentDrag?: boolean;
   getFilesFromEvent?: DropzoneGetFilesFromEvent;
@@ -35,6 +36,7 @@ export type UseDropzoneReturn = {
   multiple: boolean;
   disabled: boolean;
   dragEnabled: boolean;
+  pasteEnabled: boolean;
   visualState: DropzoneVisualState;
   isDragActive: boolean;
   isDragAccept: boolean;
@@ -48,11 +50,12 @@ export type UseDropzoneReturn = {
   open: () => void;
   removeFile: (file: File) => void;
   clearFiles: () => void;
+  removeRejection: (file: File) => void;
   clearRejections: () => void;
   reset: () => void;
   getRootProps: (props?: ComponentProps<"div">) => ComponentProps<"div">;
   getInputProps: (props?: ComponentProps<"input">) => ComponentProps<"input">;
 };
-export declare function useDropzone({ value: controlledValue, defaultValue, onValueChange, policy, disabled, drag, preventDropOnDocument, trackDocumentDrag, getFilesFromEvent, onDrop, onError }?: UseDropzoneOptions): UseDropzoneReturn;
+export declare function useDropzone({ value: controlledValue, defaultValue, onValueChange, policy, disabled, drag, paste, preventDropOnDocument, trackDocumentDrag, getFilesFromEvent, onDrop, onError }?: UseDropzoneOptions): UseDropzoneReturn;
 export declare function defaultGetFilesFromEvent(event: DropzoneEvent): readonly File[];
 //#endregion