@workbench-kit/react 0.0.2-prototype.0.2.4 → 0.0.2-prototype.0.2.40

package/src/workbench/shell/activity-bar.css

@@ -32,6 +32,53 @@
   border-top: 1px solid var(--vscode-panel-border, var(--color-border));
 }
 
+.workbench-bottom-panel__header {
+  display: flex;
+  flex-shrink: 0;
+  align-items: stretch;
+  gap: 0;
+  min-height: 28px;
+  border-bottom: 1px solid var(--vscode-panel-border, var(--color-border));
+  background: var(--vscode-panel-background, var(--color-surface));
+}
+
+.workbench-bottom-panel__tab {
+  appearance: none;
+  border: none;
+  background: transparent;
+  color: var(--color-text-muted);
+  font: inherit;
+  font-size: 12px;
+  padding: 4px 12px;
+  cursor: pointer;
+}
+
+.workbench-bottom-panel__tab:hover {
+  color: var(--color-text);
+}
+
+.workbench-bottom-panel__tab--active {
+  color: var(--color-text);
+  box-shadow: inset 0 -2px 0 var(--color-accent, var(--color-primary));
+}
+
+.workbench-bottom-panel__body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 8px 12px;
+}
+
+.workbench-bottom-panel__view {
+  min-height: 0;
+}
+
+.workbench-bottom-panel__empty {
+  color: var(--color-text-muted);
+  font-size: 12px;
+  padding: 8px 12px;
+}
+
 .ui-workbench-activity-bar__item {
   --ui-button-width: var(--workbench-activity-bar-item-size);
   --ui-button-min-width: 0;

package/src/workbench/{activityBarOrder.ts → shell/activityBarOrder.ts}

@@ -70,13 +70,14 @@ export function sortActivityBarItems<T extends { id: string }>(
 ): T[] {
   const order = itemOrder?.length ? itemOrder : fallbackOrder;
   const orderIndex = new Map(order.map((id, index) => [id, index]));
+  const contributionIndex = new Map(items.map((item, index) => [item.id, index]));
 
   return [...items].sort((left, right) => {
     const leftIndex = orderIndex.get(left.id);
     const rightIndex = orderIndex.get(right.id);
 
     if (leftIndex === undefined && rightIndex === undefined) {
-      return left.id.localeCompare(right.id);
+      return (contributionIndex.get(left.id) ?? 0) - (contributionIndex.get(right.id) ?? 0);
     }
 
     if (leftIndex === undefined) return 1;

package/src/workbench/{shell.ts → shell/shell.ts}

@@ -1,4 +1,4 @@
-export { ActivityBar, ACTIVITY_BAR_DRAG_DATA_TYPE } from './ActivityBar';
+export { ActivityBar } from './ActivityBar';
 export {
   hasWorkbenchSidebarViewPlacementDrag,
   readWorkbenchSidebarViewPlacementDrag,
@@ -64,22 +64,23 @@ export type {
   WorkbenchViewEditorEmptyStateSurfaceProps,
   WorkbenchViewEditorProps,
 } from './WorkbenchViewEditor';
-export { WorkbenchEditorTabs } from './WorkbenchEditorTabs';
-export type { WorkbenchEditorTabsProps } from './WorkbenchEditorTabs';
+export { WorkbenchEditorTabs } from '../editor/WorkbenchEditorTabs';
+export type { WorkbenchEditorTabsProps } from '../editor/WorkbenchEditorTabs';
 export {
   createWorkbenchStandaloneEditorTabCommandContext,
   createWorkbenchStandaloneEditorTabContextMenuItems,
   isWorkbenchEditorTabClosable,
-} from './editorTabContextMenu';
+} from '../editor/editorTabContextMenu';
 export type {
   CreateWorkbenchStandaloneEditorTabCommandContextInput,
+  CreateWorkbenchStandaloneEditorTabContextMenuItemsInput,
   WorkbenchStandaloneEditorTabLike,
-} from './editorTabContextMenu';
-export { useWorkbenchEditorTabContextMenu } from './useWorkbenchEditorTabContextMenu';
+} from '../editor/editorTabContextMenu';
+export { useWorkbenchEditorTabContextMenu } from '../editor/useWorkbenchEditorTabContextMenu';
 export type {
   UseWorkbenchEditorTabContextMenuOptions,
   UseWorkbenchEditorTabContextMenuResult,
-} from './useWorkbenchEditorTabContextMenu';
+} from '../editor/useWorkbenchEditorTabContextMenu';
 export { WorkbenchViewSidebar } from './WorkbenchViewSidebar';
 export type { WorkbenchViewSidebarItem, WorkbenchViewSidebarProps } from './WorkbenchViewSidebar';
 export {
@@ -90,23 +91,29 @@ export type {
   WorkbenchDesktopTitleBarProps,
   WorkbenchDesktopWindowControlsProps,
 } from './WorkbenchDesktopTitleBar';
-export { WorkbenchPlatformProvider, useWorkbenchHostPlatform } from './WorkbenchPlatformContext';
-export type { WorkbenchPlatformProviderProps } from './WorkbenchPlatformContext';
+export {
+  WorkbenchPlatformProvider,
+  useWorkbenchHostPlatform,
+} from '../chrome/WorkbenchPlatformContext';
+export type { WorkbenchPlatformProviderProps } from '../chrome/WorkbenchPlatformContext';
 export {
   resolveWorkbenchHostPlatform,
   resolveWorkbenchWindowChromeDataAttributes,
-} from './workbenchPlatformChrome';
-export type { WorkbenchHostPlatform, WorkbenchWindowChromeMode } from './workbenchPlatformChrome';
+} from '../chrome/workbenchPlatformChrome';
+export type {
+  WorkbenchHostPlatform,
+  WorkbenchWindowChromeMode,
+} from '../chrome/workbenchPlatformChrome';
 export {
   WorkbenchWindowChromeControls,
   shouldUseDarwinPlatformChrome,
 } from './WorkbenchWindowChromeControls';
 export type { WorkbenchWindowChromeControlsProps } from './WorkbenchWindowChromeControls';
-export { useWorkbenchModalViewState } from './workbenchModalViewState';
+export { useWorkbenchModalViewState } from '../chrome/workbenchModalViewState';
 export type {
   UseWorkbenchModalViewStateOptions,
   WorkbenchModalViewState,
-} from './workbenchModalViewState';
+} from '../chrome/workbenchModalViewState';
 export {
   WorkbenchSidebarLayoutProvider,
   useWorkbenchSidebarLayout,

package/src/workbench/{shellViewModel.ts → shell/shellViewModel.ts}

@@ -5,7 +5,7 @@ import type {
   WorkbenchViewEditorTabItem,
 } from '@workbench-kit/platform';
 
-import type { EditorTab } from '../primitives/workbench-editor';
+import type { EditorTab } from '../../primitives/workbench-editor';
 import type { ActivityBarItem } from './ActivityBar';
 import type { WorkbenchShellProps } from './WorkbenchShell';
 import type { WorkbenchViewSidebarItem, WorkbenchViewSidebarProps } from './WorkbenchViewSidebar';
@@ -24,8 +24,8 @@ export interface CreateWorkbenchShellActivityBarFromViewModelInput<
   TViewId extends string,
   TIcon = unknown,
 > {
-  readonly activeId?: TViewId | undefined;
-  readonly activityBarProps?: WorkbenchShellActivityBarViewModelProps | undefined;
+  readonly activeId?: TViewId;
+  readonly activityBarProps?: WorkbenchShellActivityBarViewModelProps;
   readonly model: WorkbenchViewActivityBarModel<TViewId, TIcon>;
   readonly onSelect?:
     ((viewId: TViewId, item: WorkbenchViewActivityBarItem<TViewId, TIcon>) => void) | undefined;

package/src/workbench/{standalone.ts → shell/standalone.ts}

@@ -6,8 +6,8 @@ import type {
 } from '@workbench-kit/contracts';
 import type { ReactNode } from 'react';
 import type { StatusBarSectionModel } from './StatusBar';
-import type { WorkbenchShellCommandContext } from './commands';
-import type { WorkspaceFile } from './workspace';
+import type { WorkbenchShellCommandContext } from '../commands/commands';
+import type { WorkspaceFile } from '../workspace';
 
 export type WorkbenchTheme = 'light' | 'dark' | (string & {});
 
@@ -99,3 +99,15 @@ export type WorkbenchStandaloneBootstrapEvent<TActivityId extends string = strin
   | { type: 'activity-change'; payload: WorkbenchActivityChangeEvent<TActivityId> }
   | { type: 'status-message'; message: string }
   | { type: 'error'; error: Error };
+
+export * from './WorkbenchStandaloneShell';
+export {
+  createWorkbenchStandaloneShellStateSnapshot,
+  useWorkbenchStandaloneShellContext,
+} from './workbenchStandaloneShellReactContext';
+export type {
+  WorkbenchStandaloneShellStateChange,
+  WorkbenchStandaloneShellStateChangeKind,
+  WorkbenchStandaloneShellStateSnapshot,
+} from './workbenchStandaloneShellReactContext';
+export { useWorkbenchStandaloneShellStateSync } from './useWorkbenchStandaloneShellStateSync';

package/src/workbench/{useDeferredWorkbenchMount.ts → shell/useDeferredWorkbenchMount.ts}

@@ -1,9 +1,9 @@
 import { startTransition, useEffect, useRef, useState } from 'react';
 
 export interface UseDeferredWorkbenchMountOptions {
-  readonly delayMs?: number | undefined;
-  readonly disabled?: boolean | undefined;
-  readonly initialReady?: boolean | undefined;
+  readonly delayMs?: number;
+  readonly disabled?: boolean;
+  readonly initialReady?: boolean;
 }
 
 export function useDeferredWorkbenchMount({

package/src/workbench/{useWorkbenchAppearanceDocumentSync.tsx → shell/useWorkbenchAppearanceDocumentSync.tsx}

@@ -1,6 +1,6 @@
 import { useLayoutEffect } from 'react';
 
-import { applyWorkbenchAppearance, type WorkbenchAppearanceSettings } from './themePresets';
+import { applyWorkbenchAppearance, type WorkbenchAppearanceSettings } from '../theme/themePresets';
 
 /**
  * Keeps `document.documentElement` theme attributes aligned with appearance settings.

package/src/workbench/{useWorkbenchSidebarActionBarDnd.ts → shell/useWorkbenchSidebarActionBarDnd.ts}

@@ -22,7 +22,7 @@ export interface WorkbenchSidebarActionBarDropTarget {
 
 export interface UseWorkbenchSidebarActionBarDndOptions {
   readonly itemIds: readonly string[];
-  readonly onReorder?: ((itemIds: string[]) => void) | undefined;
+  readonly onReorder?: (itemIds: string[]) => void;
   readonly orientation?: ActivityBarOrientation;
   readonly placementDraggable?: boolean;
   readonly reorderable?: boolean;

package/src/workbench/{useWorkbenchSidebarViewPlacementDropZone.ts → shell/useWorkbenchSidebarViewPlacementDropZone.ts}

@@ -20,9 +20,9 @@ export type WorkbenchSidebarViewPlacementDropZoneProps = HTMLAttributes<HTMLElem
 };
 
 export interface UseWorkbenchSidebarViewPlacementDropZoneOptions {
-  readonly acceptViewForDrop?: ((viewId: string) => boolean) | undefined;
+  readonly acceptViewForDrop?: (viewId: string) => boolean;
   readonly onDropView: (viewId: string) => void;
-  readonly zoneId?: string | undefined;
+  readonly zoneId?: string;
 }
 
 function chainDragHandler<E extends DragEvent<HTMLElement>>(

package/src/workbench/{workbenchSidebarLayoutContext.ts → shell/workbenchSidebarLayoutContext.ts}

@@ -38,9 +38,3 @@ export function toWorkbenchSidebarLayoutContextValue<TViewId extends string>(
 ): WorkbenchSidebarLayoutContextStore {
   return value as unknown as WorkbenchSidebarLayoutContextStore;
 }
-
-export function fromWorkbenchSidebarLayoutContextValue<TViewId extends string>(
-  value: WorkbenchSidebarLayoutContextStore,
-): WorkbenchSidebarLayoutContextValue<TViewId> {
-  return value as unknown as WorkbenchSidebarLayoutContextValue<TViewId>;
-}

package/src/workbench/{workbenchViewRouteState.ts → shell/workbenchViewRouteState.ts}

@@ -20,11 +20,11 @@ export interface WorkbenchViewRouteBrowserWindow {
 
 export interface UseWorkbenchViewRouteStateOptions<TViewId extends string> {
   readonly defaultViewId: TViewId;
-  readonly discardedParams?: ReadonlyArray<string> | undefined;
+  readonly discardedParams?: ReadonlyArray<string>;
   readonly isViewId: (value: string | null) => value is TViewId;
-  readonly routeWindow?: WorkbenchViewRouteBrowserWindow | undefined;
-  readonly tabsParam?: string | undefined;
-  readonly viewParam?: string | undefined;
+  readonly routeWindow?: WorkbenchViewRouteBrowserWindow;
+  readonly tabsParam?: string;
+  readonly viewParam?: string;
 }
 
 export interface WorkbenchViewRouteState<

package/src/workbench/{WorkbenchThemeProvider.tsx → theme/WorkbenchThemeProvider.tsx}

@@ -1,8 +1,8 @@
 import { useEffect, useMemo, type ComponentPropsWithoutRef, type ReactNode } from 'react';
-import './chrome/workbench-host.css';
-import './chrome/workbench-platform-chrome.css';
+import '../chrome/workbench-host.css';
+import '../chrome/workbench-platform-chrome.css';
 
-import { WorkbenchPlatformProvider } from './WorkbenchPlatformContext';
+import { WorkbenchPlatformProvider } from '../chrome/WorkbenchPlatformContext';
 import {
   applyWorkbenchThemeProviderAttributes,
   type WorkbenchThemeProviderAttributes,
@@ -11,7 +11,7 @@ import type { ResolvedWorkbenchTheme } from './theme';
 import {
   resolveWorkbenchHostPlatform,
   type WorkbenchHostPlatform,
-} from './workbenchPlatformChrome';
+} from '../chrome/workbenchPlatformChrome';
 
 export interface WorkbenchThemeProviderProps extends Omit<
   ComponentPropsWithoutRef<'div'>,

package/src/workbench/{theme.ts → theme/theme.ts}

@@ -1,5 +1,5 @@
 import { useSyncExternalStore } from 'react';
-import type { WorkbenchTheme } from './standalone';
+import type { WorkbenchTheme } from '../shell/standalone';
 
 export type ResolvedWorkbenchTheme = 'dark' | 'light';
 

package/src/workbench/{themePresets.ts → theme/themePresets.ts}

@@ -1,6 +1,6 @@
 import { resolveWorkbenchTheme, type ResolvedWorkbenchTheme } from './theme';
-import type { WorkbenchTheme } from './standalone';
-import { applyWorkbenchShellAttributes } from './shellPresets';
+import type { WorkbenchTheme } from '../shell/standalone';
+import { applyWorkbenchShellAttributes } from '../shell/shellPresets';
 
 export interface WorkbenchThemePresetManifestEntry<TId extends string = string> {
   readonly id: TId;
@@ -20,6 +20,7 @@ export const DARK_THEME_PRESET_MANIFEST = [
   { id: 'modern', label: 'Modern Dark' },
   { id: 'dark-plus', label: 'Dark+' },
   { id: 'hc-black', label: 'High Contrast Black' },
+  { id: 'slate', label: 'Slate (alias pack)' },
 ] as const satisfies readonly WorkbenchThemePresetManifestEntry[];
 
 export type LightThemePresetId = (typeof LIGHT_THEME_PRESET_MANIFEST)[number]['id'];

package/src/workbench/views/command-list-density.css

@@ -0,0 +1,36 @@
+/* Compact density overrides for Workbench command lists. Keep before command-list.css. */
+
+.ui-workbench-command-list {
+  padding: 0;
+}
+
+.ui-workbench-command-item,
+.ui-workbench-command-item.ui-button {
+  --ui-button-height: auto;
+  --ui-button-padding: 7px 10px;
+  --ui-button-border-radius: 0;
+  border-radius: 0;
+  height: auto;
+  padding: 7px 10px;
+}
+
+.ui-workbench-command-group-shell__nav {
+  padding: 0;
+}
+
+.ui-workbench-command-group-shell__nav-link {
+  border-radius: 0;
+}
+
+.ui-workbench-command-group-shell__content {
+  padding: 0;
+}
+
+.ui-workbench-command-group-shell__section {
+  padding: 0;
+}
+
+.ui-workbench-command-group-shell__section-header {
+  min-height: 28px;
+  padding: 4px 10px;
+}

package/src/workbench/views/command-list.css

@@ -1,3 +1,5 @@
+@import './command-list-density.css';
+
 .ui-workbench-command-list {
   max-height: min(430px, calc(100vh - 190px));
   overflow: auto;

package/src/workbench/views/extensions-sidebar.css

@@ -112,6 +112,8 @@
 
 .workbench-extensions-sidebar__actions {
   display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
   justify-content: flex-end;
   width: 100%;
 }

package/src/workbench/views/view-hosts.css

@@ -3,19 +3,19 @@
 .workbench-search-view,
 .workbench-chat-view,
 .workbench-primary-sidebar .ui-sidebar-view,
-.shell-react-primary-sidebar {
+.shell-react-sidebar-host {
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
   min-height: 0;
 }
 
-.shell-react-primary-sidebar > section {
+.shell-react-sidebar-host > section {
   /* section is semantic only; view host frame carries sidebar flex sizing */
   display: contents;
 }
 
-.shell-react-primary-sidebar [data-view-host-id] {
+.shell-react-sidebar-host [data-view-host-id] {
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;

package/src/workbench/workspace/WorkspaceEditorPanel.tsx

@@ -19,7 +19,7 @@ import {
   createWorkbenchEditorTabListMenuEntries,
   createWorkbenchEditorTabMenuEntries,
   type WorkbenchEditorCommandContext,
-} from '../commands';
+} from '../commands/commands';
 import { fileNameOfPath } from './path';
 import { WorkspaceEditor, type WorkspaceEditorTheme } from './WorkspaceEditor';
 import { WorkspaceFileIcon } from './WorkspaceFileIcon';

package/src/workbench/workspace/WorkspaceExplorer.tsx

@@ -23,14 +23,18 @@ import { TextInput } from '../../primitives/text-input';
 import { cxCodicon } from '../../utils/codicon';
 import { explorerTreeDepthStyle } from './explorer-tree-style';
 import { flattenWorkspaceTree } from './tree';
+import {
+  resolveWorkspaceExplorerHorizontalNavigationAction,
+  resolveWorkspaceExplorerNavigationPath,
+} from './workspaceExplorerKeyboard.js';
 import { WorkspaceFileIcon } from './WorkspaceFileIcon';
 import type { WorkspaceTreeNode } from './types';
 
-export const WORKSPACE_EXPLORER_DRAG_DATA_TYPE = 'application/x-newchobo-ui-workspace-paths';
+export const WORKSPACE_EXPLORER_DRAG_DATA_TYPE = 'application/x-workbench-kit-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';
+  'clear' | 'click' | 'context-menu' | 'drag-start' | 'folder-click' | 'keyboard';
 
 export interface WorkspaceExplorerSelectionChangeMeta {
   event?: DragEvent<HTMLButtonElement> | MouseEvent<HTMLButtonElement>;
@@ -91,6 +95,8 @@ export interface WorkspaceExplorerInlineEditCommitMeta {
 
 export interface WorkspaceExplorerProps {
   activePath?: string;
+  /** Accessible name for the `role="tree"` list. Defaults to "Workspace files". */
+  ariaLabel?: string;
   dragDataType?: string;
   dragMetadataDataType?: string;
   dragMetadataFactory?: WorkspaceExplorerDragMetadataFactory;
@@ -120,10 +126,16 @@ export interface WorkspaceExplorerProps {
   renderItemActions?: (node: WorkspaceTreeNode, meta: WorkspaceExplorerItemActionMeta) => ReactNode;
   selectedPaths?: Iterable<string>;
   selectionAnchorPath?: string;
+  /**
+   * When true (default), Arrow/Home/End focus updates also emit selection
+   * (file → single `paths`; folder → `{ focusedPath, paths: [] }`).
+   */
+  selectionFollowsFocus?: boolean;
 }
 
 export function WorkspaceExplorer({
   activePath,
+  ariaLabel = 'Workspace files',
   dragDataType = WORKSPACE_EXPLORER_DRAG_DATA_TYPE,
   dragMetadataDataType = WORKSPACE_EXPLORER_DRAG_METADATA_DATA_TYPE,
   dragMetadataFactory,
@@ -146,6 +158,7 @@ export function WorkspaceExplorer({
   renderItemActions,
   selectedPaths = [],
   selectionAnchorPath,
+  selectionFollowsFocus = true,
 }: WorkspaceExplorerProps) {
   const sectionBaseDepth = useSidebarSectionBaseDepth();
   const draggedPathsRef = useRef<string[]>([]);
@@ -311,7 +324,85 @@ export function WorkspaceExplorer({
     onItemContextMenu?.(event, node, meta);
   };
 
+  const focusPath = (path: string, node: WorkspaceTreeNode | undefined) => {
+    if (!onSelectionChange || !selectionFollowsFocus) {
+      if (onSelectionChange) {
+        onSelectionChange(
+          {
+            ...currentSelection,
+            focusedPath: path,
+            paths: node?.type === 'folder' ? [] : currentSelection.paths,
+          },
+          { mode: 'single', node, reason: 'keyboard' },
+        );
+      }
+      return;
+    }
+
+    if (node?.type === 'folder') {
+      onSelectionChange(
+        { ...currentSelection, focusedPath: path, paths: [] },
+        { mode: 'single', node, reason: 'keyboard' },
+      );
+      return;
+    }
+
+    onSelectionChange(
+      {
+        ...updateWorkspaceSelection({
+          mode: 'single',
+          orderedPaths: visibleFilePaths,
+          selection: currentSelection,
+          targetPath: path,
+        }),
+        focusedPath: path,
+      },
+      { mode: 'single', node, reason: 'keyboard' },
+    );
+  };
+
   const handleItemKeyDown = (event: KeyboardEvent<HTMLButtonElement>, node: WorkspaceTreeNode) => {
+    if (
+      event.key === 'ArrowDown' ||
+      event.key === 'ArrowUp' ||
+      event.key === 'Home' ||
+      event.key === 'End'
+    ) {
+      const nextPath = resolveWorkspaceExplorerNavigationPath(
+        visibleNodes,
+        focusedPath ?? node.path,
+        event.key,
+      );
+      if (!nextPath || nextPath === (focusedPath ?? node.path)) {
+        return;
+      }
+      event.preventDefault();
+      const nextNode = visibleNodes.find((row) => row.node.path === nextPath)?.node;
+      focusPath(nextPath, nextNode);
+      return;
+    }
+
+    if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+      const action = resolveWorkspaceExplorerHorizontalNavigationAction(
+        visibleNodes,
+        focusedPath ?? node.path,
+        expandedPaths,
+        event.key,
+        { filterActive: Boolean(filterQuery.trim()) },
+      );
+      if (!action) {
+        return;
+      }
+      event.preventDefault();
+      if (action.type === 'toggle') {
+        onToggleFolder(action.path);
+        return;
+      }
+      const nextNode = visibleNodes.find((row) => row.node.path === action.path)?.node;
+      focusPath(action.path, nextNode);
+      return;
+    }
+
     if (event.key !== 'Delete' && event.key !== 'F2') return;
 
     const meta = getItemActionMeta(node);
@@ -506,8 +597,10 @@ export function WorkspaceExplorer({
   return (
     <SideBarList
       fill
-      aria-label="Workspace files"
+      aria-keyshortcuts="ArrowLeft ArrowRight ArrowUp ArrowDown Home End Delete F2"
+      aria-label={ariaLabel}
       dropTarget={dropTargetPath === ''}
+      role="tree"
       onContextMenu={(event) => {
         onBackgroundContextMenu?.(event);
       }}
@@ -520,7 +613,7 @@ export function WorkspaceExplorer({
         }
       }}
     >
-      {visibleNodes.map(({ depth, node }) => {
+      {visibleNodes.map(({ depth, node }, index) => {
         const isFolder = node.type === 'folder';
         const expanded = expandedPaths.has(node.path) || Boolean(filterQuery.trim());
         const isFocused = focusedPath === node.path;
@@ -528,6 +621,7 @@ export function WorkspaceExplorer({
         const dropTarget = isFolder && dropTargetPath === node.path;
         const editingRename =
           inlineEdit?.kind.startsWith('rename') && inlineEdit.path === node.path;
+        const tabIndex = isFocused || (!focusedPath && index === 0) ? 0 : -1;
 
         return editingRename ? (
           renderInlineEdit({
@@ -553,6 +647,13 @@ export function WorkspaceExplorer({
               draggable={Boolean(onRequestMove)}
               dropTarget={dropTarget}
               selected={selected}
+              tabIndex={tabIndex}
+              wrapperProps={{
+                role: 'treeitem',
+                'aria-level': depth + 1,
+                'aria-selected': selected,
+                ...(isFolder ? { 'aria-expanded': expanded } : {}),
+              }}
               onClick={(event) => {
                 if (isFolder) {
                   selectFolder(event, node);

package/src/workbench/workspace/createVirtualWorkspaceExplorerPort.ts

@@ -6,10 +6,7 @@ import {
 } from '@workbench-kit/workspace';
 
 import type { VirtualWorkspaceApi } from './useVirtualWorkspace';
-import type {
-  WorkspaceExplorerControllerPort,
-  WorkspaceExplorerMutationResult,
-} from './workspaceExplorerController';
+import type { WorkspaceExplorerControllerPort } from './workspaceExplorerController';
 
 export function createVirtualWorkspaceExplorerPort({
   onNotify,
@@ -129,13 +126,3 @@ export function applyVirtualWorkspaceRenameSelection(
     paths: selection.paths.map(renameDescendantPath),
   };
 }
-
-export function toWorkspaceExplorerMutationResult(
-  value: WorkspaceExplorerMutationResult | void | undefined,
-): WorkspaceExplorerMutationResult | undefined {
-  if (!value) {
-    return undefined;
-  }
-
-  return value;
-}