@lvce-editor/static-server 0.70.21 → 0.70.22

package/static/{a0480e0 → 422c46d}/packages/keybindings-view-worker/dist/keyBindingsViewWorkerMain.js

@@ -2,7 +2,7 @@ const toCommandId = key => {
   const dotIndex = key.indexOf('.');
   return key.slice(dotIndex + 1);
 };
-const create$7 = () => {
+const create$6 = () => {
   const states = Object.create(null);
   const commandMapRef = {};
   return {
@@ -478,8 +478,27 @@ const copy$1 = async state => {
   return state;
 };
 
+const CheckBox = 'checkbox';
+const Document = 'document';
+const None$1 = 'none';
+
+const Button$1 = 1;
+const Col = 2;
+const ColGroup = 3;
+const Div = 4;
+const Input = 6;
+const Kbd = 7;
+const Span = 8;
+const Table$1 = 9;
+const TBody = 10;
+const Td = 11;
+const Text = 12;
+const Th = 13;
+const THead = 14;
+const Tr = 15;
+
 const AltKey = 'event.altKey';
-const Button$1 = 'event.button';
+const Button = 'event.button';
 const ClientX = 'event.clientX';
 const ClientY = 'event.clientY';
 const CtrlKey = 'event.ctrlKey';
@@ -489,6 +508,71 @@ const Key$2 = 'event.key';
 const TargetName = 'event.target.name';
 const TargetValue = 'event.target.value';
 
+const Backspace$1 = 1;
+const Tab$1 = 2;
+const Enter$1 = 3;
+const Escape$2 = 8;
+const Space$1 = 9;
+const PageUp$1 = 10;
+const PageDown$1 = 11;
+const End$1 = 255;
+const Home$1 = 12;
+const LeftArrow$1 = 13;
+const UpArrow$1 = 14;
+const RightArrow$1 = 15;
+const DownArrow$1 = 16;
+const Insert$1 = 17;
+const Delete$1 = 18;
+const Digit0$1 = 19;
+const Digit1$1 = 20;
+const Digit2$1 = 21;
+const Digit3$1 = 22;
+const Digit4$1 = 23;
+const Digit5$1 = 24;
+const Digit6$1 = 25;
+const Digit7$1 = 26;
+const Digit8$1 = 27;
+const Digit9$1 = 28;
+const KeyA$1 = 29;
+const KeyB$1 = 30;
+const KeyC$1 = 31;
+const KeyD$1 = 32;
+const KeyE$1 = 33;
+const KeyF$1 = 34;
+const KeyG$1 = 35;
+const KeyH$1 = 36;
+const KeyI$1 = 37;
+const KeyJ$1 = 38;
+const KeyK$1 = 39;
+const KeyL$1 = 40;
+const KeyM$1 = 41;
+const KeyN$1 = 42;
+const KeyO$1 = 43;
+const KeyP$1 = 44;
+const KeyQ$1 = 45;
+const KeyR$1 = 46;
+const KeyS$1 = 47;
+const KeyT$1 = 48;
+const KeyU$1 = 49;
+const KeyV$1 = 50;
+const KeyW$1 = 51;
+const KeyX$1 = 52;
+const KeyY$1 = 53;
+const KeyZ$1 = 54;
+const F1$1 = 57;
+const F2$1 = 58;
+const F3$1 = 59;
+const F4$1 = 60;
+const F5$1 = 61;
+const F6$1 = 62;
+const Equal$1 = 84;
+const Comma$1 = 85;
+const Minus$1 = 86;
+const Backquote$1 = 89;
+const Backslash$1 = 91;
+const Star$1 = 131;
+const Plus$1 = 132;
+
 const KeyBindingsTable$1 = 26;
 
 const IconThemeWorker = 7009;
@@ -498,41 +582,10 @@ const FocusSelector = 'Viewlet.focusSelector';
 const SetCss = 'Viewlet.setCss';
 const SetDom2 = 'Viewlet.setDom2';
 const SetValueByName = 'Viewlet.setValueByName';
+const SetPatches = 'Viewlet.setPatches';
 
 const FocusKeyBindingsTable = 39;
 
-const rpcs = Object.create(null);
-const set$3 = (id, rpc) => {
-  rpcs[id] = rpc;
-};
-const get$2 = id => {
-  return rpcs[id];
-};
-
-const create$6 = rpcId => {
-  return {
-    async dispose() {
-      const rpc = get$2(rpcId);
-      await rpc.dispose();
-    },
-    // @ts-ignore
-    invoke(method, ...params) {
-      const rpc = get$2(rpcId);
-      // @ts-ignore
-      return rpc.invoke(method, ...params);
-    },
-    // @ts-ignore
-    invokeAndTransfer(method, ...params) {
-      const rpc = get$2(rpcId);
-      // @ts-ignore
-      return rpc.invokeAndTransfer(method, ...params);
-    },
-    set(rpc) {
-      set$3(rpcId, rpc);
-    }
-  };
-};
-
 const normalizeLine = line => {
   if (line.startsWith('Error: ')) {
     return line.slice('Error: '.length);
@@ -1043,10 +1096,10 @@ const IpcParentWithMessagePort$1 = {
 
 const Two$1 = '2.0';
 const callbacks = Object.create(null);
-const get$1 = id => {
+const get$2 = id => {
   return callbacks[id];
 };
-const remove = id => {
+const remove$1 = id => {
   delete callbacks[id];
 };
 class JsonRpcError extends Error {
@@ -1192,14 +1245,14 @@ const warn = (...args) => {
   console.warn(...args);
 };
 const resolve = (id, response) => {
-  const fn = get$1(id);
+  const fn = get$2(id);
   if (!fn) {
     console.log(response);
     warn(`callback ${id} may already be disposed`);
     return;
   }
   fn(response);
-  remove(id);
+  remove$1(id);
 };
 const E_COMMAND_NOT_FOUND = 'E_COMMAND_NOT_FOUND';
 const getErrorType = prettyError => {
@@ -1242,7 +1295,7 @@ const getErrorProperty = (error, prettyError) => {
     }
   };
 };
-const create$1$1 = (id, error) => {
+const create$1$2 = (id, error) => {
   return {
     jsonrpc: Two$1,
     id,
@@ -1253,7 +1306,7 @@ const getErrorResponse = (id, error, preparePrettyError, logError) => {
   const prettyError = preparePrettyError(error);
   logError(error, prettyError);
   const errorProperty = getErrorProperty(error, prettyError);
-  return create$1$1(id, errorProperty);
+  return create$1$2(id, errorProperty);
 };
 const create$3 = (message, result) => {
   return {
@@ -1572,7 +1625,7 @@ const create$2 = async ({
     messagePort: port2
   });
 };
-const create$1 = async ({
+const create$1$1 = async ({
   commandMap
 }) => {
   // TODO create a commandMap per rpc instance
@@ -1584,14 +1637,81 @@ const create$1 = async ({
 };
 const WebWorkerRpcClient = {
   __proto__: null,
-  create: create$1
+  create: create$1$1
+};
+const createMockRpc = ({
+  commandMap
+}) => {
+  const invocations = [];
+  const invoke = (method, ...params) => {
+    invocations.push([method, ...params]);
+    const command = commandMap[method];
+    if (!command) {
+      throw new Error(`command ${method} not found`);
+    }
+    return command(...params);
+  };
+  const mockRpc = {
+    invocations,
+    invoke,
+    invokeAndTransfer: invoke
+  };
+  return mockRpc;
+};
+
+const rpcs = Object.create(null);
+const set$3 = (id, rpc) => {
+  rpcs[id] = rpc;
+};
+const get$1 = id => {
+  return rpcs[id];
+};
+const remove = id => {
+  delete rpcs[id];
+};
+
+/* eslint-disable  @typescript-eslint/explicit-function-return-type */
+const create$1 = rpcId => {
+  return {
+    async dispose() {
+      const rpc = get$1(rpcId);
+      await rpc.dispose();
+    },
+    // @ts-ignore
+    invoke(method, ...params) {
+      const rpc = get$1(rpcId);
+      // @ts-ignore
+      return rpc.invoke(method, ...params);
+    },
+    // @ts-ignore
+    invokeAndTransfer(method, ...params) {
+      const rpc = get$1(rpcId);
+      // @ts-ignore
+      return rpc.invokeAndTransfer(method, ...params);
+    },
+    registerMockRpc(commandMap) {
+      const mockRpc = createMockRpc({
+        commandMap
+      });
+      set$3(rpcId, mockRpc);
+      // @ts-ignore
+      mockRpc[Symbol.dispose] = () => {
+        remove(rpcId);
+      };
+      // @ts-ignore
+      return mockRpc;
+    },
+    set(rpc) {
+      set$3(rpcId, rpc);
+    }
+  };
 };
 
 const {
   invoke: invoke$1,
   invokeAndTransfer,
   set: set$2
-} = create$6(RendererWorker);
+} = create$1(RendererWorker);
 const showContextMenu2 = async (uid, menuId, x, y, args) => {
   number(uid);
   number(menuId);
@@ -1615,7 +1735,7 @@ const sendMessagePortToTextMeasurementWorker = async port => {
 const {
   invoke,
   set: set$1
-} = create$6(IconThemeWorker);
+} = create$1(IconThemeWorker);
 
 const copyCommandId$1 = async state => {
   const {
@@ -1657,7 +1777,7 @@ const {
   set,
   wrapCommand,
   wrapGetter
-} = create$7();
+} = create$6();
 
 // TODO uri and platform might not be needed
 const create = (uid, uri, x, y, width, height, platform) => {
@@ -1676,6 +1796,7 @@ const create = (uid, uri, x, y, width, height, platform) => {
     focusedIndex: -1,
     headerHeight: 0,
     height,
+    initial: true,
     inputSource: User,
     isRecordingKeys: false,
     isSortingByPrecedence: false,
@@ -1735,6 +1856,7 @@ const RenderFocus = 4;
 const RenderFocusContext = 5;
 const RenderWhenExpressionValue = 6;
 const RenderCss = 7;
+const RenderIncremental = 8;
 
 const isEqual$1 = (oldState, newState) => {
   return oldState.value === newState.value;
@@ -1745,7 +1867,7 @@ const isEqual = (oldState, newState) => {
 };
 
 const modules = [isEqual$2, isEqual$6, isEqual$1, isEqual$4, isEqual$3, isEqual, isEqual$5];
-const numbers = [RenderKeyBindings, RenderColumnWidth, RenderValue, RenderFocus, RenderFocusContext, RenderWhenExpressionValue, RenderCss];
+const numbers = [RenderIncremental, RenderColumnWidth, RenderValue, RenderFocus, RenderFocusContext, RenderWhenExpressionValue, RenderCss];
 
 const diff = (oldState, newState) => {
   if (oldState === newState) {
@@ -1885,102 +2007,295 @@ const focusPrevious = state => {
   return focusIndex(state, previousIndex);
 };
 
-const CheckBox = 'checkbox';
-const Document = 'document';
-const None$1 = 'none';
-
-const Button = 1;
-const Col = 2;
-const ColGroup = 3;
-const Div = 4;
-const Input = 6;
-const Kbd = 7;
-const Span = 8;
-const Table$1 = 9;
-const TBody = 10;
-const Td = 11;
-const Text = 12;
-const Th = 13;
-const THead = 14;
-const Tr = 15;
-
-const Backspace$1 = 1;
-const Tab$1 = 2;
-const Enter$1 = 3;
-const Escape$2 = 8;
-const Space$1 = 9;
-const PageUp$1 = 10;
-const PageDown$1 = 11;
-const End$1 = 255;
-const Home$1 = 12;
-const LeftArrow$1 = 13;
-const UpArrow$1 = 14;
-const RightArrow$1 = 15;
-const DownArrow$1 = 16;
-const Insert$1 = 17;
-const Delete$1 = 18;
-const Digit0$1 = 19;
-const Digit1$1 = 20;
-const Digit2$1 = 21;
-const Digit3$1 = 22;
-const Digit4$1 = 23;
-const Digit5$1 = 24;
-const Digit6$1 = 25;
-const Digit7$1 = 26;
-const Digit8$1 = 27;
-const Digit9$1 = 28;
-const KeyA$1 = 29;
-const KeyB$1 = 30;
-const KeyC$1 = 31;
-const KeyD$1 = 32;
-const KeyE$1 = 33;
-const KeyF$1 = 34;
-const KeyG$1 = 35;
-const KeyH$1 = 36;
-const KeyI$1 = 37;
-const KeyJ$1 = 38;
-const KeyK$1 = 39;
-const KeyL$1 = 40;
-const KeyM$1 = 41;
-const KeyN$1 = 42;
-const KeyO$1 = 43;
-const KeyP$1 = 44;
-const KeyQ$1 = 45;
-const KeyR$1 = 46;
-const KeyS$1 = 47;
-const KeyT$1 = 48;
-const KeyU$1 = 49;
-const KeyV$1 = 50;
-const KeyW$1 = 51;
-const KeyX$1 = 52;
-const KeyY$1 = 53;
-const KeyZ$1 = 54;
-const F1$1 = 57;
-const F2$1 = 58;
-const F3$1 = 59;
-const F4$1 = 60;
-const F5$1 = 61;
-const F6$1 = 62;
-const Equal$1 = 84;
-const Comma$1 = 85;
-const Minus$1 = 86;
-const Backquote$1 = 89;
-const Backslash$1 = 91;
-const Star$1 = 131;
-const Plus$1 = 132;
-
 const mergeClassNames = (...classNames) => {
   return classNames.filter(Boolean).join(' ');
 };
 
 const text = data => {
   return {
-    type: Text,
+    childCount: 0,
     text: data,
-    childCount: 0
+    type: Text
   };
 };
 
+const SetText = 1;
+const Replace = 2;
+const SetAttribute = 3;
+const RemoveAttribute = 4;
+const Add = 6;
+const NavigateChild = 7;
+const NavigateParent = 8;
+const RemoveChild = 9;
+const NavigateSibling = 10;
+
+const isKey = key => {
+  return key !== 'type' && key !== 'childCount';
+};
+
+const getKeys = node => {
+  const keys = Object.keys(node).filter(isKey);
+  return keys;
+};
+
+const arrayToTree = nodes => {
+  const result = [];
+  let i = 0;
+  while (i < nodes.length) {
+    const node = nodes[i];
+    const {
+      children,
+      nodesConsumed
+    } = getChildrenWithCount(nodes, i + 1, node.childCount || 0);
+    result.push({
+      node,
+      children
+    });
+    i += 1 + nodesConsumed;
+  }
+  return result;
+};
+const getChildrenWithCount = (nodes, startIndex, childCount) => {
+  if (childCount === 0) {
+    return {
+      children: [],
+      nodesConsumed: 0
+    };
+  }
+  const children = [];
+  let i = startIndex;
+  let remaining = childCount;
+  let totalConsumed = 0;
+  while (remaining > 0 && i < nodes.length) {
+    const node = nodes[i];
+    const nodeChildCount = node.childCount || 0;
+    const {
+      children: nodeChildren,
+      nodesConsumed
+    } = getChildrenWithCount(nodes, i + 1, nodeChildCount);
+    children.push({
+      node,
+      children: nodeChildren
+    });
+    const nodeSize = 1 + nodesConsumed;
+    i += nodeSize;
+    totalConsumed += nodeSize;
+    remaining--;
+  }
+  return {
+    children,
+    nodesConsumed: totalConsumed
+  };
+};
+
+const compareNodes = (oldNode, newNode) => {
+  const patches = [];
+  // Check if node type changed - return null to signal incompatible nodes
+  // (caller should handle this with a Replace operation)
+  if (oldNode.type !== newNode.type) {
+    return null;
+  }
+  // Handle text nodes
+  if (oldNode.type === Text && newNode.type === Text) {
+    if (oldNode.text !== newNode.text) {
+      patches.push({
+        type: SetText,
+        value: newNode.text
+      });
+    }
+    return patches;
+  }
+  // Compare attributes
+  const oldKeys = getKeys(oldNode);
+  const newKeys = getKeys(newNode);
+  // Check for attribute changes
+  for (const key of newKeys) {
+    if (oldNode[key] !== newNode[key]) {
+      patches.push({
+        type: SetAttribute,
+        key,
+        value: newNode[key]
+      });
+    }
+  }
+  // Check for removed attributes
+  for (const key of oldKeys) {
+    if (!(key in newNode)) {
+      patches.push({
+        type: RemoveAttribute,
+        key
+      });
+    }
+  }
+  return patches;
+};
+
+const treeToArray = node => {
+  const result = [node.node];
+  for (const child of node.children) {
+    result.push(...treeToArray(child));
+  }
+  return result;
+};
+
+const diffChildren = (oldChildren, newChildren, patches) => {
+  const maxLength = Math.max(oldChildren.length, newChildren.length);
+  // Track where we are: -1 means at parent, >= 0 means at child index
+  let currentChildIndex = -1;
+  // Collect indices of children to remove (we'll add these patches at the end in reverse order)
+  const indicesToRemove = [];
+  for (let i = 0; i < maxLength; i++) {
+    const oldNode = oldChildren[i];
+    const newNode = newChildren[i];
+    if (!oldNode && !newNode) {
+      continue;
+    }
+    if (!oldNode) {
+      // Add new node - we should be at the parent
+      if (currentChildIndex >= 0) {
+        // Navigate back to parent
+        patches.push({
+          type: NavigateParent
+        });
+        currentChildIndex = -1;
+      }
+      // Flatten the entire subtree so renderInternal can handle it
+      const flatNodes = treeToArray(newNode);
+      patches.push({
+        type: Add,
+        nodes: flatNodes
+      });
+    } else if (newNode) {
+      // Compare nodes to see if we need any patches
+      const nodePatches = compareNodes(oldNode.node, newNode.node);
+      // If nodePatches is null, the node types are incompatible - need to replace
+      if (nodePatches === null) {
+        // Navigate to this child
+        if (currentChildIndex === -1) {
+          patches.push({
+            type: NavigateChild,
+            index: i
+          });
+          currentChildIndex = i;
+        } else if (currentChildIndex !== i) {
+          patches.push({
+            type: NavigateSibling,
+            index: i
+          });
+          currentChildIndex = i;
+        }
+        // Replace the entire subtree
+        const flatNodes = treeToArray(newNode);
+        patches.push({
+          type: Replace,
+          nodes: flatNodes
+        });
+        // After replace, we're at the new element (same position)
+        continue;
+      }
+      // Check if we need to recurse into children
+      const hasChildrenToCompare = oldNode.children.length > 0 || newNode.children.length > 0;
+      // Only navigate to this element if we need to do something
+      if (nodePatches.length > 0 || hasChildrenToCompare) {
+        // Navigate to this child if not already there
+        if (currentChildIndex === -1) {
+          patches.push({
+            type: NavigateChild,
+            index: i
+          });
+          currentChildIndex = i;
+        } else if (currentChildIndex !== i) {
+          patches.push({
+            type: NavigateSibling,
+            index: i
+          });
+          currentChildIndex = i;
+        }
+        // Apply node patches (these apply to the current element, not children)
+        if (nodePatches.length > 0) {
+          patches.push(...nodePatches);
+        }
+        // Compare children recursively
+        if (hasChildrenToCompare) {
+          diffChildren(oldNode.children, newNode.children, patches);
+        }
+      }
+    } else {
+      // Remove old node - collect the index for later removal
+      indicesToRemove.push(i);
+    }
+  }
+  // Navigate back to parent if we ended at a child
+  if (currentChildIndex >= 0) {
+    patches.push({
+      type: NavigateParent
+    });
+    currentChildIndex = -1;
+  }
+  // Add remove patches in reverse order (highest index first)
+  // This ensures indices remain valid as we remove
+  for (let j = indicesToRemove.length - 1; j >= 0; j--) {
+    patches.push({
+      type: RemoveChild,
+      index: indicesToRemove[j]
+    });
+  }
+};
+const diffTrees = (oldTree, newTree, patches, path) => {
+  // At the root level (path.length === 0), we're already AT the element
+  // So we compare the root node directly, then compare its children
+  if (path.length === 0 && oldTree.length === 1 && newTree.length === 1) {
+    const oldNode = oldTree[0];
+    const newNode = newTree[0];
+    // Compare root nodes
+    const nodePatches = compareNodes(oldNode.node, newNode.node);
+    // If nodePatches is null, the root node types are incompatible - need to replace
+    if (nodePatches === null) {
+      const flatNodes = treeToArray(newNode);
+      patches.push({
+        type: Replace,
+        nodes: flatNodes
+      });
+      return;
+    }
+    if (nodePatches.length > 0) {
+      patches.push(...nodePatches);
+    }
+    // Compare children
+    if (oldNode.children.length > 0 || newNode.children.length > 0) {
+      diffChildren(oldNode.children, newNode.children, patches);
+    }
+  } else {
+    // Non-root level or multiple root elements - use the regular comparison
+    diffChildren(oldTree, newTree, patches);
+  }
+};
+
+const removeTrailingNavigationPatches = patches => {
+  // Find the last non-navigation patch
+  let lastNonNavigationIndex = -1;
+  for (let i = patches.length - 1; i >= 0; i--) {
+    const patch = patches[i];
+    if (patch.type !== NavigateChild && patch.type !== NavigateParent && patch.type !== NavigateSibling) {
+      lastNonNavigationIndex = i;
+      break;
+    }
+  }
+  // Return patches up to and including the last non-navigation patch
+  return lastNonNavigationIndex === -1 ? [] : patches.slice(0, lastNonNavigationIndex + 1);
+};
+
+const diffTree = (oldNodes, newNodes) => {
+  // Step 1: Convert flat arrays to tree structures
+  const oldTree = arrayToTree(oldNodes);
+  const newTree = arrayToTree(newNodes);
+  // Step 3: Compare the trees
+  const patches = [];
+  diffTrees(oldTree, newTree, patches, []);
+  // Remove trailing navigation patches since they serve no purpose
+  return removeTrailingNavigationPatches(patches);
+};
+
 const getKeyBindings = () => {
   return [{
     command: 'KeyBindings.focusNext',
@@ -2914,6 +3229,7 @@ const loadContent = async (state, savedState) => {
     columnWidth2,
     columnWidth3,
     finalDeltaY,
+    initial: false,
     isRecordingKeys,
     isSortingByPrecedence,
     items: filteredKeyBindings,
@@ -2982,50 +3298,6 @@ const renderCss = (oldState, newState) => {
   return [SetCss, uid, css];
 };
 
-const getCss = (columnWidth1, columnWidth2, columnWidth3) => {
-  return `.KeyBindings {
-  --ColumnWidth1: ${columnWidth1}px;
-  --ColumnWidth2: ${columnWidth2}px;
-  --ColumnWidth3: ${columnWidth3}px;
-}`;
-};
-const renderColumnWidths = (oldState, newState) => {
-  const {
-    columnWidth1,
-    columnWidth2,
-    columnWidth3,
-    uid
-  } = newState;
-  const css = getCss(columnWidth1, columnWidth2, columnWidth3);
-  return [SetCss, uid, css];
-};
-
-const getSelector = focus => {
-  switch (focus) {
-    case FocusKeyBindingsTable$1:
-      return `.Table`;
-    case FocusKeyBindingsWhenExpression:
-      return `[name="${WhenExpression}"]`;
-    default:
-      return `[name="${KeyBindingsFilter}"]`;
-  }
-};
-const renderFocus = (oldState, newState) => {
-  const {
-    focus,
-    uid
-  } = newState;
-  const selector = getSelector(focus);
-  return [FocusSelector, uid, selector];
-};
-
-const renderFocusContext = (oldState, newState) => {
-  const {
-    uid
-  } = newState;
-  return [FocusSelector, uid, KeyBindingsFilter];
-};
-
 const IconButton = 'IconButton';
 const InputBadge = 'InputBadge';
 const Key = 'Key';
@@ -3167,7 +3439,7 @@ const getSearchFieldButtonVirtualDom = action => {
     onClick: HandleSearchActionClick,
     role: CheckBox,
     title: label,
-    type: Button
+    type: Button$1
   }, {
     childCount: 0,
     className: mergeClassNames(MaskIcon, icon),
@@ -3279,7 +3551,7 @@ const getKeyBindingsTableEditCellDom = () => {
     className,
     tabIndex: -1,
     title,
-    type: Button
+    type: Button$1
   }, icon];
 };
 
@@ -3463,7 +3735,7 @@ const getResizerVirtualDom = extraClassName => {
     name: extraClassName,
     onPointerDown: HandleResizerPointerDown,
     role: None$1,
-    type: Button
+    type: Button$1
   }, {
     childCount: 0,
     className: ResizerInner,
@@ -3526,6 +3798,7 @@ const renderKeyBindings = (oldState, newState) => {
     finalDeltaY,
     focusedIndex,
     height,
+    initial,
     isRecordingKeys,
     isSortingByPrecedence,
     itemHeight,
@@ -3539,6 +3812,9 @@ const renderKeyBindings = (oldState, newState) => {
     uid,
     value
   } = newState;
+  if (initial) {
+    return [SetDom2, uid, []];
+  }
   const deltaY = minLineY * itemHeight;
   const percent = deltaY / finalDeltaY;
   const listHeight = height - tableHeaderHeight - searchHeaderHeight;
@@ -3552,6 +3828,57 @@ const renderKeyBindings = (oldState, newState) => {
   return [SetDom2, uid, tableDom];
 };
 
+const renderIncremental = (oldState, newState) => {
+  const oldDom = renderKeyBindings(oldState, oldState)[2];
+  const newDom = renderKeyBindings(newState, newState)[2];
+  const patches = diffTree(oldDom, newDom);
+  return [SetPatches, newState.uid, patches];
+};
+
+const getCss = (columnWidth1, columnWidth2, columnWidth3) => {
+  return `.KeyBindings {
+  --ColumnWidth1: ${columnWidth1}px;
+  --ColumnWidth2: ${columnWidth2}px;
+  --ColumnWidth3: ${columnWidth3}px;
+}`;
+};
+const renderColumnWidths = (oldState, newState) => {
+  const {
+    columnWidth1,
+    columnWidth2,
+    columnWidth3,
+    uid
+  } = newState;
+  const css = getCss(columnWidth1, columnWidth2, columnWidth3);
+  return [SetCss, uid, css];
+};
+
+const getSelector = focus => {
+  switch (focus) {
+    case FocusKeyBindingsTable$1:
+      return `.Table`;
+    case FocusKeyBindingsWhenExpression:
+      return `[name="${WhenExpression}"]`;
+    default:
+      return `[name="${KeyBindingsFilter}"]`;
+  }
+};
+const renderFocus = (oldState, newState) => {
+  const {
+    focus,
+    uid
+  } = newState;
+  const selector = getSelector(focus);
+  return [FocusSelector, uid, selector];
+};
+
+const renderFocusContext = (oldState, newState) => {
+  const {
+    uid
+  } = newState;
+  return [FocusSelector, uid, KeyBindingsFilter];
+};
+
 const renderValue = (oldState, newState) => {
   const {
     uid,
@@ -3578,6 +3905,8 @@ const getRenderer = diffType => {
       return renderFocus;
     case RenderFocusContext:
       return renderFocusContext;
+    case RenderIncremental:
+      return renderIncremental;
     case RenderKeyBindings:
       return renderKeyBindings;
     case RenderValue:
@@ -3614,7 +3943,7 @@ const render3 = (uid, diffResult) => {
 const renderEventListeners = () => {
   return [{
     name: HandleTableContextMenu,
-    params: ['handleContextMenu', Button$1, ClientX, ClientY],
+    params: ['handleContextMenu', Button, ClientX, ClientY],
     preventDefault: true
   }, {
     name: HandleInput,
@@ -3634,7 +3963,7 @@ const renderEventListeners = () => {
     params: ['handleResizerMove', ClientX]
   }, {
     name: HandleTableContextMenu,
-    params: ['handleContextMenu', Button$1, ClientX, ClientY],
+    params: ['handleContextMenu', Button, ClientX, ClientY],
     preventDefault: true
   }, {
     name: HandleWheel,