collabmd 0.1.19 → 0.1.21

package/src/client/presentation/comment-ui-controller.js

@@ -9,6 +9,9 @@ const COMMENT_CARD_WIDTH = 520;
 const COMMENT_SELECTION_REVEAL_DELAY_MS = 150;
 const COMMENT_SELECTION_CHIP_GAP = 12;
 const COMMENT_CONTROL_SLOT_HEIGHT = 36;
+const COMMENT_PREVIEW_RAIL_SLOT_HEIGHT = 30;
+const COMMENT_PREVIEW_RAIL_MIN_WIDTH = 400;
+const COMMENT_PREVIEW_RAIL_BREAKPOINT = 769;
 const COMMENT_REACTION_PRESET_EMOJIS = Object.freeze(['👍', '❤️', '🎉', '👀', '🚀']);
 const COMMENT_REACTION_MORE_EMOJIS = Object.freeze(['😂', '🔥', '✅', '🙏', '💡', '🤔', '👏', '😄', '🎯', '🙌']);
 
@@ -248,6 +251,25 @@ function createRectFromRects(rects = []) {
   };
 }
 
+function pointIntersectsRect(x, y, rect) {
+  if (!rect) {
+    return false;
+  }
+
+  return x >= rect.left
+    && x <= rect.right
+    && y >= rect.top
+    && y <= rect.bottom;
+}
+
+function normalizeGroupKeys(keys = []) {
+  return [...new Set(keys.filter(Boolean))].sort();
+}
+
+function serializeGroupKeys(keys = []) {
+  return normalizeGroupKeys(keys).join(' ');
+}
+
 function createCommentMarkerContent(count) {
   const fragment = document.createDocumentFragment();
 
@@ -279,6 +301,7 @@ export class CommentUiController {
     commentsDrawerList,
     commentsToggleButton,
     editorContainer,
+    onWillOpenDrawer,
     onCreateThread,
     onNavigateToLine,
     onReplyToThread,
@@ -293,6 +316,7 @@ export class CommentUiController {
     this.commentsDrawerList = commentsDrawerList;
     this.commentsToggleButton = commentsToggleButton;
     this.editorContainer = editorContainer;
+    this.onWillOpenDrawer = onWillOpenDrawer;
     this.onCreateThread = onCreateThread;
     this.onNavigateToLine = onNavigateToLine;
     this.onReplyToThread = onReplyToThread;
@@ -313,6 +337,12 @@ export class CommentUiController {
     this.pointerSelecting = false;
     this.session = null;
     this.activeCard = null;
+    this.hoveredEditorGroupKeys = [];
+    this.hoveredEditorGroupKeysSignature = '';
+    this.hoveredPreviewGroupKeys = [];
+    this.hoveredPreviewGroupKeysSignature = '';
+    this.previewHoverRegions = [];
+    this.lastPreviewPointerPosition = null;
     this.editorLayer = null;
     this.previewLayer = null;
     this.previewHighlightLayer = null;
@@ -329,6 +359,20 @@ export class CommentUiController {
     this.handleEditorScroll = () => this.scheduleLayoutRefresh();
     this.handlePreviewScroll = () => this.scheduleLayoutRefresh();
     this.handleWindowResize = () => this.scheduleLayoutRefresh();
+    this.handlePreviewPointerMove = (event) => {
+      this.lastPreviewPointerPosition = { x: event.clientX, y: event.clientY };
+      this.updateHoveredPreviewGroups(this.getPreviewGroupKeysAtPoint(event.clientX, event.clientY));
+    };
+    this.handlePreviewPointerLeave = () => {
+      this.lastPreviewPointerPosition = null;
+      this.updateHoveredPreviewGroups([]);
+    };
+    this.handlePreviewFocusIn = (event) => {
+      this.updateHoveredPreviewGroups(this.getPreviewGroupKeysForTarget(event.target));
+    };
+    this.handlePreviewFocusOut = (event) => {
+      this.updateHoveredPreviewGroups(this.getPreviewGroupKeysForTarget(event.relatedTarget));
+    };
     this.handleCommentSelectionButtonPointerDown = (event) => {
       event.preventDefault();
     };
@@ -384,13 +428,30 @@ export class CommentUiController {
       this.scheduleLayoutRefresh();
     };
     this.handleDocumentPointerDown = (event) => {
-      if (!this.activeCard || !this.cardRoot) {
+      const target = event.target;
+
+      if (this.activeCard && this.cardRoot) {
+        if (this.cardRoot.contains(target)) {
+          return;
+        }
+        this.closeCard();
+      }
+
+      if (!this.drawerOpen) {
         return;
       }
-      if (this.cardRoot.contains(event.target)) {
+
+      if (
+        target instanceof Node
+        && (
+          this.commentsDrawer?.contains(target)
+          || this.commentsToggleButton?.contains(target)
+        )
+      ) {
         return;
       }
-      this.closeCard();
+
+      this.closeDrawer();
     };
     this.handleDocumentKeyDown = (event) => {
       if (event.key === 'Escape' && this.reactionPicker) {
@@ -414,10 +475,13 @@ export class CommentUiController {
       this.openComposerForSelection('toolbar');
     });
     this.commentsToggleButton?.addEventListener('click', () => {
-      this.drawerOpen = !this.drawerOpen;
-      this.render();
+      this.setDrawerOpen(!this.drawerOpen);
     });
     this.previewContainer?.addEventListener('scroll', this.handlePreviewScroll, { passive: true });
+    this.previewElement?.addEventListener('pointermove', this.handlePreviewPointerMove, { passive: true });
+    this.previewElement?.addEventListener('pointerleave', this.handlePreviewPointerLeave);
+    this.previewElement?.addEventListener('focusin', this.handlePreviewFocusIn);
+    this.previewElement?.addEventListener('focusout', this.handlePreviewFocusOut);
     this.editorContainer?.addEventListener('pointerdown', this.handleEditorPointerDown);
     this.editorContainer?.addEventListener('focusout', this.handleEditorFocusOut);
     window.addEventListener('resize', this.handleWindowResize);
@@ -434,6 +498,10 @@ export class CommentUiController {
     }
     this.attachSession(null);
     this.previewContainer?.removeEventListener('scroll', this.handlePreviewScroll);
+    this.previewElement?.removeEventListener('pointermove', this.handlePreviewPointerMove);
+    this.previewElement?.removeEventListener('pointerleave', this.handlePreviewPointerLeave);
+    this.previewElement?.removeEventListener('focusin', this.handlePreviewFocusIn);
+    this.previewElement?.removeEventListener('focusout', this.handlePreviewFocusOut);
     this.commentSelectionButton?.removeEventListener('pointerdown', this.handleCommentSelectionButtonPointerDown);
     this.editorContainer?.removeEventListener('pointerdown', this.handleEditorPointerDown);
     this.editorContainer?.removeEventListener('focusout', this.handleEditorFocusOut);
@@ -442,6 +510,7 @@ export class CommentUiController {
     document.removeEventListener('pointercancel', this.handleDocumentPointerUp);
     document.removeEventListener('pointerdown', this.handleDocumentPointerDown);
     document.removeEventListener('keydown', this.handleDocumentKeyDown);
+    this.previewHoverRegions = [];
     this.cardRoot?.remove();
     this.editorLayer?.remove();
     this.previewLayer?.remove();
@@ -475,6 +544,10 @@ export class CommentUiController {
       this.clearSelectionRevealTimer();
       this.pointerSelecting = false;
       this.activeCard = null;
+      this.updateHoveredEditorGroups([]);
+      this.updateHoveredPreviewGroups([]);
+      this.previewHoverRegions = [];
+      this.lastPreviewPointerPosition = null;
       this.reactionPicker = null;
     }
     if (!this.supported) {
@@ -486,6 +559,10 @@ export class CommentUiController {
       this.committedSelectionAnchor = null;
       this.clearSelectionRevealTimer();
       this.pointerSelecting = false;
+      this.updateHoveredEditorGroups([]);
+      this.updateHoveredPreviewGroups([]);
+      this.previewHoverRegions = [];
+      this.lastPreviewPointerPosition = null;
       this.reactionPicker = null;
     }
     this.render();
@@ -569,6 +646,24 @@ export class CommentUiController {
     this.render();
   }
 
+  setDrawerOpen(nextState) {
+    const normalizedState = Boolean(nextState);
+    if (normalizedState === this.drawerOpen) {
+      return;
+    }
+
+    if (normalizedState) {
+      this.onWillOpenDrawer?.();
+    }
+
+    this.drawerOpen = normalizedState;
+    this.render();
+  }
+
+  closeDrawer() {
+    this.setDrawerOpen(false);
+  }
+
   refreshLayout() {
     this.renderEditorLayer();
     this.renderPreviewLayer();
@@ -721,11 +816,19 @@ export class CommentUiController {
       }
 
       const relativeRect = toRelativeRect(rect, containerRect);
+      if (relativeRect.bottom < 0 || relativeRect.top > containerRect.height) {
+        return;
+      }
+
       const button = document.createElement('button');
       button.type = 'button';
       button.className = 'comment-editor-badge';
       button.dataset.count = String(group.threads.length);
-      button.classList.toggle('is-active', this.activeCard?.groupKey === group.key);
+      const isActive = this.activeCard?.groupKey === group.key;
+      const isHovered = this.hoveredEditorGroupKeys.includes(group.key);
+      button.classList.toggle('is-active', isActive);
+      button.classList.toggle('is-hovered', isHovered);
+      button.classList.toggle('is-passive', !isActive && !isHovered);
       button.setAttribute('aria-label', `${group.threads.length} comment thread${group.threads.length === 1 ? '' : 's'}`);
       button.appendChild(createCommentMarkerContent(group.threads.length));
       const top = Math.max(relativeRect.top, 8);
@@ -735,6 +838,18 @@ export class CommentUiController {
       button.addEventListener('pointerdown', (event) => {
         event.preventDefault();
       });
+      button.addEventListener('pointerenter', () => {
+        this.updateHoveredEditorGroups([group.key]);
+      });
+      button.addEventListener('pointerleave', () => {
+        this.updateHoveredEditorGroups([]);
+      });
+      button.addEventListener('focusin', () => {
+        this.updateHoveredEditorGroups([group.key]);
+      });
+      button.addEventListener('focusout', () => {
+        this.updateHoveredEditorGroups([]);
+      });
       button.addEventListener('click', () => {
         this.openThreadGroup(group, {
           anchor: group.anchor,
@@ -804,20 +919,36 @@ export class CommentUiController {
     this.previewHighlightLayer?.replaceChildren();
 
     if (!this.supported || !this.previewElement) {
+      this.previewHoverRegions = [];
       return;
     }
 
     const previewRect = this.previewElement.getBoundingClientRect();
     const groups = this.getThreadGroups();
+    const occupiedTops = [];
+    const hoverRegions = [];
+    const showPassiveMarkers = this.shouldRenderPassivePreviewMarkers();
     groups.forEach((group) => {
       const target = this.resolvePreviewTarget(group.anchor);
       if (!target?.bubbleRect) {
         return;
       }
 
+      hoverRegions.push({
+        key: group.key,
+        rects: target.hoverRects?.length > 0 ? target.hoverRects : [target.bubbleRect],
+      });
+
+      const isActive = this.activeCard?.groupKey === group.key;
+      const isHovered = this.hoveredPreviewGroupKeys.includes(group.key);
+      const isEmphasized = isActive || isHovered;
+
       target.highlightRects?.forEach((rect) => {
         const highlight = document.createElement('div');
         highlight.className = 'comment-preview-highlight';
+        highlight.classList.toggle('is-active', isActive);
+        highlight.classList.toggle('is-hovered', isHovered);
+        highlight.classList.toggle('is-passive', !isEmphasized);
         highlight.style.left = `${rect.left - previewRect.left}px`;
         highlight.style.top = `${rect.top - previewRect.top}px`;
         highlight.style.width = `${rect.width}px`;
@@ -825,14 +956,32 @@ export class CommentUiController {
         this.previewHighlightLayer?.appendChild(highlight);
       });
 
+      if (!showPassiveMarkers && !isEmphasized) {
+        return;
+      }
+
       const bubble = document.createElement('button');
       bubble.type = 'button';
       bubble.className = 'comment-preview-badge';
-      bubble.classList.toggle('is-active', this.activeCard?.groupKey === group.key);
+      bubble.dataset.commentPreviewGroupKeys = group.key;
+      bubble.classList.toggle('is-active', isActive);
+      bubble.classList.toggle('is-hovered', isHovered);
+      bubble.classList.toggle('is-passive', !isEmphasized);
       bubble.setAttribute('aria-label', `${group.threads.length} comment thread${group.threads.length === 1 ? '' : 's'}`);
       bubble.appendChild(createCommentMarkerContent(group.threads.length));
-      bubble.style.left = `${clamp(target.bubbleRect.right - previewRect.left + 6, 6, this.previewElement.clientWidth - 34)}px`;
-      bubble.style.top = `${Math.max(target.bubbleRect.top - previewRect.top, 6)}px`;
+      let bubbleTop = clamp(
+        target.bubbleRect.top - previewRect.top,
+        6,
+        Math.max(this.previewElement.clientHeight - COMMENT_PREVIEW_RAIL_SLOT_HEIGHT, 6),
+      );
+      while (occupiedTops.some((top) => Math.abs(top - bubbleTop) < (COMMENT_PREVIEW_RAIL_SLOT_HEIGHT - 4))) {
+        bubbleTop = clamp(
+          bubbleTop + COMMENT_PREVIEW_RAIL_SLOT_HEIGHT,
+          6,
+          Math.max(this.previewElement.clientHeight - COMMENT_PREVIEW_RAIL_SLOT_HEIGHT, 6),
+        );
+      }
+      bubble.style.top = `${bubbleTop}px`;
       bubble.title = `${group.threads.length} comment${group.threads.length === 1 ? '' : 's'}`;
       bubble.addEventListener('pointerdown', (event) => {
         event.preventDefault();
@@ -841,11 +990,19 @@ export class CommentUiController {
         this.openThreadGroup(group, {
           anchor: group.anchor,
           origin: 'preview',
-          sourceRect: target.bubbleRect,
+          sourceRect: bubble.getBoundingClientRect(),
         });
       });
       this.previewLayer?.appendChild(bubble);
+      occupiedTops.push(bubbleTop);
     });
+
+    this.previewHoverRegions = hoverRegions;
+    if (this.lastPreviewPointerPosition) {
+      this.updateHoveredPreviewGroups(
+        this.getPreviewGroupKeysAtPoint(this.lastPreviewPointerPosition.x, this.lastPreviewPointerPosition.y),
+      );
+    }
   }
 
   resolvePreviewTarget(anchor) {
@@ -859,6 +1016,7 @@ export class CommentUiController {
       return {
         bubbleRect: diagramShell.getBoundingClientRect(),
         highlightRects: [],
+        hoverRects: [diagramShell.getBoundingClientRect()],
       };
     }
 
@@ -875,6 +1033,7 @@ export class CommentUiController {
         return {
           bubbleRect,
           highlightRects: rects,
+          hoverRects: rects,
         };
       }
     }
@@ -887,6 +1046,7 @@ export class CommentUiController {
     return {
       bubbleRect: fallback.getBoundingClientRect(),
       highlightRects: [],
+      hoverRects: [fallback.getBoundingClientRect()],
     };
   }
 
@@ -1079,6 +1239,69 @@ export class CommentUiController {
     this.scheduleLayoutRefresh();
   }
 
+  getPreviewGroupKeysForTarget(target) {
+    if (!(target instanceof Node)) {
+      return [];
+    }
+
+    const keyCarrier = target.closest?.('[data-comment-preview-group-keys]');
+    return serializeGroupKeys(
+      String(keyCarrier?.dataset?.commentPreviewGroupKeys ?? '')
+        .split(/\s+/)
+        .filter(Boolean),
+    ).split(' ').filter(Boolean);
+  }
+
+  getPreviewGroupKeysAtPoint(x, y) {
+    if (!Number.isFinite(x) || !Number.isFinite(y)) {
+      return [];
+    }
+
+    const targetAtPoint = document.elementFromPoint(x, y);
+    const targetKeys = this.getPreviewGroupKeysForTarget(targetAtPoint);
+    if (targetKeys.length > 0) {
+      return targetKeys;
+    }
+
+    const matchingKeys = this.previewHoverRegions
+      .filter((region) => region.rects.some((rect) => pointIntersectsRect(x, y, rect)))
+      .map((region) => region.key);
+    return normalizeGroupKeys(matchingKeys);
+  }
+
+  updateHoveredPreviewGroups(nextKeys = []) {
+    const normalizedKeys = normalizeGroupKeys(nextKeys);
+    const signature = normalizedKeys.join(' ');
+    if (signature === this.hoveredPreviewGroupKeysSignature) {
+      return;
+    }
+
+    this.hoveredPreviewGroupKeys = normalizedKeys;
+    this.hoveredPreviewGroupKeysSignature = signature;
+    this.scheduleLayoutRefresh();
+  }
+
+  updateHoveredEditorGroups(nextKeys = []) {
+    const normalizedKeys = normalizeGroupKeys(nextKeys);
+    const signature = normalizedKeys.join(' ');
+    if (signature === this.hoveredEditorGroupKeysSignature) {
+      return;
+    }
+
+    this.hoveredEditorGroupKeys = normalizedKeys;
+    this.hoveredEditorGroupKeysSignature = signature;
+    this.scheduleLayoutRefresh();
+  }
+
+  syncHoveredPreviewGroupsFromTarget(target) {
+    this.updateHoveredPreviewGroups(this.getPreviewGroupKeysForTarget(target));
+  }
+
+  shouldRenderPassivePreviewMarkers() {
+    const previewWidth = this.previewContainer?.clientWidth ?? this.previewElement?.clientWidth ?? 0;
+    return window.innerWidth >= COMMENT_PREVIEW_RAIL_BREAKPOINT && previewWidth >= COMMENT_PREVIEW_RAIL_MIN_WIDTH;
+  }
+
   updateReactionPickerPosition(card) {
     const bounds = getReactionPickerBounds(card);
     if (!bounds) {

package/src/client/presentation/file-explorer-controller.js

@@ -54,13 +54,20 @@ export class FileExplorerController {
   async refresh() {
     try {
       const data = await this.vaultClient.readTree();
-      this.state.setTree(data.tree || []);
-      this.renderTree();
+      this.setTree(data.tree || []);
     } catch (error) {
       console.error('[explorer] Failed to load file tree:', error.message);
     }
   }
 
+  setTree(tree, {
+    changedPaths = null,
+    reset = false,
+  } = {}) {
+    this.state.setTree(tree);
+    this.renderTree({ changedPaths, reset });
+  }
+
   setActiveFile(filePath) {
     this.state.setActiveFile(filePath);
     this.renderTree();
@@ -74,10 +81,15 @@ export class FileExplorerController {
     return this.state.flatFiles.filter((path) => !isImageAttachmentFilePath(path));
   }
 
-  renderTree() {
+  renderTree({
+    changedPaths = null,
+    reset = false,
+  } = {}) {
     this.view.render({
       activeFilePath: this.state.activeFilePath,
+      changedPaths,
       expandedDirs: this.state.expandedDirs,
+      reset,
       searchMatches: this.state.getSearchMatches(),
       searchQuery: this.state.searchQuery,
       tree: this.state.tree,

package/src/client/presentation/file-explorer-view.js

@@ -12,6 +12,29 @@ function getPathLeaf(path) {
     .pop() || '';
 }
 
+function getParentPath(pathValue) {
+  const normalized = String(pathValue ?? '').replace(/\/+$/u, '');
+  const separatorIndex = normalized.lastIndexOf('/');
+  return separatorIndex >= 0 ? normalized.slice(0, separatorIndex) : '';
+}
+
+function findNodeByPath(nodes = [], pathValue = '') {
+  for (const node of nodes) {
+    if (node.path === pathValue) {
+      return node;
+    }
+
+    if (node.type === 'directory' && Array.isArray(node.children)) {
+      const nested = findNodeByPath(node.children, pathValue);
+      if (nested) {
+        return nested;
+      }
+    }
+  }
+
+  return null;
+}
+
 export class FileExplorerView {
   constructor({
     onDirectoryToggle,
@@ -27,6 +50,9 @@ export class FileExplorerView {
     this.onTreeContextMenu = onTreeContextMenu;
     this.treeContainer = document.getElementById('fileTree');
     this.searchInput = document.getElementById('fileSearchInput');
+    this.renderedDirectoryWrappers = new Map();
+    this.renderedChildContainers = new Map();
+    this.lastRenderMode = 'tree';
   }
 
   initialize() {
@@ -44,30 +70,62 @@ export class FileExplorerView {
     });
   }
 
-  render({ activeFilePath, expandedDirs, searchMatches, searchQuery, tree }) {
+  render({ activeFilePath, changedPaths = null, expandedDirs, reset = false, searchMatches, searchQuery, tree }) {
     if (!this.treeContainer) {
       return;
     }
 
     if (searchQuery) {
+      this.lastRenderMode = 'search';
       this.renderSearchResults(searchMatches, activeFilePath);
       return;
     }
 
-    this.treeContainer.innerHTML = '';
+    if (
+      reset
+      || this.lastRenderMode !== 'tree'
+      || !Array.isArray(changedPaths)
+      || changedPaths.length === 0
+    ) {
+      this.renderFullTree(tree, {
+        activeFilePath,
+        expandedDirs,
+      });
+      this.lastRenderMode = 'tree';
+      return;
+    }
 
-    if (tree.length === 0) {
-      this.treeContainer.innerHTML = '<div class="file-tree-empty">No vault files found</div>';
+    const affectedParentPaths = Array.from(new Set(
+      changedPaths.map((pathValue) => getParentPath(pathValue)),
+    ))
+      .sort((left, right) => left.split('/').length - right.split('/').length)
+      .filter((pathValue, index, values) => (
+        !values.slice(0, index).some((ancestorPath) => ancestorPath && pathValue.startsWith(`${ancestorPath}/`))
+      ));
+    if (affectedParentPaths.includes('')) {
+      this.renderFullTree(tree, {
+        activeFilePath,
+        expandedDirs,
+      });
+      this.lastRenderMode = 'tree';
       return;
     }
 
-    const fragment = document.createDocumentFragment();
-    this.renderNodes(tree, fragment, {
-      activeFilePath,
-      depth: 0,
-      expandedDirs,
-    });
-    this.treeContainer.appendChild(fragment);
+    for (const parentPath of affectedParentPaths) {
+      if (!this.rerenderDirectoryBranch(parentPath, tree, {
+        activeFilePath,
+        expandedDirs,
+      })) {
+        this.renderFullTree(tree, {
+          activeFilePath,
+          expandedDirs,
+        });
+        this.lastRenderMode = 'tree';
+        return;
+      }
+    }
+
+    this.lastRenderMode = 'tree';
   }
 
   renderSearchResults(matches, activeFilePath) {
@@ -75,6 +133,7 @@ export class FileExplorerView {
       return;
     }
 
+    this.resetTreeIndexes();
     this.treeContainer.innerHTML = '';
 
     if (matches.length === 0) {
@@ -95,6 +154,29 @@ export class FileExplorerView {
     this.treeContainer.appendChild(fragment);
   }
 
+  renderFullTree(tree, { activeFilePath, expandedDirs }) {
+    this.resetTreeIndexes();
+    this.treeContainer.innerHTML = '';
+
+    if (tree.length === 0) {
+      this.treeContainer.innerHTML = '<div class="file-tree-empty">No vault files found</div>';
+      return;
+    }
+
+    const fragment = document.createDocumentFragment();
+    this.renderNodes(tree, fragment, {
+      activeFilePath,
+      depth: 0,
+      expandedDirs,
+    });
+    this.treeContainer.appendChild(fragment);
+  }
+
+  resetTreeIndexes() {
+    this.renderedDirectoryWrappers.clear();
+    this.renderedChildContainers.clear();
+  }
+
   renderNodes(nodes, container, { activeFilePath, depth, expandedDirs }) {
     for (const node of nodes) {
       if (node.type === 'directory') {
@@ -142,21 +224,80 @@ export class FileExplorerView {
     });
 
     wrapper.appendChild(button);
+    this.renderedDirectoryWrappers.set(node.path, wrapper);
 
     if (isExpanded && Array.isArray(node.children)) {
       const childContainer = document.createElement('div');
       childContainer.className = 'file-tree-children';
+      this.renderedChildContainers.set(node.path, childContainer);
       this.renderNodes(node.children, childContainer, {
         activeFilePath,
         depth: depth + 1,
         expandedDirs,
       });
       wrapper.appendChild(childContainer);
+    } else {
+      this.renderedChildContainers.delete(node.path);
     }
 
     return wrapper;
   }
 
+  rerenderDirectoryBranch(parentPath, tree, { activeFilePath, expandedDirs }) {
+    const wrapper = this.renderedDirectoryWrappers.get(parentPath);
+    const parentNode = findNodeByPath(tree, parentPath);
+    if (!wrapper || parentNode?.type !== 'directory') {
+      return false;
+    }
+
+    const button = wrapper.querySelector('.file-tree-dir');
+    const isExpanded = expandedDirs.has(parentPath);
+    button?.setAttribute('aria-expanded', String(isExpanded));
+    button?.querySelector('.file-tree-chevron')?.classList.toggle('expanded', isExpanded);
+
+    const depth = Number(button?.dataset.depth ?? 0);
+    let childContainer = this.renderedChildContainers.get(parentPath) ?? wrapper.querySelector('.file-tree-children');
+
+    this.clearRenderedDescendants(parentPath);
+
+    if (!isExpanded) {
+      childContainer?.remove();
+      this.renderedChildContainers.delete(parentPath);
+      return true;
+    }
+
+    if (!childContainer) {
+      childContainer = document.createElement('div');
+      childContainer.className = 'file-tree-children';
+      wrapper.appendChild(childContainer);
+    } else {
+      childContainer.innerHTML = '';
+    }
+    this.renderedChildContainers.set(parentPath, childContainer);
+
+    this.renderNodes(parentNode.children ?? [], childContainer, {
+      activeFilePath,
+      depth: depth + 1,
+      expandedDirs,
+    });
+
+    return true;
+  }
+
+  clearRenderedDescendants(parentPath) {
+    const prefix = `${parentPath}/`;
+    Array.from(this.renderedDirectoryWrappers.keys()).forEach((pathValue) => {
+      if (pathValue.startsWith(prefix)) {
+        this.renderedDirectoryWrappers.delete(pathValue);
+      }
+    });
+    Array.from(this.renderedChildContainers.keys()).forEach((pathValue) => {
+      if (pathValue.startsWith(prefix)) {
+        this.renderedChildContainers.delete(pathValue);
+      }
+    });
+  }
+
   createFileItem({ activeFilePath, depth, filePath, fileType = 'file', name }) {
     const button = document.createElement('button');
     button.className = 'file-tree-item file-tree-file';