@astryxdesign/core 0.7.1 → 0.7.2-canary.020e1fe

package/src/List/ListItem.tsx

@@ -4,9 +4,10 @@
 
 /**
  * @file ListItem.tsx
- * @input Uses React, ReactNode, StyleXStyles, theme tokens, List edge compensation,
- *   CheckboxInput, and the marker or task checkbox a ListMarkerScope sets
- *   (Markdown's nested lists and the task items of mixed lists)
+ * @input Uses React, ReactNode, StyleXStyles, theme tokens, the List row edge
+ *   treatment, CheckboxInput, and the marker or task checkbox a
+ *   ListMarkerScope sets (Markdown's nested lists and the task items of mixed
+ *   lists)
  * @output Exports ListItem component, ListItemProps type
  * @position Core implementation; consumed by List, index.ts, tested by List.test.tsx
  *
@@ -23,6 +24,7 @@
 
 import {use, type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
+import type {StyleXStyles} from '@stylexjs/stylex';
 import {
   colorVars,
   spacingVars,
@@ -34,7 +36,7 @@ import {ListContext, type ListMarker} from './ListContext';
 import {CheckboxInput} from '../CheckboxInput';
 import {mergeProps} from '../utils';
 import {Item} from '../Item';
-import type {ItemSwipeActions, ItemSwipeBehavior} from '../Item';
+import type {ItemAlign, ItemSwipeActions, ItemSwipeBehavior} from '../Item';
 import {themeProps} from '../utils/themeProps';
 
 // =============================================================================
@@ -44,6 +46,13 @@ import {themeProps} from '../utils/themeProps';
 export interface ListItemProps extends BaseProps<HTMLLIElement> {
   /** Ref forwarded to the root element */
   ref?: React.Ref<HTMLLIElement>;
