@workbench-kit/react 0.0.2-prototype.0.1.2 → 0.0.2-prototype.0.2.2

package/src/workbench/themePresets.ts

@@ -0,0 +1,191 @@
+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 }));
+
+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));
+
+export interface WorkbenchThemePresetSelection {
+  /** A built-in preset id, or a contributed theme id with a matching `mode`. */
+  lightPreset: string;
+  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,
+): string {
+  return resolvedTheme === 'light' ? selection.lightPreset : selection.darkPreset;
+}
+
+export interface WorkbenchThemeDocumentAttributes extends WorkbenchThemePresetSelection {
+  resolvedTheme: ResolvedWorkbenchTheme;
+  themePreference?: string | undefined;
+}
+
+export interface WorkbenchThemeProviderAttributes {
+  shellPreset?: string | undefined;
+  theme: ResolvedWorkbenchTheme;
+  themePreference?: string | undefined;
+  themePreset?: string | undefined;
+}
+
+export interface ResolveWorkbenchThemeProviderAttributesInput extends WorkbenchThemePresetSelection {
+  resolvedTheme: ResolvedWorkbenchTheme;
+  shellPreset?: string | undefined;
+  themePreference?: string | undefined;
+}
+
+export function resolveWorkbenchThemeProviderAttributes({
+  darkPreset,
+  lightPreset,
+  resolvedTheme,
+  shellPreset,
+  themePreference,
+}: ResolveWorkbenchThemeProviderAttributesInput): WorkbenchThemeProviderAttributes {
+  return {
+    shellPreset,
+    theme: resolvedTheme,
+    themePreference,
+    themePreset: resolveActiveThemePreset(resolvedTheme, {
+      darkPreset,
+      lightPreset,
+    }),
+  };
+}
+
+export function applyWorkbenchThemeProviderAttributes(
+  root: HTMLElement,
+  attributes: WorkbenchThemeProviderAttributes,
+): void {
+  root.dataset.theme = attributes.theme;
+
+  if (attributes.themePreference === undefined) {
+    delete root.dataset.themePreference;
+  } else {
+    root.dataset.themePreference = attributes.themePreference;
+  }
+
+  if (attributes.themePreset === undefined || attributes.themePreset === '') {
+    delete root.dataset.themePreset;
+  } else {
+    root.dataset.themePreset = attributes.themePreset;
+  }
+
+  if (attributes.shellPreset === undefined) {
+    delete root.dataset.shellPreset;
+  } else {
+    applyWorkbenchShellAttributes(root, attributes.shellPreset);
+  }
+}
+
+/**
+ * Applies resolved theme mode and active preset to a DOM root (typically `document.documentElement`).
+ */
+export function applyWorkbenchThemeAttributes(
+  root: HTMLElement,
+  attributes: WorkbenchThemeDocumentAttributes,
+): void {
+  root.dataset.theme = attributes.resolvedTheme;
+
+  if (attributes.themePreference === undefined) {
+    delete root.dataset.themePreference;
+  } else {
+    root.dataset.themePreference = attributes.themePreference;
+  }
+
+  root.dataset.themePreset = resolveActiveThemePreset(attributes.resolvedTheme, attributes);
+}
+
+export interface WorkbenchAppearanceSettings {
+  /** VS Code: workbench.preferredDarkColorTheme (color preset id for dark mode). */
+  darkPreset: string;
+  /** VS Code: workbench.preferredLightColorTheme (color preset id for light mode). */
+  lightPreset: string;
+  /** Workbench layout metrics preset (`data-shell-preset`); orthogonal to Color Theme. */
+  shellPreset: string;
+  /** VS Code: window.autoDetectColorScheme + forced light/dark. */
+  themePreference: WorkbenchColorSchemePreference;
+}
+
+/**
+ * Applies color scheme preference and light/dark presets to a DOM root (typically `document.documentElement`).
+ * Returns the resolved attributes so callers can derive the active preset id without
+ * recomputing `resolveWorkbenchTheme` themselves.
+ */
+export function applyWorkbenchAppearance(
+  root: HTMLElement,
+  settings: WorkbenchAppearanceSettings,
+): WorkbenchThemeDocumentAttributes {
+  const attributes: WorkbenchThemeDocumentAttributes = {
+    darkPreset: settings.darkPreset,
+    lightPreset: settings.lightPreset,
+    resolvedTheme: resolveWorkbenchTheme(settings.themePreference),
+    themePreference: settings.themePreference,
+  };
+
+  applyWorkbenchThemeAttributes(root, attributes);
+
+  applyWorkbenchShellAttributes(root, settings.shellPreset);
+
+  return attributes;
+}

package/src/workbench/useDeferredWorkbenchMount.ts

