@dashforge/tw 1.1.0 → 1.2.0

package/src/components/AppShell/appShell.types.ts

@@ -1,49 +0,0 @@
-import type { ReactNode } from 'react';
-import type { AppShellVariants } from './appShell.variants.js';
-
-export interface AppShellSlotProps {
-  root?: { className?: string };
-  header?: { className?: string };
-  nav?: { className?: string };
-  navMobile?: { className?: string };
-  main?: { className?: string };
-  footer?: { className?: string };
-  backdrop?: { className?: string };
-}
-
-/**
- * Props for `<AppShell>`.
- *
- * Top-level layout orchestrator with 4 named slots:
- *
- *   - `header` (top, sticky)
- *   - `nav`    (left side, fixed-width on desktop, drawer on mobile)
- *   - `footer` (bottom, non-sticky)
- *   - `children` (main content, scrolls independently)
- *
- * Responsive behavior:
- *   - **≥ md (768px)**: nav is rendered inline at the left.
- *   - **< md**:        nav slides in as an overlay drawer when
- *                      `navOpen={true}` (controlled).
- *
- * The shell is router-agnostic — pass any nav/header content. Typical
- * pairing is `<LeftNav>` + `<TopBar>` (with a hamburger button in
- * `TopBar.start` that flips `navOpen`).
- */
-export interface AppShellProps extends AppShellVariants {
-  header?: ReactNode;
-  nav?: ReactNode;
-  footer?: ReactNode;
-  children?: ReactNode;
-  /**
-   * Mobile drawer open state. Controlled — provide
-   * `onNavOpenChange` to update. When `undefined`, the mobile drawer
-   * is always closed (consumer hasn't wired up the toggle yet).
-   */
-  navOpen?: boolean;
-  onNavOpenChange?: (open: boolean) => void;
-  /** Root className shortcut. */
-  sx?: string;
-  /** Per-slot className overrides. */
-  slotProps?: AppShellSlotProps;
-}

package/src/components/AppShell/appShell.variants.ts

@@ -1,54 +0,0 @@
-import { tv, type VariantProps } from 'tailwind-variants';
-
-/**
- * Tailwind-variants recipe for `<AppShell>`.
- *
- * Slots:
- *   - `root`      — outer flex column (full viewport)
- *   - `header`    — top region
- *   - `body`      — flex row holding nav + main
- *   - `nav`       — desktop nav rail (md+)
- *   - `navMobile` — mobile drawer (slide-in)
- *   - `main`      — scrollable content area
- *   - `footer`    — bottom region
- *   - `backdrop`  — semi-opaque overlay behind the mobile drawer
- */
-export const appShellVariants = tv({
-  slots: {
-    root: 'flex flex-col min-h-screen bg-neutral-100',
-    header: 'shrink-0',
-    body: 'flex flex-1 min-h-0',
-    nav: 'hidden md:flex shrink-0',
-    navMobile: [
-      'flex md:hidden fixed inset-y-0 left-0 z-40',
-      // Drawer slide-in is the most prominent motion in AppShell and
-      // a clear WCAG 2.3.3 candidate. Gate the transition on
-      // `prefers-reduced-motion: no-preference`; the data-driven
-      // `-translate-x-full` / `translate-x-0` still applies, just
-      // without the smooth slide.
-      'transition-transform duration-200 ease-out motion-reduce:transition-none motion-reduce:duration-0',
-      '-translate-x-full',
-    ],
-    main: 'flex-1 min-w-0 overflow-y-auto',
-    footer: 'shrink-0',
-    backdrop: [
-      'md:hidden fixed inset-0 z-30 bg-black/40',
-      // Backdrop opacity fade — micro motion, gated for consistency.
-      'transition-opacity duration-200 motion-reduce:transition-none motion-reduce:duration-0',
-      'opacity-0 pointer-events-none',
-    ],
-  },
-  variants: {
-    navOpen: {
-      true: {
-        navMobile: 'translate-x-0',
-        backdrop: 'opacity-100 pointer-events-auto',
-      },
-    },
-  },
-  defaultVariants: {
-    navOpen: false,
-  },
-});
-
-export type AppShellVariants = VariantProps<typeof appShellVariants>;

package/src/components/AspectRatio/AspectRatio.test.tsx

