@workbench-kit/react 0.0.2-prototype.0.1.4 → 0.0.2-prototype.0.2.11

package/src/workbench/CommandPalette.tsx

@@ -1,819 +0,0 @@
-import {
-  useEffect,
-  useId,
-  useMemo,
-  useRef,
-  useState,
-  type ComponentPropsWithRef,
-  type KeyboardEvent,
-  type ReactNode,
-} from 'react';
-import type { CommandMenuItem, ResolvedCommandMenuCommandItem } from '@workbench-kit/platform';
-import { EmptyState } from '../primitives/EmptyState';
-import { cxCodicon } from '../utils/codicon';
-import { cx } from '../utils/cx';
-import {
-  getWorkbenchStatusLabel,
-  isWorkbenchStatusBusy,
-  isWorkbenchStatusDisabled,
-  type WorkbenchStatus,
-} from './status';
-
-export type WorkbenchCommandStatus = WorkbenchStatus;
-
-export interface WorkbenchCommandExecution {
-  kind: 'agent' | 'local' | 'remote' | 'composite' | (string & {});
-  label?: string | undefined;
-}
-
-export type WorkbenchCommandFeedback = 'none' | 'status' | 'timeline';
-export type WorkbenchCommandOutput = 'none' | 'message' | 'event' | 'artifact';
-export type WorkbenchCommandSideEffect = 'none' | 'workspace-write' | 'external-write';
-export type WorkbenchCommandRunSource = 'grouped-list' | 'list' | 'palette' | 'suggest';
-export type WorkbenchCommandGroupBy =
-  | 'category'
-  | 'danger'
-  | 'execution'
-  | 'feedback'
-  | 'keyword'
-  | 'output'
-  | 'sideEffect'
-  | 'status';
-
-export interface WorkbenchCommandDescriptor {
-  category?: string | undefined;
-  danger?: boolean | undefined;
-  description?: string | undefined;
-  disabled?: boolean | undefined;
-  disabledReason?: string | undefined;
-  execution?: WorkbenchCommandExecution | undefined;
-  feedback?: WorkbenchCommandFeedback | undefined;
-  icon?: string | undefined;
-  id: string;
-  keywords?: readonly string[] | undefined;
-  label: string;
-  metadata?: Record<string, unknown> | undefined;
-  output?: WorkbenchCommandOutput | undefined;
-  shortcut?: string | undefined;
-  sideEffect?: WorkbenchCommandSideEffect | undefined;
-  status?: WorkbenchCommandStatus | undefined;
-}
-
-export interface WorkbenchCommandRunContext {
-  groupId?: string | undefined;
-  groupLabel?: string | undefined;
-  index: number;
-  query: string;
-  source: WorkbenchCommandRunSource;
-}
-
-export interface WorkbenchCommandFilterInput {
-  commands: readonly WorkbenchCommandDescriptor[];
-  limit?: number | undefined;
-  query?: string | undefined;
-}
-
-export interface WorkbenchCommandNavigationInput {
-  commands: readonly WorkbenchCommandDescriptor[];
-  currentIndex: number;
-  direction: 'next' | 'previous';
-}
-
-export interface WorkbenchCommandGroup {
-  commands: readonly WorkbenchCommandDescriptor[];
-  id: string;
-  label: string;
-}
-
-export interface WorkbenchCommandGroupingInput {
-  commands: readonly WorkbenchCommandDescriptor[];
-  fallbackGroupLabel?: string | undefined;
-  groupBy?: WorkbenchCommandGroupBy | undefined;
-}
-
-export type WorkbenchCommandDescriptorOverrides = Partial<
-  Omit<WorkbenchCommandDescriptor, 'danger' | 'disabled' | 'icon' | 'id' | 'label' | 'shortcut'>
->;
-
-const commandExecutionLabels: Record<string, string> = {
-  agent: 'Agent',
-  composite: 'Composite',
-  local: 'Local',
-  remote: 'Remote',
-};
-
-const commandFeedbackLabels: Record<WorkbenchCommandFeedback, string> = {
-  none: 'No feedback',
-  status: 'Status',
-  timeline: 'Timeline',
-};
-
-const commandOutputLabels: Record<WorkbenchCommandOutput, string> = {
-  artifact: 'Artifact',
-  event: 'Event',
-  message: 'Message',
-  none: 'No output',
-};
-
-const commandSideEffectLabels: Record<WorkbenchCommandSideEffect, string> = {
-  'external-write': 'External write',
-  none: 'No side effect',
-  'workspace-write': 'Workspace write',
-};
-
-function normalizedSearchText(value: string) {
-  return value.trim().toLocaleLowerCase();
-}
-
-function commandSearchText(command: WorkbenchCommandDescriptor) {
-  return normalizedSearchText(
-    [
-      command.id,
-      command.label,
-      command.description,
-      command.category,
-      command.shortcut,
-      ...(command.keywords ?? []),
-    ]
-      .filter(Boolean)
-      .join(' '),
-  );
-}
-
-export function getWorkbenchCommandStatusLabel(status: WorkbenchCommandStatus) {
-  return getWorkbenchStatusLabel(status);
-}
-
-export function getWorkbenchCommandExecutionLabel(execution: WorkbenchCommandExecution) {
-  return execution.label ?? commandExecutionLabels[execution.kind] ?? execution.kind;
-}
-
-export function isWorkbenchCommandRunnable(command: WorkbenchCommandDescriptor) {
-  return !(command.disabled || (command.status && isWorkbenchStatusDisabled(command.status)));
-}
-
-function normalizeWorkbenchCommandGroupId(label: string) {
-  const normalized = normalizedSearchText(label)
-    .replace(/[^\p{L}\p{N}]+/gu, '-')
-    .replace(/^-+|-+$/g, '');
-
-  return normalized || 'group';
-}
-
-function getWorkbenchCommandGroupLabels({
-  command,
-  fallbackGroupLabel,
-  groupBy = 'category',
-}: {
-  command: WorkbenchCommandDescriptor;
-  fallbackGroupLabel: string;
-  groupBy?: WorkbenchCommandGroupBy | undefined;
-}) {
-  if (groupBy === 'keyword') {
-    return command.keywords?.length ? [...command.keywords] : [fallbackGroupLabel];
-  }
-
-  if (groupBy === 'category') return [command.category ?? fallbackGroupLabel];
-  if (groupBy === 'danger') return [command.danger ? 'Danger' : 'Default'];
-  if (groupBy === 'execution') {
-    return [
-      command.execution ? getWorkbenchCommandExecutionLabel(command.execution) : fallbackGroupLabel,
-    ];
-  }
-  if (groupBy === 'feedback')
-    return [command.feedback ? commandFeedbackLabels[command.feedback] : fallbackGroupLabel];
-  if (groupBy === 'output')
-    return [command.output ? commandOutputLabels[command.output] : fallbackGroupLabel];
-  if (groupBy === 'sideEffect') {
-    return [command.sideEffect ? commandSideEffectLabels[command.sideEffect] : fallbackGroupLabel];
-  }
-
-  const status = command.status ?? (command.disabled ? 'disabled' : undefined);
-  return [status ? getWorkbenchCommandStatusLabel(status) : fallbackGroupLabel];
-}
-
-export function groupWorkbenchCommands({
-  commands,
-  fallbackGroupLabel = 'Other',
-  groupBy = 'category',
-}: WorkbenchCommandGroupingInput): WorkbenchCommandGroup[] {
-  const groups = new Map<string, { commands: WorkbenchCommandDescriptor[]; label: string }>();
-
-  commands.forEach((command) => {
-    getWorkbenchCommandGroupLabels({ command, fallbackGroupLabel, groupBy }).forEach((label) => {
-      const id = normalizeWorkbenchCommandGroupId(`${groupBy}-${label}`);
-      const group = groups.get(id) ?? { commands: [], label };
-
-      group.commands.push(command);
-      groups.set(id, group);
-    });
-  });
-
-  return Array.from(groups, ([id, group]) => ({
-    commands: group.commands,
-    id,
-    label: group.label,
-  }));
-}
-
-export function filterWorkbenchCommands({
-  commands,
-  limit,
-  query = '',
-}: WorkbenchCommandFilterInput) {
-  const tokens = normalizedSearchText(query).split(/\s+/).filter(Boolean);
-  const filtered = tokens.length
-    ? commands.filter((command) => {
-        const searchText = commandSearchText(command);
-        return tokens.every((token) => searchText.includes(token));
-      })
-    : [...commands];
-
-  return typeof limit === 'number' ? filtered.slice(0, limit) : filtered;
-}
-
-export function getNextWorkbenchCommandIndex({
-  commands,
-  currentIndex,
-  direction,
-}: WorkbenchCommandNavigationInput) {
-  if (commands.length === 0) return -1;
-
-  const step = direction === 'next' ? 1 : -1;
-  const startIndex =
-    currentIndex >= 0 && currentIndex < commands.length
-      ? currentIndex
-      : direction === 'next'
-        ? -1
-        : 0;
-
-  for (let offset = 1; offset <= commands.length; offset += 1) {
-    const nextIndex = (startIndex + step * offset + commands.length) % commands.length;
-    const command = commands[nextIndex];
-    if (command && isWorkbenchCommandRunnable(command)) return nextIndex;
-  }
-
-  return -1;
-}
-
-export function commandMenuItemToWorkbenchCommandDescriptor(
-  item: ResolvedCommandMenuCommandItem,
-  overrides: WorkbenchCommandDescriptorOverrides = {},
-): WorkbenchCommandDescriptor {
-  const metadata = {
-    menuItemId: item.id,
-    ...overrides.metadata,
-  };
-
-  return {
-    ...overrides,
-    danger: item.danger,
-    disabled: item.disabled,
-    icon: item.icon,
-    id: item.commandId,
-    label: item.label,
-    metadata,
-    shortcut: item.shortcut,
-  };
-}
-
-export function commandMenuItemsToWorkbenchCommandDescriptors(
-  items: readonly CommandMenuItem[],
-  overridesByCommandId: Record<string, WorkbenchCommandDescriptorOverrides> = {},
-) {
-  return items.flatMap((item) =>
-    item.type === 'command'
-      ? [commandMenuItemToWorkbenchCommandDescriptor(item, overridesByCommandId[item.commandId])]
-      : [],
-  );
-}
-
-function commandIcon(command: WorkbenchCommandDescriptor) {
-  if (!command.icon) return null;
-  return <i aria-hidden="true" className={cxCodicon(command.icon)} />;
-}
-
-function commandStatus(command: WorkbenchCommandDescriptor) {
-  const status = command.status ?? (command.disabled ? 'disabled' : 'idle');
-
-  return (
-    <span
-      aria-label={getWorkbenchCommandStatusLabel(status)}
-      className="ui-workbench-command-item__status"
-      title={getWorkbenchCommandStatusLabel(status)}
-    >
-      <span aria-hidden="true" className="ui-workbench-command-item__status-dot" />
-    </span>
-  );
-}
-
-function commandExecution(command: WorkbenchCommandDescriptor) {
-  if (!command.execution) return null;
-
-  return (
-    <span className="ui-workbench-command-item__chip">
-      {getWorkbenchCommandExecutionLabel(command.execution)}
-    </span>
-  );
-}
-
-export interface WorkbenchCommandListProps extends Omit<
-  ComponentPropsWithRef<'div'>,
-  'children' | 'onSelect'
-> {
-  activeCommandId?: string | undefined;
-  commands: readonly WorkbenchCommandDescriptor[];
-  emptyLabel?: ReactNode | undefined;
-  onActiveCommandChange?: ((commandId: string) => void) | undefined;
-  onRunCommand?:
-    | ((command: WorkbenchCommandDescriptor, context: WorkbenchCommandRunContext) => void)
-    | undefined;
-  query?: string | undefined;
-  source?: WorkbenchCommandRunSource | undefined;
-}
-
-export function WorkbenchCommandList({
-  activeCommandId,
-  className,
-  commands,
-  emptyLabel = 'No commands available',
-  id,
-  onActiveCommandChange,
-  onRunCommand,
-  query = '',
-  source = 'list',
-  ...props
-}: WorkbenchCommandListProps) {
-  const generatedId = useId();
-  const listId = id ?? generatedId;
-
-  if (commands.length === 0) {
-    return (
-      <div id={id} className={cx('ui-workbench-command-list', className)} {...props}>
-        <EmptyState compact icon="codicon-search">
-          {emptyLabel}
-        </EmptyState>
-      </div>
-    );
-  }
-
-  return (
-    <div
-      id={id}
-      aria-label={props['aria-label'] ?? 'Commands'}
-      className={cx('ui-workbench-command-list', className)}
-      role="listbox"
-      {...props}
-    >
-      {commands.map((command, index) => {
-        const active = command.id === activeCommandId;
-        const disabled = !isWorkbenchCommandRunnable(command);
-        const itemId = `${listId}-${command.id}`;
-        const descriptionId = command.description ? `${itemId}-description` : undefined;
-        const disabledReasonId = command.disabledReason ? `${itemId}-disabled` : undefined;
-
-        return (
-          <button
-            key={command.id}
-            id={itemId}
-            aria-busy={command.status && isWorkbenchStatusBusy(command.status) ? true : undefined}
-            aria-describedby={
-              [descriptionId, disabledReasonId].filter(Boolean).join(' ') || undefined
-            }
-            aria-selected={active}
-            className="ui-workbench-command-item"
-            data-active={active ? 'true' : undefined}
-            data-danger={command.danger ? 'true' : undefined}
-            data-status={command.status ?? (command.disabled ? 'disabled' : 'idle')}
-            disabled={disabled}
-            role="option"
-            type="button"
-            onClick={() => onRunCommand?.(command, { index, query, source })}
-            onMouseDown={(event) => {
-              if (source === 'suggest') event.preventDefault();
-            }}
-            onMouseEnter={() => onActiveCommandChange?.(command.id)}
-          >
-            <span className="ui-workbench-command-item__icon">{commandIcon(command)}</span>
-            <span className="ui-workbench-command-item__content">
-              <span className="ui-workbench-command-item__label">{command.label}</span>
-              {command.description ? (
-                <span id={descriptionId} className="ui-workbench-command-item__description">
-                  {command.description}
-                </span>
-              ) : null}
-              {command.disabledReason ? (
-                <span id={disabledReasonId} className="ui-visually-hidden">
-                  {command.disabledReason}
-                </span>
-              ) : null}
-            </span>
-            <span className="ui-workbench-command-item__meta">
-              {command.category ? (
-                <span className="ui-workbench-command-item__category">{command.category}</span>
-              ) : null}
-              {commandExecution(command)}
-              {command.shortcut ? (
-                <kbd className="ui-workbench-command-item__shortcut">{command.shortcut}</kbd>
-              ) : null}
-              {commandStatus(command)}
-            </span>
-          </button>
-        );
-      })}
-    </div>
-  );
-}
-
-export interface WorkbenchCommandGroupShellProps extends Omit<
-  ComponentPropsWithRef<'div'>,
-  'children' | 'onSelect'
-> {
-  activeCommandId?: string | undefined;
-  commands: readonly WorkbenchCommandDescriptor[];
-  emptyLabel?: ReactNode | undefined;
-  fallbackGroupLabel?: string | undefined;
-  groupBy?: WorkbenchCommandGroupBy | undefined;
-  groupNavLabel?: string | undefined;
-  onActiveCommandChange?: ((commandId: string) => void) | undefined;
-  onRunCommand?:
-    | ((command: WorkbenchCommandDescriptor, context: WorkbenchCommandRunContext) => void)
-    | undefined;
-  query?: string | undefined;
-  showGroupCounts?: boolean | undefined;
-  showGroupNav?: boolean | undefined;
-}
-
-export function WorkbenchCommandGroupShell({
-  activeCommandId,
-  className,
-  commands,
-  emptyLabel = 'No commands available',
-  fallbackGroupLabel = 'Other',
-  groupBy = 'category',
-  groupNavLabel = 'Command groups',
-  onActiveCommandChange,
-  onRunCommand,
-  query = '',
-  showGroupCounts = true,
-  showGroupNav = true,
-  ...props
-}: WorkbenchCommandGroupShellProps) {
-  const generatedId = useId().replace(/:/g, '');
-  const filteredCommands = useMemo(
-    () => filterWorkbenchCommands({ commands, query }),
-    [commands, query],
-  );
-  const groups = useMemo(
-    () => groupWorkbenchCommands({ commands: filteredCommands, fallbackGroupLabel, groupBy }),
-    [fallbackGroupLabel, filteredCommands, groupBy],
-  );
-
-  if (groups.length === 0) {
-    return (
-      <div
-        className={cx('ui-workbench-command-group-shell', className)}
-        data-show-group-nav={showGroupNav ? 'true' : 'false'}
-        {...props}
-      >
-        <EmptyState compact icon="codicon-symbol-keyword">
-          {emptyLabel}
-        </EmptyState>
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className={cx('ui-workbench-command-group-shell', className)}
-      data-show-group-nav={showGroupNav ? 'true' : 'false'}
-      {...props}
-    >
-      {showGroupNav ? (
-        <nav aria-label={groupNavLabel} className="ui-workbench-command-group-shell__nav">
-          {groups.map((group) => (
-            <a
-              key={group.id}
-              className="ui-workbench-command-group-shell__nav-link"
-              href={`#${generatedId}-${group.id}`}
-            >
-              <span>{group.label}</span>
-              {showGroupCounts ? <em>{group.commands.length}</em> : null}
-            </a>
-          ))}
-        </nav>
-      ) : null}
-      <div className="ui-workbench-command-group-shell__content">
-        {groups.map((group) => {
-          const titleId = `${generatedId}-${group.id}-title`;
-
-          return (
-            <section
-              key={group.id}
-              id={`${generatedId}-${group.id}`}
-              className="ui-workbench-command-group-shell__section"
-              aria-labelledby={titleId}
-            >
-              <div className="ui-workbench-command-group-shell__section-header">
-                <h2 id={titleId}>{group.label}</h2>
-                {showGroupCounts ? <span>{group.commands.length}</span> : null}
-              </div>
-              <WorkbenchCommandList
-                activeCommandId={activeCommandId}
-                aria-label={`${group.label} commands`}
-                commands={group.commands}
-                emptyLabel={emptyLabel}
-                query={query}
-                source="grouped-list"
-                onActiveCommandChange={onActiveCommandChange}
-                onRunCommand={(command, context) =>
-                  onRunCommand?.(command, {
-                    ...context,
-                    groupId: group.id,
-                    groupLabel: group.label,
-                  })
-                }
-              />
-            </section>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-function useControllableCommandQuery({
-  defaultQuery = '',
-  query,
-  onQueryChange,
-}: {
-  defaultQuery?: string | undefined;
-  query?: string | undefined;
-  onQueryChange?: ((query: string) => void) | undefined;
-}) {
-  const [uncontrolledQuery, setUncontrolledQuery] = useState(defaultQuery);
-  const resolvedQuery = query ?? uncontrolledQuery;
-
-  const setQuery = (nextQuery: string) => {
-    if (query === undefined) {
-      setUncontrolledQuery(nextQuery);
-    }
-    onQueryChange?.(nextQuery);
-  };
-
-  return [resolvedQuery, setQuery] as const;
-}
-
-export interface WorkbenchCommandPaletteProps extends Omit<
-  ComponentPropsWithRef<'div'>,
-  'children' | 'onSelect' | 'title'
-> {
-  activeCommandId?: string | undefined;
-  closeLabel?: string | undefined;
-  commands: readonly WorkbenchCommandDescriptor[];
-  defaultQuery?: string | undefined;
-  emptyLabel?: ReactNode | undefined;
-  onActiveCommandChange?: ((commandId: string) => void) | undefined;
-  onClose: () => void;
-  onQueryChange?: ((query: string) => void) | undefined;
-  onRunCommand?:
-    | ((command: WorkbenchCommandDescriptor, context: WorkbenchCommandRunContext) => void)
-    | undefined;
-  open?: boolean | undefined;
-  placeholder?: string | undefined;
-  query?: string | undefined;
-  restoreFocusOnClose?: boolean | undefined;
-  title?: ReactNode | undefined;
-}
-
-export function WorkbenchCommandPalette({
-  activeCommandId,
-  className,
-  closeLabel = 'Close command palette',
-  commands,
-  defaultQuery,
-  emptyLabel = 'No commands match your search',
-  onActiveCommandChange,
-  onClose,
-  onQueryChange,
-  onRunCommand,
-  open = true,
-  placeholder = 'Search commands',
-  query,
-  restoreFocusOnClose = true,
-  title = 'Command Palette',
-  ...props
-}: WorkbenchCommandPaletteProps) {
-  const titleId = useId();
-  const listId = useId();
-  const inputRef = useRef<HTMLInputElement>(null);
-  const previousFocusRef = useRef<HTMLElement | null>(null);
-  const [uncontrolledActiveCommandId, setUncontrolledActiveCommandId] = useState<string>();
-  const [resolvedQuery, setResolvedQuery] = useControllableCommandQuery({
-    defaultQuery,
-    onQueryChange,
-    query,
-  });
-  const filteredCommands = useMemo(
-    () => filterWorkbenchCommands({ commands, query: resolvedQuery }),
-    [commands, resolvedQuery],
-  );
-  const resolvedActiveCommandId = activeCommandId ?? uncontrolledActiveCommandId;
-  const activeIndex = filteredCommands.findIndex(
-    (command) => command.id === resolvedActiveCommandId,
-  );
-  const activeCommand =
-    activeIndex >= 0
-      ? filteredCommands[activeIndex]
-      : filteredCommands.find((command) => isWorkbenchCommandRunnable(command));
-
-  const updateActiveCommand = (commandId: string | undefined) => {
-    if (!commandId) return;
-    if (activeCommandId === undefined) {
-      setUncontrolledActiveCommandId(commandId);
-    }
-    onActiveCommandChange?.(commandId);
-  };
-
-  const restoreFocus = () => {
-    if (!restoreFocusOnClose) return;
-    previousFocusRef.current?.focus();
-  };
-
-  const closePalette = () => {
-    restoreFocus();
-    onClose();
-  };
-
-  const runCommand = (command: WorkbenchCommandDescriptor, context: WorkbenchCommandRunContext) => {
-    if (!isWorkbenchCommandRunnable(command)) return;
-    onRunCommand?.(command, context);
-  };
-
-  useEffect(() => {
-    if (!open) return;
-
-    previousFocusRef.current = document.activeElement as HTMLElement | null;
-    const frame = window.requestAnimationFrame(() => inputRef.current?.focus());
-
-    return () => {
-      window.cancelAnimationFrame(frame);
-      restoreFocus();
-    };
-  }, [open]);
-
-  useEffect(() => {
-    if (!open) return;
-    if (filteredCommands.length === 0) return;
-    if (activeCommand && isWorkbenchCommandRunnable(activeCommand)) return;
-
-    const nextIndex = getNextWorkbenchCommandIndex({
-      commands: filteredCommands,
-      currentIndex: -1,
-      direction: 'next',
-    });
-    updateActiveCommand(filteredCommands[nextIndex]?.id);
-  }, [activeCommand, filteredCommands, open]);
-
-  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === 'Escape') {
-      event.preventDefault();
-      closePalette();
-      return;
-    }
-
-    if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp' && event.key !== 'Enter') return;
-
-    if (event.key === 'Enter') {
-      if (!activeCommand) return;
-      event.preventDefault();
-      runCommand(activeCommand, {
-        index: filteredCommands.findIndex((command) => command.id === activeCommand.id),
-        query: resolvedQuery,
-        source: 'palette',
-      });
-      return;
-    }
-
-    const nextIndex = getNextWorkbenchCommandIndex({
-      commands: filteredCommands,
-      currentIndex: activeIndex,
-      direction: event.key === 'ArrowDown' ? 'next' : 'previous',
-    });
-
-    if (nextIndex >= 0) {
-      event.preventDefault();
-      updateActiveCommand(filteredCommands[nextIndex]?.id);
-    }
-  };
-
-  if (!open) return null;
-
-  return (
-    <div className="ui-workbench-command-palette-overlay" onClick={closePalette}>
-      <div
-        aria-labelledby={titleId}
-        aria-modal="true"
-        className={cx('ui-workbench-command-palette', className)}
-        role="dialog"
-        {...props}
-        onClick={(event) => event.stopPropagation()}
-      >
-        <div className="ui-workbench-command-palette__header">
-          <span id={titleId} className="ui-workbench-command-palette__title">
-            {title}
-          </span>
-          <button
-            aria-label={closeLabel}
-            className="ui-workbench-command-palette__close"
-            type="button"
-            onClick={closePalette}
-          >
-            <i aria-hidden="true" className="codicon codicon-close" />
-          </button>
-        </div>
-        <div className="ui-workbench-command-palette__search">
-          <i aria-hidden="true" className="codicon codicon-search" />
-          <input
-            ref={inputRef}
-            aria-controls={listId}
-            aria-label={placeholder}
-            className="ui-workbench-command-palette__input"
-            placeholder={placeholder}
-            type="search"
-            value={resolvedQuery}
-            onChange={(event) => setResolvedQuery(event.currentTarget.value)}
-            onKeyDown={handleKeyDown}
-          />
-        </div>
-        <WorkbenchCommandList
-          id={listId}
-          activeCommandId={activeCommand?.id}
-          aria-label="Command palette results"
-          commands={filteredCommands}
-          emptyLabel={emptyLabel}
-          query={resolvedQuery}
-          source="palette"
-          onActiveCommandChange={updateActiveCommand}
-          onRunCommand={runCommand}
-        />
-      </div>
-    </div>
-  );
-}
-
-export interface WorkbenchCommandSuggestProps extends Omit<
-  ComponentPropsWithRef<'div'>,
-  'children' | 'onSelect'
-> {
-  activeCommandId?: string | undefined;
-  commands: readonly WorkbenchCommandDescriptor[];
-  emptyLabel?: ReactNode | undefined;
-  onActiveCommandChange?: ((commandId: string) => void) | undefined;
-  onRunCommand?:
-    | ((command: WorkbenchCommandDescriptor, context: WorkbenchCommandRunContext) => void)
-    | undefined;
-  query?: string | undefined;
-  visible?: boolean | undefined;
-}
-
-export function WorkbenchCommandSuggest({
-  activeCommandId,
-  className,
-  commands,
-  emptyLabel = 'No suggested commands',
-  onActiveCommandChange,
-  onRunCommand,
-  query = '',
-  visible = true,
-  ...props
-}: WorkbenchCommandSuggestProps) {
-  const filteredCommands = useMemo(
-    () => filterWorkbenchCommands({ commands, limit: 8, query }),
-    [commands, query],
-  );
-  const fallbackActiveCommand = filteredCommands.find((command) =>
-    isWorkbenchCommandRunnable(command),
-  );
-
-  if (!visible) return null;
-
-  return (
-    <div className={cx('ui-workbench-command-suggest', className)} {...props}>
-      <div className="ui-workbench-command-suggest__header">
-        <span>Commands</span>
-        {query ? <span className="ui-workbench-command-suggest__query">/{query}</span> : null}
-      </div>
-      <WorkbenchCommandList
-        activeCommandId={activeCommandId ?? fallbackActiveCommand?.id}
-        aria-label="Suggested commands"
-        commands={filteredCommands}
-        emptyLabel={emptyLabel}
-        query={query}
-        source="suggest"
-        onActiveCommandChange={onActiveCommandChange}
-        onRunCommand={onRunCommand}
-      />
-    </div>
-  );
-}