@workbench-kit/shell-react 0.0.2-prototype.0.2.15 → 0.0.2-prototype.0.2.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workbench-kit/shell-react",
-  "version": "0.0.2-prototype.0.2.15",
+  "version": "0.0.2-prototype.0.2.17",
   "private": false,
   "sideEffects": [
     "**/*.css"
@@ -24,13 +24,13 @@
     "@xyflow/react": "^12.11.2",
     "jsonata": "^2.2.0",
     "react-table-mapping": "^1.0.3",
-    "@workbench-kit/platform": "0.0.2-prototype.0.2.15",
-    "@workbench-kit/field-remap": "0.0.2-prototype.0.2.15",
-    "@workbench-kit/tokens": "0.0.2-prototype.0.2.15",
-    "@workbench-kit/react": "0.0.2-prototype.0.2.15",
-    "@workbench-kit/workbench-config": "0.0.2-prototype.0.2.15",
-    "@workbench-kit/workbench-core": "0.0.2-prototype.0.2.15",
-    "@workbench-kit/workspace": "0.0.2-prototype.0.2.15"
+    "@workbench-kit/react": "0.0.2-prototype.0.2.17",
+    "@workbench-kit/tokens": "0.0.2-prototype.0.2.17",
+    "@workbench-kit/workbench-config": "0.0.2-prototype.0.2.17",
+    "@workbench-kit/field-remap": "0.0.2-prototype.0.2.17",
+    "@workbench-kit/workbench-core": "0.0.2-prototype.0.2.17",
+    "@workbench-kit/platform": "0.0.2-prototype.0.2.17",
+    "@workbench-kit/workspace": "0.0.2-prototype.0.2.17"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/field-remap/view-data.ts

@@ -1,5 +1,6 @@
 export const SAMPLE_FIELD_REMAP_VIEW_RENDER_KIND =
   'workbench-kit.samples.field-remap.view' as const;
+export const SAMPLE_FIELD_REMAP_VIEW_ID = 'workbench-kit.samples.field-remap.panel' as const;
 
 export interface SampleFieldRemapViewRenderData {
   readonly kind: typeof SAMPLE_FIELD_REMAP_VIEW_RENDER_KIND;

package/src/field-remap/view.tsx

@@ -1,5 +1,6 @@
 import type { JSX } from 'react';
 import { WorkbenchActionSidebar } from '@workbench-kit/react/layout';
+import type { ViewHostFactory } from '@workbench-kit/workbench-core';
 
 import './view.css';
 
@@ -10,6 +11,7 @@ import {
 } from './samples.js';
 import {
   isSampleFieldRemapViewRenderData,
+  SAMPLE_FIELD_REMAP_VIEW_ID,
   SAMPLE_FIELD_REMAP_VIEW_RENDER_KIND,
   type SampleFieldRemapViewRenderData,
 } from './view-data.js';
@@ -43,6 +45,23 @@ export interface SampleFieldRemapViewProps {
   readonly className?: string | undefined;
 }
 
+export const SAMPLE_FIELD_REMAP_VIEW_HOST_FACTORY: ViewHostFactory = {
+  id: 'workbench-kit.samples.field-remap.react-view-host',
+  priority: 100,
+  canCreate: ({ viewId }) => viewId === SAMPLE_FIELD_REMAP_VIEW_ID,
+  create: ({ provider }) => {
+    const host = provider.resolveViewHost();
+    const render = host.render.bind(host);
+
+    host.render = () => {
+      const renderData = render();
+      return isSampleFieldRemapViewRenderData(renderData) ? <SampleFieldRemapView /> : renderData;
+    };
+
+    return host;
+  },
+};
+
 /** Sidebar: catalog of field-remap / table-mapping samples. */
 export function SampleFieldRemapView({ className }: SampleFieldRemapViewProps = {}): JSX.Element {
   const editorService = useEditorService();

package/src/index.ts

@@ -4,6 +4,7 @@ export {
   WorkbenchProvider,
   useWorkbench,
   type WorkbenchContextValue,
+  type WorkbenchProviderProps,
   type WorkbenchStorageAdapter,
   type WorkbenchWorkspaceHostPort,
 } from './shell/provider.js';
@@ -80,7 +81,11 @@ export {
   isBuiltinEditorMarkdownPreviewRenderData,
   type BuiltinEditorMarkdownPreviewRenderData,
 } from './editor/markdown-document-view-data.js';
-export { SampleJdwLabView, type SampleJdwLabViewProps } from './jdw/lab-view.js';
+export {
+  SAMPLE_JDW_LAB_VIEW_HOST_FACTORY,
+  SampleJdwLabView,
+  type SampleJdwLabViewProps,
+} from './jdw/lab-view.js';
 export { JdwWidgetFormView, type JdwWidgetFormViewProps } from './jdw/widget-form-view.js';
 export { JdwWidgetPreviewView, type JdwWidgetPreviewViewProps } from './jdw/widget-preview-view.js';
 export {
@@ -186,6 +191,7 @@ export {
   type FieldRemapSampleId,
 } from './field-remap/samples.js';
 export {
+  SAMPLE_FIELD_REMAP_VIEW_HOST_FACTORY,
   SampleFieldRemapView,
   buildFieldRemapEditorUri,
   parseFieldRemapEditorSampleId,

package/src/jdw/lab-view-data.ts

@@ -1,4 +1,5 @@
 export const SAMPLE_JDW_LAB_VIEW_RENDER_KIND = 'workbench-kit.samples.jdw.view' as const;
+export const SAMPLE_JDW_LAB_VIEW_ID = 'workbench-kit.samples.jdw.panel' as const;
 
 export interface SampleJdwLabViewRenderData {
   readonly kind: typeof SAMPLE_JDW_LAB_VIEW_RENDER_KIND;

package/src/jdw/lab-view.tsx

@@ -1,4 +1,5 @@
 import { WorkbenchActionSidebar } from '@workbench-kit/react/layout';
+import type { ViewHostFactory } from '@workbench-kit/workbench-core';
 
 import './lab-view.css';
 
@@ -7,6 +8,7 @@ import { useActiveEditorTab } from '../editor/use-editor.js';
 import { useActiveWorkspacePath } from '../explorer/use-active-workspace-path.js';
 import {
   isSampleJdwLabViewRenderData,
+  SAMPLE_JDW_LAB_VIEW_ID,
   SAMPLE_JDW_LAB_VIEW_RENDER_KIND,
   type SampleJdwLabViewRenderData,
 } from './lab-view-data.js';
@@ -24,6 +26,31 @@ export interface SampleJdwLabViewProps {
   readonly widgetTreePath?: string | undefined;
 }
 
+export const SAMPLE_JDW_LAB_VIEW_HOST_FACTORY: ViewHostFactory = {
+  id: 'workbench-kit.samples.jdw.react-view-host',
+  priority: 100,
+  canCreate: ({ viewId }) => viewId === SAMPLE_JDW_LAB_VIEW_ID,
+  create: ({ provider }) => {
+    const host = provider.resolveViewHost();
+    const render = host.render.bind(host);
+
+    host.render = () => {
+      const renderData = render();
+
+      return isSampleJdwLabViewRenderData(renderData) ? (
+        <SampleJdwLabView
+          templateJdwPath={renderData.templateJdwPath}
+          widgetTreePath={renderData.widgetTreePath}
+        />
+      ) : (
+        renderData
+      );
+    };
+
+    return host;
+  },
+};
+
 function pathMatches(activePath: string | undefined, candidate: string): boolean {
   if (!activePath) {
     return false;

package/src/shell/provider.tsx

@@ -34,6 +34,7 @@ import {
   type WorkbenchEditorSavePort,
   type WorkbenchExtensionDescription,
   type WorkbenchLayoutStateInput,
+  type ViewHostFactory,
 } from '@workbench-kit/workbench-core';
 import {
   ContextKeyService,
@@ -101,6 +102,9 @@ const DEFAULT_AVAILABLE_EXTENSIONS = [
   ...SAMPLE_WORKBENCH_EXTENSIONS,
 ] as const;
 
+const EMPTY_HOST_THEMES: readonly WorkbenchHostThemeRegistration[] = Object.freeze([]);
+const EMPTY_USER_COMMANDS: readonly WorkbenchUserCommandDefinition[] = Object.freeze([]);
+
 export interface WorkbenchProviderProps {
   availableExtensions?: readonly WorkbenchExtensionDescription[];
   children: ReactNode;
@@ -140,6 +144,8 @@ export interface WorkbenchProviderProps {
   persistLayout?: boolean;
   persistLocalPreferences?: boolean;
   userCommands?: readonly WorkbenchUserCommandDefinition[];
+  /** Host-owned framework adapters registered before extension activation. */
+  viewHostFactories?: readonly ViewHostFactory[] | undefined;
   workspaceHostPort?: WorkbenchWorkspaceHostPort | undefined;
 }
 
@@ -192,7 +198,7 @@ export function WorkbenchProvider({
   extensionIntegrityMode = 'off',
   extensionsConfig,
   extensionsLock,
-  hostThemes = [],
+  hostThemes = EMPTY_HOST_THEMES,
   initialEditorState,
   initialKeybindingOverrides,
   initialLayout,
@@ -211,7 +217,8 @@ export function WorkbenchProvider({
   persistKeybindingOverrides,
   persistLayout,
   persistLocalPreferences,
-  userCommands = [],
+  userCommands = EMPTY_USER_COMMANDS,
+  viewHostFactories,
   workspaceHostPort,
 }: WorkbenchProviderProps) {
   const hostAvailableExtensions = availableExtensions ?? DEFAULT_AVAILABLE_EXTENSIONS;
@@ -335,6 +342,9 @@ export function WorkbenchProvider({
 
   const services = useMemo<WorkbenchProviderServices>(() => {
     const extensionRegistry = new ExtensionRegistry();
+    const viewHostFactoryDisposables = (viewHostFactories ?? []).map((factory) =>
+      extensionRegistry.viewHostFactories.register(factory),
+    );
     const editorDocumentViewProviders = extensionRegistry.editorDocumentViews;
     const editorDocumentViewProviderDisposables = [
       ...(includeDefaultDocumentViewProviders === false
@@ -433,6 +443,9 @@ export function WorkbenchProvider({
         for (const disposable of editorDocumentViewProviderDisposables) {
           disposable.dispose();
         }
+        for (const disposable of viewHostFactoryDisposables) {
+          disposable.dispose();
+        }
         extensionRegistry.dispose();
         layoutService.dispose();
         preferenceService.dispose();
@@ -465,6 +478,7 @@ export function WorkbenchProvider({
     resolvedInitialLayout,
     resolvedInitialLocalPreferences,
     userCommands,
+    viewHostFactories,
     workspaceHostPort,
   ]);
 
@@ -473,7 +487,11 @@ export function WorkbenchProvider({
       return undefined;
     }
 
-    const disposable = services.layoutService.onDidChangeLayout(({ state }) => {
+    const disposable = services.layoutService.onDidChangeLayout(({ state, transient }) => {
+      if (transient) {
+        return;
+      }
+
       writePersistedWorkbenchLayout(state, layoutStorageKey, layoutStorage);
     });
 

package/src/shell/shell.tsx

@@ -70,7 +70,12 @@ import {
   createWorkbenchShellActivityItems,
 } from './model.js';
 import { mergeWorkbenchStatusSections } from '../workbench/status-sections.js';
-import { renderDefaultBottomPanel, renderDefaultPrimarySidebar } from './view-host.js';
+import {
+  getVisibleWorkbenchViews,
+  renderDefaultAuxiliarySidebar,
+  renderDefaultBottomPanel,
+  renderDefaultPrimarySidebar,
+} from './view-host.js';
 import { WorkbenchShellTitleBarLayoutControls } from './titlebar-layout-controls.js';
 import { WorkbenchProfileModal, type WorkbenchProfileInput } from '../workbench/profile-modal.js';
 import { useContextKeyRevision } from '../commands/use-context-key-revision.js';
@@ -122,6 +127,8 @@ export interface WorkbenchShellProps {
   onLocaleChange?: ((locale: string) => void) | undefined;
   locale?: string | undefined;
   onStatusItemActivate?: (item: StatusBarItemModel) => void;
+  /** Host-owned dialogs and command surfaces rendered inside the shell overlay container. */
+  overlays?: ReactNode;
   primarySidebar?: ReactNode;
   profile?: WorkbenchProfileInput | undefined;
   profileExtraContent?: ReactNode;
@@ -174,6 +181,7 @@ export function WorkbenchShell({
   onShellPresetChange,
   onThemeChange,
   onStatusItemActivate,
+  overlays,
   primarySidebar,
   profile,
   profileExtraContent,
@@ -205,6 +213,10 @@ export function WorkbenchShell({
     preferenceService,
   } = useWorkbench();
   const contextKeyRevision = useContextKeyRevision(contextKeyService);
+  const contextKeySnapshot = useMemo(
+    () => contextKeyService.createSnapshot(),
+    [contextKeyRevision, contextKeyService],
+  );
   const forceRender = useForceRender();
   const [preferenceRevision, bumpPreferenceRevision] = useReducer((count: number) => count + 1, 0);
   const [isHelpOpen, setHelpOpen] = useState(false);
@@ -247,9 +259,9 @@ export function WorkbenchShell({
     () =>
       filterActivitiesByWhenClause(
         extensionRegistry.activities.getActivities(),
-        contextKeyService.createSnapshot(),
+        contextKeySnapshot,
       ),
-    [contextKeyRevision, contextKeyService, extensionRegistry],
+    [contextKeySnapshot, extensionRegistry],
   );
   const activityItems = sortActivityBarItems(
     createWorkbenchShellActivityItems({
@@ -429,20 +441,44 @@ export function WorkbenchShell({
       return;
     }
 
-    for (const view of extensionRegistry.views.getViews(activeViewContainerId)) {
+    for (const view of getVisibleWorkbenchViews(
+      extensionRegistry,
+      activeViewContainerId,
+      contextKeySnapshot,
+    )) {
       void extensionRegistry.activateView(view.id).then(forceRender);
     }
-  }, [activeViewContainerId, extensionRegistry, forceRender]);
+  }, [activeViewContainerId, contextKeySnapshot, extensionRegistry, forceRender]);
 
   useEffect(() => {
     if (!activePanelViewContainerId) {
       return;
     }
 
-    for (const view of extensionRegistry.views.getViews(activePanelViewContainerId)) {
+    for (const view of getVisibleWorkbenchViews(
+      extensionRegistry,
+      activePanelViewContainerId,
+      contextKeySnapshot,
+    )) {
       void extensionRegistry.activateView(view.id).then(forceRender);
     }
-  }, [activePanelViewContainerId, extensionRegistry, forceRender]);
+  }, [activePanelViewContainerId, contextKeySnapshot, extensionRegistry, forceRender]);
+
+  useEffect(() => {
+    if (!layout.auxiliaryBar.visible) {
+      return;
+    }
+
+    for (const container of extensionRegistry.views.getViewContainers('auxiliarybar')) {
+      for (const view of getVisibleWorkbenchViews(
+        extensionRegistry,
+        container.id,
+        contextKeySnapshot,
+      )) {
+        void extensionRegistry.activateView(view.id).then(forceRender);
+      }
+    }
+  }, [contextKeySnapshot, extensionRegistry, forceRender, layout.auxiliaryBar.visible]);
 
   useEffect(() => {
     if (extensionRegistry.capabilityRegistry.has(WORKBENCH_SETTINGS_CAPABILITY_ID)) {
@@ -601,6 +637,7 @@ export function WorkbenchShell({
             activeViewContainerId,
             catalogUrl,
             catalogTrustPolicy,
+            contextKeySnapshot,
           ),
         onSizePxChange: (sizePx) => {
           layoutService.setSideBarSizePercent(
@@ -613,13 +650,19 @@ export function WorkbenchShell({
       }}
       auxiliarySidebar={{
         isVisible: layout.auxiliaryBar.visible,
-        node: <aside aria-label="Secondary Side Bar" className="workbench-auxiliary-side-bar" />,
+        node: renderDefaultAuxiliarySidebar(
+          extensionRegistry,
+          contextKeySnapshot,
+          catalogUrl,
+          catalogTrustPolicy,
+        ),
       }}
       bottomPanel={{
         isVisible: layout.panel.visible,
         node: renderDefaultBottomPanel(extensionRegistry, activePanelViewContainerId, {
           catalogTrustPolicy,
           catalogUrl,
+          contextKeys: contextKeySnapshot,
           onActiveViewContainerChange: (viewContainerId) => {
             layoutService.setActivePanelViewContainer(viewContainerId);
             if (!layout.panel.visible) {
@@ -641,6 +684,7 @@ export function WorkbenchShell({
       shellPreset={shellPreset}
       overlays={
         <>
+          {overlays}
           {commandHost !== false ? (
             <WorkbenchCommandHost
               {...(resolvedCommandHost === false ? {} : resolvedCommandHost)}

package/src/shell/view-host.tsx

@@ -5,7 +5,12 @@ import type {
   ViewHost,
   ViewHostFactoryRegistry,
   ViewProvider,
+  WorkbenchViewContribution,
 } from '@workbench-kit/workbench-core';
+import {
+  filterWorkbenchContributionsByWhenClause,
+  type WorkbenchContextKeySnapshot,
+} from '@workbench-kit/platform';
 
 import { BuiltinChatView } from '../chat/view.js';
 import { isBuiltinChatViewRenderData } from '../chat/view-data.js';
@@ -15,10 +20,6 @@ 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';
 
@@ -27,10 +28,11 @@ export function renderDefaultPrimarySidebar(
   activeViewContainerId: string | undefined,
   catalogUrl?: string | undefined,
   catalogTrustPolicy?: ExtensionCatalogTrustPolicy | undefined,
+  contextKeys: WorkbenchContextKeySnapshot = {},
 ) {
   const views = activeViewContainerId
-    ? extensionRegistry.views.getViews(activeViewContainerId)
-    : extensionRegistry.views.getViews();
+    ? getVisibleWorkbenchViews(extensionRegistry, activeViewContainerId, contextKeys)
+    : filterWorkbenchContributionsByWhenClause(extensionRegistry.views.getViews(), contextKeys);
   if (views.length === 0) {
     return <aside aria-label="Primary sidebar" />;
   }
@@ -38,20 +40,29 @@ export function renderDefaultPrimarySidebar(
   return (
     <aside
       aria-label="Primary sidebar"
-      className="workbench-primary-side-bar shell-react-primary-sidebar"
+      className="workbench-primary-side-bar shell-react-sidebar-host"
     >
-      {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>
-      ))}
+      {renderWorkbenchViews(extensionRegistry, views, { catalogTrustPolicy, catalogUrl })}
+    </aside>
+  );
+}
+
+export function renderDefaultAuxiliarySidebar(
+  extensionRegistry: Pick<ExtensionRegistry, 'viewHostFactories' | 'views'>,
+  contextKeys: WorkbenchContextKeySnapshot,
+  catalogUrl?: string | undefined,
+  catalogTrustPolicy?: ExtensionCatalogTrustPolicy | undefined,
+) {
+  const views = extensionRegistry.views
+    .getViewContainers('auxiliarybar')
+    .flatMap((container) => getVisibleWorkbenchViews(extensionRegistry, container.id, contextKeys));
+
+  return (
+    <aside
+      aria-label="Secondary Side Bar"
+      className="workbench-auxiliary-side-bar shell-react-sidebar-host"
+    >
+      {renderWorkbenchViews(extensionRegistry, views, { catalogTrustPolicy, catalogUrl })}
     </aside>
   );
 }
@@ -62,6 +73,7 @@ export function renderDefaultBottomPanel(
   options: {
     catalogTrustPolicy?: ExtensionCatalogTrustPolicy | undefined;
     catalogUrl?: string | undefined;
+    contextKeys?: WorkbenchContextKeySnapshot | undefined;
     onActiveViewContainerChange?: ((viewContainerId: string) => void) | undefined;
   } = {},
 ) {
@@ -80,7 +92,11 @@ export function renderDefaultBottomPanel(
       ? activeViewContainerId
       : containers[0]?.id;
   const views = resolvedActiveViewContainerId
-    ? extensionRegistry.views.getViews(resolvedActiveViewContainerId)
+    ? getVisibleWorkbenchViews(
+        extensionRegistry,
+        resolvedActiveViewContainerId,
+        options.contextKeys ?? {},
+      )
     : [];
 
   return (
@@ -111,24 +127,56 @@ export function renderDefaultBottomPanel(
         {views.length === 0 ? (
           <div className="workbench-bottom-panel__empty">No views in this panel container.</div>
         ) : (
-          views.map((view) => (
-            <section key={view.id} data-view-id={view.id} className="workbench-bottom-panel__view">
-              <WorkbenchViewHost
-                catalogTrustPolicy={options.catalogTrustPolicy}
-                catalogUrl={options.catalogUrl}
-                fallback={view.name}
-                provider={extensionRegistry.views.getViewProvider(view.id)}
-                viewHostFactories={extensionRegistry.viewHostFactories}
-                viewId={view.id}
-              />
-            </section>
-          ))
+          renderWorkbenchViews(extensionRegistry, views, {
+            catalogTrustPolicy: options.catalogTrustPolicy,
+            catalogUrl: options.catalogUrl,
+            sectionClassName: 'workbench-bottom-panel__view',
+          })
         )}
       </div>
     </section>
   );
 }
 
+export function getVisibleWorkbenchViews(
+  extensionRegistry: Pick<ExtensionRegistry, 'views'>,
+  viewContainerId: string,
+  contextKeys: WorkbenchContextKeySnapshot,
+): WorkbenchViewContribution[] {
+  return filterWorkbenchContributionsByWhenClause(
+    extensionRegistry.views.getViews(viewContainerId),
+    contextKeys,
+  );
+}
+
+function renderWorkbenchViews(
+  extensionRegistry: Pick<ExtensionRegistry, 'viewHostFactories' | 'views'>,
+  views: readonly WorkbenchViewContribution[],
+  options: {
+    catalogTrustPolicy?: ExtensionCatalogTrustPolicy | undefined;
+    catalogUrl?: string | undefined;
+    sectionClassName?: string | undefined;
+  },
+): ReactNode {
+  return views.map((view) => (
+    <section
+      key={view.id}
+      className={options.sectionClassName}
+      data-view-container-id={view.containerId}
+      data-view-id={view.id}
+    >
+      <WorkbenchViewHost
+        catalogTrustPolicy={options.catalogTrustPolicy}
+        catalogUrl={options.catalogUrl}
+        fallback={view.name}
+        provider={extensionRegistry.views.getViewProvider(view.id)}
+        viewHostFactories={extensionRegistry.viewHostFactories}
+        viewId={view.id}
+      />
+    </section>
+  ));
+}
+
 export function WorkbenchViewHost({
   catalogTrustPolicy,
   catalogUrl,
@@ -268,18 +316,5 @@ export function toWorkbenchViewHostReactNode(
     );
   }
 
-  if (isSampleJdwLabViewRenderData(value)) {
-    return (
-      <SampleJdwLabView
-        templateJdwPath={value.templateJdwPath}
-        widgetTreePath={value.widgetTreePath}
-      />
-    );
-  }
-
-  if (isSampleFieldRemapViewRenderData(value)) {
-    return <SampleFieldRemapView />;
-  }
-
   return toReactNode(value, fallback);
 }