@workbench-kit/shell-react 0.0.2-prototype.0.2.6

package/src/commands-view.tsx

@@ -0,0 +1,43 @@
+import {
+  CommandManagementSidebar,
+  buildCommandInspectorUri,
+  findCommandManagementEntry,
+} from '@workbench-kit/react/workbench/management';
+
+import {
+  BUILTIN_COMMANDS_VIEW_RENDER_KIND,
+  isBuiltinCommandsViewRenderData,
+  type BuiltinCommandsViewRenderData,
+} from './commands-view-data.js';
+import { useCommandManagementModel } from './use-command-management.js';
+import { useEditorService } from './use-editor.js';
+
+export type { BuiltinCommandsViewRenderData };
+export { BUILTIN_COMMANDS_VIEW_RENDER_KIND, isBuiltinCommandsViewRenderData };
+
+export function BuiltinCommandsView() {
+  const editorService = useEditorService();
+  const { groups, lastRun, refreshRegistry, runCommand } = useCommandManagementModel();
+
+  const inspectCommand = (commandId: string) => {
+    const entry = findCommandManagementEntry(groups, commandId);
+    editorService.openEditor({
+      icon: 'codicon-terminal',
+      pinned: true,
+      preview: false,
+      resourceUri: buildCommandInspectorUri(commandId),
+      title: entry?.label ?? commandId,
+    });
+  };
+
+  return (
+    <CommandManagementSidebar
+      className="workbench-commands-view"
+      groups={groups}
+      lastRun={lastRun}
+      onInspectCommand={inspectCommand}
+      onRefresh={refreshRegistry}
+      onRunCommand={runCommand}
+    />
+  );
+}

package/src/createCommandWorkspaceExplorerPort.ts

@@ -0,0 +1,86 @@
+import type {
+  WorkspaceExplorerControllerPort,
+  WorkspaceExplorerMutationResult,
+  WorkspaceExplorerWorkspaceSnapshot,
+} from '@workbench-kit/react/workbench/workspace';
+import type { VirtualWorkspaceState } from '@workbench-kit/workspace';
+
+import { BUILTIN_EXPLORER_MOVE_COMMAND_ID } from './explorer-view-data.js';
+
+const WORKBENCH_WORKSPACE_DELETE_COMMAND_ID = 'workspace.delete' as const;
+const WORKBENCH_WORKSPACE_NEW_FILE_COMMAND_ID = 'workspace.newFile' as const;
+const WORKBENCH_WORKSPACE_NEW_FOLDER_COMMAND_ID = 'workspace.newFolder' as const;
+const WORKBENCH_WORKSPACE_OPEN_COMMAND_ID = 'workspace.open' as const;
+const WORKBENCH_WORKSPACE_RENAME_COMMAND_ID = 'workspace.rename' as const;
+
+interface WorkspaceCommandResult {
+  readonly path?: string | undefined;
+  readonly paths?: readonly string[] | undefined;
+}
+
+export function createCommandWorkspaceExplorerPort({
+  executeCommand,
+  workspaceState,
+}: {
+  executeCommand(commandId: string, payload?: unknown): Promise<unknown>;
+  workspaceState: VirtualWorkspaceState | undefined;
+}): WorkspaceExplorerControllerPort {
+  const snapshot: WorkspaceExplorerWorkspaceSnapshot = {
+    files: workspaceState?.files ?? [],
+    folders: workspaceState?.folders ?? [],
+  };
+
+  return {
+    snapshot,
+    createFile(input) {
+      return runWorkspaceCommand(executeCommand, WORKBENCH_WORKSPACE_NEW_FILE_COMMAND_ID, input);
+    },
+    createFolder(input) {
+      return runWorkspaceCommand(executeCommand, WORKBENCH_WORKSPACE_NEW_FOLDER_COMMAND_ID, input);
+    },
+    deleteEntries({ kind, paths }) {
+      void executeCommand(WORKBENCH_WORKSPACE_DELETE_COMMAND_ID, {
+        kind,
+        paths,
+      });
+    },
+    moveEntries(input) {
+      return runWorkspaceCommand(executeCommand, BUILTIN_EXPLORER_MOVE_COMMAND_ID, {
+        sourcePaths: input.sourcePaths,
+        targetFolderPath: input.targetFolderPath,
+      });
+    },
+    openFile(path) {
+      void executeCommand(WORKBENCH_WORKSPACE_OPEN_COMMAND_ID, {
+        kind: 'file',
+        path,
+        paths: [path],
+      });
+    },
+    renameEntry(input) {
+      return runWorkspaceCommand(executeCommand, WORKBENCH_WORKSPACE_RENAME_COMMAND_ID, input);
+    },
+  };
+}
+
+async function runWorkspaceCommand(
+  executeCommand: (commandId: string, payload?: unknown) => Promise<unknown>,
+  commandId: string,
+  payload: unknown,
+): Promise<WorkspaceExplorerMutationResult | undefined> {
+  const result = await executeCommand(commandId, payload);
+  return isWorkspaceCommandResult(result) ? result : undefined;
+}
+
+function isWorkspaceCommandResult(value: unknown): value is WorkspaceCommandResult {
+  if (typeof value !== 'object' || value === null) {
+    return false;
+  }
+
+  const result = value as WorkspaceCommandResult;
+  return (
+    (result.path === undefined || typeof result.path === 'string') &&
+    (result.paths === undefined ||
+      (Array.isArray(result.paths) && result.paths.every((path) => typeof path === 'string')))
+  );
+}

