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

package/src/workbench/workbenchPlatformChrome.ts

@@ -0,0 +1,40 @@
+export type WorkbenchHostPlatform = 'darwin' | 'win32' | 'linux';
+
+export type WorkbenchWindowChromeMode = 'platform' | 'generic';
+
+export function resolveWorkbenchHostPlatform(
+  platformOverride?: WorkbenchHostPlatform | null,
+): WorkbenchHostPlatform {
+  if (platformOverride) {
+    return platformOverride;
+  }
+
+  if (typeof navigator === 'undefined') {
+    return 'win32';
+  }
+
+  const platform = navigator.platform?.toLowerCase() ?? '';
+  const userAgent = navigator.userAgent?.toLowerCase() ?? '';
+
+  if (platform.includes('mac') || userAgent.includes('mac')) {
+    return 'darwin';
+  }
+
+  if (platform.includes('linux') || userAgent.includes('linux')) {
+    return 'linux';
+  }
+
+  return 'win32';
+}
+
+export function resolveWorkbenchWindowChromeDataAttributes(
+  chrome: WorkbenchWindowChromeMode = 'platform',
+): Record<string, string> | undefined {
+  if (chrome !== 'platform') {
+    return undefined;
+  }
+
+  return {
+    'data-workbench-window-chrome': 'platform',
+  };
+}

package/src/workbench/workbenchSidebarLayoutContext.ts

@@ -0,0 +1,46 @@
+import { createContext, useContext } from 'react';
+
+import type { WorkbenchSidebarSlotId } from '@workbench-kit/platform';
+
+export interface WorkbenchSidebarLayoutContextValue<TViewId extends string = string> {
+  readonly dropViewOnSlot: (viewId: TViewId, targetSlot: WorkbenchSidebarSlotId) => void;
+  readonly placements: Readonly<Record<TViewId, WorkbenchSidebarSlotId>>;
+  readonly primaryViewId: TViewId;
+  readonly resolveSlotViewIds: (
+    slot: WorkbenchSidebarSlotId,
+    baseViewIds: readonly TViewId[],
+  ) => readonly TViewId[];
+  readonly secondaryViewId: TViewId;
+  readonly selectPrimaryView: (viewId: TViewId) => void;
+  readonly selectSecondaryView: (viewId: TViewId) => void;
+  readonly setSlotViewOrder: (
+    slot: WorkbenchSidebarSlotId,
+    orderedViewIds: readonly TViewId[],
+    availableViewIds: readonly TViewId[],
+  ) => void;
+}
+
+type WorkbenchSidebarLayoutContextStore = WorkbenchSidebarLayoutContextValue<string>;
+
+export const WorkbenchSidebarLayoutContext =
+  createContext<WorkbenchSidebarLayoutContextStore | null>(null);
+
+export function useWorkbenchSidebarLayoutContextValue<
+  TViewId extends string,
+>(): WorkbenchSidebarLayoutContextValue<TViewId> | null {
+  return useContext(
+    WorkbenchSidebarLayoutContext,
+  ) as WorkbenchSidebarLayoutContextValue<TViewId> | null;
+}
+
+export function toWorkbenchSidebarLayoutContextValue<TViewId extends string>(
+  value: WorkbenchSidebarLayoutContextValue<TViewId>,
+): 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/workbenchStandaloneShellReactContext.tsx

