modern-cmdk 1.2.2 → 1.3.0

package/dist/react/index.mjs

@@ -4,10 +4,10 @@ import { Component, Suspense, createContext, use, useCallback, useEffect, useId,
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Dialog } from "radix-ui";
 import { createPortal } from "react-dom";
-//#region src/react/activity.tsx
+// src/react/activity.tsx
 const ActivityComponent = "Activity" in React ? React.Activity : null;
 /**
-* Wraps content in React 19.3.0-canary Activity API.
+* Wraps content in React's <Activity> API (React 19.2+).
 * When mode="hidden", the component tree is preserved in memory but not rendered.
 * Falls back to conditional rendering if Activity is unavailable.
 */
@@ -19,8 +19,7 @@ function CommandActivity({ mode, children }) {
 	if (mode === "hidden") return null;
 	return /* @__PURE__ */ jsx(Fragment, { children });
 }
-//#endregion
-//#region src/react/context.ts
+// src/react/context.ts
 const CommandStableContext = createContext(null);
 CommandStableContext.displayName = "CommandStableContext";
 const CommandStateContext = createContext(null);
@@ -42,8 +41,7 @@ CommandGroupContext.displayName = "CommandGroupContext";
 /** Context for the status container rendered outside the listbox — used by Command.Empty */
 const CommandListStatusContext = createContext(null);
 CommandListStatusContext.displayName = "CommandListStatusContext";
-//#endregion
-//#region src/react/async-items.tsx
+// src/react/async-items.tsx
 /** Inner component that suspends via use() until items resolve */
 function AsyncItemsInner({ items: itemsPromise, children }) {
 	const stable = useStableContext("Command.AsyncItems");
@@ -68,8 +66,7 @@ function CommandAsyncItems({ items, fallback, children }) {
 		})
 	});
 }
-//#endregion
-//#region src/react/badge.tsx
+// src/react/badge.tsx
 /** Inline badge for categorization or status indicators on command items. */
 function CommandBadge({ ref, children, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
@@ -79,8 +76,7 @@ function CommandBadge({ ref, children, ...props }) {
 		children
 	});
 }
-//#endregion
-//#region src/core/utils/string-wellformed.ts
+// 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,
@@ -97,8 +93,7 @@ const REPLACEMENT_CHAR = "�";
 function ensureWellFormed(str) {
 	return str.replace(LONE_SURROGATE_RE, REPLACEMENT_CHAR);
 }
-//#endregion
-//#region src/core/types.ts
+// src/core/types.ts
 /** Create a branded {@link ItemId} from a plain string. Ensures well-formed Unicode. */
 function itemId(id) {
 	return ensureWellFormed(id);
@@ -130,8 +125,7 @@ function createInitialState(options) {
 		lastUpdated: Date.now()
 	};
 }
