@workbench-kit/react 0.0.2-prototype.0.2.4 → 0.0.2-prototype.0.2.40

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/chrome/workbench-layout-regions.css

@@ -40,3 +40,16 @@
   --panel-bg-75: var(--color-primary-side-bar-bg-75);
   background: var(--panel-bg);
 }
+
+/* Primary-sidebar residency owns its intentionally hidden native scrollbars. */
+.workbench-primary-sidebar .ui-sidebar-view__body,
+.workbench-primary-sidebar .ui-workbench-sidebar-section__content {
+  scrollbar-gutter: auto;
+  scrollbar-width: none;
+}
+
+.workbench-primary-sidebar .ui-sidebar-view__body::-webkit-scrollbar,
+.workbench-primary-sidebar .ui-workbench-sidebar-section__content::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}

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

@@ -60,18 +60,10 @@
   object-position: center;
 }
 
-.workbench-shell-titlebar__app-icon > .tilepaper-app-icon,
 .workbench-shell-titlebar__app-icon > svg {
   shape-rendering: geometricPrecision;
 }
 
-.tilepaper-app-icon {
-  display: block;
-  width: 100%;
-  height: 100%;
-  overflow: visible;
-}
-
 .workbench-shell-titlebar__title {
   min-width: 0;
   overflow: hidden;

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,9 @@
+import '../views/command-list.css';
 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 +12,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/{ShortcutCommandBridge.tsx → commands/ShortcutCommandBridge.tsx}

@@ -5,6 +5,7 @@ import {
   type CommandRegistry,
   type CommandValue,
 } from '@workbench-kit/platform';
+import { normalizeKeyToken } from '../../utils/normalizeKeyToken';
 
 export type WorkbenchShortcutPlatform = 'linux' | 'mac' | 'unknown' | 'windows';
 
@@ -105,19 +106,6 @@ function getDefaultShortcutPlatform(): WorkbenchShortcutPlatform {
   return 'unknown';
 }
 
-function normalizeKeyToken(token: string) {
-  const key = token.trim().toLowerCase();
-  if (key === 'del') return 'delete';
-  if (key === 'esc') return 'escape';
-  if (key === 'return') return 'enter';
-  if (key === 'spacebar' || key === 'space') return 'space';
-  if (key === 'arrowup' || key === 'up') return 'arrowup';
-  if (key === 'arrowdown' || key === 'down') return 'arrowdown';
-  if (key === 'arrowleft' || key === 'left') return 'arrowleft';
-  if (key === 'arrowright' || key === 'right') return 'arrowright';
-  return key;
-}
-
 function normalizeEventKey(key: string) {
   if (key === ' ') return 'space';
   return normalizeKeyToken(key);
@@ -225,6 +213,22 @@ export function matchesWorkbenchShortcut({
     );
 }
 
+export function matchesWorkbenchCommandPaletteShortcut(event: WorkbenchShortcutEventLike) {
+  return matchesWorkbenchShortcut({ event, shortcut: 'Ctrl/Cmd+Shift+P' });
+}
+
+export function matchesWorkbenchQuickAccessShortcut(event: WorkbenchShortcutEventLike) {
+  return matchesWorkbenchShortcut({ event, shortcut: 'Ctrl/Cmd+P' });
+}
+
+export function getWorkbenchCommandPaletteShortcutLabel() {
+  return 'Ctrl+Shift+P';
+}
+
+export function getWorkbenchQuickAccessShortcutLabel() {
+  return 'Ctrl+P';
+}
+
 export function getWorkbenchShortcutCommandBindings<TContext>({
   commandIds,
   context,