@@ -1,173 +0,0 @@
-// @vitest-environment jsdom
-import { describe, it, expect } from 'vitest';
-import { render } from '@testing-library/react';
-import { AspectRatio } from './AspectRatio.js';
-
-describe('<AspectRatio>', () => {
-  // ─── Default rendering ──────────────────────────────────────────────
-  describe('default rendering', () => {
-    it('renders a <div> by default', () => {
-      const { container } = render(<AspectRatio>x</AspectRatio>);
-      expect(container.firstElementChild?.tagName).toBe('DIV');
-    });
-
-    it('default ratio is 1 (square)', () => {
-      const { container } = render(<AspectRatio>x</AspectRatio>);
-      const el = container.firstElementChild as HTMLElement;
-      expect(el.style.aspectRatio).toBe('1 / 1');
-    });
-
-    it('always has w-full baseline', () => {
-      const { container } = render(<AspectRatio>x</AspectRatio>);
-      expect(container.firstElementChild?.className).toContain('w-full');
-    });
-  });
-
-  // ─── ratio prop ─────────────────────────────────────────────────────
-  describe('ratio', () => {
-    it('numeric ratio 16/9 → "1.7777… / 1"', () => {
-      const { container } = render(<AspectRatio ratio={16 / 9}>x</AspectRatio>);
-      const el = container.firstElementChild as HTMLElement;
-      // 16/9 ≈ 1.7777, formatted as "<number> / 1"
-      expect(el.style.aspectRatio).toMatch(/^1\.\d+ \/ 1$/);
-    });
-
-    it('numeric ratio 4/3', () => {
-      const { container } = render(<AspectRatio ratio={4 / 3}>x</AspectRatio>);
-      const el = container.firstElementChild as HTMLElement;
-      expect(el.style.aspectRatio).toMatch(/^1\.\d+ \/ 1$/);
-    });
-
-    it('string ratio "16 / 9" passes through', () => {
-      const { container } = render(<AspectRatio ratio="16 / 9">x</AspectRatio>);
-      const el = container.firstElementChild as HTMLElement;
-      expect(el.style.aspectRatio).toBe('16 / 9');
-    });
-
-    it('string ratio "21/9" passes through (ultrawide)', () => {
-      const { container } = render(<AspectRatio ratio="21/9">x</AspectRatio>);
-      const el = container.firstElementChild as HTMLElement;
-      expect(el.style.aspectRatio).toBe('21/9');
-    });
-  });
-
-  // ─── Override ───────────────────────────────────────────────────────
-  describe('override', () => {
-    it('sx adds utility classes', () => {
-      const { container } = render(
-        <AspectRatio ratio={16 / 9} sx="rounded-xl overflow-hidden">
-          x
-        </AspectRatio>,
-      );
-      const cls = container.firstElementChild?.className ?? '';
-      expect(cls).toContain('rounded-xl');
-      expect(cls).toContain('overflow-hidden');
-    });
-
-    it('user style merges with aspect-ratio', () => {
-      const { container } = render(
-        <AspectRatio ratio={1} style={{ backgroundColor: 'red' }}>x</AspectRatio>,
-      );
-      const el = container.firstElementChild as HTMLElement;
-      expect(el.style.backgroundColor).toBe('red');
-      expect(el.style.aspectRatio).toBe('1 / 1');
-    });
-
-    it('user style aspect-ratio overrides the prop (last wins)', () => {
-      const { container } = render(
-        <AspectRatio ratio={1} style={{ aspectRatio: '2 / 1' }}>x</AspectRatio>,
-      );
-      const el = container.firstElementChild as HTMLElement;
-      // Inline style merge — user's later spread wins
-      expect(el.style.aspectRatio).toBe('2 / 1');
-    });
-  });
-
-  // ─── Polymorphism ───────────────────────────────────────────────────
-  describe('polymorphism', () => {
-    it('as="figure" renders <figure>', () => {
-      const { container } = render(
-        <AspectRatio as="figure" ratio={1}>x</AspectRatio>,
-      );
-      expect(container.firstElementChild?.tagName).toBe('FIGURE');
-    });
-
-    it('as="picture" works for responsive image markup', () => {
-      const { container } = render(
-        <AspectRatio as="picture" ratio={16 / 9}>
-          <img src="x.jpg" alt="" />
-        </AspectRatio>,
-      );
-      expect(container.firstElementChild?.tagName).toBe('PICTURE');
-    });
-  });
-
-  // ─── Child rendering ────────────────────────────────────────────────
-  describe('child rendering', () => {
-    it('renders an <img> child', () => {
-      const { container } = render(
-        <AspectRatio ratio={16 / 9}>
-          <img src="hero.jpg" alt="hero" className="w-full h-full object-cover" />
-        </AspectRatio>,
-      );
-      const img = container.querySelector('img');
-      expect(img?.getAttribute('src')).toBe('hero.jpg');
-    });
-
-    it('renders multiple children (e.g. overlay pattern)', () => {
-      const { container } = render(
-        <AspectRatio ratio={16 / 9}>
-          <img src="hero.jpg" alt="hero" />
-          <div className="absolute inset-0 bg-black/40" />
-        </AspectRatio>,
-      );
-      expect(container.firstElementChild?.children.length).toBe(2);
-    });
-  });
-
-  // ─── Pass-through ───────────────────────────────────────────────────
-  it('forwards data-* + aria-*', () => {
-    const { container } = render(
-      <AspectRatio data-testid="ar" aria-label="hero">x</AspectRatio>,
-    );
-    const el = container.firstElementChild;
-    expect(el?.getAttribute('data-testid')).toBe('ar');
-    expect(el?.getAttribute('aria-label')).toBe('hero');
-  });
-
-  // ─── F11-bis edge cases ─────────────────────────────────────────────
-  describe('extreme ratio values', () => {
-    it('ratio="21 / 9" (ultrawide cinema) passes through verbatim', () => {
-      const { container } = render(<AspectRatio ratio="21 / 9">x</AspectRatio>);
-      expect((container.firstElementChild as HTMLElement).style.aspectRatio).toBe('21 / 9');
-    });
-
-    it('ratio="9 / 16" (portrait video) passes through verbatim', () => {
-      const { container } = render(<AspectRatio ratio="9 / 16">x</AspectRatio>);
-      expect((container.firstElementChild as HTMLElement).style.aspectRatio).toBe('9 / 16');
-    });
-
-    it('numeric tiny ratio (0.5) formats as "0.5 / 1"', () => {
-      const { container } = render(<AspectRatio ratio={0.5}>x</AspectRatio>);
-      expect((container.firstElementChild as HTMLElement).style.aspectRatio).toBe('0.5 / 1');
-    });
-
-    it('numeric large ratio (3) formats as "3 / 1"', () => {
-      const { container } = render(<AspectRatio ratio={3}>x</AspectRatio>);
-      expect((container.firstElementChild as HTMLElement).style.aspectRatio).toBe('3 / 1');
-    });
-  });
-
-  describe('rounded clipped media pattern (the #1 doc gotcha)', () => {
-    it('rounded + overflow-hidden both end up on the className', () => {
-      const { container } = render(
-        <AspectRatio ratio={16 / 9} sx="rounded-2xl overflow-hidden">
-          <img src="x.jpg" alt="" className="w-full h-full object-cover" />
-        </AspectRatio>,
-      );
-      const cls = container.firstElementChild?.className ?? '';
-      expect(cls).toContain('rounded-2xl');
-      expect(cls).toContain('overflow-hidden');
-    });
-  });
-});

