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

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

package/src/workbench/workspace/workspaceExplorerKeyboard.ts

@@ -0,0 +1,109 @@
+import { parentPathOf } from '@workbench-kit/workspace';
+
+import type { WorkspaceTreeNode } from './types.js';
+
+export type WorkspaceExplorerVisibleRow = {
+  readonly depth: number;
+  readonly node: WorkspaceTreeNode;
+};
+
+export type WorkspaceExplorerVerticalNavigationKey = 'ArrowDown' | 'ArrowUp' | 'Home' | 'End';
+
+export type WorkspaceExplorerHorizontalNavigationKey = 'ArrowLeft' | 'ArrowRight';
+
+export type WorkspaceExplorerHorizontalNavigationAction =
+  | { readonly type: 'toggle'; readonly path: string }
+  | { readonly type: 'focus'; readonly path: string };
+
+function rowIndexByPath(
+  rows: readonly WorkspaceExplorerVisibleRow[],
+  path: string | undefined,
+): number {
+  if (!path) {
+    return -1;
+  }
+  return rows.findIndex((row) => row.node.path === path);
+}
+
+/**
+ * Resolve the next focused path for vertical tree navigation over visible
+ * (already collapse-filtered) explorer rows.
+ */
+export function resolveWorkspaceExplorerNavigationPath(
+  rows: readonly WorkspaceExplorerVisibleRow[],
+  focusedPath: string | undefined,
+  key: WorkspaceExplorerVerticalNavigationKey,
+): string | null {
+  if (rows.length === 0) {
+    return null;
+  }
+
+  const currentIndex = rowIndexByPath(rows, focusedPath);
+  const fallbackIndex = currentIndex >= 0 ? currentIndex : 0;
+
+  if (key === 'Home') {
+    return rows[0]?.node.path ?? null;
+  }
+  if (key === 'End') {
+    return rows[rows.length - 1]?.node.path ?? null;
+  }
+  if (key === 'ArrowDown') {
+    return rows[Math.min(rows.length - 1, fallbackIndex + 1)]?.node.path ?? null;
+  }
+  return rows[Math.max(0, fallbackIndex - 1)]?.node.path ?? null;
+}
+
+function firstChildPath(
+  rows: readonly WorkspaceExplorerVisibleRow[],
+  parentPath: string,
+): string | null {
+  return rows.find((row) => parentPathOf(row.node.path) === parentPath)?.node.path ?? null;
+}
+
+/**
+ * Resolve expand/collapse/parent focus for ArrowLeft/ArrowRight.
+ * Call `onToggleFolder` only for `toggle` actions (toggle-only host API).
+ */
+export function resolveWorkspaceExplorerHorizontalNavigationAction(
+  rows: readonly WorkspaceExplorerVisibleRow[],
+  focusedPath: string | undefined,
+  expandedPaths: ReadonlySet<string>,
+  key: WorkspaceExplorerHorizontalNavigationKey,
+  options: { readonly filterActive?: boolean } = {},
+): WorkspaceExplorerHorizontalNavigationAction | null {
+  const currentIndex = rowIndexByPath(rows, focusedPath);
+  const current = rows[currentIndex >= 0 ? currentIndex : 0];
+  if (!current) {
+    return null;
+  }
+
+  const { node } = current;
+  const filterActive = options.filterActive ?? false;
+  const isFolder = node.type === 'folder';
+  const expanded = isFolder && (expandedPaths.has(node.path) || filterActive);
+
+  if (key === 'ArrowRight') {
+    if (!isFolder) {
+      return null;
+    }
+    if (!expanded && !filterActive) {
+      return { type: 'toggle', path: node.path };
+    }
+    const childPath = firstChildPath(rows, node.path);
+    return childPath ? { type: 'focus', path: childPath } : null;
+  }
+
+  // ArrowLeft
+  if (isFolder && expanded && !filterActive) {
+    return { type: 'toggle', path: node.path };
+  }
+
+  const parentPath = parentPathOf(node.path);
+  if (!parentPath) {
+    return null;
+  }
+  if (rowIndexByPath(rows, parentPath) < 0) {
+    return null;
+  }
+  return { type: 'focus', path: parentPath };
+}

package/src/workbench/workspace/workspaceJsonDiagnostics.ts

