@bendyline/squisq-editor-react 1.6.2 → 2.0.1

package/src/treeview/__tests__/TreeOutlineWidget.test.tsx

@@ -0,0 +1,156 @@
+import { Editor } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
+import { cleanup, createEvent, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
+import { parseTree } from '@bendyline/squisq/doc';
+import { markdownToTiptap } from '../../tiptapBridge';
+import { HeadingWithTemplate } from '../../TemplateAnnotation';
+import { TreeOutlineWidget } from '../TreeOutlineWidget';
+import { TREEVIEW_KEY, TreeViewExtension } from '../TreeViewExtension';
+
+const ART = ['src/', '├── index.ts', '├── utils/', '│   └── math.ts', '└── config.ts'].join('\n');
+
+const editors: Editor[] = [];
+
+beforeAll(() => {
+  if (typeof globalThis.ResizeObserver !== 'undefined') return;
+  class ResizeObserverStub {
+    observe(): void {}
+    unobserve(): void {}
+    disconnect(): void {}
+  }
+  globalThis.ResizeObserver = ResizeObserverStub as unknown as typeof ResizeObserver;
+});
+
+afterEach(() => {
+  cleanup();
+  for (const editor of editors) editor.destroy();
+  editors.length = 0;
+});
+
+function makeEditor(): Editor {
+  const editor = new Editor({
+    extensions: [
+      StarterKit.configure({
+        heading: false,
+        codeBlock: { HTMLAttributes: { class: 'squisq-code-block' } },
+      }),
+      HeadingWithTemplate.configure({ levels: [1, 2, 3, 4, 5, 6] }),
+      TreeViewExtension,
+    ],
+    content: markdownToTiptap(`\`\`\`tree\n${ART}\n\`\`\`\n`),
+  });
+  editors.push(editor);
+  return editor;
+}
+
+function blockIdOf(editor: Editor): string {
+  const entries = TREEVIEW_KEY.getState(editor.state)?.entries ?? [];
+  expect(entries).toHaveLength(1);
+  return entries[0].id;
+}
+
+function treeOf(editor: Editor) {
+  let text = '';
+  editor.state.doc.descendants((node) => {
+    if (node.type.name !== 'codeBlock') return true;
+    text = node.textContent;
+    return false;
+  });
+  return parseTree(text);
+}
+
+function renderWidget(): Editor {
+  const editor = makeEditor();
+  render(<TreeOutlineWidget editor={editor} blockId={blockIdOf(editor)} fallbackPos={0} />);
+  return editor;
+}
+
+function makeDataTransfer(): DataTransfer {
+  const values = new Map<string, string>();
+  return {
+    effectAllowed: 'uninitialized',
+    dropEffect: 'none',
+    setData: vi.fn((type: string, value: string) => values.set(type, value)),
+    getData: vi.fn((type: string) => values.get(type) ?? ''),
+    get types() {
+      return [...values.keys()];
+    },
+  } as unknown as DataTransfer;
+}
+
+function rowFor(label: string): HTMLElement {
+  const input = screen.getByDisplayValue(label);
+  const row = input.closest<HTMLElement>('.squisq-tree-row');
+  expect(row).not.toBeNull();
+  return row as HTMLElement;
+}
+
+function setRowRect(row: HTMLElement): void {
+  vi.spyOn(row, 'getBoundingClientRect').mockReturnValue({
+    x: 0,
+    y: 0,
+    top: 0,
+    right: 300,
+    bottom: 30,
+    left: 0,
+    width: 300,
+    height: 30,
+    toJSON: () => ({}),
+  });
+}
+
+function fireDragAt(
+  type: 'dragOver' | 'drop',
+  row: HTMLElement,
+  transfer: DataTransfer,
+  clientY: number,
+): void {
+  const event = createEvent[type](row, { dataTransfer: transfer });
+  Object.defineProperty(event, 'clientY', { value: clientY });
+  fireEvent(row, event);
+}
+
+describe('TreeOutlineWidget drag and drop', () => {
+  it('drops before a row to reorder siblings', async () => {
+    const editor = renderWidget();
+    const indexRow = rowFor('index.ts');
+    const transfer = makeDataTransfer();
+
+    fireEvent.dragStart(screen.getByTitle('Drag config.ts to move'), { dataTransfer: transfer });
+    setRowRect(indexRow);
+    expect(transfer.effectAllowed).toBe('move');
+    fireDragAt('dragOver', indexRow, transfer, 1);
+    expect(indexRow.closest('.squisq-tree-item')?.classList).toContain(
+      'squisq-tree-item--drop-before',
+    );
+    fireDragAt('drop', indexRow, transfer, 1);
+
+    await waitFor(() =>
+      expect(treeOf(editor).roots[0].children.map((node) => node.label)).toEqual([
+        'config.ts',
+        'index.ts',
+        'utils/',
+      ]),
+    );
+  });
+
+  it('drops onto the middle of a row to indent as its last child', async () => {
+    const editor = renderWidget();
+    const utilsRow = rowFor('utils/');
+    const transfer = makeDataTransfer();
+
+    fireEvent.dragStart(screen.getByTitle('Drag config.ts to move'), { dataTransfer: transfer });
+    setRowRect(utilsRow);
+    fireDragAt('dragOver', utilsRow, transfer, 15);
+    expect(utilsRow.closest('.squisq-tree-item')?.classList).toContain(
+      'squisq-tree-item--drop-child',
+    );
+    fireDragAt('drop', utilsRow, transfer, 15);
+
+    await waitFor(() => {
+      const utils = treeOf(editor).roots[0].children.find((node) => node.label === 'utils/');
+      expect(utils?.children.map((node) => node.label)).toEqual(['math.ts', 'config.ts']);
+    });
+  });
+});

package/src/treeview/__tests__/TreeViewExtension.test.ts

@@ -0,0 +1,122 @@
+/**
+ * Registry / decoration behavior of TreeViewExtension + mutual exclusion
+ * with the diagram extension.
+ */
+
+import { Editor } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
+import { afterEach, beforeAll, describe, expect, it } from 'vitest';
+import { markdownToTiptap } from '../../tiptapBridge';
+import { HeadingWithTemplate } from '../../TemplateAnnotation';
+import { TreeViewExtension, TREEVIEW_KEY, findTreeBlockPos } from '../TreeViewExtension';
+import { AsciiDiagramExtension, ASCII_DIAGRAM_KEY } from '../../asciiDiagram/AsciiDiagramExtension';
+import { replaceAsciiFenceText } from '../../asciiDiagram/asciiDiagramCommands';
+
+beforeAll(() => {
+  if (typeof globalThis.ResizeObserver === 'undefined') {
+    class RO {
+      observe(): void {}
+      unobserve(): void {}
+      disconnect(): void {}
+    }
+    globalThis.ResizeObserver = RO as unknown as typeof ResizeObserver;
+  }
+});
+
+const TREE = ['src/', '├── a.ts', '└── sub/', '    └── b.ts'].join('\n');
+const TREE_B = ['docs/', '├── guide.md', '└── api.md'].join('\n');
+const DIAGRAM = [
+  '┌────────┐',
+  '│ Alpha  │',
+  '└───┬────┘',
+  '    ▼',
+  '┌────────┐',
+  '│ Beta   │',
+  '└────────┘',
+].join('\n');
+
+let editors: Editor[] = [];
+function makeEditor(md: string, options?: { enabled?: boolean }): Editor {
+  const editor = new Editor({
+    extensions: [
+      StarterKit.configure({
+        heading: false,
+        codeBlock: { HTMLAttributes: { class: 'squisq-code-block' } },
+      }),
+      HeadingWithTemplate.configure({ levels: [1, 2, 3, 4, 5, 6] }),
+      AsciiDiagramExtension,
+      options ? TreeViewExtension.configure(options) : TreeViewExtension,
+    ],
+    content: markdownToTiptap(md),
+  });
+  editors.push(editor);
+  return editor;
+}
+afterEach(() => {
+  for (const e of editors) e.destroy();
+  editors = [];
+});
+
+const treeEntries = (e: Editor) => TREEVIEW_KEY.getState(e.state)?.entries ?? [];
+const diagramEntries = (e: Editor) => ASCII_DIAGRAM_KEY.getState(e.state)?.entries ?? [];
+
+describe('TreeViewExtension registry', () => {
+  it('registers each qualifying tree fence with a distinct id', () => {
+    const editor = makeEditor('```\n' + TREE + '\n```\n\nMid.\n\n```\n' + TREE_B + '\n```\n');
+    const entries = treeEntries(editor);
+    expect(entries).toHaveLength(2);
+    expect(entries[0].id).not.toBe(entries[1].id);
+  });
+
+  it('ignores real-language and non-tree fences', () => {
+    const editor = makeEditor('```bash\n' + TREE + '\n```\n\n```\nplain code\nno tree\n```\n');
+    expect(treeEntries(editor)).toHaveLength(0);
+  });
+
+  it('mutual exclusion: a box diagram gets the diagram widget, not the tree', () => {
+    const editor = makeEditor('```\n' + DIAGRAM + '\n```\n');
+    expect(treeEntries(editor)).toHaveLength(0);
+    expect(diagramEntries(editor)).toHaveLength(1);
+  });
+
+  it('keeps ids stable when content above changes', () => {
+    const editor = makeEditor('First.\n\n```\n' + TREE + '\n```\n');
+    const [before] = treeEntries(editor);
+    editor.commands.insertContentAt(0, '<p>inserted</p>');
+    const [after] = treeEntries(editor);
+    expect(after.id).toBe(before.id);
+    expect(after.pos).toBeGreaterThan(before.pos);
+  });
+
+  it('keeps the id across a self-inflicted fence rewrite', () => {
+    const editor = makeEditor('```\n' + TREE + '\n```\n');
+    const [before] = treeEntries(editor);
+    expect(replaceAsciiFenceText(editor, before.pos, TREE.replace('a.ts', 'main.ts'))).toBe(true);
+    const [after] = treeEntries(editor);
+    expect(after.id).toBe(before.id);
+    expect(findTreeBlockPos(editor, before.id)).toBe(after.pos);
+  });
+
+  it('hysteresis: degraded to a single node still stays interactive', () => {
+    const editor = makeEditor('```\n' + TREE + '\n```\n');
+    const [entry] = treeEntries(editor);
+    replaceAsciiFenceText(editor, entry.pos, 'src/\n└── only.ts');
+    const after = treeEntries(editor);
+    expect(after).toHaveLength(1);
+    expect(after[0].id).toBe(entry.id);
+  });
+
+  it('drops a block whose fence is rewritten into a box diagram', () => {
+    const editor = makeEditor('```\n' + TREE + '\n```\n');
+    const [entry] = treeEntries(editor);
+    replaceAsciiFenceText(editor, entry.pos, DIAGRAM);
+    expect(treeEntries(editor)).toHaveLength(0);
+    // The diagram extension now owns the fence.
+    expect(diagramEntries(editor)).toHaveLength(1);
+  });
+
+  it('enabled: false disables the plugin', () => {
+    const editor = makeEditor('```\n' + TREE + '\n```\n', { enabled: false });
+    expect(TREEVIEW_KEY.getState(editor.state)).toBeUndefined();
+  });
+});

package/src/treeview/__tests__/treeOps.test.ts

@@ -0,0 +1,177 @@
+import { describe, expect, it } from 'vitest';
+import { parseTree, renderTree, type Tree, type TreeNode } from '@bendyline/squisq/doc';
+import {
+  addItemOp,
+  indentItemOp,
+  moveItemOp,
+  moveItemDownOp,
+  moveItemUpOp,
+  outdentItemOp,
+  removeItemOp,
+  renameItemOp,
+  sanitizeTreeLabel,
+  toggleDirOp,
+} from '../treeOps';
+
+function tree(art: string): Tree {
+  return parseTree(art);
+}
+function flat(t: Tree): string[] {
+  const out: string[] = [];
+  const walk = (ns: TreeNode[], d: number) => {
+    for (const n of ns) {
+      out.push(`${d}:${n.label}`);
+      walk(n.children, d + 1);
+    }
+  };
+  walk(t.roots, 0);
+  return out;
+}
+
+const BASE = ['root/', '├── a', '├── b/', '│   └── b1', '└── c'].join('\n');
+
+describe('sanitizeTreeLabel', () => {
+  it('strips connector glyphs and newlines', () => {
+    expect(sanitizeTreeLabel('a ├── b │ c\nd')).toBe('a b c d');
+  });
+});
+
+describe('treeOps', () => {
+  it('renameItemOp renames without mutating the input', () => {
+    const t = tree(BASE);
+    const next = renameItemOp(t, 'a', 'alpha');
+    expect(flat(next)).toContain('1:alpha');
+    expect(flat(t)).toContain('1:a'); // original untouched
+  });
+
+  it('addItemOp adds a child and a sibling', () => {
+    const child = addItemOp(tree(BASE), 'a', 'child', 'a1');
+    const aNode = child.roots[0].children.find((n) => n.label === 'a');
+    expect(aNode?.children.map((c) => c.label)).toEqual(['a1']);
+
+    const sib = addItemOp(tree(BASE), 'a', 'siblingAfter', 'a2');
+    expect(sib.roots[0].children.map((c) => c.label)).toEqual(['a', 'a2', 'b/', 'c']);
+  });
+
+  it('addItemOp with isDir adds a trailing-slash folder with a folder default name', () => {
+    // Explicit label gets a slash.
+    const named = addItemOp(tree(BASE), 'a', 'siblingAfter', 'assets', true);
+    const assets = named.roots[0].children.find((n) => n.label === 'assets/');
+    expect(assets?.isDir).toBe(true);
+
+    // Default name is a fresh `folderN/`.
+    const auto = addItemOp(tree(BASE), 'a', 'siblingAfter', undefined, true);
+    const folder = auto.roots[0].children.find((n) => n.label.startsWith('folder'));
+    expect(folder?.label).toBe('folder1/');
+    expect(folder?.isDir).toBe(true);
+  });
+
+  it('removeItemOp drops a node and its subtree', () => {
+    const next = removeItemOp(tree(BASE), 'b');
+    expect(flat(next)).toEqual(['0:root/', '1:a', '1:c']);
+  });
+
+  it('indentItemOp re-parents under the preceding sibling', () => {
+    const next = indentItemOp(tree(BASE), 'c'); // c indents under b/
+    expect(flat(next)).toEqual(['0:root/', '1:a', '1:b/', '2:b1', '2:c']);
+  });
+
+  it('indentItemOp is a no-op for the first sibling', () => {
+    const t = tree(BASE);
+    expect(indentItemOp(t, 'a')).toBe(t);
+  });
+
+  it('outdentItemOp promotes a node to a sibling of its parent (subtree carried)', () => {
+    const next = outdentItemOp(tree(BASE), 'b1'); // b1 outdents next to b/
+    expect(flat(next)).toEqual(['0:root/', '1:a', '1:b/', '1:b1', '1:c']);
+  });
+
+  it('outdentItemOp is a no-op for a root', () => {
+    const t = tree(BASE);
+    expect(outdentItemOp(t, 'root')).toBe(t);
+  });
+
+  it('moveItemOp reorders siblings before or after a target', () => {
+    expect(flat(moveItemOp(tree(BASE), 'c', 'a', 'before'))).toEqual([
+      '0:root/',
+      '1:c',
+      '1:a',
+      '1:b/',
+      '2:b1',
+    ]);
+    expect(flat(moveItemOp(tree(BASE), 'b', 'c', 'after'))).toEqual([
+      '0:root/',
+      '1:a',
+      '1:c',
+      '1:b/',
+      '2:b1',
+    ]);
+  });
+
+  it('moveItemOp reparents nodes and carries their subtrees', () => {
+    expect(flat(moveItemOp(tree(BASE), 'c', 'a', 'child'))).toEqual([
+      '0:root/',
+      '1:a',
+      '2:c',
+      '1:b/',
+      '2:b1',
+    ]);
+    expect(flat(moveItemOp(tree(BASE), 'b', 'a', 'child'))).toEqual([
+      '0:root/',
+      '1:a',
+      '2:b/',
+      '3:b1',
+      '1:c',
+    ]);
+  });
+
+  it('moveItemOp can outdent relative to a shallower target', () => {
+    expect(flat(moveItemOp(tree(BASE), 'b1', 'b', 'before'))).toEqual([
+      '0:root/',
+      '1:a',
+      '1:b1',
+      '1:b/',
+      '1:c',
+    ]);
+  });
+
+  it('moveItemOp rejects self-drops and drops into the source subtree', () => {
+    const t = tree(BASE);
+    expect(moveItemOp(t, 'b', 'b', 'child')).toBe(t);
+    expect(moveItemOp(t, 'b', 'b1', 'child')).toBe(t);
+  });
+
+  it('moveItemUp / moveItemDown reorder siblings within bounds', () => {
+    expect(flat(moveItemDownOp(tree(BASE), 'a'))).toEqual([
+      '0:root/',
+      '1:b/',
+      '2:b1',
+      '1:a',
+      '1:c',
+    ]);
+    const t = tree(BASE);
+    expect(moveItemUpOp(t, 'a')).toBe(t); // already first
+  });
+
+  it('toggleDirOp toggles the trailing slash', () => {
+    const on = toggleDirOp(tree(BASE), 'a'); // a → a/
+    expect(on.roots[0].children[0].label).toBe('a/');
+    const off = toggleDirOp(on, 'a'); // a/ → a
+    expect(off.roots[0].children.find((n) => n.label === 'a')).toBeDefined();
+  });
+
+  it('every op keeps the tree renderable + byte-stable', () => {
+    for (const op of [
+      (t: Tree) => renameItemOp(t, 'a', 'alpha'),
+      (t: Tree) => addItemOp(t, 'b', 'child', 'b2'),
+      (t: Tree) => indentItemOp(t, 'c'),
+      (t: Tree) => outdentItemOp(t, 'b1'),
+      (t: Tree) => moveItemOp(t, 'c', 'a', 'child'),
+      (t: Tree) => moveItemDownOp(t, 'a'),
+    ]) {
+      const next = op(tree(BASE));
+      const r1 = renderTree(next);
+      expect(renderTree(parseTree(r1))).toBe(r1);
+    }
+  });
+});

package/src/treeview/__tests__/treePaste.test.ts

@@ -0,0 +1,40 @@
+import { describe, expect, it } from 'vitest';
+import { shouldPasteAsTreeFence } from '../treePaste';
+
+const FILE_TREE = ['src/', '├── index.ts', '├── utils/', '│   └── math.ts', '└── config.ts'].join(
+  '\n',
+);
+const ASCII_TREE = ['root', '|-- a', '|-- b', '`-- c'].join('\n');
+const BOX_DIAGRAM = [
+  '┌────────┐',
+  '│ Alpha  │',
+  '└───┬────┘',
+  '    ▼',
+  '┌────────┐',
+  '│ Beta   │',
+  '└────────┘',
+].join('\n');
+
+describe('shouldPasteAsTreeFence', () => {
+  it('accepts bare Unicode file-tree art', () => {
+    expect(shouldPasteAsTreeFence(FILE_TREE)).toBe(true);
+  });
+
+  it('accepts bare ASCII tree art', () => {
+    expect(shouldPasteAsTreeFence(ASCII_TREE)).toBe(true);
+  });
+
+  it('rejects a box diagram (belongs to the diagram gate)', () => {
+    expect(shouldPasteAsTreeFence(BOX_DIAGRAM)).toBe(false);
+  });
+
+  it('rejects a GFM table', () => {
+    expect(shouldPasteAsTreeFence(['| a | b |', '|---|---|', '| 1 | 2 |'].join('\n'))).toBe(false);
+  });
+
+  it('rejects text already containing a fence, and prose', () => {
+    expect(shouldPasteAsTreeFence('```\n' + FILE_TREE + '\n```')).toBe(false);
+    expect(shouldPasteAsTreeFence('just a normal paragraph of text')).toBe(false);
+    expect(shouldPasteAsTreeFence('')).toBe(false);
+  });
+});

package/src/treeview/__tests__/treeViewCommands.test.ts

@@ -0,0 +1,179 @@
+/**
+ * Command pipeline through a REAL tiptap editor: fence text in →
+ * applyTreeCommand → fence text out, verified by re-parsing.
+ */
+
+import { Editor } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
+import { afterEach, beforeAll, describe, expect, it } from 'vitest';
+import { parseTree } from '@bendyline/squisq/doc';
+import { markdownToTiptap } from '../../tiptapBridge';
+import { HeadingWithTemplate } from '../../TemplateAnnotation';
+import { TreeViewExtension, TREEVIEW_KEY } from '../TreeViewExtension';
+import { applyTreeCommand } from '../treeViewCommands';
+
+beforeAll(() => {
+  if (typeof globalThis.ResizeObserver === 'undefined') {
+    class RO {
+      observe(): void {}
+      unobserve(): void {}
+      disconnect(): void {}
+    }
+    globalThis.ResizeObserver = RO as unknown as typeof ResizeObserver;
+  }
+});
+
+const ART = ['src/', '├── index.ts', '├── utils/', '│   └── math.ts', '└── config.ts'].join('\n');
+
+let editors: Editor[] = [];
+function makeEditor(md: string): Editor {
+  const editor = new Editor({
+    extensions: [
+      StarterKit.configure({
+        heading: false,
+        codeBlock: { HTMLAttributes: { class: 'squisq-code-block' } },
+      }),
+      HeadingWithTemplate.configure({ levels: [1, 2, 3, 4, 5, 6] }),
+      TreeViewExtension,
+    ],
+    content: markdownToTiptap(md),
+  });
+  editors.push(editor);
+  return editor;
+}
+afterEach(() => {
+  for (const e of editors) e.destroy();
+  editors = [];
+});
+
+function firstId(editor: Editor): string {
+  const s = TREEVIEW_KEY.getState(editor.state);
+  expect(s?.entries.length).toBeGreaterThan(0);
+  return s?.entries[0].id as string;
+}
+function fenceOf(editor: Editor): { text: string; language: string | null } {
+  let text = '';
+  let language: string | null = null;
+  editor.state.doc.descendants((node) => {
+    if (node.type.name === 'codeBlock' && text === '') {
+      text = node.textContent;
+      language = (node.attrs as { language?: string | null }).language ?? null;
+      return false;
+    }
+    return true;
+  });
+  return { text, language };
+}
+function labels(editor: Editor): string[] {
+  const out: string[] = [];
+  const walk = (ns: ReturnType<typeof parseTree>['roots']) =>
+    ns.forEach((n) => (out.push(n.label), walk(n.children)));
+  walk(parseTree(fenceOf(editor).text).roots);
+  return out;
+}
+
+describe('applyTreeCommand', () => {
+  it('renameItem rewrites the fence', () => {
+    const editor = makeEditor('```\n' + ART + '\n```\n');
+    const id = firstId(editor);
+    expect(
+      applyTreeCommand(editor, id, { kind: 'renameItem', id: 'index-ts', label: 'main.ts' }),
+    ).toBe(true);
+    expect(labels(editor)).toContain('main.ts');
+    expect(labels(editor)).not.toContain('index.ts');
+  });
+
+  it('addItem (child) grows the tree', () => {
+    const editor = makeEditor('```\n' + ART + '\n```\n');
+    const id = firstId(editor);
+    expect(
+      applyTreeCommand(editor, id, {
+        kind: 'addItem',
+        targetId: 'utils',
+        position: 'child',
+        label: 'io.ts',
+      }),
+    ).toBe(true);
+    const utils = parseTree(fenceOf(editor).text).roots[0].children.find(
+      (n) => n.label === 'utils/',
+    );
+    expect(utils?.children.map((c) => c.label)).toContain('io.ts');
+  });
+
+  it('indentItem / outdentItem restructure', () => {
+    const editor = makeEditor('```\n' + ART + '\n```\n');
+    const id = firstId(editor);
+    // config.ts indents under utils/
+    expect(applyTreeCommand(editor, id, { kind: 'indentItem', id: 'config-ts' })).toBe(true);
+    const utils = parseTree(fenceOf(editor).text).roots[0].children.find(
+      (n) => n.label === 'utils/',
+    );
+    expect(utils?.children.map((c) => c.label)).toContain('config.ts');
+  });
+
+  it('moveItem reorders and reparents through one fence rewrite', () => {
+    const editor = makeEditor('```\n' + ART + '\n```\n');
+    const id = firstId(editor);
+    expect(
+      applyTreeCommand(editor, id, {
+        kind: 'moveItem',
+        id: 'config-ts',
+        targetId: 'utils',
+        position: 'child',
+      }),
+    ).toBe(true);
+    const tree = parseTree(fenceOf(editor).text);
+    const utils = tree.roots[0].children.find((n) => n.label === 'utils/');
+    expect(utils?.children.map((child) => child.label)).toEqual(['math.ts', 'config.ts']);
+  });
+
+  it('removeItem drops a node', () => {
+    const editor = makeEditor('```\n' + ART + '\n```\n');
+    const id = firstId(editor);
+    expect(applyTreeCommand(editor, id, { kind: 'removeItem', id: 'config-ts' })).toBe(true);
+    expect(labels(editor)).not.toContain('config.ts');
+  });
+
+  it('promotes the fence language to the explicit `tree` tag on edit', () => {
+    // A once-edited tree should carry `language: 'tree'` so its identity
+    // survives a later flatten → markdown → re-import round-trip.
+    const editor = makeEditor('```text\n' + ART + '\n```\n');
+    const id = firstId(editor);
+    expect(fenceOf(editor).language).toBe('text');
+    applyTreeCommand(editor, id, { kind: 'renameItem', id: 'index-ts', label: 'app.ts' });
+    expect(fenceOf(editor).language).toBe('tree');
+  });
+
+  it('keeps the block id stable across the language-promotion rewrite', () => {
+    const editor = makeEditor('```\n' + ART + '\n```\n');
+    const id = firstId(editor);
+    applyTreeCommand(editor, id, { kind: 'renameItem', id: 'index-ts', label: 'app.ts' });
+    expect(firstId(editor)).toBe(id);
+    expect(fenceOf(editor).language).toBe('tree');
+  });
+
+  it('one undo restores the original fence bytes', () => {
+    const editor = makeEditor('```\n' + ART + '\n```\n');
+    const id = firstId(editor);
+    const before = fenceOf(editor).text;
+    applyTreeCommand(editor, id, { kind: 'renameItem', id: 'index-ts', label: 'app.ts' });
+    expect(fenceOf(editor).text).not.toBe(before);
+    editor.commands.undo();
+    expect(fenceOf(editor).text).toBe(before);
+  });
+
+  it('no-op commands leave the document untouched', () => {
+    const editor = makeEditor('```\n' + ART + '\n```\n');
+    const id = firstId(editor);
+    const json = JSON.stringify(editor.state.doc.toJSON());
+    expect(applyTreeCommand(editor, id, { kind: 'indentItem', id: 'src' })).toBe(false); // root
+    expect(JSON.stringify(editor.state.doc.toJSON())).toBe(json);
+  });
+
+  it('returns false for an unknown block id', () => {
+    const editor = makeEditor('```\n' + ART + '\n```\n');
+    expect(applyTreeCommand(editor, 'tree-999', { kind: 'removeItem', id: 'index-ts' })).toBe(
+      false,
+    );
+  });
+});