modern-cmdk 1.1.1 → 1.1.4

package/dist/react/index.mjs

@@ -80,14 +80,32 @@ function CommandBadge({ ref, children, ...props }) {
 	});
 }
 //#endregion
+//#region src/core/utils/string-wellformed.ts
+/**
+* Regex matching lone surrogates (unpaired high or low surrogates).
+* A lone high surrogate (U+D800–U+DBFF) not followed by a low surrogate,
+* or a lone low surrogate (U+DC00–U+DFFF) not preceded by a high surrogate.
+*/
+const LONE_SURROGATE_RE = /[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?<![\uD800-\uDBFF])[\uDC00-\uDFFF]/g;
+/** Unicode replacement character used to replace lone surrogates. */
+const REPLACEMENT_CHAR = "�";
+/**
+* Ensures a string is well-formed Unicode by replacing lone surrogates
+* with the Unicode replacement character (U+FFFD).
+* Cross-browser replacement for `str.isWellFormed() ? str : str.toWellFormed()`.
+*/
+function ensureWellFormed(str) {
+	return str.replace(LONE_SURROGATE_RE, REPLACEMENT_CHAR);
+}
+//#endregion
 //#region src/core/types.ts
-/** Create a branded {@link ItemId} from a plain string. Ensures well-formed Unicode (ES2026). */
+/** Create a branded {@link ItemId} from a plain string. Ensures well-formed Unicode. */
 function itemId(id) {
-	return id.isWellFormed() ? id : id.toWellFormed();
+	return ensureWellFormed(id);
 }
-/** Create a branded {@link GroupId} from a plain string. Ensures well-formed Unicode (ES2026). */
+/** Create a branded {@link GroupId} from a plain string. Ensures well-formed Unicode. */
 function groupId(id) {
-	return id.isWellFormed() ? id : id.toWellFormed();
+	return ensureWellFormed(id);
 }
 /** Default frecency decay configuration */
 const DEFAULT_FRECENCY_DECAY = {
@@ -109,7 +127,7 @@ function createInitialState(options) {
 		page: "root",
 		pageStack: [],
 		open: options?.open ?? false,
-		lastUpdated: Temporal.Now.instant()
+		lastUpdated: Date.now()
 	};
 }
 //#endregion
@@ -148,11 +166,11 @@ const BUCKET_HOURS = {
 };
 /**
 * Computes a frecency bonus for an item based on usage frequency and recency.
-* Uses Temporal.Duration bucket boundaries (hour/day/week/month) with
+* Uses hour/day/week/month bucket boundaries with
 * configurable exponential decay weights per time bucket.
 */
