modern-cmdk 1.0.0

package/dist/react/index.mjs

@@ -0,0 +1,905 @@
+import { C as itemId, S as groupId, d as formatShortcut, f as parseShortcut, i as createCommandMachine } from "../core-Bq0eDvlc.mjs";
+import * as React from "react";
+import { Component, Suspense, createContext, use, useCallback, useEffect, useId, useInsertionEffect, useMemo, useOptimistic, useRef, useState, useSyncExternalStore, useTransition } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Dialog } from "radix-ui";
+//#region src/react/activity.tsx
+const ActivityComponent = "Activity" in React ? React.Activity : null;
+/**
+* Wraps content in React 19.3.0-canary Activity API.
+* When mode="hidden", the component tree is preserved in memory but not rendered.
+* Falls back to conditional rendering if Activity is unavailable.
+*/
+function CommandActivity({ mode, children }) {
+	if (ActivityComponent) return /* @__PURE__ */ jsx(ActivityComponent, {
+		mode,
+		children
+	});
+	if (mode === "hidden") return null;
+	return /* @__PURE__ */ jsx(Fragment, { children });
+}
+//#endregion
+//#region src/react/context.ts
+const CommandContext = createContext(null);
+CommandContext.displayName = "CommandContext";
+const CommandGroupContext = createContext(null);
+CommandGroupContext.displayName = "CommandGroupContext";
+//#endregion
+//#region src/react/async-items.tsx
+/** Inner component that suspends via use() until items resolve */
+function AsyncItemsInner({ items: itemsPromise, children }) {
+	const ctx = use(CommandContext);
+	if (!ctx) throw new Error("Command.AsyncItems must be used within a <Command> component");
+	const items = use(itemsPromise);
+	useEffect(() => {
+		ctx.machine.send({
+			type: "ITEMS_LOADED",
+			items
+		});
+	}, [ctx.machine, items]);
+	return /* @__PURE__ */ jsx(Fragment, { children: children(items) });
+}
+function CommandAsyncItems({ items, fallback, children }) {
+	const stableRef = useRef(items);
+	if (stableRef.current !== items) stableRef.current = items;
+	return /* @__PURE__ */ jsx(Suspense, {
+		fallback,
+		children: /* @__PURE__ */ jsx(AsyncItemsInner, {
+			items: stableRef.current,
+			children
+		})
+	});
+}
+//#endregion
+//#region src/react/badge.tsx
+function CommandBadge({ ref, children, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		"data-command-badge": "",
+		...props,
+		children
+	});
+}
+//#endregion
+//#region src/react/hooks/use-command.ts
+function useCommand(machine) {
+	const id = useId();
+	const [isPending, startTransition] = useTransition();
+	const state = useSyncExternalStore(machine.subscribe, machine.getState, machine.getState);
+	const filteredIdSet = useMemo(() => new Set(state.filteredIds), [state.filteredIds]);
+	const [optimisticActiveId, setOptimisticActiveId] = useOptimistic(state.activeId);
+	const updateSearch = useCallback((query) => {
+		startTransition(() => {
+			machine.send({
+				type: "SEARCH_CHANGE",
+				query
+			});
+		});
+	}, [machine]);
+	return {
+		state: optimisticActiveId !== state.activeId ? {
+			...state,
+			activeId: optimisticActiveId
+		} : state,
+		isPending,
+		updateSearch,
+		setOptimisticActiveId,
+		filteredIdSet,
+		id
+	};
+}
+//#endregion
+//#region src/react/hooks/use-keyboard.ts
+/** Navigation key to machine direction mapping */
+const NAVIGATION_KEYS = {
+	ArrowDown: "next",
+	ArrowUp: "prev",
+	Home: "first",
+	End: "last"
+};
+/** Create a keydown handler for command palette keyboard navigation */
+function createKeydownHandler(machine, getState) {
+	return (event) => {
+		const { key } = event;
+		const state = getState();
+		const direction = NAVIGATION_KEYS[key];
+		if (direction) {
+			event.preventDefault();
+			machine.send({
+				type: "NAVIGATE",
+				direction
+			});
+			return;
+		}
+		switch (key) {
+			case "Enter": {
+				event.preventDefault();
+				const { activeId } = state;
+				if (activeId) machine.send({
+					type: "ITEM_SELECT",
+					id: activeId
+				});
+				break;
+			}
+			case "Backspace":
+				if (state.search === "" && state.pageStack.length > 0) {
+					event.preventDefault();
+					machine.send({ type: "PAGE_POP" });
+				}
+				break;
+			case "Escape":
+				event.preventDefault();
+				machine.send({ type: "CLOSE" });
+				break;
+		}
+	};
+}
+//#endregion
+//#region src/react/dialog.tsx
+function CommandDialog({ children, className, overlayClassName, contentClassName, label = "Command palette", open: controlledOpen, onOpenChange, container, ...machineOptions }) {
+	const rootId = useId();
+	const listId = `${rootId}-list`;
+	const inputId = `${rootId}-input`;
+	const machineRef = useRef(null);
+	if (machineRef.current === null) machineRef.current = createCommandMachine({
+		...machineOptions,
+		open: controlledOpen ?? false,
+		onOpenChange: (open) => {
+			onOpenChange?.(open);
+		}
+	});
+	const machine = machineRef.current;
+	const { state, isPending, updateSearch, setOptimisticActiveId, filteredIdSet, id } = useCommand(machine);
+	useEffect(() => {
+		return () => {
+			machineRef.current?.[Symbol.dispose]();
+			machineRef.current = null;
+		};
+	}, []);
+	const handleKeyDown = useCallback(createKeydownHandler(machine, () => machine.getState()), []);
+	useEffect(() => {
+		if (!state.open) return;
+		document.addEventListener("keydown", handleKeyDown);
+		return () => {
+			document.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [handleKeyDown, state.open]);
+	const prevControlledOpen = useRef(controlledOpen);
+	useEffect(() => {
+		if (controlledOpen !== void 0 && controlledOpen !== prevControlledOpen.current) {
+			prevControlledOpen.current = controlledOpen;
+			machine.send({ type: controlledOpen ? "OPEN" : "CLOSE" });
+		}
+	}, [controlledOpen, machine]);
+	const handleRadixOpenChange = useCallback((open) => {
+		machine.send({ type: open ? "OPEN" : "CLOSE" });
+	}, [machine]);
+	const contextValue = useMemo(() => ({
+		machine,
+		state,
+		isPending,
+		updateSearch,
+		setOptimisticActiveId,
+		filteredIdSet,
+		rootId: id,
+		listId,
+		inputId,
+		label
+	}), [
+		machine,
+		state,
+		isPending,
+		updateSearch,
+		setOptimisticActiveId,
+		filteredIdSet,
+		id,
+		listId,
+		inputId,
+		label
+	]);
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		open: state.open,
+		onOpenChange: handleRadixOpenChange,
+		children: /* @__PURE__ */ jsxs(Dialog.Portal, {
+			container,
+			children: [/* @__PURE__ */ jsx(Dialog.Overlay, {
+				"data-command-overlay": "",
+				"data-state": state.open ? "open" : "closed",
+				className: overlayClassName
+			}), /* @__PURE__ */ jsxs(Dialog.Content, {
+				"data-command-dialog": "",
+				"data-state": state.open ? "open" : "closed",
+				className,
+				"aria-label": label,
+				onOpenAutoFocus: (e) => {
+					e.preventDefault();
+					document.getElementById(inputId)?.focus();
+				},
+				children: [
+					/* @__PURE__ */ jsx(Dialog.Title, {
+						className: "sr-only",
+						children: label
+					}),
+					/* @__PURE__ */ jsx(Dialog.Description, {
+						className: "sr-only",
+						children: "Type a command or search..."
+					}),
+					/* @__PURE__ */ jsx(CommandContext, {
+						value: contextValue,
+						children: /* @__PURE__ */ jsx("div", {
+							"data-command-dialog-content": "",
+							className: contentClassName,
+							children: /* @__PURE__ */ jsx("div", {
+								"data-command-root": "",
+								role: "search",
+								"aria-label": label,
+								children
+							})
+						})
+					})
+				]
+			})]
+		})
+	});
+}
+//#endregion
+//#region src/react/empty.tsx
+function CommandEmpty({ ref, children, ...props }) {
+	const ctx = use(CommandContext);
+	if (!ctx) throw new Error("Command.Empty must be used within a <Command> component");
+	if (ctx.state.filteredCount > 0 || ctx.state.loading) return null;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-command-empty": "",
+		role: "status",
+		"aria-live": "polite",
+		...props,
+		children
+	});
+}
+//#endregion
+//#region src/react/hooks/use-register.ts
+/** Register a command item with the machine — auto-deregisters on unmount */
+function useRegisterItem(value, options) {
+	const ctx = use(CommandContext);
+	if (!ctx) throw new Error("useRegisterItem must be used within a <Command> component");
+	const generatedId = useId();
+	const id = itemId(options?.forceId ?? generatedId);
+	useInsertionEffect(() => {
+		const item = {
+			id,
+			value,
+			keywords: options?.keywords,
+			groupId: options?.groupId ? groupId(options.groupId) : void 0,
+			shortcut: options?.shortcut,
+			disabled: options?.disabled,
+			onSelect: options?.onSelect,
+			data: options?.data
+		};
+		ctx.machine.send({
+			type: "REGISTER_ITEM",
+			item
+		});
+		return () => {
+			ctx.machine.send({
+				type: "UNREGISTER_ITEM",
+				id
+			});
+		};
+	}, [
+		ctx.machine,
+		id,
+		value,
+		options?.groupId,
+		options?.data,
+		options?.disabled,
+		options?.keywords,
+		options?.onSelect,
+		options?.shortcut
+	]);
+	return id;
+}
+/** Register a command group with the machine — auto-deregisters on unmount */
+function useRegisterGroup(heading, options) {
+	const ctx = use(CommandContext);
+	if (!ctx) throw new Error("useRegisterGroup must be used within a <Command> component");
+	const generatedId = useId();
+	const id = groupId(options?.forceId ?? generatedId);
+	useInsertionEffect(() => {
+		const group = {
+			id,
+			heading,
+			priority: options?.priority
+		};
+		ctx.machine.send({
+			type: "REGISTER_GROUP",
+			group
+		});
+		return () => {
+			ctx.machine.send({
+				type: "UNREGISTER_GROUP",
+				id
+			});
+		};
+	}, [
+		ctx.machine,
+		id,
+		heading,
+		options?.priority
+	]);
+	return id;
+}
+//#endregion
+//#region src/react/group.tsx
+function CommandGroup({ ref, children, heading, priority, forceId, ...props }) {
+	const ctx = use(CommandContext);
+	if (!ctx) throw new Error("Command.Group must be used within a <Command> component");
+	const headingId = useId();
+	const groupId = useRegisterGroup(heading, {
+		...priority !== void 0 && { priority },
+		...forceId !== void 0 && { forceId }
+	});
+	const groupItems = ctx.state.groupedIds.get(groupId);
+	const hasVisibleItems = groupItems !== void 0 && groupItems.length > 0;
+	const groupContext = useMemo(() => ({
+		groupId,
+		headingId
+	}), [groupId, headingId]);
+	if (!hasVisibleItems) return null;
+	return /* @__PURE__ */ jsx(CommandGroupContext, {
+		value: groupContext,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref,
+			"data-command-group": "",
+			role: "group",
+			"aria-labelledby": heading ? headingId : void 0,
+			...props,
+			children: [heading && /* @__PURE__ */ jsx("div", {
+				"data-command-group-heading": "",
+				id: headingId,
+				"aria-hidden": true,
+				children: heading
+			}), /* @__PURE__ */ jsx("div", {
+				"data-command-group-items": "",
+				children
+			})]
+		})
+	});
+}
+//#endregion
+//#region src/react/highlight.tsx
+function CommandHighlight({ text, ranges, highlightClassName }) {
+	return useMemo(() => {
+		if (ranges.length === 0) return text;
+		const sorted = Iterator.from(ranges).toArray().sort((a, b) => a[0] - b[0]);
+		const segments = [];
+		let lastEnd = 0;
+		Iterator.from(sorted).forEach(([start, end], i) => {
+			if (start > lastEnd) segments.push(text.slice(lastEnd, start));
+			segments.push(/* @__PURE__ */ jsx("mark", {
+				"data-command-highlight": "",
+				className: highlightClassName,
+				children: text.slice(start, end)
+			}, i));
+			lastEnd = end;
+		});
+		if (lastEnd < text.length) segments.push(text.slice(lastEnd));
+		return /* @__PURE__ */ jsx(Fragment, { children: segments });
+	}, [
+		text,
+		ranges,
+		highlightClassName
+	]);
+}
+//#endregion
+//#region src/react/input.tsx
+function CommandInput({ ref, placeholder = "Search...", onValueChange, ...props }) {
+	const ctx = use(CommandContext);
+	if (!ctx) throw new Error("Command.Input must be used within a <Command> component");
+	const handleChange = useCallback((event) => {
+		const { value } = event.target;
+		ctx.updateSearch(value);
+		onValueChange?.(value);
+	}, [ctx.updateSearch, onValueChange]);
+	return /* @__PURE__ */ jsx("input", {
+		ref,
+		"data-command-input": "",
+		type: "text",
+		role: "combobox",
+		"aria-expanded": ctx.state.filteredCount > 0,
+		"aria-controls": ctx.listId,
+		"aria-activedescendant": ctx.state.activeId ?? void 0,
+		"aria-autocomplete": "list",
+		"aria-label": ctx.label,
+		id: ctx.inputId,
+		autoComplete: "off",
+		autoCorrect: "off",
+		spellCheck: false,
+		placeholder,
+		value: ctx.state.search,
+		onChange: handleChange,
+		...props
+	});
+}
+//#endregion
+//#region src/react/item.tsx
+function CommandItem({ ref, children, value, keywords, onSelect, disabled = false, shortcut, forceId, ...props }) {
+	const ctx = use(CommandContext);
+	if (!ctx) throw new Error("Command.Item must be used within a <Command> component");
+	const id = useRegisterItem(value, {
+		...keywords !== void 0 && { keywords },
+		...shortcut !== void 0 && { shortcut },
+		disabled,
+		...onSelect !== void 0 && { onSelect },
+		...forceId !== void 0 && { forceId }
+	});
+	const isActive = ctx.state.activeId === id;
+	const isFiltered = ctx.filteredIdSet.has(id);
+	const handleSelect = useCallback(() => {
+		if (!disabled) ctx.machine.send({
+			type: "ITEM_SELECT",
+			id
+		});
+	}, [
+		ctx.machine,
+		id,
+		disabled
+	]);
+	const activeIdRef = useRef(ctx.state.activeId);
+	activeIdRef.current = ctx.state.activeId;
+	const handlePointerMove = useCallback(() => {
+		if (!disabled && activeIdRef.current !== id) {
+			ctx.setOptimisticActiveId(id);
+			ctx.machine.send({
+				type: "ITEM_ACTIVATE",
+				id
+			});
+		}
+	}, [
+		ctx.machine,
+		ctx.setOptimisticActiveId,
+		id,
+		disabled
+	]);
+	if (!isFiltered) return null;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-command-item": "",
+		"data-active": isActive ? "" : void 0,
+		"data-disabled": disabled ? "" : void 0,
+		"data-value": value,
+		id,
+		role: "option",
+		"aria-selected": isActive,
+		"aria-disabled": disabled || void 0,
+		"aria-keyshortcuts": shortcut ?? void 0,
+		onClick: handleSelect,
+		onPointerMove: handlePointerMove,
+		...props,
+		children
+	});
+}
+//#endregion
+//#region src/react/hooks/use-virtualizer.ts
+function useVirtualizer(options) {
+	const { count, estimateSize, overscan = 8, scrollElement, enabled = true } = options;
+	const [scrollOffset, setScrollOffset] = useState(0);
+	const [containerHeight, setContainerHeight] = useState(0);
+	const measuredSizes = useRef(/* @__PURE__ */ new Map());
+	const [measureVersion, setMeasureVersion] = useState(0);
+	useEffect(() => {
+		if (!scrollElement || !enabled) return;
+		const observer = new ResizeObserver((entries) => {
+			const lastEntry = entries.at(-1);
+			if (lastEntry) setContainerHeight(lastEntry.contentRect.height);
+		});
+		observer.observe(scrollElement);
+		return () => {
+			observer.disconnect();
+		};
+	}, [scrollElement, enabled]);
+	useEffect(() => {
+		if (!scrollElement || !enabled) return;
+		const handleScroll = () => {
+			setScrollOffset(scrollElement.scrollTop);
+		};
+		scrollElement.addEventListener("scroll", handleScroll, { passive: true });
+		return () => {
+			scrollElement.removeEventListener("scroll", handleScroll);
+		};
+	}, [scrollElement, enabled]);
+	const getItemSize = useCallback((index) => measuredSizes.current.get(index) ?? estimateSize, [estimateSize]);
+	const totalSize = useMemo(() => {
+		if (!enabled) return 0;
+		const sizes = Iterator.from({ [Symbol.iterator]: function* () {
+			for (let i = 0; i < count; i++) yield getItemSize(i);
+		} }).toArray();
+		return Math.sumPrecise(sizes);
+	}, [
+		enabled,
+		count,
+		getItemSize,
+		measureVersion
+	]);
+	return {
+		virtualItems: useMemo(() => {
+			if (!enabled || containerHeight <= 0) return [];
+			let offset = 0;
+			let startIdx = 0;
+			while (startIdx < count && offset + getItemSize(startIdx) < scrollOffset) {
+				offset += getItemSize(startIdx);
+				startIdx++;
+			}
+			startIdx = Math.max(0, startIdx - overscan);
+			const offsetSizes = Iterator.from({ [Symbol.iterator]: function* () {
+				for (let i = 0; i < startIdx; i++) yield getItemSize(i);
+			} }).toArray();
+			offset = Math.sumPrecise(offsetSizes);
+			const items = [];
+			let currentOffset = offset;
+			const endOffset = scrollOffset + containerHeight;
+			for (let i = startIdx; i < count; i++) {
+				const size = getItemSize(i);
+				items.push({
+					index: i,
+					start: currentOffset,
+					size,
+					key: i
+				});
+				currentOffset += size;
+				if (currentOffset > endOffset + overscan * estimateSize) break;
+			}
+			return items;
+		}, [
+			enabled,
+			containerHeight,
+			count,
+			scrollOffset,
+			overscan,
+			estimateSize,
+			getItemSize
+		]),
+		totalSize,
+		scrollToIndex: useCallback((index) => {
+			if (!scrollElement || !enabled) return;
+			const clampedIndex = Math.min(index, count);
+			const sizes = Iterator.from({ [Symbol.iterator]: function* () {
+				for (let i = 0; i < clampedIndex; i++) yield getItemSize(i);
+			} }).toArray();
+			const targetOffset = Math.sumPrecise(sizes);
+			scrollElement.scrollTo({
+				top: targetOffset,
+				behavior: "smooth"
+			});
+		}, [
+			scrollElement,
+			enabled,
+			count,
+			getItemSize
+		]),
+		measureElement: useCallback((element) => {
+			if (!element || !enabled) return;
+			const index = Number(element.dataset.index);
+			if (Number.isNaN(index)) return;
+			const measure = () => {
+				const height = element.getBoundingClientRect().height;
+				if (height > 0 && measuredSizes.current.get(index) !== height) {
+					measuredSizes.current.set(index, height);
+					setMeasureVersion((v) => v + 1);
+				}
+			};
+			if ("requestIdleCallback" in globalThis) requestIdleCallback(measure);
+			else setTimeout(measure, 0);
+		}, [enabled])
+	};
+}
+//#endregion
+//#region src/react/list.tsx
+function CommandList({ ref, children, virtualize, estimateSize = 44, overscan = 8, style, ...props }) {
+	const ctx = use(CommandContext);
+	if (!ctx) throw new Error("Command.List must be used within a <Command> component");
+	const innerRef = useRef(null);
+	const scrollRef = useRef(null);
+	const [height, setHeight] = useState(0);
+	const shouldVirtualize = virtualize ?? ctx.state.filteredCount > 100;
+	useEffect(() => {
+		const element = innerRef.current;
+		if (!element) return;
+		const observer = new ResizeObserver((entries) => {
+			const lastEntry = entries.at(-1);
+			if (lastEntry) setHeight(lastEntry.contentRect.height);
+		});
+		observer.observe(element);
+		return () => {
+			observer.disconnect();
+		};
+	}, []);
+	const virtualizer = useVirtualizer({
+		count: ctx.state.filteredCount,
+		estimateSize,
+		overscan,
+		scrollElement: shouldVirtualize ? scrollRef.current : null,
+		enabled: shouldVirtualize
+	});
+	const prevActiveId = useRef(ctx.state.activeId);
+	useEffect(() => {
+		if (ctx.state.activeId && ctx.state.activeId !== prevActiveId.current) {
+			prevActiveId.current = ctx.state.activeId;
+			if (shouldVirtualize) {
+				const idx = ctx.state.filteredIds.indexOf(ctx.state.activeId);
+				if (idx >= 0) virtualizer.scrollToIndex(idx);
+			} else (scrollRef.current?.querySelector(`[id="${CSS.escape(ctx.state.activeId)}"]`))?.scrollIntoView({
+				block: "nearest",
+				behavior: "smooth"
+			});
+		}
+	}, [
+		ctx.state.activeId,
+		ctx.state.filteredIds,
+		shouldVirtualize,
+		virtualizer
+	]);
+	const mergedStyle = {
+		...style,
+		"--command-list-height": `${height.toFixed(1)}px`
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: useCallback((el) => {
+			scrollRef.current = el;
+			if (typeof ref === "function") ref(el);
+			else if (ref) ref.current = el;
+		}, [ref]),
+		"data-command-list": "",
+		role: "listbox",
+		"aria-label": ctx.label,
+		"aria-busy": ctx.state.loading,
+		id: ctx.listId,
+		style: mergedStyle,
+		...props,
+		children: [shouldVirtualize ? /* @__PURE__ */ jsxs("div", {
+			"data-command-list-virtual": "",
+			style: {
+				height: `${virtualizer.totalSize}px`,
+				position: "relative"
+			},
+			children: [virtualizer.virtualItems.map((vItem) => /* @__PURE__ */ jsx("div", {
+				"data-command-virtual-item": "",
+				"data-index": vItem.index,
+				ref: virtualizer.measureElement,
+				style: {
+					position: "absolute",
+					top: 0,
+					left: 0,
+					width: "100%",
+					translate: `0 ${vItem.start}px`
+				}
+			}, vItem.key)), children]
+		}) : /* @__PURE__ */ jsx("div", {
+			ref: innerRef,
+			"data-command-list-inner": "",
+			children
+		}), /* @__PURE__ */ jsxs("div", {
+			"aria-live": "polite",
+			"aria-atomic": true,
+			role: "status",
+			"data-command-aria-live": "",
+			className: "sr-only",
+			children: [
+				ctx.state.filteredCount,
+				" result",
+				ctx.state.filteredCount !== 1 ? "s" : "",
+				" available."
+			]
+		})]
+	});
+}
+//#endregion
+//#region src/react/loading.tsx
+function CommandLoading({ ref, children, loading: loadingOverride, ...props }) {
+	const ctx = use(CommandContext);
+	if (!ctx) throw new Error("Command.Loading must be used within a <Command> component");
+	if (!(loadingOverride ?? ctx.state.loading ?? ctx.isPending)) return null;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-command-loading": "",
+		"aria-busy": true,
+		"aria-live": "assertive",
+		role: "status",
+		...props,
+		children
+	});
+}
+//#endregion
+//#region src/react/page.tsx
+function CommandPage({ id, children }) {
+	const ctx = use(CommandContext);
+	if (!ctx) throw new Error("Command.Page must be used within a <Command> component");
+	if (ctx.state.page !== id) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"data-command-page": "",
+		"data-command-page-id": id,
+		children
+	});
+}
+//#endregion
+//#region src/react/separator.tsx
+function CommandSeparator({ ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-command-separator": "",
+		role: "separator",
+		...props
+	});
+}
+//#endregion
+//#region src/react/shortcut.tsx
+function CommandShortcut({ ref, shortcut, children, ...props }) {
+	const displayText = useMemo(() => shortcut ? formatShortcut(parseShortcut(shortcut)) : children, [shortcut, children]);
+	return /* @__PURE__ */ jsx("kbd", {
+		ref,
+		"data-command-shortcut": "",
+		...props,
+		children: displayText
+	});
+}
+//#endregion
+//#region src/react/command.tsx
+function CommandRoot({ children, className, label = "Command palette", ...machineOptions }) {
+	const rootId = useId();
+	const listId = `${rootId}-list`;
+	const inputId = `${rootId}-input`;
+	const rootRef = useRef(null);
+	const machineRef = useRef(null);
+	if (machineRef.current === null) machineRef.current = createCommandMachine(machineOptions);
+	const machine = machineRef.current;
+	const { state, isPending, updateSearch, setOptimisticActiveId, filteredIdSet, id } = useCommand(machine);
+	useEffect(() => {
+		return () => {
+			machineRef.current?.[Symbol.dispose]();
+			machineRef.current = null;
+		};
+	}, []);
+	const handleKeyDown = useCallback(createKeydownHandler(machine, () => machine.getState()), []);
+	useEffect(() => {
+		document.addEventListener("keydown", handleKeyDown);
+		return () => {
+			document.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [handleKeyDown]);
+	return /* @__PURE__ */ jsx(CommandContext, {
+		value: useMemo(() => ({
+			machine,
+			state,
+			isPending,
+			updateSearch,
+			setOptimisticActiveId,
+			filteredIdSet,
+			rootId: id,
+			listId,
+			inputId,
+			label
+		}), [
+			machine,
+			state,
+			isPending,
+			updateSearch,
+			setOptimisticActiveId,
+			filteredIdSet,
+			id,
+			listId,
+			inputId,
+			label
+		]),
+		children: /* @__PURE__ */ jsx("div", {
+			ref: rootRef,
+			"data-command-root": "",
+			"data-command-state": state.open ? "open" : "closed",
+			className,
+			role: "search",
+			"aria-label": label,
+			children
+		})
+	});
+}
+/** Compound component namespace */
+const Command = Object.assign(CommandRoot, {
+	Input: CommandInput,
+	List: CommandList,
+	Item: CommandItem,
+	Group: CommandGroup,
+	Empty: CommandEmpty,
+	Loading: CommandLoading,
+	Separator: CommandSeparator,
+	Dialog: CommandDialog,
+	Highlight: CommandHighlight,
+	Shortcut: CommandShortcut,
+	Badge: CommandBadge,
+	Page: CommandPage,
+	AsyncItems: CommandAsyncItems,
+	Activity: CommandActivity
+});
+//#endregion
+//#region src/react/error-boundary.tsx
+/** Initial state — no error captured */
+const INITIAL_STATE = { error: null };
+var CommandErrorBoundary = class extends Component {
+	state = INITIAL_STATE;
+	static getDerivedStateFromError(error) {
+		return { error };
+	}
+	componentDidCatch(error, errorInfo) {
+		this.props.onError?.(error, errorInfo);
+	}
+	render() {
+		if (this.state.error) {
+			const { fallback } = this.props;
+			if (typeof fallback === "function") return fallback(this.state.error);
+			if (fallback) return fallback;
+			return null;
+		}
+		return this.props.children;
+	}
+};
+//#endregion
+//#region src/react/hooks/use-command-state.ts
+function useCommandState(selector) {
+	const ctx = use(CommandContext);
+	if (!ctx) throw new Error("useCommandState must be used within a <Command> component");
+	const getSnapshot = useCallback(() => selector ? selector(ctx.machine.getState()) : ctx.machine.getState(), [ctx.machine, selector]);
+	return useSyncExternalStore(ctx.machine.subscribe, getSnapshot, getSnapshot);
+}
+//#endregion
+//#region src/react/hooks/use-devtools.ts
+/** Branded key for the global devtools instance map */
+const DEVTOOLS_KEY = "__CRIMSON_COMMAND_DEVTOOLS__";
+/**
+* Exposes command palette internals to browser devtools.
+* Only active in development — completely tree-shaken in production builds.
+*
+* @example
+* ```tsx
+* function MyPalette() {
+*   useCommandDevtools('main');
+*   return <Command>...</Command>;
+* }
+* ```
+*/
+function useCommandDevtools(label = "default") {
+	if (!__DEV__) return;
+	const ctx = use(CommandContext);
+	const stateRef = useRef(null);
+	useEffect(() => {
+		if (!ctx) return;
+		const update = () => {
+			const s = ctx.state;
+			const devState = {
+				registeredItems: s.filteredCount,
+				filteredItems: s.filteredIds.length,
+				searchQuery: s.search,
+				activeId: s.activeId,
+				page: s.page,
+				pageStack: s.pageStack,
+				open: s.open,
+				loading: s.loading
+			};
+			stateRef.current = devState;
+			const globals = globalThis;
+			if (!globals[DEVTOOLS_KEY]) globals[DEVTOOLS_KEY] = /* @__PURE__ */ new Map();
+			globals[DEVTOOLS_KEY].set(label, devState);
+			globalThis.dispatchEvent?.(new CustomEvent("crimson-command-devtools", { detail: {
+				label,
+				state: devState
+			} }));
+		};
+		const unsub = ctx.machine.subscribe(update);
+		update();
+		return () => {
+			unsub();
+			globalThis[DEVTOOLS_KEY]?.delete(label);
+		};
+	}, [ctx, label]);
+}
+//#endregion
+export { Command, CommandActivity, CommandAsyncItems, CommandBadge, CommandDialog, CommandEmpty, CommandErrorBoundary, CommandGroup, CommandHighlight, CommandInput, CommandItem, CommandList, CommandLoading, CommandPage, CommandSeparator, CommandShortcut, createKeydownHandler, useCommand, useCommandDevtools, useCommandState, useRegisterGroup, useRegisterItem, useVirtualizer };
+
+//# sourceMappingURL=index.mjs.map