@lvce-editor/static-server 0.48.2 → 0.49.0

package/static/{61a783e → afbdbf5}/packages/extension-search-view-worker/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';
@@ -965,124 +935,68 @@ const RE_PARAM = /@\w+/g;
 
 // TODO test sorting and filtering
 const parseValue = value => {
-  const parameters = Object.create(null);
+  let installed = false;
+  let enabled = false;
+  let disabled = false;
+  let builtin = false;
+  let sort = '';
+  let id = '';
+  let outdated = false;
   // TODO this is not very functional code (assignment)
   const replaced = value.replaceAll(RE_PARAM, (match, by, order) => {
     if (match.startsWith(Installed)) {
-      parameters.installed = true;
+      installed = true;
     }
     if (match.startsWith(Enabled)) {
-      parameters.enabled = true;
+      enabled = true;
     }
     if (match.startsWith(Disabled)) {
-      parameters.disabled = true;
+      disabled = true;
     }
     if (match.startsWith(Builtin)) {
-      parameters.builtin = true;
+      builtin = true;
     }
     if (match.startsWith(Sort)) {
       // TODO
-      parameters.sort = 'installs';
+      sort = 'installs';
     }
     if (match.startsWith(Id)) {
       // TODO
-      parameters.id = 'abc';
+      id = 'abc';
     }
     if (match.startsWith(Outdated)) {
-      parameters.outdated = true;
+      outdated = true;
     }
     return '';
   });
-  const isLocal = parameters.enabled || parameters.builtin || parameters.disabled || parameters.outdated || parameters.installed;
+  const isLocal = enabled || builtin || disabled || outdated || installed;
   return {
     query: replaced,
-    ...parameters,
+    enabled,
+    builtin,
+    disabled,
+    outdated,
+    installed,
+    id,
+    sort,
     isLocal
   };
 };
 
