@astryxdesign/core 0.4.2 → 0.4.3-canary.00bed29

package/src/MobileNav/MobileNav.tsx

@@ -77,7 +77,19 @@ const styles = stylex.create({
     outline: 'none',
     // Native <dialog> uses display:none when closed.
     // Open state applied via isOpen prop to avoid :where([open]) specificity issues.
+    // `display` participates in the transition with allow-discrete so it flips
+    // to none only after the slide-out finishes. That also keeps the dialog
+    // rendered until close() has actually run: an open modal dialog that isn't
+    // rendered still blocks the whole document, and a browser that fails to
+    // un-block it on close leaves the page inert with no error (#4290).
+    // Deliberately not shortened under reduced motion: `display` is discrete,
+    // so a long hold animates nothing — it is only the window the close has to
+    // land inside. The visible transitions (the drawer's transform and the
+    // backdrop's opacity) are the ones that respect the preference.
     display: 'none',
+    transitionProperty: 'display',
+    transitionDuration: durationVars['--duration-medium'],
+    transitionBehavior: 'allow-discrete',
   },
   open: {
     display: 'flex',
@@ -183,6 +195,75 @@ const dynamicStyles = stylex.create({
   }),
 });
 
+// =============================================================================
+// Close timing
+// =============================================================================
+
+/** Longest the drawer will wait before closing, however long the hold is. */
+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;
+
+/**
+ * Shortest duration in a `transition-duration` list, in ms; null if unreadable.
+ *
+ * Browsers serialise computed `<time>` values in seconds — an authored `410ms`
+ * reads back as `"0.41s"` and a list as `"0.41s, 0.12s"` — so the seconds branch
+ * is the one that runs outside tests. jsdom echoes an inline `250ms` back as-is
+ * and never resolves `var()`, so both units and the unreadable case are covered
+ * directly in MobileNavCloseTiming.test.ts rather than through the component.
+ *
+ * @internal Exported for unit tests.
+ */
+export function parseShortestDurationMs(value: string): number | null {
+  const durations = value
+    .split(',')
+    .map(part => {
+      const trimmed = part.trim();
+      const ms = Number.parseFloat(trimmed);
+      if (!Number.isFinite(ms)) {
+        return null;
+      }
+      return trimmed.endsWith('ms')
+        ? ms
+        : trimmed.endsWith('s')
+          ? ms * 1000
+          : null;
+    })
+    .filter((ms): ms is number => ms !== null);
+
+  return durations.length ? Math.min(...durations) : null;
+}
+
+/**
+ * How long to wait before closing the native dialog.
+ *
+ * The drawer is only rendered for as long as its `display` transition runs, and
+ * closing an unrendered modal dialog is what leaves the page inert (#4290). So
+ * the close has to land inside that hold. The hold is `--duration-medium`,
+ * which themes rewrite — the shipped y2k theme sets it to exactly 250ms — so
+ * read the hold in effect rather than assuming it.
+ */
+function resolveCloseDelay(dialog: HTMLDialogElement): number {
+  // Reduced motion makes the close sooner; it must not make the hold shorter.
+  // Shrinking both leaves no slack — one slow frame between the commit and this
+  // macrotask and the drawer has already stopped being rendered.
+  const cap = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+    ? 0
+    : MAX_CLOSE_DELAY_MS;
+
+  const hold = parseShortestDurationMs(
+    window.getComputedStyle(dialog).transitionDuration,
+  );
+
+  // The hold is unreadable — an unresolved var() outside a real browser.
+  if (hold === null) {
+    return cap;
+  }
+
+  return hold <= 0 ? 0 : Math.min(cap, hold * CLOSE_WITHIN_HOLD);
+}
+
 // =============================================================================
 // Types
 // =============================================================================
