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

package/src/workbench/{keyboard.ts → commands/keyboard.ts}

@@ -1,53 +1,53 @@
-import { useEffect } from 'react';
-
-/** Set on document.body when an editor that handles Ctrl+S has focus. */
-export const WORKBENCH_ACTIVE_EDITOR_SAVE_SHORTCUT_ATTRIBUTE = 'data-active-editor-save-shortcut';
-
-interface SaveShortcutEvent {
-  ctrlKey: boolean;
-  key: string;
-  metaKey: boolean;
-}
-
-export function isWorkbenchSaveShortcutEvent(event: SaveShortcutEvent): boolean {
-  return event.key.toLowerCase() === 's' && (event.ctrlKey || event.metaKey);
-}
-
-export function hasWorkbenchModalDialogOpen(): boolean {
-  return Boolean(document.querySelector('[role="dialog"][aria-modal="true"]'));
-}
-
-/** Disables the browser's native right-click context menu globally. */
-export function useWorkbenchNativeContextMenuGuard(): void {
-  useEffect(() => {
-    const handleContextMenu = (event: MouseEvent) => {
-      event.preventDefault();
-    };
-
-    window.addEventListener('contextmenu', handleContextMenu);
-    return () => window.removeEventListener('contextmenu', handleContextMenu);
-  }, []);
-}
-
-/**
- * Prevents the browser's native "Save as" dialog on Ctrl+S / Cmd+S everywhere
- * except when an active editor (marked with WORKBENCH_ACTIVE_EDITOR_SAVE_SHORTCUT_ATTRIBUTE)
- * has focus and no modal is open — in that case the editor handles the shortcut itself.
- */
-export function useWorkbenchNativeSaveGuard(): void {
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.defaultPrevented || !isWorkbenchSaveShortcutEvent(event)) return;
-
-      const editorActive = document.body.hasAttribute(
-        WORKBENCH_ACTIVE_EDITOR_SAVE_SHORTCUT_ATTRIBUTE,
-      );
-      if (editorActive && !hasWorkbenchModalDialogOpen()) return;
-
-      event.preventDefault();
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, []);
-}
+import { useEffect } from 'react';
+
+/** Set on document.body when an editor that handles Ctrl+S has focus. */
+export const WORKBENCH_ACTIVE_EDITOR_SAVE_SHORTCUT_ATTRIBUTE = 'data-active-editor-save-shortcut';
+
+interface SaveShortcutEvent {
+  ctrlKey: boolean;
+  key: string;
+  metaKey: boolean;
+}
+
+export function isWorkbenchSaveShortcutEvent(event: SaveShortcutEvent): boolean {
+  return event.key.toLowerCase() === 's' && (event.ctrlKey || event.metaKey);
+}
+
+export function hasWorkbenchModalDialogOpen(): boolean {
+  return Boolean(document.querySelector('[role="dialog"][aria-modal="true"]'));
+}
+
+/** Disables the browser's native right-click context menu globally. */
+export function useWorkbenchNativeContextMenuGuard(): void {
+  useEffect(() => {
+    const handleContextMenu = (event: MouseEvent) => {
+      event.preventDefault();
+    };
+
+    window.addEventListener('contextmenu', handleContextMenu);
+    return () => window.removeEventListener('contextmenu', handleContextMenu);
+  }, []);
+}
+
+/**
+ * Prevents the browser's native "Save as" dialog on Ctrl+S / Cmd+S everywhere
+ * except when an active editor (marked with WORKBENCH_ACTIVE_EDITOR_SAVE_SHORTCUT_ATTRIBUTE)
+ * has focus and no modal is open — in that case the editor handles the shortcut itself.
+ */
+export function useWorkbenchNativeSaveGuard(): void {
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.defaultPrevented || !isWorkbenchSaveShortcutEvent(event)) return;
+
+      const editorActive = document.body.hasAttribute(
+        WORKBENCH_ACTIVE_EDITOR_SAVE_SHORTCUT_ATTRIBUTE,
+      );
+      if (editorActive && !hasWorkbenchModalDialogOpen()) return;
+
+      event.preventDefault();
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, []);
+}