@@ -0,0 +1,80 @@
+import { createContext, useContext, type ReactElement, type ReactNode } from 'react';
+
+import type { WorkbenchStandaloneShellContext } from './WorkbenchStandaloneShell';
+
+const WorkbenchStandaloneShellReactContext = createContext<unknown>(null);
+
+export interface WorkbenchStandaloneShellStateSnapshot<
+  TActivityId extends string = string,
+  TTheme extends string = string,
+> {
+  activityId: TActivityId;
+  isPrimarySidebarVisible: boolean;
+  isSettingsOpen: boolean;
+  primarySidebarSizePx: number;
+  theme: TTheme;
+}
+
+export type WorkbenchStandaloneShellStateChangeKind =
+  'initial' | 'activity' | 'sidebar-visibility' | 'sidebar-size' | 'settings' | 'theme';
+
+export interface WorkbenchStandaloneShellStateChange<
+  TActivityId extends string = string,
+  TTheme extends string = string,
+> {
+  kind: WorkbenchStandaloneShellStateChangeKind;
+  previous: WorkbenchStandaloneShellStateSnapshot<TActivityId, TTheme> | null;
+  next: WorkbenchStandaloneShellStateSnapshot<TActivityId, TTheme>;
+  activityChanged: boolean;
+  primarySidebarVisibilityChanged: boolean;
+  primarySidebarSizeChanged: boolean;
+  settingsOpenChanged: boolean;
+  themeChanged: boolean;
+}
+
+export function createWorkbenchStandaloneShellStateSnapshot<
+  TActivityId extends string,
+  TTheme extends string,
+>(
+  context: WorkbenchStandaloneShellContext<TActivityId, TTheme>,
+): WorkbenchStandaloneShellStateSnapshot<TActivityId, TTheme> {
+  return {
+    activityId: context.activityId,
+    isPrimarySidebarVisible: context.isPrimarySidebarVisible,
+    isSettingsOpen: context.isSettingsOpen,
+    primarySidebarSizePx: context.primarySidebarSizePx,
+    theme: context.theme,
+  };
+}
+
+export function WorkbenchStandaloneShellReactContextProvider<
+  TActivityId extends string,
+  TTheme extends string,
+>({
+  children,
+  value,
+}: {
+  children: ReactNode;
+  value: WorkbenchStandaloneShellContext<TActivityId, TTheme>;
+}): ReactElement {
+  return (
+    <WorkbenchStandaloneShellReactContext.Provider value={value}>
+      {children}
+    </WorkbenchStandaloneShellReactContext.Provider>
+  );
+}
+
+export function useWorkbenchStandaloneShellContext<
+  TActivityId extends string = string,
+  TTheme extends string = string,
+>(): WorkbenchStandaloneShellContext<TActivityId, TTheme> {
+  const context = useContext(WorkbenchStandaloneShellReactContext);
+
+  if (!context) {
+    throw new Error(
+      'useWorkbenchStandaloneShellContext must be used within WorkbenchStandaloneShell.',
+    );
+  }
+
+  return context as WorkbenchStandaloneShellContext<TActivityId, TTheme>;
+}

package/src/workbench/workbenchViewRouteState.ts