-function computeFrecencyBonus(history, now = Temporal.Now.instant(), config = DEFAULT_FRECENCY_DECAY) {
-	const hours = now.since(history.lastUsed).total("hours");
+function computeFrecencyBonus(history, now = Date.now(), config = DEFAULT_FRECENCY_DECAY) {
+	const hours = (now - history.lastUsed) / 36e5;
 	const { hourWeight = 4, dayWeight = 2, weekWeight = 1.5, monthWeight = 1, olderWeight = .5 } = config;
 	const recencyWeight = hours < BUCKET_HOURS.hour ? hourWeight : hours < BUCKET_HOURS.day ? dayWeight : hours < BUCKET_HOURS.week ? weekWeight : hours < BUCKET_HOURS.month ? monthWeight : olderWeight;
 	return history.frequency * recencyWeight;
@@ -160,7 +178,7 @@ function computeFrecencyBonus(history, now = Temporal.Now.instant(), config = DE
 /**
 * Stateful frecency engine that tracks item selection history and provides
 * ranking boosts for search results. Supports pluggable storage backends
-* and automatic flush on dispose. Uses Temporal.Now.instant() for timestamps.
+* and automatic flush on dispose. Uses Date.now() for timestamps.
 */
 var FrecencyEngine = class {
 	#storage;
@@ -180,7 +198,7 @@ var FrecencyEngine = class {
 	}
 	/** Record a selection event for an item */
 	recordSelection(itemId) {
-		const now = Temporal.Now.instant();
+		const now = Date.now();
 		const updated = {
 			frequency: (this.#data.records.get(itemId)?.frequency ?? 0) + 1,
 			lastUsed: now
@@ -195,7 +213,7 @@ var FrecencyEngine = class {
 		return computeFrecencyBonus(record, now, this.#config);
 	}
 	/** Get all frecency bonuses as a map — for...of for hot ranking path (no closure overhead) */
-	getAllBonuses(now = Temporal.Now.instant()) {
+	getAllBonuses(now = Date.now()) {
 		if (this.#data.records.size === 0) return EMPTY_BONUS_MAP;
 		const bonuses = /* @__PURE__ */ new Map();
 		for (const [id, record] of this.#data.records) bonuses.set(id, computeFrecencyBonus(record, now, this.#config));
@@ -231,13 +249,29 @@ var FrecencyEngine = class {
 		this.#storage[Symbol.dispose]();
 	}
 	[Symbol.dispose]() {
-		if (this.#dirty) Promise.try(() => this.#storage.save(this.#namespace, this.#data)).catch((err) => {
+		if (this.#dirty) Promise.resolve().then(() => this.#storage.save(this.#namespace, this.#data)).catch((err) => {
 			console.warn("[modern-cmdk] FrecencyEngine dispose flush failed:", err);
 		});
 		this.#storage[Symbol.dispose]();
 	}
 };
 //#endregion
+//#region src/core/utils/group-by.ts
+/**
+* Groups items from an iterable into a Map keyed by the result of `keyFn`.
+* Cross-browser replacement for `Map.groupBy()`.
+*/
+function mapGroupBy(items, keyFn) {
+	const map = /* @__PURE__ */ new Map();
+	for (const item of items) {
+		const key = keyFn(item);
+		const group = map.get(key);
+		if (group) group.push(item);
+		else map.set(key, [item]);
+	}
+	return map;
+}
+//#endregion
 //#region src/core/keyboard/matcher.ts
 /**
 * Tests whether a KeyboardEvent exactly matches a ParsedShortcut,
@@ -252,11 +286,11 @@ function matchesShortcut(event, shortcut) {
 }
 /**
 * Detects conflicting shortcut bindings by grouping on their normalized form
-* via Map.groupBy (ES2026). Returns only groups with two or more colliding shortcuts.
-* Map.groupBy returns a Map directly — no Object.entries conversion needed.
+* via mapGroupBy helper. Returns only groups with two or more colliding shortcuts.
+* mapGroupBy returns a Map directly — no Object.entries conversion needed.
 */
 function detectConflicts(shortcuts) {
-	const grouped = Map.groupBy(shortcuts, (s) => s.normalized);
+	const grouped = mapGroupBy(shortcuts, (s) => s.normalized);
 	return new Map(grouped.entries().filter(([, group]) => group.length > 1));
 }
 //#endregion
@@ -277,10 +311,10 @@ const MODIFIER_MAP = {
 };
 /**
 * Parse a shortcut string like "Mod+Shift+K" into a structured ParsedShortcut.
-* Uses String.isWellFormed() (ES2026) to ensure valid Unicode input.
+* Ensures valid Unicode input via ensureWellFormed helper.
 */
 function parseShortcut(shortcut) {
-	const safeShortcut = shortcut.isWellFormed() ? shortcut : shortcut.toWellFormed();
+	const safeShortcut = ensureWellFormed(shortcut);
 	const parts = safeShortcut.split("+").map((p) => p.trim().toLowerCase());
 	let meta = false;
 	let ctrl = false;
@@ -408,10 +442,54 @@ var KeyboardShortcutRegistry = class {
 	}
 };
 //#endregion
+//#region src/core/utils/set-ops.ts
+/** Returns a new Set containing elements present in both `a` and `b`. */
+function setIntersection(a, b) {
+	const result = /* @__PURE__ */ new Set();
+	const [smaller, larger] = a.size <= b.size ? [a, b] : [b, a];
+	for (const item of smaller) if (larger.has(item)) result.add(item);
+	return result;
+}
+/** Returns a new Set containing elements in `a` but not in `b`. */
+function setDifference(a, b) {
+	const result = /* @__PURE__ */ new Set();
+	for (const item of a) if (!b.has(item)) result.add(item);
+	return result;
+}
+/** Returns a new Set containing all elements from both `a` and `b`. */
+function setUnion(a, b) {
+	const result = new Set(a);
+	for (const item of b) result.add(item);
+	return result;
+}
+/** Returns `true` if every element in `a` is also in `b`. */
+function setIsSubsetOf(a, b) {
+	if (a.size > b.size) return false;
+	for (const item of a) if (!b.has(item)) return false;
+	return true;
+}
+/** Returns `true` if every element in `b` is also in `a`. */
+function setIsSupersetOf(a, b) {
+	return setIsSubsetOf(b, a);
+}
+/** Returns `true` if `a` and `b` share no elements. */
+function setIsDisjointFrom(a, b) {
+	const [smaller, larger] = a.size <= b.size ? [a, b] : [b, a];
+	for (const item of smaller) if (larger.has(item)) return false;
+	return true;
+}
+/** Returns a new Set containing elements in either `a` or `b` but not both. */
+function setSymmetricDifference(a, b) {
+	const result = new Set(a);
+	for (const item of b) if (result.has(item)) result.delete(item);
+	else result.add(item);
+	return result;
+}
+//#endregion
 //#region src/core/registry.ts
 /**
 * Manages registration and lookup of command items and groups.
-* Uses ES2026 Set methods (union/intersection/difference) for efficient ID operations.
+* Uses set operation helpers (union/intersection/difference) for efficient ID operations.
 * All registration methods return Disposable for automatic cleanup via `using`.
 */
 var CommandRegistry = class {
@@ -463,10 +541,10 @@ var CommandRegistry = class {
 		if (idx !== -1) this.#itemOrder = this.#itemOrder.toSpliced(idx, 1);
 		this.#invalidateCache();
 	}
-	/** Bulk unregister using Set.difference (ES2026) — for...of for hot path */
+	/** Bulk unregister — for...of for hot path */
 	unregisterItems(ids) {
 		for (const id of ids) this.#items.delete(id);
-		this.#itemOrderSet = this.#itemOrderSet.difference(ids);
+		this.#itemOrderSet = setDifference(this.#itemOrderSet, ids);
 		this.#itemOrder = this.#itemOrder.filter((id) => !ids.has(id));
 		this.#invalidateCache();
 	}
@@ -504,10 +582,9 @@ var CommandRegistry = class {
 		this.#cachedGroups = this.#groups.values().toArray().toSorted((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
 		return this.#cachedGroups;
 	}
-	/** Get items grouped by groupId using Map.groupBy (ES2026) — direct Map, no Object.entries conversion */
+	/** Get items grouped by groupId — direct Map, no Object.entries conversion */
 	getGroupedItems() {
-		const items = this.getItems();
-		const grouped = Map.groupBy(items, (item) => item.groupId ?? "__ungrouped");
+		const grouped = mapGroupBy(this.getItems(), (item) => item.groupId ?? "__ungrouped");
 		const result = /* @__PURE__ */ new Map();
 		for (const group of this.getGroups()) {
 			const groupItems = grouped.get(group.id);
@@ -521,33 +598,33 @@ var CommandRegistry = class {
 	getItemIds() {
 		return this.#itemOrderSet;
 	}
-	/** Find intersection of registered items with a candidate set (ES2026 Set.intersection) */
+	/** Find intersection of registered items with a candidate set */
 	intersectWith(candidateIds) {
-		return this.#itemOrderSet.intersection(candidateIds);
+		return setIntersection(this.#itemOrderSet, candidateIds);
 	}
-	/** Find items registered but not in a given set (ES2026 Set.difference) */
+	/** Find items registered but not in a given set */
 	differenceFrom(otherIds) {
-		return this.#itemOrderSet.difference(otherIds);
+		return setDifference(this.#itemOrderSet, otherIds);
 	}
-	/** Union of registered IDs with another set (ES2026 Set.union) */
+	/** Union of registered IDs with another set */
 	unionWith(otherIds) {
-		return this.#itemOrderSet.union(otherIds);
+		return setUnion(this.#itemOrderSet, otherIds);
 	}
-	/** Check if registered items are a subset of the given set (ES2026 Set.isSubsetOf) */
+	/** Check if registered items are a subset of the given set */
 	isSubsetOf(otherIds) {
-		return this.#itemOrderSet.isSubsetOf(otherIds);
+		return setIsSubsetOf(this.#itemOrderSet, otherIds);
 	}
-	/** Check if registered items are a superset of the given set (ES2026 Set.isSupersetOf) */
+	/** Check if registered items are a superset of the given set */
 	isSupersetOf(otherIds) {
-		return this.#itemOrderSet.isSupersetOf(otherIds);
+		return setIsSupersetOf(this.#itemOrderSet, otherIds);
 	}
-	/** Check if registered items share no IDs with the given set (ES2026 Set.isDisjointFrom) */
+	/** Check if registered items share no IDs with the given set */
 	isDisjointFrom(otherIds) {
-		return this.#itemOrderSet.isDisjointFrom(otherIds);
+		return setIsDisjointFrom(this.#itemOrderSet, otherIds);
 	}
-	/** Symmetric difference between registered IDs and another set (ES2026 Set.symmetricDifference) */
+	/** Symmetric difference between registered IDs and another set */
 	symmetricDifferenceWith(otherIds) {
-		return this.#itemOrderSet.symmetricDifference(otherIds);
+		return setSymmetricDifference(this.#itemOrderSet, otherIds);
 	}
 	/** Total number of registered items */
 	get size() {
@@ -753,7 +830,7 @@ function createSearchEngine(options) {
 		},
 		remove(ids) {
 			for (const id of ids) indexedEntries.delete(id);
-			previousResults = previousResults.difference(ids);
+			previousResults = setDifference(previousResults, ids);
 		},
 		clear() {
 			indexedEntries.clear();
@@ -937,7 +1014,7 @@ function createCommandMachine(options = {}) {
 		}
 		filteredIdSet = new Set(filteredIds);
 		filteredIdIndex = new Map(filteredIds.entries().map(([i, id]) => [id, i]));
-		const groupedIds = Map.groupBy(filteredIds, (id) => {
+		const groupedIds = mapGroupBy(filteredIds, (id) => {
 			return registry.getItem(id)?.groupId ?? "__ungrouped";
 		});
 		const activeId = state.activeId && filteredIdSet.has(state.activeId) ? state.activeId : filteredIds[0] ?? null;
@@ -948,7 +1025,7 @@ function createCommandMachine(options = {}) {
 			groupedIds,
 			filteredCount: filteredIds.length,
 			activeId,
-			lastUpdated: Temporal.Now.instant()
+			lastUpdated: Date.now()
 		});
 	}
 	function navigate(direction) {
@@ -960,7 +1037,7 @@ function createCommandMachine(options = {}) {
 				setState({
 					...state,
 					activeId: newActiveId,
-					lastUpdated: Temporal.Now.instant()
+					lastUpdated: Date.now()
 				});
 				options.onActiveChange?.(newActiveId);
 			}
@@ -972,7 +1049,7 @@ function createCommandMachine(options = {}) {
 				setState({
 					...state,
 					activeId: newActiveId,
-					lastUpdated: Temporal.Now.instant()
+					lastUpdated: Date.now()
 				});
 				options.onActiveChange?.(newActiveId);
 			}
@@ -990,7 +1067,7 @@ function createCommandMachine(options = {}) {
 			setState({
 				...state,
 				activeId: newActiveId,
-				lastUpdated: Temporal.Now.instant()
+				lastUpdated: Date.now()
 			});
 			options.onActiveChange?.(newActiveId);
 		}
@@ -1016,7 +1093,7 @@ function createCommandMachine(options = {}) {
 					setState({
 						...state,
 						activeId: event.id,
-						lastUpdated: Temporal.Now.instant()
+						lastUpdated: Date.now()
 					});
 					options.onActiveChange?.(event.id);
 				}
@@ -1029,7 +1106,7 @@ function createCommandMachine(options = {}) {
 					...state,
 					page: event.page,
 					pageStack: [...state.pageStack, state.page],
-					lastUpdated: Temporal.Now.instant()
+					lastUpdated: Date.now()
 				});
 				break;
 			case "PAGE_POP": {
@@ -1038,7 +1115,7 @@ function createCommandMachine(options = {}) {
 					...state,
 					page: prevPage,
 					pageStack: state.pageStack.toSpliced(-1, 1),
-					lastUpdated: Temporal.Now.instant()
+					lastUpdated: Date.now()
 				});
 				break;
 			}
@@ -1046,7 +1123,7 @@ function createCommandMachine(options = {}) {
 				setState({
 					...state,
 					open: true,
-					lastUpdated: Temporal.Now.instant()
+					lastUpdated: Date.now()
 				});
 				emitter.emit("openChange", true);
 				options.onOpenChange?.(true);
@@ -1055,7 +1132,7 @@ function createCommandMachine(options = {}) {
 				setState({
 					...state,
 					open: false,
-					lastUpdated: Temporal.Now.instant()
+					lastUpdated: Date.now()
 				});
 				emitter.emit("openChange", false);
 				options.onOpenChange?.(false);
@@ -1065,7 +1142,7 @@ function createCommandMachine(options = {}) {
 				setState({
 					...state,
 					open: newOpen,
-					lastUpdated: Temporal.Now.instant()
+					lastUpdated: Date.now()
 				});
 				emitter.emit("openChange", newOpen);
 				options.onOpenChange?.(newOpen);
@@ -1269,7 +1346,9 @@ function useCommandSetup(machineFactory, label) {
 		stateContextValue: useMemo(() => ({
 			state,
 			isPending,
-			filteredIdSet
+			filteredIdSet,
+			visibleIdSet: null,
+			virtualPositionMap: null
 		}), [
 			state,
 			isPending,
@@ -1562,6 +1641,7 @@ function CommandItem({ ref, children, value, keywords, onSelect, disabled = fals
 	});
 	const isActive = stateCtx.state.activeId === id;
 	const isFiltered = stateCtx.filteredIdSet.has(id);
+	const isVisible = stateCtx.visibleIdSet === null || stateCtx.visibleIdSet.has(id);
 	const handleSelect = useCallback(() => {
 		if (!disabled) stable.machine.send({
 			type: "ITEM_SELECT",
@@ -1588,7 +1668,15 @@ function CommandItem({ ref, children, value, keywords, onSelect, disabled = fals
 		id,
 		disabled
 	]);
-	if (!isFiltered) return null;
+	if (!isFiltered || !isVisible) return null;
+	const virtualStart = stateCtx.virtualPositionMap?.get(id);
+	const virtualStyle = virtualStart !== void 0 ? {
+		position: "absolute",
+		top: 0,
+		left: 0,
+		width: "100%",
+		translate: `0 ${virtualStart}px`
+	} : void 0;
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		"data-command-item": "",
@@ -1602,6 +1690,7 @@ function CommandItem({ ref, children, value, keywords, onSelect, disabled = fals
 		"aria-keyshortcuts": shortcut ?? void 0,
 		onClick: handleSelect,
 		onPointerMove: handlePointerMove,
+		style: virtualStyle,
 		...props,
 		children
 	});
@@ -1634,9 +1723,9 @@ function useVirtualizer(options) {
 	const getItemSize = useCallback((index) => measuredSizes.current.get(index) ?? estimateSize, [estimateSize]);
 	const totalSize = useMemo(() => {
 		if (!enabled) return 0;
-		const sizes = [];
-		for (let i = 0; i < count; i++) sizes.push(getItemSize(i));
-		return Math.sumPrecise(sizes);
+		let total = 0;
+		for (let i = 0; i < count; i++) total += getItemSize(i);
+		return total;
 	}, [
 		enabled,
 		count,
@@ -1653,9 +1742,8 @@ function useVirtualizer(options) {
 				startIdx++;
 			}
 			startIdx = Math.max(0, startIdx - overscan);
-			const offsetSizes = [];
-			for (let i = 0; i < startIdx; i++) offsetSizes.push(getItemSize(i));
-			offset = Math.sumPrecise(offsetSizes);
+			offset = 0;
+			for (let i = 0; i < startIdx; i++) offset += getItemSize(i);
 			const items = [];
 			let currentOffset = offset;
 			const endOffset = scrollOffset + containerHeight;
@@ -1684,12 +1772,11 @@ function useVirtualizer(options) {
 		scrollToIndex: useCallback((index) => {
 			if (!scrollElement || !enabled) return;
 			const clampedIndex = Math.min(index, count - 1);
-			const sizes = [];
-			for (let i = 0; i < clampedIndex; i++) sizes.push(getItemSize(i));
-			const targetOffset = Math.sumPrecise(sizes);
+			let targetOffset = 0;
+			for (let i = 0; i < clampedIndex; i++) targetOffset += getItemSize(i);
 			scrollElement.scrollTo({
 				top: targetOffset,
-				behavior: "smooth"
+				behavior: "instant"
 			});
 		}, [
 			scrollElement,
@@ -1715,21 +1802,18 @@ function useVirtualizer(options) {
 }
 //#endregion
 //#region src/react/list.tsx
-/** Base style for virtual items — hoisted to avoid allocation per item per render */
-const VIRTUAL_ITEM_BASE_STYLE = {
-	position: "absolute",
-	top: 0,
-	left: 0,
-	width: "100%"
-};
 /** Scrollable list container with auto-virtualization and aria-live announcements. */
 function CommandList({ ref, children, virtualize, estimateSize = 44, overscan = 8, announceResults, style, ...props }) {
 	const stable = useStableContext("Command.List");
 	const stateCtx = useStateContext("Command.List");
 	const innerRef = useRef(null);
 	const scrollRef = useRef(null);
+	const [scrollElement, setScrollElement] = useState(null);
 	const [height, setHeight] = useState(0);
-	const shouldVirtualize = virtualize ?? stateCtx.state.filteredCount > 100;
+	const shouldVirtualizeRef = useRef(false);
+	if (virtualize ?? stateCtx.state.filteredCount > 100) shouldVirtualizeRef.current = true;
+	else if (stateCtx.state.filteredCount <= 50) shouldVirtualizeRef.current = false;
+	const shouldVirtualize = virtualize ?? shouldVirtualizeRef.current;
 	useEffect(() => {
 		const element = innerRef.current;
 		if (!element) return;
@@ -1746,7 +1830,7 @@ function CommandList({ ref, children, virtualize, estimateSize = 44, overscan =
 		count: stateCtx.state.filteredCount,
 		estimateSize,
 		overscan,
-		scrollElement: shouldVirtualize ? scrollRef.current : null,
+		scrollElement: shouldVirtualize ? scrollElement : null,
 		enabled: shouldVirtualize
 	});
 	const prevActiveId = useRef(stateCtx.state.activeId);
@@ -1771,10 +1855,44 @@ function CommandList({ ref, children, virtualize, estimateSize = 44, overscan =
 		...style,
 		"--command-list-height": `${height.toFixed(1)}px`
 	}), [style, height]);
+	const filteredIds = stateCtx.state.filteredIds;
+	const { visibleIdSet, virtualPositionMap } = useMemo(() => {
+		if (!shouldVirtualize) return {
+			visibleIdSet: null,
+			virtualPositionMap: null
+		};
+		const idSet = /* @__PURE__ */ new Set();
+		const posMap = /* @__PURE__ */ new Map();
+		for (const vItem of virtualizer.virtualItems) {
+			const id = filteredIds[vItem.index];
+			if (id !== void 0) {
+				idSet.add(id);
+				posMap.set(id, vItem.start);
+			}
+		}
+		return {
+			visibleIdSet: idSet,
+			virtualPositionMap: posMap
+		};
+	}, [
+		shouldVirtualize,
+		virtualizer.virtualItems,
+		filteredIds
+	]);
+	const virtualizedStateCtx = useMemo(() => ({
+		...stateCtx,
+		visibleIdSet,
+		virtualPositionMap
+	}), [
+		stateCtx,
+		visibleIdSet,
+		virtualPositionMap
+	]);
 	const externalRefRef = useRef(ref);
 	externalRefRef.current = ref;
 	const setScrollRef = useCallback((el) => {
 		scrollRef.current = el;
+		setScrollElement(el);
 		const externalRef = externalRefRef.current;
 		if (typeof externalRef === "function") externalRef(el);
 		else if (externalRef) externalRef.current = el;
@@ -1792,21 +1910,16 @@ function CommandList({ ref, children, virtualize, estimateSize = 44, overscan =
 				id: stable.listId,
 				style: mergedStyle,
 				...props,
-				children: shouldVirtualize ? /* @__PURE__ */ jsxs("div", {
+				children: shouldVirtualize ? /* @__PURE__ */ jsx("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: {
-							...VIRTUAL_ITEM_BASE_STYLE,
-							translate: `0 ${vItem.start}px`
-						}
-					}, vItem.key)), children]
+					children: /* @__PURE__ */ jsx(CommandStateContext, {
+						value: virtualizedStateCtx,
+						children
+					})
 				}) : /* @__PURE__ */ jsx("div", {
 					ref: innerRef,
 					"data-command-list-inner": "",

package/dist/react/styles.css

@@ -430,7 +430,7 @@
 
   [data-command-scroll-indicator] {
     block-size: 2px;
-    transform-origin: left center;
+    transform-origin: inline-start center;
     scale: 0 1;
     animation: scroll-progress linear both;
     animation-timeline: --list-scroll;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "modern-cmdk",
-  "version": "1.1.1",
+  "version": "1.1.4",
   "type": "module",
   "description": "The definitive command palette engine for the modern web",
   "license": "MIT",