dsh-explorer 0.1.0 → 0.1.1

package/src/client/{ExplorerContextMenu.tsx → components/ExplorerContextMenu.tsx}

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react'
-import css from './explorer.module.css'
-import type { FsEntry } from './api.ts'
+import css from '../explorer.module.css'
+import type { FsEntry } from '../utils/api.ts'
 
 interface ContextMenuProps {
   x: number
@@ -47,7 +47,6 @@ export const ExplorerContextMenu: React.FC<ContextMenuProps> = ({
     return () => window.removeEventListener('mousedown', handleOutsideClick)
   }, [onClose])
 
-  // Adjust menu bounds if overflowing screen
   const top = Math.min(y, window.innerHeight - 260)
   const left = Math.min(x, window.innerWidth - 200)
 
@@ -156,4 +155,3 @@ export const ExplorerContextMenu: React.FC<ContextMenuProps> = ({
     </div>
   )
 }
-

package/src/client/components/ExplorerDeleteModal.tsx

@@ -0,0 +1,124 @@
+import React, { useEffect, useRef, useState } from 'react'
+import css from '../explorer.module.css'
+import type { FsEntry } from '../utils/api.ts'
+import { renderFileIcon } from '../utils/vscode-theme.tsx'
+
+interface ExplorerDeleteModalProps {
+  entry: FsEntry
+  relativePath: string
+  onConfirm: () => Promise<void>
+  onClose: () => void
+}
+
+export const ExplorerDeleteModal: React.FC<ExplorerDeleteModalProps> = ({
+  entry,
+  relativePath,
+  onConfirm,
+  onClose,
+}) => {
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const cancelBtnRef = useRef<HTMLButtonElement>(null)
+  const modalRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    cancelBtnRef.current?.focus()
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault()
+        onClose()
+      }
+    }
+
+    const handleMouseDown = (e: MouseEvent) => {
+      if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
+        onClose()
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+    document.addEventListener('mousedown', handleMouseDown)
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+      document.removeEventListener('mousedown', handleMouseDown)
+    }
+  }, [onClose])
+
+  const handleDelete = async () => {
+    if (loading) return
+    setLoading(true)
+    setError(null)
+    try {
+      await onConfirm()
+      onClose()
+    } catch (err: any) {
+      setError(err?.message || 'Failed to delete')
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className={css.modalOverlay}>
+      <div ref={modalRef} className={css.modalCard} role="dialog" aria-modal="true">
+        <div className={css.modalHeader}>
+          <div className={css.modalTitleWrap}>
+            <svg width="15" height="15" viewBox="0 0 16 16" fill="currentColor">
+              <path d="M6.5 1h3a.5.5 0 0 1 .5.5v1H14a.5.5 0 0 1 0 1h-.6l-.8 11.2A2 2 0 0 1 10.6 16H5.4a2 2 0 0 1-2-1.8L2.6 3.5H2a.5.5 0 0 1 0-1h4v-1a.5.5 0 0 1 .5-.5zM7 2v.5h2V2H7zm-2.4 12.4a1 1 0 0 0 1 .6h5.2a1 1 0 0 0 1-.9L12.4 3.5H3.6l.8 10.9h.2zm2.9-9.9a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zm3 0a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5z" />
+            </svg>
+            <span>{entry.isDir ? 'Delete Folder' : 'Delete File'}</span>
+          </div>
+          <button className={css.optionsIconBtn} title="Close" onClick={onClose}>
+            <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor">
+              <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
+            </svg>
+          </button>
+        </div>
+
+        <div className={css.modalBody}>
+          <div>
+            Are you sure you want to permanently delete this {entry.isDir ? 'directory' : 'file'}?
+          </div>
+
+          <div className={css.modalItemPreview}>
+            <span className={css.iconWrap}>
+              {renderFileIcon(entry.name, entry.isDir, false, 16)}
+            </span>
+            <div className={css.modalItemInfo}>
+              <div className={css.modalItemName}>{entry.name}</div>
+              <div className={css.modalItemPath}>{relativePath}</div>
+            </div>
+          </div>
+
+          {entry.isDir && (
+            <div className={css.modalWarning}>
+              Warning: All nested files and subdirectories inside this folder will be permanently removed.
+            </div>
+          )}
+
+          {error && <div className={css.modalErrorBanner}>{error}</div>}
+        </div>
+
+        <div className={css.modalFooter}>
+          <button
+            ref={cancelBtnRef}
+            type="button"
+            className={css.modalBtnCancel}
+            onClick={onClose}
+            disabled={loading}
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            className={css.modalBtnDanger}
+            onClick={handleDelete}
+            disabled={loading}
+          >
+            {loading ? 'Deleting...' : 'Delete'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/client/components/ExplorerEmptyContextMenu.tsx

@@ -0,0 +1,125 @@
+import React, { useEffect, useRef } from 'react'
+import css from '../explorer.module.css'
+
+interface ExplorerEmptyContextMenuProps {
+  x: number
+  y: number
+  onClose: () => void
+  onNewFile: () => void
+  onNewFolder: () => void
+  onToggleSearch: () => void
+  onExpandAll: () => void
+  onCollapseAll: () => void
+  onRefresh: () => void
+  onOpenOptions: () => void
+}
+
+export const ExplorerEmptyContextMenu: React.FC<ExplorerEmptyContextMenuProps> = ({
+  x,
+  y,
+  onClose,
+  onNewFile,
+  onNewFolder,
+  onToggleSearch,
+  onExpandAll,
+  onCollapseAll,
+  onRefresh,
+  onOpenOptions,
+}) => {
+  const menuRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const handleOutsideClick = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        onClose()
+      }
+    }
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose()
+      }
+    }
+    window.addEventListener('mousedown', handleOutsideClick)
+    window.addEventListener('keydown', handleKeyDown)
+    return () => {
+      window.removeEventListener('mousedown', handleOutsideClick)
+      window.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [onClose])
+
+  const top = Math.min(y, window.innerHeight - 250)
+  const left = Math.min(x, window.innerWidth - 200)
+
+  return (
+    <div ref={menuRef} className={css.contextMenu} style={{ top, left }}>
+      <div
+        className={css.menuItem}
+        onClick={() => {
+          onNewFile()
+          onClose()
+        }}
+      >
+        <span>New File...</span>
+      </div>
+      <div
+        className={css.menuItem}
+        onClick={() => {
+          onNewFolder()
+          onClose()
+        }}
+      >
+        <span>New Folder...</span>
+      </div>
+      <div className={css.menuDivider} />
+      <div
+        className={css.menuItem}
+        onClick={() => {
+          onToggleSearch()
+          onClose()
+        }}
+      >
+        <span>Search Files...</span>
+        <span className={css.menuShortcut}>Ctrl+F</span>
+      </div>
+      <div className={css.menuDivider} />
+      <div
+        className={css.menuItem}
+        onClick={() => {
+          onExpandAll()
+          onClose()
+        }}
+      >
+        <span>Expand All</span>
+      </div>
+      <div
+        className={css.menuItem}
+        onClick={() => {
+          onCollapseAll()
+          onClose()
+        }}
+      >
+        <span>Collapse All</span>
+      </div>
+      <div className={css.menuDivider} />
+      <div
+        className={css.menuItem}
+        onClick={() => {
+          onRefresh()
+          onClose()
+        }}
+      >
+        <span>Refresh</span>
+      </div>
+      <div className={css.menuDivider} />
+      <div
+        className={css.menuItem}
+        onClick={() => {
+          onOpenOptions()
+          onClose()
+        }}
+      >
+        <span>Display Preferences...</span>
+      </div>
+    </div>
+  )
+}

