modern-cmdk 1.2.3 → 1.4.0

package/dist/core/index.mjs

@@ -44,7 +44,7 @@ function storageKey(namespace) {
 }
 let idbModule;
 /**
-* IndexedDB-backed frecency storage using idb-keyval 6.2.2.
+* IndexedDB-backed frecency storage using idb-keyval.
 *
 * Persists frecency data across browser sessions. Implements both
 * `Disposable` and `AsyncDisposable` for use with `using` and `await using`.
@@ -170,7 +170,7 @@ var MemoryFrecencyStorage = class {
 	save(namespace, data) {
 		this.#store.set(namespace, data);
 	}
-	/** Serialize all stored data — Iterator Helpers pipeline (ES2026) */
+	/** Serialize all stored data — Iterator Helpers pipeline (ES2025) */
 	toJSON() {
 		return Object.fromEntries(this.#store.entries().map(([namespace, data]) => [namespace, { records: data.records.entries().toArray() }]));
 	}
@@ -181,7 +181,7 @@ var MemoryFrecencyStorage = class {
 // src/core/frecency/index.ts
 /** Shared empty bonus map — avoids allocation when no frecency records exist */
 const EMPTY_BONUS_MAP = /* @__PURE__ */ new Map();
-/** Pre-computed bucket boundaries in hours — avoids Duration.total() per call */
+/** Bucket boundaries as hour constants — no per-call unit conversion */
 const BUCKET_HOURS = {
 	hour: 1,
 	day: 24,
@@ -191,7 +191,7 @@ const BUCKET_HOURS = {
 /**
 * Computes a frecency bonus for an item based on usage frequency and recency.
 * Uses hour/day/week/month bucket boundaries with
-* configurable exponential decay weights per time bucket.
+* configurable step weights per recency bucket (hour/day/week/month/older).
 */
 function computeFrecencyBonus(history, now = Date.now(), config = DEFAULT_FRECENCY_DECAY) {
 	const hours = (now - history.lastUsed) / 36e5;
@@ -397,7 +397,7 @@ function formatShortcut(parsed) {
 /**
 * Manages keyboard shortcut bindings with global keydown listening.
 * Supports `using` for automatic cleanup of both individual bindings and the
-* global document listener. Detects conflicts via Map.groupBy (ES2026).
+* global document listener. Detects conflicts with the local mapGroupBy helper (core/utils/group-by.ts).
 */
 var KeyboardShortcutRegistry = class {
 	#bindings = /* @__PURE__ */ new Map();
@@ -855,7 +855,7 @@ if (isDev && typeof window !== "undefined") leakRegistry = new FinalizationRegis
 * Creates a search engine with pluggable scorer and incremental filtering.
 * When the query extends the previous one, only prior matches are re-scored.
 * Pre-caches lowercase at index time — zero toLowerCase() calls during search.
-* Uses Iterator Helpers (ES2026) for result pipelines and Set.difference for pruning.
+* Uses Iterator Helpers (ES2025) for result pipelines.
 */
 function createSearchEngine(options) {
 	const customScorer = options?.scorer;
@@ -964,9 +964,10 @@ var TypedEmitter = class {
 // src/core/utils/scheduler.ts
 /** Whether we're in a browser environment with rAF available */
 const hasRAF = typeof requestAnimationFrame === "function";
-/** Feature detection for cutting-edge scheduling APIs */
+/** Feature detection for cutting-edge scheduling APIs, read through globalThis: typeof guards only a bare
+* identifier, so `typeof navigator?.scheduling` would throw where navigator is undeclared (runtimes without one). */
 const canYield = typeof globalThis.scheduler?.yield === "function";
-const hasInputPending = typeof navigator?.scheduling?.isInputPending === "function";
+const hasInputPending = typeof globalThis.navigator?.scheduling?.isInputPending === "function";
 /**
 * Creates a batched update scheduler. Coalesces rapid state updates into a single
 * execution pass using rAF (browser) or queueMicrotask (Node.js).

package/dist/react/chunk-dialog.mjs

@@ -0,0 +1,237 @@
+'use client';
+import { createContext, use, useCallback, useEffect, useId, useMemo, useOptimistic, useRef, useSyncExternalStore, useTransition } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createCommandMachine } from "modern-cmdk";
+import { Dialog } from "radix-ui";
+// src/react/context.ts
+const CommandStableContext = createContext(null);
+CommandStableContext.displayName = "CommandStableContext";
+const CommandStateContext = createContext(null);
+CommandStateContext.displayName = "CommandStateContext";
+/** Consume stable context with a descriptive error — replaces 3-line boilerplate in every component */
+function useStableContext(component) {
+	const ctx = use(CommandStableContext);
+	if (!ctx) throw new Error(`${component} must be used within a <Command> component`);
+	return ctx;
+}
+/** Consume state context with a descriptive error — replaces 3-line boilerplate in every component */
+function useStateContext(component) {
+	const ctx = use(CommandStateContext);
+	if (!ctx) throw new Error(`${component} must be used within a <Command> component`);
+	return ctx;
+}
+const CommandGroupContext = createContext(null);
+CommandGroupContext.displayName = "CommandGroupContext";
+/** Context for the status container rendered outside the listbox — used by Command.Empty */
+const CommandListStatusContext = createContext(null);
+CommandListStatusContext.displayName = "CommandListStatusContext";
+// src/react/hooks/use-command.ts
+/** Core hook that binds a CommandMachine to React via useSyncExternalStore, useOptimistic, and a transition for optimistic active-item updates. */
+function useCommand(machine) {
+	const id = useId();
+	const [isPending, startTransition] = useTransition();
+	const state = useSyncExternalStore(machine.subscribe, machine.getState, machine.getState);
+	const filteredIdSet = useMemo(() => machine.getFilteredIdSet(), [state.filteredIds, machine]);
+	const [optimisticActiveId, rawSetOptimisticActiveId] = useOptimistic(state.activeId);
+	const setOptimisticActiveId = useCallback((id) => {
+		startTransition(() => {
+			rawSetOptimisticActiveId(id);
+		});
+	}, [rawSetOptimisticActiveId]);
+	const updateSearch = useCallback((query) => {
+		machine.send({
+			type: "SEARCH_CHANGE",
+			query
+		});
+	}, [machine]);
+	return {
+		state: optimisticActiveId !== state.activeId ? {
+			...state,
+			activeId: optimisticActiveId
+		} : state,
+		isPending,
+		updateSearch,
+		setOptimisticActiveId,
+		filteredIdSet,
+		id
+	};
+}
+// 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" });
+		}
+	};
+}
+// src/react/hooks/use-command-setup.ts
+/**
+* Shared setup for Command and Command.Dialog — creates machine once,
+* subscribes via useSyncExternalStore, memoizes context values, and
+* registers disposal on unmount.
+*
+* @param machineFactory - Called exactly once (first render) to create the machine.
+*   Subsequent renders skip it via ref guard.
+* @param label - Accessible label for the command palette (included in stable context).
+*/
+function useCommandSetup(machineFactory, label) {
+	const machineRef = useRef(null);
+	if (machineRef.current === null) machineRef.current = machineFactory();
+	const machine = machineRef.current;
+	const { state, isPending, updateSearch, setOptimisticActiveId, filteredIdSet, id } = useCommand(machine);
+	const listId = `${id}-list`;
+	const inputId = `${id}-input`;
+	useEffect(() => {
+		return () => {
+			machineRef.current?.[Symbol.dispose]();
+			machineRef.current = null;
+		};
+	}, []);
+	return {
+		machine,
+		state,
+		isPending,
+		listId,
+		inputId,
+		handleKeyDown: useMemo(() => createKeydownHandler(machine, () => machine.getState()), [machine]),
+		stableContextValue: useMemo(() => ({
+			machine,
+			rootId: id,
+			listId,
+			inputId,
+			label,
+			updateSearch,
+			setOptimisticActiveId
+		}), [
+			machine,
+			id,
+			listId,
+			inputId,
+			label,
+			updateSearch,
+			setOptimisticActiveId
+		]),
+		stateContextValue: useMemo(() => ({
+			state,
+			isPending,
+			filteredIdSet,
+			visibleIdSet: null,
+			virtualPositionMap: null
+		}), [
+			state,
+			isPending,
+			filteredIdSet
+		])
+	};
+}
+// src/react/dialog.tsx
+/** Dialog variant that wraps the command palette in a Radix UI Dialog with focus trap and overlay. */
+function CommandDialog({ children, className, overlayClassName, contentClassName, label = "Command palette", description = "Type a command or search...", open: controlledOpen, onOpenChange, container, ...machineOptions }) {
+	const onOpenChangeRef = useRef(onOpenChange);
+	onOpenChangeRef.current = onOpenChange;
+	const { machine, state, handleKeyDown, stableContextValue, stateContextValue, inputId } = useCommandSetup(() => createCommandMachine({
+		...machineOptions,
+		open: controlledOpen ?? false,
+		onOpenChange: (open) => {
+			onOpenChangeRef.current?.(open);
+		}
+	}), label);
+	useEffect(() => {
+		if (!state.open) return;
+		document.addEventListener("keydown", handleKeyDown);
+		return () => {
+			document.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [handleKeyDown, state.open]);
+	useEffect(() => {
+		if (controlledOpen !== void 0) machine.send({ type: controlledOpen ? "OPEN" : "CLOSE" });
+	}, [controlledOpen, machine]);
+	const handleOpenAutoFocus = useCallback((e) => {
+		e.preventDefault();
+		document.getElementById(inputId)?.focus();
+	}, [inputId]);
+	const handleRadixOpenChange = useCallback((open) => {
+		machine.send({ type: open ? "OPEN" : "CLOSE" });
+	}, [machine]);
+	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: handleOpenAutoFocus,
+				children: [
+					/* @__PURE__ */ jsx(Dialog.Title, {
+						className: "sr-only",
+						children: label
+					}),
+					/* @__PURE__ */ jsx(Dialog.Description, {
+						className: "sr-only",
+						children: description
+					}),
+					/* @__PURE__ */ jsx(CommandStableContext, {
+						value: stableContextValue,
+						children: /* @__PURE__ */ jsx(CommandStateContext, {
+							value: stateContextValue,
+							children: /* @__PURE__ */ jsx("div", {
+								"data-command-dialog-content": "",
+								className: contentClassName,
+								children: /* @__PURE__ */ jsx("div", {
+									"data-command-root": "",
+									role: "search",
+									"aria-label": label,
+									children
+								})
+							})
+						})
+					})
+				]
+			})]
+		})
+	});
+}
+export { CommandGroupContext as a, CommandStateContext as c, useCommand as i, useStableContext as l, useCommandSetup as n, CommandListStatusContext as o, createKeydownHandler as r, CommandStableContext as s, CommandDialog as t, useStateContext as u };

package/dist/react/dialog.d.mts

@@ -0,0 +1,18 @@
+
+import { ReactNode } from "react";
+import { CommandMachineOptions } from "modern-cmdk";
+export interface CommandDialogProps extends CommandMachineOptions {
+  readonly children?: ReactNode;
+  readonly className?: string;
+  readonly overlayClassName?: string;
+  readonly contentClassName?: string;
+  readonly label?: string;
+  readonly open?: boolean;
+  readonly onOpenChange?: (open: boolean) => void;
+  /** Accessible description for screen readers (default: 'Type a command or search...') */
+  readonly description?: string;
+  /** Container element for the portal (default: document.body) */
+  readonly container?: HTMLElement | null;
+}
+/** Dialog variant that wraps the command palette in a Radix UI Dialog with focus trap and overlay. */
+export declare function CommandDialog({ children, className, overlayClassName, contentClassName, label, description, open: controlledOpen, onOpenChange, container, ...machineOptions }: CommandDialogProps): ReactNode;

package/dist/react/dialog.mjs

@@ -0,0 +1,3 @@
+'use client';
+"use client";
+export { t as CommandDialog } from "./chunk-dialog.mjs";