@lovett/ui 0.0.5 → 0.0.7

package/src/__tests__/card.test.tsx

@@ -0,0 +1,103 @@
+/**
+ * Card — the nominal base surface.
+ *
+ * Its auto-wrap rule is the least obvious behaviour in the package and
+ * the one most likely to be "simplified" by a refactor: Head/Body get
+ * folded into a recessed tray while Foot stays on the outer frame, but
+ * only when the caller hasn't taken over tray layout themselves. All
+ * three branches are pinned here.
+ */
+import { createRef } from 'react'
+import { describe, expect, it } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import Card from '../card'
+
+describe('Card', () => {
+  it('renders children', () => {
+    render(<Card>plain content</Card>)
+    expect(screen.getByText('plain content')).toBeInTheDocument()
+  })
+
+  it('carries the surface class and merges a caller className', () => {
+    render(
+      <Card className="w-64" data-testid="card">
+        x
+      </Card>,
+    )
+    expect(screen.getByTestId('card')).toHaveClass('ds-card-surface', 'w-64')
+  })
+
+  it('forwards a ref to the root element', () => {
+    const ref = createRef<HTMLDivElement>()
+    render(<Card ref={ref}>x</Card>)
+    expect(ref.current).toBeInstanceOf(HTMLDivElement)
+  })
+
+  it('marks data-interactive only when interactive', () => {
+    const { rerender } = render(<Card data-testid="card">x</Card>)
+    expect(screen.getByTestId('card')).not.toHaveAttribute('data-interactive')
+
+    rerender(
+      <Card interactive data-testid="card">
+        x
+      </Card>,
+    )
+    expect(screen.getByTestId('card')).toHaveAttribute('data-interactive', 'true')
+  })
+
+  describe('auto-wrap', () => {
+    it('wraps Head/Body in a tray and leaves Foot on the frame', () => {
+      render(
+        <Card data-testid="card">
+          <Card.Head>head</Card.Head>
+          <Card.Body>body</Card.Body>
+          <Card.Foot>foot</Card.Foot>
+        </Card>,
+      )
+      const card = screen.getByTestId('card')
+      expect(card).toHaveAttribute('data-framed', 'true')
+
+      const tray = card.querySelector('.ds-card-tray')
+      expect(tray).not.toBeNull()
+      expect(tray).toHaveTextContent('head')
+      expect(tray).toHaveTextContent('body')
+      // Foot is a sibling of the tray, not inside it — this is what puts
+      // the footer on the outer frame.
+      expect(tray).not.toHaveTextContent('foot')
+      expect(card).toHaveTextContent('foot')
+    })
+
+    it('renders flat when the caller supplies an explicit Tray', () => {
+      render(
+        <Card data-testid="card">
+          <Card.Tray>managed</Card.Tray>
+        </Card>,
+      )
+      const card = screen.getByTestId('card')
+      expect(card).not.toHaveAttribute('data-framed')
+      // Exactly one tray — the caller's, not an added wrapper.
+      expect(card.querySelectorAll('.ds-card-tray')).toHaveLength(1)
+    })
+
+    it('renders flat when no named slot is used', () => {
+      render(
+        <Card data-testid="card">
+          <div>custom</div>
+        </Card>,
+      )
+      const card = screen.getByTestId('card')
+      expect(card).not.toHaveAttribute('data-framed')
+      expect(card.querySelector('.ds-card-tray')).toBeNull()
+    })
+  })
+
+  describe('Card.MetaItem', () => {
+    it('renders digits with tabular-nums', () => {
+      // Regression: this used a `tnum` class that is only defined in
+      // apps/preview-lab, so in the workspace app every meta figure
+      // rendered with proportional digits and jittered on update.
+      render(<Card.MetaItem>1,234</Card.MetaItem>)
+      expect(screen.getByText('1,234')).toHaveClass('tabular-nums')
+    })
+  })
+})

package/src/__tests__/dead-render.test.tsx

