@astryxdesign/core 0.7.5 → 0.7.6-canary.5cd7a15

package/src/utils/interactionModality.ts

@@ -6,7 +6,9 @@
  * @file interactionModality.ts
  * @input Global pointerdown/keydown events
  * @output `useInteractionModalityTracking()` activates document-lifetime tracking;
- *   `getInteractionModality()` reads how the user last interacted
+ *   `getInteractionModality()` reads how the user last interacted;
+ *   `trackInteractionModalityIn(doc)` and `getInteractionModality(doc)` do the
+ *   same for a second document
  * @position Internal document-wide singleton; used where `:focus-visible` alone
  *   is too broad
  *
@@ -26,8 +28,12 @@
  * The store lives on `document`, so duplicate Astryx bundles share one state
  * value and one listener pair. The first mounted consumer activates tracking;
  * the listeners then remain for the document lifetime so input during a gap
- * between consumers is not lost. Importing this module has no DOM side effects,
- * and server rendering keeps the keyboard-safe default.
+ * between consumers is not lost. A second document (a same-origin iframe, a
+ * Document Picture-in-Picture window) gets its own store when a component
+ * tracks it, since input there never reaches the page's listeners; its
+ * listeners stay only while a consumer there is mounted. Importing this module
+ * has no DOM side effects, and server rendering keeps the keyboard-safe
+ * default.
  */
 
 import {useEffect} from 'react';
@@ -37,6 +43,8 @@ export type InteractionModality = 'keyboard' | 'pointer';
 type InteractionModalityStore = {
   modality: InteractionModality;
   isListening: boolean;
+  /** Mounted consumers holding a second document's listeners. */
+  consumers?: number;
   onPointerDown: () => void;
   onKeyDown: (event: KeyboardEvent) => void;
 };
@@ -107,8 +115,59 @@ export function useInteractionModalityTracking(): void {
   useEffect(() => trackInteractionModality(), []);
 }
 