package/src/workbench/{workbenchContextMenu.ts → commands/workbenchContextMenu.ts}

@@ -1,18 +1,18 @@
-import type { MouseEvent } from 'react';
-
-const NATIVE_CONTEXT_MENU_SELECTOR =
-  'input, textarea, select, [contenteditable="true"], .monaco-editor, .workspace-editor__monaco, .cm-editor';
-
-export function shouldAllowNativeBrowserContextMenu(target: EventTarget | null): boolean {
-  if (!(target instanceof Element)) {
-    return false;
-  }
-
-  return Boolean(target.closest(NATIVE_CONTEXT_MENU_SELECTOR));
-}
-
-export function suppressNativeBrowserContextMenu(event: MouseEvent<HTMLElement>) {
-  if (!shouldAllowNativeBrowserContextMenu(event.target)) {
-    event.preventDefault();
-  }
-}
+import type { MouseEvent } from 'react';
+
+const NATIVE_CONTEXT_MENU_SELECTOR =
+  'input, textarea, select, [contenteditable="true"], .monaco-editor, .workspace-editor__monaco, .cm-editor';
+
+export function shouldAllowNativeBrowserContextMenu(target: EventTarget | null): boolean {
+  if (!(target instanceof Element)) {
+    return false;
+  }
+
+  return Boolean(target.closest(NATIVE_CONTEXT_MENU_SELECTOR));
+}
+
+export function suppressNativeBrowserContextMenu(event: MouseEvent<HTMLElement>) {
+  if (!shouldAllowNativeBrowserContextMenu(event.target)) {
+    event.preventDefault();
+  }
+}

package/src/workbench/{WorkbenchEditorTabs.tsx → editor/WorkbenchEditorTabs.tsx}

@@ -1,52 +1,52 @@
-import { EditorTabs, type EditorTabsProps } from '../primitives/workbench-editor';
-import { useWorkbenchEditorTabContextMenu } from './useWorkbenchEditorTabContextMenu';
-
-export interface WorkbenchEditorTabsProps extends EditorTabsProps {
-  /**
-   * Optional bulk close. Defaults to calling `onClose` for every closable tab.
-   */
-  readonly onCloseAll?: (() => void) | undefined;
-  /**
-   * Optional close-others. Defaults to calling `onClose` for every other closable tab.
-   */
-  readonly onCloseOthers?: ((tabId: string) => void) | undefined;
-}
-
-/**
- * Editor tab strip with a built-in Close / Close others / Close all context menu.
- * Intended for `WorkbenchStandaloneShell` secondary areas that own tab state in the host.
- * Tabs with `closable: false` keep Close disabled and are skipped by Close others / Close all.
- */
-export function WorkbenchEditorTabs({
-  onClose,
-  onCloseAll,
-  onCloseOthers,
-  onSelect,
-  onTabContextMenu,
-  tabs,
-  ...props
-}: WorkbenchEditorTabsProps) {
-  const tabContextMenu = useWorkbenchEditorTabContextMenu({
-    onClose: onClose ?? (() => undefined),
-    onCloseAll,
-    onCloseOthers,
-    onSelectTab: onSelect,
-    tabs,
-  });
-
-  return (
-    <>
-      <EditorTabs
-        {...props}
-        onClose={onClose}
-        onSelect={onSelect}
-        onTabContextMenu={(tabId, event) => {
-          tabContextMenu.onTabContextMenu(tabId, event);
-          onTabContextMenu?.(tabId, event);
-        }}
-        tabs={tabs}
-      />
-      {tabContextMenu.contextMenu}
-    </>
-  );
-}
+import { EditorTabs, type EditorTabsProps } from '../../primitives/workbench-editor';
+import { useWorkbenchEditorTabContextMenu } from './useWorkbenchEditorTabContextMenu';
+
+export interface WorkbenchEditorTabsProps extends EditorTabsProps {
+  /**
+   * Optional bulk close. Defaults to calling `onClose` for every closable tab.
+   */
+  readonly onCloseAll?: (() => void) | undefined;
+  /**
+   * Optional close-others. Defaults to calling `onClose` for every other closable tab.
+   */
+  readonly onCloseOthers?: ((tabId: string) => void) | undefined;
+}
+
+/**
+ * Editor tab strip with a built-in Close / Close others / Close all context menu.
+ * Intended for `WorkbenchStandaloneShell` secondary areas that own tab state in the host.
+ * Tabs with `closable: false` keep Close disabled and are skipped by Close others / Close all.
+ */
+export function WorkbenchEditorTabs({
+  onClose,
+  onCloseAll,
+  onCloseOthers,
+  onSelect,
+  onTabContextMenu,
+  tabs,
+  ...props
+}: WorkbenchEditorTabsProps) {
+  const tabContextMenu = useWorkbenchEditorTabContextMenu({
+    onClose: onClose ?? (() => undefined),
+    onCloseAll,
+    onCloseOthers,
+    onSelectTab: onSelect,
+    tabs,
+  });
+
+  return (
+    <>
+      <EditorTabs
+        {...props}
+        onClose={onClose}
+        onSelect={onSelect}
+        onTabContextMenu={(tabId, event) => {
+          tabContextMenu.onTabContextMenu(tabId, event);
+          onTabContextMenu?.(tabId, event);
+        }}
+        tabs={tabs}
+      />
+      {tabContextMenu.contextMenu}
+    </>
+  );
+}