package/src/devtools/WorkbenchDevtoolsPanel.tsx

@@ -0,0 +1,124 @@
+import { useMemo, useState } from 'react';
+
+import { Button, ScrollArea } from '@workbench-kit/react/primitives';
+
+import { useWorkbenchDevtoolsSnapshot } from './use-workbench-devtools-snapshot.js';
+
+type DevtoolsSectionId =
+  | 'commands'
+  | 'menus'
+  | 'keybindings'
+  | 'contextKeys'
+  | 'capabilities'
+  | 'layout'
+  | 'editor'
+  | 'views'
+  | 'transactions'
+  | 'diagnostics';
+
+const DEVTOOLS_SECTIONS: readonly {
+  readonly id: DevtoolsSectionId;
+  readonly label: string;
+}[] = [
+  { id: 'commands', label: 'Commands' },
+  { id: 'menus', label: 'Menus' },
+  { id: 'keybindings', label: 'Keybindings' },
+  { id: 'contextKeys', label: 'Context keys' },
+  { id: 'capabilities', label: 'Capabilities' },
+  { id: 'layout', label: 'Layout' },
+  { id: 'editor', label: 'Editor' },
+  { id: 'views', label: 'Views' },
+  { id: 'transactions', label: 'Transactions' },
+  { id: 'diagnostics', label: 'Diagnostics' },
+];
+
+function formatSectionValue(
+  sectionId: DevtoolsSectionId,
+  snapshot: ReturnType<typeof useWorkbenchDevtoolsSnapshot>,
+): string {
+  switch (sectionId) {
+    case 'commands':
+      return JSON.stringify(snapshot.commands, null, 2);
+    case 'menus':
+      return JSON.stringify(snapshot.menus, null, 2);
+    case 'keybindings':
+      return JSON.stringify(snapshot.keybindings, null, 2);
+    case 'contextKeys':
+      return JSON.stringify(snapshot.contextKeys, null, 2);
+    case 'capabilities':
+      return JSON.stringify(
+        {
+          activeExtensions: snapshot.activeExtensions,
+          capabilities: snapshot.capabilities,
+        },
+        null,
+        2,
+      );
+    case 'layout':
+      return JSON.stringify(snapshot.layout, null, 2);
+    case 'editor':
+      return JSON.stringify(snapshot.editor, null, 2);
+    case 'views':
+      return JSON.stringify(
+        {
+          activities: snapshot.activities,
+          viewContainers: snapshot.viewContainers,
+          views: snapshot.views,
+        },
+        null,
+        2,
+      );
+    case 'transactions':
+      return JSON.stringify(snapshot.transactions, null, 2);
+    case 'diagnostics':
+      return JSON.stringify(snapshot.dependencyDiagnostics, null, 2);
+    default:
+      return '';
+  }
+}
+
+export function WorkbenchDevtoolsPanel() {
+  const snapshot = useWorkbenchDevtoolsSnapshot();
+  const [activeSection, setActiveSection] = useState<DevtoolsSectionId>('commands');
+  const sectionValue = useMemo(
+    () => formatSectionValue(activeSection, snapshot),
+    [activeSection, snapshot],
+  );
+
+  return (
+    <aside
+      aria-label="Workbench devtools"
+      className="workbench-devtools-panel"
+      data-testid="workbench-devtools-panel"
+    >
+      <header className="workbench-devtools-panel__header">
+        <strong>Workbench Devtools</strong>
+        <span className="workbench-devtools-panel__meta">Read-only</span>
+      </header>
+      <p className="workbench-devtools-panel__timestamp">Updated {snapshot.capturedAt}</p>
+      <nav aria-label="Devtools sections" className="workbench-devtools-panel__tabs">
+        {DEVTOOLS_SECTIONS.map((section) => (
+          <Button
+            key={section.id}
+            aria-pressed={activeSection === section.id}
+            compact
+            className="workbench-devtools-panel__tab"
+            onClick={() => {
+              setActiveSection(section.id);
+            }}
+          >
+            {section.label}
+          </Button>
+        ))}
+      </nav>
+      <ScrollArea
+        as="pre"
+        className="workbench-devtools-panel__output"
+        gutter="stable"
+        orientation="vertical"
+      >
+        {sectionValue}
+      </ScrollArea>
+    </aside>
+  );
+}

