[exploratory][trees] Hack in a new Tree Structure, or "oh god, every file"

apps/docs/app/trees-dev/_components/ReactClientRendered.tsx

@@ -1,8 +1,13 @@
 'use client';
 
-import type { FileTreeOptions, FileTreeStateConfig } from '@pierre/trees';
+import type { FileTreeStateConfig } from '@pierre/trees';
 import { FileTree as FileTreeReact } from '@pierre/trees/react';
 
+import {
+  toRuntimeFileTreeOptions,
+  type TreesDevFileTreeOptions,
+} from '../demo-data';
+
 /**
  * React FileTree - Client-Side Rendered
  * No prerendered HTML, renders entirely on client
@@ -12,14 +17,20 @@ export function ReactClientRendered({
   initialFiles,
   stateConfig,
 }: {
-  options: Omit<FileTreeOptions, 'initialFiles'>;
+  options: Omit<TreesDevFileTreeOptions, 'initialFiles'>;
   initialFiles?: string[];
   stateConfig?: FileTreeStateConfig;
 }) {
+  const runtimeOptions = toRuntimeFileTreeOptions({
+    ...options,
+    initialFiles: initialFiles ?? [],
+  });
+  const { model, ...reactOptions } = runtimeOptions;
+
   return (
     <FileTreeReact
-      options={options}
-      initialFiles={initialFiles}
+      model={model}
+      options={reactOptions}
       initialExpandedItems={stateConfig?.initialExpandedItems}
       initialSelectedItems={stateConfig?.initialSelectedItems}
       onSelection={stateConfig?.onSelection}

apps/docs/app/trees-dev/_components/ReactServerRendered.tsx

@@ -1,8 +1,13 @@
 'use client';
 
-import type { FileTreeOptions, FileTreeStateConfig } from '@pierre/trees';
+import type { FileTreeStateConfig } from '@pierre/trees';
 import { FileTree as FileTreeReact } from '@pierre/trees/react';
 
+import {
+  toRuntimeFileTreeOptions,
+  type TreesDevFileTreeOptions,
+} from '../demo-data';
+
 /**
  * React FileTree - Server-Side Rendered
  * Uses prerendered HTML for SSR, hydrates on client
@@ -13,15 +18,21 @@ export function ReactServerRendered({
   stateConfig,
   prerenderedHTML,
 }: {
-  options: Omit<FileTreeOptions, 'initialFiles'>;
+  options: Omit<TreesDevFileTreeOptions, 'initialFiles'>;
   initialFiles?: string[];
   stateConfig?: FileTreeStateConfig;
   prerenderedHTML: string;
 }) {
+  const runtimeOptions = toRuntimeFileTreeOptions({
+    ...options,
+    initialFiles: initialFiles ?? [],
+  });
+  const { model, ...reactOptions } = runtimeOptions;
+
   return (
     <FileTreeReact
-      options={options}
-      initialFiles={initialFiles}
+      model={model}
+      options={reactOptions}
       prerenderedHTML={prerenderedHTML}
       initialExpandedItems={stateConfig?.initialExpandedItems}
       initialSelectedItems={stateConfig?.initialSelectedItems}

apps/docs/app/trees-dev/_components/TreesDevSettingsProvider.tsx

@@ -18,16 +18,20 @@ import {
   FILE_TREE_COOKIE_VERSION,
   FILE_TREE_COOKIE_VERSION_NAME,
 } from '../cookies';
-import { sharedDemoFileTreeOptions } from '../demo-data';
+import {
+  sharedDemoFileTreeOptions,
+  toRuntimeFileTreeOptions,
+  type TreesDevFileTreeOptions,
+} from '../demo-data';
 
 interface TreesDevSettingsContextValue {
   flattenEmptyDirectories: boolean;
   useLazyDataLoader: boolean;
   setFlattenEmptyDirectories: (val: boolean) => void;
   setUseLazyDataLoader: (val: boolean) => void;
   handleResetControls: () => void;
-  fileTreeOptions: FileTreeOptions;
-  reactOptions: Omit<FileTreeOptions, 'initialFiles'>;
+  fileTreeOptions: TreesDevFileTreeOptions;
+  reactOptions: Omit<FileTreeOptions, 'model'>;
   reactFiles: string[] | undefined;
 }
 
@@ -102,7 +106,7 @@ export function TreesDevSettingsProvider({
     }${cookieSuffix}`;
   }, [cookieMaxAge, flattenEmptyDirectories, useLazyDataLoader]);
 
-  const fileTreeOptions = useMemo<FileTreeOptions>(
+  const fileTreeOptions = useMemo<TreesDevFileTreeOptions>(
     () => ({
       ...sharedDemoFileTreeOptions,
       flattenEmptyDirectories,
@@ -111,7 +115,9 @@ export function TreesDevSettingsProvider({
     [flattenEmptyDirectories, useLazyDataLoader]
   );
 
-  const { initialFiles: reactFiles, ...reactOptions } = fileTreeOptions;
+  const reactFiles = fileTreeOptions.initialFiles;
+  const runtimeReactOptions = toRuntimeFileTreeOptions(fileTreeOptions);
+  const { model: _reactModel, ...reactOptions } = runtimeReactOptions;
 
   const value = useMemo<TreesDevSettingsContextValue>(
     () => ({

apps/docs/app/trees-dev/_components/VanillaClientRendered.tsx

@@ -1,9 +1,14 @@
 'use client';
 
 import { FileTree } from '@pierre/trees';
-import type { FileTreeOptions, FileTreeStateConfig } from '@pierre/trees';
+import type { FileTreeStateConfig } from '@pierre/trees';
 import { useCallback, useRef } from 'react';
 
+import {
+  toRuntimeFileTreeOptions,
+  type TreesDevFileTreeOptions,
+} from '../demo-data';
+
 /**
  * Vanilla FileTree - Client-Side Rendered
  * Uses ref callback to create and render FileTree instance on client mount
@@ -12,7 +17,7 @@ export function VanillaClientRendered({
   options,
   stateConfig,
 }: {
-  options: FileTreeOptions;
+  options: TreesDevFileTreeOptions;
   stateConfig?: FileTreeStateConfig;
 }) {
   const instanceRef = useRef<FileTree | null>(null);
@@ -29,7 +34,10 @@ export function VanillaClientRendered({
         node.innerHTML = '';
       }
 
-      const fileTree = new FileTree(options, stateConfig);
+      const fileTree = new FileTree(
+        toRuntimeFileTreeOptions(options),
+        stateConfig
+      );
       fileTree.render({ containerWrapper: node });
       instanceRef.current = fileTree;
 

apps/docs/app/trees-dev/_components/VanillaServerRendered.tsx

@@ -1,10 +1,15 @@
 'use client';
 
 import { FileTree } from '@pierre/trees';
-import type { FileTreeOptions, FileTreeStateConfig } from '@pierre/trees';
+import type { FileTreeStateConfig } from '@pierre/trees';
 import '@pierre/trees/web-components';
 import { useCallback, useRef } from 'react';
 
+import {
+  toRuntimeFileTreeOptions,
+  type TreesDevFileTreeOptions,
+} from '../demo-data';
+
 /**
  * Vanilla FileTree - Server-Side Rendered
  * Uses declarative shadow DOM to prerender HTML, then hydrates with FileTree instance.
@@ -16,7 +21,7 @@ export function VanillaServerRendered({
   stateConfig,
   containerHtml,
 }: {
-  options: FileTreeOptions;
+  options: TreesDevFileTreeOptions;
   stateConfig?: FileTreeStateConfig;
   containerHtml: string;
 }) {
@@ -46,7 +51,10 @@ export function VanillaServerRendered({
         }
       }
 
-      const fileTree = new FileTree(options, stateConfig);
+      const fileTree = new FileTree(
+        toRuntimeFileTreeOptions(options),
+        stateConfig
+      );
 
       if (!hasHydratedRef.current) {
         // Initial mount - hydrate the prerendered HTML

apps/docs/app/trees-dev/context-menu/ContextMenuDemoClient.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { CONTEXT_MENU_SLOT_NAME, FileTree } from '@pierre/trees';
-import type { FileTreeOptions, FileTreeStateConfig } from '@pierre/trees';
+import type { FileTreeStateConfig } from '@pierre/trees';
 import { FileTree as FileTreeReact } from '@pierre/trees/react';
 import '@pierre/trees/web-components';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -16,7 +16,11 @@ import {
   TreeDemoContextMenu,
 } from '../_components/TreeDemoContextMenu';
 import { useTreesDevSettings } from '../_components/TreesDevSettingsProvider';
-import { sharedDemoStateConfig } from '../demo-data';
+import {
+  sharedDemoStateConfig,
+  toRuntimeFileTreeOptions,
+  type TreesDevFileTreeOptions,
+} from '../demo-data';
 
 interface ContextMenuDemoClientProps {
   preloadedContextMenuFileTreeHtml: string;
@@ -64,7 +68,7 @@ function VanillaSSRContextMenu({
   stateConfig,
   containerHtml,
 }: {
-  options: FileTreeOptions;
+  options: TreesDevFileTreeOptions;
   stateConfig?: FileTreeStateConfig;
   containerHtml: string;
 }) {
@@ -106,17 +110,18 @@ function VanillaSSRContextMenu({
       };
 
       const fileTree = new FileTree(
-        {
+        toRuntimeFileTreeOptions({
           ...options,
           initialFiles: filesRef.current,
           renaming: renamingOptions,
-        },
+        }),
         {
           ...stateConfig,
-          onFilesChange: (nextFiles) => {
+          onFilesChange: (changeSet, context) => {
+            const nextFiles = context.getFiles();
             filesRef.current = nextFiles;
             setFiles(nextFiles);
-            stateConfig?.onFilesChange?.(nextFiles);
+            stateConfig?.onFilesChange?.(changeSet, context);
           },
           onContextMenuOpen: (item, context) => {
             renderVanillaContextMenuSlot({
@@ -172,7 +177,7 @@ function ReactSSRContextMenu({
   stateConfig,
   prerenderedHTML,
 }: {
-  options: Omit<FileTreeOptions, 'initialFiles'>;
+  options: Omit<TreesDevFileTreeOptions, 'initialFiles'>;
   initialFiles?: string[];
   stateConfig?: FileTreeStateConfig;
   prerenderedHTML: string;
@@ -183,11 +188,32 @@ function ReactSSRContextMenu({
     []
   );
 
+  const runtimeOptions = useMemo(
+    () =>
+      toRuntimeFileTreeOptions({
+        ...options,
+        initialFiles: files,
+        renaming: renamingOptions,
+      }),
+    [files, options, renamingOptions]
+  );
+  const { model, ...reactTreeOptions } = runtimeOptions;
+
+  const handleFilesChange = useCallback(
+    (
+      _changeSet: import('@pierre/trees').FileTreeChangeSet,
+      context: import('@pierre/trees').FileTreeChangeContext
+    ) => {
+      setFiles(context.getFiles());
+    },
+    []
+  );
+
   return (
     <FileTreeReact
-      options={{ ...options, renaming: renamingOptions }}
-      files={files}
-      onFilesChange={setFiles}
+      model={model}
+      options={reactTreeOptions}
+      onFilesChange={handleFilesChange}
       prerenderedHTML={prerenderedHTML}
       initialExpandedItems={stateConfig?.initialExpandedItems}
       onSelection={stateConfig?.onSelection}

apps/docs/app/trees-dev/context-menu/page.tsx

@@ -1,7 +1,11 @@
 import { preloadFileTree } from '@pierre/trees/ssr';
 
 import { readSettingsCookies } from '../_components/readSettingsCookies';
-import { sharedDemoFileTreeOptions, sharedDemoStateConfig } from '../demo-data';
+import {
+  sharedDemoFileTreeOptions,
+  sharedDemoStateConfig,
+  toRuntimeFileTreeOptions,
+} from '../demo-data';
 import { ContextMenuDemoClient } from './ContextMenuDemoClient';
 
 export default async function ContextMenuPage() {
@@ -14,11 +18,14 @@ export default async function ContextMenuPage() {
   };
 
   const noop = () => {};
-  const contextMenuSsr = preloadFileTree(fileTreeOptions, {
-    ...sharedDemoStateConfig,
-    onContextMenuOpen: noop,
-    onContextMenuClose: noop,
-  });
+  const contextMenuSsr = preloadFileTree(
+    toRuntimeFileTreeOptions(fileTreeOptions),
+    {
+      ...sharedDemoStateConfig,
+      onContextMenuOpen: noop,
+      onContextMenuClose: noop,
+    }
+  );
 
   return (
     <ContextMenuDemoClient