-/** How the user last interacted with the page. */
-export function getInteractionModality(): InteractionModality {
+/**
+ * Track a second document while a consumer there is mounted: a component an
+ * app renders into a same-origin iframe or a Document Picture-in-Picture
+ * window gets input there that never reaches the page's listeners. The first
+ * consumer installs the document's listener pair and the last one's cleanup
+ * removes it. Read the value with `getInteractionModality(doc)`. The page's
+ * own document keeps its document-lifetime listeners.
+ */
+export function trackInteractionModalityIn(
+  targetDocument: Document,
+): () => void {
+  if (typeof document !== 'undefined' && targetDocument === document) {
+    return trackInteractionModality();
+  }
+  const store = getStore(targetDocument);
+  store.consumers = (store.consumers ?? 0) + 1;
+  if (store.consumers === 1) {
+    store.isListening = true;
+    targetDocument.addEventListener('pointerdown', store.onPointerDown, {
+      capture: true,
+      passive: true,
+    });
+    targetDocument.addEventListener('keydown', store.onKeyDown, {
+      capture: true,
+      passive: true,
+    });
+  }
+  let isReleased = false;
+  return () => {
+    if (isReleased) {
+      return;
+    }
+    isReleased = true;
+    store.consumers = (store.consumers ?? 1) - 1;
+    if (store.consumers === 0) {
+      store.isListening = false;
+      targetDocument.removeEventListener('pointerdown', store.onPointerDown, {
+        capture: true,
+      });
+      targetDocument.removeEventListener('keydown', store.onKeyDown, {
+        capture: true,
+      });
+    }
+  };
+}
+
+/** How the user last interacted with the page, or with `targetDocument`. */
+export function getInteractionModality(
+  targetDocument?: Document,
+): InteractionModality {
+  if (targetDocument != null) {
+    return getStore(targetDocument).modality;
+  }
   return typeof document === 'undefined'
     ? 'keyboard'
     : getStore(document).modality;

package/src/utils/plainDate.test.ts

@@ -7,6 +7,7 @@ import {
   plainDateFromISO,
   plainDateToISO,
   plainDateToDate,
+  dateTimeFormatFor,
   plainDateFromDate,
   plainDateToday,
   getDaysInMonth,
@@ -28,6 +29,7 @@ import {
   plainDateGetWeekNumber,
   plainDateFormat,
   formatSharedDate,
+  DATE_FORMAT_LONG,
   DATE_FORMAT_WITH_WEEKDAY,
   DATE_FORMAT_MONTH_YEAR,
   plainDateWeekFieldName,
@@ -754,6 +756,94 @@ describe('plainDateGetWeekNumber', () => {
 });
 
 describe('plainDateFormat', () => {
+  it('keeps one formatter per locale and options, whatever order the options are in', () => {
+    // A month of day labels, as a calendar renders them, reuses one formatter.
+    const first = dateTimeFormatFor('en-NZ', DATE_FORMAT_WITH_WEEKDAY);
+    expect(dateTimeFormatFor('en-NZ', DATE_FORMAT_WITH_WEEKDAY)).toBe(first);
+    expect(
+      dateTimeFormatFor('en-NZ', {
+        year: 'numeric',
+        day: 'numeric',
+        month: 'long',
+        weekday: 'long',
+      }),
+    ).toBe(first);
+    // Other options, or another locale, get their own.
+    expect(dateTimeFormatFor('en-NZ', DATE_FORMAT_MONTH_YEAR)).not.toBe(first);
+    expect(dateTimeFormatFor('en-ZA', DATE_FORMAT_WITH_WEEKDAY)).not.toBe(
+      first,
+    );
+  });
+
+  it('formats the same date after the host zone moves', () => {
+    // The page stays open while the device travels east: a formatter cached
+    // in the first zone must not move the date.
+    const zone = process.env.TZ;
+    try {
+      process.env.TZ = 'America/Los_Angeles';
+      expect(
+        plainDateFormat(
+          {year: 2026, month: 2, day: 1},
+          DATE_FORMAT_MONTH_YEAR,
+          'en-IE',
+        ),
+      ).toBe('February 2026');
+      process.env.TZ = 'America/New_York';
+      expect(
+        plainDateFormat(
+          {year: 2026, month: 2, day: 1},
+          DATE_FORMAT_MONTH_YEAR,
+          'en-IE',
+        ),
+      ).toBe('February 2026');
+      process.env.TZ = 'Pacific/Kiritimati';
+      expect(
+        plainDateFormat(
+          {year: 2026, month: 2, day: 1},
+          DATE_FORMAT_WITH_WEEKDAY,
+          'en-IE',
+        ),
+      ).toBe('Sunday 1 February 2026');
+    } finally {
+      if (zone === undefined) {
+        delete process.env.TZ;
+      } else {
+        process.env.TZ = zone;
+      }
+    }
+  });
+
+  it('prints a zone name or a time of day in the host zone, as before', () => {
+    // A PlainDate has neither: such fields read local midnight in the zone
+    // current at the call, not the UTC the date-only path formats in.
+    const zone = process.env.TZ;
+    try {
+      process.env.TZ = 'America/Los_Angeles';
+      const withZone = plainDateFormat(
+        {year: 2026, month: 1, day: 25},
+        {...DATE_FORMAT_LONG, timeZoneName: 'short'},
+        'en-US',
+      );
+      expect(withZone).toContain('January 25, 2026');
+      expect(withZone).toContain('PST');
+      expect(withZone).not.toContain('UTC');
+      process.env.TZ = 'America/New_York';
+      expect(
+        plainDateFormat(
+          {year: 2026, month: 1, day: 25},
+          {...DATE_FORMAT_LONG, timeZoneName: 'short'},
+          'en-US',
+        ),
+      ).toContain('EST');
+    } finally {
+      if (zone === undefined) {
+        delete process.env.TZ;
+      } else {
+        process.env.TZ = zone;
+      }
+    }
+  });
+
   it('returns a human-readable date string with weekday', () => {
     const result = plainDateFormat(
       {year: 2026, month: 1, day: 25},

package/src/utils/plainDate.ts

@@ -374,10 +374,65 @@ export function plainDateFormat(
   options: Intl.DateTimeFormatOptions,
   locale: Locale = 'en',
 ): string {
-  return new Intl.DateTimeFormat(locale, {
+  const calendar = options.calendar ?? 'gregory';
+  if (options.timeZone != null) {
+    return dateTimeFormatFor(locale, {...options, calendar}).format(
+      plainDateToDate(pd),
+    );
+  }
+  if (TIME_OF_DAY_FIELDS.some(field => options[field] != null)) {
+    // A zone name or a time of day reads local midnight in the zone current
+    // at the call. A cached formatter would keep the zone it was built in,
+    // so this one is built for the call.
+    return new Intl.DateTimeFormat(locale, {...options, calendar}).format(
+      plainDateToDate(pd),
+    );
+  }
+  // Date fields alone: UTC midnight formatted in UTC, so neither the cached
+  // formatter nor the date depends on the host's zone, which can change while
+  // a page is open.
+  return dateTimeFormatFor(locale, {
     ...options,
-    calendar: options.calendar ?? 'gregory',
-  }).format(plainDateToDate(pd));
+    calendar,
+    timeZone: 'UTC',
+  }).format(utcTime(pd.year, pd.month - 1, pd.day));
+}
+
+/** Options that print a time of day or a zone, which a PlainDate lacks. */
+const TIME_OF_DAY_FIELDS = [
+  'timeZoneName',
+  'hour',
+  'minute',
+  'second',
+  'fractionalSecondDigits',
+  'dayPeriod',
+  'timeStyle',
+] as const satisfies ReadonlyArray<keyof Intl.DateTimeFormatOptions>;
+
+/**
+ * One `Intl.DateTimeFormat` per locale and options, built on first use.
+ * Building a formatter costs far more than formatting with it, and a calendar
+ * formats each of a month's 42 day labels with the same options on every
+ * render. The options are keyed in a fixed order, so the same options written
+ * in another order share a formatter.
+ */
+const dateTimeFormats = new Map<string, Intl.DateTimeFormat>();
+
+/** @internal plainDateFormat's formatter cache; not part of the public API. */
+export function dateTimeFormatFor(
+  locale: Locale,
+  options: Intl.DateTimeFormatOptions,
+): Intl.DateTimeFormat {
+  const key = JSON.stringify([
+    locale,
+    Object.entries(options).sort(([a], [b]) => (a < b ? -1 : a > b ? 1 : 0)),
+  ]);
+  let format = dateTimeFormats.get(key);
+  if (format == null) {
+    format = new Intl.DateTimeFormat(locale, options);
+    dateTimeFormats.set(key, format);
+  }
+  return format;
 }
 
 /**

package/src/utils/presentation.test.ts

@@ -0,0 +1,380 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file presentation.test.ts
+ * @input Uses vitest, React Testing Library, react-dom/server and a
+ *   query-aware matchMedia and CSS.supports stub
+ * @output A caller's explicit presentation wins: `'popover'` pins the fine
+ *   surface and input modes on an iPhone; an omitted value follows the
+ *   component's default (`'popover'` or `'touch'`), distinguishable from an
+ *   explicit `'popover'`; `'adaptive'` and `'bottom-sheet'` keep their sheet
+ *   meaning with touch modes under a finger, the same on every touch device;
+ *   the surface equals useAdaptivePresentation's for every
+ *   value on every device; live pointer changes; the server and hydrating
+ *   render, which no hint can put into touch modes; the one-moment read
+ * @position Unit tests of packages/core/src/utils/presentation.ts
+ */
+
+import {act, renderHook} from '@testing-library/react';
+import {createElement, type ComponentProps, type ReactNode} from 'react';
+import {hydrateRoot, type Root} from 'react-dom/client';
+import {renderToString} from 'react-dom/server';
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {
+  useAdaptivePresentation,
+  type AdaptivePresentation,
+} from '../hooks/useAdaptivePresentation';
+import {
+  readPresentation,
+  usePresentation,
+  type PresentationDefault,
+  type UsePresentationOptions,
+} from './presentation';
+import {Theme, defineTheme} from '../theme';
+import {IOS_SUPPORTS_QUERY} from './touchPresentation';
+import {
+  compactDefinition,
+  DEFAULT_COMPACT_DEFINITION,
+} from '../theme/themeAdaptations';
+
+const device = {coarse: false, width: 1280, height: 800, iosWebKit: false};
+const listeners = new Set<() => void>();
+
+/** Answers a media query list: `,` is or, `and` is and. */
+function answer(query: string): boolean {
+  return query.split(', ').some(alternative =>
+    alternative.split(' and ').every(part => {
+      if (part === '(pointer: coarse)') {
+        return device.coarse;
+      }
+      const range = /^\((width|height) < (\d+)px\)$/.exec(part);
+      if (range != null) {
+        return device[range[1] as 'width' | 'height'] < Number(range[2]);
+      }
+      throw new Error(`unexpected query ${query}`);
+    }),
+  );
+}
+
+function setDevice(next: Partial<typeof device>): void {
+  Object.assign(device, next);
+  for (const listener of [...listeners]) {
+    listener();
+  }
+}
+
+const IPHONE = {coarse: true, width: 393, height: 852, iosWebKit: true};
+const IPAD = {coarse: true, width: 820, height: 1180, iosWebKit: true};
+const ANDROID = {coarse: true, width: 412, height: 915, iosWebKit: false};
+const DESKTOP = {coarse: false, width: 1280, height: 800, iosWebKit: false};
+const MAC_SAFARI = {coarse: false, width: 1440, height: 900, iosWebKit: false};
+/** A narrow window under a fine pointer: compact by size, never by touch. */
+const FINE_NARROW = {coarse: false, width: 600, height: 800, iosWebKit: false};
+/** A phone in landscape: compact by its height alone. */
+const PHONE_LANDSCAPE = {
+  coarse: true,
+  width: 852,
+  height: 393,
+  iosWebKit: true,
+};
+/** The compact edges at the default md point (768 wide, 500 high). */
+const COMPACT_EDGES = [
+  {coarse: true, width: 767, height: 800, iosWebKit: false},
+  {coarse: true, width: 768, height: 800, iosWebKit: false},
+  {coarse: true, width: 1024, height: 499, iosWebKit: false},
+  {coarse: true, width: 1024, height: 500, iosWebKit: false},
+];
+
+beforeEach(() => {
+  setDevice(DESKTOP);
+  vi.stubGlobal('CSS', {
+    supports: (condition: string) =>
+      condition === IOS_SUPPORTS_QUERY && device.iosWebKit,
+  });
+  vi.stubGlobal(
+    'matchMedia',
+    vi.fn((query: string) => ({
+      get matches() {
+        return answer(query);
+      },
+      media: query,
+      addEventListener: (_type: string, listener: () => void) =>
+        listeners.add(listener),
+      removeEventListener: (_type: string, listener: () => void) =>
+        listeners.delete(listener),
+    })),
+  );
+});
+
+afterEach(() => {
+  listeners.clear();
+  vi.unstubAllGlobals();
+});
+
+const resolve = (
+  presentation: AdaptivePresentation | undefined,
+  whenOmitted?: PresentationDefault,
+) =>
+  renderHook(() => usePresentation(presentation, {whenOmitted})).result.current;
+
+/** A component whose omitted presentation is the touch default. */
+const TOUCH_WHEN_OMITTED: UsePresentationOptions = {whenOmitted: 'touch'};
+
+describe('presentation: a caller choice wins over touch defaults', () => {
+  it('pins the fine surface and input modes with an explicit popover, even on an iPhone', () => {
+    setDevice(IPHONE);
+    for (const whenOmitted of ['popover', 'touch'] as const) {
+      expect(resolve('popover', whenOmitted)).toEqual({
+        surface: 'popover',
+        touchModes: false,
+      });
+    }
+  });
+
+  it("tells an omitted value from an explicit popover: the component's touch default applies only when omitted", () => {
+    setDevice(IPHONE);
+    expect(resolve(undefined, 'touch')).toEqual({
+      surface: 'popover',
+      touchModes: true,
+    });
+    // Today's components: omitted is popover.
+    expect(resolve(undefined)).toEqual(resolve('popover'));
+    expect(resolve(undefined, 'popover')).toEqual(resolve('popover'));
+  });
+
+  it('turns touch modes on under a finger only, the same on every touch device', () => {
+    setDevice(ANDROID);
+    expect(resolve(undefined, 'touch')).toEqual({
+      surface: 'popover',
+      touchModes: true,
+    });
+    for (const desk of [DESKTOP, MAC_SAFARI]) {
+      setDevice(desk);
+      expect(resolve(undefined, 'touch')).toMatchObject({
+        touchModes: false,
+      });
+    }
+  });
+
+  it('keeps the sheet meaning of adaptive and bottom-sheet, with touch modes under a finger', () => {
+    setDevice(IPHONE);
+    expect(resolve('adaptive')).toEqual({
+      surface: 'bottom-sheet',
+      touchModes: true,
+    });
+    setDevice(IPAD);
+    expect(resolve('adaptive')).toMatchObject({
+      surface: 'popover',
+      touchModes: true,
+    });
+    setDevice(DESKTOP);
+    expect(resolve('adaptive')).toMatchObject({
+      surface: 'popover',
+      touchModes: false,
+    });
+    expect(resolve('bottom-sheet')).toMatchObject({
+      surface: 'bottom-sheet',
+      touchModes: false,
+    });
+  });
+
+  it("renders useAdaptivePresentation's surface for every value on every device", () => {
+    for (const next of [
+      IPHONE,
+      IPAD,
+      ANDROID,
+      DESKTOP,
+      MAC_SAFARI,
+      FINE_NARROW,
+      PHONE_LANDSCAPE,
+      ...COMPACT_EDGES,
+    ]) {
+      setDevice(next);
+      for (const value of ['popover', 'bottom-sheet', 'adaptive'] as const) {
+        const {result} = renderHook(() => ({
+          surface: usePresentation(value).surface,
+          adaptive: useAdaptivePresentation(value),
+        }));
+        expect(result.current.surface).toBe(result.current.adaptive);
+      }
+    }
+  });
+
+  it("answers 'adaptive' with the sheet only on a compact touch screen: a fine narrow window, a phone in landscape and each compact edge (spec:AST-094 FR13, spec:AST-012 FR9)", () => {
+    for (const [next, surface] of [
+      [FINE_NARROW, 'popover'],
+      [PHONE_LANDSCAPE, 'bottom-sheet'],
+      [COMPACT_EDGES[0], 'bottom-sheet'],
+      [COMPACT_EDGES[1], 'popover'],
+      [COMPACT_EDGES[2], 'bottom-sheet'],
+      [COMPACT_EDGES[3], 'popover'],
+    ] as const) {
+      setDevice(next);
+      expect({...next, surface: resolve('adaptive').surface}).toEqual({
+        ...next,
+        surface,
+      });
+    }
+  });
+
+  it("follows the active theme's md point for 'adaptive' (spec:AST-012 FR9)", () => {
+    const wideMd = defineTheme({
+      name: 'wide-md-presentation',
+      adaptations: {widthBreakpoints: {md: 1000, lg: 1100}},
+    });
+    const wrapper = ({children}: {children: ReactNode}) =>
+      createElement(
+        Theme,
+        {theme: wideMd} as ComponentProps<typeof Theme>,
+        children,
+      );
+    setDevice({coarse: true, width: 900, height: 1024});
+    // Under the default md point (768) this screen is not compact.
+    const plain = renderHook(() => usePresentation('adaptive'));
+    expect(plain.result.current.surface).toBe('popover');
+    plain.unmount();
+    // Under a theme whose md is 1000, the same screen is compact.
+    const themed = renderHook(() => usePresentation('adaptive'), {wrapper});
+    expect(themed.result.current).toEqual({
+      surface: 'bottom-sheet',
+      touchModes: true,
+    });
+  });
+
+  it('follows the pointer when it changes (an iPad docking a trackpad)', () => {
+    setDevice(IPAD);
+    const {result} = renderHook(() =>
+      usePresentation(undefined, {whenOmitted: 'touch'}),
+    );
+    expect(result.current.touchModes).toBe(true);
+    act(() => setDevice({coarse: false}));
+    // A fine pointer in this context, checked before the claim.
+    expect(window.matchMedia('(pointer: coarse)').matches).toBe(false);
+    expect(result.current).toMatchObject({touchModes: false});
+    act(() => setDevice({coarse: true}));
+    expect(result.current).toMatchObject({touchModes: true});
+  });
+
+  it('renders no touch surface or input mode on the server or while hydrating, and takes no hint that would (spec:AST-094 FR13)', () => {
+    // On a phone, where a live read would answer touch modes.
+    setDevice(IPHONE);
+    function Probe({
+      presentation,
+      options = TOUCH_WHEN_OMITTED,
+    }: {
+      presentation?: AdaptivePresentation;
+      options?: UsePresentationOptions;
+    }) {
+      const resolved = usePresentation(presentation, options);
+      return `${resolved.surface}/${String(resolved.touchModes)}`;
+    }
+    expect(renderToString(createElement(Probe))).toContain('popover/false');
+    expect(
+      renderToString(createElement(Probe, {presentation: 'adaptive'})),
+    ).toContain('popover/false');
+    expect(
+      renderToString(createElement(Probe, {presentation: 'bottom-sheet'})),
+    ).toContain('bottom-sheet/false');
+    // A server hint would put touch modes into the server render, which
+    // hydration then contradicts: usePresentation takes none.
+    const hinted = {
+      whenOmitted: 'touch',
+      // @ts-expect-error usePresentation takes no serverDefault.
+      serverDefault: {isTouch: true, isCompact: true},
+    } satisfies UsePresentationOptions;
+    expect(
+      renderToString(
+        createElement(Probe, {presentation: 'adaptive', options: hinted}),
+      ),
+    ).toContain('popover/false');
+  });
+
+  it('hydrates on a phone from the server render, then follows the device (spec:AST-094 FR13)', async () => {
+    setDevice(IPHONE);
+    const renders: string[] = [];
+    function Probe({presentation}: {presentation: AdaptivePresentation}) {
+      const resolved = usePresentation(presentation, TOUCH_WHEN_OMITTED);
+      const text = `${resolved.surface}/${String(resolved.touchModes)}`;
+      renders.push(text);
+      return text;
+    }
+    const html = renderToString(
+      createElement(Probe, {presentation: 'adaptive'}),
+    );
+    expect(html).toContain('popover/false');
+    const container = document.createElement('div');
+    container.innerHTML = html;
+    document.body.append(container);
+    renders.length = 0;
+    const recoverable = vi.fn();
+    let root: Root | null = null;
+    await act(async () => {
+      root = hydrateRoot(
+        container,
+        createElement(Probe, {presentation: 'adaptive'}),
+        {onRecoverableError: recoverable},
+      );
+    });
+    // The hydrating render is the server's; the phone's answer follows it.
+    expect(renders[0]).toBe('popover/false');
+    expect(renders.at(-1)).toBe('bottom-sheet/true');
+    expect(recoverable).not.toHaveBeenCalled();
+    act(() => root?.unmount());
+    container.remove();
+  });
+
+  it('subscribes only to the queries a request reads (architecture:react-component-runtime INV5)', () => {
+    setDevice(IPHONE);
+    for (const [presentation, whenOmitted, subscriptions] of [
+      ['popover', 'touch', 0],
+      [undefined, 'popover', 0],
+      ['bottom-sheet', 'popover', 1],
+      [undefined, 'touch', 1],
+      ['adaptive', 'popover', 2],
+    ] as const) {
+      listeners.clear();
+      const {unmount} = renderHook(() =>
+        usePresentation(presentation, {whenOmitted}),
+      );
+      expect({
+        presentation,
+        whenOmitted,
+        subscriptions: listeners.size,
+      }).toEqual({presentation, whenOmitted, subscriptions});
+      unmount();
+      expect(listeners.size).toBe(0);
+    }
+  });
+
+  it('answers at one moment as the hook does, and as the server would with no window', () => {
+    setDevice(IPHONE);
+    const compact = DEFAULT_COMPACT_DEFINITION;
+    expect(
+      readPresentation(undefined, {whenOmitted: 'touch', compact}),
+    ).toEqual(resolve(undefined, 'touch'));
+    expect(
+      readPresentation('popover', {whenOmitted: 'touch', compact}),
+    ).toEqual(resolve('popover', 'touch'));
+    expect(readPresentation('adaptive', {compact})).toEqual(
+      resolve('adaptive'),
+    );
+    expect(
+      readPresentation(undefined, {whenOmitted: 'touch', view: null, compact}),
+    ).toEqual({
+      surface: 'popover',
+      touchModes: false,
+    });
+  });
+
+  it('reads the compact definition it is given, so a theme that moves md moves the sheet (spec:AST-012 FR9)', () => {
+    setDevice({...IPHONE, width: 900, height: 1024});
+    expect(
+      readPresentation('adaptive', {compact: DEFAULT_COMPACT_DEFINITION})
+        .surface,
+    ).toBe('popover');
+    expect(
+      readPresentation('adaptive', {compact: compactDefinition({md: 1000})})
+        .surface,
+    ).toBe('bottom-sheet');
+  });
+});