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

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

@@ -1,126 +1,126 @@
-import './chrome/workbench-desktop-titlebar.css';
-import type { ReactNode } from 'react';
-import { cx } from '../utils/cx';
-import { useWorkbenchHostPlatform } from './WorkbenchPlatformContext';
-import {
-  shouldUseDarwinPlatformChrome,
-  WorkbenchWindowChromeControls,
-} from './WorkbenchWindowChromeControls';
-import {
-  resolveWorkbenchWindowChromeDataAttributes,
-  type WorkbenchWindowChromeMode,
-} from './workbenchPlatformChrome';
-
-export interface WorkbenchDesktopWindowControlsProps {
-  /** Defaults to `platform` so standalone controls match `WorkbenchDesktopTitleBar`. */
-  chrome?: WorkbenchWindowChromeMode | undefined;
-  closeLabel?: string | undefined;
-  isMaximized: boolean;
-  maximizeLabel?: string | undefined;
-  minimizeLabel?: string | undefined;
-  onClose: () => void;
-  onMinimize: () => void;
-  onToggleMaximized: () => void;
-  restoreLabel?: string | undefined;
-}
-
-/**
- * Minimize/maximize/close buttons for a frameless Electron (or similar) window.
- * Pass host IPC callbacks only — kit owns platform chrome markup and placement.
- * Marked `-webkit-app-region: no-drag` in CSS so clicks reach the buttons instead
- * of starting a window drag from the surrounding titlebar.
- */
-export function WorkbenchDesktopWindowControls({
-  chrome = 'platform',
-  closeLabel = 'Close window',
-  isMaximized,
-  maximizeLabel = 'Maximize window',
-  minimizeLabel = 'Minimize window',
-  onClose,
-  onMinimize,
-  onToggleMaximized,
-  restoreLabel = 'Restore window',
-}: WorkbenchDesktopWindowControlsProps) {
-  return (
-    <WorkbenchWindowChromeControls
-      chrome={chrome}
-      closeLabel={closeLabel}
-      isMaximized={isMaximized}
-      maximizeLabel={maximizeLabel}
-      minimizeLabel={minimizeLabel}
-      restoreLabel={restoreLabel}
-      surface="desktop-titlebar"
-      onClose={onClose}
-      onMinimize={onMinimize}
-      onToggleMaximized={onToggleMaximized}
-    />
-  );
-}
-
-export interface WorkbenchDesktopTitleBarProps {
-  /** Optional center area, e.g. a command-menu trigger. Omit to leave it empty. */
-  centerSlot?: ReactNode | undefined;
-  /**
-   * `platform` (default): darwin traffic lights / win32 caption buttons via host platform context.
-   * `generic`: maximize + close only (modal-like), no OS-specific placement.
-   */
-  chrome?: WorkbenchWindowChromeMode | undefined;
-  className?: string | undefined;
-  leading?: ReactNode | undefined;
-  trailing?: ReactNode | undefined;
-  /**
-   * Host-supplied window actions (Electron IPC callbacks). Omit on platforms that keep a native frame.
-   * Kit owns chrome markup; the host owns minimize / maximize / close side effects only.
-   */
-  windowControls?: WorkbenchDesktopWindowControlsProps | undefined;
-}
-
-/**
- * Drop-in content for `WorkbenchShellProps.titleBar` when the host window has no native
- * frame (`BrowserWindow({ frame: false })`). The whole bar is `-webkit-app-region: drag`
- * by default; `leading`/`centerSlot`/`trailing` are `no-drag` so their own controls stay
- * clickable.
- */
-export function WorkbenchDesktopTitleBar({
-  centerSlot,
-  chrome = 'platform',
-  className,
-  leading,
-  trailing,
-  windowControls,
-}: WorkbenchDesktopTitleBarProps) {
-  const platform = useWorkbenchHostPlatform();
-  const useDarwinChrome = shouldUseDarwinPlatformChrome(chrome, platform);
-  const chromeAttributes = resolveWorkbenchWindowChromeDataAttributes(chrome);
-
-  const controls = windowControls ? (
-    <WorkbenchWindowChromeControls
-      chrome={chrome}
-      closeLabel={windowControls.closeLabel ?? 'Close window'}
-      isMaximized={windowControls.isMaximized}
-      maximizeLabel={windowControls.maximizeLabel ?? 'Maximize window'}
-      minimizeLabel={windowControls.minimizeLabel ?? 'Minimize window'}
-      restoreLabel={windowControls.restoreLabel ?? 'Restore window'}
-      surface="desktop-titlebar"
-      onClose={windowControls.onClose}
-      onMinimize={windowControls.onMinimize}
-      onToggleMaximized={windowControls.onToggleMaximized}
-    />
-  ) : null;
-
-  return (
-    <div className={cx('ui-workbench-desktop-titlebar', className)} {...(chromeAttributes ?? {})}>
-      <div className="ui-workbench-desktop-titlebar__leading">
-        {useDarwinChrome ? controls : null}
-        {leading}
-      </div>
-      {centerSlot ? (
-        <div className="ui-workbench-desktop-titlebar__center">{centerSlot}</div>
-      ) : null}
-      <div className="ui-workbench-desktop-titlebar__trailing">
-        {trailing}
-        {!useDarwinChrome ? controls : null}
-      </div>
-    </div>
-  );
-}
+import '../chrome/workbench-desktop-titlebar.css';
+import type { ReactNode } from 'react';
+import { cx } from '../../utils/cx';
+import { useWorkbenchHostPlatform } from '../chrome/WorkbenchPlatformContext';
+import {
+  shouldUseDarwinPlatformChrome,
+  WorkbenchWindowChromeControls,
+} from './WorkbenchWindowChromeControls';
+import {
+  resolveWorkbenchWindowChromeDataAttributes,
+  type WorkbenchWindowChromeMode,
+} from '../chrome/workbenchPlatformChrome';
+
+export interface WorkbenchDesktopWindowControlsProps {
+  /** Defaults to `platform` so standalone controls match `WorkbenchDesktopTitleBar`. */
+  chrome?: WorkbenchWindowChromeMode;
+  closeLabel?: string;
+  isMaximized: boolean;
+  maximizeLabel?: string;
+  minimizeLabel?: string;
+  onClose: () => void;
+  onMinimize: () => void;
+  onToggleMaximized: () => void;
+  restoreLabel?: string;
+}
+
+/**
+ * Minimize/maximize/close buttons for a frameless Electron (or similar) window.
+ * Pass host IPC callbacks only — kit owns platform chrome markup and placement.
+ * Marked `-webkit-app-region: no-drag` in CSS so clicks reach the buttons instead
+ * of starting a window drag from the surrounding titlebar.
+ */
+export function WorkbenchDesktopWindowControls({
+  chrome = 'platform',
+  closeLabel = 'Close window',
+  isMaximized,
+  maximizeLabel = 'Maximize window',
+  minimizeLabel = 'Minimize window',
+  onClose,
+  onMinimize,
+  onToggleMaximized,
+  restoreLabel = 'Restore window',
+}: WorkbenchDesktopWindowControlsProps) {
+  return (
+    <WorkbenchWindowChromeControls
+      chrome={chrome}
+      closeLabel={closeLabel}
+      isMaximized={isMaximized}
+      maximizeLabel={maximizeLabel}
+      minimizeLabel={minimizeLabel}
+      restoreLabel={restoreLabel}
+      surface="desktop-titlebar"
+      onClose={onClose}
+      onMinimize={onMinimize}
+      onToggleMaximized={onToggleMaximized}
+    />
+  );
+}
+
+export interface WorkbenchDesktopTitleBarProps {
+  /** Optional center area, e.g. a command-menu trigger. Omit to leave it empty. */
+  centerSlot?: ReactNode;
+  /**
+   * `platform` (default): darwin traffic lights / win32 caption buttons via host platform context.
+   * `generic`: maximize + close only (modal-like), no OS-specific placement.
+   */
+  chrome?: WorkbenchWindowChromeMode;
+  className?: string;
+  leading?: ReactNode;
+  trailing?: ReactNode;
+  /**
+   * Host-supplied window actions (Electron IPC callbacks). Omit on platforms that keep a native frame.
+   * Kit owns chrome markup; the host owns minimize / maximize / close side effects only.
+   */
+  windowControls?: WorkbenchDesktopWindowControlsProps;
+}
+
+/**
+ * Drop-in content for `WorkbenchShellProps.titleBar` when the host window has no native
+ * frame (`BrowserWindow({ frame: false })`). The whole bar is `-webkit-app-region: drag`
+ * by default; `leading`/`centerSlot`/`trailing` are `no-drag` so their own controls stay
+ * clickable.
+ */
+export function WorkbenchDesktopTitleBar({
+  centerSlot,
+  chrome = 'platform',
+  className,
+  leading,
+  trailing,
+  windowControls,
+}: WorkbenchDesktopTitleBarProps) {
+  const platform = useWorkbenchHostPlatform();
+  const useDarwinChrome = shouldUseDarwinPlatformChrome(chrome, platform);
+  const chromeAttributes = resolveWorkbenchWindowChromeDataAttributes(chrome);
+
+  const controls = windowControls ? (
+    <WorkbenchWindowChromeControls
+      chrome={chrome}
+      closeLabel={windowControls.closeLabel ?? 'Close window'}
+      isMaximized={windowControls.isMaximized}
+      maximizeLabel={windowControls.maximizeLabel ?? 'Maximize window'}
+      minimizeLabel={windowControls.minimizeLabel ?? 'Minimize window'}
+      restoreLabel={windowControls.restoreLabel ?? 'Restore window'}
+      surface="desktop-titlebar"
+      onClose={windowControls.onClose}
+      onMinimize={windowControls.onMinimize}
+      onToggleMaximized={windowControls.onToggleMaximized}
+    />
+  ) : null;
+
+  return (
+    <div className={cx('ui-workbench-desktop-titlebar', className)} {...(chromeAttributes ?? {})}>
+      <div className="ui-workbench-desktop-titlebar__leading">
+        {useDarwinChrome ? controls : null}
+        {leading}
+      </div>
+      {centerSlot ? (
+        <div className="ui-workbench-desktop-titlebar__center">{centerSlot}</div>
+      ) : null}
+      <div className="ui-workbench-desktop-titlebar__trailing">
+        {trailing}
+        {!useDarwinChrome ? controls : null}
+      </div>
+    </div>
+  );
+}

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

