pierrecomputer · ije · Apr 23, 2026 · Apr 23, 2026 · Apr 23, 2026 · Apr 23, 2026
diff --git a/apps/demo/editor.html b/apps/demo/editor.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
+    />
+    <title>PierreJS R&amp;D</title>
+  </head>
+  <body>
+    <div id="editor">
+      <div id="file-tree">
+        <header id="file-tree-header">
+          <h1>
+            <svg
+              fill="none"
+              height="32"
+              viewBox="0 0 32 32"
+              width="32"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="m16 0c-13.176 0-16 2.824-16 16s2.824 16 16 16 16-2.824 16-16-2.824-16-16-16z"
+                fill="#000"
+              />
+              <g fill="#fff">
+                <path
+                  d="m17.5001 8.59222c0-.82842-.6716-1.5-1.5-1.5-.8285 0-1.5.67158-1.5 1.5v3.90778h-4.0001c-.82843 0-1.5.6716-1.5 1.5s.67157 1.5 1.5 1.5h4.0001v3h3v-3h3.9999c.8284 0 1.5-.6716 1.5-1.5s-.6716-1.5-1.5-1.5h-3.9999z"
+                />
+                <path
+                  d="m10.5 20c-.82843 0-1.5.6716-1.5 1.5s.67157 1.5 1.5 1.5h11c.8284 0 1.5-.6716 1.5-1.5s-.6716-1.5-1.5-1.5z"
+                />
+              </g>
+            </svg>
+            @pierre/diffs
+          </h1>
+        </header>
+        <div id="file-tree-container"></div>
+      </div>
+      <div id="editor-container"></div>
+      <!-- <div id="sidebar"></div> -->
+    </div>
+    <script type="module" src="/src/editor.ts"></script>
+  </body>
+</html>
diff --git a/apps/demo/package.json b/apps/demo/package.json
@@ -8,8 +8,9 @@
     "build:deps": "bun run build:deps:diffs",
     "build:deps:diffs": "output=$(cd ../../packages/diffs && bun run build 2>&1) && echo '[diffs] Successfully cleaned and built.' || (echo \"$output\" >&2 && exit 1)",
     "build-types": "bun run build:deps && tsgo --build",
-    "dev": "bun run build:deps && concurrently \"bun run dev:deps:diffs\" \"bun run dev:vite\" --names \"diffs,vite\" --prefix-colors \"blue,green\"",
+    "dev": "bun run build:deps && concurrently \"bun run dev:deps:diffs\" \"bun run dev:deps:trees\" \"bun run dev:vite\" --names \"diffs,trees,vite\" --prefix-colors \"blue,green,gray\"",
     "dev:deps:diffs": "(cd ../../packages/diffs && bun run dev)",
+    "dev:deps:trees": "(cd ../../packages/trees && bun run dev)",
     "dev:vite": "vite --host --clearScreen=false",
     "preview": "vite preview",
     "start": "vite preview",
