@lvce-editor/static-server 0.56.9 → 0.56.11

package/static/{f9756ad → 7aa5779}/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;
+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,
+  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,559 @@ 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 Enum = 1;
+const String = 2;
+const Boolean$1 = 3;
+const Number$1 = 5;
+const Color = 6;
+const Url = 7;
+
+const handleSettingInput = (state, name, value, inputSource = User) => {
+  const {
+    items
+  } = state;
+
+  // TODO maybe have separate input functions for number and string inputs
+  const settingItem = items.find(item => item.id === name);
+  if (settingItem && settingItem.type === Number$1) {
+    const numberValue = value === '' ? '' : Number(value);
+    return handleSettingUpdate(state, name, numberValue, inputSource);
+  }
+  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';
@@ -1106,11 +1740,6 @@ const TextEditorTab = 'text-editor';
 const WindowTab = 'window';
 const WorkbenchTab = 'workbench';
 
-const Enum = 1;
-const String = 2;
-const Boolean$1 = 3;
-const Number$1 = 5;
-
 const emptyObject = {};
 const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
 const i18nString = (key, placeholders = emptyObject) => {
@@ -1141,8 +1770,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 +1786,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 +1803,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 +2020,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 +2076,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 +2129,11 @@ const noSettingsMatching = searchTerm => {
     PH1: searchTerm
   });
 };