@@ -0,0 +1,151 @@
+import { useCallback, useEffect, useState } from 'react';
+import {
+  areWorkbenchViewRouteSnapshotsEqual,
+  buildWorkbenchViewRouteSearch,
+  closeWorkbenchViewRoute,
+  openWorkbenchViewRoute,
+  resolveWorkbenchViewRouteSnapshot,
+  switchWorkbenchViewRoute,
+  type WorkbenchViewRouteSnapshot,
+} from '@workbench-kit/platform';
+
+export type WorkbenchViewRouteCommitMode = 'push' | 'replace';
+
+export interface WorkbenchViewRouteBrowserWindow {
+  readonly history: Pick<Window['history'], 'pushState' | 'replaceState'>;
+  readonly location: Pick<Window['location'], 'hash' | 'pathname' | 'search'>;
+  addEventListener(type: 'popstate', listener: (event: PopStateEvent) => void): void;
+  removeEventListener(type: 'popstate', listener: (event: PopStateEvent) => void): void;
+}
+
+export interface UseWorkbenchViewRouteStateOptions<TViewId extends string> {
+  readonly defaultViewId: TViewId;
+  readonly discardedParams?: ReadonlyArray<string> | undefined;
+  readonly isViewId: (value: string | null) => value is TViewId;
+  readonly routeWindow?: WorkbenchViewRouteBrowserWindow | undefined;
+  readonly tabsParam?: string | undefined;
+  readonly viewParam?: string | undefined;
+}
+
+export interface WorkbenchViewRouteState<
+  TViewId extends string,
+> extends WorkbenchViewRouteSnapshot<TViewId> {
+  readonly closeView: (viewId: TViewId) => void;
+  readonly openView: (viewId: TViewId) => void;
+  readonly switchView: (viewId: TViewId) => void;
+}
+
+export function useWorkbenchViewRouteState<TViewId extends string>({
+  defaultViewId,
+  discardedParams,
+  isViewId,
+  routeWindow,
+  tabsParam,
+  viewParam,
+}: UseWorkbenchViewRouteStateOptions<TViewId>): WorkbenchViewRouteState<TViewId> {
+  const resolvedWindow = routeWindow ?? resolveWorkbenchViewRouteBrowserWindow();
+  const resolveRouteSnapshot = useCallback(
+    () =>
+      resolveWorkbenchViewRouteSnapshot({
+        defaultViewId,
+        isViewId,
+        search: resolvedWindow.location.search,
+        tabsParam,
+        viewParam,
+      }),
+    [defaultViewId, isViewId, resolvedWindow, tabsParam, viewParam],
+  );
+  const [snapshot, setSnapshot] = useState(resolveRouteSnapshot);
+
+  useEffect(() => {
+    const handlePopState = (): void => {
+      setSnapshot(resolveRouteSnapshot());
+    };
+
+    resolvedWindow.addEventListener('popstate', handlePopState);
+    return () => {
+      resolvedWindow.removeEventListener('popstate', handlePopState);
+    };
+  }, [resolveRouteSnapshot, resolvedWindow]);
+
+  const commitSnapshot = useCallback(
+    (nextSnapshot: WorkbenchViewRouteSnapshot<TViewId>, mode: WorkbenchViewRouteCommitMode) => {
+      if (areWorkbenchViewRouteSnapshotsEqual(snapshot, nextSnapshot)) {
+        return;
+      }
+
+      const nextSearch = buildWorkbenchViewRouteSearch(
+        resolvedWindow.location.search,
+        nextSnapshot,
+        {
+          discardedParams,
+          tabsParam,
+          viewParam,
+        },
+      );
+
+      if (nextSearch !== resolvedWindow.location.search) {
+        const nextUrl = `${resolvedWindow.location.pathname}${nextSearch}${resolvedWindow.location.hash}`;
+
+        if (mode === 'replace') {
+          resolvedWindow.history.replaceState(null, '', nextUrl);
+        } else {
+          resolvedWindow.history.pushState(null, '', nextUrl);
+        }
+      }
+
+      setSnapshot(nextSnapshot);
+    },
+    [discardedParams, resolvedWindow, snapshot, tabsParam, viewParam],
+  );
+
+  const openView = useCallback(
+    (viewId: TViewId): void => {
+      commitSnapshot(
+        {
+          activeViewId: viewId,
+          openViewIds: openWorkbenchViewRoute(snapshot.openViewIds, viewId),
+        },
+        'push',
+      );
+    },
+    [commitSnapshot, snapshot.openViewIds],
+  );
+
+  const closeView = useCallback(
+    (viewId: TViewId): void => {
+      commitSnapshot(
+        closeWorkbenchViewRoute({
+          defaultViewId,
+          snapshot,
+          viewId,
+        }),
+        'replace',
+      );
+    },
+    [commitSnapshot, defaultViewId, snapshot],
+  );
+
+  const switchView = useCallback(
+    (viewId: TViewId): void => {
+      commitSnapshot(switchWorkbenchViewRoute(snapshot, viewId), 'replace');
+    },
+    [commitSnapshot, snapshot],
+  );
+
+  return {
+    activeViewId: snapshot.activeViewId,
+    closeView,
+    openView,
+    openViewIds: snapshot.openViewIds,
+    switchView,
+  };
+}
+
+function resolveWorkbenchViewRouteBrowserWindow(): WorkbenchViewRouteBrowserWindow {
+  if (typeof window === 'undefined') {
+    throw new Error('useWorkbenchViewRouteState requires a browser window.');
+  }
+
+  return window;
+}

