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

package/src/{shell-titlebar-layout-controls.tsx → shell/titlebar-layout-controls.tsx}

@@ -1,4 +1,4 @@
-export {
-  WorkbenchShellTitleBarLayoutControls,
-  type WorkbenchShellTitleBarLayoutControlsProps,
-} from '@workbench-kit/react/workbench/shell';
+export {
+  WorkbenchShellTitleBarLayoutControls,
+  type WorkbenchShellTitleBarLayoutControlsProps,
+} from '@workbench-kit/react/workbench/shell';

package/src/{shell-view-host.tsx → shell/view-host.tsx}

@@ -1,199 +1,212 @@
-import { isValidElement, useEffect, useMemo, useRef, type FocusEvent, type ReactNode } from 'react';
-import type {
-  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 './search-view.js';
-import { isBuiltinSearchViewRenderData } from './search-view-data.js';
-
-export function renderDefaultPrimarySidebar(
-  extensionRegistry: Pick<ExtensionRegistry, 'viewHostFactories' | 'views'>,
-  activeViewContainerId: string | undefined,
-  catalogUrl?: string | 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
-            catalogUrl={catalogUrl}
-            fallback={view.name}
-            provider={extensionRegistry.views.getViewProvider(view.id)}
-            viewHostFactories={extensionRegistry.viewHostFactories}
-            viewId={view.id}
-          />
-        </section>
-      ))}
-    </aside>
-  );
-}
-
-export function WorkbenchViewHost({
-  catalogUrl,
-  fallback,
-  provider,
-  viewHostFactories,
-  viewId,
-}: {
-  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, { 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: { 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 catalogUrl={options.catalogUrl} />;
-  }
-
-  if (isSampleJdwLabViewRenderData(value)) {
-    return (
-      <SampleJdwLabView
-        templateJdwPath={value.templateJdwPath}
-        widgetTreePath={value.widgetTreePath}
-      />
-    );
-  }
-
-  if (isSampleFieldRemapViewRenderData(value)) {
-    return <SampleFieldRemapView />;
-  }
-
-  return toReactNode(value, fallback);
-}
+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 → workbench/appearance-storage.ts}

@@ -1,115 +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 type { WorkbenchStorageReader, 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 {
-  try {
-    return typeof globalThis.localStorage !== 'undefined';
-  } catch {
-    return false;
-  }
-}
-
-export function readPersistedWorkbenchAppearance(
-  storageKey = DEFAULT_WORKBENCH_APPEARANCE_STORAGE_KEY,
-  storage?: WorkbenchStorageReader,
-): WorkbenchAppearanceSettings {
-  const resolvedStorage = storage ?? getBrowserLocalStorage();
-  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 ?? getBrowserLocalStorage();
-  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;
-}
-
-function getBrowserLocalStorage(): (WorkbenchStorageReader & WorkbenchStorageWriter) | undefined {
-  if (!isWorkbenchAppearancePersistenceAvailable()) {
-    return undefined;
-  }
-
-  return globalThis.localStorage;
-}
+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;
+}