+  /**
+   * Vertical alignment of the start and end content against the label,
+   * forwarded to Item. Use `first-line` to keep the start and end content level with the
+   * first line of a wrapped label.
+   * @default 'center'
+   */
+  align?: ItemAlign;
   /**
    * Primary text label for the item.
    *
@@ -142,23 +151,37 @@ const styles = stylex.create({
   withCounter: {
     counterIncrement: 'astryx-list',
   },
-  // List's inline edge compensation cancels as much of the row's built-in
-  // inline inset as the container padding allows (e.g. under a heading).
-  // The margins read --_item-inset-inline — the same variable Item derives
-  // its paddingInline from — on the row element itself (custom properties
-  // only cascade downward, so the <ul> could not read it). Density changes
-  // and theme paddingInline overrides on `item` move both values together.
-  // Each edge clamps against ITS OWN container padding var: a single
-  // start-var clamp on both margins over-cancels the end edge under
-  // asymmetric container padding (16px start / 4px end) and the selected
-  // row paints past the outer border. Logical properties keep RTL correct,
-  // and a zero-padding/full-bleed surface (min(inset, 0px) = 0px) leaves
-  // the row in place instead of pulling it outside its content edge.
-  inlineEdgeCompensation: {
+  // List's edge treatments. Each reads --_item-inset-inline, the variable
+  // Item derives its paddingInline from, on the row itself (custom properties
+  // only cascade downward, so the <ul> cannot read it); density and theme
+  // paddingInline overrides on `item` move it. Each edge resolves against ITS
+  // OWN container padding var, so asymmetric padding never over-reaches an
+  // edge, and logical properties keep RTL correct.
+  //
+  // 'flush': no inset, so content meets the row's edges.
+  edgeFlush: {
+    '--_item-inset-inline': '0px',
+  },
+  // 'outset': the list reaches the container's padding edge (List.tsx); the
+  // row steps back in by whatever padding its inset does not fill, so the row
+  // reaches min(inset, container padding) past the content line and its text
+  // lands on that line when the padding is at least the inset.
+  edgeOutset: {
     marginInlineStart:
-      'calc(-1 * min(var(--_item-inset-inline), var(--container-padding-inline-start, 0px)))',
+      'max(var(--container-padding-inline-start, 0px) - var(--_item-inset-inline), 0px)',
     marginInlineEnd:
-      'calc(-1 * min(var(--_item-inset-inline), var(--container-padding-inline-end, 0px)))',
+      'max(var(--container-padding-inline-end, 0px) - var(--_item-inset-inline), 0px)',
+  },
+  // 'bleed': the row fills the list, which reaches the container's padding
+  // edge (List.tsx); its text sits on the container's padding line, never
+  // closer to the row's edge than its own inset. Square corners: the row
+  // meets the container's straight sides.
+  edgeBleed: {
+    paddingInlineStart:
+      'max(var(--container-padding-inline-start, 0px), var(--_item-inset-inline))',
+    paddingInlineEnd:
+      'max(var(--container-padding-inline-end, 0px), var(--_item-inset-inline))',
+    borderRadius: 0,
   },
   withDivider: {
     borderBlockEndWidth: borderVars['--border-width'],
@@ -296,6 +319,7 @@ export function ListItem({
   rel,
   isDisabled = false,
   isSelected = false,
+  align,
   xstyle,
   className,
   style,
@@ -305,8 +329,8 @@ export function ListItem({
   const ctx = use(ListContext);
   const density = ctx?.density ?? 'balanced';
   const hasDividers = ctx?.hasDividers ?? false;
+  const edge = ctx?.edge ?? 'padded';
   const listStyle = ctx?.listStyle ?? 'none';
-  const edgeCompensation = ctx?.edgeCompensation;
   const hasMarkers = listStyle !== 'none';
   // ListMarkerScope may name another marker for this item.
   const markerKind: ListMarker | null =
@@ -360,14 +384,19 @@ export function ListItem({
       rel={rel}
       isDisabled={isDisabled}
       isSelected={isSelected}
+      align={align}
       density={density}
-      xstyle={[
-        hasMarkers && styles.withCounter,
-        hasDividers && styles.withDivider,
-        hasDividers && embeddedStyles.noRadius,
-        edgeCompensation === 'inline' && styles.inlineEdgeCompensation,
-        xstyle,
-      ]}
+      xstyle={
+        [
+          hasMarkers && styles.withCounter,
+          hasDividers && styles.withDivider,
+          hasDividers && embeddedStyles.noRadius,
+          edge === 'flush' && styles.edgeFlush,
+          edge === 'outset' && styles.edgeOutset,
+          edge === 'bleed' && styles.edgeBleed,
+          xstyle,
+        ] as StyleXStyles
+      }
       {...mergeProps(themeProps('list-item'), {className, style})}
       {...restProps}
     />

package/src/List/index.ts

@@ -12,6 +12,6 @@
  */
 
 export {List} from './List';
-export type {ListProps, ListStyle, ListDensity} from './List';
+export type {ListProps, ListStyle, ListDensity, ListEdge} from './List';
 export {ListItem} from './ListItem';
 export type {ListItemProps} from './ListItem';

package/src/Markdown/Markdown.tsx

