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

package/src/workbench/chat/types.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 
-import type { WorkbenchCommandExecutionPolicy } from '../command-model';
+import type { WorkbenchCommandExecutionPolicy } from '../commands/command-model';
 
 export type ChatMessageSource = 'assistant' | 'user';
 
@@ -15,11 +15,11 @@ export type ChatCommandProposalStatus =
   'pending' | 'running' | 'allowed' | 'denied' | 'blocked' | 'executed' | 'failed';
 
 export interface ChatCommandProposal {
-  args?: readonly unknown[] | undefined;
+  args?: readonly unknown[];
   commandId: string;
-  description?: string | undefined;
+  description?: string;
   id: string;
-  label?: string | undefined;
+  label?: string;
   policy: WorkbenchCommandExecutionPolicy;
   status: ChatCommandProposalStatus;
 }
@@ -27,13 +27,13 @@ export interface ChatCommandProposal {
 export type ChatMessageTimestamp = number | Date | string;
 
 export interface ChatMessage {
-  commandProposals?: readonly ChatCommandProposal[] | undefined;
+  commandProposals?: readonly ChatCommandProposal[];
   content: string;
   /**
    * How `content` is rendered. Defaults to markdown for assistant-layout
    * assistant messages; otherwise plain text.
    */
-  contentMode?: ChatMessageContentMode | undefined;
+  contentMode?: ChatMessageContentMode;
   createdAt?: string;
   id: string;
   label?: ReactNode;
@@ -41,5 +41,5 @@ export interface ChatMessage {
   /** Preferred timestamp for display; falls back to `createdAt` when omitted. */
   timestamp?: ChatMessageTimestamp;
   /** Optional visual tone for host-driven status / error messages. */
-  tone?: ChatMessageTone | undefined;
+  tone?: ChatMessageTone;
 }

package/src/workbench/chat/useCancelRuntimeOnUnmount.ts

@@ -5,10 +5,10 @@ export const DEFAULT_RUNTIME_UNMOUNT_CANCELLABLE_STATUSES = ['running'] as const
 
 export interface UseCancelRuntimeOnUnmountOptions<TStatus extends string = RuntimeStatus> {
   cancel: () => void;
-  cancellableStatuses?: readonly TStatus[] | undefined;
-  enabled?: boolean | undefined;
-  getStatus?: (() => TStatus) | undefined;
-  status?: TStatus | undefined;
+  cancellableStatuses?: readonly TStatus[];
+  enabled?: boolean;
+  getStatus?: () => TStatus;
+  status?: TStatus;
 }
 
 export function shouldCancelRuntimeOnUnmount(

package/src/workbench/chat/useChatPrependPagination.ts

@@ -8,23 +8,23 @@ import {
 } from './chatScroll';
 
 export interface UseChatPrependPaginationOptions {
-  autoScrollBottomThreshold?: number | undefined;
-  getScrollContainer?: ((listElement: HTMLDivElement | null) => HTMLElement | null) | undefined;
-  initialVisibleItemCount?: number | undefined;
-  isStreaming?: boolean | undefined;
+  autoScrollBottomThreshold?: number;
+  getScrollContainer?: (listElement: HTMLDivElement | null) => HTMLElement | null;
+  initialVisibleItemCount?: number;
+  isStreaming?: boolean;
   itemCount: number;
-  lastItemId?: string | undefined;
+  lastItemId?: string;
   /** Content revision for the trailing item (e.g. streaming chunk updates). */
-  lastItemRevision?: string | undefined;
-  paginationKey?: string | undefined;
-  rootMargin?: string | undefined;
+  lastItemRevision?: string;
+  paginationKey?: string;
+  rootMargin?: string;
   /**
    * - `true` (default): always scroll to the latest message
    * - `'auto'`: scroll only when the container is already near the bottom
    * - `false`: never auto-scroll
    */
-  stickToBottom?: boolean | 'auto' | undefined;
-  visibleItemPageSize?: number | undefined;
+  stickToBottom?: boolean | 'auto';
+  visibleItemPageSize?: number;
 }
 
 export interface UseChatPrependPaginationResult {

package/src/workbench/chat/useSlashCommandSuggest.ts

@@ -5,7 +5,7 @@ import {
   getNextWorkbenchCommandIndex,
   isWorkbenchCommandRunnable,
   type WorkbenchCommandDescriptor,
-} from '../CommandPalette';
+} from '../commands/CommandPalette';
 import { getSlashCommandQuery, isSlashCommandInput } from './slashCommand';
 
 type SlashCommandSuggestKeyboardEvent = Pick<

package/src/workbench/{WorkbenchModalPortal.tsx → chrome/WorkbenchModalPortal.tsx}

@@ -1,7 +1,7 @@
 import { useLayoutEffect, useRef, useState, type ReactNode } from 'react';
 import { createPortal } from 'react-dom';
 
-import { WORKBENCH_OVERLAYS_CLASS } from '../modal/modalContainer';
+import { WORKBENCH_OVERLAYS_CLASS } from '../../modal/modalContainer';
 import { useWorkbenchOverlaysContainer } from './workbenchOverlaysContext';
 
 export interface WorkbenchModalPortalProps {

package/src/workbench/chrome/workbench-chrome.css

@@ -0,0 +1,4 @@
+/* Workbench shell and platform chrome */
+@import '../shell/index.css';
+@import './index.css';
+@import '../command-palette/command-palette.css';

package/src/workbench/{CommandGroupShell.tsx → commands/CommandGroupShell.tsx}

@@ -1,6 +1,6 @@
 import { useId, useMemo, type ComponentPropsWithRef, type ReactNode } from 'react';
-import { EmptyState } from '../primitives/empty-state';
-import { cx } from '../utils/cx';
+import { EmptyState } from '../../primitives/empty-state';
+import { cx } from '../../utils/cx';
 import { WorkbenchCommandList } from './CommandList';
 import {
   filterWorkbenchCommands,

package/src/workbench/{CommandList.tsx → commands/CommandList.tsx}

@@ -1,8 +1,8 @@
 import { useEffect, useId, useRef, type ComponentPropsWithRef, type ReactNode } from 'react';
-import { Button } from '../primitives/button';
-import { EmptyState } from '../primitives/empty-state';
-import { cxCodicon } from '../utils/codicon';
-import { cx } from '../utils/cx';
+import { Button } from '../../primitives/button';
+import { EmptyState } from '../../primitives/empty-state';
+import { cxCodicon } from '../../utils/codicon';
+import { cx } from '../../utils/cx';
 import {
   getWorkbenchCommandExecutionLabel,
   getWorkbenchCommandStatusLabel,
@@ -11,7 +11,7 @@ import {
   type WorkbenchCommandRunContext,
   type WorkbenchCommandRunSource,
 } from './command-model';
-import { isWorkbenchStatusBusy } from './status';
+import { isWorkbenchStatusBusy } from '../shell/status';
 
 function commandIcon(command: WorkbenchCommandDescriptor) {
   if (!command.icon) return null;

package/src/workbench/{CommandPalette.tsx → commands/CommandPalette.tsx}

@@ -9,9 +9,10 @@ import {
   type KeyboardEvent,
   type ReactNode,
 } from 'react';
-import { IconButton } from '../primitives/icon-button';
-import { TextInput } from '../primitives/text-input';
-import { cx } from '../utils/cx';
+import { useModalFocusTrap } from '../../modal/useModalFocusTrap';
+import { IconButton } from '../../primitives/icon-button';
+import { TextInput } from '../../primitives/text-input';
+import { cx } from '../../utils/cx';
 import {
   filterWorkbenchCommands,
   getNextWorkbenchCommandIndex,
@@ -130,8 +131,8 @@ export function WorkbenchCommandPalette({
 }: WorkbenchCommandPaletteProps) {
   const titleId = useId();
   const listId = useId();
+  const dialogRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
-  const previousFocusRef = useRef<HTMLElement | null>(null);
   const [uncontrolledActiveCommandId, setUncontrolledActiveCommandId] = useState<string>();
   const [resolvedQuery, setResolvedQuery] = useControllableCommandQuery({
     defaultQuery,
@@ -164,15 +165,13 @@ export function WorkbenchCommandPalette({
     [activeCommandId, onActiveCommandChange],
   );
 
-  const restoreFocus = useCallback(() => {
-    if (!restoreFocusOnClose) return;
-    previousFocusRef.current?.focus();
-  }, [restoreFocusOnClose]);
-
-  const closePalette = useCallback(() => {
-    restoreFocus();
-    onClose();
-  }, [onClose, restoreFocus]);
+  useModalFocusTrap({
+    enabled: open,
+    containerRef: dialogRef,
+    initialFocusRef: inputRef,
+    onClose,
+    restoreFocusOnClose,
+  });
 
   const runCommand = useCallback(
     (command: WorkbenchCommandDescriptor, context: WorkbenchCommandRunContext) => {
@@ -182,18 +181,6 @@ export function WorkbenchCommandPalette({
     [onRunCommand],
   );
 
-  useEffect(() => {
-    if (!open) return;
-
-    previousFocusRef.current = document.activeElement as HTMLElement | null;
-    const frame = window.requestAnimationFrame(() => inputRef.current?.focus());
-
-    return () => {
-      window.cancelAnimationFrame(frame);
-      restoreFocus();
-    };
-  }, [open, restoreFocus]);
-
   useEffect(() => {
     if (!open) return;
     if (activeCommandId !== undefined) return;
@@ -207,12 +194,6 @@ export function WorkbenchCommandPalette({
 
   const handlePaletteKeyDown = useCallback(
     (event: WorkbenchCommandPaletteKeyEvent) => {
-      if (event.key === 'Escape') {
-        event.preventDefault();
-        closePalette();
-        return;
-      }
-
       if (
         event.key !== 'ArrowDown' &&
         event.key !== 'ArrowUp' &&
@@ -275,15 +256,7 @@ export function WorkbenchCommandPalette({
         updateActiveCommand(filteredCommands[nextIndex]?.id);
       }
     },
-    [
-      activeCommand,
-      activeIndex,
-      closePalette,
-      commandQuery,
-      filteredCommands,
-      runCommand,
-      updateActiveCommand,
-    ],
+    [activeCommand, activeIndex, commandQuery, filteredCommands, runCommand, updateActiveCommand],
   );
 
   useEffect(() => {
@@ -308,13 +281,14 @@ export function WorkbenchCommandPalette({
   if (!open) return null;
 
   return (
-    <div className="ui-workbench-command-palette-overlay" onClick={closePalette}>
+    <div className="ui-workbench-command-palette-overlay" onClick={onClose}>
       <div
         aria-labelledby={titleId}
         aria-modal="true"
         className={cx('ui-workbench-command-palette', className)}
         role="dialog"
         {...props}
+        ref={dialogRef}
         onClick={(event) => event.stopPropagation()}
       >
         <div className="ui-workbench-command-palette__header">
@@ -325,7 +299,7 @@ export function WorkbenchCommandPalette({
             className="ui-workbench-command-palette__close"
             icon="codicon-close"
             label={closeLabel}
-            onClick={closePalette}
+            onClick={onClose}
           />
         </div>
         <div className="ui-workbench-command-palette__search">

package/src/workbench/{ConfirmationFlow.tsx → commands/ConfirmationFlow.tsx}

@@ -1,14 +1,14 @@
 import { useState, type FormEvent, type ReactNode } from 'react';
-import './shell/confirmation-flow.css';
-import { Modal } from '../modal/Modal';
-import { Button } from '../primitives/button';
-import { cx } from '../utils/cx';
+import '../shell/confirmation-flow.css';
+import { Modal } from '../../modal/Modal';
+import { Button } from '../../primitives/button';
+import { cx } from '../../utils/cx';
 import {
   getWorkbenchStatusLabel,
   isWorkbenchStatusBusy,
   isWorkbenchStatusDisabled,
   type WorkbenchStatus,
-} from './status';
+} from '../shell/status';
 
 export type WorkbenchConfirmationVariant = 'default' | 'danger';
 

package/src/workbench/{command-model.ts → commands/command-model.ts}

@@ -1,6 +1,10 @@
 import type { CommandMenuItem, ResolvedCommandMenuCommandItem } from '@workbench-kit/platform';
 
-import { getWorkbenchStatusLabel, isWorkbenchStatusDisabled, type WorkbenchStatus } from './status';
+import {
+  getWorkbenchStatusLabel,
+  isWorkbenchStatusDisabled,
+  type WorkbenchStatus,
+} from '../shell/status';
 
 export type WorkbenchCommandStatus = WorkbenchStatus;
 

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

@@ -10,7 +10,7 @@ import {
   type CommandValue,
 } from '@workbench-kit/platform';
 
-import type { ContextMenuItem } from '../overlay/ContextMenu';
+import type { ContextMenuItem } from '../../overlay/ContextMenu';
 
 export const WORKBENCH_OPEN_SETTINGS_COMMAND_ID = 'workbench.openSettings';
 export const WORKBENCH_TOGGLE_PRIMARY_SIDEBAR_COMMAND_ID = 'workbench.togglePrimarySidebar';

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

@@ -1,4 +1,4 @@
-import { EditorTabs, type EditorTabsProps } from '../primitives/workbench-editor';
+import { EditorTabs, type EditorTabsProps } from '../../primitives/workbench-editor';
 import { useWorkbenchEditorTabContextMenu } from './useWorkbenchEditorTabContextMenu';
 
 export interface WorkbenchEditorTabsProps extends EditorTabsProps {

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

@@ -1,4 +1,4 @@
-import type { EditorTabDropPosition } from '../primitives/workbench-editor';
+import type { EditorTabDropPosition } from '../../primitives/workbench-editor';
 
 export const EDITOR_TAB_DRAG_DATA_TYPE = 'application/x-workbench-kit-editor-tab' as const;
 

package/src/workbench/{editorTabContextMenu.ts → editor/editorTabContextMenu.ts}

@@ -4,14 +4,14 @@ import {
   resolveCommandMenuItems,
 } from '@workbench-kit/platform';
 
-import type { ContextMenuItem } from '../overlay/ContextMenu';
+import type { ContextMenuItem } from '../../overlay/ContextMenu';
 import {
   WORKBENCH_COMMAND_SURFACE_EDITOR,
   commandMenuItemsToContextMenuItems,
   createWorkbenchEditorCommands,
   createWorkbenchStandaloneEditorTabMenuEntries,
   type WorkbenchEditorCommandContext,
-} from './commands';
+} from '../commands/commands';
 
 const editorCommandRegistry = createCommandRegistry(createWorkbenchEditorCommands());
 const standaloneEditorTabMenuEntries = createWorkbenchStandaloneEditorTabMenuEntries();

package/src/workbench/{useEditorTabsStripDnd.ts → editor/useEditorTabsStripDnd.ts}

@@ -1,7 +1,7 @@
 import { useCallback, useMemo, useRef, useState } from 'react';
 import type { DragEvent as ReactDragEvent } from 'react';
 
-import type { EditorTabDropPosition, EditorTabsProps } from '../primitives/workbench-editor';
+import type { EditorTabDropPosition, EditorTabsProps } from '../../primitives/workbench-editor';
 import {
   EDITOR_TAB_DRAG_DATA_TYPE,
   isEditorTabsScrollerEventTarget,

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

@@ -1,6 +1,6 @@
 import { useCallback, useState, type MouseEvent as ReactMouseEvent, type ReactNode } from 'react';
 
-import { ContextMenu } from '../overlay/ContextMenu';
+import { ContextMenu } from '../../overlay/ContextMenu';
 import {
   createWorkbenchStandaloneEditorTabContextMenuItems,
   type WorkbenchStandaloneEditorTabLike,

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

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