modern-cmdk 1.4.0 → 1.6.0

package/dist/react/dialog.mjs

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

package/dist/react/index.d.mts

@@ -17,14 +17,19 @@ interface CommandActivityProps {
  */
 export declare function CommandActivity({ mode, children }: CommandActivityProps): ReactNode;
 interface CommandAsyncItemsProps {
-  /** Promise that resolves to items */
+  /** Promise that resolves to items; keep it stable across renders (state, a ref, or `useMemo`) or the boundary re-suspends on every render */
   readonly items: Promise<readonly CommandItem$1[]>;
   /** Fallback content while loading */
   readonly fallback?: ReactNode;
   /** Render function for resolved items */
   readonly children: (items: readonly CommandItem$1[]) => ReactNode;
 }
-/** Suspense-based async item loader that resolves a promise of items using React 19 `use()`. */
+/**
+ * Suspense-based async item loader that resolves a promise of items using React 19 `use()`.
+ *
+ * The `items` promise must be kept stable across renders (held in state, a ref, or `useMemo`):
+ * a new promise on every render, such as `items={fetchItems()}`, suspends again on every render.
+ */
 export declare function CommandAsyncItems({ items, fallback, children }: CommandAsyncItemsProps): ReactNode;
 interface CommandBadgeProps extends ComponentPropsWithRef<"span"> {}
 /** Inline badge for categorization or status indicators on command items. */
@@ -35,7 +40,10 @@ export declare function CommandEmpty({ ref, children, ...props }: CommandEmptyPr
 interface CommandGroupProps extends ComponentPropsWithRef<"div"> {
   /** Heading text displayed above the group */
   readonly heading?: string;
-  /** Sort priority (lower = higher in list) */
+  /**
+   * Orders the keys of `CommandState.groupedIds` (lower first). React renders the groups in the JSX order
+   * of the group elements, not by this number.
+   */
   readonly priority?: number;
   /** Force a specific ID */
   readonly forceId?: string;
@@ -60,6 +68,7 @@ export declare function CommandInput({ ref, placeholder, onValueChange, ...props
 interface CommandItemProps extends Omit<ComponentPropsWithRef<"div">, "onSelect" | "value"> {
   readonly value: string;
   readonly keywords?: readonly string[];
+  /** Called when the item is selected by click, Enter or shortcut (no argument in 1.x; the value arrives in 2.0) */
   readonly onSelect?: () => void;
   readonly disabled?: boolean;
   readonly shortcut?: string;
@@ -181,7 +190,16 @@ interface CommandGroupContextValue {
 }
 interface CommandErrorBoundaryProps {
   readonly children: ReactNode;
-  readonly fallback?: ReactNode | ((error: Error) => ReactNode);
+  /**
+   * Rendered in place of the children after an error. A function receives the error and a `reset`
+   * callback that clears it, so the children render again (a retry button, for example).
+   */
+  readonly fallback?: ReactNode | ((error: Error, reset: () => void) => ReactNode);
+  /**
+   * While the boundary shows its fallback, a change in these values (compared entry by entry with
+   * `Object.is`; a different length counts as a change) clears the error and renders the children again.
+   */
+  readonly resetKeys?: readonly unknown[];
   readonly onError?: (error: Error, errorInfo: ErrorInfo) => void;
 }
 interface CommandErrorBoundaryState {
@@ -192,6 +210,9 @@ export declare class CommandErrorBoundary extends Component<CommandErrorBoundary
   override state: CommandErrorBoundaryState;
   static getDerivedStateFromError(error: Error): CommandErrorBoundaryState;
   override componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+  override componentDidUpdate(prevProps: CommandErrorBoundaryProps, prevState: CommandErrorBoundaryState): void;
+  /** Clears the captured error so the children render again. */
+  reset: () => void;
   override render(): ReactNode;
 }
 interface UseCommandReturn {

package/dist/react/index.mjs

@@ -33,14 +33,42 @@ function AsyncItemsInner({ items: itemsPromise, children }) {
 	}, [stable.machine, items]);
 	return /* @__PURE__ */ jsx(Fragment, { children: children(items) });
 }
-/** Suspense-based async item loader that resolves a promise of items using React 19 `use()`. */
+/**
+* Rendered next to the Suspense fallback: while it is mounted its source counts as pending,
+* so `state.loading` (Command.Loading, the list's aria-busy) follows the suspended promise.
+* The fallback unmounts when the items resolve, reject into an error boundary, or this
+* AsyncItems unmounts, and the cleanup then clears the source.
+*/
+function PendingSignal() {
+	const stable = useStableContext("Command.AsyncItems");
+	const source = useId();
+	useLayoutEffect(() => {
+		stable.machine.send({
+			type: "LOADING",
+			source,
+			pending: true
+		});
+		return () => {
+			stable.machine.send({
+				type: "LOADING",
+				source,
+				pending: false
+			});
+		};
+	}, [stable.machine, source]);
+	return null;
+}
+/**
+* Suspense-based async item loader that resolves a promise of items using React 19 `use()`.
+*
+* The `items` promise must be kept stable across renders (held in state, a ref, or `useMemo`):
+* a new promise on every render, such as `items={fetchItems()}`, suspends again on every render.
+*/
 function CommandAsyncItems({ items, fallback, children }) {
-	const stableRef = useRef(items);
-	if (stableRef.current !== items) stableRef.current = items;
 	return /* @__PURE__ */ jsx(Suspense, {
-		fallback,
+		fallback: /* @__PURE__ */ jsxs(Fragment, { children: [fallback, /* @__PURE__ */ jsx(PendingSignal, {})] }),
 		children: /* @__PURE__ */ jsx(AsyncItemsInner, {
-			items: stableRef.current,
+			items,
 			children
 		})
 	});
@@ -83,6 +111,14 @@ function useRegisterItem(value, options) {
 	const dataRef = useRef(options?.data);
 	dataRef.current = options?.data;
 	const keywordsDep = options?.keywords?.join("\0");
+	const registeredRef = useRef(false);
+	useLayoutEffect(() => () => {
+		registeredRef.current = false;
+		stable.machine.send({
+			type: "UNREGISTER_ITEM",
+			id
+		});
+	}, [stable.machine, id]);
 	useLayoutEffect(() => {
 		const item = {
 			id,
@@ -95,15 +131,10 @@ function useRegisterItem(value, options) {
 			data: dataRef.current
 		};
 		stable.machine.send({
-			type: "REGISTER_ITEM",
+			type: registeredRef.current ? "UPDATE_ITEM" : "REGISTER_ITEM",
 			item
 		});
-		return () => {
-			stable.machine.send({
-				type: "UNREGISTER_ITEM",
-				id
-			});
-		};
+		registeredRef.current = true;
 	}, [
 		stable.machine,
 		id,
@@ -150,13 +181,14 @@ const HIDDEN_STYLE = { display: "none" };
 /** Visual grouping container with an optional heading that hides when no items match. */
 function CommandGroup({ ref, children, heading, priority, forceId, ...props }) {
 	const stateCtx = useStateContext("Command.Group");
+	const stable = useStableContext("Command.Group");
 	const headingId = useId();
 	const groupId = useRegisterGroup(heading, {
 		...priority !== void 0 && { priority },
 		...forceId !== void 0 && { forceId }
 	});
-	const groupItems = stateCtx.state.groupedIds.get(groupId);
-	const hasVisibleItems = groupItems !== void 0 && groupItems.length > 0;
+	const registry = stable.machine.getRegistry();
+	const hasVisibleItems = stateCtx.state.groupedIds.get(groupId)?.some((id) => registry.getItem(id)?.groupId === groupId) ?? false;
 	const groupContext = useMemo(() => ({
 		groupId,
 		headingId
@@ -678,10 +710,20 @@ var CommandErrorBoundary = class extends Component {
 	componentDidCatch(error, errorInfo) {
 		this.props.onError?.(error, errorInfo);
 	}
+	componentDidUpdate(prevProps, prevState) {
+		if (this.state.error === null || prevState.error === null) return;
+		const prev = prevProps.resetKeys;
+		const next = this.props.resetKeys;
+		if (prev !== next && (prev?.length !== next?.length || next?.some((key, index) => !Object.is(key, prev?.[index])))) this.reset();
+	}
+	/** Clears the captured error so the children render again. */
+	reset = () => {
+		this.setState(INITIAL_STATE);
+	};
 	render() {
 		if (this.state.error) {
 			const { fallback } = this.props;
-			if (typeof fallback === "function") return fallback(this.state.error);
+			if (typeof fallback === "function") return fallback(this.state.error, this.reset);
 			if (fallback) return fallback;
 			return null;
 		}
@@ -696,15 +738,7 @@ 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);
 }
-// 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.
-*/
+// src/react/hooks/use-devtools.ts
 const isDev = (() => {
 	try {
 		return process.env.NODE_ENV !== "production";
@@ -712,7 +746,6 @@ const isDev = (() => {
 		return false;
 	}
 })();
-// src/react/hooks/use-devtools.ts
 /** Branded key for the global devtools instance map */
 const DEVTOOLS_KEY = "__CRIMSON_COMMAND_DEVTOOLS__";
 /**

package/dist/react/styles.css

@@ -1,11 +1,5 @@
 /* modern-cmdk/react — tokens, item and list transitions; the dialog and overlay transitions are declared but inert until DT-19 */
-/* All animations respect prefers-reduced-motion */
-/* Spring easing via linear() approximation — perceptually smooth */
-/* Scroll-driven animations via animation-timeline: scroll() */
-/* WCAG 2.1 AA: forced-colors, prefers-contrast, prefers-reduced-motion */
-/* CSS Logical Properties: full RTL/LTR support */
-/* CSS Nesting, @layer cascade control, oklch() color space */
-/* Container queries for responsive item layout */
+/* Also: scroll-driven animations (gated by @supports), WCAG 2.1 AA forced-colors, prefers-contrast and prefers-reduced-motion, logical properties for RTL/LTR, nesting, @layer, oklch(), container queries */
 /* 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
@@ -191,7 +185,6 @@
   [data-command-list] {
     overflow-y: auto;
     overscroll-behavior: contain;
-    scroll-timeline: --list-scroll block;
     will-change: height;
     transition: height var(--command-duration-list) var(--command-spring-easing);
     scrollbar-gutter: stable;
@@ -209,6 +202,7 @@
 
   [data-command-item] {
     cursor: pointer;
+    -webkit-user-select: none;
     user-select: none;
     transition: background-color var(--command-duration-item) linear(0, 0.25, 0.5, 0.75, 1);
     scroll-margin-block: 8px;
@@ -237,6 +231,7 @@
   /* ─── Group ─── */
 
   [data-command-group-heading] {
+    -webkit-user-select: none;
     user-select: none;
     font-size: 0.75em;
     text-transform: uppercase;
@@ -340,9 +335,7 @@
       overlay var(--command-duration-exit) allow-discrete;
   }
 
-  /* ─── Dialog Animations ─── */
-  /* Dialog transitions: inert until DT-19 */
-  /* Spring easing via linear() approximation */
+  /* ─── Dialog Animations (inert until DT-19) ─── */
 
   [data-command-dialog][data-state="open"] {
     @starting-style {
@@ -400,24 +393,16 @@
     &::before {
       inset-block-start: 0;
       background: linear-gradient(to bottom, currentColor, transparent);
-      opacity: 0.08;
-      animation: fade-edge-top linear both;
-      animation-timeline: --list-scroll;
-      animation-range: 0px 24px;
     }
 
     /* Bottom fade — visible when not scrolled to bottom */
     &::after {
       inset-block-end: 0;
       background: linear-gradient(to top, currentColor, transparent);
-      opacity: 0.08;
-      animation: fade-edge-bottom linear both;
-      animation-timeline: --list-scroll;
-      animation-range: calc(100% - 24px) 100%;
     }
   }
 
-  @keyframes fade-edge-top {
+  @keyframes fade-edge {
     from {
       opacity: 0;
     }
@@ -426,23 +411,12 @@
     }
   }
 
-  @keyframes fade-edge-bottom {
-    from {
-      opacity: 0.08;
-    }
-    to {
-      opacity: 0;
-    }
-  }
-
   /* ─── Scroll-Driven Progress Indicator ─── */
 
   [data-command-scroll-indicator] {
     block-size: 2px;
     transform-origin: inline-start center;
     scale: 0 1;
-    animation: scroll-progress linear both;
-    animation-timeline: --list-scroll;
     will-change: scale;
   }
 
@@ -455,6 +429,34 @@
     }
   }
 
+  /* Safari < 26 and Firefox < 159 lack animation-timeline: a time-based run would settle in its end state, so the wiring waits */
+  @supports (animation-timeline: scroll()) {
+    [data-command-list] {
+      scroll-timeline: --list-scroll;
+
+      &::before {
+        animation: fade-edge linear both;
+        animation-range: 0px 24px;
+      }
+
+      &::after {
+        animation: fade-edge linear both reverse;
+        animation-range: calc(100% - 24px) 100%;
+      }
+
+      &::before,
+      &::after {
+        opacity: 0.08;
+        animation-timeline: --list-scroll;
+      }
+    }
+
+    [data-command-scroll-indicator] {
+      animation: scroll-progress linear both;
+      animation-timeline: --list-scroll;
+    }
+  }
+
   /* ─── Focus Indicators ─── */
 
   [data-command-item]:focus-visible {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "modern-cmdk",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "type": "module",
   "description": "The definitive command palette engine for the modern web",
   "license": "MIT",
@@ -30,11 +30,12 @@
   "main": "./dist/core/index.mjs",
   "types": "./dist/core/index.d.mts",
   "bin": {
-    "modern-cmdk": "./dist/codemod/cli.mjs"
+    "modern-cmdk": "./dist/codemod/bin.mjs"
   },
   "files": [
     "dist",
-    "LICENSE"
+    "LICENSE",
+    "THIRD-PARTY-NOTICES.md"
   ],
   "sideEffects": [
     "./dist/react/styles.css"
@@ -56,10 +57,7 @@
     "idb-keyval": "6.3.0"
   },
   "devDependencies": {
-    "globby": "16.2.4",
-    "jscodeshift": "17.4.0",
-    "radix-ui": "1.8.2-rc.1791984254107",
-    "@types/jscodeshift": "17.3.0"
+    "radix-ui": "1.8.2-rc.1791984254107"
   },
   "keywords": [
     "command-palette",