@lovett/ui 0.0.11 → 0.2.0

package/src/detail/__tests__/detail-chrome.test.tsx

@@ -0,0 +1,134 @@
+/**
+ * DetailHeader and DetailMenu — the slots, and the rule that governs them.
+ *
+ * §7 names three controls with no backing system, and the owner's standing
+ * rule is that a rendered control does what it says. Both components express
+ * that the same way: a slot the host does not fill is not drawn. These tests
+ * assert the ABSENCE, because a dead control is exactly the kind of regression
+ * that no other check catches.
+ */
+import { describe, expect, it, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { DetailHeader } from '../detail-header'
+import { DetailMenu } from '../detail-menu'
+
+const noop = () => {}
+const NOW = new Date(2026, 8, 15, 12, 0, 0).getTime()
+
+describe('DetailHeader', () => {
+  it('draws nothing for a slot the host did not fill', () => {
+    render(<DetailHeader title="Slice B" onClose={noop} />)
+    expect(screen.queryByRole('button', { name: /complete/i })).toBeNull()
+    expect(screen.queryByRole('button', { name: /favourite/i })).toBeNull()
+    expect(screen.queryByRole('button', { name: /Previous item/ })).toBeNull()
+    expect(document.querySelector('[data-slot="detail-reminder"]')).toBeNull()
+    expect(document.querySelector('[data-slot="detail-menu-slot"]')).toBeNull()
+    // A title with no change handler is a heading, not a field.
+    expect(screen.getByRole('heading', { name: 'Slice B' })).toBeInTheDocument()
+    expect(screen.queryByRole('textbox')).toBeNull()
+  })
+
+  it('reflects completion in the label, not only in colour', async () => {
+    const onCompleteChange = vi.fn()
+    const view = render(
+      <DetailHeader
+        title="Slice B"
+        onClose={noop}
+        complete={false}
+        onCompleteChange={onCompleteChange}
+      />,
+    )
+    const toggle = screen.getByRole('button', { name: 'Mark complete' })
+    expect(toggle).toHaveAttribute('aria-pressed', 'false')
+    await userEvent.click(toggle)
+    expect(onCompleteChange).toHaveBeenCalledWith(true)
+
+    view.rerender(
+      <DetailHeader title="Slice B" onClose={noop} complete onCompleteChange={onCompleteChange} />,
+    )
+    expect(screen.getByRole('button', { name: 'Completed' })).toHaveAttribute(
+      'aria-pressed',
+      'true',
+    )
+  })
+
+  it('disables the step at the end it has no handler for', () => {
+    render(<DetailHeader title="Slice B" onClose={noop} onNext={noop} />)
+    expect(screen.getByRole('button', { name: 'Previous item' })).toBeDisabled()
+    expect(screen.getByRole('button', { name: 'Next item' })).toBeEnabled()
+  })
+
+  it('edits the title in place, committing on Enter', async () => {
+    const onTitleChange = vi.fn()
+    const onTitleCommit = vi.fn()
+    render(
+      <DetailHeader
+        title="Slice B"
+        onClose={noop}
+        onTitleChange={onTitleChange}
+        onTitleCommit={onTitleCommit}
+      />,
+    )
+    const field = screen.getByRole('textbox', { name: 'Item title' })
+    await userEvent.type(field, '!{Enter}')
+    expect(onTitleChange).toHaveBeenCalledWith('Slice B!')
+    expect(onTitleCommit).toHaveBeenCalledTimes(1)
+  })
+
+  it('reads out when the item was updated', () => {
+    render(<DetailHeader title="Slice B" onClose={noop} updatedAt={NOW - 3_600_000} now={NOW} />)
+    expect(document.querySelector('[data-slot="detail-updated"]')).toHaveTextContent('Updated 1h')
+  })
+})
+
+describe('DetailMenu', () => {
+  it('renders only the actions the host supplied, in the brief order', async () => {
+    render(
+      <DetailMenu
+        mode="full"
+        onModeChange={noop}
+        actions={{ move: { onSelect: noop }, print: { onSelect: noop }, delete: { onSelect: noop } }}
+      />,
+    )
+    await userEvent.click(screen.getByRole('button', { name: 'More actions' }))
+    const items = screen.getAllByRole('menuitem').map((item) => item.dataset['action'])
+    expect(items).toEqual(['move', 'print', 'delete'])
+    // Repeat has no scheduling engine behind it (§7), so it is not drawn.
+    expect(screen.queryByRole('menuitem', { name: /Repeat/ })).toBeNull()
+  })
+
+  it('offers the three modes, with the current one pressed', async () => {
+    const onModeChange = vi.fn()
+    render(<DetailMenu mode="panel" onModeChange={onModeChange} />)
+    await userEvent.click(screen.getByRole('button', { name: 'More actions' }))
+    expect(screen.getByRole('button', { name: 'Open in side panel' })).toHaveAttribute(
+      'aria-pressed',
+      'true',
+    )
+    await userEvent.click(screen.getByRole('button', { name: 'Open full screen' }))
+    expect(onModeChange).toHaveBeenCalledWith('full')
+  })
+
+  it('asks twice before deleting', async () => {
+    const onDelete = vi.fn()
+    render(
+      <DetailMenu mode="full" onModeChange={noop} actions={{ delete: { onSelect: onDelete } }} />,
+    )
+    await userEvent.click(screen.getByRole('button', { name: 'More actions' }))
+    await userEvent.click(screen.getByRole('menuitem', { name: 'Delete' }))
+    expect(onDelete).not.toHaveBeenCalled()
+    await userEvent.click(screen.getByRole('menuitem', { name: 'Confirm delete' }))
+    expect(onDelete).toHaveBeenCalledTimes(1)
+  })
+
+  it('offers the record id to the clipboard', async () => {
+    const onCopy = vi.fn()
+    render(
+      <DetailMenu mode="full" onModeChange={noop} recordId="itm_123" onCopyRecordId={onCopy} />,
+    )
+    await userEvent.click(screen.getByRole('button', { name: 'More actions' }))
+    await userEvent.click(screen.getByRole('menuitem', { name: 'Copy record id itm_123' }))
+    expect(onCopy).toHaveBeenCalledWith('itm_123')
+  })
+})

package/src/detail/__tests__/detail-surface.test.tsx

@@ -0,0 +1,529 @@
+/**
+ * DetailSurface — three modes, one DOM.
+ *
+ * The tests that matter are not "does it render": they are the two claims the
+ * brief makes that a different implementation would silently break — that the
+ * orientation follows the mode, and that switching modes keeps the open item,
+ * the scroll, and an in-progress edit. The last one is asserted by NODE
+ * IDENTITY, because that is what actually guarantees it: if the panes are the
+ * same DOM elements before and after, nothing below them was unmounted and
+ * there is no list of state to remember.
+ */
+import { describe, expect, it, vi } from 'vitest'
+import { act, fireEvent, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { DetailSurface } from '../detail-surface'
+import { FieldRow } from '../field-row'
+import type { DetailMode } from '../types'
+
+const noop = () => {}
+
+/**
+ * A `ResizeObserver` that reports one fixed box, immediately.
+ *
+ * The package's setup stubs the observer as a no-op, which is right for every
+ * other test — but the bounds this file asserts EXIST because the container is
+ * measured, so a test that never measures would pass against the very bug it
+ * is here to catch. Returns the restore function.
+ */
+function measureAt(width: number, height: number): () => void {
+  const original = globalThis.ResizeObserver
+  class FixedResizeObserver {
+    constructor(private readonly callback: ResizeObserverCallback) {}
+    observe(target: Element): void {
+      const entry = {
+        target,
+        contentRect: { width, height } as DOMRectReadOnly,
+      } as ResizeObserverEntry
+      this.callback([entry], this as unknown as ResizeObserver)
+    }
+    unobserve(): void {}
+    disconnect(): void {}
+  }
+  globalThis.ResizeObserver = FixedResizeObserver as unknown as typeof ResizeObserver
+  return () => {
+    globalThis.ResizeObserver = original
+  }
+}
+
+/**
+ * The same fixed box, but the test can MOVE it afterwards.
+ *
+ * `measureAt` answers once, at `observe`, which is all a first-layout
+ * assertion needs. The claim that the clamps RE-DERIVE needs a second reading:
+ * every live observer is re-notified with the new box, exactly as the browser
+ * would on a resize. Returns a setter and a restore function.
+ */
+function measurable(width: number, height: number) {
+  const original = globalThis.ResizeObserver
+  let box = { width, height }
+  const live = new Set<{ cb: ResizeObserverCallback; targets: Set<Element> }>()
+  const emit = (record: { cb: ResizeObserverCallback; targets: Set<Element> }) => {
+    for (const target of record.targets) {
+      const entry = {
+        target,
+        contentRect: { width: box.width, height: box.height } as DOMRectReadOnly,
+      } as ResizeObserverEntry
+      record.cb([entry], null as unknown as ResizeObserver)
+    }
+  }
+  class LiveResizeObserver {
+    private readonly record: { cb: ResizeObserverCallback; targets: Set<Element> }
+    constructor(callback: ResizeObserverCallback) {
+      this.record = { cb: callback, targets: new Set<Element>() }
+      live.add(this.record)
+    }
+    observe(target: Element): void {
+      this.record.targets.add(target)
+      emit(this.record)
+    }
+    unobserve(target: Element): void {
+      this.record.targets.delete(target)
+    }
+    disconnect(): void {
+      live.delete(this.record)
+    }
+  }
+  globalThis.ResizeObserver = LiveResizeObserver as unknown as typeof ResizeObserver
+  return {
+    resize(next: { width: number; height: number }) {
+      box = next
+      for (const record of live) emit(record)
+    },
+    restore() {
+      globalThis.ResizeObserver = original
+    },
+  }
+}
+
+/** The inner seam. Named, because `panel` mode now has two separators. */
+function innerDivider(): HTMLElement {
+  return screen.getByRole('separator', { name: 'Resize the activity pane' })
+}
+
+/** The panel's own leading edge. Only exists in `panel` mode. */
+function edgeHandle(): HTMLElement {
+  return screen.getByRole('separator', { name: 'Resize the panel' })
+}
+
+function panelOf(): HTMLElement {
+  const node = document.querySelector<HTMLElement>('[data-slot="detail-panel"]')
+  if (node === null) throw new Error('no detail panel')
+  return node
+}
+
+function renderSurface(mode: DetailMode, open = true) {
+  return render(
+    <DetailSurface
+      open={open}
+      mode={mode}
+      onClose={noop}
+      ariaLabel="Tasks lens slice B"
+      aside={<div>activity</div>}
+    >
+      <div>fields</div>
+    </DetailSurface>,
+  )
+}
+
+describe('DetailSurface', () => {
+  it('names the dialog and stays mounted when closed', () => {
+    renderSurface('full', false)
+    const panel = panelOf()
+    expect(panel).toHaveAttribute('inert')
+    expect(panel).toHaveAttribute('aria-label', 'Tasks lens slice B')
+  })
+
+  it('renders each of the three modes', () => {
+    for (const mode of ['full', 'modal', 'panel'] as const) {
+      const view = renderSurface(mode)
+      expect(panelOf()).toHaveAttribute('data-mode', mode)
+      view.unmount()
+    }
+  })
+
+  it('is modal in full and modal, and not in panel', () => {
+    const view = renderSurface('full')
+    expect(screen.getByRole('dialog')).toHaveAttribute('aria-modal', 'true')
+    view.unmount()
+
+    renderSurface('panel')
+    expect(screen.getByRole('dialog')).not.toHaveAttribute('aria-modal')
+  })
+
+  it('puts activity to the side in full and modal, below in panel', () => {
+    const view = render(
+      <DetailSurface open mode="full" onClose={noop} ariaLabel="Item" aside={<div>activity</div>}>
+        <div>fields</div>
+      </DetailSurface>,
+    )
+    expect(document.querySelector('[data-slot="detail-split"]')).toHaveAttribute(
+      'data-orientation',
+      'side',
+    )
+    expect(screen.getByRole('separator')).toHaveAttribute('aria-orientation', 'vertical')
+
+    view.rerender(
+      <DetailSurface open mode="panel" onClose={noop} ariaLabel="Item" aside={<div>activity</div>}>
+        <div>fields</div>
+      </DetailSurface>,
+    )
+    expect(document.querySelector('[data-slot="detail-split"]')).toHaveAttribute(
+      'data-orientation',
+      'bottom',
+    )
+    expect(innerDivider()).toHaveAttribute('aria-orientation', 'horizontal')
+  })
+
+  it('renders no divider when there is no activity pane', () => {
+    render(
+      <DetailSurface open mode="full" onClose={noop} ariaLabel="Item">
+        <div>fields</div>
+      </DetailSurface>,
+    )
+    expect(screen.queryByRole('separator')).toBeNull()
+  })
+
+  it('moves focus into the surface on open', () => {
+    renderSurface('full')
+    expect(document.activeElement).toBe(panelOf())
+  })
+
+  it('closes on Escape', async () => {
+    const onClose = vi.fn()
+    render(
+      <DetailSurface open mode="full" onClose={onClose} ariaLabel="Item">
+        <div>fields</div>
+      </DetailSurface>,
+    )
+    await userEvent.keyboard('{Escape}')
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+
+  it('keeps the panes — and an in-progress edit — across a mode switch', async () => {
+    // The mode changes the way it changes in the product: the host re-renders
+    // with a new `mode`. It is deliberately NOT driven by clicking a button in
+    // this test, because clicking anything outside the field blurs it, and
+    // blur COMMITS (§4) — that path would prove the commit rule, not the
+    // structural claim this test exists for.
+    const surface = (mode: DetailMode) => (
+      <DetailSurface open mode={mode} onClose={noop} ariaLabel="Item" aside={<div>activity</div>}>
+        <FieldRow.Text label="Next steps" value="" onCommit={noop} />
+      </DetailSurface>
+    )
+    const view = render(surface('full'))
+
+    const fieldsBefore = document.querySelector('[data-slot="detail-fields"]')
+    await userEvent.click(screen.getByRole('button', { name: /Next steps/ }))
+    const editor = screen.getByRole('textbox', { name: 'Next steps' })
+    await userEvent.type(editor, 'half a sen')
+
+    view.rerender(surface('panel'))
+
+    // The same DOM nodes, so nothing below them was reconciled away.
+    expect(document.querySelector('[data-slot="detail-fields"]')).toBe(fieldsBefore)
+    expect(screen.getByRole('textbox', { name: 'Next steps' })).toBe(editor)
+    expect(editor).toHaveValue('half a sen')
+    expect(panelOf()).toHaveAttribute('data-mode', 'panel')
+  })
+
+  it('never lets the activity pane squeeze the fields below their floor', () => {
+    // The defect, as a number. A `modal` panel is at most 840px wide; the
+    // aside's own ceiling is 720, which left the fields ~116px and wrapped
+    // every value to about four characters. The ceiling the divider reports
+    // must be the CONTAINER's answer — 840 − 288 (the fields floor) − 4 (the
+    // divider) = 548 — not the constant.
+    const restore = measureAt(840, 600)
+    try {
+      render(
+        <DetailSurface open mode="modal" onClose={noop} ariaLabel="Item" aside={<div>activity</div>}>
+          <div>fields</div>
+        </DetailSurface>,
+      )
+      expect(screen.getByRole('separator')).toHaveAttribute('aria-valuemax', '548')
+    } finally {
+      restore()
+    }
+  })
+
+  it('gives the fields their floor even when there is not room for both', () => {
+    // 320px of container cannot hold 288 of fields AND 280 of aside. The
+    // fields win and the aside takes what is left — and the separator does not
+    // report a minimum above its own maximum, which is a range that does not
+    // exist.
+    const restore = measureAt(320, 600)
+    try {
+      render(
+        <DetailSurface open mode="full" onClose={noop} ariaLabel="Item" aside={<div>activity</div>}>
+          <div>fields</div>
+        </DetailSurface>,
+      )
+      const divider = screen.getByRole('separator')
+      expect(divider).toHaveAttribute('aria-valuemax', '28')
+      expect(divider).toHaveAttribute('aria-valuemin', '28')
+      expect(divider).toHaveAttribute('aria-valuenow', '28')
+    } finally {
+      restore()
+    }
+  })
+
+  it('collapses and restores a pane without unmounting either', async () => {
+    render(
+      <DetailSurface open mode="full" onClose={noop} ariaLabel="Item" aside={<div>activity</div>}>
+        <FieldRow.Text label="Next steps" value="" onCommit={noop} />
+      </DetailSurface>,
+    )
+    const fieldsBefore = document.querySelector('[data-slot="detail-fields"]')
+    const asideBefore = document.querySelector('[data-slot="detail-activity"]')
+
+    await userEvent.click(
+      screen.getByRole('button', { name: 'Collapse the activity pane' }),
+    )
+
+    // The pane is still the same node — nothing was reconciled away, so its
+    // scroll, its drafts and its active tab are still there.
+    expect(document.querySelector('[data-slot="detail-activity"]')).toBe(asideBefore)
+    expect(document.querySelector('[data-slot="detail-fields"]')).toBe(fieldsBefore)
+    expect(
+      document.querySelector('[data-slot="detail-activity-clip"]'),
+    ).toHaveAttribute('inert')
+
+    // And there is a way back.
+    await userEvent.click(screen.getByRole('button', { name: 'Show the activity pane' }))
+    expect(
+      document.querySelector('[data-slot="detail-activity-clip"]'),
+    ).not.toHaveAttribute('inert')
+    expect(document.querySelector('[data-slot="detail-activity"]')).toBe(asideBefore)
+  })
+
+  it('reports the collapse per orientation', async () => {
+    const onCollapsedChange = vi.fn()
+    const view = render(
+      <DetailSurface
+        open
+        mode="full"
+        onClose={noop}
+        ariaLabel="Item"
+        aside={<div>activity</div>}
+        onCollapsedChange={onCollapsedChange}
+      >
+        <div>fields</div>
+      </DetailSurface>,
+    )
+    await userEvent.click(screen.getByRole('button', { name: 'Collapse the fields pane' }))
+    expect(onCollapsedChange).toHaveBeenLastCalledWith('fields', 'side')
+
+    view.rerender(
+      <DetailSurface
+        open
+        mode="panel"
+        onClose={noop}
+        ariaLabel="Item"
+        aside={<div>activity</div>}
+        onCollapsedChange={onCollapsedChange}
+      >
+        <div>fields</div>
+      </DetailSurface>,
+    )
+    // The side panel is a DIFFERENT split, so it opens uncollapsed and the
+    // divider is back.
+    await userEvent.click(screen.getByRole('button', { name: 'Collapse the activity pane' }))
+    expect(onCollapsedChange).toHaveBeenLastCalledWith('aside', 'bottom')
+  })
+
+  it('toggles collapse on a double-click of the seam', () => {
+    const onCollapsedChange = vi.fn()
+    render(
+      <DetailSurface
+        open
+        mode="full"
+        onClose={noop}
+        ariaLabel="Item"
+        aside={<div>activity</div>}
+        onCollapsedChange={onCollapsedChange}
+      >
+        <div>fields</div>
+      </DetailSurface>,
+    )
+    // `fireEvent`, not `userEvent`: a real double-click also fires pointer
+    // events, and jsdom ships no `setPointerCapture`, so the handle's drag
+    // path throws before the gesture this test is about ever runs.
+    fireEvent.doubleClick(screen.getByRole('separator'))
+    expect(onCollapsedChange).toHaveBeenCalledWith('aside', 'side')
+  })
+
+  it('gives the panel an edge handle, and only the panel', () => {
+    const view = renderSurface('panel')
+    expect(edgeHandle()).toHaveAttribute('aria-orientation', 'vertical')
+    view.unmount()
+
+    for (const mode of ['full', 'modal'] as const) {
+      const centred = renderSurface(mode)
+      expect(
+        screen.queryByRole('separator', { name: 'Resize the panel' }),
+      ).toBeNull()
+      centred.unmount()
+    }
+  })
+
+  it("derives the panel's ceiling from the viewport, not a constant", () => {
+    // The defect this replaces, as a number: a hardcoded 560px side panel plus
+    // this app's 308px rail leaves a 1024px screen 144px of board — half a
+    // lane. The ceiling has to be the measured wrapper less what the host
+    // reserves: 1000 − 621 = 379, and the panel's own 400px floor is pulled
+    // down to it rather than reporting a range that does not exist.
+    const restore = measureAt(1000, 800)
+    try {
+      render(
+        <DetailSurface open mode="panel" onClose={noop} ariaLabel="Item" panelReserve={621}>
+          <div>fields</div>
+        </DetailSurface>,
+      )
+      const edge = edgeHandle()
+      expect(edge).toHaveAttribute('aria-valuemax', '379')
+      expect(edge).toHaveAttribute('aria-valuemin', '379')
+      expect(edge).toHaveAttribute('aria-valuenow', '379')
+    } finally {
+      restore()
+    }
+  })
+
+  it("keeps the panel's own content floor when the viewport can afford it", () => {
+    const restore = measureAt(1488, 800)
+    try {
+      render(
+        <DetailSurface open mode="panel" onClose={noop} ariaLabel="Item" panelReserve={621}>
+          <div>fields</div>
+        </DetailSurface>,
+      )
+      const edge = edgeHandle()
+      expect(edge).toHaveAttribute('aria-valuemin', '400')
+      expect(edge).toHaveAttribute('aria-valuemax', '867')
+    } finally {
+      restore()
+    }
+  })
+
+  it('resizes the panel from the keyboard, and Home puts it back', async () => {
+    const onCommit = vi.fn()
+    const restore = measureAt(1488, 800)
+    try {
+      render(
+        <DetailSurface
+          open
+          mode="panel"
+          onClose={noop}
+          ariaLabel="Item"
+          panelReserve={621}
+          panelSize={560}
+          onPanelSizeChange={noop}
+          onPanelSizeCommit={onCommit}
+        >
+          <div>fields</div>
+        </DetailSurface>,
+      )
+      const edge = edgeHandle()
+      edge.focus()
+      // Dragging the leading edge toward the inline start GROWS the panel, and
+      // the arrow follows the gesture rather than the number.
+      await userEvent.keyboard('{ArrowLeft}')
+      expect(onCommit).toHaveBeenLastCalledWith(576)
+      await userEvent.keyboard('{Home}')
+      expect(onCommit).toHaveBeenLastCalledWith(560)
+    } finally {
+      restore()
+    }
+  })
+
+  it('resets the panel to its default on a double-click of the edge', () => {
+    const onCommit = vi.fn()
+    const restore = measureAt(1488, 800)
+    try {
+      render(
+        <DetailSurface
+          open
+          mode="panel"
+          onClose={noop}
+          ariaLabel="Item"
+          panelReserve={621}
+          panelSize={820}
+          onPanelSizeChange={noop}
+          onPanelSizeCommit={onCommit}
+        >
+          <div>fields</div>
+        </DetailSurface>,
+      )
+      fireEvent.doubleClick(edgeHandle())
+      expect(onCommit).toHaveBeenCalledWith(560)
+    } finally {
+      restore()
+    }
+  })
+
+  it('re-derives the split when the container moves, and re-clamps a stale size', () => {
+    // THE REGRESSION THIS PASS EXISTS TO PREVENT. Before the outer edge was
+    // draggable the split's container never moved after first layout, so a
+    // clamp computed once was a clamp that stayed right. Now it can move under
+    // the split at any moment, and a bound left at its first reading would let
+    // the activity pane keep a size the container can no longer hold — which
+    // is the pane collision that was just fixed, arriving by a different door.
+    const box = measurable(1000, 800)
+    try {
+      render(
+        <DetailSurface
+          open
+          mode="panel"
+          onClose={noop}
+          ariaLabel="Item"
+          panelReserve={621}
+          aside={<div>activity</div>}
+          asideSize={400}
+          onAsideSizeChange={noop}
+        >
+          <div>fields</div>
+        </DetailSurface>,
+      )
+      // 800 of container leaves 596 (− 200, the fields floor; − 4, the seam),
+      // which is more than the pane's own 560 ceiling — so the ceiling stands.
+      expect(innerDivider()).toHaveAttribute('aria-valuemax', '560')
+      expect(innerDivider()).toHaveAttribute('aria-valuenow', '400')
+
+      // The container shrinks under it. 300 − 200 − 4 = 96, and the pane's
+      // stored 400 is REPORTED at the value the container can honour rather
+      // than at the one it was left at.
+      act(() => box.resize({ width: 600, height: 300 }))
+      const divider = innerDivider()
+      expect(divider).toHaveAttribute('aria-valuemax', '96')
+      expect(divider).toHaveAttribute('aria-valuemin', '96')
+      expect(divider).toHaveAttribute('aria-valuenow', '96')
+
+      // And the outer edge re-derives off the same reading, so the two clamps
+      // cannot disagree about how much room there is.
+      expect(edgeHandle()).toHaveAttribute('aria-valuemax', '0')
+    } finally {
+      box.restore()
+    }
+  })
+
+  it('resizes the activity pane from the keyboard', async () => {
+    const onCommit = vi.fn()
+    render(
+      <DetailSurface
+        open
+        mode="full"
+        onClose={noop}
+        ariaLabel="Item"
+        aside={<div>activity</div>}
+        asideSize={400}
+        onAsideSizeChange={noop}
+        onAsideSizeCommit={onCommit}
+      >
+        <div>fields</div>
+      </DetailSurface>,
+    )
+    const divider = screen.getByRole('separator')
+    divider.focus()
+    await userEvent.keyboard('{ArrowLeft}')
+    expect(onCommit).toHaveBeenCalledWith(416, 'side')
+  })
+})