@workbench-kit/shell-react 0.0.2-prototype.0.2.24 → 0.0.2-prototype.0.2.26

package/README.md

@@ -39,10 +39,15 @@ available from the non-React `@workbench-kit/shell-react/layout-storage` subpath
 host wants the Kit editor, or omit it for a product-owned editor region.
 
 Performance-sensitive hosts should import orchestration from the focused
-`provider`, `shell`, `command-host`, `command-palette`, and
+`provider`, `host-shell`, `shell`, `command-host`, `command-palette`, and
 `command-descriptors` subpaths. The root barrel remains the discovery surface,
 not the default runtime import graph.
 
+Use `host-shell` when the product owns sidebar, editor, panel, and overlay content.
+It keeps Kit layout, Activity Bar ordering, resize persistence, and status routing
+without loading the full Settings/Profile/Help assembly. Use `shell` for the
+batteries-included management experience.
+
 Prefer this package when the host needs provider + shell orchestration. For
 layout-only chrome without host services, start from
 `@workbench-kit/react/workbench/shell` — see

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workbench-kit/shell-react",
-  "version": "0.0.2-prototype.0.2.24",
+  "version": "0.0.2-prototype.0.2.26",
   "private": false,
   "sideEffects": [
     "**/*.css"
@@ -13,6 +13,7 @@
     "./command-palette": "./src/workbench/command-palette.ts",
     "./field-remap": "./src/field-remap/index.ts",
     "./field-remap/view.css": "./src/field-remap/view.css",
+    "./host-shell": "./src/shell/host-shell.tsx",
     "./layout-storage": "./src/workbench/layout-storage.ts",
     "./provider": "./src/shell/provider.tsx",
     "./shell": "./src/shell/shell.tsx"
@@ -30,14 +31,14 @@
     "@xyflow/react": "^12.11.2",
     "jsonata": "^2.2.0",
     "react-table-mapping": "^1.0.3",
-    "@workbench-kit/platform": "0.0.2-prototype.0.2.24",
-    "@workbench-kit/field-remap": "0.0.2-prototype.0.2.24",
-    "@workbench-kit/react": "0.0.2-prototype.0.2.24",
-    "@workbench-kit/workbench-config": "0.0.2-prototype.0.2.24",
-    "@workbench-kit/workbench-extension-sdk": "0.0.2-prototype.0.2.24",
-    "@workbench-kit/workspace": "0.0.2-prototype.0.2.24",
-    "@workbench-kit/tokens": "0.0.2-prototype.0.2.24",
-    "@workbench-kit/workbench-core": "0.0.2-prototype.0.2.24"
+    "@workbench-kit/field-remap": "0.0.2-prototype.0.2.26",
+    "@workbench-kit/tokens": "0.0.2-prototype.0.2.26",
+    "@workbench-kit/workbench-config": "0.0.2-prototype.0.2.26",
+    "@workbench-kit/workbench-extension-sdk": "0.0.2-prototype.0.2.26",
+    "@workbench-kit/workbench-core": "0.0.2-prototype.0.2.26",
+    "@workbench-kit/workspace": "0.0.2-prototype.0.2.26",
+    "@workbench-kit/platform": "0.0.2-prototype.0.2.26",
+    "@workbench-kit/react": "0.0.2-prototype.0.2.26"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/shell/host-shell.tsx

@@ -0,0 +1,174 @@
+import { useCallback, useEffect, useMemo, useReducer, type ReactNode } from 'react';
+import {
+  WorkbenchShell as ReactWorkbenchShell,
+  type StatusBarItemModel,
+  type StatusBarSectionModel,
+  type WorkbenchShellProps as ReactWorkbenchShellProps,
+} from '@workbench-kit/react/workbench/shell';
+import {
+  filterActivityBarItems,
+  sortActivityBarItems,
+} from '@workbench-kit/react/workbench/activityBarOrder';
+import { filterActivitiesByWhenClause } from '@workbench-kit/workbench-core';
+
+import { useContextKeyRevision } from '../commands/use-context-key-revision.js';
+import { createWorkbenchShellActivityItems } from './model.js';
+import { useWorkbench } from './provider.js';
+import {
+  WORKBENCH_HOST_PRIMARY_SIDEBAR_MAX_PX,
+  WORKBENCH_HOST_PRIMARY_SIDEBAR_MIN_PX,
+  workbenchHostPrimarySidebarSizePercentFromPx,
+  workbenchHostPrimarySidebarSizePxFromPercent,
+} from './layout-metrics.js';
+
+export interface WorkbenchHostShellProps {
+  activityBarAriaLabel?: string | undefined;
+  activityBarPosition?: ReactWorkbenchShellProps['activityBarPosition'];
+  auxiliarySidebar?: ReactNode;
+  bottomPanel?: ReactNode;
+  compactStatus?: boolean | undefined;
+  editorArea: ReactNode;
+  onStatusItemActivate?: ((item: StatusBarItemModel) => void) | undefined;
+  overlays?: ReactNode;
+  primarySidebar?: ReactNode;
+  rootClassName?: string | undefined;
+  shellPreset?: string | undefined;
+  statusBarAriaLabel?: string | undefined;
+  statusSections?: StatusBarSectionModel[] | undefined;
+  theme?: string | undefined;
+  themePreset?: string | undefined;
+  titleBar?: ReactNode;
+}
+
+/** Lean product shell: Kit owns layout/chrome while the host owns every content surface. */
+export function WorkbenchHostShell({
+  activityBarAriaLabel = 'Primary activities',
+  activityBarPosition,
+  auxiliarySidebar,
+  bottomPanel,
+  compactStatus = true,
+  editorArea,
+  onStatusItemActivate,
+  overlays,
+  primarySidebar,
+  rootClassName,
+  shellPreset,
+  statusBarAriaLabel = 'Status bar',
+  statusSections = [],
+  theme,
+  themePreset,
+  titleBar,
+}: WorkbenchHostShellProps) {
+  const { contextKeyService, executeCommand, extensionRegistry, layoutService } = useWorkbench();
+  const contextKeyRevision = useContextKeyRevision(contextKeyService);
+  const [, forceRender] = useReducer((count: number) => count + 1, 0);
+  const rerender = useCallback(() => forceRender(), []);
+  const contextKeySnapshot = useMemo(
+    () => contextKeyService.createSnapshot(),
+    [contextKeyRevision, contextKeyService],
+  );
+  const layout = layoutService.getState();
+  const activities = useMemo(
+    () =>
+      filterActivitiesByWhenClause(
+        extensionRegistry.activities.getActivities(),
+        contextKeySnapshot,
+      ),
+    [contextKeySnapshot, extensionRegistry],
+  );
+  const activityItems = filterActivityBarItems(
+    sortActivityBarItems(
+      createWorkbenchShellActivityItems({
+        activeViewContainerId: layout.sideBar.activeViewContainer,
+        activities,
+        viewContainers: extensionRegistry.views.getViewContainers('activitybar'),
+        views: extensionRegistry.views.getViews(),
+      }),
+      layout.activityBar.itemOrder,
+    ),
+    layout.activityBar.hiddenItemIds,
+  );
+
+  useEffect(() => {
+    const disposable = layoutService.onDidChangeLayout(rerender);
+    return () => disposable.dispose();
+  }, [layoutService, rerender]);
+
+  useEffect(() => {
+    if (activityItems.length === 0) {
+      return;
+    }
+    const activeId = layout.sideBar.activeViewContainer;
+    if (activeId !== undefined && !activityItems.some((item) => item.id === activeId)) {
+      layoutService.setActiveViewContainer(activityItems[0]?.id);
+    }
+  }, [activityItems, layout.sideBar.activeViewContainer, layoutService]);
+
+  return (
+    <ReactWorkbenchShell
+      activityBar={{
+        'aria-label': activityBarAriaLabel,
+        items: activityItems,
+        reorderable: true,
+        visible: layout.activityBar.visible,
+        onItemActivate: (item) => layoutService.focusSideBarViewContainer(item.id),
+        onItemsReorder: (itemIds) => {
+          const preserved =
+            layout.activityBar.itemOrder?.filter((itemId) => !itemIds.includes(itemId)) ?? [];
+          layoutService.setActivityBarItemOrder([...itemIds, ...preserved]);
+        },
+      }}
+      activityBarPosition={activityBarPosition}
+      auxiliarySidebar={
+        auxiliarySidebar === undefined
+          ? undefined
+          : { isVisible: layout.auxiliaryBar.visible, node: auxiliarySidebar }
+      }
+      bottomPanel={
+        bottomPanel === undefined
+          ? undefined
+          : {
+              isVisible: layout.panel.visible,
+              node: bottomPanel,
+              sizePercent: layout.panel.sizePercent,
+              onSizePercentChange: (sizePercent) => layoutService.setPanelSizePercent(sizePercent),
+            }
+      }
+      compactStatus={compactStatus}
+      onStatusItemActivate={(item) => {
+        const contributed = extensionRegistry.statusBar.getStatusBarItem(item.id);
+        if (contributed?.command) {
+          void executeCommand(contributed.command).catch(() => undefined);
+          return;
+        }
+        onStatusItemActivate?.(item);
+      }}
+      overlays={overlays}
+      primarySidebar={
+        primarySidebar === undefined
+          ? undefined
+          : {
+              isVisible: layout.sideBar.visible,
+              maxPrimarySizePx: WORKBENCH_HOST_PRIMARY_SIDEBAR_MAX_PX,
+              minPrimarySizePx: WORKBENCH_HOST_PRIMARY_SIDEBAR_MIN_PX,
+              node: primarySidebar,
+              primarySizePx: workbenchHostPrimarySidebarSizePxFromPercent(
+                layout.sideBar.sizePercent,
+              ),
+              onSizePxChange: (sizePx) =>
+                layoutService.setSideBarSizePercent(
+                  workbenchHostPrimarySidebarSizePercentFromPx(sizePx),
+                ),
+            }
+      }
+      rootClassName={rootClassName}
+      secondaryArea={editorArea}
+      shellPreset={shellPreset}
+      statusBarAriaLabel={statusBarAriaLabel}
+      statusSections={statusSections}
+      theme={theme}
+      themePreset={themePreset}
+      titleBar={titleBar}
+    />
+  );
+}

package/src/shell/layout-metrics.ts

@@ -0,0 +1,27 @@
+const SIDEBAR_LAYOUT_REFERENCE_WIDTH_PX = 1200;
+
+export const WORKBENCH_HOST_PRIMARY_SIDEBAR_MIN_PX = 200;
+export const WORKBENCH_HOST_PRIMARY_SIDEBAR_MAX_PX = 480;
+
+export function clampWorkbenchHostPrimarySidebarSizePx(sizePx: number): number {
+  if (!Number.isFinite(sizePx)) {
+    return WORKBENCH_HOST_PRIMARY_SIDEBAR_MIN_PX;
+  }
+  return Math.min(
+    WORKBENCH_HOST_PRIMARY_SIDEBAR_MAX_PX,
+    Math.max(WORKBENCH_HOST_PRIMARY_SIDEBAR_MIN_PX, Math.round(sizePx)),
+  );
+}
+
+export function workbenchHostPrimarySidebarSizePxFromPercent(
+  sizePercent: number | undefined,
+): number {
+  const percent = Number.isFinite(sizePercent) ? (sizePercent as number) : 20;
+  return clampWorkbenchHostPrimarySidebarSizePx(
+    (percent / 100) * SIDEBAR_LAYOUT_REFERENCE_WIDTH_PX,
+  );
+}
+
+export function workbenchHostPrimarySidebarSizePercentFromPx(sizePx: number): number {
+  return (clampWorkbenchHostPrimarySidebarSizePx(sizePx) / SIDEBAR_LAYOUT_REFERENCE_WIDTH_PX) * 100;
+}

package/src/shell/shell.tsx

@@ -78,30 +78,14 @@ import {
 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';
+import {
+  WORKBENCH_HOST_PRIMARY_SIDEBAR_MAX_PX,
+  WORKBENCH_HOST_PRIMARY_SIDEBAR_MIN_PX,
+  workbenchHostPrimarySidebarSizePercentFromPx,
+  workbenchHostPrimarySidebarSizePxFromPercent,
+} from './layout-metrics.js';
 export type { WorkbenchLocaleOption, WorkbenchThemeOption } from './settings.js';
 
-/** Virtual width used to bridge layout `sizePercent` into pixel SplitView units. */
-const SHELL_REACT_SIDEBAR_LAYOUT_REFERENCE_WIDTH_PX = 1200;
-const SHELL_REACT_PRIMARY_SIDEBAR_MIN_PX = 200;
-const SHELL_REACT_PRIMARY_SIDEBAR_MAX_PX = 480;
-
-function clampShellReactPrimarySidebarSizePx(sizePx: number): number {
-  if (!Number.isFinite(sizePx)) {
-    return SHELL_REACT_PRIMARY_SIDEBAR_MIN_PX;
-  }
-  return Math.min(
-    SHELL_REACT_PRIMARY_SIDEBAR_MAX_PX,
-    Math.max(SHELL_REACT_PRIMARY_SIDEBAR_MIN_PX, Math.round(sizePx)),
-  );
-}
-
-function shellReactPrimarySidebarSizePxFromPercent(sizePercent: number | undefined): number {
-  const percent = Number.isFinite(sizePercent) ? (sizePercent as number) : 20;
-  return clampShellReactPrimarySidebarSizePx(
-    (percent / 100) * SHELL_REACT_SIDEBAR_LAYOUT_REFERENCE_WIDTH_PX,
-  );
-}
-
 export interface WorkbenchShellProps {
   accountManagement?: WorkbenchAccountManagementInput | undefined;
   additionalSettingsCategories?: readonly WorkbenchSettingsCategory[] | undefined;
@@ -627,8 +611,8 @@ export function WorkbenchShell({
         isVisible: layout.sideBar.visible,
         // Provider layout still stores sideBar.sizePercent; convert at the shell boundary
         // until workbench-core persists pixel widths directly.
-        maxPrimarySizePx: SHELL_REACT_PRIMARY_SIDEBAR_MAX_PX,
-        minPrimarySizePx: SHELL_REACT_PRIMARY_SIDEBAR_MIN_PX,
+        maxPrimarySizePx: WORKBENCH_HOST_PRIMARY_SIDEBAR_MAX_PX,
+        minPrimarySizePx: WORKBENCH_HOST_PRIMARY_SIDEBAR_MIN_PX,
         node:
           primarySidebar ??
           renderDefaultPrimarySidebar(
@@ -639,13 +623,9 @@ export function WorkbenchShell({
             contextKeySnapshot,
           ),
         onSizePxChange: (sizePx) => {
-          layoutService.setSideBarSizePercent(
-            (clampShellReactPrimarySidebarSizePx(sizePx) /
-              SHELL_REACT_SIDEBAR_LAYOUT_REFERENCE_WIDTH_PX) *
-              100,
-          );
+          layoutService.setSideBarSizePercent(workbenchHostPrimarySidebarSizePercentFromPx(sizePx));
         },
-        primarySizePx: shellReactPrimarySidebarSizePxFromPercent(layout.sideBar.sizePercent),
+        primarySizePx: workbenchHostPrimarySidebarSizePxFromPercent(layout.sideBar.sizePercent),
       }}
       auxiliarySidebar={{
         isVisible: layout.auxiliaryBar.visible,

package/src/workbench/command-host.tsx

@@ -151,12 +151,16 @@ export function WorkbenchCommandHost({
 
   const shellContext = useMemo<WorkbenchShellCommandContext>(
     () => ({
+      isFocusModeActive: layoutService.isFocusModeActive(),
       isPrimarySidebarVisible: layout.sideBar.visible,
       openSettings: onOpenSettings,
       showActivity: (activityId) => {
         layoutService.setActiveViewContainer(activityId);
         layoutService.setSideBarVisible(true);
       },
+      toggleFocusMode: () => {
+        layoutService.setFocusModeActive(!layoutService.isFocusModeActive());
+      },
       togglePrimarySidebar: () => {
         layoutService.setSideBarVisible(!layout.sideBar.visible);
       },