zidane-ui 9.0.4 → 9.1.3

package/src/machines/testing/sync.contract.ts

@@ -1,260 +0,0 @@
-/**
- * What every implementation of `MachinesHost.sync` and `MachinesHost.signIn` does alike, as a vitest suite: the
- * in-memory fixture, zidane-server (`createServerMachinesHost`: the server's record, its reset, its providers and a
- * sign-in there), the desktop app's IPC host (this computer's sync engine too).
- *
- * The suite hands the harness a {@link MachinesSyncContractBackend}: this computer's sync to the server, the server's
- * record and providers, read at each call, and the recorders the backend calls when an action reaches it. The
- * capabilities list says which members the host offers: the suite checks the others are undefined and skips what
- * needs them.
- *
- *   describeMachinesSyncContract('createServerMachinesHost', (backend) => ({ host }), [
- *     'sync', 'sync.reset', 'sync.providers', 'signIn',
- *   ]);
- */
-import { afterEach, describe, expect, it, vi } from 'vitest';
-
-import { isMachinesError, type HostProviderAuth, type HostSignInTarget, type MachinesHost } from '../headless/host';
-import type { HostSyncPatch, HostSyncState, SyncStatus } from '../headless/sync';
-
-/** A member of `MachinesHost.sync`, or `signIn`, by its path. */
-export type MachinesSyncCapability =
-  'sync' | 'sync.state' | 'sync.configure' | 'sync.push' | 'sync.takeOver' | 'sync.reset' | 'sync.providers' | 'signIn';
-
-const CAPABILITIES: readonly MachinesSyncCapability[] = [
-  'sync',
-  'sync.state',
-  'sync.configure',
-  'sync.push',
-  'sync.takeOver',
-  'sync.reset',
-  'sync.providers',
-  'signIn',
-];
-
-/** What the backend behind the host holds, and what it records. */
-export interface MachinesSyncContractBackend {
-  /** The server under test. Its id is the one the suite passes to the host. */
-  server: { id: string; name: string };
-  /** This computer's sync to the server. Read at each state read; the recorders change it. */
-  state: HostSyncState;
-  /** The server's record. Read at each status read; {@link reset} changes it. */
-  status: SyncStatus;
-  /** The server's providers. */
-  providers: HostProviderAuth[];
-  /** The page a sign-in opens. */
-  signInUrl: string;
-  /** When set, every action fails with this message. */
-  fail: string | null;
-  /** The backend calls this when a configure reaches it: {@link state} changes. */
-  configured(patch: HostSyncPatch): void;
-  /** The backend calls this when a push reaches it. */
-  pushed(): void;
-  /** The backend calls this when a take over reaches it. */
-  tookOver(): void;
-  /** The backend calls this when a reset reaches it: the override leaves {@link status}. */
-  reset(field: string): void;
-  /** The backend calls this when a sign-in starts. */
-  signedIn(target: HostSignInTarget): void;
-}
-
-/** A host built over a contract backend, and the pushes its backend can make. */
-export interface MachinesSyncHarness {
-  /** The host under test. */
-  host: MachinesHost;
-  /** Tells the host the sync of the server changed, as the backend does (needed for `sync.state` live reads). */
-  pushSyncChanged?(): void;
-  /** Closes connections and listeners after each test. */
-  dispose?(): void;
-}
-
-/** Builds a fresh host (and its backend) for one test. */
-export type MachinesSyncHarnessFactory = (
-  backend: MachinesSyncContractBackend,
-) => MachinesSyncHarness | Promise<MachinesSyncHarness>;
-
-function contractBackend() {
-  const calls: { action: string; detail?: unknown }[] = [];
-  const record = (action: string, detail?: unknown) => calls.push({ action, detail });
-  const status: SyncStatus = {
-    source: { deviceId: 'dev-1', deviceName: 'laptop', claimedAt: 1 },
-    categories: ['settings'],
-    keys: [],
-    fields: { 'setting:approvalMode': { category: 'settings', syncedAt: 1 } },
-    overrides: { 'setting:maxTurns': { at: 2 } },
-  };
-  const backend: MachinesSyncContractBackend = {
-    server: { id: 'srv-1', name: 'Box' },
-    state: {
-      enabled: true,
-      device: { id: 'dev-1', name: 'laptop' },
-      config: { mode: 'keep', categories: ['settings'], keys: [], pending: [], results: {}, lastSyncAt: 1 },
-      connected: true,
-      supported: true,
-      status,
-      conflict: null,
-      busy: false,
-      local: { keyProviders: [], accounts: [], localExtensions: [], stdioMcps: [] },
-    },
-    status,
-    providers: [{ key: 'anthropic', label: 'Anthropic', configured: true, oauth: true, methods: [] }],
-    signInUrl: 'https://auth.example/authorize',
-    fail: null,
-    configured(patch) {
-      record('configure', patch);
-      const config = backend.state.config!;
-      backend.state = {
-        ...backend.state,
-        config: {
-          ...config,
-          ...(patch.mode ? { mode: patch.mode } : {}),
-          ...(patch.categories ? { categories: [...patch.categories] } : {}),
-          ...(patch.keys ? { keys: [...patch.keys] } : {}),
-        },
-      };
-    },
-    pushed: () => record('push'),
-    tookOver: () => record('takeOver'),
-    reset(field) {
-      record('reset', field);
-      const overrides = { ...backend.status.overrides };
-      delete overrides[field];
-      backend.status = { ...backend.status, overrides };
-      backend.state = { ...backend.state, status: backend.status };
-    },
-    signedIn: (target) => record('signIn', target),
-  };
-  return { backend, calls };
-}
-
-const waitFor = <T>(check: () => T) => vi.waitFor(check, { timeout: 3000, interval: 2 });
-
-/**
- * Declares the shared suite of `MachinesHost.sync` and `signIn` for one implementation.
- *
- * @param name - The implementation's name, shown in the suite title.
- * @param makeHarness - Builds a fresh host over a backend that holds and records what it is given, once per test.
- * @param capabilities - The members the host offers. Every other one must be undefined.
- */
-export function describeMachinesSyncContract(
-  name: string,
-  makeHarness: MachinesSyncHarnessFactory,
-  capabilities: readonly MachinesSyncCapability[],
-): void {
-  const has = (...needed: MachinesSyncCapability[]) => needed.every((c) => capabilities.includes(c));
-
-  describe(`MachinesHost sync contract: ${name}`, () => {
-    const cleanup: (() => void)[] = [];
-    afterEach(() => {
-      for (const done of cleanup.splice(0).reverse()) done();
-    });
-
-    const setup = async () => {
-      const recorded = contractBackend();
-      const harness = await makeHarness(recorded.backend);
-      cleanup.push(() => harness.dispose?.());
-      return { ...recorded, ...harness, id: recorded.backend.server.id };
-    };
-    const actions = (recorded: { action: string; detail?: unknown }[], action: string) =>
-      recorded.filter((c) => c.action === action).map((c) => c.detail);
-
-    it('offers exactly its members; the ones it leaves out are undefined', async () => {
-      const { host } = await setup();
-      for (const capability of CAPABILITIES) {
-        const [head, tail] = capability.split('.') as [string, string | undefined];
-        const top = (host as unknown as Record<string, unknown>)[head];
-        const value = tail ? (top as Record<string, unknown> | undefined)?.[tail] : top;
-        if (!has(capability)) expect(value, capability).toBeUndefined();
-        else expect(typeof value, capability).toBe(capability === 'sync' ? 'object' : 'function');
-      }
-      if (has('sync')) expect(typeof host.sync!.status).toBe('function');
-    });
-
-    it.skipIf(!has('sync'))(
-      "reads the server's record while subscribed; the same id answers the same read",
-      async () => {
-        const { host, id, backend } = await setup();
-        const read = host.sync!.status(id);
-        expect(host.sync!.status(id)).toBe(read);
-        cleanup.push(read.state.subscribe(() => {}));
-        await waitFor(() => expect(read.state.get()).toEqual(backend.status));
-      },
-    );
-
-    it.skipIf(!has('sync', 'sync.reset'))('resets an override; a read after it no longer has it', async () => {
-      const { host, id, calls } = await setup();
-      const read = host.sync!.status(id);
-      cleanup.push(read.state.subscribe(() => {}));
-      await waitFor(() => expect(read.state.get()?.overrides['setting:maxTurns']).toBeDefined());
-      await host.sync!.reset!(id, 'setting:maxTurns');
-      expect(actions(calls, 'reset')).toEqual(['setting:maxTurns']);
-      await read.refresh();
-      await waitFor(() => expect(read.state.get()?.overrides['setting:maxTurns']).toBeUndefined());
-    });
-
-    it.skipIf(!has('sync', 'sync.reset'))('a refused action rejects with a sync MachinesError', async () => {
-      const { host, id, backend } = await setup();
-      backend.fail = 'Sync is off on the server.';
-      const error = await host.sync!.reset!(id, 'setting:maxTurns').then(
-        () => null,
-        (err: unknown) => err,
-      );
-      expect(isMachinesError(error)).toBe(true);
-      expect(error).toMatchObject({ kind: 'sync' });
-      expect((error as { detail: string }).detail).toContain('Sync is off on the server.');
-    });
-
-    it.skipIf(!has('sync', 'sync.state'))("reads this computer's sync to the server", async () => {
-      const { host, id, backend } = await setup();
-      const read = host.sync!.state!(id);
-      cleanup.push(read.state.subscribe(() => {}));
-      await waitFor(() => expect(read.state.get()).toMatchObject({ enabled: true, config: backend.state.config }));
-    });
-
-    it.skipIf(!has('sync', 'sync.state', 'sync.configure', 'sync.push', 'sync.takeOver'))(
-      'configures, pushes and takes over through the backend; a read after a configure has it',
-      async () => {
-        const { host, id, calls } = await setup();
-        const read = host.sync!.state!(id);
-        cleanup.push(read.state.subscribe(() => {}));
-        await waitFor(() => expect(read.state.get()).not.toBeNull());
-        await host.sync!.configure!(id, { categories: ['settings', 'files'] });
-        await host.sync!.configure!(id, { mode: 'once' });
-        await host.sync!.push!(id);
-        await host.sync!.takeOver!(id);
-        expect(actions(calls, 'configure')).toEqual([{ categories: ['settings', 'files'] }, { mode: 'once' }]);
-        expect(actions(calls, 'push')).toHaveLength(1);
-        expect(actions(calls, 'takeOver')).toHaveLength(1);
-        await read.refresh();
-        await waitFor(() =>
-          expect(read.state.get()?.config).toMatchObject({ mode: 'once', categories: ['settings', 'files'] }),
-        );
-      },
-    );
-
-    it.skipIf(!has('sync', 'sync.state'))('re-reads when the backend says the sync changed', async () => {
-      const harness = await setup();
-      if (!harness.pushSyncChanged) return;
-      const { host, id, backend } = harness;
-      const read = host.sync!.state!(id);
-      cleanup.push(read.state.subscribe(() => {}));
-      await waitFor(() => expect(read.state.get()).not.toBeNull());
-      backend.state = { ...backend.state, busy: true };
-      harness.pushSyncChanged();
-      await waitFor(() => expect(read.state.get()?.busy).toBe(true));
-    });
-
-    it.skipIf(!has('sync', 'sync.providers'))("lists the server's providers", async () => {
-      const { host, id, backend } = await setup();
-      expect(await host.sync!.providers!(id)).toEqual(backend.providers);
-    });
-
-    it.skipIf(!has('signIn'))('starts a sign-in on the server: its page shows; cancel stops it', async () => {
-      const { host, id, calls, backend } = await setup();
-      const flow = host.signIn!(id, { provider: 'anthropic' });
-      await waitFor(() => expect(flow.state.get()).toMatchObject({ kind: 'url', url: backend.signInUrl }));
-      expect(actions(calls, 'signIn')).toEqual([expect.objectContaining({ provider: 'anthropic' })]);
-      flow.cancel();
-    });
-  });
-}

