@lvce-editor/static-server 0.113.11 → 0.113.13

package/static/{55af9e7 → edd8259}/packages/extension-search-view-worker/dist/extensionSearchViewWorkerMain.js

@@ -2908,2039 +2908,2044 @@ const getComponentState = uid => {
   return get(uid).newState;
 };
 
-const Tab = 2;
-const Enter = 3;
-const Escape = 8;
-const Space = 9;
-const PageUp = 10;
-const PageDown = 11;
-const End = 255;
-const Home = 12;
-const UpArrow = 14;
-const DownArrow = 16;
+const mergeClassNames = (...classNames) => {
+  return classNames.filter(Boolean).join(' ');
+};
 
-const CtrlCmd = 1 << 11 >>> 0;
+const text = data => {
+  return {
+    childCount: 0,
+    text: data,
+    type: Text
+  };
+};
 
-const FocusExtensions = 15;
-const FocusExtensionsInput = 7000;
+new Set(Object.values(VirtualDomElements));
 
-const getKeyBindings = () => {
-  return [{
-    command: 'Extensions.closeSuggest',
-    key: Escape,
-    when: FocusExtensionsInput
-  }, {
-    command: 'Extensions.acceptCompletion',
-    key: Enter,
-    when: FocusExtensionsInput
-  }, {
-    command: 'Extensions.acceptCompletion',
-    key: Tab,
-    when: FocusExtensionsInput
-  }, {
-    command: 'Extensions.selectPreviousCompletion',
-    key: UpArrow,
-    when: FocusExtensionsInput
-  }, {
-    command: 'Extensions.selectNextCompletion',
-    key: DownArrow,
-    when: FocusExtensionsInput
-  }, {
-    command: 'Extensions.openSuggest',
-    key: CtrlCmd | Space,
-    when: FocusExtensionsInput
-  }, {
-    command: 'Extensions.focusFirst',
-    key: Home,
-    when: FocusExtensions
-  }, {
-    command: 'Extensions.focusLast',
-    key: End,
-    when: FocusExtensions
-  }, {
-    command: 'Extensions.focusPreviousPage',
-    key: PageUp,
-    when: FocusExtensions
-  }, {
-    command: 'Extensions.focusNextPage',
-    key: PageDown,
-    when: FocusExtensions
-  }, {
-    command: 'Extensions.focusPrevious',
-    key: UpArrow,
-    when: FocusExtensions
-  }, {
-    command: 'Extensions.focusNext',
-    key: DownArrow,
-    when: FocusExtensions
-  }, {
-    command: 'Extensions.handleClickCurrentButKeepFocus',
-    key: Space,
-    when: FocusExtensions
-  }, {
-    command: 'Extensions.handleClickCurrent',
-    key: Enter,
-    when: FocusExtensions
-  }, {
-    command: 'Extensions.toggleSuggest',
-    key: CtrlCmd | Space,
-    when: FocusExtensions
-  }, {
-    command: 'Extensions.scrollDown',
-    key: CtrlCmd | DownArrow,
-    when: FocusExtensions
-  }];
+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 SetReferenceNodeUid = 11;
+
+const isKey = key => {
+  return key !== 'type' && key !== 'childCount';
 };
 
-const Separator = 1;
-const None$1 = 0;
-const SubMenu = 4;
-const Disabled = 5;
+const getKeys = node => {
+  const keys = Object.keys(node).filter(isKey);
+  return keys;
+};
 
-const nonEnableableStatuses = [Installing, NotInstalled, Uninstalling];
-const getEnablementFlags = (disabled, status) => {
-  if (status && nonEnableableStatuses.includes(status)) {
+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 {
-      disable: Disabled,
-      enable: Disabled
+      children: [],
+      nodesConsumed: 0
     };
   }
-  const isDisabled = status === Disabled$1 || status === undefined && disabled;
+  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 {
-    disable: isDisabled ? Disabled : None$1,
-    enable: isDisabled ? None$1 : Disabled
+    children,
+    nodesConsumed: totalConsumed
   };
 };
-const getMenuEntriesList = (builtin, disabled = false, status) => {
-  const enablementFlags = getEnablementFlags(disabled, status);
-  return [{
-    command: 'Extensions.enable',
-    flags: enablementFlags.enable,
-    id: 'enable',
-    label: enable$2()
-  }, {
-    command: 'Extensions.enableWorkspace',
-    flags: enablementFlags.enable,
-    id: 'enableWorkspace',
-    label: enableWorkspace$1()
-  }, {
-    command: '',
-    flags: Separator,
-    id: 'separator1',
-    label: ''
-  }, {
-    command: 'Extensions.disable',
-    flags: enablementFlags.disable,
-    id: 'disable',
-    label: disable$2()
-  }, {
-    command: 'Extensions.disableWorkspace',
-    flags: enablementFlags.disable,
-    id: 'disableWorkspace',
-    label: disableWorkspace$1()
-  }, {
-    command: '',
-    flags: Separator,
-    id: 'separator2',
-    label: ''
-  }, {
-    command: 'Extensions.installAnotherVersion',
-    flags: Disabled,
-    id: 'installAnotherVersion',
-    label: installAnotherVersion$1()
-  }, {
-    command: 'Extensions.copyExtensionInfo',
-    flags: None$1,
-    id: 'copy',
-    label: copy()
-  }, {
-    command: 'Extensions.copyExtensionId',
-    flags: None$1,
-    id: 'copyExtensionId',
-    label: copyExtensionId$1()
-  }];
+
+const compareNodes = (oldNode, newNode) => {
+  // 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;
+  }
+  const patches = [];
+  // Handle reference nodes - special handling for uid changes
+  if (oldNode.type === Reference && oldNode.uid !== newNode.uid) {
+    patches.push({
+      type: SetReferenceNodeUid,
+      uid: newNode.uid
+    });
+  }
+  // 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).filter(key => oldNode.type !== Reference || key !== 'uid');
+  const newKeys = getKeys(newNode).filter(key => newNode.type !== Reference || key !== 'uid');
+  // 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 (!Object.hasOwn(newNode, key)) {
+      patches.push({
+        type: RemoveAttribute,
+        key
+      });
+    }
+  }
+  return patches;
 };
 