-//#endregion
-//#region src/core/frecency/memory-storage.ts
+// src/core/frecency/memory-storage.ts
 /**
 * In-memory implementation of FrecencyStorage using a Map.
 * Data does not persist across page reloads. Suitable for ephemeral
@@ -145,7 +139,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() }]));
 	}
@@ -153,11 +147,10 @@ var MemoryFrecencyStorage = class {
 		this.#store.clear();
 	}
 };
-//#endregion
-//#region src/core/frecency/index.ts
+// 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,
@@ -167,7 +160,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;
@@ -256,8 +249,7 @@ var FrecencyEngine = class {
 		this.#storage[Symbol.dispose]();
 	}
 };
-//#endregion
-//#region src/core/utils/group-by.ts
+// 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()`.
@@ -272,8 +264,7 @@ function mapGroupBy(items, keyFn) {
 	}
 	return map;
 }
-//#endregion
-//#region src/core/keyboard/matcher.ts
+// src/core/keyboard/matcher.ts
 /**
 * Tests whether a KeyboardEvent exactly matches a ParsedShortcut,
 * comparing all four modifier keys (meta, ctrl, shift, alt) and the primary key.
@@ -294,8 +285,7 @@ function detectConflicts(shortcuts) {
 	const grouped = mapGroupBy(shortcuts, (s) => s.normalized);
 	return new Map(grouped.entries().filter(([, group]) => group.length > 1));
 }
-//#endregion
-//#region src/core/keyboard/parser.ts
+// src/core/keyboard/parser.ts
 const isMac = typeof navigator !== "undefined" && (navigator.userAgentData?.platform === "macOS" || /Mac|iPod|iPhone|iPad/.test(navigator.platform));
 /** Modifier aliases — cross-platform Mod resolution */
 const MODIFIER_MAP = {
@@ -368,12 +358,11 @@ function formatShortcut(parsed) {
 	parts.push(displayKey);
 	return isMac ? parts.join("") : parts.join("+");
 }
-//#endregion
-//#region src/core/keyboard/index.ts
+// src/core/keyboard/index.ts
 /**
 * 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();
@@ -440,8 +429,7 @@ var KeyboardShortcutRegistry = class {
 		this.#bindings.clear();
 	}
 };
-//#endregion
-//#region src/core/utils/set-ops.ts
+// 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();
@@ -484,8 +472,7 @@ function setSymmetricDifference(a, b) {
 	else result.add(item);
 	return result;
 }
-//#endregion
-//#region src/core/registry.ts
+// src/core/registry.ts
 /**
 * Manages registration and lookup of command items and groups.
 * Uses set operation helpers (union/intersection/difference) for efficient ID operations.
@@ -646,8 +633,23 @@ var CommandRegistry = class {
 		this.clear();
 	}
 };
-//#endregion
-//#region src/core/search/default-scorer.ts
+// src/core/utils/env.ts
+/**
+* `true` unless `process.env.NODE_ENV` is `'production'`.
+*
+* Consumer bundlers (Vite, webpack, Next, esbuild) replace `process.env.NODE_ENV` statically,
+* so the dev-only branches guarded by this flag fold away in production builds. A browser
+* running the unbundled module throws a ReferenceError on the bare `process` reference;
+* the catch turns that into the production value (`false`), so dev-only code stays off.
+*/
+const isDev = (() => {
+	try {
+		return process.env.NODE_ENV !== "production";
+	} catch {
+		return false;
+	}
+})();
+// src/core/search/default-scorer.ts
 function isWordSeparator(code) {
 	return code === 32 || code === 9 || code === 45 || code === 95 || code === 46 || code === 47 || code === 92;
 }
@@ -769,18 +771,16 @@ function scoreFuzzy(query, qLen, lowerTarget, tLen) {
 		matches
 	};
 }
-//#endregion
-//#region src/core/search/index.ts
-const __DEV__$1 = globalThis.process ? globalThis.process.env.NODE_ENV !== "production" : false;
+// src/core/search/index.ts
 let leakRegistry;