package/src/components/AspectRatio/AspectRatio.tsx

@@ -1,73 +0,0 @@
-import { forwardRef, type CSSProperties, type ElementType } from 'react';
-import { cn } from '../../utils/cn.js';
-import type { AspectRatioProps } from './aspectRatio.types.js';
-
-/**
- * `<AspectRatio>` — locks the aspect ratio of its child container,
- * regardless of width. The classic use is responsive images and
- * embedded media: an `<img>` that takes 100% of the available width
- * but always renders at 16:9 (or 1:1, or whatever the source ratio is)
- * — no jumping layouts during image load, no whitespace below the
- * media, no JS measurement.
- *
- * Implementation: native CSS `aspect-ratio` property. Supported in
- * every browser shipped from 2021 onward (Chrome 88, Firefox 89,
- * Safari 15, Edge 88). No padding-bottom hack — that workaround
- * predates the native property and brings ugly absolute-positioning
- * requirements on the child.
- *
- * Why a component if it's "just one CSS property"?
- *   Two reasons:
- *     1. Discoverability — `<AspectRatio ratio={16/9}>` documents the
- *        intent at the call site. `style={{ aspectRatio: '16/9' }}` is
- *        the same thing functionally, but harder to spot in a 200-line
- *        component file.
- *     2. Composition — pairs naturally with `sx="rounded-xl overflow-hidden"`
- *        for the canonical "rounded clipped media" pattern. Forgetting
- *        the `overflow-hidden` is the #1 mistake we want to prevent
- *        through documentation (it's in this component's MDX, at the
- *        top of the Notes).
- *
- * Child contract:
- *   The single child is expected to fill the container — typically
- *   `<img>` / `<video>` with `className="w-full h-full object-cover"`.
- *   We don't force this via CSS (the consumer might want a centered
- *   icon instead of a filling image) — but it's the 99% case, and the
- *   docs show it first.
- */
-export const AspectRatio = forwardRef<HTMLElement, AspectRatioProps>(
-  function AspectRatio(props, ref) {
-    const {
-      ratio = 1,
-      as,
-      sx,
-      style,
-      children,
-      ...rest
-    } = props;
-
-    /*
-     * Normalise to a CSS `aspect-ratio` string. The CSS property
-     * accepts both `16/9` and `16 / 9` (with spaces), but for safety
-     * we convert numbers to the canonical `N / 1` form — `aspectRatio: 1.7777`
-     * works too, but produces an arbitrary-looking value in DevTools.
-     */
-    const aspectRatioValue = typeof ratio === 'number' ? `${ratio} / 1` : ratio;
-
-    const mergedStyle: CSSProperties = {
-      aspectRatio: aspectRatioValue,
-      ...style,
-    };
-
-    const classes = cn('w-full', sx);
-    const Tag = (as ?? 'div') as ElementType;
-
-    return (
-      <Tag ref={ref as never} className={classes} style={mergedStyle} {...rest}>
-        {children}
-      </Tag>
-    );
-  },
-);
-
-AspectRatio.displayName = 'AspectRatio';

