@workbench-kit/react 0.0.2-prototype.0.1.4 → 0.0.2-prototype.0.2.11

package/src/workbench/shell/appearanceLabels.ts

@@ -0,0 +1,28 @@
+/**
+ * Appearance settings copy aligned with VS Code Settings › Appearance terminology.
+ *
+ * VS Code maps:
+ * - color scheme preference → `window.autoDetectColorScheme` + forced light/dark
+ * - light/dark color presets → `workbench.preferredLightColorTheme` / `workbench.preferredDarkColorTheme`
+ * - workbench layout preset → no first-class VS Code preset (scattered workbench/editor settings);
+ *   workbench-kit groups metric tokens under `data-shell-preset` / `shellPreset`.
+ *
+ * Code identifiers (`themePreset`, `shellPreset`) stay stable; use these labels in UI only.
+ */
+export const WORKBENCH_APPEARANCE_FIELD_LABELS = {
+  colorScheme: 'Color scheme',
+  preferredLightColorTheme: 'Preferred Light Color Theme',
+  preferredDarkColorTheme: 'Preferred Dark Color Theme',
+  workbenchLayout: 'Workbench Layout',
+} as const;
+
+export const WORKBENCH_APPEARANCE_FIELD_DESCRIPTIONS = {
+  colorScheme:
+    'Match VS Code auto-detect: System follows the OS color scheme; Light and Dark force a mode.',
+  preferredLightColorTheme:
+    'Workbench color theme when resolved to light mode (VS Code: workbench.preferredLightColorTheme).',
+  preferredDarkColorTheme:
+    'Workbench color theme when resolved to dark mode (VS Code: workbench.preferredDarkColorTheme).',
+  workbenchLayout:
+    'Header height, control radius, spacing, and status bar density. Orthogonal to Color Theme; combine freely.',
+} as const;

package/src/workbench/shell/confirmation-flow.css