-if (__DEV__$1) leakRegistry = new FinalizationRegistry((label) => {
+if (isDev && typeof window !== "undefined") leakRegistry = new FinalizationRegistry((label) => {
 	console.warn(`[modern-cmdk] ${label} was garbage collected without being disposed. Use \`using\` or call [Symbol.dispose]() to prevent leaks.`);
 });
 /**
 * 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;
@@ -789,7 +789,7 @@ function createSearchEngine(options) {
 	let previousQuery = "";
 	let previousResults = /* @__PURE__ */ new Set();
 	const sentinel = {};
-	if (__DEV__$1 && leakRegistry) leakRegistry.register(sentinel, "SearchEngine", sentinel);
+	if (leakRegistry) leakRegistry.register(sentinel, "SearchEngine", sentinel);
 	return {
 		index(items) {
 			for (const item of items) indexedEntries.set(item.id, {
@@ -839,12 +839,11 @@ function createSearchEngine(options) {
 		[Symbol.dispose]() {
 			indexedEntries.clear();
 			previousResults.clear();
-			if (__DEV__$1 && leakRegistry) leakRegistry.unregister(sentinel);
+			if (leakRegistry) leakRegistry.unregister(sentinel);
 		}
 	};
 }
-//#endregion
-//#region src/core/utils/event-emitter.ts
+// src/core/utils/event-emitter.ts
 /**
 * Type-safe event emitter with strong references and Disposable subscriptions.
 * Returns Disposable from `on()` for automatic unsubscription via `using`.
@@ -887,13 +886,13 @@ var TypedEmitter = class {
 		this.#listeners.clear();
 	}
 };
-//#endregion
-//#region src/core/utils/scheduler.ts
+// 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).
@@ -949,8 +948,7 @@ function createScheduler() {
 		}
 	};
 }
-//#endregion
-//#region src/core/machine.ts
+// src/core/machine.ts
 /**
 * Creates a headless command palette state machine with search, frecency,
 * and keyboard shortcut support. Implements Disposable for `using` cleanup.
@@ -1216,9 +1214,8 @@ function createCommandMachine(options = {}) {
 		}
 	};
 }
-//#endregion
-//#region src/react/hooks/use-command.ts
-/** Core hook that binds a CommandMachine to React via useSyncExternalStore, useTransition, and useOptimistic. */
+// 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();
@@ -1231,11 +1228,9 @@ function useCommand(machine) {
 		});
 	}, [rawSetOptimisticActiveId]);
 	const updateSearch = useCallback((query) => {
-		startTransition(() => {
-			machine.send({
-				type: "SEARCH_CHANGE",
-				query
-			});
+		machine.send({
+			type: "SEARCH_CHANGE",
+			query
 		});
 	}, [machine]);
 	return {
@@ -1250,8 +1245,7 @@ function useCommand(machine) {
 		id
 	};
 }
-//#endregion
-//#region src/react/hooks/use-keyboard.ts
+// src/react/hooks/use-keyboard.ts
 /** Navigation key to machine direction mapping */
 const NAVIGATION_KEYS = {
 	ArrowDown: "next",
@@ -1295,8 +1289,7 @@ function createKeydownHandler(machine, getState) {
 		}
 	};
 }
-//#endregion
-//#region src/react/hooks/use-command-setup.ts
+// src/react/hooks/use-command-setup.ts
 /**
 * Shared setup for Command and Command.Dialog — creates machine once,
 * subscribes via useSyncExternalStore, memoizes context values, and
@@ -1356,8 +1349,7 @@ function useCommandSetup(machineFactory, label) {
 		])
 	};
 }
-//#endregion
-//#region src/react/dialog.tsx
+// 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);
@@ -1431,8 +1423,7 @@ function CommandDialog({ children, className, overlayClassName, contentClassName
 		})
 	});
 }
-//#endregion
-//#region src/react/empty.tsx
+// src/react/empty.tsx
 /** Rendered when no items match the current search query. */
 function CommandEmpty({ ref, children, ...props }) {
 	const stateCtx = useStateContext("Command.Empty");
@@ -1449,8 +1440,7 @@ function CommandEmpty({ ref, children, ...props }) {
 	if (statusContainerRef?.current) return createPortal(content, statusContainerRef.current);
 	return content;
 }
-//#endregion
-//#region src/react/hooks/use-register.ts
+// src/react/hooks/use-register.ts
 /** Register a command item with the machine — auto-deregisters on unmount */
 function useRegisterItem(value, options) {
 	const stable = useStableContext("useRegisterItem");
@@ -1522,8 +1512,7 @@ function useRegisterGroup(heading, options) {
 	]);
 	return id;
 }
-//#endregion
-//#region src/react/group.tsx
+// src/react/group.tsx
 /** Module-level constant — avoids allocating a new object on every render of hidden groups */
 const HIDDEN_STYLE = { display: "none" };
 /** Visual grouping container with an optional heading that hides when no items match. */
@@ -1567,8 +1556,7 @@ function CommandGroup({ ref, children, heading, priority, forceId, ...props }) {
 		})
 	});
 }
