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

package/src/workbench/command-palette/command-palette.css

@@ -0,0 +1,156 @@
+.ui-workbench-command-palette-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 250;
+  display: grid;
+  align-items: start;
+  justify-items: center;
+  padding: 7vh 24px 24px;
+  background: rgba(0, 0, 0, 0.2);
+}
+
+.ui-workbench-command-palette {
+  width: min(640px, calc(100vw - 48px));
+  max-height: min(560px, calc(100vh - 96px));
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-elevated);
+  box-shadow: var(--shadow-lg);
+}
+
+.ui-workbench-command-palette__header {
+  min-height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 0 8px 0 12px;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.ui-workbench-command-palette__title {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--color-text);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.ui-workbench-command-palette__close {
+  --ui-icon-button-width: var(--workbench-command-palette-close-size);
+  --ui-icon-button-height: var(--workbench-command-palette-close-size);
+  --ui-icon-button-flex-shrink: 0;
+  --ui-icon-button-padding: 0;
+  --ui-icon-button-border: 0;
+  --ui-icon-button-border-radius: var(--radius-sm);
+  --ui-icon-button-color: var(--color-text-muted);
+  --ui-icon-button-background: transparent;
+  --ui-icon-button-hover-color: var(--color-text);
+  --ui-icon-button-hover-background: var(--color-surface-hover);
+  width: var(--workbench-command-palette-close-size);
+  height: var(--workbench-command-palette-close-size);
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--color-text-muted);
+  background: transparent;
+  cursor: pointer;
+}
+
+.ui-workbench-command-palette__close:hover,
+.ui-workbench-command-palette__close:focus-visible {
+  color: var(--color-text);
+  background: var(--color-surface-hover);
+  outline: none;
+}
+
+.ui-workbench-command-palette__search {
+  height: 42px;
+  display: grid;
+  grid-template-columns: 18px minmax(0, 1fr);
+  align-items: center;
+  gap: 8px;
+  padding: 0 12px;
+  border-bottom: 1px solid var(--color-border);
+  color: var(--color-text-subtle);
+}
+
+.ui-workbench-command-palette__input {
+  --ui-input-width: 100%;
+  --ui-input-min-width: 0;
+  --ui-input-height: var(--workbench-command-palette-input-height);
+  --ui-input-padding: 0;
+  --ui-input-border: 0;
+  --ui-input-color: var(--color-text);
+  --ui-input-background: transparent;
+  --ui-input-font-family: var(--font-sans);
+  --ui-input-font-size: 14px;
+  --ui-input-line-height: 1.4;
+  --ui-input-focus-border-color: transparent;
+  min-width: 0;
+  height: var(--workbench-command-palette-input-height);
+  padding: 0;
+  border: 0;
+  color: var(--color-text);
+  background: transparent;
+  font: 14px/1.4 var(--font-sans);
+}
+
+.ui-workbench-command-palette__input:focus {
+  outline: none;
+}
+
+.ui-workbench-command-palette__input::placeholder {
+  color: var(--color-text-subtle);
+}
+
+@media (max-width: 640px) {
+  .ui-workbench-command-palette-overlay {
+    padding: 16px 12px;
+  }
+
+  .ui-workbench-command-palette {
+    width: 100%;
+    max-height: calc(100vh - 32px);
+  }
+
+  .ui-workbench-command-group-shell {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .ui-workbench-command-group-shell__nav {
+    max-height: none;
+    display: flex;
+    overflow-x: auto;
+    overflow-y: hidden;
+    border-right: 0;
+    border-bottom: 1px solid var(--color-border);
+  }
+
+  .ui-workbench-command-group-shell__nav-link {
+    flex: 0 0 auto;
+  }
+
+  .ui-workbench-command-group-shell__content {
+    max-height: calc(100vh - 220px);
+  }
+
+  .ui-workbench-command-item {
+    grid-template-columns: 22px minmax(0, 1fr);
+  }
+
+  .ui-workbench-command-item__meta {
+    grid-column: 2;
+    justify-content: flex-start;
+  }
+}

package/src/workbench/commands.ts

@@ -17,6 +17,9 @@ export const WORKBENCH_TOGGLE_PRIMARY_SIDEBAR_COMMAND_ID = 'workbench.togglePrim
 export const WORKBENCH_EDITOR_SAVE_COMMAND_ID = 'editor.save';
 export const WORKBENCH_EDITOR_DISCARD_CHANGES_COMMAND_ID = 'editor.discardChanges';
 export const WORKBENCH_EDITOR_COPY_PATH_COMMAND_ID = 'editor.copyPath';
+export const WORKBENCH_EDITOR_TOGGLE_PINNED_COMMAND_ID = 'editor.togglePinned';
+export const WORKBENCH_EDITOR_SPLIT_RIGHT_COMMAND_ID = 'editor.splitRight';
+export const WORKBENCH_EDITOR_SPLIT_DOWN_COMMAND_ID = 'editor.splitDown';
 export const WORKBENCH_EDITOR_CLOSE_COMMAND_ID = 'editor.close';
 export const WORKBENCH_EDITOR_CLOSE_OTHERS_COMMAND_ID = 'editor.closeOthers';
 export const WORKBENCH_EDITOR_CLOSE_ALL_COMMAND_ID = 'editor.closeAll';
@@ -100,8 +103,7 @@ export interface WorkbenchShellCommandPresetOptions<TActivityId extends string =
   settingsLabel?: string | undefined;
   sidebarIcon?: string | undefined;
   commandOverrides?:
-    | WorkbenchCommandOverrides<WorkbenchShellCommandContext<TActivityId>>
-    | undefined;
+    WorkbenchCommandOverrides<WorkbenchShellCommandContext<TActivityId>> | undefined;
 }
 
 export interface WorkbenchEditorCommandContext {
@@ -112,6 +114,9 @@ export interface WorkbenchEditorCommandContext {
   canDeletePath: boolean;
   canDiscardFile: boolean;
   canSaveFile: boolean;
+  canSplitDown: boolean;
+  canSplitRight: boolean;
+  canTogglePinned: boolean;
   closeAll: () => void;
   closeOthers: () => void;
   closePath: () => void;
@@ -122,7 +127,11 @@ export interface WorkbenchEditorCommandContext {
   hasMultipleOpenFiles: boolean;
   hasOpenFiles: boolean;
   hasUnsavedChanges: boolean;
+  isPinned: boolean;
   saveFile: () => void;
+  splitDown: () => void;
+  splitRight: () => void;
+  togglePinned: () => void;
 }
 
 export interface WorkbenchWorkspaceCommandContext {
@@ -177,6 +186,7 @@ export function createWorkbenchShellCommands<TActivityId extends string>({
       label: ({ isPrimarySidebarVisible }) =>
         isPrimarySidebarVisible ? 'Hide primary sidebar' : 'Show primary sidebar',
       run: ({ togglePrimarySidebar }) => togglePrimarySidebar(),
+      title: 'Toggle primary sidebar',
     });
   }
 
@@ -186,6 +196,7 @@ export function createWorkbenchShellCommands<TActivityId extends string>({
       icon: settingsIcon,
       label: settingsLabel,
       run: ({ openSettings }) => openSettings(),
+      title: settingsLabel,
     });
   }
 
@@ -264,6 +275,30 @@ export function createWorkbenchEditorCommands({
         label: 'Copy path',
         run: ({ copyPath }) => copyPath(),
       },
+      {
+        id: WORKBENCH_EDITOR_TOGGLE_PINNED_COMMAND_ID,
+        icon: 'codicon-pinned',
+        isEnabled: ({ canTogglePinned, filePath }) => Boolean(filePath && canTogglePinned),
+        isVisible: ({ canTogglePinned, filePath }) => Boolean(filePath && canTogglePinned),
+        label: ({ isPinned }) => (isPinned ? 'Unpin' : 'Pin'),
+        run: ({ togglePinned }) => togglePinned(),
+      },
+      {
+        id: WORKBENCH_EDITOR_SPLIT_RIGHT_COMMAND_ID,
+        icon: 'codicon-split-horizontal',
+        isEnabled: ({ canSplitRight, filePath }) => Boolean(filePath && canSplitRight),
+        isVisible: ({ canSplitRight, filePath }) => Boolean(filePath && canSplitRight),
+        label: 'Split Right',
+        run: ({ splitRight }) => splitRight(),
+      },
+      {
+        id: WORKBENCH_EDITOR_SPLIT_DOWN_COMMAND_ID,
+        icon: 'codicon-split-vertical',
+        isEnabled: ({ canSplitDown, filePath }) => Boolean(filePath && canSplitDown),
+        isVisible: ({ canSplitDown, filePath }) => Boolean(filePath && canSplitDown),
+        label: 'Split Down',
+        run: ({ splitDown }) => splitDown(),
+      },
       {
         id: WORKBENCH_EDITOR_CLOSE_COMMAND_ID,
         icon: 'codicon-close',
@@ -309,10 +344,35 @@ export function createWorkbenchEditorTabListMenuEntries(): CommandMenuEntry<Work
 
 export function createWorkbenchEditorTabMenuEntries(): CommandMenuEntry<WorkbenchEditorCommandContext>[] {
   return [
+    commandMenuEntry<WorkbenchEditorCommandContext>(WORKBENCH_EDITOR_TOGGLE_PINNED_COMMAND_ID, {
+      surfaces: [WORKBENCH_COMMAND_SURFACE_EDITOR],
+    }),
+    commandMenuEntry<WorkbenchEditorCommandContext>(WORKBENCH_EDITOR_SPLIT_RIGHT_COMMAND_ID, {
+      surfaces: [WORKBENCH_COMMAND_SURFACE_EDITOR],
+    }),
+    commandMenuEntry<WorkbenchEditorCommandContext>(WORKBENCH_EDITOR_SPLIT_DOWN_COMMAND_ID, {
+      surfaces: [WORKBENCH_COMMAND_SURFACE_EDITOR],
+    }),
+    commandMenuSeparator('tab-layout-separator'),
     commandMenuEntry<WorkbenchEditorCommandContext>(WORKBENCH_EDITOR_COPY_PATH_COMMAND_ID, {
       surfaces: [WORKBENCH_COMMAND_SURFACE_EDITOR],
     }),
     commandMenuSeparator('tab-file-separator'),
+    ...createWorkbenchStandaloneEditorTabMenuEntries(),
+    commandMenuSeparator('tab-danger-separator'),
+    commandMenuEntry<WorkbenchEditorCommandContext>(WORKBENCH_EDITOR_DELETE_COMMAND_ID, {
+      surfaces: [WORKBENCH_COMMAND_SURFACE_EDITOR],
+    }),
+  ];
+}
+
+/**
+ * Close-only tab menu entries for chrome hosts that own tab state without pin,
+ * split, copy-path, or delete actions (for example `WorkbenchStandaloneShell`
+ * secondary areas using `WorkbenchEditorTabs`).
+ */
+export function createWorkbenchStandaloneEditorTabMenuEntries(): CommandMenuEntry<WorkbenchEditorCommandContext>[] {
+  return [
     commandMenuEntry<WorkbenchEditorCommandContext>(WORKBENCH_EDITOR_CLOSE_COMMAND_ID, {
       surfaces: [WORKBENCH_COMMAND_SURFACE_EDITOR],
     }),
@@ -322,10 +382,6 @@ export function createWorkbenchEditorTabMenuEntries(): CommandMenuEntry<Workbenc
     commandMenuEntry<WorkbenchEditorCommandContext>(WORKBENCH_EDITOR_CLOSE_ALL_COMMAND_ID, {
       surfaces: [WORKBENCH_COMMAND_SURFACE_EDITOR],
     }),
-    commandMenuSeparator('tab-danger-separator'),
-    commandMenuEntry<WorkbenchEditorCommandContext>(WORKBENCH_EDITOR_DELETE_COMMAND_ID, {
-      surfaces: [WORKBENCH_COMMAND_SURFACE_EDITOR],
-    }),
   ];
 }
 

package/src/workbench/editor-tabs/index.ts

@@ -0,0 +1,22 @@
+export { normalizeEditorTabReorderIndex } from '../editor-tabs-dnd';
+export {
+  createWorkbenchStandaloneEditorTabCommandContext,
+  createWorkbenchStandaloneEditorTabContextMenuItems,
+  isWorkbenchEditorTabClosable,
+} from '../editorTabContextMenu';
+export type {
+  CreateWorkbenchStandaloneEditorTabCommandContextInput,
+  WorkbenchStandaloneEditorTabLike,
+} from '../editorTabContextMenu';
+export { useEditorTabsStripDnd } from '../useEditorTabsStripDnd';
+export type {
+  UseEditorTabsStripDndOptions,
+  UseEditorTabsStripDndResult,
+} from '../useEditorTabsStripDnd';
+export { useWorkbenchEditorTabContextMenu } from '../useWorkbenchEditorTabContextMenu';
+export type {
+  UseWorkbenchEditorTabContextMenuOptions,
+  UseWorkbenchEditorTabContextMenuResult,
+} from '../useWorkbenchEditorTabContextMenu';
+export { WorkbenchEditorTabs } from '../WorkbenchEditorTabs';
+export type { WorkbenchEditorTabsProps } from '../WorkbenchEditorTabs';

package/src/workbench/editor-tabs-dnd.ts

@@ -0,0 +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;
+}

package/src/workbench/editorTabContextMenu.ts

@@ -0,0 +1,111 @@
+import {
+  createCommandRegistry,
+  executeCommand,
+  resolveCommandMenuItems,
+} from '@workbench-kit/platform';
+
+import type { ContextMenuItem } from '../overlay/ContextMenu';
+import {
+  WORKBENCH_COMMAND_SURFACE_EDITOR,
+  commandMenuItemsToContextMenuItems,
+  createWorkbenchEditorCommands,
+  createWorkbenchStandaloneEditorTabMenuEntries,
+  type WorkbenchEditorCommandContext,
+} from './commands';
+
+const editorCommandRegistry = createCommandRegistry(createWorkbenchEditorCommands());
+const standaloneEditorTabMenuEntries = createWorkbenchStandaloneEditorTabMenuEntries();
+
+export interface WorkbenchStandaloneEditorTabLike {
+  readonly closable?: boolean | undefined;
+  readonly id: string;
+}
+
+export function isWorkbenchEditorTabClosable(tab: WorkbenchStandaloneEditorTabLike): boolean {
+  return tab.closable !== false;
+}
+
+export interface CreateWorkbenchStandaloneEditorTabCommandContextInput {
+  readonly onClose: (tabId: string) => void;
+  readonly onCloseAll?: (() => void) | undefined;
+  readonly onCloseOthers?: ((tabId: string) => void) | undefined;
+  readonly tabId: string;
+  readonly tabs: readonly WorkbenchStandaloneEditorTabLike[];
+}
+
+export function createWorkbenchStandaloneEditorTabCommandContext({
+  onClose,
+  onCloseAll,
+  onCloseOthers,
+  tabId,
+  tabs,
+}: CreateWorkbenchStandaloneEditorTabCommandContextInput): WorkbenchEditorCommandContext {
+  const targetTab = tabs.find((tab) => tab.id === tabId);
+  const closableTabIds = tabs.filter(isWorkbenchEditorTabClosable).map((tab) => tab.id);
+  const otherClosableTabIds = closableTabIds.filter((id) => id !== tabId);
+  const canCloseTarget = Boolean(targetTab && isWorkbenchEditorTabClosable(targetTab));
+
+  return {
+    canCloseAll: closableTabIds.length > 0,
+    canCloseOthers: otherClosableTabIds.length > 0,
+    canClosePath: canCloseTarget,
+    canCopyPath: false,
+    canDeletePath: false,
+    canDiscardFile: false,
+    canSaveFile: false,
+    canSplitDown: false,
+    canSplitRight: false,
+    canTogglePinned: false,
+    closeAll: () => {
+      if (onCloseAll) {
+        onCloseAll();
+        return;
+      }
+      for (const id of closableTabIds) {
+        onClose(id);
+      }
+    },
+    closeOthers: () => {
+      if (onCloseOthers) {
+        onCloseOthers(tabId);
+        return;
+      }
+      for (const id of otherClosableTabIds) {
+        onClose(id);
+      }
+    },
+    closePath: () => {
+      if (canCloseTarget) {
+        onClose(tabId);
+      }
+    },
+    copyPath: () => undefined,
+    deletePath: () => undefined,
+    discardFile: () => undefined,
+    filePath: tabId,
+    hasMultipleOpenFiles: tabs.length > 1,
+    hasOpenFiles: tabs.length > 0,
+    hasUnsavedChanges: false,
+    isPinned: false,
+    saveFile: () => undefined,
+    splitDown: () => undefined,
+    splitRight: () => undefined,
+    togglePinned: () => undefined,
+  };
+}
+
+export function createWorkbenchStandaloneEditorTabContextMenuItems(
+  input: CreateWorkbenchStandaloneEditorTabCommandContextInput,
+): ContextMenuItem[] {
+  const context = createWorkbenchStandaloneEditorTabCommandContext(input);
+
+  return commandMenuItemsToContextMenuItems(
+    resolveCommandMenuItems({
+      context,
+      entries: standaloneEditorTabMenuEntries,
+      registry: editorCommandRegistry,
+      surface: WORKBENCH_COMMAND_SURFACE_EDITOR,
+    }),
+    (commandId) => executeCommand(editorCommandRegistry, commandId, context),
+  );
+}

package/src/workbench/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;
+}