package/src/components/AspectRatio/aspectRatio.types.ts

@@ -1,54 +0,0 @@
-import type { ElementType, HTMLAttributes, ReactNode } from 'react';
-
-/**
- * Props for `<AspectRatio>` — content-shape primitive that locks the
- * aspect ratio of its child regardless of width.
- *
- * Implementation: uses the native CSS `aspect-ratio` property
- * (supported in all current browsers since 2021 — Chrome 88+, Firefox 89+,
- * Safari 15+, Edge 88+). No padding-bottom hack, no JS measurement.
- *
- * `ratio` accepts:
- *   • A number — width / height. `16/9` is 1.7777…, `1` is square,
- *     `4/3` is 1.333…, `21/9` is ultrawide cinema.
- *   • A string with the CSS `aspect-ratio` syntax, e.g. `'16 / 9'`,
- *     `'4 / 3'`. Useful when you want the source ratio to read clearly
- *     in the JSX (`ratio="16 / 9"` is more legible than `ratio={16/9}`).
- *
- * The component renders a single element with `aspect-ratio: X` and
- * `width: 100%`. The child is expected to fill it — typically an
- * `<img>` or `<video>` with `className="w-full h-full object-cover"`.
- *
- * Why not a TV recipe?
- *   The ratio is arbitrary (`16/9`, `1`, `2.35`, anything). Tailwind
- *   has `aspect-square` / `aspect-video` / `aspect-[16/9]` arbitrary
- *   values, but enumerating every conceivable ratio in TV would be
- *   pointless. We set `style={{ aspectRatio }}` directly — pure CSS
- *   property, no class purge concerns.
- */
-export interface AspectRatioProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
-  /**
-   * Aspect ratio as width/height. Number (`16/9`) or CSS string
-   * (`'16 / 9'`). Default `1` (square).
-   */
-  ratio?: number | string;
-
-  /**
-   * The child that fills the locked-ratio container. Typically an
-   * `<img>` or `<video>` with `className="w-full h-full object-cover"`.
-   */
-  children?: ReactNode;
-
-  /**
-   * Override the rendered HTML tag. Defaults to `'div'`.
-   */
-  as?: ElementType;
-
-  /**
-   * Utility classes appended to the base. Resolved via `tailwind-merge`.
-   * Common overrides: `sx="rounded-xl overflow-hidden"` to clip the
-   * child's overflow (image bleeds otherwise).
-   */
-  sx?: string;
-}

package/src/components/Autocomplete/Autocomplete.perf.test.tsx

