@vgai/editor 0.2.0

package/src/components/DefaultEditorLayout.tsx

@@ -0,0 +1,509 @@
+import { resolveUrl } from '@engine/loader';
+import { parsePrefabFile, parseSceneFile } from '@engine/scene/parse';
+import type { PrefabFile, SceneFile } from '@engine/scene/scene-types';
+import { use, useCallback, useEffect, useRef, useState, useSyncExternalStore } from 'react';
+import { createPortal } from 'react-dom';
+import { connectAssetEvents, connectSceneEvents } from '../asset-events';
+import { getActiveAuthoring, hasAuthoringOverride } from '../authoring/active-adapter';
+import {
+  findOwningRootGroupId,
+  ROOT_ACTIVATION_REQUEST_EVENT,
+  type RootActivationRequest,
+  requestRootActivation,
+} from '../authoring/root-activation';
+import { watchExternalSceneChanges } from '../browser-external-watch';
+import { useEditorInit, useEditorStore } from '../EditorContext';
+import { readProjectTextFile, saveFile } from '../editor-api';
+import { editorConsole } from '../editor-console';
+import { getEditorMode } from '../editor-mode';
+import { resizeGame, setGameContainer } from '../play-mode';
+import { SceneUIPalettePanel } from '../scene-ui-mode/scene-ui-palette-panel';
+import { UIPrefabDialogHost } from '../scene-ui-mode/ui-prefab-dialog-host';
+import { getStorageBackend } from '../storage';
+import { BottomPanel } from './BottomPanel';
+import { GameHierarchy } from './GameHierarchy';
+import { MountFailureBanner } from './MountFailureBanner';
+import { NetworkSection } from './NetworkSection';
+import { PlayBar, type Resolution } from './PlayBar';
+import { PrefabSaveDialog } from './PrefabSaveDialog';
+import { ProjectHeader } from './ProjectHeader';
+import { RightPanel } from './RightPanel';
+import { RootActivateDialog } from './RootActivateDialog';
+import { ViewportPanel } from './ViewportPanel';
+
+/** Load a scene from a URL into the store. */
+export async function openSceneFromAsset(
+  store: { loadDocument: (doc: SceneFile, path: string) => void },
+  assetPath: string,
+): Promise<boolean> {
+  try {
+    const res = await fetch(resolveUrl(assetPath));
+    if (!res.ok) return false;
+    const doc = parseSceneFile(await res.json());
+    const savePath = assetPath.replace(/^\//, '');
+    store.loadDocument(doc, savePath);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/** Save a MaterialFile to disk via the editor server API. */
+export async function saveMaterialToServer(
+  material: import('@engine/scene/scene-types').MaterialFile,
+  path: string,
+): Promise<boolean> {
+  const content = JSON.stringify(material, null, 2);
+  return saveFile(path, content);
+}
+
+/** Save a PrefabFile to disk via the editor server API. */
+export async function savePrefabToServer(prefab: PrefabFile, path: string): Promise<boolean> {
+  const content = JSON.stringify(prefab, null, 2);
+  return saveFile(path, content);
+}
+
+/** Load a prefab from a URL into the store for editing. */
+export async function openPrefabFromAsset(
+  store: { loadPrefab: (prefab: PrefabFile, path: string) => void },
+  assetPath: string,
+): Promise<boolean> {
+  try {
+    const text = await readProjectTextFile(assetPath);
+    if (text === null) return false;
+    const prefab = parsePrefabFile(JSON.parse(text));
+    const savePath = assetPath.replace(/^\//, '');
+    store.loadPrefab(prefab, savePath);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/** Fetch a PrefabFile (for unpack operations) — storage-first so a just-saved prefab resolves. */
+export async function fetchPrefabFile(url: string): Promise<PrefabFile | null> {
+  try {
+    const text = await readProjectTextFile(url);
+    if (text === null) return null;
+    return parsePrefabFile(JSON.parse(text));
+  } catch {
+    return null;
+  }
+}
+
+/** Game panel — a container div that play-mode.ts fills with a canvas. */
+function GamePanel({ style }: { style?: React.CSSProperties }) {
+  const store = useEditorStore();
+  const outerRef = useRef<HTMLDivElement>(null);
+  const [resolution, setResolution] = useState<Resolution>({
+    label: 'Fill',
+    width: null,
+    height: null,
+  });
+  const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
+
+  // Callback ref so setGameContainer is called even when the element swaps (fill ↔ device)
+  const prevRef = useRef<HTMLDivElement | null>(null);
+  const canvasRef = useCallback((el: HTMLDivElement | null) => {
+    if (el === prevRef.current) return;
+    // Move game canvas to new container
+    if (prevRef.current && el) {
+      while (prevRef.current.firstChild) el.appendChild(prevRef.current.firstChild);
+    }
+    prevRef.current = el;
+    setGameContainer(el);
+  }, []);
+
+  // Track outer container size for scale calculation
+  useEffect(() => {
+    const el = outerRef.current;
+    if (!el) return;
+    const observer = new ResizeObserver(([entry]) => {
+      if (!entry) return;
+      setContainerSize({ width: entry.contentRect.width, height: entry.contentRect.height });
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  // Resize the game renderer when resolution or container size changes
+  const isFill = resolution.width === null;
+  useEffect(() => {
+    if (isFill) {
+      // Fill mode: resize to match available container space
+      if (containerSize.width > 0 && containerSize.height > 0) {
+        resizeGame(containerSize.width, containerSize.height);
+      }
+    } else {
+      resizeGame(resolution.width!, resolution.height!);
+    }
+  }, [isFill, resolution.width, resolution.height, containerSize.width, containerSize.height]);
+
+  // Scale: fit the device resolution into the available space, never upscale
+  let scale = 1;
+  if (!isFill && containerSize.width > 0 && containerSize.height > 0) {
+    const scaleX = containerSize.width / resolution.width!;
+    const scaleY = containerSize.height / resolution.height!;
+    scale = Math.min(scaleX, scaleY, 1);
+  }
+
+  return (
+    <div style={{ overflow: 'hidden', position: 'relative', flexDirection: 'column', ...style }}>
+      <div
+        ref={outerRef}
+        style={{
+          flex: 1,
+          overflow: 'hidden',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          position: 'relative',
+        }}
+      >
+        {isFill ? (
+          <div ref={canvasRef} aria-hidden="true" style={{ position: 'absolute', inset: 0 }} />
+        ) : (
+          /* Wrapper sized to the scaled dimensions so flexbox centering works.
+             The inner canvasRef is full device resolution, CSS-scaled down. */
+          <div
+            style={{
+              width: resolution.width! * scale,
+              height: resolution.height! * scale,
+              overflow: 'hidden',
+            }}
+          >
+            <div
+              ref={canvasRef}
+              aria-hidden="true"
+              style={{
+                width: resolution.width!,
+                height: resolution.height!,
+                transformOrigin: 'top left',
+                transform: `scale(${scale})`,
+              }}
+            />
+          </div>
+        )}
+        {/* Same overlay ViewportPanel renders on the Scene tab (T-R1a #6) — the
+            Game tab is where play auto-switches to, so it must render here too,
+            not only on the Scene-tab viewport it would otherwise be hidden behind. */}
+        {store.playState !== 'stopped' && <NetworkSection />}
+      </div>
+      <PlayBar resolution={resolution} onResolutionChange={setResolution} scale={scale} />
+    </div>
+  );
+}
+
+function ViewportTabBar({
+  active,
+  onChange,
+  showGame,
+}: {
+  active: 'scene' | 'game';
+  onChange: (tab: 'scene' | 'game') => void;
+  showGame: boolean;
+}) {
+  const tabStyle = (isActive: boolean): React.CSSProperties => ({
+    background: 'none',
+    border: 'none',
+    padding: '4px 8px',
+    cursor: 'pointer',
+    fontSize: 11,
+    fontWeight: 600,
+    textTransform: 'uppercase',
+    color: isActive ? '#c5c8ce' : '#666',
+    borderBottom: isActive ? '2px solid #579eff' : '2px solid transparent',
+    marginBottom: -1,
+    pointerEvents: 'auto',
+  });
+  return (
+    <div
+      style={{
+        display: 'flex',
+        gap: 2,
+        background: '#2c2c2c',
+        borderBottom: '1px solid #333',
+        flexShrink: 0,
+        pointerEvents: 'auto',
+      }}
+    >
+      <button type="button" style={tabStyle(active === 'scene')} onClick={() => onChange('scene')}>
+        Viewport
+      </button>
+      {showGame && (
+        <button type="button" style={tabStyle(active === 'game')} onClick={() => onChange('game')}>
+          Game
+        </button>
+      )}
+    </div>
+  );
+}
+
+export function DefaultEditorLayout({
+  onReturnToProjectScreen,
+}: {
+  onReturnToProjectScreen?: (() => void) | undefined;
+}) {
+  const store = useEditorStore();
+  use(useEditorInit()); // suspends until project is detected
+
+  // Subscribe to store changes
+  useSyncExternalStore(store.subscribe, store.getSnapshot);
+  const isPlaying = store.playState !== 'stopped';
+  const [prefabSaveState, setPrefabSaveState] = useState<{ entityId: string; name: string } | null>(
+    null,
+  );
+  // A4 (D8) — a root-activation request whose adapter was dirty, awaiting the
+  // user's Cancel/Save-&-Switch choice. `requestRootActivation` (shared by
+  // GameHierarchy's radio dblclick and `handleOpenScene` below) dispatches
+  // this via a window event instead of rendering anything itself (adapters —
+  // and the hierarchy panel driven purely by them — can't own a portal).
+  const [pendingRootActivation, setPendingRootActivation] = useState<RootActivationRequest | null>(
+    null,
+  );
+
+  useEffect(() => {
+    const handler = (e: Event) => {
+      setPendingRootActivation((e as CustomEvent<RootActivationRequest>).detail);
+    };
+    window.addEventListener(ROOT_ACTIVATION_REQUEST_EVENT, handler);
+    return () => window.removeEventListener(ROOT_ACTIVATION_REQUEST_EVENT, handler);
+  }, []);
+
+  // Listen for "save as prefab" events from the hierarchy context menu
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const detail = (e as CustomEvent).detail as { entityId: string; name: string };
+      setPrefabSaveState(detail);
+    };
+    window.addEventListener('editor:save-as-prefab', handler);
+    return () => window.removeEventListener('editor:save-as-prefab', handler);
+  }, []);
+
+  const handlePrefabSaveConfirm = useCallback(
+    (path: string) => {
+      if (!prefabSaveState) return;
+      const prefab = store.extractAsPrefab(prefabSaveState.entityId);
+      if (!prefab) {
+        setPrefabSaveState(null);
+        return;
+      }
+      savePrefabToServer(prefab, path).then((ok) => {
+        if (ok) {
+          const servingPath = `/${path}`;
+          store.convertToPrefabInstance(prefabSaveState.entityId, servingPath);
+        }
+        setPrefabSaveState(null);
+      });
+    },
+    [store, prefabSaveState],
+  );
+
+  // A4 (D8) — the SINGLE choke point for the asset-browser's scene/prefab
+  // double-click (and the `editor:open-asset` event below). A scene file
+  // that is one of the active adapter's OWN root-group members reroutes
+  // through the shared dirty-gated `requestRootActivation` (radio activation)
+  // instead of the legacy `openSceneFromAsset` — it must NOT go through both
+  // paths, or the two could disagree about which scene is "loaded". Prefabs,
+  // and any scene the active adapter doesn't map to a root of its own
+  // (`files.rootForFile` returns null — e.g. no adapter installed, or a
+  // scene living outside this project's own root-group tracking), keep the
+  // legacy path unchanged.
+  const handleOpenScene = useCallback(
+    (assetPath: string) => {
+      if (assetPath.endsWith('.prefab.json')) {
+        openPrefabFromAsset(store, assetPath);
+        return;
+      }
+      const adapter = getActiveAuthoring(store);
+      const rootId = adapter.files?.rootForFile(assetPath) ?? null;
+      const groupId = rootId ? findOwningRootGroupId(adapter, rootId) : null;
+      if (rootId && groupId) {
+        requestRootActivation(adapter, groupId, rootId);
+        return;
+      }
+      openSceneFromAsset(store, assetPath);
+    },
+    [store],
+  );
+
+  // Listen for "open asset" events (e.g. "Open Prefab" from context menu)
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const detail = (e as CustomEvent).detail as { path: string };
+      if (detail.path) handleOpenScene(detail.path);
+    };
+    window.addEventListener('editor:open-asset', handler);
+    return () => window.removeEventListener('editor:open-asset', handler);
+  }, [handleOpenScene]);
+
+  // Subscribe to server-sent asset move events (file watcher)
+  useEffect(() => {
+    return connectAssetEvents((event) => {
+      store.applyAssetMove(event.oldPath, event.newPath);
+      window.dispatchEvent(new CustomEvent('editor:assets-changed'));
+    });
+  }, [store]);
+
+  // Subscribe to server-sent scene file changes (live sync from disk). This channel
+  // is scoped to the currently-OPEN first-party `.vscn` (`eventPath === currentPath`
+  // below, `currentPath` = `store.savePath`) — the SSE transport itself is unchanged
+  // (design docs/PERSISTENCE-PROVIDER-DESIGN.md §5). When no override is active, the
+  // active adapter IS the first-party one, so applying the update is routed through
+  // its `persistence.applyExternal` (the existing `applyExternalUpdate` diff-apply,
+  // `event.content` forwarded as `rawContent` so own-echo detection is unaffected)
+  // instead of reaching into the store directly. When a non-first-party override
+  // (ingest overlay / UI / world2d / ephemeral) IS active, it has its OWN persisted
+  // artifact + reload contract, unrelated to this event — routing THIS doc through
+  // ITS `applyExternal` would feed a foreign `SceneFile` into e.g. an ingest
+  // overlay's apply, so fall back to `store.applyExternalUpdate` directly there,
+  // preserving its existing play-state-guarded queueing behavior unchanged.
+  const onSceneChanged = useCallback(
+    (event: { path: string; content: string }) => {
+      const currentPath = store.savePath;
+      if (!currentPath) return;
+      const eventPath = event.path.startsWith('/') ? event.path.slice(1) : event.path;
+      if (eventPath !== currentPath) return;
+      try {
+        const doc = parseSceneFile(JSON.parse(event.content));
+        if (hasAuthoringOverride()) {
+          store.applyExternalUpdate(doc, event.content);
+        } else {
+          getActiveAuthoring(store).persistence?.applyExternal?.(doc, event.content);
+        }
+      } catch (err) {
+        if (err instanceof Error) {
+          editorConsole.error(`Scene validation failed: ${err.message}`, 'scene');
+        }
+      }
+    },
+    [store],
+  );
+
+  useEffect(() => connectSceneEvents(onSceneChanged), [onSceneChanged]);
+
+  // A4 — external-change detection for the open scene. A2's watch only sees the
+  // editor's OWN writes; a real on-disk (FSA) folder can be edited out-of-band
+  // (agent apply-diff, another editor, git). Poll it and deliver through the
+  // SAME handler — the store's own-echo guard drops self-writes, so only genuine
+  // external edits reload. OPFS is a private sandbox with no external writer, so
+  // this is scoped to the FSA backend; server mode keeps SSE.
+  useEffect(() => {
+    if (getEditorMode() !== 'browser') return;
+    if (getStorageBackend().id !== 'fsa') return;
+    return watchExternalSceneChanges(() => store.savePath, onSceneChanged);
+  }, [store, onSceneChanged]);
+
+  const bottomEl = document.getElementById('editor-bottom');
+
+  return (
+    <>
+      <div
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          pointerEvents: 'none',
+          fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+          fontSize: '13px',
+          color: '#c5c8ce',
+        }}
+      >
+        <ProjectHeader onReturnToProjectScreen={onReturnToProjectScreen} />
+        {/* D-W3 (F9): rendered here, OUTSIDE `GameHierarchy` — a manifest world
+            that failed to mount entirely never installs an override, so a
+            banner living only INSIDE the hierarchy panel wouldn't help: this
+            one must be visible over the default Untitled scene the editor
+            falls back to in exactly that case. (`GameHierarchy` separately
+            renders `OverlayReportBanner` internally, unconditionally, for the
+            ingest/composite overlay-report case — see that component.) */}
+        <MountFailureBanner />
+        <div
+          style={{
+            display: 'flex',
+            flex: 1,
+            minHeight: 0,
+          }}
+        >
+          {/* A2 — ONE contract-only hierarchy panel drives every session shape
+              (bare single-scene edit, ingested game, multi-world composite):
+              `hasAuthoringOverride()` no longer selects between two panels. */}
+          <GameHierarchy />
+          {/* E1.a (spec-27 §7 E1) — the scene-UI palette (+ prefab
+              instantiate list), visible only while a scene-UI child is
+              installed (renders null otherwise — the component's own gate). */}
+          <SceneUIPalettePanel />
+          {/* Viewport + Game area — two independent panels, tab-switched */}
+          <div
+            style={{
+              flex: 1,
+              display: 'flex',
+              flexDirection: 'column',
+              position: 'relative',
+              pointerEvents: 'none',
+            }}
+          >
+            <ViewportTabBar
+              active={store.activeViewportTab}
+              onChange={(tab) => store.setActiveViewportTab(tab)}
+              showGame={isPlaying}
+            />
+            {/* Viewport panel (editor) — all overlays are inside ViewportPanel */}
+            <div
+              style={{
+                flex: 1,
+                position: 'relative',
+                display: store.activeViewportTab === 'scene' ? 'block' : 'none',
+              }}
+            >
+              <ViewportPanel />
+            </div>
+            {/* Game panel — always mounted, hidden when not playing/active */}
+            <GamePanel
+              style={{
+                flex: 1,
+                position: 'relative',
+                display: isPlaying && store.activeViewportTab === 'game' ? 'flex' : 'none',
+                flexDirection: 'column',
+                pointerEvents: 'auto',
+                ...(isPlaying && store.playState === 'playing'
+                  ? { outline: '2px solid #4ec9b0', outlineOffset: -2 }
+                  : isPlaying
+                    ? { outline: '2px solid #dcdcaa', outlineOffset: -2 }
+                    : {}),
+              }}
+            />
+          </div>
+          <RightPanel />
+        </div>
+        {prefabSaveState && (
+          <PrefabSaveDialog
+            defaultName={prefabSaveState.name}
+            onSave={handlePrefabSaveConfirm}
+            onCancel={() => setPrefabSaveState(null)}
+          />
+        )}
+        {/* E1.c (spec-27 §7 E1) — the scene-UI "Save as Prefab" dialog
+            (hierarchy context-menu, `ui-prefab-hierarchy-menu.ts`); a
+            self-contained host, renders nothing until that menu item fires. */}
+        <UIPrefabDialogHost />
+        {pendingRootActivation && (
+          <RootActivateDialog
+            label={pendingRootActivation.label}
+            onConfirm={() => {
+              const { groupId, rootId } = pendingRootActivation;
+              setPendingRootActivation(null);
+              void getActiveAuthoring(store).rootGroups?.activate(groupId, rootId);
+            }}
+            onCancel={() => setPendingRootActivation(null)}
+          />
+        )}
+      </div>
+      {bottomEl && createPortal(<BottomPanel onOpenScene={handleOpenScene} />, bottomEl)}
+    </>
+  );
+}

package/src/components/FolderTree.tsx

@@ -0,0 +1,179 @@
+import { faChevronDown, faChevronRight, faFolder } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useCallback, useEffect, useReducer, useRef, useState } from 'react';
+import { listAssets } from '../editor-api';
+
+// --- Types ---
+
+interface FolderTreeNode {
+  id: string;
+  name: string;
+  root: string;
+  path: string;
+  children: FolderTreeNode[];
+}
+
+interface FolderTreeProps {
+  currentPath: string;
+  currentRoot: string;
+  onNavigate: (root: string, path: string) => void;
+}
+
+interface FolderRow {
+  node: FolderTreeNode;
+  depth: number;
+  hasChildren: boolean;
+  isOpen: boolean;
+}
+
+// --- Helpers ---
+
+function makeNodeId(root: string, path: string): string {
+  return `${root}:${path}`;
+}
+
+async function fetchSubfolders(root: string, dir: string): Promise<FolderTreeNode[]> {
+  const entries = await listAssets(root, dir);
+  return entries
+    .filter((e) => e.type === 'directory')
+    .map((e) => {
+      const path = dir ? `${dir}/${e.name}` : e.name;
+      return {
+        id: makeNodeId(root, path),
+        name: e.name,
+        root,
+        path,
+        children: [],
+      };
+    });
+}
+
+/** Recursively replace children of a target node by ID. */
+function updateNodeChildren(
+  nodes: FolderTreeNode[],
+  targetId: string,
+  newChildren: FolderTreeNode[],
+): FolderTreeNode[] {
+  return nodes.map((node) => {
+    if (node.id === targetId) return { ...node, children: newChildren };
+    if (node.children.length > 0) {
+      const updated = updateNodeChildren(node.children, targetId, newChildren);
+      if (updated !== node.children) return { ...node, children: updated };
+    }
+    return node;
+  });
+}
+
+function flattenFolderRows(nodes: FolderTreeNode[], openIds: Set<string>, depth = 0): FolderRow[] {
+  const rows: FolderRow[] = [];
+  for (const node of nodes) {
+    const isOpen = openIds.has(node.id);
+    // Show as having children if explicitly opened (children may be loading)
+    // or if children array is non-empty
+    const hasChildren = node.children.length > 0 || isOpen;
+    rows.push({ node, depth, hasChildren, isOpen });
+    if (isOpen && node.children.length > 0) {
+      rows.push(...flattenFolderRows(node.children, openIds, depth + 1));
+    }
+  }
+  return rows;
+}
+
+// --- Main Component ---
+
+export function FolderTree({ currentPath, currentRoot, onNavigate }: FolderTreeProps) {
+  const [treeData, setTreeData] = useState<FolderTreeNode[]>([]);
+  const openIdsRef = useRef(new Set<string>());
+  const loadedRef = useRef(new Set<string>());
+  const [, forceUpdate] = useReducer((x: number) => x + 1, 0);
+
+  // Load top-level folders directly (no wrapper "public" node)
+  useEffect(() => {
+    fetchSubfolders('public', '').then((topFolders) => {
+      setTreeData(topFolders);
+    });
+  }, []);
+
+  const loadChildren = useCallback((id: string, root: string, path: string) => {
+    if (loadedRef.current.has(id)) return;
+    loadedRef.current.add(id);
+    fetchSubfolders(root, path).then((children) => {
+      setTreeData((prev) => updateNodeChildren(prev, id, children));
+    });
+  }, []);
+
+  const selectedId = makeNodeId(currentRoot, currentPath);
+  const rows = flattenFolderRows(treeData, openIdsRef.current);
+
+  return (
+    <div style={{ flex: 1, minHeight: 0, overflow: 'auto', paddingTop: 4 }}>
+      {rows.map((row) => {
+        const data = row.node;
+        const isActive = data.id === selectedId;
+
+        return (
+          <div
+            key={data.id}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              height: 24,
+              gap: 4,
+              paddingLeft: row.depth * 14,
+              cursor: 'pointer',
+              background: isActive ? '#579EFF33' : 'transparent',
+              color: isActive ? '#fff' : '#c5c8ce',
+              borderRadius: 2,
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              fontSize: 12,
+            }}
+            onClick={() => {
+              onNavigate(data.root, data.path);
+              if (!row.isOpen) {
+                openIdsRef.current.add(data.id);
+                loadChildren(data.id, data.root, data.path);
+                forceUpdate();
+              }
+            }}
+            onMouseEnter={(e) => {
+              if (!isActive) (e.currentTarget as HTMLDivElement).style.background = '#333';
+            }}
+            onMouseLeave={(e) => {
+              if (!isActive) (e.currentTarget as HTMLDivElement).style.background = 'transparent';
+            }}
+          >
+            {/* Expand/collapse arrow */}
+            <span
+              onClick={(e) => {
+                e.stopPropagation();
+                const set = openIdsRef.current;
+                if (set.has(data.id)) {
+                  set.delete(data.id);
+                } else {
+                  set.add(data.id);
+                  loadChildren(data.id, data.root, data.path);
+                }
+                forceUpdate();
+              }}
+              style={{
+                width: 10,
+                fontSize: 8,
+                textAlign: 'center',
+                flexShrink: 0,
+                color: '#8c8c8c',
+                userSelect: 'none',
+              }}
+            >
+              <FontAwesomeIcon icon={row.isOpen ? faChevronDown : faChevronRight} />
+            </span>
+            <span style={{ fontSize: 12, color: '#e8a740' }}>
+              <FontAwesomeIcon icon={faFolder} />
+            </span>
+            <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{data.name}</span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}