@@ -1,192 +1,192 @@
-import { type CSSProperties, type ReactNode, useState } from 'react';
-import './chrome/workbench-layout-regions.css';
-import { cx } from '../utils/cx';
-import { ActivityBar, type ActivityBarProps, type ActivityBarItem } from './ActivityBar';
-import { SplitView } from './SplitView';
-import { StatusBar, type StatusBarItemModel, type StatusBarSectionModel } from './StatusBar';
-import { DEFAULT_PRIMARY_SIDEBAR_SIZE_PX } from './shellState';
-import { suppressNativeBrowserContextMenu } from './workbenchContextMenu';
-import { WorkbenchOverlaysProvider } from './workbenchOverlaysContext';
-
-export type WorkbenchShellActivityBarPosition = 'left' | 'top';
-
-export interface WorkbenchShellProps {
-  activityBar: Omit<ActivityBarProps, 'items'> & {
-    items: ActivityBarItem[];
-    visible?: boolean;
-  };
-  activityBarPosition?: WorkbenchShellActivityBarPosition | undefined;
-  auxiliarySidebar?: {
-    isVisible: boolean;
-    node: ReactNode;
-    className?: string;
-    style?: CSSProperties;
-  };
-  bottomPanel?: {
-    isVisible: boolean;
-    node: ReactNode;
-    className?: string;
-    style?: CSSProperties;
-  };
-  compactStatus?: boolean;
-  onStatusItemActivate?: (item: StatusBarItemModel) => void;
-  primarySidebar?: {
-    isVisible: boolean;
-    node: ReactNode;
-    onSizePxChange?: (sizePx: number) => void;
-    primarySizePx?: number;
-    minPrimarySizePx?: number;
-    maxPrimarySizePx?: number;
-    className?: string;
-    style?: CSSProperties;
-  };
-  rootClassName?: string;
-  rootStyle?: CSSProperties;
-  shellPreset?: string;
-  secondaryArea: ReactNode;
-  statusSections: StatusBarSectionModel[];
-  titleBar?: ReactNode;
-  overlays?: ReactNode;
-  theme?: string;
-  themePreference?: string;
-  themePreset?: string;
-}
-
-export function WorkbenchShell({
-  activityBar,
-  activityBarPosition = 'left',
-  auxiliarySidebar,
-  bottomPanel,
-  compactStatus = true,
-  onStatusItemActivate,
-  overlays,
-  primarySidebar,
-  rootClassName,
-  rootStyle,
-  shellPreset,
-  secondaryArea,
-  statusSections,
-  titleBar,
-  theme,
-  themePreference,
-  themePreset,
-}: WorkbenchShellProps) {
-  const [overlaysElement, setOverlaysElement] = useState<HTMLDivElement | null>(null);
-  const { visible: isActivityBarVisible = true, ...activityBarProps } = activityBar;
-  const isTopActivityBar = activityBarPosition === 'top';
-  const activityBarOrientation = isTopActivityBar ? 'horizontal' : 'vertical';
-
-  const primarySidebarSizePx =
-    primarySidebar?.onSizePxChange !== undefined
-      ? (primarySidebar.primarySizePx ?? DEFAULT_PRIMARY_SIDEBAR_SIZE_PX)
-      : undefined;
-
-  const isPrimarySidebarCollapsed = primarySidebar !== undefined && !primarySidebar.isVisible;
-  const isBottomPanelCollapsed = bottomPanel !== undefined && !bottomPanel.isVisible;
-  const isAuxiliarySidebarCollapsed = auxiliarySidebar !== undefined && !auxiliarySidebar.isVisible;
-
-  const editorArea = bottomPanel ? (
-    <SplitView
-      className={cx(
-        bottomPanel.className,
-        isBottomPanelCollapsed && 'ui-workbench-split-view--secondary-collapsed',
-      )}
-      defaultPrimarySizePercent={70}
-      maxPrimarySizePercent={90}
-      minPrimarySizePercent={30}
-      orientation="vertical"
-      primary={secondaryArea}
-      secondary={bottomPanel.node}
-    />
-  ) : (
-    secondaryArea
-  );
-
-  const centerArea =
-    auxiliarySidebar !== undefined ? (
-      <SplitView
-        className={cx(
-          auxiliarySidebar.className,
-          isAuxiliarySidebarCollapsed && 'ui-workbench-split-view--secondary-collapsed',
-        )}
-        defaultPrimarySizePercent={75}
-        maxPrimarySizePercent={90}
-        minPrimarySizePercent={50}
-        primary={editorArea}
-        secondary={auxiliarySidebar.node}
-      />
-    ) : (
-      editorArea
-    );
-
-  const body = primarySidebar ? (
-    <SplitView
-      className={cx(
-        primarySidebar.className,
-        isPrimarySidebarCollapsed && 'ui-workbench-split-view--primary-collapsed',
-      )}
-      defaultPrimarySizePx={primarySidebar.primarySizePx ?? DEFAULT_PRIMARY_SIDEBAR_SIZE_PX}
-      maxPrimarySizePx={primarySidebar.maxPrimarySizePx}
-      minPrimarySizePx={primarySidebar.minPrimarySizePx}
-      onPrimarySizePxChange={primarySidebar.onSizePxChange}
-      primary={primarySidebar.node}
-      primarySizePx={primarySidebarSizePx}
-      primarySizeUnit="pixels"
-      secondary={centerArea}
-    />
-  ) : (
-    centerArea
-  );
-
-  const activityBarNode = (
-    <ActivityBar
-      {...activityBarProps}
-      className={cx(
-        activityBarProps.className,
-        !isActivityBarVisible && 'ui-workbench-activity-bar--hidden',
-      )}
-      orientation={activityBarOrientation}
-    />
-  );
-
-  return (
-    <WorkbenchOverlaysProvider container={overlaysElement}>
-      <div
-        className={cx(
-          rootClassName,
-          isTopActivityBar && 'ide-root--activity-bar-top',
-          !isActivityBarVisible && 'ide-root--activity-bar-hidden',
-        )}
-        data-theme={theme}
-        data-theme-preference={themePreference}
-        data-theme-preset={themePreset}
-        data-shell-preset={shellPreset}
-        style={rootStyle}
-        onContextMenu={suppressNativeBrowserContextMenu}
-      >
-        {titleBar ? <header className="ui-workbench-titlebar">{titleBar}</header> : null}
-        {isTopActivityBar ? activityBarNode : null}
-        <div className="ide-workbench-surface">
-          <div
-            className={cx(
-              'ide-body',
-              isTopActivityBar && 'ide-body--activity-bar-top',
-              !isActivityBarVisible && 'ide-body--activity-bar-hidden',
-            )}
-          >
-            {!isTopActivityBar ? activityBarNode : null}
-            {body}
-          </div>
-          <StatusBar
-            compact={compactStatus}
-            sections={statusSections}
-            onItemActivate={onStatusItemActivate}
-          />
-          <div ref={setOverlaysElement} className="ide-workbench-overlays">
-            {overlays}
-          </div>
-        </div>
-      </div>
-    </WorkbenchOverlaysProvider>
-  );
-}
+import { type CSSProperties, type ReactNode, useState } from 'react';
+import '../chrome/workbench-layout-regions.css';
+import { cx } from '../../utils/cx';
+import { ActivityBar, type ActivityBarProps, type ActivityBarItem } from './ActivityBar';
+import { SplitView } from './SplitView';
+import { StatusBar, type StatusBarItemModel, type StatusBarSectionModel } from './StatusBar';
+import { DEFAULT_PRIMARY_SIDEBAR_SIZE_PX } from './shellState';
+import { suppressNativeBrowserContextMenu } from '../commands/workbenchContextMenu';
+import { WorkbenchOverlaysProvider } from '../chrome/workbenchOverlaysContext';
+
+export type WorkbenchShellActivityBarPosition = 'left' | 'top';
+
+export interface WorkbenchShellProps {
+  activityBar: Omit<ActivityBarProps, 'items'> & {
+    items: ActivityBarItem[];
+    visible?: boolean;
+  };
+  activityBarPosition?: WorkbenchShellActivityBarPosition;
+  auxiliarySidebar?: {
+    isVisible: boolean;
+    node: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+  };
+  bottomPanel?: {
+    isVisible: boolean;
+    node: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+  };
+  compactStatus?: boolean;
+  onStatusItemActivate?: (item: StatusBarItemModel) => void;
+  primarySidebar?: {
+    isVisible: boolean;
+    node: ReactNode;
+    onSizePxChange?: (sizePx: number) => void;
+    primarySizePx?: number;
+    minPrimarySizePx?: number;
+    maxPrimarySizePx?: number;
+    className?: string;
+    style?: CSSProperties;
+  };
+  rootClassName?: string;
+  rootStyle?: CSSProperties;
+  shellPreset?: string;
+  secondaryArea: ReactNode;
+  statusSections: StatusBarSectionModel[];
+  titleBar?: ReactNode;
+  overlays?: ReactNode;
+  theme?: string;
+  themePreference?: string;
+  themePreset?: string;
+}
+
+export function WorkbenchShell({
+  activityBar,
+  activityBarPosition = 'left',
+  auxiliarySidebar,
+  bottomPanel,
+  compactStatus = true,
+  onStatusItemActivate,
+  overlays,
+  primarySidebar,
+  rootClassName,
+  rootStyle,
+  shellPreset,
+  secondaryArea,
+  statusSections,
+  titleBar,
+  theme,
+  themePreference,
+  themePreset,
+}: WorkbenchShellProps) {
+  const [overlaysElement, setOverlaysElement] = useState<HTMLDivElement | null>(null);
+  const { visible: isActivityBarVisible = true, ...activityBarProps } = activityBar;
+  const isTopActivityBar = activityBarPosition === 'top';
+  const activityBarOrientation = isTopActivityBar ? 'horizontal' : 'vertical';
+
+  const primarySidebarSizePx =
+    primarySidebar?.onSizePxChange !== undefined
+      ? (primarySidebar.primarySizePx ?? DEFAULT_PRIMARY_SIDEBAR_SIZE_PX)
+      : undefined;
+
+  const isPrimarySidebarCollapsed = primarySidebar !== undefined && !primarySidebar.isVisible;
+  const isBottomPanelCollapsed = bottomPanel !== undefined && !bottomPanel.isVisible;
+  const isAuxiliarySidebarCollapsed = auxiliarySidebar !== undefined && !auxiliarySidebar.isVisible;
+
+  const editorArea = bottomPanel ? (
+    <SplitView
+      className={cx(
+        bottomPanel.className,
+        isBottomPanelCollapsed && 'ui-workbench-split-view--secondary-collapsed',
+      )}
+      defaultPrimarySizePercent={70}
+      maxPrimarySizePercent={90}
+      minPrimarySizePercent={30}
+      orientation="vertical"
+      primary={secondaryArea}
+      secondary={bottomPanel.node}
+    />
+  ) : (
+    secondaryArea
+  );
+
+  const centerArea =
+    auxiliarySidebar !== undefined ? (
+      <SplitView
+        className={cx(
+          auxiliarySidebar.className,
+          isAuxiliarySidebarCollapsed && 'ui-workbench-split-view--secondary-collapsed',
+        )}
+        defaultPrimarySizePercent={75}
+        maxPrimarySizePercent={90}
+        minPrimarySizePercent={50}
+        primary={editorArea}
+        secondary={auxiliarySidebar.node}
+      />
+    ) : (
+      editorArea
+    );
+
+  const body = primarySidebar ? (
+    <SplitView
+      className={cx(
+        primarySidebar.className,
+        isPrimarySidebarCollapsed && 'ui-workbench-split-view--primary-collapsed',
+      )}
+      defaultPrimarySizePx={primarySidebar.primarySizePx ?? DEFAULT_PRIMARY_SIDEBAR_SIZE_PX}
+      maxPrimarySizePx={primarySidebar.maxPrimarySizePx}
+      minPrimarySizePx={primarySidebar.minPrimarySizePx}
+      onPrimarySizePxChange={primarySidebar.onSizePxChange}
+      primary={primarySidebar.node}
+      primarySizePx={primarySidebarSizePx}
+      primarySizeUnit="pixels"
+      secondary={centerArea}
+    />
+  ) : (
+    centerArea
+  );
+
+  const activityBarNode = (
+    <ActivityBar
+      {...activityBarProps}
+      className={cx(
+        activityBarProps.className,
+        !isActivityBarVisible && 'ui-workbench-activity-bar--hidden',
+      )}
+      orientation={activityBarOrientation}
+    />
+  );
+
+  return (
+    <WorkbenchOverlaysProvider container={overlaysElement}>
+      <div
+        className={cx(
+          rootClassName,
+          isTopActivityBar && 'ide-root--activity-bar-top',
+          !isActivityBarVisible && 'ide-root--activity-bar-hidden',
+        )}
+        data-theme={theme}
+        data-theme-preference={themePreference}
+        data-theme-preset={themePreset}
+        data-shell-preset={shellPreset}
+        style={rootStyle}
+        onContextMenu={suppressNativeBrowserContextMenu}
+      >
+        {titleBar ? <header className="ui-workbench-titlebar">{titleBar}</header> : null}
+        {isTopActivityBar ? activityBarNode : null}
+        <div className="ide-workbench-surface">
+          <div
+            className={cx(
+              'ide-body',
+              isTopActivityBar && 'ide-body--activity-bar-top',
+              !isActivityBarVisible && 'ide-body--activity-bar-hidden',
+            )}
+          >
+            {!isTopActivityBar ? activityBarNode : null}
+            {body}
+          </div>
+          <StatusBar
+            compact={compactStatus}
+            sections={statusSections}
+            onItemActivate={onStatusItemActivate}
+          />
+          <div ref={setOverlaysElement} className="ide-workbench-overlays">
+            {overlays}
+          </div>
+        </div>
+      </div>
+    </WorkbenchOverlaysProvider>
+  );
+}