+const matchingSettings = count => {
+  return i18nString(MatchingSettings, {
+    PH1: count.toString()
+  });
+};
 
 // Text Editor Settings
 const wordWrap = () => {
@@ -2178,376 +2822,395 @@ const wrappingIndent = () => {
 const wrappingIndentDescription = () => {
   return i18nString(WrappingIndentDescription);
 };
+const unknownSettingType = () => {
+  return i18nString(UnknownSettingType);
+};
 
-const getSettingItems = async () => {
+const getSettingItemsApplications = () => {
+  return [{
+    id: 'telemetry',
+    heading: telemetry(),
+    description: telemetryDescription(),
+    type: Boolean$1,
+    value: 'true',
+    category: ApplicationsTab
+  }, {
+    id: 'updates',
+    heading: autoUpdates(),
+    description: autoUpdatesDescription(),
+    type: Boolean$1,
+    value: 'true',
+    category: ApplicationsTab
+  }];
+};
+
+const getSettingItemsEditor = () => {
   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,
     value: 'Fira Code',
     category: TextEditorTab
-  },
-  // Text Editor Settings
-  {
-    id: 'wordWrap',
+  }, {
+    id: 'editor.wordWrap',
     heading: wordWrap(),
     description: wordWrapDescription(),
     type: Enum,
     value: 'off',
     category: TextEditorTab,
     options: [{
-      id: 'on',
+      id: 'editor.on',
       label: 'On' // i18n
     }, {
-      id: 'off',
+      id: 'editor.off',
       label: 'off' // i18n
     }]
   }, {
-    id: 'lineNumbers',
+    id: 'editor.lineNumbers',
     heading: lineNumbers(),
     description: lineNumbersDescription(),
     type: Enum,
     value: 'on',
     category: TextEditorTab,
     options: [{
-      id: 'on',
+      id: 'editor.on',
       label: 'On' // i18n
     }, {
-      id: 'off',
+      id: 'editor.off',
       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,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'colorDecorators',
+    id: 'editor.colorDecorators',
     heading: colorDecorators(),
     description: colorDecoratorsDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'lightbulb',
+    id: 'editor.lightbulb',
     heading: lightbulb(),
     description: lightbulbDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'codeActionsOnSave',
+    id: 'editor.codeActionsOnSave',
     heading: codeActionsOnSave(),
     description: codeActionsOnSaveDescription(),
     type: Boolean$1,
     value: 'false',
     category: TextEditorTab
   }, {
-    id: 'formatOnPaste',
+    id: 'editor.formatOnPaste',
     heading: formatOnPaste(),
     description: formatOnPasteDescription(),
     type: Boolean$1,
     value: 'false',
     category: TextEditorTab
   }, {
-    id: 'formatOnType',
+    id: 'editor.formatOnType',
     heading: formatOnType(),
     description: formatOnTypeDescription(),
     type: Boolean$1,
     value: 'false',
     category: TextEditorTab
   }, {
-    id: 'acceptSuggestionOnCommitCharacter',
+    id: 'editor.acceptSuggestionOnCommitCharacter',
     heading: acceptSuggestionOnCommitCharacter(),
     description: acceptSuggestionOnCommitCharacterDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'acceptSuggestionOnEnter',
+    id: 'editor.acceptSuggestionOnEnter',
     heading: acceptSuggestionOnEnter(),
     description: acceptSuggestionOnEnterDescription(),
     type: String,
     value: 'on',
     category: TextEditorTab
   }, {
-    id: 'tabCompletion',
+    id: 'editor.tabCompletion',
     heading: tabCompletion(),
     description: tabCompletionDescription(),
     type: String,
     value: 'on',
     category: TextEditorTab
   }, {
-    id: 'wordBasedSuggestions',
+    id: 'editor.wordBasedSuggestions',
     heading: wordBasedSuggestions(),
     description: wordBasedSuggestionsDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'suggestOnTriggerCharacters',
+    id: 'editor.suggestOnTriggerCharacters',
     heading: suggestOnTriggerCharacters(),
     description: suggestOnTriggerCharactersDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'quickSuggestions',
+    id: 'editor.quickSuggestions',
     heading: quickSuggestions(),
     description: quickSuggestionsDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'parameterHints',
+    id: 'editor.parameterHints',
     heading: parameterHints(),
     description: parameterHintsDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'autoClosingBrackets',
+    id: 'editor.autoClosingBrackets',
     heading: autoClosingBrackets(),
     description: autoClosingBracketsDescription(),
     type: String,
     value: 'always',
     category: TextEditorTab
   }, {
-    id: 'autoClosingQuotes',
+    id: 'editor.autoClosingQuotes',
     heading: autoClosingQuotes(),
     description: autoClosingQuotesDescription(),
     type: String,
     value: 'always',
     category: TextEditorTab
   }, {
-    id: 'autoClosingOvertype',
+    id: 'editor.autoClosingOvertype',
     heading: autoClosingOvertype(),
     description: autoClosingOvertypeDescription(),
     type: String,
     value: 'auto',
     category: TextEditorTab
   }, {
-    id: 'autoClosingDelete',
+    id: 'editor.autoClosingDelete',
     heading: autoClosingDelete(),
     description: autoClosingDeleteDescription(),
     type: String,
     value: 'auto',
     category: TextEditorTab
   }, {
-    id: 'autoSurround',
+    id: 'editor.autoSurround',
     heading: autoSurround(),
     description: autoSurroundDescription(),
     type: String,
     value: 'quotes',
     category: TextEditorTab
   }, {
-    id: 'bracketPairColorization',
+    id: 'editor.bracketPairColorization',
     heading: bracketPairColorization(),
     description: bracketPairColorizationDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'guides',
+    id: 'editor.guides',
     heading: guides(),
     description: guidesDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'dragAndDrop',
+    id: 'editor.dragAndDrop',
     heading: dragAndDrop(),
     description: dragAndDropDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'copyWithSyntaxHighlighting',
+    id: 'editor.copyWithSyntaxHighlighting',
     heading: copyWithSyntaxHighlighting(),
     description: copyWithSyntaxHighlightingDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'multiCursorModifier',
+    id: 'editor.multiCursorModifier',
     heading: multiCursorModifier(),
     description: multiCursorModifierDescription(),
     type: String,
     value: 'alt',
     category: TextEditorTab
   }, {
-    id: 'multiCursorPaste',
+    id: 'editor.multiCursorPaste',
     heading: multiCursorPaste(),
     description: multiCursorPasteDescription(),
     type: String,
     value: 'full',
     category: TextEditorTab
   }, {
-    id: 'occurrencesHighlight',
+    id: 'editor.occurrencesHighlight',
     heading: occurrencesHighlight(),
     description: occurrencesHighlightDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'selectionHighlight',
+    id: 'editor.selectionHighlight',
     heading: selectionHighlight(),
     description: selectionHighlightDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'semanticHighlighting',
+    id: 'editor.semanticHighlighting',
     heading: semanticHighlighting(),
     description: semanticHighlightingDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'tokenColorCustomizations',
+    id: 'editor.tokenColorCustomizations',
     heading: tokenColorCustomizations(),
     description: tokenColorCustomizationsDescription(),
     type: String,
     value: '{}',
     category: TextEditorTab
   }, {
-    id: 'workbenchColorCustomizations',
+    id: 'editor.workbenchColorCustomizations',
     heading: workbenchColorCustomizations(),
     description: workbenchColorCustomizationsDescription(),
     type: String,
@@ -2561,484 +3224,483 @@ const getSettingItems = async () => {
     value: '{}',
     category: TextEditorTab
   }, {
-    id: 'diffEditor',
+    id: 'editor.diffEditor',
     heading: diffEditor(),
     description: diffEditorDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'diffWordWrap',
+    id: 'editor.diffWordWrap',
     heading: diffWordWrap(),
     description: diffWordWrapDescription(),
     type: String,
     value: 'inherit',
     category: TextEditorTab
   }, {
-    id: 'diffCodeLens',
+    id: 'editor.diffCodeLens',
     heading: diffCodeLens(),
     description: diffCodeLensDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'diffRenderSideBySide',
+    id: 'editor.diffRenderSideBySide',
     heading: diffRenderSideBySide(),
     description: diffRenderSideBySideDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'diffIgnoreTrimWhitespace',
+    id: 'editor.diffIgnoreTrimWhitespace',
     heading: diffIgnoreTrimWhitespace(),
     description: diffIgnoreTrimWhitespaceDescription(),
     type: Boolean$1,
     value: 'false',
     category: TextEditorTab
   }, {
-    id: 'diffRenderIndicators',
+    id: 'editor.diffRenderIndicators',
     heading: diffRenderIndicators(),
     description: diffRenderIndicatorsDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'diffRenderOverviewRuler',
+    id: 'editor.diffRenderOverviewRuler',
     heading: diffRenderOverviewRuler(),
     description: diffRenderOverviewRulerDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'diffRenderMarginRevertIcon',
+    id: 'editor.diffRenderMarginRevertIcon',
     heading: diffRenderMarginRevertIcon(),
     description: diffRenderMarginRevertIconDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
-  },
-  // Additional Text Editor Settings
-  {
-    id: 'insertMode',
+  }, {
+    id: 'editor.insertMode',
     heading: insertMode(),
     description: insertModeDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'overwriteMode',
+    id: 'editor.overwriteMode',
     heading: overwriteMode(),
     description: overwriteModeDescription(),
     type: Boolean$1,
     value: 'false',
     category: TextEditorTab
   }, {
-    id: 'readOnly',
+    id: 'editor.readOnly',
     heading: readOnly(),
     description: readOnlyDescription(),
     type: Boolean$1,
     value: 'false',
     category: TextEditorTab
   }, {
-    id: 'accessibilitySupport',
+    id: 'editor.accessibilitySupport',
     heading: accessibilitySupport(),
     description: accessibilitySupportDescription(),
     type: String,
     value: 'auto',
     category: TextEditorTab
   }, {
-    id: 'autoIndent',
+    id: 'editor.autoIndent',
     heading: autoIndent(),
     description: autoIndentDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'bracketMatching',
+    id: 'editor.bracketMatching',
     heading: bracketMatching(),
     description: bracketMatchingDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'centeredLayout',
+    id: 'editor.centeredLayout',
     heading: centeredLayout(),
     description: centeredLayoutDescription(),
     type: Boolean$1,
     value: 'false',
     category: TextEditorTab
   }, {
-    id: 'columnSelection',
+    id: 'editor.columnSelection',
     heading: columnSelection(),
     description: columnSelectionDescription(),
     type: Boolean$1,
     value: 'false',
     category: TextEditorTab
   }, {
-    id: 'contextmenu',
+    id: 'editor.contextmenu',
     heading: contextmenu(),
     description: contextmenuDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'cursorSmoothCaretAnimation',
+    id: 'editor.cursorSmoothCaretAnimation',
     heading: cursorSmoothCaretAnimation(),
     description: cursorSmoothCaretAnimationDescription(),
     type: String,
     value: 'off',
     category: TextEditorTab
   }, {
-    id: 'cursorSurroundingLines',
+    id: 'editor.cursorSurroundingLines',
     heading: cursorSurroundingLines(),
     description: cursorSurroundingLinesDescription(),
     type: Number$1,
     value: '3',
     category: TextEditorTab
   }, {
-    id: 'cursorSurroundingLinesStyle',
+    id: 'editor.cursorSurroundingLinesStyle',
     heading: cursorSurroundingLinesStyle(),
     description: cursorSurroundingLinesStyleDescription(),
     type: String,
     value: 'all',
     category: TextEditorTab
   }, {
-    id: 'disableMonospaceOptimizations',
+    id: 'editor.disableMonospaceOptimizations',
     heading: disableMonospaceOptimizations(),
     description: disableMonospaceOptimizationsDescription(),
     type: Boolean$1,
     value: 'false',
     category: TextEditorTab
   }, {
-    id: 'emptySelectionClipboard',
+    id: 'editor.emptySelectionClipboard',
     heading: emptySelectionClipboard(),
     description: emptySelectionClipboardDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'extraEditorClassName',
+    id: 'editor.extraEditorClassName',
     heading: extraEditorClassName(),
     description: extraEditorClassNameDescription(),
     type: String,
     value: '',
     category: TextEditorTab
   }, {
-    id: 'fastScrollSensitivity',
+    id: 'editor.fastScrollSensitivity',
     heading: fastScrollSensitivity(),
     description: fastScrollSensitivityDescription(),
     type: Number$1,
     value: '5',
     category: TextEditorTab
   }, {
-    id: 'find',
+    id: 'editor.find',
     heading: find(),
     description: findDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'fixedOverflowWidgets',
+    id: 'editor.fixedOverflowWidgets',
     heading: fixedOverflowWidgets(),
     description: fixedOverflowWidgetsDescription(),
     type: Boolean$1,
     value: 'false',
     category: TextEditorTab
   }, {
-    id: 'foldingStrategy',
+    id: 'editor.foldingStrategy',
     heading: foldingStrategy(),
     description: foldingStrategyDescription(),
     type: String,
     value: 'auto',
     category: TextEditorTab
   }, {
-    id: 'fontLigatures',
+    id: 'editor.fontLigatures',
     heading: fontLigatures(),
     description: fontLigaturesDescription(),
     type: Boolean$1,
     value: 'false',
     category: TextEditorTab
   }, {
-    id: 'glyphMargin',
+    id: 'editor.glyphMargin',
     heading: glyphMargin(),
     description: glyphMarginDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'gotoLocation',
+    id: 'editor.gotoLocation',
     heading: gotoLocation(),
     description: gotoLocationDescription(),
     type: String,
     value: 'mouse',
     category: TextEditorTab
   }, {
-    id: 'hideCursorInOverviewRuler',
+    id: 'editor.hideCursorInOverviewRuler',
     heading: hideCursorInOverviewRuler(),
     description: hideCursorInOverviewRulerDescription(),
     type: Boolean$1,
     value: 'false',
     category: TextEditorTab
   }, {
-    id: 'hover',
+    id: 'editor.hover',
     heading: hover(),
     description: hoverDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'inDiffEditor',
+    id: 'editor.inDiffEditor',
     heading: inDiffEditor(),
     description: inDiffEditorDescription(),
     type: Boolean$1,
     value: 'false',
     category: TextEditorTab
   }, {
-    id: 'letterSpacing',
+    id: 'editor.letterSpacing',
     heading: letterSpacing(),
     description: letterSpacingDescription(),
     type: Number$1,
     value: '0',
     category: TextEditorTab
   }, {
-    id: 'lightbulbEnabled',
+    id: 'editor.lightbulbEnabled',
     heading: lightbulbEnabled(),
     description: lightbulbEnabledDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'lineDecorationsWidth',
+    id: 'editor.lineDecorationsWidth',
     heading: lineDecorationsWidth(),
     description: lineDecorationsWidthDescription(),
     type: Number$1,
     value: '10',
     category: TextEditorTab
   }, {
-    id: 'lineHeight',
+    id: 'editor.lineHeight',
     heading: lineHeight(),
     description: lineHeightDescription(),
     type: Number$1,
     value: '0',
     category: TextEditorTab
   }, {
-    id: 'matchBrackets',
+    id: 'editor.matchBrackets',
     heading: matchBrackets(),
     description: matchBracketsDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'minimapEnabled',
+    id: 'editor.minimapEnabled',
     heading: minimapEnabled(),
     description: minimapEnabledDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'mouseWheelScrollSensitivity',
+    id: 'editor.mouseWheelScrollSensitivity',
     heading: mouseWheelScrollSensitivity(),
     description: mouseWheelScrollSensitivityDescription(),
     type: Number$1,
     value: '1',
     category: TextEditorTab
   }, {
-    id: 'mouseWheelZoom',
+    id: 'editor.mouseWheelZoom',
     heading: mouseWheelZoom(),
     description: mouseWheelZoomDescription(),
     type: Boolean$1,
     value: 'false',
     category: TextEditorTab
   }, {
-    id: 'multiCursorMergeOverlapping',
+    id: 'editor.multiCursorMergeOverlapping',
     heading: multiCursorMergeOverlapping(),
     description: multiCursorMergeOverlappingDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'overviewRulerBorder',
+    id: 'editor.overviewRulerBorder',
     heading: overviewRulerBorder(),
     description: overviewRulerBorderDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'overviewRulerLanes',
+    id: 'editor.overviewRulerLanes',
     heading: overviewRulerLanes(),
     description: overviewRulerLanesDescription(),
     type: Number$1,
     value: '3',
     category: TextEditorTab
   }, {
-    id: 'peekWidgetDefaultFocus',
+    id: 'editor.peekWidgetDefaultFocus',
     heading: peekWidgetDefaultFocus(),
     description: peekWidgetDefaultFocusDescription(),
     type: String,
     value: 'editor',
     category: TextEditorTab
   }, {
-    id: 'quickSuggestionsDelay',
+    id: 'editor.quickSuggestionsDelay',
     heading: quickSuggestionsDelay(),
     description: quickSuggestionsDelayDescription(),
     type: Number$1,
     value: '10',
     category: TextEditorTab
   }, {
-    id: 'renderFinalNewline',
+    id: 'editor.renderFinalNewline',
     heading: renderFinalNewline(),
     description: renderFinalNewlineDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'renderValidationDecorations',
+    id: 'editor.renderValidationDecorations',
     heading: renderValidationDecorations(),
     description: renderValidationDecorationsDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'revealHorizontalRightPadding',
+    id: 'editor.revealHorizontalRightPadding',
     heading: revealHorizontalRightPadding(),
     description: revealHorizontalRightPaddingDescription(),
     type: Number$1,
     value: '30',
     category: TextEditorTab
   }, {
-    id: 'roundedSelection',
+    id: 'editor.roundedSelection',
     heading: roundedSelection(),
     description: roundedSelectionDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'rulers',
+    id: 'editor.rulers',
     heading: rulers(),
     description: rulersDescription(),
     type: String,
     value: '[]',
     category: TextEditorTab
   }, {
-    id: 'scrollBeyondLastColumn',
+    id: 'editor.scrollBeyondLastColumn',
     heading: scrollBeyondLastColumn(),
     description: scrollBeyondLastColumnDescription(),
     type: Number$1,
     value: '5',
     category: TextEditorTab
   }, {
-    id: 'scrollbar',
+    id: 'editor.scrollbar',
     heading: scrollbar(),
     description: scrollbarDescription(),
     type: String,
     value: 'auto',
     category: TextEditorTab
   }, {
-    id: 'scrollPredominantAxis',
+    id: 'editor.scrollPredominantAxis',
     heading: scrollPredominantAxis(),
     description: scrollPredominantAxisDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'selectionClipboard',
+    id: 'editor.selectionClipboard',
     heading: selectionClipboard(),
     description: selectionClipboardDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'showUnused',
+    id: 'editor.background',
+    heading: 'Editor background',
+    description: 'Editor background color',
+    type: Color,
+    value: '#567567',
+    category: TextEditorTab
+  }, {
+    id: 'editor.showUnused',
     heading: showUnused(),
     description: showUnusedDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'snippetSuggestions',
+    id: 'editor.snippetSuggestions',
     heading: snippetSuggestions(),
     description: snippetSuggestionsDescription(),
     type: String,
     value: 'bottom',
     category: TextEditorTab
   }, {
-    id: 'suggest',
+    id: 'editor.suggest',
     heading: suggest(),
     description: suggestDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'suggestFontSize',
+    id: 'editor.suggestFontSize',
     heading: suggestFontSize(),
     description: suggestFontSizeDescription(),
     type: Number$1,
     value: '0',
     category: TextEditorTab
   }, {
-    id: 'suggestLineHeight',
+    id: 'editor.suggestLineHeight',
     heading: suggestLineHeight(),
     description: suggestLineHeightDescription(),
     type: Number$1,
     value: '0',
     category: TextEditorTab
   }, {
-    id: 'suggestSelection',
+    id: 'editor.suggestSelection',
     heading: suggestSelection(),
     description: suggestSelectionDescription(),
     type: String,
     value: 'recentlyUsed',
     category: TextEditorTab
   }, {
-    id: 'useTabStops',
+    id: 'editor.useTabStops',
     heading: useTabStops(),
     description: useTabStopsDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'wordSeparators',
+    id: 'editor.wordSeparators',
     heading: wordSeparators(),
     description: wordSeparatorsDescription(),
     type: String,
     value: '`~!@#$%^&*()-=+[{]}\\|;:\'",.<>/?',
     category: TextEditorTab
   }, {
-    id: 'wrappingIndent',
+    id: 'editor.wrappingIndent',
     heading: wrappingIndent(),
     description: wrappingIndentDescription(),
     type: String,
     value: 'same',
     category: TextEditorTab
+  }];
+};
+
+const getSettingItemsExtensions = () => {
+  return [{
+    id: 'extensionsAutoUpdate',
+    heading: autoUpdateExtensions(),
+    description: autoUpdateExtensionsDescription(),
+    type: Boolean$1,
+    value: 'true',
+    category: ExtensionsTab
   }, {
-    id: 'theme',
-    heading: theme(),
-    description: themeDescription(),
-    type: String,
-    value: 'Dark',
-    category: WorkbenchTab
-  }, {
-    id: 'sidebarPosition',
-    heading: sidebarPosition(),
-    description: sidebarPositionDescription(),
-    type: String,
-    value: 'Left',
-    category: WorkbenchTab
-  }, {
-    id: 'windowTitle',
-    heading: windowTitle(),
-    description: windowTitleDescription(),
-    type: String,
-    value: 'Settings View',
-    category: WindowTab
-  }, {
-    id: 'windowSize',
-    heading: windowSize(),
-    description: windowSizeDescription(),
-    type: String,
-    value: '1024x768',
-    category: WindowTab
-  }, {
+    id: 'extensionRecommendations',
+    heading: extensionRecommendations(),
+    description: extensionRecommendationsDescription(),
+    type: Boolean$1,
+    value: 'true',
+    category: ExtensionsTab
+  }];
+};
+
+const getSettingItemsFeatures = () => {
+  return [{
     id: 'autoSave',
     heading: autoSave(),
     description: autoSaveDescription(),
@@ -3052,21 +3714,11 @@ const getSettingItems = async () => {
     type: Boolean$1,
     value: 'false',
     category: FeaturesTab
-  }, {
-    id: 'telemetry',
-    heading: telemetry(),
-    description: telemetryDescription(),
-    type: Boolean$1,
-    value: 'true',
-    category: ApplicationsTab
-  }, {
-    id: 'updates',
-    heading: autoUpdates(),
-    description: autoUpdatesDescription(),
-    type: Boolean$1,
-    value: 'true',
-    category: ApplicationsTab
-  }, {
+  }];
+};
+
+const getSettingItemsSecurity = () => {
+  return [{
     id: 'encryption',
     heading: fileEncryption(),
     description: fileEncryptionDescription(),
@@ -3080,23 +3732,49 @@ const getSettingItems = async () => {
     type: Boolean$1,
     value: 'false',
     category: SecurityTab
+  }];
+};
+
+const getSettingItemsWindow = () => {
+  return [{
+    id: 'windowTitle',
+    heading: windowTitle(),
+    description: windowTitleDescription(),
+    type: String,
+    value: 'Settings View',
+    category: WindowTab
   }, {
-    id: 'extensionsAutoUpdate',
-    heading: autoUpdateExtensions(),
-    description: autoUpdateExtensionsDescription(),
-    type: Boolean$1,
-    value: 'true',
-    category: ExtensionsTab
+    id: 'windowSize',
+    heading: windowSize(),
+    description: windowSizeDescription(),
+    type: String,
+    value: '1024x768',
+    category: WindowTab
+  }];
+};
+
+const getSettingItemsWorkbench = () => {
+  return [{
+    id: 'theme',
+    heading: theme(),
+    description: themeDescription(),
+    type: String,
+    value: 'Dark',
+    category: WorkbenchTab
   }, {
-    id: 'extensionRecommendations',
-    heading: extensionRecommendations(),
-    description: extensionRecommendationsDescription(),
-    type: Boolean$1,
-    value: 'true',
-    category: ExtensionsTab
+    id: 'sidebarPosition',
+    heading: sidebarPosition(),
+    description: sidebarPositionDescription(),
+    type: String,
+    value: 'Left',
+    category: WorkbenchTab
   }];
 };
 
+const getSettingItems = async () => {
+  return [...getSettingItemsEditor(), ...getSettingItemsWorkbench(), ...getSettingItemsWindow(), ...getSettingItemsFeatures(), ...getSettingItemsApplications(), ...getSettingItemsSecurity(), ...getSettingItemsExtensions()];
+};
+
 const getTabs = () => {
   const tabs = [{
     id: TextEditorTab,
@@ -3130,171 +3808,237 @@ 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 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 getSavedScrollOffset = savedState => {
+  if (savedState && typeof savedState === 'object' && 'scrollOffset' in savedState && typeof savedState.scrollOffset === 'number') {
+    return savedState.scrollOffset;
   }
   return 0;
 };
-const getSavedWorkspacePath = savedState => {
-  if (savedState && typeof savedState === 'object' && 'workspacePath' in savedState && typeof savedState.workspacePath === 'string') {
-    return savedState.workspacePath;
+
+const getSavedSearchValue = savedState => {
+  if (savedState && typeof savedState === 'object' && 'searchValue' in savedState && typeof savedState.searchValue === 'string') {
+    return savedState.searchValue;
   }
   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 {
-      root: '',
       minLineY: 0,
       deltaY: 0,
       tabId: '',
-      searchValue: ''
+      searchValue: '',
+      scrollOffset: 0,
+      history: [],
+      historyIndex: -1
     };
   }
-  const root = getSavedWorkspacePath(savedState);
   const minLineY = getSavedMinLineY(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,
-    items,
     filteredItems,
-    preferences,
     inputSource: Script,
-    searchValue
+    items,
+    modifiedSettings,
+    preferences,
+    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 CheckBox = 'CheckBox';
+const InputBox = 'InputBox';
+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 enabledClass = SearchFieldButton;
+const disabledClass = mergeClassNames(enabledClass, 'SearchFieldButtonDisabled');
+const getClearButtonClassName = hasSearchValue => {
+  if (hasSearchValue) {
+    return enabledClass;
+  }
+  return disabledClass;
+};
+
+const icon = {
+  type: VirtualDomElements.Div,
+  className: mergeClassNames(MaskIcon, MaskIconClearAll),
+  childCount: 0
+};
+const getSettingsInputButtonsDom = hasSearchValue => {
+  return [{
+    type: VirtualDomElements.Button,
+    className: getClearButtonClassName(hasSearchValue),
+    childCount: 1,
+    ariaLabel: clear(),
+    name: Clear$1,
+    disabled: !hasSearchValue,
+    onClick: HandleClickClear
+  }, icon];
+};
 
 const getSettingsInputDom = () => {
   const placeholder = searchSettings();
   return [{
-    type: VirtualDomElements.Div,
-    className: 'SettingsInputWrapper',
-    childCount: 2
-  }, {
     type: VirtualDomElements.Input,
-    className: 'InputBox SettingsSearchInput',
+    className: mergeClassNames(InputBox, SettingsSearchInput, 'MultilineInputBox'),
     placeholder,
     childCount: 0,
     name: SettingsSearch,
-    onInput: HandleInput
-  }, {
-    type: VirtualDomElements.Button,
-    className: 'Button InputButton SearchFieldButton',
-    childCount: 1,
-    ariaLabel: clear(),
-    name: Clear$1,
-    // TODO add click event listener
-    onClick: HandleClickClear
-  }, {
-    type: VirtualDomElements.Div,
-    className: 'MaskIcon MaskIconClearAll',
-    childCount: 0
+    onInput: HandleInput,
+    onFocus: HandleInputFocus
   }];
 };
 
-const getSettingsHeaderDom = () => {
+const getChildCount = hasSearchValue => {
+  return hasSearchValue ? 3 : 2;
+};
+const getSettingsHeaderDom = (filteredSettingsCount, hasSearchValue) => {
+  const childCount = getChildCount(hasSearchValue);
   return [{
     type: VirtualDomElements.Div,
-    className: 'SettingsHeader',
+    className: SettingsHeader,
     childCount: 1
-  }, ...getSettingsInputDom()];
+  }, {
+    type: VirtualDomElements.Div,
+    className: mergeClassNames(SettingsInputWrapper, 'SearchField'),
+    childCount
+  }, ...getSettingsInputDom(), ...getSettingsInputBadgeDom(filteredSettingsCount, hasSearchValue), ...getSettingsInputButtonsDom(hasSearchValue)];
 };
 
 const getInputId = id => {
@@ -3305,26 +4049,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 +4082,90 @@ const getItemCheckBoxVirtualDom = item => {
   }, text(description)];
 };
 
-const getItemNumberVirtualDom = item => {
+const parent = {
+  type: VirtualDomElements.H3,
+  childCount: 1
+};
+const getItemHeadingDom = heading => {
+  return [parent, 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 +4184,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 +4223,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 +4281,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 +4308,7 @@ const getSettingsItemsDom = (items, searchValue) => {
   }
   return [{
     type: VirtualDomElements.Div,
-    className: 'SettingsItems',
+    className: SettingsItems,
     childCount: items.length
   }, ...items.flatMap(getItemVirtualDom)];
 };
@@ -3460,17 +4318,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 +4348,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 +4358,7 @@ const getSettingsTabsDom = tabs => {
 const getSettingsSideBarDom = tabs => {
   return [{
     type: VirtualDomElements.Aside,
-    className: 'SettingsSideBar',
+    className: SettingsSideBar,
     childCount: 1
   }, ...getSettingsTabsDom(tabs)];
 };
@@ -3507,7 +4366,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)];
 };
@@ -3518,11 +4377,13 @@ const getSettingsDom = state => {
     filteredItems,
     searchValue
   } = state;
+  const hasSearchValue = searchValue.trim().length > 0;
+  const filteredItemsCount = filteredItems.length;
   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 +4391,34 @@ 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,
+    preferences
+  } = newState;
+  const enabledSettings = filteredItems.filter(item => enabledTypes.includes(item.type));
+  const inputValues = enabledSettings.map(item => {
+    const value = preferences[item.id] || item.value;
+    return {
+      name: item.id,
+      value
+    };
+  });
+  return ['Viewlet.setInputValues', id, inputValues];
+};
+
 const renderValue = (oldState, newState) => {
   const {
     id,
@@ -3544,6 +4433,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,31 +4479,110 @@ 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 {
-    expandedPaths: [],
-    root: '',
     minLineY: 0,
     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 +4590,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