package/src/devtools/WorkbenchDevtoolsShell.tsx

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+
+import { WorkbenchDevtoolsPanel } from './WorkbenchDevtoolsPanel.js';
+import './workbench-devtools.css';
+
+export interface WorkbenchDevtoolsShellProps {
+  readonly children: ReactNode;
+}
+
+export function WorkbenchDevtoolsShell({ children }: WorkbenchDevtoolsShellProps) {
+  return (
+    <div className="workbench-devtools-shell" data-testid="workbench-devtools-shell">
+      <div className="workbench-devtools-shell__main">{children}</div>
+      <WorkbenchDevtoolsPanel />
+    </div>
+  );
+}

package/src/devtools/index.ts

@@ -0,0 +1,11 @@
+export { WorkbenchDevtoolsPanel } from './WorkbenchDevtoolsPanel.js';
+export {
+  WorkbenchDevtoolsShell,
+  type WorkbenchDevtoolsShellProps,
+} from './WorkbenchDevtoolsShell.js';
+export {
+  collectWorkbenchDevtoolsSnapshot,
+  type CollectWorkbenchDevtoolsSnapshotInput,
+  type WorkbenchDevtoolsSnapshot,
+} from './workbench-devtools-snapshot.js';
+export { useWorkbenchDevtoolsSnapshot } from './use-workbench-devtools-snapshot.js';

package/src/devtools/use-workbench-devtools-snapshot.ts

