@lvce-editor/extension-search-view 7.7.0 → 7.8.0

package/dist/extensionSearchViewWorkerMain.js

@@ -1086,6 +1086,7 @@ const None$3 = 'none';
 const Button$2 = 1;
 const Div = 4;
 const Input$1 = 6;
+const Span = 8;
 const Text = 12;
 const Img = 17;
 const Reference = 100;
@@ -1095,6 +1096,8 @@ const ClientX = 'event.clientX';
 const ClientY = 'event.clientY';
 const DeltaMode = 'event.deltaMode';
 const DeltaY = 'event.deltaY';
+const TargetName = 'event.target.name';
+const TargetSelectionStart = 'event.target.selectionStart';
 const TargetValue = 'event.target.value';
 
 const Script$1 = 2;
@@ -1140,6 +1143,12 @@ const showContextMenu2 = async (uid, menuId, x, y, args) => {
   number(y);
   await invoke$1('ContextMenu.show2', uid, menuId, x, y, args);
 };
+const disableExtension = async id => {
+  return invoke$1('ExtensionManagement.disable', id);
+};
+const enableExtension = async id => {
+  return invoke$1('ExtensionManagement.enable', id);
+};
 const sendMessagePortToExtensionHostWorker$1 = async (port, rpcId = 0) => {
   const command = 'HandleMessagePort.handleMessagePort2';
   await invokeAndTransfer('SendMessagePortToExtensionHostWorker.sendMessagePortToExtensionHostWorker', port, command, rpcId);
@@ -1158,6 +1167,12 @@ const sendMessagePortToExtensionManagementWorker = async (port, rpcId) => {
 const openUri$1 = async (uri, focus, options) => {
   await invoke$1('Main.openUri', uri, focus, options);
 };
+const uninstallExtension = async id => {
+  return invoke$1('ExtensionManagement.uninstall', id);
+};
+const installExtension = async id => {
+  return invoke$1('ExtensionManagement.install', id);
+};
 
 const toCommandId = key => {
   const dotIndex = key.indexOf('.');
@@ -1284,6 +1299,29 @@ const None$2 = 0;
 const Input = 1;
 const List$2 = 2;
 
+const isWhiteSpace = character => {
+  return /\s/.test(character);
+};
+const getCompletionRange = (value, cursorOffset) => {
+  const offset = Math.min(Math.max(cursorOffset, 0), value.length);
+  let start = offset;
+  while (start > 0 && !isWhiteSpace(value[start - 1])) {
+    start--;
+  }
+  if (value[start] !== '@') {
+    return undefined;
+  }
+  let end = offset;
+  while (end < value.length && !isWhiteSpace(value[end])) {
+    end++;
+  }
+  return {
+    end,
+    query: value.slice(start, offset),
+    start
+  };
+};
+
 const handleError = async (error, notify = true, prefix = '') => {
   // @ts-ignore
   console.error(error);
@@ -1309,11 +1347,16 @@ const Enable = 'Enable';
 const Disable = 'Disable';
 const EnableWorkspace = 'Enable Workspace';
 const DisableWorkspace = 'Disable Workspace';
+const Uninstall = 'Uninstall';
+const Install = 'Install';
+const Installing$1 = 'Installing';
+const Uninstalling$1 = 'Uninstalling';
 const InstallAnotherVersion = 'Install Another Version';
 const SearchExtensionsInMarketplace = 'Search Extensions in Marketplace';
 const ViewsAndMoreActions = 'Views and more Actions...';
 const Extensions$2 = 'Extensions';
 const Installed$1 = 'Installed';
+const Marketplace = 'Marketplace';
 const Copy = 'Copy';
 const CopyExtensionId = 'Copy Extension Id';
 const Name = 'Name';
@@ -1323,16 +1366,17 @@ const Version = 'Version';
 const Publisher = 'Publisher';
 const MarketplaceLink = 'Marketplace Link';
 const Category$1 = 'Category';
-const Disabled$1 = 'Disabled';
-const Featured = 'Featured';
-const McpServers = 'MCP Servers';
-const MostPopular = 'Most Popular';
-const RecentlyPublished = 'Recently Published';
-const Recommended = 'Recommended';
+const Disabled$2 = 'Disabled';
+const Featured$1 = 'Featured';
+const McpServers$1 = 'MCP Servers';
+const MostPopular$1 = 'Most Popular';
+const RecentlyPublished$1 = 'Recently Published';
+const Recommended$1 = 'Recommended';
 const Updates = 'Updates';
 const BuiltIn = 'Built-in';
-const Enabled$1 = 'Enabled';
-const WorkspaceUnsupported = 'Workspace Unsupported';
+const Enabled$2 = 'Enabled';
+const WorkspaceUnsupported$1 = 'Workspace Unsupported';
+const Deprecated$1 = 'Deprecated';
 const SortBy = 'Sort By';
 
 const noExtensionsFound = () => {
@@ -1368,10 +1412,10 @@ const extensions = () => {
 const clearExtensionSearchResults = () => {
   return i18nString(ClearExtensionSearchResults);
 };
-const enable$1 = () => {
+const enable$2 = () => {
   return i18nString(Enable);
 };
-const disable$1 = () => {
+const disable$2 = () => {
   return i18nString(Disable);
 };
 const enableWorkspace$1 = () => {
@@ -1380,6 +1424,18 @@ const enableWorkspace$1 = () => {
 const disableWorkspace$1 = () => {
   return i18nString(DisableWorkspace);
 };
+const uninstall$1 = () => {
+  return i18nString(Uninstall);
+};
+const install$1 = () => {
+  return i18nString(Install);
+};
+const installing$1 = () => {
+  return i18nString(Installing$1);
+};
+const uninstalling$1 = () => {
+  return i18nString(Uninstalling$1);
+};
 const installAnotherVersion$1 = () => {
   return i18nString(InstallAnotherVersion);
 };
@@ -1398,26 +1454,29 @@ const viewsAndMoreActions = () => {
 const installed = () => {
   return i18nString(Installed$1);
 };
+const marketplace = () => {
+  return i18nString(Marketplace);
+};
 const category = () => {
   return i18nString(Category$1);
 };
 const disabled = () => {
-  return i18nString(Disabled$1);
+  return i18nString(Disabled$2);
 };
 const featured = () => {
-  return i18nString(Featured);
+  return i18nString(Featured$1);
 };
 const mcpServers = () => {
-  return i18nString(McpServers);
+  return i18nString(McpServers$1);
 };
 const mostPopular = () => {
-  return i18nString(MostPopular);
+  return i18nString(MostPopular$1);
 };
 const recentlyPublished = () => {
-  return i18nString(RecentlyPublished);
+  return i18nString(RecentlyPublished$1);
 };
 const recommended = () => {
-  return i18nString(Recommended);
+  return i18nString(Recommended$1);
 };
 const updates = () => {
   return i18nString(Updates);
@@ -1426,10 +1485,13 @@ const builtIn = () => {
   return i18nString(BuiltIn);
 };
 const enabled = () => {
-  return i18nString(Enabled$1);
+  return i18nString(Enabled$2);
 };
 const workspaceUnsupported = () => {
-  return i18nString(WorkspaceUnsupported);
+  return i18nString(WorkspaceUnsupported$1);
+};
+const deprecated = () => {
+  return i18nString(Deprecated$1);
 };
 const sortBy = () => {
   return i18nString(SortBy);
@@ -1458,6 +1520,12 @@ const HandleTouchStart = 14;
 const HandleWheel = 15;
 const HandleHeaderContextMenu = 16;
 const HandleBlur = 17;
+const HandleInstall = 19;
+const HandleUninstall = 20;
+const HandleEnable = 21;
+const HandleDisable = 22;
+const HandleInputFocus = 23;
+const HandleInputBlur = 24;
 
 const ClearAll = 'ClearAll';
 const Filter = 'Filter';
@@ -1516,13 +1584,20 @@ const getScrollBarY$1 = (delta, finalDelta, size, scrollBarSize) => {
 };
 
 const Installed = '@installed';
-const Enabled = '@enabled';
-const Disabled = '@disabled';
+const Enabled$1 = '@enabled';
+const Disabled$1 = '@disabled';
 const Builtin = '@builtin';
 const Sort = '@sort';
 const Id = '@id';
 const Category = '@category';
 const Outdated = '@outdated';
+const Featured = '@featured';
+const McpServers = '@mcpservers';
+const MostPopular = '@mostpopular';
+const RecentlyPublished = '@recentlypublished';
+const Recommended = '@recommended';
+const WorkspaceUnsupported = '@workspaceunsupported';
+const Deprecated = '@deprecated';
 
 const RE_PARAM = /@\w+(?::\w+)?/g;
 const deserializeCategory = value => {
@@ -1553,10 +1628,10 @@ const parseValue = value => {
     if (match.startsWith(Installed)) {
       installed = true;
     }
-    if (match.startsWith(Enabled)) {
+    if (match.startsWith(Enabled$1)) {
       enabled = true;
     }
-    if (match.startsWith(Disabled)) {
+    if (match.startsWith(Disabled$1)) {
       disabled = true;
     }
     if (match.startsWith(Builtin)) {
@@ -1687,10 +1762,11 @@ const handleChange = async (state, update) => {
     ...update
   };
   try {
-    const value = fullNewState.searchValue.trim();
     const {
-      inputSource
+      inputSource,
+      searchValue
     } = fullNewState;
+    const value = searchValue.trim();
     const hasValue = value.length > 0;
     const inputActions = getInputActions(hasValue);
     const {
@@ -1707,7 +1783,7 @@ const handleChange = async (state, update) => {
     const items = await searchExtensions(allExtensions, value, platform, assetDir);
     if (items.length === 0) {
       return {
-        ...state,
+        ...fullNewState,
         allExtensions,
         deltaY: 0,
         finalDeltaY: 0,
@@ -1720,7 +1796,7 @@ const handleChange = async (state, update) => {
         minLineY: 0,
         placeholder: searchExtensionsInMarketPlace(),
         scrollBarHeight: 0,
-        searchValue: value
+        searchValue
       };
     }
     const total = items.length;
@@ -1733,7 +1809,7 @@ const handleChange = async (state, update) => {
     const finalDeltaY = getFinalDeltaY(listHeight, itemHeight, total);
     const scrollBarY = getScrollBarY$1(0, finalDeltaY, listHeight, scrollBarHeight);
     return {
-      ...state,
+      ...fullNewState,
       allExtensions,
       deltaY: 0,
       finalDeltaY,
@@ -1746,7 +1822,7 @@ const handleChange = async (state, update) => {
       placeholder: searchExtensionsInMarketPlace(),
       scrollBarHeight,
       scrollBarY,
-      searchValue: value
+      searchValue
     };
 
     // TODO handle out of order responses (a bit complicated)
@@ -1761,17 +1837,51 @@ const handleChange = async (state, update) => {
   }
 };
 
+const User = 1;
+const Script = 2;
+
+const acceptCompletion = async (state, label) => {
+  const completion = label || state.completionItems[state.completionFocusedIndex]?.label;
+  if (!completion) {
+    return state;
+  }
+  const range = getCompletionRange(state.searchValue, state.cursorOffset);
+  if (!range) {
+    return state;
+  }
+  const searchValue = `${state.searchValue.slice(0, range.start)}${completion}${state.searchValue.slice(range.end)}`;
+  return handleChange(state, {
+    completionFocusedIndex: 0,
+    completionItems: [],
+    cursorOffset: range.start + completion.length,
+    focus: Input,
+    inputSource: Script,
+    searchValue,
+    suggestOpen: false
+  });
+};
+
 const clearSearchResults = state => {
   return handleChange(state, {
     ...state,
+    completionFocusedIndex: 0,
+    completionItems: [],
+    cursorOffset: 0,
     focus: Input,
     inputSource: Script$1,
-    searchValue: ''
+    searchValue: '',
+    suggestOpen: false
   });
 };
 
 const closeSuggest = state => {
-  return state;
+  if (!state.suggestOpen) {
+    return state;
+  }
+  return {
+    ...state,
+    suggestOpen: false
+  };
 };
 
 const getFocusedItem = state => {
@@ -1859,10 +1969,13 @@ const {
   wrapGetter
 } = create$1();
 
-const create = (id, uri, x, y, width, height, platform, assetDir) => {
+const create = (id, uri, x, y, width, height, platform, assetDir, parentUid) => {
   const state = {
     allExtensions: [],
     assetDir,
+    completionFocusedIndex: 0,
+    completionItems: [],
+    cursorOffset: 0,
     deltaY: 0,
     finalDeltaY: 0,
     focus: 0,
@@ -1881,11 +1994,13 @@ const create = (id, uri, x, y, width, height, platform, assetDir) => {
     minimumSliderSize: 0,
     minLineY: 0,
     negativeMargin: 0,
+    parentUid,
     placeholder: '',
     platform,
     scrollBarActive: false,
     scrollBarHeight: 0,
     scrollBarY: 0,
+    scrollSensitivity: 1,
     searchValue: '',
     size: 0,
     suggestOpen: false,
@@ -1897,26 +2012,27 @@ const create = (id, uri, x, y, width, height, platform, assetDir) => {
   set$1(id, state, state);
 };
 
-const isEqual$3 = (oldState, newState) => {
-  return oldState.scrollBarHeight === newState.scrollBarHeight && oldState.scrollBarY === newState.scrollBarY && oldState.initial === newState.initial && oldState.deltaY === newState.deltaY;
+const isEqual$4 = (oldState, newState) => {
+  return oldState.cursorOffset === newState.cursorOffset && oldState.scrollBarHeight === newState.scrollBarHeight && oldState.scrollBarY === newState.scrollBarY && oldState.initial === newState.initial && oldState.deltaY === newState.deltaY && oldState.width === newState.width;
 };
 
-const isEqual$2 = (oldState, newState) => {
+const isEqual$3 = (oldState, newState) => {
   if (!newState.focus) {
     return true;
   }
   return oldState.focus === newState.focus && oldState.inputSource === newState.inputSource;
 };
 
-const isEqual$1 = (oldState, newState) => {
-  return oldState.items === newState.items && oldState.minLineY === newState.minLineY && oldState.maxLineY === newState.maxLineY && oldState.focusedIndex === newState.focusedIndex && oldState.message === newState.message && oldState.focus === newState.focus && oldState.inputActions === newState.inputActions && oldState.placeholder === newState.placeholder;
+const isEqual$2 = (oldState, newState) => {
+  return oldState.completionFocusedIndex === newState.completionFocusedIndex && oldState.completionItems === newState.completionItems && oldState.items === newState.items && oldState.minLineY === newState.minLineY && oldState.maxLineY === newState.maxLineY && oldState.focusedIndex === newState.focusedIndex && oldState.message === newState.message && oldState.focus === newState.focus && oldState.inputActions === newState.inputActions && oldState.placeholder === newState.placeholder && oldState.suggestOpen === newState.suggestOpen;
 };
 
-const User = 1;
-const Script = 2;
+const isEqual$1 = (oldState, newState) => {
+  return newState.inputSource === User || oldState.searchValue === newState.searchValue;
+};
 
 const isEqual = (oldState, newState) => {
-  return newState.inputSource === User || oldState.searchValue === newState.searchValue;
+  return newState.parentUid === undefined || oldState.searchValue === newState.searchValue;
 };
 
 const RenderHeader = 1;
@@ -1928,15 +2044,16 @@ const RenderSearchValue = 7;
 const RenderFocusContext = 8;
 const RenderIncremental = 9;
 const RenderCss = 10;
+const RenderTitle = 11;
 
-const modules = [isEqual$1, isEqual$2, isEqual, isEqual$2, isEqual$3];
-const numbers = [RenderIncremental, RenderFocus, RenderSearchValue, RenderFocusContext, RenderCss];
+const modules = [isEqual$2, isEqual$3, isEqual$1, isEqual$3, isEqual$4, isEqual];
+const numbers = [RenderIncremental, RenderFocus, RenderSearchValue, RenderFocusContext, RenderCss, RenderTitle];
 
 const diff2 = uid => {
   return diff(uid, modules, numbers);
 };
 
-const disable = async (state, _id) => {
+const disable$1 = async (state, _id) => {
   await confirm('not implemented');
   return state;
 };
@@ -1950,7 +2067,7 @@ const dispose = uid => {
   dispose$1(uid);
 };
 
-const enable = async (state, _id) => {
+const enable$1 = async (state, _id) => {
   await confirm('not implemented');
   return state;
 };
@@ -2145,6 +2262,7 @@ const getActions = () => {
 };
 
 const Enter = 3;
+const Escape = 8;
 const Space = 9;
 const PageUp = 10;
 const PageDown = 11;
@@ -2160,6 +2278,26 @@ const FocusExtensionsInput = 7000;
 
 const getKeyBindings = () => {
   return [{
+    command: 'Extensions.closeSuggest',
+    key: Escape,
+    when: FocusExtensionsInput
+  }, {
+    command: 'Extensions.acceptCompletion',
+    key: Enter,
+    when: FocusExtensionsInput
+  }, {
+    command: 'Extensions.selectPreviousCompletion',
+    key: UpArrow,
+    when: FocusExtensionsInput
+  }, {
+    command: 'Extensions.selectNextCompletion',
+    key: DownArrow,
+    when: FocusExtensionsInput
+  }, {
+    command: 'Extensions.toggleSuggest',
+    key: CtrlCmd | Space,
+    when: FocusExtensionsInput
+  }, {
     command: 'Extensions.focusFirst',
     key: Home,
     when: FocusExtensions
@@ -2211,7 +2349,7 @@ const getMenuEntriesList = () => {
     command: 'SearchExtensions.enable',
     flags: None$1,
     id: 'enable',
-    label: enable$1()
+    label: enable$2()
   }, {
     command: 'SearchExtensions.enableWorkspace',
     flags: None$1,
@@ -2226,7 +2364,7 @@ const getMenuEntriesList = () => {
     command: 'SearchExtensions.disable',
     flags: None$1,
     id: 'disable',
-    label: disable$1()
+    label: disable$2()
   }, {
     command: 'SearchExtensions.disableWorkspace',
     flags: None$1,
@@ -2353,7 +2491,8 @@ const getMenuIds = () => {
 const handleBlur = state => {
   return {
     ...state,
-    focus: None$2
+    focus: None$2,
+    suggestOpen: false
   };
 };
 
@@ -2669,7 +2808,17 @@ const getListIndex = (eventX, eventY, x, y, deltaY, itemHeight, headerHeight) =>
   return index;
 };
 
-const handleClickAt = async (state, button, eventX, eventY) => {
+const handleCompletionPointerDown = (state, label) => {
+  if (state.completionItems.every(item => item.label !== label)) {
+    return Promise.resolve(state);
+  }
+  return acceptCompletion(state, label);
+};
+
+const handleClickAt = async (state, button, eventX, eventY, name = '') => {
+  if (name.startsWith('@')) {
+    return handleCompletionPointerDown(state, name);
+  }
   if (button !== LeftClick) {
     return state;
   }
@@ -2740,17 +2889,50 @@ const handleContextMenu = async (state, button, eventX, eventY) => {
   return state;
 };
 
-const handleDisable = (state, id) => {
-  return state;
-  // TODO
+const Disabled = 'disabled';
+const Enabled = 'enabled';
+const Installing = 'installing';
+const NotInstalled = 'not-installed';
+const Uninstalling = 'uninstalling';
+const statuses = [Disabled, Enabled, Installing, NotInstalled, Uninstalling];
+const isExtensionStatus = status => {
+  return statuses.includes(status);
+};
+
+const updateStatus = (extension, id, status, builtin) => {
+  if (extension.id !== id) {
+    return extension;
+  }
+  return {
+    ...extension,
+    builtin: builtin ?? extension.builtin,
+    disabled: status === Disabled,
+    status
+  };
+};
+const setExtensionStatus = (state, id, status, builtin) => {
+  if (!isExtensionStatus(status)) {
+    throw new TypeError(`Invalid extension status: ${status}`);
+  }
+  return {
+    ...state,
+    allExtensions: state.allExtensions.map(extension => updateStatus(extension, id, status, builtin)),
+    items: state.items.map(extension => updateStatus(extension, id, status, builtin))
+  };
+};
+
+const handleDisable = async (state, id) => {
+  const error = await disableExtension(id);
+  return error ? state : setExtensionStatus(state, id, Disabled);
 };
 
 const handleDisableWorkspace = (state, id) => {
   return state;
 };
 
-const handleEnable = (state, id) => {
-  return state;
+const handleEnable = async (state, id) => {
+  const error = await enableExtension(id);
+  return error ? state : setExtensionStatus(state, id, Enabled);
 };
 
 const handleEnableWorkspace = (state, id) => {
@@ -2768,17 +2950,74 @@ const handleHeaderContextMenu = async state => {
   return state;
 };
 
-const handleInput = async (state, value, inputSource = User) => {
+const getFuzzyHighlights = (label, query) => {
+  const lowerLabel = label.toLowerCase();
+  const lowerQuery = query.toLowerCase();
+  const matchedIndexes = [];
+  let labelIndex = 0;
+  for (const character of lowerQuery) {
+    labelIndex = lowerLabel.indexOf(character, labelIndex);
+    if (labelIndex === -1) {
+      return undefined;
+    }
+    matchedIndexes.push(labelIndex);
+    labelIndex++;
+  }
+  const highlights = [];
+  for (const index of matchedIndexes) {
+    const lastEnd = highlights.at(-1);
+    if (lastEnd === index) {
+      highlights[highlights.length - 1] = index + 1;
+    } else {
+      highlights.push(index, index + 1);
+    }
+  }
+  return highlights;
+};
+
+const Suggestions = ['@builtin', '@category:', '@disabled', '@enabled', '@featured', '@id:', '@installed', '@mcpservers', '@mostpopular', '@outdated', '@recentlypublished', '@recommended', '@sort:installs', '@workspaceunsupported'];
+
+const getCompletionItems = (value, cursorOffset) => {
+  const range = getCompletionRange(value, cursorOffset);
+  if (!range) {
+    return [];
+  }
+  const items = [];
+  for (const label of Suggestions) {
+    const highlights = getFuzzyHighlights(label, range.query);
+    if (highlights) {
+      items.push({
+        highlights,
+        label
+      });
+    }
+  }
+  return items;
+};
+
+const handleInput = async (state, value, inputSource = User, cursorOffset = value.length) => {
+  const completionItems = getCompletionItems(value, cursorOffset);
   return handleChange(state, {
+    completionFocusedIndex: 0,
+    completionItems,
+    cursorOffset,
+    focus: Input,
     inputSource,
-    searchValue: value
+    searchValue: value,
+    suggestOpen: inputSource === User && completionItems.length > 0
   });
 };
 
-// TODO show error / warning  when installment fails / times out
+const handleInputFocus = state => {
+  return {
+    ...state,
+    focus: Input
+  };
+};
+
 const handleInstall = async (state, id) => {
-  return state;
-  // TODO
+  await installExtension(id);
+  return setExtensionStatus(state, id, Enabled);
 };
 
 const handleScrollBarCaptureLost = state => {
@@ -2939,15 +3178,15 @@ const handleSettingsButtonClick = async (state, index) => {
   return state;
 };
 
-// TODO show error / warning  when installment fails / times out
 const handleUninstall = async (state, id) => {
-  return state;
+  await uninstallExtension(id);
+  return setExtensionStatus(state, id, NotInstalled);
 };
 
 const handleWheel = (state, deltaMode, deltaY) => {
   number(deltaMode);
   number(deltaY);
-  return setDeltaY(state, state.deltaY + deltaY);
+  return setDeltaY(state, state.deltaY + deltaY * state.scrollSensitivity);
 };
 
 const sendMessagePortToExtensionHostWorker = async port => {
@@ -3041,6 +3280,11 @@ const getViewletSize = width => {
   return Large;
 };
 
+const getIsFirefox = () => {
+  const globalWithNavigator = globalThis;
+  return globalWithNavigator.navigator?.userAgent.toLowerCase().includes('firefox') ?? false;
+};
+
 const getRemoteUrl = (extension, platform, assetDir) => {
   if (platform === Remote || platform === Electron) {
     if (extension.builtin) {
@@ -3086,6 +3330,15 @@ const getExtensionIcon = (extension, platform, assetDir) => {
   return getRemoteUrl(extension, platform, assetDir);
 };
 
+const getBuiltin = extension => {
+  return extension?.builtin === true;
+};
+const getDisabled = extension => {
+  return extension?.disabled === true;
+};
+const getStatus = extension => {
+  return typeof extension?.status === 'string' ? extension.status : undefined;
+};
 const getIcon = (extension, platform, assetDir) => {
   return getExtensionIcon(extension, platform, assetDir);
 };
@@ -3149,13 +3402,16 @@ const getPublisher = extension => {
 
 const normalizeExtension = (extension, platform, assetDir) => {
   return {
+    builtin: getBuiltin(extension),
     categories: getCategories(extension),
     description: getDescription(extension),
+    disabled: getDisabled(extension),
     icon: getIcon(extension, platform, assetDir),
     id: getId$1(extension),
     name: getName(extension),
     publisher: getPublisher(extension),
     size: getSize(extension),
+    status: getStatus(extension),
     updatedDate: getUpdatedDate(extension),
     uri: ''
   };
@@ -3201,30 +3457,47 @@ const loadContent = async (state, savedState) => {
   const allExtensions = await getAllExtensions(platform);
   const size = getViewletSize(width);
   const normalized = normalizeExtensions(allExtensions, platform, assetDir);
+  const scrollSensitivity = getIsFirefox() ? 2.5 : 1;
   const updatedState = await handleInput({
     ...state,
     allExtensions: normalized,
     deltaY,
     initial: false,
     inputSource: Script,
+    scrollSensitivity,
     size
   }, searchValue, Script);
   return updatedState;
 };
 
 const openSuggest = state => {
-  return state;
+  const completionItems = getCompletionItems(state.searchValue, state.cursorOffset);
+  if (completionItems.length === 0) {
+    return state;
+  }
+  return {
+    ...state,
+    completionFocusedIndex: 0,
+    completionItems,
+    suggestOpen: true
+  };
 };
 
 const getCss = state => {
   const {
+    cursorOffset,
     deltaY,
+    headerHeight,
     itemHeight,
     scrollBarHeight,
-    scrollBarY
+    scrollBarY,
+    width
   } = 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;
@@ -3247,6 +3520,61 @@ const getCss = state => {
   gap: 0;
   overflow-y: hidden;
 }
+
+.ExtensionHeader {
+  contain: layout style;
+  position: relative;
+  z-index: 1;
+}
+
+.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;
+}
 `;
 };
 
@@ -3295,21 +3623,35 @@ const renderFocusContext = newState => {
   return [];
 };
 
+const ComboBox = 'combobox';
+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 ExtensionListItemFooter = 'ExtensionListItemFooter';
 const ExtensionListItemIcon = 'ExtensionListItemIcon';
 const ExtensionListItemName = 'ExtensionListItemName';
+const ExtensionSearchCompletionHighlight = 'ExtensionSearchCompletionHighlight';
+const ExtensionSearchCompletionItem = 'ExtensionSearchCompletionItem';
+const ExtensionSearchCompletionItemFocused = 'ExtensionSearchCompletionItemFocused';
+const ExtensionSearchCompletionWidget = 'ExtensionSearchCompletionWidget';
 const Extensions = 'Extensions';
 const FocusOutline = 'FocusOutline';
 const IconButton = 'IconButton';
-const List$1 = 'List';
+const List = 'List';
 const ListItems = 'ListItems';
 const MaskIcon = 'MaskIcon';
 const MultilineInputBox = 'MultilineInputBox';
@@ -3325,10 +3667,71 @@ const SearchFieldButtons = 'SearchFieldButtons';
 const SearchFieldContainer = 'SearchFieldContainer';
 const Viewlet = 'Viewlet';
 
-const List = 'list';
-const ListItem = 'listitem';
-const None = 'none';
-const ToolBar = 'toolbar';
+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;
+  }
+  if (position < label.length) {
+    dom.push(text(label.slice(position)));
+  }
+  return dom;
+};
+
+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);
+  }
+  return count;
+};
+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 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 disabledClassName = mergeClassNames(SearchFieldButton, SearchFieldButtonDisabled);
 const getClassName$1 = enabled => {
@@ -3358,7 +3761,7 @@ const getSearchFieldButtonVirtualDom = button => {
   }];
 };
 
-const getSearchFieldVirtualDom = (name, placeholder, onInput, insideButtons, outsideButtons, onFocus = '') => {
+const getSearchFieldVirtualDom = (name, placeholder, onInput, insideButtons, outsideButtons, onFocus = '', onBlur = '', inputProperties = {}) => {
   // TODO avoid mutation
   const dom = [{
     childCount: 2,
@@ -3373,11 +3776,15 @@ const getSearchFieldVirtualDom = (name, placeholder, onInput, insideButtons, out
     className: MultilineInputBox,
     inputType: 'search',
     name,
+    ...(onBlur && {
+      onBlur
+    }),
     onFocus,
     onInput,
     placeholder,
     spellcheck: false,
-    type: Input$1
+    type: Input$1,
+    ...inputProperties
   }, {
     childCount: insideButtons.length,
     className: SearchFieldButtons,
@@ -3395,24 +3802,98 @@ const getSearchFieldVirtualDom = (name, placeholder, onInput, insideButtons, out
   return dom;
 };
 
-const parentNode = {
-  childCount: 1,
-  className: ExtensionHeader,
-  onContextMenu: HandleHeaderContextMenu,
-  type: Div
-};
-const getExtensionHeaderVirtualDom = (placeholder, actions) => {
-  return [parentNode, ...getSearchFieldVirtualDom(Extensions$1, placeholder, HandleExtensionsInput, actions, [])];
+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
+  };
+  return [{
+    childCount: suggestOpen ? 2 : 1,
+    className: ExtensionHeader,
+    onContextMenu: HandleHeaderContextMenu,
+    type: Div
+  }, ...getSearchFieldVirtualDom(Extensions$1, placeholder, HandleExtensionsInput, actions, [], HandleInputFocus, HandleInputBlur, inputProperties), ...(suggestOpen ? getCompletionWidgetVirtualDom(completionItems, completionFocusedIndex) : [])];
 };
 
 const renderHeader = newState => {
   const actions = getInputActions(newState.searchValue.length > 0);
-  const dom = getExtensionHeaderVirtualDom(newState.placeholder, actions);
+  const dom = getExtensionHeaderVirtualDom(newState.placeholder, actions, newState.completionItems, newState.completionFocusedIndex, newState.suggestOpen);
   return ['setHeaderDom', dom];
 };
 
 const Extension = 'Extension';
 
+const install = {
+  disabled: false,
+  label: install$1(),
+  onClick: HandleInstall
+};
+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 (status === Installing) {
+    return [installing];
+  }
+  if (status === Uninstalling) {
+    return builtin ? [] : [uninstalling];
+  }
+  const enableOrDisable = status === Disabled || status === undefined && disabled ? enable : disable;
+  return builtin ? [enableOrDisable] : [enableOrDisable, uninstall];
+};
+
+const className = mergeClassNames(ExtensionListItemActionInstall, ExtensionActionButton);
+const getActionVirtualDom$1 = (action, id) => {
+  return [{
+    childCount: 1,
+    className,
+    disabled: action.disabled,
+    name: id,
+    onClick: action.onClick,
+    type: Button$2
+  }, text(action.label)];
+};
+const getExtensionActionsVirtualDom = (id, builtin, disabled, status) => {
+  const actions = getExtensionActions(builtin, disabled, status);
+  return [{
+    childCount: actions.length,
+    className: ExtensionActions,
+    type: Div
+  }, ...actions.flatMap(action => getActionVirtualDom$1(action, id))];
+};
+
 const listItemDetail = {
   childCount: 3,
   className: ExtensionListItemDetail,
@@ -3452,14 +3933,19 @@ const getId = focused => {
 };
 const getExtensionListItemVirtualDom = extension => {
   const {
+    builtin = false,
     description,
+    disabled = false,
     focused,
     icon,
+    id,
     name,
     posInSet,
     publisher,
-    setSize
+    setSize,
+    status
   } = extension;
+  const actionsDom = getExtensionActionsVirtualDom(id, builtin, disabled, status);
   const dom = [{
     ariaPosInSet: posInSet,
     ariaRoleDescription: Extension,
@@ -3475,11 +3961,7 @@ const getExtensionListItemVirtualDom = extension => {
     role: None,
     src: icon,
     type: Img
-  }, listItemDetail, listItemName, text(name), listItemDescription, text(description), listItemFooter, listItemAuthorName, text(publisher), {
-    childCount: 0,
-    className: ExtensionActions,
-    type: Div
-  }];
+  }, listItemDetail, listItemName, text(name), listItemDescription, text(description), listItemFooter, listItemAuthorName, text(publisher), ...actionsDom];
   return dom;
 };
 
@@ -3498,7 +3980,7 @@ const getExtensionsListVirtualDom = (visibleExtensions, focusOutline) => {
     onTouchMove: HandleTouchMove,
     onTouchStart: HandleTouchStart,
     onWheel: HandleWheel,
-    role: List,
+    role: List$1,
     tabIndex: 0,
     type: Div
   }, ...visibleExtensions.flatMap(getExtensionListItemVirtualDom)];
@@ -3540,14 +4022,19 @@ const getScrollBarVirtualDom = (scrollBarHeight, scrollBarTop) => {
 const getVisibleItem = (item, setSize, itemHeight, minLineY, relative, i, focusedIndex) => {
   // TODO use normal parameters
   const {
+    builtin,
     description,
+    disabled,
     icon,
     id,
     name,
-    publisher
+    publisher,
+    status
   } = item;
   return {
+    builtin,
     description,
+    disabled,
     focused: i === focusedIndex,
     icon,
     id,
@@ -3556,6 +4043,7 @@ const getVisibleItem = (item, setSize, itemHeight, minLineY, relative, i, focuse
     posInSet: i + 1,
     publisher,
     setSize,
+    status,
     top: (i - minLineY) * itemHeight - relative
   };
 };
@@ -3585,19 +4073,22 @@ const getContentVirtualDom = (visibleExtensions, message, scrollBarHeight, scrol
   }
   return [{
     childCount: 2,
-    className: mergeClassNames(Viewlet, List$1),
+    className: mergeClassNames(Viewlet, List),
     type: Div
   }, ...getExtensionsVirtualDom(visibleExtensions, focusOutline), ...getScrollBarVirtualDom(scrollBarHeight)];
 };
 const getExtensionsViewVirtualDom = state => {
   const visibleExtensions = getVisible(state);
   const {
+    completionFocusedIndex,
+    completionItems,
     focusedIndex,
     inputActions,
     message,
     placeholder,
     scrollBarHeight,
-    scrollBarY
+    scrollBarY,
+    suggestOpen
   } = state;
   const focusOutline = focusedIndex === -1 && state.focus === List$2;
   return [{
@@ -3607,7 +4098,7 @@ const getExtensionsViewVirtualDom = state => {
     className: mergeClassNames(Viewlet, Extensions),
     role: None$3,
     type: Div
-  }, ...getExtensionHeaderVirtualDom(placeholder, inputActions), ...getContentVirtualDom(visibleExtensions, message, scrollBarHeight, scrollBarY, focusOutline)];
+  }, ...getExtensionHeaderVirtualDom(placeholder, inputActions, completionItems, completionFocusedIndex, suggestOpen), ...getContentVirtualDom(visibleExtensions, message, scrollBarHeight, scrollBarY, focusOutline)];
 };
 
 const renderItems2 = newState => {
@@ -3665,6 +4156,66 @@ const renderSearchValue = newState => {
   return [/* method */'Viewlet.setValueByName', newState.uid, Extensions$1, newState.searchValue];
 };
 
+const titleFilters = [{
+  label: deprecated,
+  value: Deprecated
+}, {
+  label: installed,
+  value: Installed
+}, {
+  label: enabled,
+  value: Enabled$1
+}, {
+  label: disabled,
+  value: Disabled$1
+}, {
+  label: builtIn,
+  value: Builtin
+}, {
+  label: updates,
+  value: Outdated
+}, {
+  label: featured,
+  value: Featured
+}, {
+  label: mcpServers,
+  value: McpServers
+}, {
+  label: mostPopular,
+  value: MostPopular
+}, {
+  label: recentlyPublished,
+  value: RecentlyPublished
+}, {
+  label: recommended,
+  value: Recommended
+}, {
+  label: workspaceUnsupported,
+  value: WorkspaceUnsupported
+}];
+const getTitleSuffix = searchValue => {
+  if (!searchValue.trim()) {
+    return installed();
+  }
+  const normalizedSearchValue = searchValue.toLowerCase();
+  for (const filter of titleFilters) {
+    if (normalizedSearchValue.includes(filter.value)) {
+      return filter.label();
+    }
+  }
+  return marketplace();
+};
+const renderTitle = state => {
+  return `${extensions()}: ${getTitleSuffix(state.searchValue)}`;
+};
+
+const renderTitleCommand = newState => {
+  if (newState.parentUid === undefined) {
+    return [];
+  }
+  return ['Viewlet.send', newState.parentUid, 'setTitle', renderTitle(newState)];
+};
+
 const getRenderer = diffType => {
   switch (diffType) {
     case RenderCss:
@@ -3685,6 +4236,8 @@ const getRenderer = diffType => {
       return renderScrollBar;
     case RenderSearchValue:
       return renderSearchValue;
+    case RenderTitle:
+      return renderTitleCommand;
     default:
       throw new Error('unknown renderer');
   }
@@ -3773,7 +4326,7 @@ const renderEventListeners = () => {
     preventDefault: true
   }, {
     name: HandlePointerDown,
-    params: ['handleClickAt', Button$1, ClientX, ClientY],
+    params: ['handleClickAt', Button$1, ClientX, ClientY, TargetName],
     preventDefault: true
   }, {
     name: HandleScrollBarPointerDown,
@@ -3792,7 +4345,7 @@ const renderEventListeners = () => {
     passive: true
   }, {
     name: HandleExtensionsInput,
-    params: ['handleInput', TargetValue, User]
+    params: ['handleInput', TargetValue, User, TargetSelectionStart]
   }, {
     name: HandleClearSearchResults,
     params: ['clearSearchResults']
@@ -3805,6 +4358,24 @@ const renderEventListeners = () => {
   }, {
     name: HandleBlur,
     params: ['handleBlur']
+  }, {
+    name: HandleInstall,
+    params: ['handleInstall', TargetName]
+  }, {
+    name: HandleUninstall,
+    params: ['handleUninstall', TargetName]
+  }, {
+    name: HandleEnable,
+    params: ['handleEnable', TargetName]
+  }, {
+    name: HandleDisable,
+    params: ['handleDisable', TargetName]
+  }, {
+    name: HandleInputFocus,
+    params: ['handleInputFocus']
+  }, {
+    name: HandleInputBlur,
+    params: ['handleBlur']
   }];
 };
 
@@ -3875,26 +4446,44 @@ const selectIndex = (state, index) => {
   };
 };
 
-const toggleSuggest = state => {
+const selectNextCompletion = state => {
+  if (!state.suggestOpen || state.completionItems.length === 0) {
+    return state;
+  }
+  return {
+    ...state,
+    completionFocusedIndex: (state.completionFocusedIndex + 1) % state.completionItems.length
+  };
+};
+
+const selectPreviousCompletion = state => {
+  if (!state.suggestOpen || state.completionItems.length === 0) {
+    return state;
+  }
   return {
     ...state,
-    suggestOpen: !state.suggestOpen
+    completionFocusedIndex: (state.completionFocusedIndex - 1 + state.completionItems.length) % state.completionItems.length
   };
 };
 
+const toggleSuggest = state => {
+  return state.suggestOpen ? closeSuggest(state) : openSuggest(state);
+};
+
 const commandMap = {
   'Extensions.copyExtensionId': wrapCommand(copyExtensionId),
   'Extensions.copyExtensionInfo': wrapCommand(copyExtensionInfo),
+  'SearchExtensions.acceptCompletion': wrapCommand(acceptCompletion),
   'SearchExtensions.clearSearchResults': wrapCommand(clearSearchResults),
   'SearchExtensions.closeSuggest': wrapCommand(closeSuggest),
   'SearchExtensions.copyExtensionId': wrapCommand(copyExtensionId),
   'SearchExtensions.copyExtensionInfo': wrapCommand(copyExtensionInfo),
   'SearchExtensions.create': create,
   'SearchExtensions.diff2': diff2,
-  'SearchExtensions.disable': wrapCommand(disable),
+  'SearchExtensions.disable': wrapCommand(disable$1),
   'SearchExtensions.disableWorkspace': wrapCommand(disableWorkspace),
   'SearchExtensions.dispose': dispose,
-  'SearchExtensions.enable': wrapCommand(enable),
+  'SearchExtensions.enable': wrapCommand(enable$1),
   'SearchExtensions.enableWorkspace': wrapCommand(enableWorkspace),
   'SearchExtensions.focusFirst': wrapCommand(focusFirst),
   'SearchExtensions.focusIndex': wrapCommand(focusIndex),
@@ -3924,6 +4513,7 @@ const commandMap = {
   'SearchExtensions.handleFocus': wrapCommand(handleFocus),
   'SearchExtensions.handleHeaderContextMenu': wrapCommand(handleHeaderContextMenu),
   'SearchExtensions.handleInput': wrapCommand(handleInput),
+  'SearchExtensions.handleInputFocus': wrapCommand(handleInputFocus),
   'SearchExtensions.handleInstall': wrapCommand(handleInstall),
   'SearchExtensions.handleScrollBarCaptureLost': wrapCommand(handleScrollBarCaptureLost),
   'SearchExtensions.handleScrollBarClick': wrapCommand(handleScrollBarClick),
@@ -3945,7 +4535,10 @@ const commandMap = {
   'SearchExtensions.scrollDown': wrapCommand(scrollDown),
   'SearchExtensions.searchExtensions': searchExtensions,
   'SearchExtensions.selectIndex': wrapCommand(selectIndex),
+  'SearchExtensions.selectNextCompletion': wrapCommand(selectNextCompletion),
+  'SearchExtensions.selectPreviousCompletion': wrapCommand(selectPreviousCompletion),
   'SearchExtensions.setDeltaY': wrapCommand(setDeltaY),
+  'SearchExtensions.setExtensionStatus': wrapCommand(setExtensionStatus),
   'SearchExtensions.terminate': terminate,
   'SearchExtensions.toggleSuggest': wrapCommand(toggleSuggest)
 };

package/package.json

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