@lvce-editor/extension-search-view 2.2.0 → 2.4.0

package/dist/extensionSearchViewWorkerMain.js

@@ -898,7 +898,7 @@ const getFinalDeltaY = (height, itemHeight, itemsLength) => {
   return finalDeltaY;
 };
 
-const getListHeight$1 = (itemsLength, itemHeight, maxHeight) => {
+const getListHeight = (itemsLength, itemHeight, maxHeight) => {
   number(itemsLength);
   number(itemHeight);
   number(maxHeight);
@@ -923,36 +923,6 @@ const getScrollBarSize = (size, contentSize, minimumSliderSize) => {
   return Math.max(Math.round(size ** 2 / contentSize), minimumSliderSize);
 };
 
-const Web = 1;
-const Electron = 2;
-const Remote = 3;
-const Test = 4;
-
-// TODO treeshake this function out
-
-/**
- * @returns {number}
- */
-const getPlatform = () => {
-  // @ts-ignore
-  if (typeof PLATFORM !== 'undefined') {
-    // @ts-ignore
-    return PLATFORM;
-  }
-  if (typeof process !== 'undefined' && process.env.NODE_ENV === 'test') {
-    return Test;
-  }
-  // TODO find a better way to pass runtime environment
-  if (typeof name !== 'undefined' && name.endsWith('(Electron)')) {
-    return Electron;
-  }
-  if (typeof name !== 'undefined' && name.endsWith('(Web)')) {
-    return Web;
-  }
-  return Remote;
-};
-const platform = getPlatform();
-
 const Installed = '@installed';
 const Enabled = '@enabled';
 const Disabled = '@disabled';
@@ -1001,9 +971,11 @@ const parseValue = value => {
   };
 };
 
-const assetDir = '';
+const Web = 1;
+const Electron = 2;
+const Remote = 3;
 
-const getRemoteUrl = (extension, platform) => {
+const getRemoteUrl = (extension, platform, assetDir) => {
   if (platform === Remote || platform === Electron) {
     if (extension.builtin) {
       return `${assetDir}/extensions/${extension.id}/${extension.icon}`;
@@ -1013,9 +985,15 @@ const getRemoteUrl = (extension, platform) => {
   return '';
 };
 
-const ExtensionDefaultIcon = `${assetDir}/icons/extensionDefaultIcon.png`;
-const ExtensionLanguageBasics = `${assetDir}/icons/language-icon.svg`;
-const ExtensionTheme = `${assetDir}/icons/theme-icon.png`;
+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 extension.name && extension.name.startsWith('Language Basics');
@@ -1023,20 +1001,20 @@ const isLanguageBasicsExtension = extension => {
 const isThemeExtension = extension => {
   return extension.name && extension.name.endsWith(' Theme');
 };
-const getIcon = (extension, platform) => {
+const getIcon = (extension, platform, assetDir) => {
   if (!extension) {
-    return ExtensionDefaultIcon;
+    return getExtensionDefaultIcon(assetDir);
   }
   if (!extension.path || !extension.icon) {
     if (isLanguageBasicsExtension(extension)) {
-      return ExtensionLanguageBasics;
+      return getExtensionLanguageBasicsIcon(assetDir);
     }
     if (isThemeExtension(extension)) {
-      return ExtensionTheme;
+      return getExtensionThemeIcon(assetDir);
     }
-    return ExtensionDefaultIcon;
+    return getExtensionDefaultIcon(assetDir);
   }
-  return getRemoteUrl(extension, platform);
+  return getRemoteUrl(extension, platform, assetDir);
 };
 const getName = extension => {
   if (extension && extension.name) {
@@ -1090,6 +1068,12 @@ const matchesParsedValue = (extension, parsedValue) => {
 const toSorted = (array, compare) => {
   return [...array].sort(compare);
 };
+const isLastIndex = (array, index) => {
+  return index === array.length - 1;
+};
+const lastIndex = array => {
+  return array.length - 1;
+};
 
 const compareExtension = (extensionA, extensionB) => {
   return extensionA.name.localeCompare(extensionB.name) || extensionA.id.localeCompare(extensionB.id);
@@ -1099,7 +1083,7 @@ const sortExtensions = extensions => {
   return toSorted(extensions, compareExtension);
 };
 
-const getExtensions = async (extensions, parsedValue, platform) => {
+const getExtensions = async (extensions, parsedValue, platform, assetDir = '') => {
   const filteredExtensions = [];
   for (const extension of extensions) {
     if (matchesParsedValue(extension, parsedValue)) {
@@ -1107,7 +1091,7 @@ const getExtensions = async (extensions, parsedValue, platform) => {
         name: getName(extension),
         id: getId(extension),
         publisher: getPublisher(extension),
-        icon: getIcon(extension, platform),
+        icon: getIcon(extension, platform, assetDir),
         description: getDescription(extension)
       });
     }
@@ -1116,10 +1100,10 @@ const getExtensions = async (extensions, parsedValue, platform) => {
   return sortedExtensions;
 };
 
-const searchExtensions = async (extensions, value, platform$1) => {
+const searchExtensions = async (extensions, value, platform, assetDir) => {
   try {
     const parsedValue = parseValue(value);
-    const filteredExtensions = await getExtensions(extensions, parsedValue, platform$1 || platform);
+    const filteredExtensions = await getExtensions(extensions, parsedValue, platform, assetDir);
     return filteredExtensions;
   } catch (error) {
     throw new VError(error, 'Failed to search for extensions');
@@ -1134,11 +1118,12 @@ const handleInput = async (state, value) => {
       itemHeight,
       minimumSliderSize,
       height,
-      platform: platform$1
+      platform,
+      assetDir
     } = state;
     // TODO cancel ongoing requests
     // TODO handle errors
-    const items = await searchExtensions(allExtensions, value, platform$1 || platform);
+    const items = await searchExtensions(allExtensions, value, platform, assetDir);
     if (items.length === 0) {
       return {
         ...state,
@@ -1154,8 +1139,7 @@ const handleInput = async (state, value) => {
         placeholder: searchExtensionsInMarketPlace()
       };
     }
-    // @ts-ignore
-    const listHeight = getListHeight$1(state);
+    const listHeight = getListHeight(state.items.length, state.itemHeight, state.height);
     const total = items.length;
     const contentHeight = total * itemHeight;
     const scrollBarHeight = getScrollBarSize(height, contentHeight, minimumSliderSize);
@@ -1228,26 +1212,47 @@ const create = (id, uri, x, y, width, height, platform) => {
     width,
     size: 0,
     negativeMargin: 0,
-    scrollBarActive: false
+    scrollBarActive: false,
+    x,
+    y,
+    handleOffset: 0,
+    assetDir: ''
   };
   set$1(id, state, state);
 };
 
+const RenderHeader = 1;
 const RenderItems = 4;
 const RenderScrollBar = 5;
+const RenderMessage = 6;
 
-const diffType$1 = RenderItems;
-const isEqual$1 = (oldState, newState) => {
+const diffType$4 = RenderItems;
+const isEqual$4 = (oldState, newState) => {
   return true;
 };
 
+const diffType$3 = RenderHeader;
+const isEqual$3 = (oldState, newState) => {
+  return oldState.placeholder === newState.placeholder;
+};
+
+const diffType$2 = RenderItems;
+const isEqual$2 = (oldState, newState) => {
+  return oldState.items === newState.items && oldState.minLineY === newState.minLineY && oldState.maxLineY === newState.maxLineY && oldState.deltaY === newState.deltaY && oldState.focusedIndex === newState.focusedIndex;
+};
+
+const diffType$1 = RenderMessage;
+const isEqual$1 = (oldState, newState) => {
+  return oldState.message === newState.message;
+};
+
 const diffType = RenderScrollBar;
 const isEqual = (oldState, newState) => {
   return oldState.negativeMargin === newState.negativeMargin && oldState.deltaY === newState.deltaY && oldState.height === newState.height && oldState.finalDeltaY === newState.finalDeltaY && oldState.items.length === newState.items.length && oldState.scrollBarActive === newState.scrollBarActive;
 };
 
-const modules = [isEqual$1, isEqual];
-const numbers = [diffType$1, diffType];
+const modules = [isEqual$4, isEqual, isEqual$1, isEqual$3, isEqual$2];
+const numbers = [diffType$4, diffType, diffType$1, diffType$3, diffType$2];
 
 const diff = (oldState, newState) => {
   const diffResult = [];
@@ -1325,7 +1330,66 @@ const focusIndex = (state, index) => {
   };
 };
 
-const Button = 1;
+const first = () => {
+  return 0;
+};
+const last = items => {
+  return items.length - 1;
+};
+const next = (items, index) => {
+  return (index + 1) % items.length;
+};
+
+const focusFirst = state => {
+  const firstIndex = first();
+  return focusIndex(state, firstIndex);
+};
+
+const focusLast = state => {
+  const {
+    items
+  } = state;
+  const lastIndex = last(items);
+  return focusIndex(state, lastIndex);
+};
+
+const focusNext = state => {
+  const {
+    focusedIndex,
+    items
+  } = state;
+  const nextIndex = next(items, focusedIndex);
+  return focusIndex(state, nextIndex);
+};
+
+const focusNextPage = async state => {
+  const {
+    focusedIndex,
+    items,
+    maxLineY,
+    minLineY
+  } = state;
+  if (isLastIndex(items, focusedIndex)) {
+    return state;
+  }
+  const indexNextPage = Math.min(maxLineY + (maxLineY - minLineY) - 2, lastIndex(items));
+  return focusIndex(state, indexNextPage);
+};
+
+const focusPreviousPage = async state => {
+  const {
+    focusedIndex,
+    minLineY,
+    maxLineY
+  } = state;
+  if (focusedIndex === 0 || focusedIndex === -1) {
+    return state;
+  }
+  const indexPreviousPage = Math.max(minLineY - (maxLineY - minLineY) + 1, 0);
+  return focusIndex(state, indexPreviousPage);
+};
+
+const Button$2 = 1;
 
 const ClearAll = 'ClearAll';
 const Filter = 'Filter';
@@ -1334,12 +1398,12 @@ const Ellipsis = 'Ellipsis';
 
 const getActions = () => {
   return [{
-    type: Button,
+    type: Button$2,
     id: refresh(),
     icon: Refresh,
     command: ''
   }, {
-    type: Button,
+    type: Button$2,
     id: viewsAndMoreActions(),
     icon: Ellipsis,
     command: ''
@@ -1439,6 +1503,20 @@ const handleClick = async (state, index) => {
   return focusIndex(state, actualIndex);
 };
 
+const handleClickCurrent = state => {
+  const {
+    focusedIndex
+  } = state;
+  return handleClick(state, focusedIndex);
+};
+
+const handleClickCurrentButKeepFocus = state => {
+  const {
+    focusedIndex
+  } = state;
+  return handleClick(state, focusedIndex);
+};
+
 const show = async (x, y, id) => {
   number(x);
   number(y);
@@ -1462,8 +1540,12 @@ const handleEnable = (state, id) => {
   // TODO
 };
 
-const handleFocus = () => {
-  // TODO
+const setFocus = async focusId => {
+  await invoke('Focus.setFocus', focusId);
+};
+
+const handleFocus = async () => {
+  await setFocus(FocusExtensions);
 };
 
 // TODO show error / warning  when installment fails / times out
@@ -1471,11 +1553,147 @@ const handleInstall = async (state, id) => {
   // TODO
 };
 
+const handleScrollBarCaptureLost = state => {
+  return {
+    ...state,
+    scrollBarActive: false
+  };
+};
+
+const getNewDeltaPercent = (height, scrollBarHeight, relativeY) => {
+  const halfScrollBarHeight = scrollBarHeight / 2;
+  if (relativeY <= halfScrollBarHeight) {
+    // clicked at top
+    return {
+      percent: 0,
+      handleOffset: relativeY
+    };
+  }
+  if (relativeY <= height - halfScrollBarHeight) {
+    // clicked in middle
+    return {
+      percent: (relativeY - halfScrollBarHeight) / (height - scrollBarHeight),
+      handleOffset: halfScrollBarHeight
+    };
+  }
+  // clicked at bottom
+  return {
+    percent: 1,
+    handleOffset: scrollBarHeight - height + relativeY
+  };
+};
+
+const getScrollBarOffset = (delta, finalDelta, size, scrollBarSize) => {
+  const scrollBarOffset = delta / finalDelta * (size - scrollBarSize);
+  return scrollBarOffset;
+};
+const getScrollBarY = getScrollBarOffset;
+
+const clamp = (num, min, max) => {
+  number(num);
+  number(min);
+  number(max);
+  return Math.min(Math.max(num, min), max);
+};
+
+const setDeltaY = (state, value) => {
+  object(state);
+  number(value);
+  const {
+    itemHeight,
+    finalDeltaY,
+    deltaY,
+    height,
+    headerHeight
+  } = 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 maxLineY = minLineY + getNumberOfVisibleItems(listHeight, itemHeight);
+  return {
+    ...state,
+    deltaY: newDeltaY,
+    minLineY,
+    maxLineY
+  };
+};
+
+const handleScrollBarClick = (state, eventY) => {
+  const {
+    y,
+    deltaY,
+    headerHeight,
+    finalDeltaY,
+    scrollBarHeight,
+    height
+  } = state;
+  const contentHeight = height - headerHeight;
+  const relativeY = eventY - y - headerHeight;
+  const currentScrollBarY = getScrollBarY(deltaY, finalDeltaY, contentHeight, scrollBarHeight);
+  const diff = relativeY - currentScrollBarY;
+  if (diff >= 0 && diff < scrollBarHeight) {
+    return {
+      ...state,
+      handleOffset: diff,
+      scrollBarActive: true
+    };
+  }
+  const {
+    percent,
+    handleOffset
+  } = 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 {
+    y,
+    headerHeight,
+    handleOffset,
+    finalDeltaY,
+    height,
+    scrollBarHeight
+  } = 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);
+};
+
+// TODO show error / warning  when installment fails / times out
+const handleUninstall = async (state, id) => {
+  // TODO
+};
+
+const handleWheel = (state, deltaMode, deltaY) => {
+  number(deltaMode);
+  number(deltaY);
+  return setDeltaY(state, state.deltaY + deltaY);
+};
+
 const getAllExtensions = async platform => {
   if (platform === Web) {
     return [];
   }
-  return [];
+  return invoke('ExtensionManagement.getAllExtensions');
 };
 
 const Small = 1;
@@ -1531,6 +1749,7 @@ const openSuggest = () => {
   // TODO
 };
 
+const Actions = 'Actions';
 const ExtensionActions = 'ExtensionActions';
 const ExtensionActive = 'ExtensionActive';
 const ExtensionHeader = 'ExtensionHeader';
@@ -1539,8 +1758,10 @@ const ExtensionListItemAuthorName = 'ExtensionListItemAuthorName';
 const ExtensionListItemDescription = 'ExtensionListItemDescription';
 const ExtensionListItemDetail = 'ExtensionListItemDetail';
 const ExtensionListItemFooter = 'ExtensionListItemFooter';
+const MaskIcon = 'MaskIcon';
 const ExtensionListItemIcon = 'ExtensionListItemIcon';
 const ExtensionListItemName = 'ExtensionListItemName';
+const IconButton = 'IconButton';
 const ListItems = 'ListItems';
 const MultilineInputBox = 'MultilineInputBox';
 const ScrollBarThumb = 'ScrollBarThumb';
@@ -1553,11 +1774,12 @@ const CheckBox = 'checkbox';
 const List = 'list';
 const ListItem = 'listitem';
 const None = 'none';
+const ToolBar = 'toolbar';
 
-const Div = 4;
-const Text = 12;
-const Img = 17;
-const TextArea = 62;
+const Div$1 = 4;
+const Img$1 = 17;
+const TextArea$1 = 62;
+const Button$1 = 1;
 
 const getSearchFieldButtonVirtualDom = button => {
   const {
@@ -1566,7 +1788,7 @@ const getSearchFieldButtonVirtualDom = button => {
     title
   } = button;
   return [{
-    type: Div,
+    type: Div$1,
     className: `SearchFieldButton ${checked ? 'SearchFieldButtonChecked' : ''}`,
     title,
     role: CheckBox,
@@ -1574,7 +1796,7 @@ const getSearchFieldButtonVirtualDom = button => {
     tabIndex: 0,
     childCount: 1
   }, {
-    type: Div,
+    type: Div$1,
     className: `MaskIcon ${icon}`,
     childCount: 0
   }];
@@ -1582,12 +1804,12 @@ const getSearchFieldButtonVirtualDom = button => {
 
 const getSearchFieldVirtualDom = (name, placeholder, onInput, insideButtons, outsideButtons, onFocus = '') => {
   const dom = [{
-    type: Div,
+    type: Div$1,
     className: SearchField,
     role: None,
     childCount: 2
   }, {
-    type: TextArea,
+    type: TextArea$1,
     className: MultilineInputBox,
     spellcheck: false,
     autocapitalize: 'off',
@@ -1598,13 +1820,13 @@ const getSearchFieldVirtualDom = (name, placeholder, onInput, insideButtons, out
     onFocus,
     childCount: 0
   }, {
-    type: Div,
+    type: Div$1,
     className: SearchFieldButtons,
     childCount: insideButtons.length
   }, ...insideButtons.flatMap(getSearchFieldButtonVirtualDom)];
   if (outsideButtons.length > 0) {
     dom.unshift({
-      type: Div,
+      type: Div$1,
       className: SearchFieldContainer,
       role: None,
       childCount: 1 + outsideButtons.length
@@ -1616,12 +1838,27 @@ const getSearchFieldVirtualDom = (name, placeholder, onInput, insideButtons, out
 
 const getExtensionHeaderVirtualDom = (placeholder, actions) => {
   return [{
-    type: Div,
+    type: Div$1,
     className: ExtensionHeader,
     childCount: 1
   }, ...getSearchFieldVirtualDom('extensions', placeholder, 'handleExtensionsInput', actions, [])];
 };
 
+const renderHeader$1 = newState => {
+  const actions = [{
+    type: Button$2,
+    title: clearExtensionSearchResults(),
+    icon: `MaskIcon${ClearAll}`,
+    command: 'Extensions.clearSearchResults'
+  }, {
+    type: Button$2,
+    title: filter(),
+    icon: `MaskIcon${Filter}`
+  }];
+  const dom = getExtensionHeaderVirtualDom(newState.placeholder, actions);
+  return ['setHeaderDom', dom];
+};
+
 const HandleContextMenu = 'handleContextMenu';
 const HandlePointerDown = 'handlePointerDown';
 const HandleTouchStart = 'handleTouchStart';
@@ -1629,7 +1866,134 @@ const HandleWheel = 'handleWheel';
 
 const Extension = 'Extension';
 
-const text = data => {
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+
+// src/parts/MergeClassNames/MergeClassNames.ts
+var mergeClassNames = (...classNames) => {
+  return classNames.filter(Boolean).join(" ");
+};
+
+// src/parts/VirtualDomElements/VirtualDomElements.ts
+var VirtualDomElements_exports = {};
+__export(VirtualDomElements_exports, {
+  A: () => A,
+  Abbr: () => Abbr,
+  Article: () => Article,
+  Aside: () => Aside,
+  Audio: () => Audio,
+  Br: () => Br,
+  Button: () => Button,
+  Cite: () => Cite,
+  Col: () => Col,
+  ColGroup: () => ColGroup,
+  Data: () => Data,
+  Dd: () => Dd,
+  Del: () => Del,
+  Div: () => Div,
+  Dl: () => Dl,
+  Figcaption: () => Figcaption,
+  Figure: () => Figure,
+  Footer: () => Footer,
+  H1: () => H1,
+  H2: () => H2,
+  H3: () => H3,
+  H4: () => H4,
+  H5: () => H5,
+  H6: () => H6,
+  Header: () => Header,
+  Hr: () => Hr,
+  I: () => I,
+  Img: () => Img,
+  Input: () => Input,
+  Ins: () => Ins,
+  Kbd: () => Kbd,
+  Li: () => Li,
+  Nav: () => Nav,
+  Ol: () => Ol,
+  Option: () => Option,
+  P: () => P,
+  Pre: () => Pre,
+  Root: () => Root,
+  Search: () => Search,
+  Section: () => Section,
+  Select: () => Select,
+  Span: () => Span,
+  TBody: () => TBody,
+  THead: () => THead,
+  Table: () => Table,
+  Td: () => Td,
+  Text: () => Text,
+  TextArea: () => TextArea,
+  Tfoot: () => Tfoot,
+  Th: () => Th,
+  Time: () => Time,
+  Tr: () => Tr,
+  Ul: () => Ul,
+  Video: () => Video
+});
+var Audio = 0;
+var Button = 1;
+var Col = 2;
+var ColGroup = 3;
+var Div = 4;
+var H1 = 5;
+var Input = 6;
+var Kbd = 7;
+var Span = 8;
+var Table = 9;
+var TBody = 10;
+var Td = 11;
+var Text = 12;
+var Th = 13;
+var THead = 14;
+var Tr = 15;
+var I = 16;
+var Img = 17;
+var Root = 0;
+var Ins = 20;
+var Del = 21;
+var H2 = 22;
+var H3 = 23;
+var H4 = 24;
+var H5 = 25;
+var H6 = 26;
+var Article = 27;
+var Aside = 28;
+var Footer = 29;
+var Header = 30;
+var Nav = 40;
+var Section = 41;
+var Search = 42;
+var Dd = 43;
+var Dl = 44;
+var Figcaption = 45;
+var Figure = 46;
+var Hr = 47;
+var Li = 48;
+var Ol = 49;
+var P = 50;
+var Pre = 51;
+var A = 53;
+var Abbr = 54;
+var Br = 55;
+var Cite = 56;
+var Data = 57;
+var Time = 58;
+var Tfoot = 59;
+var Ul = 60;
+var Video = 61;
+var TextArea = 62;
+var Select = 63;
+var Option = 64;
+
+// src/parts/Text/Text.ts
+var text = data => {
   return {
     type: Text,
     text: data,
@@ -1638,27 +2002,27 @@ const text = data => {
 };
 
 const listItemDetail = {
-  type: Div,
+  type: Div$1,
   className: ExtensionListItemDetail,
   childCount: 3
 };
 const listItemName = {
-  type: Div,
+  type: Div$1,
   className: ExtensionListItemName,
   childCount: 1
 };
 const listItemDescription = {
-  type: Div,
+  type: Div$1,
   className: ExtensionListItemDescription,
   childCount: 1
 };
 const listItemFooter = {
-  type: Div,
+  type: Div$1,
   className: ExtensionListItemFooter,
   childCount: 2
 };
 const listItemAuthorName = {
-  type: Div,
+  type: Div$1,
   className: ExtensionListItemAuthorName,
   childCount: 1
 };
@@ -1674,7 +2038,7 @@ const getExtensionListItemVirtualDom = extension => {
     focused
   } = extension;
   const dom = [{
-    type: Div,
+    type: Div$1,
     role: ListItem,
     ariaRoleDescription: Extension,
     className: ExtensionListItem,
@@ -1683,13 +2047,13 @@ const getExtensionListItemVirtualDom = extension => {
     top,
     childCount: 2
   }, {
-    type: Img,
+    type: Img$1,
     src: icon,
     className: ExtensionListItemIcon,
     role: None,
     childCount: 0
   }, listItemDetail, listItemName, text(name), listItemDescription, text(description), listItemFooter, listItemAuthorName, text(publisher), {
-    type: Div,
+    type: Div$1,
     className: ExtensionActions,
     childCount: 0
   }];
@@ -1702,7 +2066,7 @@ const getExtensionListItemVirtualDom = extension => {
 
 const getExtensionsListVirtualDom = visibleExtensions => {
   const dom = [{
-    type: Div,
+    type: Div$1,
     className: ListItems,
     tabIndex: 0,
     ariaLabel: extensions(),
@@ -1751,68 +2115,60 @@ const getVisible = state => {
   return visible;
 };
 
-const px = value => {
-  return `${value}px`;
-};
-const position = (x, y) => {
-  return `${x}px ${y}px`;
+const renderItems = newState => {
+  // TODO render extensions incrementally when scrolling
+  const visibleExtensions = getVisible(newState);
+  const dom = getExtensionsVirtualDom(visibleExtensions);
+  return ['setExtensionsDom', dom];
 };
 
 const SetMessage = 'setMessage';
 const SetScrollBar = 'setScrollBar';
 const SetSearchValue = 'setSearchValue';
 
-const getScrollBarOffset = (delta, finalDelta, size, scrollBarSize) => {
-  const scrollBarOffset = delta / finalDelta * (size - scrollBarSize);
-  return scrollBarOffset;
+const renderMessage$1 = newState => {
+  return [/* method */SetMessage, /* message */newState.message];
 };
-const getScrollBarY = getScrollBarOffset;
 
-const getListHeight = state => {
-  const {
-    height,
-    headerHeight
-  } = state;
-  return height - headerHeight;
+const px = value => {
+  return `${value}px`;
 };
+const position = (x, y) => {
+  return `${x}px ${y}px`;
+};
+
+const renderScrollBar$1 = newState => {
+  const listHeight = getListHeight(newState.items.length, newState.itemHeight, newState.height);
+  const total = newState.items.length;
+  const contentHeight = total * newState.itemHeight;
+  const scrollBarHeight = getScrollBarSize(listHeight, contentHeight, newState.minimumSliderSize);
+  const scrollBarY = getScrollBarY(newState.deltaY, newState.finalDeltaY, newState.height - newState.headerHeight, scrollBarHeight);
+  const roundedScrollBarY = Math.round(scrollBarY);
+  const heightString = px(scrollBarHeight);
+  const translateString = position(0, roundedScrollBarY);
+  let className = ScrollBarThumb;
+  if (newState.scrollBarActive) {
+    className += ' ' + ScrollBarThumbActive;
+  }
+  return [/* method */SetScrollBar, translateString, heightString, className];
+};
+
 const renderExtensions = {
-  isEqual(oldState, newState) {
-    return oldState.items === newState.items && oldState.minLineY === newState.minLineY && oldState.maxLineY === newState.maxLineY && oldState.deltaY === newState.deltaY && oldState.focusedIndex === newState.focusedIndex;
-  },
+  isEqual: isEqual$2,
   apply(oldState, newState) {
-    // TODO render extensions incrementally when scrolling
-    const visibleExtensions = getVisible(newState);
-    const dom = getExtensionsVirtualDom(visibleExtensions);
-    return ['setExtensionsDom', dom];
+    return renderItems(newState);
   }
 };
 const renderScrollBar = {
-  isEqual(oldState, newState) {
-    return oldState.negativeMargin === newState.negativeMargin && oldState.deltaY === newState.deltaY && oldState.height === newState.height && oldState.finalDeltaY === newState.finalDeltaY && oldState.items.length === newState.items.length && oldState.scrollBarActive === newState.scrollBarActive;
-  },
+  isEqual: isEqual,
   apply(oldState, newState) {
-    // @ts-ignore
-    const listHeight = getListHeight(newState);
-    const total = newState.items.length;
-    const contentHeight = total * newState.itemHeight;
-    const scrollBarHeight = getScrollBarSize(listHeight, contentHeight, newState.minimumSliderSize);
-    const scrollBarY = getScrollBarY(newState.deltaY, newState.finalDeltaY, newState.height - newState.headerHeight, scrollBarHeight);
-    const roundedScrollBarY = Math.round(scrollBarY);
-    const heightString = px(scrollBarHeight);
-    const translateString = position(0, roundedScrollBarY);
-    let className = ScrollBarThumb;
-    if (newState.scrollBarActive) {
-      className += ' ' + ScrollBarThumbActive;
-    }
-    return [/* method */SetScrollBar, translateString, heightString, className];
+    return renderScrollBar$1(newState);
   }
 };
 const renderMessage = {
-  isEqual(oldState, newState) {
-    return oldState.message === newState.message;
-  },
+  isEqual: isEqual$1,
   apply(oldState, newState) {
-    return [/* method */SetMessage, /* message */newState.message];
+    return renderMessage$1(newState);
   }
 };
 const renderSearchValue = {
@@ -1824,22 +2180,9 @@ const renderSearchValue = {
   }
 };
 const renderHeader = {
-  isEqual(oldState, newState) {
-    return oldState.placeholder === newState.placeholder;
-  },
+  isEqual: isEqual$3,
   apply(oldState, newState) {
-    const actions = [{
-      type: Button,
-      title: clearExtensionSearchResults(),
-      icon: `MaskIcon${ClearAll}`,
-      command: 'Extensions.clearSearchResults'
-    }, {
-      type: Button,
-      title: filter(),
-      icon: `MaskIcon${Filter}`
-    }];
-    const dom = getExtensionHeaderVirtualDom(newState.placeholder, actions);
-    return ['setHeaderDom', dom];
+    return renderHeader$1(newState);
   }
 };
 const render = [renderScrollBar, renderMessage, renderExtensions, renderSearchValue, renderHeader];
@@ -1853,6 +2196,73 @@ const doRender = (oldState, newState) => {
   return commands;
 };
 
+const getIconVirtualDom = (icon, type = Div$1) => {
+  return {
+    type,
+    className: mergeClassNames(MaskIcon, `MaskIcon${icon}`),
+    role: None,
+    childCount: 0
+  };
+};
+
+const getActionButtonVirtualDom = action => {
+  const {
+    id,
+    icon,
+    command
+  } = action;
+  return [{
+    type: Button$1,
+    className: IconButton,
+    title: id,
+    'data-command': command,
+    childCount: 1
+  }, getIconVirtualDom(icon)];
+};
+
+const getActionVirtualDom = action => {
+  switch (action.type) {
+    case Button$2:
+      return getActionButtonVirtualDom(action);
+    default:
+      return [];
+  }
+};
+
+const getActionsVirtualDom = actions => {
+  return [{
+    type: Div$1,
+    className: Actions,
+    role: ToolBar,
+    childCount: actions.length
+  }, ...actions.flatMap(getActionVirtualDom)];
+};
+
+const renderActions = uid => {
+  const {
+    oldState,
+    newState
+  } = get$1(uid);
+  if (oldState === newState) {
+    return [];
+  }
+  const actions = [];
+  const dom = getActionsVirtualDom(actions);
+  return dom;
+};
+
+const renderEventListeners = () => {
+  return [{
+    name: HandleContextMenu,
+    params: ['handleContextMenu', 'event.button', 'event.clientX', 'event.clientY'],
+    preventDefault: true
+  }, {
+    name: HandleWheel,
+    params: ['handleWheel', 'event.deltaMode', 'event.deltaY'],
+    passive: true
+  }];
+};
+
 const saveState = state => {
   const {
     searchValue
@@ -1862,36 +2272,19 @@ const saveState = state => {
   };
 };
 
-const clamp = (num, min, max) => {
-  number(num);
-  number(min);
-  number(max);
-  return Math.min(Math.max(num, min), max);
-};
-
-const setDeltaY = (state, value) => {
-  object(state);
-  number(value);
+const scrollDown = state => {
   const {
-    itemHeight,
     finalDeltaY,
-    deltaY,
-    height,
-    headerHeight
+    deltaY
   } = 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 maxLineY = minLineY + getNumberOfVisibleItems(listHeight, itemHeight);
+  const newDeltaY = Math.min(deltaY + 20, finalDeltaY);
+  return setDeltaY(state, newDeltaY);
+};
+
+const selectIndex = (state, index) => {
   return {
     ...state,
-    deltaY: newDeltaY,
-    minLineY,
-    maxLineY
+    focusedIndex: index
   };
 };
 
@@ -1899,28 +2292,55 @@ const toggleSuggest = () => {
   // TODO
 };
 
+const wrapCommand = fn => {
+  const wrapped = async (uid, ...args) => {
+    const {
+      newState
+    } = get$1(uid);
+    const newerState = await fn(newState, ...args);
+    set$1(uid, newState, newerState);
+  };
+  return wrapped;
+};
+
 const commandMap = {
-  'SearchExtensions.clearSearchResults': clearSearchResults,
-  'SearchExtensions.closeSuggest': closeSuggest,
+  'SearchExtensions.clearSearchResults': wrapCommand(clearSearchResults),
+  'SearchExtensions.closeSuggest': wrapCommand(closeSuggest),
   'SearchExtensions.create': create,
   'SearchExtensions.diff': diff,
-  'SearchExtensions.focusIndex': focusIndex,
+  'SearchExtensions.focusFirst': wrapCommand(focusFirst),
+  'SearchExtensions.focusIndex': wrapCommand(focusIndex),
+  'SearchExtensions.focusLast': wrapCommand(focusLast),
+  'SearchExtensions.focusNext': wrapCommand(focusNext),
+  'SearchExtensions.focusNextPage': wrapCommand(focusNextPage),
+  'SearchExtensions.focusPreviousPage': wrapCommand(focusPreviousPage),
   'SearchExtensions.getActions': getActions,
   'SearchExtensions.getKeyBindings': getKeyBindings,
-  'SearchExtensions.handleBlur': handleBlur,
-  'SearchExtensions.handleClick': handleClick,
-  'SearchExtensions.handleContextMenu': handleContextMenu,
-  'SearchExtensions.handleDisable': handleDisable,
-  'SearchExtensions.handleEnable': handleEnable,
-  'SearchExtensions.handleFocus': handleFocus,
-  'SearchExtensions.handleInstall': handleInstall,
+  'SearchExtensions.handleBlur': wrapCommand(handleBlur),
+  'SearchExtensions.renderEventListeners': renderEventListeners,
+  'SearchExtensions.handleClick': wrapCommand(handleClick),
+  'SearchExtensions.handleClickCurrent': wrapCommand(handleClickCurrent),
+  'SearchExtensions.handleClickCurrentButKeepFocus': wrapCommand(handleClickCurrentButKeepFocus),
+  'SearchExtensions.renderActions': renderActions,
+  'SearchExtensions.handleContextMenu': wrapCommand(handleContextMenu),
+  'SearchExtensions.handleDisable': wrapCommand(handleDisable),
+  'SearchExtensions.handleEnable': wrapCommand(handleEnable),
+  'SearchExtensions.handleFocus': wrapCommand(handleFocus),
+  'SearchExtensions.handleInstall': wrapCommand(handleInstall),
+  'SearchExtensions.handleScrollBarCaptureLos': wrapCommand(handleScrollBarCaptureLost),
+  'SearchExtensions.handleScrollBarClick': wrapCommand(handleScrollBarClick),
+  'SearchExtensions.handleScrollBarMove': wrapCommand(handleScrollBarMove),
+  'SearchExtensions.handleUninstall': wrapCommand(handleUninstall),
+  'SearchExtensions.handleWheel': wrapCommand(handleWheel),
   'SearchExtensions.loadContent': loadContent,
-  'SearchExtensions.openSuggest': openSuggest,
+  'SearchExtensions.openSuggest': wrapCommand(openSuggest),
   'SearchExtensions.render': doRender,
   'SearchExtensions.saveState': saveState,
+  'SearchExtensions.scrollDown': wrapCommand(scrollDown),
   'SearchExtensions.searchExtensions': searchExtensions,
-  'SearchExtensions.setDeltaY': setDeltaY,
-  'SearchExtensions.toggleSuggest': toggleSuggest
+  'SearchExtensions.selectIndex': wrapCommand(selectIndex),
+  'SearchExtensions.setDeltaY': wrapCommand(setDeltaY),
+  'SearchExtensions.toggleSuggest': wrapCommand(toggleSuggest)
 };
 
 const listen = async () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/extension-search-view",
-  "version": "2.2.0",
+  "version": "2.4.0",
   "description": "Extension Search View Worker",
   "license": "MIT",
   "author": "Lvce Editor",