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

package/README.md

@@ -87,7 +87,16 @@ const providers: QuickOpenProvider[] = [
 
 Contract:
 
-- `provider.search(query)` returns items (sync or `Promise`)
+- `provider.search(query, { signal })` returns items (sync or `Promise`); the context is
+  optional so simple and existing single-provider implementations can keep a one-argument function
+- Without `providerId`, providers search concurrently and contribute results as they settle;
+  final grouping is deterministic by declared provider order, then provider item order
+- A rejected or slow provider does not block results from other providers; query/provider changes
+  abort the prior signal and late results are ignored
+- `onProviderError` can observe an isolated provider failure without failing the whole search
+- Every result shows its provider label, and selection reports the matching `providerId`
+- Provider IDs are unique; item IDs only need to be stable within their provider
+- Set `providerId` to restrict the overlay to one provider
 - 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

package/package.json

@@ -1,7 +1,10 @@
 {
   "name": "@workbench-kit/react",
-  "version": "0.0.2-prototype.0.2.14",
+  "version": "0.0.2-prototype.0.2.16",
   "private": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "type": "module",
   "exports": {
     ".": "./src/index.ts",
@@ -21,8 +24,11 @@
     "./workbench/settings": "./src/workbench/settings/index.ts",
     "./workbench": "./src/workbench/index.ts",
     "./workbench/activityBarOrder": "./src/workbench/shell/activityBarOrder.ts",
+    "./workbench/command-ui": "./src/workbench/commands/command-ui.ts",
     "./workbench/markdown-preview": "./src/workbench/markdown/MarkdownPreview.tsx",
     "./workbench/shell": "./src/workbench/shell/shell.ts",
+    "./workbench/standalone": "./src/workbench/shell/standalone.ts",
+    "./workbench/theme": "./src/workbench/theme/theme.ts",
     "./workbench/theme-provider": "./src/workbench/theme/WorkbenchThemeProvider.tsx",
     "./workbench/themePresets": "./src/workbench/theme/themePresets.ts",
     "./workbench/split-view": "./src/workbench/shell/SplitView.tsx",
@@ -54,19 +60,18 @@
     "!src/**/*.stories.tsx"
   ],
   "dependencies": {
-    "@dnd-kit/core": "^6.3.1",
     "@vscode/codicons": "^0.0.45",
     "remark-gfm": "^4.0.1",
     "rehype-sanitize": "^6.0.0",
-    "@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"
+    "@workbench-kit/adapters": "0.0.2-prototype.0.2.16",
+    "@workbench-kit/contracts": "0.0.2-prototype.0.2.16",
+    "@workbench-kit/monaco": "0.0.2-prototype.0.2.16",
+    "@workbench-kit/platform": "0.0.2-prototype.0.2.16",
+    "@workbench-kit/jdw": "0.0.2-prototype.0.2.16",
+    "@workbench-kit/runtime": "0.0.2-prototype.0.2.16",
+    "@workbench-kit/tokens": "0.0.2-prototype.0.2.16",
+    "@workbench-kit/workspace": "0.0.2-prototype.0.2.16",
+    "@workbench-kit/services": "0.0.2-prototype.0.2.16"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -89,7 +94,7 @@
     "directory": "packages/react"
   },
   "scripts": {
-    "test": "pnpm exec vitest run --config ../../vitest.config.ts src/widget-tree",
+    "test": "pnpm exec vitest run --config ../../vitest.config.ts src",
     "typecheck": "tsc -p tsconfig.json --noEmit",
     "typecheck:exact-optional": "tsc -p typecheck-exact-optional/tsconfig.emit.json && tsc -p typecheck-exact-optional/tsconfig.json --noEmit"
   }

package/src/index.ts

@@ -100,6 +100,7 @@ export type {
   CreateWorkspaceFilesQuickOpenProviderOptions,
   QuickOpenItem,
   QuickOpenProvider,
+  QuickOpenSearchContext,
   QuickOpenSelectContext,
   WorkbenchQuickOpenProps,
 } from './workbench/commands/WorkbenchQuickOpen';

package/src/layout/index.ts

@@ -151,6 +151,8 @@ export type {
 } from './propertyFieldFilter';
 export { WorkbenchMediaPreviewViewport } from './WorkbenchMediaPreviewViewport';
 export type { WorkbenchMediaPreviewViewportProps } from './WorkbenchMediaPreviewViewport';
+export { WorkbenchPreviewCanvas } from './WorkbenchCanvas';
+export type { WorkbenchPreviewCanvasProps } from './WorkbenchCanvas';
 export {
   clampPreviewViewportZoom,
   computePreviewViewportFitScale,

package/src/workbench/commands/WorkbenchQuickOpen.tsx

@@ -30,6 +30,12 @@ interface WorkbenchQuickOpenKeyEvent {
   preventDefault: () => void;
 }
 
+interface QuickOpenResult {
+  item: QuickOpenItem;
+  key: string;
+  provider: QuickOpenProvider;
+}
+
 function useControllableQuery({
   defaultQuery = '',
   query,
@@ -63,11 +69,12 @@ export interface WorkbenchQuickOpenProps extends Omit<
   emptyLabel?: ReactNode | undefined;
   onActiveItemChange?: ((itemId: string) => void) | undefined;
   onClose: () => void;
+  onProviderError?: ((error: unknown, provider: QuickOpenProvider) => void) | undefined;
   onQueryChange?: ((query: string) => void) | undefined;
   onSelectItem?: ((item: QuickOpenItem, context: QuickOpenSelectContext) => void) | undefined;
   open?: boolean | undefined;
   placeholder?: string | undefined;
-  /** When omitted, the first provider is used. */
+  /** Restrict search to one provider. When omitted, all providers contribute. */
   providerId?: string | undefined;
   providers: readonly QuickOpenProvider[];
   query?: string | undefined;
@@ -84,6 +91,7 @@ export function WorkbenchQuickOpen({
   emptyLabel = 'No matching files',
   onActiveItemChange,
   onClose,
+  onProviderError,
   onQueryChange,
   onSelectItem,
   open = true,
@@ -99,33 +107,49 @@ export function WorkbenchQuickOpen({
   const listId = useId();
   const dialogRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
-  const [uncontrolledActiveItemId, setUncontrolledActiveItemId] = useState<string>();
-  const [items, setItems] = useState<QuickOpenItem[]>([]);
+  const [uncontrolledActiveResultKey, setUncontrolledActiveResultKey] = useState<string>();
+  const [results, setResults] = useState<QuickOpenResult[]>([]);
   const [searching, setSearching] = useState(false);
+  const onProviderErrorRef = useRef(onProviderError);
   const [resolvedQuery, setResolvedQuery] = useControllableQuery({
     defaultQuery,
     onQueryChange,
     query,
   });
 
-  const activeProvider = useMemo(() => {
+  useEffect(() => {
+    onProviderErrorRef.current = onProviderError;
+  }, [onProviderError]);
+
+  const activeProviders = useMemo(() => {
     if (providerId) {
-      return providers.find((provider) => provider.id === providerId) ?? providers[0];
+      const provider = providers.find((candidate) => candidate.id === providerId);
+      return provider ? [provider] : [];
     }
-    return providers[0];
+    return providers;
   }, [providerId, providers]);
 
-  const resolvedActiveItemId = activeItemId ?? uncontrolledActiveItemId ?? items[0]?.id;
-  const activeIndex = items.findIndex((item) => item.id === resolvedActiveItemId);
-  const activeItem = activeIndex >= 0 ? items[activeIndex] : items.find(isQuickOpenItemSelectable);
+  const items = useMemo(() => results.map(({ item }) => item), [results]);
+  const controlledActiveResult = activeItemId
+    ? results.find(({ item }) => item.id === activeItemId && isQuickOpenItemSelectable(item))
+    : undefined;
+  const uncontrolledActiveResult = results.find(
+    ({ item, key }) => key === uncontrolledActiveResultKey && isQuickOpenItemSelectable(item),
+  );
+  const activeResult =
+    controlledActiveResult ??
+    uncontrolledActiveResult ??
+    results.find(({ item }) => isQuickOpenItemSelectable(item));
+  const resolvedActiveResultKey = activeResult?.key;
+  const activeIndex = activeResult ? results.indexOf(activeResult) : -1;
 
   const updateActiveItem = useCallback(
-    (itemId: string | undefined) => {
-      if (!itemId) return;
+    (result: QuickOpenResult | undefined) => {
+      if (!result) return;
       if (activeItemId === undefined) {
-        setUncontrolledActiveItemId(itemId);
+        setUncontrolledActiveResultKey(result.key);
       }
-      onActiveItemChange?.(itemId);
+      onActiveItemChange?.(result.item.id);
     },
     [activeItemId, onActiveItemChange],
   );
@@ -139,25 +163,44 @@ export function WorkbenchQuickOpen({
   });
 
   useEffect(() => {
-    if (!open || !activeProvider) {
-      setItems([]);
+    if (!open || activeProviders.length === 0) {
+      setResults([]);
       setSearching(false);
       return undefined;
     }
 
+    const controller = new AbortController();
     let cancelled = false;
     const runSearch = async () => {
+      setResults([]);
       setSearching(true);
-      try {
-        const nextItems = await Promise.resolve(activeProvider.search(resolvedQuery));
-        if (!cancelled) {
-          setItems(nextItems);
-        }
-      } finally {
-        if (!cancelled) {
-          setSearching(false);
+      const providerResults = activeProviders.map<QuickOpenResult[] | undefined>(() => undefined);
+      const publishAvailableResults = () => {
+        setResults(providerResults.flatMap((providerItems) => providerItems ?? []));
+      };
+      const searches = activeProviders.map(async (provider, providerIndex) => {
+        try {
+          const providerItems = await Promise.resolve(
+            provider.search(resolvedQuery, { signal: controller.signal }),
+          );
+          if (cancelled) return;
+
+          providerResults[providerIndex] = providerItems.map((item, itemIndex) => ({
+            item,
+            key: `${providerIndex}:${itemIndex}:${provider.id}:${item.id}`,
+            provider,
+          }));
+          publishAvailableResults();
+        } catch (error) {
+          if (cancelled) return;
+          providerResults[providerIndex] = [];
+          publishAvailableResults();
+          onProviderErrorRef.current?.(error, provider);
         }
-      }
+      });
+
+      await Promise.allSettled(searches);
+      if (!cancelled) setSearching(false);
     };
 
     // Empty query (recent / top-level) should paint immediately; debounce typed queries.
@@ -166,6 +209,7 @@ export function WorkbenchQuickOpen({
       void runSearch();
       return () => {
         cancelled = true;
+        controller.abort();
       };
     }
 
@@ -175,30 +219,35 @@ export function WorkbenchQuickOpen({
 
     return () => {
       cancelled = true;
+      controller.abort();
       window.clearTimeout(timer);
     };
-  }, [activeProvider, debounceMs, open, resolvedQuery]);
+  }, [activeProviders, debounceMs, open, resolvedQuery]);
 
   useEffect(() => {
     if (!open) return;
     if (activeItemId !== undefined) return;
 
-    setUncontrolledActiveItemId((currentItemId) => {
-      const nextItemId = items.find(isQuickOpenItemSelectable)?.id;
-      return currentItemId === nextItemId ? currentItemId : nextItemId;
+    setUncontrolledActiveResultKey((currentResultKey) => {
+      const currentResult = results.find(({ key }) => key === currentResultKey);
+      if (currentResult && isQuickOpenItemSelectable(currentResult.item)) {
+        return currentResultKey;
+      }
+
+      return results.find(({ item }) => isQuickOpenItemSelectable(item))?.key;
     });
-  }, [activeItemId, items, open]);
+  }, [activeItemId, open, results]);
 
   const selectItem = useCallback(
-    (item: QuickOpenItem, index: number) => {
-      if (!isQuickOpenItemSelectable(item) || !activeProvider) return;
-      onSelectItem?.(item, {
+    (result: QuickOpenResult, index: number) => {
+      if (!isQuickOpenItemSelectable(result.item)) return;
+      onSelectItem?.(result.item, {
         index,
-        providerId: activeProvider.id,
+        providerId: result.provider.id,
         query: resolvedQuery,
       });
     },
-    [activeProvider, onSelectItem, resolvedQuery],
+    [onSelectItem, resolvedQuery],
   );
 
   const handleQuickOpenKeyDown = useCallback(
@@ -216,9 +265,9 @@ export function WorkbenchQuickOpen({
       }
 
       if (event.key === 'Enter') {
-        if (!activeItem) return;
+        if (!activeResult) return;
         event.preventDefault();
-        selectItem(activeItem, Math.max(activeIndex, 0));
+        selectItem(activeResult, Math.max(activeIndex, 0));
         return;
       }
 
@@ -258,10 +307,10 @@ export function WorkbenchQuickOpen({
       }
 
       if (nextIndex >= 0) {
-        updateActiveItem(items[nextIndex]?.id);
+        updateActiveItem(results[nextIndex]);
       }
     },
-    [activeIndex, activeItem, items, selectItem, updateActiveItem],
+    [activeIndex, activeResult, items, results, selectItem, updateActiveItem],
   );
 
   useEffect(() => {
@@ -283,14 +332,14 @@ export function WorkbenchQuickOpen({
   };
 
   useEffect(() => {
-    if (!resolvedActiveItemId) return;
+    if (!resolvedActiveResultKey) return;
 
     const activeElement = Array.from(
       dialogRef.current?.querySelectorAll<HTMLElement>('[data-quick-open-id]') ?? [],
-    ).find((element) => element.dataset.quickOpenId === resolvedActiveItemId);
+    ).find((element) => element.dataset.quickOpenId === resolvedActiveResultKey);
 
     activeElement?.scrollIntoView?.({ block: 'nearest' });
-  }, [items, resolvedActiveItemId]);
+  }, [resolvedActiveResultKey, results]);
 
   if (!open) return null;
 
@@ -322,7 +371,7 @@ export function WorkbenchQuickOpen({
           <TextInput
             ref={inputRef}
             aria-activedescendant={
-              activeItem ? `${listId}-${activeItem.id.replace(/[^\w-]/g, '_')}` : undefined
+              activeResult ? `${listId}-${activeResult.key.replace(/[^\w-]/g, '_')}` : undefined
             }
             aria-controls={listId}
             aria-label={placeholder}
@@ -342,29 +391,30 @@ export function WorkbenchQuickOpen({
           className={cx('ui-workbench-command-list', 'ui-workbench-scrollbar')}
           role="listbox"
         >
-          {items.length === 0 ? (
+          {results.length === 0 ? (
             <EmptyState compact icon="codicon-search">
               {emptyLabel}
             </EmptyState>
           ) : (
-            items.map((item, index) => {
-              const active = item.id === resolvedActiveItemId;
-              const itemDomId = `${listId}-${item.id.replace(/[^\w-]/g, '_')}`;
+            results.map((result, index) => {
+              const { item, key, provider } = result;
+              const active = key === resolvedActiveResultKey;
+              const itemDomId = `${listId}-${key.replace(/[^\w-]/g, '_')}`;
               const descriptionId = item.description ? `${itemDomId}-description` : undefined;
 
               return (
                 <Button
-                  key={item.id}
+                  key={key}
                   id={itemDomId}
                   aria-describedby={descriptionId}
                   aria-selected={active}
                   className="ui-workbench-command-item"
                   data-active={active ? 'true' : undefined}
-                  data-quick-open-id={item.id}
+                  data-quick-open-id={key}
                   disabled={item.disabled}
                   role="option"
-                  onClick={() => selectItem(item, index)}
-                  onMouseEnter={() => updateActiveItem(item.id)}
+                  onClick={() => selectItem(result, index)}
+                  onMouseEnter={() => updateActiveItem(result)}
                 >
                   <span className="ui-workbench-command-item__icon">
                     {item.icon ? <i aria-hidden="true" className={cxCodicon(item.icon)} /> : null}
@@ -380,11 +430,8 @@ export function WorkbenchQuickOpen({
                   <span className="ui-workbench-command-item__meta">
                     {item.detail ? (
                       <span className="ui-workbench-command-item__category">{item.detail}</span>
-                    ) : activeProvider ? (
-                      <span className="ui-workbench-command-item__category">
-                        {activeProvider.label}
-                      </span>
                     ) : null}
+                    <span className="ui-workbench-command-item__category">{provider.label}</span>
                   </span>
                 </Button>
               );
@@ -396,7 +443,12 @@ export function WorkbenchQuickOpen({
   );
 }
 
-export type { QuickOpenItem, QuickOpenProvider, QuickOpenSelectContext } from './quick-open-model';
+export type {
+  QuickOpenItem,
+  QuickOpenProvider,
+  QuickOpenSearchContext,
+  QuickOpenSelectContext,
+} from './quick-open-model';
 export {
   DEFAULT_QUICK_OPEN_SEARCH_DEBOUNCE_MS,
   getNextQuickOpenItemIndex,

package/src/workbench/commands/command-ui.ts

@@ -0,0 +1,3 @@
+export * from './CommandPalette';
+export * from './ShortcutCommandBridge';
+export * from './WorkbenchQuickOpen';

package/src/workbench/commands/quick-open-model.ts

@@ -1,5 +1,5 @@
 export interface QuickOpenItem {
-  /** Stable item id (often a workspace path). */
+  /** Stable within its provider (often a workspace path). */
   id: string;
   label: string;
   description?: string | undefined;
@@ -10,10 +10,19 @@ export interface QuickOpenItem {
   data?: unknown;
 }
 
+export interface QuickOpenSearchContext {
+  /** Aborted when the query, provider set, or open state changes. */
+  signal: AbortSignal;
+}
+
 export interface QuickOpenProvider {
+  /** Unique within the provider set passed to Quick Open. */
   id: string;
   label: string;
-  search: (query: string) => Promise<QuickOpenItem[]> | QuickOpenItem[];
+  search: (
+    query: string,
+    context?: QuickOpenSearchContext,
+  ) => Promise<QuickOpenItem[]> | QuickOpenItem[];
 }
 
 export interface QuickOpenSelectContext {

package/src/workbench/index.ts

@@ -228,6 +228,7 @@ export type {
   CreateWorkspaceFilesQuickOpenProviderOptions,
   QuickOpenItem,
   QuickOpenProvider,
+  QuickOpenSearchContext,
   QuickOpenSelectContext,
   WorkbenchQuickOpenProps,
 } from './commands/WorkbenchQuickOpen';

package/src/workbench/shell/standalone.ts

@@ -99,3 +99,15 @@ export type WorkbenchStandaloneBootstrapEvent<TActivityId extends string = strin
   | { type: 'activity-change'; payload: WorkbenchActivityChangeEvent<TActivityId> }
   | { type: 'status-message'; message: string }
   | { type: 'error'; error: Error };
+
+export * from './WorkbenchStandaloneShell';
+export {
+  createWorkbenchStandaloneShellStateSnapshot,
+  useWorkbenchStandaloneShellContext,
+} from './workbenchStandaloneShellReactContext';
+export type {
+  WorkbenchStandaloneShellStateChange,
+  WorkbenchStandaloneShellStateChangeKind,
+  WorkbenchStandaloneShellStateSnapshot,
+} from './workbenchStandaloneShellReactContext';
+export { useWorkbenchStandaloneShellStateSync } from './useWorkbenchStandaloneShellStateSync';

package/src/workbench/views/view-hosts.css

@@ -3,19 +3,19 @@
 .workbench-search-view,
 .workbench-chat-view,
 .workbench-primary-sidebar .ui-sidebar-view,
-.shell-react-primary-sidebar {
+.shell-react-sidebar-host {
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
   min-height: 0;
 }
 
-.shell-react-primary-sidebar > section {
+.shell-react-sidebar-host > section {
   /* section is semantic only; view host frame carries sidebar flex sizing */
   display: contents;
 }
 
-.shell-react-primary-sidebar [data-view-host-id] {
+.shell-react-sidebar-host [data-view-host-id] {
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;