@workbench-kit/shell-react 0.0.2-prototype.0.2.41 → 0.0.2-prototype.0.2.44

package/src/shell/shell.tsx

@@ -1,4 +1,13 @@
-import { useCallback, useEffect, useMemo, useReducer, useState, type ReactNode } from 'react';
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+  type CSSProperties,
+  type ReactNode,
+} from 'react';
 import { Modal } from '@workbench-kit/react/modal';
 import { Badge, Button, IconButton } from '@workbench-kit/react/primitives';
 import {
@@ -18,7 +27,6 @@ import type {
 import { WORKBENCH_PERMISSION_CONTEXT_KEY_CAN_OPEN_SETTINGS } from '@workbench-kit/platform';
 import { isPreferenceScope, type PreferenceScope } from '@workbench-kit/workbench-config';
 import {
-  resolveActiveThemePreset,
   DEFAULT_SHELL_PRESET,
   useResolvedWorkbenchTheme,
   type WorkbenchCommandDescriptor,
@@ -62,7 +70,17 @@ import {
   getWorkbenchSecondaryActivityRoute,
 } from './secondary-actions.js';
 import { SETTINGS_EXTENSION_ID, WORKBENCH_PREFERENCE_SCOPES } from './settings-constants.js';
-import { createSettingsCategories, type WorkbenchThemeOption } from './settings.js';
+import {
+  createSettingsCategories,
+  createWorkbenchThemeOptionSnapshot,
+  type WorkbenchThemeOption,
+} from './settings.js';
+import { createWorkbenchAppearanceCatalogSnapshot } from './appearance-catalog.js';
+import {
+  createWorkbenchDocumentAppearanceDiagnosticController,
+  createWorkbenchDocumentAppearanceOverrideController,
+} from './appearance-controller.js';
+import { resolveWorkbenchAppearancePresentation } from './appearance-presentation.js';
 import {
   createContributedWorkbenchStatusSections,
   createDefaultWorkbenchStatusSections,
@@ -200,10 +218,6 @@ export function WorkbenchShell({
 }: WorkbenchShellProps) {
   const resolvedEditorArea = editorArea ?? null;
   const resolvedWorkbenchTheme = useResolvedWorkbenchTheme(theme ?? 'system');
-  const activeThemePreset =
-    lightPreset !== undefined && darkPreset !== undefined
-      ? resolveActiveThemePreset(resolvedWorkbenchTheme, { darkPreset, lightPreset })
-      : undefined;
   const {
     activities,
     commands,
@@ -222,6 +236,26 @@ export function WorkbenchShell({
     viewHostFactories,
     views,
   } = useWorkbench();
+  const appearanceThemeOptions = createWorkbenchThemeOptionSnapshot(themeOptions);
+  const appearanceCatalog = createWorkbenchAppearanceCatalogSnapshot({
+    hostOptions: appearanceThemeOptions,
+    themes,
+  });
+  const appearancePresentation = resolveWorkbenchAppearancePresentation({
+    catalog: appearanceCatalog,
+    darkPreset,
+    lightPreset,
+    resolvedSystemTheme: resolvedWorkbenchTheme,
+    theme,
+  });
+  const rootAppearanceStyle = appearancePresentation.legacyTokenOverrides as
+    CSSProperties | undefined;
+  const documentAppearanceControllerRef = useRef<
+    ReturnType<typeof createWorkbenchDocumentAppearanceOverrideController> | undefined
+  >(undefined);
+  const documentAppearanceDiagnosticControllerRef = useRef<
+    ReturnType<typeof createWorkbenchDocumentAppearanceDiagnosticController> | undefined
+  >(undefined);
   const extensionEnablement = useExtensionEnablementController();
   const contextKeyRevision = useContextKeyRevision(contextKeyService);
   const contextKeySnapshot = useMemo(
@@ -233,13 +267,14 @@ export function WorkbenchShell({
   const themeSelectionProtection = useMemo(
     () =>
       createThemeSelectionProtectionSnapshot({
+        catalog: appearanceCatalog,
         darkPreset,
         lightPreset,
         theme,
         themeOptions,
         themes,
       }),
-    [darkPreset, lightPreset, theme, themeOptions, themeRevision, themes],
+    [appearanceCatalog, darkPreset, lightPreset, theme, themeOptions, themeRevision, themes],
   );
   const [preferenceRevision, bumpPreferenceRevision] = useReducer((count: number) => count + 1, 0);
   const [isHelpOpen, setHelpOpen] = useState(false);
@@ -254,6 +289,9 @@ export function WorkbenchShell({
     setSettingsCategoryId(categoryId);
     setSettingsOpen(true);
   }, []);
+  const closeSettingsModal = useCallback(() => {
+    setSettingsOpen(false);
+  }, []);
   const settingsCapability = useMemo<WorkbenchSettingsCapability>(
     () => ({
       openSettings: showSettingsModal,
@@ -313,11 +351,40 @@ export function WorkbenchShell({
   });
 
   useEffect(() => {
-    extensionEnablement.setThemeSelectionProtection(themeSelectionProtection);
+    return extensionEnablement.setThemeSelectionProtection(themeSelectionProtection);
+  }, [extensionEnablement, themeSelectionProtection]);
+
+  useEffect(() => {
+    if (typeof document === 'undefined') {
+      return undefined;
+    }
+    const controller = createWorkbenchDocumentAppearanceOverrideController(
+      document.documentElement,
+    );
+    const diagnosticController = createWorkbenchDocumentAppearanceDiagnosticController(
+      document.documentElement,
+    );
+    documentAppearanceControllerRef.current = controller;
+    documentAppearanceDiagnosticControllerRef.current = diagnosticController;
     return () => {
-      extensionEnablement.setThemeSelectionProtection(undefined);
+      documentAppearanceControllerRef.current = undefined;
+      documentAppearanceDiagnosticControllerRef.current = undefined;
+      diagnosticController.dispose();
+      controller.dispose();
     };
-  }, [extensionEnablement, themeSelectionProtection]);
+  }, []);
+
+  useEffect(() => {
+    documentAppearanceControllerRef.current?.update(appearancePresentation.legacyTokenOverrides);
+    documentAppearanceDiagnosticControllerRef.current?.update({
+      unresolvedTheme: appearancePresentation.unresolvedTheme,
+      unresolvedThemePreset: appearancePresentation.unresolvedThemePreset,
+    });
+  }, [
+    appearancePresentation.legacyTokenOverrides,
+    appearancePresentation.unresolvedTheme,
+    appearancePresentation.unresolvedThemePreset,
+  ]);
 
   useEffect(() => {
     if (visibleActivityItems.length === 0) {
@@ -374,7 +441,7 @@ export function WorkbenchShell({
       ...managementCategories,
       ...(additionalSettingsCategories ?? []),
       ...createSettingsCategories(
-        { configurations, extensionCatalog, localizations, themes },
+        { appearanceCatalog, configurations, extensionCatalog, localizations },
         {
           activeScope: settingsScopeId,
           darkPreset,
@@ -388,13 +455,14 @@ export function WorkbenchShell({
           preferenceService,
           shellPreset,
           theme,
-          themeOptions,
+          themeOptions: appearanceThemeOptions,
         },
       ),
     ];
   }, [
     accountManagement,
     additionalSettingsCategories,
+    appearanceCatalog,
     commandHost,
     darkPreset,
     configurations,
@@ -414,7 +482,7 @@ export function WorkbenchShell({
     theme,
     themeRevision,
     themes,
-    themeOptions,
+    appearanceThemeOptions,
   ]);
   const defaultSettingsCategoryId =
     settingsCategories.find((category) => category.id === SETTINGS_EXTENSION_ID)?.id ??
@@ -699,11 +767,13 @@ export function WorkbenchShell({
         sizePercent: layout.panel.sizePercent,
       }}
       rootClassName={rootClassName}
+      rootStyle={rootAppearanceStyle}
       secondaryArea={resolvedEditorArea}
       statusSections={resolvedStatusSections}
       titleBar={resolvedTitleBar}
-      theme={resolvedWorkbenchTheme}
-      themePreset={activeThemePreset}
+      theme={appearancePresentation.theme}
+      themePreference={appearancePresentation.themePreference}
+      themePreset={appearancePresentation.themePreset}
       shellPreset={shellPreset}
       overlays={
         <>
@@ -721,7 +791,7 @@ export function WorkbenchShell({
               categories={settingsCategories}
               defaultActiveCategoryId={defaultSettingsCategoryId}
               defaultActiveScopeId="workspace"
-              footer={<Button onClick={() => setSettingsOpen(false)}>Close</Button>}
+              footer={<Button onClick={closeSettingsModal}>Close</Button>}
               scopes={[...WORKBENCH_PREFERENCE_SCOPES]}
               searchValue={settingsSearchValue}
               title={chromeLabels.settingsLabel}
@@ -733,7 +803,7 @@ export function WorkbenchShell({
                 </Badge>
               }
               onActiveCategoryIdChange={setSettingsCategoryId}
-              onClose={() => setSettingsOpen(false)}
+              onClose={closeSettingsModal}
               onScopeChange={(scopeId) => {
                 if (isPreferenceScope(scopeId)) {
                   setSettingsScopeId(scopeId);

package/src/workbench/appearance-storage.ts

@@ -88,8 +88,8 @@ function normalizeWorkbenchAppearance(value: unknown): WorkbenchAppearanceSettin
   const record = value as Record<string, unknown>;
   const themePreference = normalizeThemePreference(record.themePreference);
   // Preset ids may belong to a contributed theme, which isn't known until extensions
-  // register, so we can only validate shape here; the appearance UI falls back to a
-  // default option if the persisted id no longer resolves to anything.
+  // register, so we can only validate shape here. The appearance UI keeps an unresolved
+  // string visible until the user explicitly chooses a current option.
   const lightPreset = normalizePresetId(
     record.lightPreset,
     DEFAULT_WORKBENCH_APPEARANCE.lightPreset,

package/src/workbench/command-host-controller.tsx

@@ -0,0 +1,223 @@
+import {
+  WorkbenchCommandPalette,
+  WorkbenchQuickOpen,
+  WorkbenchShortcutCommandBridge,
+  matchesWorkbenchCommandPaletteShortcut,
+  matchesWorkbenchQuickAccessShortcut,
+  resolveQuickOpenItemPath,
+  type QuickOpenItem,
+  type QuickOpenProvider,
+  type QuickOpenSelectContext,
+  type WorkbenchCommandDescriptor,
+  type WorkbenchCommandRunContext,
+  type WorkbenchShortcutCommandBridgeProps,
+} from '@workbench-kit/react/workbench/command-ui';
+import { useCallback, useEffect, useState, type JSX } from 'react';
+
+const WORKSPACE_OPEN_COMMAND_ID = 'workspace.open' as const;
+const EMPTY_QUICK_OPEN_PROVIDERS: readonly QuickOpenProvider[] = Object.freeze([]);
+
+export type WorkbenchCommandHostExecutor = (
+  commandId: string,
+  ...args: unknown[]
+) => unknown | Promise<unknown>;
+
+export interface WorkbenchCommandHostControllerProps<TContext = unknown> {
+  commands: readonly WorkbenchCommandDescriptor[];
+  executeCommand: WorkbenchCommandHostExecutor;
+
+  commandPaletteCloseLabel?: string;
+  commandPaletteEmptyLabel?: string;
+  commandPalettePlaceholder?: string;
+  commandPaletteTitle?: string;
+  enableCommandPalette?: boolean;
+  enableQuickOpen?: boolean;
+  quickOpenCloseLabel?: string;
+  quickOpenEmptyLabel?: string;
+  quickOpenPlaceholder?: string;
+  quickOpenProviders?: readonly QuickOpenProvider[];
+  quickOpenTitle?: string;
+
+  onOpenQuickOpenItem?: (item: QuickOpenItem, context: QuickOpenSelectContext) => boolean | void;
+  onRunCommand?: (
+    command: WorkbenchCommandDescriptor,
+    context: WorkbenchCommandRunContext,
+  ) => boolean | void;
+
+  shortcutBridge?: false | WorkbenchShortcutCommandBridgeProps<TContext>;
+}
+
+export function WorkbenchCommandHostController<TContext = unknown>({
+  commands,
+  executeCommand,
+  commandPaletteCloseLabel = 'Close command palette',
+  commandPaletteEmptyLabel = 'No commands match your search',
+  commandPalettePlaceholder = 'Search commands',
+  commandPaletteTitle = 'Command Palette',
+  enableCommandPalette = true,
+  enableQuickOpen = true,
+  quickOpenCloseLabel = 'Close Quick Open',
+  quickOpenEmptyLabel = 'No matching files',
+  quickOpenPlaceholder = 'Search files by name',
+  quickOpenProviders = EMPTY_QUICK_OPEN_PROVIDERS,
+  quickOpenTitle = 'Quick Open',
+  onOpenQuickOpenItem,
+  onRunCommand,
+  shortcutBridge,
+}: WorkbenchCommandHostControllerProps<TContext>): JSX.Element {
+  const [paletteOpen, setPaletteOpen] = useState(false);
+  const [paletteQuery, setPaletteQuery] = useState('');
+  const [quickOpenOpen, setQuickOpenOpen] = useState(false);
+  const [quickOpenQuery, setQuickOpenQuery] = useState('');
+
+  const closePalette = useCallback(() => {
+    setPaletteOpen(false);
+  }, []);
+
+  const openPalette = useCallback((query = '') => {
+    setQuickOpenOpen(false);
+    setPaletteQuery(query);
+    setPaletteOpen(true);
+  }, []);
+
+  const closeQuickOpen = useCallback(() => {
+    setQuickOpenOpen(false);
+  }, []);
+
+  const openQuickOpen = useCallback((query = '') => {
+    setPaletteOpen(false);
+    setQuickOpenQuery(query);
+    setQuickOpenOpen(true);
+  }, []);
+
+  const runPaletteCommand = useCallback(
+    (command: WorkbenchCommandDescriptor, context: WorkbenchCommandRunContext) => {
+      if (onRunCommand?.(command, context)) {
+        closePalette();
+        return;
+      }
+
+      runCommandHostExecution(() => executeCommand(command.id), closePalette);
+    },
+    [closePalette, executeCommand, onRunCommand],
+  );
+
+  const runQuickOpenItem = useCallback(
+    (item: QuickOpenItem, context: QuickOpenSelectContext) => {
+      if (onOpenQuickOpenItem?.(item, context)) {
+        closeQuickOpen();
+        return;
+      }
+
+      const path = resolveQuickOpenItemPath(item);
+      if (!path) {
+        closeQuickOpen();
+        return;
+      }
+
+      runCommandHostExecution(
+        () => executeCommand(WORKSPACE_OPEN_COMMAND_ID, { path }),
+        closeQuickOpen,
+      );
+    },
+    [closeQuickOpen, executeCommand, onOpenQuickOpenItem],
+  );
+
+  useEffect(() => {
+    if (!enableCommandPalette && !enableQuickOpen) {
+      return undefined;
+    }
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (enableCommandPalette && matchesWorkbenchCommandPaletteShortcut(event)) {
+        event.preventDefault();
+        openPalette('>');
+        return;
+      }
+
+      if (matchesWorkbenchQuickAccessShortcut(event)) {
+        event.preventDefault();
+        if (enableQuickOpen) {
+          openQuickOpen();
+          return;
+        }
+
+        if (enableCommandPalette) {
+          openPalette();
+        }
+      }
+    };
+
+    window.addEventListener('keydown', onKeyDown);
+    return () => {
+      window.removeEventListener('keydown', onKeyDown);
+    };
+  }, [enableCommandPalette, enableQuickOpen, openPalette, openQuickOpen]);
+
+  return (
+    <>
+      {shortcutBridge ? <WorkbenchShortcutCommandBridge {...shortcutBridge} /> : null}
+      {enableCommandPalette ? (
+        <WorkbenchCommandPalette
+          closeLabel={commandPaletteCloseLabel}
+          commands={commands}
+          emptyLabel={commandPaletteEmptyLabel}
+          open={paletteOpen}
+          placeholder={commandPalettePlaceholder}
+          query={paletteQuery}
+          title={commandPaletteTitle}
+          onClose={closePalette}
+          onQueryChange={setPaletteQuery}
+          onRunCommand={runPaletteCommand}
+        />
+      ) : null}
+      {enableQuickOpen ? (
+        <WorkbenchQuickOpen
+          closeLabel={quickOpenCloseLabel}
+          emptyLabel={quickOpenEmptyLabel}
+          open={quickOpenOpen}
+          placeholder={quickOpenPlaceholder}
+          providers={quickOpenProviders}
+          query={quickOpenQuery}
+          title={quickOpenTitle}
+          onClose={closeQuickOpen}
+          onQueryChange={setQuickOpenQuery}
+          onSelectItem={runQuickOpenItem}
+        />
+      ) : null}
+    </>
+  );
+}
+
+function runCommandHostExecution(execute: () => unknown, close: () => void): void {
+  let result: unknown;
+  try {
+    result = execute();
+  } catch (error) {
+    close();
+    throw error;
+  }
+
+  let pending: boolean;
+  try {
+    pending = isPromiseLike(result);
+  } catch (error) {
+    close();
+    throw error;
+  }
+
+  if (!pending) {
+    close();
+    return;
+  }
+
+  void Promise.resolve(result).finally(close);
+}
+
+function isPromiseLike(value: unknown): value is PromiseLike<unknown> {
+  return (
+    ((typeof value === 'object' && value !== null) || typeof value === 'function') &&
+    'then' in value &&
+    typeof value.then === 'function'
+  );
+}