@workbench-kit/react 0.0.2-prototype.0.2.4 → 0.0.2-prototype.0.2.41

package/src/workbench/shell/activity-bar.css

@@ -32,6 +32,53 @@
   border-top: 1px solid var(--vscode-panel-border, var(--color-border));
 }
 
+.workbench-bottom-panel__header {
+  display: flex;
+  flex-shrink: 0;
+  align-items: stretch;
+  gap: 0;
+  min-height: 28px;
+  border-bottom: 1px solid var(--vscode-panel-border, var(--color-border));
+  background: var(--vscode-panel-background, var(--color-surface));
+}
+
+.workbench-bottom-panel__tab {
+  appearance: none;
+  border: none;
+  background: transparent;
+  color: var(--color-text-muted);
+  font: inherit;
+  font-size: 12px;
+  padding: 4px 12px;
+  cursor: pointer;
+}
+
+.workbench-bottom-panel__tab:hover {
+  color: var(--color-text);
+}
+
+.workbench-bottom-panel__tab--active {
+  color: var(--color-text);
+  box-shadow: inset 0 -2px 0 var(--color-accent, var(--color-primary));
+}
+
+.workbench-bottom-panel__body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 8px 12px;
+}
+
+.workbench-bottom-panel__view {
+  min-height: 0;
+}
+
+.workbench-bottom-panel__empty {
+  color: var(--color-text-muted);
+  font-size: 12px;
+  padding: 8px 12px;
+}
+
 .ui-workbench-activity-bar__item {
   --ui-button-width: var(--workbench-activity-bar-item-size);
   --ui-button-min-width: 0;

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

@@ -70,13 +70,14 @@ export function sortActivityBarItems<T extends { id: string }>(
 ): T[] {
   const order = itemOrder?.length ? itemOrder : fallbackOrder;
   const orderIndex = new Map(order.map((id, index) => [id, index]));
+  const contributionIndex = new Map(items.map((item, index) => [item.id, index]));
 
   return [...items].sort((left, right) => {
     const leftIndex = orderIndex.get(left.id);
     const rightIndex = orderIndex.get(right.id);
 
     if (leftIndex === undefined && rightIndex === undefined) {
-      return left.id.localeCompare(right.id);
+      return (contributionIndex.get(left.id) ?? 0) - (contributionIndex.get(right.id) ?? 0);
     }
 
     if (leftIndex === undefined) return 1;

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

@@ -1,4 +1,4 @@
-export { ActivityBar, ACTIVITY_BAR_DRAG_DATA_TYPE } from './ActivityBar';
+export { ActivityBar } from './ActivityBar';
 export {
   hasWorkbenchSidebarViewPlacementDrag,
   readWorkbenchSidebarViewPlacementDrag,
@@ -64,22 +64,23 @@ export type {
   WorkbenchViewEditorEmptyStateSurfaceProps,
   WorkbenchViewEditorProps,
 } from './WorkbenchViewEditor';
-export { WorkbenchEditorTabs } from './WorkbenchEditorTabs';
-export type { WorkbenchEditorTabsProps } from './WorkbenchEditorTabs';
+export { WorkbenchEditorTabs } from '../editor/WorkbenchEditorTabs';
+export type { WorkbenchEditorTabsProps } from '../editor/WorkbenchEditorTabs';
 export {
   createWorkbenchStandaloneEditorTabCommandContext,
   createWorkbenchStandaloneEditorTabContextMenuItems,
   isWorkbenchEditorTabClosable,
-} from './editorTabContextMenu';
+} from '../editor/editorTabContextMenu';
 export type {
   CreateWorkbenchStandaloneEditorTabCommandContextInput,
+  CreateWorkbenchStandaloneEditorTabContextMenuItemsInput,
   WorkbenchStandaloneEditorTabLike,
-} from './editorTabContextMenu';
-export { useWorkbenchEditorTabContextMenu } from './useWorkbenchEditorTabContextMenu';
+} from '../editor/editorTabContextMenu';
+export { useWorkbenchEditorTabContextMenu } from '../editor/useWorkbenchEditorTabContextMenu';
 export type {
   UseWorkbenchEditorTabContextMenuOptions,
   UseWorkbenchEditorTabContextMenuResult,
-} from './useWorkbenchEditorTabContextMenu';
+} from '../editor/useWorkbenchEditorTabContextMenu';
 export { WorkbenchViewSidebar } from './WorkbenchViewSidebar';
 export type { WorkbenchViewSidebarItem, WorkbenchViewSidebarProps } from './WorkbenchViewSidebar';
 export {
@@ -90,23 +91,29 @@ export type {
   WorkbenchDesktopTitleBarProps,
   WorkbenchDesktopWindowControlsProps,
 } from './WorkbenchDesktopTitleBar';
-export { WorkbenchPlatformProvider, useWorkbenchHostPlatform } from './WorkbenchPlatformContext';
-export type { WorkbenchPlatformProviderProps } from './WorkbenchPlatformContext';
+export {
+  WorkbenchPlatformProvider,
+  useWorkbenchHostPlatform,
+} from '../chrome/WorkbenchPlatformContext';
+export type { WorkbenchPlatformProviderProps } from '../chrome/WorkbenchPlatformContext';
 export {
   resolveWorkbenchHostPlatform,
   resolveWorkbenchWindowChromeDataAttributes,
-} from './workbenchPlatformChrome';
-export type { WorkbenchHostPlatform, WorkbenchWindowChromeMode } from './workbenchPlatformChrome';
+} from '../chrome/workbenchPlatformChrome';
+export type {
+  WorkbenchHostPlatform,
+  WorkbenchWindowChromeMode,
+} from '../chrome/workbenchPlatformChrome';
 export {
   WorkbenchWindowChromeControls,
   shouldUseDarwinPlatformChrome,
 } from './WorkbenchWindowChromeControls';
 export type { WorkbenchWindowChromeControlsProps } from './WorkbenchWindowChromeControls';
-export { useWorkbenchModalViewState } from './workbenchModalViewState';
+export { useWorkbenchModalViewState } from '../chrome/workbenchModalViewState';
 export type {
   UseWorkbenchModalViewStateOptions,
   WorkbenchModalViewState,
-} from './workbenchModalViewState';
+} from '../chrome/workbenchModalViewState';
 export {
   WorkbenchSidebarLayoutProvider,
   useWorkbenchSidebarLayout,

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

@@ -5,7 +5,7 @@ import type {
   WorkbenchViewEditorTabItem,
 } from '@workbench-kit/platform';
 
-import type { EditorTab } from '../primitives/workbench-editor';
+import type { EditorTab } from '../../primitives/workbench-editor';
 import type { ActivityBarItem } from './ActivityBar';
 import type { WorkbenchShellProps } from './WorkbenchShell';
 import type { WorkbenchViewSidebarItem, WorkbenchViewSidebarProps } from './WorkbenchViewSidebar';
@@ -24,8 +24,8 @@ export interface CreateWorkbenchShellActivityBarFromViewModelInput<
   TViewId extends string,
   TIcon = unknown,
 > {
-  readonly activeId?: TViewId | undefined;
-  readonly activityBarProps?: WorkbenchShellActivityBarViewModelProps | undefined;
+  readonly activeId?: TViewId;
+  readonly activityBarProps?: WorkbenchShellActivityBarViewModelProps;
   readonly model: WorkbenchViewActivityBarModel<TViewId, TIcon>;
   readonly onSelect?:
     ((viewId: TViewId, item: WorkbenchViewActivityBarItem<TViewId, TIcon>) => void) | undefined;

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

@@ -6,8 +6,8 @@ import type {
 } from '@workbench-kit/contracts';
 import type { ReactNode } from 'react';
 import type { StatusBarSectionModel } from './StatusBar';
-import type { WorkbenchShellCommandContext } from './commands';
-import type { WorkspaceFile } from './workspace';
+import type { WorkbenchShellCommandContext } from '../commands/commands';
+import type { WorkspaceFile } from '../workspace';
 
 export type WorkbenchTheme = 'light' | 'dark' | (string & {});
 
@@ -99,3 +99,15 @@ export type WorkbenchStandaloneBootstrapEvent<TActivityId extends string = strin
   | { type: 'activity-change'; payload: WorkbenchActivityChangeEvent<TActivityId> }
   | { type: 'status-message'; message: string }
   | { type: 'error'; error: Error };
+
+export * from './WorkbenchStandaloneShell';
+export {
+  createWorkbenchStandaloneShellStateSnapshot,
+  useWorkbenchStandaloneShellContext,
+} from './workbenchStandaloneShellReactContext';
+export type {
+  WorkbenchStandaloneShellStateChange,
+  WorkbenchStandaloneShellStateChangeKind,
+  WorkbenchStandaloneShellStateSnapshot,
+} from './workbenchStandaloneShellReactContext';
+export { useWorkbenchStandaloneShellStateSync } from './useWorkbenchStandaloneShellStateSync';

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

@@ -1,9 +1,9 @@
 import { startTransition, useEffect, useRef, useState } from 'react';
 
 export interface UseDeferredWorkbenchMountOptions {
-  readonly delayMs?: number | undefined;
-  readonly disabled?: boolean | undefined;
-  readonly initialReady?: boolean | undefined;
+  readonly delayMs?: number;
+  readonly disabled?: boolean;
+  readonly initialReady?: boolean;
 }
 
 export function useDeferredWorkbenchMount({

package/src/workbench/{useWorkbenchAppearanceDocumentSync.tsx → shell/useWorkbenchAppearanceDocumentSync.tsx}

@@ -1,6 +1,6 @@
 import { useLayoutEffect } from 'react';
 
-import { applyWorkbenchAppearance, type WorkbenchAppearanceSettings } from './themePresets';
+import { applyWorkbenchAppearance, type WorkbenchAppearanceSettings } from '../theme/themePresets';
 
 /**
  * Keeps `document.documentElement` theme attributes aligned with appearance settings.

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

@@ -22,7 +22,7 @@ export interface WorkbenchSidebarActionBarDropTarget {
 
 export interface UseWorkbenchSidebarActionBarDndOptions {
   readonly itemIds: readonly string[];
-  readonly onReorder?: ((itemIds: string[]) => void) | undefined;
+  readonly onReorder?: (itemIds: string[]) => void;
   readonly orientation?: ActivityBarOrientation;
   readonly placementDraggable?: boolean;
   readonly reorderable?: boolean;

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

@@ -20,9 +20,9 @@ export type WorkbenchSidebarViewPlacementDropZoneProps = HTMLAttributes<HTMLElem
 };
 
 export interface UseWorkbenchSidebarViewPlacementDropZoneOptions {
-  readonly acceptViewForDrop?: ((viewId: string) => boolean) | undefined;
+  readonly acceptViewForDrop?: (viewId: string) => boolean;
   readonly onDropView: (viewId: string) => void;
-  readonly zoneId?: string | undefined;
+  readonly zoneId?: string;
 }
 
 function chainDragHandler<E extends DragEvent<HTMLElement>>(

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

@@ -38,9 +38,3 @@ export function toWorkbenchSidebarLayoutContextValue<TViewId extends string>(
 ): WorkbenchSidebarLayoutContextStore {
   return value as unknown as WorkbenchSidebarLayoutContextStore;
 }
-
-export function fromWorkbenchSidebarLayoutContextValue<TViewId extends string>(
-  value: WorkbenchSidebarLayoutContextStore,
-): WorkbenchSidebarLayoutContextValue<TViewId> {
-  return value as unknown as WorkbenchSidebarLayoutContextValue<TViewId>;
-}

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

@@ -20,11 +20,11 @@ export interface WorkbenchViewRouteBrowserWindow {
 
 export interface UseWorkbenchViewRouteStateOptions<TViewId extends string> {
   readonly defaultViewId: TViewId;
-  readonly discardedParams?: ReadonlyArray<string> | undefined;
+  readonly discardedParams?: ReadonlyArray<string>;
   readonly isViewId: (value: string | null) => value is TViewId;
-  readonly routeWindow?: WorkbenchViewRouteBrowserWindow | undefined;
-  readonly tabsParam?: string | undefined;
-  readonly viewParam?: string | undefined;
+  readonly routeWindow?: WorkbenchViewRouteBrowserWindow;
+  readonly tabsParam?: string;
+  readonly viewParam?: string;
 }
 
 export interface WorkbenchViewRouteState<

package/src/workbench/{WorkbenchThemeProvider.tsx → theme/WorkbenchThemeProvider.tsx}

@@ -1,8 +1,8 @@
 import { useEffect, useMemo, type ComponentPropsWithoutRef, type ReactNode } from 'react';
-import './chrome/workbench-host.css';
-import './chrome/workbench-platform-chrome.css';
+import '../chrome/workbench-host.css';
+import '../chrome/workbench-platform-chrome.css';
 
-import { WorkbenchPlatformProvider } from './WorkbenchPlatformContext';
+import { WorkbenchPlatformProvider } from '../chrome/WorkbenchPlatformContext';
 import {
   applyWorkbenchThemeProviderAttributes,
   type WorkbenchThemeProviderAttributes,
@@ -11,7 +11,7 @@ import type { ResolvedWorkbenchTheme } from './theme';
 import {
   resolveWorkbenchHostPlatform,
   type WorkbenchHostPlatform,
-} from './workbenchPlatformChrome';
+} from '../chrome/workbenchPlatformChrome';
 
 export interface WorkbenchThemeProviderProps extends Omit<
   ComponentPropsWithoutRef<'div'>,

package/src/workbench/{theme.ts → theme/theme.ts}

@@ -1,5 +1,5 @@
 import { useSyncExternalStore } from 'react';
-import type { WorkbenchTheme } from './standalone';
+import type { WorkbenchTheme } from '../shell/standalone';
 
 export type ResolvedWorkbenchTheme = 'dark' | 'light';
 

package/src/workbench/{themePresets.ts → theme/themePresets.ts}

@@ -1,58 +1,43 @@
-import { resolveWorkbenchTheme, type ResolvedWorkbenchTheme } from './theme';
-import type { WorkbenchTheme } from './standalone';
-import { applyWorkbenchShellAttributes } from './shellPresets';
-
-export interface WorkbenchThemePresetManifestEntry<TId extends string = string> {
-  readonly id: TId;
-  readonly label: string;
-}
-
-/** One manifest entry per CSS preset file under `@workbench-kit/tokens/src/themes/`. */
-export const LIGHT_THEME_PRESET_MANIFEST = [
-  { id: 'orange', label: 'Light Orange' },
-  { id: 'skyblue', label: 'Sky Blue' },
-  { id: 'light-plus', label: 'Light+' },
-] as const satisfies readonly WorkbenchThemePresetManifestEntry[];
-
-export const DARK_THEME_PRESET_MANIFEST = [
-  { id: 'navy', label: 'Deep Navy' },
-  { id: 'purple', label: 'Purple' },
-  { id: 'modern', label: 'Modern Dark' },
-  { id: 'dark-plus', label: 'Dark+' },
-  { id: 'hc-black', label: 'High Contrast Black' },
-] as const satisfies readonly WorkbenchThemePresetManifestEntry[];
-
-export type LightThemePresetId = (typeof LIGHT_THEME_PRESET_MANIFEST)[number]['id'];
-export type DarkThemePresetId = (typeof DARK_THEME_PRESET_MANIFEST)[number]['id'];
-export type ThemePresetId = LightThemePresetId | DarkThemePresetId;
-
-export const DEFAULT_LIGHT_THEME_PRESET: LightThemePresetId = 'skyblue';
-export const DEFAULT_DARK_THEME_PRESET: DarkThemePresetId = 'purple';
-
-export type WorkbenchColorSchemePreference = 'system' | WorkbenchTheme;
-
-export const WORKBENCH_COLOR_SCHEME_OPTIONS: WorkbenchThemePresetOption<WorkbenchColorSchemePreference>[] =
-  [
-    { id: 'system', label: 'System' },
-    { id: 'light', label: 'Light' },
-    { id: 'dark', label: 'Dark' },
-  ];
-
-export interface WorkbenchThemePresetOption<TId extends string = string> {
-  id: TId;
-  label: string;
-}
-
-export const LIGHT_THEME_PRESET_OPTIONS: WorkbenchThemePresetOption<LightThemePresetId>[] =
-  LIGHT_THEME_PRESET_MANIFEST.map((entry) => ({ id: entry.id, label: entry.label }));
+import {
+  DARK_THEME_PRESET_MANIFEST,
+  DARK_THEME_PRESET_OPTIONS,
+  DEFAULT_DARK_THEME_PRESET,
+  DEFAULT_LIGHT_THEME_PRESET,
+  LIGHT_THEME_PRESET_MANIFEST,
+  LIGHT_THEME_PRESET_OPTIONS,
+  WORKBENCH_COLOR_SCHEME_OPTIONS,
+  isDarkThemePresetId,
+  isLightThemePresetId,
+  type DarkThemePresetId,
+  type LightThemePresetId,
+  type ThemePresetId,
+  type WorkbenchColorSchemePreference,
+  type WorkbenchThemePresetManifestEntry,
+  type WorkbenchThemePresetOption,
+} from '@workbench-kit/contracts/theme-presets';
 
-export const DARK_THEME_PRESET_OPTIONS: WorkbenchThemePresetOption<DarkThemePresetId>[] =
-  DARK_THEME_PRESET_MANIFEST.map((entry) => ({ id: entry.id, label: entry.label }));
-
-const LIGHT_THEME_PRESET_IDS = new Set<string>(
-  LIGHT_THEME_PRESET_MANIFEST.map((entry) => entry.id),
-);
-const DARK_THEME_PRESET_IDS = new Set<string>(DARK_THEME_PRESET_MANIFEST.map((entry) => entry.id));
+import { resolveWorkbenchTheme, type ResolvedWorkbenchTheme } from './theme';
+import { applyWorkbenchShellAttributes } from '../shell/shellPresets';
+
+export {
+  DARK_THEME_PRESET_MANIFEST,
+  DARK_THEME_PRESET_OPTIONS,
+  DEFAULT_DARK_THEME_PRESET,
+  DEFAULT_LIGHT_THEME_PRESET,
+  LIGHT_THEME_PRESET_MANIFEST,
+  LIGHT_THEME_PRESET_OPTIONS,
+  WORKBENCH_COLOR_SCHEME_OPTIONS,
+  isDarkThemePresetId,
+  isLightThemePresetId,
+};
+export type {
+  DarkThemePresetId,
+  LightThemePresetId,
+  ThemePresetId,
+  WorkbenchColorSchemePreference,
+  WorkbenchThemePresetManifestEntry,
+  WorkbenchThemePresetOption,
+};
 
 export interface WorkbenchThemePresetSelection {
   /** A built-in preset id, or a contributed theme id with a matching `mode`. */
@@ -60,16 +45,6 @@ export interface WorkbenchThemePresetSelection {
   darkPreset: string;
 }
 
-export function isLightThemePresetId(
-  value: string | null | undefined,
-): value is LightThemePresetId {
-  return value != null && LIGHT_THEME_PRESET_IDS.has(value);
-}
-
-export function isDarkThemePresetId(value: string | null | undefined): value is DarkThemePresetId {
-  return value != null && DARK_THEME_PRESET_IDS.has(value);
-}
-
 export function resolveActiveThemePreset(
   resolvedTheme: ResolvedWorkbenchTheme,
   selection: WorkbenchThemePresetSelection,

package/src/workbench/views/command-list-density.css

@@ -0,0 +1,36 @@
+/* Compact density overrides for Workbench command lists. Keep before command-list.css. */
+
+.ui-workbench-command-list {
+  padding: 0;
+}
+
+.ui-workbench-command-item,
+.ui-workbench-command-item.ui-button {
+  --ui-button-height: auto;
+  --ui-button-padding: 7px 10px;
+  --ui-button-border-radius: 0;
+  border-radius: 0;
+  height: auto;
+  padding: 7px 10px;
+}
+
+.ui-workbench-command-group-shell__nav {
+  padding: 0;
+}
+
+.ui-workbench-command-group-shell__nav-link {
+  border-radius: 0;
+}
+
+.ui-workbench-command-group-shell__content {
+  padding: 0;
+}
+
+.ui-workbench-command-group-shell__section {
+  padding: 0;
+}
+
+.ui-workbench-command-group-shell__section-header {
+  min-height: 28px;
+  padding: 4px 10px;
+}

package/src/workbench/views/command-list.css

@@ -1,3 +1,5 @@
+@import './command-list-density.css';
+
 .ui-workbench-command-list {
   max-height: min(430px, calc(100vh - 190px));
   overflow: auto;

package/src/workbench/views/extensions-sidebar.css

@@ -112,6 +112,8 @@
 
 .workbench-extensions-sidebar__actions {
   display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
   justify-content: flex-end;
   width: 100%;
 }

package/src/workbench/views/view-hosts.css

@@ -3,19 +3,19 @@
 .workbench-search-view,
 .workbench-chat-view,
 .workbench-primary-sidebar .ui-sidebar-view,
-.shell-react-primary-sidebar {
+.shell-react-sidebar-host {
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
   min-height: 0;
 }
 
-.shell-react-primary-sidebar > section {
+.shell-react-sidebar-host > section {
   /* section is semantic only; view host frame carries sidebar flex sizing */
   display: contents;
 }
 
-.shell-react-primary-sidebar [data-view-host-id] {
+.shell-react-sidebar-host [data-view-host-id] {
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;

package/src/workbench/workspace/WorkspaceEditorPanel.tsx

@@ -19,7 +19,7 @@ import {
   createWorkbenchEditorTabListMenuEntries,
   createWorkbenchEditorTabMenuEntries,
   type WorkbenchEditorCommandContext,
-} from '../commands';
+} from '../commands/commands';
 import { fileNameOfPath } from './path';
 import { WorkspaceEditor, type WorkspaceEditorTheme } from './WorkspaceEditor';
 import { WorkspaceFileIcon } from './WorkspaceFileIcon';