@@ -0,0 +1,84 @@
+import { useMemo, useSyncExternalStore } from 'react';
+
+import {
+  collectWorkbenchDevtoolsSnapshot,
+  type WorkbenchDevtoolsSnapshot,
+} from './workbench-devtools-snapshot.js';
+import { useWorkbench } from '../provider.js';
+import type { WorkbenchWorkspaceHostPort as WorkspaceHostPort } from '@workbench-kit/workspace';
+
+export function useWorkbenchDevtoolsSnapshot(): WorkbenchDevtoolsSnapshot {
+  const { editorService, extensionRegistry, layoutService, workspaceHostPort } = useWorkbench();
+
+  const store = useMemo(() => {
+    const collectSnapshot = () =>
+      collectWorkbenchDevtoolsSnapshot({
+        editorService,
+        extensionRegistry,
+        layoutService,
+        workspaceHostPort,
+      });
+    let snapshot = collectSnapshot();
+
+    const notifyChange = (onStoreChange: () => void) => {
+      snapshot = collectSnapshot();
+      onStoreChange();
+    };
+
+    return {
+      getSnapshot: () => snapshot,
+      subscribe: (onStoreChange: () => void) => {
+        const disposables = [
+          layoutService.onDidChangeLayout(() => {
+            notifyChange(onStoreChange);
+          }),
+          editorService.onDidChangeEditors(() => {
+            notifyChange(onStoreChange);
+          }),
+          extensionRegistry.commands.onDidRegisterCommand(() => {
+            notifyChange(onStoreChange);
+          }),
+          extensionRegistry.menus.onDidRegisterMenuItem(() => {
+            notifyChange(onStoreChange);
+          }),
+          extensionRegistry.keybindings.onDidRegisterKeybinding(() => {
+            notifyChange(onStoreChange);
+          }),
+          extensionRegistry.views.onDidRegisterView(() => {
+            notifyChange(onStoreChange);
+          }),
+          extensionRegistry.views.onDidRegisterViewContainer(() => {
+            notifyChange(onStoreChange);
+          }),
+          extensionRegistry.views.onDidRegisterViewProvider(() => {
+            notifyChange(onStoreChange);
+          }),
+          extensionRegistry.activities.onDidRegisterActivity(() => {
+            notifyChange(onStoreChange);
+          }),
+          extensionRegistry.onDidActivateExtension(() => {
+            notifyChange(onStoreChange);
+          }),
+          extensionRegistry.onDidDeactivateExtension(() => {
+            notifyChange(onStoreChange);
+          }),
+        ];
+
+        const workspacePort = workspaceHostPort as WorkspaceHostPort | undefined;
+        const unsubscribeWorkspace = workspacePort?.service.onDidChangeWorkspace(() => {
+          notifyChange(onStoreChange);
+        });
+
+        return () => {
+          for (const disposable of disposables) {
+            disposable.dispose();
+          }
+
+          unsubscribeWorkspace?.();
+        };
+      },
+    };
+  }, [editorService, extensionRegistry, layoutService, workspaceHostPort]);
+
+  return useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+}

package/src/devtools/workbench-devtools-snapshot.ts