@@ -405,6 +405,16 @@ const markdownTableCellStyles = stylex.create({
   code: {
     wordBreak: 'normal',
   },
+  // The grid's outer edge. `dividers="grid"` draws the lines *between* cells
+  // and stops at the table's rim, so without this the top, bottom, and sides
+  // stay open and the grid reads as unfinished. On the table element, not the
+  // wrapper, so `border-collapse: collapse` merges it with the cell lines
+  // into one 1px rule rather than doubling up at the edge.
+  tableOuterEdge: {
+    borderWidth: borderVars['--border-width'],
+    borderStyle: 'solid',
+    borderColor: colorVars['--color-border'],
+  },
 });
 
 /**
@@ -1905,7 +1915,10 @@ function renderBlock(
             ),
           )}
           {...lineStamps}>
-          <Table dividers="rows" textOverflow="wrap">
+          <Table
+            dividers="grid"
+            textOverflow="wrap"
+            xstyle={markdownTableCellStyles.tableOuterEdge}>
             <TableHeader>
               <TableRow>
                 {header?.children.map((h, i) => (

package/src/Markdown/plugins/frontmatter.test.tsx

@@ -117,6 +117,31 @@ describe('createMarkdownFrontmatter', () => {
     ).not.toThrow();
   });
 
+  it('accepts the decoded fields record as metadata (identity parse)', () => {
+    const fields = createMarkdownFrontmatter({
+      name: 'fields',
+      parse: record => record,
+    });
+    const source = '---\ntitle: Release notes\n__proto__: kept\n---\n# Shipped';
+
+    const parsed = fields.parse(source);
+    expect(parsed).toEqual({
+      status: 'match',
+      contentStart: source.indexOf('# Shipped'),
+      metadata: {title: 'Release notes', ['__proto__']: 'kept'},
+    });
+    if (parsed.status !== 'match') {
+      throw new Error('expected a frontmatter match');
+    }
+    // A field named like a prototype key stays an ordinary own field.
+    expect(Object.hasOwn(parsed.metadata, '__proto__')).toBe(true);
+    expect(Object.getPrototypeOf(parsed.metadata)).toBe(Object.prototype);
+
+    const root = parseMarkdownAst(source, {plugins: [fields.plugin]});
+    expect(fields.getMetadata(root)).toEqual(parsed.metadata);
+    expect(JSON.stringify(root)).not.toContain('title: Release notes');
+  });
+
   it('returns a transform plugin that composes in the ordered pipeline', () => {
     expectTypeOf<MarkdownTransform>().toBeFunction();
     const root = parseMarkdownAst(SOURCE, {plugins: [documentMetadata.plugin]});

package/src/Markdown/plugins/frontmatter.ts

@@ -104,18 +104,22 @@ function readFrontmatter(source: string):
   if (close == null) {
     return {status: 'defer'};
   }
-  const fields: Record<string, string> = Object.create(null);
+  const entries = new Map<string, string>();
   for (const line of body.slice(0, close.index).split(/\r?\n/)) {
     if (line.trim() === '') {
       continue;
     }
     const separator = line.indexOf(':');
     const key = line.slice(0, separator).trim();
-    if (separator <= 0 || key === '' || Object.hasOwn(fields, key)) {
+    if (separator <= 0 || key === '' || entries.has(key)) {
       return {status: 'none'};
     }
-    fields[key] = line.slice(separator + 1).trim();
+    entries.set(key, line.slice(separator + 1).trim());
   }
+  // A plain object, so a parser that returns the record unchanged passes the
+  // JSON-like metadata check. `fromEntries` defines every key as an own data
+  // property, so a field named `__proto__` stays a field.
+  const fields: Record<string, string> = Object.fromEntries(entries);
   let end = openingLength + close.index + close[0].length;
   if (source.startsWith('\r\n', end)) {
     end += 2;

package/src/MetadataList/MetadataList.doc.mjs

@@ -7,7 +7,7 @@ export const docs = {
   displayName: 'Metadata List',
   group: 'MetadataList',
   category: 'Table & List',
-  keywords: ["metadata","description","definition","keyvalue","properties","details","attributes","summary"],
+  keywords: ["metadata","description","definition","keyvalue","properties","details","attributes","summary","descriptionlist","descriptions"],
   theming: {
     targets: [
       {
@@ -43,8 +43,8 @@ export const docs = {
     {
       name: 'label',
       type: "{ position?: 'start' | 'top', width?: number | string }",
-      description: "Label display configuration. position controls label placement, width sets a custom label column width. Defaults to { position: 'top' } for multi-column layouts.",
-      default: "{ position: 'start' } (single-column) / { position: 'top' } (multi-column)",
+      description: "Label display configuration. position controls label placement, width sets a custom label column width. Defaults to { position: 'top' } for multi-column layouts. Position is ignored in horizontal mode, which always uses { position: 'top' }.",
+      default: "{ position: 'start' } (vertical single-column) / { position: 'top' } (multi-column or horizontal)",
     },
     {
       name: 'maxNumOfItems',

package/src/MetadataList/MetadataList.test.tsx

@@ -124,6 +124,30 @@ describe('MetadataList', () => {
     expect(screen.getByText('B')).toBeInTheDocument();
   });
 
+  it('uses top labels in horizontal orientation even when position is start', () => {
+    render(
+      <MetadataList orientation="horizontal" label={{position: 'start'}}>
+        <MetadataListItem label="A">1</MetadataListItem>
+      </MetadataList>,
+    );
+
+    const item = screen.getByRole('term').closest('.astryx-metadata-list-item');
+    expect(item).toContainElement(screen.getByRole('definition'));
+  });
+
+  it('defaults to side labels and preserves width when position is omitted', () => {
+    const {container} = render(
+      <MetadataList label={{width: 120}}>
+        <MetadataListItem label="A">1</MetadataListItem>
+      </MetadataList>,
+    );
+
+    const list = container.querySelector('dl');
+    expect(list?.getAttribute('style')).toContain('120px minmax(0, 1fr)');
+    expect(screen.getByRole('term').parentElement).toBe(list);
+    expect(screen.getByRole('definition').parentElement).toBe(list);
+  });
+
   describe('numeric columns', () => {
     // A fixed column count is a runtime value, so it arrives as a StyleX
     // dynamic style: the template lands in the element's inline style (as the
@@ -163,6 +187,20 @@ describe('MetadataList', () => {
       expect(gridTemplateOf(container)).not.toContain('repeat(');
     });
 
+    it('defaults to top labels for columns={2} with a width-only label config', () => {
+      const {container} = render(
+        <MetadataList columns={2} label={{width: 260}}>
+          <MetadataListItem label="A">1</MetadataListItem>
+        </MetadataList>,
+      );
+
+      expect(gridTemplateOf(container)).toContain('repeat(2, 1fr)');
+      const item = screen
+        .getByRole('term')
+        .closest('.astryx-metadata-list-item');
+      expect(item).toContainElement(screen.getByRole('definition'));
+    });
+
     it('ignores numeric columns in horizontal orientation', () => {
       const {container} = render(
         <MetadataList columns={3} orientation="horizontal">

package/src/MetadataList/MetadataList.tsx

@@ -206,7 +206,14 @@ export function MetadataList({
     columns === 'multi' || (typeof columns === 'number' && columns > 1);
   // Default to 'top' for multi-column and horizontal layouts since side labels
   // don't work well when items are in separate grid cells.
-  const labelConfig = label ?? (isMultiColumn ? LABEL_TOP : LABEL_START);
+  const defaultLabelConfig = isMultiColumn ? LABEL_TOP : LABEL_START;
+  const labelConfig = useMemo(
+    () => ({
+      ...label,
+      position: label?.position ?? defaultLabelConfig.position,
+    }),
+    [label, defaultLabelConfig],
+  );
   const [isShowAll, setIsShowAll] = useState(false);
   const contentId = useId();
   const t = useTranslator();

package/src/MetadataList/MetadataListContext.tsx

@@ -12,7 +12,7 @@
 import {createLayerScopedContext as createContext} from '../Layer/layerScopedContext';
 
 export interface MetadataListLabelConfig {
-  position: 'start' | 'top';
+  position?: 'start' | 'top';
   width?: number | string;
 }
 

package/src/MobileNav/MobileNav.tsx

@@ -260,8 +260,15 @@ const dynamicStyles = stylex.create({
 // Close timing
 // =============================================================================
 
-/** Longest the drawer will wait before closing, however long the hold is. */
-const MAX_CLOSE_DELAY_MS = 250;
+/**
+ * Longest the drawer will wait before closing, however long the hold is.
+ *
+ * Exported so `AppShell` can defer hiding this drawer's `Activity` boundary
+ * by at least this long too (`ACTIVITY_HIDE_BUFFER_MS` in AppShell.tsx) —
+ * otherwise Activity's `display: none !important` lands before this delay's
+ * own scheduled `dialog.close()` has a chance to run (#5701).
+ */
+export const MAX_CLOSE_DELAY_MS = 250;
 /** Fraction of the hold to close at, so the close never lands on its boundary. */
 const CLOSE_WITHIN_HOLD = 0.6;
 
