@exegia/corpora-ui 1.0.0 → 2.0.0

package/src/components/blocks/shell/use-shell-fit.ts

@@ -12,44 +12,52 @@ import {
   resizeShellPanelAtom,
   shellFitStateAtom,
 } from "./shell-fit-atom"
-import { fitsPanel, type ShellMetrics } from "./shell-metrics"
+import { fitsPanel, fitSidebar, type IShellMetrics } from "./shell-metrics"
 import type {
-  ShellFitController,
-  ShellFitSeed,
-  UseShellFitOptions,
+  IShellFitController,
+  IShellFitSeed,
+  IUseShellFitOptions,
 } from "./type"
+import { shellPanelAtoms } from "./shell-panel-atom"
 import { resolveLength } from "./utils"
 
 /** Read the shell's columns out of the DOM. The widths come from CSS
  * variables; the rail's share comes from its own state, not its box, so a
  * fold counts the moment React commits it rather than a frame later when the
  * width animation has moved. */
-function readMetrics(host: HTMLElement, railOpen: boolean): ShellMetrics {
+function readMetrics(host: HTMLElement, railOpen: boolean): IShellMetrics {
   // Whether a shell has a rail at all is the caller's composition, so it is
   // read off the DOM rather than tracked in state.
   const rail = host.querySelector<HTMLElement>(
     '[data-slot="sidebar"][data-side="left"]'
   )
-  const collapsible = rail?.dataset.collapsible
-
   const frame = getComputedStyle(host)
   const gap = Number.parseFloat(frame.columnGap) || 0
-
+  const padding =
+    (Number.parseFloat(frame.paddingLeft) || 0) +
+    (Number.parseFloat(frame.paddingRight) || 0)
+  const width = host.clientWidth || host.getBoundingClientRect().width
+  const insetMin = resolveLength(host, "var(--inset-min-width)")
+  const sidebar = fitSidebar({
+    width,
+    padding,
+    gap,
+    insetMin,
+    expanded: resolveLength(host, "var(--sidebar-width)") || 256,
+    icon: resolveLength(host, "var(--sidebar-width-icon)") || 56,
+    minimum: resolveLength(host, "var(--sidebar-min-width)") || 180,
+    open: railOpen,
+    collapsible: rail?.dataset.collapsible ?? "icon",
+    present: Boolean(rail),
+  })
   return {
-    rail: !rail
-      ? 0
-      : railOpen || collapsible === "none"
-        ? resolveLength(host, "var(--sidebar-width)")
-        : collapsible === "offcanvas"
-          ? 0
-          : resolveLength(host, "var(--sidebar-width-icon)"),
-    insetMin: resolveLength(host, "var(--inset-min-width)"),
+    rail: sidebar.width,
+    sidebar,
+    insetMin,
     panelMin: resolveLength(host, "var(--panel-width)"),
-    viewport: window.innerWidth,
-    chrome:
-      (Number.parseFloat(frame.paddingLeft) || 0) +
-      (Number.parseFloat(frame.paddingRight) || 0) +
-      gap * Math.max(0, host.children.length - 1),
+    viewport: width,
+    // Measure the space a prospective inspector needs, even while absent.
+    chrome: padding + gap * (sidebar.width > 0 ? 2 : 1),
   }
 }
 
@@ -57,9 +65,8 @@ function readMetrics(host: HTMLElement, railOpen: boolean): ShellMetrics {
  * Measures the shell and decides what the secondary panel may do: whether it
  * exists at all, and how wide it may be dragged.
  *
- * The three things that move the answer are all observed here — the viewport
- * (`resize`), the rail's fold (`railOpen`, a render input) and the user's own
- * drag (`resizePanel`) — so no caller has to re-derive it. The measurement is
+ * Container resizing, rail folding, and user resizing are observed here,
+ * so embedded shells obey the same bounds as full-page layouts. The measurement is
  * the only thing this hook keeps to itself: the numbers land in the shell-fit
  * atoms keyed by `shellId`, so anything under `ExegiaProvider` can read the
  * verdict (`useShellFitState`) or move the panel (`useShellFitActions`)
@@ -71,14 +78,15 @@ export function useShellFit({
   railOpen,
   defaultPanelWidth,
   onUnfit,
-}: UseShellFitOptions): ShellFitController {
+}: IUseShellFitOptions): IShellFitController {
   // A generated key isolates unnamed shells from each other; an explicit
   // `shellId` is the app's handle on this one.
   const generatedId = useId()
   const shellId = explicitId ?? generatedId
+  const railWidth = useAtomValueRawSync(shellPanelAtoms(shellId).railWidth)
 
   // Read once: `defaultPanelWidth` describes the mount, not every render.
-  const [seed] = useState<ShellFitSeed>(() => ({
+  const [seed] = useState<IShellFitSeed>(() => ({
     panelWidth: defaultPanelWidth ?? null,
   }))
 
@@ -110,13 +118,17 @@ export function useShellFit({
       if (!fitsPanel(next)) onUnfitRef.current?.()
     }
 
-    // Measured before paint so a shell that cannot hold the panel never
-    // flashes one, and re-measured on every fold because the rail's column is
-    // part of the room the panel needs.
+    // Observe the host, including changes from a split view or surrounding
+    // navigation that never trigger a window resize.
     takeMeasurement()
+    const observer = new ResizeObserver(takeMeasurement)
+    observer.observe(host)
     window.addEventListener("resize", takeMeasurement)
-    return () => window.removeEventListener("resize", takeMeasurement)
-  }, [hostRef, railOpen, measure])
+    return () => {
+      observer.disconnect()
+      window.removeEventListener("resize", takeMeasurement)
+    }
+  }, [hostRef, railOpen, railWidth, measure])
 
   // A shell the hook keyed is scrap once its component goes. An explicit
   // `shellId` is the app's key and outlives the mount — that is what lets a
@@ -128,8 +140,14 @@ export function useShellFit({
 
   const state = useAtomValueRawSync(shellFitStateAtom(shellId))
 
-  return useMemo<ShellFitController>(
-    () => ({ shellId, ...state, resizePanel, resetPanelWidth }),
-    [shellId, state, resizePanel, resetPanelWidth]
+  return useMemo<IShellFitController>(
+    () => ({
+      shellId,
+      ...state,
+      defaultPanelWidth: seed.panelWidth,
+      resizePanel,
+      resetPanelWidth,
+    }),
+    [shellId, state, seed.panelWidth, resizePanel, resetPanelWidth]
   )
 }

package/src/components/blocks/shell/use-shell-panels.ts

@@ -1,21 +1,22 @@
 "use client"
 
-import { useCallback, useEffect, useId, useMemo, useState } from "react"
+import { useCallback, useEffect, useId, useMemo } from "react"
 import type { ReactNode } from "react"
+import { shellPanelAtoms } from "./shell-panel-atom"
 import { useAtomValueRawSync, useSetAtom } from "jotai"
 
 import {
   removeShellFitInstance,
   resizeShellPanelAtom,
   shellFitFitsAtom,
+  shellFitStateAtom,
   shellFitPanelWidthAtom,
 } from "./shell-fit-atom"
 import type {
-  ShellPanelControlProps,
-  ShellPanelControls,
-  SidebarComponentMap,
-  SidebarSide,
-  UseShellPanelsOptions,
+  TShellPanelControlProps,
+  IShellPanelControls,
+  TSidebarSide,
+  IUseShellPanelsOptions,
 } from "./type"
 
 /**
@@ -42,7 +43,7 @@ export function useShellPanels({
   defaultOpenMobile,
   defaultPanelWidth,
   onPanelChange,
-}: UseShellPanelsOptions = {}): ShellPanelControls {
+}: IUseShellPanelsOptions = {}): IShellPanelControls {
   // The hook, not the provider, keys the shell: it renders above the provider
   // and has to read the same atoms the provider writes. Whoever generates the
   // key drops it — the provider treats a passed-in id as the app's and leaves
@@ -54,65 +55,28 @@ export function useShellPanels({
     return () => removeShellFitInstance(shellId)
   }, [shellId, explicitId])
 
-  const [open, setOpenState] = useState<Record<SidebarSide, boolean>>(() => ({
-    left: defaultOpen?.left ?? true,
-    right: defaultOpen?.right ?? false,
-  }))
-  const [openMobile, setOpenMobileState] = useState<
-    Record<SidebarSide, boolean>
-  >(() => ({
-    left: defaultOpenMobile?.left ?? false,
-    right: defaultOpenMobile?.right ?? false,
-  }))
+  const atoms = shellPanelAtoms(shellId)
+  const sidebarWidth = useAtomValueRawSync(atoms.railWidth)
+  const resizeSidebar = useSetAtom(atoms.resizeSidebar)
+  const open = useAtomValueRawSync(atoms.open)
+  const openMobile = useAtomValueRawSync(atoms.mobile)
+  const setOpen = useSetAtom(atoms.setOpen)
+  const setOpenMobile = useSetAtom(atoms.setOpenMobile)
+  const toggle = useSetAtom(atoms.toggle)
+  const panelComponents = useAtomValueRawSync(atoms.components)
+  const setPanelComponents = useSetAtom(atoms.components)
 
   // Reads false until the shell has measured itself — an unmeasured shell
   // fails open, so nothing out here stands down over a reading that has not
   // happened yet.
   const fits = useAtomValueRawSync(shellFitFitsAtom(shellId))
   const isNarrow = !fits
+  const { sidebar } = useAtomValueRawSync(shellFitStateAtom(shellId))
   const panelWidth = useAtomValueRawSync(shellFitPanelWidthAtom(shellId))
   const resizePanel = useSetAtom(resizeShellPanelAtom(shellId))
 
-  // The shell drops the right panel when the viewport cannot hold it, so
-  // opening it from out here would only surface later as a panel nobody
-  // asked for. Closing always goes through — that is how state left over
-  // from a wider viewport clears.
-  const setOpen = useCallback(
-    (nextOpen: boolean, side: SidebarSide) => {
-      if (nextOpen && side === "right" && isNarrow) return
-
-      setOpenState((prev) =>
-        prev[side] === nextOpen ? prev : { ...prev, [side]: nextOpen }
-      )
-      onPanelChange?.(nextOpen, side)
-    },
-    [isNarrow, onPanelChange]
-  )
-
-  const setOpenMobile = useCallback(
-    (nextOpen: boolean, side: SidebarSide) => {
-      if (nextOpen && side === "right" && isNarrow) return
-
-      setOpenMobileState((prev) =>
-        prev[side] === nextOpen ? prev : { ...prev, [side]: nextOpen }
-      )
-      onPanelChange?.(nextOpen, side)
-    },
-    [isNarrow, onPanelChange]
-  )
-
-  const toggle = useCallback(
-    (side: SidebarSide) => setOpen(!open[side], side),
-    [open, setOpen]
-  )
-
-  // The content sticks even when the open is refused (too narrow): it is
-  // what the panel shows whenever it next gets to open, not a one-shot.
-  const [panelComponents, setPanelComponents] = useState<SidebarComponentMap>(
-    {}
-  )
   const openPanel = useCallback(
-    (side: SidebarSide, component?: ReactNode) => {
+    (side: TSidebarSide, component?: ReactNode) => {
       if (component !== undefined) {
         setPanelComponents((prev) =>
           prev[side] === component ? prev : { ...prev, [side]: component }
@@ -120,32 +84,34 @@ export function useShellPanels({
       }
       setOpen(true, side)
     },
-    [setOpen]
+    [setOpen, setPanelComponents]
   )
 
-  const providerProps = useMemo<ShellPanelControlProps>(
+  const providerProps = useMemo<TShellPanelControlProps>(
     () => ({
       shellId,
       defaultPanelWidth,
-      open,
-      onOpenChange: setOpen,
-      openMobile,
-      onOpenMobileChange: setOpenMobile,
+      defaultOpen,
+      defaultOpenMobile,
+      onOpenChange: onPanelChange,
+      onOpenMobileChange: onPanelChange,
       panelComponents,
     }),
     [
       shellId,
       defaultPanelWidth,
-      open,
-      openMobile,
-      setOpen,
-      setOpenMobile,
+      defaultOpen,
+      defaultOpenMobile,
+      onPanelChange,
       panelComponents,
     ]
   )
 
   return {
     shellId,
+    sidebar,
+    sidebarWidth,
+    resizeSidebar,
     isNarrow,
     panelWidth,
     resizePanel,

package/src/components/blocks/shell/utils.ts

@@ -1,3 +1,6 @@
+export const SHELL_BEZEL_CLASSES =
+  "bezel-lit-t-2 bezel-lit-blur-2 bezel-lit/57 bezel-dim-b-2 bezel-dim-blur-3 bezel-dim/11 dark:bezel-lit-blur-3 dark:bezel-lit/14 dark:bezel-dim/78"
+
 export const TITLE_BAR_HEIGHT = 48
 // The desktop rail settles at a hard zero-width boundary. Keep the spring
 // critically damped so it cannot overshoot, pause against that boundary, and
@@ -6,8 +9,8 @@ import { EASE_OUT, EASE_DRAWER } from "@/lib/ease.ts"
 import type { Variants } from "motion/react"
 import { createContext, useContext, useSyncExternalStore } from "react"
 import type {
-  AnimatedSidebarContextValue,
-  AnimatedSidebarPanelContextValue,
+  IAnimatedSidebarContextValue,
+  IAnimatedSidebarPanelContextValue,
 } from "./type"
 
 export const SIDEBAR_MORPH_TRANSITION = {
@@ -108,6 +111,7 @@ export const SIDEBAR_KEYBOARD_SHORTCUT = "b"
  * so an override wins over the value written here.
  */
 export const SHELL_WIDTHS = {
+  "--sidebar-min-width": "180px",
   "--sidebar-width": "256px",
   "--sidebar-width-icon": "56px",
   "--sidebar-width-mobile": "18rem",
@@ -137,10 +141,10 @@ export function resolveLength(host: HTMLElement, value: string) {
 }
 
 export const AnimatedSidebarContext =
-  createContext<AnimatedSidebarContextValue | null>(null)
+  createContext<IAnimatedSidebarContextValue | null>(null)
 
 export const AnimatedSidebarPanelContext =
-  createContext<AnimatedSidebarPanelContextValue | null>(null)
+  createContext<IAnimatedSidebarPanelContextValue | null>(null)
 
 export function useAnimatedSidebar() {
   const context = useContext(AnimatedSidebarContext)

package/src/components/blocks/sidebar/__tests__/ai-sidebar-atom.test.tsx

@@ -0,0 +1,325 @@
+import { describe, expect, mock, test } from "bun:test"
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { createStore } from "jotai"
+
+import { ExegiaProvider } from "@/lib/state"
+import { AISidebar } from "../ai-sidebar"
+import {
+  DEFAULT_AI_SIDEBAR_CONFIG,
+  aiSidebarAnnouncementAtom,
+  aiSidebarExpandedIdsAtom,
+  aiSidebarItemsAtom,
+  aiSidebarMovePendingAtom,
+  expandAISidebarRowAtom,
+  mountAISidebarAtom,
+  moveAISidebarRowAtom,
+  removeAISidebarInstance,
+  renameAISidebarRowAtom,
+  resetAISidebarAtom,
+  setAISidebarHandlersAtom,
+} from "../ai-sidebar-atom"
+import type { IAISidebarConfig, IAISidebarSeed, ISidebarResource } from "../type"
+import { useAISidebarActions, useAISidebarState } from "../use-ai-sidebar-state"
+
+type TStore = ReturnType<typeof createStore>
+
+const RESOURCES: ISidebarResource[] = [
+  {
+    id: "corpora",
+    label: "Corpora",
+    kind: "project",
+    children: [
+      { id: "manuscripts", label: "Manuscripts", kind: "folder" },
+      { id: "readme", label: "Field notes", kind: "file" },
+    ],
+  },
+  { id: "reading-list", label: "Reading list", kind: "bookmark" },
+  { id: "archive", label: "Archive", kind: "folder", disabled: true },
+]
+
+function mount(
+  store: TStore,
+  id: string,
+  config: Partial<IAISidebarConfig> = {},
+  seed: Partial<IAISidebarSeed> = {}
+) {
+  store.set(
+    mountAISidebarAtom(id),
+    { ...DEFAULT_AI_SIDEBAR_CONFIG, ...config },
+    {
+      items: RESOURCES,
+      activeId: null,
+      focusedId: null,
+      expandedIds: [],
+      ...seed,
+    }
+  )
+}
+
+const ids = (items: ISidebarResource[]) => items.map((item) => item.id)
+
+describe("ai-sidebar atoms · instance isolation", () => {
+  test("two ids never share state", () => {
+    const store = createStore()
+    mount(store, "a")
+    mount(store, "b")
+
+    store.set(expandAISidebarRowAtom("a"), "corpora")
+    expect(store.get(aiSidebarExpandedIdsAtom("a")).has("corpora")).toBe(true)
+    expect(store.get(aiSidebarExpandedIdsAtom("b")).has("corpora")).toBe(false)
+  })
+
+  test("two stores never share state under the same id", () => {
+    const one = createStore()
+    const two = createStore()
+    mount(one, "shared")
+    mount(two, "shared")
+
+    one.set(expandAISidebarRowAtom("shared"), "corpora")
+    expect(one.get(aiSidebarExpandedIdsAtom("shared")).has("corpora")).toBe(
+      true
+    )
+    expect(two.get(aiSidebarExpandedIdsAtom("shared")).has("corpora")).toBe(
+      false
+    )
+  })
+
+  test("removeAISidebarInstance drops the slice back to its defaults", () => {
+    const store = createStore()
+    mount(store, "gone")
+    store.set(expandAISidebarRowAtom("gone"), "corpora")
+
+    removeAISidebarInstance("gone")
+    expect(store.get(aiSidebarExpandedIdsAtom("gone")).size).toBe(0)
+    expect(store.get(aiSidebarItemsAtom("gone"))).toEqual([])
+  })
+})
+
+describe("ai-sidebar atoms · write gates", () => {
+  test("hook-owned data renames itself", () => {
+    const store = createStore()
+    mount(store, "owned")
+
+    store.set(renameAISidebarRowAtom("owned"), "reading-list", "  To read  ")
+    expect(store.get(aiSidebarItemsAtom("owned"))[1]?.label).toBe("To read")
+  })
+
+  test("a controlled items prop is never overwritten, only reported", () => {
+    const store = createStore()
+    const onItemsChange = mock((items: ISidebarResource[]) => void items)
+    mount(store, "controlled", { controlsItems: true })
+    store.set(setAISidebarHandlersAtom("controlled"), { onItemsChange })
+
+    store.set(renameAISidebarRowAtom("controlled"), "reading-list", "To read")
+    expect(store.get(aiSidebarItemsAtom("controlled"))[1]?.label).toBe(
+      "Reading list"
+    )
+    expect(onItemsChange).toHaveBeenCalledTimes(1)
+    expect(onItemsChange.mock.calls[0]![0][1]?.label).toBe("To read")
+
+    // A move is gated the same way: the atom keeps the prop's data, the
+    // consumer gets the next tree to apply themselves.
+    void store.set(moveAISidebarRowAtom("controlled"), {
+      itemId: "reading-list",
+      targetId: "corpora",
+      position: "before",
+    })
+    expect(ids(store.get(aiSidebarItemsAtom("controlled")))).toEqual([
+      "corpora",
+      "reading-list",
+      "archive",
+    ])
+    expect(onItemsChange).toHaveBeenCalledTimes(2)
+    expect(ids(onItemsChange.mock.calls[1]![0])).toEqual([
+      "reading-list",
+      "corpora",
+      "archive",
+    ])
+  })
+
+  test("reset replays the mount seed", () => {
+    const store = createStore()
+    mount(store, "replay", {}, { expandedIds: ["corpora"] })
+    store.set(expandAISidebarRowAtom("replay"), "manuscripts")
+    store.set(renameAISidebarRowAtom("replay"), "reading-list", "To read")
+
+    store.set(resetAISidebarAtom("replay"))
+    expect([...store.get(aiSidebarExpandedIdsAtom("replay"))]).toEqual([
+      "corpora",
+    ])
+    expect(store.get(aiSidebarItemsAtom("replay"))[1]?.label).toBe(
+      "Reading list"
+    )
+    expect(store.get(aiSidebarAnnouncementAtom("replay"))).toBe("")
+  })
+})
+
+describe("ai-sidebar atoms · optimistic move", () => {
+  test("a rejected onMove rolls the data back and announces it", async () => {
+    const store = createStore()
+    const onMoveError = mock(() => {})
+    mount(store, "rollback")
+    store.set(setAISidebarHandlersAtom("rollback"), {
+      onMove: () => Promise.reject(new Error("409")),
+      onMoveError,
+    })
+
+    const pending = store.set(moveAISidebarRowAtom("rollback"), {
+      itemId: "reading-list",
+      targetId: "corpora",
+      position: "before",
+    })
+    // The move applies optimistically and announces before onMove settles…
+    expect(ids(store.get(aiSidebarItemsAtom("rollback")))).toEqual([
+      "reading-list",
+      "corpora",
+      "archive",
+    ])
+    expect(store.get(aiSidebarAnnouncementAtom("rollback"))).toContain(
+      "Moved Reading list before Corpora"
+    )
+
+    await pending
+    // …and the rejection restores the previous order.
+    expect(ids(store.get(aiSidebarItemsAtom("rollback")))).toEqual([
+      "corpora",
+      "reading-list",
+      "archive",
+    ])
+    expect(store.get(aiSidebarAnnouncementAtom("rollback"))).toContain(
+      "Move failed"
+    )
+    expect(onMoveError).toHaveBeenCalled()
+    expect(store.get(aiSidebarMovePendingAtom("rollback"))).toBe(false)
+  })
+
+  test("a second move is refused while one is in flight", async () => {
+    const store = createStore()
+    let release!: () => void
+    mount(store, "pending")
+    store.set(setAISidebarHandlersAtom("pending"), {
+      onMove: () =>
+        new Promise<void>((resolve) => {
+          release = resolve
+        }),
+    })
+
+    const first = store.set(moveAISidebarRowAtom("pending"), {
+      itemId: "reading-list",
+      targetId: "corpora",
+      position: "before",
+    })
+    const second = store.set(moveAISidebarRowAtom("pending"), {
+      itemId: "archive",
+      targetId: "corpora",
+      position: "before",
+    })
+    // The second move never touched the data, only the live region.
+    expect(store.get(aiSidebarAnnouncementAtom("pending"))).toBe(
+      "Wait for the current move to finish."
+    )
+    expect(ids(store.get(aiSidebarItemsAtom("pending")))).toEqual([
+      "reading-list",
+      "corpora",
+      "archive",
+    ])
+
+    release()
+    await Promise.all([first, second])
+    expect(store.get(aiSidebarMovePendingAtom("pending"))).toBe(false)
+  })
+})
+
+describe("ExegiaProvider · driving a sidebar by id", () => {
+  /** A component with no relationship to the sidebar beyond its id. */
+  function Remote() {
+    const actions = useAISidebarActions("app-resources")
+    const { expandedIds } = useAISidebarState("app-resources")
+    return (
+      <button onClick={() => actions.expand("corpora")} type="button">
+        {`expand (${expandedIds.size})`}
+      </button>
+    )
+  }
+
+  test("a sibling component expands the sidebar through one provider", async () => {
+    const user = userEvent.setup()
+    render(
+      <ExegiaProvider store={createStore()}>
+        <AISidebar defaultItems={RESOURCES} sidebarId="app-resources" />
+        <Remote />
+      </ExegiaProvider>
+    )
+
+    // corpora starts collapsed, so its children start unmounted.
+    expect(screen.queryByRole("treeitem", { name: /Field notes/ })).toBeNull()
+
+    await user.click(screen.getByRole("button", { name: /^expand/ }))
+    expect(
+      await screen.findByRole("treeitem", { name: /Field notes/ })
+    ).toBeDefined()
+    // The remote reader saw the change too.
+    expect(screen.getByRole("button", { name: "expand (1)" })).toBeDefined()
+  })
+})
+
+describe("AISidebar · render granularity", () => {
+  test("expanding and selecting one row leave a sibling row untouched", async () => {
+    const user = userEvent.setup()
+    // `renderIcon` runs inside a row's render, so counting calls per id is a
+    // proxy for counting that row's renders.
+    const renders = new Map<string, number>()
+
+    function Driver() {
+      const actions = useAISidebarActions("granular")
+      return (
+        <>
+          <button onClick={() => actions.expand("corpora")} type="button">
+            open
+          </button>
+          <button onClick={() => actions.select("reading-list")} type="button">
+            pick
+          </button>
+        </>
+      )
+    }
+
+    render(
+      <ExegiaProvider store={createStore()}>
+        <AISidebar
+          defaultItems={RESOURCES}
+          renderIcon={(item) => {
+            renders.set(item.id, (renders.get(item.id) ?? 0) + 1)
+            return null
+          }}
+          sidebarId="granular"
+        />
+        <Driver />
+      </ExegiaProvider>
+    )
+
+    const beforeCorpora = renders.get("corpora") ?? 0
+    const beforeReadingList = renders.get("reading-list") ?? 0
+    const beforeArchive = renders.get("archive") ?? 0
+    expect(beforeCorpora).toBeGreaterThan(0)
+    expect(beforeReadingList).toBeGreaterThan(0)
+
+    await user.click(screen.getByRole("button", { name: "open" }))
+    await screen.findByRole("treeitem", { name: /Field notes/ })
+
+    // corpora's branch opened, so its row re-rendered…
+    expect(renders.get("corpora")).toBeGreaterThan(beforeCorpora)
+    // …and its siblings, whose atoms did not change, did not.
+    expect(renders.get("reading-list")).toBe(beforeReadingList)
+    expect(renders.get("archive")).toBe(beforeArchive)
+
+    const expandedCorpora = renders.get("corpora") ?? 0
+    await user.click(screen.getByRole("button", { name: "pick" }))
+
+    // Selection flips reading-list's own atom and nobody else's.
+    expect(renders.get("reading-list")).toBeGreaterThan(beforeReadingList)
+    expect(renders.get("corpora")).toBe(expandedCorpora)
+    expect(renders.get("archive")).toBe(beforeArchive)
+  })
+})