cursedbelt 3.0.2 → 4.0.0

package/src/react/file-tree/FileTree.spec.tsx

@@ -639,6 +639,199 @@ describe('where you are', () => {
   });
 });
 
+/**
+ * 🔴 `expandOnReveal` — limit 1 of the reveal, opted into. See `FileTree.tsx`'s section on it.
+ *
+ * Owner, `ideas/collections-09-14.md`: *"clicking a file in media gallery content window should
+ * show that file in the file tree by like vscode does when you select a tab with a file in it."*
+ * He named the application whose `explorer.autoReveal` defaults to `true`, so the tree does it —
+ * and the half of the old refusal that was never taste (a CONTROLLED `collapsed` the consumer
+ * persists must not be rewritten behind its back) is what these tests hold down.
+ */
+describe('the reveal that opens the folder', () => {
+  /** The whole tree with `simpsons/screencaps` shut, reporting what it is asked to store. */
+  const withShut = (
+    props: Partial<React.ComponentProps<typeof FileTree>>,
+    shut: readonly string[],
+    onChange: (next: string[]) => void,
+  ) => (
+    <FileTree
+      nodes={TREE}
+      selectedId={null}
+      onSelect={() => undefined}
+      collapsed={shut}
+      onCollapsedChange={onChange}
+      {...props}
+    />
+  );
+
+  test('🔴 a shut folder on the way to the selection OPENS when the prop is wired', () => {
+    const shut: readonly string[] = ['simpsons/screencaps'];
+    const view = render(withShut({ expandOnReveal: true }, shut, () => undefined));
+    expect(screen.queryByText('s04')).toBeNull();
+
+    view.rerender(
+      withShut(
+        { expandOnReveal: true, selectedId: 'simpsons/screencaps/s04' },
+        shut,
+        () => undefined,
+      ),
+    );
+    expect(screen.getByText('s04')).toBeDefined();
+    // Nothing is left marked as "shut and holding it" — the row itself is the answer now.
+    expect(view.container.querySelectorAll('[data-holds-open]')).toHaveLength(0);
+  });
+
+  test('…and it stays SHUT without the prop — every existing consumer is unmoved', () => {
+    const shut: readonly string[] = ['simpsons/screencaps'];
+    const view = render(withShut({}, shut, () => undefined));
+    view.rerender(withShut({ selectedId: 'simpsons/screencaps/s04' }, shut, () => undefined));
+    expect(screen.queryByText('s04')).toBeNull();
+    expect(view.container.querySelectorAll('[data-holds-open]')).toHaveLength(1);
+  });
+
+  test('🔴 the open is NEVER written back — the persisted collapse is the one it was', () => {
+    // The real objection limit 1 recorded, and a correctness issue rather than a taste one:
+    // `collapsed` is controlled and the consumer writes it to storage, so a reveal that called
+    // `onCollapsedChange` would undo a collapse the person chose on every later mount. The
+    // expansion lives in an overlay of the tree's own instead, and this is what proves it.
+    let stored: readonly string[] = ['simpsons', 'simpsons/screencaps'];
+    const seen: string[][] = [];
+    const record = (next: string[]) => {
+      stored = next;
+      seen.push(next);
+    };
+
+    const view = render(withShut({ expandOnReveal: true }, stored, record));
+    view.rerender(
+      withShut({ expandOnReveal: true, selectedId: 'simpsons/screencaps/s04' }, stored, record),
+    );
+    // Both shut ancestors opened — `screencaps` was not even drawn before this, so the folder
+    // the reveal needs is found from the tree rather than from a `data-holds-open` marker.
+    expect(screen.getByText('s04')).toBeDefined();
+    expect(seen).toEqual([]);
+    expect(stored).toEqual(['simpsons', 'simpsons/screencaps']);
+
+    // And the proof that matters: mounted again with the value the consumer still holds, the
+    // folders are shut, exactly as they were left.
+    cleanup();
+    render(withShut({ expandOnReveal: true, selectedId: null }, stored, record));
+    expect(screen.queryByText('screencaps')).toBeNull();
+  });
+
+  test('🔴 a folder shut BY HAND afterwards stays shut — the reveal fires once per selection', () => {
+    // What `explorer.autoReveal` does, and the only thing that leaves the twisty working: an
+    // expansion that re-asserted itself would make the control do nothing at all while the
+    // same file is open.
+    const seen: string[][] = [];
+    const stored: readonly string[] = ['simpsons/screencaps'];
+    const props = { expandOnReveal: true, selectedId: 'simpsons/screencaps/s04' };
+    const view = render(withShut({ expandOnReveal: true }, stored, (n) => seen.push(n)));
+    view.rerender(withShut(props, stored, (n) => seen.push(n)));
+    expect(screen.getByText('s04')).toBeDefined();
+
+    const row = screen.getByText('screencaps').closest('[role="treeitem"]') as HTMLElement;
+    fireEvent.click(row.querySelector('.cbft-twisty') as HTMLElement);
+    expect(screen.queryByText('s04')).toBeNull();
+    // It was already shut in the value the consumer holds, so there is nothing to write there
+    // either — shutting it only dropped the overlay.
+    expect(seen).toEqual([]);
+
+    // Still shut on the next render of the same selection.
+    view.rerender(withShut(props, stored, (n) => seen.push(n)));
+    expect(screen.queryByText('s04')).toBeNull();
+  });
+
+  test('🔴 it SAYS which folders it opened — the half a lazily-fetched tree needs', () => {
+    // `apps/collections` asks the server for a folder's files only for the folders it believes
+    // are open, so an expansion it cannot see draws the folder open and empty with the file
+    // still missing. The overlay is silent; `onRevealExpand` is what stops it being invisible.
+    const told: string[][] = [];
+    const stored: readonly string[] = ['simpsons', 'simpsons/screencaps'];
+    const seen: string[][] = [];
+    const view = render(
+      <FileTree
+        nodes={TREE}
+        selectedId={null}
+        onSelect={() => undefined}
+        collapsed={stored}
+        onCollapsedChange={(next) => seen.push(next)}
+        expandOnReveal
+        onRevealExpand={(ids) => told.push([...ids])}
+      />,
+    );
+    view.rerender(
+      <FileTree
+        nodes={TREE}
+        selectedId='simpsons/screencaps/s04'
+        onSelect={() => undefined}
+        collapsed={stored}
+        onCollapsedChange={(next) => seen.push(next)}
+        expandOnReveal
+        onRevealExpand={(ids) => told.push([...ids])}
+      />,
+    );
+    // Both folders on the way, once, in root-first order — and still nothing to persist.
+    expect(told).toEqual([['simpsons', 'simpsons/screencaps']]);
+    expect(seen).toEqual([]);
+
+    // A selection inside a folder that is already open has nothing to say.
+    view.rerender(
+      <FileTree
+        nodes={TREE}
+        selectedId='simpsons/screencaps'
+        onSelect={() => undefined}
+        collapsed={stored}
+        onCollapsedChange={(next) => seen.push(next)}
+        expandOnReveal
+        onRevealExpand={(ids) => told.push([...ids])}
+      />,
+    );
+    expect(told).toHaveLength(1);
+  });
+
+  test('🔴 the row it opened is the row it scrolls to', () => {
+    // Two passes, and this is the second: the row does not exist in the DOM until the folders
+    // above it are open, so an expansion that scrolled in the same pass would scroll to
+    // nothing. happy-dom computes no layout — the frame is stubbed and every row's rect is
+    // zeros, which puts all of them outside it.
+    //
+    // 🔴 The stub goes on `HTMLElement.prototype`, not on `Element.prototype`, and the reason
+    // is a leak rather than a preference: `MediaGallery.spec.tsx` assigns
+    // `HTMLElement.prototype.scrollIntoView` and never puts it back, and `bun test` runs every
+    // spec in ONE process. The derived prototype shadows the base one, so a stub on `Element`
+    // is never reached once that file has run — this test passed alone and failed in the suite
+    // for exactly that reason. The row it needs is not in the DOM yet, which is why this one
+    // cannot stub per instance the way the two reveal tests above do.
+    const scrolled: string[] = [];
+    const proto = HTMLElement.prototype as unknown as { scrollIntoView?: () => void };
+    const prior = proto.scrollIntoView;
+    proto.scrollIntoView = function record(this: Element) {
+      scrolled.push((this.textContent ?? '').trim());
+    };
+    try {
+      const stored: readonly string[] = ['simpsons/screencaps'];
+      const view = render(withShut({ expandOnReveal: true }, stored, () => undefined));
+      // Both rects are stubbed, so the leaked `HTMLElement.prototype.getBoundingClientRect`
+      // from that same file (a 800×600 box at the origin) cannot decide this either way: the
+      // frame starts at 100, and every candidate row's top is above it.
+      (view.container.querySelector('.cbft-scroll') as HTMLElement).getBoundingClientRect = () =>
+        ({ top: 100, bottom: 400 }) as DOMRect;
+      view.rerender(
+        withShut(
+          { expandOnReveal: true, selectedId: 'simpsons/screencaps/s04' },
+          stored,
+          () => undefined,
+        ),
+      );
+      expect(scrolled.at(-1)).toContain('s04');
+    } finally {
+      if (prior) proto.scrollIntoView = prior;
+      else delete proto.scrollIntoView;
+    }
+  });
+});
+
 describe('the drag, beyond the pointer', () => {
   /** Start a real gesture over the blank space: press, then travel past `DRAG_THRESHOLD`. */
   const lift = (row: HTMLElement) => {
@@ -807,6 +1000,599 @@ describe('the keyboard, beyond walking', () => {
   });
 });
 
+/**
+ * 🔴 MULTI-SELECT — owner, 2026-09-14, `ideas/file-tree.md` item 2.
+ *
+ * *"If I click on a file in the sidebar file tree with the folders then hold shift and click
+ * another item in the folder, I want it to select all the files from the first file to the one
+ * I clicked next while holding shift. Then with all of those selected I want to be able to
+ * click and hold on any of them to drag and drop them to another folder or to the root outside
+ * of any folder. Another key shortcut functionality I need is selecting multiple files by
+ * holding the command key on my mac and clicking each file I want to select then dragging them
+ * to another folder. For both of these new selection functionalities I also want to be able to
+ * hold command and click delete to delete all the selected files. I also want to be able to cut
+ * and paste to move them with command + x and command + v, and copy them with command + c and
+ * command + v."*
+ *
+ * The arithmetic — which rows a range covers, whether a drop is legal for N ids — is
+ * `fileTreeSelection.spec.ts`, without a DOM. What is here is the DOM half: which gesture
+ * reports what, and the compatibility rule that holds the whole design together —
+ * **a consumer that wired none of the plural props sees exactly what it saw before.**
+ */
+describe('selecting more than one row', () => {
+  const idsOf = (name: string) =>
+    (screen.getByText(name).closest('[role="treeitem"]') as HTMLElement) ?? null;
+
+  test('🔴 shift-click selects the range between the anchor and the click', () => {
+    const reported: string[][] = [];
+    const picked: string[] = [];
+    tree({
+      onSelect: (n) => picked.push(n.id),
+      onSelectionChange: (ids) => reported.push(ids),
+    });
+    // A plain click sets the anchor — and still selects, because the ordinary act is
+    // unchanged by any of this.
+    fireEvent.click(idsOf('screencaps'));
+    expect(picked).toEqual(['simpsons/screencaps']);
+    expect(reported).toEqual([['simpsons/screencaps']]);
+
+    fireEvent.click(idsOf('Travels'), { shiftKey: true });
+    expect(reported.at(-1)).toEqual([
+      'simpsons/screencaps',
+      'simpsons/screencaps/s04',
+      'dinos',
+      'travels',
+    ]);
+    // 🔴 …and it did NOT also navigate. Extending a selection is not opening anything, and in
+    // a consumer that shows the selected row in the main pane it would be.
+    expect(picked).toEqual(['simpsons/screencaps']);
+  });
+
+  test('🔴 the anchor does not move, so a second shift-click re-covers from the same start', () => {
+    // The behaviour every file explorer has: shift-click down four rows, realise you meant
+    // two, shift-click the second — and get two, not six.
+    const reported: string[][] = [];
+    tree({ onSelectionChange: (ids) => reported.push(ids) });
+    fireEvent.click(idsOf('Simpsons'));
+    fireEvent.click(idsOf('Travels'), { shiftKey: true });
+    expect(reported.at(-1)).toHaveLength(5);
+    fireEvent.click(idsOf('screencaps'), { shiftKey: true });
+    expect(reported.at(-1)).toEqual(['simpsons', 'simpsons/screencaps']);
+  });
+
+  test('🔴 ⌘-click adds one, and ⌘-clicking it again takes it out', () => {
+    const reported: string[][] = [];
+    const picked: string[] = [];
+    const view = tree({
+      selectedIds: ['travels'],
+      onSelect: (n) => picked.push(n.id),
+      onSelectionChange: (ids) => reported.push(ids),
+    });
+    fireEvent.click(idsOf('Dinos'), { metaKey: true });
+    expect(reported.at(-1)).toEqual(['travels', 'dinos']);
+    expect(picked).toEqual([]);
+
+    view.rerender(
+      <FileTree
+        nodes={TREE}
+        selectedId={null}
+        selectedIds={['travels', 'dinos']}
+        onSelect={(n) => picked.push(n.id)}
+        onSelectionChange={(ids) => reported.push(ids)}
+      />,
+    );
+    fireEvent.click(idsOf('Travels'), { metaKey: true });
+    expect(reported.at(-1)).toEqual(['dinos']);
+  });
+
+  test('every selected row is drawn selected, and the tree says it takes more than one', () => {
+    const { container } = tree({
+      selectedIds: ['dinos', 'travels'],
+      onSelectionChange: () => undefined,
+    });
+    const marked = [...container.querySelectorAll('[data-selected]')].map((r) =>
+      (r.textContent ?? '').trim(),
+    );
+    expect(marked).toEqual(['Dinos', 'Travels']);
+    expect(
+      (container.querySelector('[role="tree"]') as HTMLElement).getAttribute(
+        'aria-multiselectable',
+      ),
+    ).toBe('true');
+  });
+
+  test('🔴 a consumer that wired none of it is untouched — one selected row, no promise of more', () => {
+    // The whole reason `selectedId` did not move. `apps/collections` and `apps/music` both
+    // read it as "what the main pane is showing", and a tree that silently became
+    // multi-select would have broken that on the day this published.
+    const picked: string[] = [];
+    const { container } = tree({ selectedId: 'dinos', onSelect: (n) => picked.push(n.id) });
+    expect(container.querySelectorAll('[data-selected]')).toHaveLength(1);
+    expect(
+      (container.querySelector('[role="tree"]') as HTMLElement).getAttribute(
+        'aria-multiselectable',
+      ),
+    ).toBeNull();
+    // Shift and ⌘ are not this tree's keys unless the consumer can receive a selection.
+    fireEvent.click(idsOf('Travels'), { shiftKey: true });
+    fireEvent.click(idsOf('Simpsons'), { metaKey: true });
+    expect(picked).toEqual(['travels', 'simpsons']);
+  });
+});
+
+describe('dragging a selection', () => {
+  /** As in `the drag, beyond the pointer` — happy-dom computes no layout, so say where. */
+  const layOut = (underPointer: string | null) => {
+    for (const row of screen.getAllByRole('treeitem') as HTMLElement[]) {
+      const hit = (row.textContent ?? '').trim() === underPointer;
+      row.getBoundingClientRect = () =>
+        ({ top: hit ? 80 : 500, bottom: hit ? 100 : 520, left: 0, right: 200, height: 20 }) as DOMRect;
+    }
+  };
+
+  /** Press `from`, travel past `DRAG_THRESHOLD` onto whatever `layOut` put under the path. */
+  const dragTo = (from: HTMLElement, over: string | null) => {
+    fireEvent.pointerDown(from, { button: 0, clientX: 10, clientY: 10, pointerId: 1 });
+    layOut(over);
+    fireEvent.pointerMove(from, { clientX: 10, clientY: 90, pointerId: 1 });
+  };
+
+  /**
+   * The ROW with this name — not the drag chip, which carries the same name and is in the
+   * document from the first `pointermove` onward.
+   */
+  const rowNamed = (name: string) =>
+    screen
+      .getAllByText(name)
+      .map((el) => el.closest('[role="treeitem"]'))
+      .find(Boolean) as HTMLElement;
+
+  test('🔴 pressing a row that is part of a selection carries the whole selection', () => {
+    // *"with all of those selected I want to be able to click and hold on any of them to drag
+    // and drop them to another folder"*.
+    const moved: Array<[readonly string[], unknown]> = [];
+    const { container } = tree({
+      selectedIds: ['dinos', 'travels'],
+      onSelectionChange: () => undefined,
+      onMoveMany: (ids, drop) => moved.push([ids, drop]),
+    });
+    dragTo(rowNamed('Travels'), 'Simpsons');
+    // The chip counts rather than naming — twenty names is not something a chip under a
+    // moving cursor can be read as.
+    expect(container.querySelector('.cbft-chip-name')?.textContent).toBe('2 items');
+    expect(container.querySelector('.cbft-chip-where')?.textContent).toBe('Into Simpsons');
+    fireEvent.pointerUp(rowNamed('Travels'), { pointerId: 1 });
+    expect(moved).toEqual([[['dinos', 'travels'], { kind: 'into', parentId: 'simpsons' }]]);
+  });
+
+  test('every carried row is drawn lifted, contents included', () => {
+    const { container } = tree({
+      selectedIds: ['simpsons', 'travels'],
+      onSelectionChange: () => undefined,
+      onMoveMany: () => undefined,
+    });
+    dragTo(rowNamed('Travels'), 'Dinos');
+    const lifted = [...container.querySelectorAll('[data-dragged]')].map((r) =>
+      (r.textContent ?? '').trim(),
+    );
+    // `Simpsons` takes `screencaps` and `s04` with it — the union of what each row carries.
+    expect(lifted).toEqual(['Simpsons', 'screencaps', 's04', 'Travels']);
+  });
+
+  test('🔴 one illegal destination refuses the whole drop, rather than half-landing it', () => {
+    const moved: unknown[] = [];
+    const { container } = tree({
+      selectedIds: ['dinos', 'simpsons'],
+      onSelectionChange: () => undefined,
+      onMoveMany: (ids, drop) => moved.push([ids, drop]),
+    });
+    // `screencaps` is inside `Simpsons`, which is one of the two rows in the air.
+    dragTo(rowNamed('Dinos'), 'screencaps');
+    expect((container.querySelector('.cbft-chip') as HTMLElement).getAttribute('data-refused')).toBe(
+      'true',
+    );
+    expect(container.querySelector('.cbft-chip-where')?.textContent).toBe(
+      'A folder cannot go inside one of its own folders',
+    );
+    fireEvent.pointerUp(rowNamed('Dinos'), { pointerId: 1 });
+    expect(moved).toEqual([]);
+  });
+
+  test('pressing a row OUTSIDE the selection carries only that row', () => {
+    // Finder's rule, and the only one that lets you move a single row out of a group you have
+    // built without dismantling it first.
+    const many: unknown[] = [];
+    const one: Array<[string, unknown]> = [];
+    tree({
+      selectedIds: ['dinos', 'travels'],
+      onSelectionChange: () => undefined,
+      onMove: (id, drop) => one.push([id, drop]),
+      onMoveMany: (ids) => many.push(ids),
+    });
+    dragTo(rowNamed('screencaps'), 'Dinos');
+    fireEvent.pointerUp(rowNamed('screencaps'), { pointerId: 1 });
+    expect(many).toEqual([]);
+    expect(one).toEqual([['simpsons/screencaps', { kind: 'into', parentId: 'dinos' }]]);
+  });
+
+  test('🔴 without `onMoveMany` the drag is the one row it started on, exactly as before', () => {
+    // The rule that keeps every existing consumer still: N > 1 goes through the plural verb,
+    // and without it the gesture never invents a batch nobody can receive.
+    const one: Array<[string, unknown]> = [];
+    tree({
+      selectedIds: ['dinos', 'travels'],
+      onSelectionChange: () => undefined,
+      onMove: (id, drop) => one.push([id, drop]),
+    });
+    dragTo(rowNamed('Travels'), 'Simpsons');
+    fireEvent.pointerUp(rowNamed('Travels'), { pointerId: 1 });
+    expect(one).toEqual([['travels', { kind: 'into', parentId: 'simpsons' }]]);
+  });
+
+  test('🔴 one undraggable row in the set stops the gesture — all or nothing', () => {
+    // A drag that moved four of five rows and said nothing is the failure the plural drop rule
+    // exists to prevent, and it is no better for arriving at the start of the gesture.
+    // `apps/collections` marks its albums `draggable: false`.
+    const moved: unknown[] = [];
+    const nodes: FileTreeNode[] = [
+      { id: 'album', name: 'Album', kind: 'folder', draggable: false, children: [] },
+      folder('dinos', 'Dinos'),
+      folder('travels', 'Travels'),
+    ];
+    const { container } = render(
+      <FileTree
+        nodes={nodes}
+        selectedId={null}
+        selectedIds={['dinos', 'album']}
+        onSelect={() => undefined}
+        onSelectionChange={() => undefined}
+        onMoveMany={(ids) => moved.push(ids)}
+      />,
+    );
+    dragTo(screen.getByText('Dinos').closest('[role="treeitem"]') as HTMLElement, 'Travels');
+    expect(container.querySelector('.cbft-chip')).toBeNull();
+    expect(moved).toEqual([]);
+  });
+});
+
+describe('deleting a selection', () => {
+  const focusRow = (name: string) => {
+    const row = screen.getByText(name).closest('[role="treeitem"]') as HTMLElement;
+    row.focus();
+    return row;
+  };
+
+  test('🔴 ⌘⌫ on a selection deletes all of it', () => {
+    // *"I also want to be able to hold command and click delete to delete all the selected
+    // files."* It arrives as Backspace WITH metaKey.
+    const many: string[][] = [];
+    const one: string[] = [];
+    tree({
+      selectedIds: ['dinos', 'travels'],
+      onSelectionChange: () => undefined,
+      onDelete: (n) => one.push(n.id),
+      onDeleteMany: (nodes) => many.push(nodes.map((n) => n.id)),
+    });
+    fireEvent.keyDown(focusRow('Dinos'), { key: 'Backspace', metaKey: true });
+    expect(many).toEqual([['dinos', 'travels']]);
+    // Never both — a row deleted twice is a confirmation dialog asked twice.
+    expect(one).toEqual([]);
+  });
+
+  test('a folder and a file inside it ask for ONE deletion, not two', () => {
+    const many: string[][] = [];
+    tree({
+      selectedIds: ['simpsons', 'simpsons/screencaps/s04'],
+      onSelectionChange: () => undefined,
+      onDeleteMany: (nodes) => many.push(nodes.map((n) => n.id)),
+    });
+    fireEvent.keyDown(focusRow('Simpsons'), { key: 'Delete' });
+    expect(many).toEqual([['simpsons']]);
+  });
+
+  test('🔴 without `onDeleteMany` it is the focused row alone — today’s behaviour, kept', () => {
+    const one: string[] = [];
+    tree({
+      selectedIds: ['dinos', 'travels'],
+      onSelectionChange: () => undefined,
+      onDelete: (n) => one.push(n.id),
+    });
+    fireEvent.keyDown(focusRow('Dinos'), { key: 'Backspace', metaKey: true });
+    expect(one).toEqual(['dinos']);
+  });
+
+  test('a focused row OUTSIDE the selection is the only thing the key means', () => {
+    const many: unknown[] = [];
+    const one: string[] = [];
+    tree({
+      selectedIds: ['dinos', 'travels'],
+      onSelectionChange: () => undefined,
+      onDelete: (n) => one.push(n.id),
+      onDeleteMany: (nodes) => many.push(nodes.map((n) => n.id)),
+    });
+    fireEvent.keyDown(focusRow('screencaps'), { key: 'Backspace', metaKey: true });
+    expect(many).toEqual([]);
+    expect(one).toEqual(['simpsons/screencaps']);
+  });
+});
+
+/**
+ * ⌘X / ⌘C / ⌘V — *"cut and paste to move them with command + x and command + v, and copy them
+ * with command + c and command + v. Copying should allow copying in another folder or the same
+ * folder. These are similar to how finder works except cutting and pasting will be easy with
+ * just command + x."*
+ */
+describe('the clipboard', () => {
+  const focusRow = (name: string) => {
+    const row = screen.getByText(name).closest('[role="treeitem"]') as HTMLElement;
+    row.focus();
+    return row;
+  };
+
+  test('🔴 ⌘X marks the rows, and ⌘V moves them into the focused row', () => {
+    const moved: Array<[readonly string[], unknown]> = [];
+    const { container } = tree({
+      selectedIds: ['dinos', 'travels'],
+      onSelectionChange: () => undefined,
+      onMoveMany: (ids, drop) => moved.push([ids, drop]),
+    });
+    fireEvent.keyDown(focusRow('Dinos'), { key: 'x', metaKey: true });
+    // A cut with no mark is a keystroke that appears to have done nothing — so the next thing
+    // a person does is press it again somewhere else, and then ⌘V moves the wrong rows.
+    expect([...container.querySelectorAll('[data-cut]')].map((r) => (r.textContent ?? '').trim())).toEqual(
+      ['Dinos', 'Travels'],
+    );
+    fireEvent.keyDown(focusRow('Simpsons'), { key: 'v', metaKey: true });
+    expect(moved).toEqual([[['dinos', 'travels'], { kind: 'into', parentId: 'simpsons' }]]);
+    // Consumed: the rows have moved, and a second paste would move them again from wherever
+    // they now are.
+    expect(container.querySelectorAll('[data-cut]')).toHaveLength(0);
+  });
+
+  test('🔴 a paste the drag would refuse is refused, in the same words', () => {
+    // One opinion about what is legal. A keyboard route that reaches a destination the pointer
+    // refuses is the second, weaker opinion nobody looks at.
+    const moved: unknown[] = [];
+    const { container } = tree({ onMove: (id) => moved.push(id) });
+    fireEvent.keyDown(focusRow('Simpsons'), { key: 'x', metaKey: true });
+    fireEvent.keyDown(focusRow('s04'), { key: 'v', metaKey: true });
+    expect(moved).toEqual([]);
+    expect(container.querySelector('.cbft-sr')?.textContent).toBe(
+      'A folder cannot go inside one of its own folders',
+    );
+  });
+
+  test('Escape puts a cut down, so the mark is never stuck on', () => {
+    const { container } = tree({ onMove: () => undefined });
+    fireEvent.keyDown(focusRow('Dinos'), { key: 'x', metaKey: true });
+    expect(container.querySelectorAll('[data-cut]')).toHaveLength(1);
+    fireEvent.keyDown(focusRow('Dinos'), { key: 'Escape' });
+    expect(container.querySelectorAll('[data-cut]')).toHaveLength(0);
+  });
+
+  test('🔴 ⌘C then ⌘V copies, and the clipboard SURVIVES the paste', () => {
+    // Finder pastes the same copy again, and *"copying in another folder or the same folder"*
+    // is two pastes of one ⌘C.
+    const copied: Array<[readonly string[], unknown]> = [];
+    tree({
+      selectedIds: ['dinos', 'travels'],
+      onSelectionChange: () => undefined,
+      onCopy: (ids, drop) => copied.push([ids, drop]),
+    });
+    fireEvent.keyDown(focusRow('Dinos'), { key: 'c', metaKey: true });
+    fireEvent.keyDown(focusRow('Simpsons'), { key: 'v', metaKey: true });
+    fireEvent.keyDown(focusRow('screencaps'), { key: 'v', metaKey: true });
+    expect(copied).toEqual([
+      [['dinos', 'travels'], { kind: 'into', parentId: 'simpsons' }],
+      [['dinos', 'travels'], { kind: 'into', parentId: 'simpsons/screencaps' }],
+    ]);
+  });
+
+  test('🔴 `canCopy` vetoes the take, not the paste — apps/music has nothing to duplicate', () => {
+    // A folder there is derived from the `folder` column of the tracks in it, so copying one
+    // would mean duplicating audio the owner has exactly one copy of. A refusal after ⌘V
+    // would be a refusal with nothing left to say it about.
+    const copied: unknown[] = [];
+    const { container } = tree({
+      onCopy: (ids) => copied.push(ids),
+      canCopy: (node) => (node.kind === 'folder' ? 'A folder here is derived, not a copy' : null),
+    });
+    fireEvent.keyDown(focusRow('Dinos'), { key: 'c', metaKey: true });
+    expect(container.querySelector('.cbft-sr')?.textContent).toBe(
+      'A folder here is derived, not a copy',
+    );
+    expect(container.querySelectorAll('[data-cut]')).toHaveLength(0);
+    fireEvent.keyDown(focusRow('Simpsons'), { key: 'v', metaKey: true });
+    expect(copied).toEqual([]);
+  });
+
+  test('🔴 a key with no verb behind it is not this tree’s key at all', () => {
+    // No `onCopy` and ⌘C is not a chord this component has — the event falls through to the
+    // browser rather than being swallowed by a control that would do nothing with it.
+    const cut = tree({ onCopy: undefined });
+    const row = focusRow('Dinos');
+    const copyEvent = new KeyboardEvent('keydown', {
+      key: 'c',
+      metaKey: true,
+      bubbles: true,
+      cancelable: true,
+    });
+    row.dispatchEvent(copyEvent);
+    expect(copyEvent.defaultPrevented).toBe(false);
+    // …and with no move verb either, neither is ⌘X.
+    const cutEvent = new KeyboardEvent('keydown', {
+      key: 'x',
+      metaKey: true,
+      bubbles: true,
+      cancelable: true,
+    });
+    row.dispatchEvent(cutEvent);
+    expect(cutEvent.defaultPrevented).toBe(false);
+    expect(cut.container.querySelectorAll('[data-cut]')).toHaveLength(0);
+  });
+});
+
+/**
+ * ⌃⌘N — *"allow make dir from file where dir wraps file location and gets name of file"*.
+ *
+ * Its own fixture, with real FILES in it: `TREE` above is all folders, and an extension is
+ * half of what this gesture is about.
+ */
+describe('New Folder with Selection', () => {
+  const file = (id: string, name: string): FileTreeNode => ({ id, name, kind: 'file' });
+  /**
+   *   Trips/
+   *     beach.jpg
+   *     alps.png
+   *   .gitignore
+   */
+  const WRAP_TREE: FileTreeNode[] = [
+    folder('trips', 'Trips', [file('trips/beach', 'beach.jpg'), file('trips/alps', 'alps.png')]),
+    file('dotfile', '.gitignore'),
+  ];
+
+  const wrapTree = (props: Partial<React.ComponentProps<typeof FileTree>> = {}) =>
+    render(
+      <FileTree nodes={WRAP_TREE} selectedId={null} onSelect={() => undefined} {...props} />,
+    );
+
+  const focusRow = (name: string) => {
+    const row = screen.getByText(name).closest('[role="treeitem"]') as HTMLElement;
+    row.focus();
+    return row;
+  };
+
+  test('🔴 ⌃⌘N asks for a folder WHERE THE FILE IS, around the row it was pressed on', () => {
+    const asked: Array<[string[], string | null]> = [];
+    wrapTree({ onWrapStart: (nodes, parentId) => asked.push([nodes.map((n) => n.id), parentId]) });
+    fireEvent.keyDown(focusRow('beach.jpg'), { key: 'n', ctrlKey: true, metaKey: true });
+    // Not the root, not inside the selection: the folder is made in `beach.jpg`'s own parent.
+    expect(asked).toEqual([[['trips/beach'], 'trips']]);
+  });
+
+  test('🔴 the draft opens PRE-FILLED with the name minus its extension, and selected', () => {
+    wrapTree({
+      draft: { parentId: 'trips', wrap: ['trips/beach'] },
+      onDraftCommit: () => undefined,
+    });
+    const field = screen.getByLabelText('Name') as HTMLInputElement;
+    expect(field.value).toBe('beach');
+    // Selected, so one keystroke replaces the suggestion instead of appending to it.
+    fireEvent.focus(field);
+    expect([field.selectionStart, field.selectionEnd]).toEqual([0, 'beach'.length]);
+  });
+
+  test('🔴 committing makes the folder AND re-files the ids in ONE call', () => {
+    // Two round trips is how a folder ends up made, empty, and named after a file still
+    // sitting outside it — so there is exactly one callback and it carries both.
+    const made: Array<[string, readonly string[] | undefined]> = [];
+    wrapTree({
+      draft: { parentId: 'trips', wrap: ['trips/beach'] },
+      onDraftCommit: (name, wrap) => made.push([name, wrap]),
+    });
+    // Enter on the SUGGESTION, unchanged — which is the person agreeing with it, not
+    // cancelling. An unchanged RENAME still cancels; see the rename spec above.
+    fireEvent.keyDown(screen.getByLabelText('Name'), { key: 'Enter' });
+    expect(made).toEqual([['beach', ['trips/beach']]]);
+  });
+
+  test('🔴 a multi-wrap is named after the FIRST IN TREE ORDER, whatever order it was built', () => {
+    const made: Array<[string, readonly string[] | undefined]> = [];
+    wrapTree({
+      // Clicked bottom-up, which is an ordinary way to build a selection.
+      draft: { parentId: 'trips', wrap: ['trips/alps', 'trips/beach'] },
+      onDraftCommit: (name, wrap) => made.push([name, wrap]),
+    });
+    const field = screen.getByLabelText('Name') as HTMLInputElement;
+    expect(field.value).toBe('beach');
+    fireEvent.keyDown(field, { key: 'Enter' });
+    expect(made).toEqual([['beach', ['trips/beach', 'trips/alps']]]);
+  });
+
+  test('a name that is all extension keeps the whole string', () => {
+    wrapTree({ draft: { parentId: null, wrap: ['dotfile'] }, onDraftCommit: () => undefined });
+    expect((screen.getByLabelText('Name') as HTMLInputElement).value).toBe('.gitignore');
+  });
+
+  test('typing over the suggestion is what is committed, and Escape still cancels', () => {
+    const made: string[] = [];
+    let cancels = 0;
+    wrapTree({
+      draft: { parentId: 'trips', wrap: ['trips/beach'] },
+      onDraftCommit: (name) => made.push(name),
+      onDraftCancel: () => {
+        cancels += 1;
+      },
+    });
+    const field = screen.getByLabelText('Name') as HTMLInputElement;
+    fireEvent.change(field, { target: { value: 'Beach day' } });
+    fireEvent.keyDown(field, { key: 'Enter' });
+    expect(made).toEqual(['Beach day']);
+    fireEvent.keyDown(screen.getByLabelText('Name'), { key: 'Escape' });
+    expect(cancels).toBe(1);
+  });
+
+  test('🔴 `canWrap` refuses BEFORE the draft opens — a tree of derived folders makes none', () => {
+    // The refusal has to arrive while there is still something to say it about. After a name
+    // has been typed it is a refusal aimed at somebody who has already done the work.
+    const asked: unknown[] = [];
+    const { container } = wrapTree({
+      onWrapStart: (nodes) => asked.push(nodes.map((n) => n.id)),
+      canWrap: () => 'Folders here are derived from the tracks',
+    });
+    fireEvent.keyDown(focusRow('beach.jpg'), { key: 'n', ctrlKey: true, metaKey: true });
+    expect(asked).toEqual([]);
+    expect(container.querySelector('.cbft-sr')?.textContent).toBe(
+      'Folders here are derived from the tracks',
+    );
+  });
+
+  test('a row that cannot be dragged cannot be wrapped either — wrapping MOVES it', () => {
+    const asked: unknown[] = [];
+    const { container } = render(
+      <FileTree
+        nodes={[{ id: 'album', name: 'Simpsons', kind: 'folder', draggable: false }]}
+        selectedId={null}
+        onSelect={() => undefined}
+        onWrapStart={(nodes) => asked.push(nodes.map((n) => n.id))}
+      />,
+    );
+    fireEvent.keyDown(focusRow('Simpsons'), { key: 'n', ctrlKey: true, metaKey: true });
+    expect(asked).toEqual([]);
+    // Said out loud: a chord that silently does nothing reads as a broken control.
+    expect(container.querySelector('.cbft-sr')?.textContent).toBe('Simpsons cannot be moved');
+  });
+
+  test('🔴 a consumer wiring none of it sees no new control and no new argument', () => {
+    // The compatibility rule this component has held since multi-select: a gesture nobody
+    // wired is not a gesture this tree has.
+    const commit = jest.fn();
+    const plain = tree({ draft: { parentId: 'simpsons' }, onDraftCommit: commit });
+    const row = screen.getByText('Dinos').closest('[role="treeitem"]') as HTMLElement;
+    row.focus();
+    const chord = new KeyboardEvent('keydown', {
+      key: 'n',
+      ctrlKey: true,
+      metaKey: true,
+      bubbles: true,
+      cancelable: true,
+    });
+    row.dispatchEvent(chord);
+    // Not swallowed: with no `onWrapStart` this is not a chord this component has, and the
+    // event belongs to whatever the app around it bound.
+    expect(chord.defaultPrevented).toBe(false);
+    expect(plain.container.querySelector('.cbft-row-draft')).not.toBeNull();
+
+    const field = screen.getByLabelText('Name') as HTMLInputElement;
+    // An ordinary draft still opens EMPTY — there is nothing for it to be named after.
+    expect(field.value).toBe('');
+    fireEvent.change(field, { target: { value: 'posters' } });
+    fireEvent.keyDown(field, { key: 'Enter' });
+    // One argument, exactly as before `wrap` existed.
+    expect(commit.mock.calls).toEqual([['posters']]);
+  });
+});
+
 describe('what a screen reader is told about the level', () => {
   test('a row says its position AND the size of its level', () => {
     tree();
@@ -818,3 +1604,226 @@ describe('what a screen reader is told about the level', () => {
     expect(nested.getAttribute('aria-setsize')).toBe('1');
   });
 });
+
+/**
+ * ── Pinned rows ───────────────────────────────────────────────────────────────────────────
+ *
+ * Owner, 2026-09-13: *"need … ability to pin open files where they stay at the top of the file
+ * tree in a new section above the folders. Pinned will mean I want to keep them there until I
+ * unpin them … They still will exist in the folder they were stored in and unpinning takes it
+ * back to normal. Pinning or unpinning one place doesn't change pinning in the other place."*
+ *
+ * The two requirements a quick implementation loses are the two this block spends most of its
+ * assertions on: the row is drawn TWICE (a section, not a sort order), and the state is the
+ * consumer's, which is the whole of "one place doesn't change the other".
+ */
+describe('pinned rows', () => {
+  const pinnedTree = () => screen.getByRole('tree', { name: 'Pinned' });
+  const fileTree = () => screen.getByRole('tree', { name: 'Files' });
+  const rowsOf = (list: HTMLElement) => [...list.querySelectorAll('.cbft-row')] as HTMLElement[];
+  const named = (list: HTMLElement) =>
+    rowsOf(list).map((row) => row.querySelector('.cbft-name')?.textContent ?? '');
+
+  test('🔴 a pinned row is drawn in a section ABOVE the folders AND still where it lives', () => {
+    // *"in a new section above the folders"* and *"they still will exist in the folder they
+    // were stored in"* — the second clause is what makes this a section rather than a sort.
+    const { container } = tree({ pinnedIds: ['dinos'] });
+
+    const lists = [...container.querySelectorAll('[role="tree"]')] as HTMLElement[];
+    expect(lists).toHaveLength(2);
+    expect(lists[0]?.getAttribute('aria-label')).toBe('Pinned');
+    expect(lists[1]?.getAttribute('aria-label')).toBe('Files');
+
+    // The very first row in the component, above every folder.
+    expect(named(pinnedTree())).toEqual(['Dinos']);
+    expect((rowsOf(container as unknown as HTMLElement)[0] as HTMLElement).dataset.pinnedCopy).toBe(
+      'true',
+    );
+    // …and the tree below is the tree it always was, `Dinos` in its own place among them.
+    expect(named(fileTree())).toEqual(['Simpsons', 'screencaps', 's04', 'Dinos', 'Travels']);
+    // Two rows, one node: the copy is addressed separately and the identity is shared.
+    expect(screen.getAllByText('Dinos')).toHaveLength(2);
+  });
+
+  test('🔴 a pin reaches a row inside a SHUT folder — which is what it is for', () => {
+    // The pinned section is derived from the TREE, not from the rows on screen. A pin whose
+    // folder is closed is the ordinary case (that is why somebody pinned it), so building the
+    // section off `rows` would make the feature work only where it is not needed.
+    tree({ pinnedIds: ['simpsons/screencaps/s04'], collapsed: ['simpsons'] });
+    expect(named(pinnedTree())).toEqual(['s04']);
+    expect(named(fileTree())).toEqual(['Simpsons', 'Dinos', 'Travels']);
+  });
+
+  test('a pinned copy is drawn FLAT — no depth, no twisty, level 1', () => {
+    // It is a list of shortcuts, not a second hierarchy beside the first one.
+    tree({ pinnedIds: ['simpsons'] });
+    const copy = rowsOf(pinnedTree())[0] as HTMLElement;
+    expect(copy.getAttribute('aria-level')).toBe('1');
+    expect(copy.style.getPropertyValue('--cbft-depth')).toBe('0');
+    expect(copy.querySelector('.cbft-twisty')).toBeNull();
+    // The real row keeps both — a pin changes nothing about the row in the folder.
+    const real = rowsOf(fileTree())[0] as HTMLElement;
+    expect(real.getAttribute('aria-level')).toBe('1');
+    expect(real.querySelector('.cbft-twisty')).not.toBeNull();
+  });
+
+  test('🔴 the aria counts of the tree are UNCHANGED by a pin', () => {
+    // The trap: `aria-setsize` is computed from the rows on screen, on the assumption that
+    // every sibling of a visible row is itself visible. Folding pins into that row list makes
+    // the counts wrong for EVERY row in the tree, not only for the pinned ones — which is why
+    // the section is its own `role='tree'` with counts of its own.
+    tree({ pinnedIds: ['dinos', 'travels'] });
+    const inTree = (name: string) =>
+      rowsOf(fileTree()).find((row) => row.textContent?.includes(name)) as HTMLElement;
+    expect(inTree('Dinos').getAttribute('aria-posinset')).toBe('2');
+    expect(inTree('Dinos').getAttribute('aria-setsize')).toBe('3');
+    expect(inTree('screencaps').getAttribute('aria-posinset')).toBe('1');
+    expect(inTree('screencaps').getAttribute('aria-setsize')).toBe('1');
+    // And the section counts ITSELF: two pins, positions one and two.
+    const pins = rowsOf(pinnedTree());
+    expect(pins.map((row) => row.getAttribute('aria-posinset'))).toEqual(['1', '2']);
+    expect(pins.map((row) => row.getAttribute('aria-setsize'))).toEqual(['2', '2']);
+  });
+
+  test('the pin control reports the whole next list, and appends rather than resorts', () => {
+    const asked: string[][] = [];
+    tree({ pinnedIds: ['travels'], onPinnedChange: (next) => asked.push(next) });
+    fireEvent.click(screen.getByRole('button', { name: 'Pin Dinos' }));
+    // Appended: the section keeps the order it was built in rather than being resorted under
+    // somebody who arranged it.
+    expect(asked).toEqual([['travels', 'dinos']]);
+  });
+
+  test('🔴 unpinning removes ONLY the top copy, and leaves nothing behind', () => {
+    // *"unpinning takes it back to normal"* — the row in the folder is the row it always was,
+    // byte for byte the tree a consumer that never pinned anything sees.
+    const asked: string[][] = [];
+    const pinned = tree({ pinnedIds: ['dinos'], onPinnedChange: (next) => asked.push(next) });
+    // The control on the TOP copy — two rows carry an "Unpin Dinos" button, and pressing
+    // either is the same act on the same node.
+    const [top] = screen.getAllByRole('button', { name: 'Unpin Dinos' });
+    fireEvent.click(top as HTMLElement);
+    expect(asked).toEqual([[]]);
+
+    pinned.rerender(
+      <FileTree
+        nodes={TREE}
+        selectedId={null}
+        onSelect={() => undefined}
+        pinnedIds={[]}
+        onPinnedChange={(next) => asked.push(next)}
+      />,
+    );
+    expect(screen.queryByRole('tree', { name: 'Pinned' })).toBeNull();
+    expect(screen.getAllByText('Dinos')).toHaveLength(1);
+    expect(named(fileTree())).toEqual(['Simpsons', 'screencaps', 's04', 'Dinos', 'Travels']);
+  });
+
+  test('🔴 a pinned FOLDER still takes a drop, and it lands in the REAL folder', () => {
+    /*
+     * happy-dom computes no layout, so the POINTER drag cannot be exercised here at all (see
+     * this file's header) — `rowAt` hit-tests against rects that are all zeros. The external
+     * drag is the one drop path that is real DOM and needs no layout, and it answers the same
+     * question: the pinned copy is a live drop target, and what it reports is the node itself
+     * rather than some shadow of it. The pointer half resolves through the very same
+     * `FileTreeRow`, which carries the row's real `parentId`.
+     */
+    const drops: (string | null)[] = [];
+    tree({ pinnedIds: ['dinos'], onDropExternal: (node) => drops.push(node?.id ?? null) });
+    const copy = rowsOf(pinnedTree())[0] as HTMLElement;
+    fireEvent.dragOver(copy);
+    expect(copy.getAttribute('data-into')).toBe('true');
+    // Both copies light up, because there is one folder and the drag is over it.
+    const real = rowsOf(fileTree()).find((row) => row.textContent?.includes('Dinos')) as HTMLElement;
+    expect(real.getAttribute('data-into')).toBe('true');
+    fireEvent.drop(copy);
+    expect(drops).toEqual(['dinos']);
+  });
+
+  test('⌃⌘T pins the focused row, and pins the row in the folder just the same', () => {
+    // Finder's own Add to Sidebar chord, anchored on Ctrl so ⌃T works on the Windows and
+    // Linux hosts this tree also runs on — the rule ⌃⌘N already follows.
+    const asked: string[][] = [];
+    tree({ onPinnedChange: (next) => asked.push(next) });
+    const row = screen.getByText('Travels').closest('[role="treeitem"]') as HTMLElement;
+    row.focus();
+    fireEvent.keyDown(row, { key: 't', ctrlKey: true, metaKey: true });
+    expect(asked).toEqual([['travels']]);
+  });
+
+  test('🔴 exactly ONE copy draws the rename field', () => {
+    // `renamingId` names a node, and a pinned node is two rows — the naive test opens two
+    // autofocused inputs sharing one accessible name. The tree's copy wins while it exists.
+    const { container } = tree({
+      pinnedIds: ['dinos'],
+      renamingId: 'dinos',
+      onRename: () => undefined,
+    });
+    expect(container.querySelectorAll('.cbft-name-input')).toHaveLength(1);
+    expect(rowsOf(fileTree()).some((row) => row.querySelector('.cbft-name-input'))).toBe(true);
+  });
+
+  test('🔴 …and the PINNED copy draws it when the real row is inside a shut folder', () => {
+    // Otherwise a rename started from the section opens nowhere at all, which is the "control
+    // that silently does nothing" this component refuses everywhere else.
+    const { container } = tree({
+      pinnedIds: ['simpsons/screencaps/s04'],
+      collapsed: ['simpsons'],
+      renamingId: 'simpsons/screencaps/s04',
+      onRename: () => undefined,
+    });
+    expect(container.querySelectorAll('.cbft-name-input')).toHaveLength(1);
+    expect(rowsOf(pinnedTree()).some((row) => row.querySelector('.cbft-name-input'))).toBe(true);
+  });
+
+  test('a pin the tree no longer holds is simply not drawn', () => {
+    // A selection outlives a refresh and so does a pin: the server re-derives the tree between
+    // a pin and a render, and a ghost row nothing can be done with is worse than an absent one.
+    tree({ pinnedIds: ['dinos', 'gone-yesterday'] });
+    expect(named(pinnedTree())).toEqual(['Dinos']);
+  });
+
+  test('the section takes the consumer’s own word for it', () => {
+    // The mechanism is general and the vocabulary is not — the same reason `accessCopy` exists.
+    tree({ pinnedIds: ['dinos'], pinnedLabel: 'Favourites' });
+    expect(screen.getByRole('tree', { name: 'Favourites' })).toBeDefined();
+    expect(screen.getByText('Favourites')).toBeDefined();
+  });
+
+  test('🔴 a consumer wiring none of it sees byte-for-byte its current tree', () => {
+    /*
+     * The compatibility assertion this component has held since multi-select, and the one
+     * `tasks/Completed/119-*.md` established for this file: a gesture nobody wired is not a
+     * gesture this tree has. An empty `pinnedIds` and a label are both inert — no section, no
+     * control, no chord, and not one attribute of difference in the markup.
+     */
+    const plain = render(
+      <FileTree nodes={TREE} selectedId={null} onSelect={() => undefined} />,
+    );
+    const withPins = render(
+      <FileTree
+        nodes={TREE}
+        selectedId={null}
+        onSelect={() => undefined}
+        pinnedIds={[]}
+        pinnedLabel='Favourites'
+      />,
+    );
+    expect(withPins.container.innerHTML).toBe(plain.container.innerHTML);
+    expect(plain.container.querySelector('.cbft-pin')).toBeNull();
+
+    // And ⌃⌘T is not swallowed: with no `onPinnedChange` this is not a chord this component
+    // has, and the event belongs to whatever the app around it bound.
+    const row = plain.container.querySelector('[role="treeitem"]') as HTMLElement;
+    row.focus();
+    const chord = new KeyboardEvent('keydown', {
+      key: 't',
+      ctrlKey: true,
+      metaKey: true,
+      bubbles: true,
+      cancelable: true,
+    });
+    row.dispatchEvent(chord);
+    expect(chord.defaultPrevented).toBe(false);
+  });
+});