@@ -0,0 +1,140 @@
+import type {
+  EditorService,
+  EditorState,
+  ExtensionDependencyDiagnostic,
+  ExtensionRegistry,
+  LayoutService,
+  WorkbenchLayoutState,
+} from '@workbench-kit/workbench-core';
+import type {
+  WorkbenchWorkspaceHostPort as WorkspaceHostPort,
+  WorkspaceResourceTransaction,
+} from '@workbench-kit/workspace';
+
+import type { WorkbenchWorkspaceHostPort } from '../provider.js';
+
+export interface WorkbenchDevtoolsSnapshot {
+  readonly activeExtensions: readonly { readonly extensionId: string }[];
+  readonly activities: readonly {
+    readonly icon?: string;
+    readonly id: string;
+    readonly title?: string;
+  }[];
+  readonly capabilities: readonly string[];
+  readonly capturedAt: string;
+  readonly commands: readonly {
+    readonly category?: string;
+    readonly id: string;
+    readonly title?: string;
+  }[];
+  readonly contextKeys: Readonly<Record<string, boolean | number | string>>;
+  readonly dependencyDiagnostics: readonly ExtensionDependencyDiagnostic[];
+  readonly editor: EditorState;
+  readonly keybindings: readonly {
+    readonly command: string;
+    readonly key: string;
+    readonly when?: string | undefined;
+  }[];
+  readonly layout: WorkbenchLayoutState;
+  readonly menus: readonly {
+    readonly command: string;
+    readonly group?: string | undefined;
+    readonly menu: string;
+    readonly order?: number | undefined;
+    readonly when?: string | undefined;
+  }[];
+  readonly transactions: readonly WorkspaceResourceTransaction[];
+  readonly viewContainers: readonly {
+    readonly icon?: string;
+    readonly id: string;
+    readonly location: string;
+    readonly title?: string;
+  }[];
+  readonly views: readonly {
+    readonly containerId: string;
+    readonly id: string;
+    readonly name?: string;
+  }[];
+}
+
+export interface CollectWorkbenchDevtoolsSnapshotInput {
+  readonly capturedAt?: string | undefined;
+  readonly editorService: EditorService;
+  readonly extensionRegistry: ExtensionRegistry;
+  readonly layoutService: LayoutService;
+  readonly workspaceHostPort?: WorkbenchWorkspaceHostPort | undefined;
+}
+
+export function collectWorkbenchDevtoolsSnapshot({
+  capturedAt = new Date().toISOString(),
+  editorService,
+  extensionRegistry,
+  layoutService,
+  workspaceHostPort,
+}: CollectWorkbenchDevtoolsSnapshotInput): WorkbenchDevtoolsSnapshot {
+  const layout = layoutService.getState();
+  const editor = editorService.getState();
+  const activeTabCount = editor.groups.reduce((count, group) => count + group.tabs.length, 0);
+
+  return {
+    activeExtensions: extensionRegistry.getActiveExtensions().map(({ extensionId }) => ({
+      extensionId,
+    })),
+    activities: extensionRegistry.activities.getActivities().map((activity) => ({
+      icon: activity.icon,
+      id: activity.id,
+      title: activity.title,
+    })),
+    capabilities: extensionRegistry.capabilityRegistry.listProviderIds(),
+    capturedAt,
+    commands: extensionRegistry.commands.getCommands().map((command) => ({
+      category: command.category,
+      id: command.id,
+      title: command.title,
+    })),
+    contextKeys: {
+      'editor.activeGroupId': editor.activeGroupId ?? '',
+      'editor.openTabCount': activeTabCount,
+      'layout.activityBar.visible': layout.activityBar.visible,
+      'layout.auxiliaryBar.visible': layout.auxiliaryBar.visible,
+      'layout.panel.visible': layout.panel.visible,
+      'layout.sideBar.activeViewContainer': layout.sideBar.activeViewContainer ?? '',
+      'layout.sideBar.visible': layout.sideBar.visible,
+      'workspace.hasHostPort': workspaceHostPort !== undefined,
+    },
+    dependencyDiagnostics: extensionRegistry.getDependencyDiagnostics(),
+    editor,
+    keybindings: extensionRegistry.keybindings.getKeybindings().map((binding) => ({
+      command: binding.command,
+      key: binding.key,
+      when: binding.when,
+    })),
+    layout,
+    menus: extensionRegistry.menus.getMenuItems().map((menu) => ({
+      command: menu.command,
+      group: menu.group,
+      menu: menu.menu,
+      order: menu.order,
+      when: menu.when,
+    })),
+    transactions: readWorkspaceTransactionJournal(workspaceHostPort),
+    viewContainers: extensionRegistry.views.getViewContainers().map((container) => ({
+      icon: container.icon,
+      id: container.id,
+      location: container.location,
+      title: container.title,
+    })),
+    views: extensionRegistry.views.getViews().map((view) => ({
+      containerId: view.containerId,
+      id: view.id,
+      name: view.name,
+    })),
+  };
+}
+
+function readWorkspaceTransactionJournal(
+  workspaceHostPort: WorkbenchWorkspaceHostPort | undefined,
+): readonly WorkspaceResourceTransaction[] {
+  const port = workspaceHostPort as WorkspaceHostPort | undefined;
+  return port?.service.getTransactionJournal() ?? [];
+}

package/src/devtools/workbench-devtools.css

