@workbench-kit/react 0.0.2-prototype.0.1.4 → 0.0.2-prototype.0.2.10

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>
+  );
+}

package/src/workbench/workspace/WorkspaceFileIcon.tsx

@@ -1,155 +1,5 @@
-import { cxCodicon } from '../../utils/codicon';
-import {
-  JDW_DOCUMENT_MIME,
-  JDW_SCHEMA_DOCUMENT_MIME,
-  isJdwDocumentPath,
-  isJdwSchemaDocumentPath,
-} from '../../jdw/document';
-import { extensionOfPath, fileNameOfPath } from './path';
-
-export type WorkspaceFileIconKind =
-  | 'archive'
-  | 'config'
-  | 'css'
-  | 'default'
-  | 'env'
-  | 'folder'
-  | 'git'
-  | 'html'
-  | 'image'
-  | 'jdw'
-  | 'jdw-schema'
-  | 'javascript'
-  | 'json'
-  | 'lock'
-  | 'markdown'
-  | 'package'
-  | 'pdf'
-  | 'schema'
-  | 'sql'
-  | 'text'
-  | 'typescript'
-  | 'vue'
-  | 'xml'
-  | 'yaml';
-
-export function fileIconKindForPath(path: string, mimeType?: string): WorkspaceFileIconKind {
-  const fileName = fileNameOfPath(path).toLowerCase();
-  const extension = extensionOfPath(path);
-
-  if (fileName === 'package.json') return 'package';
-  if (fileName.endsWith('.lock') || fileName.includes('lock')) return 'lock';
-  if (fileName.startsWith('.env')) return 'env';
-  if (fileName.startsWith('.git')) return 'git';
-  if (isJdwSchemaDocumentPath(path) || mimeType === JDW_SCHEMA_DOCUMENT_MIME) return 'jdw-schema';
-  if (isJdwDocumentPath(path) || mimeType === JDW_DOCUMENT_MIME) return 'jdw';
-  if (fileName.endsWith('.schema.json') || mimeType === 'application/schema+json') return 'schema';
-  if (mimeType?.startsWith('image/')) return 'image';
-  if (mimeType === 'application/pdf' || extension === 'pdf') return 'pdf';
-
-  switch (extension) {
-    case '7z':
-    case 'gz':
-    case 'rar':
-    case 'tar':
-    case 'zip':
-      return 'archive';
-    case 'css':
-    case 'less':
-    case 'scss':
-      return 'css';
-    case 'html':
-      return 'html';
-    case 'jpeg':
-    case 'jpg':
-    case 'png':
-    case 'svg':
-    case 'webp':
-      return 'image';
-    case 'cjs':
-    case 'js':
-    case 'jsx':
-    case 'mjs':
-      return 'javascript';
-    case 'json':
-      return 'json';
-    case 'md':
-    case 'mdx':
-      return 'markdown';
-    case 'sql':
-      return 'sql';
-    case 'ts':
-    case 'tsx':
-      return 'typescript';
-    case 'vue':
-      return 'vue';
-    case 'xml':
-      return 'xml';
-    case 'yaml':
-    case 'yml':
-      return 'yaml';
-    case 'ini':
-    case 'toml':
-      return 'config';
-    case 'txt':
-      return 'text';
-    default:
-      return 'default';
-  }
-}
-
-export function codiconForFileKind(kind: WorkspaceFileIconKind) {
-  switch (kind) {
-    case 'archive':
-      return 'codicon-file-zip';
-    case 'config':
-      return 'codicon-settings';
-    case 'css':
-      return 'codicon-symbol-color';
-    case 'env':
-      return 'codicon-key';
-    case 'folder':
-      return 'codicon-folder';
-    case 'git':
-      return 'codicon-source-control';
-    case 'html':
-      return 'codicon-code';
-    case 'image':
-      return 'codicon-file-media';
-    case 'jdw':
-      return 'codicon-layout';
-    case 'jdw-schema':
-      return 'codicon-symbol-property';
-    case 'javascript':
-      return 'codicon-symbol-method';
-    case 'json':
-      return 'codicon-json';
-    case 'lock':
-      return 'codicon-lock';
-    case 'markdown':
-      return 'codicon-markdown';
-    case 'package':
-      return 'codicon-package';
-    case 'pdf':
-      return 'codicon-file-pdf';
-    case 'schema':
-      return 'codicon-symbol-property';
-    case 'sql':
-      return 'codicon-database';
-    case 'text':
-      return 'codicon-file-text';
-    case 'typescript':
-      return 'codicon-symbol-class';
-    case 'vue':
-      return 'codicon-symbol-object';
-    case 'xml':
-      return 'codicon-code';
-    case 'yaml':
-      return 'codicon-symbol-property';
-    default:
-      return 'codicon-file';
-  }
-}
+import { codiconForFileKind, fileIconKindForPath, type FileIconKind } from '../../icons/file-icon';
+import { FileIcon } from '../../primitives/file-icon';
 
 export interface WorkspaceFileIconProps {
   className?: string;
@@ -166,14 +16,8 @@ export function WorkspaceFileIcon({
   mimeType,
   path,
 }: WorkspaceFileIconProps) {
-  const kind = directory ? 'folder' : fileIconKindForPath(path, mimeType);
+  const kind: FileIconKind = directory ? 'folder' : fileIconKindForPath(path, mimeType);
   const icon = directory && expanded ? 'codicon-folder-opened' : codiconForFileKind(kind);
 
-  return (
-    <i
-      aria-hidden="true"
-      className={cxCodicon(icon, 'workspace-file-icon', className)}
-      data-file-kind={kind}
-    />
-  );
+  return <FileIcon className={className} icon={icon} kind={kind} />;
 }

package/src/workbench/workspace/WorkspacePathLabel.tsx

@@ -0,0 +1,42 @@
+import { workspacePathSegments } from './path';
+import { cx } from '../../utils/cx';
+
+export interface WorkspacePathLabelProps {
+  className?: string;
+  path: string;
+}
+
+export function WorkspacePathLabel({ className, path }: WorkspacePathLabelProps) {
+  const segments = workspacePathSegments(path);
+
+  if (segments.length === 0) {
+    return null;
+  }
+
+  if (segments.length === 1) {
+    return (
+      <span className={cx('workspace-path-label', className)} title={path}>
+        {segments[0]}
+      </span>
+    );
+  }
+
+  return (
+    <span className={cx('workspace-path-label', className)} title={path}>
+      {segments.map((segment, index) => (
+        <span className="workspace-path-label__segment" key={`${index}-${segment}`}>
+          {index > 0 ? <span className="workspace-path-label__separator">{' > '}</span> : null}
+          <span
+            className={
+              index === segments.length - 1
+                ? 'workspace-path-label__leaf'
+                : 'workspace-path-label__crumb'
+            }
+          >
+            {segment}
+          </span>
+        </span>
+      ))}
+    </span>
+  );
+}