@workbench-kit/react 0.0.2-prototype.0.2.13 → 0.0.2-prototype.0.2.14

package/README.md

@@ -63,6 +63,35 @@ Full walkthrough: [Getting Started](../../docs/guides/getting-started.md).
 
 Import **only** through `exports`. Do not deep-import `src/` paths.
 
+## Quick Open providers
+
+`WorkbenchQuickOpen` is a file/provider overlay distinct from the command palette.
+Hosts (or `@workbench-kit/shell-react` `WorkbenchCommandHost`) pass pluggable
+providers; the default workspace-files provider wraps
+`searchWorkspaceFiles` from `@workbench-kit/workspace`.
+
+```ts
+import {
+  WorkbenchQuickOpen,
+  createWorkspaceFilesQuickOpenProvider,
+  type QuickOpenProvider,
+} from '@workbench-kit/react/workbench';
+
+const providers: QuickOpenProvider[] = [
+  createWorkspaceFilesQuickOpenProvider({
+    files: workspaceFiles,
+    recentPaths: ['src/App.tsx'],
+  }),
+];
+```
+
+Contract:
+
+- `provider.search(query)` returns items (sync or `Promise`)
+- Empty query → all files, with optional `recentPaths` elevated first
+- Enter selects the active item; Escape closes (modal focus trap)
+- Shell default: Ctrl/Cmd+P opens Quick Open; Ctrl/Cmd+Shift+P opens the command palette
+
 ## Learn more
 
 | Doc                                                                    | Purpose                       |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workbench-kit/react",
