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

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

package/src/workbench/workspace/WorkspaceSearchPanel.tsx

@@ -1,15 +1,17 @@
 import type { KeyboardEvent, MouseEvent, ReactNode } from 'react';
-import { SideBarHeaderControl, SideBarViewFrame } from '../../layout/SideBarViewFrame';
-import { Badge } from '../../primitives/Badge';
-import { EmptyState } from '../../primitives/EmptyState';
-import { IconButton } from '../../primitives/IconButton';
-import { TextInput } from '../../primitives/TextInput';
-import { Toolbar } from '../../primitives/Toolbar';
+import { SideBarHeaderControl, SideBarViewFrame, SidebarToolbar } from '../../layout/sidebar';
+import { Badge } from '../../primitives/badge';
+import { ClearableTextInput } from '../../primitives/clearable-text-input';
+import { EmptyState } from '../../primitives/empty-state';
+import { IconButton } from '../../primitives/icon-button';
+import { cx } from '../../utils/cx';
 import { WorkspaceSearchResults } from './WorkspaceSearchResults';
 import type { WorkspaceSearchResult } from './types';
 
 export interface WorkspaceSearchPanelProps {
   activePath?: string;
+  'aria-label'?: string | undefined;
+  className?: string | undefined;
   compactRows?: boolean;
   emptyQueryLabel?: ReactNode;
   noResultsLabel?: ReactNode;
@@ -26,6 +28,8 @@ export interface WorkspaceSearchPanelProps {
 
 export function WorkspaceSearchPanel({
   activePath,
+  'aria-label': ariaLabel = 'Workspace Search',
+  className,
   compactRows,
   emptyQueryLabel = 'Type to search files',
   noResultsLabel = 'No results',
@@ -55,37 +59,36 @@ export function WorkspaceSearchPanel({
     if (event.key === 'Escape' && query) {
       event.preventDefault();
       onQueryChange('');
+      return;
     }
   };
 
   return (
     <SideBarViewFrame
+      aria-label={ariaLabel}
+      className={cx('ui-workspace-search-panel', className)}
       title={title}
       actions={
-        <Toolbar>
+        <SidebarToolbar>
           <Badge variant="muted">{resultLabel}</Badge>
           {onRefresh ? (
             <IconButton icon="codicon-refresh" label="Refresh results" onClick={onRefresh} />
           ) : null}
-        </Toolbar>
+        </SidebarToolbar>
       }
       headerAddon={
         <SideBarHeaderControl>
           <div className="workbench-search-control">
-            <TextInput
+            <ClearableTextInput
               aria-label={searchLabel}
+              clearLabel="Clear search"
               controlWidth="full"
               placeholder={placeholder}
               value={query}
+              onClear={() => onQueryChange('')}
               onChange={(event) => onQueryChange(event.currentTarget.value)}
               onKeyDown={handleQueryKeyDown}
             />
-            <IconButton
-              disabled={!query}
-              icon="codicon-close"
-              label="Clear search"
-              onClick={() => onQueryChange('')}
-            />
           </div>
         </SideBarHeaderControl>
       }

package/src/workbench/workspace/WorkspaceSearchResults.tsx

@@ -1,7 +1,8 @@
 import type { MouseEvent } from 'react';
-import { SideBarList, SideBarListItem } from '../../layout/SideBarViewFrame';
+import { SideBarList, SideBarListItem } from '../../layout/sidebar';
 import { WorkspaceFileIcon } from './WorkspaceFileIcon';
 import { WorkspaceHighlightedText } from './WorkspaceHighlightedText';
+import { formatWorkspacePathDisplay } from './path';
 import type { WorkspaceSearchResult } from './types';
 
 export interface WorkspaceSearchResultsProps {
@@ -34,7 +35,10 @@ export function WorkspaceSearchResults({
         >
           <strong>
             <WorkspaceFileIcon mimeType={result.file.mimeType} path={result.path} />
-            <WorkspaceHighlightedText query={query} text={result.path} />
+            <WorkspaceHighlightedText
+              query={query}
+              text={formatWorkspacePathDisplay(result.path)}
+            />
           </strong>
           <span>
             Line {result.line}: <WorkspaceHighlightedText query={query} text={result.preview} />

package/src/workbench/workspace/build-workspace-explorer-nodes.ts

@@ -0,0 +1,44 @@
+import {
+  buildWorkspaceTree,
+  type WorkspaceFile,
+  type WorkspaceTreeNode,
+} from '@workbench-kit/workspace';
+
+export function buildWorkspaceExplorerNodes({
+  files,
+  folders,
+}: {
+  readonly files: readonly WorkspaceFile[];
+  readonly folders: readonly string[];
+}): WorkspaceTreeNode[] {
+  return buildWorkspaceTree([...folders], [...files]);
+}
+
+export function resolveWorkspaceExplorerSectionTitle(
+  files: readonly Pick<WorkspaceFile, 'content' | 'path'>[],
+): string {
+  const workspaceFile = files.find((file) => file.path === '.workbench/workspace.json');
+  if (!workspaceFile?.content) {
+    return 'Workspace';
+  }
+
+  try {
+    const parsed = JSON.parse(workspaceFile.content) as {
+      folders?: Array<{ name?: unknown }>;
+      name?: unknown;
+    };
+    const folderName = parsed.folders?.[0]?.name;
+    if (typeof folderName === 'string' && folderName.trim().length > 0) {
+      return folderName.trim();
+    }
+
+    const name = parsed.name;
+    if (typeof name === 'string' && name.trim().length > 0) {
+      return name.trim();
+    }
+  } catch {
+    // Ignore invalid workspace metadata and fall back to the default label.
+  }
+
+  return 'Workspace';
+}

package/src/workbench/workspace/createVirtualWorkspaceExplorerPort.ts

@@ -0,0 +1,141 @@
+import {
+  getWorkspaceEntryMovePlan,
+  joinWorkspacePath,
+  parentPathOf,
+  type WorkspaceSelectionState,
+} from '@workbench-kit/workspace';
+
+import type { VirtualWorkspaceApi } from './useVirtualWorkspace';
+import type {
+  WorkspaceExplorerControllerPort,
+  WorkspaceExplorerMutationResult,
+} from './workspaceExplorerController';
+
+export function createVirtualWorkspaceExplorerPort({
+  onNotify,
+  workspace,
+}: {
+  onNotify?: (message: string) => void;
+  workspace: VirtualWorkspaceApi;
+}): WorkspaceExplorerControllerPort {
+  const notify = onNotify ?? (() => undefined);
+
+  return {
+    snapshot: {
+      files: workspace.files,
+      folders: workspace.folders,
+    },
+    createFile({ name, parentPath }) {
+      const path = joinWorkspacePath(parentPath, name);
+      workspace.createFile({ content: '', path, source: 'user' });
+      notify(`Created ${path}`);
+      return { path };
+    },
+    createFolder({ name, parentPath }) {
+      const path = joinWorkspacePath(parentPath, name);
+      workspace.createFolder(path);
+      notify(`Created folder ${path}`);
+      return { path };
+    },
+    deleteEntries({ kind, paths }) {
+      if (kind === 'folder') {
+        paths.forEach((path) => workspace.deleteFolder(path));
+        notify(`Deleted folder ${paths[0] ?? ''}`);
+        return;
+      }
+
+      paths.forEach((path) => workspace.deleteFile(path));
+      notify(paths.length === 1 ? `Deleted ${paths[0]}` : `Deleted ${paths.length} files`);
+    },
+    moveEntries({ sourcePaths, targetFolderPath }) {
+      const plan = getWorkspaceEntryMovePlan({
+        files: workspace.files,
+        folders: workspace.folders,
+        sourcePaths,
+        targetFolderPath,
+      });
+
+      plan.moves.forEach((move) => {
+        if (move.kind === 'folder') {
+          workspace.moveFolder(move.sourcePath, plan.targetFolderPath);
+          return;
+        }
+
+        workspace.moveFile(move.sourcePath, plan.targetFolderPath);
+      });
+
+      const fileMoves = plan.moves.filter((move) => move.kind === 'file');
+      const targetLabel = plan.targetFolderPath || 'workspace root';
+      if (plan.moves.length === 0) {
+        notify(`Move blocked for ${plan.blockedPaths.length} entries`);
+        return undefined;
+      }
+
+      notify(
+        plan.blockedPaths.length > 0
+          ? `Moved ${plan.moves.length} entries to ${targetLabel}, blocked ${plan.blockedPaths.length}`
+          : `Moved ${plan.moves.length} entries to ${targetLabel}`,
+      );
+
+      if (fileMoves.length === 0) {
+        return undefined;
+      }
+
+      return {
+        paths: fileMoves.map((move) => move.destinationPath),
+      };
+    },
+    openFile(path) {
+      workspace.openFile(path);
+      notify(`Opened ${path}`);
+    },
+    renameEntry({ kind, name, path }) {
+      const destinationPath = joinWorkspacePath(parentPathOf(path), name);
+      if (kind === 'file') {
+        workspace.renameFile(path, name);
+        notify(`Renamed ${path} to ${destinationPath}`);
+        return { path: destinationPath };
+      }
+
+      workspace.renameFolder(path, name);
+      notify(`Renamed folder ${path} to ${destinationPath}`);
+      return { path: destinationPath };
+    },
+    reportError(message) {
+      notify(message);
+    },
+  };
+}
+
+export function applyVirtualWorkspaceRenameSelection(
+  selection: WorkspaceSelectionState,
+  sourcePath: string,
+  destinationPath: string,
+): WorkspaceSelectionState {
+  const renameDescendantPath = (currentPath: string) =>
+    currentPath === sourcePath
+      ? destinationPath
+      : currentPath.startsWith(`${sourcePath}/`)
+        ? `${destinationPath}/${currentPath.slice(sourcePath.length + 1)}`
+        : currentPath;
+
+  return {
+    anchorPath: selection.anchorPath
+      ? renameDescendantPath(selection.anchorPath)
+      : selection.anchorPath,
+    focusedPath: selection.focusedPath
+      ? renameDescendantPath(selection.focusedPath)
+      : selection.focusedPath,
+    paths: selection.paths.map(renameDescendantPath),
+  };
+}
+
+export function toWorkspaceExplorerMutationResult(
+  value: WorkspaceExplorerMutationResult | void | undefined,
+): WorkspaceExplorerMutationResult | undefined {
+  if (!value) {
+    return undefined;
+  }
+
+  return value;
+}

package/src/workbench/workspace/explorer-tree-style.ts

@@ -0,0 +1,18 @@
+import type { CSSProperties } from 'react';
+import {
+  VS_CODE_TREE_BASE_INDENT,
+  VS_CODE_TREE_INDENT_SIZE,
+  workbenchTreeIndentOffset,
+} from '../../layout/layoutHelpers';
+
+export function explorerTreeDepthStyle(depth: number, style?: CSSProperties): CSSProperties {
+  return {
+    '--depth': depth,
+    '--ui-sidebar-tree-indent-offset': workbenchTreeIndentOffset(
+      depth,
+      VS_CODE_TREE_INDENT_SIZE,
+      VS_CODE_TREE_BASE_INDENT,
+    ),
+    ...style,
+  } as CSSProperties;
+}

package/src/workbench/workspace/index.ts

@@ -10,11 +10,14 @@ export {
 export type { WorkspaceEditorProps, WorkspaceEditorTheme } from './WorkspaceEditor';
 export { WorkspaceEditorPanel } from './WorkspaceEditorPanel';
 export type {
+  WorkspaceEditorPanelCanSaveFile,
   WorkspaceEditorPanelProps,
   WorkspaceEditorPanelRenderEditor,
   WorkspaceEditorPanelRenderEditorContext,
   WorkspaceEditorPanelRenderTabActions,
   WorkspaceEditorPanelRenderTabActionsContext,
+  WorkspaceEditorPanelSaveShortcutContext,
+  WorkspaceEditorPanelSaveShortcutMode,
 } from './WorkspaceEditorPanel';
 export {
   WORKSPACE_EXPLORER_DRAG_DATA_TYPE,
@@ -33,48 +36,31 @@ export type {
   WorkspaceExplorerMoveRequestMeta,
   WorkspaceExplorerProps,
   WorkspaceExplorerSelectionChangeMeta,
+  WorkspaceExplorerSelectionChangeReason,
 } from './WorkspaceExplorer';
-export { WorkspaceFileIcon, codiconForFileKind, fileIconKindForPath } from './WorkspaceFileIcon';
-export type { WorkspaceFileIconKind, WorkspaceFileIconProps } from './WorkspaceFileIcon';
+export { WorkspaceFileIcon } from './WorkspaceFileIcon';
+export type { WorkspaceFileIconProps } from './WorkspaceFileIcon';
+export { WorkspacePathLabel } from './WorkspacePathLabel';
+export type { WorkspacePathLabelProps } from './WorkspacePathLabel';
+export { FILE_ICON_KINDS, codiconForFileKind, fileIconKindForPath } from '../../icons/file-icon';
+export type { FileIconKind } from '../../icons/file-icon';
 export { WorkspaceHighlightedText } from './WorkspaceHighlightedText';
 export type { WorkspaceHighlightedTextProps } from './WorkspaceHighlightedText';
-export {
-  WorkbenchMultiProviderExplorer,
-  collectWorkbenchExplorerEntryRefs,
-  countWorkbenchExplorerEntries,
-  flattenWorkbenchExplorerProviders,
-  getWorkbenchExplorerEntryContext,
-  getWorkbenchExplorerEntryKey,
-  getWorkbenchExplorerProviderEntryCount,
-  isWorkbenchExplorerActionDisabled,
-  isWorkbenchExplorerEntryDisabled,
-  isWorkbenchExplorerEntrySelectable,
-  isWorkbenchExplorerProviderDisabled,
-  normalizeWorkbenchExplorerEntryKeys,
-} from './MultiProviderExplorer';
-export type {
-  WorkbenchExplorerActionDescriptor,
-  WorkbenchExplorerEntryContext,
-  WorkbenchExplorerEntryContextInput,
-  WorkbenchExplorerEntryDescriptor,
-  WorkbenchExplorerEntryKind,
-  WorkbenchExplorerEntryRef,
-  WorkbenchExplorerEntrySelectContext,
-  WorkbenchExplorerEntryToggleContext,
-  WorkbenchExplorerFlattenedEntry,
-  WorkbenchExplorerProviderActionContext,
-  WorkbenchExplorerProviderCollapseContext,
-  WorkbenchExplorerProviderDescriptor,
-  WorkbenchExplorerProviderKind,
-  WorkbenchMultiProviderExplorerProps,
-} from './MultiProviderExplorer';
 export { WorkspaceSearchPanel } from './WorkspaceSearchPanel';
 export type { WorkspaceSearchPanelProps } from './WorkspaceSearchPanel';
+export { WorkspaceExplorerPanel } from './WorkspaceExplorerPanel';
+export type { WorkspaceExplorerPanelProps } from './WorkspaceExplorerPanel';
+export {
+  buildWorkspaceExplorerNodes,
+  resolveWorkspaceExplorerSectionTitle,
+} from './build-workspace-explorer-nodes.js';
 export { WorkspaceSearchResults } from './WorkspaceSearchResults';
 export type { WorkspaceSearchResultsProps } from './WorkspaceSearchResults';
 export {
+  WORKSPACE_PATH_DISPLAY_SEPARATOR,
   extensionOfPath,
   fileNameOfPath,
+  formatWorkspacePathDisplay,
   isSimpleWorkspaceName,
   joinWorkspacePath,
   normalizeWorkspacePath,
@@ -98,11 +84,15 @@ export {
 } from '@workbench-kit/workspace';
 export { compactText, createContentPreview, highlightText, searchWorkspaceFiles } from './search';
 export {
+  createEmptyWorkspaceSelection,
   getWorkspaceSelectionActionPaths,
   getWorkspaceSelectionRange,
   normalizeWorkspaceSelectionPaths,
   pruneWorkspaceSelection,
+  resolveExplorerActionPaths,
+  resolveWorkspaceCreateParentPath,
   updateWorkspaceSelection,
+  type ResolveExplorerActionPathsInput,
   type UpdateWorkspaceSelectionInput,
   type WorkspaceSelectionActionPathsInput,
   type WorkspaceSelectionMode,
@@ -148,9 +138,32 @@ export type {
 export {
   WorkspaceDraftsContext,
   WorkspaceDraftsProvider,
+  useWorkspaceDraftController,
   useWorkspaceDrafts,
 } from './WorkspaceDraftsContext';
 export type {
   WorkspaceDraftsContextValue,
   WorkspaceDraftsProviderProps,
 } from './WorkspaceDraftsContext';
+export { createVirtualWorkspaceExplorerPort } from './createVirtualWorkspaceExplorerPort';
+export { useWorkspaceExplorerController } from './useWorkspaceExplorerController';
+export type {
+  UseWorkspaceExplorerControllerOptions,
+  WorkspaceExplorerController,
+  WorkspaceExplorerInlineEditMessages,
+} from './useWorkspaceExplorerController';
+export {
+  applyWorkspaceExplorerFolderFocus,
+  applyWorkspaceExplorerMutationResult,
+  createWorkspaceExplorerInlineEditDraft,
+  createWorkspaceExplorerRenameDraft,
+  DEFAULT_WORKSPACE_EXPLORER_MUTATION_DENIED_MESSAGE,
+  resolveWorkspaceExplorerMutationDeniedMessage,
+  workspaceExplorerParentPaths,
+} from './workspaceExplorerController';
+export type {
+  WorkspaceExplorerControllerPort,
+  WorkspaceExplorerMutationAction,
+  WorkspaceExplorerMutationResult,
+  WorkspaceExplorerWorkspaceSnapshot,
+} from './workspaceExplorerController';