@lvce-editor/static-server 0.58.2 → 0.59.0

package/static/{38a6439 → 91d96a2}/packages/extension-detail-view-worker/dist/extensionDetailViewWorkerMain.js

@@ -22,7 +22,7 @@ const CopyImageUrl = 'Copy Image Url';
 const Details$1 = 'Details';
 const Disable$1 = 'Disable';
 const Elements = 'Elements';
-const EmptyCommandsArray = 'The extension contributed an empty commands array.';
+const EmptyCommandsArray = 'The extension contributes an empty commands array.';
 const Enable$1 = 'Enable';
 const Features$2 = 'Features';
 const FileMatch = 'File Match';
@@ -72,7 +72,7 @@ const categories = () => {
 const resources = () => {
   return i18nString(Resources$1);
 };
-const copy = () => {
+const copy$1 = () => {
   return i18nString(Copy);
 };
 const copyImage$1 = () => {
@@ -224,17 +224,9 @@ const featureActivationEventsEnabled = extension => {
 
 const None$2 = 'none';
 const Panel = 'panel';
-const Tab$1 = 'tab';
+const Tab = 'tab';
 const TabList = 'tablist';
-const AriaRoles = {
-  __proto__: null,
-  None: None$2,
-  Panel,
-  Tab: Tab$1,
-  TabList};
-const mergeClassNames = (...classNames) => {
-  return classNames.filter(Boolean).join(' ');
-};
+
 const Button$1 = 1;
 const Div = 4;
 const H1 = 5;
@@ -258,30 +250,17 @@ const A = 53;
 const Ul = 60;
 const Code$2 = 65;
 const Dt = 67;
-const VirtualDomElements = {
-  __proto__: null,
-  A,
-  Aside: Aside$1,
-  Button: Button$1,
-  Code: Code$2,
-  Dd,
-  Div,
-  Dl,
-  Dt,
-  H1,
-  H2,
-  Img,
-  Li,
-  P,
-  Pre,
-  Span,
-  TBody,
-  THead,
-  Table: Table$1,
-  Td,
-  Th,
-  Tr,
-  Ul};
+
+const DebugWorker = 55;
+const ExtensionHostWorker = 44;
+const FileSystemWorker$1 = 209;
+const MarkdownWorker$1 = 300;
+const RendererWorker$1 = 1;
+
+const mergeClassNames = (...classNames) => {
+  return classNames.filter(Boolean).join(' ');
+};
+
 const text = data => {
   return {
     type: Text$1,
@@ -343,11 +322,11 @@ const TableHeading = 'TableHeading';
 const Viewlet = 'Viewlet';
 
 const li = {
-  type: VirtualDomElements.Li,
+  type: Li,
   childCount: 1
 };
 const code = {
-  type: VirtualDomElements.Code,
+  type: Code$2,
   childCount: 1
 };
 const getActivationEventVirtualDom = event => {
@@ -356,7 +335,7 @@ const getActivationEventVirtualDom = event => {
 
 const getFeatureContentHeadingVirtualDom = heading => {
   return [{
-    type: VirtualDomElements.H1,
+    type: H1,
     childCount: 1
   }, text(heading)];
 };
@@ -364,11 +343,11 @@ const getFeatureContentHeadingVirtualDom = heading => {
 const getFeatureActivationEventsVirtualDom = activationEvents$1 => {
   const heading = activationEvents();
   return [{
-    type: VirtualDomElements.Div,
+    type: Div,
     className: FeatureContent,
     childCount: 2
   }, ...getFeatureContentHeadingVirtualDom(heading), {
-    type: VirtualDomElements.Ul,
+    type: Ul,
     childCount: activationEvents$1.length
   }, ...activationEvents$1.flatMap(getActivationEventVirtualDom)];
 };
@@ -423,18 +402,18 @@ const getFeatureCommandsEmptyVirtualDom = () => {
   const heading = commands$1();
   const emptyCommandsArray$1 = emptyCommandsArray();
   return [{
-    type: VirtualDomElements.Div,
+    type: Div,
     className: FeatureContent,
     childCount: 2
   }, ...getFeatureContentHeadingVirtualDom(heading), {
-    type: VirtualDomElements.P,
+    type: P,
     childCount: 1
   }, text(emptyCommandsArray$1)];
 };
 
 const getTableHeadingVirtualDom = heading => {
   return [{
-    type: VirtualDomElements.Th,
+    type: Th,
     className: TableHeading,
     childCount: 1
   }, text(heading)];
@@ -442,18 +421,18 @@ const getTableHeadingVirtualDom = heading => {
 
 const getCellCodeVirtualDom = value => {
   return [{
-    type: VirtualDomElements.Td,
+    type: Td,
     className: TableCell,
     childCount: 1
   }, {
-    type: VirtualDomElements.Code,
+    type: Code$2,
     childCount: 1
   }, text(value)];
 };
 
 const getCellTextVirtualDom = value => {
   return [{
-    type: VirtualDomElements.Td,
+    type: Td,
     className: TableCell,
     childCount: 1
   }, text(value)];
@@ -481,7 +460,7 @@ const getCellVirtualDom = entry => {
 
 const getTableRowVirtualDom = entries => {
   return [{
-    type: VirtualDomElements.Tr,
+    type: Tr,
     childCount: entries.length
   }, ...entries.flatMap(getCellVirtualDom)];
 };
@@ -492,17 +471,17 @@ const getTableVirtualDom = tableInfo => {
     rows
   } = tableInfo;
   return [{
-    type: VirtualDomElements.Table,
+    type: Table$1,
     className: Table,
     childCount: 2
   }, {
-    type: VirtualDomElements.THead,
+    type: THead,
     childCount: 1
   }, {
-    type: VirtualDomElements.Tr,
+    type: Tr,
     childCount: headings.length
   }, ...headings.flatMap(getTableHeadingVirtualDom), {
-    type: VirtualDomElements.TBody,
+    type: TBody,
     childCount: rows.length
   }, ...rows.flatMap(getTableRowVirtualDom)];
 };
@@ -515,7 +494,7 @@ const getFeatureCommandsVirtualDom = commands => {
   const heading = commands$1();
   const tableInfo = getCommandTableEntries(commands);
   return [{
-    type: VirtualDomElements.Div,
+    type: Div,
     className: FeatureContent,
     childCount: 2
   }, ...getFeatureContentHeadingVirtualDom(heading), ...getTableVirtualDom(tableInfo)];
@@ -563,7 +542,7 @@ const getJsonValidationTableEntries = rows => {
 };
 
 const parentNode$1 = {
-  type: VirtualDomElements.Div,
+  type: Div,
   className: FeatureContent,
   childCount: 2
 };
@@ -596,7 +575,7 @@ const getFeatureProgrammingLanguagesVirtualDom = () => {
   const heading = programmingLanguages();
   // TODO
   return [{
-    type: VirtualDomElements.Div,
+    type: Div,
     className: FeatureContent,
     childCount: 1
   }, ...getFeatureContentHeadingVirtualDom(heading)];
@@ -615,13 +594,13 @@ class FeatureNotFoundError extends Error {
 
 const getFeatureUnsupportedVirtualDom = state => {
   return [{
-    type: VirtualDomElements.Div,
+    type: Div,
     childCount: 2
   }, {
-    type: VirtualDomElements.H1,
+    type: H1,
     childCount: 1
   }, text(unsupportedFeature()), {
-    type: VirtualDomElements.P,
+    type: P,
     childCount: 1
   }, text(selectedFeatureUnknownOrUnsupported())];
 };
@@ -658,15 +637,13 @@ const getFeatureVirtualDomHandler = featureName => {
 };
 
 const rpcs = Object.create(null);
-const set$g = (id, rpc) => {
+const set$a = (id, rpc) => {
   rpcs[id] = rpc;
 };
 const get$2 = id => {
   return rpcs[id];
 };
 
-/* eslint-disable  @typescript-eslint/explicit-function-return-type */
-
 const create$7 = rpcId => {
   return {
     // @ts-ignore
@@ -682,7 +659,7 @@ const create$7 = rpcId => {
       return rpc.invokeAndTransfer(method, ...params);
     },
     set(rpc) {
-      set$g(rpcId, rpc);
+      set$a(rpcId, rpc);
     },
     async dispose() {
       const rpc = get$2(rpcId);
@@ -690,132 +667,478 @@ const create$7 = rpcId => {
     }
   };
 };
-const ExtensionHostWorker = 44;
-const RendererWorker$1 = 1;
-const FileSystemWorker$1 = 209;
-const MarkdownWorker$1 = 300;
+
 const {
-  invoke: invoke$9,
-  set: set$9} = create$7(ExtensionHostWorker);
+  invoke: invoke$5,
+  invokeAndTransfer: invokeAndTransfer$4,
+  set: set$9,
+  dispose: dispose$5
+} = create$7(ExtensionHostWorker);
+const executeReferenceProvider = async (id, offset) => {
+  // @ts-ignore
+  return invoke$5('ExtensionHostReference.executeReferenceProvider', id, offset);
+};
+const executeFileReferenceProvider = async id => {
+  // @ts-ignore
+  return invoke$5('ExtensionHostReference.executeFileReferenceProvider', id);
+};
 const getRuntimeStatus$2 = async extensionId => {
   // @ts-ignore
-  return invoke$9('ExtensionHost.getRuntimeStatus', extensionId);
+  return invoke$5('ExtensionHost.getRuntimeStatus', extensionId);
 };
+
 const ExtensionHost = {
   __proto__: null,
+  dispose: dispose$5,
+  executeFileReferenceProvider,
+  executeReferenceProvider,
   getRuntimeStatus: getRuntimeStatus$2,
+  invoke: invoke$5,
+  invokeAndTransfer: invokeAndTransfer$4,
   set: set$9
 };
+
 const {
-  invoke: invoke$7,
-  set: set$7} = create$7(FileSystemWorker$1);
-const readFile$1$1 = async uri => {
-  return invoke$7('FileSystem.readFile', uri);
+  invoke: invoke$4,
+  invokeAndTransfer: invokeAndTransfer$3,
+  set: set$8,
+  dispose: dispose$4
+} = create$7(FileSystemWorker$1);
+const remove$1 = async dirent => {
+  return invoke$4('FileSystem.remove', dirent);
+};
+const readDirWithFileTypes = async uri => {
+  return invoke$4('FileSystem.readDirWithFileTypes', uri);
+};
+const getPathSeparator = async root => {
+  // @ts-ignore
+  return invoke$4('FileSystem.getPathSeparator', root);
+};
+const getRealPath = async path => {
+  return invoke$4('FileSystem.getRealPath', path);
+};
+const stat = async dirent => {
+  return invoke$4('FileSystem.stat', dirent);
+};
+const createFile = async uri => {
+  return invoke$4('FileSystem.writeFile', uri, '');
+};
+const readFile$3 = async uri => {
+  return invoke$4('FileSystem.readFile', uri);
+};
+const writeFile = async (uri, content) => {
+  return invoke$4('FileSystem.writeFile', uri, content);
+};
+const mkdir = async uri => {
+  return invoke$4('FileSystem.mkdir', uri);
+};
+const rename = async (oldUri, newUri) => {
+  return invoke$4('FileSystem.rename', oldUri, newUri);
+};
+const copy = async (oldUri, newUri) => {
+  return invoke$4('FileSystem.copy', oldUri, newUri);
 };
 const exists$1 = async uri => {
   // @ts-ignore
-  return invoke$7('FileSystem.exists', uri);
+  return invoke$4('FileSystem.exists', uri);
 };
+const getFolderSize$2 = async uri => {
+  // @ts-ignore
+  return invoke$4('FileSystem.getFolderSize', uri);
+};
+const readFileAsBlob$1 = async uri => {
+  // @ts-ignore
+  return invoke$4('FileSystem.readFileAsBlob', uri);
+};
+const appendFile = async (uri, text) => {
+  // @ts-ignore
+  return invoke$4('FileSystem.appendFile', uri, text);
+};
+
 const FileSystemWorker = {
   __proto__: null,
+  appendFile,
+  copy,
+  createFile,
+  dispose: dispose$4,
   exists: exists$1,
-  invoke: invoke$7,
-  readFile: readFile$1$1,
-  set: set$7};
+  getFolderSize: getFolderSize$2,
+  getPathSeparator,
+  getRealPath,
+  invoke: invoke$4,
+  invokeAndTransfer: invokeAndTransfer$3,
+  mkdir,
+  readDirWithFileTypes,
+  readFile: readFile$3,
+  readFileAsBlob: readFileAsBlob$1,
+  remove: remove$1,
+  rename,
+  set: set$8,
+  stat,
+  writeFile
+};
+
 const {
-  invoke: invoke$5,
-  set: set$5$1} = create$7(MarkdownWorker$1);
+  invoke: invoke$3,
+  invokeAndTransfer: invokeAndTransfer$2,
+  set: set$7,
+  dispose: dispose$3
+} = create$7(MarkdownWorker$1);
 const getVirtualDom$1 = async html => {
   // @ts-ignore
-  return invoke$5('Markdown.getVirtualDom', html);
+  return invoke$3('Markdown.getVirtualDom', html);
 };
 const render$1 = async (markdown, options) => {
   // @ts-ignore
-  return invoke$5('Markdown.render', markdown, options);
+  return invoke$3('Markdown.render', markdown, options);
 };
+
 const MarkdownWorker = {
   __proto__: null,
+  dispose: dispose$3,
   getVirtualDom: getVirtualDom$1,
+  invoke: invoke$3,
+  invokeAndTransfer: invokeAndTransfer$2,
   render: render$1,
-  set: set$5$1
+  set: set$7
 };
+
 const {
-  invoke: invoke$3,
-  invokeAndTransfer: invokeAndTransfer$3,
-  set: set$3$1} = create$7(RendererWorker$1);
+  invoke: invoke$2,
+  invokeAndTransfer: invokeAndTransfer$1,
+  set: set$6,
+  dispose: dispose$2
+} = create$7(RendererWorker$1);
+const searchFileHtml = async uri => {
+  return invoke$2('ExtensionHost.searchFileWithHtml', uri);
+};
+const getFilePathElectron = async file => {
+  return invoke$2('FileSystemHandle.getFilePathElectron', file);
+};
 const showContextMenu$1 = async (x, y, id, ...args) => {
-  return invoke$3('ContextMenu.show', x, y, id, ...args);
+  return invoke$2('ContextMenu.show', x, y, id, ...args);
+};
+const getElectronVersion = async () => {
+  return invoke$2('Process.getElectronVersion');
+};
+const applyBulkReplacement = async bulkEdits => {
+  await invoke$2('BulkReplacement.applyBulkReplacement', bulkEdits);
 };
 const setColorTheme$2 = async id => {
   // @ts-ignore
-  return invoke$3(/* ColorTheme.setColorTheme */'ColorTheme.setColorTheme', /* colorThemeId */id);
+  return invoke$2(/* ColorTheme.setColorTheme */'ColorTheme.setColorTheme', /* colorThemeId */id);
+};
+const getNodeVersion = async () => {
+  return invoke$2('Process.getNodeVersion');
+};
+const getChromeVersion = async () => {
+  return invoke$2('Process.getChromeVersion');
+};
+const getV8Version = async () => {
+  return invoke$2('Process.getV8Version');
+};
+const getFileHandles = async fileIds => {
+  const files = await invoke$2('FileSystemHandle.getFileHandles', fileIds);
+  return files;
+};
+const setWorkspacePath = async path => {
+  await invoke$2('Workspace.setPath', path);
+};
+const registerWebViewInterceptor = async (id, port) => {
+  await invokeAndTransfer$1('WebView.registerInterceptor', id, port);
+};
+const unregisterWebViewInterceptor = async id => {
+  await invoke$2('WebView.unregisterInterceptor', id);
+};
+const sendMessagePortToEditorWorker = async (port, rpcId) => {
+  const command = 'HandleMessagePort.handleMessagePort';
+  // @ts-ignore
+  await invokeAndTransfer$1('SendMessagePortToExtensionHostWorker.sendMessagePortToEditorWorker', port, command, rpcId);
+};
+const sendMessagePortToErrorWorker = async (port, rpcId) => {
+  const command = 'Errors.handleMessagePort';
+  // @ts-ignore
+  await invokeAndTransfer$1('SendMessagePortToExtensionHostWorker.sendMessagePortToErrorWorker', port, command, rpcId);
 };
 const sendMessagePortToMarkdownWorker$2 = async (port, rpcId) => {
   const command = 'Markdown.handleMessagePort';
   // @ts-ignore
-  await invokeAndTransfer$3('SendMessagePortToExtensionHostWorker.sendMessagePortToMarkdownWorker', port, command, rpcId);
+  await invokeAndTransfer$1('SendMessagePortToExtensionHostWorker.sendMessagePortToMarkdownWorker', port, command, rpcId);
 };
 const sendMessagePortToFileSystemWorker$2 = async (port, rpcId) => {
   const command = 'FileSystem.handleMessagePort';
   // @ts-ignore
-  await invokeAndTransfer$3('SendMessagePortToExtensionHostWorker.sendMessagePortToFileSystemWorker', port, command, rpcId);
+  await invokeAndTransfer$1('SendMessagePortToExtensionHostWorker.sendMessagePortToFileSystemWorker', port, command, rpcId);
+};
+const readFile$2 = async uri => {
+  return invoke$2('FileSystem.readFile', uri);
+};
+const getWebViewSecret = async key => {
+  // @ts-ignore
+  return invoke$2('WebView.getSecret', key);
+};
+const setWebViewPort = async (uid, port, origin, portType) => {
+  return invokeAndTransfer$1('WebView.setPort', uid, port, origin, portType);
+};
+const setFocus = key => {
+  return invoke$2('Focus.setFocus', key);
+};
+const getFileIcon = async options => {
+  return invoke$2('IconTheme.getFileIcon', options);
+};
+const getColorThemeNames = async () => {
+  return invoke$2('ColorTheme.getColorThemeNames');
 };
 const disableExtension$2 = async id => {
-  return invoke$3('ExtensionManagement.disable', id);
+  return invoke$2('ExtensionManagement.disable', id);
+};
+const enableExtension = async id => {
+  // @ts-ignore
+  return invoke$2('ExtensionManagement.enable', id);
+};
+const handleDebugChange = async params => {
+  // @ts-ignore
+  return invoke$2('Run And Debug.handleChange', params);
+};
+const getFolderIcon = async options => {
+  return invoke$2('IconTheme.getFolderIcon', options);
+};
+const closeWidget = async widgetId => {
+  return invoke$2('Viewlet.closeWidget', widgetId);
 };
 const sendMessagePortToExtensionHostWorker$2 = async (port, rpcId = 0) => {
   const command = 'HandleMessagePort.handleMessagePort2';
-  await invokeAndTransfer$3('SendMessagePortToExtensionHostWorker.sendMessagePortToExtensionHostWorker', port, command, rpcId);
+  await invokeAndTransfer$1('SendMessagePortToExtensionHostWorker.sendMessagePortToExtensionHostWorker', port, command, rpcId);
+};
+const sendMessagePortToSearchProcess = async port => {
+  await invokeAndTransfer$1('SendMessagePortToElectron.sendMessagePortToElectron', port, 'HandleMessagePortForSearchProcess.handleMessagePortForSearchProcess');
+};
+const confirm = async (message, options) => {
+  // @ts-ignore
+  const result = await invoke$2('Confirmprompt.prompt', message, options);
+  return result;
+};
+const getRecentlyOpened = async () => {
+  return invoke$2(/* RecentlyOpened.getRecentlyOpened */'RecentlyOpened.getRecentlyOpened');
+};
+const getKeyBindings = async () => {
+  return invoke$2('KeyBindingsInitial.getKeyBindings');
 };
 const writeClipBoardText$1 = async text => {
-  await invoke$3('ClipBoard.writeText', /* text */text);
+  await invoke$2('ClipBoard.writeText', /* text */text);
 };
 const writeClipBoardImage$1 = async blob => {
   // @ts-ignore
-  await invoke$3('ClipBoard.writeImage', /* text */blob);
+  await invoke$2('ClipBoard.writeImage', /* text */blob);
+};
+const searchFileMemory = async uri => {
+  // @ts-ignore
+  return invoke$2('ExtensionHost.searchFileWithMemory', uri);
+};
+const searchFileFetch = async uri => {
+  return invoke$2('ExtensionHost.searchFileWithFetch', uri);
+};
+const showMessageBox = async options => {
+  return invoke$2('ElectronDialog.showMessageBox', options);
+};
+const handleDebugResumed = async params => {
+  await invoke$2('Run And Debug.handleResumed', params);
+};
+const openWidget = async name => {
+  await invoke$2('Viewlet.openWidget', name);
+};
+const getIcons = async requests => {
+  const icons = await invoke$2('IconTheme.getIcons', requests);
+  return icons;
+};
+const activateByEvent = event => {
+  return invoke$2('ExtensionHostManagement.activateByEvent', event);
+};
+const setAdditionalFocus = focusKey => {
+  // @ts-ignore
+  return invoke$2('Focus.setAdditionalFocus', focusKey);
+};
+const getActiveEditorId = () => {
+  // @ts-ignore
+  return invoke$2('GetActiveEditor.getActiveEditorId');
+};
+const getWorkspacePath = () => {
+  return invoke$2('Workspace.getPath');
+};
+const sendMessagePortToRendererProcess = async port => {
+  const command = 'HandleMessagePort.handleMessagePort';
+  // @ts-ignore
+  await invokeAndTransfer$1('SendMessagePortToExtensionHostWorker.sendMessagePortToRendererProcess', port, command, DebugWorker);
+};
+const getPreference = async key => {
+  return await invoke$2('Preferences.get', key);
 };
 const getAllExtensions$2 = async () => {
-  return invoke$3('ExtensionManagement.getAllExtensions');
+  return invoke$2('ExtensionManagement.getAllExtensions');
+};
+const rerenderEditor = async key => {
+  // @ts-ignore
+  return invoke$2('Editor.rerender', key);
+};
+const handleDebugPaused = async params => {
+  await invoke$2('Run And Debug.handlePaused', params);
+};
+const openUri = async (uri, focus, options) => {
+  await invoke$2('Main.openUri', uri, focus, options);
+};
+const sendMessagePortToSyntaxHighlightingWorker = async port => {
+  await invokeAndTransfer$1(
+  // @ts-ignore
+  'SendMessagePortToSyntaxHighlightingWorker.sendMessagePortToSyntaxHighlightingWorker', port, 'HandleMessagePort.handleMessagePort2');
+};
+const handleDebugScriptParsed = async script => {
+  await invoke$2('Run And Debug.handleScriptParsed', script);
+};
+const getWindowId = async () => {
+  return invoke$2('GetWindowId.getWindowId');
+};
+const getBlob = async uri => {
+  // @ts-ignore
+  return invoke$2('FileSystem.getBlob', uri);
+};
+const getExtensionCommands = async () => {
+  return invoke$2('ExtensionHost.getCommands');
+};
+const showErrorDialog = async errorInfo => {
+  // @ts-ignore
+  await invoke$2('ErrorHandling.showErrorDialog', errorInfo);
+};
+const getFolderSize$1 = async uri => {
+  // @ts-ignore
+  return await invoke$2('FileSystem.getFolderSize', uri);
 };
 const getExtension$3 = async id => {
   // @ts-ignore
-  return invoke$3('ExtensionManagement.getExtension', id);
+  return invoke$2('ExtensionManagement.getExtension', id);
+};
+const getMarkdownDom = async html => {
+  // @ts-ignore
+  return invoke$2('Markdown.getVirtualDom', html);
+};
+const renderMarkdown$1 = async (markdown, options) => {
+  // @ts-ignore
+  return invoke$2('Markdown.renderMarkdown', markdown, options);
 };
 const openNativeFolder$1 = async uri => {
   // @ts-ignore
-  await invoke$3('OpenNativeFolder.openNativeFolder', uri);
+  await invoke$2('OpenNativeFolder.openNativeFolder', uri);
 };
 const uninstallExtension$1 = async id => {
-  return invoke$3('ExtensionManagement.uninstall', id);
+  return invoke$2('ExtensionManagement.uninstall', id);
+};
+const installExtension = async id => {
+  // @ts-ignore
+  return invoke$2('ExtensionManagement.install', id);
 };
 const openExtensionSearch$2 = async () => {
   // @ts-ignore
-  return invoke$3('SideBar.openViewlet', 'Extensions');
+  return invoke$2('SideBar.openViewlet', 'Extensions');
 };
 const setExtensionsSearchValue$1 = async searchValue => {
   // @ts-ignore
-  return invoke$3('Extensions.handleInput', searchValue);
+  return invoke$2('Extensions.handleInput', searchValue);
+};
+const openExternal = async uri => {
+  // @ts-ignore
+  await invoke$2('Open.openExternal', uri);
 };
 const openUrl$2 = async uri => {
   // @ts-ignore
-  await invoke$3('Open.openUrl', uri);
+  await invoke$2('Open.openUrl', uri);
+};
+const getAllPreferences = async () => {
+  // @ts-ignore
+  return invoke$2('Preferences.getAll');
+};
+const showSaveFilePicker = async () => {
+  // @ts-ignore
+  return invoke$2('FilePicker.showSaveFilePicker');
 };
+const getLogsDir = async () => {
+  // @ts-ignore
+  return invoke$2('PlatformPaths.getLogsDir');
+};
+
 const RendererWorker = {
   __proto__: null,
+  activateByEvent,
+  applyBulkReplacement,
+  closeWidget,
+  confirm,
   disableExtension: disableExtension$2,
+  dispose: dispose$2,
+  enableExtension,
+  getActiveEditorId,
   getAllExtensions: getAllExtensions$2,
+  getAllPreferences,
+  getBlob,
+  getChromeVersion,
+  getColorThemeNames,
+  getElectronVersion,
   getExtension: getExtension$3,
+  getExtensionCommands,
+  getFileHandles,
+  getFileIcon,
+  getFilePathElectron,
+  getFolderIcon,
+  getFolderSize: getFolderSize$1,
+  getIcons,
+  getKeyBindings,
+  getLogsDir,
+  getMarkdownDom,
+  getNodeVersion,
+  getPreference,
+  getRecentlyOpened,
+  getV8Version,
+  getWebViewSecret,
+  getWindowId,
+  getWorkspacePath,
+  handleDebugChange,
+  handleDebugPaused,
+  handleDebugResumed,
+  handleDebugScriptParsed,
+  installExtension,
+  invoke: invoke$2,
+  invokeAndTransfer: invokeAndTransfer$1,
   openExtensionSearch: openExtensionSearch$2,
+  openExternal,
   openNativeFolder: openNativeFolder$1,
+  openUri,
   openUrl: openUrl$2,
+  openWidget,
+  readFile: readFile$2,
+  registerWebViewInterceptor,
+  renderMarkdown: renderMarkdown$1,
+  rerenderEditor,
+  searchFileFetch,
+  searchFileHtml,
+  searchFileMemory,
+  sendMessagePortToEditorWorker,
+  sendMessagePortToErrorWorker,
   sendMessagePortToExtensionHostWorker: sendMessagePortToExtensionHostWorker$2,
   sendMessagePortToFileSystemWorker: sendMessagePortToFileSystemWorker$2,
   sendMessagePortToMarkdownWorker: sendMessagePortToMarkdownWorker$2,
-  set: set$3$1,
+  sendMessagePortToRendererProcess,
+  sendMessagePortToSearchProcess,
+  sendMessagePortToSyntaxHighlightingWorker,
+  set: set$6,
+  setAdditionalFocus,
   setColorTheme: setColorTheme$2,
   setExtensionsSearchValue: setExtensionsSearchValue$1,
+  setFocus,
+  setWebViewPort,
+  setWorkspacePath,
   showContextMenu: showContextMenu$1,
+  showErrorDialog,
+  showMessageBox,
+  showSaveFilePicker,
   uninstallExtension: uninstallExtension$1,
+  unregisterWebViewInterceptor,
   writeClipBoardImage: writeClipBoardImage$1,
   writeClipBoardText: writeClipBoardText$1
 };
@@ -868,16 +1191,16 @@ const getActivationTimeVirtualDom = (importTime$1, activationTime$1) => {
   const formattedImportTime = formatTime(importTime$1);
   const formattedTime = formatTime(activationTime$1);
   return [{
-    type: VirtualDomElements.Dt,
+    type: Dt,
     childCount: 1
   }, text(importTime()), {
-    type: VirtualDomElements.Dd,
+    type: Dd,
     childCount: 1
   }, text(formattedImportTime), {
-    type: VirtualDomElements.Dt,
+    type: Dt,
     childCount: 1
   }, text(activationTime()), {
-    type: VirtualDomElements.Dd,
+    type: Dd,
     childCount: 1
   }, text(formattedTime)];
 };
@@ -906,12 +1229,12 @@ const getStatusMessage = statusType => {
 };
 
 const key = {
-  type: VirtualDomElements.Dt,
+  type: Dt,
   childCount: 1,
   className: 'RuntimeStatusDefinitionListKey'
 };
 const value = {
-  type: VirtualDomElements.Dd,
+  type: Dd,
   className: 'RuntimeStatusDefinitionListValue',
   childCount: 1
 };
@@ -939,11 +1262,11 @@ const getRuntimeStatusVirtualDom = state => {
   const heading = runtimeStatus();
   const childCount = getChildCount$1(status, activationTime, importTime);
   return [{
-    type: VirtualDomElements.Div,
+    type: Div,
     className: FeatureContent,
     childCount: 2
   }, ...getFeatureContentHeadingVirtualDom(heading), {
-    type: VirtualDomElements.Dl,
+    type: Dl,
     className: 'RuntimeStatusDefinitionList',
     childCount
   }, ...getStatusVirtualDom(status), ...getActivationTimeVirtualDom(activationTime, importTime)];
@@ -992,7 +1315,7 @@ const getFeatureSettingsVirtualDom = rows => {
   const heading = settings();
   const tableInfo = getSettingsTableEntries(rows);
   return [{
-    type: VirtualDomElements.Div,
+    type: Div,
     className: FeatureContent,
     childCount: 2
   }, ...getFeatureContentHeadingVirtualDom(heading), ...getTableVirtualDom(tableInfo)];
@@ -1079,17 +1402,17 @@ const WebViews = 'WebViews';
 
 const getScrollToTopVirtualDom = scrollToTopButtonEnabled => {
   return [{
-    type: VirtualDomElements.Button,
+    type: Button$1,
     className: ScrollToTopButton,
     childCount: 1,
     onClick: HandleClickScrollToTop,
     ariaLabel: scrollToTop(),
     name: ScrollToTop
   }, {
-    type: VirtualDomElements.Div,
+    type: Div,
     className: 'MaskIcon MaskIconChevronUp',
     childCount: 0,
-    role: AriaRoles.None
+    role: None$2
   }];
 };
 
@@ -1208,11 +1531,11 @@ const getFeatureThemesVirtualDom = themesDom => {
   const childCount = getVirtualDomChildCount(themesDom);
   const heading = theme();
   return [{
-    type: VirtualDomElements.Div,
+    type: Div,
     className: FeatureContent,
     childCount: 2
   }, ...getFeatureContentHeadingVirtualDom(heading), {
-    type: VirtualDomElements.Div,
+    type: Div,
     className: DefaultMarkdown,
     childCount
   }, ...themesDom];
@@ -1257,17 +1580,17 @@ const featureWebViewsEnabled = extension => {
 };
 
 const heading = {
-  type: VirtualDomElements.H2,
+  type: H2,
   className: DefinitionListItemHeading,
   childCount: 1
 };
 const pre = {
-  type: VirtualDomElements.Pre,
+  type: Pre,
   className: DefinitionListItemValue,
   childCount: 1
 };
 const item = {
-  type: VirtualDomElements.Div,
+  type: Div,
   className: DefinitionListItem,
   childCount: 2
 };
@@ -1283,7 +1606,7 @@ const getWebViewVirtualDom = webView => {
   const textContentSecurityPolicy = contentSecurityPolicy();
   const textElements = elements();
   return [{
-    type: VirtualDomElements.Div,
+    type: Div,
     className: FeatureWebView,
     childCount: 5
   }, item, heading, text(textId), pre, text(id), item, heading, text(textSelector), pre, text(selectorString), item, heading, text(textContentSecurityPolicy), pre, text(contentSecurityPolicyString), item, heading, text(textElements), pre, text(elementsString)];
@@ -1292,11 +1615,11 @@ const getWebViewVirtualDom = webView => {
 const getFeatureWebViewsVirtualDom = webViews$1 => {
   const heading = webViews();
   return [{
-    type: VirtualDomElements.Div,
+    type: Div,
     className: FeatureContent,
     childCount: 2
   }, ...getFeatureContentHeadingVirtualDom(heading), {
-    type: VirtualDomElements.Div,
+    type: Div,
     childCount: webViews$1.length
   }, ...webViews$1.flatMap(getWebViewVirtualDom)];
 };
@@ -1937,7 +2260,8 @@ const splitLines = lines => {
   return lines.split(NewLine);
 };
 const getCurrentStack = () => {
-  const currentStack = joinLines(splitLines(new Error().stack || '').slice(2));
+  const stackLinesToSkip = 3;
+  const currentStack = joinLines(splitLines(new Error().stack || '').slice(stackLinesToSkip));
   return currentStack;
 };
 const getNewLineIndex = (string, startIndex = undefined) => {
@@ -2208,6 +2532,12 @@ const invokeAndTransfer = (ipc, method, ...params) => {
   return invokeHelper(ipc, method, params, true);
 };
 
+class CommandNotFoundError extends Error {
+  constructor(command) {
+    super(`Command not found ${command}`);
+    this.name = 'CommandNotFoundError';
+  }
+}
 const commands = Object.create(null);
 const register = commandMap => {
   Object.assign(commands, commandMap);
@@ -2218,7 +2548,7 @@ const getCommand = key => {
 const execute = (command, ...args) => {
   const fn = getCommand(command);
   if (!fn) {
-    throw new Error(`command not found ${command}`);
+    throw new CommandNotFoundError(command);
   }
   return fn(...args);
 };
@@ -2531,7 +2861,7 @@ const create = (uid, uri, x, y, width, height, platform, assetDir) => {
     selectedTab: '',
     settings: [],
     settingsButtonEnabled: false,
-    showAdditionalDetailsBreakpoint: 600,
+    showAdditionalDetailsBreakpoint: 700,
     sizeOnDisk: 0,
     sizeValue: 0,
     tabs: [],
@@ -2539,17 +2869,25 @@ const create = (uid, uri, x, y, width, height, platform, assetDir) => {
     uri,
     webViews: [],
     width,
-    readmeUrl: ''
+    readmeUrl: '',
+    paddingLeft: 0,
+    paddingRight: 0,
+    showSideBar: true,
+    sideBarWidth: 0
   };
   set(uid, state, state);
 };
 
+const isEqual$3 = (oldState, newState) => {
+  return oldState.paddingLeft === newState.paddingLeft && oldState.paddingRight === newState.paddingRight && oldState.sideBarWidth === newState.sideBarWidth;
+};
+
 const isEqual$2 = (oldState, newState) => {
   return oldState.focus === newState.focus;
 };
 
 const isEqual$1 = (oldState, newState) => {
-  return oldState.activationEvents === newState.activationEvents && oldState.badge === newState.badge && oldState.categories === newState.categories && oldState.changelogVirtualDom === newState.changelogVirtualDom && oldState.commands === newState.commands && oldState.description === newState.description && oldState.detailsVirtualDom === newState.detailsVirtualDom && oldState.displaySize === newState.displaySize && oldState.extensionId === newState.extensionId && oldState.extensionVersion === newState.extensionVersion && oldState.jsonValidation === newState.jsonValidation && oldState.selectedFeature === newState.selectedFeature && oldState.selectedTab === newState.selectedTab && oldState.settings === newState.settings && oldState.themesMarkdownDom === newState.themesMarkdownDom && oldState.webViews === newState.webViews && oldState.sizeValue === newState.sizeValue;
+  return oldState.activationEvents === newState.activationEvents && oldState.badge === newState.badge && oldState.buttons === newState.buttons && oldState.categories === newState.categories && oldState.changelogVirtualDom === newState.changelogVirtualDom && oldState.commands === newState.commands && oldState.description === newState.description && oldState.detailsVirtualDom === newState.detailsVirtualDom && oldState.disabled === newState.disabled && oldState.displaySize === newState.displaySize && oldState.extensionId === newState.extensionId && oldState.extensionVersion === newState.extensionVersion && oldState.jsonValidation === newState.jsonValidation && oldState.selectedFeature === newState.selectedFeature && oldState.selectedTab === newState.selectedTab && oldState.settings === newState.settings && oldState.showSideBar === newState.showSideBar && oldState.sizeValue === newState.sizeValue && oldState.themesMarkdownDom === newState.themesMarkdownDom && oldState.webViews === newState.webViews;
 };
 
 const User = 1;
@@ -2562,9 +2900,10 @@ const isEqual = (oldState, newState) => {
 const RenderFocus = 2;
 const RenderItems = 3;
 const RenderScrollTop = 4;
+const RenderCss = 5;
 
-const modules = [isEqual$1, isEqual$2, isEqual];
-const numbers = [RenderItems, RenderFocus, RenderScrollTop];
+const modules = [isEqual$1, isEqual$2, isEqual, isEqual$3];
+const numbers = [RenderItems, RenderFocus, RenderScrollTop, RenderCss];
 
 const diff2 = uid => {
   const {
@@ -2589,7 +2928,7 @@ const None = 0;
 
 const getCopyMenuEntry = () => ({
   id: 'copy',
-  label: copy(),
+  label: copy$1(),
   flags: None,
   command: 'ClipBoard.execCopy'
 });
@@ -2673,13 +3012,87 @@ const disableExtension = id => {
   return disableExtension$1(id);
 };
 
-const handleClickDisable = async state => {
+const Web = 1;
+const Electron = 2;
+const Remote = 3;
+
+const getAllExtensions = async platform => {
+  if (platform === Web) {
+    return [];
+  }
+  // @ts-ignore
+  return getAllExtensions$1();
+};
+const getExtension$1 = async (id, platform) => {
+  // TODO only ask one extension from renderer worker instead of all
+  const allExtensions = await getAllExtensions(platform);
+  for (const extension of allExtensions) {
+    if (extension.id === id) {
+      return extension;
+    }
+  }
+  return undefined;
+};
+
+const getExtensionNew = async id => {
+  return getExtension$2(id);
+};
+const getExtension = async (id, platform) => {
+  try {
+    return await getExtensionNew(id);
+  } catch {
+    return getExtension$1(id, platform);
+  }
+};
+
+const getExtensionDetailButtons = (hasColorTheme, isBuiltin, isDisabled) => {
+  const allActions = [{
+    label: setColorTheme$3(),
+    onClick: HandleClickSetColorTheme,
+    enabled: hasColorTheme,
+    name: SetColorTheme
+  }, {
+    label: enable(),
+    onClick: HandleClickEnable,
+    enabled: isDisabled,
+    name: Enable
+  }, {
+    label: disable(),
+    onClick: HandleClickDisable,
+    enabled: !isDisabled,
+    name: Disable
+  }, {
+    label: uninstall(),
+    onClick: HandleClickUninstall,
+    enabled: !isBuiltin,
+    name: Uninstall
+  }];
+  const filteredButtons = allActions.filter(button => button.enabled);
+  return filteredButtons;
+};
+
+const updateExtensionStatus = async (state, updateFunction) => {
   const {
-    extensionId
+    extensionId,
+    platform,
+    hasColorTheme
   } = state;
-  await disableExtension(extensionId);
-  // TODO when it fails, show dialog / alert?
-  return state;
+  const error = await updateFunction(extensionId);
+  if (error) {
+    await confirm(`${error}`);
+  }
+  const extension = await getExtension(extensionId, platform);
+  const disabled = extension?.disabled;
+  const buttons = getExtensionDetailButtons(hasColorTheme, false, disabled);
+  return {
+    ...state,
+    disabled: extension?.disabled,
+    buttons
+  };
+};
+
+const handleClickDisable = async state => {
+  return updateExtensionStatus(state, disableExtension);
 };
 
 const selectFeature = async (state, name) => {
@@ -2730,10 +3143,6 @@ const handleClickScrollToTop = state => {
   };
 };
 
-const setColorTheme = id => {
-  return setColorTheme$1(id);
-};
-
 const getColorThemeId = extension => {
   if (extension && Array.isArray(extension.colorThemes) && extension.colorThemes.length > 0) {
     const colorTheme = extension.colorThemes[0];
@@ -2741,13 +3150,21 @@ const getColorThemeId = extension => {
   }
   return undefined;
 };
+
+const setColorTheme = id => {
+  return setColorTheme$1(id);
+};
+
 const handleClickSetColorTheme = async state => {
   const {
     extension
   } = state;
   const colorThemeId = getColorThemeId(extension);
   if (colorThemeId) {
-    await setColorTheme(colorThemeId);
+    const error = await setColorTheme(colorThemeId);
+    if (error) {
+      await confirm(`${error}`);
+    }
   }
   return state;
 };
@@ -2833,6 +3250,13 @@ const isEnoentError = error => {
   return error && error.code === ENOENT;
 };
 
+/* eslint-disable @typescript-eslint/prefer-readonly-parameter-types */
+const error = async error => {
+  // TODO send message to error worker or log worker
+  // @ts-ignore
+  console.error(message);
+};
+
 const join = (...parts) => {
   return parts.join('/');
 };
@@ -2842,14 +3266,12 @@ const loadChangelogContent = async path => {
     const changelogUrl = join(path, 'CHANGELOG.md');
     const changelogContent = await readFile(changelogUrl);
     return changelogContent;
-  } catch (error) {
-    if (isEnoentError(error)) {
+  } catch (error$1) {
+    if (isEnoentError(error$1)) {
       return '';
     }
-    // TODO send message to error worker
-    // @ts-ignore
-    console.error(new VError(error, 'Failed to load Changelog content'));
-    return `${error}`;
+    await error(new VError(error$1, 'Failed to load Changelog content'));
+    return `${error$1}`;
   }
 };
 
@@ -3044,39 +3466,6 @@ const existsFile = async uri => {
   return exists(uri);
 };
 
-const Web = 1;
-const Electron = 2;
-const Remote = 3;
-
-const getAllExtensions = async platform => {
-  if (platform === Web) {
-    return [];
-  }
-  // @ts-ignore
-  return getAllExtensions$1();
-};
-const getExtension$1 = async (id, platform) => {
-  // TODO only ask one extension from renderer worker instead of all
-  const allExtensions = await getAllExtensions(platform);
-  for (const extension of allExtensions) {
-    if (extension.id === id) {
-      return extension;
-    }
-  }
-  return undefined;
-};
-
-const getExtensionNew = async id => {
-  return getExtension$2(id);
-};
-const getExtension = async (id, platform) => {
-  try {
-    return await getExtensionNew(id);
-  } catch {
-    return getExtension$1(id, platform);
-  }
-};
-
 class ExtensionNotFoundError extends Error {
   constructor(extensionId) {
     super(`extension not found: ${extensionId}`);
@@ -3099,36 +3488,43 @@ const getBaseUrl = (extensionPath, platform) => {
   }
 };
 
-const getExtensionDetailButtons = (hasColorTheme, isBuiltin, isDisabled) => {
-  const allActions = [{
-    label: setColorTheme$3(),
-    onClick: HandleClickSetColorTheme,
-    enabled: hasColorTheme,
-    name: SetColorTheme
-  }, {
-    label: enable(),
-    onClick: HandleClickEnable,
-    enabled: isDisabled,
-    name: Enable
-  }, {
-    label: disable(),
-    onClick: HandleClickDisable,
-    enabled: !isDisabled,
-    name: Disable
-  }, {
-    label: uninstall(),
-    onClick: HandleClickUninstall,
-    enabled: !isBuiltin,
-    name: Uninstall
-  }];
-  return allActions;
-};
-
 const getExtensionIdFromUri = uri => {
   const id = uri.slice('extension-detail://'.length);
   return id;
 };
 
+const interpolate = (value, inMin, inMax, outMin, outMax) => {
+  const clamped = Math.min(Math.max(value, inMin), inMax);
+  const ratio = (clamped - inMin) / (inMax - inMin);
+  const mapped = outMin + ratio * (outMax - outMin);
+  return Math.round(mapped);
+};
+
+const getPadding = width => {
+  if (width < 600) {
+    return 10;
+  }
+  if (width < 800) {
+    return 10;
+  }
+  if (width < 1200) {
+    return interpolate(width, 800, 1200, 10, 30);
+  }
+  return 30;
+};
+const getSideBarWidth = width => {
+  if (width < 490) {
+    return 0;
+  }
+  if (width < 650) {
+    return Math.max(175 + Math.round(20 * (width / 100)), Math.round(width / 4));
+  }
+  if (width < 800) {
+    return Math.max(175 + Math.round(20 * (width / 100)), Math.round(width / 4));
+  }
+  return Math.max(175 + Math.round(20 * (width / 100)), Math.round(width / 4));
+};
+
 const getTabs = (selectedTab, hasReadme, hasFeatures, hasChangelog) => {
   const tabs = [{
     label: details(),
@@ -3210,6 +3606,36 @@ const getName = extension => {
   return 'n/a';
 };
 
+const getDownloadCount = extension => {
+  if (!extension) {
+    return 'n/a';
+  }
+
+  // Check for download count in various possible locations
+  const downloadCount = extension.downloadCount || extension.downloads || extension.marketplace?.downloadCount || extension.marketplace?.downloads || extension.packageJSON?.downloadCount || extension.packageJSON?.downloads;
+  if (!downloadCount) {
+    return 'n/a';
+  }
+
+  // Format the number with commas for better readability
+  return downloadCount.toLocaleString();
+};
+
+const getRating = extension => {
+  if (!extension) {
+    return 'n/a';
+  }
+
+  // Check for rating in various possible locations
+  const rating = extension.rating || extension.averageRating || extension.marketplace?.rating || extension.marketplace?.averageRating || extension.packageJSON?.rating || extension.packageJSON?.averageRating;
+  if (!rating) {
+    return 'n/a';
+  }
+
+  // Format rating to one decimal place
+  return rating.toFixed(1);
+};
+
 const getBadge = (builtin, badgeEnabled) => {
   if (builtin && badgeEnabled) {
     return 'builtin';
@@ -3235,16 +3661,20 @@ const loadHeaderContent = (state, platform, extension) => {
   const hasColorTheme = hasColorThemes(extension);
   const isBuiltin = extension?.builtin;
   const badge = getBadge(isBuiltin, builtinExtensionsBadgeEnabled);
+  const downloadCount = getDownloadCount(extension);
+  const rating = getRating(extension);
   return {
     badge,
     description,
+    downloadCount,
     extension,
     extensionId,
     extensionUri,
     extensionVersion,
     hasColorTheme,
     iconSrc,
-    name
+    name,
+    rating
   };
 };
 
@@ -3336,7 +3766,8 @@ function prettyBytes(number, options) {
   const exponent = Math.min(Math.floor(options.binary ? log(number) / Math.log(1024) : log10(number) / 3), UNITS.length - 1);
   number = divide(number, (options.binary ? 1024 : 1000) ** exponent);
   if (!localeOptions) {
-    number = number.toPrecision(3);
+    const minPrecision = Math.max(3, Number.parseInt(number, 10).toString().length);
+    number = number.toPrecision(minPrecision);
   }
   const numberString = toLocaleString(Number(number), options.locale, localeOptions);
   const unit = UNITS[exponent];
@@ -3502,12 +3933,14 @@ const loadContent = async (state, platform, savedState, isTest = false) => {
   const {
     badge,
     description,
+    downloadCount,
     extensionId,
     extensionUri,
     extensionVersion,
     hasColorTheme,
     iconSrc,
-    name
+    name,
+    rating
   } = headerData;
   const readmeUrl = join(extensionUri, 'README.md');
   const changelogUrl = join(extensionUri, 'CHANGELOG.md');
@@ -3523,7 +3956,6 @@ const loadContent = async (state, platform, savedState, isTest = false) => {
   const isBuiltin = extension?.isBuiltin;
   const disabled = extension?.disabled;
   const buttons = getExtensionDetailButtons(hasColorTheme, isBuiltin, disabled);
-  const enabledButtons = buttons.filter(button => button.enabled);
   const size = getViewletSize(width);
   const {
     selectedFeature,
@@ -3544,17 +3976,21 @@ const loadContent = async (state, platform, savedState, isTest = false) => {
     resources,
     folderSize
   } = await loadSideBarContent(extensionId, extensionVersion, extensionUri, isBuiltin);
+  const padding = getPadding(width);
+  const sideBarWidth = getSideBarWidth(width);
+  const showSideBar = sideBarWidth > 0;
   return {
     ...state,
     badge,
     baseUrl,
-    buttons: enabledButtons,
+    buttons,
     categories,
     changelogScrollTop,
     description,
     detailsVirtualDom,
     disabled,
     displaySize,
+    downloadCount,
     extension,
     extensionId,
     extensionUri,
@@ -3567,12 +4003,17 @@ const loadContent = async (state, platform, savedState, isTest = false) => {
     installationEntries,
     marketplaceEntries,
     name,
+    paddingLeft: padding,
+    paddingRight: padding,
+    rating,
     readmeScrollTop,
     readmeUrl,
     resources,
     scrollSource: Script,
     scrollToTopButtonEnabled: true,
     selectedTab,
+    showSideBar,
+    sideBarWidth,
     sizeOnDisk: size,
     sizeValue,
     tabs: enabledTabs
@@ -3596,11 +4037,35 @@ const openImageInNewTab = async state => {
   return state;
 };
 
+/* eslint-disable @typescript-eslint/prefer-readonly-parameter-types */
+
+const createCss = object => {
+  const inner = Object.entries(object).map(([key, value]) => `  --${key}: ${value}px;`).join('\n');
+  const full = `:root {\n${inner}\n}`;
+  return full;
+};
+
+const renderCss = (oldState, newState) => {
+  const {
+    uid,
+    paddingLeft,
+    paddingRight,
+    sideBarWidth
+  } = newState;
+  const css = createCss({
+    ExtensionDetailPaddingLeft: paddingLeft,
+    ExtensionDetailPaddingRight: paddingRight,
+    ExtensionDetailSideBarWidth: sideBarWidth,
+    ExtensionDetailMaxWidth: 1250
+  });
+  return ['Viewlet.setCss', uid, css];
+};
+
 const getChangelogVirtualDom = changelogDom => {
   // const notImplemented = ExtensionDetailStrings.notImplemented()
   // TODO set tabpanel role
   return [{
-    type: VirtualDomElements.Div,
+    type: Div,
     className: Changelog$1,
     childCount: 1
   }, ...changelogDom];
@@ -3608,11 +4073,11 @@ const getChangelogVirtualDom = changelogDom => {
 
 const getAdditionalDetailsEntryVirtualDom = (heading, items, renderer) => {
   return [{
-    type: VirtualDomElements.Div,
+    type: Div,
     className: AdditionalDetailsEntry,
     childCount: 2
   }, {
-    type: VirtualDomElements.Div,
+    type: Div,
     className: AdditionalDetailsTitle,
     childCount: 1
   }, text(heading), ...renderer(items)];
@@ -3624,7 +4089,7 @@ const getCategoryVirtualDom = category => {
     label
   } = category;
   return [{
-    type: VirtualDomElements.Button,
+    type: Button$1,
     className: Category,
     childCount: 1,
     onClick: HandleClickCategory,
@@ -3634,14 +4099,14 @@ const getCategoryVirtualDom = category => {
 
 const getCategoriesDom = categories => {
   return [{
-    type: VirtualDomElements.Div,
+    type: Div,
     className: Categories,
     childCount: categories.length
   }, ...categories.flatMap(getCategoryVirtualDom)];
 };
 
 const parentNode = {
-  type: VirtualDomElements.Dt,
+  type: Dt,
   className: MoreInfoEntryKey,
   childCount: 1
 };
@@ -3666,12 +4131,12 @@ const getMoreInfoEntryValueClassName = (onClick, code) => {
 
 const getMoreInfoEntryValueTag = (onClick, code) => {
   if (onClick) {
-    return VirtualDomElements.A;
+    return A;
   }
   if (code) {
-    return VirtualDomElements.Code;
+    return Code$2;
   }
-  return VirtualDomElements.Dd;
+  return Dd;
 };
 
 const getMoreInfoEntryValueVirtualDom = item => {
@@ -3693,12 +4158,12 @@ const getMoreInfoEntryValueVirtualDom = item => {
 };
 
 const parentNodeEven = {
-  type: VirtualDomElements.Div,
+  type: Div,
   className: MoreInfoEntry,
   childCount: 2
 };
 const parentNodeOdd = {
-  type: VirtualDomElements.Div,
+  type: Div,
   className: mergeClassNames(MoreInfoEntry, MoreInfoEntryOdd),
   childCount: 2
 };
@@ -3712,7 +4177,7 @@ const getMoreInfoEntryVirtualDom = item => {
 
 const getMoreInfoVirtualDom = items => {
   return [{
-    type: VirtualDomElements.Dl,
+    type: Dl,
     className: MoreInfo,
     childCount: items.length
   }, ...items.flatMap(getMoreInfoEntryVirtualDom)];
@@ -3720,7 +4185,7 @@ const getMoreInfoVirtualDom = items => {
 
 const resourceNode = {
   // TODO use link with url
-  type: VirtualDomElements.Div,
+  type: Div,
   className: Resource,
   childCount: 1
 };
@@ -3733,7 +4198,7 @@ const getResourceVirtualDom = resource => {
 
 const getResourcesVirtualDom = resources => {
   return [{
-    type: VirtualDomElements.Div,
+    type: Div,
     className: Resources,
     childCount: resources.length
   }, ...resources.flatMap(getResourceVirtualDom)];
@@ -3744,11 +4209,11 @@ const getAdditionalDetailsVirtualDom = (showAdditionalDetails, firstHeading, ent
     return [];
   }
   return [{
-    type: VirtualDomElements.Aside,
+    type: Aside$1,
     className: Aside,
     childCount: 1
   }, {
-    type: VirtualDomElements.Div,
+    type: Div,
     className: AdditionalDetails,
     tabIndex: 0,
     childCount: 4
@@ -3762,23 +4227,23 @@ const getChildCount = (additionalDetails, scrollToTopEnabled) => {
   }
   return count;
 };
-const getDetailsVirtualDom = (sanitizedReadmeHtml, width, scrollToTopButtonEnabled, categories$1, resources$1, showAdditionalDetailsBreakpoint, installationEntries, marketplaceEntries, hasReadme) => {
+const getDetailsVirtualDom = (sanitizedReadmeHtml, width, scrollToTopButtonEnabled, categories$1, resources$1, showAdditionalDetailsBreakpoint, installationEntries, marketplaceEntries, hasReadme, showSideBar) => {
   const firstHeading = installation();
   const secondHeading = marketplace();
   const thirdHeading = categories();
   const fourthHeading = resources();
-  const showAdditionalDetails = width > showAdditionalDetailsBreakpoint;
+  const showAdditionalDetails = showSideBar;
   const childCount = getChildCount(showAdditionalDetails);
   const contentDom = hasReadme ? sanitizedReadmeHtml : [{
-    type: VirtualDomElements.Div,
+    type: Div,
     childCount: 1,
     className: 'Markdown'
   }, text(noReadmeFound())];
   const dom = [{
-    type: VirtualDomElements.Div,
+    type: Div,
     className: ExtensionDetailPanel,
     childCount: childCount,
-    role: AriaRoles.Panel
+    role: Panel
   }, ...contentDom, ...getAdditionalDetailsVirtualDom(showAdditionalDetails, firstHeading, installationEntries, secondHeading, marketplaceEntries, thirdHeading, categories$1, fourthHeading, resources$1)];
   return dom;
 };
@@ -3792,7 +4257,7 @@ const getFeatureListItemVirtualDom = feature => {
   const className = selected ? 'Feature FeatureSelected' : Feature;
   return [{
     // TODO use role list item or tab
-    type: VirtualDomElements.Button,
+    type: Button$1,
     name: id,
     className,
     childCount: 1
@@ -3802,7 +4267,7 @@ const getFeatureListItemVirtualDom = feature => {
 const getFeatureListVirtualDom = features => {
   return [{
     // TODO use either list or tabs role
-    type: VirtualDomElements.Div,
+    type: Div,
     className: FeaturesList,
     childCount: features.length,
     onClick: HandleFeaturesClick
@@ -3812,14 +4277,14 @@ const getFeatureListVirtualDom = features => {
 const getFeaturesEmptyVirtualDom = () => {
   const none$1 = none();
   return [{
-    type: VirtualDomElements.Div,
+    type: Div,
     className: Features$1,
     childCount: 1
   }, text(none$1)];
 };
 
 const sash = {
-  type: VirtualDomElements.Div,
+  type: Div,
   className: mergeClassNames(Sash, SashVertical),
   childCount: 0
 };
@@ -3830,7 +4295,7 @@ const getFeaturesVirtualDom = (features, selectedFeature, state) => {
   const fn = getFeatureVirtualDomHandler(selectedFeature);
   const featureVirtualDom = fn(state);
   return [{
-    type: VirtualDomElements.Div,
+    type: Div,
     className: Features$1,
     childCount: 3
   }, ...getFeatureListVirtualDom(features), sash, ...featureVirtualDom];
@@ -3839,7 +4304,7 @@ const getFeaturesVirtualDom = (features, selectedFeature, state) => {
 const getExtensionDetailContentVirtualDom = (sanitizedReadmeHtml, selectedTab, width, scrollToTopButtonEnabled, categories, resources, breakpoint, changelogDom, state) => {
   switch (selectedTab) {
     case Details:
-      return getDetailsVirtualDom(sanitizedReadmeHtml, width, scrollToTopButtonEnabled, categories, resources, breakpoint, state.installationEntries, state.marketplaceEntries, state.hasReadme);
+      return getDetailsVirtualDom(sanitizedReadmeHtml, width, scrollToTopButtonEnabled, categories, resources, breakpoint, state.installationEntries, state.marketplaceEntries, state.hasReadme, state.showSideBar);
     case Features:
       return getFeaturesVirtualDom(state.features, state.selectedFeature, state);
     case Changelog:
@@ -3851,7 +4316,7 @@ const getExtensionDetailContentVirtualDom = (sanitizedReadmeHtml, selectedTab, w
 
 const getExtensionDetailDescriptionVirtualDom = description => {
   return [{
-    type: VirtualDomElements.Div,
+    type: Div,
     className: ExtensionDetailDescription,
     childCount: 1
   }, text(description)];
@@ -3859,7 +4324,7 @@ const getExtensionDetailDescriptionVirtualDom = description => {
 
 const getButtonVirtualDom = (message, onClick, name) => {
   return [{
-    type: VirtualDomElements.Button,
+    type: Button$1,
     className: mergeClassNames(Button, ButtonPrimary),
     onClick,
     name,
@@ -3872,14 +4337,14 @@ const getSettingsButtonVirtualDom = enabled => {
     return [];
   }
   return [{
-    type: VirtualDomElements.Button,
+    type: Button$1,
     className: SettingsButton,
     onClick: HandleClickSettings,
     childCount: 1,
     title: 'Settings',
     name: Settings
   }, {
-    type: VirtualDomElements.Span,
+    type: Span,
     className: SettingsIcon,
     childCount: 0,
     text: '⚙️'
@@ -3891,7 +4356,7 @@ const getExtensionDetailHeaderActionsVirtualDom = (buttonDefs, settingsButtonEna
   const buttons = enabledButtons.flatMap(btn => getButtonVirtualDom(btn.label, btn.onClick, btn.name));
   const settingsButton = getSettingsButtonVirtualDom(settingsButtonEnabled);
   const dom = [{
-    type: VirtualDomElements.Div,
+    type: Div,
     className: ExtensionDetailHeaderActions,
     childCount: enabledButtons.length + settingsButton.length
   }, ...buttons, ...settingsButton];
@@ -3900,7 +4365,7 @@ const getExtensionDetailHeaderActionsVirtualDom = (buttonDefs, settingsButtonEna
 
 const getExtensionDetailIconVirtualDom = iconSrc => {
   return {
-    type: VirtualDomElements.Img,
+    type: Img,
     className: ExtensionDetailIcon,
     alt: '',
     childCount: 0,
@@ -3915,7 +4380,7 @@ const getNameBadgeVirtualDom = badge => {
     return [];
   }
   return [{
-    type: VirtualDomElements.Span,
+    type: Span,
     className: ExtensionDetailNameBadge,
     childCount: 1
   }, text(badge)];
@@ -3923,7 +4388,7 @@ const getNameBadgeVirtualDom = badge => {
 
 const getExtensionDetailNameVirtualDom = (name, badge) => {
   return [{
-    type: VirtualDomElements.Div,
+    type: Div,
     className: ExtensionDetailName,
     childCount: badge ? 2 : 1
   }, text(name), ...getNameBadgeVirtualDom(badge)];
@@ -3931,11 +4396,11 @@ const getExtensionDetailNameVirtualDom = (name, badge) => {
 
 const getExtensionDetailHeaderVirtualDom = (name, iconSrc, description, badge, buttonDefs, settingsButtonEnabled) => {
   const dom = [{
-    type: VirtualDomElements.Div,
+    type: Div,
     className: ExtensionDetailHeader,
     childCount: 2
   }, getExtensionDetailIconVirtualDom(iconSrc), {
-    type: VirtualDomElements.Div,
+    type: Div,
     className: ExtensionDetailHeaderDetails,
     childCount: 3
   }, ...getExtensionDetailNameVirtualDom(name, badge), ...getExtensionDetailDescriptionVirtualDom(description), ...getExtensionDetailHeaderActionsVirtualDom(buttonDefs, settingsButtonEnabled)];
@@ -3957,8 +4422,8 @@ const getTabVirtualDom = tab => {
   const className = getTabClassName(selected);
   const ariaSelected = selected;
   return [{
-    type: VirtualDomElements.Button,
-    role: AriaRoles.Tab,
+    type: Button$1,
+    role: Tab,
     name,
     className,
     childCount: 1,
@@ -3969,10 +4434,10 @@ const getTabVirtualDom = tab => {
 
 const getTabsVirtualDom = tabs => {
   return [{
-    type: VirtualDomElements.Div,
+    type: Div,
     className: ExtensionDetailTabs,
     childCount: tabs.length,
-    role: AriaRoles.TabList,
+    role: TabList,
     onClick: HandleTabsClick,
     tabIndex: 0
   }, ...tabs.flatMap(getTabVirtualDom)];
@@ -4016,7 +4481,7 @@ const getExtensionDetailVirtualDom = (newState, selectedTab) => {
   const width = newState?.width || 500;
   const sizeClass = getClassNames(sizeValue);
   const dom = [{
-    type: VirtualDomElements.Div,
+    type: Div,
     className: mergeClassNames(Viewlet, ExtensionDetail, sizeClass),
     childCount: 3
   }, ...getExtensionDetailHeaderVirtualDom(name, iconSrc, description, badge, buttons, settingsButtonEnabled), ...getTabsVirtualDom(tabs), ...getExtensionDetailContentVirtualDom(detailsVirtualDom, selectedTab, width, scrollToTopButtonEnabled, categories, resources, showAdditionalDetailsBreakpoint, changelogVirtualDom, newState)];
@@ -4065,6 +4530,8 @@ const getRenderer = diffType => {
       return renderFocus;
     case RenderScrollTop:
       return renderScrollTop;
+    case RenderCss:
+      return renderCss;
     default:
       throw new Error('unknown renderer');
   }
@@ -4139,9 +4606,16 @@ const renderEventListeners = () => {
 };
 
 const resize = (state, dimensions) => {
+  const padding = getPadding(dimensions.width);
+  const sideBarWidth = getSideBarWidth(dimensions.width);
+  const showSideBar = sideBarWidth > 0;
   return {
     ...state,
-    ...dimensions
+    ...dimensions,
+    showSideBar,
+    paddingLeft: padding,
+    paddingRight: padding,
+    sideBarWidth
   };
 };