@primitiv-ui/react 0.1.28 → 0.1.30

package/src/MillerColumns/README.md

@@ -61,7 +61,7 @@ are ever rendered.
 | `MillerColumns.Column`        | List          | A vertical list of items, projected into the strip as `role="group"`                           |
 | `MillerColumns.Item`          | Tree node     | A `role="treeitem"`; branch when it nests a `Column`. Supports `disabled`, `asChild`, `ref`     |
 | `MillerColumns.ItemIndicator` | Icon wrapper  | Decorative `aria-hidden` icon, rendered only for branch items                                  |
-| `MillerColumns.ResizeHandle`  | Resize grip   | A `role="separator"` drag handle that sets its column's width                                   |
+| `MillerColumns.ResizeHandle`  | Resize grip   | A focusable `role="separator"` window splitter — drag or arrow-key it to set its column's width |
 | `MillerColumns.PreviewPanel`  | Preview pane  | A content-agnostic trailing panel; pair with `useMillerColumnsSelection`                        |
 
 ## Selection model
@@ -80,7 +80,20 @@ column deeper than _d_ closes.
 The two shapes are discriminated at the type level: passing
 `defaultValue` alongside `value` is a type error.
 
-There is no multi-select — only one path is active at a time.
+**Single path only, by decision.** There is no multi-select and there is
+not going to be one — this is settled, not a v1 shortfall awaiting a
+follow-up. A Miller strip's whole premise is that the selection *is* the
+path: column N+1 exists because exactly one item in column N is chosen.
+Two selections in a column have no defined answer for what the next
+column should show. A consumer needing to mark many nodes should keep
+that set themselves and render it as content inside each `Item` (a
+checkbox, a badge), leaving the path to mean navigation.
+
+Every item on the path renders `data-state="selected"`, including the
+ancestors the path merely passes through. The **deepest** one also gets
+`data-terminal`. Style the two apart — with a uniform selected state
+there is no way to tell which of several highlighted rows was actually
+clicked.
 
 ## Keyboard interaction
 
@@ -92,6 +105,18 @@ There is no multi-select — only one path is active at a time.
 | `ArrowRight`        | Branch: select it and move focus to its child column's first item; leaf: no-op |
 | `ArrowLeft`         | Move focus to the selected item of the parent column                   |
 | `Tab`               | Move into / out of the whole tree (single tabstop)                     |
+| Printable character | Typeahead — focus the first item in the column whose label matches     |
+
+Under `dir="rtl"` the horizontal pair is mirrored: `ArrowLeft` steps
+*into* a branch's child column and `ArrowRight` walks back out, so the
+step-in key always points at the column it opens. `dir` is inherited
+from a `DirectionProvider` ancestor when omitted.
+
+Typeahead accumulates keystrokes into a prefix query that resets after
+500 ms of inactivity; repeating one character cycles through the items
+starting with it. The query is scoped to the **focused item's own
+column** — each column is an independent list, so typing never jumps the
+cursor sideways.
 
 The strip is a single roving-tabindex widget: exactly one item is
 tabbable at a time. The tabstop follows the last-focused item and
@@ -109,7 +134,20 @@ effect when the strip is itself an overflow container; give
 
 ## ARIA
 
-- The strip is `role="tree"`.
+`Root` renders **two** elements: an outer strip container you lay out and
+scroll, and an inner `role="tree"` widget holding only the columns. A
+tree may own nothing but `treeitem` and `group`, so the `PreviewPanel`
+sits outside it.
+
+Because of that split, **`aria-*` props go to the tree widget** and every
+other prop (`className`, `id`, `style`, `data-*`) goes to the strip
+container:
+
+```tsx
+<MillerColumns.Root aria-label="Files" className="strip">
+```
+
+- The tree widget is `role="tree"`.
 - Each `Column` is `role="group"`.
 - Each `Item` is `role="treeitem"` with `aria-level` (1-based column
   depth), `aria-selected`, and — on branch items — `aria-expanded`.