-const assetDir = '';
-
-const getRemoteUrl = (extension, platform) => {
-  if (platform === Remote || platform === Electron) {
-    if (extension.builtin) {
-      return `${assetDir}/extensions/${extension.id}/${extension.icon}`;
-    }
-    return `/remote/${extension.path}/${extension.icon}`; // TODO support windows paths
-  }
-  return '';
-};
-
-const ExtensionDefaultIcon = `${assetDir}/icons/extensionDefaultIcon.png`;
-const ExtensionLanguageBasics = `${assetDir}/icons/language-icon.svg`;
-const ExtensionTheme = `${assetDir}/icons/theme-icon.png`;
-
-const isLanguageBasicsExtension = extension => {
-  return extension.name && extension.name.startsWith('Language Basics');
-};
-const isThemeExtension = extension => {
-  return extension.name && extension.name.endsWith(' Theme');
-};
-const getIcon = (extension, platform) => {
-  if (!extension) {
-    return ExtensionDefaultIcon;
-  }
-  if (!extension.path || !extension.icon) {
-    if (isLanguageBasicsExtension(extension)) {
-      return ExtensionLanguageBasics;
-    }
-    if (isThemeExtension(extension)) {
-      return ExtensionTheme;
-    }
-    return ExtensionDefaultIcon;
-  }
-  return getRemoteUrl(extension, platform);
-};
-const getName = extension => {
-  if (extension && extension.name) {
-    return extension.name;
-  }
-  if (extension && extension.id) {
-    return extension.id;
-  }
-  return 'n/a';
-};
-const getDescription = extension => {
-  if (!extension || !extension.description) {
-    return 'n/a';
-  }
-  return extension.description;
-};
-const getId = extension => {
-  if (!extension || !extension.id) {
-    return 'n/a';
-  }
-  return extension.id;
+const matchesName = (extension, query) => {
+  const extensionNameLower = extension.name.toLowerCase();
+  return extensionNameLower.includes(query);
 };
-
-const RE_PUBLISHER = /^[a-z\d-]+/;
-
-// TODO handle case when extension is of type number|array|null|string
-const getPublisher = extension => {
-  if (!extension || !extension.id) {
-    return 'n/a';
-  }
-  // TODO handle case when id is not of type string -> should not crash application
-  const match = extension.id.match(RE_PUBLISHER);
-  if (!match) {
-    return 'n/a';
-  }
-  return match[0];
+const matchesId = (extension, query) => {
+  const extensionIdLower = extension.id.toLowerCase();
+  return extensionIdLower.includes(query);
 };
-
 const matchesParsedValue = (extension, parsedValue) => {
-  if (extension && typeof extension.name === 'string') {
-    const extensionNameLower = extension.name.toLowerCase();
-    return extensionNameLower.includes(parsedValue.query);
+  if (extension.name) {
+    return matchesName(extension, parsedValue.query);
   }
-  if (extension && typeof extension.id === 'string') {
-    const extensionIdLower = extension.id.toLowerCase();
-    return extensionIdLower.includes(parsedValue.query);
+  if (extension.id) {
+    return matchesId(extension, parsedValue.query);
   }
   return false;
 };
@@ -1090,6 +1004,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,27 +1019,21 @@ const sortExtensions = extensions => {
   return toSorted(extensions, compareExtension);
 };
 
-const getExtensions = async (extensions, parsedValue, platform) => {
+const getExtensions = async (extensions, parsedValue) => {
   const filteredExtensions = [];
   for (const extension of extensions) {
     if (matchesParsedValue(extension, parsedValue)) {
-      filteredExtensions.push({
-        name: getName(extension),
-        id: getId(extension),
-        publisher: getPublisher(extension),
-        icon: getIcon(extension, platform),
-        description: getDescription(extension)
-      });
+      filteredExtensions.push(extension);
     }
   }
   const sortedExtensions = sortExtensions(filteredExtensions);
   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);
     return filteredExtensions;
   } catch (error) {
     throw new VError(error, 'Failed to search for extensions');
@@ -1134,11 +1048,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 +1069,7 @@ const handleInput = async (state, value) => {
         placeholder: searchExtensionsInMarketPlace()
       };
     }
-    // @ts-ignore
-    const listHeight = getListHeight$1(state);
+    const listHeight = getListHeight(items.length, itemHeight, height);
     const total = items.length;
     const contentHeight = total * itemHeight;
     const scrollBarHeight = getScrollBarSize(height, contentHeight, minimumSliderSize);
@@ -1192,8 +1106,8 @@ const clearSearchResults = state => {
   return handleInput(state, '');
 };
 
-const closeSuggest = () => {
-  // TODO
+const closeSuggest = state => {
+  return state;
 };
 
 const states = Object.create(null);
@@ -1207,47 +1121,70 @@ const set$1 = (uid, oldState, newState) => {
   };
 };
 
-const create = (id, uri, x, y, width, height, platform) => {
+const create = (id, uri, x, y, width, height, platform, assetDir) => {
   const state = {
-    searchValue: '',
-    minLineY: 0,
-    maxLineY: 0,
-    itemHeight: 0,
-    items: [],
-    height,
-    message: '',
     allExtensions: [],
-    placeholder: '',
-    platform,
+    assetDir,
+    deltaY: 0,
     finalDeltaY: 0,
     focusedIndex: 0,
+    handleOffset: 0,
+    headerHeight: 41,
+    height,
+    itemHeight: 72,
+    items: [],
+    maxLineY: 0,
+    message: '',
     minimumSliderSize: 0,
-    deltaY: 0,
-    headerHeight: 0,
+    minLineY: 0,
+    negativeMargin: 0,
+    placeholder: '',
+    platform,
+    scrollBarActive: false,
     scrollBarHeight: 0,
-    width,
+    searchValue: '',
     size: 0,
-    negativeMargin: 0,
-    scrollBarActive: false
+    width,
+    x,
+    y,
+    focused: false,
+    inputSource: 0
   };
   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$5 = (oldState, newState) => {
   return true;
 };
 
+const diffType$3 = RenderHeader;
+const isEqual$4 = (oldState, newState) => {
+  return oldState.placeholder === newState.placeholder;
+};
+
+const diffType$2 = RenderItems;
+const isEqual$3 = (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$2 = (oldState, newState) => {
+  return oldState.message === newState.message;
+};
+
 const diffType = RenderScrollBar;
-const isEqual = (oldState, newState) => {
+const isEqual$1 = (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$5, isEqual$1, isEqual$2, isEqual$4, isEqual$3];
+const numbers = [diffType$4, diffType, diffType$1, diffType$3, diffType$2];
 
 const diff = (oldState, newState) => {
   const diffResult = [];
@@ -1325,7 +1262,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 = 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 = 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,18 +1330,24 @@ 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: ''
   }];
 };
 
+const commandIds = ['clearSearchResults', 'closeSuggest', 'focusFirst', 'focusLast', 'focusNext', 'focusNextPage', 'focusPrevious', 'focusPreviousPage', 'handleBlur', 'handleClick', 'handleContextMenu', 'handleDisable', 'handleFocus', 'handleInput', 'handleInstall', 'handleScrollBarCaptureLost', 'handleScrollBarClick', 'handleScrollBarMove', 'handleUninstall', 'handleWheel', 'openSuggest', 'render', 'saveState', 'scrollDown', 'selectIndex', 'setDeltaY', 'toggleSuggest', 'handleScrollBarThumbPointerMove'];
+
+const getCommandIds = () => {
+  return commandIds;
+};
+
 const Enter = 3;
 const Space = 9;
 const PageUp = 10;
@@ -1403,8 +1405,8 @@ const getKeyBindings = () => {
   }];
 };
 
-const handleBlur = () => {
-  // TODO
+const handleBlur = state => {
+  return state;
 };
 
 const RendererWorker = 1;
@@ -1439,6 +1441,44 @@ const handleClick = async (state, index) => {
   return focusIndex(state, actualIndex);
 };
 
+const getListIndex = (eventX, eventY, x, y, deltaY, itemHeight) => {
+  const relativeY = eventY - y + deltaY;
+  const index = Math.floor(relativeY / itemHeight);
+  return index;
+};
+
+const selectIndex = (state, index) => {
+  return {
+    ...state,
+    focusedIndex: index
+  };
+};
+
+const handleClickAt = async (state, eventX, eventY) => {
+  const {
+    x,
+    y,
+    itemHeight,
+    deltaY
+  } = state;
+  const index = getListIndex(eventX, eventY, x, y, deltaY, itemHeight);
+  return selectIndex(state, index);
+};
+
+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);
@@ -1455,27 +1495,178 @@ const handleContextMenu = async (state, button, x, y) => {
 };
 
 const handleDisable = (state, id) => {
+  return state;
   // TODO
 };
 
 const handleEnable = (state, id) => {
-  // TODO
+  return state;
 };
 
-const handleFocus = () => {
-  // TODO
+const setFocus = async focusId => {
+  await invoke('Focus.setFocus', focusId);
+};
+
+const handleFocus = async state => {
+  await setFocus(FocusExtensions);
+  return state;
 };
 
 // TODO show error / warning  when installment fails / times out
 const handleInstall = async (state, id) => {
+  return state;
   // TODO
 };
 
-const getAllExtensions = async platform => {
+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) => {
+  return state;
+};
+
+const handleWheel = (state, deltaMode, deltaY) => {
+  number(deltaMode);
+  number(deltaY);
+  return setDeltaY(state, state.deltaY + deltaY);
+};
+
+const Web = 1;
+const Electron = 2;
+const Remote = 3;
+
+const getAllExtensions$1 = async platform => {
   if (platform === Web) {
     return [];
   }
-  return [];
+  return invoke('ExtensionManagement.getAllExtensions');
+};
+
+const getAllExtensions = platform => {
+  return getAllExtensions$1(platform);
 };
 
 const Small = 1;
@@ -1492,12 +1683,113 @@ const getViewletSize = width => {
   return Large;
 };
 
+const User = 1;
+const Script = 2;
+
+const getRemoteUrl = (extension, platform, assetDir) => {
+  if (platform === Remote || platform === Electron) {
+    if (extension.builtin) {
+      return `${assetDir}/extensions/${extension.id}/${extension.icon}`;
+    }
+    return `/remote/${extension.path}/${extension.icon}`; // TODO support windows paths
+  }
+  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 extension.name && extension.name.startsWith('Language Basics');
+};
+const isThemeExtension = extension => {
+  return extension.name && extension.name.endsWith(' Theme');
+};
+const getIcon = (extension, platform, assetDir) => {
+  if (!extension) {
+    return getExtensionDefaultIcon(assetDir);
+  }
+  if (!extension.path || !extension.icon) {
+    if (isLanguageBasicsExtension(extension)) {
+      return getExtensionLanguageBasicsIcon(assetDir);
+    }
+    if (isThemeExtension(extension)) {
+      return getExtensionThemeIcon(assetDir);
+    }
+    return getExtensionDefaultIcon(assetDir);
+  }
+  return getRemoteUrl(extension, platform, assetDir);
+};
+const getName = extension => {
+  if (extension && extension.name) {
+    return extension.name;
+  }
+  if (extension && extension.id) {
+    return extension.id;
+  }
+  return 'n/a';
+};
+const getDescription = extension => {
+  if (!extension || !extension.description) {
+    return 'n/a';
+  }
+  return extension.description;
+};
+const getId = extension => {
+  if (!extension || !extension.id) {
+    return 'n/a';
+  }
+  return extension.id;
+};
+
+const RE_PUBLISHER = /^[a-z\d-]+/;
+
+// TODO handle case when extension is of type number|array|null|string
+const getPublisher = extension => {
+  if (!extension || !extension.id) {
+    return 'n/a';
+  }
+  // TODO handle case when id is not of type string -> should not crash application
+  const match = extension.id.match(RE_PUBLISHER);
+  if (!match) {
+    return 'n/a';
+  }
+  return match[0];
+};
+
+const normalizeExtension$1 = (extension, platform, assetDir) => {
+  return {
+    id: getId(extension),
+    name: getName(extension),
+    description: getDescription(extension),
+    uri: '',
+    publisher: getPublisher(extension),
+    icon: getIcon(extension, platform, assetDir)
+  };
+};
+
+const normalizeExtension = (extensions, platform, assetDir) => {
+  const normalized = [];
+  for (const extension of extensions) {
+    normalized.push(normalizeExtension$1(extension, platform, assetDir));
+  }
+  return normalized;
+};
+
 const getSavedValue = savedState => {
   if (savedState && typeof savedState === 'object' && 'searchValue' in savedState && typeof savedState.searchValue === 'string') {
     return savedState.searchValue;
   }
   return '';
 };
+
 const restoreState = savedState => {
   const searchValue = getSavedValue(savedState);
   return {
@@ -1511,7 +1803,8 @@ const loadContent = async (uid, savedState) => {
   } = get$1(uid);
   const {
     width,
-    platform
+    platform,
+    assetDir
   } = newState;
   const {
     searchValue
@@ -1519,18 +1812,25 @@ const loadContent = async (uid, savedState) => {
   // TODO just get local extensions on demand (not when query string is already different)
   const allExtensions = await getAllExtensions(platform);
   const size = getViewletSize(width);
+  const normalized = normalizeExtension(allExtensions, platform, assetDir);
   const updatedState = await handleInput({
     ...newState,
-    allExtensions,
-    size
+    allExtensions: normalized,
+    size,
+    inputSource: Script
   }, searchValue);
   set$1(uid, newState, updatedState);
 };
 
-const openSuggest = () => {
-  // TODO
+const openSuggest = state => {
+  return state;
+};
+
+const isEqual = (oldState, newState) => {
+  return newState.inputSource === User || oldState.searchValue === newState.searchValue;
 };
 
+const Actions = 'Actions';
 const ExtensionActions = 'ExtensionActions';
 const ExtensionActive = 'ExtensionActive';
 const ExtensionHeader = 'ExtensionHeader';
@@ -1539,8 +1839,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 +1855,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 +1869,7 @@ const getSearchFieldButtonVirtualDom = button => {
     title
   } = button;
   return [{
-    type: Div,
+    type: Div$1,
     className: `SearchFieldButton ${checked ? 'SearchFieldButtonChecked' : ''}`,
     title,
     role: CheckBox,
@@ -1574,7 +1877,7 @@ const getSearchFieldButtonVirtualDom = button => {
     tabIndex: 0,
     childCount: 1
   }, {
-    type: Div,
+    type: Div$1,
     className: `MaskIcon ${icon}`,
     childCount: 0
   }];
@@ -1582,12 +1885,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 +1901,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 +1919,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 +1947,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 +2083,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 +2119,7 @@ const getExtensionListItemVirtualDom = extension => {
     focused
   } = extension;
   const dom = [{
-    type: Div,
+    type: Div$1,
     role: ListItem,
     ariaRoleDescription: Extension,
     className: ExtensionListItem,
@@ -1683,13 +2128,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 +2147,7 @@ const getExtensionListItemVirtualDom = extension => {
 
 const getExtensionsListVirtualDom = visibleExtensions => {
   const dom = [{
-    type: Div,
+    type: Div$1,
     className: ListItems,
     tabIndex: 0,
     ariaLabel: extensions(),
@@ -1723,12 +2168,24 @@ const getExtensionsVirtualDom = visibleExtensions => {
 };
 
 const getVisibleItem = (item, setSize, itemHeight, minLineY, relative, i, focusedIndex) => {
+  // TODO use normal parameters
+  const {
+    publisher,
+    description,
+    icon,
+    id,
+    name
+  } = item;
   return {
-    ...item,
     setSize,
     posInSet: i + 1,
     top: (i - minLineY) * itemHeight - relative,
-    focused: i === focusedIndex
+    focused: i === focusedIndex,
+    publisher,
+    description,
+    icon,
+    id,
+    name
   };
 };
 
@@ -1751,98 +2208,75 @@ 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$3,
   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$1,
   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$2,
   apply(oldState, newState) {
-    return [/* method */SetMessage, /* message */newState.message];
+    return renderMessage$1(newState);
   }
 };
 const renderSearchValue = {
-  isEqual(oldState, newState) {
-    return oldState.searchValue === newState.searchValue;
-  },
+  isEqual: isEqual,
   apply(oldState, newState) {
     return [/* method */SetSearchValue, oldState.searchValue, newState.searchValue];
   }
 };
 const renderHeader = {
-  isEqual(oldState, newState) {
-    return oldState.placeholder === newState.placeholder;
-  },
+  isEqual: isEqual$4,
   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];
-  }
-};
-const render = [renderScrollBar, renderMessage, renderExtensions, renderSearchValue, renderHeader];
+    return renderHeader$1(newState);
+  }
+};
+const render = [renderScrollBar, renderMessage, renderExtensions, renderHeader, renderSearchValue];
 const doRender = (oldState, newState) => {
   const commands = [];
   for (const item of render) {
@@ -1853,74 +2287,165 @@ const doRender = (oldState, newState) => {
   return commands;
 };
 
-const saveState = state => {
+const render2 = uid => {
   const {
-    searchValue
-  } = state;
+    oldState,
+    newState
+  } = get$1(uid);
+  return doRender(oldState, newState);
+};
+
+const getIconVirtualDom = (icon, type = Div$1) => {
   return {
-    searchValue
+    type,
+    className: mergeClassNames(MaskIcon, `MaskIcon${icon}`),
+    role: None,
+    childCount: 0
   };
 };
 
-const clamp = (num, min, max) => {
-  number(num);
-  number(min);
-  number(max);
-  return Math.min(Math.max(num, min), max);
+const getActionButtonVirtualDom = action => {
+  const {
+    id,
+    icon,
+    command
+  } = action;
+  return [{
+    type: Button$1,
+    className: IconButton,
+    title: id,
+    'data-command': command,
+    childCount: 1
+  }, getIconVirtualDom(icon)];
 };
 
-const setDeltaY = (state, value) => {
-  object(state);
-  number(value);
+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 {
-    itemHeight,
-    finalDeltaY,
-    deltaY,
-    height,
-    headerHeight
-  } = state;
-  const listHeight = height - headerHeight;
-  const newDeltaY = clamp(value, 0, finalDeltaY);
-  if (deltaY === newDeltaY) {
-    return state;
+    oldState,
+    newState
+  } = get$1(uid);
+  if (oldState === newState) {
+    return [];
   }
-  // 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 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 = uid => {
+  const {
+    newState
+  } = get$1(uid);
+  const {
+    searchValue
+  } = newState;
   return {
-    ...state,
-    deltaY: newDeltaY,
-    minLineY,
-    maxLineY
+    searchValue
   };
 };
 
-const toggleSuggest = () => {
-  // TODO
+const scrollDown = state => {
+  const {
+    finalDeltaY,
+    deltaY
+  } = state;
+  const newDeltaY = Math.min(deltaY + 20, finalDeltaY);
+  return setDeltaY(state, newDeltaY);
+};
+
+const terminate = () => {
+  globalThis.close();
+};
+
+const toggleSuggest = state => {
+  return state;
+};
+
+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.terminate': terminate,
+  'SearchExtensions.focusIndex': wrapCommand(focusIndex),
+  'SearchExtensions.focusLast': wrapCommand(focusLast),
+  'SearchExtensions.focusNext': wrapCommand(focusNext),
+  'SearchExtensions.focusNextPage': wrapCommand(focusNextPage),
+  'SearchExtensions.focusPreviousPage': wrapCommand(focusPreviousPage),
   'SearchExtensions.getActions': getActions,
+  'SearchExtensions.getCommandIds': getCommandIds,
   '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.handleClick': wrapCommand(handleClick),
+  'SearchExtensions.handleClickAt': wrapCommand(handleClickAt),
+  'SearchExtensions.handleClickCurrent': wrapCommand(handleClickCurrent),
+  'SearchExtensions.handleClickCurrentButKeepFocus': wrapCommand(handleClickCurrentButKeepFocus),
+  'SearchExtensions.handleContextMenu': wrapCommand(handleContextMenu),
+  'SearchExtensions.handleDisable': wrapCommand(handleDisable),
+  'SearchExtensions.handleEnable': wrapCommand(handleEnable),
+  'SearchExtensions.handleFocus': wrapCommand(handleFocus),
+  'SearchExtensions.handleInput': wrapCommand(handleInput),
+  'SearchExtensions.handleInstall': wrapCommand(handleInstall),
+  'SearchExtensions.handleScrollBarCaptureLost': wrapCommand(handleScrollBarCaptureLost),
+  'SearchExtensions.handleScrollBarClick': wrapCommand(handleScrollBarClick),
+  'SearchExtensions.handleScrollBarMove': wrapCommand(handleScrollBarMove),
+  'SearchExtensions.handleScrollBarThumbPointerMove': wrapCommand(handleScrollBarMove),
+  'SearchExtensions.handleUninstall': wrapCommand(handleUninstall),
+  'SearchExtensions.handleWheel': wrapCommand(handleWheel),
   'SearchExtensions.loadContent': loadContent,
-  'SearchExtensions.openSuggest': openSuggest,
+  'SearchExtensions.openSuggest': wrapCommand(openSuggest),
   'SearchExtensions.render': doRender,
+  'SearchExtensions.render2': render2,
+  'SearchExtensions.renderActions': renderActions,
+  'SearchExtensions.renderEventListeners': renderEventListeners,
   '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 () => {