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

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';

package/src/workbench/workspace/json-config-workbench.css

@@ -0,0 +1,57 @@
+.ui-json-config-workbench {
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+}
+
+.ui-json-config-workbench__body.panel-body {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.ui-json-config-workbench__split.ui-workbench-split-view {
+  flex: 1;
+  height: 100%;
+}
+
+.ui-json-config-workbench__pane {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.ui-json-config-workbench__form,
+.ui-json-config-workbench__preview {
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
+}
+
+.ui-json-config-workbench__preview {
+  overflow: auto;
+}
+
+.ui-json-config-workbench__modes {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.ui-json-config-workbench__mode.ui-icon-button {
+  width: 28px;
+  height: 28px;
+}
+
+.ui-json-config-workbench__mode[aria-pressed='true'] {
+  color: var(--color-accent);
+  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
+  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
+}

package/src/workbench/workspace/monaco-panel.css

@@ -0,0 +1,71 @@
+.workbench-monaco-panel {
+  min-height: 0;
+}
+
+.workbench-monaco-panel__body {
+  overflow: hidden;
+  background: var(--color-bg);
+}
+
+.workspace-editor__monaco {
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--color-bg);
+  position: relative;
+  z-index: 0;
+}
+
+.ui-json-code-editor-fill-host,
+.ui-workbench-artifact-shell__pane,
+.ui-json-config-workbench__pane {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.ui-json-code-editor-fill-host > .ui-json-code-editor-pane,
+.ui-json-code-editor-fill-host .ui-json-code-editor-pane__viewport,
+.ui-json-code-editor-fill-host .workbench-monaco-panel,
+.ui-json-code-editor-fill-host .workbench-monaco-panel__body,
+.ui-json-code-editor-fill-host .workspace-editor__monaco,
+.ui-workbench-artifact-shell__pane > .ui-json-code-editor-pane,
+.ui-workbench-artifact-shell__pane .ui-json-code-editor-pane__viewport,
+.ui-workbench-artifact-shell__pane .workbench-monaco-panel,
+.ui-workbench-artifact-shell__pane .workbench-monaco-panel__body,
+.ui-workbench-artifact-shell__pane .workspace-editor__monaco,
+.ui-json-config-workbench__pane > .ui-json-code-editor-pane,
+.ui-json-config-workbench__pane .ui-json-code-editor-pane__viewport,
+.ui-json-config-workbench__pane .workbench-monaco-panel,
+.ui-json-config-workbench__pane .workbench-monaco-panel__body,
+.ui-json-config-workbench__pane .workspace-editor__monaco {
+  flex: 1 1 auto;
+  min-height: 0;
+  min-width: 0;
+  height: 100%;
+}
+
+.workspace-editor__monaco .monaco-editor .overflowingContentWidgets {
+  z-index: 40;
+}
+
+.ui-json-code-editor-pane__active-source-range {
+  background: color-mix(in srgb, var(--color-accent) 20%, transparent);
+  outline: 1px solid color-mix(in srgb, var(--color-accent) 48%, transparent);
+}
+
+.monaco-editor-hover,
+.monaco-hover {
+  z-index: 50;
+}
+
+.workbench-status-dot {
+  width: 7px;
+  height: 7px;
+  display: inline-block;
+  border-radius: 50%;
+  background: #5fbf72;
+}

package/src/workbench/workspace/path.ts

@@ -1,6 +1,8 @@
 export {
+  WORKSPACE_PATH_DISPLAY_SEPARATOR,
   extensionOfPath,
   fileNameOfPath,
+  formatWorkspacePathDisplay,
   isSimpleWorkspaceName,
   joinWorkspacePath,
   normalizeWorkspacePath,