-const getMenuEntriesFilter = () => {
-  return [{
-    command: 'Extensions.filterByFeatured',
-    flags: None$1,
-    id: 'filterByFeatured',
-    label: featured()
-  }, {
-    command: 'Extensions.filterByMcpServers',
-    flags: None$1,
-    id: 'filterByMcpServers',
-    label: mcpServers()
-  }, {
-    command: 'Extensions.filterByMostPopular',
-    flags: None$1,
-    id: 'filterByMostPopular',
-    label: mostPopular()
-  }, {
-    command: 'Extensions.filterByRecentlyPublished',
-    flags: None$1,
-    id: 'filterByRecentlyPublished',
-    label: recentlyPublished()
-  }, {
-    command: 'Extensions.filterByRecommended',
-    flags: None$1,
-    id: 'filterByRecommended',
-    label: recommended()
-  }, {
-    command: '',
-    flags: Separator,
-    id: 'separator1',
-    label: ''
-  }, {
-    command: 'SearchExtensions.filterByCategory',
-    flags: SubMenu,
-    id: 'filterByCategory',
-    label: category()
-  }, {
-    command: 'Extensions.filterByInstalled',
-    flags: None$1,
-    id: 'filterByInstalled',
-    label: installed()
-  }, {
-    command: 'Extensions.filterByUpdates',
-    flags: None$1,
-    id: 'filterByUpdates',
-    label: updates()
-  }, {
-    command: 'Extensions.filterByBuiltin',
-    flags: None$1,
-    id: 'filterByBuiltin',
-    label: builtIn()
-  }, {
-    command: 'Extensions.filterByLinked',
-    flags: None$1,
-    id: 'filterByLinked',
-    label: linked()
-  }, {
-    command: 'Extensions.filterByEnabled',
-    flags: None$1,
-    id: 'filterByEnabled',
-    label: enabled()
-  }, {
-    command: 'Extensions.filterByDisabled',
-    flags: None$1,
-    id: 'filterByDisabled',
-    label: disabled()
-  }, {
-    command: 'Extensions.filterByWorkspaceUnsupported',
-    flags: None$1,
-    id: 'filterByWorkspaceUnsupported',
-    label: workspaceUnsupported()
-  }, {
-    command: '',
-    flags: Separator,
-    id: 'separator2',
-    label: ''
-  }, {
-    command: 'SearchExtensions.filterBySortBy',
-    flags: SubMenu,
-    id: 'filterBySortBy',
-    label: sortBy()
-  }];
+const treeToArray = node => {
+  const result = [];
+  const stack = [node];
+  while (stack.length > 0) {
+    const current = stack.pop();
+    result.push(current.node);
+    for (let i = current.children.length - 1; i >= 0; i--) {
+      stack.push(current.children[i]);
+    }
+  }
+  return result;
 };
 
-const getMenuEntries2 = (state, props) => {
-  const {
-    menuId
-  } = props;
-  switch (menuId) {
-    case ExtensionSearchFilter:
-      return getMenuEntriesFilter();
-    default:
-      return getMenuEntriesList(props.builtin, props.disabled, props.status);
+const navigateToChild = (patches, currentChildIndex, index) => {
+  if (currentChildIndex === -1) {
+    patches.push({
+      type: NavigateChild,
+      index
+    });
+    return index;
+  }
+  if (currentChildIndex !== index) {
+    patches.push({
+      type: NavigateSibling,
+      index
+    });
   }
+  return index;
 };
-
-const getMenuIds = () => {
-  return [ManageExtension, ExtensionSearchFilter];
+const navigateToParent = (patches, currentChildIndex) => {
+  if (currentChildIndex >= 0) {
+    patches.push({
+      type: NavigateParent
+    });
+  }
+  return -1;
 };
-
-const handleBlur = state => {
-  return {
-    ...state,
-    focus: None$2,
-    suggestOpen: false
-  };
+const addTree = (newNode, patches) => {
+  patches.push({
+    type: Add,
+    nodes: treeToArray(newNode)
+  });
 };
-
-const getExtensionDetailUri = extensionId => {
-  return `extension-detail://${extensionId}`;
+const replaceTree = (newNode, patches) => {
+  patches.push({
+    type: Replace,
+    nodes: treeToArray(newNode)
+  });
 };
-
-const openUri = async uri => {
-  return openUri$1(uri);
+const diffExistingChild = (oldNode, newNode, patches, currentChildIndex, index) => {
+  const nodePatches = compareNodes(oldNode.node, newNode.node);
+  if (nodePatches === null) {
+    const nextChildIndex = navigateToChild(patches, currentChildIndex, index);
+    replaceTree(newNode, patches);
+    return nextChildIndex;
+  }
+  const hasChildrenToCompare = oldNode.children.length > 0 || newNode.children.length > 0;
+  if (nodePatches.length === 0 && !hasChildrenToCompare) {
+    return currentChildIndex;
+  }
+  const nextChildIndex = navigateToChild(patches, currentChildIndex, index);
+  if (nodePatches.length > 0) {
+    patches.push(...nodePatches);
+  }
+  if (hasChildrenToCompare) {
+    diffChildren(oldNode.children, newNode.children, patches);
+  }
+  return nextChildIndex;
 };
-
-const selectIndex = (state, index) => {
-  return {
-    ...state,
-    focusedIndex: index
-  };
+const diffRootNode = (oldNode, newNode, patches) => {
+  const nodePatches = compareNodes(oldNode.node, newNode.node);
+  if (nodePatches === null) {
+    replaceTree(newNode, patches);
+    return;
+  }
+  if (nodePatches.length > 0) {
+    patches.push(...nodePatches);
+  }
+  if (oldNode.children.length > 0 || newNode.children.length > 0) {
+    diffChildren(oldNode.children, newNode.children, patches);
+  }
 };
-
-const handleClick = async (state, index) => {
-  const {
-    items,
-    minLineY
-  } = state;
-  const actualIndex = index + minLineY;
-  if (actualIndex < 0 || actualIndex >= items.length) {
-    return {
-      ...state,
-      focus: List$2,
-      focusedIndex: -1
-    };
+const diffChildren = (oldChildren, newChildren, patches) => {
+  const maxLength = Math.max(oldChildren.length, newChildren.length);
+  let currentChildIndex = -1;
+  const indicesToRemove = [];
+  for (let i = 0; i < maxLength; i++) {
+    const oldNode = oldChildren[i];
+    const newNode = newChildren[i];
+    if (!oldNode && !newNode) {
+      continue;
+    }
+    if (!oldNode) {
+      currentChildIndex = navigateToParent(patches, currentChildIndex);
+      addTree(newNode, patches);
+      continue;
+    }
+    if (!newNode) {
+      indicesToRemove.push(i);
+      continue;
+    }
+    currentChildIndex = diffExistingChild(oldNode, newNode, patches, currentChildIndex, i);
+  }
+  navigateToParent(patches, currentChildIndex);
+  for (let j = indicesToRemove.length - 1; j >= 0; j--) {
+    patches.push({
+      type: RemoveChild,
+      index: indicesToRemove[j]
+    });
   }
-  const extension = items[actualIndex];
-  const uri = getExtensionDetailUri(extension.id);
-  await openUri(uri);
-  const partialNewState = selectIndex(state, actualIndex);
-  const newState = {
-    ...partialNewState,
-    focus: List$2
-  };
-  return newState;
 };
-
-const mergeClassNames = (...classNames) => {
-  return classNames.filter(Boolean).join(' ');
+const diffTrees = (oldTree, newTree, patches, path) => {
+  if (path.length === 0 && oldTree.length === 1 && newTree.length === 1) {
+    diffRootNode(oldTree[0], newTree[0], patches);
+    return;
+  }
+  diffChildren(oldTree, newTree, patches);
 };
 
-const text = data => {
-  return {
-    childCount: 0,
-    text: data,
-    type: Text
-  };
+const removeTrailingNavigationPatches = patches => {
+  while (patches.length > 0) {
+    const patch = patches.at(-1);
+    if (patch.type !== NavigateChild && patch.type !== NavigateParent && patch.type !== NavigateSibling) {
+      break;
+    }
+    patches.pop();
+  }
+  return patches;
 };
 
-new Set(Object.values(VirtualDomElements));
+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 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 SetReferenceNodeUid = 11;
-
-const isKey = key => {
-  return key !== 'type' && key !== 'childCount';
-};
+const Actions = 'Actions';
+const ExtensionActions = 'ExtensionActions';
+const ExtensionActionButton = 'ExtensionActionButton';
+const ExtensionActive = 'ExtensionActive';
+const ExtensionHeader = 'ExtensionHeader';
+const ExtensionListItem = 'ExtensionListItem';
+const ExtensionListItemActionInstall = 'ExtensionListItemActionInstall';
+const ExtensionListItemAuthorName = 'ExtensionListItemAuthorName';
+const ExtensionListItemDescription = 'ExtensionListItemDescription';
+const ExtensionListItemDetail = 'ExtensionListItemDetail';
+const ExtensionListItemDisabled = 'ExtensionListItemDisabled';
+const ExtensionListItemDownloadCount = 'ExtensionListItemDownloadCount';
+const ExtensionListItemFooter = 'ExtensionListItemFooter';
+const ExtensionListItemIcon = 'ExtensionListItemIcon';
+const ExtensionListItemLinkedIcon = 'ExtensionListItemLinkedIcon';
+const ExtensionListItemMetadata = 'ExtensionListItemMetadata';
+const ExtensionListItemName = 'ExtensionListItemName';
+const ExtensionListItemRating = 'ExtensionListItemRating';
+const ExtensionListItemStatistic = 'ExtensionListItemStatistic';
+const ExtensionSearchCompletionHighlight = 'ExtensionSearchCompletionHighlight';
+const ExtensionSearchCompletionItem = 'ExtensionSearchCompletionItem';
+const ExtensionSearchCompletionItemFocused = 'ExtensionSearchCompletionItemFocused';
+const ExtensionSearchCompletionWidget = 'ExtensionSearchCompletionWidget';
+const Extensions$1 = 'Extensions';
+const FocusOutline = 'FocusOutline';
+const IconButton = 'IconButton';
+const List$1 = 'List';
+const ListItems = 'ListItems';
+const MaskIcon = 'MaskIcon';
+const MultilineInputBox = 'MultilineInputBox';
+const NoExtensionsFoundMessage = 'NoExtensionsFoundMessage';
+const ScrollBar = 'ScrollBar';
+const ScrollBarSmall = 'ScrollBarSmall';
+const ScrollBarThumb = 'ScrollBarThumb';
+const ScrollBarThumbActive = 'ScrollBarThumbActive';
+const SearchField = 'SearchField';
+const SearchFieldButton = 'SearchFieldButton';
+const SearchFieldButtonDisabled = 'SearchFieldButtonDisabled';
+const SearchFieldButtons = 'SearchFieldButtons';
+const SearchFieldContainer = 'SearchFieldContainer';
+const Viewlet = 'Viewlet';
 
-const getKeys = node => {
-  const keys = Object.keys(node).filter(isKey);
-  return keys;
-};
+const ComboBox = 'combobox';
+const Image = 'img';
+const List = 'list';
+const ListBox = 'listbox';
+const ListItem = 'listitem';
+const None$1 = 'none';
+const Option = 'option';
+const ToolBar = 'toolbar';
 
-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 getCompletionLabelVirtualDom = (label, highlights) => {
+  const dom = [];
+  let position = 0;
+  for (let i = 0; i < highlights.length; i += 2) {
+    const start = highlights[i];
+    const end = highlights[i + 1];
+    if (position < start) {
+      dom.push(text(label.slice(position, start)));
+    }
+    dom.push({
+      childCount: 1,
+      className: ExtensionSearchCompletionHighlight,
+      name: label,
+      type: Span
+    }, text(label.slice(start, end)));
+    position = end;
   }
-  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--;
+  if (position < label.length) {
+    dom.push(text(label.slice(position)));
   }
-  return {
-    children,
-    nodesConsumed: totalConsumed
-  };
+  return dom;
 };
 
-const compareNodes = (oldNode, newNode) => {
-  // 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;
-  }
-  const patches = [];
-  // Handle reference nodes - special handling for uid changes
-  if (oldNode.type === Reference && oldNode.uid !== newNode.uid) {
-    patches.push({
-      type: SetReferenceNodeUid,
-      uid: newNode.uid
-    });
-  }
-  // 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).filter(key => oldNode.type !== Reference || key !== 'uid');
-  const newKeys = getKeys(newNode).filter(key => newNode.type !== Reference || key !== 'uid');
-  // Check for attribute changes
-  for (const key of newKeys) {
-    if (oldNode[key] !== newNode[key]) {
-      patches.push({
-        type: SetAttribute,
-        key,
-        value: newNode[key]
-      });
+const getRootNodeCount = nodes => {
+  let count = 0;
+  const remainingChildCounts = [];
+  for (const node of nodes) {
+    while (remainingChildCounts.length > 0 && remainingChildCounts.at(-1) === 0) {
+      remainingChildCounts.pop();
     }
-  }
-  // Check for removed attributes
-  for (const key of oldKeys) {
-    if (!Object.hasOwn(newNode, key)) {
-      patches.push({
-        type: RemoveAttribute,
-        key
-      });
+    if (remainingChildCounts.length === 0) {
+      count++;
+    } else {
+      const lastIndex = remainingChildCounts.length - 1;
+      remainingChildCounts[lastIndex]--;
     }
+    remainingChildCounts.push(node.childCount);
   }
-  return patches;
+  return count;
 };
-
-const treeToArray = node => {
-  const result = [];
-  const stack = [node];
-  while (stack.length > 0) {
-    const current = stack.pop();
-    result.push(current.node);
-    for (let i = current.children.length - 1; i >= 0; i--) {
-      stack.push(current.children[i]);
-    }
-  }
-  return result;
+const getCompletionItemVirtualDom = (item, index, focusedIndex) => {
+  const labelDom = getCompletionLabelVirtualDom(item.label, item.highlights);
+  const focused = index === focusedIndex;
+  return [{
+    ariaSelected: focused,
+    childCount: getRootNodeCount(labelDom),
+    className: focused ? mergeClassNames(ExtensionSearchCompletionItem, ExtensionSearchCompletionItemFocused) : ExtensionSearchCompletionItem,
+    id: `ExtensionSearchCompletion-${index}`,
+    name: item.label,
+    onPointerDown: HandlePointerDown,
+    role: Option,
+    type: Button$2
+  }, ...labelDom];
 };
 
-const navigateToChild = (patches, currentChildIndex, index) => {
-  if (currentChildIndex === -1) {
-    patches.push({
-      type: NavigateChild,
-      index
-    });
-    return index;
-  }
-  if (currentChildIndex !== index) {
-    patches.push({
-      type: NavigateSibling,
-      index
-    });
-  }
-  return index;
+const getCompletionWidgetVirtualDom = (items, focusedIndex) => {
+  return [{
+    ariaLabel: 'Extension search completions',
+    childCount: items.length,
+    className: ExtensionSearchCompletionWidget,
+    id: 'ExtensionSearchCompletions',
+    role: ListBox,
+    type: Div
+  }, ...items.flatMap((item, index) => getCompletionItemVirtualDom(item, index, focusedIndex))];
 };
-const navigateToParent = (patches, currentChildIndex) => {
-  if (currentChildIndex >= 0) {
-    patches.push({
-      type: NavigateParent
-    });
+
+const Focusable = 0;
+
+const disabledClassName = mergeClassNames(SearchFieldButton, SearchFieldButtonDisabled);
+const getClassName = enabled => {
+  if (enabled) {
+    return SearchFieldButton;
   }
-  return -1;
-};
-const addTree = (newNode, patches) => {
-  patches.push({
-    type: Add,
-    nodes: treeToArray(newNode)
-  });
+  return disabledClassName;
 };
-const replaceTree = (newNode, patches) => {
-  patches.push({
-    type: Replace,
-    nodes: treeToArray(newNode)
-  });
-};
-const diffExistingChild = (oldNode, newNode, patches, currentChildIndex, index) => {
-  const nodePatches = compareNodes(oldNode.node, newNode.node);
-  if (nodePatches === null) {
-    const nextChildIndex = navigateToChild(patches, currentChildIndex, index);
-    replaceTree(newNode, patches);
-    return nextChildIndex;
-  }
-  const hasChildrenToCompare = oldNode.children.length > 0 || newNode.children.length > 0;
-  if (nodePatches.length === 0 && !hasChildrenToCompare) {
-    return currentChildIndex;
-  }
-  const nextChildIndex = navigateToChild(patches, currentChildIndex, index);
-  if (nodePatches.length > 0) {
-    patches.push(...nodePatches);
-  }
-  if (hasChildrenToCompare) {
-    diffChildren(oldNode.children, newNode.children, patches);
-  }
-  return nextChildIndex;
+const getSearchFieldButtonVirtualDom = button => {
+  const {
+    enabled,
+    icon,
+    onClick,
+    title
+  } = button;
+  return [{
+    childCount: 1,
+    className: getClassName(enabled),
+    onClick,
+    tabIndex: Focusable,
+    title,
+    type: Button$2
+  }, {
+    childCount: 0,
+    className: mergeClassNames(MaskIcon, icon),
+    type: Div
+  }];
 };
-const diffRootNode = (oldNode, newNode, patches) => {
-  const nodePatches = compareNodes(oldNode.node, newNode.node);
-  if (nodePatches === null) {
-    replaceTree(newNode, patches);
-    return;
-  }
-  if (nodePatches.length > 0) {
-    patches.push(...nodePatches);
-  }
-  if (oldNode.children.length > 0 || newNode.children.length > 0) {
-    diffChildren(oldNode.children, newNode.children, patches);
-  }
+
+const searchFieldNode = {
+  childCount: 2,
+  className: SearchField,
+  role: None$1,
+  type: Div
 };
-const diffChildren = (oldChildren, newChildren, patches) => {
-  const maxLength = Math.max(oldChildren.length, newChildren.length);
-  let currentChildIndex = -1;
-  const indicesToRemove = [];
-  for (let i = 0; i < maxLength; i++) {
-    const oldNode = oldChildren[i];
-    const newNode = newChildren[i];
-    if (!oldNode && !newNode) {
-      continue;
-    }
-    if (!oldNode) {
-      currentChildIndex = navigateToParent(patches, currentChildIndex);
-      addTree(newNode, patches);
-      continue;
-    }
-    if (!newNode) {
-      indicesToRemove.push(i);
-      continue;
-    }
-    currentChildIndex = diffExistingChild(oldNode, newNode, patches, currentChildIndex, i);
-  }
-  navigateToParent(patches, currentChildIndex);
-  for (let j = indicesToRemove.length - 1; j >= 0; j--) {
-    patches.push({
-      type: RemoveChild,
-      index: indicesToRemove[j]
+const getSearchFieldVirtualDom = (name, placeholder, onInput, insideButtons, outsideButtons, onFocus = '', onBlur = '', inputProperties = {}) => {
+  // TODO avoid mutation
+  const dom = [searchFieldNode, {
+    autocapitalize: 'off',
+    autocomplete: 'off',
+    autocorrect: 'off',
+    childCount: 0,
+    className: MultilineInputBox,
+    inputType: 'search',
+    name,
+    ...(onBlur && {
+      onBlur
+    }),
+    onFocus,
+    onInput,
+    placeholder,
+    spellcheck: false,
+    type: Input$1,
+    ...inputProperties
+  }, {
+    childCount: insideButtons.length,
+    className: SearchFieldButtons,
+    type: Div
+  }, ...insideButtons.flatMap(getSearchFieldButtonVirtualDom)];
+  if (outsideButtons.length > 0) {
+    dom.unshift({
+      childCount: 1 + outsideButtons.length,
+      className: SearchFieldContainer,
+      role: None$1,
+      type: Div
     });
+    dom.push(...outsideButtons.flatMap(getSearchFieldButtonVirtualDom));
   }
-};
-const diffTrees = (oldTree, newTree, patches, path) => {
-  if (path.length === 0 && oldTree.length === 1 && newTree.length === 1) {
-    diffRootNode(oldTree[0], newTree[0], patches);
-    return;
-  }
-  diffChildren(oldTree, newTree, patches);
+  return dom;
 };
 
-const removeTrailingNavigationPatches = patches => {
-  while (patches.length > 0) {
-    const patch = patches.at(-1);
-    if (patch.type !== NavigateChild && patch.type !== NavigateParent && patch.type !== NavigateSibling) {
-      break;
-    }
-    patches.pop();
+const Extensions = 'extensions';
+
+const getCompletionVirtualDom = (completionItems, completionFocusedIndex, suggestOpen) => {
+  if (!suggestOpen) {
+    return [];
   }
-  return patches;
+  return getCompletionWidgetVirtualDom(completionItems, completionFocusedIndex);
 };
-
-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 getExtensionHeaderVirtualDom = (placeholder, actions, completionItems = [], completionFocusedIndex = 0, suggestOpen = false) => {
+  const inputProperties = suggestOpen ? {
+    ariaActivedescendant: `ExtensionSearchCompletion-${completionFocusedIndex}`,
+    ariaAutoComplete: 'list',
+    ariaControls: 'ExtensionSearchCompletions',
+    ariaExpanded: true,
+    role: ComboBox
+  } : {
+    ariaAutoComplete: 'list',
+    ariaExpanded: false,
+    role: ComboBox
+  };
+  const completionDom = getCompletionVirtualDom(completionItems, completionFocusedIndex, suggestOpen);
+  return [{
+    childCount: suggestOpen ? 2 : 1,
+    className: ExtensionHeader,
+    onContextMenu: HandleHeaderContextMenu,
+    type: Div
+  }, ...getSearchFieldVirtualDom(Extensions, placeholder, HandleExtensionsInput, actions, [], HandleInputFocus, HandleInputBlur, inputProperties), ...completionDom];
 };
 
-const getListIndex = (eventX, eventY, x, y, deltaY, itemHeight, headerHeight) => {
-  const relativeDeltaY = deltaY % itemHeight;
-  const relativeY = eventY - y - headerHeight + relativeDeltaY;
-  const index = Math.floor(relativeY / itemHeight);
-  return index;
-};
+const Extension = 'Extension';
 
-const handleCompletionPointerDown = (state, label) => {
-  if (state.completionItems.every(item => item.label !== label)) {
-    return Promise.resolve(state);
-  }
-  return acceptCompletion(state, label);
+const install = {
+  disabled: false,
+  label: install$1(),
+  onClick: HandleInstall
 };
-
-const handleClickAt = async (state, button, eventX, eventY, name = '') => {
-  if (name.startsWith('@')) {
-    return handleCompletionPointerDown(state, name);
+const installing = {
+  disabled: true,
+  label: installing$1(),
+  onClick: HandleInstall
+};
+const enable = {
+  disabled: false,
+  label: enable$2(),
+  onClick: HandleEnable
+};
+const disable = {
+  disabled: false,
+  label: disable$2(),
+  onClick: HandleDisable
+};
+const uninstall = {
+  disabled: false,
+  label: uninstall$1(),
+  onClick: HandleUninstall
+};
+const uninstalling = {
+  disabled: true,
+  label: uninstalling$1(),
+  onClick: HandleUninstall
+};
+const getExtensionActions = (builtin, disabled, status) => {
+  if (status === NotInstalled) {
+    return [install];
   }
-  if (name) {
-    return state;
+  if (status === Installing) {
+    return [installing];
   }
-  if (button !== LeftClick) {
-    return state;
+  if (status === Uninstalling) {
+    return builtin ? [] : [uninstalling];
   }
-  const {
-    deltaY,
-    headerHeight,
-    itemHeight,
-    x,
-    y
-  } = state;
-  const index = getListIndex(eventX, eventY, x, y, deltaY, itemHeight, headerHeight);
-  return handleClick(state, index);
-};
-
-const handleClickCurrent = state => {
-  const {
-    focusedIndex
-  } = state;
-  return handleClick(state, focusedIndex);
-};
-
-const handleClickCurrentButKeepFocus = state => {
-  const {
-    focusedIndex
-  } = state;
-  return handleClick(state, focusedIndex);
+  const enableOrDisable = isExtensionDisabled(disabled, status) ? enable : disable;
+  return builtin ? [enableOrDisable] : [enableOrDisable, uninstall];
 };
 
-const show2 = async (uid, menuId, x, y, args) => {
-  await showContextMenu2(uid, menuId, x, y, args);
+const className = mergeClassNames(ExtensionListItemActionInstall, ExtensionActionButton);
+const getExtensionActionVirtualDom = (action, id) => {
+  return [{
+    childCount: 1,
+    className,
+    disabled: action.disabled,
+    name: id,
+    onClick: action.onClick,
+    type: Button$2
+  }, text(action.label)];
 };
 
-const handleClickFilter = async state => {
-  const {
-    headerHeight,
-    uid,
-    width,
-    x,
-    y
-  } = state;
-  const menuX = x + width + 60;
-  const menuHeight = 370;
-  const menuY = y + headerHeight + menuHeight;
-  await show2(uid, ExtensionSearchFilter, menuX, menuY, {
-    menuId: ExtensionSearchFilter
-  });
-  return state;
+const getExtensionActionsVirtualDom = (id, builtin, disabled, status) => {
+  const actions = getExtensionActions(builtin, disabled, status);
+  return [{
+    childCount: actions.length,
+    className: ExtensionActions,
+    type: Div
+  }, ...actions.flatMap(action => getExtensionActionVirtualDom(action, id))];
 };
 
-const handleContextMenu = async (state, button, eventX, eventY) => {
-  // TODO use focused index when when context menu button is -1 (keyboard)
-  const {
-    deltaY,
-    headerHeight,
-    itemHeight,
-    items,
-    minLineY,
-    uid,
-    x,
-    y
-  } = state;
-  const visibleIndex = getListIndex(eventX, eventY, x, y, deltaY, itemHeight, headerHeight);
-  const index = visibleIndex + minLineY;
-  if (index < 0 || index >= items.length) {
-    return state;
-  }
-  const item = items[index];
-  await show2(uid, ManageExtension, eventX, eventY, {
-    builtin: item.builtin === true,
-    disabled: item.disabled === true,
-    menuId: ManageExtension,
-    status: item.status
-  });
+const getExtensionListItemClassName = (focused, disabled) => {
+  return mergeClassNames(ExtensionListItem, focused ? ExtensionActive : '', disabled ? ExtensionListItemDisabled : '');
+};
+
+const getExtensionListItemFooter = hasStatistics => {
   return {
-    ...state,
-    focusedIndex: index
+    childCount: hasStatistics ? 3 : 2,
+    className: ExtensionListItemFooter,
+    type: Div
   };
 };
 
-const handleDisableWorkspace = (state, id) => {
-  return state;
+const getExtensionListItemId = focused => {
+  if (focused) {
+    return `ExtensionActive`;
+  }
+  return undefined;
 };
 
-const handleEnableWorkspace = (state, id) => {
-  return state;
+const extensionListItemMetadataNode = {
+  childCount: 2,
+  className: ExtensionListItemMetadata,
+  type: Div
+};
+const getStatisticVirtualDom = (label, value, className) => {
+  const accessibleLabel = `${label}: ${value}`;
+  return [{
+    ariaLabel: accessibleLabel,
+    childCount: 1,
+    className: mergeClassNames(ExtensionListItemStatistic, className),
+    title: accessibleLabel,
+    type: Span
+  }, text(value)];
+};
+const getExtensionStatisticsVirtualDom = (downloadCount, rating$1) => {
+  return [extensionListItemMetadataNode, ...getStatisticVirtualDom(downloads(), downloadCount, ExtensionListItemDownloadCount), ...getStatisticVirtualDom(rating(), rating$1, ExtensionListItemRating)];
 };
 
-const Web = 1;
-const Electron = 2;
-const Remote = 3;
-
-const getAllExtensions$1 = async (assetDir, platform) => {
-  try {
-    return await invoke$3('Extensions.getAllExtensions', assetDir, platform);
-  } catch (error) {
-    if (platform === Web) {
-      return [];
-    }
-    throw error;
+const getExtensionListItemStatisticsVirtualDom = (hasStatistics, downloadCount, rating) => {
+  if (!hasStatistics) {
+    return [];
   }
+  return getExtensionStatisticsVirtualDom(downloadCount, rating);
 };
 
-const getAllExtensions = (assetDir, platform) => {
-  return getAllExtensions$1(assetDir, platform);
+const getListItemDetail = linked => {
+  return {
+    childCount: linked ? 4 : 3,
+    className: ExtensionListItemDetail,
+    type: Div
+  };
 };
-
-const getBuiltin = extension => {
-  if (extension === null || typeof extension !== 'object') {
-    return false;
+const listItemName = {
+  childCount: 1,
+  className: ExtensionListItemName,
+  type: Div
+};
+const listItemDescription = {
+  childCount: 1,
+  className: ExtensionListItemDescription,
+  type: Div
+};
+const listItemAuthorName = {
+  childCount: 1,
+  className: ExtensionListItemAuthorName,
+  type: Div
+};
+const getLinkedIconVirtualDom = linked$1 => {
+  if (!linked$1) {
+    return [];
   }
+  const label = linked();
+  return [{
+    ariaLabel: label,
+    childCount: 0,
+    className: mergeClassNames(MaskIcon, 'MaskIconLinkExternal', ExtensionListItemLinkedIcon),
+    role: Image,
+    title: 'Extension is linked',
+    type: Div
+  }];
+};
+const getExtensionListItemVirtualDom = extension => {
   const {
-    builtin,
+    builtin = false,
+    description,
+    disabled = false,
+    downloadCount = 'n/a',
+    focused,
+    icon,
     id,
-    isBuiltin
+    linked = false,
+    name,
+    posInSet,
+    publisher,
+    rating = 'n/a',
+    setSize,
+    status
   } = extension;
-  return isBuiltin === true || builtin === true || typeof id === 'string' && id.startsWith('builtin.');
+  const actionsDom = getExtensionActionsVirtualDom(id, builtin, disabled, status);
+  const hasStatistics = !builtin;
+  const dom = [{
+    ariaPosInSet: posInSet,
+    ariaRoleDescription: Extension,
+    ariaSetSize: setSize,
+    childCount: 2,
+    className: getExtensionListItemClassName(focused, disabled),
+    id: getExtensionListItemId(focused),
+    role: ListItem,
+    type: Div
+  }, {
+    childCount: 0,
+    className: ExtensionListItemIcon,
+    role: None$1,
+    src: icon,
+    type: Img
+  }, getListItemDetail(linked), listItemName, text(name), listItemDescription, text(description), getExtensionListItemFooter(hasStatistics), listItemAuthorName, text(publisher), ...getExtensionListItemStatisticsVirtualDom(hasStatistics, downloadCount, rating), ...actionsDom, ...getLinkedIconVirtualDom(linked)];
+  return dom;
 };
 
-const isString = item => {
-  return typeof item === 'string';
+const getListClassName = focusOutline => {
+  const className = focusOutline ? mergeClassNames(ListItems, FocusOutline) : ListItems;
+  return className;
 };
-
-const getCategories = extension => {
-  if (extension === null || typeof extension !== 'object' || !('categories' in extension) || !Array.isArray(extension.categories)) {
-    return [];
-  }
-  return extension.categories.filter(isString);
+const getExtensionsListVirtualDom = (visibleExtensions, focusOutline) => {
+  const dom = [{
+    ariaLabel: extensions(),
+    childCount: visibleExtensions.length,
+    className: getListClassName(focusOutline),
+    onBlur: HandleBlur,
+    onContextmenu: HandleContextMenu,
+    onContextMenu: HandleContextMenu,
+    onFocus: HandleFocus,
+    onPointerDown: HandlePointerDown,
+    onTouchEnd: HandleTouchEnd,
+    onTouchMove: HandleTouchMove,
+    onTouchStart: HandleTouchStart,
+    onWheel: HandleWheel,
+    role: List,
+    tabIndex: Focusable,
+    type: Div
+  }, ...visibleExtensions.flatMap(getExtensionListItemVirtualDom)];
+  return dom;
 };
 
-const getDescription = extension => {
-  if (extension === null || typeof extension !== 'object' || !('description' in extension) || typeof extension.description !== 'string' || !extension.description) {
-    return 'n/a';
-  }
-  return extension.description;
+const getExtensionsVirtualDom = (visibleExtensions, focusOutline) => {
+  const dom = getExtensionsListVirtualDom(visibleExtensions, focusOutline);
+  // TODO
+  return dom;
 };
 
-const getDisabled = extension => {
-  return extension !== null && typeof extension === 'object' && 'disabled' in extension && extension.disabled === true;
+const noExtensionsFoundNode = {
+  childCount: 1,
+  className: NoExtensionsFoundMessage,
+  type: Div
+};
+const getNoExtensionsFoundVirtualDom = message => {
+  return [noExtensionsFoundNode, text(message)];
 };
 
-const getDownloadCountValue = extension => {
-  if (extension === null || typeof extension !== 'object') {
-    return undefined;
-  }
-  const marketplace = 'marketplace' in extension && extension.marketplace !== null && typeof extension.marketplace === 'object' ? extension.marketplace : {};
-  const packageJson = 'packageJSON' in extension && extension.packageJSON !== null && typeof extension.packageJSON === 'object' ? extension.packageJSON : {};
-  return ('downloadCount' in extension ? extension.downloadCount : undefined) ?? ('downloads' in extension ? extension.downloads : undefined) ?? ('downloadCount' in marketplace ? marketplace.downloadCount : undefined) ?? ('downloads' in marketplace ? marketplace.downloads : undefined) ?? ('downloadCount' in packageJson ? packageJson.downloadCount : undefined) ?? ('downloads' in packageJson ? packageJson.downloads : undefined);
+const scrollBarNode = {
+  childCount: 1,
+  className: mergeClassNames(ScrollBar, ScrollBarSmall),
+  onPointerDown: HandleScrollBarPointerDown,
+  // TODO support pointercapture event
+  type: Div
 };
-const getDownloadCount = extension => {
-  const downloadCount = getDownloadCountValue(extension);
-  if (typeof downloadCount !== 'number') {
-    return 'n/a';
+const scrollBarThumbNode = {
+  childCount: 0,
+  className: ScrollBarThumb,
+  type: Div
+};
+const getScrollBarVirtualDom = (scrollBarHeight, scrollBarTop) => {
+  const shouldShowScrollbar = scrollBarHeight > 0;
+  if (!shouldShowScrollbar) {
+    return [];
   }
-  return downloadCount.toLocaleString();
+  return [scrollBarNode, scrollBarThumbNode];
 };
 
-const getRemoteUrl = (extension, platform, assetDir) => {
-  if (extension === null || typeof extension !== 'object') {
-    return '';
-  }
-  const builtin = 'builtin' in extension && extension.builtin === true;
-  const icon = 'icon' in extension && typeof extension.icon === 'string' ? extension.icon : '';
-  const id = 'id' in extension && typeof extension.id === 'string' ? extension.id : '';
-  const path = 'path' in extension && typeof extension.path === 'string' ? extension.path : '';
-  if (platform === Remote || platform === Electron) {
-    if (builtin) {
-      return `${assetDir}/extensions/${id}/${icon}`;
-    }
-    return `/remote/${path}/${icon}`; // TODO support windows paths
-  }
-  if (platform === Web) {
-    return `${path}/${icon}`;
-  }
-  return '';
-};
-
-const getExtensionDefaultIcon = assetDir => {
-  return `${assetDir}/icons/extensionDefaultIcon.png`;
-};
-const getExtensionLanguageBasicsIcon = assetDir => {
-  return `${assetDir}/icons/language-icon.svg`;
-};
-const getExtensionThemeIcon = assetDir => {
-  return `${assetDir}/icons/theme-icon.png`;
-};
-
-const isLanguageBasicsExtension = extension => {
-  return 'name' in extension && typeof extension.name === 'string' && extension.name.startsWith('Language Basics');
-};
-const isThemeExtension = extension => {
-  return 'name' in extension && typeof extension.name === 'string' && extension.name.endsWith(' Theme');
-};
-const getExtensionIcon = (extension, platform, assetDir) => {
-  if (extension === null || typeof extension !== 'object') {
-    return getExtensionDefaultIcon(assetDir);
-  }
-  const hasIcon = 'icon' in extension && typeof extension.icon === 'string' && extension.icon;
-  const hasPath = 'path' in extension && typeof extension.path === 'string' && extension.path;
-  if (!hasPath || !hasIcon) {
-    if (isLanguageBasicsExtension(extension)) {
-      return getExtensionLanguageBasicsIcon(assetDir);
-    }
-    if (isThemeExtension(extension)) {
-      return getExtensionThemeIcon(assetDir);
-    }
-    return getExtensionDefaultIcon(assetDir);
-  }
-  return getRemoteUrl(extension, platform, assetDir);
-};
-
-const getIcon = (extension, platform, assetDir) => {
-  return getExtensionIcon(extension, platform, assetDir);
-};
-
-const getId = extension => {
-  if (extension === null || typeof extension !== 'object' || !('id' in extension) || typeof extension.id !== 'string' || !extension.id) {
-    return 'n/a';
-  }
-  return extension.id;
-};
-
-const getLinked = extension => {
-  if (extension === null || typeof extension !== 'object') {
-    return false;
-  }
-  if ('linked' in extension && extension.linked === true) {
-    return true;
-  }
-  return 'symlink' in extension && typeof extension.symlink === 'string' && extension.symlink.length > 0;
-};
-
-const getName = extension => {
-  if (extension === null || typeof extension !== 'object') {
-    return 'n/a';
-  }
-  if ('name' in extension && typeof extension.name === 'string' && extension.name) {
-    return extension.name;
-  }
-  if ('id' in extension && typeof extension.id === 'string' && extension.id) {
-    return extension.id;
-  }
-  return 'n/a';
+const getVisibleItem = (item, setSize, itemHeight, minLineY, relative, i, focusedIndex) => {
+  // TODO use normal parameters
+  const {
+    builtin,
+    description,
+    disabled,
+    downloadCount,
+    icon,
+    id,
+    linked,
+    name,
+    publisher,
+    rating,
+    status
+  } = item;
+  return {
+    builtin,
+    description,
+    disabled,
+    downloadCount,
+    focused: i === focusedIndex,
+    icon,
+    id,
+    index: i,
+    linked,
+    name,
+    posInSet: i + 1,
+    publisher,
+    rating,
+    setSize,
+    status,
+    top: (i - minLineY) * itemHeight - relative
+  };
 };
 
-const RE_PUBLISHER = /^[a-z\d-]+/;
-const getPublisher = extension => {
-  if (extension === null || typeof extension !== 'object' || !('id' in extension) || typeof extension.id !== 'string') {
-    return 'n/a';
-  }
-  const match = extension.id.match(RE_PUBLISHER);
-  if (!match) {
-    return 'n/a';
+const getVisible = state => {
+  const {
+    deltaY,
+    focusedIndex,
+    itemHeight,
+    items,
+    maxLineY,
+    minLineY
+  } = state;
+  const setSize = items.length;
+  const visible = [];
+  const relative = deltaY % itemHeight;
+  for (let i = minLineY; i < maxLineY; i++) {
+    const item = items[i];
+    visible.push(getVisibleItem(item, setSize, itemHeight, minLineY, relative, i, focusedIndex));
   }
-  return match[0];
+  return visible;
 };
 
-const getRatingValue = extension => {
-  if (extension === null || typeof extension !== 'object') {
-    return undefined;
-  }
-  const marketplace = 'marketplace' in extension && extension.marketplace !== null && typeof extension.marketplace === 'object' ? extension.marketplace : {};
-  const packageJson = 'packageJSON' in extension && extension.packageJSON !== null && typeof extension.packageJSON === 'object' ? extension.packageJSON : {};
-  return ('rating' in extension ? extension.rating : undefined) ?? ('averageRating' in extension ? extension.averageRating : undefined) ?? ('rating' in marketplace ? marketplace.rating : undefined) ?? ('averageRating' in marketplace ? marketplace.averageRating : undefined) ?? ('rating' in packageJson ? packageJson.rating : undefined) ?? ('averageRating' in packageJson ? packageJson.averageRating : undefined);
+const contentNode = {
+  childCount: 2,
+  className: mergeClassNames(Viewlet, List$1),
+  type: Div
 };
-const getRating = extension => {
-  const rating = getRatingValue(extension);
-  if (typeof rating !== 'number') {
-    return 'n/a';
-  }
-  return rating.toFixed(1);
+const extensionsNode = {
+  ariaBusy: false,
+  ariaLive: 'polite',
+  childCount: 2,
+  className: mergeClassNames(Viewlet, Extensions$1),
+  role: None$3,
+  type: Div
 };
-
-const getSize = extension => {
-  if (extension === null || typeof extension !== 'object' || !('size' in extension) || extension.size === 0 || typeof extension.size !== 'number') {
-    return 0;
+const getContentVirtualDom = (visibleExtensions, message, scrollBarHeight, scrollBarY, focusOutline) => {
+  if (message) {
+    return getNoExtensionsFoundVirtualDom(message);
   }
-  return extension.size;
+  return [contentNode, ...getExtensionsVirtualDom(visibleExtensions, focusOutline), ...getScrollBarVirtualDom(scrollBarHeight)];
 };
-
-const getStatus = extension => {
-  if (extension === null || typeof extension !== 'object' || !('status' in extension)) {
-    return undefined;
-  }
-  return typeof extension.status === 'string' ? extension.status : undefined;
+const getExtensionsViewVirtualDom = state => {
+  const visibleExtensions = getVisible(state);
+  const {
+    completionFocusedIndex,
+    completionItems,
+    focus,
+    focusedIndex,
+    inputActions,
+    message,
+    placeholder,
+    scrollBarHeight,
+    scrollBarY,
+    suggestOpen
+  } = state;
+  const focusOutline = focusedIndex === -1 && focus === List$2;
+  return [extensionsNode, ...getExtensionHeaderVirtualDom(placeholder, inputActions, completionItems, completionFocusedIndex, suggestOpen), ...getContentVirtualDom(visibleExtensions, message, scrollBarHeight, scrollBarY, focusOutline)];
 };
 
-const getUpdatedDate = extension => {
-  if (extension === null || typeof extension !== 'object' || !('updatedDate' in extension) || !extension.updatedDate || typeof extension.updatedDate !== 'number') {
-    return 0;
+const renderItems2 = newState => {
+  const {
+    initial,
+    uid
+  } = newState;
+  if (initial) {
+    return [SetDom2, uid, []];
   }
-  return extension.updatedDate;
+  const dom = getExtensionsViewVirtualDom(newState);
+  return [SetDom2, uid, dom];
 };
 
-const normalizeExtension = (extension, platform, assetDir) => {
-  return {
-    builtin: getBuiltin(extension),
-    categories: getCategories(extension),
-    description: getDescription(extension),
-    disabled: getDisabled(extension),
-    downloadCount: getDownloadCount(extension),
-    icon: getIcon(extension, platform, assetDir),
-    id: getId(extension),
-    linked: getLinked(extension),
-    name: getName(extension),
-    publisher: getPublisher(extension),
-    rating: getRating(extension),
-    size: getSize(extension),
-    status: getStatus(extension),
-    updatedDate: getUpdatedDate(extension),
-    uri: ''
-  };
+const getComponentDom = uid => {
+  const state = getComponentState(uid);
+  return renderItems2(state)[2];
 };
 
-const normalizeExtensions = (extensions, platform, assetDir) => {
-  return Array.from(extensions, extension => normalizeExtension(extension, platform, assetDir));
-};
+const Tab = 2;
+const Enter = 3;
+const Escape = 8;
+const Space = 9;
+const PageUp = 10;
+const PageDown = 11;
+const End = 255;
+const Home = 12;
+const UpArrow = 14;
+const DownArrow = 16;
 
-const handleExtensionsChanged = async state => {
-  const {
-    assetDir,
-    platform
-  } = state;
-  const allExtensions = await getAllExtensions(assetDir, platform);
-  const normalized = normalizeExtensions(allExtensions, platform, assetDir);
-  return handleChange({
-    ...state,
-    allExtensions: normalized
-  }, {});
-};
+const CtrlCmd = 1 << 11 >>> 0;
 
-const handleFocus = async state => {
-  return {
-    ...state,
-    focus: List$2
-  };
-};
+const FocusExtensions = 15;
+const FocusExtensionsInput = 7000;
 
-const handleHeaderContextMenu = async state => {
-  return state;
-};
-
-const handleInputFocus = state => {
-  return {
-    ...state,
-    focus: Input
-  };
-};
-
-const handleInstall = async (state, id) => {
-  await installExtension(id);
-  return setExtensionStatus(state, id, Enabled);
-};
-
-const state = {
-  connected: false
-};
-const isConnected = () => {
-  const {
-    connected
-  } = state;
-  return connected;
-};
-const invoke = (method, ...params) => {
-  return invoke$2(method, ...params);
-};
-const set = rpc => {
-  set$3(rpc);
-  state.connected = true;
-};
-
-const handleMessagePort = async (port, viewletCommandMap, setAsRendererProcess = true) => {
-  const executeViewletCommand = async (uid, command, ...args) => {
-    const fn = viewletCommandMap[`SearchExtensions.${command}`];
-    if (typeof fn !== 'function') {
-      throw new TypeError(`Viewlet command not found: ${command}`);
-    }
-    await fn(uid, ...args);
-    await invoke$1('Viewlet.requestRender', uid);
-  };
-  const rpc = await create$7({
-    commandMap: {
-      'Viewlet.executeViewletCommand': executeViewletCommand
-    },
-    messagePort: port
-  });
-  if (setAsRendererProcess) {
-    set(rpc);
-  }
-};
-
-const handleScrollBarCaptureLost = state => {
-  return {
-    ...state,
-    scrollBarActive: false
-  };
-};
-
-const getNewDeltaPercent = (height, scrollBarHeight, relativeY) => {
-  const halfScrollBarHeight = scrollBarHeight / 2;
-  if (relativeY <= halfScrollBarHeight) {
-    // clicked at top
-    return {
-      handleOffset: relativeY,
-      percent: 0
-    };
-  }
-  if (relativeY <= height - halfScrollBarHeight) {
-    // clicked in middle
-    return {
-      handleOffset: halfScrollBarHeight,
-      percent: (relativeY - halfScrollBarHeight) / (height - scrollBarHeight)
-    };
-  }
-  // clicked at bottom
-  return {
-    handleOffset: scrollBarHeight - height + relativeY,
-    percent: 1
-  };
-};
-
-const clamp = (num, min, max) => {
-  number(num);
-  number(min);
-  number(max);
-  return Math.min(Math.max(num, min), max);
+const getKeyBindings = () => {
+  return [{
+    command: 'Extensions.closeSuggest',
+    key: Escape,
+    when: FocusExtensionsInput
+  }, {
+    command: 'Extensions.acceptCompletion',
+    key: Enter,
+    when: FocusExtensionsInput
+  }, {
+    command: 'Extensions.acceptCompletion',
+    key: Tab,
+    when: FocusExtensionsInput
+  }, {
+    command: 'Extensions.selectPreviousCompletion',
+    key: UpArrow,
+    when: FocusExtensionsInput
+  }, {
+    command: 'Extensions.selectNextCompletion',
+    key: DownArrow,
+    when: FocusExtensionsInput
+  }, {
+    command: 'Extensions.openSuggest',
+    key: CtrlCmd | Space,
+    when: FocusExtensionsInput
+  }, {
+    command: 'Extensions.focusFirst',
+    key: Home,
+    when: FocusExtensions
+  }, {
+    command: 'Extensions.focusLast',
+    key: End,
+    when: FocusExtensions
+  }, {
+    command: 'Extensions.focusPreviousPage',
+    key: PageUp,
+    when: FocusExtensions
+  }, {
+    command: 'Extensions.focusNextPage',
+    key: PageDown,
+    when: FocusExtensions
+  }, {
+    command: 'Extensions.focusPrevious',
+    key: UpArrow,
+    when: FocusExtensions
+  }, {
+    command: 'Extensions.focusNext',
+    key: DownArrow,
+    when: FocusExtensions
+  }, {
+    command: 'Extensions.handleClickCurrentButKeepFocus',
+    key: Space,
+    when: FocusExtensions
+  }, {
+    command: 'Extensions.handleClickCurrent',
+    key: Enter,
+    when: FocusExtensions
+  }, {
+    command: 'Extensions.toggleSuggest',
+    key: CtrlCmd | Space,
+    when: FocusExtensions
+  }, {
+    command: 'Extensions.scrollDown',
+    key: CtrlCmd | DownArrow,
+    when: FocusExtensions
+  }];
 };
 
-const setDeltaY = (state, value) => {
-  object(state);
-  number(value);
-  const {
-    deltaY,
-    finalDeltaY,
-    headerHeight,
-    height,
-    itemHeight,
-    items,
-    minimumSliderSize
-  } = state;
-  const listHeight = height - headerHeight;
-  const newDeltaY = clamp(value, 0, finalDeltaY);
-  if (deltaY === newDeltaY) {
-    return state;
-  }
-  // TODO when it only moves by one px, extensions don't need to be rerendered, only negative margin
-  const minLineY = Math.floor(newDeltaY / itemHeight);
-  const total = items.length;
-  const maxLineY = Math.min(minLineY + getNumberOfVisibleItems$1(listHeight, itemHeight), total);
-  const contentHeight = total * itemHeight;
-  const scrollBarHeight = getScrollBarSize(listHeight, contentHeight, minimumSliderSize);
-  const scrollBarY = getScrollBarY$1(newDeltaY, finalDeltaY, height - headerHeight, scrollBarHeight);
-  return {
-    ...state,
-    deltaY: newDeltaY,
-    maxLineY,
-    minLineY,
-    scrollBarY
-  };
-};
+const Separator = 1;
+const None = 0;
+const SubMenu = 4;
+const Disabled = 5;
 
-const handleScrollBarClick = (state, eventY) => {
-  // TODO move this to list
-  const {
-    deltaY,
-    finalDeltaY,
-    headerHeight,
-    height,
-    scrollBarHeight,
-    y
-  } = state;
-  const contentHeight = height - headerHeight;
-  const relativeY = eventY - y - headerHeight;
-  const currentScrollBarY = getScrollBarY$1(deltaY, finalDeltaY, contentHeight, scrollBarHeight);
-  const diff = relativeY - currentScrollBarY;
-  if (diff >= 0 && diff < scrollBarHeight) {
+const nonEnableableStatuses = [Installing, NotInstalled, Uninstalling];
+const getEnablementFlags = (disabled, status) => {
+  if (status && nonEnableableStatuses.includes(status)) {
     return {
-      ...state,
-      handleOffset: diff,
-      scrollBarActive: true
+      disable: Disabled,
+      enable: Disabled
     };
   }
-  const {
-    handleOffset,
-    percent
-  } = getNewDeltaPercent(contentHeight, scrollBarHeight, relativeY);
-  const newDeltaY = percent * finalDeltaY;
+  const isDisabled = status === Disabled$1 || status === undefined && disabled;
   return {
-    ...setDeltaY(state, newDeltaY),
-    handleOffset,
-    scrollBarActive: true
+    disable: isDisabled ? Disabled : None,
+    enable: isDisabled ? None : Disabled
   };
 };
-
-const getNewPercent = (contentHeight, scrollBarHeight, relativeY) => {
-  if (relativeY <= contentHeight - scrollBarHeight / 2) {
-    // clicked in middle
-    return relativeY / (contentHeight - scrollBarHeight);
-  }
-  // clicked at bottom
-  return 1;
-};
-const handleScrollBarMove = (state, eventY) => {
-  const {
-    finalDeltaY,
-    handleOffset,
-    headerHeight,
-    height,
-    scrollBarActive,
-    scrollBarHeight,
-    y
-  } = state;
-  if (!scrollBarActive) {
-    return state;
-  }
-  const relativeY = eventY - y - headerHeight - handleOffset;
-  const contentHeight = height - headerHeight;
-  const newPercent = getNewPercent(contentHeight, scrollBarHeight, relativeY);
-  const newDeltaY = newPercent * finalDeltaY;
-  return setDeltaY(state, newDeltaY);
+const getMenuEntriesList = (builtin, disabled = false, status) => {
+  const enablementFlags = getEnablementFlags(disabled, status);
+  return [{
+    command: 'Extensions.enable',
+    flags: enablementFlags.enable,
+    id: 'enable',
+    label: enable$2()
+  }, {
+    command: 'Extensions.enableWorkspace',
+    flags: enablementFlags.enable,
+    id: 'enableWorkspace',
+    label: enableWorkspace$1()
+  }, {
+    command: '',
+    flags: Separator,
+    id: 'separator1',
+    label: ''
+  }, {
+    command: 'Extensions.disable',
+    flags: enablementFlags.disable,
+    id: 'disable',
+    label: disable$2()
+  }, {
+    command: 'Extensions.disableWorkspace',
+    flags: enablementFlags.disable,
+    id: 'disableWorkspace',
+    label: disableWorkspace$1()
+  }, {
+    command: '',
+    flags: Separator,
+    id: 'separator2',
+    label: ''
+  }, {
+    command: 'Extensions.installAnotherVersion',
+    flags: Disabled,
+    id: 'installAnotherVersion',
+    label: installAnotherVersion$1()
+  }, {
+    command: 'Extensions.copyExtensionInfo',
+    flags: None,
+    id: 'copy',
+    label: copy()
+  }, {
+    command: 'Extensions.copyExtensionId',
+    flags: None,
+    id: 'copyExtensionId',
+    label: copyExtensionId$1()
+  }];
 };
 
-const handleSettingsButtonClick = async (state, index) => {
-  const {
-    deltaY,
-    headerHeight,
-    itemHeight,
-    items,
-    uid,
-    x,
-    y
-  } = state;
-  const actualIndex = index;
-  if (actualIndex < 0 || actualIndex >= items.length) {
-    return state;
-  }
-
-  // Calculate the position for the context menu
-  // The settings button is at the bottom right of the extension list item
-  const itemY = y + headerHeight + actualIndex * itemHeight - deltaY;
-  const menuX = x + 200; // Position near the right side of the extension item
-  const menuY = itemY + itemHeight - 10; // Position at the bottom of the extension item
-
-  await show2(uid, ManageExtension, menuX, menuY, {
-    builtin: items[actualIndex].builtin === true,
-    disabled: items[actualIndex].disabled === true,
-    menuId: ManageExtension,
-    status: items[actualIndex].status
-  });
-  return state;
+const getMenuEntriesFilter = () => {
+  return [{
+    command: 'Extensions.filterByFeatured',
+    flags: None,
+    id: 'filterByFeatured',
+    label: featured()
+  }, {
+    command: 'Extensions.filterByMcpServers',
+    flags: None,
+    id: 'filterByMcpServers',
+    label: mcpServers()
+  }, {
+    command: 'Extensions.filterByMostPopular',
+    flags: None,
+    id: 'filterByMostPopular',
+    label: mostPopular()
+  }, {
+    command: 'Extensions.filterByRecentlyPublished',
+    flags: None,
+    id: 'filterByRecentlyPublished',
+    label: recentlyPublished()
+  }, {
+    command: 'Extensions.filterByRecommended',
+    flags: None,
+    id: 'filterByRecommended',
+    label: recommended()
+  }, {
+    command: '',
+    flags: Separator,
+    id: 'separator1',
+    label: ''
+  }, {
+    command: 'SearchExtensions.filterByCategory',
+    flags: SubMenu,
+    id: 'filterByCategory',
+    label: category()
+  }, {
+    command: 'Extensions.filterByInstalled',
+    flags: None,
+    id: 'filterByInstalled',
+    label: installed()
+  }, {
+    command: 'Extensions.filterByUpdates',
+    flags: None,
+    id: 'filterByUpdates',
+    label: updates()
+  }, {
+    command: 'Extensions.filterByBuiltin',
+    flags: None,
+    id: 'filterByBuiltin',
+    label: builtIn()
+  }, {
+    command: 'Extensions.filterByLinked',
+    flags: None,
+    id: 'filterByLinked',
+    label: linked()
+  }, {
+    command: 'Extensions.filterByEnabled',
+    flags: None,
+    id: 'filterByEnabled',
+    label: enabled()
+  }, {
+    command: 'Extensions.filterByDisabled',
+    flags: None,
+    id: 'filterByDisabled',
+    label: disabled()
+  }, {
+    command: 'Extensions.filterByWorkspaceUnsupported',
+    flags: None,
+    id: 'filterByWorkspaceUnsupported',
+    label: workspaceUnsupported()
+  }, {
+    command: '',
+    flags: Separator,
+    id: 'separator2',
+    label: ''
+  }, {
+    command: 'SearchExtensions.filterBySortBy',
+    flags: SubMenu,
+    id: 'filterBySortBy',
+    label: sortBy()
+  }];
 };
 
-const handleUninstall = async (state, id) => {
-  try {
-    await uninstall$2(id);
-    return setExtensionStatus(state, id, NotInstalled);
-  } catch (error) {
-    await showErrorDialog(error);
-    return state;
+const getMenuEntries2 = (state, props) => {
+  const {
+    menuId
+  } = props;
+  switch (menuId) {
+    case ExtensionSearchFilter:
+      return getMenuEntriesFilter();
+    default:
+      return getMenuEntriesList(props.builtin, props.disabled, props.status);
   }
 };
 
-const handleWheel = (state, deltaMode, deltaY) => {
-  number(deltaMode);
-  number(deltaY);
-  return setDeltaY(state, state.deltaY + deltaY * state.scrollSensitivity);
+const getMenuIds = () => {
+  return [ManageExtension, ExtensionSearchFilter];
 };
 
-const createExtensionManagementWorkerRpc = async () => {
-  try {
-    const rpc = await create$6({
-      commandMap: {},
-      send: port => sendMessagePortToExtensionManagementWorker(port, 0)
-    });
-    return rpc;
-  } catch (error) {
-    throw new VError(error, `Failed to create extension management rpc`);
-  }
+const handleBlur = state => {
+  return {
+    ...state,
+    focus: None$2,
+    suggestOpen: false
+  };
 };
 
-const initializeExtensionManagementWorker = async () => {
-  try {
-    const rpc = await createExtensionManagementWorkerRpc();
-    set$4(rpc);
-  } catch {
-    // ignore
-  }
+const getExtensionDetailUri = extensionId => {
+  return `extension-detail://${extensionId}`;
 };
 
-const initialize = async () => {
-  await initializeExtensionManagementWorker();
+const openUri = async uri => {
+  return openUri$1(uri);
 };
 
-const installAnotherVersion = async state => {
-  await invoke$4('ConfirmPrompt.prompt', 'not implemented', undefined);
-  return state;
+const selectIndex = (state, index) => {
+  return {
+    ...state,
+    focusedIndex: index
+  };
 };
 
-const Small = 1;
-const Normal = 2;
-const Large = 3;
-
-const getViewletSize = width => {
-  if (width < 180) {
-    return Small;
-  }
-  if (width < 768) {
-    return Normal;
+const handleClick = async (state, index) => {
+  const {
+    items,
+    minLineY
+  } = state;
+  const actualIndex = index + minLineY;
+  if (actualIndex < 0 || actualIndex >= items.length) {
+    return {
+      ...state,
+      focus: List$2,
+      focusedIndex: -1
+    };
   }
-  return Large;
+  const extension = items[actualIndex];
+  const uri = getExtensionDetailUri(extension.id);
+  await openUri(uri);
+  const partialNewState = selectIndex(state, actualIndex);
+  const newState = {
+    ...partialNewState,
+    focus: List$2
+  };
+  return newState;
 };
 
-const getIsFirefox = () => {
-  const globalWithNavigator = globalThis;
-  return globalWithNavigator.navigator?.userAgent.toLowerCase().includes('firefox') ?? false;
+const getListIndex = (eventX, eventY, x, y, deltaY, itemHeight, headerHeight) => {
+  const relativeDeltaY = deltaY % itemHeight;
+  const relativeY = eventY - y - headerHeight + relativeDeltaY;
+  const index = Math.floor(relativeY / itemHeight);
+  return index;
 };
 
-const getSavedValue = savedState => {
-  if (savedState && typeof savedState === 'object' && 'searchValue' in savedState && typeof savedState.searchValue === 'string') {
-    return savedState.searchValue;
+const handleCompletionPointerDown = (state, label) => {
+  if (state.completionItems.every(item => item.label !== label)) {
+    return Promise.resolve(state);
   }
-  return '';
+  return acceptCompletion(state, label);
 };
-const getSavedDeltaY = savedState => {
-  if (savedState && typeof savedState === 'object' && 'deltaY' in savedState && typeof savedState.deltaY === 'number' && !Number.isNaN(savedState.deltaY)) {
-    return savedState.deltaY;
+
+const handleClickAt = async (state, button, eventX, eventY, name = '') => {
+  if (name.startsWith('@')) {
+    return handleCompletionPointerDown(state, name);
   }
-  return 0;
+  if (name) {
+    return state;
+  }
+  if (button !== LeftClick) {
+    return state;
+  }
+  const {
+    deltaY,
+    headerHeight,
+    itemHeight,
+    x,
+    y
+  } = state;
+  const index = getListIndex(eventX, eventY, x, y, deltaY, itemHeight, headerHeight);
+  return handleClick(state, index);
 };
 
-const restoreState = savedState => {
-  const searchValue = getSavedValue(savedState);
-  const savedDeltaY = getSavedDeltaY(savedState);
-  return {
-    deltaY: savedDeltaY,
-    searchValue
-  };
+const handleClickCurrent = state => {
+  const {
+    focusedIndex
+  } = state;
+  return handleClick(state, focusedIndex);
 };
 
-const loadContentWithContext = async (context, savedState) => {
+const handleClickCurrentButKeepFocus = state => {
   const {
-    uid
-  } = context.getState();
-  const loadToken = getToken(uid);
-  try {
-    const initialState = context.getState();
-    const {
-      assetDir,
-      platform,
-      width
-    } = initialState;
-    const {
-      deltaY,
-      searchValue: restoredSearchValue
-    } = restoreState(savedState);
-    const size = getViewletSize(width);
-    const scrollSensitivity = getIsFirefox() ? 2.5 : 1;
-    await context.updateState(state => {
-      if (!state.initial) {
-        return state;
-      }
-      return {
-        ...state,
-        deltaY,
-        initial: false,
-        inputSource: Script,
-        scrollSensitivity,
-        searchValue: restoredSearchValue,
-        size
-      };
-    });
-    const allExtensions = await getAllExtensions(assetDir, platform);
-    const normalized = normalizeExtensions(allExtensions, platform, assetDir);
-    await context.updateState(state => ({
-      ...state,
-      allExtensions: normalized
-    }));
-    await handleChangeWithContext(context, {}, false);
-  } finally {
-    finish(uid, loadToken);
-  }
+    focusedIndex
+  } = state;
+  return handleClick(state, focusedIndex);
 };
 
-const openSuggest = state => {
-  const completionItems = getCompletionItems(state.searchValue, state.cursorOffset);
-  if (completionItems.length === 0) {
-    return state;
-  }
-  return {
-    ...state,
-    completionFocusedIndex: 0,
-    completionItems,
-    suggestOpen: true
-  };
+const show2 = async (uid, menuId, x, y, args) => {
+  await showContextMenu2(uid, menuId, x, y, args);
 };
 
-const getCss = state => {
+const handleClickFilter = async state => {
+  const {
+    headerHeight,
+    uid,
+    width,
+    x,
+    y
+  } = state;
+  const menuX = x + width + 60;
+  const menuHeight = 370;
+  const menuY = y + headerHeight + menuHeight;
+  await show2(uid, ExtensionSearchFilter, menuX, menuY, {
+    menuId: ExtensionSearchFilter
+  });
+  return state;
+};
+
+const handleContextMenu = async (state, button, eventX, eventY) => {
+  // TODO use focused index when when context menu button is -1 (keyboard)
   const {
-    cursorOffset,
     deltaY,
     headerHeight,
     itemHeight,
-    scrollBarHeight,
-    scrollBarY,
-    width
+    items,
+    minLineY,
+    uid,
+    x,
+    y
   } = state;
-  const relative = -(deltaY % itemHeight);
-  const roundedScrollBarY = Math.round(scrollBarY);
-  const maximumCompletionLeft = Math.max(8, width - 168);
-  const completionLeft = Math.min(Math.round(8 + cursorOffset * 7.5), maximumCompletionLeft);
-  const completionTop = Math.max(0, headerHeight - 10);
-  return `.Extensions .ScrollBarThumb {
-  height: ${scrollBarHeight}px;
-  translate: 0 ${roundedScrollBarY}px;
-}
-
-
-/* TODO: avoid using negative margin. find a better way*/
-.ExtensionListItem:nth-child(1) {
-  margin-top: ${relative}px;
-}
+  const visibleIndex = getListIndex(eventX, eventY, x, y, deltaY, itemHeight, headerHeight);
+  const index = visibleIndex + minLineY;
+  if (index < 0 || index >= items.length) {
+    return state;
+  }
+  const item = items[index];
+  await show2(uid, ManageExtension, eventX, eventY, {
+    builtin: item.builtin === true,
+    disabled: item.disabled === true,
+    menuId: ManageExtension,
+    status: item.status
+  });
+  return {
+    ...state,
+    focusedIndex: index
+  };
+};
 
-.ExtensionListItem {
-  box-sizing: border-box;
-  position: relative !important;
-  flex-shrink: 0;
-}
+const handleDisableWorkspace = (state, id) => {
+  return state;
+};
 
-.ExtensionListItemLinkedIcon {
-  position: absolute;
-  top: 6px;
-  right: 6px;
-  width: 14px;
-  height: 14px;
-  color: var(--WorkbenchForeground, rgb(188, 190, 190));
-  opacity: 0.8;
-}
+const handleEnableWorkspace = (state, id) => {
+  return state;
+};
 
-.ExtensionListItemDisabled:not(.ExtensionActive) {
-  background: color-mix(in srgb, var(--SideBarBackground, rgb(30, 35, 36)) 95%, black);
-  color: var(--ExtensionDisabledForeground, color-mix(in srgb, var(--WorkbenchForeground) 70%, black));
-}
+const Web = 1;
+const Electron = 2;
+const Remote = 3;
 
-.Extensions .ListItems {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  overflow-y: hidden;
-}
+const getAllExtensions$1 = async (assetDir, platform) => {
+  try {
+    return await invoke$3('Extensions.getAllExtensions', assetDir, platform);
+  } catch (error) {
+    if (platform === Web) {
+      return [];
+    }
+    throw error;
+  }
+};
 
-.ExtensionHeader {
-  contain: layout style;
-  position: relative;
-  z-index: 1;
-}
+const getAllExtensions = (assetDir, platform) => {
+  return getAllExtensions$1(assetDir, platform);
+};
 
-.ExtensionListItemFooter {
-  justify-content: flex-end;
-  padding-right: 2px;
-}
+const getBuiltin = extension => {
+  if (extension === null || typeof extension !== 'object') {
+    return false;
+  }
+  const {
+    builtin,
+    id,
+    isBuiltin
+  } = extension;
+  return isBuiltin === true || builtin === true || typeof id === 'string' && id.startsWith('builtin.');
+};
 
-.ExtensionListItemAuthorName {
-  flex: 1;
-}
+const isString = item => {
+  return typeof item === 'string';
+};
 
-.ExtensionActions {
-  display: flex;
-  gap: 6px;
-}
+const getCategories = extension => {
+  if (extension === null || typeof extension !== 'object' || !('categories' in extension) || !Array.isArray(extension.categories)) {
+    return [];
+  }
+  return extension.categories.filter(isString);
+};
 
-.ExtensionActionButton {
-  padding: 0 5px;
-}
+const getDescription = extension => {
+  if (extension === null || typeof extension !== 'object' || !('description' in extension) || typeof extension.description !== 'string' || !extension.description) {
+    return 'n/a';
+  }
+  return extension.description;
+};
 
-.ExtensionSearchCompletionWidget {
-  position: absolute;
-  left: ${completionLeft}px;
-  top: ${completionTop}px;
-  width: min(320px, calc(100% - ${completionLeft + 8}px));
-  max-height: 240px;
-  overflow-y: auto;
-  z-index: 10;
-  box-sizing: border-box;
-  border: 1px solid var(--CompletionListBorder, #95a29d);
-  background: var(--CompletionListBackground, #282e2f);
-  color: var(--CompletionListForeground, white);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.36);
-  font-size: 13px;
-  line-height: 20px;
-  user-select: none;
-}
+const getDisabled = extension => {
+  return extension !== null && typeof extension === 'object' && 'disabled' in extension && extension.disabled === true;
+};
 
-.ExtensionSearchCompletionItem {
-  display: block;
-  width: 100%;
-  min-height: 20px;
-  padding: 0 6px;
-  border: 0;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  line-height: inherit;
-  text-align: left;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  cursor: pointer;
-}
+const getDownloadCountValue = extension => {
+  if (extension === null || typeof extension !== 'object') {
+    return undefined;
+  }
+  const marketplace = 'marketplace' in extension && extension.marketplace !== null && typeof extension.marketplace === 'object' ? extension.marketplace : {};
+  const packageJson = 'packageJSON' in extension && extension.packageJSON !== null && typeof extension.packageJSON === 'object' ? extension.packageJSON : {};
+  return ('downloadCount' in extension ? extension.downloadCount : undefined) ?? ('downloads' in extension ? extension.downloads : undefined) ?? ('downloadCount' in marketplace ? marketplace.downloadCount : undefined) ?? ('downloads' in marketplace ? marketplace.downloads : undefined) ?? ('downloadCount' in packageJson ? packageJson.downloadCount : undefined) ?? ('downloads' in packageJson ? packageJson.downloads : undefined);
+};
+const getDownloadCount = extension => {
+  const downloadCount = getDownloadCountValue(extension);
+  if (typeof downloadCount !== 'number') {
+    return 'n/a';
+  }
+  return downloadCount.toLocaleString();
+};
 
-.ExtensionSearchCompletionItem:hover {
-  background: var(--CompletionListItemHoverBackground, rgba(64, 92, 80, 0.2));
-}
+const getRemoteUrl = (extension, platform, assetDir) => {
+  if (extension === null || typeof extension !== 'object') {
+    return '';
+  }
+  const builtin = 'builtin' in extension && extension.builtin === true;
+  const icon = 'icon' in extension && typeof extension.icon === 'string' ? extension.icon : '';
+  const id = 'id' in extension && typeof extension.id === 'string' ? extension.id : '';
+  const path = 'path' in extension && typeof extension.path === 'string' ? extension.path : '';
+  if (platform === Remote || platform === Electron) {
+    if (builtin) {
+      return `${assetDir}/extensions/${id}/${icon}`;
+    }
+    return `/remote/${path}/${icon}`; // TODO support windows paths
+  }
+  if (platform === Web) {
+    return `${path}/${icon}`;
+  }
+  return '';
+};
 
-.ExtensionSearchCompletionItemFocused {
-  background: var(--CompletionListItemActiveBackground, #405c50);
-  color: var(--CompletionListItemActiveForeground);
-}
+const getExtensionDefaultIcon = assetDir => {
+  return `${assetDir}/icons/extensionDefaultIcon.png`;
+};
+const getExtensionLanguageBasicsIcon = assetDir => {
+  return `${assetDir}/icons/language-icon.svg`;
+};
+const getExtensionThemeIcon = assetDir => {
+  return `${assetDir}/icons/theme-icon.png`;
+};
 
-.ExtensionSearchCompletionHighlight {
-  color: var(--CompletionHighlightForeground, #e1b974);
-  font-weight: 700;
-}
-`;
+const isLanguageBasicsExtension = extension => {
+  return 'name' in extension && typeof extension.name === 'string' && extension.name.startsWith('Language Basics');
+};
+const isThemeExtension = extension => {
+  return 'name' in extension && typeof extension.name === 'string' && extension.name.endsWith(' Theme');
+};
+const getExtensionIcon = (extension, platform, assetDir) => {
+  if (extension === null || typeof extension !== 'object') {
+    return getExtensionDefaultIcon(assetDir);
+  }
+  const hasIcon = 'icon' in extension && typeof extension.icon === 'string' && extension.icon;
+  const hasPath = 'path' in extension && typeof extension.path === 'string' && extension.path;
+  if (!hasPath || !hasIcon) {
+    if (isLanguageBasicsExtension(extension)) {
+      return getExtensionLanguageBasicsIcon(assetDir);
+    }
+    if (isThemeExtension(extension)) {
+      return getExtensionThemeIcon(assetDir);
+    }
+    return getExtensionDefaultIcon(assetDir);
+  }
+  return getRemoteUrl(extension, platform, assetDir);
 };
 
-const renderCss = newState => {
-  const {
-    uid
-  } = newState;
-  const css = getCss(newState);
-  return [SetCss, uid, css];
+const getIcon = (extension, platform, assetDir) => {
+  return getExtensionIcon(extension, platform, assetDir);
 };
 
-const Extensions$1 = 'extensions';
+const getId = extension => {
+  if (extension === null || typeof extension !== 'object' || !('id' in extension) || typeof extension.id !== 'string' || !extension.id) {
+    return 'n/a';
+  }
+  return extension.id;
+};
 
-const getSelector = focus => {
-  switch (focus) {
-    case Input:
-      return `[name="${Extensions$1}"]`;
-    case List$2:
-      return '.ListItems';
-    default:
-      return '';
+const getLinked = extension => {
+  if (extension === null || typeof extension !== 'object') {
+    return false;
+  }
+  if ('linked' in extension && extension.linked === true) {
+    return true;
   }
+  return 'symlink' in extension && typeof extension.symlink === 'string' && extension.symlink.length > 0;
 };
-const renderFocus = newState => {
-  const {
-    focus,
-    uid
-  } = newState;
-  if (!focus) {
-    return [];
+
+const getName = extension => {
+  if (extension === null || typeof extension !== 'object') {
+    return 'n/a';
+  }
+  if ('name' in extension && typeof extension.name === 'string' && extension.name) {
+    return extension.name;
   }
-  const selector = getSelector(focus);
-  return [FocusSelector, uid, selector];
+  if ('id' in extension && typeof extension.id === 'string' && extension.id) {
+    return extension.id;
+  }
+  return 'n/a';
 };
 
-const renderFocusContext = newState => {
-  const {
-    uid
-  } = newState;
-  if (newState.focus === Input) {
-    return ['Viewlet.setFocusContext', uid, FocusExtensionsInput];
+const RE_PUBLISHER = /^[a-z\d-]+/;
+const getPublisher = extension => {
+  if (extension === null || typeof extension !== 'object' || !('id' in extension) || typeof extension.id !== 'string') {
+    return 'n/a';
   }
-  if (newState.focus === List$2) {
-    return ['Viewlet.setFocusContext', uid, FocusExtensions];
+  const match = extension.id.match(RE_PUBLISHER);
+  if (!match) {
+    return 'n/a';
   }
-  return [];
+  return match[0];
 };
 
-const ComboBox = 'combobox';
-const Image = 'img';
-const List$1 = 'list';
-const ListBox = 'listbox';
-const ListItem = 'listitem';
-const None = 'none';
-const Option = 'option';
-const ToolBar = 'toolbar';
-
-const Actions = 'Actions';
-const ExtensionActions = 'ExtensionActions';
-const ExtensionActionButton = 'ExtensionActionButton';
-const ExtensionActive = 'ExtensionActive';
-const ExtensionHeader = 'ExtensionHeader';
-const ExtensionListItem = 'ExtensionListItem';
-const ExtensionListItemActionInstall = 'ExtensionListItemActionInstall';
-const ExtensionListItemAuthorName = 'ExtensionListItemAuthorName';
-const ExtensionListItemDescription = 'ExtensionListItemDescription';
-const ExtensionListItemDetail = 'ExtensionListItemDetail';
-const ExtensionListItemDisabled = 'ExtensionListItemDisabled';
-const ExtensionListItemDownloadCount = 'ExtensionListItemDownloadCount';
-const ExtensionListItemFooter = 'ExtensionListItemFooter';
-const ExtensionListItemIcon = 'ExtensionListItemIcon';
-const ExtensionListItemLinkedIcon = 'ExtensionListItemLinkedIcon';
-const ExtensionListItemMetadata = 'ExtensionListItemMetadata';
-const ExtensionListItemName = 'ExtensionListItemName';
-const ExtensionListItemRating = 'ExtensionListItemRating';
-const ExtensionListItemStatistic = 'ExtensionListItemStatistic';
-const ExtensionSearchCompletionHighlight = 'ExtensionSearchCompletionHighlight';
-const ExtensionSearchCompletionItem = 'ExtensionSearchCompletionItem';
-const ExtensionSearchCompletionItemFocused = 'ExtensionSearchCompletionItemFocused';
-const ExtensionSearchCompletionWidget = 'ExtensionSearchCompletionWidget';
-const Extensions = 'Extensions';
-const FocusOutline = 'FocusOutline';
-const IconButton = 'IconButton';
-const List = 'List';
-const ListItems = 'ListItems';
-const MaskIcon = 'MaskIcon';
-const MultilineInputBox = 'MultilineInputBox';
-const NoExtensionsFoundMessage = 'NoExtensionsFoundMessage';
-const ScrollBar = 'ScrollBar';
-const ScrollBarSmall = 'ScrollBarSmall';
-const ScrollBarThumb = 'ScrollBarThumb';
-const ScrollBarThumbActive = 'ScrollBarThumbActive';
-const SearchField = 'SearchField';
-const SearchFieldButton = 'SearchFieldButton';
-const SearchFieldButtonDisabled = 'SearchFieldButtonDisabled';
-const SearchFieldButtons = 'SearchFieldButtons';
-const SearchFieldContainer = 'SearchFieldContainer';
-const Viewlet = 'Viewlet';
-
-const getCompletionLabelVirtualDom = (label, highlights) => {
-  const dom = [];
-  let position = 0;
-  for (let i = 0; i < highlights.length; i += 2) {
-    const start = highlights[i];
-    const end = highlights[i + 1];
-    if (position < start) {
-      dom.push(text(label.slice(position, start)));
-    }
-    dom.push({
-      childCount: 1,
-      className: ExtensionSearchCompletionHighlight,
-      name: label,
-      type: Span
-    }, text(label.slice(start, end)));
-    position = end;
+const getRatingValue = extension => {
+  if (extension === null || typeof extension !== 'object') {
+    return undefined;
   }
-  if (position < label.length) {
-    dom.push(text(label.slice(position)));
+  const marketplace = 'marketplace' in extension && extension.marketplace !== null && typeof extension.marketplace === 'object' ? extension.marketplace : {};
+  const packageJson = 'packageJSON' in extension && extension.packageJSON !== null && typeof extension.packageJSON === 'object' ? extension.packageJSON : {};
+  return ('rating' in extension ? extension.rating : undefined) ?? ('averageRating' in extension ? extension.averageRating : undefined) ?? ('rating' in marketplace ? marketplace.rating : undefined) ?? ('averageRating' in marketplace ? marketplace.averageRating : undefined) ?? ('rating' in packageJson ? packageJson.rating : undefined) ?? ('averageRating' in packageJson ? packageJson.averageRating : undefined);
+};
+const getRating = extension => {
+  const rating = getRatingValue(extension);
+  if (typeof rating !== 'number') {
+    return 'n/a';
   }
-  return dom;
+  return rating.toFixed(1);
 };
 
-const getRootNodeCount = nodes => {
-  let count = 0;
-  const remainingChildCounts = [];
-  for (const node of nodes) {
-    while (remainingChildCounts.length > 0 && remainingChildCounts.at(-1) === 0) {
-      remainingChildCounts.pop();
-    }
-    if (remainingChildCounts.length === 0) {
-      count++;
-    } else {
-      const lastIndex = remainingChildCounts.length - 1;
-      remainingChildCounts[lastIndex]--;
-    }
-    remainingChildCounts.push(node.childCount);
+const getSize = extension => {
+  if (extension === null || typeof extension !== 'object' || !('size' in extension) || extension.size === 0 || typeof extension.size !== 'number') {
+    return 0;
   }
-  return count;
+  return extension.size;
 };
-const getCompletionItemVirtualDom = (item, index, focusedIndex) => {
-  const labelDom = getCompletionLabelVirtualDom(item.label, item.highlights);
-  const focused = index === focusedIndex;
-  return [{
-    ariaSelected: focused,
-    childCount: getRootNodeCount(labelDom),
-    className: focused ? mergeClassNames(ExtensionSearchCompletionItem, ExtensionSearchCompletionItemFocused) : ExtensionSearchCompletionItem,
-    id: `ExtensionSearchCompletion-${index}`,
-    name: item.label,
-    onPointerDown: HandlePointerDown,
-    role: Option,
-    type: Button$2
-  }, ...labelDom];
+
+const getStatus = extension => {
+  if (extension === null || typeof extension !== 'object' || !('status' in extension)) {
+    return undefined;
+  }
+  return typeof extension.status === 'string' ? extension.status : undefined;
 };
 
-const getCompletionWidgetVirtualDom = (items, focusedIndex) => {
-  return [{
-    ariaLabel: 'Extension search completions',
-    childCount: items.length,
-    className: ExtensionSearchCompletionWidget,
-    id: 'ExtensionSearchCompletions',
-    role: ListBox,
-    type: Div
-  }, ...items.flatMap((item, index) => getCompletionItemVirtualDom(item, index, focusedIndex))];
+const getUpdatedDate = extension => {
+  if (extension === null || typeof extension !== 'object' || !('updatedDate' in extension) || !extension.updatedDate || typeof extension.updatedDate !== 'number') {
+    return 0;
+  }
+  return extension.updatedDate;
 };
 
-const Focusable = 0;
+const normalizeExtension = (extension, platform, assetDir) => {
+  return {
+    builtin: getBuiltin(extension),
+    categories: getCategories(extension),
+    description: getDescription(extension),
+    disabled: getDisabled(extension),
+    downloadCount: getDownloadCount(extension),
+    icon: getIcon(extension, platform, assetDir),
+    id: getId(extension),
+    linked: getLinked(extension),
+    name: getName(extension),
+    publisher: getPublisher(extension),
+    rating: getRating(extension),
+    size: getSize(extension),
+    status: getStatus(extension),
+    updatedDate: getUpdatedDate(extension),
+    uri: ''
+  };
+};
 
-const disabledClassName = mergeClassNames(SearchFieldButton, SearchFieldButtonDisabled);
-const getClassName = enabled => {
-  if (enabled) {
-    return SearchFieldButton;
-  }
-  return disabledClassName;
+const normalizeExtensions = (extensions, platform, assetDir) => {
+  return Array.from(extensions, extension => normalizeExtension(extension, platform, assetDir));
 };
-const getSearchFieldButtonVirtualDom = button => {
+
+const handleExtensionsChanged = async state => {
   const {
-    enabled,
-    icon,
-    onClick,
-    title
-  } = button;
-  return [{
-    childCount: 1,
-    className: getClassName(enabled),
-    onClick,
-    tabIndex: Focusable,
-    title,
-    type: Button$2
-  }, {
-    childCount: 0,
-    className: mergeClassNames(MaskIcon, icon),
-    type: Div
-  }];
+    assetDir,
+    platform
+  } = state;
+  const allExtensions = await getAllExtensions(assetDir, platform);
+  const normalized = normalizeExtensions(allExtensions, platform, assetDir);
+  return handleChange({
+    ...state,
+    allExtensions: normalized
+  }, {});
 };
 
-const searchFieldNode = {
-  childCount: 2,
-  className: SearchField,
-  role: None,
-  type: Div
+const handleFocus = async state => {
+  return {
+    ...state,
+    focus: List$2
+  };
 };
-const getSearchFieldVirtualDom = (name, placeholder, onInput, insideButtons, outsideButtons, onFocus = '', onBlur = '', inputProperties = {}) => {
-  // TODO avoid mutation
-  const dom = [searchFieldNode, {
-    autocapitalize: 'off',
-    autocomplete: 'off',
-    autocorrect: 'off',
-    childCount: 0,
-    className: MultilineInputBox,
-    inputType: 'search',
-    name,
-    ...(onBlur && {
-      onBlur
-    }),
-    onFocus,
-    onInput,
-    placeholder,
-    spellcheck: false,
-    type: Input$1,
-    ...inputProperties
-  }, {
-    childCount: insideButtons.length,
-    className: SearchFieldButtons,
-    type: Div
-  }, ...insideButtons.flatMap(getSearchFieldButtonVirtualDom)];
-  if (outsideButtons.length > 0) {
-    dom.unshift({
-      childCount: 1 + outsideButtons.length,
-      className: SearchFieldContainer,
-      role: None,
-      type: Div
-    });
-    dom.push(...outsideButtons.flatMap(getSearchFieldButtonVirtualDom));
-  }
-  return dom;
+
+const handleHeaderContextMenu = async state => {
+  return state;
 };
 
-const getCompletionVirtualDom = (completionItems, completionFocusedIndex, suggestOpen) => {
-  if (!suggestOpen) {
-    return [];
-  }
-  return getCompletionWidgetVirtualDom(completionItems, completionFocusedIndex);
-};
-const getExtensionHeaderVirtualDom = (placeholder, actions, completionItems = [], completionFocusedIndex = 0, suggestOpen = false) => {
-  const inputProperties = suggestOpen ? {
-    ariaActivedescendant: `ExtensionSearchCompletion-${completionFocusedIndex}`,
-    ariaAutoComplete: 'list',
-    ariaControls: 'ExtensionSearchCompletions',
-    ariaExpanded: true,
-    role: ComboBox
-  } : {
-    ariaAutoComplete: 'list',
-    ariaExpanded: false,
-    role: ComboBox
+const handleInputFocus = state => {
+  return {
+    ...state,
+    focus: Input
   };
-  const completionDom = getCompletionVirtualDom(completionItems, completionFocusedIndex, suggestOpen);
-  return [{
-    childCount: suggestOpen ? 2 : 1,
-    className: ExtensionHeader,
-    onContextMenu: HandleHeaderContextMenu,
-    type: Div
-  }, ...getSearchFieldVirtualDom(Extensions$1, placeholder, HandleExtensionsInput, actions, [], HandleInputFocus, HandleInputBlur, inputProperties), ...completionDom];
 };
 
-const renderHeader = newState => {
-  const actions = getInputActions(newState.searchValue.length > 0);
-  const dom = getExtensionHeaderVirtualDom(newState.placeholder, actions, newState.completionItems, newState.completionFocusedIndex, newState.suggestOpen);
-  return ['setHeaderDom', dom];
+const handleInstall = async (state, id) => {
+  await installExtension(id);
+  return setExtensionStatus(state, id, Enabled);
 };
 
-const Extension = 'Extension';
-
-const install = {
-  disabled: false,
-  label: install$1(),
-  onClick: HandleInstall
+const state = {
+  connected: false
 };
-const installing = {
-  disabled: true,
-  label: installing$1(),
-  onClick: HandleInstall
+const isConnected = () => {
+  const {
+    connected
+  } = state;
+  return connected;
 };
-const enable = {
-  disabled: false,
-  label: enable$2(),
-  onClick: HandleEnable
+const invoke = (method, ...params) => {
+  return invoke$2(method, ...params);
 };
-const disable = {
-  disabled: false,
-  label: disable$2(),
-  onClick: HandleDisable
+const set = rpc => {
+  set$3(rpc);
+  state.connected = true;
 };
-const uninstall = {
-  disabled: false,
-  label: uninstall$1(),
-  onClick: HandleUninstall
+
+const handleMessagePort = async (port, viewletCommandMap, setAsRendererProcess = true) => {
+  const executeViewletCommand = async (uid, command, ...args) => {
+    const fn = viewletCommandMap[`SearchExtensions.${command}`];
+    if (typeof fn !== 'function') {
+      throw new TypeError(`Viewlet command not found: ${command}`);
+    }
+    await fn(uid, ...args);
+    await invoke$1('Viewlet.requestRender', uid);
+  };
+  const rpc = await create$7({
+    commandMap: {
+      'Viewlet.executeViewletCommand': executeViewletCommand
+    },
+    messagePort: port
+  });
+  if (setAsRendererProcess) {
+    set(rpc);
+  }
 };
-const uninstalling = {
-  disabled: true,
-  label: uninstalling$1(),
-  onClick: HandleUninstall
+
+const handleScrollBarCaptureLost = state => {
+  return {
+    ...state,
+    scrollBarActive: false
+  };
 };
-const getExtensionActions = (builtin, disabled, status) => {
-  if (status === NotInstalled) {
-    return [install];
-  }
-  if (status === Installing) {
-    return [installing];
+
+const getNewDeltaPercent = (height, scrollBarHeight, relativeY) => {
+  const halfScrollBarHeight = scrollBarHeight / 2;
+  if (relativeY <= halfScrollBarHeight) {
+    // clicked at top
+    return {
+      handleOffset: relativeY,
+      percent: 0
+    };
   }
-  if (status === Uninstalling) {
-    return builtin ? [] : [uninstalling];
+  if (relativeY <= height - halfScrollBarHeight) {
+    // clicked in middle
+    return {
+      handleOffset: halfScrollBarHeight,
+      percent: (relativeY - halfScrollBarHeight) / (height - scrollBarHeight)
+    };
   }
-  const enableOrDisable = isExtensionDisabled(disabled, status) ? enable : disable;
-  return builtin ? [enableOrDisable] : [enableOrDisable, uninstall];
+  // clicked at bottom
+  return {
+    handleOffset: scrollBarHeight - height + relativeY,
+    percent: 1
+  };
 };
 
-const className = mergeClassNames(ExtensionListItemActionInstall, ExtensionActionButton);
-const getExtensionActionVirtualDom = (action, id) => {
-  return [{
-    childCount: 1,
-    className,
-    disabled: action.disabled,
-    name: id,
-    onClick: action.onClick,
-    type: Button$2
-  }, text(action.label)];
+const clamp = (num, min, max) => {
+  number(num);
+  number(min);
+  number(max);
+  return Math.min(Math.max(num, min), max);
 };
 
-const getExtensionActionsVirtualDom = (id, builtin, disabled, status) => {
-  const actions = getExtensionActions(builtin, disabled, status);
-  return [{
-    childCount: actions.length,
-    className: ExtensionActions,
-    type: Div
-  }, ...actions.flatMap(action => getExtensionActionVirtualDom(action, id))];
+const setDeltaY = (state, value) => {
+  object(state);
+  number(value);
+  const {
+    deltaY,
+    finalDeltaY,
+    headerHeight,
+    height,
+    itemHeight,
+    items,
+    minimumSliderSize
+  } = state;
+  const listHeight = height - headerHeight;
+  const newDeltaY = clamp(value, 0, finalDeltaY);
+  if (deltaY === newDeltaY) {
+    return state;
+  }
+  // TODO when it only moves by one px, extensions don't need to be rerendered, only negative margin
+  const minLineY = Math.floor(newDeltaY / itemHeight);
+  const total = items.length;
+  const maxLineY = Math.min(minLineY + getNumberOfVisibleItems$1(listHeight, itemHeight), total);
+  const contentHeight = total * itemHeight;
+  const scrollBarHeight = getScrollBarSize(listHeight, contentHeight, minimumSliderSize);
+  const scrollBarY = getScrollBarY$1(newDeltaY, finalDeltaY, height - headerHeight, scrollBarHeight);
+  return {
+    ...state,
+    deltaY: newDeltaY,
+    maxLineY,
+    minLineY,
+    scrollBarY
+  };
 };
 
-const getExtensionListItemClassName = (focused, disabled) => {
-  return mergeClassNames(ExtensionListItem, focused ? ExtensionActive : '', disabled ? ExtensionListItemDisabled : '');
+const handleScrollBarClick = (state, eventY) => {
+  // TODO move this to list
+  const {
+    deltaY,
+    finalDeltaY,
+    headerHeight,
+    height,
+    scrollBarHeight,
+    y
+  } = state;
+  const contentHeight = height - headerHeight;
+  const relativeY = eventY - y - headerHeight;
+  const currentScrollBarY = getScrollBarY$1(deltaY, finalDeltaY, contentHeight, scrollBarHeight);
+  const diff = relativeY - currentScrollBarY;
+  if (diff >= 0 && diff < scrollBarHeight) {
+    return {
+      ...state,
+      handleOffset: diff,
+      scrollBarActive: true
+    };
+  }
+  const {
+    handleOffset,
+    percent
+  } = getNewDeltaPercent(contentHeight, scrollBarHeight, relativeY);
+  const newDeltaY = percent * finalDeltaY;
+  return {
+    ...setDeltaY(state, newDeltaY),
+    handleOffset,
+    scrollBarActive: true
+  };
+};
+
+const getNewPercent = (contentHeight, scrollBarHeight, relativeY) => {
+  if (relativeY <= contentHeight - scrollBarHeight / 2) {
+    // clicked in middle
+    return relativeY / (contentHeight - scrollBarHeight);
+  }
+  // clicked at bottom
+  return 1;
+};
+const handleScrollBarMove = (state, eventY) => {
+  const {
+    finalDeltaY,
+    handleOffset,
+    headerHeight,
+    height,
+    scrollBarActive,
+    scrollBarHeight,
+    y
+  } = state;
+  if (!scrollBarActive) {
+    return state;
+  }
+  const relativeY = eventY - y - headerHeight - handleOffset;
+  const contentHeight = height - headerHeight;
+  const newPercent = getNewPercent(contentHeight, scrollBarHeight, relativeY);
+  const newDeltaY = newPercent * finalDeltaY;
+  return setDeltaY(state, newDeltaY);
 };
 
-const getExtensionListItemFooter = hasStatistics => {
-  return {
-    childCount: hasStatistics ? 3 : 2,
-    className: ExtensionListItemFooter,
-    type: Div
-  };
+const handleSettingsButtonClick = async (state, index) => {
+  const {
+    deltaY,
+    headerHeight,
+    itemHeight,
+    items,
+    uid,
+    x,
+    y
+  } = state;
+  const actualIndex = index;
+  if (actualIndex < 0 || actualIndex >= items.length) {
+    return state;
+  }
+
+  // Calculate the position for the context menu
+  // The settings button is at the bottom right of the extension list item
+  const itemY = y + headerHeight + actualIndex * itemHeight - deltaY;
+  const menuX = x + 200; // Position near the right side of the extension item
+  const menuY = itemY + itemHeight - 10; // Position at the bottom of the extension item
+
+  await show2(uid, ManageExtension, menuX, menuY, {
+    builtin: items[actualIndex].builtin === true,
+    disabled: items[actualIndex].disabled === true,
+    menuId: ManageExtension,
+    status: items[actualIndex].status
+  });
+  return state;
 };
 
-const getExtensionListItemId = focused => {
-  if (focused) {
-    return `ExtensionActive`;
+const handleUninstall = async (state, id) => {
+  try {
+    await uninstall$2(id);
+    return setExtensionStatus(state, id, NotInstalled);
+  } catch (error) {
+    await showErrorDialog(error);
+    return state;
   }
-  return undefined;
 };
 
-const extensionListItemMetadataNode = {
-  childCount: 2,
-  className: ExtensionListItemMetadata,
-  type: Div
-};
-const getStatisticVirtualDom = (label, value, className) => {
-  const accessibleLabel = `${label}: ${value}`;
-  return [{
-    ariaLabel: accessibleLabel,
-    childCount: 1,
-    className: mergeClassNames(ExtensionListItemStatistic, className),
-    title: accessibleLabel,
-    type: Span
-  }, text(value)];
-};
-const getExtensionStatisticsVirtualDom = (downloadCount, rating$1) => {
-  return [extensionListItemMetadataNode, ...getStatisticVirtualDom(downloads(), downloadCount, ExtensionListItemDownloadCount), ...getStatisticVirtualDom(rating(), rating$1, ExtensionListItemRating)];
+const handleWheel = (state, deltaMode, deltaY) => {
+  number(deltaMode);
+  number(deltaY);
+  return setDeltaY(state, state.deltaY + deltaY * state.scrollSensitivity);
 };
 
-const getExtensionListItemStatisticsVirtualDom = (hasStatistics, downloadCount, rating) => {
-  if (!hasStatistics) {
-    return [];
+const createExtensionManagementWorkerRpc = async () => {
+  try {
+    const rpc = await create$6({
+      commandMap: {},
+      send: port => sendMessagePortToExtensionManagementWorker(port, 0)
+    });
+    return rpc;
+  } catch (error) {
+    throw new VError(error, `Failed to create extension management rpc`);
   }
-  return getExtensionStatisticsVirtualDom(downloadCount, rating);
 };
 
-const getListItemDetail = linked => {
-  return {
-    childCount: linked ? 4 : 3,
-    className: ExtensionListItemDetail,
-    type: Div
-  };
-};
-const listItemName = {
-  childCount: 1,
-  className: ExtensionListItemName,
-  type: Div
-};
-const listItemDescription = {
-  childCount: 1,
-  className: ExtensionListItemDescription,
-  type: Div
-};
-const listItemAuthorName = {
-  childCount: 1,
-  className: ExtensionListItemAuthorName,
-  type: Div
-};
-const getLinkedIconVirtualDom = linked$1 => {
-  if (!linked$1) {
-    return [];
+const initializeExtensionManagementWorker = async () => {
+  try {
+    const rpc = await createExtensionManagementWorkerRpc();
+    set$4(rpc);
+  } catch {
+    // ignore
   }
-  const label = linked();
-  return [{
-    ariaLabel: label,
-    childCount: 0,
-    className: mergeClassNames(MaskIcon, 'MaskIconLinkExternal', ExtensionListItemLinkedIcon),
-    role: Image,
-    title: 'Extension is linked',
-    type: Div
-  }];
 };
-const getExtensionListItemVirtualDom = extension => {
-  const {
-    builtin = false,
-    description,
-    disabled = false,
-    downloadCount = 'n/a',
-    focused,
-    icon,
-    id,
-    linked = false,
-    name,
-    posInSet,
-    publisher,
-    rating = 'n/a',
-    setSize,
-    status
-  } = extension;
-  const actionsDom = getExtensionActionsVirtualDom(id, builtin, disabled, status);
-  const hasStatistics = !builtin;
-  const dom = [{
-    ariaPosInSet: posInSet,
-    ariaRoleDescription: Extension,
-    ariaSetSize: setSize,
-    childCount: 2,
-    className: getExtensionListItemClassName(focused, disabled),
-    id: getExtensionListItemId(focused),
-    role: ListItem,
-    type: Div
-  }, {
-    childCount: 0,
-    className: ExtensionListItemIcon,
-    role: None,
-    src: icon,
-    type: Img
-  }, getListItemDetail(linked), listItemName, text(name), listItemDescription, text(description), getExtensionListItemFooter(hasStatistics), listItemAuthorName, text(publisher), ...getExtensionListItemStatisticsVirtualDom(hasStatistics, downloadCount, rating), ...actionsDom, ...getLinkedIconVirtualDom(linked)];
-  return dom;
+
+const initialize = async () => {
+  await initializeExtensionManagementWorker();
 };
 
-const getListClassName = focusOutline => {
-  const className = focusOutline ? mergeClassNames(ListItems, FocusOutline) : ListItems;
-  return className;
+const installAnotherVersion = async state => {
+  await invoke$4('ConfirmPrompt.prompt', 'not implemented', undefined);
+  return state;
 };
-const getExtensionsListVirtualDom = (visibleExtensions, focusOutline) => {
-  const dom = [{
-    ariaLabel: extensions(),
-    childCount: visibleExtensions.length,
-    className: getListClassName(focusOutline),
-    onBlur: HandleBlur,
-    onContextmenu: HandleContextMenu,
-    onContextMenu: HandleContextMenu,
-    onFocus: HandleFocus,
-    onPointerDown: HandlePointerDown,
-    onTouchEnd: HandleTouchEnd,
-    onTouchMove: HandleTouchMove,
-    onTouchStart: HandleTouchStart,
-    onWheel: HandleWheel,
-    role: List$1,
-    tabIndex: Focusable,
-    type: Div
-  }, ...visibleExtensions.flatMap(getExtensionListItemVirtualDom)];
-  return dom;
+
+const Small = 1;
+const Normal = 2;
+const Large = 3;
+
+const getViewletSize = width => {
+  if (width < 180) {
+    return Small;
+  }
+  if (width < 768) {
+    return Normal;
+  }
+  return Large;
 };
 
-const getExtensionsVirtualDom = (visibleExtensions, focusOutline) => {
-  const dom = getExtensionsListVirtualDom(visibleExtensions, focusOutline);
-  // TODO
-  return dom;
+const getIsFirefox = () => {
+  const globalWithNavigator = globalThis;
+  return globalWithNavigator.navigator?.userAgent.toLowerCase().includes('firefox') ?? false;
 };
 
-const noExtensionsFoundNode = {
-  childCount: 1,
-  className: NoExtensionsFoundMessage,
-  type: Div
+const getSavedValue = savedState => {
+  if (savedState && typeof savedState === 'object' && 'searchValue' in savedState && typeof savedState.searchValue === 'string') {
+    return savedState.searchValue;
+  }
+  return '';
 };
-const getNoExtensionsFoundVirtualDom = message => {
-  return [noExtensionsFoundNode, text(message)];
+const getSavedDeltaY = savedState => {
+  if (savedState && typeof savedState === 'object' && 'deltaY' in savedState && typeof savedState.deltaY === 'number' && !Number.isNaN(savedState.deltaY)) {
+    return savedState.deltaY;
+  }
+  return 0;
 };
 
-const scrollBarNode = {
-  childCount: 1,
-  className: mergeClassNames(ScrollBar, ScrollBarSmall),
-  onPointerDown: HandleScrollBarPointerDown,
-  // TODO support pointercapture event
-  type: Div
-};
-const scrollBarThumbNode = {
-  childCount: 0,
-  className: ScrollBarThumb,
-  type: Div
+const restoreState = savedState => {
+  const searchValue = getSavedValue(savedState);
+  const savedDeltaY = getSavedDeltaY(savedState);
+  return {
+    deltaY: savedDeltaY,
+    searchValue
+  };
 };
-const getScrollBarVirtualDom = (scrollBarHeight, scrollBarTop) => {
-  const shouldShowScrollbar = scrollBarHeight > 0;
-  if (!shouldShowScrollbar) {
-    return [];
+
+const loadContentWithContext = async (context, savedState) => {
+  const {
+    uid
+  } = context.getState();
+  const loadToken = getToken(uid);
+  try {
+    const initialState = context.getState();
+    const {
+      assetDir,
+      platform,
+      width
+    } = initialState;
+    const {
+      deltaY,
+      searchValue: restoredSearchValue
+    } = restoreState(savedState);
+    const size = getViewletSize(width);
+    const scrollSensitivity = getIsFirefox() ? 2.5 : 1;
+    await context.updateState(state => {
+      if (!state.initial) {
+        return state;
+      }
+      return {
+        ...state,
+        deltaY,
+        initial: false,
+        inputSource: Script,
+        scrollSensitivity,
+        searchValue: restoredSearchValue,
+        size
+      };
+    });
+    const allExtensions = await getAllExtensions(assetDir, platform);
+    const normalized = normalizeExtensions(allExtensions, platform, assetDir);
+    await context.updateState(state => ({
+      ...state,
+      allExtensions: normalized
+    }));
+    await handleChangeWithContext(context, {}, false);
+  } finally {
+    finish(uid, loadToken);
   }
-  return [scrollBarNode, scrollBarThumbNode];
 };
 
-const getVisibleItem = (item, setSize, itemHeight, minLineY, relative, i, focusedIndex) => {
-  // TODO use normal parameters
-  const {
-    builtin,
-    description,
-    disabled,
-    downloadCount,
-    icon,
-    id,
-    linked,
-    name,
-    publisher,
-    rating,
-    status
-  } = item;
+const openSuggest = state => {
+  const completionItems = getCompletionItems(state.searchValue, state.cursorOffset);
+  if (completionItems.length === 0) {
+    return state;
+  }
   return {
-    builtin,
-    description,
-    disabled,
-    downloadCount,
-    focused: i === focusedIndex,
-    icon,
-    id,
-    index: i,
-    linked,
-    name,
-    posInSet: i + 1,
-    publisher,
-    rating,
-    setSize,
-    status,
-    top: (i - minLineY) * itemHeight - relative
+    ...state,
+    completionFocusedIndex: 0,
+    completionItems,
+    suggestOpen: true
   };
 };
 
-const getVisible = state => {
+const getCss = state => {
   const {
+    cursorOffset,
     deltaY,
-    focusedIndex,
+    headerHeight,
     itemHeight,
-    items,
-    maxLineY,
-    minLineY
+    scrollBarHeight,
+    scrollBarY,
+    width
   } = state;
-  const setSize = items.length;
-  const visible = [];
-  const relative = deltaY % itemHeight;
-  for (let i = minLineY; i < maxLineY; i++) {
-    const item = items[i];
-    visible.push(getVisibleItem(item, setSize, itemHeight, minLineY, relative, i, focusedIndex));
-  }
-  return visible;
-};
+  const relative = -(deltaY % itemHeight);
+  const roundedScrollBarY = Math.round(scrollBarY);
+  const maximumCompletionLeft = Math.max(8, width - 168);
+  const completionLeft = Math.min(Math.round(8 + cursorOffset * 7.5), maximumCompletionLeft);
+  const completionTop = Math.max(0, headerHeight - 10);
+  return `.Extensions .ScrollBarThumb {
+  height: ${scrollBarHeight}px;
+  translate: 0 ${roundedScrollBarY}px;
+}
 
-const contentNode = {
-  childCount: 2,
-  className: mergeClassNames(Viewlet, List),
-  type: Div
+
+/* TODO: avoid using negative margin. find a better way*/
+.ExtensionListItem:nth-child(1) {
+  margin-top: ${relative}px;
+}
+
+.ExtensionListItem {
+  box-sizing: border-box;
+  position: relative !important;
+  flex-shrink: 0;
+}
+
+.ExtensionListItemLinkedIcon {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 14px;
+  height: 14px;
+  color: var(--WorkbenchForeground, rgb(188, 190, 190));
+  opacity: 0.8;
+}
+
+.ExtensionListItemDisabled:not(.ExtensionActive) {
+  background: color-mix(in srgb, var(--SideBarBackground, rgb(30, 35, 36)) 95%, black);
+  color: var(--ExtensionDisabledForeground, color-mix(in srgb, var(--WorkbenchForeground) 70%, black));
+}
+
+.Extensions .ListItems {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  overflow-y: hidden;
+}
+
+.ExtensionHeader {
+  contain: layout style;
+  position: relative;
+  z-index: 1;
+}
+
+.ExtensionListItemFooter {
+  justify-content: flex-end;
+  padding-right: 2px;
+}
+
+.ExtensionListItemAuthorName {
+  flex: 1;
+}
+
+.ExtensionActions {
+  display: flex;
+  gap: 6px;
+}
+
+.ExtensionActionButton {
+  padding: 0 5px;
+}
+
+.ExtensionSearchCompletionWidget {
+  position: absolute;
+  left: ${completionLeft}px;
+  top: ${completionTop}px;
+  width: min(320px, calc(100% - ${completionLeft + 8}px));
+  max-height: 240px;
+  overflow-y: auto;
+  z-index: 10;
+  box-sizing: border-box;
+  border: 1px solid var(--CompletionListBorder, #95a29d);
+  background: var(--CompletionListBackground, #282e2f);
+  color: var(--CompletionListForeground, white);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.36);
+  font-size: 13px;
+  line-height: 20px;
+  user-select: none;
+}
+
+.ExtensionSearchCompletionItem {
+  display: block;
+  width: 100%;
+  min-height: 20px;
+  padding: 0 6px;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  line-height: inherit;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.ExtensionSearchCompletionItem:hover {
+  background: var(--CompletionListItemHoverBackground, rgba(64, 92, 80, 0.2));
+}
+
+.ExtensionSearchCompletionItemFocused {
+  background: var(--CompletionListItemActiveBackground, #405c50);
+  color: var(--CompletionListItemActiveForeground);
+}
+
+.ExtensionSearchCompletionHighlight {
+  color: var(--CompletionHighlightForeground, #e1b974);
+  font-weight: 700;
+}
+`;
 };
-const extensionsNode = {
-  ariaBusy: false,
-  ariaLive: 'polite',
-  childCount: 2,
-  className: mergeClassNames(Viewlet, Extensions),
-  role: None$3,
-  type: Div
+
+const renderCss = newState => {
+  const {
+    uid
+  } = newState;
+  const css = getCss(newState);
+  return [SetCss, uid, css];
 };
-const getContentVirtualDom = (visibleExtensions, message, scrollBarHeight, scrollBarY, focusOutline) => {
-  if (message) {
-    return getNoExtensionsFoundVirtualDom(message);
+
+const getSelector = focus => {
+  switch (focus) {
+    case Input:
+      return `[name="${Extensions}"]`;
+    case List$2:
+      return '.ListItems';
+    default:
+      return '';
   }
-  return [contentNode, ...getExtensionsVirtualDom(visibleExtensions, focusOutline), ...getScrollBarVirtualDom(scrollBarHeight)];
 };
-const getExtensionsViewVirtualDom = state => {
-  const visibleExtensions = getVisible(state);
+const renderFocus = newState => {
   const {
-    completionFocusedIndex,
-    completionItems,
     focus,
-    focusedIndex,
-    inputActions,
-    message,
-    placeholder,
-    scrollBarHeight,
-    scrollBarY,
-    suggestOpen
-  } = state;
-  const focusOutline = focusedIndex === -1 && focus === List$2;
-  return [extensionsNode, ...getExtensionHeaderVirtualDom(placeholder, inputActions, completionItems, completionFocusedIndex, suggestOpen), ...getContentVirtualDom(visibleExtensions, message, scrollBarHeight, scrollBarY, focusOutline)];
+    uid
+  } = newState;
+  if (!focus) {
+    return [];
+  }
+  const selector = getSelector(focus);
+  return [FocusSelector, uid, selector];
 };
 
-const renderItems2 = newState => {
+const renderFocusContext = newState => {
   const {
-    initial,
     uid
   } = newState;
-  if (initial) {
-    return [SetDom2, uid, []];
+  if (newState.focus === Input) {
+    return ['Viewlet.setFocusContext', uid, FocusExtensionsInput];
   }
-  const dom = getExtensionsViewVirtualDom(newState);
-  return [SetDom2, uid, dom];
+  if (newState.focus === List$2) {
+    return ['Viewlet.setFocusContext', uid, FocusExtensions];
+  }
+  return [];
+};
+
+const renderHeader = newState => {
+  const actions = getInputActions(newState.searchValue.length > 0);
+  const dom = getExtensionHeaderVirtualDom(newState.placeholder, actions, newState.completionItems, newState.completionFocusedIndex, newState.suggestOpen);
+  return ['setHeaderDom', dom];
 };
 
 // TODO cache rendered dom so that it can be used for dom diffing
@@ -4980,7 +4985,7 @@ const renderScrollBar = newState => {
 };
 
 const renderSearchValue = newState => {
-  return [/* method */'Viewlet.setValueByName', newState.uid, Extensions$1, newState.searchValue];
+  return [/* method */'Viewlet.setValueByName', newState.uid, Extensions, newState.searchValue];
 };
 
 const titleFilters = [{
@@ -5102,7 +5107,7 @@ const getIconVirtualDom = (icon, type = Div) => {
   return {
     childCount: 0,
     className: mergeClassNames(MaskIcon, `MaskIcon${icon}`),
-    role: None,
+    role: None$1,
     type
   };
 };
@@ -5353,6 +5358,7 @@ const commandMap = {
   'SearchExtensions.focusPreviousPage': wrapCommand(focusPreviousPage),
   'SearchExtensions.getActions': getActions,
   'SearchExtensions.getCommandIds': getCommandIds,
+  'SearchExtensions.getComponentDom': getComponentDom,
   'SearchExtensions.getComponentState': getComponentState,
   'SearchExtensions.getKeyBindings': getKeyBindings,
   'SearchExtensions.getMenuEntries': getMenuEntriesList,