@lvce-editor/static-server 0.56.10 → 0.56.12

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

@@ -914,15 +914,14 @@ const terminate = () => {
   globalThis.close();
 };
 
-const isItemModified = (item, preferences) => {
-  return item.id in preferences;
-};
-const addModifiedProperty = (items, preferences) => {
-  return items.map(item => ({
-    ...item,
-    modified: isItemModified(item, preferences)
-  }));
+const filterBySearch = (items, searchValue) => {
+  if (!searchValue || !searchValue.trim()) {
+    return items;
+  }
+  const normalizedSearchValue = searchValue.toLowerCase().trim();
+  return items.filter(item => item.heading.toLowerCase().includes(normalizedSearchValue));
 };
+
 const filterByTab = (items, tabs) => {
   const selectedTab = tabs.find(tab => tab.selected);
   if (!selectedTab) {
@@ -930,17 +929,36 @@ const filterByTab = (items, tabs) => {
   }
   return items.filter(item => item.category === selectedTab.id);
 };
-const filterBySearch = (items, searchValue) => {
-  if (!searchValue || !searchValue.trim()) {
-    return items;
-  }
-  const normalizedSearchValue = searchValue.toLowerCase().trim();
-  return items.filter(item => item.heading.toLowerCase().includes(normalizedSearchValue));
+
+const isItemModified = (item, preferences) => {
+  return item.id in preferences;
 };
-const getFilteredItems = (items, tabs, searchValue = '', preferences) => {
+const validateSettings = (items, modifiedSettings, preferences) => {
+  return items.map(item => {
+    const value = preferences[item.id] ?? item.value;
+    const errorMessage = item.validate ? item.validate(value) : '';
+    const hasError = errorMessage.length > 0;
+    const modified = isItemModified(item, modifiedSettings);
+    return {
+      id: item.id,
+      heading: item.heading,
+      description: item.description,
+      type: item.type,
+      value: item.value,
+      category: item.category,
+      options: item.options,
+      modified,
+      errorMessage,
+      hasError
+    };
+  });
+};
+
+const getFilteredItems = (items, tabs, searchValue, modifiedSettings, preferences) => {
   const tabFilteredItems = filterByTab(items, tabs);
-  const itemsWithModifiedProperty = addModifiedProperty(tabFilteredItems, preferences);
-  return filterBySearch(itemsWithModifiedProperty, searchValue);
+  const searchFilteredItems = filterBySearch(tabFilteredItems, searchValue);
+  const validated = validateSettings(searchFilteredItems, modifiedSettings, preferences);
+  return validated;
 };
 
 const User = 1;
@@ -952,10 +970,11 @@ const clear$1 = state => {
   const {
     items,
     tabs,
-    modifiedSettings
+    modifiedSettings,
+    preferences
   } = state;
   const newSearchValue = '';
-  const filteredItems = getFilteredItems(items, tabs, newSearchValue, modifiedSettings);
+  const filteredItems = getFilteredItems(items, tabs, newSearchValue, modifiedSettings, preferences);
   return {
     ...state,
     filteredItems,
@@ -1065,10 +1084,12 @@ const diff2 = uid => {
   return diffResult;
 };
 
+const Group = 'group';
 const Tab$1 = 'tab';
 const TabList = 'tablist';
 const AriaRoles = {
   __proto__: null,
+  Group,
   Tab: Tab$1,
   TabList};
 const Viewlet$1 = 'Viewlet';
@@ -1085,7 +1106,7 @@ const KeyCode = {
 const mergeClassNames = (...classNames) => {
   return classNames.filter(Boolean).join(' ');
 };
-const Button$1 = 1;
+const Button = 1;
 const Div = 4;
 const H1 = 5;
 const Input = 6;
@@ -1100,7 +1121,7 @@ const Label = 66;
 const VirtualDomElements = {
   __proto__: null,
   Aside,
-  Button: Button$1,
+  Button,
   Div,
   H1,
   H3,
@@ -1164,10 +1185,11 @@ const handleClickTab = (state, name) => {
     items,
     tabs,
     searchValue,
-    modifiedSettings
+    modifiedSettings,
+    preferences
   } = state;
   const updatedTabs = getUpdatedTabs(tabs, name);
-  const filteredItems = getFilteredItems(items, updatedTabs, searchValue, modifiedSettings);
+  const filteredItems = getFilteredItems(items, updatedTabs, searchValue, modifiedSettings, preferences);
   return {
     ...state,
     tabs: updatedTabs,
@@ -1241,9 +1263,10 @@ const handleInput = (state, value, inputSource = User) => {
     items,
     tabs,
     history,
-    modifiedSettings
+    modifiedSettings,
+    preferences
   } = state;
-  const filteredItems = getFilteredItems(items, tabs, value, modifiedSettings);
+  const filteredItems = getFilteredItems(items, tabs, value, modifiedSettings, preferences);
   const {
     newHistory,
     newHistoryIndex
@@ -1283,11 +1306,11 @@ const handleScroll = (state, scrollTop, inputSource = User) => {
   };
 };
 
-const getNewFilteredItems = (oldModifiedSetings, newModifiedSettings, items, tabs, searchValue, oldFilteredItems) => {
-  if (oldModifiedSetings === newModifiedSettings) {
+const getNewFilteredItems = (oldModifiedSetings, newModifiedSettings, items, tabs, searchValue, oldFilteredItems, oldPreferences, newPreferences) => {
+  if (oldModifiedSetings === newModifiedSettings && oldPreferences === newPreferences) {
     return oldFilteredItems;
   }
-  return getFilteredItems(items, tabs, searchValue, newModifiedSettings);
+  return getFilteredItems(items, tabs, searchValue, newModifiedSettings, newPreferences);
 };
 
 const getNewModifiedSettings = (modifiedSettings, name) => {
@@ -1314,7 +1337,7 @@ const handleSettingUpdate = (state, name, value, inputSource) => {
     ...preferences,
     [name]: value
   };
-  const newFilteredItems = getNewFilteredItems(modifiedSettings, newModifiedSettings, items, tabs, searchValue, filteredItems);
+  const newFilteredItems = getNewFilteredItems(modifiedSettings, newModifiedSettings, items, tabs, searchValue, filteredItems, preferences, newPreferences);
   return {
     ...state,
     inputSource,
@@ -1327,7 +1350,24 @@ 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);
 };
 
@@ -1434,6 +1474,11 @@ const sendMessagePortToEditorWorker = async (port, rpcId) => {
   // @ts-ignore
   await invokeAndTransfer$3('SendMessagePortToExtensionHostWorker.sendMessagePortToEditorWorker', port, command, rpcId);
 };
+const sendMessagePortToErrorWorker = async (port, rpcId) => {
+  const command = 'HandleMessagePort.handleMessagePort';
+  // @ts-ignore
+  await invokeAndTransfer$3('SendMessagePortToExtensionHostWorker.sendMessagePortToErrorWorker', port, command, rpcId);
+};
 const sendMessagePortToMarkdownWorker = async (port, rpcId) => {
   const command = 'Markdown.handleMessagePort';
   // @ts-ignore
@@ -1683,6 +1728,7 @@ const RendererWorker = {
   searchFileHtml,
   searchFileMemory,
   sendMessagePortToEditorWorker,
+  sendMessagePortToErrorWorker,
   sendMessagePortToExtensionHostWorker,
   sendMessagePortToFileSystemWorker,
   sendMessagePortToMarkdownWorker,
@@ -1723,13 +1769,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 Color = 6;
-const Url = 7;
-
 const emptyObject = {};
 const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
 const i18nString = (key, placeholders = emptyObject) => {
@@ -2816,375 +2855,419 @@ 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: 'Editor.fontSize',
+    id: 'editor.fontSize',
     heading: fontSize(),
     description: fontSizeDescription(),
     type: Number$1,
     value: 15,
-    category: TextEditorTab
+    category: TextEditorTab,
+    validate(value) {
+      if (typeof value !== 'number') {
+        return 'font size must be of type number';
+      }
+      const minFontSize = 10;
+      const maxFontSize = 100;
+      if (value < minFontSize) {
+        return 'font size must be at least 10';
+      }
+      if (value > maxFontSize) {
+        return 'font size must not be greater than 100';
+      }
+      return '';
+    }
   }, {
-    id: 'Editor.fontFamily',
+    id: 'editor.fontFamily',
     heading: fontFamily(),
     description: fontFamilyDescription(),
     type: String,
     value: 'Fira Code',
     category: TextEditorTab
-  },
-  // Text Editor Settings
-  {
-    id: 'Editor.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: 'Editor.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: 'Editor.minimap',
+    id: 'editor.minimap',
     heading: minimap(),
     description: minimapDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'Editor.scrollBeyondLastLine',
+    id: 'editor.scrollBeyondLastLine',
     heading: scrollBeyondLastLine(),
     description: scrollBeyondLastLineDescription(),
     type: Boolean$1,
     value: 'false',
     category: TextEditorTab
   }, {
-    id: 'Editor.smoothScrolling',
+    id: 'editor.smoothScrolling',
     heading: smoothScrolling(),
     description: smoothScrollingDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'Editor.cursorBlinking',
+    id: 'editor.cursorBlinking',
     heading: cursorBlinking(),
     description: cursorBlinkingDescription(),
     type: String,
     value: 'blink',
     category: TextEditorTab
   }, {
-    id: 'Editor.cursorStyle',
+    id: 'editor.cursorStyle',
     heading: cursorStyle(),
     description: cursorStyleDescription(),
     type: String,
     value: 'line',
     category: TextEditorTab
   }, {
-    id: 'Editor.cursorWidth',
+    id: 'editor.cursorWidth',
     heading: cursorWidth(),
     description: cursorWidthDescription(),
     type: Number$1,
     value: '0',
     category: TextEditorTab
   }, {
-    id: 'Editor.tabSize',
+    id: 'editor.tabSize',
     heading: tabSize(),
     description: tabSizeDescription(),
     type: Number$1,
     value: '4',
-    category: TextEditorTab
+    category: TextEditorTab,
+    validate(value) {
+      if (typeof value !== 'number') {
+        return 'font size must be of type number';
+      }
+      const minTabSize = 1;
+      const maxTabSize = 8;
+      if (value < minTabSize) {
+        return `tab size must be at least ${minTabSize}`;
+      }
+      if (value > maxTabSize) {
+        return `tab size must not be greater than ${maxTabSize}`;
+      }
+      return '';
+    }
   }, {
-    id: 'Editor.insertSpaces',
+    id: 'editor.insertSpaces',
     heading: insertSpaces(),
     description: insertSpacesDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'Editor.detectIndentation',
+    id: 'editor.detectIndentation',
     heading: detectIndentation(),
     description: detectIndentationDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'Editor.trimAutoWhitespace',
+    id: 'editor.trimAutoWhitespace',
     heading: trimAutoWhitespace(),
     description: trimAutoWhitespaceDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'Editor.largeFileOptimizations',
+    id: 'editor.largeFileOptimizations',
     heading: largeFileOptimizations(),
     description: largeFileOptimizationsDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'Editor.renderWhitespace',
+    id: 'editor.renderWhitespace',
     heading: renderWhitespace(),
     description: renderWhitespaceDescription(),
     type: String,
     value: 'selection',
     category: TextEditorTab
   }, {
-    id: 'Editor.renderControlCharacters',
+    id: 'editor.renderControlCharacters',
     heading: renderControlCharacters(),
     description: renderControlCharactersDescription(),
     type: Boolean$1,
     value: 'false',
     category: TextEditorTab
   }, {
-    id: 'Editor.renderLineHighlight',
+    id: 'editor.renderLineHighlight',
     heading: renderLineHighlight(),
     description: renderLineHighlightDescription(),
     type: String,
     value: 'line',
     category: TextEditorTab
   }, {
-    id: 'Editor.codeLens',
+    id: 'editor.codeLens',
     heading: codeLens(),
     description: codeLensDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'Editor.folding',
+    id: 'editor.folding',
     heading: folding(),
     description: foldingDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'Editor.showFoldingControls',
+    id: 'editor.showFoldingControls',
     heading: showFoldingControls(),
     description: showFoldingControlsDescription(),
     type: String,
     value: 'mouseover',
     category: TextEditorTab
   }, {
-    id: 'Editor.unfoldOnClickAfterEnd',
+    id: 'editor.unfoldOnClickAfterEnd',
     heading: unfoldOnClickAfterEnd(),
     description: unfoldOnClickAfterEndDescription(),
     type: Boolean$1,
     value: 'false',
     category: TextEditorTab
   }, {
-    id: 'Editor.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,
@@ -3198,491 +3281,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: 'Editor.background',
+    id: 'editor.background',
     heading: 'Editor background',
     description: 'Editor background color',
     type: Color,
     value: '#567567',
     category: TextEditorTab
   }, {
-    id: 'showUnused',
+    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(),
@@ -3696,21 +3771,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(),
@@ -3724,23 +3789,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,
@@ -3831,17 +3922,9 @@ const getSavedTabId = savedState => {
   return '';
 };
 
-const getSavedWorkspacePath = savedState => {
-  if (savedState && typeof savedState === 'object' && 'workspacePath' in savedState && typeof savedState.workspacePath === 'string') {
-    return savedState.workspacePath;
-  }
-  return '';
-};
-
 const restoreState = savedState => {
   if (!savedState) {
     return {
-      root: '',
       minLineY: 0,
       deltaY: 0,
       tabId: '',
@@ -3851,7 +3934,6 @@ const restoreState = savedState => {
       historyIndex: -1
     };
   }
-  const root = getSavedWorkspacePath(savedState);
   const minLineY = getSavedMinLineY(savedState);
   const deltaY = getSavedDeltaY(savedState);
   const tabId = getSavedTabId(savedState);
@@ -3860,7 +3942,6 @@ const restoreState = savedState => {
   const history = getSavedHistory(savedState);
   const historyIndex = getSavedHistoryIndex(savedState, history);
   return {
-    root,
     minLineY,
     deltaY,
     tabId,
@@ -3884,7 +3965,7 @@ const loadContent = async (state, savedState) => {
   const items = await getSettingItems();
   const preferences = await getPreferences();
   const modifiedSettings = getModifiedSettings(preferences);
-  const filteredItems = getFilteredItems(items, newTabs, searchValue, modifiedSettings);
+  const filteredItems = getFilteredItems(items, newTabs, searchValue, modifiedSettings, preferences);
   return {
     ...state,
     filteredItems,
@@ -3917,11 +3998,10 @@ const {
   Viewlet
 } = ClassNames;
 const Badge = 'Badge';
-const Button = 'Button';
 const CheckBox = 'CheckBox';
-const Disabled = 'Disabled';
+const ErrorMessage = 'ErrorMessage';
 const InputBox = 'InputBox';
-const InputButton = 'InputButton';
+const InputBoxError = 'InputBoxError';
 const MaskIcon = 'MaskIcon';
 const MaskIconClearAll = 'MaskIconClearAll';
 const ModifiedIndicator = 'ModifiedIndicator';
@@ -3965,33 +4045,37 @@ const HandleScroll = 'handleScroll';
 const HandleSettingSelect = 'handleSettingSelect';
 const HandleInputFocus = 'handleInputFocus';
 
-const getButtonClassName = hasSearchValue => {
+const enabledClass = SearchFieldButton;
+const disabledClass = mergeClassNames(enabledClass, 'SearchFieldButtonDisabled');
+const getClearButtonClassName = hasSearchValue => {
   if (hasSearchValue) {
-    return mergeClassNames(Button, InputButton, SearchFieldButton);
+    return enabledClass;
   }
-  return mergeClassNames(Button, InputButton, SearchFieldButton, Disabled);
+  return disabledClass;
+};
+
+const icon = {
+  type: VirtualDomElements.Div,
+  className: mergeClassNames(MaskIcon, MaskIconClearAll),
+  childCount: 0
 };
 const getSettingsInputButtonsDom = hasSearchValue => {
   return [{
     type: VirtualDomElements.Button,
-    className: getButtonClassName(hasSearchValue),
+    className: getClearButtonClassName(hasSearchValue),
     childCount: 1,
     ariaLabel: clear(),
     name: Clear$1,
     disabled: !hasSearchValue,
     onClick: HandleClickClear
-  }, {
-    type: VirtualDomElements.Div,
-    className: mergeClassNames(MaskIcon, MaskIconClearAll),
-    childCount: 0
-  }];
+  }, icon];
 };
 
 const getSettingsInputDom = () => {
   const placeholder = searchSettings();
   return [{
     type: VirtualDomElements.Input,
-    className: mergeClassNames(InputBox, SettingsSearchInput),
+    className: mergeClassNames(InputBox, SettingsSearchInput, 'MultilineInputBox'),
     placeholder,
     childCount: 0,
     name: SettingsSearch,
@@ -4000,21 +4084,31 @@ const getSettingsInputDom = () => {
   }];
 };
 
-const getChildCount = hasSearchValue => {
+const getChildCount$1 = hasSearchValue => {
   return hasSearchValue ? 3 : 2;
 };
 const getSettingsHeaderDom = (filteredSettingsCount, hasSearchValue) => {
-  const badgeDom = getSettingsInputBadgeDom(filteredSettingsCount, hasSearchValue);
-  const childCount = getChildCount(hasSearchValue);
+  const childCount = getChildCount$1(hasSearchValue);
   return [{
     type: VirtualDomElements.Div,
     className: SettingsHeader,
     childCount: 1
   }, {
     type: VirtualDomElements.Div,
-    className: SettingsInputWrapper,
+    className: mergeClassNames(SettingsInputWrapper, 'SearchField'),
     childCount
-  }, ...getSettingsInputDom(), ...getSettingsInputButtonsDom(hasSearchValue), ...badgeDom];
+  }, ...getSettingsInputDom(), ...getSettingsInputBadgeDom(filteredSettingsCount, hasSearchValue), ...getSettingsInputButtonsDom(hasSearchValue)];
+};
+
+const getErrorMessageDom = errorMessage => {
+  if (!errorMessage) {
+    return [];
+  }
+  return [{
+    type: VirtualDomElements.Div,
+    className: ErrorMessage,
+    childCount: 1
+  }, text(errorMessage)];
 };
 
 const getInputId = id => {
@@ -4026,16 +4120,19 @@ const getItemCheckBoxVirtualDom = item => {
     heading,
     description,
     id,
-    modified
+    modified,
+    hasError,
+    errorMessage
   } = item;
-  const isModified = modified || false;
   const domId = getInputId(id);
+  const checkBoxClassName = hasError ? `${CheckBox} ${InputBoxError}` : CheckBox;
+  const errorChildCount = hasError ? 1 : 0;
   return [{
     type: VirtualDomElements.Div,
     className: SettingsItem,
-    childCount: 3,
-    role: 'group',
-    'data-modified': isModified
+    childCount: 3 + errorChildCount,
+    role: AriaRoles.Group,
+    'data-modified': modified
   }, {
     type: VirtualDomElements.H3,
     childCount: 1
@@ -4045,7 +4142,7 @@ const getItemCheckBoxVirtualDom = item => {
     childCount: 2
   }, {
     type: VirtualDomElements.Input,
-    className: CheckBox,
+    className: checkBoxClassName,
     childCount: 0,
     id: domId,
     inputType: 'checkbox',
@@ -4055,14 +4152,15 @@ const getItemCheckBoxVirtualDom = item => {
     type: VirtualDomElements.Label,
     childCount: 1,
     htmlFor: domId
-  }, text(description)];
+  }, text(description), ...getErrorMessageDom(errorMessage)];
 };
 
+const parent = {
+  type: VirtualDomElements.H3,
+  childCount: 1
+};
 const getItemHeadingDom = heading => {
-  return [{
-    type: VirtualDomElements.H3,
-    childCount: 1
-  }, text(heading)];
+  return [parent, text(heading)];
 };
 
 const getItemLabelDom = (domId, label) => {
@@ -4079,30 +4177,33 @@ const getItemColorVirtualDom = item => {
     heading,
     description,
     id,
-    modified
+    modified,
+    hasError,
+    errorMessage
   } = item;
   const domId = getInputId(id);
-  const isModified = modified || false;
+  const colorInputClassName = hasError ? mergeClassNames('ColorInput', InputBoxError) : mergeClassNames('ColorInput');
+  const errorChildCount = hasError ? 1 : 0;
   return [{
     type: VirtualDomElements.Div,
     className: SettingsItem,
-    childCount: 3,
-    role: 'group',
-    'data-modified': isModified
+    childCount: 3 + errorChildCount,
+    role: AriaRoles.Group,
+    'data-modified': modified
   }, ...getItemHeadingDom(heading), {
     type: VirtualDomElements.Div,
     className: SettingsItemCheckBox,
     childCount: 2
   }, {
     type: VirtualDomElements.Input,
-    className: mergeClassNames('ColorInput'),
+    className: colorInputClassName,
     inputType: 'color',
     placeholder: colorValue(),
     childCount: 0,
     id: domId,
     name: id,
     onInput: HandleSettingInput
-  }, ...getItemLabelDom(domId, description)];
+  }, ...getItemLabelDom(domId, description), ...getErrorMessageDom(errorMessage)];
 };
 
 const getSettingsModifiedIndicatorDom = isModified => {
@@ -4116,32 +4217,46 @@ const getSettingsModifiedIndicatorDom = isModified => {
   }];
 };
 
+const getChildCount = (modified, hasError) => {
+  const modifiedChildCount = modified ? 1 : 0;
+  const errorChildCount = hasError ? 1 : 0;
+  const childCount = 3 + modifiedChildCount + errorChildCount;
+  return childCount;
+};
+const getInputClassName = hasError => {
+  if (hasError) {
+    return `${InputBox} ${InputBoxError}`;
+  }
+  return InputBox;
+};
 const getItemNumberVirtualDom = item => {
   const {
     heading,
     description,
     id,
-    modified
+    modified,
+    hasError,
+    errorMessage
   } = item;
   const domId = getInputId(id);
-  const isModified = modified || false;
-  const modifiedChildCount = isModified ? 1 : 0;
+  const inputClassName = getInputClassName(hasError);
+  const childCount = getChildCount(modified, hasError);
   return [{
     type: VirtualDomElements.Div,
     className: SettingsItem,
-    childCount: 3 + modifiedChildCount,
-    role: 'group',
-    'data-modified': isModified
-  }, ...getSettingsModifiedIndicatorDom(isModified), ...getItemHeadingDom(heading), ...getItemLabelDom(domId, description), {
+    childCount,
+    role: AriaRoles.Group,
+    'data-modified': modified
+  }, ...getSettingsModifiedIndicatorDom(modified), ...getItemHeadingDom(heading), ...getItemLabelDom(domId, description), {
     type: VirtualDomElements.Input,
-    className: InputBox,
+    className: inputClassName,
     inputType: 'number',
     placeholder: numberValue(),
     childCount: 0,
     id: domId,
     name: id,
     onInput: HandleSettingInput
-  }];
+  }, ...getErrorMessageDom(errorMessage)];
 };
 
 const getOptionDom = option => {
@@ -4160,36 +4275,44 @@ const getItemSelectVirtualDom = item => {
   const {
     heading,
     description,
-    id
+    id,
+    options,
+    hasError,
+    errorMessage
   } = item;
-  const options = item.options || [];
   const domId = getInputId(id);
+  const selectClassName = hasError ? `${Select} ${InputBoxError}` : Select;
+  const errorChildCount = hasError ? 1 : 0;
   return [{
     type: VirtualDomElements.Div,
     className: SettingsItem,
-    childCount: 3,
-    role: 'group'
+    childCount: 3 + errorChildCount,
+    role: AriaRoles.Group
   }, ...getItemHeadingDom(heading), ...getItemLabelDom(domId, description), {
     type: VirtualDomElements.Select,
-    className: Select,
-    childCount: options.length,
+    className: selectClassName,
+    childCount: options?.length || 0,
     id: domId,
     name: id,
     onChange: HandleSettingSelect
-  }, ...options.flatMap(getOptionDom)];
+  }, ...(options?.flatMap(getOptionDom) || []), ...getErrorMessageDom(errorMessage)];
 };
 
 const getItemStringVirtualDom = item => {
   const {
     heading,
     description,
-    id
+    id,
+    hasError,
+    errorMessage
   } = item;
+  const inputClassName = hasError ? `${InputBox} ${InputBoxError}` : InputBox;
+  const errorChildCount = hasError ? 1 : 0;
   return [{
     type: VirtualDomElements.Div,
     className: SettingsItem,
-    childCount: 3,
-    role: 'group'
+    childCount: 3 + errorChildCount,
+    role: AriaRoles.Group
   }, {
     type: VirtualDomElements.H3,
     childCount: 1
@@ -4198,13 +4321,13 @@ const getItemStringVirtualDom = item => {
     childCount: 1
   }, text(description), {
     type: VirtualDomElements.Input,
-    className: InputBox,
+    className: inputClassName,
     inputType: 'text',
     placeholder: stringValue(),
     childCount: 0,
     name: id,
     onInput: HandleSettingInput
-  }];
+  }, ...getErrorMessageDom(errorMessage)];
 };
 
 const getItemUnknownVirtualDom = () => {
@@ -4212,7 +4335,7 @@ const getItemUnknownVirtualDom = () => {
     type: VirtualDomElements.Div,
     className: SettingsItem,
     childCount: 1,
-    role: 'group'
+    role: AriaRoles.Group
   }, text(unknownSettingType())];
 };
 
@@ -4221,26 +4344,29 @@ const getItemUrlVirtualDom = item => {
     heading,
     description,
     id,
-    modified
+    modified,
+    hasError,
+    errorMessage
   } = item;
   const domId = getInputId(id);
-  const isModified = modified || false;
+  const inputClassName = hasError ? `${InputBox} ${InputBoxError}` : InputBox;
+  const errorChildCount = hasError ? 1 : 0;
   return [{
     type: VirtualDomElements.Div,
     className: SettingsItem,
-    childCount: 3,
-    role: 'group',
-    'data-modified': isModified
+    childCount: 3 + errorChildCount,
+    role: AriaRoles.Group,
+    'data-modified': modified
   }, ...getItemHeadingDom(heading), ...getItemLabelDom(domId, description), {
     type: VirtualDomElements.Input,
-    className: InputBox,
+    className: inputClassName,
     inputType: 'url',
     placeholder: numberValue(),
     childCount: 0,
     id: domId,
     name: id,
     onInput: HandleSettingInput
-  }];
+  }, ...getErrorMessageDom(errorMessage)];
 };
 
 const getItemVirtualDom = item => {
@@ -4278,7 +4404,7 @@ const getSettingsNoResultsDom = searchValue => {
 };
 
 const getSettingsItemsDom = (items, searchValue) => {
-  if (items.length === 0 && searchValue.trim()) {
+  if (items.length === 0 && searchValue && searchValue.trim()) {
     return getSettingsNoResultsDom(searchValue);
   }
   return [{
@@ -4350,10 +4476,10 @@ const getSettingsDom = state => {
   const {
     tabs,
     filteredItems,
-    searchValue,
-    filteredItemsCount
+    searchValue
   } = state;
   const hasSearchValue = searchValue.trim().length > 0;
+  const filteredItemsCount = filteredItems.length;
   return [{
     type: VirtualDomElements.Div,
     childCount: 2,
@@ -4380,13 +4506,17 @@ const enabledTypes = [Number$1, String, Color];
 const renderSettingValues = (oldState, newState) => {
   const {
     filteredItems,
-    id
+    id,
+    preferences
   } = newState;
-  const numericSettings = filteredItems.filter(item => enabledTypes.includes(item.type));
-  const inputValues = numericSettings.map(item => ({
-    name: item.id,
-    value: item.value
-  }));
+  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];
 };
 
@@ -4480,8 +4610,6 @@ const saveState = state => {
   } = state;
   const selectedTab = getSelectedTabId(tabs);
   return {
-    expandedPaths: [],
-    root: '',
     minLineY: 0,
     maxLineY: 0,
     deltaY: 0,
@@ -4500,14 +4628,15 @@ const useNextSearchValue = state => {
     historyIndex,
     items,
     tabs,
-    modifiedSettings
+    modifiedSettings,
+    preferences
   } = 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);
+  const filteredItems = getFilteredItems(items, tabs, newSearchValue, modifiedSettings, preferences);
   return {
     ...state,
     searchValue: newSearchValue,
@@ -4523,14 +4652,15 @@ const usePreviousSearchValue = state => {
     historyIndex,
     items,
     tabs,
-    modifiedSettings
+    modifiedSettings,
+    preferences
   } = state;
   if (history.length === 0 || historyIndex <= 0) {
     return state;
   }
   const newHistoryIndex = historyIndex - 1;
   const newSearchValue = history[newHistoryIndex];
-  const filteredItems = getFilteredItems(items, tabs, newSearchValue, modifiedSettings);
+  const filteredItems = getFilteredItems(items, tabs, newSearchValue, modifiedSettings, preferences);
   return {
     ...state,
     searchValue: newSearchValue,