@@ -0,0 +1,87 @@
+.ui-workbench-confirmation-flow {
+  --ui-modal-width: 440px;
+}
+
+.ui-workbench-confirmation-flow__body {
+  padding: 20px;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+}
+
+.ui-workbench-confirmation-flow__message {
+  margin: 0 0 12px;
+  line-height: 1.5;
+}
+
+.ui-workbench-confirmation-flow__detail,
+.ui-workbench-confirmation-flow__disabled-reason {
+  display: block;
+  padding: 8px;
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  text-overflow: ellipsis;
+}
+
+.ui-workbench-confirmation-flow__detail {
+  color: var(--color-text);
+  background: var(--color-surface);
+  white-space: nowrap;
+}
+
+.ui-workbench-confirmation-flow__disabled-reason {
+  margin-top: 10px;
+  color: var(--color-warning);
+  background: color-mix(in srgb, var(--color-warning) 10%, transparent);
+  white-space: normal;
+}
+
+.ui-workbench-confirmation-flow__side-effect {
+  max-width: 150px;
+  display: inline-flex;
+  align-items: center;
+  padding: 1px 6px;
+  overflow: hidden;
+  color: var(--color-text-subtle);
+  background: var(--color-surface-hover);
+  border: 1px solid var(--color-border);
+  border-radius: 999px;
+  font-size: var(--font-size-xs);
+  font-weight: 400;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-workbench-confirmation-flow__confirm[data-status='running'] {
+  cursor: wait;
+}
+
+.ui-workbench-confirmation-story {
+  min-height: 420px;
+  padding: 24px;
+  color: var(--color-text);
+  background: var(--color-bg);
+}
+
+.ui-workbench-confirmation-story__toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.workbench-delete-targets {
+  display: flex;
+  max-height: 160px;
+  flex-direction: column;
+  gap: 4px;
+  overflow: auto;
+  white-space: normal;
+}
+
+.workbench-delete-targets code {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/src/workbench/shell/hardReset.ts

@@ -0,0 +1,64 @@
+import { clearBrowserStorageByPrefixes, type BrowserStorageKind } from '@workbench-kit/platform';
+
+export const DEFAULT_WORKBENCH_STORAGE_PREFIX = 'workbench-kit';
+
+export const DEFAULT_WORKBENCH_HARD_RESET_CONFIRM_MESSAGE =
+  'Clears persisted workbench browser storage and reloads the page.\n\nContinue?';
+
+export interface WorkbenchHardResetOptions {
+  /** Storage key prefixes to remove. Defaults to [DEFAULT_WORKBENCH_STORAGE_PREFIX]. */
+  storagePrefixes?: readonly string[];
+  /** Which browser storages to scan. Defaults to local + session. */
+  storageKinds?: readonly BrowserStorageKind[];
+  /** When true (default), asks for confirmation before clearing. */
+  confirm?: boolean;
+  confirmMessage?: string;
+  /** Host hook for in-memory caches before storage is cleared. */
+  beforeReset?: () => void | Promise<void>;
+  /** Reload after reset. Defaults to true. */
+  reload?: boolean;
+}
+
+function confirmHardReset(message: string): boolean {
+  if (typeof globalThis.confirm !== 'function') {
+    return true;
+  }
+
+  return globalThis.confirm(message);
+}
+
+function reloadHostPage(): void {
+  if (typeof globalThis.location?.reload === 'function') {
+    globalThis.location.reload();
+  }
+}
+
+/**
+ * Clears browser storage for the configured prefixes and reloads the host page
+ * so workbench state rehydrates from defaults.
+ */
+export async function performWorkbenchHardReset(
+  options: WorkbenchHardResetOptions = {},
+): Promise<boolean> {
+  const {
+    storagePrefixes = [DEFAULT_WORKBENCH_STORAGE_PREFIX],
+    storageKinds,
+    confirm = true,
+    confirmMessage = DEFAULT_WORKBENCH_HARD_RESET_CONFIRM_MESSAGE,
+    beforeReset,
+    reload = true,
+  } = options;
+
+  if (confirm && !confirmHardReset(confirmMessage)) {
+    return false;
+  }
+
+  await beforeReset?.();
+  clearBrowserStorageByPrefixes(storagePrefixes, { kinds: storageKinds });
+
+  if (reload) {
+    reloadHostPage();
+  }
+
+  return true;
+}

package/src/workbench/shell/index.css

@@ -0,0 +1,5 @@
+/* workbench/shell feature styles */
+@import './activity-bar.css';
+@import './confirmation-flow.css';
+@import './split-view.css';
+@import './status-bar.css';

package/src/workbench/shell/shell.ts

@@ -0,0 +1,152 @@
+export { ActivityBar, ACTIVITY_BAR_DRAG_DATA_TYPE } from './ActivityBar';
+export {
+  hasWorkbenchSidebarViewPlacementDrag,
+  readWorkbenchSidebarViewPlacementDrag,
+  resetWorkbenchSidebarViewPlacementDragSession,
+  subscribeWorkbenchSidebarViewPlacementDragSessionEnd,
+  writeWorkbenchSidebarViewPlacementDrag,
+  WORKBENCH_SIDEBAR_VIEW_PLACEMENT_DRAG_DATA_TYPE,
+} from './sidebarViewPlacementDnd';
+export {
+  mergeWorkbenchSidebarViewPlacementDropZoneProps,
+  useWorkbenchSidebarViewPlacementDropZone,
+} from './useWorkbenchSidebarViewPlacementDropZone';
+export type {
+  UseWorkbenchSidebarViewPlacementDropZoneOptions,
+  WorkbenchSidebarViewPlacementDropZoneProps,
+} from './useWorkbenchSidebarViewPlacementDropZone';
+export { useWorkbenchSidebarActionBarDnd } from './useWorkbenchSidebarActionBarDnd';
+export type {
+  UseWorkbenchSidebarActionBarDndOptions,
+  UseWorkbenchSidebarActionBarDndResult,
+  WorkbenchSidebarActionBarDropTarget,
+  WorkbenchSidebarActionBarItemDragHandlers,
+} from './useWorkbenchSidebarActionBarDnd';
+export type { ActivityBarItem, ActivityBarProps } from './ActivityBar';
+export { WorkbenchArtifactModeControls, WorkbenchArtifactShell } from './ArtifactShell';
+export type {
+  WorkbenchArtifactDescriptor,
+  WorkbenchArtifactMode,
+  WorkbenchArtifactShellProps,
+} from './ArtifactShell';
+export { SplitView } from './SplitView';
+export type { SplitViewLayoutMode, SplitViewProps } from './SplitView';
+export { StatusBar, StatusBarItem, StatusBarSection } from './StatusBar';
+export type {
+  StatusBarItemModel,
+  StatusBarItemProps,
+  StatusBarProps,
+  StatusBarSectionAlign,
+  StatusBarSectionModel,
+  StatusBarSectionProps,
+} from './StatusBar';
+export { WorkbenchShell } from './WorkbenchShell';
+export type { WorkbenchShellProps } from './WorkbenchShell';
+export {
+  createWorkbenchEditorTabsFromViewModel,
+  createWorkbenchShellActivityBarFromViewModel,
+  createWorkbenchViewSidebarFromViewModel,
+  createWorkbenchViewSidebarItemsFromViewModel,
+} from './shellViewModel';
+export type {
+  CreateWorkbenchEditorTabsFromViewModelInput,
+  CreateWorkbenchShellActivityBarFromViewModelInput,
+  CreateWorkbenchViewSidebarFromViewModelInput,
+  CreateWorkbenchViewSidebarItemsFromViewModelInput,
+  WorkbenchShellActivityBarViewModelProps,
+  WorkbenchViewSidebarViewModelProps,
+} from './shellViewModel';
+export { WorkbenchViewEditor } from './WorkbenchViewEditor';
+export type {
+  WorkbenchViewEditorDataAttributes,
+  WorkbenchViewEditorEmptyState,
+  WorkbenchViewEditorEmptyStateProps,
+  WorkbenchViewEditorEmptyStateSurfaceProps,
+  WorkbenchViewEditorProps,
+} from './WorkbenchViewEditor';
+export { WorkbenchEditorTabs } from '../editor/WorkbenchEditorTabs';
+export type { WorkbenchEditorTabsProps } from '../editor/WorkbenchEditorTabs';
+export {
+  createWorkbenchStandaloneEditorTabCommandContext,
+  createWorkbenchStandaloneEditorTabContextMenuItems,
+  isWorkbenchEditorTabClosable,
+} from '../editor/editorTabContextMenu';
+export type {
+  CreateWorkbenchStandaloneEditorTabCommandContextInput,
+  WorkbenchStandaloneEditorTabLike,
+} from '../editor/editorTabContextMenu';
+export { useWorkbenchEditorTabContextMenu } from '../editor/useWorkbenchEditorTabContextMenu';
+export type {
+  UseWorkbenchEditorTabContextMenuOptions,
+  UseWorkbenchEditorTabContextMenuResult,
+} from '../editor/useWorkbenchEditorTabContextMenu';
+export { WorkbenchViewSidebar } from './WorkbenchViewSidebar';
+export type { WorkbenchViewSidebarItem, WorkbenchViewSidebarProps } from './WorkbenchViewSidebar';
+export {
+  WorkbenchDesktopTitleBar,
+  WorkbenchDesktopWindowControls,
+} from './WorkbenchDesktopTitleBar';
+export type {
+  WorkbenchDesktopTitleBarProps,
+  WorkbenchDesktopWindowControlsProps,
+} from './WorkbenchDesktopTitleBar';
+export {
+  WorkbenchPlatformProvider,
+  useWorkbenchHostPlatform,
+} from '../chrome/WorkbenchPlatformContext';
+export type { WorkbenchPlatformProviderProps } from '../chrome/WorkbenchPlatformContext';
+export {
+  resolveWorkbenchHostPlatform,
+  resolveWorkbenchWindowChromeDataAttributes,
+} from '../chrome/workbenchPlatformChrome';
+export type {
+  WorkbenchHostPlatform,
+  WorkbenchWindowChromeMode,
+} from '../chrome/workbenchPlatformChrome';
+export {
+  WorkbenchWindowChromeControls,
+  shouldUseDarwinPlatformChrome,
+} from './WorkbenchWindowChromeControls';
+export type { WorkbenchWindowChromeControlsProps } from './WorkbenchWindowChromeControls';
+export { useWorkbenchModalViewState } from '../chrome/workbenchModalViewState';
+export type {
+  UseWorkbenchModalViewStateOptions,
+  WorkbenchModalViewState,
+} from '../chrome/workbenchModalViewState';
+export {
+  WorkbenchSidebarLayoutProvider,
+  useWorkbenchSidebarLayout,
+} from './useWorkbenchSidebarLayout';
+export type { WorkbenchSidebarLayoutProviderProps } from './useWorkbenchSidebarLayout';
+export type { WorkbenchSidebarLayoutContextValue } from './workbenchSidebarLayoutContext';
+export {
+  createWorkbenchStandaloneShellStateSnapshot,
+  useWorkbenchStandaloneShellContext,
+  type WorkbenchStandaloneShellStateChange,
+  type WorkbenchStandaloneShellStateChangeKind,
+  type WorkbenchStandaloneShellStateSnapshot,
+} from './workbenchStandaloneShellReactContext';
+export { useWorkbenchStandaloneShellStateSync } from './useWorkbenchStandaloneShellStateSync';
+export { WorkbenchShellTitleBarLayoutControls } from './WorkbenchShellTitleBarLayoutControls';
+export type { WorkbenchShellTitleBarLayoutControlsProps } from './WorkbenchShellTitleBarLayoutControls';
+export { useWorkbenchViewRouteState } from './workbenchViewRouteState';
+export type {
+  UseWorkbenchViewRouteStateOptions,
+  WorkbenchViewRouteBrowserWindow,
+  WorkbenchViewRouteCommitMode,
+  WorkbenchViewRouteState,
+} from './workbenchViewRouteState';
+export {
+  initializeWorkbenchShellState,
+  useWorkbenchShellState,
+  workbenchShellStateReducer,
+  DEFAULT_PRIMARY_SIDEBAR_SIZE_PX,
+  MAX_PRIMARY_SIDEBAR_SIZE_PX,
+  MIN_PRIMARY_SIDEBAR_SIZE_PX,
+} from './shellState';
+export type {
+  UseWorkbenchShellStateResult,
+  WorkbenchShellAction,
+  WorkbenchShellInitialState,
+  WorkbenchShellState,
+} from './shellState';

package/src/workbench/shell/shellPresets.ts

@@ -0,0 +1,36 @@
+export interface WorkbenchShellPresetManifestEntry<TId extends string = string> {
+  readonly id: TId;
+  readonly label: string;
+}
+
+/** One manifest entry per CSS preset file under `@workbench-kit/tokens/src/shell/`. */
+export const SHELL_PRESET_MANIFEST = [
+  { id: 'default', label: 'Default' },
+  { id: 'workbench', label: 'Compact' },
+  { id: 'airy', label: 'Comfortable' },
+] as const satisfies readonly WorkbenchShellPresetManifestEntry[];
+
+export type ShellPresetId = (typeof SHELL_PRESET_MANIFEST)[number]['id'];
+
+export const DEFAULT_SHELL_PRESET: ShellPresetId = 'default';
+
+export interface WorkbenchShellPresetOption<TId extends string = string> {
+  id: TId;
+  label: string;
+}
+
+export const SHELL_PRESET_OPTIONS: WorkbenchShellPresetOption<ShellPresetId>[] =
+  SHELL_PRESET_MANIFEST.map((entry) => ({ id: entry.id, label: entry.label }));
+
+const SHELL_PRESET_IDS = new Set<string>(SHELL_PRESET_MANIFEST.map((entry) => entry.id));
+
+export function isShellPresetId(value: string | null | undefined): value is ShellPresetId {
+  return value != null && SHELL_PRESET_IDS.has(value);
+}
+
+/**
+ * Applies shell density preset to a DOM root (typically `document.documentElement` or `.ide-root`).
+ */
+export function applyWorkbenchShellAttributes(root: HTMLElement, shellPreset: string): void {
+  root.dataset.shellPreset = shellPreset;
+}

package/src/workbench/{shellState.ts → shell/shellState.ts}

@@ -7,7 +7,7 @@ export interface WorkbenchShellInitialState<
   activeActivityId: TActivityId;
   isPrimarySidebarVisible?: boolean;
   isSettingsOpen?: boolean;
-  primarySidebarSizePercent?: number;
+  primarySidebarSizePx?: number;
   settingsCategoryId?: string;
   settingsScopeId?: string;
   settingsSearchValue?: string;
@@ -21,7 +21,7 @@ export interface WorkbenchShellState<
   activeActivityId: TActivityId;
   isPrimarySidebarVisible: boolean;
   isSettingsOpen: boolean;
-  primarySidebarSizePercent: number;
+  primarySidebarSizePx: number;
   settingsCategoryId: string;
   settingsScopeId: string;
   settingsSearchValue: string;
@@ -35,7 +35,7 @@ export type WorkbenchShellAction<
   | { activityId: TActivityId; type: 'activate-activity' }
   | { activityId: TActivityId; type: 'show-activity' }
   | { isOpen: boolean; type: 'set-settings-open' }
-  | { percent: number; type: 'set-primary-sidebar-size' }
+  | { sizePx: number; type: 'set-primary-sidebar-size' }
   | { settingsCategoryId: string; type: 'set-settings-category' }
   | { settingsScopeId: string; type: 'set-settings-scope' }
   | { settingsSearchValue: string; type: 'set-settings-search' }
@@ -53,7 +53,7 @@ export interface UseWorkbenchShellStateResult<
   closeSettings: () => void;
   dispatch: (action: WorkbenchShellAction<TActivityId, TTheme>) => void;
   openSettings: () => void;
-  setPrimarySidebarSizePercent: (percent: number) => void;
+  setPrimarySidebarSizePx: (sizePx: number) => void;
   setPrimarySidebarVisible: (isVisible: boolean) => void;
   setSettingsCategoryId: (settingsCategoryId: string) => void;
   setSettingsOpen: (isOpen: boolean) => void;
@@ -65,23 +65,20 @@ export interface UseWorkbenchShellStateResult<
   togglePrimarySidebar: () => void;
 }
 
-export const DEFAULT_PRIMARY_SIDEBAR_SIZE_PERCENT = 20;
-const MIN_PRIMARY_SIDEBAR_SIZE_PERCENT = 10;
-const MAX_PRIMARY_SIDEBAR_SIZE_PERCENT = 90;
+export const DEFAULT_PRIMARY_SIDEBAR_SIZE_PX = 260;
+export const MIN_PRIMARY_SIDEBAR_SIZE_PX = 200;
+export const MAX_PRIMARY_SIDEBAR_SIZE_PX = 480;
 
-function clampPrimarySidebarSizePercent(percent: number, fallback: number) {
-  if (!Number.isFinite(percent)) return fallback;
-  return Math.min(
-    MAX_PRIMARY_SIDEBAR_SIZE_PERCENT,
-    Math.max(MIN_PRIMARY_SIDEBAR_SIZE_PERCENT, percent),
-  );
+function clampPrimarySidebarSizePx(sizePx: number, fallback: number) {
+  if (!Number.isFinite(sizePx)) return fallback;
+  return Math.min(MAX_PRIMARY_SIDEBAR_SIZE_PX, Math.max(MIN_PRIMARY_SIDEBAR_SIZE_PX, sizePx));
 }
 
 export function initializeWorkbenchShellState<TActivityId extends string, TTheme extends string>({
   activeActivityId,
   isPrimarySidebarVisible = true,
   isSettingsOpen = false,
-  primarySidebarSizePercent = DEFAULT_PRIMARY_SIDEBAR_SIZE_PERCENT,
+  primarySidebarSizePx = DEFAULT_PRIMARY_SIDEBAR_SIZE_PX,
   settingsCategoryId = '',
   settingsScopeId = '',
   settingsSearchValue = '',
@@ -91,9 +88,9 @@ export function initializeWorkbenchShellState<TActivityId extends string, TTheme
     activeActivityId,
     isPrimarySidebarVisible,
     isSettingsOpen,
-    primarySidebarSizePercent: clampPrimarySidebarSizePercent(
-      primarySidebarSizePercent,
-      DEFAULT_PRIMARY_SIDEBAR_SIZE_PERCENT,
+    primarySidebarSizePx: clampPrimarySidebarSizePx(
+      primarySidebarSizePx,
+      DEFAULT_PRIMARY_SIDEBAR_SIZE_PX,
     ),
     settingsCategoryId,
     settingsScopeId,
@@ -136,10 +133,7 @@ export function workbenchShellStateReducer<TActivityId extends string, TTheme ex
   if (action.type === 'set-primary-sidebar-size') {
     return {
       ...state,
-      primarySidebarSizePercent: clampPrimarySidebarSizePercent(
-        action.percent,
-        state.primarySidebarSizePercent,
-      ),
+      primarySidebarSizePx: clampPrimarySidebarSizePx(action.sizePx, state.primarySidebarSizePx),
     };
   }
 
@@ -184,8 +178,7 @@ export function useWorkbenchShellState<TActivityId extends string, TTheme extend
     closeSettings: () => dispatch({ type: 'close-settings' }),
     dispatch,
     openSettings: () => dispatch({ type: 'open-settings' }),
-    setPrimarySidebarSizePercent: (percent) =>
-      dispatch({ percent, type: 'set-primary-sidebar-size' }),
+    setPrimarySidebarSizePx: (sizePx) => dispatch({ sizePx, type: 'set-primary-sidebar-size' }),
     setPrimarySidebarVisible: (isVisible) =>
       dispatch({ isVisible, type: 'set-primary-sidebar-visible' }),
     setSettingsCategoryId: (settingsCategoryId) =>

package/src/workbench/shell/shellViewModel.ts

@@ -0,0 +1,160 @@
+import type { ReactNode } from 'react';
+import type {
+  WorkbenchViewActivityBarItem,
+  WorkbenchViewActivityBarModel,
+  WorkbenchViewEditorTabItem,
+} from '@workbench-kit/platform';
+
+import type { EditorTab } from '../../primitives/workbench-editor';
+import type { ActivityBarItem } from './ActivityBar';
+import type { WorkbenchShellProps } from './WorkbenchShell';
+import type { WorkbenchViewSidebarItem, WorkbenchViewSidebarProps } from './WorkbenchViewSidebar';
+
+export type WorkbenchShellActivityBarViewModelProps = Omit<
+  WorkbenchShellProps['activityBar'],
+  'items' | 'secondaryItems'
+>;
+
+export type WorkbenchViewSidebarViewModelProps<TViewId extends string, TIcon = unknown> = Omit<
+  WorkbenchViewSidebarProps<TViewId, TIcon>,
+  'items'
+>;
+
+export interface CreateWorkbenchShellActivityBarFromViewModelInput<
+  TViewId extends string,
+  TIcon = unknown,
+> {
+  readonly activeId?: TViewId;
+  readonly activityBarProps?: WorkbenchShellActivityBarViewModelProps;
+  readonly model: WorkbenchViewActivityBarModel<TViewId, TIcon>;
+  readonly onSelect?:
+    ((viewId: TViewId, item: WorkbenchViewActivityBarItem<TViewId, TIcon>) => void) | undefined;
+  readonly renderIcon: (
+    icon: TIcon,
+    item: WorkbenchViewActivityBarItem<TViewId, TIcon>,
+  ) => ReactNode;
+}
+
+export interface CreateWorkbenchEditorTabsFromViewModelInput<
+  TViewId extends string,
+  TIcon extends EditorTab['icon'] = EditorTab['icon'],
+> {
+  readonly items: ReadonlyArray<WorkbenchViewEditorTabItem<TViewId, TIcon>>;
+  readonly resolveTitle?:
+    ((item: WorkbenchViewEditorTabItem<TViewId, TIcon>) => string | undefined) | undefined;
+}
+
+export interface CreateWorkbenchViewSidebarItemsFromViewModelInput<
+  TViewId extends string,
+  TIcon = unknown,
+> {
+  readonly model: WorkbenchViewActivityBarModel<TViewId, TIcon>;
+}
+
+export interface CreateWorkbenchViewSidebarFromViewModelInput<
+  TViewId extends string,
+  TIcon = unknown,
+> extends WorkbenchViewSidebarViewModelProps<TViewId, TIcon> {
+  readonly model: WorkbenchViewActivityBarModel<TViewId, TIcon>;
+}
+
+export function createWorkbenchShellActivityBarFromViewModel<
+  TViewId extends string,
+  TIcon = unknown,
+>({
+  activeId,
+  activityBarProps,
+  model,
+  onSelect,
+  renderIcon,
+}: CreateWorkbenchShellActivityBarFromViewModelInput<
+  TViewId,
+  TIcon
+>): WorkbenchShellProps['activityBar'] {
+  const sourceItemsById = new Map<string, WorkbenchViewActivityBarItem<TViewId, TIcon>>();
+  const { onItemActivate, ...restActivityBarProps } = activityBarProps ?? {};
+
+  const toActivityBarItem = (
+    item: WorkbenchViewActivityBarItem<TViewId, TIcon>,
+  ): ActivityBarItem => {
+    sourceItemsById.set(item.id, item);
+
+    return {
+      active: item.id === activeId,
+      icon: renderIcon(item.icon, item),
+      id: item.id,
+      label: item.label,
+      title: item.label,
+    };
+  };
+
+  const items = model.items.map(toActivityBarItem);
+  const secondaryItems = model.footerItems.map(toActivityBarItem);
+  const activityBar: WorkbenchShellProps['activityBar'] = {
+    ...restActivityBarProps,
+    items,
+    secondaryItems,
+  };
+
+  if (onItemActivate !== undefined || onSelect !== undefined) {
+    activityBar.onItemActivate = (item) => {
+      onItemActivate?.(item);
+
+      const sourceItem = sourceItemsById.get(item.id);
+      if (sourceItem !== undefined) {
+        onSelect?.(sourceItem.id, sourceItem);
+      }
+    };
+  }
+
+  return activityBar;
+}
+
+export function createWorkbenchEditorTabsFromViewModel<
+  TViewId extends string,
+  TIcon extends EditorTab['icon'] = EditorTab['icon'],
+>({
+  items,
+  resolveTitle,
+}: CreateWorkbenchEditorTabsFromViewModelInput<TViewId, TIcon>): ReadonlyArray<EditorTab> {
+  return items.map((item): EditorTab => {
+    const title = resolveTitle?.(item) ?? item.label;
+
+    return {
+      closable: item.closable,
+      dirty: item.dirty,
+      icon: item.icon,
+      id: item.id,
+      label: item.label,
+      title,
+    };
+  });
+}
+
+export function createWorkbenchViewSidebarItemsFromViewModel<
+  TViewId extends string,
+  TIcon = unknown,
+>({
+  model,
+}: CreateWorkbenchViewSidebarItemsFromViewModelInput<TViewId, TIcon>): ReadonlyArray<
+  WorkbenchViewSidebarItem<TViewId, TIcon>
+> {
+  return [...model.items, ...model.footerItems].map((item) => ({
+    icon: item.icon,
+    id: item.id,
+    label: item.label,
+  }));
+}
+
+export function createWorkbenchViewSidebarFromViewModel<TViewId extends string, TIcon = unknown>({
+  model,
+  ...sidebarProps
+}: CreateWorkbenchViewSidebarFromViewModelInput<TViewId, TIcon>): WorkbenchViewSidebarProps<
+  TViewId,
+  TIcon
+> {
+  return {
+    ...sidebarProps,
+    items: createWorkbenchViewSidebarItemsFromViewModel({ model }),
+  };
+}