package/src/workbench/workspace/WorkspaceDraftsContext.tsx

@@ -1,5 +1,7 @@
-import { createContext, useContext, useState, type ReactNode } from 'react';
+import { createContext, useCallback, useContext, useMemo, useState, type ReactNode } from 'react';
 import {
+  getWorkspaceDirtyDraftPaths,
+  getWorkspaceFileDraft,
   type WorkspaceFileDraftMap,
   resolveWorkspaceFileDraft,
   updateWorkspaceFileDraft,
@@ -9,103 +11,89 @@ import {
 
 export interface WorkspaceDraftsContextValue {
   drafts: WorkspaceFileDraftMap;
+  dirtyCount: number;
+  dirtyPaths: readonly string[];
   getDraft: (path: string, fileContent: string) => string;
+  hasDirtyDrafts: boolean;
   isDirty: (path: string, fileContent: string) => boolean;
   updateDraft: (path: string, content: string, fileContent: string) => void;
   saveDraft: (path: string, content: string) => void;
   discardDraft: (path: string, fileContent: string) => void;
+  resetDrafts: (drafts?: WorkspaceFileDraftMap) => void;
 }
 
 export const WorkspaceDraftsContext = createContext<WorkspaceDraftsContextValue | null>(null);
 
 export interface WorkspaceDraftsProviderProps {
   children: ReactNode;
+  initialDrafts?: WorkspaceFileDraftMap | undefined;
 }
 
-export function WorkspaceDraftsProvider({ children }: WorkspaceDraftsProviderProps) {
-  const [drafts, setDrafts] = useState<WorkspaceFileDraftMap>({});
+export function useWorkspaceDraftController(
+  initialDrafts: WorkspaceFileDraftMap = {},
+): WorkspaceDraftsContextValue {
+  const [drafts, setDrafts] = useState<WorkspaceFileDraftMap>(initialDrafts);
+  const dirtyPaths = useMemo(() => getWorkspaceDirtyDraftPaths(drafts), [drafts]);
 
-  const updateDraft = (path: string, content: string, fileContent: string) => {
+  const updateDraft = useCallback((path: string, content: string, fileContent: string) => {
     setDrafts((prev) => updateWorkspaceFileDraft({ content, drafts: prev, fileContent, path }));
-  };
+  }, []);
 
-  const saveDraft = (path: string, content: string) => {
+  const saveDraft = useCallback((path: string, content: string) => {
     setDrafts((prev) => saveWorkspaceFileDraft({ content, drafts: prev, path }));
-  };
+  }, []);
 
-  const discardDraft = (path: string, fileContent: string) => {
+  const discardDraft = useCallback((path: string, fileContent: string) => {
     setDrafts((prev) => discardWorkspaceDraft({ drafts: prev, fileContent, path }));
-  };
-
-  const getDraft = (path: string, fileContent: string): string => {
-    const draft = drafts[path];
-    return resolveWorkspaceFileDraft({ draft, file: { path, content: fileContent } }).content;
-  };
-
-  const isDirty = (path: string, fileContent: string): boolean => {
-    const draft = drafts[path];
-    return (
-      resolveWorkspaceFileDraft({ draft, file: { path, content: fileContent } }).content !==
-      fileContent
-    );
-  };
-
-  return (
-    <WorkspaceDraftsContext.Provider
-      value={{
-        drafts,
-        getDraft,
-        isDirty,
-        updateDraft,
-        saveDraft,
-        discardDraft,
-      }}
-    >
-      {children}
-    </WorkspaceDraftsContext.Provider>
+  }, []);
+
+  const resetDrafts = useCallback((nextDrafts: WorkspaceFileDraftMap = {}) => {
+    setDrafts(nextDrafts);
+  }, []);
+
+  const getDraft = useCallback(
+    (path: string, fileContent: string): string => {
+      const draft = getWorkspaceFileDraft({ drafts, path });
+      return resolveWorkspaceFileDraft({ draft, file: { path, content: fileContent } }).content;
+    },
+    [drafts],
   );
-}
-
-export function useWorkspaceDrafts(): WorkspaceDraftsContextValue {
-  const context = useContext(WorkspaceDraftsContext);
-  if (context) return context;
 
-  // Context fallback
-  const [localDrafts, setLocalDrafts] = useState<WorkspaceFileDraftMap>({});
-
-  const updateDraft = (path: string, content: string, fileContent: string) => {
-    setLocalDrafts((prev) =>
-      updateWorkspaceFileDraft({ content, drafts: prev, fileContent, path }),
-    );
-  };
-
-  const saveDraft = (path: string, content: string) => {
-    setLocalDrafts((prev) => saveWorkspaceFileDraft({ content, drafts: prev, path }));
-  };
-
-  const discardDraft = (path: string, fileContent: string) => {
-    setLocalDrafts((prev) => discardWorkspaceDraft({ drafts: prev, fileContent, path }));
-  };
-
-  const getDraft = (path: string, fileContent: string): string => {
-    const draft = localDrafts[path];
-    return resolveWorkspaceFileDraft({ draft, file: { path, content: fileContent } }).content;
-  };
-
-  const isDirty = (path: string, fileContent: string): boolean => {
-    const draft = localDrafts[path];
-    return (
-      resolveWorkspaceFileDraft({ draft, file: { path, content: fileContent } }).content !==
-      fileContent
-    );
-  };
+  const isDirty = useCallback(
+    (path: string, fileContent: string): boolean => {
+      const draft = getWorkspaceFileDraft({ drafts, path });
+      return (
+        resolveWorkspaceFileDraft({ draft, file: { path, content: fileContent } }).content !==
+        fileContent
+      );
+    },
+    [drafts],
+  );
 
   return {
-    drafts: localDrafts,
+    dirtyCount: dirtyPaths.length,
+    dirtyPaths,
+    drafts,
     getDraft,
+    hasDirtyDrafts: dirtyPaths.length > 0,
     isDirty,
     updateDraft,
     saveDraft,
     discardDraft,
+    resetDrafts,
   };
 }
+
+export function WorkspaceDraftsProvider({ children, initialDrafts }: WorkspaceDraftsProviderProps) {
+  const controller = useWorkspaceDraftController(initialDrafts);
+
+  return (
+    <WorkspaceDraftsContext.Provider value={controller}>{children}</WorkspaceDraftsContext.Provider>
+  );
+}
+
+export function useWorkspaceDrafts(): WorkspaceDraftsContextValue {
+  const context = useContext(WorkspaceDraftsContext);
+  const localController = useWorkspaceDraftController();
+  return context ?? localController;
+}

package/src/workbench/workspace/WorkspaceEditor.tsx

@@ -1,106 +1,31 @@
-import Editor, { loader, type OnMount } from '@monaco-editor/react';
-import * as monaco from 'monaco-editor';
-import { Panel, PanelBody, PanelHeader } from '../../layout/Panel';
-import { Badge } from '../../primitives/Badge';
-import { IconButton } from '../../primitives/IconButton';
-import { Toolbar } from '../../primitives/Toolbar';
+import {
+  useMonacoWorkbenchThemeSync,
+  WorkbenchMonacoEditor,
+  type OnMount,
+} from '@workbench-kit/monaco';
+import { Panel, PanelBody, PanelHeader } from '../../layout/panel';
+import { Badge } from '../../primitives/badge';
+import { IconButton } from '../../primitives/icon-button';
+import { Toolbar } from '../../primitives/toolbar';
 import { extensionOfPath } from './path';
+import { WorkspacePathLabel } from './WorkspacePathLabel';
 import { WorkspaceFileIcon } from './WorkspaceFileIcon';
 import type { WorkspaceFile } from './types';
-import { JDW_DOCUMENT_MIME } from '../../jdw/document';
+import { JDW_WIDGET_DOCUMENT_MIME } from '../../jdw/document';
 import {
   configureWorkspaceEditorJsonDiagnostics,
   monacoModelPathForWorkspaceFile,
 } from './workspaceJsonDiagnostics';
 
-loader.config({ monaco });
-
 export type WorkspaceEditorTheme = 'dark' | 'light';
 
-export const MONACO_DARK_THEME_ID = 'newchobo-workbench-dark';
-export const MONACO_LIGHT_THEME_ID = 'newchobo-workbench-light';
-let monacoThemeDefined = false;
-
-export function defineMonacoWorkbenchTheme(monacoInstance: typeof monaco) {
-  if (monacoThemeDefined) return;
-
-  monacoInstance.editor.defineTheme(MONACO_DARK_THEME_ID, {
-    base: 'vs-dark',
-    inherit: true,
-    rules: [],
-    colors: {
-      'editor.background': '#0d1117',
-      'editor.foreground': '#e6edf3',
-      'editorGutter.background': '#0d1117',
-      'editorLineNumber.foreground': '#484f58',
-      'editorLineNumber.activeForeground': '#7d8590',
-      'editorCursor.foreground': '#e6edf3',
-      'editor.lineHighlightBackground': '#161b22',
-      'editor.selectionBackground': '#264f78',
-      'editor.inactiveSelectionBackground': '#1f3a53',
-      'editorWidget.background': '#161b22',
-      'editorWidget.border': '#30363d',
-      'editorHoverWidget.background': '#161b22',
-      'editorHoverWidget.border': '#30363d',
-      'editorSuggestWidget.background': '#161b22',
-      'editorSuggestWidget.border': '#30363d',
-      focusBorder: '#2f81f7',
-      'input.background': '#0d1117',
-      'input.border': '#30363d',
-      'minimap.background': '#0d1117',
-      'scrollbarSlider.background': '#30363d66',
-      'scrollbarSlider.hoverBackground': '#484f5888',
-      'scrollbarSlider.activeBackground': '#7d8590aa',
-      'editorIndentGuide.background1': '#30363d',
-      'editorIndentGuide.activeBackground1': '#7d8590',
-      'editorWhitespace.foreground': '#30363d',
-      'editorBracketMatch.background': '#21262d',
-      'editorBracketMatch.border': '#7d8590',
-      'editorOverviewRuler.border': '#0d1117',
-    },
-  });
-
-  monacoInstance.editor.defineTheme(MONACO_LIGHT_THEME_ID, {
-    base: 'vs',
-    inherit: true,
-    rules: [],
-    colors: {
-      'editor.background': '#ffffff',
-      'editor.foreground': '#1f2328',
-      'editorGutter.background': '#ffffff',
-      'editorLineNumber.foreground': '#9198a1',
-      'editorLineNumber.activeForeground': '#656d76',
-      'editorCursor.foreground': '#1f2328',
-      'editor.lineHighlightBackground': '#f6f8fa',
-      'editor.selectionBackground': '#bfdbfe',
-      'editor.inactiveSelectionBackground': '#dbeafe',
-      'editorWidget.background': '#f6f8fa',
-      'editorWidget.border': '#d0d7de',
-      'editorHoverWidget.background': '#f6f8fa',
-      'editorHoverWidget.border': '#d0d7de',
-      'editorSuggestWidget.background': '#f6f8fa',
-      'editorSuggestWidget.border': '#d0d7de',
-      focusBorder: '#0969da',
-      'input.background': '#ffffff',
-      'input.border': '#d0d7de',
-      'minimap.background': '#ffffff',
-      'scrollbarSlider.background': '#d0d7de66',
-      'scrollbarSlider.hoverBackground': '#9198a188',
-      'scrollbarSlider.activeBackground': '#656d76aa',
-      'editorIndentGuide.background1': '#d0d7de',
-      'editorIndentGuide.activeBackground1': '#656d76',
-      'editorWhitespace.foreground': '#d0d7de',
-      'editorBracketMatch.background': '#eaeef2',
-      'editorBracketMatch.border': '#656d76',
-      'editorOverviewRuler.border': '#ffffff',
-    },
-  });
-  monacoThemeDefined = true;
-}
-
-export function monacoThemeForWorkspaceTheme(theme: WorkspaceEditorTheme) {
-  return theme === 'light' ? MONACO_LIGHT_THEME_ID : MONACO_DARK_THEME_ID;
-}
+export {
+  MONACO_DARK_THEME_ID,
+  MONACO_LIGHT_THEME_ID,
+  defineMonacoWorkbenchTheme,
+  monacoThemeForWorkspaceTheme,
+  prepareMonacoWorkbenchEditor,
+} from '@workbench-kit/monaco';
 
 export function languageForFile(path: string, mimeType?: string) {
   switch (mimeType) {
@@ -108,8 +33,7 @@ export function languageForFile(path: string, mimeType?: string) {
     case 'text/javascript':
       return 'javascript';
     case 'application/json':
-    case JDW_DOCUMENT_MIME:
-    case 'application/vnd.workbench-kit.widget+json':
+    case JDW_WIDGET_DOCUMENT_MIME:
       return 'json';
     case 'application/typescript':
     case 'text/typescript':
@@ -186,6 +110,7 @@ export function WorkspaceEditor({
   value = file.content,
 }: WorkspaceEditorProps) {
   const language = languageForFile(file.path, file.mimeType);
+  useMonacoWorkbenchThemeSync(theme);
   const handleMount: OnMount = (editor, monacoInstance) => {
     configureWorkspaceEditorJsonDiagnostics(monacoInstance, file);
     onEditorMount?.(editor, monacoInstance);
@@ -211,47 +136,26 @@ export function WorkspaceEditor({
         >
           <span className="workbench-editor-title">
             <WorkspaceFileIcon mimeType={file.mimeType} path={file.path} />
-            {file.path}
+            <WorkspacePathLabel path={file.path} />
           </span>
         </PanelHeader>
       ) : showFileBar ? (
         <div className="workspace-editor__file-bar" title={file.path}>
           <WorkspaceFileIcon mimeType={file.mimeType} path={file.path} />
-          <span className="workspace-editor__file-path">{file.path}</span>
+          <WorkspacePathLabel className="workspace-editor__file-path" path={file.path} />
           <span className="workspace-editor__file-meta">{file.mimeType ?? language}</span>
         </div>
       ) : null}
       <PanelBody className="workbench-monaco-panel__body">
         <div className="workspace-editor__monaco">
-          <Editor
-            beforeMount={defineMonacoWorkbenchTheme}
-            height="100%"
+          <WorkbenchMonacoEditor
+            className="workspace-editor__monaco-surface"
             language={language}
-            loading={<div className="workspace-editor__loading">Loading editor...</div>}
-            options={{
-              automaticLayout: true,
-              contextmenu: true,
-              fontFamily: 'ui-monospace, SFMono-Regular, Consolas, monospace',
-              fontSize: 13,
-              lineHeight: 20,
-              minimap: { enabled: false },
-              overviewRulerBorder: false,
-              padding: { bottom: 12, top: 12 },
-              readOnly,
-              renderLineHighlight: 'line',
-              scrollBeyondLastLine: false,
-              scrollbar: {
-                alwaysConsumeMouseWheel: false,
-                horizontalScrollbarSize: 10,
-                verticalScrollbarSize: 10,
-              },
-              tabSize: 2,
-              wordWrap: 'on',
-            }}
             path={monacoModelPathForWorkspaceFile(file.path)}
-            theme={monacoThemeForWorkspaceTheme(theme)}
+            readOnly={readOnly}
+            theme={theme}
             value={value}
-            onChange={(nextValue) => onChange?.(nextValue ?? '')}
+            onChange={onChange}
             onMount={handleMount}
           />
         </div>