@@ -68,11 +68,12 @@ export function configureWorkspaceEditorJsonDiagnostics(
   const schemas = getWorkspaceEditorJsonDiagnosticsSchemas(file);
   if (schemas.length === 0) return;
 
-  const jsonDefaults = (
-    monacoInstance.languages.json as unknown as {
-      jsonDefaults?: { setDiagnosticsOptions: (options: unknown) => void };
-    }
-  ).jsonDefaults;
+  const jsonLanguage = monacoInstance.languages.json as unknown as
+    | {
+        jsonDefaults?: { setDiagnosticsOptions: (options: unknown) => void };
+      }
+    | undefined;
+  const jsonDefaults = jsonLanguage?.jsonDefaults;
   if (!jsonDefaults) return;
 
   jsonDefaults.setDiagnosticsOptions({

package/src/workbench-menu-surfaces.css

@@ -1,57 +1,3 @@
-/* Optional compact menu density for context menus and command lists. */
-
-.ui-context-menu__item,
-.ui-context-menu__item.ui-button {
-  --ui-button-min-height: 28px;
-  --ui-button-height: auto;
-  --ui-button-padding: 4px 10px;
-  --ui-button-border-radius: 0;
-  border-radius: 0;
-  min-height: 28px;
-  height: auto;
-  padding: 4px 10px;
-}
-
-.ui-context-menu__separator {
-  margin: 0;
-}
-
-.ui-context-menu__shortcut {
-  font-size: var(--font-size-xs);
-  color: var(--color-text-subtle);
-}
-
-.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;
-}
+/* Compatibility entry for consumers that opt into both compact menu surfaces. */
+@import './overlay/context-menu-density.css';
+@import './workbench/views/command-list-density.css';

package/src/brand/TilepaperAppIcon.tsx

@@ -1,181 +0,0 @@
-import { useId, type SVGProps } from 'react';
-import { cx } from '../utils/cx';
-import {
-  TILEPAPER_ICON_CANVAS,
-  TILEPAPER_ICON_GRADIENTS,
-  TILEPAPER_ICON_GRID,
-  TILEPAPER_ICON_ROOT_ELEVATION,
-  TILEPAPER_ICON_ROOT_PANEL,
-  TILEPAPER_ICON_TILES,
-  tilepaperPaperFoldPaths,
-} from './tilepaper-app-icon-geometry.js';
-
-export type TilepaperAppIconProps = Omit<SVGProps<SVGSVGElement>, 'viewBox'> & {
-  /** Flat rendering for small surfaces (e.g. titlebar) where elevation blur reads muddy. */
-  compact?: boolean;
-};
-
-export function TilepaperAppIcon({ className, compact = false, ...props }: TilepaperAppIconProps) {
-  const idPrefix = `tilepaper-icon-${useId().replace(/:/g, '')}`;
-  const bgId = `${idPrefix}-bg`;
-  const panelId = `${idPrefix}-panel`;
-  const elevationId = `${idPrefix}-elevation`;
-  const blueId = `${idPrefix}-blue`;
-  const paperId = `${idPrefix}-paper`;
-  const tealId = `${idPrefix}-teal`;
-  const violetId = `${idPrefix}-violet`;
-  const { tileRx, tileSize } = TILEPAPER_ICON_GRID;
-  const fold = tilepaperPaperFoldPaths(
-    TILEPAPER_ICON_TILES.paper.x,
-    TILEPAPER_ICON_TILES.paper.y,
-    tileSize,
-  );
-
-  return (
-    <svg
-      aria-hidden="true"
-      className={cx('tilepaper-app-icon', className)}
-      fill="none"
-      viewBox={`0 0 ${TILEPAPER_ICON_CANVAS.size} ${TILEPAPER_ICON_CANVAS.size}`}
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <defs>
-        {compact ? null : (
-          <filter
-            id={elevationId}
-            x="-12%"
-            y="-8%"
-            width="124%"
-            height="128%"
-            colorInterpolationFilters="sRGB"
-          >
-            <feDropShadow
-              dx="0"
-              dy={TILEPAPER_ICON_ROOT_ELEVATION.dy}
-              floodColor={TILEPAPER_ICON_ROOT_ELEVATION.floodColor}
-              floodOpacity={TILEPAPER_ICON_ROOT_ELEVATION.floodOpacity}
-              stdDeviation={TILEPAPER_ICON_ROOT_ELEVATION.stdDeviation}
-            />
-          </filter>
-        )}
-        <linearGradient
-          id={bgId}
-          x1={TILEPAPER_ICON_GRADIENTS.bg.x1}
-          x2={TILEPAPER_ICON_GRADIENTS.bg.x2}
-          y1={TILEPAPER_ICON_GRADIENTS.bg.y1}
-          y2={TILEPAPER_ICON_GRADIENTS.bg.y2}
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop offset="0" stopColor="#0A1020" />
-          <stop offset="1" stopColor="#121C33" />
-        </linearGradient>
-        <linearGradient
-          id={panelId}
-          x1={TILEPAPER_ICON_GRADIENTS.panel.x1}
-          x2={TILEPAPER_ICON_GRADIENTS.panel.x2}
-          y1={TILEPAPER_ICON_GRADIENTS.panel.y1}
-          y2={TILEPAPER_ICON_GRADIENTS.panel.y2}
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop offset="0" stopColor="#1A2C4D" />
-          <stop offset="0.42" stopColor="#162844" />
-          <stop offset="1" stopColor="#111D35" />
-        </linearGradient>
-        <linearGradient
-          id={blueId}
-          x1={TILEPAPER_ICON_GRADIENTS.blue.x1}
-          x2={TILEPAPER_ICON_GRADIENTS.blue.x2}
-          y1={TILEPAPER_ICON_GRADIENTS.blue.y1}
-          y2={TILEPAPER_ICON_GRADIENTS.blue.y2}
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop offset="0" stopColor="#5D88FF" />
-          <stop offset="1" stopColor="#3158D6" />
-        </linearGradient>
-        <linearGradient
-          id={paperId}
-          x1={TILEPAPER_ICON_GRADIENTS.paper.x1}
-          x2={TILEPAPER_ICON_GRADIENTS.paper.x2}
-          y1={TILEPAPER_ICON_GRADIENTS.paper.y1}
-          y2={TILEPAPER_ICON_GRADIENTS.paper.y2}
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop offset="0" stopColor="#FFF9EE" />
-          <stop offset="1" stopColor="#DDD9D1" />
-        </linearGradient>
-        <linearGradient
-          id={tealId}
-          x1={TILEPAPER_ICON_GRADIENTS.teal.x1}
-          x2={TILEPAPER_ICON_GRADIENTS.teal.x2}
-          y1={TILEPAPER_ICON_GRADIENTS.teal.y1}
-          y2={TILEPAPER_ICON_GRADIENTS.teal.y2}
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop offset="0" stopColor="#2FD6C1" />
-          <stop offset="1" stopColor="#149685" />
-        </linearGradient>
-        <linearGradient
-          id={violetId}
-          x1={TILEPAPER_ICON_GRADIENTS.violet.x1}
-          x2={TILEPAPER_ICON_GRADIENTS.violet.x2}
-          y1={TILEPAPER_ICON_GRADIENTS.violet.y1}
-          y2={TILEPAPER_ICON_GRADIENTS.violet.y2}
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop offset="0" stopColor="#8A67FF" />
-          <stop offset="1" stopColor="#5D3AC8" />
-        </linearGradient>
-      </defs>
-      <rect
-        width={TILEPAPER_ICON_CANVAS.size}
-        height={TILEPAPER_ICON_CANVAS.size}
-        rx={TILEPAPER_ICON_CANVAS.rx}
-        fill={`url(#${bgId})`}
-      />
-      <rect
-        filter={compact ? undefined : `url(#${elevationId})`}
-        fill={`url(#${panelId})`}
-        height={TILEPAPER_ICON_ROOT_PANEL.size}
-        rx={TILEPAPER_ICON_ROOT_PANEL.rx}
-        width={TILEPAPER_ICON_ROOT_PANEL.size}
-        x={TILEPAPER_ICON_ROOT_PANEL.x}
-        y={TILEPAPER_ICON_ROOT_PANEL.y}
-      />
-      <rect
-        x={TILEPAPER_ICON_TILES.blue.x}
-        y={TILEPAPER_ICON_TILES.blue.y}
-        width={tileSize}
-        height={tileSize}
-        rx={tileRx}
-        fill={`url(#${blueId})`}
-      />
-      <rect
-        x={TILEPAPER_ICON_TILES.teal.x}
-        y={TILEPAPER_ICON_TILES.teal.y}
-        width={tileSize}
-        height={tileSize}
-        rx={tileRx}
-        fill={`url(#${tealId})`}
-      />
-      <rect
-        x={TILEPAPER_ICON_TILES.violet.x}
-        y={TILEPAPER_ICON_TILES.violet.y}
-        width={tileSize}
-        height={tileSize}
-        rx={tileRx}
-        fill={`url(#${violetId})`}
-      />
-      <rect
-        x={TILEPAPER_ICON_TILES.paper.x}
-        y={TILEPAPER_ICON_TILES.paper.y}
-        width={tileSize}
-        height={tileSize}
-        rx={tileRx}
-        fill={`url(#${paperId})`}
-      />
-      <path d={fold.highlight} fill="white" fillOpacity="0.92" />
-      <path d={fold.shadow} fill="#C9C3B7" fillOpacity="0.74" />
-    </svg>
-  );
-}

package/src/brand/index.ts

@@ -1,2 +0,0 @@
-export { TilepaperAppIcon } from './TilepaperAppIcon';
-export type { TilepaperAppIconProps } from './TilepaperAppIcon';