@@ -156,10 +194,42 @@ it to the column's trailing edge yourself:
 ```
 
 The first drag measures the column's current rendered width and
-resizes from there; later drags resume from the last resized width. A
-width is clamped so it can never be dragged below zero — use CSS
-`min-width` for any larger floor. Resize is pointer-only; the handle
-is not keyboard-operable.
+resizes from there; later drags resume from the last resized width.
+
+The handle is a full WAI-ARIA **window splitter**: it is focusable, and
+arrow keys resize it. Pass `minWidth` / `maxWidth` / `step` to bound and
+pace that (they clamp pointer drags too, so CSS `min-width` is no longer
+the only floor).
+
+| Prop       | Default    | Effect                                             |
+| ---------- | ---------- | -------------------------------------------------- |
+| `minWidth` | `0`        | Floor for drag and keys; published as `aria-valuemin` |
+| `maxWidth` | `Infinity` | Ceiling; published as `aria-valuemax` only when finite |
+| `step`     | `10`       | Pixels moved per arrow-key press                    |
+
+| Key                       | Behaviour                          |
+| ------------------------- | ---------------------------------- |
+| Inline-end arrow          | Widen the column by `step`         |
+| Inline-start arrow        | Narrow the column by `step`        |
+| `Home` / `End`            | Jump to `minWidth` / `maxWidth`    |
+
+The arrow pair mirrors under `dir="rtl"`. `End` does nothing while
+`maxWidth` is unbounded — there is no largest width to jump to.
+
+`aria-valuenow` tracks the column's real rendered width via a
+`ResizeObserver`, so it is correct before the first resize and follows
+CSS- or container-driven changes as well.
+
+**Give the handle an accessible name** — without one it announces as an
+unnamed separator:
+
+```tsx
+<MillerColumns.ResizeHandle
+  aria-label="Resize column"
+  minWidth={120}
+  maxWidth={400}
+/>
+```
 
 ## Preview panel
 
@@ -199,10 +269,11 @@ function FilePreview() {
 both controlled and uncontrolled roots, and throws if called outside
 `MillerColumns.Root`.
 
-The panel ships with no ARIA role. The strip is a `role="tree"`, whose
-conforming children are `treeitem`s and `group`s — so give the panel
-content its own labelled landmark (`role`, `aria-label`, …) through
-props if the preview warrants being announced.
+The panel ships with no ARIA role, and renders *outside* the inner
+`role="tree"` widget — a tree may own only `treeitem`s and `group`s, so
+the panel could not legally sit inside it. Give the panel content its
+own labelled landmark (`role`, `aria-label`, ...) through props if the
+preview warrants being announced.
 
 ## `asChild` composition
 
@@ -216,7 +287,7 @@ element:
 ```tsx
 <MillerColumns.Item<HTMLAnchorElement> asChild value="docs">
   <a href="#docs">Docs</a>
-  <MillerColumns.Column>…</MillerColumns.Column>
+  <MillerColumns.Column>...</MillerColumns.Column>
 </MillerColumns.Item>
 ```
 
@@ -229,10 +300,11 @@ Zero styles ship with the component. Style it through `data-*` hooks;
 typically the strip is `display: flex` and each column scrolls
 vertically.
 
-Inside the strip, each column is wrapped in a transparent
+Inside the tree element, each column is wrapped in a transparent
 (`display: contents`) slot element that fixes left-to-right order — so
 target columns with `[data-miller-columns-column]`, not a direct-child
-selector like `[data-miller-columns-strip] > *`.
+selector like `[data-miller-columns-tree] > *`. Note the strip's direct
+children are the tree element and the `PreviewPanel`, not the columns.
 
 ```css
 [data-miller-columns-strip] {
@@ -258,11 +330,12 @@ selector like `[data-miller-columns-strip] > *`.
 | Element         | Attributes                                                                  |
 | --------------- | --------------------------------------------------------------------------- |
 | Strip (`Root`)  | `data-miller-columns-strip`, `data-orientation="horizontal"`                |
-| `Column`        | `data-miller-columns-column`, `data-depth`                                  |
-| `Item`          | `data-state="selected" \| "unselected"`, `data-depth`, `data-has-children`, `data-disabled` |
+| Tree (`Root`)   | `data-miller-columns-tree`, `role="tree"` — the inner widget element        |
+| `Column`        | `data-miller-columns-column`, `data-depth`, `data-empty` (no items)         |
+| `Item`          | `data-state="selected" \| "unselected"`, `data-terminal` (deepest selected), `data-depth`, `data-has-children`, `data-disabled` |
 | `ItemIndicator` | `data-state`, `data-has-children`                                           |
 | `ResizeHandle`  | `data-miller-columns-resize-handle`, `data-dragging` (present mid-drag)     |
-| `PreviewPanel`  | `data-miller-columns-preview`                                               |
+| `PreviewPanel`  | `data-miller-columns-preview`, `data-empty` (nothing selected)              |
 
 ## Deferred / follow-up work
 
@@ -273,6 +346,3 @@ good candidates for later, independent cycles:
    exists, a leaf image `Item` could open a context menu on
    right-click whose first entry ("Preview", with an eye icon) opens
    the `Modal` to show the image larger.
-2. **Keyboard-operable resize.** `MillerColumns.ResizeHandle` is
-   pointer-only; an arrow-key resize on the focused handle would round
-   out the WAI-ARIA window-splitter pattern.

package/src/MillerColumns/__tests__/MillerColumns.aria.test.tsx

@@ -67,6 +67,51 @@ describe("MillerColumns — aria", () => {
     );
   });
 
