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

package/src/shell/view-host.tsx

@@ -0,0 +1,212 @@
+import { isValidElement, useEffect, useMemo, useRef, type FocusEvent, type ReactNode } from 'react';
+import type {
+  ExtensionCatalogTrustPolicy,
+  ExtensionRegistry,
+  ViewHost,
+  ViewHostFactoryRegistry,
+  ViewProvider,
+} from '@workbench-kit/workbench-core';
+
+import { BuiltinChatView } from '../chat/view.js';
+import { isBuiltinChatViewRenderData } from '../chat/view-data.js';
+import { BuiltinCommandsView } from '../commands/view.js';
+import { isBuiltinCommandsViewRenderData } from '../commands/view-data.js';
+import { BuiltinExplorerView } from '../explorer/view.js';
+import { isBuiltinExplorerViewRenderData } from '../explorer/view-data.js';
+import { BuiltinExtensionsView } from '../extensions/view.js';
+import { isBuiltinExtensionsViewRenderData } from '../extensions/view-data.js';
+import { SampleJdwLabView } from '../jdw/lab-view.js';
+import { isSampleJdwLabViewRenderData } from '../jdw/lab-view-data.js';
+import { SampleFieldRemapView } from '../field-remap/view.js';
+import { isSampleFieldRemapViewRenderData } from '../field-remap/view-data.js';
+import { BuiltinSearchView } from '../explorer/search-view.js';
+import { isBuiltinSearchViewRenderData } from '../explorer/search-view-data.js';
+
+export function renderDefaultPrimarySidebar(
+  extensionRegistry: Pick<ExtensionRegistry, 'viewHostFactories' | 'views'>,
+  activeViewContainerId: string | undefined,
+  catalogUrl?: string | undefined,
+  catalogTrustPolicy?: ExtensionCatalogTrustPolicy | undefined,
+) {
+  const views = activeViewContainerId
+    ? extensionRegistry.views.getViews(activeViewContainerId)
+    : extensionRegistry.views.getViews();
+  if (views.length === 0) {
+    return <aside aria-label="Primary sidebar" />;
+  }
+
+  return (
+    <aside
+      aria-label="Primary sidebar"
+      className="workbench-primary-side-bar shell-react-primary-sidebar"
+    >
+      {views.map((view) => (
+        <section key={view.id} data-view-id={view.id}>
+          <WorkbenchViewHost
+            catalogTrustPolicy={catalogTrustPolicy}
+            catalogUrl={catalogUrl}
+            fallback={view.name}
+            provider={extensionRegistry.views.getViewProvider(view.id)}
+            viewHostFactories={extensionRegistry.viewHostFactories}
+            viewId={view.id}
+          />
+        </section>
+      ))}
+    </aside>
+  );
+}
+
+export function WorkbenchViewHost({
+  catalogTrustPolicy,
+  catalogUrl,
+  fallback,
+  provider,
+  viewHostFactories,
+  viewId,
+}: {
+  catalogTrustPolicy?: ExtensionCatalogTrustPolicy | undefined;
+  catalogUrl?: string | undefined;
+  fallback: ReactNode;
+  provider: ViewProvider | undefined;
+  viewHostFactories: ViewHostFactoryRegistry;
+  viewId: string;
+}) {
+  const hostFrameRef = useRef<HTMLDivElement>(null);
+  const host = useMemo(() => {
+    if (!provider) {
+      return undefined;
+    }
+
+    return viewHostFactories.createViewHost({ viewId, provider });
+  }, [provider, viewHostFactories, viewId]);
+
+  useEffect(() => {
+    if (!host) {
+      return undefined;
+    }
+
+    host.onDidShow?.();
+
+    const resizeObserver =
+      typeof ResizeObserver !== 'undefined' && host.onDidResize
+        ? new ResizeObserver((entries) => {
+            const entry = entries[0];
+            if (!entry) return;
+
+            host.onDidResize?.({
+              height: entry.contentRect.height,
+              width: entry.contentRect.width,
+            });
+          })
+        : undefined;
+
+    if (resizeObserver && hostFrameRef.current) {
+      resizeObserver.observe(hostFrameRef.current);
+    }
+
+    return () => {
+      resizeObserver?.disconnect();
+      host.onDidHide?.();
+      host.dispose();
+    };
+  }, [host]);
+
+  if (!host) {
+    return <>{fallback}</>;
+  }
+
+  return (
+    <div
+      ref={hostFrameRef}
+      aria-label={host.title}
+      data-view-host-id={host.id ?? provider?.viewId}
+      onBlur={(event) => notifyViewHostBlur(host, event)}
+      onFocus={(event) => notifyViewHostFocus(host, event)}
+    >
+      {toWorkbenchViewHostReactNode(host.render(), fallback, { catalogTrustPolicy, catalogUrl })}
+    </div>
+  );
+}
+
+export function notifyViewHostFocus(host: ViewHost, event: FocusEvent<HTMLDivElement>): void {
+  if (!event.currentTarget.contains(event.relatedTarget)) {
+    host.onDidFocus?.();
+  }
+}
+
+export function notifyViewHostBlur(host: ViewHost, event: FocusEvent<HTMLDivElement>): void {
+  if (!event.currentTarget.contains(event.relatedTarget)) {
+    host.onDidBlur?.();
+  }
+}
+
+export function toReactNode(value: unknown, fallback: ReactNode): ReactNode {
+  if (
+    value === undefined ||
+    value === null ||
+    typeof value === 'boolean' ||
+    typeof value === 'symbol' ||
+    typeof value === 'function'
+  ) {
+    return fallback;
+  }
+
+  if (typeof value === 'string' || typeof value === 'number' || isValidElement(value)) {
+    return value;
+  }
+
+  if (Array.isArray(value)) {
+    return value as ReactNode;
+  }
+
+  return fallback;
+}
+
+export function toWorkbenchViewHostReactNode(
+  value: unknown,
+  fallback: ReactNode,
+  options: {
+    catalogTrustPolicy?: ExtensionCatalogTrustPolicy | undefined;
+    catalogUrl?: string | undefined;
+  } = {},
+): ReactNode {
+  if (isBuiltinExplorerViewRenderData(value)) {
+    return <BuiltinExplorerView />;
+  }
+
+  if (isBuiltinChatViewRenderData(value)) {
+    return <BuiltinChatView mode={value.mode} />;
+  }
+
+  if (isBuiltinSearchViewRenderData(value)) {
+    return <BuiltinSearchView />;
+  }
+
+  if (isBuiltinCommandsViewRenderData(value)) {
+    return <BuiltinCommandsView />;
+  }
+
+  if (isBuiltinExtensionsViewRenderData(value)) {
+    return (
+      <BuiltinExtensionsView
+        catalogTrustPolicy={options.catalogTrustPolicy}
+        catalogUrl={options.catalogUrl}
+      />
+    );
+  }
+
+  if (isSampleJdwLabViewRenderData(value)) {
+    return (
+      <SampleJdwLabView
+        templateJdwPath={value.templateJdwPath}
+        widgetTreePath={value.widgetTreePath}
+      />
+    );
+  }
+
+  if (isSampleFieldRemapViewRenderData(value)) {
+    return <SampleFieldRemapView />;
+  }
+
+  return toReactNode(value, fallback);
+}