@@ -18,6 +19,7 @@
   },
   "dependencies": {
     "@pierre/diffs": "workspace:*",
+    "@pierre/trees": "workspace:*",
     "react": "catalog:",
     "react-dom": "catalog:",
     "shiki": "catalog:"

diff --git a/apps/demo/src/editor.ts b/apps/demo/src/editor.ts
@@ -0,0 +1,86 @@
+import {
+  Editor,
+  type FileContents,
+  VirtualizedFile,
+  Virtualizer,
+} from '@pierre/diffs';
+import { FileTree, type GitStatusEntry } from '@pierre/trees';
+
+import './style.css';
+
+const API = {
+  // get git status
+  getGitStatus: () =>
+    fetch(`/git-status/packages/diffs`).then(
+      (res) => res.json() as unknown as GitStatusEntry[]
+    ),
+
+  // get paths
+  getPaths: () =>
+    fetch('/fs/packages/diffs').then(
+      (res) => res.json() as unknown as string[]
+    ),
+
+  // read file from disk
+  readFile: (path: string) =>
+    fetch(`/fs/packages/diffs/${path}`).then((res) => res.text()),
+
+  // write file to disk
+  writeFile: (path: string, contents: string) =>
+    fetch(`/fs/packages/diffs/${path}`, { method: 'POST', body: contents }),
+};
+
+const fileTreeContainer = document.getElementById('file-tree-container')!;
+const editorContainer = document.getElementById('editor-container')!;
+const editor = new Editor<undefined>();
+const virtualizer = new Virtualizer();
+const fileInstance = new VirtualizedFile<undefined>(
+  {
+    unsafeCSS: /* CSS */ `
+      [data-diffs-header] {
+        position: sticky;
+        top: 0;
+        z-index: 100;
+      }
+    `,
+  },
+  virtualizer
+);
+const [paths, gitStatus] = await Promise.all([
+  API.getPaths(),
+  API.getGitStatus(),
+]);
+const fileTree = new FileTree({
+  paths,
+  gitStatus,
+  search: true,
+  onSelectionChange: (selectedPaths) => {
+    if (selectedPaths.length === 1) {
+      const filename = selectedPaths[0];
+      if (!filename.endsWith('/')) {
+        void openDocument(filename);
+      }
+    }
+  },
+});
+
+async function openDocument(filename: string) {
+  const file: FileContents = {
+    name: filename,
+    contents: await API.readFile(filename),
+  };
+  fileInstance.render({
+    file,
+    containerWrapper: editorContainer,
+  });
+  editorContainer.scrollTo({ left: 0, top: 0 });
+}
+
+async function onFileChange(file: FileContents) {
+  await API.writeFile(file.name, file.contents);
+  fileTree.setGitStatus(await API.getGitStatus());
+}
+
+virtualizer.setup(editorContainer);
+fileTree.render({ fileTreeContainer });
+editor.edit(fileInstance, () => void onFileChange);
diff --git a/apps/demo/src/main.ts b/apps/demo/src/main.ts
@@ -2,6 +2,7 @@ import {
   DEFAULT_THEMES,
   DIFFS_TAG_NAME,
   type DiffsThemeNames,
+  Editor,
   File,
   type FileContents,
   FileDiff,
@@ -206,7 +207,8 @@ function renderDiff(parsedPatches: ParsedPatch[], manager?: WorkerPoolManager) {
         overflow: wrap ? 'wrap' : 'scroll',
         renderAnnotation: renderDiffAnnotation,
         renderHeaderMetadata() {
-          return createCollapsedToggle(
+          return createToggle(
+            'Collapse',
             instance?.options.collapsed ?? false,
             (checked) => {
               instance?.setOptions({
@@ -673,6 +675,7 @@ if (renderFileButton != null) {
 
     virtualizer?.setup(globalThis.document);
     const wrap = getWrapped();
+    const editor = new Editor<LineCommentMetadata>();
     const fileContainer = document.createElement(DIFFS_TAG_NAME);
     wrapper.appendChild(fileContainer);
     let instance:
@@ -684,7 +687,8 @@ if (renderFileButton != null) {
       themeType: getThemeType(),
       renderAnnotation,
       renderCustomMetadata() {
-        return createCollapsedToggle(
+        const collapsedToggle = createToggle(
+          'Collapse',
           instance?.options.collapsed ?? false,
           (checked) => {
             instance?.setOptions({
@@ -696,6 +700,33 @@ if (renderFileButton != null) {
             }
           }
         );
+        const editableToggle = createToggle('Editable', false, (checked) => {
+          if (checked) {
+            editor.edit(instance, (file, lineAnnotations) => {
+              console.log('change', file, lineAnnotations);
+            });
+            editor.setSelections([
+              {
+                start: {
+                  line: 0,
+                  character: 1000, // will be normalized to the end of the line(< 1000 chars)
+                },
+                end: {
+                  line: 0,
+                  character: 1000, // will be normalized to the end of the line(< 1000 chars)
+                },
+                direction: 'none',
+              },
+            ]);
+          } else {
+            editor.cleanUp();
+          }
+        });
+        const div = document.createElement('div');
+        div.style.display = 'flex';
+        div.style.gap = '8px';
+        div.append(collapsedToggle, editableToggle);
+        return div;
       },
 
       // Line selection stuff
@@ -883,7 +914,8 @@ cleanButton?.addEventListener('click', () => {
   cleanupInstances(container);
 });
 
-function createCollapsedToggle(
+function createToggle(
+  labelText: string,
   checked: boolean,
   onChange: (checked: boolean) => void
 ): HTMLElement {
@@ -896,7 +928,7 @@ function createCollapsedToggle(
   });
   label.dataset.collapser = '';
   label.appendChild(input);
-  label.append(' Collapse');
+  label.appendChild(document.createTextNode(` ${labelText}`));
   return label;
 }
 

diff --git a/apps/demo/src/style.css b/apps/demo/src/style.css
@@ -240,3 +240,44 @@ diffs-container {
   align-items: center;
   gap: 4px;
 }
+
+#editor {
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  grid-template-rows: 1fr;
+  gap: 10px;
+  background-color: light-dark(white, black);
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+}
+
+#editor[data-show-sidebar] {
+  grid-template-columns: 280px 1fr 280px;
+}
+
+#file-tree {
+  background-color: light-dark(#f8f8f8, #141415);
+}
+
+#file-tree h1 {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  padding: 16px;
+}
+
+#file-tree h1 svg {
+  width: 20px;
+  height: 20px;
+}
+
+#editor-container {
+  overflow-y: auto;
+  overscroll-behavior: none;
+}
+
+#editor-container diffs-container {
+  margin-top: 0;
+}