@lvce-editor/static-server 0.49.9 → 0.49.11

package/static/{47ed583 → 9c30f35}/packages/iframe-inspector/dist/iframeInspectorWorkerMain.js

@@ -864,7 +864,8 @@ const create = (uid, x, y, width, height) => {
     minLineY: 0,
     maxLineY: 0,
     deltaY: 0,
-    finalDeltaY: 0
+    finalDeltaY: 0,
+    focusId: 0
   };
   set$1(uid, state, state);
 };
@@ -875,7 +876,7 @@ const RenderFocus = 4;
 
 const diffType$2 = RenderFocus;
 const isEqual$2 = (oldState, newState) => {
-  return oldState.isFocused === newState.isFocused;
+  return oldState.isFocused === newState.isFocused && oldState.focusId === newState.focusId;
 };
 
 const diffType$1 = RenderHeights;
@@ -885,7 +886,7 @@ const isEqual$1 = (oldState, newState) => {
 
 const diffType = RenderItems;
 const isEqual = (oldState, newState) => {
-  return oldState.messageVersion === newState.messageVersion && oldState.selectedIndex === newState.selectedIndex && oldState.expandedPaths === newState.expandedPaths && oldState.filterText === newState.filterText;
+  return oldState.messageVersion === newState.messageVersion && oldState.selectedIndex === newState.selectedIndex && oldState.expandedPaths === newState.expandedPaths && oldState.filterText === newState.filterText && oldState.focusId === newState.focusId;
 };
 
 const modules = [isEqual, isEqual$1, isEqual$2];
@@ -958,38 +959,32 @@ const getMessages = () => {
   return state.messages;
 };
 
-const selectIndex = (uid, index) => {
-  const {
-    newState
-  } = get$1(uid);
+const Input$1 = 1;
+const List = 2;
+
+const selectIndex = (newState, index) => {
   const updatedState = {
     ...newState,
     selectedIndex: index,
-    isFocused: true
+    isFocused: true,
+    focusId: List
   };
-  set$1(uid, newState, updatedState);
+  return updatedState;
 };
 
-const handleArrowDown = uid => {
-  const {
-    newState
-  } = get$1(uid);
+const handleArrowDown = newState => {
   const messages = getMessages();
   const nextIndex = Math.min(messages.length - 1, newState.selectedIndex + 1);
-  selectIndex(uid, nextIndex);
+  return selectIndex(newState, nextIndex);
 };
 
-const handleArrowUp = uid => {
-  const {
-    newState
-  } = get$1(uid);
+const handleArrowUp = newState => {
   const nextIndex = Math.max(0, newState.selectedIndex - 1);
-  selectIndex(uid, nextIndex);
+  return selectIndex(newState, nextIndex);
 };
 
-const handleBlur = () => {
-  // TODO: Implement blur handling
-  return;
+const handleBlur = newState => {
+  return newState;
 };
 
 const getIndex = (headerHeight, y, eventY, itemHeight, filterHeight) => {
@@ -999,10 +994,7 @@ const getIndex = (headerHeight, y, eventY, itemHeight, filterHeight) => {
   return index;
 };
 
-const handleClick = (uid, eventX, eventY) => {
-  const {
-    newState
-  } = get$1(uid);
+const handleClick = (newState, eventX, eventY) => {
   const {
     headerHeight,
     y,
@@ -1010,12 +1002,12 @@ const handleClick = (uid, eventX, eventY) => {
     filterHeight
   } = newState;
   const index = getIndex(headerHeight, y, eventY, itemHeight, filterHeight);
-  selectIndex(uid, index);
+  return selectIndex(newState, index);
 };
 
-const handleEnd = uid => {
+const handleEnd = state => {
   const messages = getMessages();
-  selectIndex(uid, Math.max(0, messages.length - 1));
+  return selectIndex(state, Math.max(0, messages.length - 1));
 };
 
 const handleFilterInput = (uid, filterText) => {
@@ -1024,7 +1016,8 @@ const handleFilterInput = (uid, filterText) => {
   } = get$1(uid);
   const updatedState = {
     ...newState,
-    filterText
+    filterText,
+    inputSource: 1
   };
   set$1(uid, newState, updatedState);
 };
@@ -1050,24 +1043,34 @@ const invokeAndTransfer = (method, ...params) => {
   return rpc.invokeAndTransfer(method, ...params);
 };
 
-const handleFocus = async uid => {
-  const {
-    newState
-  } = get$1(uid);
-  // TODO make focus handling more functional
-  await invoke('Focus.setFocus', FocusIframeInspector);
-  if (newState.isFocused) {
-    return;
+const setFocus = async focusId => {
+  await invoke('Focus.setFocus', focusId);
+};
+
+const handleFocus = async (newState, inputName) => {
+  // Don't set focus if it's coming from the input
+  await setFocus(FocusIframeInspector);
+  if (newState.isFocused && newState.focusId === Input$1) {
+    return newState;
   }
   const updatedState = {
     ...newState,
-    isFocused: true
+    isFocused: true,
+    focusId: Input$1
   };
-  set$1(uid, newState, updatedState);
+  return updatedState;
+};
+
+const handleHome = state => {
+  return selectIndex(state, 0);
 };
 
-const handleHome = uid => {
-  selectIndex(uid, 0);
+const handleListBlur = newState => {
+  return newState;
+};
+
+const handleListFocus = newState => {
+  return newState;
 };
 
 const handleResizerMouseDown = (uid, clientY) => {
@@ -1248,8 +1251,21 @@ const loadContent = async uid => {
   await registerInterceptor();
 };
 
+const IframeInspectorFilterInput = 'IframeInspectorFilterInput';
+
+const getSelector = focusId => {
+  switch (focusId) {
+    case List:
+      return '.IframeInspectorGrid';
+    case Input$1:
+      return IframeInspectorFilterInput;
+    default:
+      return '';
+  }
+};
 const renderFocus = (oldState, newState) => {
-  return ['Viewlet.focusSelector', '.IframeInspectorGrid'];
+  const selector = getSelector(newState.focusId);
+  return ['Viewlet.focusSelector', selector];
 };
 
 const renderHeights = (oldState, newState) => {
@@ -1500,23 +1516,23 @@ const tokenizeJson = input => {
   return tokens;
 };
 
-const createMessageViewModel = (message, maxLength, index, selectedIndex) => {
+const createMessageViewModel = (message, maxLength, index, selectedIndex, isListFocused) => {
   const stringified = JSON.stringify(message);
   const preview = getMessagePreview(stringified, maxLength);
   const tokens = tokenizeJson(preview);
   return {
-    isSelected: index === selectedIndex,
+    isSelected: isListFocused && index === selectedIndex,
     messagePreviewLength: String(preview.length),
     isEven: index % 2 === 0,
     messageTokens: tokens
   };
 };
 
-const createMessageViewModels = (messages, selectedIndex, maxLength, filterText) => {
+const createMessageViewModels = (messages, selectedIndex, maxLength, filterText, isListFocused) => {
   const viewModels = [];
   for (let i = 0; i < messages.length; i++) {
     const message = messages[i];
-    viewModels.push(createMessageViewModel(message, maxLength, i, selectedIndex));
+    viewModels.push(createMessageViewModel(message, maxLength, i, selectedIndex, isListFocused));
   }
   return viewModels;
 };
@@ -1570,7 +1586,9 @@ const HandleResizerMouseMove = 'handleResizerMouseMove';
 const HandleResizerMouseUp = 'handleResizerMouseUp';
 const HandleSelectedContentClick = 'handleSelectedContentClick';
 const HandleFocus = 'handleFocus';
+const HandleListFocus = 'handleListFocus';
 const HandleBlur = 'handleBlur';
+const HandleListBlur = 'handleListBlur';
 const HandleWheel = 'handleWheel';
 
 const emptyObject = {};
@@ -1596,8 +1614,6 @@ const filterMessages = () => {
   return i18nString(FilterMessages);
 };
 
-const IframeInspectorFilterInput = 'IframeInspectorFilterInput';
-
 const Col = 2;
 const ColGroup = 3;
 const Div = 4;
@@ -1629,6 +1645,7 @@ const getFilterVirtualDom = () => {
     className: FilterInput,
     placeholder,
     onInput: HandleFilterInput,
+    onFocus: HandleFocus,
     name: IframeInspectorFilterInput
   }];
 };
@@ -1857,8 +1874,8 @@ const getTableWrapperVirtualDom = (messages, columnWidths) => {
     role: Application,
     tabIndex: 0,
     childCount: 1,
-    onFocusIn: HandleFocus,
-    onBlur: HandleBlur
+    onFocusIn: HandleListFocus,
+    onBlur: HandleListBlur
   }, ...getTableVirtualDom(messages, columnWidths)];
 };
 
@@ -1874,7 +1891,8 @@ const getIframeInspectorVirtualDom = (messages, selectedModel, selectedIndex, co
 const renderMessage = (oldState, newState) => {
   const messages = getMessages();
   const filteredMessages = getFilteredMessages(messages, newState.filterText);
-  const viewModels = createMessageViewModels(filteredMessages, newState.selectedIndex, newState.maxMessageLength);
+  const isListFocused = newState.focusId === List;
+  const viewModels = createMessageViewModels(filteredMessages, newState.selectedIndex, newState.maxMessageLength, newState.filterText, isListFocused);
   const selectedModel = createSelectedMessageViewModel(messages, newState.selectedIndex, newState.expandedPaths);
   const dom = getIframeInspectorVirtualDom(viewModels, selectedModel, newState.selectedIndex, newState.columnWidths);
   return ['Viewlet.setDom2', dom];
@@ -1936,9 +1954,15 @@ const renderEventListeners = () => {
   }, {
     name: HandleFocus,
     params: ['handleFocus']
+  }, {
+    name: HandleListFocus,
+    params: ['handleListFocus']
   }, {
     name: HandleBlur,
     params: ['handleBlur']
+  }, {
+    name: HandleListBlur,
+    params: ['handleListBlur']
   }, {
     name: HandleFilterInput,
     params: ['handleFilterInput', 'event.target.value']
@@ -1976,31 +2000,47 @@ const terminate = () => {
   globalThis.close();
 };
 
+const wrapCommand = fn => {
+  const wrapped = async (uid, ...args) => {
+    const {
+      newState
+    } = get$1(uid);
+    const newerState = await fn(newState, ...args);
+    if (newState === newerState) {
+      return;
+    }
+    set$1(uid, newState, newerState);
+  };
+  return wrapped;
+};
+
 const commandMap = {
   'IframeInspector.create': create,
   'IframeInspector.diff2': diff2,
   'IframeInspector.dispose': dispose,
   'IframeInspector.getCommandIds': getCommandIds,
   'IframeInspector.getKeyBindings': getKeyBindings,
-  'IframeInspector.handleArrowDown': handleArrowDown,
-  'IframeInspector.handleArrowUp': handleArrowUp,
-  'IframeInspector.handleBlur': handleBlur,
-  'IframeInspector.handleClick': handleClick,
-  'IframeInspector.handleEnd': handleEnd,
-  'IframeInspector.handleFilterInput': handleFilterInput,
-  'IframeInspector.handleFocus': handleFocus,
-  'IframeInspector.handleHome': handleHome,
-  'IframeInspector.handleResizerMouseDown': handleResizerMouseDown,
-  'IframeInspector.handleResizerMouseMove': handleResizerMouseMove,
-  'IframeInspector.handleResizerMouseUp': handleResizerMouseUp,
-  'IframeInspector.handleSelectedContentClick': handleSelectedContentClick,
-  'IframeInspector.handleWheel': handleWheel,
+  'IframeInspector.handleArrowDown': wrapCommand(handleArrowDown),
+  'IframeInspector.handleArrowUp': wrapCommand(handleArrowUp),
+  'IframeInspector.handleBlur': wrapCommand(handleBlur),
+  'IframeInspector.handleClick': wrapCommand(handleClick),
+  'IframeInspector.handleEnd': wrapCommand(handleEnd),
+  'IframeInspector.handleFilterInput': wrapCommand(handleFilterInput),
+  'IframeInspector.handleFocus': wrapCommand(handleFocus),
+  'IframeInspector.handleHome': wrapCommand(handleHome),
+  'IframeInspector.handleListBlur': wrapCommand(handleListBlur),
+  'IframeInspector.handleListFocus': wrapCommand(handleListFocus),
+  'IframeInspector.handleResizerMouseDown': wrapCommand(handleResizerMouseDown),
+  'IframeInspector.handleResizerMouseMove': wrapCommand(handleResizerMouseMove),
+  'IframeInspector.handleResizerMouseUp': wrapCommand(handleResizerMouseUp),
+  'IframeInspector.handleSelectedContentClick': wrapCommand(handleSelectedContentClick),
+  'IframeInspector.handleWheel': wrapCommand(handleWheel),
   'IframeInspector.loadContent': loadContent,
   'IframeInspector.render2': render2,
   'IframeInspector.renderEventListeners': renderEventListeners,
   'IframeInspector.restoreState': restoreState,
   'IframeInspector.saveState': saveState,
-  'IframeInspector.selectIndex': selectIndex,
+  'IframeInspector.selectIndex': wrapCommand(selectIndex),
   'IframeInspector.terminate': terminate
 };
 

package/static/{47ed583 → 9c30f35}/packages/keybindings-view-worker/dist/keyBindingsViewWorkerMain.js

@@ -791,6 +791,9 @@ const createRpc = ipc => {
     },
     invokeAndTransfer(method, ...params) {
       return invokeAndTransfer(ipc, method, ...params);
+    },
+    async dispose() {
+      await ipc?.dispose();
     }
   };
   return rpc;
@@ -1106,7 +1109,6 @@ const {
 
 // TODO uri and platform might not be needed
 const create = (uid, uri, x, y, width, height, platform) => {
-  // @ts-ignore
   const state = {
     parsedKeyBindings: [],
     items: [],
@@ -1136,7 +1138,9 @@ const create = (uid, uri, x, y, width, height, platform) => {
     itemHeight: 24,
     minimumSliderSize: 20,
     isRecordingKeys: false,
-    inputSource: User
+    inputSource: User,
+    isSortingByPrecedence: false,
+    headerHeight: 0
   };
   set$1(uid, state, state);
 };
@@ -1158,7 +1162,7 @@ const isEqual$2 = (oldState, newState) => {
 
 const diffType$1 = RenderKeyBindings;
 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;
+  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;
 };
 
 const diffType = RenderValue;
@@ -1358,6 +1362,7 @@ const KeyBindingsSearchInputBox = 'KeyBindingsSearchInputBox';
 const KeyBindingsSearchWrapper = 'KeyBindingsSearchWrapper';
 const MaskIcon = 'MaskIcon';
 const Message = 'Message';
+const InputBadge = 'InputBadge';
 const Resizer = 'Resizer';
 const ScrollBar = 'ScrollBar';
 const ScrollBarThumb = 'ScrollBarThumb';
@@ -1402,23 +1407,26 @@ const i18nString = (key, placeholders = emptyObject) => {
   return key.replaceAll(RE_PLACEHOLDER, replacer);
 };
 
-const KeyBindings = 'KeyBindings';
+const AddKeyBinding = 'Add Keybinding...';
+const ChangeKeyBinding = 'Change Keybinding...';
+const ChangeWhenExpression = 'Change When Expression';
+const ClearSearchInput$1 = 'Clear Search Input';
 const Command = 'Command';
-const When = 'When';
-const Key = 'Key';
-const TypeToSearchKeyBindings = 'Type to search in keybindings';
-const ResultsWillUpdateAsYouType = 'Results will update as you type';
 const Copy = 'Copy';
 const CopyCommandId = 'Copy Command ID';
 const CopyCommandTitle = 'Copy Command Title';
-const ChangeKeyBinding = 'Change Keybinding...';
-const AddKeyBinding = 'Add Keybinding...';
+const Key = 'Key';
+const KeyBindings = 'KeyBindings';
+const NoKeyBindingsFound = 'No matching Keybindings found';
+const RecordingKeys = 'Recording keys';
+const RecordKeys$2 = 'Record keys';
 const RemoveKeyBinding = 'Remove Keybinding...';
 const ResetKeyBinding = 'Reset Keybinding';
-const ChangeWhenExpression = 'Change When Expression';
+const ResultsWillUpdateAsYouType = 'Results will update as you type';
 const ShowSameKeyBindings = 'Show Same Keybindings';
-const NoKeyBindingsFound = 'No matching Keybindings found';
-const RecordingKeys = 'Recording keys';
+const SortByPrecedence$1 = 'Sort By Precedence';
+const TypeToSearchKeyBindings = 'Type to search in keybindings';
+const When = 'When';
 
 const keyBindings = () => {
   return i18nString(KeyBindings);
@@ -1471,6 +1479,15 @@ const noKeyBindingsFound = () => {
 const recordingKeys = () => {
   return i18nString(RecordingKeys);
 };
+const recordKeys = () => {
+  return i18nString(RecordKeys$2);
+};
+const sortByPrecedence$1 = () => {
+  return i18nString(SortByPrecedence$1);
+};
+const clearSearchInput = () => {
+  return i18nString(ClearSearchInput$1);
+};
 
 const Button = 1;
 const Col = 2;
@@ -1482,11 +1499,14 @@ const Span = 8;
 const Table = 9;
 const TBody = 10;
 const Td = 11;
-const Text = 12;
 const Th = 13;
 const THead = 14;
 const Tr = 15;
 
+const mergeClassNames = (...classNames) => {
+  return classNames.filter(Boolean).join(' ');
+};
+const Text = 12;
 const text = data => {
   return {
     type: Text,
@@ -1502,34 +1522,39 @@ const getRecordingKeysBadgeVirtualDom = isRecordingKeys => {
   const recordingKeys$1 = recordingKeys();
   return [{
     type: Div,
-    className: 'InputBadge',
+    className: InputBadge,
     childCount: 1
   }, text(recordingKeys$1)];
 };
 
+const ClearAll = `MaskIconClearAll`;
+const Edit = `MaskIconEdit`;
+const RecordKeys$1 = `MaskIconRecordKeys`;
+const SortPrecedence = `MaskIconSortPrecedence`;
+
 const KeyBindingsFilter = 'keybindings-filter';
 const RecordKeys = 'RecordKeys';
 const SortByPrecedence = 'SortByPrecdence';
 const ClearSearchInput = 'ClearSearchInput';
 
-const getSearchFieldActions = (isRecordingKeys, value) => {
+const getSearchFieldActions = (isRecordingKeys, isSortingByPrecedence, value) => {
   const hasValue = value !== '';
   return [{
     name: RecordKeys,
-    label: 'RecordKeys',
-    icon: 'RecordKeys',
+    label: recordKeys(),
+    icon: RecordKeys$1,
     checked: isRecordingKeys,
     enabled: true
   }, {
     name: SortByPrecedence,
-    label: 'SortByPrecedence',
-    icon: 'SortPrecedence',
-    checked: false,
+    label: sortByPrecedence$1(),
+    icon: SortPrecedence,
+    checked: isSortingByPrecedence,
     enabled: true
   }, {
     name: ClearSearchInput,
-    label: 'Clear Search Input',
-    icon: 'ClearAll',
+    label: clearSearchInput(),
+    icon: ClearAll,
     checked: false,
     enabled: hasValue
   }];
@@ -1538,11 +1563,7 @@ const getSearchFieldActions = (isRecordingKeys, value) => {
 const None$1 = 'none';
 const CheckBox = 'checkbox';
 
-const mergeClassNames = (...classNames) => {
-  return classNames.filter(Boolean).join(' ');
-};
-
-const getClassName = (checked, enabled) => {
+const getSearchFieldClassName = (checked, enabled) => {
   if (checked) {
     return mergeClassNames(SearchFieldButton, SearchFieldButtonChecked);
   }
@@ -1551,6 +1572,7 @@ const getClassName = (checked, enabled) => {
   }
   return SearchFieldButton;
 };
+
 const getSearchFieldButtonVirtualDom = action => {
   const {
     name,
@@ -1559,7 +1581,7 @@ const getSearchFieldButtonVirtualDom = action => {
     checked,
     enabled
   } = action;
-  const className = getClassName(checked, enabled);
+  const className = getSearchFieldClassName(checked, enabled);
   return [{
     type: Button,
     className,
@@ -1571,13 +1593,13 @@ const getSearchFieldButtonVirtualDom = action => {
     role: CheckBox
   }, {
     type: Div,
-    className: `${MaskIcon} MaskIcon${icon}`,
+    className: mergeClassNames(MaskIcon, icon),
     childCount: 0
   }];
 };
 
-const getKeyBindingsSearchActionsVirtualDom = (isRecordingKeys, value) => {
-  const actions = getSearchFieldActions(isRecordingKeys, value);
+const getKeyBindingsSearchActionsVirtualDom = (isRecordingKeys, isSortingByPrecedence, value) => {
+  const actions = getSearchFieldActions(isRecordingKeys, isSortingByPrecedence, value);
   const childCount = isRecordingKeys ? 2 : 1;
   return [{
     type: Div,
@@ -1592,7 +1614,7 @@ const getKeyBindingsSearchActionsVirtualDom = (isRecordingKeys, value) => {
 
 const Search = 'search';
 
-const getKeyBindingsHeaderVirtualDom = (isRecordingKeys, value) => {
+const getKeyBindingsHeaderVirtualDom = (isRecordingKeys, isSortingByPrecedence, value) => {
   return [{
     type: Div,
     className: KeyBindingsHeader,
@@ -1612,7 +1634,7 @@ const getKeyBindingsHeaderVirtualDom = (isRecordingKeys, value) => {
     ariaDescription: resultsWillUpdateAsYouType(),
     childCount: 0,
     autocomplete: 'off'
-  }, ...getKeyBindingsSearchActionsVirtualDom(isRecordingKeys, value)];
+  }, ...getKeyBindingsSearchActionsVirtualDom(isRecordingKeys, isSortingByPrecedence, value)];
 };
 
 const getRowClassName = (isEven, selected) => {
@@ -1669,14 +1691,12 @@ const getKeyBindingsTableCellCommandDom = keyBinding => {
 const getIconVirtualDom = (icon, type = Div) => {
   return {
     type,
-    className: `MaskIcon MaskIcon${icon}`,
+    className: mergeClassNames(MaskIcon, icon),
     role: None$1,
     childCount: 0
   };
 };
 
-const Edit = `Edit`;
-
 const getKeyBindingsTableEditCellDom = () => {
   return [{
     type: Td,
@@ -1896,13 +1916,13 @@ const getKeyBindingsTableWrapperVirtualDom = (filteredKeyBindings, displayKeyBin
   return [parentNode, ...getTableDom(filteredKeyBindings, displayKeyBindings, columnWidth1, columnWidth2, columnWidth3), resizer, resizer, ...getScrollBarVirtualDom(scrollBarThumbHeight, scrollBarThumbTop)];
 };
 
-const getKeyBindingsVirtualDom = (filteredKeyBindings, displayKeyBindings, columnWidth1, columnWidth2, columnWidth3, scrollBarThumbHeight, scrollBarThumbTop, isRecordingKeys, value) => {
+const getKeyBindingsVirtualDom = (filteredKeyBindings, displayKeyBindings, columnWidth1, columnWidth2, columnWidth3, scrollBarThumbHeight, scrollBarThumbTop, isRecordingKeys, isSortingByPrecedence, value) => {
   return [{
     type: Div,
     className: mergeClassNames(Viewlet, KeyBindings$1),
     onPointerDown: HandlePointerDown,
     childCount: 2
-  }, ...getKeyBindingsHeaderVirtualDom(isRecordingKeys, value), ...getKeyBindingsTableWrapperVirtualDom(filteredKeyBindings, displayKeyBindings, columnWidth1, columnWidth2, columnWidth3, scrollBarThumbHeight, scrollBarThumbTop)];
+  }, ...getKeyBindingsHeaderVirtualDom(isRecordingKeys, isSortingByPrecedence, value), ...getKeyBindingsTableWrapperVirtualDom(filteredKeyBindings, displayKeyBindings, columnWidth1, columnWidth2, columnWidth3, scrollBarThumbHeight, scrollBarThumbTop)];
 };
 
 const None = 0;
@@ -2112,8 +2132,27 @@ const handleResizerMove = (state, eventX) => {
   };
 };
 
+class KeyBindingError extends Error {
+  constructor(message) {
+    super(message);
+    this.name = 'KeyBindingError';
+  }
+}
+
 const sortByPrecedence = state => {
-  return state;
+  const {
+    isSortingByPrecedence
+  } = state;
+  if (isSortingByPrecedence) {
+    return {
+      ...state,
+      isSortingByPrecedence: false
+    };
+  }
+  return {
+    ...state,
+    isSortingByPrecedence: true
+  };
 };
 
 const startRecordingKeys = state => {
@@ -2142,7 +2181,7 @@ const getSearchActionClickHandler = name => {
     case SortByPrecedence:
       return sortByPrecedence;
     default:
-      throw new Error(`Unexpected handler ${name}`);
+      throw new KeyBindingError(`Unexpected handler ${name}`);
   }
 };
 
@@ -2535,7 +2574,8 @@ const renderKeyBindings = (oldState, newState) => {
     searchHeaderHeight,
     tableHeaderHeight,
     isRecordingKeys,
-    value
+    value,
+    isSortingByPrecedence
   } = newState;
   const deltaY = minLineY * itemHeight;
   const percent = deltaY / finalDeltaY;
@@ -2547,7 +2587,7 @@ const renderKeyBindings = (oldState, newState) => {
   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, value);
+  const tableDom = getKeyBindingsVirtualDom(items, displayKeyBindings, columnWidth1, columnWidth2, columnWidth3, scrollBarThumbHeight, scrollBarThumbTop, isRecordingKeys, isSortingByPrecedence, value);
   // console.timeEnd('tableDom')
   // console.log({ tableDom })
   return ['Viewlet.setDom2', /* tableDom */tableDom];
@@ -2592,7 +2632,9 @@ const render3 = (uid, diffResult) => {
     oldState,
     newState
   } = get$1(uid);
-  return applyRender(oldState, newState, diffResult);
+  set$1(uid, newState, newState);
+  const commands = applyRender(oldState, newState, diffResult);
+  return commands;
 };
 
 const renderEventListeners = () => {
@@ -2686,7 +2728,11 @@ const wrapCommand = fn => {
       newState
     } = get$1(uid);
     const newerState = await fn(newState, ...args);
-    set$1(uid, newState, newerState);
+    if (newState === newerState) {
+      return;
+    }
+    const latest = get$1(uid);
+    set$1(uid, latest.oldState, newerState);
   };
   return wrapped;
 };