@@ -1,225 +0,0 @@
-// @vitest-environment jsdom
-/**
- * Performance + re-render budget tests for `<Autocomplete>`.
- *
- * These are NOT "is X fast" benchmarks — they're guardrails against
- * regressions in the things that matter for a 1000+ option combobox:
- *
- *  1. **Filter memoization**: `filteredOptions` must be reference-stable
- *     when its inputs (options + filter text + selection state) don't
- *     change. A stable reference means downstream lists don't re-mount.
- *
- *  2. **Render budget**: typing N characters must cause O(N) renders
- *     of the component, not O(N²) or worse. With our internals there
- *     are 2 renders per keystroke (one for `inputValue`, one for the
- *     popover opening on first keystroke), so the budget is `2N + k`
- *     for a small constant `k`.
- *
- *  3. **Initial render time** with a large option list must finish
- *     within a generous wall-clock budget. This catches a future
- *     refactor that, say, accidentally calls `getOptionLabel` 1000²
- *     times during mount.
- */
-import { describe, it, expect } from 'vitest';
-import { useEffect, useRef } from 'react';
-import { render, fireEvent, screen } from '@testing-library/react';
-import { Autocomplete } from './Autocomplete.js';
-import type { AutocompleteOption } from './autocomplete.types.js';
-
-// Generate `n` deterministic options.
-function makeOptions(n: number): AutocompleteOption[] {
-  return Array.from({ length: n }, (_, i) => ({
-    value: `o-${i}`,
-    label: `Option ${i}`,
-  }));
-}
-
-/**
- * Wrap a component and expose a render-counter ref so tests can assert
- * how many times React re-rendered the wrapped subtree.
- */
-function withRenderCounter<P>(
-  Component: React.ComponentType<P>,
-  counterRef: { count: number }
-): React.FC<P> {
-  return function Counted(props: P) {
-    counterRef.count++;
-    return <Component {...(props as P & object)} />;
-  };
-}
-
-describe('<Autocomplete> performance', () => {
-  it('mounts a 1000-option list well under 500ms', () => {
-    const options = makeOptions(1000);
-    const t0 = performance.now();
-    render(<Autocomplete name="x" options={options} label="X" />);
-    const t1 = performance.now();
-    expect(t1 - t0).toBeLessThan(500);
-  });
-
-  it('filters a 1000-option list well under 100ms per keystroke', () => {
-    const options = makeOptions(1000);
-    render(<Autocomplete name="x" options={options} label="X" />);
-    const input = screen.getByRole('combobox') as HTMLInputElement;
-    const t0 = performance.now();
-    fireEvent.change(input, { target: { value: '9' } });
-    const t1 = performance.now();
-    expect(t1 - t0).toBeLessThan(100);
-  });
-});
-
-describe('<Autocomplete> re-render budget', () => {
-  it('renders at most 2 times on mount (StrictMode-free path)', () => {
-    const counter = { count: 0 };
-    const Counted = withRenderCounter(Autocomplete, counter);
-    render(<Counted name="x" options={makeOptions(20)} label="X" />);
-    // 1 initial render — and we tolerate up to 2 to account for the
-    // synchronous useState callbacks that schedule a follow-up commit.
-    expect(counter.count).toBeLessThanOrEqual(2);
-  });
-
-  it('keeps renders linear in keystrokes (≤ 3 renders per char)', () => {
-    const counter = { count: 0 };
-    const Counted = withRenderCounter(Autocomplete, counter);
-    const { container } = render(
-      <Counted name="x" options={makeOptions(50)} label="X" />
-    );
-    const baseline = counter.count;
-    const input = container.querySelector(
-      'input[role="combobox"]'
-    ) as HTMLInputElement;
-    const N = 10;
-    for (let i = 0; i < N; i++) {
-      fireEvent.change(input, { target: { value: 'a'.repeat(i + 1) } });
-    }
-    const perChar = (counter.count - baseline) / N;
-    // 1-2 renders per keystroke is the design budget; allow some slack
-    // for popover-open transitions on the first keystroke and the
-    // highlight reset useState call.
-    expect(perChar).toBeLessThanOrEqual(3);
-  });
-
-  it('does NOT re-render an unrelated sibling on each keystroke', () => {
-    // Critical perf property: typing into one Autocomplete must not
-    // cause sibling components in the same tree to re-render. We check
-    // this by mounting a sibling whose render count we count directly.
-    const sibCount = { count: 0 };
-    const Sibling = () => {
-      sibCount.count++;
-      return <div data-testid="sib" />;
-    };
-    render(
-      <div>
-        <Autocomplete name="x" options={makeOptions(50)} label="X" />
-        <Sibling />
-      </div>
-    );
-    const before = sibCount.count;
-    const input = screen.getByRole('combobox') as HTMLInputElement;
-    for (let i = 0; i < 5; i++) {
-      fireEvent.change(input, { target: { value: 'a'.repeat(i + 1) } });
-    }
-    // No state in the parent changes ⇒ sibling never re-renders.
-    expect(sibCount.count).toBe(before);
-  });
-
-  it('filteredOptions reference is stable across unrelated re-renders', () => {
-    // Functional contract: if the deps (options, filter text, selection)
-    // don't change, `useMemo` should return the same array reference.
-    // We verify by triggering a parent re-render with no relevant input
-    // change and asserting the `<li>` DOM elements are reused (same id
-    // identities ⇒ React reused the keys).
-    const options = makeOptions(20);
-    const seenIds = new Set<string>();
-    const { rerender } = render(
-      <Autocomplete name="x" options={options} label="X" />
-    );
-    const input = screen.getByRole('combobox') as HTMLInputElement;
-    fireEvent.focus(input); // open popover so the list renders
-    const lis1 = Array.from(
-      document.querySelectorAll('[role="option"]')
-    ).map((el) => el.id);
-    lis1.forEach((id) => seenIds.add(id));
-
-    // Trigger an unrelated re-render: same options ref, same input
-    // value, same selection.
-    rerender(<Autocomplete name="x" options={options} label="X" />);
-    const lis2 = Array.from(
-      document.querySelectorAll('[role="option"]')
-    ).map((el) => el.id);
-
-    // Same ids ⇒ React keyed reuse held; list DOM was not torn down.
-    expect(lis2).toEqual(lis1);
-  });
-
-  it('captures number of options accessor calls during one filter cycle', () => {
-    // Implementation detail with strong perf relevance: filtering 1000
-    // options must call `getOptionLabel` at most O(N) times per filter
-    // (NOT O(N²) or anything weirdly memoized that re-computes per
-    // child).
-    let labelCalls = 0;
-    let valueCalls = 0;
-    const N = 200;
-    const options: AutocompleteOption[] = makeOptions(N);
-    render(
-      <Autocomplete
-        name="x"
-        options={options}
-        label="X"
-        getOptionLabel={(o) => {
-          labelCalls++;
-          return o.label;
-        }}
-        getOptionValue={(o) => {
-          valueCalls++;
-          return o.value;
-        }}
-      />
-    );
-    const input = screen.getByRole('combobox') as HTMLInputElement;
-    labelCalls = 0;
-    valueCalls = 0;
-    fireEvent.change(input, { target: { value: '5' } });
-    // Budget: O(N) on both. Allow 4x N to cover the filter pass plus
-    // the popover-open render's per-option `getOptionValue` for ids
-    // and `getOptionLabel` for the rendered <li> body.
-    expect(labelCalls).toBeLessThanOrEqual(4 * N);
-    expect(valueCalls).toBeLessThanOrEqual(4 * N);
-  });
-});
-
-describe('<Autocomplete> async + perf interaction', () => {
-  it('debounces loadOptions so 5 rapid keystrokes ⇒ 1 fetch', async () => {
-    const calls: string[] = [];
-    const load = (q: string) => {
-      calls.push(q);
-      return Promise.resolve<AutocompleteOption[]>([]);
-    };
-    render(
-      <Autocomplete
-        name="x"
-        options={[]}
-        loadOptions={load}
-        loadDebounceMs={50}
-      />
-    );
-    const input = screen.getByRole('combobox') as HTMLInputElement;
-    // Type 5 chars in quick succession (synchronous).
-    for (let i = 0; i < 5; i++) {
-      fireEvent.change(input, { target: { value: 'abcde'.slice(0, i + 1) } });
-    }
-    // Before debounce expires, no call yet.
-    expect(calls.length).toBe(0);
-    // Wait past debounce window.
-    await new Promise((r) => setTimeout(r, 80));
-    // Exactly ONE call lands, with the LAST typed value.
-    expect(calls).toEqual(['abcde']);
-  });
-});
-
-/**
- * Module-level useEffect import sanity (suppresses "useRef declared but
- * not used" if a test runner tree-shake removes some perf tests in CI).
- */
-void useRef;
-void useEffect;