package/src/workbench/appearance-storage.ts

@@ -0,0 +1,107 @@
+import {
+  DEFAULT_DARK_THEME_PRESET,
+  DEFAULT_LIGHT_THEME_PRESET,
+  DEFAULT_SHELL_PRESET,
+  isShellPresetId,
+  type WorkbenchAppearanceSettings,
+  type WorkbenchColorSchemePreference,
+} from '@workbench-kit/react/workbench';
+import {
+  createBrowserWorkbenchStorage,
+  type WorkbenchStorageReader,
+  type WorkbenchStorageWriter,
+} from '@workbench-kit/workbench-core';
+
+export type { WorkbenchAppearanceSettings } from '@workbench-kit/react/workbench/themePresets';
+
+export const DEFAULT_WORKBENCH_APPEARANCE_STORAGE_KEY = 'workbench-kit/.workbench/appearance';
+
+export const DEFAULT_WORKBENCH_APPEARANCE: WorkbenchAppearanceSettings = {
+  darkPreset: DEFAULT_DARK_THEME_PRESET,
+  lightPreset: DEFAULT_LIGHT_THEME_PRESET,
+  shellPreset: DEFAULT_SHELL_PRESET,
+  themePreference: 'system',
+};
+
+export function isWorkbenchAppearancePersistenceAvailable(): boolean {
+  return createBrowserWorkbenchStorage({ kind: 'local' }) !== undefined;
+}
+
+export function readPersistedWorkbenchAppearance(
+  storageKey = DEFAULT_WORKBENCH_APPEARANCE_STORAGE_KEY,
+  storage?: WorkbenchStorageReader,
+): WorkbenchAppearanceSettings {
+  const resolvedStorage = storage ?? createBrowserWorkbenchStorage({ kind: 'local' });
+  if (!resolvedStorage) {
+    return DEFAULT_WORKBENCH_APPEARANCE;
+  }
+
+  try {
+    const raw = resolvedStorage.getItem(storageKey);
+    if (!raw) {
+      return DEFAULT_WORKBENCH_APPEARANCE;
+    }
+
+    return normalizeWorkbenchAppearance(JSON.parse(raw) as unknown);
+  } catch {
+    return DEFAULT_WORKBENCH_APPEARANCE;
+  }
+}
+
+export function writePersistedWorkbenchAppearance(
+  settings: WorkbenchAppearanceSettings,
+  storageKey = DEFAULT_WORKBENCH_APPEARANCE_STORAGE_KEY,
+  storage?: WorkbenchStorageWriter,
+): void {
+  const resolvedStorage = storage ?? createBrowserWorkbenchStorage({ kind: 'local' });
+  if (!resolvedStorage) {
+    return;
+  }
+
+  try {
+    resolvedStorage.setItem(storageKey, JSON.stringify(settings, null, 2));
+  } catch {
+    // Ignore quota and security errors so the shell keeps working offline.
+  }
+}
+
+function normalizeWorkbenchAppearance(value: unknown): WorkbenchAppearanceSettings {
+  if (typeof value !== 'object' || value === null) {
+    return DEFAULT_WORKBENCH_APPEARANCE;
+  }
+
+  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.
+  const lightPreset = normalizePresetId(
+    record.lightPreset,
+    DEFAULT_WORKBENCH_APPEARANCE.lightPreset,
+  );
+  const darkPreset = normalizePresetId(record.darkPreset, DEFAULT_WORKBENCH_APPEARANCE.darkPreset);
+  const shellPreset = normalizeShellPresetId(record.shellPreset);
+
+  return {
+    darkPreset,
+    lightPreset,
+    shellPreset,
+    themePreference,
+  };
+}
+
+function normalizeShellPresetId(value: unknown): string {
+  return typeof value === 'string' && isShellPresetId(value) ? value : DEFAULT_SHELL_PRESET;
+}
+
+function normalizePresetId(value: unknown, fallback: string): string {
+  return typeof value === 'string' && value.length > 0 ? value : fallback;
+}
+
+function normalizeThemePreference(value: unknown): WorkbenchColorSchemePreference {
+  if (value === 'system' || value === 'light' || value === 'dark') {
+    return value;
+  }
+
+  return DEFAULT_WORKBENCH_APPEARANCE.themePreference;
+}