@@ -0,0 +1,117 @@
+/**
+ * Regression tests for the "type-checks, lints, builds, renders nothing"
+ * family found by the design-system audit.
+ *
+ * Every bug pinned here passed typecheck, lint, build AND the full
+ * 243-file workspace test suite while shipping visibly broken UI. They
+ * share one shape: a declaration that is syntactically fine and
+ * semantically void, so no gate that reads the source can see it.
+ *
+ * These assert the CLASS OF DEFECT, not a specific painted pixel — the
+ * suite runs with `css: false`, so a test can't measure colour. What it
+ * CAN do is assert that the value handed to the browser is a colour
+ * expression and not a box-shadow list, and that a state which is
+ * supposed to change the DOM actually changes it. That is enough to
+ * catch every one of these coming back.
+ */
+import { describe, expect, it } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { PillButton } from '../pill-button'
+import { SortableTable } from '../sortable-table'
+import Card from '../card'
+
+// The CSS-validity half of this defect class is NOT testable through the
+// DOM — any value containing var() is stored verbatim by the CSSOM, so a
+// rendered assertion passes on the broken form. That half lives in
+// token-shape.test.ts as a source scan. What remains here is the half
+// that IS observable at runtime: state that must change the DOM.
+
+describe('PillButton tone map', () => {
+  // The map was an inverted copy of Badge's: Badge pairs a tinted `*-bg`
+  // fill with solid `*` text, and success/warning/info were copied with
+  // bg and color still in Badge's order — painting each label in a
+  // 12%-alpha version of its own background. Measured contrast ~1:1.
+  it.each(['success', 'warning', 'info', 'accent', 'neutral'] as const)(
+    'does not paint a %s label in its own background colour',
+    (tone) => {
+      render(
+        <PillButton active tone={tone} onClick={() => {}}>
+          Label
+        </PillButton>,
+      )
+      const btn = screen.getByRole('button', { name: 'Label' })
+      const { background, color } = btn.style
+      expect(background).not.toBe('')
+      expect(color).not.toBe('')
+      expect(color).not.toBe(background)
+      // The specific inversion: text painted with the fill's -bg token.
+      expect(color).not.toMatch(/--(success|warning|info)-bg/)
+    },
+  )
+
+  it('keeps the label transparent-free when inactive', () => {
+    render(
+      <PillButton active={false} onClick={() => {}}>
+        Label
+      </PillButton>,
+    )
+    const btn = screen.getByRole('button', { name: 'Label' })
+    expect(btn.style.color).not.toBe(btn.style.background)
+  })
+})
+
+describe('SortableTable zebra striping', () => {
+  const rows = [
+    { id: 'a', name: 'Alpha' },
+    { id: 'b', name: 'Bravo' },
+    { id: 'c', name: 'Charlie' },
+  ]
+  const columns = [
+    { id: 'name', label: 'Name', accessor: (r: (typeof rows)[number]) => r.name },
+  ]
+
+  it('bands alternating rows when zebra is on', () => {
+    // NOTE: whether the fill is VALID CSS is checked in token-shape.test.ts
+    // — it cannot be checked here (see the file header). This asserts only
+    // the banding pattern: odd rows differ from even, and the pattern
+    // repeats.
+    const { container } = render(
+      <SortableTable rows={rows} columns={columns} rowKey={(r) => r.id} zebra />,
+    )
+    const bodyRows = container.querySelectorAll('tbody tr')
+    expect(bodyRows).toHaveLength(3)
+
+    const backgrounds = Array.from(bodyRows).map(
+      (tr) => (tr as HTMLElement).style.background,
+    )
+    expect(backgrounds[1]).not.toBe('')
+    expect(backgrounds[1]).not.toBe(backgrounds[0]!)
+    expect(backgrounds[2]).toBe(backgrounds[0]!)
+  })
+
+  it('leaves rows unbanded when zebra is off', () => {
+    const { container } = render(
+      <SortableTable
+        rows={rows}
+        columns={columns}
+        rowKey={(r) => r.id}
+        zebra={false}
+      />,
+    )
+    const backgrounds = Array.from(
+      container.querySelectorAll('tbody tr'),
+    ).map((tr) => (tr as HTMLElement).style.background)
+    expect(new Set(backgrounds).size).toBe(1)
+  })
+})
+
+describe('no interpolated Tailwind classes reach the DOM', () => {
+  // Tailwind scans source statically, so `h-[${N}px]` is never generated.
+  // Anything matching this shape rendered as a class that does not exist.
+  it('Card.MetaItem uses a real utility for tabular figures', () => {
+    render(<Card.MetaItem>42</Card.MetaItem>)
+    const el = screen.getByText('42')
+    expect(el.className).not.toMatch(/\$\{|\[\s*\]/)
+    expect(el).toHaveClass('tabular-nums')
+  })
+})

package/src/__tests__/input.test.tsx

@@ -0,0 +1,134 @@
+/**
+ * Input — 130 consuming files, previously zero tests.
+ *
+ * The sharpest contract here is that Input has TWO class slots:
+ * `className` lands on the <input>, `shellClassName` on the wrapper.
+ * Consumers get this wrong, and nothing caught it before.
+ */
+import { createRef } from 'react'
+import { describe, expect, it, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Input } from '../input'
+
+const shellOf = (el: HTMLElement) => el.closest('.input-shell')
+
+describe('Input', () => {
+  it('renders an <input> inside an .input-shell wrapper', () => {
+    render(<Input placeholder="Search" />)
+    const input = screen.getByPlaceholderText('Search')
+    expect(input.tagName).toBe('INPUT')
+    expect(shellOf(input)).not.toBeNull()
+  })
+
+  it('routes className to the <input> and shellClassName to the wrapper', () => {
+    render(<Input placeholder="p" className="text-red" shellClassName="w-full" />)
+    const input = screen.getByPlaceholderText('p')
+    expect(input).toHaveClass('text-red')
+    expect(input).not.toHaveClass('w-full')
+    expect(shellOf(input)).toHaveClass('input-shell', 'w-full')
+  })
+
+  it('flags .is-error on the shell, not the input', () => {
+    render(<Input placeholder="p" error />)
+    const input = screen.getByPlaceholderText('p')
+    expect(shellOf(input)).toHaveClass('is-error')
+  })
+
+  it('disables the input and flags .is-disabled on the shell', () => {
+    render(<Input placeholder="p" disabled />)
+    const input = screen.getByPlaceholderText('p')
+    expect(input).toBeDisabled()
+    expect(shellOf(input)).toHaveClass('is-disabled')
+  })
+
+  it.each([
+    ['sm', 'size-sm'],
+    ['lg', 'size-lg'],
+  ] as const)('maps inputSize=%s to .%s on the shell', (size, expected) => {
+    render(<Input placeholder="p" inputSize={size} />)
+    expect(shellOf(screen.getByPlaceholderText('p'))).toHaveClass(expected)
+  })
+
+  it('adds .is-numeric for the tabular calculator variant', () => {
+    render(<Input placeholder="p" numeric />)
+    expect(shellOf(screen.getByPlaceholderText('p'))).toHaveClass('is-numeric')
+  })
+
+  it('flags has-leading / has-trailing only when the affix is present', () => {
+    const { rerender } = render(<Input placeholder="p" />)
+    expect(shellOf(screen.getByPlaceholderText('p'))).not.toHaveClass(
+      'has-leading',
+      'has-trailing',
+    )
+
+    rerender(<Input placeholder="p" leadingAffix={<span>$</span>} />)
+    const withLeading = shellOf(screen.getByPlaceholderText('p'))
+    expect(withLeading).toHaveClass('has-leading')
+    expect(withLeading).not.toHaveClass('has-trailing')
+
+    rerender(
+      <Input
+        placeholder="p"
+        leadingAffix={<span>$</span>}
+        trailingAffix={<span>USD</span>}
+      />,
+    )
+    expect(shellOf(screen.getByPlaceholderText('p'))).toHaveClass(
+      'has-leading',
+      'has-trailing',
+    )
+  })
+
+  it('forwards a ref to the <input>, not the shell', () => {
+    const ref = createRef<HTMLInputElement>()
+    render(<Input ref={ref} placeholder="p" />)
+    expect(ref.current).toBeInstanceOf(HTMLInputElement)
+  })
+
+  it('spreads rest props onto the <input>', () => {
+    render(<Input placeholder="p" aria-label="Email" autoComplete="email" />)
+    const input = screen.getByLabelText('Email')
+    expect(input).toHaveAttribute('autocomplete', 'email')
+  })
+
+  it('reports typed values through onChange', async () => {
+    const onChange = vi.fn()
+    render(<Input placeholder="p" onChange={onChange} />)
+    await userEvent.type(screen.getByPlaceholderText('p'), 'ab')
+    expect(onChange).toHaveBeenCalledTimes(2)
+  })
+
+  describe('password toggle', () => {
+    it('reveals and re-hides the value', async () => {
+      render(<Input placeholder="p" type="password" showPasswordToggle />)
+      const input = screen.getByPlaceholderText('p')
+      expect(input).toHaveAttribute('type', 'password')
+
+      const toggle = screen.getByRole('button', { name: 'Show password' })
+      await userEvent.click(toggle)
+      expect(input).toHaveAttribute('type', 'text')
+
+      await userEvent.click(screen.getByRole('button', { name: 'Hide password' }))
+      expect(input).toHaveAttribute('type', 'password')
+    })
+
+    it('is a no-op unless type="password"', () => {
+      render(<Input placeholder="p" type="text" showPasswordToggle />)
+      expect(screen.queryByRole('button', { name: 'Show password' })).toBeNull()
+    })
+
+    it('yields to a caller-supplied trailingAffix', () => {
+      render(
+        <Input
+          placeholder="p"
+          type="password"
+          showPasswordToggle
+          trailingAffix={<span data-testid="mine" />}
+        />,
+      )
+      expect(screen.getByTestId('mine')).toBeInTheDocument()
+      expect(screen.queryByRole('button', { name: 'Show password' })).toBeNull()
+    })
+  })
+})

package/src/__tests__/modal.test.tsx

@@ -0,0 +1,154 @@
+/**
+ * Modal — 51 consuming files plus 113 sub-component call sites.
+ *
+ * Note what these tests deliberately do NOT claim: Modal has no
+ * role="dialog", no aria-modal, no focus trap and no focus restore, so
+ * there is no dialog role to query by. That is a real accessibility gap
+ * (a keyboard user can Tab through the page behind the backdrop) and it
+ * is tracked separately — these tests pin the behaviour that exists so
+ * the a11y work can be verified as a change, not guessed at.
+ */
+import { describe, expect, it, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import Modal from '../modal'
+
+const noop = () => {}
+
+describe('Modal', () => {
+  it('renders nothing when closed', () => {
+    const { container } = render(
+      <Modal isOpen={false} onClose={noop} title="Confirm">
+        body
+      </Modal>,
+    )
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it('renders the title and body when open', () => {
+    render(
+      <Modal isOpen onClose={noop} title="Confirm">
+        body content
+      </Modal>,
+    )
+    expect(screen.getByRole('heading', { name: 'Confirm' })).toBeInTheDocument()
+    expect(screen.getByText('body content')).toBeInTheDocument()
+  })
+
+  it('closes on the labelled close button', async () => {
+    const onClose = vi.fn()
+    render(
+      <Modal isOpen onClose={onClose} title="Confirm">
+        body
+      </Modal>,
+    )
+    await userEvent.click(screen.getByRole('button', { name: 'Close' }))
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+
+  it('closes on Escape', async () => {
+    const onClose = vi.fn()
+    render(
+      <Modal isOpen onClose={onClose} title="Confirm">
+        body
+      </Modal>,
+    )
+    await userEvent.keyboard('{Escape}')
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not listen for Escape while closed', async () => {
+    const onClose = vi.fn()
+    render(
+      <Modal isOpen={false} onClose={onClose} title="Confirm">
+        body
+      </Modal>,
+    )
+    await userEvent.keyboard('{Escape}')
+    expect(onClose).not.toHaveBeenCalled()
+  })
+
+  it('detaches the Escape listener on unmount', async () => {
+    const onClose = vi.fn()
+    const { unmount } = render(
+      <Modal isOpen onClose={onClose} title="Confirm">
+        body
+      </Modal>,
+    )
+    unmount()
+    await userEvent.keyboard('{Escape}')
+    expect(onClose).not.toHaveBeenCalled()
+  })
+
+  describe('Tray + Footer compose into one decision surface', () => {
+    // The actions belong ON the tray, not in the frame gap below it.
+    // Before this, Tray sat at --tray-inset (4px) and Footer on the outer
+    // card at px-6 (24px), so the buttons were 20px inboard of the tray
+    // edge they were meant to align with, and `.ds-card-tray:not(:last-child)`
+    // zeroed the tray's bottom margin so its lower corners were cut flush.
+    const renderBoth = () =>
+      render(
+        <Modal isOpen onClose={noop} title="Confirm">
+          <Modal.Tray>tray body</Modal.Tray>
+          <Modal.Footer>
+            <button type="button">Confirm</button>
+          </Modal.Footer>
+        </Modal>,
+      )
+
+    it('puts the actions INSIDE the tray', () => {
+      renderBoth()
+      const tray = document.querySelector('.ds-card-tray')
+      expect(tray).toHaveTextContent('tray body')
+      expect(tray).toHaveTextContent('Confirm')
+      expect(tray!.contains(screen.getByRole('button', { name: 'Confirm' }))).toBe(
+        true,
+      )
+    })
+
+    it('renders exactly one tray — the footer does not get its own', () => {
+      renderBoth()
+      expect(document.querySelectorAll('.ds-card-tray')).toHaveLength(1)
+    })
+
+    it('separates body from actions with a divider', () => {
+      renderBoth()
+      const footer = screen
+        .getByRole('button', { name: 'Confirm' })
+        .closest('div')!
+      expect(footer.className).toContain('border-t')
+    })
+
+    it('keeps a Tray standalone when there is no Footer', () => {
+      render(
+        <Modal isOpen onClose={noop} title="Confirm">
+          <Modal.Tray>tray body</Modal.Tray>
+        </Modal>,
+      )
+      const tray = document.querySelector('.ds-card-tray')
+      expect(tray).toHaveTextContent('tray body')
+      // The standalone tray owns its own padding.
+      expect(tray!.className).toContain('p-5')
+    })
+
+    it('leaves flat children alone', () => {
+      render(
+        <Modal isOpen onClose={noop} title="Confirm">
+          <p>flat body</p>
+        </Modal>,
+      )
+      expect(screen.getByText('flat body')).toBeInTheDocument()
+      expect(document.querySelector('.ds-card-tray')).toBeNull()
+    })
+  })
+
+  it('merges a caller className onto the panel', () => {
+    render(
+      <Modal isOpen onClose={noop} title="Confirm" className="max-w-sm">
+        body
+      </Modal>,
+    )
+    const panel = document.querySelector('.ds-card-surface')
+    expect(panel).toHaveClass('ds-card-surface', 'max-w-sm')
+  })
+})

package/src/__tests__/page-shell.test.tsx

@@ -0,0 +1,128 @@
+/**
+ * PageShell — 84 consuming files.
+ *
+ * Two behaviours matter to consumers and neither was verified before:
+ * the legacy `breadcrumb` + `title` props still resolve to the same
+ * crumb chain as `crumbs`, and the slot-host mode relocates the header
+ * instead of rendering a second sticky bar.
+ *
+ * PageShell imports <Link>, which is why every consumer inherits a hard
+ * dependency on react-router-dom — hence the MemoryRouter here.
+ */
+import { describe, expect, it } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { MemoryRouter } from 'react-router-dom'
+import {
+  PageShell,
+  PageHeaderSlotProvider,
+  PageHeaderHost,
+} from '../page-shell'
+
+const renderShell = (ui: React.ReactNode) =>
+  render(<MemoryRouter>{ui}</MemoryRouter>)
+
+describe('PageShell', () => {
+  it('renders its children', () => {
+    renderShell(
+      <PageShell title="Brand">
+        <p>lens content</p>
+      </PageShell>,
+    )
+    expect(screen.getByText('lens content')).toBeInTheDocument()
+  })
+
+  it('renders a crumb chain, linking only the crumbs that have a `to`', () => {
+    renderShell(
+      <PageShell
+        crumbs={[
+          { label: 'Clients', to: '/clients' },
+          { label: 'Acme' },
+          { label: 'Brand' },
+        ]}
+      >
+        <p>x</p>
+      </PageShell>,
+    )
+    expect(screen.getByRole('link', { name: 'Clients' })).toHaveAttribute(
+      'href',
+      '/clients',
+    )
+    expect(screen.queryByRole('link', { name: 'Acme' })).toBeNull()
+    expect(screen.getByText('Acme')).toBeInTheDocument()
+    expect(screen.getByText('Brand')).toBeInTheDocument()
+  })
+
+  it('resolves the legacy breadcrumb + title pair into the same chain', () => {
+    renderShell(
+      <PageShell breadcrumb="Clients" title="Brand">
+        <p>x</p>
+      </PageShell>,
+    )
+    expect(screen.getByText('Clients')).toBeInTheDocument()
+    expect(screen.getByText('Brand')).toBeInTheDocument()
+  })
+
+  it('prefers `crumbs` over the legacy props when both are supplied', () => {
+    renderShell(
+      <PageShell breadcrumb="Legacy" title="Old" crumbs={[{ label: 'New' }]}>
+        <p>x</p>
+      </PageShell>,
+    )
+    expect(screen.getByText('New')).toBeInTheDocument()
+    expect(screen.queryByText('Legacy')).toBeNull()
+    expect(screen.queryByText('Old')).toBeNull()
+  })
+
+  it('renders actions', () => {
+    renderShell(
+      <PageShell title="Brand" actions={<button type="button">Export</button>}>
+        <p>x</p>
+      </PageShell>,
+    )
+    expect(screen.getByRole('button', { name: 'Export' })).toBeInTheDocument()
+  })
+
+  it('renders its own sticky header when no host is mounted', () => {
+    renderShell(
+      <PageShell title="Brand">
+        <p>x</p>
+      </PageShell>,
+    )
+    expect(screen.getByRole('banner')).toBeInTheDocument()
+  })
+
+  it('portals the header into the host instead of rendering a second bar', () => {
+    renderShell(
+      <PageHeaderSlotProvider>
+        <PageHeaderHost />
+        <PageShell title="Brand" actions={<button type="button">Export</button>}>
+          <p>lens content</p>
+        </PageShell>
+      </PageHeaderSlotProvider>,
+    )
+    // The crumbs and actions still render exactly once...
+    expect(screen.getByText('Brand')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Export' })).toBeInTheDocument()
+    // ...and PageShell does not add its own <header> on top of the host's.
+    expect(screen.getAllByRole('banner')).toHaveLength(1)
+  })
+
+  it('applies the default content padding, overridable by contentClassName', () => {
+    const { container, rerender } = renderShell(
+      <PageShell title="Brand">
+        <p>x</p>
+      </PageShell>,
+    )
+    expect(container.querySelector('.px-7')).not.toBeNull()
+
+    rerender(
+      <MemoryRouter>
+        <PageShell title="Brand" contentClassName="p-0">
+          <p>x</p>
+        </PageShell>
+      </MemoryRouter>,
+    )
+    expect(container.querySelector('.px-7')).toBeNull()
+    expect(container.querySelector('.p-0')).not.toBeNull()
+  })
+})

package/src/__tests__/setup.ts

@@ -0,0 +1,43 @@
+import '@testing-library/jest-dom/vitest'
+
+// Setup runs for BOTH environments. Pure source-scan files opt into the
+// node env with a `// @vitest-environment node` pragma (it skips the
+// ~500ms jsdom init), so every DOM stub below has to be guarded.
+const HAS_DOM = typeof window !== 'undefined'
+
+if (HAS_DOM) {
+  // jsdom ships neither observer. DropdownMenu measures its content before
+  // revealing it, ChipNav scroll-spies with an IntersectionObserver, and
+  // several primitives observe container resize. No-op stubs are enough
+  // for tests that don't exercise the observers themselves.
+  class StubIntersectionObserver {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+    takeRecords(): IntersectionObserverEntry[] {
+      return []
+    }
+    root = null
+    rootMargin = ''
+    thresholds = []
+  }
+  ;(
+    globalThis as unknown as {
+      IntersectionObserver: typeof IntersectionObserver
+    }
+  ).IntersectionObserver =
+    StubIntersectionObserver as unknown as typeof IntersectionObserver
+
+  class StubResizeObserver {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+  ;(
+    globalThis as unknown as { ResizeObserver: typeof ResizeObserver }
+  ).ResizeObserver = StubResizeObserver as unknown as typeof ResizeObserver
+
+  if (!Element.prototype.scrollIntoView) {
+    Element.prototype.scrollIntoView = function () {}
+  }
+}