-  "version": "0.0.2-prototype.0.2.13",
+  "version": "0.0.2-prototype.0.2.14",
   "private": false,
   "type": "module",
   "exports": {
@@ -58,15 +58,15 @@
     "@vscode/codicons": "^0.0.45",
     "remark-gfm": "^4.0.1",
     "rehype-sanitize": "^6.0.0",
-    "@workbench-kit/adapters": "0.0.2-prototype.0.2.13",
-    "@workbench-kit/runtime": "0.0.2-prototype.0.2.13",
-    "@workbench-kit/platform": "0.0.2-prototype.0.2.13",
-    "@workbench-kit/services": "0.0.2-prototype.0.2.13",
-    "@workbench-kit/contracts": "0.0.2-prototype.0.2.13",
-    "@workbench-kit/jdw": "0.0.2-prototype.0.2.13",
-    "@workbench-kit/workspace": "0.0.2-prototype.0.2.13",
-    "@workbench-kit/tokens": "0.0.2-prototype.0.2.13",
-    "@workbench-kit/monaco": "0.0.2-prototype.0.2.13"
+    "@workbench-kit/contracts": "0.0.2-prototype.0.2.14",
+    "@workbench-kit/jdw": "0.0.2-prototype.0.2.14",
+    "@workbench-kit/adapters": "0.0.2-prototype.0.2.14",
+    "@workbench-kit/monaco": "0.0.2-prototype.0.2.14",
+    "@workbench-kit/runtime": "0.0.2-prototype.0.2.14",
+    "@workbench-kit/services": "0.0.2-prototype.0.2.14",
+    "@workbench-kit/workspace": "0.0.2-prototype.0.2.14",
+    "@workbench-kit/platform": "0.0.2-prototype.0.2.14",
+    "@workbench-kit/tokens": "0.0.2-prototype.0.2.14"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/index.ts

@@ -59,6 +59,15 @@ export {
   groupWorkbenchCommands,
   isWorkbenchCommandRunnable,
 } from './workbench/commands/CommandPalette';
+export {
+  DEFAULT_QUICK_OPEN_SEARCH_DEBOUNCE_MS,
+  WORKSPACE_FILES_QUICK_OPEN_PROVIDER_ID,
+  WorkbenchQuickOpen,
+  createWorkspaceFilesQuickOpenProvider,
+  getNextQuickOpenItemIndex,
+  isQuickOpenItemSelectable,
+  resolveQuickOpenItemPath,
+} from './workbench/commands/WorkbenchQuickOpen';
 export {
   WorkbenchShortcutCommandBridge,
   getWorkbenchShortcutCommandBindings,
@@ -87,6 +96,13 @@ export type {
   WorkbenchCommandStatus,
   WorkbenchCommandSuggestProps,
 } from './workbench/commands/CommandPalette';
+export type {
+  CreateWorkspaceFilesQuickOpenProviderOptions,
+  QuickOpenItem,
+  QuickOpenProvider,
+  QuickOpenSelectContext,
+  WorkbenchQuickOpenProps,
+} from './workbench/commands/WorkbenchQuickOpen';
 export type {
   UseWorkbenchShortcutCommandsOptions,
   WorkbenchShortcutCommandBinding,

package/src/jdw/builtins/renderBuiltinWidgetLeaf.tsx

@@ -1,9 +1,7 @@
 import { createElement, type CSSProperties, type ReactNode } from 'react';
 import type { GenericWidget } from '@workbench-kit/jdw';
 
-function readNumber(value: unknown): number | undefined {
-  return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
-}
+import { readNumber } from '../../utils/readNumber';
 
 function readString(value: unknown): string | undefined {
   return typeof value === 'string' && value.trim().length > 0 ? value.trim() : undefined;

package/src/jdw/createBuiltinJdwRegistry.ts

@@ -10,6 +10,7 @@ import {
   type GenericWidget,
 } from '@workbench-kit/jdw';
 
+import { readNumber } from '../utils/readNumber';
 import { renderBuiltinWidgetLeaf } from './builtins/renderBuiltinWidgetLeaf.js';
 
 const LAYOUT_INSPECTOR = [
@@ -73,10 +74,6 @@ function build(widget: WidgetTypeShape) {
   return renderBuiltinWidgetLeaf(widget as GenericWidget);
 }
 
-function readNumber(value: unknown): number | undefined {
-  return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
-}
-
 function readString(value: unknown): string | undefined {
   return typeof value === 'string' && value.trim().length > 0 ? value : undefined;
 }

package/src/jdw/cssRenderBackend.tsx

@@ -22,6 +22,7 @@ import {
   type WidgetPath,
 } from '@workbench-kit/jdw';
 
+import { readNumber } from '../utils/readNumber';
 import { renderBuiltinWidgetLeaf } from './builtins/renderBuiltinWidgetLeaf.js';
 import { BUILTIN_JDW_REGISTRY } from './createBuiltinJdwRegistry.js';
 export interface CssRenderBackendOptions {
@@ -45,10 +46,6 @@ const LAYOUT_CONTAINER_TYPES = new Set([
   'sized_box',
 ]);
 
-function readNumber(value: unknown): number | undefined {
-  return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
-}
-
 function renderFromRegistry(
   registry: WidgetRegistryContract<unknown>,
   widget: GenericWidget,

package/src/modal/modalPosition.ts

@@ -1,3 +1,4 @@
+import { clampNumber } from '../utils/clamp';
 import type { ModalBounds, ModalPosition, ModalSize } from './modalTypes';
 import type { ModalContainerBounds } from './modalContainer';
 import { readWindowViewportBounds } from './modalContainer';
@@ -17,9 +18,9 @@ export function clampModalDragPosition(
   }
 
   const maxX = Math.max(0, viewport.width - size.width);
-  const x = clamp(nextPosition.x, 0, maxX);
+  const x = clampNumber(nextPosition.x, 0, maxX);
   const maxY = size.height >= viewport.height ? 0 : Math.max(0, viewport.height - size.height);
-  const y = clamp(nextPosition.y, 0, maxY);
+  const y = clampNumber(nextPosition.y, 0, maxY);
 
   return { x, y };
 }
@@ -30,7 +31,3 @@ export function clampModalBoundsPosition(
 ): ModalBounds {
   return { ...bounds, ...clampModalDragPosition(bounds, bounds, viewport) };
 }
-
-function clamp(value: number, min: number, max: number): number {
-  return Math.min(Math.max(value, min), max);
-}

package/src/overlay/measureAnchoredOverlayPanel.ts

@@ -1,3 +1,5 @@
+import { clampNumber } from '../utils/clamp';
+
 export type AnchoredOverlayPlacement = 'side' | 'below' | 'above';
 
 export interface MeasureAnchoredOverlayPanelOptions {
@@ -26,10 +28,6 @@ const SIDE_MIN_VISIBLE_HEIGHT_PX = 240;
 /** Prefer below when at least this many pixels are available under the trigger. */
 const BELOW_MIN_SPACE_PX = 12;
 
-function clamp(value: number, min: number, max: number): number {
-  return Math.min(Math.max(value, min), max);
-}
-
 /**
  * Measure a panel-sized overlay anchored to a trigger element.
  * Prefers a side flyout when the trigger sits in the left portion of the
@@ -65,7 +63,7 @@ export function measureAnchoredOverlayPanel(
 
   if (preferSide) {
     const minVisibleHeight = Math.min(SIDE_MIN_VISIBLE_HEIGHT_PX, maxHeight);
-    const top = clamp(
+    const top = clampNumber(
       triggerRect.top,
       viewportPaddingPx,
       viewportHeight - viewportPaddingPx - minVisibleHeight,
@@ -80,7 +78,7 @@ export function measureAnchoredOverlayPanel(
   }
 
   // Align the panel's right edge toward the trigger's right, then clamp.
-  const left = clamp(
+  const left = clampNumber(
     triggerRect.right - width,
     viewportPaddingPx,
     viewportWidth - viewportPaddingPx - width,

package/src/primitives/select/Select.tsx

@@ -16,6 +16,7 @@ import type { ControlWidth } from '../text-input/TextInput';
 import { cxCodicon } from '../../utils/codicon';
 import { cx } from '../../utils/cx';
 import { getEnabledOptionIndex, parseOptions } from './options';
+import { resolvePortalContainer } from '../searchable-multi-select/overlay';
 import { isTriggerVisible, measureOverlayPosition, overlayListboxStyle } from './overlay';
 import type { OverlayPosition, ParsedOption } from './types';
 
@@ -24,19 +25,6 @@ export interface SelectProps extends ComponentPropsWithRef<'select'> {
   onValueChange?: (value: string, event: ChangeEvent<HTMLSelectElement>) => void;
 }
 
-/**
- * Portaling straight to `document.body` escapes the workbench root (`[data-theme-preset]`),
- * which re-declares theme tokens locally and shadows whatever a contributed theme overrides
- * on `document.documentElement`. Prefer themed hosts / overlay roots when present.
- */
-function resolvePortalContainer(trigger: HTMLElement | null): HTMLElement {
-  return (
-    trigger?.closest<HTMLElement>(
-      '[data-theme-preset], [data-theme], .ui-workbench-host-root, .ide-workbench-overlays',
-    ) ?? document.body
-  );
-}
-
 export function Select({
   className,
   controlWidth = 'default',

package/src/test-utils/workbenchMonacoMock.tsx

@@ -9,14 +9,34 @@ export interface MockWorkbenchMonacoEditorProps {
   value?: string;
 }
 
+export interface MockWorkbenchMonacoDiffEditorProps {
+  language?: string;
+  modified?: string;
+  onModifiedChange?: (value: string) => void;
+  original?: string;
+  readOnly?: boolean;
+  theme?: string;
+}
+
 export function createWorkbenchMonacoMockModule(
   renderEditor?: (props: MockWorkbenchMonacoEditorProps) => ReactNode,
 ) {
   const defaultRender = ({ value }: MockWorkbenchMonacoEditorProps) =>
     createElement('div', { 'data-testid': 'monaco-editor' }, value ?? 'Mocked Monaco Editor');
 
+  const defaultDiffRender = ({ modified, original }: MockWorkbenchMonacoDiffEditorProps) =>
+    createElement(
+      'div',
+      { 'data-testid': 'monaco-diff-editor' },
+      original ?? '',
+      '\n---\n',
+      modified ?? '',
+    );
+
   return {
     WorkbenchMonacoEditor: renderEditor ?? defaultRender,
+    WorkbenchMonacoDiffEditor: defaultDiffRender,
+    DiffEditor: defaultDiffRender,
     useMonacoWorkbenchThemeSync: () => undefined,
     prepareMonacoWorkbenchEditor: () => undefined,
     monacoThemeForWorkspaceTheme: (theme: string) =>

package/src/utils/clamp.ts

@@ -0,0 +1,4 @@
+/** Clamp a finite number into the inclusive `[min, max]` range. */
+export function clampNumber(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}

package/src/utils/normalizeKeyToken.ts

@@ -0,0 +1,13 @@
+/** Normalize a keyboard shortcut token to a stable lowercase key name. */
+export function normalizeKeyToken(token: string): 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;
+}

package/src/utils/readNumber.ts

@@ -0,0 +1,4 @@
+/** Return a finite number, or `undefined` when the value is not usable as one. */
+export function readNumber(value: unknown): number | undefined {
+  return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
+}

package/src/widget-tree/WidgetTreeCanvasPreview.tsx

@@ -26,6 +26,7 @@ import {
   type WidgetResizeHandlePosition,
 } from '@workbench-kit/jdw';
 
+import { readNumber } from '../utils/readNumber';
 import {
   WorkbenchCanvasFrameHandle,
   WorkbenchCanvasItemFrame,
@@ -221,10 +222,6 @@ function readPositiveInteger(value: unknown): number | null {
   return Math.floor(value);
 }
 
-function readNumber(value: unknown): number | undefined {
-  return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
-}
-
 function appendLineRect(rect: Rect, axis: 'x' | 'y', children: readonly LayoutNodeResult[]): Rect {
   const lastChildRect = children[children.length - 1]?.rect;
   if (axis === 'x') {

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