@@ -0,0 +1,71 @@
+import { startTransition, useEffect, useRef, useState } from 'react';
+
+export interface UseDeferredWorkbenchMountOptions {
+  readonly delayMs?: number | undefined;
+  readonly disabled?: boolean | undefined;
+  readonly initialReady?: boolean | undefined;
+}
+
+export function useDeferredWorkbenchMount({
+  delayMs = 50,
+  disabled = false,
+  initialReady = false,
+}: UseDeferredWorkbenchMountOptions = {}): boolean {
+  const [isReady, setIsReady] = useState(() => disabled || initialReady);
+  const loadGenerationRef = useRef(0);
+
+  useEffect(() => {
+    if (disabled) {
+      loadGenerationRef.current += 1;
+      setIsReady(true);
+      return undefined;
+    }
+
+    if (isReady) {
+      return undefined;
+    }
+
+    const loadGeneration = ++loadGenerationRef.current;
+    let cancelFrame: (() => void) | undefined;
+    let timeoutHandle: ReturnType<typeof setTimeout> | undefined;
+
+    const deferReady = () => {
+      if (loadGenerationRef.current !== loadGeneration) {
+        return;
+      }
+
+      timeoutHandle = setTimeout(
+        () => {
+          if (loadGenerationRef.current !== loadGeneration) {
+            return;
+          }
+
+          startTransition(() => {
+            if (loadGenerationRef.current === loadGeneration) {
+              setIsReady(true);
+            }
+          });
+        },
+        Math.max(0, delayMs),
+      );
+    };
+
+    if (typeof window !== 'undefined' && typeof window.requestAnimationFrame === 'function') {
+      const animationFrame = window.requestAnimationFrame(deferReady);
+      cancelFrame = () => window.cancelAnimationFrame(animationFrame);
+    } else {
+      const frameTimer = setTimeout(deferReady, 0);
+      cancelFrame = () => clearTimeout(frameTimer);
+    }
+
+    return () => {
+      loadGenerationRef.current += 1;
+      cancelFrame?.();
+      if (timeoutHandle !== undefined) {
+        clearTimeout(timeoutHandle);
+      }
+    };
+  }, [delayMs, disabled, isReady]);
+
+  return isReady;
+}

package/src/workbench/useEditorTabsStripDnd.ts