package/src/client/{ExplorerHeader.tsx → components/ExplorerHeader.tsx}

@@ -1,5 +1,5 @@
 import React from 'react'
-import css from './explorer.module.css'
+import css from '../explorer.module.css'
 
 interface ExplorerHeaderProps {
   title: string
@@ -10,6 +10,7 @@ interface ExplorerHeaderProps {
   onNewFile: () => void
   onNewFolder: () => void
   onRefresh: () => void
+  onExpandAll: () => void
   onCollapseAll: () => void
 }
 
@@ -22,6 +23,7 @@ export const ExplorerHeader: React.FC<ExplorerHeaderProps> = ({
   onNewFile,
   onNewFolder,
   onRefresh,
+  onExpandAll,
   onCollapseAll,
 }) => {
   return (
@@ -32,39 +34,44 @@ export const ExplorerHeader: React.FC<ExplorerHeaderProps> = ({
       <div className={css.headerActions}>
         <button
           className={`${css.iconBtn} ${searchOpen ? css.iconBtnActive : ''}`}
-          title="Filter files"
+          title="Search files and folders"
           onClick={onToggleSearch}
         >
-          <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
             <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
           </svg>
         </button>
         <button className={css.iconBtn} title="New File" onClick={onNewFile}>
-          <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
             <path d="M9 1H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6L9 1zm0 1.5L12.5 6H9V2.5zM8 8.5V11h1V8.5h2.5v-1H9V5H8v2.5H5.5v1H8z"/>
           </svg>
         </button>
         <button className={css.iconBtn} title="New Folder" onClick={onNewFolder}>
-          <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
             <path d="M7 2l2 2h5a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h5zm2.5 6.5H8V6H7v2.5H4.5v1H7V12h1V9.5h2.5v-1z"/>
           </svg>
         </button>
         <button className={css.iconBtn} title="Refresh" onClick={onRefresh}>
-          <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
             <path d="M13.65 2.35A7.958 7.958 0 0 0 8 0a8 8 0 1 0 8 8h-2a6 6 0 1 1-1.76-4.24l-2.24 2.24H16V0l-2.35 2.35z"/>
           </svg>
         </button>
-        <button className={css.iconBtn} title="Collapse All Folders" onClick={onCollapseAll}>
-          <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
-            <path d="M1 3.5l1.5-1.5L8 7.5 13.5 2 15 3.5 8 10.5 1 3.5zM1 9.5l1.5-1.5L8 13.5 13.5 8 15 9.5 8 16.5 1 9.5z"/>
+        <button className={css.iconBtn} title="Expand All" onClick={onExpandAll}>
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+            <path d="M4.646 5.854a.5.5 0 0 1 0-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8 3.207 5.354 5.854a.5.5 0 0 1-.708 0zm0 4.292a.5.5 0 0 0 0 .708l3 3a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8 12.793l-2.646-2.647a.5.5 0 0 0-.708 0z"/>
+          </svg>
+        </button>
+        <button className={css.iconBtn} title="Collapse All" onClick={onCollapseAll}>
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+            <path d="M4.646 2.854a.5.5 0 0 0 0 .708l3 3a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8 5.293 5.354 2.854a.5.5 0 0 0-.708 0zm0 10.292a.5.5 0 0 1 0-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8 10.707l-2.646 2.647a.5.5 0 0 1-.708 0z"/>
           </svg>
         </button>
         <button
           className={`${css.iconBtn} ${optionsOpen ? css.iconBtnActive : ''}`}
-          title="Explorer Options"
+          title="Explorer display preferences"
           onClick={onToggleOptions}
         >
-          <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
             <path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
           </svg>
         </button>
@@ -72,4 +79,3 @@ export const ExplorerHeader: React.FC<ExplorerHeaderProps> = ({
     </div>
   )
 }
-

package/src/client/{ExplorerOptionsModal.tsx → components/ExplorerOptionsModal.tsx}

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react'
-import css from './explorer.module.css'
-import type { ExplorerOptions, ExplorerDensity, SingleClickAction } from './options.ts'
+import css from '../explorer.module.css'
+import type { ExplorerOptions, ExplorerDensity, SingleClickAction } from '../utils/options.ts'
 
 interface ExplorerOptionsModalProps {
   options: ExplorerOptions
@@ -17,7 +17,6 @@ export const ExplorerOptionsModal: React.FC<ExplorerOptionsModalProps> = ({
 }) => {
   const popoverRef = useRef<HTMLDivElement>(null)
 
-  // Close on Click Outside & Escape key
   useEffect(() => {
     const handleMouseDown = (e: MouseEvent) => {
       if (popoverRef.current && !popoverRef.current.contains(e.target as Node)) {
@@ -55,7 +54,6 @@ export const ExplorerOptionsModal: React.FC<ExplorerOptionsModalProps> = ({
 
   return (
     <div ref={popoverRef} className={css.optionsPopover}>
-      {/* Header */}
       <div className={css.optionsHeader}>
         <div className={css.optionsHeaderTitle}>
           <svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor" style={{ marginRight: '6px' }}>
@@ -77,13 +75,9 @@ export const ExplorerOptionsModal: React.FC<ExplorerOptionsModalProps> = ({
         </div>
       </div>
 
-      {/* Body */}
       <div className={css.optionsBody}>
-        {/* Section 1: Density & Scale */}
         <div className={css.optionsSection}>
           <div className={css.optionsSectionTitle}>Scale & Density</div>
-
-          {/* Density preset buttons */}
           <div className={css.segmentGroup}>
             <button
               type="button"
@@ -108,7 +102,6 @@ export const ExplorerOptionsModal: React.FC<ExplorerOptionsModalProps> = ({
             </button>
           </div>
 
-          {/* Scale zoom slider */}
           <div className={css.optionsRow} style={{ marginTop: '6px' }}>
             <div className={css.optionsLabelWrap}>
               <span className={css.optionsLabel}>Zoom Scale</span>
@@ -139,7 +132,6 @@ export const ExplorerOptionsModal: React.FC<ExplorerOptionsModalProps> = ({
           />
         </div>
 
-        {/* Section 2: Motion & Animation */}
         <div className={css.optionsSection}>
           <div className={css.optionsSectionTitle}>Motion & Transitions</div>
           <div className={css.optionsRow}>
@@ -158,11 +150,9 @@ export const ExplorerOptionsModal: React.FC<ExplorerOptionsModalProps> = ({
           </div>
         </div>
 
-        {/* Section 3: File Tree Display */}
         <div className={css.optionsSection}>
           <div className={css.optionsSectionTitle}>Workspace View</div>
 
-          {/* Show hidden files */}
           <div className={css.optionsRow}>
             <div className={css.optionsLabelWrap}>
               <span className={css.optionsLabel}>Show Hidden Files</span>
@@ -178,7 +168,6 @@ export const ExplorerOptionsModal: React.FC<ExplorerOptionsModalProps> = ({
             </div>
           </div>
 
-          {/* Git badges */}
           <div className={css.optionsRow}>
             <div className={css.optionsLabelWrap}>
               <span className={css.optionsLabel}>Git Status Indicators</span>
@@ -194,7 +183,6 @@ export const ExplorerOptionsModal: React.FC<ExplorerOptionsModalProps> = ({
             </div>
           </div>
 
-          {/* Compact folders */}
           <div className={css.optionsRow}>
             <div className={css.optionsLabelWrap}>
               <span className={css.optionsLabel}>Compact Folders</span>
@@ -211,7 +199,6 @@ export const ExplorerOptionsModal: React.FC<ExplorerOptionsModalProps> = ({
           </div>
         </div>
 
-        {/* Section 4: Quick Workflow */}
         <div className={css.optionsSection}>
           <div className={css.optionsSectionTitle}>Interaction</div>
           <div className={css.optionsRow}>

package/src/client/{ExplorerRow.tsx → components/ExplorerRow.tsx}

@@ -1,9 +1,9 @@
 import React, { useState, useRef, useEffect } from 'react'
-import css from './explorer.module.css'
-import type { FsEntry } from './api.ts'
-import type { SingleClickAction } from './options.ts'
-import { renderFileIcon } from './vscode-theme.tsx'
-import { setupDragStart, setupDragEnd, type DragExplorerItem } from './drag-drop.ts'
+import css from '../explorer.module.css'
+import type { FsEntry } from '../utils/api.ts'
+import type { SingleClickAction } from '../utils/options.ts'
+import { renderFileIcon } from '../utils/vscode-theme.tsx'
+import { setupDragStart, setupDragEnd, type DragExplorerItem } from '../utils/drag-drop.ts'
 
 interface ExplorerRowProps {
   entry: FsEntry
@@ -11,6 +11,7 @@ interface ExplorerRowProps {
   isExpanded: boolean
   isSelected: boolean
   isFocused: boolean
+  isRenaming?: boolean
   gitStatus?: string
   relativePath: string
   compactChain?: FsEntry[]
@@ -26,6 +27,8 @@ interface ExplorerRowProps {
   onContextMenu: (e: React.MouseEvent) => void
   onInsertReference: () => void
   onCopyRelativePath: () => void
+  onStartRename?: () => void
+  onCancelRename?: () => void
   onRenameSubmit: (newName: string) => void
   onDelete: () => void
 }
@@ -36,6 +39,7 @@ export const ExplorerRow: React.FC<ExplorerRowProps> = ({
   isExpanded,
   isSelected,
   isFocused,
+  isRenaming = false,
   gitStatus,
   relativePath,
   compactChain,
@@ -51,19 +55,30 @@ export const ExplorerRow: React.FC<ExplorerRowProps> = ({
   onContextMenu,
   onInsertReference,
   onCopyRelativePath,
+  onStartRename,
+  onCancelRename,
   onRenameSubmit,
   onDelete,
 }) => {
-  const [isRenaming, setIsRenaming] = useState(false)
   const [renameVal, setRenameVal] = useState(entry.name)
   const inputRef = useRef<HTMLInputElement>(null)
 
   useEffect(() => {
     if (isRenaming) {
-      inputRef.current?.focus()
-      inputRef.current?.select()
+      setRenameVal(entry.name)
+      requestAnimationFrame(() => {
+        if (inputRef.current) {
+          inputRef.current.focus()
+          const dotIndex = entry.isDir ? -1 : entry.name.lastIndexOf('.')
+          if (dotIndex > 0) {
+            inputRef.current.setSelectionRange(0, dotIndex)
+          } else {
+            inputRef.current.select()
+          }
+        }
+      })
     }
-  }, [isRenaming])
+  }, [isRenaming, entry.name, entry.isDir])
 
   const handleDragStart = (e: React.DragEvent) => {
     const item: DragExplorerItem = {
@@ -77,25 +92,35 @@ export const ExplorerRow: React.FC<ExplorerRowProps> = ({
 
   const handleRenameKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === 'Enter') {
+      e.stopPropagation()
       const trimmed = renameVal.trim()
       if (trimmed && trimmed !== entry.name) {
         onRenameSubmit(trimmed)
+      } else {
+        onCancelRename?.()
       }
-      setIsRenaming(false)
     } else if (e.key === 'Escape') {
+      e.stopPropagation()
       setRenameVal(entry.name)
-      setIsRenaming(false)
+      onCancelRename?.()
+    }
+  }
+
+  const handleRenameBlur = () => {
+    const trimmed = renameVal.trim()
+    if (trimmed && trimmed !== entry.name) {
+      onRenameSubmit(trimmed)
+    } else {
+      onCancelRename?.()
     }
   }
 
-  // Display label: if compactFolders is on and compactChain has elements, join their names (e.g. "vscode/antigravity-quota-context")
   const displayName = compactFolders && compactChain && compactChain.length > 1
     ? compactChain.map((c) => c.name).join('/')
     : (compactFolders && entry.compactName
       ? entry.compactName
       : entry.name)
 
-  // Git status styling
   let gitClass = ''
   let gitLetter = ''
   if (gitStatus) {
@@ -108,6 +133,9 @@ export const ExplorerRow: React.FC<ExplorerRowProps> = ({
     } else if (gitStatus.includes('D')) {
       gitClass = css.gitDeleted
       gitLetter = 'D'
+    } else if (gitStatus.includes('R')) {
+      gitClass = css.gitModified
+      gitLetter = 'R'
     }
   }
 
@@ -118,6 +146,7 @@ export const ExplorerRow: React.FC<ExplorerRowProps> = ({
       className={`${css.row} ${isSelected ? css.rowSelected : ''} ${isFocused ? css.rowFocused : ''}`}
       style={{ paddingLeft: `${depth * indentStep + 8}px` }}
       onClick={(e) => {
+        if (isRenaming) return
         onSelect(e)
         if (entry.isDir) {
           onToggle()
@@ -126,6 +155,7 @@ export const ExplorerRow: React.FC<ExplorerRowProps> = ({
         }
       }}
       onDoubleClick={(e) => {
+        if (isRenaming) return
         if (!entry.isDir) {
           e.stopPropagation()
           onDoubleClick?.()
@@ -136,7 +166,6 @@ export const ExplorerRow: React.FC<ExplorerRowProps> = ({
       onDragStart={handleDragStart}
       onDragEnd={setupDragEnd}
     >
-      {/* Indentation guide lines */}
       {Array.from({ length: depth }).map((_, i) => (
         <span
           key={i}
@@ -145,7 +174,6 @@ export const ExplorerRow: React.FC<ExplorerRowProps> = ({
         />
       ))}
 
-      {/* Expand/Collapse Chevron */}
       <span
         className={`${css.chevron} ${isExpanded ? css.chevronExpanded : ''} ${!entry.isDir ? css.chevronHidden : ''}`}
         style={!enableMotion ? { transition: 'none' } : undefined}
@@ -159,12 +187,10 @@ export const ExplorerRow: React.FC<ExplorerRowProps> = ({
         </svg>
       </span>
 
-      {/* Language / Folder Icon */}
       <span className={css.iconWrap}>
         {renderFileIcon(entry.name, entry.isDir, isExpanded, iconSize)}
       </span>
 
-      {/* Label or Inline Rename */}
       {isRenaming ? (
         <input
           ref={inputRef}
@@ -173,13 +199,7 @@ export const ExplorerRow: React.FC<ExplorerRowProps> = ({
           value={renameVal}
           onChange={(e) => setRenameVal(e.target.value)}
           onKeyDown={handleRenameKeyDown}
-          onBlur={() => {
-            const trimmed = renameVal.trim()
-            if (trimmed && trimmed !== entry.name) {
-              onRenameSubmit(trimmed)
-            }
-            setIsRenaming(false)
-          }}
+          onBlur={handleRenameBlur}
           onClick={(e) => e.stopPropagation()}
         />
       ) : (
@@ -191,10 +211,8 @@ export const ExplorerRow: React.FC<ExplorerRowProps> = ({
         </span>
       )}
 
-      {/* Git status badge */}
       {showGitBadges && gitLetter && <span className={`${css.gitBadge} ${gitClass}`}>{gitLetter}</span>}
 
-      {/* Hover actions */}
       {!isRenaming && (
         <div className={css.hoverActions} onClick={(e) => e.stopPropagation()}>
           <button
@@ -226,7 +244,7 @@ export const ExplorerRow: React.FC<ExplorerRowProps> = ({
             title="Rename (F2)"
             onClick={(e) => {
               e.stopPropagation()
-              setIsRenaming(true)
+              onStartRename?.()
             }}
           >
             <svg width="11" height="11" viewBox="0 0 16 16" fill="currentColor">