-//#endregion
-//#region src/react/highlight.tsx
+// src/react/highlight.tsx
 /** Renders search match highlighting by splitting text at scored match ranges. */
 function CommandHighlight({ text, ranges, highlightClassName }) {
 	return useMemo(() => {
@@ -1593,14 +1581,27 @@ function CommandHighlight({ text, ranges, highlightClassName }) {
 		highlightClassName
 	]);
 }
-//#endregion
-//#region src/react/input.tsx
+// src/react/input.tsx
 /** Combobox input that drives the command palette search state. */
 function CommandInput({ ref, placeholder = "Search...", onValueChange, ...props }) {
 	const stable = useStableContext("Command.Input");
 	const stateCtx = useStateContext("Command.Input");
+	const machineState = useSyncExternalStore(stable.machine.subscribe, stable.machine.getState, stable.machine.getState);
+	const [draft, setDraft] = useState(machineState.search);
+	const inFlight = useRef([]);
+	useLayoutEffect(() => {
+		const { search } = machineState;
+		const echoed = inFlight.current.lastIndexOf(search);
+		if (echoed !== -1) inFlight.current.splice(0, echoed + 1);
+		else {
+			inFlight.current = [];
+			setDraft(search);
+		}
+	}, [machineState]);
 	const handleChange = useCallback((event) => {
 		const { value } = event.target;
+		inFlight.current.push(value);
+		setDraft(value);
 		stable.updateSearch(value);
 		onValueChange?.(value);
 	}, [stable.updateSearch, onValueChange]);
@@ -1619,13 +1620,12 @@ function CommandInput({ ref, placeholder = "Search...", onValueChange, ...props
 		autoCorrect: "off",
 		spellCheck: false,
 		placeholder,
-		value: stateCtx.state.search,
+		value: draft,
 		onChange: handleChange,
 		...props
 	});
 }
-//#endregion
-//#region src/react/item.tsx
+// src/react/item.tsx
 /** Individual selectable item in the command list with keyboard and pointer activation. */
 function CommandItem({ ref, children, value, keywords, onSelect, disabled = false, shortcut, forceId, ...props }) {
 	const stable = useStableContext("Command.Item");
@@ -1695,8 +1695,7 @@ function CommandItem({ ref, children, value, keywords, onSelect, disabled = fals
 		children
 	});
 }
-//#endregion
-//#region src/react/hooks/use-virtualizer.ts
+// src/react/hooks/use-virtualizer.ts
 /** Lightweight virtualizer for large item lists using ResizeObserver and scroll tracking. */
 function useVirtualizer(options) {
 	const { count, estimateSize, overscan = 8, scrollElement, enabled = true } = options;
@@ -1800,8 +1799,7 @@ function useVirtualizer(options) {
 		}, [enabled])
 	};
 }
-//#endregion
-//#region src/react/list.tsx
+// src/react/list.tsx
 /** 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");
@@ -1941,8 +1939,7 @@ function CommandList({ ref, children, virtualize, estimateSize = 44, overscan =
 		]
 	});
 }
-//#endregion
-//#region src/react/loading.tsx
+// src/react/loading.tsx
 /** Shown during async operations, with configurable loading state override. */
 function CommandLoading({ ref, children, loading: loadingOverride, ...props }) {
 	const stateCtx = useStateContext("Command.Loading");
@@ -1957,8 +1954,7 @@ function CommandLoading({ ref, children, loading: loadingOverride, ...props }) {
 		children
 	});
 }
-//#endregion
-//#region src/react/page.tsx
+// src/react/page.tsx
 /** Page navigation container that only renders when its ID matches the active page. */
 function CommandPage({ id, children }) {
 	if (useStateContext("Command.Page").state.page !== id) return null;
@@ -1968,8 +1964,7 @@ function CommandPage({ id, children }) {
 		children
 	});
 }
