@ctrl-ui/react 0.8.6 → 0.8.8

package/dist/hooks/use-dropzone.js

@@ -4,7 +4,7 @@ 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 } = {}) {
+function useDropzone({ value: controlledValue, defaultValue = [], onValueChange, policy, disabled = false, drag = true, paste = true, preventDropOnDocument = true, trackDocumentDrag = false, getFilesFromEvent, onDrop, onError } = {}) {
 	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
 	const [fileRejections, setFileRejections] = useState([]);
 	const [isDragActive, setIsDragActive] = useState(false);
@@ -25,12 +25,15 @@ function useDropzone({ value: controlledValue, defaultValue = [], onValueChange,
 	const disabledRef = useRef(disabled);
 	const dragEnabled = drag && !disabled;
 	const dragEnabledRef = useRef(dragEnabled);
+	const pasteEnabled = paste && !disabled;
+	const pasteEnabledRef = useRef(pasteEnabled);
 	const policyRef = useRef(policy);
 	const customExtractionRef = useRef(Boolean(getFilesFromEvent));
 	useIsomorphicLayoutEffect(() => {
 		currentValueRef.current = currentValue;
 		disabledRef.current = disabled;
 		dragEnabledRef.current = dragEnabled;
+		pasteEnabledRef.current = pasteEnabled;
 		policyRef.current = policy;
 		customExtractionRef.current = Boolean(getFilesFromEvent);
 	});
@@ -136,6 +139,10 @@ function useDropzone({ value: controlledValue, defaultValue = [], onValueChange,
 			removedFiles
 		});
 	}
+	function removeRejection(file) {
+		if (disabledRef.current || processingRef.current) return;
+		setFileRejections((current) => current.filter((rejection) => rejection.file !== file));
+	}
 	function clearRejections() {
 		if (disabledRef.current || processingRef.current || fileRejections.length === 0) return;
 		setFileRejections([]);
@@ -153,7 +160,7 @@ function useDropzone({ value: controlledValue, defaultValue = [], onValueChange,
 		if (fileRejections.length > 0) setFileRejections([]);
 	}
 	function getRootProps(props = {}) {
-		const { onDragEnter, onDragOver, onDragLeave, onDragEnd, onDrop: callerOnDrop, ref, ...rootProps } = props;
+		const { onDragEnter, onDragOver, onDragLeave, onDragEnd, onDrop: callerOnDrop, onPaste, ref, ...rootProps } = props;
 		return {
 			...rootProps,
 			ref: (node) => {
@@ -207,6 +214,14 @@ function useDropzone({ value: controlledValue, defaultValue = [], onValueChange,
 				if (event.defaultPrevented || !dragEnabledRef.current) return;
 				event.preventDefault();
 				intake(event, "drop");
+			},
+			onPaste: (event) => {
+				onPaste?.(event);
+				if (!isFilePaste(event.clipboardData)) return;
+				event.stopPropagation();
+				if (event.defaultPrevented || !pasteEnabledRef.current) return;
+				event.preventDefault();
+				intake(event, "paste");
 			}
 		};
 	}
@@ -326,6 +341,7 @@ function useDropzone({ value: controlledValue, defaultValue = [], onValueChange,
 		multiple: policy?.multiple ?? true,
 		disabled,
 		dragEnabled,
+		pasteEnabled,
 		visualState,
 		isDragActive,
 		isDragAccept: visualState === "accept",
@@ -339,6 +355,7 @@ function useDropzone({ value: controlledValue, defaultValue = [], onValueChange,
 		open,
 		removeFile,
 		clearFiles,
+		removeRejection,
 		clearRejections,
 		reset,
 		getRootProps,
@@ -346,11 +363,25 @@ function useDropzone({ value: controlledValue, defaultValue = [], onValueChange,
 	};
 }
 function defaultGetFilesFromEvent(event) {
-	return "dataTransfer" in event ? Array.from(event.dataTransfer.files) : Array.from(event.currentTarget.files ?? []);
+	if ("clipboardData" in event) return getClipboardFiles(event.clipboardData);
+	if ("dataTransfer" in event) return Array.from(event.dataTransfer.files);
+	return Array.from(event.currentTarget.files ?? []);
+}
+/** Safari exposes a pasted screenshot through `items` only, so `files` alone loses it. */
+function getClipboardFiles(clipboardData) {
+	const files = Array.from(clipboardData.files);
+	if (files.length > 0) return files;
+	return Array.from(clipboardData.items).filter((item) => item.kind === "file").map((item) => item.getAsFile()).filter((file) => file !== null);
 }
 function isFileDrag(dataTransfer) {
 	return dataTransfer ? Array.from(dataTransfer.types).includes("Files") : false;
 }
+/** Clipboards that also carry text belong to the focused editor: only a text-free paste is an attachment. */
+function isFilePaste(clipboardData) {
+	if (!clipboardData) return false;
+	const types = Array.from(clipboardData.types);
+	return types.includes("Files") && !types.includes("text/plain");
+}
 function getRegisteredDropzoneRoot(event) {
 	for (const target of event.composedPath()) if (target && registeredDropzoneRoots.has(target)) return target;
 }

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);

package/dist/hooks/use-textarea-trigger-menu.js

@@ -1,6 +1,6 @@
 "use client";
+import { isComposingKey, useTriggerMenu } from "./use-trigger-menu.js";
 import { caretRectInTextarea, detectTrigger } from "../lib/trigger-detect.js";
-import { useTriggerMenu } from "./use-trigger-menu.js";
 import { useEffect, useEffectEvent } from "react";
 //#region src/hooks/use-textarea-trigger-menu.ts
 function replaceRange(element, start, end, text) {
@@ -36,6 +36,7 @@ function useTextareaTriggerMenu(ref, options) {
 		controller.report(match, match === null ? null : caretRectInTextarea(element, match.start));
 	});
 	const handleKeyDown = useEffectEvent((event) => {
+		if (isComposingKey(event)) return;
 		if (controller.open && controller.handleKeyDown(event.key)) event.preventDefault();
 	});
 	const closeAfterBlur = useEffectEvent(() => {

package/dist/hooks/use-trigger-menu.d.ts

@@ -27,6 +27,16 @@ export type UseTriggerMenuOptions<Item extends TriggerMenuItemData> = {
   triggers: readonly TriggerConfig<Item>[];
   onCommit: (item: Item, trigger: TriggerConfig<Item>, match: TriggerMatch) => void;
 };
+/**
+ * Popup attributes for the element that keeps focus (textarea or editor) while the menu is up. It stays a
+ * multiline textbox (a <textarea> can't take role="combobox"), so open state is conveyed by `aria-controls`.
+ */
+export type TriggerMenuInputAria = {
+  "aria-autocomplete": "list";
+  "aria-haspopup": "listbox";
+  "aria-controls"?: string;
+  "aria-activedescendant"?: string;
+};
 export type TriggerMenuController<Item extends TriggerMenuItemData> = {
   open: boolean;
   items: readonly Item[];
@@ -34,6 +44,11 @@ export type TriggerMenuController<Item extends TriggerMenuItemData> = {
   anchorRect: DOMRect | null;
   activeChar: string | null;
   query: string;
+  /** Id for `TriggerMenuList`; the input's `aria-controls` points at it. */
+  listId: string;
+  /** Id for the option at `index`; the input's `aria-activedescendant` points at the active one. */
+  optionId: (index: number) => string;
+  inputAria: TriggerMenuInputAria;
   /** Binding → engine: publish current trigger match (or null) and caret rect to anchor to. */
   report: (match: TriggerMatch | null, anchorRect: DOMRect | null) => void;
   /** Binding → engine: route keydown while open. Returns true when engine consumed key. */
@@ -44,5 +59,44 @@ export type TriggerMenuController<Item extends TriggerMenuItemData> = {
   close: () => void;
   setOpen: (open: boolean) => void;
 };
+type DismissedMatch = {
+  char: string;
+  start: number;
+  query: string;
+};
+export type TriggerMenuState = {
+  open: boolean;
+  char: string | null;
+  query: string;
+  anchorRect: DOMRect | null;
+  activeIndex: number;
+  dismissed: DismissedMatch | null;
+};
+export type TriggerMenuAction = {
+  type: "report";
+  match: TriggerMatch | null;
+  anchorRect: DOMRect | null;
+} | {
+  type: "close";
+  dismissed: DismissedMatch | null;
+} | {
+  type: "move";
+  delta: number;
+  count: number;
+} | {
+  type: "activate";
+  index: number;
+};
+export declare const CLOSED_TRIGGER_MENU: TriggerMenuState;
+/** A dismissed token stays closed until its query changes, so keyup/click re-detection after Escape can't reopen it. */
+export declare function triggerMenuReducer(state: TriggerMenuState, action: TriggerMenuAction): TriggerMenuState;
+/** Keys an IME is still composing must never reach the menu or the composer's submit. */
+export declare function isComposingKey(event: {
+  isComposing: boolean;
+  keyCode: number;
+}): boolean;
+export type TriggerMenuKeyIntent = "next" | "previous" | "commit" | "dismiss" | "pass";
+/** What a key means to an open menu; an empty list passes Enter/Tab through so newline, submit and Tab-out still work. */
+export declare function triggerMenuKeyIntent(key: string, open: boolean, itemCount: number): TriggerMenuKeyIntent;
 export declare function useTriggerMenu<Item extends TriggerMenuItemData>({ triggers, onCommit }: UseTriggerMenuOptions<Item>): TriggerMenuController<Item>;
 //#endregion

package/dist/hooks/use-trigger-menu.js

@@ -1,12 +1,48 @@
-import { useRef, useState } from "react";
+import { useId, useReducer, useRef } from "react";
 //#region src/hooks/use-trigger-menu.ts
-const CLOSED = {
+const CLOSED_TRIGGER_MENU = {
 	open: false,
 	char: null,
 	query: "",
 	anchorRect: null,
-	activeIndex: 0
+	activeIndex: 0,
+	dismissed: null
 };
+/** A dismissed token stays closed until its query changes, so keyup/click re-detection after Escape can't reopen it. */
+function triggerMenuReducer(state, action) {
+	switch (action.type) {
+		case "report": {
+			const { match, anchorRect } = action;
+			if (match === null) return { ...CLOSED_TRIGGER_MENU };
+			const { dismissed } = state;
+			if (dismissed !== null && dismissed.char === match.char && dismissed.start === match.start && dismissed.query === match.query) return {
+				...CLOSED_TRIGGER_MENU,
+				dismissed
+			};
+			const activeIndex = state.open && state.char === match.char && state.query === match.query ? state.activeIndex : 0;
+			return {
+				open: true,
+				char: match.char,
+				query: match.query,
+				anchorRect,
+				activeIndex,
+				dismissed: null
+			};
+		}
+		case "close": return {
+			...CLOSED_TRIGGER_MENU,
+			dismissed: action.dismissed
+		};
+		case "move": return {
+			...state,
+			activeIndex: action.count === 0 ? 0 : (state.activeIndex + action.delta + action.count) % action.count
+		};
+		case "activate": return {
+			...state,
+			activeIndex: action.index
+		};
+	}
+}
 function matchesQuery(item, query) {
 	if (query === "") return true;
 	const needle = query.toLowerCase();
@@ -18,14 +54,45 @@ function resolveItems(trigger, query) {
 	const filter = trigger.filter ?? matchesQuery;
 	return trigger.items.filter((item) => filter(item, query));
 }
+/** Keys an IME is still composing must never reach the menu or the composer's submit. */
+function isComposingKey(event) {
+	return event.isComposing || event.keyCode === 229;
+}
+/** What a key means to an open menu; an empty list passes Enter/Tab through so newline, submit and Tab-out still work. */
+function triggerMenuKeyIntent(key, open, itemCount) {
+	if (!open) return "pass";
+	if (key === "ArrowDown") return "next";
+	if (key === "ArrowUp") return "previous";
+	if (key === "Escape") return "dismiss";
+	if ((key === "Enter" || key === "Tab") && itemCount > 0) return "commit";
+	return "pass";
+}
 function useTriggerMenu({ triggers, onCommit }) {
-	const [state, setState] = useState(CLOSED);
+	const [state, dispatch] = useReducer(triggerMenuReducer, CLOSED_TRIGGER_MENU);
 	const lastMatch = useRef(null);
+	const listId = useId();
 	const activeTrigger = state.char === null ? null : triggers.find((trigger) => trigger.char === state.char) ?? null;
 	const items = activeTrigger === null ? [] : resolveItems(activeTrigger, state.query);
+	const optionId = (index) => `${listId}-option-${index}`;
+	const hasActiveItem = state.open && state.activeIndex < items.length;
+	function dismiss() {
+		const match = lastMatch.current;
+		lastMatch.current = null;
+		dispatch({
+			type: "close",
+			dismissed: match === null ? null : {
+				char: match.char,
+				start: match.start,
+				query: match.query
+			}
+		});
+	}
 	function close() {
 		lastMatch.current = null;
-		setState(CLOSED);
+		dispatch({
+			type: "close",
+			dismissed: null
+		});
 	}
 	function select(item) {
 		const match = lastMatch.current;
@@ -33,55 +100,35 @@ function useTriggerMenu({ triggers, onCommit }) {
 		close();
 	}
 	function report(match, anchorRect) {
-		lastMatch.current = match;
-		const open = match !== null && triggers.some((trigger) => trigger.char === match.char);
-		setState((current) => {
-			if (!open || match === null) return CLOSED;
-			const activeIndex = current.char === match.char && current.query === match.query ? current.activeIndex : 0;
-			return {
-				open: true,
-				char: match.char,
-				query: match.query,
-				anchorRect,
-				activeIndex
-			};
+		const known = match !== null && triggers.some((trigger) => trigger.char === match.char);
+		lastMatch.current = known ? match : null;
+		dispatch({
+			type: "report",
+			match: known ? match : null,
+			anchorRect
 		});
 	}
 	function handleKeyDown(key) {
-		if (!state.open) return false;
-		if (key === "ArrowDown") {
-			setState((current) => ({
-				...current,
-				activeIndex: items.length === 0 ? 0 : (current.activeIndex + 1) % items.length
-			}));
-			return true;
-		}
-		if (key === "ArrowUp") {
-			setState((current) => ({
-				...current,
-				activeIndex: items.length === 0 ? 0 : (current.activeIndex - 1 + items.length) % items.length
-			}));
-			return true;
-		}
-		if (key === "Enter" || key === "Tab") {
+		const intent = triggerMenuKeyIntent(key, state.open, items.length);
+		if (intent === "next" || intent === "previous") dispatch({
+			type: "move",
+			delta: intent === "next" ? 1 : -1,
+			count: items.length
+		});
+		else if (intent === "commit") {
 			const item = items[state.activeIndex];
 			if (item && !item.disabled) select(item);
-			return true;
-		}
-		if (key === "Escape") {
-			close();
-			return true;
-		}
-		return false;
+		} else if (intent === "dismiss") dismiss();
+		return intent !== "pass";
 	}
 	function setOpen(open) {
-		if (!open) close();
+		if (!open) dismiss();
 	}
-	function setActiveIndex(activeIndex) {
-		setState((current) => ({
-			...current,
-			activeIndex
-		}));
+	function setActiveIndex(index) {
+		dispatch({
+			type: "activate",
+			index
+		});
 	}
 	return {
 		open: state.open,
@@ -90,6 +137,14 @@ function useTriggerMenu({ triggers, onCommit }) {
 		anchorRect: state.anchorRect,
 		activeChar: state.char,
 		query: state.query,
+		listId,
+		optionId,
+		inputAria: {
+			"aria-autocomplete": "list",
+			"aria-haspopup": "listbox",
+			"aria-controls": state.open ? listId : void 0,
+			"aria-activedescendant": hasActiveItem ? optionId(state.activeIndex) : void 0
+		},
 		report,
 		handleKeyDown,
 		setActiveIndex,
@@ -99,4 +154,4 @@ function useTriggerMenu({ triggers, onCommit }) {
 	};
 }
 //#endregion
-export { useTriggerMenu };
+export { CLOSED_TRIGGER_MENU, isComposingKey, triggerMenuKeyIntent, triggerMenuReducer, useTriggerMenu };

package/dist/hooks/use-user-ask.d.ts

@@ -6,6 +6,7 @@ export type UserAskProps = Omit<ComponentProps<"section">, "style"> & {
   children?: ReactNode;
   onComplete?: (answers: UserAskAnswers) => void;
   onDismiss?: () => void;
+  questionStatusLabel?: (current: number, total: number, title: string) => string;
   style?: CSSProperties & UserAskKnobStyle;
 };
 export type UserAskQuestionEntry = {
@@ -36,6 +37,7 @@ export declare function useUserAsk({ onComplete, onDismiss }: Pick<UserAskProps,
   allowsMultiple: (questionId: string) => boolean;
   selectionFor: (questionId: string) => string;
   isSelected: (questionId: string, optionKey: string) => boolean;
+  isTabStop: (questionId: string, optionKey: string) => boolean;
   select: (questionId: string, optionKey: string) => void;
   freeformTextFor: (questionId: string) => string;
   setFreeformText: (questionId: string, text: string) => void;

package/dist/hooks/use-user-ask.js

@@ -8,6 +8,12 @@ function upsert(entries, entry) {
 	next[index] = entry;
 	return next;
 }
+const arrowDeltas = {
+	ArrowDown: 1,
+	ArrowRight: 1,
+	ArrowUp: -1,
+	ArrowLeft: -1
+};
 function useUserAsk({ onComplete, onDismiss }) {
 	const [questions, setQuestions] = useState([]);
 	const [optionsByQuestion, setOptionsByQuestion] = useState({});
@@ -114,21 +120,11 @@ function useUserAsk({ onComplete, onDismiss }) {
 	function dismiss() {
 		onDismiss?.();
 	}
-	function moveSelection(delta) {
-		if (!activeQuestion) return;
-		const options = optionsFor(activeQuestion.id);
-		if (!options.some((option) => !option.disabled)) return;
-		const currentKey = selectionFor(activeQuestion.id);
-		const currentIndex = options.findIndex((option) => option.key === currentKey);
-		let start = currentIndex;
-		if (currentIndex === -1) start = delta > 0 ? -1 : 0;
-		for (let step = 1; step <= options.length; step += 1) {
-			const candidate = options[(start + delta * step + options.length * step) % options.length];
-			if (candidate && !candidate.disabled) {
-				select(activeQuestion.id, candidate.key);
-				return;
-			}
-		}
+	function isTabStop(questionId, optionKey) {
+		if (allowsMultiple(questionId)) return true;
+		const selectedKey = selectionFor(questionId);
+		if (selectedKey !== void 0) return selectedKey === optionKey;
+		return optionsFor(questionId).find((option) => !option.disabled)?.key === optionKey;
 	}
 	function selectDigit(digit) {
 		if (!activeQuestion) return;
@@ -137,39 +133,28 @@ function useUserAsk({ onComplete, onDismiss }) {
 	}
 	function moveActiveOption(event, delta) {
 		if (!activeQuestion) return;
-		if (!allowsMultiple(activeQuestion.id)) {
-			moveSelection(delta);
-			return;
-		}
 		const rows = [...event.currentTarget.querySelector("[data-slot=\"question\"][data-active]")?.querySelectorAll("[data-slot=\"option\"]:not([disabled])") ?? []];
 		if (rows.length === 0) return;
 		const focused = rows.findIndex((candidate) => candidate.contains(document.activeElement));
 		let start = focused;
 		if (focused === -1) start = delta > 0 ? -1 : 0;
 		const row = rows[(start + delta + rows.length) % rows.length];
-		(row?.matches("button, input") ? row : row?.querySelector("input, button"))?.focus();
-	}
-	function handleKeyDown(event) {
-		if (event.defaultPrevented) return;
-		if (event.key === "Escape") {
-			event.preventDefault();
-			dismiss();
-			return;
-		}
-		if (event.key === "Enter") {
+		const target = row?.matches("button, input") ? row : row?.querySelector("input, button");
+		target?.focus();
+		if (!allowsMultiple(activeQuestion.id) && target?.matches("button")) target.click();
+	}
+	function handleEnter(event) {
+		if (event.nativeEvent.isComposing || event.keyCode === 229) return;
+		if (event.target instanceof Element && event.target.closest("button:not([role=\"radio\"]):not([role=\"checkbox\"]), a[href]")) return;
+		event.preventDefault();
+		advance();
+	}
+	function handleOptionKey(event) {
+		if (event.target instanceof Element && event.target.closest("input, textarea, [contenteditable]")) return;
+		const delta = arrowDeltas[event.key];
+		if (delta !== void 0) {
 			event.preventDefault();
-			advance();
-			return;
-		}
-		if (event.target instanceof HTMLElement && event.target.closest("input, textarea, [contenteditable]")) return;
-		if (event.key === "ArrowDown") {
-			event.preventDefault();
-			moveActiveOption(event, 1);
-			return;
-		}
-		if (event.key === "ArrowUp") {
-			event.preventDefault();
-			moveActiveOption(event, -1);
+			moveActiveOption(event, delta);
 			return;
 		}
 		if (/^[1-9]$/.test(event.key)) {
@@ -177,6 +162,14 @@ function useUserAsk({ onComplete, onDismiss }) {
 			selectDigit(Number(event.key));
 		}
 	}
+	function handleKeyDown(event) {
+		if (event.defaultPrevented) return;
+		if (event.key === "Escape") {
+			event.preventDefault();
+			dismiss();
+		} else if (event.key === "Enter") handleEnter(event);
+		else handleOptionKey(event);
+	}
 	return {
 		questions,
 		activeIndex,
@@ -191,6 +184,7 @@ function useUserAsk({ onComplete, onDismiss }) {
 		allowsMultiple,
 		selectionFor,
 		isSelected,
+		isTabStop,
 		select,
 		freeformTextFor,
 		setFreeformText,