@@ -0,0 +1,82 @@
+.workbench-devtools-shell {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) min(360px, 34vw);
+  height: 100%;
+  min-height: 0;
+  width: 100%;
+}
+
+.workbench-devtools-shell__main {
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.workbench-devtools-panel {
+  background: var(--color-bg);
+  border-left: 1px solid var(--color-border);
+  color: var(--color-text);
+  display: flex;
+  flex-direction: column;
+  font-family: var(--vscode-font-family, system-ui, sans-serif);
+  font-size: var(--font-size-sm);
+  min-height: 0;
+  min-width: 0;
+}
+
+.workbench-devtools-panel__header {
+  align-items: center;
+  display: flex;
+  gap: 8px;
+  justify-content: space-between;
+  padding: 12px 12px 4px;
+}
+
+.workbench-devtools-panel__meta {
+  color: var(--color-text-muted);
+  font-size: 11px;
+}
+
+.workbench-devtools-panel__timestamp {
+  color: var(--color-text-muted);
+  font-size: 11px;
+  margin: 0;
+  padding: 0 12px 8px;
+}
+
+.workbench-devtools-panel__tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: 0 8px 8px;
+}
+
+.workbench-devtools-panel__tab.ui-button {
+  height: auto;
+  min-height: 26px;
+  padding: 4px 8px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-weight: 400;
+}
+
+.workbench-devtools-panel__tab.ui-button[aria-pressed='true'] {
+  background: var(--color-surface-hover);
+  border-color: var(--color-accent);
+}
+
+.workbench-devtools-panel__output {
+  border-top: 1px solid var(--color-border);
+  flex: 1;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 11px;
+  line-height: 1.45;
+  margin: 0;
+  min-height: 0;
+  padding: 12px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}

package/src/editor-area-dnd.ts

@@ -0,0 +1,69 @@
+import { WORKSPACE_EXPLORER_DRAG_DATA_TYPE } from '@workbench-kit/react/workbench/workspace/explorer';
+import {
+  resolveEditorGroupDropSide,
+  type EditorDropRect,
+  type EditorGroupDropSide,
+} from '@workbench-kit/workbench-core';
+
+export {
+  EDITOR_TAB_DRAG_DATA_TYPE,
+  getEditorTabDropPosition,
+  isEditorTabMoveNoop,
+  isEditorTabsScrollerEventTarget,
+  readEditorTabDragPayload,
+  resolveEditorTabDropTarget,
+  resolveEditorTabStripDropTarget,
+} from '@workbench-kit/react';
+
+export type { EditorTabDragPayload, EditorTabDropTarget } from '@workbench-kit/react';
+
+const INTERNAL_EDITOR_AREA_DRAG_DATA_TYPES = [
+  'application/x-workbench-kit-editor-tab',
+  WORKSPACE_EXPLORER_DRAG_DATA_TYPE,
+] as const;
+
+interface EditorDropTargetElement {
+  getBoundingClientRect(): EditorDropRect;
+}
+
+export function isInternalEditorAreaDrag(
+  dataTransfer: Pick<DataTransfer, 'types'>,
+  draggedTab: { readonly groupId: string; readonly tabId: string } | null,
+): boolean {
+  return (
+    draggedTab !== null ||
+    INTERNAL_EDITOR_AREA_DRAG_DATA_TYPES.some((dataType) =>
+      dataTransferHasType(dataTransfer, dataType),
+    )
+  );
+}
+
+export function dataTransferHasType(
+  dataTransfer: Pick<DataTransfer, 'types'>,
+  dataType: string,
+): boolean {
+  return Array.from(dataTransfer.types).includes(dataType);
+}
+
+export function getEditorGroupDropSide(
+  target: EditorDropTargetElement,
+  clientX: number,
+  clientY: number,
+): EditorGroupDropSide {
+  return resolveEditorGroupDropSide({
+    point: { x: clientX, y: clientY },
+    rect: getEditorDropRect(target),
+  });
+}
+
+export function getEditorDropRect(target: EditorDropTargetElement): EditorDropRect {
+  const rect = target.getBoundingClientRect();
+  return {
+    bottom: rect.bottom,
+    height: rect.height,
+    left: rect.left,
+    right: rect.right,
+    top: rect.top,
+    width: rect.width,
+  };
+}