@ctrl-ui/react 0.8.7 → 0.8.9

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;
@@ -19,6 +20,7 @@ export type ChatComposerProps = Omit<ComponentProps<"form">, "onSubmit" | "style
   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 = {
@@ -29,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, allowEmptySubmit, trackSends }: Pick<ChatComposerProps, "value" | "defaultValue" | "onValueChange" | "onSubmit" | "state" | "density" | "disabled" | "allowEmptySubmit"> & {
-  /** 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;
@@ -53,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, allowEmptySubmit = 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 || allowEmptySubmit) && !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-dynamic-notification.d.ts

@@ -18,18 +18,22 @@ export type DynamicNotificationProps = Omit<ComponentProps<"div">, "onChange" |
   onReply?: (payload: DynamicNotificationReplyPayload) => void | Promise<void>;
   variant?: DynamicNotificationVariant;
   disabled?: boolean;
+  thinkingLabel?: string;
+  replyErrorLabel?: string;
   style?: CSSProperties & DynamicNotificationKnobStyle;
 };
 export type DynamicNotificationController = {
   open: boolean;
   disabled: boolean;
-  setOpen: (nextOpen: boolean, reason: OpenChangeReason, event: Event, trigger?: Element) => void;
+  setOpen: (nextOpen: boolean, reason: OpenChangeReason, event: Event, trigger?: Element) => boolean;
   reply: string;
   setReply: (nextValue: string) => void;
   normalizedReply: string;
   canSubmit: boolean;
+  replyPending: boolean;
+  replyFailed: boolean;
   clear: () => void;
-  submitReply: () => void;
+  submitReply: () => Promise<void>;
   handleReplySubmit: (event: FormSubmitEvent) => void;
 };
 export declare function useDynamicNotification({ open, defaultOpen, onOpenChange, replyValue, defaultReplyValue, onReplyValueChange, onReply, disabled }: Pick<DynamicNotificationProps, "open" | "defaultOpen" | "onOpenChange" | "replyValue" | "defaultReplyValue" | "onReplyValueChange" | "onReply" | "disabled">): DynamicNotificationController;

package/dist/hooks/use-dynamic-notification.js

@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { useMemo, useRef, useState } from "react";
 //#region src/hooks/use-dynamic-notification.ts
 function createOpenChangeEventDetails(reason, event, trigger) {
 	let canceled = false;
@@ -39,13 +39,17 @@ function useDynamicNotification({ open, defaultOpen = false, onOpenChange, reply
 		onValueChange: onReplyValueChange
 	});
 	const normalizedReply = reply.trim();
-	const canSubmit = normalizedReply.length > 0 && !disabled;
+	const [replyPending, setReplyPending] = useState(false);
+	const [replyFailed, setReplyFailed] = useState(false);
+	const replyInFlight = useRef(false);
+	const canSubmit = normalizedReply.length > 0 && !disabled && !replyPending;
 	const setOpen = useMemo(() => (nextOpen, reason, event, trigger) => {
-		if (disabled || nextOpen === isOpen) return;
+		if (disabled || nextOpen === isOpen) return false;
 		const details = createOpenChangeEventDetails(reason, event, trigger);
 		onOpenChange?.(nextOpen, details);
-		if (details.isCanceled) return;
+		if (details.isCanceled) return false;
 		if (!isControlled) setInternalOpen(nextOpen);
+		return true;
 	}, [
 		disabled,
 		isControlled,
@@ -55,12 +59,22 @@ function useDynamicNotification({ open, defaultOpen = false, onOpenChange, reply
 	const clear = useMemo(() => () => {
 		setReply("");
 	}, [setReply]);
-	const submitReply = useMemo(() => () => {
-		if (!canSubmit) return;
-		onReply?.({
-			value: normalizedReply,
-			clear
-		});
+	const submitReply = useMemo(() => async () => {
+		if (!canSubmit || replyInFlight.current) return;
+		replyInFlight.current = true;
+		setReplyPending(true);
+		setReplyFailed(false);
+		try {
+			await onReply?.({
+				value: normalizedReply,
+				clear
+			});
+		} catch {
+			setReplyFailed(true);
+		} finally {
+			replyInFlight.current = false;
+			setReplyPending(false);
+		}
 	}, [
 		canSubmit,
 		clear,
@@ -75,6 +89,8 @@ function useDynamicNotification({ open, defaultOpen = false, onOpenChange, reply
 		setReply,
 		normalizedReply,
 		canSubmit,
+		replyPending,
+		replyFailed,
 		clear,
 		submitReply,
 		handleReplySubmit: useMemo(() => (event) => {

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

@@ -1,4 +1,5 @@
 //#region src/hooks/use-mobile.d.ts
-/** True below `breakpoint` px (Tailwind `md` by default); pass another breakpoint to match layout that switches elsewhere. */
-export declare function useIsMobile(breakpoint?: number): boolean;
+type Breakpoint = number | `--${string}`;
+/** True below `breakpoint`: px (Tailwind `md` by default) or a theme breakpoint token such as `--breakpoint-lg`, so JS and the matching Tailwind variant share one value. */
+export declare function useIsMobile(breakpoint?: Breakpoint): boolean;
 //#endregion

package/dist/hooks/use-mobile.js

@@ -5,14 +5,18 @@ const viewportStores = /* @__PURE__ */ new Map();
 function viewportStore(breakpoint) {
 	const cached = viewportStores.get(breakpoint);
 	if (cached) return cached;
-	const mobileQuery = `(max-width: ${breakpoint - 1}px)`;
+	let resolvedQuery;
+	function mobileQuery() {
+		resolvedQuery ??= typeof breakpoint === "number" ? `(width < ${breakpoint}px)` : `(width < ${getComputedStyle(document.documentElement).getPropertyValue(breakpoint).trim()})`;
+		return resolvedQuery;
+	}
 	const store = {
 		subscribe(onChange) {
-			const query = window.matchMedia(mobileQuery);
+			const query = window.matchMedia(mobileQuery());
 			query.addEventListener("change", onChange);
 			return () => query.removeEventListener("change", onChange);
 		},
-		getSnapshot: () => window.matchMedia(mobileQuery).matches
+		getSnapshot: () => window.matchMedia(mobileQuery()).matches
 	};
 	viewportStores.set(breakpoint, store);
 	return store;
@@ -20,7 +24,7 @@ function viewportStore(breakpoint) {
 function getServerViewportSnapshot() {
 	return false;
 }
-/** True below `breakpoint` px (Tailwind `md` by default); pass another breakpoint to match layout that switches elsewhere. */
+/** True below `breakpoint`: px (Tailwind `md` by default) or a theme breakpoint token such as `--breakpoint-lg`, so JS and the matching Tailwind variant share one value. */
 function useIsMobile(breakpoint = MOBILE_BREAKPOINT) {
 	const store = viewportStore(breakpoint);
 	return useSyncExternalStore(store.subscribe, store.getSnapshot, getServerViewportSnapshot);