@node-tree/react

Camada de UI React do node-tree: um file explorer estilo VSCode (DOM fiel, virtual scrolling para milhares de nós, drag & drop), sobre o tree headless.

pnpm add @node-tree/react @node-tree/react-core @node-tree/explorer @node-tree/core @firesystem/core

import { NodeTreeProvider } from "@node-tree/react-core";
import { FileExplorer } from "@node-tree/react";
import "@node-tree/react/styles";

function App({ fs }) {
  return (
    <NodeTreeProvider fs={fs} rootPath="/">
      <div style={{ height: "100vh" }}>
        <FileExplorer onContextMenu={(req) => openMyMenu(req)} />
      </div>
    </NodeTreeProvider>
  );
}

A altura do container importa: o FileExplorer mede o painel (ResizeObserver) e informa o widget, então o windowing renderiza só ~1 viewport de linhas — não os milhares de nós. Foco/seleção usam selector-por-nó (re-render mínimo, como o VSCode).

A lógica não mora aqui — vem do @node-tree/react-core (store reativo) + @node-tree/explorer (regra de arquivos) + @node-tree/core (o widget). Este package é a view.

Docs

• API.md — superfície pública (FileExplorer, hooks, controllers, tipos).
• docs/ARCHITECTURE.md — como a view é montada (windowing, DnD, DOM).
• docs/DECISIONS.md — ADRs (o que não reabrir).
• INTEGRATION.md — conectar a um motor de combinação via bridge (porta externa).
• docs/TRANSFER-PORTS.md — portas de transferência direcional-neutras (ADR-010).
• docs/icon-resolution.md — engine de ícones.

Scripts

pnpm test        # vitest (stack real)
pnpm typecheck   # tsc --noEmit
pnpm build       # tsup