@astryxdesign/core 0.1.4-canary.fd7ab46 → 0.1.4

package/src/Collapsible/CollapsibleGroup.test.tsx

@@ -77,22 +77,6 @@ describe('Collapsible', () => {
     expect(screen.getByText('Hidden content')).not.toBeVisible();
   });
 
-  it('links the trigger to its content region via aria-controls', () => {
-    render(
-      <Collapsible trigger="Details">
-        <p>Region content</p>
-      </Collapsible>,
-    );
-
-    const trigger = screen.getByRole('button', {name: /Details/});
-    const controlsId = trigger.getAttribute('aria-controls');
-    // aria-controls must be present and point at the real content region.
-    expect(controlsId).toBeTruthy();
-    const region = document.getElementById(controlsId as string);
-    expect(region).not.toBeNull();
-    expect(region).toContainElement(screen.getByText('Region content'));
-  });
-
   it('respects controlled isOpen/onOpenChange', async () => {
     const onOpenChange = vi.fn();
     const user = userEvent.setup();
@@ -127,36 +111,6 @@ describe('Collapsible', () => {
     expect(screen.getByText('Controlled content')).not.toBeVisible();
   });
 
-  it('self-toggles in uncontrolled mode even when onOpenChange is supplied', async () => {
-    // Regression: passing onOpenChange without isOpen must NOT make the
-    // component behave as controlled. Internal state should still drive
-    // visibility, and the callback should fire in addition.
-    const onOpenChange = vi.fn();
-    const user = userEvent.setup();
-    render(
-      <Collapsible trigger="Uncontrolled" onOpenChange={onOpenChange}>
-        <p>Uncontrolled content</p>
-      </Collapsible>,
-    );
-
-    const trigger = screen.getByRole('button', {name: /Uncontrolled/});
-    // Starts open (defaultIsOpen defaults to true).
-    expect(trigger).toHaveAttribute('aria-expanded', 'true');
-    expect(screen.getByText('Uncontrolled content')).toBeVisible();
-
-    // Click collapses via internal state AND notifies.
-    await user.click(trigger);
-    expect(trigger).toHaveAttribute('aria-expanded', 'false');
-    expect(screen.getByText('Uncontrolled content')).not.toBeVisible();
-    expect(onOpenChange).toHaveBeenNthCalledWith(1, false);
-
-    // Click again re-expands — proving the component isn't stuck.
-    await user.click(trigger);
-    expect(trigger).toHaveAttribute('aria-expanded', 'true');
-    expect(screen.getByText('Uncontrolled content')).toBeVisible();
-    expect(onOpenChange).toHaveBeenNthCalledWith(2, true);
-  });
-
   it('renders chevron indicator', () => {
     render(
       <Collapsible trigger="With Chevron">
@@ -443,276 +397,4 @@ describe('CollapsibleGroup', () => {
       expect(trigger).toHaveAttribute('aria-expanded', 'true');
     });
   });
-
-  describe('dividers', () => {
-    function getItem(name: RegExp): HTMLElement {
-      const root = screen
-        .getByRole('button', {name})
-        .closest('.astryx-collapsible');
-      expect(root).not.toBeNull();
-      return root as HTMLElement;
-    }
-
-    it('renders no wrapper DOM by default and with dividers="none"', () => {
-      const {container, rerender} = render(
-        <CollapsibleGroup>
-          <Collapsible trigger="Item A" value="a">
-            <p>Content A</p>
-          </Collapsible>
-        </CollapsibleGroup>,
-      );
-      expect(container.querySelector('.astryx-collapsible-group')).toBeNull();
-
-      rerender(
-        <CollapsibleGroup dividers="none">
-          <Collapsible trigger="Item A" value="a">
-            <p>Content A</p>
-          </Collapsible>
-        </CollapsibleGroup>,
-      );
-      expect(container.querySelector('.astryx-collapsible-group')).toBeNull();
-    });
-
-    it('renders a wrapper with data attributes when dividers are enabled', () => {
-      const {container} = render(
-        <CollapsibleGroup dividers="between">
-          <Collapsible trigger="Item A" value="a">
-            <p>Content A</p>
-          </Collapsible>
-          <Collapsible trigger="Item B" value="b">
-            <p>Content B</p>
-          </Collapsible>
-        </CollapsibleGroup>,
-      );
-
-      const wrapper = container.querySelector('.astryx-collapsible-group');
-      expect(wrapper).not.toBeNull();
-      expect(wrapper).toHaveAttribute('data-dividers', 'between');
-      // Divided groups default to balanced density
-      expect(wrapper).toHaveAttribute('data-density', 'balanced');
-      expect(wrapper).toContainElement(getItem(/Item A/));
-      expect(wrapper).toContainElement(getItem(/Item B/));
-    });
-
-    it('reflects dividers and density on each item', () => {
-      render(
-        <CollapsibleGroup dividers="all" density="compact">
-          <Collapsible trigger="Item A" value="a">
-            <p>Content A</p>
-          </Collapsible>
-        </CollapsibleGroup>,
-      );
-
-      const item = getItem(/Item A/);
-      expect(item).toHaveAttribute('data-dividers', 'all');
-      expect(item).toHaveAttribute('data-density', 'compact');
-    });
-
-    it('does not reflect divider chrome on items without dividers', () => {
-      render(
-        <CollapsibleGroup>
-          <Collapsible trigger="Item A" value="a">
-            <p>Content A</p>
-          </Collapsible>
-        </CollapsibleGroup>,
-      );
-
-      const item = getItem(/Item A/);
-      expect(item).not.toHaveAttribute('data-dividers');
-      expect(item).not.toHaveAttribute('data-density');
-    });
-
-    it('applies density without dividers (and without a wrapper)', () => {
-      const {container} = render(
-        <CollapsibleGroup density="spacious">
-          <Collapsible trigger="Item A" value="a">
-            <p>Content A</p>
-          </Collapsible>
-        </CollapsibleGroup>,
-      );
-
-      expect(container.querySelector('.astryx-collapsible-group')).toBeNull();
-      expect(getItem(/Item A/)).toHaveAttribute('data-density', 'spacious');
-    });
-
-    it('does not leak divider chrome into nested collapsibles', () => {
-      render(
-        <CollapsibleGroup dividers="between" defaultValue="outer">
-          <Collapsible trigger="Outer" value="outer">
-            <Collapsible trigger="Nested">
-              <p>Nested content</p>
-            </Collapsible>
-          </Collapsible>
-        </CollapsibleGroup>,
-      );
-
-      expect(getItem(/Outer/)).toHaveAttribute('data-dividers', 'between');
-      expect(getItem(/Nested/)).not.toHaveAttribute('data-dividers');
-      expect(getItem(/Nested/)).not.toHaveAttribute('data-density');
-    });
-
-    it('keeps group coordination working with dividers enabled', async () => {
-      const user = userEvent.setup();
-      render(
-        <CollapsibleGroup type="single" dividers="between" defaultValue="a">
-          <Collapsible trigger="Item A" value="a">
-            <p>Content A</p>
-          </Collapsible>
-          <Collapsible trigger="Item B" value="b">
-            <p>Content B</p>
-          </Collapsible>
-        </CollapsibleGroup>,
-      );
-
-      expect(screen.getByText('Content A')).toBeVisible();
-      await user.click(screen.getByRole('button', {name: /Item B/}));
-      expect(screen.getByText('Content A')).not.toBeVisible();
-      expect(screen.getByText('Content B')).toBeVisible();
-    });
-
-    it('applies xstyle/className/style to the wrapper in divider mode', () => {
-      const {container} = render(
-        <CollapsibleGroup
-          dividers="between"
-          className="custom-class"
-          data-testid="group">
-          <Collapsible trigger="Item A" value="a">
-            <p>Content A</p>
-          </Collapsible>
-        </CollapsibleGroup>,
-      );
-
-      const wrapper = container.querySelector('.astryx-collapsible-group');
-      expect(wrapper).toHaveClass('custom-class');
-      expect(wrapper).toHaveAttribute('data-testid', 'group');
-    });
-
-    it('forwards ref to the wrapper in divider mode', () => {
-      const ref = {current: null as HTMLElement | null};
-      const {container} = render(
-        <CollapsibleGroup dividers="between" ref={ref}>
-          <Collapsible trigger="Item A" value="a">
-            <p>Content A</p>
-          </Collapsible>
-        </CollapsibleGroup>,
-      );
-
-      expect(ref.current).toBe(
-        container.querySelector('.astryx-collapsible-group'),
-      );
-    });
-
-    it('explicit density overrides the divider default', () => {
-      const {container} = render(
-        <CollapsibleGroup dividers="between" density="spacious">
-          <Collapsible trigger="Item A" value="a">
-            <p>Content A</p>
-          </Collapsible>
-        </CollapsibleGroup>,
-      );
-
-      const wrapper = container.querySelector('.astryx-collapsible-group');
-      expect(wrapper).toHaveAttribute('data-density', 'spacious');
-      expect(getItem(/Item A/)).toHaveAttribute('data-density', 'spacious');
-    });
-
-    it('tolerates interleaved non-Collapsible children', async () => {
-      const user = userEvent.setup();
-      render(
-        <CollapsibleGroup type="single" dividers="between" defaultValue="a">
-          <Collapsible trigger="Item A" value="a">
-            <p>Content A</p>
-          </Collapsible>
-          <hr data-testid="separator" />
-          <Collapsible trigger="Item B" value="b">
-            <p>Content B</p>
-          </Collapsible>
-        </CollapsibleGroup>,
-      );
-
-      expect(screen.getByTestId('separator')).toBeInTheDocument();
-      expect(getItem(/Item A/)).toHaveAttribute('data-dividers', 'between');
-      expect(getItem(/Item B/)).toHaveAttribute('data-dividers', 'between');
-      await user.click(screen.getByRole('button', {name: /Item B/}));
-      expect(screen.getByText('Content A')).not.toBeVisible();
-      expect(screen.getByText('Content B')).toBeVisible();
-    });
-
-    it('lets a nested group define its own chrome instead of inheriting', () => {
-      render(
-        <CollapsibleGroup dividers="between" defaultValue="outer">
-          <Collapsible trigger="Outer" value="outer">
-            <CollapsibleGroup type="multiple" dividers="all">
-              <Collapsible trigger="Inner divided" value="in-a">
-                <p>Inner content</p>
-              </Collapsible>
-            </CollapsibleGroup>
-            <CollapsibleGroup type="multiple">
-              <Collapsible trigger="Inner plain" value="in-b">
-                <p>Inner content</p>
-              </Collapsible>
-            </CollapsibleGroup>
-          </Collapsible>
-        </CollapsibleGroup>,
-      );
-
-      expect(getItem(/Outer/)).toHaveAttribute('data-dividers', 'between');
-      expect(getItem(/Inner divided/)).toHaveAttribute('data-dividers', 'all');
-      expect(getItem(/Inner plain/)).not.toHaveAttribute('data-dividers');
-    });
-
-    it('keeps controlled coordination and onChange shape with dividers', async () => {
-      const user = userEvent.setup();
-      const onChange = vi.fn();
-      const {rerender} = render(
-        <CollapsibleGroup
-          type="single"
-          dividers="all"
-          value="a"
-          onChange={onChange}>
-          <Collapsible trigger="Item A" value="a">
-            <p>Content A</p>
-          </Collapsible>
-          <Collapsible trigger="Item B" value="b">
-            <p>Content B</p>
-          </Collapsible>
-        </CollapsibleGroup>,
-      );
-
-      await user.click(screen.getByRole('button', {name: /Item B/}));
-      expect(onChange).toHaveBeenCalledWith('b');
-      // Controlled: nothing opens until the parent passes the new value
-      expect(screen.getByText('Content B')).not.toBeVisible();
-
-      rerender(
-        <CollapsibleGroup
-          type="single"
-          dividers="all"
-          value="b"
-          onChange={onChange}>
-          <Collapsible trigger="Item A" value="a">
-            <p>Content A</p>
-          </Collapsible>
-          <Collapsible trigger="Item B" value="b">
-            <p>Content B</p>
-          </Collapsible>
-        </CollapsibleGroup>,
-      );
-      expect(screen.getByText('Content A')).not.toBeVisible();
-      expect(screen.getByText('Content B')).toBeVisible();
-    });
-
-    it('renders standalone Collapsible without any group chrome', () => {
-      render(
-        <Collapsible trigger="Alone">
-          <p>Standalone content</p>
-        </Collapsible>,
-      );
-
-      const item = getItem(/Alone/);
-      expect(item).not.toHaveAttribute('data-dividers');
-      expect(item).not.toHaveAttribute('data-density');
-      expect(item.querySelector('.astryx-collapsible-group')).toBeNull();
-    });
-  });
 });

package/src/Collapsible/CollapsibleGroup.tsx

@@ -4,18 +4,13 @@
 
 /**
  * @file CollapsibleGroup.tsx
- * @input Uses React useState, useCallback, CollapsibleGroupContext, StyleX, theme tokens
+ * @input Uses React useState, useCallback, CollapsibleGroupContext
  * @output Exports CollapsibleGroup component and CollapsibleGroupProps
- * @position Core collapsible group coordination provider — renders no wrapper
- *   DOM unless `dividers` is enabled
+ * @position Core collapsible group coordination provider — renders no wrapper DOM
  *
  * CollapsibleGroup groups collapsible components (Card, etc.) with
- * coordinated open/close behavior. By default it renders only `{children}` —
- * no wrapper DOM element. When `dividers` is 'between' or 'all' it renders a
- * wrapper div that anchors the divider chrome (outer borders, reliable
- * :first-child suppression) and provides dividers/density to items via
- * CollapsibleGroupPresentationContext — each Collapsible draws its own
- * borders since StyleX has no child selectors.
+ * coordinated open/close behavior. It renders only `{children}` — no wrapper
+ * DOM element.
  *
  * In "single" mode (default), only one item can be open at a time.
  * In "multiple" mode, any number of items can be open simultaneously.
@@ -29,35 +24,10 @@
  */
 
 import React, {useCallback, useMemo, useState, type ReactNode} from 'react';
-import * as stylex from '@stylexjs/stylex';
-import {borderVars, colorVars} from '../theme/tokens.stylex';
-import {
-  CollapsibleGroupContext,
-  CollapsibleGroupPresentationContext,
-} from './CollapsibleGroupContext';
-import type {
-  CollapsibleGroupContextValue,
-  CollapsibleGroupDensity,
-  CollapsibleGroupDividers,
-  CollapsibleGroupPresentationValue,
-} from './CollapsibleGroupContext';
-import {mergeProps} from '../utils';
-import {themeProps} from '../utils/themeProps';
+import {CollapsibleGroupContext} from './CollapsibleGroupContext';
+import type {CollapsibleGroupContextValue} from './CollapsibleGroupContext';
 import type {BaseProps} from '../BaseProps';
 
-const styles = stylex.create({
-  // 'all' draws the group's outer top/bottom edges; between-item lines are
-  // drawn by each Collapsible (borderBlockStart, suppressed on :first-child)
-  wrapperAll: {
-    borderBlockStartWidth: borderVars['--border-width'],
-    borderBlockStartStyle: 'solid',
-    borderBlockStartColor: colorVars['--color-border'],
-    borderBlockEndWidth: borderVars['--border-width'],
-    borderBlockEndStyle: 'solid',
-    borderBlockEndColor: colorVars['--color-border'],
-  },
-});
-
 export interface CollapsibleGroupProps extends Omit<
   BaseProps<HTMLElement>,
   'onChange'
@@ -86,24 +56,6 @@ export interface CollapsibleGroupProps extends Omit<
    */
   onChange?: (value: string | string[]) => void;
 
-  /**
-   * Divider style rendered around the group's items — the accordion row
-   * chrome. 'between' draws hairlines between adjacent items; 'all' adds the
-   * group's top and bottom edges. When enabled, the group renders a wrapper
-   * div (it otherwise renders no DOM) and items get 'balanced' density unless
-   * `density` says otherwise. Pair with bare Collapsible children; Card-wrapped
-   * items provide their own separation.
-   * @default "none"
-   */
-  dividers?: CollapsibleGroupDividers;
-
-  /**
-   * Row density controlling trigger and content block padding on the group's
-   * items. Defaults to 'balanced' when dividers are shown; otherwise items
-   * keep their default unpadded look.
-   */
-  density?: CollapsibleGroupDensity;
-
   /**
    * Children — any components that support isCollapsible + value.
    *
@@ -140,26 +92,16 @@ function normalizeToArray(value: string | string[] | undefined): string[] {
 
 /**
  * Groups collapsible components with coordinated open/close behavior.
- * Renders no wrapper DOM unless `dividers` is enabled.
+ * Renders no wrapper DOM.
  *
  * In "single" mode (default), opening one item closes the others.
  * In "multiple" mode, items toggle independently.
  *
  * @compositionHint Wrap Collapsible instances to coordinate their open/close state.
- * Each Collapsible needs a `value` prop to participate. For FAQ-style lists,
- * use `dividers` with bare Collapsible children instead of wrapping each item
- * in Card.
+ * Each Collapsible needs a `value` prop to participate.
  *
  * @example
  * ```
- * <CollapsibleGroup type="single" dividers="between" defaultValue="faq1">
- *   <Collapsible trigger="What is Astryx?" value="faq1">
- *     Astryx is a design system for building internal tools.
- *   </Collapsible>
- *   <Collapsible trigger="How do I start?" value="faq2">
- *     Install the package and import components.
- *   </Collapsible>
- * </CollapsibleGroup>
  * <CollapsibleGroup type="single" defaultValue="faq1">
  *   <VStack gap={2}>
  *     <Card>
@@ -181,14 +123,7 @@ export function CollapsibleGroup({
   defaultValue,
   value: controlledValue,
   onChange,
-  dividers = 'none',
-  density,
   children,
-  ref,
-  xstyle,
-  className,
-  style,
-  ...props
 }: CollapsibleGroupProps) {
   const isControlled = controlledValue !== undefined;
   const [internalValue, setInternalValue] = useState<string[]>(() =>
@@ -239,42 +174,9 @@ export function CollapsibleGroup({
     [isOpen, toggle],
   );
 
-  const hasDividers = dividers !== 'none';
-  const resolvedDensity = density ?? (hasDividers ? 'balanced' : null);
-
-  const presentationValue = useMemo<CollapsibleGroupPresentationValue>(
-    () => ({dividers, density: resolvedDensity}),
-    [dividers, resolvedDensity],
-  );
-
-  // The wrapper anchors divider chrome: 'all' outer borders live here, and it
-  // makes the items' :first-child suppression independent of surrounding
-  // siblings. Without dividers the group stays DOM-less (documented contract),
-  // so ref/xstyle/className/style only take effect in wrapper mode.
-  const content = hasDividers ? (
-    <div
-      ref={ref as React.Ref<HTMLDivElement>}
-      {...mergeProps(
-        themeProps('collapsible-group', {
-          dividers,
-          density: resolvedDensity ?? undefined,
-        }),
-        stylex.props(dividers === 'all' && styles.wrapperAll, xstyle),
-        className,
-        style,
-      )}
-      {...props}>
-      {children}
-    </div>
-  ) : (
-    children
-  );
-
   return (
     <CollapsibleGroupContext value={contextValue}>
-      <CollapsibleGroupPresentationContext value={presentationValue}>
-        {content}
-      </CollapsibleGroupPresentationContext>
+      {children}
     </CollapsibleGroupContext>
   );
 }

package/src/Collapsible/CollapsibleGroupContext.tsx

@@ -5,10 +5,8 @@
 /**
  * @file CollapsibleGroupContext.tsx
  * @input Uses React createContext
- * @output Exports CollapsibleGroupContext, CollapsibleGroupContextValue,
- *   CollapsibleGroupPresentationContext, CollapsibleGroupPresentationValue,
- *   CollapsibleGroupDividers, and CollapsibleGroupDensity types
- * @position Context definitions for collapsible group coordination and presentation
+ * @output Exports CollapsibleGroupContext and CollapsibleGroupContextValue type
+ * @position Context definition for collapsible group coordination
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Collapsible/CollapsibleGroup.tsx (provider)
@@ -35,41 +33,3 @@ export interface CollapsibleGroupContextValue {
 export const CollapsibleGroupContext =
   createContext<CollapsibleGroupContextValue | null>(null);
 CollapsibleGroupContext.displayName = 'CollapsibleGroupContext';
-
-/**
- * Divider style rendered around the items of a CollapsibleGroup.
- * - 'between': hairlines between adjacent items only.
- * - 'all': hairlines between items plus the group's top and bottom edges.
- * - 'none': no dividers (default).
- */
-export type CollapsibleGroupDividers = 'between' | 'all' | 'none';
-
-/**
- * Row density for the items of a CollapsibleGroup, controlling trigger and
- * content block padding. Shares the repo-wide density vocabulary
- * (Table, List, Item).
- */
-export type CollapsibleGroupDensity = 'compact' | 'balanced' | 'spacious';
-
-/**
- * Presentation value provided by CollapsibleGroup so each Collapsible can
- * draw its own group chrome (StyleX has no child selectors, so the group
- * cannot style items from the outside).
- */
-export interface CollapsibleGroupPresentationValue {
-  /** Resolved divider style for the group's items. */
-  dividers: CollapsibleGroupDividers;
-  /** Resolved row density, or null to keep the default (unpadded) look. */
-  density: CollapsibleGroupDensity | null;
-}
-
-/**
- * Context for collapsible group presentation (dividers, density).
- * Kept separate from CollapsibleGroupContext so the public useCollapsible
- * state API is unaffected. Collapsible resets this context around its
- * children so nested collapsibles never inherit row chrome.
- */
-export const CollapsibleGroupPresentationContext =
-  createContext<CollapsibleGroupPresentationValue | null>(null);
-CollapsibleGroupPresentationContext.displayName =
-  'CollapsibleGroupPresentationContext';

package/src/Collapsible/index.ts

@@ -16,10 +16,6 @@ export type {CollapsibleProps} from './Collapsible';
 
 export {CollapsibleGroup} from './CollapsibleGroup';
 export type {CollapsibleGroupProps} from './CollapsibleGroup';
-export type {
-  CollapsibleGroupDividers,
-  CollapsibleGroupDensity,
-} from './CollapsibleGroupContext';
 
 export {useCollapsible} from './useCollapsible';
 export type {

package/src/Collapsible/useCollapsible.ts

@@ -65,11 +65,8 @@ export interface UseCollapsibleReturn {
  *
  * Supports three modes:
  * 1. **Group-controlled**: When inside a CollapsibleGroup with a `value`, defers to group.
- * 2. **Controlled**: When `isOpen` is provided in config, the parent owns state;
- *    `toggle` only calls `onOpenChange` and never mutates internal state.
+ * 2. **Controlled**: When `isOpen` and `onOpenChange` are provided in config.
  * 3. **Uncontrolled**: Self-managed internal state with optional `defaultIsOpen`.
- *    `onOpenChange`, if supplied, is invoked in addition to the internal update —
- *    it is a notification callback, not a signal that the component is controlled.
  *
  * @example
  * ```
@@ -114,26 +111,15 @@ export function useCollapsible(
     isOpen = internalIsOpen;
   }
 
-  // Toggle handler dispatches to the appropriate controller.
-  //
-  // Controlled vs uncontrolled is decided by whether `isOpen` was provided —
-  // mirroring how `isOpen` is derived above. `onOpenChange` is a notification
-  // callback, not a signal of control: an uncontrolled component may still want
-  // to observe changes. So in uncontrolled mode we drive internal state AND
-  // fire the callback; only in controlled mode do we defer entirely to the
-  // parent via the callback.
+  // Toggle handler dispatches to the appropriate controller
   const toggle = () => {
     if (isControlledByGroup && value != null) {
       group.toggle(value);
-      return;
+    } else if (config?.onOpenChange) {
+      config.onOpenChange(!isOpen);
+    } else {
+      setInternalIsOpen(prev => !prev);
     }
-    const next = !isOpen;
-    // Uncontrolled: internal state is the source of truth, so update it.
-    if (config?.isOpen === undefined) {
-      setInternalIsOpen(next);
-    }
-    // Always notify — for both controlled and uncontrolled usage.
-    config?.onOpenChange?.(next);
   };
 
   return {isEnabled, isOpen, toggle};

package/src/CommandPalette/CommandPalette.doc.mjs

@@ -20,10 +20,6 @@ export const docs = {
     'navigation',
   ],
   description: 'Root component. Manages open state, search, keyboard navigation, and composition slots.',
-  // Intentionally a contained isInline preview, not playground.overlay: the
-  // component stays visible on load and knobs stay live, whereas a real
-  // showModal() overlay makes the page inert — see PlaygroundConfig.overlay
-  // in docs-types.ts (#3657).
   playground: {
     defaults: {
       isOpen: true,

package/src/CommandPalette/CommandPalette.tsx

@@ -438,13 +438,11 @@ export function CommandPalette<T extends SearchableItem = SearchableItem>({
   const contextValue = useMemo(
     () => ({
       // Input uses optimisticSearch — reflects keystrokes immediately.
-      // setSearch calls setOptimisticSearch inside a transition for instant
-      // feedback then triggers the async search directly (no effect indirection).
+      // setSearch calls setOptimisticSearch for instant feedback then
+      // triggers the async search directly (no effect indirection).
       search: optimisticSearch,
       setSearch: (query: string) => {
-        startTransition(() => {
-          setOptimisticSearch(query);
-        });
+        setOptimisticSearch(query);
         runSearch(query);
       },
       value,

package/src/CommandPalette/CommandPaletteEmpty.doc.mjs

@@ -16,11 +16,6 @@ export const docs = {
       required: true,
     },
   ],
-  playground: {
-    defaults: {
-      children: 'No results found. Try a different search.',
-    },
-  },
 };
 
 export const docsZh = {

package/src/CommandPalette/CommandPaletteGroup.doc.mjs

@@ -27,16 +27,6 @@ export const docs = {
       description: 'StyleX styles for layout customization. Must be a stylex.create() value.',
     },
   ],
-  playground: {
-    defaults: {
-      heading: 'Navigation',
-      children: [
-        {__element: 'CommandPaletteItem', props: {value: 'home', onSelect: undefined}, children: 'Go Home'},
-        {__element: 'CommandPaletteItem', props: {value: 'settings', onSelect: undefined}, children: 'Open Settings'},
-        {__element: 'CommandPaletteItem', props: {value: 'profile', onSelect: undefined}, children: 'View Profile'},
-      ],
-    },
-  },
 };
 
 export const docsZh = {