-//#endregion
-//#region src/react/separator.tsx
+// src/react/separator.tsx
 /** Visual divider between items or groups, rendered as a presentational element. */
 function CommandSeparator({ ref, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
@@ -1979,8 +1974,7 @@ function CommandSeparator({ ref, ...props }) {
 		...props
 	});
 }
-//#endregion
-//#region src/react/shortcut.tsx
+// src/react/shortcut.tsx
 /** Keyboard shortcut display with platform-aware formatting (e.g., Cmd vs Ctrl). */
 function CommandShortcut({ ref, shortcut, children, ...props }) {
 	const formattedShortcut = useMemo(() => shortcut ? formatShortcut(parseShortcut(shortcut)) : null, [shortcut]);
@@ -1991,8 +1985,7 @@ function CommandShortcut({ ref, shortcut, children, ...props }) {
 		children: formattedShortcut ?? children
 	});
 }
-//#endregion
-//#region src/react/command.tsx
+// src/react/command.tsx
 /** Root compound component that provides the command state machine context to all children. */
 function CommandRoot({ children, className, label = "Command palette", ...machineOptions }) {
 	const rootRef = useRef(null);
@@ -2041,8 +2034,7 @@ const Command = Object.assign(CommandRoot, {
 	AsyncItems: CommandAsyncItems,
 	Activity: CommandActivity
 });
-//#endregion
-//#region src/react/error-boundary.tsx
+// src/react/error-boundary.tsx
 /** Initial state — no error captured */
 const INITIAL_STATE = { error: null };
 /** Error boundary for graceful failure recovery in command subtrees. */
@@ -2064,8 +2056,7 @@ var CommandErrorBoundary = class extends Component {
 		return this.props.children;
 	}
 };