@@ -320,6 +401,34 @@ export function MobileNav({
     side === 'auto' ? 'end' : side,
   );
 
+  // Resolve which edge the drawer slides from. Deliberately its own effect,
+  // declared before the open/close effect below so the trigger is still the
+  // active element when `side='auto'` reads it. Keeping it out of that effect
+  // is what stops a `side` change during a close from re-arming the delay: the
+  // CSS hold runs from the commit that started the slide-out and does not
+  // restart, so a fresh full delay could land after the drawer had already
+  // stopped being rendered — #4290 again.
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    if (side === 'auto') {
+      const trigger = document.activeElement as HTMLElement | null;
+      if (trigger && trigger !== document.body) {
+        const rect = trigger.getBoundingClientRect();
+        const triggerCenter = rect.left + rect.width / 2;
+        // eslint-disable-next-line @eslint-react/set-state-in-effect -- side is resolved from trigger layout immediately before showModal()
+        setResolvedSide(
+          triggerCenter < window.innerWidth / 2 ? 'start' : 'end',
+        );
+      }
+    } else {
+      // eslint-disable-next-line @eslint-react/set-state-in-effect -- side prop changes must update the open dialog placement
+      setResolvedSide(side);
+    }
+  }, [isOpen, side]);
+
   // Open/close the dialog via showModal()/close()
   // close() is delayed so the slide-out transition can play.
   useEffect(() => {
@@ -328,28 +437,7 @@ export function MobileNav({
       return;
     }
 
-    if (closeTimeoutRef.current) {
-      clearTimeout(closeTimeoutRef.current);
-      closeTimeoutRef.current = null;
-    }
-
     if (isOpen) {
-      // Determine drawer side from trigger position when auto
-      if (side === 'auto') {
-        const trigger = document.activeElement as HTMLElement | null;
-        if (trigger && trigger !== document.body) {
-          const rect = trigger.getBoundingClientRect();
-          const triggerCenter = rect.left + rect.width / 2;
-          // eslint-disable-next-line @eslint-react/set-state-in-effect -- side is resolved from trigger layout immediately before showModal()
-          setResolvedSide(
-            triggerCenter < window.innerWidth / 2 ? 'start' : 'end',
-          );
-        }
-      } else {
-        // eslint-disable-next-line @eslint-react/set-state-in-effect -- side prop changes must update the open dialog placement
-        setResolvedSide(side);
-      }
-
       if (!dialog.open) {
         dialog.showModal();
       }
@@ -360,13 +448,9 @@ export function MobileNav({
     } else if (dialog.open) {
       document.documentElement.style.overflow = '';
 
-      const duration = window.matchMedia('(prefers-reduced-motion: reduce)')
-        .matches
-        ? 10
-        : 250;
       closeTimeoutRef.current = setTimeout(() => {
         dialog.close();
-      }, duration);
+      }, resolveCloseDelay(dialog));
     }
 
     return () => {
@@ -375,20 +459,27 @@ export function MobileNav({
         closeTimeoutRef.current = null;
       }
       document.documentElement.style.overflow = '';
-      // Close the native dialog on teardown if it's still open. Inside AppShell
-      // the drawer is mounted in an <Activity> that switches to mode="hidden"
-      // when the drawer closes; React then runs this cleanup (with a stale
-      // isOpen) instead of re-running the effect with isOpen=false, so the
-      // close branch above never fires. If we leave the <dialog> `open` here,
-      // showModal() is skipped on the next open (the dialog is already open in
-      // the hidden tree) and the drawer can never be re-opened. Closing it
-      // unconditionally on teardown keeps the native dialog state in sync so a
-      // subsequent open cleanly calls showModal() again.
-      if (dialog.open) {
+    };
+  }, [isOpen]);
+
+  // Close the native dialog on unmount if it's still open. Inside AppShell the
+  // drawer is mounted in an <Activity> that switches to mode="hidden" when the
+  // drawer closes; React then runs effect cleanups (with a stale isOpen)
+  // instead of re-running the effect with isOpen=false, so the close branch
+  // above never fires. If we leave the <dialog> `open` here, showModal() is
+  // skipped on the next open (the dialog is already open in the hidden tree)
+  // and the drawer can never be re-opened — see MobileNavReopen.test.tsx.
+  // This must be a separate unmount-only effect: putting it in the open/close
+  // effect above would close the dialog on every isOpen flip and cut off the
+  // delayed slide-out close.
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    return () => {
+      if (dialog?.open) {
         dialog.close();
       }
     };
-  }, [isOpen, side]);
+  }, []);
 
   // Handle native cancel event (Escape key) — prevent default and route through onOpenChange
   const handleCancel = useCallback(

package/src/MobileNav/MobileNavCloseEdgeCases.test.tsx

@@ -0,0 +1,426 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file MobileNavCloseEdgeCases.test.tsx
+ * @input Uses vitest, @testing-library/react, MobileNav + AppShell + SideNav
+ * @output Edge-case coverage for the deferred close introduced for #4290
+ * @position Testing; guards the close path of MobileNav.tsx
+ *
+ * #4290 moved the unmount close into its own effect so the deferred slide-out
+ * close is no longer cut off by its own cleanup. That split is the risky part:
+ * the close now depends on a timer surviving to fire, and on the unmount-only
+ * effect catching every teardown the timer misses. These tests cover the paths
+ * where the two could disagree and leave a modal dialog open — which blocks the
+ * whole document, whether or not the drawer is rendered.
+ *
+ * The invariant behind all of them: the drawer must never be left open. Being
+ * slow to close is a glitch; never closing is a wedged page.
+ */
+
+import {
+  describe,
+  it,
+  expect,
+  vi,
+  beforeAll,
+  beforeEach,
+  afterEach,
+} from 'vitest';
+import {StrictMode} from 'react';
+import {render, screen, fireEvent, act} from '@testing-library/react';
+import {MobileNav} from './MobileNav';
+import {AppShell} from '../AppShell/AppShell';
+import {SideNav, SideNavItem, SideNavSection} from '../SideNav';
+import {stubMatchMedia} from '../__tests__/stubMatchMedia';
+
+// jsdom doesn't implement showModal/close on <dialog>, so we mock them
+beforeAll(() => {
+  HTMLDialogElement.prototype.showModal =
+    HTMLDialogElement.prototype.showModal ||
+    function (this: HTMLDialogElement) {
+      this.setAttribute('open', '');
+    };
+  HTMLDialogElement.prototype.close =
+    HTMLDialogElement.prototype.close ||
+    function (this: HTMLDialogElement) {
+      this.removeAttribute('open');
+    };
+});
+
+class MockResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+
+// `matches` has to depend on the query: a blanket `matches: true` puts AppShell
+// below its breakpoint, which these tests need, but it also matches
+// `prefers-reduced-motion`, which caps the close delay at 0 — every test here
+// would run against an immediate close while appearing to exercise the real
+// delay. See the header of stubMatchMedia.ts.
+
+beforeEach(() => {
+  vi.stubGlobal('ResizeObserver', MockResizeObserver);
+  stubMatchMedia({reduceMotion: false});
+});
+
+afterEach(() => {
+  document.documentElement.style.overflow = '';
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+});
+
+function Drawer({
+  isOpen,
+  side,
+}: {
+  isOpen: boolean;
+  side?: 'start' | 'end' | 'auto';
+}) {
+  return (
+    <MobileNav
+      isOpen={isOpen}
+      onOpenChange={() => {}}
+      side={side}
+      data-testid="mobile-nav">
+      <span>Nav content</span>
+    </MobileNav>
+  );
+}
+
+function TestShell() {
+  return (
+    <AppShell
+      sideNav={
+        <SideNav>
+          <SideNavSection title="Test" isHeaderHidden>
+            <SideNavItem label="Home" />
+          </SideNavSection>
+        </SideNav>
+      }
+      mobileNav={{breakpoint: 'md'}}>
+      <div>Content</div>
+    </AppShell>
+  );
+}
+
+describe('MobileNav close path edge cases', () => {
+  it('survives StrictMode double-invoked effects', () => {
+    vi.useFakeTimers();
+    try {
+      const {rerender} = render(
+        <StrictMode>
+          <Drawer isOpen />
+        </StrictMode>,
+      );
+      const dialog = screen.getByTestId('mobile-nav');
+
+      // StrictMode mounts effects, tears them down, and mounts them again. The
+      // unmount-only effect closes the dialog during that teardown, so the
+      // open/close effect has to re-open it on the second mount.
+      expect(dialog).toHaveAttribute('open');
+
+      act(() => {
+        rerender(
+          <StrictMode>
+            <Drawer isOpen={false} />
+          </StrictMode>,
+        );
+      });
+      act(() => {
+        vi.advanceTimersByTime(300);
+      });
+      expect(dialog).not.toHaveAttribute('open');
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('closes the dialog when unmounted while fully open', () => {
+    const {unmount} = render(<Drawer isOpen />);
+    const dialog = screen.getByTestId('mobile-nav');
+    expect(dialog).toHaveAttribute('open');
+
+    unmount();
+
+    // Left open, the next showModal() is skipped and the drawer can never be
+    // re-opened (#3091) — and the document stays blocked meanwhile.
+    expect(dialog).not.toHaveAttribute('open');
+  });
+
+  it('does not restart the pending close when the side prop changes', () => {
+    vi.useFakeTimers();
+    try {
+      const {rerender} = render(<Drawer isOpen side="start" />);
+      const dialog = screen.getByTestId('mobile-nav');
+
+      act(() => {
+        rerender(<Drawer isOpen={false} side="start" />);
+      });
+      expect(dialog).toHaveAttribute('open');
+
+      // Most of the way through the pending close...
+      act(() => {
+        vi.advanceTimersByTime(200);
+      });
+      expect(dialog).toHaveAttribute('open');
+
+      // ...then change the side. Side resolution lives in its own effect, so
+      // this has to leave the close alone. Were `side` a dep of the open/close
+      // effect, its cleanup would cancel the pending close and re-arm a fresh
+      // full delay — while the CSS hold keeps running from the commit that
+      // started the slide-out. The close would then land after the drawer had
+      // stopped being rendered, which is the #4290 state again.
+      //
+      // The split advance is the whole point: the total must clear one delay
+      // but not two.
+      act(() => {
+        rerender(<Drawer isOpen={false} side="end" />);
+      });
+      act(() => {
+        vi.advanceTimersByTime(100);
+      });
+
+      expect(dialog).not.toHaveAttribute('open');
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('settles closed after a rapid open/close/open/close burst', () => {
+    vi.useFakeTimers();
+    try {
+      const {rerender} = render(<Drawer isOpen={false} />);
+      const dialog = screen.getByTestId('mobile-nav');
+
+      act(() => {
+        rerender(<Drawer isOpen />);
+      });
+      act(() => {
+        rerender(<Drawer isOpen={false} />);
+      });
+      act(() => {
+        rerender(<Drawer isOpen />);
+      });
+      act(() => {
+        rerender(<Drawer isOpen={false} />);
+      });
+      act(() => {
+        vi.advanceTimersByTime(300);
+      });
+
+      expect(dialog).not.toHaveAttribute('open');
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('restores documentElement overflow once the drawer has closed', () => {
+    vi.useFakeTimers();
+    try {
+      const {rerender} = render(<Drawer isOpen />);
+      const dialog = screen.getByTestId('mobile-nav');
+      expect(document.documentElement.style.overflow).toBe('clip');
+
+      // Two acts on purpose: the close timer is armed by the effect that runs
+      // when the first act flushes, so advancing inside that same act would
+      // advance past nothing and the drawer would never actually close.
+      act(() => {
+        rerender(<Drawer isOpen={false} />);
+      });
+      act(() => {
+        vi.advanceTimersByTime(300);
+      });
+      // Pin the close itself. The effect cleanup resets overflow on every
+      // isOpen flip, so the overflow assertion alone passes even with the whole
+      // close path deleted — the test name would be the only thing left of it.
+      expect(dialog).not.toHaveAttribute('open');
+      // A drawer that closes but leaves the page scroll-locked is its own
+      // flavour of "the page is broken and nothing says why".
+      expect(document.documentElement.style.overflow).toBe('');
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('restores documentElement overflow when unmounted while open', () => {
+    const {unmount} = render(<Drawer isOpen />);
+    expect(document.documentElement.style.overflow).toBe('clip');
+
+    unmount();
+
+    expect(document.documentElement.style.overflow).toBe('');
+  });
+
+  it('leaves no pending close timer behind after unmount', () => {
+    vi.useFakeTimers();
+    try {
+      const {rerender, unmount} = render(<Drawer isOpen />);
+      act(() => {
+        rerender(<Drawer isOpen={false} />);
+      });
+      unmount();
+
+      // The queued close must be cancelled, not left to fire against a
+      // detached node.
+      expect(vi.getTimerCount()).toBe(0);
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('closes inside the display hold when a theme shortens it', () => {
+    // The hold is `--duration-medium`, which themes rewrite: the shipped y2k
+    // theme uses 250ms and the documented "Snappy" preset does too. A close
+    // scheduled on the hold's boundary lands on the frame the drawer stops
+    // being rendered — which is exactly the #4290 state. The delay has to be
+    // derived from the hold actually in effect, not assumed.
+    // Full motion (the file default) — under reduced motion the close is
+    // immediate and the boundary is never exercised.
+    vi.useFakeTimers();
+    try {
+      const hold = 250;
+      const {rerender} = render(
+        <MobileNav
+          isOpen
+          onOpenChange={() => {}}
+          style={{transitionDuration: `${hold}ms`}}
+          data-testid="mobile-nav">
+          <span>Nav content</span>
+        </MobileNav>,
+      );
+      const dialog = screen.getByTestId('mobile-nav');
+      expect(getComputedStyle(dialog).transitionDuration).toBe(`${hold}ms`);
+
+      act(() => {
+        rerender(
+          <MobileNav
+            isOpen={false}
+            onOpenChange={() => {}}
+            style={{transitionDuration: `${hold}ms`}}
+            data-testid="mobile-nav">
+            <span>Nav content</span>
+          </MobileNav>,
+        );
+      });
+      act(() => {
+        vi.advanceTimersByTime(hold - 1);
+      });
+
+      expect(dialog).not.toHaveAttribute('open');
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('closes on the next macrotask when the hold is zero', () => {
+    // A theme can set --duration-medium to 0 — nothing validates motion values
+    // — and then `display` flips on the next style recalc with no hold at all.
+    // No delay is safe at that point, so the close has to go out immediately
+    // rather than fall back to the cap and land a quarter-second after the
+    // drawer stopped being rendered, which is #4290 restored.
+    vi.useFakeTimers();
+    try {
+      const style = {transitionDuration: '0ms'};
+      const {rerender} = render(
+        <MobileNav
+          isOpen
+          onOpenChange={() => {}}
+          style={style}
+          data-testid="mobile-nav">
+          <span>Nav content</span>
+        </MobileNav>,
+      );
+      const dialog = screen.getByTestId('mobile-nav');
+
+      act(() => {
+        rerender(
+          <MobileNav
+            isOpen={false}
+            onOpenChange={() => {}}
+            style={style}
+            data-testid="mobile-nav">
+            <span>Nav content</span>
+          </MobileNav>,
+        );
+      });
+      act(() => {
+        vi.advanceTimersByTime(1);
+      });
+
+      expect(dialog).not.toHaveAttribute('open');
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('closes on the next macrotask under reduced motion', () => {
+    // Reduced motion should make the close *sooner*, not the safety margin
+    // *smaller*. Shortening the hold to match leaves no slack: one slow frame
+    // between the commit and the close macrotask and the drawer has already
+    // stopped being rendered — #4290 again, on the accessibility setting.
+    //
+    // Only the delay is assertable here. That the hold itself stays long is a
+    // CSS fact — styles.dialog carries no reduced-motion override, unlike
+    // styles.drawer and ::backdrop — and jsdom does not evaluate media queries
+    // inside stylesheets, so there is nothing to read back.
+    stubMatchMedia({reduceMotion: true});
+    vi.useFakeTimers();
+    try {
+      const style = {transitionDuration: '410ms'};
+      const {rerender} = render(
+        <MobileNav
+          isOpen
+          onOpenChange={() => {}}
+          style={style}
+          data-testid="mobile-nav">
+          <span>Nav content</span>
+        </MobileNav>,
+      );
+      const dialog = screen.getByTestId('mobile-nav');
+
+      act(() => {
+        rerender(
+          <MobileNav
+            isOpen={false}
+            onOpenChange={() => {}}
+            style={style}
+            data-testid="mobile-nav">
+            <span>Nav content</span>
+          </MobileNav>,
+        );
+      });
+      act(() => {
+        vi.advanceTimersByTime(1);
+      });
+
+      expect(dialog).not.toHaveAttribute('open');
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  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');
+
+    fireEvent(dialog, new Event('cancel', {cancelable: true, bubbles: false}));
+
+    expect(dialog).not.toHaveAttribute('open');
+  });
+
+  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');
+
+    // A click landing on the dialog itself, not the drawer panel, is a
+    // backdrop dismiss.
+    fireEvent.click(dialog);
+
+    expect(dialog).not.toHaveAttribute('open');
+  });
+});

package/src/MobileNav/MobileNavCloseTiming.test.ts

@@ -0,0 +1,58 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file MobileNavCloseTiming.test.ts
+ * @input Uses vitest, parseShortestDurationMs from MobileNav
+ * @output Unit coverage for the close-delay duration parsing (#4290)
+ * @position Testing; guards the timing helper behind MobileNav's deferred close
+ *
+ * Through the component this helper is only ever reachable via jsdom, which
+ * echoes an inline `250ms` back verbatim and never resolves `var()`. Browsers do
+ * neither: they serialise computed `<time>` values in seconds, so `"0.41s"` is
+ * the only shape the helper sees in production and `"250ms"` is a shape it never
+ * sees. Reading it directly is the only way the seconds branch, a list, and a
+ * zero hold get covered at all.
+ */
+
+import {describe, it, expect} from 'vitest';
+import {parseShortestDurationMs} from './MobileNav';
+
+describe('parseShortestDurationMs', () => {
+  it.each([
+    // How browsers actually serialise a computed transition-duration.
+    ['0.41s', 410],
+    ['0.25s', 250],
+    ['1s', 1000],
+    // jsdom's shape: an inline declaration echoed back unchanged.
+    ['250ms', 250],
+    // Lists. The dialog transitions one property today, but a style or xstyle
+    // prop can add more, and only the shortest entry is safe to close inside.
+    ['0.41s, 0.12s', 120],
+    ['120ms, 410ms', 120],
+    // A zero hold is the #4290 state itself. It has to read as 0 — meaning
+    // "close now" — rather than as unreadable, which would fall back to the cap
+    // and schedule the close long after the drawer stopped being rendered.
+    ['0s', 0],
+    ['0ms', 0],
+  ])('reads %j as %ims', (value, expected) => {
+    expect(parseShortestDurationMs(value)).toBeCloseTo(expected, 6);
+  });
+
+  it.each([
+    // An unresolved var() — jsdom, or any style read outside a browser.
+    ['var(--duration-medium)'],
+    // A CSS math function reads as unreadable too, so the caller falls back to
+    // the cap rather than deriving a delay from a number it did not compute.
+    ['max(150ms, var(--duration-medium))'],
+    // A bare number is not a duration.
+    ['250'],
+    [''],
+    ['   '],
+  ])('reports %j as unreadable', value => {
+    expect(parseShortestDurationMs(value)).toBeNull();
+  });
+
+  it('skips unreadable entries rather than discarding the whole list', () => {
+    expect(parseShortestDurationMs('var(--x), 0.3s')).toBeCloseTo(300, 6);
+  });
+});