@nexxtmove/ui 2.6.0 → 2.7.0

package/src/components/molecules/Tree/Tree.stories.ts

@@ -0,0 +1,884 @@
+import { createApp, ref, type Ref } from 'vue'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { expect, fn, userEvent, waitFor, within } from 'storybook/test'
+import NexxtIcon from '../../atoms/Icon/Icon.vue'
+import Tree, { type NexxtTreeMove, type NexxtTreeNode } from './Tree.vue'
+
+export default {
+  title: 'Components/Molecules/Tree',
+  component: Tree,
+  args: { draggable: false },
+} satisfies Meta<typeof Tree>
+
+type Story = StoryObj<typeof Tree>
+
+/**
+ * Motion only goes wrong mid-flight: once everything has landed the tree looks the same whether
+ * it slid there or jumped. So the folding plays sample every frame and assert on the worst one.
+ * `overlap` is two readable rows on the same pixels — doubled labels; `drift` is the highlight
+ * running away from the row it belongs to; `tops` is the travel of a single row.
+ */
+const watchMotion = (canvasElement: HTMLElement) => {
+  const highlight = canvasElement.querySelector<HTMLElement>('[data-tree-highlight]')!
+  const tops: Record<string, number[]> = {}
+  let overlap = 0
+  let drift = 0
+  let sampling = true
+
+  const sample = () => {
+    // a row on its way out is hidden, and one on its way in is still fading up: neither is read
+    const onScreen = Array.from(canvasElement.querySelectorAll<HTMLElement>('[data-tree-id]'))
+      .map((row) => ({ row, style: getComputedStyle(row), rect: row.getBoundingClientRect() }))
+      .filter((item) => item.style.visibility !== 'hidden')
+
+    const readable = onScreen
+      .filter((item) => Number(item.style.opacity) > 0.5)
+      .map((item) => item.rect)
+      .sort((a, b) => a.top - b.top)
+
+    readable.forEach((rect, index) => {
+      const next = readable[index + 1]
+      if (next) overlap = Math.max(overlap, rect.bottom - next.top)
+    })
+
+    onScreen.forEach(({ row, rect }) => {
+      ;(tops[row.dataset.treeId!] ??= []).push(rect.top)
+
+      if (row.getAttribute('aria-selected') === 'true') {
+        drift = Math.max(drift, Math.abs(highlight.getBoundingClientRect().top - rect.top))
+      }
+    })
+
+    if (sampling) requestAnimationFrame(sample)
+  }
+
+  requestAnimationFrame(sample)
+
+  return {
+    stop: () => {
+      sampling = false
+    },
+    overlap: () => overlap,
+    drift: () => drift,
+    tops: (id: string) => tops[id] ?? [],
+  }
+}
+
+/**
+ * A label appears the moment a row is inserted and disappears once the rows above it have landed,
+ * so neither marks the end of the fold. Nothing else does either: waiting it out is the only way
+ * to be sure the sampling covers all 200ms of it.
+ */
+const foldFinished = () => new Promise((resolve) => setTimeout(resolve, 400))
+
+/**
+ * One page, `Over ons`, with leaves and groups mixed on every level and nesting four levels deep:
+ * `Over ons` › `Team` › `Medewerkers` › `Naam`. `Groep 2` is empty, so there is a group to drop
+ * into without children; the page opts out with `draggable: false` and stays put.
+ */
+const NODES: NexxtTreeNode[] = [
+  {
+    id: 'about',
+    label: 'Over ons',
+    icon: 'file',
+    draggable: false,
+    children: [
+      { id: 'story', label: 'Ons verhaal', icon: 'font' },
+      {
+        id: 'team',
+        label: 'Team',
+        icon: 'draw-square',
+        children: [
+          { id: 'team-photo', label: 'Teamfoto', icon: 'image' },
+          {
+            id: 'members',
+            label: 'Medewerkers',
+            icon: 'users',
+            children: [
+              { id: 'member-name', label: 'Naam', icon: 'heading' },
+              { id: 'member-role', label: 'Functie', icon: 'font' },
+            ],
+          },
+        ],
+      },
+      { id: 'empty-group', label: 'Groep 2', icon: 'draw-square', children: [] },
+      {
+        id: 'group',
+        label: 'Groep 1',
+        icon: 'draw-square',
+        children: [
+          { id: 'title', label: 'Titel', icon: 'heading' },
+          { id: 'text-1', label: 'Tekst', icon: 'font' },
+        ],
+      },
+    ],
+  },
+]
+
+const findNode = (nodes: NexxtTreeNode[], id: string): NexxtTreeNode | null => {
+  for (const node of nodes) {
+    if (node.id === id) return node
+
+    const found = node.children ? findNode(node.children, id) : null
+    if (found) return found
+  }
+
+  return null
+}
+
+const removeNode = (nodes: NexxtTreeNode[], id: string): NexxtTreeNode | null => {
+  const index = nodes.findIndex((node) => node.id === id)
+  if (index !== -1) return nodes.splice(index, 1)[0] ?? null
+
+  for (const node of nodes) {
+    if (node.children) {
+      const removed = removeNode(node.children, id)
+      if (removed) return removed
+    }
+  }
+
+  return null
+}
+
+/** `index` counts the siblings as they are before the move, the moved node among them. */
+const moveNode = (nodes: NexxtTreeNode[], move: NexxtTreeMove) => {
+  const parent = move.parentId ? findNode(nodes, move.parentId) : null
+  const target = parent ? (parent.children ??= []) : nodes
+  const from = target.findIndex((node) => node.id === move.id)
+
+  const node = removeNode(nodes, move.id)
+  if (!node) return
+
+  const index = from !== -1 && from < move.index ? move.index - 1 : move.index
+  target.splice(Math.min(index, target.length), 0, node)
+}
+
+/**
+ * A private copy of `source` that `@move` reorders, so turning on `draggable` in the controls
+ * works in every story without a drag leaking into the shared fixtures.
+ */
+const movableNodes = (source: NexxtTreeNode[]) => {
+  const nodes = ref<NexxtTreeNode[]>(structuredClone(source))
+
+  return { nodes, move: (event: NexxtTreeMove) => moveNode(nodes.value, event) }
+}
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { Tree },
+    setup() {
+      const selected = ref<string | null>('group')
+      const collapsed = ref<string[]>([])
+
+      return { args, ...movableNodes(NODES), selected, collapsed }
+    },
+    template: `
+      <div class="w-72 rounded-xl border border-gray-200 bg-white p-4">
+        <Tree v-model:selected="selected" v-model:collapsed="collapsed" :nodes="nodes" :draggable="args.draggable" @move="move" label="Pagina structuur" />
+      </div>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const highlight = canvasElement.querySelector<HTMLElement>('[data-tree-highlight]')!
+    const selectedRow = canvasElement.querySelector<HTMLElement>('[data-tree-id="group"]')!
+
+    // On first load the highlight is simply there: nothing animates into place. The story itself
+    // mounted too long ago to watch, so a throwaway copy is mounted and listened in on.
+    const host = document.createElement('div')
+    const started: string[] = []
+    host.addEventListener('transitionstart', (event) => {
+      started.push((event as TransitionEvent).propertyName)
+    })
+
+    canvasElement.append(host)
+    const app = createApp(Tree, { nodes: NODES, label: 'Mount probe', selected: 'group' })
+    app.mount(host)
+
+    await new Promise((resolve) => setTimeout(resolve, 500))
+
+    app.unmount()
+    host.remove()
+    await expect(started).toEqual([])
+
+    const offset = highlight.getBoundingClientRect().top - selectedRow.getBoundingClientRect().top
+    await expect(Math.abs(offset)).toBeLessThan(2)
+
+    const before = getComputedStyle(highlight).transform
+    const row = canvasElement.querySelector<HTMLElement>('[data-tree-id="title"]')!
+
+    // Label and icon fade to the selected colour rather than snapping. Recorded up front:
+    // the 150ms transition is over well before an assertion could poll for it. The listener
+    // sits on the row and catches the icon through bubbling.
+    const fading: string[] = []
+    row.addEventListener('transitionstart', (event) => {
+      const target = event.target as HTMLElement
+      fading.push(`${target.tagName}:${(event as TransitionEvent).propertyName}`)
+    })
+
+    await userEvent.click(canvas.getByText('Titel'))
+
+    // a later selection does slide to the new row instead of jumping between backgrounds
+    await waitFor(() => expect(highlight.getAnimations()).not.toHaveLength(0), { timeout: 2000 })
+    await waitFor(() => expect(getComputedStyle(highlight).transform).not.toBe(before), {
+      timeout: 2000,
+    })
+
+    await waitFor(
+      () => {
+        expect(fading).toContain('DIV:color')
+        expect(fading).toContain('I:color')
+      },
+      { timeout: 2000 },
+    )
+  },
+}
+
+/** Fires a drag event the way the browser would, at `clientY` on the tree's left half. */
+const dragAt = (target: Element, type: string, clientY: number, dataTransfer: DataTransfer) => {
+  const tree = target.closest('[role="tree"]')!.getBoundingClientRect()
+  const event = new DragEvent(type, {
+    bubbles: true,
+    cancelable: true,
+    clientX: tree.left + 40,
+    clientY,
+    dataTransfer,
+  })
+  target.dispatchEvent(event)
+
+  return event
+}
+
+/**
+ * Drag a row onto, above or below another to reorder the tree. A ghost row shows where it lands,
+ * at the depth it lands on; on a collapsed group the group row itself is marked. The play fires
+ * the drag events itself rather than driving a real pointer, which is not reliable in the
+ * combined `pnpm test` run: it checks the ghost row against the real layout, that a resting
+ * pointer leaves it alone, and that the dropped row lands without flying in from its old spot.
+ */
+export const DragToReorder: Story = {
+  args: { draggable: true },
+  render: (args) => ({
+    components: { Tree },
+    setup() {
+      const selected = ref<string | null>('group')
+      const collapsed = ref<string[]>([])
+
+      return { args, ...movableNodes(NODES), selected, collapsed }
+    },
+    template: `
+      <div class="w-72 rounded-xl border border-gray-200 bg-white p-4">
+        <Tree v-model:selected="selected" v-model:collapsed="collapsed" :nodes="nodes" :draggable="args.draggable" @move="move" label="Pagina structuur" />
+      </div>
+    `,
+  }),
+  // Picks its rows by position, not by id: the last row is dragged to before the second one
+  play: async ({ canvasElement, step }) => {
+    const tree = canvasElement.querySelector<HTMLElement>('[role="tree"]')!
+    const rowOf = (id: string) => tree.querySelector<HTMLElement>(`[data-tree-id="${id}"]`)!
+    const ghost = () => tree.querySelector<HTMLElement>('[data-tree-ghost]:not(.absolute)')
+    const ids = () =>
+      Array.from(tree.querySelectorAll<HTMLElement>('[role="treeitem"]')).map(
+        (row) => row.dataset.treeId!,
+      )
+    const settled = () => new Promise((resolve) => setTimeout(resolve, 400))
+
+    const treeitems = ids()
+    const [first, targetId] = treeitems
+    const sourceId = treeitems.at(-1)!
+    const target = () => rowOf(targetId!)
+    const source = () => rowOf(sourceId)
+    // the top quarter of the target row: the spot before it
+    const restY = target().getBoundingClientRect().top + 5
+
+    await step('cancelling leaves everything as it was', async () => {
+      const transfer = new DataTransfer()
+      dragAt(source(), 'dragstart', restY, transfer)
+      dragAt(target(), 'dragover', restY, transfer)
+      await waitFor(() => expect(ghost()).not.toBeNull())
+
+      // Escape, or letting go outside the tree: a `dragend` and no `drop`
+      dragAt(source(), 'dragend', restY, transfer)
+      await waitFor(() => expect(ghost()).toBeNull())
+      await expect(ids()).toEqual(treeitems)
+      await expect(source().classList).not.toContain('opacity-40')
+    })
+
+    const transfer = new DataTransfer()
+    dragAt(source(), 'dragstart', restY, transfer)
+    await waitFor(() => expect(source().classList).toContain('opacity-40'))
+    dragAt(target(), 'dragover', restY, transfer)
+    await settled()
+
+    await step('one ghost row, as tall as a row, at the depth it lands on', async () => {
+      const placed = ghost()!
+      const surface = placed.firstElementChild as HTMLElement
+
+      await expect(tree.querySelectorAll('[data-tree-ghost]')).toHaveLength(1)
+      await expect(ids()).toEqual(treeitems)
+      await expect(placed.nextElementSibling).toBe(target())
+      await expect(placed.offsetHeight).toBe(target().offsetHeight)
+      // indented like the row it lands next to: their contents start at the same x
+      const padding = (element: Element) => parseFloat(getComputedStyle(element).paddingLeft)
+      await expect(surface.getBoundingClientRect().left - tree.getBoundingClientRect().left).toBe(
+        padding(target()) - padding(surface),
+      )
+
+      // its icon lines up with the icon of the row it lands next to
+      const ghostIcon = placed.querySelector('[data-tree-ghost-content] > i')
+      const targetIcon = target().querySelector(':scope > i')
+      if (ghostIcon && targetIcon) {
+        const offset =
+          ghostIcon.getBoundingClientRect().left - targetIcon.getBoundingClientRect().left
+        await expect(Math.abs(offset)).toBeLessThan(0.5)
+      }
+    })
+
+    await step('a resting pointer changes nothing', async () => {
+      const placed = ghost()!
+      const mutations: MutationRecord[] = []
+      const observer = new MutationObserver((records) => mutations.push(...records))
+      observer.observe(tree, { subtree: true, childList: true, attributes: true })
+
+      // the browser repeats `dragover` while the pointer rests; the point is now on the ghost
+      for (let index = 0; index < 8; index++) {
+        const under = document.elementFromPoint(tree.getBoundingClientRect().left + 40, restY)!
+        dragAt(under, 'dragover', restY, transfer)
+        await new Promise((resolve) => setTimeout(resolve, 30))
+      }
+      observer.disconnect()
+
+      await expect(mutations).toEqual([])
+      await expect(ghost()).toBe(placed)
+      await expect(placed.getAnimations({ subtree: true })).toEqual([])
+    })
+
+    await step('the highlight stays on the selected row the ghost pushed down', async () => {
+      const highlight = tree.querySelector<HTMLElement>('[data-tree-highlight]')!
+      const selectedRow = tree.querySelector<HTMLElement>('[aria-selected="true"]')
+
+      if (selectedRow) {
+        const offset =
+          highlight.getBoundingClientRect().top - selectedRow.getBoundingClientRect().top
+        await expect(Math.abs(offset)).toBeLessThan(2)
+      }
+    })
+
+    await step('the dropped row takes the ghost row’s place without flying there', async () => {
+      dragAt(ghost()!, 'drop', restY, transfer)
+      dragAt(source(), 'dragend', restY, transfer)
+
+      await waitFor(() => expect(ids().slice(0, 3)).toEqual([first, sourceId, targetId]))
+      await new Promise((resolve) => requestAnimationFrame(resolve))
+
+      const flying = source()
+        .getAnimations()
+        .filter((animation) => (animation as CSSTransition).transitionProperty === 'transform')
+      await expect(flying).toEqual([])
+      await expect(ghost()).toBeNull()
+      await expect(source().classList).not.toContain('opacity-40')
+    })
+  },
+}
+
+/** Nothing lands next to the page: everything stays inside the one root. */
+const insidePage = ({ parentId }: NexxtTreeMove) => parentId !== null
+
+/**
+ * The tree as the app uses it: the page is the single root, and `canDrop` turns down every spot
+ * on the root level, so a block can never end up next to the page. A refused spot shows no ghost
+ * row and drops nothing. The tree is taller than its rows here: the empty space below the last
+ * row is the end of that row's level, not a dead zone.
+ */
+export const PageAsRoot: Story = {
+  args: { draggable: true },
+  render: (args) => ({
+    components: { Tree },
+    setup() {
+      const selected = ref<string | null>('about')
+      const collapsed = ref<string[]>([])
+
+      return { args, ...movableNodes(NODES), selected, collapsed, canDrop: insidePage }
+    },
+    template: `
+      <div class="w-72 rounded-xl border border-gray-200 bg-white p-4">
+        <Tree v-model:selected="selected" v-model:collapsed="collapsed" class="min-h-80" :nodes="nodes" :draggable="args.draggable" :can-drop="canDrop" @move="move" label="Pagina structuur" />
+      </div>
+    `,
+  }),
+  play: async ({ canvasElement, step }) => {
+    const tree = canvasElement.querySelector<HTMLElement>('[role="tree"]')!
+    const rowOf = (id: string) => tree.querySelector<HTMLElement>(`[data-tree-id="${id}"]`)!
+    const ghost = () => tree.querySelector<HTMLElement>('[data-tree-ghost]:not(.absolute)')
+    const ids = () =>
+      Array.from(tree.querySelectorAll<HTMLElement>('[role="treeitem"]')).map(
+        (row) => row.dataset.treeId!,
+      )
+    const transfer = new DataTransfer()
+    const page = rowOf('about').getBoundingClientRect()
+
+    dragAt(rowOf('story'), 'dragstart', page.top, transfer)
+
+    await step('the root level is turned down, above and below the page', async () => {
+      for (const y of [page.top + 2, page.bottom - 2]) {
+        const event = dragAt(rowOf('about'), 'dragover', y, transfer)
+
+        await expect(event.defaultPrevented).toBe(false)
+        await expect(transfer.dropEffect).toBe('none')
+      }
+      await new Promise((resolve) => setTimeout(resolve, 100))
+      await expect(ghost()).toBeNull()
+    })
+
+    await step('the empty space below the rows is the end of the last row’s level', async () => {
+      const last = ids().at(-1)!
+      const event = dragAt(tree, 'dragover', tree.getBoundingClientRect().bottom - 10, transfer)
+
+      await expect(event.defaultPrevented).toBe(true)
+      await waitFor(() => expect(ghost()).not.toBeNull())
+      await expect(ghost()!.previousElementSibling).toBe(rowOf(last))
+    })
+
+    await step('dropping there moves the block to the end of that level', async () => {
+      dragAt(ghost()!, 'drop', tree.getBoundingClientRect().bottom - 10, transfer)
+      dragAt(rowOf('story'), 'dragend', page.top, transfer)
+
+      await waitFor(() => expect(ids().at(-1)).toBe('story'))
+      await expect(rowOf('story').getAttribute('aria-level')).toBe('3')
+      await expect(ghost()).toBeNull()
+    })
+  },
+}
+
+/**
+ * Hovering anywhere on a row darkens its chevron; point at a row to see it. No play: a real-pointer
+ * hover is not reliable in the combined `pnpm test` run.
+ */
+export const HoveringARow: Story = {
+  render: (args) => ({
+    components: { Tree },
+    setup() {
+      const selected = ref<string | null>(null)
+      const collapsed = ref<string[]>([])
+
+      return { args, ...movableNodes(NODES), selected, collapsed }
+    },
+    template: `
+      <div class="w-72 rounded-xl border border-gray-200 bg-white p-4">
+        <Tree v-model:selected="selected" v-model:collapsed="collapsed" :nodes="nodes" :draggable="args.draggable" @move="move" label="Pagina structuur" />
+      </div>
+    `,
+  }),
+}
+
+export const CollapsingARow: Story = {
+  render: (args) => ({
+    components: { Tree },
+    setup() {
+      // A selection below the folding node: that row slides up and the highlight has to keep up
+      const selected = ref<string | null>('group')
+      const collapsed = ref<string[]>([])
+
+      return { args, ...movableNodes(NODES), selected, collapsed }
+    },
+    template: `
+      <div class="w-72 rounded-xl border border-gray-200 bg-white p-4">
+        <Tree v-model:selected="selected" v-model:collapsed="collapsed" :nodes="nodes" :draggable="args.draggable" @move="move" label="Pagina structuur" />
+      </div>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const chevron = canvasElement.querySelector<HTMLElement>('[data-tree-id="team"] button')!
+    const motion = watchMotion(canvasElement)
+
+    await userEvent.click(chevron)
+
+    // the children are dropped once the rows above them have taken their place
+    await waitFor(() => expect(canvas.queryByText('Teamfoto')).toBeNull(), { timeout: 2000 })
+    await expect(canvas.getByText('Team')).toBeInTheDocument()
+    await foldFinished()
+
+    motion.stop()
+
+    // the highlight travels with the row it sits behind rather than racing it to the end
+    await expect(motion.drift()).toBeLessThan(4)
+    // and the row slides up over empty space, not over the labels that are leaving
+    await expect(motion.overlap()).toBeLessThan(1)
+  },
+}
+
+export const ExpandingARow: Story = {
+  render: (args) => ({
+    components: { Tree },
+    setup() {
+      const selected = ref<string | null>('group')
+      const collapsed = ref<string[]>(['team'])
+
+      return { args, ...movableNodes(NODES), selected, collapsed }
+    },
+    template: `
+      <div class="w-72 rounded-xl border border-gray-200 bg-white p-4">
+        <Tree v-model:selected="selected" v-model:collapsed="collapsed" :nodes="nodes" :draggable="args.draggable" @move="move" label="Pagina structuur" />
+      </div>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const chevron = canvasElement.querySelector<HTMLElement>('[data-tree-id="team"] button')!
+    const motion = watchMotion(canvasElement)
+
+    await userEvent.click(chevron)
+    await waitFor(() => expect(canvas.getByText('Teamfoto')).toBeInTheDocument(), {
+      timeout: 2000,
+    })
+    await foldFinished()
+
+    motion.stop()
+
+    // Inserted at their final spot the children would be readable on top of the rows that are
+    // still sliding down to make room for them
+    await expect(motion.overlap()).toBeLessThan(1)
+
+    // they unfold from under their parent instead: one way down, never a jump back up
+    const unfolding = motion.tops('members')
+
+    await expect(unfolding.at(-1)! - unfolding[0]!).toBeGreaterThan(20)
+    unfolding.forEach((top, index) => {
+      if (index) expect(top).toBeGreaterThanOrEqual(unfolding[index - 1]! - 0.5)
+    })
+  },
+}
+
+export const Collapsed: Story = {
+  render: (args) => ({
+    components: { Tree },
+    setup() {
+      const selected = ref<string | null>(null)
+      const collapsed = ref<string[]>(['group'])
+
+      return { args, ...movableNodes(NODES), selected, collapsed }
+    },
+    template: `
+      <div class="w-72 rounded-xl border border-gray-200 bg-white p-4">
+        <Tree v-model:selected="selected" v-model:collapsed="collapsed" :nodes="nodes" :draggable="args.draggable" @move="move" label="Pagina structuur" />
+      </div>
+    `,
+  }),
+}
+
+/** A long label next to the action shows that the label truncates before it runs under the button. */
+const NODES_WITH_LONG_LABEL: NexxtTreeNode[] = NODES.map((page) => ({
+  ...page,
+  children: page.children?.map((node) =>
+    node.id === 'story' ? { ...node, label: 'Ons verhaal in een hele lange titel' } : node,
+  ),
+}))
+
+const onDelete = fn()
+
+/**
+ * The selected row shows its action; every other row keeps it out of sight, out of the tab order
+ * and out of the accessibility tree. With the keyboard: Enter selects the row, Tab reaches its
+ * action.
+ */
+export const WithNodeActions: Story = {
+  render: (args) => ({
+    components: { Tree, NexxtIcon },
+    setup() {
+      const selected = ref<string | null>(null)
+      const collapsed = ref<string[]>([])
+
+      return { args, ...movableNodes(NODES_WITH_LONG_LABEL), selected, collapsed, onDelete }
+    },
+    template: `
+      <div class="w-72 rounded-xl border border-gray-200 bg-white p-4">
+        <Tree v-model:selected="selected" v-model:collapsed="collapsed" :nodes="nodes" :draggable="args.draggable" @move="move" label="Pagina structuur">
+          <template #node-actions="{ node, tabindex }">
+            <button
+              type="button"
+              class="flex size-6 cursor-pointer items-center justify-center rounded-md text-gray-700 transition-colors duration-150 hover:bg-gray-200 hover:text-gray-900 focus-visible:outline-2 focus-visible:outline-cornflower-blue-500 motion-reduce:transition-none"
+              :tabindex="tabindex"
+              :aria-label="\`Verwijder \${node.label}\`"
+              @click="onDelete(node)"
+            >
+              <NexxtIcon name="trash" />
+            </button>
+          </template>
+        </Tree>
+      </div>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const actionsOf = (id: string) =>
+      canvasElement.querySelector<HTMLElement>(
+        `[data-tree-id="${id}"] [data-tree-actions-content]`,
+      )!
+    const selectedRows = () => canvasElement.querySelectorAll('[aria-selected="true"]')
+
+    onDelete.mockClear()
+
+    // Tab lands on the tree's one tab stop; without a selection no row offers its action
+    await userEvent.tab()
+    const about = canvasElement.querySelector('[data-tree-id="about"]')
+    await expect(document.activeElement).toBe(about)
+    await expect(actionsOf('about').closest('[inert]')).not.toBeNull()
+    await expect(getComputedStyle(actionsOf('about')).opacity).toBe('0')
+
+    // Enter selects the row, which brings in its action and no other
+    await userEvent.keyboard('{Enter}')
+    await waitFor(
+      () => {
+        expect(getComputedStyle(actionsOf('about')).opacity).toBe('1')
+        expect(getComputedStyle(actionsOf('story')).opacity).toBe('0')
+      },
+      { timeout: 2000 },
+    )
+    await expect(actionsOf('about').closest('[inert]')).toBeNull()
+    await expect(actionsOf('story').closest('[inert]')).not.toBeNull()
+
+    // one extra stop: the action of the row you are on
+    await userEvent.tab()
+    const action = canvas.getByRole('button', { name: 'Verwijder Over ons' })
+    await expect(document.activeElement).toBe(action)
+
+    // Enter runs the action and nothing else: the selection stays where it was
+    await userEvent.keyboard('{Enter}')
+    await expect(onDelete).toHaveBeenCalledTimes(1)
+    await expect(onDelete).toHaveBeenCalledWith(expect.objectContaining({ id: 'about' }))
+    await expect(Array.from(selectedRows())).toEqual([about])
+
+    // the arrow keys belong to the tree, not to the action: focus stays put
+    await userEvent.keyboard('{ArrowDown}')
+    await expect(document.activeElement).toBe(action)
+
+    // the row is named by its label, not by its label plus the button inside it
+    await expect(canvas.getByRole('treeitem', { name: /^Over ons$/ })).toBeInTheDocument()
+
+    // Clicking the chevron never focuses it: it sits in `aria-hidden`, where Chromium blocks the
+    // focus with a console warning. Recorded on the way, as the row takes focus right after.
+    const chevron = canvasElement.querySelector<HTMLElement>('[data-tree-id="group"] button')!
+    const focused: Element[] = []
+    const record = (event: FocusEvent) => focused.push(event.target as Element)
+
+    canvasElement.addEventListener('focusin', record)
+    await userEvent.click(chevron)
+    canvasElement.removeEventListener('focusin', record)
+
+    await expect(focused).not.toContain(chevron)
+
+    // a 24px action does not make the rows any taller than a tree without actions
+    const host = document.createElement('div')
+    host.className = 'w-72 p-4'
+    canvasElement.append(host)
+    const app = createApp(Tree, { nodes: NODES_WITH_LONG_LABEL, label: 'Height probe' })
+    app.mount(host)
+
+    const plain = host.querySelector<HTMLElement>('[data-tree-id="about"]')!.offsetHeight
+    const withActions =
+      canvasElement.querySelector<HTMLElement>('[data-tree-id="about"]')!.offsetHeight
+
+    app.unmount()
+    host.remove()
+
+    await expect(withActions).toBe(plain)
+  },
+}
+
+/** Long enough to truncate in a narrow panel, on every level. */
+const NODES_WITH_LONG_LABELS: NexxtTreeNode[] = [
+  {
+    id: 'page',
+    label: 'Welkomstpagina voor nieuwe bezoekers',
+    icon: 'file',
+    children: [
+      { id: 'image', label: 'Afbeelding van het kantoor aan de gracht', icon: 'image' },
+      {
+        id: 'group',
+        label: 'Een groep met een hele lange naam',
+        icon: 'object-group',
+        children: [
+          { id: 'title', label: 'Titel boven de introductietekst', icon: 'heading' },
+          { id: 'text', label: 'Kort', icon: 'font' },
+        ],
+      },
+    ],
+  },
+]
+
+/**
+ * In a narrow panel every row that is not selected gives its label the whole row. The selected
+ * row has its actions: they slide in from its end and push its label in, and slide out again when
+ * the selection moves on. The rows around it never move.
+ */
+export const NarrowPanelWithNodeActions: Story = {
+  render: (args) => ({
+    components: { Tree, NexxtIcon },
+    setup() {
+      const selected = ref<string | null>('group')
+      const collapsed = ref<string[]>([])
+
+      return { args, ...movableNodes(NODES_WITH_LONG_LABELS), selected, collapsed, onDelete }
+    },
+    template: `
+      <div class="w-56 rounded-xl border border-gray-200 bg-white p-2">
+        <Tree v-model:selected="selected" v-model:collapsed="collapsed" :nodes="nodes" :draggable="args.draggable" @move="move" label="Pagina structuur">
+          <template #node-actions="{ node, tabindex }">
+            <button
+              v-for="action in [{ icon: 'copy', label: 'Dupliceer' }, { icon: 'trash', label: 'Verwijder' }]"
+              :key="action.icon"
+              type="button"
+              class="flex size-6 cursor-pointer items-center justify-center rounded-md text-gray-700 transition-colors duration-150 hover:bg-gray-200 hover:text-gray-900 focus-visible:outline-2 focus-visible:outline-cornflower-blue-500 motion-reduce:transition-none"
+              :tabindex="tabindex"
+              :aria-label="\`\${action.label} \${node.label}\`"
+              @click="onDelete(node)"
+            >
+              <NexxtIcon :name="action.icon" />
+            </button>
+          </template>
+        </Tree>
+      </div>
+    `,
+  }),
+  args: { draggable: true },
+  play: async ({ canvasElement }) => {
+    const row = (id: string) => canvasElement.querySelector<HTMLElement>(`[data-tree-id="${id}"]`)!
+    const rect = (id: string, part: string) =>
+      row(id).querySelector<HTMLElement>(part)!.getBoundingClientRect()
+    /** Where the row's content ends: its right edge minus its padding. */
+    const contentEnd = (id: string) =>
+      row(id).getBoundingClientRect().right - parseFloat(getComputedStyle(row(id)).paddingRight)
+    const settle = () => new Promise((resolve) => setTimeout(resolve, 400))
+
+    await settle()
+
+    // a row that is not selected gives its label the whole row, and has no actions to see
+    await expect(rect('image', '[data-tree-label]').right).toBeCloseTo(contentEnd('image'), 0)
+    await expect(
+      getComputedStyle(row('image').querySelector('[data-tree-actions-content]')!).opacity,
+    ).toBe('0')
+
+    // the selected row has its actions in the flow, after its label
+    const selectedActions = rect('group', '[data-tree-actions-content]')
+    await expect(rect('group', '[data-tree-label]').right).toBeLessThanOrEqual(selectedActions.left)
+    await expect(selectedActions.right).toBeCloseTo(contentEnd('group'), 0)
+
+    // selecting a row slides its actions in and pushes its label in; the other rows stay put
+    const others = ['page', 'title'].map((id) => rect(id, '[data-tree-label]').right)
+    const track = row('image').querySelector<HTMLElement>('[data-tree-actions]')!
+    const widths: number[] = []
+    let sampling = true
+    const sample = () => {
+      widths.push(track.getBoundingClientRect().width)
+      if (sampling) requestAnimationFrame(sample)
+    }
+    requestAnimationFrame(sample)
+    await userEvent.click(row('image').querySelector('[data-tree-label]')!)
+    await settle()
+    sampling = false
+    // it slid: on its way the track was neither shut nor fully open
+    const open = track.getBoundingClientRect().width
+    await expect(widths.some((width) => width > 1 && width < open - 1)).toBe(true)
+    await expect(rect('image', '[data-tree-label]').right).toBeLessThanOrEqual(
+      rect('image', '[data-tree-actions-content]').left,
+    )
+    await expect(['page', 'title'].map((id) => rect(id, '[data-tree-label]').right)).toEqual(others)
+    // and the row it left gives its label the whole row again
+    await expect(rect('group', '[data-tree-label]').right).toBeCloseTo(contentEnd('group'), 0)
+    // nothing slid out of the tree: the panel does not scroll sideways
+    const tree = canvasElement.querySelector<HTMLElement>('[role="tree"]')!
+    await expect(tree.scrollWidth).toBe(tree.clientWidth)
+  },
+}
+
+/** A copy of `nodes` without `id`, plus the id of the parent it was removed from. */
+const withoutNode = (nodes: NexxtTreeNode[], id: string) => {
+  let removedFrom: string | null = null
+
+  const walk = (list: NexxtTreeNode[], parent: string | null): NexxtTreeNode[] =>
+    list
+      .filter((node) => {
+        if (node.id !== id) return true
+        removedFrom = parent
+        return false
+      })
+      .map((node) => (node.children ? { ...node, children: walk(node.children, node.id) } : node))
+
+  const remaining = walk(nodes, null)
+
+  return { nodes: remaining, parentId: removedFrom as string | null }
+}
+
+/**
+ * Removing the focused node takes its row, and the focus with it. `focusNode` hands focus to the
+ * parent instead, so a keyboard user carries on inside the tree rather than at the top of the page.
+ */
+export const DeleteAndRefocus: Story = {
+  render: (args) => ({
+    components: { Tree, NexxtIcon },
+    setup() {
+      const { nodes, move } = movableNodes(NODES_WITH_LONG_LABEL)
+      const selected = ref<string | null>(null)
+      const collapsed = ref<string[]>([])
+      const tree: Ref<InstanceType<typeof Tree> | null> = ref(null)
+
+      const onDelete = (node: NexxtTreeNode) => {
+        const result = withoutNode(nodes.value, node.id)
+        nodes.value = result.nodes
+
+        if (result.parentId) tree.value?.focusNode(result.parentId)
+      }
+
+      return { args, nodes, move, selected, collapsed, tree, onDelete }
+    },
+    template: `
+      <div class="w-72 rounded-xl border border-gray-200 bg-white p-4">
+        <Tree ref="tree" v-model:selected="selected" v-model:collapsed="collapsed" :nodes="nodes" :draggable="args.draggable" @move="move" label="Pagina structuur">
+          <template #node-actions="{ node, tabindex }">
+            <button
+              type="button"
+              class="flex size-6 cursor-pointer items-center justify-center rounded-md text-gray-700 transition-colors duration-150 hover:bg-gray-200 hover:text-gray-900 focus-visible:outline-2 focus-visible:outline-cornflower-blue-500 motion-reduce:transition-none"
+              :tabindex="tabindex"
+              :aria-label="\`Verwijder \${node.label}\`"
+              @click="onDelete(node)"
+            >
+              <NexxtIcon name="trash" />
+            </button>
+          </template>
+        </Tree>
+      </div>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const parent = canvasElement.querySelector<HTMLElement>('[data-tree-id="about"]')!
+
+    // onto the story row, select it, then onto its delete button
+    await userEvent.tab()
+    await userEvent.keyboard('{ArrowDown}')
+    await expect(document.activeElement).toBe(canvasElement.querySelector('[data-tree-id="story"]'))
+    await userEvent.keyboard('{Enter}')
+    await userEvent.tab()
+    await expect(document.activeElement).toBe(
+      canvas.getByRole('button', { name: 'Verwijder Ons verhaal in een hele lange titel' }),
+    )
+
+    await userEvent.keyboard('{Enter}')
+
+    // the row is gone and focus landed on its parent, now the tree's one tab stop
+    await waitFor(() => expect(document.activeElement).toBe(parent), { timeout: 2000 })
+    // the leaving row stays in the DOM for a beat, invisible, so it is looked for as a user sees it
+    await expect(
+      canvas.queryByRole('treeitem', { name: 'Ons verhaal in een hele lange titel' }),
+    ).toBeNull()
+    // the leaving row keeps its old tabindex until it is gone, hidden and so out of the tab order
+    await waitFor(
+      () =>
+        expect(
+          Array.from(canvasElement.querySelectorAll('[role="treeitem"][tabindex="0"]')),
+        ).toEqual([parent]),
+      { timeout: 2000 },
+    )
+  },
+}