@lvce-editor/extension-search-view 6.4.0 → 7.1.0

package/dist/extensionSearchViewWorkerMain.js

@@ -456,7 +456,7 @@ const getFirstEvent = (eventEmitter, eventMap) => {
   return promise;
 };
 const Message$1 = 3;
-const create$5$1 = async ({
+const create$5 = async ({
   isMessagePortOpen,
   messagePort
 }) => {
@@ -507,61 +507,19 @@ const wrap$5 = messagePort => {
 };
 const IpcParentWithMessagePort$1 = {
   __proto__: null,
-  create: create$5$1,
+  create: create$5,
   signal: signal$1,
   wrap: wrap$5
 };
 
-const Two = '2.0';
-const create$4$1 = (method, params) => {
-  return {
-    jsonrpc: Two,
-    method,
-    params
-  };
-};
+const Two$1 = '2.0';
 const callbacks = Object.create(null);
-const set$6 = (id, fn) => {
-  callbacks[id] = fn;
-};
 const get$2 = id => {
   return callbacks[id];
 };
-const remove = id => {
+const remove$1 = id => {
   delete callbacks[id];
 };
-let id$1 = 0;
-const create$3$1 = () => {
-  return ++id$1;
-};
-const registerPromise = () => {
-  const id = create$3$1();
-  const {
-    resolve,
-    promise
-  } = Promise.withResolvers();
-  set$6(id, resolve);
-  return {
-    id,
-    promise
-  };
-};
-const create$2$1 = (method, params) => {
-  const {
-    id,
-    promise
-  } = registerPromise();
-  const message = {
-    jsonrpc: Two,
-    method,
-    params,
-    id
-  };
-  return {
-    message,
-    promise
-  };
-};
 class JsonRpcError extends Error {
   constructor(message) {
     super(message);
@@ -712,7 +670,7 @@ const resolve = (id, response) => {
     return;
   }
   fn(response);
-  remove(id);
+  remove$1(id);
 };
 const E_COMMAND_NOT_FOUND = 'E_COMMAND_NOT_FOUND';
 const getErrorType = prettyError => {
@@ -755,9 +713,9 @@ const getErrorProperty = (error, prettyError) => {
     }
   };
 };
-const create$1$1 = (id, error) => {
+const create$1$2 = (id, error) => {
   return {
-    jsonrpc: Two,
+    jsonrpc: Two$1,
     id,
     error
   };
@@ -766,22 +724,22 @@ 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$6 = (message, result) => {
+const create$3 = (message, result) => {
   return {
-    jsonrpc: Two,
+    jsonrpc: Two$1,
     id: message.id,
     result: result ?? null
   };
 };
 const getSuccessResponse = (message, result) => {
   const resultProperty = result ?? null;
-  return create$6(message, resultProperty);
+  return create$3(message, resultProperty);
 };
 const getErrorResponseSimple = (id, error) => {
   return {
-    jsonrpc: Two,
+    jsonrpc: Two$1,
     id,
     error: {
       code: Custom,
@@ -868,29 +826,6 @@ const handleJsonRpcMessage = async (...args) => {
   }
   throw new JsonRpcError('unexpected message');
 };
-const invokeHelper = async (ipc, method, params, useSendAndTransfer) => {
-  const {
-    message,
-    promise
-  } = create$2$1(method, params);
-  if (useSendAndTransfer && ipc.sendAndTransfer) {
-    ipc.sendAndTransfer(message);
-  } else {
-    ipc.send(message);
-  }
-  const responseMessage = await promise;
-  return unwrapJsonRpcResult(responseMessage);
-};
-const send = (transport, method, ...params) => {
-  const message = create$4$1(method, params);
-  transport.send(message);
-};
-const invoke$3 = (ipc, method, ...params) => {
-  return invokeHelper(ipc, method, params, false);
-};
-const invokeAndTransfer$2 = (ipc, method, ...params) => {
-  return invokeHelper(ipc, method, params, true);
-};
 
 class CommandNotFoundError extends Error {
   constructor(command) {
@@ -913,24 +848,87 @@ const execute = (command, ...args) => {
   return fn(...args);
 };
 
+const Two = '2.0';
+const create$s = (method, params) => {
+  return {
+    jsonrpc: Two,
+    method,
+    params
+  };
+};
+const create$r = (id, method, params) => {
+  const message = {
+    id,
+    jsonrpc: Two,
+    method,
+    params
+  };
+  return message;
+};
+let id$1 = 0;
+const create$q = () => {
+  return ++id$1;
+};
+
+/* eslint-disable n/no-unsupported-features/es-syntax */
+
+const registerPromise = map => {
+  const id = create$q();
+  const {
+    promise,
+    resolve
+  } = Promise.withResolvers();
+  map[id] = resolve;
+  return {
+    id,
+    promise
+  };
+};
+
+// @ts-ignore
+const invokeHelper = async (callbacks, ipc, method, params, useSendAndTransfer) => {
+  const {
+    id,
+    promise
+  } = registerPromise(callbacks);
+  const message = create$r(id, method, params);
+  if (useSendAndTransfer && ipc.sendAndTransfer) {
+    ipc.sendAndTransfer(message);
+  } else {
+    ipc.send(message);
+  }
+  const responseMessage = await promise;
+  return unwrapJsonRpcResult(responseMessage);
+};
 const createRpc = ipc => {
+  const callbacks = Object.create(null);
+  ipc._resolve = (id, response) => {
+    const fn = callbacks[id];
+    if (!fn) {
+      console.warn(`callback ${id} may already be disposed`);
+      return;
+    }
+    fn(response);
+    delete callbacks[id];
+  };
   const rpc = {
+    async dispose() {
+      await ipc?.dispose();
+    },
+    invoke(method, ...params) {
+      return invokeHelper(callbacks, ipc, method, params, false);
+    },
+    invokeAndTransfer(method, ...params) {
+      return invokeHelper(callbacks, ipc, method, params, true);
+    },
     // @ts-ignore
     ipc,
     /**
      * @deprecated
      */
     send(method, ...params) {
-      send(ipc, method, ...params);
-    },
-    invoke(method, ...params) {
-      return invoke$3(ipc, method, ...params);
-    },
-    invokeAndTransfer(method, ...params) {
-      return invokeAndTransfer$2(ipc, method, ...params);
-    },
-    async dispose() {
-      await ipc?.dispose();
+      const message = create$s(method, params);
+      ipc.send(message);
     }
   };
   return rpc;
@@ -947,7 +945,7 @@ const logError = () => {
 const handleMessage = event => {
   const actualRequiresSocket = event?.target?.requiresSocket || requiresSocket;
   const actualExecute = event?.target?.execute || execute;
-  return handleJsonRpcMessage(event.target, event.data, actualExecute, resolve, preparePrettyError, logError, actualRequiresSocket);
+  return handleJsonRpcMessage(event.target, event.data, actualExecute, event.target._resolve, preparePrettyError, logError, actualRequiresSocket);
 };
 const handleIpc = ipc => {
   if ('addEventListener' in ipc) {
@@ -965,15 +963,16 @@ const listen$1 = async (module, options) => {
   const ipc = module.wrap(rawIpc);
   return ipc;
 };
-const create$5 = async ({
+const create$4 = async ({
   commandMap,
+  isMessagePortOpen = true,
   messagePort
 }) => {
   // TODO create a commandMap per rpc instance
   register(commandMap);
   const rawIpc = await IpcParentWithMessagePort$1.create({
-    messagePort,
-    isMessagePortOpen: true
+    isMessagePortOpen,
+    messagePort
   });
   const ipc = IpcParentWithMessagePort$1.wrap(rawIpc);
   handleIpc(ipc);
@@ -981,8 +980,9 @@ const create$5 = async ({
   messagePort.start();
   return rpc;
 };
-const create$3 = async ({
+const create$2$1 = async ({
   commandMap,
+  isMessagePortOpen,
   send
 }) => {
   const {
@@ -990,16 +990,17 @@ const create$3 = async ({
     port2
   } = new MessageChannel();
   await send(port1);
-  return create$5({
+  return create$4({
     commandMap,
+    isMessagePortOpen,
     messagePort: port2
   });
 };
 const TransferMessagePortRpcParent = {
   __proto__: null,
-  create: create$3
+  create: create$2$1
 };
-const create$4 = async ({
+const create$1$1 = async ({
   commandMap
 }) => {
   // TODO create a commandMap per rpc instance
@@ -1011,7 +1012,7 @@ const create$4 = async ({
 };
 const WebWorkerRpcClient = {
   __proto__: null,
-  create: create$4
+  create: create$1$1
 };
 const createMockRpc = ({
   commandMap
@@ -1026,14 +1027,22 @@ const createMockRpc = ({
     return command(...params);
   };
   const mockRpc = {
+    invocations,
     invoke,
-    invokeAndTransfer: invoke,
-    invocations
+    invokeAndTransfer: invoke
   };
   return mockRpc;
 };
 
-const Button$2 = 'event.button';
+const None$3 = 'none';
+
+const Button$2 = 1;
+const Div = 4;
+const Input$1 = 6;
+const Text = 12;
+const Img = 17;
+
+const Button$1 = 'event.button';
 const ClientX = 'event.clientX';
 const ClientY = 'event.clientY';
 const DeltaMode = 'event.deltaMode';
@@ -1045,11 +1054,16 @@ const Script$1 = 2;
 const ManageExtension = 8;
 const ExtensionSearchFilter = 95;
 
+const LeftClick = 0;
+
 const ExtensionHostWorker = 44;
 const ExtensionManagementWorker = 9006;
 const RendererWorker = 1;
 
 const FocusSelector = 'Viewlet.focusSelector';
+const SetCss = 'Viewlet.setCss';
+const SetDom2 = 'Viewlet.setDom2';
+const SetPatches = 'Viewlet.setPatches';
 
 const rpcs = Object.create(null);
 const set$5 = (id, rpc) => {
@@ -1058,7 +1072,11 @@ const set$5 = (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$2 = rpcId => {
   return {
     async dispose() {
@@ -1077,6 +1095,18 @@ const create$2 = rpcId => {
       // @ts-ignore
       return rpc.invokeAndTransfer(method, ...params);
     },
+    registerMockRpc(commandMap) {
+      const mockRpc = createMockRpc({
+        commandMap
+      });
+      set$5(rpcId, mockRpc);
+      // @ts-ignore
+      mockRpc[Symbol.dispose] = () => {
+        remove(rpcId);
+      };
+      // @ts-ignore
+      return mockRpc;
+    },
     set(rpc) {
       set$5(rpcId, rpc);
     }
@@ -1087,6 +1117,7 @@ const {
   dispose: dispose$2,
   invoke: invoke$2,
   invokeAndTransfer: invokeAndTransfer$1,
+  registerMockRpc,
   set: set$4
 } = create$2(ExtensionHostWorker);
 const executeReferenceProvider = async (id, offset) => {
@@ -1101,12 +1132,9 @@ const getRuntimeStatus = async extensionId => {
   // @ts-ignore
   return invoke$2('ExtensionHost.getRuntimeStatus', extensionId);
 };
-const registerMockRpc = commandMap => {
-  const mockRpc = createMockRpc({
-    commandMap
-  });
-  set$4(mockRpc);
-  return mockRpc;
+const getEnabledOutputProviderIds = async () => {
+  const channels = await invoke$2('Output.getEnabledProviders');
+  return channels;
 };
 
 const ExtensionHost = {
@@ -1114,6 +1142,7 @@ const ExtensionHost = {
   dispose: dispose$2,
   executeFileReferenceProvider,
   executeReferenceProvider,
+  getEnabledOutputProviderIds,
   getRuntimeStatus,
   invoke: invoke$2,
   invokeAndTransfer: invokeAndTransfer$1,
@@ -1238,8 +1267,8 @@ const terminate = () => {
   globalThis.close();
 };
 
-const None$3 = 0;
-const Input$1 = 1;
+const None$2 = 0;
+const Input = 1;
 const List$2 = 2;
 
 const handleError = async (error, notify = true, prefix = '') => {
@@ -1399,7 +1428,7 @@ const getFinalDeltaY = (height, itemHeight, itemsLength) => {
   return finalDeltaY;
 };
 
-const Button$1 = 1;
+const Button = 1;
 
 const HandleClearSearchResults = 1;
 const HandleClickFilter = 2;
@@ -1429,13 +1458,13 @@ const getInputActions = hasValue => {
     icon: `MaskIcon${ClearAll}`,
     onClick: HandleClearSearchResults,
     title: clearExtensionSearchResults(),
-    type: Button$1
+    type: Button
   }, {
     enabled: true,
     icon: `MaskIcon${Filter}`,
     onClick: HandleClickFilter,
     title: filter(),
-    type: Button$1
+    type: Button
   }];
   return actions;
 };
@@ -1641,7 +1670,7 @@ const handleChange = async (state, update) => {
         allExtensions,
         deltaY: 0,
         finalDeltaY: 0,
-        focus: Input$1,
+        focus: Input,
         inputActions,
         inputSource,
         items,
@@ -1693,7 +1722,7 @@ const handleChange = async (state, update) => {
 const clearSearchResults = state => {
   return handleChange(state, {
     ...state,
-    focus: Input$1,
+    focus: Input,
     inputSource: Script$1,
     searchValue: ''
   });
@@ -1800,6 +1829,7 @@ const create = (id, uri, x, y, width, height, platform, assetDir) => {
     handleOffset: 0,
     headerHeight: 41,
     height,
+    initial: true,
     inputActions: [],
     inputSource: 0,
     itemHeight: 72,
@@ -1825,6 +1855,10 @@ const create = (id, uri, x, y, width, height, platform, assetDir) => {
   set$1(id, state, state);
 };
 
+const isEqual$3 = (oldState, newState) => {
+  return newState.scrollBarHeight === newState.scrollBarHeight && oldState.scrollBarY === newState.scrollBarY && oldState.initial === newState.initial && oldState.deltaY === newState.deltaY;
+};
+
 const isEqual$2 = (oldState, newState) => {
   if (!newState.focus) {
     return true;
@@ -1850,9 +1884,11 @@ const RenderScrollBar = 5;
 const RenderMessage = 6;
 const RenderSearchValue = 7;
 const RenderFocusContext = 8;
+const RenderIncremental = 9;
+const RenderCss = 10;
 
-const modules = [isEqual$1, isEqual$2, isEqual, isEqual$2];
-const numbers = [RenderItems, RenderFocus, RenderSearchValue, RenderFocusContext];
+const modules = [isEqual$1, isEqual$2, isEqual, isEqual$2, isEqual$3];
+const numbers = [RenderIncremental, RenderFocus, RenderSearchValue, RenderFocusContext, RenderCss];
 
 const diff2 = uid => {
   return diff(uid, modules, numbers);
@@ -2037,12 +2073,12 @@ const getActions = () => {
     command: '',
     icon: Refresh,
     id: refresh(),
-    type: Button$1
+    type: Button
   }, {
     command: '',
     icon: Ellipsis,
     id: viewsAndMoreActions(),
-    type: Button$1
+    type: Button
   }];
 };
 
@@ -2105,18 +2141,18 @@ const getKeyBindings = () => {
 };
 
 const Separator = 1;
-const None$2 = 0;
+const None$1 = 0;
 const SubMenu = 4;
 
 const getMenuEntries = () => {
   return [{
     command: 'SearchExtensions.enable',
-    flags: None$2,
+    flags: None$1,
     id: 'enable',
     label: enable()
   }, {
     command: 'SearchExtensions.enableWorkspace',
-    flags: None$2,
+    flags: None$1,
     id: 'enableWorkspace',
     label: enableWorkspace()
   }, {
@@ -2126,12 +2162,12 @@ const getMenuEntries = () => {
     label: ''
   }, {
     command: 'SearchExtensions.disable',
-    flags: None$2,
+    flags: None$1,
     id: 'disable',
     label: disable()
   }, {
     command: 'SearchExtensions.disableWorkspace',
-    flags: None$2,
+    flags: None$1,
     id: 'disableWorkspace',
     label: disableWorkspace()
   }, {
@@ -2141,17 +2177,17 @@ const getMenuEntries = () => {
     label: ''
   }, {
     command: 'SearchExtensions.installAnotherVersion',
-    flags: None$2,
+    flags: None$1,
     id: 'installAnotherVersion',
     label: installAnotherVersion()
   }, {
     command: 'Extensions.copyExtensionInfo',
-    flags: None$2,
+    flags: None$1,
     id: 'copy',
     label: copy()
   }, {
     command: 'Extensions.copyExtensionId',
-    flags: None$2,
+    flags: None$1,
     id: 'copyExtensionId',
     label: copyExtensionId$1()
   }];
@@ -2160,27 +2196,27 @@ const getMenuEntries = () => {
 const getMenuEntriesFilter = () => {
   return [{
     command: 'SearchExtensions.filterByFeatured',
-    flags: None$2,
+    flags: None$1,
     id: 'filterByFeatured',
     label: featured()
   }, {
     command: 'SearchExtensions.filterByMcpServers',
-    flags: None$2,
+    flags: None$1,
     id: 'filterByMcpServers',
     label: mcpServers()
   }, {
     command: 'SearchExtensions.filterByMostPopular',
-    flags: None$2,
+    flags: None$1,
     id: 'filterByMostPopular',
     label: mostPopular()
   }, {
     command: 'SearchExtensions.filterByRecentlyPublished',
-    flags: None$2,
+    flags: None$1,
     id: 'filterByRecentlyPublished',
     label: recentlyPublished()
   }, {
     command: 'SearchExtensions.filterByRecommended',
-    flags: None$2,
+    flags: None$1,
     id: 'filterByRecommended',
     label: recommended()
   }, {
@@ -2195,32 +2231,32 @@ const getMenuEntriesFilter = () => {
     label: category()
   }, {
     command: 'SearchExtensions.filterByInstalled',
-    flags: None$2,
+    flags: None$1,
     id: 'filterByInstalled',
     label: installed()
   }, {
     command: 'SearchExtensions.filterByUpdates',
-    flags: None$2,
+    flags: None$1,
     id: 'filterByUpdates',
     label: updates()
   }, {
     command: 'SearchExtensions.filterByBuiltin',
-    flags: None$2,
+    flags: None$1,
     id: 'filterByBuiltin',
     label: builtIn()
   }, {
     command: 'SearchExtensions.filterByEnabled',
-    flags: None$2,
+    flags: None$1,
     id: 'filterByEnabled',
     label: enabled()
   }, {
     command: 'SearchExtensions.filterByDisabled',
-    flags: None$2,
+    flags: None$1,
     id: 'filterByDisabled',
     label: disabled()
   }, {
     command: 'SearchExtensions.filterByWorkspaceUnsupported',
-    flags: None$2,
+    flags: None$1,
     id: 'filterByWorkspaceUnsupported',
     label: workspaceUnsupported()
   }, {
@@ -2255,7 +2291,7 @@ const getMenuIds = () => {
 const handleBlur = state => {
   return {
     ...state,
-    focus: None$3
+    focus: None$2
   };
 };
 
@@ -2291,28 +2327,295 @@ const handleClick = async (state, index) => {
   return newState;
 };
 
-const None$1 = 'none';
-
-const Button = 1;
-const Div = 4;
-const Input = 6;
-const Text = 12;
-const Img = 17;
-
-const LeftClick = 0;
-
 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 getListIndex = (eventX, eventY, x, y, deltaY, itemHeight, headerHeight) => {
   const relativeDeltaY = deltaY % itemHeight;
   const relativeY = eventY - y - headerHeight + relativeDeltaY;
@@ -2809,6 +3112,7 @@ const loadContent = async (state, savedState) => {
     ...state,
     allExtensions: normalized,
     deltaY,
+    initial: false,
     inputSource: Script,
     size
   }, searchValue, Script);
@@ -2819,11 +3123,41 @@ const openSuggest = state => {
   return state;
 };
 
+const getCss = state => {
+  const {
+    deltaY,
+    itemHeight,
+    scrollBarHeight,
+    scrollBarY
+  } = state;
+  const relative = deltaY % itemHeight;
+  return `.Extensions .ScrollBarThumb {
+  height: ${scrollBarHeight}px;
+  top: ${scrollBarY}px;
+}
+
+.Extensions .ListItems {
+  top: -${relative}px;
+
+.ExtensionListItem {
+  position: relative !important;
+}
+`;
+};
+
+const renderCss = newState => {
+  const {
+    uid
+  } = newState;
+  const css = getCss(newState);
+  return [SetCss, uid, css];
+};
+
 const Extensions$1 = 'extensions';
 
 const getSelector = focus => {
   switch (focus) {
-    case Input$1:
+    case Input:
       return `[name="${Extensions$1}"]`;
     case List$2:
       return '.ListItems';
@@ -2847,7 +3181,7 @@ const renderFocusContext = newState => {
   const {
     uid
   } = newState;
-  if (newState.focus === Input$1) {
+  if (newState.focus === Input) {
     return ['Viewlet.setFocusContext', uid, FocusExtensionsInput];
   }
   if (newState.focus === List$2) {
@@ -2911,7 +3245,7 @@ const getSearchFieldButtonVirtualDom = button => {
     onClick,
     tabIndex: 0,
     title,
-    type: Button
+    type: Button$2
   }, {
     childCount: 0,
     className: mergeClassNames(MaskIcon, icon),
@@ -2938,7 +3272,7 @@ const getSearchFieldVirtualDom = (name, placeholder, onInput, insideButtons, out
     onInput,
     placeholder,
     spellcheck: false,
-    type: Input
+    type: Input$1
   }, {
     childCount: insideButtons.length,
     className: SearchFieldButtons,
@@ -3019,8 +3353,7 @@ const getExtensionListItemVirtualDom = extension => {
     name,
     posInSet,
     publisher,
-    setSize,
-    top
+    setSize
   } = extension;
   const dom = [{
     ariaPosInSet: posInSet,
@@ -3030,7 +3363,6 @@ const getExtensionListItemVirtualDom = extension => {
     className: getClassName(focused),
     id: getId(focused),
     role: ListItem,
-    top,
     type: Div
   }, {
     childCount: 0,
@@ -3179,14 +3511,29 @@ const getExtensionsViewVirtualDom = state => {
     ariaLive: 'polite',
     childCount: 2,
     className: mergeClassNames(Viewlet, Extensions),
-    role: None$1,
+    role: None$3,
     type: Div
   }, ...getExtensionHeaderVirtualDom(placeholder, inputActions), ...getContentVirtualDom(visibleExtensions, message, scrollBarHeight, scrollBarY, focusOutline)];
 };
 
 const renderItems2 = newState => {
+  const {
+    initial,
+    uid
+  } = newState;
+  if (initial) {
+    return [SetDom2, uid, []];
+  }
   const dom = getExtensionsViewVirtualDom(newState);
-  return ['Viewlet.setDom2', newState.uid, dom];
+  return [SetDom2, uid, dom];
+};
+
+// TODO cache rendered dom so that it can be used for dom diffing
+const renderIncremental = (newState, oldState) => {
+  const oldDom = renderItems2(oldState)[2];
+  const newDom = renderItems2(newState)[2];
+  const patches = diffTree(oldDom, newDom);
+  return [SetPatches, newState.uid, patches];
 };
 
 const SetMessage = 'setMessage';
@@ -3218,12 +3565,16 @@ const renderSearchValue = newState => {
 
 const getRenderer = diffType => {
   switch (diffType) {
+    case RenderCss:
+      return renderCss;
     case RenderFocus:
       return renderFocus;
     case RenderFocusContext:
       return renderFocusContext;
     case RenderHeader:
       return renderHeader;
+    case RenderIncremental:
+      return renderIncremental;
     case RenderItems:
       return renderItems2;
     case RenderMessage:
@@ -3274,13 +3625,13 @@ const getActionButtonVirtualDom = action => {
     childCount: 1,
     className: IconButton,
     title: id,
-    type: Button
+    type: Button$2
   }, getIconVirtualDom(icon)];
 };
 
 const getActionVirtualDom = action => {
   switch (action.type) {
-    case Button$1:
+    case Button:
       return getActionButtonVirtualDom(action);
     default:
       return [];
@@ -3312,7 +3663,7 @@ const renderActions = uid => {
 const renderEventListeners = () => {
   return [{
     name: HandleContextMenu,
-    params: ['handleContextMenu', Button$2, ClientX, ClientY],
+    params: ['handleContextMenu', Button$1, ClientX, ClientY],
     preventDefault: true
   }, {
     name: HandleHeaderContextMenu,
@@ -3320,7 +3671,7 @@ const renderEventListeners = () => {
     preventDefault: true
   }, {
     name: HandlePointerDown,
-    params: ['handleClickAt', Button$2, ClientX, ClientY],
+    params: ['handleClickAt', Button$1, ClientX, ClientY],
     preventDefault: true
   }, {
     name: HandleScrollBarPointerDown,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/extension-search-view",
-  "version": "6.4.0",
+  "version": "7.1.0",
   "description": "Extension Search View Worker",
   "repository": {
     "type": "git",