@workbench-kit/react 0.0.2-prototype.0.1.2 → 0.0.2-prototype.0.2.2

package/src/workbench/workspace/WorkspaceEditorPanel.tsx

@@ -8,9 +8,10 @@ import { isSaveSuccess, type SaveResult } from '@workbench-kit/contracts';
 import { useWorkspaceDrafts } from './WorkspaceDraftsContext';
 import { ConfirmDialog } from '../../modal/ConfirmDialog';
 import { ContextMenu, type ContextMenuItem } from '../../overlay/ContextMenu';
-import { EmptyState } from '../../primitives/EmptyState';
-import { IconButton } from '../../primitives/IconButton';
-import { Panel, PanelBody } from '../../layout/Panel';
+import { Button } from '../../primitives/button';
+import { EmptyState } from '../../primitives/empty-state';
+import { IconButton } from '../../primitives/icon-button';
+import { Panel, PanelBody } from '../../layout/panel';
 import {
   WORKBENCH_COMMAND_SURFACE_EDITOR,
   commandMenuItemsToContextMenuItems,
@@ -56,7 +57,29 @@ export type WorkspaceEditorPanelRenderTabActions = (
   context: WorkspaceEditorPanelRenderTabActionsContext,
 ) => ReactNode;
 
+export type WorkspaceEditorPanelCanSaveFile = (
+  path: string,
+  content: string,
+  file: WorkspaceFile,
+) => boolean;
+
+/**
+ * Panel-level Ctrl/Cmd+S behavior.
+ * - `panel` (default): panel handles the shortcut
+ * - `editor`: when `renderEditor` is set, panel does not bind Ctrl/Cmd+S (host owns save)
+ * - `off`: never bind panel Ctrl/Cmd+S
+ */
+export type WorkspaceEditorPanelSaveShortcutMode = 'panel' | 'editor' | 'off';
+
+export interface WorkspaceEditorPanelSaveShortcutContext {
+  content: string;
+  path: string;
+  /** Persist via the panel draft save path (respects `canSaveFile`). */
+  save: () => void;
+}
+
 export interface WorkspaceEditorPanelProps {
+  canSaveFile?: WorkspaceEditorPanelCanSaveFile | undefined;
   emptyLabel?: string;
   files: WorkspaceFile[];
   onCloseAll?: () => void;
@@ -69,15 +92,22 @@ export interface WorkspaceEditorPanelProps {
     content: string,
     previousUpdatedAt?: string,
   ) => SaveResult | Promise<SaveResult | undefined> | undefined;
+  /**
+   * Called instead of the default panel save when Ctrl/Cmd+S fires and the panel
+   * still owns the binding. Call `save()` to persist, or skip to take ownership.
+   */
+  onSaveShortcut?: ((context: WorkspaceEditorPanelSaveShortcutContext) => void) | undefined;
   onSelectedPathChange: (path: string) => void;
   openPaths: string[];
   renderEditor?: WorkspaceEditorPanelRenderEditor | undefined;
   renderTabActions?: WorkspaceEditorPanelRenderTabActions | undefined;
+  saveShortcutMode?: WorkspaceEditorPanelSaveShortcutMode | undefined;
   selectedPath?: string;
   theme?: WorkspaceEditorTheme;
 }
 
 export function WorkspaceEditorPanel({
+  canSaveFile,
   emptyLabel = 'Open a file from Explorer or Search.',
   files,
   onCloseAll,
@@ -86,10 +116,12 @@ export function WorkspaceEditorPanel({
   onCopyPath,
   onDeletePath,
   onSaveFile,
+  onSaveShortcut,
   onSelectedPathChange,
   openPaths,
   renderEditor,
   renderTabActions,
+  saveShortcutMode = 'panel',
   selectedPath,
   theme,
 }: WorkspaceEditorPanelProps) {
@@ -118,7 +150,10 @@ export function WorkspaceEditorPanel({
   };
 
   const saveFile = (path: string, content: string) => {
-    Promise.resolve(onSaveFile?.(path, content, filesByPath.get(path)?.updatedAt))
+    const file = filesByPath.get(path);
+    if (!file || canSaveFile?.(path, content, file) === false) return;
+
+    Promise.resolve(onSaveFile?.(path, content, file.updatedAt))
       .then((result) => {
         if (!result || isSaveSuccess(result)) {
           saveDraftContext(path, content);
@@ -144,6 +179,7 @@ export function WorkspaceEditorPanel({
   ): WorkbenchEditorCommandContext => {
     const filePath = file?.path;
     const content = file ? getDraft(file.path, file.content) : '';
+    const saveAllowed = filePath && file ? canSaveFile?.(filePath, content, file) !== false : false;
 
     return {
       canCloseAll: Boolean(onCloseAll),
@@ -152,7 +188,10 @@ export function WorkspaceEditorPanel({
       canCopyPath: Boolean(onCopyPath),
       canDeletePath: Boolean(onDeletePath),
       canDiscardFile: Boolean(filePath),
-      canSaveFile: Boolean(filePath),
+      canSaveFile: saveAllowed,
+      canSplitDown: false,
+      canSplitRight: false,
+      canTogglePinned: false,
       closeAll: () => onCloseAll?.(),
       closeOthers: () => {
         if (filePath) onCloseOthers?.(filePath);
@@ -173,9 +212,13 @@ export function WorkspaceEditorPanel({
       hasMultipleOpenFiles: openFiles.length > 1,
       hasOpenFiles: openFiles.length > 0,
       hasUnsavedChanges: Boolean(file && isDirty(file.path, file.content)),
+      isPinned: false,
       saveFile: () => {
         if (filePath) saveFile(filePath, content);
       },
+      splitDown: () => undefined,
+      splitRight: () => undefined,
+      togglePinned: () => undefined,
     };
   };
 
@@ -212,7 +255,24 @@ export function WorkspaceEditorPanel({
               if (!selectedFile) return;
               if (event.key.toLowerCase() !== 's' || (!event.ctrlKey && !event.metaKey)) return;
 
+              const effectiveMode =
+                saveShortcutMode === 'editor' && renderEditor ? 'off' : saveShortcutMode;
+              if (effectiveMode === 'off') {
+                return;
+              }
+
               event.preventDefault();
+              if (onSaveShortcut) {
+                onSaveShortcut({
+                  content: selectedContent,
+                  path: selectedFile.path,
+                  save: () => {
+                    saveFile(selectedFile.path, selectedContent);
+                  },
+                });
+                return;
+              }
+
               saveFile(selectedFile.path, selectedContent);
             }}
           >
@@ -234,11 +294,10 @@ export function WorkspaceEditorPanel({
                       title={file.path}
                       onContextMenu={(event) => handleTabContextMenu(event, file.path)}
                     >
-                      <button
+                      <Button
                         aria-selected={isActive}
                         className="workspace-editor__tab-button"
                         role="tab"
-                        type="button"
                         onClick={() => onSelectedPathChange(file.path)}
                       >
                         <WorkspaceFileIcon mimeType={file.mimeType} path={file.path} />
@@ -246,7 +305,7 @@ export function WorkspaceEditorPanel({
                         {isDirtyValue ? (
                           <span className="workspace-editor__dirty" aria-label="Unsaved changes" />
                         ) : null}
-                      </button>
+                      </Button>
                       <IconButton
                         className="workspace-editor__tab-close"
                         icon="codicon-close"

package/src/workbench/workspace/WorkspaceExplorer.tsx

@@ -10,6 +10,7 @@ import {
   type ReactNode,
 } from 'react';
 import {
+  createEmptyWorkspaceSelection,
   getWorkspaceSelectionActionPaths,
   normalizeWorkspaceSelectionPaths,
   parentPathOf,
@@ -17,8 +18,10 @@ import {
   type WorkspaceSelectionMode,
   type WorkspaceSelectionState,
 } from '@workbench-kit/workspace';
-import { SideBarList, SideBarListItem, sideBarTreeDepthStyle } from '../../layout/SideBarViewFrame';
+import { SideBarList, SideBarListItem, useSidebarSectionBaseDepth } from '../../layout/sidebar';
+import { TextInput } from '../../primitives/text-input';
 import { cxCodicon } from '../../utils/codicon';
+import { explorerTreeDepthStyle } from './explorer-tree-style';
 import { flattenWorkspaceTree } from './tree';
 import { WorkspaceFileIcon } from './WorkspaceFileIcon';
 import type { WorkspaceTreeNode } from './types';
@@ -26,11 +29,14 @@ import type { WorkspaceTreeNode } from './types';
 export const WORKSPACE_EXPLORER_DRAG_DATA_TYPE = 'application/x-newchobo-ui-workspace-paths';
 export const WORKSPACE_EXPLORER_DRAG_METADATA_DATA_TYPE = `${WORKSPACE_EXPLORER_DRAG_DATA_TYPE}.metadata`;
 
+export type WorkspaceExplorerSelectionChangeReason =
+  'clear' | 'click' | 'context-menu' | 'drag-start' | 'folder-click';
+
 export interface WorkspaceExplorerSelectionChangeMeta {
-  event: DragEvent<HTMLButtonElement> | MouseEvent<HTMLButtonElement>;
-  mode: WorkspaceSelectionMode;
-  node: WorkspaceTreeNode;
-  reason: 'click' | 'context-menu' | 'drag-start';
+  event?: DragEvent<HTMLButtonElement> | MouseEvent<HTMLButtonElement>;
+  mode?: WorkspaceSelectionMode;
+  node?: WorkspaceTreeNode;
+  reason: WorkspaceExplorerSelectionChangeReason;
 }
 
 export interface WorkspaceExplorerItemActionMeta {
@@ -67,10 +73,7 @@ export interface WorkspaceExplorerMoveRequestMeta {
 }
 
 export type WorkspaceExplorerInlineEditKind =
-  | 'create-file'
-  | 'create-folder'
-  | 'rename-file'
-  | 'rename-folder';
+  'create-file' | 'create-folder' | 'rename-file' | 'rename-folder';
 
 export interface WorkspaceExplorerInlineEditState {
   error?: ReactNode;
@@ -99,6 +102,7 @@ export interface WorkspaceExplorerProps {
   onInlineEditCancel?: (edit: WorkspaceExplorerInlineEditState) => void;
   onInlineEditCommit?: (meta: WorkspaceExplorerInlineEditCommitMeta) => void;
   onInlineEditValueChange?: (value: string, edit: WorkspaceExplorerInlineEditState) => void;
+  onBackgroundContextMenu?: (event: MouseEvent<HTMLUListElement>) => void;
   onItemContextMenu?: (
     event: MouseEvent<HTMLButtonElement>,
     node: WorkspaceTreeNode,
@@ -112,6 +116,8 @@ export interface WorkspaceExplorerProps {
     meta: WorkspaceExplorerSelectionChangeMeta,
   ) => void;
   onToggleFolder: (path: string) => void;
+  focusedPath?: string | undefined;
+  renderItemActions?: (node: WorkspaceTreeNode, meta: WorkspaceExplorerItemActionMeta) => ReactNode;
   selectedPaths?: Iterable<string>;
   selectionAnchorPath?: string;
 }
@@ -123,9 +129,11 @@ export function WorkspaceExplorer({
   dragMetadataFactory,
   expandedPaths,
   filterQuery = '',
+  focusedPath,
   inlineEdit,
   nodes,
   onActivateFile,
+  onBackgroundContextMenu,
   onInlineEditCancel,
   onInlineEditCommit,
   onInlineEditValueChange,
@@ -135,11 +143,14 @@ export function WorkspaceExplorer({
   onRequestRename,
   onSelectionChange,
   onToggleFolder,
+  renderItemActions,
   selectedPaths = [],
   selectionAnchorPath,
 }: WorkspaceExplorerProps) {
+  const sectionBaseDepth = useSidebarSectionBaseDepth();
   const draggedPathsRef = useRef<string[]>([]);
   const inlineEditInputRef = useRef<HTMLInputElement>(null);
+  const inlineEditCommitStartedRef = useRef(false);
   const [dropTargetPath, setDropTargetPath] = useState<string | null>(null);
   const visibleNodes = useMemo(
     () => flattenWorkspaceTree({ expandedPaths, filterQuery, nodes }),
@@ -170,6 +181,7 @@ export function WorkspaceExplorer({
     : undefined;
 
   useEffect(() => {
+    inlineEditCommitStartedRef.current = false;
     const input = inlineEditInputRef.current;
     if (!input) return;
 
@@ -177,19 +189,29 @@ export function WorkspaceExplorer({
     input.select();
   }, [inlineEditKey]);
 
+  useEffect(() => {
+    // Validation failures keep the same draft id; allow Enter/blur retry after an error.
+    if (inlineEdit?.error) {
+      inlineEditCommitStartedRef.current = false;
+    }
+  }, [inlineEdit?.error]);
+
   const selectFile = (event: MouseEvent<HTMLButtonElement>, node: WorkspaceTreeNode) => {
     const mode = resolveSelectionMode(event);
+    const nextSelection = onSelectionChange
+      ? {
+          ...updateWorkspaceSelection({
+            mode,
+            orderedPaths: visibleFilePaths,
+            selection: currentSelection,
+            targetPath: node.path,
+          }),
+          focusedPath: node.path,
+        }
+      : currentSelection;
 
     if (onSelectionChange) {
-      onSelectionChange(
-        updateWorkspaceSelection({
-          mode,
-          orderedPaths: visibleFilePaths,
-          selection: currentSelection,
-          targetPath: node.path,
-        }),
-        { event, mode, node, reason: 'click' },
-      );
+      onSelectionChange(nextSelection, { event, mode, node, reason: 'click' });
     }
 
     if (mode === 'single' || !onSelectionChange) {
@@ -197,15 +219,48 @@ export function WorkspaceExplorer({
     }
   };
 
+  const selectFolder = (event: MouseEvent<HTMLButtonElement>, node: WorkspaceTreeNode) => {
+    onSelectionChange?.(
+      {
+        anchorPath: undefined,
+        focusedPath: node.path,
+        paths: [],
+      },
+      { event, mode: 'single', node, reason: 'folder-click' },
+    );
+    onToggleFolder(node.path);
+  };
+
+  const clearSelection = () => {
+    onSelectionChange?.(createEmptyWorkspaceSelection(), { reason: 'clear' });
+  };
+
   const getItemActionMeta = (node: WorkspaceTreeNode): WorkspaceExplorerItemActionMeta => {
-    const selected = node.type === 'file' && selectedPathSet.has(node.path);
-    const selection =
-      node.type === 'file' && !selected
-        ? {
-            anchorPath: node.path,
-            paths: [node.path],
-          }
-        : currentSelection;
+    if (node.type === 'folder') {
+      const selection = {
+        anchorPath: undefined,
+        focusedPath: node.path,
+        paths: [] as string[],
+      };
+
+      return {
+        actionPaths: [node.path],
+        selected: focusedPath === node.path,
+        selection,
+      };
+    }
+
+    const selected = selectedPathSet.has(node.path);
+    const selection = !selected
+      ? {
+          anchorPath: node.path,
+          focusedPath: node.path,
+          paths: [node.path],
+        }
+      : {
+          ...currentSelection,
+          focusedPath: node.path,
+        };
 
     return {
       actionPaths: getWorkspaceSelectionActionPaths({
@@ -218,15 +273,39 @@ export function WorkspaceExplorer({
   };
 
   const handleItemContextMenu = (event: MouseEvent<HTMLButtonElement>, node: WorkspaceTreeNode) => {
+    // Keep item menus from bubbling to the list background handler.
+    event.stopPropagation();
     const meta = getItemActionMeta(node);
 
     if (node.type === 'file' && !meta.selected) {
-      onSelectionChange?.(meta.selection, {
-        event,
-        mode: 'single',
-        node,
-        reason: 'context-menu',
-      });
+      onSelectionChange?.(
+        {
+          ...meta.selection,
+          focusedPath: node.path,
+        },
+        {
+          event,
+          mode: 'single',
+          node,
+          reason: 'context-menu',
+        },
+      );
+    }
+
+    if (node.type === 'folder') {
+      onSelectionChange?.(
+        {
+          anchorPath: undefined,
+          focusedPath: node.path,
+          paths: [],
+        },
+        {
+          event,
+          mode: 'single',
+          node,
+          reason: 'context-menu',
+        },
+      );
     }
 
     onItemContextMenu?.(event, node, meta);
@@ -238,7 +317,7 @@ export function WorkspaceExplorer({
     const meta = getItemActionMeta(node);
 
     if (event.key === 'Delete') {
-      if (node.type === 'file' && meta.actionPaths.length === 0) return;
+      if (meta.actionPaths.length === 0) return;
 
       event.preventDefault();
       onRequestDelete?.({ ...meta, event, node });
@@ -355,8 +434,10 @@ export function WorkspaceExplorer({
   };
 
   const commitInlineEdit = () => {
-    if (!inlineEdit) return;
+    if (!inlineEdit || inlineEditCommitStartedRef.current) return;
 
+    // Enter commits then blurs the same input; commit only once per draft.
+    inlineEditCommitStartedRef.current = true;
     onInlineEditCommit?.({
       edit: inlineEdit,
       value: inlineEdit.value.trim(),
@@ -393,27 +474,28 @@ export function WorkspaceExplorer({
   }) => {
     if (!inlineEdit) return null;
 
-    const depthStyle = sideBarTreeDepthStyle(depth);
+    const depthStyle = explorerTreeDepthStyle(sectionBaseDepth + depth);
 
     return (
-      <li key={key} className="ui-side-bar-list-entry">
-        <div className="ui-side-bar-inline-edit" style={depthStyle}>
+      <li key={key} className="ui-sidebar-list-entry">
+        <div className="ui-sidebar-inline-edit" style={depthStyle}>
           <span className="workbench-tree-prefix">
             <span className="workbench-tree-spacer" />
             <WorkspaceFileIcon directory={directory} mimeType={mimeType} path={path} />
           </span>
-          <input
+          <TextInput
             ref={inlineEditInputRef}
             aria-label="Workspace item name"
-            className="ui-side-bar-inline-edit__input"
+            className="ui-sidebar-inline-edit__input"
+            controlWidth="full"
             value={inlineEdit.value}
             onBlur={commitInlineEdit}
-            onChange={(event) => onInlineEditValueChange?.(event.currentTarget.value, inlineEdit)}
+            onValueChange={(value) => onInlineEditValueChange?.(value, inlineEdit)}
             onKeyDown={handleInlineEditKeyDown}
           />
         </div>
         {inlineEdit.error ? (
-          <div className="ui-side-bar-inline-edit__error" style={depthStyle}>
+          <div className="ui-sidebar-inline-edit__error" style={depthStyle}>
             {inlineEdit.error}
           </div>
         ) : null}
@@ -426,22 +508,23 @@ export function WorkspaceExplorer({
       fill
       aria-label="Workspace files"
       dropTarget={dropTargetPath === ''}
+      onContextMenu={(event) => {
+        onBackgroundContextMenu?.(event);
+      }}
       onDragLeave={(event) => handleDropTargetDragLeave(event, '')}
       onDragOver={(event) => handleDropTargetDragOver(event, '')}
       onDrop={(event) => handleDrop(event, '')}
+      onMouseDown={(event) => {
+        if (event.target === event.currentTarget) {
+          clearSelection();
+        }
+      }}
     >
-      {inlineEdit?.kind.startsWith('create') && !inlineEdit.parentPath
-        ? renderInlineEdit({
-            depth: 0,
-            directory: inlineEdit.kind === 'create-folder',
-            key: `inline-edit:${inlineEditKey}`,
-            path: inlineEdit.value,
-          })
-        : null}
       {visibleNodes.map(({ depth, node }) => {
         const isFolder = node.type === 'folder';
         const expanded = expandedPaths.has(node.path) || Boolean(filterQuery.trim());
-        const selected = node.type === 'file' && selectedPathSet.has(node.path);
+        const isFocused = focusedPath === node.path;
+        const selected = isFocused || (node.type === 'file' && selectedPathSet.has(node.path));
         const dropTarget = isFolder && dropTargetPath === node.path;
         const editingRename =
           inlineEdit?.kind.startsWith('rename') && inlineEdit.path === node.path;
@@ -458,6 +541,13 @@ export function WorkspaceExplorer({
           <Fragment key={node.path}>
             <SideBarListItem
               active={activePath === node.path}
+              after={
+                renderItemActions ? (
+                  <span className="ui-workspace-explorer-item-actions">
+                    {renderItemActions(node, getItemActionMeta(node))}
+                  </span>
+                ) : undefined
+              }
               data-workspace-path={node.path}
               depth={depth}
               draggable={Boolean(onRequestMove)}
@@ -465,7 +555,7 @@ export function WorkspaceExplorer({
               selected={selected}
               onClick={(event) => {
                 if (isFolder) {
-                  onToggleFolder(node.path);
+                  selectFolder(event, node);
                   return;
                 }
                 selectFile(event, node);
@@ -516,6 +606,14 @@ export function WorkspaceExplorer({
           </Fragment>
         );
       })}
+      {inlineEdit?.kind.startsWith('create') && !inlineEdit.parentPath
+        ? renderInlineEdit({
+            depth: 0,
+            directory: inlineEdit.kind === 'create-folder',
+            key: `inline-edit:${inlineEditKey}`,
+            path: inlineEdit.value,
+          })
+        : null}
       {visibleNodes.length === 0 ? <SideBarListItem disabled>No files</SideBarListItem> : null}
     </SideBarList>
   );

package/src/workbench/workspace/WorkspaceExplorerPanel.tsx

@@ -0,0 +1,73 @@
+import type { ReactNode } from 'react';
+import { SideBarViewFrame, SidebarToolbar, WorkbenchSidebarSection } from '../../layout/sidebar';
+import { IconButton } from '../../primitives/icon-button';
+import { cx } from '../../utils/cx';
+import { WorkspaceExplorer, type WorkspaceExplorerProps } from './WorkspaceExplorer';
+
+export interface WorkspaceExplorerPanelProps extends WorkspaceExplorerProps {
+  'aria-label'?: string | undefined;
+  className?: string | undefined;
+  onNewFile?: (() => void) | undefined;
+  onNewFolder?: (() => void) | undefined;
+  onRefresh?: (() => void) | undefined;
+  refreshLabel?: string;
+  sectionTitle?: string;
+  title?: string;
+  toolbarLeading?: ReactNode;
+  toolbarStatus?: ReactNode;
+  toolbarTrailing?: ReactNode;
+}
+
+export function WorkspaceExplorerPanel({
+  'aria-label': ariaLabel,
+  className,
+  onNewFile,
+  onNewFolder,
+  onRefresh,
+  refreshLabel = 'Refresh Explorer',
+  sectionTitle = 'Workspace',
+  title = 'Explorer',
+  toolbarLeading,
+  toolbarStatus,
+  toolbarTrailing,
+  ...explorerProps
+}: WorkspaceExplorerPanelProps) {
+  const hasDefaultActions = Boolean(onNewFile || onNewFolder || onRefresh);
+  const hasToolbarSlots = Boolean(toolbarLeading || toolbarTrailing || toolbarStatus);
+  const headerActions =
+    hasDefaultActions || hasToolbarSlots ? (
+      <SidebarToolbar
+        aria-label="Explorer actions"
+        className="ui-explorer-action-bar"
+        role="toolbar"
+      >
+        {toolbarLeading}
+        {onNewFile ? (
+          <IconButton compact icon="codicon-new-file" label="New file" onClick={onNewFile} />
+        ) : null}
+        {onNewFolder ? (
+          <IconButton compact icon="codicon-new-folder" label="New folder" onClick={onNewFolder} />
+        ) : null}
+        {onRefresh ? (
+          <IconButton compact icon="codicon-refresh" label={refreshLabel} onClick={onRefresh} />
+        ) : null}
+        {toolbarTrailing}
+        {toolbarStatus ? (
+          <span className="ui-explorer-action-bar__status">{toolbarStatus}</span>
+        ) : null}
+      </SidebarToolbar>
+    ) : undefined;
+
+  return (
+    <SideBarViewFrame
+      actions={headerActions}
+      aria-label={ariaLabel}
+      className={cx('workbench-explorer-view', 'ui-workspace-explorer-panel', className)}
+      title={title}
+    >
+      <WorkbenchSidebarSection id="workspace-explorer-section" title={sectionTitle}>
+        <WorkspaceExplorer {...explorerProps} />
+      </WorkbenchSidebarSection>
+    </SideBarViewFrame>
+  );
+}