@lvce-editor/static-server 0.56.8 → 0.56.10

package/static/{aba0976 → 0fd710b}/packages/settings-view/dist/settingsViewWorkerMain.js

@@ -937,7 +937,7 @@ const filterBySearch = (items, searchValue) => {
   const normalizedSearchValue = searchValue.toLowerCase().trim();
   return items.filter(item => item.heading.toLowerCase().includes(normalizedSearchValue));
 };
-const getFilteredItems = (items, tabs, searchValue = '', preferences = {}) => {
+const getFilteredItems = (items, tabs, searchValue = '', preferences) => {
   const tabFilteredItems = filterByTab(items, tabs);
   const itemsWithModifiedProperty = addModifiedProperty(tabFilteredItems, preferences);
   return filterBySearch(itemsWithModifiedProperty, searchValue);
@@ -946,19 +946,31 @@ const getFilteredItems = (items, tabs, searchValue = '', preferences = {}) => {
 const User = 1;
 const Script = 2;
 
+const FocusSettingsInput = 2199;
+
 const clear$1 = state => {
   const {
     items,
     tabs,
-    preferences
+    modifiedSettings
   } = state;
   const newSearchValue = '';
-  const filteredItems = getFilteredItems(items, tabs, newSearchValue, preferences);
+  const filteredItems = getFilteredItems(items, tabs, newSearchValue, modifiedSettings);
   return {
     ...state,
-    searchValue: newSearchValue,
+    filteredItems,
+    focus: FocusSettingsInput,
+    focusSource: Script,
     inputSource: Script,
-    filteredItems
+    searchValue: newSearchValue
+  };
+};
+
+const clearHistory = state => {
+  return {
+    ...state,
+    history: [],
+    historyIndex: -1
   };
 };
 
@@ -989,34 +1001,54 @@ const create$1 = (id, uri, x, y, width, height) => {
     preferences: {},
     inputSource: 0,
     scrollOffset: 0,
-    filteredItemsCount: 0
+    filteredItemsCount: 0,
+    history: [],
+    historyIndex: -1,
+    modifiedSettings: {},
+    focusSource: 0
   };
   set$1(id, state, state);
 };
 
-const isEqual$2 = (oldState, newState) => {
+const isEqual$4 = (oldState, newState) => {
   return oldState.focus === newState.focus;
 };
 
+const isEqual$3 = (oldState, newState) => {
+  return oldState.filteredItems === newState.filteredItems;
+};
+
+const isEqual$2 = (oldState, newState) => {
+  return newState.inputSource === User || oldState.scrollOffset === newState.scrollOffset;
+};
+
 const isEqual$1 = (oldState, newState) => {
-  return oldState === newState;
+  return oldState.filteredItems === newState.filteredItems;
 };
 
 const RenderItems = 1;
 const RenderFocus = 2;
 const RenderValue = 3;
+const RenderSettingValues = 10;
+const RenderScrollOffset = 11;
+const RenderFocusContext = 12;
 
 const isEqual = (oldState, newState) => {
   return newState.inputSource === User || oldState.searchValue === newState.searchValue;
 };
 
-const modules = [isEqual$2, isEqual$1, isEqual];
-const numbers = [RenderFocus, RenderItems, RenderValue];
+const modules = [isEqual$3, isEqual, isEqual$1, isEqual$2, isEqual$4, isEqual$4];
+const numbers = [RenderItems, RenderValue, RenderSettingValues, RenderScrollOffset, RenderFocus, RenderFocusContext];
 
 const diff = (oldState, newState) => {
   const diffResult = [];
   for (let i = 0; i < modules.length; i++) {
     const fn = modules[i];
+
+    // TODO enable this
+    if (numbers[i] === RenderScrollOffset) {
+      continue;
+    }
     if (!fn(oldState, newState)) {
       diffResult.push(numbers[i]);
     }
@@ -1033,6 +1065,76 @@ const diff2 = uid => {
   return diffResult;
 };
 
+const Tab$1 = 'tab';
+const TabList = 'tablist';
+const AriaRoles = {
+  __proto__: null,
+  Tab: Tab$1,
+  TabList};
+const Viewlet$1 = 'Viewlet';
+const ClassNames = {
+  __proto__: null,
+  Viewlet: Viewlet$1};
+const UpArrow = 14;
+const DownArrow = 16;
+const KeyCode = {
+  __proto__: null,
+  DownArrow,
+  UpArrow
+};
+const mergeClassNames = (...classNames) => {
+  return classNames.filter(Boolean).join(' ');
+};
+const Button$1 = 1;
+const Div = 4;
+const H1 = 5;
+const Input = 6;
+const Text = 12;
+const H3 = 23;
+const Aside = 28;
+const P = 50;
+const Ul = 60;
+const Select$1 = 63;
+const Option = 64;
+const Label = 66;
+const VirtualDomElements = {
+  __proto__: null,
+  Aside,
+  Button: Button$1,
+  Div,
+  H1,
+  H3,
+  Input,
+  Label,
+  Option,
+  P,
+  Select: Select$1,
+  Ul};
+const text = data => {
+  return {
+    type: Text,
+    text: data,
+    childCount: 0
+  };
+};
+
+const getKeyBindings$1 = () => {
+  return [{
+    key: KeyCode.UpArrow,
+    command: 'Settings.usePreviousSearchValue',
+    when: FocusSettingsInput
+  }, {
+    key: KeyCode.DownArrow,
+    command: 'Settings.useNextSearchValue',
+    when: FocusSettingsInput
+  }];
+};
+
+const getName = () => {
+  // TODO i18n string
+  return 'Settings';
+};
+
 const getSelectedTabId = tabs => {
   for (const tab of tabs) {
     if (tab.selected) {
@@ -1062,10 +1164,10 @@ const handleClickTab = (state, name) => {
     items,
     tabs,
     searchValue,
-    preferences
+    modifiedSettings
   } = state;
   const updatedTabs = getUpdatedTabs(tabs, name);
-  const filteredItems = getFilteredItems(items, updatedTabs, searchValue, preferences);
+  const filteredItems = getFilteredItems(items, updatedTabs, searchValue, modifiedSettings);
   return {
     ...state,
     tabs: updatedTabs,
@@ -1073,27 +1175,542 @@ const handleClickTab = (state, name) => {
   };
 };
 
-const handleInput = (state, value) => {
+const addToHistory = (history, value) => {
+  let newHistory = history;
+  let newHistoryIndex = -1;
+  if (!value || !value.trim()) {
+    return {
+      newHistory,
+      newHistoryIndex
+    };
+  }
+  const trimmedValue = value.trim();
+
+  // Check if this value is already in history
+  const existingIndex = history.indexOf(trimmedValue);
+  if (existingIndex !== -1) {
+    newHistoryIndex = existingIndex;
+    return {
+      newHistory,
+      newHistoryIndex
+    };
+  }
+
+  // Check if this value is a prefix of any existing history item
+  // If it is, don't add it to history yet (it's still being typed)
+  const isPrefixOfExisting = history.some(historyItem => historyItem.startsWith(trimmedValue) && historyItem !== trimmedValue);
+  if (isPrefixOfExisting) {
+    // Don't add to history, but find the closest match for index
+    const closestMatch = history.find(historyItem => historyItem.startsWith(trimmedValue));
+    if (closestMatch) {
+      newHistoryIndex = history.indexOf(closestMatch);
+    }
+    return {
+      newHistory,
+      newHistoryIndex
+    };
+  }
+
+  // Check if any existing history items are prefixes of this value
+  // If so, remove all prefix items and add the complete value at the first prefix position
+  const prefixItems = history.filter(historyItem => trimmedValue.startsWith(historyItem) && historyItem !== trimmedValue);
+  if (prefixItems.length > 0) {
+    // Find the position of the first prefix item
+    const firstPrefixIndex = history.findIndex(historyItem => trimmedValue.startsWith(historyItem) && historyItem !== trimmedValue);
+
+    // Remove all prefix items and add the complete value at the first prefix position
+
+    // Insert the new value at the position where the first prefix was
+    const beforePrefix = history.slice(0, firstPrefixIndex);
+    const afterPrefix = history.slice(firstPrefixIndex).filter(historyItem => !trimmedValue.startsWith(historyItem) || historyItem === trimmedValue);
+    newHistory = [...beforePrefix, trimmedValue, ...afterPrefix];
+    newHistoryIndex = firstPrefixIndex;
+  } else {
+    // Add as new item
+    newHistory = [...history, trimmedValue];
+    newHistoryIndex = newHistory.length - 1;
+  }
+  return {
+    newHistory,
+    newHistoryIndex
+  };
+};
+
+const handleInput = (state, value, inputSource = User) => {
   const {
     items,
     tabs,
-    preferences
+    history,
+    modifiedSettings
   } = state;
-  const filteredItems = getFilteredItems(items, tabs, value, preferences);
+  const filteredItems = getFilteredItems(items, tabs, value, modifiedSettings);
+  const {
+    newHistory,
+    newHistoryIndex
+  } = addToHistory(history, value);
   return {
     ...state,
     searchValue: value,
     filteredItems,
-    inputSource: User
+    history: newHistory,
+    historyIndex: newHistoryIndex,
+    inputSource
   };
 };
 
+const None = 0;
+const SearchInput = 1;
+
+const handleInputBlur = state => {
+  return {
+    ...state,
+    focus: None
+  };
+};
+
+const handleInputFocus = state => {
+  return {
+    ...state,
+    focus: SearchInput
+  };
+};
+
+const handleScroll = (state, scrollTop, inputSource = User) => {
+  return {
+    ...state,
+    scrollOffset: scrollTop,
+    inputSource
+  };
+};
+
+const getNewFilteredItems = (oldModifiedSetings, newModifiedSettings, items, tabs, searchValue, oldFilteredItems) => {
+  if (oldModifiedSetings === newModifiedSettings) {
+    return oldFilteredItems;
+  }
+  return getFilteredItems(items, tabs, searchValue, newModifiedSettings);
+};
+
+const getNewModifiedSettings = (modifiedSettings, name) => {
+  if (name in modifiedSettings) {
+    return modifiedSettings;
+  }
+  return {
+    ...modifiedSettings,
+    [name]: true
+  };
+};
+
+const handleSettingUpdate = (state, name, value, inputSource) => {
+  const {
+    modifiedSettings,
+    items,
+    tabs,
+    searchValue,
+    preferences,
+    filteredItems
+  } = state;
+  const newModifiedSettings = getNewModifiedSettings(modifiedSettings, name);
+  const newPreferences = {
+    ...preferences,
+    [name]: value
+  };
+  const newFilteredItems = getNewFilteredItems(modifiedSettings, newModifiedSettings, items, tabs, searchValue, filteredItems);
+  return {
+    ...state,
+    inputSource,
+    filteredItems: newFilteredItems,
+    preferences: newPreferences
+  };
+};
+
+const handleSettingChecked = (state, name, value, source = User) => {
+  return handleSettingUpdate(state, name, value, source);
+};
+
+const handleSettingInput = (state, name, value, inputSource = User) => {
+  return handleSettingUpdate(state, name, value, inputSource);
+};
+
+const handleSettingSelect = (state, name, value, source = User) => {
+  return handleSettingUpdate(state, name, value, source);
+};
+
 const initialize = async () => {
   // TODO
 };
 
+const getModifiedSettings = preferences => {
+  const modifiedSettings = Object.create(null);
+  for (const key of Object.keys(preferences)) {
+    modifiedSettings[key] = true;
+  }
+  return modifiedSettings;
+};
+
+const rpcs = Object.create(null);
+const set$g = (id, rpc) => {
+  rpcs[id] = rpc;
+};
+const get = id => {
+  return rpcs[id];
+};
+
+/* eslint-disable  @typescript-eslint/explicit-function-return-type */
+
+const create = rpcId => {
+  return {
+    // @ts-ignore
+    invoke(method, ...params) {
+      const rpc = get(rpcId);
+      // @ts-ignore
+      return rpc.invoke(method, ...params);
+    },
+    // @ts-ignore
+    invokeAndTransfer(method, ...params) {
+      const rpc = get(rpcId);
+      // @ts-ignore
+      return rpc.invokeAndTransfer(method, ...params);
+    },
+    set(rpc) {
+      set$g(rpcId, rpc);
+    },
+    async dispose() {
+      const rpc = get(rpcId);
+      await rpc.dispose();
+    }
+  };
+};
+const DebugWorker$1 = 55;
+const RendererWorker$1 = 1;
+const {
+  invoke: invoke$3,
+  invokeAndTransfer: invokeAndTransfer$3,
+  set: set$3,
+  dispose: dispose$3
+} = create(RendererWorker$1);
+const searchFileHtml = async uri => {
+  return invoke$3('ExtensionHost.searchFileWithHtml', uri);
+};
+const getFilePathElectron = async file => {
+  return invoke$3('FileSystemHandle.getFilePathElectron', file);
+};
+const showContextMenu = async (x, y, id, ...args) => {
+  return invoke$3('ContextMenu.show', x, y, id, ...args);
+};
+const getElectronVersion = async () => {
+  return invoke$3('Process.getElectronVersion');
+};
+const applyBulkReplacement = async bulkEdits => {
+  await invoke$3('BulkReplacement.applyBulkReplacement', bulkEdits);
+};
+const setColorTheme = async id => {
+  // @ts-ignore
+  return invoke$3(/* ColorTheme.setColorTheme */'ColorTheme.setColorTheme', /* colorThemeId */id);
+};
+const getNodeVersion = async () => {
+  return invoke$3('Process.getNodeVersion');
+};
+const getChromeVersion = async () => {
+  return invoke$3('Process.getChromeVersion');
+};
+const getV8Version = async () => {
+  return invoke$3('Process.getV8Version');
+};
+const getFileHandles = async fileIds => {
+  const files = await invoke$3('FileSystemHandle.getFileHandles', fileIds);
+  return files;
+};
+const setWorkspacePath = async path => {
+  await invoke$3('Workspace.setPath', path);
+};
+const registerWebViewInterceptor = async (id, port) => {
+  await invokeAndTransfer$3('WebView.registerInterceptor', id, port);
+};
+const unregisterWebViewInterceptor = async id => {
+  await invoke$3('WebView.unregisterInterceptor', id);
+};
+const sendMessagePortToEditorWorker = async (port, rpcId) => {
+  const command = 'HandleMessagePort.handleMessagePort';
+  // @ts-ignore
+  await invokeAndTransfer$3('SendMessagePortToExtensionHostWorker.sendMessagePortToEditorWorker', port, command, rpcId);
+};
+const sendMessagePortToMarkdownWorker = async (port, rpcId) => {
+  const command = 'Markdown.handleMessagePort';
+  // @ts-ignore
+  await invokeAndTransfer$3('SendMessagePortToExtensionHostWorker.sendMessagePortToMarkdownWorker', port, command, rpcId);
+};
+const sendMessagePortToFileSystemWorker = async (port, rpcId) => {
+  const command = 'FileSystem.handleMessagePort';
+  // @ts-ignore
+  await invokeAndTransfer$3('SendMessagePortToExtensionHostWorker.sendMessagePortToFileSystemWorker', port, command, rpcId);
+};
+const readFile = async uri => {
+  return invoke$3('FileSystem.readFile', uri);
+};
+const getWebViewSecret = async key => {
+  // @ts-ignore
+  return invoke$3('WebView.getSecret', key);
+};
+const setWebViewPort = async (uid, port, origin, portType) => {
+  return invokeAndTransfer$3('WebView.setPort', uid, port, origin, portType);
+};
+const setFocus = key => {
+  return invoke$3('Focus.setFocus', key);
+};
+const getFileIcon = async options => {
+  return invoke$3('IconTheme.getFileIcon', options);
+};
+const getColorThemeNames = async () => {
+  return invoke$3('ColorTheme.getColorThemeNames');
+};
+const disableExtension = async id => {
+  return invoke$3('ExtensionManagement.disable', id);
+};
+const enableExtension = async id => {
+  // @ts-ignore
+  return invoke$3('ExtensionManagement.enable', id);
+};
+const handleDebugChange = async params => {
+  // @ts-ignore
+  return invoke$3('Run And Debug.handleChange', params);
+};
+const getFolderIcon = async options => {
+  return invoke$3('IconTheme.getFolderIcon', options);
+};
+const closeWidget = async widgetId => {
+  return invoke$3('Viewlet.closeWidget', widgetId);
+};
+const sendMessagePortToExtensionHostWorker = async (port, rpcId = 0) => {
+  const command = 'HandleMessagePort.handleMessagePort2';
+  await invokeAndTransfer$3('SendMessagePortToExtensionHostWorker.sendMessagePortToExtensionHostWorker', port, command, rpcId);
+};
+const sendMessagePortToSearchProcess = async port => {
+  await invokeAndTransfer$3('SendMessagePortToElectron.sendMessagePortToElectron', port, 'HandleMessagePortForSearchProcess.handleMessagePortForSearchProcess');
+};
+const confirm = async (message, options) => {
+  // @ts-ignore
+  const result = await invoke$3('Confirmprompt.prompt', message, options);
+  return result;
+};
+const getRecentlyOpened = async () => {
+  return invoke$3(/* RecentlyOpened.getRecentlyOpened */'RecentlyOpened.getRecentlyOpened');
+};
+const getKeyBindings = async () => {
+  return invoke$3('KeyBindingsInitial.getKeyBindings');
+};
+const writeClipBoardText = async text => {
+  await invoke$3('ClipBoard.writeText', /* text */text);
+};
+const writeClipBoardImage = async blob => {
+  // @ts-ignore
+  await invoke$3('ClipBoard.writeImage', /* text */blob);
+};
+const searchFileMemory = async uri => {
+  // @ts-ignore
+  return invoke$3('ExtensionHost.searchFileWithMemory', uri);
+};
+const searchFileFetch = async uri => {
+  return invoke$3('ExtensionHost.searchFileWithFetch', uri);
+};
+const showMessageBox = async options => {
+  return invoke$3('ElectronDialog.showMessageBox', options);
+};
+const handleDebugResumed = async params => {
+  await invoke$3('Run And Debug.handleResumed', params);
+};
+const openWidget = async name => {
+  await invoke$3('Viewlet.openWidget', name);
+};
+const getIcons = async requests => {
+  const icons = await invoke$3('IconTheme.getIcons', requests);
+  return icons;
+};
+const activateByEvent = event => {
+  return invoke$3('ExtensionHostManagement.activateByEvent', event);
+};
+const setAdditionalFocus = focusKey => {
+  // @ts-ignore
+  return invoke$3('Focus.setAdditionalFocus', focusKey);
+};
+const getActiveEditorId = () => {
+  // @ts-ignore
+  return invoke$3('GetActiveEditor.getActiveEditorId');
+};
+const getWorkspacePath = () => {
+  return invoke$3('Workspace.getPath');
+};
+const sendMessagePortToRendererProcess = async port => {
+  const command = 'HandleMessagePort.handleMessagePort';
+  // @ts-ignore
+  await invokeAndTransfer$3('SendMessagePortToExtensionHostWorker.sendMessagePortToRendererProcess', port, command, DebugWorker$1);
+};
+const getPreference = async key => {
+  return await invoke$3('Preferences.get', key);
+};
+const getAllExtensions = async () => {
+  return invoke$3('ExtensionManagement.getAllExtensions');
+};
+const rerenderEditor = async key => {
+  // @ts-ignore
+  return invoke$3('Editor.rerender', key);
+};
+const handleDebugPaused = async params => {
+  await invoke$3('Run And Debug.handlePaused', params);
+};
+const openUri = async (uri, focus, options) => {
+  await invoke$3('Main.openUri', uri, focus, options);
+};
+const sendMessagePortToSyntaxHighlightingWorker = async port => {
+  await invokeAndTransfer$3(
+  // @ts-ignore
+  'SendMessagePortToSyntaxHighlightingWorker.sendMessagePortToSyntaxHighlightingWorker', port, 'HandleMessagePort.handleMessagePort2');
+};
+const handleDebugScriptParsed = async script => {
+  await invoke$3('Run And Debug.handleScriptParsed', script);
+};
+const getWindowId = async () => {
+  return invoke$3('GetWindowId.getWindowId');
+};
+const getBlob = async uri => {
+  // @ts-ignore
+  return invoke$3('FileSystem.getBlob', uri);
+};
+const getExtensionCommands = async () => {
+  return invoke$3('ExtensionHost.getCommands');
+};
+const showErrorDialog = async errorInfo => {
+  // @ts-ignore
+  await invoke$3('ErrorHandling.showErrorDialog', errorInfo);
+};
+const getFolderSize = async uri => {
+  // @ts-ignore
+  return await invoke$3('FileSystem.getFolderSize', uri);
+};
+const getExtension = async id => {
+  // @ts-ignore
+  return invoke$3('ExtensionManagement.getExtension', id);
+};
+const getMarkdownDom = async html => {
+  // @ts-ignore
+  return invoke$3('Markdown.getVirtualDom', html);
+};
+const renderMarkdown = async (markdown, options) => {
+  // @ts-ignore
+  return invoke$3('Markdown.renderMarkdown', markdown, options);
+};
+const openNativeFolder = async uri => {
+  // @ts-ignore
+  await invoke$3('OpenNativeFolder.openNativeFolder', uri);
+};
+const uninstallExtension = async id => {
+  return invoke$3('ExtensionManagement.uninstall', id);
+};
+const installExtension = async id => {
+  // @ts-ignore
+  return invoke$3('ExtensionManagement.install', id);
+};
+const openExtensionSearch = async () => {
+  // @ts-ignore
+  return invoke$3('SideBar.openViewlet', 'Extensions');
+};
+const setExtensionsSearchValue = async searchValue => {
+  // @ts-ignore
+  return invoke$3('Extensions.handleInput', searchValue);
+};
+const openExternal = async uri => {
+  // @ts-ignore
+  await invoke$3('Open.openExternal', uri);
+};
+const openUrl = async uri => {
+  // @ts-ignore
+  await invoke$3('Open.openUrl', uri);
+};
+const getAllPreferences = async () => {
+  // @ts-ignore
+  return invoke$3('Preferences.getAll');
+};
+const RendererWorker = {
+  __proto__: null,
+  activateByEvent,
+  applyBulkReplacement,
+  closeWidget,
+  confirm,
+  disableExtension,
+  dispose: dispose$3,
+  enableExtension,
+  getActiveEditorId,
+  getAllExtensions,
+  getAllPreferences,
+  getBlob,
+  getChromeVersion,
+  getColorThemeNames,
+  getElectronVersion,
+  getExtension,
+  getExtensionCommands,
+  getFileHandles,
+  getFileIcon,
+  getFilePathElectron,
+  getFolderIcon,
+  getFolderSize,
+  getIcons,
+  getKeyBindings,
+  getMarkdownDom,
+  getNodeVersion,
+  getPreference,
+  getRecentlyOpened,
+  getV8Version,
+  getWebViewSecret,
+  getWindowId,
+  getWorkspacePath,
+  handleDebugChange,
+  handleDebugPaused,
+  handleDebugResumed,
+  handleDebugScriptParsed,
+  installExtension,
+  invoke: invoke$3,
+  invokeAndTransfer: invokeAndTransfer$3,
+  openExtensionSearch,
+  openExternal,
+  openNativeFolder,
+  openUri,
+  openUrl,
+  openWidget,
+  readFile,
+  registerWebViewInterceptor,
+  renderMarkdown,
+  rerenderEditor,
+  searchFileFetch,
+  searchFileHtml,
+  searchFileMemory,
+  sendMessagePortToEditorWorker,
+  sendMessagePortToExtensionHostWorker,
+  sendMessagePortToFileSystemWorker,
+  sendMessagePortToMarkdownWorker,
+  sendMessagePortToRendererProcess,
+  sendMessagePortToSearchProcess,
+  sendMessagePortToSyntaxHighlightingWorker,
+  set: set$3,
+  setAdditionalFocus,
+  setColorTheme,
+  setExtensionsSearchValue,
+  setFocus,
+  setWebViewPort,
+  setWorkspacePath,
+  showContextMenu,
+  showErrorDialog,
+  showMessageBox,
+  uninstallExtension,
+  unregisterWebViewInterceptor,
+  writeClipBoardImage,
+  writeClipBoardText
+};
+
 const getPreferences = async () => {
-  return {};
+  try {
+    return await RendererWorker.getAllPreferences();
+  } catch {
+    return {};
+  }
 };
 
 const ApplicationsTab = 'applications';
@@ -1110,6 +1727,8 @@ const Enum = 1;
 const String = 2;
 const Boolean$1 = 3;
 const Number$1 = 5;
+const Color = 6;
+const Url = 7;
 
 const emptyObject = {};
 const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
@@ -1141,8 +1760,9 @@ const FontSizeDescription = 'The font size of the editor';
 const FormatOnSave = 'Format on Save';
 const FormatOnSaveDescription = 'Format code when saving';
 const NumberValue = 'number value';
+const StringValue = 'string value';
 const SearchSettings = 'Search Settings';
-const SettingsContent = 'Settings Content';
+const SettingsContent$1 = 'Settings Content';
 const SidebarPosition = 'Sidebar Position';
 const SidebarPositionDescription = 'The position of the sidebar';
 const Telemetry = 'Telemetry';
@@ -1156,6 +1776,7 @@ const WindowSizeDescription = 'The default window size';
 const WindowTitle = 'Window Title';
 const WindowTitleDescription = 'The title shown in the window';
 const NoSettingsMatching = 'No settings matching "{PH1}" found';
+const MatchingSettings = '{PH1} matching settings';
 
 // Text Editor Settings
 const WordWrap = 'Word Wrap';
@@ -1172,6 +1793,7 @@ const CursorBlinking = 'Cursor Blinking';
 const CursorBlinkingDescription = 'Controls how the cursor should blink';
 const CursorStyle = 'Cursor Style';
 const CursorStyleDescription = 'Controls the cursor style';
+const ColorValue = 'Color value';
 const CursorWidth = 'Cursor Width';
 const CursorWidthDescription = 'Controls the width of the cursor';
 const TabSize = 'Tab Size';
@@ -1388,6 +2010,7 @@ const WordSeparators = 'Word Separators';
 const WordSeparatorsDescription = 'Characters that will be used as word separators when doing word related navigations or operations';
 const WrappingIndent = 'Wrapping Indent';
 const WrappingIndentDescription = 'Controls the indentation of wrapped lines';
+const UnknownSettingType = 'Unknown setting type';
 
 const autoSave = () => {
   return i18nString(AutoSave);
@@ -1443,11 +2066,17 @@ const formatOnSaveDescription = () => {
 const numberValue = () => {
   return i18nString(NumberValue);
 };
+const colorValue = () => {
+  return i18nString(ColorValue);
+};
+const stringValue = () => {
+  return i18nString(StringValue);
+};
 const searchSettings = () => {
   return i18nString(SearchSettings);
 };
 const settingsContent = () => {
-  return i18nString(SettingsContent);
+  return i18nString(SettingsContent$1);
 };
 const sidebarPosition = () => {
   return i18nString(SidebarPosition);
@@ -1490,6 +2119,11 @@ const noSettingsMatching = searchTerm => {
     PH1: searchTerm
   });
 };
+const matchingSettings = count => {
+  return i18nString(MatchingSettings, {
+    PH1: count.toString()
+  });
+};
 
 // Text Editor Settings
 const wordWrap = () => {
@@ -2178,17 +2812,20 @@ const wrappingIndent = () => {
 const wrappingIndentDescription = () => {
   return i18nString(WrappingIndentDescription);
 };
+const unknownSettingType = () => {
+  return i18nString(UnknownSettingType);
+};
 
 const getSettingItems = async () => {
   return [{
-    id: 'fontSize',
+    id: 'Editor.fontSize',
     heading: fontSize(),
     description: fontSizeDescription(),
     type: Number$1,
-    value: '15px',
+    value: 15,
     category: TextEditorTab
   }, {
-    id: 'fontFamily',
+    id: 'Editor.fontFamily',
     heading: fontFamily(),
     description: fontFamilyDescription(),
     type: String,
@@ -2197,7 +2834,7 @@ const getSettingItems = async () => {
   },
   // Text Editor Settings
   {
-    id: 'wordWrap',
+    id: 'Editor.wordWrap',
     heading: wordWrap(),
     description: wordWrapDescription(),
     type: Enum,
@@ -2211,7 +2848,7 @@ const getSettingItems = async () => {
       label: 'off' // i18n
     }]
   }, {
-    id: 'lineNumbers',
+    id: 'Editor.lineNumbers',
     heading: lineNumbers(),
     description: lineNumbersDescription(),
     type: Enum,
@@ -2225,133 +2862,133 @@ const getSettingItems = async () => {
       label: 'off' // i18n
     }]
   }, {
-    id: 'minimap',
+    id: 'Editor.minimap',
     heading: minimap(),
     description: minimapDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'scrollBeyondLastLine',
+    id: 'Editor.scrollBeyondLastLine',
     heading: scrollBeyondLastLine(),
     description: scrollBeyondLastLineDescription(),
     type: Boolean$1,
     value: 'false',
     category: TextEditorTab
   }, {
-    id: 'smoothScrolling',
+    id: 'Editor.smoothScrolling',
     heading: smoothScrolling(),
     description: smoothScrollingDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'cursorBlinking',
+    id: 'Editor.cursorBlinking',
     heading: cursorBlinking(),
     description: cursorBlinkingDescription(),
     type: String,
     value: 'blink',
     category: TextEditorTab
   }, {
-    id: 'cursorStyle',
+    id: 'Editor.cursorStyle',
     heading: cursorStyle(),
     description: cursorStyleDescription(),
     type: String,
     value: 'line',
     category: TextEditorTab
   }, {
-    id: 'cursorWidth',
+    id: 'Editor.cursorWidth',
     heading: cursorWidth(),
     description: cursorWidthDescription(),
     type: Number$1,
     value: '0',
     category: TextEditorTab
   }, {
-    id: 'tabSize',
+    id: 'Editor.tabSize',
     heading: tabSize(),
     description: tabSizeDescription(),
     type: Number$1,
     value: '4',
     category: TextEditorTab
   }, {
-    id: 'insertSpaces',
+    id: 'Editor.insertSpaces',
     heading: insertSpaces(),
     description: insertSpacesDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'detectIndentation',
+    id: 'Editor.detectIndentation',
     heading: detectIndentation(),
     description: detectIndentationDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'trimAutoWhitespace',
+    id: 'Editor.trimAutoWhitespace',
     heading: trimAutoWhitespace(),
     description: trimAutoWhitespaceDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'largeFileOptimizations',
+    id: 'Editor.largeFileOptimizations',
     heading: largeFileOptimizations(),
     description: largeFileOptimizationsDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'renderWhitespace',
+    id: 'Editor.renderWhitespace',
     heading: renderWhitespace(),
     description: renderWhitespaceDescription(),
     type: String,
     value: 'selection',
     category: TextEditorTab
   }, {
-    id: 'renderControlCharacters',
+    id: 'Editor.renderControlCharacters',
     heading: renderControlCharacters(),
     description: renderControlCharactersDescription(),
     type: Boolean$1,
     value: 'false',
     category: TextEditorTab
   }, {
-    id: 'renderLineHighlight',
+    id: 'Editor.renderLineHighlight',
     heading: renderLineHighlight(),
     description: renderLineHighlightDescription(),
     type: String,
     value: 'line',
     category: TextEditorTab
   }, {
-    id: 'codeLens',
+    id: 'Editor.codeLens',
     heading: codeLens(),
     description: codeLensDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'folding',
+    id: 'Editor.folding',
     heading: folding(),
     description: foldingDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'showFoldingControls',
+    id: 'Editor.showFoldingControls',
     heading: showFoldingControls(),
     description: showFoldingControlsDescription(),
     type: String,
     value: 'mouseover',
     category: TextEditorTab
   }, {
-    id: 'unfoldOnClickAfterEnd',
+    id: 'Editor.unfoldOnClickAfterEnd',
     heading: unfoldOnClickAfterEnd(),
     description: unfoldOnClickAfterEndDescription(),
     type: Boolean$1,
     value: 'false',
     category: TextEditorTab
   }, {
-    id: 'links',
+    id: 'Editor.links',
     heading: links(),
     description: linksDescription(),
     type: Boolean$1,
@@ -2947,6 +3584,13 @@ const getSettingItems = async () => {
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
+  }, {
+    id: 'Editor.background',
+    heading: 'Editor background',
+    description: 'Editor background color',
+    type: Color,
+    value: '#567567',
+    category: TextEditorTab
   }, {
     id: 'showUnused',
     heading: showUnused(),
@@ -3130,36 +3774,70 @@ const getTabs = () => {
   return tabs;
 };
 
+const getSavedDeltaY = savedState => {
+  if (savedState && typeof savedState === 'object' && 'deltaY' in savedState && typeof savedState.deltaY === 'number') {
+    return savedState.deltaY;
+  }
+  return 0;
+};
+
+const getSavedHistory = savedState => {
+  if (savedState && typeof savedState === 'object' && 'history' in savedState && Array.isArray(savedState.history)) {
+    // Validate that all items are strings and limit to last 10 items
+    const validHistory = savedState.history.filter(item => typeof item === 'string').slice(-10); // Keep only the last 10 items
+    return validHistory;
+  }
+  return [];
+};
+
+const getSavedHistoryIndex = (savedState, history) => {
+  if (savedState && typeof savedState === 'object' && 'historyIndex' in savedState && typeof savedState.historyIndex === 'number') {
+    const {
+      historyIndex
+    } = savedState;
+    // Ensure historyIndex is within valid bounds
+    if (historyIndex >= 0 && historyIndex < history.length) {
+      return historyIndex;
+    }
+  }
+  return -1;
+};
+
 const getSavedMinLineY = savedState => {
   if (savedState && typeof savedState === 'object' && 'minLineY' in savedState && typeof savedState.minLineY === 'number') {
     return savedState.minLineY;
   }
   return 0;
 };
+
+const getSavedScrollOffset = savedState => {
+  if (savedState && typeof savedState === 'object' && 'scrollOffset' in savedState && typeof savedState.scrollOffset === 'number') {
+    return savedState.scrollOffset;
+  }
+  return 0;
+};
+
 const getSavedSearchValue = savedState => {
   if (savedState && typeof savedState === 'object' && 'searchValue' in savedState && typeof savedState.searchValue === 'string') {
     return savedState.searchValue;
   }
   return '';
 };
-const getSavedDeltaY = savedState => {
-  if (savedState && typeof savedState === 'object' && 'deltaY' in savedState && typeof savedState.deltaY === 'number') {
-    return savedState.deltaY;
+
+const getSavedTabId = savedState => {
+  if (savedState && typeof savedState === 'object' && 'selectedTab' in savedState && typeof savedState.selectedTab === 'string') {
+    return savedState.selectedTab;
   }
-  return 0;
+  return '';
 };
+
 const getSavedWorkspacePath = savedState => {
   if (savedState && typeof savedState === 'object' && 'workspacePath' in savedState && typeof savedState.workspacePath === 'string') {
     return savedState.workspacePath;
   }
   return '';
 };
-const getSavedTabId = savedState => {
-  if (savedState && typeof savedState === 'object' && 'selectedTab' in savedState && typeof savedState.selectedTab === 'string') {
-    return savedState.selectedTab;
-  }
-  return '';
-};
+
 const restoreState = savedState => {
   if (!savedState) {
     return {
@@ -3167,7 +3845,10 @@ const restoreState = savedState => {
       minLineY: 0,
       deltaY: 0,
       tabId: '',
-      searchValue: ''
+      searchValue: '',
+      scrollOffset: 0,
+      history: [],
+      historyIndex: -1
     };
   }
   const root = getSavedWorkspacePath(savedState);
@@ -3175,126 +3856,165 @@ const restoreState = savedState => {
   const deltaY = getSavedDeltaY(savedState);
   const tabId = getSavedTabId(savedState);
   const searchValue = getSavedSearchValue(savedState);
+  const scrollOffset = getSavedScrollOffset(savedState);
+  const history = getSavedHistory(savedState);
+  const historyIndex = getSavedHistoryIndex(savedState, history);
   return {
     root,
     minLineY,
     deltaY,
     tabId,
-    searchValue
+    searchValue,
+    scrollOffset,
+    history,
+    historyIndex
   };
 };
 
 const loadContent = async (state, savedState) => {
   const {
     searchValue,
-    tabId
+    tabId,
+    scrollOffset,
+    history,
+    historyIndex
   } = restoreState(savedState);
   const tabs = getTabs();
   const newTabs = getUpdatedTabs(tabs, tabId);
   const items = await getSettingItems();
   const preferences = await getPreferences();
-  const filteredItems = getFilteredItems(items, newTabs, searchValue, preferences);
+  const modifiedSettings = getModifiedSettings(preferences);
+  const filteredItems = getFilteredItems(items, newTabs, searchValue, modifiedSettings);
   return {
     ...state,
-    tabs: newTabs,
+    filteredItems,
+    inputSource: Script,
     items,
-    filteredItems,
+    modifiedSettings,
     preferences,
-    inputSource: Script,
-    searchValue
+    scrollOffset,
+    searchValue,
+    tabs: newTabs,
+    history,
+    historyIndex
   };
 };
 
-const Tab$1 = 'tab';
-const TabList = 'tablist';
-const AriaRoles = {
-  __proto__: null,
-  Tab: Tab$1,
-  TabList};
-const Viewlet$1 = 'Viewlet';
-const ClassNames = {
-  __proto__: null,
-  Viewlet: Viewlet$1};
-const mergeClassNames = (...classNames) => {
-  return classNames.filter(Boolean).join(' ');
+const renderFocus = (oldState, newState) => {
+  const {
+    id
+  } = newState;
+  const selector = `[name="${SettingsSearch}"]`;
+  return ['Viewlet.focusSelector', id, selector];
 };
-const Button = 1;
-const Div = 4;
-const H1 = 5;
-const Input = 6;
-const Text = 12;
-const H3 = 23;
-const Aside = 28;
-const P = 50;
-const Ul = 60;
-const Select = 63;
-const Option = 64;
-const Label = 66;
-const VirtualDomElements = {
-  __proto__: null,
-  Aside,
-  Button,
-  Div,
-  H1,
-  H3,
-  Input,
-  Label,
-  Option,
-  P,
-  Select,
-  Ul};
-const text = data => {
-  return {
-    type: Text,
-    text: data,
-    childCount: 0
-  };
+
+const renderFocusContext = (oldState, newState) => {
+  const focusKey = FocusSettingsInput;
+  return ['Viewlet.setFocusContext', focusKey];
 };
 
 const {
   Viewlet
 } = ClassNames;
+const Badge = 'Badge';
+const Button = 'Button';
+const CheckBox = 'CheckBox';
+const Disabled = 'Disabled';
+const InputBox = 'InputBox';
+const InputButton = 'InputButton';
+const MaskIcon = 'MaskIcon';
+const MaskIconClearAll = 'MaskIconClearAll';
+const ModifiedIndicator = 'ModifiedIndicator';
+const SearchFieldButton = 'SearchFieldButton';
+const Select = 'Select';
 const Settings = 'Settings';
+const SettingsContent = 'SettingsContent';
+const SettingsContentHeading = 'SettingsContentHeading';
+const SettingsHeader = 'SettingsHeader';
+const SettingsInputWrapper = 'SettingsInputWrapper';
+const SettingsItem = 'SettingsItem';
+const SettingsItemCheckBox = 'SettingsItemCheckBox';
+const SettingsItems = 'SettingsItems';
+const SettingsMain = 'SettingsMain';
+const SettingsNoResults = 'SettingsNoResults';
+const SettingsSearchInput = 'SettingsSearchInput';
+const SettingsSideBar = 'SettingsSideBar';
+const SettingsTabs = 'SettingsTabs';
+const Tab = 'Tab';
+const TabSelected = 'TabSelected';
+
+const getSettingsInputBadgeDom = (filteredSettingsCount, hasSearchValue) => {
+  if (!hasSearchValue) {
+    return [];
+  }
+  const badgeText = matchingSettings(filteredSettingsCount);
+  return [{
+    type: VirtualDomElements.Div,
+    className: Badge,
+    childCount: 1
+  }, text(badgeText)];
+};
 
 // TODo use numeric ids
 const HandleClickClear = 'handleClickClear';
 const HandleClickTab = 'handleClickTab';
 const HandleInput = 'handleInput';
+const HandleSettingInput = 'handleSettingInput';
+const HandleSettingChecked = 'handleSettingChecked';
+const HandleScroll = 'handleScroll';
+const HandleSettingSelect = 'handleSettingSelect';
+const HandleInputFocus = 'handleInputFocus';
 
-const getSettingsInputDom = () => {
-  const placeholder = searchSettings();
+const getButtonClassName = hasSearchValue => {
+  if (hasSearchValue) {
+    return mergeClassNames(Button, InputButton, SearchFieldButton);
+  }
+  return mergeClassNames(Button, InputButton, SearchFieldButton, Disabled);
+};
+const getSettingsInputButtonsDom = hasSearchValue => {
   return [{
-    type: VirtualDomElements.Div,
-    className: 'SettingsInputWrapper',
-    childCount: 2
-  }, {
-    type: VirtualDomElements.Input,
-    className: 'InputBox SettingsSearchInput',
-    placeholder,
-    childCount: 0,
-    name: SettingsSearch,
-    onInput: HandleInput
-  }, {
     type: VirtualDomElements.Button,
-    className: 'Button InputButton SearchFieldButton',
+    className: getButtonClassName(hasSearchValue),
     childCount: 1,
     ariaLabel: clear(),
     name: Clear$1,
-    // TODO add click event listener
+    disabled: !hasSearchValue,
     onClick: HandleClickClear
   }, {
     type: VirtualDomElements.Div,
-    className: 'MaskIcon MaskIconClearAll',
+    className: mergeClassNames(MaskIcon, MaskIconClearAll),
     childCount: 0
   }];
 };
 
-const getSettingsHeaderDom = () => {
+const getSettingsInputDom = () => {
+  const placeholder = searchSettings();
+  return [{
+    type: VirtualDomElements.Input,
+    className: mergeClassNames(InputBox, SettingsSearchInput),
+    placeholder,
+    childCount: 0,
+    name: SettingsSearch,
+    onInput: HandleInput,
+    onFocus: HandleInputFocus
+  }];
+};
+
+const getChildCount = hasSearchValue => {
+  return hasSearchValue ? 3 : 2;
+};
+const getSettingsHeaderDom = (filteredSettingsCount, hasSearchValue) => {
+  const badgeDom = getSettingsInputBadgeDom(filteredSettingsCount, hasSearchValue);
+  const childCount = getChildCount(hasSearchValue);
   return [{
     type: VirtualDomElements.Div,
-    className: 'SettingsHeader',
+    className: SettingsHeader,
     childCount: 1
-  }, ...getSettingsInputDom()];
+  }, {
+    type: VirtualDomElements.Div,
+    className: SettingsInputWrapper,
+    childCount
+  }, ...getSettingsInputDom(), ...getSettingsInputButtonsDom(hasSearchValue), ...badgeDom];
 };
 
 const getInputId = id => {
@@ -3305,26 +4025,32 @@ const getItemCheckBoxVirtualDom = item => {
   const {
     heading,
     description,
-    id
+    id,
+    modified
   } = item;
+  const isModified = modified || false;
   const domId = getInputId(id);
   return [{
     type: VirtualDomElements.Div,
-    className: 'SettingsItem',
-    childCount: 3
+    className: SettingsItem,
+    childCount: 3,
+    role: 'group',
+    'data-modified': isModified
   }, {
     type: VirtualDomElements.H3,
     childCount: 1
   }, text(heading), {
     type: VirtualDomElements.Div,
-    className: 'SettingsItemCheckBox',
+    className: SettingsItemCheckBox,
     childCount: 2
   }, {
     type: VirtualDomElements.Input,
-    className: 'CheckBox',
-    inputType: 'checkbox',
+    className: CheckBox,
     childCount: 0,
-    id: domId
+    id: domId,
+    inputType: 'checkbox',
+    name: id,
+    onChange: HandleSettingChecked
   }, {
     type: VirtualDomElements.Label,
     childCount: 1,
@@ -3332,27 +4058,89 @@ const getItemCheckBoxVirtualDom = item => {
   }, text(description)];
 };
 
-const getItemNumberVirtualDom = item => {
+const getItemHeadingDom = heading => {
+  return [{
+    type: VirtualDomElements.H3,
+    childCount: 1
+  }, text(heading)];
+};
+
+const getItemLabelDom = (domId, label) => {
+  return [{
+    type: VirtualDomElements.Label,
+    htmlFor: domId,
+    childCount: 1,
+    className: 'Label'
+  }, text(label)];
+};
+
+const getItemColorVirtualDom = item => {
   const {
     heading,
-    description
+    description,
+    id,
+    modified
   } = item;
+  const domId = getInputId(id);
+  const isModified = modified || false;
   return [{
     type: VirtualDomElements.Div,
-    className: 'SettingsItem',
-    childCount: 3
+    className: SettingsItem,
+    childCount: 3,
+    role: 'group',
+    'data-modified': isModified
+  }, ...getItemHeadingDom(heading), {
+    type: VirtualDomElements.Div,
+    className: SettingsItemCheckBox,
+    childCount: 2
   }, {
-    type: VirtualDomElements.H3,
-    childCount: 1
-  }, text(heading), {
-    type: VirtualDomElements.P,
-    childCount: 1
-  }, text(description), {
     type: VirtualDomElements.Input,
-    className: 'InputBox',
+    className: mergeClassNames('ColorInput'),
+    inputType: 'color',
+    placeholder: colorValue(),
+    childCount: 0,
+    id: domId,
+    name: id,
+    onInput: HandleSettingInput
+  }, ...getItemLabelDom(domId, description)];
+};
+
+const getSettingsModifiedIndicatorDom = isModified => {
+  if (!isModified) {
+    return [];
+  }
+  return [{
+    type: VirtualDomElements.Div,
+    className: ModifiedIndicator,
+    childCount: 0
+  }];
+};
+
+const getItemNumberVirtualDom = item => {
+  const {
+    heading,
+    description,
+    id,
+    modified
+  } = item;
+  const domId = getInputId(id);
+  const isModified = modified || false;
+  const modifiedChildCount = isModified ? 1 : 0;
+  return [{
+    type: VirtualDomElements.Div,
+    className: SettingsItem,
+    childCount: 3 + modifiedChildCount,
+    role: 'group',
+    'data-modified': isModified
+  }, ...getSettingsModifiedIndicatorDom(isModified), ...getItemHeadingDom(heading), ...getItemLabelDom(domId, description), {
+    type: VirtualDomElements.Input,
+    className: InputBox,
     inputType: 'number',
     placeholder: numberValue(),
-    childCount: 0
+    childCount: 0,
+    id: domId,
+    name: id,
+    onInput: HandleSettingInput
   }];
 };
 
@@ -3371,35 +4159,37 @@ const getOptionDom = option => {
 const getItemSelectVirtualDom = item => {
   const {
     heading,
-    description
+    description,
+    id
   } = item;
   const options = item.options || [];
+  const domId = getInputId(id);
   return [{
     type: VirtualDomElements.Div,
-    className: 'SettingsItem',
-    childCount: 3
-  }, {
-    type: VirtualDomElements.H3,
-    childCount: 1
-  }, text(heading), {
-    type: VirtualDomElements.P,
-    childCount: 1
-  }, text(description), {
+    className: SettingsItem,
+    childCount: 3,
+    role: 'group'
+  }, ...getItemHeadingDom(heading), ...getItemLabelDom(domId, description), {
     type: VirtualDomElements.Select,
-    className: 'Select',
-    childCount: options.length
+    className: Select,
+    childCount: options.length,
+    id: domId,
+    name: id,
+    onChange: HandleSettingSelect
   }, ...options.flatMap(getOptionDom)];
 };
 
 const getItemStringVirtualDom = item => {
   const {
     heading,
-    description
+    description,
+    id
   } = item;
   return [{
     type: VirtualDomElements.Div,
-    className: 'SettingsItem',
-    childCount: 3
+    className: SettingsItem,
+    childCount: 3,
+    role: 'group'
   }, {
     type: VirtualDomElements.H3,
     childCount: 1
@@ -3408,10 +4198,48 @@ const getItemStringVirtualDom = item => {
     childCount: 1
   }, text(description), {
     type: VirtualDomElements.Input,
-    className: 'InputBox',
+    className: InputBox,
     inputType: 'text',
+    placeholder: stringValue(),
+    childCount: 0,
+    name: id,
+    onInput: HandleSettingInput
+  }];
+};
+
+const getItemUnknownVirtualDom = () => {
+  return [{
+    type: VirtualDomElements.Div,
+    className: SettingsItem,
+    childCount: 1,
+    role: 'group'
+  }, text(unknownSettingType())];
+};
+
+const getItemUrlVirtualDom = item => {
+  const {
+    heading,
+    description,
+    id,
+    modified
+  } = item;
+  const domId = getInputId(id);
+  const isModified = modified || false;
+  return [{
+    type: VirtualDomElements.Div,
+    className: SettingsItem,
+    childCount: 3,
+    role: 'group',
+    'data-modified': isModified
+  }, ...getItemHeadingDom(heading), ...getItemLabelDom(domId, description), {
+    type: VirtualDomElements.Input,
+    className: InputBox,
+    inputType: 'url',
     placeholder: numberValue(),
-    childCount: 0
+    childCount: 0,
+    id: domId,
+    name: id,
+    onInput: HandleSettingInput
   }];
 };
 
@@ -3428,18 +4256,23 @@ const getItemVirtualDom = item => {
   if (item.type === Enum) {
     return getItemSelectVirtualDom(item);
   }
-  // TODO
-  return [text('unknown setting type')];
+  if (item.type === Color) {
+    return getItemColorVirtualDom(item);
+  }
+  if (item.type === Url) {
+    return getItemUrlVirtualDom(item);
+  }
+  return getItemUnknownVirtualDom();
 };
 
 const getSettingsNoResultsDom = searchValue => {
   return [{
     type: VirtualDomElements.Div,
-    className: 'SettingsItems',
+    className: SettingsItems,
     childCount: 1
   }, {
-    type: VirtualDomElements.Div,
-    className: 'SettingsNoResults',
+    type: VirtualDomElements.P,
+    className: SettingsNoResults,
     childCount: 1
   }, text(noSettingsMatching(searchValue))];
 };
@@ -3450,7 +4283,7 @@ const getSettingsItemsDom = (items, searchValue) => {
   }
   return [{
     type: VirtualDomElements.Div,
-    className: 'SettingsItems',
+    className: SettingsItems,
     childCount: items.length
   }, ...items.flatMap(getItemVirtualDom)];
 };
@@ -3460,17 +4293,18 @@ const getSettingsContentDom = (items, tabs, searchValue) => {
   const headerText = selectedTab ? selectedTab.label : settingsContent();
   return [{
     type: VirtualDomElements.Div,
-    className: 'SettingsContent',
-    childCount: 2
+    className: SettingsContent,
+    childCount: 2,
+    onScroll: HandleScroll
   }, {
     type: VirtualDomElements.H1,
-    className: 'SettingsContentHeading',
+    className: SettingsContentHeading,
     childCount: 1
   }, text(headerText), ...getSettingsItemsDom(items, searchValue)];
 };
 
 const getTabClassName = tab => {
-  return tab.selected ? mergeClassNames('Tab', 'TabSelected') : 'Tab';
+  return tab.selected ? mergeClassNames(Tab, TabSelected) : Tab;
 };
 
 const getTabVirtualDom = tab => {
@@ -3489,7 +4323,7 @@ const getTabVirtualDom = tab => {
 const getSettingsTabsDom = tabs => {
   return [{
     type: VirtualDomElements.Ul,
-    className: 'SettingsTabs',
+    className: SettingsTabs,
     role: AriaRoles.TabList,
     childCount: tabs.length,
     onClick: HandleClickTab
@@ -3499,7 +4333,7 @@ const getSettingsTabsDom = tabs => {
 const getSettingsSideBarDom = tabs => {
   return [{
     type: VirtualDomElements.Aside,
-    className: 'SettingsSideBar',
+    className: SettingsSideBar,
     childCount: 1
   }, ...getSettingsTabsDom(tabs)];
 };
@@ -3507,7 +4341,7 @@ const getSettingsSideBarDom = tabs => {
 const getSettingsMainDom = (tabs, items, searchValue) => {
   return [{
     type: VirtualDomElements.Div,
-    className: 'SettingsMain',
+    className: SettingsMain,
     childCount: 2
   }, ...getSettingsSideBarDom(tabs), ...getSettingsContentDom(items, tabs, searchValue)];
 };
@@ -3516,13 +4350,15 @@ const getSettingsDom = state => {
   const {
     tabs,
     filteredItems,
-    searchValue
+    searchValue,
+    filteredItemsCount
   } = state;
+  const hasSearchValue = searchValue.trim().length > 0;
   return [{
     type: VirtualDomElements.Div,
     childCount: 2,
     className: mergeClassNames(Viewlet, Settings)
-  }, ...getSettingsHeaderDom(), ...getSettingsMainDom(tabs, filteredItems, searchValue)];
+  }, ...getSettingsHeaderDom(filteredItemsCount, hasSearchValue), ...getSettingsMainDom(tabs, filteredItems, searchValue)];
 };
 
 const renderItems = (oldState, newState) => {
@@ -3530,6 +4366,30 @@ const renderItems = (oldState, newState) => {
   return ['Viewlet.setDom2', newState.id, dom];
 };
 
+const renderScrollOffset = (oldState, newState) => {
+  const {
+    id,
+    scrollOffset
+  } = newState;
+  const selector = '.SettingsContent';
+  const property = 'scrollTop';
+  return ['Viewlet.setProperty', id, selector, property, scrollOffset];
+};
+
+const enabledTypes = [Number$1, String, Color];
+const renderSettingValues = (oldState, newState) => {
+  const {
+    filteredItems,
+    id
+  } = newState;
+  const numericSettings = filteredItems.filter(item => enabledTypes.includes(item.type));
+  const inputValues = numericSettings.map(item => ({
+    name: item.id,
+    value: item.value
+  }));
+  return ['Viewlet.setInputValues', id, inputValues];
+};
+
 const renderValue = (oldState, newState) => {
   const {
     id,
@@ -3544,6 +4404,14 @@ const getRenderer = diffType => {
       return renderItems;
     case RenderValue:
       return renderValue;
+    case RenderSettingValues:
+      return renderSettingValues;
+    case RenderScrollOffset:
+      return renderScrollOffset;
+    case RenderFocusContext:
+      return renderFocusContext;
+    case RenderFocus:
+      return renderFocus;
     default:
       throw new Error('unknown renderer');
   }
@@ -3582,13 +4450,33 @@ const renderEventListeners = () => {
   }, {
     name: HandleClickClear,
     params: ['clear']
+  }, {
+    name: HandleSettingInput,
+    params: ['handleSettingInput', 'event.target.name', 'event.target.value']
+  }, {
+    name: HandleSettingChecked,
+    params: ['handleSettingChecked', 'event.target.name', 'event.target.value']
+  }, {
+    name: HandleScroll,
+    params: ['handleScroll', 'event.target.scrollTop'],
+    passive: true
+  }, {
+    name: HandleSettingSelect,
+    params: ['handleSettingSelect', 'event.target.name', 'event.target.value']
+  }, {
+    name: HandleInputFocus,
+    params: ['handleInputFocus']
   }];
 };
 
 const saveState = state => {
   const {
     tabs,
-    searchValue
+    searchValue,
+    scrollOffset,
+    focus,
+    history,
+    historyIndex
   } = state;
   const selectedTab = getSelectedTabId(tabs);
   return {
@@ -3598,15 +4486,76 @@ const saveState = state => {
     maxLineY: 0,
     deltaY: 0,
     searchValue,
-    selectedTab
+    selectedTab,
+    scrollOffset,
+    focus,
+    history,
+    historyIndex
+  };
+};
+
+const useNextSearchValue = state => {
+  const {
+    history,
+    historyIndex,
+    items,
+    tabs,
+    modifiedSettings
+  } = state;
+  if (history.length === 0 || historyIndex >= history.length - 1) {
+    return state;
+  }
+  const newHistoryIndex = historyIndex + 1;
+  const newSearchValue = history[newHistoryIndex];
+  const filteredItems = getFilteredItems(items, tabs, newSearchValue, modifiedSettings);
+  return {
+    ...state,
+    searchValue: newSearchValue,
+    historyIndex: newHistoryIndex,
+    filteredItems,
+    inputSource: Script
+  };
+};
+
+const usePreviousSearchValue = state => {
+  const {
+    history,
+    historyIndex,
+    items,
+    tabs,
+    modifiedSettings
+  } = state;
+  if (history.length === 0 || historyIndex <= 0) {
+    return state;
+  }
+  const newHistoryIndex = historyIndex - 1;
+  const newSearchValue = history[newHistoryIndex];
+  const filteredItems = getFilteredItems(items, tabs, newSearchValue, modifiedSettings);
+  return {
+    ...state,
+    searchValue: newSearchValue,
+    historyIndex: newHistoryIndex,
+    filteredItems,
+    inputSource: Script
   };
 };
 
 const commandMap = {
   'Initialize.initialize': initialize,
+  'Settings.clear': wrapCommand(clear$1),
+  'Settings.clearHistory': wrapCommand(clearHistory),
   'Settings.create': create$1,
   'Settings.diff2': diff2,
+  'Settings.getName': getName,
   'Settings.getCommandIds': getCommandIds,
+  'Settings.handleClickTab': wrapCommand(handleClickTab),
+  'Settings.handleInputBlur': wrapCommand(handleInputBlur),
+  'Settings.handleInput': wrapCommand(handleInput),
+  'Settings.handleScroll': wrapCommand(handleScroll),
+  'Settings.handleSettingChecked': wrapCommand(handleSettingChecked),
+  'Settings.handleSettingInput': wrapCommand(handleSettingInput),
+  'Settings.handleInputFocus': wrapCommand(handleInputFocus),
+  'Settings.handleSettingSelect': wrapCommand(handleSettingSelect),
   'Settings.loadContent': wrapCommand(loadContent),
   'Settings.render2': render2,
   'Settings.renderActions': renderActions,
@@ -3614,50 +4563,10 @@ const commandMap = {
   'Settings.restoreState': restoreState,
   'Settings.saveState': wrapGetter(saveState),
   'Settings.terminate': terminate,
-  'Settings.handleClickTab': wrapCommand(handleClickTab),
-  'Settings.clear': wrapCommand(clear$1),
-  'Settings.handleInput': wrapCommand(handleInput)
-};
-
-const rpcs = Object.create(null);
-const set$g = (id, rpc) => {
-  rpcs[id] = rpc;
-};
-const get = id => {
-  return rpcs[id];
-};
-
-/* eslint-disable  @typescript-eslint/explicit-function-return-type */
-
-const create = rpcId => {
-  return {
-    // @ts-ignore
-    invoke(method, ...params) {
-      const rpc = get(rpcId);
-      // @ts-ignore
-      return rpc.invoke(method, ...params);
-    },
-    // @ts-ignore
-    invokeAndTransfer(method, ...params) {
-      const rpc = get(rpcId);
-      // @ts-ignore
-      return rpc.invokeAndTransfer(method, ...params);
-    },
-    set(rpc) {
-      set$g(rpcId, rpc);
-    },
-    async dispose() {
-      const rpc = get(rpcId);
-      await rpc.dispose();
-    }
-  };
+  'Settings.useNextSearchValue': wrapCommand(useNextSearchValue),
+  'Settings.usePreviousSearchValue': wrapCommand(usePreviousSearchValue),
+  'Settings.getKeyBindings': getKeyBindings$1
 };
-const RendererWorker$1 = 1;
-const {
-  set: set$3} = create(RendererWorker$1);
-const RendererWorker = {
-  __proto__: null,
-  set: set$3};
 
 const {
   set