package/src/motion/SwapIcon.tsx

@@ -1,29 +0,0 @@
-import type { CSSProperties } from 'react';
-
-/** Props for {@link SwapIcon}. */
-export interface SwapIconProps<K extends string> {
-  /** Key → icon class (`i-ph-*`). */
-  icons: Record<K, string>;
-  /** Key in `icons` of the glyph to show. */
-  current: K;
-  /** Extra classes on the box, such as a text size. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Glyphs stacked in one box; `current` shows, the others wait hidden.
- * Switching cross-fades (`.zg-swap` in primitives.css).
- *
- * @param props - Component props.
- */
-export function SwapIcon<K extends string>({ icons, current, className = '', style }: SwapIconProps<K>) {
-  return (
-    <span className={`zg-swap ${className}`} style={style} aria-hidden>
-      {(Object.keys(icons) as K[]).map((k) => (
-        <span key={k} className={icons[k]} data-on={k === current ? '' : undefined} />
-      ))}
-    </span>
-  );
-}

package/src/motion/collapse.ts

@@ -1,21 +0,0 @@
-/**
- * Collapsibles (`.zg-collapsible`, a grid-rows transition in styles/motion.css:
- * opening on `settle` / `fade`, closing on `exit` / `fade-out`): keeping
- * their content mounted until they have closed.
- */
-import { readExitMs, usePresence } from './presence';
-
-/**
- * `open`, held true until a `.zg-collapsible` has finished closing. Content
- * rendered only while open (`{open && …}`) vanishes on the first frame of a
- * close: the collapse animates an empty box while everything below jumps up.
- * Render it while this is true instead: it mounts at once on open and
- * unmounts once the collapse has played (`readExitMs()`, read when the close
- * starts: at once with motion off).
- *
- * @param open - Whether the collapsible is open.
- * @returns `true` while it is open or still playing its close.
- */
-export function useStaysMounted(open: boolean): boolean {
-  return usePresence(open, { exitMs: readExitMs }).mounted;
-}

package/src/motion/grow.tsx

@@ -1,86 +0,0 @@
-/**
- * `Grow`: a block that grows in from nothing and shrinks out, inside
- * motion's `AnimatePresence`. It reads motion's `usePresence`, so it needs
- * the `motion` package (a peer dependency of the kit).
- */
-import { usePresence } from 'motion/react';
-import { useLayoutEffect, useRef, useState, type ReactNode } from 'react';
-
-import { readExitMs } from './presence';
-
-/**
- * motion's `AnimatePresence`, the list a `Grow` lives in: it keeps a removed
- * child mounted until its `Grow` has shrunk out. Re-exported so the rest of
- * the kit reaches motion only through this module.
- */
-export { AnimatePresence as GrowPresence } from 'motion/react';
-
-/** Props for {@link Grow}. */
-export interface GrowProps {
-  /**
-   * Element to render. Use `li` inside a list.
-   * @default 'div'
-   */
-  as?: 'div' | 'li';
-  /**
-   * The direction it grows in. `y`: a block opening downward (rows, the fold's steps). `x`: a tile
-   * widening in a row, pushing the ones after it along; its content holds to its end edge, so it
-   * slides in from its start edge and, shrinking out, slips under whatever follows it.
-   * @default 'y'
-   */
-  axis?: 'x' | 'y';
-  /** Grow in when mounted. When `false`, the block starts open, for rows rendered with their list. */
-  appear: boolean;
-  /** Extra classes on the element. */
-  className?: string;
-  /** Inline styles on the element. */
-  style?: React.CSSProperties;
-  /** The block's content. */
-  children: ReactNode;
-  /** Passed to the element as `data-earlier`. The transcript sets it on rows from earlier history. */
-  'data-earlier'?: string;
-}
-
-/**
- * A block that grows in from nothing and shrinks out (`.zg-grow`): a CSS
- * grid-rows transition the style engine runs every frame, whatever React is
- * busy with, and whose open row follows its content as it streams. Nothing
- * is measured: a height animation from `auto` collapses its target for a
- * layout to read the end state, which clamps the transcript's scroll and
- * jumps the view (the `x` axis does the same with columns, for a tile in a
- * row). With `appear` off (rendered with its list): already open.
- * Leaving (`AnimatePresence`): it collapses (`exit` / `fade-out`), then goes
- * after `readExitMs()` (at once with motion off).
- *
- * @param props - Component props.
- */
-export function Grow({ as: Tag = 'div', axis = 'y', appear, className = '', style, children, ...rest }: GrowProps) {
-  const [isPresent, safeToRemove] = usePresence();
-  const ref = useRef<HTMLElement>(null);
-  const [entered, setEntered] = useState(!appear);
-  useLayoutEffect(() => {
-    if (entered) return;
-    // The closed state is computed before it opens, so the open is a transition.
-    ref.current?.getBoundingClientRect();
-    setEntered(true);
-  }, [entered]);
-  useLayoutEffect(() => {
-    if (isPresent) return undefined;
-    // Always a task later, even at 0ms (motion off): AnimatePresence ignores a
-    // `safeToRemove` called from the exiting child's own layout effect.
-    const id = setTimeout(() => safeToRemove?.(), readExitMs());
-    return () => clearTimeout(id);
-  }, [isPresent, safeToRemove]);
-  return (
-    <Tag
-      ref={ref as React.Ref<HTMLDivElement & HTMLLIElement>}
-      className={`zg-grow ${className}`}
-      data-shown={entered && isPresent ? '' : undefined}
-      data-axis={axis === 'x' ? 'x' : undefined}
-      style={style}
-      {...rest}
-    >
-      <div className="zg-grow-clip">{children}</div>
-    </Tag>
-  );
-}

package/src/motion/layout-animating.ts

@@ -1,50 +0,0 @@
-/**
- * Layout animations in flight in the window: a count anything that tracks
- * an element frame by frame can follow. The dev browser's page is drawn
- * over a slot (`position: fixed`, measured), and JS-driven layout changes
- * fire no `transitionrun`: without this the page lags behind a slot
- * reparented without a resize.
- */
-
-let running = 0;
-const listeners = new Set<() => void>();
-
-function notify() {
-  for (const cb of [...listeners]) cb();
-}
-
-/** True while at least one layout animation runs. */
-export function isLayoutAnimating(): boolean {
-  return running > 0;
-}
-
-/**
- * Listens for layout animations starting and stopping; returns the unsubscribe.
- *
- * @param cb - Called whenever the count goes from or to zero; read {@link isLayoutAnimating} for which.
- */
-export function subscribeLayoutAnimating(cb: () => void): () => void {
-  listeners.add(cb);
-  return () => {
-    listeners.delete(cb);
-  };
-}
-
-/** Marks a layout animation as started; call the returned function (idempotent) when it ends. */
-export function beginLayoutAnimation(): () => void {
-  running += 1;
-  if (running === 1) notify();
-  let ended = false;
-  return () => {
-    if (ended) return;
-    ended = true;
-    running -= 1;
-    if (running === 0) notify();
-  };
-}
-
-/** Something moved without animating (an element reparented): followers measure for the next two frames. */
-export function pulseLayout(): void {
-  const end = beginLayoutAnimation();
-  requestAnimationFrame(() => requestAnimationFrame(end));
-}

package/src/motion/presence.ts

@@ -1,191 +0,0 @@
-/**
- * Mount / unmount around a CSS transition, for panels, menus and dialogs.
- *
- *   open   →  'entering' (two frames, only with `enter`)  →  'open'
- *   close  →  'closing' for `exitMs`                      →  'closed' (unmounted)
- *
- * `enter` mounts the node in its closed look first and flips to `open` two
- * frames later, so an enter transition runs; without it the node mounts
- * open (nodes whose own CSS animates the mount). Either way a node already
- * open on the hook's first render shows open at once: only a later open
- * enters, so a panel restored on load never slides in. Either way it is mounted on
- * the very render that opens it. A zero `exitMs` closes at once, which is
- * what reduced / off motion wants. A new `key` (another session's panel in
- * the same node) is another subject, not a toggle: its state shows at once.
- *
- * `exitMs` may be a function, read when the close starts: `readPanelMs`
- * follows the live `--zg-panel-ms` token and `readExitMs` the `exit` /
- * `fade-out` vars, so the Appearance motion setting applies without the
- * caller knowing. Never pass a hard-coded length for a CSS exit.
- */
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
-
-/**
- * Phase of a {@link usePresence} transition: `entering` (mounted in its closed look, for two frames),
- * `open`, `closing` (playing its exit) or `closed` (unmounted).
- */
-export type PresenceState = 'entering' | 'open' | 'closing' | 'closed';
-
-/** What {@link usePresence} returns. */
-export interface Presence {
-  /**
-   * Whether the node should be in the tree: true from the render that opens it until its exit
-   * finishes.
-   */
-  mounted: boolean;
-  /** The current phase. Map it with {@link transitionState} to a `data-state` value. */
-  state: PresenceState;
-}
-
-/** Options of {@link usePresence}. */
-export interface PresenceOptions {
-  /** Mount closed and transition in. Default false. */
-  enter?: boolean;
-  /** How long `closing` lasts. Default 0. */
-  exitMs?: number | (() => number);
-  /** Whose node it is (a scope's key). A change shows the new state at once: no enter, no exit. */
-  key?: string | null;
-}
-
-/**
- * A duration custom property (`200ms`, `0.2s`) in milliseconds; 0 when unset.
- *
- * @param name - The custom property, such as `--zg-panel-ms`.
- * @param root - The element to read it from. Defaults to `document.documentElement`.
- */
-export function readDurationVar(name: string, root: HTMLElement = document.documentElement): number {
-  const raw = getComputedStyle(root).getPropertyValue(name).trim();
-  const ms = parseFloat(raw);
-  if (!Number.isFinite(ms)) return 0;
-  return raw.endsWith('ms') || !raw.endsWith('s') ? ms : ms * 1000;
-}
-
-/** The panel open / close duration token (zeroed by reduced / off motion). */
-export const readPanelMs = (): number => readDurationVar('--zg-panel-ms');
-
-/**
- * A named motion's CSS duration (`--zg-motion-<name>-duration`, motion/springs.ts) in ms.
- *
- * @param name - The motion name, such as `settle` or `exit`.
- */
-export const readMotionMs = (name: string): number => readDurationVar(`--zg-motion-${name}-duration`);
-
-/**
- * How long a CSS exit plays: the longer of `exit` (transform) and
- * `fade-out` (opacity). 0 under `off`; the brief fade under `reduced`.
- * What an `exitMs` waiting on an `exit` / `fade-out` animation passes.
- */
-export const readExitMs = (): number => Math.max(readMotionMs('exit'), readMotionMs('fade-out'));
-
-/** How long a menu's close plays (`menu-exit`, opacity and transform alike): what a menu's `exitMs` passes. */
-export const readMenuExitMs = (): number => readMotionMs('menu-exit');
-
-/**
- * `open` / `closed` for `[data-state]` transitions: everything but `open` shows the closed look.
- *
- * @param state - The phase from {@link usePresence}.
- */
-export const transitionState = (state: PresenceState): 'open' | 'closed' => (state === 'open' ? 'open' : 'closed');
-
-/**
- * Keeps a node mounted around a CSS transition. It is mounted on the render that opens it,
- * then goes `entering`, `open`, `closing` for `exitMs` and `closed`. A zero `exitMs` closes at
- * once, as reduced and off motion want.
- *
- * @param open - Whether the node should be open.
- * @param options - Whether to mount closed and transition in (`enter`), and how long the exit lasts
- * (`exitMs`, in ms or a function read when the close starts), and whose node it is (`key`).
- */
-export function usePresence(open: boolean, { enter = false, exitMs = 0, key = null }: PresenceOptions = {}): Presence {
-  const [state, setState] = useState<PresenceState>(open ? 'open' : 'closed');
-  const [shownKey, setShownKey] = useState(key);
-  if (shownKey !== key) {
-    setShownKey(key);
-    setState(open ? 'open' : 'closed');
-  }
-  const stateRef = useRef(state);
-  // Read at close time, not an effect dependency: an inline function must not restart the timer every render.
-  const exitRef = useRef(exitMs);
-  const enterRef = useRef(enter);
-  // Before the effect below, which reads them when `open` flips.
-  useLayoutEffect(() => {
-    stateRef.current = state;
-    exitRef.current = exitMs;
-    enterRef.current = enter;
-  });
-
-  useEffect(() => {
-    if (open) {
-      if (!enterRef.current || stateRef.current === 'open') {
-        setState('open');
-        return undefined;
-      }
-      setState('entering');
-      let inner = 0;
-      const outer = requestAnimationFrame(() => {
-        inner = requestAnimationFrame(() => setState('open'));
-      });
-      return () => {
-        cancelAnimationFrame(outer);
-        cancelAnimationFrame(inner);
-      };
-    }
-    // Already closed (initial mount closed, or a repeat close): nothing to animate.
-    if (stateRef.current === 'closed') return undefined;
-    const ms = typeof exitRef.current === 'function' ? exitRef.current() : exitRef.current;
-    if (ms <= 0) {
-      setState('closed');
-      return undefined;
-    }
-    setState('closing');
-    const timer = window.setTimeout(() => setState('closed'), ms);
-    return () => window.clearTimeout(timer);
-  }, [open]);
-
-  // Mount on the render that opens, not one effect later: content shown "while
-  // open" never misses its first frame.
-  const shown: PresenceState = open && state === 'closed' ? (enter ? 'entering' : 'open') : state;
-  return { mounted: shown !== 'closed', state: shown };
-}
-
-/** How many active locks hold the page, and the root's own styles from before the first. */
-let scrollLocks = 0;
-let unlocked: { overflow: string; paddingRight: string } | null = null;
-
-function lockScroll(): void {
-  if (scrollLocks++ > 0) return;
-  const root = document.documentElement;
-  unlocked = { overflow: root.style.overflow, paddingRight: root.style.paddingRight };
-  // Measured before hiding: the bar's width, which the page would jump
-  // sideways by. A root with `scrollbar-gutter: stable` (the website) keeps
-  // the gutter either way. A zero `clientWidth` means no layout (tests).
-  const bar = root.clientWidth > 0 ? window.innerWidth - root.clientWidth : 0;
-  const style = getComputedStyle(root);
-  if (bar > 0 && !style.scrollbarGutter?.startsWith('stable')) {
-    root.style.paddingRight = `${(parseFloat(style.paddingRight) || 0) + bar}px`;
-  }
-  root.style.overflow = 'hidden';
-}
-
-function unlockScroll(): void {
-  if (scrollLocks === 0 || --scrollLocks > 0 || !unlocked) return;
-  const root = document.documentElement;
-  root.style.overflow = unlocked.overflow;
-  root.style.paddingRight = unlocked.paddingRight;
-  unlocked = null;
-}
-
-/**
- * Locks page scroll while `active` (menus, dialogs). Counted: with layers
- * stacked, the page stays locked until the last one lets go, whatever order
- * they close in, and gets back the styles it had before the first.
- *
- * @param active - Whether to lock the page scroll.
- */
-export function useScrollLock(active: boolean): void {
-  useEffect(() => {
-    if (!active) return undefined;
-    lockScroll();
-    return unlockScroll;
-  }, [active]);
-}