-//#endregion
-//#region src/react/hooks/use-command-state.ts
+// src/react/hooks/use-command-state.ts
 function useCommandState(selector) {
 	const stable = useStableContext("useCommandState");
 	const selectorRef = useRef(selector);
@@ -2073,19 +2064,20 @@ function useCommandState(selector) {
 	const getSnapshot = useCallback(() => selectorRef.current ? selectorRef.current(stable.machine.getState()) : stable.machine.getState(), [stable.machine]);
 	return useSyncExternalStore(stable.machine.subscribe, getSnapshot, getSnapshot);
 }
-//#endregion
-//#region src/react/hooks/use-devtools.ts
+// 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.
+* Development only: the effect is gated on `process.env.NODE_ENV` and returns early in
+* production builds (the hook itself still ships). Call it from a component rendered inside
+* `<Command>`: outside one there is no machine to inspect and the hook does nothing.
 *
 * @example
 * ```tsx
-* function MyPalette() {
+* function DevtoolsBridge() {
 *   useCommandDevtools('main');
-*   return <Command>...</Command>;
+*   return null;
 * }
 * ```
 */
@@ -2094,7 +2086,7 @@ function useCommandDevtools(label = "default") {
 	const stateCtx = use(CommandStateContext);
 	const stateRef = useRef(null);
 	useEffect(() => {
-		if (!__DEV__) return;
+		if (!isDev) return;
 		if (!stable || !stateCtx) return;
 		const update = () => {
 			const s = stateCtx.state;
@@ -2129,5 +2121,4 @@ function useCommandDevtools(label = "default") {
 		label
 	]);
 }
-//#endregion
 export { Command, CommandActivity, CommandAsyncItems, CommandBadge, CommandDialog, CommandEmpty, CommandErrorBoundary, CommandGroup, CommandHighlight, CommandInput, CommandItem, CommandList, CommandLoading, CommandPage, CommandSeparator, CommandShortcut, CommandStableContext, CommandStateContext, createKeydownHandler, useCommand, useCommandDevtools, useCommandState, useRegisterGroup, useRegisterItem, useVirtualizer };

package/dist/react/styles.css

@@ -6,6 +6,12 @@
 /* CSS Logical Properties: full RTL/LTR support */
 /* CSS Nesting, @layer cascade control, oklch() color space */
 /* Container queries for responsive item layout */
+/* Secondary text (group headings, shortcuts, empty state, placeholder) is coloured with
+   --command-muted-color, never faded with opacity: opacity stacks on the consumer's text
+   colour and cannot be checked against it. The default is light-dark(), so it follows the
+   used color-scheme of the page (set color-scheme on :root or a parent, or override the
+   token); it is 4.5:1 or better on white, black and the usual near-white / near-black
+   surfaces. Only [data-disabled] items keep opacity (WCAG 1.4.3 exempts disabled controls). */
 
 /* ─── CSS Custom Properties ─── */
 
@@ -40,7 +46,7 @@
 }
 
 /* ─── User-Customizable Animation Properties ─── */
-/* Override these on [data-command-root] or :root to customize all animations */
+/* Override these with unlayered CSS on [data-command-root] loaded after this file, or on a more specific unlayered selector; this block sits outside every @layer, so a normal (non-!important) value set inside a layer loses here whatever its selector, and a :root value is shadowed by this declaration */
 
 [data-command-root] {
   --command-spring-easing: linear(
@@ -99,10 +105,11 @@
   --command-item-height: 44px;
   --command-fade-edge-size: 16px;
   --command-highlight-color: oklch(0.85 0.15 90 / 0.3);
+  --command-muted-color: light-dark(oklch(0.45 0.015 260), oklch(0.75 0.015 260));
 }
 
 /* ─── Spring Easing ─── */
-/* linear() approximation of a critically-damped spring (stiffness: 100, damping: 15) */
+/* linear() spring approximations: --command-spring-easing settles without overshoot; --command-spring-easing-bouncy peaks at 1.033 before settling */
 /* Generated from spring physics: x(t) = 1 - e^(-zt)(cos(wd*t) + (zw/wd)sin(wd*t)) */
 
 @layer command.base, command.layout, command.animation, command.a11y;
@@ -173,7 +180,9 @@
     font: inherit;
 
     &::placeholder {
-      opacity: 0.5;
+      color: var(--command-muted-color);
+      /* Firefox fades ::placeholder by default; the colour token carries the contrast */
+      opacity: 1;
     }
   }
 
@@ -232,7 +241,7 @@
     font-size: 0.75em;
     text-transform: uppercase;
     letter-spacing: 0.05em;
-    opacity: 0.6;
+    color: var(--command-muted-color);
   }
 
   /* ─── Separator ─── */
@@ -255,7 +264,7 @@
 
   [data-command-empty] {
     text-align: center;
-    opacity: 0.6;
+    color: var(--command-muted-color);
   }
 
   /* ─── Shortcut Badge ─── */
@@ -263,7 +272,7 @@
   [data-command-shortcut] {
     font-family: inherit;
     font-size: 0.75em;
-    opacity: 0.5;
+    color: var(--command-muted-color);
     letter-spacing: 0.05em;
   }
 
@@ -543,7 +552,7 @@
     }
 
     [data-command-group-heading] {
-      opacity: 0.8;
+      color: inherit;
     }
 
     [data-command-highlight] {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "modern-cmdk",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "type": "module",
   "description": "The definitive command palette engine for the modern web",
   "license": "MIT",
@@ -62,7 +62,7 @@
   "devDependencies": {
     "globby": "16.2.4",
     "jscodeshift": "17.4.0",
-    "radix-ui": "1.6.7",
+    "radix-ui": "1.8.2-rc.1791984254107",
     "@types/jscodeshift": "17.3.0"
   },
   "keywords": [
@@ -80,8 +80,8 @@
     "directory": "packages/modern-cmdk"
   },
   "scripts": {
-    "build": "tsdown --config tsdown.config.ts && node -e \"const fs=require('fs');fs.cpSync('src/react/styles.css','dist/react/styles.css')\"",
-    "dev": "tsdown src/core/index.ts src/react/index.ts --format esm --dts --watch",
+    "build": "tsdown",
+    "dev": "tsdown --watch",
     "typecheck": "tsc --noEmit"
   }
 }