@lvce-editor/static-server 0.58.1 → 0.58.2

package/static/{a634959 → 38a6439}/packages/keybindings-view-worker/dist/keyBindingsViewWorkerMain.js

@@ -520,7 +520,8 @@ const splitLines = lines => {
   return lines.split(NewLine);
 };
 const getCurrentStack = () => {
-  const currentStack = joinLines(splitLines(new Error().stack || '').slice(2));
+  const stackLinesToSkip = 3;
+  const currentStack = joinLines(splitLines(new Error().stack || '').slice(stackLinesToSkip));
   return currentStack;
 };
 const getNewLineIndex = (string, startIndex = undefined) => {
@@ -791,6 +792,12 @@ const invokeAndTransfer = (ipc, method, ...params) => {
   return invokeHelper(ipc, method, params, true);
 };
 
+class CommandNotFoundError extends Error {
+  constructor(command) {
+    super(`Command not found ${command}`);
+    this.name = 'CommandNotFoundError';
+  }
+}
 const commands = Object.create(null);
 const register = commandMap => {
   Object.assign(commands, commandMap);
@@ -801,7 +808,7 @@ const getCommand = key => {
 const execute = (command, ...args) => {
   const fn = getCommand(command);
   if (!fn) {
-    throw new Error(`command not found ${command}`);
+    throw new CommandNotFoundError(command);
   }
   return fn(...args);
 };
@@ -873,12 +880,220 @@ const WebWorkerRpcClient = {
   create: create$3
 };
 
+const toCommandId = key => {
+  const dotIndex = key.indexOf('.');
+  return key.slice(dotIndex + 1);
+};
+const create$2 = () => {
+  const states = Object.create(null);
+  const commandMapRef = {};
+  return {
+    get(uid) {
+      return states[uid];
+    },
+    set(uid, oldState, newState) {
+      states[uid] = {
+        oldState,
+        newState
+      };
+    },
+    dispose(uid) {
+      delete states[uid];
+    },
+    getKeys() {
+      return Object.keys(states).map(key => {
+        return Number.parseInt(key);
+      });
+    },
+    clear() {
+      for (const key of Object.keys(states)) {
+        delete states[key];
+      }
+    },
+    wrapCommand(fn) {
+      const wrapped = async (uid, ...args) => {
+        const {
+          newState
+        } = states[uid];
+        const newerState = await fn(newState, ...args);
+        if (newState === newerState) {
+          return;
+        }
+        const latest = states[uid];
+        states[uid] = {
+          oldState: latest.oldState,
+          newState: newerState
+        };
+      };
+      return wrapped;
+    },
+    wrapGetter(fn) {
+      const wrapped = (uid, ...args) => {
+        const {
+          newState
+        } = states[uid];
+        return fn(newState, ...args);
+      };
+      return wrapped;
+    },
+    diff(uid, modules, numbers) {
+      const {
+        oldState,
+        newState
+      } = states[uid];
+      const diffResult = [];
+      for (let i = 0; i < modules.length; i++) {
+        const fn = modules[i];
+        if (!fn(oldState, newState)) {
+          diffResult.push(numbers[i]);
+        }
+      }
+      return diffResult;
+    },
+    getCommandIds() {
+      const keys = Object.keys(commandMapRef);
+      const ids = keys.map(toCommandId);
+      return ids;
+    },
+    registerCommands(commandMap) {
+      Object.assign(commandMapRef, commandMap);
+    }
+  };
+};
+const terminate = () => {
+  globalThis.close();
+};
+
+const map$1 = [/* 0 */'Empty', /* 1 */'BrowserChromium', /* 2 */'BrowserElectron', /* 3 */'BrowserFirefox', /* 4 */'FocusAbout', /* 5 */'FocusActivityBar', /* 6 */'FocusDebugInput', /* 7 */'FocusDialog', /* 8 */'FocusEditor', /* 9 */'FocusEditorCompletions', /* 10 */'FocusEditorImage', /* 11 */'FocusEditorRename', /* 12 */'FocusEditorText', /* 13 */'FocusExplorer', /* 14 */'FocusExplorerEditBox', /* 15 */'FocusExtensions', /* 16 */'FocusFindWidget', /* 17 */'FocusLocationList', /* 18 */'FocusMenu', /* 19 */'FocusProblems', /* 20 */'FocusQuickPickInput', /* 21 */'FocusSearchInput', /* 22 */'FocusSearchResults', /* 23 */'FocusSimpleBrowserInput', /* 24 */'FocusSourceControlInput', /* 25 */'FocusTerminal', /* 26 */'FocusTitleBarMenuBar', /* 27 */'FocusViewletList', /* 28 */'FocusOutput', /* 29 */'FocusDebugConsoleInput', /* 30 */'FocusDebugScope', /* 31 */'FocusSearchReplaceInput', /* 32 */'FocusMatchCase', /* 33 */'FocusRegex', /* 34 */'FocusWholeWord', /* 35 */'FocusReplaceAll', /* 36 */'FocusPreserveCase', /* 37 */'FocusSimpleBrowser', /* 38 */'FocusSourceActions'];
+const getWhenExpressionText = whenExpression => {
+  return map$1[whenExpression] || 'n/a';
+};
+
+const getVisibleKeyBindings = (filteredKeyBindings, minLineY, maxLineY, selectedIndex, isEditingWhenExpression) => {
+  const visibleKeyBindings = [];
+  const slicedKeyBindings = filteredKeyBindings.slice(minLineY, maxLineY);
+  const relativeSelectedIndex = selectedIndex - minLineY;
+  for (let i = 0; i < slicedKeyBindings.length; i++) {
+    const slicedKeyBinding = slicedKeyBindings[i];
+    const {
+      isCtrl,
+      isShift,
+      key,
+      when,
+      command,
+      commandMatches,
+      keyMatches
+    } = slicedKeyBinding;
+    const rowIndex = minLineY + i + 2;
+    visibleKeyBindings.push({
+      rowIndex,
+      isCtrl,
+      isShift,
+      key,
+      when: getWhenExpressionText(when),
+      command,
+      selected: i === relativeSelectedIndex,
+      isEditingWhenExpression: i === relativeSelectedIndex && isEditingWhenExpression,
+      commandMatches,
+      keyMatches,
+      isEven: rowIndex % 2 === 0
+    });
+  }
+  return visibleKeyBindings;
+};
+
+const acceptWhenExpression = state => {
+  const {
+    items,
+    minLineY,
+    maxLineY,
+    selectedIndex
+  } = state;
+  const visibleItems = getVisibleKeyBindings(items, minLineY, maxLineY, selectedIndex, false);
+  return {
+    ...state,
+    editingWhenExpression: false,
+    visibleItems
+  };
+};
+
 const addKeyBinding$1 = state => {
   return state;
 };
 
+const cancelEditingWhenExpression = state => {
+  const {
+    items,
+    minLineY,
+    maxLineY,
+    selectedIndex
+  } = state;
+  const visibleItems = getVisibleKeyBindings(items, minLineY, maxLineY, selectedIndex, true);
+  return {
+    ...state,
+    editingWhenExpression: false,
+    visibleItems
+  };
+};
+
+const FocusKeyBindingsTable = 39;
+const FocusKeyBindingsWhenExpression = 53;
+
 const changeWhenExpression$1 = state => {
-  return state;
+  const {
+    items,
+    selectedIndex,
+    minLineY,
+    maxLineY
+  } = state;
+  const selectedItem = items[selectedIndex];
+  if (!selectedItem) {
+    return state;
+  }
+  const text = getWhenExpressionText(selectedItem.when);
+  const visibleItems = getVisibleKeyBindings(items, minLineY, maxLineY, selectedIndex, true);
+  return {
+    ...state,
+    editingWhenExpression: true,
+    focus: FocusKeyBindingsWhenExpression,
+    whenExpressionText: text,
+    visibleItems
+  };
+};
+
+// TODO use flags enum maybe
+const getKeyModifierPrefix = (altKey, ctrlKey, shiftKey, _metaKey) => {
+  let string = '';
+  if (ctrlKey) {
+    string += 'Ctrl+';
+  }
+  if (shiftKey) {
+    string += 'Shift+';
+  }
+  return string;
+};
+
+const filterKeyBindingsByKeyBinding = (keyBindings, value) => {
+  const exact = value.slice(1, -1);
+  const filteredKeyBindings = [];
+  for (const keyBinding of keyBindings) {
+    const {
+      key
+    } = keyBinding;
+    const isCtrl = Boolean(keyBinding.isCtrl);
+    const isShift = Boolean(keyBinding.isShift);
+    const prefix = getKeyModifierPrefix(false, isCtrl, isShift);
+    const combinedUnspaced = `${prefix}${key}`;
+    const combinedSpaced = combinedUnspaced.replaceAll('+', ' + ');
+    if (combinedSpaced === exact || key === exact) {
+      filteredKeyBindings.push({
+        ...keyBinding,
+        commandMatches: [],
+        keyMatches: []
+      });
+    }
+  }
+  return filteredKeyBindings;
 };
 
 const Diagonal = 1;
@@ -1040,21 +1255,7 @@ const filterKeyBinding = (pattern, word) => {
   return matches;
 };
 
-const withEmptyMatch = keyBinding => {
-  return {
-    ...keyBinding,
-    commandMatches: [],
-    keyMatches: []
-  };
-};
-const withEmptyMatches = keyBindings => {
-  return keyBindings.map(withEmptyMatch);
-};
-
-const getFilteredKeyBindings = (keyBindings, value) => {
-  if (!value) {
-    return withEmptyMatches(keyBindings);
-  }
+const filterKeyBindingsDefault = (keyBindings, value) => {
   const filteredKeyBindings = [];
   for (const keyBinding of keyBindings) {
     const {
@@ -1074,6 +1275,32 @@ const getFilteredKeyBindings = (keyBindings, value) => {
   return filteredKeyBindings;
 };
 
+const withEmptyMatch = keyBinding => {
+  return {
+    ...keyBinding,
+    commandMatches: [],
+    keyMatches: []
+  };
+};
+const withEmptyMatches = keyBindings => {
+  return keyBindings.map(withEmptyMatch);
+};
+
+const getFilteredKeyBindings = (keyBindings, value) => {
+  if (!value) {
+    return withEmptyMatches(keyBindings);
+  }
+  // Exact match syntax: quoted string means search for exact keybinding
+  const isQuoted = value.length >= 2 && value.startsWith('"') && value.endsWith('"');
+  if (isQuoted) {
+    return filterKeyBindingsByKeyBinding(keyBindings, value);
+  }
+  return filterKeyBindingsDefault(keyBindings, value);
+};
+
+const Input$2 = 1;
+const Table$3 = 2;
+
 const User = 1;
 const Script = 2;
 
@@ -1110,7 +1337,8 @@ const handleInput = (state, value) => {
     value,
     items: sorted,
     maxLineY,
-    inputSource: User
+    inputSource: User,
+    focus: Input$2
   };
 };
 
@@ -1126,145 +1354,202 @@ const copy$1 = async state => {
   return state;
 };
 
-const copyCommandId$1 = state => {
-  return state;
+const rpcs = Object.create(null);
+const set$g = (id, rpc) => {
+  rpcs[id] = rpc;
 };
-
-const copyCommandTitle$1 = state => {
-  return state;
+const get$1 = id => {
+  return rpcs[id];
 };
 
-const create$2 = () => {
-  const states = Object.create(null);
+/* eslint-disable  @typescript-eslint/explicit-function-return-type */
+
+const create$1 = rpcId => {
   return {
-    get(uid) {
-      return states[uid];
-    },
-    set(uid, oldState, newState) {
-      states[uid] = {
-        oldState,
-        newState
-      };
-    },
-    dispose(uid) {
-      delete states[uid];
-    },
-    getKeys() {
-      return Object.keys(states).map(key => {
-        return Number.parseInt(key);
-      });
+    // @ts-ignore
+    invoke(method, ...params) {
+      const rpc = get$1(rpcId);
+      // @ts-ignore
+      return rpc.invoke(method, ...params);
     },
-    clear() {
-      for (const key of Object.keys(states)) {
-        delete states[key];
-      }
+    // @ts-ignore
+    invokeAndTransfer(method, ...params) {
+      const rpc = get$1(rpcId);
+      // @ts-ignore
+      return rpc.invokeAndTransfer(method, ...params);
     },
-    wrapCommand(fn) {
-      const wrapped = async (uid, ...args) => {
-        const {
-          newState
-        } = states[uid];
-        const newerState = await fn(newState, ...args);
-        if (newState === newerState) {
-          return;
-        }
-        const latest = states[uid];
-        states[uid] = {
-          oldState: latest.oldState,
-          newState: newerState
-        };
-      };
-      return wrapped;
+    set(rpc) {
+      set$g(rpcId, rpc);
     },
-    diff(uid, modules, numbers) {
-      const {
-        oldState,
-        newState
-      } = states[uid];
-      const diffResult = [];
-      for (let i = 0; i < modules.length; i++) {
-        const fn = modules[i];
-        if (!fn(oldState, newState)) {
-          diffResult.push(numbers[i]);
-        }
-      }
-      return diffResult;
+    async dispose() {
+      const rpc = get$1(rpcId);
+      await rpc.dispose();
     }
   };
 };
+const RendererWorker$1 = 1;
+const {
+  invoke: invoke$3,
+  set: set$3} = create$1(RendererWorker$1);
+const showContextMenu$1 = async (x, y, id, ...args) => {
+  return invoke$3('ContextMenu.show', x, y, id, ...args);
+};
+const setFocus$2 = key => {
+  return invoke$3('Focus.setFocus', key);
+};
+const writeClipBoardText$1 = async text => {
+  await invoke$3('ClipBoard.writeText', /* text */text);
+};
+const openWidget$1 = async name => {
+  await invoke$3('Viewlet.openWidget', name);
+};
+const RendererWorker$2 = {
+  __proto__: null,
+  invoke: invoke$3,
+  openWidget: openWidget$1,
+  set: set$3,
+  setFocus: setFocus$2,
+  showContextMenu: showContextMenu$1,
+  writeClipBoardText: writeClipBoardText$1
+};
 
 const {
-  get: get$1,
+  invoke,
   set: set$1,
+  writeClipBoardText,
+  setFocus: setFocus$1,
+  showContextMenu,
+  openWidget
+} = RendererWorker$2;
+
+const RendererWorker = {
+  __proto__: null,
+  invoke,
+  openWidget,
+  set: set$1,
+  setFocus: setFocus$1,
+  showContextMenu,
+  writeClipBoardText
+};
+
+const copyCommandId$1 = async state => {
+  const {
+    focusedIndex,
+    items
+  } = state;
+  const item = items[focusedIndex];
+  if (!item) {
+    return state;
+  }
+  const {
+    command
+  } = item;
+  await writeClipBoardText(command);
+  return state;
+};
+
+const copyCommandTitle$1 = async state => {
+  const {
+    focusedIndex,
+    items
+  } = state;
+  const item = items[focusedIndex];
+  if (!item) {
+    return state;
+  }
+  const {
+    command
+  } = item;
+  await writeClipBoardText(command);
+  return state;
+};
+
+const {
+  get,
+  set,
   dispose: dispose$1,
-  wrapCommand
+  wrapCommand,
+  wrapGetter,
+  registerCommands,
+  getCommandIds
 } = create$2();
 
 // TODO uri and platform might not be needed
-const create$1 = (uid, uri, x, y, width, height, platform) => {
+const create = (uid, uri, x, y, width, height, platform) => {
   const state = {
-    parsedKeyBindings: [],
-    items: [],
-    minLineY: 0,
-    maxLineY: 0,
-    maxVisibleItems: 0,
-    x,
-    y,
-    width,
-    height,
-    value: '',
-    selectedIndex: -1,
-    focusedIndex: -1,
-    finalDeltaY: 0,
-    deltaY: 0,
-    uri,
     columnWidth1: 0,
     columnWidth2: 0,
     columnWidth3: 0,
     contentPadding: 30,
-    resizerDownId: 0,
     defineKeyBindingsId: -1,
+    deltaY: 0,
     editIconSize: 22,
+    editingWhenExpression: false,
+    finalDeltaY: 0,
+    focus: 0,
+    focusedIndex: -1,
+    headerHeight: 0,
+    height,
+    inputSource: User,
+    isRecordingKeys: false,
+    isSortingByPrecedence: false,
+    itemHeight: 24,
+    items: [],
+    maxLineY: 0,
+    maxVisibleItems: 0,
+    minimumSliderSize: 20,
+    minLineY: 0,
     padding: 15,
+    parsedKeyBindings: [],
+    resizerDownId: 0,
     searchHeaderHeight: 50,
+    selectedIndex: -1,
     tableHeaderHeight: 24,
-    itemHeight: 24,
-    minimumSliderSize: 20,
-    isRecordingKeys: false,
-    inputSource: User,
-    isSortingByPrecedence: false,
-    headerHeight: 0
+    uid,
+    uri,
+    value: '',
+    whenExpressionText: '',
+    width,
+    x,
+    y,
+    visibleItems: []
   };
-  set$1(uid, state, state);
+  set(uid, state, state);
 };
 
-const RenderKeyBindings = 1;
-const RenderColumnWidth = 2;
-const RenderValue = 3;
-const RenderFocus = 4;
+const isEqual$5 = (oldState, newState) => {
+  return oldState.columnWidth1 === newState.columnWidth1 && oldState.columnWidth2 === newState.columnWidth2 && oldState.columnWidth3 === newState.columnWidth3;
+};
+
+const isEqual$4 = (oldState, newState) => {
+  return oldState.focus === newState.focus;
+};
 
-const diffType$3 = RenderColumnWidth;
 const isEqual$3 = (oldState, newState) => {
-  return oldState.columnWidth1 === newState.columnWidth1 && oldState.columnWidth2 === newState.columnWidth2 && oldState.columnWidth3 === newState.columnWidth3;
+  return oldState.focus === newState.focus;
 };
 
-const diffType$2 = RenderFocus;
 const isEqual$2 = (oldState, newState) => {
-  return oldState.isRecordingKeys === newState.isRecordingKeys;
+  return oldState.items === newState.items && oldState.minLineY === newState.minLineY && oldState.maxLineY === newState.maxLineY && oldState.selectedIndex === newState.selectedIndex && oldState.focusedIndex === newState.focusedIndex && oldState.columnWidth1 === newState.columnWidth1 && oldState.columnWidth2 === newState.columnWidth2 && oldState.columnWidth3 === newState.columnWidth3 && oldState.isRecordingKeys === newState.isRecordingKeys && oldState.isSortingByPrecedence === newState.isSortingByPrecedence && oldState.editingWhenExpression === newState.editingWhenExpression;
 };
 
-const diffType$1 = RenderKeyBindings;
+const RenderKeyBindings = 1;
+const RenderColumnWidth = 2;
+const RenderValue = 3;
+const RenderFocus = 4;
+const RenderFocusContext = 5;
+const RenderWhenExpressionValue = 6;
+
 const isEqual$1 = (oldState, newState) => {
-  return oldState.items === newState.items && oldState.minLineY === newState.minLineY && oldState.maxLineY === newState.maxLineY && oldState.selectedIndex === newState.selectedIndex && oldState.focusedIndex === newState.focusedIndex && oldState.columnWidth1 === newState.columnWidth1 && oldState.columnWidth2 === newState.columnWidth2 && oldState.columnWidth3 === newState.columnWidth3 && oldState.isRecordingKeys === newState.isRecordingKeys && oldState.isSortingByPrecedence === newState.isSortingByPrecedence;
+  return oldState.value === newState.value;
 };
 
-const diffType = RenderValue;
 const isEqual = (oldState, newState) => {
-  return oldState.value === newState.value;
+  return oldState.editingWhenExpression === true || newState.editingWhenExpression === false;
 };
 
-const modules = [isEqual$1, isEqual$3, isEqual, isEqual$2];
-const numbers = [diffType$1, diffType$3, diffType, diffType$2];
+const modules = [isEqual$2, isEqual$5, isEqual$1, isEqual$4, isEqual$3, isEqual];
+const numbers = [RenderKeyBindings, RenderColumnWidth, RenderValue, RenderFocus, RenderFocusContext, RenderWhenExpressionValue];
 
 const diff = (oldState, newState) => {
   const diffResult = [];
@@ -1281,7 +1566,7 @@ const diff2 = uid => {
   const {
     oldState,
     newState
-  } = get$1(uid);
+  } = get(uid);
   const diffResult = diff(oldState, newState);
   return diffResult;
 };
@@ -1290,48 +1575,115 @@ const dispose = uid => {
   dispose$1(uid);
 };
 
-const focusFirst = state => {
+// TODO optimize this function to return the minimum number
+// of visible items needed, e.g. when not scrolled 5 items with
+// 20px fill 100px but when scrolled 6 items are needed
+const getNumberOfVisibleItems = (listHeight, itemHeight) => {
+  return Math.ceil(listHeight / itemHeight) + 1;
+};
+
+const focusIndexScrollDown = (state, index, listHeight, itemHeight, itemsLength) => {
+  const newMaxLineY = Math.min(index + 1, itemsLength);
+  const fittingItems = getNumberOfVisibleItems(listHeight, itemHeight);
+  const newMinLineY = Math.max(newMaxLineY - fittingItems, 0);
+  const newDeltaY = itemsLength < fittingItems ? 0 : newMinLineY * itemHeight - listHeight % itemHeight + itemHeight;
   return {
     ...state,
-    selectedIndex: 0
+    focusedIndex: index,
+    minLineY: newMinLineY,
+    maxLineY: newMaxLineY,
+    focused: true,
+    deltaY: newDeltaY,
+    selectedIndex: index
   };
 };
 
-const focusLast = state => {
-  const {
-    items
-  } = state;
+const focusIndexScrollUp = (state, index, listHeight, itemHeight, itemsLength) => {
+  const newMinLineY = index;
+  const fittingItems = getNumberOfVisibleItems(listHeight, itemHeight);
+  const newMaxLineY = Math.min(newMinLineY + fittingItems, itemsLength);
+  const newDeltaY = newMinLineY * itemHeight;
   return {
     ...state,
-    selectedIndex: items.length - 1
+    focusedIndex: index,
+    minLineY: newMinLineY,
+    maxLineY: newMaxLineY,
+    focused: true,
+    deltaY: newDeltaY,
+    selectedIndex: index
   };
 };
 
-const focusNext = state => {
+const focusIndex = (state, index) => {
   const {
-    selectedIndex,
+    itemHeight,
+    minLineY,
+    maxLineY,
+    headerHeight,
+    height,
     items
   } = state;
+  const itemsLength = items.length;
+  if (itemsLength === 0) {
+    return state;
+  }
+  number(itemHeight);
+  if (index === -1) {
+    return {
+      ...state,
+      focusedIndex: -1,
+      focused: true
+    };
+  }
+  const listHeight = height - headerHeight;
+  if (index < minLineY + 1) {
+    return focusIndexScrollUp(state, index, listHeight, itemHeight, itemsLength);
+  }
+  if (index >= maxLineY - 1) {
+    return focusIndexScrollDown(state, index, listHeight, itemHeight, itemsLength);
+  }
   return {
     ...state,
-    selectedIndex: Math.min(selectedIndex + 1, items.length - 1)
+    focusedIndex: index,
+    selectedIndex: index,
+    focused: true
   };
 };
 
-const focusPrevious = state => {
-  const {
-    selectedIndex
-  } = state;
+const focusFirst = state => {
+  return focusIndex(state, 0);
+};
+
+const focusInput = state => {
   return {
     ...state,
-    selectedIndex: Math.max(selectedIndex - 1, 0)
+    focus: Input$2
   };
 };
 
-const commandIds = ['clearInput', 'focusFirst', 'focusLast', 'focusNext', 'focusPrevious', 'handleClick', 'handleContextMenu', 'handleDoubleClick', 'handleInput', 'handleKeyDown', 'handleResizerClick', 'handleResizerMove', 'handleSearchActionClick', 'handleWheel', 'startRecordingKeys', 'stopRecordingKeys', 'toggleRecordingKeys', 'copy'];
+const focusLast = state => {
+  const {
+    items
+  } = state;
+  const last = items.length - 1;
+  return focusIndex(state, last);
+};
+
+const focusNext = state => {
+  const {
+    selectedIndex,
+    items
+  } = state;
+  const nextIndex = Math.min(selectedIndex + 1, items.length - 1);
+  return focusIndex(state, nextIndex);
+};
 
-const getCommandIds = () => {
-  return commandIds;
+const focusPrevious = state => {
+  const {
+    selectedIndex
+  } = state;
+  const previousIndex = Math.max(selectedIndex - 1, 0);
+  return focusIndex(state, previousIndex);
 };
 
 const Backspace$1 = 1;
@@ -1399,9 +1751,7 @@ const Backslash$1 = 91;
 const Star$1 = 131;
 const Plus$1 = 132;
 
-const FocusKeyBindingsTable = 39;
-
-const getKeyBindings$1 = () => {
+const getKeyBindings = () => {
   return [{
     key: DownArrow$1,
     command: 'KeyBindings.focusNext',
@@ -1434,6 +1784,10 @@ const getKeyBindings$1 = () => {
     key: Enter$1,
     command: 'KeyBindings.selectCurrent',
     when: FocusKeyBindingsTable
+  }, {
+    key: Enter$1,
+    command: 'KeyBindings.acceptWhenExprssion',
+    when: FocusKeyBindingsWhenExpression
   }, {
     key: Home$1,
     command: 'KeyBindings.focusFirst',
@@ -1442,6 +1796,10 @@ const getKeyBindings$1 = () => {
     key: End$1,
     command: 'KeyBindings.focusLast',
     when: FocusKeyBindingsTable
+  }, {
+    key: Escape$2,
+    command: 'KeyBindings.cancelEditingWhenExprssion',
+    when: FocusKeyBindingsWhenExpression
   }];
 };
 
@@ -1520,7 +1878,7 @@ const resetKeyBinding$1 = () => {
 const changeWhenExpression = () => {
   return i18nString(ChangeWhenExpression);
 };
-const showSameKeyBindings = () => {
+const showSameKeyBindings$1 = () => {
   return i18nString(ShowSameKeyBindings);
 };
 const noKeyBindingsFound = () => {
@@ -1539,135 +1897,57 @@ const clearSearchInput = () => {
   return i18nString(ClearSearchInput$1);
 };
 
-const None$1 = 0;
-
-const getMenuEntries = () => {
-  return [{
-    id: 'copy',
-    label: copy(),
-    flags: None$1,
-    command: 'KeyBindings.copy'
-  }, {
-    id: 'copyCommandId',
-    label: copyCommandId(),
-    flags: None$1,
-    command: 'KeyBindings.copyCommandId'
-  }, {
-    id: 'copyCommandTitle',
-    label: copyCommandTitle(),
-    flags: None$1,
-    command: 'KeyBindings.copyCommandTitle'
-  }, {
-    id: 'changeKeyBinding',
-    label: changeKeyBinding(),
-    flags: None$1,
-    command: 'KeyBindings.changeKeyBinding'
-  }, {
-    id: 'addKeyBinding',
-    label: addKeyBinding(),
-    flags: None$1,
-    command: 'KeyBindings.addKeyBinding'
-  }, {
-    id: 'removeKeyBinding',
-    label: removeKeyBinding$1(),
-    flags: None$1,
-    command: 'KeyBindings.removeKeyBinding'
-  }, {
-    id: 'resetKeyBinding',
-    label: resetKeyBinding$1(),
-    flags: None$1,
-    command: 'KeyBindings.resetKeyBinding'
-  }, {
-    id: 'changeWhenExpression',
-    label: changeWhenExpression(),
-    flags: None$1,
-    command: 'KeyBindings.changeWhenExpression'
-  }, {
-    id: 'showSameKeyBindings',
-    label: showSameKeyBindings(),
-    flags: None$1,
-    command: 'KeyBindings.showSameKeyBindings'
-  }];
-};
-
-const rpcs = Object.create(null);
-const set$g = (id, rpc) => {
-  rpcs[id] = rpc;
-};
-const get = id => {
-  return rpcs[id];
-};
-
-/* eslint-disable  @typescript-eslint/explicit-function-return-type */
-
-const create = rpcId => {
-  return {
-    // @ts-ignore
-    invoke(method, ...params) {
-      const rpc = get(rpcId);
-      // @ts-ignore
-      return rpc.invoke(method, ...params);
-    },
-    // @ts-ignore
-    invokeAndTransfer(method, ...params) {
-      const rpc = get(rpcId);
-      // @ts-ignore
-      return rpc.invokeAndTransfer(method, ...params);
-    },
-    set(rpc) {
-      set$g(rpcId, rpc);
-    },
-    async dispose() {
-      const rpc = get(rpcId);
-      await rpc.dispose();
-    }
-  };
-};
-const RendererWorker$1 = 1;
-const {
-  invoke: invoke$3,
-  set: set$3} = create(RendererWorker$1);
-const showContextMenu$1 = async (x, y, id, ...args) => {
-  return invoke$3('ContextMenu.show', x, y, id, ...args);
-};
-const setFocus$2 = key => {
-  return invoke$3('Focus.setFocus', key);
-};
-const writeClipBoardText$1 = async text => {
-  await invoke$3('ClipBoard.writeText', /* text */text);
-};
-const openWidget$1 = async name => {
-  await invoke$3('Viewlet.openWidget', name);
-};
-const RendererWorker$2 = {
-  __proto__: null,
-  invoke: invoke$3,
-  openWidget: openWidget$1,
-  set: set$3,
-  setFocus: setFocus$2,
-  showContextMenu: showContextMenu$1,
-  writeClipBoardText: writeClipBoardText$1
-};
-
-const {
-  invoke,
-  set,
-  writeClipBoardText,
-  setFocus: setFocus$1,
-  showContextMenu,
-  openWidget
-} = RendererWorker$2;
-
-const RendererWorker = {
-  __proto__: null,
-  invoke,
-  openWidget,
-  set,
-  setFocus: setFocus$1,
-  showContextMenu,
-  writeClipBoardText
-};
-
+const None$1 = 0;
+
+const getMenuEntries = () => {
+  return [{
+    id: 'copy',
+    label: copy(),
+    flags: None$1,
+    command: 'KeyBindings.copy'
+  }, {
+    id: 'copyCommandId',
+    label: copyCommandId(),
+    flags: None$1,
+    command: 'KeyBindings.copyCommandId'
+  }, {
+    id: 'copyCommandTitle',
+    label: copyCommandTitle(),
+    flags: None$1,
+    command: 'KeyBindings.copyCommandTitle'
+  }, {
+    id: 'changeKeyBinding',
+    label: changeKeyBinding(),
+    flags: None$1,
+    command: 'KeyBindings.changeKeyBinding'
+  }, {
+    id: 'addKeyBinding',
+    label: addKeyBinding(),
+    flags: None$1,
+    command: 'KeyBindings.addKeyBinding'
+  }, {
+    id: 'removeKeyBinding',
+    label: removeKeyBinding$1(),
+    flags: None$1,
+    command: 'KeyBindings.removeKeyBinding'
+  }, {
+    id: 'resetKeyBinding',
+    label: resetKeyBinding$1(),
+    flags: None$1,
+    command: 'KeyBindings.resetKeyBinding'
+  }, {
+    id: 'changeWhenExpression',
+    label: changeWhenExpression(),
+    flags: None$1,
+    command: 'KeyBindings.changeWhenExpression'
+  }, {
+    id: 'showSameKeyBindings',
+    label: showSameKeyBindings$1(),
+    flags: None$1,
+    command: 'KeyBindings.showSameKeyBindings'
+  }];
+};
+
 const {
   setFocus
 } = RendererWorker;
@@ -1678,11 +1958,16 @@ const getIndex = (state, eventX, eventY) => {
     y,
     itemHeight,
     tableHeaderHeight,
-    searchHeaderHeight
+    searchHeaderHeight,
+    items
   } = state;
   const relativeY = eventY - y - tableHeaderHeight - searchHeaderHeight;
   const row = Math.floor(relativeY / itemHeight);
-  return minLineY + row;
+  const actualRow = minLineY + row;
+  if (actualRow > items.length) {
+    return -1;
+  }
+  return actualRow;
 };
 
 const DefineKeyBinding = 'DefineKeyBinding';
@@ -1708,7 +1993,8 @@ const handleClick = async (state, eventX, eventY) => {
   return {
     ...state,
     focusedIndex: selectedIndex,
-    selectedIndex
+    selectedIndex,
+    focus: Table$3
   };
 };
 
@@ -1736,6 +2022,13 @@ const handleDoubleClick = async (state, eventX, eventY) => {
   };
 };
 
+const handleInputFocus = state => {
+  return {
+    ...state,
+    focus: Input$2
+  };
+};
+
 const stopRecordingKeys = state => {
   return {
     ...state,
@@ -1812,6 +2105,7 @@ const KeyBindingsFilter = 'keybindings-filter';
 const RecordKeys$1 = 'RecordKeys';
 const SortByPrecedence = 'SortByPrecdence';
 const ClearSearchInput = 'ClearSearchInput';
+const WhenExpression = 'KeyBindingsWhenExpression';
 
 class KeyBindingError extends Error {
   constructor(message) {
@@ -1873,7 +2167,9 @@ const setDeltaY = (state, deltaY) => {
   const {
     maxVisibleItems,
     itemHeight,
-    items
+    items,
+    editingWhenExpression,
+    selectedIndex
   } = state;
   const tableHeight = maxVisibleItems * itemHeight;
   const minDeltaY = 0;
@@ -1885,11 +2181,13 @@ const setDeltaY = (state, deltaY) => {
   }
   const minLineY = Math.floor(deltaY / itemHeight);
   const maxLineY = minLineY + Math.round(tableHeight / itemHeight);
+  const visibleItems = getVisibleKeyBindings(items, minLineY, maxLineY, selectedIndex, editingWhenExpression);
   return {
     ...state,
     deltaY,
     minLineY,
-    maxLineY
+    maxLineY,
+    visibleItems
   };
 };
 
@@ -1897,13 +2195,12 @@ const handleWheel = (state, deltaMode, deltaY) => {
   return setDeltaY(state, state.deltaY + deltaY);
 };
 
-const getMaxVisibleItems = (height, searchHeaderHeight, tableHeaderHeight, rowHeight) => {
-  return Math.floor((height - searchHeaderHeight - tableHeaderHeight) / rowHeight);
+const handleWhenexpressionInputBlur = state => {
+  return cancelEditingWhenExpression(state);
 };
 
-const getKeyBindings = () => {
-  // @ts-ignore
-  return invoke('KeyBindingsInitial.getKeyBindings');
+const getMaxVisibleItems = (height, searchHeaderHeight, tableHeaderHeight, rowHeight) => {
+  return Math.floor((height - searchHeaderHeight - tableHeaderHeight) / rowHeight);
 };
 
 const Unknown = 'Unknown';
@@ -2114,7 +2411,7 @@ const parseKey = rawKey => {
   number(rawKey);
   const isCtrl = Boolean(rawKey & CtrlCmd);
   const isShift = Boolean(rawKey & Shift);
-  const keyCode = rawKey & 0x00_00_00_FF;
+  const keyCode = rawKey & 0x00_00_00_ff;
   const key = getKeyCodeString(keyCode);
   return {
     key,
@@ -2135,6 +2432,13 @@ const parseKeyBindings = keyBindings => {
   return keyBindings.map(parseKeyBinding);
 };
 
+const loadKeyBindings = async () => {
+  // @ts-ignore
+  const rawKeyBindings = await invoke('KeyBindingsInitial.getKeyBindings');
+  const keyBindings = parseKeyBindings(rawKeyBindings);
+  return keyBindings;
+};
+
 const getSavedValue = savedState => {
   if (savedState && typeof savedState === 'object' && 'value' in savedState && typeof savedState.value === 'string') {
     return savedState.value;
@@ -2148,10 +2452,16 @@ const restoreState = savedState => {
   const isRecordingKeys = savedState?.['isRecordingKeys'];
   // @ts-ignore
   const isSortingByPrecedence = savedState?.['isSortingByPrecedence'];
+  // @ts-ignore
+  const focus = savedState?.['focus'];
+  // @ts-ignore
+  const selectedIndex = savedState?.['selectedIndex'];
   return {
     savedValue,
     isRecordingKeys,
-    isSortingByPrecedence
+    isSortingByPrecedence,
+    focus,
+    selectedIndex
   };
 };
 
@@ -2169,16 +2479,17 @@ const loadContent = async (state, savedState) => {
     width,
     contentPadding,
     searchHeaderHeight,
-    tableHeaderHeight
+    tableHeaderHeight,
+    editingWhenExpression
   } = state;
   number(width);
-  const keyBindings = await getKeyBindings();
-  const parsedKeyBindings = parseKeyBindings(keyBindings);
+  const parsedKeyBindings = await loadKeyBindings();
   const maxVisibleItems = getMaxVisibleItems(height, searchHeaderHeight, tableHeaderHeight, itemHeight);
   const {
     savedValue,
     isRecordingKeys,
-    isSortingByPrecedence
+    isSortingByPrecedence,
+    selectedIndex
   } = restoreState(savedState);
   const filteredKeyBindings = getFilteredKeyBindings(parsedKeyBindings, savedValue);
   const listHeight = height - searchHeaderHeight - tableHeaderHeight;
@@ -2190,7 +2501,8 @@ const loadContent = async (state, savedState) => {
   const columnWidth1 = contentWidth / 3;
   const columnWidth2 = contentWidth / 3;
   const columnWidth3 = contentWidth / 3;
-  const newState = {
+  const visibleItems = getVisibleKeyBindings(filteredKeyBindings, 0, maxLineY, selectedIndex, editingWhenExpression);
+  return {
     ...state,
     parsedKeyBindings,
     items: filteredKeyBindings,
@@ -2203,15 +2515,55 @@ const loadContent = async (state, savedState) => {
     columnWidth2,
     columnWidth3,
     isRecordingKeys,
-    isSortingByPrecedence
+    isSortingByPrecedence,
+    selectedIndex: typeof selectedIndex === 'number' ? selectedIndex : state.selectedIndex,
+    visibleItems
   };
-  return newState;
 };
 
 const removeKeyBinding = state => {
   return state;
 };
 
+const getCss = (columnWidth1, columnWidth2, columnWidth3) => {
+  return `.KeyBindings {
+  --ColumnWidth1: ${columnWidth1}px;
+  --ColumnWidth2: ${columnWidth2}px;
+  --ColumnWidth3: ${columnWidth3}px;
+}`;
+};
+const renderColumnWidths = (oldState, newState) => {
+  const {
+    uid,
+    columnWidth1,
+    columnWidth2,
+    columnWidth3
+  } = newState;
+  const css = getCss(columnWidth1, columnWidth2, columnWidth3);
+  return [/* method */'Viewlet.setCss', uid, css];
+};
+
+const getSelector = focus => {
+  switch (focus) {
+    case FocusKeyBindingsWhenExpression:
+      return `[name="${WhenExpression}"]`;
+    default:
+      return `[name="${KeyBindingsFilter}"]`;
+  }
+};
+const renderFocus = (oldState, newState) => {
+  const {
+    uid,
+    focus
+  } = newState;
+  const selector = getSelector(focus);
+  return ['Viewlet.focusSelector', uid, selector];
+};
+
+const renderFocusContext = (oldState, newState) => {
+  return ['Viewlet.focusSelector', newState.uid, KeyBindingsFilter];
+};
+
 const IconButton = 'IconButton';
 const Key = 'Key';
 const KeyBindings = 'KeyBindings';
@@ -2231,7 +2583,7 @@ const SearchFieldButtonChecked = 'SearchFieldButtonChecked';
 const SearchFieldButtonDisabled = 'SearchFieldButtonDisabled';
 const SearchFieldButtons = 'SearchFieldButtons';
 const SearchHighlight = 'SearchHighlight';
-const Table$1 = 'Table';
+const Table$2 = 'Table';
 const TableBody = 'TableBody';
 const TableCell = 'TableCell';
 const TableCol = 'TableCol';
@@ -2246,6 +2598,7 @@ const Viewlet = 'Viewlet';
 
 const HandleContextMenu = 'handleContextMenu';
 const HandleInput = 'handleInput';
+const HandleInputFocus = 'handleInputFocus';
 const HandleKeyDown = 'handleKeyDown';
 const HandlePointerDown = 'handlePointerDown';
 const HandleResizerMove = 'handleResizerMove';
@@ -2254,25 +2607,48 @@ const HandleSearchActionClick = 'handleSearchActionClick';
 const HandleTableClick = 'handleTableClick';
 const HandleTableDoubleClick = 'handleTableDoubleClick';
 const HandleWheel = 'handleWheel';
+const HandleWhenExpressionInputBlur = 'handleWhenExpressionInputBlur';
 
-const Button = 1;
-const Col = 2;
-const ColGroup = 3;
-const Div = 4;
-const Input = 6;
-const Kbd = 7;
-const Span = 8;
-const Table = 9;
-const TBody = 10;
-const Td = 11;
-const Th = 13;
-const THead = 14;
-const Tr = 15;
+const Search = 'search';
 
+const CheckBox = 'checkbox';
+const None = 'none';
+const AriaRoles = {
+  __proto__: null,
+  CheckBox,
+  None};
 const mergeClassNames = (...classNames) => {
   return classNames.filter(Boolean).join(' ');
 };
+const Button$1 = 1;
+const Col$1 = 2;
+const ColGroup$1 = 3;
+const Div$1 = 4;
+const Input$1 = 6;
+const Kbd$1 = 7;
+const Span$1 = 8;
+const Table$1 = 9;
+const TBody$1 = 10;
+const Td$1 = 11;
 const Text = 12;
+const Th$1 = 13;
+const THead$1 = 14;
+const Tr$1 = 15;
+const VirtualDomElements = {
+  __proto__: null,
+  Button: Button$1,
+  Col: Col$1,
+  ColGroup: ColGroup$1,
+  Div: Div$1,
+  Input: Input$1,
+  Kbd: Kbd$1,
+  Span: Span$1,
+  TBody: TBody$1,
+  THead: THead$1,
+  Table: Table$1,
+  Td: Td$1,
+  Th: Th$1,
+  Tr: Tr$1};
 const text = data => {
   return {
     type: Text,
@@ -2281,16 +2657,73 @@ const text = data => {
   };
 };
 
+const {
+  Button
+} = VirtualDomElements;
+const {
+  Col
+} = VirtualDomElements;
+const {
+  ColGroup
+} = VirtualDomElements;
+const {
+  Div
+} = VirtualDomElements;
+const {
+  Input
+} = VirtualDomElements;
+const {
+  Kbd
+} = VirtualDomElements;
+const {
+  Span
+} = VirtualDomElements;
+const {
+  Table
+} = VirtualDomElements;
+const {
+  TBody
+} = VirtualDomElements;
+const {
+  Td
+} = VirtualDomElements;
+const {
+  Th
+} = VirtualDomElements;
+const {
+  THead
+} = VirtualDomElements;
+const {
+  Tr
+} = VirtualDomElements;
+
+const getKeyBindingsInputVirtualDom = () => {
+  return {
+    type: Input,
+    className: KeyBindingsSearchInputBox,
+    inputType: Search,
+    placeholder: typeToSearchKeyBindings(),
+    name: KeyBindingsFilter,
+    onFocus: HandleInputFocus,
+    onInput: HandleInput,
+    onKeyDown: HandleKeyDown,
+    ariaDescription: resultsWillUpdateAsYouType(),
+    childCount: 0,
+    autocomplete: 'off'
+  };
+};
+
+const parentNode = {
+  type: Div,
+  className: InputBadge,
+  childCount: 1
+};
 const getRecordingKeysBadgeVirtualDom = isRecordingKeys => {
   if (!isRecordingKeys) {
     return [];
   }
   const recordingKeys$1 = recordingKeys();
-  return [{
-    type: Div,
-    className: InputBadge,
-    childCount: 1
-  }, text(recordingKeys$1)];
+  return [parentNode, text(recordingKeys$1)];
 };
 
 const ClearAll = `MaskIconClearAll`;
@@ -2298,8 +2731,7 @@ const Edit = `MaskIconEdit`;
 const RecordKeys = `MaskIconRecordKeys`;
 const SortPrecedence = `MaskIconSortPrecedence`;
 
-const getSearchFieldActions = (isRecordingKeys, isSortingByPrecedence, value) => {
-  const hasValue = value !== '';
+const getSearchFieldActions = (isRecordingKeys, isSortingByPrecedence, hasValue) => {
   return [{
     name: RecordKeys$1,
     label: recordKeys(),
@@ -2321,9 +2753,6 @@ const getSearchFieldActions = (isRecordingKeys, isSortingByPrecedence, value) =>
   }];
 };
 
-const None = 'none';
-const CheckBox = 'checkbox';
-
 const getSearchFieldClassName = (checked, enabled) => {
   if (checked) {
     return mergeClassNames(SearchFieldButton, SearchFieldButtonChecked);
@@ -2351,7 +2780,7 @@ const getSearchFieldButtonVirtualDom = action => {
     childCount: 1,
     onClick: HandleSearchActionClick,
     ariaChecked: `${checked}`,
-    role: CheckBox
+    role: AriaRoles.CheckBox
   }, {
     type: Div,
     className: mergeClassNames(MaskIcon, icon),
@@ -2359,8 +2788,8 @@ const getSearchFieldButtonVirtualDom = action => {
   }];
 };
 
-const getKeyBindingsSearchActionsVirtualDom = (isRecordingKeys, isSortingByPrecedence, value) => {
-  const actions = getSearchFieldActions(isRecordingKeys, isSortingByPrecedence, value);
+const getKeyBindingsSearchActionsVirtualDom = (isRecordingKeys, isSortingByPrecedence, hasValue) => {
+  const actions = getSearchFieldActions(isRecordingKeys, isSortingByPrecedence, hasValue);
   const childCount = isRecordingKeys ? 2 : 1;
   return [{
     type: Div,
@@ -2373,9 +2802,7 @@ const getKeyBindingsSearchActionsVirtualDom = (isRecordingKeys, isSortingByPrece
   }, ...actions.flatMap(getSearchFieldButtonVirtualDom)];
 };
 
-const Search = 'search';
-
-const getKeyBindingsHeaderVirtualDom = (isRecordingKeys, isSortingByPrecedence, value) => {
+const getKeyBindingsHeaderVirtualDom = (isRecordingKeys, isSortingByPrecedence, hasValue) => {
   return [{
     type: Div,
     className: KeyBindingsHeader,
@@ -2384,18 +2811,7 @@ const getKeyBindingsHeaderVirtualDom = (isRecordingKeys, isSortingByPrecedence,
     type: Div,
     className: KeyBindingsSearchWrapper,
     childCount: 2
-  }, {
-    type: Input,
-    className: KeyBindingsSearchInputBox,
-    inputType: Search,
-    placeholder: typeToSearchKeyBindings(),
-    name: KeyBindingsFilter,
-    onInput: HandleInput,
-    onKeyDown: HandleKeyDown,
-    ariaDescription: resultsWillUpdateAsYouType(),
-    childCount: 0,
-    autocomplete: 'off'
-  }, ...getKeyBindingsSearchActionsVirtualDom(isRecordingKeys, isSortingByPrecedence, value)];
+  }, getKeyBindingsInputVirtualDom(), ...getKeyBindingsSearchActionsVirtualDom(isRecordingKeys, isSortingByPrecedence, hasValue)];
 };
 
 const getRowClassName = (isEven, selected) => {
@@ -2453,7 +2869,7 @@ const getIconVirtualDom = (icon, type = Div) => {
   return {
     type,
     className: mergeClassNames(MaskIcon, icon),
-    role: None,
+    role: AriaRoles.None,
     childCount: 0
   };
 };
@@ -2482,7 +2898,7 @@ const none = [];
 const ctrl = [kbdDom, textCtrl, textPlus];
 const shift = [kbdDom, textShift, textPlus];
 const ctrlShift = [...ctrl, ...shift];
-const map$1 = [none, ctrl, shift, ctrlShift];
+const map = [none, ctrl, shift, ctrlShift];
 const countMap = [0, 2, 2, 4];
 
 // TODO maybe use flags number instead of booleans
@@ -2507,7 +2923,7 @@ const getKeyBindingCellChildren = keyBinding => {
     key
   } = keyBinding;
   const ref = getRef(isCtrl, isShift);
-  const pre = map$1[ref];
+  const pre = map[ref];
   const count = countMap[ref];
   const children = [...pre, kbdDom, text(key)];
   const childCount = count + 1;
@@ -2536,8 +2952,18 @@ const cell = {
 };
 const getKeyBindingsTableCellWhenDom = keyBinding => {
   const {
-    when
+    when,
+    isEditingWhenExpression
   } = keyBinding;
+  if (isEditingWhenExpression) {
+    return [cell, {
+      type: Input,
+      className: 'InputBox',
+      childCount: 0,
+      onBlur: HandleWhenExpressionInputBlur,
+      name: WhenExpression
+    }];
+  }
   return [cell, text(when || '')];
 };
 
@@ -2616,14 +3042,12 @@ const getKeyBindingsTableHeadVirtualDom = () => {
   return staticTableHeadDom;
 };
 
-const getTableDom = (filteredKeyBindings, displayKeyBindings, columnWidth1, columnWidth2, columnWidth3) => {
+const getTableDom = (filteredItemsCount, displayKeyBindings, columnWidth1, columnWidth2, columnWidth3) => {
   const tableDom = [{
     type: Table,
-    className: Table$1,
+    className: Table$2,
     ariaLabel: keyBindings(),
-    ariaRowCount: filteredKeyBindings.length,
-    onClick: HandleTableClick,
-    onContextMenu: HandleContextMenu,
+    ariaRowCount: filteredItemsCount,
     tabIndex: 0,
     childCount: 3
   }, ...getKeyBindingsTableColGroupVirtualDom(columnWidth1, columnWidth2, columnWidth3), ...getKeyBindingsTableHeadVirtualDom(), ...getKeyBindingsTableBodyDom(displayKeyBindings)];
@@ -2658,69 +3082,37 @@ const getScrollBarVirtualDom = (scrollBarThumbHeight, scrollBarThumbTop) => {
   }];
 };
 
-const parentNode = {
-  type: Div,
-  className: TableWrapper,
-  onWheel: HandleWheel,
-  onDblClick: HandleTableDoubleClick,
-  childCount: 4
-};
 const resizer = {
   type: Div,
   className: Resizer,
   childCount: 0
 };
-const getKeyBindingsTableWrapperVirtualDom = (filteredKeyBindings, displayKeyBindings, columnWidth1, columnWidth2, columnWidth3, scrollBarThumbHeight, scrollBarThumbTop) => {
+const getClassName = focusedIndex => {
+  return focusedIndex === -1 ? TableWrapper + ' ' + 'FocusOutline' : TableWrapper;
+};
+const getKeyBindingsTableWrapperVirtualDom = (filteredItemsCount, displayKeyBindings, columnWidth1, columnWidth2, columnWidth3, scrollBarThumbHeight, scrollBarThumbTop, focusedIndex) => {
   if (displayKeyBindings.length === 0) {
     return getNoKeyBindingsFoundVirtualDom();
   }
-  return [parentNode, ...getTableDom(filteredKeyBindings, displayKeyBindings, columnWidth1, columnWidth2, columnWidth3), resizer, resizer, ...getScrollBarVirtualDom(scrollBarThumbHeight, scrollBarThumbTop)];
+  const className = getClassName(focusedIndex);
+  return [{
+    type: Div,
+    className,
+    onWheel: HandleWheel,
+    onDblClick: HandleTableDoubleClick,
+    onClick: HandleTableClick,
+    onContextMenu: HandleContextMenu,
+    childCount: 4
+  }, ...getTableDom(filteredItemsCount, displayKeyBindings, columnWidth1, columnWidth2, columnWidth3), resizer, resizer, ...getScrollBarVirtualDom(scrollBarThumbHeight, scrollBarThumbTop)];
 };
 
-const getKeyBindingsVirtualDom = (filteredKeyBindings, displayKeyBindings, columnWidth1, columnWidth2, columnWidth3, scrollBarThumbHeight, scrollBarThumbTop, isRecordingKeys, isSortingByPrecedence, value) => {
+const getKeyBindingsVirtualDom = (filteredItemsCount, displayKeyBindings, columnWidth1, columnWidth2, columnWidth3, scrollBarThumbHeight, scrollBarThumbTop, isRecordingKeys, isSortingByPrecedence, hasValue, focusedIndex) => {
   return [{
     type: Div,
     className: mergeClassNames(Viewlet, KeyBindings),
     onPointerDown: HandlePointerDown,
     childCount: 2
-  }, ...getKeyBindingsHeaderVirtualDom(isRecordingKeys, isSortingByPrecedence, value), ...getKeyBindingsTableWrapperVirtualDom(filteredKeyBindings, displayKeyBindings, columnWidth1, columnWidth2, columnWidth3, scrollBarThumbHeight, scrollBarThumbTop)];
-};
-
-const map = [/* 0 */'Empty', /* 1 */'BrowserChromium', /* 2 */'BrowserElectron', /* 3 */'BrowserFirefox', /* 4 */'FocusAbout', /* 5 */'FocusActivityBar', /* 6 */'FocusDebugInput', /* 7 */'FocusDialog', /* 8 */'FocusEditor', /* 9 */'FocusEditorCompletions', /* 10 */'FocusEditorImage', /* 11 */'FocusEditorRename', /* 12 */'FocusEditorText', /* 13 */'FocusExplorer', /* 14 */'FocusExplorerEditBox', /* 15 */'FocusExtensions', /* 16 */'FocusFindWidget', /* 17 */'FocusLocationList', /* 18 */'FocusMenu', /* 19 */'FocusProblems', /* 20 */'FocusQuickPickInput', /* 21 */'FocusSearchInput', /* 22 */'FocusSearchResults', /* 23 */'FocusSimpleBrowserInput', /* 24 */'FocusSourceControlInput', /* 25 */'FocusTerminal', /* 26 */'FocusTitleBarMenuBar', /* 27 */'FocusViewletList', /* 28 */'FocusOutput', /* 29 */'FocusDebugConsoleInput', /* 30 */'FocusDebugScope', /* 31 */'FocusSearchReplaceInput', /* 32 */'FocusMatchCase', /* 33 */'FocusRegex', /* 34 */'FocusWholeWord', /* 35 */'FocusReplaceAll', /* 36 */'FocusPreserveCase', /* 37 */'FocusSimpleBrowser', /* 38 */'FocusSourceActions'];
-const getWhenExpressionText = whenExpression => {
-  return map[whenExpression] || 'n/a';
-};
-
-const getVisibleKeyBindings = (filteredKeyBindings, minLineY, maxLineY, selectedIndex) => {
-  const visibleKeyBindings = [];
-  const slicedKeyBindings = filteredKeyBindings.slice(minLineY, maxLineY);
-  const relativeSelectedIndex = selectedIndex - minLineY;
-  for (let i = 0; i < slicedKeyBindings.length; i++) {
-    const slicedKeyBinding = slicedKeyBindings[i];
-    const {
-      isCtrl,
-      isShift,
-      key,
-      when,
-      command,
-      commandMatches,
-      keyMatches
-    } = slicedKeyBinding;
-    const rowIndex = minLineY + i + 2;
-    visibleKeyBindings.push({
-      rowIndex,
-      isCtrl,
-      isShift,
-      key,
-      when: getWhenExpressionText(when),
-      command,
-      selected: i === relativeSelectedIndex,
-      commandMatches,
-      keyMatches,
-      isEven: rowIndex % 2 === 0
-    });
-  }
-  return visibleKeyBindings;
+  }, ...getKeyBindingsHeaderVirtualDom(isRecordingKeys, isSortingByPrecedence, hasValue), ...getKeyBindingsTableWrapperVirtualDom(filteredItemsCount, displayKeyBindings, columnWidth1, columnWidth2, columnWidth3, scrollBarThumbHeight, scrollBarThumbTop, focusedIndex)];
 };
 
 const renderKeyBindings = (oldState, newState) => {
@@ -2739,7 +3131,9 @@ const renderKeyBindings = (oldState, newState) => {
     tableHeaderHeight,
     isRecordingKeys,
     value,
-    isSortingByPrecedence
+    isSortingByPrecedence,
+    focusedIndex,
+    editingWhenExpression
   } = newState;
   const deltaY = minLineY * itemHeight;
   const percent = deltaY / finalDeltaY;
@@ -2748,25 +3142,28 @@ const renderKeyBindings = (oldState, newState) => {
   const contentHeight = total * itemHeight;
   const scrollBarThumbHeight = getScrollBarSize(listHeight, contentHeight, newState.minimumSliderSize);
   const scrollBarThumbTop = (height - scrollBarThumbHeight) * percent;
-  const displayKeyBindings = getVisibleKeyBindings(items, minLineY, maxLineY, selectedIndex);
-  // TODO do dom diffing for faster incremental updates, e.g. when scrolling
-  // console.time('tableDom')
-  const tableDom = getKeyBindingsVirtualDom(items, displayKeyBindings, columnWidth1, columnWidth2, columnWidth3, scrollBarThumbHeight, scrollBarThumbTop, isRecordingKeys, isSortingByPrecedence, value);
-  // console.timeEnd('tableDom')
-  // console.log({ tableDom })
-  return ['Viewlet.setDom2', /* tableDom */tableDom];
+  const displayKeyBindings = getVisibleKeyBindings(items, minLineY, maxLineY, selectedIndex, editingWhenExpression);
+  const hasValue = value.length > 0;
+  const tableDom = getKeyBindingsVirtualDom(items.length, displayKeyBindings, columnWidth1, columnWidth2, columnWidth3, scrollBarThumbHeight, scrollBarThumbTop, isRecordingKeys, isSortingByPrecedence, hasValue, focusedIndex);
+  return ['Viewlet.setDom2', newState.uid, /* tableDom */tableDom];
 };
 
-// @ts-ignore
-const renderColumnWidths = (oldState, newState) => {
-  return [/* method */'setColumnWidths', newState.columnWidth1, newState.columnWidth2, newState.columnWidth3];
-};
 const renderValue = (oldState, newState) => {
-  return [/* method */'setValue', /* setValue */newState.value];
+  const {
+    uid,
+    value
+  } = newState;
+  return ['Viewlet.setValueByName', uid, KeyBindingsFilter, value];
 };
-const renderFocus = (oldState, newState) => {
-  return ['Viewlet.focusSelector', KeyBindingsFilter];
+
+const renderWhenExpressionValue = (oldState, newState) => {
+  const {
+    uid,
+    whenExpressionText
+  } = newState;
+  return ['Viewlet.setValueByName', uid, WhenExpression, whenExpressionText];
 };
+
 const getRenderer = diffType => {
   switch (diffType) {
     case RenderColumnWidth:
@@ -2777,6 +3174,10 @@ const getRenderer = diffType => {
       return renderValue;
     case RenderFocus:
       return renderFocus;
+    case RenderFocusContext:
+      return renderFocusContext;
+    case RenderWhenExpressionValue:
+      return renderWhenExpressionValue;
     default:
       throw new Error('unknown renderer');
   }
@@ -2792,11 +3193,14 @@ const applyRender = (oldState, newState, diffResult) => {
 };
 
 const render3 = (uid, diffResult) => {
+  if (diffResult.length === 0) {
+    return [];
+  }
   const {
     oldState,
     newState
-  } = get$1(uid);
-  set$1(uid, newState, newState);
+  } = get(uid);
+  set(uid, newState, newState);
   const commands = applyRender(oldState, newState, diffResult);
   return commands;
 };
@@ -2808,6 +3212,12 @@ const renderEventListeners = () => {
   }, {
     name: HandleInput,
     params: ['handleInput', 'event.target.value']
+  }, {
+    name: HandleInputFocus,
+    params: ['handleInputFocus']
+  }, {
+    name: HandleWhenExpressionInputBlur,
+    params: ['handleWhenExpressionInputBlur']
   }, {
     name: HandleResizerPointerDown,
     params: ['handleResizerClick', 'event.clientX']
@@ -2861,68 +3271,89 @@ const resize = (state, dimensions) => {
   };
 };
 
-const saveState = uid => {
-  if (typeof uid !== 'number') {
-    // deprecated
-    return {
-      value: '',
-      isRecordingKeys: false,
-      isSortingByPrecedence: false
-    };
-  }
-  const {
-    newState
-  } = get$1(uid);
+const saveState = state => {
   const {
     value,
     isRecordingKeys,
-    isSortingByPrecedence
-  } = newState;
+    isSortingByPrecedence,
+    focus,
+    selectedIndex
+  } = state;
   return {
     value,
     isRecordingKeys,
-    isSortingByPrecedence
+    isSortingByPrecedence,
+    focus,
+    selectedIndex
   };
 };
 
-const terminate = () => {
-  globalThis.close();
+const showSameKeyBindings = async state => {
+  const {
+    selectedIndex,
+    items
+  } = state;
+  const item = items[selectedIndex];
+  if (!item) {
+    return state;
+  }
+  const {
+    isCtrl,
+    isShift,
+    key
+  } = item;
+  const prefix = getKeyModifierPrefix(false, Boolean(isCtrl), Boolean(isShift));
+  const unspaced = `${prefix}${key}`;
+  const spaced = unspaced.replaceAll('+', ' + ');
+  const value = `"${spaced}"`;
+  const newState = handleInput(state, value);
+  return {
+    ...newState,
+    inputSource: Script
+  };
 };
 
 const commandMap = {
+  'KeyBindings.acceptWhenExpression': wrapCommand(acceptWhenExpression),
   'KeyBindings.addKeyBinding': wrapCommand(addKeyBinding$1),
+  'KeyBindings.cancelEditingWhenExpression': wrapCommand(cancelEditingWhenExpression),
   'KeyBindings.changeWhenExpression': wrapCommand(changeWhenExpression$1),
   'KeyBindings.clearInput': wrapCommand(clearInput),
   'KeyBindings.copy': wrapCommand(copy$1),
   'KeyBindings.copyCommandId': wrapCommand(copyCommandId$1),
   'KeyBindings.copyCommandTitle': wrapCommand(copyCommandTitle$1),
-  'KeyBindings.create': create$1,
+  'KeyBindings.create': create,
   'KeyBindings.diff2': diff2,
   'KeyBindings.dispose': dispose,
   'KeyBindings.focusFirst': wrapCommand(focusFirst),
+  'KeyBindings.focusIndex': wrapCommand(focusIndex),
+  'KeyBindings.focusInput': wrapCommand(focusInput),
   'KeyBindings.focusLast': wrapCommand(focusLast),
   'KeyBindings.focusNext': wrapCommand(focusNext),
   'KeyBindings.focusPrevious': wrapCommand(focusPrevious),
   'KeyBindings.getCommandIds': getCommandIds,
-  'KeyBindings.getKeyBindings': getKeyBindings$1,
+  'KeyBindings.getKeyBindings': getKeyBindings,
   'KeyBindings.getMenuEntries': getMenuEntries,
   'KeyBindings.handleClick': wrapCommand(handleClick),
   'KeyBindings.handleContextMenu': wrapCommand(handleContextMenu),
   'KeyBindings.handleDoubleClick': wrapCommand(handleDoubleClick),
   'KeyBindings.handleInput': wrapCommand(handleInput),
+  'KeyBindings.handleInputFocus': wrapCommand(handleInputFocus),
   'KeyBindings.handleKeyDown': wrapCommand(handleKeyDown),
   'KeyBindings.handleResizerClick': wrapCommand(handleResizerClick),
   'KeyBindings.handleResizerMove': wrapCommand(handleResizerMove),
   'KeyBindings.handleSearchActionClick': wrapCommand(handleSearchActionClick),
   'KeyBindings.handleWheel': wrapCommand(handleWheel),
+  'KeyBindings.handleWhenExpressionInputBlur': wrapCommand(handleWhenexpressionInputBlur),
   'KeyBindings.loadContent': wrapCommand(loadContent),
   'KeyBindings.removeKeyBinding': wrapCommand(removeKeyBinding),
   'KeyBindings.render3': render3,
   'KeyBindings.renderEventListeners': renderEventListeners,
   'KeyBindings.resetKeyBinding': wrapCommand(resetKeyBinding),
   'KeyBindings.resize': wrapCommand(resize),
-  'KeyBindings.saveState': saveState,
+  'KeyBindings.saveState': wrapGetter(saveState),
   'KeyBindings.setDeltaY': wrapCommand(setDeltaY),
+  'KeyBindings.showSameKeyBindings': wrapCommand(showSameKeyBindings),
   'KeyBindings.sortByPrecedence': wrapCommand(sortByPrecedence),
   'KeyBindings.startRecordingKeys': wrapCommand(startRecordingKeys),
   'KeyBindings.stopRecordingKeys': wrapCommand(stopRecordingKeys),
@@ -2931,10 +3362,11 @@ const commandMap = {
 };
 
 const listen = async () => {
+  registerCommands(commandMap);
   const rpc = await WebWorkerRpcClient.create({
     commandMap: commandMap
   });
-  set(rpc);
+  set$1(rpc);
 };
 
 const main = async () => {