package/src/workbench/{editor-tabs-dnd.ts → editor/editor-tabs-dnd.ts}

@@ -1,162 +1,162 @@
-import type { EditorTabDropPosition } from '../primitives/workbench-editor';
-
-export const EDITOR_TAB_DRAG_DATA_TYPE = 'application/x-workbench-kit-editor-tab' as const;
-
-export interface EditorTabDragPayload {
-  readonly groupId: string;
-  readonly tabId: string;
-}
-
-export interface EditorTabDropTarget {
-  readonly position: EditorTabDropPosition;
-  readonly tabId: string;
-  readonly targetIndex: number;
-}
-
-interface EditorDropTargetElement {
-  getBoundingClientRect(): Pick<DOMRect, 'left' | 'width'>;
-}
-
-interface EditorTabLike {
-  readonly id: string;
-}
-
-export function readEditorTabDragPayload(
-  dataTransfer: Pick<DataTransfer, 'getData'>,
-): EditorTabDragPayload | null {
-  try {
-    const rawPayload = dataTransfer.getData(EDITOR_TAB_DRAG_DATA_TYPE);
-    if (!rawPayload) {
-      return null;
-    }
-
-    const payload = JSON.parse(rawPayload) as Partial<EditorTabDragPayload>;
-    if (typeof payload.groupId !== 'string' || typeof payload.tabId !== 'string') {
-      return null;
-    }
-
-    return {
-      groupId: payload.groupId,
-      tabId: payload.tabId,
-    };
-  } catch {
-    return null;
-  }
-}
-
-export function isEditorTabsScrollerEventTarget(target: EventTarget | null): boolean {
-  if (!(target instanceof Element)) {
-    return false;
-  }
-
-  if (target.closest('.ui-editor-tabs__tab')) {
-    return false;
-  }
-
-  return Boolean(target.closest('.ui-editor-tabs__scroller'));
-}
-
-export function resolveEditorTabDropTarget<TTab extends EditorTabLike>({
-  clientX,
-  draggedTab,
-  groupId,
-  preferredPosition,
-  tabs,
-  target,
-  targetTabId,
-}: {
-  readonly clientX: number;
-  readonly draggedTab: EditorTabDragPayload;
-  readonly groupId: string;
-  readonly preferredPosition?: EditorTabDropPosition | undefined;
-  readonly tabs: readonly TTab[];
-  readonly target: EditorDropTargetElement;
-  readonly targetTabId: string;
-}): EditorTabDropTarget | null {
-  const targetTabIndex = tabs.findIndex((tab) => tab.id === targetTabId);
-  if (targetTabIndex < 0) {
-    return null;
-  }
-
-  const position = preferredPosition ?? getEditorTabDropPosition(target, clientX);
-  const targetIndex = position === 'after' ? targetTabIndex + 1 : targetTabIndex;
-  if (isEditorTabMoveNoop({ draggedTab, groupId, tabs, targetIndex })) {
-    return null;
-  }
-
-  return {
-    position,
-    tabId: targetTabId,
-    targetIndex,
-  };
-}
-
-export function resolveEditorTabStripDropTarget<TTab extends EditorTabLike>({
-  draggedTab,
-  groupId,
-  tabs,
-}: {
-  readonly draggedTab: EditorTabDragPayload;
-  readonly groupId: string;
-  readonly tabs: readonly TTab[];
-}): EditorTabDropTarget | null {
-  const lastTab = tabs[tabs.length - 1];
-  if (!lastTab) {
-    return null;
-  }
-
-  const targetIndex = tabs.length;
-  if (isEditorTabMoveNoop({ draggedTab, groupId, tabs, targetIndex })) {
-    return null;
-  }
-
-  return {
-    position: 'after',
-    tabId: lastTab.id,
-    targetIndex,
-  };
-}
-
-export function isEditorTabMoveNoop<TTab extends EditorTabLike>({
-  draggedTab,
-  groupId,
-  tabs,
-  targetIndex,
-}: {
-  readonly draggedTab: EditorTabDragPayload;
-  readonly groupId: string;
-  readonly tabs: readonly TTab[];
-  readonly targetIndex: number;
-}): boolean {
-  if (draggedTab.groupId !== groupId) {
-    return false;
-  }
-
-  const sourceIndex = tabs.findIndex((tab) => tab.id === draggedTab.tabId);
-  return sourceIndex >= 0 && (targetIndex === sourceIndex || targetIndex === sourceIndex + 1);
-}
-
-export function getEditorTabDropPosition(
-  target: EditorDropTargetElement,
-  clientX: number,
-): EditorTabDropPosition {
-  const rect = target.getBoundingClientRect();
-  if (rect.width <= 0) {
-    return 'after';
-  }
-
-  return clientX < rect.left + rect.width / 2 ? 'before' : 'after';
-}
-
-export function normalizeEditorTabReorderIndex({
-  index,
-  sourceIndex,
-  tabCount,
-}: {
-  index: number;
-  sourceIndex: number;
-  tabCount: number;
-}): number {
-  const clampedIndex = Math.max(0, Math.min(index, tabCount));
-  return clampedIndex > sourceIndex ? clampedIndex - 1 : clampedIndex;
-}
+import type { EditorTabDropPosition } from '../../primitives/workbench-editor';
+
+export const EDITOR_TAB_DRAG_DATA_TYPE = 'application/x-workbench-kit-editor-tab' as const;
+
+export interface EditorTabDragPayload {
+  readonly groupId: string;
+  readonly tabId: string;
+}
+
+export interface EditorTabDropTarget {
+  readonly position: EditorTabDropPosition;
+  readonly tabId: string;
+  readonly targetIndex: number;
+}
+
+interface EditorDropTargetElement {
+  getBoundingClientRect(): Pick<DOMRect, 'left' | 'width'>;
+}
+
+interface EditorTabLike {
+  readonly id: string;
+}
+
+export function readEditorTabDragPayload(
+  dataTransfer: Pick<DataTransfer, 'getData'>,
+): EditorTabDragPayload | null {
+  try {
+    const rawPayload = dataTransfer.getData(EDITOR_TAB_DRAG_DATA_TYPE);
+    if (!rawPayload) {
+      return null;
+    }
+
+    const payload = JSON.parse(rawPayload) as Partial<EditorTabDragPayload>;
+    if (typeof payload.groupId !== 'string' || typeof payload.tabId !== 'string') {
+      return null;
+    }
+
+    return {
+      groupId: payload.groupId,
+      tabId: payload.tabId,
+    };
+  } catch {
+    return null;
+  }
+}
+
+export function isEditorTabsScrollerEventTarget(target: EventTarget | null): boolean {
+  if (!(target instanceof Element)) {
+    return false;
+  }
+
+  if (target.closest('.ui-editor-tabs__tab')) {
+    return false;
+  }
+
+  return Boolean(target.closest('.ui-editor-tabs__scroller'));
+}
+
+export function resolveEditorTabDropTarget<TTab extends EditorTabLike>({
+  clientX,
+  draggedTab,
+  groupId,
+  preferredPosition,
+  tabs,
+  target,
+  targetTabId,
+}: {
+  readonly clientX: number;
+  readonly draggedTab: EditorTabDragPayload;
+  readonly groupId: string;
+  readonly preferredPosition?: EditorTabDropPosition | undefined;
+  readonly tabs: readonly TTab[];
+  readonly target: EditorDropTargetElement;
+  readonly targetTabId: string;
+}): EditorTabDropTarget | null {
+  const targetTabIndex = tabs.findIndex((tab) => tab.id === targetTabId);
+  if (targetTabIndex < 0) {
+    return null;
+  }
+
+  const position = preferredPosition ?? getEditorTabDropPosition(target, clientX);
+  const targetIndex = position === 'after' ? targetTabIndex + 1 : targetTabIndex;
+  if (isEditorTabMoveNoop({ draggedTab, groupId, tabs, targetIndex })) {
+    return null;
+  }
+
+  return {
+    position,
+    tabId: targetTabId,
+    targetIndex,
+  };
+}
+
+export function resolveEditorTabStripDropTarget<TTab extends EditorTabLike>({
+  draggedTab,
+  groupId,
+  tabs,
+}: {
+  readonly draggedTab: EditorTabDragPayload;
+  readonly groupId: string;
+  readonly tabs: readonly TTab[];
+}): EditorTabDropTarget | null {
+  const lastTab = tabs[tabs.length - 1];
+  if (!lastTab) {
+    return null;
+  }
+
+  const targetIndex = tabs.length;
+  if (isEditorTabMoveNoop({ draggedTab, groupId, tabs, targetIndex })) {
+    return null;
+  }
+
+  return {
+    position: 'after',
+    tabId: lastTab.id,
+    targetIndex,
+  };
+}
+
+export function isEditorTabMoveNoop<TTab extends EditorTabLike>({
+  draggedTab,
+  groupId,
+  tabs,
+  targetIndex,
+}: {
+  readonly draggedTab: EditorTabDragPayload;
+  readonly groupId: string;
+  readonly tabs: readonly TTab[];
+  readonly targetIndex: number;
+}): boolean {
+  if (draggedTab.groupId !== groupId) {
+    return false;
+  }
+
+  const sourceIndex = tabs.findIndex((tab) => tab.id === draggedTab.tabId);
+  return sourceIndex >= 0 && (targetIndex === sourceIndex || targetIndex === sourceIndex + 1);
+}
+
+export function getEditorTabDropPosition(
+  target: EditorDropTargetElement,
+  clientX: number,
+): EditorTabDropPosition {
+  const rect = target.getBoundingClientRect();
+  if (rect.width <= 0) {
+    return 'after';
+  }
+
+  return clientX < rect.left + rect.width / 2 ? 'before' : 'after';
+}
+
+export function normalizeEditorTabReorderIndex({
+  index,
+  sourceIndex,
+  tabCount,
+}: {
+  index: number;
+  sourceIndex: number;
+  tabCount: number;
+}): number {
+  const clampedIndex = Math.max(0, Math.min(index, tabCount));
+  return clampedIndex > sourceIndex ? clampedIndex - 1 : clampedIndex;
+}