@@ -488,6 +495,21 @@ export function MobileNav({
   // Element that was focused when the drawer opened; focus goes back to it
   // once the native dialog has closed (see closeAndRestoreFocus).
   const triggerElementRef = useRef<HTMLElement | null>(null);
+
+  // Keeps the dialog rendered from the commit that closes it until the delayed
+  // `close()` below has run. The `display` transition on the dialog is meant to
+  // do this, but a browser that does not hold a discrete `display` transition
+  // (WebKit) drops the dialog to `display: none` at once while it is still an
+  // open modal: nothing is visible, yet the whole page stays inert until the
+  // timer fires. Set during render, so it is already true in the commit that
+  // closes. The drawer's transform and the backdrop stay keyed to `isOpen`, so
+  // the slide-out is unchanged.
+  const [isCloseHeld, setIsCloseHeld] = useState(false);
+  const [wasOpen, setWasOpen] = useState(isOpen);
+  if (wasOpen !== isOpen) {
+    setWasOpen(isOpen);
+    setIsCloseHeld(!isOpen);
+  }
   const gutterRef = useRef<ScrollbarGutterHold | null>(null);
 
   // Gives back the gutter held open in place of the hidden scrollbar.
@@ -563,7 +585,12 @@ export function MobileNav({
 
       closeTimeoutRef.current = setTimeout(() => {
         closeAndRestoreFocus(dialog, triggerElementRef);
+        setIsCloseHeld(false);
       }, resolveCloseDelay(dialog));
+    } else {
+      // Nothing is open, so there is no close to hold the dialog for, and no
+      // close timer is left to release the hold.
+      setIsCloseHeld(false);
     }
 
     return () => {
@@ -647,7 +674,7 @@ export function MobileNav({
           layerStructureReset.reset,
           styles.dialog,
           overlayPaddingReset.reset,
-          isOpen && styles.open,
+          (isOpen || isCloseHeld) && styles.open,
           styles.backdrop,
           isOpen && styles.backdropOpen,
           xstyle,

package/src/MobileNav/MobileNavCloseEdgeCases.test.tsx

@@ -26,7 +26,7 @@ import {
   beforeEach,
   afterEach,
 } from 'vitest';
-import {StrictMode} from 'react';
+import {StrictMode, useLayoutEffect} from 'react';
 import {render, screen, fireEvent, act} from '@testing-library/react';
 import {MobileNav} from './MobileNav';
 import {AppShell} from '../AppShell/AppShell';
@@ -136,6 +136,42 @@ describe('MobileNav close path edge cases', () => {
     }
   });
 
+  // A browser that does not hold a discrete `display` transition (WebKit)
+  // drops the dialog to `display: none` the moment the open styling goes, while
+  // it is still an open modal: nothing is visible, yet the page stays inert
+  // until the close timer fires. So the dialog's own open styling has to be
+  // held by the component, not left to that transition. jsdom applies no
+  // StyleX styles, so this reads the readable class names StyleX emits in
+  // tests: the `open` class (display) is held through the closing commit, the
+  // `backdropOpen` class is not, and the hold ends when the dialog closes.
+  it('keeps the dialog rendered until its delayed close has run', () => {
+    vi.useFakeTimers();
+    try {
+      const {rerender} = render(<Drawer isOpen />);
+      const dialog = screen.getByTestId('mobile-nav');
+      expect(dialog.className).toMatch(/styles\.open/);
+      expect(dialog.className).toMatch(/styles\.backdropOpen/);
+
+      act(() => {
+        rerender(<Drawer isOpen={false} />);
+      });
+      // Still an open modal, so still rendered; only the backdrop's open
+      // styling (the fade-out) has gone.
+      expect(dialog).toHaveAttribute('open');
+      expect(dialog.className).toMatch(/styles\.open/);
+      expect(dialog.className).not.toMatch(/styles\.backdropOpen/);
+
+      act(() => {
+        vi.advanceTimersByTime(300);
+      });
+      // Closed: the hold is released along with the dialog.
+      expect(dialog).not.toHaveAttribute('open');
+      expect(dialog.className).not.toMatch(/styles\.open/);
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
   it('closes the dialog when unmounted while fully open', () => {
     const {unmount} = render(<Drawer isOpen />);
     const dialog = screen.getByTestId('mobile-nav');
@@ -401,26 +437,148 @@ describe('MobileNav close path edge cases', () => {
   });
 
   it('closes the AppShell drawer when dismissed with Escape', () => {
-    render(<TestShell />);
-    fireEvent.click(screen.getByRole('button', {name: /open navigation/i}));
-    const dialog = screen.getAllByRole('dialog', {hidden: true})[0];
-    expect(dialog).toHaveAttribute('open');
+    // Fake timers: AppShell now defers hiding this drawer's Activity boundary
+    // (#5701) so MobileNav's own close effect gets a real chance to run —
+    // the dialog closes via its normal deferred setTimeout, not synchronously.
+    vi.useFakeTimers();
+    try {
+      render(<TestShell />);
+      act(() => {
+        fireEvent.click(screen.getByRole('button', {name: /open navigation/i}));
+      });
+      const dialog = screen.getAllByRole('dialog', {hidden: true})[0];
+      expect(dialog).toHaveAttribute('open');
 
-    fireEvent(dialog, new Event('cancel', {cancelable: true, bubbles: false}));
+      act(() => {
+        fireEvent(
+          dialog,
+          new Event('cancel', {cancelable: true, bubbles: false}),
+        );
+      });
+      act(() => {
+        vi.advanceTimersByTime(300);
+      });
 
-    expect(dialog).not.toHaveAttribute('open');
+      expect(dialog).not.toHaveAttribute('open');
+    } finally {
+      vi.useRealTimers();
+    }
   });
 
   it('closes the AppShell drawer when the backdrop is clicked', () => {
-    render(<TestShell />);
-    fireEvent.click(screen.getByRole('button', {name: /open navigation/i}));
-    const dialog = screen.getAllByRole('dialog', {hidden: true})[0];
-    expect(dialog).toHaveAttribute('open');
+    vi.useFakeTimers();
+    try {
+      render(<TestShell />);
+      act(() => {
+        fireEvent.click(screen.getByRole('button', {name: /open navigation/i}));
+      });
+      const dialog = screen.getAllByRole('dialog', {hidden: true})[0];
+      expect(dialog).toHaveAttribute('open');
 
-    // A click landing on the dialog itself, not the drawer panel, is a
-    // backdrop dismiss.
-    fireEvent.click(dialog);
+      // A click landing on the dialog itself, not the drawer panel, is a
+      // backdrop dismiss.
+      act(() => {
+        fireEvent.click(dialog);
+      });
+      act(() => {
+        vi.advanceTimersByTime(300);
+      });
 
-    expect(dialog).not.toHaveAttribute('open');
+      expect(dialog).not.toHaveAttribute('open');
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  // #5701: AppShell mounts the drawer inside a React.Activity boundary that
+  // used to flip to mode="hidden" in the SAME commit as the close, which
+  // forced this file's own unmount-only safety-net effect to call
+  // dialog.close() synchronously — closing correctly, but skipping the
+  // slide-out transition entirely, because Activity's display:none landed
+  // before any transition could run. AppShell now defers that flip, so the
+  // dialog should still be open (and rendered) for a beat after closing,
+  // not synchronously cut off.
+  it('keeps the drawer open long enough for its close transition to run (#5701)', () => {
+    vi.useFakeTimers();
+    try {
+      render(<TestShell />);
+      act(() => {
+        fireEvent.click(screen.getByRole('button', {name: /open navigation/i}));
+      });
+      const dialog = screen.getAllByRole('dialog', {hidden: true})[0];
+      expect(dialog).toHaveAttribute('open');
+
+      act(() => {
+        fireEvent.click(
+          screen.getByRole('button', {name: /close navigation/i}),
+        );
+      });
+
+      // Immediately after closing, with no timers advanced: the old
+      // synchronous-hide bug closed the dialog on this exact tick. The fix
+      // means it must still be open here — Activity hasn't hidden the
+      // subtree yet, so MobileNav's own deferred close effect is still the
+      // one in control.
+      expect(dialog).toHaveAttribute('open');
+
+      // MobileNav's own close delay (capped at 250ms) runs first: about
+      // 260ms after the click the dialog has closed on its own timing while
+      // AppShell's Activity boundary (held for 250ms + 50ms) still shows the
+      // subtree. Hiding first would cut off that close (#5701).
+      act(() => {
+        vi.advanceTimersByTime(260);
+      });
+      expect(dialog).not.toHaveAttribute('open');
+      // Activity hides its subtree with an inline `display: none`; a closed
+      // dialog's own UA style does not count here.
+      expect(dialog.style.display).not.toBe('none');
+
+      // After the hold, Activity hides the subtree.
+      act(() => {
+        vi.advanceTimersByTime(60);
+      });
+      expect(dialog.style.display).toBe('none');
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+  // A controlled open must be visible in the commit that carries it. The
+  // Activity boundary only defers the CLOSE; if opening waited for an effect
+  // to copy the open state, the drawer would render hidden for one commit
+  // with `isOpen` already true.
+  it('shows a controlled open in the same commit, not one effect later', () => {
+    const commits: {isOpen: boolean; isHidden: boolean}[] = [];
+    function Probe({isOpen}: {isOpen: boolean}) {
+      useLayoutEffect(() => {
+        const drawer = document.querySelector('dialog');
+        commits.push({
+          isOpen,
+          isHidden:
+            drawer != null && getComputedStyle(drawer).display === 'none',
+        });
+      });
+      return null;
+    }
+    const shell = (isOpen: boolean) => (
+      <AppShell
+        sideNav={
+          <SideNav>
+            <SideNavSection title="Test" isHeaderHidden>
+              <SideNavItem label="Home" />
+            </SideNavSection>
+          </SideNav>
+        }
+        mobileNav={{breakpoint: 'md', isOpen, onOpenChange: () => {}}}>
+        <Probe isOpen={isOpen} />
+        <div>Content</div>
+      </AppShell>
+    );
+
+    const {rerender} = render(shell(false));
+    rerender(shell(true));
+
+    const openCommits = commits.filter(commit => commit.isOpen);
+    expect(openCommits.length).toBeGreaterThan(0);
+    expect(openCommits.every(commit => !commit.isHidden)).toBe(true);
   });
 });

package/src/MoreMenu/MoreMenu.test.tsx

@@ -9,11 +9,15 @@
  * SYNC: When MoreMenu.tsx changes, update tests to match new behavior
  */
 
-import {describe, it, expect, vi, beforeEach} from 'vitest';
+import {describe, it, expect, vi, beforeAll, beforeEach} from 'vitest';
 import {render, screen, fireEvent, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {MoreMenu} from './MoreMenu';
 import {DropdownMenu} from '../DropdownMenu/DropdownMenu';
+import {warmMenuBottomSheet} from '../DropdownMenu/__tests__/warmMenuBottomSheet';
+
+// DropdownMenu's touch sheet is loaded lazily; resolve it once up front.
+beforeAll(warmMenuBottomSheet, 20000);
 
 // Mock showPopover and hidePopover methods since they're not implemented in jsdom
 beforeEach(() => {