package/src/workbench/command-host.tsx

@@ -0,0 +1,243 @@
+import {
+  createCommandRegistryFromContributions,
+  type CommandRegistry,
+} from '@workbench-kit/platform';
+import {
+  WorkbenchCommandPalette,
+  WorkbenchShortcutCommandBridge,
+  createWorkbenchShellCommands,
+  type WorkbenchCommandDescriptor,
+  type WorkbenchCommandRunContext,
+  type WorkbenchShellCommandContext,
+} from '@workbench-kit/react/workbench';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { useWorkbench } from '../shell/provider.js';
+import { registerWorkbenchShellCommandHandlers } from './shell-command-registration.js';
+import {
+  buildWorkbenchPaletteCommands,
+  collectExtensionCommandFeaturesById,
+  matchesWorkbenchCommandPaletteShortcut,
+  matchesWorkbenchQuickAccessShortcut,
+  resolveShellCommandActivities,
+} from './command-palette.js';
+import { resolveExtensionKeybindingCommand } from './keybinding-bridge.js';
+
+export interface WorkbenchCommandHostProps {
+  additionalCommands?: readonly WorkbenchCommandDescriptor[];
+  enableCommandPalette?: boolean;
+  enableExtensionKeybindings?: boolean;
+  enableShortcutBridge?: boolean;
+  onOpenSettings: () => void;
+  onRunCommand?: (
+    command: WorkbenchCommandDescriptor,
+    context: WorkbenchCommandRunContext,
+  ) => boolean | void;
+}
+
+export function WorkbenchCommandHost({
+  additionalCommands = [],
+  enableCommandPalette = true,
+  enableExtensionKeybindings = true,
+  enableShortcutBridge = true,
+  onOpenSettings,
+  onRunCommand,
+}: WorkbenchCommandHostProps) {
+  const { executeCommand, extensionRegistry, keybindingOverrides, layoutService } = useWorkbench();
+  const [paletteOpen, setPaletteOpen] = useState(false);
+  const [paletteQuery, setPaletteQuery] = useState('');
+  const [layout, setLayout] = useState(() => layoutService.getState());
+  const shellContextRef = useRef<WorkbenchShellCommandContext | undefined>(undefined);
+
+  useEffect(() => {
+    const disposable = layoutService.onDidChangeLayout(({ state }) => {
+      setLayout(state);
+    });
+
+    return () => {
+      disposable.dispose();
+    };
+  }, [layoutService]);
+
+  const shellActivities = useMemo(
+    () => resolveShellCommandActivities(extensionRegistry),
+    [extensionRegistry],
+  );
+
+  const shellCommandDefinitions = useMemo(
+    () =>
+      createWorkbenchShellCommands({
+        activities: shellActivities,
+        includeSettings: true,
+        includeSidebarToggle: true,
+      }),
+    [shellActivities],
+  );
+
+  const shellCommandRegistry = useMemo(
+    () =>
+      createCommandRegistryFromContributions<WorkbenchShellCommandContext>([
+        { commands: shellCommandDefinitions },
+      ]),
+    [shellCommandDefinitions],
+  );
+
+  const shellContext = useMemo<WorkbenchShellCommandContext>(
+    () => ({
+      isPrimarySidebarVisible: layout.sideBar.visible,
+      openSettings: onOpenSettings,
+      showActivity: (activityId) => {
+        layoutService.setActiveViewContainer(activityId);
+        layoutService.setSideBarVisible(true);
+      },
+      togglePrimarySidebar: () => {
+        layoutService.setSideBarVisible(!layout.sideBar.visible);
+      },
+    }),
+    [layout.sideBar.visible, layoutService, onOpenSettings],
+  );
+
+  shellContextRef.current = shellContext;
+
+  useEffect(() => {
+    const registration = registerWorkbenchShellCommandHandlers(
+      extensionRegistry.commands,
+      shellCommandDefinitions,
+      () => {
+        const context = shellContextRef.current;
+        if (!context) {
+          throw new Error('Workbench shell command context is not available.');
+        }
+
+        return context;
+      },
+    );
+
+    return () => {
+      registration.dispose();
+    };
+  }, [extensionRegistry.commands, shellCommandDefinitions]);
+
+  const paletteCommands = useMemo(
+    () =>
+      buildWorkbenchPaletteCommands({
+        additionalCommands,
+        extensionCommandFeaturesById: collectExtensionCommandFeaturesById(extensionRegistry),
+        extensionCommands: extensionRegistry.commands.getCommands(),
+        shellCommands: shellCommandDefinitions,
+        shellContext,
+      }),
+    [additionalCommands, extensionRegistry, shellContext],
+  );
+
+  const closePalette = useCallback(() => {
+    setPaletteOpen(false);
+  }, []);
+
+  const openPalette = useCallback((query = '') => {
+    setPaletteQuery(query);
+    setPaletteOpen(true);
+  }, []);
+
+  const runPaletteCommand = useCallback(
+    (command: WorkbenchCommandDescriptor, context: WorkbenchCommandRunContext) => {
+      const finish = () => {
+        closePalette();
+      };
+
+      if (onRunCommand?.(command, context)) {
+        finish();
+        return;
+      }
+
+      void executeCommand(command.id).finally(finish);
+    },
+    [closePalette, executeCommand, onRunCommand],
+  );
+
+  useEffect(() => {
+    if (!enableCommandPalette) {
+      return undefined;
+    }
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (matchesWorkbenchCommandPaletteShortcut(event)) {
+        event.preventDefault();
+        openPalette('>');
+        return;
+      }
+
+      if (matchesWorkbenchQuickAccessShortcut(event)) {
+        event.preventDefault();
+        openPalette();
+      }
+    };
+
+    window.addEventListener('keydown', onKeyDown);
+    return () => {
+      window.removeEventListener('keydown', onKeyDown);
+    };
+  }, [enableCommandPalette, openPalette]);
+
+  useEffect(() => {
+    if (!enableExtensionKeybindings) {
+      return undefined;
+    }
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (
+        matchesWorkbenchCommandPaletteShortcut(event) ||
+        matchesWorkbenchQuickAccessShortcut(event)
+      ) {
+        return;
+      }
+
+      const match = resolveExtensionKeybindingCommand(
+        extensionRegistry.keybindings,
+        event,
+        {},
+        keybindingOverrides,
+      );
+      if (!match) {
+        return;
+      }
+
+      event.preventDefault();
+      void executeCommand(match.command, ...(match.args ?? []));
+    };
+
+    window.addEventListener('keydown', onKeyDown);
+    return () => {
+      window.removeEventListener('keydown', onKeyDown);
+    };
+  }, [
+    enableExtensionKeybindings,
+    executeCommand,
+    extensionRegistry.keybindings,
+    keybindingOverrides,
+  ]);
+
+  return (
+    <>
+      {enableShortcutBridge ? (
+        <WorkbenchShortcutCommandBridge
+          context={shellContext}
+          preventDefault
+          registry={shellCommandRegistry as CommandRegistry<WorkbenchShellCommandContext>}
+        />
+      ) : null}
+      {enableCommandPalette ? (
+        <WorkbenchCommandPalette
+          commands={paletteCommands}
+          open={paletteOpen}
+          placeholder="Search commands"
+          query={paletteQuery}
+          title="Command Palette"
+          onClose={closePalette}
+          onQueryChange={setPaletteQuery}
+          onRunCommand={runPaletteCommand}
+        />
+      ) : null}
+    </>
+  );
+}