+  it("puts the tree role on an inner element, not the strip container", () => {
+    const { container } = render(<Tree />);
+
+    const strip = container.querySelector("[data-miller-columns-strip]");
+    const tree = screen.getByRole("tree");
+
+    expect(strip).not.toBe(tree);
+    expect(strip).toContainElement(tree);
+  });
+
+  it("keeps the preview panel outside the tree", () => {
+    render(
+      <MillerColumns.Root defaultValue={["a"]}>
+        <MillerColumns.Column>
+          <MillerColumns.Item value="a">A</MillerColumns.Item>
+        </MillerColumns.Column>
+        <MillerColumns.PreviewPanel data-testid="preview">
+          Preview
+        </MillerColumns.PreviewPanel>
+      </MillerColumns.Root>,
+    );
+
+    // A tree may only own treeitem and group; the panel is neither.
+    expect(screen.getByRole("tree")).not.toContainElement(
+      screen.getByTestId("preview"),
+    );
+  });
+
+  it("splits aria-* onto the tree widget and everything else onto the strip", () => {
+    const { container } = render(
+      <MillerColumns.Root aria-label="Files" className="strip" id="picker">
+        <MillerColumns.Column>
+          <MillerColumns.Item value="a">A</MillerColumns.Item>
+        </MillerColumns.Column>
+      </MillerColumns.Root>,
+    );
+
+    const strip = container.querySelector(".strip")!;
+
+    // The widget is what needs naming; the container is what needs styling.
+    expect(screen.getByRole("tree", { name: "Files" })).toBeInTheDocument();
+    expect(strip).not.toHaveAttribute("aria-label");
+    expect(strip).toHaveAttribute("id", "picker");
+  });
+
   it("keeps a treeitem's accessible name to its own cell content", async () => {
     const user = userEvent.setup();
 

package/src/MillerColumns/__tests__/MillerColumns.auto-scroll.test.tsx

@@ -32,9 +32,11 @@ describe("MillerColumns — auto-scroll", () => {
   it("scrolls the strip to reveal a newly opened column", async () => {
     const user = userEvent.setup();
 
-    render(<Tree />);
+    const { container } = render(<Tree />);
 
-    const strip = screen.getByRole("tree");
+    const strip = container.querySelector<HTMLElement>(
+      "[data-miller-columns-strip]",
+    )!;
     const scrollTo = vi.spyOn(strip, "scrollTo");
 
     await user.click(screen.getByRole("treeitem", { name: "Fruit" }));

package/src/MillerColumns/__tests__/MillerColumns.basic-rendering.test.tsx

@@ -3,8 +3,8 @@ import { render, screen } from "@testing-library/react";
 import { MillerColumns } from "../MillerColumns";
 
 describe("MillerColumns — basic rendering", () => {
-  it("renders the strip with role=tree and a horizontal orientation hook", () => {
-    render(
+  it("renders a strip container with a horizontal orientation hook", () => {
+    const { container } = render(
       <MillerColumns.Root>
         <MillerColumns.Column>
           <MillerColumns.Item value="a">A</MillerColumns.Item>
@@ -12,12 +12,27 @@ describe("MillerColumns — basic rendering", () => {
       </MillerColumns.Root>,
     );
 
-    const strip = screen.getByRole("tree");
+    const strip = container.querySelector("[data-miller-columns-strip]");
 
     expect(strip).toBeInTheDocument();
     expect(strip).toHaveAttribute("data-orientation", "horizontal");
   });
 
+  it("renders the tree widget inside the strip container", () => {
+    const { container } = render(
+      <MillerColumns.Root>
+        <MillerColumns.Column>
+          <MillerColumns.Item value="a">A</MillerColumns.Item>
+        </MillerColumns.Column>
+      </MillerColumns.Root>,
+    );
+
+    const tree = screen.getByRole("tree");
+
+    expect(tree).toHaveAttribute("data-miller-columns-tree");
+    expect(container.querySelector("[data-miller-columns-strip]")).toContainElement(tree);
+  });
+
   it("projects the top-level column into the strip as a group", () => {
     render(
       <MillerColumns.Root>

package/src/MillerColumns/__tests__/MillerColumns.data-attributes.test.tsx

@@ -33,6 +33,27 @@ describe("MillerColumns — data attributes", () => {
     expect(groups[1]).toHaveAttribute("data-depth", "1");
   });
 
+  it("flags a column with no items as empty", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <MillerColumns.Root>
+        <MillerColumns.Column>
+          <MillerColumns.Item value="empty-folder">
+            Empty folder
+            <MillerColumns.Column />
+          </MillerColumns.Item>
+        </MillerColumns.Column>
+      </MillerColumns.Root>,
+    );
+
+    await user.click(screen.getByRole("treeitem", { name: "Empty folder" }));
+
+    const [root, revealed] = screen.getAllByRole("group");
+    expect(root).not.toHaveAttribute("data-empty");
+    expect(revealed).toHaveAttribute("data-empty");
+  });
+
   it("reflects selection through data-state", async () => {
     const user = userEvent.setup();
 
@@ -46,6 +67,33 @@ describe("MillerColumns — data attributes", () => {
     expect(veg).toHaveAttribute("data-state", "selected");
   });
 
+  it("marks only the deepest selected item with data-terminal", async () => {
+    const user = userEvent.setup();
+
+    render(<Tree />);
+
+    const fruit = screen.getByRole("treeitem", { name: "Fruit" });
+
+    // Selected and deepest — it is the terminal selection.
+    await user.click(fruit);
+    expect(fruit).toHaveAttribute("data-terminal");
+
+    // Still selected, but now an ancestor of a deeper selection.
+    await user.click(screen.getByRole("treeitem", { name: "Apple" }));
+
+    expect(fruit).toHaveAttribute("data-state", "selected");
+    expect(fruit).not.toHaveAttribute("data-terminal");
+    expect(screen.getByRole("treeitem", { name: "Apple" })).toHaveAttribute(
+      "data-terminal",
+    );
+
+    // Unselected, but sitting at the same depth the terminal item once
+    // occupied — depth alone must not be what earns the attribute.
+    expect(
+      screen.getByRole("treeitem", { name: "Veg" }),
+    ).not.toHaveAttribute("data-terminal");
+  });
+
   it("flags branch items with data-has-children and omits it on leaves", () => {
     render(<Tree />);
 

package/src/MillerColumns/__tests__/MillerColumns.keyboard-interaction.test.tsx

@@ -1,6 +1,7 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
+import { DirectionProvider } from "../../DirectionProvider/index.ts";
 import { MillerColumns } from "../MillerColumns";
 import { verticalArrowCases } from "./MillerColumns.fixtures";
 
@@ -16,9 +17,9 @@ function FlatList() {
   );
 }
 
-function Tree() {
+function Tree({ dir }: { dir?: "ltr" | "rtl" } = {}) {
   return (
-    <MillerColumns.Root>
+    <MillerColumns.Root dir={dir}>
       <MillerColumns.Column>
         <MillerColumns.Item value="fruit">
           Fruit
@@ -178,4 +179,36 @@ describe("MillerColumns — keyboard interaction", () => {
       expect(veg).toHaveFocus();
     });
   });
+
+  describe("reading direction", () => {
+    it("swaps the horizontal arrow pair under rtl", async () => {
+      const user = userEvent.setup();
+
+      render(<Tree dir="rtl" />);
+      screen.getByRole("treeitem", { name: "Fruit" }).focus();
+
+      // The child column sits to the LEFT in rtl, so ArrowLeft steps in.
+      await user.keyboard("{ArrowLeft}");
+      expect(screen.getByRole("treeitem", { name: "Apple" })).toHaveFocus();
+
+      // ...and ArrowRight walks back out to the parent.
+      await user.keyboard("{ArrowRight}");
+      expect(screen.getByRole("treeitem", { name: "Fruit" })).toHaveFocus();
+    });
+
+    it("inherits the direction from a DirectionProvider", async () => {
+      const user = userEvent.setup();
+
+      render(
+        <DirectionProvider dir="rtl">
+          <Tree />
+        </DirectionProvider>,
+      );
+      screen.getByRole("treeitem", { name: "Fruit" }).focus();
+
+      await user.keyboard("{ArrowLeft}");
+
+      expect(screen.getByRole("treeitem", { name: "Apple" })).toHaveFocus();
+    });
+  });
 });

package/src/MillerColumns/__tests__/MillerColumns.keyboard-selection-state.test.tsx

@@ -0,0 +1,96 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { MillerColumns } from "../MillerColumns";
+
+function Tree() {
+  return (
+    <MillerColumns.Root>
+      <MillerColumns.Column>
+        <MillerColumns.Item value="documents">
+          Documents
+          <MillerColumns.Column>
+            <MillerColumns.Item value="work">Work</MillerColumns.Item>
+          </MillerColumns.Column>
+        </MillerColumns.Item>
+        <MillerColumns.Item value="pictures">
+          Pictures
+          <MillerColumns.Column>
+            <MillerColumns.Item value="holiday">
+              Holiday
+              <MillerColumns.Column>
+                <MillerColumns.Item value="beach">beach.jpg</MillerColumns.Item>
+                <MillerColumns.Item value="sunset">sunset.jpg</MillerColumns.Item>
+              </MillerColumns.Column>
+            </MillerColumns.Item>
+          </MillerColumns.Column>
+        </MillerColumns.Item>
+      </MillerColumns.Column>
+    </MillerColumns.Root>
+  );
+}
+
+const state = (name: string) =>
+  screen.getByRole("treeitem", { name }).getAttribute("data-state");
+const terminal = (name: string) =>
+  screen.getByRole("treeitem", { name }).hasAttribute("data-terminal");
+
+describe("MillerColumns — selection state under keyboard navigation", () => {
+  it("deselects the previous branch when arrowing to a sibling and stepping in", async () => {
+    const user = userEvent.setup();
+
+    render(<Tree />);
+
+    await user.click(screen.getByRole("treeitem", { name: "Documents" }));
+    expect(state("Documents")).toBe("selected");
+
+    // Down to Pictures, then right to open it — Documents must let go.
+    await user.keyboard("{ArrowDown}{ArrowRight}");
+
+    expect(state("Pictures")).toBe("selected");
+    expect(state("Documents")).toBe("unselected");
+  });
+
+  it("keeps exactly one terminal item as focus moves deeper", async () => {
+    const user = userEvent.setup();
+
+    render(<Tree />);
+
+    await user.click(screen.getByRole("treeitem", { name: "Pictures" }));
+    await user.click(screen.getByRole("treeitem", { name: "Holiday" }));
+
+    expect(state("Pictures")).toBe("selected");
+    expect(terminal("Pictures")).toBe(false);
+    expect(terminal("Holiday")).toBe(true);
+
+    // Arrowing within the revealed column moves focus only — it must not
+    // change which row is terminal.
+    await user.keyboard("{ArrowRight}{ArrowDown}");
+
+    expect(screen.getByRole("treeitem", { name: "sunset.jpg" })).toHaveFocus();
+    expect(terminal("Holiday")).toBe(true);
+    expect(terminal("sunset.jpg")).toBe(false);
+    expect(state("Documents")).toBe("unselected");
+  });
+});
+
+describe("MillerColumns — a selected leaf deep in the path", () => {
+  it("marks the leaf terminal and its ancestors selected", async () => {
+    const user = userEvent.setup();
+
+    render(<Tree />);
+
+    await user.click(screen.getByRole("treeitem", { name: "Pictures" }));
+    await user.click(screen.getByRole("treeitem", { name: "Holiday" }));
+    await user.click(screen.getByRole("treeitem", { name: "beach.jpg" }));
+
+    expect(state("Pictures")).toBe("selected");
+    expect(terminal("Pictures")).toBe(false);
+    expect(state("Holiday")).toBe("selected");
+    expect(terminal("Holiday")).toBe(false);
+
+    // The row the user actually landed on.
+    expect(state("beach.jpg")).toBe("selected");
+    expect(terminal("beach.jpg")).toBe(true);
+  });
+});

package/src/MillerColumns/__tests__/MillerColumns.preview-panel.test.tsx

@@ -1,11 +1,12 @@
 import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 import { MillerColumns } from "../MillerColumns";
 
 describe("MillerColumns — preview panel", () => {
   it("renders a panel at the trailing edge of the strip", () => {
-    render(
-      <MillerColumns.Root>
+    const { container } = render(
+      <MillerColumns.Root defaultValue={["a"]}>
         <MillerColumns.Column>
           <MillerColumns.Item value="a">A</MillerColumns.Item>
         </MillerColumns.Column>
@@ -13,7 +14,7 @@ describe("MillerColumns — preview panel", () => {
       </MillerColumns.Root>,
     );
 
-    const strip = screen.getByRole("tree");
+    const strip = container.querySelector("[data-miller-columns-strip]")!;
     const panel = screen.getByText("preview");
 
     expect(panel).toHaveAttribute("data-miller-columns-preview");
@@ -21,9 +22,33 @@ describe("MillerColumns — preview panel", () => {
     expect(strip.lastElementChild).toBe(panel);
   });
 
-  it("forwards props to the panel element", () => {
+  // Only reachable under forceMount: without it the panel does not exist while
+  // nothing is selected, so there is nothing to flag.
+  it("flags a force-mounted panel as empty until something is selected", async () => {
+    const user = userEvent.setup();
+
     render(
       <MillerColumns.Root>
+        <MillerColumns.Column>
+          <MillerColumns.Item value="a">A</MillerColumns.Item>
+        </MillerColumns.Column>
+        <MillerColumns.PreviewPanel forceMount>
+          preview
+        </MillerColumns.PreviewPanel>
+      </MillerColumns.Root>,
+    );
+
+    const panel = screen.getByText("preview");
+    expect(panel).toHaveAttribute("data-empty");
+
+    await user.click(screen.getByRole("treeitem", { name: "A" }));
+
+    expect(panel).not.toHaveAttribute("data-empty");
+  });
+
+  it("forwards props to the panel element", () => {
+    render(
+      <MillerColumns.Root defaultValue={["a"]}>
         <MillerColumns.Column>
           <MillerColumns.Item value="a">A</MillerColumns.Item>
         </MillerColumns.Column>

package/src/MillerColumns/__tests__/MillerColumns.preview-visibility.test.tsx

@@ -0,0 +1,79 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { MillerColumns } from "../MillerColumns";
+
+function Tree({ forceMount }: { forceMount?: boolean } = {}) {
+  return (
+    <MillerColumns.Root>
+      <MillerColumns.Column>
+        <MillerColumns.Item value="fruit">
+          Fruit
+          <MillerColumns.Column>
+            <MillerColumns.Item value="apple">Apple</MillerColumns.Item>
+          </MillerColumns.Column>
+        </MillerColumns.Item>
+        <MillerColumns.Item value="veg">Veg</MillerColumns.Item>
+      </MillerColumns.Column>
+      <MillerColumns.PreviewPanel forceMount={forceMount}>
+        preview
+      </MillerColumns.PreviewPanel>
+    </MillerColumns.Root>
+  );
+}
+
+/**
+ * Finder's rule: the preview occupies the slot *after* the selected item, so it
+ * exists only when that item has no children of its own. Select a folder and
+ * you get its contents there instead; select nothing and there is no preview
+ * at all.
+ */
+describe("MillerColumns — preview panel visibility", () => {
+  it("renders no preview until something is selected", () => {
+    render(<Tree />);
+
+    expect(screen.queryByText("preview")).not.toBeInTheDocument();
+  });
+
+  it("renders no preview while a branch is selected", async () => {
+    const user = userEvent.setup();
+
+    render(<Tree />);
+    await user.click(screen.getByRole("treeitem", { name: "Fruit" }));
+
+    // The slot after Fruit belongs to its children, not to a preview.
+    expect(screen.getByRole("treeitem", { name: "Apple" })).toBeInTheDocument();
+    expect(screen.queryByText("preview")).not.toBeInTheDocument();
+  });
+
+  it("renders the preview once a leaf is selected", async () => {
+    const user = userEvent.setup();
+
+    render(<Tree />);
+    await user.click(screen.getByRole("treeitem", { name: "Veg" }));
+
+    expect(screen.getByText("preview")).toBeInTheDocument();
+  });
+
+  it("renders the preview for a leaf nested inside a branch", async () => {
+    const user = userEvent.setup();
+
+    render(<Tree />);
+    await user.click(screen.getByRole("treeitem", { name: "Fruit" }));
+    await user.click(screen.getByRole("treeitem", { name: "Apple" }));
+
+    expect(screen.getByText("preview")).toBeInTheDocument();
+  });
+
+  it("keeps the panel mounted throughout when forceMount is set", async () => {
+    const user = userEvent.setup();
+
+    render(<Tree forceMount />);
+
+    expect(screen.getByText("preview")).toBeInTheDocument();
+
+    await user.click(screen.getByRole("treeitem", { name: "Fruit" }));
+
+    expect(screen.getByText("preview")).toBeInTheDocument();
+  });
+});