@@ -0,0 +1,262 @@
+import { useCallback, useMemo, useRef, useState } from 'react';
+import type { DragEvent as ReactDragEvent } from 'react';
+
+import type { EditorTabDropPosition, EditorTabsProps } from '../primitives/workbench-editor';
+import {
+  EDITOR_TAB_DRAG_DATA_TYPE,
+  isEditorTabsScrollerEventTarget,
+  readEditorTabDragPayload,
+  resolveEditorTabDropTarget,
+  resolveEditorTabStripDropTarget,
+  type EditorTabDragPayload,
+} from './editor-tabs-dnd';
+
+interface EditorTabLike {
+  readonly id: string;
+}
+
+export interface UseEditorTabsStripDndOptions<TTab extends EditorTabLike> {
+  readonly groupId: string;
+  readonly onMoveTab: (input: { tabId: string; targetIndex: number }) => void;
+  readonly onSelectTab?: ((tabId: string) => void) | undefined;
+  readonly tabs: readonly TTab[];
+}
+
+export interface UseEditorTabsStripDndResult {
+  readonly getTabDropPosition: (tabId: string) => EditorTabDropPosition | undefined;
+  readonly editorTabsDndProps: Pick<
+    EditorTabsProps,
+    | 'draggableTabs'
+    | 'onDragOver'
+    | 'onDrop'
+    | 'onTabDragEnd'
+    | 'onTabDragLeave'
+    | 'onTabDragOver'
+    | 'onTabDragStart'
+    | 'onTabDrop'
+  >;
+}
+
+export function useEditorTabsStripDnd<TTab extends EditorTabLike>({
+  groupId,
+  onMoveTab,
+  onSelectTab,
+  tabs,
+}: UseEditorTabsStripDndOptions<TTab>): UseEditorTabsStripDndResult {
+  const draggedTabRef = useRef<EditorTabDragPayload | null>(null);
+  const [tabDropTarget, setTabDropTarget] = useState<{
+    position: EditorTabDropPosition;
+    tabId: string;
+  } | null>(null);
+
+  const getDraggedTab = useCallback((event?: ReactDragEvent<HTMLElement>) => {
+    if (draggedTabRef.current) {
+      return draggedTabRef.current;
+    }
+
+    return event ? readEditorTabDragPayload(event.dataTransfer) : null;
+  }, []);
+
+  const clearDragFeedback = useCallback(() => {
+    setTabDropTarget(null);
+  }, []);
+
+  const finishDrag = useCallback(() => {
+    draggedTabRef.current = null;
+    clearDragFeedback();
+  }, [clearDragFeedback]);
+
+  const handleTabDragStart = useCallback(
+    (tabId: string, event: ReactDragEvent<HTMLElement>) => {
+      draggedTabRef.current = { groupId, tabId };
+      event.dataTransfer.effectAllowed = 'move';
+      event.dataTransfer.setData(EDITOR_TAB_DRAG_DATA_TYPE, JSON.stringify({ groupId, tabId }));
+      onSelectTab?.(tabId);
+    },
+    [groupId, onSelectTab],
+  );
+
+  const handleTabDragEnd = useCallback(() => {
+    finishDrag();
+  }, [finishDrag]);
+
+  const handleTabDragOver = useCallback(
+    (targetTabId: string, event: ReactDragEvent<HTMLElement>) => {
+      const draggedTab = getDraggedTab(event);
+      if (!draggedTab) {
+        setTabDropTarget(null);
+        return;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+      if (draggedTab.tabId === targetTabId) {
+        event.dataTransfer.dropEffect = 'none';
+        clearDragFeedback();
+        return;
+      }
+
+      event.dataTransfer.dropEffect = 'move';
+      const dropTarget = resolveEditorTabDropTarget({
+        clientX: event.clientX,
+        draggedTab,
+        groupId,
+        tabs,
+        target: event.currentTarget,
+        targetTabId,
+      });
+      if (!dropTarget) {
+        event.dataTransfer.dropEffect = 'none';
+        setTabDropTarget(null);
+        return;
+      }
+
+      setTabDropTarget({
+        position: dropTarget.position,
+        tabId: dropTarget.tabId,
+      });
+    },
+    [clearDragFeedback, getDraggedTab, groupId, tabs],
+  );
+
+  const handleTabDrop = useCallback(
+    (targetTabId: string, event: ReactDragEvent<HTMLElement>) => {
+      const draggedTab = getDraggedTab(event);
+      if (!draggedTab) {
+        setTabDropTarget(null);
+        return;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+      if (draggedTab.tabId === targetTabId) {
+        finishDrag();
+        return;
+      }
+
+      const dropTarget = resolveEditorTabDropTarget({
+        clientX: event.clientX,
+        draggedTab,
+        groupId,
+        preferredPosition:
+          tabDropTarget?.tabId === targetTabId ? tabDropTarget.position : undefined,
+        tabs,
+        target: event.currentTarget,
+        targetTabId,
+      });
+      if (!dropTarget) {
+        finishDrag();
+        return;
+      }
+
+      onMoveTab({
+        tabId: draggedTab.tabId,
+        targetIndex: dropTarget.targetIndex,
+      });
+      finishDrag();
+    },
+    [finishDrag, getDraggedTab, groupId, onMoveTab, tabDropTarget, tabs],
+  );
+
+  const handleTabDragLeave = useCallback(
+    (targetTabId: string, event: ReactDragEvent<HTMLElement>) => {
+      const nextTarget = event.relatedTarget;
+      if (nextTarget instanceof Node && event.currentTarget.contains(nextTarget)) {
+        return;
+      }
+
+      setTabDropTarget((current) => (current?.tabId === targetTabId ? null : current));
+    },
+    [],
+  );
+
+  const handleTabStripDragOver = useCallback(
+    (event: ReactDragEvent<HTMLElement>) => {
+      const draggedTab = getDraggedTab(event);
+      if (!draggedTab || !isEditorTabsScrollerEventTarget(event.target)) {
+        return;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+      const dropTarget = resolveEditorTabStripDropTarget({
+        draggedTab,
+        groupId,
+        tabs,
+      });
+      if (!dropTarget) {
+        event.dataTransfer.dropEffect = 'none';
+        setTabDropTarget(null);
+        return;
+      }
+
+      event.dataTransfer.dropEffect = 'move';
+      setTabDropTarget({
+        position: dropTarget.position,
+        tabId: dropTarget.tabId,
+      });
+    },
+    [getDraggedTab, groupId, tabs],
+  );
+
+  const handleTabStripDrop = useCallback(
+    (event: ReactDragEvent<HTMLElement>) => {
+      const draggedTab = getDraggedTab(event);
+      if (!draggedTab || !isEditorTabsScrollerEventTarget(event.target)) {
+        return;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+      const dropTarget = resolveEditorTabStripDropTarget({
+        draggedTab,
+        groupId,
+        tabs,
+      });
+      if (!dropTarget) {
+        finishDrag();
+        return;
+      }
+
+      onMoveTab({
+        tabId: draggedTab.tabId,
+        targetIndex: dropTarget.targetIndex,
+      });
+      finishDrag();
+    },
+    [finishDrag, getDraggedTab, groupId, onMoveTab, tabs],
+  );
+
+  const getTabDropPosition = useCallback(
+    (tabId: string): EditorTabDropPosition | undefined =>
+      tabDropTarget?.tabId === tabId ? tabDropTarget.position : undefined,
+    [tabDropTarget],
+  );
+
+  const editorTabsDndProps = useMemo(
+    (): UseEditorTabsStripDndResult['editorTabsDndProps'] => ({
+      draggableTabs: true,
+      onDragOver: handleTabStripDragOver,
+      onDrop: handleTabStripDrop,
+      onTabDragEnd: handleTabDragEnd,
+      onTabDragLeave: handleTabDragLeave,
+      onTabDragOver: handleTabDragOver,
+      onTabDragStart: handleTabDragStart,
+      onTabDrop: handleTabDrop,
+    }),
+    [
+      handleTabDragEnd,
+      handleTabDragLeave,
+      handleTabDragOver,
+      handleTabDragStart,
+      handleTabDrop,
+      handleTabStripDragOver,
+      handleTabStripDrop,
+    ],
+  );
+
+  return {
+    editorTabsDndProps,
+    getTabDropPosition,
+  };
+}

package/src/workbench/useWorkbenchAppearanceDocumentSync.tsx

@@ -0,0 +1,17 @@
+import { useLayoutEffect } from 'react';
+
+import { applyWorkbenchAppearance, type WorkbenchAppearanceSettings } from './themePresets';
+
+/**
+ * Keeps `document.documentElement` theme attributes aligned with appearance settings.
+ * Use with host-owned settings state (e.g. settings store) for runtime theme changes.
+ */
+export function useWorkbenchAppearanceDocumentSync(settings: WorkbenchAppearanceSettings): void {
+  useLayoutEffect(() => {
+    if (typeof document === 'undefined') {
+      return;
+    }
+
+    applyWorkbenchAppearance(document.documentElement, settings);
+  }, [settings.darkPreset, settings.lightPreset, settings.shellPreset, settings.themePreference]);
+}

package/src/workbench/useWorkbenchEditorTabContextMenu.tsx

@@ -0,0 +1,66 @@
+import { useCallback, useState, type MouseEvent as ReactMouseEvent, type ReactNode } from 'react';
+
+import { ContextMenu } from '../overlay/ContextMenu';
+import {
+  createWorkbenchStandaloneEditorTabContextMenuItems,
+  type WorkbenchStandaloneEditorTabLike,
+} from './editorTabContextMenu';
+
+export interface UseWorkbenchEditorTabContextMenuOptions {
+  readonly onClose: (tabId: string) => void;
+  readonly onCloseAll?: (() => void) | undefined;
+  readonly onCloseOthers?: ((tabId: string) => void) | undefined;
+  readonly onSelectTab?: ((tabId: string) => void) | undefined;
+  readonly tabs: readonly WorkbenchStandaloneEditorTabLike[];
+}
+
+export interface UseWorkbenchEditorTabContextMenuResult {
+  readonly contextMenu: ReactNode;
+  readonly onTabContextMenu: (tabId: string, event: ReactMouseEvent<HTMLElement>) => void;
+}
+
+export function useWorkbenchEditorTabContextMenu({
+  onClose,
+  onCloseAll,
+  onCloseOthers,
+  onSelectTab,
+  tabs,
+}: UseWorkbenchEditorTabContextMenuOptions): UseWorkbenchEditorTabContextMenuResult {
+  const [menuState, setMenuState] = useState<{
+    tabId: string;
+    x: number;
+    y: number;
+  } | null>(null);
+
+  const onTabContextMenu = useCallback(
+    (tabId: string, event: ReactMouseEvent<HTMLElement>) => {
+      event.preventDefault();
+      event.stopPropagation();
+      onSelectTab?.(tabId);
+      setMenuState({ tabId, x: event.clientX, y: event.clientY });
+    },
+    [onSelectTab],
+  );
+
+  const contextMenu =
+    menuState && tabs.some((tab) => tab.id === menuState.tabId) ? (
+      <ContextMenu
+        ariaLabel="Editor tab menu"
+        items={createWorkbenchStandaloneEditorTabContextMenuItems({
+          onClose,
+          onCloseAll,
+          onCloseOthers,
+          tabId: menuState.tabId,
+          tabs,
+        })}
+        x={menuState.x}
+        y={menuState.y}
+        onClose={() => setMenuState(null)}
+      />
+    ) : null;
+
+  return {
+    contextMenu,
+    onTabContextMenu,
+  };
+}